/* @import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


body {
  font-family: 'Exo 2', sans-serif;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Exo 2', sans-serif;
}

p,
a,
span {
  font-family: 'Exo 2', sans-serif;
}


.searchTerm {
  height: 100%;
}


.buit {
  width: 1300px;
  margin: auto;
  margin-top: -1px;
  display: flex;
}

.buit .col-mm {
  width: 800px;
  float: left;
  color: #6c6c6c;
  padding-top: 10px;
}

.buit .col-mm a {
  color: #6c6c6c;
  font-size: 15px;
  margin-right: 15px;
  text-decoration: none;
}

.buit .col-mm a.active {
  color: #000;
}

.buit .col-mm a.prod {
  margin-left: 15px;
}

.buit .col-mc {
  width: 500px;
  float: left;
}

.buit .col-mc button {
  font-size: 20px;
  color: #fff;
  background: var(--bg-color);
  border: 0px;
  padding: 10px 25px;
  float: right;
}


.cl-main {
  width: 1300px;
  margin: auto;
  padding-bottom: 30px;

  display: flex;
}

.cl-main .col-mm {
  width: 700px;
  float: left;
  display: block;
  padding-right: 15px;
}


.cl-main .col-sm {
  width: 480px;
  float: left;
  padding-left: 15px;
}

.cl-main .col-sm .video {
  margin-top: 10%;
}

.cl-main .col-sm .video iframe {
  width: 100%;
  height: 350px;
}



/*SLIDER */

.cl-main .col-mm .project-page-main {
  margin-left: 70px;
}

.cl-main .col-mm .im-bo {
  overflow: hidden;
}

.slick-slider .slick-prev,
.slick-slider .slick-next {
  z-index: 100;
  font-size: 2.5em;
  height: 40px;
  width: 40px;
  margin-top: -20px;
  color: #B7B7B7;
  position: absolute;
  top: 50%;
  text-align: center;
  color: #000;
  opacity: 1;
  transition: opacity .25s;
  cursor: pointer;
}

.slick-slider .slick-prev:hover,
.slick-slider .slick-next:hover {
  opacity: .65;
}

.slick-slider .slick-prev {
  left: 0;
}

.slick-slider .slick-next {
  right: 0;
}

#detail .product-images {
  width: 100%;
  margin: 0 auto;
  border: 0px solid #eee;
}

#detail .product-images li,
#detail .product-images figure,
#detail .product-images a,
#detail .product-images img {
  display: block;
  outline: none;
  border: none;
  /*object-fit: contain;
    min-height: 400px;
    max-height: 400px*/
}

.access-prodct {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between;
}

.cl-main .col-mm a.no-ll {
  cursor: pointer;
  display: block;
  padding: 15px 10px 15px 20px;
  font-size: 15px;
  border-bottom: 0px solid #ccc;
  color: #212121;
  position: relative;
  transition: all 0.4s ease-out;

}

.cl-main.pb {
  padding-bottom: 0;
}

.decoration {
  text-decoration: none;
}

.text-white {
  color: #fff;
}

.text-center {
  text-align: center;
}

.pro-zoom-area {
  display: inline-block;
  line-height: 0;
}

.abt-page {
  margin: 1em 0;
}


#detail .product-images .main-img-slider figure {
  margin: 0 auto;
  padding: 0 2em;
}

#detail .product-images .main-img-slider figure a {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

#detail .product-images .main-img-slider figure a img {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

#detail .product-images .thumb-nav {
  margin: 0 auto;
  padding: 20px 10px;
  max-width: 600px;
}

#detail .product-images .thumb-nav.slick-slider .slick-prev,
#detail .product-images .thumb-nav.slick-slider .slick-next {
  font-size: .5em;
  height: 40px;
  width: 25px;
  margin-top: -26px;
  background: var(--bg-color);
  padding-top: 15px;
  color: #fff;

}

#detail .product-images .thumb-nav.slick-slider .slick-prev {
  margin-left: -40px;
}

#detail .product-images .thumb-nav.slick-slider .slick-next {
  margin-right: -40px;
}

.cl-main .col-mm .container {
  padding-left: 0px;
}

.main-img-slider .slick-prev {
  display: none !important
}

.main-img-slider .slick-next {
  display: none !important
}


#detail .product-images .thumb-nav li {
  display: block;
  margin: 0 auto;
  cursor: pointer;
  min-height: 100%;
  max-height: 100%
}

#detail .product-images .thumb-nav li img {
  display: block;
  width: 100%;
  max-width: 120px;
  margin: 0 auto;
  border: 2px solid transparent;
  -webkit-transition: border-color .25s;
  -ms-transition: border-color .25s;
  -moz-transition: border-color .25s;
  transition: border-color .25s;
  min-height: 90px;
  max-height: 90px;
}

#detail .product-images .thumb-nav li iframe {
  margin: auto;
  display: block;
  border: 2px solid transparent;
  -webkit-transition: border-color .25s;
  -ms-transition: border-color .25s;
  -moz-transition: border-color .25s;
  transition: border-color .25s;
}

#detail .product-images .thumb-nav li:hover,
#detail .product-images .thumb-nav li:focus {
  border-color: #999;
}

#detail .product-images .thumb-nav li.slick-current img {
  border-color: #d12f81;
}

