@font-face {
  font-family: "oppo-light";
  src: url("/content/dam/oppo/id/mkt/events/the-joyfull-oppo-sale/v2/fonts/light.otf");
}

#joyFinModal p{
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
#joyFinModal ul{
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  font-weight:bold;

}
#joyFinModal ul > li{
  display: list-item;
  text-align: -webkit-match-parent;
  font-weight:bold;
  list-style: disc;
}

#joyFinModal ol{
  display: block;
  list-style-type: decimal;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  font-weight:bold;
}

#joyFinModal ol > li{
  display: list-item;
  text-align: -webkit-match-parent;
  font-weight:bold;
  list-style: decimal;
}

#joyBundleModal p{
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
#joyBundleModal ul{
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  font-weight:bold;

}
#joyBundleModal ul > li{
  display: list-item;
  text-align: -webkit-match-parent;
  font-weight:bold;
  list-style: disc;
}

#joyBundleModal ol{
  display: block;
  list-style-type: decimal;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  font-weight:bold;
}

#joyBundleModal ol > li{
  display: list-item;
  text-align: -webkit-match-parent;
  font-weight:bold;
  list-style: decimal;
}

#joyTradeModal p{
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
#joyTradeModal ul{
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  font-weight:bold;

}
#joyTradeModal ul > li{
  display: list-item;
  text-align: -webkit-match-parent;
  font-weight:bold;
  list-style: disc;
}

#joyTradeModal ol{
  display: block;
  list-style-type: decimal;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
  font-weight:bold;
}

#joyTradeModal ol > li{
  display: list-item;
  text-align: -webkit-match-parent;
  font-weight:bold;
  list-style: decimal;
}

/* modal */
.joy-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: slideIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s;
}

.joy-modal::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

/* Modal Content/Box */
.joy-modal-content {
  background-color: #fefefe;
  margin: 2% auto; /* 15% from the top and centered */
  border: 0;
  padding: 2vw;
  font-size: 1vw;
  width: 50%; /* Could be more or less, depending on screen size */
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

.joy-modal-content-video {
  background-color: #000000;
  margin: 2% auto; /* 15% from the top and centered */
  border: 0;
  width: 50%; /* Could be more or less, depending on screen size */
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

.joy-accordion {
  background-color: #2ec84d;
  color: #ffffff;
  cursor: pointer;
  font-size: 1vw;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: #ffffff solid 1px;
  font-size: 15px;
  transition: 0.4s;
}

.joy-active, .joy-accordion:hover {
  background-color: #26a840;
}

.joy-accordion:after {
  content: '\002B';
  color: #ffffff;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.joy-panel {
  padding: 0 18px;
  background-color:#f1f1f1;
  max-height: 0;
  overflow: auto;
  transition: max-height 0.2s ease-out;
}

.joy-tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.joy-tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 1vw 1.2vw;
  transition: 0.3s;
  font-size: 1vw;
  width: 50%;
}

/* Change background color of buttons on hover */
.joy-tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.joy-tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.joy-tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  width: 100%;
}

.styled-table {
  border-collapse: collapse;
  margin: 2vw 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  width: 100%;
}

.styled-table thead tr {
  background-color: #2ec84d;
  color: #ffffff;
  text-align: left;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
  border-bottom: 2px solid #2ec84d;
}

.styled-table tbody tr.active-row {
  font-weight: bold;
  color: #2ec84d;
}

/* The Close Button */
.buy-close {
  color: #aaa;
  float: right;
  font-size: 1.5vw;
  font-weight: bold;
  z-index: 100;
}

.buy-close:hover,
.buy-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.fin-close {
  color: #aaa;
  float: right;
  font-size: 1.5vw;
  font-weight: bold;
  z-index: 100;
}

.fin-close:hover,
.fin-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.trade-close {
  color: #aaa;
  float: right;
  font-size: 1.5vw;
  font-weight: bold;
  z-index: 100;
}

.trade-close:hover,
.trade-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.iot-close {
  color: #aaa;
  float: right;
  font-size: 1.5vw;
  font-weight: bold;
  z-index: 100;
}

.iot-close:hover,
.iot-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.bundle-close {
  color: #aaa;
  float: right;
  font-size: 1.5vw;
  font-weight: bold;
  z-index: 100;
}

