@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap');
:root {
  --swiper-theme-color: #fff!important;
}
:root {
  --main-bg: 18, 24, 43;
  --main-color: 97, 121, 189; 
  --main-black: 23, 29, 41;
  --main-white: 183, 194, 225;
  --second-color : 48, 61, 79;


  --main-purple: 0, 81, 243;
  --main-pink: 0, 81, 243;


  --tran-03: all 0.2s ease;
  --tran-03: all 0.3s ease;
  --tran-04: all 0.3s ease;
  --tran-05: all 0.3s ease;
  --body-color: #18191a;
  --sidebar-color: #242526;
  --primary-color: #3a3b3c;
  --primary-color-light: #3a3b3c;
  --toggle-color: #fff;
  --text-color: #ccc;
}
html{
 overflow-x: hidden;
}
body{
  width: 100%;
  height: 100%;
  background-color: #090e17!important;
  font-family: "Quicksand"!important;
  font-weight: 600!important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow-x: hidden; -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow-x: hidden;

}
.select-menu {
  --background: #242836;
  --text: #fff;
  --icon: #fff;
  --icon-active: #3F4656;
  --list: #1C212E;
  --list-text: rgba(255, 255, 255, .2);
  --list-text-hover: rgba(255, 255, 255, .5);
  position: relative;
  z-index: 1;
  font-weight: 500;
  font-size: 14px;
  line-height: 25px;
  margin-bottom: 10px;
}
.select-menu select,
.select-menu .button {
  font-family: inherit;
  margin: 0;
  border: 0;
  text-align: left;
  text-transform: none;
  -webkit-appearance: none;
}
.widget-visible{
  display: none;
}

.select-menu select {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  opacity: 0;
  padding: 8px 36px 8px 12px;
  visibility: hidden;
  font-weight: 500;
  font-size: 14px;
  line-height: 25px;
}
#kullanici_islem{
  font-size: 14px;
  display:flex;justify-content: center;align-items: center;padding: 10px 10px 10px 10px;BORDER: 1PX SOLID rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    box-shadow: 0 30px 75px -35px rgba(35,68,126,.39);margin-bottom: 10px;
}
#kullanici_islem:hover{
      background: #272e69;
    color: #fff;
}
.select-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  right: 0;
  transform: translateY(var(--t));
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.select-menu ul li:nth-child(1) {
  padding: 13px 10px;
  cursor: pointer;
}
.select-menu ul li:nth-child(2) {
  padding: 5px 10px;
  cursor: pointer;
}
.select-menu ul li:nth-child(3) {
  padding: 10px 10px;
  cursor: pointer;
}
.select-menu > ul {
  background: var(--list);
  color: var(--list-text);
  border-radius: 6px;
}
.select-menu > ul li {
  transition: color 0.3s ease;
}
.select-menu > ul li:hover {
  color: var(--list-text-hover);
}
.select-menu .button {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  z-index: 1;
  width: 150px;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  color: var(--text);
  background: var(--background);
}
.select-menu .button em {
  --r: 45deg;
  display: block;
  position: absolute;
  right: 12px;
  top: 0;
  width: 7px;
  height: 7px;
  margin-top: 13px;
  -webkit-backface-visibility: hidden;
}
.select-menu .button em:before, .select-menu .button em:after {
  --o: .4;
  content: "";
  width: 7px;
  height: 7px;
  opacity: var(--o);
  display: block;
  position: relative;
  transition: opacity 0.2s ease;
  transform: rotate(var(--r)) scale(0.75);
}
.select-menu .button em:before {
  border-left: 2px solid var(--icon);
  border-top: 2px solid var(--icon);
  top: 5px;
}
.select-menu .button em:after {
  border-right: 2px solid var(--icon);
  border-bottom: 2px solid var(--icon);
  bottom: -5px;
}
.select-menu:not(.open) > ul {
  opacity: 0;
  pointer-events: none;
}
.select-menu.open.tilt-up {
  -webkit-animation: tilt-up 0.4s linear forwards;
          animation: tilt-up 0.4s linear forwards;
}
.select-menu.open.tilt-up .button em:before {
  --o: 1;
}
.select-menu.open.tilt-down {
  -webkit-animation: tilt-down 0.4s linear forwards;
          animation: tilt-down 0.4s linear forwards;
}
.select-menu.open.tilt-down .button em:after {
  --o: 1;
}

@-webkit-keyframes tilt-up {
  40%, 60% {
    transform: perspective(500px) rotateX(8deg);
  }
}

@keyframes tilt-up {
  40%, 60% {
    transform: perspective(500px) rotateX(8deg);
  }
}
@-webkit-keyframes tilt-down {
  40%, 60% {
    transform: perspective(500px) rotateX(-8deg);
  }
}
@keyframes tilt-down {
  40%, 60% {
    transform: perspective(500px) rotateX(-8deg);
  }
}
.spin_div{
background: #1D253A;
background: conic-gradient(from 45deg, #1D253A, #12151f);
padding: 30px;border-radius: 10px;box-shadow: 0 10px 20px rgba(0,0,0,0.6);
}
.spin_title{
  color:#fff;font-family: 'Quicksand', sans-serif;
}
.spin_info {
  color: #fff;font-family: 'Quicksand', sans-serif;margin-top: 10px;margin-bottom: 30px;
}
.spin_detail{
  color:#fff;
  font-size: 14px;
}
.spin_buttons{
  background: linear-gradient(
    60deg, rgb(var(--main-pink)) 0%, rgb(var(--main-purple)) 100%);padding: 5px;color: #fff;text-align: center;
  border-radius: 30px;cursor: pointer;
width: 100%;
    outline: none;
    border: 0;

}
.blue_box{
background: linear-gradient(90deg, rgba(3,100,172,1) 0%, rgba(0,212,255,1) 100%);
    padding: 40px 20px 40px 20px;
    border-radius: 15px;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-content: flex-end;
    align-items: center;
}

img{
  object-fit: cover;
  filter: saturate(1.5)!important;
}
::-webkit-scrollbar{
  width: 5px;
  height: 6px;
}
::-webkit-scrollbar-thumb{
  background: #252a38;
  border-radius: 30px;
}
::-webkit-scrollbar-thumb:hover{
  background: #B3AFB3;
}
::-webkit-scrollbar-track{
  background: transparent;
  border-radius: 0px;
  box-shadow: inset 0px 0px 0px 0px #F0F0F0;
}
#more_result{
  margin: 0 auto;
  position: relative;
  width: 250px;
  background: black;
  padding: 20px 30px 5px 30px;
  color: #fff;
  border-radius: 5px;
  background: rgb(var(--main-purple));
  background: linear-gradient(90deg, rgba(var(--main-purple),1) 0%, rgba(var(--main-pink),1) 100%);
  cursor: pointer;
  text-align: center;
  transition: 250ms;
}
#more_result:hover{
  transform: scale(0.96);
}
#more_result:active{
  opacity: 0.5;
  transform: scale(0.86);
}
#goster{
  color:#fff;font-size: 25px;margin-top: 4%;cursor: pointer;opacity: 0.7;margin-bottom: 5%;
}
#gizle{
  color:#fff;font-size: 25px;margin-top: 4%;cursor: pointer;opacity: 0.7;margin-bottom: 5%;
}
#load_comment{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
#yeni_uyelik{
  display: inline-block;float: left;cursor: pointer;
}
#yeni_uyelik a{
  color:#fff;text-align: center;
}
#yeni_uyelik a div{
  text-align: center;font-size: 15px;border-radius: 50%;
  background:rgb(var(--main-purple));padding: 10px 15px 10px 15px;border: 3px solid rgba(255,255,255,0.3);
}
#install-app{
  position: fixed;
  top: 10%;  
  left: 50%;
  transform: translate(-50%, -50%);
}
#install-app a{
  display: flex; height: 40px; display: flex; align-items: center; 
  justify-content: center; font-size: 15px; font-weight: 600; 
  border-radius: 4px; color: #fff; background: rgb(var(--main-purple));
  width: 50%;width: 300px;
}
#log_div .container{
  margin-top: 10%;margin-left: auto!important;z-index: 9999999;
}
#ac-login{
  z-index: 9999999;cursor: pointer;
}
#name_movie{
  color:#fff;font-size: 25px;font-style: italic;display: none;
}
.misafir{
  display: inline-block;float: right;
}
.misafir a{
  color:#fff;text-align: center;
}
.misafir a div{
  text-align: center;font-size: 12px;border-radius: 50%;
  background:rgb(var(--main-purple));padding: 7px;border: 3px solid rgba(255,255,255,0.3);
}
#load_search{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
#search_movie_name{
  margin: 0;
  width: 100%;

}
#search_area{
  position: fixed;left:0;top:0;transform: translate(200%,0);
  background:#090e17;
  display: none;
  width: 100%;height: 100%;
  z-index: 99999999999999;
  transition: 500ms transform;
  will-change: transform;
}

#ekle__:before {
  background: #12151f;
  border: 2px solid rgba(255,255,255,0.1);
  width: 40px;
  height: 40px;
  content: '+';
  font: 27px "quicksand", sans-serif;
  color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}
#ekle__:hover:before{
  background: rgba(var(--main-purple),1);
}
input#ekle__[type=checkbox][disabled]:before{
  content: '✓';
  font-size: 25px;
}
input#ekle__[type=checkbox][disabled] {
  opacity: 0.3;
}
.ekle__:before {
  background: #12151f;
  border: 2px solid rgba(255,255,255,0.1);
  width: 40px;
  height: 40px;
  content: '+';
  font: 27px "quicksand", sans-serif;
  color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  font-weight: bold;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}
.ekle__:hover:before{
  background: rgba(var(--main-purple),1);
}
input.ekle__[type=checkbox][disabled]:before{
  content: '✔';
  font-size: 25px;
}
input.ekle__[type=checkbox][disabled] {
  opacity: 0.3;
}
.middle {
  position: relative;
  width: 100%;
  margin-bottom: 30px;
}

.slider {
  position: relative;
  z-index: 1;
  height: 3px;
  margin: 0 15px;
}
.slider > .track {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background-color: #c6aee7;
}
.slider > .range {
  position: absolute;
  z-index: 2;
  left: 25%;
  right: 25%;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background-color: rgb(var(--main-purple));
}
.slider > .thumb2 {
  position: absolute;
  z-index: 3;
  width: 20px;
  height: 20px;
  background-color: rgb(var(--main-purple));
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(98,0,238,.1);
  transition: box-shadow .3s ease-in-out;
}
.slider > .thumb2.left {
  left: 25%;
  transform: translate(-15px, -10px);
}
.slider > .thumb2.right {
  right: 25%;
  transform: translate(15px, -10px);
}
.slider > .thumb2.hover {
  box-shadow: 0 0 0 10px rgba(var(--main-purple),.2);
}
.slider > .thumb2.active {
  box-shadow: 0 0 0 20px rgba(var(--main-purple),.2);
}

input[type=range] {
  position: absolute;
  pointer-events: none;
  -webkit-appearance: none;
  z-index: 2;
  height: 10px;
  width: 100%;
  opacity: 0;
}
input[type=range]::-webkit-slider-thumb {
  pointer-events: all;
  width: 30px;
  height: 30px;
  border-radius: 0;
  border: 0 none;
  background-color: red;
  -webkit-appearance: none;
}





.slider2 {
  position: relative;
  z-index: 1;
  height: 3px;
  margin: 0 15px;
}
.slider2 > .track2 {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background-color: #c6aee7;
}
.slider2 > .range2 {
  position: absolute;
  z-index: 2;
  left: 25%;
  right: 25%;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background-color: rgb(var(--main-purple));
}
.slider2 > .thumb2 {
  position: absolute;
  z-index: 3;
  width: 20px;
  height: 20px;
  background-color: rgb(var(--main-purple));
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(98,0,238,.1);
  transition: box-shadow .3s ease-in-out;
}
.slider2 > .thumb2.left2 {
  left: 25%;
  transform: translate(-15px, -10px);
}
.slider2 > .thumb2.right2 {
  right: 25%;
  transform: translate(15px, -10px);
}
.slider2 > .thumb2.hover2 {
  box-shadow: 0 0 0 10px rgba(var(--main-purple),.1);
}
.slider2 > .thumb2.active2 {
  box-shadow: 0 0 0 20px rgba(var(--main-purple),.2);
}

.icon_title{
  color: rgb(var(--main-purple))!important;
}

.youtube-link {
  position: fixed;
  left: 20px;
  bottom: 20px;
  color: #000;
  text-decoration: none;
  font-size: 12px;
}
#check_div{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 20px;
}

#ekle__{

}

#list_scroll{
  width:100%;
  display:block;
  margin:0;
  padding:20px;
  max-height:420px;
  overflow-y: scroll;
}
#search_date{
  display: flex;
  align-items: center;
  width: 100%;
  align-content: flex-end;
  justify-content: flex-end;
  margin: 0;
  font-size: 13px;
}
.lds-grid {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-grid div {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgb(var(--main-pink));
  animation: lds-grid 1.2s linear infinite;
}
.lds-grid div:nth-child(1) {
  top: 8px;
  left: 8px;
  animation-delay: 0s;
}
.lds-grid div:nth-child(2) {
  top: 8px;
  left: 32px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(3) {
  top: 8px;
  left: 56px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(4) {
  top: 32px;
  left: 8px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(5) {
  top: 32px;
  left: 32px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(6) {
  top: 32px;
  left: 56px;
  animation-delay: -1.2s;
}
.lds-grid div:nth-child(7) {
  top: 56px;
  left: 8px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(8) {
  top: 56px;
  left: 32px;
  animation-delay: -1.2s;
}
.lds-grid div:nth-child(9) {
  top: 56px;
  left: 56px;
  animation-delay: -1.6s;
}
@keyframes lds-grid {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.lds-spinner {
  color: official;
  display: inline-block;
  position: relative;
  width: 50px;
  height: 50px;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 37px;
  width: 6px;
  height: 18px;
  border-radius: 20%;
  background: rgb(var(--main-pink));
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

.circle-chart{
  background: #12151f;
  border-radius: 50%;
}
.circle-chart__circle {
  animation: circle-chart-fill 2s reverse; /* 1 */ 
  transform: rotate(-90deg); /* 2, 3 */
  transform-origin: center; /* 4 */
}

.circle-chart__circle--negative {
  transform: rotate(-90deg) scale(1,-1); /* 1, 2, 3 */
}

.circle-chart__info {
  -webkit-animation: circle-chart-appear 2s forwards;
  animation: circle-chart-appear 2s forwards;
  opacity: 0;
  transform: translateY(0.3em);
}

@-webkit-keyframes circle-chart-fill {
  to { stroke-dasharray: 0 100; }
}

@keyframes circle-chart-fill {
  to { stroke-dasharray: 0 100; }
}

@-webkit-keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.circle-chart__percent{
  font-weight: bold;
  fill: #fff;
  font-family: "quicksand";
}
#chart_main{
  position: absolute;
  bottom: -15%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.collect_link{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #fff!important;
  width: 100%;
}

#search_result,#result2,#result3{
  padding: 0px;
}
#search_result li a,#result2 li a,#result3 li a{
  padding: 10px 20px;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  justify-content: stretch;
  align-items: center;
  transition: 150ms;
  cursor: pointer;
}
#search_result li a:hover,#result2 li a:hover,#result3 li a:hover{
  background: rgba(255,255,255,0.05);
  padding-left: 40px;
}
#search_result li span img,#result2 li span img,#result3 li span img{
  width: 20px;
  height: 20px;
  border-radius: 0px;
  margin-right: 15px;
  margin-left: 15px;
}
#search_result li span .imag,#result2 li span .imag,#result3 li span .imag{
  width: 45px;
  height: 45px;
  min-width: 45px;
  min-height: 45px;
  border-radius: 50%;
  margin-right: 15px;
  margin-left:0px;

}

.swiper-button-next#genre:after, .swiper-button-prev#genre:after{
  font-size: 20px!important;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next{
  left: 10px!important;
  color: #fff!important;;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev{
  right: 20px!important;
  color: #fff!important;;
}
.title_all{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  color: #f2f2f2;
  align-items: center;
  gap: 20px;
  font-size: 25px;
  margin-bottom: 40px;
  margin-top: 40px;
  font-family: 'Quicksand', sans-serif;
  text-transform: capitalize;
}
.list_buttons{
    background: #060d17;
    color: rgba(var(--main-purple));
    border-radius: 20px;
    padding: 10px 15px;
    float: right;
    font-size: 15px;
    cursor: pointer;
    margin-right: 2%;
    margin-bottom: 10px;
    width: 130px;
    height: auto;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 250ms;
}
.list_buttons:hover{
  background: rgba(var(--main-purple));
  color: #000;
}

#offline_ac2{
 position: absolute;
 top: 50%; 
 left: 50%;

 transform: translate(-50%, -50%); 
 color: #fff;
 z-index: 99999;
 width: 80%;
}
#offline_ac{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(18, 21, 31,0.9);
  z-index: 9;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
  justify-content: center;
  flex-wrap: nowrap;
}
.pagination li{
  width: 50px;
  height: 50px;
  position: relative;
  background: rgba(255,255,255,0.1);
  padding: 14px 20px;
  margin-right: 10px;
  border-radius: 50%;
}
.pagination li:hover{

  background: rgba(255,255,255,0.3);
}
.pagination li a{
  color: rgba(255,255,255,0.8);
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
}
.pagination li a:hover{
  color: rgba(255,255,255,1);
}
.pagination li.active{
  opacity: 0.5;
}
#kayittan-giris{
  display: inline-block;float: left;cursor: pointer;
}
#kayittan-giris a{
  color:#fff;text-align: center;
}
#kayittan-giris a div{
text-align: center;font-size: 15px;border-radius: 50%;
  background:rgb(var(--main-purple));padding: 10px 15px 10px 15px;border: 3px solid rgba(255,255,255,0.3);  }

#info_collect{
  color: #fff;
  margin-bottom: 25px;
  margin-top: 25px;
  font-family: "Quicksand";
}
.capitalize{
  text-transform: capitalize!important;
}
#info_collect h1{
  font-size: 2.4em;
  font-family: arial;
  font-weight: bold;
  margin-bottom: 25px;
  text-transform: uppercase;
}
.info_who_collect{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex: 1 1 auto;
  margin: 0px;
  width: 100%;
  flex-wrap: wrap;
}
.info_who_collect img{
  margin-bottom: 25px;
}
.info_who_collect p{
  padding-left: 15px;
  padding-right: 15px;
  text-transform: lowercase;
  font-weight: 600;
  font-size: 1em;
  line-height: 1.5em;
}
a{
  color: #fff;
}
a:hover{
  color: #fff;
}
#baglan{
 font-family: 'Quicksand', sans-serif;
 font-size: 25px;text-align: center;
 color: #fff;
}
#baglan2{
  font-family: 'Quicksand', sans-serif;
  font-size: 18px;text-align: center;
  color: rgba(255,255,255,0.7);
}
#offline_img{
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.title_all:before, .title_all:after{
  content: '';
  height: 1px;
  flex: 1;
  background-image: linear-gradient(var(--position,to right), transparent, rgba(255,255,255,0.3));
}
.title_all:after{
  --position: to left;
}
.tur_ekle_cikar{
 font-size: 15px;
 background: rgb(var(--main-purple));color: #fFf;
 padding: 10px 20px 10px 20px;
 width: 100%;text-align: center;
 margin-bottom: 40px;
 border-radius: 50px;cursor: pointer;display: inline-block;z-index: 999999999;
 transition: 300ms;
}
.tur_ekle_cikar:hover{
  opacity: 0.7;
  transform: scale(0.95);
}
#turler_div{
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size:  15px;
  padding: 5px 20px 5px 20px;
  border-radius: 30px;
  transition: 500ms;
  text-align: center;
}
#turler_div:hover{
  background-color: rgba(255, 255, 255, 0.1);
  transform: scale(0.95);
}
#turler_div.active{
  background-color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #000;
  font-size:  15px;
  padding: 5px 20px 5px 20px;
  border-radius: 16px;
}

.guest{
  transition: 250ms;
}
.guest:active{
  transform: scale(0.6);
}
.guest:hover{
  transform: scale(0.9);
}
.owl-next{
      opacity: 1;
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translate(0%,-60%);
    font-size: 80px;
    color: #fff;
    z-index: 999999;
  }
  .owl-prev{
      opacity: 1;
    position: absolute;
    left: 2%;
    top: 50%;
    transform: translate(0%,-60%);
    font-size: 80px;
    color: #fff;
    z-index: 999999;
}
.owl-tur .owl-next{
      opacity: 1;
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translate(0%,-75%);
    font-size: 80px;
    color: #fff;
    z-index: 999999;
  }
  .owl-tur .owl-prev{
      opacity: 1;
    position: absolute;
    left: 2%;
    top: 50%;
    transform: translate(0%,-75%);
    font-size: 80px;
    color: #fff;
    z-index: 999999;
}
.owl-prev span, .owl-next span{
  font-size: 80px;
  color: #fff;
}
.owl-tur .owl-next span,.owl-tur .owl-prev span{
  font-size: 40px;
}
#bottom_menu .nav {
  position: fixed;
  bottom: -2%;
  width: 95%;
  height: 75px;
  background-color: rgba(18, 21, 31,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  overflow-x: auto;
  left: 50%;
  z-index: 99999999;
  border-radius: 50px;
  margin: 0 auto;
  transform: translate(-50%,-50%);
}
.liquidGlass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  filter: url(#glass-distortion);
  overflow: hidden;
  isolation: isolate;
}
#myVideo {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
 -o-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -webkit-transform: translateX(-50%) translateY(-50%);
 display: block;
 min-height: 140%;
 min-width: 100%;
 width: auto;
 height: auto;
 -moz-object-fit: cover;
 -webkit-object-fit: cover;
 object-fit: cover;
 filter: blur(2.5px) sepia(1) opacity(0.05) hue-rotate(600deg) saturate(2);
 -webkit-filter: blur(2.5px) sepia(1) opacity(0.05) hue-rotate(600deg) saturate(2);
}

#bottom_menu img{
  border-radius: 0px!important;
}
.vjs-poster img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover!important;
    object-fit: cover!important;
    object-position: center;
}
#bottom_menu .nav__link .active{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999999999;
  -webkit-box-shadow:inset 0 -10px 15px -10px rgba(255,255,255,0.5);
  -moz-box-shadow:inset 0 -10px 15px -10px rgba(255,255,255,0.5);
  box-shadow:inset 0 -10px 15px -10px rgba(255,255,255,0.5);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: rgba(255,255,255,0.82);
}

#bottom_menu .nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  min-width: 50px;
  overflow: hidden;
  white-space: nowrap;
  font-family: sans-serif;
  margin-bottom: 1%;z-index: 99999999;
  font-size: 24px;
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.1s ease-in-out;
}

#bottom_menu .nav__link--active {
  color: #009578;
}

#bottom_menu .nav__icon {
  font-size: 18px;
}
.blog-slider {
  position: relative;
  margin: auto;
  background: transparent;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  padding: 25px;
  border-radius: 25px;
  height: 400px;
  transition: all 0.3s;
}
@media screen and (max-width: 992px) {
  .blog-slider {
    max-width: 680px;
    height: 400px;
  }
  .grid-main{
    grid-template-columns: 50% 50%!important;
  }
  .list_buttons{
    width: 48%;
  }
}
@media screen and (max-width: 768px) {
  .blog-slider {
    min-height: 500px;
    height: auto;
    margin: 180px auto;
  }
}
@media screen and (max-height: 500px) and (min-width: 992px) {
  .blog-slider {
    height: 350px;
  }
}
.blog-slider__item {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .blog-slider__item {
    flex-direction: column;
  }
}
.blog-slider__item.swiper-slide-active .blog-slider__img img {
  opacity: 1;
  transition-delay: 0.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > * {
  opacity: 1;
  transform: none;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) {
  transition-delay: 0.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) {
  transition-delay: 0.4s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) {
  transition-delay: 0.5s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4) {
  transition-delay: 0.6s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) {
  transition-delay: 0.7s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) {
  transition-delay: 0.8s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) {
  transition-delay: 0.9s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) {
  transition-delay: 1s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) {
  transition-delay: 1.1s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) {
  transition-delay: 1.2s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) {
  transition-delay: 1.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) {
  transition-delay: 1.4s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) {
  transition-delay: 1.5s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) {
  transition-delay: 1.6s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) {
  transition-delay: 1.7s;
}
.blog-slider__img {
  width: 300px;
  flex-shrink: 0;
  height: 300px;
  background-image: linear-gradient(147deg, rgb(var(--main-purple)) 0%, rgb(var(--main-pink)) 74%);
  box-shadow: 4px 13px 30px 1px rgba(var(--main-purple), 0.2);
  border-radius: 20px;
  transform: translateX(-80px);
  overflow: hidden;
}
.blog-slider__img:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(147deg, rgb(var(--main-purple)) 0%, rgb(var(--main-pink)) 74%);
  border-radius: 20px;
  opacity: 0.8;
}
.blog-slider__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  border-radius: 20px;
  transition: all 0.3s;
}
@media screen and (max-width: 768px) {
  .blog-slider__img {
    transform: translateY(-50%);
    width: 90%;
  }
}
@media screen and (max-width: 576px) {
  .blog-slider__img {
    width: 95%;
  }
}
@media screen and (max-height: 500px) and (min-width: 992px) {
  .blog-slider__img {
    height: 270px;
  }
}
.blog-slider__content {
  padding-right: 25px;
}
@media screen and (max-width: 768px) {
  .blog-slider__content {
    margin-top: -80px;
    text-align: center;
    padding: 0 30px;
  }
}

