/**********************************************************************************

	Project Name: Im Coming
	Project Description: Coming Soon Template by Works of Wisnu
	Author: xWisnux
	Author URI: http://worksofwisnu.com
	Version: 1.0.0
	
**********************************************************************************/
body{
	font-family: 'Open Sans', sans-serif;
	font-size: 1em/1.5em;
	color: #fff;
}

p {
	color: #fff;
	text-shadow: 0 2px 2px #000;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Arvo', serif;
	font-weight: bold;
}

li{
	list-style: none;
}

/***************************
======= HEADER =============
***************************/
header{
	text-align: center;
}

#logo img {
margin: 2em 0;
}

.header-wrapper{
	background: transparent url(../img/bg/bbg-1.jpg) center no-repeat;
	height: 661px;
	background-size: cover;
	margin-top: -242px;	
}

.top-content{
	padding-top: 250px;
}

/***************************
======= SLIDER =============
***************************/
#slide-container{
	position: relative;
	z-index: 1;
}

#slider{
	margin-top: 0 !important;
}

#slider img{
	max-width: 292px;
	max-height: 387px;
}

/***************************
======= TIMER AREA =========
***************************/
.timer-area h1, h2, h3, p{
	text-shadow: 0 0 6px #000;
	margin-bottom: 20px;
}

.timer-area h1{
	font-size: 4.3em;
}

.timer-area h2{
	font-size: 2.2em;
}

.timer-area h3{
	font-family: 'Open Sans', sans-serif;
	font-size: 1.42em;
	font-weight: normal;
}

ul#countdown {
	margin-left: 0;
	position: relative;
	z-index: 1;
}

ul#countdown li {
	float: left;
	background: transparent url('../img/timer-bg.png') no-repeat left top;
	width: 127px;
	text-align: center;
	margin-right: 8px;
	margin-right: 3px;
}

ul#countdown li span {
	font-size: 4.3em;
	font-family: 'Open Sans';
	height: 120px;
	line-height: 120px;
	position: relative;
}

ul#countdown li p.timeDays,
ul#countdown li p.timeHours,
ul#countdown li p.timeMinutes,
ul#countdown li p.timeSeconds {
	margin-top: 1.5em;
 	font-family: 'Arvo', serif;
	font-weight: bold;
	font-size: 1.7em;
	text-align: center;
	text-transform: lowercase;
}

/*****************************
======= PROGRESS BAR =========
*****************************/
.progress-bar{
	background: rgba(0, 0, 0, 0.1);
	padding: 4px;
	margin-bottom: 50px;
	border: 3px solid white;
	height: 25px;
	position: relative;
	height: 40px;
	position: relative;
	border-radius: 1000px;
	-moz-border-radius: 1000px;
	-webkit-border-radius: 1000px;
	-o-border-radius: 1000px;
	-ms-border-radius: 1000px;
	
	box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.4);
	-o-box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.4);
	-ms-box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.4);
}

.progress-bar span.meter{
	background-color: #ffab2e; 
	background-image: linear-gradient(bottom, rgb(188,62,20) 8%, rgb(219,93,51) 28%, rgb(255,171,46) 100%);
	background-image: -o-linear-gradient(bottom, rgb(188,62,20) 8%, rgb(219,93,51) 28%, rgb(255,171,46) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(188,62,20) 8%, rgb(219,93,51) 28%, rgb(255,171,46) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(188,62,20) 8%, rgb(219,93,51) 28%, rgb(255,171,46) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(188,62,20) 8%, rgb(219,93,51) 28%, rgb(255,171,46) 100%);

	background-image: -webkit-gradient(
		linear,
		right bottom,
		right top,
		color-stop(0.08, rgb(188,62,20)),
		color-stop(0.28, rgb(219,93,51)),
		color-stop(1, rgb(255,171,46))
	);
	height: 100%;
	display: block;
	width: 75%;
	border-radius: 1000px;
}

.progress-bar span.percent{
 	font-family: 'Arvo', serif;
	font-weight: bold;
	position: absolute;
	left: 65%;
	top: 13px;
	font-size: 1.2em;
	text-shadow: 0 1px 2px #000;
}

/***************************
======= SLIDER =============
***************************/
#tablet{
	width: 395px;
	height: 499px;
	background-image: url(../img/ipad.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	position: absolute;
	top: -5px;
}

#slider img{
	position: absolute;
	z-index: 1;
	padding: 45px 51px;
	padding: 45px 51px;
}

/***************************
======= WOODEN =============
***************************/
#wooden-area{
	width: 100%;
	background: url(../img/wooden-bg.png) repeat-x;
	height: 180px;
	position: relative;
	box-shadow: 0 4px 19px #000;
	-webkit-box-shadow: 0 4px 19px #000;
	-moz-box-shadow: 0 4px 19px #000;
}

/***************************
======= BOTTOM AREA ========
***************************/
#bottom-wrapper{
	background: url(../img/gray_sand.png) repeat;
}

.bottom-content{
	padding-top: 60px;	
	padding-bottom: 68px;
}

.bottom-content h2{
	text-shadow: 0 1px 4px #000;
}

/** -------- TWITTER FEED -------------- **/
.tweet-wrapper{
	background: url(../img/twitterfeed-bg.png) repeat;
	height: auto;
	border-radius: 7px;
	-webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.75);
	box-shadow: 0 3px 4px rgba(0, 0, 0, 0.75);	
}

