/*!
 * Theme Name: HTML5 Blank
 * Theme URI: http://html5blank.com
 * Description: HTML5 Blank WordPress Theme
 * Version: 1.5.0
 * Author: Todd Motto (@toddmotto)
 * Author URI: http://toddmotto.com
 * Tags: Blank, HTML5, CSS3
 *
 * License: MIT
 * License URI: http://opensource.org/licenses/mit-license.php
 */

::selection
{
color: #999;
}
::-moz-selection
{
color: #999;
}
*,
*:after,
*:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, "Open Sans", sans-serif;
  font-size: 140%;
  line-height: 1.5;
  color: #444444;
  background-color: white;width:100%;margin:0; padding: 0;
}


a{	text-decoration:none;
color:rgba(233,78,27,1);
	-webkit-transition:color 0.2s;
	-moz-transition   :color 0.2s;
	-ms-transition    :color 0.2s;
	-o-transition     :color 0.2s;
	transition        :color 0.2s;
}
a:hover,
a:focus{

}

.logo {width:250px;float:left;padding:0;}
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,600;1,300;1,400;1,600&display=swap');
    @font-face {
    font-family: 'france_po-boldregular';
    src: url('france_po-bold-webfont.eot');
    src: url('france_po-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('france_po-bold-webfont.woff') format('woff'),
         url('france_po-bold-webfont.ttf') format('truetype'),
         url('france_po-bold-webfont.svg#france_po-boldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'web_symbolsregular';
    src: url('websymbols-regular-webfont.woff2') format('woff2'),
         url('websymbols-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

img {
  max-width: 100%;
  vertical-align: middle;
}

a {
color:rgba(233,78,27,1);
  text-decoration: none;	-webkit-transition:color 0.2s;
	-moz-transition   :color 0.2s;
	-ms-transition    :color 0.2s;
	-o-transition     :color 0.2s;
	transition        :color 0.2s;
}
a:focus, a:hover {
  text-decoration: underline;	-webkit-transition:color 0.2s;
	-moz-transition   :color 0.2s;
	-ms-transition    :color 0.2s;
	-o-transition     :color 0.2s;
	transition        :color 0.2s;
}

input[type="text"],
input[type="search"] {
  font-size: inherit;
  line-height: inherit;
}

/* wrapper */
.wrapper {
	width:100%;
	margin:0 auto;background:none;

}
/* header */
.header  {position:fixed; top:0px; left:0px;width:100%;z-index: 10000000000000001;

border-bottom:0 solid black;background:white;}

header{position:fixed; width:100%;top:0; left:0%;}
header img {width:300px;}
 #header {
  color: black;
  font-weight: bold;
  position: fixed; /* Fixed position - sit on top of the page */
  top: 0;
  width: 100%; /* Full width */
  transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
}
#header img {width:30%}
::-moz-selection {

  color: #999;
  text-shadow: none;
}

::selection {

  color: #999;
  text-shadow: none;
}
section {margin-top:60px;width:100%;float:left; height:100vh;}
    .global {width:100%; background:none;margin:0 auto; float:left;padding:0;position:absolute;border:0 solid green;}
    .first, .second, .third {width:30%; background:none;margin:1% ;float:left; height:100%; }
    .second {width:40%;}
    .third {width:17%;margin-left:4%}

footer, footer p {width:100%; height:50vh;background-color:#CDE9F2; text-align:center;margin:0; padding:0;} footer {margin:0;}
footer ul {text-align:center;margin:5% auto; padding :0; font-family: 'france_po-boldregular', sans-serif;text-transform:uppercase;float:left;width:33%;/*display:table*/;font-size:0.8em;letter-spacing:0.55em} 
footer ul li {list-style-type:none; /*display:inline;*/ text-align:center;margin-top:20px;}
section footer {margin:0; }
footer ul li a {text-decoration:none;border:0; padding-bottom:  20px} 
footer ul li a:hover {border-bottom:0 solid black; color:black;} 
section {position:relative}section footer {height:50vh; bottom:0;margin-bottom:0%;position:absolute;}
footer .home, .home footer {height:50vh; margin:0}

/*footer {float:left;margin:0%;position:relative;}	*/

.copyright ul {width:30%; float:left;}

/**
 * partials/wordpress
 * ---
 * Wordpess core classes
 */
/**
 * Alignment
 */
.alignnone {
  margin: 5px 15px 15px 0;
}

.aligncenter {
  display: block;
  margin: 5px auto;
}

.alignright {
  float: right;
  margin: 5px 0 20px 20px;
  margin: 5px 0 15px 15px;
}

.alignleft {
  float: left;
  margin: 5px 15px 15px 0;
}

/**
 * Gallery & images
 */
.wp-caption {
  background: white;
  border: thin solid #F0F0F0;
  max-width: 95%;
  padding: 5px 5px;
  text-align: center;
}
.wp-caption img {
  width: auto;
  max-width: 98.5%;
  height: auto;
  border: 0 none;
  padding: 0;
  margin: 0;
}

.wp-caption .wp-caption-text,
.gallery-caption {
  margin: 0;
  padding: 0 5px 5px;
  font-size: 140%;
  line-height: 1.5;
}

.first img {width:80%;margin:2% ;padding-top:6%;}
/**
 * partials/utils
 * ---
 * Utils classes
 */
.clear:before, .clear:after {
  content: " ";
  display: table;
}
.clear:after {
  clear: both;
}

.reset-box {
  padding: 0;
  margin: 0;
}

/*page rédacteurs*/
  .redaction {width:100%; margin:0%;float:left;}
    .redaction p {width:90%;font-family: 'Karla', sans-serif;font-size:1.2em;line-height:1.5;}
    .gauche, .droite{width:45%; margin:0 0 10% 0 ;float:left;height:30vh;}
    .droite img{float:left;}
    .gauche img {float:right; padding-right:10%;}
    .redaction h3 {margin:2% auto;}

   .redac {width:80%; margin:2% 0 0 10%;padding:0 ;float:left;}
    .redac p { font-family: 'Karla', sans-serif;font-size:1.2em;line-height:1.5;width:80%;}  .gauche .redac p,  .gauche p,  .gauche h4 {margin-left:20%;}
    .gauche, .droite{width:45%; margin:0 0 10% 0 ; float:left;height:30vh;vertical-align:middle;} .droite img{float:left; display: flex;

  align-items: center;vertical-align:top;vertical-align:bottom;width:50%;}.gauche img {float:right;display: flex; align-items: center;vertical-align:top;width:50%;}
.gauche img, .droite img {max-width:400px}
    .redac h2, article H2{ font-size:1.6em;font-family:'france_po-boldregular'; text-align:left;margin-left:10%;color:rgba(233,78,27,1);} article H2 {margin-left:0;}
    .redac h3 {margin:2% auto; font-family: 'france_po-boldregular'; font-weight:normal;text-transform:uppercase; letter-spacing:0.55em;}.gauche h3 {margin-left:20%;}

  html {
	scroll-behavior: smooth; height: 100%;
        margin: 0px;
}  

body {font-family: 'Karla', sans-serif;margin:0;  height: 100%;}
        h1, H2 {text-align:left; } 

.parallax4 H1 {padding-top:20%;}


}

/*HOME*/

.parallax, .parallax3 {
  height: 100vh;
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
    margin:0;
    
}
		
.parallax3{background: white;}
        
        .parallax4 {
  background-image: url("trois.png");
}
        .parallax5 {
  background-image: url("quatre.png");
}
    

h2 {    font-family: 'FranceWorkBold'; text-transform:uppercase;font-size:1em; letter-spacing:0.55em
}
    h1{  font-family: 'france_po-boldregular';text-transform:uppercase; text-align:center; letter-spacing:0.55em; font-size:1.8vw; font-weight: normal;}  


    .right img {float:right;width:50%;margin-top:-25%;}

.parallax2 p {width:40%;margin: 0% 0 0 5%; font-size:1.8em; line-height:1.5em;color:#007A9A;
  font-family: 'Karla', sans-serif;
    text-align:left;padding-top:10%;background:rgba(255,255,255,0)}





.parallax1 img{height:100%; margin: 0 auto;}.parallax4 img {width:100%; margin-top:-20%}

    @font-face {
    font-family: 'france_po-boldregular';
    src: url('france_po-bold-webfont.eot');
    src: url('france_po-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('france_po-bold-webfont.woff') format('woff'),
         url('france_po-bold-webfont.ttf') format('truetype'),
         url('france_po-bold-webfont.svg#france_po-boldregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
.leftinfo h1 {text-align:left;font-size:2.6vw;text-transform:uppercase;color:black; color:black; font-family: 'france_po-boldregular';font-weight:normal;}
.leftinfo h6 a {color:white; font-weight:bold; font-size:20px; background:black; padding:10px;}
.reveal {
  position: relative;
  opacity: 0;
}

.reveal.active {
  opacity: 1;
}
.active.fade-bottom {
  animation: fade-bottom 1s ease-in;
}

.active.fade-right {
  animation: fade-right 1s ease-in;
}
@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
    


@keyframes fade-right {
  0% {
    transform: translateY(300px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
    
 .titre li:first-child {
  animation-duration:5s;
  animation-name: titre;
}
     .titre li:nth-child(2){
  animation-duration:7s;
  animation-name: titre;
}
         .titre li:nth-child(3){
  animation-duration:9s;
  animation-name: titre;
}
             .titre li:nth-child(4){
  animation-duration:11s;
  animation-name: titre;
}
    
    .leftinfo h2, .leftinfo h3 { 
  animation-duration:8s;
  animation-name: leftinfo;
}

@keyframes titre {
  from {
   opacity:0; font-size:3.2vw;
  }

  to {
opacity:1;
  }
}
    
    @keyframes leftinfo {
  from {
   opacity:0; 
      

  }

  to {
opacity:1;
  }
}
  /*  .parallax3 img {height:80vh; margin: 0 0 0 25%;padding-top:5% } */
.leftinfo {margin:5% 0 0 15%; float:left;width:20%;}.right2 {display:none;}
    
.text-container {
  display: flex;
}

.text-container .text-box {
  flex: 1;
  padding: 20px; 
  background: white;

  margin: 5% 5%; /* Add some spacing between the boxes */
}

.text-container .text-box h3 {
  font-size: 1.1em;
  letter-spacing: 0.55em;
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: black;
  font-family: 'france_po-boldregular';
}

.text-box p {
  font-size: 1.2em;
  color: black;
}


    .bot {width:100%; text-align:center; height:10%; margin:40% 0 0 0;}

    .titre  {position:absolute; width:100%; margin:5% auto;padding:0}
    .titre ul {width:60%;margin:0 0 0 15%; padding-top:8%;}
 .titre li {list-style-type: none;font-size:2.6vw;text-transform:uppercase; line-height:2em;letter-spacing:0.55em; font-family: 'france_po-boldregular';color:rgba(233,78,27,0.8);}
    .titre li:first-child {margin-left: 0;} .titre li:nth-child(2) {margin-left:2%;} .titre li:nth-child(3) {text-align:center} .titre li:nth-child(4) {text-align:right;}

    .paragraphe {width:50%; margin:15% 25% 0 25%; position: absolute;} .inside {margin-top:5%;}
  .paragraphe p {width:80%; font-size:1.8em; line-height:1.5em;color:#007A9A;background: rgba(0,104,133,0);margin: 0 auto;
  font-family: 'Karla', sans-serif;text-align:left;padding:2%; }
   
    .leftinfo p { font-family: 'Karla', sans-serif;font-size:1.4em;}

    .leftinfo li, .leftinfo H2, .leftinfo h3 {font-family: 'Karla', sans-serif;} .leftinfo ul {margin-left:-30px} .leftinfo li {padding:0;padding-top:0.5%;padding-bottom:15px; font-size:1.4em;line-height:1.2em;}
    
    .right {width:50%; float:right;} .right img {margin:0;}    .right {width:50%; float:right;} .right img {margin:0;width:50%}


	/*NAV*/
	
	

.ferme2:hover {color:#fff;text-decoration:none;background-color:none;
	-webkit-transition:color 0.2s;
	-moz-transition   :color 0.2s;
	-ms-transition    :color 0.2s;
	-o-transition     :color 0.2s;
	transition        :transform 0.2s;}

.popup2 .close {left:133px;top:80px;z-index:100000002;}
.popup2 .ferme2 {right:30px;top:10px; }
.trait1 a, .trait2 a {border-bottom:1px solid #fff;width:15px;display:block;text-align:center;line-height:0;color:rgba(255,255,255,0);text-align:center;margin:0 auto;line-height:20px;}


.trait1, .trait2 {z-index:6;display:block;height:30px;width:15px;border:0;position:fixed; top:-10px; right:48px;background:none; height:40px; width:40px;} 

.trait1 {background:none;right:24px;top:0px; -moz-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);  
-webkit-transform: rotate(-45deg);  
    -ms-transform: rotate(-45deg);  
        transform: rotate(-45deg);
		transition:all .25s;
-webkit-transition:all .25s;
   -moz-transition:all .25s;
    -ms-transition:all .25s;
     -o-transition:all .25s;
        transition:all .25s;}
	
	.trait2{ right:24px; top:0px;-moz-transform: rotate(45deg); 
     -o-transform: rotate(45deg);  
-webkit-transform: rotate(45deg);  
    -ms-transform: rotate(45deg);  
        transform: rotate(45deg);
		transition:all .25s;
-webkit-transition:all .25s;
   -moz-transition:all .25s;
    -ms-transition:all .25s;
     -o-transition:all .25s;
        transition:all .25s;}
	
	.trait1:hover, .trait2:hover {
		top:0px;
		 -moz-transform: rotate(0deg); 
     -o-transform: rotate(0deg);  
-webkit-transform: rotate(0deg);  
    -ms-transform: rotate(0deg);  
        transform: rotate(0deg);
	/*	z-index:1000002;*/
		transition:all .25s;
-webkit-transition:all .25s;
   -moz-transition:all .25s;
    -ms-transition:all .25s;
     -o-transition:all .25s;
        transition:all .25s;}	.trait1:hover .trait2 {color:#fff;}
		
		
.popup2 h2 {font-weight:100;margin-bottom:10px;}
nav ul {width:100%; margin:15% auto; text-align:center;}
    nav ul li a, nav ul li {list-style-type:none; color: white; font-size:1.4em;line-height:2em; font-family: 'Karla', sans-serif;}    
    
    
    
    .navtop {
    display:block;width:30px; height:20px; position:fixed; background:rgba(255,255,255,0); 
    border-top:1px solid grey;border-bottom:1px solid grey;
right:30px; top:30px;text-align:center;font: 40px 'FrancepoRoman'; 
    text-align:center;	
    text-transform:uppercase;
    color:#302814;line-height:42px;z-index:5;}


.navtop a {display:block;color:#302814; text-decoration:none;width:30px;-webkit-transition:color 0.2s;border-bottom:1px solid grey;line-height:10px;padding-top:0px;color:rgba(255,255,255,0);
	  -webkit-transition:-webkit-transform .2s; 
  -moz-transition:-moz-transform .2s;       
  -o-transition:-o-transform .2s;
  -ms-transition:-ms-transform .2s;
  transition:transform .2s;} 
	
	
	.navtop a:hover {width:15px;margin-left:13px;margin-top:4px;-webkit-transform:rotate(90deg); 
  -moz-transform:rotate(90deg);
  -o-transform:rotate(90deg); 
  -ms-transform:rotate(90deg); 
  transform:rotate(90deg);
  
  -webkit-transition:-webkit-transform .2s; 
  -moz-transition:-moz-transform .2s;       
  -o-transition:-o-transform .2s;
  -ms-transition:-ms-transform .2s;
  transition:transform .2s;}
  
  .trait {position:fixed; width:15px; border-top:1px solid grey;top:41px; right:37px;
      z-index:6;}



.overlay{
	width:100%;
    cursor: default;
    position: fixed;
    visibility: hidden;
    z-index: 100001;

}

.overlay2 {background:none;}
.overlay:target, .overlay2:target {
    visibility: visible;
    opacity: 1;
}
.popup {
 background-color:rgba(255, 255, 255, 0);
 /*   border: 1px solid #467491;*/
  	top:0;
	height:100%;width:100%;
    left: 0%; 
    opacity: 0;
    padding: 0;
    position: fixed;

   
    visibility: hidden;
    z-index: 1000000000000000000000000002;

	transition:all .25s;
-webkit-transition:all .25s;
   -moz-transition:all .25s;
    -ms-transition:all .25s;
     -o-transition:all .25s;
        transition:all .25s;
   



}
.inpop {width:1000px; height:300px; margin : 5% auto; background:#fff;border-bottom:1px solid #000;border-top:1px solid #000; vertical-align:middle;}

.popup2, .popup3/*, .popup3*/{
  background-color:rgba(0, 0, 0, 0.7);
 /*   border: 1px solid #467491;*/
  	top:0;
	height:100%;width:100%;

    opacity: 0;
    padding: 0;
    position: fixed;

   
    visibility: hidden;
    z-index: 100002;

	transition:all .25s;
-webkit-transition:all .25s;
   -moz-transition:all .25s;
    -ms-transition:all .25s;
     -o-transition:all .25s;
        transition:all .25s;
		overflow-y:scroll;
}






.overlay:target+.popup, .overlay:target+.popup2, .overlay:target+.popup3, .overlay2:target+.popup, .overlay2:target+.popup2,.overlay2:target+.popup3  {
    top:0%;
    opacity: 1;
    visibility: visible;

	
		transition:all .25s;
-webkit-transition:all .25s;
   -moz-transition:all .25s;
    -ms-transition:all .25s;
     -o-transition:all .25s;
        transition:all .25s;
		

}



.overlay2:target+.popup, .overlay2:target+.popup2 {top:0;}


/*==================================================================================================== BOUTONS*/






	
	.ferme2 {
  	width:30px; height:20px; position:fixed; border-top:1px solid #fff;
        border-bottom:1px solid #fff; top:0px;text-align:center;font: 16px 'FrancepoRoman'; 
        text-align:center;text-transform:uppercase;color:#302814;
        line-height:30px;display:block;background:none;
	
		z-index:10;
	-webkit-transition:color 0.2s;
	-moz-transition   :color 0.2s;
	-ms-transition    :color 0.2s;
	-o-transition     :color 0.2s;
	transition        :transform 0.2s;}
	
.ferme2 a {text-decoration:none; }
.ferme2:before {

font-size: 14px;text-decoration:none;


}


.ferme2:hover {color:#fff;text-decoration:none;background-color:none;
	-webkit-transition:color 0.2s;
	-moz-transition   :color 0.2s;
	-ms-transition    :color 0.2s;
	-o-transition     :color 0.2s;
	transition        :transform 0.2s;}

.popup2 .close {left:0;top:80px;z-index:100000000002;}
.popup2 .ferme2 {right:30px;top:30px; }.trait1 a, .trait2 a {border-bottom:1px solid #fff;width:15px;display:block;text-align:center;line-height:0;color:rgba(255,255,255,0);text-align:center;margin:0 auto;line-height:20px;}


.trait1, .trait2 {z-index:6;display:block;height:30px;width:15px;border:0;position:fixed; top:-10px; right:48px;background:none; height:40px; width:40px;} 

.trait1 {background:none;right:24px;top:20px; -moz-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);  
-webkit-transform: rotate(-45deg);  
    -ms-transform: rotate(-45deg);  
        transform: rotate(-45deg);
		transition:all .25s;
-webkit-transition:all .25s;
   -moz-transition:all .25s;
    -ms-transition:all .25s;
     -o-transition:all .25s;
        transition:all .25s;}
	
	.trait2{ right:24px; top:20px;-moz-transform: rotate(45deg); 
     -o-transform: rotate(45deg);  
-webkit-transform: rotate(45deg);  
    -ms-transform: rotate(45deg);  
        transform: rotate(45deg);
		transition:all .25s;
-webkit-transition:all .25s;
   -moz-transition:all .25s;
    -ms-transition:all .25s;
     -o-transition:all .25s;
        transition:all .25s;}
	
	.trait1:hover, .trait2:hover {
		top:20px;
		 -moz-transform: rotate(0deg); 
     -o-transform: rotate(0deg);  
-webkit-transform: rotate(0deg);  
    -ms-transform: rotate(0deg);  
        transform: rotate(0deg);
	/*	z-index:1000002;*/
		transition:all .25s;
-webkit-transition:all .25s;
   -moz-transition:all .25s;
    -ms-transition:all .25s;
     -o-transition:all .25s;
        transition:all .25s;}	.trait1:hover .trait2 {color:#fff;}
		
		

.popup2 nav ul li,
{ margin: 0;padding:0 /* Reset any existing margin */}
nav ul {margin:15% auto; width:100%;  text-align:center;padding:0}


/*Titres catégories*/
.cattitle {position:fixed; top:20px; right:80px; font-size:22px;text-align:right;padding:5px 0 0 0; margin:0;z-index:10000000001;}


/*NUMEROS*/

.num {width:100%; float:left; margin-bottom:0; height:auto} article .num, .num article {margin:0 auto} article .num h2 {color:rgba(233,78,27,1);  font-family: 'france_po-boldregular';}
.leftinfo, .right {border:0 solid black;width:30%;float:left;margin:0 0 0 20%;height:100vh;} .right{width:40%;padding:20px; margin:0;} .right img {width:80%;}

article {width:60%; margin:10% auto;margin-bottom:10%;} article p {font-size:1.8em;width:100%;} article H1 {text-align:left; color:lightcoral;} article img {width:100%;}

.parallax H2 {text-align:center;padding-top:5%}
.leftinfo H2 {text-align:left;}

.parallax, .parallax3 {
  height: 100vh;
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
    margin:0;
    
}

/*woo*/
section .product-template-default, .product-template-default section, .single-product section {height:auto; margin-bottom:25%;}
section .post-template-default, .post-template-default section, .page-template-default section {height:auto; margin-bottom:25%} .post-template-default footer {margin-top:5%} .post-template-default article {}
.product-type-simple article, .product-template-default article {width:80%; margin:5% 10% 0 10%}
.woocommerce-result-count{display:none}
  .premiere, .deuxieme, .troisieme, .quatrieme, .cinquieme {
    display: none;
  }
.home header {background:none}
/* For screens with a width of up to 1600px */
@media only screen and (max-width: 1600px)  {
	.paragraphe { width:80%;margin-left:10% }
	.leftinfo, .right {border:0 solid black;width:50%;float:left;margin:0 0 0 5%;height:100vh;} .right{width:40%;padding:20px; margin:0;} .right img {width:80%;}

	.leftinfo li {line-height:1em}
}

/* For screens with a width of up to 900px */
@media only screen and (max-width: 900px)  {
  body {
    font-size: 120%; /* Decrease the font size for smaller screens */
  }

  /* Update the header to make it more responsive */
	.header, .header .home, .home .header {width:100%; background:white;position:fixed;}
 /* Remove the fixed positioning */

  .premiere, .deuxieme, .troisieme, .quatrieme, .cinquieme {
	  display: block;height:auto;width:100%; margin:0 auto}
  

.premiere {margin-top:200px}
	.premiere H1 {font-size:2em;text-transform:uppercase; line-height:2em;letter-spacing:0.55em; font-family: 'france_po-boldregular';color:rgba(233,78,27,1);}
.deuxieme {background:#CDE9F2; background:none}
.deuxieme p {width:80%; font-size:1.8em; line-height:1.5em;color:#007A9A;background: rgba(0,104,133,0);margin: 0 auto;
  font-family: 'Karla', sans-serif;text-align:left;padding:2%; }
	.quatriemme {background:#E7EDEB; background:none;}
  header {
    position: fixed; 
	  width: 100%;background:white;z-index:1
  }

  header img {
    width: 100%;
  }

  /* Make sections responsive */
  section {
    margin:200px 0 20% 0;height:auto;
  }
	footer {margin:15% auto;bottom:0}
	article {width:90%; margin:5% auto} article H1 {font-size:2em;}
	.cattitle {position:fixed; width:100%; text-align:right; top:80px; left:0; color:#007A9A; background:none;z-index:10000000001}
.parallax {display:none}

  /* Make the global and column elements responsive */
  .global, .first, .second, .third {
    width: 100%;
    margin: 2%;
    float: none;
  }

  .second {
    width: 96%;
  }

  .third {
    width: 100%;
    margin-left: 0;
  }

  /* Update footer for responsiveness */
  footer, footer p {
    height: auto;
  }

  footer ul {
    text-align: center;
    margin: 5% auto;
    padding: 0;
    width: 100%;
  }

  /* Make the responsive navigation menu */
  nav ul {
    width: 100%;
    text-align: center;margin-top:40%;
  }

  nav ul li a, nav ul li {
    width: 100%;
  }
	
	.popup2 {z-index:10000000000000002}.popup2 .close {left:0;top:80px;z-index:100000000000000002;}


  /* Hide some elements for smaller screens */


  /* Update the text container to be responsive */
  .text-container {
    flex-direction: column;
  }

/* Global styles that apply to both columns */
	.right {width:100%;margin:0% auto; height:auto;}  .right img {float:left;width:90%;margin:0 auto;}
    .leftinfo {margin:0 auto; float:left;width:100%;height:auto}
.leftinfo p {
  font-family: 'Karla', sans-serif;
  font-size: 1.4em;width:90%; margin:0 auto;
}
.leftinfo h1 {text-align:left; margin-left:5%; font-size:2em;}
	.leftinfo h2,
	.leftinfo h3 {margin-left:5%}
.leftinfo li,
.leftinfo h2,
.leftinfo h3 {
  font-family: 'Karla', sans-serif;
}
	.leftinfo h6 a {margin-left:5%}
.leftinfo ul {
  margin:0 0 0 -5%;width:100%
}

.leftinfo li {
  padding: 0;
  padding-top: 0.5%;
  padding-bottom: 15px;
  font-size: 1.4em;
  line-height: 0.9em;
}
	.num {margin:0}

	.couverture {margin:0 auto; width:90%;}

    .paragraphe {width:100%; margin:15% auto;} 
  .paragraphe p {width:80%; font-size:1.8em; line-height:1.5em;color:#007A9A;background: rgba(0,104,133,0);margin: 0 auto;
  font-family: 'Karla', sans-serif;text-align:left;padding:2%; }

  .text-container {
    flex-direction: column;
  }
	
	 .redaction {width:100%; margin:0%;float:left;}
    .redaction p {width:90%;font-family: 'Karla', sans-serif;font-size:1.2em;line-height:1.5;}
    .gauche, .droite{width:100%; margin:0 0 2% 0 ;float:left;height:auto;}
    .droite img{float:left;}
    .gauche img {float:left; padding-right:10%;}
    .redaction h3 {margin:2% auto;}

   .redac {width:100%; margin:2% 0 0 10%;padding:0 ;float:left;}
    .redac p { font-family: 'Karla', sans-serif;font-size:1.2em;line-height:1.5;width:80%;}  .gauche .redac p,  .gauche p,  .gauche h4 {margin-left:20%;}
    .gauche, .droite{width:100%; margin:0 0 10% 0 ; float:left;height:auto;vertical-align:middle;} .droite img{float:left; display: flex;

  align-items: center;vertical-align:top;vertical-align:bottom;width:50%;}.gauche img {float:left;display: flex; align-items: center;vertical-align:top;width:50%;}
.gauche img, .droite img {max-width:400px}
    .redac h2, article H2{ font-size:1.6em;font-family:'france_po-boldregular'; text-align:left;margin-left:0%;color:rgba(233,78,27,0.8);padding-bottom:5%} article H2 {margin-left:0;}
    .redac h3 {margin:2% auto; font-family: 'france_po-boldregular'; font-weight:normal;text-transform:uppercase; letter-spacing:0.55em;}.gauche h3 {margin-left:20%;}

  .titre  {position:absolute; width:100%; margin:30% auto;padding:0}
    .titre ul {width:100%;margin:0 auto; padding-top:8%;}
 .titre li {list-style-type: none;font-size:3em;text-transform:uppercase; line-height:2em;letter-spacing:0.55em; font-family: 'france_po-boldregular';color:rgba(233,78,27,0.8);}
    .titre li:first-child {text-align:center;} .titre li:nth-child(2) {text-align:center} .titre li:nth-child(3) {text-align:center} .titre li:nth-child(4) {text-align:center;}
	
	@keyframes titre {
  from {
   opacity:1; font-size:3em;
  }

  to {
opacity:1;
  }
}

    
 .titre li:first-child {
  animation-duration:5s;
  animation-name: titre;
}
     .titre li:nth-child(2){
  animation-duration:7s;
  animation-name: titre;
}
         .titre li:nth-child(3){
  animation-duration:9s;
  animation-name: titre;
}
             .titre li:nth-child(4){
  animation-duration:11s;
  animation-name: titre;
}
	
	footer, footer p {width:100%; height:50vh;background-color:#CDE9F2; text-align:center;margin:0; padding:0;} footer {margin:0;background:none;}
section footer {margin:0; }

section footer {height:auto; bottom:0;margin-bottom:0%;position:relative; }
	


}