/***************************** CSS GENERIC ********************************/
body, pre, input, textarea, select {
    font-family:Arial,Tahoma,sans-serif, Verdana;
    font-size: 13px;
}
html, body, p, td, form, input, select, textarea, pre, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
}
body {
    text-align: center;
    color: #535353;
    background-color: #f4f4f4;
}
a {
    color: #074763;
    text-decoration: underline;
    cursor: pointer;
}
a:hover {
    text-decoration: none;
}
a img {
    border-width: 0;
}
td {
    vertical-align: top;
}
ul, ol {
    /* Sinon les puces ne sont pas visible sous IE */
    padding-left: 25px;
}
ul {
    list-style-type: disc;
}
li {
    line-height: 18px;
}
label {
    display:block;
    width:7em;
}
.contener {
    margin: 0 auto;
    position: relative;
    text-align: left;
    width: 1100px;
    z-index: 1;
}
/******  HEADER  ******/
#zone-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	

    -webkit-box-orientation: vertical;
    -webkit-flex-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

    justify-content: space-between;
    margin: 0 auto;
}
#header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orientation: horizontal;
    -webkit-flex-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;

    justify-content: space-between;
}
#header-logo {
    margin: 30px 0 0 10px;
}
#header h1 {
    /*	bottom: 83px; */
    color: #FFFFFF;
    font-size: 17px;
    font-weight: normal;
    /*	position: absolute;*/
    /*	right: 7px; */
    text-align: right;
    /*	width: 517px; */
    font-family: Georgia, Arial, Tahoma, Verdana, Helvetica, sans-serif;
    height: 70px;
    margin-top: 30px;
}
.maj {
    font-size:18px;
    font-weight:600;
    padding-bottom:15px;
    color:#97E326;
}

/******  PAGE  ******/

#zone-page {
	margin: auto;
	
}
#page {
    background: white;
    min-height : 800px;

}
#left,  #right {
    float : left;
    min-height : 220px;
}
#left {
    /*padding: 0 5px 20px 25px;*/
    width: 615px;
}
#left1,  #right1{
    float : left;
    min-height : 80px;
}
#left1 {
    padding: 0 15px 20px 25px;
    width: 740px;
}
#col-gauche {
	display: block;
	/*padding-right: 5px;*/
	width: 192px; vertical-align: top; background-color:transparent;
}
/*.webcam {
	display: flex;
	padding: 30px 5px 10px 15px;
	flex-wrap:wrap;
    }
.webphoto {
	
}*/

.vtt {
	height: 500px;
	padding: 10px;

}

.tuto {
	width: 903px;
	padding:20px;


}

/* ****  MENU **** */
nav {
    font-family: Quicksand;
	letter-spacing:1px;
    color: #062447;
	padding-top: 15px;
    padding-bottom: 40px;
    background-color: white;
}
nav ul {
    list-style : none;
    margin : 0;
    padding : 0;
}
nav a {
    display : block;
    color: #014a91;
    white-space: nowrap;
    text-decoration : none;
    font-weight: normal;
    z-index: 5;
}
nav a:hover {
    color: #071F6C;
}
/** ===== menu niv 1 ===== **/
nav > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-orientation: horizontal;
    -webkit-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;

    justify-content: space-evenly;
    align-items: center;
    height : 36px;
}
nav > ul > li {
    position: relative;
    border-radius: 5px 5px 5px 5px;
    margin: auto;
}
nav > ul > li > a,
nav > ul > li > label {
    display: block;
    /*	  padding: 9px 11px;*/
    margin: 0;
    width: auto;
    line-height: 1.6;
}
/** ======= SOUS-MENUS ====== **/
nav ul li ul li a:hover {
    color: #236a89;

}
nav li.with-submenu > [type="radio"] {
    display: none;
}
nav li.with-submenu > ul  {
    display: none;
    background: url(bg-menu-niv2.png) repeat-x #ffe8fa;
    border-radius: 5px 5px 5px 5px;
    padding: 10px 0;
    min-width: 185px;
}
nav li.with-submenu ul li {
    padding-top: 2px;
    /* 	width: 180px; */
}
nav li.with-submenu ul li a {
    font-size: 15px;
    padding: 3px 10px 3px 23px;
}

