/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
	 
	body{
		margin: 0;
		padding: 0; 
		font-family:"Open Sans", Arial;
    font-size: 18px; 
	}
	
	p {
		font-size: 18px;
    line-height: 1.5em;
		color:#666666;
		text-align: justify;
		width: 80%;
		margin: 0 0 18px 9%;
	}
	p.gran {
    font-size: 26px; 
    margin-bottom: 18px;
		font-weight:normal;
	}
	p.clar {
		color:#999;
	}
	ul,
	ol { 
		margin-bottom: 18px;
		}
	ul {
 		list-style-type:none; 
	}
	.headline{
		font-size:32px; 
		line-height:48px;  
		margin-bottom: 18px; 
		color:#555555;
		font-family:myFirstFont;
		font-weight:normal;
		letter-spacing:1px;
	}
	h1 {  
	    font-size: 26px; 
	    line-height: 32px;
	    margin-bottom: 18px;
		font-weight:normal;
		color:#999;
  	}
	h2 { 
  		font-size: 	16px;  
		line-height:28px; 
		word-spacing:0px;
		margin-bottom: 18px;
		font-weight:normal;
		color:#999;
	}
	 
	h3 {  
  		font-size: 18px;  
		line-height:22px;
		font-weight:normal;
		word-spacing:0px;
		color:#999;
	}
	
	h4{  
		font-size:12px;
		line-height:0px;  
		font-weight:normal; 
		color:#999;
	}
	
 	a{ text-decoration:none; color: #09f; } 
	
	/* LOGO */
	.block-logo{ 
		padding-top:20px;
		padding-bottom:0px; 
	}
	
	.margin-content{
		padding-top:40px;
		padding-bottom:120px;
	} 
	.margin-content-email{
		padding-top:145px;
	}
	.margin-tipical{
		padding-top:30px;
		padding-bottom:10px;
	} 
	/* HEADER -> responsive */
	
	.body-container{ 
		margin:0 auto;    
	}
	 
	.body-top{ 
		margin:0 auto; 
		height:100px; 
	} 
	.body-footer{ 
		margin:0 auto; 
	}
	
	 
 
	 
	.align-center{
		text-align:center;
	}
	.align-left{
		text-align:left;
		float:left;
	}
	.align-right{
		text-align:right;
		float:right;
	}
	.img-padding{
		padding:0px 10px 0px 0px
	}
	.img-padding-right{
		padding:0px 0px 0px 10px
	}
	.content-padding{
		padding-bottom:40px;
	}
 
 	/* INPUT */
 	
	.input{
		width:420px;
		height:45px;
		border:none;
		color:#CCCCCC;
		font-weight:bold;
		font-size:16px; 
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px; 
		padding-left:10px;
		behavior: url(border-radius.htc); 
	} 
 
	.button{
		width:50px;
		height:47px; 
		background-position:center;
		border:none;
		cursor:pointer;
		 -webkit-border-radius: 30px;
		 -moz-border-radius: 30px;
		 border-radius: 30px;  
		color:#777;
		font-weight:bold;
		position:absolute;
		right:28%;
		behavior: url(border-radius.htc);
	}
	.input-colour{
		background-color:#EEE;
		-webkit-box-shadow: 7px 5px 20px rgba(204, 204, 204, 1);
		-moz-box-shadow:    7px 5px 20px rgba(204, 204, 204, 1);
		box-shadow:         7px 5px 20px rgba(204, 204, 204, 1);
	} 
	.input-botton{
	/*	background:url(../images/e-subscribe.png)#E1E0DE 15px 10px no-repeat;*/
		background-color:#E1E0DE;
		-webkit-box-shadow: 7px 5px 20px rgba(204, 204, 204, 1);
		-moz-box-shadow:    7px 5px 20px rgba(204, 204, 204, 1);
		box-shadow:         7px 5px 20px rgba(204, 204, 204, 1); 
	} 
	
	
		/* EMAIL ERROR MESSAGES */
		 
		.block-form-message{
			padding-top:0px;
			padding-left:35px;
		}
		.form_message {
			width:auto;
			margin: 0 auto;
			display: none;
			text-align:left; 
			padding-bottom:0px;
			padding-top:15px;
			padding-left:28px;
		}
		
		#error_message {
			color:#FF6600;
			background: url('../images/topbar-nav-bottom.png');
			background-repeat:no-repeat;
			background-position:left top; 
			margin-left:265px;
		}
		 
		
		#info_message {
			color:#999999;
			background: url('../images/topbar-nav-bottom.png');
			background-repeat:no-repeat;
			background-position:left top; 
			margin-left:265px;
		}
		#complete_info_message{
			color:#EACCB2; 
			font-size:48px;
			font-weight:bold; 
			position:relative; 
			opacity:0.3; 
		}
	 
 
 	/* CLOCK */
	.block-clock{ 
		position:absolute;
		top:-90px; 
		margin:0 auto;
		left:5%;
	} 
	 
	ul#countdown {
		padding:15px 0px 0px 110px;
		float:left;
	}
	ul#countdown li {
		position: relative;
		float: left;
		z-index: 20;
		padding:0px 30px;
	} 
	.num{
		left:32px; 
		font-size:35px;
		position:relative;
		top:35px;
		color:#FFFFFF;
		font-weight:bold; 
	}
	
	.num-two-digit{
		left:37px; 
		font-size:35px;
		position:relative;
		top:35px;
		color:#FFFFFF;
		font-weight:bold;
	}
	.block-clock-img{
		background: url('../images/line.png');
		width:907px;
		height:220px; 
	}
	.block-clock-num{
		background: url('../images/clock/1.png');
		width:116px;
		height:116px; 
	} 
	
	.days-title{
		text-align:center; font-size:12px; color:#666666; padding-top:8px;
	}
	/* TIMER */
	.block-clock-hover{
		position:absolute;
		font-size: 116px;
		width:1em;
		height:1em;
		float: left;
	}
	.block-clock-hover > #slice {
		position:absolute;
		width:1em;
		height:1em;
		clip:rect(0px,1em,1em,0.5em);
	}
	.block-clock-hover > #slice.gt50 {
		clip:rect(auto, auto, auto, auto);
	}
	.block-clock-hover > #slice >.pie {
		background: url('../images/clock/hover.png');
		width:116px;
		height:116px;
		position:absolute;		
		top:0px;
		clip:rect(0em,0.5em,1em,0em);
	} 
	 
	.block-clock-hover > #slice > .pie.fill {
		-moz-transform:rotate(180deg) !important;
		-webkit-transform:rotate(180deg) !important;
		-o-transform:rotate(180deg) !important;
		transform:rotate(180deg) !important;
				
	}
	/* END TIMER */	 
	   
	 /* TIMER 2*/
	.block-clock-hover2{
		position:absolute;
		font-size: 116px;
		width:1em;
		height:1em;
		float: left;
	}
	.block-clock-hover2 > #slice2 {
		position:absolute;
		width:1em;
		height:1em;
		clip:rect(0px,1em,1em,0.5em);
	}
	.block-clock-hover2 > #slice2.gt50 {
		clip:rect(auto, auto, auto, auto);
	}
	.block-clock-hover2 > #slice2 >.pie2 {
		background: url('../images/clock/hover.png');
		width:116px;
		height:116px;
		position:absolute;		
		top:0px;
		clip:rect(0em,0.5em,1em,0em);
	} 
	 
	.block-clock-hover2 > #slice2 > .pie2.fill2 {
		-moz-transform:rotate(180deg) !important;
		-webkit-transform:rotate(180deg) !important;
		-o-transform:rotate(180deg) !important;
		transform:rotate(180deg) !important;
				
	}
	/* END TIMER 2*/
	
	
	 /* TIMER 3*/
	.block-clock-hover3{
		position:absolute;
		font-size: 116px;
		width:1em;
		height:1em;
		float: left;
	}
	.block-clock-hover3 > #slice3 {
		position:absolute;
		width:1em;
		height:1em;
		clip:rect(0px,1em,1em,0.5em);
	}
	.block-clock-hover3 > #slice3.gt50 {
		clip:rect(auto, auto, auto, auto);
	}
	.block-clock-hover3 > #slice3 >.pie3 {
		background: url('../images/clock/hover.png');
		width:116px;
		height:116px;
		position:absolute;		
		top:0px;
		clip:rect(0em,0.5em,1em,0em);
	} 
	 
	.block-clock-hover3 > #slice3 > .pie3.fill3 {
		-moz-transform:rotate(180deg) !important;
		-webkit-transform:rotate(180deg) !important;
		-o-transform:rotate(180deg) !important;
		transform:rotate(180deg) !important;
				
	}
	/* END TIMER 3*/	 
	   
	 
	 /* MENU */  
	#menu { 
	 	height: 60px; 
		padding: 0px 0px;  
		margin-left:397px;
	}
	#menu ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#menu > ul > li {
		position: relative;
		float: left;
		z-index: 20;
		padding-left:5px;
		padding-right:5px; 
	} 
	 
	
	#menu > ul > li > a {
		  display: inline-block; 
		  font-family: Calibri;
		  font-size:17px;
		  line-height: 60px; 
	      color:#74756B; 
	      text-decoration: none;
		  font-weight:normal;
		  position: relative;   
		  background: url('../images/bg-circle.png');
		  border-style:none;
		 
	}
	#menu > ul > li > a img{
		padding-top:2px;
		padding-left:2px;
	}
	 
	#menu > ul > li > a:hover {
		  display: inline-block; 
		  font-family: Calibri;
		  font-size:17px;
		  line-height: 60px; 
	      color:#74756B; 
	      text-decoration: none;
		  font-weight:normal;
		  position: relative;  
		  opacity:10;
		  -webkit-border-radius: 20px;
		 -moz-border-radius: 20px;
		 border-radius: 20px; 
	}
	/* ICON SOCIAL HOVER */
	  
	.vertikal{
		width:34px;
		height:34px;
		position:relative;
		overflow:hidden;
	}
	.hover-anime{
		position:absolute;
	}  
	
	 
 	.icon-social{
		padding-bottom:5px;
		padding-top:5px;
	}
	.main-twitter{
		width:450px; margin:0 auto
	}
	
	
	/* Footer*/
	#footer{
		color:#8B8B8B;
		padding-bottom:15px; padding-top:15px; 
	}
	
	.footer-copyright{
		color:#8E8E8E;
	}
	  
	 
