@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;500;700&display=swap");

/* Base */
*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "Nunito", sans-serif;
}

body {
  background: #f6f4f4;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.flex-c {
  flex-direction: column;
}

.w-100 {
  width: 100%;
}

.app {
  width: 100%;
  min-height: 100vh;
  color: #111111;
}

.sidebar {
  width: 80px;
  height: 100vh;
  background: #0b0b0b;
  position: fixed;
  top: 0;
  left: 0;
  transition: 0.3s linear;
  justify-content: start;
  z-index: 22;
}

.content {
  width: calc(100% - 80px);
  height: 100%;
  position: absolute;
  left: 80px;
  top: 0;
  padding: 12px;
  overflow-x: hidden;
}

.icon {
  width: 45px;
  height: 45px;
  font-size: 28px;
  padding: 10px;
  border: 1px solid #efeff3;
  border-radius: 40%;
  transition: 0.3s ease;
  cursor: pointer;
}

.icon.active {
  border-color: #f5f0ef;
  background: #000;
  color: #fff !important;
}

.primary {
  font-size: 30px;
  font-weight: 800;
}

.secondary {
  font-size: 20px;
  font-weight: 500;
}

.tertiary {
  font-size: 14px;
  font-weight: 400;
}

@keyframes slideLeft {
  from {
    transform: translateX(2000px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-2000px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Popup Styles */
.movie-popup-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.movie-popup-content {
    background: #141414;
    width: 80%;
    max-width: 1000px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.popup-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* Video is bigger */
}

.popup-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popup-details {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.close-popup {
    position: absolute;
    top: 10px; right: 20px;
    background: none; border: none;
    color: white; font-size: 40px; cursor: pointer; z-index: 10;
}

.category-badge {
    background: #ef0404;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    width: fit-content;
}

/* Ensure the grid doesn't squash the Saved Section */
.movies-content {
    display: block !important; /* Overrides the 2-column grid to allow sections to stack */
}

.saved-section .all-movies, .movies .all-movies {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* Fix Overlay Hover behavior */
.image-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 20%, transparent);
}

.movie:hover .image-overlay {
    opacity: 1;
}

/* Style for the Bookmark Button inside the card */
.bookmark-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(220, 227, 5, 0.949);
    border: none;
    color: rgb(12, 12, 12);
    width: 4px;
    height: 10px;
    border-radius: 5%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.bookmark-btn.active {
    color: #face08;
}


/* x-cloak fix */
[x-cloak] { display: none !important; }


/* Hover Disappear Effect */
.image-overlay {
    transition: opacity 0.3s ease;
}
.movie:hover .image-overlay {
    opacity: 1;
}

/* Dark Blur Background */
.movie-popup-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Modal Content Box */
.movie-popup-content {
    background: #181818;
    width: 90%;
    max-width: 1000px;
    height: 550px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

/* Two-Column Layout */
.popup-grid {
    display: flex;
    height: 100%;
}

.popup-video {
    flex: 1.5; /* Video takes more space */
    background: #000;
}

.popup-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popup-details {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    background: #181818;
    color: #fff;
}

/* Ensure saved movies show titles on hover like the main list */
.saved-section .movie .image-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(251, 248, 248, 0.8) 0%, transparent 100%);
    display: flex;
    align-items: flex-end;
    padding: 15px;
    opacity: 0;
    transition: 0.3s ease;
}

.saved-section .movie:hover .image-overlay {
    opacity: 1;
}


/* Close Button */
.close-popup {
    position: absolute;
    top: 15px; right: 15px;
    background: rgba(0, 0, 0, 0.1);
    color: #fff; border: none;
    width: 10px; height: 10px;
    border-radius: 50%; cursor: pointer;
    z-index: 100;
    display: flex; align-items: center; justify-content: center;
}


/* End Base */

/* Sidebar */
.mobile-btn {
  width: 45px;
  height: 45px;
  border-radius: 2px;
  background: #FFF;
  position: absolute;
  top: 15px;
  left: 225px;
  color: #000;
  font-size: 35px;
  cursor: pointer;
  display: none;
}

.logo {
  font-size: 40px;
  margin: 20px 0;
  color: #face08;
}

.sidebar .icon {
  margin-bottom: 16px;
  color: #f6f6fa;
}

/* End Sidebar */

/* Content */

/* Dashboard */
.dashboard {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 7% 91%;
  grid-row-gap: 10px;
}

.mobile-overlay {
  display: none;
}

.movies {
  animation: slideLeft 0.6s ease-in-out;
}

.updates {
  animation: slideRight 0.6s ease-in-out;
}

.movies-content {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  margin-top: 10px;
}

.contents {
  padding: 20px;
  display: none;
}

.dashboard {
  display: grid;
}

/* Movies Content */
.categories {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-column-gap: 12px;
}

.category {
  background: #686d3e;
  height: 30px;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s all;
}

.category-icon {
  font-size: 15px;
  margin-bottom: 5px;
}

.category.active {
  background: #f6f9f5;
}

.all-movies {
  width: 100%;
  margin: 30px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.movie {
  border-radius: 5px;
  height: 350px;
  background-image: url(https://raw.githubusercontent.com/programmercloud/movies-website/main/img/movie-1.jpg);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.movie {
  border-radius: 8px;
  height: 350px;
  background-size: cover; /* Required */
  background-position: center; /* Required */
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  background-color: #1a1a1a; /* Placeholder color while loading */
}


.image-overlay {
  width: 100%;
  height: 20%;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(5px);
  text-align: center;
  position: absolute;
  bottom: 0;
  opacity: 0;
}

.image-overlay-text {
  margin-top: 10px;
}

.movie:hover .image-overlay {
  opacity: 1;
  transition: 0.6s ease;
}

/* End Movies Content */

/* Updates Section */
.news {
  width: 90%;
  margin-left: auto;
  background: #6462b4;
  padding: 20px;
  border-radius: 5px;
}

.news h2 {
  margin-bottom: 5px;
}

.news p.secondary {
  margin: 15px 0;
}

.news ul {
  margin-left: 20px;
}

.news ul li {
  margin: 20px 0;
  font-size: 15px;
  font-weight: 400;
}

.trailer {
  width: 90%;
  height: 230px;
  margin-left: auto;
  margin-top: 30px;
  background-image: url(https://raw.githubusercontent.com/programmercloud/movies-website/main/img/movie-poster.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  border-radius: 5px;
  overflow: hidden;
}

.trailer-overlay {
  width: 100%;
  height: 100%;
  font-size: 100px;
  position: relative;
  background: rgba(0, 0, 0, 0.38);
}

.trailer-overlay ion-icon {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  display: none;
}

.trailer:hover .trailer-overlay {
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(3px);
  transition: 0.1s ease;
}

.trailer:hover .trailer-overlay ion-icon {
  display: block;
}
/* End Updates Section */

/* End Dashboard */

/* Friends */
.friends .primary {
  text-align: center;
  margin-top: 40px;
}

.my-friends {
  width: 90%;
  margin: 30px auto 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  animation: slideLeft 0.6s ease-in-out;
}

.friend {
  width: 250px;
  height: 200px;
  background-image: url(https://raw.githubusercontent.com/programmercloud/movies-website/main/img/friend-1.jpg);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 3px;
  margin: 15px auto;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.friend:nth-of-type(2) {
  background-image: url(https://raw.githubusercontent.com/programmercloud/movies-website/main/img/friend-2.jpg);
}

.friend:nth-of-type(3) {
  background-image: url(https://raw.githubusercontent.com/programmercloud/movies-website/main/img/friend-3.jpg);
}
.friend:nth-of-type(4) {
  background-image: url(https://raw.githubusercontent.com/programmercloud/movies-website/main/img/friend-4.jpg);
}
.friend:nth-of-type(5) {
  background-image: url(https://raw.githubusercontent.com/programmercloud/movies-website/main/img/friend-5.jpg);
}
.friend:nth-of-type(6) {
  background-image: url(https://raw.githubusercontent.com/programmercloud/movies-website/main/img/friend-6.jpg);
}

.friend-name {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #211e41;
  z-index: 5;
}

.friend-overlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(3px);
  font-size: 20px;
  font-weight: 700;
  opacity: 0;
  transition: 0.3s ease;
}

.friend-overlay span {
  padding: 5px 20px;
  background: #fff;
  color: #211e41;
  border-radius: 2px;
  text-transform: uppercase;
}

.friend:hover .friend-overlay {
  opacity: 1;
  transition: 0.1s ease;
}
/* End Friends */

/* Watch */
.video {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 65% 35%;
  grid-gap: 20px;
  text-align: center;
}

.video video {
  width: 100%;
  margin-top: 40px;
  border-radius: 5px;
  animation: slideRight 0.6s ease-in-out;
}

.video .trailer {
  width: 60%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  background-image: url(https://raw.githubusercontent.com/programmercloud/movies-website/main/img/movie-4.jpg);
  background-position: top;
}

.video .trailer:nth-of-type(2) {
  background-image: url(https://raw.githubusercontent.com/programmercloud/movies-website/main/img/movie-3.jpg);
}

.video .trailer:nth-of-type(3) {
  background-image: url(https://raw.githubusercontent.com/programmercloud/movies-website/main/img/movie-2.jpg);
}

/* End Watch */

/* Chat */
.chat {
  width: 100%;
  height: 100%;
  padding: 20px;
  text-align: center;
}

.chat .primary {
  margin-bottom: 20px;
}

.btn {
  padding: 10px 28px;
  background: #fc5d2d;
  color: #fff;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  transition: 0.3s ease;
}

.btn:hover {
  background: #e85b30;
}
/* ENd Chat */

/* Saved Movies */
.saved-movies .primary {
  margin: 20px 0 40px 0;
  text-align: center;
}

.saved {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  animation: slideLeft 0.6s ease-in-out;
}
/* End Saved Movies */

/* Settings */
.settings {
  width: 100%;
  height: 100%;
}

.settings .primary {
  margin-bottom: 30px;
}
/* ENd Settings */

/* End Content */

/* Responsive */

@media (max-width: 930px) {
  .movies-content {
    grid-template-columns: 1fr;
  }

  .updates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .trailer {
    margin-top: 100px;
  }

  .my-friends {
    grid-template-columns: repeat(2, 1fr);
  }

  .video {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-200px);
  }

  .content {
    width: 100%;
    left: 0;
    padding: 0;
  }

  .contents {
    padding: 0 20px;
    margin-top: 60px;
  }

  .sidebar.mobile-active {
    transform: translateX(0);
  }

  .mobile-btn {
    display: flex;
    transition: 0.3s linear;
  }

  .mobile-btn.mobile-active {
    left: 130px;
  }

  .mobile-overlay.mobile-active {
    display: block;
    transition: 0.3s linear;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(8px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;
  }

  .categories {
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 15px;
  }

  .all-movies {
    grid-template-columns: repeat(2, 1fr);
  }

  .movie {
    border-radius: 1px;
    height: 40vh;
  }

  .updates {
    grid-template-columns: 1fr;
  }

  .news,
  .trailer {
    margin: 0 auto 40px auto;
  }

  .next .primary {
    margin: 20px auto;
  }

  .video .trailer {
    width: 100%;
    height: 350px;
  }

  .saved {
    grid-template-columns: repeat(2, 1fr);
  }

  .chat,
  .settings {
    margin-top: 0;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .all-movies {
    grid-template-columns: 1fr;
  }

  .movie {
    height: 60vh;
  }

  .friend {
    width: 140px;
    height: 160px;
  }

  .saved {
    grid-template-columns: 1fr;
  }
}
/* End Responsive */



.youtube {
  position: fixed;
  bottom: 40px;
  right: 70px;
  text-decoration: none;
  padding: 8px 12px;
  background: rgb(252, 252, 252);
  border-radius: 6px;
  box-shadow: 0 2px 2px 3px rgba(0, 0, 0, 0.2);
  color: #000;
}

.youtube p {
  font-size: 12px;
}




.backdrop {
  z-index: -5;
  position: absolute;
  inset: 0;

  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);

  mask-image: linear-gradient(
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.5) 10%,
    rgba(0, 0, 0, 0.8) 20%,
    rgba(0, 0, 0, 1) 30%,
    rgb(0, 0, 0)
  );

  -webkit-mask-image: linear-gradient(
    rgba(0, 0, 0, 0),
    rgba(233, 10, 10, 0.5) 10%,
    rgba(0, 0, 0, 0.8) 20%,
    rgba(0, 0, 0, 1) 30%,
    rgb(0, 0, 0)
  );
}

.col {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: calc(0.3 * var(--m)) calc(0.8 * var(--m));
  width: 28%;
}

.col2,
.col3 {
  background-color: #f4f1f1;
  border-radius: calc(0.1 * var(--m));
}

img {
  height: calc(0.3 * var(--m));
  object-fit: cover;
}

.social {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 1rem;
}

a {
  text-decoration: none;
  color: inherit;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
    /* 1. Sidebar to Top Navigation */
    .sidebar {
        width: 100%;
        height: 60px;
        flex-direction: row;
        padding: 0 15px;
        justify-content: space-between;
    }

    .sidebar .menu {
        display: none; /* Hide sidebar icons on mobile or move to a bottom bar */
    }

    .mobile-btn {
        display: flex; /* Show the menu toggle */
    }

    /* 2. Content Adjustment */
    .content {
        width: 100%;
        left: 0;
        top: 60px; /* Offset for the top sidebar */
        padding: 10px;
    }

    /* 3. Movies Content Stack */
    .movies-content {
        display: flex;
        flex-direction: column;
    }

    /* 4. Movie Grids (2 columns on mobile) */
    .all-movies {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-gap: 10px;
    }

    .movie {
        height: 250px; /* Shorter cards for mobile */
    }

    /* 5. Watch Section (Stack Video and Sidebar) */
    .video-layout {
        grid-template-columns: 1fr !important; /* Stack vertically */
        gap: 20px;
    }

    .main-player video {
        border-radius: 0; /* Full width looks better on small screens */
    }

    /* 6. Modal Popup Adjustment */
    .movie-popup-content {
        width: 95%;
        height: auto;
        max-height: 90vh;
        flex-direction: column; /* Stack video and details */
        overflow-y: auto;
    }

    .popup-grid {
        display: flex;
        flex-direction: column;
    }

    .popup-video {
        height: 200px;
    }

    .popup-details {
        padding: 20px;
    }

    /* 7. Category Scroller */
    .categories {
        display: flex;
        overflow-x: auto; /* Enable horizontal scroll */
        flex-wrap: nowrap;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .category {
        flex: 0 0 auto; /* Prevent categories from shrinking */
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .all-movies {
        grid-template-columns: 1fr !important; /* Single column */
    }
}

.link {
  width: calc(0.8 * var(--m));
  height: calc(0.8 * var(--m));
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: calc(0.1 * var(--m));

  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 1000px) {
  :root {
    --m: 3rem;
  }
}

@media screen and (max-width: 700px) {
  footer {
    flex-direction: column;
    padding: 5rem 20vw;
  }
  .col {
    width: 100%;
  }
}


@import url("https://fonts.googleapis.com/css?family=IBM%20Plex%20Sans:500|IBM%20Plex%20Sans:300");

:root {
  --m: 2rem;
}

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}



.card {
  height: calc(8 * var(--m));
  width: calc(12 * var(--m));
  background: linear-gradient(120deg, #0e0e0e, #725bdc);
  color: black;
  border-radius: calc(0.5 * var(--m));

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--m);

  position: fixed;
  margin: calc(2 * var(--m)) calc(5 * var(--m)) calc(5 * var(--m))
    calc(5 * var(--m));
}

button {
  background-color: #000;
  font-size: calc(0.4 * var(--m));
  border: none;
  color: #e5e5e5;
  font-family: "IBM Plex Sans";
  font-weight: 400;
  padding: calc(0.35 * var(--m)) calc(0.8 * var(--m));
  border-radius: calc(0.3 * var(--m));
}




/* Container for alignment */
.icon-container {
    display: inline-block;
}

/* The Popup Box */
.user-popup {
    position: absolute;
    top: 55px;
    right: 0;
    width: 220px;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid #333;
    padding: 15px;
    border-radius: 4px;
    z-index: 100;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.5);
}

.user-popup::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 15px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgba(0, 0, 0, 0.95);
}

.user-info { margin-bottom: 10px; }

.popup-divider {
    border: 0;
    border-top: 1px solid #333;
    margin: 10px 0;
}

.user-popup ul { list-style: none; padding: 0; }

.user-popup ul li a, .logout-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    padding: 8px 0;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.user-popup ul li a:hover, .logout-btn:hover {
    text-decoration: underline;
}

.logout-btn { font-weight: 700; margin-top: 5px; }

/* Ensure x-cloak works */
[x-cloak] { display: none !important; }


/* Popup Overlay */
.movie-popup-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.movie-popup-content {
    background: #141414;
    width: 90%;
    max-width: 1100px;
    height: 600px;
    display: flex; /* Flex for Left/Right split */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.popup-video {
    flex: 1.6; /* Video is bigger */
    background: #000;
}

.popup-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popup-details {
    flex: 1;
    padding: 40px;
    background: linear-gradient(to right, #141414, #1a1a1a);
    overflow-y: auto;
}

.close-popup {
    position: absolute;
    top: 20px; right: 20px;
    background: rgba(255,255,255,0.1);
    color: white; border: none;
    width: 40px; height: 40px;
    border-radius: 50%; cursor: pointer;
    font-size: 24px; z-index: 10;
}

/* Hover effect for Movie Cards */
.image-overlay {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.movie:hover .image-overlay {
    opacity: 1;
}

[x-cloak] { display: none !important; }


/* resources/css/kibflix.css */

/* Target Jetstream's white containers */
.netflix-card, 
.bg-white, 
[class*="bg-white"] {
    background-color: #141414 !important; /* Netflix Dark Grey */
    color: #fff !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
}

/* Fix Labels and Text in Jetstream Forms */
.netflix-card label, 
.netflix-card p, 
.netflix-card h3 {
    color: #fff !important;
}

.netflix-card input {
    background-color: #333 !important;
    border: 1px solid #444 !important;
    color: #fff !important;
    border-radius: 4px !important;
}

/* Fix the "Save" Button to match your theme */
.netflix-card button[type="submit"] {
    background-color: #face08 !important; /* Your logo yellow */
    color: #000 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

/* Fix the bottom "Gray" section in Jetstream cards */
div[class*="bg-gray-50"], 
.bg-gray-50 {
    background-color: #1f1f1f !important;
    border-top: 1px solid #333 !important;
}



/* Layout Fixes */
.movies-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 25px;
  margin-top: 20px;
}

/* Profile & Dropdown */
.profile-container {
  position: relative;
  z-index: 1000;
}

.user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 40%;
  object-fit: cover;
}

.user-popup {
  position: absolute;
  right: 0;
  top: 60px;
  width: 200px;
  background: #211e41;
  border: 1px solid #3f3e6d;
  padding: 15px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.user-popup a, .user-popup button {
  display: block;
  width: 100%;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

.user-popup .login-btn {
  background: #0a0a0a;
  text-align: center;
  border-radius: 10px;
  font-weight: bold;
}

[x-cloak] { display: none !important; }

/* Responsive */
@media (max-width: 1100px) {
  .movies-content {
    grid-template-columns: 1fr;
  }
  .updates {
    width: 100%;
  }
  .updates .news, .updates .trailer {
    width: 100%;
    margin-left: 0;
  }
}


// ----------------------------------------------
// MQs
//-----------------------------------------------
//Smallest phone
$mq-xsmall: 22em;
//phone
$mq-small: 32em;
//Tablet
$mq-med: 54em;
//laptop
$mq-large: 65em;
//Past laptop
$mq-xlarge: 91em;
//Mid Size monitor
$mq-xxlarge: 115em;
//Thunderbold goes to 157em
$mq-xxxlarge: 130em;

$color-alpha:     #00ffc8;
$color-beta:      #003a49;
$color-white:     #fff;
$color-lightgrey: #f5f6f6;
$color-midgrey:   #a7a6a6;

$ease-cb: cubic-bezier(.4,0,.2,1);
$ease-cb-2: cubic-bezier(.19,1,.22,1);
$ease-cb-3: cubic-bezier(.77,0,.175,1);

$font-header: "Montserrat", Helvetica, sans-serif;
$font-paragraph: "Montserrat", Georgia, serif;

%font-links{
  font-family: $font-header;
  font-size: 0.8em;
  font-weight: 400;
  text-transform: uppercase;
}


//----------------------------------------------
//  bg-overlay()
//  Pseduo overlay element  
//  @param: $bg_hex: [$color-dark] - hex value for rgba conversion
//  @param: $bg_opacity:[0.6] - alpha transparency level
//  @param: $top_layer: element or class name for higher z-index layer
//----------------------------------------------
@mixin bg-overlay($bg_hex: $color-dark, $opacity: 0.6) {
  &:after {
    z-index: 0;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: $opacity;
    background: $bg_hex;
  }
}

//----------------------------------------------
//  font-rwd
//  Change font-size across breaks 
//  @param: $font_sm  - at small
//  @param: $font_med - at med break
//  @param: $font_lg  - at Large break
//  @param: $font_xl  - at Xlarge break  
//----------------------------------------------
@mixin font-rwd($sm:null, $med:null, $lg:null, $xl:null, $xxl:null) {
  font-size: $sm;
  
  @if $med {
    @media(min-width: $mq-med){
      font-size: $med;
    }
  }

  @if $lg {
    @media(min-width: $mq-large){
      font-size: $lg;
    }
  }

  @if $xl {
    @media(min-width: $mq-xlarge){
      font-size: $xl;
    }
  }

  @if $xxl {
    @media(min-width: $mq-xxlarge){
      font-size: $xxl;
    }
  }
}


body {
  margin: 0;
  width: 100%;
  font-weight: 400;
  font-style: normal;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
  text-rendering: optimizeLegibility;
}

/** 
 * Default to Border Box
 */
*, *:before, *:after {
  box-sizing: border-box; 
}


/**
 * Links
 */
a {
  text-decoration:  none;
  background-color: transparent;
  outline: 0;
}

//---------------------------------------------- 
//  Btn Theme
//  Button reset theme
//----------------------------------------------
%btn-theme{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  text-decoration:none;
  @extend %font-links;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  transition: all 0.4s ease-in-out;
}

//---------------------------------------------- 
//  Btn-Draw
//  Mixin that creates a button that draws out
// .btn .btn__text span
//----------------------------------------------

$btn-draw-size: 1px;

.btn-draw{
  @extend %btn-theme;
  color: $color-alpha;
  margin-left: 2.3em;

  &:after{
    content: '';
    top: 0;
    right: 0;
    height: $btn-draw-size;
    width: 100%;
    background-color: $color-alpha;
  }
  
  &:before{
    content: '';
    position: absolute;
    top:50%;
    left: -2.4em;
    height: $btn-draw-size;
    width: 3em;
    background-color: $color-alpha;
    transition: all 0.25s ease;
  }

  .btn-draw__text{
    position: relative;
    display: block;
    padding: 0.7555em 2.29em;
    line-height: 1.5;
    transition: transform 0.5s ease;

    &:before, &:after{
      content: '';
      position: absolute;
      height: $btn-draw-size;
      width: 0;
      background-color: $color-alpha;

    }
    &:before{
      top: 0;
      left: 0;
      transition: width 0.15s 0.45s $ease-cb-3; // 4th
    }
    &:after{
      bottom: 0;
      right: 0;
      transition: width 0.15s 0.15s $ease-cb-3; // 2nd
    }
  }

  // Buttons
  .btn-draw__text > span{
    
    &:before, &:after{
      content: '';
      position: absolute;
      height: 0;
      width: $btn-draw-size;
      background-color: $color-alpha;
      transition: all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9);
    }
    &:before{
      left: 0;
      bottom: 0;
      transition: height 0.15s 0 $ease-cb-3; // 1st
    }
    &:after{
      right: 0;
      top: 0;
      transition: height 0.15s 0.3s $ease-cb-3; // 3rd
    }
  }
  @media (hover) {
  &:hover, a:hover &{
    cursor: pointer;
    color: $color-alpha;

    &:before{
      width: 0;
      transition: all 0.4s ease;
    }

    .btn-draw__text{
      transform: translateX(-2.2em);
      transition: transform 0.5s ease, width 1s ease;

      // Build Top and bottom borders via width
      &:before{
        width: 100%;
        max-width: 100%;
        transition: width 0.15s  $ease-cb-3; // 1st
      }
      &:after{
        width: 100%;
         transition: width 0.15s 0.3s  $ease-cb-3; // 3rd
      }
    }

    // Build Left and Right borders via height;
    .btn-draw__text > span{
      
      &:before{
        left: 0;
        height: 100%;
        transition: height 0.15s 0.45s $ease-cb-3; // 4th
      }
      &:after{
        right: 0;
        height: 100%;
        transition: height 0.15s 0.15s $ease-cb-3; // 2nd
      }
    }  
  }
}
}

//---------------------------------------------- 
//  Btn Draw - White modifier
//----------------------------------------------
.btn-draw.btn--white{
  color: #fff;

  &:before, 
  &:after, 
  .btn-draw__text:before, 
  .btn-draw__text:after,
  .btn-draw__text > span:before, 
  .btn-draw__text > span:after{
    background-color: #fff
  }

  &:hover, 
  a:hover &{
    color: #fff;
  }
}



//----------------------------------------------
// Typography
//----------------------------------------------
body {
  font-family: $font-paragraph;
  line-height: 1.6;
}

//----------------------------------------------
// Fluid body sizing
//----------------------------------------------
body {
  font-size: 100%;
  
  @media (min-width: $mq-small) {
    font-size: 102%;
  }
  @media (min-width: $mq-med) {
    font-size: 103%;
  }
  @media (min-width: $mq-large) {
    font-size: 107%;
  }
  @media (min-width: 75em) {
    font-size: 110%;
  }
  @media (min-width: $mq-xlarge) {
    font-size: 120%;
  }
  @media (min-width: $mq-xxlarge) {
    font-size: 130%;
  }
  @media (min-width: $mq-xxxlarge) {
    font-size: 140%;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: $font-header;
  font-weight: 700;
}



//---------------------------------------------- 
//  CP Slider - CP-Slides
//  The Container for CP Slides, with requirements for 
//  scroll jacking interaction.
//----------------------------------------------
.velo-slides{
  z-index: 8;
  position: relative;
  height: 100vh;
  background-color: #111;

  // Might need to do above $mq-large
  &[data-velo-slider="on"]{
    overflow: hidden;
  }
}

//---------------------------------------------- 
//  CP Slider - CP-Slide
//  The single slide instances
//----------------------------------------------
.velo-slide{
  height: 100vh;
  z-index: 4;

  @media (min-width: $mq-med) and (max-width: $mq-large){
    font-size: 80%;
  }

  @media (min-width: $mq-med) and  (min-height: 0) and (max-height: 45em){
    font-size: 70%;
  }

  // scroll jack requirement
  [data-velo-slider="on"] &{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  // Is active
  &.is-active{
    z-index: 8;
  }

  // The Slide Background
  &__bg{
    z-index: 7;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    color: #111;
    transform: translateZ(0);
    backface-visibility: hidden;
    background-color: #111;
    // Apply box shadow for a more 3d effect. js applies this value.
    //box-shadow: 0 0 0 rgba(25, 30, 46, 0.4);
    overflow: hidden;
    @include bg_overlay(#111, 0.4);
  }

  // Apply Colors to our backgrounds and set currentColor
  &:nth-of-type(1n) .velo-slide__bg{
    //background-color: $color-alpha;
    //color: $color-alpha;
  }


  // Slide Background Image
  &__figure{
    z-index: 0;
    position: relative;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1);
    transition: transform 0.5s ease;

    //padding: 7em;
    .is-hovering &{
      transform: scale(1.1);
      transition: transform 0.5s ease;
    }
  }

  ///
  &__vid-wrap{
    z-index: 5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow:hidden;
    transform: scale(1);
    transition: transform 0.5s ease;
    @include bg_overlay(#111, 0.4);
    .is-hovering &{
      transform: scale(1.1);
      transition: transform 0.5s ease;
    }
  }

  &__vid{
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    min-width: 100%;
    max-width: none;
    height: auto;
    min-height: 100%;
    object-fit:cover;
  }

  // Our main content wrap for each slide instance
  &__header{
    z-index: 9;
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    overflow-y: hidden;
    padding: 6%;
    //transform: translateX(5%);
  }

  // Velo-Slide__Pretitle
  &__pretitle{
    color: #fff;
    max-width: 22em;
    @media (min-width: $mq-med){
      margin-left: 7%;
    }
    @media (max-width: $mq-med){
      //order:2;
    }
  }

  // Velo-Slide__Title
  // The Title for each slide
  &__title{
    margin-bottom: 0.1em;
    line-height: 1.1;
    color: #fff;
    letter-spacing: -0.025em;
    font-weight: 700;
    
    @include font-rwd(2.25em, 5em, 5em, 5em);
  }

  // Velo-Slide__Text
  &__text{
    color: #fff;
    max-width: 30em;
    display: block;
    margin: 1em 0 1.5em 1%;
    font-size: 1.1em;
    line-height: 1.8;
    font-weight: 300;
  }

  // Velo-Slide__Btn
  &__btn{
    opacity: 0;
    @media (min-width: $mq-med){
      margin-left: 1vw;
    }
    .is-active &{
      opacity: 1;
    }
  }
  &__btn > a > span{
    opacity: 0;
    overflow-y: hidden;
    transform: translate3d(0,100%,0);

    .is-active &{
      opacity: 1;
      z-index: 9999;
      transform: translate3d(0,0,0);
      transition: transform 0.4s ease, opacity 0.8s ease;
    }
  }
}


.velo-slides[data-velo-theme="light"]{
  background: #212121;
  border: 1em solid #c5cac5;

  .velo-slide{
    margin-top: -1em;
  }

  .velo-slide__bg{
    color: #c5cac5;
  }
}



[data-velo-theme="dark"]{
  background: #111;

  .velo-slides__bg{
    background-color: #111;
    filter: grayscale(100%);
  }
}

//---------------------------------------------- 
//  Overflow Hidden
//  Styles to enable slice effect for text entrances  
//----------------------------------------------
.oh{
  display: block;
  overflow-y: hidden;
  padding: 0.02em 0;
}
  
.oh span{
  display: inline-block;
  transform:translate3d(0,140%,0);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.8s ease;
}

.is-active .oh span{
  transform:translate3d(0,0%,0);
  opacity: 1;
  transition: transform 0.6s $ease-cb-3, opacity 0.1s ease;
}

.is-active .oh:nth-of-type(2n) span{
  transition-delay:0.2s;
}


//---------------------------------------------- 
//  CP Slider Border Interactions  
//----------------------------------------------

$border-resting-sm:0vw;
$border-animating-sm: 8vw;
$border-resting:10vw;
$border-resting-xl:7vw;
$border-resting-xxl:7vw;
$border-animating: 12vw;
$border-hovering: 0vw;

@mixin velo-slider-border($h_w, $sm, $med, $xl, $xxl){
    #{$h_w}: $sm;
  @media (min-width: $mq-med){
    #{$h_w}:  $med;
  }
  @media (min-width: $mq-xlarge){
    #{$h_w}: $xl;
  }
  @media (min-width: $mq-xxlarge){
    #{$h_w}:  $xxl;
  }
}


.border, 
.border:before, 
.border:after, 
.border span{
  z-index: 91;
  position: fixed;
  background-color: currentColor;
  transition: 0.35s ease-in-out;

  .is-hovering &{
    transition: 0.5s ease-in-out;
  }
  .velocity-animating &{
    transition: 0.5s $ease-cb-3;
  }
}

.border{
  top: 0;
  left:0;
  width: 100%;

  @include velo-slider-border(height, $border-resting-sm, $border-resting, $border-resting-xl, $border-resting-xxl);

  .is-hovering &{
    height: $border-hovering;
  }
  .velocity-animating &{
    height: $border-animating-sm;
    @media (min-width: $mq-med){
      height: $border-animating;
    }
  }
}

.border:before{
  content:'';
  bottom: 0;
  left: 0;
  width: $border-resting-sm;
  height: 100%;
  @include velo-slider-border(width, $border-resting-sm, $border-resting, $border-resting-xl, $border-resting-xxl);

  .is-hovering &{
    width: $border-hovering;
  }

  .velocity-animating &{
    width: $border-animating-sm;
    @media (min-width: $mq-med){
      width: $border-animating;
    }
  }
}

.border:after{
  content:'';
  bottom: 0;
  right: 0;
  height:100%;
  width: $border-resting-sm;
  @include velo-slider-border(width, $border-resting-sm, $border-resting, $border-resting-xl, $border-resting-xxl);
  
  .is-hovering &{
    width: $border-hovering;
  }

  .velocity-animating &{
    width: $border-animating-sm;
    @media (min-width: $mq-med){
      width: $border-animating;
    }
  }
}

.border span{
  bottom: 0;
  left: 0;
  height: $border-resting-sm;
  width: 100%;
  @include velo-slider-border(height, $border-resting-sm, $border-resting, $border-resting-xl, $border-resting-xxl);

  .is-hovering &{
    height: $border-hovering;
  }
  .velocity-animating &{
    height: $border-animating-sm;
    @media (min-width: $mq-med){
      height: $border-animating;
    }
  }
}


//---------------------------------------------- 
//  CP Slider Hints
//  Vertical line with text, rotated to left of slide
//----------------------------------------------
.velo-slider__hint {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  height: 100vh;
  width: 4em;
  font-size: 0.9em;
  color: #fff;

  @media (min-width: $mq-med){
    display: block;
  }
  
  & > span {
    position: absolute;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    transform: translate(-50%, -50%) rotate(-90deg);
    @extend %font-links;
    overflow:hidden;

  }

  & > span > span{
    display: inline-block;
    transform: translateY(-110%);
    
    .is-active &{
      opacity: 1;
      top: 50%;
      transition: 1s  $ease-cb-2;
      transform: translateY(0%);
      transition: 0.4 ease;
    }
  }
}
  
//---------------------------------------------- 
//  CP Slides: Nav
//  Up/Down nav for CP Slider
//----------------------------------------------

.velo-slides-nav {
  /* lateral navigation */
  position: fixed;
  z-index: 91;
  right: 3%;
  bottom: 1em;

  @media (min-width: $mq-med){
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  &__list{
    list-style: none;
  }

  li:first-child{
    margin-bottom: 0.25em;
  }
  
  a {
    display: block;
    color: rgba(#fff,0.9);
    transition: color 0.5s ease, text-shadow 0.5s ease;

    &:hover{
      color: rgba(#fff,1);
      text-shadow: 0px 0px 6px rgba(255,255,255,0.6);
      transition: color 0.5s ease, text-shadow 0.5s ease;
    }
  }

  a.inactive {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s 0s, visibility 0s 0.2s;
  }
  i{
    font-size: 2.2em;

    @media (min-width: $mq-med){
      font-size: 1.5em;
    }
  }
}



















@font-face {
  font-family: 'ssicons';
  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBfgAAAC8AAAAYGNtYXAXVtKOAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZiOKaFQAAAF4AAADTGhlYWQNcwRaAAAExAAAADZoaGVhB6EDzQAABPwAAAAkaG10eCYAA2sAAAUgAAAAMGxvY2EETAN0AAAFUAAAABptYXhwAA4AIQAABWwAAAAgbmFtZbVmJhcAAAWMAAABhnBvc3QAAwAAAAAHFAAAACAAAwPHAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qf//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAArgPFAp8AFgAAEzQ2NzYyFwkBNjIXFhQHAQYiJwEuATUABAMIFQgBugG7CBUHCAj+MwcVCP4zAwQCjQUJBAcH/kUBuwcHCBUH/jMICAHNAwoFAAAAAQDu/8AC3wOFABYAAAUiJicmNDcJASY0NzYyFwEWFAcBDgEjAQAFCQQICAG7/kUICAcWBwHNBwf+MwQJBUAEAwgVCAG6AbsIFQcICP4zBxUI/jMDBAAAAAEAAACuA8UCnwAWAAA3FBYXFjI3CQEWMjc2NCcBJiIHAQ4BFQAEAwgVCAG6AbsIFQcICP4zBxUI/jMDBMAFCQQICAG7/kUICAcWBwHNBwf+MwQJBQAAAAABAO7/wALfA4UAFgAABTI2NzY0JwkBNjQnJiIHAQYUFwEeATMCzQUJBAcH/kUBuwcHCBUH/jMICAHNAwoFQAQDCBUIAboBuwgVBwgI/jMHFQj+MwMEAAAAAQCh//MDMwOfAB4AAAkBBhQXFjI3AREUFjMyNjURARYyNz4BNTQmJwEmIgcB1P7NBwcIFQcBCA8KCw8BBwgVCAMEBAP+zAcVCAOf/s0IFQcICAEH/L4LDw8LA0L++QgIAwoFBQkEATMHBwAAAQCa/+EDLAONAB4AAAUBNjQnJiIHARE0JiMiBhURASYiBw4BFRQWFwEWMjcB+QEzBwcIFQf++A8LCg/++AcVCAQDAwQBMwgVCB8BMwgVBwgI/vkDQgsPDwv8vgEHCAgDCgUFCQT+zQcHAAAAAQAhAFoDzQLsAB4AABMBNjIXFhQHASEyFhUUBiMhARYUBw4BIyImJwEmNDchATMIFQcICP75A0ILDw8L/L4BBwgIAwoFBQkE/s0HBwG5ATMHBwgVB/74DwsKD/74BxUIBAMDBAEzCBUIAAAAAQAzAFoD3wLsAB4AAAkBJiIHBhQXASEiBhUUFjMhAQYUFx4BMzI2NwE2NCcD3/7NCBUHCAgBB/y+Cw8PCwNC/vkICAMKBQUJBAEzBwcBuQEzBwcIFQf++A8LCg/++AcVCAQDAwQBMwgVCAAAAQAAAAEAAMChG+1fDzz1AAsEAAAAAADVOl//AAAAANU6X/8AAP/AA98DnwAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAD3wABAAAAAAAAAAAAAAAAAAAADAQAAAAAAAAAAAAAAAIAAAAEAAAABAAA7gQAAAAEAADuBAAAoQQAAJoEAAAhBAAAMwAAAAAACgAUAB4ASgB2AKIAzgEEAToBcAGmAAAAAQAAAAwAHwABAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApHNzaWNvbnMAcwBzAGkAYwBvAG4Ac1ZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMHNzaWNvbnMAcwBzAGkAYwBvAG4Ac3NzaWNvbnMAcwBzAGkAYwBvAG4Ac1JlZ3VsYXIAUgBlAGcAdQBsAGEAcnNzaWNvbnMAcwBzAGkAYwBvAG4Ac0ZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=") format('truetype');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'ssicons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-down-chev:before {
  content: "\e900";
}
.icon-right-chev:before {
  content: "\e901";
}
.icon-up-chev:before {
  content: "\e902";
}
.icon-left-chev:before {
  content: "\e903";
}
.icon-up-arrow:before {
  content: "\e904";
}
.icon-down-arrow:before {
  content: "\e905";
}
.icon-left-arrow:before {
  content: "\e906";
}
.icon-right-arrow:before {
  content: "\e907";
}