/* ================================= */
/*           General               */
/* ================================= */

@font-face {
    font-family: 'r-semibold';
    src: url('../fonts/r_semibold-webfont.woff2') format('woff2'),
         url('../fonts/r_semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'r-regular';
    src: url('../fonts/r_regular-webfont.woff2') format('woff2'),
         url('../fonts/r_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bar-formations';
    src: url('../fonts/bar_formations-webfont.woff2') format('woff2'),
         url('../fonts/bar_formations-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  width: 100%;
  max-height: 100%;
  -webkit-font-smoothing: antialiased;
}

html { 
  margin:0;
  padding:0;

}

body {
  font-family: 'r-regular';
  background-color: #000;
}


#kingofthenorth {
  display: flex;
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  position:absolute;
  min-width: 100%;
  min-height: 100%;
}

#main {
  width: 100%;
  left:0px;
  padding-left: 300px;/*Le menu est en fixed, donc faut décaler le main*/
  /*overflow: hidden;*/  /*A faire, faut trouver une solution JS pour scroll*/
  /*overflow-x:hidden;*/ /*A enlever après dev*/
  transition: all 200ms ease-out 0s;
}


#main.grille {
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */  
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap; /* NEW */
}

.chut {
  display: none !important;
}

.italic {
  font-style: italic;
}


/* Vignette Carte Formations // vignette_carte_formation */
/* voir pina-colada.css*/



/* ------ MENU ------- */

#menu {
  position:fixed;
  font-family: 'r-regular';
  left:0px;
  top:0px;
  display:block;
  width: 300px;
  height: 100%;
  background: transparent url("../img/menu/background-menu.jpg") no-repeat;
  background-size: cover;
  transition: all 200ms ease-out 0s; /*Transition qui s'appliquera à tous les effets (all) lors des changements de propriété (couleur, taille, transform..)*/
  z-index: 500;
  color:#fff;
}

#menu h1.logo_bar, #menu h1.logo_bar_light {
  width: 250px;
  height: 138px;
  background: url(../img/menu/logo-bar-a-formations.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
  margin: 90px auto 60px auto;
  padding: 0;
  transition: all 300ms ease-out 0s;
}

#menu h1.logo_bar_light {
  width: 250px;
  height: 138px;
  background: url(../img/menu/logo-bar-a-formations-light.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
  margin: 90px auto 60px auto;
  padding: 0;
  transition: all 300ms ease-out 0s;	
}

#menu h1.logo_bar:hover, #menu h1.logo_bar_light:hover {
  transform:scale(0.9);
}

#menu nav {
  margin:0px 0 0 0;
}

#menu nav a {
    color: #fff;
    display: block;
    font-size: 14px;
    letter-spacing:0.5px;
    line-height: 41px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 300ms ease-out 0s;
}

#menu nav a:hover {
    color: #f39321;
}

#menu nav a.active {
    color: #f39321;
    font-family: 'r-semibold';
}

#menu nav a.lien_nos_formations {	
	background-color: #000;
}

/*#menu nav a.lien_covid { 
  background-color: #EBEB0B;
  font-size: 12px;
  color: #000;
}*/

#menu .separation {
    background-color:#fff;
    display: block;
    height: 2px;
    margin: 30px auto 30px auto;
    width: 130px;
}


#hamburger {
  position: absolute;
  display:none;  
  top: 5px;
  left: 320px;
  width: 40px;
  height: 40px;
  background: url(../img/menu/hamburger.png) no-repeat center; 
  background-size: cover;
  transition: all 300ms ease-out 0s;
  z-index: 5;
}

#cross {
  position: absolute;
  display:none;   
  top:21px;
  right:18px;
  width:20px;
  height:20px;
  background: url(../img/menu/cross.png) no-repeat center; 
  background-size: cover;
  transition: all 300ms ease-out 0s;
  z-index: 5;
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0.5;
    background: #000000;
    transition: all 1000ms ease-out 0s; /*Permet de gérer transition , jquery fait le reste*/
}

.overlay_hover {
  opacity: 0 !important;
  transition: all 500ms ease-out 0s;
}

.overlay_accueil_case2 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0.4;
    background: #000000;
    transition: all 1000ms ease-out 0s; /*Permet de gérer transition , jquery fait le reste*/
}

.overlay_accueil_case2_hover {
  opacity: 0 !important;
  transition: all 500ms ease-out 0s;
}


/*pied*/

aside .pied {
    bottom: 5px;
    left: 0;
    position: absolute;
    right: 0;
    transition: all 300ms ease-out 0s;
}

aside .pied .social {
    text-align: center;
}

aside .pied .social a {
    /* border: 2px solid #ffffff; */
    color: #fff;
    display: inline-block;
    font-size: 25px;
    margin: 0 1px 3px;
    position: relative;
    transition: all 400ms ease-out 0s;
    width: 45px;
}

aside .pied .social a:hover {
  transform:scale(0.8);
}

aside .pied .auteur {
    color: #aaaaaa;
    font-size: 10px;
    font-weight: normal;
    margin-bottom: 15px;
    margin-top: 0px;
    text-align: center;

}

aside .pied .auteur a {
    display: inline-block;
    height: 23px;
    margin-top: 10px;
    color: #aaaaaa;
    text-decoration: none;
  	line-height:19px;
    transition: all 300ms ease-out 0s;
}

aside .pied .auteur a:hover {
    color: #f39321;
}

aside .pied .social .tiny-logo-skmg {
  background: transparent url("../img/menu/logo-skmg-mini.png") no-repeat center center;
  background-size: cover;
	width: 42px;
	height: 44px;
	margin-bottom: 5px;
}

/* ================================= */
/*           Content             */
/* ================================= */

li p {
    padding: 20px 0 0 0px;
    margin: 0px;
    font-weight: 400;
    font-size: 12px;
    word-spacing: 1px;
    color: #fff;
}

h3 + ul, h4 + ul {
  /*margin-top: 10px;*/
  /*margin-bottom: 18px;*/
}

ul, li {
  list-style: square;
  padding: 0;
  margin: 0;
}

ul, ul {
  padding: 0;
  margin: 0 0 18px 30px;
}

