f@charset "UTF-8";
/*------------------------------------------------*/
/*---------------------COMMON---------------------*/
/*------------------------------------------------*/
/*--COLOR--*/
/*--TYPE--*/
html { font-size: 12px; color: #434051; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }

body { font-family: "Montserrat", sans-serif; font-size: .8em; line-height: 2em; }

h1, h2 { font-family: "Playfair Display", serif; font-size: 2.6em; line-height: 1.40425532em; margin-top: 0.46808511em; margin-bottom: 0.93617022em; }

@media only screen and (min-width: 1020px) { h1{ font-size: 3.6em; } h2 { font-size: 3.2em; } }

h1 { font-weight: bold; color: #ffffff; }

h2 { font-family: "Montserrat", sans-serif; color: #434051; font-weight: 300; }

h3, h4 { font-family: "Playfair Display", serif; font-size: 2em; line-height: 1.51724138em; margin-top: 0.75862069em; margin-bottom: 0.75862069em; }

h3 { color: #398aff; line-height: .75em; }

h4 { font-family: "Montserrat", sans-serif; }

h5 { font-family: "Montserrat", sans-serif; font-size: 1em; line-height: 1em; margin-top: 1em; margin-bottom: 0em; }

h6 { text-transform: uppercase; font-weight: 700; color: #b3b3b3; letter-spacing: .5px; font-size: 0.9em; margin-bottom: -1em; }

a { color: #ffffff; }

/*--BUTTON--*/
a.button { border: solid 3px #ffe36e; border-radius: 5px; padding: 7px 20px; font-size: 1.5em; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; display: inline-block; transition-duration: 0.3s; }

@media only screen and (max-width: 640px) { a.button { font-size: 1em; padding: 4px 10px; } }

a.button:hover, a.button:focus, a.button:active { background: #ffe36e; color: #434051; }

a.button.buttonLight { border: solid 3px #398aff; color: #434051; }

a.button.buttonLight:hover, a.button.buttonLight:focus, a.button.buttonLight:active { background: #398aff; color: #ffffff; }

/*--GRID--*/
.row, .grid { max-width: 1080px; margin: 0 auto; width: 90%; }

.grid { display: grid; }

.row { display: flex; }

/*--OTHER--*/
.line { border-top: solid 1px #e0e0e0; width: 100%; max-width: 1140px; margin: 0 auto; }

/*------------------------------------------------*/
/*----------------------NAV-----------------------*/
/*------------------------------------------------*/
nav { background: #398aff; width: 100%; z-index: 99; position: relative; transition: .5s; }

nav.removeShadow { box-shadow: none; }

/*--LOGO--*/
.navLogo { margin-top: 5px; }

@media only screen and (max-width: 640px) { .navLogo { margin-top: 25px; } }

.navLogo img { max-width: 175px; }

@media only screen and (max-width: 640px) { .navLogo img { max-width: 150px; } }

.logo { margin: 25px 20px; }

.logo img { height: 70px; }

/*--MENU--*/
nav .row .menu { flex-grow: 1; text-align: right; margin-top: -4px;}

@media only screen and (max-width: 640px) { nav .row .menu { flex-grow: initial; margin-bottom: 20px; } }

nav .row { align-items: center; height: 5em; padding-top: .5em; }

@media only screen and (max-width: 640px) { nav .row { flex-direction: column; justify-content: center; height: 6em;} }

.menu { margin-right: 20px; }

@media only screen and (max-width: 640px) { .menu { margin-right: initial; } }

.menu li { display: inline-block; padding: 0 13px; font-size: 1em; text-align: center; letter-spacing: 1px; font-weight: 600; }

@media only screen and (max-width: 640px) { .menu li { padding: 0 10px; margin: 0; font-size: .9em; } }

.menu li a { color: #ffffff; }

.menu li .bottomBar { transition: .3s; width: 0%; height: 3px; background: #ffe36e; margin: -3px auto 0 auto; }

.menu li:hover .bottomBar { width: 100%; }

.navShadow { background: linear-gradient(0deg, rgba(70, 167, 255, 0) 0%, rgba(67, 64, 81, 0.05) 100%); height: 200px; width: 100%; position: absolute; }

/*------------------------------------------------*/
/*-------------------HERO IMG---------------------*/
/*------------------------------------------------*/
.heroImg { background: #398aff; height: 57vw; top: 5em; }

@media only screen and (max-width: 720px) { .heroImg { height: 57vw; } }

@media only screen and (max-width: 640px) { .heroImg { height: 340px; } }

.heroImg:after { background: url(../img/waves/servicesWave1.svg); width: 100%; height: 22vw; content: ""; display: block; position: relative; bottom: 19vw; }

@media only screen and (max-width: 640px) { .heroImg:after { display: none; } }

.heroImg img { width: 100%; }

@media only screen and (max-width: 640px) { .heroImg img { display: none; } }

.heroImgFilled { background-size: cover !important; background-position: center center !important; width: 100%; }

.headlineRow { display: grid; grid-template-rows: 25% auto 30%; height: 57vw; }

@media only screen and (max-width: 860px) { .headlineRow { grid-template-rows: 10% auto; } }

@media only screen and (max-width: 640px) { .headlineRow { height: auto; padding: 40px 0; width: 85%; } }

@media only screen and (min-width: 1260px) { .headlineRow { grid-template-rows: 30% auto 30%; } }

@media only screen and (max-width: 640px) { .studioHeadlineRow { padding: 50px 0; } }

.caseStudyHeadlineRow { grid-template-rows: 40% auto 30%; }

@media only screen and (max-width: 700px) { .caseStudyHeadlineRow { grid-template-rows: 20% auto 30%; } }

@media only screen and (max-width: 640px) { .caseStudyHeadlineRow { height: 220px; padding: 80px 0 0 0; grid-template-rows: none; } }

@media only screen and (min-width: 1020px) { .caseStudyHeadlineRow { grid-template-rows: 30% auto 30%; } }

@media only screen and (min-width: 1260px) { .caseStudyHeadlineRow { grid-template-rows: 40% auto 30%; } }

.headlineWrapper { max-width: 380px; color: #ffffff; z-index: 9; grid-row-start: 2; grid-row-end: 2; }

@media only screen and (min-width: 1020px) { .headlineWrapper { max-width: 460px; } }

.headlineWrapper h1 { margin-top: .1em; }

@media only screen and (max-width: 640px) { .headlineWrapper h1 { font-size: 2.3em; } }

.headlineWrapper h5 { font-weight: 700; }

.headlineWrapper h5 span { color: #ffe36e; }

img.heroWave { bottom: -10px; display: block; position: absolute; }

.heroImgFilled { background: #434051; position: absolute; }

@media only screen and (max-width: 640px) { .portfolioHero { display: none; } }

/*------------------------------------------------*/
/*--------------FEATURED CASE STUDY---------------*/
/*------------------------------------------------*/
section.featuredCaseStudy { margin-top: -10%; }

@media only screen and (max-width: 640px) { section.featuredCaseStudy { margin-top: 0; } }

.featuredCaseStudy .row { justify-content: space-evenly; }

@media only screen and (max-width: 640px) { .featuredCaseStudy .row { width: 100%; flex-direction: column; } }

.portfolioCard { flex-basis: 45%; height: 500px; background: #e0e0e0; z-index: 2; border-radius: 10px; background-size: cover; display: flex; justify-content: center; align-items: center; }

@media only screen and (max-width: 960px) { .portfolioCard { flex-basis: 48%; } }

@media only screen and (max-width: 640px) { .portfolioCard { flex-basis: 240px; border-radius: 0; } }

.horizontalRight { background-position-x: right; }

.horizontalCenter { background-position-x: center; }

.horizontalLeft { background-position-x: left; }

.verticalTop { background-position-y: top; }

.verticalCenter { background-position-y: center; }

.verticalBottom { background-position-y: bottom; }

.portfolioCard-Overlay { background: white; color: #434051; text-align: center; padding: 25px 20px; border-radius: 2px; opacity: 0; display: inline-block; }

@media only screen and (max-width: 640px) { .portfolioCard-Overlay { opacity: 1; border-radius: 0; } }

.portfolioCard:hover .portfolioCard-Overlay { opacity: 1; transition: .5s; }

.portfolioCard-Overlay h3 { margin: 5px 0; color: #434051; }

@media only screen and (max-width: 640px) { .portfolioCard-Overlay h3 { font-size: 1.6em; ine-height: .25em; } }

.portfolioCard-Overlay h6 { color: #b3b3b3; }

@media only screen and (max-width: 640px) { .portfolioCard-Overlay h6 { font-size: .75em; } }

/*------------------------------------------------*/
/*---------------------ABOUT----------------------*/
/*------------------------------------------------*/
/*--ABOUT US WRAP--*/
.aboutAndServices { margin: 40px auto; max-width: 960px; }

@media only screen and (max-width: 640px) { .aboutAndServices { flex-direction: column; margin: 0 auto; } }

.aboutUsWrapper { flex-basis: 66%; padding: 20px; border-right: 1px solid #e0e0e0; margin: 0 20px 20px 20px; }

@media only screen and (max-width: 640px) { .aboutUsWrapper { border: none; } }

.aboutUsWrapper h1 { margin-top: 0; }

.aboutUsWrapper h5 { line-height: 1.8em; margin-bottom: 2.5em; margin-top: -1.3em; font-weight: 300; font-size: 1.1em; }

.servicesWrapper, .workHistoryWrapper, .educationHistoryWrapper { flex-basis: 33%; list-style: none; margin: 20px; align-self: center; }

.servicesWrapper a, .workHistoryWrapper a, .educationHistoryWrapper a { color: #434051; }

.servicesWrapper a:hover h3, .workHistoryWrapper a:hover h3, .educationHistoryWrapper a:hover h3 { text-decoration: underline; }

@media only screen and (max-width: 640px) { .servicesWrapper, .workHistoryWrapper, .educationHistoryWrapper { text-align: center; } }

@media only screen and (max-width: 640px) { .servicesWrapper { border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; padding: 20px; margin: 0; } }

section.about .line { color: #e0e0e0; }

@media only screen and (max-width: 640px) { section.about .line { display: none; } }

.clientTitle { margin-top: 40px; text-align: center; }

/*--CLIENT--*/
.row.clientLogos { justify-content: space-evenly; margin: 20px auto; }

@media only screen and (max-width: 640px) { .row.clientLogos { flex-wrap: wrap; } }

.row.clientLogos img { align-self: center; padding: 0 10px; }

@media only screen and (max-width: 640px) { .row.clientLogos img { padding: 20px; } }

/*------------------------------------------------*/
/*---------------------CTA------------------------*/
/*------------------------------------------------*/
img.ctaWave { display: block; bottom: -1px; position: relative; margin-top: 60px; }

@media only screen and (max-width: 640px) { img.ctaWave { display: none; } }

section.cta { background: #398aff; color: white; text-align: center; }

section.cta .row { padding: 0 0 100px 0; flex-direction: column; max-width: 460px; }

@media only screen and (max-width: 640px) { section.cta .row { padding: 20px 0 50px 0; } }

section.cta .row p { margin-bottom: 40px; }

/*------------------------------------------------*/
/*---------------------FOOT-----------------------*/
/*------------------------------------------------*/
footer { background: #434051; height: 200px; width: 100%; padding: 20px 0; }

@media only screen and (max-width: 640px) { footer { height: auto; } }

/*--TOP HALF--*/
footer .menu, footer .newsletterForm, footer .socialMediaWrapper, footer .copyright { flex-basis: 100%; }

@media only screen and (max-width: 640px) { footer .row { align-items: center; flex-direction: column; } }

footer .row:first-child { align-items: center; }

@media only screen and (max-width: 640px) { footer .row:first-child { flex-direction: column-reverse; } }

/*--SOCIAL--*/
footer .socialMediaWrapper { margin: 20px 0 0 20px; }

footer .socialMediaWrapper li { color: white; font-size: 2em; display: inline-block; margin-right: 10px; }

footer .socialMediaWrapper li a { color: #ffffff; }

footer .socialMediaWrapper li a:hover { color: #ffe36e; }

/*--COPYRIGHT--*/
footer .copyright { color: white; text-align: right; margin: 20px; }

@media only screen and (max-width: 640px) { footer .copyright { text-align: center; } }

/*------------------------------------------------*/
/*------------------------------------------------*/
/*----------------------------------------------------*/
/*------------------PORTFOLIO PAGE--------------------*/
/*----------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
.portfolioCaseStudy { margin-top: -56vw; min-height: 620px; }

@media only screen and (max-width: 640px) { .portfolioCaseStudy { margin-top: 0; min-height: initial; } }

.portfolioCaseStudy .row { flex-wrap: wrap; }

.portfolioCaseStudy .row .portfolioCard { margin: 10px; flex: 1 1 35%; }

.portfolioCaseStudy.illo .row .portfolioCard img { display: none; }

@media only screen and (max-width: 640px) { .portfolioCaseStudy .row .portfolioCard { margin: initial; flex: 1 1 240px; } }

.portfolioCaseStudy .row .large { flex-basis: 60%; }

.portfolioCaseStudy .row .full { flex-basis: 100%; }

@media only screen and (max-width: 640px) { .portfolioCaseStudy .row { width: 100%; flex-direction: column; }
  .portfolioCaseStudy .row .portfolioCard { margin: 0px; }
  .portfolioCaseStudy .row .large, .portfolioCaseStudy .row .full { flex-basis: 240px; } }

@media only screen and (max-width: 640px) { .portfolioCard.large, .portfolioCard.full { flex-basis: 240px; border-radius: 0; } }

.portfolioCard-Overlay h6 { display: inline; }

.portfolioCard-Overlay h6:not(:last-child):after { content: " · "; }


@media only screen and (max-width: 640px) { 
  .portfolioCaseStudy.illo .row a.portfolioCard { height: max-content; width: 100%; background-image: none !important; flex-basis: 100%;}
  .portfolioCaseStudy.illo .row .portfolioCard img { display: initial; width: 100%; } }

/*------------------------------------------------*/
/*------------------------------------------------*/
/*----------------------------------------------------*/
/*------------------CASE STUDY PAGE-------------------*/
/*----------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
.caseStudyContent { width: 90%; max-width: 960px; margin: 20px auto 0 auto; display: flex; flex-wrap: wrap; }

@media only screen and (max-width: 640px) { .caseStudyContent { width: 85%; margin: 50px auto; } }

.caseStudyContent .block { margin: 20px 0; width: 100%; display: flex; justify-content: center; }

@media only screen and (max-width: 640px) { .caseStudyContent .block { margin: 5px 0;} .caseStudyContent .block.stacked { flex-direction: column;}  .caseStudyContent .block.stacked div:first-child { margin-bottom: 5px; } }

.caseStudyContent .block h2 { margin-bottom: .4em; margin-top: 0; }

.caseStudyContent .block h6 { color: #b3b3b3; text-transform: none; font-size: .8em; line-height: 1em; letter-spacing: 0; font-weight: 500; border-top: solid 1px #e0e0e0; padding: 1em 0 .25em 0; margin-top: .5em; }

@media only screen and (max-width: 640px) { .caseStudyContent .block h6 { line-height: 1.5em; margin-bottom: 5px; } }

.caseStudyContent .block .img { border-radius: 10px; width: 100%; }

.caseStudyContent .block p { padding: 0 0 1.5em 0; }

.caseStudyContent .block .blockPWrapper { width: 60%; }

.caseStudyContent .block .blockPWrapper p:last-child, .caseStudyContent .block .blockPWrapper p:only-child { padding: 0; }

@media only screen and (max-width: 640px) { .caseStudyContent .block .blockPWrapper { width: 100%; margin-bottom: 20px; } }

.caseStudyContent .block .blockFullTitleWrapper { width: 60%; }

.caseStudyContent .block .blockFullTitleWrapper p:last-child { padding: 0; }

@media only screen and (max-width: 640px) { .caseStudyContent .block .blockFullTitleWrapper { width: 100%; margin-bottom: 20px; } }

.caseStudyContent .block .blockFullImgWrapper { width: 80%; }

@media only screen and (max-width: 640px) { .caseStudyContent .block .blockFullImgWrapper { width: 100%; } }

.caseStudyContent .block .blockHalfImgWrapper, .caseStudyContent .block .blockHalfTitleWrapper { flex: 1 1; margin: 0 15px; }

@media only screen and (max-width: 640px) { .caseStudyContent .block .blockHalfTitleWrapper { margin: 0; }}

.caseStudyContent .block .specialThanks { width: 60%; color: #b3b3b3; }

@media only screen and (max-width: 640px) { .caseStudyContent .block .specialThanks { width: 100%; } }

@media only screen and (max-width: 640px) { .blockImgText { flex-direction: column; }
  .blockImgText :first-child { margin-bottom: 10px; }
  .blockImgText.blockImgTextReverse { flex-direction: column-reverse; } }

.caseStudyContent .block:nth-child(2) { flex: 3 1; margin-right: 10%; }

.caseStudyContent .block:nth-child(2) .blockFullTitleWrapper { width: 100%; }

@media only screen and (max-width: 640px) { .caseStudyContent .block:nth-child(2) { flex: initial; margin-right: 0; } }

.projectInfo { padding: 10px 30px 20px 0; margin-left: 10%; min-width: 150px; }

.projectInfo h6 { margin: 1.5em 0 1em 0; }

.projectInfo h6 :first-child { margin-top: 0; }

.projectInfo h3 { margin: 0 0 .75em 0; }

.projectInfo a.button { padding: 4px 30px; font-size: 1em; }

.projectInfo .buttonWrapper { margin: 4em 0 1em 0; }

@media only screen and (max-width: 640px) { .projectInfo .buttonWrapper { margin: 2em 0; } }

@media only screen and (max-width: 640px) { .projectInfo { padding: 0; margin: 0; min-width: initial; } }

.arrowWrapper { justify-content: center; }

.arrowButton { height: 40px; width: 40px; border: solid 3px #398aff; border-radius: 100%; margin: 15px; transition-duration: 0.3s; }

.arrowButton.liveLink:hover { background: #398aff; cursor: pointer; }

.arrowButton.liveLink:hover img { filter: grayscale(100%) brightness(255); }

.arrowButton.deadLink { border: #e0e0e0; background: #e0e0e0; }

.arrowButton.deadLink img { filter: grayscale(100%) brightness(255); }

.previousArrow { transform: rotate(-90deg); }

.nextArrow { transform: rotate(90deg); }

.tooltip { position: relative; }

.tooltip :before, .tooltip :after { position: absolute; left: 50%; }

.tooltip :before { content: ""; border-width: 10px 8px 0 8px; border-style: solid; border-color: #ffe36e transparent transparent transparent; margin-left: -8px; top: -20px; }

.tooltip :after { content: "this is a test"; background: #ffe36e; top: -20px; font-size: 1.5em; width: 300px; margin-left: -150px; }

/*------------------------------------------------*/
/*------------------------------------------------*/
/*----------------------------------------------------*/
/*----------------------STUDIO PAGE-------------------*/
/*----------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
.aboutMeSidebar { flex: 1 2; min-width: 265px; max-width: 320px; border-right: solid 1px #e0e0e0; margin-right: 15px; }

.aboutMeSidebar .servicesWrapper, .aboutMeSidebar .workHistoryWrapper, .aboutMeSidebar .educationHistoryWrapper { padding-bottom: 10px; margin-left: 0; }

.aboutMeSidebar .servicesWrapper h3, .aboutMeSidebar .workHistoryWrapper h3, .aboutMeSidebar .educationHistoryWrapper h3 { font-size: 1.7em; }

.workHistoryWrapper h3, .workHistoryWrapper .date, .educationHistoryWrapper h3, .educationHistoryWrapper .date { display: inline-block; display: inline-block; color: #434051; }

.workHistoryWrapper h3:hover, .workHistoryWrapper .date:hover, .educationHistoryWrapper h3:hover, .educationHistoryWrapper .date:hover { text-decoration: none; }

.workHistoryWrapper h3, .educationHistoryWrapper h3 { margin-bottom: 0em; }

.workHistoryWrapper h5, .educationHistoryWrapper h5 { margin-top: 0em; margin-bottom: .7em; font-size: .8em; font-weight: 700; }

.workHistoryWrapper .date, .educationHistoryWrapper .date { font-family: "Playfair Display", serif; padding-left: 5px; }

.aboutMe { margin-left: 15px; flex: 2 1; }

.aboutMe p { padding: 0 0 1.5em 0; }

.aboutMe p :last-child { padding: 0; }

.aboutMe p strong { color: #398aff; font-weight: 600; }

@media only screen and (max-width: 640px) { .aboutMeContent.row { flex-direction: column-reverse; align-items: center; margin: 50px auto; }
  .aboutMeContent.row .aboutMe { margin-left: 0; }
  .aboutMeContent.row .aboutMeSidebar { margin-right: 0; border-right: none; } }

/*------------------------------------------------*/
/*------------------------------------------------*/
/*----------------------------------------------------*/
/*----------------------CONTACT DROP-------------------*/
/*----------------------------------------------------*/
/*------------------------------------------------*/
/*------------------------------------------------*/
.contactWrapper { background: #fafafa; position: absolute; top: -100vw; width: 100%; transition: 1s cubic-bezier(0.77, 0, 0.18, 1); z-index: 80; }

.contactVisible { top: 5em; box-shadow: 0px 50px 200px #434051; }

.contactWrapper .grid { width: 75%; max-width: 640px; grid-template-columns: auto auto; grid-template-rows: auto auto auto; }

.contactWrapper .grid h2 { grid-row: 2 / 2; grid-column: 1 / 1; }

.contactWrapper .grid p { grid-row: 2 / 2; grid-column: 2 / 2; }

.contactWrapper .grid .socialMediaWrapper { grid-row: 3 / 3; grid-column: 2 / 2; }

.yellowbar { height: 10px; width: 100%; margin: 40px 0 20px 0; background: #ffe36e; grid-row: 1 / 1; grid-column: 1 / 3; }

.contactWrapper h2 { margin: 0 20px 0 0; }

.contactWrapper .socialMediaWrapper { margin: 20px 0 30px 0; }

.contactWrapper .socialMediaWrapper li { color: #398aff; padding: 0 20px 0 5px; display: inline; }

.contactWrapper .socialMediaWrapper li.fas { padding: 0 5px 0 0; }

.contactWrapper:after { background: url(../img/waves/servicesWave3.svg); width: 100%; height: 12vw; content: ""; position: absolute; background-repeat: no-repeat; background-size: cover; left: -1px; }