.header-logo {
	width: 50%;
	margin: auto;
}

 /* Global Styles */  
 :root {  
      --primary-color: #e50914;  
      --dark-color: #141414;  
      --light-color: #f4f4f4;  
 }  
 * {  
      box-sizing: border-box;  
      margin: 0;  
      padding: 0;  
 }  
 body {  
      font-family: 'NetflixSans Regular', sans-serif!important;
      -webkit-font-smoothing: antialiased;  
      background: #000;  
      height: 100%;
      color: #999;  
 }  
 ul {  
      list-style: none;  
 }  
 h1,  
 h2,  
 h3,  
 h4 {  
      color: #fff;  
 }  
 a {  
      color: #fff;  
      text-decoration: none;  
 }  
 p {  
      margin: 0.5rem 0;  
 }  
 img {  
      width: 100%;  
 }  
 .showcase {  
      width: 100%;  
      position: relative;  
 }   
 footer {  
      width: 100%;  
      bottom: 0px;
 }  
 .showcase::before {  
      content: '';  
      position: absolute;  
      top: 0;  
      left: 0;  
      width: 100%;  
      height: 100%;  
      background: url('/static/img/admin-background.jpeg');
      background-size: contain;
 }
 .dim {  
      position: absolute;  
      top: 0;  
      left: 0;  
      width: 100%;  
      height: 100%;  
      z-index: 1;  
      background: rgba(0, 0, 0, 0.6);  
      box-shadow: inset 120px 100px 250px #000000ba, inset -120px -100px 250px #0000006e;
 }  
 .showcase-top {  
	  position: relative;  
      z-index: 2;  
      height: 90px;  
 }
 .showcase-down {  
      position: relative;  
      z-index: 2;  
      height: 90px;  
 }  
 .showcase-top img {  
      width: 170px;  
      position: absolute;  
      top: 50%;  
      left: 50%;  
      transform: translate(-50%, -50%);  
      margin-left: 0;  
 }  
 .showcase-down img {  
      width: 170px;  
      position: absolute;  
      top: 50%;  
      left: 50%;  
      transform: translate(-50%, -50%);  
      margin-left: 0;  
 }  

 .showcase-content {  
      position: relative;  
      z-index: 2;  
      width: 65%;  
      margin: auto;  
      display: flex;  
      flex-direction: column;  
      justify-content: center;  
      align-items: center;  
      text-align: center;  
      margin-top: 9rem;  
 }  
 .showcase-content h1 {  
      font-weight: 700;  
      font-size: 5.2rem;  
      line-height: 1.1;  
      margin: 0 0 2rem;  
 }  
 .showcase-content p {  
      text-transform: uppercase;  
      color: #fff;  
      font-weight: 400;  
      font-size: 1.9rem;  
      line-height: 1.25;  
      margin: 0 0 2rem;  
 }  
 /* Tabs */  
 .tabs {  
      background: var(--dark-color);  
      border-bottom: 3px solid #3d3d3d;  
      border-right: none;  
 }  
 /* Edit page's Tabs */  
 .tabs .container {  
      display: grid;  
      grid-template-columns: repeat(2, 1fr);  
      grid-gap: 1rem;  
      align-items: center;  
      justify-content: center;  
      text-align: center;  
 }  
 .tabs .edit {  
     display: grid;  
     grid-template-columns: repeat(1, 1fr)!important;  
     grid-gap: 1rem;  
     align-items: center;  
     justify-content: center;  
     text-align: center;  
 }  
 .tabs p {  
      font-size: 1.2rem;  
      padding-top: 0.5rem;  
 }  
 .tabs .container > div:hover {  
      color: #fff;  
      background-color: #454545;
      cursor: pointer;  
 }  
 .tab-border {  
      box-shadow: inset 0 -4px 0 red;
 }  
 /* Tab Content */  
 .tab-content {  
      padding: 3rem 0;  
      height: 100%;
      background: linear-gradient(to bottom, rgb(40 38 38) 0%, rgba(0,0,0,0) 100%);
      color: #fff;  
 }  
 /* Hide initial content */  
 #showstab-content,  
 #addtab-content,  
 #tab-3-content {  
      display: none;  
      opacity: 0;  
 }  
 .show {  
      display: block !important;  
      opacity: 1 !important;  
      transition: all 1000 ease-in;  
 }  
 #showstab-content .showstab-content-inner {  
      display: grid;  
      grid-template-columns: repeat(2, 1fr);  
      grid-gap: 2rem;  
      align-items: center;  
      justify-content: center;  
 }  
 #addtab-content .addtab-content-top {  
      display: grid;  
      grid-template-columns: 2fr 1fr;  
      grid-gap: 1rem;  
      justify-content: center;  
      align-items: center;  
 }  
 #addtab-content .addtab-content-bottom {  
      margin-top: 2rem;  
      display: grid;  
      grid-template-columns: repeat(3, 1fr);  
      grid-gap: 2rem;  
      text-align: center;  
 }  
 .table {  
      width: 100%;  
      margin-top: 2rem;  
      border-collapse: collapse;  
      border-spacing: 0;  
 }  
 .table thead th {  
      text-transform: uppercase;  
      padding: 0.8rem;  
 }  
 .table tbody {  
      display: table-row-group;  
      vertical-align: middle;  
      border-color: inherit;  
 }  
 .table tbody tr td {  
      color: #999;  
      padding: 0.8rem 1.2rem;  
      text-align: center;  
 }  
 .table tbody tr td:first-child {  
      text-align: left;  
 }  
 .table tbody tr:nth-child(odd) {  
      background: #222;  
 }  
 .footer {  
      max-width: 70%;  
      margin: 1rem auto;  
      overflow: auto;  
 }  
 .footer,  
 .footer a {  
      color: #999;  
      font-size: 0.9rem;  
 }  
 .footer p {  
      margin-bottom: 1.5rem;  
 }  
 .footer .footer-cols {  
      display: grid;  
      grid-template-columns: repeat(4, 1fr);  
      grid-gap: 2rem;  
 }  
 .footer li {  
      line-height: 1.9;  
 }  
 .footer .lang-select {  
      margin-top: 2rem;  
      color: #999;  
      background-color: #000;  
      background-image: none;  
      border: 1px solid #333;  
      padding: 1rem 1.2rem;  
      border-radius: 5px;  
 }  
 /* Container */  
 .container {  
      max-width: 70%;  
      margin: auto;  
      overflow: hidden;  
      padding: 0 2rem;  
 }  
 /* Text Styles */  
 .text-xl {  
      font-size: 2rem;  
 }  
 .text-lg {  
      font-size: 1.8rem;  
      margin-bottom: 1rem;  
 }  
 .text-md {  
      margin-bottom: 1.5rem;  
      font-size: 1.2rem;  
 }  
 .text-center {  
      text-align: center;  
 }  
 .text-dark {  
      color: #999;  
 }  
 /* Buttons */  
 .btn {  
      display: inline-block;  
      background: var(--primary-color);  
      color: #fff;  
      padding: 0.4rem 1.3rem;  
      font-size: 1rem;  
      text-align: center;  
      border: none;  
      cursor: pointer;  
      margin-right: 0.5rem;  
      transition: opacity 0.2s ease-in;  
      outline: none;  
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);  
      border-radius: 2px;  
 }  
 .btn:hover {  
      opacity: 0.9;  
 }  
 .btn-rounded {  
      border-radius: 5px;  
 }  
 .btn-xl {  
      font-size: 2rem;  
      padding: 1.5rem 2.1rem;  
      text-transform: uppercase;  
 }  
 .btn-lg {  
      font-size: 1rem;  
      padding: 0.8rem 1.3rem;  
      text-transform: uppercase;  
 }  
 .btn-icon {  
      margin-left: 1rem;  
 }  
 @media (max-width: 960px) {  
           .showcase {  
           height: 70vh;  
      }  
      .hide-sm {  
           display: none;  
      }  
      .showcase-top img {  
           top: 30%;  
           left: 5%;  
           transform: translate(0);  
      }  
      .showcase-content h1 {  
           font-size: 3.7rem;  
           line-height: 1;  
      }  
      .showcase-content p {  
           font-size: 1.5rem;  
      }  
      .footer .footer-cols {  
           grid-template-columns: repeat(2, 1fr);  
      }  
      .btn-xl {  
           font-size: 1.5rem;  
           padding: 1.4rem 2rem;  
           text-transform: uppercase;  
      }  
      .text-xl {  
           font-size: 1.5rem;  
      }  
      .text-lg {  
           font-size: 1.3rem;  
           margin-bottom: 1rem;  
      }  
      .text-md {  
           margin-bottom: 1rem;  
           font-size: 1.2rem;  
      }  
 }  
 @media (max-width: 700px) {  
      .showcase::after {  
           background: rgba(0, 0, 0, 0.6);  
           box-shadow: inset 80px 80px 150px #000000, inset -80px -80px 150px #000000;  
      }  
      .showcase-content h1 {  
           font-size: 2.5rem;  
           line-height: 1;  
      }  
      .showcase-content p {  
           font-size: 1rem;  
      }  
      #showstab-content .showstab-content-inner {  
           grid-template-columns: 1fr;  
           text-align: center;  
      }  
      #addtab-content .addtab-content-top {  
           display: block;  
           text-align: center;  
      }  
      #addtab-content .addtab-content-bottom {  
           margin-top: 2rem;  
           display: grid;  
           grid-template-columns: 1fr;  
           grid-gap: 2rem;  
           text-align: center;  
      }  
      .btn-xl {  
           font-size: 1rem;  
           padding: 1.2rem 1.6rem;  
           text-transform: uppercase;  
      }  
 }  
 @media(max-height: 600px) {  
  .showcase-content {  
      margin-top: 3rem;  
 }  
 }  