.blog-slider__content > * {
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.4s;
}
.blog-slider__code {
  color: #7b7992;
  margin-bottom: 15px;
  display: block;
  font-weight: 500;
}
.blog-slider__title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}
.blog-slider__text {
  color: #fff;
  margin-bottom: 30px;
  line-height: 1.5em;
}
.blog-slider__button {
  display: inline-flex;
  background-image: linear-gradient(147deg, rgb(var(--main-purple)) 0%, rgb(var(--main-pink)) 74%);
  padding: 15px 35px;
  border-radius: 50px;
  color: #fff;
  box-shadow: 0px 14px 80px rgba(var(--main-purple), 0.4);
  text-decoration: none;
  font-weight: 500;
  justify-content: center;
  text-align: center;
  letter-spacing: 1px;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
  margin-top: 10px!important;
}
@media screen and (max-width: 576px) {
 .blog-slider__content{
  height: 500px!important;
}
}
.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%;
}
.blog-slider__pagination {
  position: absolute;
  z-index: 21;
  right: 40px;
  width: 11px !important;
  text-align: center;
  left: auto !important;
  top: 50%;
  bottom: auto !important;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .blog-slider__pagination {
    transform: translateX(-50%);
    left: 50% !important;
    top: 205px;
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 8px 0;
}
@media screen and (max-width: 768px) {
  .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
  }
}
.blog-slider__pagination .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  display: block;
  border-radius: 10px;
  background: #fff;
  opacity: 1;
  transition: all 0.3s;
}
.blog-slider__pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: rgb(var(--main-pink));
  height: 30px;
  box-shadow: 0px 0px 20px rgba(252, 56, 56, 0.3);
}
@media screen and (max-width: 768px) {
  .blog-slider__pagination .swiper-pagination-bullet-active {
    height: 11px;
    width: 30px;
  }
}
.changee{
  background-position: center!important;
  background-repeat: no-repeat!important;
  background-size: cover!important;
  transition: background .5s;
}
.container, .row,.col-md-3,.col-md-6,.col-md-2,.col-md-8{
}
/*body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(https://www.visqo.online/graph/wall.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }*/
  body#light{
    background: #fff!important;
  }
  body #main_backdrop{
    opacity: 0.35!important;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 50%);
    mask-image: linear-gradient(to top, transparent 0%, black 50%);
    filter: saturate(1.5);
    height: 100%;
    background-size: cover!important;
    background-position: center;
    background-repeat: no-repeat;
    position:absolute;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    z-index:0;
  }
  body #desktop_menu{
    background: transparent;
    height: 90%;
    top: 5%;
    left: 1%;
    opacity: 0.6;
    transition:500ms;
    cursor: pointer;
  }
   body #desktop_menu:hover{
    opacity: 1;
   }
  body #tum_zamanlar{

  }
  body #tum_zamanlar #text-little{
    color: #aeabcf;
    
  }
  .turler_hover{
    background: rgba(var(--second-color),0.7);
    padding: 5px 20px 5px 20px;
    border-radius: 30px;
    font-size: 16px;
    margin-right: 5px;
    text-align: center;
    transition: 200ms;
    margin-bottom: 10px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
  }
  .turler_hover:hover{
   background: rgba(var(--main-purple),0.7);
   color: #fff;
   box-shadow:  0 0 10px rgba(255,255,255,0.5);
  }
  .grad-right{
   -webkit-mask-image: linear-gradient(to left, transparent 0%, black 5%);
   mask-image: linear-gradient(to left, transparent 0%, black 5%);
 }
 .backdrop_mask{
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 0%);height: 100%;width: 100%;
  mask-image: linear-gradient(to top, transparent 0%, black 0%);
}
#info_main{
  background-size: cover;background-repeat: no-repeat;
  background-position: center;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 0%);
  height: 100%;width: 100%;
  mask-image: linear-gradient(to top, transparent 0%, black 0%);background-attachment: fixed;
}
#newest_info{
  background:#12151c;padding:0px;
  border-radius: 10px;border:1px solid rgba(255,255,255,0.05)
}
.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 250px;
  padding: 10px 14px;

  transition: var(--tran-05);
  z-index: 100;  
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: rgba(0,0,0,0.2);
}
.sidebar.close{
  width: 90px;
}
#newest{
  transition: 250ms;
}
#newest img{
  object-position:center;
  transition: 500ms;
}
#newest:hover img{
 object-position:top;
}
/* ===== Reusable code - Here ===== */
.sidebar li{
  height: 50px;
  width: 50px;
  list-style: none;
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.sidebar header .image,
.sidebar .icon{
  min-width: 60px;
  border-radius: 6px;
}

.sidebar .icon{
  min-width: 60px;
  border-radius: 6px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.sidebar .text,
.sidebar .icon{
  color: var(--text-color);
  transition: var(--tran-03);
}

.sidebar .text{
  font-size: 15px;
  font-weight: normal;
  white-space: nowrap;
  opacity: 1;
  padding-left: 20px;
  color: #fff;
  font-family: "quicksand"!important;
}
.sidebar.close .text{
  opacity: 0;
}
/* =========================== */

.sidebar header{
  position: relative;
}

.sidebar header .image-text{
  display: flex;
  align-items: center;
}
.sidebar header .logo-text{
  display: flex;
  flex-direction: column;
}
header .image-text .name {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 600;
}

header .image-text .profession{
  font-size: 16px;
  margin-top: -2px;
  display: block;
}

.sidebar header .image{
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar header .image img{
  width: 40px;
  border-radius: 6px;
}

.sidebar header .toggle{
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%) rotate(180deg);
  height: 25px;
  width: 25px;
  background-color: rgb(var(--main-purple));
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px!important;
  cursor: pointer;
  transition: var(--tran-05);
}

body .sidebar header .toggle{
  color: var(--text-color); font-size: 17px!important;
}

.sidebar.close .toggle{
  transform: translateY(-50%) rotate(0deg);
}

.sidebar .menu2{
}

.sidebar li.search-box{
  border-radius: 6px;
  background-color: var(--primary-color-light);
  cursor: pointer;
  transition: var(--tran-05);
}

.sidebar li.search-box input{
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  background-color: var(--primary-color-light);
  color: var(--text-color);
  border-radius: 6px;
  font-size: 17px;
  font-weight: 500;
  transition: var(--tran-05);
}
.sidebar li a{
  list-style: none;
  height: 100%;
  background-color: transparent;
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
  border-radius: 10px;
  text-decoration: none;
  transition: var(--tran-03);
  padding-left: 13.5px;
}

.sidebar li a:hover{
  background: rgb(var(--main-purple));
  background: linear-gradient(90deg, rgb(var(--main-pink)) 0%, rgb(var(--main-purple)) 100%)!important;
}
.sidebar li a:hover .icon,
.sidebar li a:hover .text{
  color: var(--sidebar-color);
}
body .sidebar li a:hover .icon,
body .sidebar li a:hover .text{
  color: var(--text-color);
}

.sidebar .menu-bar{
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    overflow-y: scroll;
    align-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
}
.menu-bar::-webkit-scrollbar{
  display: none;
}
.sidebar .menu-bar .mode{
  border-radius: 6px;
  background-color: var(--primary-color-light);
  position: relative;
  transition: var(--tran-05);
}

.menu-bar .mode .sun-moon{
  height: 50px;
  width: 60px;
}

.mode .sun-moon i{
  position: absolute;
}
.mode .sun-moon i.sun{
  opacity: 0;
}
body .mode .sun-moon i.sun{
  opacity: 1;
}
body .mode .sun-moon i.moon{
  opacity: 0;
}

.menu-bar .bottom-content .toggle-switch{
  position: absolute;
  right: 0;
  height: 100%;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
}
.toggle-switch .switch{
  position: relative;
  height: 22px;
  width: 40px;
  border-radius: 25px;
  background-color: var(--toggle-color);
  transition: var(--tran-05);
}

.switch::before{
  content: '';
  position: absolute;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  background-color: var(--sidebar-color);
  transition: var(--tran-04);
}

body .switch::before{
  left: 20px;
}

.home{
  position: absolute;
  top: 0;
  top: 0;
  left: 250px;
  height: 100vh;
  width: calc(100% - 250px);
  background-color: var(--body-color);
  transition: var(--tran-05);
}
.home .text{
  font-size: 30px;
  font-weight: 500;
  color: var(--text-color);
  padding: 12px 60px;
}
#arka{
  margin-top: 5%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.sidebar.close ~ .home{
  left: 78px;
  height: 100vh;
  width: calc(100% - 78px);
}
body .home .text{
  color: var(--text-color);
}
#text-little svg{
}
#animate_image{
  animation:backAn 50s infinite;
}
#tanitim{
  width:100%;
  margin-top: 5%;margin-bottom: 0%;background-position: left!important;background-size: cover!important;
}
#animate_image div{
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);margin-bottom: 3%;border: 1px solid rgba(255,255,255,0.1);
  padding: 30px;
  border-radius: 20px;
}
#animate_image div h1{
  padding-bottom:10px;border-bottom: 1px solid rgba(255,255,255,0.1);
  font-family: 'Bangers';text-align: center;
}
@keyframes backAn {
  0% {
    background-size:100%;
  }
  50% {
    background-size:250%;
  }
  100% {
    background-size:100%;
  }
}
.navbar-dark .navbar-toggler-icon {
  background-image: url('https://www.visqo.online/graph/menu.png')!important;
}

body#light #main_backdrop{
  opacity: 0.9!important;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 20%);
  mask-image: linear-gradient(to top, transparent 0%, black 20%);
}
body#light #desktop_menu{
  background: rgba(0,0,0,0.8);
}
body#light #text-big{
  font-weight:bold;color: #000;font-size: 36px;
}
body#light #text-big2{
  font-weight:bold;color: #fff;font-size: 36px;
}
body#light #tum_zamanlar{
  background: #fff;
}
body#light #tum_zamanlar #text-little{
  color: #000;
}
body#light .comment-text{
  color: #000!important;
}
body#light #tum_zamanlar2 #text-little{
  color: #000;
}
body #tum_zamanlar2 #text-little a{
  color: #f2f2f2;
}
body#light #tum_zamanlar2 #text-little a{
  color: #000;
}
body#light #season_info #text-little, body#light #subject #text-little{
  color: #000;
}
body .tum_zamanlar{
 background: #1D202B;
}
body#light .tum_zamanlar{
 background: #fff;
}
body #oneri #text-little{
  color: #f2f2f2!important;
}
body#light #tum_zamanlar .watch2{
  background: rgb(var(--main-purple));
  background: linear-gradient(90deg, rgb(var(--main-pink)) 0%, rgb(var(--main-purple)) 100%);
}

body#light .stroke{
  color: black;
  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 0.2px;
  -webkit-text-stroke-color: black;
}

.wrapper{
  position: relative;
}
#user_genre_div{
  padding: 10px 25px 10px 25px;border-radius: 30px;background: rgba(255,255,255,0.02);
  border: 2px solid rgba(255,255,255,0.2);color: #fff;display: inline-block;transition: 500ms;
  margin-bottom: 40px;
  text-align: center;cursor: pointer;
}
.main_genre_control{
  display: inline-block;
  color: #fff;
  padding-left: 15px;
  cursor: pointer;
  border-left: 1px solid rgba(255,255,255,0.2);
  height: 100%;
}
#user_genre_div a{
  padding-right: 5px;
}
#user_genre_div:hover{
 background: rgba(255,255,255,0.2);
 transform: scale(0.95);
}
#user_genre_what{
  color: #fff;
  text-align: center;
}
.wrapper .file-upload {
  height: 50px;
  width: 50px;
  border-radius: 100px;
  position: absolute;
  left: 20%;
  display: flex;
  z-index: 9;
  justify-content: center;
  align-items: center;
  border: 4px solid #FFFFFF;
  overflow: hidden;
  background-image: linear-gradient(to bottom, #2590EB 50%, #FFFFFF 50%);
  background-size: 100% 200%;
  transition: all 1s;
  color: #FFFFFF;
  font-size: 20px;
}
.wrapper .file-upload input[type=file] {
  height: 200px;
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}
.wrapper .file-upload:hover {
  background-position: 0 -100%;
  color: #2590EB;
}
.divider{height:100px}.component--cdn-list{width:100%}.component--cdn-list ul li{margin-bottom:25px}.component--cdn-list ul li:last-child{margin-bottom:0}.component--cdn-detail,.component--cdn-list ul li a{BORDER: 1PX SOLID rgba(255,255,255,0.1);border-radius:15px;box-shadow:0 30px 75px -35px rgba(35,68,126,.39)}.component--cdn-list ul li a{display:flex;flex-direction:column;color:#fff;transition:300ms background-color,300ms color;padding:10px 30px 10px 30px}.component--cdn-list ul li a .title-wrapper{display:flex;justify-content:space-between;align-items:center;}.component--cdn-list ul li a .star{display:flex;align-items:center;font-size:18px}.component--cdn-list ul li a .star svg{margin-right:10px}.component--cdn-list ul li a .star .icon-star{fill:#272e69;transition:300ms fill}.component--cdn-list ul li a .title{font-size:22px;font-weight:700}.component--cdn-list ul li a .title span{font-size:16px;opacity:.5}.component--cdn-list ul li a .description{max-width:100%;font-size:13px;line-height:24px;}.component--cdn-list ul li a .tags{display:flex;align-items:center;margin:0 -5px}.component--cdn-list ul li a .tags span{padding:0 10px;height:30px;border-radius:30px;background:#f1f6ff;display:flex;align-items:center;font-size:14px;line-height:1;margin:0 5px;transition:300ms background-color}.component--cdn-list ul li a:hover,.component--cdn-list ul li.active a{background:#272e69;color:#fff}.component--cdn-list ul li a:hover .tags span,.component--cdn-list ul li.active a .tags span{background:#1a2261}.component--cdn-list ul li a:hover .star .icon-star,.component--cdn-list ul li.active a .star .icon-star{fill:#fff}.component--cdn-detail{padding:50px;width:668px}.component--cdn-detail h3{font-size:26px;font-weight:700;color:#181d39;margin-bottom:20px}.component--cdn-detail .form{display:flex;margin-bottom:32px}.component--cdn-detail .form li{margin-right:20px}.component--cdn-detail .form li:last-child{margin-right:0}.component--cdn-detail .form li label{display:block;font-size:16px;color:#181d39;margin-bottom:10px}.component--cdn-detail .form li select{min-width:154px;border:1px solid #ced7e9;height:50px;padding:0 15px;border-radius:5px;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;background:url(../img/icon-arrow-down.svg) no-repeat calc(100% - 17px)}.component--cdn-detail .items li{margin-bottom:5px;height:75px;border-radius:5px;background-color:#f1f6ff;display:flex;align-items:center;justify-content:space-between;padding:0 15px 0 25px}.component--cdn-detail .items li:last-child{margin-bottom:0}.component--cdn-detail .items li .text{font-size:16px;color:#181d39}.component--cdn-detail .items li button{width:50px;height:50px;border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff url(../img/icon-copy.svg) no-repeat center;position:relative}.component--cdn-detail .items li button::before{content:attr(data-copy);position:absolute;top:0;left:50%;transform:translate(-50%,calc(-100% - 10px));background:#181d39;color:#fff;font-size:14px;padding:0 15px;height:24px;white-space:nowrap;line-height:24px;border-radius:4px;display:none}.component--cdn-detail .items li button::after{content:'';border:4px solid transparent;border-top-color:#181d39;position:absolute;top:0;left:50%;transform:translate(-50%,calc(-100% - 2px));display:none}.component--cdn-detail .items li button.copied::before{content:attr(data-copied)}.component--cdn-detail .items li button:hover::after,.component--cdn-detail .items li button:hover::before{display:block}.component--cdn-detail .more-btn{margin-top:30px}.component--cdn-detail .more-btn a{display:inline-flex;height:70px;padding:0 35px;align-items:center;background-color:#272e69;color:#fff;border-radius:5px;font-size:16px;font-weight:700;box-shadow:0 15px 35px -5px rgba(35,68,126,.39);transition:300ms opacity}.component--cdn-detail .more-btn a:hover{opacity:.9}

.comment-date a{
  color: #acb4c2;
}
.comment-date a:hover{
  color: #acb4c2;
}

#season_info{
  width: 100%;
}
#list_resim{
  transition: 500ms;
}
#list_resim img{
  box-shadow: -10px 15px 15px rgba(87, 88, 107,0.4);
  border: 3px solid rgba(255,255,255,0.5);
}
#list_resim:hover img{
  box-shadow: -10px 15px 15px transparent;
}
#list_resim:hover{
  transform: scale(0.9);

}

.component{background-color:#1D202B;border-radius:10px}
.component--help{margin-bottom:25px;padding:40px 50px}
.component--help h5{font-size:36px;
  font-weight:400;color:#bbbbd7;margin-bottom:25px}.component--help form{width:100%}
  .component--help form input{width:100%;height:72px;border-radius:5px;
    padding:0 40px 0 75px;font-size:18px;border:1px solid #454564;
    background:#212838 url("data:image/svg+xml,%3Csvg width='28px' height='28px' viewBox='0 0 28 28' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='https://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com --%3E%3Ctitle%3EGroup%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.5'%3E%3Cg id='Day-1181-Support-Page-UI-COmponents-Design' transform='translate(-383.000000, -327.000000)'%3E%3Cg id='Group-7' transform='translate(228.000000, 195.000000)'%3E%3Cg id='Group-6' transform='translate(77.000000, 0.000000)'%3E%3Cg id='Group' transform='translate(75.000000, 129.000000)'%3E%3Cpolygon id='Path' points='0 0 34 0 34 34 0 34'%3E%3C/polygon%3E%3Ccircle id='Oval' stroke='%23FFFFFF' stroke-width='2.125' stroke-linecap='round' stroke-linejoin='round' cx='14.1666667' cy='14.1666667' r='9.91666667'%3E%3C/circle%3E%3Cpath d='M29.75,29.75 L21.25,21.25' id='Path' stroke='%23FFFFFF' stroke-width='2.125' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat 25px;color:#fff;transition:300ms border-color ease-in-out}.component--help form input:focus{border-color:#5a5a82}.component--help form input::-moz-placeholder{color:rgba(255,255,255,.6)}.component--help form input:-ms-input-placeholder{color:rgba(255,255,255,.6)}.component--help form input::placeholder{color:rgba(255,255,255,.6)}.component--sidebar{width:307px;padding:30px;margin-bottom:25px}.component--sidebar h6{font-size:18px;color:#bbbbd7;margin-bottom:15px}
    .component--sidebar nav ul li a{display:block;font-size:16px;color:#786cd5;padding:6px 0;transition:300ms color ease-in-out}.component--sidebar nav ul li a:hover{color:#fff}.component--sidebar hr{background:#141428;height:2px;margin:25px 0}.component--sidebar p{font-size:16px;padding-right:10px;color:#bbbbd7;line-height:24px;margin-bottom:20px}.component--sidebar .button{height:50px;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:5px;background-color:#786cd5;font-size:16px;font-weight:700;color:#fff;transition:300ms background-color ease-in-out}.component--sidebar .button:hover{background-color:#5444ca}.component--list li{margin-bottom:10px}.component--list li:last-child{margin-bottom:0}.component--list li a{display:flex;justify-content:space-between;background-color:#1b1b30;padding:30px;transition:300ms transform ease-in-out}.component--list li a .inner .title{display:block;font-size:18px;font-weight:700;color:#bbbbd7;margin-bottom:20px}.component--list li a .inner .description{font-size:16px;line-height:20px;color:#bbbbd7}.component--list li a .category{margin-left:40px;display:inline-flex;height:36px;align-items:center;padding:0 18px;color:var(--color);position:relative;font-size:16px}.component--list li a .category::before{content:'';width:100%;height:100%;position:absolute;top:0;left:0;border-radius:36px;
      background-color:var(--color);opacity:.05}.component--list li a:hover{transform:scale(1.02)}
      .card {
        transform-style: preserve-3d;
      }
      #tur_resim{
        transform-style: preserve-3d;
      }
      #tur_resim img{
        transition: 500ms;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter: drop-shadow(5px 5px 2px #222);
        transform: translateZ(30px);
      }
      #tur_resim img:hover{

      }
      a{
       text-decoration: none!important;
     }
     .modal-dialog {
      max-width: 800px;
      margin: 30px auto;
    }



    .modal-body {
      position:relative;
      padding:0px;
    }
    .close {
      position:absolute;
      right:-30px;
      top:0;
      z-index:999;
      font-size:2rem;
      font-weight: normal;
      color:#fff;
      opacity:1;
    }
    #icerik_bilgi{
      width:100%;display:block;border-radius:3px;
      padding:10px;background: #2e2d3b;margin-bottom:10px;
      font-size:13px;font-weight:300;
      color: #fff;font-weight: bold;margin-bottom: 3%;
      font-style: italic;
    }
  .morelink{
    color: rgb(var(--main-pink))!important;
  }
    .loadin{
      position:fixed!important;left:0;top:0;z-index: 999999999999999999;background: rgba(18, 21, 31,0.9);width: 100%!important;height: 100%; -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
    }
    .loadin div#loa{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%) scale(1.7);
    }
    .scrollbar
    {
      float: left;
      height: 650px;
      width: 65px;
      overflow-y: scroll;
      margin-bottom: 25px;
    }
    .scrollbar2
    {
      float: left;
      height: 400px;
      width: 100%;
      overflow-y: scroll;
      margin-bottom: 50%;
    }
    .scrollbar_gif
    {
      float: left;
      height:400px;
      width: 100%;
      overflow-y: scroll;
      margin-bottom: 50%;
    }
    .force-overflow
    {
      min-height: 650px;
    }

    #wrapper
    {
      text-align: center;
      width: 500px;
      margin: auto;
    }