/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
	 		
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) { 
 		 	/* CLOCK */
			.block-clock{ 
				position:absolute;
				top:-90px; 
				margin:0 auto;
				left:0%;
			} 
			 
			ul#countdown {
				padding:15px 0px 0px 50px;
				float:left;
			}
			ul#countdown li {
				position: relative;
				float: left;
				z-index: 20;
				padding:0px 30px;
			} 
			.num{
				left:32px; 
				font-size:30px;
				position:relative;
				top:40px;
				color:#FFFFFF;
				font-weight:bold;
			}
	
			.num-two-digit{
				left:42px; 
				font-size:30px;
				position:relative;
				top:40px;
				color:#FFFFFF;
				font-weight:bold;
			}
			.block-clock-img{
				background: url('../images/line2.png');
				width:768px;
				height:220px; 
			}
			.block-clock-num{
				background: url('../images/clock/1.png');
				width:116px;
				height:116px;
				z-index:11; 
			} 
			
			
			 /* MENU */  
			#menu { 
				height: 60px; 
				padding: 0px 0px;  
				margin-left:250px;
			}
			
			/* EMAIL ERROR MESSAGES */
			.form_message {
				width:auto;
				margin: 0 auto;
				display: none;
				text-align:left; 
				padding-bottom:0px;
				padding-top:25px;
			}
			
			#error_message {
				color:#FF6600;
				background: url('../images/topbar-nav-bottom.png');
				background-repeat:no-repeat;
				background-position:left top; 
				margin-left:132px;
			}
			 
			
			#info_message {
				color:#999999;
				background: url('../images/topbar-nav-bottom.png');
				background-repeat:no-repeat;
				background-position:left top; 
				margin-left:132px;
			}
			
			
			.button{
				width:50px;
				height:47px; 
				background-position:center;
				border:none;
				cursor:pointer;
				 -webkit-border-radius: 30px;
				 -moz-border-radius: 30px;
				 border-radius: 30px;  
				color:#555555;
				font-weight:bold;
				position:absolute;
				right:22%;
			}
			 
	 
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		  
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		 
			.input{
				width:310px; 
			} 
			 .button{
				width:50px;  
				right:14%;
			}
			
			.centerid{ 
				text-align:center; 
			}
			 
		
			.block-form{
				width:370px; margin:0 auto
			}
		/* CLOCK */
			.block-clock{ 
				position:absolute;
				top:-180px; 
				margin:0 auto;
				left:-2%;
			} 
			 
			ul#countdown {
				padding:15px 0px 0px 50px;
				float:left;
			}
			ul#countdown li {
				position: relative;
				float: left;
				z-index: 20;
				padding:3px 30px;
			} 
			.num{
				left:32px; 
				font-size:30px;
				position:relative;
				top:40px;
				color:#FFFFFF;
				font-weight:bold;
			}
	
			.num-two-digit{
				left:42px; 
				font-size:30px;
				position:relative;
				top:40px;
				color:#FFFFFF;
				font-weight:bold;
			}
			.block-clock-img{
				background: url('../images/line3.png');
				width:460px;
				height:380px; 
			}
			.block-clock-num{
				background: url('../images/clock/1.png');
				width:116px;
				height:116px;
				z-index:11; 
			} 
			
		  /* MENU */  
			#menu { 
				height: 60px; 
				padding: 0px 0px;  
				margin-left:90px;
			}
			.margin-content{
				padding-top:20px;
				padding-bottom:180px;
			} 
			 
			.block-logo{ 
				padding-top:20px;
				padding-bottom:10px; 
			}
			.margin-content-email{
				padding-top:180px;
			}
			
			
			/* EMAIL ERROR MESSAGES */
			.form_message {
				width:auto;
				margin: 0 auto;
				display: none;
				text-align:left; 
				padding-bottom:0px;
				padding-top:25px;
			}
			
			#error_message {
				color:#FF6600;
				background: url('../images/topbar-nav-bottom.png');
				background-repeat:no-repeat;
				background-position:left top; 
				margin-left:40px;
			}
			 
			
			#info_message {
				color:#999999;
				background: url('../images/topbar-nav-bottom.png');
				background-repeat:no-repeat;
				background-position:left top; 
				margin-left:40px;
			}
			
			
		 
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		 
	 
	    .main-twitter{
			width:250px; margin:0 auto
		}
		
		.input{
		width:230px;
		height:35px;
		border:none;
		color:#CCCCCC;
		font-weight:bold;
		font-size:12px; 
		-webkit-border-radius: 25px;
		-moz-border-radius:25px;
		border-radius: 25px; 
		padding-left:10px;  
		} 
	 
		.button{
			width:40px;
			height:37px; 
			background-position:center;
			border:none;
			cursor:pointer;
			-webkit-border-radius: 25px;
			-moz-border-radius:25px;
			border-radius: 25px; 
			color:#555555;
			font-weight:bold;
			position:absolute;
			right:10%;
		}
		 
		.block-logo{ 
			padding-top:30px;
			padding-bottom:10px; 
		}
		 
		.centerid{ 
			text-align:center
		}
		.align-center h1{
			font-size:16px
		}
		.margin-content-email div h3{
			font-size:14px;
		}
		.block-form-message{
			padding-top:0px;
			padding-left:15px;
		}
		.form_message {
			width:auto;
			margin: 0 auto;
			display: none;
			text-align:left; 
			padding-bottom:0px;
			padding-top:15px;
			padding-left:28px;
		}
		 
	 
		 /* CLOCK */
			.block-clock{ 
				position:absolute;
				top:-155px; 
				margin:0 auto;
				left:8%; 
			} 
			 
			ul#countdown {
				padding:15px 0px 0px 0px;
				float:left;
			}
			ul#countdown li {
				position: relative;
				float: left;
				z-index: 20;
				padding:5px 5px;
			} 
			.num{
				left:32px; 
				font-size:30px;
				position:relative;
				top:40px;
				color:#FFFFFF;
				font-weight:bold;
			}
	
			.num-two-digit{
				left:42px; 
				font-size:30px;
				position:relative;
				top:40px;
				color:#FFFFFF;
				font-weight:bold;
			}
			.block-clock-img{
				background: url('../images/line4.png');
				width:320px;
				height:199px; 
			}
			.block-clock-num{
				background: url('../images/clock/1.png');
				width:116px;
				height:116px;
				z-index:11; 
			} 
			
		  /* MENU */  
			#menu { 
				height: 40px; 
				padding: 0px 0px;  
				margin-left:20px;
			}
			.margin-content-email{
				padding-top:180px;
			}
			
			/* EMAIL ERROR MESSAGES */
			.form_message {
				width:auto;
				margin: 0 auto;
				display: none;
				text-align:left; 
				padding-bottom:0px;
				padding-top:25px;
			}
			
			#error_message {
				color:#FF6600;
				background: url('../images/topbar-nav-bottom.png');
				background-repeat:no-repeat;
				background-position:left top; 
				margin-left:20px;
			}
			 
			
			#info_message {
				color:#999999;
				background: url('../images/topbar-nav-bottom.png');
				background-repeat:no-repeat;
				background-position:left top; 
				margin-left:20px;
			}
			
	}
	
	/* menu */
	  @media (max-width: 768px) {
	     
    }

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot@iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/