#detail .product-images .thumb-nav li.slick-current iframe {
  border-color: #d12f81;
}


.main-img-slider {
  border: 1px solid #eee;
}

.main-img-slider img {
  width: 100%
}



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

.video-area {
  width: 100%;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 30px;
  background: #ededed;
  height: 180px;
}

.v-but {
  text-decoration: none;
  color: #333;
}

.video-box {
  width: 100%;
  max-width: 200px;
  display: flex;
  align-items: center;
}

.video-box img {
  width: 100%;
  max-width: 320px;
  /* border: 1px solid #ccc; */
  position: relative;
  /* min-width: 350px; */
  height: 180px;
  object-fit: cover;
  display: block !important;
}

.hero-video {
  position: relative;
}

#spinnerbtn {
  position: absolute;
  z-index: 999;
  top: -75px;
  left: -10px;
  background: red;
  color: #fff;
  width: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
}

.detailss {
  position: absolute;
  right: 30px;
  width: 40%;
}

.detailss h2 {
  font-size: 26px !important;
  padding-bottom: 10px;
}

/* .pulse1 i 
{
  color: red;
} */

.product-gallery .product-gallu {
  width: 50%;
  border: 1px solid #cccccc47;
}

.product-gallery .product-gallu img {
  width: 100%;
  height: 350px;
  object-fit: contain;
}

.product-gallery .product-gallu a {
  /* cursor: cell; */
  cursor: url(../../img/brands/cursr.png), auto;
}

.fancybox-image,
.fancybox-spaceball {
  cursor: url(../../img/brands/cursr.png), auto;
}

/* .product-gallery .product-gallu span
 {
  cursor: url(https://www.ikea.com/in/en/products/resources/images/expand-black-circle.png), auto;
} */













.cl-main .col-sm h2 {
  font-size: 36px;
  margin-top: 0px;
  font-weight: 600;
  font-family: 'Exo 2', sans-serif;
}

.cl-main .col-sm h4 {
  font-size: 24px;
  margin-top: 10px;
  font-weight: 400;
  color: var(--bg-color);
  margin-bottom: 0px;
  font-family: 'Exo 2', sans-serif;
}

.cl-main .col-sm p.suib {
  font-size: 16px;
  margin-top: 0px;
  font-weight: 400;
  color: var(--bg-color);
}

.cl-main .col-sm h3 {
  font-size: 28px;
  margin-top: 10px;
  font-weight: 600;
  color: #000;
  margin-bottom: 0px;
  font-family: 'Exo 2', sans-serif;
  padding: 15px 0 16px 0px;
}

.cl-main .col-sm p.discription {
  font-size: 16px;
  margin-top: 0px;
  font-weight: 400;
  color: #000;
  line-height: 24px;
}

.cl-main .col-sm p {
  font-size: 16px;
  margin-top: 0px;
  font-weight: 400;
  color: #000 !important;
  margin: 20px;
  line-height: 28px;
}

.cl-main .col-sm p.discr {
  margin-top: 30px;
}

.cl-main .col-sm button {
  background: var(--bg-color);
  margin-top: 40px;
  padding: 13px 0;
  border: 0px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  width: 100%;
  font-family: 'Exo 2', sans-serif !important;
}


.access-req button {
  background: var(--bg-color);
  margin-top: 40px;
  padding: 13px 0;
  border: 0px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  width: 80%;
  font-family: 'Exo 2', sans-serif !important;
  cursor: pointer;
}



.cl-main .col-sm .boccc {
  border-top: 1px solid #ccc;
  padding-top: 40px;
  margin-top: 20px;
  padding-bottom: 40px;
  font-weight: 500;
}

.cl-main .col-sm .boccc a {
  background: var(--bg-color);
  margin-right: 20px;
  padding: 11px 20px 11px 15px;
  border: 0px;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  margin-top: 0px;
  font-size: 15px;
  width: 100%;
  margin-bottom: 20px;
  text-align: left;
  display: block;
}

.cl-main .col-sm .boccc a i {
  float: right;
  font-size: 20px;
}





.cl-main .col-mm h2 {
  font-size: 36px;
  margin-top: 0px;
  font-weight: 600;
  font-family: 'Exo 2', sans-serif;
}

.cl-main .col-mm h4 {
  font-size: 28px;
  margin-top: 0px;
  font-weight: 400;
  color: var(--bg-color);
  margin-bottom: 0px;
  font-family: 'Exo 2', sans-serif;
}

.cl-main .col-sm p.suib {
  font-size: 16px;
  margin-top: 0px;
  font-weight: 400;
  color: var(--bg-color);
}

.cl-main .col-mm h3 {
  font-size: 28px;
  margin-top: 0px;
  font-weight: 600;
  color: #000;
  margin-bottom: 0px;
  font-family: 'Exo 2', sans-serif;
}

.cl-main .col-mm p.discription {
  font-size: 16px;
  margin-top: 0px;
  font-weight: 400;
  color: #000;
}

/*    .cl-main .col-mm p{font-size: 16px; margin-top:0px; margin-left:2em; font-weight: 400; color:#000;}*/
.cl-main .col-mm p {
  font-size: 16px;
  margin-top: 0px;
  font-weight: 400;
  color: #000 !important;
  padding-left: 40px;
}

.cl-main .col-mm p.discr {
  margin-top: 30px;
}

