// reset css
@import '~reset-css/reset.css';

// milligram css
@import '~milligram/src/Color.sass';
@import '~milligram/src/Base.sass';
@import '~milligram/src/Grid.sass';
// @import '~milligram/src/Form.sass';

@font-face {
    font-family: 'Exo 2';
    src: local('Exo 2'), 
    local('Exo 2'), 
    url('../fonts/exo2.woff2') format('woff2'), 
    url('../fonts/exo2.woff') format('woff'), 
    url('../fonts/exo2.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Exo 2 Bold';
    src: local('Exo 2 Bold'), 
    local('Exo 2 Bold'), 
    url('../fonts/exo2bold.woff2') format('woff2'), 
    url('../fonts/exo2bold.woff') format('woff'), 
    url('../fonts/exo2bold.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Exo 2 Thin';
    src: local('Exo 2 Thin'), 
    local('Exo 2 Thin'), 
    url('../fonts/exo2thin.woff2') format('woff2'), 
    url('../fonts/exo2thin.woff') format('woff'), 
    url('../fonts/exo2thin.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
  font-family: 'Roboto Slab';
  src: local('Roboto Slab'), 
  local('Robotoslabregular'), 
  url('../fonts/Robotoslablight.woff2') 
  format('woff2'), 
  url('../fonts/Robotoslablight.woff') 
  format('woff'), 
  url('../fonts/Robotoslablight.ttf') 
  format('truetype');
  font-weight: 500;
  font-style: normal;
}

  a,input,button{
  outline: 0;
}

// General scss
 .flex{
  display: flex;
}
  .text-center{
  text-align: center;
}
  .text-decoration-none{
  text-decoration: none;
}
  .text-white{
  color: #fff;
}
  .border-bottom{
  border:0; 
  border-bottom: 1px solid black;
}
  .flex-column{
  flex-direction: column;
}
  .pull-left{
  float: left;
}
  .pull-right{
  float: right;
}
  .flex-row{
  flex-direction: row;
} 
  .space-between{
  justify-content: space-between;
}
  .space-around{
  justify-content: space-around;
}
  .bg-white{
  background-color: #fff;
}
  .white-line{
  border: 1px solid #FFFFFF;
}
  .text-uppercase{
  text-transform: uppercase;
} 
  .text-underline{
  text-decoration: underline;
}
  .flex-end{
  justify-content: flex-end;
}
  .flex-center{
  justify-content: center;
}
  .justify-right{
  justify-content: right;
} 
  .justify-left{
  justify-content: left;
} 
  .site-blue-bg{
  background: #3BB2FB;
}
  .responsive-img{
  max-width: 100%;
  width:auto;
}
  .border{
  border: 0.1rem solid #aaa;
}
  .border-left-0{
  border-left:0;
}
  .border-bottom-0{
  border-bottom: 0;
}
  .border-top-0{
  border-top: 0;
}
  .flex-wrap{
  flex-wrap: wrap;
}
  .display-hidden{
  display: none;
}   
  .align-center{
  align-items:center;  
}
  .container{
  max-width: 1755px;
}
  .col-6{
  width: 50%;
}
  .col-3{
  width: 25%;
} 
  .col-4{
  width: 33.3333%;
} 
  .col-9{
  width: 75%;
} 

  $siteSilver:#F5F5F5;
  $siteSilver2:#E7E7E7; 
  $sitePink:#D41F7C;
  $sitePinkDark:#582D7F;
  $siteBlue:#2E3F8D;
  $siteFontSilver:rgba(0, 0, 0, 0.6);

  .bg-silver{
  background-color: $siteSilver2;
}

.dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
  .dropdown-content {
    display: none;
    padding: 0.5rem 0;
    position: absolute;
    background-color: $siteSilver;
    min-width: 14rem;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 3;
  }
  &:hover .dropdown-content {
    display: block;
    li{
      width: 100%;
      a{
        display: inline-block;
        width: 100%;
        padding: 0.5rem 0;
        &:hover {
          background-color:$siteBlue;
          color: #fff;
        }
      }
    }
  } 
}
  .menu-button{
  cursor: pointer;
}
  .bar1, .bar2, .bar3 {
  width: 35px;
  height: 2px;
  background-color: #fff;
  margin: 9px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}



.page-title{
  font-family: 'Roboto Slab';
  font-size: 48px;
  line-height: 120%;
  color: rgba(0, 0, 0, 0.9);
  padding-bottom: 3.5rem;
}

.mobile.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-width: 1800px) {
  .container{
    max-width: 1200px;
  }
} 


@media screen and (max-width: 768px) {
  .xs-hidden{
    display: none;
  }
  .col-6{
    width: 100%;
  }
} 


@media screen and (max-width: 450px) {
  .site-btn{
    padding: 1rem 2rem;
  }
  .mobile.overlay a {
    font-size: 20px
  }
  .mobile.overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}



body{
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: normal;
  font-weight: 300;
  background-color: $siteSilver;
  color: $siteFontSilver;
  a{
    color: $siteFontSilver
  }
  #overlay{
    z-index: 4;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: none;
    opacity: 0.5;
    background-color: black;
  }
  .owl-carousel{
    button{
      outline:0;
    }
  }
}

  .site-btn{
  background-color: $siteBlue;
  border:1px solid $siteBlue;
  color:#fff;
  cursor: pointer;
  padding: 1.5rem 3rem;
  border-radius: 1rem;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.9);
  display: inline-block;
  svg{
    padding-top: 3px;
  }
  &:hover{
    background-color: #fff;
    color:$siteBlue;
    border:1px solid $siteBlue;
  }
}


.mobile.overlay {
  height: 100%;
  width: 60%;
  min-width: 28rem;
  position: fixed;
  z-index: 100000;
  display: none;
  top: 0;
  left: 0;
  background-color:#21387D;
  overflow-x: hidden;
  box-shadow: 0 3px 15px 0 rgba(33,47,61,.5);
  font: 1.6rem/1.6rem 'Exo 2',sans-serif;
  .overlay-content {
    text-decoration: none;
    font-size: 36px;
    color: #fff;
    display: block;
    padding: 1rem 2rem;
  }
  &.openMenu{
    display: block;
  }
  a {
    font-size: 16px;
    line-height: 18px;
    font-weight: 500;
    display: block;
    padding: 10px;
    color: #fff;
    text-decoration: none;
    &:hover, &:focus{
      transition: color .25s ease 0s;
      background-color: $siteBlue;
      color: #fff;
    }
  }
  .personal{
    padding: 1rem 0;
    border-bottom: 1px solid #fff;
    margin-bottom: 2rem;
    .dropdown{
      font-size: 13px;
      ul{
        width: auto;
        min-width: unset;
        li{
          a{
            font-size: 13px;
            padding: 0.5rem 2rem;
            color: #21387D;
            &:hover{
              color: #fff;
            }
          }
        }
      }
      &.lang{
        .dropdown-content{
          right: 0;
        }
      }
    }
  }
}


h2.inner-title{
  font-size: 64px;
  line-height: 120%;
  color: rgba(0, 0, 0, 0.6);
}