nav a {
  color:#fff;
  display: block;
}

.contenu a{
  color : #1b1b1b;
  transition: all 200ms ease-out 0s;
}

.contenu .text_barre{
  /*text-decoration: line-through;*/
  color: #bfbfbf;
}

.contenu a:hover{
  color : #f39321;
}

.contenu h3{
  font-family: 'r-regular';
  text-transform: uppercase;
  padding-top:40px;
  padding-bottom: 18px;
  margin: 0;
  font-size: 19px;
  color:#000;
}

.contenu h4{
  font-family: 'r-regular';
  text-transform: none;
  padding-top: 18px;
  padding-bottom: 5px;
  margin: 0;
  font-size: 13px;
  color:#000;
}

#h4-formateur{
  padding-top: 0px;
}

.contenu p + h3, .contenu ul + h3, .contenu div + h3 {
  padding-top:5px ;
}

.contenu p + h4, .contenu ul + h4, .contenu div + h4 {
  padding-top:0px ;
}

.contenu p {
  padding:0;
  margin-bottom:18px;
  margin-top: 0
}

.contenu p:last-child {
  margin-bottom:50px;
}

.contenu .accordion {
  /*padding-top: 30px;*/
  min-width: 100%;
}

.contenu .important_look {
  color:#f39321 !important;
  font-weight: bold;
}

.contenu .separation {
    background-color:#000;
    display: block;
    height: 2px;
    margin: 0px 0 18px 0px;
    padding:0 0 0 0px;
    width: 50px; 
}


.accroche h2 {
  font-family: 'bar-formations';
  text-transform: uppercase;
  font-size: 48px;
  color: #fafafa;
  margin: 0 0 20px 0;
  padding: 75px 40px 0 36px; /*36px avant ajout logo*/
  /*background: url(../img/commun/pre-tire.png) no-repeat 36px 74px; */
  text-shadow: -4px 3px 6px rgba(0, 0, 0, 0.39);
  transition: all 200ms ease-out 0s;
}


#body_formations .accroche h2 {
  font-family: 'bar-formations';
  text-transform: uppercase;
  font-size: 48px;
  color: #fafafa;
  margin: 0 0 20px 0;
  padding: 75px 40px 0 36px; /*36px avant ajout logo*/ /*padding: 75px 40px 0 148px; avec logo datadock*/
  /*background: url(../img/commun/pre-tire.png) no-repeat 36px 74px; */
  text-shadow: -4px 3px 6px rgba(0, 0, 0, 0.39);
  transition: all 200ms ease-out 0s;
}


.accroche_inside .separation, .qui_sommes_nous_inside .separation {
    background-color:#fff;
    display: block;
    height: 2px;
    margin: 0px 0 30px 36px; /*36px avant ajout logo*/
    padding:0 0 0 0px;
    width: 95px; 
}

#body_formations .accroche_inside .separation, .qui_sommes_nous_inside .separation {
    background-color:#fff;
    display: block;
    height: 2px;
    margin: 0px 0 30px 36px; /*margin: 0px 0 30px 148px; avec logo datadock*/
    padding:0 0 0 0px;
    width: 95px; 
}



.accroche_inside .sous_titre, .accroche_inside .sous_description, .qui_sommes_nous_inside .sous_titre, .accroche_inside ul {
  font-family: 'r-regular';
  font-size: 14px;
  text-transform: uppercase;
  color:#fff;
  padding: 0 40px 0 36px;
  margin: 5px 0 5px 0;
  /*max-width: 590px;*/
  line-height: 26px;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
  transition: all 200ms ease-out 0s;
}

.accroche_inside .sous_description {
  text-transform: none !important;
}

.accroche_inside .date_maj {
  text-transform: none !important;
  font-size: 12px;
}

.accroche_inside ul li {
  list-style: none;
  display: inline;
  padding-right: 10px;
}


/* ================================= */
/*         Accueil               */
/* ================================= */

/* ------ Logo  ------- */