.cl-main .col-mm button {
  background: var(--bg-color);
  margin-top: 0px;
  padding: 15px;
  border: 0px;
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  width: 100%;
}

.cl-main .col-mm .boccc {
  border-top: 0px solid #ccc;
  padding-top: 0px;
  margin-top: 20px;
  padding-bottom: 40px;
  font-weight: 500;
  border-bottom: 0px solid #ccc;
  text-align: center;
}

.cl-main .col-mm .boccc button {
  background: var(--bg-color);
  margin-right: 20px;
  padding: 10px;
  border: 0px;
  color: #fff;
  font-weight: 500;
  margin-top: 0px;
  font-size: 15px;
  width: 30%;
}






/* product-accessories */
.product-accessories {
  width: 1300px;
  margin: auto;
  padding-bottom: 30px;
  padding-top: 0px;
  display: flex;
}

.product-accessories .col-mm {
  width: 700px;
  float: left;
  display: block;
  padding-right: 15px;
  position: relative;
}

.product-accessories .col-sm {
  width: 500px;
  float: left;
  padding-left: 15px;
}

.product-accessories .col-mm .year {
  width: 200px;
  position: absolute;
  right: -1%;
  top: -5%;
}

.product-accessories .col-mm .year img {
  width: 100%;
}

.product-accessories .col-mm .product-box {
  background: #ededed;
  padding: 50px;
  padding-top: 70px;
}

.product-accessories .col-mm .product-box h3 {
  font-size: 36px;
  margin-top: 0px;
  font-weight: 700;
  color: var(--bg-color);
  font-family: 'Exo 2', sans-serif;
}

.product-accessories .col-mm .product-box table {
  width: 100%;
  margin-top: 5px;
}

.product-accessories .col-mm .product-box table tr {
  border-bottom: 1px solid #b0b0b0;
  padding-bottom: 20px;
  margin-bottom: 20px;
  display: flex;
}

.product-accessories .col-mm .product-box table td {
  width: 60%;
  font-size: 16px;
}



.product-accessories .col-sm {}

.product-accessories .col-sm h4 {
  font-size: 30px;
  margin-top: 0px;
  font-weight: 400;
  font-family: 'Exo 2', sans-serif;
  margin-bottom: 20px;
}

.product-accessories .col-sm .acc-box {
  border: 1px solid #b0b0b0;
  padding: 15px 10px;
  display: flex;
}

.product-accessories .col-sm .acc-box .im-acc {
  width: 130px;
  float: left;
  margin-right: 10px;
}

.product-accessories .col-sm .acc-box .im-acc img {
  width: 100%;
}

.product-accessories .col-sm .acc-box .text-acc {
  width: 360px;
  float: left;
}

.product-accessories .col-sm .acc-box .text-acc h4 {
  font-size: 18px;
  color: #000;
  font-weight: 500;
  margin-top: 10px;
  margin-bottom: 10px;
}

.product-accessories .col-sm .acc-box .text-acc p {
  font-size: 14px;
  color: #000;
  font-weight: 400;
}

.product-accessories .col-sm .acc-box .text-acc button {
  background: var(--bg-color);
  padding: 8px 50px;
  color: #fff;
  border: 0px;
  font-size: 13px;
  margin-top: 13px;
  font-family: 'Exo 2', sans-serif !important;
  cursor: pointer;
}



/*alternative*/
.alternative {
  width: 1300px;
  margin: auto;
  padding-bottom: 50px;
  padding-top: 20px;
}

.alternative h3 {
  font-size: 30px;
  margin-top: 0px;
  font-weight: 400;
  font-family: 'Exo 2', sans-serif;
  margin-bottom: 20px;
}

.alternative a {
  text-decoration: none !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --grid-column-gap: 20px;
}

.carouselPre {
  grid-auto-flow: column;
  display: grid;
  grid-auto-columns: calc((100% - 3 * var(--grid-column-gap))/ 4);
  grid-column-gap: var(--grid-column-gap);
  scroll-snap-type: x mandatory;
  overflow-x: hidden;
  overflow-y: hidden;
  list-style: none;
  scroll-behavior: smooth;

}

#title {
  margin: 10px 10px 10px 0;
  font-size: 34px;
  font-weight: 600;
}

.topT {
  border-top: 1px solid rgb(212, 212, 212);
  padding: 10px 0;
  font-weight: 600;
  font-size: 20px;
}

.itemsC .textDet {
  /* position: absolute;
    bottom: 0;
    height: 60px;
    width: 100%;
    display: flex;*/
}

.contents {
  color: white;
  width: 80%;
  margin: auto;
  text-align: center;
}

.itemsC .contents button {
  background: var(--bg-color);
  cursor: pointer;
  width: 90%;
  padding: 10px;
  font-weight: 500;
  border: 0px;
  margin-top: 5px;
  color: #fff;
}


.itemsC .contents p {
  margin: 0px;
  font-size: 14px;
  margin-bottom: 5px;
  color: #000
}

.leftTxtDet {
  font-size: 15px;
  font-weight: 600;
  color: var(--bg-color);
  text-transform: uppercase;
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: 'Exo 2', sans-serif;

}

.itemsC {
  position: relative;
}

.scrolly {
  overflow: hidden;
}