ul.tweet_list {
	margin: 0;
	padding: 10px;
	color: #101010;
	overflow: auto;
}

ul.tweet_list li{
	padding: 13px 0;
}

ul.tweet_list li.tweet_first, ul.tweet_list li.tweet_even{
	background: url(../img/line-divider.png) bottom center repeat-x;
}

ul.tweet_list li:last-child{
	background: none !important;
}

ul.tweet_list a{
	color: #0072bc;
}

ul.tweet_list img{
	float: left;
	margin-right: 5px;
}

/** -------- SUBSCRIBE FORM -------------- **/
.form-wrapper{
	margin-top: 20px;
}

form input[type="email"]{
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.53);
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.31);
	width: 70%;
	border-radius: 50px;
	height: 40px;
	padding: 0 0 0 20px;
	margin: 0;
	color: #101010;
	text-shadow: 0 1px 1px #7d7d7d;
	font-weight: bold;
}

form input[type="email"]:focus{
  	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.53) !important;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.31) !important;
	color: #101010 !important;
	text-shadow: 0 1px 1px #7d7d7d !important;
  /* IE6-9 

  -webkit-box-shadow: none !important;
     -moz-box-shadow: none !important;
          box-shadow: none !important; */
}

form input[type="submit"]{
	background-color: #0072bc; 
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0072bc), to(#0054a6));
	background-image: -webkit-linear-gradient(top, #0072bc, #0054a6); 
	background-image:    -moz-linear-gradient(top, #0072bc, #0054a6);
	background-image:     -ms-linear-gradient(top, #0072bc, #0054a6);
	background-image:      -o-linear-gradient(top, #0072bc, #0054a6);
	box-shadow: inset 0 1px 0 rgba(0, 174, 239, 0.6);
	border: none;
	border-bottom: 2px solid #024873;
	width: 25%;
	border-radius: 50px;
	height: 40px;
	color: #101010;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	font-size: 18px;
	text-shadow: 0 1px 1px rgba(0, 174, 239, 0.7);
	cursor: pointer;
}

form input[type="submit"]:hover{
	background-color: #0054a6; 
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0054a6), to(#0072bc));
	background-image: -webkit-linear-gradient(top, #0054a6, #0072bc); 
	background-image:    -moz-linear-gradient(top, #0054a6, #0072bc);
	background-image:     -ms-linear-gradient(top, #0054a6, #0072bc);
	background-image:      -o-linear-gradient(top, #0054a6, #0072bc);
}

/** ------------- Disclaimer --------------- **/
#disclaimer p{
	font-size: 0.857em;
	font-style: italic;
	text-align: center;
}

#disclaimer p span{
	color: #0072bc;
}

/***************************
===== MAIN FOOTER AREA =====
***************************/
ul#share-button{
	margin: 0 auto;
	float: none;
	max-width: 448px;
}

ul#share-button li{
	float: left;
	padding-right: 20px;
	padding-bottom: 10px;
}

ul#share-button li:last-child{
	padding-right: 0;
}

ul#share-button li a img{	
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}

ul#share-button li a:hover img{
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	transform: scale(0.9);
}

.divider{
	background: url(../img/footer-divider.png) center no-repeat;
	height: 40px;
	margin-top: 34px;
}

p.copyright{
	color: #a5a5a5;
	text-align: center;
	margin: 26px auto;
}

/******************************************
				STYLE CHANGER
******************************************/
#ribbon {
	width: 180px;
	height: 280px;
	margin: 2px auto 0;
	position: absolute;
	overflow: hidden;
}

#ribbon .inset {
	width: 200px;
	height: 55px;
	position: absolute;
	top: -50px;
	left: -10px;
	z-index: 5;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	background: rgba(0,0,0,0.3);
	
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
}

#ribbon .container {
	position: relative;
	width: 100px;
	height: 122px;
	overflow: hidden;
	margin: 0 auto;
	border-left: 1px solid #631a15;
	border-right: 1px solid #631a15;
}

#ribbon .base {
	height: 70px;
	width: 100px;
	
	background: rgb(199,59,60);
	background: -moz-linear-gradient(top,  rgba(199,59,60,1) 0%, rgba(184,32,31,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(199,59,60,1)), color-stop(100%,rgba(184,32,31,1)));
	background: -webkit-linear-gradient(top,  rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
	background: -o-linear-gradient(top,  rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
	background: -ms-linear-gradient(top,  rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
	background: linear-gradient(top,  rgba(199,59,60,1) 0%,rgba(184,32,31,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c73b3c', endColorstr='#b8201f',GradientType=0 );

	position: relative;
	z-index: 2;
}

#ribbon .base:after {
	content: '';
	position: absolute;
	top: 0;
	width: 86px;
	left: 6px;
	height: 242px;
	border-left: 1px dashed #631a15;
	border-right: 1px dashed #631a15;
}

#ribbon .base:before {
	content: '';
	position: absolute;
	top: 0;
	width: 86px;
	left: 7px;
	height: 242px;
	border-left: 1px dashed #da5050;
	border-right: 1px dashed #da5050;
}

#ribbon .left_corner {
	width: 100px;
	height: 103px;
	background: #B8201F;
	position: absolute;
	bottom: 20px;
	left: -50px;
	z-index: 1;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

#ribbon .right_corner {
	width: 100px;
	height: 99px;
	background: #B8201F;
	position: absolute;
	bottom: 22px;
	right: -50px;
	z-index: 1;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}