.ombre_logo {
  filter: drop-shadow(5px 5px 7px #000);
  -webkit-filter: drop-shadow(5px 5px 7px #000);
}

h2.logo_accueil_case4 {
  transform: scale(0.91);
  transition: all 200ms ease-out 0s;
}

h2.logo-accueil-a-propos {
  transition: all 200ms ease-out 0s;
}

h2.logo_accueil_case3 {
  transform: scale(0.91);
  transition: all 200ms ease-out 0s;
}

h2.logo_accueil_case2 {
  transform: scale(0.99);
  transition: all 200ms ease-out 0s;
}


/* ------ Gestion lien des cases ------- */

#body_accueil #main a {
width: 100%;
height: 100%;  
position: absolute;
display: flex;
display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
}


/* ------ Accueil Gauche : Notre Crédo ------- */

.accueil_case1 {
  position: relative;
  width:35%;
  min-height:100%;
  overflow: hidden;
  background: url(../img/accueil/background-notre-credo.jpg) no-repeat center; 
  background-size: cover;
}

.accueil_case1 .accueil_case1_inside {
  text-align: center;
  z-index:2;
  margin: auto;
}

.accueil_case1_inside h2.logo-accueil-a-propos {
  width: 415px;
  height: 473px;
  background: url(../img/accueil/logo-accueil-a-propos.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}


/* ------ Accueil Droite  : 3 cases ; ------- */

.accueil_droite {
  width:65%;
  min-height:100%;
  overflow: hidden;
  display: flex; 
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap; /* Safari 6.1+ Ipad */
}

.accueil_droite .accueil_case4, .accueil_droite .accueil_case3 {
  position: relative;
  width:50%;
  overflow: hidden;
  min-height: 50%;
}

/* ------ Accueil Droite : Avis Ref   ------- */

.accueil_droite .accueil_case4 {
  background: url(../img/accueil/background-avis-ref.jpg) no-repeat center; 
  background-size: cover;
}

.accueil_case4 .accueil_case4_inside {
  margin:auto; /* Centrer verticalement et horizontalement grâce à flex */
  text-align: center;
  z-index:1;
}

.accueil_case4_inside h2.logo_accueil_case4 {
  width: 350px;
  height: 162px;
  background: url(../img/accueil/logo-avis.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}

/* ------ Accueil Droite : Accompagnement  ------- */

.accueil_droite .accueil_case3 {
  background: url(../img/accueil/background-infos-pratiques.jpg) no-repeat center; 
  background-size: cover;
}

.accueil_case3 .accueil_case3_inside {
  margin:auto; /* Centrer verticalement et horizontalement grâce à flex */
  text-align: center;
  z-index:1;
}

.accueil_case3_inside h2.logo_accueil_case3 {
  width: 315px;
  height: 207px;
  background: url(../img/les-formations/logos/logo-accompagnement.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}

/* ------ Accueil Droite : Les formations   ------- */

.accueil_droite .accueil_case2 {
  width:100%;
  min-height:50%;
  overflow: hidden;
  position: relative;
  display:flex; 
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  background: url(../img/accueil/background-les-formations.jpg) no-repeat center; 
  background-size: cover;
}


.accueil_droite .accueil_case2_inside {
  margin:auto; /* Centrer verticalement et horizontalement grâce à flex */
  text-align: center;
  z-index:1;
}

.accueil_case2_inside h2.logo_accueil_case2 {
  width: 235px;
  height: 168px;
  background: url(../img/accueil/logo-les-formations.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}


/* ================================= */
/*         Pages Carte Formations : élements en commun       */
/* ================================= */

.contenu_carte {
  position: relative;
  width:100%;
  min-height:100%;
  transition: all 200ms ease-out 0s;
}

.contenu_carte_inside {
  transition: all 200ms ease-out 0s;
  margin:0 auto 40px auto;
  width: 90%; /* centrer grille flexbox fluide*/
}

.contenu_carte .titre_carte_formations {
  text-align: center;
}

.contenu_carte .titre_carte_formations h2  {
  font-family: 'bar-formations';
  text-transform: uppercase;
  font-size: 48px;
  color: #fafafa;
  margin: 36px auto 20px auto;
  padding: 0px 0px 0 0px;
  text-shadow: -4px 3px 6px rgba(0, 0, 0, 0.39);
  transition: all 200ms ease-out 0s;
}


.contenu_carte .titre_carte_formations .separation {
    background-color:#fff;
    display: block;
    height: 2px;
    margin: 0px auto  30px auto;
    padding:0 0 0 0px;
    width: 95px; 
}

.contenu_carte_inside .legende_carte {
  font-family: 'r-regular';
  font-size: 14px;
  text-transform: uppercase;
  color:#fff;
  padding: 0 0px 0 16px;
  margin: 30px 0 0 0;
  text-shadow: 0px 1px 4px rgba(0, 0, 0, 1);
  transition: all 200ms ease-out 0s;

}

/* ================================= */
/*         Pages Internes + Fiche Formation : élements en commun       */
/* ================================= */


.picto_badge_titre {
    position: absolute;
    padding: 84px 40px 0 36px;  
}

.accroche {
  position: relative;
  width:45%;
  min-height:100%;
  transition: all 200ms ease-out 0s;
  overflow: hidden;
  display: flex;
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
}

.accroche_inside {
  position: absolute;
  transition: all 200ms ease-out 0s;
  z-index: 2
}

.contenu {
width: 55%;
overflow: hidden;
font-family: 'r-regular';
font-size: 13px;
color:#1b1b1b;
background-color:#fff;
line-height: 22px;
transition: all 200ms ease-out 0s;
}

.contenu_inside {
  position: fixed;
  overflow: auto;
  overflow-x: hidden; 
  height: 100%;
  padding-left:50px;
  padding-right:50px;
  transition: all 200ms ease-out 0s;
}

.contenu_inside img {
  display: block;
  margin-left: auto;
  margin-right: auto; 
  margin-bottom: 18px;
  max-width: 100%;
}

.contenu_inside  img.first_image {
	padding-top: 40px; 
}

/*Plan formations + Contenu accordeon*/
.contenu .bi-colonne {
    display: flex;
    flex-wrap: wrap;  
}

.contenu .accordion-content p:last-child {
    margin-bottom: 10px;
}

.contenu .accordion-content h3 {
  padding-top: 5px; 
}

.contenu .accordion-content h4 {
  padding-top: 0px; 
}

.contenu .accordion-content ul {
  margin-left: 13px;
}

.contenu .accordion-content .tab_decalage {
  padding-left: 15px;
}

.contenu .formation-dates li, .contenu .formation-tarif li {
  font-size: 15px;
  line-height: 26px;
}

.contenu .bi-colonne .bi-colonne-avant {
  width: 50%;
}

.contenu .bi-colonne .bi-colonne-apres {
  width: 50%;
}

.contenu .bi-colonne .bi-colonne-avant p {
  padding-right: 25px;
}

.contenu .bi-colonne .bi-colonne-apres p {
  padding-left: 25px;
}

.contenu .bi-colonne .bi-colonne-avant ul {
margin-left: 13px;
padding-right: 10px
}

.contenu .bi-colonne .bi-colonne-apres ul {
margin-right: 13px;
padding-right: 10px
}

.contenu .partenaires {
  text-align: center;
  min-width: 50%;
}

/* ------ Bouton voir la carte ------- */
.btn_interne {
    border: 2px solid #ffffff;
    color: #000;
    display: inline-block;
    font-family: "bar-formations";
    font-size: 13px;
    padding: 6px 15px;
    text-transform: uppercase;
    transition: all 200ms ease-out 0s;
    background-color: #f39321;
    margin-top: 10px;
}

.btn_interne:hover {
    background-color: #333333;
    color: #fff;
}


/*Formateur*/
.contenu .prez-formateur {
    display: flex;
    flex-wrap: wrap;  
}

.contenu .prez-formateur .photo-formateur {
  width: 25%;
}

.contenu .prez-formateur .txt-formateur {
  width: 70%;
}

.contenu .prez-formateur .txt-formateur p, .contenu .prez-formateur .txt-formateur h4 {
  padding-left: 25px;
}

/* ================================= */
/*         qui_sommes_nous     */
/* ================================= */

#body_qui_sommes_nous .accroche {
  background: url(../img/qui-sommes-nous/background-full-qui-sommes-nous.jpg) no-repeat center center; 
  background-size: cover;
}

/* ================================= */
/*         Notre Crédo     */
/* ================================= */

#body_financements .accroche {
  background: url(../img/financements/background-body-financements.jpg) no-repeat center center; 
  background-size: cover;
}

/* ================================= */
/*         Infos Pratiques    */
/* ================================= */

#body_accompagnement_suivi .accroche {
  background: url(../img/accompagnement/background-full-accompagnement.jpg) no-repeat center center; 
  background-size: cover;
}

/* ================================= */
/*         Nos références    */
/* ================================= */

#body_nos_references .accroche {
  background: url(../img/nos-references/background-nos-references.jpg) no-repeat center bottom; 
  /*background-color:#fff;*/
  background-size: cover;
}


/* ================================= */
/*         Page 404    */
/* ================================= */

#body_page404 .page404 {
  background: #000;
  background-size: cover;
}