/*
 *  STYLE 2
 */

    #style-2::-webkit-scrollbar{
      width: 6px;
      height: 6px;
    }
    #style-2::-webkit-scrollbar-thumb{
      background: #252a38;
      border-radius: 30px;
    }
    #style-2::-webkit-scrollbar-thumb:hover{
      background: #B3AFB3;
    }
    #style-2::-webkit-scrollbar-track{
      background: transparent;
      border-radius: 0px;
      box-shadow: inset 0px 0px 0px 0px #F0F0F0;
    }

    nav.bg-dark{
     background: transparent!important;
     background-color: transparent!important;

   }
   .animate-btn {
    width: 130px;
    height: 40px;
    color: #fff;
    border-radius: 5px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
    7px 7px 20px 0px rgba(0, 0, 0, .1),
    4px 4px 5px 0px rgba(0, 0, 0, .1);
    outline: none;
  }
  #side-list{
    padding-bottom:30px;
    cursor: pointer;
    transition: 500ms;
  }
  #side-list a{
   color: #fff;
   opacity: 0.8;
   transform: scale(1);
   text-shadow: 0 0 30px black;padding: 10px 10px 14px 10px;
 }
 #side-list a:hover,#side-list a:focus{
   opacity: 1;
   color: #fff;
   background: rgb(var(--main-purple));
   background: linear-gradient(
    60deg, rgb(var(--main-pink)) 0%, rgb(var(--main-purple)) 100%);
   padding: 10px 10px 14px 10px;
   border-radius: 11px;

 }
 .nav-link a.active{

  background: rgb(var(--main-purple));
  background: linear-gradient(
    60deg, rgb(var(--main-pink)) 0%, rgb(var(--main-purple)) 100%);
  
}
#side-list a.active{
  opacity: 1;
  color: #fff;
  background: rgb(var(--main-purple));
  background: linear-gradient(
    60deg, rgb(var(--main-pink)) 0%, rgb(var(--main-purple)) 100%);
  padding: 10px 10px 14px 10px;
  border-radius: 11px;
  width: 40px;
  height: 40px;
}
#like_it{
  transition: 500ms;
}
#like_it:hover{
  transform: scale(0.96);
}
#img_play{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.1);
    text-align: center;
    padding-left: 3px;
    color: #fff;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 300ms;
}
#poster_movie:hover #img_play{
  transform:translate(-50%, -50%) scale(1.2);
}
.f2{
  color: #f2f2f2!important;
}
.new_main_detail{
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    backdrop-filter: blur(5px);
    align-content: center;
    flex-direction: row;
    text-align: left;
}
.detail_buttons{
  color: #fff;
  font-size: 15px;
  background: #171a23;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  cursor: pointer;
  transition: 500ms;
  margin-bottom: 5%;
  display: inline-block;
  margin-right: 10px;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center; 
  z-index:999999999;
}
.detail_buttons:hover{
  color: rgb(var(--main-pink));
}
.detail_buttons:focus{
  color: rgb(var(--main-pink));
}
.swal-overlay--show-modal{
  z-index: 9999999999999999!important;
}
#footer_logo{
  display: flex!important;
  justify-content: space-between;
  align-content: flex-end;
  align-items: center;
}
#not{
  color: #fff;
  position: absolute;
  right: 0;
  top: 0;
}
#footer_social{
  display: flex!important;
  justify-content: space-between;
  align-content: flex-end;
  align-items: center;
}
#mobile_container{
  margin-top: 8%;
}
#mobile_container2{
  margin-top: 6%;
}
#bottom_menu{
  display: none;
}
#line{
 position: relative;
 /* padding-bottom: 200px; */
 -webkit-backdrop-filter: blur(20px);
 backdrop-filter: blur(20px);
 margin-bottom: 20%;
 margin-top: -10%;
 background: rgb(var(--main-purple));
 background: linear-gradient(
  90deg
  , rgb(var(--main-pink)) 0%, rgb(var(--main-purple)) 100%);
 color: rgba(255,255,255,0.7);
 display: none;
 z-index: 999999999;
 font-size: 30px;
 border-radius: 50%;
 width: 80px;
 height: 80px;
}
#line svg{
 padding-top: 25px;
 padding-left: 0px;
 padding-right: 2px;
 color: #fff;
}
#poster_movie{
  height: 350px;
  filter: saturate(1.5);
  width: 100%;
  background-position: center!important;background-size: cover!important;
  border-radius: 5px;cursor: pointer;transition: 100ms;

}
#poster_movie2{
  height: 300px;
  object-fit: cover;filter: saturate(1.5);
}
.more_content{
  display: none;
}
#story_div{
  display: none;
}
.grid-container {
  position: relative;
  display: grid;
  grid-gap: 10px;
  grid-row-gap: 50px;
  grid-template-columns: repeat(6, 1fr);
  padding: 10px;
}
.mySwiper_genre a{
  width: 100%;
  margin-right: 5px;
}
.grid-container-genre {
  position: relative;
  display: grid;
  grid-row-gap: 50px;
  grid-gap: 10px;
  grid-template-columns: repeat(6, 1fr);
  padding: 10px;
}
.grid-container .grid-item {
  margin: 2%;position: relative;
}
.grid-container-genre .grid-item {
  margin: 2%;position: relative;
}
#logo_mobile{
  display: none;
}
@media only screen and (min-width:0px) and (max-width: 699px) {
  #desktop_menu{
    display: none;
  }
  #menu_mobil{
    display: block!important;
  }
  .menu3{
    display: block!important;
  }
  .login { 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding:20px;
    width: 90%;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 30px black;
    border-radius: 20px;

  }
  #logo_mobile{
    display: block;
  }
  .grid-container {
    display: grid;
    grid-row-gap: 50px;
    grid-template-columns: repeat(3, 1fr);
    padding: 10px;position: relative;
  }
  .grid-container-genre {
    display: grid;
    grid-row-gap: 50px;
    grid-template-columns: repeat(2, 1fr);
    padding: 10px;position: relative;
  }
  #back-to-top{
    bottom: 100px!important;
  }
  .progress-wrap{
     bottom: 100px!important;
  }
  #story_div{
    display: block;
  }
  #bottom_menu{
    display: block;
  }
  .film_tarih{
    display: none;
    visibility: hidden;
  }
  #gif_ana{
    width: 100%!important;
    height: 75%!important;
  }

  #line{
    display: block;
  }
  #poster_movie{
    height: 220px;
  }
  #poster_movie2{
    height: 170px;
  }


  #mobile_container{

    margin-top: 80%;
  }
  #mobile_container2{
    margin-top: 100%;
    border-radius: 50px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0);
  }
}
#menu_mobil{
  display: none;
}
@media only screen and (min-width: 700px) and (max-width: 800px) {
 .container{
  padding: 0px!important;

}
.grid-container {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px;
}
.grid-container-genre {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px;
}
.film_tarih{
  display: none;
  visibility: hidden;
}
#desktop_menu{
  display: none;
}
#bottom_menu{
  display: block;
}
#menu_mobil{
  display: block!important;
}
.gizle_mesaj{
  display: none!important;
}
.more_content{
  display: block;
}
}
@media only screen and (min-width: 801px) and (max-width: 810px) {
 .container{
  padding: 50px!important;

}
.grid-container {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px;
}
.grid-container-genre {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px;
}
.film_tarih{
  display: none;
  visibility: hidden;
}
#desktop_menu{
  display: block;
}
#bottom_menu{
  display: none;
}
#menu_mobil{
  display: none!important;
}
.gizle_mesaj{
  display: none!important;
}
.more_content{
  display: block;
}
}
@media only screen and (min-width: 811px) and (max-width: 820px) {
 .container{
  padding: 70px!important;
  margin-left: 10%!important;

}
.grid-container {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px;
}
.grid-container-genre {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px;
}
.film_tarih{
  display: none;
  visibility: hidden;
}
#desktop_menu{
  display: block;
}
#bottom_menu{
  display: none;
}
#menu_mobil{
  display: none!important;
}
.gizle_mesaj{
  display: none!important;
}
.more_content{
  display: block;
}
}
@media only screen and (min-width: 821px) and (max-width: 990px) {
 .container{
   padding: 50px!important;
   margin-left: 13%!important;
   
 }
 .grid-container {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px;
}
 .grid-container-genre {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: repeat(4, 1fr);
  padding: 10px;
}
.film_tarih{
  display: none;
  visibility: hidden;
}
#desktop_menu{
  display: block;
}
#bottom_menu{
  display: none;
}
#menu_mobil{
  display: none!important;
}
.gizle_mesaj{
  display: none!important;
}
.more_content{
  display: block;
}
}
@media only screen and (min-width:991px) and (max-width: 1031px) {
 .container{
   padding-left: 100px!important;
   padding-right: 0px!important;
   
 }
 .grid-container {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: repeat(4, 1fr);
  padding: 10px;
}
 .grid-container-genre {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: repeat(5, 1fr);
  padding: 10px;
}

.film_tarih{
  display: none;
  visibility: hidden;
}
#desktop_menu{
  display: block;
}
#bottom_menu{
  display: none;
}
#menu_mobil{
  display: none!important;
}
.gizle_mesaj{
  display: none!important;
}
.more_content{
  display: block;
}
}


@media only screen and (min-width: 1031px) and (max-width: 1099px) {
 .container{
  padding-left: 70px!important;
}
.grid-container {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: repeat(4, 1fr);
  padding: 10px;
}
.grid-container-genre {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: repeat(5, 1fr);
  padding: 10px;
}
#desktop_menu{
  display: block;
}
#bottom_menu{
  display: none;
}
#menu_mobil{
  display: none!important;
}
.gizle_mesaj{
  display: none!important;
}
.more_content{
  display: block;
}
}

@media only screen and (min-width: 1100px) and (max-width: 1199px) {
 .container{
  margin-left: 10%;
}
#desktop_menu{
  display: block;
}
#bottom_menu{
  display: none;
}
#menu_mobil{
  display: none!important;
}
.gizle_mesaj{
  display: none!important;
}
.more_content{
  display: block;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1299px) {
 .container{
  margin-left:8%!important;
}
#desktop_menu{
  display: block;
}
#bottom_menu{
  display: none;
}
#menu_mobil{
  display: none!important;
}
.gizle_mesaj{
  display: none!important;
}
.more_content{
  display: block;
}
}
@media only screen and (min-width: 1099px) and (max-width: 1480px) {
.grid-container {
  display: grid;
  grid-row-gap: 50px;
  grid-template-columns: repeat(5, 1fr);
  padding: 10px;
}
}
@media only screen and (min-width: 1300px) and (max-width: 1490px) {
 .container{
  margin-left:11%!important;
  
}
#menu_mobil{
  display: none!important;
}
.gizle_mesaj{
  display: none!important;
}
.more_content{
  display: block;
}
}
@media only screen and (min-width: 1491px) and (max-width: 1500px) {
 .container{
  margin-left:7.5%!important;
  
}
#menu_mobil{
  display: none!important;
}
.gizle_mesaj{
  display: none!important;
}
.more_content{
  display: block;
}
}
@media only screen and (min-width:1501px) and (max-width: 1600px) {
 .container{
  margin-left: 10%!important;
  
}
#menu_mobil{
  display: none!important;
}
.gizle_mesaj{
  display: none!important;
}
.more_content{
  display: block;
}
}
@media only screen and (min-width:1601px) and (max-width: 2000px) {
 .container{
  margin-left: 17%;
}
#menu_mobil{
  display: none!important;
}
.gizle_mesaj{
  display: none!important;
}
.more_content{
  display: block;
}
}
@media only screen and (max-width: 1100px) {
  #season_info{
    width: 100%;
  }
}

.photo{
  display: none!important;
}
#tur_resim img{
  transform: none!important;
}
.comments {
  margin: 2.5rem auto 0;
  padding: 0px!important;
}

#footer_logo{
  display: none!important;
  justify-content: space-between;
  align-content: flex-end;
  align-items: center;
}
#footer_social{
  display: none!important;
  justify-content: space-between;
  align-content: flex-end;
  align-items: center;
}
}
#ekle_film:hover,#cikar_film:hover,.ekle_film:hover{
  transform: scale(1.1);
}

.swal-modal{
  background: #171924!important;
}
.swal-title,.swal-text{
  color: #fff!important;
}
.swal-button--danger,.swal-button--catch{
  background: rgb(178,67,247)!important;
  background: linear-gradient(
    90deg, rgba(178,67,247,1) 0%, rgba(123,60,227,1) 100%)!important;
  outline: none!important;
  border: 0px!important;
  box-shadow: 0 0 30px transparent!important;

}
.menu {
  overflow: hidden;
  background:rgba(23, 25, 36,0.9);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  cursor: -webkit-grab;
  cursor: grab;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99999999999;
}
.menu.is-dragging {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.menu ul {
  counter-reset: count;
}
.menu--item {
  counter-increment: count;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 120px;
  line-height: 1.2;
  text-align: center;
}
@media (max-width: 767px) {
  .menu--item {
    font-size: 10vw;
    padding: 1rem 0;
  }
  .menu--item button{
    font-size: 26px!important;
    
  }
}

.menu--item button {
  color: #fff!important;
  text-decoration: none;
  position: relative;
  z-index: 1;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 40px;
  -webkit-appearance: none;
  background: none;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
  color: #020000;
  cursor: pointer;
}
@media (max-width: 767px) {
  .menu--item button {
    font-size: 10vw;
  }
}
.jwplayer.jw-flag-aspect-mode{
  border-radius: 20px;
}
.cast_name{
 visibility: visible;
 opacity: 1;
 transition: visibility 0s, opacity 0.5s linear;
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translate(-50%,0%);
 text-align: center;
 width: 100%;
 font-size: 12px!important;
}
.swiper-slide:hover .cast_name{
  visibility: visible;
  opacity: 1;
}
.version {
  display: inline-block;
  position: fixed;
  z-index: 1;
  text-decoration: none;
  background: #333;
  font-family: sans-serif;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
  border-radius: 10px;
  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2);
  top: -30px;
  right: -60px;
  bottom: auto;
  transform: rotate(45deg);
  transform-origin: 0% 100%;
  border-radius: 0;
  padding: 8px 30px;
  font-size: 11px;
}
.version:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100px;
  bottom: 0;
  right: 0%;
  background: transparent;
}
@media (max-width: 767px) {
  .version {
    transform: scale(0.6) rotate(45deg);
    right: -110px;
  }
}
#progress {
  position: fixed;
  z-index: 2147483647;
  top: 0;
  left: 0px;
  width: 0%;
  height: 2px;
  background: rgb(178,67,247);
  background: linear-gradient(
    90deg, rgba(178,67,247,1) 0%, rgba(123,60,227,1) 100%);
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  -moz-transition: width 500ms ease-out, opacity 400ms linear;
  -ms-transition: width 500ms ease-out, opacity 400ms linear;
  -o-transition: width 500ms ease-out, opacity 400ms linear;
  -webkit-transition: width 500ms ease-out, opacity 400ms linear;
  transition: width 500ms ease-out, opacity 400ms linear;
}

#progress dd, #progress dt {
  position: absolute;
  top: 0;
  height: 2px;
  -moz-box-shadow: #0088CC 1px 0 6px 1px;
  -ms-box-shadow: #0088CC 1px 0 6px 1px;
  -webkit-box-shadow: #0088CC 1px 0 6px 1px;
  box-shadow: #0088CC 1px 0 6px 1px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

#progress dt {
  opacity: .6;
  width: 180px;
  right: -80px;
  clip: rect(-6px, 90px, 14px, -6px);
}

#progress dd {
  opacity: .6;
  width: 20px;
  right: 0;
  clip: rect(-6px, 22px, 14px, 10px);
}
.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show>.nav-link{
  color: #7b3ce3!important;
}
.navbar-dark .navbar-nav .nav-link{
  color: #fff!important;
  padding-right: 50px!important;
}
.navbar-dark .navbar-nav .nav-link:hover{
  color: #7b3ce3!important;
}
.navbar-dark .navbar-brand{
  color: #fff!important;
}
.navbar-dark .navbar-toggler {
  color: rgba(255,255,255,0)!important;
  border-color: rgba(255,255,255,0)!important;
}
#stars{
  color: #7b3ce3!important;
}
#stars i{
  font-size: 15px;
  color: #7b3ce3!important;
}

#description{
  color: #b0b0b0;
  width: 50%;
  font-family: "Quicksand"!important;
}
#gif_baslik{
  width:100%;display:block;color:#fff;font-size:16px;padding:10px;text-align: center;
}
#wish{
  padding: 10px;
  color: #fff;
  text-align: center;
  background: rgba(255,255,255,0.05);
  font-size: 13px;
  font-family: "quicksand";
}
#watch{
  padding: 15px 30px 15px 30px;
  background: rgb(var(--main-purple));
  background: linear-gradient(90deg, rgb(var(--main-pink)) 0%, rgb(var(--main-purple)) 100%);
  border-radius: 10px;
  color: #fff;
  margin-bottom: 5%;
  cursor: pointer;
  transition: 250ms;
  margin-right: 15px;
}
#add_{
  padding: 15px 30px 15px 30px;
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
  color: #fff;
  margin-bottom: 5%;
  cursor: pointer;
  transition: 250ms;
}
#add_:hover{
  background: rgba(255,255,255,0.8);
  color: #000;
}
.son_div{
    display: flex;
    color: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background:rgba(var(--second-color),0.2);
    background-size: cover;
    background-position: top;
    margin-block-start: 24px;
}
.el{
  text-align: center!important;font-size:80px!important;
}
.son_div_yazi{
  text-align: center!important;font-size: 30px!important;
}
.son_kesfet{
    color: #fff;
    font-weight: 700;
    background: #4c5a67;
    padding: .75rem 1.5rem;
    border-radius: 4px;
}
.son_kesfet:hover{
  background:rgba(var(--main-purple),1);
}
.tilt {
  box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
  transform-style: preserve-3d;
  margin: 50px auto;
}

.tilt-logo {

  background-color: #7e56ff;
  background-image: linear-gradient(150deg, #5a00ff 0%, #ff1ff7 100%, #ff1ff7 100%);

}

.tilt-logo-inner {
  transform: translateZ(50px) translateY(-50%) translateX(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
  font-size: 1.9rem;
}
.js-tilt-glare-inner{
  opacity: 0.1;

}
#watch:hover{
  background: rgb(var(--main-purple));
  background: linear-gradient(90deg, rgb(var(--main-purple)) 0%, rgb(var(--main-pink)) 100%);
  transform: scale(1.04);
  box-shadow: 0 0px 20px rgb(var(--main-pink));
}
#back-to-top {
  display: inline-block;
  background: rgba(18, 21, 31,0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);border: 1px solid rgba(255,255,255,0.1);
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 15px;
  transition: background-color .3s, 
  opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 999999;
}
#back-to-top svg {
  font-weight: normal;
  font-style: normal;
  font-size: 1.5m;
  line-height: 50px;
  color: #fff;
  margin-top: 35%;
}
#back-to-top:hover {
  cursor: pointer;
  background: #262e40;
}
#back-to-top:active {
  background: #1a1f2b;
}
#back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.watch2{
  border: 2px solid rgba(255,255,255,0.1);color:#fff;margin-left: 5%;
  margin-right: 5%;padding: 10px 25px 10px 25px;text-align: center;
  border-radius: 20px;
  transition: 500ms;
}
.watch2:hover{
  background: rgb(var(--main-purple));
  background: linear-gradient(90deg, rgb(var(--main-purple)) 0%, rgb(var(--main-pink)) 100%);
  transform: scale(1.04);
}
#sonuc_getir{
padding: 10px 40px 10px 40px;
    background: rgb(var(--main-purple));
    background: linear-gradient(90deg, rgb(var(--main-purple)) 0%, rgb(var(--main-pink)) 100%);
    border-radius: 30px!important;
    width: 100%;
    font-size: 16px;
    line-break: 20px;
    color: #fff;
    letter-spacing: 2px;
    margin-top: 2%;
    cursor: pointer;
    font-family: 'Quicksand';
    font-weight: bold;
    transition: 250ms;
    border: 3px solid rgba(255,255,255,0.2);
    text-align: center;
    display: none;
}
@media only screen and (min-width: 0px) and (max-width: 990px) {
#sonuc_getir{
  display: block;
}
.sonuc_getir{
  display: none;
}
}

#sonuc_getir:hover{
  transform: scale(1.01);
}
.sonuc_getir{
  background: rgb(var(--main-purple));
  position: fixed!important;
    bottom: 0!important;
    right: 0!important;
    width: 100%!important;
    z-index: 999!important;
    margin: 0 auto !important;
    padding: 10px!important;
    cursor: pointer!important;
    font-family: 'Quicksand'!important;
    font-weight: bold!important;
    transition: 250ms!important;
    border: 0px solid rgba(255, 255, 255, 0.2)!important;
    color: #fff!important;
    letter-spacing: 2px!important;
    width: 100%!important;
    font-size: 16px!important;
    text-align: center;
}
#watch_now{
  padding:8px 25px 8px 25px;
  background: #262837;
  border-radius: 50px;
  width: 138px;
  color: #fff;
  margin-bottom: 5%;
  cursor: pointer;
  transition: 250ms;

}
#watch_now:hover{
  
 background: rgb(var(--main-purple));
 background: linear-gradient(90deg, rgb(var(--main-purple)) 0%, rgb(var(--main-pink)) 100%);
 transform: scale(1.04);
}
#login{
  padding: 10px 40px 10px 40px;
  background: rgb(var(--main-purple));
  background: linear-gradient(90deg, rgb(var(--main-purple)) 0%, rgb(var(--main-pink)) 100%);
  border-radius: 50px;
  width: 115px;
  color: #fff;
  cursor: pointer;
  transition: 250ms;display: inline-block;
}
#login:hover{
  background: rgb(var(--main-purple));
  background: linear-gradient(90deg, rgb(var(--main-purple)) 0%, rgb(var(--main-pink)) 100%);
  transform: scale(0.95);
}

.search_button{
  display: inline-block;
  margin: 0px;
  padding: 10px 5px 10px 10px;
  font-size: 17px;
  width: 40px;
  height: 40px;
  
  border-radius: 50%;
  cursor: pointer;
}
#admin_btn{
  display: inline-block;
  margin: 0px;
  padding: 2px 5px 5px 8.5px;
  font-size: 25px;
  width: 40px;
  height: 40px;
  color: red;
  background: rgba(0,0,0,0.2);
  border-radius: 50%;
  cursor: pointer;
}
.search_button:hover{
  color: #fff;
}

#text1{
  color: rgba(255,255,255,0.8);font-size: 26px;
}
.fix_
{
  position: absolute;bottom:5%;left:5%;text-align: left; 
  width: 100%;padding-right: 15px;
}
.affiche_info{
  position: absolute;bottom:7%;left:5%;text-align: left;
}
.affiche_info_alt{
  position: absolute;bottom:-2%;left:5%;
}
.affiche_info_date{
  position: absolute;bottom:-2%;right:5%;opacity: 0.6;
}
.w80{
  width: 80%;
}
.white_space{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#text-little{
  color: #f2f2f2;font-size: 15px;font-family: "Quicksand"!important;
}
#text-huge{
  font-weight:bold;color: #fff;font-size: 54px;font-family: "Quicksand";
}
#text-big{
  font-weight:bold;color: #fff;font-size: 36px;
}
#text-big2{
  font-weight:bold;color: #fff;font-size: 36px;
}
.container img{
  border-radius: 10px;
  object-fit: cover;
}
#jump{
 animation: jump 1.2s infinite;
 position: absolute;
 top: 50%;  /* position the top  edge of the element at the middle of the parent */
 left: 50%; /* position the left edge of the element at the middle of the parent */

 transform: translate(-50%, -50%);
 z-index: 999;
}
@keyframes jump {
  0% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, -60%); }
  100% { transform: translate(-50%, -50%); }
}
#rotate{

 position: absolute;
 top: 50%;  /* position the top  edge of the element at the middle of the parent */
 left: 50%; /* position the left edge of the element at the middle of the parent */

 transform: translate(-50%, -50%);
}
#rotate img{
  -webkit-animation: rotation 2s infinite linear;
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform:rotate(0deg);
  }
  to {
    -webkit-transform:rotate(365deg);
  }
}
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: transparent;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.btn { display: inline-block; *display: inline; *zoom: 1; 
 border: 0px!important;
 transition: 500ms;
 outline: 0px!important;
 padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; 
 color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 
 vertical-align: middle; background-color: #f5f5f5; 
 background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); 
 background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); 
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
 background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); 
 background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); 
 background-image: linear-gradient(top, #ffffff, #e6e6e6); 
 background-repeat: repeat-x; 
 filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); 
 -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; 
 cursor: pointer; *margin-left: .3em;margin-bottom: 5%; }
}
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary { 
  background: rgb(var(--main-purple))!important;
  
  background-repeat: repeat-x; 
  border-radius: 10px!important;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.4);}
  .btn-block { width: 100%; display:block; }

  .bg-gradient1 span,
  .bg-gradient1:before {
    background: rgba(255,255,255,0.1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }

  .fancy-button {
    display: inline-block;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 0.07em;
    text-align: center;
    line-height: 24px;
    color: #ffffff;
    position: relative;
    width: 100%;
  }


  .fancy-button:before {
    content: "";
    display: inline-block;
    height: 0px;
    position: absolute;
    bottom: -1px;
    left: 10px;
    right: 10px;
    z-index: -1;
    border-radius: 2em;
    /*filter: blur(10px) brightness(1);*/
    transform-style: preserve-3d;
    transition: all 0.3s ease-out;
  }
  .fancy-button i {
    margin-top: -2px;
    font-size: 1.265em;
    vertical-align: middle;
  }
  .fancy-button span {
    display: inline-block;
    padding: 16px 20px;
    border-radius: 35px;
    position: relative;
    z-index: 2;
    will-change: transform, filter;
    transform-style: preserve-3d;
    transition: all 0.3s ease-out;
    width: 100%;
    border: 3px solid rgba(255,255,255,0.1);
  }
  .fancy-button:focus {
    color: #ffffff;
  }
  .fancy-button:hover {
    color: #ffffff;
  }
  .fancy-button:hover span {
    filter: brightness(0.9) contrast(1.2);
    transform: scale(0.96);
  }
  .fancy-button:hover:before {
    bottom: 3px;
    filter: blur(6px) brightness(0.8);
  }
  .fancy-button:active span {
    filter: brightness(0.75) contrast(1.7);
  }
  .fancy-button.pop-onhover span {
    border-radius: 4px;
  }
  .fancy-button.pop-onhover:before {
    opacity: 0;
    bottom: 10px;
  }
  .fancy-button.pop-onhover:hover:before {
    bottom: -7px;
    opacity: 1;
    filter: blur(16px);
  }
  .fancy-button.pop-onhover:hover span {
    transform: scale(1);
  }
  .fancy-button.pop-onhover:hover:active span {
    filter: brightness(1) contrast(1);
    transform: scale(1);
    transition: all 0.2s ease-out;
  }
  .fancy-button.pop-onhover:hover:active:before {
    bottom: 0;
    filter: blur(5px) brightness(0.85);
    transition: all 0.2s ease-out;
  }

  .login { 
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 20px;
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
   box-shadow: 0 0 30px black;
   border-radius: 20px;
 }
 .login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
 .btn-check:focus+.btn-primary, .btn-primary:focus{
   box-shadow: 0 0 30px transparent!important;
   opacity: 0.7;
   transform: scale(0.99);
   background: rgb(178,67,247)!important;
  background: linear-gradient( 60deg, rgb(var(--main-pink)) 0%, rgb(var(--main-purple)) 100%)!important;
   border: 0px!important;
 }
 input,select { 
   width: 100%; 
   margin-bottom: 10px!important; 
   background: rgba(0,0,0,0.3);
   border: none;
   outline: none;
   padding: 10px;
   font-size: 13px;
   color: #fff;
   text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
   border-radius: 10px;
   border: 1px solid rgba(255,255,255,0.1);
   box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
   -webkit-transition: box-shadow .5s ease;
   -moz-transition: box-shadow .5s ease;
   -o-transition: box-shadow .5s ease;
   -ms-transition: box-shadow .5s ease;
   transition: box-shadow .5s ease;
 }

 input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }

 .social svg{
   color: rgba(255,255,255,0.6);
   font-size: 20px;
   float: right;
   padding-right: 30px;
 }
 li{
   list-style: none;
   list-style-type: none;
   position: relative;
 }
 #footer-list li {
   display: inline-block;
   padding-left: 30px;
 }
 li a{
   color: rgba(255,255,255,0.6);

 }
 .cube:nth-child(1),
 .cube:nth-child(1) div {
  z-index: 1;
  animation-delay: 0.08333s;
}

.cube:nth-child(2),
.cube:nth-child(2) div {
  z-index: 2;
  animation-delay: 0.16667s;
}

.cube:nth-child(3),
.cube:nth-child(3) div {
  z-index: 3;
  animation-delay: 0.25s;
}

.cube:nth-child(4),
.cube:nth-child(4) div {
  z-index: 4;
  animation-delay: 0.33333s;
}

.cube:nth-child(5),
.cube:nth-child(5) div {
  z-index: 5;
  animation-delay: 0.41667s;
}

