lecampus.valdedrome.com/user/themes/lecampus/scss/theme/_mobile.scss

@media screen and (max-width: 1450px) {
  header{
    &> nav{
      width: 90%!important;
    }
  }
  .start:not(#form)#archive, .start:not(#form)#articles, .start:not(#form)#calendrier{
    width: 90%!important;
  }
}

@media screen and (max-width: 1150px) {
  header{
    &> nav{
      min-width: auto!important;
      width: 100%!important;
      margin: auto 10px;
    }
  }
}

@media screen and (max-width: 1024px) {
  header nav{
    position: relative;
    width: 100%!important;
    .dropmenu{
      background: white;
      display: none;
      position: absolute;
      left: -10px;
      top: 70px;
      width: auto!important;
      height: auto;
      z-index: 999;
      &>ul{
        -webkit-box-orient: vertical!important;
        -webkit-box-direction: normal!important;
            -ms-flex-direction: column!important;
                flex-direction: column!important;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        &>li{
          text-align: left;
          padding: 0 20px;
          &>ul{
            margin: auto;
            position: relative;
            &>li{
              text-align: left;
              margin-left: 10px;
              a{
                font-family: $Regular;
              }
            }
          }
          &> a{
            border: none;
            line-height: 2rem;
          }
        }
      }
      &.active{
        display: block;

      }
    }
    .logo{
      position: absolute;
      width: 150px;
      margin: auto;
      left: 50%;
      transform: translate(-50%, -50%);
      top: 50%;
    }
    .navTrigger {
      display: block;
      cursor: pointer;
      width: 30px;
      height: 25px;
      margin: auto 0;
      left: 0;
      top: 0;
      bottom: 0;
    }
    .navTrigger i {
      background-color: $light-blue;
      border-radius: 2px;
      content: '';
      display: block;
      width: 100%;
      height: 4px;
    }
    .navTrigger i:nth-child(1) {
      -webkit-animation: outT 0.8s backwards;
      animation: outT 0.8s backwards;
      -webkit-animation-direction: reverse;
      animation-direction: reverse;
    }
    .navTrigger i:nth-child(2) {
      margin: 5px 0;
      -webkit-animation: outM 0.8s backwards;
      animation: outM 0.8s backwards;
      -webkit-animation-direction: reverse;
      animation-direction: reverse;
    }
    .navTrigger i:nth-child(3) {
      -webkit-animation: outBtm 0.8s backwards;
      animation: outBtm 0.8s backwards;
      -webkit-animation-direction: reverse;
      animation-direction: reverse;
    }
    .navTrigger.active i:nth-child(1) {
      -webkit-animation: inT 0.8s forwards;
      animation: inT 0.8s forwards;
    }
    .navTrigger.active i:nth-child(2) {
      -webkit-animation: inM 0.8s forwards;
      animation: inM 0.8s forwards;
    }
    .navTrigger.active i:nth-child(3) {
      -webkit-animation: inBtm 0.8s forwards;
      animation: inBtm 0.8s forwards;
    }
    @-webkit-keyframes inM {
      50% {
        -webkit-transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(45deg);
      }
    }
    @keyframes inM {
      50% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
      }
    }
    @-webkit-keyframes outM {
      50% {
        -webkit-transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(45deg);
      }
    }
    @keyframes outM {
      50% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
      }
    }
    @-webkit-keyframes inT {
      0% {
        -webkit-transform: translateY(0px) rotate(0deg);
      }
      50% {
        -webkit-transform: translateY(9px) rotate(0deg);
      }
      100% {
        -webkit-transform: translateY(9px) rotate(135deg);
      }
    }
    @keyframes inT {
      0% {
        -webkit-transform: translateY(0px) rotate(0deg);
                transform: translateY(0px) rotate(0deg);
      }
      50% {
        -webkit-transform: translateY(9px) rotate(0deg);
                transform: translateY(9px) rotate(0deg);
      }
      100% {
        -webkit-transform: translateY(9px) rotate(135deg);
                transform: translateY(9px) rotate(135deg);
      }
    }
    @-webkit-keyframes outT {
      0% {
        -webkit-transform: translateY(0px) rotate(0deg);
      }
      50% {
        -webkit-transform: translateY(9px) rotate(0deg);
      }
      100% {
        -webkit-transform: translateY(9px) rotate(135deg);
      }
    }
    @keyframes outT {
      0% {
        -webkit-transform: translateY(0px) rotate(0deg);
                transform: translateY(0px) rotate(0deg);
      }
      50% {
        -webkit-transform: translateY(9px) rotate(0deg);
                transform: translateY(9px) rotate(0deg);
      }
      100% {
        -webkit-transform: translateY(9px) rotate(135deg);
                transform: translateY(9px) rotate(135deg);
      }
    }
    @-webkit-keyframes inBtm {
      0% {
        -webkit-transform: translateY(0px) rotate(0deg);
      }
      50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
      }
      100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
      }
    }
    @keyframes inBtm {
      0% {
        -webkit-transform: translateY(0px) rotate(0deg);
                transform: translateY(0px) rotate(0deg);
      }
      50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
                transform: translateY(-9px) rotate(0deg);
      }
      100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
                transform: translateY(-9px) rotate(135deg);
      }
    }
    @-webkit-keyframes outBtm {
      0% {
        -webkit-transform: translateY(0px) rotate(0deg);
      }
      50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
      }
      100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
      }
    }
    @keyframes outBtm {
      0% {
        -webkit-transform: translateY(0px) rotate(0deg);
                transform: translateY(0px) rotate(0deg);
      }
      50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
                transform: translateY(-9px) rotate(0deg);
      }
      100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
                transform: translateY(-9px) rotate(135deg);
      }
    }
  }
  .gal{
    .title_gal{
      // top: 15vw!important;
      max-width: 60%!important;
    }
  }

  #item, #item-article{
    .content{

      .icones{
        -ms-flex-wrap: nowrap!important;
            flex-wrap: nowrap!important;
      }
    }
  }

  #item .demander-votre-devis,
  #item-article .demander-votre-devis,
  #sublog .demander-votre-devis{
    width: 300px!important;
    height: 110px!important;
    a{
      display: -webkit-inline-box!important;
      display: -ms-inline-flexbox!important;
      display: inline-flex!important;
    }
    p:nth-of-type(2){
      display: none!important;
    }
    img{
      margin-left: 20px!important;
      margin-top: 0px!important;
    }
  }
    #devis{
      .txt{
        width: 35%!important;
      }
      .demander-votre-devis{
        -webkit-transform: translate(0%, -125%)!important;
                transform: translate(0%, -125%)!important;
      }
    }
    // #newsletter #mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper.embedForm{
    //   width: 50%!important;
    // }
}