.page404 {
  display:flex; 
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  width:100%;
  height:100vh; /*100% = Bug IOS. Donc passage au vh */
  min-height:100vh; /*100% = Bug IOS. Donc passage au vh */
  transition: all 200ms ease-out 0s;
}

.page404 h2 {
  width: 403px;
  height: 221px;
  margin:auto;
  margin-bottom: 30px;
  background: url(../img/404/logo-404.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px; 
  filter: drop-shadow(0px 0px 7px #000);
  -webkit-filter: drop-shadow(0px 0px 10px #000);
}



/* ================================= */
/*         qui_sommes_nous     */
/* ================================= */

.qui_sommes_nous h2 {
  width: 403px;
  height: 221px;
  margin:auto;
  margin-bottom: 30px;
  background: url(../img/nos-references/logo-bar-a-formations-sans-texture.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px; 
  filter: drop-shadow(0px 0px 7px #000);
  -webkit-filter: drop-shadow(0px 0px 10px #000);
}


.qui_sommes_nous .fa-envelope-o::before {
    margin-right: 5px;
}

.qui_sommes_nous span.antispam {
    display: none;
}

.qui_sommes_nous .mail {
    transition: all 300ms ease-out 0s;
}

.qui_sommes_nous .mail:hover {
    color: #f39321;
}

.qui_sommes_nous .centre_qui_sommes_nous {
  text-align: center; 

}

.qui_sommes_nous .centre_qui_sommes_nous li {
  list-style: none; 
  font-size: 18px; 
  padding-top: 8px;
}



/* ================================= */
/*         Mentions Légales     */
/* ================================= */

#body_mentions_legales .mentions_legales {
  background-color:#fff;
}

.mentions_legales { 
  width:100% !important;
}

.mentions_legales_inside {
  margin: 30px auto 30px auto;
  transition: all 200ms ease-out 0s;
  font-family: 'r-regular';
  color:#000;
  line-height: 26px;
  padding-left: 50px;
  padding-right: 50px;
}


/* ================================= */
/*        Les BIG fonds de chaque Page Carte Formations    */
/* ================================= */

#body_formations_video_co .contenu_carte {
  background: url(../img/les-formations/video-motion-design/background-carte-video.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations_motion .contenu_carte {
  background: url(../img/les-formations/video-motion-design/background-carte-motion-design.jpg) no-repeat center center; 
  background-size: cover;
}

#body_carte_parcours_cpf .contenu_carte {
  background: url(../img/les-formations/cpf/background-carte-cpf.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations_team_spirit .contenu_carte {
  background: url(../img/les-formations/team-spirit/background-carte-team-spirit.jpg) no-repeat center center; 
  background-size: cover;
}

/* ================================= */
/*        Carte : Les logos en haut de chaque CARTE (listing des formations d'un monde) */
/* ================================= */

/* Logo carte vidéo */
.contenu_carte .titre_carte_formations h2.video_co {
  width: 192px;
  height: 154px;
  background: url(../img/les-formations/logos/logo-video.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}

/* Logo carte Motion */
.contenu_carte .titre_carte_formations h2.motion_2d_3d {
  width: 227px;
  height: 154px;
  background: url(../img/les-formations/logos/logo-motion.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}

/* Logo carte parcours cpf 
.contenu_carte .titre_carte_formations h2.design_photo {
  width: 234px;
  height: 154px;
  background: url(../img/les-formations/logos/logo-cpf-parcours.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}*/

/* Logo carte Team Spirit 
.contenu_carte .titre_carte_formations h2.video_audio {
  width: 273px;
  height: 204px;
  background: url(../img/les-formations/logos/logo-team-spirit.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
} */


/* ================================= */
/*        Les fonds de chaque Fiche Formation    */
/* ================================= */

#body_suivez_nous .accroche.suivez_nous {
  background: url(../img/suivez-nous/background-suivez-nous.jpg) no-repeat center center; 
  background-size: cover;
}

#body_cpf_motion_video .accroche.cpf_motion_video {
  background: url(../img/les-formations/cpf/background-formation-cpf-motion-video.jpg) no-repeat center center; 
  background-size: cover;
}

#body_certif_motion_video .accroche.certif_motion_video {
  background: url(../img/certification-motion-video/fond-certification-motion-video.jpg) no-repeat center center; 
  background-size: cover;
}

#body_partenariat_certif .accroche.partenariat_certif_video {
  background: url(../img/partenariat/fond-partenariat_certif.jpg) no-repeat center center; 
  background-size: cover;
}

#body_cpf_comment_inscription .accroche.cpf_comment_inscription_video {
  background: url(../img/cpf-comment-inscription/fond-inscription-cpf.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .accroche.menu_videographer {
  background: url(../img/les-formations/video-motion-design/background-menu-videographer.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .motion_designer_2d {
  background: url(../img/les-formations/video-motion-design/background-motion-designer-2d.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .motion_designer_3d {
  background: url(../img/les-formations/video-motion-design/background-motion-designer-3d.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .lightroom {
  background: url(../img/les-formations/video-motion-design/background-lightroom.jpg) no-repeat center center; 
  background-size: cover;
}

/* OLD

#body_formations .accroche.enneagramme_module1 {
  background: url(../img/les-formations/team-spirit/background-enneagramme-module1.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .accroche.enneagramme_module2 {
  background: url(../img/les-formations/team-spirit/background-enneagramme-module2.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .accroche.sprint_design {
  background: url(../img/les-formations/team-spirit/background-sprint-design.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .accroche.photoshop {
  background: url(../img/les-formations/design-photo/background-photoshop.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .accroche.ux_ui_design {
  background: url(../img/les-formations/web-co/background-ux-ui-design.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .accroche.adobe_xd {
  background: url(../img/les-formations/design-photo/background-adobe-xd.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .accroche.indesign {
  background: url(../img/les-formations/design-photo/background-indesign.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .accroche.illustrator {
  background: url(../img/les-formations/design-photo/background-illustrator.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .accroche.wordpress {
  background: url(../img/les-formations/web-co/background-wordpress.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .accroche.wordpress_debutant {
  background: url(../img/les-formations/web-co/background-wordpress-debutant.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .accroche.redaction_web_seo {
  background: url(../img/les-formations/web-co/background-redaction-web-seo.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .accroche.community_management {
  background: url(../img/les-formations/web-co/background-community-management.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .accroche.instagram_entreprise {
  background: url(../img/les-formations/web-co/background-instagram-entreprise.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .accroche.integration_web_front_end {
  background: url(../img/les-formations/web-co/background-integration-web-front-end.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations .accroche.menu_webdesigner {
  background: url(../img/les-formations/web-co/background-menu-webdesigner.jpg) no-repeat center center; 
  background-size: cover;
}

#body_formations_breakfast .accroche.breakfast {
  background: url(../img/les-formations/breakfast/background-breakfast.jpg) no-repeat center center; 
  background-size: cover;
}

*/

/* ================================================================== */
/*          MONDES - Les formations & A propos & Accompagnement       */
/* ================================================================== */

.case_monde {
  position: relative;  
  width:50%;
  min-height:50%;
  overflow: hidden;
  display:flex; 
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
}

.case_monde_inside {
  margin:auto; /* Centrer verticalement et horizontalement grâce à flex */
  text-align: center;
  z-index:1;
  transition: all 200ms ease-out 0s;
}

.case_monde h2 {
  transform: scale(0.9);
  transition: all 200ms ease-out 0s;
  margin:0 auto 15px auto; /*Pour centrer si le bouton est plus large*/
}

/* ------ Bouton Case ------- */
.btn_case_monde {
    border: 2px solid #ffffff;
    color: #fff;
    display: inline-block;
    font-family: "bar-formations";
    font-size: 13px;
    padding: 6px 15px;
    text-transform: uppercase;
    transition: all 200ms ease-out 0s;
}

.btn_case_monde:hover {
    background-color: #fff;
    color: #000;
}

/* ------ Gestion lien des cases ------- */

#body_les_formations #main a, #body_a_propos #main a, #body_contact #main a {
width: 100%;
height: 100%;  
position: absolute;
display: flex;
display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
}


/* ====================================== */
/*          MONDES - Les Formations       */
/* ====================================== */


/* ------ Formation Vidéo  ------- */
.case_monde.formation1 {
  background: url(../img/les-formations/background-vignette-video.jpg) no-repeat center; 
  background-size: cover;
}

.formation1 h2 {
  width: 257px;
  height: 207px;
  background: url(../img/les-formations/logos/logo-video.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}

/* ------ Formation Motion  ------- */
.case_monde.formation2 {
  background: url(../img/les-formations/background-vignette-video-motion-design.jpg) no-repeat center; 
  background-size: cover;
}

.formation2 h2 {
  width: 305px;
  height: 207px;
  background: url(../img/les-formations/logos/logo-motion.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}


/* ------ Formation Accompagnement  ------- */
.case_monde.formation3 {
  background: url(../img/les-formations/background-vignette-accompagnement.jpg) no-repeat center; 
  background-size: cover;
}

.formation3 h2 {
  width: 315px;
  height: 207px;
  background: url(../img/les-formations/logos/logo-accompagnement.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}

/* ------ Formation Comment INSCRIRE CPF ------- */
.case_monde.formation4 {
  background: url(../img/les-formations/background-vignette-comment-inscrire.jpg) no-repeat center; 
  background-size: cover;
}

.formation4 h2 {
  width: 350px; /*Pour calcul, faire style de redimensionner l'image pour le ratio*/
  height: 200px;
  background: url(../img/les-formations/logos/logo-comment-inscrire-cpf.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}



/* ================================= */
/*          MONDES - A propos        */
/* ==================================== */

/* ------ Case 1 - Monde A propos ------ */
.case_monde.apropos1 {
  background: url(../img/a-propos/background-case-orga-certif.jpg) no-repeat center; 
  background-size: cover;
}

.apropos1 h2 {
  width: 400px;
  height: 201px;
  background: url(../img/a-propos/logo-organisme-certifie.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}


/* ------ Case 2 - Monde A propos ------- */
.case_monde.apropos2 {
  background: url(../img/a-propos/background-qui-sommes-nous.jpg) no-repeat center; 
  background-size: cover;
}

.apropos2 h2 {
  width: 380px;
  height: 171px;
  background: url(../img/a-propos/logo-qui-sommes-nous.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}

/* ------ Case 3 - Monde A propos  ------- */
.case_monde.apropos3 {
  background: url(../img/a-propos/background-partenariat-cpf.jpg) no-repeat center; 
  background-size: cover;
}

.apropos3 h2 {
  width: 320px;
  height: 205px;
  background: url(../img/a-propos/logo-partenariat-cpf.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}

/* ------ Case 4 - Monde A propos ------- */
.case_monde.apropos4 {
  background: url(../img/a-propos/background-nos-references.jpg) no-repeat center; 
  background-size: cover;
}

.apropos4 h2 {
  width: 350px; /*Pour calcul, faire style de redimensionner l'image pour le ratio*/
  height: 162px;
  background: url(../img/a-propos/logo-avis.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}

/* ================================= */
/*          MONDES - CONTACT        */
/* ==================================== */

/* ------ Case 1 - Monde A propos ------ */
.case_monde.contact1 {
  background: url(../img/contact/background-mail-baf.jpg) no-repeat center; 
  background-size: cover;
}

.contact1 h2 {
  width: 400px;
  height: 53px;
  background: url(../img/contact/logo-mail-baf.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}


/* ------ Case 2 - Monde Contact ------- */
.case_monde.contact2 {
  background: url(../img/contact/background-adresse-baf.jpg) no-repeat center; 
  background-size: cover;
}

.contact2 h2 {
  width: 380px;
  height: 217px;
  background: url(../img/contact/logo-adresse-baf.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}

/* ------ Case 3 - Monde Contact  ------- */
.case_monde.contact3 {
  background: url(../img/contact/background-suivez-nous.jpg) no-repeat center; 
  background-size: cover;
}

.contact3 h2 {
  width: 300px;
  height: 177px;
  background: url(../img/contact/logo-suivez-nous.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}

/* ------ Case 4 - Monde Contact ------- */
.case_monde.contact4 {
  background: url(../img/contact/background-whatsapp-baf.jpg) no-repeat center; 
  background-size: cover;
}

.contact4 h2 {
  width: 330px; /*Pour calcul, faire style de redimensionner l'image pour le ratio*/
  height: 162px;
  background: url(../img/contact/logo-wapp-tel-baf.png) no-repeat center; 
  background-size: cover;
  text-indent: -6000px;
  z-index: 2;
}


/* ================================= */
/*        Vidéos :  Accueil    */
/* ================================= */


/* 1. Aucun support object-fit (non centré) : */
.casevideo {
    position: absolute; 
    width: auto; 
    height: auto;
    top: 0;
    left: 0;
    z-index: -1;
    object-fit: cover;
    }

/* 2. Si support object-fit, alors écrase (1): */
@supports (object-fit: cover) {
  .casevideo {
    position:absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    object-fit: cover;/*Centrage parfait comme cover*/
    z-index: -1;
  }
}


/* ================================= */
/*        Vidéos : Fiche formation    */
/* ================================= */

.video_fiche_formations {
    position: absolute;
    width: 100%; 
    height: 100%;
    left: 0;
    object-fit: cover;
    top: 0;
    z-index: 0;
}

#btn_lecture {
    font-size: 80px;
    height: 80px;
    margin: auto;
    width: 80px;
    z-index: 3;
    color:#fff;
    text-decoration: none;
}

#logo_fiche_formation, #logo_fiche_formation_menu {
    margin: auto;
    padding-top: 100px;
    z-index: 0;
    transform: scale(0.8);
    transition: all 200ms ease-out 0s;
}

#logo_fiche_formation_menu {
    padding-top: 380px;
}


/* ================================= */
/*        Vidéos : Commun    */
/* ================================= */


.fullvideo {
  position:absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  object-fit: cover;
  z-index: 0;
}


/* Effet Survol des vidéos */
.videorepos {
  opacity: 0;
  transform: scale(1.5);
  transition: all 300ms ease-out 0s;
}

.videohover {
  opacity:1;
  transform: scale(1);
  transition: all 400ms ease-out 0s;
}

/*video_fiche_formations*/

.video_fiche_formations .videohover {
  opacity:0.5;
  transform: scale(1);
  transition: all 400ms ease-out 0s;
}

/* Effet Survol diapo */
.sliderepos {
  opacity: 0;
  transform: scale(1.5);
  transition: all 200ms ease-out 0s;
}

.slidehover {
  opacity:1;
  transform: scale(1.0001); /*Si = 1 bug firefox*/
  transition: all 400ms ease-out 0s;
}


/* Diaporama / slideshow */

#slide {
  position : absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.slideframe {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 1;
}


/*Intro Loader*/
.page-loader {
  background: #000;
  height: 100%;
  width: 100%;
  position: fixed; 
  z-index: 600;
  /*padding-left: 300px;/*Le menu est en fixed, donc faut décaler le main*/
  opacity: 1;
}

.loader-icon {
     position: absolute;
     margin: auto;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     width: 190px;
     height: 104px;
     z-index: 10000;
}


/* ================================= */
/*          MEDIA QUERIES  - BREAKPOINTS    */
/* ================================= */

/* Méthode perso pour transition :

- Commencer par la mise en Place en FULL resolution.
- Faire des Breakpoints de la plus grande RES à la plus petite
- (Ce qu'on met dans une media, on doit le répéter dans les autres pour que l'effet continue)
- Mettre les transitions / transformations dans cet ordre aussi
- C'est bien foutu : en sens inverse ça fonctionne bien 

*/

@media (min-width: 1280px) and (max-width: 1700px) {

	.accueil_case1_inside h2.logo-accueil-a-propos {
	  width: 290px;
	  height: 330px;
	}


  /*Gestion Titre Fiche Formation */
  .picto_badge_titre {
    display: none;
  }

  #body_formations .accroche h2 {
    padding: 75px 40px 0 36px;
  }


  /*Social youtube etc...*/
  aside .pied .social {
    display: none;
  }

}


/* Medium (901px) & HD (not full HD) (1279px) Screen */

@media (min-width: 901px) and (max-width: 1279px) {

    /* Menu */
    /*                */

    #menu {
    width:225px;
    }

    #menu .separation {
    margin: 0px auto 0px auto;
    }

    #hamburger {
    display:block; 
    left:220px;
    opacity:0;
    }

    #main {
      padding-left: 225px;
    }

    #main.contenu {
      padding-left: 250px;  /* 200px (padding menu) + 50px*/
    }

    .separation, nav {
      transform: scale(0.8);
    }

    #menu h1.logo_bar, #menu h1.logo_bar_light {
      width: 179px;
      height: 99px;
    }

    /*Social youtube etc...*/
    aside .pied .social {
      display: none;
    }

    /* Accueil */
    /*                */

    /*Taille des logos*/
    h2.logo_accueil_case3, h2.logo_accueil_case2 {
      transform: scale(0.7);/*Pratique pour allez vite. Mais Lors d'un centrage, garde la taille originale*/
    }

    h2.logo_accueil_case4 {
    	width:203px !important;
    	height:94px !important;
    }

    h2.logo-accueil-a-propos {
    	width:230px !important;
    	height:262px !important;
    }


    /* Les formations */
    /*                */

    /*Taille des logos*/
    .case_monde h2  {
      transform: scale(0.7);/*Pratique pour allez vite. Mais Lors d'un centrage, garde la taille originale*/
    }

    .case_monde_inside {
      transform: scale(0.9);
    }

    /* Pages internes + Fiche Formation */
    /*                */

    /*Changement disposition*/
    .accroche {
      width:45%;
      min-height: 45%;
    }

    .contenu {
    width: 55%;
    }

    .contenu_inside {
    /*position: relative;*/
    }

    .accroche h2 {
      font-size: 35px;
    }

    #logo_fiche_formation, #logo_fiche_formation_menu {
      transform: scale(0.6);
    }

    #logo_fiche_formation_menu {
    padding-top: 680px;
    }

    /* Pages Cartes Formations : */
    /*                */

    .contenu_carte_inside {
      width:100%;
    }

    .contenu_carte h2  {
      font-size: 35px;
    }


    /* Pages qui_sommes_nous : */
    /*                */

    .qui_sommes_nous_inside {
    transform: scale(0.8);
    }


  /*Gestion Titre Fiche Formation */
  /**/
  .picto_badge_titre {
    display: none;
  }

  #body_formations .accroche h2 {
    padding: 75px 40px 0 36px;
  }

  #logo_fiche_formation, #logo_fiche_formation_menu {
    display: none;
  }
}


/* Small (640px) & Medium (900px) Screen */

@media (min-width: 640px) and (max-width: 900px) {

    /* Menu */
    /*                */

    #menu {
    position:absolute; /* Pour sortir du flux pour que le fond soit visible + Centrer le contenu de main correctement*/
    left:0px;
    height:100%;
    width:200px;
    transform: translate(-200px,0);
    }

    #menu .separation {
        margin: 0px auto 0px auto;
    }

    #menu h1.logo_bar, #menu h1.logo_bar_light {
      width: 179px;
      height: 99px;
    }

    #hamburger {
    display:block; 
    left:210px;
    opacity:1;
    }    

    #cross {
    display:block; 
    opacity:1;
    }

    #main {
      padding-left: 0px;
    }

    #main.contenu {
      padding-left: 50px;  /* 0px (padding menu) + 50px*/
    }

    h1.logo_bar, .separation, nav {
      transform: scale(0.7);
    }

	aside .pied {
		transform: scale(0.8);
	}


    /*Gestion Déroulement du Menu et décalage du main*/
    /*                */

    #menu.open {
      position:fixed;
      left:200px;
    }

    #menu.close {
      position:fixed;
      left:0px;
    }

    #main.opened {
        margin-left: 100px;
        opacity: 0.2 !important;
        pointer-events: none;
    }

    #main.closed {
        margin-left: 0px;
        opacity: 1!important;
        pointer-events: auto;
    }

    /* Accueil */
    /*                */

    /*Changement disposition*/
    .accueil_case1 {
      width:50%;
    }

    .accueil_droite {
      width:50%;
    }

    .accueil_droite .accueil_case4, .accueil_droite .accueil_case3 {
    width: 100%;
    min-height: 0%;
    }

    .accueil_droite .accueil_case2 {
    width:100%;
    min-height:0%;
    }

    /*Taille des logos*/

    h2.logo_accueil_case4, h2.logo_accueil_case2 {
      transform: scale(0.7);/*Pratique pour allez vite. Mais Lors d'un centrage, garde la taille originale*/
    }


    h2.logo-accueil-a-propos {
    	width:260px !important;
    	height:296px !important;
    }

    .accueil_case3_inside h2.logo_accueil_case3 {
      width: 150px;
      height: 99px;
      transition: all 0ms ease-out 0s;
    }

    /* Les titres formations */

    .case_monde h2 {
      transform: scale(0.7);/*Pratique pour allez vite. Mais Lors d'un centrage, garde la taille originale*/
    }

    .case_monde_inside {
      transform: scale(0.9);
    }

    /* Pages internes + Fiche Formation */
    /*                */

    /*Changement disposition*/

    #body_formations .accroche_inside .separation, .qui_sommes_nous_inside .separation {
        margin: 0px 0 30px 148px; /*36px avant ajout logo*/
    }

    .accroche {
      width:100%;
      min-height: 69vh; /* 69% = Bug IOS. Donc Utilisation de vh */
      transition: none;
    }

    .contenu {
      width: 100%;
      transition: none;
    }

    .contenu_inside {
    position: relative;
    }

    .accroche h2 {
      font-size: 35px;
    }

    #logo_fiche_formation, #logo_fiche_formation_menu {
       display: none;
    }    

    
    /* Pages Cartes Formations : */
    /*                */

    .contenu_carte_inside {
      width:100%;
    }

    .contenu_carte h2  {
      font-size: 35px;
    }


    /* Pages qui_sommes_nous : */
    /*                */

    .qui_sommes_nous_inside {
    transform: scale(0.8);
    }

}