//  Site css
.top-header{
  font-size: 12px;
  line-height: 140%;
  letter-spacing: 0.02em;
  ul.page-links{
    li {
      a {
        display: inline-block;
        padding: 1.5rem ;
        &:hover{
          background-color:#fff; 
        }
      }
    }
  }
  .dropdown{
    align-items: center;
    display: flex;
    .dropdown-content {
      min-width: 50px;
      right: 0;
      top: 3rem;
    }
  }
  .searchBox {
    position: absolute;
    top: 0;
    right: 0;
    background: #fff;
    padding-top: 0.5rem;
  }

  .searchBox:hover > .searchInput, .searchInput:active, .searchInput:focus {
    width: 240px;
    padding: 0 6px;
  }

  .searchBox:hover > .searchButton {
    background: white;
    color : #2f3640;
  }

  .searchButton {
    cursor: pointer;
    color: white;
    float: right;
    width: 40px;
    height: 36px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.8s;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .searchInput {
    border:none;
    background: none;
    outline:none;
    float:left;
    padding: 0;
    color:  $siteFontSilver;
    font-size: 14px;
    transition: 0.4s;
    line-height: 35px;
    width: 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  }
}

.bottom-header{
  ul.page-links{
    li{
      font-size: 14px;
      a:hover{
        background-color:$siteBlue;
        color: #fff;
      }
    }
  }
}
.middle-header{
  background-image: url('images/header.png');
  background-size: cover;
  .row {
    a.logo{
      svg{
        height: 100%;
      }
    }
    min-height: 10rem;
    ul.phone {
      margin-left: 2rem;
      font-weight: 300;
      line-height: 100%;
      color: rgba(255, 255, 255, 0.9);
      li{
        a{
          font-size: 24px;
        }
      }
      span{
        font-size: 14px;  
        margin: 0 1rem;
      }
    }
    ul.social-links{
      margin: 0 5rem; 
      li{
        margin: 1rem;
      }
    }
    .dropdown{
      font-size: 12px;
      letter-spacing: 0.02em;
      line-height: 120%;
      padding: 0.5rem 1rem;
      p{
        color: rgba(255, 255, 255, 0.65);
        span{
          display: inline-block;
          flex-wrap: wrap;
          margin-left: 1rem;
          max-width: 10rem;
        }
      }
      .dropdown-content{
        a{
          border-bottom: 1px solid #fff;
          padding: 1rem 0;
          background-color:$siteSilver;
          color: $siteFontSilver;
          &:hover {
            background-color:$siteBlue;
            color: #fff;
          }
        } 
      }
    } 
  }
}

#myslider.owl-carousel{
    background: linear-gradient(90deg, rgba(33, 29, 77, 0.5) 28.65%, rgba(55, 48, 128, 0) 100%);
    .slide{
      position: relative;
      z-index: 1;
      .slide-overlay{
        position:absolute;
        width:100%;
        z-index:2;
        background: linear-gradient(90deg, #150B1D 0%, rgba(21, 11, 29, 0) 100%);
        height: 100%;
      }
      .container{
        z-index: 2;
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        align-content: center;
        align-items: center;
        display: flex;
        height: 100%;
        .text{
          color: #fff;
          max-width: 50rem;
          color: rgba(255, 255, 255, 0.9);
          font-style: normal;
          h3{
            margin-bottom: 2.5rem;
            font-family: 'Exo 2 Bold';
            font-weight: bold;
            font-size: 40px;
            line-height: 48px;
          }
          p{
            margin-bottom: 4rem;
            font-weight: 300;
            font-size: 18px;
            line-height: 140%;
          }
          a{
            svg{
              padding-top: 3px;
            }
            &:hover{
              svg{
                path{
                  fill:$siteBlue;
                }
              }
            }
          }
        }
      }  
    }
   .owl-nav {
      bottom: 2.5rem;
      position: absolute;
      right: 4rem;
      font-size: 3.5rem;
      color: #fff;
      .owl-prev{
        margin: 0 3rem 0 0;
      }
   }
}

.home-plans{
  padding-top: 7rem;
  padding-bottom: 7rem;
  a{
    margin-top: 3rem;
    background: $sitePink;
    border-radius: 12px; 
    border:1px solid $sitePink;   
  }
  p{
    font-size: 16px;
    line-height: 140%;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 2rem;
  }
  .plan{
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    padding: 1rem 2rem;
    border: 0;
    margin: 1rem;
    min-width: 20rem;
    min-height: 20rem;
    p{
      font-family: 'Exo 2 Bold';
      font-size: 14px;
      line-height: 140%;
      color: rgba(255, 255, 255, 0.9);
      margin: 0;
    }
    svg{
      margin-bottom: 2rem;
    }
  }
  .plan.one{
    background: linear-gradient(153.43deg, #3F5CBF 0%, #302B82 83.33%);
  }
  .plan.two{
    background: linear-gradient(153.43deg, #E64599 0%, #B30962 83.33%);
  }
  .plan.three{ 
    background: linear-gradient(153.43deg, #8A43CC 0%, #4F2775 83.33%);
  }
  .plan.four{ 
    background: linear-gradient(153.43deg, #BF41BE 0%, #7E2B7D 83.33%);
  }
  .plan.five{ 
    background: linear-gradient(153.43deg, #3F5CBF 0%, #302B82 83.33%);
  }
}

.equips{
  padding-top:3rem;
  padding-bottom: 5rem; 
  .col-6{
    .news{
      padding-right: 25rem;
      p{
        margin-bottom: 3rem;
      }
    }
  }
  .owl-carousel{
      padding: 0 8.5rem;
      max-width: 51rem;
      background-color: transparent;
      .owl-nav {
        bottom: 9rem;
        position: unset;
        font-size: 8rem;
        color: #000;
        .owl-prev{
          position: absolute;
          left: 0;
          top: 15%;
        }
        .owl-next{
          position: absolute;
          right: 0;
          top: 15%;
        }
      }
      .owl-item{
        max-width: 34rem;
        p{
          font-family: 'Exo 2 Bold';
          font-size: 19.2px;
          line-height: 130%;
          color: rgba(0, 0, 0, 0.6);
          margin-top: 2rem;
        }
      }
  }
}

.zones{
  background: no-repeat right -15rem top -15rem url('/images/g164.png'), linear-gradient(128.81deg, #FAFAFA 0%, #E6E6E6 62.22%);
  padding: 5rem 0;
  .map{
    min-width: 73rem;
    svg{
      max-width: 75rem;
      &.uzbekistan{
        path:hover{
          // fill: #2E3F8D;
          // cursor: pointer;
        }
      }
    }
    .text{
      p{
        align-items: center;
        display: flex;
        margin: 1rem 0;
      }
    }
    p{
      span{
        font-size: 16px;
        line-height: 140%;
        color: rgba(0, 0, 0, 0.9);
        margin-left: 1rem;
      }
    } 
  }
  .text{
    margin-top: -5rem;
  }
  table{
    width: 100%;
    background-color: #EEEEEE;
    font-size: 15px;
    font-family: 'Exo 2 Bold';
    color: rgba(0, 0, 0, 0.45);
    .first-th{
      background-color: $sitePinkDark;
    }
    .first-column{
      background-color: #E7E7E7;
      font-size: 16px;
      line-height: 130%;
      color: rgba(0, 0, 0, 0.6);
    }
    .second-th{
      background-color: $sitePink;
    }
    td,th{
      border:1px solid #fff;
      padding: 1rem 3rem;
    }
  }
}

.tvshows{
  padding: 10rem 2rem 5rem 2rem;
  .column.column-40{
    display: flex;
    .text{
      max-width: 60rem;
      p{
        margin-bottom: 2rem;
      }
    }
  }
  .column.column-60{
    padding-left: 5rem;
  }
}

#shows.owl-carousel, .tvshows .owl-carousel{
  padding-right: 2rem;
  background-color: transparent;
  .show{
    img{
      max-width: 40px;
    }
  }
  .owl-nav{
    position: absolute;
    color: #000;
    left: 0;
    top: -7rem;
    bottom: unset;
    right: unset;
    font-size: 4rem;
    color: rgba(0, 0, 0, 0.45);
    span{
      margin: 0 1rem;
    }
  }
}


.myshow, .show{
  background: #fff;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
  margin: 2rem;
  h4,p, .hour{
    padding: 2rem 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: #000;
    align-items: center;
    span{
      color: #aaa;
      margin-right: 3rem;
    }
  }
  h4{
    font-family: "Exo 2 Bold";
    font-size: 16px;
    color: rgba(0, 0, 0, 0.6);
    padding-top: 1rem;
    padding: 1.5rem 1.5rem;
    display: flex;
    align-items: center;
  }
}
.shows{
  .show{
    width: 100%;
    max-width: 375px;
    .hour{
      padding:0;
      .showinfo{
        padding: 2rem 1.5rem;
        cursor: pointer;
      }
      &.active{
        position: relative;
        z-index: 1; 
        .display-hidden{
          display: block;
          position: absolute;
          z-index: 1000;
          right: -100px;
          top: -190px;
          width: 28rem;
          height: 42rem;
          background: #fff;
          box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
          border-radius: 2px;
          .close-x{
            cursor: pointer;
            position: absolute;
            top: 0.5rem;
            right: 1rem;
            z-index: 3;
            padding: 0 5px;
          }
          svg.corner{
            position: absolute;
            left: -15px;
            top: 50%;
          }
          img{
            filter: brightness(90%);
          }
          .text{
            padding: 0 2rem;
            padding-top: 0;
            .title{
              font-family: 'Exo 2 Bold';
              font-size: 16px;
              line-height: 130%;
              color: rgba(0, 0, 0, 0.9);
            }
            .desc{
              font-size: 14px;
              line-height: 140%;
              color: rgba(0, 0, 0, 0.6);
            }
            a{
              font-family: 'Exo 2';
              font-style: normal;
              font-weight: 600;
              font-size: 14.4px;
              line-height: 130%;
              color: $sitePink;
              display: inline-block;
              margin-top: 1rem;
            }
          }
        }
      }
    }
  }
}

.payments{
  padding: 5rem 0;
  .text{
    p{
      margin-bottom: 2rem;
    }
  }
  .flex.column.column-50.flex-wrap.text-center{
    display: flex;
    .payment{
      font-size: 1rem;
      color: #aaa;
      width: 15rem;
      height: 15rem;
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
    }
  }
}

.instructions {
  &.programme.connection h2.page-title{
    margin-top: 5rem;
    margin-bottom: 3rem;
    padding-bottom: 0;
  }
  .column.column-60{
    padding-top: 3rem;
  }
  .instruction{
    padding: 3rem 2rem;
    margin: 2rem;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    img {
      width: 15rem!important;
      margin: 1rem;
    }
    span{
      padding-top: 2rem;
      font-family: 'Exo 2 Bold';
      font-size: 16px;
      line-height: 130%;
      color: rgba(0, 0, 0, 0.6);
    }
    a.site-btn{
      text-align: center;
      padding: 1.5rem 3rem;
      margin-top: 2rem;
    }
    .image{
      min-width: 170px;
      text-align: center;
    }
  }
}

.blue-content{
  color: #fff;
  padding: 0rem 0rem;
  .column.column-50{
    width: 50%;
    padding-top: 5rem;
    padding-bottom: 5rem;
    .text{
      max-width: 85rem;
      h2{
        font-family: 'Exo 2 Thin';
        max-width: 50rem;
        font-size: 32px;
        font-weight: 600;
        line-height: 120%;
        color: rgba(255, 255, 255, 0.9);
      }
      h3{
        margin-top: 4rem;
        margin-bottom: 1rem;
        font-family: 'Exo 2 Bold';
        font-size: 19.2px;
        line-height: 130%;
        color: rgba(255, 255, 255, 0.9);
      }
      p{
        margin-bottom: 2rem;
        color: rgba(255, 255, 255, 0.65);
        font-size: 16px;
        line-height: 140%;
      }
      a{
        color: rgba(255, 255, 255, 0.9);
        &.site-btn{
          margin-top: 2rem;
          background-color: #54629F;
          &:hover{
            background-color: #fff;
            color: $siteBlue;
          }
        }
      }
    }
  }
  .column.column-50.left{
    background-color: #21387D;
    .text{
      padding-right:4rem; 
    }
  }
  .column.column-50.right{
    background-color: #314D97;
    .text{
      padding-left:4rem; 
    }
  }
}


#accountSlider{
  .container{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    .text{
      padding: 5rem 0;
      h3{
        margin-bottom: 3rem;
        font-size: 32px;
        line-height: 120%;
        color: rgba(0, 0, 0, 0.9);
      }
      p{
        max-width: 70rem;
        font-size: 16px;
        line-height: 140%;
        color: rgba(0, 0, 0, 0.6);
      }
    }
  }
  .owl-dots{
    position: absolute;
    left: 50%;
    bottom: 2rem;
    .owl-dot{
      background: silver;
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 1rem;
      margin-right: 0.8rem;
      &.active{
        background-color: $sitePink;
      }
    }
  }
}


.silver-content{
  color: rgba(0, 0, 0, 0.45);
  .owl-nav{
    position: absolute;
    top: -7rem;
    right: 0;
    font-size: 4rem;
    padding: 0;
    span{
      color:rgba(0, 0, 0, 0.45);
    }
    .owl-prev{
      margin-right: 2rem;
    }
  }
  h3{
    padding: 2rem 0 0 0;
    font-size: 32px;
    line-height: 120%;
    color: rgba(0, 0, 0, 0.9);
  }
  
  .news{
    padding-right: 4rem;
    max-width: 56.5rem;
  }
  .nots{
    padding-left: 4rem;
    max-width: 56.5rem;
  }
  .col-6.right{
    background-color: white;
  }
}
// News
.nots, .news{
  padding: 5rem 0 6rem 0;
  h4{
    font-family: 'Exo 2 Bold';
    font-size: 16px;
    line-height: 130%;
    color: rgba(0, 0, 0, 0.9);
    margin: 1rem 0 1.5rem 0;
  }
  p{
    color: rgba(0, 0, 0, 0.6);
    span{
      font-size: 12px;
      line-height: 120%;
      letter-spacing: 0.01em;
    }
  }
  a{
    font-size: 14px;
    line-height: 140%;
    margin-top: 1.5rem;
    margin-bottom: 0;
    display: inline-block;
    &.site-btn{
      font-family: 'Exo 2 Bold';
      margin: 0;
    }
  }
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
  transition: 0.4s;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 5rem;
}

.evaluate{
  box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.15);
  margin-top: 8rem;
  margin-bottom: 8rem;
  padding: 3rem;
  form{
    p{
      font-style: normal;
      font-weight: 300;
      font-size: 18px;
      line-height: 140%;
      margin-bottom: 2rem;
      color: rgba(0, 0, 0, 0.9);
    }
  }
  p{
    font-weight: 600;
    font-size: 24px;
    line-height: 130%;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 3rem;
  }
}
.green-btn{
  background: #8DB323;
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Exo 2 Bold';
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  outline: 0;
  border: 1px solid #8DB323;
  &:hover{
    background: #fff;
    color: #8DB323; 
  }
}

footer{
  .row{
    .column{
      display: flex;
      line-height: 130%;
      a{
        font-size: 14px;
        color: rgba(255, 255, 255, 0.5);
        line-height: 140%;
        text-decoration: none;
      }
      ul {
        li{
          margin-bottom: 2rem;
        }
      }
      p{
        padding-top: 2rem;
        padding-bottom: 2rem;
        a{
          font-size: 16px;
          line-height: 140%;
        }
      }
      .menu{
        max-width: 13rem;
        h3{
          font-family: 'Exo 2 Bold';
          font-size: 16px;
          color: rgba(255, 255, 255, 0.65);
          margin-bottom: 2.5rem;
        }
      }
      .large-menu{
        color: rgba(255, 255, 255, 0.9);
        width: 50%;
        ul.social{
          li{
            float: left;
            margin-right: 2rem;
          }
        }
        h3{
          font-family: 'Exo 2 Bold';
          max-width: 15rem;
          line-height: 100%;
          font-size: 24px;
          margin-bottom: 2.5rem;
        }
        span{
          margin-right: 1rem;
        }
      }
    }
  }
  .prefooter{
    background: #29335E;
    padding: 5rem 0;
  }
  .afterfooter{
    background: #272F52;
    padding: 2rem 0;
    .gerb{
      width: 8rem;
      height: 8rem;
      background: url('images/gerb.png');
      margin-right: 5rem;
    }
    .text{
      width: 13rem;
      height: 3rem;
      background: url('images/muic.png');
      margin-right: 5rem;
    }
    .copyright, .site-map{
      font-size: 14px;
      line-height: 140%;
      color: rgba(255, 255, 255, 0.5);
      margin-right: 5rem;
    }
  }
}

#evaluate-form{
  // padding-top: 5rem;
  // padding-bottom: 5rem; 
}
.inner-header{
  padding-top: 2rem;
  padding-bottom: 2rem;
  a{
    margin: 0 1rem;
  }
  .breadcrumbs {
    a{
      margin: 0 1rem 0 0;
    }
    a + a:before {
      content: " / ";
      margin: 1rem;
    }
  }
  .social{
    a.text-decoration-none{
      svg{
        margin-right: 1rem;
      }
    }
  }
}  
.inner-page {
  padding: 3rem 0 3rem 0;
  .news{
    padding-top: 0;
    .new{
      margin-top: 4rem;
      max-width: 49rem;
      box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.15);
      .text{
        padding: 3rem;
        padding-top: 0;
      }
    }
  }
}


.inner-pagination{
  display: flex;
  justify-content: flex-end;
  nav{
    ul {
      display: flex;
      flex-direction: row;
      li.page-item{
        font-family: 'Exo 2 Bold';
        font-size: 16px;
        line-height: 140%;
        .page-link{
          color: rgba(255, 255, 255, 0.65);
          background-color: #3E4E93;
          width: 48px;
          height: 48px;
          justify-content: center;
          text-align: center;
          display: flex;
          align-items: center;
          margin-right: 5px;
          box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
          border-radius: 4px;
          text-decoration: none;
          &:hover{
            background-color: #7380B8;
          }
        }
        &.disabled{
          .page-link{
            pointer-events: none;
            cursor: auto;
          }
        }
        &.active{
          .page-link{
            background-color: #7380B8;
          }
        }
      }
    }
  }
}
.channel-types{
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.05);
}
.channel-calendar, .channel-types{
  span{
    padding: 3rem 1.5rem;
    font-family: 'Exo 2';
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0.01em;
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    a{
      text-decoration: none;
    }
    &:hover{
      color: $sitePink;
    }
  }
  form{
    border-bottom: 1px solid $siteSilver2;
    input[type='text'], button{
      border: 0;
      outline: 0;
      background: inherit;
      font-size: 19px;
      line-height: 140%;
      color: rgba(0, 0, 0, 0.6);
      padding: 1rem 2rem;
    }
    button{
      cursor: pointer;
    }
  }
}
.shows{
  .show{
    max-width: 375px;
    width: 100%;
  }
}



// Телепередача
.programme{
  .left{
    box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.15);
    width: 49rem;
    height: max-content;
    .title{
      padding: 3rem;
      display: flex;
      align-items: center;
      span{
        font-family: 'Exo 2';
        font-weight: 600;
        font-size: 24px;
        line-height: 130%;
        color: rgba(0, 0, 0, 0.9);
      }
      img{
        max-width: 10rem;
        border: 1px solid rgba(0, 0, 0, 0.1);
        margin-right: 3rem;
      }
    }
    p{
      padding: 1.5rem 3rem;
      font-size: 16px;
      line-height: 140%;
      color: rgba(0, 0, 0, 0.9);
      span{
        font-family: 'Exo 2 Bold';
        font-size: 16px;
        line-height: 130%;
        color: rgba(0, 0, 0, 0.6);
      }
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
  .right{
    padding-left: 6rem;
    max-width: 126rem;
    width: 100%;
    p{
      // max-width: 120rem;
      font-size: 16px;
      line-height: 140%;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 2rem;
      &.subtitle{
        margin: 1rem 0 4rem 0;
        color: rgba(0, 0, 0, 0.6);
      }
    }
    img{
      margin-right: 3rem;
    }
    h3,.title{
      font-size: 32px;
      line-height: 120%;
      color: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
    }
    table{
      width: 100%;
      tr{
        border-top: 1px solid rgba(0, 0, 0, 0.1);
      }
      td{
        padding: 3rem 0;
      }
    }
  }
  .show{
    margin: 0;
    p{
      margin-bottom: 0;
    }
    .green-btn{
      text-decoration: none;
      padding: 1rem 2rem;
      margin-right: 1rem;
      height: 4rem;
      font-size: 12px;
      display: inline-block;
      height: unset;
      width: unset;
    }
  }
  .hour{
    padding: 0;
    .clickable{
      padding: 2rem;
      cursor: pointer;
      span{
        &.name{
          font-family: 'Exo 2 Bold';
          font-size: 19.2px;
          line-height: 130%;
          color: rgba(0, 0, 0, 0.6);
        }
        &.count{
          font-size: 16px;
          line-height: 140%;
          color: rgba(0, 0, 0, 0.45);
        }
        &.price{
          font-family: 'Exo 2';
          font-style: normal;
          font-weight: 600;
          font-size: 16px;
          line-height: 140%;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
    .description{
      visibility: hidden;
      opacity: 0;
      transition: visibility 0s, opacity 0.5s linear;
      height: 0;
      display: none;
    }
    &.active{
      .description{
        display: flex;
        height: auto;
        visibility: visible;
        opacity: 1;
        background: #F5F5F5;
      }
      span.right-arrow{
        background-image: url('images/up.png');
        width: 14px;
        height: 10px;
      }
    }
    span.right-arrow{
      padding: 0 1rem;
      margin: 0;
      width: 14px;
      height: 10px;
      background-image: url('images/down.png');
      background-repeat: no-repeat;
    }
    .channel{
      background: #fff;
      border: 1px solid #F5F5F5;
      width: 130px;
      height: 130px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      box-shadow: 0px 0px 20px 0 rgba(0, 0, 0, 0.2);
      img{
        margin: 0;
      }
      span{
        margin: 0;
        font-family: 'Exo 2 Bold';
        font-size: 11px;
        line-height: 120%;
        color: rgba(0, 0, 0, 0.45);
      }
    }
    .question{
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}


// Зона покрытия
.zones{
  form.zone{
    display: flex;
    margin-bottom: 3rem;
    input, button{
      background: #F5F5F5;
      border: 0;
      outline: 0;
      height: 6rem;
      padding: 2rem 1.5rem;

    }
    input{
      min-width: 37rem;
      font-size: 16px;
      line-height: 140%;
      color: rgba(0, 0, 0, 0.6);
      font-family: "Exo 2";
    }
    button{
      cursor: pointer;
      padding: 2rem;
    }
  }
}

.faq{
  .programme {
    .left{
      .hour{
        border-bottom: 1px solid $siteSilver;
        .clickable{
          padding: 2rem 3rem;
          span.name {
            color: rgba(0, 0, 0, 0.9);
            font-size: 16px;
          }
        }
        a{
          width: 100%;
          font-size: 16px;
          line-height: 140%;
          color: rgba(0, 0, 0, 0.6);
          text-decoration: none;
          border-bottom: 1px solid #DDDDDD;
          padding: 2rem 3rem;
          &.active, &:hover{
            background-color: #5462A0;
            color:#fff;
          }
        }
      }
    }
    .right{
      .evaluate{
        margin: 4rem 0;
      }
      h4{
        font-family: 'Exo 2 Bold';
        font-size: 19.2px;
        line-height: 130%;
        color: rgba(0, 0, 0, 0.6);
        margin-bottom: 1rem;
      }
      p{
        font-size: 16px;
        line-height: 140%;
        color: rgba(0, 0, 0, 0.45);
        margin-bottom: 1rem;
      }
      a{
        margin-bottom:4rem;
        display: inline-block;
      }
    } 
  }
}

.programme{
  form.question{
    box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.15);
    padding: 4.5rem 4rem;
    h3{
      font-size: 32px;
      line-height: 120%;
      color: rgba(0, 0, 0, 0.6);
    }
    p{
      margin: 0;
      margin-top: 1rem;
      font-family: 'Exo 2 Bold';
      font-size: 16px;
      line-height: 130%;
      color: rgba(0, 0, 0, 0.6);  
      &.red{
        font-weight: 100;
      }
    }
    input[type='text'], textarea, select{
      background: #F5F5F5;
      border-radius: 2px;
      font-family: 'Exo 2';
      padding: 2rem 1rem; 
      width: 97%;
      border: 0;
      outline: 0;
      margin: 2rem 0;
      line-height: 140%;
    }
    select{
      cursor: pointer;
      font-family: "Exo 2" !important;
      font-size: 14px;
      line-height: 200%;
      color: rgba(0, 0, 0, 0.6);
    }
    textarea{
      min-height: 13rem;
    }
  }
  &.connection{
    h2{
      margin-bottom: 6rem;
    }
  }
}

.equipments{
  padding: 5rem 0;
  .text, .image{
    width: 50%;
    h4{
      font-weight: bold;
      font-size: 19.2px;
      line-height: 130%;
      color: rgba(0, 0, 0, 0.6);
    }
    p{
      font-size: 16px;
      line-height: 140%;
      color: rgba(0, 0, 0, 0.6);
    }
    p.green{
      color: #8DB223;
    }
    p.red{
      margin: 1rem 0 1.5rem 0;
    }
    a.site-btn{
      margin-top: 3rem;
    }
  }
  &.silver-bg{
    background: #EEEEEE;
  }
}
.purchases {
  h2{
    margin-top: 3rem;
  }
  form {
    button, input[type='submit']{
      cursor: pointer;
    }
    input[type='submit']:hover{
      background: $siteBlue;
      color: #fff;
    }
    input, select, button{
      background: #fff;
      padding: 1.5rem 2rem;
      font-family: 'Exo 2';
      font-size: 16px;
      line-height: 140%;
      color: rgba(0, 0, 0, 0.6);
      border: 0;
      outline: 0;
      margin: 2rem 2rem 2rem 0;
    }
    label{
      margin-right: 1rem;
    }
    &.search{
      input, button{
        margin:2rem 0;
      }
    }
  }
  .purchase{
    &.closed{
      opacity: 0.5;
    }
    margin: 4rem 0;
    background: #FFFFFF;
    box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.15);
    border-radius: 30px;
    width: 49rem;
    border-bottom: 0;
    h3,p{
      padding: 0 3rem;
    }
    h3{
      font-size: 24px;
      line-height: 130%;
      color: rgba(0, 0, 0, 0.6);
      font-weight: 600;
    }
    .left,.right{
      color: #5462A0;
    }
    .left{
      padding: 10px 0px 10px 20px;
      max-width: 50%;
    }

    .right{
      padding: 10px 10px 20px 20px;
      max-width: 50%;
    }
    p{
      margin: 1.5rem 0 2rem 0;
      font-size: 14px;
      line-height: 140%;
      color: rgba(0, 0, 0, 0.2);
    }
    span{
      font-size: 16px;
      line-height: 140%;
      color: #3E4E93;
      &.tag{
        padding: 1.5rem 3rem;
        background: #3E4E93;
        color: #fff;
        border-bottom-left-radius: 3rem;
        border-top-right-radius: 3rem;
        height: 5.5rem;
        &.two{
          background: #DD4C96;
        }
        &.three{
          background: #795799;
        }
        &.four{
          background: #A95CAD;
        }
      }
      &.lock{
          background: url("data:image/svg+xml;utf8,<svg width='21' height='24' viewBox='0 0 21 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.75 11.9991H7.125V7.16625C7.125 5.31001 8.61094 3.76782 10.4672 3.74907C12.3422 3.73032 13.875 5.25376 13.875 7.12407V7.87407C13.875 8.49751 14.3766 8.99907 15 8.99907H16.5C17.1234 8.99907 17.625 8.49751 17.625 7.87407V7.12407C17.625 3.18657 14.4141 -0.0149929 10.4766 -0.000930413C6.53906 0.0131321 3.375 3.25688 3.375 7.19438V11.9991H2.25C1.00781 11.9991 0 13.0069 0 14.2491V21.7491C0 22.9912 1.00781 23.9991 2.25 23.9991H18.75C19.9922 23.9991 21 22.9912 21 21.7491V14.2491C21 13.0069 19.9922 11.9991 18.75 11.9991ZM12.375 19.1241C12.375 20.16 11.5359 20.9991 10.5 20.9991C9.46406 20.9991 8.625 20.16 8.625 19.1241V16.8741C8.625 15.8381 9.46406 14.9991 10.5 14.9991C11.5359 14.9991 12.375 15.8381 12.375 16.8741V19.1241Z' fill='rgba(84, 98, 160)'/></svg>") no-repeat;
          width: 150px;
          text-align: right;
          padding: 25px 0px;
          background-position: 35px 20px;
      }
      &.unlock{
          background: url("data:image/svg+xml;utf8,<svg width='21' height='24' viewBox='0 0 21 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.75 10.5H17.625V7.125C17.625 3.19687 14.4281 0 10.5 0C6.57187 0 3.375 3.19687 3.375 7.125V10.5H2.25C1.00781 10.5 0 11.5078 0 12.75V21.75C0 22.9922 1.00781 24 2.25 24H18.75C19.9922 24 21 22.9922 21 21.75V12.75C21 11.5078 19.9922 10.5 18.75 10.5ZM13.875 10.5H7.125V7.125C7.125 5.26406 8.63906 3.75 10.5 3.75C12.3609 3.75 13.875 5.26406 13.875 7.125V10.5Z' fill='rgba(84, 98, 160)'/></svg>") no-repeat;
          width: 150px;
          text-align: right;
          padding: 25px 0px;
          background-position: 35px 20px;
      }
    }
  }
}



.register {
  .tabs{
    width: 100%;
  }
  .tabs__caption li{
    background: #EEEEEE;
    font-weight: 600;
    font-size: 24px;
    line-height: 130%;
    text-align: center;
    color: rgba(0, 0, 0, 0.2);
    width: 50%;
    padding: 2rem 0;
    cursor: pointer;
    &.active{
      color: rgba(0, 0, 0, 0.6);
      background: #fff;
    }
  }
  .tabs__content {
    display: none; 
  }
  .tabs__content.active {
    display: block; 
  }
  .right{
    p{
      span.black{
        color:#000;
        font-weight: bold;
      }
    }
  }
}

.checktv{
  margin-bottom: 3rem;
  .flex.flex-row{
    padding-top: 3rem;
  }
  h2{
    font-family: 'Exo 2';
    font-size: 32px;
    line-height: 120%;
    color: rgba(0, 0, 0, 0.9);
    margin: 0 0 3rem 0;
  }
  p{
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 140%;
    color: rgba(0, 0, 0, 0.6);
  }
  select{
    border-radius: 0.5rem;
    padding: 1.5rem 10rem 1.5rem 2rem;
    margin-top: 3rem;
    font-size: 1.8rem;
    border: 0;
    outline: 0;
    cursor: pointer;
    font-weight: 600; 
    font-size: 16px;
    line-height: 140%;
    color: rgba(0, 0, 0, 0.6);
    min-width: 31rem; 
  }
  .alert-success{
    margin-top: 3rem;
    border-radius: 15px;
    display: inline-block;
    background: #99C126 url('/images/check.png') no-repeat right bottom;
    p{
      margin: 2rem 3rem;
      text-align: left;
      font-family: 'Exo 2 Bold';
      font-size: 19.2px;
      line-height: 130%;
      color: #fff;
    }
  }
}

.left{
  .form{
    padding: 4rem;
    h3{
      font-weight: 600;
      font-size: 24px;
      line-height: 130%;
      text-align: center;
      color: rgba(0, 0, 0, 0.5);
      background-color: #fff;
    }
    input[type='text'], input[type='password'], input[type='date']{
      width: 100%;
      background: #F5F5F5;
      border-radius: 2px;
      border: 0;
      outline: 0;
      padding: 1rem;
      font-weight: 300;
      font-size: 16px;
      line-height: 140%;
      color: rgba(0, 0, 0, 0.6);
      margin-bottom: 1.5rem;
      font-family:'Exo 2';
      font-style: normal;
    }
    input[type='submit'], button{
      font-weight: 600;
      font-family:'Exo 2';
    }
    p{
      padding: 0;
      border: 0;
      font-family: Exo 2;
      font-style: normal;
      font-weight: 300;
      font-size: 16px;
      line-height: 140%;
      color: rgba(0, 0, 0, 0.6);
      margin: 2rem 0;
    }
  }
}

.discount{
  .right{
    .block{
      &.pink{
        background: #943399;
        a{
          color:#943399;
        }
      }
      &.blue{
        background: #2E3F8D;
        a{
          color:#2E3F8D;
        }
      }
      &.red{
        background: $sitePink;
        a{
          color: $sitePink;
        }
      }
      &.darkpink{
        background: #582D7F;
        a{
          color:#582D7F;
        }
      }
      box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.15);
      border-radius: 30px;
      color: #fff;
      padding: 4rem 4rem 1rem 4rem;
      margin-bottom:4rem; 
      a{
        margin: 1rem 0;
        background: rgba(255, 255, 255, 0.9) ;
        border-radius: 12px ;
        display: inline-block;
        max-width: 240px;
        text-align: center;
        padding: 1.4rem 0;
        border:1px solid #fff;
        &:hover{
          color:#fff;
          background: inherit;
        }
      }
      h3,p{
        color: #fff;
        margin-bottom: 1rem;
        &.date{
          font-size: 14px;
          line-height: 140%;
          color: rgba(255, 255, 255, 0.5);
        }
      }
      .pull-left{
        padding: 2rem;
      }
    }
  }
}

p.red, span.red{
  color: $sitePink!important;
  font-weight: bold;
}

.plans{
  .programme {
    .left{
      h3{
        padding: 3rem;
        box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.15);
        font-weight: 600;
        font-size: 24px;
        line-height: 130%;
        color: rgba(0, 0, 0, 0.6);
      }
      p{
        span.red{
          font-weight: 100;
        }
        span{
          font-size: 16px;
          line-height: 140%;
          color: rgba(0, 0, 0, 0.9);
          font-family: 'Exo 2';
          width: 100%;
          display: inline-block;
          margin: 0 0 1rem 0;
        }
        span.name{
          font-family: 'Exo 2 Bold';
          color: rgba(0, 0, 0, 0.6);
        }
      }
      button{
        background: rgba(0, 0, 0, 0.2);
        border-radius: 12px;
        color: #fff;
        padding: 1rem 3rem;
        font-weight: 600;
        font-size: 11px;
        line-height: 100%;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        outline: 0;
        border: 0;
        margin: 0.5rem 1rem 0.5rem 0;
        &:hover, &.active{
          background: $sitePink;
        }
      }
    }
    .right{
      .title{
        margin: 3rem 0;
      }
    }
    .show .green-btn{
      background: $sitePink;
      border-color: $sitePink;
      &:hover{
        color: inherit;
      }
    }
    #shows.owl-carousel .owl-nav{
      right: 2rem;
      left: unset;
    }
  }
  .equip-block{
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    margin: 1rem 0 2rem 1rem;
    padding-bottom: 1px;
    .text{
      padding: 3rem 3rem 0 3rem;
      text-align: center;
      img{
        margin: 0;
      }
    }
    .custom-checkbox{
      padding-left: 15px;
      font-size: 16px;
      line-height: 140%;
      color: rgba(0, 0, 0, 0.6);
      .checkmark{
        right: 15px;
        height: 20px;
        width: 20px;
        left: unset;
        &:after {
          left: 6px;
          top: 2px;
          width: 6px;
          height: 12px;
          border: solid white;
              border-top-width: medium;
              border-right-width: medium;
              border-bottom-width: medium;
              border-left-width: medium;
          border-width: 0 3px 4px 0;
          transform: rotate(45deg);
        }
      }
      &:hover input ~ .checkmark, & input:checked ~ .checkmark{
        background-color: #3E4E93;
        border: 1px solid #3E4E93;
      }
    }
  }
}

// custom-checkbox 

.custom-checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  border-radius:6px;
  border: 1px solid #8C8C8C;
  height: 24px;
  width: 24px;
}

.custom-checkbox:hover input ~ .checkmark, .custom-checkbox input:checked ~ .checkmark{
  background-color: $sitePink;
  border: 1px solid $sitePink;
}


.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

.custom-checkbox .checkmark:after {
  left: 8px;
  top: 1px;
  width: 6px;
  height: 16px;
  border: solid white;
      border-top-width: medium;
      border-right-width: medium;
      border-bottom-width: medium;
      border-left-width: medium;
  border-width: 0 3px 4px 0;
  transform: rotate(45deg);
}

hr{
  border-bottom: 0;
  border-color: rgba(0, 0, 0, 0.1);
}

.cabinet{
  h2{
    margin: 3rem 0 5rem 0;
    a{
      margin-right: 3rem;
    }
  }
  .left{
    a{
      padding: 2rem 3rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      font-size: 16px;
      line-height: 140%;
      color: rgba(0, 0, 0, 0.6);
      width: 100%;
      display: inline-block;
      &:hover{
        color:$sitePink;
      }
    }
    .hour{
      padding: 2rem 3rem 0;
      a{
        border: 0!important;
      }
      span{
        padding-bottom: 1rem;
        width: 100%;
        display: inline-block;
      }
    }
    h3, th, td{
      background: #3E4E93;
      color: #fff;
      padding: 1.5rem 0;
      text-align: center;
      width: 100%;
    }
    table{
      width: 100%;
      th{
        background: #2E3F8D;
        outline: 1px solid #fff;
      }
      td{
        background: #fff;
        color: rgba(0, 0, 0, 0.6);
        outline: 1px solid #E5E5E5;
      }
    }
  }
  .right{
    .tabs{
      li{
        width: 245px;
        height: 65px;
        padding: 2rem 3rem;
        font-family: 'Exo 2 Bold';
        font-size: 19.2px;
        line-height: 130%;
        color: rgba(0, 0, 0, 0.2);
        text-align: center;
        cursor: pointer;
        &.active{
          background: #fff;
          color: rgba(0, 0, 0, 0.6);
        }
      }
    }
    .tabs__content {
      display: none; 
    }
    .tabs__content.active {
      display: block;
      .bg-white{
        padding: 3rem;
        margin-bottom: 3rem;
      } 
      select{
        background: #F5F5F5;
        border-radius: 2px;
        font-size: 16px;
        line-height: 140%;
        color: rgba(0, 0, 0, 0.6);
        padding: 1rem;
        height: 5rem;
        min-width: 20rem;
        margin-right: 3rem;
      }
      p{
        font-size: 16px;
        line-height: 140%;
        color: rgba(0, 0, 0, 0.6)
      }
      table{
        th,td{
          background: #E7E7E7;
          font-family: 'Exo 2';
          font-weight: bold;
          font-size: 16px;
          line-height: 130%;
          color: rgba(0, 0, 0, 0.6);
          outline: 1px solid #fff;
          padding: 2.5rem;
          text-align: center;
        }
        td{
          background: #EEEEEE;
          color: rgba(0, 0, 0, 0.6);
        }
      }
    }
  }
}

.contacts{
    .top-contact{
      background: #272F52;
      .row{
        min-height: 55px;
        .col-3{
          text-indent: 3rem;
        }
      }
    }
    .contact-text{
      p{
        padding: 1.5rem 3rem;
      }
      .row{
        .col-3.name{
          font-family: 'Exo 2 Bold';
          color: #2D3B7B;
          font-size: 16px;
          line-height: 130%;
          text-indent: 3rem;
        }  
        border-bottom: 1px solid #fff;
        button{
          color: #D41F7C;
          background: inherit;
          outline: 0;
          border: 0;
          cursor: pointer;
          font-size: 15px;
          padding: 0;
        }
      }
    }
   .section6{
      position:relative;
      .contact-filter{
        background: #414866;
        text-align: center;
        min-height: 84px;
        .contact-container{
          max-width: 120rem;
          display: flex;
          margin: 0 auto;
          min-height: 84px;
          form{
            color: rgba(255, 255, 255, 0.9);
            select{
              font-size: 15px;
              line-height: 150%;
              padding-left:5px;
              cursor: pointer;
              border: 1px solid #fff;
              outline: 1px solid #fff;
              min-width: 15rem;
            }
          }
          .email{
            display: flex;
            text-align: center;
            flex-direction: row;
            align-items: center;
          }
        }
      }
      .mainTitle{
        margin-bottom:40px;
        margin-top:40px;
        text-align:center;
        padding:0 20px;
        h2 {
          font:500 36px/48px Montserrat,sans-serif;
          color:#212f3d
        }
      }
      .map{
        font-size:0;line-height:0;
        min-height:640px
      }
    }
    // .section6 
    .section6 .map #infowindows{
      padding:10px;max-width:320px
    }
    .section6 .map #infowindows #wraps .titles{
      font:700 15px/15px Montserrat,sans-serif;color:#212f3d;display:block;margin-bottom:20px
    }
    .section6 .map #infowindows #wraps ul li{
      list-style:none;margin-bottom:20px
    }
    .section6 .map #infowindows #wraps ul li strong{
        font:600 15px/20px Montserrat,sans-serif;color:#228bd6
    }
    .section6 .map #infowindows #wraps ul li a,.section6 .map #infowindows #wraps ul li span{
    font:400 15px/20px Montserrat,sans-serif;color:#212f3d
    }
    .section6 .map #infowindows #wraps ul li a{
      text-decoration:none;transiton:color .2s ease 0s
    }
    .section6 .map #infowindows #wraps ul li a:hover{
      color:#228bd6
    }
    .section6 .map #infowindows #wraps ul li:last-child{
      margin-bottom:0
    }
    .section6 .container{
      position:absolute;top:120px;left:50%;z-index:999;transform:translateX(-50%)
    }
    .section6 .container .wrap{
      text-align:center
    }
    .section6 .container .wrap .form{
      display:inline-block;text-align:left}
    .section6 .container .wrap .form .select2-container .select2{
      border:0;border-radius:6px;box-shadow:0 15px 20px 0 rgba(33,47,61,.15)}
    .section6 .container .wrap .form .select2-container .select2 .label{font:700 16px/50px Montserrat,sans-serif;color:#212f3d;letter-spacing:.6px;margin:0 50px 0 30px;height:50px}
    .section6 .container .wrap .form .select2-container .select2 .button{height:50px}
    .section6 .container .wrap .form .select2-container .select2-selection--single{
        border:0;border-bottom-left-radius:6px;border-bottom-right-radius:6px
    }
    .section6 .container .wrap .form .select2-container .select2-selection--single .select2-selection__rendered .select2-selection__arrow ul li{
        font:700 14px/20px Montserrat,sans-serif;color:#212f3d;letter-spacing:.6px;padding:15px 30px
    }
    .section6 .container .wrap .form .select2-container .select2-selection--single .select2-selection__rendered .select2-selection__arrow ul li.selected{
      background-color:#228bd6;
      color:#fff
    }

    .leaflet-popup-content-wrapper, .leaflet-popup-tip {
      background: #D41F7C;
      box-shadow: 0 3px 14px rgba(0,0,0,0.4);
    }
    .section6 .map #infowindows #wraps .titles{
      color: #fff;
    }
    .leaflet-container a.leaflet-popup-close-button, .leaflet-container a.leaflet-popup-close-button:hover{
      color: #fff;
    }
    .section6 .map #infowindows #wraps ul{
      color: #fff;
      padding-left: 0;
    }
    .section6 .map #infowindows #wraps ul li strong{
      color: #fff;
    }
    .section6 .map #infowindows #wraps ul li span{
      color: #fff; 
    }
}

  .bg-white.evaluate.faqs-form{
    margin-top: 1rem;
    width: 100%;
  }
  .alert.alert-success.flex.green-btn {
    padding: 3rem;
    width: 100%;
    display: flex;
  }
  .alert.alert-danger.flex.green-btn {
    padding: 3rem;
    width: 100%;
    display: flex;
    background: #D52248;
    border: 1px solid #D52248;
    &:hover {
      background: #fff;
      color: #D52248;
    }
  }

