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

Project:	A Future HTML UI Kit
Version:	1.0.0
Author: 	webstrot 

------------------------------------------------------------------
[Table of contents]
 
1. main_wrapper start
2. main_wrapper_text start
3. main_wrapper_social_icons start

*/


/* body */

body {
	font-family: 'Roboto';
    height: 100%;
    min-height: 100%;
    background-size: 100% 100%;
    margin: 0;
    overflow: hidden;
}
.bg-overlay {
	background: url(../images/coming-soon/coming-soon-img-2/main_wrapper_bg.jpg) repeat;
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
	position:absolute;
}

/*======================== main_wrapper ========================*/

body > .main_wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height:600px;
	z-index: 1;
}


/*======================== main_wrapper_text ========================*/

.main_wrapper_text {
	color: #FFFFFF;
	display: block;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 20px;
    right: 20px;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
}
.main_wrapper_logo{
	float:left;
	width:100%;
}
.main_wrapper_content{
	float: left;
    width: 100%;
	padding-top:50px;
}
.main_wrapper_content h2{
	color:#fff;
	font-size:50px;
	text-transform:capitalize;
}
.main_wrapper_content p{
	color:#fff;
	font-size:16px;
	padding-top:30px;
	font-weight:300;
}
.main_wrapper_timer_section{
	float:left;
	width:100%;
	padding-top:50px;
	padding-bottom:60px;
}
#main_wrapper_clock{
	float:left;
	width:100%;
}
#main_wrapper_clock > div{
	padding:0px 20px;
	display: inline-block;
}
#main_wrapper_clock div > span{
	font-size:50px;
	line-height: 110px;
	padding: 1px 31px;
	font-weight: 300;
	background: rgba(85, 106, 200, 0.60);
    border: 3px solid #6375d4;
    border-radius: 50%;
	display: inline-block;
}
.smalltext{
	padding-top: 15px;
	font-size: 16px;
	font-weight: 400;
}


/*======================== main_wrapper_social_icons ========================*/

.main_wrapper_social_icons{
	float:left;
	width:100%;
}
.main_wrapper_social_icons h3{
	color:#fff;
	font-size:24px;
}
.main_wrapper_social_icons ul{
	padding-top:30px;

}
.main_wrapper_social_icons li {
    display: inline-block;
    margin-right: 8px;
}
.main_wrapper_social_icons li a{
       display: block;
    height: 32px;
    width: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #fff;
    background: #6583d7;
    border-radius: 50%;
    text-align: center;
}
.main_wrapper_social_icons li a:hover{
   color:#4285f4;
   background:#fff;
}


/* media  query css for ipad */

@media(min-width: 767px) and (max-width: 991px) {


	.smalltext {
		padding-top: 0px;
		font-size: 14px;
	}

}

/* media query css for ipad end */


/* media query css for mobile */

@media(max-width: 767px){
	
	.main_wrapper_timer_section {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.main_wrapper_content h2 {
		font-size: 24px;
	}
	#main_wrapper_clock > div {
		padding: 0px 10px;
		padding-top:30px;
	}
	.smalltext {
		padding-top: 10px;
		font-size: 14px;
	}
	
}

@media(max-width: 480px){
	
	#main_wrapper_clock > div {
		padding: 0px 5px;
	}
	.main_wrapper_timer_section {
		padding-bottom: 50px;
	}
	#main_wrapper_clock div > span {
		font-size: 30px;
		line-height: 78px;
		padding: 1px 22px;
		padding: 0px;
		width: 80px;
		height: 80px;
	}
	
}

@media(max-width: 390px){
	
	.main_wrapper_content {
		padding-top: 30px;
	}
	#main_wrapper_clock div > span {
		font-size: 27px;
		line-height: 65px;
		padding: 0px;
		width: 70px;
		height: 70px;
	}
	#main_wrapper_clock > div {
		padding: 0px 3px;
	}
	.main_wrapper_social_icons li {
		margin-right: 5px;
	}
}

@media(max-width: 320px){
	
	#main_wrapper_clock div > span {
		font-size: 22px;
		line-height: 54px;
		padding: 0px;
		width: 60px;
		height: 60px;
	}
	
}