/*
* 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
================================================== */

/* #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) {
		.container { width : 750px;	text-align : center;}
		#Subscribe {width : 680px !important ;	text-align : center;}
		#email {	width : 480px !important ;	font-size : 18px;	}
		.submit {	width : 130px !important ;	font-size : 18px !important ;height : 55px!important;		}
		}
	
	/* 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) {
		.container { width : 420px;	text-align : center;}
		#Subscribe {width : 400px !important ;	}
		#email {	width : 250px !important ;	font-size : 18px;	}
		.submit {	width : 80px !important ;	font-size : 12px !important ;height : 55px;		}
		.footerleft {	text-align : center !important;	}
		.footerright {	display : inline-table;	}
		.header h1 {	font-size : 24px;	line-height : 22px;	margin-top : 10%;	}
		.header p {	font-size : 16px;line-height : 19px;}
		.header logo {text-align : center;max-width : 100%;	margin : 30px auto 20px;}
		.Counter { padding-top:20px !important; width: 320px; text-align : center; margin:auto; }
}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		.container {width : 320px; text-align : center;	}
		#Subscribe {width : 300px !important ;	}
		#email {width : 150px !important ;font-size : 18px;	}
		.submit {width : 80px !important ;font-size : 12px !important ; height : 55px;		}
		.footerleft {text-align : center;}
		.socials li {text-align : center !important ;padding-right : 40px;}
		.header h1 {font-size : 24px;line-height : 22px;margin-top : 10%;}
		.header p {	font-size : 16px; line-height : 19px;}
		.header logo {text-align : center;max-width : 100%;	margin : 30px auto 20px;}
		.Counter { padding-top:20px !important; text-align : center; margin:auto;}
		}

/* ---- Countdown timer ---- */
		.Counter {
			text-align : center;
			padding-top : 40px;
			margin-bottom : 20px;
		}
		ul#countdown li {
			display : inline-block;
			background : url('../images/circle.png') top left no-repeat transparent;
			width : 120px;
			margin-bottom : 20px;
			text-align : center;
			padding-right : 20px;
		}
		ul#countdown li span {
			font-size : 3em;
			font-weight : bold;
			color : #f3f3f3;
			height : 120px;
			line-height : 120px;
			position : relative;
		}
		ul#countdown li p.timeRefDays, ul#countdown li p.timeRefHours, ul#countdown li p.timeRefMinutes, ul#countdown li p.timeRefSeconds {
			margin-top : 10px;
			color : #f3f3f3;
			text-transform : uppercase;
			font : 100% 'Byekan', sans-serif;
			font-weight : 700;
		}


/* ---- Subscribe form---- */

		#Subscribe {
			width : 720px;
			height : 82px;
			margin : 25px auto 10px auto;
			background : rgba(0, 0, 0, 0.3);
			box-shadow : 0 -2px 5px 0 rgba(0, 0, 0, 0.2) inset;
			border-radius : 4px;
			text-align : center;
			vertical-align: middle;
		}
		.email:focus {
			outline : 0;
			background : #f3f3f3;
			box-shadow : 0 3px 0 0 rgba(0, 0, 0, 0.2) inset, 0 4px 0 0 rgba(0, 0, 0, 0.15);
			-webkit-appearance: none;
		}
		.submit {
			margin : 8px 15px 15px 10px;
			background : #ff0043;
			border : 0;
			box-shadow : 0 1px 0 0 rgba(255, 255, 255, 0.3) inset, 0 20px 30px 0 rgba(255, 255, 255, 0.2) inset, 0 4px 0 0 rgba(0, 0, 0, 0.15);
			border-radius : 4px;
			-webkit-appearance: none;
			font-family : 'Byekan', sans-serif, Arial, Helvetica;
			font-weight : 400;
			font-size : 18px;
			color : #fff;
			line-height : 80px;
			cursor : pointer;
			padding: 2% 5%;
			text-decoration: none;
			
		}
		.submit:hover {
			box-shadow : 0 1px 0 0 rgba(255, 255, 255, 0.3) inset, 0 -20px 30px 0 rgba(255, 255, 255, 0.2) inset, 0 4px 0 0 rgba(0, 0, 0, 0.15);
			-webkit-appearance: none;
		}
		.submit:active {
			box-shadow : 0 3px 17px 3px rgba(0, 0, 0, 0.2) inset, 0 -20px 30px 0 rgba(255, 255, 255, 0.2) inset, 0 4px 0 0 rgba(0, 0, 0, 0.15);
			-webkit-appearance: none;
		}

/* #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; }
*/