.carouselPre li {
  scroll-snap-align: start;
  width: 100%;
  height: 100%;
  border: 1px solid #f1f1f1;
  list-style: none;
  border-radius: 20px;
  overflow: hidden;
  padding-bottom: 40px;
  border-radius: 0px;
}

.carouselPre li .bgImg {
  width: 100%;
}

.carouselPre li img {
  width: 100%;
  height: 230px;
  object-fit: contain;
}

.scrolly {
  position: relative;
}

#left,
#right {
  background-color: rgb(40 102 169 / 90%);
  outline: none;
  border: transparent;
  border-radius: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 3rem;
  position: absolute;
  top: 50%;
  transform: translate(0, -60%);
  cursor: pointer;
  z-index: 2;

}


.scrolly button i {
  color: #fff
}







#left {
  left: 0;
}

#right {
  right: 0;
}

@media only screen and (max-width: 890px) {
  .carouselPre {
    grid-auto-columns: calc((100% - 2 * var(--grid-column-gap))/ 3);
    height: 23rem;
  }
}

@media only screen and (max-width: 660px) {
  .carouselPre {
    grid-auto-columns: calc((100% - 1 * var(--grid-column-gap))/ 2);
    height: 25rem;
  }
}

@media only screen and (max-width: 440px) {
  .carouselPre {
    grid-auto-columns: 100%;
    height: 25rem;
  }
}


::-webkit-scrollbar {
  width: 15px;
  height: 15px;
  border-left: #ededed solid 1px;
  background-color: #fcfcfc;
  border-top: #ededed solid 1px;
}

::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  background: #c7c7c7;
  width: 15px;
  background-clip: content-box;
  border: 4px solid transparent;
  border-radius: 10px;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-thumb {
  background: #dbdbdb;
  background-clip: content-box;
  border: 4px solid transparent;
  border-radius: 10px;

}






.metal {
  margin: auto;
  background: #F8F8F8;
  padding-top: 50px;
  padding-bottom: 50px
}

.metal .manu-main {
  width: 1280px;
  margin: auto;
  display: block;
}

.metal .manu-main h3 {
  font-size: 1.7rem;
  font-weight: 600;
  color: #000000;
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: 'Exo 2', sans-serif;
}

.metal .manu-main p {
  font-size: 16px;
  line-height: 1.8;
  width: 100%
}





/* developed by - aA-Abdul anas {abdulanaspnweb@gmail.com}*/

/*Rasponsive Code*/
/*1920*/
@media only screen and (min-width : 1920px) and (max-width : 2560px) {
  .buit .col-mc button {
    margin-top: -2px;
    font-family: 'Exo 2', sans-serif;
  }
}

/*1600*/
@media only screen and (min-width : 1600px) and (max-width : 1919px) {
  .buit .col-mc button {
    margin-top: -2px;
    font-family: 'Exo 2', sans-serif;
  }
}

/*1500*/
@media only screen and (min-width : 1500px) and (max-width : 1599px) {
  .buit .col-mc button {
    margin-top: -2px;
    font-family: 'Exo 2', sans-serif;
  }
}

/*1440*/
@media only screen and (min-width : 1440px) and (max-width : 1500px) {
  .buit .col-mc button {
    margin-top: -2px;
    font-family: 'Exo 2', sans-serif;
  }


}

/*1440*/
@media only screen and (max-width : 1440px) {}

/*1366*/
@media only screen and (min-width : 1366px) and (max-width : 1439px) {

  .buit {
    width: 1150px;
  }

  .buit .col-mm {
    width: 50%;
  }

  .buit .col-mc {
    width: 50%;
  }

  .buit .col-mc button {
    margin-top: -2px;
  }

  .cl-main {
    width: 1150px;
  }

  .cl-main .col-sm {
    width: 450px;
  }

  .cl-main .col-sm .futer .slider .item {
    width: 185px;
    padding: 5px;
    padding-bottom: 30px;
  }

  .slider-container {
    height: 244px;
  }

  .cl-main .col-sm .scan-ban .cap-tex {
    padding-left: 35px;
    bottom: 14%;
  }

  .manu-main {
    width: 1150px;
  }

  .manu-main-0sct {
    width: 1150px;
  }

  .manu-main-0sct .col-md-0s .overlay {
    height: 401px;
  }

  .manu-main-0sct .col-md-0s img.jgyear {
    bottom: 46%;
  }

  .manu-main-0sct .col-md-0s .bo0x h4 {
    font-size: 1.5rem;
  }

  .metal .manu-main {
    width: 1150px
  }

  .alternative {
    width: 1150px;
  }

  .product-accessories {
    width: 1150px;
  }

  .product-accessories .col-mm .year {
    width: 160px;
  }




  .cl-main .col-sm .video iframe {
    height: 250px;
  }

  .cl-main .col-sm h2 {
    font-size: 28px;
  }

  .cl-main .col-sm h4 {
    font-size: 20px;
  }

  .cl-main .col-sm p.suib {
    font-size: 14px;
  }

  .cl-main .col-sm h3 {
    font-size: 24px;
  }

  .cl-main .col-sm p.discription {
    font-size: 15px;
  }








}