@media screen and (max-width: 960px) {
  .gal{
    .title_gal{
      max-width: 80%!important;
      // top: 15vw!important;
    }
    .content_gal{
      width: 2%!important;
    }
  }
  .bandeau{
    .img{
      width: 100%!important;
    }
    .title_gal{
      // top:25vw!important;
      right: 5%!important;
      max-width: 70%!important;
    }
  }
  .entete .entete_c{
    width: 95%!important;
    margin: 30px auto!important;
  }
  .content{
    width: 80%!important;
  }
  .sidebar{
    position: relative!important;
    width: 350px!important;
    margin: 0 auto!important;
  }
  #devis{
    .title{
      width: 100%!important;
      height: auto!important;
      -webkit-transform: translateX(0px)!important;
              transform: translateX(0px)!important;
      border-radius: 0px!important;
      h4{
        font-size: 1.3rem!important;
        margin: 15px auto 0 auto!important;
        -webkit-transform: translateY(0%)!important;
                transform: translateY(0%)!important;
      }
    }
    .txt{
      width: 100%!important;
      height: auto!important;
      background: $red!important;
      margin: auto!important;
      p{
        color: white!important;
        padding: 15px 55px !important;
        strong{
          font-size: 1rem!important;
        }
      }
    }
    .img{
      width: auto!important;
      height: auto!important;
      min-height: 200px!important;
    }
  }

  #devis.item .title, #devis.sublog .title, #devis.item-article .title{
    border-radius: 30px!important;
  }
  #sublog{
    .txt{
      width:100%!important;
      .content_txt{
        width: 100%!important;
      }
      p{
        padding: 0!important;
      }
    }
    .content_salle{
      width: 70%!important;
      z-index: 2;
      left: 50%!important;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      .header-salles{
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        img{
          display: block!important;
          margin: auto;
          width: 20px;
          height: 20px;
          cursor: pointer;
        }
      }
    }
    .mapsalles{
      width: 100%!important;
    }
  }
  #sublog .demander-votre-devis{
    width: 300px!important;
    height: 110px!important;
    a{
      display: -webkit-inline-box!important;
      display: -ms-inline-flexbox!important;
      display: inline-flex!important;
    }
    p:nth-of-type(2){
      display: none!important;
    }
    img{
      margin-left: 20px!important;
      margin-top: 0px!important;
    }
  }
  #item .demander-votre-devis, #item-article .demander-votre-devis{
    width: 300px!important;
    height: 110px!important;
    a{
      display: -webkit-inline-box!important;
      display: -ms-inline-flexbox!important;
      display: inline-flex!important;
    }
    p:nth-of-type(2){
      display: none!important;
    }
    img{
      margin-left: 20px!important;
      margin-top: 0px!important;
    }
  }
  .start:not(#form)#archive, .start:not(#form)#calendrier, .start:not(#form)#articles{
    width: 90%!important;
  }

  #articles{
    .card{
      width: 100%!important;
      &> a{
        grid-template-columns: minmax(300px,20%) minmax(400px,calc(80% - 40px))!important;
      }
    }
  }
  #item, #item-article{
    .item-wrapper{
      width: 90%!important;
      .title-wrapper{
        flex-direction: column!important;
        .back{
          margin: 20px 0!important;
        }
      }
    }
  }
  .start:not(#form) .body-wrapper .card{
    // width: calc((100% / 2) - 20px)!important;
  }
  .start#form .body-wrapper form{
    width: 90%!important;
  }
  .start#form .body-wrapper form > div.button-wrapper button{
    margin-right: 5%!important;
  }
  .sidebar{
    width: 50%!important;
    padding: 20px 0;
    &::before{
      display: block;
      width: 100vw;
      height: 100%;
      content: '';
      background-image: url(/user/themes/lecampus/images/Trame-bleu2.svg);
      background-repeat: repeat;
      position: absolute;
      top: 0;
      margin-left: -27vw;
      z-index: -1;
    }
  }
  .start:not(#form) .body-wrapper .event{
    width: 90%!important;
  }
  .start:not(#form)#event .title{
    width: 90%!important;
  }
  #mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper.embedForm{
    width: 70%!important;
  }
}

