/* ###### ###### ######### ######### ########### ########### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ######### ########### ########### ######### ######### ###### ###### Studio TOMIS - tomis.eu */ /* Set the global compass vars.*/ /* Import the normalize plugin*/ /*! normalize.css v3.0.0 | MIT License | git.io/normalize */ /*! normalize.css v3.0.0 | HTML5 Display Definitions | MIT License | git.io/normalize */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } /*! normalize.css v3.0.0 | Base | MIT License | git.io/normalize */ html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } /*! normalize.css v3.0.0 | Links | MIT License | git.io/normalize */ a { background: transparent; } a:active, a:hover { outline: 0; } /*! normalize.css v3.0.0 | Typography | MIT License | git.io/normalize */ abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /*! normalize.css v3.0.0 | Embedded Content | MIT License | git.io/normalize */ img { border: 0; } svg:not(:root) { overflow: hidden; } /*! normalize.css v3.0.0 | Figures | MIT License | git.io/normalize */ figure { margin: 1em 40px; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /*! normalize.css v3.0.0 | Forms | MIT License | git.io/normalize */ button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } /*! normalize.css v3.0.0 | Tables | MIT License | git.io/normalize */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } @-webkit-keyframes an-rotate { 100% { -webkit-transform: rotate(360deg); } } @keyframes an-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg); } } @-webkit-keyframes ripple { /*scale the element to 250% to safely cover the entire link and fade it out*/ 100% { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(2.5); transform: translate(-50%, -50%) scale(2.5); } } @keyframes ripple { /*scale the element to 250% to safely cover the entire link and fade it out*/ 100% { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(2.5); transform: translate(-50%, -50%) scale(2.5); } } @-webkit-keyframes fade-in { 0% { opacity: 0; -moz-transform: translateY(3rem); -ms-transform: translateY(3rem); -webkit-transform: translateY(3rem); transform: translateY(3rem); } 100% { opacity: 1; -moz-transform: translateY(0rem); -ms-transform: translateY(0rem); -webkit-transform: translateY(0rem); transform: translateY(0rem); } } @keyframes fade-in { 0% { opacity: 0; -moz-transform: translateY(3rem); -ms-transform: translateY(3rem); -webkit-transform: translateY(3rem); transform: translateY(3rem); } 100% { opacity: 1; -moz-transform: translateY(0rem); -ms-transform: translateY(0rem); -webkit-transform: translateY(0rem); transform: translateY(0rem); } } @-moz-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes pulse { 0% { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(0.8, 0.8, 1); } 100% { transform: scale3d(1, 1, 1); } } @-webkit-keyframes pulse { 0% { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(0.8, 0.8, 1); } 100% { transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(0.8, 0.8, 1); } 100% { transform: scale3d(1, 1, 1); } } @-moz-keyframes slide { 0% { transform: scale(1, 1); transform-origin: left; } 50% { transform: scale(0, 1); } 51% { transform: scale(0, 1); transform-origin: right; } 100% { transform: scale(1, 1); } } @-webkit-keyframes slide { 0% { transform: scale(1, 1); transform-origin: left; } 50% { transform: scale(0, 1); } 51% { transform: scale(0, 1); transform-origin: right; } 100% { transform: scale(1, 1); } } @keyframes slide { 0% { transform: scale(1, 1); transform-origin: left; } 50% { transform: scale(0, 1); } 51% { transform: scale(0, 1); transform-origin: right; } 100% { transform: scale(1, 1); } } @-webkit-keyframes scroll { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 80%,100% { -webkit-transform: translateY(1rem); transform: translateY(1rem); opacity: 0; } } @keyframes scroll { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 80%,100% { -webkit-transform: translateY(1rem); transform: translateY(1rem); opacity: 0; } } @keyframes slide-left { 0% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); -moz-transform-origin: right 50%; -ms-transform-origin: right 50%; -webkit-transform-origin: right 50%; transform-origin: right 50%; } 50% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); -moz-transform-origin: right 50%; -ms-transform-origin: right 50%; -webkit-transform-origin: right 50%; transform-origin: right 50%; } 51% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); -moz-transform-origin: left 50%; -ms-transform-origin: left 50%; -webkit-transform-origin: left 50%; transform-origin: left 50%; } 100% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); -moz-transform-origin: left 50%; -ms-transform-origin: left 50%; -webkit-transform-origin: left 50%; transform-origin: left 50%; } } @keyframes slide-right { 0% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); -moz-transform-origin: left 50%; -ms-transform-origin: left 50%; -webkit-transform-origin: left 50%; transform-origin: left 50%; } 50% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); -moz-transform-origin: left 50%; -ms-transform-origin: left 50%; -webkit-transform-origin: left 50%; transform-origin: left 50%; } 51% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); -moz-transform-origin: right 50%; -ms-transform-origin: right 50%; -webkit-transform-origin: right 50%; transform-origin: right 50%; } 100% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); -moz-transform-origin: right 50%; -ms-transform-origin: right 50%; -webkit-transform-origin: right 50%; transform-origin: right 50%; } } * { margin: 0; padding: 0; box-sizing: border-box; } body, select, input, textarea { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; font-size: 1.6rem; font-family: "omnes-pro", sans-serif; color: #000000; background-color: #ffffff; } html { font-size: 62.5%; position: relative; min-height: 100%; } @media (max-width: 960px) { html { font-size: 58%; } } @media (max-width: 768px) { html { font-size: 62.5%; } } html.fixed { height: 100%; } html.fixed body { height: 100%; width: 100%; position: fixed; } html, body { min-height: 100%; -webkit-overflow-scrolling: touch; } .visually-hidden, #wrap_website { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; } .width, div[class^="container"], .subnav { max-width: 1104px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: max-width 0.3s; transition: max-width 0.3s; } @media (max-width: 1280px) { .width, div[class^="container"], .subnav { max-width: auto; width: calc(100% - (16px * 6)); } } @media (max-width: 960px) { .width, div[class^="container"], .subnav { max-width: 736px; } } @media (max-width: 768px) { .width, div[class^="container"], .subnav { max-width: auto; width: calc(100% - (16px * 2)); } } .width--small, div[class^="container"][class$="--small"] { max-width: 776px; } @media (max-width: 768px) { .width--small, div[class^="container"][class$="--small"] { max-width: auto; width: calc(100% - (16px * 2)); } } .container, div[class^="container"], div[class^="container"][class$="--small"], div[class^="container"][class$="full-width"] { position: relative; margin: 0 auto; height: 100%; box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.12); background-color: #ffffff; } .home .container, .home div[class^="container"], header .container, header div[class^="container"], header div[class^="container"][class$="--small"], header div[class^="container"][class$="full-width"], .http404 .container, .http404 div[class^="container"] { box-shadow: none; background-color: transparent; } div[class^="container"] aside { display: none; } @media (min-width: 1335px) { div[class^="container"] aside { display: block; } } @media (min-width: 961px) { div[class^="container"][class$="--small"] aside { display: block; } } @media (max-width: 960px) { div[class^="container"][class$="--small"] aside { display: none; } } div[class^="container"][class$="full-width"] { max-width: 100%; width: auto; padding: 0; } div[class$="--center"] { text-align: center; } .container--small + .container, .container--small + div[class^="container"] { margin-top: 24px; } .container + .container--small, div[class^="container"] + .container--small { margin-top: 24px; } .wrapper { position: relative; margin: 0 auto; padding: 7rem 0 8rem; } .inner__wrapper, .image__wrapper, .video__wrapper-single, .video__row { padding: 7.2rem 8.8rem 9.6rem; -webkit-transition: padding 0.3s; transition: padding 0.3s; } @media (max-width: 960px) { .inner__wrapper, .image__wrapper, .video__wrapper-single, .video__row { padding: 4.4rem 4.8rem 5.4rem; } } @media (max-width: 768px) { .inner__wrapper, .image__wrapper, .video__wrapper-single, .video__row { padding: 2.6rem 2.6rem 3.2rem; } } @media (max-width: 320px) { .inner__wrapper, .image__wrapper, .video__wrapper-single, .video__row { padding: 1.6rem 1.6rem 2.4rem; } } .inner__wrapper--small { padding: 4.8rem 5.8rem 5.8rem; } @media (max-width: 768px) { .inner__wrapper--small { padding: 3.6rem 4.0rem 4.0rem; } } @media (max-width: 320px) { .inner__wrapper--small { padding: 2.4rem 2.4rem 3.2rem; } } .image__wrapper, .video__wrapper-single { padding-top: 4.4rem; padding-bottom: 5.2rem; } .inview { opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } .not-inview { opacity: 0; -moz-transform: translateY(2rem); -ms-transform: translateY(2rem); -webkit-transform: translateY(2rem); transform: translateY(2rem); } .orange-bg, .informatie::after, .inschrijven::after, .informatie-bg, .inschrijven-bg, .load-screen { background: #ff7914; background: -moz-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fea360), color-stop(100%, #ff7914)); background: -webkit-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -o-linear-gradient(top, #fea360 0%, #ff7914 100%); background: linear-gradient(to bottom, #fea360 0%, #ff7914 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fea360, endColorstr=#ff7914); } .red-bg, .inspiratie::after, .inspiratie-bg { background: #ed553a; background: -moz-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1651d), color-stop(100%, #ed553a)); background: -webkit-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: -o-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: linear-gradient(to bottom, #f1651d 0%, #ed553a 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f1651d, endColorstr=#ed553a); } .blue-bg, .organisatie::after, .organisatie-bg { background: #36abce; background: -moz-linear-gradient(top, #66d3ed 0%, #36abce 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66d3ed), color-stop(100%, #36abce)); background: -webkit-linear-gradient(top, #66d3ed 0%, #36abce 100%); background: -o-linear-gradient(top, #66d3ed 0%, #36abce 100%); background: linear-gradient(to bottom, #66d3ed 0%, #36abce 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#66d3ed, endColorstr=#36abce); } .informatie, .inschrijven { background: #ff7914; background: -moz-linear-gradient(top, #fea360 0%, #ff7914 100vh); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fea360), color-stop(100vh, #ff7914)); background: -webkit-linear-gradient(top, #fea360 0%, #ff7914 100vh); background: -o-linear-gradient(top, #fea360 0%, #ff7914 100vh); background: linear-gradient(to bottom, #fea360 0%, #ff7914 100vh); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fea360, endColorstr=#ff7914); } html.informatie, html.inschrijven { background: #fea360; background: -moz-linear-gradient(top, #ff7914 0%, #fea360 100vh); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff7914), color-stop(100vh, #fea360)); background: -webkit-linear-gradient(top, #ff7914 0%, #fea360 100vh); background: -o-linear-gradient(top, #ff7914 0%, #fea360 100vh); background: linear-gradient(to bottom, #ff7914 0%, #fea360 100vh); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ff7914, endColorstr=#fea360); } .inspiratie { background: #ed553a; background: -moz-linear-gradient(top, #f1651d 0%, #ed553a 100vh); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1651d), color-stop(100vh, #ed553a)); background: -webkit-linear-gradient(top, #f1651d 0%, #ed553a 100vh); background: -o-linear-gradient(top, #f1651d 0%, #ed553a 100vh); background: linear-gradient(to bottom, #f1651d 0%, #ed553a 100vh); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f1651d, endColorstr=#ed553a); } html.inspiratie { background: #f1651d; background: -moz-linear-gradient(top, #ed553a 0%, #f1651d 100vh); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ed553a), color-stop(100vh, #f1651d)); background: -webkit-linear-gradient(top, #ed553a 0%, #f1651d 100vh); background: -o-linear-gradient(top, #ed553a 0%, #f1651d 100vh); background: linear-gradient(to bottom, #ed553a 0%, #f1651d 100vh); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ed553a, endColorstr=#f1651d); } .organisatie { background: #36abce; background: -moz-linear-gradient(top, #66d3ed 0%, #36abce 100vh); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66d3ed), color-stop(100vh, #36abce)); background: -webkit-linear-gradient(top, #66d3ed 0%, #36abce 100vh); background: -o-linear-gradient(top, #66d3ed 0%, #36abce 100vh); background: linear-gradient(to bottom, #66d3ed 0%, #36abce 100vh); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#66d3ed, endColorstr=#36abce); } html.organisatie { background: #66d3ed; background: -moz-linear-gradient(top, #36abce 0%, #66d3ed 100vh); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #36abce), color-stop(100vh, #66d3ed)); background: -webkit-linear-gradient(top, #36abce 0%, #66d3ed 100vh); background: -o-linear-gradient(top, #36abce 0%, #66d3ed 100vh); background: linear-gradient(to bottom, #36abce 0%, #66d3ed 100vh); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#36abce, endColorstr=#66d3ed); } .white-bg { background-color: #ffffff; } .row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; } .row + .row { margin-top: 24px; } @media (max-width: 768px) { .row + .row { margin-top: 2rem; } } .row:not(.video__row) + .video__row { margin-top: 80px; } @media (max-width: 960px) { .row:not(.video__row) + .video__row { margin-top: 48px; } } @media (max-width: 768px) { .row:not(.video__row) + .video__row { margin-top: 32px; } } @media (max-width: 768px) { .row { -webkit-flex-flow: column wrap; -moz-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } } @media (max-width: 960px) { .row:nth-child(2) { -webkit-flex-flow: column wrap; -moz-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } .row:nth-child(2) .col-1-3, .row:nth-child(2) .col-2-3 { width: 100%; } } .row.center { -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; } @media (max-width: 768px) { .row.center { -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: left; -moz-justify-content: left; -ms-justify-content: left; justify-content: left; -ms-flex-pack: left; } } .col-1, .col-1-h, .col-1-w { width: 100%; } .col-1-2 { width: calc((100% / 2) - (2.4rem / 2)); } @media (max-width: 768px) { .col-1-2 { width: 100%; } .row .col-1-2 + .col-1-2 { margin-top: 2rem; } .col-1-2.min-m + .col-1-2 { margin-top: 0; } } .row .col-1-2 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; align-items: stretch; } .col-1-3 { width: calc((100% / 3) - ((2.4rem * 2) / 3)); } @media (max-width: 768px) { .col-1-3 { width: 100%; } } .row .col-1-3 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; align-items: stretch; } .col-2-3 { width: calc(((100% / 3) * 2) - ((2.4rem * 2) / 3) + 0.8rem); } @media (max-width: 960px) { .col-2-3 { width: 100%; } } .row .col-2-3 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; align-items: stretch; } @media (max-width: 530px) { .col-2-3 + .col-1-3 { width: 100%; } } @media (max-width: 768px) { .min-m { display: none !important; } } @media (min-width: 769px) { .max-s { display: none !important; } } .logo--diap svg path, .load-screen #logo svg path, header.nav-open .logo svg path, header.animating .logo svg path, .home header.nav-open .logo svg path, .home header.animating .logo svg path, .informatie header .logo svg path, .inspiratie header .logo svg path, .organisatie header .logo svg path, .inschrijven header .logo svg path, .logo--diap svg g, .load-screen #logo svg g, header.nav-open .logo svg g, header.animating .logo svg g, .home header.nav-open .logo svg g, .home header.animating .logo svg g, .informatie header .logo svg g, .inspiratie header .logo svg g, .organisatie header .logo svg g, .inschrijven header .logo svg g, .logo--diap svg polygon, .load-screen #logo svg polygon, header.nav-open .logo svg polygon, header.animating .logo svg polygon, .home header.nav-open .logo svg polygon, .home header.animating .logo svg polygon, .informatie header .logo svg polygon, .inspiratie header .logo svg polygon, .organisatie header .logo svg polygon, .inschrijven header .logo svg polygon { -moz-transition-delay: 0; -o-transition-delay: 0; -webkit-transition-delay: 0; transition-delay: 0; } .logo--diap svg #crown_top .orange-1, .load-screen #logo svg #crown_top .orange-1, header.nav-open .logo svg #crown_top .orange-1, header.animating .logo svg #crown_top .orange-1, .informatie header .logo svg #crown_top .orange-1, .inspiratie header .logo svg #crown_top .orange-1, .organisatie header .logo svg #crown_top .orange-1, .inschrijven header .logo svg #crown_top .orange-1 { opacity: .8; fill: #ffffff; } .logo--diap svg #crown_bottom .orange-2, .load-screen #logo svg #crown_bottom .orange-2, header.nav-open .logo svg #crown_bottom .orange-2, header.animating .logo svg #crown_bottom .orange-2, .informatie header .logo svg #crown_bottom .orange-2, .inspiratie header .logo svg #crown_bottom .orange-2, .organisatie header .logo svg #crown_bottom .orange-2, .inschrijven header .logo svg #crown_bottom .orange-2, .logo--diap svg #crown_bottom .orange-1, .load-screen #logo svg #crown_bottom .orange-1, header.nav-open .logo svg #crown_bottom .orange-1, header.animating .logo svg #crown_bottom .orange-1, .informatie header .logo svg #crown_bottom .orange-1, .inspiratie header .logo svg #crown_bottom .orange-1, .organisatie header .logo svg #crown_bottom .orange-1, .inschrijven header .logo svg #crown_bottom .orange-1, .logo--diap svg #scarf .orange-2, .load-screen #logo svg #scarf .orange-2, header.nav-open .logo svg #scarf .orange-2, header.animating .logo svg #scarf .orange-2, .informatie header .logo svg #scarf .orange-2, .inspiratie header .logo svg #scarf .orange-2, .organisatie header .logo svg #scarf .orange-2, .inschrijven header .logo svg #scarf .orange-2, .logo--diap svg #scarf .orange-1, .load-screen #logo svg #scarf .orange-1, header.nav-open .logo svg #scarf .orange-1, header.animating .logo svg #scarf .orange-1, .informatie header .logo svg #scarf .orange-1, .inspiratie header .logo svg #scarf .orange-1, .organisatie header .logo svg #scarf .orange-1, .inschrijven header .logo svg #scarf .orange-1 { fill: #ffffff; } .logo--diap svg #hair, .load-screen #logo svg #hair, header.nav-open .logo svg #hair, header.animating .logo svg #hair, .informatie header .logo svg #hair, .inspiratie header .logo svg #hair, .organisatie header .logo svg #hair, .inschrijven header .logo svg #hair { fill: #f39202; } html:not(.touchevents) .cursor { position: fixed; pointer-events: none; border-radius: 50%; top: -2.5rem; left: -2.5rem; height: 5rem; width: 5rem; z-index: 99999; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.2s cubic-bezier(0.47, 0, 0.745, 0.715); transition: opacity 0.2s cubic-bezier(0.47, 0, 0.745, 0.715); } @media (max-width: 768px) { html:not(.touchevents) .cursor { display: none; } } html:not(.touchevents) .cursor .circle-in { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; -moz-transform: scale(0.2, 0.2); -ms-transform: scale(0.2, 0.2); -webkit-transform: scale(0.2, 0.2); transform: scale(0.2, 0.2); -moz-transform-origin: center center 50%; -ms-transform-origin: center center 50%; -webkit-transform-origin: center center 50%; transform-origin: center center 50%; box-shadow: inset 0 0 0 5rem; color: #000000; -webkit-transition: all 0.2s cubic-bezier(0.47, 0, 0.745, 0.715); transition: all 0.2s cubic-bezier(0.47, 0, 0.745, 0.715); will-change: transform; } html:not(.touchevents) .cursor[data-expand=true] .circle-in { box-shadow: inset 0 0 0 1rem; -moz-transform: scale(0.29, 0.29); -ms-transform: scale(0.29, 0.29); -webkit-transform: scale(0.29, 0.29); transform: scale(0.29, 0.29); -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } html:not(.touchevents) .cursor[data-link=true] .circle-in { box-shadow: inset 0 0 0 1rem; -moz-transform: scale(0.29, 0.29); -ms-transform: scale(0.29, 0.29); -webkit-transform: scale(0.29, 0.29); transform: scale(0.29, 0.29); -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } html:not(.touchevents) .cursor[data-light=true] .circle-in { color: #ffffff; } html:not(.touchevents) .cursor.cross .circle-in { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); color: transparent; } html:not(.touchevents) .cursor.cross div::before, html:not(.touchevents) .cursor.cross div::after { content: ''; position: absolute; top: calc(50% - .1rem); left: 20%; width: 60%; height: .2rem; background-color: #ffffff; border-radius: .1rem; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } html:not(.touchevents) .cursor.cross div::after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } html:not(.touchevents) .cursor.hide { opacity: 0; } section, header, footer { position: relative; } .informatie section, .inspiratie section, .organisatie section { background-color: #ffffff; overflow: hidden; } .informatie section:nth-of-type(2n), .inspiratie section:nth-of-type(2n), .organisatie section:nth-of-type(2n) { background-color: rgba(243, 146, 2, 0.1); } .informatie section.logos, .inspiratie section.logos, .organisatie section.logos { background-color: #FC852B; } main { padding-top: 16rem; padding-bottom: 16rem; } @media (max-width: 768px) { main { padding-top: 10.4rem; } } @media (max-width: 320px) { main { padding-top: 8.4rem; } } .home main { padding-top: 0; padding-bottom: 0; } h1, h2, h3, h4, h5, h6 { font-family: "georgia", serif; margin: 0; } .informatie h1, .informatie h2, .informatie h3, .informatie h4, .informatie h5, .informatie h6 { color: #f39202; } .inspiratie h1, .inspiratie h2, .inspiratie h3, .inspiratie h4, .inspiratie h5, .inspiratie h6 { color: #ed6809; } .organisatie h1, .organisatie h2, .organisatie h3, .organisatie h4, .organisatie h5, .organisatie h6 { color: #36abce; } h4 { font-family: "omnes-pro", sans-serif; font-weight: 600; font-size: 20px; font-size: 2rem; line-height: 24px; line-height: 2.4rem; } h3 { font-size: 30px; font-size: 3rem; line-height: 34px; line-height: 3.4rem; } @media (max-width: 960px) { h3 { font-size: 20px; font-size: 2rem; line-height: 24px; line-height: 2.4rem; } } @media (max-width: 320px) { h3 { font-size: 18px; font-size: 1.8rem; line-height: 22px; line-height: 2.2rem; } } h2, .h2 { font-size: 29px; font-size: 2.9rem; line-height: 33px; line-height: 3.3rem; } .home h2, .home .h2 { color: #ed6809; } @media (max-width: 768px) { h2, .h2 { font-size: 26px; font-size: 2.6rem; line-height: 30px; line-height: 3rem; } } @media (max-width: 320px) { h2, .h2 { font-size: 22px; font-size: 2.2rem; line-height: 26px; line-height: 2.6rem; } } h1, .h1 { font-size: 35px; font-size: 3.5rem; line-height: 40px; line-height: 4rem; } h1.large, .h1.large { font-size: 56px; font-size: 5.6rem; line-height: 54px; line-height: 5.4rem; } @media (max-width: 768px) { h1, .h1 { font-size: 30px; font-size: 3rem; line-height: 36px; line-height: 3.6rem; } h1.large, .h1.large { font-size: 34px; font-size: 3.4rem; line-height: 38px; line-height: 3.8rem; } } @media (max-width: 320px) { h1, .h1 { font-size: 24px; font-size: 2.4rem; line-height: 30px; line-height: 3rem; } h1.large, .h1.large { font-size: 30px; font-size: 3rem; line-height: 36px; line-height: 3.6rem; } } img.align_right { float: right; margin-left: 4rem; } .datetime { margin-top: 3.2rem; margin-bottom: 2rem; text-transform: uppercase; letter-spacing: 0.03rem; font-size: 18px; font-size: 1.8rem; line-height: 18px; line-height: 1.8rem; color: black; font-weight: 600; } @media (max-width: 530px) { .datetime { font-size: 16px; font-size: 1.6rem; line-height: 16px; line-height: 1.6rem; } } strong { font-weight: 600; } p { letter-spacing: 0.02rem; font-size: 17px; font-size: 1.7rem; line-height: 24px; line-height: 2.4rem; } p.intro { font-size: 20px; font-size: 2rem; line-height: 29px; line-height: 2.9rem; } @media (max-width: 530px) { p.intro { font-size: 18px; font-size: 1.8rem; line-height: 27px; line-height: 2.7rem; } } .col-1-3 p.intro { padding-right: 10%; padding-bottom: 6rem; } .col-1-3 p.intro + .btn { margin: -3rem 0 6rem; } @media (max-width: 768px) { .col-1-3 p.intro + .btn { margin: -3rem 0 32px; } } .col-1-3 p.intro + ul.button-list { list-style: none; margin: -3rem 0 6rem; padding: 0; } .col-1-3 p.intro + ul.button-list .btn { margin: 0rem 0rem 1.5rem; } @media (max-width: 960px) { .col-1-3 p.intro { padding-right: 0; } } @media (max-width: 768px) { p { font-size: 15px; font-size: 1.5rem; line-height: 23px; line-height: 2.3rem; } } a { color: #f39202; } @media (min-width: 769px) { a:hover, a:focus { color: #ed6809; } } ul { list-style-position: inside; } p + p, h4 + p, h4 + ul, ul + p { margin-top: 2.4rem; } h1 + p, h3 + p, h3 + .calender__items, h2 + .video__wrapper { margin-top: 3.2rem; } p + .video, p + .image, P + h2, p + .team__wrapper, h2 + .row, h2 + ul, .intro + ul { margin-top: 4.4rem; } @media (max-width: 768px) { p + .video, p + .image, P + h2, p + .team__wrapper, h2 + .row, h2 + ul, .intro + ul { margin-top: 3.2rem; } } .row + h2 { margin-top: 4.4rem; } p + .btn, ul + .btn, h1 + .btn { margin-top: 4rem; } @media (max-width: 768px) { p + .btn, ul + .btn, h1 + .btn { margin-top: 3.2rem; } } .video + p, .image + p, p + blockquote, .video + blockquote, .image + blockquote { margin-top: 5.2rem; } .btn { display: inline-block; margin-right: 16px; text-decoration: none; font-size: 18px; font-size: 1.8rem; line-height: 42px; line-height: 4.2rem; color: #f39202; -webkit-transition: color 0.2s cubic-bezier(0.75, 0, 0.75, 1); transition: color 0.2s cubic-bezier(0.75, 0, 0.75, 1); } @media (max-width: 768px) { .btn + .btn { margin-top: 1rem; } } @media (min-width: 769px) { .btn.large { font-size: 25px; font-size: 2.5rem; line-height: 50px; line-height: 5rem; } } .btn a { text-decoration: none; } .inspiratie .btn, .inspiratie .btn a { color: #ed6809; } @media (max-width: 320px) { .btn.tertiair { font-size: 16px; font-size: 1.6rem; line-height: 42px; line-height: 4.2rem; } } .btn.primair, .btn.secundair, .btn.white { position: relative; z-index: 1; display: inline-block; height: 4.2rem; padding: 0 2.4rem; } @media (max-width: 768px) { .btn.primair, .btn.secundair, .btn.white { font-size: 18px; font-size: 1.8rem; line-height: 20px; line-height: 2rem; padding: 0.8rem 16px; height: auto; } } @media (min-width: 769px) { .btn.primair.large, .btn.secundair.large, .btn.white.large { height: 5.2rem; padding: 0 2.4rem; } } .btn.primair.in-left::after, .btn.secundair.in-left::after, .btn.white.in-left::after { -moz-transform-origin: left 50%; -ms-transform-origin: left 50%; -webkit-transform-origin: left 50%; transform-origin: left 50%; } .btn.primair.in-right::after, .btn.secundair.in-right::after, .btn.white.in-right::after { -moz-transform-origin: right 50%; -ms-transform-origin: right 50%; -webkit-transform-origin: right 50%; transform-origin: right 50%; } @media (min-width: 769px) { .btn.primair::after, .btn.secundair::after, .btn.white::after { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: #f39202; -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: transform 0.25s cubic-bezier(0.75, 0, 0.75, 1); transition: transform 0.25s cubic-bezier(0.75, 0, 0.75, 1); } .btn.primair:hover, .btn.secundair:hover, .btn.white:hover { color: rgba(255, 255, 255, 0.9); } .btn.primair:hover::after, .btn.secundair:hover::after, .btn.white:hover::after { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } } .btn.primair.secundair, .btn.secundair.secundair, .btn.white.secundair { border: 1px solid #f39202; } .btn.primair.secundair:not(.light)::after, .btn.secundair.secundair:not(.light)::after, .btn.white.secundair:not(.light)::after { background: #ff7914; background: -moz-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fea360), color-stop(100%, #ff7914)); background: -webkit-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -o-linear-gradient(top, #fea360 0%, #ff7914 100%); background: linear-gradient(to bottom, #fea360 0%, #ff7914 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fea360, endColorstr=#ff7914); } .btn.primair.light, .btn.secundair.light, .btn.white.light { border: 1px solid #ffffff; color: #ffffff; } .btn.primair.light::after, .btn.secundair.light::after, .btn.white.light::after { background-color: #ffffff; } @media (min-width: 769px) { .case .btn.primair.light:hover, .quote.red .btn.primair.light:hover, .red .btn.primair.light:hover, .case .btn.secundair.light:hover, .quote.red .btn.secundair.light:hover, .red .btn.secundair.light:hover, .case .btn.white.light:hover, .quote.red .btn.white.light:hover, .red .btn.white.light:hover { color: #ed553a; } .home__calender .btn.primair.light:hover, .orange .btn.primair.light:hover, .mCCF__link .btn.primair.light:hover, .home__calender .btn.secundair.light:hover, .orange .btn.secundair.light:hover, .mCCF__link .btn.secundair.light:hover, .home__calender .btn.white.light:hover, .orange .btn.white.light:hover, .mCCF__link .btn.white.light:hover { color: #f39202; } .blue .btn.primair.light:hover, .blue .btn.secundair.light:hover, .blue .btn.white.light:hover { color: #36abce; } } .btn.primair { background: #ff7914; background: -moz-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fea360), color-stop(100%, #ff7914)); background: -webkit-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -o-linear-gradient(top, #fea360 0%, #ff7914 100%); background: linear-gradient(to bottom, #fea360 0%, #ff7914 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fea360, endColorstr=#ff7914); background-color: #f39202; color: #ffffff; } .btn.primair::after { background-color: #ffffff; } @media (min-width: 769px) { .btn.primair:hover { color: #f39202; } } .home__news .btn.primair { color: #ffffff; } .home__news .btn.primair::after { background: #ed553a; background: -moz-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1651d), color-stop(100%, #ed553a)); background: -webkit-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: -o-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: linear-gradient(to bottom, #f1651d 0%, #ed553a 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f1651d, endColorstr=#ed553a); } .btn.white { background-color: #ffffff; color: #ff7914; } .btn.white::after { background: #ff7914; background: -moz-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fea360), color-stop(100%, #ff7914)); background: -webkit-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -o-linear-gradient(top, #fea360 0%, #ff7914 100%); background: linear-gradient(to bottom, #fea360 0%, #ff7914 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fea360, endColorstr=#ff7914); color: #ffffff; } blockquote { position: relative; padding: 3.6rem 0 4.8rem; color: #f39202; } blockquote p { font-size: 30px; font-size: 3rem; line-height: 36px; line-height: 3.6rem; } blockquote cite { display: inline-block; font-size: 16px; font-size: 1.6rem; line-height: 20px; line-height: 2rem; font-style: normal; } blockquote::before, blockquote::after { content: ""; background-color: #f39202; position: absolute; height: 1px; width: 12rem; } blockquote::before { top: 0; } blockquote::after { bottom: 0; } .video__group-title { display: block; margin-bottom: 0.6rem; opacity: 0.6; } .mCCF { font-size: initial; margin: 0; padding: 24px; position: fixed; z-index: 9999; } .mCCF.mCCF--bottom { left: auto; right: 2rem; bottom: 2rem; max-width: 45rem; box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.12); } @media (max-width: 768px) { .mCCF.mCCF--bottom { width: 100%; max-width: none; right: 0; bottom: 0; box-shadow: 0 -0.3rem 0.6rem rgba(0, 0, 0, 0.12); } } .mCCF .mCCF__message { color: #000; font-size: 15px; font-size: 1.5rem; line-height: 20px; line-height: 2rem; letter-spacing: .02rem; margin: 0; } .mCCF .mCCF__message::before { content: 'Cookies'; display: block; font-family: "georgia", serif; font-weight: bold; font-size: 24px; font-size: 2.4rem; line-height: 24px; line-height: 2.4rem; margin-bottom: 1.2rem; } .mCCF .mCCF__accept { margin-top: 1rem; border: 1px solid #f39202; } .mCCF.mCCF--light { background: #ffffff; color: #000; } .Inputfields { list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; } .Inputfields .Inputfield { position: relative; width: calc(50% - (16px / 2)); margin-bottom: 16px; } .Inputfields .Inputfield i { display: none; } .Inputfields .Inputfield input { margin-top: .5rem; border: 0; width: 100%; height: 4rem; font-size: 16px; font-size: 1.6rem; line-height: 40px; line-height: 4rem; padding: 0 16px; border: 1px solid white; } .Inputfields .Inputfield textarea { margin-top: .5rem; border: 0; width: 100%; padding: 16px; font-size: 16px; font-size: 1.6rem; line-height: 20px; line-height: 2rem; border: 1px solid white; } .Inputfields .Inputfield button { border: none; } .Inputfields .Inputfield.InputfieldStateError { padding-bottom: 2.5rem; } .Inputfields .Inputfield.InputfieldStateError span { position: absolute; bottom: 0; color: #ed553a; font-size: 16px; font-size: 1.6rem; line-height: 14px; line-height: 1.4rem; } .Inputfields .Inputfield.InputfieldStateError input, .Inputfields .Inputfield.InputfieldStateError textarea { border-color: #ed553a; } .Inputfields .InputfieldTextarea { width: 100%; } .iframe__container { position: relative; overflow: hidden; padding-top: 100%; } @media (max-width: 768px) { .iframe__container { padding-top: 150%; -webkit-overflow-scrolling: touch; overflow-y: scroll; } } .iframe__container .responsive__iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .background { line-height: 0; position: relative; overflow: hidden; } .background::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 60%; opacity: 0.5; background: black; background: -moz-linear-gradient(top, transparent 0%, black 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, black)); background: -webkit-linear-gradient(top, transparent 0%, black 100%); background: -o-linear-gradient(top, transparent 0%, black 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=transparent, endColorstr=black); } @media (max-width: 768px) { .background::after { height: 70%; } } .background img { width: 100%; -webkit-transition: 0.4s ease-out; transition: 0.4s ease-out; } .image .background::after, .news__item.small .background::after { display: none; } a .background:hover img, .video .background:hover img { -moz-transform: scale(1.03, 1.03); -ms-transform: scale(1.03, 1.03); -webkit-transform: scale(1.03, 1.03); transform: scale(1.03, 1.03); } .item .background:after { opacity: 0.35; } .logos { margin-top: 24px; color: #ffffff; } .logos h3 { color: #ffffff; } .logo__wrapper { margin-top: 4rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .logo__wrapper .logo { position: relative; background-color: #ffffff; width: calc((100% / 3) - ((2.4rem * 2) / 3)); margin-bottom: 2.4rem; margin-right: 2.4rem; height: 12rem; } @media (max-width: 768px) { .logo__wrapper .logo { width: calc((100% / 2) - (2.4rem / 2)); } } .logo__wrapper .logo img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: block; max-width: 80%; max-height: 80%; width: auto; height: auto; margin: 0 auto; } @media (min-width: 769px) { .logo__wrapper .logo:nth-child(3n + 3) { margin-right: 0; } } @media (max-width: 768px) { .logo__wrapper .logo { height: 8rem; } .logo__wrapper .logo:nth-child(2n + 2) { margin-right: 0; } } .main { width: 100%; } @media (min-width: 961px) and (max-width: 1280px) { .main { padding-left: 2.3rem; height: 100%; min-height: 44rem; } .home .main { padding-left: 0; } .main .item, .main .video { height: 100%; } .main .item .background, .main .video .background { height: 100%; } .main .item .background img, .main .video .background img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); min-height: 100%; min-width: 100%; width: auto; } } @media (min-width: 1281px) { .main .item, .main .video { height: 0; padding-bottom: 74.5762711864%; } } .theme { position: relative; overflow: hidden; } .theme__content { position: absolute; width: 100%; bottom: 0; padding: 2rem 2rem 0; z-index: 1; } @media (max-width: 768px) { .theme__content { padding: 1.6rem 1.6rem 0; } } .theme h3 { margin-bottom: 2rem; color: #ffffff; } .theme .background:after { display: none; } .item { position: relative; overflow: hidden; } .item__content { position: absolute; width: 100%; bottom: 0; padding: 2rem 2rem 0; z-index: 1; -moz-transform: translateY(calc(100% - 7.4rem)); -ms-transform: translateY(calc(100% - 7.4rem)); -webkit-transform: translateY(calc(100% - 7.4rem)); transform: translateY(calc(100% - 7.4rem)); -webkit-transition: all 0.5s cubic-bezier(0.7, -0.2, 0.8, 1) 0s; transition: all 0.5s cubic-bezier(0.7, -0.2, 0.8, 1) 0s; } @media (max-width: 960px) { .item__content { -moz-transform: translateY(calc(100% - 6.4rem)); -ms-transform: translateY(calc(100% - 6.4rem)); -webkit-transform: translateY(calc(100% - 6.4rem)); transform: translateY(calc(100% - 6.4rem)); } } @media (max-width: 768px) { .item__content { padding: 1.6rem 1.6rem 0; -moz-transform: translateY(calc(100% - 5.6rem)); -ms-transform: translateY(calc(100% - 5.6rem)); -webkit-transform: translateY(calc(100% - 5.6rem)); transform: translateY(calc(100% - 5.6rem)); } } @media (max-width: 320px) { .item__content { padding: 1rem 1rem 0; } } .item__content::before { content: ""; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; z-index: -1; -moz-transform: scale(1, 0); -ms-transform: scale(1, 0); -webkit-transform: scale(1, 0); transform: scale(1, 0); -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transition: transform 0.4s cubic-bezier(0.7, -0.2, 0.8, 1) 0.1s; transition: transform 0.4s cubic-bezier(0.7, -0.2, 0.8, 1) 0.1s; background-color: #ffffff; } .item h3 { margin-bottom: 2rem; color: #ffffff; -webkit-transition: all 0.2s 0.2s; transition: all 0.2s 0.2s; } @media (max-width: 768px) { .item h3 { margin-bottom: 1rem; } } .item__info { opacity: 0; -moz-transform: translateY(2rem); -ms-transform: translateY(2rem); -webkit-transform: translateY(2rem); transform: translateY(2rem); -moz-transform: scaleY(1.1); -ms-transform: scaleY(1.1); -webkit-transform: scaleY(1.1); transform: scaleY(1.1); -webkit-transition: all 0.3s 0s; transition: all 0.3s 0s; } @media (max-width: 768px) { .item__info p { display: none; } } .item__buttons { background-color: #ffffff; margin-top: 2.4rem; border-top: 1px solid #f1651d; font-size: 0; position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; } @media (max-width: 768px) { .item__buttons { margin-top: 16px; } } .item__buttons .share { margin-right: 0; text-transform: lowercase; } .item__buttons .share--expand { position: absolute; display: block; visibility: hidden; top: 0; right: 0; overflow: hidden; width: 0; background-color: #ffffff; -webkit-font-smoothing: subpixel-antialiased; -webkit-transition: visibility 0s 0.8s, width 0.4s 0.4s; transition: visibility 0s 0.8s, width 0.4s 0.4s; } .item__buttons .share--expand ul { min-width: 300px; } .item__buttons .share--expand ul li { float: left; margin-right: 2.4rem; display: inline-block; font-size: 17px; font-size: 1.7rem; line-height: 42px; line-height: 4.2rem; opacity: 0; -moz-transform: translateX(0.5rem); -ms-transform: translateX(0.5rem); -webkit-transform: translateX(0.5rem); transform: translateX(0.5rem); -webkit-transition: opacity 0.4s, transform 0.4s; transition: opacity 0.4s, transform 0.4s; } .item__buttons .share--expand ul li a { text-indent: -999; } .item__buttons .share--expand ul .close__icon { position: absolute; width: 2rem; height: 2rem; top: 1rem; right: 0; opacity: 0; -webkit-transition: opacity 0.4s 0.2s; transition: opacity 0.4s 0.2s; } .item__buttons .share--expand ul .close__icon .share--close { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; } .item__buttons .share--expand ul .close__icon .share--close::before, .item__buttons .share--expand ul .close__icon .share--close::after { content: ""; position: absolute; top: 0.9rem; width: 100%; height: 0.2rem; background-color: #ed553a; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .item__buttons .share--expand ul .close__icon .share--close::after { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .item__buttons .share--expand.visible { opacity: 1; visibility: visible; width: 100%; -webkit-transition: visibility 0s, width 0.3s; transition: visibility 0s, width 0.3s; } .item__buttons .share--expand.visible ul li { opacity: 1; -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: opacity 0.4s 0.3s, transform 0.4s 0.3s; transition: opacity 0.4s 0.3s, transform 0.4s 0.3s; } .item__buttons .share--expand.visible ul .close__icon { opacity: 1; -webkit-transition: opacity 0.4s 0.5s; transition: opacity 0.4s 0.5s; } .item:hover h3 { color: #000000; -moz-transition-delay: 0.35s; -o-transition-delay: 0.35s; -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } .item:hover .item__content { -moz-transform: translateY(0.5rem); -ms-transform: translateY(0.5rem); -webkit-transform: translateY(0.5rem); transform: translateY(0.5rem); -webkit-transition: all 0.4s cubic-bezier(0.7, 0, 0.5, 1.2) 0s; transition: all 0.4s cubic-bezier(0.7, 0, 0.5, 1.2) 0s; } .item:hover .item__content::before { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s; } .item:hover .item__info { opacity: 1; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); -moz-transform: translateY(0rem); -ms-transform: translateY(0rem); -webkit-transform: translateY(0rem); transform: translateY(0rem); -moz-transition-delay: 0.25s; -o-transition-delay: 0.25s; -webkit-transition-delay: 0.25s; transition-delay: 0.25s; } .video { position: relative; overflow: hidden; } .video__wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; } .video__wrapper .video { margin-bottom: 24px; } @media (max-width: 768px) { .video__wrapper .col-1-3 { width: calc((100% / 2) - (16px / 2)); } } .video__content { pointer-events: none; } .video__content.inside { position: absolute; width: 100%; height: 100%; bottom: 0; padding: 2rem; z-index: 1; } .video__content.inside h3 { position: absolute; left: 2rem; bottom: 2rem; color: #ffffff; -webkit-transition: all 0.2s 0.2s; transition: all 0.2s 0.2s; } .video__content.outside { padding: 1.2rem 0 0; } .video__content.outside h3 { font-size: 18px; font-size: 1.8rem; line-height: 24px; line-height: 2.4rem; } @media (max-width: 768px) { .video__content.outside h3 { font-family: "omnes-pro", sans-serif; font-weight: normal; font-size: 13px; font-size: 1.3rem; line-height: 13px; line-height: 1.3rem; } } .video h3 { color: #000000; -webkit-transition: all 0.2s 0.2s; transition: all 0.2s 0.2s; } .video:hover .play { opacity: 0.9; } .calender__inner { width: 100%; padding: 3.6rem; } .calender__wrapper { margin-top: 3.8rem; } .calender__wrapper hr { width: 100%; height: 0.1rem; border: 0; background-color: #f39202; margin: 16px 0 2rem; } .calender__row + .calender__month { margin-top: 6.6rem; } .calender__month { padding-left: 5rem; font-size: 24px; font-size: 2.4rem; line-height: 24px; line-height: 2.4rem; } .calender__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row no-wrap; -moz-flex-flow: row no-wrap; -ms-flex-flow: row no-wrap; flex-flow: row no-wrap; } .calender__item:nth-child(3n + 1) .no-image .calender__content { background: #ff7914; background: -moz-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fea360), color-stop(100%, #ff7914)); background: -webkit-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -o-linear-gradient(top, #fea360 0%, #ff7914 100%); background: linear-gradient(to bottom, #fea360 0%, #ff7914 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fea360, endColorstr=#ff7914); } .calender__item:nth-child(3n + 2) .no-image .calender__content { background: #36abce; background: -moz-linear-gradient(top, #66d3ed 0%, #36abce 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66d3ed), color-stop(100%, #36abce)); background: -webkit-linear-gradient(top, #66d3ed 0%, #36abce 100%); background: -o-linear-gradient(top, #66d3ed 0%, #36abce 100%); background: linear-gradient(to bottom, #66d3ed 0%, #36abce 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#66d3ed, endColorstr=#36abce); } .calender__item:nth-child(3n + 3) .no-image .calender__content { background: #ed553a; background: -moz-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1651d), color-stop(100%, #ed553a)); background: -webkit-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: -o-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: linear-gradient(to bottom, #f1651d 0%, #ed553a 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f1651d, endColorstr=#ed553a); } .calender__item + .calender__item { margin-top: 16px; } .home__calender .calender__item + .calender__item { margin-top: 32px; } .home__calender .calender__item { border-top: 1px solid #ffffff; padding-top: 0.6rem; } .calender__date { padding-top: 0.5rem; width: 5rem; -webkit-box-flex: 0 0 auto; -moz-box-flex: 0 0 auto; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @media (max-width: 768px) { .calender__date { width: 4rem; } } .calender__date span { display: block; color: #f39202; letter-spacing: 0.02rem; } .home__calender .calender__date span { color: #ffffff; } .calender__date span.date__number { font-size: 26px; font-size: 2.6rem; line-height: 24px; line-height: 2.4rem; } .calender__date span.date__name { font-size: 14px; font-size: 1.4rem; line-height: 18px; line-height: 1.8rem; font-weight: 500; text-transform: uppercase; } .calender__info { position: relative; width: 100%; } .calender__info.no-image .calender__content { position: relative; } .calender__content { position: absolute; width: 100%; height: 100%; bottom: 0; padding: 2rem; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; pointer-events: none; } @media (max-width: 768px) { .calender__content { padding: 16px; } } @media (max-width: 320px) { .calender__content { padding: 1rem; } } .home__calender .calender__content { position: relative; padding: 0; } .calender__header { -webkit-align-self: flex-end; -moz-align-self: flex-end; -ms-align-self: flex-end; align-self: flex-end; } .calender__header .calender__title { font-family: "omnes-pro", sans-serif; font-weight: 500; color: #ffffff; font-size: 17px; font-size: 1.7rem; line-height: 24px; line-height: 2.4rem; } @media (max-width: 768px) { .calender__header .calender__title { font-size: 16px; font-size: 1.6rem; line-height: 19px; line-height: 1.9rem; } } .play { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0.8; -moz-transform: translate(-50%, -50%) scale(0.9, 0.9); -ms-transform: translate(-50%, -50%) scale(0.9, 0.9); -webkit-transform: translate(-50%, -50%) scale(0.9, 0.9); transform: translate(-50%, -50%) scale(0.9, 0.9); -webkit-transition: all 0.3s; transition: all 0.3s; z-index: 2; } .play .play__btn { position: relative; background-color: #ffffff; text-align: left; } .play .play__btn:before, .play .play__btn:after { content: ""; position: absolute; background-color: inherit; } .play .play__btn, .play .play__btn:before, .play .play__btn:after { width: 5.5rem; height: 5.5rem; border-top-right-radius: 25%; } .small .play .play__btn, .small .play .play__btn:before, .small .play .play__btn:after { width: 3rem; height: 3rem; } @media (max-width: 768px) { .small .play .play__btn, .small .play .play__btn:before, .small .play .play__btn:after { width: 1rem; height: 1rem; } } @media (max-width: 768px) { .play .play__btn, .play .play__btn:before, .play .play__btn:after { width: 3rem; height: 3rem; } } .play .play__btn { transform: rotate(30deg) skewX(-30deg) scale(1, 0.866); } .play .play__btn:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%); } .play .play__btn:after { transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%); } .duration { position: absolute; right: 2rem; bottom: 2rem; color: #ffffff; padding: 0 1rem; height: 2.7rem; z-index: 1; font-size: 16px; font-size: 1.6rem; line-height: 27px; line-height: 2.7rem; background: #ed553a; background: -moz-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1651d), color-stop(100%, #ed553a)); background: -webkit-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: -o-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: linear-gradient(to bottom, #f1651d 0%, #ed553a 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f1651d, endColorstr=#ed553a); -webkit-align-self: flex-end; -moz-align-self: flex-end; -ms-align-self: flex-end; align-self: flex-end; } .small .duration { right: 1rem; bottom: 1rem; } @media (max-width: 768px) { .small .duration { display: none; } } @media (max-width: 768px) { .duration { right: 1rem; bottom: 1rem; height: 1.4rem; padding: 0 0.5rem; font-size: 8px; font-size: 0.8rem; line-height: 14px; line-height: 1.4rem; } } .team__wrapper { width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; } .team__member { position: relative; width: calc((100% / 2) - (2.4rem / 2)); margin-bottom: 24px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @media (min-width: 769px) { .team__member { -webkit-flex-flow: column wrap; -moz-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } } @media (max-width: 768px) { .team__member { width: 100%; margin-bottom: 16px; } } .team__member .press { position: absolute; width: 9.6rem; height: 9.6rem; left: -4.5rem; top: 11rem; z-index: 2; -moz-transform: rotate(-16deg); -ms-transform: rotate(-16deg); -webkit-transform: rotate(-16deg); transform: rotate(-16deg); background-color: #ffffff; box-shadow: 0.5rem 0.5rem 0.9rem rgba(0, 0, 0, 0.33); border-radius: 50%; font-size: 20px; font-size: 2rem; line-height: 90px; line-height: 9rem; font-weight: 600; color: #36abce; } .team__member .press span { display: inline-block; vertical-align: middle; text-align: center; line-height: 2rem; } @media (max-width: 960px) { .team__member .press { left: -2.5rem; } } @media (max-width: 768px) { .team__member .press { left: auto; top: -2.5rem; right: -1.5rem; width: 7.5rem; height: 7.5rem; font-size: 15px; font-size: 1.5rem; line-height: 72px; line-height: 7.2rem; -moz-transform: rotate(16deg); -ms-transform: rotate(16deg); -webkit-transform: rotate(16deg); transform: rotate(16deg); box-shadow: 0.3rem 0.3rem 0.6rem rgba(0, 0, 0, 0.23); } .team__member .press span { line-height: 1.5rem; } } @media (max-width: 530px) { .team__member .press { top: -1.5rem; right: -0.5rem; width: 5.2rem; height: 5.2rem; font-size: 12px; font-size: 1.2rem; line-height: 50px; line-height: 5rem; } .team__member .press span { line-height: 1.1rem; } } @media (min-width: 769px) { .team__member:nth-child(even) .press { left: auto; right: -2.5rem; -moz-transform: rotate(16deg); -ms-transform: rotate(16deg); -webkit-transform: rotate(16deg); transform: rotate(16deg); } } @media (min-width: 961px) { .team__member:nth-child(even) .press { right: -4.5rem; } } .team__image { line-height: 0; -webkit-box-flex: 0 0 auto; -moz-box-flex: 0 0 auto; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .team__image img { width: 100%; } .team__content { padding: 16px 16px 2rem; background-color: #fdf3e4; } @media (max-width: 768px) { .team__content { -webkit-box-flex: 1 1 auto; -moz-box-flex: 1 1 auto; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1.2rem 16px 16px; } } .team__content span { display: block; } .team__name { font-size: 20px; font-size: 2rem; line-height: 24px; line-height: 2.4rem; font-weight: 600; } @media (max-width: 530px) { .team__name { font-size: 18px; font-size: 1.8rem; line-height: 20px; line-height: 2rem; } } .team__function { font-size: 16px; font-size: 1.6rem; line-height: 20px; line-height: 2rem; font-weight: 600; color: #f39202; } @media (max-width: 530px) { .team__function { font-size: 14px; font-size: 1.4rem; line-height: 16px; line-height: 1.6rem; } } .team__phone { margin-top: 0.8rem; font-size: 14px; font-size: 1.4rem; line-height: 18px; line-height: 1.8rem; color: #707070; } @media (max-width: 768px) { .team__phone { font-size: 14px; font-size: 1.4rem; line-height: 16px; line-height: 1.6rem; } } .hero { position: relative; min-height: 50rem; height: 120vh; max-height: 120rem; } .hero.on-background { height: 100vh; } @media (max-width: 768px) { .hero:not(.on-background) { height: 100vh; } .hero.on-background { height: auto; max-height: none; } } .hero .btn.primair { margin-bottom: 12px; } .hero .containter { box-shadow: none; } .hero .background, .hero .on-background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hero .background::after, .hero .on-background-image::after { height: 100%; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF000000', endColorstr='#FF000000'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjY1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(30%, rgba(0, 0, 0, 0)), color-stop(65%, rgba(0, 0, 0, 0.7)), color-stop(100%, rgba(0, 0, 0, 0))); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 65%, rgba(0, 0, 0, 0) 100%); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 65%, rgba(0, 0, 0, 0) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 65%, rgba(0, 0, 0, 0) 100%); } .hero .background::before, .hero .on-background-image::before { content: ""; position: absolute; width: 100%; height: 30%; top: 0; left: 0; opacity: 0.3; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF000000', endColorstr='#FF000000'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, rgba(0, 0, 0, 0))); background-image: -moz-linear-gradient(top, #000000 0%, rgba(0, 0, 0, 0) 100%); background-image: -webkit-linear-gradient(top, #000000 0%, rgba(0, 0, 0, 0) 100%); background-image: linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0) 100%); } .hero .background { object-fit: cover; } .hero .background img { width: 100%; height: 100%; object-fit: cover; } .hero .background.compat-object-fit { background-size: cover; background-position: center center; } .hero .background.compat-object-fit img { opacity: 0; } .hero .on-background-image { display: flex; justify-content: center; align-items: center; overflow: hidden; } .hero .on-background-image picture { max-width: 1104px; width: 100%; text-align: right; } .hero .on-background-image img { width: 100%; max-width: 592px; } @media (min-width: 531px) { .hero .on-background-image img { margin-right: -72px; } } @media (max-width: 768px) { .hero .on-background-image { position: relative; padding-top: 90px; } .hero .on-background-image picture { text-align: center; } } .hero__content { color: #ffffff; width: 100%; padding-right: 30%; position: absolute; top: 85vh; } @media (max-width: 768px) { .hero__content:not(.on-background) { padding-right: 5%; top: 75vh; } } @media (max-height: 1199px) { .hero__content:not(.on-background) { -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @media (max-height: 600px) { .hero__content:not(.on-background) { top: 50%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } } @media (min-height: 1200px) { .hero__content:not(.on-background) { top: auto; bottom: 25%; } } @media (max-width: 320px) { .hero__content:not(.on-background) { top: 55%; } } .hero__content.on-background { padding-bottom: 100px; } @media (max-width: 768px) { .hero__content.on-background { position: relative; top: auto; margin-top: -32px; padding-right: 0%; } } @media (min-width: 769px) { .hero__content.on-background { padding-right: 0%; width: -webkit-calc(50% + 68px); width: -moz-calc(50% + 68px); width: calc(50% + 68px); } } @media (min-width: 769px) and (max-height: 1199px) { .hero__content.on-background { -moz-transform: translateY(-120%); -ms-transform: translateY(-120%); -webkit-transform: translateY(-120%); transform: translateY(-120%); } } @media (min-width: 769px) and (max-height: 690px) { .hero__content.on-background { top: 50%; -moz-transform: translateY(-25%); -ms-transform: translateY(-25%); -webkit-transform: translateY(-25%); transform: translateY(-25%); } } @media (min-width: 769px) and (min-height: 1200px) { .hero__content.on-background { top: auto; bottom: 25%; } } .quote { width: 100%; 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; } .quote.red { background: #ed553a; background: -moz-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1651d), color-stop(100%, #ed553a)); background: -webkit-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: -o-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: linear-gradient(to bottom, #f1651d 0%, #ed553a 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f1651d, endColorstr=#ed553a); } .quote.orange { background: #ff7914; background: -moz-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fea360), color-stop(100%, #ff7914)); background: -webkit-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -o-linear-gradient(top, #fea360 0%, #ff7914 100%); background: linear-gradient(to bottom, #fea360 0%, #ff7914 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fea360, endColorstr=#ff7914); } .quote.blue { background: #36abce; background: -moz-linear-gradient(top, #66d3ed 0%, #36abce 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66d3ed), color-stop(100%, #36abce)); background: -webkit-linear-gradient(top, #66d3ed 0%, #36abce 100%); background: -o-linear-gradient(top, #66d3ed 0%, #36abce 100%); background: linear-gradient(to bottom, #66d3ed 0%, #36abce 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#66d3ed, endColorstr=#36abce); } .quote__inner { padding: 0 7%; text-align: center; } @media (max-width: 768px) { .quote__inner { padding: 2.4rem; } } .quote__inner p { font-size: 30px; font-size: 3rem; line-height: 36px; line-height: 3.6rem; color: #ffffff; } @media (max-width: 1280px) { .quote__inner p { font-size: 28px; font-size: 2.8rem; line-height: 34px; line-height: 3.4rem; } } @media (max-width: 960px) { .quote__inner p { font-size: 22px; font-size: 2.2rem; line-height: 26px; line-height: 2.6rem; } } .quote__inner p cite { font-size: 16px; font-size: 1.6rem; line-height: 36px; line-height: 3.6rem; font-weight: 600; font-style: normal; } .home__blocks { margin-top: -12rem; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row no-wrap; -moz-flex-flow: row no-wrap; -ms-flex-flow: row no-wrap; flex-flow: row no-wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; } @media (max-width: 768px) { .home__blocks { margin-top: -5rem; -webkit-flex-flow: column wrap; -moz-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } } .home__blocks .block { position: relative; width: calc((100% / 3) - ((2.4rem * 2) / 3)); text-decoration: none; -webkit-transition: 0.3s; transition: 0.3s; } @media (max-width: 768px) { .home__blocks .block { width: 100%; } .home__blocks .block + .block { margin-top: 1rem; } } .home__blocks .block .background { position: absolute; z-index: 1; width: 100%; height: 100%; -webkit-transition: 0.3s; transition: 0.3s; -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -webkit-transform-origin: left bottom; transform-origin: left bottom; } .home__blocks .block .background:after { display: none; } .home__blocks .block:nth-child(1) .background { background: #ff7914; background: -moz-linear-gradient(top, #fdb077 0%, #ff7914 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdb077), color-stop(100%, #ff7914)); background: -webkit-linear-gradient(top, #fdb077 0%, #ff7914 100%); background: -o-linear-gradient(top, #fdb077 0%, #ff7914 100%); background: linear-gradient(to bottom, #fdb077 0%, #ff7914 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fdb077, endColorstr=#ff7914); } .home__blocks .block:nth-child(2) .background { background: #d0231f; background: -moz-linear-gradient(top, #f86460 0%, #d0231f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f86460), color-stop(100%, #d0231f)); background: -webkit-linear-gradient(top, #f86460 0%, #d0231f 100%); background: -o-linear-gradient(top, #f86460 0%, #d0231f 100%); background: linear-gradient(to bottom, #f86460 0%, #d0231f 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f86460, endColorstr=#d0231f); } .home__blocks .block:nth-child(3) .background { background: #36abce; background: -moz-linear-gradient(top, #b3eaf7 0%, #36abce 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b3eaf7), color-stop(100%, #36abce)); background: -webkit-linear-gradient(top, #b3eaf7 0%, #36abce 100%); background: -o-linear-gradient(top, #b3eaf7 0%, #36abce 100%); background: linear-gradient(to bottom, #b3eaf7 0%, #36abce 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#b3eaf7, endColorstr=#36abce); } .home__blocks .block h3 { color: #ffffff; } @media (min-width: 769px) { .home__blocks .block:hover .inner__block { -moz-transform: translateY(-5%); -ms-transform: translateY(-5%); -webkit-transform: translateY(-5%); transform: translateY(-5%); } .home__blocks .block:hover .background { -moz-transform: scaleY(1.05); -ms-transform: scaleY(1.05); -webkit-transform: scaleY(1.05); transform: scaleY(1.05); } } .home__blocks .block__icon { position: relative; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; width: 100%; max-height: 75%; margin-bottom: -15%; } .home__blocks .block__icon img { width: 85%; } @media (max-width: 768px) { .home__blocks .block__icon { max-height: 100%; margin-bottom: 0; -webkit-box-flex: 0 0 10rem; -moz-box-flex: 0 0 10rem; -webkit-flex: 0 0 10rem; -ms-flex: 0 0 10rem; flex: 0 0 10rem; } .home__blocks .block__icon img { max-width: 100%; } } @media (max-width: 320px) { .home__blocks .block__icon { -webkit-box-flex: 0 0 8rem; -moz-box-flex: 0 0 8rem; -webkit-flex: 0 0 8rem; -ms-flex: 0 0 8rem; flex: 0 0 8rem; } } .home__blocks .inner__block { position: relative; z-index: 2; padding: 0rem 4rem 4rem; height: 100%; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: column wrap; -moz-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; -webkit-transition: 0.3s; transition: 0.3s; } @media (max-width: 768px) { .home__blocks .inner__block { -webkit-flex-flow: row nowrap; -moz-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; padding-left: 0; padding-bottom: 0; } } .home__news { margin-top: 12.8rem; margin-bottom: 13.8rem; } @media (max-width: 768px) { .home__news { margin-top: 7.2rem; margin-bottom: 8rem; } } .home__news .btn { margin-right: 0; } @media (min-width: 769px) { .home__news .btn { margin-top: 1.6rem; } } .home__calender { position: relative; width: 100%; background: #ff7914; background: -moz-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fea360), color-stop(100%, #ff7914)); background: -webkit-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -o-linear-gradient(top, #fea360 0%, #ff7914 100%); background: linear-gradient(to bottom, #fea360 0%, #ff7914 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fea360, endColorstr=#ff7914); color: #ffffff; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @media (max-width: 768px) { .home__calender { margin-bottom: 8rem; } } .home__calender .calender__header .calender__title { font-size: 18px; font-size: 1.8rem; line-height: 22px; line-height: 2.2rem; } .home__calender .btn { margin-top: 6.2rem; } @media (min-width: 769px) { .home__calender .btn { position: absolute; bottom: 4.2rem; } } .overview { margin-top: 12.8rem; } @media (max-width: 768px) { .overview { margin-top: 8rem; } } .overview__wrapper { margin-top: 4.8rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .overview__wrapper .flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .overview__wrapper .col-1-2 { width: 50%; margin-top: 0; } @media (max-width: 768px) { .overview__wrapper .col-1-2 { width: 100%; } .overview__wrapper .col-1-2 .col-1-2 { width: 50%; } } .overview__wrapper .background:after { display: none; } .load-screen { position: fixed; width: 100vw; top: 0; height: 100%; z-index: 99999999; transition: visibility 0s 0.6s; } @media (min-width: 769px) { .load-screen { display: none; } } .load-screen #logo { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 6rem; } .load-screen #logo svg { -moz-animation: pulse 3s ease-in-out infinite; -webkit-animation: pulse 3s ease-in-out infinite; animation: pulse 3s ease-in-out infinite; } .load-screen #logo.moveout { -moz-animation: fade-out 0.4s ease-in forwards; -webkit-animation: fade-out 0.4s ease-in forwards; animation: fade-out 0.4s ease-in forwards; } body[data-loading="false"] .load-screen { -moz-animation: fade-out 0.3s 0.3s ease-in forwards; -webkit-animation: fade-out 0.3s 0.3s ease-in forwards; animation: fade-out 0.3s 0.3s ease-in forwards; visibility: hidden; } header { position: absolute; top: 0; left: 0; width: 100%; z-index: 3; max-height: 10.6rem; margin-bottom: 5.4rem; -webkit-transition: max-height 0.45s ease 0.1s, height 0.45s ease 0.1s; transition: max-height 0.45s ease 0.1s, height 0.45s ease 0.1s; overflow: hidden; } @media (max-width: 768px) { header { -webkit-transition: max-height 0.4s ease-in-out 0.1s, height 0.4s ease-in-out 0.1s; transition: max-height 0.4s ease-in-out 0.1s, height 0.4s ease-in-out 0.1s; height: 10.4rem; } } @media (min-width: 769px) { .home header { background-color: #ffffff; } .home header:hover { max-height: 9.8rem; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s; -moz-transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5); -o-transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5); -webkit-transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5); transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5); } } .home header .header-bg { -moz-transform: perspective(1) scaleY(1); -ms-transform: perspective(1) scaleY(1); -webkit-transform: perspective(1) scaleY(1); transform: perspective(1) scaleY(1); } header.nav-open .header-bg { -moz-transform: perspective(1) scaleY(1); -ms-transform: perspective(1) scaleY(1); -webkit-transform: perspective(1) scaleY(1); transform: perspective(1) scaleY(1); } header.animating .header-bg.fade-in { -webkit-transition: opacity 0s, transform 0.15s cubic-bezier(0.7, 0, 0.75, 1.2); transition: opacity 0s, transform 0.15s cubic-bezier(0.7, 0, 0.75, 1.2); } header.nav-open, header.animating, .home header.nav-open, .home header.animating { max-height: 52rem; -moz-transition-delay: 0.15s; -o-transition-delay: 0.15s; -webkit-transition-delay: 0.15s; transition-delay: 0.15s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } @media (max-width: 768px) { header.nav-open, header.animating, .home header.nav-open, .home header.animating { max-height: 100%; height: 100%; } } header.nav-open .logo, header.animating .logo, .home header.nav-open .logo, .home header.animating .logo { z-index: 999; } @media (max-width: 768px) { header.nav-open .logo, header.animating .logo, .home header.nav-open .logo, .home header.animating .logo { opacity: 0; -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s; } } header.nav-open .logo svg g, header.nav-open .logo svg path, header.nav-open .logo svg polygon, header.animating .logo svg g, header.animating .logo svg path, header.animating .logo svg polygon, .home header.nav-open .logo svg g, .home header.nav-open .logo svg path, .home header.nav-open .logo svg polygon, .home header.animating .logo svg g, .home header.animating .logo svg path, .home header.animating .logo svg polygon { -webkit-transition: all 0.3s 0s; transition: all 0.3s 0s; } header.nav-open .logo span, header.animating .logo span, .home header.nav-open .logo span, .home header.animating .logo span { color: #ffffff; -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s; } header.nav-open nav ul li, header.animating nav ul li, .home header.nav-open nav ul li, .home header.animating nav ul li { -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s; } header.nav-open nav ul li.has__subnav, header.animating nav ul li.has__subnav, .home header.nav-open nav ul li.has__subnav, .home header.animating nav ul li.has__subnav { color: #ffffff; -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s; } @media (max-width: 768px) { header.nav-open nav ul li.has__subnav, header.animating nav ul li.has__subnav, .home header.nav-open nav ul li.has__subnav, .home header.animating nav ul li.has__subnav { color: #f39202; } } @media (max-width: 768px) { header.subnav-open nav ul li.has__subnav, .home header.subnav-open nav ul li.has__subnav { color: #ffffff; } } header .header-bg { position: absolute; top: 0; z-index: -1; width: 100%; height: 100%; opacity: 0; -moz-transform: perspective(1) scaleY(0); -ms-transform: perspective(1) scaleY(0); -webkit-transform: perspective(1) scaleY(0); transform: perspective(1) scaleY(0); -moz-transform-origin: left top; -ms-transform-origin: left top; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transition: opacity 0.25s linear 0.3s, transform 0.25s ease-in-out 0.3s; transition: opacity 0.25s linear 0.3s, transform 0.25s ease-in-out 0.3s; } header .header-bg.fade-in, header .header-bg.fade-out { opacity: 1; -moz-transform: perspective(1) scaleY(1); -ms-transform: perspective(1) scaleY(1); -webkit-transform: perspective(1) scaleY(1); transform: perspective(1) scaleY(1); -moz-transition-delay: 0; -o-transition-delay: 0; -webkit-transition-delay: 0; transition-delay: 0; } header .container, header div[class^="container"], header div[class^="container"][class$="--small"], header div[class^="container"][class$="full-width"] { padding-top: 1rem; height: 10.6rem; box-shadow: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; } @media (max-width: 768px) { header .container, header div[class^="container"], header div[class^="container"][class$="--small"], header div[class^="container"][class$="full-width"] { height: 10.4rem; padding-top: 0; } } @media (max-width: 320px) { header .container, header div[class^="container"], header div[class^="container"][class$="--small"], header div[class^="container"][class$="full-width"] { height: 8.4rem; padding-top: 0; } } header .logo { opacity: 1; -webkit-transition: opacity 0.2s 0.7s; transition: opacity 0.2s 0.7s; } @media (max-width: 768px) { header .logo { position: relative; top: -.5rem; } } header .logo a { text-decoration: none; } header .logo svg { display: inline-block; vertical-align: middle; width: 3.9rem; } @media (max-width: 320px) { header .logo svg { width: 3.3rem; } } header .logo svg g, header .logo svg path, header .logo svg polygon { -webkit-transition: all 0.3s 0.5s; transition: all 0.3s 0.5s; } header .logo span { position: relative; top: .7rem; padding-left: 1.2rem; display: inline-block; font-size: 22px; font-size: 2.2rem; line-height: 22px; line-height: 2.2rem; font-family: "georgia", serif; font-weight: bold; color: #ffffff; -webkit-transition: color 0.3s 0.5s; transition: color 0.3s 0.5s; } @media (max-width: 320px) { header .logo span { font-size: 18px; font-size: 1.8rem; line-height: 18px; line-height: 1.8rem; } } .home header .logo span { color: #000000; } @media (max-width: 768px) { .home header .logo span { color: #ffffff; } } .nav__main { list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .nav__main li { position: relative; font-weight: 500; margin-left: 5rem; color: #000000; opacity: .7; font-size: 20px; font-size: 2rem; line-height: 20px; line-height: 2rem; -webkit-transition: all 0.3s 0.5s; transition: all 0.3s 0.5s; } .nav__main li.has__subnav { color: #ffffff; opacity: .7; } .nav__main li.has__subnav.active, .nav__main li.has__subnav.current { opacity: 1; } .home .nav__main li.has__subnav { color: #f39202; } .nav__main li a { text-decoration: none; color: #000000; } @media (max-width: 768px) { .nav__main li { width: 50%; padding: 1.2rem 0; margin-left: 0; } .nav__main li.current { display: none; } } @media (max-width: 320px) { .nav__main li { font-size: 18px; font-size: 1.8rem; line-height: 18px; line-height: 1.8rem; } } .nav__top { position: relative; } .nav__top ul { -webkit-flex-flow: row nowrap; -moz-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .nav__bottom ul { width: 100%; padding: 1.6rem 3.2rem 3.2rem; bottom: 0; z-index: 888; opacity: 0; visibility: hidden; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-transition: transform 0.3s 0 ease-out, opacity 0.3s 0s ease-out, visibility 0s 0.3s; transition: transform 0.3s 0 ease-out, opacity 0.3s 0s ease-out, visibility 0s 0.3s; -moz-transform: translateY(-2rem); -ms-transform: translateY(-2rem); -webkit-transform: translateY(-2rem); transform: translateY(-2rem); } .nav__bottom ul:after { content: ''; width: 100%; height: 1px; position: absolute; background-color: rgba(255, 255, 255, 0.3); top: 0; left: 0; } @media (max-width: 768px) { .nav-open .nav__bottom ul { -moz-transition-delay: 0.75s; -o-transition-delay: 0.75s; -webkit-transition-delay: 0.75s; transition-delay: 0.75s; -moz-transform: translateY(0rem); -ms-transform: translateY(0rem); -webkit-transform: translateY(0rem); transform: translateY(0rem); opacity: 1; visibility: visible; } .subnav-open .nav__bottom ul { -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; padding: 1.6rem 3.2rem 1.6rem; } .subnav-open .nav__bottom ul li { width: auto; } } .nav__mobile { position: absolute; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); right: .8rem; height: 3rem; width: 3rem; display: block; z-index: 999; } .nav__mobile span { position: absolute; top: 10px; right: 0; height: .4rem; width: 3rem; border-radius: .2rem; background-color: #ffffff; text-indent: 9000px; -webkit-transition: background-color 0.2s 0.5s; transition: background-color 0.2s 0.5s; } .nav__mobile span::before, .nav__mobile span::after { content: ''; height: 100%; width: 100%; border-radius: 2px; background-color: #ffffff; position: absolute; right: 0; -webkit-transition: all 0.3s 0.3s, transform 0.3s, width 0.2s 0.5s; transition: all 0.3s 0.3s, transform 0.3s, width 0.2s 0.5s; } .nav__mobile span::before { top: -10px; width: 85%; } .nav__mobile span::after { bottom: -10px; width: 55%; } .nav-open .nav__mobile span { background: transparent; } .nav-open .nav__mobile span::before, .nav-open .nav__mobile span::after { -webkit-transition: all 0.3s 0.2s, transform 0.3s 0.5s, width 0.2s; transition: all 0.3s 0.2s, transform 0.3s 0.5s, width 0.2s; background-color: #000000; width: 100%; } .nav-open .nav__mobile span::before { top: 0; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .nav-open .nav__mobile span::after { bottom: 0; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .subnav-open .nav__mobile span::before, .subnav-open .nav__mobile span::after { background-color: #ffffff; } .subnav { position: relative; margin: 0 auto; pointer-events: none; } .nav-open .subnav { pointer-events: all; } @media (min-width: 769px) { .subnav { height: 100vh; -webkit-transition: max-height 0.3s ease; transition: max-height 0.3s ease; } } @media (max-width: 768px) { .subnav { height: calc(100% - 23rem); width: calc(100% - 4.8rem); } .subnav-open .subnav { height: calc(100% - 18rem); } } @media (max-width: 320px) { .subnav-open .subnav { margin-bottom: 2rem; } } .subnav .subitem { position: absolute; width: 100%; text-align: center; font-size: 0; padding: 5.8rem 0; opacity: 0; z-index: 1; visibility: hidden; pointer-events: none; overflow: visible; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: flex-start; -moz-transform: translateX(-2rem); -ms-transform: translateX(-2rem); -webkit-transform: translateX(-2rem); transform: translateX(-2rem); -webkit-transition: transform 0.4s 0.4s ease-out, opacity 0.4s 0.4s ease-out, visibility 0.4s 0.4s; transition: transform 0.4s 0.4s ease-out, opacity 0.4s 0.4s ease-out, visibility 0.4s 0.4s; -webkit-transition: transform 0.25s 0.25s ease-out, opacity 0.25s 0.25s ease-out, visibility 0.25s 0.25s; transition: transform 0.25s 0.25s ease-out, opacity 0.25s 0.25s ease-out, visibility 0.25s 0.25s; } @media (max-width: 768px) { .subnav .subitem { -webkit-align-content: flex-start; -moz-align-content: flex-start; -ms-align-content: flex-start; align-content: flex-start; height: 100%; max-height: 37rem; padding: 0; } } .subnav .subitem .subitem__title { position: absolute; top: -7rem; color: #ffffff; opacity: 0; -webkit-transition: opacity 0.2s 0.5s; transition: opacity 0.2s 0.5s; } @media (min-width: 769px) { .subnav .subitem .subitem__title { display: none; } } @media (max-width: 320px) { .subnav .subitem .subitem__title { top: -5.8rem; } } .subnav-open .subnav .subitem .subitem__title { opacity: 1; -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s; } .subnav .subitem.show-in { pointer-events: all; opacity: 1; visibility: visible; -moz-transform: translateX(0rem); -ms-transform: translateX(0rem); -webkit-transform: translateX(0rem); transform: translateX(0rem); } .subnav .subitem.show-out { opacity: 0; visibility: hidden; -moz-transform: translateX(2rem); -ms-transform: translateX(2rem); -webkit-transform: translateX(2rem); transform: translateX(2rem); -webkit-transition: transform 0.4s ease-in, opacity 0.4s ease-in, visibility 0.4s 0.4s; transition: transform 0.4s ease-in, opacity 0.4s ease-in, visibility 0.4s 0.4s; -webkit-transition: transform 0.25s ease-in, opacity 0.25s ease-in, visibility 0.25s 0.25s; transition: transform 0.25s ease-in, opacity 0.25s ease-in, visibility 0.25s 0.25s; } .animating .subnav .subitem.show-in { -moz-transition-duration: 0s; -o-transition-duration: 0s; -webkit-transition-duration: 0s; transition-duration: 0s; } .subnav .subitem#informatie .nav__item.icon { background-color: rgba(254, 192, 147, 0.5); } @media (min-width: 769px) { .subnav .subitem#informatie .nav__item:hover h3 { color: #f39202; } } .subnav .subitem#inspiratie .nav__item.icon { background-color: rgba(244, 134, 77, 0.5); } @media (min-width: 769px) { .subnav .subitem#inspiratie .nav__item:hover h3 { color: #ed6809; } } .subnav .subitem#organisatie .nav__item.icon { background-color: rgba(148, 224, 242, 0.3); } @media (min-width: 769px) { .subnav .subitem#organisatie .nav__item:hover h3 { color: #36abce; } } .subnav .nav__item { position: relative; display: inline-block; min-width: calc((100% / 5) - ((2.4rem * 3) / 5)); margin: 0 2.4rem 2.4rem 0; z-index: 1; text-decoration: none; } .subnav .nav__item:first-of-type { margin-left: 0; } .subnav .nav__item:last-of-type { margin-right: 0; } .subnav .nav__item.icon { background-color: rgba(244, 134, 77, 0.5); } .subnav .nav__item.icon::after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); -moz-transform-origin: left 50%; -ms-transform-origin: left 50%; -webkit-transform-origin: left 50%; transform-origin: left 50%; -webkit-transition: transform 0.25s cubic-bezier(0.75, 0, 0.75, 1); transition: transform 0.25s cubic-bezier(0.75, 0, 0.75, 1); } .subnav .nav__item.in-left::after { -moz-transform-origin: left 50%; -ms-transform-origin: left 50%; -webkit-transform-origin: left 50%; transform-origin: left 50%; } .subnav .nav__item.in-right::after { -moz-transform-origin: right 50%; -ms-transform-origin: right 50%; -webkit-transform-origin: right 50%; transform-origin: right 50%; } .subnav .nav__item .item__inner { height: 7rem; width: 100%; padding: 0 3rem 0 8rem; text-align: left; 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; } @media (max-width: 768px) { .subnav .nav__item .item__inner { height: 5rem; padding-left: 5rem; } } .subnav .nav__item .item__inner svg { position: absolute; left: 0; top: 0; height: 100%; } @media (max-width: 768px) and (max-height: 558px) { .subnav .nav__item .item__inner svg { top: 0rem; height: 80%; } } @media (max-width: 768px) and (min-height: 559px) { .subnav .nav__item .item__inner svg { top: 0rem; } } .subnav .nav__item h3 { width: 100%; bottom: 2.4rem; font-size: 22px; font-size: 2.2rem; line-height: 23px; line-height: 2.3rem; color: #ffffff; text-decoration: none; -webkit-transition: all 0.25s cubic-bezier(0.75, 0, 0.75, 1); transition: all 0.25s cubic-bezier(0.75, 0, 0.75, 1); } @media (max-width: 1280px) { .subnav .nav__item h3 { font-size: 20px; font-size: 2rem; line-height: 22px; line-height: 2.2rem; } } @media (max-width: 960px) { .subnav .nav__item h3 { font-family: "omnes-pro", sans-serif; font-weight: 500; bottom: 2rem; font-size: 16px; font-size: 1.6rem; line-height: 18px; line-height: 1.8rem; } } @media (max-width: 768px) { .subnav .nav__item h3 { font-size: 18px; font-size: 1.8rem; line-height: 18px; line-height: 1.8rem; } } @media (max-width: 530px) { .subnav .nav__item h3 { font-size: 20px; font-size: 2rem; line-height: 20px; line-height: 2rem; } } @media (min-width: 769px) { .subnav .nav__item:hover::after { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } .subnav .nav__item:hover h3 { color: #f39202; } } @media (max-width: 768px) { .subnav .nav__item { height: 5rem; width: 100%; margin: 0; margin-bottom: 1.6rem; } } .subnav div.nav__item { width: calc(((100% / 4) - ((2.4rem * 3) / 4)) / 2); width: 100%; } @media (max-width: 768px) { .subnav div.nav__item { height: auto; } } .subnav div.nav__item .item__inner { padding: 0; height: auto; } @media (max-width: 768px) { .subnav div.nav__item .item__inner { margin-top: 1rem; } } .inner__nav { width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: flex-start; padding: 0; margin: 0; list-style: none; } .inner__nav li { background-color: rgba(255, 255, 255, 0.15); padding: 2rem; font-size: 20px; font-size: 2rem; line-height: 20px; line-height: 2rem; text-align: left; } @media (min-width: 769px) { .inner__nav li { margin-right: 2.4rem; font-family: "georgia", serif; font-weight: bold; } } @media (max-width: 768px) { .inner__nav li { padding: 1.2rem 2.4rem; font-weight: 500; margin-right: 1.5rem; margin-bottom: 1.5rem; } } .inner__nav li a { position: relative; color: #ffffff; letter-spacing: .02rem; text-decoration: none; } .inner__nav li a::after { content: ''; position: absolute; width: 100%; height: .1rem; bottom: -.18rem; left: 0; background-color: #ffffff; -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); -moz-transform-origin: left 50%; -ms-transform-origin: left 50%; -webkit-transform-origin: left 50%; transform-origin: left 50%; -webkit-transition: transform 0.25s cubic-bezier(0.75, 0, 0.75, 1); transition: transform 0.25s cubic-bezier(0.75, 0, 0.75, 1); } .inner__nav li a:hover { color: #ffffff; } .inner__nav li a:hover::after { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } .mobile__message { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; width: 70%; margin-top: -10%; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s ease-out, visibility 0s 0.3s; transition: opacity 0.3s ease-out, visibility 0s 0.3s; } .mobile__message .main__logo, .mobile__message h2 { -moz-transform: translateY(-2rem); -ms-transform: translateY(-2rem); -webkit-transform: translateY(-2rem); transform: translateY(-2rem); -webkit-transition: transform 0.3s ease-out 0.7s; transition: transform 0.3s ease-out 0.7s; } .mobile__message .main__logo { display: inline-block; width: 10rem; } .mobile__message h2 { color: #000000; font-size: 26px; font-size: 2.6rem; line-height: 30px; line-height: 3rem; } .nav-open .mobile__message { -webkit-transition: opacity 0.3s ease-out 0.7s, visibility 0s 0.7s; transition: opacity 0.3s ease-out 0.7s, visibility 0s 0.7s; opacity: 1; visibility: visible; } .nav-open .mobile__message .main__logo, .nav-open .mobile__message h2 { -moz-transform: translateY(0rem); -ms-transform: translateY(0rem); -webkit-transform: translateY(0rem); transform: translateY(0rem); } .subnav-open .mobile__message { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s ease-out, visibility 0s 0.3s; transition: opacity 0.3s ease-out, visibility 0s 0.3s; } aside { position: absolute; width: 8rem; top: 0; } aside.back { left: -9.6rem; } aside.back .nav__item svg { width: 4rem; } aside.back .nav__item::after { -moz-transform-origin: right 50%; -ms-transform-origin: right 50%; -webkit-transform-origin: right 50%; transform-origin: right 50%; } aside.sidenav { right: -9.6rem; } aside.sidenav .nav__item::after { -moz-transform-origin: left 50%; -ms-transform-origin: left 50%; -webkit-transform-origin: left 50%; transform-origin: left 50%; } aside .nav__item { position: relative; background-color: rgba(255, 255, 255, 0.33); display: block; width: 8rem; height: 8rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; align-items: center; z-index: 0; } aside .nav__item img { max-height: 90%; max-width: 90%; } aside .nav__item::after { content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: transform 0.25s cubic-bezier(0.75, 0, 0.75, 1); transition: transform 0.25s cubic-bezier(0.75, 0, 0.75, 1); } aside .nav__item:hover::after, aside .nav__item.current::after { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } aside .nav__item + .nav__item { margin-top: 16px; } .pagination { margin-top: 2.4rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; } .MarkupPagerNav { list-style: none; font-size: 12px; font-size: 1.2rem; line-height: 18px; line-height: 1.8rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row no-wrap; -moz-flex-flow: row no-wrap; -ms-flex-flow: row no-wrap; flex-flow: row no-wrap; } .MarkupPagerNav li { width: 1.8rem; height: 1.8rem; text-align: center; font-weight: 600; margin: 0 .4rem; } .MarkupPagerNav li a { text-decoration: none; color: #000000; } .MarkupPagerNav li.MarkupPagerNavOn { background-color: #f39202; } .MarkupPagerNav li.MarkupPagerNavOn a { color: #ffffff; } .MarkupPagerNav li.MarkupPagerNavNext, .MarkupPagerNav li.MarkupPagerNavPrevious { background-image: url("images/next.png"); background-size: 1.8rem 1.3rem; background-position: center; background-repeat: no-repeat; overflow: hidden; } @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) { .MarkupPagerNav li.MarkupPagerNavNext, .MarkupPagerNav li.MarkupPagerNavPrevious { background-image: url("images/next@2x.png"); } } .MarkupPagerNav li.MarkupPagerNavNext span, .MarkupPagerNav li.MarkupPagerNavPrevious span { display: block; text-indent: -10000px; } .MarkupPagerNav li.MarkupPagerNavPrevious { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .breadcrumb { height: 1.6rem; margin-bottom: 2.4rem; font-size: 12px; font-size: 1.2rem; line-height: 14px; line-height: 1.4rem; 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; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: flex-start; } .breadcrumb a { width: .9rem; } .breadcrumb svg, .breadcrumb a, .breadcrumb span { display: inline-block; vertical-align: middle; margin-right: .8rem; } .breadcrumb #willem { position: relative; top: -.2rem; height: 1.4rem; margin-right: 0rem; } .breadcrumb #arrow { width: .8rem; fill: #707070; -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .breadcrumb a, .breadcrumb span { color: #707070; text-decoration: none; } .breadcrumb span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 960px) { .cases { width: calc(100% + (16px * 2)); margin-left: -16px; } } .case { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; position: absolute; width: 100%; top: 0; left: 0; pointer-events: none; opacity: 0; -webkit-transition: opacity 0s 0.3s; transition: opacity 0s 0.3s; } .case__wrapper { background-color: #ed553a; -webkit-transition: height 0.3s 0.3s; transition: height 0.3s 0.3s; overflow: hidden; } .case.selected { pointer-events: all; position: relative; opacity: 1; } @media (min-width: 769px) { .case { padding-right: 9rem; } } @media (max-width: 768px) { .case { -webkit-flex-flow: column wrap; -moz-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } } .case__img { position: relative; background-size: cover; background-position: center; -webkit-box-flex: 0 1 40%; -moz-box-flex: 0 1 40%; -webkit-flex: 0 1 40%; -ms-flex: 0 1 40%; flex: 0 1 40%; width: 45rem; } .case__img::after, .case__img::before { content: ''; position: absolute; width: 100%; height: 100%; background-color: #ed553a; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); -moz-transform-origin: right 50%; -ms-transform-origin: right 50%; -webkit-transform-origin: right 50%; transform-origin: right 50%; -webkit-transition: transform 0.3s; transition: transform 0.3s; z-index: 2; } @media (max-width: 768px) { .case__img::after, .case__img::before { -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -webkit-transform-origin: right bottom; transform-origin: right bottom; } } .selected .case__img::after, .selected .case__img::before { -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); } @media (max-width: 768px) { .selected .case__img::after, .selected .case__img::before { -moz-transform: scale(1, 0); -ms-transform: scale(1, 0); -webkit-transform: scale(1, 0); transform: scale(1, 0); } } .case__img::before { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); z-index: 2; } .selected .case__img::before { -webkit-transition: transform 0.3s 0.4s; transition: transform 0.3s 0.4s; -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); } @media (max-width: 768px) { .selected .case__img::before { -moz-transform: scale(1, 0); -ms-transform: scale(1, 0); -webkit-transform: scale(1, 0); transform: scale(1, 0); } } @media (max-width: 768px) { .case__img { width: 100%; padding-bottom: 56%; } } .case__content { background-color: #ed553a; -webkit-box-flex: 0 1 60%; -moz-box-flex: 0 1 60%; -webkit-flex: 0 1 60%; -ms-flex: 0 1 60%; flex: 0 1 60%; color: #ffffff; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .selected .case__content { opacity: 1; -webkit-transition: opacity 0.3s 0.3s; transition: opacity 0.3s 0.3s; } .has-nav .case__content { padding-bottom: 4rem; } @media (max-width: 960px) { .case__content { padding-bottom: 6rem; } } .case__content h3 { color: #ffffff; } .case__navigation { position: absolute; bottom: 2.4rem; right: 2.4rem; list-style: none; } .case__navigation li { position: relative; display: inline-block; font-size: 0px; font-size: 0rem; line-height: 3px; line-height: 0.3rem; width: 3rem; height: 3rem; margin-left: .5rem; } .case__navigation li a { position: relative; display: block; width: 100%; height: 100%; border: 1px solid #ffffff; } .case__navigation li a svg { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 1.75rem; fill: #ffffff; z-index: 2; -webkit-transition: fill 0.3s; transition: fill 0.3s; } .case__navigation li a:hover svg { fill: #ed6809; } .case__navigation li a.next::after, .case__navigation li a.prev::after { content: ''; position: absolute; width: 100%; height: 100%; background-color: #ffffff; -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -webkit-transform: scale(0, 1); transform: scale(0, 1); -moz-transform-origin: right 50%; -ms-transform-origin: right 50%; -webkit-transform-origin: right 50%; transform-origin: right 50%; -webkit-transition: transform 0.25s cubic-bezier(0.75, 0, 0.75, 1); transition: transform 0.25s cubic-bezier(0.75, 0, 0.75, 1); } .case__navigation li a.next:hover, .case__navigation li a.prev:hover { color: rgba(255, 255, 255, 0.9); } .case__navigation li a.next:hover::after, .case__navigation li a.prev:hover::after { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } .case__navigation li a.next { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } ul.list { list-style: none; } ul.list li { position: relative; z-index: 1; letter-spacing: .02rem; font-size: 17px; font-size: 1.7rem; line-height: 24px; line-height: 2.4rem; padding: 1.6rem 3.2rem 1.6rem 0; } @media (max-width: 768px) { ul.list li { font-size: 15px; font-size: 1.5rem; line-height: 23px; line-height: 2.3rem; } } ul.list li span { position: absolute; top: 1.3rem; left: 0; width: 2.8rem; height: 2.8rem; z-index: 1; background-color: #fdf3e4; border-radius: 1.4rem; line-height: 2.8rem; text-align: center; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } section:nth-of-type(2n) ul.list li span { background-color: #ffffff; } ul.list li::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; background-color: #fdf3e4; opacity: 0; -moz-transform: scale(1.08, 1); -ms-transform: scale(1.08, 1); -webkit-transform: scale(1.08, 1); transform: scale(1.08, 1); -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } section:nth-of-type(2n) ul.list li::after { background-color: #ffffff; } ul.list li:hover span { background-color: #ffffff; } section:nth-of-type(2n) ul.list li:hover span { background-color: #fdf3e4; } ul.list li:hover::after { opacity: 1; } ul.number li { padding-left: 4.2rem; } ul.faq li { padding-right: 0; } ul.faq li .faq__question { position: relative; padding-right: 6rem; } @media (max-width: 768px) { ul.faq li .faq__question { padding-right: 4rem; } } ul.faq li .faq__question::after { content: '>'; position: absolute; top: 0; right: 0; width: 2.8rem; height: 2.8rem; z-index: 1; background-color: #fdf3e4; border-radius: 1.4rem; text-align: center; font-size: 17px; font-size: 1.7rem; line-height: 24px; line-height: 2.4rem; font-weight: 600; color: #f39202; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } ul.faq li .faq__question:hover::after { background-color: #ffffff; } ul.faq li .faq__answer { padding: 0; padding-right: 6rem; max-height: 0; opacity: 0; visibility: hidden; will-change: max-height; -webkit-transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out, padding 0.1s ease 0.3s, visibility 0s 0.3s; transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out, padding 0.1s ease 0.3s, visibility 0s 0.3s; } ul.faq li.active .faq__question { font-weight: 600; color: #f39202; } ul.faq li.active .faq__question::after { -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); background-color: #ffffff; } ul.faq li.active .faq__answer { padding-top: 16px; opacity: 1; visibility: visible; -moz-transition-delay: 0s; -o-transition-delay: 0s; -webkit-transition-delay: 0s; transition-delay: 0s; max-height: 40rem; } ul.faq li.active::after { opacity: 1; } ul.body__list, .news ul { list-style-position: outside; padding-left: 2rem; } ul.body__list li, .news ul li { letter-spacing: .02rem; font-size: 17px; font-size: 1.7rem; line-height: 24px; line-height: 2.4rem; padding: .3rem 0; } @media (max-width: 768px) { ul.body__list li, .news ul li { font-size: 15px; font-size: 1.5rem; line-height: 23px; line-height: 2.3rem; } } .step { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @media (max-width: 600px) { .step { -webkit-flex-flow: column wrap; -moz-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } } .step.orange { background: #ff7914; background: -moz-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fea360), color-stop(100%, #ff7914)); background: -webkit-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -o-linear-gradient(top, #fea360 0%, #ff7914 100%); background: linear-gradient(to bottom, #fea360 0%, #ff7914 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fea360, endColorstr=#ff7914); } .step.red { background: #ed553a; background: -moz-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1651d), color-stop(100%, #ed553a)); background: -webkit-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: -o-linear-gradient(top, #f1651d 0%, #ed553a 100%); background: linear-gradient(to bottom, #f1651d 0%, #ed553a 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#f1651d, endColorstr=#ed553a); } .step .background { -webkit-box-flex: 0 0 auto; -moz-box-flex: 0 0 auto; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; overflow: hidden; } .step .background img { position: relative; object-fit: cover; width: 100%; height: 100%; } .step .background:after { display: none; } .step__content { color: #ffffff; } .step__inner { padding: 4.2rem 4.2rem 5rem; } @media (max-width: 768px) { .step__inner { padding: 3.2rem 3.2rem 3.8rem; } } @media (max-width: 530px) { .step__inner { padding: 2.4rem 2.4rem 2.8rem; } } .step__number { display: block; margin-bottom: 4.2rem; font-family: "georgia", serif; font-weight: bold; font-size: 75px; font-size: 7.5rem; line-height: 40px; line-height: 4rem; } @media (max-width: 530px) { .step__number { font-size: 55px; font-size: 5.5rem; line-height: 32px; line-height: 3.2rem; margin-bottom: 3.6rem; } } .step h3 { color: #ffffff; } .news__wrapper { margin-top: 3.2rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; } .news__wrapper:after { content: ''; display: block; width: calc((100% / 3) - ((2.4rem * 2) / 3)); } .news__item { position: relative; overflow: hidden; width: 100%; display: block; text-decoration: none; margin-bottom: 24px; } .home .news__item { margin-bottom: 0; } @media (max-width: 768px) { .news__item { margin-bottom: 16px; } } @media (max-width: 768px) { .news__item.small, .home__news div:not(.main) > .news__item { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row no-wrap; -moz-flex-flow: row no-wrap; -ms-flex-flow: row no-wrap; flex-flow: row no-wrap; } .news__item.small .background, .home__news div:not(.main) > .news__item .background { width: 20rem; -webkit-box-flex: 0 0 auto; -moz-box-flex: 0 0 auto; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } .news__item.small .news__header, .home__news div:not(.main) > .news__item .news__header { padding-left: 16px; -webkit-align-self: center; -moz-align-self: center; -ms-align-self: center; align-self: center; } .news__item.small .news__header .news__title, .home__news div:not(.main) > .news__item .news__header .news__title { font-family: "omnes-pro", sans-serif; font-size: 20px; font-size: 2rem; line-height: 24px; line-height: 2.4rem; font-weight: 500; } } @media (max-width: 530px) { .news__item.small .background, .home__news div:not(.main) > .news__item .background { width: 10rem; } .news__item.small .news__header .news__subtitle, .home__news div:not(.main) > .news__item .news__header .news__subtitle { display: none; } .news__item.small .news__header .news__title, .home__news div:not(.main) > .news__item .news__header .news__title { font-size: 16px; font-size: 1.6rem; line-height: 18px; line-height: 1.8rem; } } @media (max-width: 320px) { .news__item.small .background, .home__news div:not(.main) > .news__item .background { -webkit-box-flex: 0 0 8rem; -moz-box-flex: 0 0 8rem; -webkit-flex: 0 0 8rem; -ms-flex: 0 0 8rem; flex: 0 0 8rem; } .news__item.small .background img, .home__news div:not(.main) > .news__item .background img { object-fit: cover; } .news__item.small .news__header .news__title, .home__news div:not(.main) > .news__item .news__header .news__title { font-size: 15px; font-size: 1.5rem; line-height: 18px; line-height: 1.8rem; } } .news__content { pointer-events: none; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .news__content.inside { position: absolute; width: 100%; height: 100%; bottom: 0; padding: 2rem; } .home .news__content.inside { padding: 2.4rem; } @media (max-width: 768px) { .home__news div:not(.main) > .news__item .news__content.inside { position: relative; padding: 0; height: auto; } } @media (max-width: 320px) { .news__content.inside { padding: 16px; } } @media (min-width: 769px) { .news__content.outside { padding: 1.6rem 0; } } .news__content:hover .play { opacity: .9; -moz-transform: translate(-50%, -50%) scale(1, 1); -ms-transform: translate(-50%, -50%) scale(1, 1); -webkit-transform: translate(-50%, -50%) scale(1, 1); transform: translate(-50%, -50%) scale(1, 1); } .news__header { -webkit-align-self: flex-end; -moz-align-self: flex-end; -ms-align-self: flex-end; align-self: flex-end; } .inside .news__header h3, .inside .news__header span { color: #ffffff; } @media (max-width: 768px) { .home__news div:not(.main) > .news__item .inside .news__header h3, .home__news div:not(.main) > .news__item .inside .news__header span { color: #000000; } .home__news div:not(.main) > .news__item .inside .news__header h3 br, .home__news div:not(.main) > .news__item .inside .news__header span br { display: none; } } .outside .news__header h3, .outside .news__header span { color: #000000; } .news__subtitle { font-size: 16px; font-size: 1.6rem; line-height: 20px; line-height: 2rem; letter-spacing: .02rem; text-transform: uppercase; margin-bottom: .2rem; display: block; } @media (max-width: 768px) { .news__subtitle { font-size: 12px; font-size: 1.2rem; line-height: 18px; line-height: 1.8rem; } } .news__title { -webkit-transition: all 0.2s 0.2s; transition: all 0.2s 0.2s; padding-right: 3rem; } @media (max-width: 768px) { .news__title br { display: none; } } @media (max-width: 320px) { .news__title { padding-right: 0; } } .news__title.small { padding-right: .5rem; font-size: 24px; font-size: 2.4rem; line-height: 28px; line-height: 2.8rem; } .news__title.small br { display: none; } .social .background { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #ff7914; background: -moz-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fea360), color-stop(100%, #ff7914)); background: -webkit-linear-gradient(top, #fea360 0%, #ff7914 100%); background: -o-linear-gradient(top, #fea360 0%, #ff7914 100%); background: linear-gradient(to bottom, #fea360 0%, #ff7914 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#fea360, endColorstr=#ff7914); opacity: .25; } .social .background:after { display: none; } .social__items { list-style: none; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; justify-content: center; -ms-flex-pack: center; } @media (max-width: 768px) { .social__items { -webkit-flex-flow: column wrap; -moz-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } } .social__items li { padding: 0 1.2rem; text-transform: capitalize; letter-spacing: .02rem; font-size: 20px; font-size: 2rem; line-height: 20px; line-height: 2rem; } @media (max-width: 768px) { .social__items li { padding: .5rem 0; } } .home .social__items li { font-size: 24px; font-size: 2.4rem; line-height: 24px; line-height: 2.4rem; } .social__items li a { display: block; text-decoration: none; color: #ed6809; } .social__items li i { padding-right: .6rem; font-size: 16px; font-size: 1.6rem; line-height: 20px; line-height: 2rem; } .home .social__items li i { font-size: 20px; font-size: 2rem; line-height: 24px; line-height: 2.4rem; } @media (max-width: 768px) { .home .social__items li i { font-size: 22px; font-size: 2.2rem; line-height: 28px; line-height: 2.8rem; } } .social__items li:hover a { color: #e03314; } .social h2 { color: #ed6809; } @media (max-width: 768px) { .social h2 br { display: none; } } .social p { font-size: 15px; font-size: 1.5rem; line-height: 15px; line-height: 1.5rem; font-weight: 500; } .social__links { margin-top: 1.6rem; list-style: none; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .social__links li { padding: 0 1.6rem 0 0; text-transform: capitalize; letter-spacing: .02rem; } .social__links li .icon { display: inline-block; text-align: center; background-color: #000000; height: 3.2rem; width: 3.2rem; -webkit-transition: 0.3s; transition: 0.3s; } .social__links li .icon i { font-size: 18px; font-size: 1.8rem; line-height: 32px; line-height: 3.2rem; } .social__links li a { text-decoration: none; color: #ed6809; } .social__links li:hover .icon { background-color: #f39202; } .social__links li:hover a { color: #e03314; } .social .inner__wrapper, .social .image__wrapper, .social .video__wrapper-single, .social .video__row { padding-bottom: 7.2rem; } @media (max-width: 768px) { .social .inner__wrapper, .social .image__wrapper, .social .video__wrapper-single, .social .video__row { padding-bottom: 3.2rem; } } .inner__social { position: relative; padding: 8.4rem 10rem; text-align: center; } @media (max-width: 768px) { .inner__social { padding: 8rem 2rem 8.5rem; } } .home .inner__social { padding: 13rem 0 15rem; } @media (max-width: 768px) { .home .inner__social { padding: 8rem 2rem 8.5rem; } } /* background overlay */ .video__player { display: none; background: rgba(0, 0, 0, 0.8); position: fixed; width: 100%; height: 100%; z-index: 20; left: 0; top: 0; } .video__player > div { position: fixed; background: transparent; max-width: 79.6rem; width: 100vw; /* width of YouTube Player */ -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); left: 50%; /* 280 is .5(560), centers x axis*/ top: 50%; /* 157 is .5(315), centers y axis*/ padding: 1rem; } .video__player > div > div { position: relative; width: 100%; /* width of YouTube Player */ height: 0px; /* height of YouTube Player */ padding-bottom: 56.25%; } .video__player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .video__row { -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; margin-left: -8.8rem; margin-right: -8.8rem; width: calc(100% + 17.6rem); } @media (max-width: 960px) { .video__row { margin-left: -4.8rem; margin-right: -4.8rem; width: calc(100% + 9.6rem); } } @media (max-width: 768px) { .video__row { margin-left: -2.6rem; margin-right: -2.6rem; width: calc(100% + 5.2rem); } } @media (max-width: 320px) { .video__row { margin-left: -1.5rem; margin-right: -1.5rem; width: calc(100% + 3rem); } } .video__row:nth-child(odd) { background-color: rgba(254, 163, 96, 0.25); } .video__row .video__header { width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; } @media (max-width: 768px) { .video__row .video__header { -webkit-flex-flow: column nowrap; -moz-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } } .video__row .video__header h2 { margin-bottom: 1rem; } .video__row .video__header h2 span { font-family: "omnes-pro", sans-serif; font-weight: 500; font-size: 17px; font-size: 1.7rem; line-height: 20px; line-height: 2rem; display: block; } .video__row .video__slider { width: 100%; } .video__row .video__slider .swiper-slide { width: auto; } .video__row .video__slider .col-slider { position: r; max-width: 26.4rem; margin-right: 2rem; } .video__row .video__slider .col-slider .background::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } @media (max-width: 768px) { .video__row .video__slider .col-slider { margin-right: .8rem; width: 12rem; } } .video__row .video__slider .col-slider:last-child { margin-right: 0; } .video__row .video__group { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 100%; position: relative; } .video__row .video__group-title { margin-top: 1.5rem; } @media (max-width: 768px) { .video__row .video__group-title { margin-top: .5rem; } } .video__row .video__group::after { content: ''; position: absolute; right: -2.3rem; top: 0; width: .3rem; height: calc(100% - 3.6rem); background-color: #707070; } @media (max-width: 768px) { .video__row .video__group::after { height: calc(100% - 2.5rem); right: -1.2rem; width: .2rem; } } .swiper-slide:last-child .video__group::after { display: none; } .slide-left .background::before { background: #ed553a; background: -moz-linear-gradient(left, #f1651d 0%, #ed553a 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #f1651d), color-stop(100%, #ed553a)); background: -webkit-linear-gradient(left, #f1651d 0%, #ed553a 100%); background: -o-linear-gradient(left, #f1651d 0%, #ed553a 100%); background: linear-gradient(to right, #f1651d 0%, #ed553a 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#f1651d, endColorstr=#ed553a); -moz-animation: slide-left 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; -webkit-animation: slide-left 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; animation: slide-left 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; } .slide-right .background::before { background: #f1651d; background: -moz-linear-gradient(left, #ed553a 0%, #f1651d 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ed553a), color-stop(100%, #f1651d)); background: -webkit-linear-gradient(left, #ed553a 0%, #f1651d 100%); background: -o-linear-gradient(left, #ed553a 0%, #f1651d 100%); background: linear-gradient(to right, #ed553a 0%, #f1651d 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#ed553a, endColorstr=#f1651d); -moz-animation: slide-right 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; -webkit-animation: slide-right 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; animation: slide-right 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; } @media (min-width: 769px) { .iframe__wrapper { padding: 1rem; } } .iframe__wrapper iframe { border: 0; } .footer { background-color: #ffffff; padding-top: 11rem; padding-bottom: 13rem; } @media (max-width: 768px) { .footer { padding-top: 6.5rem; padding-bottom: 8rem; } } .footer .container, .footer div[class^="container"] { box-shadow: none; } .footer h3 { font-size: 24px; font-size: 2.4rem; line-height: 27px; line-height: 2.7rem; margin-bottom: 2.8rem; color: #000000; } .footer h3 a { text-decoration: none; color: #000000; } .footer__wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row no-wrap; -moz-flex-flow: row no-wrap; -ms-flex-flow: row no-wrap; flex-flow: row no-wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; } @media (max-width: 768px) { .footer__wrapper { -webkit-flex-flow: column wrap; -moz-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } } .footer__sponsor { width: 40%; padding-right: 10%; } @media (max-width: 768px) { .footer__sponsor { display: none; } } .footer__sponsor .logo__wrapper { margin-top: 0; } .footer__sponsor .logo { height: 6rem; padding: 0; margin-bottom: 16px; margin-right: 16px; } .footer__sponsor .logo img { max-height: 100%; max-width: 95%; } .footer__contact { width: 25%; padding-right: 5%; } @media (max-width: 768px) { .footer__contact { width: 100%; padding-right: 0; padding-bottom: 4.2rem; } } .footer__contact h3 { margin-bottom: 4.2rem; } .footer__contact .contact__adress { margin-top: 4.2rem; font-size: 20px; font-size: 2rem; line-height: 26px; line-height: 2.6rem; font-weight: 500; } .footer__initiative { max-width: 35%; } @media (max-width: 768px) { .footer__initiative { width: 100%; padding-right: 0; } } .footer__initiative img { max-width: 100%; max-height: 7rem; } .footer .credit { margin-top: 4.4rem; font-size: 12px; font-size: 1.2rem; line-height: 12px; line-height: 1.2rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; } .footer .credit span { color: rgba(0, 0, 0, 0.5); } .footer .credit span a { color: rgba(0, 0, 0, 0.5); text-decoration: none; -webkit-transition: color 0.3s; transition: color 0.3s; } .footer .credit span a:hover { color: #000000; } .http404 .container--small { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .er-404__container { width: 80rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (max-width: 960px) { .er-404__container { width: 60rem; } } @media (max-width: 768px) { .er-404__container { width: 100%; } } .er-404__wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @media (max-width: 768px) { .er-404__wrapper { -webkit-flex-flow: column wrap; -moz-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; } } .er-404__img { width: 50%; } .er-404__img svg { width: 25rem; max-height: 37rem; } @media (max-width: 768px) { .er-404__img svg { width: 15rem; } } .er-404__content { padding: 2.4rem; } .er-404__title { font-size: 83px; font-size: 8.3rem; line-height: 83px; line-height: 8.3rem; margin-bottom: 1.6rem; } .er-404__subtitle { font-size: 40px; font-size: 4rem; line-height: 46px; line-height: 4.6rem; } .er-404__list-title { margin-top: 3rem; margin-bottom: 1rem; font-size: 20px; font-size: 2rem; line-height: 20px; line-height: 2rem; } .er-404__list { list-style: none; } .er-404__list li { font-size: 20px; font-size: 2rem; line-height: 32px; line-height: 3.2rem; } .er-404__list li a { text-decoration: none; } .toggle { 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; } @media (max-width: 768px) { .toggle { padding: .8rem 0; margin: 1rem 0; border-top: 1px solid rgba(254, 163, 96, 0.3); border-bottom: 1px solid rgba(254, 163, 96, 0.3); -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; } } .toggle input { opacity: 0; width: 0; height: 0; } .toggle__label { font-weight: 500; margin-right: 1rem; } .toggle__slider { position: relative; display: inline-block; cursor: pointer; width: 5.6rem; height: 2.6rem; background-color: #ed6809; -webkit-transition: .4s; transition: .4s; border-radius: 2.3rem; } .toggle__slider:before { position: absolute; content: ""; height: 2.2rem; width: 2.2rem; left: .2rem; bottom: .2rem; background-color: white; -webkit-transition: 0.3s ease-out; transition: 0.3s ease-out; border-radius: 50%; } .toggle__slider:after { content: 'UIT'; color: #ffffff; font-weight: 600; position: absolute; -moz-transform: translateX(2.5rem); -ms-transform: translateX(2.5rem); -webkit-transform: translateX(2.5rem); transform: translateX(2.5rem); left: .6rem; top: .2rem; font-size: 11px; font-size: 1.1rem; line-height: 20px; line-height: 2rem; -webkit-transition: 0.3s ease-out; transition: 0.3s ease-out; } input:checked + .toggle__slider { background-color: #A8D810; } input:checked + .toggle__slider::before { -moz-transform: translateX(3rem); -ms-transform: translateX(3rem); -webkit-transform: translateX(3rem); transform: translateX(3rem); } input:checked + .toggle__slider::after { content: 'AAN'; -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } input:focus + .toggle__slider { box-shadow: 0 0 1px #A8D810; }