/*1280*/
@media only screen and (min-width : 1280px) and (max-width : 1365px) {
  .buit {
    width: 1150px;
  }

  .buit .col-mm {
    width: 50%;
  }

  .buit .col-mc {
    width: 50%;
  }

  .buit .col-mc button {
    margin-top: -2px;
  }

  .cl-main {
    width: 1150px;
  }

  .cl-main .col-sm {
    width: 890px;
  }

  .cl-main .col-sm .futer .slider .item {
    width: 185px;
    padding: 5px;
    padding-bottom: 30px;
  }

  .slider-container {
    height: 244px;
  }

  .cl-main .col-sm .scan-ban .cap-tex {
    padding-left: 35px;
    bottom: 14%;
  }

  .manu-main {
    width: 1150px;
  }

  .manu-main-0sct {
    width: 1150px;
  }

  .manu-main-0sct .col-md-0s .overlay {
    height: 401px;
  }

  .manu-main-0sct .col-md-0s img.jgyear {
    bottom: 46%;
  }

  .manu-main-0sct .col-md-0s .bo0x h4 {
    font-size: 1.5rem;
  }

  .metal .manu-main {
    width: 1150px
  }

  .alternative {
    width: 1150px;
  }

  .product-accessories {
    width: 1150px;
  }

  .product-accessories .col-mm .year {
    width: 160px;
  }



  .cl-main .col-sm .video iframe {
    height: 245px;
  }

  .cl-main .col-sm h2 {
    font-size: 26px;
  }

  .cl-main .col-sm h4 {
    font-size: 20px;
  }

  .cl-main .col-sm p.suib {
    font-size: 14px;
  }

  .cl-main .col-sm h3 {
    font-size: 24px;
  }

  .cl-main .col-sm p.discription {
    font-size: 15px;
  }




}

/*1200*/
@media only screen and (min-width : 1200px) and (max-width : 1279px) {

  .buit {
    width: 1150px;
  }

  .buit .col-mm {
    width: 50%;
  }

  .buit .col-mc {
    width: 50%;
  }

  .buit .col-mc button {
    margin-top: -1px;
  }

  .cl-main {
    width: 1150px;
  }

  .alternative {
    width: 1150px;
  }

  .product-accessories {
    width: 1150px;
  }

  .product-accessories .col-mm .year {
    width: 160px;
  }


  .cl-main .col-sm {
    width: 500px;
  }

  .cl-main .col-sm .futer .slider .item {
    width: 185px;
    padding: 5px;
    padding-bottom: 30px;
  }

  .slider-container {
    height: 244px;
  }

  .cl-main .col-sm .scan-ban .cap-tex {
    padding-left: 35px;
    bottom: 14%;
  }

  .manu-main {
    width: 1150px;
  }

  .manu-main-0sct {
    width: 1150px;
  }

  .manu-main-0sct .col-md-0s .overlay {
    height: 401px;
  }

  .manu-main-0sct .col-md-0s img.jgyear {
    bottom: 46%;
  }

  .manu-main-0sct .col-md-0s .bo0x h4 {
    font-size: 1.5rem;
  }

  .metal .manu-main {
    width: 1150px
  }


  .cl-main .col-sm .video iframe {
    height: 241px;
  }

  .cl-main .col-sm h2 {
    font-size: 26px;
  }

  .cl-main .col-sm h4 {
    font-size: 20px;
  }

  .cl-main .col-sm p.suib {
    font-size: 14px;
  }

  .cl-main .col-sm h3 {
    font-size: 24px;
  }

  .cl-main .col-sm p.discription {
    font-size: 15px;
  }





}

/*1024*/
@media only screen and (min-width : 1024px) and (max-width : 1199px) {

  .buit {
    width: 950px;
  }

  .buit .col-mm {
    width: 65%;
  }

  .buit .col-mc {
    width: 45%;
    float: right;
  }

  .buit .col-mc button {
    font-size: 16px;
    margin-top: -1px;
  }

  .cl-main {
    width: 950px;
  }

  .cl-main .col-mm {
    width: 555px;
  }

  .cl-main .col-sm {
    width: 395px;
  }

  .cl-main .col-sm .futer .slider .item {
    width: 302px;
    padding: 5px;
    padding-bottom: 30px;
  }

  .slider-container {
    height: 244px;
  }

  .cl-main .col-sm .scan-ban .cap-tex {
    padding-left: 35px;
    bottom: 14%;
  }

  .manu-main {
    width: 950px;
  }

  .manu-main-0sct {
    width: 950px;
  }

  .manu-main-0sct .col-md-0s .overlay {
    height: 401px;
  }

  .manu-main-0sct .col-md-0s img.jgyear {
    bottom: 46%;
  }

  .manu-main-0sct .col-md-0s .bo0x h4 {
    font-size: 1.5rem;
  }

  .metal .manu-main {
    width: 950px
  }

  .cl-main .col-sm .scan-ban img.ban {
    height: 100%;
  }

  .cl-main .col-sm .scan-ban .cap-tex h2 {
    font-size: 2rem;
  }

  .cl-main .col-sm .scan-ban .cap-tex p {
    font-size: 13px;
  }

  .cl-main .col-sm .futer .recomm {
    display: inline-block;
  }

  .cl-main .col-sm .futer .recomm .item {
    width: 44%;
    margin-bottom: 10px;
    float: left;
  }


  .product-accessories {
    width: 950px;
  }

  .product-accessories .col-mm .year {
    width: 120px;
  }

  .alternative {
    width: 950px;
  }



  .cl-main .col-sm .video iframe {
    height: 210px;
  }

  .cl-main .col-sm h2 {
    font-size: 24px;
  }

  .cl-main .col-sm h4 {
    font-size: 20px;
  }

  .cl-main .col-sm p.suib {
    font-size: 14px;
  }

  .cl-main .col-sm h3 {
    font-size: 22px;
  }

  .cl-main .col-sm p.discription {
    font-size: 14px;
  }
}