/* Carousel */
.contain {
  width: 100%;
}
.row {
  overflow-x: scroll;
  width: 100%;
}
.row__inner {
  padding-left: 100px;
  padding-right: 100px;
  transition: 450ms transform;
  font-size: 0;
  white-space: nowrap;
  margin: 70px 0;
  padding-bottom: 10px;
}
.tile {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 140.625px;
  margin-right: 10px;
  font-size: 20px;
  cursor: pointer;
  transition: 450ms all;
  transform-origin: center left;
}
.tile__img {
  width: 250px;
  height: 140.625px;
  -o-object-fit: cover;
     object-fit: cover;
}
.tile__details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  font-size: 10px;
  opacity: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
  transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: #000;
}

.tile__details:before {
  content: 'CLICK TO EDIT';
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 10px;
  text-anchor: middle;
  text-align: center;
  z-index: 2;
}
.tile:hover .tile__details {
  opacity: 1;
}
.tile__title {
  position: absolute;
  bottom: 0;
  padding: 10px;
}
.row__inner:hover {
  transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
  opacity: 0.3;
}
.row__inner:hover .tile:hover {
  transform: scale(1.5);
  opacity: 1;
}
.tile:hover ~ .tile {
  transform: translate3d(125px, 0, 0);
}

.category-title {
	    /* width: 100%; */
	     position: absolute; 
	    padding-left: 100px;
	    font-size: 1.3rem;
	    /* height: 100%; */
	    font-family: 'NetflixSans Bold', sans-serif;
	    font-weight: bold;
	    /* z-index: 10; */
	    margin-top: 40px;
}

/* Drag & Drop */
.the-box {
  height: 250px;
  border: 2px solid #c6c6c6;
  border-style: dashed;
  transition: border-color 1s;
  display: grid;
  justify-content: center;
}
.the-box img {
  height: 100%;
}

input {
    width: 100%;
    font-size: 1.5rem;
    font-family: 'NetflixSans Light';
    font-weight: bold;
    color: white;
    background-color: #242424;
    border-color: #8a8a8a;
    /* border: solid 5px; */
    margin-bottom: 10px;
     padding: 10px;
}
textarea {
     padding: 10px;
    width: 100%;
    height: 11.5rem;
    font-size: 1rem;
    font-family: 'NetflixSans Light';
    color: white;
    background-color: #242424;
    border-color: #8a8a8a;
    /* border: solid 5px; */
    margin-bottom: 10px;
}

#watch {
     color: #e83f33;
     font-size: 200%;
     font-family: NetflixSans Bold;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
}

.toggle-handle {
    background: #ab0000!important;
}
.toggle-on {
    background: #f38275!important;
}