@import "vars";

@media only screen and (max-device-height : 768px) and (min-width: 1024px) {
  .index-section {
    img {
      &.img-logo {
        width: 325px;
      }
    }
  }
  #content .right-section .gallery-block{
    max-height: 115px;
    height: 100%;
  }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 667px) {
  .mobile{
    display:block;
  }
  .js-mobile-menu{
    background-color: #13abd1;
    color:white;
    position: fixed;
    z-index:100;
    padding: 20px 30px;
    width:100%;
    svg{
      margin-bottom: -4px;
      margin-right: 5px;
    }
    &:active{
      color:white;
    }
    &:visited{
      color:white;
    }
  }
  .top-right-logo{
    display:none;
  }
  #menu{
    display:none;
    width: 100%;
    background: #13abd1;
    left: 0;
    top: 30px;
    padding: 30px 0 0 30px;
    z-index: 10;

    .menu-list{
      flex-direction: column;
      li{
        margin-bottom:15px;
      }
    }
  }
  #content{
    overflow: hidden;
    .index-section {
      background: #13abd1;
      img {
        position: static;
        &.img-logo {
          position: static;
          width: 50%;
        }
      }
      .img2, .img7, .img8, .img9, .img10, .img11{
        display:none;
      }
      img.img5{
        top: 23%;
        right: 5%;
      }
      img.img4{
        bottom: -16%;
      }
      .left-section{
        //padding-top:0;
      }
      .right-section{
        padding-top:0;
      }
      .right-section h1.title{
        line-height: normal;
        span{
          font-size:80px;
          line-height: normal;
        }
      }
    }
    .left-section {
      position: static;
      width:100%;
      background: #13abd1;
      text-align: center;
      padding-top:50px;
    }
    .right-section {
      position: static;
      width:100%;
      padding:30px 30px 70px;
      h1.title{
        font-size:30px;
      }
      .right-section_content{
        position:static !important;
      }
      .gallery-block{
        position:static;
        margin: 20px auto 0;
      }
    }
    .section{
      height: auto !important;
      .left-section{
        position: relative;
      }

      .img2, .img3, .img4, .img5{
        position: absolute;
        margin-left: -12%;
        margin-right: 6%;
      }
      .img1{
        position: static;
        height:auto;
        max-width:100%;
      }
      &.y2005{
        font-size: 0;
      }
    }
  }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  #menu{
    width: 68%;
  }
  #content {
    .left-section{
      width:100%;
      margin-left: -55px;
    }
    .right-section{
      h1.title span{
        font-size:50px;
      }
    }
    .right-section.white-section {
      left: 100%;
      pointer-events: none;
      z-index: 100;
      width:50%;
      overflow: visible;

      &:before{
        content:'Показать историю';
        position: absolute;
        z-index: 10;
        top: 40%;
        right: 76%;
        background: white;
        padding: 10px;
        color: #343434;
        transform: rotate(90deg);
        font-size: 20px;
        width: 200px;
        text-align: center;
        pointer-events: all;
      }
    }
  }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  #menu{
    width: 68%;
  }
  #content {
    .right-section {
      h1.title span {
        font-size: 50px;
      }
    }
  }
}