/* PHONE PORTRAIT*/
/* @media (max-width: 768px) */
@media only screen 
  and (min-device-width: 350px) 
  and (max-device-width: 767px) 
  and (orientation: portrait) 
  { 
    #headerMenu{
      display: none;
    }
    .titreaccueil{
        margin-left: 0%
      }
      #h1-creations{
        width: 100%;
        font-size: 2.5em;
      }
      #h2-creations{
        margin-left: 0%;
        margin-right: 0%;
      }
      #h1-contact{
        margin-right: 0%;
        margin-left: 0%;
        width: 100%;
        font-size: 2em;
      }
      #h1-classes{
        width: 100%;
        font-size: 2em;
      }
      #h1-parametres{
        width: 100%;
        font-size: 2em;
      }
      #jesuis{
        width: 100%;
        font-size: 2em;
      }
      section h2{
        font-size: 5em;
        animation: none;
      }
      .box{
         
      }
      #showreel{
        padding: 0% 3% 0% 3%;
        padding-bottom: 10%;
        /* padding-top: 12vh; */
        display: flex;
        flex-direction: column;
      }
      #showreel iframe{
        height: 203px;  }
      .box > span {
        color: white;
        font-size: 1em;
        display: block;
        text-align: center;
        height: 10vh;
        line-height: 3.5;
    }
    .boxShowreel{
      margin: 6% 0% 3% 0%;
      /* width: 96%;
      margin-left: 2%;
      margin-right: 2%; */
    }
    .boxShowreel h3 {
      font-size: 1.0em;
      line-height: 2.5;
      color: #fff !important;
      /* margin-top: 5%; */
      text-align: center;
  }
    .videoShowreel{
      height: 30.5vh;
    width: 100%;
    }
    .button-portfolio .button{
      font-size: 0.7em;
      /* margin-right: 2px; */
      margin-left: 2px;
      width: 100%;
      
    }
    /* #items-portfolio img {
      margin-top: 30%;
      width: 150px;
      height: 150px;
    } */
    #items-portfolio h4 {
      font-size: 0.7em;
    }
    #items-portfolio h3 {
      font-size: 1.0em;
    }
    #navmenu{
      display: none;
    }
    .button-tel{
      display: block;
      visibility: hidden;
    }
    #image-fixed{
      padding: 5% 12.5% 0 12.5%;
      display: flex;
      max-width: 75%;
      height: fit-content;
      position: relative;
      top: 3%;
      text-align: center;
      flex-direction: row;
      z-index: 0;
    }
    .reseaux{
      width: 100%;
    }
    .soustitre{
      margin: 5%;
      font-size: 1em;
    }
    .button-portfolio{
      /* display: none; */
      margin-bottom: 10%;
      /* justify-content: space-evenly; */
    display: grid;
    grid-template-columns: 40% 40%;
    grid-gap: 10px;
    }
    .contact-logo{
      width: 15%;
    }
    #classes .container{
      display: inline-block;
    }
    #classes .box > img {
      width: 100%;
      height: 50%;
    }
    #classes .box > span {
      font-size: 1.2em;
    }
    /* #portfolio .box{
      margin-left: 5%;
      margin-right: 5%;
      margin-top: 3%;
      width: 90%;
    } */
    
    .overlay{
      position: fixed;
  }
  .popup{
    top: 5vh;
      max-width: 90%;
      height: 90%;
      width: 90%;
      overflow: hidden;
  }
  .popup h2{
    margin: 8%;
    font-size: 3em;
  }
  .flex-popup{
    margin: 0;
      flex-direction: column;
  }
  .imgPopup{
      width: -webkit-fill-available;
      height: 60vw;
  }
  .popup .button {
    padding: 5%;
      margin-bottom: 5%;
      font-size: 2.5em !important;
      margin: 8% 0 !important;
  }
  .popup .content{
      max-height: calc(85vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
  }
  .centerPop {
    padding-bottom: 10% !important;
  }
  .color-img {
    border: solid 2px;
    width: 6.5vh !important;
    height: 6.5vh !important;
    transition: linear 0.3s;
}
.right-popup {
    font-size: 3em;
    width: 94%;
}
.left-popup{
  width: 100%;
}
.popup-flex-color{
  display: block;
}
.ordiColors{
  display: none;
}
.phoneColors{
  display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin: 2%;
}
  .popup video{
    margin: 0;
    width: -webkit-fill-available !important;
  }
  .popup img{
    width: -webkit-fill-available !important;
    height: auto;
  }
  #kcorpPopup{
    height: auto !important;
  }
  #solaryPopup{
    height: auto !important;
  }
  .popup .close{
      top: 8px;
      font-size: 5em;
  }
  
  #divJoucazLogo{
    margin: 3% 0% 3% 0%;
  }
  #JoucazLogo {
    width: 15%;
  }

  .switch{
    width: 60px;
    height: 32px;
    border-radius: 32px;
  }
  .switch input{
    display: none;
  }
  .switch input:checked + div{
    left: calc(100% - 25px);
  }
  .switch div{
    width: 32px;
    height: 32px;
    border-radius: 32px;
    top: 0;
    left: 0;
  }
  .interuptor{
    gap: 15px;
  }
  
  .items-portfolio {
    margin-top: 0;
      gap: 20px;
    }
    
    .portfolio-item {
      width: 100%;
    }
    
    .items-portfolio video,
    .items-portfolio img {
      width: 100%;
      height: auto;
    }
    
    .box {
      width: 100%;
    }
    
    .image-portfolio {
      width: 100%;
    }
    .items-portfolio h3{
      font-size: 3em;
      line-height: 1.5;
      font-weight: 400;
      padding: 3% 5%;
    }
    .filter-system {
      max-width: 100%;
      margin: 0 5%;
      padding: 0;
    }

    .quick-filters-row {
      display: none;
        flex-direction: column;
        align-items: center;
    }

    .quick-label {
        width: 100%;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .controls-row {
      margin: 0 0 5% 0;
        flex-direction: row;
        gap: 10px;
    }

    .more-filters-toggle,
    .reset-filters-btn,
    .results-counter {
        width: 100%;
        justify-content: center;
        font-size: 2.5em;
        text-align: center;
    }

    .advanced-filters {
        margin-top: 5%;
        font-size: 1.5em;
    }

    .filter-row {
        flex-direction: column;
        align-items: center;
        margin-bottom: 4rem;
    }

    .filter-row-title {
        width: 100%;
        text-align: left;
        margin-bottom: 0.5rem;
        font-size: 2em;
    }

    .filter-row-buttons {
        width: 100%;
        justify-content: left;
    }

    .filter-btn {
      padding: 3%;
      margin: 2% 3% 0 0;
        font-size: 1.5em;
        /* padding: 6px 12px; */
    }

    .preset-btn {
        font-size: 0.8em;
        padding: 7px 15px;
    }
    .search-input{
      padding: 2% 2%;
      width: 96%;
      font-size: 2.5em;
      margin: 0 0 5% 0;
    }
    .search-container{
      margin-top: 0;
    }
}