main{
  /* padding-top: 150px; */
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}
.fabricItemContainer {
  overflow-y: scroll;
  scrollbar-color: #938057 #ff000000;
}
::-webkit-scrollbar {
  height: 0.15vh; 
  background: #ff000000;
}
::-webkit-scrollbar-thumb {
  background: #938057; 
}

.categoryContainer{
  position: fixed;
  width: 40%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 100;
  top: 5vh;
}
.categoryContainer .categoryItem{
  text-align: center;
}
.categoryContainer .categoryItem a{
  color: white;
  opacity: 0.5;
  transition: 0.3s ease;
  padding: 10%;
  font-family: Optima;
  letter-spacing: 1px;
}
.categoryContainer .categoryItem a:hover{
  opacity: 1;
}
.categoryContainer .categoryItem.active a{
  opacity: 1 !important;
  color: #938057;
}


.backButtonWrapper{
  width: 80%;
  margin: 0 auto;
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translate(-50%, 0);
  top: 15vh;
}

.fabricSelection{
  overflow: hidden;
  margin-top: 25vh;
}
.fabricWrapper{
  position: relative;
  top: -20px;
  overflow: hidden;
  height: 50vh;
}
.wood{
  background-image: url("/res/wood.png");
  background-repeat: repeat-x;
  height: 20px;
}
.shadowSide{
  position: absolute;
  height: 100vh;
  top: 0;
  z-index: 1;
  width: 25%;
  pointer-events: none;
}
.shadowSide.right{
  top: 0;
  right: 0;
  transform: scaleX(-1);
}
.fabricItemContainer{
  overflow-y: hidden;
  white-space: nowrap;
  height: 100%;
  width: 100%;

  overflow-x: scroll;
  
  padding-bottom: 2rem;
  box-sizing: content-box;
  
  -webkit-overflow-scrolling: touch;
  
}
.fabricItem, .blank{
  display: inline-block;
  height: 100%;
  padding: 0 7.5px;
  position: relative;
  width: calc(50vh * 0.8);
  text-align: center;
}
.blank{
  margin-right: 0px;
}
/* .fabricItemContainer .fabricItem:nth-last-child(2){
  margin-right: 0px;
} */
.fabricItem:hover .overlay{
  background: rgba(0,0,0,0);
}
.fabricItem .overlay{
  height: 100%;
  width: calc(100% - 15px);
  background: rgba(0,0,0,0.3);
  position: absolute;
  z-index: 1;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}
.fabricItem img{
  height: 100%;
  max-width: 100%;
  transform: scale(1,1);
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
  vertical-align: unset;
}

.fabricItem .wrapper:hover img{
  cursor: pointer;
  transform: scale(1.1,1.1);
}




.NextPrevContainer{
  margin: 0 auto;
  position: absolute;
  bottom: 10vh;
  left: 50%;
  transform: translate(-50%, 0);
}













.fabricInsight{
  width: 70%;
  margin: 0 auto;
  position: relative;
  /* max-width: 960px; */
  height: 100vh;
  padding: 0;
}
.fabricInsight > .row{
  height: 100%;
  width: 100%;
  margin: 0 auto;
}
.fabricInsight img{
  width: 100%;
}
.fabricInsight .imagePreview{
  position: absolute;
  top: 55%;
  transform: translate(0%, -50%);
}
.fabricInsight .imageContainer{
  display: none;
  position: relative;
  overflow: hidden;
  height: 100%;
}
.fabricInsight .imageContainer.active{
  display: block;
}

.fabricInsight .imageContainer.detail img{
  max-height: 50vh;
  width: auto;
  display: block;
  margin: 0 auto;
}
.fabricInsight .imageContainer.detail .controller{
  text-align: center;
  margin-top: 3rem;
}
.fabricInsight .imageContainer.detail .controller div{
  display: inline-block;
}
.fabricInsight .imageContainer.detail .controller div img{
  width: 25px;
  position: relative;
}
.fabricInsight .imageContainer.detail .controller .text{
  padding: 0 10%;
  position: relative;
  top: -0.5rem;
}
/* .fabricInsight .imagePreview img.active{
  z-index: 1;
  transform: scale(1,1);
  opacity: 1;
  display: block;
} */

