.text-panel.rules-and-regulations .wrap p, .text-panel.rules-and-regulations .wrap ul li { font-family: 'Helvetica'; } body, .stacked-cols.three-boxes.with-link .cols .col .info-box p, .stacked-cols.three-boxes .cols .col .info-box p, .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box p, .slider.three-boxes.with-link .swiper-container .cols .col .info-box p, .slider.three-boxes .swiper-container .cols .col .info-box p, .info-box-cols .wrap .cols .col .info-box ul li, .three-boxes .wrap .cols .col .info-box p { font-family: 'Helvetica Md'; } .popup .wrap h2, .popup .wrap form legend, .popup .wrap form button, .popup .wrap form .input input, .popup .wrap form .input input::placeholder, .mobileNav .wrap nav ul li, .mobileNav .wrap .button p, .mobileNav .wrap .button .green-btn, .mobileNav .wrap .button .yellow-btn, .hero .wrap .content .text-box h3, .hero .wrap .content .text-box p strong, .hero .wrap .content .text-box .purple-btn, .hero .wrap .content .text-box .red-btn, .hero .wrap .content .text-box .green-btn, .image-with-text .wrap .cols .col h2, .image-with-text .wrap .cols .col h5, .image-with-text .wrap .button-link .green-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .link, .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.green-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.green-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.yellow-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.yellow-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.red-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.red-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.purple-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.purple-btn, .stacked-cols.three-boxes .cols .col .info-box h3, .stacked-cols.three-boxes .cols .col .info-box p strong, .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box h2, .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box p strong, .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box .bottom-bar .green-btn, .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box .bottom-bar h5, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .link, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.green-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.green-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.yellow-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.yellow-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.red-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.red-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.purple-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.purple-btn, .slider.three-boxes .swiper-container .cols .col .info-box h3, .slider.three-boxes .swiper-container .cols .col .info-box p strong, .three-cols .wrap .cols .col .info-box h2, .three-cols .wrap .cols .col .info-box a.green-btn, .three-cols .wrap .cols .col .info-box a.red-btn, .three-cols .wrap .cols .col .info-box a.yellow-btn, .text-image-cols .wrap .cols .col a.green-btn, .text-image-cols .wrap .cols .col .content h4, .banner-image .wrap .yellow-btn, .text-panel.rules-and-regulations .wrap h3, .text-panel.rules-and-regulations .wrap h2, .text-panel.rules-and-regulations .wrap p strong, .text-panel .wrap h2, .text-banner .wrap .content .button button.yellow-btn, .text-banner .wrap .content .button a.yellow-btn, .text-banner .wrap .content .button button.green-btn, .text-banner .wrap .content .button a.green-btn, .text-banner .wrap .content .button button.red-btn, .text-banner .wrap .content .button a.red-btn, .text-banner .wrap .content .button button.purple-btn, .text-banner .wrap .content .button a.purple-btn, .info-box-cols .wrap .cols .col .info-box h2, .info-box-cols .wrap .cols .col .info-box h5, .info-box-cols .wrap .cols .col .buttons a.green-btn, .info-box-cols .wrap .cols .col .buttons a.red-btn, .info-box-cols .wrap .cols .col .buttons a.yellow-btn, .info-box-cols .wrap .cols .col .buttons a.purple-btn, .coloured-panel .wrap a.green-btn, .coloured-panel .wrap a.red-btn, .coloured-panel .wrap a.yellow-btn, .coloured-panel .wrap a.purple-btn, .three-boxes .wrap .cols .col .info-box h3, .three-boxes .wrap .cols .col .info-box p strong, .three-boxes .wrap .cols .col .info-box .link, .three-boxes .wrap .cols .col .info-box .button button.green-btn, .three-boxes .wrap .cols .col .info-box .button button.yellow-btn, .three-boxes .wrap .cols .col .info-box .button button.red-btn, .three-boxes .wrap .cols .col .info-box .button button.purple-btn, .gallery .wrap .show-more.green-btn, .gallery .wrap .show-more.red-btn, .gallery .wrap .show-more.yellow-btn, .gallery .wrap .show-more.purple-btn, .contact-form .wrap .form form .input input, .contact-form .wrap .form form .input textarea, .contact-form .wrap .form form .input select, .contact-form .wrap .form form .input input::placeholder, .contact-form .wrap .form form .input textarea::placeholder, .contact-form .wrap .form form .input select::placeholder, .contact-form .wrap .form form .input label, .contact-form .wrap .form form button[type="submit"], footer .wrap .cols .col ul li, footer .wrap .cols .col p, footer .wrap .cols .col .link, footer .wrap .cols .col .green-btn, footer .wrap .cols .col .green-link { font-family: 'Helvetica Bd'; } .hero .wrap .content h2.peckham-heading, .stacked-cols .wrap .heading .peckham-heading, .slider .heading .peckham-heading, .three-cols .wrap .heading .peckham-heading, .text-image-cols .wrap .heading .peckham-heading, .text-banner .wrap .heading .peckham-heading, .info-box-cols .wrap .heading .peckham-heading, .three-boxes .wrap .heading .peckham-heading { font-family: 'Compacta Bd BT'; } .hero .wrap .content h2.peckham-heading em, .stacked-cols .wrap .heading .peckham-heading em, .slider .heading .peckham-heading em, .three-cols .wrap .heading .peckham-heading em, .text-image-cols .wrap .heading .peckham-heading em, .text-banner .wrap .heading .peckham-heading em, .info-box-cols .wrap .heading .peckham-heading em, .three-boxes .wrap .heading .peckham-heading em { font-family: 'Peckham Press'; } @font-face { font-family: 'Helvetica Lt'; src: url("/assets/css/fonts/Helvetica/Helvetica-Light.woff2") format("woff2"), url("/assets/css/fonts/Helvetica/Helvetica-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica'; src: url("/assets/css/fonts/Helvetica/Helvetica.woff2") format("woff2"), url("/assets/css/fonts/Helvetica/Helvetica.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Md'; src: url("/assets/css/fonts/Helvetica/HelveticaMedium.woff2") format("woff2"), url("/assets/css/fonts/Helvetica/HelveticaMedium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Bd'; src: url("/assets/css/fonts/Helvetica/Helvetica-Bold.woff2") format("woff2"), url("/assets/css/fonts/Helvetica/Helvetica-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Compacta BT'; src: url("/assets/css/fonts/Compacta/CompactaBT-Roman.woff2") format("woff2"), url("/assets/css/fonts/Compacta/CompactaBT-Roman.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Compacta Bd BT'; src: url("/assets/css/fonts/Compacta/CompactaBT-Bold.woff2") format("woff2"), url("/assets/css/fonts/Compacta/CompactaBT-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Myriad Pro'; src: url("/assets/css/fonts/Myriad/MyriadPro-Regular.woff2") format("woff2"), url("/assets/css/fonts/Myriad/MyriadPro-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Peckham Press'; src: url("/assets/css/fonts/PeckhamPress/PeckhamPress-Regular.woff2") format("woff2"), url("/assets/css/fonts/PeckhamPress/PeckhamPress-Regular.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; } .placeholder { pointer-events: none; -webkit-transition: 0.3s opacity linear; -ms-transition: 0.3s opacity linear; transition: 0.3s opacity linear; position: absolute; } .placeholder.faded { opacity: 0.5; } .placeholder.hide { display: none; } .video { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; width: 100%; display: block; } .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hide { display: none !important; } .desktop { display: none; } html, body { background-color: white; } body { -webkit-font-smoothing: antialiased; color: #9306ff; letter-spacing: -0.02em; } body a { text-decoration: none; } body.showNav { overflow: hidden !important; } body.showNav .mobileNav { opacity: 1; visibility: visible; pointer-events: all; -webkit-transition-timing-function: linear; -webkit-transition-duration: 200ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 200ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 200ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 200ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 200ms; transition-property: all; } .social.purple ul li a.facebook:before { background-image: url("/assets/images/icons/facebook-purple.svg"); } .social.purple ul li a.instagram:before { background-image: url("/assets/images/icons/insta-purple.svg"); } .social.purple ul li a.youtube:before { background-image: url("/assets/images/icons/youtube-purple.svg"); } .social.purple ul li a.tiktok:before { background-image: url("/assets/images/icons/tiktok-purple.svg"); } .social.purple ul li a.vimeo:before { background-image: url("/assets/images/icons/vimeo-purple.svg"); } .social ul li { display: inline-block; vertical-align: middle; } .social ul li a { font-size: 0; display: block; } .social ul li a:before { content: ''; display: block; background-size: contain; background-repeat: no-repeat; } .social ul li a.instagram:before { background-image: url("/assets/images/icons/insta-white.svg"); width: 18px; height: 18px; } .social ul li a.facebook:before { background-image: url("/assets/images/icons/facebook-white.svg"); width: 12px; height: 22px; } .social ul li a.youtube:before { background-image: url("/assets/images/icons/youtube-white.svg"); width: 23px; height: 16px; } .social ul li a.tiktok:before { background-image: url("/assets/images/icons/tiktok-white.svg"); } .social ul li a.vimeo:before { background-image: url("/assets/images/icons/vimeo-white.svg"); width: 24px; height: 24px; } .social ul li + li { margin-left: 18px; } .video-js { width: 100vw; height: 257px !important; object-fit: cover !important; } .video-js .vjs-tech { object-fit: cover !important; } .video-js.purple .vjs-big-play-button:before { background-image: url("/assets/images/icons/play-button-purple.svg"); } .video-js.red .vjs-big-play-button:before { background-image: url("/assets/images/icons/play-button-red.svg"); } .video-js.yellow .vjs-big-play-button:before { background-image: url("/assets/images/icons/play-button-yellow.svg"); } .video-js.green .vjs-big-play-button:before { background-image: url("/assets/images/icons/play-button-green.svg"); } .video-js .vjs-big-play-button { background-color: transparent !important; top: 50% !important; left: 50% !important; -webkit-transform: translateX(-50%) translateY(-50%) !important; -ms-transform: translateX(-50%) translateY(-50%) !important; transform: translateX(-50%) translateY(-50%) !important; border: none !important; box-shadow: none !important; position: relative; } .video-js .vjs-big-play-button:before { content: ''; display: block; background-image: url("/assets/images/icons/play-button-white.svg"); width: 72px; height: 72px; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .video { height: 257px !important; padding-bottom: 0 !important; } .video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .vjs-icon-play:before { content: "" !important; } .vjs-poster { background-size: cover !important; } .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); z-index: 10000000; } .popup .wrap { background-color: #9306ff; padding: 16px 0 25px; margin: 10px; overflow: auto; } .popup .wrap .close { display: block; background-image: url("/assets/images/icons/close-white.svg"); background-size: contain; background-repeat: no-repeat; width: 19px; height: 19px; text-indent: -9999999px; margin: 0 30px 16px auto; } .popup .wrap h2 { color: white; font-size: 2.1875rem; padding: 36px 30px 0 30px; } .popup .wrap form { margin: 10px 30px 0; } .popup .wrap form.success .input, .popup .wrap form.success button, .popup .wrap form.success legend { display: none !important; } .popup .wrap form.success .message { display: block; } .popup .wrap form .message { display: none; text-align: center; padding: 40px 0; color: white; font-size: 1.875rem; } .popup .wrap form legend { color: #00ffc3; font-size: 1.875rem; margin-bottom: 26px; } .popup .wrap form button { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; max-width: 100px; margin-left: auto; position: relative; height: 76px; font-size: 1.25rem; margin-top: 10px; line-height: 1; } .popup .wrap form button:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } .popup .wrap form button:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } .popup .wrap form button:hover { background-color: #00ffc3; } .popup .wrap form button:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-purple.svg"); background-size: contain; background-repeat: no-repeat; width: 22px; height: 16px; margin: 10px auto 0; } .popup .wrap form .input + .input { margin-top: 10px; } .popup .wrap form .input input { height: 32px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; width: 100%; border-radius: 0; resize: none; font-size: 1rem; letter-spacing: -0.02em; color: #9306ff; padding: 0 10px; } .popup .wrap form .input input::placeholder { color: #9306ff; } .popup .wrap form .input input[data-invalid="true"], .popup .wrap form .input textarea[data-invalid="true"] { border: 1px solid #e5414a; } .popup .wrap form .input input[data-invalid="true"] + ul li, .popup .wrap form .input textarea[data-invalid="true"] + ul li { font-size: 0.875rem; color: #e5414a; margin-top: 4px; } header[role="banner"] { position: absolute; top: 0; left: 0; height: 130px; z-index: 8; width: 100%; background-color: white; overflow-x: hidden; } header[role="banner"] .wrap h1 { background-image: url("/assets/images/icons/logo.svg"); background-size: contain; background-repeat: no-repeat; width: 159px; height: 36px; text-indent: -9999999px; position: absolute; top: 20px; left: 21px; } header[role="banner"] .wrap h1 a { display: block; width: 100%; height: 100%; } header[role="banner"] .wrap .nav-btn { position: absolute; right: 21px; top: 23px; } header[role="banner"] .wrap .nav-btn:before { content: ''; display: block; width: -moz-calc(100% + 30px); width: -o-calc(100% + 30px); width: -webkit-calc(100% + 30px); width: calc(100% + 30px); height: -moz-calc(100% + 30px); height: -o-calc(100% + 30px); height: -webkit-calc(100% + 30px); height: calc(100% + 30px); position: absolute; top: -15px; left: -15px; background-color: transparent; } header[role="banner"] .wrap .nav-btn span { display: block; pointer-events: none; background-color: #9306ff; width: 25px; height: 2px; } header[role="banner"] .wrap .nav-btn span + span { margin-top: 3px; } .mobileNav { position: fixed; top: 0; left: 0; width: 100%; max-height: -moz-calc(100% - 161px); max-height: -o-calc(100% - 161px); max-height: -webkit-calc(100% - 161px); max-height: calc(100% - 161px); background-color: #9306ff; z-index: 9; padding-top: 90px; padding-bottom: 60px; border-bottom: 11px solid #00ffc3; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition-timing-function: linear; -webkit-transition-duration: 200ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 200ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 200ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 200ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 200ms; transition-property: all; overflow: scroll; } .mobileNav .wrap { margin: 0 0 0 42px; } .mobileNav .wrap .close-btn { display: block; background-image: url("/assets/images/icons/close-white.svg"); background-size: contain; background-repeat: no-repeat; width: 19px; height: 19px; position: absolute; top: 20px; right: 21px; text-indent: -9999999px; } .mobileNav .wrap .close-btn:before { content: ''; display: block; width: -moz-calc(100% + 30px); width: -o-calc(100% + 30px); width: -webkit-calc(100% + 30px); width: calc(100% + 30px); height: -moz-calc(100% + 30px); height: -o-calc(100% + 30px); height: -webkit-calc(100% + 30px); height: calc(100% + 30px); position: absolute; top: -15px; left: -15px; background-color: transparent; } .mobileNav .wrap nav + .social { margin-top: 43px; } .mobileNav .wrap nav ul li { color: white; font-size: 1.503125rem; } .mobileNav .wrap nav ul li + li { margin-top: 27px; } .mobileNav .wrap .social + .button { margin-top: 58px; } .mobileNav .wrap .button { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; } .mobileNav .wrap .button + .button { margin-top: 27px; } .mobileNav .wrap .button button + p, .mobileNav .wrap .button a + p { margin-left: 13px; } .mobileNav .wrap .button p { display: inline-block; color: white; font-size: 0.9375rem; } .mobileNav .wrap .button .green-btn { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; max-width: 80px; } .mobileNav .wrap .button .green-btn:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } .mobileNav .wrap .button .green-btn:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } .mobileNav .wrap .button .yellow-btn { display: block; width: 100%; height: 40px; background-color: #ffdc00; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; max-width: 80px; } .mobileNav .wrap .button .yellow-btn:hover { background-color: #ff7a6d; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .hero { margin-top: 130px; } .hero + .image-with-text { margin-top: 39px; } .hero + .slider.dots { margin-top: 57px; } .hero.purple { background-color: #9306ff; } .hero.purple .wrap .content h2, .hero.purple .wrap .content h4 { color: white; } .hero.purple-alt { background-color: #9306ff; } .hero.purple-alt .wrap .content { padding-top: 90px; padding-bottom: 0; } .hero.purple-alt .wrap .content h2 { max-width: 1005px; } .hero.purple-alt .wrap .content h2 + .text-box { margin-top: 50px; } .hero.purple-alt .wrap .content h2, .hero.purple-alt .wrap .content h4 { color: white; } .hero.red { background-color: #ff7a6d; } .hero.red .wrap .content h2, .hero.red .wrap .content h4 { color: white; } .hero.green { background-color: #00ffc3; } .hero.green .wrap .content h2, .hero.green .wrap .content h4 { color: #9306ff; } .hero.yellow { background-color: #ffdc00; } .hero.yellow + .image-with-text .wrap .button-link.green a { margin-right: 0; } .hero.yellow + .image-with-text .wrap .button-link a { text-align: center; padding: 0; margin: 0 auto; } .hero.yellow + .image-with-text .wrap .button-link a:after { display: none; } .hero.yellow .wrap .content h2, .hero.yellow .wrap .content h4 { color: white; } .hero.white .wrap .content h2 { color: #9306ff; } .hero.white .wrap .content h2 + .text-box { margin-top: 40px; } .hero.video-hero .wrap .content { padding-top: 29px; } .hero.video-hero .wrap .content .text-box { padding-right: 10px; } .hero .wrap .content { padding: 49px 0 30px 0; } .hero .wrap .content h2 { color: white; font-size: 2.5rem; line-height: 0.975; margin-left: 35px; } .hero .wrap .content h2 + .video, .hero .wrap .content h2 + .image { margin-top: 53px; } .hero .wrap .content h2.peckham-heading { text-align: center; font-size: 6.199375rem; text-transform: uppercase; overflow: hidden; line-height: 1; margin-left: 0; } .hero .wrap .content h2.peckham-heading.white { color: white; } .hero .wrap .content h2.peckham-heading.green { color: #00ffc3; } .hero .wrap .content h2.peckham-heading.red { color: #ff7a6d; } .hero .wrap .content h2.peckham-heading.yellow { color: #ffdc00; } .hero .wrap .content h2.peckham-heading.purple { color: #9306ff; } .hero .wrap .content h2.peckham-heading + .text-box { margin-top: 32px; } .hero .wrap .content h2.large-heading { font-size: 3.5rem; } .hero .wrap .content h4 { color: white; font-size: 1.25rem; margin-left: 35px; } .hero .wrap .content h4 + h2 { margin-top: 48px; } .hero .wrap .content .image img { width: 100%; height: auto; display: block; } .hero .wrap .content .image + .text-box { margin-top: 39px; } .hero .wrap .content .video + .text-box { margin-top: 39px; } .hero .wrap .content .text-box { background-color: white; margin: 0 38px; padding: 68px 22px 15px 22px; position: relative; border-top: 12px solid white; max-width: 692px; } .hero .wrap .content .text-box.green { border-top: 12px solid #00ffc3; } .hero .wrap .content .text-box.red { border-top: 12px solid #ff7a6d; } .hero .wrap .content .text-box.yellow { border-top: 12px solid #ffdc00; } .hero .wrap .content .text-box.purple { border-top: 12px solid #9306ff; } .hero .wrap .content .text-box h3 { font-size: 1.125rem; } .hero .wrap .content .text-box p { font-size: 1.125rem; line-height: 1.25; } .hero .wrap .content .text-box p strong { line-height: 1.28; } .hero .wrap .content .text-box p + a { margin-top: 32px; } .hero .wrap .content .text-box a { display: block; text-decoration: underline; font-size: 0.875rem; } .hero .wrap .content .text-box a.desktop { display: none; } .hero .wrap .content .text-box .purple-btn, .hero .wrap .content .text-box .red-btn { color: white; font-size: 0.9375rem; background-color: #9306ff; position: relative; width: 183px; height: 52px; line-height: 52px; padding-left: 24px; text-decoration: none; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 100%; max-width: fit-content; padding: 10px 40px 10px 10px; height: unset; line-height: 1.2; } .hero .wrap .content .text-box .purple-btn:after, .hero .wrap .content .text-box .red-btn:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-white.svg"); width: 19px; height: 14px; position: absolute; top: 50%; right: 17px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .hero .wrap .content .text-box .purple-btn:hover, .hero .wrap .content .text-box .red-btn:hover { background-color: #00ffc3; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .hero .wrap .content .text-box .green-btn { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); max-width: 237px; text-align: left; padding-left: 25px; height: 61px; line-height: 61px; } .hero .wrap .content .text-box .green-btn:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } .hero .wrap .content .text-box .green-btn:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } .hero .wrap .content .text-box .green-btn:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-purple.svg"); background-size: contain; background-repeat: no-repeat; width: 22px; height: 16px; position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .image-with-text + .slider { margin-top: 58px; } .image-with-text + .banner-image { margin-top: 78px; } .image-with-text .wrap { margin: 0 39px; } .image-with-text .wrap .cols + .button-link { margin-top: 23px; } .image-with-text .wrap .cols .col + .col { margin-top: 36px; } .image-with-text .wrap .cols .col .video, .image-with-text .wrap .cols .col .video-js { height: auto !important; width: -moz-calc(100vw - 78px); width: -o-calc(100vw - 78px); width: -webkit-calc(100vw - 78px); width: calc(100vw - 78px); padding-bottom: 0; padding-bottom: 56.25%; min-height: 202px; } .image-with-text .wrap .cols .col h2 { font-size: 2.25rem; max-width: 213px; } .image-with-text .wrap .cols .col h2 + h5 { margin-top: 32px; } .image-with-text .wrap .cols .col p { font-size: 0.875rem; line-height: 1.28; max-width: 285px; } .image-with-text .wrap .cols .col p + p { margin-top: 27px; } .image-with-text .wrap .cols .col h5 { font-size: 1.125rem; line-height: 1.1; max-width: 200px; } .image-with-text .wrap .cols .col h5 + h5 { margin-top: 17px; } .image-with-text .wrap .cols .col h5 + p { margin-top: 40px; } .image-with-text .wrap .button-link { position: relative; } .image-with-text .wrap .button-link:after { content: ''; display: block; background-color: transparent; width: -moz-calc(100% + 78px); width: -o-calc(100% + 78px); width: -webkit-calc(100% + 78px); width: calc(100% + 78px); margin-left: -39px; height: 13px; margin-top: -13px; z-index: -1; pointer-events: none; } .image-with-text .wrap .button-link.green:after { background-color: #00ffc3; } .image-with-text .wrap .button-link a { font-size: 0.875rem; text-decoration: underline; } .image-with-text .wrap .button-link a + .green-btn { margin-top: 39px; } .image-with-text .wrap .button-link .green-btn { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; max-width: 251px; text-decoration: none; height: 60px; line-height: 60px; font-size: 1.36365rem; position: relative; text-align: left; padding-left: 32px; width: -moz-calc(100% - 32px); width: -o-calc(100% - 32px); width: -webkit-calc(100% - 32px); width: calc(100% - 32px); } .image-with-text .wrap .button-link .green-btn:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } .image-with-text .wrap .button-link .green-btn:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } .image-with-text .wrap .button-link .green-btn:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-purple.svg"); background-size: contain; background-repeat: no-repeat; width: 28px; height: 21px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 24px; } .stacked-cols.three-boxes + .text-image-cols { margin-top: 50px; } .stacked-cols.three-boxes + .text-banner { margin-top: 24px; } .stacked-cols.three-boxes + .info-box-cols { margin-top: 78px; } .stacked-cols.three-boxes.with-image + .slider.three-boxes.with-link { margin-top: 66px; } .stacked-cols.three-boxes.with-image .swiper-container .swiper-wrapper { -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; } .stacked-cols.three-boxes.with-image .swiper-container .swiper-wrapper .swiper-slide { position: relative; width: 255px; } .stacked-cols.three-boxes.with-image .swiper-container .cols .col .info-box { border-top: 0; padding-top: 0; margin: 0 15px 0 35px; min-height: 368px; position: relative; } .stacked-cols.three-boxes.with-image .swiper-container .cols .col .info-box p { padding-right: 20px; } .stacked-cols.three-boxes.with-image .swiper-container .cols .col .info-box figure { position: absolute; bottom: 0; left: 0; width: 100%; } .stacked-cols.three-boxes.with-link .heading + .swiper-container { margin-top: 23px; } .stacked-cols.three-boxes.with-link .cols .col .info-box { position: relative; min-height: 307px; } .stacked-cols.three-boxes.with-link .cols .col .info-box h3 { max-width: unset; } .stacked-cols.three-boxes.with-link .cols .col .info-box p + p { margin-top: 16px; } .stacked-cols.three-boxes.with-link .cols .col .info-box .link { display: block; font-size: 0.875rem; text-decoration: underline; color: #9306ff; text-align: left; } .stacked-cols.three-boxes.with-link .cols .col .info-box .link + p { margin-top: 20px; } .stacked-cols.three-boxes.with-link .cols .col .info-box .button { position: absolute; bottom: 0; left: 0; width: 100%; } .stacked-cols.three-boxes.with-link .cols .col .info-box .button button, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a { display: block; } .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.green-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.green-btn { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.green-btn:hover, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.green-btn:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.green-btn:hover:after, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.green-btn:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.yellow-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.yellow-btn { display: block; width: 100%; height: 40px; background-color: #ffdc00; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.yellow-btn:hover, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.yellow-btn:hover { background-color: #ff7a6d; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.red-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.red-btn { display: block; width: 100%; height: 40px; background-color: #ff7a6d; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.red-btn:hover, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.red-btn:hover { background-color: #ffdc00; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.purple-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.purple-btn { color: white; font-size: 0.9375rem; background-color: #9306ff; position: relative; width: 183px; height: 52px; line-height: 52px; padding-left: 24px; text-decoration: none; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.purple-btn:after, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.purple-btn:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-white.svg"); width: 19px; height: 14px; position: absolute; top: 50%; right: 17px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.purple-btn:hover, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.purple-btn:hover { background-color: #00ffc3; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.green-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.yellow-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.red-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.purple-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.green-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.yellow-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.red-btn, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.purple-btn { position: relative; text-align: left; padding-left: 27px; max-width: 184px; height: 50px; line-height: 50px; } .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.green-btn:after, .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.yellow-btn:after, .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.red-btn:after, .stacked-cols.three-boxes.with-link .cols .col .info-box .button button.purple-btn:after, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.green-btn:after, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.yellow-btn:after, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.red-btn:after, .stacked-cols.three-boxes.with-link .cols .col .info-box .button a.purple-btn:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-purple.svg"); background-size: contain; background-repeat: no-repeat; width: 22px; height: 16px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 21px; } .stacked-cols.three-boxes .heading { margin: 0 35px; } .stacked-cols.three-boxes .heading .peckham-heading { text-align: left; font-size: 2.8125rem; } .stacked-cols.three-boxes .cols { -webkit-align-items: baseline; -moz-align-items: baseline; -ms-align-items: baseline; align-items: baseline; } .stacked-cols.three-boxes .cols .col .info-box { border-top: 15px solid transparent; padding-top: 23px; margin: 0 0 0 35px; max-width: 283px; } .stacked-cols.three-boxes .cols .col .info-box.green { border-color: #00ffc3; } .stacked-cols.three-boxes .cols .col .info-box.yellow { border-color: #ffdc00; } .stacked-cols.three-boxes .cols .col .info-box.purple { border-color: #9306ff; } .stacked-cols.three-boxes .cols .col .info-box.red { border-color: #ff7a6d; } .stacked-cols.three-boxes .cols .col .info-box h3 { font-size: 1.875rem; max-width: 170px; } .stacked-cols.three-boxes .cols .col .info-box h3 + p { margin-top: 20px; } .stacked-cols.three-boxes .cols .col .info-box p { font-size: 0.875rem; line-height: 1.43; text-align: left; } .stacked-cols.three-boxes .cols .col .info-box figure { background-size: cover; background-position: center center; width: 100%; height: 136px; } .stacked-cols .wrap .heading h3 { text-align: center; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em; } .stacked-cols .wrap .heading .peckham-heading { font-size: 6.199375rem; text-transform: uppercase; overflow: hidden; font-size: 4.229375rem; text-align: center; } .stacked-cols .wrap .heading .peckham-heading.white { color: white; } .stacked-cols .wrap .heading .peckham-heading.green { color: #00ffc3; } .stacked-cols .wrap .heading .peckham-heading.red { color: #ff7a6d; } .stacked-cols .wrap .heading .peckham-heading.yellow { color: #ffdc00; } .stacked-cols .wrap .heading .peckham-heading.purple { color: #9306ff; } .slider { margin-top: 35px; } .slider + .slider.info-boxes { margin-top: 80px; } .slider.info-boxes { position: relative; margin: 50px 0 50px 30px; } .slider.info-boxes .heading { margin-bottom: 35px; } .slider.info-boxes + .three-cols { margin-top: 90px; } .slider.info-boxes + .slider.three-boxes { margin-top: 78px; } .slider.info-boxes .swiper-container .swiper-wrapper { -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: left; -moz-justify-content: left; -ms-justify-content: left; justify-content: left; -ms-flex-pack: left; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide { position: relative; width: 255px; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box { background-color: white; border-top: 15px solid transparent; padding-top: 15px; max-width: 283px; margin: 0 auto; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box.purple { border-color: #9306ff; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box.green { border-color: #00ffc3; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box.red { border-color: #ff7a6d; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box.yellow { border-color: #ffdc00; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box h2 { font-size: 2.25rem; padding-left: 27px; text-align: left; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box h2 + p { margin-top: 13px; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box h2 + .bottom-bar { margin-top: 34px; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box p { font-size: 0.875rem; padding-left: 27px; line-height: 1.28; text-align: left; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box p + .bottom-bar { margin-top: 34px; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box p strong { font-size: 1rem; line-height: 1.1; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box button[data-action="showMore"] { color: #9306ff; margin: 20px 0 20px 27px; text-decoration: underline; text-decoration-color: #9306ff; text-underline-offset: 4px; text-decoration-color: #9306ff; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box .bottom-bar .green-btn { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; text-align: left; position: relative; height: 54px; line-height: 54px; padding-left: 27px; width: -moz-calc(100% - 27px); width: -o-calc(100% - 27px); width: -webkit-calc(100% - 27px); width: calc(100% - 27px); } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box .bottom-bar .green-btn:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box .bottom-bar .green-btn:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box .bottom-bar .green-btn:after { content: ''; display: inline-block; background-image: url("/assets/images/icons/arrow-purple.svg"); background-size: contain; background-repeat: no-repeat; margin-left: 28px; vertical-align: middle; width: 19px; height: 14px; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box .bottom-bar h5 { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; text-align: left; height: 54px; line-height: 54px; padding-left: 27px; width: -moz-calc(100% - 27px); width: -o-calc(100% - 27px); width: -webkit-calc(100% - 27px); width: calc(100% - 27px); } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box .bottom-bar h5:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } .slider.info-boxes .swiper-container .swiper-wrapper .swiper-slide .info-box .bottom-bar h5:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } .slider.dots { margin-left: 30px; } .slider.dots + .text-panel.rules-and-regulations { padding-top: 20px; padding-bottom: 0; } .slider.dots + .image-with-text { margin-top: 78px; } .slider.dots + .three-boxes { margin-top: 78px; } .slider.dots .swiper-container .swiper-wrapper { -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; } .slider.dots .swiper-container .swiper-wrapper .swiper-slide { position: relative; width: 140px; } .slider.dots .swiper-container .swiper-wrapper .swiper-slide p { line-height: 1.1; } .slider.dots .swiper-container .swiper-pagination { margin-left: -30px; } .slider.three-boxes + .text-image-cols { margin-top: 50px; } .slider.three-boxes + .text-banner { margin-top: 24px; } .slider.three-boxes + .info-box-cols { margin-top: 78px; } .slider.three-boxes.with-image + .slider.three-boxes.with-link { margin-top: 66px; } .slider.three-boxes.with-image .swiper-container .swiper-wrapper { -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; } .slider.three-boxes.with-image .swiper-container .swiper-wrapper .swiper-slide { position: relative; width: 297px; } .slider.three-boxes.with-image .swiper-container .cols .col .info-box { border-top: 0; padding-top: 0; margin: 0 15px 0 35px; min-height: 368px; position: relative; } .slider.three-boxes.with-image .swiper-container .cols .col .info-box p { padding-right: 25px; line-height: 1.3; } .slider.three-boxes.with-image .swiper-container .cols .col .info-box figure { position: absolute; bottom: 0; left: 0; width: 100%; } .slider.three-boxes.with-link .heading + .swiper-container { margin-top: 23px; } .slider.three-boxes.with-link .swiper-container .swiper-wrapper { -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .slider.three-boxes.with-link .swiper-container .swiper-wrapper .swiper-slide { position: relative; width: 255px; } .slider.three-boxes.with-link .swiper-container .cols { -webkit-justify-content: left; -moz-justify-content: left; -ms-justify-content: left; justify-content: left; -ms-flex-pack: left; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box { position: relative; min-height: 307px; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box h3 { max-width: unset; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box p + p { margin-top: 16px; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box .link { display: block; font-size: 0.875rem; text-decoration: underline; color: #9306ff; text-align: left; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box .link + p { margin-top: 20px; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button { position: absolute; bottom: 0; left: 0; width: 100%; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a { display: block; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.green-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.green-btn { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.green-btn:hover, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.green-btn:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.green-btn:hover:after, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.green-btn:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.yellow-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.yellow-btn { display: block; width: 100%; height: 40px; background-color: #ffdc00; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.yellow-btn:hover, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.yellow-btn:hover { background-color: #ff7a6d; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.red-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.red-btn { display: block; width: 100%; height: 40px; background-color: #ff7a6d; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.red-btn:hover, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.red-btn:hover { background-color: #ffdc00; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.purple-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.purple-btn { color: white; font-size: 0.9375rem; background-color: #9306ff; position: relative; width: 183px; height: 52px; line-height: 52px; padding-left: 24px; text-decoration: none; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.purple-btn:after, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.purple-btn:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-white.svg"); width: 19px; height: 14px; position: absolute; top: 50%; right: 17px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.purple-btn:hover, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.purple-btn:hover { background-color: #00ffc3; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.green-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.yellow-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.red-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.purple-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.green-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.yellow-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.red-btn, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.purple-btn { position: relative; text-align: left; padding-left: 27px; max-width: 184px; height: 50px; line-height: 50px; } .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.green-btn:after, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.yellow-btn:after, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.red-btn:after, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button button.purple-btn:after, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.green-btn:after, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.yellow-btn:after, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.red-btn:after, .slider.three-boxes.with-link .swiper-container .cols .col .info-box .button a.purple-btn:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-purple.svg"); background-size: contain; background-repeat: no-repeat; width: 22px; height: 16px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 21px; } .slider.three-boxes.wrapped + .coloured-panel { margin-top: 78px; } .slider.three-boxes.wrapped .swiper-container .cols .col .info-box h3 { max-width: unset; } .slider.three-boxes .heading { margin: 0 35px; } .slider.three-boxes .heading .peckham-heading { text-align: left; font-size: 2.8125rem; } .slider.three-boxes .swiper-container .cols { -webkit-align-items: baseline; -moz-align-items: baseline; -ms-align-items: baseline; align-items: baseline; } .slider.three-boxes .swiper-container .cols .col .info-box { border-top: 15px solid transparent; padding-top: 23px; margin: 0 0 0 35px; max-width: 283px; } .slider.three-boxes .swiper-container .cols .col .info-box.green { border-color: #00ffc3; } .slider.three-boxes .swiper-container .cols .col .info-box.yellow { border-color: #ffdc00; } .slider.three-boxes .swiper-container .cols .col .info-box.purple { border-color: #9306ff; } .slider.three-boxes .swiper-container .cols .col .info-box.red { border-color: #ff7a6d; } .slider.three-boxes .swiper-container .cols .col .info-box h3 { font-size: 1.875rem; max-width: 170px; } .slider.three-boxes .swiper-container .cols .col .info-box h3 + p { margin-top: 20px; } .slider.three-boxes .swiper-container .cols .col .info-box p { font-size: 0.875rem; line-height: 1.43; text-align: left; } .slider.three-boxes .swiper-container .cols .col .info-box figure { background-size: cover; background-position: center center; width: 100%; height: 136px; } .slider.mentors .swiper-container .swiper-wrapper .swiper-slide .info-box h2 br { display: none; } .slider .heading + .swiper-container { margin-top: 35px; } .slider .heading h3 { text-align: center; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em; } .slider .heading .peckham-heading { font-size: 6.199375rem; text-transform: uppercase; overflow: hidden; font-size: 4.229375rem; } .slider .heading .peckham-heading.white { color: white; } .slider .heading .peckham-heading.green { color: #00ffc3; } .slider .heading .peckham-heading.red { color: #ff7a6d; } .slider .heading .peckham-heading.yellow { color: #ffdc00; } .slider .heading .peckham-heading.purple { color: #9306ff; } .slider .link { display: block; text-align: center; font-size: 0.75rem; text-decoration: underline; color: #b3b3b3; letter-spacing: 0; } .slider .swiper-container + a { margin-top: 35px; } .slider .swiper-container .swiper-pagination { padding: 54px 0 26px 0; text-align: center; } .slider .swiper-container .swiper-pagination.white span { border: 1px solid white; } .slider .swiper-container .swiper-pagination.white span.swiper-pagination-bullet-active { background-color: white; } .slider .swiper-container .swiper-pagination span { display: inline-block; border: 1px solid #c6c6c5; width: 8px; height: 8px; border-radius: 50%; } .slider .swiper-container .swiper-pagination span + span { margin-left: 8px; } .slider .swiper-container .swiper-pagination span.swiper-pagination-bullet-active { background-color: #c6c6c5; } .slider .swiper-container .swiper-wrapper { -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; } .slider .swiper-container .swiper-wrapper + .swiper-pagination { margin-top: -27px; } .slider .swiper-container .swiper-wrapper .swiper-slide .info-box h2 { word-break: break-word; -webkit-hyphens: auto; } .slider .swiper-container .swiper-wrapper .swiper-slide figure img { display: block; width: 100%; height: 100%; } .slider .swiper-container .swiper-wrapper .swiper-slide .dot { width: 20px; height: 20px; border-radius: 50%; margin: 0 auto; } .slider .swiper-container .swiper-wrapper .swiper-slide .dot.green { background-color: #00ffc3; } .slider .swiper-container .swiper-wrapper .swiper-slide .dot.red { background-color: #ff7a6d; } .slider .swiper-container .swiper-wrapper .swiper-slide .dot.yellow { background-color: #ffdc00; } .slider .swiper-container .swiper-wrapper .swiper-slide .dot.purple { background-color: #9306ff; } .slider .swiper-container .swiper-wrapper .swiper-slide .dot + p { margin-top: 20px; } .slider .swiper-container .swiper-wrapper .swiper-slide p { text-align: center; font-size: 1.125rem; } .slider .swiper-container .swiper-wrapper .swiper-slide p + figure { margin-top: 20px; } .slider .swiper-menu.desktop { display: none; } .three-cols + .text-image-cols { margin-top: 84px; } .three-cols + .banner-image { margin-top: 78px; } .three-cols .wrap { margin: 0 37px; } .three-cols .wrap .heading + .cols { margin-top: 34px; } .three-cols .wrap .heading .peckham-heading { font-size: 6.199375rem; text-transform: uppercase; overflow: hidden; font-size: 3.415625rem; } .three-cols .wrap .heading .peckham-heading.white { color: white; } .three-cols .wrap .heading .peckham-heading.green { color: #00ffc3; } .three-cols .wrap .heading .peckham-heading.red { color: #ff7a6d; } .three-cols .wrap .heading .peckham-heading.yellow { color: #ffdc00; } .three-cols .wrap .heading .peckham-heading.purple { color: #9306ff; } .three-cols .wrap .cols .col + .col { margin-top: 57px; } .three-cols .wrap .cols .col .info-box { border-top: 15px solid transparent; padding-top: 20px; } .three-cols .wrap .cols .col .info-box.green { border-color: #00ffc3; } .three-cols .wrap .cols .col .info-box.red { border-color: #ff7a6d; } .three-cols .wrap .cols .col .info-box.yellow { border-color: #ffdc00; } .three-cols .wrap .cols .col .info-box h2 { font-size: 1.875rem; } .three-cols .wrap .cols .col .info-box h2 + p { margin-top: 20px; } .three-cols .wrap .cols .col .info-box p { font-size: 0.875rem; line-height: 1.28; } .three-cols .wrap .cols .col .info-box p + figure { margin-top: 22px; } .three-cols .wrap .cols .col .info-box figure { background-size: cover; background-position: center center; width: 100%; height: 156px; border-bottom: 26px solid #9306ff; } .three-cols .wrap .cols .col .info-box figure + a { margin-top: -26px; } .three-cols .wrap .cols .col .info-box a { display: block; max-width: 162px; margin-left: auto; position: relative; } .three-cols .wrap .cols .col .info-box a.desktop { display: none; } .three-cols .wrap .cols .col .info-box a:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-purple.svg"); background-size: contain; background-repeat: no-repeat; width: 18px; height: 14px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 17px; } .three-cols .wrap .cols .col .info-box a.green-btn { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .three-cols .wrap .cols .col .info-box a.green-btn:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } .three-cols .wrap .cols .col .info-box a.green-btn:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } .three-cols .wrap .cols .col .info-box a.red-btn { display: block; width: 100%; height: 40px; background-color: #ff7a6d; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .three-cols .wrap .cols .col .info-box a.red-btn:hover { background-color: #ffdc00; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .three-cols .wrap .cols .col .info-box a.yellow-btn { display: block; width: 100%; height: 40px; background-color: #ffdc00; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .three-cols .wrap .cols .col .info-box a.yellow-btn:hover { background-color: #ff7a6d; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .three-cols .wrap .cols .col .info-box a.green-btn, .three-cols .wrap .cols .col .info-box a.red-btn, .three-cols .wrap .cols .col .info-box a.yellow-btn { text-align: left; height: 54px; line-height: 54px; padding-left: 21px; } .text-image-cols + .text-image-cols { margin-top: 56px; } .text-image-cols + .banner-image { margin-top: 85px; } .text-image-cols + .slider.three-boxes.with-image { margin-top: 63px; } .text-image-cols + .slider.three-boxes .swiper-container .cols .col .info-box.green, .text-image-cols + .slider.three-boxes .swiper-container .cols .col .info-box.red, .text-image-cols + .slider.three-boxes .swiper-container .cols .col .info-box.yellow, .text-image-cols + .slider.three-boxes .swiper-container .cols .col .info-box.purple { border-color: transparent; } .text-image-cols + .slider.info-boxes { margin-top: 48px; } .text-image-cols.half-height .wrap .cols .col figure { height: 257px; } .text-image-cols.half-height .wrap .cols .col .content p { max-width: 290px; } .text-image-cols .wrap .heading { margin: 0 35px; } .text-image-cols .wrap .heading + .cols { margin-top: 43px; } .text-image-cols .wrap .heading .peckham-heading { font-size: 6.199375rem; text-transform: uppercase; overflow: hidden; font-size: 2.8125rem; } .text-image-cols .wrap .heading .peckham-heading.white { color: white; } .text-image-cols .wrap .heading .peckham-heading.green { color: #00ffc3; } .text-image-cols .wrap .heading .peckham-heading.red { color: #ff7a6d; } .text-image-cols .wrap .heading .peckham-heading.yellow { color: #ffdc00; } .text-image-cols .wrap .heading .peckham-heading.purple { color: #9306ff; } .text-image-cols .wrap .cols.yellow .col .content { border-bottom: 15px solid #ffdc00; padding-bottom: 35px; } .text-image-cols .wrap .cols.green .col .content { border-bottom: 15px solid #00ffc3; padding-bottom: 35px; } .text-image-cols .wrap .cols.purple .col .content { border-bottom: 15px solid #9306ff; padding-bottom: 35px; } .text-image-cols .wrap .cols.red .col .content { border-bottom: 15px solid #ff7a6d; padding-bottom: 35px; } .text-image-cols .wrap .cols .col { position: relative; } .text-image-cols .wrap .cols .col + .col { margin-top: 28px; } .text-image-cols .wrap .cols .col figure { width: 100%; background-size: cover; background-position: center center; height: 360px; } .text-image-cols .wrap .cols .col figure + a { margin-top: -26px; } .text-image-cols .wrap .cols .col a { display: block; max-width: 162px; margin-left: 39px; position: relative; } .text-image-cols .wrap .cols .col a.desktop { display: none; } .text-image-cols .wrap .cols .col a:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-purple.svg"); background-size: contain; background-repeat: no-repeat; width: 18px; height: 14px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 17px; } .text-image-cols .wrap .cols .col a.green-btn { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; text-align: left; height: 54px; line-height: 54px; padding-left: 21px; } .text-image-cols .wrap .cols .col a.green-btn:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } .text-image-cols .wrap .cols .col a.green-btn:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } .text-image-cols .wrap .cols .col a.green-btn.desktop { display: none; } .text-image-cols .wrap .cols .col .content { margin: 0 37px; } .text-image-cols .wrap .cols .col .content h3 { font-size: 1.25rem; } .text-image-cols .wrap .cols .col .content h3 + h2 { margin-top: 23px; } .text-image-cols .wrap .cols .col .content h2 { font-size: 2.25rem; } .text-image-cols .wrap .cols .col .content h2 + p { margin-top: 18px; } .text-image-cols .wrap .cols .col .content h4 { font-size: 2.25rem; line-height: 1; margin-top: 45px; } .text-image-cols .wrap .cols .col .content h4 + p { margin-top: 35px; } .text-image-cols .wrap .cols .col .content p { font-size: 0.875rem; line-height: 1.43; max-width: 230px; } .text-image-cols .wrap .cols .col .content p + p { margin-top: 16px; } .banner-image .wrap h2 { font-size: 2.454375rem; margin-left: 39px; } .banner-image .wrap h2 + a { margin-top: 32px; } .banner-image .wrap a { margin-left: 39px; } .banner-image .wrap a + figure { margin-top: 42px; } .banner-image .wrap .yellow-btn { position: relative; display: block; width: 100%; height: 40px; background-color: #ffdc00; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; height: 53px; max-width: 161px; text-align: left; padding-left: 22px; line-height: 53px; } .banner-image .wrap .yellow-btn:hover { background-color: #ff7a6d; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .banner-image .wrap .yellow-btn:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-purple.svg"); background-size: contain; background-repeat: no-repeat; width: 19px; height: 14px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 17px; } .banner-image .wrap figure img { display: block; width: 100%; height: 100%; } .text-panel + .slider.three-boxes { margin-top: 70px; } .text-panel + .text-image-cols { margin-top: 78px; } .text-panel + .staff-cols { margin-top: 78px; } .text-panel.indented .wrap p { max-width: 649px; margin-left: auto; } .text-panel.rules-and-regulations { padding-top: 90px; padding-bottom: 260px; max-width: 950px; } .text-panel.rules-and-regulations .wrap h3 { font-size: 1.25rem; line-height: 1.3; } .text-panel.rules-and-regulations .wrap h3 + p, .text-panel.rules-and-regulations .wrap h3 + h3, .text-panel.rules-and-regulations .wrap h3 + ul { margin-top: 35px; } .text-panel.rules-and-regulations .wrap h3 + h2 { margin-top: 75px; } .text-panel.rules-and-regulations .wrap h2 { line-height: 1; } .text-panel.rules-and-regulations .wrap p { line-height: 1.3; } .text-panel.rules-and-regulations .wrap p + h3, .text-panel.rules-and-regulations .wrap p + h2 { margin-top: 75px; } .text-panel.rules-and-regulations .wrap ul + p, .text-panel.rules-and-regulations .wrap ul + ul, .text-panel.rules-and-regulations .wrap ul + h3 { margin-top: 35px; } .text-panel.rules-and-regulations .wrap ul + p + h3 { margin-top: 80px; } .text-panel.rules-and-regulations .wrap ul li { list-style: none; line-height: 1.3; } .text-panel .wrap { margin: 0 45px 0 35px; } .text-panel .wrap h5 { font-size: 1.125rem; line-height: 1.28; max-width: 647px; } .text-panel .wrap h5 + p { margin-top: 28px; } .text-panel .wrap h2 { font-size: 2.25rem; line-height: 1; max-width: 228px; } .text-panel .wrap h2 + p { margin-top: 32px; } .text-panel .wrap p { font-size: 0.875rem; line-height: 1.28; } .text-panel .wrap p + p { margin-top: 28px; } .text-banner { position: relative; padding: 44px 33px 58px 33px; margin-bottom: 25px; } .text-banner + .slider.info-boxes { margin-top: 88px; } .text-banner + .text-image-cols, .text-banner + .text-panel { margin-top: 78px; } .text-banner.grey { background-color: #c6c6c5; } .text-banner .wrap .heading .peckham-heading { font-size: 6.199375rem; text-transform: uppercase; overflow: hidden; font-size: 4.75625rem; } .text-banner .wrap .heading .peckham-heading.white { color: white; } .text-banner .wrap .heading .peckham-heading.green { color: #00ffc3; } .text-banner .wrap .heading .peckham-heading.red { color: #ff7a6d; } .text-banner .wrap .heading .peckham-heading.yellow { color: #ffdc00; } .text-banner .wrap .heading .peckham-heading.purple { color: #9306ff; } .text-banner .wrap .heading + .content { margin-top: 30px; } .text-banner .wrap .content p { font-size: 0.875rem; line-height: 1.29; } .text-banner .wrap .content .button { position: absolute; bottom: -25px; left: 33px; width: 100%; max-width: -moz-calc(100% - 33px); max-width: -o-calc(100% - 33px); max-width: -webkit-calc(100% - 33px); max-width: calc(100% - 33px); } .text-banner .wrap .content .button button.yellow-btn, .text-banner .wrap .content .button a.yellow-btn { display: block; width: 100%; height: 40px; background-color: #ffdc00; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .text-banner .wrap .content .button button.yellow-btn:hover, .text-banner .wrap .content .button a.yellow-btn:hover { background-color: #ff7a6d; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .text-banner .wrap .content .button button.green-btn, .text-banner .wrap .content .button a.green-btn { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .text-banner .wrap .content .button button.green-btn:hover, .text-banner .wrap .content .button a.green-btn:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } .text-banner .wrap .content .button button.green-btn:hover:after, .text-banner .wrap .content .button a.green-btn:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } .text-banner .wrap .content .button button.red-btn, .text-banner .wrap .content .button a.red-btn { display: block; width: 100%; height: 40px; background-color: #ff7a6d; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .text-banner .wrap .content .button button.red-btn:hover, .text-banner .wrap .content .button a.red-btn:hover { background-color: #ffdc00; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .text-banner .wrap .content .button button.purple-btn, .text-banner .wrap .content .button a.purple-btn { color: white; font-size: 0.9375rem; background-color: #9306ff; position: relative; width: 183px; height: 52px; line-height: 52px; padding-left: 24px; text-decoration: none; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .text-banner .wrap .content .button button.purple-btn:after, .text-banner .wrap .content .button a.purple-btn:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-white.svg"); width: 19px; height: 14px; position: absolute; top: 50%; right: 17px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .text-banner .wrap .content .button button.purple-btn:hover, .text-banner .wrap .content .button a.purple-btn:hover { background-color: #00ffc3; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .text-banner .wrap .content .button button.yellow-btn, .text-banner .wrap .content .button button.green-btn, .text-banner .wrap .content .button button.red-btn, .text-banner .wrap .content .button button.purple-btn, .text-banner .wrap .content .button a.yellow-btn, .text-banner .wrap .content .button a.green-btn, .text-banner .wrap .content .button a.red-btn, .text-banner .wrap .content .button a.purple-btn { position: relative; text-align: left; padding-left: 27px; max-width: 184px; height: 50px; line-height: 50px; } .text-banner .wrap .content .button button.yellow-btn:after, .text-banner .wrap .content .button button.green-btn:after, .text-banner .wrap .content .button button.red-btn:after, .text-banner .wrap .content .button button.purple-btn:after, .text-banner .wrap .content .button a.yellow-btn:after, .text-banner .wrap .content .button a.green-btn:after, .text-banner .wrap .content .button a.red-btn:after, .text-banner .wrap .content .button a.purple-btn:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-purple.svg"); background-size: contain; background-repeat: no-repeat; width: 22px; height: 16px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 21px; } .info-box-cols + .text-image-cols { margin-top: 78px; } .info-box-cols .wrap { margin: 0 35px; } .info-box-cols .wrap .heading .peckham-heading { font-size: 6.199375rem; text-transform: uppercase; overflow: hidden; font-size: 2.8125rem; } .info-box-cols .wrap .heading .peckham-heading.white { color: white; } .info-box-cols .wrap .heading .peckham-heading.green { color: #00ffc3; } .info-box-cols .wrap .heading .peckham-heading.red { color: #ff7a6d; } .info-box-cols .wrap .heading .peckham-heading.yellow { color: #ffdc00; } .info-box-cols .wrap .heading .peckham-heading.purple { color: #9306ff; } .info-box-cols .wrap .heading + .cols { margin-top: 35px; } .info-box-cols .wrap .cols .col + .col { margin-top: 70px; } .info-box-cols .wrap .cols .col .info-box { border-top: 13px solid transparent; border-bottom: 13px solid transparent; padding: 23px 0; } .info-box-cols .wrap .cols .col .info-box.green { border-color: #00ffc3; } .info-box-cols .wrap .cols .col .info-box.red { border-color: #ff7a6d; } .info-box-cols .wrap .cols .col .info-box.yellow { border-color: #ffdc00; } .info-box-cols .wrap .cols .col .info-box.purple { border-color: #9306ff; } .info-box-cols .wrap .cols .col .info-box h2 { font-size: 1.875rem; } .info-box-cols .wrap .cols .col .info-box h2 + h5 { margin-top: 22px; } .info-box-cols .wrap .cols .col .info-box h5 { font-size: 1.125rem; } .info-box-cols .wrap .cols .col .info-box h5 + ul { margin-top: 30px; } .info-box-cols .wrap .cols .col .info-box h5 em { color: #ff7a6d; } .info-box-cols .wrap .cols .col .info-box ul li { list-style: none; font-size: 0.875rem; line-height: 1.43; margin-left: 30px; position: relative; } .info-box-cols .wrap .cols .col .info-box ul li:before { content: ''; display: block; width: 22px; height: 22px; background-image: url("/assets/images/icons/tick-green.svg"); background-size: contain; background-repeat: no-repeat; margin-right: 8px; position: absolute; top: 0; left: -30px; } .info-box-cols .wrap .cols .col .info-box ul li + li { margin-top: 15px; } .info-box-cols .wrap .cols .col .buttons a { display: block; position: relative; } .info-box-cols .wrap .cols .col .buttons a.green-btn { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .info-box-cols .wrap .cols .col .buttons a.green-btn:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } .info-box-cols .wrap .cols .col .buttons a.green-btn:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } .info-box-cols .wrap .cols .col .buttons a.red-btn { display: block; width: 100%; height: 40px; background-color: #ff7a6d; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .info-box-cols .wrap .cols .col .buttons a.red-btn:hover { background-color: #ffdc00; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .info-box-cols .wrap .cols .col .buttons a.yellow-btn { display: block; width: 100%; height: 40px; background-color: #ffdc00; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .info-box-cols .wrap .cols .col .buttons a.yellow-btn:hover { background-color: #ff7a6d; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .info-box-cols .wrap .cols .col .buttons a.purple-btn { color: white; font-size: 0.9375rem; background-color: #9306ff; position: relative; width: 183px; height: 52px; line-height: 52px; padding-left: 24px; text-decoration: none; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .info-box-cols .wrap .cols .col .buttons a.purple-btn:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-white.svg"); width: 19px; height: 14px; position: absolute; top: 50%; right: 17px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .info-box-cols .wrap .cols .col .buttons a.purple-btn:hover { background-color: #00ffc3; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .info-box-cols .wrap .cols .col .buttons a.green-btn, .info-box-cols .wrap .cols .col .buttons a.red-btn, .info-box-cols .wrap .cols .col .buttons a.yellow-btn, .info-box-cols .wrap .cols .col .buttons a.purple-btn { height: 60px; line-height: 60px; max-width: 210px; text-align: left; padding-left: 24px; margin-left: auto; margin-right: auto; font-size: 1.36365rem; } .info-box-cols .wrap .cols .col .buttons a.green-btn:after, .info-box-cols .wrap .cols .col .buttons a.red-btn:after, .info-box-cols .wrap .cols .col .buttons a.yellow-btn:after, .info-box-cols .wrap .cols .col .buttons a.purple-btn:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-purple.svg"); background-size: contain; background-repeat: no-repeat; width: 28px; height: 21px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 24px; } .info-box-cols .wrap .cols .col .buttons a.bottom-link { text-align: center; font-size: 0.875rem; text-decoration: underline; margin-top: 20px; } .coloured-panel { padding: 53px 0; z-index: 1; } .coloured-panel + .text-panel { margin-top: 78px; } .coloured-panel + .text-panel.rules-and-regulations { padding-top: 0; padding-bottom: 0; } .coloured-panel.red { background-color: #ff7a6d; } .coloured-panel.yellow { background-color: #ffdc00; } .coloured-panel.yellow .wrap h2, .coloured-panel.yellow .wrap p { color: #9306ff; } .coloured-panel.green { background-color: #00ffc3; } .coloured-panel.green .wrap h2, .coloured-panel.green .wrap p { color: #9306ff; } .coloured-panel.purple { background-color: #9306ff; } .coloured-panel.with-image { padding-bottom: 0; } .coloured-panel.with-image .wrap h2 { text-align: left; } .coloured-panel.with-image .wrap h2 br { display: none; } .coloured-panel .wrap { margin: 0 35px; } .coloured-panel .wrap h3 { font-size: 1.25rem; } .coloured-panel .wrap h3 + h2 { margin-top: 24px; } .coloured-panel .wrap .image { position: relative; z-index: 2; } .coloured-panel .wrap .image:before { content: ''; display: block; z-index: -1; position: absolute; bottom: 0; left: -35px; width: -moz-calc(100% + 70px); width: -o-calc(100% + 70px); width: -webkit-calc(100% + 70px); width: calc(100% + 70px); height: 50%; background-color: white; } .coloured-panel .wrap .image img { display: block; width: 100%; height: auto; } .coloured-panel .wrap .image h4 { color: white; font-size: 2.5rem; position: absolute; top: 50%; left: 50%; width: 100%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); text-align: center; } .coloured-panel .wrap .image h4 em { margin: 0 -7px; } .coloured-panel .wrap h2 { color: white; font-size: 2.5rem; text-align: center; } .coloured-panel .wrap h2 + .image { margin-top: 24px; } .coloured-panel .wrap h2 + p { margin-top: 25px; } .coloured-panel .wrap p { font-size: 0.875rem; color: white; text-align: center; max-width: 580px; margin: 0 auto; } .coloured-panel .wrap p + a { margin-top: 25px; } .coloured-panel .wrap a { display: block; position: relative; } .coloured-panel .wrap a.green-btn { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .coloured-panel .wrap a.green-btn:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } .coloured-panel .wrap a.green-btn:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } .coloured-panel .wrap a.red-btn { display: block; width: 100%; height: 40px; background-color: #ff7a6d; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .coloured-panel .wrap a.red-btn:hover { background-color: #ffdc00; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .coloured-panel .wrap a.yellow-btn { display: block; width: 100%; height: 40px; background-color: #ffdc00; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .coloured-panel .wrap a.yellow-btn:hover { background-color: #ff7a6d; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .coloured-panel .wrap a.purple-btn { color: white; font-size: 0.9375rem; background-color: #9306ff; position: relative; width: 183px; height: 52px; line-height: 52px; padding-left: 24px; text-decoration: none; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .coloured-panel .wrap a.purple-btn:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-white.svg"); width: 19px; height: 14px; position: absolute; top: 50%; right: 17px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .coloured-panel .wrap a.purple-btn:hover { background-color: #00ffc3; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .coloured-panel .wrap a.green-btn, .coloured-panel .wrap a.red-btn, .coloured-panel .wrap a.yellow-btn, .coloured-panel .wrap a.purple-btn { height: 50px; line-height: 50px; max-width: 175px; text-align: left; padding-left: 24px; margin-left: auto; margin-right: auto; } .coloured-panel .wrap a.bottom-link { text-align: center; font-size: 0.875rem; text-decoration: underline; margin-top: 20px; } .three-boxes + .text-image-cols { margin-top: 50px; } .three-boxes + .text-banner { margin-top: 24px; } .three-boxes + .info-box-cols { margin-top: 78px; } .three-boxes + .slider.three-boxes { margin-top: 50px; } .three-boxes .wrap .heading { margin: 0 35px; } .three-boxes .wrap .heading + .cols { margin-top: 23px; } .three-boxes .wrap .heading .peckham-heading { font-size: 6.199375rem; text-transform: uppercase; overflow: hidden; text-align: left; font-size: 2.8125rem; } .three-boxes .wrap .heading .peckham-heading.white { color: white; } .three-boxes .wrap .heading .peckham-heading.green { color: #00ffc3; } .three-boxes .wrap .heading .peckham-heading.red { color: #ff7a6d; } .three-boxes .wrap .heading .peckham-heading.yellow { color: #ffdc00; } .three-boxes .wrap .heading .peckham-heading.purple { color: #9306ff; } .three-boxes .wrap .cols { -webkit-align-items: baseline; -moz-align-items: baseline; -ms-align-items: baseline; align-items: baseline; } .three-boxes .wrap .cols .col + .col { margin-top: 48px; } .three-boxes .wrap .cols .col .info-box { border-top: 15px solid transparent; padding: 23px 18px 0 18px; margin: 0 35px; max-width: 283px; position: relative; } .three-boxes .wrap .cols .col .info-box.green { border-color: #00ffc3; } .three-boxes .wrap .cols .col .info-box.yellow { border-color: #ffdc00; } .three-boxes .wrap .cols .col .info-box.purple { border-color: #9306ff; } .three-boxes .wrap .cols .col .info-box.red { border-color: #ff7a6d; } .three-boxes .wrap .cols .col .info-box h3 { font-size: 1.875rem; max-width: 170px; max-width: unset; } .three-boxes .wrap .cols .col .info-box h3 + p { margin-top: 20px; } .three-boxes .wrap .cols .col .info-box p { font-size: 0.875rem; line-height: 1.43; text-align: left; } .three-boxes .wrap .cols .col .info-box p + p { margin-top: 16px; } .three-boxes .wrap .cols .col .info-box p + .button { margin-top: 27px; } .three-boxes .wrap .cols .col .info-box figure { background-size: cover; background-position: center center; width: 100%; height: 136px; } .three-boxes .wrap .cols .col .info-box .link { display: block; font-size: 0.875rem; text-decoration: underline; color: #9306ff; text-align: left; } .three-boxes .wrap .cols .col .info-box .link + p { margin-top: 20px; } .three-boxes .wrap .cols .col .info-box .link + .button { margin-top: 27px; } .three-boxes .wrap .cols .col .info-box .button button.green-btn { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .three-boxes .wrap .cols .col .info-box .button button.green-btn:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } .three-boxes .wrap .cols .col .info-box .button button.green-btn:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } .three-boxes .wrap .cols .col .info-box .button button.yellow-btn { display: block; width: 100%; height: 40px; background-color: #ffdc00; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .three-boxes .wrap .cols .col .info-box .button button.yellow-btn:hover { background-color: #ff7a6d; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .three-boxes .wrap .cols .col .info-box .button button.red-btn { display: block; width: 100%; height: 40px; background-color: #ff7a6d; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .three-boxes .wrap .cols .col .info-box .button button.red-btn:hover { background-color: #ffdc00; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .three-boxes .wrap .cols .col .info-box .button button.purple-btn { color: white; font-size: 0.9375rem; background-color: #9306ff; position: relative; width: 183px; height: 52px; line-height: 52px; padding-left: 24px; text-decoration: none; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .three-boxes .wrap .cols .col .info-box .button button.purple-btn:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-white.svg"); width: 19px; height: 14px; position: absolute; top: 50%; right: 17px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .three-boxes .wrap .cols .col .info-box .button button.purple-btn:hover { background-color: #00ffc3; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .three-boxes .wrap .cols .col .info-box .button button.green-btn, .three-boxes .wrap .cols .col .info-box .button button.yellow-btn, .three-boxes .wrap .cols .col .info-box .button button.red-btn, .three-boxes .wrap .cols .col .info-box .button button.purple-btn { position: relative; text-align: left; padding-left: 27px; max-width: 184px; height: 50px; line-height: 50px; } .three-boxes .wrap .cols .col .info-box .button button.green-btn:after, .three-boxes .wrap .cols .col .info-box .button button.yellow-btn:after, .three-boxes .wrap .cols .col .info-box .button button.red-btn:after, .three-boxes .wrap .cols .col .info-box .button button.purple-btn:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-purple.svg"); background-size: contain; background-repeat: no-repeat; width: 22px; height: 16px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 21px; } .staff-cols { border-top: 13px solid #00ffc3; margin: 0 35px; } .staff-cols + .three-cols { margin-top: 78px; } .staff-cols .wrap .cols { padding-top: 50px; } .staff-cols .wrap .cols .col + .col { margin-top: 50px; } .staff-cols .wrap .cols .col figure { max-width: 384px; } .staff-cols .wrap .cols .col figure + .content { margin-top: 25px; } .staff-cols .wrap .cols .col figure img { width: 100%; height: auto; display: block; } .staff-cols .wrap .cols .col .content h3 { font-size: 1.125rem; } .staff-cols .wrap .cols .col .content h3 + p { margin-top: 22px; } .staff-cols .wrap .cols .col .content p { font-size: 0.875rem; line-height: 1.38; } .staff-cols .wrap .cols .col .content p + p { margin-top: 12px; } .gallery { margin: 130px 35px 0 35px; } .gallery + .three-cols { margin-top: 78px; } .gallery .wrap .show-more { display: block; max-width: 162px; margin: 0 auto; position: relative; } .gallery .wrap .show-more:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-purple.svg"); background-size: contain; background-repeat: no-repeat; width: 18px; height: 14px; position: absolute; top: 50%; -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); right: 17px; } .gallery .wrap .show-more.green-btn { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .gallery .wrap .show-more.green-btn:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } .gallery .wrap .show-more.green-btn:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } .gallery .wrap .show-more.red-btn { display: block; width: 100%; height: 40px; background-color: #ff7a6d; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .gallery .wrap .show-more.red-btn:hover { background-color: #ffdc00; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .gallery .wrap .show-more.yellow-btn { display: block; width: 100%; height: 40px; background-color: #ffdc00; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .gallery .wrap .show-more.yellow-btn:hover { background-color: #ff7a6d; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .gallery .wrap .show-more.purple-btn { color: white; font-size: 0.9375rem; background-color: #9306ff; position: relative; width: 183px; height: 52px; line-height: 52px; padding-left: 24px; text-decoration: none; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .gallery .wrap .show-more.purple-btn:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-white.svg"); width: 19px; height: 14px; position: absolute; top: 50%; right: 17px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .gallery .wrap .show-more.purple-btn:hover { background-color: #00ffc3; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .gallery .wrap .show-more.green-btn, .gallery .wrap .show-more.red-btn, .gallery .wrap .show-more.yellow-btn, .gallery .wrap .show-more.purple { text-align: left; height: 54px; line-height: 54px; padding-left: 21px; } .gallery .wrap .cols + .show-more { margin-top: 38px; } .gallery .wrap .cols .col { position: relative; } .gallery .wrap .cols .col + .col { margin-top: 35px; } .gallery .wrap .cols .col figure { height: 100%; } .gallery .wrap .cols .col figure img { display: block; width: 100%; height: 100%; object-fit: cover; } .gallery .wrap .cols .col .expand { display: block; text-indent: -99999999; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .gallery .wrap .cols .col .expand.show + .gallery-modal-image { opacity: 1; visibility: visible; pointer-events: all; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .gallery .wrap .cols .col .expand:after { content: ''; position: absolute; bottom: 10px; right: 16px; background-image: url("/assets/images/gallery/magnifying-glass-green.svg"); width: 33px; height: 33px; background-size: contain; background-repeat: no-repeat; } .gallery .wrap .cols .col .gallery-modal-image { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.9); z-index: 9; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .gallery .wrap .cols .col .gallery-modal-image.show { opacity: 1; visibility: visible; pointer-events: all; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .gallery .wrap .cols .col .gallery-modal-image .close { display: block; position: absolute; top: 20px; right: 24px; background-image: url("/assets/images/icons/close-black.svg"); width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; text-indent: -99999999; } .gallery .wrap .cols .col .gallery-modal-image .close.hide { display: block !important; } .gallery .wrap .cols .col .gallery-modal-image figure { position: absolute; width: -moz-calc(100% - 70px); width: -o-calc(100% - 70px); width: -webkit-calc(100% - 70px); width: calc(100% - 70px); top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 35px; } .contact-form { margin-top: 130px; padding: 50px 0; } .contact-form + .three-cols { margin-top: 78px; } .contact-form.grey { background-color: #c6c6c5; } .contact-form .wrap { margin: 0 35px; } .contact-form .wrap .form { max-width: 667px; margin-left: auto; margin-right: auto; } .contact-form .wrap .form form.success .input, .contact-form .wrap .form form.success button { display: none !important; } .contact-form .wrap .form form.success .message { display: block; } .contact-form .wrap .form form .message { display: none; text-align: center; padding: 40px 0; font-size: 1.875rem; } .contact-form .wrap .form form .input + .input { margin-top: 28px; } .contact-form .wrap .form form .input select { cursor: pointer; } .contact-form .wrap .form form .input input, .contact-form .wrap .form form .input select { height: 40px; line-height: 40px; } .contact-form .wrap .form form .input input, .contact-form .wrap .form form .input textarea, .contact-form .wrap .form form .input select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; width: 100%; border-radius: 0; resize: none; font-size: 0.875rem; letter-spacing: -0.02em; color: #9306ff; padding-left: 14px; } .contact-form .wrap .form form .input input::placeholder, .contact-form .wrap .form form .input textarea::placeholder, .contact-form .wrap .form form .input select::placeholder { font-size: 0.875rem; letter-spacing: -0.02em; color: #9306ff; padding-left: 14px; } .contact-form .wrap .form form .input input[data-invalid="true"], .contact-form .wrap .form form .input textarea[data-invalid="true"] { border: 1px solid #e5414a; } .contact-form .wrap .form form .input input[data-invalid="true"] + ul li, .contact-form .wrap .form form .input textarea[data-invalid="true"] + ul li { font-size: 0.875rem; color: #e5414a; margin-top: 4px; } .contact-form .wrap .form form .input label { font-size: 0.875rem; } .contact-form .wrap .form form .input label + input, .contact-form .wrap .form form .input label + textarea, .contact-form .wrap .form form .input label + select { margin-top: 4px; } .contact-form .wrap .form form .input.textarea textarea { min-height: 75px; } .contact-form .wrap .form form .input.select { position: relative; max-width: 284px; } .contact-form .wrap .form form .input.select:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-filled-purple.svg"); width: 10px; height: 8px; position: absolute; right: 14px; top: -moz-calc(50% + 11px); top: -o-calc(50% + 11px); top: -webkit-calc(50% + 11px); top: calc(50% + 11px); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none; } .contact-form .wrap .form form button[type="submit"] { color: white; font-size: 0.9375rem; background-color: #9306ff; position: relative; width: 183px; height: 52px; line-height: 52px; padding-left: 24px; text-decoration: none; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; max-width: 150px; text-decoration: none; height: 40px; line-height: 40px; font-size: 0.875rem; position: relative; text-align: left; padding-left: 24px; width: -moz-calc(100% - 32px); width: -o-calc(100% - 32px); width: -webkit-calc(100% - 32px); width: calc(100% - 32px); margin-left: auto; } .contact-form .wrap .form form button[type="submit"]:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-white.svg"); width: 19px; height: 14px; position: absolute; top: 50%; right: 17px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .contact-form .wrap .form form button[type="submit"]:hover { background-color: #00ffc3; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; } .contact-form .wrap .form form button[type="submit"]:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-white.svg"); background-size: contain; background-repeat: no-repeat; width: 22px; height: 16px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 24px; } footer { padding: 40px 0; } footer .wrap { margin: 0 39px; } footer .wrap .cols { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } footer .wrap .cols .col { width: 100%; } footer .wrap .cols .col:nth-of-type(1) { order: 4; margin-top: 80px; } footer .wrap .cols .col:nth-of-type(2) { order: 2; margin-top: 58px; } footer .wrap .cols .col:nth-of-type(3) { order: 1; } footer .wrap .cols .col:nth-of-type(4) { order: 3; margin-top: 56px; } footer .wrap .cols .col h1 { background-image: url("/assets/images/icons/logo.svg"); background-size: contain; background-repeat: no-repeat; width: 185px; height: 42px; text-indent: -9999999px; } footer .wrap .cols .col .social ul li + li { margin-left: 15px; margin-top: 0; } footer .wrap .cols .col ul + .social { margin-top: 60px; } footer .wrap .cols .col ul li { font-size: 0.9375rem; } footer .wrap .cols .col ul li + li { margin-top: 15px; } footer .wrap .cols .col p { font-size: 0.9375rem; line-height: 1.28; } footer .wrap .cols .col p + .green-link { margin-top: 22px; } footer .wrap .cols .col p + .green-btn { margin-top: 5px; } footer .wrap .cols .col .link { display: block; font-size: 0.9375rem; max-width: 75px; margin-bottom: 10px; line-height: 1.4; } footer .wrap .cols .col .link.desktop { display: none; } footer .wrap .cols .col .green-btn { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; max-width: fit-content; padding: 0 10px; height: 41px; display: block; margin-bottom: 20px; } footer .wrap .cols .col .green-btn:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } footer .wrap .cols .col .green-btn:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } footer .wrap .cols .col .green-btn + .link { margin-top: 20px; } footer .wrap .cols .col .green-link { display: block; width: 100%; height: 40px; background-color: #00ffc3; line-height: 40px; font-size: 0.9375rem; text-align: center; color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; text-align: left; height: 54px; line-height: 54px; padding-left: 21px; display: block; max-width: 162px; position: relative; } footer .wrap .cols .col .green-link:hover { background-color: #9306ff; -webkit-transition-timing-function: linear; -webkit-transition-duration: 300ms; -webkit-transition-property: all; -moz-transition-timing-function: linear; -moz-transition-duration: 300ms; -moz-transition-property: all; -o-transition-timing-function: linear; -o-transition-duration: 300ms; -o-transition-property: all; -ms-transition-timing-function: linear; -ms-transition-duration: 300ms; -ms-transition-property: all; transition-timing-function: linear; transition-duration: 300ms; transition-property: all; color: white; } footer .wrap .cols .col .green-link:hover:after { background-image: url("/assets/images/icons/arrow-white.svg"); } footer .wrap .cols .col .green-link:after { content: ''; display: block; background-image: url("/assets/images/icons/arrow-purple.svg"); background-size: contain; background-repeat: no-repeat; width: 18px; height: 14px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 17px; } @media only screen and (min-width: 840px) { .hero .wrap .content .text-box { margin: 0 auto; } } @media only screen and (min-width: 360px) { .text-image-cols .wrap .cols .col .content h2 { font-size: 2.454375rem; } } /*# sourceMappingURL=mobile.css.map */