﻿
@font-face{font-family: inter; src: url('inter.woff2') format('woff2'); font-style: normal; font-display: swap}

*{color: #000; font-family: 'inter', Arial, sans-serif; font-size: 18px; line-height: 26px; font-weight: 400; letter-spacing: 0px; word-spacing: 0px; text-wrap: pretty; font-smooth: always; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0px; padding: 0px; list-style-type: none}
*, *::before, *::after{box-sizing: border-box}

HTML{margin: 0px; padding: 0px; -webkit-text-size-adjust: 100%}
HTML:has(NAV.menu-hamburger--active){overflow: hidden}
BODY{margin: 0px; padding: 0px 0px 0px 76px}

DIV,IMG,PICTURE,FORM,SECTION,FIGURE{line-height: 0px; border: none}
TABLE{border-spacing: 0px; border-collapse: collapse}
PICTURE, PICTURE *{width: 100%; height: auto; display: block}

H1{ text-wrap: wrap}
H2, H3, H4{ text-wrap: balance}
	
	
:root{
	--primary-color: #ff4028; 
	--second-color: #101010;
	--third-color: #faf2ec; 
	--border-color: #888;
	
	--width-article-main-column: 850px;
	--width-article-side-column: 300px;
	--width-article: calc(var(--width-article-main-column) + calc(var(--width-article-side-column)*2))
}


/* FONTS */
H1{font-size: 64px; line-height: 1.1; font-weight: 600; letter-spacing: -4px; word-spacing: 2px; padding: 0px 0px 35px 0px; position: relative}
H1 *{color: #888; font-size: 34px; line-height: 42px; letter-spacing: -2px; font-weight: 300; display: block}
	
H2, H2 *{font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -1px; word-spacing: 1px}
H2{padding: 20px 0px 25px 0px}
H2.no-padding-top{padding-top: 0px}
H2.case-studies{font-size: 20px; line-height: 30px; letter-spacing: 0px; padding: 0px 0px 20px 0px} 

H3, H3 *{font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.5px}	
H3{padding: 15px 0px}	
	
.intro-text, .intro-text *{font-size: 22px; line-height: 29px; letter-spacing: -0.5px}
.intro-text{padding: 0px 0px 30px 0px}
.intro-text--italic{font-style: italic; padding-right: 2px}

.main-text, .main-text *{}
.main-text{padding: 0px 0px 30px 0px}
.main-text--bottom{padding-bottom: 60px}
.main-text--no-padding{padding: 0px}
.main-text--italic, .main-text A .italic{font-style: italic; padding-right: 1px}
.main-text--bold{font-weight: 700}
.main-text--primary-color{color: var(--primary-color)}

.no-text-decoration{text-decoration: none} /* A TAGS */

.link__text{color: var(--primary-color); font-size: 22px; line-height: 1; font-weight: 600; letter-spacing: -1px; text-decoration: none; width: fit-content; margin: 0px; padding: 0px 68px 0px 0px; cursor: pointer; position: relative; display: inline-block}
.link__text:hover{text-decoration: underline}
.link__arrow{width: 60px; height: 2px; margin-top: 1px; position: absolute; top: 50%; right: 0px; transform: translateY(-50%); background: var(--primary-color)}
.link__arrow::before, .link__arrow::after{content: ""; width: 9px; height: 2px; position: absolute; right: -2px; background: var(--primary-color)}
.link__arrow::before{transform: rotate(-35deg); top: 2px}
.link__arrow::after{transform: rotate(35deg); top: -2px}





/*  CONTAINER */
.container{width: 90%; max-width: var(--width-article-main-column); margin: 0px auto; position: relative}
.container--1300{max-width: 1300px}
.container--1200{max-width: 1200px}
.container--1100{max-width: 1100px}

.container--top{padding-top: 60px}





/* COMMON CLASSES */
BODY A.border, BODY P.border, BODY SPAN.border{text-decoration: none; border: none; cursor: pointer; transition: background-size .3s; background: linear-gradient(to bottom, var(--primary-color) 0%, var(--primary-color) 100%); background-position: 0 95%; background-repeat: repeat-x; background-size: 2px 2px}
BODY A.border:hover, BODY A.border:hover SPAN, BODY SPAN.border:hover{color: #fff; background-size: 4px 24px}	
.no-wrap{white-space: nowrap}





/* SIDEBAR + LOGO + ICON MENU + HEADER + MENU */
.sidebar{width: 76px; height: 100%; border-right: solid 1px var(--border-color); position: fixed; left: 0px; top: 0px}

.logo--header{width: 141px; height: 37px; position: absolute; left: 50px; top: 15px}
.logo--sidebar{width: 42px; height: 37px; position: fixed; left: 16px; top: 20px; overflow: hidden}
.logo IMG{width: 141px; height: auto}
.logo SPAN{display: none}

.icon-menu{width: 28px; height: 16px; position: absolute; cursor: pointer; overflow: hidden; display: none}
.icon-menu__sidebar{margin-top: -10px; left: 21px; top: 50%}
.icon-menu__right{right: 17px; top: 17px}	
.icon-menu--active{height: 24px}

.icon-menu *{width: 28px; height: 2px; position: absolute; left: 0px; top: 0px; transition: transform .3s ease-in-out; background: var(--primary-color)}
.icon-menu .icon-menu__2{width: 20px; top: 7px}
.icon-menu .icon-menu__3{top: 14px}
		
.icon-menu--active .icon-menu__1{top: 10px; transform: rotate(45deg)}
.icon-menu--active .icon-menu__3{top: 10px; transform: rotate(-45deg)}
.icon-menu--active .icon-menu__2{width: 0px; height: 0px; left: 13px}	

.button-top{width: 40px; height: 40px; position: absolute; cursor: pointer; left: 17px; bottom: 20px}
.button-top *{width: 40px; height: 2px; position: absolute; background: var(--primary-color)}
.button-top__2{width: 20px; left: 18px; top: 17px; transform: rotate(45deg)}
.button-top__3{width: 20px; left: 2px; top: 17px; transform: rotate(-45deg)}
.button-top__4{width: 2px; height: 31px; left: 19px; bottom: 0px}	


HEADER{width: 100%; height: 60px; border-bottom: solid 1px var(--border-color); z-index: 90; position: relative; background: rgba(255,255,255,0.9)}
HEADER:has(.menu-hamburger--active){z-index: 99}
.menu{text-align: right; position: absolute; right: 50px; top: 0px}
.menu A{line-height: 1; text-decoration: none; word-spacing: 1px; margin-left: 20px; padding: 18px 10px 0px 10px; border-top: solid 4px transparent; display: inline-block}	
.menu A:hover{border-color: var(--primary-color); transition: .3s ease-in-out}

.menu-hamburger{text-align: left; width: 0px; height: 100vh; display: flex; align-items: center; position: fixed; left: 76px; top: 0px; overflow: hidden; transition: width 0.5s cubic-bezier(0, .99, 0, 0.99); background: var(--third-color)}
.menu-hamburger--active{width: calc(100% - 75px); overflow: visible}

.menu-hamburger .menu__inner{width: 100%}
.menu-hamburger A{font-size: 30px; line-height: 1; text-decoration: none; letter-spacing: -2px; font-weight: 300; white-space: nowrap; text-transform: uppercase; width: 100%; margin: 0px 0px -1px 0px; padding: 25px 0px 25px 50px; border: none; transition: .3s ease-in-out; display: block}
.menu-hamburger A:hover{border: none; background: #fff}





/* FOOTER */
FOOTER{padding: 70px 0px 55px 0px; border-top: solid 1px var(--border-color); background: #fff}
.footer__container{display: flex; justify-content: space-between; align-items: flex-end}
.footer__a{width: calc(100% - 280px); display: flex; justify-content: flex-start; align-items: flex-start}
.footer__b{width: 190px; margin: 0px 35px 0px 200px}
.footer__c{width: 90px}
.footer__d{width: 280px}

.footer__logo{width: 141px; height: 37px; filter: grayscale(100%); position: absolute; left: 0px; top: 0px}
.footer__menu > *{line-height: 1; padding: 0px 0px 15px 0px}
.footer__menu > * > *{font-size: 16px; line-height: 1; text-decoration: none; transition: .3s}
.footer__menu > * > *:hover{color: var(--primary-color)}

.footer__d *{font-size: 14px; line-height: 1; text-align: right; padding: 0px 0px 15px 0px}

@media screen and (max-width: 1000px)
{
	.footer__container{display: block}
	.footer__a{width: 100%; justify-content: space-between}
	.footer__d{width: 100%; margin-top: 25px; padding: 40px 0px 15px 0px; border-top: solid 1px var(--border-color)}
	.footer__d *{text-align: center; padding: 0px}
}

@media screen and (max-width: 600px)
{
	FOOTER{padding: 60px 0px 35px 0px}
	.footer__logo{display: none}
	.footer__b{margin: 0px}
}





/* MEDIA: BANNERS */
.banner{line-height: 0px; margin: 60px auto; display: block; position: relative; z-index: 95}
.banner--top{margin-top: -1px}
.banner--border{border: solid 1px var(--border-color); border-left: none; border-right: none}





/* MEDIA: BULLET LIST */
.media-bullet-list{margin: 0px 0px 35px 0px}
.media-bullet-list > *, .media-bullet-list > * SPAN{font-size: 16px; line-height: 24px}
.media-bullet-list > *{padding: 0px 0px 8px 22px; position: relative}

.media-bullet-list > * .italic{font-style: italic}
.media-bullet-list > * .bold{font-weight: 600}

.media-bullet-list > * .bold:first-child{font-size: 18px; display: block; padding-bottom: 5px}
.media-bullet-list > *::before{content: ''; line-height: 0px; width: 6px; height: 6px; border-radius: 50%; position: absolute; left: 0px; top: 9px; background: var(--primary-color)}
.media-bullet-list > *:last-child{padding-bottom: 0px}

.media-bullet-list--columns{display: flex; flex-wrap: wrap}
.media-bullet-list--columns >*{width: 50%}





/* MEDIA: TOC */
*:has(+ .media-toc){margin-bottom: 0px; padding-bottom: 0px}
.media-toc{max-width: 450px; margin: 40px 0px; border-bottom: solid 1px #c8c8c8; counter-reset: list-number}
.media-toc >*{color: #202020; font-size: 16px; line-height: 1; font-weight: 600; padding: 12px 0px 13px 35px; border-top: solid 1px #c8c8c8; position: relative; overflow: hidden}
.media-toc >*::before{color: var(--primary-color); font-size: 16px; line-height: 1; font-weight: 700; position: absolute; left: 10px; top: 13px; counter-increment: list-number; content: counter(list-number)}
.media-toc .scroll{text-decoration: underline 1px var(--primary-color); cursor: pointer}
.media-toc .scroll::after{content: ""; width: 450px; height: 50px; position: absolute; left: 0px; top: 0px; z-index: -1; transform: translateX(-100%); transition: transform .25s cubic-bezier(0, .99, 0, 0.99); background: #f6f2ff}
.media-toc .scroll:hover::after{transform: translateX(0%); transition: transform 1s cubic-bezier(0, .99, 0, 0.99)}





/* MEDIA: EMBEDDED VIDEO */
.media-video{width: 100%; margin: 5px 0px 40px 0px; padding-bottom: 56.5%; position: relative; overflow: hidden}
.media-video IFRAME{width: 100%; height: 100%; border: none; position: absolute; top: 0px; left: 0px; background: #fff}
.video__button{width: 100px; height: 100px; border-radius: 50%; position: absolute; left: 50%; top: 50%; cursor: pointer; transform: translate(-50%, -50%); background: var(--primary-color)}
.video__button::after{content: ""; border-width: 30px; border-style: solid; border-color: transparent transparent transparent #fff; position: absolute; left: calc(50% - 10px) ; top: 50%; transform: translateY(-50%) scaleY(0.8)}
.video__button--active{display: none}





/* MEDIA: PHOTOS / ARTICLE IMAGES */
.media-image{width: 100%; max-width: 100%; height: auto; margin: 0px 0px 35px 0px; display: block}
.media-image *{font-size: 0px; line-height: 0px}





/* MEDIA: FADES */
BODY .media-fade{will-change: opacity; opacity: 1; transition: .75s ease}
BODY .media-fade--primed{opacity: 0}





/* MEDIA: QUOTE */
.media-quote{text-align: right; padding: 10px 0px 50px 0px}
.media-quote__quote, .media-quote__quote *{color: #000; font-size: 36px; line-height: 1.35; letter-spacing: -2px; font-weight: 200}
.media-quote__quote--bold{font-weight: 500}
.media-quote__quote{margin-bottom: 25px}
.media-quote__attribution, .media-quote__attribution *{color: var(--primary-color); font-size: 18px; line-height: 1.5; font-weight: 600; letter-spacing: -0.5px}
.media-quote__attribution--details, .media-quote__attribution--details *{color: var(--primary-color); font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -0.5px}
.media-quote__attribution--details{padding: 5px 0px 0px 300px}





/* MEDIA: FULL-WIDTH QUOTE */
.media-full-width-quote{margin: 10px 0px 40px 0px; padding: 60px 0px; border: solid 1px var(--border-color); border-left: none; border-right: none; position: relative; background: #fffdf6}
.media-full-width-quote__img{height: auto; position: absolute; top: 75px; display: none}
.media-full-width-quote DIV{padding: 0px}

@media only screen and (min-width: 1500px)
{
		.media-full-width-quote__img{width: calc((100vw - 75px - var(--width-article-main-column))/2 - 100px); left: 50px; opacity: 0.35; display: block}
}
	
@media only screen and (min-width: 1850px)
{
		.media-full-width-quote__img{width: calc((100vw - 75px - var(--width-article-main-column))/2 - 160px); max-width: 360px; left: 80px; opacity: 0.2}
}	

@media only screen and (max-width: 600px)
{
	.media-full-width-quote{text-align: right; padding: 55px 0px 50px 0px}
	.media-full-width-quote__img{width: 60vw; max-width: 250px; margin: 0px 5% 35px 0px; position: relative; top: 0px; display: inline-block; opacity: 0.5}
}





/* MEDIA: INFOBOX [ASIDE TAG] */
.media-infobox{margin: 5px 0px 35px 0px; padding: 25px 20px 25px 30px; border-left: solid 5px var(--primary-color); background: #f8f4ff}
.media-infobox H3{color: #681da8; padding-bottom: 15px}
.media-infobox *{margin-top: 0px; padding-top: 0px}
.media-infobox *:last-child{margin-bottom: 0px; padding-bottom: 0px} 





/* MEDIA: FULL WIDTH */
.media-full-width{text-align: center; position: relative; z-index: 2}
.media-full-width--white{background: #fff}
.media-full-width--white-padding-borders{padding: 50px 0px; border: solid 1px var(--border-color); border-left: none; border-right: none; background: #fff}
.media-full-width--grey{background: var(--third-color)}
.media-full-width--testimonial{text-align: left; background: var(--second-color)}
.media-full-width PICTURE{margin: 0px auto; display: inline-block}





/* MEDIA: BOX-IMAGE-LINK */
.media-box-link{display: flex; justify-content: space-between; flex-wrap: wrap}
.media-box-link A{width: calc(50% - 10px); text-decoration: none; position: relative; display: flex; flex-direction: column; background: #fff}
.media-box-link A::after{content: ""; width: 80px; height: 0px; position: absolute; right: -2px; top: -2px; z-index: 99; transition: 1s; background: #fff}
.media-box-link IMG{width: 100%; height: auto}
.media-box-link	H3{padding: 30px 0px 20px 0px}
.media-box-link .italic{font-style: italic; padding-right: 2px}
.media-box-link P, .media-box-link P *{font-size: 16px; line-height: 23px}
.media-box-link P.article-description{padding: 0px 0px 35px 0px}

.time-to-read{margin-top: auto}
.time-to-read * {font-size: 13px; line-height: 1; text-transform: uppercase; word-spacing: 1px; font-weight: 500; display: inline-block; vertical-align: middle}
.time-to-read__clock{width: 19px; height: 19px; border-radius: 50%; border: solid 1px #000; position: relative}
.time-to-read__clock * {position: absolute; background: #000}
.time-to-read__hours{width: 6px; height: 1px; top: 9px; left: 4px}
.time-to-read__minutes{width: 1px; height: 7px; left: 9px; top: 3px}
.time-to-read__number-minutes{color: var(--primary-color); margin-left: 15px; padding-left: 15px; position: relative}
.time-to-read__number-minutes::before{content: ""; width: 1px; height: 16px; position: absolute; left: 0px; top: -1px; background: #888}





/* INDIVIDUAL CASE STUDY */
.case-study__intro{padding: 0px 0px 40px 0px; border-bottom: solid 1px var(--border-color); display: flex; justify-content: space-between; align-items: flex-end}
.case-study__intro-left{max-width: 700px}
.case-study__intro-left P:last-child{padding-bottom: 2px}

.case-study__intro-right{text-align: right; width: 300px}
.visit-website-link__text{font-size: 22px; font-weight: 600; letter-spacing: -1px; padding-right: 112px}
.visit-website__arrow{width: 100px; height: 3px; margin-top: 1px}
.visit-website__arrow::before, .visit-website__arrow::after{width: 12px; height: 3px}
.visit-website__arrow::before{top: 3px}
.visit-website__arrow::after{top: -3px}

.case-study--padding-top{padding-top: 70px}
.case-study--padding-bottom{padding-bottom: 70px}
.case-study H2{line-height: 1; font-weight: 700}
.case-study P:last-child{padding-bottom: 0px}
.case-study IMG{width: 100%; height: auto; margin-top: 5px}
.case-study P.img{font-size: 14px; line-height: 22px; font-style: italic; padding: 10px 0px 30px 0px}

.media-full-width--testimonial{margin-bottom: 70px; padding: 120px 0px 90px 0px}
.testimonial__quote-img{width: 320px; height: auto; margin-bottom: 65px; opacity: 0.6}
.testimonial__quote{color: #e8e8e8; font-size: 36px; line-height: 1.35; letter-spacing: -1px; font-weight: 200; word-spacing: 2px}
.testimonial__name{color: #fff; font-size: 18px; line-height: 1.5; font-weight: 600; letter-spacing: -0.5px; padding: 75px 0px 0px 0px}

.more-case-studies__container{margin-top: 65px; padding: 60px 0px 70px 0px; border-top: solid 1px var(--border-color)}
.more-case-studies__container H2{padding: 0px 0px 40px 0px}
.more-case-studies__media-box-link A{width: calc(33.3% - 10px); padding: 0px}





/* ARTICLES */
.article{max-width: var(--width-article); display: grid; grid-template-columns: minmax(0,var(--width-article-side-column)) var(--width-article-main-column) minmax(0,var(--width-article-side-column))}

.col-1{grid-column: 1 / 2}
.col-2{grid-column: 2 / 3}
.col-1-2{grid-column: 1 / 3}
.col-1-3{grid-column: 1 / 4}

.article H1{padding: 0px 0px 30px 0px}

.article H2, .article H2 *{font-size: 22px; line-height: 28px}
.article H2{margin-bottom: 25px; padding-bottom: 15px; border-bottom: solid 1px #303030}
.article H2 SPAN{color: #888; font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -1px; text-transform: uppercase; padding-top: 5px; display: block}

.article .main-text, .article .main-text *{font-size: 17px; line-height: 25px}

.media-bullet-list + H2, 
.media-toc + H2,
.media-video + H2,
.media-image + H2,
.media-quote + H2, 
.media-infobox + H2,
.col-2 + DIV H2:first-child,
.col-1-2 + DIV H2:first-child,
.col-1-3 + DIV H2:first-child{padding-top: 15px}

.media-bullet-list + H3, 
.media-toc + H3,
.media-video + H3, 
.media-image + H3,
.media-quote + H3, 
.media-infobox + H3{padding-top: 10px} 

.related__container{display: flex; justify-content: flex-start}	
.related__container H2{font-size: 26px; width: 175px; padding: 0px 40px 0px 0px}	
.related__media-box-link{width: var(--width-article-main-column)}	
.related__container H2, .related__media-box-link{margin-top: 40px; padding: 70px 0px; border-top: solid 1px var(--border-color)}	





@media screen and (min-width: 1200px)
{
	/* CONTAINER */
	.container--top{padding-top: 75px}
	
	/* SIDEBAR + LOGO + ICON MENU + HEADER + MENU */
	.menu A{margin-left: 60px}
	.menu-hamburger A{margin-left: 0px}

	/* MEDIA: BANNERS */
	.banner--top{margin: -1px auto 65px}
}





@media screen and (max-width: 1199px)
{
	/* SIDEBAR + LOGO + ICON MENU + HEADER + MENU */
	.menu{width: 750px}
	.menu-hamburger{width: 0px}
	.menu-hamburger--active{width: calc(100% - 75px)}
	
	/* ARTICLES */
	.related__container{margin-top: 40px; padding: 70px 0px; border-top: solid 1px var(--border-color); display: block}	
	.related__container H2, .related__media-box-link{width: auto; margin: 0px; padding: 0px; border: none}
	.related__container H2{padding: 0px 0px 40px 0px}	
}

@media screen and (max-width: 1080px)
{	
	.container{max-width: 800px}

	/* SIDEBAR + LOGO + ICON MENU + HEADER + MENU */
	BODY{padding: 50px 0px 0px 0px}
	.sidebar,.logo--sidebar{display: none}
	
	HEADER{height: 50px; position: fixed; left: 0px; top: 0px}
	.logo--header{position: absolute; left: 5%; top: 7px}
	
	.icon-menu__right{display: block; z-index: 100}
	.menu{width: 0px; position: fixed; left: 0px; top: 0px; overflow: hidden; z-index: 99}
	.menu-hamburger--active{width: 100vw}		
	.menu A{padding-left: 5vw}
	
	/* CASE STUDY */
	.case-study__intro-left{width: calc(100% - 300px - 30px); max-width: auto}

	.case-study--padding-top{padding-top: 60px}
	.case-study--padding-bottom{padding-bottom: 60px}
	.case-study H2{font-size: 24px; line-height: 32px; letter-spacing: -1px; width: auto; margin: 0px}
	.case-study DIV.content{width: 100%; display: block}	
	
	.more-case-studies__media-box-link A{width: calc(50% - 10px); margin-bottom: 70px}	
	.more-case-studies__media-box-link A:last-child{margin: 0px}
	
	/* ARTICLES */	
	.article{display: block}
	.related__container{margin-top: 30px; padding-top: 60px}			
}	

@media screen and (max-width: 800px)
{	
	.container{max-width: 600px}
	.container--top{padding-top: 50px}
	
	/* FONTS */
	H1{font-size: 42px; line-height: 48px; letter-spacing: -2.5px; word-spacing: 1px}
	H1 *{font-size: 30px; line-height: 44px; font-weight: 400; letter-spacing: -1px}
	H1.case-studies{padding-bottom: 35px}
	
	.intro-text, .intro-text *{font-size: 20px; line-height: 28px}

	/* SIDEBAR + LOGO + ICON MENU + HEADER + MENU */
	.menu A{font-size: 24px; letter-spacing: -0.5px}	

	/******** INNER *******/	

	/* MEDIA: BANNERS */
	.banner{margin-top: 50px}
	.banner--top{margin-top: -1px}	
	
	/* MEDIA: BULLET LIST */
	.media-bullet-list--columns >*{width: 100%}
	
	/* MEDIA: TOC */
	.media-toc{margin: 35px 0px 30px 0px; border-bottom: solid 1px #a0a0a0}
	.media-toc >*{border-top: solid 1px #a0a0a0}
	
	/* MEDIA: VIDEO */
	.media-video{margin: 0px 0px 30px 0px}	
	
	/* MEDIA: QUOTE */
	.media-quote{padding: 5px 0px 40px 0px}
	.media-quote__quote, .media-quote__quote *{font-size: 26px; letter-spacing: -1px; font-weight: 300}
	.media-quote__quote--bold{font-weight: 600}
	.media-quote__attribution--details, .media-quote__attribution--details *{font-size: 16px; letter-spacing: 0px}
	.media-quote__attribution--details{padding-left: 100px}
	
	/* MEDIA: FULL WIDTH */
	.media-full-width--white-padding-borders{padding: 40px 0px}	
	
	/* MEDIA: BOX-IMAGE-LINK */
	.media-box-link A{width: 100%; margin: 0px 0px 60px 0px; position: relative; will-change: transform; transform: translateY(0px); transition: transform 2s cubic-bezier(0, .99, 0, 0.99)}
	.media-box-link A:last-child{margin: 0px}
	.media-box-link A.slide--primed{transform: translateY(150px)}
	.media-box-link A.slide--primed::after{height: 150px}
	.media-box-link A:nth-child(1){transform: translate(0)}
	.media-box-link H3{font-size: 18px; line-height: 25px; padding-top: 25px; padding-bottom: 15px}
	.media-box-link P, .media-box-link P *{font-size: 16px; line-height: 24px}
	.media-box-link P{padding-bottom: 0px}

	/* CASE STUDIES */
	.case-study__intro{display: block}
	.case-study__intro-left{width: 100%; padding-bottom: 40px}
	.case-study__intro-right{text-align: left; width: 100%}

	.visit-website-link__text{font-size: 20px; padding-right: 78px}
	.visit-website__arrow{width: 70px; height: 2px; margin: 0px}
	.visit-website__arrow::before, .visit-website__arrow::after{width: 9px; height: 2px}
	.visit-website__arrow::before{top: 2px}
	.visit-website__arrow::after{top: -2px}	

	.media-full-width--testimonial{margin-bottom: 60px; padding: 75px 0px 70px 0px}
	.testimonial__quote-img{width: 265px; margin-bottom: 60px}
	.testimonial__quote{font-size: 26px; word-spacing: 1px; font-weight: 300}
	.testimonial__name{padding-top: 65px}
	
	/* ARTICLES */
	.related__container H2{padding: 0px 0px 35px 0px}	
}

@media screen and (max-width: 600px)
{	
	/* SIDEBAR + LOGO + ICON MENU + HEADER + MENU */
	.menu A{padding-top: 20px; padding-bottom: 20px}	
	.menu-hamburger{padding-top: 120px; align-items: flex-start}

	/* MEDIA: BANNERS */
	.banner{margin-bottom: 50px}
	
	/* MEDIA: IMAGE */
	.media-image{margin-top: -5px}	
	
	/* MEDIA: QUOTE */
	.media-quote__attribution--details{padding-left: 0px}
	
	/* CASE STUDIES */
	.case-study__intro{padding-bottom: 20px; border: none}
	.testimonial__quote-img{width: 250px; opacity: 0.75}	
}