@import url("https://fonts.googleapis.com/css?family=Montserrat:900|Open+Sans+Condensed:300,700");header{-webkit-box-shadow:0px 3px 40px 1px rgba(0,0,0,0.5);box-shadow:0px 3px 40px 1px rgba(0,0,0,0.5)}main .products-page{position:fixed;top:70px;left:0;right:0;height:90vh;background-color:#cfab40;display:grid;grid-template-columns:.2fr .8fr;grid-template-rows:50% 50%;grid-template-areas:"brands products" "brands products"}main .products-page .brands{grid-area:brands;background-color:#000;overflow-x:hidden;overflow-y:scroll;-webkit-box-shadow:3px 0px 40px 1px rgba(0,0,0,0.5);box-shadow:3px 0px 40px 1px rgba(0,0,0,0.5)}main .products-page .brands ul{margin:0;padding:0;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}main .products-page .brands ul a{-webkit-transition:background-color 80ms ease-out;transition:background-color 80ms ease-out}main .products-page .brands ul a li{color:#cfab40;font-size:35px;font-family:"Montserrat",sans-serif;font-weight:900;padding:10px 0;text-align:center;-webkit-transition:color 80ms ease-out;transition:color 80ms ease-out;letter-spacing:3px}main .products-page .brands ul a:hover,main .products-page .brands ul a.active{background-color:#cfab40;text-decoration:none}main .products-page .brands ul a:hover li,main .products-page .brands ul a.active li{color:#000}main .products-page .description{display:none;grid-area:description;background-color:#000;-webkit-box-shadow:3px 0px 40px 1px rgba(0,0,0,0.5);box-shadow:3px 0px 40px 1px rgba(0,0,0,0.5)}main .products-page .description p{color:#cfab40;font-size:20px;padding:0 20px;letter-spacing:2px}main .products-page .description h2{margin:0 0 0 20px;color:#cfab40;letter-spacing:3px}main .products-page .products{grid-area:products;overflow-y:scroll;overflow-x:hidden}main .products-page .products h1{margin-left:20px;margin-top:10px;letter-spacing:3px}main .products-page .products ul{margin:0;padding:0;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap}main .products-page .products ul a{margin:5px .25%;width:19.5%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}main .products-page .products ul a li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around;-webkit-transition:-webkit-transform 120ms ease-out;transition:-webkit-transform 120ms ease-out;transition:transform 120ms ease-out;transition:transform 120ms ease-out, -webkit-transform 120ms ease-out}main .products-page .products ul a li:hover{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:scale(1.05);transform:scale(1.05)}main .products-page .products ul a li:hover img{-webkit-box-shadow:0px 0px 7px 3px rgba(25,25,0,0.45);box-shadow:0px 0px 7px 3px rgba(25,25,0,0.45)}main .products-page .products ul a li img{height:18vh;margin:auto}main .products-page .products ul a li h3{margin-left:15px}main .products-page .products .product-detail{display:grid;grid-template-rows:.1fr 1fr;grid-template-columns:.2fr 1.2fr .8fr .2fr;grid-gap:20px;grid-template-areas:"headline headline headline headline" ".. image info .."}main .products-page .products .product-detail h1{grid-area:headline}main .products-page .products .product-detail img{grid-area:image;width:95%;margin:0 2.5%}main .products-page .products .product-detail .info{grid-area:info;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;margin-left:30px}main .products-page .products .product-detail .info h2{margin:20px 0 0 0;font-size:30px}main .products-page .products .product-detail .info p{margin:10px 0 0 0;max-width:300px;font-size:25px;letter-spacing:3px}@media only screen and (max-width: 1300px){main .products-page{grid-template-columns:.4fr .6fr}main .products-page .products ul a li img{width:8vw;height:auto}}@media only screen and (max-width: 1200px){main .products-page .products .product-detail{display:grid;grid-template-rows:.05fr auto auto;grid-template-columns:.2fr 1fr .2fr;grid-gap:20px;grid-template-areas:"headline headline headline" ".. image .." ".. info .."}}@media only screen and (max-width: 940px){main .products-page .products ul a{width:24%;margin:5px .5%}main .products-page .products ul a li img{width:8vw;height:auto}main .products-page .products .product-detail{display:grid;grid-template-rows:.05fr auto auto;grid-template-columns:1fr;grid-gap:20px;grid-template-areas:"headline" "image" "info"}}@media only screen and (max-width: 880px){main .products-page .brands ul a li{font-size:18px;letter-spacing:1px}}@media only screen and (max-width: 760px){main .products-page .products ul a{width:48%;margin:5px 1%}main .products-page .products ul a li img{width:16vw;height:auto}}@media only screen and (max-width: 700px){main .products-page .products ul a{width:98%}main .products-page .products ul a li img{width:28vw}}@media only screen and (max-width: 670px){main .products-page .products .product-detail .info h2{font-size:20px}main .products-page .products .product-detail .info p{font-size:16px}}