/*Nunito Font */
@font-face {
	font-family: 'NunitoRegular';
	src: url('../fonts/NunitoRegular.eot');
	src: url('../fonts/NunitoRegular.eot') format('embedded-opentype'),
		url('../fonts/NunitoRegular.woff2') format('woff2'),
		url('../fonts/NunitoRegular.woff') format('woff'),
		url('../fonts/NunitoRegular.ttf') format('truetype'),
		url('../fonts/NunitoRegular.svg') format('svg');
	}

@font-face {
	font-family: 'NunitoMedium';
	src: url('../fonts/NunitoMedium.eot');
	src: url('../fonts/NunitoMedium.eot') format('embedded-opentype'),
		url('../fonts/NunitoMedium.woff2') format('woff2'),
		url('../fonts/NunitoMedium.woff') format('woff'),
		url('../fonts/NunitoMedium.ttf') format('truetype'),
		url('../fonts/NunitoMedium.svg') format('svg');
	}
@font-face {
	font-family: 'NunitoBold';
	src: url('../fonts/NunitoBold.eot');
	src: url('../fonts/NunitoBold.eot') format('embedded-opentype'),
		url('../fonts/NunitoBold.woff2') format('woff2'),
		url('../fonts/NunitoBold.woff') format('woff'),
		url('../fonts/NunitoBold.ttf') format('truetype'),
		url('../fonts/NunitoBold.svg') format('svg');
	}

/*Nunito Font */



* {
	margin: 0;
	padding: 0;
	list-style: none;
}

body {
	margin: 0;
	padding: 0;
	height: 100vh;
	font-family: 'NunitoRegular';
	position: relative;
}

.fadeIn {
  opacity: 0;
  /* make things invisible upon start */
  -webkit-animation: fadeIn ease-in 1;
  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}


.fadeIn.one {
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

.fadeIn.two {
	-webkit-animation-delay: 0.85s;
	-moz-animation-delay: 0.85s;
	animation-delay: 0.85s;
}
.fadeIn.three {
	-webkit-animation-delay: 1.20s;
	-moz-animation-delay: 1.20s;
	animation-delay: 1.20s;
}

.fadeIn.four {
	-webkit-animation-delay: 1.55s;
	-moz-animation-delay: 1.55s;
	animation-delay: 1.55s;
}
.fadeIn.five {
	-webkit-animation-delay: 1.90s;
	-moz-animation-delay: 1.90s;
	animation-delay: 1.90s;
}



:root {
	--black: #000;
	--yellow: #F7962C;
	--orange: #ff6d2d;
	--white: #fff;
	--grey: #5D5D5D;
	--light-grey: #F8F8F8;
	--padding-20-32: 1.389vw 2.222vw;
}

.bg-black {
	background: var(--black);
}


@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}



header {
	padding: var(--padding-20-32);
	border-bottom: 1px solid rgba(93, 93, 93, 0.5);
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 999;
}

.bg-white header {
	background: var(--white);
}
.bg-black header {
	background: var(--black);
}


header .logo_div {
	width: 7.639vw;
}

header .logo_div img {
	width: 100%;
}

