@media (max-width: 500px) { h3.quote { text-align: center; font-size: 6.5vw; line-height: 7.5vw; padding-bottom: 1vw; text-transform: initial; } } @media (min-width: 501px) { h3.quote { text-align: center; font-size: 3.6vw; line-height: 4vw; padding-bottom: 1vw; text-transform: initial; } } @media (min-width: 1251px) { .ds-landing { height: 100vh; width: calc(100% - 60px); background-color: #FAF8F4; background-image: url('ds_landing.png'); background-repeat: no-repeat; background-size: cover; background-position: center; position: fixed; display: none; } } @media (min-width: 801px) and (max-width: 1250px) { .ds-landing { height: calc(100vh - 60px); top: 60px; width: 100%; background-color: #FAF8F4; background-image: url('ds_landing.png'); background-repeat: no-repeat; background-size: cover; position: fixed; display: none; background-position: center; } } @media (max-width: 800px) { .ds-landing { height: calc(100vh - 60px); top: 60px; width: 100%; background-color: #FAF8F4; background-image: url('ds_landing_mobile.png'); background-repeat: no-repeat; background-size: cover; position: fixed; display: none; background-position: center; } } @media (min-width: 1251px) { .history-landing { height: 100vh; width: calc(100% - 60px); background-color: #FAF8F4; background-image: url('history_landing.png'); background-repeat: no-repeat; background-size: cover; background-position: center; position: fixed; display: none; } } @media (min-width: 801px) and (max-width: 1250px) { .history-landing { height: calc(100vh - 60px); top: 60px; width: 100%; background-color: #FAF8F4; background-image: url('history_landing.png'); background-repeat: no-repeat; background-size: cover; position: fixed; display: none; background-position: center; } } @media (max-width: 800px) { .history-landing { height: calc(100vh - 60px); top: 60px; width: 100%; background-color: #FAF8F4; background-image: url('history_landing_mobile.png'); background-repeat: no-repeat; background-size: cover; position: fixed; display: none; background-position: center; } } @media (min-width: 1251px) { .myths-landing { height: 100vh; width: calc(100% - 60px); background-color: #FAF8F4; background-image: url('myths_landing.png'); background-repeat: no-repeat; background-size: cover; background-position: center; position: fixed; display: none; } } @media (min-width: 800px) and (max-width: 1250px) { .myths-landing { height: calc(100vh - 60px); top: 60px; width: 100%; background-color: #FAF8F4; background-image: url('myths_landing.png'); background-repeat: no-repeat; background-size: cover; position: fixed; display: none; background-position: center; } } @media (max-width: 800px) { .myths-landing { height: calc(100vh - 60px); top: 60px; width: 100%; background-color: #FAF8F4; background-image: url('myths_landing_mobile.png'); background-repeat: no-repeat; background-size: cover; position: fixed; display: none; background-position: center; } } .hidden { display: none; } h2.myths { font-size: 4vw; font-family: "europa",sans-serif; font-style: normal; font-weight: 700; letter-spacing: .05vw; color: #000; text-align: center; } @media (min-width: 1251px) { .pageTitle { margin-left: -30px; margin-right: auto; margin-top: 40vh; height: 5vw; width: 100vw; z-index: 10; position: relative; text-align: center; } } @media (min-width: 501px) { .pageTitle { margin-left: auto; margin-right: auto; margin-top: calc(40vh - 20px); height: 5vw; width: 100vw; z-index: 10; position: relative; text-align: center; } } @media (max-width: 500px) { .pageTitle { margin-left: auto; margin-right: auto; margin-top: calc(40vh - 40px); height: 5vw; width: 100vw; z-index: 10; position: relative; text-align: center; } } @media (min-width: 1251px) { .arrow { margin-left: calc(46.5vw - 30px); margin-right: calc(46.5vw - 30px); margin-right: auto; position: absolute; bottom: 4vw; max-width: 7vw; } .arrow img { max-width: 7vw; } } @media (min-width: 701px) { .arrow { margin-left: 46.5vw; margin-right: 46.5vw; margin-right: auto; position: absolute; bottom: 4vw; max-width: 7vw; } .arrow img { max-width: 7vw; } } @media (max-width: 700px) { .arrow { margin-left: 42.5vw; margin-right: 42.5vw; margin-right: auto; position: absolute; bottom: 25vw; max-width: 15vw; } .arrow img { max-width: 15vw; } } span.highlight { background-color: #ffd400; padding-bottom: .2em; padding-left: .3em; padding-right: .3em; -webkit-box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); -moz-box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); line-height: 1.7em; } @media (max-width: 500px) { .titleBoxSmall { position: fixed; bottom: 0; background-color: #ffd400; height: 50px; width: 100vw; -webkit-box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); -moz-box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); display: none; z-index: 2000; } } @media (min-width: 501px) { .titleBoxSmall { position: fixed; bottom: 0; background-color: #ffd400; height: 50px; width: 100vw; -webkit-box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); -moz-box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); display: none; z-index: 2000; } } @media (min-width: 1251px) { .titleBoxSmall { position: fixed; top: 0; background-color: #ffd400; height: 50px; width: 225px; -webkit-box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); -moz-box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); display: none; z-index: 2000; } } h1.pageTitleSmall { font-size: 14px; margin-top: -8px; margin-left: 0px; text-transform: uppercase; letter-spacing: 2px; text-align: center; position: relative; } @media (max-width: 500px) { .myths-text{ width: 90%; margin-left: 5%; margin-right: 5%; position: absolute; height: auto; background-color: #FFFFFF; z-index: 1000; } } @media (min-width: 501px) { .myths-text{ width: 78%; margin-left: 11%; margin-right: 11%; margin-top: 25vw; position: absolute; height: auto; margin-bottom: 20vw; background-color: #FFFFFF; z-index: 1000; } } @media (min-width: 1001px) { .myths-text{ width: 55%; margin-left: 20%; margin-right: 20%; margin-top: 100vw; position: absolute; height: auto; margin-bottom: 20vw; } } a.def{ color: #ffd400; text-decoration: underline; } span.tooltip:hover{ cursor: help; } @media (max-width: 1050px) { .pageContent{ height: auto; width: 100%; position: absolute; display: block; clear: both; margin-top: 100vh; background-color: #FFFFFF; -webkit-box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); -moz-box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); margin-bottom: 50px; } } @media (min-width: 1051px) { .pageContent{ height: auto; width: 100%; position: absolute; display: block; clear: both; margin-top: 100vh; background-color: #FFFFFF; -webkit-box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); -moz-box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); box-shadow: -1px -1px 25px -2px rgba(0,0,0,0.25); } } @media (min-width: 1200px) { .pageContent{ height: auto; width: 100%; position: absolute; display: block; clear: both; margin-top: 100vh; background-color: #FFFFFF; } } @media (min-width: 1601px) { .pageContent{ height: auto; width: 100%; position: absolute; display: block; clear: both; margin-top: 100vh; background-color: #FFFFFF; } } .pageContent1 { position: relative; width: 100%; display: block; } .pageContent2 { position: relative; width: 100%; display: block; } @media (max-width: 500px) { .page-text{ width: 80%; margin-left: 10%; margin-right: 10%; margin-top: 5vw; position: relative; height: auto; margin-bottom: 10vw; } } @media (min-width: 501px) { .page-text{ width: 70%; margin-left: 15%; margin-right: 15%; margin-top: 5vw; position: relative; height: auto; margin-bottom: 10vw; } } @media (min-width: 1001px) { .page-text{ width: 55%; margin-left: 20%; margin-right: 20%; margin-top: 5vw; position: relative; height: auto; margin-bottom: 10vw; } } @media (max-width: 700px) { h2.bannerPage { font-size: 7.5vw; font-family: "europa",sans-serif; font-style: normal; font-weight: 700; letter-spacing: .05vw; line-height: 8.5vw; color: #fff; text-align: center; margin-bottom: 0; margin-top: .5em; padding-left: 8vw; padding-right: 8vw; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); } h4.bannerPage { text-align: center; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); line-height: 2px; color: #fff; font-size: 4vw; letter-spacing: .5vw; margin-bottom: 0px; margin-top: 12vw; text-transform: capitalize; font-weight: 500; font-family: "source-serif-pro", serif; } } @media (min-width: 701px) { h2.bannerPage { font-size: 5vw; font-family: "europa",sans-serif; font-style: normal; font-weight: 700; letter-spacing: .05vw; line-height: 6vw; color: #fff; text-align: center; margin-bottom: 0; margin-top: .5em; padding-left: 16vw; padding-right: 16vw; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); } h4.bannerPage { text-align: center; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); line-height: 1px; color: #fff; font-size: 2.3vw; letter-spacing: .2vw; margin-bottom: 0px; margin-top: 7vw; font-weight: 500; text-transform: capitalize; font-family: "source-serif-pro", serif; } } .firstLetter{ float: left; font-size: 3.26em; line-height: 0.5; margin: 0.205em 0.153em 0 0; font-family: "europa",sans-serif; font-weight: 800; color: #0082c9; } .cover { width: 100%; height: 100%; background-color: #fff; opacity: 0; position: absolute; left: 0; top: 0; z-index: 90; } @media (min-width: 1600px) { .next-image { position: absolute; left: 1vw; top: 1vw; width: 26vw; height: 16vw; margin-left: auto; margin-right: auto; } .next-button { position: relative; width: 28vw; height: 28vw; margin-left: auto; margin-right: auto; top: 8vw; opacity: 0; } .inner-text { position: absolute; top: 7vw; left: 0; right: 1vw; width: 28vw; height: 5vw; margin-left: auto; margin-right: auto; } } @media (min-width: 801px) and (max-width: 1599px){ .next-image { position: absolute; left: 1vw; top: 1vw; width: 28vw; height: 18vw; margin-left: auto; margin-right: auto; } .next-button { position: relative; width: 30vw; height: 30vw; margin-left: auto; margin-right: auto; top: 8vw; opacity: 0; } .inner-text { position: absolute; top: 7.6vw; left: 0; right: 1vw; width: 30vw; height: 7vw; margin-left: auto; margin-right: auto; } } @media (min-width: 551px) and (max-width: 800px) { .next-image { position: absolute; left: 1vw; top: 1vw; width: 43vw; height: 33vw; margin-left: auto; margin-right: auto; } .next-button { position: relative; width: 45vw; height: 45vw; margin-left: auto; margin-right: auto; margin-bottom: 50px; top: 8vw; opacity: 0; } .inner-text { position: absolute; top: 13vw; left: 0; right: 1vw; width: 45vw; height: 22vw; margin-left: auto; margin-right: auto; } } @media (min-width: 401px) and (max-width: 550px){ .next-image { position: absolute; left: 1vw; top: 1vw; width: 43vw; height: 33vw; margin-left: auto; margin-right: auto; } .next-button { position: relative; width: 45vw; height: 45vw; margin-left: auto; margin-right: auto; top: 8vw; opacity: 0; } .inner-text { position: absolute; top: 12.2vw; left: 0; right: 1vw; width: 45vw; height: 22vw; margin-left: auto; margin-right: auto; } } @media (max-width: 400px) { .next-image { position: absolute; left: 1vw; top: 1vw; width: 72vw; height: 62vw; margin-left: auto; margin-right: auto; } .next-button { position: relative; width: 70vw; height: 70vw; margin-left: auto; margin-right: auto; top: 8vw; opacity: 0; } .inner-text { position: absolute; top: 17vw; left: 0; right: 1vw; width: 74vw; height: 53vw; margin-left: auto; margin-right: auto; } } .next-image img { width: 100%; height: auto; } @media (min-width: 801px) { h4.button { text-align: center; position: relative; color: #ffffff; font-size: 1vw; } } @media (min-width: 401px) and (max-width: 800px) { h4.button { text-align: center; position: relative; color: #ffffff; font-size: 2.3vw; } } @media (max-width: 400px) { h4.button { text-align: center; position: relative; color: #ffffff; font-size: 3vw; } }