/* Swiper css min start*/

:root {
    --swiper-theme-color: #007aff;
  }
  .swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
  }
  .swiper-vertical > .swiper-wrapper {
    flex-direction: column;
  }
  .swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
  }
  .swiper-android .swiper-slide,
  .swiper-wrapper {
    transform: translate3d(0px, 0, 0);
  }
  .swiper-pointer-events {
    touch-action: pan-y;
  }
  .swiper-pointer-events.swiper-vertical {
    touch-action: pan-x;
  }
  .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
  }
  .swiper-slide-invisible-blank {
    visibility: hidden;
  }
  .swiper-autoheight,
  .swiper-autoheight .swiper-slide {
    height: auto;
  }
  .swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height;
  }
  .swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .swiper-3d,
  .swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px;
  }
  .swiper-3d .swiper-cube-shadow,
  .swiper-3d .swiper-slide,
  .swiper-3d .swiper-slide-shadow,
  .swiper-3d .swiper-slide-shadow-bottom,
  .swiper-3d .swiper-slide-shadow-left,
  .swiper-3d .swiper-slide-shadow-right,
  .swiper-3d .swiper-slide-shadow-top,
  .swiper-3d .swiper-wrapper {
    transform-style: preserve-3d;
  }
  .swiper-3d .swiper-slide-shadow,
  .swiper-3d .swiper-slide-shadow-bottom,
  .swiper-3d .swiper-slide-shadow-left,
  .swiper-3d .swiper-slide-shadow-right,
  .swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(
      to left,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0)
    );
  }
  .swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0)
    );
  }
  .swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0)
    );
  }
  .swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0)
    );
  }
  .swiper-css-mode > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none;
  }
  .swiper-css-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  .swiper-horizontal.swiper-css-mode > .swiper-wrapper {
    scroll-snap-type: x mandatory;
  }
  .swiper-vertical.swiper-css-mode > .swiper-wrapper {
    scroll-snap-type: y mandatory;
  }
  .swiper-centered > .swiper-wrapper::before {
    content: '';
    flex-shrink: 0;
    order: 9999;
  }
  .swiper-centered.swiper-horizontal
    > .swiper-wrapper
    > .swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before);
  }
  .swiper-centered.swiper-horizontal > .swiper-wrapper::before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after);
  }
  .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before);
  }
  .swiper-centered.swiper-vertical > .swiper-wrapper::before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after);
  }
  .swiper-centered > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: center center;
  }
  .swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
  }
  .swiper-virtual.swiper-css-mode .swiper-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
  }
  .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size);
  }
  .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size);
  }
  :root {
    --swiper-navigation-size: 24px;
  }
  .swiper-button-next,
  .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
  }
  .swiper-button-next.swiper-button-disabled,
  .swiper-button-prev.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-button-next.swiper-button-hidden,
  .swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
  }
  .swiper-button-prev,
  .swiper-rtl .swiper-button-next {
    left: 10px;
    right: auto;
  }
  .swiper-button-prev:after,
  .swiper-rtl .swiper-button-next:after {
    content: 'prev';
  }
  .swiper-button-next,
  .swiper-rtl .swiper-button-prev {
    right: 10px;
    left: auto;
  }
  .swiper-button-next:after,
  .swiper-rtl .swiper-button-prev:after {
    content: 'next';
  }
  .swiper-button-lock {
    display: none;
  }
  .swiper-pagination {
    position: absolute;
    text-align: center;
    transition: 0.3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
  }
  .swiper-pagination.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-pagination-custom,
  .swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%;
  }
  .swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0;
  }
  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
    transform: scale(1);
  }
  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet {
    width: var(
      --swiper-pagination-bullet-width,
      var(--swiper-pagination-bullet-size, 8px)
    );
    height: var(
      --swiper-pagination-bullet-height,
      var(--swiper-pagination-bullet-size, 8px)
    );
    display: inline-block;
    border-radius: 50%;
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  }
  button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
  }
  .swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer;
  }
  .swiper-pagination-bullet:only-child {
    display: none !important;
  }
  .swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
  }
  .swiper-pagination-vertical.swiper-pagination-bullets,
  .swiper-vertical > .swiper-pagination-bullets {
    right: 10px;
    top: 50%;
    transform: translate3d(0px, -50%, 0);
  }
  .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
  .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
  .swiper-vertical
    > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
  }
  .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic
    .swiper-pagination-bullet,
  .swiper-vertical
    > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
    .swiper-pagination-bullet {
    display: inline-block;
    transition: 0.2s transform, 0.2s top;
  }
  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets
    .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  .swiper-horizontal
    > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .swiper-horizontal
    > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
    .swiper-pagination-bullet,
  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic
    .swiper-pagination-bullet {
    transition: 0.2s transform, 0.2s left;
  }
  .swiper-horizontal.swiper-rtl
    > .swiper-pagination-bullets-dynamic
    .swiper-pagination-bullet {
    transition: 0.2s transform, 0.2s right;
  }
  .swiper-pagination-progressbar {
    background: rgba(0, 0, 0, 0.25);
    position: absolute;
  }
  .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
  .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  .swiper-horizontal > .swiper-pagination-progressbar,
  .swiper-pagination-progressbar.swiper-pagination-horizontal,
  .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
  .swiper-vertical
    > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: 4px;
    left: 0;
    top: 0;
  }
  .swiper-horizontal
    > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
  .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
  .swiper-pagination-progressbar.swiper-pagination-vertical,
  .swiper-vertical > .swiper-pagination-progressbar {
    width: 4px;
    height: 100%;
    left: 0;
    top: 0;
  }
  .swiper-pagination-lock {
    display: none;
  }
  .swiper-scrollbar {
    border-radius: 10px;
    position: relative;
    -ms-touch-action: none;
    background: rgba(0, 0, 0, 0.1);
  }
  .swiper-horizontal > .swiper-scrollbar {
    position: absolute;
    left: 1%;
    bottom: 3px;
    z-index: 50;
    height: 5px;
    width: 98%;
  }
  .swiper-vertical > .swiper-scrollbar {
    position: absolute;
    right: 3px;
    top: 1%;
    z-index: 50;
    width: 5px;
    height: 98%;
  }
  .swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    left: 0;
    top: 0;
  }
  .swiper-scrollbar-cursor-drag {
    cursor: move;
  }
  .swiper-scrollbar-lock {
    display: none;
  }
  .swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .swiper-zoom-container > canvas,
  .swiper-zoom-container > img,
  .swiper-zoom-container > svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .swiper-slide-zoomed {
    cursor: move;
  }
  .swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent;
  }
  .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
  .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
  .swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff;
  }
  .swiper-lazy-preloader-black {
    --swiper-preloader-color: #000;
  }
  @keyframes swiper-preloader-spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000;
  }
  .swiper-free-mode > .swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto;
  }
  .swiper-grid > .swiper-wrapper {
    flex-wrap: wrap;
  }
  .swiper-grid-column > .swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out;
  }
  .swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
  }
  .swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none;
  }
  .swiper-fade .swiper-slide-active,
  .swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto;
  }
  .swiper-cube {
    overflow: visible;
  }
  .swiper-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
  }
  .swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none;
  }
  .swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0;
  }
  .swiper-cube .swiper-slide-active,
  .swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto;
  }
  .swiper-cube .swiper-slide-active,
  .swiper-cube .swiper-slide-next,
  .swiper-cube .swiper-slide-next + .swiper-slide,
  .swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible;
  }
  .swiper-cube .swiper-slide-shadow-bottom,
  .swiper-cube .swiper-slide-shadow-left,
  .swiper-cube .swiper-slide-shadow-right,
  .swiper-cube .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: 0;
  }
  .swiper-cube .swiper-cube-shadow:before {
    content: '';
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    filter: blur(50px);
  }
  .swiper-flip {
    overflow: visible;
  }
  .swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
  }
  .swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none;
  }
  .swiper-flip .swiper-slide-active,
  .swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto;
  }
  .swiper-flip .swiper-slide-shadow-bottom,
  .swiper-flip .swiper-slide-shadow-left,
  .swiper-flip .swiper-slide-shadow-right,
  .swiper-flip .swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .swiper-creative .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height;
  }
  .swiper-cards {
    overflow: visible;
  }
  .swiper-cards .swiper-slide {
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
  }
  .button{
    border: none;
    font-size: 16px;
    color: #FFF;
    padding: 8px 16px;
    background-color: #4070F4;
    border-radius: 6px;
    margin: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .button:hover{
    background: #265DF2;
    opacity: 1;
  }
  
  .swiper-navBtn{
    color: #6E93f7;
    transition: color 0.3s ease;
   
  }
  .swiper-navBtn:hover{
    color: #4070F4;
  }
  .swiper-navBtn::before,
  .swiper-navBtn::after{
    font-size: 35px;
  }
  .swiper-button-next{
    right: 0;
  }
  .swiper-button-prev{
    left: 0;
  }
  
  .swiper-pagination-bullet{
    background-color: #6E93f7;
    opacity: 1;
  }
  .swiper-pagination-bullet-active{
    background-color: #4070F4;
  }
  .card-bd{
    position: relative;
  }
  .card-main{
    overflow: hidden;
  }
  @keyframes slide-down {
    from {
      -webkit-transform: translateX(-5%);
              transform: translateX(-5%);
      opacity: .3;
    }
    to {
      -webkit-transform: translateX(0%);
              transform: translateX(0%);
      opacity: 1;
    }
  }
  
  @keyframes slide-btm {
    from {
      -webkit-transform: translateY(-5%);
              transform: translateY(-5%);
      opacity: .3;
    }
    to {
      -webkit-transform: translateY(0%);
              transform: translateY(0%);
      opacity: 1;
    }
  }
  @keyframes slide-header {
    from {
      -webkit-transform: translateY(-125%);
              transform: translateY(-125%);
      opacity: .8;
    }
    to {
      -webkit-transform: translateY(0%);
              transform: translateY(0%);
      opacity: 1;
    }
  }
  @keyframes move {
    0% {
      -webkit-transform: translate(-15px, 0);
              transform: translate(-15px, 0);
    }
    50% {
      -webkit-transform: translate(0px, -15px);
              transform: translate(0px, -15px);
    }
    100% {
      -webkit-transform: translate(-15px, 0);
              transform: translate(-15px, 0);
    }
  }
  @keyframes move {
    0% {
              transform: translateY(0);
    }
    50% {
              transform: translateY(15px);
    }
    100% {
              transform: translateY(0);
    }
  }
  @keyframes tab {
    0% {
              transform: translate(0, -10px);
    }
    50% {
              transform: translate(-10px, 0px);
    }
    100% {
              transform: translate(0px, -10px);
    }
  }
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}@keyframes bottomslide {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}@keyframes rightslide {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}@keyframes spin {
  10% {
    width: 0;
    height: 0;
    border-width: 6px;
  }
  30% {
    width: 0;
    height: 0;
    border-radius: 50%;
    border-width: 1em;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    border-color: #c7daf5;
  }
  50% {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    border-width: 4px;
    border-color: #c7daf5;
    border-right-color: #5998ef;
  }
  70% {
    border-width: 4px;
    border-color: #c7daf5;
    border-right-color: #5998ef;
  }
  90% {
    border-width: 4px;
  }
  100% {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    -webkit-transform: rotate(720deg);
            transform: rotate(720deg);
    border-color: transparent;
  }
}
  .card-link{
    position: absolute;
    background-color: #173588f2;
    width: 100%;
    bottom: 0%;
    height: 0%;
    opacity: 0;
    /* transform: translateY(0%); */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform-origin: bottom center;
    transition: all .5s ease-in-out;

  }
  .card-main:hover .card-link{
    /* transform: translateY(-100%); */
    height: 100%;
    opacity: 1;
    transition-delay: .2s;
   
  }


  .card-link h3{
      font-size: 20px;
      color: #fff;
      font-family: 'Cerebri Sans Pro';
      font-style: normal;
      font-weight: 600;
  }
  .card-link .inner-link, a{
    font-size: 16px;
    color: #fff;
    font-family: 'Cerebri Sans Pro';
    font-style: normal;
    font-weight: 400;
}
.outer-link{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  
}