/* *************** STYLES RESPONSIVE ********************** */
@media screen and (min-width: 1001px) {
    .hamburger { display: none; }
    #zone-header {
        width: 1100px;
    }
    nav {
        width: 1100px;
        margin: 0 auto;
    }
    nav li.with-submenu > ul {
        position: absolute;
	z-index : 100;
        text-align: left;
    }
    nav li.with-submenu:hover ul {
  	display: block;
    }
    nav li.with-submenu > a + label {
        display: none;
    }
	nav > ul > li > a,
    nav > ul > li > label {
        font-size: 20px;
    }
	[class*="grid-5"] > .four-fifth {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: calc(100% / 5 * 4 - .01px);
	
      }
	
}
@media screen and (max-width: 1000px) {
    body {
        background-color: white;
        background-image: none;
        overflow-x: hidden;
    }
	[class*="grid-5"] > .four-fifth {
    width: calc(100% - 1em);
	
      }	
	
	
    .contener { width: 100vw; }
    .hamburger {
        color: white;
        background-color: #014a91;
        font-size: 3.5rem;
        font-weight: bold;
        text-align: left;
        width: 100vw;
        display: flex;
        flex-flow: row nowrap;
        justify-content: start;
    }
    .hamburger > a {
        flex: 0 0 auto;
        text-decoration: none;
        padding: 0 0.5em;
        color: white;
        background-color: #014a91;
    }
    .hamburger > a:hover {
        background-color: #115aa1;
    }
    .hamburger > a:active,
    .hamburger > a:focus {
        border: none;
    }
    .hamburger > a:last-child {
        flex: 1 1 auto;
        text-align: center;
        padding-right: 3rem;
    }
    .hamburger > a em {
        font-size: 0.6em;
        font-style: normal;
        border-top: solid 1px white;
    }
    .main {
        display: flex;
        flex-flow: row nowrap;
        position: relative;
    }
    .show-main {
        left: 0;
        transition: left 1s;
    }
    .hide-main {
        left: -90vw;
        transition: left 1s;
    }
    #zone-header {
        -webkit-box-orientation: horizontal;
        -webkit-flex-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        flex: 0 0 90vw;
        background-color: #014a91;
        /* width: 90vw; */
    }
    /* #header a { display: inline-block; margin: 0 auto; } */
    /* #header h1 { display: none; } */
    #header { display: none; }
	#col-gauche {display: none; }
	
    
	nav {
        padding: 0;
        width: auto;
        margin: 3.75rem auto 0 auto;
        background-color: transparent;
        color: white;
    }
    nav > ul {
        -webkit-box-orientation: vertical;
        -webkit-flex-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;

        height: auto;
        width: auto;
    }
    nav li.with-submenu > a { display: none; }
    nav li.with-submenu > label { display: block; width: 100%; font-size: 2.1em; }
    nav li.with-submenu > [type="radio"]:checked + ul {
        display: block;
        padding: 0 1em;
    }
    nav li.with-submenu ul li a { padding: 3px; font-size: 2.1em; }
    #zone-page {
        flex: 0 0 100vw;
        /* width: 100vw; */
    }
	
	nav > ul > li > a {
		color: white;
		font-size: 2.1em;
	}

