/* ---------------------------- Header ---------------------------- */ /* ###################### */ /* ## Header Shop Page ## */ /* ###################### */ #shop-header { height:100vh; width:100%; background-image:url(../IMGs/ForSale/IMG-2019-les-trottes-de-l-ouest-cover.jpg); background-position:center bottom; background-size:cover; background-color:rgba(100,100,100,1); } #shop-header .hover-slide { position:absolute; top:30%; left:15%; right:15%; z-index:10; } #shop-header .hover-slide h1 { margin-bottom:0; font-size:4rem; font-weight:300; color:rgba(255,255,255,1); } #shop-header .hover-slide h1 img { width:50%; height:auto; } #shop-header .hover-slide p { font-size:1.1rem; font-weight:300; letter-spacing:0.05rem; color:rgba(255,255,255,1); } #shop-header .overlay { position:absolute; top:0; left:0; height:100%; width:100%; background-color:black; opacity:0.5; z-index: 1; } /* ########################### */ /* ## Header Width Format ## */ /* ########################### */ @media only screen and (max-width: 1024px) { #shop-header .hover-slide h1 img { width:75%; height:auto; } } @media only screen and (max-width: 768px) { #shop-header .hover-slide h1 img { width:85%; height:auto; } } @media only screen and (max-width: 414px) { #shop-header .hover-slide h1 img { width:100%; height:auto; } #shop-header .hover-slide { text-align:center; } } @media only screen and (max-width: 375px) { #shop-header .overlay { height:100%; } #shop-header .hover-slide { top:100px; left:20px; right:20px; text-align:center; } #shop-header .hover-slide h1 { font-size:3rem; } #shop-header .hover-slide h1 img { margin-top:50px; width:100%; height:auto; } #shop-header .hover-slide p { margin-bottom:40px; } } /* No Change from 375px */ @media only screen and (max-width: 320px) { #shop-header .overlay { height:100%; } #shop-header .hover-slide { top:100px; left:20px; right:20px; text-align:center; } #shop-header .hover-slide h1 { font-size:3rem; } #shop-header .hover-slide h1 img { width:105%; height:auto; } #shop-header .hover-slide p { margin-bottom:40px; } } /* ----------------------- (End of) Carousel ----------------------- */ /* ---------------------------- Products ---------------------------- */ /* ############################ */ /* ## Products Shop Page ## */ /* ############################ */ #products { margin:0 0 50px 0; } #products img.product { width:100%; height:auto; padding:75px; } #products .item h2 { margin-top:20%; padding-left:20%; } #products .item h4 { margin-bottom:50px; padding-left:20%; font-size:1.5rem; font-weight:600; color:rgba(255,102,0,1); } #products .item p { width:80%; margin-bottom:40px; padding-left:20%; letter-spacing:0.05rem; line-height:35px; } #products .item p span.size { font-size:0.9rem; font-style:italic; letter-spacing:0.03rem; } #products .item p span.color { color:rgba(255,102,0,1); } #products .item hr { float:left; width:100px; margin-left:20%; margin-top:20px; margin-bottom:20px; } #products .item img.logo { width:auto; height:50px; margin-left:20%; margin-bottom:30px; } #products .item .bookThis { padding:7px 30px; background:none; border:rgba(51,51,51,1) thin solid; font-size:0.9rem; letter-spacing:0.03rem; color:rgba(51,51,51); } #products .item .bookThis:hover { border:none; background:rgba(255,102,51,1); color:rgba(255,255,255,1); -webkit-box-shadow: 0px 35px 85px 19px rgba(0,0,0,0.3); -moz-box-shadow: 0px 35px 85px 19px rgba(0,0,0,0.3); box-shadow: 0px 35px 85px 19px rgba(0,0,0,0.3); } #products .item .col-lg-4, #products .item .col-lg-6 { padding:0 !important; background:rgba(245,245,245,1); } #products .item .contactLink { margin-bottom:40px; padding-left:20%; text-align:left; } /* ########################### */ /* ## Products Width Format ## */ /* ########################### */ @media only screen and (max-width: 1024px) { } @media only screen and (max-width: 768px) { } @media only screen and (max-width: 414px) { #products img.product { width:100%; height:auto; padding:25px; } #products .item h2 { margin-top:20%; padding-left:15px; padding-right:15px; font-size:1.9rem; } #products .item h4 { margin-bottom:50px; padding-left:15px; padding-right:15px; font-size:1.45rem; font-weight:600; color:rgba(255,102,0,1); } #products .item p { width:100%; margin-bottom:40px; padding-left:15px; padding-right:15px; font-size:1rem; letter-spacing:0.05rem; line-height:30px; } #products .item img.logo { width:150px; height:auto; margin-left:15px; margin-bottom:30px; } } @media only screen and (max-width: 375px) { #products img.product { width:100%; height:auto; padding:25px; } #products .item h2 { margin-top:20%; padding-left:15px; padding-right:15px; font-size:1.8rem; } #products .item h4 { margin-bottom:50px; padding-left:15px; padding-right:15px; font-size:1.35rem; font-weight:600; color:rgba(255,102,0,1); } #products .item p { width:100%; margin-bottom:40px; padding-left:15px; padding-right:15px; font-size:0.9rem; letter-spacing:0.05rem; line-height:30px; } #products .item img.logo { width:150px; height:auto; margin-left:15px; margin-bottom:30px; } } /* No Change from 375px */ @media only screen and (max-width: 320px) { #products img.product { width:100%; height:auto; padding:25px; } #products .item h2 { margin-top:20%; padding-left:15px; padding-right:15px; font-size:1.65rem; } #products .item h4 { margin-bottom:50px; padding-left:15px; padding-right:15px; font-size:1.2rem; font-weight:600; color:rgba(255,102,0,1); } #products .item p { width:100%; margin-bottom:40px; padding-left:15px; padding-right:15px; font-size:0.9rem; letter-spacing:0.05rem; line-height:30px; } #products .item img.logo { width:150px; height:auto; margin-left:15px; margin-bottom:30px; } } /* ----------------------- (End of) Products ----------------------- */