.cube:nth-child(6),
.cube:nth-child(6) div {
  z-index: 6;
  animation-delay: 0.5s;
}

.cube:nth-child(7),
.cube:nth-child(7) div {
  z-index: 7;
  animation-delay: 0.58333s;
}

.cube:nth-child(8),
.cube:nth-child(8) div {
  z-index: 8;
  animation-delay: 0.66667s;
}

#vignette {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 4;
  background-image: -webkit-radial-gradient(50% 50%, ellipse cover, transparent, rgba(0, 0, 0, 0.5));
  background-image: -moz-radial-gradient(50% 50%, ellipse cover, transparent, rgba(0, 0, 0, 0.5));
}

#pos {
  width: 304px;
  margin: 0 auto;
  position: absolute;
  top: 50%;  /* position the top  edge of the element at the middle of the parent */
  left: 50%; /* position the left edge of the element at the middle of the parent */

  transform: translate(-50%, -50%);
}

#container {
  width: 100%;
  perspective: 2200px;
  padding: 20px 60px;
  position: relative;
  display: table-cell;
  vertical-align: middle;
}

.cube {
  width: 30px;
  height: 150px;
  position: relative;
  margin-right: 8px;
  float: left;
  transform-style: preserve-3d;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  animation: animCube;
  /* Safari and Chrome */
  animation-iteration-count: infinite;
}

.cube div {
  position: absolute;
  display: block;
  width: 30px;
  height: 150px;
}

.cube .center {
  width: 30px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.05);
  animation: animCenter;
  animation-iteration-count: infinite;
}

.cube .bottom {
  width: 30px;
  height: 10px;
  bottom: 0;
  transform: rotateX(90deg);
  transform-origin: center bottom;
  animation: animBottom;
  animation-iteration-count: infinite;
}

.cube .left {
  left: 0;
  transform: rotateY(90deg);
  transform-origin: left center;
  animation: animSide;
  animation-iteration-count: infinite;
}

.cube .right {
  right: 0;
  transform: rotateY(-90deg);
  transform-origin: right center;
  animation: animSide;
  animation-iteration-count: infinite;
}

.cube .left,
.cube .center,
.cube .right,
.cube .bottom,
.cube {
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}

.left,
.right {
  background: rgb(var(--main-purple));
  background: linear-gradient(0deg, rgba(var(--main-purple),1) 0%, rgba(var(--main-pink),1) 100%);
}
.left2,
.right2 {
   background: rgb(var(--main-purple));
  background: linear-gradient(0deg, rgba(var(--main-purple),1) 0%, rgba(var(--main-pink),1) 100%);
}
.center {
  background: rgb(var(--main-purple));
  background: linear-gradient(0deg, rgba(var(--main-purple),1) 0%, rgba(var(--main-pink),1) 100%);
}

.bottom {
   background: rgb(var(--main-purple));
  background: linear-gradient(0deg, rgba(var(--main-purple),1) 0%, rgba(var(--main-pink),1) 100%);
}




@keyframes animCube {
  30% {
    transform: translateZ(150px) translatex(0) translateY(0) rotatex(3deg) rotatey(0deg) rotateZ(0deg);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 12px 20px 1px rgba(0, 0, 0, 0.5);
  }
  100% {
    transform: translateZ(0px) rotatez(0deg);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), 0 0 0 0 transparent;
  }
}

@keyframes animSide {
  30% {
    width: 100px;
    background-color: #1d1c1f;
  }
  95% {
    width: 10px;
  }
}
@keyframes animBottom {
  30% {
    height: 100px;
  }
  95% {
    height: 10px;
  }
}
@keyframes animCenter /* Safari and Chrome */ {
  20% {
    background-color: #6a6371;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.15), inset 0 1px rgba(255, 255, 255, 0.5);
  }
  65% {
    box-shadow: 0 0 3px rgba(255, 255, 255, 0), inset 0 1px rgba(255, 255, 255, 0.25);
  }
}


@-webkit-keyframes animCube {
  30% {
    transform: translateZ(150px) translatex(0) translateY(0) rotatex(3deg) rotatey(0deg) rotateZ(0deg);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 12px 20px 1px rgba(0, 0, 0, 0.5);
  }
  100% {
    transform: translateZ(0px) rotatez(0deg);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), 0 0 0 0 transparent;
  }
}

@-webkit-keyframes animSide {
  30% {
    width: 100px;
    background-color: #1d1c1f;
  }
  95% {
    width: 10px;
  }
}
@-webkit-keyframes animBottom {
  30% {
    height: 100px;
  }
  95% {
    height: 10px;
  }
}
@-webkit-keyframes animCenter /* Safari and Chrome */ {
  20% {
    background-color: #6a6371;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.15), inset 0 1px rgba(255, 255, 255, 0.5);
  }
  65% {
    box-shadow: 0 0 3px rgba(255, 255, 255, 0), inset 0 1px rgba(255, 255, 255, 0.25);
  }
}










.range__slider {
  position: relative;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background:  transparent;
  margin-bottom: 8%;
  border-radius: 8px;
  box-shadow: 0 0 0px black!important;
}
.range__slider::before, .range__slider::after {
  position: absolute;
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
}
.range__slider::before {
  content: attr(data-min);
  left: 0;
  top: 10%;
}
.range__slider::after {
  content: attr(data-max);
  right: 0;
  top: 10%;
}
.range__slider .length__title::after {
  content: attr(data-length);
  position: absolute;
  right: -16px;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.range__slider option{
  color: #fff!important;
}input[type=range] {
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  padding: 5px!important;
  background-color: rgb(var(--main-purple));
  border-radius: 50px;
  margin: 0;
  border: 0;
  outline: none;
  background-size: 100% 2px;
  pointer-events: none;
  box-shadow: inset 0 0 4px #000000;
}
input[type=range]:active,
input[type=range]:focus {
  outline: none;
}
input[type=range] {
  -webkit-appearance: none;
  /* Hides the slider so that custom slider can be made */
  width: 100%;
  /* Specific width is required for Firefox. */
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
  /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  /* Hides the slider so custom styles can be added */
  background: transparent;
  border-color: transparent;
  color: transparent;
}
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  height: 28px;
  width: 28px;
  border-radius: 28px;
  border: solid 1px #b2b2b2;
  background-color: #fff;
  position: relative;
  z-index: 50;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: all;
  box-shadow: 0 1px 4px 0.5px rgba(0, 0, 0, 0.25);
}
/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  height: 28px;
  width: 28px;
  border-radius: 28px;
  border: solid 1px #b2b2b2;
  background-color: #fff;
  position: relative;
  z-index: 50;
  cursor: pointer;
  -moz-appearance: none;
  appearance: none;
  pointer-events: all;
  box-shadow: 0 1px 4px 0.5px rgba(0, 0, 0, 0.25);
}
/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  height: 28px;
  width: 28px;
  border-radius: 28px;
  border: solid 1px #b2b2b2;
  background-color: #fff;
  position: relative;
  z-index: 10000;
  cursor: pointer;
  appearance: none;
  pointer-events: all;
  box-shadow: 0 1px 4px 0.5px rgba(0, 0, 0, 0.25);
}
.multi-range-container {
  max-width: 400px;
}
.multi-range {
  position: relative;
  height: 50px;
  display: block;
  width: 100%;
}
.multi-range input[type=range] {
  position: absolute;
}
.range-color {
  border-radius: 50px;
  width: 100%;
  display: block;
  height: 10px;
  position: absolute;
  z-index: 10;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}
#slider {
 -webkit-appearance: none;
 width: calc(100% - (70px));
 height: 10px;
 border-radius: 5px;
 outline: none;
 padding: 0;
 margin: 0;
 cursor: pointer;
 box-shadow: none;
 background: rgb(var(--main-purple));
 border: 0px;
}
#slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgb(var(--main-pink));
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
#slider::-webkit-slider-thumb:hover {
  background: #d4d4d4;
  transform: scale(1.2);
}
#slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: black;
  cursor: pointer;
  transition: background 0.15s ease-in-out;
}
#slider::-moz-range-thumb:hover {
  background: #d4d4d4;
}
.comments {
  margin: 2.5rem auto 0;
}

.comment-wrap {
  margin-bottom: 1.25rem;
  display: table;
  width: 100%;
  min-height: 5.3125rem;
}
.swal-icon--success:after, .swal-icon--success:before{
  background: #171924!important;
}
.swal-icon--success__hide-corners{
 background: #171924!important;
}
.photo {
  padding-top: 0.625rem;
  display: table-cell;
  width: 3.5rem;
}
.comment-date img:first-child{
  border-radius: 50%;
  border: 2px solid rgba(var(--main-purple),1);
}
.photo .avatar {
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}

.comment-block {
  padding: 1rem;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  display: table-cell;
  vertical-align: top;
  border-radius: 10px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}
#gif_merkez{
  width: 100%;height: 100%;position: fixed;top:0;left:0;z-index: 99999999;
  will-change: transform;
  transform: translate(0%,200%);
  transition: 250ms transform;  
  display: none;
}.gif-box {
 margin: 0.5rem;
 display: inline-block;
 /* border: 1px solid black; */
 height: 100px;
 width: 20%;
 margin-left: 3%;
}
#log_img{
  background:linear-gradient(to bottom, rgba(18, 21, 31,0), rgba(18, 21, 31, 1)),url('https://www.visqo.online/graph/walter.webp');
  position:absolute;width: 100%;height: 100%;top:0;left:0;
  background-position: center!important;background-size: cover!important;z-index: -1;opacity: 1;
  transition: 250ms;display: block;
}
.changee2{
  background-position: center!important;
  background-repeat: no-repeat!important;
  background-size: cover!important;
  transition: background .5s;
  display: none;
  -webkit-mask-image: linear-gradient(to top, transparent 20%, black 100%);
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: 0.7;
  mask-image: linear-gradient(to top, transparent 20%, black 100%);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url(https://www.visqo.online/graph/peaky.webp);
}
#remove_affiche{
  visibility: visible;
}
#detail_back{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  filter: blur(3px);
  -webkit-filter: blur(3px);
  background-size: cover;
  background-position: center;
}
.detail_info{
  background: transparent;width: 100%;padding-top: 50px;padding-bottom: 50px;
  background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;
  position: relative;
}
@media only screen and (max-width: 600px) {
  .gif-box {
   width: 44%;
 }
 .detail_info{
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%);
}
.liste_sec{
  max-width: 100%!important;
}
#remove_affiche{
  visibility: hidden;
  position: absolute;
}
.changee2{ 
  display: block;
}

}
.main_button1{
  background: rgb(var(--main-pink));padding: 5px 20px 5px 20px;border-radius: 10px;margin-right: 20px;display: flex;align-items: center;cursor: pointer;
}
.main_button2{
  border:1px solid rgba(255,255,255,0.5);padding: 5px 20px 5px 20px;border-radius: 10px;display: flex;align-items: center;cursor: pointer;
}
.main_button3{
  background: rgb(var(--main-pink));padding: 10px 40px 10px 40px;border-radius: 10px;margin-right: 20px;display: flex;align-items: center;
}
.main_button4{
  border:1px solid rgba(255,255,255,0.5);padding: 10px 40px 10px 40px;border-radius: 10px;display: flex;align-items: center;
}
.log_div{
  display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.info_div {
  color: #fff;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 200px;
    text-align: center;
}
.info_div h1{
  font-size: 40px;margin-top: 50px;
    font-weight: bold;font-family: "Quicksand"!important;
}
.info_div p{
  font-size: 18px;
    opacity: 0.7;
    margin-top: 40px;
    margin-bottom: 40px;font-family: "Quicksand"!importan
}
.info_buttons{
  display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
    color: #fff;
}
.gif-box img{
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.65) 0px 0px 4px 2px;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}
#results {
  margin: 0 auto;
  width: 100%;
}
.gif-box h6 {
  font-weight: bold;
  display: none;
  text-align: center;
}

#gif_ana{
  width: 50%;
  padding: 0;
  margin:0 auto;
  padding: 0;
  background: #12151f;
  margin-top: 2%;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 16px;
  overflow: hidden;
  height: 50%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,0%);
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}
#gif_input{
  width:100%;display:block;margin:0;padding:5px 10px;
}
#gif_input input{
  width:100%;display:block;outline:0;border:0;background:rgba(0,0,0,0.15);color:rgba(255,255,255,0.8);padding:10px;font-size:14px;border:1px solid rgba(255,255,255,0.15);border-radius:6px;
}
#gif_input input::placeholder{
  color: rgba(255,255,255,0.5);
}
.comment-block textarea:focus-visible,.comment-block textarea:active {
  width: 100%;
  resize: none;
  background: rgba(0,0,0,0.4);
  outline: 0px;
  border: 0px;
  color: #fff;
  padding: 20px;
  border-radius: 10px;
}
.mobil-icons{
 display: inline-block;
 padding: 8px 0px 0px 12px;
 border-radius: 50%;
 height: 40px;
 width: 40px;
 background: rgba(255,255,255,0.2);
 margin-bottom: 2%;
}
.comment-block textarea {
  width: 100%;
  resize: none;
  background: rgba(0,0,0,0.2);
  outline: 0px;
  border: 0px;
  color: #fff;
  padding: 20px;
  border-radius: 10px;
}
.player-container {
  display: table;
  background-color: #222;
  border: 1px solid black;
  margin-bottom: 20px;
}
.player-container #playing {
  display: none;
}
.player-container .giff {
  visibility: hidden;
  width: 100.5%;
  border-radius: 0px;
  margin-top: -1%;
  margin-left: -0.09%;
}
.grid-item{
  margin-bottom:3%;
}

.listHead {
  color: #fff;
  
  width: 100%;
}.listHead h3 {
  font-size: 24px;
  font-weight: 700;
  color: rgb(var(--main-white));
}
.listTitle {
  font-size: 1.25em;
  font-weight: 700;
  color: rgb(var(--main-white));
  text-shadow: 0px 0 10px black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.5em;
  text-transform: capitalize;
  z-index: 999;
}.listInfo {
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  display: inline-block;
  padding: 0.25em 1em;
  margin-bottom: 2em;
  border-radius: 2em;
  font-size: 0.875em;
  z-index: 999;
}.otherPoster {
  display: grid;
  grid-template-columns: repeat(2, 0fr);
  padding: 0;

}
.otherPoster img {
  width: 100px;
  height: 100px;
  transition: 1000ms;
  border-radius: 0px;
  box-shadow: 0 0 10px black;
  opacity: 0.5;
}
.listArea {
  display: grid;
  grid-template-columns: repeat(4, 24%);
  grid-gap: 1em;
}
.listPoster {
  position: relative;
  overflow: hidden;
  padding: 3em 2em;  
  border-radius: 10px;

}

@media only screen and (max-width: 600px) {
  .listArea {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    grid-gap: 0.5em;
  }
}
.listSingle {
  position: relative;
  text-align: center;
  line-height: 1.5;
}.followCount {
  position: absolute;
  top: -1em;
  right: -1em;
  background: linear-gradient(to top, rgb(var(--main-color)), rgb(var(--main-color)));
  border-radius: 2em;
  padding: 0.5em 1em;
  color: #000;
  font-weight: bold;
  font-size: 0.75em;
}.listPoster img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-filter: blur(15px)!important;
  opacity: 0.7;
  filter: blur(15px)!important;

}
#playing_gif{
 position: absolute;
 top: 50%!important;
 z-index: 1;
 left: 50%!important;
 -webkit-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);
 width: 100px;
 height: 100px;
 line-height: 90px;
 text-align: center;
 background: #424242;
 font-size: 18px;
 color: #fff;
 border-radius: 50%;
 opacity: 1;
 border: 5px dashed #fff;
 cursor: pointer;
 text-decoration: none;
 -webkit-transition: all 200ms;
 transition: all 200ms;
}

#stop_gif{
  position: absolute;
  bottom: -1%;
  left: -0.09%;
  z-index: 99999999;
  width: 100%;
  /* height: 100%; */
  padding: 5px;
  background: rgba(29, 32, 43);
  color: #fff;
}
.player-container #playing:checked ~ .btn-play {
  display: none;
}
.player-container #playing:checked ~ .btn-stop {
  display: block;
}
.switch {
  height: 20px;
  display: block;
  position: relative;
  cursor: pointer;
}
.switch input {
  display: none;
}
.switch input + span {
  padding-left: 38px;
  min-height: 20px;
  line-height: 20px;
  display: block;
  color: #3F4656;
  position: relative;
  white-space: nowrap;
}
.switch input + span:not(:empty) {
  padding-left: 46px;
}
.switch input + span:before, .switch input + span:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 10px;
}
.switch input + span:before {
  top: 0;
  left: 0;
  width: 38px;
  height: 20px;
  border: 1px solid #2F3545;
  transition: all 0.3s ease;
}
.switch input + span:after {
  width: 14px;
  height: 14px;
  background: #2F3545;
  top: 3px;
  left: 3px;
  transition: all 0.45s ease;
}
.switch input + span + svg {
  display: none;
}
.switch input:checked + span:before {
  background: #5628EE;
  border-color: #5628EE;
}
.switch input:checked + span:after {
  background: #fff;
  transform: translate(18px, 0);
}
.form-row [type="checkbox"]:not(:checked),
.form-row [type="checkbox"]:checked {
  position: absolute;
  left: 0;
  opacity: 0.01;
}
.form-row [type="checkbox"]:not(:checked) + label,
.form-row [type="checkbox"]:checked + label {
  position: relative;
  padding-left: 2.3em;
  font-size: 1.05em;
  line-height: 1.7;
  cursor: pointer;
}

/* checkbox aspect */
.form-row [type="checkbox"]:not(:checked) + label:before,
.form-row [type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.4em;
  height: 1.4em;
  border: 1px solid #aaa;
  background: #FFF;
  border-radius: .2em;
  box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(203, 34, 237, .2);
  -webkit-transition: all .275s;
  transition: all .275s;
}

/* checked mark aspect */
.form-row [type="checkbox"]:not(:checked) + label:after,
.form-row [type="checkbox"]:checked + label:after {
  content: '✕';
  position: absolute;
  top: .525em;
  left: .1em;
  font-size: 1.375em;
  color: #CB22ED;
  line-height: 0;
  -webkit-transition: all .2s;
  transition: all .2s;
}

/* checked mark aspect changes */
.form-row [type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0) rotate(45deg);
  transform: scale(0) rotate(45deg);
}

.form-row [type="checkbox"]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
}

/* Disabled checkbox */
.form-row [type="checkbox"]:disabled:not(:checked) + label:before,
.form-row [type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #e9e9e9;
}

.form-row [type="checkbox"]:disabled:checked + label:after {
  color: #777;
}

.form-row [type="checkbox"]:disabled + label {
  color: #aaa;
}

/* Accessibility */
.form-row [type="checkbox"]:checked:focus + label:before,
.form-row [type="checkbox"]:not(:checked):focus + label:before {
  box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 6px rgba(203, 34, 237, .2);
}

.switch:hover input:not(:checked) + span:before {
  border-color: #23C4F8;
} .Switch > span {
  position: relative;
  padding-top: 0.3em;
  padding-left: 3.2em;
  user-select: none; /* just for the demo */
}
#demo1{
  color: #fff;
  font-size: 13px;
  text-align: center;
}
.Switch > input[type='checkbox'] {
  display: none;
}