// media site

@media screen and (max-width: 2000px) {
  .tvshows{
    .column.column-40{
      .text{
        max-width: 65rem;
      }
    }
  }
}


@media screen and (max-width: 1800px) {
  .blue-content .column.column-50 .text{
    max-width: 58rem;
  }
  .zones{
    .map{
      min-width: unset;
      svg{
        width: 80%;
        height: auto;
        &.uzbekistan{
          margin-bottom: 5rem;
        }
      }
      p svg{ 
        width: 3rem;
      }
    }
  }
  .tvshows {
    .column.column-40 {
      .text {
        max-width: 40rem;
      }
    }
  }
  .inner-page .news .new {
    max-width: 31%;
  }
  .shows{
    .show{
      width: 25%;
    }
  }
  .programme {
    .right {
      width: 80rem;
      p{
        max-width: 100%;
      }
    }
    .left{
      width: 40rem;
    }
  }
}

@media screen and (max-width: 1400px) {
  .tvshows {
    .column.column-40 {
      .text {
        max-width: 45rem;
      }
    }
  }
}

@media screen and (max-width: 1200px) {
  .container{
    width: auto;
  }
  .tvshows {
    .column.column-40 {
      .text {
        max-width: 100%;
      }
    }
  }
  .blue-content .column.column-50 .text{
    max-width: unset;
    width: 90%;
  }
  .inner-page {
    h2{
      text-align: center;
    }
    .news {
      justify-content: space-around; 
      .new{
        max-width: auto;
        min-width: 30rem;
      }
    }
  }
  .inner-pagination{
    justify-content: center;
  }
  .programme{
    justify-content: center;
    .right {
      padding: 0 10%;
      width: unset;
      p {
        max-width: 100%;
        text-align: center;
      }
      h2{
        margin-top: 5rem;
      }
      .show{
        h4{
          justify-content: center;
        }
      }
    }
  }
  .cabinet{
    .right{
      .tabs{
        margin-top: 5rem;
        overflow-x: scroll;
        .tabs__content.active select{
          margin-bottom: 2rem;
        }
      }
    }
  }
}