.inner-link{
  display: flex;
}
.player button {
  cursor: pointer;
}

.player input[type=range] {
  -webkit-appearance: none;
  align-self: center;
  background: rgb(231, 231, 231);
  height: 20px;
  opacity: .7;
  outline: none;
}

.player input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: rgb(0, 174, 255);
  cursor: pointer;
  height: 20px;
  width: 20px;
}

.player input[type=range]::-moz-range-thumb {
  background: rgb(0, 174, 255);
  border: none;
  border-radius: 0;
  cursor: pointer;
  height: 20px;
  width: 20px;
}

.player input[type=range]::-moz-range-track {
  background: rgb(231, 231, 231);
  border: none;
  width: 100%;
}

.player select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: white;
  border: none;
  cursor: pointer;
  color: black;
  font-weight: 600;
  outline: none;
  text-align: center;
  text-align-last: center;
  width: 2.5rem;
}

.player option {
  background: rgb(78, 78, 78);
  color: white;
  outline:none;
  text-align: center;
  text-align-last: center;
}

.player {
  margin: 0 auto;
  margin-bottom: 0;
  height: 100vh;
  display: none;
}
.player-active{
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99999999999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 1s ease-in-out;
}
.player video{
  width: 750px;
  margin-top: 0px !important;
}

.player:fullscreen .video-screen {
  background: rgb(38, 38, 39)
}

