/* Mobile Viewport Fix for iOS Safari */
:root {
  --mobile-vh: 1vh;
  --mobile-height: var(--mobile-height);
}

/* Modern browsers with dynamic viewport support */
@supports (height: 100dvh) {
  :root {
    --mobile-height: 100dvh;
  }
}

/* Fallback for browsers with small viewport support */
@supports (height: 100svh) and (not (height: 100dvh)) {
  :root {
    --mobile-height: 100svh;
  }
}

/* Safari Phone Number Fix - Prevent automatic blue styling */
a[href^="tel:"] {
  color: white !important;
  text-decoration: none !important;
  -webkit-text-decoration-color: transparent !important;
  text-decoration-color: transparent !important;
}

/* Disable Safari's automatic phone number detection styling */
.info,
.contact-info-wrap-responsive .info,
.contact-info-wrap .info {
  color: white !important;
  text-decoration: none !important;
}

/* Force white color for any automatically detected phone links */
.info a,
.contact-info-wrap-responsive .info a,
.contact-info-wrap .info a,
a[href^="tel:"],
a[x-apple-data-detectors="true"] {
  color: white !important;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  border-bottom: none !important;
}

@font-face {
  font-family: Qanoar;
  src: url('../fonts/729aee2ff45b8b7f4eb3c3e78bd28faf.woff2') format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Anybody;
  src: url('../fonts/Anybody-ExpandedRegular.otf') format("opentype"), url('../fonts/Anybody-Regular.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Anybody;
  src: url('../fonts/Anybody-SemiBold.otf') format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: CQanoar Personal Use;
  src: url('../fonts/Qanoar-Personal-Use.otf') format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  color: #333;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 1vh;
  font-weight: 700;
  line-height: 1;
}

h4 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: Qanoarpersonaluse;
  font-size: 1vh;
  font-weight: 700;
  line-height: 1;
}

.wrapper {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: var(--mobile-height);
  min-height: 250px;
  display: flex;
  position: fixed;
  inset: 0%;
}

.container {
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100vw;
  height: var(--mobile-height);
  padding: 5vh 10vw;
  display: flex;
}

