/*

Imminent - Coming Soon Template by Themewagon

Version: 1.0

Author: ThemeWagon

Author URI: http://www.themewagon.com

*/





/* =Common Styles

-------------------------------------------------------------- */



*,

*:before,

*:after {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



html {

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}



input,

button,

select,

textarea {

  font-family: inherit;

  font-size: inherit;

  line-height: inherit;

}



img {

  vertical-align: middle;

  max-width: 100%;

  height: auto;

}



body {

	background: #fff;

	color: #666666;

	font-family: 'Roboto', sans-serif;

	-webkit-font-smoothing: antialiased;

	-webkit-text-size-adjust: 100%;

}



section { overflow: hidden; }

::selection { background: #161a1b; color:#000; }

::-moz-selection { background: #161a1b; color:#000; }





/* =Typography

-------------------------------------------------------------- */

a {

    text-decoration: none;

}



h1, h2 { margin: 0; }



h1 {

	font-size: 70px;

	font-weight: 800;

	line-height: 80px;

	letter-spacing: -0.08em;

	color:#000000; 

}



h2 {

	font-size: 18px;

	font-weight: 800;

	line-height: 1em;

	letter-spacing: 0.2em;

	text-transform: uppercase;

	color: #161a1b;

}



#countdown div span {

	display:block;

	font-size: 40px;

	line-height: 50px;

	letter-spacing: initial;

	font-weight: 100;

	text-transform: uppercase;

}



#countdown div {

	display:inline-block;

    margin: 0 34px;

}



.sub-title {

	font-size: 18px;

	margin-top: 5px;

	margin-bottom: 0px;

}





/* =Content Styles

-------------------------------------------------------------- */



.wrapper {

  text-align: center;		

  position: absolute;

  overflow: hidden;

  display: table-cell;

  height: 100%;

  width: 100%;

  left: 0;

  top: 0;

}



.scene,

.layer {

  display: block;

  height: 100%;

  width: 100%;

  padding: 0;

  margin: 0;

}



.scene {

  position: relative;

  overflow: hidden;

}



.layer { position: absolute; }



.layer div {

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

  -moz-transform: translate3d(0,0,0);

  transform: translate3d(0,0,0);

  -webkit-transform-style: preserve-3d;

  -moz-transform-style: preserve-3d;

  transform-style: preserve-3d;

  -webkit-backface-visibility: hidden;

  -moz-backface-visibility: hidden;

  backface-visibility: hidden;

}





/* Background */

.background {

  background: url(../images/bgg.jpg) no-repeat 50% 100%;

  bottom: -20px;

  background-size: cover;

  position: absolute;

  width: 110%;

  left: -5%;

  top: -5%;

}





.sphere img{

	-webkit-transform: scale(0.7);

	-moz-transform: scale(0.7);

	-ms-transform: scale(0.7,0.7);

	transform: scale(0.7);

}





@media (max-width:767px) {



.title {

	top: 5% !important;

}    



}







/* Text */

.title {

	display: block;

	text-align: center;

	width: 100%;

	position: absolute;

	z-index: 2;

	top: 10%;

}



.line {

	display: block;

	margin: 0 auto;

	width: 60px;

	height: 1px;

	background: #00d9ec;

	margin-top: 10px;

}



.contact {

	display: block;

	width: 100%;

	position: absolute;

	z-index: 2;

	text-align: center;

	bottom: 5%;

}



.contact .icons {

	margin: 0;

	padding: 0;

	margin-bottom: 18px;

	text-align: center;

	list-style: none;

	list-style-type: none;

}



.contact .icons li {

	display: inline-block;

	margin-right: 10px;

}



.contact .icons li:last-of-type { margin-right: 0px; }



.contact .icons li a {

	display: block;

	width: 25px;

	height: 25px;

	opacity: .5;

	-webkit-transition: opacity 0.3s;

	-moz-transition: opacity 0.3s;

	transition: opacity 0.3s;

	color: #000000;

	font-size: 24px;

}





.contact .icons li a:hover {

	opacity: 1;

	-webkit-transition: opacity 0.3s;

	-moz-transition: opacity 0.3s;

	transition: opacity 0.3s;

}



.contact a.mail {

	text-decoration: none;

	color:#000;

	padding-bottom: 8px;

	font-size: 15px;

}



.contact a.mail::after {

	position: absolute;

	top: 100%;

	left: 50%;

	width: 125px;

	margin-left: -60px;

	margin-top: 10px;

	height: 1px;

	background: #666666;

	content: '';

	opacity: 0;

	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

	-moz-transition: opacity 0.3s, -moz-transform 0.3s;

	transition: opacity 0.3s, transform 0.3s;

	-webkit-transform: translateY(10px);

	-moz-transform: translateY(10px);

	transform: translateY(10px);

}



.contact a.mail:hover::after, .contact a.mail:focus::after {

	opacity: 1;

	-webkit-transform: translateY(0px);

	-moz-transform: translateY(0px);

	transform: translateY(0px);

}



/* Flakes Sizing */

.depth-5 img, .depth-4 img, .depth-3 img, .depth-2 img, .depth-1 img {

	-webkit-transform: scale(0.6);

	-moz-transform: scale(0.6);

	-ms-transform: scale(0.6,0.6);

	transform: scale(0.6);

}



/* Flakes Positioning */

.depth-5 {

	position: absolute;

	right: -100%;

	top: -24%;

}



.depth-4 {

	position: absolute;

	left: -10%;

	top: 37%;

 }



.depth-3.flake1 {

	display: none;

}



.depth-3.flake2 {

	position: absolute;

	right: 16%;

	bottom: 20%;

}



.depth-3.flake3 {

	position: absolute;

	left: 10%;

	bottom: 16%;

}



.depth-3.flake4 {

	display: none;

}



.depth-2.flake1 { 

	display: none;

}



.depth-2.flake2 {

	display: none;

}



.depth-1.flake1 {

	display: none;

}



.depth-1.flake2 { 

	position: absolute;

	right: 40%;

	top: 50%;

}



.depth-1.flake3 { 

	display: none;

}



.depth-1.flake4 { 

	position: absolute;

	right: 0;

	top: 0;

}





/* =Responsive Styles

-------------------------------------------------------------- */





@media (max-width: 767px) {

.hero {    margin-top: 184px !important;}	

}





@media (max-width: 320px) {

	/* HERO */

	h1 { font-size: 40px; line-height: 40px; }

	#countdown div span {font-size: 24px; line-height: 34px;}

	.sub-title { font-size: ; line-height: ; margin-top: 10px; }

	/* TITLE & CONTACT */

	.title { top: 15%;}

	.contact .icons { margin-bottom: 0px; }

	/* SIZES */

	.sphere img{

		-webkit-transform: scale(0.6);

		-moz-transform: scale(0.6);

		-ms-transform: scale(0.6,0.6);

		transform: scale(0.6);

	}

	/* POSITIONING */

	.depth-5 {

		position: absolute;

		right: -50%;

		top: -50%;

	}



	.depth-4 {

		left: -4%;

		top: 20%;

	 }



	.depth-3.flake1 {

		display: none;

	}



	.depth-3.flake2 {

		position: absolute;

		right: 16%;

		bottom: 20%;

	}



	.depth-3.flake3 {

		position: absolute;

		left: 10%;

		bottom: 16%;

	}



	.depth-3.flake4 {

		display: none;

	}



	.depth-2.flake1 { 

		display: none;

	}



	.depth-2.flake2 {

		display: none;

	}



	.depth-1.flake1 {

		display: none;

	}



	.depth-1.flake2 { 

		position: absolute;

		right: 40%;

		top: 40%;

	}



	.depth-1.flake3 { 

		display: none;

	}



	.depth-1.flake4 { 

		position: absolute;

		right: 0;

		top: 0;

	}

}





/* Landscape Phone */

@media all and (min-width: 400px) {

	/* HERO */

	h1 { font-size: 40px; line-height: 40px; }

	#countdown div span {font-size: 24px; line-height: 34px;}

	.sub-title { font-size: ; line-height: ; margin-top: 10px; }

	/* TITLE & CONTACT */

	.title { top: 15%;}

	.contact .icons { margin-bottom: 0px; }

	/* SIZES */

	.sphere img{

		-webkit-transform: scale(0.6);

		-moz-transform: scale(0.6);

		-ms-transform: scale(0.6,0.6);

		transform: scale(0.6);

	}

	/* POSITIONING */

	.depth-5 {

		position: absolute;

		right: -50%;

		top: -50%;

	}



	.depth-4 {

		left: -4%;

		top: 20%;

	 }



	.depth-3.flake1 {

		display: none;

	}



	.depth-3.flake2 {

		position: absolute;

		right: 16%;

		bottom: 20%;

	}



	.depth-3.flake3 {

		position: absolute;

		left: 10%;

		bottom: 16%;

	}



	.depth-3.flake4 {

		display: none;

	}



	.depth-2.flake1 { 

		display: none;

	}



	.depth-2.flake2 {

		display: none;

	}



	.depth-1.flake1 {

		display: none;

	}



	.depth-1.flake2 { 

		position: absolute;

		right: 40%;

		top: 40%;

	}



	.depth-1.flake3 { 

		display: none;

	}



	.depth-1.flake4 { 

		position: absolute;

		right: 0;

		top: 0;

	}

}



/* Tablet Portrait */

@media all and (min-width: 700px) {

	/* HERO */

	h1 { font-size: 90px; line-height: 90px; }

	.sub-title { font-size: 20px; line-height: 20px; margin-top: 10px; }

	/* TITLE & CONTACT */

	.title { top: 18%;}

	.line { margin-top: 20px; }

	.contact { bottom: 10%; }

	.contact .icons { margin-bottom: 12px; }

	/* SIZES */

	.sphere img{

		-webkit-transform: scale(1);

		-moz-transform: scale(1);

		-ms-transform: scale(1,1);

		transform: scale(1);

	}

	.depth-5 img, .depth-4 img, .depth-3 img, .depth-2 img, .depth-1 img {

		-webkit-transform: scale(0.8);

		-moz-transform: scale(0.8);

		-ms-transform: scale(0.8,0.8);

		transform: scale(0.8);

	}

	/* POSITIONING */

	.depth-5 {

		right: -25%;

		top: 3%;

	}



	.depth-4 {

		left: -3%;

		top: 15%;

	 }



	.depth-3.flake1 {

		display: none;

	}



	.depth-3.flake2 {

		right: 25%;

		bottom: 25%;

	}



	.depth-3.flake3 {

		left: 20%;

		bottom: 20%;

	}



	.depth-3.flake4 {

		display: block;

		position: absolute;

		left: 10%;

		bottom: 40%;

	}



	.depth-2.flake1 {

		display: none;

	}



	.depth-2.flake2 {

		display: none;

	}



	.depth-1.flake1 {

		display: none;

	}



	.depth-1.flake2 { 

		display: block;

		left: 15%;

		top: 25%;

	}



	.depth-1.flake3 { 

		display: none;

	}



	.depth-1.flake4 { 

		display: none;

	}

	

}



@media all and (min-width: 900px) {

	/* HERO */

	h1 { font-size: 120px; line-height: 120px; }



	#countdown div span {font-size: 34px; line-height: 34px;}

	

	.sub-title { font-size: 20px; line-height: 20px; margin-top: 20px; }

	/* TITLE & CONTACT */

	.title { top: 7%;}

	.contact { bottom: 8%; }

	.contact .icons { margin-bottom: 12px; }

	/* SIZES */

	.sphere img{

		-webkit-transform: scale(1);

		-moz-transform: scale(1);

		-ms-transform: scale(1,1);

		transform: scale(1);

	}

	.depth-5 img, .depth-4 img, .depth-3 img, .depth-2 img, .depth-1 img {

		-webkit-transform: scale(0.8);

		-moz-transform: scale(0.8);

		-ms-transform: scale(0.8,0.8);

		transform: scale(0.8);

	}

	/* POSITIONING */

	.depth-5 {

		right: -25%;

		top: 3%;

	}



	.depth-4 {

		left: -3%;

		top: 15%;

	 }



	.depth-3.flake1 {

		display: none;

	}



	.depth-3.flake2 {

		right: 25%;

		bottom: 25%;

	}



	.depth-3.flake3 {

		left: 20%;

		bottom: 20%;

	}



	.depth-3.flake4 {

		display: block;

		position: absolute;

		left: 10%;

		bottom: 40%;

	}



	.depth-2.flake1 {

		display: none;

	}



	.depth-2.flake2 {

		display: none;

	}



	.depth-1.flake1 {

		display: none;

	}



	.depth-1.flake2 { 

		display: block;

		left: 15%;

		top: 25%;

	}



	.depth-1.flake3 { 

		display: none;

	}



	.depth-1.flake4 { 

		display: none;

	}

}



@media all and (min-width: 1200px) {

	/* HERO */

	h1 { font-size: 150px; line-height: 150px; }

	#countdown div span {font-size: 44px; line-height: 44px;}

	.sub-title { font-size: 25px; line-height: 25px; margin-top: 20px; }

	/* SIZES */

	.sphere img{

		-webkit-transform: scale(1);

		-moz-transform: scale(1);

		-ms-transform: scale(1,1);

		transform: scale(1);

	}

	.depth-5 img, .depth-4 img, .depth-3 img, .depth-2 img, .depth-1 img {

		-webkit-transform: scale(1);

		-moz-transform: scale(1);

		-ms-transform: scale(1,1);

		transform: scale(1);

	}

	/* POSITIONING */

	.depth-5 {

		right: -10%;

		top: -10%;

		-webkit-animation: wave 9s 0.1s infinite linear;

		-moz-animation: wave 9s 0.1s infinite linear;

		animation: wave 9s 0.1s infinite linear;

	}



	.depth-4 {

		left: -3%;

		top: 15%;

		-webkit-animation: wave 7s 0.1s infinite linear;

		-moz-animation: wave 7s 0.1s infinite linear;

		animation: wave 7s 0.1s infinite linear;

	 }





	.depth-3 {

		-webkit-animation: wave 6s 0.1s infinite linear;

		-moz-animation: wave 6s 0.1s infinite linear;

		animation: wave 6s 0.1s infinite linear;

	}



	.depth-3.flake1 {

		display: block;

		position: absolute;

		left: 20%;

		top: 40%;

	}



	.depth-3.flake2 {

		right: 25%;

		bottom: 25%;

	}



	.depth-3.flake3 {

		left: 20%;

		bottom: 20%;

	}



	.depth-3.flake4 {

		display: block;

		position: absolute;

		left: 10%;

		bottom: 40%;

	}



	.depth-2 {

		-webkit-animation: wave 5s 0.1s infinite linear;

		-moz-animation: wave 5s 0.1s infinite linear;

		animation: wave 5s 0.1s infinite linear;

	}



	.depth-2.flake1 { 

		display: block;

		position: absolute;

		right: 40%;

		top: 40%;

	}



	.depth-2.flake2 { 

		display: none;

	}



	.depth-1 {

		-webkit-animation: wave 4s 0.1s infinite linear;

		-moz-animation: wave 4s 0.1s infinite linear;

		animation: wave 4s 0.1s infinite linear;

	}



	.depth-1.flake1 {

		display: block;

		position: absolute;

		left: 30%;

		bottom: 20%;

	}



	.depth-1.flake2 { 

		display: block;

		left: 15%;

		top: 25%;

	}



	.depth-1.flake3 { 

		display: none;

	}



	.depth-1.flake4 { 

		display: none;

	}

}



@media all and (min-width: 1400px) {

	/* HERO */

	h1 { font-size: 160px; line-height: 160px; }

	.sub-title { font-size: 25px; line-height: 25px; margin-top: 20px; }

	/* POSITIONING */

	.depth-5 {

		right: -10%;

		top: -5%;

	}



	.depth-4 {

		left: -3%;

		top: 15%;

	 }



	.depth-3.flake1 {

		display: block;

		position: absolute;

		left: 20%;

		top: 40%;

	}



	.depth-3.flake2 {

		right: 25%;

		bottom: 25%;

	}



	.depth-3.flake3 {

		left: 40%;

		bottom: 20%;

	}



	.depth-3.flake4 {

		display: block;

		position: absolute;

		left: 10%;

		bottom: 40%;

	}



	.depth-2.flake1 { 

		display: block;

		position: absolute;

		right: 40%;

		top: 40%;

	}



	.depth-2.flake2 { 

		display: none;

	}



	.depth-1.flake1 {

		display: block;

		position: absolute;

		left: 30%;

		bottom: 30%;

	}



	.depth-1.flake2 { 

		display: block;

		left: 15%;

		top: 25%;

	}



	.depth-1.flake3 { 

		display: block;

		position: absolute;

		bottom: 20%;

		right: 40%;

	}



	.depth-1.flake4 { 

		display: block;

		right: 40%;

		top: 25%;

	}

}



@media all and (min-width: 1600px) {

	/* HERO */

	h1 { font-size: 180px; line-height: 180px; }

	#countdown div span {font-size: 54px; line-height: 54px;}

	.sub-title { font-size: 25px; line-height: 25px; margin-top: 25px; }

}





@media all and (min-width: 1920px) {

	/* HERO */

	h1 { font-size: 200px; line-height: 200px; }

	.sub-title { font-size: 30px; line-height: 30px; margin-top: 30px; }

	/* POSITIONING */

	.depth-5 {

		right: -10%;

		top: 5%;

	}



	.depth-4 {

		left: 3%;

		top: 15%;

	 }



	.depth-3.flake1 {

		display: block;

		position: absolute;

		left: 20%;

		top: 40%;

	}



	.depth-3.flake2 {

		right: 25%;

		bottom: 25%;

	}



	.depth-3.flake3 {

		left: 40%;

		bottom: 20%;

	}



	.depth-3.flake4 {

		display: block;

		position: absolute;

		left: 10%;

		bottom: 40%;

	}



	.depth-2.flake1 { 

		display: block;

		position: absolute;

		right: 40%;

		top: 40%;

	}



	.depth-2.flake2 { 

		display: none;

	}



	.depth-1.flake1 {

		display: block;

		position: absolute;

		left: 30%;

		bottom: 30%;

	}



	.depth-1.flake2 { 

		display: block;

		left: 20%;

		top: 30%;

	}



	.depth-1.flake3 { 

		display: block;

		position: absolute;

		bottom: 30%;

		right: 40%;

	}



	.depth-1.flake4 { 

		display: block;

		right: 40%;

		top: 25%;

	}

}



/* =Animation

-------------------------------------------------------------- */



@-webkit-keyframes wave {

  0% {

    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);

    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);

    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);

  }



  100% {

    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);

    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);

    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);

  }

}



