@font-face 
{
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(fonts/MaterialIcons-Regular.woff2) format('woff2'),
       url(fonts/MaterialIcons-Regular.woff) format('woff'),
       url(fonts/MaterialIcons-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Open Sans';
	font-weight:900;
    src: url('fonts/OpenSansExtraBold.eot');
    src: url('fonts/OpenSansExtraBold.woff2') format('woff2'),
         url('fonts/OpenSansExtraBold.woff') format('woff'),
         url('fonts/OpenSansExtraBold.ttf') format('truetype'),
         url('fonts/OpenSansExtraBold.svg#OpenSansExtraBold') format('svg');
}
@font-face {
    font-family: 'Open Sans';
	font-weight:700;
    src: url('fonts/OpenSansBold.eot');
    src: url('fonts/OpenSansBold.woff2') format('woff2'),
         url('fonts/OpenSansBold.woff') format('woff'),
         url('fonts/OpenSansBold.ttf') format('trfuetype'),
         url('fonts/OpenSansBold.svg#OpenSansBold') format('svg');
}
@font-face {
    font-family: 'Open Sans';
	font-weight:600;
    src: url('fonts/OpenSansBold.eot');
    src: url('fonts/OpenSansBold.woff2') format('woff2'),
         url('fonts/OpenSansBold.woff') format('woff'),
         url('fonts/OpenSansBold.ttf') format('truetype'),
         url('fonts/OpenSansBold.svg#OpenSansBold') format('svg');
}
@font-face {
    font-family: 'Open Sans';
	font-weight:400;
    src: url('fonts/OpenSansRegular.eot');
    src: url('fonts/OpenSansRegular.woff2') format('woff2'),
         url('fonts/OpenSansRegular.woff') format('woff'),
         url('fonts/OpenSansRegular.ttf') format('truetype'),
         url('fonts/OpenSansRegular.svg#OpenSansBold') format('svg');
}
@font-face {
	font-weight:300;
    font-family: 'Open Sans';
    src: url('fonts/OpenSansLight.eot');
    src: url('fonts/OpenSansLight.woff2') format('woff2'),
         url('fonts/OpenSansLight.woff') format('woff'),
         url('fonts/OpenSansLight.ttf') format('truetype'),
         url('fonts/OpenSansLight.svg#OpenSansLight') format('svg');
}

.material-icons 
{
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

html,body
{
	padding:0;
	margin:0;
}

body{
	
	font-family:"Open Sans", "Arial";
	font-size:14px;
}

.clear
{
	clear:both;
}

.mobile_hide
{
	display:block
}
.mobile_show
{
	display:none;
}

.retour_home
{
	text-align:center;
	margin-top:25px;
}
	.retour_home a
	{
		color:#1f4eb9;
		font-size:14px;
	}

img
{
	float:left;
	border:none;
}

.content_center
{
	width:1200px;
	margin:0 auto;
}

#header_wrapper
{
	width:100%;
	position:relative;
}
	
		#header_wrapper>div
		{
			text-decoration:none;
		}
			#header_wrapper  .header_banniere
			{
				width:100%;
				height:auto;
			}
			
		#header_wrapper .header_content
		{
			position:absolute;
			background-color:rgba(202,19,21,0.7);
			width:100%;
			margin-top:4.5%;
		}
			
			#header_wrapper .header_content .header_logo
			{
				position:absolute;
				margin-top:-32px;
			}
			
			#header_wrapper .header_content .header_titre
			{
				font-weight:100;
				color:#fff;
				font-size:2.1em;
				line-height:0.5em;
				text-align:right;
				float:right;
			}
			
	
#footer_wrapper
{
	width:100%;
	position:relative;
	background-color:#a61319;
	color:#fff;
	font-size:1.2em;
	padding:20px 0;
	text-align:center;
	font-weight:100;
	margin-top:50px;
}

	
		

.content_description
{
	color:#393f56;
	padding:35px 15px;
	font-size:1.3em;
	font-weight:100;
}
	.content_description img
	{
		display: inline-block;
		margin-top:3px;
		margin-right:10px;
	}
	
#shortcuts_main
{
	width:100%;
}

	#opendata_wrapper
	{
		width:270px;
		margin:15px;
		margin-left:0;
		float:right;
		position:relative;
	}
		#opendata_wrapper a
		{
			margin:20px 0;
			text-decoration:none;
		}
			#opendata_wrapper a img
			{
				width:100%;
				height:auto;
			}
			
		#opendata_wrapper .opendata_content
		{
			position:absolute;
			margin:0 15px;
		}
			#opendata_wrapper .opendata_content .opendata_titre
			{
				font-weight:100;
				background-color:#0c4361;
				margin-top:25px;
				padding:10px 0;
				text-align:center;
				color:#fff;
				font-size:2.1em;
				line-height:1em;
			}
				
			#opendata_wrapper .opendata_content .opendata_description
			{
				text-align:center;
				margin-top:40px;
				color:#393f56;
				font-size:1.2em;
				padding:0 10px;
			}
			
			
	#icons_wrapper
	{
		width: 100%;
		float:left;
		display:flex;
		flex-flow:row wrap;
        justify-content: center;
	}
		.icons_item
		{
			width:420px;
			display:block;
			margin:15px 15px;
			text-decoration:none;
		}
			.icons_picture
			{
				
			}
				.icons_picture img
				{
					width:100%;
					height:auto;
				}
			
			.icons_title
			{
				font-weight:400;
				font-size:18px;
				padding:5px 0px;
				text-align:center;
				margin-top:5px;
				color:#666666;
			}

			
#content_wrapper
{
	padding:0 15px;
	margin-top:25px;
}

.news_wrapper
{
	width:420px;
	float:left;
}

	.news_wrapper h2
	{
		font-size:2.5em;
		text-align:center;
		font-weight:100;
		text-align:center;
		color:#a91919;
	}
	
	.news_item
	{
		float:left;
		display:block;
		text-decoration:none;
	}
		.news_picture
		{
			width:100%;			
			float:left;
			margin-bottom:15px;
		}
			.news_picture img
			{
				width:100%;
				height:auto;
			}
			
		.news_content
		{
			float:left;
			width:96%;
			padding:0 2% 0px;
		}
			.news_title
			{
				font-weight:400;
				font-size:25px;
				color:#000000;
			}
			
			.news_description
			{
				font-weight:400;
				font-size:14px;
				margin-top:15px;
				color:#666666;
				margin-bottom:10px;
			}

.links_wrapper
{
	width:720px;
	float:right;
}

	.links_wrapper h2
	{
		font-size:2.5em;
		text-align:center;
		font-weight:100;
		text-align:center;
		color:#a91919;
	}
	
	.links_img
	{
		
	}
		.links_img img
		{
			width:100%;
			height:auto;
		}
		
	.links_item
	{
		display:flex;
		flex-flow : row nowrap;
		height:45px;
		padding:15px;
		background-color:#eee;
		margin-top:9px;
		vertical-align:center;
		align-items:center;
	}
		.links_title
		{
			font-size:1.4em;
			line-height:1em;
		}
	
		.links_more
		{
			margin-left:auto;
			font-size:14px;
			color:#ff0000;
			font-weight:400;
			text-align:right;
		}
	
	.links_logobp
	{
		display:flex;
		flex-flow:column nowrap;
		align-items:center;
		text-align:center;
		margin-top:20px;
	}
		.links_logobp a
		{
		}
	
	


.message_confirmation
{
	text-align:center;
	font-size:15px;
}
	.titre_confirmation
	{
		text-align:center;
		font-size:25px;
		font-weight:700;
		color:#393f56;
		margin-bottom:25px;
	}

	
/* FORMULAIRE*/
.formulaire
{
	margin-top:25px;
}

	.formulaire .group-form
	{
		clear:both;
		width:100%;
		margin:0;
		padding:0;
		margin:5px auto 15px;
	}

		.formulaire label
		{
			width:100%;
			font-size:18px;
			color:#393f56;
		}

		.formulaire input, textarea
		{
			clear:both;
			margin-top:8px;
			width:100%;
			padding:10px;
			border:none;
			border:1px solid #cccccc;
			border-radius:6px;
			font-size:15px;
		}
			.formulaire input:focus, textarea:focus 
			{
				border:1px solid #393f56;
			}
			
			.formulaire input.error, textarea.error
			{
				border:1px solid #ff0000;
			}
			
			.formulaire .btn_submit
			{
				background-color:#337b3a;
				color:#ffffff;
				cursor:pointer;
			}
			
		.formulaire .error_message
		{	
			font-size:12px;
			color:#ff0000;
			margin-top:5px;
			font-style:italic;
		}
		
		.g-recaptcha
		{
			margin-top:10px;
		}
	
	

@media screen and (max-width: 1200px) {

	
	.content_center
	{
		width:980px;
	}
	
	#header_wrapper .header_content .header_logo
	{
		position:absolute;
		margin-top:-38px;
	}
		#header_wrapper .header_content .header_logo img
		{
			width:auto;
			height:120px;
		}
	
	#header_wrapper .header_content .header_titre
	{
		font-weight:100;
		color:#fff;
		font-size:1.6em;
		line-height:0.5em;
		text-align:right;
	}

	#opendata_wrapper
	{
		width:240px;
	}
	
	#icons_wrapper
	{
		width:710px;
		float:left;
		display:flex;
		flex-flow:row wrap;
	}
		.icons_item
		{
			width:325px;
		}
		
		.icons_title 
		{
			font-size:15px;
		}
		
	.news_wrapper
	{
		width:325px;
	}
		.news_title
		{
			font-size:21px;
		}
		
	.links_wrapper
	{
		width:595px;
	}
		.links_item
		{
			height:30px;
		}
		
			.links_title
			{
				font-size:16px;
			}
		
}


@media screen and (max-width: 980px) {

	.content_description
	{
		font-size:1.2em;
	}

	.content_center
	{
		width:100%;
	}
	
	#header_wrapper .header_content .header_logo
	{
		position:absolute;
		margin-top:-30px;
		margin-left:30px;
	}
		#header_wrapper .header_content .header_logo img
		{
			width:auto;
			height:100px;
		}
	
	#header_wrapper .header_content .header_titre
	{
		font-weight:100;
		color:#fff;
		font-size:1.4em;
		line-height:1em;
		text-align:right;
		margin-right:30px;
	}

	#opendata_wrapper
	{
		margin: 15px 2%;
		width:96%;
		background:url(../images/bg_opendata.jpg) 50%;
	}
		#opendata_wrapper .opendata_content
		{
			position:relative;
		}
		
		#opendata_wrapper .opendata_image
		{
			display:none;
		}
		#opendata_wrapper .opendata_content .opendata_description
		{
			margin-top:20px; 
			margin-bottom:20px;
		}
		
	#icons_wrapper
	{
		width:100%;
		float:left;
		display:flex;
		flex-flow:row wrap;
	}
		.icons_item
		{
			width:46%;
			margin:15px 2%;
		}
		
		.icons_title 
		{
			font-size:15px;
		}
		
	.news_wrapper
	{
		width:38%;
		margin:15px 0;
	}
		.news_title
		{
			font-size:21px;
		}
		
	.links_wrapper
	{
		width:60%;
		margin:15px 0;
	}
		.links_item
		{
			height:30px;
		}
		
			.links_title
			{
				font-size:16px;
			}
		
}


@media screen and (max-width: 820px) {

	#header_wrapper .header_content
	{
		margin-top:2.4%;
	}
	
	#header_wrapper .header_content .header_logo
	{
		position:absolute;
		margin-top:-5px;
		margin-left:30px;
	}
		#header_wrapper .header_content .header_logo img
		{
			width:auto;
			height:75px;
		}
		
	#header_wrapper .header_content .header_titre
	{
		font-weight:100;
		color:#fff;
		font-size:1.3em;
		line-height:1em;
		text-align:right;
		margin-right:30px;
		width:70%;
	}

}

@media screen and (max-width: 680px) {

	.content_description
	{
		font-size:1.1em;
	}
	
	.news_wrapper
	{
		width:100%;
	}
		.news_picture
		{
			width:48%;
		}
		.news_content
		{
			width:48%;
		}
		
	.links_wrapper
	{
		width:100%;
	}
	
		.links_item
		{
			height:auto;
		}
		
			.links_title
			{
				font-size:15px;
			}
		
	#footer_wrapper
	{
		width:96%;
		padding-left:2%;
		padding-right:2%;
		font-size:1.1em;
	}	
}


@media screen and (max-width: 600px) {


	.mobile_hide
	{
		display:none;
	}
	.mobile_show
	{
		display:block;
	}

	#content_wrapper
	{
		margin:0;
	}
	
	#header_wrapper .header_content
	{
		position:relative;
		margin-top:0;
		background: none;
	}
		
	#header_wrapper .header_content .header_logo
	{
		position:relative;
		margin:0;
		width:100%;
		float:left;
		text-align:center;
	}
	
	#header_wrapper .header_content .header_logo img
	{
		float:none;
		margin-top:5px;
	}
	
		
	#header_wrapper .header_content .header_titre
	{
		text-align:center;
		width:96%;
		margin:0;
		background-color: rgba(202,19,21,1);
		padding:10px 2%;
	}
	
	.icons_item
	{
		width:100%
	}
		
	.news_wrapper
	{
		width:100%;
	}
		.news_picture
		{
			width:100%;
		}
		.news_content
		{
			width:96%;
			padding:0 2% 0px;
		}
		
	.links_wrapper
	{
		width:100%;
		margin:0px;
	}
	
		.links_item
		{
			height:auto;
		}
		
			.links_title
			{
				font-size:15px;
			}
		
	
	.content_description
	{
		text-align:center;
		font-size:1em;
	}
		.content_description img
		{
			float:none;
			display:block;
			margin:0 auto 10px;
		}
		
}

@media screen and (max-width: 360px) {


	#header_wrapper .header_content .header_titre
	{
		font-size:1.2em;
	}
}