/* ---------------------------------------------------------------------------------- Isaac Julien ---------------------------------------------------------------------------------- */ /* ----------------------------------------------------- Dark body -------------------------------------------*/ #smoothscroll.smoothscroll-init { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 40; } body.layout-hero-header #smoothscroll .scroll-content { padding-top: 100vh; } .button, .button a { height: auto; background-image: none; } /* ----------------------------------------------------------- Layout ----------------------------------------------------------- */ /* ------------------------------------------------ Containers/resets are full-width ----------------*/ #container { width: 100%; padding-top: 0; padding: 0; } body.layout-hero-header #container::before { display: none; } #hero_header > .inner { width: 100%; padding: 0; } /* ----------------------------------------------------- New utility classes for content widths ----------------*/ .container-inner-wide, .container-inner { width: 100%; box-sizing: border-box; margin: 0 auto; } .container-inner-wide { padding: 0 60px; padding-top: 0; } .container-inner { padding: 0 125px; max-width: 1660px; } #header, #header.header_fixed { background: transparent; margin: 0 0 50px; padding: 50px 0 0; width: 300px; box-sizing: border-box; opacity: 0; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; } .first-load-complete #header { opacity:1; } #header .inner, #header.header_fixed .inner { position: relative; min-height: 0; margin: 0 auto; padding: 0 50px; } body.layout-hero-header #header { height: 150px; } /* --------------------------------------------- LOGO ---------------------------------------------- */ #logo { position: absolute; z-index: 50; padding: 0; margin: 0; height: auto; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; font-family: 'Fifty Regular', Sans-Serif; text-transform: uppercase; font-weight: 200; } #logo a { height: auto; font-size: 3.2rem; line-height: 3rem; letter-spacing: 0.02rem; color: #fff; font-family: 'Fifty Regular', Sans-Serif; } #logo *{ -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ -webkit-transition: color 0.2s linear; transition: color 0.2s linear; } .section-pagenotfound #logo a, #protected_path_login #logo a, #logo a { font-family: 'Fifty Regular', Sans-Serif; color: #fff; } /* --------------------------------------------- BLACK LOGO & MENU ICON ---------------------------------------------- */ /*.invert-logo #logo *, .section-content #logo *, .section-publications #logo *, .section-news #logo *{ fill: #0F0F0F; }*/ .section-content #logo a, .section-publications #logo a, .section-news #logo a, .section-exhibitions #logo a, .section-search #logo a, .invert-logo #logo a span, .section-publications #logo a span, .section-exhibitions #logo a span, .section-search #logo a span, .section-news #logo a span { color: #0F0F0F; } .invert-logo #main-menu-reveal .container-btn .bar, .section-content #main-menu-reveal .container-btn .bar, .section-news #main-menu-reveal .container-btn .bar, .section-exhibitions #main-menu-reveal .container-btn .bar, .section-publications #main-menu-reveal .container-btn .bar, .section-search #main-menu-reveal .container-btn .bar { background-color: #0F0F0F; } /* --------------------------------------------- INVERTED BLACK LOGO ---------------------------------------------- */ /*body.navigation-open #logo *, body.navigation-open.section-publications #logo *, body.navigation-open.section-news #logo * { fill: #fff !important; }*/ body.navigation-open #logo a, body.navigation-open.section-publications #logo a, body.navigation-open.section-exhibitions #logo a, body.navigation-open.section-search #logo a, body.navigation-open.section-about #logo a, body.navigation-open.section-news #logo a, body.navigation-open #logo a span, body.navigation-open.section-publications #logo a span, body.navigation-open.section-exhibitions #logo a span, body.navigation-open.section-search #logo a span, body.navigation-open.section-about #logo a span, body.navigation-open.section-news #logo a span { color: #fff !important; } body.navigation-open.section-exhibitions #main-menu-reveal .container-btn .bar, body.navigation-open.section-search #main-menu-reveal .container-btn .bar, body.navigation-open.section-news #main-menu-reveal .container-btn .bar { background-color: #FFF; } /* --------------------------------------------- OPEN OVERLAY ---------------------------------------------- */ body.navigation-open #hero_heading, body.navigation-open .project-frame-text { opacity: 0; } body.navigation-open .cursor { display: none !important; } body.navigation-open { overflow: hidden; } body.layout-hero-header.navigation-open #header, body.navigation-open #logo { position: fixed; z-index: 2000; } body.cms-frontend-toolbar-active.layout-hero-header.navigation-open #header { top: 28px; } /*body.layout-hero-header #logo *, body.layout-hero-header #wcw_heading svg *, body.layout-hero-header #scw_heading svg *, body.layout-hero-header #slide_nav_reveal svg * { fill: #fff; }*/ #main-menu-reveal { position: absolute; z-index: 50; left: 230px; top: 21px; } #main-menu-reveal .container-btn { cursor: pointer; width: 45px; height: 45px; } #main-menu-reveal .container-btn #bars { height: 30px; width: 100%; padding-top: 14px; display: inline-block; vertical-align: top; } #protected_path_login #main-menu-reveal .container-btn .bar { background: #fff; } #main-menu-reveal .container-btn .bar { background: #fff; height: 2px; margin-bottom: 5px; -webkit-transition: max-width 0.4s; /* Safari */ transition: max-width 0.4s; max-width: 30px; } #main-menu-reveal .container-btn:hover .bar { animation: sound 0ms -800ms linear infinite alternate; } #main-menu-reveal .container-btn .first { width: 26px; } #main-menu-reveal .container-btn .second { width: 15px; } #main-menu-reveal .container-btn .third { width: 19px; } #main-menu-reveal.active .container-btn .first, #main-menu-reveal.active .container-btn .second, #main-menu-reveal.active .container-btn .third { max-width: 0; } #main-menu-reveal .container-btn:hover .first { animation-duration: 474ms; } #main-menu-reveal .container-btn:hover .second { animation-duration: 433ms; } #main-menu-reveal .container-btn:hover .third { animation-duration: 407ms; } @keyframes sound { 0% { /*opacity: .35;*/ width: 10px; } 100% { /*opacity: 1;*/ width: 20px; } } .fullscreen_slideshow { top: 0 !important; } body.layout-hero-header #container { padding-top: 0 !important; } .navigation { } .navigation ul { } .navigation ul li { } .navigation ul li a { } .navigation ul li a, .navigation ul li a:visited { } .navigation ul li a:hover { } .navigation ul li.active a, .navigation ul li.active a:visited, .navigation ul li.active a:hover { } #top_nav.navigation ul { line-height: 9.5rem; position: relative; z-index: 20; } #top_nav.navigation ul li, #top_nav.navigation ul li a, .faux-search-reveal { color: rgba(255, 255, 255, 0.8); transition: color 0.3s linear; font-size: 8.1rem; letter-spacing: 0; line-height: 9.5rem; height: 9.5rem; text-transform: uppercase; font-family: 'Fifty Regular', Sans-Serif; cursor: pointer; /*New - lab item added to nav*/ font-size: 6.1rem; letter-spacing: 0; line-height: 6.5rem; height: 7.1rem; } body.layout-hero-header #top_nav.navigation ul li a { color: rgba(255, 255, 255, 0.7); } body.layout-hero-header #top_nav.navigation ul li.active a, body.layout-hero-header.section-home #top_nav.navigation ul li a, body.layout-hero-header #top_nav.navigation ul li a:hover, .faux-search-reveal:hover { color: #fff !important; } #main-menu-overlay.searching-active #top_nav { opacity: 0; pointer-events: none; transform: translate3d(-40vw, 0,0); -webkit-transition: all 0.4s; /* Safari */ transition: all 0.4s; } #main-menu-overlay .faux-search { transform: translate3d(40vw, 0,0); max-width: 100%; opacity: 0; pointer-events: none; display: inline-block; height: 100%; width: 100%; position: absolute; top: 0; left: 0; padding: 0 10vw; box-sizing: border-box; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: all 0.4s; /* Safari */ transition: all 0.4s; } #main-menu-overlay.searching-active .faux-search { opacity: 1.0; pointer-events: auto; transform: translate3d(0, 0,0); } #main-menu-overlay .faux-search .faux-search-input, #main-menu-overlay .faux-search .faux-search-button { display: inline-block; max-width: 100%; visibility: hidden; } #main-menu-overlay .faux-search.active .faux-search-input, #main-menu-overlay .faux-search.active .faux-search-button { outline: none; visibility: visible; /*color: rgba(170, 170, 170, 0.21);*/ width: 100%; } .faux-search-button-wrapper, .faux-search-button { line-height: 1.5rem; } #main-menu-overlay .faux-search.active .faux-search-button { opacity: 0.3; } #main-menu-overlay .faux-search.active .faux-search-button.primed { opacity: 1.0; cursor: pointer; } #main-menu-overlay .faux-search.active .faux-search-input.in-use, #main-menu-overlay .faux-search.active .faux-search-input.has-input { color: #fff; } #main-menu-overlay .faux-search.active .faux-search-label { display: none; } .faux-search-input-wrapper, .faux-search-button-wrapper { width: 100%; overflow: hidden; padding: 20px 0; box-sizing: border-box; position: relative; } .faux-search-input{ font-family: 'Fifty Regular', Sans-Serif; text-transform: uppercase; font-weight: 200; font-size: 4.9rem; line-height: 6.2rem; color: #FFFFFF; letter-spacing: 0.045rem; position: relative; opacity: 0; transform: translate3d(0,70px,0); } .faux-search-button{ opacity: 0; transform: translate3d(0,-70px,0); } .faux-search.active .faux-search-input, .faux-search.active .faux-search-button{ transform: translate3d(0,0,0); opacity: 1; -webkit-transition: all 1000ms cubic-bezier(0.005, 0.645, 0.000, 1.055); transition: all 1000ms cubic-bezier(0.005, 0.645, 0.000, 1.055); -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .faux-search-input-wrapper::after { content: ''; width: 100%; position: absolute; left: 0; bottom: 0; height: 2px; background: #3333ED; display: block; width: 0; } .faux-search.active .faux-search-input-wrapper::after { width: 100%; -webkit-transition: width 1000ms cubic-bezier(0.005, 0.645, 0.000, 1.055); transition: width 1000ms cubic-bezier(0.005, 0.645, 0.000, 1.055); -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .faux-search-button{ font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; font-size: 1.6rem; color: #FFFFFF; text-transform: uppercase; letter-spacing: 0.075rem; text-align: right; } #header_quick_search { height: 0; display: inline; position: absolute; visibility: hidden; } #top_nav { width: 100%; padding: 0 10vw 0 250px; padding-top: 0; box-sizing: border-box; } #top_nav.navigation ul li a { float: none; display: inline-block; padding: 0; } #main-menu-overlay { position: fixed; width: 100vw; background: rgba(0, 0, 0, 0); top: 0; left: 0; z-index: 1001; width: 100%; height: 0%; /*opacity: 0;*/ -webkit-transition: background .35s, height .35s; transition: background .35s, height .35s; overflow: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .navigation-open #main-menu-overlay { background: rgba(0, 0, 0, 0.9); visibility: visible; height: 100vh; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #main-menu-overlay .navigation ul li{ width: 100%; float: none; margin: 0; display: block; clear: both; } .navigation-open #main-menu-overlay li { -webkit-animation: fadeInRight .8s cubic-bezier(0.030, 0.420, 0.145, 1.005) forwards; animation: fadeInRight .8s cubic-bezier(0.030, 0.420, 0.145, 1.005) forwards; -webkit-animation-delay: .35s; animation-delay: .35s; } .navigation-open #main-menu-overlay li:nth-of-type(2) { -webkit-animation-delay: .4s; animation-delay: .4s; } .navigation-open #main-menu-overlay li:nth-of-type(3) { -webkit-animation-delay: .45s; animation-delay: .45s; } .navigation-open #main-menu-overlay li:nth-of-type(4) { -webkit-animation-delay: .50s; animation-delay: .50s; } .navigation-open #main-menu-overlay li:nth-of-type(5) { -webkit-animation-delay: .55s; animation-delay: .55s; } .navigation-open #main-menu-overlay li:nth-of-type(6) { -webkit-animation-delay: .60s; animation-delay: .60s; } .navigation-open #main-menu-overlay li:nth-of-type(7) { -webkit-animation-delay: .65s; animation-delay: .65s; } .navigation-open #main-menu-overlay li:nth-of-type(8) { -webkit-animation-delay: .70s; animation-delay: .70s; } .navigation-open #main-menu-overlay li:nth-of-type(9) { -webkit-animation-delay: .75s; animation-delay: .75s; } #main-menu-overlay ul { list-style: none; padding: 0; height: 100%; } #main-menu-overlay ul li { display: block; position: relative; opacity: 0; } #main-menu-overlay ul li a, #main-menu-overlay ul li a:active { display: inline-block; position: relative; text-decoration: none; overflow: hidden; } span.topnav-text { position: relative; z-index: 10; } #main-menu-overlay ul li a:after, #main-menu-overlay ul li a.active:after, .faux-search-reveal .faux-search-reveal-inner:after { content: ''; position: absolute; bottom: 17px; left: 50%; width: 0%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 16px; background: #3D54C5; -webkit-transition: .35s; transition: .35s; } span.faux-search-reveal-inner { display: inline-block; position: relative; height: 100%; } #main-menu-overlay ul li a:link a:visited, #main-menu-overlay ul li a:active a:visited { color: #fdfdfd; } #main-menu-overlay ul li.active a:after, #main-menu-overlay ul li a:hover:after, #main-menu-overlay ul li a:focus:after, #main-menu-overlay ul li a:active:after, .faux-search-reveal .faux-search-reveal-inner:hover:after, .faux-search-reveal .faux-search-reveal-inner.active:after { width: 100%; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; transform: translateX(200px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(200px); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes quicklink-fadeInRight { 0% { opacity: 0; transform: translateX(10vw); } 100% { opacity: 1; transform: translateX(0); } } @keyframes quicklink-fadeInRight { 0% { opacity: 0; transform: translateX(10vw); } 100% { opacity: 1; transform: translateX(0); } } /*#main-menu-overlay ul.quicklink-menu { position: absolute; z-index: 10; width: 100vh; bottom: 10vh; left: 50px; margin-top: -1rem; -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: rotate(-90deg) translate(-50%, 50%); -moz-transform: rotate(-90deg) translate(-50%, 50%); -ms-transform: rotate(-90deg) translate(-50%, 50%); -o-transform: rotate(-90deg) translate(-50%, 50%); transform: rotate(-90deg) translate(-50%, 50%); }*/ #main-menu-overlay #top_nav.navigation ul.quicklink-menu { position: fixed; z-index: 10; width: auto; height: 20px; bottom: 50px; top: auto; left: 50px; margin-top: 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } #main-menu-overlay #top_nav.navigation ul.quicklink-menu li { width: auto; float: left; margin: 0; display: block; clear: none; margin-right: 30px; letter-spacing: 0.008rem; height: auto; font-size: 1.4rem; line-height: 1.4rem; } #main-menu-overlay #top_nav.navigation ul.quicklink-menu li a, #main-menu-overlay #top_nav.navigation ul.quicklink-menu li a:active { font-size: 1.4rem; line-height: 1.4rem; color: #fff; letter-spacing: 0.008rem; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; text-transform: uppercase; letter-spacing: 0.15rem; height: auto; } #main-menu-overlay #top_nav.navigation ul.quicklink-menu li a:link::after, #main-menu-overlay #top_nav.navigation ul.quicklink-menu li a:active::after { display: none; } .close-button { display: block; width: 40px; height: 40px; position: absolute; overflow: hidden; right: 60px; top: 60px; cursor: pointer; z-index: 2000; } .close-button > div { position: relative; } .close-button-block { width: 40px; height: 20px; position: relative; overflow: hidden; } .close-button-block:before, .close-button-block:after { content: ''; position: absolute; bottom: 0; left: calc(52% - 2px); display: block; width: 2px; height: 30px; -webkit-transform-origin: bottom center; transform-origin: bottom center; background: white; -webkit-transition: all ease-out 280ms; transition: all ease-out 280ms; } .close-button-block:last-of-type { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .close-button .in .close-button-block:before { -webkit-transition-delay: 280ms; transition-delay: 280ms; -webkit-transform: translateX(20px) translateY(-20px) rotate(45deg); transform: translateX(20px) translateY(-20px) rotate(45deg); } .close-button .in .close-button-block:after { -webkit-transition-delay: 280ms; transition-delay: 280ms; -webkit-transform: translateX(-22px) translateY(-22px) rotate(-45deg); transform: translateX(-22px) translateY(-22px) rotate(-45deg); } .close-button .out { position: absolute; top: 0; left: 0; } .close-button .out .close-button-block:before { -webkit-transform: translateX(-5px) translateY(5px) rotate(45deg); transform: translateX(-5px) translateY(5px) rotate(45deg); } .close-button .out .close-button-block:after { -webkit-transform: translateX(5px) translateY(5px) rotate(-45deg); transform: translateX(5px) translateY(5px) rotate(-45deg); } .close-button:hover .in .close-button-block:before { -webkit-transform: translateX(-5px) translateY(5px) rotate(45deg); transform: translateX(-5px) translateY(5px) rotate(45deg); } .close-button:hover .in .close-button-block:after { -webkit-transform: translateX(5px) translateY(5px) rotate(-45deg); transform: translateX(5px) translateY(5px) rotate(-45deg); } .close-button:hover .out .close-button-block:before { -webkit-transform: translateX(-20px) translateY(20px) rotate(45deg); transform: translateX(-20px) translateY(20px) rotate(45deg); } .close-button:hover .out .close-button-block:after { -webkit-transform: translateX(20px) translateY(20px) rotate(-45deg); transform: translateX(20px) translateY(20px) rotate(-45deg); } /* Content areas ----------------------------------------------------------- */ #main_content { padding: 110px 0 0; margin: 0; } .layout-fixed-header #main_content { padding-top: 149px; } #content { clear: both; } #content_module { float: left; width: 54%; /*margin-bottom: 80px;*/ } #secondary_content_module { } #sidebar { float: right; width: 38%; text-align: center; } .section-news #sidebar { float: right; width: 38%; position: absolute; right: 0; } #sidebar .image { height: auto; background: none; margin-bottom: 0; position: relative; } #sidebar .image img { display: block; margin: 0 auto; max-height: 70vh; max-width: 100%; } #sidebar .caption { padding-top: 0; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; font-size: 1.2rem; color: #ffffff; letter-spacing: .007rem; line-height: 2rem; text-transform: uppercase; padding-right: 30px; text-align: left; position: absolute; bottom: 0; padding: 15px; box-sizing: border-box; opacity: 0; transform: translate3d(0,20px,0); -moz-transition: -moz-transform 0.7s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); -o-transition: -o-transform 0.7s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); -webkit-transition: -webkit-transform 0.7s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); transition: transform 0.7s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); } #sidebar:hover .caption { opacity: 1; transform: translate3d(0,0,0); } #quicksearch_btn { color: #9e9e9e; text-decoration: none; } /* Footer ----------------------------------------------------------- */ #footer { padding: 70px 0 0; margin: 0; box-sizing: border-box; width: 100%; font-size: 1.6rem; color: #7D7D7D; letter-spacing: 0.1px; line-height: 3.8rem; background: #FCFCFC; display: block; position: relative; } #back_to_top { position: absolute; top: 50px; right: 45px; cursor: pointer; padding: 0 15px; } #footer-logo { float: left; width: 233px; padding-right: 100px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 5px; } #footer #contact_info { max-width: 1200px; float: left; width: 75%; } #footer #contact_info .contacts-list-wrapper { float: left; } #footer #contact_info .contacts-list { margin-bottom: 15px; } #footer #contact_info .contacts-list ul li { margin: 0 0 0; width: 50%; } #footer #contact_info .contacts-list-wrapper h2 { letter-spacing: 0; font-size: 2.1rem; margin-top: 0; margin-bottom: 30px; } #footer #contact_info .contacts-list-wrapper h3 { letter-spacing: 0; font-size: 1.2rem; } #footer #contact_info #contact_info_studio { width: 25%; } #footer #contact_info #contact_info_studio .contacts-list ul li { width: 100% } #footer #contact_info #contact_info_galleries { width: 75%; max-width: 700px; } #footer .copyright { /* padding-top: 200px; */ padding-top: 50px; clear: both; width: 100%; text-align: right; text-transform: uppercase; font-weight: 200; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 1.45rem; line-height: 3.0rem; letter-spacing: 0.1rem; margin-bottom: 30px; } #footer #artlogic { } #footer #copyright { } #footer a, #footer a:visited { color: #b9b3b3; } #footer a:hover { color: #7D7D7D; } #footer #artlogic { margin-right: 0; display: inline-block; vertical-align: middle; color: #c5bebe; margin-left: 20px; } #footer #copyright { margin-right: 0; display: inline-block; vertical-align: middle; color: #b9b3b3; } /* ----------------------------------------------------------- Page Specific ----------------------------------------------------------- */ /* Home ----------------------------------------------------------- */ body.layout-hero-header.section-home #content { background-color: #070707; } #hero_header > .inner, body.layout-hero-header:not(.type-fullscreen ) #main_content::before { display: none; } /* body.section-home { height: auto; background-color: #3333ED; background-image: linear-gradient(to bottom, #070707 0%, #070707 100%); }*/ .section-home .feature_panels { padding-bottom: 20vh; overflow: hidden; } .fullscreen-flickity-carousel { height: 100vh; } .fullscreen_slideshow { position: relative; overflow: hidden; margin-bottom: 20vh; height: 100vh; z-index: 10; } .fullscreen_slideshow .fullscreen-slide a { height: 100%; width: 100%; display: block; } .fullscreen_slideshow .fullscreen-slide { height: 100vh; width: 100%; color: #fff; } .fullscreen_slideshow .parallax-background { height: 100vh; background-size: cover; position: absolute; top: 0; left: 0; width: calc(100% + 80px); transform: translateX(0); } .fullscreen_slideshow .fullscreen-slide.animation .parallax-background, .fullscreen_slideshow .fullscreen-slide.is-selected .parallax-background { transform: translateX(-80px); -webkit-transition: transform 10s linear; transition: transform 10s linear; } .fullscreen_slideshow .fullscreen-slide .content { position: fixed; z-index: 40; bottom: 0; right: 0; width: 100%; transform:translateY(50px); opacity: 0; -webkit-transition: opacity .1s linear; transition: opacity .1s linear; } .fullscreen-slide.is-selected .content{ width: 100%; opacity: 1.0; transform: translateY(0); -webkit-transition: all 800ms cubic-bezier(0.005, 0.645, 0.000, 1); -webkit-transition: all 800ms cubic-bezier(0.005, 0.645, 0.000, 1.055); -moz-transition: all 800ms cubic-bezier(0.005, 0.645, 0.000, 1.055); -o-transition: all 800ms cubic-bezier(0.005, 0.645, 0.000, 1.055); transition: all 800ms cubic-bezier(0.005, 0.645, 0.000, 1.055); -webkit-transition-timing-function: cubic-bezier(0.005, 0.645, 0.000, 1); -webkit-transition-timing-function: cubic-bezier(0.005, 0.645, 0.000, 1.055); -moz-transition-timing-function: cubic-bezier(0.005, 0.645, 0.000, 1.055); -o-transition-timing-function: cubic-bezier(0.005, 0.645, 0.000, 1.055); transition-timing-function: cubic-bezier(0.005, 0.645, 0.000, 1.055); } .fullscreen-slide .content .inner { display: block; color: #fff; position: absolute; z-index: 40; right: 90px; bottom: 70px; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform:rotate(90deg); transform: rotate(90deg); width: auto; text-align: right; text-align: right; transform: rotate(90deg); font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; font-size: 1.55rem; color: #FFFFFF; letter-spacing: 0.1rem; line-height: 3.4rem; text-transform: uppercase; } .caption-node { width: 321px; height: 50px; display: block; position: absolute; bottom: 40px; right: 62px; z-index: 99; } /* Flickety customisation - fade only ------------------------------------------------------------- */ #custom_slideshow .flickity-slider { -webkit-transform: none !important; transform: none !important; } .fullscreen-slide { left: 0 !important; opacity: 0; -webkit-transition: opacity 1.5s ease-in-out 0.3s; transition: opacity 1.5s ease-in-out 0.3s; z-index: 1; } .fullscreen-slide.is-selected { opacity: 1; -webkit-transition: opacity 1.5s ease-in-out; transition: opacity 1.5s ease-in-out; z-index: 2; } #custom_slideshow .flickity-prev-next-button { z-index: 3; } .section-home .flickity-enabled.is-draggable .flickity-viewport { cursor: none !important; } body.browser-js-enabled #container-wrapper { visibility: hidden; } body.browser-js-enabled.first-load-complete #container-wrapper{ visibility: visible; } /*#preloader_mask_inner { content: ''; height: 100vh; width: 100%; position: fixed; z-index: 10050; top: 0; left: 0; right: 0; background-size: cover; opacity: 0; }*/ body.splash-loader-active #preloader #preloader_mask { background: #0c0c0c !important; } body.splash-loader-active #preloader #preloader_mask { transition: opacity 1000ms cubic-bezier(.87,.17,.18,.85) !important; -webkit-transition: opacity 1000ms cubic-bezier(.87,.17,.18,.85) !important; } /*body.splash-loader-active #preloader.splash-screen-in.loading-complete #preloader_mask { background: rgba(0, 0, 0, 0.79) !important; -moz-transition: background 6s linear; -o-transition: background 6s linear; -webkit-transition: background 6s linear; transition: background 6s linear; }*/ .splash-logo { font-family: 'Fifty Regular', Sans-Serif; color: #FFFFFF; margin: 0; font-weight: 200; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: fixed; bottom: 10vh; left: 10vh; z-index: 10100; font-size: 18vh; line-height: 16vh; opacity: 0; pointer-events: none; -moz-transition: opacity 0.8s; -o-transition: opacity 0.8s; -webkit-transition: opacity 0.8s; transition: opacity 0.8s; } .splash-loader-active .splash-logo { opacity: 1.0; -moz-transition: opacity 0s; -o-transition: opacity 0s; -webkit-transition: opacity 0s; transition: opacity 0s; } .splash-logo span{ opacity: 0; -moz-transition: color 0.8s; -o-transition: color 0.8s; -webkit-transition: color 0.8s; transition: color 0.8s; } .loading-bar-end .splash-logo span.fade-1{ opacity: 1; } body.splash-loader-active #preloader.loading-start #loader_wrapper { display: none !important; } #loader, body.first-load-complete #preloader #loader, body.first-load-complete #preloader #loader, body.splash-loader-active #preloader #loader { background: #3333F8!important; } /* Home feature_panels ----------------------------------------------------------- */ .records_list.cascade_list { clear: both; display: block;; } .records_list > ul > li.panel_media_slide { height: auto; width: 100%; max-width: 100vw; padding: 0; box-sizing: border-box; display: block; clear: both; margin-bottom: 0; position: relative; z-index: 30; min-height: 700px; } .records_list > ul > li.panel_media_slide:hover { z-index: 20; } .records_list > ul > li.panel_media_slide > a { display: block; width: 50vw; padding: 20vh 80px; padding: 180px 80px; /* Changed to pixel values as the padding was incredibly large on big screens */ box-sizing: border-box; } .records_list > ul > li.panel_media_slide.full-bleed > a { width: 100%; padding: 0; } .records_list > ul > li.panel_media_slide > a.no_link { pointer-events: none; } /* medium -----*/ .records_list > ul > li.panel_media_slide.medium > a { width: 50vw; } /* large -----*/ .records_list > ul > li.panel_media_slide.large > a { /*width: 70vw;*/ width: 60vw; } /* medium left -----*/ .records_list > ul > li.panel_media_slide.center > a { margin: 0 auto; } /* medium left -----*/ .records_list > ul > li.panel_media_slide.left > a { float: left; } /* medium right -----*/ .records_list > ul > li.panel_media_slide.right > a { float: right; text-align: right; } .records_list > ul > li.panel_media_slide.right .image-wrapper{ text-align: right; } .records_list > ul > li.panel_media_slide.right .image-wrapper .caption, .records_list > ul > li.panel_media_slide.right .image-wrapper .label { text-align: left; } /* large right -----*/ .records_list > ul > li.panel_media_slide.large.right > a { padding-right: 0; } /* large left -----*/ .records_list > ul > li.panel_media_slide.large.left { padding-left: 0; } .records_list > ul > li.panel_media_slide.restrict-height { height: 100vh; } .records_list > ul > li.panel_media_slide.restrict-height .image-wrapper, .records_list > ul > li.panel_media_slide.restrict-height .slide-img { height: 100%; } /* Full bleed -----*/ .records_list > ul > li.panel_media_slide.full-bleed { height: 100vh; width: 100%; padding: 130px 0; box-sizing: initial; } .records_list > ul > li.panel_media_slide.full-bleed > a, .records_list > ul > li.panel_media_slide.full-bleed .image_wrapper, .records_list > ul > li.panel_media_slide.full-bleed .image, .records_list > ul > li.panel_media_slide.full-bleed .outer, { height: 100vh; width: 100%; display: block; } .records_list > ul > li.panel_media_slide.full-bleed .panel-positioning-wrapper{ height: 100vh; width: 100%; } .records_list > ul > li.full-bleed.panel_media_slide .slide-img{ height: 100vh; width: 100%; background-size: cover; padding: 0; float: none; background-position: center; } .panel-positioning-wrapper { display: inline-block; position: relative; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform:translateZ(0); transform: translateZ(0); } .records_list > ul > li.panel_media_slide .image_wrapper, .records_list > ul > li.panel_media_slide .outer, .records_list > ul > li.panel_media_slide .image > span, .records_list > ul > li.panel_media_slide .image { display: inline-block; margin: 0; } .records_list > ul > li.panel_media_slide.panel_video .panel-positioning-wrapper, .records_list > ul > li.panel_media_slide.panel_video .image_wrapper, .records_list > ul > li.panel_media_slide.panel_video .outer, .records_list > ul > li.panel_media_slide.panel_video .image > span, .records_list > ul > li.panel_media_slide.panel_video .image { display: block; width: 100%; line-height: 0; } .records_list > ul > li.panel_media_slide.panel_video.restrict-height .panel-positioning-wrapper, .records_list > ul > li.panel_media_slide.panel_video.restrict-height .image_wrapper, .records_list > ul > li.panel_media_slide.panel_video.restrict-height .outer, .records_list > ul > li.panel_media_slide.panel_video.restrict-height .image > span, .records_list > ul > li.panel_media_slide.panel_video.restrict-height .image { display: inline-block; width: auto; } .records_list > ul > li.panel_media_slide .image { position: relative; z-index: 10; } .records_list > ul > li.panel_media_slide .outer { position: relative; z-index: 15; } .records_list > ul > li.panel_media_slide .fill { display: none !important; } .records_list > ul > li.panel_media_slide .slide-img { height: auto; width: auto; max-height: 100%; max-width: 100%; background-position: center; background-size: contain; background-repeat: no-repeat; display: inline-block; } .records_list > ul > li.panel_media_slide .image span { display: inline-block; vertical-align: middle; } .records_list > ul > li.panel_media_slide .image img { opacity: 1.0; -moz-transition: all 1.2s; -o-transition:all 1.2s; -webkit-transition: all 1.2s; transition: all 1.2s; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform:translateZ(0); transform: translateZ(0); position: relative; z-index: 5; max-width: 100%; } .records_list > ul > li.panel_media_slide .panel_label { -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: rotate(90deg) translate(50%, 50%); -moz-transform: rotate(90deg) translate(50%, 50%); -ms-transform: rotate(90deg) translate(50%, 50%); -o-transform: rotate(90deg) translate(50%, 50%); transform: rotate(90deg) translate(50%, 50%); color: #fff; position: absolute; right: auto; left: calc(100% + 35px); top: -37px; font-weight: 200; letter-spacing: 0.1rem; text-transform: uppercase; font-weight: 200; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; font-size: 1.55rem; color: #FFFFFF; letter-spacing: 0.008rem; line-height: 2.0rem; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*.records_list > ul > li.panel_media_slide .content { position: absolute; z-index: 20; left: calc(88% - 80px); top: 46%; color: #fff; width: 34vw; max-width: 800px; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform:translateZ(0); transform: translateZ(0); }*/ .records_list > ul > li.panel_media_slide .content .fp_title { display: inline-block; } .records_list > ul > li.panel_media_slide.left .content, .records_list > ul > li.panel_media_slide.right .content.long-word-detected { width: 42vw; } .records_list > ul > li.panel_media_slide.large .content { top: 60%; left: calc(88%); } .records_list > ul > li.panel_media_slide.right .content { right: calc(88% - 80px); left: auto; } .records_list > ul > li.panel_media_slide.right.large .content { right: calc(88%); } .records_list > ul > li.panel_media_slide.right .panel_label { right: auto; left: -20px; } .records_list > ul > li.panel_media_slide .content { position: absolute; z-index: 20; left: calc(88% - 80px); top: 46%; color: #fff; width: 33vw; max-width: 800px; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform:translateZ(0); transform: translateZ(0); } .records_list > ul > li.panel_media_slide .content h2 { font-family: 'Fifty Regular', Sans-Serif; color: #FFFFFF; margin: 0; font-weight: 200; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-bottom: 25px; color: #FFFFFF; letter-spacing: 0.042rem; text-transform: uppercase; font-size: 9.2rem; line-height: 1em; } /* fontsize / 1() */ .records_list > ul > li.panel_media_slide .content h2.dynamic-text-scale.text-wordlength-4 { font-size: 8.75rem; } .records_list > ul > li.panel_media_slide .content h2.dynamic-text-scale.text-wordlength-5 { font-size: 7.8rem; } .records_list > ul > li.panel_media_slide .content h2.dynamic-text-scale.text-wordlength-6 { font-size: 7.5rem; } .records_list > ul > li.panel_media_slide .content h2.dynamic-text-scale.text-wordlength-7 { font-size: 7.15rem; } .records_list > ul > li.panel_media_slide .content h2.dynamic-text-scale.text-wordlength-8 { font-size: 7rem; } .records_list > ul > li.panel_media_slide .content.long-word-detected h2.dynamic-text-scale.text-wordlength-8 { font-size: 6.6rem; } .records_list > ul > li.panel_media_slide .content h2.dynamic-text-scale.text-wordlength-9 { font-size: 7rem; } .records_list > ul > li.panel_media_slide .content h2.dynamic-text-scale.text-wordlength-10 { font-size: 6.25rem; } .records_list > ul > li.panel_media_slide .content h2.dynamic-text-scale.text-wordlength-11 { font-size: 6.0rem; } .records_list > ul > li.panel_media_slide .content h2.dynamic-text-scale.text-wordlength-12 { font-size: 5.75rem; } .records_list > ul > li.panel_media_slide .content h2.dynamic-text-scale.text-wordlength-13 { font-size: 5.5rem; } .records_list > ul > li.panel_media_slide .content h2.dynamic-text-scale.text-wordlength-14 { font-size: 5.25rem; } .records_list > ul > li.panel_media_slide .content h2.dynamic-text-scale.text-wordlength-15, .records_list > ul > li.panel_media_slide .content h2.dynamic-text-scale.text-wordlength-max { font-size: 5.0rem; } .records_list > ul > li.panel_media_slide .date, .records_list > ul > li.panel_media_slide .subtitle { text-transform: uppercase; font-weight: 200; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; color: #FFFFFF; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 1.5rem; color: #FFFFFF; line-height: 3.0rem; letter-spacing: 0.1rem; } .records_list > ul > li.panel_media_slide .content, .records_list > ul > li.panel_media_slide .panel_label .inner { opacity: 0; pointer-events: none; -moz-transition: all 0.8s linear; -o-transition:all 0.8s linear; -webkit-transition: all 0.8s linear; transition: all 0.8s linear; transform: translate3d(0,40px,0); } .records_list > ul > li.panel_media_slide .panel_label .inner { transform: translate3d(-30px,0,0); } .records_list > ul > li.panel_media_slide .panel-positioning-wrapper .image video { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform:translateZ(0); transform: translateZ(0); } .records_list > ul > li.panel_media_slide .image_caption { display: block; clear: both; text-align: left; padding: 20px 0 0; font-size: 1.3rem; color: #171717; letter-spacing: 0.008rem; line-height: 2.2rem; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; text-transform: uppercase; letter-spacing: 0.1rem; } /*.records_list > ul > li.panel_media_slide .panel-positioning-wrapper:hover .image video, .records_list > ul > li.panel_media_slide .panel-positioning-wrapper:hover .image img { transform: translate3d(0,0,0); } .records_list > ul > li.panel_media_slide .panel-positioning-wrapper:hover .content, .records_list > ul > li.panel_media_slide .panel-positioning-wrapper:hover .panel_label .inner { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform:translateZ(0); transform: translateZ(0); } .records_list > ul > li.panel_media_slide .panel-positioning-wrapper:hover .content, .records_list > ul > li.panel_media_slide .panel-positioning-wrapper:hover .panel_label .inner { opacity: 1.0; transform: translate3d(0,0,0); -moz-transition: -moz-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); -o-transition: -o-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); -webkit-transition: -webkit-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); transition: transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); }*/ /*body.not-scrolling .records_list > ul > li.panel_media_slide .panel-positioning-wrapper:hover .image span.hover-tilt-bg, body.not-scrolling .records_list > ul > li.panel_media_slide .panel-positioning-wrapper:hover .hover-tilt-bg { /*visibility: visible;*/ /* dont need - using intersetion to hide anyway */ /*transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; opacity: 0.2; }*/ body.scrolling li:not(.hovering-active) .panel-positioning-wrapper, body.scrolling li:not(.hovering-active) .hover-tilt, body.scrolling .panel_media_slide .read_more_link { pointer-events: none !important; } /* Removed - hover over the image to see caption .records_list > ul > li.panel_media_slide .panel-positioning-wrapper:hover .image video, .records_list > ul > li.panel_media_slide .panel-positioning-wrapper:hover .image img { transform: translate3d(0,0,0); } .records_list > ul > li.panel_media_slide .panel-positioning-wrapper:hover .content, .records_list > ul > li.panel_media_slide .panel-positioning-wrapper:hover .panel_label .inner { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform:translateZ(0); transform: translateZ(0); } .records_list > ul > li.panel_media_slide .panel-positioning-wrapper:hover .content, .records_list > ul > li.panel_media_slide .panel-positioning-wrapper:hover .panel_label .inner { opacity: 1.0; transform: translate3d(0,0,0); -moz-transition: -moz-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); -o-transition: -o-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); -webkit-transition: -webkit-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); transition: transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); } */ /*.records_list > ul > li.panel_media_slide:hover .panel-positioning-wrapper .image video, .records_list > ul > li.panel_media_slide .panel-positioning-wrapper .image img { transform: translate3d(0,0,0); } .records_list > ul > li.panel_media_slide:hover .panel-positioning-wrapper .content, .records_list > ul > li.panel_media_slide:hover .panel-positioning-wrapper .panel_label .inner { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform:translateZ(0); transform: translateZ(0); } .records_list > ul > li.panel_media_slide:hover .panel-positioning-wrapper.visible .content, .records_list > ul > li.panel_media_slide:hover .panel-positioning-wrapper .panel_label .inner { opacity: 1.0; transform: translate3d(0,0,0); -moz-transition: -moz-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); -o-transition: -o-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); -webkit-transition: -webkit-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); transition: transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); }*/ .records_list > ul > li.panel_media_slide .image span.hover-tilt-bg, .records_list > ul > li.panel_media_slide .hover-tilt-bg { width: 40vw; height: 100vh; position: absolute; top: 0; left: 0; z-index: 0; transform: scale(3) translate3d(0,0,-450px); opacity: 0.2; pointer-events: none; background-size: cover; display: none; /*visibility: hidden;*/ /* dont need - using intersetion to hide anyway */ /*transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out;*/ } .records_list > ul > li.panel_media_slide.left .image span.hover-tilt-bg { transform: scale(3) translate3d(20%,0,-450px); } .records_list > ul > li.panel_media_slide.right .image span.hover-tilt-bg { transform: scale(3) translate3d(-20%,0,-450px); } .records_list > ul > li.panel_media_slide .hover-tilt-bg:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; background: -moz-radial-gradient(center, ellipse cover, rgba(7,7,7,0) 0%, rgba(7,7,7,0.6) 56%, rgba(7,7,7,1) 80%, rgba(7,7,7,1) 100%); background: -webkit-radial-gradient(center, ellipse cover, rgba(7,7,7,0) 0%, rgba(7,7,7,0.6) 56%, rgba(7,7,7,1) 80%, rgba(7,7,7,1) 100%); background: radial-gradient(ellipse at center, rgba(7,7,7,0) 0%, rgba(7,7,7,0.6) 56%, rgba(7,7,7,1) 80%, rgba(7,7,7,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#070707',GradientType=1 ); -moz-box-shadow: inset 0 0 100px 80px #070707; -webkit-box-shadow: inset 0 0 100px 80px #070707; box-shadow: inset 0 0 100px 80px #070707; } .records_list > ul > li.panel_media_slide .panel-positioning-wrapper.panel-positioning-wrapper.animate-in.visible .content, .records_list > ul > li.panel_media_slide .panel-positioning-wrapper.panel-positioning-wrapper.animate-in.visible .panel_label .inner { opacity: 1.0; transform: translate3d(0,0,0); -moz-transition: -moz-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); -o-transition: -o-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); -webkit-transition: -webkit-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); transition: transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } /* Homepage text panels ---------------------------------------------------------- */ .records_list > ul > li.panel_homepage_text .content, .records_list > ul > li.panel_homepage_text.left .content { padding: 15vh 80px 0 80px; } .records_list > ul > li.panel_homepage_text { margin: 0; } .records_list > ul > li.panel_homepage_text .content, .records_list > ul > li.panel_homepage_text.left .content { float: left; max-width: 800px; } .records_list > ul > li.panel_homepage_text.right .content { float: right; max-width: 750px; } .records_list > ul > li.panel_homepage_text .content h2 { letter-spacing: 0; font-family: '__Recta__', Sans-Serif; font-size: 4.4rem; color: #FFFFFF; letter-spacing: 0.04rem; line-height: 5.6rem; text-transform: none; margin: 0 0 45px; } .records_list > ul > li.panel_homepage_text .content .description { display: block; color: #fff; } .records_list > ul > li.panel_homepage_text .content .panel_label { text-transform: uppercase; font-weight: 200; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 1.5rem; color: #FFFFFF; line-height: 3.0rem; letter-spacing: 0.1rem; margin-bottom: 30px; display: block; } .records_list > ul > li.panel_homepage_text .content .content-inner { padding: 0 60px; box-sizing: border-box; display: block; } .records_list > ul > li.panel_homepage_text .link.read_more_link { color: #fff; } .records_list > ul > li.panel_homepage_text .close-truncate * { stroke: #fff; } /* LEFT AND RIGHT STYLES */ /*.grid-reveal { position: fixed; top: 50%; height: 1.5em; margin: auto; text-align: center; right: -45px; -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: rotate(90deg) translate(-50%, 50%); -moz-transform: rotate(90deg) translate(-50%, 50%); -ms-transform: rotate(90deg) translate(-50%, 50%); -o-transform: rotate(90deg) translate(-50%, 50%); transform: rotate(90deg) translate(-50%, 50%); font-weight: 200; font-family: OratorStd-Slanted; font-size: 15.5px; color: #FFFFFF; letter-spacing: 0.008rem; line-height: 2.0rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-transform: uppercase; }*/ /*.animate-in.above-viewport, .animate-in.below-viewport { /*-moz-transition: -moz-transform 0s, opacity 0s; -o-transition: -o-transform 0s, opacity 0s; -webkit-transition: -webkit-transform 0s, opacity 0s; transition: transform 0s, opacity 0s; } /*.animate-in.above-viewport { -moz-transform: translateY(-7vh); -ms-transform: translateY(-7vh); -webkit-transform: translateY(-7vh); transform: translateY(-7vh) } .animate-in.below-viewport { -moz-transform: translateY(7vh); -ms-transform: translateY(7vh); -webkit-transform: translateY(7vh); transform: translateY(7vh) }*/ /*.animate-from-top{ -moz-transform: translateY(-130px); -ms-transform: translateY(-130px); -webkit-transform: translateY(-130px); transform: translateY(-130px) } .animate-from-bottom { -moz-transform: translateY(130px); -ms-transform: translateY(130px); -webkit-transform: translateY(130px); transform: translateY(130px) } .animate-from-bottom, .animate-from-top{ moz-transition: -moz-transform 0s, opacity 0s; -o-transition: -o-transform 0s, opacity 0s; -webkit-transition: -webkit-transform 0s, opacity 0s; transition: transform 0s, opacity 0s; } .animate-from-bottom.visible, .animate-from-top.visible { -moz-transition: -moz-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); -o-transition: -o-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); -webkit-transition: -webkit-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); transition: transform 5s cubic-bezier(.18, 1, .21, 1), opacity 5s cubic-bezier(.18, 1, .21, 1); -moz-transform: translateY(0) translateY(0) !important; -ms-transform: translateY(0) translateY(0) !important; -webkit-transform: translateY(0) translateY(0) !important; transform: translateY(0) translateY(0) !important; }*/ /* Exhibitions ----------------------------------------------------------- */ /*#exhibitions-grid-container .records_list ul li { width: 100%; display: block; clear: both; margin-right: 0; } #exhibitions-grid-container .records_list ul li .title-wrapper { float: left; } #exhibitions-grid-container .records_list .content .date { float: right; } #exhibitions-grid-container .records_list .content .projects { clear: both; float: left; }*/ .exhibition_list.records_list > ul > li{ width: 100%; display: block; margin-bottom: 60px; } .exhibition_list.records_list ul li .content { width: 60%; } .exhibition_list.records_list ul li .content h2 { font-size: 3rem; line-height: 4rem; margin-bottom: 10px; display: inline-block; } /*.exhibition_list.records_list ul li a .content h2::after { content: ''; width: 100%; background: #010101; height: 2px; display: block; margin-top: 0; }*/ #popup_content .exhibition_list.records_list ul li a .content h2::after { background: #fff; } .exhibition_list.records_list .content .link.read_more_link { display: none; } .exhibition_list.records_list ul li .date-module { float: right; font-size: 1.4rem; line-height: 3.0rem; text-transform: uppercase; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; color: #111; letter-spacing: 0.1rem; } #popup_content .exhibition_list.records_list ul li .date-module { color: #fff; } /* News ----------------------------------------------------------- */ .subsection-news-record.container-inner { min-height: 100vh; } /* Tile list Cascading columns of list items ----------------------------------------------------------- */ .records_list.tile_list { width: auto; margin-right: -20px; } .records_list.tile_list ul { display: inline-block; vertical-align: top; clear: none; width: 25%; margin-right: 0; padding-right: 20px; box-sizing: border-box; } .records_list.tile_list ul:last-child { margin-right: 0; } .records_list.tile_list ul li { width: auto; margin: 0 0 30px; } .records_list.tile_list ul li .image { margin: 0 0 15px; } .records_list.tile_list ul li .image > span { position: static; display: block; } .records_list.tile_list ul li .image, .records_list.tile_list ul li .image span { height: auto; width: auto; } .records_list.tile_list ul li .image::after { display: none; } .records_list.tile_list ul li .image span img { max-height: none; } .records_list.tile_list ul li .content { } /* Scattered tile list ----------------------------------------------------------- */ .records_list.tile_list.scatter_list ul { width: 34%; margin-left: 8%; margin-right: 8%; float: left; padding-right: 0; display: block; visibility: hidden; } .records_list.tile_list.scatter_list.scatter-list-initialised ul, .records_list.tile_list.scatter_list.scatter-list-initialised ul li { visibility:visible; -webkit-transition: transform 0.3s cubic-bezier(0,.61,.31,1.02), padding 0.3s cubic-bezier(0,.61,.31,1.02); -moz-transition: transform 0.3s cubic-bezier(0,.61,.31,1.02), padding-top 0.3s cubic-bezier(0,.61,.31,1.02); -o-transition: transform 0.3s cubic-bezier(0,.61,.31,1.02), padding-top 0.3s cubic-bezier(0,.61,.31,1.02); transition: transform 0.3s cubic-bezier(0,.61,.31,1.02), padding-top 0.3s cubic-bezier(0,.61,.31,1.02); } .scatter_grey_bg { background: #fbfbfb; padding-top: 85px; } .records_list.tile_list.scatter_list ul { width: 33%; margin-left: 8.25%; margin-right: 8.25%; float: left; padding-right: 0; display: block; visibility: hidden; } .records_list.tile_list.scatter_list ul li .content h2{ font-size: 4rem; line-height: 5rem; } .records_list.tile_list.scatter_list ul li .content .link.read_more_link { margin-top: 25px; } .container-inner-wide.records_list.tile_list.scatter_list { background: #fbfbfb; padding-top: 9vh; } .records_list.tile_list ul li .image { width: 100%; display: block; } /* Publications / News ----------------------------------------------------------- */ .section-news .heading_wrapper h1, .section-publications .heading_wrapper h1 { font-size: 6.9rem; line-height: 7.0rem; } .section-publications .heading_wrapper.long-word-detected h1, .section-news .heading_wrapper.long-word-detected h1, .section-news .heading_wrapper h1.text-wordlength-medium, .section-publications .heading_wrapper h1.text-wordlength-medium { font-size: 5.9rem; line-height: 6rem; } .section-news .heading_wrapper h1.text-wordlength-long, .section-publications .heading_wrapper h1.text-wordlength-long { font-size: 4.9rem; line-height: 5rem; } .news-header h1 { display: block; width: 100%; } .section-news #content, .section-publications #content { margin-bottom: 85px; } .records_list.cascade_list { background: #fbfbfb; padding-top: 85px; } /* Publications list ----------------------------------------------------------- */ .subsection-publication-record .image, .publications_list.records_list ul li.pull-right .image, .records_list ul li .image{ display: inline-block; text-align: center; } .panel-positioning-wrapper .shade-wrapper, .subsection-publication-record .image .shade-wrapper, .publications_list.records_list ul li .shade-wrapper{ position: relative; border-radius: 2.5px 2px 3px 2.6px; overflow: hidden; text-align: center; display: inline-block; width: auto; /*transform: translateZ(0);*/ box-shadow: 35px 35px 70px rgba(0,0,0,0.17), /* big, blurry */ 1px 4px 5px rgba(0,0,0,0.15), /* close, sharp */ 15px 13px 18px rgba(0,0,0,0.10); /* book casting shadow */ } .publications_list.records_list ul li.pull-left .shade-wrapper { box-shadow: 20px 35px 70px rgba(0,0,0,0.17), /* big, blurry */ 1px 4px 5px rgba(0,0,0,0.15), /* close, sharp */ 7px 14px 17px rgba(0,0,0,0.10); } /*.subsection-publication-record .image .shade-wrapper::after, .section-publications .records_list ul li .shade-wrapper::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: translateZ(0); border-radius: 2.5px 2px 3px 2.6px; }*/ .panel-positioning-wrapper .shade-wrapper::before, .subsection-publication-record .image .shade-wrapper::before, .publications_list.records_list ul li .shade-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('/images/bookshade.png'); background-size: cover; border-radius: 2.5px 2px 3px 2.6px; z-index: 10; /*transform: translateZ(0);*/ } .publications_list.records_list img { max-height: 53vh; } /* Projects ------------------------------------------------------------------------------------------- */ /* Projects list ----------------------------------------------------------- */ body.section-projects.no-page-params { /* for safari's tint and bounce colour */ background-color: #070707; /* for the document's body background color */ /*background-image: linear-gradient(to bottom, #070707 0%, #070707 100%);*/ /*overflow-y: hidden;*/ } body.section-projects.no-page-params #header { position: fixed; z-index: 1002; } body.section-projects.no-page-params #container, body.section-projects.no-page-params #main_content, body.section-projects.no-page-params #content { height: 100vh; padding: 0; margin: 0; box-sizing: border-box; } body.section-projects.no-page-params #footer{ display: none; } #projects-scroll-container { width: 100%; height: 100vh; position: absolute; top: 0; } #projects-scroll-container .progress-track { content: ''; height: 6px; position: fixed; left: 0; bottom: 0; width: 100%; display: block; background: #3333ED; z-index: 99999999; transform: scaleX(0); transform-origin: left; -webkit-transition: transform 0.2s linear; -moz-transition: transform 0.2s linear; transition: transform 0.2s linear; } #projects-scroll-container .page-track { position: relative; /*overflow-x: auto; overflow-y: hidden;*/ background: transparent; height: 100%; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /*#projects-scroll-container .page-track.page-track-left { overflow-y: visible; overflow-x: visible; }*/ .records_list.image_track.clearwithin { height: 100vh; width: 100%; } .records_list.image_track::before, .records_list.image_track::after { content: ''; position: fixed; z-index: 102; display: block; height: 100vh; pointer-events: none; width: 15vw; } .records_list.image_track::before { left: 0; background: -moz-linear-gradient(left, rgba(6,6,6,0.8) 0%, rgba(6,6,6,0) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(6,6,6,0.8)), color-stop(100%, rgba(6,6,6,0))); background: -webkit-linear-gradient(left, rgba(6,6,6,0.8) 0%, rgba(6,6,6,0) 100%); background: -o-linear-gradient(left, rgba(6,6,6,0.8) 0%, rgba(6,6,6,0) 100%); background: -ms-linear-gradient(left, rgba(6,6,6,0.8) 0%, rgba(6,6,6,0) 100%); background: linear-gradient(to right, rgba(6,6,6,0.8) 0%, rgba(6,6,6,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#060606', endColorstr='#ededed', GradientType=1 ); } .records_list.image_track::after { right: 0; visibility: visible; background: -moz-linear-gradient(left, rgba(6,6,6,0) 0%, rgba(6,6,6,0.8) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(6,6,6,0)), color-stop(100%, rgba(6,6,6,0.8))); background: -webkit-linear-gradient(left, rgba(6,6,6,0) 0%, rgba(6,6,6,0.8) 100%); background: -o-linear-gradient(left, rgba(6,6,6,0) 0%, rgba(6,6,6,0.8) 100%); background: -ms-linear-gradient(left, rgba(6,6,6,0) 0%, rgba(6,6,6,0.8) 100%); background: linear-gradient(to right, rgba(6,6,6,0) 0%, rgba(6,6,6,0.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#060606', GradientType=1 ); } #projects-list.animating .page-track.page-track-right, #projects-list.animating .page-track.page-track-left { -webkit-transition: transform 0.8s cubic-bezier(.18, 1, .21, 1); -moz-transition: transform 0.8s cubic-bezier(.18, 1, .21, 1); transition: transform 0.8s cubic-bezier(.18, 1, .21, 1); } body.dragging #projects-list .page-track.page-track-right a { pointer-events: none; } body.dragging .cursor-area { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } body.dragging #projects-list { cursor: grabbing; cursor: -moz-grabbing; cursor: -webkit-grabbing; } #projects-scroll-container .project-frame { overflow: hidden; position: fixed; height: 100vh; width: 100%; z-index: 100; } #projects-scroll-container .project-frame.project-frame-text { pointer-events: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #projects-scroll-container .project-item { width: 100vw; height: 100vh; padding: 18vh 15%; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; position: relative; } /*#projects-scroll-container .project-item-text { opacity: 0.1; -webkit-transition: opacity 0.8s cubic-bezier(.18, 1, .21, 1); -moz-transition: opacity 0.8s cubic-bezier(.18, 1, .21, 1); transition: opacity 0.8s cubic-bezier(.18, 1, .21, 1); } #projects-scroll-container .project-item-text.active { opacity: 1.0; } */ #projects-scroll-container .project-item.pull-down { padding: 23vh 15% 13vh 15%; } #projects-scroll-container .project-item.pull-up { padding: 13vh 15% 23vh 15%; } #projects-scroll-container .project-item { } #projects-scroll-container .project-item.skew-down{ padding-top: 24vh; padding-bottom: 20vh; } #projects-scroll-container .project-item.skew-up { padding-bottom: 27vh; padding-top: 13vh; } #projects-scroll-container .project-item a { width: auto; height: 100%; max-height: 100%; max-width: 100%; display: inline-block; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; position: relative; } #projects-scroll-container .image-wrapper { width: auto; max-height: 100%; max-width: 100%; z-index: 4; position: relative; display: inline-block; -webkit-animation-name: Floating; -webkit-animation-duration: 8s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: Floating; -moz-animation-duration: 8s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; opacity: 0; /*will-change: opacity;*/ } #projects-scroll-container .image-wrapper.visible { opacity: 1.0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } @-webkit-keyframes Floating { from {-webkit-transform:translate(0, 0px);} 65% {-webkit-transform:translate(0, 35px);} to {-webkit-transform: translate(0, -0px);} } @-moz-keyframes Floating { from {-moz-transform:translate(0, 0px);} 65% {-moz-transform:translate(0, 35px);} to {-moz-transform: translate(0, -0px);} } .project-item.hidden-off-screen .image-wrapper img{ visibility: hidden; } #projects-scroll-container .image-wrapper img{ max-height: 64vh; max-width: 100%; float: left; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*opacity: 0.4;*/ /*-webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out;*/ } /*#projects-scroll-container .project-item.active .image-wrapper img{ opacity: 1.0; }*/ #projects-scroll-container .project-item .title-wrapper { text-align: left; width: 100%; z-index: 5; position: relative; box-sizing: border-box; opacity: 0; -webkit-transition: opacity 0.1s ease-in-out; -moz-transition: opacity 0.1s ease-in-out; transition: opacity 0.1s ease-in-out; } #projects-scroll-container .project-item .title-wrapper.visible { opacity: 1.0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } #projects-scroll-container .project-item .title-wrapper span h2 { display: block; max-width: 750px; margin-left: -8vw; } #projects-scroll-container .project-item .title-wrapper h2 { font-weight: 200; font-size: 9.2rem; color: #FFFFFF; letter-spacing: 0.057rem; line-height: 8.5rem; text-transform: uppercase; margin: 0; } #projects-scroll-container .project-item .year { -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: rotate(90deg) translate(50%, 50%); -moz-transform: rotate(90deg) translate(50%, 50%); -ms-transform: rotate(90deg) translate(50%, 50%); -o-transform: rotate(90deg) translate(50%, 50%); transform: rotate(90deg) translate(50%, 50%); color: #fff; position: absolute; left: -17px; top: -26px; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; font-size: 1.55rem; line-height: 2.0rem; font-weight: 200; letter-spacing: 0.1rem; text-transform: uppercase; font-weight: 200; color: #FFFFFF; margin: 0; } #projects-scroll-container .project-item .year-inner { opacity: 0; display: inline-block; transform: translate(-60px, 0); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #projects-scroll-container .project-item.active .year-inner { opacity: 1.0; transform: translate(0,0); } .project-scroll { height: 100vh; width: 15vw; /*max-width: 250px;*/ position: fixed; top: 0; bottom: 0; z-index: 200; cursor: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .project-scroll.project-scroll-prev { left: 0; } .project-scroll.project-scroll-next { right: 0; } .project-scroll.project-scroll-next .cursor { margin-left: -90px; } .cursor { position: fixed; left: 0; top: 0; z-index: 9999; display: none; pointer-events: none; cursor: none; } .cursor.hide, .cursor-area:hover .cursor.hide { display: none; visibility: none; } /*.project-scroll:hover .cursor { display: block; }*/ .cursor-area { cursor: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .cursor-area:hover .cursor { display: block; } .cursor.cursor-down { margin-top: -90px; margin-left: -7px; } /*.cursor-area.hero-cursor { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }*/ .scroll-prompt { position: fixed; width: 100%; bottom: 4vw; text-align: center; color: #aaa; text-transform: uppercase; font-size: 1.9rem; color: #3C3C3C; letter-spacing: .08rem; line-height: 6.9rem; bottom: 4vh; display: none; font-family: 'Fifty Regular', Sans-Serif; animation: scrollpulse 7s infinite; } @keyframes scrollpulse { 0% { color: #1d1d1d; } 50% { color: #555; } 100% { color: #1d1d1d; } } .project-background-slides { position: fixed; z-index: 0; will-change: opacity; } .project-background-slide { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-size: cover; z-index: 0; pointer-events: none; opacity: 0; background-position: center; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .project-background-slide.visible { opacity: 0.11; -webkit-transition: opacity 1.5s ease-in-out; -moz-transition: opacity 1.5s ease-in-out; transition: opacity 1.5s ease-in-out; } #projects-list-container { display: none; overflow: hidden; } #projects-list-container .records_list ul li .content h2, #projects-list-container .subtitle, #projects-list-container .link.read_more_link { color: #fff; } /* Projects detail ----------------------------------------------------------- */ body.layout-hero-header #main_content, body.layout-hero-header #main_content { padding-top: 0 !important; /*background: #010101;*/ position: relative; z-index: 60; } body.layout-hero-header #content { position: relative; min-height: 100vh; box-sizing: border-box; /*background: #fff;*/ } .projects-header.heading_wrapper { height: 0; margin: 0; } .section-projects .share_link, .section-projects .share_links { margin: 0 0 40px 0; margin-bottom: 40px; } .project-page-section { width: 100%; display: block; clear: both; /*-webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0);*/ background: #fff; z-index: 0; /*position: relative;*/ } .project-page-section.project-gallery-section { background: transparent; } .section-projects #content_module, .section-projects #secondary_content_module { width: 100%; max-width: 800px; padding: 12vh 0; } .section-projects #content_module.links-panel-active, .section-projects #secondary_content_module.links-panel-active { padding: 12vh 0 0 0; } .content_module_inner { padding-left: 55px; clear: both; } /* Section film ----------------------------------------------------------- */ .section-projects .section-film h2 { font-size: 11.7rem; color: #101010; letter-spacing: 0.072rem; line-height: 10.1rem; height: 53px; margin: 0; } /*.section-projects .video-wrapper { height: auto; overflow: hidden; position: relative; line-height: 0; background-color: #010101; background-size: cover; background-position: center; }*/ .section-projects .video-wrapper { height: 90vh; overflow: hidden; position: relative; line-height: 0; background-color: #070707; /*-webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0);*/ } .section-projects .video-wrapper::before { content: 'Film'; overflow: hidden; font-family: 'Fifty Regular', Sans-Serif; font-size: 11.7rem; color: rgba(255, 255, 255, 0.43); letter-spacing: 0.072rem; line-height: 10.1rem; text-transform: uppercase; position: absolute; padding: 0 60px; transform:translate3d(0,-53px,0); z-index: 10; } .section-projects .video-wrapper video { width: 100%; height: auto; max-height: calc(90vh - 200px); /*object-fit: cover; object-position: center;*/ -moz-transition: -moz-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; transition: transform 0.1s linear; /*transform: scale(0.8);*/ z-index: 3; position: relative; } .section-projects .video-wrapper .video-carousel-item.is-selected video{ /*transform: scale(1);*/ -moz-transition: -moz-transform 0.5s linear; -o-transition: -o-transform 0.5s linear; -webkit-transition: -webkit-transform 0.5s linear; transition: transform 0.5s linear; } .section-film .panel_header { height: 53px; } body.scrolling .section-film { pointer-events: none; } .section-film .panel_header_inner .container-inner-wide { padding: 0 60px; padding-top: 0; /*-webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0);*/ } .hide-controls .video-controls, .video-controls { position: absolute; right: 40px; top: 22px; color: #fff; z-index: 99; line-height: 3rem; opacity: 0; opacity: 0; transform: translate3d(0,-60px,0); -moz-transition: -moz-transform 1s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); -o-transition: -o-transform 1s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); -webkit-transition: -webkit-transform 1s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); transition: transform 1s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); } .show-controls .video-controls { opacity: 1.0; transform: translate3d(0,0,0); } .video-controls .control-button-wrapper { display: inline-block; height: 30px; } .video-controls .control-button { cursor: pointer; font-size: 2rem; color: #FFFFFF; letter-spacing: 0.012rem; margin-left: 20px; line-height: 4rem; } span.control-button span { display: inline-block; vertical-align: middle; line-height: 4rem; } .control-button.play { display: inline-block; } .control-button.pause { display: none; } .video-playing .control-button.play { display: none; } .video-playing .control-button.pause { display: inline-block; } .control-button.mute { display: none; } .force-sound .control-button.mute { display: inline-block; } .control-button.unmute { display: inline-block; } .force-sound .control-button.unmute { display: none; } .video-carousel { /*height: 100vh;*/ width: 100%; max-height: 90vh; } .video-carousel-item { height: 90vh; width: 100%; padding: 100px; box-sizing: border-box; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-size: cover; } .video-carousel .flickity-page-dots { display: none !important; } .video-carousel .flickity-viewport { transition: height 0.2s; } .video-carousel .flickity-prev-next-button .arrow { fill: #fff; } .video-carousel .flickity-prev-next-button { background: transparent !important; } .video-carousel .flickity-prev-next-button.next { right: 38px; } .video-carousel .flickity-prev-prev-button.prev { left: 38px; } .video-wrapper-inner { position: relative; } body.scrolling .show-controls .video-carousel-item::after, .video-carousel-item::after { content: ''; opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -moz-transition: -moz-transform 1s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); -o-transition: -o-transform 1s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); -webkit-transition: -webkit-transform 1s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); transition: transform 1s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); background: rgba(0,0,0,0.4); background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.13) 13%, rgba(0,0,0,0) 19%, rgba(0,0,0,0) 81%, rgba(0,0,0,0.4) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.4)), color-stop(13%, rgba(0,0,0,0.13)), color-stop(19%, rgba(0,0,0,0)), color-stop(81%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.4))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.13) 13%, rgba(0,0,0,0) 19%, rgba(0,0,0,0) 81%, rgba(0,0,0,0.4) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.13) 13%, rgba(0,0,0,0) 19%, rgba(0,0,0,0) 81%, rgba(0,0,0,0.4) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.13) 13%, rgba(0,0,0,0) 19%, rgba(0,0,0,0) 81%, rgba(0,0,0,0.4) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.13) 13%, rgba(0,0,0,0) 19%, rgba(0,0,0,0) 81%, rgba(0,0,0,0.4) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 ); } .show-controls .video-carousel-item::after { opacity: 1.0; } .show-controls .video-pager { display: none !important; } body.scrolling .show-controls .video-pager, .video-pager { position: absolute; bottom: 36px; right: 25px; z-index: 20; opacity: 0; transform: translate3d(0,60px,0); -moz-transition: -moz-transform 1s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); -o-transition: -o-transform 1s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); -webkit-transition: -webkit-transform 1s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); transition: transform 1s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); } .show-controls .video-pager { opacity: 1.0; transform: translate3d(0,0,0); -moz-transition: -moz-transform 1s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); -o-transition: -o-transform 1s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); -webkit-transition: -webkit-transform 1s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); transition: transform 1s cubic-bezier(.18, 1, .21, 1), opacity 1s cubic-bezier(.18, 1, .21, 1); } .video-pager-button { display: inline-block; color: #fff; text-transform: uppercase; font-size: 1.6rem; line-height: 3.0rem; text-transform: uppercase; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; color: #FFFFFF; letter-spacing: 0.1rem; text-decoration: none; padding: 10px 17px; cursor: pointer; display: inline-block; vertical-align: middle; text-align: center; position: relative; z-index: 20; } .video-pager-button span{ position: relative; z-index: 20; } .video-pager-button:after { content: ''; width: 14px; max-width: 0; display: block; background: #3D54C5; height: 7px; margin-top: -12px; margin-left: -4px; width: 100; position: absolute; z-index: 15; } .video-pager-button.active:after { max-width: 14px; transition: max-width 0.3s linear; } .video-pager-next, .video-pager-previous { position: absolute; width: 30%; top: 75px; bottom: 75px; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-size: cover; } .video-pager-next { right: 0; } .video-pager-next .cursor { margin-left: -90px; } .video-pager-previous { left: 0; } .video-pager-inner { cursor: pointer; height: 60px; width: 60px; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-size: cover; opacity: 0.3 } .video-pager-inner { cursor: pointer; height: 60px; width: 60px; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-size: cover; opacity: 0.3; } .video-pager-next:hover .video-pager-inner, .video-pager-previous:hover .video-pager-inner{ opacity: 1.0; } .section-projects #popup_content .project-popup-container, .section-projects #popup_content .project-popup-container { display: block; height: 100vh; overflow: scroll; background: #070707; padding-top: 175px; padding-bottom: 12vh; } .section-projects #popup_content .project-popup-container h2, .section-projects #popup_content .project-popup-container .subtitle, .section-projects #popup_content .project-popup-container .link.read_more_link { color: #fff; } .section-projects #popup_content .project-popup-container .link.read_more_link:hover { color: #3333ED; } #popup_box.popup-dark .close { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNyIgaGVpZ2h0PSIzNyIgdmlld0JveD0iMCAwIDM3IDM3Ij4gIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPiAgICA8cGF0aCBkPSJNMC4zOTc3MjcyNzMsMzQuNjAyMjcyNyBMMzQuMjYyOTg0MywwLjczNzAxNTc1Ii8+ICAgIDxwYXRoIGQ9Ik0wLjM5NzcyNzI3MywzNC42MDIyNzI3IEwzNC4yNjI5ODQzLDAuNzM3MDE1NzUiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDM1IDApIi8+ICA8L2c+PC9zdmc+); } /* About ----------------------------------------------------------- */ /* Search ----------------------------------------------------------- */ .search-grid-no-results { padding: 80px 50px 150px; } .search-grid-no-results h2 { font-size: 2.8rem; line-height: 3.2rem; } .section-search .heading_wrapper #quick_search form { display: none; } .section-search .records_list.detail_list > ul > li .image { position: relative; z-index: 10; line-height: 0; } .section-search .records_list.detail_list ul li .image span, .records_list ul li .icon span { display: inline-block; position: relative; } .section-search .records_list.detail_list ul li .panel_label { -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: rotate(90deg) translate(50%, 50%); -moz-transform: rotate(90deg) translate(50%, 50%); -ms-transform: rotate(90deg) translate(50%, 50%); -o-transform: rotate(90deg) translate(50%, 50%); transform: rotate(90deg); position: absolute; right: 30px; top: 12px; text-align: left; font-weight: 200; letter-spacing: 0.1rem; text-transform: uppercase; font-weight: 200; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; font-size: 1.55rem; letter-spacing: 0.008rem; line-height: 2.0rem; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0a0a0a !important; } .section-search .records_list.detail_list ul li.pull-left .panel_label { right: calc(-30px - 100%); } .section-search .records_list.detail_list ul li.pull-left .image { margin: 0 6vw 0 0; } .section-search .records_list.detail_list ul li.pull-right .image { margin: 0 0 0 6vw; } /* ----------------------------------------------------------- Global Classes ----------------------------------------------------------- */ /* Image gallery Standard page-by-page image gallery ----------------------------------------------------------- */ .section-content #header, .section-content .divider, .section-content #footer, .section-content .feature_panels .records_list ul li .panel_header { display: none; } { display: block; margin: 0 0 40px; } .section-content #main_content { padding: 0; } .image_gallery_header h2 { font-family: 'Fifty Regular', Sans-Serif; font-size: 2.3rem; letter-spacing: 0.014rem; line-height: 2.7rem; margin-bottom: 26px; text-transform: uppercase; display: block; } .image_gallery_header { padding-top: 75px; } #image_gallery { position: relative; height: 100%; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; } #image_gallery #image_container { width: calc(100% - 450px); height: 100vh; display: block; position: absolute; left: 0; top: 0; transition: none; -webkit-transition: none; transition: all 0.15s ; -webkit-transition: all 0.15s ; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } #image_gallery.expand #image_container { width:100%; } #image_gallery.expand #content_module { opacity: 0; pointer-events: none; } #image_gallery #image_container .fill { display: none !important; } #image_gallery #image_container .image, #image_gallery #image_container .image span { width: 100%; height: auto; display: block; cursor: pointer; position: relative; z-index: 10; line-height: 0; } #image_gallery #image_container .image { /*padding-top: 100px;*/ margin-bottom: 0 } #image_gallery #image_container .image span img { /*max-height: calc(100vh - 200px);*/ max-height: 100vh; } #image_gallery #content_module { width: 450px; right: 0; top: 0; display: inline; position: absolute; height: 100vh; transition: opacity 0.15s linear; -webkit-transition: opacity 0.15s linear; box-sizing: border-box; overflow: hidden; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0; } #image_gallery #content_module_inner { width: 450px; padding: 0 65px 0 30px; box-sizing: border-box; } #image_gallery #content_module .artist_title_year, #image_gallery #content_module .subtitle { font-family: 'Fifty Regular', Sans-Serif; font-size: 2.3rem; color: #171717; letter-spacing: 0.014rem; line-height: 2.7rem; margin-bottom: 26px; text-transform: uppercase; display: block; } #image_gallery #content_module .subtitle .artist { margin: 0; } #image_gallery #content_module .medium, #image_gallery #content_module .dimensions, #image_gallery #content_module .edition_details, #image_gallery #content_module .page_stats, #image_gallery #content_module .share_link, #image_gallery #content_module .share_links, #image_gallery .copyright_line { font-size: 1.3rem; color: #171717; letter-spacing: 0.008rem; line-height: 2.2rem; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; text-transform: uppercase; letter-spacing: 0.1rem; } #image_gallery #content_module .share_link, #image_gallery #content_module .share_links { border: 0; float: none; clear: both; margin-bottom: 0; border: 0; -webkit-border-radius: 0; border-radius: 0; display: block; padding-top: 40px; } #image_gallery #content_module .share_links a, #image_gallery #content_module .share_link a { text-decoration: none; padding: 0; text-align: inherit; color: #908D8D; } #image_gallery #content_module .detail_view_module, #image_gallery #secondary_content_module .detail_view_module { } #image_gallery #content_module .detail_view_module, #image_gallery #secondary_content_module .detail_view_module, #image_gallery #content_module .subtitle, #image_gallery #content_module .enquire { } #image_gallery #content_module h3 { } #image_gallery #content_module .page_stats { position: static; width: 100%; height: auto; margin-bottom: 7vh; padding: 0; color: #908D8D; } #image_gallery #content_module .page_stats a, #image_gallery #content_module .page_stats a:visited { color: #908D8D; } #image_gallery #content_module .page_stats a:hover { color: #3333ED;; } #image_gallery #content_module .page_stats .ps_links { color: #908D8D; float: left; display: inline; } #image_gallery #content_module .page_stats .ps_pages, #image_gallery #content_module .page_stats .ps_pages_indented { float: left; margin-left: 45px; } #image_gallery #content_module .page_stats .disabled, #image_gallery #content_module .ps_item.disabled { color: #d8d8d8; } #social_sharing_links.popup_vertical ul li.social_links_item a { font-size: 1.3rem; color: #171717; letter-spacing: 0.008rem; line-height: 2.2rem; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; text-transform: uppercase; letter-spacing: 0.1rem; } /* Cascading ----------------------------------------------------------- */ .heading_wrapper.cascading-page-header #sub_nav { float: left; } .cascading-page-header #sub_nav.navigation ul li a { float: left; font-size: 1.5rem; line-height: 3.0rem; text-transform: uppercase; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; color: #010101; letter-spacing: 0.1rem; text-decoration: none; display: inline-block; pointer-events: auto; position: relative; } .cascading-page-header #sub_nav.navigation ul li.active a { color: #3333ED; } .cascading-page-header #sub_nav.navigation ul li:hover a { color: #3333ED; } #content.cascading-page-content { padding: 12vh 0; background: #fff; } #content.cascading-page-content #content_module { width: 100%; max-width: 900px; } /*.section-projects #content_module, .section-projects #secondary_content_module { width: 100%; max-width: 800px; padding: 12vh 0; }*/ /*body.page-param-type-project_id #content { position: relative; min-height: 100vh; background: #fff; } */ /* Protected paths ----------------------------------------------------------- */ #protected_path_login { padding: 0; box-sizing: border-box; height: 100vh; width: 100%; background: #010101; background-size: cover; } #protected_path_login::before { content: ''; background: rgba(0, 0, 0, 0.85); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 20; } #protected_path_login #container { max-width: 100%; width: 100%; border: none; background: transparent; padding: 0; margin: 0 auto; position: relative; box-sizing: border-box; min-height: 100vh; width: 100%; z-index: 30; min-height: 100vh; } #protected_path_login #container #header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; } #protected_path_login #form_wrapper_inner { max-width: 700px; width: 100%; border: none; background: transparent; padding: 20px; margin: 0 auto; position: relative; box-sizing: border-box; } #protected_path_login #container #username, #protected_path_login #container #password { padding: 15px 15px; border: 1px solid #3D54C5; width: 100%; font-size: 2rem; margin-bottom: 30px; box-sizing: border-box; font-weight: 200; background: transparent; color: #fff; outline: none; } #protected_path_login #container h1 { color: #fff; font-size: 3rem; margin: 0 0 30px; padding: 0; font-size: 5.4rem; color: #FFFFFF; letter-spacing: 0.045rem; line-height: 7.1rem; } #form_wrapper { height: 100vh; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-size: cover; } #protected_path_login #container .button { border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background: transparent; transition: none; -webkit-transition: none; height: auto; padding: 0; } #protected_path_login #container .button a, #protected_path_login #container label { display: block; clear: both; color: #444; font-size: 18px; margin-bottom: 10px; font-size: 1.5rem; line-height: 3.0rem; text-transform: uppercase; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; color: #FFFFFF; letter-spacing: 0.1rem; margin-bottom: 5px; text-decoration: none; padding: 0; } #protected_path_login #container .button a:hover { color: #3D54C5; } /* Page not found ----------------------------------------------------------- */ .section-pagenotfound { background: #010101; color: #fff; } .section-pagenotfound h1, .section-pagenotfound h2, .section-pagenotfound h3 { color: #fff; } .section-pagenotfound #header, .section-pagenotfound #header.header_fixed { opacity: 1; } /* Records detail pagination ----------------------------------------------------------- */ .records_detail_pagination { width: 100%; background-color: #000; position: relative; overflow: hidden; } .records_detail_pagination .slide-out{ /*opacity: 0;*/ transform: translate3d(-100px,0,0); } .records_detail_pagination.fullscreen { z-index: 9999; width: 100%; height: 100%; position: fixed; top: 0; left: 0; } .records_detail_pagination .records_detail_pagination_link { width: 100%; display: block; height: 100%; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 70vh; z-index: 100; position: relative; } .records_detail_pagination * { text-decoration: none; } .records_detail_pagination .skip-status { margin-bottom: 5vh; display: block; transform: translate3d(-60px,0,0); position: relative; z-index: 101 } .records_detail_pagination .skip-status-inner { display: block; } .records_detail_pagination .skip-label { font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; font-size: 1.5rem; line-height: 3.0rem; text-transform: uppercase; letter-spacing: 0.1rem; display: inline-block; vertical-align: middle; margin-right: 20px; color: #3333ED; } .records_detail_pagination.active .skip-label { color: #FFF; moz-transition: color 1s; -o-transition: color 1s; -webkit-transition: color 1s; transition: color 1s; } .records_detail_pagination .skip-status img, .records_detail_pagination .skip-status svg { display: inline-block; vertical-align: middle; } .records_detail_pagination .skip-status svg * { fill: #3333ED; moz-transition: fill 1s; -o-transition: fill 1s; -webkit-transition: fill 1s; transition: fill 1s; } .records_detail_pagination.active .skip-status svg * { fill: #fff; } .records_detail_pagination h2, .records_detail_pagination a h2 { text-decoration: none; text-transform: uppercase; font-family: 'Fifty Regular', Sans-Serif; font-size: 8.1rem; color: #FFFFFF; letter-spacing: 0.060rem; line-height: 8.5rem; margin: 0; max-width: 800px; transition: all 0.5s; } .skip-background { background-size: cover; background-position: center; display: block; text-decoration: none; opacity: 0.13; position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; moz-transition: -moz-transform 1s, opacity 1s; -o-transition: -o-transform 1s, opacity 1s; -webkit-transition: -webkit-transform 1s, opacity 1s; transition: transform 1s, opacity 1s; } .records_detail_pagination:hover .skip-background { opacity: 0.4; } .records_detail_pagination.active .skip-background { opacity: 0.9; } /* Records list Default styling for all content grids on the site ----------------------------------------------------------- */ .records_list { } .records_list ul { margin-bottom: 0; margin-right: 0; } .records_list > ul > li { width: 100%; margin: 0 0 110px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .records_list > ul > li.last { } .records_list > ul > li:last-of-type { } .records_list ul li a, .records_list ul li a:visited { } .records_list ul li .image { float: left; width: auto; height: auto; margin: 0 0 30px; background: none; } .records_list ul li .icon { background: none; } .records_list .content, .detail_list_alt ul li .content { text-align: left; width: auto; } body.navigation-open .records_list .content, body.navigation-open .detail_list_alt ul li .content { visibility:hidden; } .records_list ul li .content h2 { margin: 0 0 25px; font-size: 6rem; line-height: 6rem; color: #111111; letter-spacing: 0; } .records_list .content .subtitle, .records_list .content .date, .records_list .content .location{ } .records_list .content .price { } .records_list .content .description { } .records_list .content .link { } .records_list .content .description, .records_list .content .location { display: none; } /* Image list A grid of images with captions e.g. Artists list ----------------------------------------------------------- */ .image_list { } .image_list ul { } .image_list ul li { } .image_list ul li .image { } .image_list ul li .content { } /* Detail list A grid which usually has an image with more preview text/content ----------------------------------------------------------- */ .detail_list { } .detail_list ul { } .detail_list ul li { display: block; float: none; margin: 0 0 150px 0; } .detail_list ul li a { display: inline-block; width: auto; float: none; } .detail_list ul li .image { width: auto; max-width: 36vw; margin: 0 75px 0 0; } .detail_list ul li .image span { width: 100%; height: auto; } .detail_list ul li .content { padding-top: 3vw; max-width: 550px; width: auto; display: inline-block; } .detail_list ul li .subtitle { max-width: 480px; } /* Right ---------------------------------------- */ .detail_list ul li.pull-right { text-align: right; } /* Positioning variations ---------------------------------------- */ .detail_list ul li.pull-right.medium, .detail_list ul li.pull-right.centre { padding: 0 6vw 0 0; } /* Images and content ---------------------------------------- */ .detail_list ul li.pull-right .image, .detail_list ul li.pull-right .content, .detail_list ul li.pull-right .subtitle { float: right; text-align: right; } .detail_list ul li.pull-right .subtitle{ clear: both; } .detail_list ul li.pull-right .image { margin: 0 0 0 5vw; } .detail_list ul li.pull-right .link.read_more_link { float: right; clear: both; } /* Left ---------------------------------------- */ .detail_list ul li.pull-left { text-align: left; } /* Positioning variations ---------------------------------------- */ .detail_list ul li.pull-left.medium, .detail_list ul li.pull-left.centre { padding: 0 0 0 6vw; } /* Images and content ---------------------------------------- */ .detail_list ul li.pull-left .image, .detail_list ul li.pull-left .content { float: left; float: left; } .detail_list ul li.pull-left .image { margin: 0 5vw 50px 0; } /* Centre ---------------------------------------- */ .detail_list ul li.centre, .detail_list ul li.centre.pull-right, .detail_list ul li.centre.pull-left { text-align: center; } /* Full list A grid where each item fills the full width of the page ----------------------------------------------------------- */ .full_list { } .full_list ul { } .full_list ul li { } .full_list ul li .image { } /* Feature panels A grid where each item fills the full width of the page ----------------------------------------------------------- */ .projects-image-gallery { clear: both; display: block; } .projects-image-gallery-inner { position: relative; } .projects-image-gallery .projects-image-gallery .feature_panels .records_list ul { margin-right: 0; width: auto; } .feature_panels > .records_list ul li.panel_image_gallery { width: 100%; margin-right: 0; margin-bottom: 0; padding-right: 0; /*position: relative;*/ } .panel-fill { width: 100%; display: block; } .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .fullwidth-image-gallery-wrapper { width: 100%; padding: 0 0 0 0; box-sizing: border-box; /*background: #070707;*/ display: block; position: relative; overflow: hidden; } .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .fullwidth_image_gallery_list { background: #070707; padding-bottom: 70px; padding-top: 70px; } .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery.panel_style_photography .fullwidth_image_gallery_list { background: #fbfbfb; } /*.projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .panel_header { display: block; margin: 0 0 40px; top: 95px; position: absolute; left: 0; right: 0; width: 100%; z-index: 100; height: 10vh; max-height: 50px; }*/ .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .panel_header { display: block; margin: 0; position: absolute; /*background: rgba(102, 51, 153, 0.5);*/ left: 0; right: 0; width: 100%; z-index: 100; height: 40vh; top: 18vh; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-attachment: fixed; pointer-events: none; } /*.projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .panel_header::before { content: ''; position: absolute; display: block; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); }*/ .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .panel_header .panel_header_inner { width: 100%; margin: 0 auto; line-height: 0; position: absolute; bottom: 20%; } /*.projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .panel_header h2 { font-size: 3.0rem; color: #FFFFFF; letter-spacing: .018rem; float: left; margin-bottom: 0; padding-top: 3px; }*/ /* T - Modified panel headings */ .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .panel_header { background: #070707; position: static; padding-top: 70px; height: auto; } .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery.panel_style_photography .panel_header { background: #fbfbfb; } .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .panel_header .panel_header_inner { position: static; } .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .fullwidth_image_gallery_list { padding-top: 0; } .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .panel_header_title { padding-left: 55px; display: block; } .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .panel_header h2 { text-decoration: none; text-transform: uppercase; font-family: 'Fifty Regular', Sans-Serif; font-size: 6.9rem; line-height: 7.3rem; color: #FFFFFF; letter-spacing: 0.072rem; position: relative; max-width: 900px; } .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery.panel_style_photography .panel_header h2 { color: #010101; } .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .panel_header .introduction { display: block; clear: both; text-align: left; padding: 20px 0 0; font-size: 1.3rem; color: #fff; letter-spacing: 0.008rem; line-height: 2.2rem; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; text-transform: uppercase; letter-spacing: 0.1rem; max-width: 70%; } .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .panel_header .subtitle { display: none; } /*.projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery.panel_style_photography .panel_header h2, .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery.panel_style_photography .panel_header .scrollnav-link { color: #070707; }*/ .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .records_list.fullwidth_image_gallery_list ul li { width: 100%; margin-right: 0; padding-right: 0; margin-bottom: 100px; } .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .fill, .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .records_list.fullwidth_image_gallery_list .fill { display: none !important; } .projects-image-gallery .fullwidth_image_gallery_list .image-gallery-item { height: 100vh; width: 100%; padding: 100px 80px; box-sizing: border-box; position: relative; } .projects-image-gallery .fullwidth_image_gallery_list .image-gallery-item > a { height: 100%; width: 100%; position: relative; display: block; } .projects-image-gallery .fullwidth_image_gallery_list .image-gallery-item .gallery-image { height: 100%; width: 100%; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .projects-image-gallery .fullwidth_image_gallery_list .image-gallery-item img { max-width: 100%; max-height: calc(100vh - 200px); /*position: absolute;*/ position: relative; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform:translateZ(0); transform: translateZ(0); } .section-content h1 { display: none; } /*.animate-in { -webkit-transform: translate3d(0, 0, 0); -moz-transform:translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); filter: alpha(enabled=false); opacity: 0; } .animate-in.visible { opacity: 1.0; }*/ .animate-in { opacity: 0; will-change: opacity, transform; } .animate-in.visible { opacity: 1.0; } .animate-in.visible { opacity: 1.0; } .animate-from-top{ -moz-transform: translate3d(0,-250px,0); -ms-transform: translate3d(0,-250px,0); -webkit-transform: translate3d(0,-250px,0); transform: translate3d(0,-250px,0); } .animate-from-bottom { -moz-transform: translate3d(0,250px,0); -ms-transform: translate3d(0,250px,0); -webkit-transform: translate3d(0,250px,0); transform: translate3d(0,250px,0); } /*.lazy-grid-item { -moz-transform: translate3d(0,200px,0); -ms-transform: translate3d(0,200px,0); -webkit-transform: translate3d(0,200px,0); transform: translate3d(0,200px,0); }*/ .lazy-load-inner-image img { opacity: 0; } .lazy-load-inner-image.lazy-loaded img { opacity: 1.0; transition: opacity 0.4s linear; } .lazy-load-inner-image { /*transform: translateZ(0);*/ } .animate-from-bottom, .animate-from-top { moz-transition: -moz-transform 0s, opacity 0s; -o-transition: -o-transform 0s, opacity 0s; -webkit-transition: -webkit-transform 0s, opacity 0s; transition: transform 0s, opacity 0s; } .animate-from-bottom.visible, .animate-from-top.visible { -ms-transform: translate3d(0,0,0) !important; -moz-transition: -moz-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 3s cubic-bezier(.18, 1, .21, 1); -moz-transform: translate3d(0,0,0) !important; -webkit-transition: -webkit-transform 5s cubic-bezier(.18, 1, .21, 1), opacity 3s cubic-bezier(.18, 1, .21, 1); -webkit-transform: translate3d(0,0,0) !important; transition: transform 5s cubic-bezier(.18, 1, .21, 1), opacity 3s cubic-bezier(.18, 1, .21, 1); transform: translate3d(0,0,0) !important; } .panel_media_slide.hide-inner-off-screen.hidden-off-screen .content, .panel_media_slide.hide-inner-off-screen.hidden-off-screen img, .panel_media_slide.hide-inner-off-screen.hidden-off-screen .hover-tilt-bg, .panel_media_slide.hide-inner-off-screen.hidden-off-screen video, .hide-inner-off-screen.hidden-off-screen .video-wrapper .video-carousel, .hide-inner-off-screen.hidden-off-screen .parallax-background, .hide-inner-off-screen.hidden-off-screen .skip-background, .hide-inner-off-screen.hidden-off-screen .gallery-caption-wrapper, .hide-inner-off-screen.hidden-off-screen .hero-content, .hide-inner-off-screen.hidden-off-screen .list-item-wrapper img, #custom_hero_header.hide-inner-off-screen.hidden-off-screen .decode-text, #custom_hero_header.hide-inner-off-screen.hidden-off-screen .decode-text .word { visibility: hidden; } .hide-inner-off-screen.hidden-off-screen .projects-image-gallery .gallery-caption-wrapper, .hide-inner-off-screen.hidden-off-screen .fullscreen_slideshow, .panel_media_slide.hide-inner-off-screen.hidden-off-screen .image .hover-tilt, .hide-inner-off-screen.hidden-off-screen .video-wrapper video { visibility: hidden; } .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .records_list.fullwidth_image_gallery_list .image span { display: inline-block; } .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .records_list.fullwidth_image_gallery_list .content { float: none; display: none; width: 100%; height: 100%; } .projects-image-gallery .feature_panels > .records_list ul li.panel_image_gallery .records_list.fullwidth_image_gallery_list .content-inner { width: 100%; margin: 0 auto; display: block; } .gallery-caption-wrapper .content, .gallery-caption-wrapper .title, .gallery-caption-wrapper .artist, .gallery-caption-wrapper .dimensions, .gallery-caption-wrapper .medium, .panel_image_gallery .content.mobile-caption, .panel_image_gallery .content.mobile-caption .title, .panel_image_gallery .content.mobile-caption .artist, .panel_image_gallery .content.mobile-caption .dimensions, .panel_image_gallery .content.mobile-caption .medium { color: #fff; } .gallery-caption-wrapper .artist_title_year, .gallery-caption-wrapper.artist_title_year .title, .gallery-caption-wrapper .artist_title_year .artist, .panel_image_gallery .content.mobile-caption .artist_title_year, .panel_image_gallery .content.mobile-caption .title, .panel_image_gallery .content.mobile-caption .artist { font-size: 1.2rem; } .panel_image_gallery .content.mobile-caption .artist_title_year, .gallery-caption-wrapper .artist_title_year { margin-bottom: 10px; font-family: 'Fifty Regular', Sans-Serif; text-transform: uppercase; font-weight: 200; font-size: 2.0rem; color: #FFFFFF; letter-spacing: .013rem; line-height: 2.4rem; text-transform: uppercase; display: block; } .panel_image_gallery .content.mobile-caption .dimensions, .panel_image_gallery .content.mobile-caption .medium , .gallery-caption-wrapper .dimensions, .gallery-caption-wrapper .medium { font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; font-size: 1.2rem; color: #FFFFFF; line-height: 2.1rem; text-transform: uppercase; letter-spacing: 0.1rem; display: inline-block; margin-right: 8px; } .gallery-caption-wrapper .caption-panel_style_photography .artist_title_year , .gallery-caption-wrapper .caption-panel_style_photography .content, .gallery-caption-wrapper .caption-panel_style_photography .title, .gallery-caption-wrapper .caption-panel_style_photography .artist, .gallery-caption-wrapper .caption-panel_style_photography .dimensions, .gallery-caption-wrapper .caption-panel_style_photography .medium, .panel_image_gallery .content.mobile-caption .caption-panel_style_photography .artist_title_year , .panel_image_gallery .content.mobile-caption .caption-panel_style_photography .content, .panel_image_gallery .content.mobile-caption .caption-panel_style_photography .title, .panel_image_gallery .content.mobile-caption .caption-panel_style_photography .artist, .panel_image_gallery .content.mobile-caption .caption-panel_style_photography .dimensions, .panel_image_gallery .content.mobile-caption .caption-panel_style_photography .medium { color: #111; } /*.image_list ul li .signed_and_dated, .image_list ul li .dimensions, .image_list ul li .medium { text-transform: none; display: block; text-transform: uppercase; letter-spacing: 1px; } .image_list ul li .signed_and_dated, .image_list ul li .dimensions, .image_list ul li .medium { font-size: 0.8rem; }*/ .gallery-caption-wrapper { position: fixed; bottom: 0; left: 0; width: 100%; max-width: 400px; width: 100vw; bottom: 40px; left: 40px; color: #fff; font-weight: 200; line-height: 1.2rem; display: block; opacity: 0; -webkit-transition: all 0.4s; transition: all 0.4s; transform: translate3d(0,60px,0); z-index: 50; } .gallery-caption-wrapper.scrollaway { position: absolute; bottom: 40px; } .gallery-caption-wrapper.visible { opacity: 1.0; transform: translate3d(0,0,0); } .gallery-caption-wrapper.header-visible { opacity: 0; } .gallery-caption-inner { opacity: 0; /*transform: translate3d(0,30px,0);*/ display: block; } .gallery-caption-inner.visible { opacity: 1.0; transform: translate3d(0,0,0); -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } /* Condensed image list ----------------------------------------------------------- */ #condensed-list-wrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: block; z-index: 99999999; box-sizing: border-box; background: #fff; } #condensed-list-wrapper-content { overflow: auto; display: block; height: 100%; width: 100%; padding-top: 190px; padding-bottom: 12vh; box-sizing: border-box; } #condensed-list-wrapper .content.mobile-caption { display: none; } #condensed-list-wrapper .image-gallery-item a, #condensed-list-wrapper .image-gallery-item .gallery-image { height: 100%; display: inline-block; } #condensed-list-wrapper .image-gallery-item a { display: block; } #condensed-list-wrapper .image-gallery-item img { max-height: 100%; display: block; } #condensed-list-wrapper .image-gallery-item { height: 23vmin; width: auto; max-height: 240px; display: inline-block; margin: 0 4vmin 4vmin 0; line-height: 1; } .condensed-list-title-wrapper { position: absolute; top: 60px; left: 0; } #condensed-list-wrapper h2 { font-size: 7.0rem; color: #5E5E5E; letter-spacing: 0.35rem; line-height: 9rem; } /* Dynamic Header ----------------------------------------------------------- */ /*.fullwidth-image-gallery-wrapper .panel_header { visibility: hidden; height: 0; display: inline; }*/ .gallery-viewer-header { position: absolute; top: 0; background: red; width: 100%; } .scrollnav-wrapper { float: right; } .scrollnav { opacity: 0; transform: translateX(90px); transition: transform 400ms ease-in-out, opacity 800ms ease-in-out, background 400ms linear; } .scrollnav.visible { opacity: 1.0; transform: translateX(0); } .scrollnav-link { text-transform: uppercase; font-size: 1.45rem; line-height: 2.3rem; text-transform: uppercase; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; color: #FFFFFF; letter-spacing: 0.1rem; text-decoration: none; padding-left: 40px; cursor: pointer; display: inline-block; vertical-align: middle; } .dark .scrollnav-link { color: #010101; } .dark .scrollnav-link .scrollnav-dot-inner { background: #010101; } /*.scrollnav-link.active:after { content: ''; width: 100%; background: #3D54C5; height: 15px; display: block; margin-top: -15px; }*/ .scrollnav-wrapper-fixed { float: right; position: fixed; right: 0; /* top: 20px; */ z-index: 999; bottom: 34px; right: 22px; will-change: transform; } .scrollnav-wrapper-fixed .scrollnav-link { display: block; clear: both; vertical-align: middle; text-align: right; position: relative; } .scrollnav-link .scrollnav-dot { width: 50px; position: relative; display: inline-block; vertical-align: middle; line-height: 5px; height: 30px; } .scrollnav-link .scrollnav-dot-inner { position: absolute; left: 21px; top: 12px; width: 6px; height: 6px; display: inline-block; background: #fff; vertical-align: middle; transform: rotate(45deg) scale(1); -webkit-transition: all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition: all 0.2s linear; /* custom */ } .scrollnav-link.active .scrollnav-dot-inner { background: #3333ED; transform: rotate(45deg) scale(1.5); } .scrollnav-link .scrollnav-label { opacity: 0; position: absolute; right: 50px; top: 0.4rem; width: 500px; pointer-events: none; transform: translateX(20px); vertical-align: middle; display: inline-block; will-change: transform; -webkit-transition: all 1s cubic-bezier(0.000, 0.575, 0.130, 1.045); -moz-transition:all 1s cubic-bezier(0.000, 0.575, 0.130, 1.045); -o-transition:all 1s cubic-bezier(0.000, 0.575, 0.130, 1.045); transition: all 1s cubic-bezier(0.000, 0.575, 0.130, 1.045); /* custom */ } .scrollnav-link.show-label .scrollnav-label, .scrollnav-link:hover .scrollnav-label { opacity: 1.0; transform: translateX(0); } .gridview-button-wrapper { position: fixed; right: 0; top: 50%; z-index: 99; line-height: 0; width: 30px; display: none; opacity: 0; transform: translate3d(60px, 0, 0); -webkit-transform: translate3d(60px, 0, 0); transition: opacity 400ms ease-in-out, transform 400ms cubic-bezier(.87,.17,.18,.85); -webkit-transition: opacity 400ms ease-in-out, -webkit-transform 400ms cubic-bezier(.87,.17,.18,.85); } .gridview-button-wrapper.visible { opacity: 1.0; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } .gridview-button-wrapper.enabled { display: block; } .gridview-button { cursor: pointer; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(90deg); font-size: 1.5rem; line-height: 3.0rem; text-transform: uppercase; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; letter-spacing: 0.1rem; text-decoration: none; display: inline-block; pointer-events: auto; position: relative; width: 100px; color: #FFFFFF; } .dark .gridview-button { color: #333; } #condensed-list-wrapper { visibility: hidden; } body.condensed-list-visible { overflow: hidden; } #condensed-list-wrapper.visible { visibility: visible; } .condensed-list-wrapper-inner { height: 100%; opacity: 0; transform-origin: center top; transform: translate3d(160px, 0, 0); -webkit-transform: translate3d(160px, 0, 0); } #condensed-list-wrapper.visible .condensed-list-wrapper-inner { opacity: 1.0; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transition: opacity 400ms ease-in-out, transform 400ms cubic-bezier(.87,.17,.18,.85); -webkit-transition: opacity 400ms ease-in-out, -webkit-transform 400ms cubic-bezier(.87,.17,.18,.85); } /*#popup_overlay { } .page-popup-visible #popup_overlay { opacity: 1; } #popup_box .close { opacity: 0; } .page-popup-visible #popup_box .close { opacity: 1; } #popup_content { opacity: 0; transition: opacity 0.6s ease-in-out; -webkit-transition: opacity 0.6s ease-in-out; height: 100%; } .page-popup-visible #popup_content { opacity: 1; }*/ /* Related items panel ----------------------------------------------------------- */ .related_items_panel { padding: 50px 0; border-top: 1px solid #e1e1e1; } .related_items_panel .icon { width: 90px; } .hover-tilt { transform-style: preserve-3d; transform: translate3d(0); } /* Hero header ----------------------------------------------------------- */ #custom_hero_header, .fullscreen_slideshow_parallax { height: 100vh; /*overflow: hidden;*/ z-index: 15; background: #000; } #custom_slideshow{ height: 100vh; } #custom_slideshow_inner{ position: fixed; pointer-events: none; } .parallax-background { position: fixed; z-index: 0; left: 0; top: 0; height: 100vh; width: 100%; display: block; background-size: cover; background-position: center; background-repeat: no-repeat; } .parallax-background::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: block; width: 100%; background-image: linear-gradient(0deg, rgba(0,0,0,0.00) 50%, rgba(0,0,0,0.2) 100%); background: rgba(0,0,0,0.1); } .invert-hero-colours .parallax-background::after { display: none; } #custom_hero_header > .inner { height: 100vh; width: 100%; overflow: hidden; } /*#custom_hero_header .inner { overflow: hidden; }*/ .fullscreen_slideshow.fullscreen_slideshow_parallax ul li .content, .parallax-mirror .fullscreen_slideshow ul li .content { display: initial; } #custom_hero_header .inner.hero-content, .fullscreen_slideshow.fullscreen_slideshow_parallax ul li .content { display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .fullscreen_slideshow ul li .image { background-attachment:scroll; } /*#custom_hero_header.focalpoint-active.top-align-text .inner.hero-content{ -webkit-justify-content: flex-start; justify-content: flex-start; } #custom_hero_header.focalpoint-active.top-align-text #hero_heading { padding-top: 180px; } #custom_hero_header.focalpoint-active.bottom-align-text .inner.hero-content { -webkit-justify-content: flex-end; justify-content: flex-end; } #custom_hero_header.focalpoint-active.bottom-align-text #hero_heading { padding-bottom: 23vh; } */ #hero_heading { bottom: auto; position: static; box-sizing: border-box; pointer-events: none; } #custom_hero_header.focalpoint-active #hero_heading { position: absolute; left: 0; right: 0; } #custom_hero_header .title, #custom_hero_header .subtitle { display: block; color: #fff; max-width:1000px; padding-left: 55px; } #custom_hero_header .title a span.char { opacity: 0; color:#3333ED; -moz-transition: color 0.8s; -o-transition: color 0.8s; -webkit-transition: color 0.8s; transition: color 0.8s; margin-right: -1px; } #custom_hero_header .title a span.char.randomising { -moz-transition: color 0s; -o-transition: color 0s; -webkit-transition: color 0s; transition: color 0s; } #custom_hero_header .decode-text { display: block; } .panel_header .status, #hero_heading .status, #hero_heading .status a, #hero_heading .status a:visited, #form_wrapper_inner .status, #form_wrapper_inner .status a, #form_wrapper_inner .status a:visited { font-size: 1.5rem; line-height: 3.0rem; text-transform: uppercase; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; color: #FFFFFF; letter-spacing: 0.1rem; text-decoration: none; display: inline-block; pointer-events:auto; position: relative; } .panel_header .status{ color: #3333ED } #hero_heading .status, #form_wrapper_inner .status, .panel_header_inner .status{ margin-bottom: 40px; } .invert-hero-colours #hero_heading .status, .invert-hero-colours #hero_heading .status a, .invert-hero-colours #hero_heading .status a:visited { color: #111; } .hero-content .scrollnav-wrapper { position: absolute; z-index: 40; right: 60px; bottom: 60px; } .hero-content .scrollnav-link { margin-left: 0; display: block; margin-bottom: 10px; text-align: right; } /* link Basic text link usually used throughout the site ----------------------------------------------------------- */ .link { } .link a{ } .link a, .link a:visited { } .share_link, .share_links { font-size: 1.5rem; color: #111; letter-spacing: 0.009rem; line-height: 3.4rem; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; text-transform: uppercase; letter-spacing: 0.1rem; border: none; } .simple_list .share_link, .simple_list .share_links { margin: 0; float: none; margin-bottom: 0; line-height: inherit; } .share_link a:before, .share_links a:before { display: none; } .share_link a, .share_links a { text-decoration: none; padding: 0; text-align: left; } .share_link a:hover, .share_links a:hover { color: #3333ED; } .external-link { font-size: 1.5rem; color: #111; letter-spacing: 0.009rem; line-height: 3.4rem; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; text-transform: uppercase; letter-spacing: 0.1rem; border: none; color: #3333ED; } .contacts-list { margin-bottom: 30px; } .contacts-list ul { padding-left: 0; list-style-type: none; display: block; line-height: 1em; } .contacts-list ul li { padding-left: 0; list-style-type: none; display: inline-block; vertical-align: top; width: 50%; margin: 0 0 30px; } .contacts-list ul li a{ text-decoration: none; } .contacts-list ul li .external-link { display: block; } .contacts-list ul li h2 { font-size: 2.2rem; letter-spacing: 0; margin: 0 0 10px 0; } h2.contact-list-header { font-size: 3.5rem; /* color: #FFFFFF; */ letter-spacing: 0; line-height: 4.9rem; margin: 0 0 40px 0; max-width: 500px; } /* Miscellaneous Common classes used throughout the site, generally on grids ----------------------------------------------------------- */ .description { margin: 0; display: block; } .truncated-text { overflow: hidden; -webkit-transition: max-height 2s cubic-bezier(0.000, 0.575, 0.130, 1); /* older webkit */ -webkit-transition: max-height 2s cubic-bezier(0.000, 0.575, 0.130, 1.045); -moz-transition: max-height 2s cubic-bezier(0.000, 0.575, 0.130, 1.045); -o-transition: max-height 2s cubic-bezier(0.000, 0.575, 0.130, 1.045); transition: max-height 2s cubic-bezier(0.000, 0.575, 0.130, 1.045); /* custom */ -webkit-transition-timing-function: cubic-bezier(0.000, 0.575, 0.130, 1); /* older webkit */ -webkit-transition-timing-function: cubic-bezier(0.000, 0.575, 0.130, 1.045); -moz-transition-timing-function: cubic-bezier(0.000, 0.575, 0.130, 1.045); -o-transition-timing-function: cubic-bezier(0.000, 0.575, 0.130, 1.045); transition-timing-function: cubic-bezier(0.000, 0.575, 0.130, 1.045); /* custom */ } .close-truncate { position: absolute; left: 50%; margin-left: -17px; top: 134px; visibility: hidden; /*moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; -webkit-transition: opacity 0.2s; transition: opacity 0.2s;*/ } .re-truncate .close-truncate { visibility: visible; } .read_more_reveal.re-truncate .read_more_label { display:none; } .h1-label { font-size: 1.5rem; line-height: 3.0rem; text-transform: uppercase; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; color: #111; letter-spacing: 0.1rem; display: block; margin-bottom: 60px; transform: translate3d(-60px,0,0); } .h1-label a, .h1-label a:visited { display: inline-block; text-decoration: none; } .subtitle { font-size: 1.45rem; line-height: 3.0rem; text-transform: uppercase; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; color: #111; letter-spacing: 0.1rem; } .date { } .price { } .image { } .caption { } .video-bg { background: rgba(1, 1, 1, 0.88); display: block; width: 100%; } .divider { } .break-word { overflow-wrap: break-word; word-wrap: break-word; float: left; clear: both; } .invisible { visibility: hidden; height: 0; text-align: left; text-indent: -9999px; opacity: 0; pointer-events: none; } .lead, .lead.subtitle { text-transform: none; display: block; margin-bottom: 30px; font-family: '__Recta__', Sans-Serif; font-size: 4.1rem; color: #111111; letter-spacing: .025rem; line-height: 5.2rem; } .heading_wrapper .subtitle, .heading_wrapper .date { font-size: 1.45rem; line-height: 2.8rem; text-transform: uppercase; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; color: #111; letter-spacing: 0.1rem; } .heading_wrapper h1.has_subtitle { margin-bottom: 50px; } .heading_wrapper { margin-bottom: 50px; } /*.restrict-title-height { height: 350px } .panel_media_slide .restrict-title-height { min-height: 200px; height: 350px; }*/ .link.read_more_link { font-size: 1.5rem; line-height: 3.0rem; text-transform: uppercase; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; color: #111; letter-spacing: 0.1rem; position: relative; margin-top: 50px; padding-left: 18%; padding-right: 18%; height: 200px; display: inline-block; cursor: pointer; } .link.read_more_link:hover { color: #3333ED; } .link.read_more_link.hide { display: none; } .link.read_more_link::before { content: ''; background: #3333ED; width: 2px; height: 130px; position: absolute; display: block; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; will-change: opacity, transform; } .read_more_label { white-space: nowrap; -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: rotate(90deg) translate(65px, -25px); -moz-transform: rotate(90deg) translate(65px, -25px); -ms-transform: rotate(90deg) translate(65px, -25px); -o-transform: rotate(90deg) translate(65px, -25px); transform: rotate(90deg) translate(65px, -25px); position: absolute; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .link.read_more_link:hover .read_more_label{ -webkit-transform: rotate(90deg) translate(80px, -25px); -moz-transform: rotate(90deg) translate(80px, -25px); -ms-transform: rotate(90deg) translate(80px, -25px); -o-transform: rotate(90deg) translate(80px, -25px); transform: rotate(90deg) translate(80px, -25px); } .link.read_more_link:hover::before{ -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } .link-panel { float: right; clear: both; font-size: 1.5rem; color: #111; letter-spacing: 0.009rem; line-height: 3.4rem; font-family: '__Orator-Oblique__', "Courier New", Courier, sans-serif; text-transform: uppercase; letter-spacing: 0.1rem; position: relative; margin-bottom: 12vh; } #content.cascading-page-content .link-panel { margin-bottom: 0; } .link-panel::before { content: ''; min-height: 160px; display: inline-block; vertical-align: bottom; margin: 0; } .link-panel::after { content: ''; border-left: 2px solid #3333ED; position: absolute; left: 0; bottom: 0; display: block; height: 100%; } .link-panel .simple_list { padding: 30px 0 0 30px; display: inline-block; vertical-align: bottom; } .link-panel .simple_list ul { clear: both; list-style: none; margin: 0; padding: 0; } .link-panel .simple_list ul li { margin: 22px 0 0 0; margin-bottom: 0; line-height: 1rem; min-width: 165px; } .link-panel .simple_list ul li a:hover { color: #3333ED; } /* GENERIC SCROLL ANIMATIONS----------------------------------------- */ /*.animate-in-view { will-change: opacity, transform; } .animate-in-panel { will-change: opacity, transform; }*/ .animate-in-view .slide-right, .animate-in-view.scroll-show.scroll-hide .slide-right, .animate-in-view.slide-right { transform: translate(-60px,0); opacity: 0; transition: all 700ms cubic-bezier(.65,.06,.19,.96); } .animate-in-view .slide-left, .animate-in-view.scroll-show.scroll-hide .slide-left, .animate-in-view.slide-left { transform: translate(60px,0); opacity: 0; transition: all 700ms cubic-bezier(.65,.06,.19,.96); } .animate-in-view .slide-up, .animate-in-view.slide-up { transform: translate(0,60px); opacity: 0; transition: all 700ms cubic-bezier(.65,.06,.19,.96); } .animate-in-view.fade-in, .animate-in-view .fade-in { transform: translate(0,0); opacity: 0; transition: all 700ms cubic-bezier(.65,.06,.19,.96); } .animate-in-view.scroll-show.fade-in, .animate-in-view.scroll-show .fade-in, .animate-in-view.scroll-show.slide-right, .animate-in-view.scroll-show .slide-right, .animate-in-view.scroll-show.slide-left, .animate-in-view.scroll-show .slide-left, .animate-in-view.scroll-show.slide-up, .animate-in-view.scroll-show .slide-up { opacity: 1.0; transform: translate(0,0); } .link.read_more_link.animate-in-view::before { transform: scaleY(0); transform-origin: top; transition: all 1000ms cubic-bezier(.65,.06,.19,.96); } .link-panel.animate-in-view::after{ transform: scaleY(0); transform-origin: bottom; transition: all 1000ms cubic-bezier(.65,.06,.19,.96); } .link.read_more_link.animate-in-view.scroll-show::before, .link-panel.animate-in-view.scroll-show::after { transform: scaleY(1.0); opacity: 1.0; } /* Overlay----------------------------------------- */ #popup_overlay { background: #fff; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1100; } #popup_box { /* max-width: 1560px; */ padding: 0; margin: 0 auto; height: 100vh; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: fixed; top: 0; left: 0; right: 0; margin-top: 0; z-index: 1200; height: 100vh; } #popup_box .inner { width: 100%; height: 100vh; /*display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;*/ } #condensed-list-wrapper .close, .project-close-wrapper .close, #popup_box .close { position: fixed; right: 46px; top: 76px; height: 40px; width: 40px; background: center center no-repeat; cursor: pointer; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNyIgaGVpZ2h0PSIzNyIgdmlld0JveD0iMCAwIDM3IDM3Ij4gIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjMkEyQTJBIiBzdHJva2Utd2lkdGg9IjIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPiAgICA8cGF0aCBkPSJNMC4zOTc3MjcyNzMsMzQuNjAyMjcyNyBMMzQuMjYyOTg0MywwLjczNzAxNTc1Ii8+ICAgIDxwYXRoIGQ9Ik0wLjM5NzcyNzI3MywzNC42MDIyNzI3IEwzNC4yNjI5ODQzLDAuNzM3MDE1NzUiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDM1IDApIi8+ICA8L2c+PC9zdmc+); text-indent: -9999px; z-index: 999999; } #popup_box .project-close-wrapper { display: none; } /* Effects ----------------------------------------------------------- */ body.page-popup-active { overflow-y: hidden; } #popup_container { display: none; } .page-popup-active #popup_container { display: block; } #popup_overlay { opacity: 0; transition: opacity 0.6s ease-in-out; -webkit-transition: opacity 0.6s ease-in-out; } .page-popup-visible #popup_overlay { opacity: 1; } #popup_box .close { opacity: 0; } .page-popup-visible #popup_box .close { opacity: 1; } #popup_content { opacity: 0; transition: opacity 0.6s ease-in-out; -webkit-transition: opacity 0.6s ease-in-out; height: 100%; } .page-popup-visible #popup_content { opacity: 1; } /* Previous / Next animation ----------------------------------------------------------- */ body #popup_box { transition: opacity 400ms ease-in-out; -webkit-transition: opacity 400ms ease-in-out; } body.page-popup-transition #popup_box { opacity: 0; } body #popup_box { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transition: opacity 400ms ease-in-out, transform 400ms cubic-bezier(.87,.17,.18,.85); -webkit-transition: opacity 400ms ease-in-out, -webkit-transform 400ms cubic-bezier(.87,.17,.18,.85); } body.page-popup-transition #popup_box { opacity: 0; transform-origin: center top; transform: translate3d(-160px, 0, 0); -webkit-transform: translate3d(-160px, 0, 0); } body.page-popup-transition.page-popup-transition2 #popup_box { transform: translate3d(160px, 0, 0); -webkit-transform: translate3d(160px, 0, 0); transition: none; } body.page-popup-transition #popup_box.popup-direction-left { transform: translate3d(160px, 0, 0); -webkit-transform: translate3d(160px, 0, 0); } body.page-popup-transition.page-popup-transition2 #popup_box.popup-direction-left { transform: translate3d(-160px, 0, 0); -webkit-transform: translate3d(-160px, 0, 0); } body.page-popup-transition-initial #popup_box .previous, body.page-popup-transition-initial #popup_box .next, body #popup_box .previous.disabled, body #popup_box .next.disabled { opacity: 0; display: none; } /** { margin: 0; }*/ /*html, body { width: 100%; height: 100%; } .is-virtual-scroll { overflow: hidden; } .is-native-scroll.y-scroll { overflow-y: scroll; overflow-x: hidden; } .is-native-scroll.x-scroll { overflow-y: hidden; overflow-x: scroll; } .artlogic-smooth { position: fixed; top: 0; right: 0; left: 0; width: 100%; height: auto; margin: auto; text-align: center; will-change: transform; } .vs-scrollbar { display: block; position: absolute; transition: transform .6s; } .vs-scrollbar.vs-vertical { top: 0; right: -5px; bottom: 0; width: 15px; height: 100%; transform: translate3d(5px,0,0); } .vs-scrollbar.vs-horizontal { bottom: -5px; left: 0; right: 0; width: 100%; height: 15px; transform: translate3d(0,5px,0); } .is-dragging .vs-scrollbar.vs-horizontal, .is-dragging .vs-scrollbar.vs-vertical, .vs-scrollbar.vs-horizontal:hover, .vs-scrollbar.vs-vertical:hover { transform: none; } .vs-scrollbar .vs-scrolldrag { width: 100%; height: auto; background: #ccc; cursor: pointer; } .vs-scroll-view { position: relative; width: 1px; }*/ .loader { position: absolute; top: 50%; left: 50%; width: 250px; height: 2px; overflow: hidden; z-index: 2 } .video-loaded .loader { display: none; } /* .loader:before, .loader:after { content: ''; position: absolute; top: 0; width: 100%; height: 2px; transform: translate(-100%, 0); } .loader:before { background-color: rgba(255, 255, 255, 0.2); animation: loading 3400ms cubic-bezier(0.23, 1, 0.32, 1) infinite; } .loader:after { background-color: #3333ED; animation: loading 2500ms 500ms cubic-bezier(0.23, 1, 0.32, 1) infinite; } @keyframes loading { 75% { transform: translate(0, 0); } 100% { transform: translate(100%, 0); } } */ .loader { height: 2em; width: 2em; outline: 2px solid #3333EB; -webkit-animation: loader--spinning 1.25s infinite ease; animation: loader--spinning 1.25s infinite ease; /** Loader 1 **/ /** Loader 2 **/ /** Loader 3 **/ } @-webkit-keyframes loader--spinning { 50% { -webkit-transform: rotate(45deg); transform: rotate(45deg); } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @keyframes loader--spinning { 50% { -webkit-transform: rotate(45deg); transform: rotate(45deg); } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } .loader::after { content: ''; display: block; height: inherit; width: inherit; outline: inherit; -webkit-animation-duration: 1.25s; animation-duration: 1.25s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; } .loader{ outline: none; } .loader::after { outline: 2px solid #3333EB; -webkit-animation-name: loader--squeeze; animation-name: loader--squeeze; } @-webkit-keyframes loader--squeeze { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.85); transform: scale(0.85); } 50% { -webkit-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(0.85); transform: scale(0.85); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes loader--squeeze { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.85); transform: scale(0.85); } 50% { -webkit-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(0.85); transform: scale(0.85); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .circular-loader { position: absolute; margin: 0 auto; width: 56px; top: 50%; margin-top: -28px; left: 50%; margin-left: -28px; } .circular-loader:before { content: ''; display: block; padding-top: 100%; } .circular { -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; height: 100%; -webkit-transform-origin: center center; transform-origin: center center; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .circular-loader .path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; stroke-linecap: round; stroke: rgb(51, 51, 237); } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } @keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } @-webkit-keyframes color { 100%, 0% { stroke: rgb(51, 51, 237, 1); } 40% { stroke: rgb(51, 51, 237, 0.2); } 66% { stroke: rgb(51, 51, 237, 1); } 80%, 90% { stroke: rgb(51, 51, 237, 0.2); } } @keyframes color { 100%, 0% { stroke: rgb(51, 51, 237, 1); } 40% { stroke: rgb(51, 51, 237, 0.2); } 66% { stroke: rgb(51, 51, 237, 1); } 80%, 90% { stroke: rgb(51, 51, 237, 0.2); } } /* body.page-transition #container{ transform-origin: center top; transform: translate(40vh,0); opacity: 0; transition: opacity 600ms ease-in-out, transform 600ms cubic-bezier(.87,.17,.18,.85); -webkit-transition: opacity 600ms ease-in-out, -webkit-transform 600ms cubic-bezier(.87,.17,.18,.85); } /*body.page-transition2 #container{ background: red; }*/ /* Page content transition ----------------------------------------------------------- */ body #container { transition: opacity 600ms ease-in-out; -webkit-transition: opacity 600ms ease-in-out; } body.browser-js-enabled #container { opacity: 0; } body.first-load-complete #container, body.splash-loader-active #container { opacity: 1; } body #container-wrapper { transition: opacity 600ms ease-in-out, transform 800ms cubic-bezier(.87,.17,.18,.85); -webkit-transition: opacity 600ms ease-in-out, -webkit-transform 800ms cubic-bezier(.87,.17,.18,.85); opacity: 1; /*transform: translate(0, 0); -webkit-transform: translate(0, 0);*/ } body.content-load-waiting #container-wrapper { opacity: 0; /*transform: translate(0, 160px); -webkit-transform: translate(0, 160px);*/ transition: none; -webkit-transition: none; } body.page-transition #container-wrapper { opacity: 0; transform-origin: center top; transform: translate(-160px, 0); -webkit-transform: translate(-160px, 0); } body.page-transition.page-transition2 #container-wrapper { transform: translate(0, 0); -webkit-transform: translate(0, 0); transition: none; } body.first-load-complete .splash-content-inner { bottom: auto; height: auto; display: none !important; } .splash-content-inner { position:fixed; z-index:20000; left:0; right:0; top:0; width: 100%; height: 100%; } .splash-content-inner svg { width: 100%; height: 100%; left:0; right:0; top:0; position:absolute; z-index: 20002; font-family: 'Fifty', sans-serif; font-size: 35em; letter-spacing:-0.03em; } .splash-content-inner svg text { text-anchor: middle; } .splash-content-inner svg mask rect { fill: #fff; } .splash-content-inner svg > rect { fill: red; -webkit-mask: url(#mask); mask: url(#mask); } /*.splash-content-inner video{ position: absolute; top: 0; left: 0; width:100%; height:100vh; object-fit:cover; z-index: 20001; overflow: hidden; }*/ body.splash-loader-active #preloader .splash-video-wrapper { height: 0; display: block; position: fixed; height: 100%; top: 0; left: 0; right: 0; z-index: 10050; } body.splash-loader-active #preloader.loading-start .splash-video-wrapper { height: 100%; opacity: 1; } .splash-video-wrapper::after { content: ''; display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10051; background: url('/images/pix.png'); background-repeat: repeat; } .splash-video-wrapper::before { content: ''; display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10052; background: rgba(0, 0, 0, 0.80); } .splash-video { object-fit: cover; height: 100%; width: 100%; } span.splash-image { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; } /* Share links ----------------------------------------------------------- */ .share_links { position: relative; z-index: 5; } .share_links .link a { outline: none; } .share_links .share_options { width: 0; opacity: 0; position: absolute; top: 26px; left: 0px; transition: width 600ms cubic-bezier(.65,.06,.19,.96), opacity 400ms ease-in-out; white-space: nowrap; overflow: hidden; padding: 6px 0 0; cursor: default; } .share_links.active .share_options { width: 110px; opacity: 1; } .share_links .share_options_inner { position: relative; background: #fff; border: 1.5px solid #3333EB; padding: 6px; height: 22px; } .share_links .share_options:after { top: 0; left: 23px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: transparent; border-bottom-color: #3333EB; border-width: 3px; margin-left: -3px; } .share_links .share_options .social_links_item { display: inline-block; float: none; } .share_links .share_options .social_links_item .social_media_icon:after { color: #151515; } .share_links .share_options .social_links_item .social_media_icon:hover:after { } /* Reversed ----------------- */ /* Position top -------------- */ .share_links.position_top .share_options { bottom: 26px; top: auto; padding: 0 0 6px; } .share_links.position_top .share_options:after { bottom: 0; top: auto; left: 23px; border-color: transparent; border-top-color: #151515; border-width: 3px; margin-left: -3px; } /* Social media icons ----------------------------------------------------------- */ /* Icons ----------------------------------------------------------- */ .social_media_links { width: 100%; float: left; clear: both; } .social_links_item { margin: 0 5px 0 0; width: auto; height: auto; float: left; } .social_links_item:last-child { margin-right: 0; } .social_links_item a { position: relative; width: 22px; height: 22px; float: left; text-indent: -100px; } .social_media_icon { float: left; text-indent: -200px; text-align: center; border: 0; background: none; margin: 0; width: 22px; height: 22px; position: relative; overflow: hidden; } .social_media_icon:after { display: block; width: 100%; text-align: center; font: normal normal normal 14px/1 FontAwesome; font-size: 19px; line-height: 23px; float: left; text-rendering: auto; position: relative; z-index: 2; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: color 200ms ease-in-out, background 200ms ease-in-out, transform 400ms cubic-bezier(.2,1.1,.78,.99); color: #fff; text-align: center; text-indent: 0; } .social_media_icon:hover:after { } .social_media_icon.facebook:after { content: "\f09a"; } .social_media_icon.twitter:after { content: "\f099"; } .social_media_icon.instagram:after { content: "\f16d"; } .social_media_icon.pinterest:after { content: "\f231"; } .social_media_icon.tumblr:after { content: "\f173"; } /* Fancybox ----------------------------------------- */ .fancybox-overlay { background: #fff; } .fancybox-close { position: fixed; top: 35px; right: 35px; width: 40px; height: 40px; cursor: pointer; z-index: 8040; background-image: url('/images/close.svg'); background-position: center; background-repeat: no-repeat; } .fancybox-skin { padding: 80px !important; box-sizing: border-box; } div.arprompt .arpromptmessage { padding: 10px; line-height: 35px; color: #222; } div.arprompt .arpromptclose { background-repeat: no-repeat; width: 28px; cursor: pointer; text-indent: -9999px; background-size: contain; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNyIgaGVpZ2h0PSIzNyIgdmlld0JveD0iMCAwIDM3IDM3Ij4gIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjMkEyQTJBIiBzdHJva2Utd2lkdGg9IjIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPiAgICA8cGF0aCBkPSJNMC4zOTc3MjcyNzMsMzQuNjAyMjcyNyBMMzQuMjYyOTg0MywwLjczNzAxNTc1Ii8+ICAgIDxwYXRoIGQ9Ik0wLjM5NzcyNzI3MywzNC42MDIyNzI3IEwzNC4yNjI5ODQzLDAuNzM3MDE1NzUiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDM1IDApIi8+ICA8L2c+PC9zdmc+); } div.arprompt button.arpromptdefaultbutton { font-family: 'Fifty Regular', Sans-Serif; cursor: pointer; text-transform: uppercase; } div.arprompt .arpromptbuttons { border: none; border-top:none; } div.arprompt button { padding: 1px 28px; margin: 0 0 0 10px; outline: none; /* width: 50px; */ border: 1px solid #ccc; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background: #fff; transition: background 0.35s ease-in-out; -webkit-transition: background 0.35s ease-in-out; color: inherit; font: inherit; box-sizing: border-box; display: inline-block; width: auto; } #cookie_notification .inner #cookie_notification_message { font-size: 16px; line-height: 1.4em; } #cookie_notification .inner #cookie_notification_message strong{ font-size: 19px; margin-bottom: 10px; display: inline-block; } #cookie_notification .inner #cookie_notification_preferences { font-size: 16px; line-height: 1.4em; } #cookie_notification .inner #cookie_notification_accept.button { background-color: #111; border-radius: 0; font-family: 'Fifty Regular', Sans-Serif; text-transform: uppercase; color: #fff; } #cookie_notification .inner #cookie_notification_accept.button a { color: inherit }