diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..ba99cf5 --- /dev/null +++ b/styles.css @@ -0,0 +1,80 @@ +body { + background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%); + min-height: 100vh; + font: normal 16px sans-serif; +} + +.gallery-container h1 { + text-align: center; + margin-top: 70px; + font-family: 'Droid Sans', sans-serif; + font-weight: bold; + color: #58595a; +} + +.gallery-container p.page-description { + text-align: center; + margin: 30px auto; + font-size: 18px; + color: #85878c; +} + +.tz-gallery { + padding: 40px; +} + +.tz-gallery .thumbnail { + padding: 0; + margin-bottom: 30px; + background-color: #fff; + border-radius: 4px; + border: none; + transition: 0.15s ease-in-out; + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06); +} + +.tz-gallery .thumbnail:hover { + transform: translateY(-10px) scale(1.02); +} + +.tz-gallery .lightbox img { + border-radius: 4px 4px 0 0; +} + +.tz-gallery .caption{ + padding: 26px 30px; + text-align: center; +} + +.tz-gallery .caption h3 { + font-size: 14px; + font-weight: bold; + margin-top: 0; +} + +.tz-gallery .caption p { + font-size: 12px; + color: #7b7d7d; + margin: 0; +} + +.baguetteBox-button { + background-color: transparent !important; +} + +/* ADDED */ +@media (min-width: 1200px) { + .caption {min-height:110px;} +} + +@media (min-width: 992px) and (max-width: 1199px) { + .caption {min-height:130px;} +} + +@media (min-width: 768px) and (max-width: 991px) { + .caption {min-height:110px;} +} + +@media (max-width: 767px) { + .caption {min-height:60px;} +}