/*tab*/
@media only screen and (min-width : 768px) and (max-width :1023px) {

  .access-prodct {
    width: 100% !important;
    display: inline-block !important;
  }

  .buit {
    width: 85%;
    display: flex;
  }

  .buit .col-mm {
    width: 70%;
  }

  .buit .col-mc {
    width: 30%;
  }

  .buit .col-mc button {
    font-size: 16px;
  }

  .cl-main {
    width: 85%;
    display: block;
  }

  .cl-main .col-sm {
    width: 100%;
    padding-left: 0px;
  }

  .cl-main .col-sm .futer .slider .item {
    width: 207px;
    padding: 5px;
    padding-bottom: 30px;
  }

  .slider-container {
    height: 244px;
  }

  .cl-main .col-sm .scan-ban .cap-tex {
    padding-left: 35px;
    bottom: 14%;
  }

  .manu-main {
    width: 85%;
    display: block;
  }

  .manu-main-0sct {
    width: 85%;
    display: block;
  }

  .manu-main-0sct .col-md-0s {
    width: 100%;
    margin: 0px;
    margin-top: 30px;
  }

  .manu-main-0sct .col-md-0s .overlay {
    height: 401px;
  }

  .manu-main-0sct .col-md-0s img.jgyear {
    bottom: 39%;
    width: 40%;
  }

  .manu-main-0sct .col-md-0s .bo0x h4 {
    font-size: 1.5rem;
  }

  .metal .manu-main {
    width: 85%;
  }

  .cl-main .col-sm .scan-ban img.ban {
    height: 100%;
  }

  .cl-main .col-sm .scan-ban .cap-tex h2 {
    font-size: 2rem;
  }

  .cl-main .col-sm .scan-ban .cap-tex p {
    font-size: 13px;
  }

  .cl-main .col-sm .futer .recomm {
    display: inline-block;
  }

  .cl-main .col-sm .futer .recomm .item {
    width: 48%;
    margin-bottom: 10px;
    float: left;
  }


  .cl-main .col-mm {
    width: 100%;
    padding-right: 0px;
  }

  .manu .manu-main .m-box {
    width: 87%;
    padding: 45px;
    padding-top: 30px;
  }

  .manu .manu-main .m-box button {
    padding: 15px 30px;
  }

  .manu {
    display: flow-root;
  }

  .manu .manu-main .m-img {
    width: 100%;
    float: left;
  }

  .metal .manu-main-new {
    width: 100%;
    display: inline-block;
  }

  .metal .manu-main-new .fir-bo {
    width: 100%;
    float: left;
    margin-bottom: 20px;
  }

  .metal .manu-main-new .sec-bo {
    width: 100%;
    float: left;
    margin-left: 0px;
    margin-bottom: 30px;
  }

  .metal {
    background: transparent;
    padding-top: 0px;
  }

  .metal .manu-main-new .fir-bo .text {
    width: 70%;
    left: 8%;
  }

  .metal .manu-main-new .sec-bo .text_img.hig {
    padding-left: 50px;
  }




  .product-accessories {
    width: 85%;
    display: flow-root;
  }

  .product-accessories .col-mm {
    width: 100%;
    padding-right: 0px;
  }

  .product-accessories .col-sm {
    width: 100%;
    padding-left: 0px;
    margin-top: 20px;
  }

  .product-accessories .col-sm .acc-box {
    margin-bottom: 10px;
  }

  .product-accessories .col-mm .year {
    width: 180px;
    right: -3%;
    top: -2%;
  }

  .alternative {
    width: 85%;
    display: flow-root;
  }

  .carouselPre {
    height: 18rem;
    grid-auto-columns: calc((100% - 3 * var(--grid-column-gap))/ 2);
  }



}



