*,
*::before,
*::after {
  box-sizing: border-box;
}

/* html,
body {
  width: 100%;
  height: 100%;
} */

body {
  margin: 0;
  padding: 0;
  background-color: #080808;
  font-family: "Roboto";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  text-align: left;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

img {
    width: 100%;
    height: 100%;
}

img, svg {
    vertical-align: middle;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: .5rem;
    font-family: Roboto;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
}

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, .col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, .col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, .col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.no-gutters>.col, .no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

@media (min-width: 576px) {
  .col-sm-8 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 66.66667%;
      flex: 0 0 66.66667%;
      max-width: 66.66667%;
  }
}

@media (min-width: 992px) {
  .col-md-12 {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
  }
}

a {
  color: #00c1f3;
  text-decoration: none;
  background-color: transparent;
}

ul, li {
  list-style: none;
  padding: 0;
}

.lazyload-image-container {
  position: relative;
}

.modal {
    width: 80vw;
    margin: 70px 10vw;
    background-color: #161616;
    border-radius: 20px;
}

.series-cover {
  position: relative;
  overflow: hidden;
  height: 700px;
  border-radius: 20px 20px 0px 0px;
}

.series-cover img{
  border-radius: 20px 20px 0px 0px;
}

.series-cover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 101%;
    height: 384%;
    background: -webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,9%,0)),to(#161616));
    background: linear-gradient(180deg,hsla(0,0%,9%,0) 0,#161616);
}

.series-overview {
  position: relative;
  margin-left: 35px;
  margin-right: 35px;
  padding-bottom: 52px;
}

.series-title-wrapper {
  margin-bottom: 10px;
}

.series-title {
  font-size: 40px;
  margin-bottom: 0;
  text-transform: uppercase;
  line-height: 1;
  font-weight: 300;
  color: white;
}
.series-title img{
  width: 500px;
  height: auto;
}

.series-info {
  margin-bottom: 12px;
  font-size: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-transform: uppercase;
  font-weight: 400;
  color: #adadad;
  
  & > div {
    margin-right: 8px;
    line-height: 1;
  }
  
  .series-year::after {
    content: "\B7";
    font-size: 15px;
    margin-left: 5px;
    line-height: 10px;
  }
  
  .series-age {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 2px 3px 1px 4px;
    border: 1px solid #adadad;
    padding-right: 9px;
    padding-left: 9px;
  }
}

.series-action {
  margin-bottom: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.series-description {
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 300;
  color: #fff;
}

.more-info {
  .btn-more {
    font-size: 16px;
        text-transform: uppercase;
  }
}

.team {
    font-size: 11px;
    font-weight: 300;
  
  .team-list {
    margin: 0;
  }
  
  @media (min-width: 992px) {
    .team-item {
      margin-bottom: 17px;
    }
  }
  
  .team-item {
    h3 {
      font-size: inherit;
    }
  }
  
  .person-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    
    .person-item {
      color: #adadad;
      line-height: 1.5;
      
      .person-item:not(:last-child) {
        margin-right: 8px;
        
        .person-item::after {
          content: ",";
        }
      }
    }
  }
 
}

@media only screen and (min-width: 992px) {
  .team {
    font-size: 14px;
  }
}

.episodes {
  margin-left: 35px;
  margin-right: 35px;
  padding-bottom: 52px;
  padding-top: 14px;
  border-top: 1px solid #212121;
  
  .episodes-title-wrapper {
    margin-bottom: 22px;
    
    .episodes-title {
      font-size: 19px;
      margin-bottom: 0;
      line-height: 1;
      font-weight: 300;
    }
  }
  
  .episode-seasons {
    nav {
      font-size: 14px;
      text-transform: uppercase;
      font-weight: 300;
      border-bottom: 1px solid #212121;
      
      &::before {
        content: "Season";
        float: left;
      }
    }
    
    @media (min-width: 576px) {
      .seasons:before {
        margin-right: 23px;
      }
    }
    
    @media (min-width: 992px) {
      nav::before {
        margin-right: 41px;
      }
    }

    
    @media only screen and (min-width: 992px) {
      .episode-seasons {
        height: 57px;
      }
    } 
    
    .season-list {
      
      .season-item {
        &:last-child {
          margin-right: 0;
        }
        
        a {
          display: inline-block;
          padding: 0 7px 5px;
          line-height: 1;
          color: #adadad;
        }
        
        a.is-active {
          border-bottom-width: 5px;
          text-decoration: none;
          color: #fff;
          border-bottom: 4px solid #00c1f3;
        }
        
        @media (min-width: 576px) {
          a {
            padding: 0 7px 8px;
          }
        }
        
        @media (min-width: 992px) {
          a {
            padding: 0 8px 12px;
          }
        }
      }
      
      @media (min-width: 576px) {
        .season-list .season-item {
          margin-right: 6px;
        }
      }

    }
  }
  
  .episode-list {
    & > li {
      &:first-child {
        margin-top: 43px;
      }
    }
    
    .episode-item {
      margin-bottom: 16px;
      padding-bottom: 8px;
      font-weight: 300;
      color: #adadad;
      
      .episode-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-line-pack: start;
        align-content: flex-start;
        
        .episode-image {
          position: relative;
          overflow: hidden;
          width: 50%;
          
          .lazyload-image-container::before {
            display: block;
            content: "";
            width: 100%;
            padding-top: 56.25%;
            height: 0;
            overflow: hidden;
          }
          
          .lazyload-image {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            border-radius: 15px;
          }
        }
        
        @media(min-width: 576px) {
          .episode-image {
            width: 40%;
          }
        }
        
        @media(min-width: 992px) {
          .episode-image {
            width: 33.33333%;
          }
        }
        
        .episode-content {
          padding-left: 6px;
          width: 50%;
          
          .episode-title {
            font-size: 13px;
            margin-bottom: 7px;
            line-height: 1;
            font-weight: 300;
            color: #fff;
          }
          .episode-title:hover {
            color: #00b7ff;
            text-decoration: underline;
          }
          
          @media(min-width: 576px) {
            .episode-title {
              margin-bottom: 12px;
              font-size: 14px;
            }
          }
          
          @media(min-width: 576px) {
            .episode-title {
              margin-bottom: 12px;
              font-size: 14px;
            }
          }
          
          .episode-summary {
            font-size: 11px;
            margin-bottom: 7px;
          }
          
          @media(min-width: 576px) {
            .episode-summary {
              margin-bottom: 13px;
              font-size: 11px;
            }
          }
          
          @media(min-width: 992px) {
            .episode-summary {
              margin-bottom: 18px;
              font-size: 13px;
            }
          }
          
          .episode-duration {
            font-size: 10px;
            margin-bottom: 0;
          }
          
          @media(min-width: 576px) {
            .episode-duration {
              font-size: 11px;
            }
          }
          
          @media(min-width: 992px) {
            .episode-duration {
              font-size: 13px;
            }
          }
        }
        
        @media(min-width: 576px) {
          .episode-content {
            padding-right: 5%;
            padding-left: 25px;
            width: 60%;
          }
        }
        
        @media(min-width: 992px) {
          .episode-content {
            padding-left: 30px;
            width: 66.66667%;
          }
        }
      }
    }
    
    @media(min-width: 576px) {
      .episode-item {
        margin-bottom: 22px;
        padding-bottom: 13px;
      }
    }
    
    @media(min-width: 992px) {
      .episode-item {
        margin-bottom: 27px;
        padding-bottom: 15px;
      }
    }
  }
}