.container.home {
  z-index: 25;
  justify-content: flex-end;
  padding-left: 5vw;
  padding-right: 5vw;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.container.contact {
  z-index: 25;
  opacity: 0;
  justify-content: space-between;
  align-items: flex-start;
  width: 50vw;
  margin-left: auto;
  padding: 17vh 5vw 8vh 0;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  overflow: scroll;
}

.menu-wrap {
  z-index: 50;
  justify-content: space-between;
  align-items: stretch;
  width: 100vw;
  margin-bottom: 0;
  padding: 5vh 5vw 4vh;
  transition: all .2s;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}

.menu-wrap.dark {
  color: #111;
}

.menu-wrap.hidden {
  transform: translate(0, -100%);
}

.menu-wrap.dopo {
  display: flex;
}

.text-wrap {
  margin-bottom: 2vh;
}

.body {
  color: #fff;
  background-color: #111;
  font-family: Qanoar, Arial, sans-serif;
  font-size: 1vh;
  line-height: 1;
}

.body.light {
  background-color: #fff;
}

.logo-imaginethis {
  width: 15vh;
  display: none;
}

.logo-imaginethis.dark {
  width: 9vw;
  min-width: 13em;
  display: block;
}

.logo-imaginethis.dark.dopo {
  display: none;
}

.logo-imaginethis.dark.dopo.oak {
  display: block;
}

.logo-imaginethis.white {
  width: 9vw;
  min-width: 13em;
  display: block;
}

.logo-wrap {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.logo-wrap.openmenu {
  margin-top: 5vh;
}

.logo-text {
  text-transform: uppercase;
  font-family: Anybody, Arial, sans-serif;
  font-size: .9vw;
}

.logo-text.dark {
  color: #111;
  font-size: .9vw;
}

.logo-text.white {
  font-size: .9vw;
}

.line-logo {
  background-color: #fff;
  min-width: 10px;
  height: 1px;
  margin-left: 1vw;
  margin-right: 1vw;
}

.line-logo.dark {
  background-color: #111;
}

.line-logo.oak {
  color: #111;
  background-color: #111;
}

.menu-items-wrap {
  z-index: 1;
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  display: none;
  position: relative;
}

.link {
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 5px;
  font-family: Anybody, Arial, sans-serif;
  font-size: min(.9vw, 46px);
  font-weight: 400;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.link.home-btn {
  cursor: pointer;
  padding-right: 15px;
}

.link.contactus-btn {
  cursor: pointer;
  padding-left: 12px;
  padding-right: 10px;
}

.link.works-btn {
  cursor: pointer;
  padding-right: 15px;
}

.link.back-to-home {
  cursor: pointer;
}

.hero-h4 {
  font-family: CQanoar Personal Use, Verdana, sans-serif;
  font-size: max(10px, 2.6vw);
  line-height: 2;
  display: inline-block;
}

.hero-h3 {
  z-index: 10;
  color: #fff0;
  margin-left: 1vw;
  font-family: Qanoar, Arial, sans-serif;
  font-size: max(16px, 4vw);
  line-height: 1.5;
  display: inline-block;
  position: relative;
}

.code {
  display: none;
}

.oval-gray {
  z-index: -1;
  opacity: .8;
  background-image: radial-gradient(circle, #fff3, #0000 69%);
  width: 95em;
  height: 95em;
  margin-top: 15vh;
  margin-right: 10vw;
  position: absolute;
}

.oval-gray.bigger {
  width: 120em;
  height: 120em;
  margin-right: 0;
}

.oval-gray.smaller {
  opacity: .4;
  width: 80em;
  height: 80em;
  margin-top: 20vh;
  margin-right: 15vw;
}

.oval-gray.smaller.blue {
  opacity: .3;
  background-image: radial-gradient(circle, #00fff733, #0000 69%);
  margin-top: 5vh;
  margin-right: 5vw;
}

.root {
  z-index: 1;
  pointer-events: none;
  position: fixed;
  inset: 0%;
}

.works-text {
  line-height: 2.2;
}

.works-text.bottom {
  position: absolute;
  bottom: -100%;
}

.works-text.dark {
  color: #111;
}

.menu-line {
  background-color: #fff;
  width: 90%;
  height: 1px;
  transition: all .6s cubic-bezier(.215, .61, .355, 1);
  position: absolute;
  inset: auto auto 0% 2%;
  transform: translate(-110%);
}

.menu-line.hovered {
  transform: translate(0%);
}

.contactus-text {
  line-height: 2.2;
}

.contactus-text.bottom {
  position: absolute;
  bottom: -100%;
}

.contactus-text.bottom.footer {
  bottom: -200%;
}

.contactus-text.dark {
  color: #111;
}

.contactus-text.footer {
  font-size: clamp(13px, .7vw, 35px);
}

.logo-btn {
  cursor: pointer;
}

.contact-h4 {
  padding-bottom: .5vw;
  font-family: CQanoar Personal Use, Verdana, sans-serif;
  font-size: .85vw;
}

.info {
  text-transform: uppercase;
  font-family: Anybody, Arial, sans-serif;
  font-size: 1.55vw;
  line-height: 1.7;
}

.divider-contact {
  background-color: #5f5f5f;
  width: 100%;
  height: 1px;
}

.contact-info-wrap {
  z-index: 25;
  position: relative;
}

.contact-form {
  z-index: 20;
  width: 100%;
  position: relative;
}

.script-code {
  display: none;
}

.label {
  text-transform: uppercase;
  width: 30%;
  margin-bottom: 0;
  font-family: Anybody, Arial, sans-serif;
  font-size: 1.1vw;
  font-weight: 400;
}

.label.message {
  padding-top: 1vh;
}

.label.focused {
  font-weight: 400;
}

.textarea {
  color: #fff;
  background-color: #fff0;
  border: 0 solid #000;
  border-bottom: 2px solid #fff;
  width: 75%;
  font-family: Anybody, Arial, sans-serif;
  font-size: 1.5em;
}

.textarea:focus {
  border-bottom-color: #fff;
}

.form-field {
  color: #fff;
  background-color: #fff0;
  border: 0 solid #000;
  width: 75%;
  margin-bottom: 0;
  font-family: Anybody, Arial, sans-serif;
  font-size: .8vw;
}

.form-line {
  border-bottom: 2px solid #fff;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
}

.form-line.message {
  border-bottom-width: 0;
  justify-content: center;
  align-items: flex-start;
  margin-top: 1vh;
}

.form-line.copy {
  margin-top: 2vh;
  padding-bottom: 5px;
}

.submit-button {
  text-transform: uppercase;
  background-color: #fff0;
  margin-top: 2vh;
  font-family: Anybody, Arial, sans-serif;
  font-size: 2em;
  font-weight: 600;
}

.form {
  flex-flow: column;
  justify-content: center;
  align-items: flex-end;
  display: flex;
}

.submit-button {
  font-size: 1.5vw;
}

.textarea-embed {
  color: #fff;
  width: 70%;
  font-family: Anybody, Arial, sans-serif;
  font-size: .8vw;
}

.form-arrow {
  width: auto;
  max-width: 0%;
  padding-bottom: 1%;
  padding-right: 0;
  transition: all .5s;
}

.form-arrow.focus {
  max-width: 100%;
  padding-right: 10px;
}

.form-arrow.focus-message {
  max-width: 100%;
  padding-top: .75vh;
  padding-bottom: 0%;
  padding-right: 10px;
}

.copy-text {
  text-transform: uppercase;
  width: 60%;
  margin-bottom: 0;
  font-family: Anybody, Arial, sans-serif;
  font-size: 1.1vw;
  font-weight: 400;
}

.copy-text.message {
  padding-top: 1vh;
}

.copy-text.focused {
  font-weight: 400;
}

.code-embed {
  width: 70%;
  margin-bottom: 5vh;
}

.copy-btn-embed {
  margin-bottom: 1%;
}

.text-block {
  color: #111;
  font-family: Anybody, Arial, sans-serif;
  font-size: 1.4em;
  font-weight: 600;
}

.success-message {
  background-color: #afd8d1;
}

.text-block-2 {
  color: #111;
  font-family: Anybody, Arial, sans-serif;
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.5;
}

.home-text {
  line-height: 2.2;
}

.home-text.bottom {
  position: absolute;
  bottom: -100%;
}

.home-text.bottom.footer {
  bottom: -200%;
}

.home-text.back {
  font-size: max(1vw, 1.1vh);
}

.home-text.dark {
  color: #111;
}

.home-text.footer {
  font-size: clamp(13px, .7vw, 35px);
}

.utility-page-wrap {
  z-index: 20;
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: var(--mobile-height);
  min-height: 200px;
  max-height: 100%;
  display: flex;
  position: relative;
  overflow: clip;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.root-not {
  width: 100vw;
  height: var(--mobile-height);
  position: fixed;
  inset: 0%;
}

.code-embed-2 {
  display: none;
}

.oval-gray404 {
  z-index: -1;
  opacity: .3;
  background-image: radial-gradient(circle, #fff3, #0000 69%);
  width: 145em;
  height: 145em;
  position: absolute;
}

.oval-gray404.bigger {
  width: 120em;
  height: 120em;
  margin-right: 0;
}

.oval-gray404.smaller {
  opacity: .4;
  width: 80em;
  height: 80em;
  margin-top: 20vh;
  margin-right: 15vw;
}

.oval-gray404.smaller.blue {
  opacity: .3;
  background-image: radial-gradient(circle, #00fff733, #0000 69%);
  margin-top: 5vh;
  margin-right: 5vw;
}

.oval-gray4044 {
  z-index: -1;
  opacity: .8;
  background-image: radial-gradient(circle, #fff3, #0000 69%);
  width: 95em;
  height: 95em;
  margin-top: 15vh;
  margin-right: 10vw;
  position: absolute;
}

.oval-gray4044.bigger {
  width: 120em;
  height: 120em;
  margin-right: 0;
}

.oval-gray4044.smaller {
  opacity: .1;
  width: 125em;
  height: 125em;
  margin-right: 0;
}

.oval-gray4044.smaller.blue {
  opacity: .3;
  background-image: radial-gradient(circle, #00fff733, #0000 69%);
  margin-top: 5vh;
  margin-right: 5vw;
}

.oval-gray40444 {
  z-index: -1;
  opacity: .8;
  background-image: radial-gradient(circle, #fff3, #0000 69%);
  width: 95em;
  height: 95em;
  margin-top: 15vh;
  margin-right: 10vw;
  position: absolute;
}

.oval-gray40444.bigger {
  width: 120em;
  height: 120em;
  margin-right: 0;
}

.oval-gray40444.smaller {
  opacity: .4;
  width: 80em;
  height: 80em;
  margin-top: 20vh;
  margin-right: 15vw;
}

.oval-gray40444.smaller.blue {
  opacity: .1;
  background-image: radial-gradient(circle, #00fff733, #0000 69%);
  width: 95em;
  height: 95em;
  margin-right: 0;
}

.wrapper-404 {
  z-index: 10;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.notfound-text {
  text-transform: uppercase;
  font-family: Anybody, Arial, sans-serif;
  font-size: 7vw;
  font-weight: 600;
}

.text-block-3 {
  margin-bottom: 3vh;
}

.home-text-wrap {
  margin-right: 1vw;
}

.arrow-home {
  width: 1.2vw;
}

.homebtn-wrap {
  display: flex;
}

.portfolio-wrap {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 100vw;
  height: var(--mobile-height);
  min-height: 250px;
  padding-left: 2vw;
  padding-right: 2vw;
  display: flex;
  position: relative;
  overflow: clip;
}

.bottom-section {
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  display: flex;
  overflow: clip;
}

.middle-section {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  position: static;
}

.portfolio-image-div {
  width: 86%;
  height: 72vh;
}

.arrow-edge {
  z-index: 20;
  cursor: pointer;
  width: 6%;
  position: relative;
}

.arrow-code {
  justify-content: center;
  align-items: center;
  display: flex;
}

.arrow-code.right {
  width: 6vw;
}

.arrow-portfolio {
  cursor: pointer;
  width: 90%;
  transition: width .2s;
}

.arrow-portfolio:hover {
  width: 100%;
}

.arrow-portfolio.left {
  z-index: 20;
  position: relative;
}

.portfolio-title {
  color: #111;
  text-align: center;
  font-size: 4em;
  line-height: 1.9;
}

.portfolio-title.oakley {
  margin-bottom: -1.5vh;
  padding-bottom: .8vh;
  padding-left: .2vw;
  padding-right: .2vw;
  font-size: 2.5vw;
  line-height: 2.4;
}

.portfolio-title.dopo {
  color: #fff;
  width: 100%;
  padding-bottom: .8vh;
  padding-left: .2vw;
  padding-right: .2vw;
  font-size: 2.5vw;
}

.read-casestudy {
  color: #111;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  font-family: Anybody, Arial, sans-serif;
  font-size: 1.6em;
  text-decoration: none;
  display: flex;
}

.cta-text {
  margin-right: 1em;
  font-size: 1vw;
}

.cta-text.white {
  color: #fff;
}

.cta-arrow-port {
  width: 1.5vw;
  height: 1.5vw;
  margin-top: -1%;
}

.intro-anim-portfolio {
  z-index: 2147483647;
  width: 100vw;
  height: var(--mobile-height);
  position: fixed;
  inset: 0%;
  overflow: clip;
}

.intro-anim-portfolio.finished {
  pointer-events: none;
  display: block;
}

.oval-white {
  opacity: 1;
  background-image: radial-gradient(circle, #fff 57%, #0000 69%);
  width: 80vmax;
  height: 80vmax;
  margin-top: 0;
  margin-right: 0;
  position: absolute;
  inset: auto auto -40% -40%;
  transform: scale(1);
}

.oval-white.bigger {
  width: 120em;
  height: 120em;
  margin-right: 0;
}

.oval-white.smaller {
  opacity: .4;
  width: 80em;
  height: 80em;
  margin-top: 20vh;
  margin-right: 15vw;
}

.oval-white.smaller.blue {
  opacity: .3;
  background-image: radial-gradient(circle, #00fff733, #0000 69%);
  margin-top: 5vh;
  margin-right: 5vw;
}

.oval-white.right {
  opacity: 1;
  width: 105em;
  height: 105em;
  position: absolute;
  inset: -40% -40% auto auto;
}

.oval-white.middle {
  opacity: 1;
  width: 120vmax;
  height: 120vmax;
  position: absolute;
  inset: auto;
}

.oval-white.bottom-middle {
  opacity: 1;
  position: absolute;
  inset: auto -40% -40% auto;
}

.oval-white.top-right {
  opacity: 1;
  position: absolute;
  inset: -40% auto auto -40%;
}

.oval-white.middle-bot {
  opacity: 1;
  position: absolute;
  inset: auto 10% -40% auto;
}

.oval-white.rigt-bot {
  left: -18%;
}

.oval-white.middle-top {
  opacity: 1;
  top: -40%;
  bottom: auto;
  left: 10%;
}

.code-embed-3 {
  display: none;
}

.infro-anim {
  z-index: 2147483647;
  width: 100vw;
  height: var(--mobile-height);
  position: fixed;
  inset: 0%;
  overflow: clip;
}

.infro-anim.finished, .infro-anim.not-visible {
  display: none;
}

.oakley-img {
  width: 55vw;
}

.image-wrap {
  z-index: 0;
  cursor: pointer;
  justify-content: flex-start;
  align-items: center;
  width: 192vw;
  display: flex;
  position: absolute;
}

.ok-wrap {
  justify-content: center;
  align-items: center;
  width: 96vw;
  height: 100%;
  padding-top: 8vh;
  padding-bottom: 8vh;
  display: flex;
}

.portfolio-title-wrap {
  flex-flow: column;
  display: flex;
  position: relative;
}

.portfolio-title-bottom {
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  padding-bottom: 5vh;
  padding-left: 8vw;
  padding-right: 8vw;
  display: flex;
  position: absolute;
  top: auto;
  left: 0%;
  right: 0%;
}

.portfolio-title-bottom.dopo {
  transform: translate(0, 100%);
}

.portfolio-title-bottom.oakley {
  padding-left: 5vw;
  padding-right: 5vw;
}

.oakley-bottom-copy {
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  padding-bottom: 5vh;
  display: flex;
  position: absolute;
  top: auto;
  left: 0%;
  right: 0%;
}

.portfolio-bg-img {
  z-index: -1;
  background-image: url('../images/Oakley-port-bg.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: var(--mobile-height);
  position: fixed;
  inset: 0%;
}

.portfolio-bg-img.dopo {
  z-index: -2;
  background-image: url('../images/dopo-bg.jpg');
  background-position: 50%;
  background-size: cover;
}

.hero-section {
  z-index: 2;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100vw;
  height: auto;
  min-height: var(--mobile-height);
  margin-bottom: 0;
  padding-bottom: 0;
  display: flex;
  position: relative;
}

.dopo-bottom {
  justify-content: flex-start;
  align-items: flex-start;
  height: 22vh;
  padding-bottom: 10vh;
  padding-left: 10vw;
  padding-right: 10vw;
  font-size: 4em;
  display: flex;
  position: relative;
}

.dopo-bottom.oak {
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  height: 40vh;
  padding-top: 12vh;
  padding-left: 5vw;
  padding-right: 5vw;
  box-shadow: 0 0 5px 2px #a5a5a533;
}

.dopo-bottom.dopo {
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  height: auto;
  padding: 5vh 5vw 0;
}

.hero-mid-dopo {
  background-image: url('../images/BG-Dopo-darker-more.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: center;
  align-items: flex-end;
  height: 55vh;
  display: flex;
}

.hero-mid-dopo.oak {
  background-image: url('../images/Oakley-port-bg.jpg');
  background-position: 50%;
  background-size: cover;
  flex: 1;
  justify-content: center;
  align-items: flex-end;
}

.dopo-title-hero {
  white-space: nowrap;
  word-break: keep-all;
  width: 42%;
  margin-top: -2vh;
  line-height: 2;
}

.dopo-title-hero.oakley {
  color: #111;
  white-space: normal;
  word-break: normal;
  width: 70%;
  margin-top: 2vh;
  font-size: 3vw;
}

.dopo-title-hero.dopo {
  width: 70%;
  font-size: 3vw;
}

.dopo-text {
  width: 34%;
  font-family: Anybody, Arial, sans-serif;
  font-size: .35em;
  font-weight: 400;
  line-height: 2.8;
}

.dopo-text.oakley {
  color: #111;
  width: 100%;
  padding-top: 5vh;
  padding-left: 0;
  font-size: max(12px, 1.2vw);
}

.dopo-text.dopo {
  width: 70%;
  padding-top: 3vw;
  font-size: max(12px, 1.2vw);
  line-height: 2.4;
}

.video {
  width: 50vw;
}

.dopo-main-vid {
  z-index: 10;
  justify-content: center;
  align-items: flex-end;
  height: auto;
  display: none;
  position: absolute;
  inset: 0%;
}

.video-wrap {
  width: 100%;
  padding-top: 56%;
  position: relative;
  overflow: hidden;
}

.video-wrap.oak {
  min-height: 30vh;
  padding-top: 54.76%;
}

.video-container {
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 47vw;
  margin-bottom: -5vh;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 5px 2px #a0a0a033;
}

.video-container.dopo {
  width: 47vw;
  margin-bottom: -5vh;
}

.cta-casestudy-wrap {
  justify-content: center;
  align-items: center;
  width: 16vw;
  height: 16vw;
  display: flex;
  position: relative;
}

.cta-casestudy-wrap.final {
  width: 100%;
  height: 100%;
}

.cta-casestudy-wrap.hero {
  width: 16vw;
  height: 16vw;
}

.darkgray-circle {
  border: 1px solid #3f3f3f;
  border-radius: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.darkgray-circle.lighter {
  border-color: #979797;
  width: 85%;
  height: 85%;
  position: absolute;
  inset: auto;
}

.darkgray-circle.lighter.oak, .darkgray-circle.lighter.oak-copy {
  border-color: #bbb;
}

.darkgray-circle.oak {
  border-color: #ececec;
}

.darkgray-circle.oak.darker {
  border-color: #e0e0e0;
}

.cta-middle-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.arrow-cta {
  width: 1.5em;
  display: none;
}

.casestudy-cta-final {
  text-decoration: none;
  transition: all .5s;
  position: absolute;
  inset: -12vh 10vw auto auto;
}

.casestudy-cta-final:hover {
  transform: scale(1.05);
}

.casestudy-cta-final.final {
  justify-content: center;
  align-items: center;
  width: 18vw;
  height: 18vw;
  position: static;
}

.casestudy-cta-final.oak {
  top: 6vh;
}

.cta-text-casestudy-final {
  color: #fff;
  text-transform: uppercase;
  margin-top: 1em;
  font-family: Anybody, Arial, sans-serif;
  font-size: .4em;
  text-decoration: none;
}

.cta-text-casestudy-final.final, .cta-text-casestudy-final.final.oak {
  font-size: 2em;
}

.cta-text-casestudy-final.final.dopo {
  font-size: 1.2vw;
}

.cta-text-casestudy-final.oak {
  color: #111;
  font-size: .25em;
}

.mobile-view-div {
  z-index: 1;
  width: 100vw;
  height: var(--mobile-height);
  position: relative;
}

.mob-video {
  width: 100%;
  height: 100%;
}

.explainer-text {
  text-align: center;
  text-transform: uppercase;
  font-family: Anybody, Arial, sans-serif;
  font-size: .8vw;
  position: absolute;
  inset: 8vh 0% auto;
}

.explainer-text.oak {
  color: #111;
  font-size: .8vw;
}

.embed-arrow-cta-final {
  color: #fff;
  width: 1.5em;
  height: 1.5em;
}

.embed-arrow-cta-final:hover {
  transform: scale(1.1);
}

.embed-arrow-cta-final.final {
  width: 9em;
  height: 9em;
}

.embed-arrow-cta-final.final.oak {
  width: 8em;
  height: 8em;
}

.embed-arrow-cta-final.final.dopo {
  width: 4.7vw;
  height: 4.7vw;
}

.embed-arrow-cta-final.oak {
  color: #111;
  width: 1.2em;
  height: 1.2em;
}

.build-section {
  width: 100vw;
  height: auto;
  min-height: max(320px, var(--mobile-height));
  padding: 20vh 5vw 10vh;
  position: relative;
}

.build-section.oak {
  max-height: 1400px;
  box-shadow: 0 0 5px 2px #a5a5a533;
}

.title-casestudy {
  text-align: right;
  font-size: 2.7vw;
  line-height: 2;
  display: inline-block;
}

.title-casestudy.right {
  padding-right: 1em;
  font-size: 3vw;
}

.title-casestudy.oak {
  color: #111;
  font-size: 3vw;
}

.title-casestudy.dopo {
  font-size: 3vw;
}

.title-wrap {
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.title-wrap.right {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  position: relative;
}

.star-icon-embed {
  width: 50px;
  margin-top: -9%;
  margin-left: 2vw;
}

.star-icon-embed.bottom {
  width: 50px;
  margin-top: 0;
  position: absolute;
  bottom: -57%;
  right: -5%;
}

.star-icon-embed.bottom.oak.moved {
  margin-top: -10%;
  position: static;
  inset: 0% auto auto 0%;
}

.star-icon-embed.abs {
  position: absolute;
  bottom: -10vh;
  right: 5vw;
}

.star-icon-embed.abs.oak {
  margin-top: -10%;
  position: relative;
  inset: auto;
}

.h2-casestudy {
  text-align: right;
  text-transform: uppercase;
  margin-top: 1em;
  font-family: Anybody, Arial, sans-serif;
  font-size: 1.4vw;
  font-weight: 400;
}

.dopo-text-body {
  width: 65%;
  margin-top: 6em;
  font-family: Anybody, Arial, sans-serif;
  font-size: max(12px, 1.2vw);
  font-weight: 400;
  line-height: 2.4;
}

.dopo-text-body.longer {
  width: 75%;
}

.dopo-text-body.longer.oak {
  margin-top: 6em;
}

.dopo-text-body.oak {
  color: #111;
  width: 80%;
  margin-top: 4em;
  margin-left: auto;
  font-size: max(12px, 1.2vw);
}

.dopo-text-body.oak.details {
  width: 100%;
  margin-top: 2em;
}

.dopo-text-body.oak.decision {
  text-align: center;
  width: 100%;
  margin-top: 3em;
}

.dopo-text-body.oak.left {
  margin-top: 8em;
  margin-left: 0;
}

.dopo-text-body.dopo {
  font-size: max(12px, 1.2vw);
  line-height: 2.4;
}

.image-wrap-startingpoint {
  justify-content: space-between;
  align-items: center;
  margin-top: 10em;
  padding-left: 5vw;
  padding-right: 5vw;
  display: flex;
  position: relative;
}

.blender-dopo {
  width: 76%;
  box-shadow: 0 0 8px 5px #a1a1a133;
}

.dopo-real-image {
  width: 26%;
  position: absolute;
  inset: -10% 5vw auto auto;
  box-shadow: 0 0 8px 5px #a1a1a133;
}

.bg-oval-blue {
  opacity: .23;
  pointer-events: none;
  background-image: radial-gradient(circle, #4391ff, #4391ff00 66%);
  width: 120em;
  height: 120em;
  position: absolute;
  inset: -25% auto auto -20%;
}

.bg-oval-blue.texturing {
  z-index: -1;
  top: -25%;
  left: 20%;
}

.bg-oval-blue.texturing.oak {
  top: -30%;
  right: auto;
}

.bg-oval-blue.scrollll {
  z-index: -1;
  top: -21%;
  left: -1%;
}

.bg-oval-blue.scrollll.helmet {
  top: -56%;
  left: -28%;
}

.bg-oval-blue.scrollll.colorconfig {
  top: -62%;
  left: auto;
  right: -28%;
}

.bg-oval-blue.cta {
  left: 30%;
}

.bg-oval-blue.casestudy {
  top: -45%;
  left: -5%;
}

.bg-oval-blue.oak {
  opacity: .14;
  background-image: radial-gradient(circle, #43d0ff, #4391ff00 66%);
  width: 50em;
  height: 50em;
  top: -14%;
  left: auto;
  right: 5%;
}

.texturing-section {
  z-index: 5;
  width: 100vw;
  min-height: max(320px, var(--mobile-height));
  margin-top: 25vh;
  margin-bottom: -1vh;
  padding-bottom: 10vh;
  padding-left: 5vw;
  padding-right: 5vw;
  position: relative;
}

.texturing-body-wrap {
  align-items: center;
  margin-top: 10vh;
  display: flex;
}

.texturing-body-wrap.oak {
  justify-content: space-between;
  margin-top: 6vh;
}

.texturing-body-wrap.dopo {
  justify-content: space-between;
  align-items: center;
  padding-left: 5vw;
  padding-right: 5vw;
}

.texturing-body-wrap-left {
  width: 40%;
}

.texturing-body-wrap-left.right {
  width: 58%;
  padding-left: 3vw;
}

.texturing-body-wrap-left.right.dopo {
  width: 46%;
}

.texturing-body-wrap-left.dopo {
  width: 45%;
}

.dopo-remder-image {
  margin-top: -10vh;
}

.dopo-remder-image.mob {
  display: none;
}

.dopo-remder-image.dopo {
  width: 100%;
  margin-top: 0;
}

.explainer-text-notabsolute {
  text-align: center;
  text-transform: uppercase;
  font-family: Anybody, Arial, sans-serif;
  position: static;
  inset: 8vh 0% auto;
}

.explainer-text-notabsolute.bottom-padding {
  margin-bottom: 2em;
  font-size: .8vw;
}

.explainer-text-notabsolute.bottom-padding.oak {
  color: #111;
  font-size: .8vw;
}

.explainer-text-notabsolute.dopo {
  font-size: .9vw;
}

.dopo-maps {
  justify-content: space-between;
  align-items: stretch;
  margin-top: 3vh;
  margin-bottom: 4vh;
  display: flex;
}

.dopo-maps.bottom {
  margin-top: 0;
  margin-bottom: 0;
}

.dopo-maps.mid {
  margin-bottom: 2vh;
}

.dopomapimage {
  width: 22%;
}

.dopomapimage.tester {
  width: 100%;
  margin: -1px;
}

.imgholder {
  width: 22%;
  overflow: clip;
}

.design-section {
  z-index: 2;
  width: 100vw;
  min-height: var(--mobile-height);
  max-height: 1400px;
  padding: 25vh 5vw 15vh;
  position: relative;
  box-shadow: 0 2px 5px #a5a5a533;
}

.design-section.dopo {
  box-shadow: none;
  min-height: max(320px, var(--mobile-height));
  padding-left: 5vw;
  padding-right: 5vw;
}

.wrap-to-cut-edges {
  overflow: clip;
}

.wrap-to-cut-edges.oak {
  z-index: 2;
  margin-top: -1vh;
  padding-top: 1vh;
  position: relative;
}

.text-wrap-design {
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  margin-bottom: 10vh;
  display: flex;
  position: relative;
}

.img-section {
  margin-top: 7em;
  display: flex;
}

.left-img-wrap {
  width: 50%;
}

.left-img-wrap.left {
  padding-right: 3em;
}

.left-img-wrap.right {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  padding-left: 3em;
}

.left-img-wrap.right.flex {
  display: flex;
}

.dopo-screen-finished, .dopo-screen-beginning {
  width: 100%;
  box-shadow: 0 0 5px 2px #7a7a7a33;
}

.dopo-screen-beginning.no-shadow {
  box-shadow: none;
  width: auto;
  height: 60%;
  max-height: 60%;
}

.scroll-section {
  min-height: 320px;
  max-height: 1600px;
  padding: 25vh 5vw 20vh;
  position: relative;
}

.main-wrap-scroll {
  justify-content: center;
  align-items: center;
  padding-top: 5vh;
  display: flex;
}

.scrollvideo-contain {
  width: 60%;
  padding-right: 2em;
}

.known-facts-contain {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 40%;
  padding-left: 2vw;
  display: flex;
}

.dopo-text-body-knonwfacts {
  width: 100%;
  font-family: Anybody, Arial, sans-serif;
  font-size: max(12px, 1.2vw);
  font-weight: 400;
  line-height: 2.2;
}

.star-icon-embed-facts {
  width: 5em;
  margin-top: 4%;
  margin-bottom: 4%;
  margin-left: 0;
}

.star-icon-embed-facts.bottom {
  margin-top: 0;
  position: absolute;
  bottom: -57%;
  right: -5%;
}

.star-icon-embed-facts.abs {
  position: absolute;
  bottom: -10vh;
  right: 5vw;
}

.scroll-video-aspect-div {
  width: 100%;
  padding-top: 64.95%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 5px 2px #4b4a4a33;
}

.hidden-detail-section {
  width: 100vw;
  min-height: max(320px, 70vh);
  max-height: 1400px;
  margin-top: 10vh;
  padding-bottom: 5vh;
  padding-left: 5vw;
  padding-right: 5vw;
  position: relative;
}

.color-swap-video-contain {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 54.76%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 5px 2px #80808033;
}

.color-video-contain {
  width: 80%;
  margin-top: 8em;
  margin-left: auto;
  margin-right: auto;
}

.final-section {
  justify-content: center;
  align-items: stretch;
  width: 100vw;
  height: auto;
  min-height: max(320px, var(--mobile-height));
  max-height: 1400px;
  margin-top: 20vh;
  padding-bottom: 10vh;
  display: block;
  position: relative;
}

.upper-part-final {
  padding-bottom: 10vh;
  padding-left: 5vw;
  padding-right: 5vw;
}

.upper-part-final.oak {
  z-index: 1;
  background-color: #fff;
  min-height: 40vh;
  padding-bottom: 8vh;
  position: relative;
  box-shadow: 0 4px 5px #a5a5a533;
}

.final-video-bg {
  background-image: url('../images/Oakley-port-bg.jpg');
  background-position: 50%;
  background-size: cover;
  height: auto;
  min-height: 55vh;
  position: relative;
}

.final-video-bg.dopo {
  background-image: url('../images/BG-Dopo-darker-more.jpg');
  background-repeat: no-repeat;
  position: absolute;
  inset: auto 0% 0%;
}

.final-video-bg.oakk {
  min-height: 70vh;
  position: absolute;
  inset: auto 0% 0%;
}

.final-video-wrap {
  padding-top: 56%;
  position: relative;
  box-shadow: 0 0 5px 2px #97979733;
}

.final-video-contain {
  width: 66vw;
  margin-left: auto;
  margin-right: auto;
  position: static;
  inset: -14% 0% auto;
}

.final-video-contain.oak, .final-video-contain.dopo {
  margin-top: -10vh;
}

.cta-section {
  background-color: #fff;
  flex-flow: column;
  justify-content: space-between;
  width: 100vw;
  height: var(--mobile-height);
  padding: 13vh 5vw;
  display: flex;
  position: relative;
  overflow: clip;
}

.cta-section.dopo {
  background-color: #111;
  height: auto;
  min-height: max(320px, var(--mobile-height));
  padding-left: 5vw;
  padding-right: 5vw;
}

.cta-main-text {
  text-align: left;
  width: 80%;
  font-size: 4em;
  line-height: 2.2;
  display: inline-block;
}

.cta-main-text.right {
  padding-right: 1em;
}

.cta-main-text.oak {
  color: #111;
}

.cta-main-text.dopo {
  font-size: 3.2vw;
}

.final-cta-wrap {
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-bottom: 10vh;
  display: flex;
}

.cta-bottomtext {
  text-align: center;
  font-family: Anybody, Arial, sans-serif;
  font-size: 2.3em;
}

.cta-bottomtext.oak {
  color: #111;
}

.cta-bottomtext.dopo {
  font-size: 1.6vw;
  line-height: 1.5;
}

.bottom-wrap-edges {
  z-index: 1;
  margin-top: -1vh;
  padding-top: 1vh;
  position: relative;
  overflow: clip;
}

.next-section {
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100vw;
  height: var(--mobile-height);
  min-height: max(320px, var(--mobile-height));
  display: flex;
  position: relative;
}

.next-text {
  text-transform: uppercase;
  font-family: Anybody, Arial, sans-serif;
  font-size: 2.8em;
}

.next-text.oak {
  color: #111;
}

.next-text.dopo {
  font-size: 1.4vw;
}

.next-contain {
  padding-top: 13vh;
  padding-left: 5vw;
  padding-right: 5vw;
}

.oakley-next-reference-contain {
  cursor: pointer;
  flex: 1;
}

.next-title-contain {
  justify-content: center;
  align-items: center;
  padding-top: 4vh;
  padding-left: 10vw;
  padding-right: 10vw;
  display: flex;
}

.okaley-reference-title {
  text-align: center;
  font-size: 4.4em;
  line-height: 2;
  display: inline-block;
}

.okaley-reference-title.oak {
  color: #111;
  font-size: 3.7em;
}

.okaley-reference-title.dopo {
  font-size: 2.8vw;
}

.arrow-ebed-icon {
  color: #fff;
  width: 7em;
  height: 6em;
  margin-top: 2%;
  margin-left: 3em;
}

.arrow-ebed-icon:hover {
  transform: scale(1.1);
}

.arrow-ebed-icon.final {
  width: 9em;
  height: 9em;
}

.arrow-ebed-icon.oak {
  color: #111;
}

.arrow-ebed-icon.dopo {
  width: 50px;
  height: 50px;
}

.oakley-next-casestudy {
  color: #fff;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  position: relative;
}

.oakley-next-img {
  pointer-events: none;
  width: 50vw;
  position: absolute;
  inset: 25% auto auto 25%;
}

.menu-bg-gradient {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background-image: linear-gradient(#ffffffbf, #ffffffbf 40%, #1110 93%);
  transition: opacity .3s;
  position: absolute;
  inset: 0%;
}

.menu-bg-gradient.visible {
  opacity: 1;
}

.link-block {
  width: 100%;
  height: 100%;
}

.footer-contain {
  padding-left: 5vw;
  padding-right: 5vw;
}

.footer-line {
  background-color: #252525;
  width: 100%;
  height: 1px;
}

.footer-line.oak {
  background-color: #eee;
}

.logo-wrap-footer {
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 33%;
  margin-top: 2vh;
  padding-bottom: 2vh;
  display: none;
  position: relative;
}

.logo-imaginethis-footer {
  width: 15vh;
  display: none;
}

.logo-imaginethis-footer.dark.oak {
  display: block;
}

.logo-imaginethis-footer.white {
  width: 11vh;
  font-size: clamp(115px, 6vw, 308px);
  display: block;
}

.logo-text-footer {
  text-transform: uppercase;
  font-family: Anybody, Arial, sans-serif;
  font-size: clamp(11px, .6vw, 30px);
}

.logo-text-footer.dark {
  color: #111;
}

.footer-text-copy {
  font-family: Anybody, Arial, sans-serif;
  font-size: 1em;
}

.footer-text-copy.oak {
  color: #111;
  font-size: 1.1em;
}

.footer-text-copy.dopo {
  font-size: 1vw;
}

.footer-bottom-contain {
  justify-content: center;
  align-items: center;
  padding-top: 2vh;
  padding-bottom: 2vh;
  display: flex;
}

.footer-right {
  display: none;
}

.menu-line-footer {
  background-color: #272727;
  width: 1px;
  height: 100%;
  min-height: 20px;
}

.menu-line-footer.oak {
  background-color: #eee;
}

.oak-real-image {
  width: 37%;
  position: static;
  inset: -10% 0% auto auto;
}

.glasses-mesh {
  width: 61%;
  box-shadow: 0 0 8px 5px #a1a1a133;
}

.details-bottom-contain {
  justify-content: space-between;
  padding-top: 6vh;
  display: flex;
}

.oak-shadow {
  width: 57%;
  padding-top: 4vh;
}

.oak-real-pic {
  width: 40%;
  margin-top: 0;
}

.aspect-div-firstvid {
  padding-top: 64.95%;
  position: relative;
  overflow: hidden;
}

.old-design-section {
  background-image: url('../images/Oakley-port-bg.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  max-height: 1400px;
  padding-top: 15vh;
  padding-bottom: 15vh;
}

.old-vid-wrap {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

.old-vid-contain {
  padding-top: 55.7%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 5px 2px #a5a5a533;
}

.distrupt-section {
  background-color: #fff;
  padding: 17vh 5vw;
  box-shadow: 0 0 5px 2px #a5a5a533;
}

.distrupt-edges {
  border: 1px solid #ddd;
  padding: 6vh 10vw;
}

.huuumark {
  color: #111;
  text-align: center;
  text-transform: uppercase;
  font-family: Anybody, Arial, sans-serif;
  font-size: 4em;
  font-weight: 600;
}

.huuumark.text {
  margin-top: 2vh;
  font-size: 4em;
}

.what-needed-fixing-section {
  margin-top: 20vh;
}

.fixing-bottom-wrap {
  justify-content: space-between;
  margin-top: 15vh;
  display: flex;
}

.fixing-side-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 22%;
  margin-top: -10vh;
  display: flex;
}

.seizepic {
  margin-top: 1vh;
}

.fixing-right-wrap {
  flex-flow: column;
  justify-content: space-between;
  padding-left: 4vw;
  display: flex;
}

.reason-why-broken-wrap {
  justify-content: flex-start;
  align-items: center;
  margin-top: 2vh;
  margin-bottom: 8vh;
  display: flex;
}

.number-broken {
  color: #111;
  width: auto;
  font-family: Anybody, Arial, sans-serif;
  font-size: 4vw;
}

.reason-text-wrap {
  padding-left: 2vw;
}

.problem-title {
  color: #111;
  text-transform: uppercase;
  font-family: Anybody, Arial, sans-serif;
  font-size: 1.6vw;
  font-weight: 600;
}

.problem-title.startover {
  text-align: center;
  padding-top: 3vh;
  font-size: 3em;
  display: none;
}

.problem-title.startover.notmob {
  font-size: 2vw;
  display: block;
}

.problem-body-text {
  color: #111;
  padding-top: 2vh;
  font-family: Anybody, Arial, sans-serif;
  font-size: max(12px, 1.2vw);
  line-height: 2;
}

.anybod-font {
  font-family: Anybody, Arial, sans-serif;
}

.big-img-designprocess {
  width: 100%;
}

.color-config-section {
  justify-content: center;
  align-items: stretch;
  width: 100vw;
  height: var(--mobile-height);
  max-height: 1400px;
  margin-top: 3vh;
  padding-bottom: 10vh;
  display: block;
  position: relative;
}

.final-video-bg-nothere {
  height: auto;
  min-height: 55vh;
  position: relative;
}

.final-video-bg-nothere.oak {
  min-height: 60vh;
}

.mob-menu {
  z-index: 1;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  min-width: 4vw;
  padding: 2em;
  display: flex;
  position: relative;
}

.mobmenu-icon {
  width: 6vw !important;
  min-width: 45px !important;
  position: absolute;
  margin-right: 15px !important;
}

/* Extra specific selectors for mobile menu icons */
.mob-menu .mobmenu-icon,
.menu-wrap .mobmenu-icon,
.menu-wrap.oak .mobmenu-icon,
.menu-wrap.dopo .mobmenu-icon {
  width: 6vw !important;
  min-width: 45px !important;
  margin-right: 15px !important;
}

.mobmenu-icon.dark, .responsiveness-embed {
  display: none;
}

.casestudy-cta-hero {
  text-decoration: none;
  transition: all .5s;
  position: absolute;
  inset: -12vh 10vw auto auto;
}

.casestudy-cta-hero:hover {
  transform: scale(1.05);
}

.casestudy-cta-hero.final {
  width: 30em;
  height: 30em;
  position: static;
}

.casestudy-cta-hero.oak {
  top: 3vh;
  right: 5vw;
}

.casestudy-cta-hero.dopo {
  top: 3vw;
  right: 5vw;
}

.embed-arrow-cta-hero {
  color: #fff;
  width: 1.5em;
  height: 1.5em;
}

.embed-arrow-cta-hero:hover {
  transform: scale(1.1);
}

.embed-arrow-cta-hero.final {
  width: 9em;
  height: 9em;
}

.embed-arrow-cta-hero.oak {
  color: #111;
  width: 4.5vw;
  height: 4.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.embed-arrow-cta-hero.oak svg {
  width: 100%;
  height: 100%;
  fill: #111 !important;
  stroke: #111 !important;
}

.embed-arrow-cta-hero.dopo {
  justify-content: center;
  align-items: center;
  width: 4.5vw;
  height: 4.5vw;
  display: flex;
}

.embed-arrow-cta-hero.dopo svg {
  width: 100%;
  height: 100%;
  fill: #fff !important;
  stroke: #fff !important;
  display: flex;
}

.cta-text-casestudy-hero {
  color: #fff;
  text-transform: uppercase;
  margin-top: 1em;
  font-family: Anybody, Arial, sans-serif;
  font-size: .4em;
  text-decoration: none;
}

.cta-text-casestudy-hero.final {
  font-size: 2em;
}

.cta-text-casestudy-hero.oak {
  color: #111;
  font-size: max(11px, 1.1vw);
}

.cta-text-casestudy-hero.dopo {
  margin-top: 1.5em;
  font-size: max(11px, 1.1vw);
}

.menu-open-wrap {
  z-index: 55;
  background-color: #fff;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--mobile-height);
  transition: all .2s;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
  transform: translate(0, -110%);
  box-shadow: 0 2px 5px #0003;
}

.menu-open-wrap.menu-open {
  transform: translate(0);
}

.one-menu-item-wrap {
  flex-flow: column;
  width: 100%;
  padding-top: 5vh;
  padding-bottom: 5vh;
  display: flex;
}

.all-menu-items-wrap {
  background-color: #181818;
  border-radius: 5px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 80%;
  margin: 5vh 10vw 1vh;
  padding: 1vh 3vw 2vh;
  display: flex;
}

.all-menu-items-wrap.light {
  background-color: #f7f7f7;
}

.one-menu-item {
  color: #111;
  text-decoration: none;
}

.menu-text {
  text-transform: uppercase;
  margin-bottom: 3vh;
  font-family: Anybody, Arial, sans-serif;
  font-size: 2vw;
}

.menu-text.white {
  color: #fff;
  font-size: 2vw;
}

.menu-line-open {
  background-color: #111;
  width: 100%;
  height: 1px;
}

.menu-line-open.white {
  color: #fff;
  background-color: #fff;
}

.menu-cross-div {
  margin-bottom: 1vh;
  padding: 2em;
}

.close-icon {
  width: 5em;
  height: 5em;
}

.logo-wrap-copy {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.menu-open-wrap-dopo {
  z-index: 55;
  background-color: #fff;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--mobile-height);
  transition: all .2s;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
  transform: translate(0, -110%);
  box-shadow: 0 2px 5px #0003;
}

.menu-open-wrap-dopo.menu-open {
  background-color: #111;
  transform: translate(0);
}

.logo-imaginethis-dopo {
  width: 15vh;
  display: none;
}

.logo-imaginethis-dopo.dark {
  width: 9vw;
  min-width: 13em;
  display: block;
}

.logo-imaginethis-dopo.dark.dopo {
  display: none;
}

.logo-imaginethis-dopo.dark.dopo.oak, .logo-imaginethis-dopo.white {
  display: block;
}

.logo-text-dopo {
  text-transform: uppercase;
  font-family: Anybody, Arial, sans-serif;
  font-size: 1.5em;
}

.logo-text-dopo.dark {
  color: #111;
  font-size: 1.2em;
}

.close-icon-white {
  width: 5em;
  height: 5em;
}

.menu-bg-gradient-dopo {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  background-image: linear-gradient(#111, #111 40%, #1110 93%);
  transition: opacity .3s;
  position: absolute;
  inset: 0%;
}

.menu-bg-gradient-dopo.visible {
  opacity: 1;
}

.portofio-bottom-buttons-wrap {
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5vh;
  padding-left: 5vw;
  padding-right: 5vw;
  display: none;
  position: absolute;
  inset: auto 0% 0%;
}

.bottom-wrap-switch {
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  display: flex;
}

.oakley-phone, .embed-dopo-menu, .embed-oak-menu, .menu-routing-script {
  display: none;
}

.contact-info-wrap-responsive {
  width: 44.9vw;
}

.h1 {
  margin-top: 10vh;
  font-family: Anybody, Arial, sans-serif;
  position: static;
}

.seo-wrap {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.intro-anim-home {
  z-index: 2147483647;
  pointer-events: none;
  width: 100vw;
  height: var(--mobile-height);
  position: fixed;
  inset: 0%;
  overflow: clip;
}

.intro-anim-home.finished {
  opacity: 0;
  pointer-events: none;
  display: block;
}

.oval-white-home {
  opacity: 0;
  background-image: radial-gradient(circle, #fff 57%, #0000 69%);
  width: 105vh;
  height: 105vh;
  margin-top: 0;
  margin-right: 0;
  position: absolute;
  inset: auto auto -20% -17%;
  transform: scale(0);
}

.oval-white-home.bigger {
  width: 120em;
  height: 120em;
  margin-right: 0;
}

.oval-white-home.smaller {
  opacity: .4;
  width: 80em;
  height: 80em;
  margin-top: 20vh;
  margin-right: 15vw;
}

.oval-white-home.smaller.blue {
  opacity: .3;
  background-image: radial-gradient(circle, #00fff733, #0000 69%);
  margin-top: 5vh;
  margin-right: 5vw;
}

.oval-white-home.right {
  width: 80vmax;
  height: 80vmax;
  position: absolute;
  inset: -40% -40% auto auto;
}

.oval-white-home.middle {
  width: 80vmax;
  height: 80vmax;
  position: absolute;
  inset: -40% auto auto 10%;
}

.oval-white-home.bottom-middle {
  width: 80vmax;
  height: 80vmax;
  position: absolute;
  inset: auto -40% -40% auto;
}

.oval-white-home.top-right {
  width: 80vmax;
  height: 80vmax;
  display: none;
  position: absolute;
  inset: -22% auto auto -15%;
}

.oval-white-home.middle-bot {
  width: 80vmax;
  height: 80vmax;
  position: absolute;
  inset: auto 40% -40% auto;
}

.oval-white-home.rigt-bot {
  left: -18%;
}

.oval-white-home.center {
  width: 120vmax;
  height: 120vmax;
  display: block;
  inset: auto;
}

.oval-white-home.top-left {
  inset: -40% auto auto -40%;
}

.outro-anim-portfolio {
  z-index: 2147483647;
  opacity: 0;
  pointer-events: none;
  width: 100vw;
  height: var(--mobile-height);
  position: fixed;
  inset: 0%;
  overflow: clip;
}

.outro-anim-portfolio.finished {
  pointer-events: none;
  display: block;
}

.oval-white-outro {
  opacity: 1;
  background-image: radial-gradient(circle, #fff 57%, #0000 69%);
  width: 80vmax;
  height: 80vmax;
  margin-top: 0;
  margin-right: 0;
  position: absolute;
  inset: auto auto -40% -40%;
  transform: scale(0);
}

.oval-white-outro.bigger {
  width: 120em;
  height: 120em;
  margin-right: 0;
}

.oval-white-outro.smaller {
  opacity: .4;
  width: 80em;
  height: 80em;
  margin-top: 20vh;
  margin-right: 15vw;
}

.oval-white-outro.smaller.blue {
  opacity: .3;
  background-image: radial-gradient(circle, #00fff733, #0000 69%);
  margin-top: 5vh;
  margin-right: 5vw;
}

.oval-white-outro.right {
  opacity: 1;
  width: 105em;
  height: 105em;
  position: absolute;
  inset: -40% -40% auto auto;
}

.oval-white-outro.middle {
  opacity: 1;
  width: 120vmax;
  height: 120vmax;
  position: absolute;
  inset: auto;
}

.oval-white-outro.bottom-middle {
  opacity: 1;
  position: absolute;
  inset: auto -40% -40% auto;
}

.oval-white-outro.top-right {
  opacity: 1;
  position: absolute;
  inset: -40% auto auto -40%;
}

.oval-white-outro.middle-bot {
  opacity: 1;
  position: absolute;
  inset: auto 10% -40% auto;
}

.oval-white-outro.rigt-bot {
  left: -18%;
}

.oval-white-outro.middle-top {
  opacity: 1;
  top: -40%;
  bottom: auto;
  left: 10%;
}

.outro-anim-home {
  z-index: 2147483647;
  pointer-events: none;
  width: 100vw;
  height: var(--mobile-height);
  position: fixed;
  inset: 0%;
  overflow: clip;
}

.outro-anim-home.finished {
  opacity: 0;
  pointer-events: none;
  display: block;
}

.oval-white-home-outro {
  opacity: 1;
  background-image: radial-gradient(circle, #fff 57%, #0000 69%);
  width: 105vh;
  height: 105vh;
  margin-top: 0;
  margin-right: 0;
  position: absolute;
  inset: auto auto -20% -17%;
  transform: scale(1);
}

.oval-white-home-outro.bigger {
  width: 120em;
  height: 120em;
  margin-right: 0;
}

.oval-white-home-outro.smaller {
  opacity: .4;
  width: 80em;
  height: 80em;
  margin-top: 20vh;
  margin-right: 15vw;
}

.oval-white-home-outro.smaller.blue {
  opacity: .3;
  background-image: radial-gradient(circle, #00fff733, #0000 69%);
  margin-top: 5vh;
  margin-right: 5vw;
}

.oval-white-home-outro.right {
  width: 80vmax;
  height: 80vmax;
  position: absolute;
  inset: -40% -40% auto auto;
}

.oval-white-home-outro.right.visible {
  opacity: 100;
}

.oval-white-home-outro.right.hidden {
  opacity: 0;
  transform: scale(0);
}

.oval-white-home-outro.middle {
  width: 80vmax;
  height: 80vmax;
  position: absolute;
  inset: -40% auto auto 10%;
}

.oval-white-home-outro.middle.visible {
  opacity: 100;
}

.oval-white-home-outro.middle.hidden {
  opacity: 0;
  transform: scale(0);
}

.oval-white-home-outro.bottom-middle {
  width: 80vmax;
  height: 80vmax;
  position: absolute;
  inset: auto -40% -40% auto;
}

.oval-white-home-outro.bottom-middle.visible {
  opacity: 100;
}

.oval-white-home-outro.bottom-middle.hidden {
  opacity: 0;
  transform: scale(0);
}

.oval-white-home-outro.top-right {
  width: 80vmax;
  height: 80vmax;
  display: none;
  position: absolute;
  inset: -22% auto auto -15%;
}

.oval-white-home-outro.middle-bot {
  width: 80vmax;
  height: 80vmax;
  position: absolute;
  inset: auto 40% -40% auto;
}

.oval-white-home-outro.middle-bot.visible {
  opacity: 100;
}

.oval-white-home-outro.middle-bot.hidden {
  opacity: 0;
  transform: scale(0);
}

.oval-white-home-outro.rigt-bot {
  left: -18%;
}

.oval-white-home-outro.center {
  width: 120vmax;
  height: 120vmax;
  display: block;
  inset: auto;
}

.oval-white-home-outro.center.visible {
  opacity: 100;
}

.oval-white-home-outro.center.hidden {
  opacity: 0;
  transform: scale(0);
}

.oval-white-home-outro.top-left {
  inset: -40% auto auto -40%;
}

.oval-white-home-outro.top-left.visible {
  opacity: 100;
}

.oval-white-home-outro.top-left.hidden {
  opacity: 0;
  transform: scale(0);
}

.oval-white-home-outro.dark {
  color: #111;
  background-image: radial-gradient(circle, #111 57%, #0000 69%);
}

.oval-white-home-outro.visible {
  opacity: 1;
}

.oval-white-home-outro.hidden {
  opacity: 0;
  transform: scale(0);
}

.pre-loader {
  z-index: 2147483647;
  background-color: #111;
  justify-content: center;
  align-items: center;
  transition: all 1s;
  display: flex;
  position: fixed;
  inset: 0%;
}

.pre-loader.finished {
  pointer-events: none;
  display: none;
  transform: translate(0, -110%);
}

.pre-loader.show {
  background-color: #111;
}

.pre-loader.hide {
  opacity: 0;
  transform: translate(0, -110%);
}

.loading-text {
  z-index: 1;
  letter-spacing: 4px;
  font-size: 4vw;
  position: relative;
}

.outro-anim-home-dark {
  pointer-events: none;
  width: 100vw;
  height: var(--mobile-height);
  position: fixed;
  inset: 0%;
  overflow: clip;
}

.outro-anim-home-dark.finished {
  opacity: 0;
  pointer-events: none;
  display: block;
}

.preloader-content {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.preloader-content.finished-loading {
  opacity: 0;
}

.fireflies-embed {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.loading-text-wrap, .dots-container {
  display: flex;
}

.dot {
  z-index: 1;
  letter-spacing: 4px;
  font-size: 4vw;
  position: relative;
}

.dark-ovals-lottie {
  width: 100vw;
  height: var(--mobile-height);
  position: absolute;
  inset: 0%;
}

.div-block {
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg');
  background-position: 0 0;
  background-size: auto;
}

@media screen and (min-width: 1280px) {
  .container.home {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .container.contact {
    padding-right: 10vw;
    overflow: clip;
  }

  .menu-wrap {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .logo-imaginethis.dark {
    width: max(120px, 8.5vw);
    min-width: auto;
  }

  .logo-imaginethis.dark.menu {
    width: 15vh;
  }

  .logo-imaginethis.white {
    width: max(120px, 8.5vw);
  }

  .logo-text.dark, .logo-text.white {
    font-size: max(11px, .75vw);
  }

  .menu-items-wrap {
    display: flex;
  }

  .link {
    font-size: max(12px, .9vw);
  }

  .hero-h4 {
    font-size: 2.5vw;
  }

  .hero-h3 {
    font-size: 3.8vw;
  }

  .contactus-text.footer {
    font-size: clamp(12px, .7vw, 35px);
  }

  .contact-h4 {
    padding-bottom: 2vh;
    font-size: .8vw;
  }

  .info {
    font-size: 1.45vw;
  }

  .divider-contact {
    background-color: #fff;
  }

  .contact-form {
    overflow: clip;
  }

  .label {
    font-size: 1.2vw;
  }

  .form-field {
    font-size: 1vw;
  }

  .form-line, .form-line.copy {
    margin-bottom: 10px;
  }

  .submit-button {
    font-size: 1.4vw;
  }

  .copy-text {
    font-size: 1vw;
  }

  .home-text, .home-text.bottom {
    font-size: max(8px, .9vw);
  }

  .home-text.footer {
    font-size: clamp(12px, .7vw, 35px);
  }

  .portfolio-title.oakley, .portfolio-title.dopo {
    font-size: 2.5vw;
  }

  .cta-text {
    font-size: 1vw;
  }

  .cta-arrow-port {
    justify-content: center;
    align-items: center;
    width: 2vw;
    height: 2vw;
    margin-top: -2%;
    display: flex;
  }

  .oakley-img {
    width: min(60vw, var(--mobile-height));
  }

  .portfolio-title-bottom.oakley {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .hero-section {
    justify-content: flex-end;
    align-items: stretch;
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: clamp(15px, .8vw, 40px);
  }

  .dopo-bottom.oak {
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    height: 36vh;
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .dopo-bottom.dopo {
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .hero-mid-dopo {
    height: 60vh;
  }

  .dopo-title-hero.oakley {
    width: 43%;
    margin-top: -2vh;
    font-size: max(28px, 2vw);
  }

  .dopo-title-hero.dopo {
    width: 42%;
    font-size: max(28px, 2vw);
  }

  .dopo-text.oakley {
    width: 35%;
    padding-top: 0;
    padding-left: 3vw;
    font-size: max(12px, .8vw);
  }

  .dopo-text.dopo {
    width: 35%;
    font-size: max(12px, .8vw);
    line-height: 2.8;
  }

  .video-wrap.oak {
    min-height: auto;
  }

  .video-container {
    width: 45vw;
    min-width: auto;
    margin-bottom: -4vh;
  }

  .video-container.dopo {
    width: 45vw;
    min-width: auto;
  }

  .cta-casestudy-wrap {
    width: max(165px, 12vw);
    min-width: 140px;
    height: max(165px, 12vw);
    min-height: 140px;
  }

  .cta-casestudy-wrap.hero {
    width: max(165px, 12vw);
    height: max(165px, 12vw);
  }

  .casestudy-cta-final.final {
    width: 17vw;
    height: 17vw;
  }

  .casestudy-cta-final.oak {
    top: 4vh;
  }

  .cta-text-casestudy-final.final.oak {
    font-size: 1.9em;
  }

  .cta-text-casestudy-final.final.dopo {
    font-size: 1.1vw;
  }

  .cta-text-casestudy-final.oak {
    font-size: .4em;
  }

  .mobile-view-div {
    min-height: 750px;
  }

  .explainer-text, .explainer-text.oak {
    font-size: .7vw;
  }

  .embed-arrow-cta-final.final.oak {
    width: 8em;
    min-width: 60px;
    height: 8em;
    min-height: 60px;
  }

  .embed-arrow-cta-final.final.dopo {
    width: 5vw;
    height: 5vw;
  }

  .embed-arrow-cta-final.oak {
    width: 1.5em;
    min-width: 40px;
    height: 1.5em;
    min-height: 40px;
  }

  .build-section {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .build-section.oak {
    max-height: none;
  }

  .title-casestudy, .title-casestudy.right, .title-casestudy.oak, .title-casestudy.dopo {
    font-size: 2.6vw;
  }

  .star-icon-embed {
    width: clamp(96px, 5vw, 250px);
  }

  .star-icon-embed.bottom {
    width: min(5vw, 250px);
    bottom: -5.3vw;
    right: -4vw;
  }

  .h2-casestudy {
    font-size: 1.33vw;
  }

  .dopo-text-body {
    font-size: .9vw;
    line-height: 2.6;
  }

  .dopo-text-body.longer.oak {
    font-size: .9vw;
  }

  .dopo-text-body.oak {
    font-size: .8vw;
  }

  .dopo-text-body.oak.left {
    font-size: .9vw;
  }

  .dopo-text-body.dopo {
    font-size: .8vw;
    line-height: 2.6;
  }

  .texturing-section {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .explainer-text-notabsolute.bottom-padding {
    font-size: clamp(13px, .7vw, 35px);
  }

  .explainer-text-notabsolute.bottom-padding.oak, .explainer-text-notabsolute.dopo {
    font-size: .7vw;
  }

  .design-section {
    max-height: none;
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .design-section.dopo {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .scroll-section {
    max-height: none;
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .dopo-text-body-knonwfacts {
    font-size: .9vw;
    line-height: 2.6;
  }

  .hidden-detail-section {
    max-height: none;
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .final-section {
    max-height: none;
  }

  .upper-part-final {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .final-video-bg.oakk {
    min-height: 80vh;
  }

  .cta-section, .cta-section.dopo {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .cta-main-text.dopo {
    font-size: 2.1vw;
  }

  .cta-bottomtext.dopo {
    font-size: 1.2vw;
  }

  .next-text.dopo {
    font-size: 1.5vw;
  }

  .next-contain {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .okaley-reference-title.oak {
    font-size: 4.4em;
  }

  .okaley-reference-title.dopo {
    font-size: 2.3vw;
  }

  .arrow-ebed-icon.dopo {
    width: 4.8vw;
    height: 4.8vw;
  }

  .footer-contain {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .logo-wrap-footer {
    display: flex;
  }

  .footer-text-copy.oak {
    font-size: 1em;
  }

  .footer-text-copy.dopo {
    font-size: clamp(12px, .6vw, 30px);
  }

  .footer-bottom-contain {
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: 0;
  }

  .footer-right {
    display: block;
  }

  .old-design-section {
    max-height: none;
  }

  .distrupt-section {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .huuumark, .huuumark.text {
    font-size: 2.6vw;
  }

  .fixing-side-wrap {
    margin-top: -15vh;
  }

  .number-broken {
    font-size: 3.6vw;
  }

  .problem-title {
    font-size: 1.6vw;
  }

  .problem-title.startover.notmob {
    font-size: 2.2vw;
  }

  .problem-body-text {
    font-size: .8vw;
  }

  .color-config-section {
    height: var(--mobile-height);
    max-height: none;
  }

  .mob-menu, .responsiveness-embed {
    display: none;
  }

  .casestudy-cta-hero.oak {
    top: 4vh;
    right: 10vw;
  }

  .casestudy-cta-hero.dopo {
    right: 10vw;
  }

  .embed-arrow-cta-hero.oak, .embed-arrow-cta-hero.dopo {
    justify-content: center;
    align-items: center;
    width: 3.8vw;
    height: 3.8vw;
    display: flex;
  }

  .cta-text-casestudy-hero.oak {
    margin-top: 1.5em;
    font-size: .8vw;
  }

  .cta-text-casestudy-hero.dopo {
    font-size: .8vw;
  }

  .menu-open-wrap, .menu-open-wrap-dopo {
    display: none;
  }

  .logo-imaginethis-dopo.dark {
    width: 15vh;
    min-width: auto;
  }

  .logo-text-dopo.dark {
    font-size: 1.5em;
  }

  .hero-head-contain {
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }

  .code-embed-4 {
    justify-content: center;
    align-items: center;
    width: 2vw;
    height: 2vw;
    display: flex;
  }
}

@media screen and (min-width: 1920px) {
  .logo-imaginethis.dark, .logo-imaginethis.white {
    width: min(8.5vw, 460px);
  }

  .logo-text.dark {
    font-size: max(11px, .75vw);
  }

  .link, .link.home-btn, .link.works-btn {
    font-size: clamp(13px, .7vw, 36px);
  }

  .hero-h4 {
    font-size: 2.6vw;
  }

  .hero-h3 {
    font-size: 4vw;
  }

  .contactus-text.footer {
    font-size: clamp(12px, .7vw, 35px);
  }

  .contact-h4 {
    font-size: .75vw;
  }

  .info {
    font-size: 1.45vw;
  }

  .label {
    font-size: 1.2vw;
  }

  .form-field {
    height: 2.2vw;
    font-size: 1vw;
  }

  .submit-button {
    font-size: 1.4vw;
  }

  .copy-text {
    font-size: 1vw;
  }

  .home-text, .home-text.bottom {
    font-size: clamp(13px, .7vw, 36px);
  }

  .home-text.back {
    font-size: 1vw;
  }

  .home-text.dark {
    font-size: clamp(13px, .7vw, 36px);
  }

  .notfound-text {
    font-size: 7vw;
  }

  .arrow-home {
    width: 1.2vw;
  }

  .portfolio-title.oakley, .portfolio-title.dopo {
    font-size: 2.5vw;
  }

  .cta-text {
    font-size: 1vw;
  }

  .cta-arrow-port {
    margin-top: -2%;
  }

  .oakley-img {
    width: min(60vw, var(--mobile-height));
  }

  .dopo-bottom.oak {
    justify-content: flex-start;
    align-items: flex-end;
  }

  .dopo-title-hero.oakley {
    width: 44%;
    font-size: clamp(42px, 2.2vw, 112px);
  }

  .dopo-title-hero.dopo {
    font-size: clamp(42px, 2.2vw, 112px);
  }

  .dopo-text.oakley, .dopo-text.dopo {
    font-size: clamp(15px, .8vw, 40px);
  }

  .video-container {
    width: 45vw;
    min-width: auto;
  }

  .cta-casestudy-wrap, .cta-casestudy-wrap.hero {
    width: min(12vw, 614px);
    height: min(12vw, 614px);
  }

  .casestudy-cta-final.final {
    width: clamp(306px, 15.9vw, 814px);
    height: clamp(306px, 15.9vw, 814px);
  }

  .cta-text-casestudy-final.final.oak {
    font-size: 2em;
  }

  .cta-text-casestudy-final.final.dopo {
    font-size: clamp(20px, 1.07vw, 54px);
  }

  .explainer-text, .explainer-text.oak {
    font-size: clamp(13px, .7vw, 35px);
  }

  .embed-arrow-cta-final.final.oak {
    width: 7.5em;
    min-width: 100px;
    height: 7.5em;
    min-height: 100px;
  }

  .embed-arrow-cta-final.final.dopo {
    width: clamp(91px, 4.75vw, 243px);
    height: clamp(91px, 4.75vw, 243px);
  }

  .embed-arrow-cta-final.final.dopo.oak {
    min-width: auto;
    min-height: auto;
  }

  .title-casestudy {
    font-size: clamp(50px, 2.6vw, 133px);
  }

  .title-casestudy.oak {
    font-size: 2.6vw;
  }

  .h2-casestudy {
    font-size: clamp(26px, 1.33vw, 68px);
  }

  .dopo-text-body, .dopo-text-body.longer.oak, .dopo-text-body.oak, .dopo-text-body.oak.decision, .dopo-text-body.dopo {
    font-size: clamp(17px, .9vw, 46px);
  }

  .explainer-text-notabsolute.bottom-padding.oak, .explainer-text-notabsolute.dopo {
    font-size: clamp(13px, .7vw, 35px);
  }

  .dopo-screen-beginning {
    width: 100%;
  }

  .dopo-text-body-knonwfacts {
    font-size: clamp(17px, .9vw, 46px);
  }

  .cta-section {
    height: auto;
    min-height: var(--mobile-height);
  }

  .cta-main-text.oak, .cta-main-text.dopo {
    font-size: clamp(40px, 2.1vw, 108px);
  }

  .cta-bottomtext.oak, .cta-bottomtext.dopo {
    font-size: clamp(23px, 1.2vw, 62px);
  }

  .next-text.dopo {
    font-size: clamp(24px, 1.4vw, 76px);
  }

  .okaley-reference-title.dopo {
    font-size: clamp(44px, 2.3vw, 118px);
  }

  .arrow-ebed-icon.dopo {
    width: clamp(72px, 3.7vw, 190px);
    height: clamp(72px, 3.7vw, 190px);
  }

  .huuumark {
    font-size: 3vw;
  }

  .huuumark.text {
    font-size: 2.6vw;
  }

  .fixing-bottom-wrap {
    width: 100%;
  }

  .number-broken {
    font-size: 4vw;
  }

  .problem-title {
    font-size: 1.5vw;
  }

  .problem-title.startover.notmob {
    font-size: 2.2vw;
  }

  .problem-body-text {
    font-size: clamp(17px, .9vw, 46px);
  }

  .color-config-section {
    margin-top: 7vw;
  }

  .embed-arrow-cta-hero.oak, .embed-arrow-cta-hero.dopo {
    width: clamp(72px, 3.8vw, 194px);
    height: clamp(72px, 3.8vw, 194px);
  }

  .cta-text-casestudy-hero.oak, .cta-text-casestudy-hero.dopo {
    font-size: clamp(16px, .8vw, 40px);
  }

  .menu-open-wrap-dopo {
    background-color: #111;
  }
}

@media screen and (max-width: 991px) {
  .container.contact {
    padding-top: 15vh;
    padding-bottom: 5vh;
  }

  .logo-imaginethis.dark, .logo-imaginethis.white {
    width: 12vw;
  }

  .logo-text, .logo-text.dark, .logo-text.white {
    font-size: 8px;
  }

  .info {
    font-size: 1.45vw;
  }

  .form-field {
    padding-left: 8px;
    font-size: 16px;
  }

  .label {
    font-size: 14px;
  }

  .textarea {
    font-size: 16px;
  }

  .textarea::placeholder {
    font-size: 16px;
  }

  .form-line {
    height: 28px;
  }

  .submit-button {
    margin-top: 2vw;
    font-size: 1.4vw;
  }

  .cta-text {
    font-size: 1.1vw;
  }

  .cta-arrow-port {
    margin-top: -2%;
  }

  .hero-section {
    justify-content: space-between;
  }

  .dopo-bottom.oak {
    justify-content: center;
    align-items: flex-start;
    padding-top: 5vh;
    padding-bottom: 0;
  }

  .dopo-bottom.dopo {
    flex: 1;
    justify-content: center;
    align-items: flex-start;
    padding-bottom: 0;
  }

  .hero-mid-dopo {
    height: 55vh;
    min-height: 50vh;
  }

  .dopo-title-hero.oakley {
    font-size: 2.8vw;
  }

  .dopo-title-hero.dopo {
    width: 70%;
    font-size: 2.8vw;
  }

  .dopo-text.oakley {
    width: 75%;
    font-size: 11px;
    line-height: 2.4;
  }

  .dopo-text.dopo {
    width: 75%;
    font-size: 11px;
  }

  .video-wrap.oak {
    min-height: auto;
  }

  .video-container {
    margin-bottom: -7vh;
  }

  .video-container.dopo {
    width: 47vw;
    margin-bottom: -7vh;
  }

  .casestudy-cta-final.final {
    width: 150px;
    height: 150px;
  }

  .cta-text-casestudy-final.final.dopo {
    font-size: 10px;
  }

  .explainer-text, .explainer-text.oak {
    font-size: 7px;
  }

  .embed-arrow-cta-final.final.dopo {
    width: 40px;
    height: 40px;
  }

  .star-icon-embed.bottom {
    bottom: -91%;
    right: -4%;
  }

  .dopo-text-body {
    font-size: 9px;
  }

  .dopo-text-body.longer, .dopo-text-body.oak, .dopo-text-body.dopo {
    font-size: 11px;
  }

  .explainer-text-notabsolute.bottom-padding, .explainer-text-notabsolute.bottom-padding.oak, .explainer-text-notabsolute.dopo {
    font-size: 7px;
  }

  .design-section.dopo {
    padding-top: 12vw;
  }

  .scroll-section {
    max-height: none;
    padding-top: 15vw;
  }

  .dopo-text-body-knonwfacts {
    font-size: 11px;
  }

  .final-section {
    margin-top: 25vw;
  }

  .cta-bottomtext.dopo, .next-text.dopo {
    font-size: 12px;
  }

  .okaley-reference-title.dopo {
    font-size: 20px;
  }

  .arrow-ebed-icon.dopo {
    width: 40px;
    height: 40px;
  }

  .footer-text-copy.dopo {
    font-size: 7px;
  }

  .huuumark, .huuumark.text {
    font-size: 3vw;
  }

  .fixing-side-wrap {
    width: 50%;
  }

  .number-broken {
    font-size: 5vw;
  }

  .problem-title {
    font-size: 1.4vw;
  }

  .problem-title.startover.notmob {
    font-size: 2.5vw;
  }

  .problem-body-text {
    font-size: 9px;
  }

  .mobmenu-icon {
    width: 45px !important;
    margin-right: 12px !important;
  }

  .loading-text {
    font-size: 6vw;
  }

  .dot {
    font-size: 6vw;
  }

  .casestudy-cta-hero.oak, .casestudy-cta-hero.dopo {
    top: 4vw;
  }

  .embed-arrow-cta-hero.oak, .embed-arrow-cta-hero.dopo {
    justify-content: center;
    align-items: center;
    width: 5vw;
    height: 5vw;
    display: flex;
  }

  .cta-text-casestudy-hero.oak, .cta-text-casestudy-hero.dopo {
    font-size: 1vw;
  }

  .menu-open-wrap.menu-open {
    flex: 1;
    justify-content: space-between;
    height: var(--mobile-height);
  }

  .one-menu-item-wrap {
    flex: 1;
    justify-content: center;
    align-items: stretch;
    height: 100%;
    position: relative;
  }

  .all-menu-items-wrap {
    justify-content: space-around;
    height: 65vh;
    margin-top: 7vw;
    padding-top: 1vw;
    padding-bottom: 3vw;
  }

  .all-menu-items-wrap.light {
    height: 65vh;
    padding-top: 1vw;
    padding-bottom: 3vw;
  }

  .one-menu-item {
    flex: 1;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }

  .menu-text, .menu-text.white {
    margin-bottom: 0;
    font-size: 1.6vw;
  }

  .menu-line-open, .menu-line-open.white {
    position: absolute;
    inset: auto 0% 0%;
  }

  .menu-cross-div {
    margin-bottom: 2vw;
  }

  .close-icon {
    width: 36px;
    height: 36px;
  }

  .menu-open-wrap-dopo {
    justify-content: space-between;
    height: var(--mobile-height);
  }

  .close-icon-white {
    width: 36px;
    height: 36px;
  }
}

@media screen and (max-width: 767px) {
  .logo-imaginethis.dark {
    width: max(80px, 12vw);
    min-width: auto;
  }

  .logo-imaginethis.dark.menu {
    width: 9vw;
    min-width: 13em;
  }

  .logo-imaginethis.white {
    width: max(80px, 12vw);
  }

  .logo-text.dark {
    font-size: 8px;
  }

  .home-text.back {
    font-size: max(1vw, 3vh);
  }

  .arrow-home {
    width: max(1.2vw, 3vh);
  }

  .hero-section {
    height: var(--mobile-height);
    min-height: 320px;
  }

  .dopo-bottom.oak {
    justify-content: flex-end;
    align-items: flex-start;
  }

  .hero-mid-dopo {
    height: 50vh;
  }

  .dopo-text.oakley {
    width: 80%;
    font-size: 9px;
  }

  .dopo-text.dopo {
    font-size: 9px;
  }

  .video-wrap.oak {
    min-height: 10vh;
  }

  .video-container {
    width: 40vw;
    margin-bottom: -7vh;
  }

  .video-container.dopo {
    width: 40vw;
  }

  .casestudy-cta-final.final {
    width: 20vw;
    height: 20vw;
  }

  .cta-text-casestudy-final.final.dopo {
    font-size: 8px;
  }

  .mobile-view-div {
    min-height: 320px;
  }

  .embed-arrow-cta-final.final.dopo {
    width: 35px;
    height: 35px;
  }

  .build-section {
    height: auto;
    min-height: max(320px, var(--mobile-height));
  }

  .build-section.oak {
    min-height: 320px;
    max-height: none;
  }

  .title-casestudy, .title-casestudy.right, .title-casestudy.right.oak, .title-casestudy.oak, .title-casestudy.dopo {
    font-size: max(16px, 3vw);
  }

  .star-icon-embed.bottom {
    bottom: -100%;
  }

  .h2-casestudy {
    font-size: max(10px, 1.4vw);
  }

  .dopo-text-body.longer {
    width: 100%;
    font-size: 9px;
  }

  .dopo-text-body.oak {
    font-size: 9px;
  }

  .dopo-text-body.dopo {
    width: 100%;
    font-size: 9px;
  }

  .texturing-section {
    min-height: 320px;
  }

  .texturing-body-wrap-left.right {
    width: 100%;
    padding-left: 0;
  }

  .texturing-body-wrap-left.left {
    display: none;
  }

  .dopo-remder-image.mob {
    width: 50vw;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .design-section {
    min-height: 320px;
    max-height: none;
  }

  .design-section.dopo {
    min-height: max(320px, var(--mobile-height));
  }

  .scroll-section {
    min-height: 320px;
  }

  .dopo-text-body-knonwfacts {
    font-size: 9px;
  }

  .hidden-detail-section, .final-section {
    min-height: 320px;
    max-height: none;
  }

  .cta-section {
    min-height: 320px;
  }

  .cta-section.dopo {
    min-height: max(320px, var(--mobile-height));
  }

  .cta-bottomtext.oak {
    line-height: 2;
  }

  .next-section {
    height: max(320px, var(--mobile-height));
    min-height: 320px;
  }

  .next-text.oak {
    font-size: 2.4em;
  }

  .next-text.dopo.oak {
    font-size: 12px;
  }

  .okaley-reference-title.oak {
    font-size: 3.5em;
  }

  .okaley-reference-title.dopo.oak {
    font-size: 20px;
  }

  .footer-text-copy.oak {
    font-size: 1.2em;
  }

  .footer-text-copy.dopo.oak {
    font-size: 7px;
  }

  .old-design-section {
    max-height: none;
  }

  .problem-title {
    font-size: 2.1vw;
  }

  .problem-title.startover.notmob {
    font-size: 3.5vw;
  }

  .problem-body-text {
    font-size: 9px;
  }

  .color-config-section {
    min-height: 320px;
    max-height: none;
  }

  .mobmenu-icon {
    width: clamp(40px, 6em, 60px) !important;
    margin-right: 12px !important;
  }

  .loading-text {
    font-size: 5vw;
  }

  .dot {
    font-size: 5vw;
  }

  .menu-open-wrap {
    justify-content: space-between;
    height: var(--mobile-height);
  }

  .all-menu-items-wrap.light {
    margin-top: 5vw;
    padding-bottom: 2vw;
  }

  .menu-text {
    margin-top: 2vw;
    margin-bottom: 0;
    font-size: 1.6vw;
  }

  .close-icon {
    width: 6em;
    height: 6em;
  }

  .menu-open-wrap-dopo {
    justify-content: space-between;
    height: var(--mobile-height);
  }

  .close-icon-white {
    width: 6em;
    height: 6em;
  }
}

@media screen and (max-width: 479px) {
  .menu-wrap, .menu-wrap.dopo {
    display: flex;
  }

  .logo-imaginethis.dark {
    width: max(80px, 12vw);
    min-width: auto;
  }

  .logo-imaginethis.dark.menu {
    width: max(80px, 12vw);
  }

  .logo-imaginethis.white {
    width: max(80px, 12vw);
    min-width: auto;
  }

  .logo-text.dark {
    font-size: 8px;
  }

  .arrow-edge {
    width: 14%;
  }

  .oakley-img {
    width: 50vw;
  }

  .dopo-bottom.oak {
    padding-top: 8vh;
  }

  .dopo-title-hero.oakley {
    font-size: 2.8vw;
  }

  .dopo-text.oakley {
    font-size: 9px;
    line-height: 2.2;
  }

  .video-container {
    width: 40vw;
  }

  .cta-casestudy-wrap {
    width: 16vw;
    height: 16vw;
  }

  .casestudy-cta-final.final {
    width: 150px;
    height: 150px;
  }

  .cta-text-casestudy-final.final.oak {
    font-size: 9px;
  }

  .explainer-text.oak {
    font-size: 7px;
  }

  .embed-arrow-cta-final.final.oak {
    width: 50px;
    height: 50px;
  }

  .title-casestudy.right.oak, .title-casestudy.oak {
    font-size: max(16px, 3vw);
  }

  .dopo-text-body.oak, .dopo-text-body.oak.details {
    font-size: 9px;
  }

  .image-wrap-startingpoint {
    flex-flow: column;
    margin-top: 10vw;
    padding-left: 0;
    padding-right: 0;
  }

  .dopo-remder-image.mob {
    display: none;
  }

  .explainer-text-notabsolute.bottom-padding.oak {
    font-size: 7px;
  }

  .design-section {
    padding-bottom: 10vw;
  }

  .text-wrap-design {
    margin-bottom: 10vw;
  }

  .img-section {
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    margin-top: 5vw;
  }

  .left-img-wrap.left {
    width: 100%;
    padding-right: 0;
  }

  .left-img-wrap.right {
    width: 100%;
    margin-top: 5vw;
    padding-left: 0;
  }

  .dopo-screen-beginning.no-shadow {
    width: 50vw;
    height: 40%;
    margin-top: 5vw;
  }

  .final-section {
    margin-top: 45vw;
  }

  .final-video-contain {
    width: 90vw;
  }

  .cta-section {
    height: auto;
  }

  .cta-main-text.oak {
    font-size: 16px;
  }

  .cta-bottomtext.oak {
    font-size: 10px;
  }

  .next-text.oak {
    font-size: 8px;
  }

  .okaley-reference-title.oak {
    font-size: 11px;
  }

  .arrow-ebed-icon.oak {
    width: 20px;
    height: 20px;
  }

  .oakley-next-img {
    width: 80vh;
  }

  .footer-text-copy.oak {
    font-size: 4px;
  }

  .oak-real-image {
    width: 100%;
    margin-top: 5vw;
  }

  .glasses-mesh {
    width: 100%;
  }

  .details-bottom-contain {
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }

  .oak-shadow {
    width: 100%;
    padding-top: 10vw;
  }

  .oak-real-pic {
    width: 100%;
  }

  .old-design-section {
    padding-top: 15vw;
    padding-bottom: 15vw;
  }

  .old-vid-wrap {
    width: 80%;
  }

  .distrupt-section {
    padding-top: 15vw;
  }

  .huuumark {
    font-size: 12px;
  }

  .huuumark.text {
    font-size: 10px;
  }

  .what-needed-fixing-section {
    margin-top: 20vw;
  }

  .fixing-bottom-wrap {
    flex-flow: column;
    margin-top: 5vw;
  }

  .fixing-side-wrap {
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    width: 90vw;
    margin-top: 5vw;
  }

  .seizepic {
    width: 16%;
    margin-top: 3vh;
  }

  .fixing-right-wrap {
    margin-top: 10vw;
    padding-left: 0;
  }

  .number-broken {
    font-size: 20px;
  }

  .problem-title {
    font-size: 12px;
  }

  .problem-title.startover {
    font-size: 16px;
  }

  .problem-body-text {
    font-size: 9px;
  }

  .mobmenu-icon {
    width: 38px !important;
    margin-right: 10px !important;
  }

  .loading-text {
    font-size: 7vw;
  }

  .dot {
    font-size: 7vw;
  }

  .responsiveness-embed {
    display: none;
  }

  .embed-arrow-cta-hero.oak {
    width: 5vw;
    height: 5vw;
  }

  .cta-text-casestudy-hero.oak {
    font-size: 1vw;
  }

  .menu-open-wrap.menu-open {
    justify-content: space-between;
    align-items: center;
    min-height: var(--mobile-height);
  }

  .all-menu-items-wrap {
    flex: 1;
    padding: 3vh 5vw;
  }

  .menu-text {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 1vw;
    padding-bottom: 1vw;
    font-size: 10px;
  }

  .menu-text.white {
    font-size: 2.3vw;
  }

  .close-icon {
    width: 24px;
    height: 24px;
  }

  .menu-open-wrap-dopo.menu-open {
    justify-content: space-between;
    align-items: center;
    min-height: var(--mobile-height);
  }

  .logo-imaginethis-dopo.dark {
    min-width: 15em;
  }

  .logo-text-dopo.dark {
    font-size: 5px;
  }

  .close-icon-white {
    width: 24px;
    height: 24px;
  }

  .oakley-phone {
    width: 50vw;
    display: none;
  }

  .embed-dopo-menu {
    display: none;
  }
}


@font-face {
  font-family: 'Qanoar';
  src: url('../fonts/729aee2ff45b8b7f4eb3c3e78bd28faf.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Anybody';
  src: url('../fonts/Anybody-ExpandedRegular.otf') format('opentype'), url('../fonts/Anybody-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Anybody';
  src: url('../fonts/Anybody-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CQanoar Personal Use';
  src: url('../fonts/Qanoar-Personal-Use.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}