/* progress */
.progress {
  position: relative;
  height: 3px;
  display: block;
  width: 100%;
  border-radius: 2px;
  overflow: hidden;
}
.progress .indeterminate {
  background-color: #d53f8c;
}
.progress .indeterminate:before {
  content: '';
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
          animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.progress .indeterminate:after {
  content: '';
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #f687b3;
  will-change: left, right;
  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
          animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  -webkit-animation-delay: 1.15s;
          animation-delay: 1.15s;
}
@-webkit-keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}
@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}
@-webkit-keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}
@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}
@media (max-width: 575px) {html {font-size: 15px;}}
@media (min-width: 576px) and (max-width: 767px) {html {font-size: 15px;}}
@media (min-width: 768px) and (max-width: 991px) {html {font-size: 16px;}}
@media (min-width: 992px) {html {font-size: 16px;}}
/* font */
@font-face{
	font-family: "icomoon";
	src: url("../font/icomoon.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}
@font-face{
	font-family: "roboto";
	src: url("../font/roboto.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}
@font-face{
	font-family: "kitten";
	src: url("../font/kitten.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}
.fa{
	font-family: icomoon;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}
.fa-home:before{content:"\21"}
.fa-home2:before{content:"\22"}
.fa-home3:before{content:"\23"}
.fa-kantor:before{content:"\24"}
.fa-koran:before{content:"\25"}
.fa-edit:before{content:"\26"}
.fa-tinta:before{content:"\27"}
.fa-img:before{content:"\28"}
.fa-kamera:before{content:"\29"}
.fa-headphone:before{content:"\2a"}
.fa-musik:before{content:"\2b"}
.fa-playvid:before{content:"\2c"}
.fa-film:before{content:"\2d"}
.fa-video:before{content:"\2e"}
.fa-toa:before{content:"\2f"}
.fa-sinyal:before{content:"\30"}
.fa-mic:before{content:"\31"}
.fa-buku:before{content:"\32"}
.fa-buku2:before{content:"\33"}
.fa-teks:before{content:"\34"}
.fa-profil:before{content:"\35"}
.fa-file:before{content:"\36"}
.fa-file2:before{content:"\37"}
.fa-teks2:before{content:"\38"}
.fa-folder:before{content:"\39"}
.fa-folderadd:before{content:"\3a"}
.fa-foldermin:before{content:"\3b"}
.fa-folderdown:before{content:"\3c"}
.fa-folderup:before{content:"\3d"}
.fa-label:before{content:"\3e"}
.fa-barcode:before{content:"\3f"}
.fa-qrcode:before{content:"\40"}
.fa-buy:before{content:"\41"}
.fa-dolar:before{content:"\42"}
.fa-kartu:before{content:"\43"}
.fa-calc:before{content:"\44"}
.fa-phone:before{content:"\45"}
.fa-phone2:before{content:"\46"}
.fa-alamat:before{content:"\47"}
.fa-mail:before{content:"\48"}
.fa-pin:before{content:"\49"}
.fa-map:before{content:"\4a"}
.fa-map2:before{content:"\4b"}
.fa-kompas:before{content:"\4c"}
.fa-kompas2:before{content:"\4d"}
.fa-jam:before{content:"\4e"}
.fa-alarm:before{content:"\4f"}
.fa-bel:before{content:"\50"}
.fa-kalender:before{content:"\51"}
.fa-print:before{content:"\52"}
.fa-hp:before{content:"\53"}
.fa-save:before{content:"\54"}
.fa-db:before{content:"\55"}
.fa-undo:before{content:"\56"}
.fa-redo:before{content:"\57"}
.fa-chat:before{content:"\58"}
.fa-chat2:before{content:"\59"}
.fa-chat3:before{content:"\5a"}
.fa-user:before{content:"\5b"}
.fa-user2:before{content:"\5c"}
.fa-useradd:before{content:"\5d"}
.fa-usermin:before{content:"\5e"}
.fa-usercek:before{content:"\5f"}
.fa-boss:before{content:"\60"}
.fa-wait:before{content:"\61"}
.fa-spin:before{content:"\62"}
.fa-spin2:before{content:"\63"}
.fa-cari:before{content:"\64"}
.fa-zoomin:before{content:"\65"}
.fa-zoomout:before{content:"\66"}
.fa-key:before{content:"\67"}
.fa-lock:before{content:"\68"}
.fa-unlock:before{content:"\69"}
.fa-repair:before{content:"\6a"}
.fa-set:before{content:"\6b"}
.fa-set2:before{content:"\6c"}
.fa-set3:before{content:"\6d"}
.fa-magic:before{content:"\6e"}
.fa-medis:before{content:"\6f"}
.fa-bug:before{content:"\70"}
.fa-chartpie:before{content:"\71"}
.fa-chartline:before{content:"\72"}
.fa-chartbar:before{content:"\73"}
.fa-tropi:before{content:"\74"}
.fa-reward:before{content:"\75"}
.fa-gelas:before{content:"\76"}
.fa-mug:before{content:"\77"}
.fa-makan:before{content:"\78"}
.fa-daun:before{content:"\79"}
.fa-roket:before{content:"\7a"}
.fa-meter:before{content:"\7b"}
.fa-palu:before{content:"\7c"}
.fa-api:before{content:"\7d"}
.fa-lab:before{content:"\7e"}
.fa-del:before{content:"\7f"}
.fa-koper:before{content:"\80"}
.fa-plane:before{content:"\81"}
.fa-truk:before{content:"\82"}
.fa-jalan:before{content:"\83"}
.fa-orang:before{content:"\84"}
.fa-target:before{content:"\85"}
.fa-anti:before{content:"\86"}
.fa-power:before{content:"\87"}
.fa-on:before{content:"\88"}
.fa-klipcek:before{content:"\89"}
.fa-listnum:before{content:"\8a"}
.fa-list:before{content:"\8b"}
.fa-list2:before{content:"\8c"}
.fa-tree:before{content:"\8d"}
.fa-menu:before{content:"\8e"}
.fa-menu2:before{content:"\8f"}
.fa-menudown:before{content:"\90"}
.fa-menuup:before{content:"\91"}
.fa-cloud:before{content:"\92"}
.fa-clouddown:before{content:"\93"}
.fa-cloudup:before{content:"\94"}
.fa-cloudcek:before{content:"\95"}
.fa-download:before{content:"\96"}
.fa-upload:before{content:"\97"}
.fa-web:before{content:"\98"}
.fa-globe:before{content:"\99"}
.fa-link:before{content:"\9a"}
.fa-flag:before{content:"\9b"}
.fa-attach:before{content:"\9c"}
.fa-mata:before{content:"\9d"}
.fa-mataadd:before{content:"\9e"}
.fa-matamin:before{content:"\9f"}
.fa-matadel:before{content:"\a0"}
.fa-bookmark:before{content:"\a1"}
.fa-sun:before{content:"\a2"}
.fa-kontras:before{content:"\a3"}
.fa-bright:before{content:"\a4"}
.fa-star:before{content:"\a5"}
.fa-star2:before{content:"\a6"}
.fa-star3:before{content:"\a7"}
.fa-hati:before{content:"\a8"}
.fa-hati2:before{content:"\a9"}
.fa-man:before{content:"\aa"}
.fa-woman:before{content:"\ab"}
.fa-manwoman:before{content:"\ac"}
.fa-happy:before{content:"\ad"}
.fa-happy2:before{content:"\ae"}
.fa-smile:before{content:"\af"}
.fa-smile2:before{content:"\b0"}
.fa-sad:before{content:"\b1"}
.fa-sad2:before{content:"\b2"}
.fa-tunjukup:before{content:"\b3"}
.fa-tunjukr:before{content:"\b4"}
.fa-tunjukdown:before{content:"\b5"}
.fa-tunjukl:before{content:"\b6"}
.fa-warning:before{content:"\b7"}
.fa-alert:before{content:"\b8"}
.fa-tanya:before{content:"\b9"}
.fa-plus:before{content:"\ba"}
.fa-min:before{content:"\bb"}
.fa-info:before{content:"\bc"}
.fa-cancel:before{content:"\bd"}
.fa-block:before{content:"\be"}
.fa-cross:before{content:"\bf"}
.fa-cek:before{content:"\c0"}
.fa-enter:before{content:"\c1"}
.fa-exit:before{content:"\c2"}
.fa-play:before{content:"\c3"}
.fa-pause:before{content:"\c4"}
.fa-stop:before{content:"\c5"}
.fa-prev:before{content:"\c6"}
.fa-next:before{content:"\c7"}
.fa-backward:before{content:"\c8"}
.fa-forward:before{content:"\c9"}
.fa-play2:before{content:"\ca"}
.fa-pause2:before{content:"\cb"}
.fa-stop2:before{content:"\cc"}
.fa-backward2:before{content:"\cd"}
.fa-forward2:before{content:"\ce"}
.fa-first:before{content:"\cf"}
.fa-last:before{content:"\d0"}
.fa-prev2:before{content:"\d1"}
.fa-next2:before{content:"\d2"}
.fa-vol:before{content:"\d3"}
.fa-mute:before{content:"\d4"}
.fa-loop:before{content:"\d5"}
.fa-infinite:before{content:"\d6"}
.fa-arrowupl:before{content:"\d7"}
.fa-arrowup:before{content:"\d8"}
.fa-arrowupr:before{content:"\d9"}
.fa-arrowr:before{content:"\da"}
.fa-arrowdownr:before{content:"\db"}
.fa-arrowdown:before{content:"\dc"}
.fa-arrowdownl:before{content:"\dd"}
.fa-arrowl:before{content:"\de"}
.fa-circleup:before{content:"\df"}
.fa-circler:before{content:"\e0"}
.fa-circledown:before{content:"\e1"}
.fa-circlel:before{content:"\e2"}
.fa-sortasc:before{content:"\e3"}
.fa-sortdesc:before{content:"\e4"}
.fa-sortasc2:before{content:"\e5"}
.fa-sortdesc2:before{content:"\e6"}
.fa-sortasc3:before{content:"\e7"}
.fa-sortdesc3:before{content:"\e8"}
.fa-cekbox1:before{content:"\e9"}
.fa-cekbox2:before{content:"\ea"}
.fa-radio1:before{content:"\eb"}
.fa-radio2:before{content:"\ec"}
.fa-radio3:before{content:"\ed"}
.fa-crop:before{content:"\ee"}
.fa-cut:before{content:"\ef"}
.fa-tabel:before{content:"\f0"}
.fa-embed:before{content:"\f1"}
.fa-share:before{content:"\f2"}
.fa-mail2:before{content:"\f3"}
.fa-google:before{content:"\f4"}
.fa-drive:before{content:"\f5"}
.fa-fb:before{content:"\f6"}
.fa-ig:before{content:"\f7"}
.fa-wa:before{content:"\f8"}
.fa-twit:before{content:"\f9"}
.fa-rss:before{content:"\fa"}
.fa-yt:before{content:"\fb"}
.fa-wp:before{content:"\fc"}
.fa-joomla:before{content:"\fd"}
.fa-blog:before{content:"\fe"}
.fa-apple:before{content:"\ff"}
.fa-android:before{content:"\100"}
.fa-windows:before{content:"\101"}
.fa-chrome:before{content:"\102"}
.fa-firefox:before{content:"\103"}
.fa-ie:before{content:"\104"}
.fa-pdf:before{content:"\105"}
.fa-otd:before{content:"\106"}
.fa-word:before{content:"\107"}
.fa-excel:before{content:"\108"}
.fa-libre:before{content:"\109"}
.fa-html:before{content:"\10a"}

BODY{
	font-family: roboto;
	font-size: 1rem;
	margin: auto;
	max-width: 1000px;
	overflow: hidden;
	color: #000000;
}
TABLE{
	font-family: roboto;
	font-size: 1rem;
}
BUTTON{
	font-family: roboto;
	font-size: 1rem;
	padding: 10px 16px 10px 16px;
	border: none;
	text-decoration: none;
	outline: none;
	border-radius: 15px;
	background: linear-gradient(to bottom, #11AA11, #116611);
	color: #FFFFFF;
}
BUTTON:focus{
	background: linear-gradient(to top, #11AA11, #116611);
}
INPUT{
	font-family: roboto;
	font-size: 1rem;
	padding: 10px;
	border: none;
	text-decoration: none;
	outline: none;
	border-radius: 15px;
	box-shadow: 0px 1px 0px grey;
}
INPUT:focus{
	box-shadow: 0px 1px 0px #FF22AA;
}
TEXTAREA{
	font-family: roboto;
	font-size: 1rem;
	padding: 10px;
	border: none;
	text-decoration: none;
	outline: none;
	border-radius: 15px;
	box-shadow: 0px 1px 0px grey;
}
TEXTAREA:focus{
	box-shadow: 0px 1px 0px #FF22AA;
}
SELECT{
	font-family: roboto;
	font-size: 1rem;
	padding: 10px;
	border: none;
	text-decoration: none;
	outline: none;
	border-radius: 15px;
	box-shadow: 0px 1px 0px grey;
}
SELECT:focus{
	box-shadow: 0px 1px 0px #FF22AA;
}
A{
	font-family: roboto;
	border: none;
	text-decoration: none;
	outline: none;
}
H1{
	font-family: roboto;
	font-size: 1.125rem;
	color: #FF22AA;
}
H2{
	font-family: roboto;
	font-size: 1rem;
	color: #FF22AA;
}
H3,H4,H5,H6{
	font-family: roboto;
	font-size: .875rem;
	color: #FF22AA;
}
FORM{
	display: inline;
}
.full{
	width: 100%;
	height: 100%;
}
.fullw{
	width: 100%;
}
.fullh{
	height: 100%;
}
.left{
	text-align: left;
}
.right{
	text-align: right;
}
.center{
	text-align: center;
}
.hidden{
	display: none;
}
#page{
	width: 100%;
	height: 100%;
	display: none;
	overflow: auto;
}
#preload{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
}
.toast{
	padding: 11px;
	border-radius: 5px;
	background: #FFFFFF;
	text-align: center;
	color: #d53f8c;
}
#toast{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	display: none;
}
/* Wave animation ------------------ */
p {
  font-family: sans-serif;
  letter-spacing: 1px;
  font-size:14px;
  color: #333333;
}
.header {
  position:relative;
  text-align:center;
  background: linear-gradient(60deg, #d53f8c, #fbb6ce);
  color:white;
}
.logo {
  width:50px;
  fill:white;
  padding-right:15px;
  display:inline-block;
  vertical-align: middle;
}
.inner-header {
  height:65vh;
  width:100%;
  margin: 0;
  padding: 0;
}
.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:50px;
  max-height:50px;
}
.content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: white;
}
/* Animation */
.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 5s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 7s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 10s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 17s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
.logo{
	width: 150px;
	z-index: 1;
}