anissah/user/themes/anissabensalah/scss/theme/mediaqueries.scss

@media screen and (max-width: 700px) {
  :root {
   --app-height: 100%;
}
  #header{
    width: 100%;
    .navbar{
      & > .language-selector{
        display: none;
      }
      .navigation{
        display: none;
      }
      .nav_media_q{
        display: block;
        &>li{
          &:nth-of-type(1){
              display: none;
          }
        }
        .hamburger--squeeze{
          position: absolute;
          top: 8px;
          left: 8px;
          z-index: 1;
          padding: 0;
        }
        .catbox{
          position: absolute;
          top: 0;
          left: 0;
          display: none;
          &.active{
            display: block;
            width: 100vw;
            height: 100vh;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#98272D), to(#4f100B));
            background-image: linear-gradient(#98272D, #4f100B);
          }
          .catlist{
            margin-top: 50%;
            & > li:nth-of-type(1){
                display: none;
            }
            .language-selector{
              position: absolute;
              top: 0px;
              margin-top: 0px;
              li{
                &::after{
                  color: white!important;
                }
              }
            }
          }
          li{
            text-align: center;
            a{
              top: 0;
              font-size: 5vw;
              line-height: 7vh;
              color: white;
              &::before{
                background-color: white;
              }
            }
          }
        }
      }
    }
  }


#start{
  &>div{

  &:nth-child(n+3){
     .content{
       p{
         margin-bottom:0;
       }
     }
  }
  &:nth-child(n+4){
    .content{
      padding: 0 5px!important;
    }
  }
}
  #home{
    margin-bottom: 0px;
    h1{
      font-size: 30vw!important;
    }
    p{
      width: 100%;
    }
  }
  & > div{
    padding:0px;
    &:nth-child(n+3){
      padding: 0px;
      &:nth-child(2n+1){
        &>div{
          float: none;
        }
        .red{
          width: 100%;
          .chap{
            position: absolute;
            width: 100%;
            height: 100%;
            h2{
              position: absolute;
              width: 100%;
              top: 7px;
              font-size: 0.882rem;
              font-family: "Montserrat-Regular";
            }
            & > a{
              position: absolute;
              bottom: 5px;
              left: 50%;
              transform: translateX(-50%);
            }
            .reso{
              display: none;
              width: 100%;
              height: 100%;
              a{
                position: absolute;
                top: 50%;
                &:nth-of-type(1){
                  left: 5px;
                }
                &:nth-of-type(2){
                  right: 5px;
                }
              }
            }
          }
        }
        .content{
          position: absolute;
          background-color: white;
          width: auto;
          height: auto;
          top: 30px;
          left: 0px;
          right: 0px;
          bottom: 30px;
          padding: 0;
          .other{
            text-align:center;

          }
        }
      }
    }
    &:nth-child(n+3){
      &:nth-child(2n){
        & > div{
          float: none;
        }
        .red{
          width: 100%;
          position: absolute;
          .chap{
            position: absolute;
            width: 100%;
            height: 100%;
            h2{
              position: absolute;
              width: 100%;
              top: 7px;
              font-size: 0.882rem;
              font-family: "Montserrat-Regular";
            }
            & > a{
              position: absolute;
              bottom: 5px;
              left: 50%;
              transform: translateX(-50%);
            }
            .reso{
              display: none;
              width: 100%;
              height: 100%;
              a{
                position: absolute;
                top: 50%;
                &:nth-of-type(1){
                  left: 5px;
                }
                &:nth-of-type(2){
                  right: 5px;
                }
              }
            }
          }
        }
        .content{
          position: absolute;
          background-color: white;
          width: auto;
          height: auto;
          top: 30px;
          left: 0px;
          right: 0px;
          bottom: 30px;
          padding: 0;
          .other{
            text-align:center;
          }
        }
      }
      &:nth-child(7){
        #mCSB_5_container{
          #sovaj{
            .other{
              p{
                &:nth-child(1){
                  font-size: 2rem!important;
                  line-height: 3rem!important;
                }
              }
            }
          }
        }
      }
    }
  }
}
  //
  // html{
  //   overflow-x: hidden;
  // }
  // #header{
  //   button{
  //     display: block!important;
  //     z-index: 999;
  //     position: fixed;
  //     top: 0;
  //     left: 0;
  //   }
  //   .language-selector{
  //     margin-top: 10px;
  //   }
  //   .navigation{
  //     display: none!important;
  //   }
  //   .mediaqnav{
  //     z-index: 998;
  //     width: 100%;
  //     position: fixed;
  //     top: -100%;
  //     -webkit-transition: top 1s;
  //     transition: top 1s;
  //     text-align: center;
  //     height: 100%;
  //     background-image: -webkit-gradient(linear, left top, left bottom, from(#98272D), to(#4f100B));
  //     background-image: linear-gradient(#98272D, #4f100B);
  //     display: -webkit-box!important;
  //     display: -ms-flexbox!important;
  //     display: flex!important;
  //     -ms-flex-wrap: wrap;
  //         flex-wrap: wrap;
  //     -webkit-box-orient: vertical;
  //     -webkit-box-direction: normal;
  //         -ms-flex-flow: column;
  //             flex-flow: column;
  //     -webkit-box-pack: center;
  //         -ms-flex-pack: center;
  //             justify-content: center;
  //     li{
  //       margin: 10px auto;
  //       &:nth-child(1){
  //         display: none;
  //       }
  //       a{
  //         color: white;
  //         position: relative;
  //         margin: auto;
  //         &:hover:before{
  //           visibility: visible;
  //           transform: scaleX(1);
  //           -webkit-transform: scaleX(1);
  //         }
  //         &:before{
  //           content: "";
  //           position: absolute;
  //           width: 100%;
  //           height: 2px;
  //           bottom: 0;
  //           left: 0;
  //           background-color: white;
  //           visibility: hidden;
  //           -webkit-transform: scaleX(0);
  //           transform: scaleX(0);
  //           -webkit-transition: all 0.3s ease-in-out 0s;
  //           transition: all 0.3s ease-in-out 0s;
  //         }
  //       }
  //       .active{
  //         a:before{
  //         visibility: visible;
  //         -webkit-transform: scaleX(1);
  //         transform: scaleX(1);
  //         }
  //       }
  //     }
  //     &.open{
  //       top: 0%!important;
  //       -webkit-transition: top 1s;
  //       transition: top 1s;
  //     }
  //
  //     }
  //   }
  //   #start{
  //     #home{
  //       .title{
  //         p{
  //           a:last-child{
  //             img{
  //               width: 23px;
  //             }
  //           }
  //           img:nth-of-type(1){
  //             width: 16px;
  //           }
  //           }
  //         }
  //       }
  //
  //     & > div{
  //       display: block!important;
  //       overflow: auto!important;
  //       .red{
  //         .chap{
  //           padding: 10px 0 15px 0;
  //           .reso{
  //             a:nth-child(1){
  //               width: 16px;
  //             }
  //             a:nth-child(2){
  //               width: 23px;
  //             }
  //           }
  //         }
  //       }
  //       .content{
  //         p:last-child{
  //         }
  //       }
  //       & > div{
  //         width: 100%!important;
  //         &.content{
  //           height: 100vh!important;
  //         }
  //       }
  //       &:nth-child(n+3){
  //         height: auto!important;
  //
  //         & > div:nth-child(1){
  //           & a{
  //             font-size: 0.8rem!important;
  //           }
  //         }
  //         & > div:nth-child(2){
  //         }
  //       }
  //       &:nth-child(n+5){
  //         .content{
  //           padding: 20px!important;
  //           #sovaj{
  //             margin-bottom: 0px!important;
  //           }
  //           p:last-child{
  //             margin-bottom: 10px!important;
  //           }
  //         }
  //       }
  //     }
  //     #home{
  //       .title{
  //         height: 100%;
  //         .visu-album{
  //           height: 100%;
  //         }
  //       }
  //     }
  //     #press, #presse, #imprensa{
  //       .citation{
  //         display: none;
  //       }
  //     #sovaj{
  //       display: block;
  //       p:nth-child(1){
  //         padding: 0!important;
  //         margin-top: 0!important;
  //       img{
  //         width: 100%;
  //       }
  //     }
  //       p:not(:nth-child(1)){
  //         width: 100%;
  //       }
  //     }
  //   }
  //   #biografía,#biographie{
  //     .content{
  //       p:nth-of-type(1){
  //         margin-top: 20px;
  //       }
  //     }
  //   }
  //   #contact, #contato{
  //     #Contact, #CONTATO{
  //       height: 100vh!important;
  //     }
  //   }
  // }
  //
  // body{
  //   #header{
  //     a{
  //       font-size: $font22!important;
  //     }
  //     .language-selector{
  //       li{
  //         &:nth-child(-n+2){
  //           &::after{
  //             font-size: $font22!important;
  //           }
  //         }
  //       }
  //     }
  //   }
  //   #start{
  //     .content{
  //       p{
  //         font-size: $font14!important;
  //         line-height: 2rem;
  //       }
  //     }
  //     .citation{
  //       p{
  //         font-size: $font14!important;
  //         line-height: 2rem;
  //     }
  //   }
  //     #home, #contact, #contato{
  //       p, a {
  //         font-size: $font14!important;
  //       }
  //     }
  //
  //     .chap{
  //       h2{
  //         font-size: $font22!important;
  //       }
  //       a{
  //         font-size: $font14!important;
  //         &.focus{
  //           font-size: $font16!important;
  //         }
  //       }
  //     }
  //   }
  // }
  //
  //
}