#scrollerwrapper { width: 100vw; height: 100%; } .retouchingscroller { margin-top: 0vh; position: absolute; top: 0; left: 0; width: 100vw; height: 110vh; overflow-x: scroll; overflow-y: hidden; text-align: left; cursor: ew-resize; } .retouchingwrapper { height: 104vh; white-space: nowrap; bottom: 0; font-size: 0; } #retouching1 .portfolio-text { background: url(/images/portrait1header.jpg) no-repeat center center; -o-background-size: cover; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #portraits1 .portfolio-text { background: url(/images/portrait2header.jpg) no-repeat center center; -o-background-size: cover; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #lifestyle .portfolio-text { background: url(/images/lifestyleheader.jpg) no-repeat center center; -o-background-size: cover; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #landscapes .portfolio-text { background: url(/images/landscapeheader.jpg) no-repeat center center; -o-background-size: cover; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } .portfolio-text { background: white; bottom: 0; width: 75vh; max-width: 100%; height: 100vh; top: 0vh; overflow: hidden; margin-bottom: 0; padding-bottom: 0; position: relative; display: inline-block; padding: 0; font-size: 18px; } .portfolio-text div { width: 100%; position: absolute; top: 50%; -webkit-transform: translateY(-60%); -ms-transform: translateY(-60%); transform: translateY(-60%); text-align: center; color: white; } .portfolio-text div h1 { font-size: 4rem; font-family: "Playfair Display", serif; color: white; margin: 0; } .portfolio-text div p { font-family: "Judson", serif; font-style: italic; font-size: 1.5rem; word-wrap: break-word; white-space: pre-wrap; display: inline-block; width: 60%; text-align: center; height: auto; } .portfolio-image-wrapper { bottom: 0; width: auto; height: auto; overflow: hidden; margin-bottom: 0; padding-bottom: 0; position: relative; display: inline-block; padding: 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .portfolioimage { bottom: 0; width: auto; height: 100vh; top: 0vh; overflow: hidden; margin-bottom: 0; padding-bottom: 0; position: relative; display: inline-block; padding: 0; transition: all 0.3s; } .firstimage { padding-left: 0; } #portfolio-navbar { position: absolute; width: 100vw; height: 8vh; top: 92vh; background-color: transparent; z-index: 50; text-align: center; } #portfolio-navbar nav { display: inline-block; margin: 0; padding: 0; } #portfolio-navbar ul { margin: 0; padding: 0; list-style: none; position: relative; } #portfolio-navbar ul li { font-weight: 300; display: inline; padding-left: 0.2rem; padding-right: 0.2rem; padding-top: 1rem; padding-bottom: 1rem; } #portfolio-navbar ul li a { font-weight: 300; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; } .active-portfolio { border-left: 1px #f11568 solid; border-right: 1px #f11568 solid; color: white; } footer { display: none; width: 100%; text-align: center; background-color: gray; background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, #424242 5px, #424242 10px); color: #f11568; height: 30vh; font-size: 18px; } footer p { font-size: 0; } @media screen and (max-width: 800px) { #portfoliopage { height: auto; position: relative; } .retouchingwrapper { height: auto; white-space: normal; width: 100vw; font-size: 0; } .hoverdarkbottom { top: 91%; opacity: 0.6; } #portfolio-navbar { text-align: center; top: 92%; position: fixed; } #scrollerwrapper { width: 100%; height: auto; font-size: 1rem; } .before-after { font-size: 18px; } .portfolioimage { width: 100vw; height: auto; } .portfolio-text { width: 100vw; font-size: 18px; } .retouchingscroller { cursor: default; overflow-x: hidden; overflow-y: scroll; width: 105vw; height: auto; position: relative; } .hidden { display: none; } #hoverdarkbottom { position: fixed; } } @media screen and (max-height: 700px) { .portfolio-text div h1 { font-size: 2rem; } .portfolio-text div p { font-size: 1rem; } } @media screen and (max-width: 455px) { .hoverdarkbottom { top: 91%; opacity: 0.6; } #portfolio-navbar { text-align: center; top: 92%; z-index: 100; } #portfolio-navbar ul li { padding-left: 0.1rem; padding-right: 0.1rem; display: inline; } #portfolio-navbar ul li a { padding-left: 0.3rem; padding-right: 0.3rem; font-size: 3.76471vw; } }