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

	Project Name: 
	Project Description: 
	File Name:
	Author: Adi Purdila
	Author URI: http://www.adipurdila.com
	Version: 1.0.0
	
**********************************************************************************/


* { 
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
	}




/* ---------- TYPOGRAPHY ---------- */
body {
  font: 1em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  color: #1f2225;
  background: url('../img/bg.png') left top;
}
p a {
  color: #2a9ccc;
}
p a:hover {
  color: #1f2225;
}
h1,
h2 {
  font-family: Georgia, serif;
  margin-bottom: 1em;
}
h1 {
  font-size: 2em;
  line-height: 3em;
}
h2 {
  font-size: 1.2em;
  line-height: 1.5em;
}
/* ---------- LAYOUT ---------- */

a#purchase {
    background: #f23e3e;
    color: #fff;
	font-family: Lora;
	font-size: 0.750em;
    font-style: italic;
    text-decoration: none;
    text-shadow: 1px 1px #c43232;
    position: fixed;
    right: 40px;
    top: 40px;
	z-index: 2;

    
    padding: 5px 10px;
    
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #f23e3e;
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.3), inset 0 1px #eb8888;
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,.3), inset 0 1px #eb8888;
	box-shadow: 0 1px 1px rgba(0,0,0,.3), inset 0 1px #eb8888;
	border: solid 1px #c43232;
	
	
	
	-webkit-animation-name: bounceInRight;
	-webkit-animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: bounceInRight;
	-moz-animation-fill-mode: both;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: linear;
	animation-name: bounceInRight;
	animation-fill-mode: both;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: linear;		
	
	
}

a#purchase:hover {
    background: #f85757;
}

a#purchase:active {
    background: #e43c3c;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.2);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.2);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.2);
}

.container {
	
	position: fixed;
	top: 50%;
	margin-top: -250px;
	left: 50%;
	margin-left: -400px;
	width: 800px;
	height: 500px;
	background-color: #fff;
	border: solid 1px #c8c8c8;
		box-shadow: 0 0 1px 0 rgba(0, 0, 0, .2);
		
		
	-webkit-animation-name: bounceIn;
	-webkit-animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: bounceIn;
	-moz-animation-fill-mode: both;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: linear;
	animation-name: bounceIn;
	animation-fill-mode: both;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: linear;		
		
		
}

.social {
  width: 100%;
  height: 59px;
  border-bottom: solid 1px #c8c8c8;
 	background-color: #f9f9f9; 
}

.counter {
  width: 100%;
  height: 279px;
  border-bottom: solid 1px #c8c8c8;
   text-align: center; 
}

.counter h1 {
  color: #565656;
  font-size: 2em;
  margin-bottom: 10px;
  margin-top: 0;
  font-family: Lora;

}

.newsletter {
  width: 100%;
  height: 160px;
 	background-color: #f9f9f9; 
padding: 50px 0 0;	
}

/* ---------- SOCIAL ---------- */

#social-icons li {
float: left;
margin: 15px 0 0 15px;
}

#social-icons li a {
	display: block;
	height: 30px;
	background:url('../img/social.png') no-repeat top left;
	opacity: 1;
	text-indent: -3000px;   
}
		
#social-icons li a:hover {
	background:url('../img/social-hover.png') no-repeat top left;
	
	-webkit-animation-name: swing;
	-webkit-animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: swing;
	-moz-animation-fill-mode: both;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: linear;
	animation-name: swing;
	animation-fill-mode: both;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: linear;	
}
		
#social-icons li a.fb  {
width:30px;
}

#social-icons li a.tw {
width:30px;
background-position: -40px top;
}

#social-icons li a.dr {
width:30px;
background-position: -80px top;
}

#social-icons li a.vi {
width:30px;
background-position: -120px top;
}

#social-icons li a.ze {
width:30px;
background-position: -160px top;
}

#social-icons li a.pi {
width:30px;
background-position: -200px top;
}

#social-icons li a.gi {
width:30px;
background-position: -240px top;
}

#social-icons li a.ln {
width:30px;
background-position: -280px top;
}



/* ---------- SIGNUP ---------- */
.sign-up-form {
  height: 60px;
  border: 1px solid #c8c8c8;

  width: 500px;
  margin: 0 auto;
 	background-color: #fff; 
  overflow: hidden;
  -webkit-border-radius: 12px;
  border-radius: 12px;
}

.sign-up-form:hover,
.sign-up-form:focus {
  border: 1px solid #b5b5b5;
}


input[type="email"] {
  border: none;
  float: left;

  font-family: Arial;
  font-size: 16px;
  font-style: italic;
  outline: none;
  margin-top: 10px;
  width: 350px;
    padding: 10px;
}

input[type="submit"] {
  float: right;
   
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #f23e3e;
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.3), inset 0 1px #eb8888;
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,.3), inset 0 1px #eb8888;
	box-shadow: 0 1px 1px rgba(0,0,0,.3), inset 0 1px #eb8888;
	border: solid 1px #c43232;
  
    text-shadow: 1px 1px #c43232;  
  color: white;
  width: 120px; 
  height: 40px;
  font-family: Arial;
  font-weight: bold;
  font-size: 16px;
  text-transform: ;
  cursor: pointer;
  margin-top: 10px;
  margin-right: 10px;
}

input[type="submit"]:hover {
    background: #f85757;
}


input[type="submit"]:active {
    background: #e43c3c;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.2);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.2);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.2);
}

/* ---------- TIMER ---------- */

ul#countdown li {
  display: inline-block;
  
 background-color: #f23e3e;
 height: 100px;
 -moz-border-radius:50px;
 -webkit-border-radius: 50px;
 
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.3), inset 0 1px #eb8888;
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,.3), inset 0 1px #eb8888;
	box-shadow: 0 1px 1px rgba(0,0,0,.3), inset 0 1px #eb8888;
	border: solid 1px #c43232;
	
 width: 100px;
margin-left: 10px;
margin-right: 10px;
  text-align: center;
}

ul#countdown li:hover {
    background: #f85757;
	-webkit-animation-name: wobble;
	-webkit-animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: wobble;
	-moz-animation-fill-mode: both;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: linear;
	animation-name: wobble;
	animation-fill-mode: both;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-timing-function: linear;			
}

ul#countdown li span {
  font-size: 3em;
  font-weight: bold;
  color: #fff;
    text-shadow: -1px -1px #C43232;
  line-height: 100px;
  position: relative;
}

ul#countdown li p.timeRefDays,
ul#countdown li p.timeRefHours,
ul#countdown li p.timeRefMinutes,
ul#countdown li p.timeRefSeconds {

  color: #909091;
  text-transform: uppercase;
  font-size: .875em;
   line-height: 60px; 
}