/* Tiny Screen (0 à 639) */

@media (max-width: 639px) {

    /* Menu */
    /*                */

    #menu {
    position:absolute; /* Pour sortir du flux pour que le fond soit visible + Centrer le contenu de main correctement*/
    left:0px;
    height:100%;
    width:200px;
    transform: translate(-200px,0);
    }

    #menu .separation {
        margin: 0px auto 0px auto;
    }

    #menu h1.logo_bar, #menu h1.logo_bar_light {
      width: 179px;
      height: 99px;
    }

    #hamburger {
    display:block; 
    left:210px;
    opacity:1;
    }    

    #cross {
    display:block; 
    opacity:1;
    }

    #main {
      padding-left: 0px;
    }

    #main.contenu {
      padding-left: 50px;  /* 0px (padding menu) + 50px*/
    }

    h1.logo_bar, .separation, nav {
      transform: scale(0.7);
    }

	 aside .pied {
		transform: scale(0.8);
	 }


    /*Gestion Déroulement du Menu et décalage du main*/
    /*                */

    #menu.open {
      position:fixed;
      left:200px;
    }

    #menu.close {
      position:fixed;
      left:0px;
    }

    #main.opened {
        margin-left: 100px;
        opacity: 0.2 !important;
        pointer-events: none;
    }

    #main.closed {
        margin-left: 0px;
        opacity: 1!important;
        pointer-events: auto;
    }

    /* Accueil */
    /*                */

    /*Changement disposition*/
    .accueil_case1 {
      width:50%;
    }

    .accueil_droite {
      width:50%;
    }

    .accueil_droite .accueil_case4, .accueil_droite .accueil_case3 {
    width: 100%;
    min-height: 0%;
    }

    .accueil_droite .accueil_case2 {
    width:100%;
    min-height:0%;
    }

    /*Taille des logos*/
    h2.logo_accueil_case3 {
    	width:107px !important;
    	height:70px !important;   
    }

	h2.logo_accueil_case4 {
    	width:135px !important;
    	height:63px !important;    	
    }    

    h2.logo_accueil_case2 {
    	width:135px !important;
    	height:96px !important;    	
    }

    h2.logo-accueil-a-propos {
    	width:212px !important;
    	height:241px !important;
    }

    .accueil_case3_inside h2.logo_accueil_case3 {
      width: 150px;
      height: 99px;
    }

    /* Les formations */
    /*                */

    /*Changement disposition*/
    .case_monde {     
    width:100%;
    height:auto;
    }

    .case_monde {
      min-height:250px; /* Equilibre les hauteurs entre Browsers*/
    }

    /*Logo*/
    .case_monde h2 {
      transform: scale(0.8);/*Pratique pour allez vite. Mais Lors d'un centrage, garde la taille originale*/
    }

    .case_monde_inside {
      transform: scale(0.9);
    }

    /* Pages internes + Fiche Formatinons */
    /*                */

    /*Changement disposition*/
    .accroche {
      width:100%;
      min-height: 100vh; /* 45% = Bug IOS. Donc Utilisation de vh */
      transition: none;
    }

    .contenu {
    width: 100%;
    transition: none;
    }

    .contenu_inside {
    position: relative;
    }

    .accroche h2 {
      font-size: 35px;
    }

    #logo_fiche_formation {
        display: none;
    }    

    #logo_fiche_formation_menu {
        padding-top: 650px;
    }

    .contenu .partenaires {
      text-align: center;
      min-width: 100%;
    }

    .picto_badge_titre {
      display: none;
    }

    #body_formations .accroche h2 {
      padding: 75px 40px 0 36px;
    }

    /*Fiche Formation */


    .contenu .prez-formateur .photo-formateur {
      width: 100%;
    }

    .contenu .prez-formateur .txt-formateur {
      width: 100%;
    }

    .contenu .prez-formateur .txt-formateur p, .contenu .prez-formateur .txt-formateur h4 {
      padding-left: 0px;
    }


    /* Pages Cartes Formations : */
    /*                */

    .contenu_carte_inside {
      width:100%;
    }

    .contenu_carte h2  {
      font-size: 35px;
    }

    /* Pages qui_sommes_nous : */
    /*                */

    .qui_sommes_nous_inside {
    transform: scale(0.8);
    }

}


