grav-lecampus/user/themes/lecampus/scss/theme/_mobile.scss

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

      }
    }
    .logo{
      margin: auto;
    }
    .navTrigger {
      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{
      max-width: 80%!important;
      top: 15vw!important;
    }
    .content_gal{
      width: 2%!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!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;
    }
    .demander-votre-devis{
      -webkit-transform: translate(0px, 40%)!important;
              transform: translate(0px, 40%)!important;
      right: 30px!important;
    }
  }

  #devis.item .title, #devis.sublog .title{
    border-radius: 30px!important;
  }
  #sublog{
    .txt{
      width:100%!important;
      p{
        padding: 0!important;
      }
    }
    .content_salle{
      z-index: 2;
      left: 60%!important;
    }
    .mapsalles{
      width: 60%!important;
    }
  }
  #item .demander-votre-devis, #sublog .demander-votre-devis{
    width: 300px!important;
    height: 110px!important;
    margin-top: -55px!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{
    width: 80%!important;
  }

  .start:not(#form) .body-wrapper .card{
    width: calc((100% / 3) - 7.5px)!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-bleu.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      position: absolute;
      top: 0;
      margin-left: -10vw;
      z-index: -1;
    }
  }
  .start:not(#form) .body-wrapper .event{
    width: 90%!important;
  }
  .start:not(#form)#event .title{
    width: 90%!important;
  }
}

@media screen and (max-width: 750px) {
  .start{
    .demander-votre-devis{
      display: none;
    }
  }
  #item{
    .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: 90%!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;
    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;
      }
    }

  }
  #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 {
    .content_salle{
      width: 90%!important;
      left: 5%!important;
      top: 250px!important;
      p{
        padding: 0px 10px!important;
      }
    }
    .mapsalles{
      width: 100%!important;
    }

  }  .start:not(#form)#archive, .start:not(#form)#calendrier{
    width: 90%!important;
    .cat {
      height: auto!important;
      .btn-group{
        &:nth-child(1){
          width: 75%;
        }
        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;
      }
    }
  }
}