.gentek-container {
  padding:0 5%;
}

.product-box {
  background-color:#fff;
  border:1px solid black;
  margin-bottom:20px;
  max-width:300px;
  height:300px;
}

.product-item {
  cursor:pointer;
  color:black;
}

.product-title {
  font-size:24px;
  color:black;
}

.modal{
  margin-top:100px;
}


.gentekButton {
margin-top:50px;
background-color:#EDE1D3;
	border-radius:10px;
	cursor:pointer;
	color:#ffffff;
	font-size:19px;
	padding:10px 27px;
	text-decoration:none;
  
}
.gentekButton:hover {
	background-color:#D4C9BC;
}
.gentekButton:active {
	position:relative;
	top:1px;
}

.cropped {
    height: 450px; 
    overflow:hidden;   
}

.quality-wrapper {
  margin-top:50px;
  padding:0 8%;
}

.quality-section {
  margin-top:30px;
}

.quality-box {
  background:#EDE1D3;
  padding:40px;
  margin-left:-200px;
  margin-top:30px;
  color:#6E6862;
  max-width:500px;
}

.quality-box:after{
  content: " ";
  position:absolute;
  width: 50%;
  left: -185px;
  bottom: 0;
  height: 80%;
  -moz-box-shadow: -60px 20px 0 #d4dee2;
  -webkit-box-shadow: -60px 20px 0 #d4dee2;
  box-shadow:-20px 20px 0 #d4dee2;
}

.product-header {
  padding-bottom:30px;
  color:#6E6862;
}











.visualizer-text {
  text-align:right;
}

.frame-container {
  padding:50px 0 100px 0;
  text-align:center;
  perspective: 175px;
  position:relative;
}



.modal-content {
  background-image: linear-gradient(180deg,rgba(245,245,245,.9) 0%,rgba(245,245,245,.6) 100%),url(/imageserver/Reusable/gentek2021/bg.jpg);
  background-size:cover;
  background-position:bottom;
  background-repeat: no-repeat;
}

-webkit-@keyframes main-img {
  0% {transform-origin: bottom; transform: translate(-500px, 100px) scale(0);}
  100% {transform: translate(0px, 0px) scale(1);}
}
-moz-@keyframes main-img {
  0% {transform-origin: bottom; transform: translate(-500px, 100px) scale(0);}
  100% {transform: translate(0px, 0px) scale(1);}
}
-ms-@keyframes main-img {
  0% {transform-origin: bottom; transform: translate(-500px, 100px) scale(0);}
  100% {transform: translate(0px, 0px) scale(1);}
}
-o-@keyframes main-img {
  0% {transform-origin: bottom; transform: translate(-500px, 100px) scale(0);}
  100% {transform: translate(0px, 0px) scale(1);}
}
@keyframes main-img {
  0% {transform-origin: bottom; transform: translate(-500px, 100px) scale(0);}
  100% {transform: translate(0px, 0px) scale(1);}
}

.main-img {
   -webkit-transform:scale(0);
   -moz-transform:scale(0);
   -ms-transform:scale(0);
   -o-transform:scale(0);
   transform:scale(0);
  -webkit-animation: main-img 4s linear 1s 1 normal forwards ;
  -moz-animation: main-img 4s linear 1s 1 normal forwards ;
  -ms-animation: main-img 4s linear 1s 1 normal forwards ;
  -o-animation: main-img 4s linear 1s 1 normal forwards ;
  animation: main-img 4s linear 1s 1 normal forwards ;
}

-webkit-@keyframes rotate {
  0% {transform-origin:left; transform:rotateY(180deg) translate(200px) scale(0);}
  100% {transform:rotateY(0deg) translate(0px) scale(1) skew(-2deg,5deg);}
}

-moz-@keyframes rotate {
  0% {transform-origin:left; transform:rotateY(180deg) translate(200px) scale(0);}
  100% {transform:rotateY(0deg) translate(0px) scale(1) skew(-2deg,5deg);}
}

-ms-@keyframes rotate {
  0% {transform-origin:left; transform:rotateY(180deg) translate(200px) scale(0);}
  100% {transform:rotateY(0deg) translate(0px) scale(1) skew(-2deg,5deg);}
}

-o-@keyframes rotate {
  0% {transform-origin:left; transform:rotateY(180deg) translate(200px) scale(0);}
  100% {transform:rotateY(0deg) translate(0px) scale(1) skew(-2deg,5deg);}
}

@keyframes rotate {
  0% {transform-origin:left; transform:rotateY(180deg) translate(200px) scale(0);}
  100% {transform:rotateY(0deg) translate(0px) scale(1) skew(-2deg,5deg);}
}

.rotate.start {
  -webkit-transform:scale(0);
   -moz-transform:scale(0);
   -ms-transform:scale(0);
   -o-transform:scale(0);
   transform:scale(0);
  -webkit-animation: rotate 4s ease-in 0s 1 normal forwards;
  -moz-animation: rotate 4s ease-in 0s 1 normal forwards;
  -ms-animation: rotate 4s ease-in 0s 1 normal forwards;
  -o-animation: rotate 4s ease-in 0s 1 normal forwards;
  animation: rotate 4s ease-in 0s 1 normal forwards;
}



@media only screen and (max-width: 992px) {
  .quality-box {
     padding:40px;
     margin-left:0px;
     margin-top:30px;
     margin-bottom:30px;
  }

.quality-box:after{
    width: 50%;
    left: 20px;
    bottom: 0;
    height: 80%;
  
  }
}