@if not-imported("import_once_func") { @import "import_once_func"; } @if not-imported("framework") { @import "framework"; } .content-wrapper { @include centered-1200; @include box-sizing(border-box); } .video_container { video { vertical-align: middle; } .responsive { overflow: hidden; position: relative; video { max-width:100%; height:auto; left: 0; position: absolute; top: 0; } iframe { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } &.ratio-169 { padding-top: 56.25%; } &.ratio-1610 { padding-top: 62.5%; } &.ratio-219 { padding-top: 42.85%; } &.ratio-43 { padding-top: 75%; } &.ratio-32 { padding-top: 66.66%; } } } .image_container { &, picture { overflow: hidden; } img { vertical-align: middle; } a { display: inline-block; vertical-align: bottom; overflow: hidden; position: relative; &:before/*, &:after*/ { -webkit-transition: all 0.25s; -moz-transition: all 0.25s; -ms-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s; } &:before { //background: rgba(255, 255, 255, 0.25) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.821 26.973l-9.492-9.249c1.182-1.802 1.874-3.953 1.874-6.268 0-6.327-5.128-11.455-11.455-11.455s-11.454 5.128-11.454 11.455c0 6.326 5.128 11.454 11.454 11.454 1.88 0 3.649-0.462 5.213-1.263l9.771 9.521c0.569 0.555 1.307 0.832 2.044 0.832 0.763 0 1.524-0.296 2.098-0.886 1.129-1.158 1.106-3.013-0.053-4.142zM19.256 11.455c0 1.783-0.625 3.418-1.662 4.705-0.528 0.655-1.164 1.215-1.88 1.661-1.152 0.718-2.507 1.14-3.966 1.14-4.146 0-7.507-3.361-7.507-7.507s3.361-7.508 7.507-7.508c4.147 0 7.508 3.361 7.508 7.508z"></svg>'); background: rgba(255, 255, 255, 0.25) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23323535" width="1.5em" height="1.5em" viewBox="0 0 32 32"%3E%3Cpath d="M30.821 26.973l-9.492-9.249c1.182-1.802 1.874-3.953 1.874-6.268 0-6.327-5.128-11.455-11.455-11.455s-11.454 5.128-11.454 11.455c0 6.326 5.128 11.454 11.454 11.454 1.88 0 3.649-0.462 5.213-1.263l9.771 9.521c0.569 0.555 1.307 0.832 2.044 0.832 0.763 0 1.524-0.296 2.098-0.886 1.129-1.158 1.106-3.013-0.053-4.142zM19.256 11.455c0 1.783-0.625 3.418-1.662 4.705-0.528 0.655-1.164 1.215-1.88 1.661-1.152 0.718-2.507 1.14-3.966 1.14-4.146 0-7.507-3.361-7.507-7.507s3.361-7.508 7.507-7.508c4.147 0 7.508 3.361 7.508 7.508z"/%3E%3C/svg%3E') 50% 50% no-repeat; position: absolute; top: 0; bottom: 0; left: 0; right: 0; visibility: hidden; opacity: 0; content: ''; } /*&:after { @include icon('\e906',26px); position: absolute; left: 50%; top: 50%; visibility: hidden; opacity: 0; margin: -13px 0 0 -13px; color: rgba(0, 0, 0, 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); }*/ &:hover { &:before/*, &:after*/ { opacity: 1; visibility: visible; } /*&: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); }*/ } } figcaption { padding: 5px 0 0; font-size: font-size(13px); color: $color-text-breadcrumb; line-height: 1.3; } &.float_right { float: right; margin: 0 0 $gutter-default $gutter-default; } &.float_left { float: left; margin: 0 $gutter-default $gutter-default 0; } @media screen and (max-width: 599px) { &.float_right { float: none; margin: 0 0 $gutter-default; } &.float_left { float: none; margin: 0 0 $gutter-default; } } } .embed-wrapper { position: relative; .embed-arrow { z-index: 2; background-color: $color-bg-tertiary; color: $color-text-invert; position: absolute; left: 0; top: 0; bottom: 0; right: 60%; right: calc(50% + 250px); @include for-max-size(1200px) { right: auto; width: 250px; } &: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%; } + .embed-map { right: 0; left: 40%; left: calc(50% - 250px); width: auto; @include for-max-size(1200px) { left: 0; padding-left: 250px; iframe { left: 250px; right: 0; width: calc(100% - 250px); } } } } .embed-map { z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } .embed-arrow-inside { @include aspect-ratio(2,0.75,true); @include centered-1200; //z-index: 1; display: flex; align-items: center; .embed-arrow-text-holder { display: inline-flex; justify-content: center; width: 50%; padding-right: 250px; @include box-sizing(border-box); @include for-max-size(1200px) { width: 235px; padding-right: 0; } } .embed-arrow-text { z-index: 2; em, i { font-style: normal; color: $color-text-alt; } & { color: $color-text-invert; } h1, h2, h3, h4, h5, h6 { text-align: left; color: $color-text-alt; em, i { color: $color-text-invert; } } } } @include for-mobile { display: flex; flex-direction: column; .embed-arrow { display: none; + .embed-map { order: 2; position: relative; padding: 0; @include aspect-ratio(2,1); iframe { width: 100%; left: 0; } } } .embed-arrow-inside { width: 100%; justify-content: center; order: 1; background: $color-bg-tertiary; .embed-arrow-text-holder { padding: 50px 0; &, h1,h2,h3,h4,h5,h6 { text-align: center; } } } } } /** * Icon handling */ *[data-icon] { &:before { @include icon; content: attr(data-icon); margin-right: 0.5ex; } &.-after { &:before { content: none; } &:after { @include icon(attr(data-icon)); margin-left: 0.5ex; } } } .show-mobile { display: none; @include for-mobile { display: block; } } .show-tablet { display: none; @include for-tablet { display: block; } } .show-tablet-up { display: none; @include for-tablet-up { display: block; } } .show-desktop-up { display: none; @include for-desktop-up { display: block; } } /** * Separator */ hr { border: none; border-bottom: 1px $color-stroke-grey solid; margin: 1.5em 0; } /** * Lists */ ul, ol { &.list { padding-top: 0.25em; margin-bottom: 0.75em; li { position: relative; line-height: 1.3; padding: 0 0 0.25em 15px; &:last-child { padding-bottom: 0; } &:before { //@include icon("\e913",100%,1); line-height: 1; font-size: 100%; content: '\2022'; color: $color-list-icon; position: absolute; left: 0; top: 0.1em; } &[data-icon] { &:before { content: attr(data-icon); } } } &.list-check { li { &:before { content: '\e98e'; } } } } &.attribute_list { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; .attribute { font-size: font-size(13px); text-transform: uppercase; font-weight: 600; line-height: 1/13*(12*1.5); letter-spacing: 0.1em; position: relative; padding: 0.25em 0 0.25em 140px; min-height: 1.5em; .label { font-size: font-size(12px); text-transform: uppercase; font-weight: 600; line-height: 1.5; letter-spacing: 0.1em; color: $color-bg-quaternary; position: absolute; max-width: 130px; left: 0; top: 0.25em; &:after { //content: ':'; } } @include for-mobile { padding-left: 0; margin-bottom: 0.5em; .label { position: relative; left: auto; top: auto; display: block; } } &.rows { padding-left: 0; font-family: $font-family-alternate; font-size: font-size(16px); letter-spacing: normal; text-transform: none; line-height: 1/16*(12*1.5); margin-bottom: 0.5em; p { margin-bottom: 0.5em; } .label { font-family: $font-family; font-size: font-size(12px); position: relative; left: auto; top: auto; display: block; } } &.spacing { margin-bottom: 1.5em; } } } } ol { padding-left: 1.1em; &.list { li { padding-left: 5px; &:before { content: none; } } } } .ce_text, .hero-wrapper, .ce_hyperlink { ul,ol { @extend .list; } a:not(.button) { &[target="_blank"]:not(.-ico-dl), &.-emphasised-block:not(.-ico-dl), .-emphasised-block& { &:before { content: ''; width: .5em; height: 1em; display: inline-block; position: relative; background: $color-link; background: currentColor; -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:%23#{str-replace($color-bg-secondary,'#','')};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:%23#{str-replace($color-bg-secondary,'#','')};fill-rule:nonzero;'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; vertical-align: middle; margin-right: 10px; @include transition(all 0.2s ease); } &:hover { &:before { background: mix($color-link,#000,80%); @include transform(translateX(5px)); } } } &.-emphasised-block, .-emphasised-block& { font-size: font-size(25px); text-transform: uppercase; font-weight: 700; font-family: $font-family-alternate; letter-spacing: 0.05em; } /*&.-ico-dl { &:before { @include icon('\e908'); margin-right: 5px; } } &.-ico-goto { &:before { @include icon('\e90a'); margin-right: 5px; } }*/ } } /** * Multi column text */ .ce_text { &.layout_2col { .text { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: $gutter-default; -moz-column-gap: $gutter-default; column-gap: $gutter-default; p, div, ul, ol, dl { break-inside: avoid-column; break-before: auto; } h1, h2, h3, h4, h5, h6 { break-inside: avoid-column; break-after: avoid-column; } } @media screen and (max-width: 599px) { .text { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } } } } /** * Back links */ p.back, .ce_hyperlink.back { clear: both; > a { text-transform: uppercase; font-size: font-size(14px); font-weight: 600; color: $color-text; letter-spacing: 0.1em; svg { vertical-align: -1px; font-size: font-size(12px); } } } /** * Boxes */ %box { @include box; } %box-white { @include box-white; } %box-grey { @include box-grey; } .box { @extend %box; } /** * Slider related */ .negate-slider-pagination { margin-bottom: -30px; /*@media screen and (max-width: 900px) { &.-medium-col-1-1 { margin-bottom: 0; } } @media screen and (max-width: 599px) { &.-small-col-1-1 { margin-bottom: 0; } }*/ } /** * PAGINATION */ .pagination { @include box; line-height: 35px; display: flex; p { font-size: font-size(14px); float: left; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 auto 0 0; } ul { text-align: center; position: relative; padding: 0; margin: 0 0 0 auto; } li { display: inline-block; vertical-align: middle; margin-bottom: 0; a { &:hover { border-bottom-color: $color-bg-secondary; color: mix($color-link,#000,60%); } } a,strong { font-weight: 400; display: block; min-width: 1.5em; height: 2em; line-height: 2em; padding: 0 0.125em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-bottom: 2px transparent solid; color: $color-link; text-align: center; -webkit-transition: all 0.25s; -moz-transition: all 0.25s; -ms-transition: all 0.25s; -o-transition: all 0.25s; transition: all 0.25s; &.active { border-bottom-color: $color-bg-secondary; color: $color-text; font-weight: 600; } &.next, &.previous, &.first, &.last { position: relative; text-indent: -9999em; overflow: hidden; //color: $color-link; &:before, &:after { content: ''; width: 1em; height: 1em; position: absolute; left: 50%; top: 50%; @include transform(translate(-50%,-50%)); } } &.next { &:before { background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M24.262 16.064c-0.025 1.433-0.607 2.82-1.616 3.843l-12.093 12.093-2.815-2.815c4.040-4.039 8.156-8.003 12.118-12.118 0.548-0.584 0.553-1.573-0.035-2.168l-12.083-12.083 2.815-2.815 12.092 12.092c1.035 1.050 1.624 2.5 1.617 3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat; } } &.previous { &:before { background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M7.738 15.936c0.025-1.433 0.607-2.82 1.616-3.843l12.093-12.093 2.815 2.815c-4.040 4.039-8.156 8.003-12.118 12.118-0.548 0.584-0.553 1.573 0.035 2.168l12.083 12.083-2.815 2.815-12.092-12.092c-1.035-1.050-1.624-2.5-1.617-3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat; } } &.last { &:before { background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M24.262 16.064c-0.025 1.433-0.607 2.82-1.616 3.843l-12.093 12.093-2.815-2.815c4.040-4.039 8.156-8.003 12.118-12.118 0.548-0.584 0.553-1.573-0.035-2.168l-12.083-12.083 2.815-2.815 12.092 12.092c1.035 1.050 1.624 2.5 1.617 3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat; } } &.first { &:before { background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23C48F3A" width="1em" height="1em" viewBox="0 0 32 32"%3E%3Cpath d="M7.738 15.936c0.025-1.433 0.607-2.82 1.616-3.843l12.093-12.093 2.815 2.815c-4.040 4.039-8.156 8.003-12.118 12.118-0.548 0.584-0.553 1.573 0.035 2.168l12.083 12.083-2.815 2.815-12.092-12.092c-1.035-1.050-1.624-2.5-1.617-3.973z"/%3E%3C/svg%3E') 50% 50% no-repeat; } } } } } /* --- CALLOUTS --- */ .callout { border-left: 30px solid #BBB; background-color: #EEE; padding: 15px 15px 15px 15px; display: block; position: relative; margin-bottom: 0.75em; &.info { border-left-color: #fab200; background-color: #fff3d4; color: #966c00; } &.success { border-left-color: #52A256; background-color: #e7f3e7; color: #376c39; &:before { content: "\e86c"; } } &.warning { border-left-color: #e27b41; background-color: #faeae0; color: #b6531c; &:before { content: "\e002"; } } &.danger { border-left-color: #E84F4F; background-color: #fce8e8; color: #b91818; &:before { content: "\e000"; } } &:before { position: absolute; left: -15px; top: 50%; line-height: 1; text-align: center; @include iconfont; font-size: font-size(20px); color: #fff; content: "\eaae"; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } /** * Gallery */ .ce_gallery { ul { display: flex; align-items: flex-start; flex-wrap: wrap; margin-left: -#{$gutter-default}; .-centered& { align-items: center; justify-content: center; } .-flex-inline& { display: inline-flex; } .-valign-center& { align-items: center; } .-variable-grid& { margin-left: 0; align-items: stretch; flex-wrap: nowrap; > li { margin-left: 0; flex-grow: 1; background-color: $color-bg-lightgrey; height: 25vw; max-height: 600px; } @for $i from 1 through 12 { &.cols_#{$i} > li { flex-basis: auto; } } figure { display: inline; } img { max-height: 600px; height: 25vw; object-fit: cover; max-width: 100%; min-width: 100%; vertical-align: bottom; } } & > li { flex: 0; max-width: 100%; min-width: 0; margin-top: $gutter-default; margin-left: $gutter-default; &.row_first { margin-top: 0; } } @for $i from 1 through 12 { &.cols_#{$i} > li { flex-basis: 100% / $i - $gutter-default; } } @media screen and (max-width: 900px) { $gutter: floor((1 / 900) * 1000000) / 1000000 * 30 * 100%; margin-left: -#{$gutter}; & > li { margin-top: $gutter; margin-left: $gutter; &.row_first { margin-top: 0; } } @for $i from 1 through 12 { &.cols_#{$i} > li { flex-basis: 100% / $i - $gutter; } } } @media screen and (max-width: 599px) { $gutter: floor((1 / 599) * 1000000) / 1000000 * 30 * 100%; margin-left: -#{$gutter}; & > li { margin-top: $gutter; margin-left: $gutter; &.row_first { margin-top: $gutter; } &:first-child { margin-top: 0; } } @for $i from 1 through 12 { &.cols_#{$i} > li { flex-basis: 100% - $gutter; } } } } } .ce_form { position: relative; padding: 0 12.5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @include for-tablet { padding: 6.25%; } @include for-mobile { padding: 0; } } p.info { font-size: font-size(12px); text-transform: uppercase; color: $color-text-info; letter-spacing: 0.1em; line-height: 1.3; font-weight: 600; } .modal-content { display: none; } @-webkit-keyframes swiperNextAnimation { 0% { opacity: 1; @include transform(translateX(0)); } 50% { opacity: .5; @include transform(scale(0.75)); } 100% { opacity: 1; @include transform(translateX(0) scale(1)); } } @keyframes swiperNextAnimation { 0% { opacity: 1; @include transform(translateX(0)); } 50% { opacity: .5; @include transform(scale(0.75)); } 100% { opacity: 1; @include transform(translateX(0) scale(1)); } } @-webkit-keyframes swiperPrevAnimation { 0% { opacity: 0; @include transform(translateX(0)); } 45% { opacity: .7; @include transform(scale(0.75)); } 90% { opacity: 0; @include transform(scale(0.75)); } 100% { opacity: 0; @include transform(translateX(0) scale(1)); } } @keyframes swiperPrevAnimation { 0% { opacity: 0; @include transform(translateX(0)); } 45% { opacity: .7; @include transform(scale(0.75)); } 90% { opacity: 0; @include transform(scale(0.75)); } 100% { opacity: 0; @include transform(translateX(0) scale(1)); } } @keyframes underlineAnimation { 0% { width: 0; } 100% { width: 100%; } } /** * Text Positioning */ @mixin text-position-wrapper($horizontal: center, $vertical: middle) { display: flex; align-items: center; @if $horizontal == center { justify-content: center; } @else if $horizontal == left { justify-content: flex-start; } @else if $horizontal == right { justify-content: flex-end; } > * { max-width: 100%; //display: block; @if $vertical == middle { align-self: center; } @else if $vertical == top { align-self: flex-start; } @else if $vertical == topmiddle { align-self: center; @include transform(translateY(-100%)); } @else if $vertical == bottommiddle { align-self: center; @include transform(translateY(100%)); } @else if $vertical == bottom { align-self: flex-end; } } } /** * Custom Formats */ .emphasised { font-size: 1.125em; text-transform: uppercase; font-weight: 700; font-family: $font-family-alternate; letter-spacing: 0.05em; color: $color-bg-secondary; } .color-default { color: $color-text; } .color-platin { color: $color-bg-secondary; } .color-brown { color: $color-bg-primary; }