body{
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.navbar{
  width: 100%;
  height: 50px;
  background-color: transparent;
  position: fixed;
  top: 0;
  z-index: 999;
  background-color: #f2f2f2;
}
.navbar-limit{
  max-width: 1920px;
  height: 50px;
  margin: 0 auto;
}
.navbar-margin{
  height: 50px;
  max-height: 50px;
  margin-left: 50px;
  margin-right: 50px;
  border-bottom: 1px solid black;
  display: table;
}
.navbar-logo{
  height: 50px;
  display: table-cell;
  vertical-align: middle;
}
.navbar-logo-p{
  font-size: 20px;
  line-height: 0;
  margin: 0;
}
.navbar-middle{
  width: 100%;
  height: 50px;
  display: table-cell;
  vertical-align: middle;
}
.navbar-account{
  width: 50px;
  height: 50px;
  display: table-cell;
  vertical-align: middle;
}
.navbar-account-img{
  margin: 0 auto;
  display: block;
}

.content{
  width: 100%;
  height: auto;
  padding-top: 70px;
}
.content-limit{
  max-width: 1920px;
  margin: 0 auto;
}
.content-margin{
  margin: 0 50px 0 50px;
}




/*#region banner*/
.banner{
  width: 100%;
  height: 600px;
  background-color: black;
  transition: .3s ease-in-out;
  display: block;
  position: relative;
  background-image: url("assets/banners/2019/last-christmas-2019-banner.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.banner:focus,
.banner:hover{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  cursor: pointer;
}
.banner:focus{
  outline: 1px solid red;
}
.banner:hover .banner-gradient-content{
  opacity: 0;
  transition-delay: 1.5s;
}
.banner:focus .banner-gradient-content{
  opacity: 0;
  transition-delay: 1.5s;
}
.banner:hover .play-button-img{
  opacity: 0;
}
.banner:focus .play-button-img{
  opacity: 0;
}
.banner-gradient{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgb(0,0,0);
  background: -moz-radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(9,9,121,0) 0%, rgba(0,0,0,1) 100%);
  background: -webkit-radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(9,9,121,0) 0%, rgba(0,0,0,1) 100%);
  background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(9,9,121,0) 0%, rgba(0,0,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);  
}
.banner-video{
  opacity: 0;
  transition: .3s ease-in-out;
  position: absolute;
  width: 100%;
  z-index: 2;
  object-fit: cover;
  vertical-align: middle;
  }
.banner:hover .banner-video{
  opacity: 1;
  transition-delay: 1.5s;
}
.banner:focus .banner-video{
  opacity: 1;
  transition-delay: 1.5s;
}
.banner-gradient-content{
  bottom: 20px;
  left: 20px;
  position: absolute;
  max-width: 470px;
  transition: .3s ease-in-out;
}
.banner-gradient-logo-img{
  margin-bottom: 20px;
}
.banner-gradient-content-description{
  border-top: 1px solid white;
}
#banner-gradient-content-description-p{
  color: white;
}
#banner-gradient-content-bottom-p{
  margin-bottom: 0;
  margin-top: 20px;
  color: white;
}
.play-button-img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  transition: .3s ease-in-out;
}

.content-table{
  width: 100%;
  height: auto;
  display: table;
  margin-top: 40px;
}




/*content-table-left*/
.content-table-left{
  height: fit-content;
  display: table-cell;
  vertical-align: top;
  min-width: 250px;
}
.content-table-left-search{
  height:35px;
  border-bottom: 1px solid black;
  position: relative;
}
.input-content-table-left-search{
  border: 0;
  font-size: 16px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f2f2f2;
}
.input-content-table-left-search:focus{
  outline: 0;
}

.category-header {
  margin-top: 30px;
  font-weight: 700;
  color: #1a1a2e;
  font-size: 18px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.category-link {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #666;
  font-size: 16px;
  transition: color 0.2s;
  border-bottom: 1px dotted #eee;
}

.category-link:hover {
  color: #4361ee;
}





/*content-table-right*/
.content-table-right{
  width: 1413px;
  height: 1000px;
  display: table-cell;
  vertical-align: top;
}
.content-table-right-margin{
  margin-left: 20px;
}
.content-table-right-content{
  position: relative;
  padding-bottom: 50px;
  float: left;
  width: 100%;
}
.content-table-right-header{
  height: 35px;
  width: 100%;
  border-bottom: 1px solid black;
}
#paragraph-content-table-right-header-title{
  margin: 0;
  line-height: 35px;
}

.poster{
  margin-right: 20px;
  margin-top: 20px;
  background-color: black;
  float: left;
  transition: .3s ease-in-out;
  position: relative;
}
.poster.trending{
    background: url(assets/posters/trending-posters.jpg);
    background-size: calc(100% * 5) auto;
}
.poster:focus,
.poster:hover{
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  cursor: pointer;
  outline: 1px solid red;
  scale: 1.02;
}
#poster-trending-1{
  background-position: 0 0;
}
#poster-trending-2{
  background-position: calc((500% / 5)*4) 0;
}
#poster-trending-3{
  background-position: calc((500% / 5)*3) 0;
}
#poster-trending-4{
  background-position: calc((500% / 5)*2) 0;
}
#poster-trending-5{
  background-position: calc(500% / 5) 0;
  margin-right: 0;
}
#poster-trending-6{
  background-position: 0 calc(200% / 2);
}
#poster-trending-7{
  background-position: calc((500% / 5)*4) calc(200% / 2);
}
#poster-trending-8{
  background-position: calc((500% / 5)*3) calc(200% / 2);
}
#poster-trending-9{
  background-position: calc((500% /5)*2) calc(200% / 2);
}
#poster-trending-10{
  background-position: calc(500% / 5) calc(200% / 2);
  margin-right: 0;
}
.poster-trending-numar{
  position: absolute;
  width: 50px;
  height: 50px;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .75);
}
.poster-trending-numar-p{
  font-size: 22px;
  line-height: 1px;
  margin: 24.5px auto;
  width: fit-content;
  color: white;
}
#poster-trending-numar-1{
  color: #d4af37;
}
#poster-trending-numar-2{
  color: #c1c9c2;
}
#poster-trending-numar-3{
  color: #cd7f32;
}
#poster-new-5{
  margin-right: 0;
}
#poster-new-10{
  margin-right: 0;
}




@media only screen and (max-width: 1020px){

  /*content*/
  .content-margin{
    margin: 0 25px 0 25px;
  }

  /*navbar*/
  .navbar-margin{
    margin: 0 25px 0 25px;
  }

  /*banner*/
  .banner{
    height: calc(100vh - 90px);
  }
}

@media only screen and (max-width: 1439px) {
  .banner{
    height: 500px;
  }

  .play-button-img{
    right: 100px;
    left: auto;
  }



  .content-table-left{
    display: none;
  }
  .content-table-right-margin{
    margin-left: 0;
  }
}