/** * Owl Carousel v2.2.1 * Copyright 2013-2017 David Deutsch * Licensed under () */ /* * Owl Carousel - Core */ .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; -moz-backface-visibility: hidden; /* fix firefox animation glitch */ } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .owl-carousel .owl-item img { display: block; width: 100%; } .owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled { display: none; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel.owl-refresh .owl-item { visibility: hidden; } .owl-carousel.owl-drag .owl-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* * Owl Carousel - Animate Plugin */ .owl-carousel .animated { animation-duration: 1000ms; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { animation-name: fadeOut; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* * Owl Carousel - Auto Height Plugin */ .owl-height { transition: height 500ms ease-in-out; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity 400ms ease; } .owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; } /*@font-face { font-family: ; src: url("../font/") format("woff"); font-style: normal; font-weight: normal; } @font-face { font-family: ; src: url("../font/") format("woff"); font-style: normal; font-weight: bold; } @font-face { font-family: ; src: url("../font/") format("woff"); font-style: normal; font-weight: bold; } @font-face { font-family: ; src: url("../font/") format("woff"); font-style: normal; font-weight: bold; }*/ h1 { font-family: "franklin-gothic-urw"; font-size: 5.6em; font-weight: bold; line-height: 1em; color: #4f4f4f; } *:not(svg):not(.is-not-copy) + h1 { margin-top: calc(2em / 5.6); } #hero h1 { color: #ffffff; } .HomePage #hero h1 { text-shadow: 2px 2px 9px rgba(0, 0, 0, 0.5); } .intro .copy.is-wysiwyg h1.hero-title { margin-top: calc(4em / 3.6); font-size: 3.6em; text-align: center; text-transform: uppercase; } @media screen and (max-width: 768px) { .intro .copy.is-wysiwyg h1.hero-title { font-size: calc(3.6em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .intro .copy.is-wysiwyg h1.hero-title { font-size: calc(3.6em * 1.5); } } h2 { font-family: "franklin-gothic-urw"; font-size: 3em; font-weight: bold; color: #003c71; } *:not(svg):not(.is-not-copy) + h2 { margin-top: calc(2em / 3); } @media screen and (max-width: 768px) { h2 { font-size: calc(3em * 1.5); } *:not(svg):not(.is-not-copy) + h2 { margin-top: calc(3em / 3 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { h2 { font-size: calc(3em * 1.5); } *:not(svg):not(.is-not-copy) + h2 { margin-top: calc(3em / 3 * 1.5); } } .what-is-proposed .image-container .label h2 { text-transform: uppercase; color: #ffffff !important; text-shadow: 0px 0px 1.25em black; } .what-is-proposed .image-container .label h2 span { position: relative; top: 0.25em; } .component-ugnsw-btn-project .label h2 { font-size: 3em; font-weight: normal; color: #ffffff; } @media screen and (max-width: 768px) { .component-ugnsw-btn-project .label h2 { font-size: calc(3em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .component-ugnsw-btn-project .label h2 { font-size: calc(3em * 1.5); } } .UsefulLinkWidget.widget-full-width .component-ugnsw-btn-project .label h2 { font-size: 2.5em; } @media screen and (max-width: 768px) { .UsefulLinkWidget.widget-full-width .component-ugnsw-btn-project .label h2 { font-size: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .UsefulLinkWidget.widget-full-width .component-ugnsw-btn-project .label h2 { font-size: calc(2em * 1.5); } } .FacebookWidget h2, .TwitterWidget h2 { padding: calc(2em / 3) calc(2em / 3); } @media screen and (max-width: 768px) { .FacebookWidget h2, .TwitterWidget h2 { paddiung: calc(2em / 3 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .FacebookWidget h2, .TwitterWidget h2 { paddiung: calc(2em / 3 * 1.5); } } .FaqHolder .faq-container h2.title-container { margin-top: 0; padding-top: calc(2em / 3.6); padding-bottom: calc(2em / 3.6); } .FaqHolder .faq-container h2.title-container .label { margin-left: calc(2em / 3.6); } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .FaqHolder .faq-container h2.title-container .label { width: calc(100% - (12em + 2em) / 3.6); } } .FaqHolder .faq-container h2.title-container .line hr { margin: 0.75em calc(8em / 3.6) 0 calc(2em / 3.6); } .FaqHolder .faq-container h2.title-container .icon-container { width: calc(3.6em / 3.6); height: calc(3.6em / 3.6); position: absolute; right: calc(2em / 3.6); top: calc(1em / 3.6); } .FaqHolder .faq-container h2.title-container .icon-container .icon-close, .FaqHolder .faq-container h2.title-container .icon-container .icon-open { width: inherit; height: inherit; position: absolute; top: 0; left: 0; } .gallery-container h2.widget-title { margin-bottom: calc(2em / 3); } #hero h2 { font-size: 2.2em; font-weight: normal; color: #ffffff; } @media screen and (max-width: 768px) { #hero h2 { font-size: calc(2.2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #hero h2 { font-size: calc(2.2em * 1.5); } } #hero *:not(.is-not-copy) + h2 { margin-top: calc(2em / 1.8); } @media screen and (max-width: 768px) { #hero *:not(.is-not-copy) + h2 { margin-top: calc(2em / 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #hero *:not(.is-not-copy) + h2 { margin-top: calc(2em / 1.5); } } .LinkWidget .design-style-id-1 .copy.is-wysiwyg h2, .LinkWidget .design-style-id-2 .copy.is-wysiwyg h2 { color: #ffffff; } .map-container h2.info-window-title { width: calc(100% - 2em / 2.8); padding: calc(1em / 2.8) calc(1em / 2.8); font-size: 2.8em; letter-spacing: calc(0.05em / 2.8); text-align: center; text-transform: uppercase; background-color: #ffffff; color: #D0021B; } @media screen and (max-width: 768px) { .map-container h2.info-window-title { font-size: calc(2.8em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .map-container h2.info-window-title { font-size: calc(2.8em * 1.5); } } .map-container h2.info-window-title span { position: relative; top: 0.15em; } .map-container * + h2.info-window-title { margin-top: calc(2em / 2.8); } @media screen and (max-width: 768px) { .map-container * + h2.info-window-title { margin-top: calc(2em / 2.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .map-container * + h2.info-window-title { margin-top: calc(2em / 2.8 * 1.5); } } .news-container .related-news h2 { margin-bottom: calc(2em / 3); } .StandardWidget .component-standard-content .title-container h2 { color: #003c71; } .StandardWidget .component-standard-content.is-highlighted .title-container h2 { color: #ffffff !important; } .StandardWidget .component-standard-content .title-container .icon + h2 { margin-top: 0; display: inline-block; vertical-align: middle; } .StatisticsByNumbersWidget h2.widget-title { color: #ffffff; } .sustainability-case-studies .btn-project .label h2 { position: absolute; bottom: calc(2em / 3); } .SustainabilityCaseStudyHolderPage .intro .copy.is-wysiwyg h2.intro-title:first-child, .SustainabilityCaseStudyPage .intro .copy.is-wysiwyg h2.intro-title:first-child, .SustainabilityPage .intro .copy.is-wysiwyg h2.intro-title:first-child { margin-top: calc(4em / 3); text-align: center; } .SustainabilityCaseStudyHolderPage .intro .copy.is-wysiwyg .hero-title + h2.intro-title, .SustainabilityCaseStudyPage .intro .copy.is-wysiwyg .hero-title + h2.intro-title, .SustainabilityPage .intro .copy.is-wysiwyg .hero-title + h2.intro-title { margin-top: calc(2em / 2); font-size: 2em; text-transform: none; text-align: center; } @media screen and (max-width: 768px) { .SustainabilityCaseStudyHolderPage .intro .copy.is-wysiwyg .hero-title + h2.intro-title, .SustainabilityCaseStudyPage .intro .copy.is-wysiwyg .hero-title + h2.intro-title, .SustainabilityPage .intro .copy.is-wysiwyg .hero-title + h2.intro-title { font-size: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .SustainabilityCaseStudyHolderPage .intro .copy.is-wysiwyg .hero-title + h2.intro-title, .SustainabilityCaseStudyPage .intro .copy.is-wysiwyg .hero-title + h2.intro-title, .SustainabilityPage .intro .copy.is-wysiwyg .hero-title + h2.intro-title { font-size: calc(2em * 1.5); } } .TimelineWidget .time .time-date h2 { margin-top: -0.25em; font-size: 2.6em; color: #4f4f4f; } @media screen and (max-width: 768px) { .TimelineWidget .time .time-date h2 { margin-top: calc(-0.25em * 1.5); font-size: calc(2.6em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .TimelineWidget .time .time-date h2 { margin-top: calc(-0.25em * 1.5); font-size: calc(2.6em * 1.5); } } .TimelineWidget .time.active .time-date h2 { color: #D0021B; } .UsefulLinkWidget.is-post-standard-widget h2 .label { margin-left: calc(1em / 3); } @media screen and (max-width: 768px) { .UsefulLinkWidget.is-post-standard-widget h2 .label { margin-left: calc(1em / 3 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .UsefulLinkWidget.is-post-standard-widget h2 .label { margin-left: calc(1em / 3 * 1.5); } } h3 { font-family: "franklin-gothic-urw"; font-size: 2.6em; font-weight: bold; color: #4f4f4f; } *:not(svg):not(.is-not-copy) + h3 { margin-top: calc(2em / 2.6); } @media screen and (max-width: 768px) { h3 { font-size: calc(2.6em * 1.5); } *:not(svg):not(.is-not-copy) + h3 { margin-top: calc(2em / 2.6 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { h3 { font-size: calc(2.6em * 1.5); } *:not(svg):not(.is-not-copy) + h3 { margin-top: calc(2em / 2.6 * 1.5); } } .widget-content h3 { font-size: 2em; } @media screen and (max-width: 768px) { .widget-content h3 { font-size: calc(2em * 1.5); } *:not(svg):not(.is-not-copy) + .widget-content h3 { margin-top: calc(2em / 2 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .widget-content h3 { font-size: calc(2em * 1.5); } *:not(svg):not(.is-not-copy) + .widget-content h3 { margin-top: calc(2em / 2 * 1.5); } } .active-video-and-playlist h3 .counter, .publications-topic h3 .counter, .video-playlist-container h3 .counter { font-size: calc(1.6em / 2.6); vertical-align: super; } @media screen and (max-width: 768px) { .active-video-and-playlist h3 .counter, .publications-topic h3 .counter, .video-playlist-container h3 .counter { font-size: calc(1.6em / 2.6* $fontSizeMultiplierTablet); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .active-video-and-playlist h3 .counter, .publications-topic h3 .counter, .video-playlist-container h3 .counter { font-size: calc(1.6em / 2.6 * 1.5); } } .awards-container .content-width > h3 { color: #D0021B; } .awards-container .copy > h3 { font-size: 2em; } @media screen and (max-width: 768px) { .awards-container .copy > h3 { font-size: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .awards-container .copy > h3 { font-size: calc(2em * 1.5); } } .bio .name-container h3 { font-size: 2em; color: #003c71; } @media screen and (max-width: 768px) { .bio .name-container h3 { font-size: 2em; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .bio .name-container h3 { font-size: calc(2em * 1.5); } } .bio .copy h3 { margin-top: 0; font-size: 1.4em; } @media screen and (max-width: 768px) { .bio .copy h3 { font-size: 1.8em; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .bio .copy h3 { font-size: calc(1.4em * 1.5); } } .btn-award .copy h3, .btn-publication .copy h3 { text-transform: uppercase; } @media screen and (max-width: 768px) { .btn-award .copy h3, .btn-publication .copy h3 { margin-right: calc(1em / 2.6 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .btn-award .copy h3, .btn-publication .copy h3 { margin-right: calc(1em / 2.6 * 1.5); } } .btn-award .copy h3 { margin-bottom: calc(2em / 2.6); } @media screen and (max-width: 768px) { .btn-award .copy h3 { margin-right: calc(2em / 2.6 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .btn-award .copy h3 { margin-right: calc(2em / 2.6 * 1.5); } } .btn-career .copy h3 { display: inline-block; text-transform: uppercase; } .btn-projects .image-container .label h3 { margin-top: 0; font-size: 2em; color: #8e9698; text-shadow: none; line-height: normal; } @media screen and (max-width: 768px) { .btn-projects .image-container .label h3 { font-size: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .btn-projects .image-container .label h3 { font-size: calc(2em * 1.5); } } .btn-projects .image-container .label h3 span { position: static; } .btn-projects .image-container .label *:not(svg):not(.is-not-copy) + h3 { margin-top: calc(2em / 2); } @media screen and (max-width: 768px) { .btn-projects .image-container .label *:not(svg):not(.is-not-copy) + h3 { margin-right: calc(2em / 2 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .btn-projects .image-container .label *:not(svg):not(.is-not-copy) + h3 { margin-right: calc(2em / 2 * 1.5); } } .btn-videos .btn-video .copy h3 { text-transform: uppercase; } .events-container .btn-events .btn-event .clickable-area .copy h3 { text-transform: uppercase; } .FaqHolder .faq-item .title-container h3 { font-size: 2em; } @media screen and (max-width: 768px) { .FaqHolder .faq-item .title-container h3 { font-size: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .FaqHolder .faq-item .title-container h3 { font-size: calc(2em * 1.5); } } .gallery-container .gallery-items .gallery-item .copy h3 { text-transform: uppercase; font-size: 2em; } @media screen and (max-width: 768px) { .gallery-container .gallery-items .gallery-item .copy h3 { font-size: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .gallery-container .gallery-items .gallery-item .copy h3 { font-size: calc(2em * 1.5); } } .gallery-container .gallery-items .gallery-item .copy *:not(svg):not(.is-not-copy) + h3 { margin-top: calc(2em / 2); } @media screen and (max-width: 768px) { .gallery-container .gallery-items .gallery-item .copy *:not(svg):not(.is-not-copy) + h3 { margin-top: calc(2em / 2 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .gallery-container .gallery-items .gallery-item .copy *:not(svg):not(.is-not-copy) + h3 { margin-top: calc(2em / 2 * 1.5); } } .housing-job-populations-widget .scenarios .scenario h3 { margin-top: 0; display: inline-block; vertical-align: middle; font-weight: bold; color: #D0021B; } @media screen and (max-width: 768px) { .housing-job-populations-widget .scenarios .scenario h3 { margin-left: calc(5em / 2.6 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .housing-job-populations-widget .scenarios .scenario h3 { margin-left: calc(5em / 2.6 * 1.5); } } .ImageComparisonWidget .comparison-caption h3, .MapWidget .user-comment-controls h3, .PostItWidget h3 { font-size: 2em; } @media screen and (max-width: 768px) { .ImageComparisonWidget .comparison-caption h3, .MapWidget .user-comment-controls h3, .PostItWidget h3 { font-size: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .ImageComparisonWidget .comparison-caption h3, .MapWidget .user-comment-controls h3, .PostItWidget h3 { font-size: calc(2em * 1.5); } } .info-graphic-item h3 { color: #D0021B; } .LinkWidget .design-style-id-1 .copy.is-wysiwyg h3, .LinkWidget .design-style-id-2 .copy.is-wysiwyg h3 { color: #ffffff; } .news-container .news-article h3 { margin-bottom: calc(2em / 2); font-size: 2em; } @media screen and (max-width: 768px) { .news-container .news-article h3 { margin-bottom: calc(2em / 2 * 1.5); font-size: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .news-container .news-article h3 { margin-bottom: calc(2em / 2 * 1.5); font-size: calc(2em * 1.5); } } .news-container .news-article *:not(svg):not(.is-not-copy) + h3 { margin-top: calc(2em / 2); } @media screen and (max-width: 768px) { .news-container .news-article *:not(svg):not(.is-not-copy) + h3 { margin-top: calc(2em / 2 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .news-container .news-article *:not(svg):not(.is-not-copy) + h3 { margin-top: calc(2em / 2 * 1.5); } } .OutcomesWidget .outcome.open h3 { color: #D0021B; } .PublicationHolder .publications-topic > h3 { color: #003c71; } .shared-vision-item h3 { color: #D0021B; } .snapshots-container div.snapshot .label h3 { font-size: 1em; color: #D0021B; } @media screen and (max-width: 768px) { .snapshots-container div.snapshot .label h3 { font-size: calc(1em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .snapshots-container div.snapshot .label h3 { font-size: calc(1em * 1.5); } } .snapshots-container div.snapshot .label h3 .highlight { font-size: 3em; } @media screen and (max-width: 768px) { .snapshots-container div.snapshot .label h3 .highlight { font-size: calc(3em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .snapshots-container div.snapshot .label h3 .highlight { font-size: calc(3em * 1.5); } } .snapshots-container div.snapshot .label h3 .description { margin-left: calc(1em / 2); font-size: 2em; color: #616161; } @media screen and (max-width: 768px) { .snapshots-container div.snapshot .label h3 .description { font-size: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .snapshots-container div.snapshot .label h3 .description { font-size: calc(2em * 1.5); } } .snapshots-container div.snapshot .label *:not(svg):not(.is-not-copy) + h3 { margin-top: calc(2em / 2); } @media screen and (max-width: 768px) { .snapshots-container div.snapshot .label *:not(svg):not(.is-not-copy) + h3 { margin-top: calc(2em / 2 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .snapshots-container div.snapshot .label *:not(svg):not(.is-not-copy) + h3 { margin-top: calc(2em / 2 * 1.5); } } .stages-timeline-item.active h3 { color: #ffffff; } .stages-timeline-item.completed h3 { color: #D0021B; } .TimelineWidget .time.active .copy h3 { color: #D0021B; } .video h3.video-title { font-size: 2em; } @media screen and (max-width: 768px) { .video h3.video-title { font-size: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .video h3.video-title { font-size: calc(2em * 1.5); } } .UsefulLinkWidget.is-post-standard-widget h3 { font-size: 1.8em; font-weight: normal; } @media screen and (max-width: 768px) { .UsefulLinkWidget.is-post-standard-widget h3 { font-size: calc(1.8em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .UsefulLinkWidget.is-post-standard-widget h3 { font-size: calc(1.8em * 1.5); } } h4 { font-family: "franklin-gothic-urw"; font-size: 2em; font-weight: bold; color: #4f4f4f; } *:not(svg):not(.is-not-copy) + h4 { margin-top: calc(2em / 2); } @media screen and (max-width: 768px) { h4 { font-size: calc(2em * 1.5); } * + h4 { margin-top: calc(2em / 2 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { h4 { font-size: calc(2em * 1.5); } * + h4 { margin-top: calc(2em / 2 * 1.5); } } .bio .btn-bio .name-container h4 { margin-top: 0; font-size: 1.4em; color: #4f4f4f; } @media screen and (max-width: 768px) { .bio .btn-bio .name-container h4 { font-size: calc(1.4em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .bio .btn-bio .name-container h4 { font-size: calc(1.4em * 1.5); } } .component-ugnsw-btn-project .label h4 { font-size: 1.5em; font-weight: normal; color: #ffffff; margin-top: 0.5em; } @media screen and (max-width: 768px) { .component-ugnsw-btn-project .label h4 { font-size: calc(1.2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .component-ugnsw-btn-project .label h4 { font-size: calc(1.2em * 1.5); } } .LinkWidget .design-style-id-1 .copy.is-wysiwyg h4, .LinkWidget .design-style-id-2 .copy.is-wysiwyg h4 { color: #ffffff; } .PublicationHolder h4.subcategory { color: #D0021B; } .StandardWidget .subtitle-container .icon + h4 { margin-top: 0; display: inline-block; vertical-align: middle; } h5 { font-family: "franklin-gothic-urw"; font-size: 1.8em; font-weight: bold; color: #4f4f4f; } *:not(svg):not(.is-not-copy) + h5 { margin-top: calc(1.8em / 2); } @media screen and (max-width: 768px) { h5 { font-size: calc(1.8em * 1.5); } * + h5 { margin-top: calc(1.8em / 2 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { h5 { font-size: calc(1.8em * 1.5); } * + h5 { margin-top: calc(1.8em / 2 * 1.5); } } .LinkWidget .design-style-id-1 .copy.is-wysiwyg h5, .LinkWidget .design-style-id-2 .copy.is-wysiwyg h5 { color: #ffffff; } a { font-family: "franklin-gothic-urw"; font-size: inherit; font-weight: normal; color: #3eb1c8; } @media screen and (min-aspect-ratio: 35 / 40) { a.breadcrumb-item:hover { text-decoration: underline; } } .copy a, .wysiwyg a { text-decoration: underline; transition: color 0.25s; } @media screen and (min-aspect-ratio: 35 / 40) { .copy a:hover, .wysiwyg a:hover { color: #D0021B; } } a.register-your-interest { font-size: 1.7em; } @media screen and (max-width: 768px) { a.register-your-interest { font-size: calc(1.7em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { a.register-your-interest { font-size: calc(1.7em * 1.5); } } .map-container a.btn-open-map { width: calc(100% - 4em / 1.8); height: calc(4em / 1.8); padding-right: calc(4em / 1.8); line-height: calc(4em / 1.8); text-align: right; } .map-container a.btn-open-map .icon { width: calc(4em / 1.8); background-size: calc(1.4em / 1.8) auto; } .btn-tabs a.btn-tab:not(.btn-tab-unstyled) { padding: calc(1em / 2); border: 1px solid rgba(0, 0, 0, 0.25); border-bottom: 1px solid transparent; border-radius: 5px 5px 0 0; margin-top: calc(1em / 2); font-size: 2em; color: #4f4f4f; background-color: #ffffff; background-position: calc(1em / 2) center; background-size: calc(1.5em / 2) auto; } .btn-tabs a.btn-tab:not(.btn-tab-unstyled):not(.active) { top: calc(0.5em / 2); } @media screen and (max-width: 768px) { .btn-tabs a.btn-tab:not(.btn-tab-unstyled) { font-size: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .btn-tabs a.btn-tab:not(.btn-tab-unstyled) { font-size: calc(2em * 1.5); } } footer#margin-bottom a { margin-right: calc(2em / 1.4); white-space: nowrap; color: #ffffff; } @media screen and (min-aspect-ratio: 35 / 40) { footer#margin-bottom a:hover { text-decoration: underline; } } @media screen and (max-width: 768px) { footer#margin-bottom a { margin-right: calc(2em / 1.4 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { footer#margin-bottom a { margin-right: calc(2em / 1.4 * 1.5); } } footer#margin-bottom .social-links a + a { margin-left: calc(1em / 1); } @media screen and (max-width: 768px) { footer#margin-bottom .social-links a + a { margin-left: calc(1em / 1 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { footer#margin-bottom .social-links a + a { margin-left: calc(1em / 1 * 1.5); } } .projects .btn-tabs a.btn-tab { padding-left: calc(3.5em / 2); } @media screen and (max-width: 768px) { .projects .btn-tabs a.btn-tab { padding-left: calc(3.5em / 2 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .projects .btn-tabs a.btn-tab { padding-left: calc(3.5em / 2 * 1.5); } } .SearchBoxWidget .popular-keywords a { padding: calc(1em / 1.8); margin-right: calc(1em / 1.8); display: inline-block; background-color: #dbdbdb; color: #4f4f4f; transition: background-color 0.25s, color 0.25s; } @media screen and (min-aspect-ratio: 35 / 40) { .SearchBoxWidget .popular-keywords a:hover { background-color: #6d6e72; color: #ffffff; } } @media screen and (max-width: 768px) { .SearchBoxWidget .popular-keywords a { padding: calc(1em / 1.8 * 1.5); margin-right: calc(1em / 1.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .SearchBoxWidget .popular-keywords a { padding: calc(1em / 1.8 * 1.5); margin-right: calc(1em / 1.8 * 1.5); } } .SharedVision a { color: #D0021B; } .social-share-container a.btn { font-size: 1em; } @media screen and (max-width: 768px) { .social-share-container a.btn { font-size: inherit; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .social-share-container a.btn { font-size: inherit; } } .social-share-container a.btn .label { width: calc(67em / 0.75); height: calc(48em / 0.75); top: calc(50% - 24em / 0.75); left: -11.5em; font-weight: bold; text-transform: uppercase; color: #ffffff !important; } @media screen and (max-width: 768px) { .social-share-container a.btn .label { font-size: 1.8em; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .social-share-container a.btn .label { font-size: 1.8em; } } .StandardWidget .component-standard-content.is-highlighted a { color: #ffffff; } @media screen and (min-aspect-ratio: 35 / 40) { .StandardWidget .component-standard-content.is-highlighted a:hover { color: #D0021B; } } .UsefulLinkWidget.is-post-standard-widget a { color: #6d6e72; } @media screen and (min-aspect-ratio: 35 / 40) { .UsefulLinkWidget.is-post-standard-widget a:hover { color: #D0021B; } } p, li, dt, dd, td { font-family: "franklin-gothic-urw"; font-size: 1.8em; font-weight: normal; line-height: 1.5em; color: #6d6e72; } @media screen and (max-width: 768px) { p, li, dt, dd, td { font-size: calc(1.8em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { p, li, dt, dd, td { font-size: calc(1.8em * 1.5); } } p p, p li, p dt, p dd, p td, p span, p a, li p, li li, li dt, li dd, li td, li span, li a, dt p, dt li, dt dt, dt dd, dt td, dt span, dt a, dd p, dd li, dd dt, dd dd, dd td, dd span, dd a, td p, td li, td dt, td dd, td td, td span, td a { font-size: 1em; } .StandardWidget .component-standard-content.is-highlighted p, .StandardWidget .component-standard-content.is-highlighted li, .StandardWidget .component-standard-content.is-highlighted dt, .StandardWidget .component-standard-content.is-highlighted dd, .StandardWidget .component-standard-content.is-highlighted td { color: #ffffff; } *:not(svg):not(.is-not-copy) + p { margin-top: calc(2em / 1.8); } @media screen and (max-width: 768px) { *:not(svg):not(.is-not-copy) + p { margin-top: calc(2em / 1.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { *:not(svg):not(.is-not-copy) + p { margin-top: calc(2em / 1.8 * 1.5); } } .archived-flag p { font-weight: bold; font-style: italic; text-align: center; color: #ffffff; } .archived-flag p.completed-project .label { padding-left: calc(3em / 1.8); } @media screen and (max-width: 768px) { .archived-flag p.completed-project .label { padding-left: calc(3em / 1.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .archived-flag p.completed-project .label { padding-left: calc(3em / 1.8 * 1.5); } } #breadcrumb p { font-size: 1.4em; } @media screen and (max-width: 768px) { #breadcrumb p { font-size: calc(1.4em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #breadcrumb p { font-size: calc(1.4em * 1.5); } } .btn-career .copy p { margin-top: calc(2em / 1.8); } @media screen and (max-width: 768px) { .btn-career .copy p { margin-top: calc(2em / 1.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .btn-career .copy p { margin-top: calc(2em / 1.8 * 1.5); } } .comments-section p.message { padding: calc(2em / 1.8); color: #ffffff; background-color: #001325 !important; } @media screen and (max-width: 768px) { .comments-section p.message { margin-top: calc(2em / 1.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .comments-section p.message { margin-top: calc(2em / 1.8 * 1.5); } } .comments-section p.message.closed { padding: calc(2em / 2.6); font-size: 2.6em; font-weight: bold; background-color: #840111 !important; } @media screen and (max-width: 768px) { .comments-section p.message.closed { margin-top: calc(2em / 2.6 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .comments-section p.message.closed { margin-top: calc(2em / 2.6 * 1.5); } } .faq-container .see-more .clickable-area p { font-style: italic; } footer#margin-bottom .footer-links p { font-size: 1.8em; color: #ffffff; } @media screen and (max-width: 768px) { footer#margin-bottom .footer-links p { font-size: calc($fontSizeFooter * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { footer#margin-bottom .footer-links p { font-size: calc($fontSizeFooter * 1.5); } } footer#margin-bottom p.copyright { font-size: 1.8em; line-height: calc(3em / 1.8); } @media screen and (max-width: 768px) { footer#margin-bottom p.copyright { font-size: calc($fontSizeFooter * 1.5); line-height: calc(3em / 1.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { footer#margin-bottom p.copyright { font-size: calc($fontSizeFooter * 1.5); line-height: calc(3em / 1.8 * 1.5); } } footer#margin-bottom .social-links p { font-size: 1em; } @media screen and (max-width: 768px) { footer#margin-bottom .social-links p { font-size: calc(1em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { footer#margin-bottom .social-links p { font-size: calc(1em * 1.5); } } p.meta-data-text { margin-top: 0 !important; font-size: 1.4em; font-style: italic; } @media screen and (max-width: 768px) { p.meta-data-text { font-size: calc(1.4em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { p.meta-data-text { font-size: calc(1.4em * 1.5); } } p.meta-data-text.pdf { padding-left: calc(1em + 5px); background-image: url(../image/ui/icon-pdf.svg); background-position: left center; background-size: auto 1em; background-repeat: no-repeat; } .news-container .btn-news .clickable-area .copy p { margin-top: 0.5em; } @media screen and (max-width: 768px) { .news-container .btn-news .clickable-area .copy p { margin-top: calc(0.5em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .news-container .btn-news .clickable-area .copy p { margin-top: calc(0.5em * 1.5); } } .ProjectHolder .map-legend .content-width .map-legend-items .map-legend-item p { padding-left: 5px; font-weight: bold; font-style: italic; } .LinkWidget .design-style-id-1 .copy.is-wysiwyg p, .LinkWidget .design-style-id-2 .copy.is-wysiwyg p, .StatisticsByNumbersWidget p { color: #ffffff; } .quick-links-group .btn-more p { font-style: italic; } #sitemap-list.level1 > li > p { font-size: 1.4em; } @media screen and (max-width: 768px) { #sitemap-list.level1 > li > p { font-size: calc(1.4em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #sitemap-list.level1 > li > p { font-size: calc(1.4em * 1.5); } } #sitemap-list.level1 > li > *:not(svg):not(.is-not-copy) + p { margin-top: calc(2em / 1.4); } @media screen and (max-width: 768px) { #sitemap-list.level1 > li > *:not(svg):not(.is-not-copy) + p { margin-top: calc(2em / 1.4 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #sitemap-list.level1 > li > *:not(svg):not(.is-not-copy) + p { margin-top: calc(2em / 1.4 * 1.5); } } .snapshots-container div.snapshot .info p { font-size: 1.4em; } @media screen and (max-width: 768px) { .snapshots-container div.snapshot .info p { font-size: calc(1.4em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .snapshots-container div.snapshot .info p { font-size: calc(1.4em * 1.5); } } .snapshots-container div.snapshot .info *:not(svg):not(.is-not-copy) + p { margin-top: calc(2em / 1.4); } @media screen and (max-width: 768px) { .snapshots-container div.snapshot .info *:not(svg):not(.is-not-copy) + p { margin-top: calc(2em / 1.4 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .snapshots-container div.snapshot .info *:not(svg):not(.is-not-copy) + p { margin-top: calc(2em / 1.4 * 1.5); } } .stages-timeline-item.active p { color: #ffffff; } .testimonial-container .testimonial p:before, .testimonial-container .testimonial p:after { padding-left: calc(0.5em / 3); padding-right: calc(0.5em / 3); display: inline-block; font-size: 3em; vertical-align: bottom; color: #4f4f4f; } @media screen and (max-width: 768px) { .testimonial-container .testimonial p:before, .testimonial-container .testimonial p:after { padding-left: calc(0.5em / 3 * 1.5); padding-right: calc(0.5em / 3 * 1.5); font-size: calc(3em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .testimonial-container .testimonial p:before, .testimonial-container .testimonial p:after { padding-left: calc(0.5em / 3 * 1.5); padding-right: calc(0.5em / 3 * 1.5); font-size: calc(3em * 1.5); } } *:not(svg):not(.is-not-copy) + dl, *:not(svg):not(.is-not-copy) + ol, *:not(svg):not(.is-not-copy) + ul { margin-top: calc(2em / 1.8); } @media screen and (max-width: 768px) { *:not(svg):not(.is-not-copy) + dl, *:not(svg):not(.is-not-copy) + ol, *:not(svg):not(.is-not-copy) + ul { margin-top: calc(2em / 1.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { *:not(svg):not(.is-not-copy) + dl, *:not(svg):not(.is-not-copy) + ol, *:not(svg):not(.is-not-copy) + ul { margin-top: calc(2em / 1.8 * 1.5); } } dl { overflow: hidden; } dl.meta-data-container { white-space: nowrap; } .widget-half-width dl.meta-data-container { white-space: normal; } dl.meta-data-container div.meta-column { display: inline-block; } dl.meta-data-container div.meta-column + .meta-column { margin-left: 2em; } @media screen and (max-width: 768px) { dl.meta-data-container div.meta-column + .meta-column { margin-left: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { dl.meta-data-container div.meta-column + .meta-column { margin-left: calc(2em * 1.5); } } dl.meta-data-container div.meta-row { margin-top: 1em; } @media screen and (max-width: 768px) { dl.meta-data-container div.meta-row { margin-top: calc(1em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { dl.meta-data-container div.meta-row { margin-top: calc(1em * 1.5); } } .event dl.meta-data-container div.meta-row { margin-top: 0; } .comments-holder-container dl.meta-data-container { font-size: calc(1.2em / 1.8); } @media screen and (max-width: 768px) { .comments-holder-container dl.meta-data-container { font-size: calc(1.2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .comments-holder-container dl.meta-data-container { font-size: calc(1.2em * 1.5); } } .comments-holder-container dl.meta-data-container dd.author { display: block; font-size: 1.5em !important; font-weight: normal; } @media screen and (max-width: 768px) { .comments-holder-container dl.meta-data-container dd.author { font-size: calc(1.5em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .comments-holder-container dl.meta-data-container dd.author { font-size: calc(1.5em * 1.5); } } .comments-holder-container dl.meta-data-container dd.date { margin-top: 0; display: block; font-weight: bold; } .video dl.meta-data-container { width: auto; float: right; margin-top: -2.5em; } @media screen and (max-width: 768px) { .video dl.meta-data-container { margin-top: calc(-2.5em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .video dl.meta-data-container { margin-top: 0; } } dt, dd { /*display: block;*/ display: inline; vertical-align: bottom; font-size: calc(1.8em * 0.8); } @media screen and (max-width: 768px) { dt, dd { font-size: calc(1.8em * 0.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { dt, dd { font-size: calc(1.8em * 0.8 * 1.5); } } dt { margin-right: calc(2em / 1.8 * 0.8); font-weight: bold; } @media screen and (max-width: 768px) { dt { margin-right: calc(2em / 1.8 * 0.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { dt { margin-right: calc(2em / 1.8 * 0.8 * 1.5); } } dt:after { content: ":"; } .event dt:after { display: none; } dd + dt { margin-left: calc(2em / 1.8 * 0.8); } @media screen and (max-width: 768px) { dd + dt { margin-left: calc(2em / 1.8 * 0.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { dd + dt { margin-left: calc(2em / 1.8 * 0.8 * 1.5); } } .meta-data-container .meta-column dt.icon, .meta-data-container .meta-row dt.icon { width: 1.25em; height: 1.25em; margin-right: 0.5em; } @media screen and (max-width: 768px) { .meta-data-container .meta-column dt.icon, .meta-data-container .meta-row dt.icon { width: calc(1.25em * 1.5); height: calc(1.25em * 1.5); margin-right: calc(0.5em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .meta-data-container .meta-column dt.icon, .meta-data-container .meta-row dt.icon { width: calc(1.25em * 1.5); height: calc(1.25em * 1.5); margin-right: calc(0.5em * 1.5); font-size: calc(1.4em * 1.5); } } .meta-data-container .meta-column dt.icon svg circle, .meta-data-container .meta-column dt.icon svg ellipse, .meta-data-container .meta-column dt.icon svg line, .meta-data-container .meta-column dt.icon svg path, .meta-data-container .meta-column dt.icon svg polygon, .meta-data-container .meta-column dt.icon svg rect, .meta-data-container .meta-row dt.icon svg circle, .meta-data-container .meta-row dt.icon svg ellipse, .meta-data-container .meta-row dt.icon svg line, .meta-data-container .meta-row dt.icon svg path, .meta-data-container .meta-row dt.icon svg polygon, .meta-data-container .meta-row dt.icon svg rect { fill: #6d6e72; } .meta-data-container .meta-column dt.icon span, .meta-data-container .meta-row dt.icon span { display: none; } .copy.is-wysiwyg img { max-width: 100%; height: auto; } iframe { max-width: 100%; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { iframe { width: 100%; } } .PublicationHolder ol.topics-list li, .PublicationHolder ul.topics-list li { padding-left: 0; } ol li, ul li { padding-left: 2em; /*@media screen and (max-width: 768px) { padding-left: calc(2em * 1.5); } @media screen and (max-aspect-ratio: $breakpointMaxAspectRatio) and (max-width: 640px) { padding-left: calc(2em * 1.5); }*/ } ol li + li, ul li + li { margin-top: calc(1em / 1.8); } @media screen and (max-width: 768px) { ol li + li, ul li + li { margin-top: calc(1em / 1.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { ol li + li, ul li + li { margin-top: calc(1em / 1.8 * 1.5); } } .PublicationHolder ul.topics-list li { background-image: none; } ul li { padding-left: calc(2em / 1.8); background-image: url(../image/ui/bullet-grey.svg); background-position: left 0.6em; background-size: auto 0.3em; background-repeat: no-repeat; } ul li.is-ie { background-position: left center; } @media screen and (max-width: 768px) { ul li { padding-left: calc(2em / 1.8 * 1.5); background-position: left calc(0.6em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { ul li { padding-left: calc(2em / 1.8 * 1.5); background-position: left calc(0.6em * 1.5); } } .UsefulLinkWidget.is-post-standard-widget ul li { background-image: url(../image/ui/icon-arrow-right.svg); background-position: left center; background-size: auto 1em; } ul li .comment + li.comment { margin-top: calc(4em / 1.8); } @media screen and (max-width: 768px) { ul li .comment + li.comment { margin-top: calc(4em / 1.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { ul li .comment + li.comment { margin-top: calc(4em / 1.8 * 1.5); } } ol { list-style-type: decimal; } ol li { padding-left: calc(1em / 1.8); margin-left: 1em; background-image: none; } .is-ie ol li, .is-safari ol li { margin-left: 0.5em; } @media screen and (max-width: 768px) { ol li { padding-left: calc(1em / 1.8 * 1.5); margin-left: calc(1em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { ol li { padding-left: calc(1em / 1.8 * 1.5); margin-left: calc(1em * 1.5); } } table { width: 100% !important; border-spacing: 2px; margin: 2em 0; } table tfoot tr td, table thead tr td { padding: calc(0.5em / 1.8); background-color: #6d6e72 !important; color: #ffffff !important; text-align: center; } @media screen and (max-width: 768px) { table tfoot tr td, table thead tr td { padding: calc(0.5em / 1.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { table tfoot tr td, table thead tr td { padding: calc(0.5em / 1.8 * 1.5); } } table tfoot tr td li, table tfoot tr td p, table tfoot tr td a, table tfoot tr td span, table thead tr td li, table thead tr td p, table thead tr td a, table thead tr td span { color: #ffffff !important; } table tr:nth-child(even) { background-color: #dbdbdb !important; } table tr td { padding: calc(0.5em / 1.8); background-color: transparent !important; vertical-align: top; } @media screen and (max-width: 768px) { table tr td { padding: calc(0.5em / 1.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { table tr td { padding: calc(0.5em / 1.8 * 1.5); } } table tr td ol, table tr td ul { margin: calc(1em / 1.8); } @media screen and (max-width: 768px) { table tr td ol, table tr td ul { margin: calc(1em / 1.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { table tr td ol, table tr td ul { margin: calc(1em / 1.8 * 1.5); } } table tr td ol li, table tr td ul li { margin-left: 0; } #breadcrumb .breadcrumb-item { color: #6d6e72; } #breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 1.6em; margin-left: 1em; background-image: url(../image/ui/icon-arrow-right.svg); background-position: left center; background-size: 0.6em auto; background-repeat: no-repeat; } .housing-job-populations-widget .scenarios .scenario { min-height: 20em; } @media screen and (max-width: 768px) { .housing-job-populations-widget .scenarios .scenario { min-height: calc(20em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .housing-job-populations-widget .scenarios .scenario { min-height: calc(20em * 1.5); } } .housing-job-populations-widget .scenarios .scenario dl dt { margin-top: calc(3em / 2.4); display: block; font-size: 2.4em; line-height: 1em; color: #4f4f4f; white-space: nowrap; } @media screen and (max-width: 768px) { .housing-job-populations-widget .scenarios .scenario dl dt { margin-top: calc(3em / 2.4 * 1.5); line-height: calc(1em * 1.5); font-size: calc(1.4em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .housing-job-populations-widget .scenarios .scenario dl dt { margin-top: calc(3em / 2.4 * 1.5); line-height: calc(1em * 1.5); font-size: calc(1.4em * 1.5); } } .housing-job-populations-widget .scenarios .scenario dl dd.numbers { /* margin-top = (2em height of dt + 3.2em size of this) * 1 to accomodate actual space on screen / 3.2 to normalize to 1em = 10px*/ margin-top: calc((3em + 2.4em) / -3); display: block; font-weight: lighter; font-size: 3em; line-height: 1em; color: #003c71; white-space: nowrap; } @media screen and (max-width: 768px) { .housing-job-populations-widget .scenarios .scenario dl dd.numbers { margin-top: calc((3em + 2.4em) / -3 * 1.5); font-size: calc(3em * 1.5); line-height: calc(1em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .housing-job-populations-widget .scenarios .scenario dl dd.numbers { margin-top: calc((3em + 2.4em) / -3 * 1.5); font-size: calc(3em * 1.5); line-height: calc(1em * 1.5); } } .housing-job-populations-widget .scenarios .scenario dl dd.info { /* margin-top = (2em height of dt) * 1 to accomodate actual space on screen / $fontSizeContentNumber to normalize to 1em = 10px*/ margin-top: calc(2.4em * 1 / 1.2); display: block; font-weight: lighter; font-size: 1.2em; line-height: 1em; color: #6d6e72; } @media screen and (max-width: 768px) { .housing-job-populations-widget .scenarios .scenario dl dd.info { margin-top: calc(2.4em * 1 / 1.2 * 1.5); font-size: calc(1.2em * 1.5); line-height: calc(1em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .housing-job-populations-widget .scenarios .scenario dl dd.info { margin-top: calc(2.4em * 1 / 1.2 * 1.5); font-size: calc(1.2em * 1.5); line-height: calc(1em * 1.5); } } .load-more span { padding: 0 3.4em 0 1em; font-family: "franklin-gothic-urw"; font-style: italic; font-size: 1.8em; line-height: calc(4em / 1.8); background-position: right 1em center; background-size: 1em auto; } @media screen and (max-width: 768px) { .load-more span { padding: 0 calc(3.4em * 1.5) 0 calc(1em * 1.5); font-size: calc(1.8em * 1.5); line-height: calc(4em / 1.8 * 1.5); background-position: right calc(1em * 1.5) center; background-size: calc(1em * 1.5) auto; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .load-more span { padding: 0 calc(3.4em * 1.5) 0 calc(1em * 1.5); font-size: calc(1.8em * 1.5); line-height: calc(4em / 1.8 * 1.5); background-position: right calc(1em * 1.5) center; background-size: calc(1em * 1.5) auto; } } .outcomes-container .outcomes .outcome .pos.clickable-area .number { width: calc(6.5em / 3.6 - 4px); height: calc(6.5em / 3.6 - 4px); line-height: calc(6.5em / 3.6 - 4px); font-family: "franklin-gothic-urw"; font-size: 3.6em; text-align: center; color: #4f4f4f; } @media screen and (max-width: 768px) { .outcomes-container .outcomes .outcome .pos.clickable-area .number { width: calc(6.5em / 3.6 * 1.5 - 4px); height: calc(6.5em / 3.6 * 1.5 - 4px); line-height: calc(6.5em / 3.6 * 1.5 - 4px); font-size: calc(3.6em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .outcomes-container .outcomes .outcome .pos.clickable-area .number { width: calc(6.5em / 3.6 * 1.5 - 4px); height: calc(6.5em / 3.6 * 1.5 - 4px); line-height: calc(6.5em / 3.6 * 1.5 - 4px); font-size: calc(3.6em * 1.5); } } .outcomes-container .outcomes .outcome .pos.clickable-area .label { padding: 0 calc(2.5em / 1.4); margin-top: calc(1em / 1.4); margin-bottom: calc(1em / 1.4); font-family: "franklin-gothic-urw"; font-size: 1.4em; font-style: italic; text-align: center; } @media screen and (max-width: 768px) { .outcomes-container .outcomes .outcome .pos.clickable-area .label { padding: 0 calc(2.5em / 1.4 * 1.5); margin-top: calc(1em / 1.4 * 1.5); margin-bottom: calc(1em / 1.4 * 1.5); font-size: calc(1.4em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .outcomes-container .outcomes .outcome .pos.clickable-area .label { padding: 0 calc(2.5em / 1.4 * 1.5); margin-top: calc(1em / 1.4 * 1.5); margin-bottom: calc(1em / 1.4 * 1.5); font-size: calc(1.4em * 1.5); } } .stages-timeline-item .st-number { width: calc((5.4em / 3.2) - (0.4em * 2 / 3.2)); height: calc(5.4em / 3.2 - 0.4em * 2 / 3.2); line-height: calc(5.4em / 3.2 - 0.4em * 2 / 3.2); margin-right: calc(2em / 3.2); border-radius: 50%; font-family: "franklin-gothic-urw"; font-size: 3.2em; } @media screen and (max-width: 768px) { .stages-timeline-item .st-number { width: calc(((5.4em / 3.2) - (0.4em * 2 / 3.2)) * 1.5); height: calc((5.4em / 3.2 - 0.4em * 2 / 3.2) * 1.5); line-height: calc((5.4em / 3.2 - 0.4em * 2 / 3.2) * 1.5); margin-right: calc(2em / 3.2 * 1.5); font-size: calc(3.2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .stages-timeline-item .st-number { width: calc(((5.4em / 3.2) - (0.4em * 2 / 3.2)) * 1.5); height: calc((5.4em / 3.2 - 0.4em * 2 / 3.2) * 1.5); line-height: calc((5.4em / 3.2 - 0.4em * 2 / 3.2) * 1.5); margin-right: calc(2em / 3.2 * 1.5); font-size: calc(3.2em * 1.5); } } .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number .number { font-family: "franklin-gothic-urw"; font-size: 9.4em; font-weight: bold; color: #ffffff; } @media screen and (max-width: 768px) { .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number .number { font-size: calc(9.4em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number .number { font-size: calc(9.4em * 1.5); } } .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number .name { font-family: "franklin-gothic-urw"; font-size: 2em; color: #ffffff; } @media screen and (max-width: 768px) { .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number .name { font-size: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number .name { font-size: calc(2em * 1.5); } } .sustainability-menu ul li { height: calc(6em / 2); padding-left: calc(2.5em / 2); padding-right: calc(2.5em / 2); line-height: calc(5.8em / 2); font-family: "franklin-gothic-urw"; font-size: 2em; color: #ffffff; } @media screen and (max-width: 768px) { .sustainability-menu ul li { padding-left: calc(2.5em / 2 * 1.5); padding-right: calc(2.5em / 2 * 1.5); line-height: calc(5.8em / 2 * 1.5); font-size: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .sustainability-menu ul li { padding-left: calc(2.5em / 2 * 1.5); padding-right: calc(2.5em / 2 * 1.5); line-height: calc(5.8em / 2 * 1.5); font-size: calc(2em * 1.5); } } .sustainability-menu ul li:first-child { padding-left: 0; padding-right: calc(2em / 2); } @media screen and (max-width: 768px) { .sustainability-menu ul li:first-child { padding-right: calc(2em / 2 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .sustainability-menu ul li:first-child { padding-right: calc(2em / 2 * 1.5); } } .sustainability-menu ul li:first-child a .icon { width: calc(3.1em / 2); height: 100%; margin: 0 calc(1.5em / 2) 0 calc(2.5em / 2); vertical-align: top; background-position: center 0.75em; background-size: auto 40%; } @media screen and (max-width: 768px) { .sustainability-menu ul li:first-child a .icon { width: calc(3.1em / 2 * 1.5); margin: 0 calc(1.5em / 2 * 1.5) 0 calc(2.5em / 2 * 1.5); padding-left: calc(2em * 1.5); background-position: center calc(0.75em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .sustainability-menu ul li:first-child a .icon { width: calc(3.1em / 2 * 1.5); margin: 0 calc(1.5em / 2 * 1.5) 0 calc(2.5em / 2 * 1.5); padding-left: calc(2em * 1.5); background-position: center calc(0.75em * 1.5); } } .sustainability-menu ul li:first-child .sub-menu { top: calc(5.8em / 2); } @media screen and (max-width: 768px) { .sustainability-menu ul li:first-child .sub-menu { top: calc(5.8em / 2 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .sustainability-menu ul li:first-child .sub-menu { top: calc(5.8em / 2 * 1.5); } } .sustainability-menu ul li:first-child .sub-menu li a { min-width: calc(19.5em / 1.6); padding: calc(2em / 1.6); border-top: 1px solid #6f777b; display: block; font-size: 1.6em; color: #ffffff; background-color: #303c42; } @media screen and (max-width: 768px) { .sustainability-menu ul li:first-child .sub-menu li a { min-width: calc(19.5em / 1.6 * 1.5); padding: calc(2em / 1.6 * 1.5); font-size: calc(1.6 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .sustainability-menu ul li:first-child .sub-menu li a { min-width: calc(19.5em / 1.6 * 1.5); padding: calc(2em / 1.6 * 1.5); font-size: calc(1.6 * 1.5); } } .testimonial-container .testimonial .name { margin-top: calc(2em / 2.6); font-family: "franklin-gothic-urw"; font-size: 2.6em; } @media screen and (max-width: 768px) { .testimonial-container .testimonial .name { margin-top: calc(2em / 2.6 * 1.5); font-size: calc(2.6em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .testimonial-container .testimonial .name { margin-top: calc(2em / 2.6 * 1.5); font-size: calc(2.6em * 1.5); } } * { padding: 0; margin: 0; } html { width: 100%; height: 100%; } body { width: 100%; overflow-x: hidden; } a { text-decoration: none; } a[name] { pointer-events: none; display: block; font-size: 10px; /*height: calc(11em * 1.5); margin-top: calc(11em * -1.5);*/ height: 0; position: absolute; top: calc(11em * -1.5); } ul { list-style-type: none; } /* scale functions via font-size and VW - start */ @media screen and (min-aspect-ratio: 35 / 40) { .desktop-hide { display: none; } } @media screen and (max-width: 768px) { .mobile-hide { display: none; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .mobile-hide { display: none; } } .native-scale { font-size: 10px !important; } @media screen and (min-width: 1440px) { .native-scale-at-min { font-size: 10px !important; } } @media screen and (max-width: 1440px) { .native-scale-at-max { font-size: 10px !important; } } #ugnsw-main-viewport { width: 100%; overflow: hidden; font-size: 10px; position: relative; opacity: 0; } .is-ugnsw-loaded #ugnsw-main-viewport { opacity: 1; } @media screen and (max-width: 1440px) { #ugnsw-main-viewport { font-size: calc(10vw / (1440 * 0.01)); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #ugnsw-main-viewport { font-size: calc(10vw / (640 * 0.01)); } #ugnsw-main-viewport > .main { font-size: 1em; } } @media print { #ugnsw-main-viewport { font-size: 7.5px !important; } } /* scale functions - end */ .clickable-area { position: relative; } .clickable-area:not(.non-clickable-area) { cursor: pointer; } .clickable-area .cta-icon-arrow { width: 0.7em; height: 1.2em; display: block; position: absolute; right: 2em; top: 2em; background-image: url(../image/ui/icon-arrow-right.svg); background-position: center; background-repeat: no-repeat; background-size: 0.7em auto; } .clickable-area a.btn { width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; z-index: 1; } .btn-more .cta-icon-arrow { height: 100%; top: 0; } .blue .cta-icon-arrow { background-image: url(../image/ui/icon-arrow-right-blue.svg); } .green .cta-icon-arrow { background-image: url(../image/ui/icon-arrow-right.svg); } .orange .cta-icon-arrow { background-image: url(../image/ui/icon-arrow-right.svg); } #ugnsw-main-viewport { /*div.main { #hero, #breadcrumb, #breadcrumb + .full-width { background-color: #ffffff !important; } > .full-width:nth-child(2n + 1):not(.selected-video) { background-color: #ffffff !important; .alternate-bg-color { background-color: #f6f6f6 !important; } } > .full-width:nth-child(2n + 2):not(.selected-video) { background-color: #f6f6f6 !important; .alternate-bg-color { background-color: #ffffff !important; } } }*/ /*&:not(.home-page) { div.main { padding-top: $topMarginHeight; @media screen and (max-aspect-ratio: $breakpointMaxAspectRatio) and (max-width: 640px) { padding-top: $topMarginMiniHeight; } } }*/ } #ugnsw-main-viewport.home-page #breadcrumb + .full-width { /*in the home-page there is no breadcrumb, but it's empty DIV is required so that the background-colors of each .full-width is retained. however, the padding of the next-immediately .full-wuidth needs to be increased,*/ padding-top: 4.5em; } .full-width { width: 100%; } .main .full-width { padding-top: 5em; padding-bottom: 5em; } .main .full-width.is-all-true-full-widths { padding-top: 0; padding-bottom: 0; overflow: hidden; } .main .full-width.page-intro + .full-width.is-first-true-full-width { margin-top: 5em; } .main .full-width.is-last-true-full-width { padding-bottom: 0; } body.Security .main > .full-width { margin-top: 25em; } .full-width.map-container { padding-top: 0; padding-bottom: 0; } .content-width { width: 97em; margin: 0 auto; overflow: hidden; position: relative; } .content-width .content-width { width: 100%; } @media screen and (max-width: 768px) { .content-width { width: calc(100% - 10em); } .content-width .content-width { width: 100%; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .content-width { width: calc(100% - 4em); } .content-width .content-width { width: 100%; } } @media print { .content-width { width: 100%; } } .VideoHolder .content-width.active-video-and-playlist, .VideoHolder .video-playlist-container .content-width { overflow: visible; } .columns { overflow: hidden; } .columns .column { float: left; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .columns .column { width: 100% !important; } } .column-33 { width: 33.33333%; float: left; } .masonry-container { position: relative; } .masonry-container > * { margin-bottom: 2em !important; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .masonry-container { height: auto !important; } .masonry-container > * { width: 100% !important; margin-right: 0 !important; margin-left: 0 !important; position: static !important; } } .hidden { position: absolute; clip: rect(1px 1px 1px 1px); /* for Internet Explorer */ clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; } hr { border: 0; height: 1px; background-color: #000000; } .intro .copy.is-wysiwyg .hero-title + hr, .intro .copy.is-wysiwyg .intro-title + hr, .intro .copy.is-wysiwyg .hero-title + .intro-title + hr { width: 50%; margin: 4em auto 4em; background-color: #6d6e72; } div.load-more { width: 100%; height: 4em; border-bottom: 0.5em solid #e2e2e2; margin-top: 2em; text-align: center; position: relative; background-color: #fcfcfc; } @media screen and (min-aspect-ratio: 35 / 40) { div.load-more:hover span { left: 3em; } } div.load-more span { position: relative; left: 0; top: 0; z-index: 2; background-image: url(../image/ui/icon-arrow-down.svg); background-repeat: no-repeat; background-color: #fcfcfc; color: #8e9698; transition: left 0.25s; } div.load-more hr { width: calc(100% - 2em); height: 1px; border: 0; position: absolute; left: 1em; top: 2em; z-index: 1; background-color: #e2e2e2; } div.load-more a { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 3; cursor: pointer; } .mouse-blocker { width: 100%; height: 100%; position: absolute; left: 0; top: 0; cursor: default; } .stick-on-scroll { width: 100%; position: fixed; top: 11em; z-index: 2; } .stick-on-scroll.stick-on-scroll-disabled { position: absolute; } .mini-header .stick-on-scroll { top: 6em; } .is-scrolled .stick-on-scroll { border-bottom: 1px solid #dbdbdb; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .stick-on-scroll { position: static; } .is-scrolled .stick-on-scroll { border-bottom: none; } } .parallax-foreground { background-color: #ffffff; will-change: transform; } .parallax-middle-ground { will-change: transform; } *:not(.is-not-copy) + .copy-container, *:not(.is-not-copy) + .copy.is-wysiwyg { margin-top: 2em; } a[name] + .copy-container, a[name] + .copy.is-wysiwyg { margin-top: 0; } img.left { margin-right: 20px; margin-bottom: 20px; float: left; } img.right { margin-left: 20px; margin-bottom: 20px; float: right; } img.center { display: block; margin: 0 auto 20px; } .youtube-container { width: 97em; } .widget .youtube-container { width: 100%; } .masonry-container .youtube-container { margin: 0 auto; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .youtube-container { /*width: calc(100% - 4em) !important;*/ width: 100%; /*height: 0; padding-bottom: calc(100% - 4em) !important; position: relative;*/ } } .youtube-container iframe.youtube { width: inherit; height: 40em; display: block; /*.masonry-container & { height: 26.9em; }*/ } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .youtube-container iframe.youtube { width: 100%; /*height: 100%;*/ height: 50em; /*position: absolute; left: 0; top: 0;*/ } } .youtube-container iframe.youtube .copy { padding: 2em; background-color: #f0f0f0; border-bottom: 5px solid #dfdfdf; } .widget-full-width iframe.youtube { height: 54.5em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .widget-full-width iframe.youtube { height: 27em; } } .widget-half-width iframe.youtube { height: 26.9em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .widget-half-width iframe.youtube { height: 27em; } } .sustainability-menu { width: 100%; border-top: 1px solid #6f777b; float: left; /*text-align: center;*/ text-align: right; background-color: #303c42; /*background-color: $topMarginBackgroundColor;*/ /*background-color: $colorMain;*/ } .no-hero .sustainability-menu { background-color: #444f55; } .sustainability-menu.mini, .mini-header .sustainability-menu { background-color: #303c42; /*background-color: $topMarginMiniBackgroundColor;*/ /*background-color: $colorMain;*/ transition: height 0.25s, background-color 0.25s; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .sustainability-menu { display: none; } } .sustainability-menu ul { position: relative; } .sustainability-menu ul li { display: inline-block; vertical-align: top; position: relative; } .sustainability-menu ul li:hover .sub-menu { display: inline-block; } .sustainability-menu ul li:first-child { position: absolute; left: 0; top: 0; } .sustainability-menu ul li:first-child a .icon { display: inline-block; background-image: url(../image/ui/icon-home.svg); background-repeat: no-repeat; } .sustainability-menu ul li:last-child { padding-right: calc(3em / 2); } .sustainability-menu ul li:last-child .sub-menu { left: auto; right: 0; transform: none; } .sustainability-menu ul li.active > .highlight { display: block; } .sustainability-menu ul li a { color: inherit; } .sustainability-menu ul li a .label { display: inline-block; vertical-align: top; } .sustainability-menu ul li .sub-menu { padding-left: 0; padding-right: 0; position: absolute; left: 50%; display: none; transform: translateX(-50%); } .sustainability-menu ul li .sub-menu li { padding-left: 0; padding-right: 0; height: auto; line-height: normal; text-align: center; display: block; } .sustainability-menu ul li .sub-menu li.active > .highlight { display: block; } .sustainability-menu ul li .highlight { width: 100%; height: 5px; position: absolute; left: 0; bottom: 0; background-color: #003c71; display: none; } .social-share-container { width: 6em; max-width: 6em; height: 6em; max-height: 6em; border-radius: calc(6em / 2); box-shadow: 0 3px 0 #001325; overflow: hidden; text-align: center; position: absolute; right: 2em; z-index: 7; background-color: #003c71; /*transition: opacity $transitionDurationVeryQuick, max-width $transitionDurationVeryQuick;*/ transition: max-width 1s; } .content-page .social-share-container { top: calc(40em + 6em); } @media screen and (max-width: 1024px) { .content-page .social-share-container { top: calc((11em + 0px) + 40em); } } .HomePage .social-share-container { top: calc(60em + 6em); } @media screen and (max-width: 1024px) { .HomePage .social-share-container { top: calc((11em + 0px) + 60em); } } .no-hero .social-share-container { top: calc((6em + 0px) + 5.5em + 1em); } @media screen and (max-width: 1024px) { .no-hero .social-share-container { top: calc((6em + 0px) + 5.5em + 5em); } } @media screen and (max-width: 768px) { .no-hero .social-share-container { top: calc((6em + 0px) + 5.5em + 7em); } } @media screen and (max-width: 640px) { .no-hero .social-share-container { top: calc((11em + 0px) + 5.5em + 2em); } } .is-ie .social-share-container { border-top-left-radius: calc(6em / 2); border-top-right-radius: calc(6em / 2); border-bottom-right-radius: calc(6em / 2); border-bottom-left-radius: calc(6em / 2); } .has-pop-up-form-open .HomePage .social-share-container { opacity: 0; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .has-pop-up-form-open .social-share-container { opacity: 0; } } .social-share-container:hover { width: auto; max-width: 100em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .social-share-container:hover { width: 6em; max-width: 6em; height: auto; max-height: 100em; } } .social-share-container a.btn { width: 6em; height: 6em; margin-right: 1em; display: block; position: absolute; left: 0; top: 0; background-image: url(../image/ui/icon-social/icon-social-share.svg); background-position: center; background-size: 3em 3em; background-repeat: no-repeat; } .social-share-container a.btn .label { display: none; } .social-share-container a.btn svg ellipse, .social-share-container a.btn svg path, .social-share-container a.btn svg polygon, .social-share-container a.btn svg rect { fill: #ffffff; } .social-share-container #social-share { width: calc((6em + 2em) * 6); height: 6em; padding-left: calc(6em + 1em); overflow-y: hidden; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .social-share-container #social-share { width: 6em; height: calc((6em + 2em) * 6); padding-top: calc(6em + 1em); padding-left: 0; } } .social-share-container #social-share > span { width: 6em; height: 6em; margin: 0 1em; display: block; float: left; position: relative; color: #ffffff; background-position: center; background-repeat: no-repeat; background-size: cover; } .social-share-container #social-share > span.st_facebook_large { background-image: url(../image/ui/icon-social/icon-social-facebook.svg); } .social-share-container #social-share > span.st_twitter_large { background-image: url(../image/ui/icon-social/icon-social-twitter.svg); } .social-share-container #social-share > span.st_linkedin_large { background-image: url(../image/ui/icon-social/icon-social-linkedin.svg); } .social-share-container #social-share > span.st_googleplus_large { background-image: url(../image/ui/icon-social/icon-social-googleplus.svg); } .social-share-container #social-share > span.st_pinterest_large { background-image: url(../image/ui/icon-social/icon-social-pinterest.svg); } .social-share-container #social-share > span.st_email_large { background-image: url(../image/ui/icon-social/icon-social-email.svg); } .social-share-container #social-share > span:before { font-size: 3.2em; position: absolute; left: 0; top: 0; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .social-share-container #social-share > span { margin: 1em 0; } } .social-share-container #social-share > span svg { display: block; position: absolute; } .social-share-container #social-share > span svg ellipse, .social-share-container #social-share > span svg path, .social-share-container #social-share > span svg polygon, .social-share-container #social-share > span svg rect { fill: #ffffff; } .social-share-container #social-share > span > .stButton { margin: 0; width: inherit; height: inherit; display: block; position: absolute; z-index: 1; display: block !important; line-height: normal; font-size: 1em; } .social-share-container #social-share > span > .stButton > .stLarge { width: 3.2em; height: 3.2em; margin: 0 auto; display: block; background-image: none !important; background-position: center; background-size: cover; background-repeat: no-repeat; } .alternating-colors section.full-width:nth-child(2n+1) { background-color: #ffffff; } .alternating-colors section.full-width:nth-child(2n+1) .alternate-bg-color { background-color: #f6f6f6; } .alternating-colors section.full-width:nth-child(2n+1) .alternate-bg-color .alternate-bg-color-again { background-color: #ffffff; } .alternating-colors section.full-width:nth-child(2n+1) svg.alternate-bg-color { background-color: transparent; } .alternating-colors section.full-width:nth-child(2n+1) svg.alternate-bg-color circle, .alternating-colors section.full-width:nth-child(2n+1) svg.alternate-bg-color ellipse, .alternating-colors section.full-width:nth-child(2n+1) svg.alternate-bg-color line, .alternating-colors section.full-width:nth-child(2n+1) svg.alternate-bg-color path, .alternating-colors section.full-width:nth-child(2n+1) svg.alternate-bg-color polygon, .alternating-colors section.full-width:nth-child(2n+1) svg.alternate-bg-color rect { fill: #f6f6f6 !important; } .alternating-colors section.full-width:nth-child(2n+1) .same-bg-color { background-color: #ffffff; } .alternating-colors section.full-width:nth-child(2n+1) svg.same-bg-color { background-color: transparent; } .alternating-colors section.full-width:nth-child(2n+1) svg.same-bg-color circle, .alternating-colors section.full-width:nth-child(2n+1) svg.same-bg-color ellipse, .alternating-colors section.full-width:nth-child(2n+1) svg.same-bg-color line, .alternating-colors section.full-width:nth-child(2n+1) svg.same-bg-color path, .alternating-colors section.full-width:nth-child(2n+1) svg.same-bg-color polygon, .alternating-colors section.full-width:nth-child(2n+1) svg.same-bg-color rect { fill: #ffffff !important; } .alternating-colors section.full-width:nth-child(2n+2) { background-color: #f6f6f6; } .alternating-colors section.full-width:nth-child(2n+2) .alternate-bg-color { background-color: #ffffff; } .alternating-colors section.full-width:nth-child(2n+2) .alternate-bg-color .alternate-bg-color-again { background-color: #f6f6f6; } .alternating-colors section.full-width:nth-child(2n+2) svg.alternate-bg-color { background-color: transparent; } .alternating-colors section.full-width:nth-child(2n+2) svg.alternate-bg-color circle, .alternating-colors section.full-width:nth-child(2n+2) svg.alternate-bg-color ellipse, .alternating-colors section.full-width:nth-child(2n+2) svg.alternate-bg-color line, .alternating-colors section.full-width:nth-child(2n+2) svg.alternate-bg-color path, .alternating-colors section.full-width:nth-child(2n+2) svg.alternate-bg-color polygon, .alternating-colors section.full-width:nth-child(2n+2) svg.alternate-bg-color rect { fill: #ffffff !important; } .alternating-colors section.full-width:nth-child(2n+2) .same-bg-color { background-color: #f6f6f6; } .alternating-colors section.full-width:nth-child(2n+2) svg.same-bg-color { background-color: transparent; } .alternating-colors section.full-width:nth-child(2n+2) svg.same-bg-color circle, .alternating-colors section.full-width:nth-child(2n+2) svg.same-bg-color ellipse, .alternating-colors section.full-width:nth-child(2n+2) svg.same-bg-color line, .alternating-colors section.full-width:nth-child(2n+2) svg.same-bg-color path, .alternating-colors section.full-width:nth-child(2n+2) svg.same-bg-color polygon, .alternating-colors section.full-width:nth-child(2n+2) svg.same-bg-color rect { fill: #f6f6f6 !important; } .alternating-colors .blue.alternate-color .ac-color, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-color { color: #003c71 !important; } .alternating-colors .blue.alternate-color .ac-color-darker, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-color-darker { color: #001325 !important; } .alternating-colors .blue.alternate-color .ac-border, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-border { border-color: #003c71 !important; } .alternating-colors .blue.alternate-color .ac-border-top, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-border-top { border-top-color: #003c71 !important; } .alternating-colors .blue.alternate-color .ac-border-right, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-border-right { border-right-color: #003c71 !important; } .alternating-colors .blue.alternate-color .ac-border-bottom, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-border-bottom { border-bottom-color: #003c71 !important; } .alternating-colors .blue.alternate-color .ac-border-left, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-border-left { border-left-color: #003c71 !important; } .alternating-colors .blue.alternate-color .ac-border-lighter, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-border-lighter { border-color: #02549D !important; } .alternating-colors .blue.alternate-color .ac-border-darker, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-border-darker { border-color: #001325 !important; } .alternating-colors .blue.alternate-color .ac-border-top-darker, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-border-top-darker { border-top-color: #001325 !important; } .alternating-colors .blue.alternate-color .ac-border-right-darker, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-border-right-darker { border-right-color: #001325 !important; } .alternating-colors .blue.alternate-color .ac-border-bottom-darker, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-border-bottom-darker { border-bottom-color: #001325 !important; } .alternating-colors .blue.alternate-color .ac-border-left-darker, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-border-left-darker { border-left-color: #001325 !important; } .alternating-colors .blue.alternate-color .ac-bg, .alternating-colors .blue.alternate-color input[type=button], .alternating-colors .blue.alternate-color input[type=reset], .alternating-colors .blue.alternate-color input[type=submit], .alternating-colors .blue.alternate-color .owl-dot.active, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-bg, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color input[type=button], .alternating-colors .alternate-color .alternating-colors .blue.alternate-color input[type=reset], .alternating-colors .alternate-color .alternating-colors .blue.alternate-color input[type=submit], .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .owl-dot.active { background-color: #003c71 !important; } .alternating-colors .blue.alternate-color .owl-prev, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .owl-prev { background-image: url(../image/ui/icon-arrow-left-blue.svg) !important; } .alternating-colors .blue.alternate-color .owl-next, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .owl-next { background-image: url(../image/ui/icon-arrow-right-blue.svg) !important; } .alternating-colors .blue.alternate-color .video-playlist .owl-next, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .video-playlist .owl-next { background-image: url(../image/ui/icon-arrow-thin-right-blue.svg) !important; } .alternating-colors .blue.alternate-color .video-playlist .owl-prev, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .video-playlist .owl-prev { background-image: url(../image/ui/icon-arrow-thin-left-blue.svg) !important; } .alternating-colors .blue.alternate-color .video-playlist .video.active h4, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .video-playlist .video.active h4 { color: #003c71 !important; } .alternating-colors .blue.alternate-color .ac-bg-opacity05, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-bg-opacity05 { background-color: rgba(0, 60, 113, 0.5); } .alternating-colors .blue.alternate-color .ac-bg-lighter, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-bg-lighter { background-color: #02549D !important; } .alternating-colors .blue.alternate-color .ac-bg-darker, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-bg-darker { background-color: #001325 !important; } .alternating-colors .blue.alternate-color .ac-bg-cwhite, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-bg-cwhite { background-color: #003c71 !important; color: #ffffff; } .alternating-colors .blue.alternate-color .copy.is-wysiwyg ul li, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .copy.is-wysiwyg ul li { background-image: url(../image/ui/bullet-blue.svg) !important; } .alternating-colors .blue.alternate-color .ac-color svg circle, .alternating-colors .blue.alternate-color .ac-color svg ellipse, .alternating-colors .blue.alternate-color .ac-color svg line, .alternating-colors .blue.alternate-color .ac-color svg path, .alternating-colors .blue.alternate-color .ac-color svg polygon, .alternating-colors .blue.alternate-color .ac-color svg rect, .alternating-colors .blue.alternate-color svg.ac-color circle, .alternating-colors .blue.alternate-color svg.ac-color ellipse, .alternating-colors .blue.alternate-color svg.ac-color line, .alternating-colors .blue.alternate-color svg.ac-color path, .alternating-colors .blue.alternate-color svg.ac-color polygon, .alternating-colors .blue.alternate-color svg.ac-color rect, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-color svg circle, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-color svg ellipse, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-color svg line, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-color svg path, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-color svg polygon, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-color svg rect, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color svg.ac-color circle, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color svg.ac-color ellipse, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color svg.ac-color line, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color svg.ac-color path, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color svg.ac-color polygon, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color svg.ac-color rect { fill: #003c71 !important; } .alternating-colors .blue.alternate-color input[type=button], .alternating-colors .blue.alternate-color input[type=reset], .alternating-colors .blue.alternate-color input[type=submit], .alternating-colors .blue.alternate-color .btn-cta, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color input[type=button], .alternating-colors .alternate-color .alternating-colors .blue.alternate-color input[type=reset], .alternating-colors .alternate-color .alternating-colors .blue.alternate-color input[type=submit], .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .btn-cta { border-bottom-color: #001325 !important; } .alternating-colors .blue.alternate-color input[type=text].date, .alternating-colors .blue.alternate-color input[type=text].date-alt, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color input[type=text].date, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color input[type=text].date-alt { background-image: url(../image/ui/btn-icon-calendar-from-2-blue.svg) !important; } .alternating-colors .blue.alternate-color input[type=text].date[name="toDate"], .alternating-colors .alternate-color .alternating-colors .blue.alternate-color input[type=text].date[name="toDate"] { background-image: url(../image/ui/btn-icon-calendar-to-2-blue.svg) !important; } html:not(.is-ie) .alternating-colors .blue.alternate-color select, html:not(.is-ie) .alternating-colors .alternate-color .alternating-colors .blue.alternate-color select { background-image: url(../image/ui/form-select-icon-arrow-down-blue.svg) !important; } @media screen and (min-aspect-ratio: 35 / 40) { .alternating-colors .blue.alternate-color .ac-hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover { transition: color 0.25s; } .alternating-colors .blue.alternate-color .ac-hover:hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover:hover { color: #003c71 !important; } .alternating-colors .blue.alternate-color .ac-hover-darker, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover-darker { transition: color 0.25s; } .alternating-colors .blue.alternate-color .ac-hover-darker:hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover-darker:hover { color: #001325 !important; } .alternating-colors .blue.alternate-color .ac-hover-lighter, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover-lighter { transition: color 0.25s; } .alternating-colors .blue.alternate-color .ac-hover-lighter:hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover-lighter:hover { color: #02549D !important; } .alternating-colors .blue.alternate-color .ac-bg-hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-bg-hover { transition: background-color 0.25s; } .alternating-colors .blue.alternate-color .ac-bg-hover:hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-bg-hover:hover { background-color: #003c71 !important; } .alternating-colors .blue.alternate-color .ac-bg-hover-lighter, .alternating-colors .blue.alternate-color input[type=button]:hover, .alternating-colors .blue.alternate-color input[type=reset]:hover, .alternating-colors .blue.alternate-color input[type=submit]:hover, .alternating-colors .blue.alternate-color .btn-cta, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-bg-hover-lighter, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color input[type=button]:hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color input[type=reset]:hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color input[type=submit]:hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .btn-cta { transition: background-color 0.25s; } .alternating-colors .blue.alternate-color .ac-bg-hover-lighter:hover, .alternating-colors .blue.alternate-color input[type=button]:hover:hover, .alternating-colors .blue.alternate-color input[type=reset]:hover:hover, .alternating-colors .blue.alternate-color input[type=submit]:hover:hover, .alternating-colors .blue.alternate-color .btn-cta:hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-bg-hover-lighter:hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color input[type=button]:hover:hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color input[type=reset]:hover:hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color input[type=submit]:hover:hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .btn-cta:hover { background-color: #02549D !important; } .alternating-colors .blue.alternate-color .ac-bg-hover-darker, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-bg-hover-darker { transition: background-color 0.25s; } .alternating-colors .blue.alternate-color .ac-bg-hover-darker:hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-bg-hover-darker:hover { background-color: #001325 !important; } .alternating-colors .blue.alternate-color .ac-bg-hover-white, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-bg-hover-white { transition: background-color 0.25s; } .alternating-colors .blue.alternate-color .ac-bg-hover-white:hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-bg-hover-white:hover { background-color: #ffffff !important; } .alternating-colors .blue.alternate-color .ac-hover-parent:hover .ac-hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover-parent:hover .ac-hover { color: #003c71 !important; } .alternating-colors .blue.alternate-color .ac-hover-parent:hover .ac-hover-darker, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover-parent:hover .ac-hover-darker { color: #001325 !important; } .alternating-colors .blue.alternate-color .ac-hover-parent:hover .ac-hover-lighter, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover-parent:hover .ac-hover-lighter { color: #02549D !important; } .alternating-colors .blue.alternate-color .ac-hover-parent:hover .ac-bg-hover, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover-parent:hover .ac-bg-hover { background-color: #003c71 !important; } .alternating-colors .blue.alternate-color .ac-hover-parent:hover .ac-bg-hover-lighter, .alternating-colors .blue.alternate-color .ac-hover-parent:hover input[type=button], .alternating-colors .blue.alternate-color .ac-hover-parent:hover input[type=reset], .alternating-colors .blue.alternate-color .ac-hover-parent:hover input[type=submit], .alternating-colors .blue.alternate-color .ac-hover-parent:hover .btn-cta, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover-parent:hover .ac-bg-hover-lighter, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover-parent:hover input[type=button], .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover-parent:hover input[type=reset], .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover-parent:hover input[type=submit], .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover-parent:hover .btn-cta { background-color: #02549D !important; } .alternating-colors .blue.alternate-color .ac-hover-parent:hover .ac-bg-hover-lighter, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover-parent:hover .ac-bg-hover-lighter { background-color: #02549D !important; } .alternating-colors .blue.alternate-color .ac-hover-parent:hover .ac-bg-hover-darker, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover-parent:hover .ac-bg-hover-darker { background-color: #001325 !important; } .alternating-colors .blue.alternate-color .ac-hover-parent:hover .ac-bg-hover-white, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .ac-hover-parent:hover .ac-bg-hover-white { background-color: #ffffff !important; } } .alternating-colors .blue.alternate-color .open .ac-color-active, .alternating-colors .blue.alternate-color.open .ac-color-active, .alternating-colors .blue.alternate-color .active .ac-color-active, .alternating-colors .blue.alternate-color.active .ac-color-active, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .open .ac-color-active, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color.open .ac-color-active, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .active .ac-color-active, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color.active .ac-color-active { color: #003c71 !important; } .alternating-colors .blue.alternate-color .open .ac-bg-active, .alternating-colors .blue.alternate-color.open .ac-bg-active, .alternating-colors .blue.alternate-color .active .ac-bg-active, .alternating-colors .blue.alternate-color.active .ac-bg-active, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .open .ac-bg-active, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color.open .ac-bg-active, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .active .ac-bg-active, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color.active .ac-bg-active { background-color: #003c71 !important; } .alternating-colors .blue.alternate-color .open .ac-border-active, .alternating-colors .blue.alternate-color.open .ac-border-active, .alternating-colors .blue.alternate-color .active .ac-border-active, .alternating-colors .blue.alternate-color.active .ac-border-active, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .open .ac-border-active, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color.open .ac-border-active, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .active .ac-border-active, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color.active .ac-border-active { border-color: #003c71 !important; } .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted { /* this is .full-width only */ } .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .ac-color, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .ac-color { color: #ffffff !important; } .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .ac-border, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .ac-border { border-color: #ffffff !important; } .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .ac-border-top, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .ac-border-top { border-top-color: #ffffff !important; } .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .ac-border-right, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .ac-border-right { border-right-color: #ffffff !important; } .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .ac-border-bottom, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .ac-border-bottom { border-bottom-color: #ffffff !important; } .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .ac-border-left, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .ac-border-left { border-left-color: #ffffff !important; } .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .ac-bg, .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted input[type=button], .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted input[type=reset], .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted input[type=submit], .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .owl-dot.active, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .ac-bg, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted input[type=button], .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted input[type=reset], .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted input[type=submit], .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .owl-dot.active { background-color: #ffffff !important; } .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .ac-bg-cwhite, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .ac-bg-cwhite { background-color: #ffffff !important; color: #003c71; } .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .copy.is-wysiwyg ul li, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color .component-standard-content.is-highlighted .copy.is-wysiwyg ul li { background-image: url(../image/ui/bullet-white.svg); } .alternating-colors .blue.alternate-color.UsefulLinkWidget.is-post-standard-widget ul li, .alternating-colors .alternate-color .alternating-colors .blue.alternate-color.UsefulLinkWidget.is-post-standard-widget ul li { background-image: url(../image/ui/icon-arrow-right-blue.svg) !important; } .alternating-colors .cyan.alternate-color .ac-color, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-color { color: #3eb1c8 !important; } .alternating-colors .cyan.alternate-color .ac-color-darker, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-color-darker { color: #297f90 !important; } .alternating-colors .cyan.alternate-color .ac-border, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-border { border-color: #3eb1c8 !important; } .alternating-colors .cyan.alternate-color .ac-border-top, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-border-top { border-top-color: #3eb1c8 !important; } .alternating-colors .cyan.alternate-color .ac-border-right, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-border-right { border-right-color: #3eb1c8 !important; } .alternating-colors .cyan.alternate-color .ac-border-bottom, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-border-bottom { border-bottom-color: #3eb1c8 !important; } .alternating-colors .cyan.alternate-color .ac-border-left, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-border-left { border-left-color: #3eb1c8 !important; } .alternating-colors .cyan.alternate-color .ac-border-lighter, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-border-lighter { border-color: #52C8DF !important; } .alternating-colors .cyan.alternate-color .ac-border-darker, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-border-darker { border-color: #297f90 !important; } .alternating-colors .cyan.alternate-color .ac-border-top-darker, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-border-top-darker { border-top-color: #297f90 !important; } .alternating-colors .cyan.alternate-color .ac-border-right-darker, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-border-right-darker { border-right-color: #297f90 !important; } .alternating-colors .cyan.alternate-color .ac-border-bottom-darker, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-border-bottom-darker { border-bottom-color: #297f90 !important; } .alternating-colors .cyan.alternate-color .ac-border-left-darker, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-border-left-darker { border-left-color: #297f90 !important; } .alternating-colors .cyan.alternate-color .ac-bg, .alternating-colors .cyan.alternate-color input[type=button], .alternating-colors .cyan.alternate-color input[type=reset], .alternating-colors .cyan.alternate-color input[type=submit], .alternating-colors .cyan.alternate-color .owl-dot.active, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-bg, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color input[type=button], .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color input[type=reset], .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color input[type=submit], .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .owl-dot.active { background-color: #3eb1c8 !important; } .alternating-colors .cyan.alternate-color .owl-prev, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .owl-prev { background-image: url(../image/ui/icon-arrow-left-cyan.svg) !important; } .alternating-colors .cyan.alternate-color .owl-next, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .owl-next { background-image: url(../image/ui/icon-arrow-right-cyan.svg) !important; } .alternating-colors .cyan.alternate-color .video-playlist .owl-next, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .video-playlist .owl-next { background-image: url(../image/ui/icon-arrow-thin-right-cyan.svg) !important; } .alternating-colors .cyan.alternate-color .video-playlist .owl-prev, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .video-playlist .owl-prev { background-image: url(../image/ui/icon-arrow-thin-left-cyan.svg) !important; } .alternating-colors .cyan.alternate-color .video-playlist .video.active h4, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .video-playlist .video.active h4 { color: #3eb1c8 !important; } .alternating-colors .cyan.alternate-color .ac-bg-opacity05, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-bg-opacity05 { background-color: rgba(62, 177, 200, 0.5); } .alternating-colors .cyan.alternate-color .ac-bg-lighter, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-bg-lighter { background-color: #52C8DF !important; } .alternating-colors .cyan.alternate-color .ac-bg-darker, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-bg-darker { background-color: #297f90 !important; } .alternating-colors .cyan.alternate-color .ac-bg-cwhite, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-bg-cwhite { background-color: #3eb1c8 !important; color: #ffffff; } .alternating-colors .cyan.alternate-color .copy.is-wysiwyg ul li, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .copy.is-wysiwyg ul li { background-image: url(../image/ui/bullet-cyan.svg) !important; } .alternating-colors .cyan.alternate-color .ac-color svg circle, .alternating-colors .cyan.alternate-color .ac-color svg ellipse, .alternating-colors .cyan.alternate-color .ac-color svg line, .alternating-colors .cyan.alternate-color .ac-color svg path, .alternating-colors .cyan.alternate-color .ac-color svg polygon, .alternating-colors .cyan.alternate-color .ac-color svg rect, .alternating-colors .cyan.alternate-color svg.ac-color circle, .alternating-colors .cyan.alternate-color svg.ac-color ellipse, .alternating-colors .cyan.alternate-color svg.ac-color line, .alternating-colors .cyan.alternate-color svg.ac-color path, .alternating-colors .cyan.alternate-color svg.ac-color polygon, .alternating-colors .cyan.alternate-color svg.ac-color rect, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-color svg circle, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-color svg ellipse, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-color svg line, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-color svg path, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-color svg polygon, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-color svg rect, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color svg.ac-color circle, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color svg.ac-color ellipse, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color svg.ac-color line, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color svg.ac-color path, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color svg.ac-color polygon, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color svg.ac-color rect { fill: #3eb1c8 !important; } .alternating-colors .cyan.alternate-color input[type=button], .alternating-colors .cyan.alternate-color input[type=reset], .alternating-colors .cyan.alternate-color input[type=submit], .alternating-colors .cyan.alternate-color .btn-cta, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color input[type=button], .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color input[type=reset], .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color input[type=submit], .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .btn-cta { border-bottom-color: #297f90 !important; } .alternating-colors .cyan.alternate-color input[type=text].date, .alternating-colors .cyan.alternate-color input[type=text].date-alt, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color input[type=text].date, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color input[type=text].date-alt { background-image: url(../image/ui/btn-icon-calendar-from-2-cyan.svg) !important; } .alternating-colors .cyan.alternate-color input[type=text].date[name="toDate"], .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color input[type=text].date[name="toDate"] { background-image: url(../image/ui/btn-icon-calendar-to-2-cyan.svg) !important; } html:not(.is-ie) .alternating-colors .cyan.alternate-color select, html:not(.is-ie) .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color select { background-image: url(../image/ui/form-select-icon-arrow-down-cyan.svg) !important; } @media screen and (min-aspect-ratio: 35 / 40) { .alternating-colors .cyan.alternate-color .ac-hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover { transition: color 0.25s; } .alternating-colors .cyan.alternate-color .ac-hover:hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover:hover { color: #3eb1c8 !important; } .alternating-colors .cyan.alternate-color .ac-hover-darker, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover-darker { transition: color 0.25s; } .alternating-colors .cyan.alternate-color .ac-hover-darker:hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover-darker:hover { color: #297f90 !important; } .alternating-colors .cyan.alternate-color .ac-hover-lighter, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover-lighter { transition: color 0.25s; } .alternating-colors .cyan.alternate-color .ac-hover-lighter:hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover-lighter:hover { color: #52C8DF !important; } .alternating-colors .cyan.alternate-color .ac-bg-hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-bg-hover { transition: background-color 0.25s; } .alternating-colors .cyan.alternate-color .ac-bg-hover:hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-bg-hover:hover { background-color: #3eb1c8 !important; } .alternating-colors .cyan.alternate-color .ac-bg-hover-lighter, .alternating-colors .cyan.alternate-color input[type=button]:hover, .alternating-colors .cyan.alternate-color input[type=reset]:hover, .alternating-colors .cyan.alternate-color input[type=submit]:hover, .alternating-colors .cyan.alternate-color .btn-cta, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-bg-hover-lighter, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color input[type=button]:hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color input[type=reset]:hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color input[type=submit]:hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .btn-cta { transition: background-color 0.25s; } .alternating-colors .cyan.alternate-color .ac-bg-hover-lighter:hover, .alternating-colors .cyan.alternate-color input[type=button]:hover:hover, .alternating-colors .cyan.alternate-color input[type=reset]:hover:hover, .alternating-colors .cyan.alternate-color input[type=submit]:hover:hover, .alternating-colors .cyan.alternate-color .btn-cta:hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-bg-hover-lighter:hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color input[type=button]:hover:hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color input[type=reset]:hover:hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color input[type=submit]:hover:hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .btn-cta:hover { background-color: #52C8DF !important; } .alternating-colors .cyan.alternate-color .ac-bg-hover-darker, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-bg-hover-darker { transition: background-color 0.25s; } .alternating-colors .cyan.alternate-color .ac-bg-hover-darker:hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-bg-hover-darker:hover { background-color: #297f90 !important; } .alternating-colors .cyan.alternate-color .ac-bg-hover-white, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-bg-hover-white { transition: background-color 0.25s; } .alternating-colors .cyan.alternate-color .ac-bg-hover-white:hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-bg-hover-white:hover { background-color: #ffffff !important; } .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .ac-hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .ac-hover { color: #3eb1c8 !important; } .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .ac-hover-darker, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .ac-hover-darker { color: #297f90 !important; } .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .ac-hover-lighter, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .ac-hover-lighter { color: #52C8DF !important; } .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .ac-bg-hover, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .ac-bg-hover { background-color: #3eb1c8 !important; } .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .ac-bg-hover-lighter, .alternating-colors .cyan.alternate-color .ac-hover-parent:hover input[type=button], .alternating-colors .cyan.alternate-color .ac-hover-parent:hover input[type=reset], .alternating-colors .cyan.alternate-color .ac-hover-parent:hover input[type=submit], .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .btn-cta, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .ac-bg-hover-lighter, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover-parent:hover input[type=button], .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover-parent:hover input[type=reset], .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover-parent:hover input[type=submit], .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .btn-cta { background-color: #52C8DF !important; } .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .ac-bg-hover-lighter, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .ac-bg-hover-lighter { background-color: #52C8DF !important; } .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .ac-bg-hover-darker, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .ac-bg-hover-darker { background-color: #297f90 !important; } .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .ac-bg-hover-white, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .ac-hover-parent:hover .ac-bg-hover-white { background-color: #ffffff !important; } } .alternating-colors .cyan.alternate-color .open .ac-color-active, .alternating-colors .cyan.alternate-color.open .ac-color-active, .alternating-colors .cyan.alternate-color .active .ac-color-active, .alternating-colors .cyan.alternate-color.active .ac-color-active, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .open .ac-color-active, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color.open .ac-color-active, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .active .ac-color-active, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color.active .ac-color-active { color: #3eb1c8 !important; } .alternating-colors .cyan.alternate-color .open .ac-bg-active, .alternating-colors .cyan.alternate-color.open .ac-bg-active, .alternating-colors .cyan.alternate-color .active .ac-bg-active, .alternating-colors .cyan.alternate-color.active .ac-bg-active, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .open .ac-bg-active, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color.open .ac-bg-active, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .active .ac-bg-active, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color.active .ac-bg-active { background-color: #3eb1c8 !important; } .alternating-colors .cyan.alternate-color .open .ac-border-active, .alternating-colors .cyan.alternate-color.open .ac-border-active, .alternating-colors .cyan.alternate-color .active .ac-border-active, .alternating-colors .cyan.alternate-color.active .ac-border-active, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .open .ac-border-active, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color.open .ac-border-active, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .active .ac-border-active, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color.active .ac-border-active { border-color: #3eb1c8 !important; } .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted { /* this is .full-width only */ } .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .ac-color, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .ac-color { color: #ffffff !important; } .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .ac-border, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .ac-border { border-color: #ffffff !important; } .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .ac-border-top, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .ac-border-top { border-top-color: #ffffff !important; } .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .ac-border-right, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .ac-border-right { border-right-color: #ffffff !important; } .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .ac-border-bottom, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .ac-border-bottom { border-bottom-color: #ffffff !important; } .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .ac-border-left, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .ac-border-left { border-left-color: #ffffff !important; } .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .ac-bg, .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted input[type=button], .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted input[type=reset], .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted input[type=submit], .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .owl-dot.active, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .ac-bg, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted input[type=button], .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted input[type=reset], .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted input[type=submit], .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .owl-dot.active { background-color: #ffffff !important; } .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .ac-bg-cwhite, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .ac-bg-cwhite { background-color: #ffffff !important; color: #3eb1c8; } .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .copy.is-wysiwyg ul li, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color .component-standard-content.is-highlighted .copy.is-wysiwyg ul li { background-image: url(../image/ui/bullet-white.svg); } .alternating-colors .cyan.alternate-color.UsefulLinkWidget.is-post-standard-widget ul li, .alternating-colors .alternate-color .alternating-colors .cyan.alternate-color.UsefulLinkWidget.is-post-standard-widget ul li { background-image: url(../image/ui/icon-arrow-right-cyan.svg) !important; } .alternating-colors .orange.alternate-color .ac-color, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-color { color: #ed9b33 !important; } .alternating-colors .orange.alternate-color .ac-color-darker, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-color-darker { color: #c27411 !important; } .alternating-colors .orange.alternate-color .ac-border, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-border { border-color: #ed9b33 !important; } .alternating-colors .orange.alternate-color .ac-border-top, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-border-top { border-top-color: #ed9b33 !important; } .alternating-colors .orange.alternate-color .ac-border-right, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-border-right { border-right-color: #ed9b33 !important; } .alternating-colors .orange.alternate-color .ac-border-bottom, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-border-bottom { border-bottom-color: #ed9b33 !important; } .alternating-colors .orange.alternate-color .ac-border-left, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-border-left { border-left-color: #ed9b33 !important; } .alternating-colors .orange.alternate-color .ac-border-lighter, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-border-lighter { border-color: #FCA332 !important; } .alternating-colors .orange.alternate-color .ac-border-darker, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-border-darker { border-color: #c27411 !important; } .alternating-colors .orange.alternate-color .ac-border-top-darker, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-border-top-darker { border-top-color: #c27411 !important; } .alternating-colors .orange.alternate-color .ac-border-right-darker, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-border-right-darker { border-right-color: #c27411 !important; } .alternating-colors .orange.alternate-color .ac-border-bottom-darker, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-border-bottom-darker { border-bottom-color: #c27411 !important; } .alternating-colors .orange.alternate-color .ac-border-left-darker, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-border-left-darker { border-left-color: #c27411 !important; } .alternating-colors .orange.alternate-color .ac-bg, .alternating-colors .orange.alternate-color input[type=button], .alternating-colors .orange.alternate-color input[type=reset], .alternating-colors .orange.alternate-color input[type=submit], .alternating-colors .orange.alternate-color .owl-dot.active, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-bg, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color input[type=button], .alternating-colors .alternate-color .alternating-colors .orange.alternate-color input[type=reset], .alternating-colors .alternate-color .alternating-colors .orange.alternate-color input[type=submit], .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .owl-dot.active { background-color: #ed9b33 !important; } .alternating-colors .orange.alternate-color .owl-prev, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .owl-prev { background-image: url(../image/ui/icon-arrow-left-orange.svg) !important; } .alternating-colors .orange.alternate-color .owl-next, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .owl-next { background-image: url(../image/ui/icon-arrow-right-orange.svg) !important; } .alternating-colors .orange.alternate-color .video-playlist .owl-next, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .video-playlist .owl-next { background-image: url(../image/ui/icon-arrow-thin-right-orange.svg) !important; } .alternating-colors .orange.alternate-color .video-playlist .owl-prev, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .video-playlist .owl-prev { background-image: url(../image/ui/icon-arrow-thin-left-orange.svg) !important; } .alternating-colors .orange.alternate-color .video-playlist .video.active h4, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .video-playlist .video.active h4 { color: #ed9b33 !important; } .alternating-colors .orange.alternate-color .ac-bg-opacity05, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-bg-opacity05 { background-color: rgba(237, 155, 51, 0.5); } .alternating-colors .orange.alternate-color .ac-bg-lighter, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-bg-lighter { background-color: #FCA332 !important; } .alternating-colors .orange.alternate-color .ac-bg-darker, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-bg-darker { background-color: #c27411 !important; } .alternating-colors .orange.alternate-color .ac-bg-cwhite, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-bg-cwhite { background-color: #ed9b33 !important; color: #ffffff; } .alternating-colors .orange.alternate-color .copy.is-wysiwyg ul li, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .copy.is-wysiwyg ul li { background-image: url(../image/ui/bullet-orange.svg) !important; } .alternating-colors .orange.alternate-color .ac-color svg circle, .alternating-colors .orange.alternate-color .ac-color svg ellipse, .alternating-colors .orange.alternate-color .ac-color svg line, .alternating-colors .orange.alternate-color .ac-color svg path, .alternating-colors .orange.alternate-color .ac-color svg polygon, .alternating-colors .orange.alternate-color .ac-color svg rect, .alternating-colors .orange.alternate-color svg.ac-color circle, .alternating-colors .orange.alternate-color svg.ac-color ellipse, .alternating-colors .orange.alternate-color svg.ac-color line, .alternating-colors .orange.alternate-color svg.ac-color path, .alternating-colors .orange.alternate-color svg.ac-color polygon, .alternating-colors .orange.alternate-color svg.ac-color rect, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-color svg circle, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-color svg ellipse, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-color svg line, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-color svg path, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-color svg polygon, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-color svg rect, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color svg.ac-color circle, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color svg.ac-color ellipse, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color svg.ac-color line, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color svg.ac-color path, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color svg.ac-color polygon, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color svg.ac-color rect { fill: #ed9b33 !important; } .alternating-colors .orange.alternate-color input[type=button], .alternating-colors .orange.alternate-color input[type=reset], .alternating-colors .orange.alternate-color input[type=submit], .alternating-colors .orange.alternate-color .btn-cta, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color input[type=button], .alternating-colors .alternate-color .alternating-colors .orange.alternate-color input[type=reset], .alternating-colors .alternate-color .alternating-colors .orange.alternate-color input[type=submit], .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .btn-cta { border-bottom-color: #c27411 !important; } .alternating-colors .orange.alternate-color input[type=text].date, .alternating-colors .orange.alternate-color input[type=text].date-alt, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color input[type=text].date, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color input[type=text].date-alt { background-image: url(../image/ui/btn-icon-calendar-from-2-orange.svg) !important; } .alternating-colors .orange.alternate-color input[type=text].date[name="toDate"], .alternating-colors .alternate-color .alternating-colors .orange.alternate-color input[type=text].date[name="toDate"] { background-image: url(../image/ui/btn-icon-calendar-to-2-orange.svg) !important; } html:not(.is-ie) .alternating-colors .orange.alternate-color select, html:not(.is-ie) .alternating-colors .alternate-color .alternating-colors .orange.alternate-color select { background-image: url(../image/ui/form-select-icon-arrow-down-orange.svg) !important; } @media screen and (min-aspect-ratio: 35 / 40) { .alternating-colors .orange.alternate-color .ac-hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover { transition: color 0.25s; } .alternating-colors .orange.alternate-color .ac-hover:hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover:hover { color: #ed9b33 !important; } .alternating-colors .orange.alternate-color .ac-hover-darker, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover-darker { transition: color 0.25s; } .alternating-colors .orange.alternate-color .ac-hover-darker:hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover-darker:hover { color: #c27411 !important; } .alternating-colors .orange.alternate-color .ac-hover-lighter, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover-lighter { transition: color 0.25s; } .alternating-colors .orange.alternate-color .ac-hover-lighter:hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover-lighter:hover { color: #FCA332 !important; } .alternating-colors .orange.alternate-color .ac-bg-hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-bg-hover { transition: background-color 0.25s; } .alternating-colors .orange.alternate-color .ac-bg-hover:hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-bg-hover:hover { background-color: #ed9b33 !important; } .alternating-colors .orange.alternate-color .ac-bg-hover-lighter, .alternating-colors .orange.alternate-color input[type=button]:hover, .alternating-colors .orange.alternate-color input[type=reset]:hover, .alternating-colors .orange.alternate-color input[type=submit]:hover, .alternating-colors .orange.alternate-color .btn-cta, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-bg-hover-lighter, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color input[type=button]:hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color input[type=reset]:hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color input[type=submit]:hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .btn-cta { transition: background-color 0.25s; } .alternating-colors .orange.alternate-color .ac-bg-hover-lighter:hover, .alternating-colors .orange.alternate-color input[type=button]:hover:hover, .alternating-colors .orange.alternate-color input[type=reset]:hover:hover, .alternating-colors .orange.alternate-color input[type=submit]:hover:hover, .alternating-colors .orange.alternate-color .btn-cta:hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-bg-hover-lighter:hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color input[type=button]:hover:hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color input[type=reset]:hover:hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color input[type=submit]:hover:hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .btn-cta:hover { background-color: #FCA332 !important; } .alternating-colors .orange.alternate-color .ac-bg-hover-darker, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-bg-hover-darker { transition: background-color 0.25s; } .alternating-colors .orange.alternate-color .ac-bg-hover-darker:hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-bg-hover-darker:hover { background-color: #c27411 !important; } .alternating-colors .orange.alternate-color .ac-bg-hover-white, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-bg-hover-white { transition: background-color 0.25s; } .alternating-colors .orange.alternate-color .ac-bg-hover-white:hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-bg-hover-white:hover { background-color: #ffffff !important; } .alternating-colors .orange.alternate-color .ac-hover-parent:hover .ac-hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover-parent:hover .ac-hover { color: #ed9b33 !important; } .alternating-colors .orange.alternate-color .ac-hover-parent:hover .ac-hover-darker, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover-parent:hover .ac-hover-darker { color: #c27411 !important; } .alternating-colors .orange.alternate-color .ac-hover-parent:hover .ac-hover-lighter, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover-parent:hover .ac-hover-lighter { color: #FCA332 !important; } .alternating-colors .orange.alternate-color .ac-hover-parent:hover .ac-bg-hover, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover-parent:hover .ac-bg-hover { background-color: #ed9b33 !important; } .alternating-colors .orange.alternate-color .ac-hover-parent:hover .ac-bg-hover-lighter, .alternating-colors .orange.alternate-color .ac-hover-parent:hover input[type=button], .alternating-colors .orange.alternate-color .ac-hover-parent:hover input[type=reset], .alternating-colors .orange.alternate-color .ac-hover-parent:hover input[type=submit], .alternating-colors .orange.alternate-color .ac-hover-parent:hover .btn-cta, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover-parent:hover .ac-bg-hover-lighter, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover-parent:hover input[type=button], .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover-parent:hover input[type=reset], .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover-parent:hover input[type=submit], .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover-parent:hover .btn-cta { background-color: #FCA332 !important; } .alternating-colors .orange.alternate-color .ac-hover-parent:hover .ac-bg-hover-lighter, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover-parent:hover .ac-bg-hover-lighter { background-color: #FCA332 !important; } .alternating-colors .orange.alternate-color .ac-hover-parent:hover .ac-bg-hover-darker, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover-parent:hover .ac-bg-hover-darker { background-color: #c27411 !important; } .alternating-colors .orange.alternate-color .ac-hover-parent:hover .ac-bg-hover-white, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .ac-hover-parent:hover .ac-bg-hover-white { background-color: #ffffff !important; } } .alternating-colors .orange.alternate-color .open .ac-color-active, .alternating-colors .orange.alternate-color.open .ac-color-active, .alternating-colors .orange.alternate-color .active .ac-color-active, .alternating-colors .orange.alternate-color.active .ac-color-active, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .open .ac-color-active, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color.open .ac-color-active, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .active .ac-color-active, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color.active .ac-color-active { color: #ed9b33 !important; } .alternating-colors .orange.alternate-color .open .ac-bg-active, .alternating-colors .orange.alternate-color.open .ac-bg-active, .alternating-colors .orange.alternate-color .active .ac-bg-active, .alternating-colors .orange.alternate-color.active .ac-bg-active, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .open .ac-bg-active, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color.open .ac-bg-active, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .active .ac-bg-active, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color.active .ac-bg-active { background-color: #ed9b33 !important; } .alternating-colors .orange.alternate-color .open .ac-border-active, .alternating-colors .orange.alternate-color.open .ac-border-active, .alternating-colors .orange.alternate-color .active .ac-border-active, .alternating-colors .orange.alternate-color.active .ac-border-active, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .open .ac-border-active, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color.open .ac-border-active, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .active .ac-border-active, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color.active .ac-border-active { border-color: #ed9b33 !important; } .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted { /* this is .full-width only */ } .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .ac-color, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .ac-color { color: #ffffff !important; } .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .ac-border, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .ac-border { border-color: #ffffff !important; } .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .ac-border-top, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .ac-border-top { border-top-color: #ffffff !important; } .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .ac-border-right, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .ac-border-right { border-right-color: #ffffff !important; } .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .ac-border-bottom, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .ac-border-bottom { border-bottom-color: #ffffff !important; } .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .ac-border-left, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .ac-border-left { border-left-color: #ffffff !important; } .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .ac-bg, .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted input[type=button], .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted input[type=reset], .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted input[type=submit], .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .owl-dot.active, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .ac-bg, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted input[type=button], .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted input[type=reset], .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted input[type=submit], .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .owl-dot.active { background-color: #ffffff !important; } .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .ac-bg-cwhite, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .ac-bg-cwhite { background-color: #ffffff !important; color: #ed9b33; } .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .copy.is-wysiwyg ul li, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color .component-standard-content.is-highlighted .copy.is-wysiwyg ul li { background-image: url(../image/ui/bullet-white.svg); } .alternating-colors .orange.alternate-color.UsefulLinkWidget.is-post-standard-widget ul li, .alternating-colors .alternate-color .alternating-colors .orange.alternate-color.UsefulLinkWidget.is-post-standard-widget ul li { background-image: url(../image/ui/icon-arrow-right-orange.svg) !important; } .alternating-colors .red.alternate-color .ac-color, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-color { color: #D0021B !important; } .alternating-colors .red.alternate-color .ac-color-darker, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-color-darker { color: #840111 !important; } .alternating-colors .red.alternate-color .ac-border, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-border { border-color: #D0021B !important; } .alternating-colors .red.alternate-color .ac-border-top, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-border-top { border-top-color: #D0021B !important; } .alternating-colors .red.alternate-color .ac-border-right, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-border-right { border-right-color: #D0021B !important; } .alternating-colors .red.alternate-color .ac-border-bottom, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-border-bottom { border-bottom-color: #D0021B !important; } .alternating-colors .red.alternate-color .ac-border-left, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-border-left { border-left-color: #D0021B !important; } .alternating-colors .red.alternate-color .ac-border-lighter, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-border-lighter { border-color: #DE263D !important; } .alternating-colors .red.alternate-color .ac-border-darker, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-border-darker { border-color: #840111 !important; } .alternating-colors .red.alternate-color .ac-border-top-darker, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-border-top-darker { border-top-color: #840111 !important; } .alternating-colors .red.alternate-color .ac-border-right-darker, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-border-right-darker { border-right-color: #840111 !important; } .alternating-colors .red.alternate-color .ac-border-bottom-darker, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-border-bottom-darker { border-bottom-color: #840111 !important; } .alternating-colors .red.alternate-color .ac-border-left-darker, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-border-left-darker { border-left-color: #840111 !important; } .alternating-colors .red.alternate-color .ac-bg, .alternating-colors .red.alternate-color input[type=button], .alternating-colors .red.alternate-color input[type=reset], .alternating-colors .red.alternate-color input[type=submit], .alternating-colors .red.alternate-color .owl-dot.active, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-bg, .alternating-colors .alternate-color .alternating-colors .red.alternate-color input[type=button], .alternating-colors .alternate-color .alternating-colors .red.alternate-color input[type=reset], .alternating-colors .alternate-color .alternating-colors .red.alternate-color input[type=submit], .alternating-colors .alternate-color .alternating-colors .red.alternate-color .owl-dot.active { background-color: #D0021B !important; } .alternating-colors .red.alternate-color .owl-prev, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .owl-prev { background-image: url(../image/ui/icon-arrow-left-red.svg) !important; } .alternating-colors .red.alternate-color .owl-next, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .owl-next { background-image: url(../image/ui/icon-arrow-right-red.svg) !important; } .alternating-colors .red.alternate-color .video-playlist .owl-next, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .video-playlist .owl-next { background-image: url(../image/ui/icon-arrow-thin-right-red.svg) !important; } .alternating-colors .red.alternate-color .video-playlist .owl-prev, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .video-playlist .owl-prev { background-image: url(../image/ui/icon-arrow-thin-left-red.svg) !important; } .alternating-colors .red.alternate-color .video-playlist .video.active h4, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .video-playlist .video.active h4 { color: #D0021B !important; } .alternating-colors .red.alternate-color .ac-bg-opacity05, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-bg-opacity05 { background-color: rgba(218, 41, 28, 0.5); } .alternating-colors .red.alternate-color .ac-bg-lighter, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-bg-lighter { background-color: #DE263D !important; } .alternating-colors .red.alternate-color .ac-bg-darker, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-bg-darker { background-color: #840111 !important; } .alternating-colors .red.alternate-color .ac-bg-cwhite, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-bg-cwhite { background-color: #D0021B !important; color: #ffffff; } .alternating-colors .red.alternate-color .copy.is-wysiwyg ul li, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .copy.is-wysiwyg ul li { background-image: url(../image/ui/bullet-red.svg) !important; } .alternating-colors .red.alternate-color .ac-color svg circle, .alternating-colors .red.alternate-color .ac-color svg ellipse, .alternating-colors .red.alternate-color .ac-color svg line, .alternating-colors .red.alternate-color .ac-color svg path, .alternating-colors .red.alternate-color .ac-color svg polygon, .alternating-colors .red.alternate-color .ac-color svg rect, .alternating-colors .red.alternate-color svg.ac-color circle, .alternating-colors .red.alternate-color svg.ac-color ellipse, .alternating-colors .red.alternate-color svg.ac-color line, .alternating-colors .red.alternate-color svg.ac-color path, .alternating-colors .red.alternate-color svg.ac-color polygon, .alternating-colors .red.alternate-color svg.ac-color rect, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-color svg circle, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-color svg ellipse, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-color svg line, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-color svg path, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-color svg polygon, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-color svg rect, .alternating-colors .alternate-color .alternating-colors .red.alternate-color svg.ac-color circle, .alternating-colors .alternate-color .alternating-colors .red.alternate-color svg.ac-color ellipse, .alternating-colors .alternate-color .alternating-colors .red.alternate-color svg.ac-color line, .alternating-colors .alternate-color .alternating-colors .red.alternate-color svg.ac-color path, .alternating-colors .alternate-color .alternating-colors .red.alternate-color svg.ac-color polygon, .alternating-colors .alternate-color .alternating-colors .red.alternate-color svg.ac-color rect { fill: #D0021B !important; } .alternating-colors .red.alternate-color input[type=button], .alternating-colors .red.alternate-color input[type=reset], .alternating-colors .red.alternate-color input[type=submit], .alternating-colors .red.alternate-color .btn-cta, .alternating-colors .alternate-color .alternating-colors .red.alternate-color input[type=button], .alternating-colors .alternate-color .alternating-colors .red.alternate-color input[type=reset], .alternating-colors .alternate-color .alternating-colors .red.alternate-color input[type=submit], .alternating-colors .alternate-color .alternating-colors .red.alternate-color .btn-cta { border-bottom-color: #840111 !important; } .alternating-colors .red.alternate-color input[type=text].date, .alternating-colors .red.alternate-color input[type=text].date-alt, .alternating-colors .alternate-color .alternating-colors .red.alternate-color input[type=text].date, .alternating-colors .alternate-color .alternating-colors .red.alternate-color input[type=text].date-alt { background-image: url(../image/ui/btn-icon-calendar-from-2-red.svg) !important; } .alternating-colors .red.alternate-color input[type=text].date[name="toDate"], .alternating-colors .alternate-color .alternating-colors .red.alternate-color input[type=text].date[name="toDate"] { background-image: url(../image/ui/btn-icon-calendar-to-2-red.svg) !important; } html:not(.is-ie) .alternating-colors .red.alternate-color select, html:not(.is-ie) .alternating-colors .alternate-color .alternating-colors .red.alternate-color select { background-image: url(../image/ui/form-select-icon-arrow-down-red.svg) !important; } @media screen and (min-aspect-ratio: 35 / 40) { .alternating-colors .red.alternate-color .ac-hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover { transition: color 0.25s; } .alternating-colors .red.alternate-color .ac-hover:hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover:hover { color: #D0021B !important; } .alternating-colors .red.alternate-color .ac-hover-darker, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover-darker { transition: color 0.25s; } .alternating-colors .red.alternate-color .ac-hover-darker:hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover-darker:hover { color: #840111 !important; } .alternating-colors .red.alternate-color .ac-hover-lighter, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover-lighter { transition: color 0.25s; } .alternating-colors .red.alternate-color .ac-hover-lighter:hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover-lighter:hover { color: #DE263D !important; } .alternating-colors .red.alternate-color .ac-bg-hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-bg-hover { transition: background-color 0.25s; } .alternating-colors .red.alternate-color .ac-bg-hover:hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-bg-hover:hover { background-color: #D0021B !important; } .alternating-colors .red.alternate-color .ac-bg-hover-lighter, .alternating-colors .red.alternate-color input[type=button]:hover, .alternating-colors .red.alternate-color input[type=reset]:hover, .alternating-colors .red.alternate-color input[type=submit]:hover, .alternating-colors .red.alternate-color .btn-cta, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-bg-hover-lighter, .alternating-colors .alternate-color .alternating-colors .red.alternate-color input[type=button]:hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color input[type=reset]:hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color input[type=submit]:hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .btn-cta { transition: background-color 0.25s; } .alternating-colors .red.alternate-color .ac-bg-hover-lighter:hover, .alternating-colors .red.alternate-color input[type=button]:hover:hover, .alternating-colors .red.alternate-color input[type=reset]:hover:hover, .alternating-colors .red.alternate-color input[type=submit]:hover:hover, .alternating-colors .red.alternate-color .btn-cta:hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-bg-hover-lighter:hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color input[type=button]:hover:hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color input[type=reset]:hover:hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color input[type=submit]:hover:hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .btn-cta:hover { background-color: #DE263D !important; } .alternating-colors .red.alternate-color .ac-bg-hover-darker, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-bg-hover-darker { transition: background-color 0.25s; } .alternating-colors .red.alternate-color .ac-bg-hover-darker:hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-bg-hover-darker:hover { background-color: #840111 !important; } .alternating-colors .red.alternate-color .ac-bg-hover-white, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-bg-hover-white { transition: background-color 0.25s; } .alternating-colors .red.alternate-color .ac-bg-hover-white:hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-bg-hover-white:hover { background-color: #ffffff !important; } .alternating-colors .red.alternate-color .ac-hover-parent:hover .ac-hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover-parent:hover .ac-hover { color: #D0021B !important; } .alternating-colors .red.alternate-color .ac-hover-parent:hover .ac-hover-darker, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover-parent:hover .ac-hover-darker { color: #840111 !important; } .alternating-colors .red.alternate-color .ac-hover-parent:hover .ac-hover-lighter, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover-parent:hover .ac-hover-lighter { color: #DE263D !important; } .alternating-colors .red.alternate-color .ac-hover-parent:hover .ac-bg-hover, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover-parent:hover .ac-bg-hover { background-color: #D0021B !important; } .alternating-colors .red.alternate-color .ac-hover-parent:hover .ac-bg-hover-lighter, .alternating-colors .red.alternate-color .ac-hover-parent:hover input[type=button], .alternating-colors .red.alternate-color .ac-hover-parent:hover input[type=reset], .alternating-colors .red.alternate-color .ac-hover-parent:hover input[type=submit], .alternating-colors .red.alternate-color .ac-hover-parent:hover .btn-cta, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover-parent:hover .ac-bg-hover-lighter, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover-parent:hover input[type=button], .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover-parent:hover input[type=reset], .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover-parent:hover input[type=submit], .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover-parent:hover .btn-cta { background-color: #DE263D !important; } .alternating-colors .red.alternate-color .ac-hover-parent:hover .ac-bg-hover-lighter, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover-parent:hover .ac-bg-hover-lighter { background-color: #DE263D !important; } .alternating-colors .red.alternate-color .ac-hover-parent:hover .ac-bg-hover-darker, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover-parent:hover .ac-bg-hover-darker { background-color: #840111 !important; } .alternating-colors .red.alternate-color .ac-hover-parent:hover .ac-bg-hover-white, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .ac-hover-parent:hover .ac-bg-hover-white { background-color: #ffffff !important; } } .alternating-colors .red.alternate-color .open .ac-color-active, .alternating-colors .red.alternate-color.open .ac-color-active, .alternating-colors .red.alternate-color .active .ac-color-active, .alternating-colors .red.alternate-color.active .ac-color-active, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .open .ac-color-active, .alternating-colors .alternate-color .alternating-colors .red.alternate-color.open .ac-color-active, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .active .ac-color-active, .alternating-colors .alternate-color .alternating-colors .red.alternate-color.active .ac-color-active { color: #D0021B !important; } .alternating-colors .red.alternate-color .open .ac-bg-active, .alternating-colors .red.alternate-color.open .ac-bg-active, .alternating-colors .red.alternate-color .active .ac-bg-active, .alternating-colors .red.alternate-color.active .ac-bg-active, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .open .ac-bg-active, .alternating-colors .alternate-color .alternating-colors .red.alternate-color.open .ac-bg-active, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .active .ac-bg-active, .alternating-colors .alternate-color .alternating-colors .red.alternate-color.active .ac-bg-active { background-color: #D0021B !important; } .alternating-colors .red.alternate-color .open .ac-border-active, .alternating-colors .red.alternate-color.open .ac-border-active, .alternating-colors .red.alternate-color .active .ac-border-active, .alternating-colors .red.alternate-color.active .ac-border-active, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .open .ac-border-active, .alternating-colors .alternate-color .alternating-colors .red.alternate-color.open .ac-border-active, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .active .ac-border-active, .alternating-colors .alternate-color .alternating-colors .red.alternate-color.active .ac-border-active { border-color: #D0021B !important; } .alternating-colors .red.alternate-color .component-standard-content.is-highlighted, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .component-standard-content.is-highlighted { /* this is .full-width only */ } .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .ac-color, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .ac-color { color: #ffffff !important; } .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .ac-border, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .ac-border { border-color: #ffffff !important; } .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .ac-border-top, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .ac-border-top { border-top-color: #ffffff !important; } .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .ac-border-right, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .ac-border-right { border-right-color: #ffffff !important; } .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .ac-border-bottom, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .ac-border-bottom { border-bottom-color: #ffffff !important; } .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .ac-border-left, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .ac-border-left { border-left-color: #ffffff !important; } .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .ac-bg, .alternating-colors .red.alternate-color .component-standard-content.is-highlighted input[type=button], .alternating-colors .red.alternate-color .component-standard-content.is-highlighted input[type=reset], .alternating-colors .red.alternate-color .component-standard-content.is-highlighted input[type=submit], .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .owl-dot.active, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .ac-bg, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .component-standard-content.is-highlighted input[type=button], .alternating-colors .alternate-color .alternating-colors .red.alternate-color .component-standard-content.is-highlighted input[type=reset], .alternating-colors .alternate-color .alternating-colors .red.alternate-color .component-standard-content.is-highlighted input[type=submit], .alternating-colors .alternate-color .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .owl-dot.active { background-color: #ffffff !important; } .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .ac-bg-cwhite, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .ac-bg-cwhite { background-color: #ffffff !important; color: #D0021B; } .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .copy.is-wysiwyg ul li, .alternating-colors .alternate-color .alternating-colors .red.alternate-color .component-standard-content.is-highlighted .copy.is-wysiwyg ul li { background-image: url(../image/ui/bullet-white.svg); } .alternating-colors .red.alternate-color.UsefulLinkWidget.is-post-standard-widget ul li, .alternating-colors .alternate-color .alternating-colors .red.alternate-color.UsefulLinkWidget.is-post-standard-widget ul li { background-image: url(../image/ui/icon-arrow-right-red.svg) !important; } #breadcrumb { width: 100%; margin-top: 4em; } #hero + #breadcrumb { position: relative; z-index: 1; } .btn-ctas { text-align: right; /* UGNSW start */ /* UGNSW end */ } * + .btn-ctas { margin-top: 2em; } #hero .btn-ctas { text-align: left; } .LinkWidget .design-style-id-1 .btn-ctas, .LinkWidget .design-style-id-2 .btn-ctas { margin-top: 2em; padding: 0; text-align: left; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .LinkWidget .design-style-id-1 .btn-ctas, .LinkWidget .design-style-id-2 .btn-ctas { padding-left: 0; } } .btn-cta { padding: calc(2em / 2) calc(3em / 2); border: 0; display: inline-block; font-family: "franklin-gothic-urw"; font-size: 2em !important; font-weight: bold; background-color: #003c71; color: #ffffff !important; transition: background-color 0.25s; /*@media screen and (max-width: 768px) { padding: calc(2em / 2 * 1.5) calc(3em / 2 * 1.5) !important; font-size: calc(2em * 1.5) !important; } @media screen and (max-aspect-ratio: $breakpointMaxAspectRatio) and (max-width: 640px) { padding: calc(2em / 2 * 1.5) calc(3em / 2 * 1.5) !important; font-size: calc(2em * 1.5) !important; }*/ } @media screen and (min-aspect-ratio: 35 / 40) { .btn-cta:hover span.label { top: -5px !important; } } .btn-cta + .btn-cta { margin-left: calc(1em / 2); /*@media screen and (max-width: 768px) { margin-left: calc(1em / 2 * 1.5); } @media screen and (max-aspect-ratio: $breakpointMaxAspectRatio) and (max-width: 640px) { margin-left: calc(1em / 2 * 1.5); }*/ } .btn-cta:disabled { opacity: 0.5; cursor: default; } .btn-cta:not(:disabled):hover { background-color: #02549D; } .btn-cta span.label { margin-top: 0 !important; display: inline-block; position: relative; top: 0; transition: top 0.25s; } .btn-cta span.label span.icon { display: none; } .btn-cta.btn-more { background-color: #4f4f4f; } .btn-cta.btn-more:hover { background-color: #6d6e72; } .btn-cta.btn-toggle { padding-right: calc((3em + 6.4em) / 2) !important; position: relative; /*@media screen and (max-width: 768px) { padding-right: calc((3em + 6.4em) / 2 * 1.5) !important; } @media screen and (max-aspect-ratio: $breakpointMaxAspectRatio) and (max-width: 640px) { padding-right: calc((3em + 6.4em) / 2 * 1.5) !important; }*/ } .btn-cta.btn-toggle.off { background-color: #4f4f4f; } .btn-cta.btn-toggle span.label { position: relative; } .btn-cta.btn-toggle span.label .state-on { display: inline; } .btn-cta.btn-toggle span.label .state-off { display: none; } .btn-cta.btn-toggle span.toggle { width: calc(6.4em / 2 - 2px); height: calc(100% - 2px); border: 1px solid #6d6e72; position: absolute; left: calc(100% - 6.4em / 2); top: 0; background-color: #ffffff; /*background-color: #a2b427;*/ background-image: none; transition: left 0.25s; /*@media screen and (max-width: 768px) { width: calc(6.4em / 2 * 1.5 - 2px); left: calc(100% - 6.4em / 2 * 1.5); } @media screen and (max-aspect-ratio: $breakpointMaxAspectRatio) and (max-width: 640px) { width: calc(6.4em / 2 * 1.5 - 2px); left: calc(100% - 6.4em / 2 * 1.5); }*/ } .btn-cta.btn-toggle.off span.label { left: calc((6.4em) / 2); /*@media screen and (max-width: 768px) { left: calc((6.4em) / 2 * 1.5); } @media screen and (max-aspect-ratio: $breakpointMaxAspectRatio) and (max-width: 640px) { left: calc((6.4em) / 2 * 1.5); }*/ } .btn-cta.btn-toggle.off span.label .state-on { display: none; } .btn-cta.btn-toggle.off span.label .state-off { display: inline; } .btn-cta.btn-toggle.off span.toggle { left: 0px; } .SearchBoxWidget .btn-cta.btn-cta.btn-search { padding: calc(1em / 1.8) calc(2em / 1.8) !important; border: 1px solid #D0021B; font-size: 1.8em !important; } form { margin: 2em 0; } @media screen and (max-width: 768px) { form { margin: calc(2em * 1.5) 0; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form { margin: calc(2em * 1.5) 0; } } form p.field, form td { margin: 0; padding: 0; font-size: 1em; } @media screen and (max-width: 768px) { form p.field, form td { font-size: calc(1em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form p.field, form td { font-size: calc(1em * 1.5); } } .optionset li, .step-buttons li { margin: 0; padding: 0; font-size: 1em; background-image: none; } @media screen and (max-width: 768px) { .optionset li, .step-buttons li { font-size: calc(1em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .optionset li, .step-buttons li { font-size: calc(1em * 1.5); } } button, input, label, legend, select, span.field_label, span.right-title, textarea { appearance: none !important; -moz-appearance: none !important; -webkit-appearance: none !important; margin: 0; padding: 0; outline: none; font-family: "franklin-gothic-urw"; font-size: 1.8em !important; color: #6d6e72 !important; } @media screen and (max-width: 768px) { button, input, label, legend, select, span.field_label, span.right-title, textarea { font-size: calc(1.8em * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { button, input, label, legend, select, span.field_label, span.right-title, textarea { font-size: calc(1.8em * 1.5) !important; } } fieldset { min-width: 0; border: 0; } input[type=checkbox], input[type=radio] { width: calc(1em - 1px * 2); height: calc(1em - 1px * 2); border: 1px solid #6d6e72; vertical-align: middle; } @media screen and (max-width: 768px) { input[type=checkbox], input[type=radio] { font-size: calc(1em - 1px * 2 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { input[type=checkbox], input[type=radio] { font-size: calc(1em - 1px * 2 * 1.5); } } .is-gecko input[type=checkbox], .is-gecko input[type=radio] { vertical-align: top; } input[type=checkbox]:checked, input[type=radio]:checked { border-color: #4f4f4f; background-color: #003c71; } input[type=checkbox] + label, input[type=checkbox] + .right, input[type=radio] + label, input[type=radio] + .right { margin-left: calc(1em / 1.8) !important; vertical-align: middle; cursor: pointer; } @media screen and (max-width: 768px) { input[type=checkbox] + label, input[type=checkbox] + .right, input[type=radio] + label, input[type=radio] + .right { margin-left: calc(1em / 1.8 * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { input[type=checkbox] + label, input[type=checkbox] + .right, input[type=radio] + label, input[type=radio] + .right { margin-left: calc(1em / 1.8 * 1.5) !important; } } input[type=email], input[type=password], input[type=text], textarea { width: auto; padding: calc(1em / 1.8) !important; border: 1px solid #6d6e72; border-radius: 0; background-color: #ffffff; } @media screen and (max-width: 768px) { input[type=email], input[type=password], input[type=text], textarea { padding: calc(1em / 1.8 * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { input[type=email], input[type=password], input[type=text], textarea { padding: calc(1em / 1.8 * 1.5) !important; } } .field_label + input[type=email], .field_label + input[type=password], .field_label + input[type=text], .field_label + textarea { margin-left: calc(1em / 1.8) !important; } @media screen and (max-width: 768px) { .field_label + input[type=email], .field_label + input[type=password], .field_label + input[type=text], .field_label + textarea { margin-left: calc(1em / 1.8 * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .field_label + input[type=email], .field_label + input[type=password], .field_label + input[type=text], .field_label + textarea { margin-left: calc(1em / 1.8 * 1.5) !important; } } .field .middleColumn input[type=email], .field .middleColumn input[type=password], .field .middleColumn input[type=text], .field .middleColumn textarea { width: calc(100% - 1em / 1.8 * 2 - 1px * 2); } @media screen and (max-width: 768px) { .field .middleColumn input[type=email], .field .middleColumn input[type=password], .field .middleColumn input[type=text], .field .middleColumn textarea { width: calc(100% - 1em / 1.8 * 2 * 1.5 - 1px * 2); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .field .middleColumn input[type=email], .field .middleColumn input[type=password], .field .middleColumn input[type=text], .field .middleColumn textarea { width: calc(100% - 1em / 1.8 * 2 * 1.5 - 1px * 2); } } input[type=text].date, input[type=text].date-alt { width: calc((20em - 1em - 4.8em) / 1.8 - 1px * 2) !important; padding-right: calc(4.8em / 1.8) !important; background-image: url(../image/ui/btn-icon-calendar-from-2-blue.svg); background-position: top right; background-size: auto 100%; background-repeat: no-repeat; cursor: pointer; } @media screen and (max-width: 768px) { input[type=text].date, input[type=text].date-alt { width: calc((20em - 1em - 4.8em) / 1.8 * 1.5 - 1px * 2) !important; padding-right: calc(4.8em / 1.8 * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { input[type=text].date, input[type=text].date-alt { width: calc((20em - 1em - 4.8em) / 1.8 * 1.5 - 1px * 2) !important; padding-right: calc(4.8em / 1.8 * 1.5) !important; } } #Form_NewsSearchForm input[type=text].date[name="toDate"], #Form_NewsSearchForm input[type=text].date-alt[name="toDate"] { margin-left: calc(2em / 1.8) !important; } @media screen and (max-width: 768px) { #Form_NewsSearchForm input[type=text].date[name="toDate"], #Form_NewsSearchForm input[type=text].date-alt[name="toDate"] { margin-left: calc(2em / 1.8 * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #Form_NewsSearchForm input[type=text].date[name="toDate"], #Form_NewsSearchForm input[type=text].date-alt[name="toDate"] { margin-left: 0 !important; } } input[type=text].date[name="toDate"] { background-image: url(../image/ui/btn-icon-calendar-to-2-blue.svg); } #Form_SearchForm input[type=text]#Form_SearchForm_keyword { width: 100%; height: 100%; padding: 0 !important; border: 0; position: absolute; left: 0; top: 0; text-align: center; } .PublicationHolder .filter-form input[type=text].filter { width: calc(100% - (15em + 1em * 2) / 1.8 - 1px * 2); float: left; } @media screen and (max-width: 768px) { .PublicationHolder .filter-form input[type=text].filter { width: calc(100% - (15em + 1em * 2) / 1.8 * 1.5 - 1px * 2); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .PublicationHolder .filter-form input[type=text].filter { width: calc(100% - (15em + 1em * 2) / 1.8 * 1.5 - 1px * 2); } } .SearchBoxWidget input[type=text].search-input { width: calc(100% - 1em / 1.8 * 2 - 17em / 2); display: block; float: left; } @media screen and (max-width: 768px) { .SearchBoxWidget input[type=text].search-input { width: calc((100% - 1em / 1.8 * 2 - 17em / 2) * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .SearchBoxWidget input[type=text].search-input { width: calc((100% - 1em / 1.8 * 2 - 17em / 2) * 1.5); } } input[type=text].user-comment-screen-name { padding-top: 0 !important; padding-bottom: 0 !important; margin-left: calc(1em / 1.8) !important; } @media screen and (max-width: 768px) { input[type=text].user-comment-screen-name { margin-left: calc(1em / 1.8 * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { input[type=text].user-comment-screen-name { margin-left: calc(1em / 1.8 * 1.5) !important; } } #MemberLoginForm_LoginForm .field label + .middleColumn input[type=email], #MemberLoginForm_LoginForm .field label + .middleColumn input[type=password], #MemberLoginForm_LoginForm .field label + .middleColumn input[type=text] { width: calc(100% - (15em + 1em) / 1.8 - 1em / 1.8 * 2 - 1px * 2); display: inline-block; } @media screen and (max-width: 768px) { #MemberLoginForm_LoginForm .field label + .middleColumn input[type=email], #MemberLoginForm_LoginForm .field label + .middleColumn input[type=password], #MemberLoginForm_LoginForm .field label + .middleColumn input[type=text] { width: calc(100% - ((15em + 1em) / 1.8 - 1em / 1.8 * 2) * 1.5 - 1px * 2); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #MemberLoginForm_LoginForm .field label + .middleColumn input[type=email], #MemberLoginForm_LoginForm .field label + .middleColumn input[type=password], #MemberLoginForm_LoginForm .field label + .middleColumn input[type=text] { width: calc(100% - ((15em + 1em) / 1.8 - 1em / 1.8 * 2) * 1.5 - 1px * 2); } } .StandardWidget .LoginWidget #MemberLoginForm_LoginForm .field label + .middleColumn input[type=email], .StandardWidget .LoginWidget #MemberLoginForm_LoginForm .field label + .middleColumn input[type=password], .StandardWidget .LoginWidget #MemberLoginForm_LoginForm .field label + .middleColumn input[type=text] { width: calc(100% - 1em / 1.8 * 2 - 1px * 2); } @media screen and (max-width: 768px) { .StandardWidget .LoginWidget #MemberLoginForm_LoginForm .field label + .middleColumn input[type=email], .StandardWidget .LoginWidget #MemberLoginForm_LoginForm .field label + .middleColumn input[type=password], .StandardWidget .LoginWidget #MemberLoginForm_LoginForm .field label + .middleColumn input[type=text] { width: calc(100% - 1em / 1.8 * 2 * 1.5 - 1px * 2); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .StandardWidget .LoginWidget #MemberLoginForm_LoginForm .field label + .middleColumn input[type=email], .StandardWidget .LoginWidget #MemberLoginForm_LoginForm .field label + .middleColumn input[type=password], .StandardWidget .LoginWidget #MemberLoginForm_LoginForm .field label + .middleColumn input[type=text] { width: calc(100% - 1em / 1.8 * 2 * 1.5 - 1px * 2); } } input[type=email].post-it-name, input[type=email].post-it-email, input[type=text].post-it-name, input[type=text].post-it-email { width: calc((100% - 2em / 1.8) / 2 - 1em / 1.8 * 2 - 1px * 2); float: left; } @media screen and (max-width: 768px) { input[type=email].post-it-name, input[type=email].post-it-email, input[type=text].post-it-name, input[type=text].post-it-email { width: calc((100% - 2em / 1.8) / 2 - 1em / 1.8 * 2 * 1.5 - 1px * 2); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { input[type=email].post-it-name, input[type=email].post-it-email, input[type=text].post-it-name, input[type=text].post-it-email { width: calc((100% - 2em / 1.8) / 2 - 1em / 1.8 * 2 * 1.5 - 1px * 2); } } input[type=email].post-it-name:nth-child(2n+2), input[type=email].post-it-email:nth-child(2n+2), input[type=text].post-it-name:nth-child(2n+2), input[type=text].post-it-email:nth-child(2n+2) { margin-left: calc(2em / 1.8) !important; } @media screen and (max-width: 768px) { input[type=email].post-it-name:nth-child(2n+2), input[type=email].post-it-email:nth-child(2n+2), input[type=text].post-it-name:nth-child(2n+2), input[type=text].post-it-email:nth-child(2n+2) { margin-left: calc(2em / 1.8 * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { input[type=email].post-it-name:nth-child(2n+2), input[type=email].post-it-email:nth-child(2n+2), input[type=text].post-it-name:nth-child(2n+2), input[type=text].post-it-email:nth-child(2n+2) { margin-left: calc(2em / 1.8 * 1.5) !important; } } .Form_CommentsForm textarea, .user-comment-form textarea { width: calc(100% - 1em / 1.8 * 2 - 1px * 2); height: 5em; } @media screen and (max-width: 768px) { .Form_CommentsForm textarea, .user-comment-form textarea { width: calc(100% - 1em / 1.8 * 2 * 1.5 - 1px * 2); height: calc(5em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .Form_CommentsForm textarea, .user-comment-form textarea { width: calc(100% - 1em / 1.8 * 2 * 1.5 - 1px * 2); height: calc(5em * 1.5); } } .user-comment-form textarea { margin-top: calc(2em / 1.8) !important; } @media screen and (max-width: 768px) { .user-comment-form textarea { margin-top: calc(2em / 1.8 * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .user-comment-form textarea { margin-top: calc(2em / 1.8 * 1.5) !important; } } form#em_subscribe_form label { line-height: 1em; } select { width: auto; max-width: calc(100% - 4.8em / 1.8); padding: calc(1em / 1.8) !important; border: 1px solid #6d6e72; border-radius: 0; background-color: #ffffff; cursor: pointer; } @media screen and (max-width: 768px) { select { max-width: calc(100% - 4.8em / 1.8 * 1.5); padding: calc(1em / 1.8 * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { select { max-width: calc(100% - 4.8em / 1.8 * 1.5); padding: calc(1em / 1.8 * 1.5) !important; } } html:not(.is-ie) select { padding-right: calc(4.8em / 1.8) !important; background-image: url(../image/ui/form-select-icon-arrow-down-blue.svg); background-position: top right; background-size: auto 100%; background-repeat: no-repeat; } @media screen and (max-width: 768px) { html:not(.is-ie) select { padding-right: calc(4.8em / 1.8 * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { html:not(.is-ie) select { padding-right: calc(4.8em / 1.8 * 1.5) !important; } } #Form_NewsSearchForm select { width: 100%; max-width: 100%; } button, input[type=button], input[type=reset], input[type=submit] { padding: calc(2em / 2) calc(3em / 2); border: 0; display: inline-block; font-family: "franklin-gothic-urw"; font-size: 2em !important; font-weight: bold; background-color: #003c71; color: #ffffff !important; transition: background-color 0.25s; /*@media screen and (max-width: 768px) { padding: calc(2em / 2 * 1.5) calc(3em / 2 * 1.5) !important; font-size: calc(2em * 1.5) !important; } @media screen and (max-aspect-ratio: $breakpointMaxAspectRatio) and (max-width: 640px) { padding: calc(2em / 2 * 1.5) calc(3em / 2 * 1.5) !important; font-size: calc(2em * 1.5) !important; }*/ cursor: pointer; } @media screen and (min-aspect-ratio: 35 / 40) { button:hover span.label, input[type=button]:hover span.label, input[type=reset]:hover span.label, input[type=submit]:hover span.label { top: -5px !important; } } button + .btn-cta, input[type=button] + .btn-cta, input[type=reset] + .btn-cta, input[type=submit] + .btn-cta { margin-left: calc(1em / 2); /*@media screen and (max-width: 768px) { margin-left: calc(1em / 2 * 1.5); } @media screen and (max-aspect-ratio: $breakpointMaxAspectRatio) and (max-width: 640px) { margin-left: calc(1em / 2 * 1.5); }*/ } button:disabled, input[type=button]:disabled, input[type=reset]:disabled, input[type=submit]:disabled { opacity: 0.5; cursor: default; } button:not(:disabled):hover, input[type=button]:not(:disabled):hover, input[type=reset]:not(:disabled):hover, input[type=submit]:not(:disabled):hover { background-color: #02549D; } button span.label, input[type=button] span.label, input[type=reset] span.label, input[type=submit] span.label { margin-top: 0 !important; display: inline-block; position: relative; top: 0; transition: top 0.25s; } button span.label span.icon, input[type=button] span.label span.icon, input[type=reset] span.label span.icon, input[type=submit] span.label span.icon { display: none; } button.step-button-prev, input[type=button].step-button-prev, input[type=reset].step-button-prev, input[type=submit].step-button-prev { padding-left: calc(3em / 2 + 1.55em) !important; padding-right: calc(3em / 2) !important; background-image: url(../image/ui/icon-arrow-left-white.svg); background-position: left calc(3em / 2) center; } @media screen and (max-width: 768px) { button.step-button-prev, input[type=button].step-button-prev, input[type=reset].step-button-prev, input[type=submit].step-button-prev { padding-left: calc((3em / 2 + 1.55em) * 1.5) !important; padding-right: calc(3em / 2 * 1.5) !important; background-position: left calc(3em / 2 * 1.5) center; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { button.step-button-prev, input[type=button].step-button-prev, input[type=reset].step-button-prev, input[type=submit].step-button-prev { padding-left: calc((3em / 2 + 1.55em) * 1.5) !important; padding-right: calc(3em / 2 * 1.5) !important; background-position: left calc(3em / 2 * 1.5) center; } } #Form_NewsSearchForm button, #Form_ProjectFinderForm button, #Form_ProjectSearchForm button, .PublicationHolder .filter-form button, #Form_NewsSearchForm input[type=button], #Form_ProjectFinderForm input[type=button], #Form_ProjectSearchForm input[type=button], .PublicationHolder .filter-form input[type=button], #Form_NewsSearchForm input[type=reset], #Form_ProjectFinderForm input[type=reset], #Form_ProjectSearchForm input[type=reset], .PublicationHolder .filter-form input[type=reset], #Form_NewsSearchForm input[type=submit], #Form_ProjectFinderForm input[type=submit], #Form_ProjectSearchForm input[type=submit], .PublicationHolder .filter-form input[type=submit] { width: calc(15em / 1.8 - 1px); padding: calc(1em / 1.8) calc(3em / 1.8) !important; border-top: 1px solid #003c71; border-bottom: 1px solid #003c71; font-size: 1.8em !important; } @media screen and (max-width: 768px) { #Form_NewsSearchForm button, #Form_ProjectFinderForm button, #Form_ProjectSearchForm button, .PublicationHolder .filter-form button, #Form_NewsSearchForm input[type=button], #Form_ProjectFinderForm input[type=button], #Form_ProjectSearchForm input[type=button], .PublicationHolder .filter-form input[type=button], #Form_NewsSearchForm input[type=reset], #Form_ProjectFinderForm input[type=reset], #Form_ProjectSearchForm input[type=reset], .PublicationHolder .filter-form input[type=reset], #Form_NewsSearchForm input[type=submit], #Form_ProjectFinderForm input[type=submit], #Form_ProjectSearchForm input[type=submit], .PublicationHolder .filter-form input[type=submit] { width: calc(15em / 1.8 * 1.5); padding: calc(1em / 1.8 * 1.5) calc(3em / 1.8 * 1.5) !important; font-size: calc(1.8em * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #Form_NewsSearchForm button, #Form_ProjectFinderForm button, #Form_ProjectSearchForm button, .PublicationHolder .filter-form button, #Form_NewsSearchForm input[type=button], #Form_ProjectFinderForm input[type=button], #Form_ProjectSearchForm input[type=button], .PublicationHolder .filter-form input[type=button], #Form_NewsSearchForm input[type=reset], #Form_ProjectFinderForm input[type=reset], #Form_ProjectSearchForm input[type=reset], .PublicationHolder .filter-form input[type=reset], #Form_NewsSearchForm input[type=submit], #Form_ProjectFinderForm input[type=submit], #Form_ProjectSearchForm input[type=submit], .PublicationHolder .filter-form input[type=submit] { width: calc(15em / 1.8 * 1.5); padding: calc(1em / 1.8 * 1.5) calc(3em / 1.8 * 1.5) !important; font-size: calc(1.8em * 1.5) !important; } } #Form_NewsSearchForm button, #Form_NewsSearchForm input[type=button], #Form_NewsSearchForm input[type=reset], #Form_NewsSearchForm input[type=submit] { margin-left: calc(2em / 1.8) !important; } @media screen and (max-width: 768px) { #Form_NewsSearchForm button, #Form_NewsSearchForm input[type=button], #Form_NewsSearchForm input[type=reset], #Form_NewsSearchForm input[type=submit] { margin-left: 0 !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #Form_NewsSearchForm button, #Form_NewsSearchForm input[type=button], #Form_NewsSearchForm input[type=reset], #Form_NewsSearchForm input[type=submit] { margin-left: 0 !important; } } #Form_ProjectSearchForm button, #Form_ProjectSearchForm input[type=button], #Form_ProjectSearchForm input[type=reset], #Form_ProjectSearchForm input[type=submit] { /*display: none !important;*/ /*JPM: comment to re-enable the GO button*/ box-sizing: content-box; width: calc(3em / 1.8); padding: calc(1em / 1.8) calc(1em / 1.8) !important; } @media screen and (max-width: 768px) { #Form_ProjectSearchForm button, #Form_ProjectSearchForm input[type=button], #Form_ProjectSearchForm input[type=reset], #Form_ProjectSearchForm input[type=submit] { padding: calc(1em / 1.8 * 1.5) calc(1em / 1.8 * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #Form_ProjectSearchForm button, #Form_ProjectSearchForm input[type=button], #Form_ProjectSearchForm input[type=reset], #Form_ProjectSearchForm input[type=submit] { padding: calc(1em / 1.8 * 1.5) calc(1em / 1.8 * 1.5) !important; } } .post-its-container .submit-container button, .post-its-container .submit-container input[type=button], .post-its-container .submit-container input[type=reset], .post-its-container .submit-container input[type=submit] { margin-top: calc(1em / 2) !important; } @media screen and (max-width: 768px) { .post-its-container .submit-container button, .post-its-container .submit-container input[type=button], .post-its-container .submit-container input[type=reset], .post-its-container .submit-container input[type=submit] { margin-top: calc(1em / 2 * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .post-its-container .submit-container button, .post-its-container .submit-container input[type=button], .post-its-container .submit-container input[type=reset], .post-its-container .submit-container input[type=submit] { margin-top: calc(1em / 2 * 1.5) !important; } } button.step-button-jump { min-width: 0; height: calc(3em / 2); margin: 0 !important; padding: calc(1em / 2) !important; color: #ffffff !important; background-color: #003c71; } @media screen and (max-width: 768px) { button.step-button-jump { height: calc(3em / 2 * 1.5); padding: calc(1em / 2 * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { button.step-button-jump { height: calc(3em / 2 * 1.5); padding: calc(1em / 2 * 1.5) !important; } } .alternating-colors .alternate-color li:not(.viewed) button.step-button-jump { border-bottom-color: #4f4f4f !important; color: #4f4f4f !important; background-color: #6d6e72 !important; } #NameView_Holder label { font-size: 1.5em !important; } @media screen and (max-width: 768px) { #NameView_Holder label { font-size: calc(1.5em * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #NameView_Holder label { font-size: calc(1.5em * 1.5) !important; } } #NameView_Holder span#NameView { appearance: none !important; -moz-appearance: none !important; -webkit-appearance: none !important; margin: 0; padding: 0; outline: none; font-family: "franklin-gothic-urw"; font-size: 1.8em !important; color: #6d6e72 !important; font-size: 1.8em !important; } @media screen and (max-width: 768px) { #NameView_Holder span#NameView { font-size: calc(1.8em * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #NameView_Holder span#NameView { font-size: calc(1.8em * 1.5) !important; } } @media screen and (max-width: 768px) { #NameView_Holder span#NameView { font-size: calc(1.8em * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #NameView_Holder span#NameView { font-size: calc(1.8em * 1.5) !important; } } /*start: silverstripe forms?*/ form .field + .field, .userformsgroup + form .field { margin-top: 2em; } @media screen and (max-width: 768px) { form .field + .field, .userformsgroup + form .field { margin-top: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form .field + .field, .userformsgroup + form .field { margin-top: calc(2em * 1.5); } } form div.Actions p { appearance: none !important; -moz-appearance: none !important; -webkit-appearance: none !important; margin: 0; padding: 0; outline: none; font-family: "franklin-gothic-urw"; font-size: 1.8em !important; color: #6d6e72 !important; } @media screen and (max-width: 768px) { form div.Actions p { font-size: calc(1.8em * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form div.Actions p { font-size: calc(1.8em * 1.5) !important; } } form#Form_NewsSearchForm, form#Form_ProjectFinderForm, form#Form_ProjectSearchForm { overflow: hidden; } form#Form_NewsSearchForm > fieldset, form#Form_ProjectFinderForm > fieldset, form#Form_ProjectSearchForm > fieldset { width: calc(100% - 15em - 2em); float: left; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form#Form_NewsSearchForm > fieldset, form#Form_ProjectFinderForm > fieldset, form#Form_ProjectSearchForm > fieldset { width: 100%; } } form#Form_NewsSearchForm > fieldset > .field, form#Form_ProjectFinderForm > fieldset > .field, form#Form_ProjectSearchForm > fieldset > .field { float: left; } form#Form_NewsSearchForm > fieldset > .field > .middleColumn > .fieldgroup-field, form#Form_ProjectFinderForm > fieldset > .field > .middleColumn > .fieldgroup-field, form#Form_ProjectSearchForm > fieldset > .field > .middleColumn > .fieldgroup-field { float: left; } form#Form_NewsSearchForm > fieldset > #Form_NewsSearchForm_project_Holder, form#Form_ProjectFinderForm > fieldset > #Form_NewsSearchForm_project_Holder, form#Form_ProjectSearchForm > fieldset > #Form_NewsSearchForm_project_Holder { width: calc(100% - 40em - 2em - 2em - 1px); margin-top: 0; margin-left: 2em; float: left; } @media screen and (max-width: 768px) { form#Form_NewsSearchForm > fieldset > #Form_NewsSearchForm_project_Holder, form#Form_ProjectFinderForm > fieldset > #Form_NewsSearchForm_project_Holder, form#Form_ProjectSearchForm > fieldset > #Form_NewsSearchForm_project_Holder { width: 100%; margin-top: 2em; margin-left: 0; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form#Form_NewsSearchForm > fieldset > #Form_NewsSearchForm_project_Holder, form#Form_ProjectFinderForm > fieldset > #Form_NewsSearchForm_project_Holder, form#Form_ProjectSearchForm > fieldset > #Form_NewsSearchForm_project_Holder { width: 100%; margin-top: 2em; margin-left: 0; } } form#Form_NewsSearchForm > fieldset + .Actions, form#Form_ProjectFinderForm > fieldset + .Actions, form#Form_ProjectSearchForm > fieldset + .Actions { float: left; } @media screen and (max-width: 768px) { form#Form_NewsSearchForm > fieldset + .Actions, form#Form_ProjectFinderForm > fieldset + .Actions, form#Form_ProjectSearchForm > fieldset + .Actions { margin-top: 2em; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form#Form_NewsSearchForm > fieldset + .Actions, form#Form_ProjectFinderForm > fieldset + .Actions, form#Form_ProjectSearchForm > fieldset + .Actions { margin-top: 2em; } } form#Form_SearchForm { height: 100%; margin: 0; position: relative; } form#Form_ProjectFinderForm > fieldset, form#Form_ProjectSearchForm > fieldset { width: auto; } form#Form_ProjectFinderForm > fieldset select, form#Form_ProjectSearchForm > fieldset select { width: 100%; max-width: 100%; } form#Form_ProjectFinderForm > fieldset + .Actions, form#Form_ProjectSearchForm > fieldset + .Actions { margin-left: 2em; float: left; } @media screen and (max-width: 768px) { form#Form_ProjectFinderForm > fieldset + .Actions, form#Form_ProjectSearchForm > fieldset + .Actions { margin-left: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form#Form_ProjectFinderForm > fieldset + .Actions, form#Form_ProjectSearchForm > fieldset + .Actions { margin-left: 0; } } form#Form_ProjectSearchForm > fieldset { width: calc(100% - 5em - 2em); /*JPM: uncomment to re-enable the GO button*/ /*width: 100%;*/ } @media screen and (max-width: 768px) { form#Form_ProjectSearchForm > fieldset { width: 100%; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form#Form_ProjectSearchForm > fieldset { width: 100%; } } form#Form_ProjectSearchForm > fieldset .field { width: calc((100% - 2em * 2) / 3); display: block; float: left; } form#Form_ProjectSearchForm > fieldset .field + .field { margin-top: 0; margin-left: 2em; } @media screen and (max-width: 768px) { form#Form_ProjectSearchForm > fieldset .field + .field { margin-left: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form#Form_ProjectSearchForm > fieldset .field + .field { margin-left: 0; } } form#Form_ProjectSearchForm.selects-1 > fieldset .field { width: calc((100% - 2em * 0) / 1); } @media screen and (max-width: 768px) { form#Form_ProjectSearchForm.selects-1 > fieldset .field { width: calc((100% - 2em * 0 * 1.5) / 1); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form#Form_ProjectSearchForm.selects-1 > fieldset .field { width: 100%; } } form#Form_ProjectSearchForm.selects-2 > fieldset .field { width: calc((100% - 2em * 1) / 2); } @media screen and (max-width: 768px) { form#Form_ProjectSearchForm.selects-2 > fieldset .field { width: calc((100% - 2em * 1 * 1.5) / 2); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form#Form_ProjectSearchForm.selects-2 > fieldset .field { width: 100%; } } form#Form_ProjectSearchForm.selects-3 > fieldset .field { width: calc((100% - 2em * 2) / 3); } @media screen and (max-width: 768px) { form#Form_ProjectSearchForm.selects-3 > fieldset .field { width: calc((100% - 2em * 2 * 1.5) / 2); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form#Form_ProjectSearchForm.selects-3 > fieldset .field { width: 100%; } } @media screen and (max-width: 768px) { form#Form_ProjectSearchForm > fieldset + .Actions { margin-left: 0; } } form#MemberLoginForm_LoginForm .field { overflow: hidden; } form#MemberLoginForm_LoginForm .field#MemberLoginForm_LoginForm_Remember_Holder { margin-left: 15em; } @media screen and (max-width: 768px) { form#MemberLoginForm_LoginForm .field#MemberLoginForm_LoginForm_Remember_Holder { margin-left: calc(15em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form#MemberLoginForm_LoginForm .field#MemberLoginForm_LoginForm_Remember_Holder { margin-left: calc(15em * 1.5); } } .widget form#MemberLoginForm_LoginForm .field#MemberLoginForm_LoginForm_Remember_Holder { margin-left: 0; } form#MemberLoginForm_LoginForm .field label.left { width: calc(15em / 1.8); display: inline-block; } @media screen and (max-width: 768px) { form#MemberLoginForm_LoginForm .field label.left { width: calc(15em / 1.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form#MemberLoginForm_LoginForm .field label.left { width: calc(15em / 1.8 * 1.5); } } form#MemberLoginForm_LoginForm .field .middleColumn { display: inline; } form#MemberLoginForm_LoginForm div.Actions { margin-top: 2em; margin-left: 15em; } @media screen and (max-width: 768px) { form#MemberLoginForm_LoginForm div.Actions { margin-top: calc(2em * 1.5); margin-left: calc(15em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form#MemberLoginForm_LoginForm div.Actions { margin-top: calc(2em * 1.5); margin-left: calc(15em * 1.5); } } .widget form#MemberLoginForm_LoginForm div.Actions { margin-left: 0; } .PublicationHolder form.filter-form { overflow: hidden; } /*end: silverstripe forms?*/ /*start: userforms*/ form.userform fieldset { margin-top: 2em; } form.userform .error-container { padding: 2em; border: 1px solid #D0021B; margin: 2em 0; } form.userform .error-container h4, form.userform .error-container li { appearance: none !important; -moz-appearance: none !important; -webkit-appearance: none !important; margin: 0; padding: 0; outline: none; font-family: "franklin-gothic-urw"; font-size: 1.8em !important; color: #6d6e72 !important; } @media screen and (max-width: 768px) { form.userform .error-container h4, form.userform .error-container li { font-size: calc(1.8em * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .error-container h4, form.userform .error-container li { font-size: calc(1.8em * 1.5) !important; } } form.userform .error-container ul.error-list { margin-top: 0; } form.userform .error-container ul.error-list li { padding-left: 1.5em !important; background-image: url(../image/ui/icon-arrow-right.svg); background-position: 0.5em 0.25em; background-size: 0.55em 0.9em; background-repeat: no-repeat; } @media screen and (max-width: 768px) { form.userform .error-container ul.error-list li { padding-left: calc(1.5em * 1.5) !important; background-position: calc(0.5em * 1.5) calc(0.25em * 1.5); background-size: calc(0.55em * 1.5) calc(0.9em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .error-container ul.error-list li { padding-left: calc(1.5em * 1.5) !important; background-position: calc(0.5em * 1.5) calc(0.25em * 1.5); background-size: calc(0.55em * 1.5) calc(0.9em * 1.5); } } form.userform .field, form.userform .userformsgroup { position: relative; } form.userform .field + .field, form.userform .field + .userformsgroup, form.userform .userformsgroup + .field, form.userform .userformsgroup + .userformsgroup { margin-top: 4em; } @media screen and (max-width: 768px) { form.userform .field + .field, form.userform .field + .userformsgroup, form.userform .userformsgroup + .field, form.userform .userformsgroup + .userformsgroup { margin-top: calc(4em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .field + .field, form.userform .field + .userformsgroup, form.userform .userformsgroup + .field, form.userform .userformsgroup + .userformsgroup { margin-top: calc(4em * 1.5); } } form.userform .field > label, form.userform .field > legend, form.userform .userformsgroup > label, form.userform .userformsgroup > legend { font-weight: bold; color: #4f4f4f !important; } form.userform .field > label + .middleColumn, form.userform .field > legend + .middleColumn, form.userform .userformsgroup > label + .middleColumn, form.userform .userformsgroup > legend + .middleColumn { margin-top: 1em; } @media screen and (max-width: 768px) { form.userform .field > label + .middleColumn, form.userform .field > legend + .middleColumn, form.userform .userformsgroup > label + .middleColumn, form.userform .userformsgroup > legend + .middleColumn { margin-top: calc(1em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .field > label + .middleColumn, form.userform .field > legend + .middleColumn, form.userform .userformsgroup > label + .middleColumn, form.userform .userformsgroup > legend + .middleColumn { margin-top: calc(1em * 1.5); } } form.userform .field .middleColumn * + .middleColumn, form.userform .userformsgroup .middleColumn * + .middleColumn { margin-top: 1em; } @media screen and (max-width: 768px) { form.userform .field .middleColumn * + .middleColumn, form.userform .userformsgroup .middleColumn * + .middleColumn { margin-top: calc(1em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .field .middleColumn * + .middleColumn, form.userform .userformsgroup .middleColumn * + .middleColumn { margin-top: calc(1em * 1.5); } } form.userform .field .middleColumn .optionset li + li, form.userform .userformsgroup .middleColumn .optionset li + li { margin-top: 1em; } @media screen and (max-width: 768px) { form.userform .field .middleColumn .optionset li + li, form.userform .userformsgroup .middleColumn .optionset li + li { margin-top: calc(1em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .field .middleColumn .optionset li + li, form.userform .userformsgroup .middleColumn .optionset li + li { margin-top: calc(1em * 1.5); } } form.userform .field .right-title, form.userform .userformsgroup .right-title { position: absolute; right: 0; top: 0; } form.userform .field .message.error, form.userform .userformsgroup .message.error { appearance: none !important; -moz-appearance: none !important; -webkit-appearance: none !important; margin: 0; padding: 0; outline: none; font-family: "franklin-gothic-urw"; font-size: 1.8em !important; color: #6d6e72 !important; display: block; color: #D0021B !important; } @media screen and (max-width: 768px) { form.userform .field .message.error, form.userform .userformsgroup .message.error { font-size: calc(1.8em * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .field .message.error, form.userform .userformsgroup .message.error { font-size: calc(1.8em * 1.5) !important; } } form.userform .userform-progress p { appearance: none !important; -moz-appearance: none !important; -webkit-appearance: none !important; margin: 0; padding: 0; outline: none; font-family: "franklin-gothic-urw"; font-size: 1.8em !important; color: #6d6e72 !important; text-align: center; } @media screen and (max-width: 768px) { form.userform .userform-progress p { font-size: calc(1.8em * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .userform-progress p { font-size: calc(1.8em * 1.5) !important; } } form.userform .userform-progress .progress { width: calc(100% - 8em); height: 0.5em; margin-top: 1em; background-color: #6d6e72; position: relative; left: 4em; } @media screen and (max-width: 768px) { form.userform .userform-progress .progress { width: calc(100% - 8em * 1.5); height: calc(0.5em * 1.5); margin-top: calc(1em * 1.5); left: calc(4em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .userform-progress .progress { width: calc(100% - 8em * 1.5); height: calc(0.5em * 1.5); margin-top: calc(1em * 1.5); left: calc(4em * 1.5); } } form.userform .userform-progress .progress .progress-bar { height: 0.5em; position: absolute; left: 0; top: 0; background-color: #02549D; } @media screen and (max-width: 768px) { form.userform .userform-progress .progress .progress-bar { height: calc(0.5em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .userform-progress .progress .progress-bar { height: calc(0.5em * 1.5); } } form.userform .userform-progress nav { width: 0; height: 0; position: absolute; left: 0; top: 0; overflow: hidden; } form.userform .userform-progress, form.userform .step-navigation { margin-top: 2em; } @media screen and (max-width: 768px) { form.userform .userform-progress, form.userform .step-navigation { margin-top: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .userform-progress, form.userform .step-navigation { margin-top: calc(2em * 1.5); } } form.userform .step-navigation { position: relative; } form.userform .step-navigation ul.step-buttons { overflow: hidden; } form.userform .step-navigation ul.step-buttons li button, form.userform .step-navigation ul.step-buttons li input[type=button], form.userform .step-navigation ul.step-buttons li input[type=reset], form.userform .step-navigation ul.step-buttons li input[type=submit] { margin-right: calc(1em / 2) !important; float: left; } @media screen and (max-width: 768px) { form.userform .step-navigation ul.step-buttons li button, form.userform .step-navigation ul.step-buttons li input[type=button], form.userform .step-navigation ul.step-buttons li input[type=reset], form.userform .step-navigation ul.step-buttons li input[type=submit] { margin-right: calc(1em / 2 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .step-navigation ul.step-buttons li button, form.userform .step-navigation ul.step-buttons li input[type=button], form.userform .step-navigation ul.step-buttons li input[type=reset], form.userform .step-navigation ul.step-buttons li input[type=submit] { margin-right: calc(1em / 2 * 1.5); } } form.userform .step-navigation ul.step-buttons li button.step-button-jump { margin-bottom: 0; } form.userform .step-navigation ul.step-buttons li button.step-button-prev, form.userform .step-navigation ul.step-buttons li button.step-button-next { width: 2em; min-width: 0; height: 2em; padding: 0 !important; margin: 0 !important; border: 0; position: absolute; left: 0; top: -2.3em; background-color: transparent !important; background-image: url(../image/ui/icon-arrow-left-blue.svg); background-position: center; background-repeat: no-repeat; background-size: auto 100%; } @media screen and (max-width: 768px) { form.userform .step-navigation ul.step-buttons li button.step-button-prev, form.userform .step-navigation ul.step-buttons li button.step-button-next { width: calc(2em * 1.5); height: calc(2em * 1.5); top: calc(-2.3em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .step-navigation ul.step-buttons li button.step-button-prev, form.userform .step-navigation ul.step-buttons li button.step-button-next { width: calc(2em * 1.5); height: calc(2em * 1.5); top: calc(-2.3em * 1.5); } } form.userform .step-navigation ul.step-buttons li button.step-button-prev span, form.userform .step-navigation ul.step-buttons li button.step-button-next span { display: none; } form.userform .step-navigation ul.step-buttons li button.step-button-next { left: auto; right: 0; background-image: url(../image/ui/icon-arrow-right-blue.svg); } form.userform .step-navigation ul.step-buttons li input[type=reset], form.userform .step-navigation ul.step-buttons li input[type=submit] { margin-top: 1em !important; } @media screen and (min-width: 769px) { form.userform .field.columns-2.optionset .optionset, form.userform .field.columns-3.optionset .optionset, form.userform .field.columns-4.optionset .optionset, form.userform .field.columns-5.optionset .optionset { overflow: hidden; padding-bottom: 0.5em; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .field.columns-2.optionset .optionset, form.userform .field.columns-3.optionset .optionset, form.userform .field.columns-4.optionset .optionset, form.userform .field.columns-5.optionset .optionset { padding-bottom: calc(0.5em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .field.columns-2.optionset .optionset, form.userform .field.columns-3.optionset .optionset, form.userform .field.columns-4.optionset .optionset, form.userform .field.columns-5.optionset .optionset { padding-bottom: calc(0.5em * 1.5); } } @media screen and (min-width: 769px) { form.userform .field.columns-2 input[type=checkbox] + label, form.userform .field.columns-2 input[type=radio] + label, form.userform .field.columns-3 input[type=checkbox] + label, form.userform .field.columns-3 input[type=radio] + label, form.userform .field.columns-4 input[type=checkbox] + label, form.userform .field.columns-4 input[type=radio] + label, form.userform .field.columns-5 input[type=checkbox] + label, form.userform .field.columns-5 input[type=radio] + label { width: calc(100% - 1em * 2 / 1.8 - 1px * 2); display: inline-block; line-height: 1em; vertical-align: top; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .field.columns-2 input[type=checkbox] + label, form.userform .field.columns-2 input[type=radio] + label, form.userform .field.columns-3 input[type=checkbox] + label, form.userform .field.columns-3 input[type=radio] + label, form.userform .field.columns-4 input[type=checkbox] + label, form.userform .field.columns-4 input[type=radio] + label, form.userform .field.columns-5 input[type=checkbox] + label, form.userform .field.columns-5 input[type=radio] + label { width: calc(100% - 1em * 2 / 1.8 * 1.5 - 1px * 2); line-height: calc(1em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .field.columns-2 input[type=checkbox] + label, form.userform .field.columns-2 input[type=radio] + label, form.userform .field.columns-3 input[type=checkbox] + label, form.userform .field.columns-3 input[type=radio] + label, form.userform .field.columns-4 input[type=checkbox] + label, form.userform .field.columns-4 input[type=radio] + label, form.userform .field.columns-5 input[type=checkbox] + label, form.userform .field.columns-5 input[type=radio] + label { width: calc(100% - 1em * 2 / 1.8 * 1.5 - 1px * 2); line-height: calc(1em * 1.5); } } @media screen and (min-width: 769px) { form.userform .field.columns-2.optionset .optionset li { width: calc((100% - 2em) / 2); margin-top: 2em; float: left; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .field.columns-2.optionset .optionset li { width: calc((100% - 2em * 1.5) / 2); margin-top: calc(2em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .field.columns-2.optionset .optionset li { width: calc((100% - 2em * 1.5) / 2); margin-top: calc(2em * 1.5); } } @media screen and (min-width: 769px) { form.userform .field.columns-2.optionset .optionset li:first-child, form.userform .field.columns-2.optionset .optionset li:nth-child(2) { margin-top: 0; } form.userform .field.columns-2.optionset .optionset li:nth-child(2n+2) { margin-left: 2em; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .field.columns-2.optionset .optionset li:nth-child(2n+2) { margin-left: calc(2em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .field.columns-2.optionset .optionset li:nth-child(2n+2) { margin-left: calc(2em * 1.5); } } @media screen and (min-width: 769px) { .widget-half-width form.userform .field.columns-2.optionset .optionset li { width: 100%; float: none; margin-left: 0; } form.userform .field.columns-3.optionset .optionset li { width: calc((100% - 2em * 2) / 3); margin-top: 2em; float: left; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .field.columns-3.optionset .optionset li { width: calc((100% - 2em * 2 * 1.5) / 3); margin-top: calc(2em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .field.columns-3.optionset .optionset li { width: calc((100% - 2em * 2 * 1.5) / 3); margin-top: calc(2em * 1.5); } } @media screen and (min-width: 769px) { form.userform .field.columns-3.optionset .optionset li:first-child, form.userform .field.columns-3.optionset .optionset li:nth-child(2), form.userform .field.columns-3.optionset .optionset li:nth-child(3) { margin-top: 0; } form.userform .field.columns-3.optionset .optionset li:nth-child(3n+2), form.userform .field.columns-3.optionset .optionset li:nth-child(3n+3) { margin-left: 2em; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .field.columns-3.optionset .optionset li:nth-child(3n+2), form.userform .field.columns-3.optionset .optionset li:nth-child(3n+3) { margin-left: calc(2em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .field.columns-3.optionset .optionset li:nth-child(3n+2), form.userform .field.columns-3.optionset .optionset li:nth-child(3n+3) { margin-left: calc(2em * 1.5); } } @media screen and (min-width: 769px) { .widget-half-width form.userform .field.columns-3.optionset .optionset li { width: 100%; float: none; margin-left: 0; } form.userform .field.columns-4.optionset .optionset li { width: calc((100% - 2em * 3) / 4); margin-top: 2em; float: left; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .field.columns-4.optionset .optionset li { width: calc((100% - 2em * 3 * 1.5) / 4); margin-top: calc(2em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .field.columns-4.optionset .optionset li { width: calc((100% - 2em * 3 * 1.5) / 4); margin-top: calc(2em * 1.5); } } @media screen and (min-width: 769px) { form.userform .field.columns-4.optionset .optionset li:first-child, form.userform .field.columns-4.optionset .optionset li:nth-child(2), form.userform .field.columns-4.optionset .optionset li:nth-child(3), form.userform .field.columns-4.optionset .optionset li:nth-child(4) { margin-top: 0; } form.userform .field.columns-4.optionset .optionset li:nth-child(4n+2), form.userform .field.columns-4.optionset .optionset li:nth-child(4n+3), form.userform .field.columns-4.optionset .optionset li:nth-child(4n+4) { margin-left: 2em; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .field.columns-4.optionset .optionset li:nth-child(4n+2), form.userform .field.columns-4.optionset .optionset li:nth-child(4n+3), form.userform .field.columns-4.optionset .optionset li:nth-child(4n+4) { margin-left: calc(2em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .field.columns-4.optionset .optionset li:nth-child(4n+2), form.userform .field.columns-4.optionset .optionset li:nth-child(4n+3), form.userform .field.columns-4.optionset .optionset li:nth-child(4n+4) { margin-left: calc(2em * 1.5); } } @media screen and (min-width: 769px) { .widget-half-width form.userform .field.columns-4.optionset .optionset li { width: 100%; float: none; margin-left: 0; } form.userform .field.columns-5.optionset .optionset li { width: calc((100% - 2em * 4) / 5); margin-top: 2em; float: left; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .field.columns-5.optionset .optionset li { width: calc((100% - 2em * 4 * 1.5) / 5); margin-top: calc(2em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .field.columns-5.optionset .optionset li { width: calc((100% - 2em * 4 * 1.5) / 5); margin-top: calc(2em * 1.5); } } @media screen and (min-width: 769px) { form.userform .field.columns-5.optionset .optionset li:first-child, form.userform .field.columns-5.optionset .optionset li:nth-child(2), form.userform .field.columns-5.optionset .optionset li:nth-child(3), form.userform .field.columns-5.optionset .optionset li:nth-child(4), form.userform .field.columns-5.optionset .optionset li:nth-child(5) { margin-top: 0; } form.userform .field.columns-5.optionset .optionset li:nth-child(5n+2), form.userform .field.columns-5.optionset .optionset li:nth-child(5n+3), form.userform .field.columns-5.optionset .optionset li:nth-child(5n+4), form.userform .field.columns-5.optionset .optionset li:nth-child(5n+5) { margin-left: 2em; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .field.columns-5.optionset .optionset li:nth-child(5n+2), form.userform .field.columns-5.optionset .optionset li:nth-child(5n+3), form.userform .field.columns-5.optionset .optionset li:nth-child(5n+4), form.userform .field.columns-5.optionset .optionset li:nth-child(5n+5) { margin-left: calc(2em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .field.columns-5.optionset .optionset li:nth-child(5n+2), form.userform .field.columns-5.optionset .optionset li:nth-child(5n+3), form.userform .field.columns-5.optionset .optionset li:nth-child(5n+4), form.userform .field.columns-5.optionset .optionset li:nth-child(5n+5) { margin-left: calc(2em * 1.5); } } @media screen and (min-width: 769px) { .widget-half-width form.userform .field.columns-5.optionset .optionset li { width: 100%; float: none; margin-left: 0; } form.userform .userformsgroup.columns-2 .middleColumn, form.userform .userformsgroup.columns-3 .middleColumn, form.userform .userformsgroup.columns-4 .middleColumn, form.userform .userformsgroup.columns-5 .middleColumn { overflow: hidden; } form.userform .userformsgroup.columns-2 .middleColumn .field { width: calc((100% - 2em) / 2); margin-top: 2em; float: left; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .userformsgroup.columns-2 .middleColumn .field { width: calc((100% - 2em * 1.5) / 2); margin-top: calc(2em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .userformsgroup.columns-2 .middleColumn .field { width: calc((100% - 2em * 1.5) / 2); margin-top: calc(2em * 1.5); } } @media screen and (min-width: 769px) { form.userform .userformsgroup.columns-2 .middleColumn .field:first-child, form.userform .userformsgroup.columns-2 .middleColumn .field:nth-child(2) { margin-top: 0; } form.userform .userformsgroup.columns-2 .middleColumn .field:nth-child(2n+2) { margin-left: 2em; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .userformsgroup.columns-2 .middleColumn .field:nth-child(2n+2) { margin-left: calc(2em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .userformsgroup.columns-2 .middleColumn .field:nth-child(2n+2) { margin-left: calc(2em * 1.5); } } @media screen and (min-width: 769px) { .widget-half-width form.userform .userformsgroup.columns-2 .middleColumn .field { width: 100%; float: none; margin-left: 0; } form.userform .userformsgroup.columns-3 .middleColumn .field { width: calc((100% - 2em * 2) / 3); margin-top: 2em; float: left; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .userformsgroup.columns-3 .middleColumn .field { width: calc((100% - 2em * 2 * 1.5) / 3); margin-top: calc(2em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .userformsgroup.columns-3 .middleColumn .field { width: calc((100% - 2em * 2 * 1.5) / 3); margin-top: calc(2em * 1.5); } } @media screen and (min-width: 769px) { form.userform .userformsgroup.columns-3 .middleColumn .field:first-child, form.userform .userformsgroup.columns-3 .middleColumn .field:nth-child(2), form.userform .userformsgroup.columns-3 .middleColumn .field:nth-child(3) { margin-top: 0; } form.userform .userformsgroup.columns-3 .middleColumn .field:nth-child(3n+2), form.userform .userformsgroup.columns-3 .middleColumn .field:nth-child(3n+3) { margin-left: 2em; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .userformsgroup.columns-3 .middleColumn .field:nth-child(3n+2), form.userform .userformsgroup.columns-3 .middleColumn .field:nth-child(3n+3) { margin-left: calc(2em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .userformsgroup.columns-3 .middleColumn .field:nth-child(3n+2), form.userform .userformsgroup.columns-3 .middleColumn .field:nth-child(3n+3) { margin-left: calc(2em * 1.5); } } @media screen and (min-width: 769px) { .widget-half-width form.userform .userformsgroup.columns-3 .middleColumn .field { width: 100%; float: none; margin-left: 0; } form.userform .userformsgroup.columns-4 .middleColumn .field { width: calc((100% - 2em * 3) / 4); margin-top: 2em; float: left; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .userformsgroup.columns-4 .middleColumn .field { width: calc((100% - 2em * 3 * 1.5) / 4); margin-top: calc(2em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .userformsgroup.columns-4 .middleColumn .field { width: calc((100% - 2em * 3 * 1.5) / 4); margin-top: calc(2em * 1.5); } } @media screen and (min-width: 769px) { form.userform .userformsgroup.columns-4 .middleColumn .field:first-child, form.userform .userformsgroup.columns-4 .middleColumn .field:nth-child(2), form.userform .userformsgroup.columns-4 .middleColumn .field:nth-child(3), form.userform .userformsgroup.columns-4 .middleColumn .field:nth-child(4) { margin-top: 0; } form.userform .userformsgroup.columns-4 .middleColumn .field:nth-child(4n+2), form.userform .userformsgroup.columns-4 .middleColumn .field:nth-child(4n+3), form.userform .userformsgroup.columns-4 .middleColumn .field:nth-child(4n+4) { margin-left: 2em; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .userformsgroup.columns-4 .middleColumn .field:nth-child(4n+2), form.userform .userformsgroup.columns-4 .middleColumn .field:nth-child(4n+3), form.userform .userformsgroup.columns-4 .middleColumn .field:nth-child(4n+4) { margin-left: calc(2em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .userformsgroup.columns-4 .middleColumn .field:nth-child(4n+2), form.userform .userformsgroup.columns-4 .middleColumn .field:nth-child(4n+3), form.userform .userformsgroup.columns-4 .middleColumn .field:nth-child(4n+4) { margin-left: calc(2em * 1.5); } } @media screen and (min-width: 769px) { .widget-half-width form.userform .userformsgroup.columns-4 .middleColumn .field { width: 100%; float: none; margin-left: 0; } form.userform .userformsgroup.columns-5 .middleColumn .field { width: calc((100% - 2em * 4) / 5); margin-top: 2em; float: left; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .userformsgroup.columns-5 .middleColumn .field { width: calc((100% - 2em * 4 * 1.5) / 5); margin-top: calc(2em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .userformsgroup.columns-5 .middleColumn .field { width: calc((100% - 2em * 4 * 1.5) / 5); margin-top: calc(2em * 1.5); } } @media screen and (min-width: 769px) { form.userform .userformsgroup.columns-5 .middleColumn .field:first-child, form.userform .userformsgroup.columns-5 .middleColumn .field:nth-child(2), form.userform .userformsgroup.columns-5 .middleColumn .field:nth-child(3), form.userform .userformsgroup.columns-5 .middleColumn .field:nth-child(4), form.userform .userformsgroup.columns-5 .middleColumn .field:nth-child(5) { margin-top: 0; } form.userform .userformsgroup.columns-5 .middleColumn .field:nth-child(5n+2), form.userform .userformsgroup.columns-5 .middleColumn .field:nth-child(5n+3), form.userform .userformsgroup.columns-5 .middleColumn .field:nth-child(5n+4), form.userform .userformsgroup.columns-5 .middleColumn .field:nth-child(5n+5) { margin-left: 2em; } } @media screen and (min-width: 769px) and (max-width: 768px) { form.userform .userformsgroup.columns-5 .middleColumn .field:nth-child(5n+2), form.userform .userformsgroup.columns-5 .middleColumn .field:nth-child(5n+3), form.userform .userformsgroup.columns-5 .middleColumn .field:nth-child(5n+4), form.userform .userformsgroup.columns-5 .middleColumn .field:nth-child(5n+5) { margin-left: calc(2em * 1.5); } } @media screen and (min-width: 769px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form.userform .userformsgroup.columns-5 .middleColumn .field:nth-child(5n+2), form.userform .userformsgroup.columns-5 .middleColumn .field:nth-child(5n+3), form.userform .userformsgroup.columns-5 .middleColumn .field:nth-child(5n+4), form.userform .userformsgroup.columns-5 .middleColumn .field:nth-child(5n+5) { margin-left: calc(2em * 1.5); } } @media screen and (min-width: 769px) { .widget-half-width form.userform .userformsgroup.columns-5 .middleColumn .field { width: 100%; float: none; margin-left: 0; } } /*end: userforms*/ /*start: vision 6*/ form#em_subscribe_form { font-size: 1em !important; } form#em_subscribe_form table { margin: 0; } form#em_subscribe_form table tr td { font-size: 1em; } form#em_subscribe_form .webform_step { width: auto !important; padding: 0 !important; border: 0 !important; margin: 0 !important; background-color: transparent !important; /*> div { > .wfe_component:first-child { background-color: $colorMain; > table.em_wfe_form_container:first-child { tr { > td:first-child { background-color: $colorMainContrast; width: 15em; } } } } }*/ } form#em_subscribe_form .webform_step div + div { margin-top: 2em !important; } @media screen and (max-width: 768px) { form#em_subscribe_form .webform_step div + div { margin-top: calc(2em * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form#em_subscribe_form .webform_step div + div { margin-top: calc(2em * 1.5) !important; } } form#em_subscribe_form .webform_step div + div div { padding: 0 !important; } form#em_subscribe_form .webform_step .wfe_component { width: auto !important; padding: 0 !important; border: 0 !important; margin: 0 !important; background-color: transparent !important; } form#em_subscribe_form .webform_step .wfe_component input[type=email], form#em_subscribe_form .webform_step .wfe_component input[type=password], form#em_subscribe_form .webform_step .wfe_component input[type=text] { width: calc(100% - 1em / 1.8 * 2) !important; } @media screen and (max-width: 768px) { form#em_subscribe_form .webform_step .wfe_component input[type=email], form#em_subscribe_form .webform_step .wfe_component input[type=password], form#em_subscribe_form .webform_step .wfe_component input[type=text] { width: calc(100% - 1em / 1.8 * 2 * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form#em_subscribe_form .webform_step .wfe_component input[type=email], form#em_subscribe_form .webform_step .wfe_component input[type=password], form#em_subscribe_form .webform_step .wfe_component input[type=text] { width: calc(100% - 1em / 1.8 * 2 * 1.5) !important; } } form#em_subscribe_form .webform_step .wfe_component td { vertical-align: middle; } form#em_subscribe_form .webform_step .wfe_component div.wysiwyg { appearance: none !important; -moz-appearance: none !important; -webkit-appearance: none !important; margin: 0; padding: 0; outline: none; font-family: "franklin-gothic-urw"; font-size: 1.8em !important; color: #6d6e72 !important; } @media screen and (max-width: 768px) { form#em_subscribe_form .webform_step .wfe_component div.wysiwyg { font-size: calc(1.8em * 1.5) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { form#em_subscribe_form .webform_step .wfe_component div.wysiwyg { font-size: calc(1.8em * 1.5) !important; } } /*end: vision 6*/ .pop-up-form { width: 100%; height: 0; position: absolute; left: 0; top: 0; z-index: 8; } .pop-up-form.open { height: 100%; } .pop-up-form.open .btn-open-pop-up-form .close { display: block; } .pop-up-form.open .btn-open-pop-up-form .open { display: none; } .pop-up-form .btn-open-pop-up-form { width: 6em; max-width: 6em; height: 6em; max-height: 6em; border-radius: calc(6em / 2); box-shadow: 0 3px 0 #001325; overflow: hidden; text-align: center; position: absolute; right: 2em; z-index: 7; background-color: #003c71; right: calc(2em + 6em + 1em); } .content-page .pop-up-form .btn-open-pop-up-form { top: calc(40em + 6em); } @media screen and (max-width: 1024px) { .content-page .pop-up-form .btn-open-pop-up-form { top: calc((11em + 0px) + 40em); } } .HomePage .pop-up-form .btn-open-pop-up-form { top: calc(60em + 6em); } @media screen and (max-width: 1024px) { .HomePage .pop-up-form .btn-open-pop-up-form { top: calc((11em + 0px) + 60em); } } .no-hero .pop-up-form .btn-open-pop-up-form { top: calc((6em + 0px) + 5.5em + 1em); } @media screen and (max-width: 1024px) { .no-hero .pop-up-form .btn-open-pop-up-form { top: calc((6em + 0px) + 5.5em + 5em); } } @media screen and (max-width: 768px) { .no-hero .pop-up-form .btn-open-pop-up-form { top: calc((6em + 0px) + 5.5em + 7em); } } @media screen and (max-width: 640px) { .no-hero .pop-up-form .btn-open-pop-up-form { top: calc((11em + 0px) + 5.5em + 2em); } } .is-ie .pop-up-form .btn-open-pop-up-form { border-top-left-radius: calc(6em / 2); border-top-right-radius: calc(6em / 2); border-bottom-right-radius: calc(6em / 2); border-bottom-left-radius: calc(6em / 2); } .pop-up-form .btn-open-pop-up-form .close, .pop-up-form .btn-open-pop-up-form .complete, .pop-up-form .btn-open-pop-up-form .open { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .pop-up-form .btn-open-pop-up-form .close svg, .pop-up-form .btn-open-pop-up-form .complete svg, .pop-up-form .btn-open-pop-up-form .open svg { width: 3em !important; height: 3em !important; position: absolute; left: calc(50% - 3em / 2); top: calc(50% - 3em / 2); } .pop-up-form .btn-open-pop-up-form .close svg circle, .pop-up-form .btn-open-pop-up-form .close svg ellipse, .pop-up-form .btn-open-pop-up-form .close svg line, .pop-up-form .btn-open-pop-up-form .close svg path, .pop-up-form .btn-open-pop-up-form .close svg polygon, .pop-up-form .btn-open-pop-up-form .close svg rect, .pop-up-form .btn-open-pop-up-form .complete svg circle, .pop-up-form .btn-open-pop-up-form .complete svg ellipse, .pop-up-form .btn-open-pop-up-form .complete svg line, .pop-up-form .btn-open-pop-up-form .complete svg path, .pop-up-form .btn-open-pop-up-form .complete svg polygon, .pop-up-form .btn-open-pop-up-form .complete svg rect, .pop-up-form .btn-open-pop-up-form .open svg circle, .pop-up-form .btn-open-pop-up-form .open svg ellipse, .pop-up-form .btn-open-pop-up-form .open svg line, .pop-up-form .btn-open-pop-up-form .open svg path, .pop-up-form .btn-open-pop-up-form .open svg polygon, .pop-up-form .btn-open-pop-up-form .open svg rect { fill: #ffffff; } .pop-up-form .btn-open-pop-up-form .close, .pop-up-form .btn-open-pop-up-form .complete { background-image: url(../image/ui/btn-icon-x.svg); display: none; } .pop-up-form .btn-open-pop-up-form .open { background-image: url(../image/ui/icon-survey.svg); } .pop-up-form .btn-open-pop-up-form .open svg { width: 6em !important; height: 6em !important; left: 0; top: 0; } .pop-up-form iframe { width: 100%; height: 100%; border: 0; position: absolute; left: 0; top: 0; } body.feedback-form #ugnsw-main-viewport { width: 40em; position: absolute; right: calc(2em + 6em + 1em + 40em); } .content-page body.feedback-form #ugnsw-main-viewport { top: calc(40em + 6em); } @media screen and (max-width: 1024px) { .content-page body.feedback-form #ugnsw-main-viewport { top: calc((11em + 0px) + 40em); } } .HomePage body.feedback-form #ugnsw-main-viewport { top: calc(60em + 6em); } @media screen and (max-width: 1024px) { .HomePage body.feedback-form #ugnsw-main-viewport { top: calc((11em + 0px) + 60em); } } .no-hero body.feedback-form #ugnsw-main-viewport { top: calc((6em + 0px) + 5.5em + 1em); } @media screen and (max-width: 1024px) { .no-hero body.feedback-form #ugnsw-main-viewport { top: calc((6em + 0px) + 5.5em + 5em); } } @media screen and (max-width: 768px) { .no-hero body.feedback-form #ugnsw-main-viewport { top: calc((6em + 0px) + 5.5em + 7em); } } @media screen and (max-width: 640px) { .no-hero body.feedback-form #ugnsw-main-viewport { top: calc((11em + 0px) + 5.5em + 2em); } } body.feedback-form #ugnsw-main-viewport .main .full-width .content-width { width: 100%; } .userform + .userform-results { margin-top: 2em; } .widget.widget-half-width .userform-results { margin: 2em; } .fullscreen-pop-up .userform-results { margin: 0; } .userform-results .question dl.results { margin-top: 0; } .userform-results .question dl.results dt, .userform-results .question dl.results dd { padding-left: calc(2em / 1.8); border-left: 2px solid #6d6e72; margin-left: calc(2em / 1.8); } @media screen and (max-width: 768px) { .userform-results .question dl.results dt, .userform-results .question dl.results dd { padding-left: calc(2em / 1.8 * 1.5); margin-left: calc(2em / 1.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .userform-results .question dl.results dt, .userform-results .question dl.results dd { padding-left: calc(2em / 1.8 * 1.5); margin-left: calc(2em / 1.8 * 1.5); } } .userform-results .question dl.results dt { width: auto; float: none; font-weight: normal; } .userform-results .question dl.results dt:after { content: ""; } .userform-results .question dl.results dd .value { font-weight: bold; height: calc(1em / 1.8); display: block; position: absolute; right: calc(1em / 1.8); top: 0; color: #ffffff; } @media screen and (max-width: 768px) { .userform-results .question dl.results dd .value { height: calc(1em / 1.8 * 1.5); right: calc(1em / 1.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .userform-results .question dl.results dd .value { height: calc(1em / 1.8 * 1.5); right: calc(1em / 1.8 * 1.5); } } .userform-results .question dl.results dd .bar { width: 1px; height: 1.5em; border-radius: 0.75em; display: block; position: relative; background-color: #D0021B; } .userform-results .question + .question { margin-top: 4em; } #hero .owl-carousel .owl-stage-outer { height: 100%; } #hero .owl-carousel .owl-stage-outer .owl-stage { height: 100%; } .image-comparison .owl-carousel .owl-stage-outer .owl-stage { overflow: hidden; } #hero .owl-carousel .owl-stage-outer .owl-stage .owl-item { height: 100%; } .fullscreen-pop-up .owl-carousel.video-playlist { width: calc(100% - 10em * 2); padding: 0 10em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .fullscreen-pop-up .owl-carousel.video-playlist { width: calc(100% - 2em * 2); padding: 0 2em; } } .owl-dots { width: 100%; height: 1.5em; padding: 2em 0; text-align: center; } .gallery-items .owl-dots { position: absolute; top: 11em; } .widget-full-width .gallery-items .owl-dots { top: 21em; } .owl-dots .owl-dot { width: 1em; height: 1em; border-radius: 50%; margin: 0 0.5em; display: inline-block; background-color: #dbdbdb; transition: background-color 0.25s; } @media screen and (min-aspect-ratio: 35 / 40) { .owl-dots .owl-dot:hover { background-color: #003c71; } } .owl-dots .owl-dot.active { background-color: #003c71; } #hero .owl-dots .owl-dot { border: 1px solid rgba(255, 255, 255, 0.25); } .CallForGreatIdeasPage .owl-dots .owl-dot { width: 1em; height: 1em; border-radius: 50%; } .owl-nav, .owl-carousel-nav-custom { width: 100%; position: relative; } #hero .slides .owl-nav, #hero .slides .owl-carousel-nav-custom { position: static; } .gallery-items .owl-nav, .gallery-items .owl-carousel-nav-custom { position: absolute; top: 11em; } .widget-full-width .gallery-items .owl-nav, .widget-full-width .gallery-items .owl-carousel-nav-custom { top: 21em; } .video-carousel .owl-nav, .video-carousel .owl-carousel-nav-custom { position: absolute; top: -7.5em; } .video-playlist .owl-nav, .video-playlist .owl-carousel-nav-custom { position: static; } .widget .video-playlist .owl-nav, .widget .video-playlist .owl-carousel-nav-custom { position: relative; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .video-playlist .owl-nav, .video-playlist .owl-carousel-nav-custom { position: relative; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .video-playlist .owl-nav.active, .video-playlist .owl-carousel-nav-custom.active { position: absolute; top: -5.5em; } } .owl-nav .owl-prev, .owl-nav .owl-next, .owl-carousel-nav-custom .owl-prev, .owl-carousel-nav-custom .owl-next { width: 1.85em; height: 3.25em; position: absolute; left: 1em; top: calc(5.5em / 2 - 3.25em / 2); background-image: url(../image/ui/icon-arrow-left-blue.svg); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; cursor: pointer; z-index: 1; opacity: 1; transition: opacity 0.25s; } .owl-nav .owl-prev.disabled, .owl-nav .owl-next.disabled, .owl-carousel-nav-custom .owl-prev.disabled, .owl-carousel-nav-custom .owl-next.disabled { opacity: 0; } @media screen and (min-aspect-ratio: 35 / 40) { .owl-nav .owl-prev, .owl-nav .owl-next, .owl-carousel-nav-custom .owl-prev, .owl-carousel-nav-custom .owl-next { transition: opacity 0.25s, transform 0.25s; } .owl-nav .owl-prev:hover, .owl-nav .owl-next:hover, .owl-carousel-nav-custom .owl-prev:hover, .owl-carousel-nav-custom .owl-next:hover { transform: translateX(-10px); } } .gallery-items .owl-nav .owl-prev, .gallery-items .owl-nav .owl-next, .gallery-items .owl-carousel-nav-custom .owl-prev, .gallery-items .owl-carousel-nav-custom .owl-next { width: 2em; height: 3em; /*top: -18em; left: -3em;*/ /*opacity: 0.25;*/ z-index: 1; } .gallery-items .owl-nav .owl-prev.disabled, .gallery-items .owl-nav .owl-next.disabled, .gallery-items .owl-carousel-nav-custom .owl-prev.disabled, .gallery-items .owl-carousel-nav-custom .owl-next.disabled { opacity: 0; } .widget-half-width .gallery-items .owl-nav .owl-prev, .widget-half-width .gallery-items .owl-nav .owl-next, .widget-half-width .gallery-items .owl-carousel-nav-custom .owl-prev, .widget-half-width .gallery-items .owl-carousel-nav-custom .owl-next { /*top: -14em;*/ } #hero .owl-nav .owl-prev, #hero .owl-nav .owl-next, #hero .owl-carousel-nav-custom .owl-prev, #hero .owl-carousel-nav-custom .owl-next { width: 2.7em; height: 6em; left: 2em; top: calc(50% - 6em / 2 + 11em / 2); background-image: url(../image/ui/icon-arrow-thin-left-white.svg); } .video-carousel .owl-nav .owl-prev, .video-carousel .owl-nav .owl-next, .video-carousel .owl-carousel-nav-custom .owl-prev, .video-carousel .owl-carousel-nav-custom .owl-next { opacity: 0.25; /*top: -45em;*/ } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .video-carousel .owl-nav .owl-prev, .video-carousel .owl-nav .owl-next, .video-carousel .owl-carousel-nav-custom .owl-prev, .video-carousel .owl-carousel-nav-custom .owl-next { /*top: -48em;*/ } } .video-carousel .owl-nav .owl-prev.disabled, .video-carousel .owl-nav .owl-next.disabled, .video-carousel .owl-carousel-nav-custom .owl-prev.disabled, .video-carousel .owl-carousel-nav-custom .owl-next.disabled { opacity: 0; } .VideoHolder .video-playlist .owl-nav .owl-prev, .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-nav .owl-prev, .video-playlist .owl-nav .owl-prev .widget-full-width, .VideoHolder .video-playlist .owl-nav .owl-next, .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-nav .owl-next, .video-playlist .owl-nav .owl-next .widget-full-width, .VideoHolder .video-playlist .owl-carousel-nav-custom .owl-prev, .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-carousel-nav-custom .owl-prev, .video-playlist .owl-carousel-nav-custom .owl-prev .widget-full-width, .VideoHolder .video-playlist .owl-carousel-nav-custom .owl-next, .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-carousel-nav-custom .owl-next, .video-playlist .owl-carousel-nav-custom .owl-next .widget-full-width { width: 2.7em; height: 6em; top: calc(17.5em / 2 - 6em / 2); left: calc(-2.7em - 2em); background-image: url(../image/ui/icon-arrow-thin-left.svg) !important; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .VideoHolder .video-playlist .owl-nav .owl-prev, .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-nav .owl-prev, .video-playlist .owl-nav .owl-prev .widget-full-width, .VideoHolder .video-playlist .owl-nav .owl-next, .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-nav .owl-next, .video-playlist .owl-nav .owl-next .widget-full-width, .VideoHolder .video-playlist .owl-carousel-nav-custom .owl-prev, .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-carousel-nav-custom .owl-prev, .video-playlist .owl-carousel-nav-custom .owl-prev .widget-full-width, .VideoHolder .video-playlist .owl-carousel-nav-custom .owl-next, .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-carousel-nav-custom .owl-next, .video-playlist .owl-carousel-nav-custom .owl-next .widget-full-width { width: 1.85em; height: 3.25em; top: calc(5.5em / 2 - 3.25em / 2); left: 0; } } .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-nav .owl-prev, .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-nav .owl-next, .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-carousel-nav-custom .owl-prev, .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-carousel-nav-custom .owl-next { left: 3.5em; background-image: url(../image/ui/icon-arrow-thin-left-blue.svg) !important; } .widget.widget-half-width .video-playlist .owl-nav .owl-prev, .widget.widget-half-width .video-playlist .owl-nav .owl-next, .widget.widget-half-width .video-playlist .owl-carousel-nav-custom .owl-prev, .widget.widget-half-width .video-playlist .owl-carousel-nav-custom .owl-next { top: 1em; } .owl-nav .owl-next, .owl-carousel-nav-custom .owl-next { /*left: calc(100% - 1.85em - 1em);*/ left: auto; right: 1em; background-image: url(../image/ui/icon-arrow-right-blue.svg); } @media screen and (min-aspect-ratio: 35 / 40) { .owl-nav .owl-next:hover, .owl-carousel-nav-custom .owl-next:hover { transform: translateX(10px); } } #hero .owl-nav .owl-next, #hero .owl-carousel-nav-custom .owl-next { left: auto; right: 2em; background-image: url(../image/ui/icon-arrow-thin-right-white.svg); } .VideoHolder .video-playlist .owl-nav .owl-next, .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-nav .owl-next, .video-playlist .owl-nav .owl-next .widget-full-width, .VideoHolder .video-playlist .owl-carousel-nav-custom .owl-next, .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-carousel-nav-custom .owl-next, .video-playlist .owl-carousel-nav-custom .owl-next .widget-full-width { left: calc(100% + 2em); right: auto; background-image: url(../image/ui/icon-arrow-thin-right.svg) !important; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .VideoHolder .video-playlist .owl-nav .owl-next, .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-nav .owl-next, .video-playlist .owl-nav .owl-next .widget-full-width, .VideoHolder .video-playlist .owl-carousel-nav-custom .owl-next, .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-carousel-nav-custom .owl-next, .video-playlist .owl-carousel-nav-custom .owl-next .widget-full-width { left: auto; right: 0; } } .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-nav .owl-next, .VirtualTourPage .fullscreen-pop-up .video-playlist .owl-carousel-nav-custom .owl-next { left: auto; right: 3.5em; background-image: url(../image/ui/icon-arrow-thin-right-blue.svg) !important; } /*.owl-carousel-nav-custom { .widget.widget-half-width & { position: relative; } @media screen and (max-aspect-ratio: $breakpointMaxAspectRatio) and (max-width: 640px) { position: relative; &:last-child { .owl-prev, .owl-next { top: auto; bottom: calc(3.25em / 2); } } } .timeline & { display: none; } }*/ #hero .owl-carousel-dots-custom { padding-top: 3em; overflow: hidden; } #hero .owl-carousel-dots-custom .owl-dot { width: 1.4em; height: 1.4em; padding-bottom: 0em; margin-top: 0; float: left; position: relative; background-color: transparent !important; transition: margin-top 0.25s; cursor: pointer; } #hero .owl-carousel-dots-custom .owl-dot:hover { margin-top: -1em; padding-bottom: 1em; } #hero .owl-carousel-dots-custom .owl-dot.active { background-color: #003c71; } #hero .owl-carousel-dots-custom .owl-dot + .owl-dot { margin-left: 0.7em; } #hero .owl-carousel-dots-custom .owl-dot span { width: 100%; height: 100%; display: block; background-color: #ffffff; position: relative; } #ui-datepicker-div { width: 20em; padding: 2em; border: 1px solid #e5e5e5; border-radius: 0.5em; font-family: "franklin-gothic-urw"; font-size: 10px; background-color: #ffffff; } #ui-datepicker-div table { border-collapse: collapse; } #ui-datepicker-div table tr td { padding: 0; font-size: 1em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #ui-datepicker-div { width: calc(100% - 8em); } } #ui-datepicker-div .ui-datepicker-header { position: relative; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #ui-datepicker-div .ui-datepicker-header { font-size: 1.8em; } } #ui-datepicker-div .ui-datepicker-header .ui-datepicker-prev { width: 2em; height: 2em; display: block; position: absolute; left: 0; top: 0; z-index: 1; background-image: url(../image/ui/icon-arrow-left.svg); background-position: center; background-size: 0.9em auto; background-repeat: no-repeat; cursor: pointer; transition: transform 0.25s; } @media screen and (min-aspect-ratio: 35 / 40) { #ui-datepicker-div .ui-datepicker-header .ui-datepicker-prev:hover { transform: translateX(-10px); } } #ui-datepicker-div .ui-datepicker-header .ui-datepicker-prev span { display: none; } #ui-datepicker-div .ui-datepicker-header .ui-datepicker-next { width: 2em; height: 2em; display: block; position: absolute; right: 0; top: 0; z-index: 1; background-image: url(../image/ui/icon-arrow-right.svg); background-position: center; background-size: 0.9em auto; background-repeat: no-repeat; cursor: pointer; transition: transform 0.25s; } @media screen and (min-aspect-ratio: 35 / 40) { #ui-datepicker-div .ui-datepicker-header .ui-datepicker-next:hover { transform: translateX(10px); } } #ui-datepicker-div .ui-datepicker-header .ui-datepicker-next span { display: none; } #ui-datepicker-div .ui-datepicker-header .ui-datepicker-title { width: 100%; text-align: center; font-weight: bold; font-size: 1.4em; } #ui-datepicker-div .ui-datepicker-calendar { width: 100%; margin-top: 0.5em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #ui-datepicker-div .ui-datepicker-calendar { font-size: 1.8em; } } #ui-datepicker-div .ui-datepicker-calendar tr { height: calc(3.2em / 1.4); } #ui-datepicker-div .ui-datepicker-calendar th { width: calc(3.2em / 1.4); } #ui-datepicker-div .ui-datepicker-calendar th span { font-size: 1.4em; } #ui-datepicker-div .ui-datepicker-calendar td { font-size: 1em; width: calc(3.2em / 1.4); height: calc(3.2em / 1.4); } #ui-datepicker-div .ui-datepicker-calendar td a { width: 100%; height: 100%; line-height: calc(3.2em / 1.4); display: block; font-size: 1.4em; text-align: center; color: #333333; transition: color 0.25s, background-color 0.25s; } @media screen and (min-aspect-ratio: 35 / 40) { #ui-datepicker-div .ui-datepicker-calendar td a:hover { color: #ffffff; background-color: #D0021B; } } header { /* the styles below are the minimum required for: 1. the roll-over drop down for the header menu 2. big-menu on desktop 3. to convert the big-menu into a expand/collapse menu on mobile the styles below have no padding or margin. but each element is positioned where they should be - relatively compared to other elements. to make this SASS file portable (e.g. to the next project), its best to not edit the styles below. instead, tweak the styles by overriding them above. */ } header#margin-top { width: 100%; height: 11em; border-bottom: solid rgba(0, 60, 113, 0) 0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; z-index: 9; transition: background-color 0.5s, border-bottom-color 0.5s; } @media screen and (min-width: 1025px) { .mini-header header#margin-top, .is-scrolled header#margin-top { height: 6em; border-bottom-width: 0px; border-bottom-color: #003c71; background-color: transparent; } } @media screen and (max-width: 1024px) { header#margin-top { height: 11em; border-bottom-width: 0px; border-bottom-color: #003c71 !important; position: fixed; background-color: #232c2f; } } header#margin-top.is-search-open .logo-container { opacity: 0; } @media screen and (min-width: 1025px) { .mini-header header#margin-top.is-search-open .logo-container, .is-scrolled header#margin-top.is-search-open .logo-container { opacity: 1; } } header#margin-top .logo-container { width: 32.8em; height: 11em; position: absolute; left: 0; top: 0; z-index: 1; opacity: 1; transition: width 0.5s, opacity 0.5s; } @media screen and (min-width: 1025px) { .mini-header header#margin-top .logo-container, .is-scrolled header#margin-top .logo-container { width: 26.1em; height: 100%; } } @media screen and (max-width: 1024px) { header#margin-top .logo-container { width: calc(11em * (26.1 / 6.4)); height: 11em; position: relative; } } header#margin-top .logo-container .logo-bg { /*width: $logoWidth; height: $logoHeight; background-color: #ffffff; position: absolute; right: 0; top: 0; transition: width $transitionDurationVeryQuick, height $transitionDurationVeryQuick; @media screen and (min-width: 1025px) { .mini-header &, .is-scrolled & { width: 100%; height: calc(14.7em * 0.54545); } } @media screen and (max-width: 1024px) { display: none; }*/ display: none; } header#margin-top .logo-container .end-right { display: none; } header#margin-top .logo-container .logo-landcomphase1 { width: 20.4em; height: 14.7em; box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); position: absolute; right: 0; top: 0; background-image: url(../theme-landcomphase1/logo-header-landcom.png); background-position: center; background-repeat: no-repeat; background-size: 100% auto; transition: width 0.25s, height 0.25s; } @media screen and (min-width: 1025px) { .mini-header header#margin-top .logo-container .logo-landcomphase1, .is-scrolled header#margin-top .logo-container .logo-landcomphase1 { width: 100%; height: 100%; background-image: url(../theme-landcomphase1/logo-header-landcom-mini.png); background-size: cover; } } @media screen and (max-width: 1024px) { header#margin-top .logo-container .logo-landcomphase1 { width: 100%; height: 100%; background-image: url(../theme-landcomphase1/logo-header-landcom-mini.png); background-size: cover; } } header#margin-top .logo-container a { width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; z-index: 1; } header#margin-top ul#header-menu { /* HEADER MENU with roll-over drop-down sub-menu */ width: 100%; padding-left: 32.8em; height: 6em; margin-top: 0; margin-left: 0; position: absolute; /*left: left margin + logo width + margin from logo*/ left: 0; bottom: 0; background-color: #003c71; white-space: nowrap; transition: width 0.25s, padding-left 0.25s; } @media screen and (min-width: 1025px) { .mini-header header#margin-top ul#header-menu, .is-scrolled header#margin-top ul#header-menu { padding-left: 26.1em; } } @media screen and (max-width: 1024px) { header#margin-top ul#header-menu { display: none; } } header#margin-top ul#header-menu.header-menu-1 > li { width: calc((100% - (18.6em + 32.8em)) / 1.001); } @media screen and (min-width: 1025px) { .mini-header header#margin-top ul#header-menu.header-menu-1 > li, .is-scrolled header#margin-top ul#header-menu.header-menu-1 > li { width: calc((100% - (18.6em + 26.1em)) / 1.001); } } header#margin-top ul#header-menu.header-menu-2 > li { width: calc((100% - (18.6em + 32.8em)) / 2.001); } @media screen and (min-width: 1025px) { .mini-header header#margin-top ul#header-menu.header-menu-2 > li, .is-scrolled header#margin-top ul#header-menu.header-menu-2 > li { width: calc((100% - (18.6em + 26.1em)) / 2.001); } } header#margin-top ul#header-menu.header-menu-3 > li { width: calc((100% - (18.6em + 32.8em)) / 3.001); } @media screen and (min-width: 1025px) { .mini-header header#margin-top ul#header-menu.header-menu-3 > li, .is-scrolled header#margin-top ul#header-menu.header-menu-3 > li { width: calc((100% - (18.6em + 26.1em)) / 3.001); } } header#margin-top ul#header-menu.header-menu-4 > li { width: calc((100% - (18.6em + 32.8em)) / 4.001); } @media screen and (min-width: 1025px) { .mini-header header#margin-top ul#header-menu.header-menu-4 > li, .is-scrolled header#margin-top ul#header-menu.header-menu-4 > li { width: calc((100% - (18.6em + 26.1em)) / 4.001); } } header#margin-top ul#header-menu.header-menu-5 > li { width: calc((100% - (18.6em + 32.8em)) / 5.001); } @media screen and (min-width: 1025px) { .mini-header header#margin-top ul#header-menu.header-menu-5 > li, .is-scrolled header#margin-top ul#header-menu.header-menu-5 > li { width: calc((100% - (18.6em + 26.1em)) / 5.001); } } header#margin-top ul#header-menu.header-menu-6 > li { width: calc((100% - (18.6em + 32.8em)) / 6.001); } @media screen and (min-width: 1025px) { .mini-header header#margin-top ul#header-menu.header-menu-6 > li, .is-scrolled header#margin-top ul#header-menu.header-menu-6 > li { width: calc((100% - (18.6em + 26.1em)) / 6.001); } } header#margin-top ul#header-menu.header-menu-7 > li { width: calc((100% - (18.6em + 32.8em)) / 7.001); } @media screen and (min-width: 1025px) { .mini-header header#margin-top ul#header-menu.header-menu-7 > li, .is-scrolled header#margin-top ul#header-menu.header-menu-7 > li { width: calc((100% - (18.6em + 26.1em)) / 7.001); } } header#margin-top ul#header-menu.header-menu-8 > li { width: calc((100% - (18.6em + 32.8em)) / 8.001); } @media screen and (min-width: 1025px) { .mini-header header#margin-top ul#header-menu.header-menu-8 > li, .is-scrolled header#margin-top ul#header-menu.header-menu-8 > li { width: calc((100% - (18.6em + 26.1em)) / 8.001); } } header#margin-top ul#header-menu.header-menu-9 > li { width: calc((100% - (18.6em + 32.8em)) / 9.001); } @media screen and (min-width: 1025px) { .mini-header header#margin-top ul#header-menu.header-menu-9 > li, .is-scrolled header#margin-top ul#header-menu.header-menu-9 > li { width: calc((100% - (18.6em + 26.1em)) / 9.001); } } header#margin-top ul#header-menu.header-menu-10 > li { width: calc((100% - (18.6em + 32.8em)) / 10.001); } @media screen and (min-width: 1025px) { .mini-header header#margin-top ul#header-menu.header-menu-10 > li, .is-scrolled header#margin-top ul#header-menu.header-menu-10 > li { width: calc((100% - (18.6em + 26.1em)) / 10.001); } } header#margin-top ul#header-menu li { height: calc(6em); padding-left: 0; font-family: "franklin-gothic-urw"; line-height: calc(6em); position: relative; display: block; float: left; text-transform: uppercase; background-image: none; transition: width 0.25s; /*@media screen and (min-width: 1025px) {*/ /*}*/ } @media screen and (min-width: 641px) { header#margin-top ul#header-menu li { font-size: 1em; } } header#margin-top ul#header-menu li:hover a .roll-over { opacity: 1; } .is-ie header#margin-top ul#header-menu li:hover a .roll-over { display: block; } header#margin-top ul#header-menu li:hover ul.dropdown-content { display: block; } header#margin-top ul#header-menu li + li { margin-top: 0; } header#margin-top ul#header-menu li.header-menu-search { width: calc(18.6em) !important; background-color: #3eb1c8; transition: width 0.25s, background-color 0.25s; } header#margin-top ul#header-menu li.header-menu-search:hover { background-color: #297f90; } header#margin-top ul#header-menu li.header-menu-search .icon { width: calc(3em); height: calc(3em); position: absolute; left: 1.5em; top: calc(50% - 1.5em); background-image: url(../image/ui/icon-magnifying-glass.svg); } header#margin-top ul#header-menu li.header-menu-search .icon ellipse { stroke: #ffffff; } header#margin-top ul#header-menu li.header-menu-search .icon path, header#margin-top ul#header-menu li.header-menu-search .icon polygon { fill: #ffffff; } header#margin-top ul#header-menu li a { width: 100%; height: 100%; font-size: 1.7em; color: #ffffff; position: relative; display: block; /*overflow: hidden;*/ z-index: 1; } header#margin-top ul#header-menu li a.btn-icon { display: block; } header#margin-top ul#header-menu li a .arrow-down { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #ffffff; display: inline-block; vertical-align: middle; } header#margin-top ul#header-menu li a .arrow-up { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #ffffff; display: inline-block; vertical-align: middle; } header#margin-top ul#header-menu li a .header-menu-item-left, header#margin-top ul#header-menu li a .header-menu-item-right { width: calc(1em + 1px); height: 100%; display: block; /*float: left;*/ position: absolute; top: 0; } header#margin-top ul#header-menu li a .header-menu-item-left { left: 0; /*background-image set in _alternating-colours.scss*/ background-position: 0 0; background-size: 100% 100%; background-repeat: no-repeat; } header#margin-top ul#header-menu li a .header-menu-item-right { right: 0; /*background-image set in _alternating-colours.scss*/ background-position: 0 0; background-size: 100% 100%; background-repeat: no-repeat; } header#margin-top ul#header-menu li a .label { width: calc(100% - (1em * 2)); height: 100%; display: block; overflow: hidden; position: absolute; left: calc(1em); text-align: center; line-height: calc(6em / 1.7); /*z-index: 1;*/ } header#margin-top ul#header-menu li a .roll-over { opacity: 0; transition: opacity 0.25s; z-index: 1; } .is-ie header#margin-top ul#header-menu li a .roll-over { display: none; } header#margin-top ul#header-menu li a .roll-over .header-menu-item-left, header#margin-top ul#header-menu li a .roll-over .header-menu-item-right { background-color: #02549D; } header#margin-top ul#header-menu li a .roll-over .label { color: #ffffff; background-color: #02549D; z-index: 1; } header#margin-top ul#header-menu li ul.dropdown-content { width: 100%; margin-top: 0; box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); display: none; position: absolute; left: 0; text-align: left; background-color: #ffffff; } header#margin-top ul#header-menu li ul.dropdown-content li { width: 100%; height: auto; margin: 0; display: block !important; position: relative; text-transform: none; white-space: nowrap; background-image: none; } @media screen and (min-width: 641px) { header#margin-top ul#header-menu li ul.dropdown-content li { font-size: 1em; } } @media screen and (min-width: 1025px) { header#margin-top ul#header-menu li ul.dropdown-content li:hover .roll-over { opacity: 1; } header#margin-top ul#header-menu li ul.dropdown-content li:hover .roll-over .header-menu-item-right { left: 100%; } header#margin-top ul#header-menu li ul.dropdown-content li:hover a { color: #ffffff !important; } } header#margin-top ul#header-menu li ul.dropdown-content li .roll-over { width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; background-color: #686b6d; transition: opacity 0.25s; } header#margin-top ul#header-menu li ul.dropdown-content li .roll-over .header-menu-item-right { width: calc(4.5em); height: 100%; position: absolute; left: calc(100% - 4.5em); top: 0; transition: left 0.25s 0.125s; } header#margin-top ul#header-menu li ul.dropdown-content li a { width: calc(100% - 2em * 2 / 1.7); padding: calc(2em / 1.7); font-size: 1.7em; line-height: normal; white-space: normal; color: #4f4f4f !important; } header#margin-top .search-container { width: 100%; height: 6em; background-color: #ffffff; position: absolute; left: 0; bottom: 0; display: none; z-index: 2; transition: height 0.5s; } header#margin-top .search-container.open { display: block; } @media screen and (max-width: 1024px) { header#margin-top .search-container.open { left: 50%; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 1024px) { header#margin-top .search-container.open { left: calc(100% - (100% - 11em)); } } @media screen and (min-width: 1025px) { .mini-header header#margin-top .search-container, .is-scrolled header#margin-top .search-container { height: 6em; } } @media screen and (max-width: 1024px) { header#margin-top .search-container { width: calc(50% - 11em); height: 11em; left: 100%; display: block; transition: left 0.25s; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 1024px) { header#margin-top .search-container { width: calc(100% - 11em * 2); left: 100%; } } header#margin-top .search-container .header-menu-seach-go { width: 11em; height: 100%; display: none; position: absolute; right: -11em; top: 0; background-color: #4f4f4f; } @media screen and (max-width: 1024px) { header#margin-top .search-container .header-menu-seach-go { display: block; } } header#margin-top .search-container .header-menu-seach-go .icon-go { width: 3em; height: 3em; position: absolute; left: calc(50% - 1.5em); top: calc(50% - 1.5em); background-color: #4f4f4f; background-image: url(../image/ui/icon-magnifying-glass.svg); background-position: center; background-repeat: no-repeat; background-size: cover; } header#margin-top .search-container .header-menu-seach-go .icon-go ellipse { stroke: #ffffff; } header#margin-top .search-container .header-menu-seach-go .icon-go path, header#margin-top .search-container .header-menu-seach-go .icon-go polygon { fill: #ffffff; } header#margin-top .search-container .header-menu-seach-go .btn-go-search { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } header#margin-top .search-container .header-menu-search-close { width: 18.6em; height: 100%; position: absolute; right: 0; top: 0; background-color: #4f4f4f; } @media screen and (min-width: 1025px) { header#margin-top .search-container .header-menu-search-close { transition: background-color 0.25s; } header#margin-top .search-container .header-menu-search-close:hover { background-color: #D0021B; } } @media screen and (max-width: 1024px) { header#margin-top .search-container .header-menu-search-close { display: none; } } header#margin-top .search-container .header-menu-search-close .icon-x { width: 3em; height: 3em; position: absolute; left: 1.5em; top: calc(50% - 1.5em); background-image: url(../image/ui/btn-icon-x-blue.svg); transition: width 0.25s, height 0.25s, top 0.25s, right 0.25s; } @media screen and (max-width: 1024px) { header#margin-top .search-container .header-menu-search-close .icon-x { left: calc(50% - 1.5em); } } header#margin-top .search-container .header-menu-search-close .icon-x path { fill: #ffffff; } header#margin-top .search-container .header-menu-search-close .btn-close-search { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; } #header-pusher { width: 100%; height: calc(11em + 0px); display: none; background-color: #4f4f4f; } .no-hero #header-pusher { height: calc(6em + 0px); display: block; } @media screen and (max-width: 1024px) { #header-pusher { height: calc(11em + 0px); display: block; } .no-hero #header-pusher { height: calc(11em + 0px); } } @media screen and (max-width: 640px) { .no-hero #header-pusher { margin-bottom: 11em; } } header#margin-top div.btn-burger-menu-container { width: 4em; height: 11em; padding: 0 1em; margin: 0 4em 0 1em; display: none; vertical-align: middle; float: right; background-color: rgba(255, 255, 255, 0); transition: left 0.25s, background-color 0.25s; } @media screen and (min-aspect-ratio: 35 / 40) { header#margin-top div.btn-burger-menu-container:hover { background-color: rgba(255, 255, 255, 0.3); } } header#margin-top div.btn-burger-menu-container.active { padding-bottom: 4em; background-color: #003c71; } @media screen and (max-width: 1024px) { header#margin-top div.btn-burger-menu-container.active { padding-bottom: 0; border-left: 1px solid #4f4f4f; background-color: #232c2f; left: 0%; } } @media screen and (min-aspect-ratio: 35 / 40) and (max-width: 1024px) { header#margin-top div.btn-burger-menu-container.active { left: calc(50% - 11em); } } .mini-header header#margin-top div.btn-burger-menu-container { height: 6em; } @media screen and (max-width: 1024px) { header#margin-top div.btn-burger-menu-container { width: calc(11em - 1px); height: 11em !important; padding: 0; margin: 0; display: block; overflow: hidden; position: absolute; top: 0; left: calc(100% - 11em); z-index: 2; } } header#margin-top div.btn-burger-menu-container a { width: 3em; height: 3em; display: block; position: absolute; left: calc(50% - 1.5em); top: calc(50% - 1.5em); background-image: url(../image/ui/icon-btn-burger-menu-white.svg); background-position: center; background-repeat: no-repeat; background-size: cover; } header#margin-top div.btn-burger-menu-container a.active { background-image: url(../image/ui/btn-icon-x-white.svg); } header#margin-top #burger-menu-container { /* BIG MENU on desktop */ /* BURGER MENU on mobile */ width: calc(100% - 12em); padding: 2em; margin-top: 0; display: none; position: absolute; left: 4em; top: 11em; z-index: 2; overflow: hidden; clear: both; background-color: #00a2c5; transition: left 0.25s; } .mini-header header#margin-top #burger-menu-container, .is-scrolled header#margin-top #burger-menu-container { top: 6em; } @media screen and (max-width: 1024px) { .mini-header header#margin-top #burger-menu-container, .is-scrolled header#margin-top #burger-menu-container { top: 0; } } header#margin-top #burger-menu-container.open ul#burger-menu { left: 11em; } @media screen and (max-width: 1024px) { header#margin-top #burger-menu-container.open { display: block; left: calc(0% + 11em); } } @media screen and (min-aspect-ratio: 35 / 40) and (max-width: 1024px) { header#margin-top #burger-menu-container.open { left: 50%; } } @media screen and (max-width: 1024px) { header#margin-top #burger-menu-container { width: calc(100% - 11em); height: 100%; padding: 0; display: block; overflow-x: hidden; overflow-y: scroll; position: fixed; top: 0; left: 100%; background-color: #232c2f; } } @media screen and (min-aspect-ratio: 35 / 40) and (max-width: 1024px) { header#margin-top #burger-menu-container { width: 50%; } } header#margin-top #burger-menu-container ul#burger-menu { margin-top: 0; } @media screen and (max-width: 1024px) { header#margin-top #burger-menu-container ul#burger-menu { margin-top: 11em; padding-bottom: 25em; } } header#margin-top #burger-menu-container ul#burger-menu > li { max-width: calc((100% - 5em * 5) / 6); display: inline-block; font-family: "franklin-gothic-urw"; font-size: 1.7em; text-transform: uppercase; vertical-align: top; background-image: none; } header#margin-top #burger-menu-container ul#burger-menu > li:not(.dropdown) { /*padding: calc(0.5em / 1.5);*/ padding: 0; background-color: rgba(255, 255, 255, 0); transition: background-color 0.25s; /*@media screen and (max-width: 1024px) { height: calc((11em - 0.5em * 2) / 1.5 - 2px); padding: calc(0.5em / 1.5); border-top: 1px solid $grey; border-bottom: 1px solid #000000; border-left: 1px solid $grey; position: relative; }*/ } @media screen and (min-aspect-ratio: 35 / 40) { header#margin-top #burger-menu-container ul#burger-menu > li:not(.dropdown) { padding: 0; } header#margin-top #burger-menu-container ul#burger-menu > li:not(.dropdown):hover { background-color: rgba(255, 255, 255, 0.3); } } header#margin-top #burger-menu-container ul#burger-menu > li.dropdown { padding: 0; overflow: hidden; } header#margin-top #burger-menu-container ul#burger-menu > li.dropdown .c2e-header-icon-arrow-down, header#margin-top #burger-menu-container ul#burger-menu > li.dropdown .c2e-header-icon-arrow-up, header#margin-top #burger-menu-container ul#burger-menu > li.dropdown .c2e-strong-right-arrow, header#margin-top #burger-menu-container ul#burger-menu > li.dropdown .c2e-strong-down-arrow { display: none; } @media screen and (max-width: 1024px) { header#margin-top #burger-menu-container ul#burger-menu > li.dropdown .c2e-header-icon-arrow-down.c2e-strong-right-arrow, header#margin-top #burger-menu-container ul#burger-menu > li.dropdown .c2e-header-icon-arrow-up.c2e-strong-right-arrow, header#margin-top #burger-menu-container ul#burger-menu > li.dropdown .c2e-strong-right-arrow.c2e-strong-right-arrow, header#margin-top #burger-menu-container ul#burger-menu > li.dropdown .c2e-strong-down-arrow.c2e-strong-right-arrow { display: inline-block; } } @media screen and (max-width: 1024px) { header#margin-top #burger-menu-container ul#burger-menu > li.dropdown { height: auto; } } @media screen and (max-width: 1024px) { header#margin-top #burger-menu-container ul#burger-menu > li { width: 100%; max-width: none; display: block; } header#margin-top #burger-menu-container ul#burger-menu > li.open .c2e-strong-right-arrow { display: none !important; } header#margin-top #burger-menu-container ul#burger-menu > li.open .c2e-strong-down-arrow { display: inline-block; } header#margin-top #burger-menu-container ul#burger-menu > li.open ul.dropdown-content { display: block; } } header#margin-top #burger-menu-container ul#burger-menu > li + li { margin-left: calc(5em / 1.5); } @media screen and (max-width: 1024px) { header#margin-top #burger-menu-container ul#burger-menu > li + li { margin-top: 0; margin-left: 0; } } header#margin-top #burger-menu-container ul#burger-menu > li a { letter-spacing: 0.05em; color: #ffffff; } @media screen and (max-width: 1024px) { header#margin-top #burger-menu-container ul#burger-menu > li a { /*height: calc((11em - 0.5em * 2) / 1.7 - 2px);*/ /*padding: calc(0.5em / 1.5);*/ height: calc(11em / 1.7 - 2px); border-top: 1px solid #4f4f4f; border-bottom: 1px solid #000000; border-left: 1px solid #4f4f4f; /*margin-left: calc(2.5em / 1.5);*/ margin-left: 0; display: block; font-size: 1em; position: relative; } header#margin-top #burger-menu-container ul#burger-menu > li a .label { height: calc(11em / 1.7); padding-left: calc(2em / 1.7); display: table-cell; vertical-align: middle; } } header#margin-top #burger-menu-container ul#burger-menu > li a.open .icons .icon.icon-plus { opacity: 0; } header#margin-top #burger-menu-container ul#burger-menu > li a.open .icons .icon.icon-arrow-up { opacity: 1; } header#margin-top #burger-menu-container ul#burger-menu > li a .icons { width: 2em; height: 2em; position: absolute; right: 2em; top: calc(50% - 1em); display: block; } header#margin-top #burger-menu-container ul#burger-menu > li a .icons .icon { width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; transition: opacity 0.25s; } header#margin-top #burger-menu-container ul#burger-menu > li a .icons .icon path, header#margin-top #burger-menu-container ul#burger-menu > li a .icons .icon rect { fill: #ffffff; } header#margin-top #burger-menu-container ul#burger-menu > li a .icons .icon.icon-plus { opacity: 1; background-image: url(../image/ui/icon-plus.svg); } header#margin-top #burger-menu-container ul#burger-menu > li a .icons .icon.icon-arrow-up { height: 60%; opacity: 0; background-image: url(../image/ui/icon-arrow-up.svg); } header#margin-top #burger-menu-container ul#burger-menu > li ul.dropdown-content { border: 0; margin-top: 0; position: static; display: block; background-color: transparent; transform: translateX(0); } header#margin-top #burger-menu-container ul#burger-menu > li ul.dropdown-content:before, header#margin-top #burger-menu-container ul#burger-menu > li ul.dropdown-content:after { display: none; } @media screen and (max-width: 1024px) { header#margin-top #burger-menu-container ul#burger-menu > li ul.dropdown-content { background-color: #4f4f4f; } } header#margin-top #burger-menu-container ul#burger-menu > li ul.dropdown-content li { padding: calc(0.5em / 1.5); display: block; font-family: "franklin-gothic-urw"; text-transform: none; background-color: rgba(255, 255, 255, 0); background-image: none; transition: background-color 0.25s; } @media screen and (max-width: 1024px) { header#margin-top #burger-menu-container ul#burger-menu > li ul.dropdown-content li { height: calc(11em / 1.5 - 2px); padding: 0; border-top: 1px solid #6d6e72; border-bottom: 1px solid #4f4f4f; /*border-left: 1px solid $darkGrey;*/ position: relative; } } @media screen and (min-aspect-ratio: 35 / 40) { header#margin-top #burger-menu-container ul#burger-menu > li ul.dropdown-content li:hover { background-color: rgba(255, 255, 255, 0.3); } } header#margin-top #burger-menu-container ul#burger-menu > li ul.dropdown-content li + li { margin-top: calc(1em / 1.5); } @media screen and (max-width: 1024px) { header#margin-top #burger-menu-container ul#burger-menu > li ul.dropdown-content li + li { margin-top: 0; } } header#margin-top #burger-menu-container ul#burger-menu > li ul.dropdown-content li a { color: #ffffff; } @media screen and (max-width: 1024px) { header#margin-top #burger-menu-container ul#burger-menu > li ul.dropdown-content li a { /*margin-right: calc(1em / 1.5);*/ border: none; margin-left: calc(5em / 1.5); } header#margin-top #burger-menu-container ul#burger-menu > li ul.dropdown-content li a .label { padding-left: 0; } } #hero { width: 100%; height: 40em; margin: 0 auto; background-position: center top; background-size: cover; position: relative; overflow: hidden; } .HomePage #hero { height: 60em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .HomePage #hero { height: 60em; } } @media screen and (max-width: 768px) { #hero { height: 40em; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #hero { height: 40em; } } .no-hero #hero { display: none; } #hero .mobile-replacement-for-video { width: 100%; height: 100%; display: none; background-position: center; background-size: cover; position: absolute; left: 0; top: 0; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #hero .mobile-replacement-for-video { display: block; } } #hero iframe { width: 100%; height: 100%; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #hero iframe { display: none; } } #hero .slides { width: 100%; height: 100%; position: absolute; left: 0; top: 0; /*.slide { .copy { width: 50%; left: 25%; top: calc(50% - 5em); @media screen and (max-aspect-ratio: $breakpointMaxAspectRatio) and (max-width: 640px) { width: calc(100% - 4em); top: auto; bottom: 5em; left: 2em; } } }*/ } #hero .copy-container { width: 100%; height: 100%; position: absolute; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #hero .copy-container { background-color: rgba(0, 0, 0, 0.5); } } #hero .copy-container .copy { width: calc(97em / 2 - 4em); padding: 4em 4em 4em calc(50% - 97em / 2); position: absolute; background-color: rgba(0, 0, 0, 0.4); } @media screen and (max-width: 768px) { #hero .copy-container .copy { width: calc(calc(100% - 10em) / 2 - 8em); padding-left: calc(50% - calc(100% - 10em) / 2 + 4em); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #hero .copy-container .copy { width: calc(100% - 16em); padding-left: 8em; padding-right: 8em; left: 0; } } .content-page #hero .copy-container .copy { width: auto; padding: 1em; margin-left: calc(50% - 97em / 2 - 1em); display: inline-block; position: absolute; background-color: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 768px) { .content-page #hero .copy-container .copy { width: auto; margin-left: calc(50% - calc(100% - 10em) / 2 - 1em); } } #hero .copy-container .copy .angle { width: 7em; height: 100%; position: absolute; right: -7em; top: -0; background-image: url(../theme-landcomphase1/angle-cover.svg); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; opacity: 0.4; } .content-page #hero .copy-container .copy .angle { display: none; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #hero .copy-container .copy { background-color: transparent !important; } #hero .copy-container .copy .angle { display: none; } } #hero .slide { width: 100%; height: 100%; position: relative; left: 0; top: 0; background-position: center; background-size: cover; } #hero .slide .image-mobile { width: 100%; height: 100%; display: none; position: absolute; left: 0; top: 0; background-position: center; background-repeat: no-repeat; background-size: cover; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #hero .slide .image-mobile { display: block; } } #hero .bg-image-whitewash { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #303b42; opacity: 0.4; } body:not(.home-page) #hero .bg-image-whitewash { background-color: #000000; opacity: 0.3; } #hero .wave { width: 100%; height: 12px; position: absolute; left: 0; bottom: 0; background-image: url(../theme-landcomphase1/hero-wave.svg); background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 1; } #hero .wave .tail { width: calc(100% - 200px); height: 12px; position: absolute; left: 0; top: 0; background-color: #ffffff; } .is-completed-page #hero .wave .tail { background-color: #D0021B; } #hero .wave svg { width: 1440px !important; height: 20px !important; position: absolute; right: 0; top: -8px; } #hero .wave svg circle, #hero .wave svg ellipse, #hero .wave svg line, #hero .wave svg path, #hero .wave svg polygon, #hero .wave svg rect { fill: #ffffff !important; } .is-completed-page #hero .wave svg circle, .is-completed-page #hero .wave svg ellipse, .is-completed-page #hero .wave svg line, .is-completed-page #hero .wave svg path, .is-completed-page #hero .wave svg polygon, .is-completed-page #hero .wave svg rect { fill: #D0021B !important; } .hero-graphic-anim { width: 60.1em; height: 23.3em; margin-top: -23.3em; position: relative; } .hero-scroll-down-prompt { width: 4em; height: 10em; position: absolute; left: calc(50% - 2em); top: calc(40em - 10em); z-index: 1; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .hero-scroll-down-prompt { display: none; } } .HomePage .hero-scroll-down-prompt { top: calc(60em - 10em); } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .HomePage .hero-scroll-down-prompt { top: calc(60em - 10em); } } .ProjectHolder .hero-scroll-down-prompt, .ProjectPage .hero-scroll-down-prompt { display: none; } .hero-scroll-down-prompt .line { width: 4px; /*height: 25em;*/ height: inherit; position: absolute; left: calc(50% - 2px); top: 0; background-color: #003c71; } .hero-scroll-down-prompt .btn { width: 4em; height: 4em; border-radius: 50%; display: block; position: absolute; left: 0em; top: 0; background-color: #003c71; background-image: url(../image/ui/icon-plus-white.svg); background-position: center; background-size: 1.5em 1.5em; background-repeat: no-repeat; transition: transform 0.25s; } .is-scrolled .hero-scroll-down-prompt .btn { background-image: url(../image/ui/icon-minus-white.svg); } @media screen and (min-aspect-ratio: 35 / 40) { .hero-scroll-down-prompt .btn:hover { transform: translateY(-10px); } } footer#margin-bottom { position: relative; z-index: 9; } footer#margin-bottom .wave { width: 100%; height: 12px; position: absolute; left: 0; top: -12px; background-image: url(../theme-landcomphase1/hero-wave.svg); background-position: right center; background-repeat: no-repeat; background-size: cover; } footer#margin-bottom .wave .tail { width: calc(100% - 200px); height: 12px; position: absolute; left: 0; top: 0; background-color: #022662; } footer#margin-bottom .wave svg { width: 1440px !important; height: 20px !important; position: absolute; right: 0; top: -8px; } footer#margin-bottom .wave svg circle, footer#margin-bottom .wave svg ellipse, footer#margin-bottom .wave svg line, footer#margin-bottom .wave svg path, footer#margin-bottom .wave svg polygon, footer#margin-bottom .wave svg rect { fill: #022662 !important; } footer#margin-bottom .footer-links { padding-top: 4em; padding-bottom: 4em; background-color: #022662; } footer#margin-bottom .copyright-and-social-links { padding-top: 2em; padding-bottom: 2em; overflow: hidden; background-color: #001537; } footer#margin-bottom .copyright-and-social-links .logo-nsw { width: 3.6em; height: 4em; margin-right: 1em; display: inline-block; vertical-align: middle; background-image: url(../theme-landcomphase1/logo-nsw.svg); background-position: center; background-repeat: no-repeat; background-size: cover; } footer#margin-bottom .copyright-and-social-links p.copyright { display: inline-block; vertical-align: middle; color: #ffffff; } footer#margin-bottom .copyright-and-social-links .social-links { float: right; } footer#margin-bottom .copyright-and-social-links .social-links a { width: 3em; height: 3em; border-radius: 50%; display: inline-block; background-color: #003c71; background-position: center; background-repeat: no-repeat; background-size: cover; transition: background-color 0.25s; } @media screen and (min-aspect-ratio: 35 / 40) { footer#margin-bottom .copyright-and-social-links .social-links a:hover { background-color: #02549D; } } footer#margin-bottom .copyright-and-social-links .social-links a.facebook { background-image: url(../image/ui/icon-social/icon-social-facebook.svg); } footer#margin-bottom .copyright-and-social-links .social-links a.twitter { background-image: url(../image/ui/icon-social/icon-social-twitter.svg); } footer#margin-bottom .copyright-and-social-links .social-links a.linked-in { background-image: url(../image/ui/icon-social/icon-social-linkedin.svg); } footer#margin-bottom .copyright-and-social-links .social-links a.instagram { background-image: url(../image/ui/icon-social/icon-social-instagram.svg); } footer#margin-bottom .copyright-and-social-links .social-links a.you-tube { background-image: url(../image/ui/icon-social/icon-social-youtube.svg); } footer#margin-bottom .copyright-and-social-links .social-links a circle, footer#margin-bottom .copyright-and-social-links .social-links a ellipse, footer#margin-bottom .copyright-and-social-links .social-links a line, footer#margin-bottom .copyright-and-social-links .social-links a path, footer#margin-bottom .copyright-and-social-links .social-links a polygon, footer#margin-bottom .copyright-and-social-links .social-links a rect { fill: #ffffff; } footer#margin-bottom .copyright-and-social-links .social-links a .label { display: inline-block; text-indent: -1000000px; } .map-header { background-color: #003c71 !important; } .map-header .content-width h2 { color: #ffffff !important; } .map-container { width: calc(100% - 2px); min-height: 4em; padding: 0 !important; border: 1px solid #6d6e72; overflow: hidden; position: relative; transition: min-height 0.25s; } .widget-full-width .map-container { width: calc(100% - 2px); } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .map-container { width: calc(100% - 2px); } } #breadcrumb + .map-container { padding-top: 0 !important; margin-top: -3em !important; } .map-container.open { min-height: 60em; } .map-container.open .btn-open-map { display: none; } .map-container.open .btn-close-map { display: block; } .StandardWidget .map-container { width: 100%; height: 100%; min-height: 0; border: none; background-color: #ffffff; } .map-container .kml-layers { display: none; } .map-container .btn-open-map { width: calc(100% - 4em / 1.8); height: calc(4em / 1.8); padding-right: calc(4em / 1.8); display: block; position: absolute; left: 0; top: 0; font-family: "franklin-gothic-urw"; font-size: 1.8em; line-height: calc(4em / 1.8); text-align: right; color: #6d6e72; z-index: 1; } @media screen and (max-width: 768px) { .map-container .btn-open-map { width: calc(100% - 4em / 1.8 * 1.5); height: calc(4em / 1.8 * 1.5); padding-right: calc(4em / 1.8 * 1.5); font-size: calc($fontSizeContent * 1.5); line-height: calc(4em / 1.8 * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .map-container .btn-open-map { width: calc(100% - 4em / 1.8 * 1.5); height: calc(4em / 1.8 * 1.5); padding-right: calc(4em / 1.8 * 1.5); font-size: calc($fontSizeContent * 1.5); line-height: calc(4em / 1.8 * 1.5); } } @media screen and (min-aspect-ratio: 35 / 40) { .map-container .btn-open-map:hover .icon { transform: translateX(10px); } } .map-container .btn-open-map .icon { width: calc(4em / 1.8); height: 100%; position: absolute; right: 0; top: 0; background-image: url(../image/ui/icon-arrow-down.svg); background-position: center; background-size: calc(1.4em / 1.8) auto; background-repeat: no-repeat; transition: transform 0.25s; } @media screen and (max-width: 768px) { .map-container .btn-open-map .icon { width: calc(4em / 1.8 * 1.5); background-size: calc(1.4em / 1.8 * 1.5) auto; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .map-container .btn-open-map .icon { width: calc(4em / 1.8 * 1.5); background-size: calc(1.4em / 1.8 * 1.5) auto; } } .map-container .btn-close-map { width: 4em; height: 4em; display: none; position: absolute; right: 0; top: 0; z-index: 1; } @media screen and (min-aspect-ratio: 35 / 40) { .map-container .btn-close-map:hover .icon { transform: translateX(10px); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .map-container .btn-close-map { right: 10em; } } .map-container .btn-close-map .icon { width: 4em; height: 100%; position: absolute; right: 0; top: 0; background-image: url(../image/ui/btn-icon-x-grey.svg); background-position: center; background-size: 1.4em auto; background-repeat: no-repeat; transition: transform 0.25s; } .map-container .map-tooltip { max-width: 30em; padding: 0.5em 2em; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); position: absolute; background-color: #02549D; z-index: 1; } .map-container .map-tooltip p { color: #ffffff; } .map-container .map-tooltip.map-menu-tooltip { width: 30em; max-width: 100%; padding: 2em 5em 2em; border-top: 1px solid #dbdbdb; border-right: 1px solid #dbdbdb; border-bottom: 4px solid #dbdbdb; border-left: 1px solid #dbdbdb; border-radius: 5em; box-shadow: 0 0.25em 2em #6d6e72; -ms-transform: translate(-22.5em, -12.5em); /* IE 9 */ -webkit-transform: translate(-22.5em, -12.5em); /* Safari */ transform: translate(-22.5em, -12.5em); } .map-container .map-tooltip.map-menu-tooltip h2, .map-container .map-tooltip.map-menu-tooltip p { padding: 0; margin: 0; text-align: center; } .map-container .map-tooltip.map-menu-tooltip h2 a, .map-container .map-tooltip.map-menu-tooltip p a { text-decoration: underline; } .map-container .map-tooltip.map-menu-tooltip .tooltip-tail { width: 3.8em; height: 3em; position: absolute; left: calc(50% - 3.8em / 2); bottom: -3em; background-image: url(../image/ui/map-menu-tooltip-tail.svg); background-position: center; background-size: cover; background-repeat: no-repeat; } .map-legend { padding: 4em 0; } .map-legend .content-width { text-align: center; } .map-legend .content-width .map-legend-items { text-align: center; } .map-legend .content-width .map-legend-items .map-legend-item { margin-bottom: 1em; display: inline-block; transition: opacity 0.25s; } .map-legend .content-width .map-legend-items .map-legend-item + .map-legend-item { margin-left: 6em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .map-legend .content-width .map-legend-items .map-legend-item { width: 50%; margin-left: 0 !important; text-align: left; } } .map-legend .content-width .map-legend-items .map-legend-item .invisible { /*text-decoration: line-through;*/ opacity: 0.5; } .map-legend .content-width .map-legend-items .map-legend-item .marker { width: 2em; height: 1em; margin-right: 0.5em; display: inline-block; background-position: right center; background-size: auto 100%; background-repeat: no-repeat; } .map-legend .content-width .map-legend-items .map-legend-item .marker.icon { width: 1em; } .map-legend .content-width .map-legend-items .map-legend-item.map-legend-item-orange .marker { background-color: #D0021B; /*height: 0.2em; position: relative; top: -0.25em;*/ } .map-legend .content-width .map-legend-items .map-legend-item.map-legend-item-green .marker { background-color: #003c71; } .map-legend .content-width .map-legend-items .map-legend-item.map-legend-item-blue .marker { background-color: #003c71; } .map-legend .content-width .btn-hide-elements-in-legend { /*border: 1px solid $greyHighlight !important; display: inline-block; background-color: transparent !important;*/ margin-top: 1em; } .map { width: 100%; height: 100%; /*min-height: 50em;*/ position: absolute; left: 0; top: 0; z-index: 1; /*@media screen and (max-aspect-ratio: $breakpointMaxAspectRatio) and (max-width: 640px) { width: 100%; }*/ } .gm-style-iw { width: 22em !important; height: calc(19em + 1.3em); font-size: 10px !important; left: calc(50% - 11em) !important; bottom: 0; top: auto !important; /*top: 0 !important;*/ } .gm-style-iw + div { display: none; } .gm-style-iw > div { width: 100%; height: 100%; max-width: none !important; max-height: none !important; } .gm-style-iw > div > div { width: 100%; height: 100%; } .info-window-container { width: 100%; /*height: calc(100% - 0.5em);*/ height: calc(100% - 0.5em - 1.3em); border-bottom: 0.5em solid #D0021B; position: relative; background-color: #6d6e72; /*background-position: center top; background-size: auto 19em;*/ background-repeat: no-repeat; } .info-window-container div.info-window-tail { width: 0; height: 0; border-left: 2em solid transparent; border-right: 2em solid transparent; border-top: 2em solid #D0021B; position: absolute; left: calc(50% - 4em / 2); bottom: -1.5em; } .info-window-container h2.info-window-title { width: calc(100% - 2em / 2); padding: calc(1em / 2) calc(1em / 2); font-family: "franklin-gothic-urw"; font-weight: bold; font-size: 2em; letter-spacing: calc(0.05em / 2); text-align: center; position: absolute; bottom: 0; background-color: #ffffff; color: #D0021B; } @media screen and (max-width: 768px) { .info-window-container h2.info-window-title { width: calc(100% - 2em / 1); padding: calc(1em / 1) calc(1em / 1); font-size: calc(1em); letter-spacing: calc(0.05em / 1); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .info-window-container h2.info-window-title { width: calc(100% - 2em / 1); padding: calc(1em / 1) calc(1em / 1); font-size: calc(1em); letter-spacing: calc(0.05em / 1); } } .info-window-container h2.info-window-title span { position: relative; top: 0.15em; } .info-window-container a.btn-jump { width: 100%; height: 100%; position: absolute; left: 0; top: 0; cursor: pointer; } .info-window-container div.btn-close { width: 1.9em; height: 1.9em; /*border-radius: 50%;*/ /*background-color: rgba(255,255,255,1);*/ background-image: url(../image/ui/btn-icon-x-white.svg); background-position: center; background-size: 1.4em auto; background-repeat: no-repeat; position: absolute; right: 0.5em; top: 0.5em; cursor: pointer; z-index: 1; transition: transform 0.25s; /*@media screen and (min-aspect-ratio: $breakpointMaxAspectRatio) { &:hover { transform: translateX(10px); } }*/ } .map-user-comments-container .map-container .map.state-add-a-comment .gm-style div:nth-child(1) { cursor: url(../image/ui/map-icon-marker-placement.svg) 20 55, auto !important; } .map-user-comments-container .user-comment-controls { padding: 2em 0; text-align: center; position: relative; z-index: 1; overflow: hidden; background-color: #e1e1e1; } .map-user-comments-container .user-comment-controls .toggle-comments-controls { display: none; } .map-user-comments-container .user-comment-controls .toggle-comments-controls h3 { display: inline-block; position: relative; z-index: 1; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .map-user-comments-container .user-comment-controls .toggle-comments-controls h3 { display: block; } } .map-user-comments-container .user-comment-controls .toggle-comments-controls .btn-toggle-comments { margin-left: calc(2em / 2); } .map-user-comments-container .user-comment-controls .btn-add-a-comment { margin-left: calc(2em / 2); padding-right: calc((1em + 2.3em + 2em) / 2) !important; position: relative; } .map-user-comments-container .user-comment-controls .btn-add-a-comment .label { position: relative; } .map-user-comments-container .user-comment-controls .btn-add-a-comment .label .icon { width: calc(2.3em / 2); height: calc(2.1em / 2); display: block; position: absolute; right: calc((1em + 2.3em) / -2); top: calc(((2.1em / 2 / 2) - 0.5em) * -1); background-size: 100% auto; background-image: url(../image/ui/btn-icon-map-comment.svg); } .map-user-comments-container .user-comment-controls .btn-add-a-comment .label .icon circle, .map-user-comments-container .user-comment-controls .btn-add-a-comment .label .icon ellipse, .map-user-comments-container .user-comment-controls .btn-add-a-comment .label .icon line, .map-user-comments-container .user-comment-controls .btn-add-a-comment .label .icon path, .map-user-comments-container .user-comment-controls .btn-add-a-comment .label .icon polygon, .map-user-comments-container .user-comment-controls .btn-add-a-comment .label .icon rect { fill: #ffffff !important; } .map-user-comments-container .user-comment-controls .btn-cancel-adding-a-comment { margin-left: calc(2em / 2); position: relative; display: none; } .map-user-comments-container .user-comment-form { width: calc(100% - 4em - 2px); padding: 2em; border: 1px solid #6d6e72; position: absolute; left: 0; top: 0; z-index: 1; display: none; /*background-color: rgba(250,250,250,0.85);*/ background-color: #fafafa; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .map-user-comments-container .user-comment-form { z-index: 2; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .map-user-comments-container .user-comment-form .content-width { width: calc(100% - 4em); margin: 2em; } } .map-user-comments-container .user-comment-form .content-width .logged-in-as { display: block; position: absolute; right: 5em; top: 0; } .map-user-comments-container .user-comment-form .content-width .user-comment-screen-name { width: auto !important; height: auto; /*border: none;*/ /*background-color: transparent;*/ } .map-user-comments-container .user-comment-form .content-width .btn-close { width: 2.5em; height: 2.5em; display: block; position: absolute; right: 0; top: 0; background-image: url(../image/ui/btn-icon-x-grey.svg); background-position: center; background-size: cover; background-repeat: no-repeat; } .map-user-comments-container .user-comment-form .content-width .copy { margin-top: 2em; text-align: right; } .map-user-comments-container .user-comments-container { margin-top: 4em; display: none; } .map-user-comments-container .user-comments-container .user-comments { margin-top: 2em; } @media screen and (min-aspect-ratio: 35 / 40), (min-width: 641px) { .map-user-comments-container .user-comments-container .user-comments .user-comment { width: calc((100% - 4em) / 3 - 4em); padding: 2em; border: 0; margin: 0; } } .map-user-comments-container .user-comments-container .user-comments .user-comment .date { font-weight: bold; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .map-user-comments-container .user-comments-container .user-comments .user-comment { width: calc(100% - 4em) !important; padding: 2em; } .map-user-comments-container .user-comments-container .user-comments .user-comment + .user-comment { margin-top: 2em; } .map-user-comments-container .user-comments-container .user-comments .user-comment:last-child { margin-bottom: 2em; } } .map-user-comments-container .user-comment-template, .map-user-comments-container .user-comment-none { display: none; } .map-widget { position: relative; } .map-widget .copy + .map-container { margin-top: 2em; } .map-widget .btn-scroll-to-user-comments { display: none; }