/* --- Montserrat --- */ @font-face {font-family: 'Montserrat'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/JTUQjIg1_i6t8kCHKm459WxRzS7mw9c.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face {font-family: 'Montserrat'; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/JTUQjIg1_i6t8kCHKm459WxRyS7m.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face {font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face {font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* --- NORMALISER --- */ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}body,button,input,select,textarea{font-family:sans-serif}a:focus{outline:0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:after,q:before{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}ol,ul{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ol,nav ul{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{margin:0 2px;padding:.35em .625em .75em}legend{border:0}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline}button,input{line-height:normal}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} /* --- VARIABLES --- */ :root { --font-family:'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --font-second:'Arial'; --font-size:1.25rem; --line-height:1.5; --transition-duration:75ms; --transform-scale-hover:scale(0.98); --transform-scalelarge-hover:scale(1.1); --background:#fff; --color-grey:#777; --color:#000; --color-link:#000; --color-link-hover:#000; --border-width:0.0625rem; --border-radius:0; @media (prefers-reduced-motion) { --transition-duration:0s!important; } } /* --- COMMON --- */ *, *::before, *::after{box-sizing:border-box; margin:0; padding:0; transition:0s all ease-in; /* user-select:none; */} a, .link{outline:none; cursor:pointer; color:var(--color-link); text-decoration:none!important; transition-duration:var(--transition-duration); position:relative; z-index:1; display:inline-block;} a:hover, .link:hover{text-decoration:none!important; color:var(--color-link-hover); transform:var(--transform-scale-hover);} a::after, .link::after{position:absolute; bottom:0; z-index:-1; width:0; left:50%; background:var(--color-link-hover); transition-duration:calc(var(--transition-duration) * 2); display:block; content:""; height:1px; transition-delay:var(--transition-duration); opacity:0;} a:hover::after, .likeLink:hover::after{width:100%; opacity:1; left:0;} a.icon::after, a.button::after, .icon::after, .button::after{display:none;} a img{border:0 none;} ul{margin:0; padding:0; list-style:none;} li{margin:0; padding:0;} img, iframe, video{max-width:100%; height:auto; display:inline-block;} html{margin:0!important; overflow-x:hidden; overflow-y:auto; background:var(--background);} body{font-family:var(--font-family); font-size:var(--font-size); line-height:var(--line-height); color:var(--color); background:var(--background); letter-spacing:0; font-weight:300; overflow:hidden; min-height:100dvh;} input, textarea, select{margin:0; color:var(--color); font-size:1rem; font-weight:400; background:var(--background); border:0 none; border-bottom:1px solid #d8d8d8; font-family:var(--font-family); transition-duration:var(--transition-duration); display:inline-block; vertical-align:middle;} fieldset{border:none;} input.text, input[type="file"], input[type="date"], input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="tel"], input[type="search"]{padding:0.25rem 1rem; line-height:2.5rem; height:auto; border-radius:var(--border-radius); -webkit-touch-callout:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text;} input.text:focus, input[type="file"]:focus, input[type="date"]:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, select:focus, textarea:focus{background:var(--background); border-color:#077dc2; outline:0;} select{padding:0.25rem 1rem; line-height:2.5rem; height:2.5rem; border-radius:var(--border-radius);} select[multiple]{height:auto; min-height:7.5rem;} select option{padding:0.25rem;} textarea{padding:0.5rem 1rem; height:auto; min-height:10rem; border-radius:0; transition-duration:0s!important;} button{font-family:var(--font-family);} input[type="submit"], input[type="reset"], input.button{font-weight:100; transition-duration:var(--transition-duration); cursor:pointer; display:inline-block; padding:0.85rem 2rem; background:#efefef; border:var(--border-width) solid #efefef; box-sizing:border-box; color:#000; font-size:100%; white-space:nowrap; text-decoration:none!important; border-radius:var(--border-radius); font-family:var(--font-family); text-transform:uppercase;} input[type="submit"]:hover:not([disabled]), input[type="reset"]:hover:not([disabled]), input.button:hover{transform:var(--transform-scale-hover); background:#444; border-color:#444; color:#fff;} input[type="submit"][disabled]{background:#d8d8d8; color:#777;} input.button{background:#444; color:#fff;} input[type="reset"]{background:#777;} input[type="range"]{-webkit-appearance:none; width:100%; background:transparent; border:0 none;} input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;} input[type="range"]:focus{outline:none;} input[type="range"]::-ms-track{width:100%; cursor:pointer; background:transparent; border-color:transparent; color:transparent;} input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:26px; height:26px; background:var(--color-grey); border-radius:26px; cursor:pointer; margin-top:-4px; border:0 none;} input[type="range"]::-moz-range-thumb{width:26px; height:26px; background:var(--color-grey); border-radius:26px; cursor:pointer; border:0 none;} input[type="range"]::-ms-thumb{width:26px; height:26px; background:var(--color-grey); border-radius:26px; cursor:pointer; border:0 none;} input[type="range"]::-webkit-slider-runnable-track{width:100%; height:20px; cursor:pointer; background:var(--background); border-radius:20px; border:1px solid var(--color-link-hover); box-sizing:border-box;} input[type="range"]:focus::-webkit-slider-runnable-track{background:var(--background);} input[type="range"]::-moz-range-track{width:100%; height:20px; cursor:pointer; background:var(--background); border-radius:20px; border:1px solid var(--color-link-hover); box-sizing:border-box;} input[type="range"]::-ms-track{width:100%; height:20px; cursor:pointer; border-radius:20px; box-sizing:border-box; background:transparent; border-color:transparent; border-width:0; color:transparent;} input[type="range"]::-ms-fill-lower{background:var(--background); border:1px solid var(--color-link-hover); border-radius:20px;} input[type="range"]:focus::-ms-fill-lower{background:var(--background)} input[type="range"]::-ms-fill-upper{background:var(--background); border:1px solid var(--color-link-hover); border-radius:20px;} input[type="range"]:focus::-ms-fill-upper{background:var(--background)} input[type="radio"]{transition-duration:var(--transition-duration); appearance:none; -moz-appearance:none; -webkit-appearance:none; background:transparent; width:30px; height:30px; box-sizing:border-box; border:1px solid var(--color-grey); position:relative; border-radius:30px; cursor:pointer;} input[type="radio"]:checked{transition-duration:var(--transition-duration); border-color:var(--color-grey);} input[type="radio"]::before{transition-duration:var(--transition-duration); content:""; position:absolute; top:3px; left:3px; right:3px; bottom:3px; width:22px; height:22px; background:var(--color-grey); opacity:0; transform:scale(0.5); border-radius:18px;} input[type="radio"]:checked::before{opacity:1; transform:scale(1); background:var(--color-grey);} input[type="checkbox"]{transition-duration:var(--transition-duration); appearance:none; -moz-appearance:none; -webkit-appearance:none; background:transparent; width:30px; height:30px; box-sizing:border-box; border:1px solid var(--color-grey); position:relative; border-radius:3px; cursor:pointer;} input[type="checkbox"]:checked{transition-duration:var(--transition-duration); background:var(--color-grey); border-color:var(--color-grey);} input[type="checkbox"]::before{transition-duration:var(--transition-duration); content:""; position:absolute; opacity:0; transform:scale(0.5) rotate(0deg); width:8px; height:16px; left:10px; top:5px; border-bottom:2px solid var(--background); border-right:2px solid var(--background);} input[type="checkbox"]:checked::before{opacity:1; transform:scale(1) rotate(45deg);} .cl{font-size:0; line-height:0; text-indent:-9999px; clear:both;} .no-text{text-indent:-9999px; font-size:0; line-height:0;} .fl{float:left;} .fr{float:right;} .txal{text-align:left;} .txac{text-align:center;} .txar{text-align:right;} .txaj{text-align:justify;} .txtup{text-transform:uppercase;} .fostit{font-style:italic;} .db{display:block;} .di{display:inline;} .dn{display:none;} .posrel{position:relative;} .posabs{position:absolute;} .posfix{position:fixed;} .no-margin{margin:0!important;} .selectable{user-select:text;} .ovh{overflow:hidden;} .opc10{opacity:0.1;} .opc20{opacity:0.2;} .opc30{opacity:0.3;} .opc40{opacity:0.4;} .opc50{opacity:0.5;} .opc60{opacity:0.6;} .opc70{opacity:0.7;} .opc80{opacity:0.8;} .opc90{opacity:0.9;} .fw100{font-weight:100;} .fw200{font-weight:200;} .fw300{font-weight:300;} .fw400{font-weight:400;} .fw500{font-weight:500;} .fw600{font-weight:600;} .fw700{font-weight:700;} .fw800{font-weight:800;} .fw900{font-weight:900;} .fsz125{font-size:125%;} .fsz150{font-size:150%;} .fsz175{font-size:175%;} .fsz200{font-size:200%;} .fsz235{font-size:235%;} .fsz250{font-size:250%;} .fsz300{font-size:300%;} .padtop0{padding-top:0!important;} .padtop1{padding-top:1rem;} .padtop2{padding-top:2rem;} .padbot0{padding-bottom:0!important;} .padbot1{padding-bottom:1rem;} .padbot2{padding-bottom:2rem;} .padbot25{padding-bottom:2.5rem;} .martop0{margin-top:0!important;} .martop1{margin-top:1rem;} .martop2{margin-top:2rem;} .marbot0{margin-bottom:0!important;} .marbot1{margin-bottom:1rem;} .marbot2{margin-bottom:2rem;} .marbot25{margin-bottom:2.5rem;} .smallText{font-size:75%;} .button{font-weight:100; font-size:100%; transition-duration:var(--transition-duration); cursor:pointer; display:inline-block; padding:0.5rem 2rem; background:#efefef; border:var(--border-width) solid #efefef; box-sizing:border-box; color:#000; white-space:nowrap; text-decoration:none!important; border-radius:var(--border-radius); text-transform:uppercase;} .button [class*="icon"]{display:inline-block; vertical-align:middle; margin-right:1.25rem; font-size:75%; width:2rem; height:2rem; line-height:1; text-align:center; object-fit:contain;} .button:hover{transform:var(--transform-scale-hover); background:#444; color:#fff; border-color:#444;} .buttonBig{font-size:200%; font-weight:700; padding:1rem 3rem;} .buttonSmall{padding:0.25rem 0.5rem; font-size:90%;} .buttonSmaller{padding:0.125rem 0.25rem; font-size:80%;} .wrapper{max-width:75rem; margin:0 auto; padding:0 1.25rem;} #projectsSection .wrapper, #projectsSectionLast .wrapper, #header .wrapper, #footer .wrapper{max-width:100rem;} .animated{transition-duration:var(--transition-duration);} :root.menuOpened, :root.popupOpened{overflow:hidden;} .flexWrapper{display:flex; flex-flow:row nowrap; align-content:center; justify-content:space-between;} .flexWrapper .flexItem{align-content:center;} .flexWrapperEqual .flexItem{flex:1;} .flexWrapperEqual .flexItem > img.attachment-full{display:block;} .flexWrapper .flexItemHalf{flex:1.5;} .flexWrapper .flexItemDouble{flex:2;} .flexGap05{gap:0.5rem;} .flexGap10{gap:1rem;} .flexGap15{gap:1.5rem;} .flexGap20{gap:2rem;} .flexGap25{gap:2.5rem;} .flexGap30{gap:3rem;} .flexGap35{gap:3.5rem;} .flexGap40{gap:4rem;} .flexGap45{gap:4.5rem;} .flexGap50{gap:5rem;} .flexGap55{gap:5.5rem;} .flexGap60{gap:6rem;} .galleryWrap{display:flex; flex-flow:row wrap; align-content:start; justify-content:center; padding:0 0 2.5rem; gap:2rem;} .galleryWrap a{max-width:calc(20% - 1.6rem); height:auto; margin:0;} .galleryWrap a img{width:100%; height:100%; object-fit:cover; transition-duration:var(--transition-duration); border:var(--border-width) solid var(--color-orange-light);} .galleryWrap a:hover img{transform:var(--transform-scale-hover);} #crumb{margin:0 0 .5rem; color:#aaa;} #crumb > span{display:inline-block; font-size:80%; text-transform:uppercase;} #crumb a{color:#aaa;} #crumb a:hover{color:#aaa;} #crumb a::after{background:#aaa;} .introCat{font-size:70%; line-height:1.25; text-transform:uppercase; display:block; letter-spacing:0.125rem; font-weight:400;} .introCat::before{padding:0 0.25rem 0 0; content:"/"; display:inline-block; font-size:75%;} .introCat::after{padding:0 0 0 0.25rem; content:"/"; display:inline-block; font-size:75%;} /* --- CONTENT --- */ h1{font-size:300%; line-height:1; font-weight:100; margin:0 0 2.5rem;} h2{font-size:150%; line-height:1; font-weight:100; margin:0 0 1.25rem; color:#777; text-transform:uppercase;} h2.likeH1{font-size:300%; margin:0 0 2.5rem; color:#000; text-transform:none;} h3{font-size:125%; line-height:1.25; font-weight:100; margin:0 0 1.25rem; color:#4e4e4e;} .smallSubTitle{font-size:70%; text-transform:uppercase; line-height:1.25; color:#999; margin:0 0 0.625rem;} #header{position:fixed; top:0; left:0; width:100%; background:rgba(255,255,255,0.9); transition-duration:var(--transition-duration); z-index:95;} #header a{transform:none;} #header .wrapper{display:flex; flex-flow:row nowrap; align-content:stretch; justify-content:space-between; gap:2.5rem;} #logo{width:10rem; min-width:10rem; padding:1.25rem 0; display:flex;} #logo a{display:block; align-self:center;} #logo a::after{display:none;} #logo img{display:block; width:100%;} #headLinks{flex:1; display:flex; flex-flow:row nowrap; align-content:center; justify-content:end; gap:3.5rem; font-size:80%;} #menu{flex:1;} #menu > ul{list-style:none; display:flex; flex-flow:row nowrap; align-content:center; justify-content:end; gap:1.25rem; height:100%;} #menu > ul > li{position:relative; align-content:center; display:flex;} #menu > ul > li.submenu::after, #menu > ul > li.menu-item-has-children::after{position:absolute; top:65%; left:calc(50% - 0.125rem); width:0; height:0; border-left:0.25rem solid transparent; border-right:0.25rem solid transparent; border-top:0.25rem solid var(--color); display:block; content:""; z-index:5;} #menu > ul > li > a{font-size:80%; text-transform:uppercase; font-weight:500; display:block; flex:1; align-self:center; white-space:nowrap;} #menu > ul > li.submenu > a, #menu > ul > li.menu-item-has-children > a{padding:2.5rem 0;} #menu > ul > li.submenu > a::after, #menu > ul > li.menu-item-has-children > a::after{display:none;} #menu > ul > li > ul{display:none; position:absolute; top:100%; left:-2.5rem; width:20rem; padding:1.25rem 2.5rem; z-index:10; background:rgba(0,0,0,0.75);} #menu > ul > li:hover > ul{display:block;} #menu > ul > li > ul > li{padding:0.25rem 0;} #menu > ul > li > ul > li > a{color:#fff; text-transform:uppercase;} #menu > ul > li > ul > li > a::after{background:#fff;} #headSocials{padding:1.25rem 0; display:flex; flex-flow:row nowrap; align-content:center; justify-content:end; gap:1.25rem;} #headSocials a{align-self:center;} #headLangs{padding:1.25rem 0; display:flex; flex-flow:row nowrap; align-content:center; justify-content:end; gap:1.25rem;} #headLangs a, #headLangs span{align-self:center; font-weight:600; text-transform:uppercase;} #headPhone{padding:1.25rem 0; display:flex; flex-flow:row nowrap; align-content:center; justify-content:end; gap:1.25rem;} #headPhone a{align-self:center; white-space:nowrap; font-weight:500;} #headPhone .headPhoneText{} #menuOpener{order:10; cursor:pointer; height:3rem; line-height:2rem; z-index:800; display:none; flex-flow:row nowrap; align-content:center; justify-content:start; padding:0.5rem 0; transition-duration:var(--transition-duration); align-self:center; margin-left:2.5rem;} #menuOpener .menuOpenerIcon{width:2rem; height:2rem; position:relative; line-height:2.5;} #menuOpener .menuOpenerIcon [class*="menuOpenerLine"]{position:absolute; left:0; right:0; width:100%; height:0.25rem; border-radius:0.25rem; background:var(--color); transition-duration:var(--transition-duration);} #menuOpener .menuOpenerIcon .menuOpenerLine1{top:10%;} :root.menuOpened #menuOpener .menuOpenerIcon .menuOpenerLine1{transform:rotate(45deg); top:50%;} #menuOpener .menuOpenerIcon .menuOpenerLine2{top:45%;} :root.menuOpened #menuOpener .menuOpenerIcon .menuOpenerLine2{opacity:0;} #menuOpener .menuOpenerIcon .menuOpenerLine3{top:80%;} :root.menuOpened #menuOpener .menuOpenerIcon .menuOpenerLine3{transform:rotate(-45deg); top:50%;} #main{} #main p{margin-bottom:1.25rem;} #main p:last-child{margin-bottom:0!important;} .section{margin:0 0 1.25rem; padding:2.5rem 0;} .sectionNoAll{margin:0; padding:0;} .sectionDiff{background:#f1f1f1;} .sectionDiff .button{background:#fff; border-color:#fff;} .sectionDiff .button:hover{background:#444; border-color:#444;} .section:last-child{margin:0;} .section .feedText{margin:0 0 2.5rem;} .section .sectionImage{width:100%; height:100%;} .boxListing{display:flex; flex-flow:row wrap; align-content:start; justify-content:space-between; gap:2.5rem; margin:0 0 2.5rem; color:#999;} .boxListingLarge{padding:0 0 2.5rem;} .boxListing .boxSingle{width:calc(33.33% - calc(5rem / 3));} .boxListingLastFull .boxSingle:last-child{width:100%;} .boxListingTwoCol{margin:0;} .boxListingTwoCol .boxSingle{width:calc(50% - 2.5rem);} .mainHome .boxListingTwoCol .boxSingle{width:calc(50% - 1.25rem);} .boxListing .boxSingle > a{display:block; color:#999; text-decoration:none;} .boxListing .boxSingle > a::after{display:none;} .boxListing .boxSingle .boxImage{margin:0 0 1.25rem; transition-duration:var(--transition-duration); display:block;} .boxListing .boxSingle .boxImage img{display:block; width:100%;} .boxListingIcons .boxSingle .boxImage img{width:auto; margin:0 auto;} .boxListing .boxSingle .boxText{transition-duration:var(--transition-duration); display:block;} .boxListing .boxSingle .boxText .boxTitleLarge{font-size:133%; line-height:1; text-transform:uppercase; display:block; margin:0 0 0.5rem;} .boxListing .boxSingle .boxText .boxTitleNormal{font-size:150%; line-height:1; display:block; margin:0 0 0.5rem;} .boxListing .boxSingle .boxText .boxTitleInfo{font-size:70%; line-height:1.25; text-transform:uppercase; display:block; letter-spacing:0.125rem;} .boxListing .boxSingle .boxText .boxTitleInfo::before{padding:0 0.25rem 0 0; content:"/"; display:inline-block; font-size:75%;} .boxListing .boxSingle .boxText .boxTitleInfo::after{padding:0 0 0 0.25rem; content:"/"; display:inline-block; font-size:75%;} .boxListing .boxSingle > a:hover{color:#000;} .boxListing .boxSingle > a:hover .boxImage{transform:var(--transform-scale-hover);} .boxListing .boxSingle > a:hover .boxText{transform:var(--transform-scalelarge-hover);} .boxListingIcons .boxSingle .boxImage + .boxText .boxTitleNormal{margin-left:2.5rem; margin-right:2.5rem;} .boxListing .boxSingle .boxText .boxTitleDesc{font-size:80%; line-height:1.25; color:#000; display:block;} .boxListing .boxSingle .boxText .boxTitleMore{text-transform:uppercase; font-size:80%; line-height:1.25; text-decoration:underline;} .boxListingNoAnim .boxSingle > a:hover .boxText{transform:none;} .centerButton{padding:1.25rem 0; text-align:center;} #projectsSection .boxListing .boxSingle .boxImage, #projectsSectionLast .boxListing .boxSingle .boxImage{height:20rem; overflow:hidden;} #projectsSection .boxListing .boxSingle .boxImage img, #projectsSectionLast .boxListing .boxSingle .boxImage img{height:100%; object-fit:cover;} #blogSection .boxListing .boxSingle .boxImage{height:20rem; overflow:hidden;} #blogSection .boxListing .boxSingle .boxImage img{height:100%; object-fit:cover;} #introSection{padding:0; position:relative; height:100dvh; display:flex; flex-flow:column nowrap; align-content:start; justify-content:end;} #introSection.introSectionRel .sectionImage{position:relative;} #introSection.introSectionSmall{max-height:33.33dvh; margin:0;} #introSection.introSectionMid{max-height:50dvh; margin:0;} #introSection.introSectionNo{max-height:0; margin:0;} #main:not(.mainHome) #introSection.introSectionAuto{max-height:none; margin:0; height:auto;} #main:not(.mainHome) #introSection{height:70dvh;} #introSection .sectionImage{position:absolute; top:0; left:0; right:0; bottom:0;} #introSection .sectionImage img, #introSection .sectionImage iframe, #introSection .sectionImage video{width:100%; height:100%; display:block; object-fit:cover;} #introSection .sectionImageBl{background:#000;} #introSection .sectionImageBl img, #introSection .sectionImageBl iframe, #introSection .sectionImageBl video{opacity:0.5;} #introSection .wrapper{height:100%; display:flex; flex-flow:column nowrap; align-content:center; justify-content:end; position:relative; text-align:center; max-width:100rem;} #introSection .wrapper h1{margin:0 0 10rem; color:#fff;} #introSection .wrapper h1 span{font-weight:300; font-style:italic;} #introSectionVideo{display:block; object-fit:cover; width:100%; height:100%;} #introSectionBot{width:100%; max-width:calc(75rem - 2.5rem); margin:0 auto; background:rgba(0,0,0,0.5); padding:0.625rem 2.5rem; position:relative;} #introSectionBot.botFull{max-width:none; padding:1.25rem;} #introSectionBot.botFull .wrapper{max-width:75rem;} #introSectionBot ul{display:flex; flex-flow:row nowrap; align-content:start; justify-content:space-between;} #introSectionBot ul li{text-align:left;} #introSectionBot ul li a{display:block; color:#fff;} #introSectionBot ul li a::after{display:none;} #introSectionBot ul li .introSectionBotNumber{font-size:125%; font-weight:100; display:block;} #introSectionBot ul li .introSectionBotText{font-size:80%; line-height:1.25; text-transform:uppercase; display:block; letter-spacing:0.125rem; display:block;} .boxClientsWrap, .boxClientsStars{display:flex; flex-flow:row wrap; align-content:start; justify-content:start; gap:0.5rem; margin:0 0 0.625rem;} .boxClientsWrap .boxClientsSingle{border:2px solid #fff; width:54px; height:54px; border-radius:54px; overflow:hidden;} .boxClientsWrap .boxClientsSingle:not(:first-child){margin-left:-20px;} .boxClientsWrap .boxClientsSingle img{display:block; width:100%; height:100%; object-fit:cover;} .homeFormWrap{} .homeFormWrap .homeFormRow{margin:0 0 1.25rem; display:flex; flex-flow:row wrap; align-content:start; justify-content:start; gap:1.25rem;} .homeFormWrap .homeFormRow .homeFormCell{flex:1; margin-bottom:0!important; position:relative; align-content:start;} .homeFormWrap .homeFormRow .homeFormCell input[type="submit"], .homeFormWrap .homeFormRow .homeFormCell input[type="text"], .homeFormWrap .homeFormRow .homeFormCell input[type="tel"], .homeFormWrap .homeFormRow .homeFormCell textarea{width:100%; min-height:2.5rem; height:2.5rem; padding-left:0; padding-right:0;} .homeFormWrap .homeFormRow .homeFormCell textarea:focus{min-height:10rem; height:10rem;} .homeFormWrap .homeFormRow .homeFormCell input[type="submit"]{height:auto;} .homeFormWrap .homeFormRow .homeFormCell span[class*="not-valid"]{font-size:67%; font-style:italic; line-height:1; padding:0.25rem 0;} .homeFormWrap .homeFormRow .homeFormCell20{max-width:20rem; width:100%; margin:0 auto; display:flex; flex-flow:row nowrap; align-content:start; justify-content:start; gap:1.25rem; font-size:75%; color:#777;} .homeFormWrap .homeFormRow .homeFormCell20 a{color:#777; display:inline;} .homeFormWrap .homeFormRow .homeFormCell20 a::after{display:none;} .homeFormWrap .homeFormRow .homeFormCell20 .homeFormCellCheckInput{} .homeFormWrap .homeFormRow .homeFormCell20 .homeFormCellCheckText{flex:1;} .wpcf7-spinner{position:absolute; left:calc(50% - 12px); margin:0; top:12px;} .wpcf7-list-item{margin:0;} #introSectionBotInPage{display:flex; flex-flow:row nowrap; align-content:start; justify-content:start; gap:1.25rem;} #introSectionBotInPageText{flex:1; text-align:left; display:flex; flex-flow:column nowrap; align-content:start; justify-content:center;} #introSectionBotInPageText h1{font-size:200%; text-transform:uppercase; margin:0!important;} #introSectionBotInPageText .introCat{color:#fff;} #introSectionBotInPageSlogan{width:10rem; min-width:10rem;} #introSectionBotInPageSlogan img{width:100%;} #innerPageSection{} #innerPageSectionText{display:flex; flex-flow:row nowrap; align-content:center; justify-content:start;} #innerPageSectionTextContent{flex:1; border-right:1px solid #ddd; margin:0 2.5rem 0 0; padding:0 2.5rem 0 0; align-content:center;} #innerPageSectionTextAttr{width:15rem; min-width:15rem;} .attrSingle{margin:0 0 1.25rem;} .attrSingle .attrSingleTitle{font-size:80%; text-transform:uppercase;} .attrSingle .attrSingleValue{font-size:125%; font-weight:100;} #innerPageGallery{display:flex; flex-flow:row wrap; align-content:start; justify-content:center; gap:1.25rem;} #innerPageGallery > figure, #innerPageGallery > a, #innerPageGallery > p{max-width:calc(33.33% - calc(2.5rem / 3)); height:25rem; overflow:hidden; margin:0!important;} #innerPageGallery > figure > img, #innerPageGallery > figure > a, #innerPageGallery > figure > a img, #innerPageGallery > a > img, #innerPageGallery > p > img{width:100%; height:100%; object-fit:cover; align-content:center;} #innerPageGallery > figure{position:relative;} #innerPageGallery > figcaption{position:absolute; bottom:0; left:0; right:0; padding:0.625rem 1.5rem; background:rgba(0,0,0,0.5); color:#fff; font-size:85%; font-style:italic;} #innerPageOther{} #innerPageOtherWrap{display:flex; flex-flow:row wrap; align-content:stretch; justify-content:center;} #innerPageOtherWrap .innerPageOtherSingle{width:40%;} #innerPageOtherWrap .innerPageOtherSingle a, #innerPageOtherWrap .innerPageOtherSingle .innerPageOtherSingleHold{display:block; height:100%; width:100%;} #innerPageOtherWrap .innerPageOtherSingleImage{width:100%; height:20rem; display:block;} #innerPageOtherWrap .innerPageOtherSingleImage img{width:100%; height:100%; object-fit:cover;} #innerPageOtherWrap .innerPageOtherSingleTitle{font-size:125%; text-transform:uppercase; font-weight:100; display:block;} #innerPageOtherWrap #innerPageOtherCurr{width:20%; text-align:center;} #innerPageOtherWrap #innerPageOtherCurr .innerPageOtherSingleTitle{font-size:80%; font-weight:300; padding:0.625rem 0;} #innerPageOtherWrap #innerPageOtherPrev{padding-right:2.5rem;} #innerPageOtherWrap #innerPageOtherNext{padding-left:2.5rem;} #innerPageOtherWrap #innerPageOtherPrev a img, #innerPageOtherWrap #innerPageOtherNext a img{transition-duration:var(--transition-duration); filter:grayscale(1); opacity:0.5;} #innerPageOtherWrap #innerPageOtherPrev a:hover img, #innerPageOtherWrap #innerPageOtherNext a:hover img{filter:none; opacity:1;} #innerPageOtherWrap #innerPageOtherNext .innerPageOtherSingleTitle{text-align:right;} #innerPageOtherWrap #innerPageOtherPrev .innerPageOtherSingleTitle::before{content:"< "; display:inline;} #innerPageOtherWrap #innerPageOtherNext .innerPageOtherSingleTitle::after{content:" >"; display:inline;} #footer{text-align:center;} #footer .footSec{padding:2.5rem 0; position:relative;} #footer .footSec .sectionImage{position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background-color:#000;} #footer .footSec .sectionImage img{width:100%; height:100%; object-fit:cover; opacity:0.5; filter:grayscale(1);} #footer .footSec .footMenu{padding:1.25rem 0 2.5rem;} #footer .footSec .footMenu ul{list-style:none; display:flex; flex-flow:row wrap; align-content:center; justify-content:center; gap:2.5rem;} #footer .footSec .footMenu ul li{} #footer .footSec .footMenu ul li a{color:#fff;} #footer .footSec .footMenu ul li a::after{background:#fff;} #footer .footSec .footLogo{padding:1.25rem 0 0; position:relative;} #footer .footSec .footLogo img{display:block; margin:0 auto; max-width:200px;} #footer .footSec .footSlogan{padding:1.25rem 0; position:relative;} #footer .footSec .footSlogan img{display:block; margin:0 auto; max-width:200px;} #footer .footSec .footSocials{padding:1.25rem 0 0; display:flex; flex-flow:row wrap; align-content:center; justify-content:center; gap:2.5rem;} #footer .footSec .footSocials a{color:#fff;} #footer .footSec .footPhone{padding:1.25rem 0 0;} #footer .footSec .footPhone a{color:#fff; font-size:115%;} #footer .footSec .footPhone a .headPhoneText{padding:0 0 0 0.5rem; font-weight:100;} #footer .footSec .footPhone a::after{background:#fff;} #footer .footSec .footBot{display:flex; flex-flow:row wrap; align-content:center; justify-content:space-between; gap:2.5rem; font-weight:100; font-size:80%;} #footer .footSec .footBot .footCopy{flex:1; text-align:left;} #footer .footSec .footBot .footTerms{flex:1;} #footer .footSec .footBot .footWebma{flex:1; text-align:right;} #numbersSection{margin:0;} #numbersSection .boxListing{margin:0;} #numbersSection .boxListing .boxSingle .boxText .boxTitleLarge{font-size:200%;} #servicesSection .boxListingIcons, #projectsSection .boxListing, #projectsSectionLast .boxListing, #blogSection .boxListing{justify-content:center;} #servicesSection .boxListingIcons{flex-flow:column nowrap;} #servicesSection .boxListingIcons .boxSingle{width:100%!important; display:flex; flex-flow:row nowrap; align-content:center; justify-content:space-between; gap:2.5rem;} #servicesSection .boxListingIcons .boxSingle a{display:flex; flex-flow:row nowrap; align-content:center; justify-content:space-between; gap:2.5rem; flex:1;} #servicesSection .boxListingIcons .boxSingle .boxImage{width:60%; min-width:60%; margin:0; align-content:center;} .mainHome #servicesSection .boxListingIcons .boxSingle .boxImage{width:15rem; min-width:15rem;} #servicesSection .boxListingIcons .boxSingle .boxImage img{width:100%; height:100%; object-fit:cover; max-height:30rem;} .mainHome #servicesSection .boxListingIcons .boxSingle .boxImage img{max-height:10rem;} #servicesSection .boxListingIcons .boxSingle .boxText{flex:1; align-content:center;} #servicesSection .boxListingIcons .boxSingle .boxText .boxTitleNormal{margin-left:0; margin-right:0;} main:not(.mainHome) #servicesSection .boxListingIcons .boxSingle:nth-child(2n) .boxImage{order:2;} main:not(.mainHome) #servicesSection .boxListing .boxSingle .boxText .boxTitleNormal{margin:0 0 1.25rem;} main:not(.mainHome) #servicesSection .boxListing .boxSingle .boxText .boxTitleDesc{font-size:100%; line-height:1.5;} #teamSectionInner .boxImage img{display:block; width:100%; height:100%; object-fit:cover;} #teamSectionInner .boxSingle{align-content:center;} #backTop{position:fixed; cursor:pointer; color:#999; width:2.5rem; height:2.5rem; line-height:2.5rem; z-index:90; text-align:center; font-size:150%; right:1.25rem; bottom:-5rem; transition-duration:var(--transition-duration); background:#eee; border:1px solid #dedede;} #backTop::after{display:none;} #backTop:hover{background:#444; color:#fff; border-color:#444;} .stickyHeader #backTop{bottom:7.75rem;} .projectCats{margin:0 0 2.5rem;} .projectCats ul{display:flex; flex-flow:row wrap; align-content:center; justify-content:center; gap:2.5rem;} .projectCats ul li{font-size:80%; text-transform:uppercase;} .projectCats ul li a{position:relative; display:block; padding:1.25rem 0;} .projectCats ul li.active a{color:var(--color-grey);} .projectCats ul li.active a::after{background:var(--color-grey);} .projectCats ul li.active a::before{position:absolute; top:80%; left:calc(50% - 0.125rem); width:0; height:0; border-left:0.25rem solid transparent; border-right:0.25rem solid transparent; border-top:0.25rem solid var(--color-grey); display:block; content:""; z-index:5;} main:not(.mainHome) #teamSectionInner .boxSingle{display:flex; flex-flow:column nowrap; align-content:center;} main:not(.mainHome) #teamSectionInner #crumb{margin:0 0 1.75rem; align-self:start;} main:not(.mainHome) #teamSectionInner .boxSingle .feedText{flex:1; align-content:center; align-self:center; margin:0;} /* --- RESPONSIVE --- */ @media screen and (max-width: 120rem){ /* 1920px */ } @media screen and (max-width: 105rem){ /* 1680px */ } @media screen and (max-width: 90rem){ /* 1440px */ #headLinks{gap:2.5rem; font-size:90%;} #logo{width:10rem; min-width:10rem;} } @media screen and (max-width: 75rem){ /* 1200px */ #headLinks{gap:1.25rem; font-size:80%;} #logo{width:7.5rem; min-width:7.5rem;} #menu > ul > li.submenu > a, #menu > ul > li.menu-item-has-children > a{padding:1.25rem 0;} #main:not(.mainHome) #introSection{height:65dvh;} } @media screen and (max-width: 64rem){ /* 1024px */ #menu{position:fixed; right:100%; width:100%; height:100dvh; top:0; background:#ddd; z-index:100; transition-duration:var(--transition-duration); overflow:hidden;} #menu > ul{display:block; width:100%; height:100%; overflow-x:hidden; overflow-y:auto; font-size:200%; text-align:center; align-content:start; padding-top:1.25rem;} #menu > ul > li{display:block; margin:0 0 1.25rem;} #menu > ul > li.submenu::after, #menu > ul > li.menu-item-has-children::after{top:3rem;} #menu > ul > li.submenu > a, #menu > ul > li.menu-item-has-children > a{padding:0;} #menu > ul > li > a{display:inline-block;} #menu > ul > li > ul{display:block; text-align:center; position:unset; background:rgba(0,0,0,0.15); width:auto;} #menu > ul > li > ul > li > a{color:var(--color);} #menu > ul > li > ul > li > a::after{background:var(--color);} :root.menuOpened #menu{right:0;} #menuOpener{display:flex;} #headSocials, #headLangs, #headPhone{padding:0.625rem 0;} .boxListing .boxSingle{width:calc(50% - 1.25rem);} .boxListingLastFull .boxSingle:first-child{width:100%;} .boxListingLastFull .boxSingle:not(:last-child) .boxImage img{max-width:30rem; margin:0 auto;} h1, h2.likeH1{font-size:200%;} #footer .footSec .footBot{flex-flow:column nowrap; gap:2.5rem;} #footer .footSec .footBot > div{text-align:center!important;} #innerPageOtherWrap .innerPageOtherSingle{width:50%;} #innerPageOtherWrap #innerPageOtherCurr{display:none;} #innerPageOtherWrap #innerPageOtherPrev{padding-right:1.25rem;} #innerPageOtherWrap #innerPageOtherNext{padding-left:1.25rem;} #main:not(.mainHome) #introSection{height:60dvh;} #backTop{right:0.5rem;} .stickyHeader #backTop{bottom:0.5rem;} .mainHome .boxListingTwoCol .boxSingle{width:100%;} .flexWrapper{flex-flow:column nowrap;} .flexItemWithWrapper{padding:0 1.25rem 2.5rem; text-align:center;} #numbersSection .boxListing .boxSingle{width:100%; text-align:center;} #introSection .wrapper h1{margin:0 0 9rem;} @media screen and (orientation:landscape) { #introSection .wrapper h1{margin:0 0 5rem;} } } @media screen and (max-width: 60rem){ /* 960px */ #introSection .wrapper h1{margin:0 0 8rem;} @media screen and (orientation:landscape) { #introSection .wrapper h1{margin:0 0 5rem;} } #servicesSection .boxListingIcons .boxSingle, #servicesSection .boxListingIcons .boxSingle a{gap:1.25rem;} #servicesSection .boxListingIcons .boxSingle .boxImage{width:10rem; min-width:10rem; align-content:start;} #servicesSection .boxListingIcons .boxSingle .boxImage img{max-height:20rem;} } @media screen and (max-width: 50rem){ /* 800px */ #main:not(.mainHome) #introSection{height:55dvh;} } @media screen and (max-width: 40rem){ /* 640px */ #menu{padding-bottom:8rem;} #menu > ul{font-size:150%;} #menu > ul > li{margin:0 0 0.5rem;} #menu > ul > li.submenu::after, #menu > ul > li.menu-item-has-children::after{top:2.25rem;} #menu > ul > li > ul{padding:0.625rem 1.25rem;} #headSocials, #headLangs, #headPhone{position:fixed; right:100%; width:100%; bottom:0; padding:1.25rem 0; background:#ddd; z-index:100; transition-duration:var(--transition-duration); justify-content:center;} #headSocials{bottom:5rem;} #headLangs{bottom:2.5rem;} #headPhone{bottom:0;} :root.menuOpened #headSocials, :root.menuOpened #headLangs, :root.menuOpened #headPhone{right:0;} #main:not(.mainHome) #introSection{height:50dvh;} #introSection .wrapper h1{margin:0 0 7.5rem;} #introSection .wrapper{padding:0;} #introSectionBot{padding:0.625rem 1.25rem;} #introSectionBot ul{flex-flow:column nowrap; gap:1.25rem;} #introSectionBot ul li .introSectionBotNumber{font-size:115%; display:inline-block;} #introSectionBot ul li .introSectionBotText{display:inline-block;} .boxListing .boxSingle{width:100%;} .boxListingLastFull .boxSingle:not(:last-child) .boxImage img{max-width:15rem;} .boxListing .boxSingle .boxText .boxTitleLarge{font-size:125%;} .boxListing .boxSingle .boxText .boxTitleNormal{font-size:125%;} #servicesSection .boxListingIcons .boxSingle, #servicesSection .boxListingIcons .boxSingle a{flex-flow:column nowrap;} #servicesSection .boxListingIcons .boxSingle .boxImage{width:100%!important; min-width:100%!important; order:1!important;} #servicesSection .boxListingIcons .boxSingle .boxText{text-align:center; order:2;} #servicesSection .boxListingIcons .boxSingle .boxImage img{max-height:15rem;} .mainHome #servicesSection .boxListingIcons .boxSingle .boxImage img{max-height:15rem;} .homeFormWrap .homeFormRow{flex-flow:column nowrap;} #footer .footSec .footMenu ul{flex-flow:column nowrap; gap:1.25rem;} #introSectionBotInPage{flex-flow:column nowrap; gap:2.5rem;} #introSectionBotInPageText{text-align:center;} #introSectionBotInPageSlogan{width:100%; min-width:auto;} #introSectionBotInPageSlogan img{display:block; max-width:10rem; margin:0 auto;} #introSectionBotInPageText h1{font-size:200%;} #innerPageSectionText{flex-flow:column nowrap;} #innerPageSectionTextContent{padding:0 0 2.5rem; margin:0 0 2.5rem; border-right:0 none; border-bottom:1px solid #ddd;} #innerPageSectionTextAttr{width:100%; min-width:auto;} #innerPageGallery > figure, #innerPageGallery > p, #innerPageGallery > a{max-width:calc(50% - 0.625rem); height:20rem;} #innerPageOtherWrap{flex-flow:column nowrap;} #innerPageOtherWrap .innerPageOtherSingle{width:100%; padding:1.25rem 0!important;} #innerPageOtherWrap .innerPageOtherSingleImage{height:15rem;} #teamSectionInner .boxSingle{order:2;} #teamSectionInner .boxImage{order:1;} @media screen and (orientation:landscape) { #introSection .wrapper h1{margin:0 0 3.75rem;} } } @media screen and (max-width: 35rem){ /* 560px */ #main:not(.mainHome) #introSection{height:45dvh;} #introSection .wrapper h1{margin:0 0 6.25rem;} @media screen and (orientation:landscape) { #introSection .wrapper h1{margin:0 0 3rem;} } } @media screen and (max-width: 30rem){ /* 480px */ #main:not(.mainHome) #introSection{height:40dvh;} #innerPageGallery > figure, #innerPageGallery > p, #innerPageGallery > a{max-width:100%; width:100%; height:auto;} #innerPageOtherWrap .innerPageOtherSingleImage{height:10rem;} h1, h2.likeH1{font-size:175%;} #backTop{width:2rem; height:2rem; line-height: 2rem; font-size: 133%;} #introSection .wrapper h1{margin:0 0 5rem;} @media screen and (orientation:landscape) { #introSection .wrapper h1{margin:0 0 2.5rem;} } } @media screen and (max-width: 22.5rem){ /* 360px */ }