.menu .menu__link {

	color: #000; font-family: 'Khand', sans-serif; font-size: 22px; font-weight: 300;

	position: relative;

	margin: 0 .8em .6em;

	padding-top: 1em; padding-bottom: 7px; padding-right: 0; padding-left: 0;

	-webkit-transition: color 0.4s;

			transition: color 0.4s;

	cursor: pointer;

}

.Sikuani .menu .menu__link {

	margin: 0 .6em .6em; font-size: 20px;

}



.menu .active .menu__link,

.menu .active .menu__link:hover,

.menu .active .menu__link:focus {

	color: #d94f5c;

}



.menu .active .menu__link::after,

.menu .active .menu__link::before {

	-webkit-transform: scale3d(1, 1, 1);

		    transform: scale3d(1, 1, 1);

}



.menu .active .menu__link::before {

	-webkit-transition-delay: 0s;

			transition-delay: 0s;

}



.menu .menu__link:hover,

.menu .menu__link:focus {

	color: #d94f5c; background-color: transparent;

}



.menu .menu__link:hover::before,

.menu .menu__link:focus::before {

	-webkit-transform: scale3d(1, 1, 1);

			transform: scale3d(1, 1, 1);

	-webkit-transition-delay: 0s;

			transition-delay: 0s;

}



.menu .menu__link::before,

.menu .menu__link::after {

	content: '';

	position: absolute; bottom: 0; left: 0;

	width: 100%; height: 3px;

	-webkit-transform: scale3d(0, 1, 1);

			transform: scale3d(0, 1, 1);

	-webkit-transform-origin: center left;

			transform-origin: center left;

	-webkit-transition: transform 0.2s cubic-bezier(0.22, 0.31, 0.16, 1);

			transition: transform 0.2s cubic-bezier(0.22, 0.31, 0.16, 1);

}



.menu .menu__link::before {

	background: #d94f5c;

	-webkit-transition-delay: 0.1s;

			transition-delay: 0.1s;

}



.menu .menu__link::after {

	background: #d94f5c;

}



.reveal-text, .reveal-text::after,

.reveal-text2, .reveal-text2::after {

	-webkit-animation-delay: 600ms;

	        animation-delay: 600ms;

	-webkit-animation-iteration-count: 1;

	        animation-iteration-count: 1;

	-webkit-animation-duration: 895ms;

	        animation-duration: 895ms;

	-webkit-animation-fill-mode: both;

	        animation-fill-mode: both;

	-webkit-animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);

	        animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);

}

.reveal-text2, .reveal-text2::after {

	-webkit-animation-delay: 800ms;

		 -o-animation-delay: 800ms;

			animation-delay: 800ms;

}

.reveal-text, .reveal-text2 {

	position: relative;

	display: block;

	-webkit-user-select: none;

	   -moz-user-select: none;

	    -ms-user-select: none;

	        user-select: none;

	-webkit-animation-name: reveal-text;

	        animation-name: reveal-text;

	color: #FFF; margin: 0;

	white-space: nowrap;

	cursor: default

}

.reveal-text{

	color: #fcbc00;

}

.reveal-text::after, .reveal-text2::after {

	content: "";

	position: absolute; top: 0; left: 0; right: 0; bottom: 0;

	z-index: 999;

	background-color: #fcbc00;

	-webkit-transform: scaleX(0);

	        transform: scaleX(0);

	-webkit-transform-origin: 0 50%;

	        transform-origin: 0 50%;

	pointer-events: none;

	-webkit-animation-name: revealer-text;

	        animation-name: revealer-text;

}

		.reveal-text2::after {

			background-color: #fff;

		}



@-webkit-keyframes reveal-text {

	from {

		-webkit-clip-path: inset(0 100% 0 0);

		        clip-path: inset(0 100% 0 0);

	}

	to {

		-webkit-clip-path: inset(0 0 0 0);

		        clip-path: inset(0 0 0 0);

	}

}

@keyframes reveal-text {

	from {

		-webkit-clip-path: inset(0 100% 0 0);

		        clip-path: inset(0 100% 0 0);

	}

	to {

		-webkit-clip-path: inset(0 0 0 0);

		        clip-path: inset(0 0 0 0);

	}

}

@-webkit-keyframes revealer-text {

	0%, 50% {

		-webkit-transform-origin: 0 50%;

		        transform-origin: 0 50%;

	}	

	60%, 100% {

		-webkit-transform-origin: 100% 50%;

		        transform-origin: 100% 50%;		

	}

	60% {

		-webkit-transform: scaleX(1);

		        transform: scaleX(1);

	}

	100% {

		-webkit-transform: scaleX(0);

		        transform: scaleX(0);

	}

}

@keyframes revealer-text {	

	0%, 50% {

		-webkit-transform-origin: 0 50%;

		        transform-origin: 0 50%;

	}

	60%, 100% {

		-webkit-transform-origin: 100% 50%;

		        transform-origin: 100% 50%;		

	}

	60% {

		-webkit-transform: scaleX(1);

		        transform: scaleX(1);

	}	

	100% {

		-webkit-transform: scaleX(0);

		        transform: scaleX(0);

	}

}