.maj { text-shadow:#000000 2px 2px 3px; }
    #diaporama { display: none; }
    #right { display: none; }
    #left { width: 100%; display: block; float: none; padding:10px; background-color:#D8E8FD;   }
    section { box-shadow:002 #F73C3F; background-color:#FFFFFF; margin-bottom:20px; border-radius:5px; padding: 5px; }
}	

/* *************** FIN STYLES RESPONSIVE ********************** */

.cms_bloc ul {
    position: relative;
    padding: 5px 0;
    line-height: 16px;
}
.cms_bloc ul {
    list-style-type: none;
    _list-style-type: disc;
}
.cms_bloc ul li {
     overflow: hidden;
    _padding-left: 7px;
    _background: none;
    _list-style-position: inside;
}
.cms_bloc {
    padding: 5px 0;
    clear: both;
}
/*** BLOCS TITRE ***/
.cms_bloc_title {
}
.cms_bloc_title h2 {
}
/*** ***/
.spacer {
    clear: both;
    line-height: 0;
    width: 0;
    font-size: 0;
}
.mise_en_avant_1 {
    color: #074763;
    font-weight: bold;
}
/******  SPRITE  ******/
#left ul li {
    background: url(../images/sprite-puces.png) no-repeat;
}
.cms_bloc_title h2 {
    font-family: Georgia, Arial, Tahoma, Verdana, Helvetica, sans-serif;
    color: #000;
    font-size: 26px;
    font-weight: normal;
    margin: 0 0 2px 0;
    line-height: 32px;
}
.cms_bloc_text table {
    width: 100%;
}
.cms_bloc_text table td {
    vertical-align: top;
}
.cms_bloc_text_gauche {
    width: 49%;
}
.cms_bloc_text_droite {
    width: 49%;
}
/******  STYLE DES LISTES  ******/

#left ul {
    position : relative;
    padding : 5px 0;
    list-style-type : none;
}
#left ul {
    list-style-type : none;
    _list-style-type : disc;
}
#left ul li {
    background-position : 6px -124px;
    line-height : 20px;
    overflow: hidden;
    padding-left: 20px;
    _padding-left : 7px;
    _background : none;
    _list-style-position : inside;
}
.pro_home {
    width: 920px;
    margin-left:20px;
}
.pro_home #ma-news-contener{
    width: 920px;
    margin-left:20px;

}
.pro_home .ma-news .ma-news-content-info *{
    display:inline-block;
}
.pro_home .ma-news .ma-news-content-info {
    display:inline-block;
    width:100%;
    height:auto;
}
.pro_home .ma-news .ma-news-content-info div{
    width:100px;
}
#isHome span {
    display: block;
}
#encart1,  #encart2 {
    font-family: Georgia, Arial, Tahoma, Verdana, Helvetica, sans-serif;
    background : url(../images/bg-home-encart.jpg) no-repeat;
    border-radius: 3px 3px 3px 3px;
    display: block;
    float: left;
    height: 160px;
    text-align: right;
    text-decoration: none;
    width: 328px;
}
#encart1:hover #encart1-span3,  #encart2:hover #encart2-span2 {
    text-decoration: underline;
}
#encart1 {
    margin : 0 39px 0 0;
}
#encart2 {
    background-position : -328px 0;
}
#encart1-span1, #encart2-span1 {
    color: #fff;
    font-size: 28px;
    line-height: 35px;
    margin: 0 25px;
}
#encart1-span3,  #encart2-span2 {
    color: #000;
    font-size: 17px;
}
#encart1-span1,  #encart2-span1 {
    margin-top: 15px;
}
#encart1-span3 {
    margin: 28px 34px 0 0;
}
#encart2-span2 {
    margin: 28px 34px 0 0;
}
#right {
    /*padding: 20px 20px 0 70px;*/
    width: 263px;
    font-family: Georgia, Arial, Tahoma, Verdana, Helvetica, sans-serif;
}
#right1 {
    padding: 0 10px 10px 0;
    width: 220px;
    font-family: Georgia, Arial, Tahoma, Verdana, Helvetica, sans-serif;
}

/******  PIED DE PAGE  ******/

#footer { flex: 0 0 100vw; }