@media screen and (max-width: 1100px) {
  .silver-content{
    .col-6.left, .col-6.right{
      width: 100%;
      justify-content: center;
      .nots, .news{
        padding-right:0;
        padding-left:0;
      }
    }
  }
  .programme .right {
      padding: 0 5%;
      width: 90%;
  }
}

// @media only screen and (max-width:992px)
// {
  
// }
    // @media only screen and (max-width:480px){ 
        
    // }

@media screen and (max-width: 991px) {
  .section6 .mainTitle h2{
    font-size:22px;line-height:38px
  }
  .middle-header {
    .row {
      .dropdown{
        text-align: center; 
        .dropdown-content{
          min-width: unset;
          width: 95%;
        }    
      }
    }
    ul.phone{
      margin-left: 2rem;
      line-height: 150%;
      color: rgba(255, 255, 255, 0.9);
      flex-wrap: wrap;
      text-align: center;
      justify-content: center;
    }
  }
  .zones{
    .map{
      min-width: 100%!important;
    }
    .column.column-50{
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
  }
  #accountSlider{
    .owl-item{
      min-height: 40rem;
      .container{
        .text{
          padding-top: 0;
        }
      }
      img{
        display: none;
      }
    }
    .owl-dots {
      position: absolute;
      left: 50%;
      bottom: 2rem;
      transform: translate(-50%, 0);
    }
  }
  .shows{
    justify-content: space-around;
    .show{
      width: 50%;
    }
  }
}