/*mobile*/
@media only screen and (min-width : 150px) and (max-width : 767px) {

  .access-prodct {
    width: 100% !important;
    display: inline-block !important;
  }

  .video-box img {
    width: 330px;
    border: 1px solid #ccc;
    position: relative;
    min-width: 350px;

  }
  .video-box .detailss h2 {
 color: #fff;

  }

  .detailss {
    position: absolute;
    right: 20px;
    text-align: center;
    width: 90%;
  }

  .product-gallery .product-gallu {
    width: 50%;
  }

  .product-gallery .product-gallu img {
    height: 140px;
  }

  .wrap {
    width: 100%;
    /* transform: translate(0%, 16%); */
    margin-top: 17px;
  }

  .searchTerm {
    height: 33px;
  }

  .cl-main .col-sm h2 {
    font-size: 25px;
  }

  .cl-main .col-sm h4 {
    font-size: 18px;
  }

  .cl-main .col-sm h3 {
    font-size: 22px;
  }


  .buit {
    width: 88%;
    display: flow-root;
  }

  .buit .col-mm {
    width: 100%;
  }

  .buit .col-mc {
    width: 100%;
    margin-top: 12px;
  }

  .buit .col-mc button {
    font-size: 16px;
    width: 100%;
    display: none;
  }

  .cl-main {
    width: 85%;
    display: block;
  }

  .cl-main .col-sm {
    width: 100%;
    padding-left: 0px;
  }

  .cl-main .col-sm .futer .slider .item {
    width: 207px;
    padding: 5px;
    padding-bottom: 30px;
  }

  .slider-container {
    height: 244px;
  }

  .cl-main .col-sm .scan-ban .cap-tex {
    padding-left: 35px;
    bottom: 14%;
  }

  .manu-main {
    width: 85%;
    display: block;
  }

  .manu-main-0sct {
    width: 85%;
    display: block;
  }

  .manu-main-0sct .col-md-0s {
    width: 100%;
    margin: 0px;
    margin-top: 30px;
  }

  .manu-main-0sct .col-md-0s .overlay {
    height: 401px;
  }

  .manu-main-0sct .col-md-0s img.jgyear {
    bottom: 39%;
    width: 40%;
  }

  .manu-main-0sct .col-md-0s .bo0x h4 {
    font-size: 1.5rem;
  }

  .metal .manu-main {
    width: 85%;
  }

  .cl-main .col-sm .scan-ban img.ban {
    height: 100%;
  }

  .cl-main .col-sm .scan-ban .cap-tex h2 {
    font-size: 2rem;
  }

  .cl-main .col-sm .scan-ban .cap-tex p {
    font-size: 13px;
  }

  .cl-main .col-sm .futer .recomm {
    display: inline-block;
  }

  .cl-main .col-sm .futer .recomm .item {
    width: 48%;
    margin-bottom: 10px;
    float: left;
  }


  .cl-main .col-mm {
    width: 100%;
    padding-right: 0px;
  }

  .manu .manu-main .m-box {
    width: 87%;
    padding: 45px;
    padding-top: 30px;
  }

  .manu .manu-main .m-box button {
    padding: 15px 30px;
  }

  .manu {
    display: flow-root;
  }

  .manu .manu-main .m-img {
    width: 100%;
    float: left;
  }

  .metal .manu-main-new {
    width: 100%;
    display: inline-block;
  }

  .metal .manu-main-new .fir-bo {
    width: 100%;
    float: left;
    margin-bottom: 20px;
  }

  .metal .manu-main-new .sec-bo {
    width: 100%;
    float: left;
    margin-left: 0px;
    margin-bottom: 30px;
  }

  .metal {
    background: transparent;
    padding-top: 0px;
  }

  .metal .manu-main-new .fir-bo .text {
    width: 70%;
    left: 8%;
  }

  .metal .manu-main-new .sec-bo .text_img.hig {
    padding-left: 50px;
  }




  .product-accessories {
    width: 85%;
    display: flow-root;
  }

  .product-accessories .col-mm {
    width: 100%;
    padding-right: 0px;
  }

  .product-accessories .col-sm {
    width: 100%;
    padding-left: 0px;
    margin-top: 20px;
  }

  .product-accessories .col-sm .acc-box {
    margin-bottom: 10px;
  }

  .product-accessories .col-mm .year {
    right: 0%;
    width: 100%;
    top: 0%;
    position: relative;
  }

  .product-accessories .col-mm .year img {
    width: 60%;
    margin: auto;
    display: block;
  }

  .product-accessories .col-mm .product-box {
    padding: 30px;
    padding-top: 30px;
    margin-top: 20px;
  }

  .product-accessories .col-mm .product-box h3 {
    margin-bottom: 15px;
    font-size: 20px;
  }

  .product-accessories .col-mm .product-box table td {
    border-left: 1px solid #b0b0b0;
    padding-left: 10px;
  }

  .product-accessories .col-mm .product-box table td.mob-bor {
    border-left: 0px solid #b0b0b0;
    padding-left: 0px;
    padding-right: 10px;
  }

  .alternative {
    width: 85%;
    display: flow-root;
  }

  .carouselPre {
    height: 25rem;
  }


  #detail .product-images .thumb-nav li img {
    min-height: 70px;
    max-height: 70px;
  }

  #detail .product-images .thumb-nav {
    max-width: 78%;
  }

  .cl-main .col-mm button {
    margin-top: 0px;
    font-size: 16px;
  }

  .cl-main .col-mm .boccc button {
    font-size: 13px;
    width: 35%;
  }


}

@media only screen and (max-width: 690px) {}

@media only screen and (max-width: 450px) {}

@media only screen and (max-width : 376px) {

  .buit .col-mm a.prod {
    margin-left: 3px;
  }

  .buit .col-mm a {
    margin-right: 1px;
  }

  #detail .product-images .thumb-nav li img {
    min-height: 45px;
    max-height: 45px;
  }


}

@media only screen and (max-width : 320px) {

  .carouselPre {
    height: 21rem;
  }

  .buit .col-mm a.prod {
    margin-left: 5px;
  }

  .buit .col-mm a {
    margin-right: 5px;
    font-size: 13px;
  }


}




.LookForThisCoolWebsite {
  font-size: 2em;
  text-align: center;
  background-color: #000;
}

.LookForThisCoolWebsite a {
  color: #FF0000;
}



