@import 'https://fonts.googleapis.com/css?family=Montserrat';


html,
body
{
	font-family: 		"Montserrat";
	font-size: 			16pt;
	line-height: 		1.5;
	color: 				#222;
	margin: 			0;
	padding: 			0;
	box-sizing: 		border-box;
	text-align: 		center;
}
*
{
	box-sizing: 		border-box;
}
img
{
	max-width: 			100%;
}


/************************
 * Header
 ************************/
#header
{
	margin: 			9vh auto;
	width: 				40%;
}



/************************
 * Menu
 ************************/
#menu
{
	margin: 			3vh 0;
}
#menu::after
{
	content: 			" ";
	display: 			block;
	clear: 				both;
}
	#menu a:link,
	#menu a:hover,
	#menu a:active,
	#menu a:visited
	{
		display: 				block;
		float: 					left;
		width: 					33.33%;
		height: 				20vh;
		padding: 				12vh 0;
		padding-top: 			15vh;
		background-position: 	50% 25%;
		background-repeat: 		no-repeat;
		background-size: 		64px;
		color: 					#fff;
		text-decoration: 		none;
	}
 
	#menu a#menu_actutendance 	{ background-color: #ED8369; background-image: url(../images/tendance.png); }
	#menu a#menu_trimestre 		{ background-color: #ED6241; background-image: url(../images/trimestre.png); }
	#menu a#menu_news 			{ background-color: #EE4C25; background-image: url(../images/news.png); }
 
 
 
 /************************
 * Cloudtag
 ************************/
#cloudtag
{
	color: 				#aaa;
	margin: 			5vh 5%;
}
 
 
 /************************
 * Footer
 ************************/
#footer
{
	position: 			fixed;
	bottom:	 			0;
	left: 				0;
	right: 				0;
	background-color: 	#F0F0F0;
	border-top: 		1px solid #DEDEDE;
}
	#footer::after
	{
		content: 		" ";
		display: 		block;
		clear: 			both;
	}

	#footer a:link,
	#footer a:hover,
	#footer a:active,
	#footer a:visited
	{
		display: 				block;
		float: 					left;
		width: 					25%;
		padding: 				50px 0 10px 0;
		background-position: 	50% 20%;
		background-repeat: 		no-repeat;
		background-size: 		36px;
		color: 					#7A7A7A;
		font-size: 				10pt;
		text-decoration: 		none;
	}
	#footer a:hover
	{
		background-color: 		#808080;
		color: 					#fff;
	}
	
		#footer a#footer_item_contact 	{ background-image: url(../images/picto-web.png); }
		#footer a#footer_item_site 		{ background-image: url(../images/picto-desktop.png); }
		#footer a#footer_item_phone 		{ background-image: url(../images/picto-phone.png); }
		#footer a#footer_item_linkedin 	{ background-image: url(../images/picto-in.png); }

		#footer a#footer_item_contact:hover 	{ background-image: url(../images/picto-web-hover.png); }
		#footer a#footer_item_site:hover		{ background-image: url(../images/picto-desktop-hover.png); }
		#footer a#footer_item_phone:hover	{ background-image: url(../images/picto-phone-hover.png); }
		#footer a#footer_item_linkedin:hover { background-image: url(../images/picto-in-hover.png); }

		
		
@media only screen /* Tablet Vertical */ 
and (max-width : 1020px) 
{
		
	#header
	{
		margin: 			10vh auto;
		width: 				60%;
	}

	#menu
	{
		margin: 			5vh 0;
	}
	
	#cloudtag
	{
		color: 				#aaa;
		margin: 			10vh 5%;
	}
	 
}

@media only screen /* Smartphone Horizontal */ 
and (max-width : 670px) 
{
	html,
	body
	{
		font-size: 			11pt;
	}
	#header
	{
		margin: 			4vh auto;
		width: 				30%;
	}
	#menu a:link,
	#menu a:hover,
	#menu a:active,
	#menu a:visited
	{
		
		padding: 				6vh 0 6vh 80px;
		background-size: 		48px;
		background-position: 	5% 50%;
		text-align: 			left;
		height: 				22vh;
	}
	
	#cloudtag
	{
		color: 				#aaa;
		margin: 			7vh 5%;
		font-size: 			10pt;
	}
	#footer a:link,
	#footer a:hover,
	#footer a:active,
	#footer a:visited
	{
		padding: 				34px 0 6px 0;
		background-size: 		24px;
		font-size: 				7pt;
	}
 
}
		

@media only screen /* Smartphone Vertical */ 
and (max-width : 380px) 
{
	html,
	body
	{
		font-size:			10pt;
	}
		
	#header
	{
		margin: 			8vh auto;
		width: 				60%;
	}
	
	#menu a:link,
	#menu a:hover,
	#menu a:active,
	#menu a:visited
	{
		display: 				block;
		float: 					left;
		width: 					33.33%;
		height: 				20vh;
		padding: 				12vh 0;
		padding-top: 			15vh;
		background-position: 	50% 25%;
		background-repeat: 		no-repeat;
		background-size: 		64px;
		color: 					#fff;
		text-decoration: 		none;
		text-align: 			center;
		
		padding-top: 			14vh;
		background-size: 		48px;
	}
	
	
	#cloudtag
	{
		color: 				#aaa;
		margin: 			7vh 5%;
	}
}