/* HERO & CTA */ .hero-section {text-align:center; padding:2em 1em; background:#f9f9f9; margin-top: 75px;} #h1art {font-family:Georgia, serif; font-size:3rem; margin-bottom:1em;} #h1art span small {font-size:1.5rem; font-style:italic; color:#555;} .art-class {display:flex; margin:2em auto; text-align:center; } .art-class a {background:#4486f8; color:#fff; font-weight:bold; text-decoration:none; transition:all .3s;} .art-class a:hover {background:#2a5bb8;} /*BEGIN OF FINE ART GALLERY*/ /*Image gallery*/ .inside {max-width: 1000px; width: 100%; margin: 0 auto;} #product{width: 100%;background-color: #eee; min-height: 600px; padding-top:50px;} .product-gallery{position: relative;float: left;margin-top: 25px;max-width: 1400px;width: 95%;} .product-gallery-thumbnail-image{max-width: 120px; width: 16%; height: auto;border-width: 2px; border-style: solid; border-color: white; box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.05);opacity: 0.8; float: left; } .product-gallery-big-thumbnail-image{position: absolute; top: 0; right: 0; float:right; max-width: 700px;width: 80%;height: auto;border-width: 2px;border-style: solid;border-color: white;box-shadow: 0 10px 10px 0px rgba(0, 0, 0, 0.05);-webkit-animation: scale 0.6s ease-in-out;-moz-animation: scale 0.6s ease-in-out;animation: scale 0.6s ease-in-out;} @keyframes gallery {0% {opacity: 0;}100% {opacity: 1;}} @keyframes gallery-reverse {0% {opacity: 1;}100% {opacity: 0;}} /* GALLERY */ input[type="radio"] {display: none;} .product-gallery label{cursor: pointer; display:flex} label img{float: none; display: block;} #id1 ~ #thumb1, #id2 ~ #thumb2, #id3 ~ #thumb3, #id4 ~ #thumb4{ opacity: 0; -webkit-animation: gallery-reverse 0.2s linear; -moz-animation: gallery-reverse 0.2s linear; animation: gallery-reverse 0.2s linear; } #id1:checked ~ #thumb1, #id2:checked ~ #thumb2, #id3:checked ~ #thumb3, #id4:checked ~ #thumb4{ opacity: 1; -webkit-animation: gallery 0.5s linear; -moz-animation: gallery 0.5s linear; animation: gallery 0.5s linear; } .product-gallery-thumbnail-image:hover{opacity: 1;} /*END OF FINE ART GALLERY*/ /* FINE ART MOCKUP GALLERY */ .gallery {display:grid; grid-template-columns:repeat(18,1fr); grid-template-rows:repeat(6,5vw); grid-gap:1rem; padding:2em 1em;} .gallery__img {width:100%; height:100%; object-fit:cover; display:block; border-radius:5px; transition:transform .3s;} .gallery__img:hover {transform:scale(1.05);} .gallery__item--1 {grid-column:1/7; grid-row:1/7;} .gallery__item--2 {grid-column:7/13; grid-row:1/7;} .gallery__item--3 {grid-column:13/19; grid-row:1/7;} /* END OF FINE ART MOCKUP GALLERY */ /* HEADINGS */ .h3edition {font-size:2.5rem; color:#4486f8; font-style:italic; font-weight:normal; margin:3em 0 1em 0; text-align:center;} /* SHIPPING */ .shipping {display:flex; flex-wrap:wrap; padding:75px 200px; align-items:center; background:#f5f5f5; border-top:1px solid #ddd; border-bottom:1px solid #ddd; margin-top: 150px;} .col-lg-4, .col-lg-8 {flex:1; min-width:250px;} .h2worldwide {font-size:3rem; font-style:italic; color:#4486f8; margin-bottom:0.5em; padding: 0;} .delivery-paragraph {font-size:1.2rem; line-height:1.5em; color:#4486f8; text-align: center;} .img-shipping {max-width:100%; height:auto; display:block; margin:auto; border-radius:5px;} #store{padding: 100px 0; background: transparent; max-width: 1400px; margin: auto;} /*Responsive design - @media*/ @media only screen and (min-width: 1400px){ /*FINE ART GALLERY*/ .inside {max-width: 1500px;} #product {min-height: 850px;} .product-gallery-big-thumbnail-image {max-width: 1100px;} .product-gallery-thumbnail-image {max-width: 218px;} .product-gallery label {display:flex; margin-bottom:50px;} .product-gallery {padding-left:15px;} } @media only screen and (min-width: 1100px) and (max-width: 1399px) { /*FINE ART GALLERY*/ .inside {max-width: 1100px;} #product {min-height: 750px;} .product-gallery label {margin-bottom:40px;} .product-gallery-big-thumbnail-image {max-width: 830px;} .product-gallery-thumbnail-image{max-width: 160px;} } @media only screen and (max-width: 1000px){ /*FINE ART GALLERY*/ .inside{width: 96%;padding: 0 2%;} #product {min-height: 500px;} /*SHIPPING*/ #h1art{font-size:2.5rem;} .h3edition{font-size:2rem; margin:1em 0 0 0;} .art-class {padding-bottom: 25px;} .shipping {margin-top: 100px; padding:25px 0} .h2worldwide{font-size:2.5rem;} #store{padding:50px;} } @media only screen and (max-width: 820px){ /* HERO & CTA */ .button-color {left:0; margin-top: 5px} /*FINE ART GALLERY*/ .product-gallery{width: 100%; max-width: none; min-height: 425px;} .product-gallery-big-thumbnail-image{max-width: none;} #product-gallery-thumbnails{max-width: none;} .product-gallery-thumbnail-image{max-width: none;} .product-gallery label {margin-bottom: 25px;} } @media only screen and (max-width: 700px){ /*FINE ART GALLERY*/ .side-image{width: 100%;background-color: beige;} .product-gallery{min-height: 550px;} #product {min-height: 500px;} } @media only screen and (max-width: 620px){ /* HERO & CTA */ .hero-section {padding:0.5em;} /*FINE ART GALLERY*/ .product-gallery{min-height: 350px;} .product-gallery label {margin-bottom: 15px;} #product {padding-top: 0; min-height: 300px;} #art-button {min-width: 200px; font-size:20px;} .button-color {left:0} /* FINE ART MOCKUP GALLERY */ .gallery__item--1{display:none;} .gallery__item--2{grid-column:1/10;} .gallery__item--3{grid-column:10/19;} /*SHIPPING*/ .art-class a{padding:.8em 1.5em; font-size:1rem;} .h2worldwide{font-size:2rem; text-align:center; margin-bottom:1em;} .shipping{padding:25px;} #store{padding:0;} } @media only screen and (max-width: 540px){ /*FINE ART GALLERY*/ .product-gallery{min-height: 300px;} } @media only screen and (max-width: 480px){ /*FINE ART GALLERY*/ .product-gallery-thumbnail-image{margin-bottom: 3%;} .product-gallery{min-height: 250px;} }