.fabricInsight .imageFullContainer{
  max-height: 60vh;
  overflow-y: scroll;
  padding-right: 2rem;
  box-sizing: content-box;
  width: 100%;
}
.fabricInsight .imageFullContainer img{
  width: 80%;
  display: block;
}
.imageFullMinimap{
  max-width: 5vw;
  position: absolute;
  right: 1px;
  top: 50px;
}
.imageFullMinimap img{
  width: 100%;
  opacity: 0.3;
}
.imageFullMinimap .highlight{
  position: absolute;
  height: 30%;
  overflow: hidden;
  outline: 2px solid #938057;
  z-index: 1;
}
.imageFullMinimap .highlight img{
  opacity: 1;
  position: relative;
}



.imageFullScrollDown{
  position: absolute;
  right: 1px;
  bottom: 50px;
  text-align: center;
}
.imageFullScrollDown div{
  font-size: 0.7rem;
}
.imageFullScrollDown img{
  width: 20px;
}

.fabricInsight .imageContainer.cut{
  text-align: center;
}
.fabricInsight .imageContainer.cut .row>div{
  padding: 5px;
}
.fabricInsight .imageContainer.cut .row>div>*{
  margin: 0.25rem 0;
}
.fabricInsight .imageContainer.cut .row>div>div{
  margin: 0.5rem 0;
  color: #938057;
  font-size: 0.8rem;
}
.fabricInsight .imageContainer.cut .row>.col-3{
  margin-top: 2.5rem;
}
.controllerCut{
  margin-top: 20px;
  text-align: center;
}
.controllerCut .sideItem{
  display: inline-block;
  width: 5rem;
  height: 3.5rem;
  margin: 0 1rem;
  position: relative;
  overflow: hidden;
}
.controllerCut .sideItem.active{
  border: 2px solid #938057;
}
.controllerCut .sideItem img{
  width: 100%;
  opacity: 0.5;
}
.controllerCut .sideItem.active img{
  opacity: 1;
}
.controllerCut .sideItem.active .overlay{
  opacity: 0;
}
.controllerCut .sideItem:hover .overlay{
  transform: scale(1.1, 1.1);
  cursor: pointer;
}
.controllerCut .sideItem .overlay{
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scale(1, 1);
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
  top: 0;
}
.controllerCut .sideItem .overlay span{
  font-size: 0.8rem;
  display: block;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translate(0, -50%);
}




.splashImage{
  background: rgba(0,0,0,1);
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 50;
}
.splashImage>img{
  height: 80%;
  width: auto !important;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.splashImage>div{
  padding: 5%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5,1.5);
}
.splashImage .cutImage img{
  margin: 0.25rem 0;
  width: 100%;
}
.splashImage .row>div{
  padding: 0 5px;
}
.splashImage .col-3{
  margin-top: 2.5rem;
}





.fabricThumbnailContainer .row{
  height: 100%;
}
.fabricThumbnailContainer{
  padding: 0;
}
.fabricThumbnailContainer .fabricThumbnail img{
  transform: scale(1,1);
  opacity: 0.8;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
  padding: 10px;
  border: 1px solid rgba(147, 128, 87, 0);
}
.fabricThumbnailContainer .fabricThumbnail.active img{
  width: 100%;
  border: 1px solid rgba(147, 128, 87, 1);
  opacity: 1;
}
.fabricThumbnailContainer .fabricThumbnail:hover img{
  transform: scale(1.1,1.1);
  opacity: 1;
}
.fabricThumbnailContainer .fabricThumbnail.active:hover img{
  transform: scale(1,1);
  opacity: 1;
}

.fabricInfo{
  position: absolute;
  padding-left: 7.5%;
  right: 0;
  top: 50%;
}
.fabricInfo .wrapperAll{
  position: absolute;
  top: 30%;
  transform: translate(0%, -50%);
}
.fabricInfo .wrapper{
  margin-top: 15%;
}
.fabricInfo .tabContainer .tabItem{
  text-align: center;
  padding: 0.5rem 0;
  opacity: 0.5;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
  letter-spacing: 1px;
}
.fabricInfo .tabContainer .tabItem:hover{
  opacity: 1;
  cursor: pointer;
}
.fabricInfo .tabContainer .tabItem.active{
  transition: 0s;
  opacity: 1;
  border-bottom: 2px solid #938057;
}
.fabricInfo h3{
  font-size: 1rem;
  color: #938057;
  letter-spacing: 1px;
}
.fabricInfo p{
  font-size: 1rem;
  letter-spacing: 1px;
}