#footer {
    color: #fff;
    font-family: Arial;
    font-size : 18px;
    font-style: italic;
    height: 40px;
    border: solid 0px #000;
    border-radius: 0 0 10px 10px;
    background-color: #666;
    opacity: 0.5;
}
#footer-contener {
    padding: 0 15px;
}
#footer-copyright {
    margin: 10px 5px 0 0;
    float : left;
}
#footer-copyright span {
    text-transform : uppercase;
}
/** ===== SPRITE ===== **/
/** ===== STYLES GLOBAUX ===== **/
#diaporama {
    margin: 0;
    margin-bottom: 15px;
    /*
	position: relative;
	z-index: 2;
   */
    font-family: Georgia, Arial, Tahoma, Verdana, Helvetica, sans-serif;
}
#diaporama a {
    text-decoration: none;
}
#diaporama-contener {
    position: relative;
}
.diaporama-content-info {
    position: relative;
    width: 1100px;
    height: 200px;
}
.diaporama-image {
    float: left;
    height: 200px;
    width: 1100px;
}
.diaporama-title,  .diaporama-resume {
    /*background: #000;*/
    color: #fff;
    font-size: 25px;
    left: 25px;
    padding: 5px;
    position: absolute;
}
.diaporama-title {
    top: 67px;
}
.diaporama-resume {
    top: 106px;
    font-size: 19px;
}
/*.bx-window {
	border-radius: 5px 5px 5px 5px;
}*/
.diaporama-pagination {
    bottom: -27px;
    position: absolute;
    right: 0;
}
#diaporama a.pager-link {
    background: url("../images/sprite-puces.png") no-repeat 0 -74px;
    color: #FFFFFF;
    float: left;
    height: 12px;
    margin: 0 0 0 0px;
    padding: 10px;
    overflow: hidden;
    text-decoration: none;
    text-indent: -9999px;
    width: 12px;
}
#diaporama a.pager-active,  #diaporama a.pager-link:hover {
    background-position: 0 -54px;
}
/****** ACTUALITÉS ******/
#actualite {
    background : #e4e4e4;
    border-radius: 10px 10px 10px 10px;
    height: 185px;
    width: 236px;
}
#ma-news-contener {
    position: relative;
    width: 236px;
}
.ma-actualite {
    color: #040404;
    float: left;
    font-size: 25px;
    padding: 5px 0 0 10px;
}
.ma-actualite1 {
    color: #040404;
    float: left;
    font-size: 25px;
    padding: 5px 0 0 50px;
}
.ma-rss {
    float: right;
    margin: 5px 10px 0 0;
}
.ma-news-content-info {
    background-position : 0 -268px;
    border-top: 1px solid #848484;
    height: 125px;
    width: 236px;
}
.ma-news-title {
    color: #117BA9;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 10px 0px 50px;
}
.ma-news-title1 {
    color: #117BA9;
    font-size: 14px;
    font-weight: bold;
    padding: 10px 10px 0px 50px;
}
.ma-news-title a {
    color: #117BA9;
    text-decoration: none;
}
#ma-all-news-link {
    color: #000000;
    display: block;
    float: left;
    font-size: 11px;
    font-weight: bold;
    margin: 0 0 10px 10px;
}
.ma-pagination {
    float: right;
    margin: 0 10px 10px 0;
}
#actualite a.pager-link {
    background: none repeat scroll 0 0 #05384E;
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 14px;
    height: 16px;
    line-height: 14px;
    margin: 0 0 0 3px;
    text-align: center;
    text-decoration: none;
    width: 16px;
}
#actualite a.pager-active,  #actualite a.pager-link:hover {
    text-decoration: underline;
}
.border {
    border: none;
}
@font-face {
    font-family: "Asenine";
    src: url('asenine.regular.ttf');
}
@font-face {
    font-family: "Ma Super Fonte";
    font-style: italic;
    src: url('MaSuperFonte-Italic.ttf');
}
@font-face {
    font-family: "Ma Super Fonte";
    font-weight: bold;
    src: url('MaSuperFonte-Bold.ttf');
}
.policetype {
    font-family:"Oswald";
    color: #000;
    font-size: 25px;
    font-weight: 800;
    width: auto;
    margin-bottom:20px;
}

