@import url(https://fonts.googleapis.com/css?family=Merriweather);

html,
body
{
	font-family: 	Merriweather;
	font-size: 		9pt;
	color: 			#222;
	margin: 		0;
	padding: 		0;
	box-sizing: 	border-box;
	text-align: 	center;
}


body
{
	background-image: 		url(../images/pattern.png);
	background-position: 	center center;
	background-repeat: 		repeat;
	height: 				100%;
	-webkit-transition:		all .2s ease-out;
	-moz-transition:		all .2s ease-out;
	-o-transition:			all .2s ease-out;
	transition:				all .2s ease-out;
}
body.countdown
{
	background-image: 		none;
	background-color: 		#000;
}
body.countdown #logo img
{
	display: none;
}
body.countdown #main
{
	background-color: 		#000;
}
body.countdown #text
{
	background-color: 		#000;
	color: 					rgba(255,255,255,.3);
}
body.countdown #counter .counter_item 
{
	border: 			0;
}
body.countdown #counter .counter_item span
{
	font-size: 			200pt;
	color: 				#fff;
}
body.countdown #counter .counter_item i
{
	font-size: 			40pt;
	color: 				#fff;
}
body.countdown #counter #counter_day,
body.countdown #counter #counter_hour,
body.countdown #counter #counter_minute
{
	display: 			none;
}


#main
{
	background-color: 		#fff;
	position: 				absolute;
	top: 					20%;
	bottom: 				20%;
	left: 					20%;
	right: 					20%;
	padding: 				30px 0;
	text-align: 			center;
	box-shadow: 			0 0 20px rgba(0,0,0,.5);
		
	-webkit-transition:	all .2s ease-out;
	-moz-transition:	all .2s ease-out;
	-o-transition:		all .2s ease-out;
	transition:			all .2s ease-out;
}
	#logo
	{
	}
	
		#logo img
		{
			max-width: 			70%;
			-webkit-transition:		all .2s ease-out;
			-moz-transition:		all .2s ease-out;
			-o-transition:			all .2s ease-out;
			transition:				all .2s ease-out;
		}
	
	#date
	{
		display: 			none;
	}
	#text
	{
		color: 				#E8DCC8;
		font-size: 			20pt;
		margin: 			40px 0 10px 0;
	}
	
	#counter
	{
	
	}
		#counter .counter_item
		{
			position: 			relative;
			display: 			inline-block;
			border-left: 		1px solid #aaa;
			padding: 			5px 30px;
			text-align: 		center;
		}
		#counter .counter_item:first-child
		{
			border-left: 		0;
		}
		#counter .counter_item span
		{
			display: 			block;
			font-size: 			28pt;
			color: 				#222;
		}
		#counter .counter_item i
		{
			display: 			block;
			font-size: 			8pt;
			font-style: 		normal;
			color: 				#222;
			text-transform: 	uppercase;
		}

	

/***************************
 *
 * Responsive
 *
 ***************************/
@media only screen /* Smartphone Horizontal */ 
and (max-height : 1200px) 
{
	#main
	{
		top: 					10%;
		bottom: 				10%;
		left: 					20%;
		right: 					20%;
	}
}
@media only screen /* Smartphone Horizontal */ 
and (max-height : 900px) 
{
	#logo img
	{
		max-width: 			50%;
	}
}

@media only screen /* Smartphone Horizontal */ 
and (max-width : 1200px) 
{

	body
	{
	}	
	
	#main
	{
		position: 				absolute;
		top: 					10%;
		bottom: 				10%;
		left: 					10%;
		right: 					10%;
	}
		#logo
		{
		}
		#text
		{
			font-size: 			17pt;
		}
		
		#counter
		{
		}
}

@media only screen /* Smartphone Horizontal */ 
and (max-width : 900px) 
{

	body
	{
	}	
	
	#main
	{
		position: 				absolute;
		top: 					5%;
		bottom: 				5%;
		left: 					5%;
		right: 					5%;
	}

	#logo img
	{
		max-width: 			70%;
	}
	
		#text
		{
			margin-top: 		40%;
		}
		
		#counter .counter_item 
		{
			font-size: 			14pt;
			padding: 			5px 10px;
		}
		#counter .counter_item span
		{
			font-size: 			17pt;
		}
		#counter .counter_item i
		{
			font-size: 			7pt;
		}
}