@charset "utf-8";
@import url('http://fonts.googleapis.com/css?family=Quicksand:300,400,500,700');
@import url('http://fonts.googleapis.com/css?family=Roboto:400,700,900');
@import url('http://fonts.googleapis.com/css?family=Impact:400,700,900');

body{box-sizing:border-box;font-family:Quicksand;padding:0;margin:0;}

.container{ width:1190px; margin:0 auto;}
#page{ width:100%; display:block; margin:0 auto;}
section{ padding:60px 0 0;}
section aside{ width:32%; display:inline-block; vertical-align:top;  box-sizing:border-box;}
section .col_center{ width:66%; display:inline-block; vertical-align:top; box-sizing:border-box; padding:0px 0 0 30px;}
body.videos section .col_center{padding:0px;}
body{padding:0;margin:0;}
header{ overflow:hidden;  width:100%; cursor:pointer; min-height:637px; background-color:#E0E4E7;}

header >div.container{ background-image:url("images/header-background.jpg"); background-repeat:no-repeat; background-position:center 0;min-height:637px; display:block; margin:0 auto; position:relative; }
header div.bonjour{position: absolute;display: inline-block;width: 100%;height: auto;padding: 10px 25px 0 0;
right:0;top:0;text-align: right;font-family: quicksand;font-weight: 700;font-size: 14px;color: #333; z-index:1;}

header div.bonjour a{ text-decoration:none; color:#333;}
header div.bonjour span{display: inline-block;width: auto;color: #017bc6;padding: 0 5px 0 0;}

header div.bonjour #btn_deconnexion,header div.bonjour #btn_deconnexion:hover,header div.bonjour #btn_deconnexion:visited,header div.bonjour #btn_connexion,header div.bonjour #btn_connexion:hover,header div.bonjour #btn_connexion:visited{ text-decoration:none; color:#333; padding: 0px 0 0 22px; margin-left:70px;    font-weight: 400; position:relative;}

header div.bonjour #btn_deconnexion:before,header div.bonjour #btn_connexion:before{content: "";background-image: url("images/header-cadenas.jpg");background-repeat: no-repeat;width: 23px;height: 25px;background-size: contain;position: absolute;left: 0;top: -5px;}

body.videos header{ width:100%; cursor:pointer; min-height:250px; background-color:#E0E4E7; border-bottom:4px solid #017bc6;}
body.videos header >div.container{ background-image:url("images/header-background-videos.jpg"); background-repeat:no-repeat; background-position:center 0;min-height:250px; display:block; margin:0 auto; }
body.videos header .title_site {    position: relative;    padding: 94px 0 0 320px;}
.title_site{position:relative;padding: 50px 0 0 200px;}
.title_site>span{color: #017bc6;
font-size: 64px;
font-family: Impact;
padding: 50px 0 0 10px; position:relative;}
.title_site>span:before{content:"";background-color:#999999; width:2px; height:80px; position:absolute; left:0; top:50px; display:none; }



h1.title_page{ color:#4d4d4d; font-family:quicksand; font-weight:700; font-size:18px; float:left;width:100%;    padding: 0 40px;
    box-sizing: border-box; line-height:15px;}
h1.title_page span{ font-family:quicksand; font-weight:400; font-size:30px; float:right;}
body.videos .col_center{ width:100%;}

body.apropos .parentCadre > .cadre > .bande > a>span,body.majq .parentCadre > .cadre > .bande > a>span{
display: block;
position: absolute;
bottom: 0;
z-index: 1;
width: 100%;
height:70px;
font-size: 16px;
background-color: rgba(0,0,0,0.5);
color: #FFF;
text-align: center;
padding: 5px;
}
body.apropos .parentCadre > .cadre > .bande > a:first-child>span,
body.apropos .parentCadre > .cadre > .bande > a:nth-child(6)>span,
body.apropos .parentCadre > .cadre > .bande > a:nth-child(7)>span,
body.majq .parentCadre > .cadre > .bande > a:nth-child(6)>span,
body.majq .parentCadre > .cadre > .bande > a:nth-child(7)>span{ line-height:55px}
body.majq .parentCadre > .cadre > .bande > a:first-child>span{ line-height:30px}
body.apropos .parentCadre > .cadre > .bande > a:nth-child(3)>span,
body.apropos .parentCadre > .cadre > .bande > a:nth-child(4)>span,
body.apropos .parentCadre > .cadre > .bande > a:nth-child(5)>span,
body.majq .parentCadre > .cadre > .bande > a:last-child>span{ line-height:28px}

body.videos ._cadre>._bande>._bloc,
body.apropos ._cadre>._bande>._bloc,
body.majq ._cadre>._bande>._bloc {
	width: 854px;
	overflow: hidden;
	font-size: 14px;
	margin:0 auto;
}
body.videos ._cadre,
body.apropos ._cadre,
body.majq ._cadre{
	width: 854px;
	overflow: hidden;
	font-size: 14px;
	margin:0 auto;	
	padding:30px 0 0;	
}
body.videos ._cadre>._bande,
body.apropos ._cadre>._bande,
body.majq ._cadre>._bande {
	width: 10000000px;
	transition:0.5s;
	font-size: 0px;
}

body.videos ._cadre>._bande>._bloc,
body.apropos ._cadre>._bande>._bloc,
body.majq ._cadre>._bande>._bloc {
	display: inline-block;
	vertical-align: top;
}
body.videos #lavideo{
    height: 478px;
    max-width: 854px;
}
body.videos .parentCadre,
body.apropos .parentCadre,
body.majq .parentCadre {
    max-width: 854px;
	position:relative;
}
body.videos .parentCadre > .cadre,
body.apropos .parentCadre > .cadre,
body.majq .parentCadre > .cadre{
position: absolute;
left: 70px;
right: 70px;
top: 0px;
bottom: 0px;
overflow: hidden;	
}

body.videos .liste_videos > .cadre,
body.apropos .liste_videos > .cadre,
body.majq .liste_videos > .cadre {
    left: 50px;
    right: 50px;
}
body.videos .parentCadre > .cadre > .bande,
body.apropos .parentCadre > .cadre > .bande,
body.majq .parentCadre > .cadre > .bande {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 10000000px;
    transition: 0.5s;
    font-size: 0px;
	padding:0px;
}
body.videos .liste_videos {
    height: 270px;
}
body.apropos .liste_videos,
body.majq .liste_videos {
    height: 400px;
}

body.videos .liste_videos > .cadre > .bande > a.actif,
body.apropos .liste_videos > .cadre > .bande > a.actif,
body.majq .liste_videos > .cadre > .bande > a.actif {
    box-shadow: 0px 0px 0px 3px rgb(1,123,198) inset;
    pointer-events: none;
}
body.videos .liste_videos > .cadre > .bande > a,
body.apropos .liste_videos > .cadre > .bande > a,
body.majq .liste_videos > .cadre > .bande > a {
    width: calc(755px / 3 - 20px);
}
body.videos .parentCadre > .cadre > .bande > a,
body.apropos .parentCadre > .cadre > .bande > a,
body.majq .parentCadre > .cadre > .bande > a {
    display: inline-block;
    width: calc(755px / 3 - 20px);
    height: 80%;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.5) inset;
    background-size: cover !important;
    margin: 10px;
    margin-top: 14px;
    background-color: #017bc4!important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    cursor: pointer;
    position: relative;
    overflow:hidden;
    border: none;
    outline: none;
}
body.videos .parentCadre > .cadre > .bande > a:nth-child(3),
body.apropos .parentCadre > .cadre > .bande > a:nth-child(3),
body.majq .parentCadre > .cadre > .bande > a:nth-child(3){
	margin-right :0;
}

body.videos .liste_videos > .cadre > .bande > a.actif,
body.apropos .liste_videos > .cadre > .bande > a.actif,
body.majq .liste_videos > .cadre > .bande > a.actif {
    pointer-events: none;
}
body.videos .parentCadre > .cadre > .bande > a,
body.apropos .parentCadre > .cadre > .bande > a,
body.majq .parentCadre > .cadre > .bande > a {
    cursor: pointer;
}
body.videos .videos > .cadre > .bande > a > span,
body.apropos .tous_pdfs > .cadre > .bande > a > span,
body.majq .tous_pdfs > .cadre > .bande > a > span {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 50%;
    top: 50%;
    margin-left: -10px;
    margin-top: -10px;
    background: #ffffff;
    border-radius: 50%;
    transition: 0.3s;
}
body.videos .videos > .cadre > .bande > a > span::before,
body.apropos .tous_pdfs > .cadre > .bande > a > span::before,
body.majq .tous_pdfs > .cadre > .bande > a > span::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
border-style: solid;
border-color: transparent #424345 transparent;
border-width: 11px 0px 11px 12px;
margin-left: -3px;
margin-top: -11px;
transition: 0.3s;
}
body.videos .videos > .cadre > .bande > a::after,
body.apropos .tous_pdfs > .cadre > .bande > a::after,
body.majq .tous_pdfs > .cadre > .bande > a::after {
content: attr(titre);
position: absolute;
background-color: rgba(0,0,0,0.5);
color: white;
left: 0px;
right: 0px;
bottom: 0px;
font-size:18px;
max-height: 66px;
line-height: 19px;
box-sizing: border-box;
overflow: hidden;
padding: 5px;
font-family:"quicksand";
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px);
transition: 0.6s;
text-align: left;
}
body.videos .videos > .cadre > .bande > a:hover > span::before,
body.apropos .tous_pdfs > .cadre > .bande > a:hover > span::before,
body.majq .tous_pdfs > .cadre > .bande > a:hover > span::before {
    border-color: transparent #ffffff transparent;
}
body.videos .videos > .cadre > .bande > a:hover > span,
body.apropos .tous_pdfs > .cadre > .bande > a:hover > span,
body.majq .tous_pdfs > .cadre > .bande > a:hover > span {
    background: #017bc6;
    transition: 0.6s;
    transform: translateY(-40px) translateX(-50px) scale(1.2);
    box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
    border-radius: 0%;
	left: 64px;
	top: 54px;
}

body.videos .videos > .cadre > .bande > a:hover::after,
body.apropos .tous_pdfs > .cadre > .bande > a:hover::after,
body.majq .tous_pdfs > .cadre > .bande > a:hover::after {
    transition: 0.3s;
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

body.videos .liste_videos > a.gauche, 
.widget .liste_videos > a.droite,
body.apropos .liste_videos > a.gauche,
body.majq .liste_videos > a.gauche {
    width: 10px;
}
body.videos .liste_videos > a.gauche, 
.liste_videos > a.droite,
body.apropos .liste_videos > a.gauche,
body.majq .liste_videos > a.gauche {
    width: 50px;
}
body.videos .parentCadre > a.gauche,
body.apropos .parentCadre > a.gauche,
body.majq .parentCadre > a.gauche  {
    left: 0px;
}
body.videos .parentCadre > a,
body.apropos .parentCadre > a,
body.majq .parentCadre > a  {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 50px;
    cursor: pointer;
}
body.videos .parentCadre > a::before,
body.apropos .parentCadre > a::before,
body.majq .parentCadre > a::before  {
    height: 20px;
    width: 20px;
}
body.videos .parentCadre > a.gauche::before,
body.apropos .parentCadre > a.gauche::before,
body.majq .parentCadre > a.gauche::before {
    left: 50%;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
body.videos .liste_videos > a::before,
body.apropos .liste_videos > a::before,
body.majq .liste_videos > a::before  {
    border-color: #d22114;
}
body.videos .parentCadre > a::before,
body.apropos .parentCadre > a::before,
body.majq .parentCadre > a::before {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    border-right: solid 4px #017bc6;
        border-right-color: #017bc6;
    border-bottom: solid 4px #017bc6;
        border-bottom-color: #017bc6;
    margin-top: -15px;
}
.parentCadre > a.droite{ right:0px;}
.parentCadre > a.droite::before {
    right: 50%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

section.sous_menu{ width:100%; display:inline-block; height:auto; padding:0px; background-color:#DFE3E6;}
section.sous_menu ul{width:100%; display:inline-block;vertical-align:top; padding:0 12px;text-align:center;
	margin:8px 0px!important;}
section.sous_menu ul li {
    width: 16%;
    display: inline-block;
    vertical-align: top;
    color: #017bc6;
    padding: 5px 0px 46px;
    height: 100%;
    position: relative;
	overflow:hidden;
	background-color:#FFF;
}
section.sous_menu ul li.current{ background-color:#017bc6; color:#FFFFFF;}
section.sous_menu >.container >ul >li.current > a{color:#FFF;font-weight:700;}
section.sous_menu > .container > ul > li > a {
text-decoration: none;
font-family: quicksand;
font-weight: 400;
font-size: 14px;
color: #4d4d4d;
display: block;
width: 100%;
text-align: center;
cursor: pointer;
height: 100%;
position: absolute;
top: 0;
padding: 60px 25px 0 25px;
text-align: center;
box-sizing: border-box;
}
section.sous_menu >.container >ul >li:hover{ box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, 0.5);} 
section.sous_menu >.container >ul >li:before{
 content:"";
 width:100%;
 height:50px; 
 padding:5px;
 margin:0 auto;
 display:block;box-sizing: border-box;
}
section.sous_menu >.container >ul >li:first-child:before{
 background-image:url("images/menu1_cl.png");
 background-repeat:no-repeat;
 background-position:center center;
}
section.sous_menu >.container >ul >li:nth-child(2):before{
 background-image:url("images/menu2.png");
 background-repeat:no-repeat;
 background-position:center center;
}
section.sous_menu >.container >ul >li:nth-child(3):before{
 background-image:url("images/menu3_cl.png");
 background-repeat:no-repeat;
 background-position:center center;
}
section.sous_menu >.container >ul >li:nth-child(4):before{
 background-image:url("images/menu4_cl.png");
 background-repeat:no-repeat;
 background-position:center center;
}
section.sous_menu >.container >ul >li:nth-child(5):before{
 background-image:url("images/menu5_cl.png");
 background-repeat:no-repeat;
 background-position:center center;
}
section.sous_menu >.container >ul >li:nth-child(6):before{
 background-image:url("images/menu6_cl.png");
 background-repeat:no-repeat;
 background-position:center center;
}

section.sous_menu .inactif{ opacity:0.5; cursor:default;}
section.sous_menu .inactif a{  cursor:default!important;}

section.toutes_videos .title{width: 380px;  box-sizing:border-box;
display: inline-block;
background-color: #017bc6;
padding: 16px 0 15px 25px;
color: #FFFFFF;
position: relative;
font-size: 18px;
font-weight: 400;
font-family: quicksand;}

section.toutes_videos > ul{ list-style:none;margin-top:70px;}
section.toutes_videos > ul > li{ width:49%; padding-left:90px; display:inline-block; vertical-align:top; background-color: transparent;}
section.toutes_videos > ul > li:before{ display:none;}
section.toutes_videos > ul > li> ul{ list-style:none;}
section.toutes_videos > ul > li> ul > li{    padding: 6px 0px 10px;
    display: inline-block;
    vertical-align: top;
    border-bottom: 1px solid #017bc6;
    margin-bottom: 11px; cursor:pointer;}
section.toutes_videos > ul > li> ul > li:before{display:none;}
section.toutes_videos > ul > li> ul > li>span{ content: "";
    width: 40px;
    height: 30px;
    background-image: url("images/ico-video.jpg");
    background-repeat: no-repeat;
    position: absolute;
    left: -60px;
    top: 0;
    background-color: transparent;
    border-radius: 0;
    background-position: 0 3px;}
section.toutes_videos > ul > li> ul > li a{ font-family:quicksand; font-weight:400; font-size:16px; color:#4d4d4d; text-decoration:none;}
aside .cnt_newp{ display:none; position:relative;}
aside div.bonjour{display: inline-block;width: 100%;height: auto;padding:20px 0px 0 25px;text-align:center;font-family: quicksand;font-weight: 700;font-size: 14px;color: #333; z-index:1; text-align:left;}
aside div.bonjour span{display: inline-block;width: auto;color: #017bc6;padding: 0 5px 0 0;}
aside #btn_voir_videos{ color:#333; font-size:18px; font-family:quicksand; font-weight:400;  display:inline-block;padding:20px 0px 0 25px;}
aside #btn_voir_mdp_change{ color:#333; font-size:18px; font-family:quicksand; font-weight:400;  display:inline-block;
    padding: 20px 0px 0 25px; cursor:pointer; text-decoration:underline;}
aside *{box-sizing:border-box;} 
aside .title{ width:100%; display:inline-block;}
aside .title div{ width:100%; display:inline-block; background-color:#017bc6; padding:16px 0 15px 25px; color:#FFFFFF; position:relative; font-size:18px; font-weight:400; font-family:quicksand;}
aside .liens-gauche{font-size:0px;}
aside >.title>div:before{
content:"";
position:absolute;
right:0;
top:0;
width: 0;
height: 0;
border-style: solid;
border-width:27px 20px 26px 0;
border-color: transparent #ffffff transparent transparent;}

aside >ul{ list-style:none; margin:0 auto; width:100%; margin:0; padding:60px 0 0 14px; position:relative;}
aside .onglet label{ padding:10px; display:inline-block;margin:0 auto; width:100%;}
aside .onglet{ display:none; color:#88857E;}
aside .onglet.current{ display:block;}
aside  form *{ box-sizing:border-box;}
aside  form > ul { list-style:none; padding:30px 30px 0 30px;}
aside  form ul li{ margin:15px 0px;}
aside  form ul li input[type="text"],aside  form ul li input[type="email"],
aside  form ul li input[type="password"]{ width:100%; padding:10px 15px 10px 0; color:#000; border:none; border-bottom:1px solid #CBC6B2; font-size:16px; font-weight:700;font-family:Quicksand;}
aside  form ul li #code{ width:100%; padding:10px 15px 10px 0;border:none;color:#017bc6; border-bottom:1px solid #017bc6;}
aside  form ul li input[type="submit"]{background-color: #017bc6;
color: #FFF;
padding: 15px;
width: 100%;
border: none;
border-radius: 5px; font-family:quicksand; font-size:14px; font-weight:400;	cursor:pointer;}

aside >ul>label{   display: inline-block;
    padding: 0;
    text-align: center;
    width: auto;
    margin-right: 1px;
    color: #999999;
    cursor: pointer;
    font-family: Quicksand;
    font-weight: 700;
    font-size: 16px;
    border-radius: 5px 5px 0 0;
    background-color: rgba(0,0,0,0.3);
    padding: 5px;
    color: #333;
    border-bottom: 1px solid #3333;}

aside >ul>label.current{    color: #333;
    border-bottom: 1px solid #3333;
    background-color: #ccc;
    border-radius: 5px 5px 0 0;
    padding: 5px;}
aside form ul li{ padding:0px; font-family:quicksand;}
aside form ul li a{ font-size:12px;font-family:Quicksand; font-weight:400; text-decoration:none; color:#000;}

aside .pop_error,.sous_menu .pop_error{ width:75%; height:auto; padding:20px; box-sizing:border:box; position:absolute; background-color:#FFF; color:#333; font-size:17px; font-family:Quicksand; left:15%; top: 25%;box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, 0.5); cursor:pointer; text-align:center; display:none; border-radius:3px; z-index:1000;}
.sous_menu .pop_error{ position:fixed!important; top:30%!important;}
aside .pop_error{box-shadow:0px 0px 0px 2000px rgba(0, 0, 0, 0.5);}
aside .pop_error:before{content: "x";
position: absolute;
right: 3px;
top: 3px;
background-color:#017bc6;
color: #FFF;
padding: 3px 5px 4px;
font-weight: bold;
font-size: 12px;
line-height: 9px; border-radius:3px;}

.sous_menu .pop_error{ width:300px; height:auto; padding:30px; box-sizing:border:box; position:absolute; background-color:#FFF; color:#333; font-size:17px; font-family:Quicksand; left:35%; top: 25%;box-shadow:0px 0px 0px 2000px rgba(0, 0, 0, 0.5); cursor:pointer; text-align:center; display:none; border-radius:3px; z-index:1000;}
.sous_menu .pop_error:before{content: "x";
position: absolute;
right: 3px;
top: 3px;
background-color:#017bc6;
color: #FFF;
padding: 3px 5px 4px;
font-weight: bold;
font-size: 12px;
line-height: 9px; border-radius:3px;}

.col_center {font-family:quicksand; font-weight:400; font-size:16px; color:#4d4d4d;}
.col_center .title_gris{font-family:quicksand; font-weight:400; font-size:30px; padding:10px 0 30px;}
.col_center p{ margin:0; padding:0}
.col_center ul{ margin:0; padding:0;}
.col_center ul label{
padding: 30px 0;
display: inline-block;
width: 100%;
color:#017bc6;
font-family:quicksand; font-weight:700; font-size:18px;
}
.col_center ul li{
padding: 7px 0 7px 40px;
display: inline-block;
width: 100%;
position:relative;
box-sizing:border-box;
}
.col_center ul li:before{content:"";background-color:#017bc6; width:10px; height:10px;border-radius:50px;position:absolute; left:10px; top:13px;}

footer{ width:100%; background-image:url("images/footer-background.jpg"); background-repeat:no-repeat; background-position:center 0;min-height:405px; display:block; margin:0 auto;box-sizing:border-box;}
footer *{ box-sizing:border-box;}
footer .container{background-image: url("images/footer-picto.png");
background-repeat: no-repeat;
background-position: 175px 0;
height:100%;
margin: 0 auto;
color: #333; }
footer .container p{width: 100%;
padding: 117px 0 0 303px;
color: #FFF;
line-height: 45px;
font-family: quicksand;
font-size: 30px;
font-weight: 400; min-height:220px;}

aside .cnt_email_oublie{ display:none;}
aside .cnt_email_oublie input[type="button"],aside .cnt_newp input[type="button"]{
    background-color: #017bc6;
    color: #FFF;
    padding: 5px 12px;
    border: none;
    border-radius: 5px;
    font-family: quicksand;
    font-size: 10px;
    font-weight: 400;
    margin: 10px auto;
    display: block;
    float: right;
	cursor:pointer;
}
.btn_oublie{ cursor:pointer; float:right;padding: 0px 0 20px;}
.cnt_code_cnx{ position:relative;}
.cnt_code_cnx .icone_aide{background-color: #017bc6;
color: #fff;padding: 1px 5px;border-radius: 50px;position: absolute;right: 0;top: 5px;font-size: 11px;font-weight: bold;cursor: pointer;}
.cnt_code_cnx .tooltip{background-color: #017bc6;color: #FFF;padding: 10px;border-radius: 4px;position: absolute;right: 0;top: 0;max-width: 100%;height: auto;margin-top: -60px;margin-right: 0; display:none; text-align:center;}
.cnt_code_cnx .cnt_aide:hover>.tooltip{display:block;}
.obligatoire{ font-size: 12px;display: inline-block;vertical-align: top;}

.col_center.pdfs{ width:100%;}
.col_center .tous_pdfs { display: block;width: 100%;height: 470px;box-sizing: border-box;padding: 80px 0 0px;}
.col_center .tous_pdfs *{ box-sizing:border-box;}
.col_center .tous_pdfs ul li:before{display:none; padding:0;}
.col_center .tous_pdfs ul li{ width:32%;height:300px; display:inline-block; vertical-align:top; text-align:center; padding:0;}
.col_center .tous_pdfs ul li a{ width:100%; height:100%; display:block; cursor:pointer; background-position:center;}
.col_center .tous_pdfs ul li span{padding:20px 0;font-weight: bold;font-size:18px; width:100%; display:inline-block;}
.col_center .tous_pdfs ul li:hover{ border:1px solid #EFEFEF;}
.col_center.pdfs iframe{display: block; width:100%; height:500px;margin: 0 0 100px;}

.col_center.liens{ width:100%;}
.col_center .tous_liens { display: block;width: 100%;height:auto;box-sizing: border-box;padding: 200px 0;}
.col_center .tous_liens *{ box-sizing:border-box;}
.col_center .tous_liens ul{ display:flex;}
.col_center .tous_liens ul li{ flex:0.33; height:120px;position:relative; padding:0 20px;}
.col_center .tous_liens ul li:before{display:none;}
.col_center .tous_liens ul li:after{content: "";position: absolute;bottom: -25px;left: 0;width: 50%;border-bottom: 3px solid #CCC;padding: 0;margin-left: 25%;transition: all 1s ease-out;}
.col_center .tous_liens ul li a{width:100%; height:100%; position:absolute; top:0; left:0; }
.col_center .tous_liens ul li.cncf a{background-image:url('../images/logo-cncf.jpg'); background-repeat:no-repeat; background-size:contain;background-position: center top;}
.col_center .tous_liens ul li.esc a{background-image:url('../images/logo-esc.jpg'); background-repeat:no-repeat; background-size:contain;background-position: center top;}
.col_center .tous_liens ul li.sfc a{background-image:url('../images/logo-sfc.jpg'); background-repeat:no-repeat; background-size:contain;background-position: center top;}
.col_center .tous_liens ul li a:hover{border:1px solid #FFF;}
.col_center .tous_liens ul li:hover:after{border-bottom: 3px solid #D51900;}

@media screen and (max-width:1024px){
	body *:not(#liste_videos){ max-width:100%; }
	header{ min-height:auto; height:550px; background-color:none;}
	header >div{ background-size:contain;}
	body.videos header{ height:250px;}
	body.videos *,body.apropos *,body.majq * {    box-sizing: border-box;}
    .title_site {  padding: 38px 0 0 167px;}
	footer .container {    background-position: 135px 0;}
	footer .container p {
    width: 100%;
    padding: 117px 0 0 230px;}
	section aside{padding:0 10px 0 15px}
	section {    padding: 40px 0 0;}
	section.sous_menu ul{ padding:0 5px;}
	body.videos .liste_videos {    height: 175px;}
	body.videos section.toutes_videos{ padding:20px;}
	body.videos section.toutes_videos > ul { margin-top:20px;}
	body.videos section.toutes_videos > ul > li{ padding-left:60px;    padding-right: 25px;}
	body.liens *{box-sizing:border-box;}    
}
@media screen and (max-width:962px){
	header{ height:510px;}
	footer .container p {    padding: 117px 0 0 130px;}
	footer .container {    background-position: 30px 0;}
	aside >ul {    padding: 30px 5px;}
	aside form > ul {    padding: 0;}
	section .col_center{ float:none;}
	body.videos section.sous_menu ul li,body.apropos section.sous_menu ul li,body.majq section.sous_menu ul li,body.liens section.sous_menu ul li{ padding:5px 0px 60px;}
	body.videos h1.title_page,body.apropos h1.title_page,body.majq h1.title_page,body.liens h1.title_page{ padding:0; text-align:center;}
	body.videos h1.title_page span,body.apropos h1.title_page span,body.majq h1.title_page span,body.liens h1.title_page span { float: none;    padding-left: 0;    width: 100%;    display: inline-block;}
	body.videos header .title_site,body.apropos header .title_site,body.majq header .title_site,body.liens header .title_site {  padding: 70px 0 0 265px;}
	body.videos header,
    body.videos header .container,
    body.apropos header,
    body.apropos header .container, 
    body.majq header,
    body.majq header .container,    
    body.liens header,
    body.liens header .container, {min-height:220px;    height: 220px;}
	body.videos section,body.apropos section,body.majq section,body.liens section  {    padding: 10px;}
	body.videos section .col_center,body.apropos section .col_center,body.majq section .col_center,body.liens section .col_center{ padding:0;}
	h1.title_page{ line-height:inherit;}
}
@media screen and (max-width:841px){
	header {    height: 451px;}
	header.connect {    padding-top: 20px;}
	header.connect div.bonjour{padding:0px 25px 20px 0; top:-7px;}
	.title_site {    	padding: 22px 0 0 143px;	}
	aside >ul>label {    padding-right: 11px;    font-size: 14px;}
	aside .pop_error,.sous_menu .pop_error{ left:5px; width:95%;}
	aside >ul>label {    padding-bottom: 15px;}
	body.videos header .title_site {    padding: 56px 0 0 230px;}
	body.videos .parentCadre > .cadre > .bande > a {    width: calc(701px / 3 - 20px);	}
    body.apropos .parentCadre > .cadre > .bande > a {    width: calc(722px / 3 - 20px);	}
    body.majq .parentCadre > .cadre > .bande > a {    width: calc(722px / 3 - 20px);	}        
    .col_center .tous_pdfs ul li{ padding:0 20px;}
}	
@media screen and (max-width:768px){
	header{ height:410px;}
	body.videos header, body.videos header .container{ min-height:190px; height:190px;}
	.cnt_email_oublie{ padding:0; list-style:none;}
	.title_site {    padding: 19px 0 0 130px;}
	body.videos .title_site>span{ font-size:50px;}
	body.videos header .title_site {    padding: 55px 0 0 207px;}
	body.videos .parentCadre > .cadre > .bande > a {    width: calc(630px / 3 - 20px);	}
	body.apropos .parentCadre > .cadre > .bande > a {    width: calc(652px / 3 - 20px);	}  
	body.majq .parentCadre > .cadre > .bande > a {    width: calc(652px / 3 - 20px);	}        
	body.videos section.sous_menu > .container > ul > li > a {    padding: 60px 5px 0 5px;}
    section .col_center.liens{ padding:0 20px;}
    section .col_center.liens h1.title_page{ padding:0;}
	section .col_center.liens .tous_liens{ padding:100px 0 0;}
    section .col_center.liens .tous_liens ul{ display:inline-block; width:100%; vertical-align:top; padding:0;}
    section .col_center.liens .tous_liens ul li{display:inline-block; width:100%; vertical-align:top; padding:0 0 40px;min-height: 180px;}
    section .col_center.liens .tous_liens ul li a{ background-size:auto;}
    section .col_center.liens .tous_liens ul li:after{ display:none;}
    section .col_center.liens  .tous_liens ul li a:hover{ border:none;}
}

@media screen and (max-width:681px){
	header{ height:364px;}
	.title_site {       padding: 20px 0 0 114px;}
	body.videos header .title_site {	    padding: 45px 0 0 172px;	}	
	.title_site>span {    font-size: 50px;    padding: 60px 0 0 22px;}
	body.videos .parentCadre > .cadre > .bande > a {    width: calc(544px / 3 - 20px);	}
	body.apropos .parentCadre > .cadre > .bande > a {    width: calc(566px / 3 - 20px);	}
    body.apropos .parentCadre > .cadre > .bande > a > span{ font-size:13px}
	body.majq .parentCadre > .cadre > .bande > a {    width: calc(566px / 3 - 20px);	}
    body.majq .parentCadre > .cadre > .bande > a > span{ font-size:13px}    
    .col_center .tous_pdfs ul li{ height:300px; width:100%; margin:20px 0px; border-bottom:1px solid #CCC;}
    .col_center .tous_pdfs ul li:last-child{  border-bottom:none;}
    .col_center .tous_pdfs ul li a{ height:70%;}
    .col_center .tous_pdfs{ height:auto;}

}	

@media screen and (max-width:601px){
	header{ height:320px;}
	footer .container p{ font-size:24px;}
	.title_site {    padding: 15px 0 0 104px;}
	section aside{ width:100%; padding:0 5px; margin:0;box-sizing: border-box;}
	section .col_center{width:100%; padding:0 5px; margin:0;box-sizing: border-box;}
	
	aside >ul>label {	    padding-right: 30px;    	font-size: 16px;	}
	aside >ul {    padding: 20px 0px 0 5px;}
	
	body.videos header, body.videos header .container {    min-height: 180px;    height: 180px;}
	body.videos section.sous_menu >.container >ul >li.current > a {font-size: 12px;	}		
	body.videos section.sous_menu >.container >ul >li.current > a:first-child {    line-height: 19px;}
	body.videos header .title_site {    padding: 44px 0 0 150px;}
	body.videos .title_site>span {    font-size: 38px;}
	section.toutes_videos .title{ width:100%;}
	section.toutes_videos > ul > li{ width:100%;}
	body.videos .parentCadre > .cadre > .bande > a {    width: calc(310px / 2 - 20px);}
    
    body.apropos .parentCadre > .cadre > .bande > a {    width: calc(323px / 2 - 20px);}
	body.apropos .liste_videos,body.majq .liste_videos {    height: 275px;}    
     body.apropos .parentCadre > .cadre > .bande > a >span{ line-height:12px;}
     body.apropos .parentCadre > .cadre > .bande > a:nth-child(3) > span{ line-height:20px;}
     body.apropos .parentCadre > .cadre > .bande > a:nth-child(4) > span, body.apropos .parentCadre > .cadre > .bande > a:nth-child(5) > span{ line-height:29px;}


    body.majq .parentCadre > .cadre > .bande > a {    width: calc(323px / 2 - 20px);}
	
     body.majq  .parentCadre > .cadre > .bande > a >span{ line-height:15px;}
     body.majq  .parentCadre > .cadre > .bande > a:nth-child(3) > span,body.majq  .parentCadre > .cadre > .bande > a:last-child(3) > span{ line-height:20px;}
     
     
}	
@media screen and (max-width:592px){
	header{ height:320px;}
	.title_site {       padding: 13px 0 0 94px;}
	.title_site>span {    font-size: 50px;    padding: 60px 0 0 13px;}
	body.videos header .title_site {    padding: 44px 0 0 150px;}
	body.videos .title_site>span {    font-size: 38px;}
    body.apropos .parentCadre > .cadre > .bande > a {    width: calc(320px / 2 - 20px);} 
    body.majq .parentCadre > .cadre > .bande > a {    width: calc(320px / 2 - 20px);} 
	body.majq .parentCadre > .cadre > .bande > a:last-child > span{ line-height:20px;}            
}	
@media screen and (max-width:481px){
	header {    height: 257px;}
	.title_site {
    padding: 11px 0 0 81px;
    }
.title_site>span {
    font-size: 38px;
    padding: 66px 0 0 13px;
}
.title_site>span {
    font-size: 38px;
    padding: 66px 0 0 13px;
}
.title_site>span:before {
    height: 55px;
    left: 0;
    top: 63px;
}
footer .container p {
    font-size: 17px;
}
	body.videos header{ min-height:125px; height:125px;}
	body.videos header .title_site {    padding: 44px 0 0 150px;}
	body.videos .title_site>span {    font-size: 38px;}
	body.videos header .title_site {    padding: 36px 0 0 127px;}
	body.videos .title_site>span {    font-size: 30px;}
body.videos .parentCadre > .cadre > .bande > a {    width: calc(340px - 20px);}	

body.videos section.sous_menu,body.apropos section.sous_menu,body.majq section.sous_menu,body.liens section.sous_menu{ position:absolute; background:transparent; z-index:100;}
body.videos h1.title_page {
    padding: 0 36px 0 8px;
    text-align: left;
}
body.videos section.sous_menu ul li,body.apropos section.sous_menu ul li,body.majq section.sous_menu ul li,body.liens section.sous_menu ul li {
    padding: 0;
	width:100%;background-color: #017bc6;
    color: #FFFFFF;  }
body.videos section.sous_menu >.container >ul >li:nth-child(2):before,
body.apropos section.sous_menu >.container >ul >li:nth-child(2):before,
body.majq section.sous_menu >.container >ul >li:nth-child(2):before,
body.liens section.sous_menu >.container >ul >li:nth-child(2):before   {
    background-position: 2px 2px!important;
}

body.videos section.sous_menu >.container >ul >li > a,
body.apropos section.sous_menu >.container >ul >li > a,
body.majq section.sous_menu >.container >ul >li > a,
body.liens section.sous_menu >.container >ul >li > a {
    font-size: 13px;
    display: inline-block!important;
    width: auto;
    vertical-align: top;
    line-height: 12px!important;
    color: #FFF;    
    padding: 18px 0 0 62px;
}
body.videos section.sous_menu >.container >ul >li:before,
body.apropos section.sous_menu >.container >ul >li:before,
body.majq section.sous_menu >.container >ul >li:before,
body.liens section.sous_menu >.container >ul >li:before{
  width:50px;
  margin:0;
}
.menu-toggle.btn{  width:40px; height:40px;background-color:#017bc6; border-radius:4px;    display: block;
    padding: 2px 11px 0 0; float:right;margin-bottom: 5px;
    margin-right: 5px;}
.menu-toggle.btn span {
    width: 100%;
    height: 4px;
    background-color: #FFF;
    display: block;
    margin: 6px;
}

body.videos .sous_menu .container ul,body.apropos .sous_menu .container ul,body.majq .sous_menu .container ul,body.liens .sous_menu .container ul{ display:none;}
body.videos section.sous_menu .inactif,
body.apropos section.sous_menu .inactif,
body.majq section.sous_menu .inactif,
body.liens section.sous_menu .inactif{ opacity:0.9; background-color:#767575; color:#FFF; text-align:left;}
body.videos section.sous_menu .inactif a,
body.apropos section.sous_menu .inactif a,
body.majq section.sous_menu .inactif a,
body.liens section.sous_menu .inactif a{  text-align:left;}
body.videos section.toutes_videos .title,
body.apropos section.toutes_videos .title,
body.majq section.toutes_videos .title,
body.liens section.toutes_videos .title{ width:100%;}
body.videos .videos > .cadre > .bande > a:hover::after{ display:none;}

body.apropos .parentCadre > .cadre > .bande > a {    width: calc(365px / 2 - 20px);} 
body.apropos .parentCadre > .cadre > .bande > a > span{ line-height:20px;} 
body.apropos .parentCadre > .cadre > .bande > a:nth-child(3) > span{ line-height:29px;} 

body.majq .parentCadre > .cadre > .bande > a {    width: calc(365px / 2 - 20px);} 
body.majq .parentCadre > .cadre > .bande > a > span,
body.majq .parentCadre > .cadre > .bande > a:last-child(3) > span{ line-height:20px;} 

body.liens .tous_liens ul li{ max-height:120px; border:1px solid #EFEFEF; margin: 20px 0 0}
body.liens .tous_liens ul li a{ background-position:center center!important;}
body.liens h1.title_page{ padding:20px 0 0!important;}
body.liens h1.title_page span{ font-size:25px;}
}
@media screen and (max-width:360px){
	header {    height: 190px;}
	header.connect div.bonjour {    padding: 0px 8px 20px 0;    top: -15px;    box-sizing: border-box; text-align:center;}
	
	header.connect div.bonjour a:first-child{ float:left; padding:0 0 0 5px;}
    header.connect div.bonjour a:nth-child(2){ float:right;padding:0 5px 0 0px;}    
header.connect div.bonjour #btn_deconnexion, header.connect div.bonjour #btn_deconnexion:hover, header.connect div.bonjour #btn_deconnexion:visited,header.connect div.bonjour #btn_connexion, header.connect div.bonjour #btn_connexion:hover, header.connect div.bonjour #btn_connexion:visited{ margin-left:0px;}
	
aside div.bonjour{   padding: 20px 8px 10px 0!important;  }
aside #btn_voir_videos	{   padding:10px 0px 20px 0px!important; font-weight:bold;  }
aside #btn_voir_mdp_change	{   padding:10px 0px 20px 0px!important;  font-weight:bold;  }

    footer .container {
    background-position: 9px 0;
    background-size: 50px;
}
footer .container p {
    padding: 41px 0 0 79px;
	font-size:15px;
}
.title_site {
    padding: 12px 0 0 58px;
}
.title_site>span {
    font-size: 25px;
    padding: 62px 0 0 7px;
}
.title_site>span:before {
    height: 35px;
    left: 0;
    top: 63px;
}
section {
    padding: 10px 0;
}
body.videos section.sous_menu >.container >ul >li > a{ font-size:14px;}
body.videos .title_site>span {
    font-size:22px;
}
body.videos header .title_site {
    padding: 29px 0 0 97px;
}
body.videos .parentCadre > .cadre > .bande > a {
    width: calc(222px - 20px);
}

body.videos h1.title_page span{ font-size:20px;}
body.videos #lavideo{ height:250px;}
.col_center .title_gris{ font-size:20px;}

body.apropos .parentCadre > .cadre > .bande > a {    width: calc(485px / 2 - 20px);} 
body.apropos .parentCadre > .cadre > .bande > a:nth-child(4) > span, body.apropos .parentCadre > .cadre > .bande > a:nth-child(5) > span{ line-height:57px}

body.majq .parentCadre > .cadre > .bande > a {    width: calc(485px / 2 - 20px);} 
body.majq .parentCadre > .cadre > .bande > a > span{ line-height:30px}
body.majq .parentCadre > .cadre > .bande > a:first-child > span{line-height:27px}
body.majq .parentCadre > .cadre > .bande > a:last-child > span{line-height:60px}

}
@media screen and (max-width:320px){
	header {    height: 170px;}
	footer .container p {    font-size: 13px;}
	.title_site>span {    font-size: 25px;    padding: 65px 0 0 7px;}
	.title_site {    padding: 9px 0 0 51px;}
	body.videos .title_site>span,body.apropos .title_site>span,body.majq .title_site>span {
    font-size: 21px;
}
body.videos header .title_site,body.apropos header .title_site,body.majq header .title_site {
    padding: 23px 0 0 87px;
}
body.videos header,body.apropos header,body.majq header{ min-height:95px; height:95px;}
body.videos .parentCadre > .cadre > .bande > a {
    width: calc(180px - 20px);
}

aside .pop_error,.sous_menu .pop_error{ background-color:#333; color:#fff;}
aside .pop_error,.sous_menu .pop_error{box-shadow:0px 0px 0px 5000px rgba(0, 0, 0, 0.5);}
body.apropos .parentCadre > .cadre > .bande > a {    width: calc(403px / 2 - 20px);} 
body.majq .parentCadre > .cadre > .bande > a {    width: calc(403px / 2 - 20px);} 
body.majq .parentCadre > .cadre > .bande > a> span{ line-height:20px;}
body.majq .parentCadre > .cadre > .bande > a:last-child > span {    line-height: 28px;}
}

@media screen and (max-width:310px){
    header.connect div.bonjour {
    	padding-left:5px;
        text-align: left;
        font-size: 12px;
    }
    body.videos ._cadre{ padding:0;}
    body.videos #lavideo{ height:200px;}
    .cnt_newp{ font-weight:bold; font-size:14px;}
	aside div.bonjour{ font-size:15px;}
    header.connect div.bonjour{padding-left:5px;}
	body.apropos .parentCadre > .cadre > .bande > a {    width: calc(384px / 2 - 20px);} 
	body.majq .parentCadre > .cadre > .bande > a {    width: calc(384px / 2 - 20px);}         
}