@media screen and (max-width: 768px) {
  .middle-header .row{
    flex-direction: row;
  }
  .menu-button{
    display: inline-block;
    margin-top: 2.9rem;
  }
  .mobile-phone{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    li{
      line-height: 100%;
      color: rgba(255, 255, 255, 0.9);
      font-size: 24px;
    }
  }
  .zones{
    .column-50{
      width: 100%;
      &.map{
        .text{
          p{
            display: flex;
            justify-content: center;
          }
        }
      }
    }
  }
  .tvshows{
    padding-top: 3rem;
    .column.column-60, .column.column-40{
      width: 100%;
      max-width: 100%;
      flex: 0 0 100%;
      padding: 0 1rem;
      .text{
        padding-bottom: 3rem;
        text-align:center;
      }
      .owl-carousel{
        padding-top: 5rem;
        padding-right: 0rem;
        .owl-nav{
          top: -1rem;
          font-size: 5rem;
        }
      }
    }
  }
  #myslider.owl-carousel{
    .slide{
      .container{
        .text{
          h3{
            font-size: 2rem;
            margin-bottom: 1.5rem;
            line-height: 100%;
            margin-top: 3rem;
          }
          p{
            margin-bottom: 2rem;
          }
        }
      }
    }
  }
  .payments{
    .row .column.column-50{
      width: 100%;
      flex: 0 0 100%;
      max-width: 100%;
      .text{
        padding-bottom: 5rem;
      }
    }
  }
  .equips {
    padding: 2rem 0;
    .text {
      padding-bottom: 5rem;    
      p{
        padding-right: 0;
      }
    }
  }

  .page-title{
    font-size: 4rem;
    margin-top: 3rem;
    text-align: center;
    font-weight: bold;
  }
  .zones, .home-plans, .equips{
    text-align: center;
    p{
      padding: 0 5rem;
      text-align: center;
    }
    .column.column-40{
      .row{
        justify-content: center;
      }
    }
    a{
      margin-bottom: 5rem;
    }
  }
  .home-plans {
    .column.column-40, .column.column-60{
      width: 100%;
      flex: 0 0 100%;
      max-width: 100%;
      flex-wrap: wrap;
      flex-direction: row;
    } 
    .plan{
      width: 10rem;
      height: 10rem;
      min-height: unset;
      min-width:unset;
      display: flex;
      svg{
        width: 50px;
        height: 50px;
        margin-bottom: 0;
      }
    }
  }
  .tvshows, .payments{
    text-align: center;
    justify-content: center;
  }
  .instructions .column.column-60 .instruction {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .payments .flex.column.column-50.flex-wrap.text-center{
    justify-content: center;
  }
  .instructions .column.column-40 .text , .blue-content .column.column-50 .text{
    max-width: 100%;
  }
  .blue-content {
    .column.column-50 {
      width: 100%;
      .text {
        width: 70%;
        margin: 0 auto;
        padding: 0!important;
      }
    }
  }
  .site-btn{
    padding: 1rem 2rem;
  }
  footer  {
    .row {
      .column{
        .menu {
          max-width: unset;
          min-width: 15rem;
          text-align:center;
          padding: 3rem 0;
        }
      }
      .column.column-40{
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        .large-menu{
          text-align: center;
          .social{
            display: inline-block;
            margin: 0 auto;
          }
        }
      }
      .column.column-60{
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: space-around;
      }
    }
    .afterfooter{
      .container{
        .row{
          .flex{
            justify-content: center;
            .copyright{
              margin: 1rem 0;
            }
          }
          .site-map{
            justify-content: center;
          }
        }
      }
    }
  }
  .inner-page {
    .news {
      .new{
        width: 80%;
        max-width: 40rem;
      }
    }
  }
  .programme{
    .right {
      padding: 0 5%;
      max-width: 90%;
      .show{
        .hour{
          padding: 1rem;
          .flex.flex-row.flex-wrap.space-between.align-center{
            justify-content: center;
          }
          span.right-arrow {
            margin: 0;
            width: 18px;
            height: 10px;
            background-image: url('/images/down.png');
            background-repeat: no-repeat;
            margin: 0 1rem;
          }
        }
      }
      table{
        td{
          border: 1px solid rgba(0, 0, 0, 0.1);
          text-align: center;
          padding: 0 1rem ;
        }
      }
      .channel-calendar{
        .title{
          margin: 0 auto;
        }
      }
    }
  }
  .zones form.zone{ 
    border: 1px solid #aaa;
  }
  .faq .programme .right p{
    text-align: left;
  }
  h2.inner-title, .programme h2, .programme.connection h2{
    font-size: 34px;
    text-align: center;
    justify-content: center;
  }
  .programme.connection{
    .flex{
      justify-content: center;
    }
    form.question{
      width: 80%;
      margin: 0 10%;
    }
    .col-6{
      text-align: center;
    }
  }
  #accountSlider {
    .owl-item{
      min-height: 30rem;
      .container .text{
        padding: 0 2rem;
        text-align: center;
      }
    }
  }
  .evaluate {
    width: 80%;
    margin: 5rem 10%;
  }
  .nots{
    padding: 0;
  }
  .discount .right {
    .block {
      text-align: center;
      .pull-left{
        float: none;
      }
      a{
        cursor: pointer;
        margin: 2rem auto;
        padding: 1rem 2rem;
      }
    }
  }
  .contacts{
    .section6 .contact-filter .contact-container{
      padding: 0 5%;
      width: 90%;
    }
    .top-contact {
      display: none;
    }
    .col-9{
      width: 100%;
    }
    .col-4{
      width: 100%;
    }
    .contact-text .row .col-3.name{
      padding-top: 2rem;
    }
  }
  .text-pages{
    padding: 0 10%;
  }
  .programme .right h2{
    margin: 0;
    padding: 3rem 0;
  }
  .discount .right .block h3, .discount .right .block p{
    justify-content: center;
  }
}