.Switch > input[type=checkbox]:checked ~ label {
  background-color: #4fbe79;
}
.spoiler { margin: 0 auto; cursor: pointer; position: relative; font-size: .9em;transition: 500ms; }
.spoiler.on { color: rgba(255,255,255,0); text-shadow: 0 0 10px #fff;transition: 500ms;margin-top: 1%; }
.spoiler.on:hover:before { content: 'GÖSTER'; position: absolute; text-shadow: none;}
.spoiler.on:before { content: 'SPOILER'; position: absolute; text-shadow: none; 
  color: #fff; width: 140px; height: 28px; line-height: 28px; text-align: center; left: 50%; top: 50%; 
  background: rgb(178,67,247);
  animation: anim 1500ms infinite;
  border-radius: 5px;

  background: linear-gradient(90deg, rgba(178,67,247,1) 0%, rgba(123,60,227,1) 100%); margin-left: -70px; margin-top: -14px; }
  @keyframes anim {
    0%    { transform: scale(1.0); }
    25%   { transform: scale(1.1); }
    50%   { transform: scale(1.0); }
    75%  { transform: scale(1.1); }
    100%  { transform: scale(1.0); }
  }
  .player-container .btn {
    display: block;
    width: 100%;
    padding: 1rem 1.6rem;
    border-top: 1px solid white;
    font-family: Arial, sans-serif;
    color: white;
    cursor: pointer;
  }
  .player-container .btn:hover {
    background-color: #444;
  }
  .player-container .btn.btn-stop {
    display: none;
  }
  .player-container .btn.btn-stop .icon-stop {
    font-size: 135%;
    line-height: 1px;
  }
  .comment-text {
    margin-bottom: 1.25rem;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
  }

  .bottom-comment {
    color: #acb4c2;
    font-size: 0.875rem;
  }

  .comment-date {
    float: left;
        position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .comment-actions {
    float: right;
  }
  .comment-actions li {
    display: inline;
    margin: -2px;
    cursor: pointer;
  }
  .comment-actions li.complain {
    padding-right: 0.75rem;
    border-right: 1px solid #e1e5eb;
  }
  .comment-actions li.reply {
    padding-left: 0.75rem;
    padding-right: 0.125rem;
  }
  .comment-actions li:hover {
    color: #0095ff;
  }

  #scr .dropdown {
    --text: #3F4656;
    --border: #2F3545;
    --borderActive: #23C4F8;
    --background: #151924;
    --arrow: #6C7486;
    --arrowActive: #E4ECFA;
    --listText: #99A3BA;
    --listBackground: #F5F9FF;
    --listActive: #E4ECFA;
    --listTextActive: #6C7486;
    --listBorder: none;
    --textFilled: #99A3BA;
    width: 100%;
    position: relative;
  }
  #scr .dropdown select {
    display: none;
  }
  #scr .dropdown > span {
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 6px;
    margin-bottom: 5.5%;
    display: block;
    position: relative;
    color: var(--text);
  }
  .preview-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 35px;
    padding-bottom: 35px;
  }

  .title {
    margin-bottom: 0;
    font-size: 2.25rem;
    letter-spacing: 0.5px;
  }

  .title-sub {
    font-size: 1.4rem;
    letter-spacing: 0.25px;
    margin-bottom: 40px;
  }

  .mb-4 {
    margin-bottom: 40px;
  }

  .storyline {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    position: fixed;
    overflow: hidden;
    letter-spacing: 2.8px;
    left: 0;
    top: 0;
    z-index: 99999999;
  }
  .storyline-header, .storyline-footer {
    position: absolute;
    left: 0;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 15px;
    width: 100%;
    z-index: 100;
  }
  .storyline-header {
    top: 0;
  }
  .storyline-footer {
    bottom: 0;
  }
  .storyline-footer .storyline-btn {
    margin-left: auto;
  }
  .storyline-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.1rem;
    text-transform: uppercase;
    color: #ffffff;
  }
  .storyline-btn {
    position: relative;
    border-radius: 10px;
    color: #ffffff;
    z-index: 1;
    padding: 5px 30px 6px 30px;
    font-weight: 600;
    display: flex!important;
    justify-items: start;
    text-transform: uppercase;
    align-items: center;
    text-decoration: none;
    letter-spacing: 0;
    background:rgba(var(--main-purple),0.7);
  }
  .storyline-btn:disabled {
    pointer-events: none;
  }
  .storyline-image {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
  }
  .storyline-image, .storyline-image-author {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .storyline-image-author {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .storyline-author {
    width: 100%;
    color: #ffffff;
    font-size: 1.1rem;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .storyline-indicator {
    list-style: none;
    margin-top: -1px;
    margin-bottom: 0;
    padding-left: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  .storyline-indicator .indicator-item {
    position: relative;
    flex: 1 0 auto;
    height: 2px;
    margin-left: 5px;
    background-color: rgba(255, 255, 255, 0.3);
    overflow: hidden;
  }
  .storyline-indicator .indicator-item .indicator-bar {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    will-change: transform;
    transform: scaleX(0);
    transform-origin: left center;
  }
  .storyline-indicator .indicator-item.item-loading .indicator-bar {
    -webkit-animation: loading 3s linear forwards;
    animation: loading 3s linear forwards;
  }
  .storyline-indicator .indicator-item.item-loaded .indicator-bar {
    transform: scaleX(1);
  }
  .storyline-control {
    position: absolute;
    height: 100%;
    width: 50%;
    top: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
  }
  .storyline-control-prev {
    left: 0;
  }
  .storyline-control-next {
    right: 0;
  }
  .storyline-slider {
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  .storyline-slide {
    display: none;
  }
  .storyline-slide:before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
  }
  .storyline-slide.slide-active {
    display: block;
  }
  .storyline-text {
    position: absolute;
    width: 100%;
    padding: 15px 30px;
    font-weight: 600;
    line-height: 1.75;
    font-size: 1.6rem;
    letter-spacing: 0;
    color: #ffffff;
  }
  .storyline-text.text-x-left {
    left: 0;
    text-align: left;
  }
  .storyline-text.text-x-right {
    right: 0;
    text-align: right;
  }
  .storyline-text.text-x-center {
    text-align: center;
  }
  .storyline-text.text-y-top {
    top: 30px;
  }
  .storyline-text.text-y-center {
    top: 50%;
    transform: translateY(-50%);
  }
  .storyline-text.text-y-bottom {
    bottom: 50px;
  }

  @-webkit-keyframes loading {
    0% {
      transform: scaleX(0);
    }
    100% {
      transform: scaleX(1);
    }
  }

  @keyframes loading {
    0% {
      transform: scaleX(0);
    }
    100% {
      transform: scaleX(1);
    }
  }
  #scr .dropdown > span {
    cursor: pointer;
    padding: 10px 26px;
    border-radius: 30px;
    margin-top: 0%;
    margin-bottom:5%;
    display: block;
    position: relative;
    color: var(--text);
    background: rgba(var(--main-black),1);
  }

  #scr .dropdown > span:before, #scr .dropdown > span:after {
    content: "";
    display: block;
    position: absolute;
    width: 8px;
    height: 2px;
    border-radius: 1px;
    top: 50%;
    right: 15px;
    background: var(--arrow);
  }
  #scr .dropdown > span:before {
    margin-right: 4px;
    transform: scale(0.96, 0.8) rotate(50deg);
  }
  #scr .dropdown > span:after {
    transform: scale(0.96, 0.8) rotate(-50deg);
  }
  #scr .dropdown ul {
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    z-index: 99999999;
    background: rgba(var(--main-white));
    color: rgb(var(--main-black));
    border-radius: 6px;
    overflow: hidden;
    transform-origin: 0 0;
    border: 1px solid var(--listBorder);
  }
  #scr .dropdown ul li {
    opacity: 0;
    transform: translate(6px, 0);
  }
  #scr .dropdown ul li a {
    cursor: pointer;
    display: block;
    padding: 10px 16px;
    color: rgb(var(--main-black));
    text-decoration: none;
    outline: none;
    position: relative;
  }
  #scr .dropdown ul li a:hover {
    color: var(--listTextActive);
  }
  #scr .dropdown ul li.active a {
    color: rgb(var(--main-white));
    background: rgba(var( --main-black),1);
  }
  #scr .dropdown ul li.active a:before, #scr .dropdown ul li.active a:after {
    --scale: .6;
    content: "";
    display: block;
    width: 10px;
    height: 2px;
    position: absolute;
    right: 17px;
    top: 50%;
    opacity: 0;
    background: var(--listText);
  }
  #scr .dropdown ul li.active a:before {
    transform: rotate(45deg) scale(var(--scale));
  }
  #scr .dropdown ul li.active a:after {
    transform: rotate(-45deg) scale(var(--scale));
  }
  #scr .dropdown ul li.active a:hover:before, #scr .dropdown ul li.active a:hover:after {
    --scale: .9;
    opacity: 1;
  }
  #scr .dropdown ul li:first-child a {
    border-radius: 6px 6px 0 0;
  }
  #scr .dropdown ul li:last-child a {
    border-radius: 0 0 6px 6px;
  }
  #scr .dropdown.filled > span {
    color: #fff;
    font-size: 13px;
  }
  .dropdown.open > span {
    border-color: var(--borderActive);
  }
  #scr .dropdown.open > span:before, #scr .dropdown.open > span:after {
    background: var(--arrowActive);
  }
  #scr .dropdown.open > span:before {
    transform: scale(0.96, 0.8) rotate(-50deg);
  }
  #scr .dropdown.open > span:after {
    transform: scale(0.96, 0.8) rotate(50deg);
  }
  #scr .dropdown.open ul {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translate(0, 12px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
  }
  #scr .dropdown.open ul li {
    opacity: 1;
    transform: translate(0, 0);
  }
  #scr .dropdown.open ul li:nth-child(1) {
    transition-delay: 80ms;
  }
  #scr .dropdown.open ul li:nth-child(2) {
    transition-delay: 160ms;
  }
  #scr .dropdown.open ul li:nth-child(3) {
    transition-delay: 240ms;
  }
  #scr .dropdown.open ul li:nth-child(4) {
    transition-delay: 320ms;
  }
  #scr .dropdown.open ul li:nth-child(5) {
    transition-delay: 400ms;
  }
  #scr .dropdown.open ul li:nth-child(6) {
    transition-delay: 480ms;
  }
  #scr .dropdown.open ul li:nth-child(7) {
    transition-delay: 560ms;
  }
  #scr .dropdown.open ul li:nth-child(8) {
    transition-delay: 640ms;
  }
  #scr .dropdown.open ul li:nth-child(9) {
    transition-delay: 720ms;
  }
  #scr .dropdown.open ul li:nth-child(10) {
    transition-delay: 800ms;
  }
  #scr .col-md-3 .dropdown, #scr .col-md-2 .dropdown{
    width: 100%;
  }
  #scr select {
    --text: #3F4656;
    --border: #2F3545;
    --background: #151924;
  }
  #scr select.dropdown {
    padding: 9px 16px;
    border-radius: 6px;
    color: var(--text);
    border: 1px solid var(--border);
    background: var(--background);
    line-height: 22px;
    font-size: 16px;
    font-family: inherit;
    -webkit-appearance: none;
  }

  #visqo_tanitim{
    color: #fff;
  }
  #visqo_tanitim li{
    list-style-type: circle;color: #fff;display:list-item;
    list-style-position:outside;
  }
  #admin_info{
    background: rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 20px 50px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    color: #fff;
    margin-bottom: 10px;
    text-align: center;
  }
  #admin_info p{
    margin: 0 auto;
  }
  #admin_icon{
    color: #fff;
    text-align: center;
    font-size: 27px;
    margin-bottom: 10px;

  }


  #my-video{
    width: 100%;
  }

  progress:not(value) {
  }


  progress[value] {
    appearance: none;

    border: none;

    width: 100%; height: 5px;

    background-color: rgba(255,255,255,0.4);
    border-radius:10px;
    box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

    color: royalblue;

    position: relative;
    position: absolute;
    bottom: 0;
    left: 0;
  }


  progress[value]::-webkit-progress-bar {
    background-color: #2b3142;
    border-radius: 20px;
  }

  progress[value]::-webkit-progress-value {
    position: relative;

    background-size: 35px 20px, 100% 100%, 100% 100%;border-radius: 10px;


    /* Let's animate this */
    animation: animate-stripes 5s linear infinite;
  }

  @keyframes animate-stripes { 100% { background-position: -100px 0; } }

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after {
  /* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
  content: '';
  position: absolute;
  
  width:5px; height:5px;
  top:7px; right:7px;
  
  background-color: white;
  border-radius: 100%;
}

/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar {
  /* Gradient background with Stripes */
  background: red;
  
  background-size: 35px 20px, 100% 100%, 100% 100%;
  border-radius:10px;
  
  /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

/* Fallback technique styles */
.progress-bar {
  background-color: whiteSmoke;
  border-radius:10px;
  box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

  /* Dimensions should be similar to the parent progress element. */
  width: 100%; height:20px;
}

.progress-bar span {
  background-color: royalblue;
  border-radius: 10px;
  
  display: block;
  text-indent: -9999px;
}

p[data-value] { 

  position: relative; 
}

/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

p[data-value]:after {
  content: attr(data-value) '%';
  position: absolute; right:0;
}





.html5::-webkit-progress-value,
.python::-webkit-progress-value  {
  /* Gradient background with Stripes */
  background-image:
  -webkit-linear-gradient( 135deg,
   transparent,
   transparent 33%,
   rgba(0,0,0,.1) 33%,
   rgba(0,0,0,.1) 66%,
   transparent 66%),
  -webkit-linear-gradient( top,
    rgba(255, 255, 255, .25),
    rgba(0,0,0,.2)),
  -webkit-linear-gradient( left, #09c, #f44);
}

.css3::-webkit-progress-value,
.php::-webkit-progress-value 
{
  /* Gradient background with Stripes */
  background-image:
  -webkit-linear-gradient( 135deg,
   transparent,
   transparent 33%,
   rgba(0,0,0,.1) 33%,
   rgba(0,0,0,.1) 66%,
   transparent 66%),
  -webkit-linear-gradient( top,
    rgba(255, 255, 255, .25),
    rgba(0,0,0,.2)),
  -webkit-linear-gradient( left, #09c, #ff0);
}

.jquery::-webkit-progress-value,
.node-js::-webkit-progress-value 
{
  /* Gradient background with Stripes */
  background:rgb(var(--main-purple));
}

/* Similarly, for Mozillaa. Unfortunately combining the styles for different browsers will break every other browser. Hence, we need a separate block. */

.html5::-moz-progress-bar,
.php::-moz-progress-bar {
  /* Gradient background with Stripes */
  background-image:
  -moz-linear-gradient( 135deg,
   transparent,
   transparent 33%,
   rgba(0,0,0,.1) 33%,
   rgba(0,0,0,.1) 66%,
   transparent 66%),
  -moz-linear-gradient( top,
    rgba(255, 255, 255, .25),
    rgba(0,0,0,.2)),
  -moz-linear-gradient( left, #09c, #f44);
}

.trash {
  background:#ff4400;
  width: 66px;
  height: 80px;
  display: inline-block;
  margin:0 auto;
  opacity: 0;
  position: relative;
  -webkit-border-bottom-right-radius: 6px;
  -webkit-border-bottom-left-radius: 6px;
  -moz-border-radius-bottomright: 6px;
  -moz-border-radius-bottomleft: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.trash:after {
  content: '';
  position: absolute;
  left: -99px;
  right: 0;
  bottom: -50px;
  width: 300px;
}
.trash span {
  position: absolute;
  height: 12px;
  background: #ff4400;
  top: -19px;
  left: -10px;
  right: -10px;
  
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform: rotate(0deg);
  transition: transform 250ms;
  transform-origin: 19% 100%;
}
.trash span:after {
  content: '';
  position: absolute;
  width: 27px;
  height: 7px;
  background: #ff4400;;
  top: -10px;
  
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transform: rotate(0deg);
  transition: transform 250ms;
  transform-origin: 19% 100%;
  left: 27px;
}


.trash i {
  position:relative;
  width: 8px;
  height:50px;
  background:#3b1000;
  display:block;
  margin:14px auto;
  border-radius: 5px;
}
.trash i:after {
  content: '';
  width: 8px;
  height: 50px;
  background: #3b1000;
  position: absolute;
  left: -18px;
  border-radius: 5px;
}
.trash i:before {
  content: '';
  width: 8px;
  height: 50px;
  background: #3b1000;
  position: absolute;
  right: -18px;
  border-radius: 5px;
}

.trash:hover span {
  transform: rotate(-45deg);
  transition: transform 250ms;
}

#dot{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: .1;
  display: block;
  width: 100%;
  height: 100%;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAE0lEQVR4AWMAgv9AwADCYAIrBwDOZhjoRPQ1cwAAAABJRU5ErkJggg==);
  content: '';
  bottom: 0;-webkit-filter:invert(100%);
  z-index: 0;
}

#log_div{
  position: absolute;
  top: 80%; 
  left: 50%;

  transform: translate(-50%, -70%); width: 100%;
}


#suggest_movie{
  background-size: cover!important;
  background-position: center!important;
  border-radius: 20px;border: 1px solid rgba(255,255,255,0.1);
}
.stories_title{
  margin-bottom: 2%;padding-bottom: 15px;font-size: 40px; font-weight: bold;
  text-align: center;border-bottom: 1px solid rgba(255,255,255,0.05);font-family: 'Bauhaus 93';
}
#stories_logo{
  object-fit: contain; position: absolute;
  top: 80%;  
  left: 50%;
  transform: translate(-50%, -50%);width: 100%;height: 40px;
}
#shape_div{
  width: 100%;height: 300px;
  background-size: contain!important;
  background-repeat: no-repeat!important;
  background-position: center!important;
}
#shape_div div{
  text-align: center;color: #fff;font-weight: bold;
}
#shape_div div p{
  width: 25%;
  margin: 0 auto;
  text-align: center;
}
#shape_div div h1{
  font-family: 'Space Mono', monospace;
  font-size: 80px;
  padding-top: 50px;
}
.watch_div{
  transition: 300ms;
  width: 100%;height: 200px!important;
  background-position: center!important;background-size: cover!important;border-radius: 5px;cursor: pointer;transition: 500ms;
}
.absolute_text_left{
  position: absolute;bottom:0%;left:5%;text-align: left;width: 70%;
}

#genre_add{
  position: fixed;left:0;top:0;
  background:rgba(23, 25, 36,0.8);
  width: 100%;height: 100%;z-index: 9999999;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);display: block;overflow-y: scroll;
}
.eklediklerim{
  border-bottom: 1px solid rgba(255,255,255,0.1);padding-bottom: 10px;margin-bottom: 10px;
}
#reload{
  cursor: pointer;border-radius: 10px;display: none;margin-top: 5%;
}


:root {
  --font-barlow: "quicksand", sans-serif;
  --font-barlowCondensed: "quicksand", sans-serif;
  --time-nav-hover: 0.25s;
  --color-fire: #E30000;
  --color-black: #191919;
  --color-grey-5: #FBFBFB;
  --color-grey-10: transparent;
  --color-grey-cool-10: #EEEEEF;
  --color-grey-15: #E8E8E8;
  --color-grey-20: #D5D6D8;
  --color-grey-60: #ABADB1;
  --color-grey-70: #888891;
  --color-grey-80: #6B6A6A;
  --color-grey-85: #59595F;
  --shadow-fire:
  0 4px 12px 4px rgba(227,0,0,0.2),
  0 1px 3px 0 rgba(137,7,7,0.4) ;
  --focus-style: dotted 2px var(--color-black);
  --focus-offset: 2px;
}

#inputContainer {

  display: flex;
  flex-flow: column;
  justify-content: center;
  cursor: pointer;
}

.inputGroup {
  display: block;
  margin: 0 0 1.5em;
}

.segmentedControl--group .label {
  display: block;
  font-size: 1.5em;
  font-weight: 700;
  font-family: var(--font-barlowCondensed);
  line-height: 1.25em;
  margin: 0 0 0.6em;
  padding: 0;
  cursor: pointer;
}

.segmentedControl {
  --options: 2;
  --options-active: 1;
  --options-gap: .5em;
  background: var(--color-grey-10);
  border-radius: 0.25em;
  position: relative;
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
}
.segmentedControl .segmentedControl--group {
  flex: 0 0 auto;
  margin: var(--options-gap);
  width: calc((100% - ((var(--options)*var(--options-gap))*2)) / var(--options));
  display: flex;
  flex-flow: row;
  justify-content: stretch;
  align-items: stretch;
}
.segmentedControl .segmentedControl--group input {
  opacity: 0;
  position: absolute;
}
.segmentedControl .segmentedControl--group input + label {
  border-radius: 0.25em;
  flex: 1 1 100%;
  font-size: 1.25em;
  font-weight: normal;
  font-family: var(--font-barlow);
  line-height: 1;
  margin: 0;
  padding: 0.5em 0;
  position: relative;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  z-index: 1;
}
.segmentedControl .segmentedControl--group input + label::before, .segmentedControl .segmentedControl--group input + label::after {
  border-radius: inherit;
  content: "";
  display: block;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}
.segmentedControl .segmentedControl--group input + label::before {
  background: var(--color-grey-20);
  transition: opacity 0.15s ease;
}
.segmentedControl .segmentedControl--group input + label::after {
  background: rgb(var(--main-purple));
  box-shadow: rgb(var(--main-purple));
  transition: opacity 0.15s ease;
}

.segmentedControl .segmentedControl--group input:focus + label {
  outline: none;
}
.segmentedControl .segmentedControl--group input:focus-visible + label {
  outline: var(--focus-style);
  outline-offset: var(--focus-offset);
}
.segmentedControl .segmentedControl--group input:-moz-focusring + label {
  outline: var(--focus-style);
  outline-offset: var(--focus-offset);
}
.segmentedControl .segmentedControl--group input:checked + label {
  background: var(--color-grey-10);
  color: #fff;
  font-weight: 700;
}
.segmentedControl .segmentedControl--group input:checked + label::after {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: no-preference) {
  .segmentedControl .segmentedControl--group input + label {
    transition: color 0.2s ease;
  }
  .segmentedControl .segmentedControl--group input + label::before {
    transition: opacity 0.3s ease;
  }
  .segmentedControl .segmentedControl--group input + label::after {
    transform: scale(0.85, 0.5);
    transition: opacity 0.15s ease, transform 0.3s cubic-bezier(0, 0.99, 0.52, 1.29);
  }
  .segmentedControl.useSlidingAnimation::before {
    background: rgb(var(--main-purple));
    border-radius: 0.375em;
    box-shadow: rgb(var(--main-purple));
    content: "";
    display: block;
    height: calc(100% - (var(--options-gap)*2));
    position: absolute;
    top: var(--options-gap);
    left: var(--options-gap);
    transform: translateX(calc(             (100% + (var(--options-gap) * 2) ) * (var(--options-active) - 1)          ));
    transition: transform cubic-bezier(0.8, 0.34, 0.28, 1.15) 0.35s;
    width: calc((100% - ((var(--options)*var(--options-gap))*2)) / var(--options));
  }
  .segmentedControl.useSlidingAnimation .segmentedControl--group input + label {
    background: none;
    transition: color 0.3s ease;
  }
  .segmentedControl.useSlidingAnimation .segmentedControl--group input + label::after {
    content: none;
  }
  .segmentedControl.useSlidingAnimation .segmentedControl--group input:checked + label:hover::before {
    opacity: 0;
  }
}
/* utilities */
.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.hidden {
  display: none !important;
}

.offscreen {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}



.menu3{
  display: none;
  position: fixed;
}
.menu3 a {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  color: #fff;
  background: transparent;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid rgba(255,255,255,0.2);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  font-size: 24px;
  margin: 3px;
  padding-top: 9px;
  transition: all 0.3s ease;
}
.menu1 {
  position: fixed;
  bottom: 100px;
  left: 15px;
  width: 50px;
  height: 50px;
  z-index: 9999999;
}
.menu1 .link1 {
  z-index: 5;
  width: 50px;
  height: 50px;
  font-size: 34px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 10px 10px 10px;

}
.menu1 .link2 {
  z-index: 4;
  transition-delay: 0.2s;
  transform: rotate(180deg);
  display: flex;
  justify-content: center;
  align-items: center;padding: 10px;visibility: hidden;
}
.menu1 .link3 {
  z-index: 3;
  transition-delay: 0.15s;
  transform: rotate(180deg);
  display: flex;
  justify-content: center;
  align-items: center;padding: 10px;visibility: hidden;
}
.menu1 .link4 {
  z-index: 2;
  transition-delay: 0.1s;
  transform: rotate(180deg);
  display: flex;
  justify-content: center;
  align-items: center;padding: 10px;visibility: hidden;
}
.menu1 .link5 {
  z-index: 1;
  transition-delay: 0.05s;
  transform: rotate(180deg);
  display: flex;
  justify-content: center;
  align-items: center;padding: 10px;
}
.menu1.active .link1 {
  transform: rotate(135deg);
}
.menu1.active .link2 {
  transform: translate(20px, -75px) rotate(0);visibility: visible;
  transition-delay: 0.05s;
}
.menu1.active .link3 {
  transform: translate(75px, -50px) rotate(0);visibility: visible;
  transition-delay: 0.1s;
}
.menu1.active .link4 {
  transform: translate(90px, 5px) rotate(0);visibility: visible;
  transition-delay: 0.15s;
}
.menu1.active .link5 {
  transform: translate(150px, 0) rotate(0);
  transition-delay: 0.2s;
}
/*

Skin Netflix v2.0.2
Created by: PingO
Email: gabriel.alvikar@gmail.com

Ocean Skin For JW Player
https://bit.ly/3kVPdo9

*/

/* SKIN CSS */
:root {
  --bg-red: rgb(var(--main-pink));
  --bg-white: #f7f7f7;
  --bg-black: #222222;
}
.jw-title-primary, .jw-title-secondary{
  white-space: normal!important; font-family: "Quicksand"!important;
}
/* Added New Title - 03-31-22 */
.jw-title {
position: absolute!important;
    top: 30%!important;
    left: 0%!important;
    width: 50%!important;
    transform: translate(0%,-50%);
   
}
.jwplayer.jw-skin-netflix .jw-title-primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  color: #e6e6e6;
  margin: 50px 0 0 50px;
  font-family: "Rubik", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

.jwplayer.jw-skin-netflix .jw-title-secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  color: #e6e6e6;
  margin: -60px 0 0 50px;
  font-family: "Rubik", Arial, sans-serif;
  font-weight: 500;
}

.jwplayer.jw-skin-netflix.jw-breakpoint-1 .jw-title-primary,
.jwplayer.jw-skin-netflix.jw-breakpoint-0 .jw-title-primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: 30px 0 0 25px;
  font-size: 12px;
}

.jwplayer.jw-skin-netflix.jw-breakpoint-1 .jw-title-secondary,
.jwplayer.jw-skin-netflix.jw-breakpoint-0 .jw-title-secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: -26px 0 0 25px;
  font-size: 8px;
}

.jwplayer.jw-skin-netflix.jw-breakpoint-3 .jw-title-primary,
.jwplayer.jw-skin-netflix.jw-breakpoint-2 .jw-title-primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: 40px 0 0 25px;
  font-size: 20px;
}

.jwplayer.jw-skin-netflix.jw-breakpoint-3 .jw-title-secondary,
.jwplayer.jw-skin-netflix.jw-breakpoint-2 .jw-title-secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: -50px 0 0 25px;
  font-size: 15px;
}

.jwplayer.jw-skin-netflix.jw-breakpoint-5 .jw-title-primary,
.jwplayer.jw-skin-netflix.jw-breakpoint-4 .jw-title-primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: 50px 0 0 25px;
  font-size: 25px;
}

.jwplayer.jw-skin-netflix.jw-breakpoint-5 .jw-title-secondary,
.jwplayer.jw-skin-netflix.jw-breakpoint-4 .jw-title-secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: -60px 0 0 25px;
  font-size: 15px;
}

.jwplayer.jw-skin-netflix.jw-breakpoint-7 .jw-title-primary,
.jwplayer.jw-skin-netflix.jw-breakpoint-6 .jw-title-primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: 50px 0 0 25px;
  font-size: 30px;
}

.jwplayer.jw-skin-netflix.jw-breakpoint-7 .jw-title-secondary,
.jwplayer.jw-skin-netflix.jw-breakpoint-6 .jw-title-secondary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin: -70px 0 0 25px;
  font-size: 20px;
}

.jwplayer.jw-skin-netflix.jw-state-idle
  .jw-display-icon-container
  .jw-svg-icon-play
  path {
  display: none;
}

