body { background-color: #434c50; min-height: 100vh; font: normal 16px sans-serif; padding: 40px 0; } .container.gallery-container { background-color: #fff; color: #35373a; min-height: 150vh; padding: 30px 50px; } .gallery-container h1 { text-align: center; margin-top: 50px; font-family: 'Josefin Sans', sans-serif; font-size: 40px; color: #666666; font-weight: normal; } gallery-container h4 { text-align: center; margin-top: 0px; font-family: 'Josefin Sans', sans-serif; font-size: 30px; line-height: 0px; color: #FFFFFF; font-weight: normal; } .gallery-container p.page-description { text-align: center; margin: 25px auto; font-size: 18px; color: #999; } .tz-gallery { padding: 20px; } .tz-gallery .h4 { text-align: center; margin-top: 0px; font-family: 'Josefin Sans', sans-serif; font-size: 30px; line-height: 0px; color: #FFFFFF; font-weight: normal; } /* Override bootstrap column paddings */ .tz-gallery .row > div { padding: 2px; } .tz-gallery .lightbox img { width: 100%; border-radius: 0; position: relative; } .tz-gallery .lightbox:before { position: absolute; top: 50%; left: 50%; margin-top: -13px; margin-left: -13px; opacity: 0; color: #fff; font-size: 26px; font-family: 'Glyphicons Halflings'; content: '\e003'; pointer-events: none; z-index: 9000; transition: 0.4s; } .tz-gallery .lightbox:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: rgba(102,153,0,0.7); content: ''; transition: 0.4s; } .tz-gallery .lightbox:hover:after, .tz-gallery .lightbox:hover:before { opacity: 1; } .baguetteBox-button { background-color: transparent !important; } @media(max-width: 1024px) { body { padding: 0; min-height: 200vh; } .container.gallery-container { background-color: #fff; color: #35373a; min-height: 250vh; padding: 30px 50px; } }