@-moz-keyframes wave {

  0% {

    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);

    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);

    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);

  }



  100% {

    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);

    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);

    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);

  }

}



@-ms-keyframes wave {

  0% {

    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);

    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);

    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);

  }



  100% {

    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);

    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);

    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);

  }

}



@keyframes wave {

  0% {

    -webkit-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);

    -moz-transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);

    transform: rotateZ(0deg) translate3d(0,10%,0) rotateZ(0deg);

  }



  100% {

    -webkit-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);

    -moz-transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);

    transform: rotateZ(360deg) translate3d(0,10%,0) rotateZ(-360deg);

  }

}





/* =404

-------------------------------------------------------------- */



.snap {

	display: block;

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: url(../images/404-background.jpg) no-repeat center;

	background-size: cover;

	text-align: center;

}



.snap .line { margin-bottom: 70px; }



.button {

	display: inline-block;

	margin-top: 80px;

	text-decoration: none;

	font-size: 9px;

	font-weight: 700;

	line-height: 1em;

	letter-spacing: 0.2em;

	text-transform: uppercase;

	color: #161a1b;

	background: transparent;

	border: 1px solid rgb(23,26,28);

	border: 1px solid rgba(23,26,28,.3);

	-webkit-border-radius: 10px;

	-moz-border-radius: 10px;

	border-radius: 4px;

	padding: 15px 25px;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

}



.button:hover {

	background: rgb(23,26,28);

	color:#000;

	border: 1px solid rgb(23,26,28);

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

}





@media all and (min-width: 700px) {

	.button {

		font-size: 12px;

		border-radius: 10px;

		padding: 25px 45px;

	}

}