/* ---------------------------------------------------------------------------------- Sam Fogg Designed by Artlogic ---------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------- Layout ---------------------------------------------------------------------------------- */ html { background: #f9f4f1; } body { padding: 0; height: 100%; } html.overlay-open, body.overlay-open, html.page-popup-active, body.page-popup-active { overflow: hidden; } .hidden { display: none; } .mobile-only { display: none; } .hidden-off-screen { visibility: hidden; } #top_nav_section { display: none !important; } /* Header ------------------------------------ */ #header { position: fixed; z-index: 2000; top: 0; opacity: 1; left: 0; right: 0; padding: 32px 80px 18px; min-height: 45px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /*transform: translate3d(0, -100px, 0);*/ transition: transform 600ms cubic-bezier(.65,.06,.19,.96), padding 600ms cubic-bezier(.65,.06,.19,.96), opacity 800ms ease-in-out, background 800ms ease-in-out, border 800ms ease-in-out; background: rgba(255,255,255,0); } #special_notice { position: absolute; z-index: 2; top: 0; left: 0; right: 0; background: #fff; border-bottom: 1px solid #ddd; color: #111; padding: 9px 20px 7px; text-align: center; transition: transform 600ms cubic-bezier(.65,.06,.19,.96), padding 600ms cubic-bezier(.65,.06,.19,.96), opacity 800ms ease-in-out, background 800ms ease-in-out, border-color 500ms ease-in-out; transform: translateY(-100px); display: none; line-height: 17px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1px; letter-spacing: 0.5px; } .content-type-reversed #special_notice { border: none; } .hero-section-visible #special_notice { border-bottom: 0; } #special_notice a, #special_notice a:visited { color: #111; text-decoration: underline; } body:not(.overlay-open):not(.popup-open):not(.roomview-active) .page-top #special_notice { transform: translateY(0); } #header.special_notice_active #special_notice { display: block; } body .hero-section-visible #header, body .page-top #header, body.page-popup-active #header, body.overlay-open #header { pointer-events: none; } #header:before, #popup_box:before { display: block; content: ''; position: absolute; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: #f9f4f1; background: #fff; border-bottom: 1px solid #eee; transition: opacity 800ms ease-in-out, height 800ms ease-in-out; opacity: 1; } .content-type-reversed #header:before, .popup-content-reversed #popup_box:before { background: #222; border-bottom: 1px solid rgba(255,255,255,0.1); } .content-type-reversed #menu { color: white; } /* #header:before { display: block; content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: -100px; opacity: 1; transition: opacity 800ms ease-in-out; pointer-events: none; background: -moz-linear-gradient(top, rgba(249,244,241,1) 20%, rgba(249,244,241,0) 100%); background: -webkit-linear-gradient(top, rgba(249,244,241,1) 20%,rgba(249,244,241,0) 100%); background: linear-gradient(to bottom, rgba(249,244,241,1) 20%,rgba(249,244,241,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f4f1', endColorstr='#00f9f4f1',GradientType=0 ); } .content-type-reversed #header:before { opacity: 0.6; background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000022', endColorstr='#00000022',GradientType=0 ); } */ body.cms-frontend-toolbar-active #header { top: 28px; } #header * { pointer-events: auto; } #main_header { pointer-events: none; position: relative; z-index: 2; max-width: 1525px; margin: 0 auto; } #main_header * { pointer-events: auto; } body .hero-section-visible #header, body .page-top #header, body.page-popup-active.popup-not-scrolled #header, body.overlay-open #header { background: rgba(255,255,255,0); border-color: rgba(0,0,0,0); padding-top: 30px; } body:not(.overlay-open) .page-top #header.special_notice_active { padding-top: 75px; } body .scrolling-down #header, body.x-page-transition #header, body.splash-open #header, body.user-distraction-free #header, body.x-page-transition.first-load-complete .scrolling-down #header.page-header-subsections { opacity: 0; transform: translate3d(0, -100px, 0); background: rgba(255,255,255,0); } body.page-popup-active #header { opacity: 1; background: rgba(255,255,255,0); transform: translate3d(0, 0, 0); transition: transform 600ms cubic-bezier(.65,.06,.19,.96), opacity 800ms ease-in-out, background 800ms ease-in-out, padding 600ms cubic-bezier(.65,.06,.19,.96); } body.user-distraction-free #header { opacity: 0; transform: translate3d(0, -100px, 0); background: rgba(255,255,255,0); } body.active-init #container #header, body.overlay-open #container #header { background: rgba(255,255,255,0); transition: transform 600ms cubic-bezier(.65,.06,.19,.96), opacity 800ms ease-in-out, background 800ms ease-in-out, padding 600ms cubic-bezier(.65,.06,.19,.96); } body.overlay-open #container #header { } body.page-popup-active #header:before, body.active-init #container #header:before, body.overlay-open #container #header:before, body.x-page-transition #container #header:before, body.x-section-artworks.no-page-params #container #header:before { opacity: 0; /*transition: none !important;*/ } body.overlay-open #header:before { transition: none !important; } /*body .page-enquiry-visible #container #header:before,*/ body #container_outer.page-top #header:before { opacity: 0; } body #container.hero-section-visible #header:before { opacity: 0; transition: none !important; } /* Popup box version of the header background, this needs to be different as the close is located within the popup Note: these heights must exactly correlate with the height of the header at any time (e.g. this will be different on mobile) ------------------------------------ */ #popup_box:before { position: fixed; height: 85px; z-index: 1100; opacity: 0; } .cms-frontend-toolbar-active #popup_box:before { top: 28px; } body.page-popup-visible.popup-scrolled #popup_box:before { opacity: 1; } /* Header including page subnav ------------------------------------ */ #page_header { height: 0; opacity: 0; padding: 0; overflow: auto; pointer-events: none; position: absolute; z-index: 0; top: 0; left: 0; right: 0; padding: 32px 80px 18px; min-height: 45px; opacity: 0; transform: translate3d(0, 45px, 0); transform: translate3d(0, -74px, 0); padding: 24px 80px 14px; top: 85px; background: rgba(255, 255, 255, 0.95); border-bottom: 1px solid #eee; transition: transform 600ms cubic-bezier(.65,.06,.19,.96), top 600ms cubic-bezier(.65,.06,.19,.96), background 600ms ease-in-out, border 600ms ease-in-out; max-width: 1525px; margin: 0 auto; } .content-type-reversed #page_header { border-bottom: 1px solid rgba(255,255,255,0.1); background: #222; } .page-top #page_header { top: 99px; } .special_notice_active #page_header { top: 115px; } #page_header * { pointer-events: none; } #page_header .page_title { float: left; } #page_header .page_title h2 { font-size: 2.2rem; line-height: 3rem; float: left; margin: 0 20px 0 0; } #page_header .page_title h2 a, #page_header .page_title h2 a:visited { color: #b99667; } #page_header .page_title h2:last-child { opacity: 0.5; margin: 0; transition: opacity 400ms ease-in-out; } #page_header .page_title h2:last-child:hover { opacity: 1; margin: 0; } #page_header .page_navigation { float: left; width: 100%; } #page_header .page_navigation ul { font-size: 1.25rem; white-space: nowrap; } #page_header .page_navigation ul li a { margin-left: 0; margin-right: 12px; letter-spacing: 1px; } @media screen and (min-width: 1024px) { #header.page-header-subsections { /*overflow: hidden;*/ } #header.page-header-subsections #main_header, #header.page-header-subsections #page_header { min-height: 36px; transition: transform 300ms ease-in-out, opacity 300ms ease-in-out, top 600ms cubic-bezier(.65,.06,.19,.96), background 600ms ease-in-out, border 600ms ease-in-out; -webkit-transition: transform 300ms ease-in-out, opacity 300ms ease-in-out, top 600ms cubic-bezier(.65,.06,.19,.96), background 600ms ease-in-out, border 600ms ease-in-out; } body.first-load-complete .scrolling-down #header.page-header-subsections { opacity: 1; transform: translate3d(0, 0, 0); } .scrolling-down #header.page-header-subsections #main_header { /* opacity: 0; transform: translate3d(0, -100px, 0); */ } .x-page-enquiry-visible #header.page-header-subsections #page_header, .scrolling-up #header.page-header-subsections #page_header, .x-scrolling-down #header.page-header-subsections #page_header, #container_outer #header.artworks-nav-hover.page-header-subsections #page_header, .page-top #header.page-header-subsections #page_header { opacity: 1; transform: translate3d(0, 0, 0); pointer-events: auto; } .x-page-enquiry-visible #header.page-header-subsections #page_header *, .scrolling-up #header.page-header-subsections #page_header *, .x-scrolling-down #header.page-header-subsections #page_header *, #container_outer #header.artworks-nav-hover.page-header-subsections #page_header *, .page-top #header.page-header-subsections #page_header * { pointer-events: auto; } .page-popup-active .scrolling-down #header.page-header-subsections #main_header { opacity: 1; transform: translate3d(0, 0, 0); } .page-popup-active #container_outer #header.page-header-subsections #page_header, .overlay-open #container_outer #header.page-header-subsections #page_header, .page-transition-delay #container_outer.page-top #header.page-header-subsections #page_header, #container_outer.page-top.page-intro #header.page-header-subsections #page_header { opacity: 0; pointer-events: none; transform: translate3d(0, -74px, 0); transform: none; } .page-top #header.page-header-subsections #page_header/**/, .scrolling-down.page-enquiry-not-visible #header.artworks-nav-not-hover.page-header-subsections #page_header { background: none; border-color: rgba(0,0,0,0); } } /* Logo ------------------------------------ */ #logo { float: left; width: 212px; height: 25px; position: relative; z-index: 10000; cursor: pointer; transition: height 500ms cubic-bezier(.65,.06,.19,.96), transform 500ms cubic-bezier(.65,.06,.19,.96), opacity 500ms ease-in-out; background: url('/images/logo_2.png') center 0 no-repeat; background-size: 212px 53px; } .hero-section-visible #logo { } #logo a { display: block; width: 212px; height: 25px; text-indent: -9999px; text-align: left; } #logo svg { width: 100%; height: 100%; } #logo svg path, #logo svg polygon { transition: fill 600ms ease-in-out; fill: #151515; } body.overlay-open #logo svg path, body.overlay-open #logo svg polygon { fill: #414141; } body.nav-overlay-open.overlay-open #logo svg path, body.nav-overlay-open.overlay-open #logo svg polygon { fill: #fff; } /* Overlay buttons ------------------------------------ */ body.overlay-open #menu, body.overlay-open #enquire, body.overlay-open #search_menu, body.overlay-open #basket, body.overlay-open #top_nav, body.page-popup-active #menu, body.page-popup-active #enquire, body.page-popup-active #search_menu, body.page-popup-active #basket, body.page-popup-active #top_nav, body.page-popup-active #header.page-header-subsections #page_header { opacity: 0; transform: translate3d(0, -100px, 0); } #search_icon { float: right; margin: -6px 0 0 14px; min-width: 30px; position: relative; transition: all 400ms cubic-bezier(.25,.92,.13,.99); } .overlay-open #search_icon { opacity: 0; } #search_icon a.search_open_icon { text-align: left; text-indent: -9999px; background: url(/images/search_reverse.png) center center no-repeat; width: 30px; height: 30px; background-size: 15px auto; display: block; margin-top: 6px; float: left; position: absolute; top: 0; right: 0; opacity: 1; transition: all 800ms cubic-bezier(.25,.92,.13,.99); } .content-type-reversed #search_icon a.search_open_icon { filter: invert(1); } .search-open #search_icon a.search_open_icon { opacity: 0; pointer-events: none; } #search_form { position: relative; display: flex; float: left; max-width: 0; opacity: 0; overflow: hidden; transition: all 800ms cubic-bezier(.25,.92,.13,.99); } .search-open #search_form { position: relative; float: left; max-width: 340px; opacity: 1; } #search_form form { float: left; position: relative; } #search_form input { padding: 12px 35px 8px 10px; line-height: 20px; border: 1px solid #C8A16D; width: 100%; box-sizing: border-box; max-width: 350px; min-width: 250px; float: left; } .content-type-reversed #search_form input { color: #fff; } #search_form a.search_submit_icon { position: absolute; top: 5px; right: 5px; text-align: left; text-indent: -9999px; background: url(/images/search_reverse.png) center center no-repeat; width: 30px; height: 30px; background-size: 15px auto; display: block; } .content-type-reversed #search_form a.search_submit_icon { filter: invert(1); } #search_form .search_close_icon { float: left; margin: 13px 0 0 15px; list-style: none; font-size: 1.35rem; letter-spacing: 2px; text-transform: uppercase; line-height: 20px; font-family: 'Weiss Std', serif; color: #222; font-weight: normal; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #basket { float: right; overflow: hidden; display: block; margin-top: 1px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; position: relative; transition: transform 400ms ease-in-out, opacity 400ms ease-in-out; } #basket #store_cart_widget { position: relative; opacity: 1 !important; padding: 0 0 0 0; margin-left: 10px; max-width: 75px; height: auto; background: #b99667; transition: opacity 400ms ease-in-out, width 400ms ease-in-out, max-width 400ms ease-in-out, margin 400ms ease-in-out; overflow: hidden; } #basket #store_cart_widget.empty { max-width: 0; padding: 0; margin: 0; } #basket .scw_total_items { position: absolute; z-index: 2; background: #c7a474; border-radius: 0; height: 28px; width: 24px; top: 0; right: 0; transition: transform 1000ms cubic-bezier(.25,.92,.13,.99), opacity 400ms ease-in-out, background 400ms ease-in-out; transform: scale(0.5); opacity: 0; color: #fff; } #basket #store_cart_widget.active .scw_total_items { transform: scale(1); opacity: 1; } #basket #store_cart_widget.active.empty .scw_total_items { transform: scale(0.5); opacity: 0; } #basket #store_cart_widget:hover .scw_total_items { transform: scale(0.8); } #basket .scw_total_count { display: block; width: 100%; font-size: 1.3rem; line-height: 2.0rem; padding: 6px 0 0; text-align: center; font-weight: normal; font-family: 'Minion Pro', serif; font-family: 'Weiss Std', serif; letter-spacing: -0.6px; text-indent: -1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: color 400ms ease-in-out; } #basket #scw_items { position: absolute; position: static; z-index: 4; top: 0; right: 0; bottom: 0; left: 0; display: block; } #basket a { position: relative; z-index: 4; top: 0; right: 0; bottom: 0; left: 0; text-align: left; text-indent: -200px; overflow: hidden; display: block; } #basket a:before { content: 'Bag'; display: block; text-indent: 0; padding: 6px 34px 2px 9px; color: #fff; font-size: 1.4rem; line-height: 2.0rem; font-family: 'Weiss Std', serif; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* #basket { float: right; display: block; margin-top: 5px; margin-left: 25px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; position: relative; } #basket #store_cart_widget { opacity: 1 !important; padding: 0 7px 0 0; width: 20px; height: 24px; } #basket #store_cart_widget.empty { width: 0; padding: 0; } #basket .scw_total_items { position: absolute; z-index: 2; background: #b99667; border-radius: 50px; height: 13px; width: 13px; top: 09px; left: 8px; transition: transform 1000ms cubic-bezier(.25,1.92,.63,1.02), opacity 400ms ease-in-out, background 400ms ease-in-out; transform: scale(0.5); opacity: 0; color: #fff; } #basket #store_cart_widget.active .scw_total_items { transform: scale(1); opacity: 1; } #basket #store_cart_widget.active.empty .scw_total_items { transform: scale(0.5); opacity: 0; } #basket .scw_total_count { display: block; width: 100%; font-size: 0.9rem; line-height: 1.5rem; text-align: center; font-weight: normal; font-family: Arial, 'Minion Pro', serif; letter-spacing: -0.6px; text-indent: -1px; transition: color 400ms ease-in-out; } #basket:after { position: absolute; z-index: 1; top: 0; right: 10px; display: block; content: ''; width: 17px; height: 17px; transition: transform 400ms cubic-bezier(.65,.06,.19,.96); background: url(/images/cart.png) center center no-repeat; background-size: 17px 17px; transition: background-image 400ms linear; } #basket #scw_items { position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; left: 0; display: block; } #basket a { position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; left: 0; text-align: left; text-indent: -200px; overflow: hidden; display: block; } */ #top_nav { float: right; margin: 0; padding: 0; position: relative; transition: transform 400ms ease-in-out, opacity 400ms ease-in-out; } .search-open #top_nav { opacity: 0; transition: opacity 100ms ease-in-out; } .search-closing #top_nav { opacity: 0; } #menu { display: none; float: right; padding: 7px 0 9px; margin: 0; position: relative; display: none; transition: transform 400ms ease-in-out, opacity 400ms ease-in-out; font-size: 1.20rem; letter-spacing: 2px; line-height: 20px; text-transform: uppercase; font-family: 'Weiss Std', serif; color: #111; font-weight: normal; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; cursor: pointer; } .hero-section-visible #menu { color: #fff; } .navigation ul { display: block; text-align: center; margin: 0; padding: 0; list-style: none; font-size: 1.35rem; letter-spacing: 2px; text-transform: uppercase; line-height: 20px; font-family: 'Weiss Std', serif; color: #222; font-weight: normal; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .hero-section-visible #top_nav.navigation ul a, .hero-section-visible #top_nav.navigation ul a:visited { color: #fff; } .navigation ul li { display: inline-block; position: relative; text-align: center; padding: 0; margin: 0; cursor: pointer; } .navigation ul li:first-child { margin-left: 0; } .navigation ul li:last-child { margin-right: 0; } .navigation ul li a { display: block; position: relative; padding: 7px 0 9px; margin: 0 0 0 20px; cursor: pointer; } .navigation ul li a:after { content: ''; display: block; width: 0; max-width: 30px; border-bottom: 1px solid #fff; position: absolute; bottom: 0; transition: width 400ms ease-in-out; left: 50%; transform: translateX(-50%); } .device-desktop .navigation ul li:hover a:after, .navigation ul li.active a:after { width: 30px; } .navigation ul li a, .navigation ul li a:visited { color: inherit; } .overall-container { overflow: hidden; } .scroll-container { position: relative; z-index: 1; pointer-events: none; overflow: hidden; } .scroll-container.active { position: fixed; top: 0; right: 0; left: 0; } .scroll-container .scroll-container-inner { pointer-events: none; background: #f9f4f1; background: #fff; /* Note - this animation is intentionally slower than the splash screen to give a rubber band effect */ transition: opacity 1000ms ease-in-out, transform 800ms cubic-bezier(.45,0,.27,1); } .scroll-container .scroll-container-inner * { pointer-events: auto; } .scroll-container .scroll-container-inner .faux_footer { pointer-events: none; } .scroll-parallax.parallax-resizing { transform: none !important; transition: none !important; /* important - this is necessary because the adjacent grid items detection does NOT correctly get the position of the grid items whilst they are still animating */ transition-delay: 0 !important; } #main_content { min-height: 100vh; transition: opacity 800ms ease-in-out, transform 800ms cubic-bezier(.45,0,.27,1); position: relative; } /* Page transitions ----------------------------------------------------------- */ body.browser-js-enabled #main_content { /*opacity: 0;*/ } body.splash-open #main_content, body.splash-main-content-in #main_content, body.first-load-complete #main_content { opacity: 1; } body.main-content-hide #main_content { opacity: 0; } body.browser-js-enabled.splash-loader-active .scroll-container-inner { transform-origin: center top; /* transform: translate(0, 100vh); */ } /* Removed as this breaks the fixed side navigation body.first-load-complete .scroll-container-inner { transform: translate(0, 0); } */ body.skip-splash-screen .scroll-container-inner { transform: translate(0, 0); transition: none; } body.x-page-transition .scroll-container-inner, body.x-page-transition .artworks-overlay { transform-origin: center top; transform: translate(-100%, 0); transition: opacity 800ms ease-in-out, transform 800ms cubic-bezier(.48,0,.11,1); } body.x-page-transition.page-transition2 .scroll-container-inner { transition: none; transform: translate(100%, 0); transform: none; opacity: 0; } /* Inner page element transitions ----------------------------------------------------------- */ body.x-page-transition .image { transition: opacity 800ms ease-in-out, transform 800ms cubic-bezier(.86,.01,.14,.99) !important; transform: translate(-100%, 0); } body.x-page-transition #main_slideshow { overflow: hidden; } body.x-page-transition #main_slideshow .slide .image { transform: none; transition: opacity 800ms ease-in-out, transform 800ms cubic-bezier(.45,0,.27,1), max-width 800ms ease-in-out !important; transform: translateX(90%); opacity: 0; } body.x-page-transition h1 { transition: opacity 800ms ease-in-out, transform 800ms cubic-bezier(.86,.01,.14,.99) !important; transform: translate(-200%, 0); } body.x-page-transition .artwork_detail .content h1 { transform: none; } body.x-page-transition .artwork_detail .image { transform: none; } .footer { background: #222; width: 100%; overflow: hidden; position: relative; z-index: 0; font-family: 'Minion Pro', serif; font-family: 'Weiss Std', serif; color: #fff; font-weight: normal; font-style: normal; font-size: 1.6rem; line-height: 3rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.fixed-footer #footer { position: fixed; z-index: 0; top: 0; left: 0; right: 0; bottom: 0; transform: translate3d(0,0,0); visibility: hidden; } body.fixed-footer .footer-visible #footer { visibility: visible; } body.x-page-transition #footer, body.page-artwork-detail-standard #footer, body.fixed-footer.page-artwork-detail-standard #footer, body.x-page-transition-active #footer { display: none !important; } body.page-artwork-detail-standard #main_content, body.fixed-footer.page-artwork-detail-standard #main_content { margin-bottom: 0 !important; } /* PERFORMANCE ISSUE overflow auto body.footer-active.fixed-footer #footer { overflow: auto; -webkit-overflow-scrolling: touch; }*/ .footer a, .footer a:visited { color: #fff; } .footer .inner { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; min-height: 100vh; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-flex-direction: column; flex-direction: column; /* End flexbox */ margin: 0 auto; max-width: 1680px; width: 100%; padding: 160px 80px 70px; margin: 0 auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .footer .wrapper { padding: 0; } .footer .main { clear: both; display: block; margin: 0 -75px 50px 0; } .footer .main .item { width: 33.33%; display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 45px 75px 0 0; vertical-align: top; position: relative; } .footer .main .item:before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 30px; height: 2px; background: #fff; } .footer .main .item .content > div { margin: 0 0 18px; } .footer .aside { clear: both; display: block; margin: 0 -75px 75px 0; text-align: center; } .footer .aside .item { width: 33.33%; display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 75px 0 0; vertical-align: top; text-align: left; } /* .footer .aside .item { opacity: 0; transition: opacity 3000ms cubic-bezier(.18, 1, .21, 1); } .footer-visible2 .footer .aside .item { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 500ms; } */ .footer .social_media_links { padding: 50px 0 0; text-align: left; } .footer .social_media_links .social_links_item { float: none; margin: 0 20px 0 0; display: inline-block; } .footer .credit { text-align: center; font-size: 1.4rem; line-height: 2.0rem; position: absolute; bottom: 40px; left: 0; right: 0; } /* .footer .credit { opacity: 0; transition: opacity 3000ms cubic-bezier(.18, 1, .21, 1); } .footer-visible2 .footer .credit { opacity: 1; transition-delay: 1000ms; } */ .footer .credit div { display: inline-block; margin: 0 10px; } .footer .credit a, .footer .credit a:visited { color: #fff; } /* Mailing list signup ----------------------------------------------------------- */ .footer .mailing_list_signup { padding: 25px 0 0; margin: 0 0 20px; clear: both; } .footer .mailing_list_signup .prelude:after { margin-bottom: 20px; } .footer .mailing_list_signup .error { color: #f30000; } .footer .mailing_list_signup .form_row { width: 100%; position: relative; border: none; } .footer .mailing_list_signup form .form_row input[type='text'] { background: transparent; color: #888; padding: 2px 60px 10px 0; outline: none; font-size: 1.4rem; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; font-weight: normal; } .footer .mailing_list_signup form .form_row input[type='text'].active { color: #fff; } .footer .mailing_list_signup .form_row a { position: absolute; overflow: hidden; top: 0; right: 0; height: 30px; width: 47px; background: url('/images/arrow_right_reverse.png') center center no-repeat; background-size: 47px auto; display: block; text-indent: -100px; } #container_outer { min-width: 320px; } #container { margin: 0; padding-top: 0; opacity: 1; transition: padding 500ms cubic-bezier(.09,.39,.02,.99), opacity 300ms linear, background 5000ms linear; background: #222; } body.first-load-complete #container { opacity: 1; margin-top: 0; padding-top: 0; } body.navigation-open #container { opacity: 0; } #container h1.hidden { overflow: hidden; height: 0; width: 0; padding: 0; margin: 0; } #container .transition-logo { position: fixed; top: 50%; left: 50%; opacity: 0; z-index: 0; margin: -11px 0 0 -97px; transition: transform 1800ms cubic-bezier(.18, 1, .21, 1) 450ms, opacity 2000ms cubic-bezier(.18, 1, .21, 1) 0ms; transform: translateY(-50px); display: none; width: 194px; height: 22px; background: url('/images/logo.png') center center no-repeat; background-size: 194px 22px; /* display: none !important; Asked to remove transition screen */ } /* body.page-transition-active #container .transition-logo { display: block; } #container .transition-logo svg { width: 110px; } body.page-transition #container .transition-logo, body.page-transition2 #container .transition-logo, body.ajax-loading #container .transition-logo, body.ajax-loading-complete #container .transition-logo { opacity: 1; transform: none; } body.ajax-loading-complete #container .transition-logo { opacity: 0; transition: transform 5000ms cubic-bezier(.18, 1, .21, 1), opacity 500ms ease-in-out; } */ /*cookie banner and archimedes overrides*/ #cookie_notification_message { line-height: 1.2em; } #cookie_notification_accept.button { min-width: max-content; } #cookie_preferences_form fieldset { border: none; } /* ---------------------------------------------------------------------------------- Classes ---------------------------------------------------------------------------------- */ /* Artwork detail ---------------------------------------------------------------------------------- */ .subsection-artworks-detail-view { background: #fff; } .pagination_controls { height: 0; } .pagination_controls > div { position: absolute; z-index: 6; top: 85px; width: 80px; height: 80vh; cursor: pointer; text-indent: -200px; background: url('/images/arrow_left.png') 25% center no-repeat; background-size: 47px auto; opacity: 0.15; transition: opacity 400ms ease-in-out, transform 600ms cubic-bezier(.65,.06,.19,.96); transform: translate3d(10px, 0, 0); overflow: hidden; } .pagination_controls > div.pagination_controls_next { right: 0; transform: translate3d(-10px, 0, 0); background: url('/images/arrow_right.png') 75% center no-repeat; background-size: 47px auto; } /* PERFORMANCE ISSUE - causes footer to repaint */ .pagination_controls > div:hover { opacity: 1; transform: translate3d(0, 0, 0); } .pagination_controls > div.pagination_controls_next:hover { opacity: 1; transform: translate3d(0, 0, 0); } .pagination_controls > div a { position: absolute; display: block; top: 0; bottom: 0; left: 0; right: 0; } .pagination_controls > div.disabled { display: none; } body.user-distraction-free .pagination_controls, body.user-distraction-free .pagination_controls > div, body.user-distraction-free .pagination_controls > div a { opacity: 0; pointer-events: none; } .artwork_detail { z-index: 5; position: relative; } /* Style variants ----------------------------------- */ .artwork_detail.artwork_detail_style_dark .artwork_detail_main { background: #262522; } .artwork_detail.artwork_detail_style_hero .artwork_detail_main { background: #262522; } .artwork_detail.has_hero_image .artwork_detail_main { background: transparent; } .artwork_detail .footer { clear: both; float: left; width: 100%; } .artwork_detail .artwork_detail_main { min-height: 100vh; width: 100%; position: relative; background: #fff; z-index: 1; position: relative; transition: background 600ms ease-in-out; } .artwork_detail .artwork_detail_main:after { content: ''; clear: both; display: block; height: 0; } .artwork_hero_image_container_outer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; } .artwork_hero_image_container.image_lazy_load { background: #262522; transition: opacity 600ms ease-in-out, transform 800ms cubic-bezier(.75,.01,.3,.99); } .content-not-reversed .artwork_hero_image_container.active { max-height: 50px; opacity: 0; } .artwork_hero_image_container .image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 4; opacity: 0; transition: opacity 600ms ease-in-out, transform 800ms cubic-bezier(.75,.01,.3,.99); background: center 0 no-repeat; background-size: cover; } .artwork_hero_image_container.active .image { opacity: 1; } .artwork_hero_image_container.loading .image { opacity: 0; } .artwork_hero_image_container img { visibility: hidden; } .artwork_detail .draginner { transition: transform 250ms ease-in-out; } .artwork_detail.dragging .draginner { transition: none; } .artwork_detail .image_container { float: left; width: 50%; position: relative; z-index: 5; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 150px 0 100px 80px; transition: width 400ms cubic-bezier(.65,.06,.19,.96); } .artwork_detail .image_container .object_content { position: absolute; top: 150px; left: 80px; right: 0; bottom: 100px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; transition: top 400ms cubic-bezier(.65,.06,.19,.96),left 400ms cubic-bezier(.65,.06,.19,.96),right 400ms cubic-bezier(.65,.06,.19,.96),bottom 400ms cubic-bezier(.65,.06,.19,.96); } .artwork_detail .image { max-width: 100%; height: 100%; text-align: center; } .artwork_detail .image .image_inner { max-width: 100%; width: 100%; height: 100%; text-align: center; display: flex; align-items: center; justify-content: center; position: relative; } body.browser-msie .artwork_detail .image .image_inner { display: block; } .artwork_detail.zoom-active .image:after { display: none; } /* .artwork_detail .zoomImg { display: none !important; } .artwork_detail.zoom-active .zoomImg { display: block !important; } */ .artwork_detail .image img { max-height: 100%; display: block; margin: 0 auto; } .artwork_detail.dragging .image img { pointer-events: none; -khtml-user-select: none; -o-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; } .artwork_detail .images { position: absolute; top: 150px; left: 100px; right: 0; bottom: 70px; transition: top 1000ms cubic-bezier(.65,.06,.19,.96), left 1000ms cubic-bezier(.65,.06,.19,.96),right 1000ms cubic-bezier(.65,.06,.19,.96),bottom 1000ms cubic-bezier(.65,.06,.19,.96); } .artwork_detail .images .image { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .artwork_detail .images .image.image_hero_placeholder { opacity: 0 !important; transition: opacity 200ms ease-in-out; } .artwork_detail .content_container { float: right; width: 50%; min-height: 0; position: relative; z-index: 5; display: flex; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 150px 80px 60px 80px; transition: transform 400ms cubic-bezier(.65,.06,.19,.96); transition-delay: 400ms; } .artwork_detail .content_below { width: 100%; clear: both; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 80px; margin: 0 0 80px; } @media screen and (min-width: 900px) { .section-events .artwork_detail .image_container { width: 35%; } .section-events .artwork_detail .content_container { width: 65%; } /* .section-events .artwork_detail .hide-image .image_container { display: none !important; } .section-events .artwork_detail .hide-image .content_container { width: 100%; } */ .section-events .artwork_detail .image_container { min-height: 615px !important; } .section-events .artwork_detail .content_container { min-height: 0; } } /* Distraction free mode */ .user-distraction-free .artwork_detail .image_container { width: 100% !important; transition: width 1200ms cubic-bezier(.65,.06,.19,.96) !important; } .user-distraction-free .artwork_detail .images .image.image_hero_placeholder { opacity: 1 !important; } .user-distraction-free .artwork_hero_image_container .image { opacity: 0; } .user-distraction-free .artwork_detail .image_container .object_content, .user-distraction-free .artwork_detail .images { top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; transition: top 1200ms cubic-bezier(.65,.06,.19,.96),left 1200ms cubic-bezier(.65,.06,.19,.96),right 1200ms cubic-bezier(.65,.06,.19,.96),bottom 1200ms cubic-bezier(.65,.06,.19,.96) !important; } .user-distraction-free .artwork_detail .content_container { transform: translateX(50vw) !important; position: absolute !important; top: 0 !important; right: 0 !important; transition: transform 1200ms cubic-bezier(.65,.06,.19,.96) !important; transition-delay: 0 !important; } .artwork_detail .content { width: 100%; align-self: center; position: relative; } .artwork_detail .scroll_down_arrow { position: absolute; bottom: 0; top: auto; right: 0; height: 55px; line-height: 55px; padding: 0 30px 0 0; text-indent: 0; opacity: 1; overflow: visible; transform: none; width: auto; background: url(/images/arrow_down_new.png) right center no-repeat; background-size: auto 52px; } .artwork_detail .content h1 { font-size: 2.2rem; line-height: 3.5rem; margin: 0 0 30px; padding: 40px 0 0; position: relative; } .artwork_detail .content h1:before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 30px; height: 1px; background: #222; } .artwork_detail .content h1 span { display: block; } .artwork_detail .artwork_details { display: block; width: 100%; min-height: 200px; margin: 0 0 30px; } .artwork_detail .artwork_details .subheading { margin: 0 0 25px; } .artwork_detail .artwork_details .detail_subtitle { margin: 0 0 25px; } .artwork_detail .artwork_details .bottom { margin: 0 0 25px; } .artwork_detail .artwork_details .detail_additional { margin: 0 0 0; } .artwork_detail .artwork_details .subtitle { text-align: left; margin: 0; padding: 0; font-size: 22px; line-height: 30px; margin: 0 0 30px; } .artwork_detail .artwork_details > div { margin: 0 0 0; } .artwork_detail .fallback_cart_wrapper { margin: 0 0 20px; } .artwork_detail .description_initial_content { float: left; width: 100%; clear: both; margin: 0 0 25px !important; } .artwork_detail .description_initial_content .description { margin: 0 0 10px; } .artwork_detail .description_additional_content { display: none; float: left; width: 100%; clear: both; margin: 0 0 25px !important; } .artwork_detail .bottom { display: block; width: 100%; margin: 0 0 30px; } .artwork_detail .buttons_container { display: block; float: left; width: 100%; margin: 0 0 30px; } .artwork_detail .store_item { display: block; float: left; margin: 0 0 30px; } .artwork_detail .store_item .store_item { display: block; width: 100%; } .artwork_detail .store_item .store_item .title { display: none; } .artwork_detail .store_item .store_item .price, .artwork_detail .store_item .store_item .delivery_info { color: #333; } .artwork_detail .store_item .store_item .price.sold_out_dynamic, .artwork_detail .store_item .store_item .price.sold_out { color: #e62330; } .artwork_detail .tools { display: block; float: left; width: 100%; margin: 0; padding: 40px 0 0; position: relative; } .artwork_detail .tools:before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 30px; height: 1px; background: #222; } .artwork_detail .tools > div { float: left; margin: 0 20px 0 0; padding: 0; } .phone_enquiry_link { display: none; } .device-handheld .phone_enquiry_link { display: block; } .artwork_detail .image_gallery_multiple_thumbnails { display: block; float: left; width: 100%; margin: 0 0 30px; } .artwork_detail .image_gallery_multiple_thumbnails ul { display: block; margin: 0 -10px 0 0; padding: 0; list-style: none; } .artwork_detail .image_gallery_multiple_thumbnails ul li { float: left; width: 25%; min-width: 40px; max-width: 90px; margin: 0; padding: 0 10px 10px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: auto; } .artwork_detail .image_gallery_multiple_thumbnails ul li a { display: block; position: relative; padding-top: 100%; } .artwork_detail .image_gallery_multiple_thumbnails ul li a img { display: block; position: absolute; top: 0; left: 0; object-fit: cover; width: 100%; height: 100%; } .artwork_detail .image_gallery_multiple_thumbnails ul li a:after { display: block; content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); transition: opacity 400ms ease-in-out; opacity: 0; } .device-desktop .artwork_detail .image_gallery_multiple_thumbnails ul li a:hover:after { opacity: 1; } .artwork_detail .image_gallery_multiple_thumbnails ul li.image-type-video { position: relative; } .artwork_detail .image_gallery_multiple_thumbnails ul li.image-type-video img { z-index: 1; } .artwork_detail .image_gallery_multiple_thumbnails ul li.image-type-video a:after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; opacity: 1; background: url(/images/video_play_icon.svg) center center no-repeat rgba(0,0,0,0.5); background-size: 14px auto; } .artwork_detail .artwork_detail_additional { width: 100%; min-height: 100vh; clear: both; float: left; padding: 150px 70px 100px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: #151515; } .artwork_detail .artwork_detail_additional .content { width: 60%; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 70px 0 0; } .artwork_detail .artwork_detail_additional .content .section { width: 100%; clear: both; margin: 0 0 50px; } .artwork_detail .artwork_detail_additional .content h3 { margin: 0 0 40px; } .artwork_detail .artwork_detail_additional .content .description { margin: 0 0 40px; } /* Hero ---------------------------------------------------------------------------------- */ .hero { width: 100%; min-height: 400px; height: 50vh; position: relative; z-index: 0; overflow: hidden; background: #262522; display: flex; } .scroll-container.standard .hero { } .hero_inner { width: 100%; position: absolute; z-index: 0; top: 0; bottom: 0; overflow: hidden; display: block; } .hero_inner .media_wrapper { width: 100%; position: absolute; top: 0; bottom: 0; overflow: hidden; display: block; background: #000; } .hero_inner .media_wrapper .video_fallback_button { display: none; } .hero .image:before, .hero .slideshow:before, .hero .video_background:before { position: absolute; display: block; content: ''; top: 0; left: 0; right: 0; height: 200px; pointer-events: none; z-index: 2; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */ background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */ } .hero .image:after, .hero .slideshow:after, .hero .video_background:after { position: absolute; display: block; content: ''; height: 200px; pointer-events: none; left: 0; right: 0; bottom: 0; z-index: 2; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ display: none; } .hero_inner .media_wrapper .image { width: 100%; position: absolute; z-index: 0; top: 0; bottom: 0; overflow: hidden; display: block; transition: opacity 600ms ease-in-out; } .hero_inner .media_wrapper .image { opacity: 0; } .hero_inner .media_wrapper.show_fallback .image { opacity: 1; } .hero_inner .media_wrapper .image img { object-fit: cover; height: 100%; width: 100%; position: absolute; display: block; opacity: 0.9; } .hero_inner.hero_overlay_type_2 .media_wrapper .image img { opacity: 0.85; } .hero_inner.hero_overlay_type_3 .media_wrapper .image img { opacity: 0.7; } .hero_inner.hero_overlay_type_4 .media_wrapper .image img { opacity: 0.5; } .hero_inner .media_wrapper .slideshow { width: 100%; position: absolute; z-index: 1; top: 0; bottom: 0; overflow: hidden; display: block; opacity: 0; transition: opacity 600ms ease-in-out; } .hero_inner .media_wrapper.show_slideshow .slideshow { opacity: 1; } .hero_inner .media_wrapper .video_background { width: 100%; position: absolute; z-index: 2; top: 0; bottom: 0; overflow: hidden; display: none; opacity: 0; transition: opacity 1400ms ease-in-out; } .hero_inner .media_wrapper.media_has_video .video_background { display: block; } .hero_inner .media_wrapper.video_can_start .video_background { opacity: 1; } .hero video { object-fit: cover; height: 100%; width: 100%; opacity: 1; display: none; position: relative; z-index: 0; } .version-2 .hero video { opacity: 0.45; } .hero.visible video { display: block; position: relative; z-index: 1; } .hero .inner_wrapper { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; width: 100%; cursor: pointer; /* opacity: 0; */ transition: opacity 400ms ease-in-out; } .hero.no-scroll-click .inner_wrapper { pointer-events: none; cursor: default; } .hero.media_started .inner_wrapper { opacity: 1; transition-delay: 400ms; } .hero .inner_wrapper .arrow { position: absolute; bottom: 6vh; left: 50%; display: block; content: ''; z-index: 2; transition: transform 600ms cubic-bezier(.65,.06,.19,.96), opacity 800ms ease-in-out; transform: translateX(-50%) translateY(35vh); opacity: 0; height: 72px; width: 28px; margin-left: -14px; pointer-events: none; display: none; } .section-home .hero .inner_wrapper .arrow { display: block; } .page-top .hero .inner_wrapper .arrow { transform: translateY(0); opacity: 1; } .hero .inner_wrapper .arrow:before { position: absolute; display: block; width: 50px; left: 50%; top: -30px; margin-left: -25px; content: 'Explore'; font-family: 'Weiss Std', serif; color: #b99667; font-weight: normal; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 1.6rem; line-height: 2.0rem; pointer-events: none; } .hero .inner_wrapper .arrow:after { position: absolute; display: block; content: ''; top: 0; left: 0; right: 0; bottom: 0; background: url('/images/arrow_down_1x_alt1.png') center center no-repeat; height: 72px; width: 27px; /*transition: transform 600ms cubic-bezier(.65,.06,.19,.96), opacity 800ms ease-in-out;*/ animation: scroll-arrow 4000ms infinite; pointer-events: none; } .device-highres .hero .inner_wrapper .arrow:after { background: url('/images/arrow_down.png') center center no-repeat; background-size: 27px 72px; } @keyframes scroll-arrow { 0%, 40%, 50%, 60%, 100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } 45% { -moz-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); } 55% { -moz-transform: translateY(10px); -ms-transform: translateY(10px); -webkit-transform: translateY(10px); transform: translateY(10px); } } .hero .hero_strapline { font-family: 'Weiss Std', serif; color: #b99667; font-weight: normal; text-align: center; width: 100%; margin: -50px 0 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 80px; line-height: 80px; position: absolute; z-index: 2; top: 50%; pointer-events: none; transform: translate3d(0, -50px, 0); opacity: 0; } .hero .hero_content { margin: 0; padding: 30px 50px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 2; top: 50%; pointer-events: none; align-self: center; transform: translate3d(0, 50px, 0); opacity: 0; max-width: 700px; margin: 0 auto; color: #fff; } .hero.visible .hero_content, .hero.visible .hero_strapline { transition: transform 5000ms cubic-bezier(.18, 1, .21, 1), opacity 5000ms cubic-bezier(.18, 1, .21, 1); opacity: 1; transform: translate3d(0, 0, 0); } .hero .hero_content * { pointer-events: none; } .hero .hero_content h1, .hero .hero_content h2 { font-size: 39px; line-height: 40px; letter-spacing: 4px; max-width: 825px; padding: 40px 0 0; position: relative; color: #fff; text-align: center; } .hero .hero_content .subtitle { font-size: 19px; font-style: normal; color: #fff; text-align: center; padding: 20px 0 0; } /* Standard header slideshow ---------------------------------------------------------------------------------- */ .section-home .scroll_section_panels.section_index_1 > .inner { max-width: unset; } #main_slideshow { width: 100%; position: relative; } #main_slideshow .pagination_controls { position: absolute; bottom: 70px; --controls-padding: 60px; --max-width: 1660px; left: max(var(--controls-padding), ((100% - var(--max-width)) / 2) + var(--controls-padding)); width: calc(100% - var(--controls-padding) * 2); display: flex; justify-content: space-between; height: auto; z-index: 100; pointer-events: none; max-width: calc(var(--max-width) - var(--controls-padding) * 2); } #main_slideshow .pagination_controls * { pointer-events: auto; position: static; } #main_slideshow .pagination_controls .pagination_controls_prev { height: auto; opacity: 0.7; } #main_slideshow .pagination_controls .pagination_controls_next { height: auto; opacity: 0.7; } #main_slideshow .pagination_controls .pagination_scroll { bottom: 33px; top: auto; right: 0; height: 55px; line-height: 55px; padding: 0 30px 0 0; text-indent: 0; opacity: 1; overflow: visible; transform: none; width: auto; background: url(/images/arrow_down_new.png) right center no-repeat; background-size: auto 52px; } #main_slideshow .slide-item { width: 100%; } #main_slideshow .slide-item .image { width: 100%; /* padding: min(50%, 550px) 0 0; */ padding: calc(100vh - 85px - 130px) 0 0; margin: 0 0 30px; background: center center no-repeat #f6f6f6; background-size: cover; max-height: 760px; } #main_slideshow .slide-item .content { min-height: 100px; max-width: 1660px; margin: auto; } #main_slideshow .slide-item .content .slide-inner { padding: 0 80px; display: flex; flex-direction: column; align-items: center; } #main_slideshow .slide-item .content h2 { font-size: 4rem; line-height: 4.3rem; margin: 0 0 8px; position: relative; text-align: center; } .feature_panels section.top_slideshow { margin: 0; padding: 0; } /* Scroll sections ---------------------------------------------------------------------------------- */ .scroll_section { width: 100%; position: relative; z-index: 1; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background: #f9f4f1; background: #fff; } .scroll_section.scroll_section_top { transition: background 400ms ease-in-out; } .hero-section-animate .scroll_section.scroll_section_top { } .scroll_section.scroll_section_panels { padding: 0 0 0; overflow: hidden; } .scroll_section.scroll_section_panels > .inner { max-width: 1680px; width: 100%; padding: 175px 0 0; margin: 0 auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 75px; } .scroll_section.scroll_section_panels.section_index_1 > .inner, .scroll_section.scroll_section_standard.section_index_1 > .inner { padding-top: 200px; } .scroll_section.scroll_section_panels.scroll_section_top_contained > .inner { padding-top: 115px; } .special_notice_active .scroll_section.scroll_section_panels.scroll_section_top_contained > .inner { padding-top: 85px; } .scroll_section .heading_wrapper { margin: 0 0 50px; padding: 20px 80px 0; } .scroll_section .heading_wrapper:after { content: ''; display: block; clear: both; overflow: hidden; height: 0; } .scroll_section .heading_wrapper h1 { font-size: 35px; line-height: 38px; float: left; } .scroll_section.scroll_section_standard > .inner { max-width: 1680px; width: 100%; padding: 75px 150px 0; margin: 0 auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Page enquiry widget ---------------------------------------------------------------------------------- */ .page_enquiry_widget { display: block; clear: both; background: #f9f4f1; background: #fafafa; position: relative; z-index: 1; } .page_enquiry_widget form { display: block; max-width: 860px; padding: 110px 80px 140px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; transform: translate3d(0, 50px, 0); opacity: 0; transition: transform 4000ms cubic-bezier(.18, 1, .21, 1), opacity 2500ms cubic-bezier(.18, 1, .21, 1); } .page_enquiry_widget.visible form { transform: translate3d(0, 0, 0); opacity: 1; } .page_enquiry_widget h3 { font-size: 3rem; line-height: 3.8rem; margin: 0 0 40px; max-width: 650px; } .page_enquiry_widget_field { display: block; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 2px solid #222; padding: 0; position: relative; } .page_enquiry_widget_field label { display: none; } .page_enquiry_widget_field input { border: 0; outline: none; padding: 16px 75px 18px 0; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 0 1px 0; color: #222; } .page_enquiry_widget_field input.active { color: #222; } body.device-handheld .page_enquiry_widget_field input { font-size: 16px } .page_enquiry_widget_field .page_enquiry_widget_submit { float: right; width: 47px; height: 55px; position: absolute; top: 0; right: 0; overflow: hidden; } .page_enquiry_widget_field .page_enquiry_widget_submit .loader { position: absolute; top: 15px; left: 10px; z-index: 0; } .page_enquiry_widget_field .page_enquiry_widget_submit a { display: block; margin: 0 auto; width: 47px; height: 55px; background: url('/images/button_arrow_alt.png') center center no-repeat; background-size: auto 7px; display: block; text-indent: -100px; overflow: hidden; position: relative; z-index: 1; transition: background 400ms ease-in-out; } .page_enquiry_widget_field .page_enquiry_widget_submit.loading a, .page_enquiry_widget_field .page_enquiry_widget_submit.loading a:visited { opacity: 0; transition: opacity 400ms ease-in-out; } /* Feature panels ---------------------------------------------------------------------------------- */ .feature_panels section { float: left; width: 100%; position: relative; padding: 0 80px; margin: 0 0 100px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0 0 75px; } /* .scroll_section.section_index_1 .feature_panels section.panel_index_1 { padding-top: 175px; } */ .feature_panels section .area_label { text-align: center; position: absolute; top: 0; width: 100%; max-width: 100%; left: 0; padding-top: 0; position: static; margin: 0 0 60px; } .feature_panels section .area_label h2 { text-align: center; position: relative; padding-top: 30px; font-size: 2.4rem; line-height: 2.8rem; text-align: left; } .feature_panels section .area_label h2:before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 30px; height: 1px; background: #222; } .feature_panels section .panel_heading_container { margin-right: -75px; } .feature_panels section .panel_heading { } .feature_panels section .panel_footer { display: block; text-align: center; } .feature_panels section .panel_footer.disabled { display: none; } .feature_panels section .panel_footer .button { display: inline-block; float: none; } /* Large cascading feature ---------------------------------------------------------------------------------- */ .feature_panels section.panel_type_207 { padding: 0; } .feature_panels section.panel_type_207 .area_label { text-align: center; position: absolute; top: 0; width: 100%; max-width: 100%; left: 0; padding-top: 0; position: absolute; z-index: 2; width: 100%; text-align: center; top: 50%; margin-top: -80px; } .feature_panels section.panel_type_207 .area_label h2 { text-align: center; } .feature_panels section.panel_type_207 .area_label .button { display: inline-block; float: none; } .feature_panels section.panel_type_207 .area_wrapper { min-height: 100vh; position: relative; margin: 0 0 100px; } .feature_panels section.panel_type_207 img { width: 100%; height: 100%; object-fit: cover; } .feature_panels section.panel_type_207 .image1_container { position: static; width: 55%; height: 100vh; float: left; display: flex; align-self: flex-start; -webkit-flex-direction: column; flex-direction: column; justify-content: space-between; padding-bottom: 5%; } .feature_panels section.panel_type_207 .image1 { width: 100%; min-height: 400px; height: 60vh; align-self: flex-end; } .feature_panels section.panel_type_207 .image1_container .area_content { width: 100%; padding: 100px 0 100px 80px; align-self: flex-start; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .feature_panels section.panel_type_207 .image1_container .area_content h2 { text-align: right; font-size: 8.5rem; line-height: 8.5rem; } .feature_panels section.panel_type_207 .image2_container { position: static; width: 45%; height: 100vh; float: right; display: flex; align-self: flex-start; -webkit-flex-direction: column; flex-direction: column; justify-content: space-between; padding-right: 5%; padding-left: 5%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; } .feature_panels section.panel_type_207 .image2 { height: 70vh; } .feature_panels section.panel_type_207 .image2_container .area_content { width: 100%; padding-top: 60px; } .feature_panels section.panel_type_207 .image2_container .area_content .description { margin: 0 0 40px; } .feature_panels section.panel_type_207 .image2_container .area_content .button { display: inline-block; float: none; } /* Variant 2 ---------------------------------------------------------------------------------- */ .feature_panels section.panel_type_207.feature_variant_2 .image1_container { float: right; position: static; width: 50%; height: 100vh; align-self: flex-start; padding-bottom: 50px; display: block; } .feature_panels section.panel_type_207.feature_variant_2 .image1 { height: 60vh; } .feature_panels section.panel_type_207.feature_variant_2 .image1_container .area_content { padding-left: 0; padding-right: 80px; } .feature_panels section.panel_type_207.feature_variant_2 .image1_container .area_content h2 { text-align: left; } .feature_panels section.panel_type_207.feature_variant_2 .image2_container { float: left; width: 50%; height: 100vh; padding-right: 5%; padding-left: 0; padding-bottom: 10%; align-self: flex-start; display: flex; -webkit-align-items: flex-end; align-items: flex-end; } .feature_panels section.panel_type_207.feature_variant_2 .image2 { height: 60vh; align-self: flex-end; } .feature_panels section.panel_type_207.feature_variant_2 .image2_container .area_content { padding-left: 10%; width: auto; max-width: 300px; float: right; text-align: right; } /* Animations ---------------------------------------------------------------------------------- */ .scroll-container.standard .feature_panels section.panel_type_207 .image1, .scroll-container.standard .feature_panels section.panel_type_207 .image2 { transform: translate3d(0, 50vh, 0); opacity: 0; transition: none; } .scroll-container.standard .feature_panels section.panel_type_207 .image2_container .area_content { transform: translate3d(0, 35vh, 0); opacity: 0; transition: none; } .scroll-container.standard .feature_panels section.panel_type_207 .visible.animate-from-bottom .image1, .scroll-container.standard .feature_panels section.panel_type_207 .visible.animate-from-bottom .image2, .scroll-container.standard .feature_panels section.panel_type_207 .visible.animate-from-bottom .image2_container .area_content { transition: transform 3000ms cubic-bezier(.18, 1, .21, 1), opacity 3000ms cubic-bezier(.18, 1, .21, 1); } .scroll-container.standard .feature_panels section.panel_type_207 .visible.animate-from-bottom .image1 { transition-delay: 400ms; } .scroll-container.standard .feature_panels section.panel_type_207 .visible.animate-from-bottom .image2_container .area_content { transition-delay: 800ms; } .scroll-container.standard .feature_panels section.panel_type_207 .animate-from-top .image1, .scroll-container.standard .feature_panels section.panel_type_207 .animate-from-top .image2, .scroll-container.standard .feature_panels section.panel_type_207 .animate-from-top .image2_container .area_content { transition: transform 3000ms cubic-bezier(.18, 1, .21, 1), opacity 3000ms cubic-bezier(.18, 1, .21, 1); transform: translate3d(0, -30vh, 0); } .scroll-container.standard .feature_panels section.panel_type_207 .visible .image1, .scroll-container.standard .feature_panels section.panel_type_207 .visible .image2, .scroll-container.standard .feature_panels section.panel_type_207 .visible .image2_container .area_content { transform: translate3d(0, 0, 0); opacity: 1; } /* Large text feature ---------------------------------------------------------------------------------- */ .feature_panels section.panel_type_208 { padding: 0; } .feature_panels section.panel_type_208 .area_wrapper { min-height: 100vh; position: relative; margin: 0; display: flex; justify-content: space-between; } .feature_panels section.panel_type_208 .area_label { position: absolute; z-index: 2; width: 100%; text-align: center; top: 50%; margin-top: -80px; } .feature_panels section.panel_type_208 .area_label .button { display: inline-block; float: none; } .feature_panels section.panel_type_208 img { width: 100%; height: 100%; object-fit: cover; } .feature_panels section.panel_type_208 .image1_container { position: static; width: 50%; min-height: 100vh; align-self: flex-end; padding-right: 50px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; align-self: flex-start; } .feature_panels section.panel_type_208 .image1_container .area_content { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 100px 0 100px 100px; } .feature_panels section.panel_type_208 .image1_container .area_content .content_inner { max-width: 620px; margin: 0 auto; } .feature_panels section.panel_type_208 .image1 { height: 60vh; min-height: 400px; } .feature_panels section.panel_type_208 .image2_container { position: static; width: 50%; min-height: 100vh; align-self: flex-start; padding-left: 50px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: flex; -webkit-flex-direction: column; flex-direction: column; justify-content: space-between; } .feature_panels section.panel_type_208 .image2_container .area_content { align-self: flex-start; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 100px 100px 100px 0; } .feature_panels section.panel_type_208 .image2_container .area_content .content_inner { max-width: 620px; margin: 0 auto; } .feature_panels section.panel_type_208 .image2 { width: 100%; min-height: 400px; height: 60vh; align-self: flex-end; } /* Animations ---------------------------------------------------------------------------------- */ .scroll-container.standard .feature_panels section.panel_type_208 .image1, .scroll-container.standard .feature_panels section.panel_type_208 .image2 { transform: translate3d(0, 50vh, 0); opacity: 0; transition: none; } .scroll-container.standard .feature_panels section.panel_type_208 .image1_container .area_content { transform: translate3d(0, 35vh, 0); opacity: 0; transition: none; } .scroll-container.standard .feature_panels section.panel_type_208 .visible.animate-from-bottom .image1, .scroll-container.standard .feature_panels section.panel_type_208 .visible.animate-from-bottom .image2, .scroll-container.standard .feature_panels section.panel_type_208 .visible.animate-from-bottom .image1_container .area_content { transition: transform 3000ms cubic-bezier(.18, 1, .21, 1), opacity 3000ms cubic-bezier(.18, 1, .21, 1); } .scroll-container.standard .feature_panels section.panel_type_208 .visible.animate-from-bottom .image1 { transition-delay: 400ms; } .scroll-container.standard .feature_panels section.panel_type_208 .visible.animate-from-bottom .image1_container .area_content { transition-delay: 800ms; } .scroll-container.standard .feature_panels section.panel_type_208 .animate-from-top .image1, .scroll-container.standard .feature_panels section.panel_type_208 .animate-from-top .image2 { transition: transform 3000ms cubic-bezier(.18, 1, .21, 1), opacity 3000ms cubic-bezier(.18, 1, .21, 1); transform: translate3d(0, -30vh, 0); } .scroll-container.standard .feature_panels section.panel_type_208 .visible .image1, .scroll-container.standard .feature_panels section.panel_type_208 .visible .image2, .scroll-container.standard .feature_panels section.panel_type_208 .visible .image1_container .area_content { transform: translate3d(0, 0, 0); opacity: 1; } /* Text panel ---------------------------------------------------------------------------------- */ .feature_panels section.panel_type_209 { margin: 0 0 75px; } .feature_panels section.panel_type_209 .area_content { max-width: 800px; margin: 0 auto; } .feature_panels section.panel_type_209 .area_footer_content { max-width: 800px; margin: 0 auto; text-align: center; padding: 50px 0 0; } .feature_panels section.panel_type_209 .area_footer_content .button { display: inline-block; float: none; } .feature_panels section.panel_type_209.artwork_list_categories_footer { } .feature_panels section.panel_type_209.artwork_list_categories_footer .area_content { text-align: center; } .feature_panels section.panel_type_209.artwork_list_categories_footer .area_content h2 { text-align: center; font-size: 3rem; line-height: 3.2rem; margin: 0 0 20px; } .feature_panels section.panel_type_209.artwork_list_categories_footer .area_content .navigation ul { text-align: center; } .feature_panels section.panel_type_209.artwork_list_categories_footer .area_content .navigation ul li:nth-of-type(1) a { margin: 0; } .feature_panels section.panel_type_209.artwork_list_categories_footer .area_content .navigation ul li a { font-size: 1.5rem; } /* Slider panel ---------------------------------------------------------------------------------- */ .feature_panels section.panel_type_210 { margin: 0 0 75px; padding: 0; } .records_list_slider { position: relative; } .records_list_wrapper { position: relative; } .records_list_slider .pagination_controls > div { opacity: 0.4; height: 100%; top: 0; bottom: 0; } .records_list_slider .pagination_controls > div:hover { opacity: 1; } .records_list_slider .item { display: block; height: 550px; padding: 0 25px; transition: opacity 800ms ease-in-out; opacity: 0.2; opacity: 1; } .records_list_slider .item.is-selected { opacity: 1; } .records_list_slider .item a { display: block; height: 550px; } .records_list_slider .item .image { height: 550px; padding: 0; position: relative; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: block; } .records_list_slider .item .image img { position: static; width: auto; max-height: 550px; max-width: none; pointer-events: none; align-self: center; } .records_list_slider_caption { min-height: 25px; text-align: center; padding: 35px 0 0; } .records_list_slider_caption.subtitle span { margin: 0; } /* Basic page layout format ---------------------------------------------------------------------------------- */ .content_basic_layout { padding: 150px 150px; max-width: 1223px; margin: 0 auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .special_notice_active .content_basic_layout { margin-top: 30px; } .content_basic_layout .heading_wrapper { margin: 0 0 40px; } .content_basic_layout .heading_wrapper:after { content: ''; display: block; clear: both; overflow: hidden; height: 0; } .content_basic_layout h1 { font-size: 3.5rem; line-height: 3.8rem; display: block; margin: 0 0 20px; } .content_basic_layout h1:last-child { margin-bottom: 0; } .content_basic_layout .subtitle { display: block; clear: both; margin: 0 0 20px; } .content_basic_layout .prelude { width: 33.33%; } .content_basic_layout .heading_image { margin: 0 0 40px; } /* Aside format ---------------------------------------------------------------------------------- */ .content_basic_layout.aside_format { max-width: 1439px; } .content_basic_layout.aside_format .heading_wrapper { margin: 0 0 40px; } .content_basic_layout.aside_format h1 { font-size: 6.2rem; line-height: 6.2rem; position: relative; padding-top: 40px; margin: 0; } .content_basic_layout.aside_format h1:before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 30px; height: 2px; background: #b99667; } .content_basic_layout.aside_format .content_body { float: left; width: 50%; } .content_basic_layout.aside_format .content_body .content { margin: 0 0 50px; } .content_basic_layout.aside_format .content_aside { float: right; width: 50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 100px; } .content_slideshow { width: 100%; } .content_slideshow .slide_pagination_controls { height: 0; } .content_slideshow .slide_pagination_controls > div { position: absolute; z-index: 6; z-index: 2000; top: 0; bottom: 0; left: 0; right: auto; width: 120px; height: auto; cursor: pointer; text-indent: -200px; opacity: 0.15; transition: opacity 400ms ease-in-out, transform 600ms cubic-bezier(.65,.06,.19,.96); overflow: hidden; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */ background: -moz-linear-gradient(left, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */ } .content_slideshow .slide_pagination_controls > div:before { position: absolute; content: ''; text-indent: -9999px; top: 0; bottom: 0; left: 0; right: 0; background: url('/images/arrow_left.png') 25% center no-repeat; background-size: 47px auto; transition: opacity 400ms ease-in-out, transform 600ms cubic-bezier(.65,.06,.19,.96); transform: translate3d(10px, 0, 0); } .content_slideshow .slide_pagination_controls > div.pagination_controls_next { right: 0; left: auto; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.45) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.45) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); /* IE6-9 */ } .content_slideshow .slide_pagination_controls > div.pagination_controls_next:before { transform: translate3d(-10px, 0, 0); background: url('/images/arrow_right.png') 75% center no-repeat; background-size: 47px auto; } /* PERFORMANCE ISSUE - causes footer to repaint */ .content_slideshow .slide_pagination_controls > div:hover { opacity: 1; transform: translate3d(0, 0, 0); } .content_slideshow .slide_pagination_controls > div.pagination_controls_next:hover { opacity: 1; transform: translate3d(0, 0, 0); } .content_slideshow .slide_pagination_controls div.pagination_controls_next { left: auto; right: 0; } .content_slideshow .item { width: 100%; } .content_slideshow .item .image { margin: 0 0 25px; position: relative; } .content_slideshow .item .image img { display: block; } .content_slideshow .item .content { width: 100%; clear: both; } .content_slideshow .item .content h3 { margin: 0 0 5px; } .content_slideshow .item .content .description { margin: 0 0 8px; } /* Text columns ---------------------------------------------------------------------------------- */ .text_columns { margin: 0 -75px 0 0; display: block; } .text_columns .aside { float: right; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 50%; padding: 0 75px 0 0; } .text_columns .aside .image { width: 100%; text-align: center; } .text_columns .aside img { max-height: 50vw; margin: 0 auto; display: block; } .text_columns .content { float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 50%; padding: 0 75px 0 0; } .text_columns .additional_details { clear: both; padding-top: 50px; } .text_columns .content_initial_text { display: block; max-height: none; transition: all 600ms ease-in-out; } .text_columns .content_initial_text .inner { display: block; /* -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 75px; -moz-column-gap: 75px; column-gap: 75px; */ } .text_columns .pull_quote { margin: 0 0 30px; } .text_columns .extended_text_show .content_initial_text { max-height: 0; overflow: hidden; display: none; } .text_columns .content_extended_text { display: block; transition: all 2000ms cubic-bezier(.18, 1, .21, 1); } .text_columns .content_extended_text .inner { display: block; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 75px; -moz-column-gap: 75px; column-gap: 75px; } .text_columns .extended_text_hidden .content_extended_text { opacity: 0; transform: translateY(200px); transition: none; height: 0; overflow: hidden; } .text_columns .extended_text_show .content_reveal_more_link { display: none; } /* Basic records grid styles ---------------------------------------------------------------------------------- */ .records_grid { transition: transform 500ms cubic-bezier(.65,.06,.19,.96), opacity 500ms ease-in-out; } .records_grid.filter_transition { transform: translateY(100px); opacity: 0; } .feature_panels section .records_grid .panel_footer { margin-right: 75px; } /* Standard grid ---------------------------------------------------------------------------------- */ .standard_grid { width: auto; margin: 0 -75px 0 0; margin-right: -50px; } .standard_grid .item { box-sizing: border-box; width: 33.33%; padding: 0 75px 75px 0; display: inline-block; vertical-align: top; padding: 0 50px 50px 0; } @media screen and (min-width: 600px) { .standard_grid.item_count_2 .item { width: 50%; } } .standard_grid .item { box-sizing: border-box; width: 33.33%; padding: 0 75px 75px 0; display: inline-block; vertical-align: top; padding: 0 50px 50px 0; } /* Tile list variant ------------------------ */ .standard_grid.tile_grid .group { box-sizing: border-box; width: 33.33%; padding: 0 75px 0 0; display: inline-block; vertical-align: top; } .standard_grid.tile_grid .group .item { width: 100%; padding: 0 0 75px 0; } /* Progressive grid variant ------------------------ */ .scroll-container.standard .standard_grid.progressive_grid .group { transition: height 500ms cubic-bezier(.65,.06,.19,.96); } .scroll-container.standard .standard_grid.progressive_grid .item:nth-of-type(3n+1) { padding-top: 0; } .scroll-container.standard .standard_grid.progressive_grid .item:nth-of-type(3n+2) { padding-top: 75px; } .scroll-container.standard .standard_grid.progressive_grid .item:nth-of-type(3n+3) { padding-top: 25px; } .scroll-container.standard .standard_grid.progressive_grid .item:nth-of-type(3n+1), .scroll-container.standard .standard_grid.progressive_grid .item:nth-of-type(3n+2), .scroll-container.standard .standard_grid.progressive_grid .item:nth-of-type(3n+3) { padding-top: 0; } /* Animations ------------------------ */ .scroll-container.standard .standard_grid .item { transform: translate3d(0, 150px, 0); opacity: 0; transition: none; } .scroll-container.standard .standard_grid .item.visible.animate-from-bottom { transition: transform 3000ms cubic-bezier(.18, 1, .21, 1), opacity 3000ms cubic-bezier(.18, 1, .21, 1); } .scroll-container.standard .standard_grid .item.animate-from-top { transform: translate3d(0, -150px, 0); } .scroll-container.standard .standard_grid .item.visible.animate-from-top { transition: transform 3000ms cubic-bezier(.18, 1, .21, 1), opacity 3000ms cubic-bezier(.18, 1, .21, 1); } .scroll-container.standard .standard_grid .item.visible { opacity: 1; transform: translate3d(0, 0, 0); } .scroll-container.standard .standard_grid .item.animate-from-bottom:nth-of-type(3n + 1) { transition-delay: 0; } .scroll-container.standard .standard_grid .item.animate-from-bottom:nth-of-type(3n + 2) { transition-delay: 600ms; } .scroll-container.standard .standard_grid .item.animate-from-bottom:nth-of-type(3n + 3) { transition-delay: 300ms; } .standard_grid .item.revealable { display: none; } .standard_grid .item .image { width: 100%; margin: 0 0 30px; display: flex; min-height: 100px; overflow: hidden; } body.browser-msie .standard_grid .item .image { display: block; } .standard_grid .item .image img { max-width: 100%; display: block; align-self: flex-end; transition: transform 500ms ease-out; } .standard_grid .item .image { width: 100%; margin: 0 0 20px; } .standard_grid .item .image img { max-width: 100%; } .standard_grid .item .prelude { position: absolute; padding-top: 14px; top: 0; left: 0; transform: rotate(90deg); transform-origin: 0 0; } .standard_grid .item h3 { margin: 0 0 65px; padding: 20px 0 0; position: relative; margin: 0 0 5px; } .standard_grid .item h3:before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 30px; height: 1px; background: #111; } .standard_grid .item .content { margin: 0 0 20px; padding: 0 30px 0 0; } .standard_grid .item .bottom { margin: 0 0 0; padding: 0 30px 0 0; } .standard_grid .item .buttons { padding: 20px 0 0; } /* Twitter variant ---------------------------------------------------------------------------------- */ .standard_grid.twitter_grid .item .large_text_5 { margin: 0 0 0; padding: 30px 0 0; position: relative; } .standard_grid .item .large_text_5:before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 30px; height: 2px; background: #b99667; } .standard_grid .item .large_text_5 a, .standard_grid .item .large_text_5 a:visited { color: #866c4a; } /* Condensed variant ---------------------------------------------------------------------------------- */ .standard_grid.standard_grid_condensed .item { padding-bottom: 50px; } .standard_grid.standard_grid_condensed .item h3 { min-height: 0; margin: 0 0 12px; font-size: 2.0rem; line-height: 2.8rem; } .standard_grid.standard_grid_condensed .item .bottom { margin: 0; } /* Text grid ---------------------------------------------------------------------------------- */ .text_grid { width: auto; margin: 0 -75px 0 0; padding: 0 0 75px; } .text_grid .item { box-sizing: border-box; width: 33.33%; padding: 0 75px 0 0; display: inline-block; vertical-align: top; } .text_grid .item h3 { margin: 0 0 50px; } .text_grid .item .content { font-size: 15px; line-height: 32px; } /* Instagram grid ---------------------------------------------------------------------------------- */ .feature_panels section.panel_type_instagram_feed .area_label { text-align: center; position: static; top: 0; width: 100%; max-width: 100%; left: 0; padding-top: 0; margin: 0 0 60px; } .feature_panels section.panel_type_instagram_feed .area_label h2 { text-align: center; position: relative; padding-top: 42px; float: left; font-size: 5.2rem; line-height: 5.2rem; text-align: left; } .feature_panels section.panel_type_instagram_feed .area_label h2:before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 30px; height: 1px; background: #b99667; } .feature_panels section.panel_type_instagram_feed .area_label .social_media_links { float: right; width: auto; clear: none; padding-top: 55px; } .feature_panels section.panel_type_instagram_feed .area_label .social_media_links .social_links_item { margin: 0 0 0 15px; } .instagram_grid { width: auto; margin: 0 -20px 0 0; padding: 72px 0 30px; padding-top: 0; } .instagram_grid .item { box-sizing: border-box; width: 20%; padding: 0 15px 15px 0; display: inline-block; vertical-align: top; } .instagram_grid .item a { display: block; padding-top: 100%; width: 100%; height: 0; position: relative; } .instagram_grid .item .image { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .instagram_grid .item .image .image_content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .instagram_grid .item .image .image_lazy_load.loading .loader { width: 16px; height: 16px; margin: -8px 0 0 -8px; } .instagram_grid .item .image img { width: 100%; } /* Animations ------------------------ */ .scroll-container.standard .instagram_grid .item { transform: translate3d(0, 150px, 0); opacity: 0; transition: none; } .scroll-container.standard .instagram_grid .item.visible.animate-from-bottom { transition: transform 3000ms cubic-bezier(.18, 1, .21, 1), opacity 3000ms cubic-bezier(.18, 1, .21, 1); } .scroll-container.standard .instagram_grid .item.animate-from-top { transform: translate3d(0, -150px, 0); } .scroll-container.standard .instagram_grid .item.visible.animate-from-top { transition: transform 3000ms cubic-bezier(.18, 1, .21, 1), opacity 3000ms cubic-bezier(.18, 1, .21, 1); } .scroll-container.standard .instagram_grid .item.visible { opacity: 1; transform: translate3d(0, 0, 0); } .scroll-container.standard .instagram_grid .item.animate-from-bottom:nth-of-type(5n + 1) { transition-delay: 300ms; } .scroll-container.standard .instagram_grid .item.animate-from-bottom:nth-of-type(5n + 2) { transition-delay: 600ms; } .scroll-container.standard .instagram_grid .item.animate-from-bottom:nth-of-type(5n + 3) { transition-delay: 0; } .scroll-container.standard .instagram_grid .item.animate-from-bottom:nth-of-type(5n + 4) { transition-delay: 300ms; } .scroll-container.standard .instagram_grid .item.animate-from-bottom:nth-of-type(5n + 5) { transition-delay: 300ms; } /* Records grid ---------------------------------------------------------------------------------- */ .feature_panels section.panel_type_records_grid .area_label { text-align: center; position: absolute; top: 0; width: 100%; max-width: 100%; left: 0; padding-top: 0; position: static; margin: 0 0 60px; } .feature_panels section.panel_type_records_grid .area_label h2 { text-align: center; position: relative; padding-top: 30px; font-size: 2.4rem; line-height: 2.8rem; text-align: left; } .feature_panels section.panel_type_records_grid .area_label h2:before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 30px; height: 1px; background: #222; } .section-artworks.no-page-params .feature_panels section.panel_type_records_grid .area_label h2 { font-size: 3.5rem; line-height: 3.8rem; display: block; margin: 0 0 20px; } .section-artworks.no-page-params .feature_panels section.panel_type_records_grid .area_label h2:before { display: none; } /* Artworks grid ---------------------------------------------------------------------------------- */ .feature_panels section.section-artwork-grid.standard-heading .panel_heading_container { text-align: center; top: 0; width: 100%; max-width: 100%; left: 0; padding-top: 0; position: static; } .feature_panels section.section-artwork-grid.standard-heading .panel_heading_container h2 { text-align: center; position: relative; padding-top: 30px; font-size: 2.4rem; line-height: 2.8rem; text-align: left; } .feature_panels section.section-artwork-grid.standard-heading .panel_heading_container h2:before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 30px; height: 1px; background: #222; } .panel_type_202 .panel_heading_container { margin: 0 0 100px; } .panel_type_202 .panel_heading_container h2 { margin: 0; } /* Intro heading variant -------------------------------- */ .feature_panels section.intro-heading-enabled .area_label { text-align: center; position: absolute; z-index: 1; top: 50px; width: 100%; max-width: 100%; left: 0; padding-top: 0; pointer-events: none; } .feature_panels section.intro-heading-enabled .area_label * { pointer-events: none; } .section_index_1 .feature_panels section.intro-heading-enabled.panel_number_0 { position: static; top: 50%; padding-top: 50px; } .section_index_1 .feature_panels section.intro-heading-enabled.panel_number_0 .panel_heading_container { position: absolute; top: 50vh; left: 0; right: 0; z-index: 1; margin-top: -50px; margin-right: 0; transition: transform 2000ms cubic-bezier(.45,0,.27,1), opacity 800ms ease-in-out; transform: translateY(-50px); opacity: 0; padding-bottom: 0; padding: 0 80px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; pointer-events: none; } .section_index_1 .feature_panels section.intro-heading-enabled.panel_number_0 .panel_heading_container * { pointer-events: none; } .section_index_1 .feature_panels section.intro-heading-enabled.panel_number_0 .panel_heading_container:after { position: absolute; content: ''; display: block; bottom: 0; left: 50%; width: 0; transform: translateX(-50%); height: 1px; background: #222; transition: width 300ms cubic-bezier(.45,0,.27,1); } .page-intro-1 .section_index_1 .feature_panels section.intro-heading-enabled.panel_number_0 .panel_heading_container:after { width: 60px; } .section_index_1 .feature_panels section.intro-heading-enabled.panel_number_0 .panel_heading_container h2 { margin: 0 0 20px; text-align: center; font-size: 5.0rem; line-height: 5.0rem; letter-spacing: 2px; } body #container_outer.page-intro .section_index_1 .feature_panels section.intro-heading-enabled.panel_number_0 .panel_heading_container { transform: translateY(0); opacity: 1; /*transition: none;*/ } body #container_outer.page-intro.page-top .section_index_1 .feature_panels section.intro-heading-enabled.panel_number_0 .records_grid .item.visible { transform: translate3d(0, 150px, 0); opacity: 0; } .works_grid { width: auto; margin: 0 -75px 0 0; } .works_grid .item { box-sizing: border-box; width: 50%; padding: 0 75px 75px 0; display: inline-block; vertical-align: top; transform: translate3d(0, 80px, 0); opacity: 0; transition: transform 4000ms cubic-bezier(.18, 1, .21, 1), opacity 2500ms cubic-bezier(.18, 1, .21, 1); } /* Tile list variant ------------------------ */ .works_grid.tile_grid { margin-right: -150px; } .works_grid.tile_grid .group { box-sizing: border-box; width: 50%; padding: 0 150px 0 0; display: inline-block; vertical-align: top; } .scroll-container.standard .works_grid.tile_grid .group:nth-of-type(3n+1) { padding-top: 0; } .scroll-container.standard .works_grid.tile_grid .group:nth-of-type(3n+2) { padding-top: 300px; padding-top: 33vh; } .works_grid.tile_grid .group .item { width: 100%; padding: 0 0 75px 0; } .works_grid .item.revealable { display: none; } .works_grid .item .image { width: 100%; margin: 0 0 30px; display: flex; overflow: hidden; } body.browser-msie .works_grid .item .image { display: block; } .works_grid .item .image img { max-width: 100%; display: block; align-self: flex-end; transition: transform 500ms ease-out, opacity 400ms ease-in-out; } .works_grid .item h3 { margin: 0 0 12px; } .works_grid .item .content { margin: 0 0 12px; } .works_grid .item .bottom { } .works_grid .item .bottom .caption p { margin-bottom: 0; } .works_grid .item .prelude { max-width: 100px; } /* 3 Columns ------------------------ */ .works_grid.tile_grid.columns_3 { margin-right: -50px; } .works_grid.tile_grid.columns_3 .group { width: 33.33%; padding: 0 50px 0 0; } .scroll-container.standard .works_grid.tile_grid.columns_3 .group:nth-of-type(3n+1) { padding-top: 0; } .scroll-container.standard .works_grid.tile_grid.columns_3 .group:nth-of-type(3n+2) { padding-top: 0; } .scroll-container.standard .works_grid.tile_grid.columns_3 .group:nth-of-type(3n+3) { padding-top: 0; } /* Animations ------------------------ */ .scroll-container.standard .works_grid .tile_grid_formatted { transition: height 500ms cubic-bezier(.65,.06,.19,.96); } .scroll-container.standard .works_grid .item { transform: translate3d(0, 150px, 0); opacity: 0; } .scroll-container.standard .works_grid .item.visible.animate-from-bottom { transition: transform 3000ms cubic-bezier(.18, 1, .21, 1), opacity 3000ms cubic-bezier(.18, 1, .21, 1); } .scroll-container.standard .works_grid .item.animate-from-top { transform: translate3d(0, -150px, 0); } .scroll-container.standard .works_grid .item.visible.animate-from-top { transition: transform 3000ms cubic-bezier(.18, 1, .21, 1), opacity 3000ms cubic-bezier(.18, 1, .21, 1); } .scroll-container.standard .works_grid .item.visible { opacity: 1; transform: translate3d(0, 0, 0); } body.page-transition-delay .scroll-container.standard .works_grid.tile_grid .group { transition: opacity 800ms ease-in-out, transform 1200ms cubic-bezier(.48,0,.11,1) !important; transform: translate(0, 150vw) !important; opacity: 0 !important; } body.page-transition-delay .scroll-container.standard .works_grid.tile_grid .group:nth-of-type(3n+1) { transition-delay: 100ms !important; } body.page-transition-delay .scroll-container.standard .works_grid.tile_grid .group:nth-of-type(3n+2) { transition-delay: 0 !important; } /* .scroll-container.standard .works_grid .item.animate-from-bottom:nth-of-type(3n + 1) { transition-delay: 0; } .scroll-container.standard .works_grid .item.animate-from-bottom:nth-of-type(3n + 2) { transition-delay: 600ms; } */ /* Large grid ---------------------------------------------------------------------------------- */ .full_grid { width: 100%; float: left; margin: 0 0 0 0; } .full_grid .item { width: auto; max-width: 100%; margin: 0 auto 75px; position: relative; transform: translate3d(0, 50px, 0); opacity: 0; transition: transform 4000ms cubic-bezier(.18, 1, .21, 1), opacity 2500ms cubic-bezier(.18, 1, .21, 1); } .full_grid .item:last-child { margin-bottom: 0; } .full_grid .item.animate-from-bottom { transition: transform 4000ms cubic-bezier(.18, 1, .21, 1), opacity 2500ms cubic-bezier(.18, 1, .21, 1); } .full_grid .item.animate-from-top { transition: transform 4000ms cubic-bezier(.18, 1, .21, 1), opacity 2500ms cubic-bezier(.18, 1, .21, 1); transform: translate3d(0, -50px, 0); } .full_grid .item.visible { opacity: 1; transform: translate3d(0, 0, 0); } .full_grid .item .area { width: 50%; display: inline-block; vertical-align: top; box-sizing: border-box; } .full_grid .item .area .content { margin: 0 0 20px; } .full_grid .item .area .align_bottom { width: 100%; position: absolute; bottom: 0; left: 0; right: 0; } .full_grid .item .image { width: 100%; margin: 0 0 40px; display: block; box-sizing: border-box; vertical-align: top; background: #fefefe; overflow: hidden; } .full_grid .item .image:last-child { margin-bottom: 0; } .full_grid .item .image img { max-width: 100%; display: block; } /* Large grid ---------------------------------------------------------------------------------- */ .large_grid { width: 100%; float: left; margin: 0 0 0 0; } .large_grid .item { width: auto; margin: 0 0 75px 0; position: relative; transform: translate3d(0, 50px, 0); opacity: 0; transition: transform 4000ms cubic-bezier(.18, 1, .21, 1), opacity 2500ms cubic-bezier(.18, 1, .21, 1); } .large_grid .item.animate-from-bottom { transition: transform 4000ms cubic-bezier(.18, 1, .21, 1), opacity 2500ms cubic-bezier(.18, 1, .21, 1); } .large_grid .item.animate-from-top { transition: transform 4000ms cubic-bezier(.18, 1, .21, 1), opacity 2500ms cubic-bezier(.18, 1, .21, 1); transform: translate3d(0, -50px, 0); } .large_grid .item.visible { opacity: 1; transform: translate3d(0, 0, 0); } .large_grid .item:after { content: ''; display: block; height: 0; clear: both; overflow: hidden; } .large_grid .item .area { width: 33.33%; padding-left: 75px; float: right; vertical-align: top; box-sizing: border-box; } .large_grid .item .area .content { margin: 0 0 20px; padding: 0 30px 0 0; } .large_grid .item .area h3 { min-height: 0; margin: 0 0 120px; font-size: 5.8rem; line-height: 6.0rem; position: relative; padding-top: 42px; } .large_grid .item h3:before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 30px; height: 2px; background: #b99667; } .large_grid .item .area .align_bottom { width: 100%; position: absolute; bottom: 0; left: 0; right: 0; } .large_grid .item .image { width: 66.66%; float: left; box-sizing: border-box; vertical-align: top; background: #fefefe; overflow: hidden; } .large_grid .item .image img { max-width: 100%; margin: 0 auto; display: block; transition: transform 500ms ease-out, opacity 400ms ease-in-out; } /* Medium grid ---------------------------------------------------------------------------------- */ .feature_panels section.panel_type_203 { margin-bottom: 0; } .medium_grid { width: 100%; float: left; margin: 0 0 0 0; } .medium_grid .item { width: auto; margin: 0 0 75px; position: relative; text-align: center; max-width: 1250px; } .medium_grid .item:after { content: ''; display: block; height: 0; clear: both; overflow: hidden; } .medium_grid .item > a { display: inline-block; } .medium_grid .item .area { width: 55%; padding-right: 0; padding-left: 75px; float: none; display: inline-block; text-align: left; vertical-align: middle; box-sizing: border-box; } .medium_grid .item .area h3 { min-height: 0; margin: 0 0 12px; font-size: 2.4rem; line-height: 2.8rem; position: relative; padding-top: 20px; } .medium_grid .item h3:before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 30px; height: 1px; background: #222; } .medium_grid .item .area .content { margin: 0 0 35px; padding: 0 30px 0 0; } .medium_grid .item .area .buttons { padding: 35px 0 0; } .medium_grid .item .image { width: 45%; min-height: 10px; float: none; display: inline-block; vertical-align: middle; box-sizing: border-box; vertical-align: middle; overflow: hidden; } .medium_grid .item .image img { max-width: 100%; margin: 0 auto; display: block; transition: transform 500ms ease-out, opacity 400ms ease-in-out; } @media screen and (min-width: 1100px) { .panel_style_2 .medium_grid .item .image { width: 28%; } .panel_style_2 .medium_grid .item .area { width: 40%; } .panel_style_2 .medium_grid .item .area h3 { } .panel_style_2 .medium_grid .item .area .buttons { padding: 0; } .panel_style_2 .medium_grid .item .area .button { margin-bottom: 0; } } /* Animations ------------------------------------------------------------------------------------- */ .medium_grid .item .image { transform: translate3d(0, 150px, 0); opacity: 0; } .medium_grid .item.animate-from-bottom .image { transition: transform 6000ms cubic-bezier(.18, 1, .21, 1), opacity 4000ms cubic-bezier(.18, 1, .21, 1); } .medium_grid .item.animate-from-top .image { transition: transform 4000ms cubic-bezier(.18, 1, .21, 1), opacity 2500ms cubic-bezier(.18, 1, .21, 1); transform: translate3d(0, -50px, 0); } .medium_grid .item.visible .image { opacity: 1; transform: translate3d(0, 0, 0); } .medium_grid .item .area h3, .medium_grid .item .area .content, .medium_grid .item .area .bottom, .medium_grid .item .area .buttons { transform: translate3d(0, 50px, 0); opacity: 0; } .medium_grid .item.animate-from-bottom .area h3, .medium_grid .item.animate-from-bottom .area .content, .medium_grid .item.animate-from-bottom .area .bottom, .medium_grid .item.animate-from-bottom .area .buttons { transition: transform 1500ms cubic-bezier(.18, 1, .21, 1), opacity 1500ms cubic-bezier(.18, 1, .21, 1); } .medium_grid .item.animate-from-top .area h3, .medium_grid .item.animate-from-top .area .content, .medium_grid .item.animate-from-top .area .bottom, .medium_grid .item.animate-from-top .area .buttons { transition: transform 1500ms cubic-bezier(.18, 1, .21, 1), opacity 1500ms cubic-bezier(.18, 1, .21, 1); transform: translate3d(0, -50px, 0); } .medium_grid .item.visible .area h3, .medium_grid .item.visible .area .content, .medium_grid .item.visible .area .bottom, .medium_grid .item.visible .area .buttons { opacity: 1; transform: translate3d(0, 0, 0); } .medium_grid .item.visible.animate-from-bottom .area h3 { transition-delay: 300ms; } .medium_grid .item.visible.animate-from-bottom .area .content { transition-delay: 600ms; } .medium_grid .item.visible.animate-from-bottom .area .bottom { transition-delay: 900ms; } .medium_grid .item.visible.animate-from-bottom .area .buttons { transition-delay: 1200ms; } /* Simple content (image with text) ---------------------------------------------------------------------------------- */ .feature_panels section.panel_type_212 { margin-bottom: 0; padding: 0; } .simple_content { width: 100%; float: left; margin: 0 0 0 0; } .simple_content .item { width: auto; margin: 0 auto 75px; position: relative; display: flex; max-width: 1600px; } .simple_content .item:after { content: ''; display: block; height: 0; clear: both; overflow: hidden; } .simple_content .item > a { display: flex; } .simple_content .item .area { width: 50%; padding-right: 100px; padding-left: 75px; float: left; align-self: center; vertical-align: top; box-sizing: border-box; } .simple_content .item .area h3 { min-height: 0; margin: 0 0 40px; font-size: 5.8rem; line-height: 6.0rem; position: relative; padding-top: 42px; } .simple_content .item h3:before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 30px; height: 2px; background: #b99667; } .simple_content .item .area .content { margin: 0 0 35px; padding: 0 30px 0 0; } .simple_content .item .area .content:last-child { margin-bottom: 0; } .simple_content .item .area .buttons { padding: 35px 0 0; } .simple_content .item .image { width: 50%; min-height: 10px; float: left; box-sizing: border-box; vertical-align: top; overflow: hidden; } .simple_content .item .image img { max-width: 100%; margin: 0 auto; display: block; transition: transform 500ms ease-out, opacity 400ms ease-in-out; } /* Alternative - image right ------------------------------------------------------------------------------------- */ .simple_content.simple_content_alt .item .image { float: right; } .simple_content.simple_content_alt .item .area { float: left; padding-right: 75px; padding-left: 100px; } /* Animations ------------------------------------------------------------------------------------- */ .simple_content .item .image { transform: translate3d(0, 150px, 0); opacity: 0; } .simple_content .item.animate-from-bottom .image { transition: transform 6000ms cubic-bezier(.18, 1, .21, 1), opacity 4000ms cubic-bezier(.18, 1, .21, 1); } .simple_content .item.animate-from-top .image { transition: transform 4000ms cubic-bezier(.18, 1, .21, 1), opacity 2500ms cubic-bezier(.18, 1, .21, 1); transform: translate3d(0, -50px, 0); } .simple_content .item.visible .image { opacity: 1; transform: translate3d(0, 0, 0); } .simple_content .item .area h3, .simple_content .item .area .content, .simple_content .item .area .bottom, .simple_content .item .area .buttons { transform: translate3d(0, 50px, 0); opacity: 0; } .simple_content .item.animate-from-bottom .area h3, .simple_content .item.animate-from-bottom .area .content, .simple_content .item.animate-from-bottom .area .bottom, .simple_content .item.animate-from-bottom .area .buttons { transition: transform 1500ms cubic-bezier(.18, 1, .21, 1), opacity 1500ms cubic-bezier(.18, 1, .21, 1); } .simple_content .item.animate-from-top .area h3, .simple_content .item.animate-from-top .area .content, .simple_content .item.animate-from-top .area .bottom, .simple_content .item.animate-from-top .area .buttons { transition: transform 1500ms cubic-bezier(.18, 1, .21, 1), opacity 1500ms cubic-bezier(.18, 1, .21, 1); transform: translate3d(0, -50px, 0); } .simple_content .item.visible .area h3, .simple_content .item.visible .area .content, .simple_content .item.visible .area .bottom, .simple_content .item.visible .area .buttons { opacity: 1; transform: translate3d(0, 0, 0); } .simple_content .item.visible.animate-from-bottom .area h3 { transition-delay: 300ms; } .simple_content .item.visible.animate-from-bottom .area .content { transition-delay: 600ms; } .simple_content .item.visible.animate-from-bottom .area .bottom { transition-delay: 900ms; } .simple_content .item.visible.animate-from-bottom .area .buttons { transition-delay: 1200ms; } /* Lazy load ---------------------------------------------------------------------------------- */ .image_lazy_load { position: relative; } .image_lazy_load:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; background: #f6f6f6; transition: opacity 400ms ease-in-out; content: ''; display: block; } .image a { position: relative; z-index: 1; display: block; } .image_lazy_load img { transition: opacity 400ms ease-in-out; } .image_lazy_load img.zoomImg { transition: none; } .image_lazy_load img.init_img { max-width: 100%; width: 100%; } .image_lazy_load.loaded img.init_img { display: none; } .image_lazy_load.loading img { opacity: 0; transition: none; } .image_lazy_load.loading:before { opacity: 1; } .image_lazy_load.loading .loader { position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -12px; } /* Misc ---------------------------------------------------------------------------------- */ .loader { width: 25px; height: 25px; display: none; position: relative; } .loader.loader_small { width: 16px; height: 16px; } .loader:before, .loader:after { -webkit-transform-origin: center center; transform-origin: center center; content: ''; display: block; width: 100%; height: 100%; border-radius: 100%; background-color: #ccc; position: absolute; top: 0; left: 0; opacity: 0.6; } .loading .loader, .shipping_options_loading .loader { display: block; } .loading .loader:before, .loading .loader:after, .shipping_options_loading .loader:before, .shipping_options_loading .loader:after { -webkit-animation: sk-bounce 1.4s infinite ease-in-out; animation: sk-bounce 1.4s infinite ease-in-out; } .loading .loader:after, .shipping_options_loading .loader:after { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } .video_embed_wrapper { } .video_embed_wrapper .video_embed_functions { display: none; } a .content, a:visited .content { color: #444; } .text_blocks { display: block; } .text_blocks .block { display: block; margin: 0 0 15px; } .columns { margin: 0 -15px 0 0; display: block; } .columns:after { content: ''; clear: both; height: 0; overflow: hidden; display: block; } .columns .column { float: left; vertical-align: top; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 50%; padding: 0 15px 0 0; } .link, .content_read_more_link { font-family: 'Weiss Std', serif; color: #222; font-weight: normal; font-size: 1.5rem; line-height: 2.0rem; font-family: 'Weiss Std', serif; color: #222; font-weight: normal; font-style: normal; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; } .link a, .link a:visited, a.link, a.link:visited, .content_read_more_link a, .content_read_more_link a:visited { color: #222; } .content_read_more_link { clear: both; display: block; margin-top: 30px; position: relative; } .content_reveal_more_link { clear: both; display: block; padding-top: 20px; } .link.link_more a:before { content: '+ '; } .links_simple ul { margin: 0; padding: 0; list-style: none; } .links_simple ul li { display: block; margin: 0 0 8px; line-height: 2rem; } .links_simple ul li a { font-family: 'Minion Pro', serif; font-family: 'Weiss Std', serif; color: #222; font-weight: normal; font-style: normal; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .simple_rows { clear: both; width: 100%; border-top: 1px solid #e8e0d7; } .simple_rows .item { clear: both; width: 100%; border-bottom: 1px solid #e8e0d7; padding: 25px 0 30px; padding: 14px 0 8px; display: flex; } .simple_rows .item > a { display: flex; width: 100%; } .simple_rows .item .image { width: 90px; margin: 0 20px 0 0; flex-shrink: 0; } .simple_rows .item .content { flex-grow: 1; line-height: 2.1rem; display: flex; } .simple_rows .item .content > a, .simple_rows .item .content .faux_a { flex-grow: 1; padding: 5px 0 0; display: block; } .simple_rows .item:not(.active) .content .faux_a { cursor: pointer; } .simple_rows .item h3 { font-size: 1.8rem; line-height: 2.2rem; margin: 0 0 3px; font-family: 'Minion Pro', serif; font-family: 'Weiss Std', serif; color: #222; font-weight: normal; font-style: normal; font-size: 1.5rem; line-height: 2rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .simple_rows .item .content div { margin: 0 0 5px; } .simple_rows .item .content div:last-child { margin: 0; } .simple_rows .item .content .list_revealable { opacity: 0; display: none; transition: opacity 400ms ease-in-out, max-height 400ms cubic-bezier(.12,1.93,.58,1); } .simple_rows .item.active .content .list_revealable { opacity: 1; } .simple_rows .item .content .list_revealable div { margin: 0 0 0; } .simple_rows .item .content .list_revealable div:first-child { padding: 10px 0 0; } .simple_rows .item .content .list_revealable div.description { padding: 14px 0 0; } .simple_rows .item .content .list_revealable div.link { margin: 0 0 20px; padding: 10px 0 0; } .simple_rows .item .content .down_arrow { flex-shrink: 0; width: 30px; height: 30px; } .simple_rows .item .content .down_arrow:after { content: ''; display: block; cursor: pointer; background: url(/images/down_arrow.png) center center no-repeat; background-size: 17px auto; width: 30px; height: 30px; } .simple_rows .item.active .content .down_arrow:after { transform: rotate(180deg); } .fallback_cart_wrapper { } .fallback_cart_wrapper .price, .fallback_cart_wrapper .link { display: inline-block; margin: 0 20px 0 0; } .subtitle { font-family: 'Minion Pro', serif; font-family: 'Weiss Std', serif; color: #222; font-weight: normal; font-style: italic; font-size: 15px; line-height: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .subtitle span { display: inline-block; margin: 0 25px 0 0; } .bottom, .subheading { font-family: 'Minion Pro', serif; font-family: 'Weiss Std', serif; color: #222; font-weight: normal; font-size: 15px; line-height: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .buttons { width: 100%; clear: both; float: left; } .buttons .button, .buttons .store_item { float: left; clear: none; margin: 0 15px 15px 0; } .buttons .button:last-child, .buttons .store_item:last-child { margin-right: 0; } .buttons.buttons_condensed .button span, .buttons.buttons_condensed .button a { padding-left: 16px; padding-right: 68px; } .buttons.buttons_condensed .button:after { right: 14px; } .buttons.buttons_condensed .button span { padding-right: 80px; } .prelude { font-family: 'Minion Pro', serif; color: #b99667; font-weight: normal; font-style: italic; font-size: 15px; line-height: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .price { } .detail_subtitle { } .content_sectons { display: block; } .content_sections .item { display: block; clear: both; width: 100%; font-family: 'Minion Pro', serif; color: #222; font-weight: normal; font-style: normal; font-size: 15px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-top: 20px; margin-bottom: 20px; position: relative; } .content_sections .item:before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 30px; height: 1px; background: #222; } /* Forms ----------------------------------------------------------- */ form { margin: 0; padding: 0; } form .form_row .g-recaptcha { margin: 0 0 10px; } form .form_row { display: block; clear: both; margin: 0 0 10px; float: left; width: 100%; border-bottom: 1px solid #eee; } form .form_row.error_row { border: 0; max-height: 0; opacity: 0; margin: 0; padding: 0; font-size: 1.4rem; line-height: 2.1rem; color: #f30000; transition: all 400ms ease-in-out; } form .form_row.error_row.active { opacity: 1; max-height: 100px; padding: 0 0 10px; } form .form_row label { display: none; } form .form_row .checkbox_container { float: left; clear: both; width: 100%; cursor: pointer; padding-left: 4px; } form .form_row .checkbox_container input { display: none; } form .form_row .checkbox_container label { display: block; float: left; padding: 0 0 0 25px; margin: 5px 0 10px; position: relative; } form .form_row .checkbox_container label:after { content: ''; display: block; position: absolute; top: 5px; left: 0px; height: 15px; width: 15px; border: 1px solid #666; border-radius: 2px; } form .form_row .checkbox_container label:before { content: ''; display: block; position: absolute; top: 9px; left: 2px; height: 11px; width: 15px; background: url('/images/tick.svg') 0 0 no-repeat; background-size: auto 11px; opacity: 0; transform: scale(0.2); transition: opacity 400ms ease-in-out, transform 800ms cubic-bezier(.12,1.93,.58,1); } form .form_row .checkbox_container input:checked + label:before { transform: scale(1); opacity: 1; } form .form_row input[type='text'], form .form_row textarea, form .form_row select { background: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; border: none; -webkit-appearance: none; -moz-appearance: none; color: #111111; padding: 10px 4px; outline: none; border-radius: 0; resize: none; } form .form_row.error input[type='text'], form .form_row.error textarea, form .form_row.error select, form .form_row.error .checkbox_container label { color: #f30000; } form .form_row input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #f9f4f1 inset; color: #322e29; -webkit-text-fill-color: #322e29; } @media screen and (-webkit-min-device-pixel-ratio:0) { /* Stops mobile safari from zooming-in when you focus on a field */ .device-handheld form .form_row input, .device-handheld form .form_row textarea, .device-handheld form .form_row select { font-size: 16px; } } form .form_row textarea { min-height: 100px; } form .form_row input.active, form .form_row textarea.active, form .form_row select.active { color: #322e29; } .select_container { position: relative; } .select_container:after { content: ""; position: absolute; top: 50%; transform: translate(0, -3px); right: 15px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #111111; pointer-events: none; } /* Store item ---------------------------------------------------------------------------------- */ .store_item { overflow: hidden; clear: both; position: relative; border: 1px solid #222; font-family: 'Minion Pro', serif; color: #322e29; color: #222; font-weight: normal; font-style: italic; font-size: 1.4rem; line-height: 2.0rem; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: left; padding: 0 90px 0 16px; cursor: pointer; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; position: relative; transition: color 300ms cubic-bezier(.65,.06,.19,.96), background 300ms linear; } .store_item:before { content: ''; pointer-events: none; background: #f6f6f6; position: absolute; top: -50px; left: -40px; right: 0; z-index: 0; bottom: -50px; width: 0; transform: translate3d(0, 0, 0) rotate(15deg); transition: transform 400ms cubic-bezier(.65,.06,.19,.96), width 400ms cubic-bezier(.65,.06,.19,.96); } .device-desktop .store_item:hover { } .device-desktop .store_item:hover:before { width: calc(100% + 40px); transform: none; } .store_item .title { display: none; } .store_item .quantity { height: 0; width: 0; overflow: hidden; visibility: hidden; } .store_item .price { float: left; margin: 0; position: relative; z-index: 1; padding: 14px 15px 11px 0; line-height: 20px; font-family: 'Minion Pro', serif; color: #322e29; font-weight: normal; font-style: normal; font-size: 1.4rem; line-height: 2.0rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .store_item .delivery_info { float: left; margin: 0; padding: 15px 0 11px; line-height: 1.8rem; color: #e62330; } .store_item .store_item_controls { float: left; margin: 0; } .store_item .store_item_remove_container { opacity: 1 !important; } .store_item .store_item_remove_container .store_item_remove_from_cart { display: none !important; } .store_item_controls { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; z-index: 1; } .store_item_controls:after { position: absolute; top: 13px; right: 15px; display: block; content: ''; background: url('/images/cart.png') 0 0 no-repeat; background-size: 17px 17px; height: 17px; width: 17px; transition: background 300ms linear; pointer-events: none; } .device-desktop .store_item:hover .store_item_controls:after { background-image: url('/images/cart_alt.png'); } .store_item_add_to_cart { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: block; width: 100%; cursor: pointer; } .store_item_add_to_cart{ color: inherit; background: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; border: 0; } .store_item_add_to_cart span { display: block !important; position: absolute; pointer-events: none; top: 0; right: 40px; width: 65px; padding: 14px 0px 11px; line-height: 20px; cursor: pointer; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: right; transition: transform 600ms cubic-bezier(.65,.06,.19,.96); } .store_item_add_to_cart:after { content: 'Add'; display: block !important; position: absolute; pointer-events: none; top: 0; right: 40px; width: 65px; padding: 14px 0px 11px; line-height: 20px; cursor: pointer; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: right; transition: transform 600ms cubic-bezier(.65,.06,.19,.96); transform: translate3d(0, 46px, 0); } .device-desktop .store_item:hover .store_item_add_to_cart:after { transform: translate3d(0, 0, 0); } .store_item.active .store_item_add_to_cart:after { transform: translate3d(0, -46px, 0); } .device-desktop .store_item:hover .store_item_add_to_cart span { transform: translate3d(0, -46px, 0); } .store_item_remove_container { display: block !important; position: absolute; pointer-events: none; transform: translate3d(0, 46px, 0); top: 0; right: 40px; width: 65px; padding: 14px 0px 11px 0; line-height: 20px; cursor: pointer; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: right; transition: transform 600ms cubic-bezier(.65,.06,.19,.96); } .store_item_remove_container, .store_item_remove_container * { pointer-events: none; } .store_item.active .store_item_add_to_cart span { transform: translate3d(0, -46px, 0); } .store_item.active .store_item_remove_container { transform: translate3d(0, 0, 0); pointer-events: none; } .store_item.active:hover .store_item_remove_container { transform: translate3d(0, 46px, 0); } .store_item.active .store_item_remove_container * { pointer-events: none; } .button, button:not(.store_item_add_to_cart) { float: left; position: relative; background: #fff; overflow: hidden; font-family: inherit; outline: none; border: none; border-radius: 0; } .button em.qty { display: inline-block; background: #333; border-radius: 50px; height: 22px; width: 22px; /*border: 2px solid #151515;*/ vertical-align: top; transition: transform 400ms cubic-bezier(.75,.01,.3,.99), opacity 400ms ease-in-out, color 400ms ease-in-out, background 400ms ease-in-out; transform: scale(0.5); opacity: 0; font-style: normal; color: #fff; margin-top: -4px; margin-left: 8px; font-size: 1.0rem; line-height: 2.3rem; text-align: center; font-weight: bold; letter-spacing: -0.6px; text-indent: -1px; } .filters_active .button em.qty { transform: scale(1); opacity: 1; } .button:hover em.qty { transform: scale(1.2); background: #f9f4f1; color: #222; } .button a, .button > span, button:not(.store_item_add_to_cart) { float: left; border: 1px solid #222; font-family: 'Minion Pro', serif; color: #322e29; font-weight: normal; font-style: normal; font-size: 14px; line-height: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-size: auto 8px; padding: 14px 100px 11px 40px; cursor: pointer; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; position: relative; transition: color 300ms cubic-bezier(.65,.06,.19,.96), border 300ms cubic-bezier(.65,.06,.19,.96), background 300ms linear; } button:not(.store_item_add_to_cart) { background: transparent; } .button:before { content: ''; pointer-events: none; background: #f6f6f6; position: absolute; top: -80px; left: -60px; right: 0; bottom: -80px; width: 0; transform: translate3d(0, 0, 0) rotate(15deg); transition: transform 400ms cubic-bezier(.65,.06,.19,.96), width 400ms cubic-bezier(.65,.06,.19,.96); } .button:after, button:not(.store_item_add_to_cart):after { content: ''; display: block; pointer-events: none; position: absolute; width: 42px; height: 7px; top: 21px; right: 32px; transition: background 300ms linear, transform 400ms cubic-bezier(.65,.06,.19,.96); background-image: url('/images/button_arrow_alt.png'); background-size: auto 7px; } .device-desktop .button:hover:after { background-image: url('/images/button_arrow_alt.png'); } .device-desktop .button:hover:before { width: calc(100% + 60px); transform: none; } /* Alt button ------------------------------ */ .button.prominent, .button.prominent, button.prominent, .notify_panel .button.prominent { background-color: #fff; } .button.prominent a, .notify_panel .button.prominent a { } .button.prominent:after, button.prominent:after, .notify_panel .button.prominent:after { background-image: url('/images/button_arrow_alt.png'); } .button.prominent:before, .notify_panel .button.prominent:before { } .device-desktop .button.prominent:hover a, .device-desktop .button.prominent:hover span, .device-desktop .notify_panel .button.prominent:hover a, .device-desktop .notify_panel .button.prominent:hover span { } .device-desktop .button.prominent:hover:after, .device-desktop .notify_panel .button.prominent:hover:after { background-image: url('/images/button_arrow.png'); } .overlay .button, .notify_panel .button { background: none; } .overlay .button a, .notify_panel .button a { color: #b99667; border: 1px solid #71614A; } .overlay .button:before, .notify_panel .button:before { background: #b99667; } .notify_panel .button.prominent:before { background-color: rgba(38, 37, 34, 1); } .overlay .button a, .notify_panel .button a { border-color: #b99667; } .overlay .button:hover a, .notify_panel .button:hover a { color: #151515; } .notify_panel .button.prominent:hover a { color: #b99667; } .button.loading { pointer-events: none; } .button.loading:before { left: 0; } .button.loading a span { opacity: 0; transition: opacity 400ms ease-in-out; } .button.loading:after { transform: translateX(100px); } .button .loadersvg { position: absolute; top: 50px; left: 50%; margin-left: -10px; min-width: 0; z-index: 5; padding: 0 !important; transition: top 400ms ease-in-out; } .button.loading .loadersvg { top: 12px; } .button.loading .loadersvg svg { -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; -webkit-transform-origin: center center; transform-origin: center center; height: 20px; width: 20px; } .button.loading .loadersvg svg .path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; -webkit-animation: dash 1.5s ease-in-out infinite, color3 6s ease-in-out infinite; animation: dash 1.5s ease-in-out infinite, color3 6s ease-in-out infinite; stroke-linecap: round; } @-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 color3 { 100%, 0% { stroke: #b99667; } 40% { stroke: #8c7658; } 66% { stroke: #b99667; } 80%, 90% { stroke: #b99667; } } @keyframes color3 { 100%, 0% { stroke: #b99667; } 40% { stroke: #8c7658; } 66% { stroke: #b99667; } 80%, 90% { stroke: #b99667; } } .button .loader { display: block; position: absolute; top: 10px; left: 50%; margin-left: -7px; transform: translateY(-50px); min-width: 0; z-index: 5; padding: 0 !important; transition: transform 400ms ease-in-out; display: none !important; } .button.loading .loader { transform: translateY(0); } .button .loader:before, .button .loader:after { background: #ccc; } /* ----------------------------------------------------------- Notify panel / slide-in panel ----------------------------------------------------------- */ .notify_panel { display: none; position: fixed; z-index: 2002; top: 0; right: 0; bottom: 0; max-width: 430px; width: 100%; background: #f9f4f1; background: #262522; background: rgba(38, 37, 34, 0.95); background: #fff; transition: all 600ms cubic-bezier(.65,.06,.19,.96); transform: translate3d(430px,0,0); opacity: 1; } body.cms-frontend-toolbar-active .notify_panel { top: 28px; } .notify_panel.active { display: block; } .notify_panel.active.animate { transform: translate3d(0,0,0); opacity: 1; } .notify_panel_mask { display: none; transition: background 700ms ease-in-out; } body.sc_quick_cart_widget_active { overflow: hidden; } body.sc_quick_cart_widget_active .notify_panel_mask { position: fixed; display: block; z-index: 2001; top: 0; right: 0; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.2); opacity: 0; -webkit-transition: opacity 400ms ease-in-out; transition: opacity 400ms ease-in-out; } body.sc_quick_cart_widget_active.sc_quick_cart_widget_animate .notify_panel_mask { opacity: 1; } body.sc_quick_cart_widget_animate #main_content { transform: translate3d(-200px,0,0); } .notify_panel .notify_panel_header { position: absolute; top: 0; left: 0; right: 0; padding: 28px 30px 30px; height: 71px; border-bottom: 1px solid rgba(255,255,255,0.1); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .notify_panel .notify_panel_header h2 { font-size: 1.9rem; line-height: 2.0rem; font-family: 'Weiss Std', serif; color: #222; font-weight: normal; text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; float: left; } .notify_panel h3 { font-size: 1.8rem; line-height: 2.3rem; margin: 0 0 10px; padding: 10px 0 0 4px; float: left; } .notify_panel_close { position: absolute; top: 22px; right: 30px; padding: 7px 0 9px; margin: 0 0 0 25px; z-index: 1200; cursor: pointer; font-family: 'Weiss Std', serif; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: grayscale; color: #b99667; font-weight: normal; font-size: 1.4rem; line-height: 2.0rem; } .notify_panel .notify_panel_content { position: absolute; top: 71px; bottom: 140px; left: 0; right: 0; overflow: auto; -webkit-overflow-scrolling: touch; } .notify_panel .notify_panel_items { float: left; width: 100%; } .notify_panel .notify_panel_content form { padding: 20px; } .notify_panel .notify_panel_content ul { margin: 0; float: left; width: 100%; padding: 0; list-style: none; } .notify_panel .notify_panel_content ul li { display: block; float: left; width: 100%; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; clear: both; max-height: 500px; } .notify_panel .notify_panel_content ul li.hide { transition: max-height 500ms cubic-bezier(.65,.06,.19,.96), padding 500ms cubic-bezier(.65,.06,.19,.96); max-height: 0; padding: 0; transition-delay: 500ms; } .notify_panel .notify_panel_content ul li.hide .sqcw_item_inner { transition: transform 500ms cubic-bezier(.65,.06,.19,.96); transform: translate3d(-100%, 0, 0); } .notify_panel .notify_panel_content ul li .sqcw_item_inner { display: block; width: 100%; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px 30px 0; } .notify_panel .notify_panel_content ul li .sqcw_item_image { display: inline-block; vertical-align: middle; width: 32%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; } .notify_panel .notify_panel_content ul li .sqcw_item_image img { max-height: 215px; margin: 0 auto; display: block; } .notify_panel .notify_panel_content ul li .sqcw_item_content { display: inline-block; vertical-align: middle; width: 68%; padding-left: 40px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .notify_panel .notify_panel_content #sqcw_items_list:after { display: none; margin: 20px; clear: both; float: left; font-size: 1.3rem; line-height: 1.8rem; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); clear: both; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 15px 20px; content: 'Please note: Items in your basket are not reserved. Please complete your order to secure the purchase of the item.'; } .notify_panel .notify_panel_content ul li .content { float: left; width: 70%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .notify_panel .notify_panel_content ul li .sqcw_item_content .sqcw_item_error, .notify_panel .notify_panel_content ul li .sqcw_item_unavailable { width: 100%; display: block; font-size: 1.3rem; line-height: 2.1rem; color: #f30000; margin: 0 0 10px; display: none; } .notify_panel .notify_panel_content ul li.sqcw_max_qty_error .sqcw_item_content .sqcw_item_error, .notify_panel .notify_panel_content ul li .sqcw_item_unavailable { display: block; } .notify_panel .notify_panel_content ul li .sqcw_item_content .sqcw_item_details { width: 100%; display: block; } .notify_panel .notify_panel_content ul li .sqcw_item_content .sqcw_item_details .title, .notify_panel .notify_panel_content ul li .content .title, .notify_panel .notify_panel_content ul li .content .artist, .notify_panel .notify_panel_content ul li .content .content_type { display: block; font-family: 'Minion Pro', serif; font-family: 'Weiss Std', serif; color: #222; font-weight: normal; font-size: 15px; line-height: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0 0 10px; } .notify_panel .notify_panel_content ul li .sqcw_item_content .sqcw_item_details .title { color: #b99667; } .notify_panel .notify_panel_content ul li .content .content_type { margin: 0; } .notify_panel .notify_panel_content ul li .content .artist { margin: 0; } .notify_panel .notify_panel_content ul li .content .title em { font-style: normal; } .notify_panel .notify_panel_content ul li .sqcw_item_content .sqcw_item_details .details, .notify_panel .notify_panel_content ul li .content { display: none; } .notify_panel .notify_panel_content ul li .content { margin: 0 } .notify_panel .notify_panel_content ul li .sqcw_item_content .sqcw_item_tools { width: 100%; display: block; float: left; border-top: 1px solid rgba(255,255,255,0.1); padding: 11px 0 0; } .notify_panel .notify_panel_content ul li .sqcw_item_content .sqcw_item_tools .sqcw_cell_singleprice { display: none; } .notify_panel .notify_panel_content ul li .sqcw_item_content .sqcw_item_tools .sqcw_cell_quantity { float: left; display: none; } .notify_panel .notify_panel_content ul li .sqcw_item_content .sqcw_item_tools .sqcw_cell_quantity .qty { padding: 0 4px; } .notify_panel .notify_panel_content ul li .sqcw_item_content .sqcw_item_tools .sqcw_cell_quantity .qty:after { /*content: 'x'; display: inline-block; padding: 0 8px; text-transform: lowercase; */ } .notify_panel .notify_panel_content ul li .sqcw_item_content .sqcw_item_tools .sqcw_cell_quantity .sqcw_item_qty_label { display: none; } .notify_panel .notify_panel_content ul li .sqcw_item_content .sqcw_item_tools .sqcw_cell_quantity .decrease_qty.disabled, .notify_panel .notify_panel_content ul li .sqcw_item_content .sqcw_item_tools .sqcw_cell_quantity .increase_qty.disabled { opacity: 0.3; } .notify_panel .notify_panel_content ul li .sqcw_item_content .sqcw_item_tools .sqcw_cell_total { float: left; font-family: 'Minion Pro', serif; font-family: 'Weiss Std', serif; color: #222; font-weight: normal; font-style: italic; font-size: 15px; line-height: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .notify_panel .notify_panel_content ul li .sqcw_item_content .sqcw_item_tools .sqcw_cell_remove { float: right; } .notify_panel .notify_panel_content ul li .sqcw_item_content .sqcw_item_tools .sqcw_cell_remove a { display: block; text-align: left; text-indent: -100px; overflow: hidden; height: 14px; width: 14px; margin-right: -4px; background: url(/images/close_small_alt.png) center center no-repeat; background-size: 7px 7px; } .notify_panel .notify_panel_content #sqcw_empty { display: block; padding: 50px 20px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 1.9rem; line-height: 2.0rem; font-family: 'Weiss Std', serif; color: #b99667; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); } .notify_panel .notify_panel_footer { position: absolute; bottom: 0; left: 0; right: 0; height: 140px; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid rgba(255,255,255,0.1); } .notify_panel .notify_panel_footer #sqcw_total { display: block; width: 100%; float: left; font-family: 'Minion Pro', serif; font-family: 'Weiss Std', serif; color: #222; font-weight: normal; font-style: italic; font-size: 15px; line-height: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 30px 30px 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .notify_panel .notify_panel_footer #sqcw_total .sqcw_total_label { float: left; } .notify_panel .notify_panel_footer #sqcw_total .sqcw_total_price { float: right; } .notify_panel .notify_panel_footer #sqcw_total .sqcw_total_price_currency { padding-right: 6px; } .notify_panel .notify_panel_footer #sqcw_checkout { clear: both; display: block; padding: 0 30px 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .notify_panel .notify_panel_footer .sqcw_checkout_button { display: block; width: 100%; float: none; } .notify_panel .notify_panel_footer .sqcw_checkout_button a { width: 100%; text-align: left; } .notify_panel .notify_panel_footer .sqcw_checkout_button.button { } .notify_panel .notify_panel_footer .sqcw_checkout_button.button:before { } .notify_panel .notify_panel_footer .sqcw_checkout_button.button a, .notify_panel .notify_panel_footer .sqcw_checkout_button.button a:visited { } .notify_panel .notify_panel_footer .sqcw_checkout_button.button:hover a, .notify_panel .notify_panel_footer .sqcw_checkout_button.button:hover a:visited { } /* ----------------------------------------------------------- Shopping cart / Checkout ----------------------------------------------------------- */ #sc_processing_payment { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200000; display: none; } .section-store.page-param-basket.sc-payment-processing #sc_processing_payment { display: block; } #sc_processing_payment div.arpromptfade { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200000; opacity: 0.6; } #sc_processing_payment div#arprompt { z-index: 200001; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); } #sc_processing_payment div.arprompt .arpromptmessage { margin: 0; } .section-store.page-param-basket #header #basket { display: none; } .section-store .subsection-store-basket { margin: 0 auto; } .section-store .subsection-store-basket:after { height: 0; display: block; content: ''; clear: both; overflow: hidden; } .section-store .subsection-store-basket #content_module { float: left; width: 60%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 150px 100px 50px; } .section-store .subsection-store-basket #sidebar { float: right; clear: none; width: 40%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 150px 50px 50px 0; background: #f5ece7; background: #fff; } .section-store .subsection-store-basket h2 { margin: 0 0 35px; font-size: 3.2rem; line-height: 4rem; } #sc_checkout_content #shipping_container #shipping_zones_container h3, #sc_checkout_content #shipping_container #shipping_options_container h3 { font-size: 13px; } #sc_checkout_content .divider { height: 40px; } #sc_coupon_container { } #sc_coupon_container.active .form:before { font: normal normal normal 20px/1 FontAwesome; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f058"; margin: 5px 16px 0 2px; color: #a3d940; float: left; } #sc_coupon_container .form .inputField { float: left; width: 200px; margin: 0 16px 0 0; min-height: 33px; } #sc_coupon_container .form .button { float: left; clear: none; margin: 0; } #sc_contents_container { } #sc_contents_container #sc_reserve_note { float: left; clear: both; padding: 15px 0 0; font-size: 1.4rem; line-height: 2rem; } #sc_contents_container #sc_vat_note { float: left; clear: both; padding: 30px 0 0; font-size: 1.4rem; line-height: 2rem; } #sc_contents_container #sc_totalweight { float: left; display: none; padding: 15px 0 0; } #sc_contents_container #sc_vat_note { display: none; } #shopping_cart_information, #wishlist_information { width: 100%; } #shopping_cart_information .sc_cell_item { float: left; width: 100%; clear: both; margin: 0 0 30px; padding: 0 0 30px; border-bottom: 1px solid #eee; } #shopping_cart_information .sc_cell_item .image { float: left; padding: 0 30px 0 0; width: 55%; max-width: 220px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #shopping_cart_information .sc_cell_item .image img { max-height: 250px; display: block; margin: 0 auto; } #shopping_cart_information .sc_cell_item .content { float: left; width: 45%; } #shopping_cart_information .sc_cell_item .content .title { display: block; margin: 0 0 20px; font-weight: normal; font-size: 2.0rem; line-height: 2.4rem; text-transform: uppercase; } #shopping_cart_information .sc_cell_item .content .details { display: block; color: #888; margin: 0 0 20px; } #shopping_cart_information .sc_cell_item .content .tools { display: block; border-top: 1px solid #dfceba; padding: 20px 0 0; font-family: 'Minion Pro', serif; font-family: 'Weiss Std', serif; color: #222; font-weight: normal; font-style: normal; font-size: 15px; line-height: 23px; -webkit-font-smoothing: antialiased; } #shopping_cart_information .sc_cell_quantity { float: left; } #shopping_cart_information .sc_cell_quantity .decrease_qty, #shopping_cart_information .sc_cell_quantity .increase_qty { float: left; font-size: 1.6rem; font-weight: bold; } #shopping_cart_information .sc_cell_quantity .decrease_qty.disabled { opacity: 0.4; cursor: default; } #shopping_cart_information .sc_cell_quantity .qty { float: left; padding: 0 8px; } #shopping_cart_information .sc_cell_singleprice { display: none; } #shopping_cart_information .sc_cell_total { float: right; } #shopping_cart_information .sc_cell_unavailable { color: red; font-weight: bold; } #shopping_cart_information td .sc_cell_error_message { color: red; font-weight: bold; } #shopping_cart_information .sc_cell_remove .remove, #wishlist_information .sc_cell_remove .remove { display: block; float: right; text-align: left; text-indent: -100px; margin-left: 10px; overflow: hidden; height: 20px; width: 14px; margin-right: -2px; background: url(/images/close_small.png) center center no-repeat; background-size: 7px 7px; } #sc_checkout_container { } #sc_checkout_container #sc_demo_note { margin-top: 50px; font-size: 1.2rem; line-height: 1.8rem; color: #111111; } #sc_checkout_content { } #sc_checkout_content .divider { display: none; } #sc_checkout_content form .form_row { border-bottom: 1px solid #423c38; } #sc_checkout_content form .form_row input[type='text'], #sc_checkout_content form .form_row textarea, #sc_checkout_content form .form_row select { padding: 10px 0; font-size: 1.6rem; line-height: 2rem; } #sc_checkout_content form .form_row input[type='text'].active, #sc_checkout_content form .form_row textarea.active, #sc_checkout_content form .form_row select.active { color: #b99667; } #sc_checkout_content form .form_row.sc_field_error input[type='text'], #sc_checkout_content form .form_row.sc_field_error textarea, #sc_checkout_content form .form_row.sc_field_error select { color: #f30000; } #sc_checkout_content .sc_subtotal_label, #sc_checkout_content .sc_discount_label, #sc_checkout_content .sc_vat_total_label, #sc_checkout_content .sc_shipping_total_label, #sc_checkout_content .sc_order_total_label { float: left; width: 120px; color: #111111; } #sc_checkout_content #sc_subtotal, #sc_checkout_content #sc_discount, #sc_checkout_content #sc_vat_total, #sc_checkout_content #sc_shipping_total, #sc_checkout_content #sc_order_total { padding: 0 0 15px; } #sc_checkout_content #sc_order_total { } #sc_checkout_content .order_total { font-size: 3.0rem; line-height: 1.4rem; } #sc_checkout_content .currency { padding-right: 5px; } #sc_checkout_content #shipping_container { margin: 0; padding: 20px 0 0; clear: both; position: relative; overflow: hidden; clear: both; } #sc_checkout_container #shipping_container #shipping_container_loader { position: absolute; top: 50%; left: -50%; transform: translate3d(-50%, -50%, 0); z-index: 5; display: block; transition: opacity 400ms ease-in-out; opacity: 0; } #sc_checkout_container #shipping_container.shipping_options_loading #shipping_container_loader { opacity: 1; left: 50%; } #sc_checkout_container #shipping_container:after { content: ''; background: rgba(245, 236, 231, 0.7); background: rgba(38, 37, 34,0.8); background: #fff; position: absolute; top: 0; left; 0; right: 0; height: 0; z-index: 0; opacity: 0; width: 100%; pointer-events: none; transition: opacity 400ms ease-in-out; } #sc_checkout_container #shipping_container.shipping_options_loading:after { display: block; height: auto; opacity: 1; bottom: 0; z-index: 1; pointer-events: auto; } #sc_checkout_content #shipping_container select { border: 0; padding: 10px 0; width: 100%; background: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; border: none; -webkit-appearance: none; -moz-appearance: none; outline: none; border-radius: 0; resize: none; color: #111111; } #sc_checkout_content #shipping_container select.active { color: #b99667; } #sc_checkout_content #shipping_container select::-ms-expand { display: none; } #sc_checkout_content #shipping_container select.active { } #sc_checkout_content #shipping_container #shipping_zones_container, #sc_checkout_content #shipping_container #shipping_options_container { display: none; margin: 0 0 15px; padding: 0; border-bottom: 1px solid #423c38; } #sc_checkout_content #shipping_container #shipping_zones_container.active, #sc_checkout_content #shipping_container #shipping_options_container.active { display: block; } #sc_checkout_content #shipping_container #shipping_zones_container h3, #sc_checkout_content #shipping_container #shipping_options_container h3 { margin: 0 0 10px; } #sc_checkout_container .button { float: left; display: inline; } #sc_checkout_container .proceed_to_payment { display: none; position: relative; } #sc_checkout_container .proceed_to_payment.active, #sc_checkout_container .proceed_to_payment.loading, #sc_checkout_container .proceed_to_payment.placeholder { display: block; } #sc_checkout_container .proceed_to_payment #stripe_loader { position: absolute; top: 7px; left: 50%; margin-left: -15px; z-index: 5; } #sc_checkout_container .proceed_to_payment #stripe_loader svg { -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; height: 30px; -webkit-transform-origin: center center; transform-origin: center center; width: 30px; } #sc_checkout_container .proceed_to_payment #stripe_loader svg .path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; -webkit-animation: dash 1.5s ease-in-out infinite, color3 6s ease-in-out infinite; animation: dash 1.5s ease-in-out infinite, color3 6s ease-in-out infinite; stroke-linecap: round; } #sc_checkout_container .proceed_to_payment #stripe_button_container { -webkit-transition: opacity 400ms ease-in-out; transition: opacity 400ms ease-in-out; opacity: 0.3; z-index: 10; position: relative; height: 45px; } #sc_checkout_container .proceed_to_payment.active #stripe_button_container { opacity: 1; } #sc_checkout_container .proceed_to_payment.placeholder #stripe_button_container { opacity: 0.4; } #sc_checkout_container .proceed_to_payment.placeholder button { cursor: default; } #sc_total_price_container { padding: 15px 0 0; font-family: 'Minion Pro', serif; font-family: 'Weiss Std', serif; font-weight: normal; font-style: normal; font-size: 1.5rem; line-height: 2.0rem; -webkit-font-smoothing: antialiased; color: #111111; } #sc_total_price_container h3 { margin: 0 0 15px; padding: 0 0 15px; border-bottom: 1px solid #444; display: none; } #sc_total_price_container .order_total_wrapper { } #sc_checkout_content #sc_terms_box { margin: 30px 0 10px; position: relative; } #sc_checkout_content #sc_terms_box input { display: inline-block; position: absolute; top: 9px; left: 0; } #sc_checkout_content #sc_terms_box label { display: inline-block; padding: 0 0 0 25px; font-family: Apercu_Pro, serif; font-weight: bold; font-size: 1.2rem; line-height: 2.8rem; font-weight: bold; color: #888; } #sc_checkout_content #sc_checkout_button { padding: 10px 0 0; min-height: 50px; position: relative; -moz-transition: opacity 0.4s ease-in-out; -webkit-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; } #sc_checkout_content #sc_checkout_button.sc_terms_unconfirmed #stripe_button_container, #sc_checkout_content #sc_checkout_button.sc_fields_unconfirmed #stripe_button_container { opacity: 0.3; } #sc_checkout_content #sc_checkout_button.sc_terms_unconfirmed .proceed_to_payment, #sc_checkout_content #sc_checkout_button.sc_shipping_unconfirmed .proceed_to_payment, #sc_checkout_content #sc_checkout_button.sc_fields_unconfirmed .proceed_to_payment { pointer-events: none; } #sc_checkout_content #sc_checkout_button.sc_terms_unconfirmed:after, #sc_checkout_content #sc_checkout_button.sc_shipping_unconfirmed:after, #sc_checkout_content #sc_checkout_button.sc_fields_unconfirmed:after { content: '.'; text-indent: -100px; display: block; position: absolute; z-index: 1000000; top: 0; left: 0; bottom: 0; right: 0; width: 100%; } #basket_footer { } #basket_footer #store_payment_logos { clear: both; float: left; width: 100%; } #basket_footer #store_payment_logos ul { list-style: none; padding: 0; margin: 0; float: left; width: 100%; } #basket_footer #store_payment_logos ul li { float: left; margin: 0 10px 0 0; text-indent: -200px; overflow: hidden; height: 32px; width: 52px; background: 0 0 no-repeat; } #basket_footer #store_payment_logos ul li.wp_worldpay { background-image: url(/lib/worldpay/images/worldpay.jpg);width:100px } #basket_footer #store_payment_logos ul li.wp_visa { background-image: url(/lib/images/payment/visa-curved-32px.png) } #basket_footer #store_payment_logos ul li.wp_mastercard { background-image: url(/lib/images/payment/mastercard-curved-32px.png) } #basket_footer #store_payment_logos ul li.wp_amex { background-image: url(/lib/images/payment/american-express-curved-32px.png) } #basket_footer #store_payment_logos ul li.wp_paypal { background-image: url(/lib/images/payment/paypal-curved-32px.png) } #basket_footer #store_payment_logos ul li.wp_stripe { background-image: url(/lib/images/payment/powered-by-stripe.png);width:120px;background-position:center; } .sc_warning, #sc_demo_note, .sc_demo_note { clear: both; font-size: inherit; border: 1px solid #ffd503; background: #f7f3de; clear: both; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 15px 20px; line-height: inherit; max-width: 600px; } .sc_warning h3, .sc_demo_note h3 { font-size: 2.4rem; line-height: 3rem; margin: 0 0 10px; } #sc_dev_mode_box { display: inline-block; padding: 40px 0 0; font-family: 'Minion Pro', serif; font-family: 'Weiss Std', serif; color: #111111; font-weight: normal; font-style: normal; font-size: 1.5rem; line-height: 2.0rem; -webkit-font-smoothing: antialiased; } #sc_dev_mode_box h4 { font-size: 2.3rem; margin: 0 0 15px; } /* Store confirmation ---------------------------------------- */ .subsection-store-basket .subsection-confirmation { } .subsection-store-basket .subsection-confirmation .content_basic_layout h1 { width: 100%; float: none; margin: 0 0 40px; } .subsection-store-basket .subsection-confirmation .divider { height: 0; } .subsection-store-basket .subsection-confirmation .sc_confirmation_body { margin: 0 0 50px; } .subsection-store-basket .subsection-confirmation .sc_warning, .subsection-store-basket .subsection-confirmation .sc_demo_note { margin: 0 0 50px; } /* Stripe button ---------------------------------------- */ .stripe-button-el { /* Default stripe button styles, including these here for the placeholder button */ overflow: hidden; display: inline-block; visibility: visible !important; background-image: -webkit-linear-gradient(#28a0e5,#015e94); background-image: -moz-linear-gradient(#28a0e5,#015e94); background-image: -ms-linear-gradient(#28a0e5,#015e94); background-image: -o-linear-gradient(#28a0e5,#015e94); background-image: -webkit-linear-gradient(#28a0e5,#015e94); background-image: -moz-linear-gradient(#28a0e5,#015e94); background-image: -ms-linear-gradient(#28a0e5,#015e94); background-image: -o-linear-gradient(#28a0e5,#015e94); background-image: linear-gradient(#28a0e5,#015e94); -webkit-font-smoothing: antialiased; border: 0; padding: 1px; text-decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2); -ms-box-shadow: 0 1px 0 rgba(0,0,0,0.2); -o-box-shadow: 0 1px 0 rgba(0,0,0,0.2); box-shadow: 0 1px 0 rgba(0,0,0,0.2); -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; cursor: pointer; /* END Default stripe button styles */ -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; -ms-border-radius: 0 !important; -o-border-radius: 0 !important; border-radius: 0 !important; width: 100%; background: none !important; box-shadow: none !important; outline: none; } .stripe-button-el span { /* Default stripe button styles, including these here for the placeholder button */ display: block; position: relative; padding: 0 12px; height: 30px; line-height: 30px; background: #f9f4f1; font-size: 14px; color: #fff; font-weight: bold; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.25); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); -ms-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); -o-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; /* END Default stripe button styles */ border: 1px solid #b99667 !important; color: #322e29 !important; background: #b99667 !important; font-weight: normal !important; font-family: 'Minion Pro', serif !important; font-weight: normal !important; font-style: normal !important; font-size: 14px !important; line-height: 20px !important; -webkit-font-smoothing: antialiased !important; padding: 14px 50px 13px !important; cursor: pointer !important; min-width: 160px !important; -moz-box-sizing: border-box !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; text-align: center !important; position: relative !important; transition: color 600ms cubic-bezier(.65,.06,.19,.96) !important; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; -ms-border-radius: 0 !important; -o-border-radius: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; height: auto !important; } .stripe-button-el span:before { font-family: FontAwesome; content: "\f023"; position: absolute; right: 20px; } /* Checkout 2.0 compatability ----------------------------------------------------- */ #sc_checkout_container.submitting, #sc_checkout_container form.submitting { pointer-events: none; } .section-store .subsection-store-basket #content_module { width: 65%; box-sizing: border-box; padding-right: 50px; margin-bottom: 70px; } .section-store .subsection-store-basket #sidebar { width: 35%; } #sc_checkout_container .sc_field_group { margin: 0 0 40px; clear: both; float: left; width: 100%; } #sc_checkout_container h3.subheading { text-transform: uppercase; letter-spacing: 2.5px; margin: 0 0 20px; font-size: 1.1rem; line-height: 1.8rem; font-family: inherit; color: #111; position: relative; display: block; border-bottom: none; padding-bottom: 0; } #sc_checkout_container h3.subheading:before { border-bottom: 1px solid #ccc; content: ''; display: block; position: absolute; top: 50%; margin-top: -2px; left: 0; right: 0; z-index: 0; } #sc_checkout_container h3.subheading:after { display: none; } #sc_checkout_container h3.subheading span { background: #fff; position: relative; z-index: 1; padding-right: 10px; } #sc_checkout_container form .form_row label { display: block; margin-bottom: 5px; float: left; width: 40%; box-sizing: border-box; padding: 10px 20px 0 0; margin-right: 0; color: #111; } #sc_checkout_container .form_row > select, #sc_checkout_container .select_container, #sc_checkout_container .inputField { padding: 10px 10px; border: 1px solid #ccc; float: left; width: 60%; box-sizing: border-box; line-height: 2.4rem; outline: none; } #sc_checkout_container .inputField.active { color: #111111 } #sc_checkout_container .inputField:-webkit-autofill, #sc_checkout_container .inputField:-webkit-autofill:hover, #sc_checkout_container .inputField:-webkit-autofill:focus, #sc_checkout_container .inputField:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px #262522 inset !important; } #sc_checkout_container #cardholder-name:-webkit-autofill, #sc_checkout_container #cardholder-name:-webkit-autofill:hover, #sc_checkout_container #cardholder-name:-webkit-autofill:focus, #sc_checkout_container #cardholder-name:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px #F9F4F1 inset !important; } #sc_checkout_container input:-webkit-autofill { -webkit-text-fill-color: #111111 !important; } #sc_checkout_container #cardholder-name:-webkit-autofill { -webkit-text-fill-color: #333 !important; } #sc_checkout_payment_form .inputField { background: #F9F4F1!important; } #sc_checkout_container #cardholder-name.inputField { line-height: 1.4rem; -webkit-font-smoothing: antialiased; } #sc_checkout_container #sc_checkout_payment_form .form_row label { width: 40%; } #sc_checkout_container #sc_checkout_payment_form .form_row .inputField { width: 60%; } #sc_checkout_container .select_container { border: 0; padding: 0; } #sc_checkout_container .select_container select { padding: 10px 10px; border: 1px solid #eaeaea; line-height: 2.4rem; } #sc_checkout_container form .form_row:after { display: none; } #sc_checkout_container .button { width: 100%; text-align: center; margin: 0; } #sc_checkout_container .button a { float: none; width: 100%; display: block; } #sc_checkout_container .button:after { background-image: url(/images/button_arrow_alt.png)!important; } #sc_checkout_back_button { padding: 25px 0 0; margin: 0 0 20px; } .required_field_label { color: #777; } #cardholder-name.inputField::placeholder { color: #aaa; } #sc_checkout_content #shipping_container, .sc_field_group { font-family: 'Minion Pro', serif; font-family: 'Weiss Std', serif; } #sc_checkout_content #shipping_container #shipping_zones_container, #sc_checkout_content #shipping_container #shipping_options_container { border: none; } #sc_checkout_content #shipping_container #shipping_zones_container, #sc_checkout_content #shipping_container #shipping_options_container { margin-bottom: 15px; padding-bottom: 0; } #sc_checkout_content #shipping_container select { padding-right: 25px; height: auto; border: 1px solid #ccc; padding-left: 10px; } #sc_checkout_container form .form_row { display: block; clear: both; float: left; width: 100%; border-bottom: none; } #sc_checkout_container form .form_row select { background: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; border: none; -webkit-appearance: none; -moz-appearance: none; color: #666; padding: 10px 0px; border-radius: 0; resize: none; cursor: pointer; } #sc_checkout_container form .form_row .select_container { position: relative; } #sc_checkout_container form .form_row .select_container:after { content: ""; position: absolute; top: 50%; transform: translate(0, -3px); right: 15px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 3px solid #111111; pointer-events: none; } #sc_additional_fields { border: none; } #sc_checkout_container #sc_checkout_content select { background-image: none; } #sc_total_price_container { border: none; } #sc_checkout_content #sc_subtotal, #sc_checkout_content #sc_discount, #sc_checkout_content #sc_vat_total, #sc_checkout_content #sc_shipping_total, #sc_checkout_content #sc_order_total { border-bottom: 1px solid #ccc; margin-top: 18px; } #sc_checkout_button { clear: both; } #sc_checkout_container #privacy_policy_form_msg, #sc_checkout_container .required_field_label { margin-top: 30px; color: #111111; } /* Share links ----------------------------------------------------------- */ .share_links { position: relative; z-index: 5; padding-right: 15px; } .share_links .link a { outline: none; } .share_links .share_options { width: 0; opacity: 0; position: absolute; top: -8px; left: 100%; transition: width 600ms cubic-bezier(.65,.06,.19,.96), opacity 400ms ease-in-out; white-space: nowrap; overflow: hidden; padding: 0; cursor: default; } .share_links.active .share_options { width: 128px; opacity: 1; } .share_links .share_options_inner { position: relative; background: #fff; border: 1px solid #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; padding: 5px; height: 22px; margin-left: 10px; } .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: #151515; border-width: 3px; margin-left: -3px; display: none; } .share_links .share_options .social_links_item { display: inline-block; float: none; } .share_links .share_options .social_links_item .social_media_icon:after { color: #fff; font-size: 16px; } .share_links .share_options .social_links_item .social_media_icon:hover:after { } /* 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: 24px; 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; } #main_content .social_media_links { margin: 0 0 40px; } #main_content .social_links_item { margin: 0 18px 0 0; } #main_content .social_media_icon:after { color: #222; } .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"; } .social_media_icon.youtube:after { content: "\f167"; } .social_media_icon.artsy:after { content: ""; background: url(/images/artsy.svg) center center no-repeat; background-size: 20px 20px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; } .social_media_icon.artsy:hover:after { background-image: url(/images/artsy_active.svg); } /* Pageload loader ----------------------------------------------------------- */ #preloader #loader_wrapper { position: fixed; top: 0; left: 0; width: 0; z-index: 10000; height: 4px; width: 100% !important; transition: opacity 400ms ease-in-out; } body.cms-frontend-toolbar-active #preloader #loader_wrapper { top: 28px; } #preloader #splash_loader_icon { display: none; } #preloader #loader { height: 2px; position: absolute; top: 0; left: 0; width: 0; height: 4px; width: 100% !important; overflow: hidden; background-color: transparent !important; } #preloader #loader:before { display: block; position: absolute; content: ""; left: 0; width: auto; height: 2px; background-color: #b99667; animation: loading2 1200ms cubic-bezier(.87,.17,.18,.85) infinite; transition: background 400ms ease-in-out; } body.splash-loader-active #preloader #loader_wrapper #loader { display: none; } /* Basic states ------------------------------------------- */ body.browser-js-enabled #preloader { display: block; } body.first-load-complete #preloader { display: none; height: 4px; bottom: auto; } body.first-load-complete #preloader_mask { height: 0; display: none; } body.first-load-complete.loader-active #preloader { display: block; } /* Ajax page loading ------------------------------------------- */ #preloader #loader { opacity: 0; transition: opacity 800ms ease-in-out, width 400ms ease-in-out; -webkit-transition: opacity 800ms ease-in-out, width 400ms ease-in-out; } body.ajax-loading #preloader #loader { opacity: 1; } body.ajax-loading-complete #preloader { opacity: 0; transition: opacity 800ms ease-in-out, width 400ms ease-in-out; -webkit-transition: opacity 800ms ease-in-out, width 400ms ease-in-out; } /* Splash screen ------------------------------------------- */ body.splash-loader-active { overflow: hidden; } body.splash-loader-active.splash-screen-in #preloader { cursor: pointer; } body.splash-loader-active.loader-active #preloader #loader_wrapper { opacity: 0; } body.splash-loader-active.loader-active #preloader.loading-bar-start #loader_wrapper { opacity: 1; } @keyframes loading2 { from {width: 0;opacity: 0.8;} 50% {left:0;width: 100%;opacity: 1;} to {left: 100%;width: 100%;opacity: 0.4;} } /* Popups (extended details, artworks) ----------------------------------------------------------- */ body.content-swipe, body.page-popup-active { overflow: hidden; } body.content-swipe #popup_box, body.content-swipe #popup_content { overflow: hidden; } #popup_container { } #popup_overlay { background: #fff; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1100; } .popup-content-reversed #popup_overlay { background: #222; } #popup_box { margin: 0 auto; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1200; } #popup_box .inner { float: left; width: 100%; overflow: hidden; } #popup_box .close { font-family: 'Weiss Std', serif; -webkit-font-smoothing: subpixel-antialiased; color: #222; font-weight: normal; font-size: 1.4rem; line-height: 2.0rem; font-size: 1.35rem; letter-spacing: 2px; text-transform: uppercase; line-height: 20px; font-family: 'Weiss Std', serif; position: fixed; top: 25px; right: 15px; padding: 22px 15px 15px; border: 2px solid transparent; margin: 0 0 0 25px; z-index: 1200; cursor: pointer; transition: opacity 2s cubic-bezier(.18, 1, .21, 1), top 400ms ease-in-out; } #popup_box .close a, #popup_box .close a:visited { color: #222; } .popup-scrolled #popup_box .close { top: 11px; } #popup_content { width: 100%; max-height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; } /* Hide the pagination controls which are within the ajax page content */ #popup_content .artwork_detail .pagination_controls { display: none; } /* Effects ----------------------------------------------------------- */ #popup_container { display: none; } .page-popup-active #popup_container { display: block; } #popup_overlay { opacity: 0; transition: opacity 600ms ease-in-out, background 600ms ease-in-out; -webkit-transition: opacity 600ms ease-in-out, background 600ms ease-in-out; } .page-popup-visible #popup_overlay { opacity: 1; } #popup_box .close { opacity: 0; transform: translate3d(200px, 0, 0); transition: transform 0.6s cubic-bezier(.87,.17,.18,.85), opacity 0.8s ease-in-out, top 400ms ease-in-out; } .page-popup-visible #popup_box .close { opacity: 1; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } .page-popup-visible.user-distraction-free #popup_box .close { opacity: 0; transform: translate3d(200px, 0, 0); -webkit-transform: translate3d(200px, 0, 0); } #popup_content { opacity: 0; transition: opacity 0.6s ease-in-out; } .page-popup-visible #popup_content { opacity: 1; } #popup_content .image_container { opacity: 0; transform: translate3d(0, 0, 0) scale(0.9); transition: transform 400ms cubic-bezier(.86,.01,.14,.99), width 1000ms cubic-bezier(.65,.06,.19,.96), opacity 400ms ease-in-out; } .page-popup-visible #popup_content .image_container { opacity: 1; transform: translate3d(0, 0, 0); } #popup_content .content_container { opacity: 0; transform: translate3d(0, 50px, 0); transition: transform 600ms cubic-bezier(.65,.06,.19,.96), opacity 400ms ease-in-out; } .page-popup-visible #popup_content .content_container { opacity: 1; transform: translate3d(0, 0, 0); transition: transform 4000ms cubic-bezier(.18, 1, .21, 1), opacity 1000ms ease-in-out; } /* Standard artworks ----------------------------------------------------------- */ #popup_content .content_basic_layout { transition: transform 600ms cubic-bezier(.86,.01,.14,.99), opacity 600ms ease-in-out; transform: translate3d(0, 600px, 0); opacity: 0; } .page-popup-visible #popup_content .content_basic_layout { opacity: 1; transform: translate3d(0, 0, 0); } /* Previous / Next animation ----------------------------------------------------------- */ body.page-popup-transition #popup_box .artwork_hero_image_container { opacity: 0; } body.page-popup-transition.page-popup-transition2 #popup_box .artwork_hero_image_container { opacity: 0; } body.page-popup-transition #popup_box .artwork_detail .image_container { opacity: 0; transform: translate3d(0, 0, 0); } body.page-popup-transition.page-popup-transition2 #popup_box .artwork_detail .image_container { opacity: 0; transform: translate3d(0, 0, 0); } body.page-popup-transition #popup_box .artwork_detail .content_container { opacity: 0; transition: transform 600ms cubic-bezier(.65,.06,.19,.96), opacity 400ms ease-in-out; transform-origin: center top; transform: translate3d(0, -20px, 0); } body.page-popup-transition.page-popup-transition2 #popup_box .artwork_detail .content_container { transform: translate3d(0, 0, 0); transition: none; } body.page-popup-transition #popup_box .artwork_detail .content_container .label { } body.page-popup-transition.page-popup-transition2 #popup_box .artwork_detail .content_container .label { width: 0; } body.page-popup-transition-initial #popup_box .pagination_controls .artwork_detail .pagination_controls_previous, body.page-popup-transition-initial #popup_box .pagination_controls .artwork_detail .pagination_controls_next { opacity: 0; } /* Themes ---------------------------------------------------------------------------------- */ /* Dark ---------------------------------------------------------------------------------- */ .reversed-content { background: #222; color: #fff; -webkit-font-smoothing: antialiased; } .reversed-content a, .reversed-content a:visited { color: #fff; } .reversed-content a .content, .reversed-content a:visited .content { color: #fff; } .reversed-content.artwork_detail { background: transparent; } .reversed-content .artwork_detail_main { background: #222; } .reversed-content .button { background: #222; } .reversed-content .button a, .reversed-content .button span, .reversed-content button { color: #fff; } .reversed-content .button:hover a, .reversed-content .button:hover span { color: #222; } body.content-type-reversed, body.content-type-reversed .bottom, body.content-type-reversed a, body.content-type-reversed a:visited, body.content-type-reversed .navigation a, body.content-type-reversed .navigation a:visited { color: #fff; } body.content-type-reversed .scroll-container .scroll-container-inner, body.content-type-reversed .site-popup-enabled-content { background: #222; color: #fff; } body.content-type-reversed .page_enquiry_widget { background: #333; } body.content-type-reversed .page_enquiry_widget_field { border-color: #fff; } body.content-type-reversed .page_enquiry_widget_field input, body.content-type-reversed .page_enquiry_widget_field input.active { color: #fff; } body.content-type-reversed .page_enquiry_widget_field .page_enquiry_widget_submit a { background-image: url('/images/button_arrow_alt_reverse.png'); } body.content-type-reversed #popup_box .close { color: #fff; } body.content-type-reversed h1, body.content-type-reversed h2, body.content-type-reversed h3, body.content-type-reversed h4, body.content-type-reversed h5, .reversed-content h1, .reversed-content h2, .reversed-content h3, .reversed-content h4, .reversed-content h5, body.content-type-reversed .bottom, body.content-type-reversed .subheading { color: #fff; } body.content-type-reversed .artwork_detail .content h1:before, body.content-type-reversed .artwork_detail .tools:before { background: #fff; } /* White ---------------------------------------------------------------------------------- */ .white-content { background: #fff; } .white-content.artwork_detail { background: transparent; } .white-content .artwork_detail_main { background: #fff; } .white-content .button { background: #fff; } body.content-type-white .scroll-container .scroll-container-inner { background: #fff; } body.content-type-white .page_enquiry_widget { background: #fff; } /* Pale ---------------------------------------------------------------------------------- */ .pale-content { background: #f9f4f1; } .pale-content.artwork_detail { background: transparent; } .pale-content .artwork_detail_main { background: #f9f4f1; } .pale-content .button { background: #f9f4f1; } body.content-type-pale .scroll-container .scroll-container-inner { background: #f9f4f1; } body.content-type-pale .page_enquiry_widget { background: #f5ece7; } /* Fullscreen slideshow / homepage slideshow fallback ---------------------------------------------------------------------------------- */ .slideshow-video { /* padding-bottom: min(50%, 550px); */ padding-bottom: calc(100vh - 85px - 130px); position: relative; width: 100%; overflow: hidden; margin: 0 0 30px; } .slideshow-video video { height: 100%; width: 100%; object-fit: cover; vertical-align: middle; position: absolute; } .fullscreen-flickity-carousel { height: 100vh; } .fullscreen_slideshow { position: absolute; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background: #262522; opacity: 0; transition: opacity 600ms ease-in-out; } .fullscreen_slideshow.flickity-enabled { position: absolute; opacity: 1; z-index: 0; } .fullscreen_slideshow .fullscreen-slide { height: 100%; width: 100%; color: #fff; } .fullscreen_slideshow .parallax-background { height: 100%; background: center center no-repeat; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; transform: translateX(0); z-index: 0; } .fullscreen_slideshow .fullscreen-link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; text-align: left; text-indent: -9999px; } .fullscreen_slideshow .slide-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; justify-content: center; } .fullscreen_slideshow .slide-content.slide-content-alignment-left { justify-content: left; } .fullscreen_slideshow .slide-content.slide-content-alignment-right { justify-content: right; } .fullscreen_slideshow .slide-inner { max-width: 700px; padding: 20px 60px; box-sizing: border-box; } @media screen and (max-width: 767px) { .fullscreen_slideshow .slide-inner { padding: 20px; } } .fullscreen_slideshow .slide-inner, .fullscreen_slideshow .slide-inner * { color: #fff; text-align: center; } .fullscreen_slideshow .slide-inner h2 { font-size: 39px; line-height: 40px; letter-spacing: 4px; max-width: 825px; margin: 0 0 15px; padding: 0; position: relative; color: #fff; text-align: center; } .fullscreen_slideshow .slide-inner img { max-width: 100%; } .fullscreen_slideshow .slide-content.slide-content-alignment-left *, .fullscreen_slideshow .slide-content.slide-content-alignment-left .slide-inner h2, .fullscreen_slideshow .slide-content.slide-content-alignment-left .slide-inner { text-align: left; } .fullscreen_slideshow .slide-content.slide-content-alignment-right *, .fullscreen_slideshow .slide-content.slide-content-alignment-right .slide-inner h2, .fullscreen_slideshow .slide-content.slide-content-alignment-right .slide-inner { text-align: right; } /* 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; } /* ---------------------------------------------------------------------------------- Page specific ---------------------------------------------------------------------------------- */ /* Artworks ---------------------------------------------------------------------------------- */ .section-artworks.no-page-params .page_enquiry_widget { display: none; } .subsection-artwork-navigation { position: absolute; min-height: 100vh; top: 0; left: 0; width: 100%; } .subsection-artwork-navigation .overlay-container-inner { visibility: visible; } .subsection-artwork-navigation .artwork-navigation .artworks-overlay-content { opacity: 1; } /* Contact ---------------------------------------------------------------------------------- */ #map_wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 525px; width: 100%; overflow: hidden; } #map_area { position: absolute; top: 0; left: 0; right: 0; bottom: -25px; width: 100%; } /* Exhibitions ---------------------------------------------------------------------------------- */ #exhibition_video_section .full_grid .item { max-width: 100%; } #exhibition_video_section .full_grid .item iframe { width: 100%; border: 0; } .section-exhibitions .exhibition .artwork_detail .image .image_inner div { height: 100%; width: 100%; padding-top: 0!important; } .section-exhibitions .exhibition .artwork_detail .image .image_inner div .fluid-width-video-wrapper{ padding-top: 0; } .section-exhibitions .exhibition .artwork_detail .image_lazy_load:before { background: none; } .section-exhibitions .exhibition section .additional_details .button.link_more ul { list-style: none; padding-left: 0; } /* Error page ---------------------------------------------------------------------------------- */ .section-error .scroll-container .scroll-container-inner { min-height: 100vh; background: #262522; } .section-error .scroll-container .scroll-container-inner #main_content { min-height: 100vh; position: static; } .section-error .subsection-cascading-content { position: relative; min-height: 100vh; } .section-error .content_body .description { margin: 0 0 20px; } .section-error #header { right: auto; bottom: 0; width: 40%; padding: 0 !important; background: #201f1e !important; } .section-error #header:before { display: none; } .section-error #logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .section-error #logo svg path, .section-error #logo svg polygon { fill: #414141; } .section-error .content_basic_layout { position: absolute; top: 50%; left: 40%; width: 60%; padding: 50px; transform: translateY(-50%); } .section-error .content_basic_layout .content_body { max-width: 350px; margin: 0 auto; color: #ada194; -webkit-font-smoothing: antialiased; } .section-error .content_basic_layout .content_body h3 { font-size: 4.2rem; line-height: 5.2rem; margin: 0 0 50px; position: relative; padding-top: 32px; color: #fff; } .section-error .content_basic_layout .content_body h3:before { position: absolute; content: ''; display: block; top: 0; left: 0; width: 30px; height: 2px; background: #b99667; } .section-error .faux_footer { display: none !important; } /* ------------------------------------------------------------------------ --------------------------------------------------------------------------- --------------------------------------------------------------------------- --------------------------------------------------------------------------- --------------------------------------------------------------------------- --------------------------------------------------------------------------- */ /* OVERLAYS ------------------------------------------------------------------- */ .splash-container, .enquire-overlay, .artworks-overlay, .search-overlay, .nav-overlay, .filter-overlay { pointer-events: none; position: fixed; background: rgba(0, 0, 0, 0); top: 0; left: 0; z-index: 1500; height: 100vh; /* opacity: 0; */ overflow: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); width: 100vw; display: -webkit-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: none; } body.cms-frontend-toolbar-active .splash-container, body.cms-frontend-toolbar-active .enquire-overlay, body.cms-frontend-toolbar-active .artworks-overlay, body.cms-frontend-toolbar-active .search-overlay, body.cms-frontend-toolbar-active .nav-overlay, body.cms-frontend-toolbar-active .filter-overlay { top: 28px; } body.cms-frontend-toolbar-active #popup_box .close { top: 68px; } body.cms-frontend-toolbar-active.popup-scrolled #popup_box .close { top: 50px; } .splash-init.active-init .splash-container { display: flex; } .active-init .artworks-overlay, .active-init .enquire-overlay, .active-init .search-overlay, .active-init .nav-overlay, .active-init .filter-overlay { display: flex; } .splash-container.active, .artworks-overlay.active, .enquire-overlay.active, .search-overlay.active, .nav-overlay.active, .filter-overlay.active { pointer-events: auto; } .splash-bg, .overlay-bg { position: fixed; background: rgba(0, 0, 0, 0); top: 0; left: 0; z-index: 400; /* opacity: 0; */ overflow: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); width: 100vw; left: 0; top: 0; } .overlay-bg { width: 0; height: auto; transform: rotate(10deg); top: -20vw; bottom: -20vw; left: -20vw; transform: none; top: 0; left: 0; bottom: 0; background: #262522; opacity: 0; opacity: 0.95; -webkit-transition: opacity 600ms, width 600ms cubic-bezier(.45,0,.27,1); transition: opacity 600ms, width 600ms cubic-bezier(.45,0,.27,1); } .overlay-bg.open { background: #222; width: 140vw; width: 100%; opacity: 0.95; -webkit-transition: opacity .35s, width 300ms cubic-bezier(.45,0,.27,1); transition: opacity .35s, width 300ms cubic-bezier(.45,0,.27,1); } .filter-reveal, .nav-reveal, .enquire-reveal, .search-reveal { position: relative; z-index: 9999; } .filter-close-button, .nav-close-button, .enquire-close-button, .artworks-overlay-close-button, .search-close-button { color: #fff; position: absolute; top: 26px; top: 25px; right: 15px; border: 2px solid transparent; padding: 22px 15px 15px; margin: 0 0 0 25px; z-index: 1200; cursor: pointer; font-family: 'Weiss Std', serif; -webkit-font-smoothing: subpixel-antialiased; color: #fff; font-weight: normal; font-size: 1.4rem; line-height: 2.0rem; font-size: 1.35rem; letter-spacing: 2px; text-transform: uppercase; line-height: 20px; font-family: 'Weiss Std', serif; opacity: 0; transform: translate3d(200px, 0, 0); transition: transform 0.6s cubic-bezier(.87,.17,.18,.85), opacity 0.8s ease-in-out; -webkit-transform: translate3d(200px, 0, 0); -webkit-transition: -webkit-transform 0.6s cubic-bezier(.87,.17,.18,.85), opacity 0.8s ease-in-out; } .overlay.active .filter-close-button, .overlay.active .nav-close-button, .overlay.active .enquire-close-button, .overlay.active .artworks-overlay-close-button, .overlay.active .search-close-button { opacity: 1; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } .overlay-container-inner { visibility: hidden; overflow: auto; -webkit-overflow-scrolling: touch; position: relative; z-index: 1000; width: 100vw; padding: 150px 100px 100px; box-sizing: border-box; } .overlay.active .overlay-container-inner { visibility: visible; } .enquire-input-wrapper, .enquire-contact-wrapper, .search-wrapper, .nav-wrapper, .nav-contact-wrapper { display: inline-block; vertical-align: middle; box-sizing: border-box; min-height: 400px; position: relative; color: #fff; } /* Nav overlay --------------------------------------------- */ .nav-overlay { z-index: 10; } .nav-overlay .overlay-container-inner { text-align: center; } .nav-wrapper { width: 100%; } .nav-wrapper ul { list-style: none; padding: 0; margin: 0; } .nav-wrapper ul li { display: block; font-family: 'Weiss Std', serif; color: #b99667; font-weight: normal; font-size: 4rem; line-height: 4rem; text-align: center; margin: 0; padding: 20px 0; -webkit-font-smoothing: antialiased; opacity: 0; transform: translateX(150px); } .nav-wrapper ul li a, .nav-wrapper ul li a:visited { color: #b99667; transition: opacity 600ms ease-in-out; } .nav-wrapper ul li a:hover { opacity: 0.5; } .nav-wrapper ul li.visible { opacity: 1.0; transform: translateX(0); transition: all .8s cubic-bezier(0.030, 0.420, 0.145, 1.005), color 600ms ease-in-out; } .animate-out .nav-wrapper ul li { transform: translateX(0); transition: all .8s cubic-bezier(0.030, 0.420, 0.145, 1.005), color 600ms ease-in-out; } /* Splash overlay --------------------------------------------- */ .splash-bg { width: 100%; height: 100vh; opacity: 0; position: absolute; transform: translateY(0); background: #181818; transition: opacity 2000ms ease-in-out, transform 800ms cubic-bezier(.45,0,.27,1); } .splash-bg.open { opacity: 1; transform: translateY(0); transition: opacity 300ms ease-in-out, height 800ms cubic-bezier(.45,0,.27,1), background 400ms ease-in-out, transform 800ms cubic-bezier(.45,0,.27,1); } /* body.first-load-complete .splash-bg { transform: translateX(-100%); } */ .splash-container { pointer-events: auto; overflow: hidden; transition: opacity 2000ms ease-in-out, transform 800ms cubic-bezier(.45,0,.27,1); } .splash-container.end { transform: translateX(-100%); overflow: hidden; transition-delay: 400ms; } .splash-container-inner { width: 100%; height: 100vh; padding: 0 125px; display: block; box-sizing: border-box; position: relative; z-index: 1001; opacity: 0; transition: opacity 2000ms ease-in-out, transform 800ms cubic-bezier(.45,0,.27,1); align-items: center; justify-content: center; display: flex; } body.splash-open .splash-container-inner { opacity: 1; transform: translateY(0); } body.first-load-complete .splash-container-inner { } .logo-wrapper { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); opacity: 0; width: 392px; height: 92px; background: url('/images/splash_logo.png') center center no-repeat; background-size: 392px auto; text-indent: -9999px; } .logo-wrapper.visible { transition: transform 5000ms cubic-bezier(.18, 1, .21, 1), opacity 5000ms cubic-bezier(.18, 1, .21, 1); opacity: 1; } .end .logo-wrapper.visible { opacity: 0; transform: translateX(-100vw); transition: opacity 1000ms ease-in-out, transform 800ms cubic-bezier(.45,0,.27,1); transition-delay: 160ms; } .strapline-wrapper { text-align: center; font-family: 'Weiss Std', serif; color: #b99667; font-weight: normal; text-align: center; width: 100%; margin: -50px 0 0; padding: 0 80px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; font-size: 80px; line-height: 80px; position: absolute; left: 0; right: 0; z-index: 2; top: 50%; pointer-events: none; transform: translate3d(0, -50px, 0); opacity: 0; display: none !important; } .strapline-wrapper.visible { transition: transform 5000ms cubic-bezier(.18, 1, .21, 1), opacity 5000ms cubic-bezier(.18, 1, .21, 1); opacity: 1; transform: translate3d(0, 0, 0); } .end .strapline-wrapper.visible { opacity: 0; transform: translateX(-100vw); transition: opacity 1000ms ease-in-out, transform 800ms cubic-bezier(.45,0,.27,1); } .splash-container .border { position: absolute; top: 30px; left: 30px; right: 30px; bottom: 30px; z-index: 1; opacity: 1; transition: opacity 400ms ease-in-out; } .splash-container .border:before, .splash-container .border .inner:after, .splash-container .border:after, .splash-container .border .inner:before { transition: all 400ms ease-in-out, opacity 400ms ease-in-out; } .splash-container.end .border { opacity: 0; transition: opacity 500ms cubic-bezier(.18, 1, .21, 1); } /* ANIMATION 1 */ .splash-container .border:before { content: ''; opacity: 0; position: absolute; left: 0; top: 0; right: 100%; right: 0; height: 2px; display: block; background: #464646; z-index: 4999; opacity: 1; } .splash-container.start .border:before { right:0; opacity: 1; } /* ANIMATION 2 */ .splash-container .border .inner:after { content: ''; opacity: 0; position: absolute; right: 0; bottom:100%; bottom:0; top:0; width: 2px; display: block; background: #464646; z-index: 4999; transition-delay: 400ms; opacity: 1; } .splash-container.start .border .inner:after { bottom:0; opacity: 1; } /* ANIMATION 3 */ .splash-container .border:after { content: ''; opacity: 0; position: absolute; right: 0; left:100%; left:0; bottom: 0; height: 2px; display: block; background: #464646; z-index: 4999; transition-delay: 800ms; opacity: 1; } .splash-container.start .border:after { left:0; opacity: 1; } /* ANIMATION 4 */ .splash-container .border .inner:before { content: ''; opacity: 0; position: absolute; left: 0; top: 100%; top:0; bottom:0; width: 2px; display: block; background: #464646; z-index: 4999; transition-delay: 1200ms; opacity: 1; } .splash-container.start .border .inner:before { top:0; opacity: 1; } /* .splash-border { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; border: 0 solid #b99667; transition: border 600ms cubic-bezier(.65,.06,.19,.96), opacity 2000ms cubic-bezier(.18, 1, .21, 1); } .splash-border.visible { border-width: 24px; } .splash-border2 { position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; border: 0 solid #262522; transition: border 600ms cubic-bezier(.65,.06,.19,.96), opacity 2000ms cubic-bezier(.18, 1, .21, 1); transition-delay: 1000ms; } .splash-border2.visible { border-width: 20px; } */ /* Search overlay --------------------------------------------- */ #sw_form { position: absolute; top: 26px; right: 100px; margin: 0 0 0 25px; z-index: 1200; width: 100%; max-width: 250px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; opacity: 0; } .search-overlay.active #sw_form { opacity: 1; } #sw_form form .form_row { margin: 0; padding: 0; border: 0; } #sw_form form .form_row input[type='text'] { padding: 7px 25px 9px 0; border-bottom: 1px solid rgba(255,255,255,0.2); color: #fff; } #sw_form #sw_field_search_button { display: none; } #sw_form form .form_row svg.loader { display: none; } .search-loading #sw_form form .form_row svg.loader { -webkit-animation: rotate 2s linear infinite; animation: rotate 2s linear infinite; -webkit-transform-origin: center center; transform-origin: center center; width: 20px; height: 20px; position: absolute; top: 50%; right: 0; margin: -10px 0 0 -10px; display: block; } .search-loading #sw_form form .form_row svg.loader .path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; -webkit-animation: dash 1.5s ease-in-out infinite, color3 6s ease-in-out infinite; animation: dash 1.5s ease-in-out infinite, color3 6s ease-in-out infinite; stroke-linecap: round; } .search-wrapper { color: #fff; max-width: 1680px; width: 100%; margin: 0 auto; display: block; } .search-wrapper .prelude, .search-wrapper h2, .search-wrapper h3 { color: #fff; -webkit-font-smoothing: antialiased; } .search-wrapper .prelude:after { background: #fff; } .search-wrapper .content, .search-wrapper .standard_grid .item .content { font-family: Theinhardt; color: #888; font-weight: 300; font-size: 1.3rem; line-height: 2em; } .search-wrapper .notify_panel_footer { display: none; } .search-results-active .search-wrapper .notify_panel_footer { display: block; } /* Enquire overlay --------------------------------------------- */ .enquire-input-wrapper { padding: 0 50px; width: 60%; margin: 0 auto; vertical-align: top; display: block; } .enquire-input-wrapper .enquiry_form { } .enquire-input-wrapper .enquiry_form .notify_panel_items { clear: both; } .enquire-input-wrapper .enquiry_form .notify_panel_items ul { list-style: none; padding: 0; margin: 0; } .enquire-input-wrapper .enquiry_form .notify_panel_items ul li { display: block; float: left; width: 100%; border-bottom: 1px solid rgba(185,150,103,0.2); padding-bottom: 20px; padding-top: 10px; margin-bottom: 20px; margin-top: 10px; clear: both; padding: 0 0 20px; border-bottom: 1px solid rgba(185,150,103,0.2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .enquire-input-wrapper .enquiry_form .notify_panel_items ul li:after { content: ''; display: block; clear: both; overflow: hidden; } .enquire-input-wrapper .enquiry_form .notify_panel_items ul li .image { width: 80px; padding-top: 80px; display: inline-block; vertical-align: middle; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } .enquire-input-wrapper .enquiry_form .notify_panel_items ul li .image div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; text-align: center; } body.browser-msie .enquire-input-wrapper .enquiry_form .notify_panel_items ul li .image div { display: block; } .enquire-input-wrapper .enquiry_form .notify_panel_items ul li .image div img { max-width: 100%; max-height: 100%; align-self: center; margin: 0 auto; object-fit: cover; width: 100%; height: 100%; } .enquire-input-wrapper .enquiry_form .notify_panel_items ul li .content { width: 80%; width: calc(100% - 80px); display: inline-block; vertical-align: middle; font-size: 1.2rem; line-height: 1.8rem; padding: 0 0 0 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .enquire-input-wrapper .enquiry_form .notify_panel_items ul li .content .artist, .enquire-input-wrapper .enquiry_form .notify_panel_items ul li .content .artist strong, .enquire-input-wrapper .enquiry_form .notify_panel_items ul li .content .title { font-family: 'Minion Pro', serif; font-family: 'Weiss Std', serif; font-size: 1.5rem; -webkit-font-smoothing: antialiased; font-weight: normal; line-height: 2rem; margin: 0 0 0; color: #fff; } .enquire-input-wrapper .enquiry_form .notify_panel_items ul li .content .stock_no { } .enquire-input-wrapper .enquiry_form form .form_row { border-bottom: 1px solid rgba(255,255,255,0.2); } .enquire-input-wrapper .enquiry_form form .form_row input[type='text'], .enquire-input-wrapper .enquiry_form form .form_row textarea, .enquire-input-wrapper .enquiry_form form .form_row select { font-weight: normal; font-size: 1.4rem; font-family: 'Weiss Std', serif; -webkit-font-smoothing: antialiased; color: #fff; font-weight: normal; font-size: 2.0rem; line-height: 2.2rem; padding: 15px 0; } .enquire-input-wrapper .enquiry_form form .form_row input.active, .enquire-input-wrapper .enquiry_form form .form_row textarea.active, .enquire-input-wrapper .enquiry_form form .form_row select.active { color: #b99667; } .enquire-input-wrapper .enquiry_form form .form_row input[type='text']:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #443f37 inset; color: #b99667; -webkit-text-fill-color: #b99667; } .enquire-input-wrapper .button:after { background-image: url('/images/button_arrow_alt_reverse.png') !important; } .enquire-input-wrapper .button a, .enquire-input-wrapper .button.loading a { border-color: #fff; } .enquire-input-wrapper .button a, .enquire-input-wrapper .button a:visited { color: #fff; } .enquire-input-wrapper .button:before { background: rgba(255,255,255,0.1); } .enquire-input-wrapper .button:hover a { border-color: #fff; } .enquire-input-wrapper .button.loading:before { transform: translate3d(0, 0, 0); width: 0; } .enquire-input-wrapper .button.loading .loader svg .path { -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; } .device-desktop .enquire-input-wrapper .button:hover a, .device-desktop .enquire-input-wrapper .button:hover a:visited { color: #fff; } .enquire-contact-wrapper { width: 50%; vertical-align: top; } .enquire-input-wrapper .enquiry_form { opacity: 0; transform: translateY(100px); } .enquire-input-wrapper.visible .enquiry_form { -webkit-transition: all 1s cubic-bezier(0.030, 0.420, 0.145, 1.005); transition: all 1s cubic-bezier(0.030, 0.420, 0.145, 1.005); opacity: 1.0; transform: translateY(0); } /* Artworks navigation overlay --------------------------------------------- */ .artworks-overlay { z-index: 11; } .artwork-navigation.overlay-container-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0; } .artwork-navigation .artworks-overlay-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: width 800ms cubic-bezier(.87,.17,.18,.85), opacity 200ms ease-in-out; opacity: 0; background: #000; } .show-content .artwork-navigation .artworks-overlay-content { opacity: 1; transition: width 800ms cubic-bezier(.87,.17,.18,.85), opacity 600ms ease-in-out; }/* .show-content .artwork-navigation.nav-selected .artworks-overlay-content { opacity: 0; transition: opacity 600ms ease-in-out; }*/ .artwork-navigation .artworks-overlay-content a, .artwork-navigation .artworks-overlay-content a:visited { color: #fff; } .artwork-nav-top-level { position: absolute; top: 0; left: 0; bottom: 0; z-index: 0; width: 50%; overflow: hidden; transition: width 600ms cubic-bezier(.87,.17,.18,.85), height 600ms cubic-bezier(.87,.17,.18,.85), min-height 600ms cubic-bezier(.87,.17,.18,.85), max-height 600ms cubic-bezier(.87,.17,.18,.85), opacity 600ms ease-in-out; background: #000; cursor: pointer; } /* .top-level-hover .artwork-nav-top-level { width: 48%; } .top-level-hover .artwork-nav-top-level:hover { width: 52%; z-index: 2; } */ .artwork-nav-top-level.last-hover { z-index: 2; } .artwork-nav-top-level.artwork-nav-top-level-2 { left: auto; right: 0; } .artwork-nav-top-level:after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: 0; pointer-events: none; z-index: 10; transition: width 600ms cubic-bezier(.87,.17,.18,.85), opacity 600ms ease-in-out; } .artwork-nav-hero { position: fixed; top: 0; left: -50px; right: -50px; bottom: 0; z-index: 1; opacity: 0.5; transform: none; transition: transform 15000ms linear, opacity 1000ms linear; background: #222; } .device-desktop .artwork-nav-top-level:hover .artwork-nav-hero { transform: scale(1.1); transition: transform 15000ms linear, opacity 1000ms linear; opacity: 0.4; } .device-desktop.browser-msie .artwork-nav-top-level:hover .artwork-nav-hero { transform: none !important; } .artwork-nav-hero .artwork-image { opacity: 0; position: absolute; top: 0; left: 50%; width: 100vw; width: 100%; transform: translateX(-50%); bottom: 0; z-index: 0; transition: transform 600ms cubic-bezier(.87,.17,.18,.85), opacity 1000ms ease-in-out; } .artwork-nav-hero .artwork-image.active { opacity: 1; z-index: 1; transition: transform 600ms cubic-bezier(.87,.17,.18,.85), opacity 1000ms ease-in-out; } .artwork-nav-hero .artwork-image.image_lazy_load:before { background: #222; } .artwork-nav-hero img { object-fit: cover; object-position: center top; height: 100%; width: 100%; position: absolute; } .top-level-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; transition: transform 600ms cubic-bezier(.87,.17,.18,.85), opacity 600ms ease-in-out; } .artwork-nav-top-level .heading-area { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50vw; text-align: center; transition: transform 600ms cubic-bezier(.87,.17,.18,.85), opacity 600ms ease-in-out; } .artwork-nav-top-level .heading-area .inner { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 580px; padding: 120px 60px 60px; margin: 0 auto; } .artwork-nav-top-level .heading-area h2 { text-align: center; color: #b99667; margin: 0 0 30px; font-size: 7.7rem; line-height: 7rem; } .artwork-nav-top-level .heading-area .content { text-align: center; color: #b99667; padding-bottom: 40px; position: relative; -webkit-font-smoothing: antialiased; } .artwork-nav-top-level .heading-area .content:after { position: absolute; content: ''; display: block; bottom: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 2px; background: #b99667; } .artwork-nav-wrapper, .artwork-nav-wrapper-single { pointer-events: none !important; opacity: 0; transform: translateY(0); transition: transform 800ms cubic-bezier(.87,.17,.18,.85), opacity 600ms ease-in-out; position: relative; z-index: 2; display: flex; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 150px 100px 60px; min-width: 70vw; min-height: 100vh; align-items: center; } .artwork-nav-wrapper-single { opacity: 1; pointer-events: auto !important; } .artwork-nav-top-level .artwork-nav-wrapper * { pointer-events: none; } .not-active .artwork-nav-wrapper { transition: opacity 200ms ease-in-out; } .artwork-nav-wrapper ul, .artwork-nav-wrapper-single ul { list-style: none; padding: 0; margin: 0; align-self: center; display: block; width: 100%; } .artwork-nav-wrapper ul li, .artwork-nav-wrapper-single ul li { display: block; font-family: 'Weiss Std', serif; font-size: 2.4rem; line-height: 2.8rem; text-transform: uppercase; letter-spacing: 2px; color: #fff; font-weight: normal; text-align: left; margin: 0; padding: 0; float: none; clear: both; -webkit-font-smoothing: antialiased; opacity: 0; transform: translateX(150px); transition: opacity 400ms cubic-bezier(.21,.01,0,1), transform 400ms cubic-bezier(.21,.01,0,1), color 600ms ease-in-out, font-size 400ms ease-in-out; text-align: center; } .artwork-nav-wrapper-single ul li { opacity: 1; transform: none; } .artwork-nav-wrapper-single ul li.divider_category { height: 50px; position: relative; } .artwork-nav-wrapper-single ul li.divider_category:before { position: absolute; content: ''; display: block; top: 50%; left: 50%; width: 30px; height: 1px; background: #fff; transform: translate(-50%); } .artwork-nav-wrapper ul li a, .artwork-nav-wrapper ul li a:visited, .artwork-nav-wrapper-single ul li a, .artwork-nav-wrapper-single ul li a:visited { color: #fff; transition: color 600ms ease-in-out, opacity 600ms ease-in-out; padding: 10px 0; display: block; } .subnav-hover .artwork-nav-wrapper ul li a, .subnav-hover .artwork-nav-wrapper ul li a:visited { opacity: 0.8; opacity: 1; color: #8c7454; } .subnav-hover .artwork-nav-wrapper ul li:hover a, .subnav-hover .artwork-nav-wrapper ul li:hover a:visited { opacity: 1; color: #b99667; } .artwork-nav-wrapper ul li.visible { opacity: 1.0; transform: translateX(0); } .not-active .artwork-nav-wrapper ul li { transform: translateX(0); } .nav-selected .artwork-nav-wrapper ul li { opacity: 0; } .nav-selected .artwork-nav-wrapper ul li.selected { /* opacity: 1; font-size: 8rem; line-height: 8rem; */ opacity: 0; } /* Active styles ----------------------------------------- */ .top-level-hover.artworks-overlay-content.second-level-active.nav-not-transitioning .artwork-nav-top-level.active { width: 69%; } .top-level-hover.artworks-overlay-content.second-level-active.nav-not-transitioning .artwork-nav-top-level.active:hover { width: 71%; } .top-level-hover.artworks-overlay-content.second-level-active.nav-not-transitioning .artwork-nav-top-level.not-active:hover { width: 32%; } .artworks-overlay-content.nav-transitioning .artwork-nav-top-level.active { } .artworks-overlay-content.second-level-active .artwork-nav-top-level.not-active { width: 30%; } .artworks-overlay-content.second-level-active .artwork-nav-top-level.active { width: 71%; cursor: default; } /* .artworks-overlay .nav-selected .artwork-nav-top-level.not-active .artwork-nav-hero { opacity: 0; } .artwork-navigation.nav-selected .artworks-overlay-content.second-level-active .artwork-nav-top-level.active, body.page-transition .artworks-overlay .artworks-overlay-content.second-level-active .artwork-nav-top-level.active { width: 100%; z-index: 2; } */ .artwork-navigation.nav-selected .artworks-overlay-close-button, body.page-transition .artworks-overlay .artworks-overlay-close-button { -webkit-transform: translate3d(200px, 0, 0); } .artworks-overlay-content.second-level-active .artwork-nav-top-level.not-active .top-level-wrapper { transform: scale(0.5); } .artworks-overlay-content.second-level-active .artwork-nav-top-level .heading-area { pointer-events: none; } .artworks-overlay-content.second-level-active .artwork-nav-top-level.active .heading-area { opacity: 0; pointer-events: none; } .artworks-overlay-content .artwork-nav-top-level.not-active:after { opacity: 0.6; } .artworks-overlay-content .artwork-nav-top-level.not-active .artwork-nav-hero { opacity: 0.5; } .artworks-overlay-content .artwork-nav-top-level.active .artwork-nav-hero { opacity: 0.4; } .artwork-nav-top-level.active .artwork-nav-wrapper { opacity: 1; transform: translateY(0); pointer-events: auto !important; } .artwork-nav-top-level.active .artwork-nav-wrapper * { pointer-events: auto; } /* Artwork nav variant 2 - no background images ----------------------------------------- */ .artwork-navigation.variant2 .artwork-nav-top-level { background: none; } .artwork-navigation.variant2 .artwork-nav-hero { display: none; } .artwork-navigation.variant2 .artwork-nav-top-level:after { opacity: 0; } .artwork-navigation.variant2 .artworks-overlay-content .artwork-nav-top-level.not-active:after { opacity: 0.2; } .artwork-navigation.variant2 .artworks-overlay-content.top-level-hover .artwork-nav-top-level:hover:after { opacity: 0.13; } .artwork-navigation.variant2 .artworks-overlay-content.top-level-hover.second-level-active .artwork-nav-top-level:hover:after { opacity: 0; } /* Prompt ----------------------------------------- */ div.arpromptfade{ position: absolute; background-color: #222; } div.arprompt{ width: 400px; position: absolute; background-color: #333; text-align: left; padding: 25px; } div.arprompt .arpromptclose { position: absolute; z-index: 1900; top: 25px; right: 25px; display: block; content: ''; width: 16px; height: 16px; transform: rotate(135deg); overflow: hidden; background: url(/images/menu.png) center center no-repeat; background-size: 16px 16px; transition: background-image 400ms linear; text-indent: -100px; cursor: pointer; } div.arprompt .arpromptmessage { margin: 0 0 12px; padding: 0 25px 0 0; color: #fff; -webkit-font-smoothing: antialiased; } div.arprompt .arpromptmessage h2 { font-size: 2rem; line-height: 2.8rem; } div.arprompt .arpromptmessage h2, div.arprompt .arpromptmessage h3, div.arprompt .arpromptmessage h4 { color: #fff; margin: 0 0 20px; } div.arprompt .arpromptbuttons { border-top: 0; padding-top: 10px; } div.arprompt .arpromptbuttons button { color: #fff; border-color: #fff; } div.arprompt .arpromptbuttons button:after { background-image: url('/images/button_arrow_alt_reverse.png') !important; } /*! Flickity v2.0.5 http://flickity.metafizzy.co ---------------------------------------------- */ .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } /* draggable */ .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; } /* ---- previous/next buttons ---- */ .flickity-prev-next-button { position: absolute; top: 50%; width: 44px; height: 44px; border: none; border-radius: 50%; background: white; background: hsla(0, 0%, 100%, 0.75); cursor: pointer; /* vertically center */ -webkit-transform: translateY(-50%); transform: translateY(-50%); } .flickity-prev-next-button:hover { background: white; } .flickity-prev-next-button:focus { outline: none; box-shadow: 0 0 0 5px #09F; } .flickity-prev-next-button:active { opacity: 0.6; } .flickity-prev-next-button.previous { left: 10px; } .flickity-prev-next-button.next { right: 10px; } /* right to left */ .flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; } .flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; } .flickity-prev-next-button:disabled { opacity: 0.3; cursor: auto; } .flickity-prev-next-button svg { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } .flickity-prev-next-button .arrow { fill: #333; } /* ---- page dots ---- */ .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; opacity: 0.25; cursor: pointer; } .flickity-page-dots .dot.is-selected { opacity: 1; } /* Fancybox overrides ----------------------------------------------------------- */ #fancybox-title-main { } .fancybox-details-link { float: right; } /* Overlay -------------------------------------------------------------- */ .fancybox-overlay { background: transparent; /* Reset all backgrounds to avoid flash of colour */ transition: background 0.4s ease-in-out; } /* Note: these classes are manually added in each fancybox function in galleries.js, in an afterLoad event. */ .fancybox-overlay.fancybox-overlay-ajax, .fancybox-overlay.fancybox-overlay-html, .fancybox-overlay.fancybox-overlay-iframe, .fancybox-overlay.fancybox-overlay-fixed { background: #fff; } .fancybox-overlay.fancybox-overlay-image { background: #fff; } .fancybox-type-image .fancybox-skin { background: transparent; } /* UI -------------------------------------------------------------- */ .fancybox-close, .fancybox-prev span, .fancybox-next span, .device-highres .fancybox-close, .device-highres .fancybox-prev span, .device-highres .fancybox-next span { background-image: none; } .fancybox-close { position: absolute; top: 16px; right: 16px; width: auto; height: auto; background: transparent; /*transition: transform 0.6s cubic-bezier(.87,.17,.18,.85), opacity 0.8s ease-in-out;*/ } .fancybox-type-image .fancybox-close { position: fixed; } .fancybox-close::after { display: block; content: "Close"; text-indent: 0; position: static; top: 0; left: 0; right: 0; left: 0; text-align: center; list-style: none; font-size: 1.35rem; letter-spacing: 2px; text-transform: uppercase; line-height: 20px; font-family: 'Weiss Std', serif; color: #222; font-weight: normal; text-align: left; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #555; } .fancybox-nav { background: none; position:fixed; opacity: 0.35; transition: opacity 400ms ease-in-out; } .fancybox-nav:hover { opacity: 1.0; } .tabbing-detected .fancybox-nav:focus { opacity: 1.0; outline: none!important; } .tabbing-detected .fancybox-nav:focus span:after { outline: auto; outline-style: solid; outline-offset: 3px; } .fancybox-prev > span, .fancybox-next > span { visibility: visible; left: auto; right: auto; } .fancybox-prev > span { left: 20px; } .fancybox-next > span { right: 20px; } .fancybox-prev span:after, .fancybox-next span:after { position: absolute; top: 50%; left: 50%; display: block; content: "\e039"; font-family: artlogic-social-icons!important; text-indent: 0; color: #FFF; font-size: 20px; font-style: normal!important; font-weight: 400!important; font-variant: normal!important; text-transform: none!important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(-50%, -50%); } .fancybox-next span::after { content: "\e038"; } .fancybox-type-image .fancybox-close::after, .fancybox-type-image .fancybox-prev span:after, .fancybox-type-image .fancybox-next span:after { color: #151515; } /* Close animation -------------------------------------------------------------- */ .fancybox-close { -webkit-animation: close-show 0.5s normal forwards; -moz-animation: close-show 0.5s normal forwards; -o-animation: close-show 0.5s normal forwards; animation: close-show 0.5s normal forwards; animation-timing-function: cubic-bezier(.87,.17,.18,.85); } @keyframes close-show { from { opacity: 0; transform: translate3d(100px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* Image animation -------------------------------------------------------------- */ .fancybox-image { opacity: 0; } .fancybox-wrap.fancybox-opened .fancybox-image { opacity: 0; -webkit-animation: image-show 0.5s normal forwards; -moz-animation: image-show 0.5s normal forwards; -o-animation: image-show 0.5s normal forwards; animation: image-show 0.5s normal forwards; animation-timing-function: cubic-bezier(.86,.01,.14,.99); } @keyframes image-show { from { opacity: 0; transform: translate3d(0, 0, 0) scale(0.9); } to { opacity: 1; transform: none; } } /* Elevate zoom ----------------------------------------- */ .zoomContainer { z-index: 99999999999; -webkit-user-select: none; } .zoomContainer .zoomWindowContainer { -webkit-user-select: none; } .cms-frontend-toolbar-active .zoomContainer { margin-top: -28px !important; } .fancybox-wrap.elevatezoom-enabled .fancybox-prev { left: -65px; width: 50px; } /* For some reason these buttons are hidden but focusable, so we show them when tabbing is detected */ .tabbing-detected .fancybox-wrap.elevatezoom-enabled .fancybox-prev { left: 0; } .fancybox-wrap.elevatezoom-enabled .fancybox-prev span { visibility: visible; background: url('/lib/g/1.0/images/fancybox-arrow-left_2x.png') center center no-repeat; background-size: 48px auto; opacity: 0.4; left: 0; } .fancybox-wrap.elevatezoom-enabled .fancybox-next { right: -65px; width: 50px; } /* For some reason these buttons are hidden but focusable, so we show them when tabbing is detected */ .tabbing-detected .fancybox-wrap.elevatezoom-enabled .fancybox-next { right: 0; } .tabbing-detected .fancybox-wrap.elevatezoom-enabled .fancybox-prev:focus span, .tabbing-detected .fancybox-wrap.elevatezoom-enabled .fancybox-next:focus span { outline: auto; outline-style: solid; } .tabbing-detected .fancybox-wrap.elevatezoom-enabled .fancybox-prev span:after, .tabbing-detected .fancybox-wrap.elevatezoom-enabled .fancybox-next span:after { display: none; } .fancybox-wrap.elevatezoom-enabled .fancybox-next span { visibility: visible; background: url('/lib/g/1.0/images/fancybox-arrow-right_2x.png') center center no-repeat; background-size: 48px auto; opacity: 0.4; right: 0; }