@media screen and (max-width: 620px) {
  .zones p, .home-plans p, .equips p{
    padding: 0 2rem;
  }
  .searchBox:hover > .searchInput {
      width: 150px;
      padding: 0 6px;
  }
  .silver-content{
    .nots, .news{
      max-width: 45rem;
    }
  }
  .middle-header a.logo{
    svg{
      width: 150px;
    }
  }
  .mobile-phone{
    justify-content: center;
    text-align: center;
    li{
      font-size: 20px;
    }
  }
  .middle-header .row {
      min-height: 5rem;
  }
  .menu-button {
    margin-top: 1rem;
  }
  .bar1, .bar2, .bar3 {
    width: 25px;
    height: 2px;
    margin: 7px 0;
  }
  .site-btn{
    padding: 1rem 2rem;
  }
  #myslider.owl-carousel{
    .slide{
      .container{
        .text{
          h3{
            font-size: 2rem;
            line-height: 120%;
          }
          p{
            font-size: 15px;
          }
        }
      }
    }  
  }
  .tvshows .column.column-60 .owl-carousel {
    .owl-item .show{
      max-width: 35rem;
      margin: 0 auto;
      h4,p{
        text-align: center;
        justify-content: center;
      }
    }
    .owl-nav{
      width: 100%;
      top: -3rem;
    }
  }
  .shows{
    .show{
      width: 80%;
      .hour.active {
        .display-hidden{
          right: -10px;       
        }
      }
    }
  }
  .programme .left{
    min-width:80%;
    max-width: 90%;
  }
  .equipments {
    .text, .image{
      max-width: 100%;
    }
  }
}

