.container.bg-white.main-page {
  width: 100vw;
}

.frame {
  width: 100%;
  float: left;
  height: 521px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  background: #fff;
}

.frame div {
  margin-left: 0;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  width: 2220px;
  overflow: hidden;
  float: left;
  margin-top: 440px;
  padding-left: 35px;
  padding-right: 35px;
}

.frame img.large {
  position: absolute;
  width: 100%;
  height: 435px;
  top: 0;
  right: 0;
  opacity: 0;
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  -ms-box-sizing: content-box !important;
  box-sizing: content-box !important;
  -webkit-object-fit: scale-down;
  -moz-object-fit: scale-down;
  -ms-object-fit: scale-down;
  object-fit: scale-down;
}

.frame input {
  position: relative;
  left: 0;
  display: none;
}

.frame label.thumb {
  display: block;
  float: left;
  margin-right: 20px;
}

.frame label.thumb img {
  height: 78px;
  width: 102px;
  float: left;
  cursor: pointer;
  border: 1px solid #d7d7d7;
  backface-visibility: hidden;
  -webkit-object-fit: scale-down;
  -moz-object-fit: scale-down;
  -ms-object-fit: scale-down;
  object-fit: scale-down;
}

.frame label.left {
  position: absolute;
  left: 0;
  bottom: 0px;
  margin: 0;
  cursor: pointer;
  width: 35px;
  height: 84px;
  text-align: center;
  line-height: 20px;
  background: #fff;
}

.frame label.right {
  position: absolute;
  right: 0;
  bottom: 0px;
  margin: 0;
  cursor: pointer;
  width: 35px;
  text-align: center;
  height: 84px;
  line-height: 20px;
  background: #fff;
}

.frame label.left img, .frame label.right img {
  margin-top: 30px;
}

.frame label.one, .frame label.two, .frame label.three, .frame label.four, .frame label.five, .frame label.six {
  z-index: 90;
}

.frame input#push1:checked ~ label.six, .frame input#push3:checked ~ label.one, .frame input#push5:checked ~ label.two, .frame input#push7:checked ~ label.three, .frame input#push9:checked ~ label.four, .frame input#push11:checked ~ label.five, .frame input#push2:checked ~ label.two, .frame input#push4:checked ~ label.three, .frame input#push6:checked ~ label.four, .frame input#push8:checked ~ label.five, .frame input#push10:checked ~ label.six, .frame input#push12:checked ~ label.one {
  z-index: 100;
}

.frame input#push3:checked ~ div, .frame input#push12:checked ~ div {
  margin-left: 0px;
}

.frame input#push11:checked ~ div, .frame input#push7:checked ~ div, .frame input#push4:checked ~ div, .frame input#push8:checked ~ div {
  margin-left: -974px;
}

.frame input#push2:checked ~ div, .frame input#push10:checked ~ div, .frame input#push1:checked ~ div, .frame input#push5:checked ~ div {
  margin-left: -487px;
}

.frame input#push6:checked ~ div, .frame input#push9:checked ~ div {
  margin-left: -1462px;
}

.frame input#push12:checked ~ div {
  margin-left: 0;
}

.frame input#pic1:checked ~ .lab1, .frame input#pic2:checked ~ .lab2, .frame input#pic3:checked ~ .lab3, .frame input#pic4:checked ~ .lab4, .frame input#pic5:checked ~ .lab5, .frame input#pic6:checked ~ .lab6, .frame input#pic7:checked ~ .lab7, .frame input#pic8:checked ~ .lab8, .frame input#pic9:checked ~ .lab9, .frame input#pic10:checked ~ .lab10, .frame input#pic11:checked ~ .lab11, .frame input#pic12:checked ~ .lab12, .frame input#pic13:checked ~ .lab13, .frame input#pic14:checked ~ .lab14, .frame input#pic15:checked ~ .lab15, .frame input#pic16:checked ~ .lab16, .frame input#pic17:checked ~ .lab17, .frame input#pic18:checked ~ .lab18, .frame input#pic19:checked ~ .lab19, .frame input#pic20:checked ~ .lab20 {
  opacity: 0.8;
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  -ms-box-sizing: content-box !important;
  box-sizing: content-box !important;
  pointer-events: none;
}

.frame input#pic1:checked ~ img.p1, .frame input#pic2:checked ~ img.p2, .frame input#pic3:checked ~ img.p3, .frame input#pic4:checked ~ img.p4, .frame input#pic5:checked ~ img.p5, .frame input#pic6:checked ~ img.p6, .frame input#pic7:checked ~ img.p7, .frame input#pic8:checked ~ img.p8, .frame input#pic9:checked ~ img.p9, .frame input#pic10:checked ~ img.p10, .frame input#pic11:checked ~ img.p11, .frame input#pic12:checked ~ img.p12, .frame input#pic13:checked ~ img.p13, .frame input#pic14:checked ~ img.p14, .frame input#pic15:checked ~ img.p15, .frame input#pic16:checked ~ img.p16, .frame input#pic17:checked ~ img.p17, .frame input#pic18:checked ~ img.p18, .frame input#pic19:checked ~ img.p19, .frame input#pic20:checked ~ img.p20 {
  opacity: 1;
  z-index: 100;
  backface-visibility: hidden;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  -ms-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

@media (max-width: 1199px) {
  #cross-title, #cross-row-1, #cross-row-2, #links {
    display: none;
  }
}

/* Extra small devices (portrait phones, less than 576px) */

@media (max-width: 575px) {
  .product-slider {
    width: 100%;
    float: none;
    height: auto;
    margin: 0 auto;
  }
}

@media (max-width: 575px) {
  .frame {
    float: none;
  }
}

@media (max-width: 575px) {
  .frame div {
    margin-top: 250px;
  }
}

@media (max-width: 575px) {
  .frame {
    height: auto;
  }
}

@media (max-width: 575px) {
  .frame img.large {
    height: 250px;
  }
}

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) and (max-width: 767px) {
  .product-slider {
    margin: 0 auto;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .product-thumb {
    margin: 0 auto 20px;
    width: 216px;
    height: 216px;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .product-slider {
    float: none;
  }
}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 991px) {
  .product-slider {
    margin: 0 auto;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .product-thumb {
    margin: 0 auto 20px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .product-slider {
    float: none;
  }
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1199px) {
  .product-thumb {
    width: 217px;
    height: 217px;
  }
}

@media (min-width: 992px) {
  .container, .container-lg, .container-md, .container-sm {
    max-width: 960px;
  }
}