/* MOBILE */
#m_navTop{
  position:absolute;
  top:0px;
  height: 52px;
  width:100%;
  background-color: white;
  border-bottom:1px solid #b8b8b8;
  font-weight: 400;
  font-size: 16px;
  padding-top: 5px;
  overflow:hidden;
  display:none;
}

#m_navTopContainer{
  
}

.m_topSep{
  width:70px;
  height:1px;
  background-color: #6f6f6f;
  margin:auto;
}
#m_topSep1{
  margin-top:50px; 
}
#m_navRow1, #m_navRow2{
  width:100%;
  text-align: center;
  padding: 22px 0;
  font-size:18px;
}

#m_navRow1{
  margin-top:45px; 
}

#m_navRow1 a{
  margin:0 25px;
}

#m_navRow2 a{
  margin:0 20px;
}

#m_burger, #m_close{
  position:absolute;
  top: 17px;
  left: 15px;
  width: 24px;
  cursor:pointer;
}

#m_close{
  visibility: hidden;
}

#m_logoTop{
  position:absolute;
  top: 13px;
  left: 48px;
  width: 57px;
}

#m_btContact{
  position:absolute;
  top:14px;
  right:50px;
}

#m_pictoInsta{
  position:absolute;
  top: 17px;
  right: 15px;
  width: 20px;
}



/* NAV BOTTOM */
#m_navBottom{
  bottom: -434px;
  height: 486px;
  width:100%;
  background-color: white;
  border-top:1px solid #b8b8b8;
  font-size:16px;
  font-weight: 300;
  text-align: center;
  display:none;
}

#m_navBottom img{
  width:10px;
}

#m_bottomTitle{
  width:100%;
  height: 45px;
  padding-top: 12px;
  cursor: pointer;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}


.m_bottomSep{
  width:70px;
  height:1px;
  background-color: #B8B8B8;
  margin:22px auto;
}

#m_navPopup{
  margin-top:10px;
}

.m_navPopupBottomItem{
  
}

.m_navPopupBottomTitle{
  font-weight:400;
  font-size:18px;
  cursor:pointer;
  text-transform: uppercase;
}

.m_navPopupBottomText{
  font-weight:400;
  font-size:16px;
  display:none;
  margin: 10px 25px 0 25px;
}



@media only screen and (max-width: 1320px) {
  #navBottom {     
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media only screen and (max-width: 1200px) {
  
  /** NAV */
  #navTop{
    font-size:15px;
  }
  
  #navBottom{
    font-size:15px;
  }
  
  .atelierTexte{
    font-size:18px;
  }
  
  .galerieTexte, .galerieTexteFull{
    font-size:18px;
    line-height: 26px;
  }
  .actuTitre{
    font-size:17px;
  }
  .actuDetails{
    font-size:18px;
  }
  .navPopupBottomItem {
    font-size:18px;
  }
  
  /* GALERIE */
  #videoContainer{
    padding:0 20px;
  }
  #galerieContainer{
    padding:0 20px;
    padding-top:30px;
    padding-bottom:100px;
  }
  .title{
    font-size:17px !important;
  }
  
  .topLeft{
    margin-left:12px;
    margin-right:12px;
  }
  
  .galerieImages{
    
    margin-bottom:20px;
  }
  
  .galerieImgPortrait{
    width:23%;
    height:auto;
  }
  .galerieImgPaysage{
    width: 48.7%;
    height:auto;
  }
  .galerieVideo{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .galerieTitre{
    width:50%;    
    padding-bottom:10px;
  }
  
  /** ATELIERS */
  #ateliersContainer{
    padding:0 20px;
    padding-top:100px;
  }
}



/** IPAD */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  
  /** CONTACT */
  #contactContainer{
    width:60%;
  }

  #ateliersEntete{
    margin-bottom:40px;
  }
  .atelierDesc{
    padding-bottom:20px;
  }
  .galerieSep{
    margin-top:20px;
    margin-bottom:40px;
  }
}


/** TELEPHONE */

/* @media screen and (max-width: 800px) or ((orientation: landscape) and (max-width: 950px)) { */
@media screen and (max-width: 950px) {
  
  
  
  #accueil_logo img{
    width:80%;
  }
  
  /**NAV*/
  #m_navTop, #m_navBottom{
    display:block;
    position:fixed;
  }
  #navTop, #navBottom{
    display:none;
  }
  
  
  /**GALERIE */
  #homeVideo{
    margin-top:48px;
  }
  
  #videoContainer{
    padding:0;
  }
  
  #btAudio, #btAudio2{
    top:60px;
    right:5px;
    width:25px;
  }
  
  #galerieContainer{
    width:100%;
    max-width:none;
    padding:0 20px;
    margin-top:20px;
    padding-bottom: 100px;
  }
  
  .galerieSep{
    width:120px;
    margin-top:15px;
    margin-bottom:30px;
  }
  
  .galerieImages, .atelierImages{
    gap: 1.73%;
    padding:15px 0;
  }
  
  .galerieImgContainer{
    margin-bottom: 2.13%;
  }
  
  .galerieDesc{
    display:block;
    padding-bottom:15px;
  }
  .galerieTexte{
    width:100%;
  }

  .atelierDesc{
    display:block;
    padding-bottom:15px;
  }
  .atelierTitre{
    width:100%;
    padding-top:10px;
  }
  .atelierTexte{
    width:100%;
  }
  
  .galerieTitre div, .atelierTitre div{   
    padding-top:0;
}
  
  /** ATELIERS */
  #ateliersEntete{
    display:block;
    padding-top: 48px;
    margin-bottom:30px;
  }
  #ateliersContainer{
    width:100%;
    max-width: none;
    padding:0 20px;
    margin-top: 0px;
    padding-bottom: 100px;
  }
  .atelierImage{
    width:100%;
  }
  .atelierTexte{
    width:100%;
    margin-top:10px;
  }
  
  /**ACTU */
  #actuContainer{
    width: 260px;
  }
  
  /** CONTACT */
  #contactContainer{
    width:90%;
  }
  
  .page{
    width: 80%;
  }
}