/* Media queries Vertical (pour du détail) */

/* Menu + logo accueil version portrait sur Mobile */
@media screen and (max-height: 435px) {
	 #menu h1.logo_bar, #menu h1.logo_bar_light, #menu .separation, #menu .pied {
	 	display: none;
	 }

	#logo_fiche_formation {
		display: none;
	}

    /*Taille des logos*/
    h2.logo_accueil_case3 {
    	width:80px !important;
    	height:53px !important;  
    }

	h2.logo_accueil_case4 {
    	width:100px !important;
    	height:46px !important;    	
    }    

    h2.logo_accueil_case2 {
    	width:100px !important;
    	height:71px !important;    	
    }

}

/* Pour la hauteur menu */

@media screen and (max-height: 705px) {
    #menu h1.logo_bar, #menu h1.logo_bar_light {
      display: none;
    }

	#logo_fiche_formation {
		display: none;
	}

	#menu .separation {
    margin: 20px auto 20px auto;
	}

    #logo_fiche_formation {
        padding-top: 350px;
    }    

    #logo_fiche_formation_menu {
        padding-top: 550px;
    }

}


@media screen and (max-height: 510px) {
    #menu h1.logo_bar, #menu h1.logo_bar_light {
      width: 179px;
      height: 99px;
      margin-top: 10px;
      margin-bottom: 10px;
    }

	#menu .separation {
		display: none;
	}

}