a.arrow {

  	position: absolute; bottom: -110px; right: 3%;

  	z-index: 2;

  	display: inline-block;

  	-webkit-transform: translate(0, -50%);

  			transform: translate(0, -50%);

  	color: #fff;

  	letter-spacing: .1em;

  	text-decoration: none;

  	transition: opacity .3s;

}

a.arrow:hover {

  	opacity: .5;

}

a.arrow {

  	padding-top: 60px;

}

a.arrow span {

  	position: absolute; top: -20px; left: 50%;

  	width: 20px; height: 36px;

  	margin-left: -15px;

  	border: 2px solid #fff;

  	border-radius: 50px;

  	box-sizing: border-box;

}

a.arrow span::before {

  	content: '';

  	position: absolute; left: 50%; top: 6px;

  	width: 6px; height: 6px;

  	margin-left: -3px;

  	background-color: #fff;

  	border-radius: 100%;

  	-webkit-animation: sdb10 2s infinite;

  			animation: sdb10 2s infinite;

  	box-sizing: border-box;

}

@-webkit-keyframes sdb10 {

  0% {

    -webkit-transform: translate(0, 0);

    opacity: 0;

  }

  40% {

    opacity: 1;

  }

  80% {

    -webkit-transform: translate(0, 15px);

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

@keyframes sdb10 {

  0% {

    transform: translate(0, 0);

    opacity: 0;

  }

  40% {

    opacity: 1;

  }

  80% {

    transform: translate(0, 15px);

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}





/************ Input style ********/



.margin {

	margin: .5em 0;

}



:focus{outline: none;}



/* necessary to give position: relative to parent. */

input[type="text"], textarea

{ font: 15px/20px 'Titillium Web', sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px; background-color: rgba(255, 255, 255, 0.55);}



:focus{outline: none;}



input[type="text"]:focus, textarea:focus{

	background-color: #fff;

}



.effect-8 {border: 1px solid #ccc; padding: 7px 14px 9px; transition: 0.4s;}



.effect-8 ~ .focus-border:before,

.effect-8 ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #4a7baa; transition: 0.3s;}

.effect-8 ~ .focus-border:after{top: auto; bottom: 0; left: auto; right: 0;}

.effect-8 ~ .focus-border i:before,

.effect-8 ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #4a7baa; transition: 0.4s;}

.effect-8 ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0;}

.effect-8:focus ~ .focus-border:before,

.effect-8:focus ~ .focus-border:after{width: 100%; transition: 0.3s;}

.effect-8:focus ~ .focus-border i:before,

.effect-8:focus ~ .focus-border i:after{height: 100%; transition: 0.4s;}



/*********** MODAL HERE ****************/

.modal, .modal-box {

  z-index: 900;

}

.modal-sandbox {

  	position: fixed; top: 0; left: 0;

  	width: 100%; height: 100%;

  	background: transparent;

}

.modal {

  	display: none; 

  	position: fixed; left: 0; top: 0;

  	width: 100%; height: 100%;

  	background: rgba(0,0,0,.8);

  	overflow: auto;

}

.modal-box {

  	position: relative;

  	width: 80%; max-width: 410px;

  	margin: 100px auto;

  	animation-name: modalbox;

  	animation-duration: .4s;

  	animation-timing-function: cubic-bezier(0,0,.3,1.6);

	-webkit-box-shadow: -50px 0 200px -50px #4576a3, 50px 0 200px -50px #dee8e0;

			box-shadow: -50px 0 200px -50px #4576a3, 50px 0 200px -50px #dee8e0;

}



.modal-header {

  	padding: 0px 20px;

  	background: #4576a3; color: #ffffff;

}

.modal-header h2{

	text-align: center; margin: .2em 0;

}



.modal-body {

  	background: #ECEFF1;

  	padding: 10px 20px; height: 390px;

}



/* Close Button */

.close-modal {

  	text-align: right;

  	cursor: pointer;

	position: absolute; right: 15px; top: 10px; font-size: 25px;

	-webkit-transform: rotate(45deg);

		-ms-transform: rotate(45deg);

		 -o-transform: rotate(45deg);

			transform: rotate(45deg);

	-webkit-transition: all .6s;

		 -o-transition: all .6s;

		    transition: all .6s;

}

.close-modal:hover{

	-webkit-transform: rotate(180deg);

		-ms-transform: rotate(180deg);

		 -o-transform: rotate(180deg);

			transform: rotate(180deg);

}



/* Animation */

@-webkit-keyframes modalbox {

  0% {

    top: -250px; 

    opacity: 0;

  }

  100% {

    top: 0; 

    opacity: 1;

  }

}



@keyframes modalbox {

  0% {

    top: -250px; 

    opacity: 0;

  }

  100% {

    top: 0; 

    opacity: 1;

  }

}