.jwplayer.jw-skin-netflix.jw-state-idle
  .jw-display-icon-container
  .jw-svg-icon-play {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTE5LjM3NiAxMi40MTZMOC43NzcgMTkuNDgyQS41LjUgMCAwIDEgOCAxOS4wNjZWNC45MzRhLjUuNSAwIDAgMSAuNzc3LS40MTZsMTAuNTk5IDcuMDY2YS41LjUgMCAwIDEgMCAuODMyeiIgZmlsbD0icmdiYSgyNDcsMjQ2LDI0NywxKSIvPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.jwplayer.jw-skin-netflix.jw-state-idle
  .jw-display-icon-container:hover
  .jw-svg-icon-play {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTE5LjM3NiAxMi40MTZMOC43NzcgMTkuNDgyQS41LjUgMCAwIDEgOCAxOS4wNjZWNC45MzRhLjUuNSAwIDAgMSAuNzc3LS40MTZsMTAuNTk5IDcuMDY2YS41LjUgMCAwIDEgMCAuODMyeiIgZmlsbD0icmdiYSgyMjksOSwyMCwxKSIvPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

.jwplayer.jw-skin-netflix.jw-state-idle
  .jw-display-icon-container
  .jw-svg-icon-play {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 100%;
}

.jwplayer.jw-skin-netflix.jw-state-idle
  .jw-display-controls
  .jw-display-icon-container
  .jw-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.jwplayer.jw-skin-netflix.jw-state-idle .jw-preview,
.jwplayer.jw-skin-netflix.jw-state-complete .jw-preview {
  width: calc(100% + 50px);
  background-size: calc(100% + 60px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
  -webkit-transform: translate3d(-40px, 0, 0);
  transform: translate3d(-40px, 0, 0);
  background-repeat: no-repeat;
  background-size: cover;
}

.jwplayer.jw-skin-netflix.jw-state-idle:hover .jw-preview,
.jwplayer.jw-skin-netflix.jw-state-complete:hover .jw-preview {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.jwplayer.jw-skin-netflix.jw-state-paused .jw-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.jwplayer.jw-skin-netflix.jw-state-paused .jw-controls,
.jwplayer.jw-skin-netflix.jw-state-complete .jw-controls {
  background-color: rgba(0, 0, 0, 0.35);
  transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}

.jwplayer.jw-skin-netflix
  .jw-display-controls
  .jw-display-icon-container
  .jw-icon:hover {
  color: var(--bg-red);
}

.jwplayer.jw-skin-netflix.jw-state-paused .jw-controls {
  background-color: rgba(0, 0, 0, 0.1);
}

/*
Amplia a imagem e adiciona transições.
*/
.jwplayer.jw-skin-netflix .jw-preview {
  width: calc(100% + 50px);
  background-size: calc(100% + 60px);
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(-40px, 0, 0);
}

.jwplayer.jw-skin-netflix:hover .jw-preview {
  transform: translate3d(0, 0, 0);
}

/*
Deslizar a imagem em -40px.
*/
.jwplayer.jw-skin-netflix.jw-state-complete:hover .jw-preview {
  transform: translate3d(-40px, 0, 0);
}

/*
Mudar a cor da barra de controle e alterar a cor do ícone em idle.
*/
.jwplayer.jw-skin-netflix .jw-display {
  padding-bottom: 45px;
}

.jwplayer.jw-skin-netflix .jw-controls::after {
  background: none;
}

.jwplayer.jw-skin-netflix .jw-controlbar .jw-button-container .jw-button-color {
  color: var(--bg-white);
}

.jwplayer.jw-skin-netflix.jw-state-paused
  .jw-controlbar
  .jw-button-container
  .jw-button-color {
  color: var(--bg-white);
}

.jwplayer.jw-skin-netflix
  .jw-controlbar
  .jw-button-container
  .jw-button-color:hover {
  color: var(--bg-red);
}

/*
Toltips mais perto da barra, alterar cores e remover sombras.
*/
.jwplayer.jw-skin-netflix .jw-controlbar .jw-tooltip {
  bottom: 90%;
  box-shadow: none !important;
}

.jwplayer.jw-skin-netflix .jw-controlbar .jw-tooltip.jw-open {
  border-radius: 3px;
  color: var(--bg-black);
}

.jwplayer.jw-skin-netflix .jw-controlbar .jw-tooltip .jw-text {
  background-color: VAR(--bg-black);
  border-radius: 3px;
  border: 0;
}

.jwplayer.jw-skin-netflix .jw-controlbar .jw-text {
  color: var(--bg-white);
}

.jwplayer.jw-skin-netflix .jw-time-tip .jw-text {
  color: var(--bg-black);
}

.jwplayer.jw-skin-netflix .jw-volume-tip {
  margin-bottom: -40px;
}

/*
Tooltip timeslider e botões de qualidade e legenda.
*/
.jwplayer.jw-skin-netflix .jw-settings-topbar-buttons .jw-tooltip-captions,
.jwplayer.jw-skin-netflix .jw-settings-topbar-buttons .jw-tooltip-quality {
  color: var(--bg-black);
}

.jwplayer.jw-skin-netflix
  .jw-settings-topbar-buttons
  .jw-tooltip-captions
  .jw-text,
.jwplayer.jw-skin-netflix
  .jw-settings-topbar-buttons
  .jw-tooltip-quality
  .jw-text,
.jwplayer.jw-skin-netflix .jw-time-tip .jw-reset {
  border-radius: 3px;
  background-color: var(--bg-black);
  color: var(--bg-white);
}

.jwplayer.jw-skin-netflix .jw-time-tip {
  color: var(--bg-black);
}

/*
Controle de volume.
*/
.jwplayer.jw-skin-netflix
  .jw-overlay
  .jw-slider-volume
  .jw-slider-container
  .jw-knob {
  background-color: var(--bg-red);
}

.jwplayer.jw-skin-netflix
  .jw-overlay
  .jw-slider-volume
  .jw-slider-container
  .jw-buffer,
.jwplayer.jw-skin-netflix
  .jw-overlay
  .jw-slider-volume
  .jw-slider-container
  .jw-rail {
  background-color: var(--bg-black);
  width: 0.2rem;
}

.jwplayer.jw-skin-netflix
  .jw-overlay
  .jw-slider-volume
  .jw-slider-container
  .jw-progress {
  background-color: var(--bg-red);
  width: 0.2rem;
}

/*
Tamanho e cor da slider.
*/
.jwplayer.jw-skin-netflix
  .jw-controlbar
  .jw-slider-time
  .jw-slider-container
  .jw-rail {
  background-color: var(--bg-black);
}
.jwplayer.jw-skin-netflix
  .jw-controlbar
  .jw-slider-time
  .jw-slider-container
  .jw-buffer {
  background-color: #404040;
}

.jwplayer.jw-skin-netflix
  .jw-controlbar
  .jw-slider-time
  .jw-slider-container
  .jw-knob,
.jwplayer.jw-skin-netflix
  .jw-controlbar
  .jw-slider-time
  .jw-slider-container
  .jw-progress {
  background-color: var(--bg-red);
}

.jw-skin-netflix .jw-slider-horizontal .jw-rail,
.jw-skin-netflix .jw-slider-horizontal .jw-buffer,
.jw-skin-netflix .jw-slider-horizontal .jw-progress {
  height: 0.3rem;
}

/*
Cor do menu de configurações.
*/
.jwplayer.jw-skin-netflix .jw-settings-menu {
  background-color: var(--bg-black);
  border-radius: 3px;
  width: 230px;
}

.jwplayer.jw-skin-netflix .jw-settings-topbar {
  border-radius: 3px 3px 0 0;
}

.jwplayer.jw-skin-netflix
  .jw-settings-menu
  .jw-settings-topbar:not(.jw-nested-menu-open)
  .jw-icon-inline {
  height: 50px;
}

.jwplayer.jw-skin-netflix.jw-breakpoint-7 .jw-settings-menu {
  margin: 0 -44px -47px 0;
}

.jwplayer.jw-skin-netflix.jw-breakpoint-6 .jw-settings-menu,
.jwplayer.jw-skin-netflix.jw-breakpoint-5 .jw-settings-menu,
.jwplayer.jw-skin-netflix.jw-breakpoint-4 .jw-settings-menu,
.jwplayer.jw-skin-netflix.jw-breakpoint-3 .jw-settings-menu,
.jwplayer.jw-skin-netflix.jw-breakpoint-2 .jw-settings-menu {
  margin: 0 4px 8px 0;
}

.jwplayer.jw-skin-netflix.jw-breakpoint-1 .jw-settings-menu,
.jwplayer.jw-skin-netflix.jw-breakpoint-0 .jw-settings-menu {
  width: 100%;
  border-radius: 0;
}

/*
Ícone Taxas de Reprodução e configurações de legendas.
*/

.jw-svg-icon-playback-rate path {
  color: var(--bg-white);
}

.jwplayer.jw-skin-netflix .jw-settings-menu .jw-submenu-topbar {
  display: none;
}

/*
Player responsivo jw8.
*/
.jwplayer.jw-skin-netflix.jw-breakpoint-6 .jw-volume-tip,
.jwplayer.jw-skin-netflix.jw-breakpoint-5 .jw-volume-tip,
.jwplayer.jw-skin-netflix.jw-breakpoint-4 .jw-volume-tip,
.jwplayer.jw-skin-netflix.jw-breakpoint-3 .jw-volume-tip,
.jwplayer.jw-skin-netflix.jw-breakpoint-2 .jw-volume-tip,
.jwplayer.jw-skin-netflix.jw-breakpoint-1 .jw-volume-tip,
.jwplayer.jw-skin-netflix.jw-breakpoint-0 .jw-volume-tip {
  margin-bottom: -20px;
}

/*
Animações do botão.
 */
@keyframes scaling {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

/*
ícones do player.
 */
.jw-svg-icon-buffer {
  color: var(--bg-red);
}

/*
ícone de Play
 */
.jw-state-paused .jw-svg-icon-play path {
  display: none;
}

.jw-state-paused .jw-svg-icon-play {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTE5LjM3NiAxMi40MTZMOC43NzcgMTkuNDgyQS41LjUgMCAwIDEgOCAxOS4wNjZWNC45MzRhLjUuNSAwIDAgMSAuNzc3LS40MTZsMTAuNTk5IDcuMDY2YS41LjUgMCAwIDEgMCAuODMyeiIgZmlsbD0icmdiYSgyNDcsMjQ2LDI0NywxKSIvPjwvc3ZnPg==");
  background-size: contain;
  background-repeat: no-repeat;
}


/*
ícone de Puase.
 */
.jw-svg-icon-pause path {
  display: none;
}

.jw-svg-icon-pause {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTYgNWgydjE0SDZWNXptMTAgMGgydjE0aC0yVjV6IiBmaWxsPSJyZ2JhKDI0NywyNDYsMjQ3LDEpIi8+PC9zdmc+");
  background-size: contain;
  background-repeat: no-repeat;
}


/*
Ícone de Configuração.
 */
.jw-svg-icon-settings path {
  display: none;
}

.jw-svg-icon-settings {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTIgMTJjMC0uODY1LjExLTEuNzAzLjMxNi0yLjUwNEEzIDMgMCAwIDAgNC45OSA0Ljg2N2E5Ljk5IDkuOTkgMCAwIDEgNC4zMzUtMi41MDUgMyAzIDAgMCAwIDUuMzQ4IDAgOS45OSA5Ljk5IDAgMCAxIDQuMzM1IDIuNTA1IDMgMyAwIDAgMCAyLjY3NSA0LjYzYy4yMDYuOC4zMTYgMS42MzguMzE2IDIuNTAzIDAgLjg2NS0uMTEgMS43MDMtLjMxNiAyLjUwNGEzIDMgMCAwIDAtMi42NzUgNC42MjkgOS45OSA5Ljk5IDAgMCAxLTQuMzM1IDIuNTA1IDMgMyAwIDAgMC01LjM0OCAwIDkuOTkgOS45OSAwIDAgMS00LjMzNS0yLjUwNSAzIDMgMCAwIDAtMi42NzUtNC42M0MyLjExIDEzLjcwNCAyIDEyLjg2NiAyIDEyem00LjgwNCAzYy42MyAxLjA5MS44MSAyLjM0Ni41NjQgMy41MjQuNDA4LjI5Ljg0Mi41NDEgMS4yOTcuNzVBNC45OTMgNC45OTMgMCAwIDEgMTIgMThjMS4yNiAwIDIuNDM4LjQ3MSAzLjMzNSAxLjI3NC40NTUtLjIwOS44ODktLjQ2IDEuMjk3LS43NUE0Ljk5MyA0Ljk5MyAwIDAgMSAxNy4xOTYgMTVhNC45OTMgNC45OTMgMCAwIDEgMi43Ny0yLjI1IDguMTI2IDguMTI2IDAgMCAwIDAtMS41QTQuOTkzIDQuOTkzIDAgMCAxIDE3LjE5NSA5YTQuOTkzIDQuOTkzIDAgMCAxLS41NjQtMy41MjQgNy45ODkgNy45ODkgMCAwIDAtMS4yOTctLjc1QTQuOTkzIDQuOTkzIDAgMCAxIDEyIDZhNC45OTMgNC45OTMgMCAwIDEtMy4zMzUtMS4yNzQgNy45OSA3Ljk5IDAgMCAwLTEuMjk3Ljc1QTQuOTkzIDQuOTkzIDAgMCAxIDYuODA0IDlhNC45OTMgNC45OTMgMCAwIDEtMi43NyAyLjI1IDguMTI2IDguMTI2IDAgMCAwIDAgMS41QTQuOTkzIDQuOTkzIDAgMCAxIDYuODA1IDE1ek0xMiAxNWEzIDMgMCAxIDEgMC02IDMgMyAwIDAgMSAwIDZ6bTAtMmExIDEgMCAxIDAgMC0yIDEgMSAwIDAgMCAwIDJ6IiBmaWxsPSJyZ2JhKDI0NywyNDYsMjQ3LDEpIi8+PC9zdmc+");
  background-size: contain;
  background-repeat: no-repeat;
}

.jw-icon-settings:hover .jw-svg-icon-settings {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTIgMTJjMC0uODY1LjExLTEuNzAzLjMxNi0yLjUwNEEzIDMgMCAwIDAgNC45OSA0Ljg2N2E5Ljk5IDkuOTkgMCAwIDEgNC4zMzUtMi41MDUgMyAzIDAgMCAwIDUuMzQ4IDAgOS45OSA5Ljk5IDAgMCAxIDQuMzM1IDIuNTA1IDMgMyAwIDAgMCAyLjY3NSA0LjYzYy4yMDYuOC4zMTYgMS42MzguMzE2IDIuNTAzIDAgLjg2NS0uMTEgMS43MDMtLjMxNiAyLjUwNGEzIDMgMCAwIDAtMi42NzUgNC42MjkgOS45OSA5Ljk5IDAgMCAxLTQuMzM1IDIuNTA1IDMgMyAwIDAgMC01LjM0OCAwIDkuOTkgOS45OSAwIDAgMS00LjMzNS0yLjUwNSAzIDMgMCAwIDAtMi42NzUtNC42M0MyLjExIDEzLjcwNCAyIDEyLjg2NiAyIDEyem00LjgwNCAzYy42MyAxLjA5MS44MSAyLjM0Ni41NjQgMy41MjQuNDA4LjI5Ljg0Mi41NDEgMS4yOTcuNzVBNC45OTMgNC45OTMgMCAwIDEgMTIgMThjMS4yNiAwIDIuNDM4LjQ3MSAzLjMzNSAxLjI3NC40NTUtLjIwOS44ODktLjQ2IDEuMjk3LS43NUE0Ljk5MyA0Ljk5MyAwIDAgMSAxNy4xOTYgMTVhNC45OTMgNC45OTMgMCAwIDEgMi43Ny0yLjI1IDguMTI2IDguMTI2IDAgMCAwIDAtMS41QTQuOTkzIDQuOTkzIDAgMCAxIDE3LjE5NSA5YTQuOTkzIDQuOTkzIDAgMCAxLS41NjQtMy41MjQgNy45ODkgNy45ODkgMCAwIDAtMS4yOTctLjc1QTQuOTkzIDQuOTkzIDAgMCAxIDEyIDZhNC45OTMgNC45OTMgMCAwIDEtMy4zMzUtMS4yNzQgNy45OSA3Ljk5IDAgMCAwLTEuMjk3Ljc1QTQuOTkzIDQuOTkzIDAgMCAxIDYuODA0IDlhNC45OTMgNC45OTMgMCAwIDEtMi43NyAyLjI1IDguMTI2IDguMTI2IDAgMCAwIDAgMS41QTQuOTkzIDQuOTkzIDAgMCAxIDYuODA1IDE1ek0xMiAxNWEzIDMgMCAxIDEgMC02IDMgMyAwIDAgMSAwIDZ6bTAtMmExIDEgMCAxIDAgMC0yIDEgMSAwIDAgMCAwIDJ6IiBmaWxsPSJyZ2JhKDIyOSw5LDIwLDEpIi8+PC9zdmc+");
}

/*
Ícone de Qualidade.
 */
.jw-svg-icon-quality-100 path {
  display: none;
}
.jw-error .jw-preview, .jwplayer .jw-preview {
    background-size: cover!important;
}
.jw-svg-icon-quality-100 {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTQgNXYxNGgxNlY1SDR6TTMgM2gxOGExIDEgMCAwIDEgMSAxdjE2YTEgMSAwIDAgMS0xIDFIM2ExIDEgMCAwIDEtMS0xVjRhMSAxIDAgMCAxIDEtMXptNC41IDguMjVoMlY5SDExdjZIOS41di0yLjI1aC0yVjE1SDZWOWgxLjV2Mi4yNXptNy0uNzV2M0gxNmEuNS41IDAgMCAwIC41LS41di0yYS41LjUgMCAwIDAtLjUtLjVoLTEuNXpNMTMgOWgzYTIgMiAwIDAgMSAyIDJ2MmEyIDIgMCAwIDEtMiAyaC0zVjl6IiBmaWxsPSJyZ2JhKDI0NywyNDYsMjQ3LDEpIi8+PC9zdmc+");
  background-size: contain;
  background-repeat: no-repeat;
}

.jwplayer.jw-skin-netflix .jw-submenu-quality:hover .jw-svg-icon-quality-100 {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTQgNXYxNGgxNlY1SDR6TTMgM2gxOGExIDEgMCAwIDEgMSAxdjE2YTEgMSAwIDAgMS0xIDFIM2ExIDEgMCAwIDEtMS0xVjRhMSAxIDAgMCAxIDEtMXptNC41IDguMjVoMlY5SDExdjZIOS41di0yLjI1aC0yVjE1SDZWOWgxLjV2Mi4yNXptNy0uNzV2M0gxNmEuNS41IDAgMCAwIC41LS41di0yYS41LjUgMCAwIDAtLjUtLjVoLTEuNXpNMTMgOWgzYTIgMiAwIDAgMSAyIDJ2MmEyIDIgMCAwIDEtMiAyaC0zVjl6IiBmaWxsPSJyZ2JhKDIyOSw5LDIwLDEpIi8+PC9zdmc+");
}

/*
Ícone de Fechar.
 */
.jw-svg-icon-close path {
  display: none;
}

.jw-svg-icon-close {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTEyIDEwLjU4Nmw0Ljk1LTQuOTUgMS40MTQgMS40MTQtNC45NSA0Ljk1IDQuOTUgNC45NS0xLjQxNCAxLjQxNC00Ljk1LTQuOTUtNC45NSA0Ljk1LTEuNDE0LTEuNDE0IDQuOTUtNC45NS00Ljk1LTQuOTVMNy4wNSA1LjYzNnoiIGZpbGw9InJnYmEoMjQ3LDI0NiwyNDcsMSkiLz48L3N2Zz4=");
  background-size: contain;
  background-repeat: no-repeat;
}

.jw-settings-close:hover .jw-svg-icon-close {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTEyIDEwLjU4Nmw0Ljk1LTQuOTUgMS40MTQgMS40MTQtNC45NSA0Ljk1IDQuOTUgNC45NS0xLjQxNCAxLjQxNC00Ljk1LTQuOTUtNC45NSA0Ljk1LTEuNDE0LTEuNDE0IDQuOTUtNC45NS00Ljk1LTQuOTVMNy4wNSA1LjYzNnoiIGZpbGw9InJnYmEoMjI5LDksMjAsMSkiLz48L3N2Zz4=");
}

/*
Ícone de Legenda.
 */
.jw-svg-icon-cc-off path {
  display: none;
}

.jw-svg-icon-cc-off {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwSDI0VjI0SDB6Ii8+PHBhdGggZD0iTTIxIDNjLjU1MiAwIDEgLjQ0OCAxIDF2MTZjMCAuNTUyLS40NDggMS0xIDFIM2MtLjU1MiAwLTEtLjQ0OC0xLTFWNGMwLS41NTIuNDQ4LTEgMS0xaDE4em0tMSAySDR2MTRoMTZWNXpNOSA4YzEuMTA1IDAgMi4xMDUuNDQ4IDIuODI5IDEuMTczbC0xLjQxNCAxLjQxNEMxMC4wNTMgMTAuMjI0IDkuNTUzIDEwIDkgMTBjLTEuMTA1IDAtMiAuODk1LTIgMnMuODk1IDIgMiAyYy41NTMgMCAxLjA1My0uMjI0IDEuNDE0LS41ODZsMS40MTQgMS40MTRDMTEuMTA0IDE1LjU1MiAxMC4xMDQgMTYgOSAxNmMtMi4yMDggMC00LTEuNzkyLTQtNHMxLjc5Mi00IDQtNHptNyAwYzEuMTA1IDAgMi4xMDUuNDQ4IDIuODI5IDEuMTczbC0xLjQxNCAxLjQxNEMxNy4wNTMgMTAuMjI0IDE2LjU1MyAxMCAxNiAxMGMtMS4xMDUgMC0yIC44OTUtMiAycy44OTUgMiAyIDJjLjU1MiAwIDEuMDUyLS4yMjQgMS40MTQtLjU4NmwxLjQxNCAxLjQxNEMxOC4xMDQgMTUuNTUyIDE3LjEwNCAxNiAxNiAxNmMtMi4yMDggMC00LTEuNzkyLTQtNHMxLjc5Mi00IDQtNHoiIGZpbGw9InJnYmEoMjQ3LDI0NiwyNDcsMSkiLz48L3N2Zz4=");
  background-size: contain;
  background-repeat: no-repeat;
}

.jwplayer.jw-skin-netflix .jw-submenu-captions:hover .jw-svg-icon-cc-off {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwSDI0VjI0SDB6Ii8+PHBhdGggZD0iTTIxIDNjLjU1MiAwIDEgLjQ0OCAxIDF2MTZjMCAuNTUyLS40NDggMS0xIDFIM2MtLjU1MiAwLTEtLjQ0OC0xLTFWNGMwLS41NTIuNDQ4LTEgMS0xaDE4em0tMSAySDR2MTRoMTZWNXpNOSA4YzEuMTA1IDAgMi4xMDUuNDQ4IDIuODI5IDEuMTczbC0xLjQxNCAxLjQxNEMxMC4wNTMgMTAuMjI0IDkuNTUzIDEwIDkgMTBjLTEuMTA1IDAtMiAuODk1LTIgMnMuODk1IDIgMiAyYy41NTMgMCAxLjA1My0uMjI0IDEuNDE0LS41ODZsMS40MTQgMS40MTRDMTEuMTA0IDE1LjU1MiAxMC4xMDQgMTYgOSAxNmMtMi4yMDggMC00LTEuNzkyLTQtNHMxLjc5Mi00IDQtNHptNyAwYzEuMTA1IDAgMi4xMDUuNDQ4IDIuODI5IDEuMTczbC0xLjQxNCAxLjQxNEMxNy4wNTMgMTAuMjI0IDE2LjU1MyAxMCAxNiAxMGMtMS4xMDUgMC0yIC44OTUtMiAycy44OTUgMiAyIDJjLjU1MiAwIDEuMDUyLS4yMjQgMS40MTQtLjU4NmwxLjQxNCAxLjQxNEMxOC4xMDQgMTUuNTUyIDE3LjEwNCAxNiAxNiAxNmMtMi4yMDggMC00LTEuNzkyLTQtNHMxLjc5Mi00IDQtNHoiIGZpbGw9InJnYmEoMjI5LDksMjAsMSkiLz48L3N2Zz4=");
}

.jw-icon-cc .jw-svg-icon-cc-off path {
  display: none;
}

.jw-icon-cc .jw-svg-icon-cc-off {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwSDI0VjI0SDB6Ii8+PHBhdGggZD0iTTIxIDNjLjU1MiAwIDEgLjQ0OCAxIDF2MTZjMCAuNTUyLS40NDggMS0xIDFIM2MtLjU1MiAwLTEtLjQ0OC0xLTFWNGMwLS41NTIuNDQ4LTEgMS0xaDE4em0tMSAySDR2MTRoMTZWNXpNOSA4YzEuMTA1IDAgMi4xMDUuNDQ4IDIuODI5IDEuMTczbC0xLjQxNCAxLjQxNEMxMC4wNTMgMTAuMjI0IDkuNTUzIDEwIDkgMTBjLTEuMTA1IDAtMiAuODk1LTIgMnMuODk1IDIgMiAyYy41NTMgMCAxLjA1My0uMjI0IDEuNDE0LS41ODZsMS40MTQgMS40MTRDMTEuMTA0IDE1LjU1MiAxMC4xMDQgMTYgOSAxNmMtMi4yMDggMC00LTEuNzkyLTQtNHMxLjc5Mi00IDQtNHptNyAwYzEuMTA1IDAgMi4xMDUuNDQ4IDIuODI5IDEuMTczbC0xLjQxNCAxLjQxNEMxNy4wNTMgMTAuMjI0IDE2LjU1MyAxMCAxNiAxMGMtMS4xMDUgMC0yIC44OTUtMiAycy44OTUgMiAyIDJjLjU1MiAwIDEuMDUyLS4yMjQgMS40MTQtLjU4NmwxLjQxNCAxLjQxNEMxOC4xMDQgMTUuNTUyIDE3LjEwNCAxNiAxNiAxNmMtMi4yMDggMC00LTEuNzkyLTQtNHMxLjc5Mi00IDQtNHoiIGZpbGw9InJnYmEoMjQ3LDI0NiwyNDcsMSkiLz48L3N2Zz4=");
  background-size: contain;
  background-repeat: no-repeat;
}

.jw-icon-cc:hover .jw-svg-icon-cc-off {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwSDI0VjI0SDB6Ii8+PHBhdGggZD0iTTIxIDNjLjU1MiAwIDEgLjQ0OCAxIDF2MTZjMCAuNTUyLS40NDggMS0xIDFIM2MtLjU1MiAwLTEtLjQ0OC0xLTFWNGMwLS41NTIuNDQ4LTEgMS0xaDE4em0tMSAySDR2MTRoMTZWNXpNOSA4YzEuMTA1IDAgMi4xMDUuNDQ4IDIuODI5IDEuMTczbC0xLjQxNCAxLjQxNEMxMC4wNTMgMTAuMjI0IDkuNTUzIDEwIDkgMTBjLTEuMTA1IDAtMiAuODk1LTIgMnMuODk1IDIgMiAyYy41NTMgMCAxLjA1My0uMjI0IDEuNDE0LS41ODZsMS40MTQgMS40MTRDMTEuMTA0IDE1LjU1MiAxMC4xMDQgMTYgOSAxNmMtMi4yMDggMC00LTEuNzkyLTQtNHMxLjc5Mi00IDQtNHptNyAwYzEuMTA1IDAgMi4xMDUuNDQ4IDIuODI5IDEuMTczbC0xLjQxNCAxLjQxNEMxNy4wNTMgMTAuMjI0IDE2LjU1MyAxMCAxNiAxMGMtMS4xMDUgMC0yIC44OTUtMiAycy44OTUgMiAyIDJjLjU1MiAwIDEuMDUyLS4yMjQgMS40MTQtLjU4NmwxLjQxNCAxLjQxNEMxOC4xMDQgMTUuNTUyIDE3LjEwNCAxNiAxNiAxNmMtMi4yMDggMC00LTEuNzkyLTQtNHMxLjc5Mi00IDQtNHoiIGZpbGw9InJnYmEoMjI5LDksMjAsMSkiLz48L3N2Zz4=");
}

.jw-icon-cc .jw-svg-icon-cc-on path {
  display: none;
}

.jw-icon-cc .jw-svg-icon-cc-on {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwSDI0VjI0SDB6Ii8+PHBhdGggZD0iTTIxIDNjLjU1MiAwIDEgLjQ0OCAxIDF2MTZjMCAuNTUyLS40NDggMS0xIDFIM2MtLjU1MiAwLTEtLjQ0OC0xLTFWNGMwLS41NTIuNDQ4LTEgMS0xaDE4ek05IDhjLTIuMjA4IDAtNCAxLjc5Mi00IDRzMS43OTIgNCA0IDRjMS4xIDAgMi4xLS40NSAyLjgyOC0xLjE3MmwtMS40MTQtMS40MTRDMTAuMDUzIDEzLjc3NiA5LjU1MyAxNCA5IDE0Yy0xLjEwNSAwLTItLjg5NS0yLTJzLjg5NS0yIDItMmMuNTUgMCAxLjA0OC4yMiAxLjQxNS41ODdsMS40MTQtMS40MTRDMTEuMTA1IDguNDQ4IDEwLjEwNSA4IDkgOHptNyAwYy0yLjIwOCAwLTQgMS43OTItNCA0czEuNzkyIDQgNCA0YzEuMTA0IDAgMi4xMDQtLjQ0OCAyLjgyOC0xLjE3MmwtMS40MTQtMS40MTRjLS4zNjIuMzYyLS44NjIuNTg2LTEuNDE0LjU4Ni0xLjEwNSAwLTItLjg5NS0yLTJzLjg5NS0yIDItMmMuNTUzIDAgMS4wNTMuMjI0IDEuNDE1LjU4N2wxLjQxNC0xLjQxNEMxOC4xMDUgOC40NDggMTcuMTA1IDggMTYgOHoiIGZpbGw9InJnYmEoMjQ3LDI0NiwyNDcsMSkiLz48L3N2Zz4=");
  background-size: contain;
  background-repeat: no-repeat;
}

.jw-icon-cc:hover .jw-svg-icon-cc-on {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwSDI0VjI0SDB6Ii8+PHBhdGggZD0iTTIxIDNjLjU1MiAwIDEgLjQ0OCAxIDF2MTZjMCAuNTUyLS40NDggMS0xIDFIM2MtLjU1MiAwLTEtLjQ0OC0xLTFWNGMwLS41NTIuNDQ4LTEgMS0xaDE4ek05IDhjLTIuMjA4IDAtNCAxLjc5Mi00IDRzMS43OTIgNCA0IDRjMS4xIDAgMi4xLS40NSAyLjgyOC0xLjE3MmwtMS40MTQtMS40MTRDMTAuMDUzIDEzLjc3NiA5LjU1MyAxNCA5IDE0Yy0xLjEwNSAwLTItLjg5NS0yLTJzLjg5NS0yIDItMmMuNTUgMCAxLjA0OC4yMiAxLjQxNS41ODdsMS40MTQtMS40MTRDMTEuMTA1IDguNDQ4IDEwLjEwNSA4IDkgOHptNyAwYy0yLjIwOCAwLTQgMS43OTItNCA0czEuNzkyIDQgNCA0YzEuMTA0IDAgMi4xMDQtLjQ0OCAyLjgyOC0xLjE3MmwtMS40MTQtMS40MTRjLS4zNjIuMzYyLS44NjIuNTg2LTEuNDE0LjU4Ni0xLjEwNSAwLTItLjg5NS0yLTJzLjg5NS0yIDItMmMuNTUzIDAgMS4wNTMuMjI0IDEuNDE1LjU4N2wxLjQxNC0xLjQxNEMxOC4xMDUgOC40NDggMTcuMTA1IDggMTYgOHoiIGZpbGw9InJnYmEoMjI5LDksMjAsMSkiLz48L3N2Zz4=");
}

/*
Ícone de Volume.
 */
.jw-svg-icon-volume-100 path {
  display: none;
}

.jw-svg-icon-volume-100 {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTEwIDcuMjJMNi42MDMgMTBIM3Y0aDMuNjAzTDEwIDE2Ljc4VjcuMjJ6TTUuODg5IDE2SDJhMSAxIDAgMCAxLTEtMVY5YTEgMSAwIDAgMSAxLTFoMy44ODlsNS4yOTQtNC4zMzJhLjUuNSAwIDAgMSAuODE3LjM4N3YxNS44OWEuNS41IDAgMCAxLS44MTcuMzg3TDUuODkgMTZ6bTEzLjUxNyA0LjEzNGwtMS40MTYtMS40MTZBOC45NzggOC45NzggMCAwIDAgMjEgMTJhOC45ODIgOC45ODIgMCAwIDAtMy4zMDQtNi45NjhsMS40Mi0xLjQyQTEwLjk3NiAxMC45NzYgMCAwIDEgMjMgMTJjMCAzLjIyMy0xLjM4NiA2LjEyMi0zLjU5NCA4LjEzNHptLTMuNTQzLTMuNTQzbC0xLjQyMi0xLjQyMkEzLjk5MyAzLjk5MyAwIDAgMCAxNiAxMmMwLTEuNDMtLjc1LTIuNjg1LTEuODgtMy4zOTJsMS40MzktMS40MzlBNS45OTEgNS45OTEgMCAwIDEgMTggMTJjMCAxLjg0Mi0uODMgMy40OS0yLjEzNyA0LjU5MXoiIGZpbGw9InJnYmEoMjQ3LDI0NiwyNDcsMSkiLz48L3N2Zz4=");
  background-size: contain;
  background-repeat: no-repeat;
}


.jw-svg-icon-volume-50 path {
  display: none;
}

.jw-svg-icon-volume-50 {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTEzIDcuMjJMOS42MDMgMTBINnY0aDMuNjAzTDEzIDE2Ljc4VjcuMjJ6TTguODg5IDE2SDVhMSAxIDAgMCAxLTEtMVY5YTEgMSAwIDAgMSAxLTFoMy44ODlsNS4yOTQtNC4zMzJhLjUuNSAwIDAgMSAuODE3LjM4N3YxNS44OWEuNS41IDAgMCAxLS44MTcuMzg3TDguODkgMTZ6bTkuOTc0LjU5MWwtMS40MjItMS40MjJBMy45OTMgMy45OTMgMCAwIDAgMTkgMTJjMC0xLjQzLS43NS0yLjY4NS0xLjg4LTMuMzkybDEuNDM5LTEuNDM5QTUuOTkxIDUuOTkxIDAgMCAxIDIxIDEyYzAgMS44NDItLjgzIDMuNDktMi4xMzcgNC41OTF6IiBmaWxsPSJyZ2JhKDI0NywyNDYsMjQ3LDEpIi8+PC9zdmc+");
  background-size: contain;
  background-repeat: no-repeat;
}


.jw-svg-icon-volume-0 path {
  display: none;
}

.jw-svg-icon-volume-0 {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTEwIDcuMjJMNi42MDMgMTBIM3Y0aDMuNjAzTDEwIDE2Ljc4VjcuMjJ6TTUuODg5IDE2SDJhMSAxIDAgMCAxLTEtMVY5YTEgMSAwIDAgMSAxLTFoMy44ODlsNS4yOTQtNC4zMzJhLjUuNSAwIDAgMSAuODE3LjM4N3YxNS44OWEuNS41IDAgMCAxLS44MTcuMzg3TDUuODkgMTZ6bTE0LjUyNS00bDMuNTM2IDMuNTM2LTEuNDE0IDEuNDE0TDE5IDEzLjQxNGwtMy41MzYgMy41MzYtMS40MTQtMS40MTRMMTcuNTg2IDEyIDE0LjA1IDguNDY0bDEuNDE0LTEuNDE0TDE5IDEwLjU4NmwzLjUzNi0zLjUzNiAxLjQxNCAxLjQxNEwyMC40MTQgMTJ6IiBmaWxsPSJyZ2JhKDI0NywyNDYsMjQ3LDEpIi8+PC9zdmc+");
  background-size: contain;
  background-repeat: no-repeat;
}

/*
Ícone de Tela Cheia.
 */
.jw-svg-icon-fullscreen-on path {
  display: none;
}

.jw-svg-icon-fullscreen-on {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTIwIDNoMnY2aC0yVjVoLTRWM2g0ek00IDNoNHYySDR2NEgyVjNoMnptMTYgMTZ2LTRoMnY2aC02di0yaDR6TTQgMTloNHYySDJ2LTZoMnY0eiIgZmlsbD0icmdiYSgyNDcsMjQ2LDI0NywxKSIvPjwvc3ZnPg==");
  background-size: contain;
  background-repeat: no-repeat;
}

.jw-controls-backdrop {
    display: block;
    background: linear-gradient(to bottom,transparent,rgba(0,0,0,1) 77%,rgba(0,0,0,1) 100%) 100% 100%/100% 350px no-repeat transparent!important;
    transition: opacity 250ms cubic-bezier(0,.25,.25,1),background-size 250ms cubic-bezier(0,.25,.25,1);
    pointer-events: none;
}


.jw-svg-icon-fullscreen-off path {
  display: none;
}

.jw-svg-icon-fullscreen-off {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTE4IDdoNHYyaC02VjNoMnY0ek04IDlIMlY3aDRWM2gydjZ6bTEwIDh2NGgtMnYtNmg2djJoLTR6TTggMTV2Nkg2di00SDJ2LTJoNnoiIGZpbGw9InJnYmEoMjQ3LDI0NiwyNDcsMSkiLz48L3N2Zz4=");
  background-size: contain;
  background-repeat: no-repeat;
}

/* Added New Icons - 03-31-22 */

.jwplayer.jw-skin-netflix .jw-settings-sharing .jw-svg-icon-sharing path {
  display: none;
}

.jwplayer.jw-skin-netflix .jw-settings-sharing .jw-svg-icon-sharing {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTEzLjEyIDE3LjAyM2wtNC4xOTktMi4yOWE0IDQgMCAxIDEgMC01LjQ2NWw0LjItMi4yOWE0IDQgMCAxIDEgLjk1OSAxLjc1NWwtNC4yIDIuMjlhNC4wMDggNC4wMDggMCAwIDEgMCAxLjk1NGw0LjE5OSAyLjI5YTQgNCAwIDEgMS0uOTU5IDEuNzU1ek02IDE0YTIgMiAwIDEgMCAwLTQgMiAyIDAgMCAwIDAgNHptMTEtNmEyIDIgMCAxIDAgMC00IDIgMiAwIDAgMCAwIDR6bTAgMTJhMiAyIDAgMSAwIDAtNCAyIDIgMCAwIDAgMCA0eiIgZmlsbD0icmdiYSgyNDcsMjQ2LDI0NywxKSIvPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  background-size: 100%;
}

.jwplayer.jw-skin-netflix .jw-settings-sharing:hover .jw-svg-icon-sharing {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTEzLjEyIDE3LjAyM2wtNC4xOTktMi4yOWE0IDQgMCAxIDEgMC01LjQ2NWw0LjItMi4yOWE0IDQgMCAxIDEgLjk1OSAxLjc1NWwtNC4yIDIuMjlhNC4wMDggNC4wMDggMCAwIDEgMCAxLjk1NGw0LjE5OSAyLjI5YTQgNCAwIDEgMS0uOTU5IDEuNzU1ek02IDE0YTIgMiAwIDEgMCAwLTQgMiAyIDAgMCAwIDAgNHptMTEtNmEyIDIgMCAxIDAgMC00IDIgMiAwIDAgMCAwIDR6bTAgMTJhMiAyIDAgMSAwIDAtNCAyIDIgMCAwIDAgMCA0eiIgZmlsbD0icmdiYSgyMjksOSwyMCwxKSIvPjwvc3ZnPg==");
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  background-size: 100%;
}

.list-container {
  position: absolute;
  right: 5%;
  top:5%;
}
.list-container.active .more-button-list {
  opacity: 1;
  transform: scale(1);
}
.list-container.active .more-button-list-item {
  -webkit-animation: fadeInItem 0.6s 0.2s forwards;
  animation: fadeInItem 0.6s 0.2s forwards;
}
.list-container.active .more-button-list-item:nth-child(2) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.list-container.active .more-button-list-item:nth-child(3) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.list-container.active .more-button-list-item:nth-child(4) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
.list-container.active .more-button {
  -webkit-animation: onePulse 0.6s forwards linear;
  animation: onePulse 0.6s forwards linear;
}
.list-container.active .menu-icon-wrapper {
  transform: rotate(-45deg);
}
.list-container.active .menu-icon-line.first {
  transform: rotate(-90deg) translateX(1px);
}
.list-container.active .menu-icon-line.last {
  transform: rotate(-90deg) translateX(-1px);
}

.more-button {
-webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: 0.2s ease-in;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: relative;
  z-index: 2;
}
.more-button:hover, .more-button:focus {
 background-color: rgba(255, 255, 255, 0);
}
.more-button:focus {
  outline: 0;
}
.more-button-list {
    -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  list-style-type: none;
  width: 140px;
  height: 89px;
  padding: 0;
  padding: 6px;
  position: absolute;
  border: 2px solid rgba(255,255,255,0.06);
  right: 80%;
  opacity: 0;
  z-index: 9999;
  transform: scale(0);
  transition: all 0.3s ease 0.1s;
}
.more-button-list li {
  opacity: 1;
}
.more-button-list-item {
  display: flex;
  align-items: center;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: 0.2s ease-in;
  transform: translatex(-10px);
}
.more-button-list-item:hover,.more-button-list-item:hover #load {
}
.more-button-list-item:after {
  content: "";
  position: absolute;
  height: 1px;
  width: calc(100% - 24px);
  left: 12px;
  bottom: 0;
  background-color: rgba(132, 160, 244, 0.1);
}
.more-button-list-item:last-child:after {
  display: none;
}
.more-button-list-item svg {
  width: 18px;
  height: 18px;
}
.more-button-list-item span {
  display: inline-block;
  line-height: 20px;
  font-size: 14px;
  margin-left: 8px;
}

@-webkit-keyframes onePulse {
  0% {
    box-shadow: 0px 0px 0px 0px rgba(92, 103, 255, 0.3);
  }
  50% {
    box-shadow: 0px 0px 0px 12px rgba(92, 103, 255, 0.1);
  }
  100% {
    box-shadow: 0px 0px 0px 4px rgba(92, 103, 255, 0.3);
  }
}

@keyframes onePulse {
  0% {
    box-shadow: 0px 0px 0px 0px rgba(92, 103, 255, 0.3);
  }
  50% {
    box-shadow: 0px 0px 0px 12px rgba(92, 103, 255, 0.1);
  }
  100% {
    box-shadow: 0px 0px 0px 4px rgba(92, 103, 255, 0.3);
  }
}
@-webkit-keyframes fadeInItem {
  100% {
    transform: translatex(0px);
    opacity: 1;
  }
}
@keyframes fadeInItem {
  100% {
    transform: translatex(0px);
    opacity: 1;
  }
}
.more-button-list-item #load{
  color: #fff; transition: 0.2s ease-in;
}
.menu-icon-wrapper {
  border-radius: 2px;
  width: 15px;
  height: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform 330ms ease-out;
}

.menu-icon-line {
  background-color: #fff;
  border-radius: 10px;
  width: 100%;
  height: 3px;
}
.menu-icon-line.half {
  width: 50%;
}
.menu-icon-line.first {
  transition: transform 300ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
  transform-origin: right;
}
.menu-icon-line.last {
  align-self: flex-end;
  transition: transform 300ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
  transform-origin: left;
}
/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999999;
  overflow: hidden;
  position: fixed;
  background: #12151f;
  opacity: 0.9;
  filter: alpha(opacity=90); }

  .mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999999999999;
    position: fixed;
    outline: none !important;
    -webkit-backface-visibility: hidden; }

    .mfp-container {
      height: 100%;
      text-align: center;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      padding: 0 8px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }

      .mfp-container:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle; }

        .mfp-align-top .mfp-container:before {
          display: none; }

          .mfp-content {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            margin: 0 auto;
            text-align: left;
            z-index: 505; }

            .mfp-inline-holder .mfp-content,
            .mfp-ajax-holder .mfp-content {
              width: 100%;
              cursor: auto; }

              .mfp-ajax-cur {
                cursor: progress; }

                .mfp-zoom-out-cur,
                .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
                  cursor: -moz-zoom-out;
                  cursor: -webkit-zoom-out;
                  cursor: zoom-out; }

                  .mfp-zoom {
                    cursor: pointer;
                    cursor: -webkit-zoom-in;
                    cursor: -moz-zoom-in;
                    cursor: zoom-in; }

                    .mfp-auto-cursor .mfp-content {
                      cursor: auto; }

                      .mfp-close,
                      .mfp-arrow,
                      .mfp-preloader,
                      .mfp-counter {
                        -webkit-user-select: none;
                        -moz-user-select: none;
                        user-select: none; }

                        .mfp-loading.mfp-figure {
                          display: none; }

                          .mfp-hide {
                            display: none !important; }

                            .mfp-preloader {
                              color: #cccccc;
                              position: absolute;
                              top: 50%;
                              width: auto;
                              text-align: center;
                              margin-top: -0.8em;
                              left: 8px;
                              right: 8px;
                              z-index: 504; }

                              .mfp-preloader a {
                                color: #cccccc; }

                                .mfp-preloader a:hover {
                                  color: white; }

                                  .mfp-s-ready .mfp-preloader {
                                    display: none; }

                                    .mfp-s-error .mfp-content {
                                      display: none; }

                                      button.mfp-close,
                                      button.mfp-arrow {
                                        overflow: visible;
                                        cursor: pointer;
                                        background: transparent;
                                        border: 0;
                                        -webkit-appearance: none;
                                        display: block;
                                        padding: 0;
                                        z-index: 506; }

                                        button::-moz-focus-inner {
                                          padding: 0;
                                          border: 0; }

                                          .mfp-close {
                                            width: 44px;
                                            height: 44px;
                                            line-height: 44px;
                                            position: absolute;
                                            right: 0;
                                            top: 0;
                                            text-decoration: none;
                                            text-align: center;
                                            opacity: 0.65;
                                            padding: 0 0 18px 10px;
                                            color: white;
                                            font-style: normal;
                                            font-size: 28px;
                                            font-family: Arial, Baskerville, monospace; }
                                            .mfp-close:hover, .mfp-close:focus {
                                              opacity: 1; }
                                              .mfp-close:active {
                                                top: 1px; }

                                                .mfp-close-btn-in .mfp-close {
                                                  color: #333333; }

                                                  .mfp-image-holder .mfp-close,
                                                  .mfp-iframe-holder .mfp-close {
                                                    color: white;
                                                    right: -6px;
                                                    text-align: right;
                                                    padding-right: 6px;
                                                    width: 100%; }

                                                    .mfp-counter {
                                                      position: absolute;
                                                      top: 0;
                                                      right: 0;
                                                      color: #cccccc;
                                                      font-size: 12px;
                                                      line-height: 18px; }

                                                      .mfp-arrow {
                                                        position: absolute;
                                                        top: 0;
                                                        opacity: 0.65;
                                                        margin: 0;
                                                        top: 50%;
                                                        margin-top: -55px;
                                                        padding: 0;
                                                        width: 90px;
                                                        height: 110px;
                                                        -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

                                                        .mfp-arrow:active {
                                                          margin-top: -54px; }

                                                          .mfp-arrow:hover,
                                                          .mfp-arrow:focus {
                                                            opacity: 1; }

                                                            .mfp-arrow:before, .mfp-arrow:after,
                                                            .mfp-arrow .mfp-b,
                                                            .mfp-arrow .mfp-a {
                                                              content: '';
                                                              display: block;
                                                              width: 0;
                                                              height: 0;
                                                              position: absolute;
                                                              left: 0;
                                                              top: 0;
                                                              margin-top: 35px;
                                                              margin-left: 35px;
                                                              border: solid transparent; }
                                                              .mfp-arrow:after,
                                                              .mfp-arrow .mfp-a {
                                                                opacity: 0.8;
                                                                border-top-width: 12px;
                                                                border-bottom-width: 12px;
                                                                top: 8px; }
                                                                .mfp-arrow:before,
                                                                .mfp-arrow .mfp-b {
                                                                  border-top-width: 20px;
                                                                  border-bottom-width: 20px; }

                                                                  .mfp-arrow-left {
                                                                    left: 0; }
                                                                    .mfp-arrow-left:after,
                                                                    .mfp-arrow-left .mfp-a {
                                                                      border-right: 12px solid black;
                                                                      left: 5px; }
                                                                      .mfp-arrow-left:before,
                                                                      .mfp-arrow-left .mfp-b {
                                                                        border-right: 20px solid white; }

                                                                        .mfp-arrow-right {
                                                                          right: 0; }
                                                                          .mfp-arrow-right:after,
                                                                          .mfp-arrow-right .mfp-a {
                                                                            border-left: 12px solid black;
                                                                            left: 3px; }
                                                                            .mfp-arrow-right:before,
                                                                            .mfp-arrow-right .mfp-b {
                                                                              border-left: 20px solid white; }

                                                                              .mfp-iframe-holder {
                                                                                padding-top: 40px;
                                                                                padding-bottom: 40px; }

                                                                                .mfp-iframe-holder .mfp-content {
                                                                                  line-height: 0;
                                                                                  width: 100%;
                                                                                  max-width: 900px; }

                                                                                  .mfp-iframe-scaler {
                                                                                    width: 100%;
                                                                                    height: 0;
                                                                                    overflow: hidden;
                                                                                    padding-top: 56.25%; }

                                                                                    .mfp-iframe-scaler iframe {
                                                                                      position: absolute;
                                                                                      top: -3px;
                                                                                      left: 0;
                                                                                      width: 100%;
                                                                                      height: 100%;
                                                                                      box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
                                                                                      background: black; }

                                                                                      .mfp-iframe-holder .mfp-close {
                                                                                        top: -43px; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure:after {
  content: '';
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }

  .mfp-figure {
    line-height: 0; }

    .mfp-bottom-bar {
      margin-top: -36px;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      cursor: auto; }

      .mfp-title {
        text-align: left;
        line-height: 18px;
        color: #f3f3f3;
        word-break: break-word;
        padding-right: 36px; }

        .mfp-figure small {
          color: #bdbdbd;
          display: block;
          font-size: 12px;
          line-height: 14px; }

          .mfp-image-holder .mfp-content {
            max-width: 100%; }

            .mfp-gallery .mfp-image-holder .mfp-figure {
              cursor: pointer; }

              @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
   * Remove all paddings around the image on small screen
   */
                .mfp-img-mobile .mfp-image-holder {
                  padding-left: 0;
                  padding-right: 0; }

                  .mfp-img-mobile img.mfp-img {
                    padding: 0; }

                    /* The shadow behind the image */
                    .mfp-img-mobile .mfp-figure:after {
                      top: 0;
                      bottom: 0; }

                      .mfp-img-mobile .mfp-bottom-bar {
                        background: rgba(0, 0, 0, 0.6);
                        bottom: 0;
                        margin: 0;
                        top: auto;
                        padding: 3px 5px;
                        position: fixed;
                        -webkit-box-sizing: border-box;
                        -moz-box-sizing: border-box;
                        box-sizing: border-box; }

                        .mfp-img-mobile .mfp-bottom-bar:empty {
                          padding: 0; }

                          .mfp-img-mobile .mfp-counter {
                            right: 5px;
                            top: 3px; }

                            .mfp-img-mobile .mfp-close {
                              top: 0;
                              right: 0;
                              width: 35px;
                              height: 35px;
                              line-height: 35px;
                              background: rgba(0, 0, 0, 0.6);
                              position: fixed;
                              text-align: center;
                              padding: 0; }

                              .mfp-img-mobile .mfp-figure small {
                                display: inline;
                                margin-left: 5px; } }
                                @media all and (max-width: 800px) {
                                  .mfp-arrow {
                                    -webkit-transform: scale(0.75);
                                    transform: scale(0.75); }

                                    .mfp-arrow-left {
                                      -webkit-transform-origin: 0;
                                      transform-origin: 0; }

                                      .mfp-arrow-right {
                                        -webkit-transform-origin: 100%;
                                        transform-origin: 100%; }

                                        .mfp-container {
                                          padding-left: 6px;
                                          padding-right: 6px; } }
                                          .mfp-ie7 .mfp-img {
                                            padding: 0; }
                                            .mfp-ie7 .mfp-bottom-bar {
                                              width: 600px;
                                              left: 50%;
                                              margin-left: -300px;
                                              margin-top: 5px;
                                              padding-bottom: 5px; }
                                              .mfp-ie7 .mfp-container {
                                                padding: 0; }
                                                .mfp-ie7 .mfp-content {
                                                  padding-top: 44px; }
                                                  .mfp-ie7 .mfp-close {
                                                    top: 0;
                                                    right: 0;
                                                    padding-top: 0; }
                                                    #ortala_fragman_yazi{
                                                      position: absolute;
                                                      left: 50%;
                                                      top: 50%;
                                                      transform: translate(-50%,-50%);
                                                      color: #fff;
                                                      z-index: 999;
                                                    }
                                                    #popup-youtube_div{
                                                      position: relative;
                                                    }
                                                    #popup-youtube_div img#arka{
                                                      opacity: 0.5;
                                                      border-radius: 5px;
                                                    }
                                                    #youtube_logo{
                                                      transition: 250ms;
                                                    }
                                                    #popup-youtube_div:hover #youtube_logo{
                                                      transform: scale(1.1);
                                                    }
                                                    .underline-slide{
                                                      transition: 100ms;
                                                      color: #ce7;
                                                      padding-bottom: 1.5px;
                                                      text-shadow: 0 0 0px #72b7ff;
                                                      font-size: 13px;
                                                      font-weight: bold;

                                                    }
                                                    .underline-slide:hover{

                                                      color: #ce7;
                                                    }
                                                    .underline-slide:after {
                                                      content: '';
                                                      display: block;
                                                      width: 0;
                                                      height: 2px;
                                                      position: absolute;
                                                      background: #72b7ff;
                                                      transition: width .3s cubic-bezier(.0,.0,.0,.94);
                                                    }
                                                    .liste_sec{
                                                      max-width: 600px;
                                                      width: 100%;
                                                      background: transparent;
                                                      position: fixed;
                                                      left: 50%;
                                                      bottom: 0;
                                                      transform: translate(-50%,200%);
                                                      display: none;
                                                      will-change: transform;
                                                      transition: 250ms transform;
                                                      z-index: 99999999;
                                                    }
                                                    .main_add_list2{
                                                      background: rgba(0,0,0,0.2);
                                                      clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
                                                      width: 30px;
                                                      height: 45px;
                                                      border-top-left-radius: 5px;
                                                      position: absolute;
                                                      left: 0;
                                                      top: 0;
                                                      color: #fff;
                                                      display: flex;
                                                      justify-content: center;
                                                      align-items: flex-end;
                                                      z-index: 99999999;
                                                      font-size: 17px;
                                                    }
                                                    .main_add_list{
                                                      -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.1);
                                                      clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
                                                      width: 30px;
                                                      height: 40px;
                                                      border-top-left-radius: 5px;
                                                      position: absolute;
                                                      left: 0;
                                                      top: 0;
                                                      color: #fff;
                                                      display: flex;
                                                      justify-content: center;
                                                      align-items: flex-end;
                                                      z-index: 999999999;
                                                      font-size: 17px;
                                                      transition: 250ms;
                                                    }
                                                    .main_add_list:hover{
                                                      background: rgba(255,255,255,1);
                                                    }
                                                    .main_add_list:hover p{
                                                      color: rgb(var(--main-purple))!important;
                                                    }
                                                    .main_add_list p{
                                                      margin: 11px;
                                                    }
                                                    .list_col{
                                                      position: relative;
                                                      margin-bottom: 5%!important;
                                                    }
                                                    .list_link{
                                                      position: absolute;
                                                      left: 50%;
                                                      top: 50%;
                                                      width: 91%;
                                                      height: 100%;
                                                      z-index: 999;
                                                      display: flex;
                                                      justify-content: center;
                                                      align-items: center;
                                                      color: #fff!important;
                                                      font-size: 20px;
                                                      border: 2px solid #4e008c;
                                                      transform: translate(-50%,-50%);
                                                      -webkit-backdrop-filter: blur(1.5px);
                                                      backdrop-filter: blur(1.5px);
                                                    }
                                                    #cikar_liste{
                                                      position: absolute;
                                                      bottom: 0;
                                                      right: 0;
                                                      font-size: 20px;
                                                      cursor: pointer;
                                                      z-index: 999999;
                                                      top: 10%;
                                                      right: 5%;
                                                      color: #fff;
                                                      opacity: 0.8;
                                                    }
                                                    .list_top{
                                                      position:absolute;left:50%;top:50%;background: #12151f;width: 100%;
                                                      height: 100%;z-index: -1;transform: translate(-50%,-50%);z-index: 99;opacity: 0.9;
                                                    }
                                                    .artist {
                                                      width: 100%;
                                                      height: 360px;
                                                      margin-right: 20px;
                                                      background: #171a23;
                                                      border-radius: 10px;
                                                    }
                                                    .artist:last-child {
                                                      margin: 0;
                                                    }
                                                    .artist__thumbnail {
                                                      position: relative;
                                                      width: 100%;
                                                      height: 240px;
                                                      overflow: hidden;
                                                      border-top-left-radius: 10px;
                                                      border-top-right-radius: 10px;
                                                    }
                                                    .artist__blur {
                                                      position: absolute;
                                                      top: 0;
                                                      left: 0;
                                                      -webkit-filter: blur(10px)!important;
                                                      filter: blur(10px)!important;
                                                      opacity: 0.5;
                                                      object-fit: cover;
                                                      object-position: center;
                                                      z-index: 1;
                                                    }
                                                    .artist__image {
                                                      width: 120px!important;
                                                      height: 120px!important;
                                                      border-radius: 50%!important;
                                                      z-index: 3;
                                                      position: absolute;
                                                      top: 50%;
                                                      left: 50%;
                                                      transform: translate(-50%, -50%);
                                                    }
                                                    .artist__ring {
                                                      width: 140px;
                                                      height: 140px;
                                                      border-radius: 50%;
                                                      background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(255, 255, 255, 0.2) 100%);
                                                      z-index: 2;
                                                      box-shadow: 4px 0 2px -4px rgba(255, 255, 255, 0.9), -4px 0 2px -4px rgba(255, 255, 255, 0.9);
                                                      position: absolute;
                                                      top: 50%;
                                                      left: 50%;
                                                      transform: translate(-50%, -50%);
                                                    }
                                                    .artist__ring--outer {
                                                      width: 170px;
                                                      height: 170px;
                                                    }
                                                    .artist__label {
                                                      display: flex;
                                                      height: 120px;
                                                      flex-direction: column;
                                                      justify-content: space-between;
                                                      padding: 30px 0px;
                                                      color: #fff;
                                                      text-align: center;
                                                    }

                                                    .capital {
                                                      color: #fff;
                                                      text-transform: uppercase;
                                                      padding: 0px 10px;
                                                      margin: 0;
                                                      font-family: 'Quicksand';
                                                    }
                                                    .capital2 {
                                                      color: #fff;
                                                      padding: 0px 10px;
                                                      margin: 0;
                                                      font-family: 'Quicksand';
                                                      font-style: italic;
                                                      font-size: 13px;
                                                    }
                                                    .User-area {
                                                      width: 45px;
                                                      height: 45px;
                                                      position: relative;
                                                      cursor: pointer;
                                                    }
                                                    .User-area > .User-avtar {
                                                      width: 100%;
                                                      height: 100%;
                                                      border-radius: 30px;
                                                      border-right:3px dashed rgb(var(--main-pink));border-left:3px dashed rgb(var(--main-purple));
                                                      border-bottom:3px dashed rgb(var(--main-pink));border-top:3px dashed rgb(var(--main-purple));
                                                    }
                                                    .User-area > .User-avtar > img {
                                                      width: 100%;
                                                      height: 100%;
                                                      border-radius: 30px;
                                                    }

                                                    .User-Dropdown {
                                                      position: absolute;
                                                      border-radius: 7px;
                                                      background: #171a23;
                                                      list-style: none;
                                                      padding: 0 5px;
                                                      width: 150px;
                                                      margin: 0;
                                                      top: 0;
                                                      right: 0;
                                                      transform: translate(200%,60px);
                                                      transition: 250ms;
                                                      will-change: transform;
                                                      display: none;


                                                    }
                                                    .User-Dropdown:before {
                                                      content: "";
                                                      position: absolute;
                                                      width: 0;
                                                      height: 0;
                                                      margin-left: -0.5em;
                                                      right: 0px;
                                                      box-sizing: border-box;
                                                      border: 7px solid black;
                                                      border-color: transparent transparent #171a23 #171a23;
                                                      transform-origin: 0 0;
                                                      transform: rotate(135deg);
                                                    }
                                                    .User-Dropdown.U-open {
                                                      display: block;
                                                    }
                                                    .User-Dropdown > li {
                                                      padding: 0px;
                                                      line-height: 47px;
                                                      text-align: left;
                                                    }.User-Dropdown > li:last-child {
                                                      border-bottom: 0px;
                                                    }
                                                    .User-Dropdown > li > a {
                                                      font-size: 13px;
                                                      padding: 15px 25px 16px 10px;
                                                      text-decoration: none;
                                                      color: #fff!important;
                                                      transition: all 0.2s ease-out;
                                                      font-family: "Quicksand";
                                                    }
                                                    .User-Dropdown span {
                                                      background: #f24900;
                                                      padding: 5px 9px;
                                                      color: #fff;
                                                      border-radius: 30px;
                                                      font-size: 13px;
                                                    }
                                                    .User-Dropdown > li:hover:before {
                                                      width: 5px;
                                                      border-radius: 30px;
                                                    }
                                                    .container2 {
                                                      display: inline-block;
                                                      position: relative;
                                                      cursor: pointer;
                                                      font-size: 15px;
                                                      color: #fff;
                                                      -webkit-user-select: none;
                                                      -moz-user-select: none;
                                                      -ms-user-select: none;
                                                      user-select: none;
                                                      padding-bottom: 10px;
                                                    }