.main {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.main.bg-white {
	z-index: -1;
	opacity: 0;
}

.main_sec {
	padding: 9.444vw 2.222vw 0;
	margin-bottom: 9.444vw;
/*	height: 100vh;*/
}

.go_back {
	overflow: hidden;
	height: 100%;
}

.main_sec .side_nav .nav_holder li a {
	color: var(--grey);
	text-decoration: none;
	font-family: 'NunitoMedium';
	font-size: 5vw;
	position: relative;
}

.main_sec .side_nav .nav_holder li a:hover {
	color: #ffffff;
	transition: 0.5s;
}

.main_sec .side_nav .nav_holder li a:after {
	content: '';
	position: absolute;
	width: 0.833vw;
	height: 0.833vw;
	background: var(--yellow);
	border-radius: 100%;
	bottom: 1.75vw;
	right: -1.250vw;
	opacity: 0;	
}

.main_sec .side_nav .nav_holder li a:hover:after {
	opacity: 1;
	transition: 0.5s;	
}


.main_sec .stay_tuned {
	font-size: 4.167vw;
	font-family: 'NunitoBold';
}

.main_sec .stay_tuned a {
	text-decoration: none;
	color: var(--black);
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 34vw;
	margin: 0 auto;
}


.main_sec .stay_tuned a span.back {
	font-size: 1vw;
	background: var(--yellow);
	border-radius: 100%;
	padding: 0.556vw 0;
	height: 2.222vw;
	width: 2.222vw;
	margin-right: 1.667vw;
	position: relative;
	overflow: hidden;
}

.main_sec .stay_tuned a:hover span.back {
	background: var(--orange);
	transition: 0.5s;
}

.main_sec .stay_tuned a span.back i {
	position: absolute;
	top: 0.556vw;
	transition: 0.5s;
}
.main_sec .stay_tuned a span.back i._b {
	right: 0;
	left: 0;
	opacity: 1;	
}

.main_sec .stay_tuned a:hover span.back i._b {
	left: -3.5vw;
	opacity: 0;
}

.main_sec .stay_tuned a span.back i._w {
	right: -3.5vw;
	opacity: 0;
}

.main_sec .stay_tuned a:hover span.back i._w {
	right: 0;
	left: 0;
	opacity: 1;
}


.footer {
	padding: var(--padding-20-32);
	position: fixed;
	width: 100%;
	bottom: 0;
	background: var(--black);
}

.footer .mail p a {
	text-decoration: none;
	font-size: 0.972vw;
}
		
.footer .social img {	
	width: 1.667vw;
}

.bg-white .footer {
	background: var(--light-grey);
}

.bg-white .footer .mail p a  {
	color: var(--black);
}



@media (min-width: 768px) and (max-width: 980px) {

:root {
	--padding-20-16: 2.604vw 2.083vw;
}	
	
header {
    padding: var(--padding-20-16);
}	

header .logo_div {
	width: 15.365vw;
}
	
	
.main_sec {
	padding: 17.708vw 2.222vw;
}

.main_sec .side_nav .nav_holder li a {
	font-size: 9.375vw;
}	

.main_sec .side_nav .nav_holder li a:after {
	width: 1.563vw;
    height: 1.563vw;
	bottom: 3.25vw;
	right: -3vw;
}	
	
.main_sec .stay_tuned {
	font-size: 7.813vw;
}
	
.main_sec .stay_tuned a {
    max-width: 80vw;
}	
	
.main_sec .stay_tuned a span.back {
	width: 4.167vw;
	height: 4.167vw;
	font-size: 2vw;
	padding: 1.042vw 0;
}
	
.main_sec .stay_tuned a span.back i {
	top: 1.042vw;
}
	
	
.footer {	
	padding: var(--padding-20-16);
}
.footer .mail p a {	
	font-size: 1.823vw;
}
	
.footer .social img {
	width: 3.125vw;
}	
	
}


@media (max-width: 679px) {

:root {
	--padding-10-16: 3.125vw 5vw;
}	
	
header {
    padding: var(--padding-10-16);
}	

header .logo_div {
	width: 18.750vw;
}		

.main_sec {
	padding: 22.500vw 5vw;
/*	height: 100%;*/
}	
	
.main_sec .side_nav .nav_holder li a {
	font-size: 10vw;
}	

.main_sec .side_nav .nav_holder li a:after {
	width: 1.875vw;
	height: 1.875vw;
	border-radius: 100%;
	bottom: 3.5vw;
	right: -2.813vw;
	opacity: 0;	
}	
	
.main_sec .stay_tuned {
	font-size: 9.375vw;
}

.main_sec .stay_tuned a	{
	max-width: 100vw;
}

.main_sec .stay_tuned a span.back {
	font-size: 3.25vw;
    padding: 1.875vw 0;
    height: 7.500vw;
    width: 7.500vw;
    margin-right: 3.750vw;
}

.main_sec .stay_tuned a span.back i {
	top: 1.875vw;
}	

.main_sec .stay_tuned a:hover span.back i._b {
	left: -10vw;
}
	
.main_sec .stay_tuned a span.back i._w {
	right: -10vw;
}	
	
	
.footer {	
	padding: var(--padding-10-16);
}
		
.footer .mail p a {	
	font-size: 3.125vw;
}	
	
.footer .social img {	
	width: 5vw;
}
	
}