div.spoiler
{
    padding-bottom:50px;
    padding-top:10px;
    padding-right:15px;
    width: 100%;
    background-image: url(../images/deco/test.png);
    background-repeat:no-repeat;
    /**border: 1px solid black;**/
    cursor: pointer;
    /**background-color: lightblue;**/
    display: block;

}
div.spoilerDiv
{
    width: 100%;
    margin-left: 0px;
    margin-right: auto;
}
div.contenuSpoiler
{
    display: none;
}
.savoir {
    font-family:"Oswald";
    color: #000;
    font-size: 12px;

}
.mft {
    padding:15px 10px 15px 0;
    border:solid 1px;
    width:300px;
    background-color: #F4F4F4;
}
.mft h5 {
    text-align:center;
    padding-bottom:10px;
}
.mft ol li {
    min-height: 4em;
    padding-bottom:10px;
}

.news  {
    padding:10px 5px;
    margin-bottom:20px;
}

.deuxtiers {
    font-family:Alike;
    font-size:16px;
    text-align:justify;
}
.untiers  {

}
.flex-container1	{
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:space-around;
    padding-top:1em;
}

.trombino	{
    padding-top:5px;
	border:1px dotted black;
	border-radius:5px;
	background-color:#F0ECEC;
}
.activites	{
    padding-top:5px;
	border:1px dotted black;
	border-radius:5px;
	background-color:#F0ECEC;
}

.video-conteneur {
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
.video-conteneur iframe,
.video-conteneur object,
.video-conteneur embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.video-conteneur {
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
 
.video-conteneur iframe,
.video-conteneur object,
.video-conteneur embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

/******  config boites de la colonne de gauche  ******/
.boxliste {
color:#0d5488;
font-family: "Chewy";
letter-spacing:2px;
font-size:20px;
text-align:center;
font-weight:700;
margin:0;
padding:2px 5px 0 0;
}
.boxphoto {
text-align:center;
margin-left:20px;
}

.box {
	background: -webkit-linear-gradient( top, #fff, #e7efff);
	background: -moz-linear-gradient( top, #fff, #e7efff);
	background: -ms-linear-gradient( top, #fff, #e7efff);
	background: -o-linear-gradient( top, #fff, #e7efff);
	background: linear-gradient( to top, #fff, #e7efff);
	border-style: none;
	width: 190px;
	margin-bottom: 10px;
	border-radius: 5px;
	padding-bottom: 10px;

}

.box1 {
	background: -webkit-linear-gradient( top, #fff, #e7efff);
	background: -moz-linear-gradient( top, #fff, #e7efff);
	background: -ms-linear-gradient( top, #fff, #e7efff);
	background: -o-linear-gradient( top, #fff, #e7efff);
	background: linear-gradient( to top, #fff, #e7efff);
	border-style: none;
	width: 190px;
	margin-bottom: 10px;
	border-radius: 5px;
	padding-bottom: 10px;

}


.box1 ul {
margin:0;
list-style-type:none;
padding-left:20px;
padding-top:10px;
}

.box1 ul li a {
	font-family:Quicksand;
	font-size:16px;
	font-weight:700;
}

.box ul {
margin:0;
list-style-type:none;
padding-left:20px;
padding-top:10px;
}

.box ul li a {
	font-family:Quicksand;
	font-size:16px;
	font-weight:700;
}

.boxlisteprotect {
border-left-color:#b2b2b2;
border-right-color:#6d6d6d;
background-color:#333;
border-top:none;
border-style:solid;
border-width:0 2px;
padding:10px;
}
/******  fin config boites de la colonne de gauche  ******/