/* Hide the browser's default checkbox */
.container2 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  top: 0;
  left: 0;
  display: inline-block;
  text-align: center;
  border-radius: 20px;
  background-color: #171a23;
  border: 2px solid rgba(255,255,255,0.1);
  padding: 5px 15px;
  transition: 250ms;
}

/* When the checkbox is checked, add a blue background */
.container2 input:checked ~ .checkmark {
  background-color: rgb(var(--main-purple));
  opacity: 1;
}
.container2 input:disabled ~ .checkmark {
  opacity: 0.3;
  transform: scale(0.9);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container2 input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator 
.container2 .checkmark:after {
  left: 10px;
  top: 6.5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}*/

.alert-danger{
  text-align: center;
  background: #171a23;
  color: rgb(var(--main-pink));
  outline: none;
  border: 0px;
  box-shadow: 0 0 10px rgb(0,0,0 / 40%);
  border: 1px solid rgba(255,255,255,0.1);
}
.morecontent span {
  display: none;
}
.morelink {
  display: block;
}

/* No CSS needed, but you can pimp the container and the signs as you wish. */


/* all sign style */
.ratyli .rate{color: rgb(var(--main-pink)); font-size: 30px;}

/* empty sign style */
.ratyli .rate-empty{color: #666;}

/* full sign style after rating*/
.ratyli.rated .rate-full{color: rgb(var(--main-pink));}

/* active signs (hover)*/
.ratyli .rate-active{color: rgb(var(--main-pink));}


.grid-main {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-gap: 1em 1em;
  grid-auto-flow: row dense;
  width: 96%;
  position: relative;
}

.grid-main .item {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background-size: cover!important;
  background-position: center!important;
  background-repeat: no-repeat!important;
  display: flex;
  align-items: flex-end;
  height: 200px;
  justify-content: space-between;
  transition: 700ms all;
  position: relative;
  box-shadow: 0 0 20px black;
  filter: saturate(1.5);
}
.grid-main .item:hover{
  transform: scale(0.98);
  background-position: top!important;
}
.grid-main .item p{
  padding: 0px 20px;
  color: #fff;
}
.grid-main .item.large {
  background: rgba(255, 0, 0, 0.25);
  grid-column: auto / span 2;
  grid-row: auto / span 2;
  height: 250px;
}
.link_a{
  position:absolute;width: 100%;height: 100%;left:0;top:0;z-index: 9999;
}
.number_week{
  position: absolute;
  left: 7.5%;
  top: -3.5%;
  height: 100%;
  z-index: 99;
}
.number_week p{
  color: rgba(255, 255, 255, 0.1);
  font-size: 70px;
-webkit-text-stroke: 2px rgba(255, 255, 255, 0.8);
    text-stroke: 2px rgba(255, 255, 255, 0.8);
  font-family: "Quicksand";

}
.number_week svg{
  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;

}
.rate_container{
  overflow: visible;
  top: 60px;
  z-index: 10002;
  left: 210px;
  margin-top: 6.4px;
  box-sizing: content-box;
  display: block;
  position: absolute;
  background: #171a23;
  padding: 10px;
  border-radius: 10px;
}
.rate_container:before{
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  position: absolute;
  border-bottom: 5px solid #171a23;
  left: 48%;
  top: -8%;
}

.vis_title_top:after {
  content: attr(special_title);
  position: absolute;
  font-size: 14px;
  top: 0;
  opacity: 0;
  z-index: 99999999;
  transition: 375ms all cubic-bezier(0.37, 0.74, 0.15, 1.65);
  color: #CDFFF9;
  background: #171a23;
  padding: 10px 10px;
  border-radius: 6px;
  font-weight: normal;
  width: 130px;
  text-align: center;

}
.vis_title_top:hover:after {
  opacity: 1;
  top: -40px;
}

.vis_title_bottom:after {
  content: attr(special_title);
  position: absolute;
  font-size: 14px;
  top: 0;
  opacity: 0;
  z-index: 99999999;
  transition: 375ms all cubic-bezier(0.37, 0.74, 0.15, 1.65);
  color: #CDFFF9;
  background: #171a23;
  padding: 10px 10px;
  border-radius: 6px;
  font-weight: normal;
  width: 130px;
  text-align: center;

}
.vis_title_bottom:hover:after {
  opacity: 1;
  top: 70px;
}
.top_grad{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 500px;
  background: #12151f;
  -webkit-mask-image: linear-gradient(to top, transparent 50%, black 100%);
  mask-image: linear-gradient(to top, transparent 50%, black 100%);
  z-index: 0;
}
#loginbtn{
  padding: 10px;
}
#find_serie_movie_name{
  background:rgba(var(--main-black),1);
  box-shadow: inset 0 -5px 45px rgb(0 0 0 / 0%), 0 1px 1px rgb(0 0 0 / 0%);
  border-radius: 20px;
  border: 0px solid rgba(255,255,255,0.1);
  padding-left: 20px;
  margin-bottom: 25px!important;

}



