@if not-imported("import_once_func") { @import "inc/import_once_func"; }
//@import "inc/normalize.css"; // Normalize browser defaults
@if not-imported("framework") { @import "inc/framework"; } // Load framework
/* ------ COMMON CLASSES ------ */
@if not-imported("common") { @import "inc/common"; }
/* ------ BASE FONT STYLING ------ */
@if not-imported("font") { @import "inc/font"; }
/* ------ BASE FORM STYLING ------ */
@if not-imported("form") { @import "inc/form"; }
/* ------ HEADER ------ */
@if not-imported("header") { @import "inc/header"; }
/* ------ HERO ------ */
@if not-imported("hero") { @import "inc/hero"; }
/* ------ CONTENT ------ */
@if not-imported("content") { @import "inc/content"; }
/* ------ FOOTER ------ */
@if not-imported("footer") { @import "inc/footer"; }
@if not-imported("slick-theme") { @import "inc/slick-theme"; }
@if not-imported("custom-elements") { @import "inc/custom-elements"; }
#wrapper {
padding: 0;
position: relative;
min-height: 100vh;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@media screen and (max-width: 1120px) {
padding-top: 0;
}
@media screen and (max-width: 900px) {
padding-bottom: 0;
}
}
.-arrow-left-top {
padding-left: 150px;
position: relative;
&:not(.ce_text) {
&:before {
content: '';
width: 50px;
height: 100px;
background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E") 0 0 no-repeat;
position: absolute;
left: 75px;
top: 0;
@include transform(translate(-50%,0));
}
}
&.ce_text {
.text {
position: relative;
&:before {
content: '';
width: 50px;
height: 100px;
background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E") 0 0 no-repeat;
position: absolute;
left: -75px;
top: 0;
@include transform(translate(-50%,0));
}
}
}
}
.arrow_right {
background-color: $color-bg-tertiary;
color: $color-text-invert;
position: relative;
min-height: 450px;
&:before {
position: absolute;
top:0;
bottom: 0;
left: 100%;
width: 50px;
content: '';
background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22%23000000%22%20viewBox%3D%220%200%2010%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C100%20L10%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 100% 50%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
}
.widget p.error {
margin-top: 0.125em;
font-size: font-size(16px);
color: #a00;
}
.boxed {
@include box;
.boxed & {
background-color: inherit;
padding: 0;
@include box-sizing(border-box);
}
}
.mod_login {
.lostPassword {
padding: 0 10px;
clear: left;
a {
font-size: font-size(10px);
text-transform: uppercase;
letter-spacing: 0.1em;
color: $color-text;
font-weight: 600;
}
}
}
.mod_lostPassword,
.mod_changePassword,
.mod_closeAccount {
.widget {
width: 33.333%;
}
@include for-max-size(43em) {
.widget {
float: none;
width: 100% !important;
}
}
}
.mod_changePassword {
.widget:nth-child(2) {
clear: left;
}
}
.messagebox {
position: relative;
min-height: 45px;
padding: 5px 15px 5px 45px;
display: flex;
align-items: center;
background-color: $color-bg-quaternary;
color: $color-text-invert;
font-size: font-size(12px);
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.1em;
text-transform: uppercase;
@include box-sizing(border-box);
&:before {
position: absolute;
left: 5px;
top: 5px;
width: 35px;
height: 35px;
content: '';
background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" width="1.725em" height="1.725em" viewBox="0 0 32 32"%3E%3Cpath d="M16 4.992c-6.075 0-11.008 4.932-11.008 11.008s4.932 11.008 11.008 11.008c6.075 0 11.008-4.933 11.008-11.008s-4.933-11.008-11.008-11.008zM16 6.746c5.108 0 9.254 4.147 9.254 9.254s-4.147 9.254-9.254 9.254c-5.108 0-9.254-4.147-9.254-9.254s4.147-9.254 9.254-9.254z"%3E%3C/path%3E%3Cpath d="M14.636 15.225v7.010c0 0.753 0.611 1.364 1.364 1.364s1.364-0.611 1.364-1.364v-7.010c0-0.753-0.611-1.364-1.364-1.364s-1.364 0.611-1.364 1.364z"%3E%3C/path%3E%3Cpath d="M17.364 10.549v-0.779c0-0.753-0.611-1.364-1.364-1.364s-1.364 0.611-1.364 1.364v0.779c0 0.753 0.611 1.364 1.364 1.364s1.364-0.611 1.364-1.364z"%3E%3C/path%3E%3C/svg%3E') no-repeat 50% 50%;
}
&.confirm {
&:before {
background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" width="1.725em" height="1.725em" viewBox="0 0 32 32"%3E%3Cpath d="M12.259 21.696l9.465-15.941c0.437-0.736 1.388-0.978 2.124-0.541s0.978 1.388 0.541 2.124c0 0-9.465 15.941-9.465 15.941l-2.241 3.773c0 0-2.807-3.373-2.807-3.373l-5.509-6.619c-0.547-0.657-0.458-1.635 0.2-2.183s1.635-0.458 2.183 0.2l5.509 6.619z"%3E%3C/path%3E%3C/svg%3E') no-repeat 50% 50%;
}
}
&.error {
&:before {
background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" width="1.725em" height="1.725em" viewBox="0 0 32 32"%3E%3Cpath d="M14.428 6.454c-2.155 3.629-8.034 13.53-10.228 17.226-0.335 0.565-0.342 1.267-0.017 1.838s0.932 0.924 1.589 0.924c4.349 0 16.107 0 20.456 0 0.657 0 1.264-0.353 1.589-0.924s0.319-1.273-0.017-1.838c-2.194-3.696-8.073-13.597-10.228-17.226-0.329-0.555-0.927-0.895-1.572-0.895s-1.243 0.34-1.572 0.895v0zM15.96 7.363c0.008-0.014 0.024-0.023 0.040-0.023s0.032 0.009 0.040 0.023c2.155 3.629 8.034 13.53 10.228 17.226 0.009 0.015 0.009 0.032 0 0.047s-0.024 0.024-0.041 0.024c-4.349 0-16.107 0-20.456 0-0.017 0-0.032-0.009-0.041-0.024s-0.008-0.033 0-0.047l10.228-17.226z"%3E%3C/path%3E%3Cpath d="M15.109 11.113v7.063c0 0.491 0.399 0.891 0.891 0.891s0.891-0.399 0.891-0.891v-7.063c0-0.492-0.399-0.891-0.891-0.891s-0.891 0.399-0.891 0.891z"%3E%3C/path%3E%3Cpath d="M15.109 21.269v1.188c0 0.491 0.399 0.891 0.891 0.891s0.891-0.399 0.891-0.891v-1.188c0-0.492-0.399-0.891-0.891-0.891s-0.891 0.399-0.891 0.891z"%3E%3C/path%3E%3C/svg%3E') no-repeat 50% 50%;
}
}
a {
color: $color-text-invert;
border-bottom: 1px $color-text-invert solid;
@include transition(color 0.2s ease, border-color 0.2s ease);
&:hover,
&:active {
border-bottom-color: $color-bg-secondary;
color: $color-bg-secondary;
}
}
}
.jBox-overlay {
background-color: rgba(#000,0.82);
&.jBox-overlay-Image {
background: $color-bg-secondary;
}
}
.jBox-wrapper {
.jBox-container {
@include border-radius(unset);
}
.jBox-title {
background-color: $color-bg-secondary;
color: $color-text-invert;
@include border-radius(unset);
text-align: center;
h3 {
font-family: $font-family;
color: $color-text-invert;
font-weight: 400;
font-size: font-size(20px);
//text-transform: uppercase;
//letter-spacing: 0.1em;
margin: 0;
text-align: center;
}
.jBox-closeButton-title& {
padding-left: 65px;
}
}
.jBox-closeButton-box& {
.jBox-closeButton {
width: 35px;
height: 35px;
background: $color-bg-secondary;
svg {
width: 20px;
height: 20px;
margin-top: -10px;
margin-right: -10px;
}
path {
fill: #fff;
}
}
}
.jBox-iframe& {
.jBox-content {
@include box-sizing(border-box);
overflow: hidden;
> iframe {
width: 100%;
height: 100%;
}
}
}
.jBox-noPadding& {
.jBox-content {
padding: 0;
}
}
}
#cconsent-bar {
&#cconsent-bar {
padding: 15px 45px;
color: $color-text;
font-size: font-size(16px) !important;
@include for-tablet {
padding: 15px 30px;
}
@include for-mobile {
padding: 15px;
}
}
.ccb__wrapper {
font-family: $font-family;
button,
.ccb__edit {
@include button($color: $color-text,$background-color: $color-text-invert, $border-color: $color-text-invert, $color-hover: $color-text-invert, $background-color-hover: $color-bg-secondary, $border-color-hover: $color-bg-secondary);
letter-spacing: 0.1em;
text-decoration: none;
}
}
}
#cconsent-modal {
.ccm__content.ccm__content {
font-family: $font-family;
font-size: font-size(16px);
background-color: $color-bg-senary;
> .ccm__content__heading.ccm__content__heading {
background-color: $color-bg-senary;
h2 {
@include small-caps;
font-size: font-size(30px);
letter-spacing: normal;
}
}
> .ccm__content__body.ccm__content__body {
.ccm__tabgroup {
.ccm__tab-head {
background-color: $color-bg-primary;
color: $color-text;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
&:before {
position: absolute;
left: 1em;
top: 50%;
margin-top: -0.5em;
font-size: 1.25em;
width: 1em;
height: 1em;
content: '';
background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23990000" viewBox="0 0 32 32"%3E%3Cpath d="M6.393 26.806l10.192-10.192c0.327-0.327 0.327-0.859 0-1.186s-0.859-0.327-1.186 0l-10.192 10.192c-0.327 0.327-0.327 0.859 0 1.186s0.859 0.327 1.186 0z"%3E%3C/path%3E%3Cpath d="M5.165 6.38l10.235 10.235c0.327 0.327 0.859 0.327 1.186 0s0.327-0.859 0-1.186l-10.235-10.235c-0.327-0.327-0.859-0.327-1.186 0s-0.327 0.859 0 1.186z"%3E%3C/path%3E%3Cpath d="M25.607 26.806l-10.192-10.192c-0.327-0.327-0.327-0.859 0-1.186s0.859-0.327 1.186 0l10.192 10.192c0.327 0.327 0.327 0.859 0 1.186s-0.859 0.327-1.186 0z"%3E%3C/path%3E%3Cpath d="M26.835 6.38l-10.235 10.235c-0.327 0.327-0.859 0.327-1.186 0s-0.327-0.859 0-1.186l10.235-10.235c0.327-0.327 0.859-0.327 1.186 0s0.327 0.859 0 1.186z"%3E%3C/path%3E%3C/svg%3E') no-repeat 50% 50%;
}
}
.ccm__tab-content {
h3 {
@include small-caps;
font-size: font-size(25px);
letter-spacing: normal;
}
}
&.ccm__tabgroup--open {
.ccm__tab-head {
background-color: $color-bg-quinary;
}
.ccm__tab-content {
background-color: $color-bg-senary;
}
}
&.checked-5jhk {
.ccm__tab-head {
&:before {
background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%2328A834" viewBox="0 0 32 32"%3E%3Cpath d="M12.259 21.696l9.465-15.941c0.437-0.736 1.388-0.978 2.124-0.541s0.978 1.388 0.541 2.124c0 0-9.465 15.941-9.465 15.941l-2.241 3.773c0 0-2.807-3.373-2.807-3.373l-5.509-6.619c-0.547-0.657-0.458-1.635 0.2-2.183s1.635-0.458 2.183 0.2l5.509 6.619z"%3E%3C/path%3E%3C/svg%3E') no-repeat 50% 50%;
}
}
}
}
}
.ccm__footer.ccm__footer {
background-color: $color-bg-senary;
button {
@include button;
letter-spacing: 0.1em;
text-decoration: none;
}
}
}
}
.mountain {
color: $color-bg-tertiary;
text-align: center;
img {
font-size: 40vh;
vertical-align: bottom;
}
margin-bottom: -100px;
}
.client-showcase {
.swiper-wrapper {
align-items: flex-end;
}
}
.swiper-holder {
&.-full-vh {
.swiper-slide {
min-height: 100vh;
}
}
}
.swiper-button-prev,
.swiper-button-next {
width: 25px;
height: 50px;
margin-top: -25px;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
&:after {
content: '';
//background: url('data:image/svg+xml;utf8,%3Csvg width="100%" height="100%" viewBox="0 0 22 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cpath d="M22,0L20,0L0,40L20,80L22,80L2,40L22,0Z" style="fill:white;"/%3E%3C/svg%3E');
background: $color-white;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M1.678,65.45c-1.409,-2.509 -1.409,-5.581 0,-8.09l36.13,-54.92c1.41,-2.31 5.08,-3.18 7.05,-1.74l15,7c2.22,1.39 2.78,5.14 1.37,7.46l-30.23,46.24l29.95,45.67c1.69,2.6 0.84,6.36 -0.85,7.52l-15.24,7.22c-2.25,1.45 -5.64,0.29 -7.05,-1.73l-36.13,-54.63Z' style='fill:%23000000;fill-rule:nonzero;'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M1.678,65.45c-1.409,-2.509 -1.409,-5.581 0,-8.09l36.13,-54.92c1.41,-2.31 5.08,-3.18 7.05,-1.74l15,7c2.22,1.39 2.78,5.14 1.37,7.46l-30.23,46.24l29.95,45.67c1.69,2.6 0.84,6.36 -0.85,7.52l-15.24,7.22c-2.25,1.45 -5.64,0.29 -7.05,-1.73l-36.13,-54.63Z' style='fill:%23000000;fill-rule:nonzero;'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
width: 25px;
height: 50px;
opacity: 0.7;
@include transition(opacity 0.25s ease);
}
&:hover {
&:after {
//background: url('data:image/svg+xml;utf8,%3Csvg width="100%" height="100%" viewBox="0 0 22 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cpath d="M22,0L20,0L0,40L20,80L22,80L2,40L22,0Z" style="fill:%23BA0C2F;"/%3E%3C/svg%3E');
opacity: 1;
}
}
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
&:after {
content: '';
//background: url('data:image/svg+xml;utf8,%3Csvg width="100%" height="100%" viewBox="0 0 22 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cpath d="M0,0L2,0L22,40L2,80L0,80L20,40L0,0Z" style="fill:white;"/%3E%3C/svg%3E');
background: $color-white;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23000000;fill-rule:nonzero;'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 62 123' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M60.32,65.45c1.409,-2.509 1.409,-5.581 0,-8.09l-36.13,-54.92c-1.41,-2.31 -5.08,-3.18 -7.05,-1.74l-15,7c-2.22,1.39 -2.78,5.14 -1.37,7.46l30.23,46.24l-29.95,45.67c-1.69,2.6 -0.84,6.36 0.85,7.52l15.24,7.22c2.25,1.45 5.64,0.29 7.05,-1.73l36.13,-54.63Z' style='fill:%23000000;fill-rule:nonzero;'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
width: 25px;
height: 50px;
opacity: 0.7;
@include transition(opacity 0.25s ease);
}
&:hover {
&:after {
//background: url('data:image/svg+xml;utf8,%3Csvg width="100%" height="100%" viewBox="0 0 22 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cpath d="M0,0L2,0L22,40L2,80L0,80L20,40L0,0Z" style="fill:%23BA0C2F;"/%3E%3C/svg%3E');
opacity: 1;
}
}
}
.mod_cfg_instagram {
.items {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.item {
text-align: center;
font-size: font-size(16px);
line-height: 1.3;
flex: 0 1 25%;
margin: 0;
overflow: hidden;
padding: 0;
//border: 1px solid $color-stroke;
outline: none;
color: $color-text;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
.image_container {
vertical-align: middle;
position: relative;
&:before,
&:after {
@include transition(all 1.5s cubic-bezier(0.45, 0, 0.55, 1));
}
&:before {
z-index: 1;
background: rgba($color-bg-secondary, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
opacity: 0;
content: '';
}
/*&:after {
@include icon('\e912',26px);
z-index: 2;
position: absolute;
left: 50%;
top: 50%;
visibility: hidden;
opacity: 0;
margin: -13px 0 0 -13px;
color: rgba(255, 255, 255, 0.75);
-webkit-transform: scale3d(0.5,0.5,1);
-moz-transform: scale3d(0.5,0.5,1);
-ms-transform: scale3d(0.5,0.5,1);
-o-transform: scale3d(0.5,0.5,1);
transform: scale3d(0.5,0.5,1);
}*/
img {
@include object-fit;
@include transform(translateZ(0));
@include transition(all 1.5s cubic-bezier(0.45, 0, 0.55, 1));
}
}
.show-link {
margin: 0;
span {
@include button($color: $color-text-invert, $border-color: $color-stroke-grey, $background-color: rgba(#000,0.2));
z-index: 2;
position: absolute;
bottom: 1em;
left: 50%;
@include transform(translateX(-50%));
}
}
.close-link,
.show-link span {
cursor: pointer;
}
.meta {
z-index: 2;
opacity: 0;
visibility: hidden;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: left;
background-color: rgba($color-bg-tertiary,0.8);
padding: font-size(22px) font-size(27px) font-size(90px);
color: $color-text-invert;
@include transition(all 0.5s ease);
.close-link {
float: right;
font-size: font-size(32px);
line-height: 1;
margin: -10px -10px 5px 10px;
}
ul {
position: absolute;
bottom: 3.5rem;
left: font-size(27px);
right: font-size(27px);
font-size: font-size(14px);
margin: 0;
li {
position: relative;
color: $color-text-invert;
svg {
font-size: 1.5em;
}
&[data-icon] {
padding-left: 17px;
&:before {
line-height: #{font-size(14px) * 1.5};
font-size: font-size(12px);
position: absolute;
left: 0;
top: 0;
}
}
}
}
}
.insta-link {
@include button($color: $color-text-invert, $border-color: $color-stroke-grey, $background-color: rgba(#000,0.2));
position: absolute;
left: 50%;
bottom: 1rem;
z-index: 1;
@include transform(translateX(-50%));
}
&:hover {
.image_container {
&:before,
&:after {
opacity: 1;
visibility: visible;
}
img {
@include transform(scale(1.15,1.15) translateZ(0));
}
&:after {
-webkit-transform: scale3d(1,1,1);
-moz-transform: scale3d(1,1,1);
-ms-transform: scale3d(1,1,1);
-o-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}
}
}
&.show {
.meta {
opacity: 1;
visibility: visible;
}
.show-link {
opacity: 0;
visibility: hidden;
}
}
}
@media screen and (max-width: 900px) {
.item {
flex-basis: 50%;
}
}
@media screen and (max-width: 599px) {
.items {
margin-left: 0;
}
.item {
flex-basis: 100%;
margin-left: 0;
}
}
}
.contao-cookiebar.contao-cookiebar {
.cc-btn{
&, &.success {
background: $color-bg-secondary;
border-color: $color-bg-secondary;
color: $color-text-invert;
@include border-radius(0);
}
}
p {
color: $color-text-invert;
}
.cc-inner {
color: $color-text-invert;
font-size: font-size(16px);
@include border-radius(0);
background: rgba(#202533,0.95);
}
.cc-cookies {
background: rgba(#202533,1);
.cc-cookie .cc-cookie-info {
background: #12171d;
color: #fff;
border-color: #363d4f;
}
.cc-cookie .cc-cookie-desc {
h1,h2,h3,h4,h5,h6 {
font-size: 1.15em;
color: $color-text-invert;
}
p {
margin-bottom: 0.75em;
&:last-child {
margin-bottom: 0;
}
}
a {
color: #ff4268;
&:hover {
color: mix(#ff4268,#000,80%);
}
}
}
}
}
/* ------ Fusion Popup ------ */
@mixin fp_center_wrapper {
text-align: center;
display: flex;
align-items: center;
> * {
flex: 1 0 auto;
max-width: 100%;
}
}
.fusion_popup {
background: #fff;
/*position: fixed;
left: 50%;
top: 50%;
@include transform(translate(-50%,-50%));
max-width: 650px;
width: 100%;*/
.fp-title {
background: url("../images/fusion_popup/hero_popup.jpg") center bottom no-repeat;
-webkit-background-size: cover;
background-size: cover;
@include aspect-ratio(5,2,true);
@include fp_center_wrapper;
padding: 7.5% 0 11.55%;
}
.fp-body {
@include fp_center_wrapper;
padding: 1em 0 0;
}
.fp-action {
background: url("../images/fusion_popup/footer_black@2x.jpg") center top no-repeat;
-webkit-background-size: cover;
background-size: cover;
@include fp_center_wrapper;
padding: 11.55% 0 7.5%;
a {
font-size: font-size(55px);
color: #fff;
@include for-max-size(650px) {
font-size: 8.9vw;
}
}
}
&,
p,
h3,
.image_container {
@include headline();
margin: 0 0 0.5em;
line-height: 1.15;
font-size: font-size(45px);
&:last-child {
margin-bottom: 0;
}
@include for-max-size(650px) {
font-size: 7.3vw;
}
}
.image_container {
margin: 0 25px;
img {
vertical-align: middle;
width: 350px;
max-width: 100%;
}
}
}
.ce_accordion {
+ .ce_accordion {
margin-top: 5px;
}
.toggler {
cursor: pointer;
display: block;
background-color: $color-bg-tertiary;
color: $color-text-invert;
font-size: font-size(25px);
padding: 10px 50px 10px 15px;
line-height: 30px;
position: relative;
outline: none;
overflow: hidden;
@include transition(all 0.25s ease);
.arrow {
position: absolute;
top:0;
bottom: 0;
right: 0;
width: 50px;
fill: $color-bg-secondary;
@include transition(all 0.25s ease);
}
/*&:before {
position: absolute;
top:0;
bottom: 0;
right: 0;
width: 50px;
content: '';
background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23000000%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M10%2C0%20L100%2C0%20L100%2C100%20L10%2C100%20L0%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 100% 50%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
//@include transform(translate(50%,-50%));
@include transition(transform 0.25s ease);
}*/
&:before,
&:after {
z-index: 1;
position: absolute;
top: 50%;
font-size: 35px;
@include transform(translate(50%,-50%));
@include transition(all 0.25s ease);
}
&:before {
right: 20px;
content: '+';
opacity: 1;
visibility: visible;
}
&:after {
top: 22px;
right: 25px;
content: '–';
opacity: 0;
visibility: hidden;
}
&.ui-state-active {
background-color: $color-bg-secondary;
color: $color-text-invert;
&:before {
opacity: 0;
visibility: hidden;
}
&:after {
opacity: 1;
visibility: visible;
}
.arrow {
@include transform(rotate(-90deg));
fill: $color-bg-tertiary;
max-height:50px;
}
}
}
.accordion {
padding: 1.5rem 1rem;
background: $color-bg-primary;
}
}
#eye-catcher {
@include centered();
z-index: 1;
figure {
position: absolute;
right: 0;
bottom: 100%;
margin-bottom: 5vw;
@include for-max-size(1230px) {
right: 15px;
}
a {
&:before {
display: none;
}
}
img {
max-width: 33vw;
width: 300px;
}
}
}