@import url(reset.css);
@font-face {
    font-family: 'Walking-in-the-Street';
    src:url('Walking-in-the-Street.ttf.woff') format('woff'),
        url('Walking-in-the-Street.ttf.svg#Walking-in-the-Street') format('svg'),
        url('Walking-in-the-Street.ttf.eot'),
        url('Walking-in-the-Street.ttf.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal}
*{font-family:'Montserrat', sans-serif; font-weight: normal; font-size: 16px}
strong{font-weight: 500;}
ul, a{text-decoration: none;}
header{height: 70px;margin: 20px 0 0 20px}
header nav {text-align: right;
position: absolute;
top: 20px;
right: 10px;}
#menu{background-color: rgba(27, 31, 42, 1);padding-top: 160px;
height: 90vh;width: 100vw; position: relative;z-index: 2; top:-50px; left: 10px;text-align: center;}
header nav ul li a, footer nav ul li a{font-family:'Montserrat'; text-transform: capitalize;
display: inline-block;
  color: #fff;font-size: 20px;
  line-height: 50px;
  right: -10px; top: 10px}
#menu a::after, #menu-footer a::after{content: '';
display: block;width: 0; height: 2px;background: #fff;
transition: width .3s}
/*css pour la trad*/
#sans a::after{content: '';
  display: none;width: 0; height: 0;background:none;
  transition: none}
#sans a{line-height: 0;right: 0; top: 0;font-size: 12px;display:none;} 
#sans div{font-size: 0;position: relative;top:10px;}
#sans select{background-color: #1B1F2A;color:#fff;}

#menu a:hover::after,#menu-footer a:hover::after,
#menu a.active::after,#menu-footer a.active::after{width: 100%; transition: width .3s }
#menu a:active::after{width: 100%}
#menu{display: none;}
#menu.show {display: block;}
#menu-footer{display: flex;justify-content: center;}
#menu-footer a{padding: 0 20px;font-size: 18px;}

.burger-close{margin: 20px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;}
#burger{}
#close{}
#secondary-nav{margin: 80px 20px 40px}
#secondary-nav ul{display: flex}
#secondary-nav li{padding: 0 20px}
#secondary-nav ul li a{color: black;line-height: 40px;}
 ul a::after{content: '';
display: block;width: 0; height: 1.5px;background: black;transition: width .3s}
 ul a:hover::after,
 ul a.active::after{width: 100%; transition: width .3s }
 ul a:active::after{width: 100%}
h2{font-size: 24px;font-family: "Walking-in-the-Street"}
h3{font-size: 18px;font-weight: bold;}
footer{background:#1B1F2A; color: #fff;text-align: center;padding: 20px 0; display: flex; flex-direction: column;}
footer div{display: flex; justify-content: center;align-items: center; align-content: space-between;padding: 20px 0;}
footer div a{padding: 0 20px 0 5px;color: #fbfcff}
footer div a svg:hover{color:#9C0E45}
.hide{display:none}
.flex{display: flex}
.flex-direction{flex-direction: column;}
.justify-between{justify-content: space-between}
.align-items-center{align-items: center;}
.align{align-content: center;}
.bold{font-weight: bolder;}
.green{color: #4B6446}
.video_frame_container {
    position: relative;width: 100%;height: 100%;
    padding-bottom: 20%;margin: 80px 0 80px}
.video_frame {position: absolute;
    top: 0;left: 0;width: 100%;height: 100%;padding: 40px}
.paragraphe{display: flex; flex-direction: column;}
.paragraphe article{display: flex;flex-direction: column;justify-content: center;margin: 0 20px}
.paragraphe div{padding: 0 20px}
#next{position: relative;}
#next a{margin: 0 40px 80px;position: absolute;bottom: 20px;right: 0}
#next a, #previous a{color: black}
#next a:hover, #previous a:hover{color: #9C0E45}
#next p{display: none}
#previous{position: relative;}
#previous a{margin: 0 40px 80px;position: absolute;bottom: 20px;left: 0}
#previous p{display: none}
#fond{background-image: url(img/frida/Ellipse.svg); background-repeat: no-repeat;background-size: contain;}

/*  MOBILE > 320px */
  @media screen and (min-width:320px){
}

/*  TABLETTE > 720px */
@media screen and (min-width:720px){
  header{margin: 20px 0 0 40px}
  header nav {text-align: right;
  position: absolute;
  top: 20px;
  right: 60px;}
  #burger, #close {display:none;}
  #menu{display: flex; background-color:transparent; padding-top: 40px;
    justify-content: flex-end;height: 0;width:0;}
  #menu.show {display: flex;}
  header nav ul li a{ font-family:'Montserrat';color: black;
  font-size: 20px;padding-right:30px}
  #menu a::after{content: '';
  display: block;width: 0; height: 2px;background: black;
  transition: width .3s}
  /*css pour la trad*/
  #sans a::after{content: '';
    display:none;width: 0; height: 0;background:none;
    transition: none}
    #sans div{font-size: 0;left: 0; top:4px}
    
  #secondary-nav{margin: 80px 60px 40px}
  .paragraphe{display: flex;flex-direction: row}
  #previous p{display: flex}
  #next p{display: flex}
  footer{display: flex;flex-direction: row;align-items: center;justify-content: space-between;background:#1B1F2A; color: #fff;padding: 0 60px}
}

/*  DESKTOP > 960px */
@media screen and (min-width:960px) {

}
/*  DESKTOP FULL  > 1140px */
@media screen and (min-width:1140px) {
  .video_frame_container {
      position: relative;width: 100%;height: 100%;
      padding-bottom: 20%;margin: 80px 0 80px}
}