/* <!-- first slider start-->  */

.slider {
  /* блок */
  background: rgba(240, 240, 240, .5);
  text-align: center;
}

/* резиновый iframe: чтобы видео занимало всё доступное пространство и пропорционально уменьшалось/увеличивалось при изменении экрана монитора */
.slider div {
  position: relative;
  padding-top: 56.25%;
}

.slider iframe {
  position: absolute;
  top: .5%;
  left: .5%;
  width: 99%;
  height: 99%;
}

/* стиль CSS для кнопок-переключателей (я немного побаловалась), который можно изменять или вовсе не использовать */
.slider a {
  /* вид кнопок */
  display: inline-block;
  padding: 0 .5em;
  text-decoration: none;
  color: blue;
}

.slider a:visited {
  /* вид кнопок просмотренных видео */
  color: rgb(204, 204, 203);
}

.slider a:hover {
  /* вид кнопок при наведении */
  transform: scale(1.5);
}

.slider a:not(:active):focus {
  /* блокировка второго клика, но не третьего */
  pointer-events: none;
}

.slider a::before {
  /* из-за Mozilla Firefox приходится использовать псевдоэлемент */
  content: "\25cf";
  position: absolute;
  color: rgba(0, 0, 1, .1);
  transition: color 0s 9999999s;
  /* нужен, чтобы запомнился цвет после нажатия кнопки, подробнее про transition */
}

.slider a:nth-of-type(1)::before {
  /* вид первой кнопки при загрузки страницы */
  color: rgb(0, 129, 0);
}

.slider span:active a::before {
  /* для неактивных кнопок псевдоэлемент не нужен */
  color: rgba(0, 0, 0, 0);
  transition: color 0s;
}

.slider span:active a:nth-of-type(1)::before {
  /* вид неактивной первой кнопки, чтобы она выглядела как посещённая */
  color: #ccc;
  transition: color 0s;
}

.slider span:active a:active::before {
  /* вид нажатой кнопки [в Internet Explorer отсутствует всплытие :active] */
  color: green;
  transition: color 0s;
}




/* <!-- second slider -->  */
.carousel {
  padding: .3em .3em 0;
  /* background: rgb(240,240,240); */
  text-align: center;
}

.carousel div {
  position: relative;
  margin-bottom: .3em;
  padding-top: 56.25%;
}

.carousel iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.carousel span {
  display: inline-block;
  word-spacing: 10px;
  /* расстояние между картинками */

  /* прокрутка миниатюр при необходимости */
  overflow: auto;
  white-space: nowrap;
  word-wrap: normal;

}

.carousel a {
  position: relative;
  display: inline-block;
  max-width: 120px;
  /* максимальная ширина миниатюр */
  width: 25%;
  /* ширина миниатюр */
  /* рамка вокруг миниатюр */
  opacity: 1;
  text-decoration: none;
}

.carousel a:visited,
.carousel a:nth-of-type(1) {
  border-color: #555;
  /* рамка вокруг миниатюр просмотренных видео */
}

.carousel a:hover {
  opacity: 1;
}

.carousel a:not(:active):focus {
  pointer-events: none;
}

.carousel a::before {
  content: "";
  position: absolute;
  top: 0em;
  right: 0em;
  bottom: 0em;
  left: 0em;
  background: rgba(0, 0, 1, .1);
  transition: background 0s 9999999s;
}

.carousel a:nth-of-type(1)::before {
  background: rgba(255, 255, 254, .7);
}

.carousel span:active a::before {
  background: rgba(0, 0, 0, 0);
  transition: background 0s;
}

.carousel span:active a:active::before {
  background: rgba(255, 255, 255, .7);
  transition: background 0s;
}

.carousel img {
  max-width: 100%;
  vertical-align: middle;
  /* убрать нижний отступ до рамки под картинкой */
}


/* <!-- third slider -->   */

.gallery {
  display: flex;
  flex-flow: wrap;
  border: solid rgb(240, 240, 240);
}

.gallery div {
  /* блоки видео + списков */
  flex: 150px;
  position: relative;
  text-align: center;
}

.gallery div:nth-of-type(1) {
  flex: 10000 1 300px;
  /* если ширина менее 300 + 150 = 450px , то списки миниатюр смещаются на нижний ряд, подробнее про свойство flex */
}

.gallery div::before {
  content: "";
  display: block;
  padding-top: 100px;
}

.gallery div:nth-of-type(1)::before {
  padding-top: 56.25%;
}

.gallery iframe,
.gallery span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.gallery a {
  /* для разнообразия, иконки не затемнены, так проще оценить код галереи видео */
  display: inline-block;
  margin-top: 5px;
}

.gallery a:last-child {
  margin-bottom: 5px;
}

.gallery iframe,
.gallery img {
  max-width: 100%;
  vertical-align: middle;
}

.video-img {
  width: 100%;
  height: 100%;
}

.carousel body img {
  width: 100% !important;
  height: 100%;
}

.card {
  position: relative;
}

.icon {
  position: absolute;
  top: 50%;
  transform: translate(-70%, -50%);
  left: 50%;
}

.icon i {
  background: #d94949;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  padding: 0 4px 0 0;
}


/* ========================= magnifi-popup-1  ============================= */

/* ========================= magnifi-popup-1  ============================= */