/*web fonts*/
@font-face {
  font-family: 'Aleo-Bold';
  src: url('../fonts/Aleo-Bold.eot?#iefix') format('embedded-opentype'),  
 		 url('../fonts/Aleo-Bold.otf')  format('opentype'),
	     url('../fonts/Aleo-Bold.woff') format('woff'),
	     url('../fonts/Aleo-Bold.ttf')  format('truetype'),
	     url('../fonts/Aleo-Bold.svg#Aleo-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}


/*common css*/

body {margin: 0; padding: 0; box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	color: #fff; 
	background: url('../images/bk-img.jpg') center center no-repeat fixed; 
  	background-size: cover;}
h1,h2,p {margin: 0; line-height: 1;}
ul, li {list-style-type: none; margin: 0; padding: 0;}

/*main css*/
.coming-soon-data { width: 100%;position: relative;	}
.content {
	width: 100%;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
}
.text-info img {width: 25%;}
.text-info h1 {	
	font-family: 'Aleo-Bold';
	font-size: 61px;
	font-weight: 900;
	margin-bottom: 5px;
	position: relative;
	text-transform: uppercase;
	line-height: 1.363;
	letter-spacing: 5px;
}

/*timer*/

.timer-box { width: 800px; margin: 0 auto 2%; text-align: center;}
.timer-info { display: inline-block; line-height: 1; padding: 20px; font-size: 40px;}
.timer-info span {display: block;font-size: 25px;color: #fff;font-weight: 400;}
#timer { width: 800px;padding-top: 10px;}
#days,#hours,#minutes, #seconds {
  font-size: 60px;
  color: #fff;
  font-weight: 700;
  border: 1px solid #fff;
  margin-right: 5%;
  padding: 20px;
  min-width: 97px;
  width: 97px;
  height: 97px;
  border-radius: 50%;
}

/*footer*/

footer { position: fixed;bottom: 50px;right: 40px;text-align: right;}
.footer-info { width: 100%; display: inline-block;}
.social { width: 100%; display: inline-block;text-align: right;	margin-bottom: 15px;}
.social ul { float: right;}
.social li {float: left;width: 35px; margin-right: 32px;}
.social li:last-child { margin-right:0px;}
.social li a { display: inline-block;}
.footer-link p { font-size: 14px; font-weight: 700;	color: #fff;}
.footer-link p a {
	text-decoration: underline;
	text-transform: uppercase;
	color: #fff;
	transition:all 0.4s ease-in-out 0s;
	-webkit-transition:all 0.4s ease-in-out 0s;
	-o-transition:all 0.4s ease-in-out 0s;
	-moz-transition:all 0.4s ease-in-out 0s;
	-ms-transition:all 0.4s ease-in-out 0s;
}
.footer-link p a:hover { color: #9ec95e;}
.sprite { 
    background: url('../images/s-icon.png') no-repeat;  
	background-size: 650%;
	width: 40px;
	height: 40px;
	transition:all 0.3s ease-in-out 0s;
	-webkit-transition:all 0.3s ease-in-out 0s;
	-o-transition:all 0.3s ease-in-out 0s;
	-moz-transition:all 0.3s ease-in-out 0s;
	-ms-transition:all 0.3s ease-in-out 0s;
}
.f-icon { background-position: 2px 2px; } 
.t-icon { background-position: -72px 2px; } 
.in-icon { background-position: -148px 2px; } 
.net-icon { background-position: -221px 2px; } 
.social a:hover{
	transform:scale(1.2);
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
	-ms-transform:scale(1.2);
	-o-transform:scale(1.2);
}



/* Responsive Css */
@media only screen and (min-width:2880px){ 

	.text-info img { width: auto;}
	.text-info h1 { font-size: 131px;margin-bottom: 67px;}
	.footer-link p { font-size: 30px;}
	.social { margin-bottom: 44px;}
	.social li, .sprite { width:80px; height:82px;}
	.social li { margin-right: 64px;}
	.f-icon { background-position: 0px 0px;} 	
	.t-icon { background-position: -145px 0px;}	
	.in-icon { background-position: -293px 0px;} 	
	.net-icon { background-position: -443px 0px;} 

	.timer-box { margin-bottom: 9.5%;width: 100%;}
	#timer {padding-top: 16px;width:100%;}
	#days,#hours,#minutes,#seconds {
		padding: 40px;
		font-size: 120px;
		min-width: 230px;
		width: 230px;
		height: 230px;
	}
	#seconds {margin-right: 0;}
	.timer-info span { font-size: 60px;}	

}

@media only screen and (max-width:1024px){
	.text-info img {width: 40%;} 
}

@media only screen and (max-width:823px){
	.content {width: 85%;}
	.text-info h1 {font-size: 29px;letter-spacing: 2px;}
	
	footer {bottom: 10px;text-align:right;right:20px;}
	.social {text-align: center;margin-bottom: 0px;}
	.social ul {width: auto;display: inline-block;float: none;}
	.social li {width: 40px;margin-right: 10px;}

	.timer-box {width: 320px;display:block;}
	#timer {padding: 10px 0;width: 320px;display: inline;}
	#days,#hours,#minutes,#seconds {font-size: 20px;margin-right: 0px;min-width: 46px;padding: 10px;width: 46px; height: 46px;}
	.timer-info span {font-size: 12px;}
	#seconds {margin-right: 0;}
	
}

@media only screen and (max-width:768px){
	.content {width: 100%;}
	.text-info h1 {font-size: 40px;}
	.timer-box {width: 500px;}
	#timer {width: 100%;}
	#days, #hours, #minutes, #seconds { min-width: 70px; font-size: 40px; width: 70px; height: 70px;}

}

@media only screen and (max-width:739px){
	.content {width: 85%;}
	.text-info img {width: 40%;} 
	.text-info h1 {font-size: 29px;} 
	
	footer {bottom: 10px;text-align: center;left: 0;right:0;margin: 0 auto;}
	.social {margin-bottom:0;}
	.social li {width: 25px;margin-right: 20px;}
	.sprite {width: 25px;height: 25px;}
	.f-icon {background-position: 1px 1px;}
	.t-icon {background-position: -45px 1px;}
	.in-icon {background-position: -92px 1px;}
	.net-icon {background-position: -138px 1px;}
	.footer-link p {font-size: 12px;}

	.timer-box {width: 500px;}
	#timer {width: 100%;}
	#days, #hours, #minutes, #seconds { min-width: 50px; font-size: 25px; width: 50px; height: 50px;}
	.footer-info p {font-size: 12px;}
}

@media only screen and (max-width:479px) {
	.text-info img {width: 70%; margin-bottom: 10px;}	
	.text-info h1 {font-size: 36px;}	
	
	footer {bottom: 20px;}
	.social {margin-bottom: 10px;}
	.footer-link p {font-size: 14px;}

	.timer-box {display: inline;}
	#days, #hours, #minutes, #seconds { min-width: 46px; font-size: 20px; width: 46px; height: 46px; padding: 10px 5px 5px;}	
	.footer-info {bottom: 15px;}
}

@media only screen and (max-width:320px) {	
	.text-info h1 {font-size: 29px;}
}