.player:fullscreen .file-chooser {
  transform: translateY(500%);
}

.file-chooser {
  color: white;
  cursor: pointer;
  height: 50px;
  transform: translateY(-50%);
  display: none;
}

.video-screen {
  background: rgb(188,188,188);
  display: block;
  object-fit: cover;
  margin: 0 auto;
  transition: opacity .5s;
  position: relative;
}
.video-main{
  position: relative;
}
.close-btn{
  color: black;
  background-color: rgb(216, 201, 201);
  position: absolute;
  top: -48px;
  right: 0px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.close-btn i{
  font-size: 20px;
}
.controls {
  border-top: 5px solid rgba(0, 0, 0, 0.02);
  border-bottom: 5px solid rgba(0, 0, 0, 0);
  display: flex;
  height: 150px;
  width: 150px !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  justify-content: space-around;
  opacity: 0;
  margin: 0;
  transition: .5s;
  transition-property: opacity, visibility;
  visibility: hidden;
  border-radius: 50%;
  background-color: #ffc82d;
  cursor: pointer;
}

.controls * {
  opacity: .7;
  transition: opacity .3s;
}

.controls.active {
  opacity: 1;
  visibility: visible;
}

.fullscreen-button {
  align-self: center;
  border: 7px dashed white;
  background: transparent;
  height: 35px;
  margin: 0 15px;
  transition: scale .1s;
  width: 40px;
  display: none;
}

.play {
  align-self: center;
  height: 40px;
  margin: 0 20px;
  width: 20px;
}

.play.start {
  background: none;
  border: 20px solid transparent;
  border-right: none;
  border-left: 31px solid #181515;
  margin: 0;
  margin-left: 5px;
  border-radius: 6px;
}

.play.pause {
  background: none;
  border: none;
  border-left: 15px solid #181515;
  border-right: 15px solid #181515;
  padding: 6px;
  margin: 0;
  margin-left: 5px;
  margin-right: 3px;
}

.volume-bar {
  margin: 0 20px;
  width: 80px;
  display: none;
}

.time-bar {
  width: 70%;
  display: none;
}

.time {
  align-self: center;
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 24px;
  min-width: 135px;
  opacity: .9;
  display: none;
}

.speed {
  align-self: center;
  color: white;
  font-weight: bold;
  opacity: .9;
  margin-right: 5px;
  width: 50px;
  display: none;
}

::-webkit-media-controls {
  display:none;
}

@media (hover: hover) {
  .controls *:hover {
    opacity: .9;
  }

  .fullscreen-button:active {
    transform: scale(1.2);
  }
}

@media only screen and (max-width: 900px) {
  .player {
    margin: 0;
    max-width: 100vw;
    max-height: 100vh;
  }

  .controls {
    justify-content: space-evenly;
  }

  .controls * {
    margin: 0;
    margin-left: 8px;
  }

  .controls {
    margin: 0;
  }


  .time {
    font-size: 18px;
    font-weight: 400;
    max-width: 14%;
    min-width: 10%;
    width: 10%;
  }

  .time-bar {
    width: 100%;
  }

  .volume-bar {
    max-width: 10%;
  }

  .speed {
    display: none;
  }

  .fullscreen-button {
    border-width: 3px;
    height: 25px;
    margin-right: 8px;
    min-width: 25px;
    width: 40px;
  }

  .file-chooser {
    display: none;
  }
}
@media only screen and (max-width: 767px){
.controls {
    width: 70px !important;
    height: 70px !important;
}
}
.footer-swiper{
  align-items: center;
  -webkit-transition-timing-function:linear!important;    transition-timing-function:linear!important; 
  position: relative;
}


  
.sliderr {
  height: 60px;
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/*  IMPORTANT CODE BELOW */

.slide-track {
  width: calc(150px * 20);
  display: flex;
  animation: scroll 40s linear infinite;
  justify-content: space-between;
}
.slide-track:hover{
  animation-play-state: paused;
}

.slidee {
  height: 60px;
  display: grid;
  place-items: center;
  transition:0.5s;
  cursor:pointer;
}
.slide1{width: 120px;}
.slide2{width: 50px;}
.slide3{width: 60px;}
.slide4{width: 60px;}
.slide5{width: 150px;}
.slide6{width: 60px;}
.slide7{width: 130px;}
.slide8{width: 150px;}
.slide9{width: 150px;}
.slide10{width: 160px;}
.slide11{width: 130px;}
.slidee:hover{
  transform:scale(0.8)
}

@keyframes scroll {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-150px * 10));
  }
}


@media screen and (max-width: 768px) {
  .slide-track {
    width: calc(120px * 20);
  }
  .slide1{width: 80px;}
  .slide2{width: 40px;}
  .slide3{width: 50px;}
  .slide4{width: 50px;}
  .slide5{width: 100px;}
  .slide6{width: 40px;}
  .slide7{width: 90px;}
  .slide8{width: 100px;}
  .slide9{width: 120px;}
  .slide10{width: 120px;}
  .slide11{width: 100px;}

  @keyframes scroll {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-120px * 15));
    }
  }

}