.bundle-close:hover,
.bundle-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.vid-close {
  position: absolute;
  color: #5e5e5e;
  background: transparent;
  padding: 0;
  margin: 0 auto;
  right: 23%;
  top: 16%;
  font-size: 2vw;
  font-weight: bold;
  z-index: 100;
}

.vid-close:hover,
.vid-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@media (min-width: 670px) {
  #desktop-mode {
    display: block;
  }

  #mobile-mode {
    display: none;
  }

  .offer-btn {
    text-decoration: none !important;
    padding: 0.5vw 1vw 0.7vw 1vw;
    text-align: center;
    transition: 0.5s;
    color: #ffffff;
    font-size: 1vw;
    font-weight: bold;
    border: 0;
    border-radius: 0;
    z-index: 1;
  }

  .offer-btn-gradient {
    background-image: linear-gradient(to right, #000000, #000000);
  }

  .offer-btn-gradient:hover,
  .offer-btn-gradient:focus {
    color: #ffffff;
    filter: contrast(80%);
  }

  .detail-btn {
    text-decoration: none !important;
    padding: 0.5vw 1vw 0.7vw 1.5vw;
    text-align: center;
    transition: 0.5s;
    font-weight: bold;
    color: #ffffff;
    font-size: 1vw;
    border: 0;
    border-radius: 0;
    z-index: 1;
  }

  .detail-btn-gradient {
    background-image: linear-gradient(to right, #2ec84d, #2ec84d);
  }

  .detail-btn-gradient:hover,
  .detail-btn-gradient:focus {
    color: #ffffff;
  }

  .play-btn {
    text-decoration: none !important;
    padding: 0.9vw 1.2vw 0.9vw 0.9vw;
    text-align: center;
    transition: 0.5s;
    font-weight: bold;
    color: #ffffff;
    font-size: 1vw;
    border: 0;
    border-radius: 0;
    z-index: 1;
  }

  .play-btn-gradient {
    background-image: linear-gradient(to right, #000000, #000000);
  }

  .play-btn-gradient:hover,
  .play-btn-gradient:focus {
    color: #ffffff;
    filter: contrast(80%);
  }

  .buy-btn {
    text-decoration: none !important;
    padding: 0.4vw 0.8vw 0.55vw 0.8vw;
    text-align: center;
    color: #ffffff;
    font-size: 0.6vw;
    font-weight: bold;
    border: 0;
    border-radius: 0;
    z-index: 1;
    margin: 0;
    position: absolute;
    right: 10%;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .buy-btn-gradient {
    background-image: linear-gradient(to right, #2ec84d, #2ec84d);
  }

  .buy-btn-gradient:hover,
  .buy-btn-gradient:focus {
    color: #ffffff;
  }

  .joy-container-absolute {
    position: absolute;
    left: 0;
    top: 5%;
    width: 100%;
    padding: 0 8vw;
  }

  .header-title {
    font-size: 4.5vw;
    line-height: 5vw;
  }

  .header-sub {
    font-size: 1vw;
    line-height: 2vw;
    color: #818482;
  }

  .section-title {
    font-size: 4vw;
  }

  .section-subtitle {
    font-size: 1.2vw;
    line-height: 2.2vw;
  }

  .title-pad {
    padding: 1.5vw 0;
  }

  .subtitle-pad {
    padding: 1.5vw 0;
  }

  .product-padding {
    padding: 2vw 0;
  }

  .img-padding {
    padding: 2.5vw 0;
  }

  .product-name-padding {
    padding: 0.8vw 0;
  }

  .product-link-padding {
    padding: 0.8vw 0;
  }

  .underline {
    position: relative;
    padding-bottom: 0.3vw;
  }

  .findx2-name {
    font-size: 3vw;
    padding: 0 0 2vw 0;
  }

  .findx2-offer-1 {
    font-size: 1.2vw;
    padding: 0 0 0.2vw 0;
  }

  .findx2-offer-2 {
    font-size: 1.2vw;
    padding: 0.2vw 0 0 0;
  }

  .findx2-link-padding {
    font-size: 1.2vw;
    padding: 2vw 0 0 0;
  }

  #products-d {
    font-size: 1vw;
  }

  .product-link {
    color: #000000;
    font-size: 0.8vw;
    outline: 0;
    border: none;
    -moz-outline-style: none;
    text-decoration: none !important;
  }

  .product-link:focus, .product-link:active {
    outline: 0;
    border: none;
    -moz-outline-style: none;
    text-decoration: none !important;
  }

  .offers-title {
    font-size: 1.5vw;
  }

  .offers-desc {
    font-size: 1vw;
  }

  .pad-header {
    padding: 1.2vw 0.8vw;
  }

  .sec2-content-padding {
    padding: 4vw 0;
  }

  .sec2-content-area {
    padding: 2vw 2vw;
  }

  .sec2-text-trade {
    padding: 1.9vw 0 0 0;
  }

  .sec2-area-title {
    padding: 0 0 3vw 0;
  }

  .sec2-area-button {
    padding: 1vw 0 1vw 0;
  }

  .sec2-area-trade-button {
    padding: 3.3vw 0 1.5vw 0;
  }

  .sec2-right-padding {
    padding-right: 1.5vw
  }

  .sec2-padding-x {
    padding-right: 1vw;
    padding-left: 1vw;
  }

  .sec2-padding-y {
    padding-top: 1vw;
    padding-bottom: 1vw;
  }

  .sec2-trading-left {
    padding-left: 1.5vw
  }

  .sec3-vid-padding {
    padding-top: 3vw;
  }

  .sec3-joy-container-absolute {
    position: absolute;
    top: 85%;
    width: 100%;
  }

  .sec4-content-padding {
    padding: 4vw 0;
  }

  .sec4-image-padding {
    padding: 3vw;
  }

  .sec4-area-button {
    padding: 3vw 0 1.5vw 0;
  }

  .joy-modal-title {
    font-size: 1.5vw;
  }

  .joy-p-5 {
    padding: 3vw;
    margin: 2vw 1vw;
  }

  .joy-px-2 {
    padding: 1vw 2vw;
  }

  .joy-py-5 {
    padding-top: 5vw;
  }

  .joy-p-2 {
    padding: 1vw;
  }

  .down {
    position: fixed;
    width: 100%;
    z-index: 101;
  }
}

@media (max-width: 669px) {
  #mobile-mode {
    display: block;
  }

  #desktop-mode {
    display: none;
  }

  .joy-tab button {
    font-size: 3vw;
  }

  .detail-btn {
    text-decoration: none !important;
    padding: 2vw 3.5vw 2vw 5vw;
    font-weight: bold;
    text-align: center;
    transition: 0.5s;
    color: #ffffff;
    font-size: 3vw;
    border: 0;
    border-radius: 0;
    z-index: 1;
  }

  .detail-btn-gradient {
    background-image: linear-gradient(to right, #2ec84d, #2ec84d);
  }

  .detail-btn-gradient:hover,
  .detail-btn-gradient:focus {
    color: #ffffff;
  }

  .offer-btn {
    text-decoration: none;
    padding: 2vw 3.5vw 2vw 3.5vw;
    text-align: center;
    transition: 0.5s;
    color: #ffffff;
    font-size: 3vw;
    font-weight: bold;
    border: 0;
    border-radius: 0;
    z-index: 1;
  }

  .offer-btn-gradient {
    background-image: linear-gradient(to right, #000000, #000000);
  }

  .offer-btn-gradient:hover,
  .offer-btn-gradient:focus {
    text-decoration: none !important;
    color: #ffffff;
  }

  .play-btn {
    text-decoration: none !important;
    padding: 0.2vw 2vw;
    text-align: center;
    transition: 0.5s;
    color: #ffffff;
    font-size: 3vw;
    border: 0;
    border-radius: 0;
    z-index: 1;
  }

  .joy-container-absolute {
    position: absolute;
    left: 0;
    top: 2%;
    width: 100%;
    padding: 0 8vw;
  }

  .buy-btn {
    text-decoration: none !important;
    padding: 1.8vw 2.5vw;
    text-align: center;
    transition: 0.5s;
    color: #ffffff;
    font-size: 1.8vw;
    font-weight: bold;
    border: 0;
    border-radius: 0;
    z-index: 1;
    margin: 0;
    position: absolute;
    right: 10%;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .buy-btn-gradient {
    background-image: linear-gradient(to right, #2ec84d, #2ec84d);
  }

  .buy-btn-gradient:hover,
  .buy-btn-gradient:focus {
    color: #ffffff;
  }

  .header-title {
    font-size: 10vw;
    line-height: 14vw;
  }

  .header-sub {
    font-size: 3vw;
    line-height: 5vw;
    color: #818482;
  }

  .section-title {
    font-size: 9vw;
  }

  .section-subtitle {
    font-size: 4vw;
    line-height: 7vw;
  }

  .title-pad {
    padding: 5vw 0;
  }

  .subtitle-pad {
    padding: 5vw 0;
  }

  .product-padding {
    padding: 8vw 0;
  }

  .img-padding {
    padding: 5vw 0;
  }

  .product-name-padding {
    padding: 2vw 0;
  }

  .product-link-padding {
    padding: 2vw 0;
  }

  .a-little-gap {
    padding-bottom: 7vw;
  }

  .underline {
    position: relative;
    padding-bottom: 1vw;
  }

  .findx2-name {
    font-size: 6vw;
    padding-bottom: 4vw;
  }

  .findx2-link-padding {
    font-size: 2.5vw;
    padding: 4vw 0 0 0;
  }

  .findx2-content-padding {
    padding: 8vw;
  }

  .product-link {
    color: #000000;
    font-size: 2.5vw;
    outline: 0;
    border: none;
    -moz-outline-style: none;
    text-decoration: none !important;
  }

  .product-link:focus, .product-link:active {
    outline: 0;
    border: none;
    -moz-outline-style: none;
    text-decoration: none !important;
  }

  #products-m {
    font-size: 3vw;
  }

  .offers-title {
    font-size: 4.5vw;
  }

  .offers-desc {
    font-size: 2.8vw;
  }

  .pad-header {
    padding-top: 3.5vw;
    padding-bottom: 3.5vw;
  }

  .sec2-content-padding {
    padding: 8vw 0;
  }

  .sec2-content-area {
    padding: 8vw 8vw;
    margin-bottom: 7vw;
  }

  .sec2-area-title {
    padding: 0 0 8vw 0;
  }

  .sec2-area-button {
    padding: 8vw 0 4vw 0;
  }

  .sec2-bottom-padding {
    padding: 0 0 10vw 0;
  }

  .sec2-padding-x {
    padding-right: 5vw;
    padding-left: 5vw;
  }

  .sec2-padding-y {
    padding-top: 1vw;
    padding-bottom: 1vw;
  }

  .sec3-vid-padding {
    padding: 5vw 0 10vw 0;
  }

  .sec3-joy-container-absolute {
    position: absolute;
    top: 70%;
    width: 100%;
  }

  .sec4-content-padding {
    padding: 4vw 6vw;
  }

  .sec4-image-padding {
    padding: 0;
  }

  .sec4-area-button {
    padding: 6vw 0 8vw 0;
  }

  .sec4-padding {
    padding: 0 0 10vw 0;
  }

  .joy-modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 0;
    padding: 5vw;
    font-size: 3vw;
    border: 0;
    width: 90%; /* Could be more or less, depending on screen size */
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
  }

  .joy-modal-content-video {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 0;
    border: 0;
    width: 90%; /* Could be more or less, depending on screen size */
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
  }

  .joy-modal-title {
    font-size: 6vw;
  }

   /* The Close Button */
  .buy-close-m {
    color: #aaa;
    position: absolute;
    top: 8.5%;
    right: 10%;
    font-size: 5vw;
    font-weight: bold;
    z-index: 100;
  }

  .buy-close-m:hover,
  .buy-close-m:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  
  .fin-close {
    color: #aaa;
    position: absolute;
    top: 8.5%;
    right: 10%;
    font-size: 5vw;
    font-weight: bold;
    z-index: 100;
  }

  .trade-close {
    color: #aaa;
    position: absolute;
    top: 8.5%;
    right: 10%;
    font-size: 5vw;
    font-weight: bold;
    z-index: 100;
  }

  .iot-close {
    color: #aaa;
    position: absolute;
    top: 8.5%;
    right: 10%;
    font-size: 5vw;
    font-weight: bold;
    z-index: 100;
  }

  .bundle-close {
    color: #aaa;
    position: absolute;
    top: 8.5%;
    right: 10%;
    font-size: 5vw;
    font-weight: bold;
    z-index: 100;
  }

  .vid-close {
    position: absolute;
    color: #5e5e5e;
    background: transparent;
    padding: 0;
    margin: 0 auto;
    right: 5%;
    top: 21%;
    font-size: 5.5vw;
    font-weight: bold;
    z-index: 100;
  }
  
  .vid-close:hover,
  .vid-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  .vid-close-m {
    position: absolute;
    color: #5e5e5e;
    background: transparent;
    padding: 0;
    margin: 0 auto;
    right: 5%;
    top: 21%;
    font-size: 5.5vw;
    font-weight: bold;
    z-index: 100;
  }
  
  .vid-close-m:hover,
  .vid-close-m:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  .joy-p-5 {
    padding: 5.5vw;
    margin: 3vw 3vw;
  }

  .joy-p-3 {
    padding: 5.5vw 0;
    margin: 3vw 3vw;
  }

  .joy-row-8 {
    display: grid;
  grid-template-columns: repeat(8, 1fr);
  }

  .joy-pb-2 {
    padding-bottom: 3vw;
  }

  .joy-p-2 {
    padding: 2vw;
  }

  .down {
    position: fixed;
    width: 100%;
    z-index: 101;
  }

  .joy-accordion {
    font-size: 3vw;
  }

  .styled-table {
    font-size: 3vw;
  }
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "oppo-light";
}

.page-container {
  padding: 5vw 8vw;
}

.product-background {
  background: #f6f6f6;
}

.strike {
  position: relative;
}

.strike::after {
  content: "";
  border-bottom: 2px solid red;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
}

.underline::after {
  content: "";
  border-bottom: 1px solid #000000;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.product-link:hover {
  color: #000000;
}

.lb-background {
  background: #ebf6ff;
}

.white-content-background {
  background: #ffffff;
}

.grey-content-background {
  background: #f6f6f6;
}

#vid-container {
  padding-bottom: 56.25%;
  position: relative;
  display: block;
  width: 100%;
  background-color: #000000;
}

#vid-content {
  position: absolute;
  top: 0;
  left: 0;
}

.img-zoom {
  transition: transform 0.7s;
}

.img-zoom:hover {
  transform: scale(1.1);
}

.thead-oppo {
  background-color: #2ec84d;
}

.thead-black {
  background-color: #2e2e2e;
  color: #ffffff;
}

.joy-display-topright {
  position: absolute;
  right: 2%;
  top: 2%;
  font-size: 1.5vw;
}

.joy-text-center {
  text-align: center !important;
}

.joy-text-left {
  text-align: left !important;
}

.joy-text-right {
  text-align: right !important;
}

.joy-text-bold {
  font-weight: 900;
}

.joy-m-0 {
  margin: 0;
}

.joy-p-0 {
  padding: 0;
}

.joy-px-0 {
  padding-right: 0;
  padding-left: 0;
}

.joy-pl-0 {
  padding-left: 0;
}

.joy-pr-0 {
  padding-right: 0;
}

.joy-pt-5 {
  padding-top: 15vw;
}

.joy-img-fluid {
  max-width: 100%;
  height: auto
}

.joy-col-12 {
  grid-column: span 12;
}

.joy-col-2 {
  grid-column: span 2;
}

.joy-col-3 {
  grid-column: span 3;
}

.joy-col-4 {
  grid-column: span 4;
}

.joy-col-5 {
  grid-column: span 5;
}

.joy-col-6 {
  grid-column: span 6;
}

.joy-col-8 {
  grid-column: span 8;
}

.joy-col-10 {
  grid-column: span 10;
}

.joy-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.joy-row-10 {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

*, ::after, ::before {
  box-sizing: border-box;
}

.joy-align-center {
  align-content: center;
  display: flex;
}

.joy-justify-center {
  justify-content: center;
  display: flex;
}

.product-gap-left {
  padding: 0 0 0 3vw;
}

.product-gap-right {
  padding: 0 3vw 0 0;
}

.top-padding {
  padding: 4vw 0 0 0
}

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

.nav-container {
  padding: 0 10vw;
  border-bottom: 1px solid #dadada;
  border-top: 1px solid #dadada;
}

#vid-container {
  padding-bottom:56.25%; 
  position:relative; 
  display:block; 
  width: 100%;
  background-color: #000000;
}

#vid-content-d {
  position: absolute;
  top: 0;
  left: 0;
}

#vid-content-m {
  position: absolute;
  top: 0;
  left: 0;
}

.joy-slider-padding {
  padding:2em 0.5em;
  height: 600px;
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

.stop{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}