.dropdown.a {
  width: 10em;
  margin-bottom: 1em;
  padding: 0;
}
.dropdown.a dt a {
  display: block;
  height: 2.5em;
  width: 100%;
  border-radius: 3px;
  text-decoration: none;
  color: #fff;
}
.dropdown.a dt a:hover{
  color: #fff;
}
.dropdown.a dt span {
  display: block;
  padding: 0 1em;
  line-height: 2.5em;
  cursor: pointer;
  background:rgba(var(--main-black),1);
  text-align: center;
  border-radius: 5px;
  border: 2px solid rgba(255,255,255,0.1);
}
.dropdown.a dd {
  position: relative;
}
.dropdown.a dd ul {
  display: none;
  position: absolute;
  left: 0;
  top: -2.5em;
  z-index: 999999;
  width: 100%;
  list-style: none;
  background: #fff none repeat scroll 0 0;
  border: 1px solid #bdc3c7;
  border-radius: 5px;
  padding: 0px 10px;
  text-align: left;
}
.dropdown.a dd li a {
  display: block;
  padding: 0 1em;
  line-height: 2.5em;
  text-decoration: none;
  color: rgb(var(--main-purple));
}
.dropdown.a dd li a:hober{
  color: rgb(var(--main-purple));
}
.card-image {
  display: block;
  min-height: 8.5rem; /* layout hack */
  background: #000 center center no-repeat;
  background-size: cover;
  filter: saturate(1.5);
  border-radius: 10px;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, black 100%);
  mask-image: linear-gradient(to top, transparent 0%, black 100%);
  opacity: 0.6;
}

.card-image > img {
  display: block;
  width: 100%;
  opacity: 0; /* visually hide the img element */
}

.card-image.is-loaded {
  filter: none; /* remove the blur on fullres image */
  transition: filter 1s;
}


.card-list {
  display: block;
  padding: 0;
  font-size: 0;
  text-align: center;
  list-style: none;
}

.card {
  display: inline-block;
  width: 90%;
  font-size: 1rem;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 0 3rem -1rem rgba(0,0,0,0.5);
  transition: transform 0.1s ease-in-out, box-shadow 0.1s;
  background: #171a23;border-radius: 10px;

}


.card-description {
  display: block;
  padding: 1em 0.5em;
  color: #515151;
  text-decoration: none;
}

.card-description > h2 {
  margin: 0 0 0.5em;
}

.card-description > p {
  margin: 0;
  text-align: left;
}
.clear_inp{
 position: absolute;
    z-index: 999999999;
    display: flex;
    right: 0%;
    transform: translate(0%,-50%);
    top: 60%;
    color: #fff;
    opacity: 0.5;
    cursor: pointer;
    width: 50px;
    height: 50px;
    justify-content: space-around;
    align-items: center;
}
#hover_list{
  background: #171a23;width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;border-radius: 5px;
  align-items: flex-end;
  box-shadow: 0 15px 20px rgba(0,0,0,0.4);
  transition: 500ms;
}

#hover_list:hover{
  box-shadow: 0px 0px 30px black;
}
.list_name{
  display: flex;
    align-items: center;
    height: 100%;
}
.list_name p{
  padding-left:20px;margin: 0;
}
.list_main{
  display: flex;
  flex-wrap: nowrap;
}
.list_img{
  transition: 500ms;
  box-shadow: 10px 0 10px rgb(0 0 0 / 40%);

}
.list_img:nth-child(1){
  border-top-left-radius: 5px!important;
  border-bottom-left-radius: 5px!important;
  z-index: 2;
}
.list_img:nth-child(2) {
  margin-left: -28px;
  z-index: 1;
}
.list_img:nth-child(3) {
  margin-left: -36px;
  z-index: 0;
}
#hover_list:hover .list_img:nth-child(2){
  margin-left: -8px;
}
#hover_list:hover .list_img:nth-child(3){
  margin-left: -26px;
}





.u-float-right {
  float: right;
}

.u-clearfix:before,
.u-clearfix:after {
  content: " ";
  display: table;
}

.u-clearfix:after {
  clear: both;
}
.u-flex-center {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.card2 {
  border-radius: 2px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
  width: 100%;
  display: flex;
  position: relative;
  border-radius: 10px;
}

.card-media {
  float: left;
  padding: 0 0 25px 25px;
  position: relative;
  width: 145px;
  height: 145px;
  background-size: cover!important;
  background-position: center!important;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  filter: saturate(1.4);
}

.card-media-img {
  box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
  float: left;
  margin-top: -25px;
  position: relative;
  filter: saturate(1.5);
}

.card-media-preview {
background-color: rgb(var(--main-purple));
    border-radius: 50%;
    top: -10%;
    box-shadow: 0 0 4px rgb(0 0 0 / 14%), 0 4px 8px rgb(0 0 0 / 28%);
    cursor: pointer;
    height: 30px;
    opacity: 0;
    position: absolute;
    left: 60px;
    transform: translateY(5px);
    transition: all 300ms ease-out;
    width: 30px;
    z-index: 3;
}

.card-media-preview:hover {
  background-color: rgb(var(--main-pink));
  box-shadow: 0 0 6px rgba(0,0,0,.16), 0 6px 12px rgba(0,0,0,.32);
}

.card2:hover .card-media-preview {
  opacity: 1;
  transform: translateY(0);
}

.card-media-tag {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 3px 3px 10px rgb(0 0 0 / 22%);
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .4px;
    padding: 5px 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-family: "Quicksand";
    background: rgba(255,255,255,0.1);
}

.card-media-tag-orange {
  color: #fff;
  font-style: italic;
}

.card-media-tag-brown {
  background-color: #855345;
  color: #E8CA69;
}

.card-body {
  float: left;
  padding: 25px 25px 25px 20px;
  }

.card-body-heading {
  color: #fff;
  display: inline-block;
  font-size: 20px;
  font-family: "Quicksand";
  width: 90%;
}

.card-body-options {
  float: right;
}

.card-body-option {
  cursor: pointer;
  display: inline-block;
  position: relative;
  margin-left: 5px;
}

.card-body-stars {
  list-style-type: none;
  margin: 12px 0;
  padding: 0;
}

.card-body-stars > li {
  cursor: pointer;
  display: inline-block;
  float: left;
}

.card-button {
  color: #fff;
  display: inline-block;
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  transition: all 200ms ease-out;
  font-family: "Quicksand";
}

.card-button svg {
  fill: #fff;
  transition: all 200ms ease-out;
}

.card-button-cta {
  background-color: #9C948A;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  color: #fff;
}

.card-button-cta:hover {
  box-shadow: 1px 5px 8px rgba(0, 0, 0, .18);
  background-color: #F44336;
}


.card-button-link:hover svg {
  fill: #fff;
}

.card-button-icon {
  display:inline-block;
}
.card-media-preview svg{
 margin-top: -3px;
}
.floating-action-button {
  background-color: #FF4133;
  border-radius: 50%;
  bottom: 25px;
  box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
  cursor: pointer;
  height: 56px;
  position: absolute;
  right: 25px;
  transition: all 200ms ease-out;
  width: 56px;
}

.floating-action-button:hover {
  background-color: rgb(var(--main-pink));
  box-shadow: 0 0 6px rgba(0,0,0,.16), 0 6px 12px rgba(0,0,0,.32);
}
.img_gradient{
  position: absolute;
  background-image:linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(46, 45, 59, 1));
  width: 100%;
  height: 100%;
  left:0;
  top:0;
  z-index: 0;
  border-radius: 5px;
}
.img_main{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height: 100%;
  z-index: -9;
  border-radius: 5px!important;
  object-fit: cover;
  object-position: center;
}
tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    background: #171a23!important;
    color: #fff!important;
}
#order_data th{
  cursor: pointer;
}
.paginate_button {
  cursor: pointer;
}
#example_filter{
  color: #fff;
}
.dataTables_length, .dataTables_info{
  display: none;
}
#example_filter input {
  background: rgba(255,255,255,0.2)!important;
    border: 0!important;
    color: #fff!important;
    outline: none!important;
    box-shadow: 0 0px!important;
}

.mySwiper_card {
  width: 400px;
  height: 550px;
}

.mySwiper_card .swiper-slide {
background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    font-size: 22px;
    font-weight: bold;
    color: #000;
    position: relative;
    z-index: 1;
    background-position: center center;
    background-size: cover;
    width: 400px;
    z-index: 10;
    transform: translate3d(0px, 0px, 0px) rotateZ(0deg) scale(1);
    transition-duration: 0ms;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    color: #fff;
    align-items: center;
    align-content: space-around;
    flex-direction: column;
}

  .mySwiper_card .swiper-slide-active {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .mySwiper_card .img {
    width: 150px;
    height: 150px;
    border: 5px solid #fdfdfd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .mySwiper_card .name {
    padding-top: 100px;
    text-align: center;
    font-weight: 500;
    font-size: 26px;
  }
  .mySwiper_card .title {
    text-align: center;
    font-size: 14px;
    color: #da80ae;
    font-weight: 300;
  }
  .mySwiper_card .desc {
    color: #6e6e6e;
    text-align: center;
    font-size: 20px;
    padding: 10px 20px;
    font-weight: 300;
  }
  .mySwiper_card .link {
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    text-decoration: none;
  }
  .mySwiper_card .img-1 {
    background-image: url("https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80");
  }
  .mySwiper_card .img-2 {
    background-image: url("https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80");
  }
  .mySwiper_card .img-3 {
    background-image: url("https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80");
  }
  .img-4 {
    background-image: url("https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80");
  }
  .img-5 {
    background-image: url("https://images.unsplash.com/photo-1552374196-c4e7ffc6e126?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8cG9ydHJhaXR8ZW58MHx8MHx8&auto=format&fit=crop&w=600&q=60");
  }
}
.blok:nth-of-type(odd) {
background-color:white;
}
    
.blok:nth-of-type(even) {
background-color:white;
}

@-webkit-keyframes border-transform{
    0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
  14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
  28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
  42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
  56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
  70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
  84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}
.progress-wrap {
  position: fixed;
  bottom: 30px;
  right: 15px;
  z-index: 999999;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset  0 0 0 2px rgba(0,0,0,0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.progress-wrap::after {
  position: absolute;
  font-family: 'unicons';
  content: '\e84b';
  text-align: center;
  line-height: 46px;
  font-size: 24px;
  color: rgba(255,255,255, 0.6); /* --- Pijl kleur --- */
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap:hover::after {
  opacity: 0;
}
.progress-wrap::before {
  position: absolute;
  font-family: 'unicons';
  content: '\e84b';
  text-align: center;
  line-height: 46px;
  font-size: 24px;
  opacity: 0;
  background: white; /* --- Pijl hover kleur --- */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
.progress-wrap:hover::before {
  opacity: 1;
}
.progress-wrap svg path { 
  fill: none; 
}
.progress-wrap svg.progress-circle path {
  stroke: rgba(255,255,255, 0.6); /* --- Lijn progres kleur --- */
  stroke-width: 4;
  box-sizing:border-box;
  -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}
#cards {
    display: grid;
    gap: 8px;
    grid-template-rows: repeat(1);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
}

#cards:hover > .card3::after {
  opacity: 1;
}

.card3 {
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    height: 220px;
    flex-direction: column;
    position: relative;
    width: 100%;
}

.card3:hover::before {
  opacity: 1;
}

.card3::before,
.card3::after {
  border-radius: inherit;
  content: "";
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: opacity 500ms;
  width: 100%;
}

.card3::before {
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.06),
    transparent 40%
  );
  z-index: 3;
}

.card3::after {  
  background: radial-gradient(
    600px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.4),
    transparent 40%
  );
  z-index: 1;
}

.card3 > .card-content {
  background-color: rgba(var(--second-color),0.4);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  inset: 1px;
  padding: 10px;
  position: absolute;
  z-index: 2;
}

.card-image2 {
    align-items: center;
    display: flex;
    justify-content: center;
    padding-top: 5px;
}

.card-image2 > i {
  font-size: 6em;
  opacity: 0.25;
}

.card-info-wrapper {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  padding: 20px 0px;
}

.card-info {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  text-align: center;
}

.card-info > i {  
  font-size: 1em;
  height: 20px;
  line-height: 20px;
}

.card-info-title > h3 {
  font-size: 1.1em;
  line-height: 20px;
}

.card-info-title > h4 {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85em;
  margin-top: 8px;
}
@media(max-width: 1000px) {

  
  #cards {    
   grid-template-columns: repeat(2, 1fr);
  }
  
}