.subInfo>div{
  display: none;
}
.subInfo>div.active{
  display: block;
}

.fabricInsight .imageContainer.cut .cutback{
  margin: 0.25rem auto !important;
  display: block;
  padding: 0 15%;
}


/* MOBILE BREAKDOWN*/
@media (min-width: 0px) and (max-width: 767px) and (orientation: portrait), (orientation: portrait) {
  /* .fabricItem{
    padding: 7%;
  }
  .fabricItem .wrapper{
    padding: 7%;
  } */

  .splashImage.detailfront>img, .splashImage.detailback>img{
    height: auto !important;
    width: 85% !important;
  }
  .splashImage>div{
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%) scale(1,1);
  }

  .categoryContainer{
    /* transform: none;
    left: unset; */
    width: 65%;
    top: 13vh;
    position: absolute;
    margin: 0;
  }

  .fabricSelection{
    margin-top: 30vh;
  }

  .fabricWrapper{
    height: auto;
  }
  .fabricItem{
    width: 60vw;
    height: auto;
  }
  .fabricItem .overlay{
    background: rgba(0,0,0,0);
  }
  .blank{
    width: 20vw;
  }
  .fabricItem img{
    height: auto;
  }

  .backButtonWrapper{
    top: 12vh;
  }


  main{
    height: auto;
    position: static;
  }

  .fabricInsight{
    width: 90%;
    padding-top: 18.5vh;
    -webkit-overflow-scrolling: touch;
    height: auto;
  }
  .fabricInsight > .row{
    height: auto;
  }
  .fabricThumbnailContainer .fabricThumbnail{
    padding: 3%;
  }
  .fabricInfo{
    position: relative;
    padding: 0 5% 3vh;
    top: 0;
    margin-top: 3vh;
  }
  .fabricInfo .wrapper{
    margin-top: 20px;
  }
  .fabricInsight .imagePreview{
    position: relative;
    top: 0;
    transform: translate(0,0);
    height: 45vh;
  }
  .fabricInsight .imagePreview img{
    width: 100%;
    margin: 0 auto;
  }


  .fabricInsight .imageFullContainer{
    max-height: 100%;
    padding-right: 0;
  }
  .fabricInsight .imageFullContainer img{
    width: 100%;
  }

  .imageFullMinimap{
    max-width: none;
    width: 15vw;
    position: relative;
    top: 0;
    margin: 0 auto;
  }
  .imageFullMinimap .highlight{
    height: 6vh;
  }
  .imageFullMinimap img{
    width: 100%;
  }

  .fabricInsight .imageContainer.detail img {
    height: auto;
    max-height: 75%;
  }
  .fabricInsight .imageContainer.detail .controller{
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 4%;
  }


  .controllerCut .sideItem{
    display: block;
    margin: 1rem auto;
    position: relative;
  }

  .fabricInfo .wrapperAll{
    position: relative;
    top: 0;
    transform: none;
  }
  .fabricInfo .wrapper{
    margin-left: 0;
  }
  .fabricInfo h3{
    font-size: 1.1rem;
  }
  .fabricInfo p{
    font-size: 0.9rem;
  }


  .splashImage.mockup>img{
    height: auto;
    max-width: 100%;
  }

  .NextPrevContainer{
    position: absolute;
    bottom: 5vh;
  }


  .imageFullScrollDown{
    width: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    bottom: unset;
    pointer-events: none;
  }
  .imageFullScrollDown div {
    font-size: 1.7rem;
    padding: 5vh 0;
  }
  .imageFullScrollDown img{
    width: 40% !important;
  }
  .imageFullScrollDown img.d-mobile{
    transform: rotate(180deg);
  }
}
@media (min-width: 0px) and (max-width: 1024px) {
  .fabricInsight{
    width: 90%;
  }
}

/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px) {

}

/* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {

}

/* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {

}

/* ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

}

/*  ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px*/
@media (min-width: 481px) and (max-width: 767px) {

}

/*  ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px */
@media (min-width: 320px) and (max-width: 480px) {

}