@media screen and (max-width: 768px) {
  #devis{
    .demander-votre-devis{
      -webkit-transform: translate(50%, -125%)!important;
              transform: translate(50%, -125%)!important;
    }
  }
  #newsletter #mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper.embedForm{
    width: 80%!important;
  }

}

@media screen and (max-width: 750px) {
  header{
    & > nav{
      .logo{
        position: relative;
        width: auto!important;
        margin: auto!important;
        left: 0!important;
        transform: none!important;
        top: 0!important;
      }
    }
  }

  .start{
    .demander-votre-devis{
      display: none;
    }
  }
  #item ,#item-article{
    .title-wrapper{
      flex-direction: column;
      .back{
          margin: 0 0 20px 0!important;
      }
    }
    width: 100%!important;
    // padding: 0 40px!important;
  }
  #articles{
    .articles-listing{
      .card{
        & > a{
          grid-template-columns: 100%!important;
          grid-column-gap: 0!important;
          grid-template-rows: 100%!important;
          .card-image{
            img{
              width: 100%!important;
              height: auto!important;
            }
          }
          .wrapper-content{
            grid-column-start:1!important;
            grid-row-start: 2!important;
            .readmore{
              float: right;
            }
          }
        }
      }
    }
  }
  #item, #item-article{
    .bandeau{
      .img{
        width: 100%;
        height: auto;
      }
    }
    .body-wrapper{
      .images_s{
        display: none;
      }
      .content_s{
        width: 90%!important;
        p{
          padding: 0!important;
        }
      }
      .icones{
        margin: 20px 0 0 0!important;
        .icon{
          height: auto!important;
          max-width: 100%!important;
          p{
            padding: 0!important;
          }
        }
      }
    }
  }
  .content{
    margin: 2rem auto!important;
    width: 100%!important;
    p{
      padding: 40px 20px!important;
    }
  }
  .gal .title_gal{
    display: none!important;
  }
  .entete{
    padding: 0!important;
     p{
      font-size: 1.1rem;
      line-height: 1.5rem;
    }
  }
  #home .content > p{
    width: 100%!important;
    &:not(:last-child){
      strong{
        font-size: 1.1rem;
      }
    }
  }
  #reco{
    .item{
      border: none!important;
      margin: 10px 0!important;
      padding-left: 0!important;
    }
  }
  .sidebar{
    width: 90%!important;;
    text-align: center;
    &:before{
      margin-left: -8vw;
    }
    h2{
      margin: auto;
    }
    h3{
      font-size: 1.1rem;
    }
    .side-all-agenda{
      margin: auto;
      float: none!important;
    }
  }
  #devis{
    .title, .txt{
      padding: 0 5%;
      p{
        padding: 15px 0!important;
      }
    }
    .demander-votre-devis{
      -webkit-transform: translate(0%,-120%)!important;
              transform: translate(0%,-120%)!important;
    }
  }
  #newsletter{
     #mc_embed_signup{
       border: none!important;
      width: 280px!important;
      padding: 0!important;
      #mc_embed_signup_scroll{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        input{
          width: 280px!important;
        }
      }
      #form{
        width: auto;
      }
      label{
        width: 280px!important;
        border: 2px solid white;
        border-radius: 20px;
        margin-bottom: 10px;
      }
      & > input{
        margin-top: 10px;
      }
      .clear{
        input{
          margin: 10px 0 0 0!important;
        }
      }
    }
  }
  #footer .block{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    p{
      margin-bottom: 10px;
      text-align: center;
      border: none!important;
      &:nth-of-type(1){
        img{
          float: none;
        }
      }
    }
  }
  #sublog {
    .bandeau{
      height: auto;
      .img{
        width: 100%;
        height: auto;
      }
    }
    .title_gal{
      display: none;
    }
    .content_salle{
      width: 90%!important;
      top: 200px!important;
      p{
        padding: 0px 10px!important;
      }
    }
    .mapsalles{
      width: 100%!important;
    }

  }  .start:not(#form)#archive, .start:not(#form)#calendrier, .start:not(#form)#articles{
    width: 90%!important;
    .cat {
      height: auto!important;
      .btn-group{
        &:nth-child(1){
          width: 100%;
        }
        &:nth-child(2){
          float: left;
        }
        label{
          margin-bottom: 10px;
        }
      }
    }
  }
  .start:not(#form) .body-wrapper .card{
    width: 100%!important;
  }
  .start:not(#form) .body-wrapper .event .card-content{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    .reso{
      width: 100%!important;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: distribute;
          justify-content: space-around;
    }
    .txt{
      width: 100%!important;
    }
  }
  #default{
    .header-wrapper{
      width: 100%!important;
      text-align: center;
      .title{
        width: 90%!important;
      }
    }
  }

  #mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper.embedForm{
    width: 90%!important;
  }
  #mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody.ml-form-embedBodyHorizontal{
    display: block!important;
    margin-bottom: 1rem;
  }
   #mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent label{
    white-space: normal!important;
  }
  #mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent{
    border: 1px solid white!important;
    border-radius: 30px;
    margin-bottom: 20px;
  }
  #mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody.ml-form-embedBodyHorizontal  {
    border:none!important;
    border-radius: 0px!important;
  }
  #mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input{
    text-align: center;
  }

  #tarteaucitronRoot #tarteaucitronAlertBig{
    padding: 10px 0!important;
  }

  #le_campus{
    #module{
      width: 90% !important;
      padding-right: 0 !important;
      .valeurs{
          flex-direction: column !important;
          width: 90%;
          align-self: center;
          .valeur{
            width: 100% !important;
            text-align: center;
          }
      }
      .equipe{
          flex-direction: column !important;
          width: 90%;
          align-self: center;
          .personne{
            width: 100% !important;
            text-align: center;

          }
      }
    }
  }
}