ul.worklist li, .thing, .stat { opacity:0;} body.hasjs #preloader { position: fixed; left: 0 ; top: 0 ; width: 100%; height: 100%; z-index: 9999; background: white url(images/preloader.gif) center center no-repeat; } /* RESET */ /* ----------------------------------------- */ *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td, object, button { margin:0; padding:0 } table { border-collapse:collapse; border-spacing:0 } fieldset, img { border:0 } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal } ol, ul, li {list-style:none;} caption, th { text-align:left } h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal } q:before, q:after { content:''} /*sup {vertical-align: super;} sub {vertical-align: sub;}*/ sup, sub { vertical-align:baseline; position: relative; top:-1em; font-size:0.5em;/**/ } sub { top: 1em; } .clear { clear:both; } .clearfix:after { content: " "; display: table; clear: both; } #skiptocontent, .screen-reader-text {display:none;} /* Global reset-RESET */ /* The below restores some sensible defaults */ strong { font-weight:500 } em { font-style:italic; font-style:normal !important; font-weight:400;} a img { border:none } /* Gets rid of IE's blue borders */ a:active, a:focus, button {outline: none; border:none; -moz-outline-style: none;} @font-face { font-family: 'ag'; src: /*url('fonts/akzidenz-grotesk/akzidenzgrotesk-bold-webfont.woff2') format('woff2'),*/ url('fonts/akzidenz-grotesk/akzidenzgrotesk-bold-webfont.woff') format('woff'); font-weight: 600; font-style: normal; } @font-face { font-family: 'ag'; src: /*url('fonts/akzidenz-grotesk/akzidenzgrotesk-medium-webfont.woff2') format('woff2'),*/ url('fonts/akzidenz-grotesk/akzidenzgrotesk-medium-webfont.woff') format('woff'); font-weight: 500; font-style: normal; } @font-face { font-family: 'ag'; src: /*url('fonts/akzidenz-grotesk/akzidenzgrotesk-regular-webfont.woff2') format('woff2'),*/ url('fonts/akzidenz-grotesk/akzidenzgrotesk-regular-webfont.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: 'ag'; src: /*url('fonts/akzidenz-grotesk/akzidenzgrotesk-italic-webfont.woff2') format('woff2'),*/ url('fonts/akzidenz-grotesk/akzidenzgrotesk-regular-webfont.woff') format('woff'); font-weight: 300; font-style: italic; } @font-face { font-family: 'ag'; src: /*url('fonts/akzidenz-grotesk/akzidenzgrotesk-light-webfont.woff2') format('woff2'),*/ url('fonts/akzidenz-grotesk/akzidenzgrotesk-light-webfont.woff') format('woff'); font-weight: 300; font-style: normal; } @font-face { font-family: 'fa'; src: url('fonts/fa/fontawesome-webfont.woff2') format('woff2'), url('fonts/fa/fontawesome-webfont.woff') format('woff'); font-style: normal; } @font-face { font-family: 'icons'; src: url('fonts/icons/icomoon.eot'); src: url('fonts/icons/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icons/icomoon.woff') format('woff'), url('fonts/icons/icomoon.ttf') format('truetype'), url('fonts/icons/icomoon.svg') format('svg'); font-weight:normal; font-style:normal; } /* BASE */ /*html,body {height:100%;}*/ html { font-size:62.5%; } @media all and (max-width: 767px) { /*html { font-size:87.5%; }*/ } body { font-family: 'Montserrat', sans-serif; font-weight:400; line-height:1.4; color:#000; background:#FFF; } #logo .ng, ul li, p { font-size:1.8rem; margin:0; } #content li a, #content p a { color:#ec1c3b; text-decoration:none; font-weight:600 !important; } #content li a:hover, #content p a:hover { color:#000; } ::selection { background: #ec1c3b;color:#FFF; /* WebKit/Blink Browsers */ } ::-moz-selection { background: #ec1c3b; color:#FFF; /* Gecko Browsers */ } .textmodule p a, .textmodule li a { color:#ec1c3b; } .textmodule p a:hover, .textmodule li a:hover { color:#000; } .textmodule p:last-child{ margin-bottom:0;} .text ul li, .text p { margin:0 0 1em; padding:0 2rem 0 0; max-width:60rem; } #content h1, #content h2, #content h3, #content h4 { padding:0 1em 0 0; max-width:65rem; } #content h3:not(.refinehead) { font-weight:600; font-size:1.8rem; margin-bottom:1em; line-height:1.2; } h1,h2,h3,h4 { font-weight:600; } .text p strong:only-child { font-weight:600; font-size:40px; line-height:1.2; } p.cta { position:relative; z-index:9; /*margin-bottom:3em;*/ } p.cta a, p.cta span.link { display:inline-block; padding-bottom:2px; color:#B2B2B2; text-decoration:none; opacity:0;transition: opacity 0.5s ease; } p.cta a span, p.cta span.link span { display:inline-block; position:relative; z-index:2111; transition: all 0.2s ease; } p.cta a span::after, p.cta span.link span::after { content:""; border-bottom:1px solid #B2B2B2; display:inline-block; width:0; position:absolute; bottom:-2px; height:0; left:0; transition: all 0 linear; transition-delay:2s; z-index:-1;} p.cta a.ctashown,p.cta span.ctashown { opacity:1; } p.cta a.ctashown span::after,p.cta span.ctashown span::after { width:calc(100% + 4em); transition: width 1.2s ease, border-width 0.2s ease, border-color 0.2s ease;} /*p.cta a:hover {font-weight: 500; }*/ p.cta a:hover span::after, p.cta span.link:hover span::after { border-color: #FFF; /*border-width:1.7em;*/ } p.cta a:hover span, p.cta span.link:hover span { color:#383838; color:#FFF; /*padding-left:0.5em;*/ } p.backtotop { margin:3rem 0 0 !important; clear:both; } @media all and (min-width: 768px) { p.backtotop { display:none;} } .darktext p.cta a, .darktext p.cta span.link { color:#000; color:#383838; } .darktext p.cta a span { } .darktext p.cta a span::after, .darktext p.cta span.link span::after { border-color: #000; border-color:#383838 !important; } .darktext p.cta a:hover span, .darktext p.cta span.link:hover span { color:#FFF; color:#383838 !important; } .darktext p.cta a:hover span::after, .darktext p.cta span.link:hover span::after { border-color: #383838 !important;/*border-width:1.7em;*/ } body.post p.cta a, body.post p.cta span.link { color:#666 !important; } body.post p.cta a span { } body.post p.cta a span::after, body.post p.cta span.link span::after { border-color:#666 !important; } body.post p.cta a:hover span, body.post p.cta span.link:hover span { color:#000 !important; } body.post p.cta a:hover span::after, body.post p.cta span.link:hover span::after { border-color: #000 !important;/*border-width:1.7em;*/ } h1.maintitle, h2.maintitle, .maintitle { font-weight:600 !important; letter-spacing:-1px; font-size:4rem; line-height:1.2; margin-bottom:2rem!important; } .maintitle a { text-decoration:none; color:inherit; transition:opacity 0.2s ease; } .maintitle a:hover { opacity:0.5; } @media all and (max-width: 767px) { .maintitle { font-size:3rem; letter-spacing:-1px; } h1.maintitle, h2.maintitle, .maintitle {margin-bottom:1rem; } } @media all and (min-width: 1400px) { h1.maintitle, h2.maintitle, .maintitle { font-size:4rem; font-size:5rem; } } .movingheaderholder { } .movingheader { position:relative; transition: 0s linear; transition-property: bottom;} .movingheader p, .movingheader h2 { transition:color 0.3s ease;} .newsheader p.date{ opacity:0.7; opacity:0.5; } .scrollytitle {position:relative;} .scrollytitle .darkbg{ position:absolute; top:0; left:0; width:100%; height:100%; background: -moz-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.8)), color-stop(60%, rgba(0,0,0,0))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%); background: -o-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%); background: -ms-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%); background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 ); } /*.scrollytitle , .module { overflow:hidden;} .newsheader p { margin:0;} */ p.linkedin { width:28px; height:28px; overflow:hidden; } p.linkedin a { display:block; background-color:#FFF; background-image:url(images/linkedin2.svg); background-size:20px 20px; background-position:center center; background-repeat:no-repeat; border-radius:3px; width:100%; height:100%; text-indent:-900px; } p.linkedin a:hover { background-color:#007BB6; background-image:url(images/linkedin.svg);} #allthethings { position:fixed; top:0; width:100%; } #allthethings #everything {height:100%; overflow:hidden; } .wrapper { margin:0 auto;/* max-width:1600px; padding:0 28px;*/ position:relative; transition:all 0.3s ease; } #maincontent { position:relative; } #content { overflow:auto; overflow:hidden !important; padding-top:10rem; } @media screen and (min-width:1024px){ #content { padding-top:10rem; } body .text { padding:3rem 0 3rem 0 !important; } body .halfleft .text{ padding:3rem 0 3rem 4rem !important; } } #banner { max-width:none; } .img { display:block; width:100%; height:auto; } .img img { display:block; width:100%; height:auto; user-select:none; pointer-events:none;} /*.text .text { padding-left:0 !important; padding-right:0 !important;} */ @media screen and (max-width:1023px){ body .text { padding:3rem 0 3rem 4rem ; } body .halfleft .text{ padding:3rem 0 3rem 4rem !important; } .half { } } @media screen and (max-width:767px) { } @media screen and (max-width:639px){ body .text { padding:2rem 0 2rem 2rem ; } } .text>p:last-child, .text>ul:last-child, .text>ol:last-child, .text>ul:last-child li:last-child, .text>ol:last-child li:last-child { margin-bottom:0 !important; } .text div ul:last-child li:last-child, .text div ol:last-child li:last-child { margin-bottom:1em !important;} .pp { padding-bottom:5rem !important; } .pp1 { padding-bottom:2rem !important; } @media screen and (min-width:1024px){ .half { float:left; width:50%; margin:0 0 0 0; /* background: -moz-linear-gradient(45deg, #ff3232 0%, #a4ea00 100%); background: -webkit-linear-gradient(45deg, #ff3232 0%,#a4ea00 100%); background: linear-gradient(45deg, #ff3232 0%,#a4ea00 100%); */ } .quarter { width:25%; } .threequarters { width:75%; } .halfright { margin-left:50%;} body:not(.contact) .half:nth-child(2n+1):not(.halfright) .text { /*padding:2rem 0 2rem 4rem;*/ padding:0 0 0 4rem; } /*.half:nth-child(2n+1) .text { border:1px dashed yellow !important; padding:2rem 0 2rem 4rem; }*/ #refine .half:first-child h3, #refine .half:first-child .list:first-of-type li { padding-left:4rem; } } .full_image { width:auto; height:auto; margin-left:4rem; margin-right:4rem; } .really_full .full_image{ margin-left:0 !important; margin-right:0 !important; padding:0 !important; } .really_full { padding:0; } @media screen and (max-width:639px){ .full_image {margin-left:2rem; margin-right:2rem; } .really_full .full_image{ margin-left:0 !important; margin-right:0 !important; } } .full_image div.img { display:block; width:100%;height:auto; } .full { width:100%; height:auto; overflow:hidden; } .full div.img { width:100%; /*height:100%;*/ height:0; padding-bottom:50%; position:relative; background-size:cover; background-position:center 0; background-repeat:no-repeat; transition: 0s linear; transition-property: background-position; overflow:hidden; } .full div.img img { display:block; width:100%; height:100%; position:absolute; opacity:0; } @media screen and (max-width:639px){ .full { height:auto; } .full div.img {background-position:center center !important; height:0; padding-bottom:100%;padding-bottom:66.666%; padding-bottom:56.25%; } #refine .half:first-child .lists { padding-left:4rem; } } @media all and (min-width: 641px) and (max-width: 1023px) { #refine .half:first-child .lists { padding-left:4rem; } .newsheader { } .half { } } @media screen and (max-width:639px){ #refine .half:first-child .lists {padding-left:2rem; } } /*@media screen and (min-width:1024px){ .full { height:75vh; } } @media screen and (min-width:1600px){ .full { height:85vh; } } */ .colour { /*border:1px dashed transparent;*/} ul.squarelist { width:100%; clear:both; } ul.squarelist li { width:100%; margin:0; padding:0 !important; } ul.squarelist li div:not(.imgcaption):not(.cappad) { width:100%; height:0; padding-bottom:100%; overflow:hidden; background-repeat:no-repeat; background-size:cover !important; transition:all 0.2s ease; } ul.squarelist li div img { display:block; width:100%; height:auto; } /*@media screen and (max-width:767px) { } @media screen and (min-width:768px) and (max-width:1024px){*/ @media screen and (max-width:1023px){ ul.squarelist li { width:50%; float:left; } } @media screen and (min-width:1024px){ ul.squarelist li { width:25%; float:left; } } .video { width:calc(100%-40px); max-width:984px; padding:0 4rem; margin:0 auto; position:relative; } .really_full .video { padding:0 !important; max-width:none !important;} @media screen and (max-width:639px){ .video { padding:0 2rem; } .really_full .video { padding:0 !important;} } div.vid { width:100%; height:0; padding-bottom:56.25%; position:relative; } div.vid div.vidimg, div.vid iframe { position:absolute; width:100%; height:100%; top:0; left:0; } div.vid div.vidimg {z-index:80; overflow:hidden; background-size:cover; background-position:center; } div.vid div.vidimg img { display:block; width:101%; height:auto; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } div.vid div.vidimg .play::after { font-family: 'fa';content: "\f04b"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:81; color:white; font-size:50px; text-shadow:0 0 15px rgba(0,0,0,0.5); transition:all 0.1s ease; } div.vid div.vidimg:hover .play::after { font-size:60px; text-shadow:0 0 30px rgba(0,0,0,0.75); } .module { /*padding:4rem 0;*/ /*padding-bottom:4rem;*/ } .firstmodule {/*padding-top:4rem;*/ } body.page-id-16 .firstmodule, body.single-post .firstmodule, body.single-work .firstmodule { padding-top:0; } /*margin:3rem 0;*/ /*border:1px dashed red; */ .touchingmodule { /*padding:3rem 0;*/ } .vidmodule{/* padding:2rem 0;*/ } .statmodule { } #mainbanner { position:relative; /*margin:0 0 3rem 0 !important;*/ } @media screen and (min-width:1024px){ #mainbanner { margin:0 /*0 4rem 0*/ !important; } .module {/* margin:4rem 0;*/ /*padding:4rem 0;*/ /*padding-bottom:4rem ;*/ } .touchingmodule { /*padding:4rem 0; */} } /* #mainbanner+.module{ margin:11rem 0 4rem; } .module+.squarelist+.module{ margin:4rem 0 4rem; } .squarelist+.module{ margin:4rem 0 4rem; }*/ .twoimages {/* padding:0 4rem;*/ margin:0 auto; } .twoimages .half img { display:block; width:100%; height:auto;} @media screen and (max-width:639px){ .twoimages { /*padding:0 2rem;*/ } .module { /*padding:0 0 2rem 0;*/ } .firstmodule {/*padding-top:2rem;*/ } } #content .half .col { float:left; width:calc(33.333% - (4rem / 3)); width:33.333%; } #content .half .col ul { margin-bottom:2rem;} #content .half .col ul li { position:relative; list-style:none; margin:0 0 0.5em 0; /*padding-left:1.5em;*/ line-height:1.2; } /*#content .half .col ul li::before { content:"\2014"; position:absolute; top:0; left:0; }*/ @media screen and (min-width:1800px){ #content .half .col { width:25%; width:calc(25% - (4rem / 4)); width:33.333%; } } @media screen and (max-width:1023px){ #content .half .col { width:33.333%; } } @media screen and (max-width:639px){ #content .half .col { width:100%; } } #content .half .profile { width:50%; width:33.3333%; margin-bottom:2rem; float:left; } /*#content .half .profile+.profile { margin-top:4rem; }*/ #content .half .profile .img { width:100%; margin-bottom:2rem; max-width:9900px; } #content .half .profile .img img { width:100%; height:auto; } #content .half .profile p{ margin-right:3rem; } @media screen and (max-width:1279px){ #content .half .profile { width:100%;} #content .half .profile .img{ width:66.666%; width:50%;} #content .half .profile p{ margin-right:2rem; margin-right:3rem; } .profiles .quarter, .profiles .threequarters { width: 50%; } #content .half .profile+.profile { margin-top:1rem; } } @media screen and (max-width:1023px){ .profiles .quarter, .profiles .threequarters { width: 100%; } } @media screen and (max-width:639px){ #content .half .profile { width:100%;} #content .half .profile .img{ width:100%;} #content .half .profile p{ margin-right:1rem; } } #content .half .logo_list { } #content .half ul.logo_list li { width:calc(50% - 2rem - 2px); width:calc(50% - 2rem - 2px); margin:0 2rem 2rem 0; float:left; overflow:hidden; padding:0; ; } #content .half ul.logo_list li span { display:block; /*border:1px dotted #333; border-left: 1px solid transparent !important; border-right: 1px solid transparent !important;*/ width:100%; height:0; padding-bottom:56.25%; padding-bottom:50%; position:relative;} #content .half ul.logo_list li img { display:block; height:100%; width:auto; position:absolute; top:0; left:50%; transform:translateX(-50%) !important; } @media screen and (min-width:640px){ #content .half ul.logo_list li { width:calc(33.333333% - 2rem - 2px); } #content .half ul.logo_list li:nth-child(3n+3){ margin-right:0; } #content .half ul.logo_list li:nth-child(2n+2){ margin-right:2rem; } } @media screen and (min-width:1024px){ #content .half ul.logo_list li { width:calc(16.6666666666666% - 2rem - 2px); } #content .half ul.logo_list li:nth-child(6n+6){ margin-right:0; } #content .half ul.logo_list li:nth-child(3n+3){ margin-right:2rem; } } @media screen and (max-width:639px){ #content .half ul.logo_list li { width:calc(50% - 2rem - 2px); } #content .half ul.logo_list li:nth-child(2n+2){ margin-right:0; } } #content .half ul.logo_list li span { display:block; /*border:1px dotted #333; border-left: 1px solid transparent !important; border-right: 1px solid transparent !important;*/ width:100%; height:0; padding-bottom:56.25%; padding-bottom:50%; position:relative;} #content .half ul.logo_list li img { display:block; height:100%; position:absolute; top:0; left:50%; transform:translateX(-50%) !important; width:auto; } @media screen and (max-width:639px){ /*#content .half ul.logo_list li { width:100%; margin:0 0 2rem 0;}*/ } #map { width:100%; height:0; padding-bottom:50%; } @media screen and (max-width:639px){ #map { width:100%; height:0; padding-bottom:100%; } } .stats_callout { position:relative; } .stats_callout .img {position:absolute; z-index:12; top:0; left:0;width:100%; height:100%; background-size:cover;} .stats { position:relative; z-index:14; } .stats_callout .darkener { position:absolute; z-index:13; top:0; left:0;width:100%; height:100%; background:rgba(236,28,59,0.2); opacity:0; } .hasdarkener .darkener { } .stat { text-align:center; font-weight:600 !important; } .statpadding { padding:2rem 2rem; font-weight:600 !important; } .stat p {line-height:1.2; margin:0; height:2.4em; color:white; font-weight:600 !important;} .stat p.number{ font-size:8rem; font-weight:600 !important; height:1.2em; } .stat p.number, .stat p.number span, .stat p.number strong { font-weight:600 !important; } @media screen and (max-width:1023px){ .statpadding { padding:2rem 0 2rem; padding:6.4rem 2rem 4rem;} } @media screen and (min-width:1024px){ .stats_callout { width:100%; height:0; padding-bottom:50%; } .stats { width:100%; position:absolute; top:50%; left:0; transform:translateY(-50%); } .stat { padding:4rem 0; } .statpadding { padding:6.4rem 0 4rem; padding:8.4rem 2rem 6rem; } } .wideimage { position:relative; } .wideimage .img { width:100%; height:0; padding-bottom:25%; background-size:cover; background-repeat:no-repeat; } .wideimage .img img { opacity:0; display:none; } .wideimage .img { background-position:center bottom; } @media screen and (max-width:639px){ .wideimage .img {padding-bottom:75%; } } .mainbannerimage { background-repeat:no-repeat; background-position:center top; background-size:contain; } .mainbannerimage img { display:block; width:100%; height:auto;} /*#latestnewsheading { position:relative; z-index:99; color:#b2b2b2; } #latestnewsheading::after { content:""; display:block; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid rgba(255,0,119,0.5); transform:rotate(315deg); transform-origin: left top; position:absolute; top:1.8em; left:-71px; opacity:0; } #latestnewsheading.isvisible::after { -moz-animation: latestnewstriangle 2.4s linear forwards; -webkit-animation: latestnewstriangle 2.4s linear forwards; animation: latestnewstriangle 2.4s linear forwards; -moz-animation-delay: 1.2s; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } @-webkit-keyframes latestnewstriangle { 0% { opacity: 0; left:-200px; } 10% { opacity: 0.4;} 11% { opacity: 0.2; left:-70px;} 14% { opacity: 0.2;} 15% { opacity: 1;} 19% { opacity: 1;} 20% { opacity: 0.2;} 25% { opacity: 0.2;} 26% { opacity: 1;} 30% { opacity: 1;} 31% { opacity: 0.2;} 35% { opacity: 0.2;} 36% { opacity: 1;} 40% { opacity: 1;} 41% { opacity: 0.2;} 45% { opacity: 0.2;} 50% { opacity: 1;} 70% { opacity: 1;} 82% { opacity: 0;} 100% { opacity: 0;} } @-moz-keyframes latestnewstriangle { 0% { opacity: 0; left:-200px; } 10% { opacity: 0.4;} 11% { opacity: 0.2; left:-70px;} 14% { opacity: 0.2;} 15% { opacity: 1;} 19% { opacity: 1;} 20% { opacity: 0.2;} 25% { opacity: 0.2;} 26% { opacity: 1;} 30% { opacity: 1;} 31% { opacity: 0.2;} 35% { opacity: 0.2;} 36% { opacity: 1;} 40% { opacity: 1;} 41% { opacity: 0.2;} 45% { opacity: 0.2;} 50% { opacity: 1;} 70% { opacity: 1;} 82% { opacity: 0;} 100% { opacity: 0;} } @keyframes latestnewstriangle { 0% { opacity: 0; left:-200px; } 10% { opacity: 0.4;} 11% { opacity: 0.2; left:-70px;} 14% { opacity: 0.2;} 15% { opacity: 1;} 19% { opacity: 1;} 20% { opacity: 0.2;} 25% { opacity: 0.2;} 26% { opacity: 1;} 30% { opacity: 1;} 31% { opacity: 0.2;} 35% { opacity: 0.2;} 36% { opacity: 1;} 40% { opacity: 1;} 41% { opacity: 0.2;} 45% { opacity: 0.2;} 50% { opacity: 1;} 70% { opacity: 1;} 82% { opacity: 0;} 100% { opacity: 0;} } */.ng { width:100%; text-transform:uppercase; font-weight:600 !important;} .ng a { color:#ec1c3b; text-decoration:none; transition:color 0.2s ease; } .ng a:hover {color:#ff0066; } @media screen and (max-width:639px){ .ng { } } #masthead { position:relative; /**/ } #top { background:rgba(255,255,255,1); z-index:9999; position:relative; position:fixed; width:100%; left:0; top:0; padding:2rem 0 2rem; /*transition:padding 0.2s ease;*/ height:6rem; } body.pagescrolled #top { } body.pagescrolled #masthead { /*height:6rem; */} @media all and (max-width: 1023px) { #top { padding:1rem 0 1rem; } #masthead { } } #mainnav { width:100%; } .mainnav ul { width:100%; } .mainnav li { float:left; width:25%; margin:0; /*background: -moz-linear-gradient(45deg, #ff3232 0%, #a4ea00 100%); background: -webkit-linear-gradient(45deg, #ff3232 0%,#a4ea00 100%); background: linear-gradient(45deg, #ff3232 0%,#a4ea00 100%); */ } .mainnav li, #logo .ng { margin-bottom:0; } .ng { font-weight:600 !important; } #logo .ng a { display:inline-block;background: url(images/logo.png) no-repeat center top; background-size:contain; height:60px !important; margin:0 auto; text-indent:-900px; overflow:hidden; width:calc(100% - 12rem); min-width:240px; position:absolute; left:50%; transform:translateX(-50%); } .mainnav li a { color:#B2B2B2; display:inline-block; text-decoration:none; transition:color 0.3s ease; } .mainnav li a:hover { color:#000; } body.tax-discipline .mainnav li#menu-item-44 a, body.tax-sector .mainnav li#menu-item-44 a, .mainnav li.current-menu-item a, .mainnav li.current_page_item a{ color:#FFF;} /* @media all and (max-width: 1023px) {*/ .mainnav {display:none;} /*}*/ .hamburger { font-family: 'fa'; line-height:1; text-align:right; margin:0 0 0 0; font-size:3rem; overflow:hidden; position:absolute; top:25px; right:3rem; display:block; opacity:1; width:30px; height:32px; transition:all 0.2s ease; z-index:999; } @media screen and (max-width:639px){ .hamburger { right: 1rem; } } /* .hamburger span { position:absolute; top:-999em; right:-999em; } .hamburger::before { z-index:99; width:100%; line-height:1; text-align:center; text-indent:0; content: "\f0c9"; transform:translateY(-50%); } */ .hamburger::before { content:""; width:100%; height:4px; display:block; position:absolute; top:7px; left:0; border-top:2px solid rgba(236,28,59,1); border-bottom:2px solid rgba(236,28,59,1); transition:all 0.2s ease; } .hamburger::after { content:""; width:100%; height:4px; display:block; position:absolute; top:19px; left:0; border-top:2px solid rgba(236,28,59,1);border-bottom:2px solid rgba(236,28,59,1); transition:all 0.2s ease; } .hamburger:hover::before, .hamburger:hover::after {border-top-color: rgba(236,28,59,1); border-bottom-color: rgba(236,28,59,1); } body.single-work .hamburger::before, body.single-post .hamburger::before, body.post .hamburger::before, body.single-work .hamburger::after, body.single-post .hamburger::after, body.post .hamburger::after {border-top-color: rgba(0,0,0,0.75); border-bottom-color: rgba(0,0,0,0.75); } body.single-post .hamburger:hover::before, body.post .hamburger:hover::before, body.single-work .hamburger:hover::after, body.single-post .hamburger:hover::before, body.post .hamburger:hover::before, body.single-work .hamburger:hover::after {border-top-color: rgba(0,0,0,1); border-bottom-color: rgba(0,0,0,1); } @media all and (max-width: 1023px) { .hamburger { top:25px; } } .hamburger:hover { color:#FFF;} /*@media all and (min-width: 1024px) { .hamburger {display:none;} }*/ .hamburger1.opened { background:green;} .hamburger.opened::before { height:0; top:50%; left:0; border-top:0px solid white; transform:rotate(-45deg);} .hamburger.opened::after { width:100%; height:0; top:50%; left:0; border-bottom:0px solid white; transform:rotate(45deg);} #mobilenavwrap {position:fixed; /*bottom:0;*/ top:8rem; left:-100%; width:calc(100% - 4rem); width:calc(100% - 5.5rem);height:calc(100% - 8rem); width:100%; overflow:auto; z-index:9998; transition:all 0.4s ease; opacity:0; background:rgba(236,28,59,0.95); } #mobilenav { text-align:left; position:relative; height:100%; /*margin:50px 0 28px; */ } @media screen and (max-width:639px){ #mobilenavwrap { width:calc(100% - 2rem); width:calc(100% - 3.5rem); width:100%; } } #mobilenav ul { padding-top:3rem; position:relative; /*top:50%; transform:translateY(-55%);*/ } #mobilenav li { font-size:3rem; font-weight:600; margin-bottom:1em; } #mobilenav a { color:rgba(255,255,255,0.9); text-decoration:none; position:relative; left:50%; transform:translateX(-50%); width:auto; display:inline-block; } #mobilenav a:hover { color:#FFF; } #mobilenavwrap.navshown { left:0; opacity:1; } /*@media all and (min-width: 1024px){ #mobilenavwrap, #mobilenavwrap.navshown { left:-100% !important; opacity:0 !important ; } } */ @media all and (max-width: 1099px) and (min-width: 768px){ #mobilenav li { font-size:3rem; } } /* #mobilenavwrap #navcloser { font-family: 'fa'; display:inline-block; color:#FFF; line-height:1; text-align:right; font-size:4.2rem; overflow:hidden; position:absolute; top:3rem; right:4rem; display:block; opacity:1; } #mobilenavwrap #navcloser span {position:absolute; top:-999em; right:-999em; /* } #mobilenavwrap #navcloser::before { line-height:1; text-align:right; text-indent:0;content: "\f00d"; } #mobilenavwrap #navcloser:hover { opacity:0.8; } */ /* #fixednavwrap { position:relative; min-height:5rem; padding-bottom:0 !important; } @media screen and (min-width:1024px){ #fixednavwrap .nglogo, #fixednavwrap nav { width:50%; float:left; } } #fixednav { background:rgba(56,56,56,0.95); transition:all 0.3s ease; position:fixed; left:0; top:-70px; opacity:0; left:0; z-index:9999; width: 100%; } #fixednav .mainnav { } #fixednav .mainnav li { margin-bottom:0 !important; padding:0 !important; position:relative; } #fixednav .ng, #fixednav .mainnav li { height:5rem !important; } #fixednav .ng a, #fixednav .mainnav li a { display:block; position:absolute; top:50%; transform:translateY(-50%); } #fixednav.shown {top:0; opacity:1; } */ #worknav { } body.hasjs #refine,#refine {display:none; clear:both;} #refine h3 { color:#B2B2B2; color:white; font-size:1.8rem; margin:0 0 1em 0; font-weight:300 !important;} #refine h3:hover { color:#ff0066; } #view {float:left; width:25%; text-align:left; } #worknav p { font-size:1.8rem; margin-bottom:0; color:#B2B2B2; } #worknav p a { color:#B2B2B2; text-decoration:none; } #worknav p a:hover { color:#ff0066; } #worknav p a::after {font-size:1.2rem; padding-left:1rem; position:relative; top:-2px;} #worknav ul#anchorlinks { width:100%;} #worknav ul#anchorlinks li {font-size:1.8rem; float:left; width:25%; margin:0; font-weight:300; margin-bottom:0; height:1.2em;} #worknav ul#anchorlinks li a { color:#B2B2B2; transition:all 0.2s ease; padding-top:0.3em; padding-top:0.3em; position:relative; top:-0.3em; display:inline-block;} #worknav ul#anchorlinks li a:hover { color:#FFF; } ul.list li { margin-bottom:2px; } ul.list li a { display:block; color:#B2B2B2; text-decoration:none; transition:all 0.4s ease; position:relative; overflow:hidden; } ul.list li a:hover { color:#ff0066 !important; overflow: visible ;} ul.list li a.current { color:#FFF; } ul.list li a img { display:block; position:absolute; top:0; right:0; opacity:0; transition:opacity 0.3s ease; width:calc(50% - 14px); height:auto; z-index:10;} ul.list li a:hover img { opacity:1; } #refining { clear:both; position:relative; min-height:4.5rem; min-height:4rem; } @media all and (min-width: 1024px) { #worknav ul { width:50%; } #refining { top:-2rem; } } @media all and (max-width: 1023px) { #aboutnav { min-height:4rem; background:#383838; position:fixed; z-index:9999; top:6rem !important; width:100%;} } @media all and (min-width: 1024px) { #aboutnav { min-height:4rem; background:#383838; position:fixed; z-index:9999; top:8rem !important;width:100%;} body.pagescrolled #aboutnav { top:6rem !important; } body.pagescrolled #refining { } } /*#worknav { position:absolute; top:0; left:0; width:100%;}*/ #refine, #showrefine { padding-bottom:2rem; } #showrefine a.shown { color:#FFF; font-weight:400; } @media all and (max-width: 639px) { #refine h3 { margin:0 0 1em 0; } #refine .half:first-child { /*margin-bottom:2rem;*/ } #refine .half { width:50%; float:left; } #anchorlinks li:first-child a, #showrefine { padding-left:4rem;} } .anchor_, .anchor { display:none !important; height:4rem; clear:both; /*position:absolute;*/ left:0; top:0; width:10px; } @media all and (min-width: 640px) and (max-width: 1023px) { #refine .half { width:50%; float:left; } #anchorlinks li:first-child a, #showrefine { padding-left:4rem;} } @media screen and (max-width:639px){ /*#anchorlinks li:nth-child(2n+1) a, #anchorlinks li a,*/ #anchorlinks li:first-child a, #showrefine { padding-left:2rem; } .anchor_, .anchor { height:2rem; } } @media all and (min-width: 1024px) { ul.list { width:50%; float:left; /*background: -moz-linear-gradient(45deg, #ff3232 0%, #a4ea00 100%); background: -webkit-linear-gradient(45deg, #ff3232 0%,#a4ea00 100%); background: linear-gradient(45deg, #ff3232 0%,#a4ea00 100%); */} } @media all and (max-width: 1300px) { ul.list li a img { display:none !important; } } #content ul.list:last-child{ margin-bottom:3rem; } /*body.hasjsul.worklist li, */ .thing, .stat { opacity:0; top:4rem; position:relative; /*-webkit-filter: blur(15px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); filter: blur(15px);*/ } body.about ul.worklist li, body.about .thing, .stat { top:0; } /*body.hasjs ul.worklist li.appear, */.thing.appear, .stat.appear{ opacity:1; top:0; transition:all 0.75s ease; /*-webkit-filter: blur(0); -moz-filter: blur(0); -o-filter: blur(0); -ms-filter: blur(0); filter: blur(0);*/ } #footer .ng { overflow:hidden; } #footer .ng a {position:relative; z-index:999;display:inline-block; } #footer .ng a::after { content:""; display:block; width:123px; height:50px; background: url(images/logo.png) no-repeat left top; background-size:contain;margin:0 0 0 2rem;} #footer .ng span { position:absolute; left:-400px; font-size:2px;} @media screen and (min-width: 640px){ #footer .ng a::after{ margin:0 0 2rem 4rem;} } #footer { padding:2rem 0 2rem; } #footer .col { padding-bottom:1rem; } @media all and (min-width: 640px) { #footer .col { float:left; } #footer .quarter { width:25%; } #footer .threeeights { width:37.5%; } } @media all and (min-width: 640px) and (max-width: 1023px) { #footer .col:first-of-type p { padding-left:4rem; } #footer .half .half { width:calc(50% - 20px); } #footer .half .half:first-child { margin-right:40px;} } @media all and (max-width: 639px) { #footer .col p, #footer .col ul { padding-left:2rem; } #footer { padding:3rem 0 2rem; } } #footer .col p, #footer a { color:#000; text-decoration:none; transition:color 0.2s ease;} #footer a:hover { color:#ed1c3b; } /* @media screen and (min-width:1800px){ #content .half_ .half_ { width:25%; width:calc(25% - (4rem / 4)); width:33.333%; } } @media screen and (max-width:1023px){ #content .half_ { width:calc(50% - 4rem); float:left; margin-right:4rem; } #content .half_:nth-child(2n+2) { margin-right:0; } } @media screen and (max-width:639px){ #content .half_ { width:100%; } }*/ ul.social { } ul.social li a { text-indent:-500px; overflow:hidden; display:inline-block; width:36px; height:36px; margin:0 20px 20px 0; border-radius:100%; background:#134267; position:relative; float:left; } ul.social li a[href*="facebook"] { background:#3b5998; } ul.social li a[href*="twitter"] { background:#55acee; } ul.social li a[href*="youtube"] { background:#e52727; } ul.social li a[href*="instagram"] { background:#833ab4; } ul.social li a::before { content:""; display:block;font-family:'fa'; padding:1px; text-indent:0; position:absolute; color:white; text-align:left; top:50%; left:50%; transform:translate(-50%,-50%); font-size:1.5rem;} ul.social li a:hover::before{ /*text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.75);*/ } ul.social a:hover {transform:scale(1.2,1.2) !important; text-decoration:none !important} ul.social li a[href*="facebook"]::before { content:"\f09a"; } ul.social li a[href*="facebook"]:hover { background:#3b5998; } ul.social li a[href*="twitter"]::before { content:"\f099"; } ul.social li a[href*="twitter"]:hover { background:#55acee; } ul.social li a[href*="youtube"]::before { content:"\f167"; } ul.social li a[href*="youtube"]:hover { background:#e52727; } ul.social li a[href*="instagram"]::before { content:"\f16d"; } ul.social li a[href*="instagram"]:hover { background:#833ab4; } .imgholder { position:relative; overflow-x:hidden; } .imgcaption { display:block; width:50%; position:absolute; bottom:0; right:0;transform:translateX(100%); /* */ /*z-index:50; */transition:all 0.3s ease; } .imgcaption div{ padding:6rem 2rem 2rem; padding:2rem 3rem 4rem 2rem; padding:4rem; } .imgcaption p {margin-bottom:0.5em !important; } @media screen and (max-width:639px){ .imgcaption div{ padding:4rem 1rem 1rem; padding:1.5rem 3rem 3rem 1.5rem; padding:2rem; } .imgcaption p { font-size:1.6rem !important; margin:0 1.5em 1em 0; line-height:1.3 !important; } .full_image .imgcaption { width:calc(100% - 2rem); } .twoimages .imgcaption { width:calc(100% - 2rem); } .squarelist li .imgcaption { width:100%; } } @media screen and (max-width:400px){ .squarelist li .small p{ font-size:1.4rem !important;} } @media screen and (min-width:640px) and (max-width:1023px){ .full_image .imgcaption { width:calc(50% - 2rem); } .twoimages .imgcaption { width:calc(50% - 2rem); } .squarelist li .imgcaption { width:100%; } } @media screen and (min-width:1024px){ .full_image .imgcaption { width:calc(50% - 2rem); } .twoimages .imgcaption { width:calc(100% - 2rem); } .squarelist li .imgcaption { width:100%; } } @media screen and (min-width:1280px){ .full_image .imgcaption { width:25%; } .twoimages .imgcaption { width:50%; } .squarelist li .imgcaption { width:calc(100% - 2rem); } } .captionshown { transform:translateX(0);} .captionbutton { width:30px; height:30px; z-index:32; position:absolute; /*bottom:1.5rem; right:1.5rem; */ border:15px solid transparent; bottom:0; right:0; transition:all 0.3s ease; } .captionbutton::before, .captionbutton::after { position:absolute; top:calc(50% - 1px); left:50%;left:0; display:block; content:""; height:0; border-top:1px solid white; transition:all 0.2s ease; box-shadow:1px 1px 1px rgba(0,0,0,0.1); } .captionbutton::before { width:50%; width:16px; transform:rotate(-45deg) translate(50%,50%); /**/ } .captionbutton::after { left: 1px ; width:16px; transform:rotate(45deg) translate(50%,50%); /* translate(100%,100%)*/ } .closecaption { background:none !important; border:15px solid transparent !important;} .closecaption::before, .closecaption::after { top:calc(50% - 1px); left:0; width:100%; box-shadow:none; } .closecaption::before { transform:rotate(-45deg); } .closecaption::after { transform:rotate(45deg); } .darkclose.closecaption::before, .darkclose.closecaption::after { border-top:1px solid black !important; } .darkclose.captionbutton::before, .darkclose.captionbutton::after { border-top:1px solid black !important; } .captionbutton { opacity:0; right:-20px; transition:all 0.5s ease 1s; } .captionbutton.isvisible { opacity:1; right:0; /* -moz-animation: flickerload 1s linear forwards; -webkit-animation: flickerload 1s linear forwards; animation: flickerload 1s linear forwards; -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; animation-delay: 0.2s;*/ } @-webkit-keyframes flickerload { 0% { opacity: 0; } 1% { opacity:0.33;} 3% { opacity: 0.33;} 4% { opacity: 0;} 16% { opacity: 0;} 17% { opacity: 0.33;} 20% { opacity: 0.33;} 21% { opacity: 0;} 29% { opacity: 0;} 30% { opacity: 0.4;} 36% { opacity: 0.4;} 37% { opacity: 0;} 40% { opacity: 0;} 42% { opacity: 0.4;} 47% { opacity: 0.4;} 48% { opacity: 0;} 50% { opacity: 0;} 51% { opacity:0.5;} 53% { opacity: 0.5;} 54% { opacity: 0;} 66% { opacity: 0;} 67% { opacity: 0.666;} 70% { opacity: 0.666;} 71% { opacity: 0;} 79% { opacity: 0;} 80% { opacity: 0.75;} 86% { opacity: 0.75;} 87% { opacity: 0; } 90% { opacity: 0;} 92% { opacity: 0.8;} 97% { opacity: 0.8;} 98% { opacity: 0; } 99% { opacity: 0; } 100% { opacity: 1;} } @-moz-keyframes flickerload { 0% { opacity: 0; } 1% { opacity:0.33;} 3% { opacity: 0.33;} 4% { opacity: 0;} 16% { opacity: 0;} 17% { opacity: 0.33;} 20% { opacity: 0.33;} 21% { opacity: 0;} 29% { opacity: 0;} 30% { opacity: 0.4;} 36% { opacity: 0.4;} 37% { opacity: 0;} 40% { opacity: 0;} 42% { opacity: 0.4;} 47% { opacity: 0.4;} 48% { opacity: 0;} 50% { opacity: 0;} 51% { opacity:0.5;} 53% { opacity: 0.5;} 54% { opacity: 0;} 66% { opacity: 0;} 67% { opacity: 0.666;} 70% { opacity: 0.666;} 71% { opacity: 0;} 79% { opacity: 0;} 80% { opacity: 0.75;} 86% { opacity: 0.75;} 87% { opacity: 0; } 90% { opacity: 0;} 92% { opacity: 0.8;} 97% { opacity: 0.8;} 98% { opacity: 0; } 99% { opacity: 0; } 100% { opacity: 1;} } @keyframes flickerload { 0% { opacity: 0; } 1% { opacity:0.33;} 3% { opacity: 0.33;} 4% { opacity: 0;} 16% { opacity: 0;} 17% { opacity: 0.33;} 20% { opacity: 0.33;} 21% { opacity: 0;} 29% { opacity: 0;} 30% { opacity: 0.4;} 36% { opacity: 0.4;} 37% { opacity: 0;} 40% { opacity: 0;} 42% { opacity: 0.4;} 47% { opacity: 0.4;} 48% { opacity: 0;} 50% { opacity: 0;} 51% { opacity:0.5;} 53% { opacity: 0.5;} 54% { opacity: 0;} 66% { opacity: 0;} 67% { opacity: 0.666;} 70% { opacity: 0.666;} 71% { opacity: 0;} 79% { opacity: 0;} 80% { opacity: 0.75;} 86% { opacity: 0.75;} 87% { opacity: 0; } 90% { opacity: 0;} 92% { opacity: 0.8;} 97% { opacity: 0.8;} 98% { opacity: 0; } 99% { opacity: 0; } 100% { opacity: 1;} } .downloadsmodule { background:#ec1c3b; color:#FFF; padding:6rem 0; text-align: center;} @media all and (min-width: 1024px) { .downloadsmodule { padding:8vw 0; } } @media all and (min-width: 1600px) { .downloadsmodule { padding:8rem 0; } } .downloadsmodule * { color:#FFF !important; } .downloadsmodule h2 { font-size:40px; } .downloadsmodule h2 { position:relative; display:inline-block; margin:20px auto !important; padding-right:2em; } .downloadsmodule h2::after { content:""; border-bottom:3px solid white; display:block; width:100%; height:0; position:absolute; bottom:3px; left:0; } .downloadsmodule .file_downloads { } .downloadsmodule .holder { margin:0 auto !important; } @media all and (max-width: 1023px) { .downloadsmodule .holder { width:calc(100% - 40px); } } @media all and (min-width: 1024px) { .downloadsmodule .holder { width:80%; } } @media all and (min-width: 1200px) { .downloadsmodule .holder { width:66%; } } .downloadsmodule .file_downloads li { text-align:center; margin:30px 0; } @media all and (min-width: 601px) { .downloadsmodule .file_downloads { display:flex; justify-content:space-between;} .downloadsmodule .file_downloads li { /*width:calc(33% - ((40px * 2) / 3));*/ width:33%; max-width:300px; margin:60px 0; } } .downloadsmodule .file_downloads li {text-align:center; } /* 52 64 */ .downloadsmodule .file_downloads li a, .downloadsmodule .file_downloads li span { display:block; font-weight:600; } .downloadsmodule .file_downloads li a { text-decoration:underline !important;} .downloadsmodule .file_downloads li a:hover { transform:scale(1.1,1.1); } .downloadsmodule .file_downloads li a::before , .downloadsmodule .file_downloads li span::before{ content:""; display:block; width:52px; height:64px; background:url(images/doc.svg) no-repeat center top; margin:0 auto 10px; } .big_text { background:#ec1c3b; color:#FFF; padding:8rem 0; text-align: center; text-align:left !important;} @media all and (min-width: 1024px) { .big_text { padding:12vw 0; } } @media all and (min-width: 1600px) { .big_text { padding:15rem 0; } } .big_text * { color:#FFF !important; } .big_text { background-size:cover; } .big_text .file_downloads { } .big_text .holder { margin:0 auto !important; } @media all and (max-width: 1023px) { .big_text .holder { width:calc(100% - 40px); } } @media all and (min-width: 1024px) { .big_text .holder { width:80%; } } @media all and (min-width: 1200px) { .big_text .holder { width:66%; } } @media all and (min-width: 1500px) { .big_text .holder { width:50%; } } .big_text p { font-weight:400; font-size:16px; text-transform:uppercase; margin:0 0 0.5em; padding-right:3em; } .big_text p:first-child {text-transform:none; padding-right:0; font-weight:600; font-size:30px; margin:0 0 0.25em; line-height:1.2; } .big_text p:last-child { margin:0; } @media all and (min-width: 601px) { .big_text p { font-size:18px; } .big_text p:first-child { font-size:50px; } } @media all and (min-width: 1201px) { .big_text p { font-size:18px; } .big_text p:first-child { font-size:50px; } } @media all and (min-width: 1401px) { .big_text p { font-size:18px; } .big_text p:first-child { font-size:60px; } } @media all and (min-width: 1601px) { .big_text p { font-size:18px; } .big_text p:first-child { font-size:70px; } } .big_text p a:only-child { background:white; padding:10px; color:#ec1c3b !important } .big_text p a:only-child:hover { background:#ec1c3b; color:white !important }