/* Pour la hauteur du pied de page */

@media screen and (max-height: 770px) {

    #menu h1.logo_bar, #menu h1.logo_bar_light {
      width: 179px;
      height: 99px;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    #logo_fiche_formation {
        display: none;
    }

}

@media (max-height: 680px) and (min-width: 1279px) {

    #menu h1.logo_bar, #menu h1.logo_bar_light {
      width: 179px;
      height: 99px;
      margin-top: 10px;
      margin-bottom: 10px;
    }

}


/*Gestion bandeau Cookie RGPD*/

#eu-cookie-bar {
	padding: 10px 10px 10px 10px !important;
	font-size: 13px !important;
	font-family: 'Arial', sans-serif !important;
	background-color: #0F0F0F !important;
	width:26% !important;
	right:10px !important;
	bottom:15px !important;	
	left:auto !important;
	line-height: 25px !important;
	opacity: 0.9 !important;
}


button#euCookieAcceptWP {
    margin: 5px 5px 0px 10px !important;
}



/********************************* IE10+ specific styles *************/
@supports (-ms-ime-align:auto) {  

  #main{ /*Bug ie 11 pour remplir la hauteur si pas assez de contenu*/
    min-height: 100vh;
    height: 100%;
  }

    /*Centrage barbare des logos formations*/
    .case_monde h2  {
      margin-top: 15%;
    }

    h2.logo_accueil_case4, h2.logo-accueil-a-propos, h2.logo_accueil_case3, h2.logo_accueil_case2 {
      margin-top: 20%;
    }

  .casevideo { 
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);     
    }

    .fullvideo {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    }


    #slide {
    z-index: 0;
    }

}