@media screen and (max-width: 500px) {
  .middle-header a.logo{
    svg{
      width: 100px;
    }
  }
  .silver-content{
    .nots, .news{
      max-width: 40rem;
    }
  }
  #myslider.owl-carousel .slide .container .text {
    h3{
      margin-top: 1rem;
    }
    p{
      margin-bottom: 1rem;
    }
  }
  .zones form.zone input{
    min-width: 80%;
  }
  .inner-header{
    .breadcrumbs{
      width: 100%;
      padding-top: 1rem;
      padding-bottom: 1rem;
      display: flex;
    }
    .social{
      width: 100%;
      padding-top: 2rem;
      justify-content: flex-end;
      display: flex;
    }
  }
  .contacts{
    .section6 .mainTitle h2{
      font-size:18px;line-height:22px
    }
    .section6 .container{
      position:relative;top:0;left:0;transform:none;border-bottom:5px solid #228bd6
    }
    .section6 .container .wrap{
      padding:0
    }
    .section6 .map{
      min-height:400px
    }
    .section6 .map #infowindows{
      max-width:170px}
    .section6 .container .wrap .form{
      display:block
    }
    .section6 .container .wrap .form .select2-container .select2 .label{
      font-size:14px;letter-spacing:0;margin:0 20px
    }
  }
  .equipments .text{
    width: 100%;
    text-align: center;
  }
  .programme form.question.bg-white{
    .flex-row{
      flex-direction: column;
    }
  }
}

@media screen and (max-width: 450px) {
  .page-title {
    font-size: 3rem;
  }
  .silver-content{
    .nots, .news{
      max-width: 90%;
    }
  }
  #myslider.owl-carousel{
    .slide{
      .container{
        .text{
          p{
            display: none;
          }
        }
      }
    }  
  }
  .equips .owl-carousel{
    padding: 0 5rem
  }
  .zones table td, .zones table th {
    border: 1px solid #fff;
    padding: 1rem 2rem;
  }
  .blue-content {
    .column.column-50 {
      text-align: center;
      &.right{
        select{
          min-width: 200px;
          padding: 1.5rem;
        }
      }
    }
  }
  .purchases .purchase span.tag{
    padding: 1rem 2rem 0 2rem;  
  }
}