h1, h2, p { transition: font-size 0.2s; } html { background-color: black; } body { margin: 0; overflow: hidden; height: 100%; } #main_body { width: 100vw; height: 100%; font-family: "montserrat", sans-serif; font-weight: 400; text-align: left; overflow: hidden; background-color: #424242; z-index: 0; } /* Logo start */ /* Slideshow start */ #slideshow { position: absolute; width: 100vw; height: 100vh; z-index: 15; } /*close */ /* Portfolio start */ #portfoliopage { position: absolute; width: 100vw; height: 100vh; overflow: hidden; } /* Fading Effects start */ #halfopacity { opacity: 0.6; } .hoverdarktop { background: -moz-linear-gradient(top, #121212 0%, transparent 80%); background: -webkit-linear-gradient(top, #121212 0, transparent 80%); background: linear-gradient(to bottom, #121212 0%, transparent 80%); width: 100vw; height: 20vh; position: absolute; top: 0; left: 0; z-index: 40; opacity: 0.3; } .hoverdarkbottom { background: -moz-linear-gradient(top, transparent 0%, #121212 99%); background: -webkit-linear-gradient(top, transparent 0%, #121212 99%); background: linear-gradient(to bottom, transparent 0%, #121212 99%); width: 100vw; height: 10vh; position: fixed; top: 90vh; left: 0; z-index: 50; opacity: 0.3; } .hidden { visibility: hidden; opacity: 0; transition: visibility 0s 0.5s, opacity 0.5s linear; } .visible { visibility: visible; opacity: 1; transition: opacity 0.5s linear; } .fade-in { animation-duration: 1s; transition-timing-function: ease-in; animation-fill-mode: both; animation-name: fadeIn; } .fade-activepage { animation-duration: 0.7s; transition-timing-function: ease-in; animation-fill-mode: both; animation-name: activePage; } /* close */ /* ABOUT PAGE start */ @media screen and (max-width: 800px) { body { overflow-y: scroll; } #main_body { height: auto; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes activePage { 0% { border-bottom: 3px solid rgba(241, 21, 104, 0); } 100% { border-bottom: 3px solid #f11568; } } #logo { display: inline-block; margin-left: 10vw; position: relative; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.8rem; padding-bottom: 0.5rem; background-color: transparent; width: 16rem; text-align: center; font-size: 1rem; vertical-align: center; } #logo h1 { font-weight: 600; padding-top: 0; padding-bottom: 0; margin: 0; color: #f6f7f7; } /* NAV start */ #navwrapper { z-index: 9999; position: absolute; text-align: left; top: 0rem; padding-top: 0; width: 100%; padding-top: 1.3rem; } #navwrapper a { letter-spacing: 0.4px; } nav { vertical-align: bottom; margin-left: 3rem; padding-left: 0; display: inline-block; } nav a { text-decoration: none; font-size: 1.1rem; color: #b2bcbf; font-weight: 500; } nav a:hover { color: white; } #navwrapper ul { padding-left: 0; list-style: none; position: relative; } #navwrapper li { padding-left: 0.7rem; padding-right: 0.7rem; padding-top: 0.2rem; padding-bottom: 0.2rem; background-color: transparent; margin-left: 0.2vw; margin-right: 0.2vw; display: inline; color: #b2bcbf; white-space: nowrap; } @media screen and (max-width: 370px) { #navwrapper li a { font-size: 4vw; } } @media screen and (max-width: 500px) { #navwrapper li { padding-left: 0.3rem; padding-right: 0.3rem; padding-top: 0.2rem; margin-left: 0.1vw; margin-right: 0.1vw; margin-bottom: 0.5rem; padding-bottom: 0.8rem; } } @media screen and (max-width: 920px) { #navwrapper { text-align: center; } #logo { margin-top: 0.5rem; padding-left: 1rem; padding-right: 1rem; padding-top: 0.8rem; padding-bottom: 0.5rem; width: 15rem; text-align: center; margin-left: 0; margin-bottom: 0; } nav { margin-left: 0; margin-top: 0; padding-top: 0; } } .active-nav { font-weight: 500; color: white; padding-bottom: 5px; border-bottom: 3px solid #f11568; border-radius: 2px; } #slide1 { position: absolute; width: 100vw; height: 100vh; background: url(http://static.tumblr.com/hlwpam6/salo9xf8q/optimized.jpg) no-repeat center center fixed; -o-background-size: cover; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; z-index: -1; } #slide2 { position: absolute; width: 100vw; height: 100vh; background: url(/images/replace-eve.jpg) no-repeat center center fixed; -o-background-size: cover; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; z-index: -1; } #slide3 { position: absolute; width: 100vw; height: 100vh; background: url(http://static.tumblr.com/hlwpam6/SFao9xf8w/optimizedlucas.jpg) no-repeat center center fixed; -o-background-size: cover; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; z-index: -1; } #slide4 { position: absolute; width: 100vw; height: 100vh; background: url(http://static.tumblr.com/hlwpam6/SVSo9xf8s/optimizeddale.jpg) no-repeat center center fixed; -o-background-size: cover; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; z-index: -1; } @keyframes fade { 0% { opacity: 0; } 4.11% { opacity: 1; } 40.33% { opacity: 1; } 44.44% { opacity: 0; } 100% { opacity: 0; } } #slideshow div { position: absolute; left: 0; right: 0; opacity: 0; animation-name: fade; animation-duration: 20s; animation-iteration-count: infinite; } #slide1 { animation-delay: 0s; } #slide2 { animation-delay: 5s; } #slide3 { animation-delay: 10s; } #slide4 { animation-delay: 15s; } @media screen and (max-width: 800px) { #slide1 { background: url(/generated/retouching/luke1-779by974-6b064e.jpg) no-repeat center center fixed; -o-background-size: cover; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #slide2 { background: url(/generated/retouching/eve1-1280by1920-55e2f2.jpg) no-repeat center center fixed; -o-background-size: cover; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #slide3 { background: url(/generated/landscapes/berk1-1280by1920-138af2.jpg) no-repeat center center fixed; -o-background-size: cover; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #slide4 { background: url(/generated/lifestyle/hike3-1280by1920-4b0931.jpg) no-repeat center center fixed; -o-background-size: cover; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } }