.widget.widget-half-width { width: 50%; } .widget.widget-half-width .widget-content { padding: 2em; } .widget.FacebookWidget .widget-content, .widget.TwitterWidget .widget-content { padding: 0; } .widget.OutcomesWidget.widget-full-width .outcomes-container { padding-top: 5em; padding-bottom: 5em; } .widget.PostItWidget.widget-full-width, .widget.SharedVisionWidget.widget-full-width { padding-top: 5em; padding-bottom: 5em; } .widget.StandardWidget .widget-content { padding: 0; } .awards-container .btn-publication .non-clickable-area, .awards-container .btn-publication .clickable-area, .publications-container .btn-publication .non-clickable-area, .publications-container .btn-publication .clickable-area, .quick-links-group .btn-publication .non-clickable-area, .quick-links-group .btn-publication .clickable-area, .keyword-search-result-items .btn-publication .non-clickable-area, .keyword-search-result-items .btn-publication .clickable-area { padding: 2em; } .awards-container .btn-publication .non-clickable-area .thumbnail, .awards-container .btn-publication .clickable-area .thumbnail, .publications-container .btn-publication .non-clickable-area .thumbnail, .publications-container .btn-publication .clickable-area .thumbnail, .quick-links-group .btn-publication .non-clickable-area .thumbnail, .quick-links-group .btn-publication .clickable-area .thumbnail, .keyword-search-result-items .btn-publication .non-clickable-area .thumbnail, .keyword-search-result-items .btn-publication .clickable-area .thumbnail { width: 4.8em; height: 6.8em; } .awards-container #Form_PublicationSearchForm, .awards-container .filter-and-sort, .publications-container #Form_PublicationSearchForm, .publications-container .filter-and-sort, .keyword-search-result-items #Form_PublicationSearchForm, .keyword-search-result-items .filter-and-sort { padding-bottom: 3em; border-bottom: 1px solid #e8e8e8; } .awards-container .content-width > h3, .publications-container .content-width > h3, .keyword-search-result-items .content-width > h3 { margin-top: calc(3em / 3.6); } .awards-container h3 + .awards, .awards-container h3 + .publications, .publications-container h3 + .awards, .publications-container h3 + .publications, .keyword-search-result-items h3 + .awards, .keyword-search-result-items h3 + .publications { margin-top: 2em; } .awards-container .awards + h3, .awards-container .publications + h3, .publications-container .awards + h3, .publications-container .publications + h3, .keyword-search-result-items .awards + h3, .keyword-search-result-items .publications + h3 { margin-top: calc(2em / 3.6); } .awards-container .awards, .awards-container .publications, .publications-container .awards, .publications-container .publications, .keyword-search-result-items .awards, .keyword-search-result-items .publications { overflow: hidden; } .awards-container .awards .btn-award, .awards-container .awards .btn-publication, .awards-container .publications .btn-award, .awards-container .publications .btn-publication, .publications-container .awards .btn-award, .publications-container .awards .btn-publication, .publications-container .publications .btn-award, .publications-container .publications .btn-publication, .keyword-search-result-items .awards .btn-award, .keyword-search-result-items .awards .btn-publication, .keyword-search-result-items .publications .btn-award, .keyword-search-result-items .publications .btn-publication { border-bottom: 0.5em solid #e5e5e5; position: relative; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .awards-container .awards .btn-award, .awards-container .awards .btn-publication, .awards-container .publications .btn-award, .awards-container .publications .btn-publication, .publications-container .awards .btn-award, .publications-container .awards .btn-publication, .publications-container .publications .btn-award, .publications-container .publications .btn-publication, .keyword-search-result-items .awards .btn-award, .keyword-search-result-items .awards .btn-publication, .keyword-search-result-items .publications .btn-award, .keyword-search-result-items .publications .btn-publication { width: calc(100% - 4em); } } .awards-container .awards .btn-award .thumbnail, .awards-container .awards .btn-publication .thumbnail, .awards-container .publications .btn-award .thumbnail, .awards-container .publications .btn-publication .thumbnail, .publications-container .awards .btn-award .thumbnail, .publications-container .awards .btn-publication .thumbnail, .publications-container .publications .btn-award .thumbnail, .publications-container .publications .btn-publication .thumbnail, .keyword-search-result-items .awards .btn-award .thumbnail, .keyword-search-result-items .awards .btn-publication .thumbnail, .keyword-search-result-items .publications .btn-award .thumbnail, .keyword-search-result-items .publications .btn-publication .thumbnail { width: 10.7em; height: 15em; } .awards-container .awards .btn-award .copy, .awards-container .awards .btn-publication .copy, .awards-container .publications .btn-award .copy, .awards-container .publications .btn-publication .copy, .publications-container .awards .btn-award .copy, .publications-container .awards .btn-publication .copy, .publications-container .publications .btn-award .copy, .publications-container .publications .btn-publication .copy, .keyword-search-result-items .awards .btn-award .copy, .keyword-search-result-items .awards .btn-publication .copy, .keyword-search-result-items .publications .btn-award .copy, .keyword-search-result-items .publications .btn-publication .copy { width: calc(100% - 10.7em - 6em); float: left; } .awards-container .awards .btn-award .label, .awards-container .awards .btn-publication .label, .awards-container .publications .btn-award .label, .awards-container .publications .btn-publication .label, .publications-container .awards .btn-award .label, .publications-container .awards .btn-publication .label, .publications-container .publications .btn-award .label, .publications-container .publications .btn-publication .label, .keyword-search-result-items .awards .btn-award .label, .keyword-search-result-items .awards .btn-publication .label, .keyword-search-result-items .publications .btn-award .label, .keyword-search-result-items .publications .btn-publication .label { margin-top: 2em; } .awards-container .awards .btn-award, .awards-container .publications .btn-award, .publications-container .awards .btn-award, .publications-container .publications .btn-award, .keyword-search-result-items .awards .btn-award, .keyword-search-result-items .publications .btn-award { border-bottom: none; } .awards-container .awards .btn-award .thumbnail, .awards-container .publications .btn-award .thumbnail, .publications-container .awards .btn-award .thumbnail, .publications-container .publications .btn-award .thumbnail, .keyword-search-result-items .awards .btn-award .thumbnail, .keyword-search-result-items .publications .btn-award .thumbnail { width: 13em; height: auto; } .awards-container .awards .btn-award .copy, .awards-container .publications .btn-award .copy, .publications-container .awards .btn-award .copy, .publications-container .publications .btn-award .copy, .keyword-search-result-items .awards .btn-award .copy, .keyword-search-result-items .publications .btn-award .copy { width: calc(100% - 13em - 2em); float: left; } .awards-container .awards .btn-award:nth-child(2n + 1), .awards-container .awards .btn-publication:nth-child(2n + 1), .awards-container .publications .btn-award:nth-child(2n + 1), .awards-container .publications .btn-publication:nth-child(2n + 1), .publications-container .awards .btn-award:nth-child(2n + 1), .publications-container .awards .btn-publication:nth-child(2n + 1), .publications-container .publications .btn-award:nth-child(2n + 1), .publications-container .publications .btn-publication:nth-child(2n + 1), .keyword-search-result-items .awards .btn-award:nth-child(2n + 1), .keyword-search-result-items .awards .btn-publication:nth-child(2n + 1), .keyword-search-result-items .publications .btn-award:nth-child(2n + 1), .keyword-search-result-items .publications .btn-publication:nth-child(2n + 1) { /*margin-right: 1em;*/ margin-bottom: 2em; } .awards-container .awards .btn-award:nth-child(2n + 2), .awards-container .awards .btn-publication:nth-child(2n + 2), .awards-container .publications .btn-award:nth-child(2n + 2), .awards-container .publications .btn-publication:nth-child(2n + 2), .publications-container .awards .btn-award:nth-child(2n + 2), .publications-container .awards .btn-publication:nth-child(2n + 2), .publications-container .publications .btn-award:nth-child(2n + 2), .publications-container .publications .btn-publication:nth-child(2n + 2), .keyword-search-result-items .awards .btn-award:nth-child(2n + 2), .keyword-search-result-items .awards .btn-publication:nth-child(2n + 2), .keyword-search-result-items .publications .btn-award:nth-child(2n + 2), .keyword-search-result-items .publications .btn-publication:nth-child(2n + 2) { /*margin-left: 1em;*/ margin-bottom: 2em; } .awards-container .content-width > h3 { margin-top: calc(2em / 3.6); } .btn-award, .btn-publication { width: auto; padding: 0; float: none; background-color: #ffffff; overflow: hidden; position: relative; } .btn-award.masonry-item.btn-award, .btn-publication.masonry-item.btn-award { margin-bottom: 4em !important; } .btn-award.masonry-item:not(.btn-award) .thumbnail, .btn-publication.masonry-item:not(.btn-award) .thumbnail { margin: 2em; } .btn-award.masonry-item:not(.btn-award) .copy, .btn-publication.masonry-item:not(.btn-award) .copy { margin: 2em 0; } .btn-award .thumbnail, .btn-publication .thumbnail { margin: 0 2em 0 0; box-shadow: 2px 3px 0 #e1e1e1; float: left; background-image: url(../image/ui/missing-publication.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } .btn-award .copy, .btn-publication .copy { width: calc(100% - 4.8em - 2em); margin: 0; overflow: hidden; /*a.btn-cta { position: absolute; right: calc(2em / 1.6); bottom: calc(2em / 1.6); }*/ } .btn-award .copy p + p, .btn-publication .copy p + p { margin-top: 0; } .btn-award .copy .btn-ctas, .btn-publication .copy .btn-ctas { margin-top: 2em; } .widget .btn-award .copy .btn-ctas, .widget .btn-publication .copy .btn-ctas { padding-bottom: 0; } .publications-container ul.topics-list li { width: calc((100% - 4em) / 2 - 1em); float: left; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .publications-container ul.topics-list li { width: 100%; } } .publications-container ul.topics-list li + li { margin-left: 4em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .publications-container ul.topics-list li + li { margin-top: 0; margin-left: 0; } } .publications-container ul.topics-list li:nth-child(2) { margin-top: 0; } .publications-container ul.topics-list li:nth-child(2n+1) { margin-left: 0; } .publications-container .publications-topic-container h4.subcategory { margin-top: calc(2em / 2.6); } .publications-container .publications-topic-container h4.subcategory + .publications { margin-top: 2em; } .publications-container .publications-topic-container .btn-publication.no-image .copy { width: calc(100% - 2em * 2); margin: 2em; float: none; } .btn-award { width: calc((100% - 2em) / 2); float: left; } .btn-award + .btn-award { margin-top: 2em; margin-left: 2em; } .btn-award:first-child, .btn-award:nth-child(2) { margin-top: 0; } .btn-award:nth-child(2n+1) { margin-left: 0; clear: left; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .btn-award { width: 100% !important; margin-left: 0 !important; } .btn-award + .btn-award { margin-top: 2em !important; } } .snapshots-container p.prompt { height: auto; line-height: 1.5em; border-bottom: 1px solid #f0f0f0; } .snapshots-container div.snapshots { margin-top: 2em; } .snapshots-container div.snapshot { border-top: 1px solid #dbdbdb; position: relative; overflow: hidden; background-color: #ffffff; } .snapshots-container div.snapshot:last-child { border-bottom: 1px solid #dbdbdb; } .snapshots-container div.snapshot.open .clickable-area { height: auto; } .snapshots-container div.snapshot.open .clickable-area .icon.icon-down { opacity: 0 !important; } .snapshots-container div.snapshot.open .clickable-area .icon.icon-up { opacity: 1 !important; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .snapshots-container div.snapshot.open { height: auto; } .snapshots-container div.snapshot.open .clickable-area { height: auto; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .snapshots-container div.snapshot.open .clickable-area .label { height: auto; padding-bottom: 0; position: relative; left: 0; top: 0; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .snapshots-container div.snapshot.open .clickable-area .info { position: relative; top: 0; } } .snapshots-container div.snapshot .clickable-area { width: 100%; height: 100%; } .snapshots-container div.snapshot .clickable-area .icon { width: calc(1.2em * 3 / 1.8); height: calc(0.7em * 3 / 1.8); top: calc(50% - 0.7em * 3 / 1.8 / 2); background-image: url(../image/ui/icon-arrow-down.svg); background-size: calc(1.2em * 3 / 1.8) auto; transition: opacity 0.25s; } @media screen and (max-width: 768px) { .snapshots-container div.snapshot .clickable-area .icon { width: calc(1.2em * 3 / 1.8 * 1.5); height: calc(0.7em * 3 / 1.8 * 1.5); top: calc(50% - 0.7em * 3 / 1.8 / 2 * 1.5); background-size: calc(1.2em * 3 / 1.8 * 1.5) auto; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .snapshots-container div.snapshot .clickable-area .icon { width: calc(1.2em * 3 / 1.8 * 1.5); height: calc(0.7em * 3 / 1.8 * 1.5); top: calc(50% - 0.7em * 3 / 1.8 / 2 * 1.5); background-size: calc(1.2em * 3 / 1.8 * 1.5) auto; } } .snapshots-container div.snapshot .clickable-area .icon.icon-down { background-image: url(../image/ui/icon-arrow-down.svg); opacity: 1; } .snapshots-container div.snapshot .clickable-area .icon.icon-down circle, .snapshots-container div.snapshot .clickable-area .icon.icon-down ellipse, .snapshots-container div.snapshot .clickable-area .icon.icon-down line, .snapshots-container div.snapshot .clickable-area .icon.icon-down path, .snapshots-container div.snapshot .clickable-area .icon.icon-down polygon, .snapshots-container div.snapshot .clickable-area .icon.icon-down rect { fill: #003c71; } .snapshots-container div.snapshot .clickable-area .icon.icon-up { background-image: url(../image/ui/icon-arrow-up.svg); opacity: 0; } .snapshots-container div.snapshot .clickable-area .icon.icon-up circle, .snapshots-container div.snapshot .clickable-area .icon.icon-up ellipse, .snapshots-container div.snapshot .clickable-area .icon.icon-up line, .snapshots-container div.snapshot .clickable-area .icon.icon-up path, .snapshots-container div.snapshot .clickable-area .icon.icon-up polygon, .snapshots-container div.snapshot .clickable-area .icon.icon-up rect { fill: #02549D; } .snapshots-container div.snapshot .label { width: calc(100% - 8em); height: calc(100% - 4em); padding: 2em 6em 2em 2em; } .snapshots-container div.snapshot .info { width: calc(100% - 6em); height: calc(100% - 2em); padding: 1em 4em 1em 2em; position: absolute; left: 0; top: 100%; /*display: none;*/ background-color: #ffffff; } .facebook-container, .twitter-container { position: relative; } .facebook-container .feed-container, .twitter-container .feed-container { width: 100%; height: 500px; position: relative; } .facebook-container .feed-container .fake-fb-page, .twitter-container .feed-container .fake-fb-page { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .facebook-container .feed-container iframe, .twitter-container .feed-container iframe { height: 100% !important; } .widgets .widget .facebook-container h2, .facebook-container h2 { border-left-color: #3b5998 !important; color: #3b5998 !important; } .widgets .widget .twitter-container h2, .twitter-container h2 { border-left-color: #55acee !important; color: #55acee !important; } .commercial-opportunities { overflow: hidden; } .commercial-opportunities .commercial-opportunities-category h3 + div { margin-top: 2em; } .commercial-opportunities .commercial-opportunities-category .commercial-opportunity-items { width: 100%; border-bottom: 0.5em solid #e5e5e5; margin-bottom: 2em; overflow: hidden; } .commercial-opportunities .commercial-opportunities-category .commercial-opportunity-items .btn-commercial-opportunity { /*.clickable-area {*/ position: relative; /*a { width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; @media screen and (max-aspect-ratio: $breakpointMaxAspectRatio) and (max-width: 640px) { height: 50em; } }*/ /*}*/ } .commercial-opportunities .commercial-opportunities-category .commercial-opportunity-items .btn-commercial-opportunity + .btn-commercial-opportunity { margin-top: 2em; } .commercial-opportunities .commercial-opportunities-category .commercial-opportunity-items .btn-commercial-opportunity .copy { /*width: calc(92em - 4em - 1px);*/ padding: 2em; /*border-right: 1px solid #e5e5e5;*/ } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .commercial-opportunities .commercial-opportunities-category .commercial-opportunity-items .btn-commercial-opportunity .copy { width: calc(100% - 4em); border-right: 0; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .commercial-opportunities .commercial-opportunities-category .commercial-opportunity-items .btn-commercial-opportunity .cta-icon-arrow { top: 32em; } } * + .quick-links { margin-top: 2em; } .widget-half-width .quick-links .quick-link { padding: 2em 4em 2em 2em; } .widget-half-width .quick-links .quick-link + .quick-link { border-top: 1px solid #dbdbdb; } .widget-half-width .quick-links .quick-link .image-container, .widget-half-width .quick-links .quick-link .wave, .widget-half-width .quick-links .quick-link .icon { display: none; } .widget-full-width h2 + .quick-links { margin-top: 2em; } .widget-full-width .quick-links { overflow: hidden; } .widget-full-width .quick-link, .LinkWidget .quick-link, .feed-type-videos .quick-link { width: 100%; border-bottom: 0; height: 32.7em; position: relative; /*.clickable-area { width: 100%; height: 100%; padding: 0; overflow: hidden; }*/ } .widget-full-width .quick-link .image-container, .LinkWidget .quick-link .image-container, .feed-type-videos .quick-link .image-container { width: 100%; height: 17.8em; background-position: center top; background-repeat: no-repeat; background-size: cover; transition: height 0.25s; } .widget-full-width .quick-link .wave, .LinkWidget .quick-link .wave, .feed-type-videos .quick-link .wave { width: 100%; height: 5.5em; background-image: url(../theme-bays/wave-section.svg); background-position: left top; background-repeat: no-repeat; background-size: auto 20em; position: absolute; left: 0; top: 17.8em; z-index: 1; } .widget-full-width .quick-link .copy, .LinkWidget .quick-link .copy, .feed-type-videos .quick-link .copy { width: calc(100% - 4em); height: calc(15em - 4em); padding: 2em 2em 2em 2em; position: absolute; left: 0; bottom: 0; z-index: 1; transition: height 0.25s; } .widget-full-width .quick-link .copy h2.widget-title, .LinkWidget .quick-link .copy h2.widget-title, .feed-type-videos .quick-link .copy h2.widget-title { margin: 0; } .widget-full-width .quick-link .copy h4, .LinkWidget .quick-link .copy h4, .feed-type-videos .quick-link .copy h4 { position: absolute; } .widget-full-width .quick-link:not(.btn-more) .cta-icon-arrow, .LinkWidget .quick-link:not(.btn-more) .cta-icon-arrow, .feed-type-videos .quick-link:not(.btn-more) .cta-icon-arrow { display: none; } .UsefulLinkWidget.widget-full-width .quick-link { float: left; } .UsefulLinkWidget.widget-full-width .quick-link .icon { width: 3em; height: 3em; border-radius: 50%; position: absolute; right: 2em; bottom: calc(15em - 3em + 1.7em); background-color: #ffffff; z-index: 1; transition: bottom 0.25s; } .UsefulLinkWidget.widget-full-width .quick-link .icon .icon-normal, .UsefulLinkWidget.widget-full-width .quick-link .icon .icon-hover { width: 1.7em; height: 1.7em; display: block; position: absolute; left: calc(50% - 1.7em / 2); top: calc(50% - 1.7em / 2); transition: opacity 0.25s; } .UsefulLinkWidget.widget-full-width .quick-link .icon .icon-normal { opacity: 1; } .UsefulLinkWidget.widget-full-width .quick-link .icon .icon-hover { width: 1em; height: 1.5em; left: calc(50% - 1em / 2); top: calc(50% - 1.5em / 2); opacity: 0; } @media screen and (min-aspect-ratio: 35 / 40) { .UsefulLinkWidget.widget-full-width .quick-link.clickable-area:hover .image-container { height: 22em; } .UsefulLinkWidget.widget-full-width .quick-link.clickable-area:hover .wave { top: calc(22em - 5.5em); } .UsefulLinkWidget.widget-full-width .quick-link.clickable-area:hover .copy { height: calc(11em - 4em); } .UsefulLinkWidget.widget-full-width .quick-link.clickable-area:hover .icon { bottom: calc(11em - 1.5em); } .UsefulLinkWidget.widget-full-width .quick-link.clickable-area:hover .icon .icon-normal { opacity: 0; } .UsefulLinkWidget.widget-full-width .quick-link.clickable-area:hover .icon .icon-hover { opacity: 1; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .UsefulLinkWidget.widget-full-width .quick-links .quick-link { width: calc(100% / 2); } .UsefulLinkWidget.widget-full-width .quick-links .quick-link .image-container { background-size: cover; } } @media screen and (min-aspect-ratio: 35 / 40), (min-width: 641px) { .UsefulLinkWidget.widget-full-width .quick-links-2 .quick-link, .UsefulLinkWidget.widget-full-width .quick-links-3 .quick-link, .UsefulLinkWidget.widget-full-width .quick-links-4 .quick-link, .UsefulLinkWidget.widget-full-width .quick-links-6 .quick-link, .UsefulLinkWidget.widget-full-width .quick-links-7 .quick-link, .UsefulLinkWidget.widget-full-width .quick-links-8 .quick-link { width: calc(100% / 4); } .UsefulLinkWidget.widget-full-width .quick-links-5 .quick-link, .UsefulLinkWidget.widget-full-width .quick-links-9 .quick-link, .UsefulLinkWidget.widget-full-width .quick-links-10 .quick-link { width: calc(100% / 5); } } .LinkWidget .quick-link { height: auto; overflow: hidden; } .LinkWidget .quick-link .wave { margin-top: -5.5em; } .LinkWidget .quick-link .copy { height: auto; position: static; } @media screen and (min-aspect-ratio: 35 / 40), (min-width: 641px) { .LinkWidget.widget-full-width .copy-container { width: 100%; } .LinkWidget.widget-full-width .quick-link .image-container, .LinkWidget.widget-full-width .quick-link .image-container-cover { height: 100%; position: absolute; left: 0; top: 0; } .LinkWidget.widget-full-width .quick-link .image-container-cover { width: 100%; background-color: rgba(0, 0, 0, 0.75); } .LinkWidget.widget-full-width .quick-link .copy { width: 97em; height: auto; padding-top: 10em; margin: 0 auto; position: relative; } .LinkWidget.widget-full-width .quick-link .copy h2.widget-title { text-align: center; color: #ffffff !important; } .LinkWidget.widget-full-width .quick-link .copy p { color: #ffffff; } .LinkWidget.widget-full-width .quick-link .contact { width: 97em; margin: 0 auto; } .LinkWidget.widget-full-width .quick-link .contact:last-child { padding-bottom: 10em; } .LinkWidget.widget-full-width .quick-link .contact p { color: #ffffff; } .LinkWidget.widget-full-width .quick-link .contact p svg { fill: #ffffff !important; } .LinkWidget.widget-full-width .quick-link .btn-ctas { position: relative; } .LinkWidget.widget-full-width .quick-link .btn-ctas:last-child { padding-bottom: 10em; } } .quick-links.feed-type-videos { margin-top: 2em; } .quick-links.feed-type-videos .quick-link { height: auto; padding: 0; } .quick-links.feed-type-videos .quick-link .image-container { display: block; position: relative; } .quick-links.feed-type-videos .quick-link .image-container .icon { width: 5em; height: 5em; border-radius: 50%; position: absolute; left: calc(50% - 5em / 2); top: calc(50% - 5em / 2); background-color: #ffffff; display: block; } .quick-links.feed-type-videos .quick-link .image-container .icon svg { width: 2.5em; height: 2.5em; position: absolute; left: calc(50% - 2.5em * 0.75 / 2); top: calc(50% - 2.5em / 2); } .quick-links.feed-type-videos .quick-link .copy { height: auto; position: static; } @media screen and (min-aspect-ratio: 35 / 40) { .quick-links.feed-type-videos .quick-link.clickable-area:hover .image-container { background-size: 125% auto; } } #sitemap-list.level1 > li { padding: 1em; border-bottom: 1px solid #6d6e72; background-image: none; } /* start from _main.scss */ @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { #ugnsw-main-viewport div.main > .full-width:nth-child(2n + 1):not(.selected-video) .outcome-content.alternate-bg-color { background-color: transparent !important; } #ugnsw-main-viewport div.main > .full-width:nth-child(2n + 2):not(.selected-video) .outcome-content.alternate-bg-color { background-color: transparent !important; } } /* end from _main.scss */ /* start from c2e _fonts.scss */ @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .outcomes-container .outcomes .outcome.open .pos.clickable-area .number { color: #ffffff !important; } } .outcomes-container .outcomes .outcome .pos.clickable-area .number { border: 2px solid #4f4f4f; border-radius: 50%; } /* end from c2e _fonts.scss */ /* start from c2e _outcomes.scss */ .outcomes-container { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; } .outcomes-container h2.widget-title { padding-left: 0; background-color: transparent; } .outcomes-container h2.widget-title + .copy { margin-top: 2em; } .outcomes-container .copy + .outcomes { margin-top: 2em; } .outcomes-container.is-copy-at-top .outcomes .outcome .pos.clickable-area { padding-top: 2em; padding-bottom: 0; transition: margin-top 0.25s; } .outcomes-container.is-copy-at-top .outcomes .outcome .pos.clickable-area .highlight { top: 0; bottom: auto; } .outcomes-container:not(.is-copy-at-top) .outcomes .outcome .pos.clickable-area { padding-bottom: 2em; padding-top: 0; transition: margin-bottom 0.25s; } .outcomes-container:not(.is-copy-at-top) .outcomes .outcome .pos.clickable-area .highlight { bottom: 0; top: auto; } .outcomes-container .outcomes { overflow: hidden; position: relative; z-index: 2; } .outcomes-container .outcomes .outcome { position: relative; z-index: 1; } @media screen and (min-aspect-ratio: 35 / 40), screen and (min-width: 641px) { .outcomes-container .outcomes .outcome.open .pos.clickable-area .number { background-color: #D0021B; border-color: #D0021B; color: #ffffff; } .outcomes-container .outcomes .outcome.open .pos.clickable-area .highlight { border-color: #D0021B; } .outcomes-container .outcomes .outcome.open .outcome-content { max-height: 1000px !important; opacity: 1 !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .outcomes-container .outcomes .outcome + .outcome { margin-top: 2em; } } .outcomes-container .outcomes .outcome.open { z-index: 0; } .outcomes-container .outcomes .outcome .pos.clickable-area { float: left; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .outcomes-container .outcomes .outcome .pos.clickable-area { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; width: auto !important; } } .outcomes-container .outcomes .outcome .pos.clickable-area .number { position: relative; left: calc(50% - (6.5em / 3.6) / 2); display: block; transition: background-color 0.25s, color 0.25s; z-index: 1; } .outcomes-container .outcomes .outcome .pos.clickable-area .label { position: relative; z-index: 1; color: #6d6e72; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .outcomes-container .outcomes .outcome .pos.clickable-area .label { display: none; } } .outcomes-container .outcomes .outcome .pos.clickable-area .highlight { width: calc(50% - 1px); height: 2em; border-right: 2px solid transparent; position: absolute; left: 0; bottom: 0; z-index: 1; transition: border-color 0.25s; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .outcomes-container .outcomes .outcome .pos.clickable-area .highlight { display: none; } } .outcomes-container .outcomes .outcome .pos.clickable-area .btn { z-index: 2; } .outcomes-container .outcomes .outcome .pos.clickable-area .cta-icon-arrow { display: none; } .outcomes-container .outcomes .outcome .outcome-content { width: calc(100% - 2px); border: 1px solid #D0021B; overflow: hidden; transition: max-height 0.25s, opacity 0.25s; } .outcomes-container .outcomes .outcome .outcome-content.has-image .copy { width: calc(100% - 35.7em - (2em * 2) - 1px); } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .outcomes-container .outcomes .outcome .outcome-content { width: 100%; max-height: 1000px !important; border: 0; padding-top: 2em; position: static !important; opacity: 1 !important; } .outcomes-container .outcomes .outcome .outcome-content .copy + img { margin-top: 2em; } } .outcomes-container .outcomes .outcome .outcome-content .copy { padding: 2em; float: left; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .outcomes-container .outcomes .outcome .outcome-content .copy { width: 100% !important; padding: 0; float: none; } } .outcomes-container .outcomes .outcome .outcome-content img { width: 35.7em; height: auto; border-left: 1px solid #6d6e72; display: block; float: left; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .outcomes-container .outcomes .outcome .outcome-content img { width: 100%; float: none; } } .outcomes-container hr { width: 100%; position: absolute; left: 0; top: 0; background-color: #6d6e72; transition: top 0.25s; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .outcomes-container hr { display: none; } } /* end from c2e _outcomes.scss */ .sustainability-case-studies { overflow: hidden; /*.btn-project:first-child, .btn-project:nth-child(2) { margin-top: 0; }*/ } .sustainability-case-studies .btn-project { width: calc((100% - 2em) / 2); margin-bottom: 0; float: left; } .sustainability-case-studies .btn-project .label { min-height: 18em; position: relative; } .sustainability-case-studies .btn-project + .btn-project:not(:nth-child(2)) { margin-top: 2em; } .sustainability-case-studies .btn-project + .btn-project { margin-left: 2em; } .sustainability-case-studies .btn-project + .btn-project:nth-child(2n+1) { margin-left: 0; } .statistics-by-numbers-container { padding-top: 5em; padding-bottom: 5em; background-color: #003c71; } .statistics-by-numbers-container .statistics-by-numbers { margin-top: 2em; overflow: hidden; } .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number { width: calc((100% - 4em) / 3); float: left; } .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number:first-child, .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number:nth-child(2), .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number:nth-child(3) { margin-top: 0; } .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number:nth-child(3n+1) { margin-top: 2em; margin-left: 0; } .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number:nth-child(3n+2), .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number:nth-child(3n+3) { margin-top: 2em; margin-left: 2em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number { width: calc((100% - 2em) / 2); } .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number:first-child, .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number:nth-child(2) { margin-top: 0; } .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number:nth-child(2n+1) { margin-top: 2em; margin-left: 0; } .statistics-by-numbers-container .statistics-by-numbers .statistic-by-number:nth-child(2n+2) { margin-top: 2em; margin-left: 2em; } } .stages-timeline * + .stages-timeline-items { margin-top: 2em; } .stages-timeline .stages-timeline-item + .stages-timeline-item { margin-top: 2em; } .stages-timeline .stages-timeline-item { overflow: hidden; } .stages-timeline .stages-timeline-item.active { padding: 2em; background-color: #003c71; } .stages-timeline .stages-timeline-item.active .st-number { color: #003c71; border-color: #ffffff !important; background-color: #ffffff; } .stages-timeline .stages-timeline-item.active .st-content { color: #ffffff; } .stages-timeline .stages-timeline-item.completed { opacity: 0.7; } .stages-timeline .stages-timeline-item.completed .st-number { color: #6d6e72 !important; border-color: #ffffff; background-color: #ffffff; } .stages-timeline .stages-timeline-item.completed .st-content h3 { color: #6d6e72; } .stages-timeline .stages-timeline-item .st-icon { width: 5.4em; height: 5.4em; margin-right: 2em; border-radius: 50%; float: left; background-color: #ffffff; } .stages-timeline .stages-timeline-item .st-number { border: 4px solid #6d6e72; float: left; text-align: center; background-color: #ffffff; color: #ffffff; } .stages-timeline .stages-timeline-item .st-content { float: left; width: calc(100% - 8em); } .stages-timeline .stages-timeline-item:not(.completed):not(.active) .st-content h3 { color: #D0021B; } .testimonial-container { padding-top: 5em; padding-bottom: 5em; overflow: hidden; } .testimonial-container .image { width: 16.7em; height: 16.7em; border-radius: 50%; float: left; background-position: center; background-size: cover; background-repeat: no-repeat; } .testimonial-container .testimonial { width: calc(100% - (16.7em + 2em)); margin-left: 2em; float: left; } .testimonial-container .testimonial p:before { content: "\""; } .testimonial-container .testimonial p:after { content: "\""; } .testimonial-container .testimonial .name:before { content: "-"; } .archived-flag { width: 100%; padding: 1.5em 0; background-color: #D0021B; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); z-index: 8; } .archived-flag .completed-project .label { background-image: url(../image/ui/icon-completed-project-white.png); background-position: left center; background-size: auto 100%; background-repeat: no-repeat; } .is-completed-page .archived-flag { padding-top: 0; } .is-scrolled .archived-flag { padding-top: 1.5em; } * + .bios { margin-top: 2em; } .bio { width: calc((100% - 2em * 3) / 4); margin-bottom: 2em; overflow: hidden; position: relative; z-index: 2; float: left; } .bio + .bio { margin-left: 2em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .bio + .bio { margin-left: 0; } } .bio:nth-child(4n + 1) { margin-left: 0; } .widget .bio { width: 100%; margin-right: 0; margin-bottom: 0; margin-left: 0; float: none; } .widget .bio .btn-bio.clickable-area { width: 100%; cursor: initial; } .widget .bio .btn-bio.clickable-area .name-container { width: 100%; margin-top: 2em; padding: 0; } .widget .bio .btn-bio.clickable-area a.btn { display: none; } .widget .bio .btn-bio .cta-icons { display: none !important; } .widget .bio .copy { width: 100%; padding: 0; margin-top: 0; display: block; } .widget .bio .copy a { display: none; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .bio { width: 100%; margin-left: 0; } } .bio.open { width: 100%; margin-left: 0; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .bio.open { width: 100%; } } .bio.open .btn-bio.clickable-area { cursor: default; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .bio.open .btn-bio.clickable-area .image { height: 40em; background-size: cover; } } .bio.open .btn-bio.clickable-area .cta-icons { display: none; } .bio.open .copy { display: block; } .bio .btn-bio { width: 22.7em; float: left; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .bio .btn-bio { width: 100%; } } .bio .btn-bio .image { width: 100%; height: 20em; background-image: url(../image/ui/missing-leader.jpg); background-position: center; background-repeat: no-repeat; background-size: auto 100%; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .bio .btn-bio .image { height: 40em; background-size: cover; } } .bio .btn-bio .name-container { width: calc(100% - 4em); height: 8em; max-height: 8em; padding: 2em; } .widget-half-width .bio .btn-bio .name-container { height: auto; max-height: none; } .bio .btn-bio .cta-icons { width: calc(3em * 1.5); height: calc(3em * 1.5); border-radius: 50%; display: none; position: absolute; right: calc(2em * 1.5); top: calc(50% - calc(1em * 1.5)); background-color: #D0021B; transition: right 0.25s; } .bio .btn-bio .cta-icons .cta-icon { width: 75%; height: 75%; position: absolute; left: 12.5%; top: 12.5%; opacity: 1; transition: opacity 0.25s; } .bio .btn-bio .cta-icons .cta-icon.icon-arrow-down { width: 75%; height: 50%; top: 25%; background-image: url(../image/ui/icon-arrow-down.svg); } .bio .btn-bio .cta-icons .cta-icon circle, .bio .btn-bio .cta-icons .cta-icon ellipse, .bio .btn-bio .cta-icons .cta-icon line, .bio .btn-bio .cta-icons .cta-icon path, .bio .btn-bio .cta-icons .cta-icon polygon, .bio .btn-bio .cta-icons .cta-icon rect { fill: #ffffff; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .bio .btn-bio .cta-icons { display: block; } } .bio .copy { width: calc(100% - 22.7em - 4em); padding: 2em; float: left; display: none; position: relative; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .bio .copy { width: calc(100% - 4em); padding-top: 1em; } } .bio .copy .btn-close { width: 2em; height: 2em; background-image: url(../image/ui/btn-icon-x-blue.svg); background-position: center; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; right: 2em; z-index: 1; } @media screen and (max-width: 768px) { .bio .copy .btn-close { width: calc(2em * 1.5); height: calc(2em * 1.5); right: calc(2em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .bio .copy .btn-close { width: calc(2em * 1.5); height: calc(2em * 1.5); right: calc(2em * 1.5); } } * + .btn-careers { margin-top: 2em; } .btn-career { padding: 2em; } .btn-career + .btn-career { border-top: 1px solid #dbdbdb; } .btn-career dt, .btn-career dd { font-size: 1.8em; } @media screen and (max-width: 768px) { .btn-career dt, .btn-career dd { font-size: calc(1.8em * 1.5); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .btn-career dt, .btn-career dd { font-size: calc(1.8em * 1.5); } } * + .comments-holder-container { margin-top: 4em; } a[name] + .comments-holder-container { margin-top: 0; } .comments-holder-container .comments-section + .comments-section { margin-top: 4em; } .comments-holder-container .comments-section-comments { margin-top: 4em; } .comments-holder-container .comments-section-comments .comment-container .avatar { /*width: 2em; height: 2em; margin-right: 10px; float: left; &.male { background-image: url(../image/ui/icon-boy.svg); } &.female { background-image: url(../image/ui/icon-girl.svg); } path { fill: $lightGrey; }*/ display: none; } .comments-holder-container .comments-section-comments .comment-container .comment { overflow: hidden; } .comments-holder-container .comments-section-comments .comment-container .comment .meta-data-container dt { display: none; } .comments-holder-container .comments-section-comments .comment-container .comment .comment-text { margin-top: 1em; } .comments-holder-container .comments-section-comments .comment-container .comment .action-links { margin-top: 1em; } .comments-holder-container .comments-section-comments .comment-container .comment .action-links span.moderation-options a + a, .comments-holder-container .comments-section-comments .comment-container .comment .action-links span.moderation-options + a { margin-left: 1em; } .comments-holder-container .comments-section-comments .comment-container .comment .comment-replies-container { line-height: normal; } .comments-holder-container .comments-section-comments .comment-container .comment .comment-replies-container .comment-reply-form-holder { margin-top: 2em; } @media screen and (max-width: 1440px) { .comments-holder-container .comments-section-comments .comment-container .comment .comment-replies-container .comment-reply-form-holder { font-size: calc(10vw / (1440 * 0.01)); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .comments-holder-container .comments-section-comments .comment-container .comment .comment-replies-container .comment-reply-form-holder { font-size: calc(10vw / (640 * 0.01)); } .comments-holder-container .comments-section-comments .comment-container .comment .comment-replies-container .comment-reply-form-holder > .main { font-size: 1em; } } @media print { .comments-holder-container .comments-section-comments .comment-container .comment .comment-replies-container .comment-reply-form-holder { font-size: 7.5px !important; } } .comments-holder-container .comments-section-comments .comment-container .comment .comment-replies-container .comment-replies-holder { margin-top: 2em; border-top: 1px solid #dbdbdb; padding-top: 2em; } .comments-holder-container .comments-section-comments .comment-container .comment .comment-replies-container .comment-replies-holder .comment-container .avatar { width: 1.5em; height: 1.5em; } * + .btn-link-downloads { margin-top: 2em; } .btn-link-download { padding: 2em 0 2em 2em; overflow: hidden; position: relative; } .widget-half-width .btn-link-download { border-top: 1px solid #dbdbdb; } .widget-half-width .btn-link-download:last-child { border-bottom: 1px solid #dbdbdb; } @media screen and (min-aspect-ratio: 35 / 40) { .btn-link-download:hover.has-image .icon { top: calc(18.4em - 5em / 2 + 1em); } .btn-link-download:hover .icon { top: calc(50% - 5em / 2 + 1em); } .btn-link-download:hover .icon.ac-bg-cwhite { background-color: #02549D !important; } } .masonry-container > .btn-link-download + .btn-link-download { border-top: none; } .publications .btn-link-download { padding: 2.5em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .publications .btn-link-download { width: calc(100% - 2.5em * 2) !important; margin-top: 2em; position: relative !important; top: 0 !important; } } .cfgi-file .btn-link-download { background-color: #ffffff !important; } .btn-link-download .thumbnail { width: 100%; height: 18.4em; position: absolute; left: 0; top: 0; background-image: url(../theme-bays/missing-media.png); background-position: center; background-repeat: no-repeat; background-size: cover; } .btn-link-download.has-image .copy { margin-top: 18.4em; } .btn-link-download .copy { width: calc(100% - 6.5em); overflow: hidden; } .btn-link-download .copy p + p { margin-top: 0; } .btn-link-download.has-image .icon { top: calc(18.4em - 5em / 2); } .btn-link-download .icon { width: 5em; height: 5em; border-radius: 50%; position: absolute; right: 1.5em; top: calc(50% - 5em / 2); background-image: url(../image/ui/icon-download.svg); background-color: #003c71; background-position: center; background-repeat: no-repeat; background-size: 2em 2em; transition: top 0.25s, background-color 0.25s !important; z-index: 1; } .btn-link-download .icon svg { width: 2.5em !important; height: 2.5em !important; position: absolute; left: calc(50% - 2.5em / 2); top: calc(50% - 2.5em / 2); fill: #ffffff; } * + .btn-link-outs { margin-top: 2em; } .btn-link-out { border-top: 1px solid #dbdbdb; overflow: hidden; } .btn-link-out:last-child { border-bottom: 1px solid #dbdbdb; } @media screen and (min-aspect-ratio: 35 / 40) { .btn-link-out:hover .icon { right: 1em; } .UsefulLinkWidget.is-post-standard-widget .btn-link-out:hover .icon { right: 0; } .btn-link-out:hover .icon circle, .btn-link-out:hover .icon ellipse, .btn-link-out:hover .icon line, .btn-link-out:hover .icon path, .btn-link-out:hover .icon polygon, .btn-link-out:hover .icon rect { fill: #02549D; } } .btn-link-out .image-container { width: calc(20em - 2em * 2); height: calc(20em - 2em * 2); margin: 2em; float: left; background-position: center; background-repeat: no-repeat; background-size: cover; } .ForumThreadHolder .btn-link-out + .btn-link-out { border-top: 0; margin-top: 2em; } .btn-link-out .copy { padding: 2em 5em 2em 2em; } .UsefulLinkWidget.is-post-standard-widget .btn-link-out .copy { padding: 0 3em 0 0; } .btn-link-out .icon { width: 1.25em; height: 2em; position: absolute; right: 2em; top: calc(50% - 1em); background-image: url(../image/ui/icon-arrow-right.svg); background-position: center; background-repeat: no-repeat; background-size: 2em 2em; transition: right 0.25s; } .UsefulLinkWidget.is-post-standard-widget .btn-link-out .icon { right: 1em; } .btn-link-out .icon circle, .btn-link-out .icon ellipse, .btn-link-out .icon line, .btn-link-out .icon path, .btn-link-out .icon polygon, .btn-link-out .icon rect { fill: #003c71; } .BenefitIconsWidget .icons, .ProjectObjectiveIconsWidget .icons, .shared-vision-item .icons { margin-top: 2em; overflow: hidden; } .BenefitIconsWidget .icons .icon-container, .ProjectObjectiveIconsWidget .icons .icon-container, .shared-vision-item .icons .icon-container { width: calc((100% - 2em) / 2); float: left; overflow: hidden; } .BenefitIconsWidget .icons .icon-container .icon, .ProjectObjectiveIconsWidget .icons .icon-container .icon, .shared-vision-item .icons .icon-container .icon { width: 8em; height: 8em; display: inline-block; vertical-align: middle; background-position: center; background-size: auto 100%; background-repeat: no-repeat; } .BenefitIconsWidget .icons .icon-container .copy, .ProjectObjectiveIconsWidget .icons .icon-container .copy, .shared-vision-item .icons .icon-container .copy { width: calc(100% - 8em - 1.5em); margin-left: 1em; display: inline-block; vertical-align: middle; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .BenefitIconsWidget .icons .icon-container, .ProjectObjectiveIconsWidget .icons .icon-container, .shared-vision-item .icons .icon-container { width: 100% !important; margin-left: 0 !important; } } .BenefitIconsWidget .icons .icon-container.icon-container-alignment-top .icon, .BenefitIconsWidget .icons .icon-container.icon-container-alignment-top .copy, .ProjectObjectiveIconsWidget .icons .icon-container.icon-container-alignment-top .icon, .ProjectObjectiveIconsWidget .icons .icon-container.icon-container-alignment-top .copy, .shared-vision-item .icons .icon-container.icon-container-alignment-top .icon, .shared-vision-item .icons .icon-container.icon-container-alignment-top .copy { vertical-align: top; } .BenefitIconsWidget .icons .icon-container + .icon-container, .ProjectObjectiveIconsWidget .icons .icon-container + .icon-container, .shared-vision-item .icons .icon-container + .icon-container { margin-top: 2em; margin-left: 2em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .BenefitIconsWidget .icons .icon-container + .icon-container, .ProjectObjectiveIconsWidget .icons .icon-container + .icon-container, .shared-vision-item .icons .icon-container + .icon-container { margin-top: 2em !important; margin-left: 0; } } .BenefitIconsWidget .icons .icon-container:first-child, .BenefitIconsWidget .icons .icon-container:nth-child(2), .ProjectObjectiveIconsWidget .icons .icon-container:first-child, .ProjectObjectiveIconsWidget .icons .icon-container:nth-child(2), .shared-vision-item .icons .icon-container:first-child, .shared-vision-item .icons .icon-container:nth-child(2) { margin-top: 0; } .BenefitIconsWidget .icons .icon-container:nth-child(2n+1), .ProjectObjectiveIconsWidget .icons .icon-container:nth-child(2n+1), .shared-vision-item .icons .icon-container:nth-child(2n+1) { margin-left: 0; clear: both; } .BenefitIconsWidget .icons.icons-1 .icon-container, .ProjectObjectiveIconsWidget .icons.icons-1 .icon-container, .shared-vision-item .icons.icons-1 .icon-container { width: 100%; } .BenefitIconsWidget .icons.icons-3 .icon-container, .ProjectObjectiveIconsWidget .icons.icons-3 .icon-container, .shared-vision-item .icons.icons-3 .icon-container { width: calc((100% - 2em * 2) / 3); } .BenefitIconsWidget .icons.icons-3 .icon-container:nth-child(3), .ProjectObjectiveIconsWidget .icons.icons-3 .icon-container:nth-child(3), .shared-vision-item .icons.icons-3 .icon-container:nth-child(3) { margin-top: 0; } .BenefitIconsWidget .icons.icons-3 .icon-container:nth-child(3n+3), .ProjectObjectiveIconsWidget .icons.icons-3 .icon-container:nth-child(3n+3), .shared-vision-item .icons.icons-3 .icon-container:nth-child(3n+3) { margin-left: 2em; clear: none; float: left; } .component-news-item { overflow: hidden; /*&:not(.has-image) .copy-container { width: calc(100% - 5em); margin-left: 0; }*/ } .widget-half-width .component-news-item { border-top: 1px solid #dbdbdb; } .component-news-item + .component-news-item { margin-top: 2em; } .widget-half-width .component-news-item + .component-news-item { margin-top: 0; } .widget-half-width .component-news-item + .component-news-item:last-child { border-bottom: 1px solid #dbdbdb; } @media screen and (min-aspect-ratio: 35 / 40) { .component-news-item:hover .icon { right: 1em; } .component-news-item:hover .icon circle, .component-news-item:hover .icon ellipse, .component-news-item:hover .icon line, .component-news-item:hover .icon path, .component-news-item:hover .icon polygon, .component-news-item:hover .icon rect { fill: #02549D; } } .component-news-item .thumbnail { width: 27em; height: 100%; position: absolute; background-position: center; background-repeat: no-repeat; background-size: cover; background-color: #ffffff; } .widget-half-width .component-news-item .thumbnail { width: 100%; height: 15em; position: relative; display: none; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .component-news-item .thumbnail { width: 100%; height: 15em; position: relative; display: none; } } .component-news-item:not(.has-image) .thumbnail { /*display: none;*/ } .component-news-item:not(.has-image) .thumbnail svg { width: 75% !important; height: 75% !important; position: absolute; left: 12.5%; top: 12.5%; } .component-news-item:not(.has-image) .thumbnail svg circle, .component-news-item:not(.has-image) .thumbnail svg ellipse, .component-news-item:not(.has-image) .thumbnail svg line, .component-news-item:not(.has-image) .thumbnail svg path, .component-news-item:not(.has-image) .thumbnail svg polygon, .component-news-item:not(.has-image) .thumbnail svg rect { fill: #ffffff; } .component-news-item .copy-container { width: calc(100% - 27em - 5em); border-right: 1px solid #02549D; margin-top: 0; margin-left: 27em; } .widget-half-width .component-news-item .copy-container { width: calc(100% - 5em); margin-left: 0; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .component-news-item .copy-container { width: calc(100% - 5em); margin-left: 0; } } .component-news-item .copy-container .copy.is-wysiwyg { padding: 2em; } .component-news-item .icon { width: 1.25em; height: 2em; position: absolute; right: 2em; top: calc(50% - 1em); background-image: url(../image/ui/icon-arrow-right.svg); background-position: center; background-repeat: no-repeat; background-size: 2em 2em; transition: right 0.25s; } .component-news-item .icon circle, .component-news-item .icon ellipse, .component-news-item .icon line, .component-news-item .icon path, .component-news-item .icon polygon, .component-news-item .icon rect { fill: #003c71; } .faq-item + .faq-item .component-standard-content:not(.has-image):not(.is-highlighted), .faq-item + .information-card .component-standard-content:not(.has-image):not(.is-highlighted), .faq-item + .snapshot .component-standard-content:not(.has-image):not(.is-highlighted), .faq-item + .StandardWidget.widget-full-width .component-standard-content:not(.has-image):not(.is-highlighted), .information-card + .faq-item .component-standard-content:not(.has-image):not(.is-highlighted), .information-card + .information-card .component-standard-content:not(.has-image):not(.is-highlighted), .information-card + .snapshot .component-standard-content:not(.has-image):not(.is-highlighted), .information-card + .StandardWidget.widget-full-width .component-standard-content:not(.has-image):not(.is-highlighted), .snapshot + .faq-item .component-standard-content:not(.has-image):not(.is-highlighted), .snapshot + .information-card .component-standard-content:not(.has-image):not(.is-highlighted), .snapshot + .snapshot .component-standard-content:not(.has-image):not(.is-highlighted), .snapshot + .StandardWidget.widget-full-width .component-standard-content:not(.has-image):not(.is-highlighted), .StandardWidget.widget-full-width + .faq-item .component-standard-content:not(.has-image):not(.is-highlighted), .StandardWidget.widget-full-width + .information-card .component-standard-content:not(.has-image):not(.is-highlighted), .StandardWidget.widget-full-width + .snapshot .component-standard-content:not(.has-image):not(.is-highlighted), .StandardWidget.widget-full-width + .StandardWidget.widget-full-width .component-standard-content:not(.has-image):not(.is-highlighted) { margin-top: 5em; } .faq-item + .faq-item .component-standard-content:not(.has-image):not(.is-highlighted).click-to-open, .faq-item + .information-card .component-standard-content:not(.has-image):not(.is-highlighted).click-to-open, .faq-item + .snapshot .component-standard-content:not(.has-image):not(.is-highlighted).click-to-open, .faq-item + .StandardWidget.widget-full-width .component-standard-content:not(.has-image):not(.is-highlighted).click-to-open, .information-card + .faq-item .component-standard-content:not(.has-image):not(.is-highlighted).click-to-open, .information-card + .information-card .component-standard-content:not(.has-image):not(.is-highlighted).click-to-open, .information-card + .snapshot .component-standard-content:not(.has-image):not(.is-highlighted).click-to-open, .information-card + .StandardWidget.widget-full-width .component-standard-content:not(.has-image):not(.is-highlighted).click-to-open, .snapshot + .faq-item .component-standard-content:not(.has-image):not(.is-highlighted).click-to-open, .snapshot + .information-card .component-standard-content:not(.has-image):not(.is-highlighted).click-to-open, .snapshot + .snapshot .component-standard-content:not(.has-image):not(.is-highlighted).click-to-open, .snapshot + .StandardWidget.widget-full-width .component-standard-content:not(.has-image):not(.is-highlighted).click-to-open, .StandardWidget.widget-full-width + .faq-item .component-standard-content:not(.has-image):not(.is-highlighted).click-to-open, .StandardWidget.widget-full-width + .information-card .component-standard-content:not(.has-image):not(.is-highlighted).click-to-open, .StandardWidget.widget-full-width + .snapshot .component-standard-content:not(.has-image):not(.is-highlighted).click-to-open, .StandardWidget.widget-full-width + .StandardWidget.widget-full-width .component-standard-content:not(.has-image):not(.is-highlighted).click-to-open { margin-top: 0; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .faq-item + .faq-item .component-standard-content, .faq-item + .information-card .component-standard-content, .faq-item + .snapshot .component-standard-content, .faq-item + .StandardWidget.widget-full-width .component-standard-content, .information-card + .faq-item .component-standard-content, .information-card + .information-card .component-standard-content, .information-card + .snapshot .component-standard-content, .information-card + .StandardWidget.widget-full-width .component-standard-content, .snapshot + .faq-item .component-standard-content, .snapshot + .information-card .component-standard-content, .snapshot + .snapshot .component-standard-content, .snapshot + .StandardWidget.widget-full-width .component-standard-content, .StandardWidget.widget-full-width + .faq-item .component-standard-content, .StandardWidget.widget-full-width + .information-card .component-standard-content, .StandardWidget.widget-full-width + .snapshot .component-standard-content, .StandardWidget.widget-full-width + .StandardWidget.widget-full-width .component-standard-content { margin-top: 5em; } } .faq-item .component-standard-content:not(.click-to-open), .information-card .component-standard-content:not(.click-to-open), .snapshot .component-standard-content:not(.click-to-open), .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open) { position: relative; overflow: hidden; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .faq-item .component-standard-content:not(.click-to-open), .information-card .component-standard-content:not(.click-to-open), .snapshot .component-standard-content:not(.click-to-open), .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open) { width: calc(100% - 4em); min-height: 0; margin: 0 auto; } } .faq-item .component-standard-content:not(.click-to-open).has-image .angle, .information-card .component-standard-content:not(.click-to-open).has-image .angle, .snapshot .component-standard-content:not(.click-to-open).has-image .angle, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image .angle { width: 7em; height: calc(100% + 10em); position: absolute; right: calc(-7em + 1px); top: -5em; background-image: url(../theme-landcomphase1/angle-cover.svg); background-position: center; background-repeat: no-repeat; background-size: cover; } .faq-item .component-standard-content:not(.click-to-open).has-image .angle circle, .faq-item .component-standard-content:not(.click-to-open).has-image .angle ellipse, .faq-item .component-standard-content:not(.click-to-open).has-image .angle line, .faq-item .component-standard-content:not(.click-to-open).has-image .angle path, .faq-item .component-standard-content:not(.click-to-open).has-image .angle polygon, .faq-item .component-standard-content:not(.click-to-open).has-image .angle rect, .information-card .component-standard-content:not(.click-to-open).has-image .angle circle, .information-card .component-standard-content:not(.click-to-open).has-image .angle ellipse, .information-card .component-standard-content:not(.click-to-open).has-image .angle line, .information-card .component-standard-content:not(.click-to-open).has-image .angle path, .information-card .component-standard-content:not(.click-to-open).has-image .angle polygon, .information-card .component-standard-content:not(.click-to-open).has-image .angle rect, .snapshot .component-standard-content:not(.click-to-open).has-image .angle circle, .snapshot .component-standard-content:not(.click-to-open).has-image .angle ellipse, .snapshot .component-standard-content:not(.click-to-open).has-image .angle line, .snapshot .component-standard-content:not(.click-to-open).has-image .angle path, .snapshot .component-standard-content:not(.click-to-open).has-image .angle polygon, .snapshot .component-standard-content:not(.click-to-open).has-image .angle rect, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image .angle circle, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image .angle ellipse, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image .angle line, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image .angle path, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image .angle polygon, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image .angle rect { fill: #ffffff; } .faq-item .component-standard-content:not(.click-to-open).has-image .content-container, .information-card .component-standard-content:not(.click-to-open).has-image .content-container, .snapshot .component-standard-content:not(.click-to-open).has-image .content-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image .content-container { width: 50%; position: relative; z-index: 1; /*overflow: hidden;*/ } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .faq-item .component-standard-content:not(.click-to-open).has-image .content-container, .information-card .component-standard-content:not(.click-to-open).has-image .content-container, .snapshot .component-standard-content:not(.click-to-open).has-image .content-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image .content-container { width: 100%; padding: 0; margin: 0; } } .faq-item .component-standard-content:not(.click-to-open).has-image .content-container .copy-container, .information-card .component-standard-content:not(.click-to-open).has-image .content-container .copy-container, .snapshot .component-standard-content:not(.click-to-open).has-image .content-container .copy-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image .content-container .copy-container { padding: 0; margin: 5em 8em 5em 0; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .faq-item .component-standard-content:not(.click-to-open).has-image .content-container .copy-container, .information-card .component-standard-content:not(.click-to-open).has-image .content-container .copy-container, .snapshot .component-standard-content:not(.click-to-open).has-image .content-container .copy-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image .content-container .copy-container { margin: 2em; } } .faq-item .component-standard-content:not(.click-to-open).has-image .content-container .copy-container .copy, .information-card .component-standard-content:not(.click-to-open).has-image .content-container .copy-container .copy, .snapshot .component-standard-content:not(.click-to-open).has-image .content-container .copy-container .copy, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image .content-container .copy-container .copy { width: calc(97em / 2 - 8em); /*padding: 5em 4em 5em 0;*/ float: right; position: relative; } @media screen and (max-width: 768px) { .faq-item .component-standard-content:not(.click-to-open).has-image .content-container .copy-container .copy, .information-card .component-standard-content:not(.click-to-open).has-image .content-container .copy-container .copy, .snapshot .component-standard-content:not(.click-to-open).has-image .content-container .copy-container .copy, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image .content-container .copy-container .copy { width: calc(100% - 4em * 2); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .faq-item .component-standard-content:not(.click-to-open).has-image .content-container .copy-container .copy, .information-card .component-standard-content:not(.click-to-open).has-image .content-container .copy-container .copy, .snapshot .component-standard-content:not(.click-to-open).has-image .content-container .copy-container .copy, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image .content-container .copy-container .copy { width: 100%; float: none; } } .faq-item .component-standard-content:not(.click-to-open).has-image .content-container .copy-container .copy .title-container, .information-card .component-standard-content:not(.click-to-open).has-image .content-container .copy-container .copy .title-container, .snapshot .component-standard-content:not(.click-to-open).has-image .content-container .copy-container .copy .title-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image .content-container .copy-container .copy .title-container { padding: 0; } .faq-item .component-standard-content:not(.click-to-open).has-image.image-left .cutaway-image, .information-card .component-standard-content:not(.click-to-open).has-image.image-left .cutaway-image, .snapshot .component-standard-content:not(.click-to-open).has-image.image-left .cutaway-image, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image.image-left .cutaway-image { left: auto; right: 50%; } .faq-item .component-standard-content:not(.click-to-open).has-image.image-left .content-container, .information-card .component-standard-content:not(.click-to-open).has-image.image-left .content-container, .snapshot .component-standard-content:not(.click-to-open).has-image.image-left .content-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image.image-left .content-container { margin-left: 50%; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .faq-item .component-standard-content:not(.click-to-open).has-image.image-left .content-container, .information-card .component-standard-content:not(.click-to-open).has-image.image-left .content-container, .snapshot .component-standard-content:not(.click-to-open).has-image.image-left .content-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image.image-left .content-container { margin-left: 0; } } .faq-item .component-standard-content:not(.click-to-open).has-image.image-left .content-container .angle, .information-card .component-standard-content:not(.click-to-open).has-image.image-left .content-container .angle, .snapshot .component-standard-content:not(.click-to-open).has-image.image-left .content-container .angle, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image.image-left .content-container .angle { background-image: url(../theme-landcomphase1/angle-cover-2.svg); right: auto; left: calc(-7em + 1px); } .faq-item .component-standard-content:not(.click-to-open).has-image.image-left .content-container .copy-container, .information-card .component-standard-content:not(.click-to-open).has-image.image-left .content-container .copy-container, .snapshot .component-standard-content:not(.click-to-open).has-image.image-left .content-container .copy-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image.image-left .content-container .copy-container { margin: 5em 0 5em 8em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .faq-item .component-standard-content:not(.click-to-open).has-image.image-left .content-container .copy-container, .information-card .component-standard-content:not(.click-to-open).has-image.image-left .content-container .copy-container, .snapshot .component-standard-content:not(.click-to-open).has-image.image-left .content-container .copy-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image.image-left .content-container .copy-container { margin: 2em; } } .faq-item .component-standard-content:not(.click-to-open).has-image.image-left .content-container .copy-container .copy, .information-card .component-standard-content:not(.click-to-open).has-image.image-left .content-container .copy-container .copy, .snapshot .component-standard-content:not(.click-to-open).has-image.image-left .content-container .copy-container .copy, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image.image-left .content-container .copy-container .copy { float: left; } .faq-item .component-standard-content:not(.click-to-open).has-image.image-background .cutaway-image, .information-card .component-standard-content:not(.click-to-open).has-image.image-background .cutaway-image, .snapshot .component-standard-content:not(.click-to-open).has-image.image-background .cutaway-image, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image.image-background .cutaway-image { width: 100%; left: 0; } .faq-item .component-standard-content:not(.click-to-open).has-image.image-background .content-container, .information-card .component-standard-content:not(.click-to-open).has-image.image-background .content-container, .snapshot .component-standard-content:not(.click-to-open).has-image.image-background .content-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image.image-background .content-container { width: 100%; } .faq-item .component-standard-content:not(.click-to-open).has-image.image-background .content-container .title-container, .information-card .component-standard-content:not(.click-to-open).has-image.image-background .content-container .title-container, .snapshot .component-standard-content:not(.click-to-open).has-image.image-background .content-container .title-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image.image-background .content-container .title-container { text-align: center; } .faq-item .component-standard-content:not(.click-to-open).has-image.image-background .content-container .copy-container, .information-card .component-standard-content:not(.click-to-open).has-image.image-background .content-container .copy-container, .snapshot .component-standard-content:not(.click-to-open).has-image.image-background .content-container .copy-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image.image-background .content-container .copy-container { margin: 5em auto; } .faq-item .component-standard-content:not(.click-to-open).has-image.image-background .content-container .copy-container .copy, .information-card .component-standard-content:not(.click-to-open).has-image.image-background .content-container .copy-container .copy, .snapshot .component-standard-content:not(.click-to-open).has-image.image-background .content-container .copy-container .copy, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image.image-background .content-container .copy-container .copy { width: 100%; float: none; } .faq-item .component-standard-content:not(.click-to-open).has-image.image-background .content-container .copy-container .copy hr, .information-card .component-standard-content:not(.click-to-open).has-image.image-background .content-container .copy-container .copy hr, .snapshot .component-standard-content:not(.click-to-open).has-image.image-background .content-container .copy-container .copy hr, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).has-image.image-background .content-container .copy-container .copy hr { width: 20em; height: 4px; margin: 4em auto; } .faq-item .component-standard-content:not(.click-to-open).is-image-a-map .content-container .copy-container, .information-card .component-standard-content:not(.click-to-open).is-image-a-map .content-container .copy-container, .snapshot .component-standard-content:not(.click-to-open).is-image-a-map .content-container .copy-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).is-image-a-map .content-container .copy-container { min-height: 25em; } .faq-item .component-standard-content:not(.click-to-open):not(.has-image).is-highlighted .content-container .copy-container, .information-card .component-standard-content:not(.click-to-open):not(.has-image).is-highlighted .content-container .copy-container, .snapshot .component-standard-content:not(.click-to-open):not(.has-image).is-highlighted .content-container .copy-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open):not(.has-image).is-highlighted .content-container .copy-container { margin-top: 10em; margin-bottom: 10em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .faq-item .component-standard-content:not(.click-to-open):not(.has-image).is-highlighted .content-container .copy-container, .information-card .component-standard-content:not(.click-to-open):not(.has-image).is-highlighted .content-container .copy-container, .snapshot .component-standard-content:not(.click-to-open):not(.has-image).is-highlighted .content-container .copy-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open):not(.has-image).is-highlighted .content-container .copy-container { margin-top: 2em; margin-bottom: 2em; } } .faq-item .component-standard-content:not(.click-to-open):not(.has-image).is-highlighted .content-container .copy-container .copy .title-container, .information-card .component-standard-content:not(.click-to-open):not(.has-image).is-highlighted .content-container .copy-container .copy .title-container, .snapshot .component-standard-content:not(.click-to-open):not(.has-image).is-highlighted .content-container .copy-container .copy .title-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open):not(.has-image).is-highlighted .content-container .copy-container .copy .title-container { padding: 0; } .faq-item .component-standard-content:not(.click-to-open):not(.has-image):not(.is-highlighted):not(.is-title-only), .information-card .component-standard-content:not(.click-to-open):not(.has-image):not(.is-highlighted):not(.is-title-only), .snapshot .component-standard-content:not(.click-to-open):not(.has-image):not(.is-highlighted):not(.is-title-only), .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open):not(.has-image):not(.is-highlighted):not(.is-title-only) { margin-top: 5em; margin-bottom: 5em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .faq-item .component-standard-content:not(.click-to-open):not(.is-highlighted), .information-card .component-standard-content:not(.click-to-open):not(.is-highlighted), .snapshot .component-standard-content:not(.click-to-open):not(.is-highlighted), .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open):not(.is-highlighted) { width: 100%; background-color: transparent; } } .faq-item .component-standard-content:not(.click-to-open) .cutaway-image, .information-card .component-standard-content:not(.click-to-open) .cutaway-image, .snapshot .component-standard-content:not(.click-to-open) .cutaway-image, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open) .cutaway-image { width: 50%; height: 100%; display: block; position: absolute; left: 50%; top: 0; background-position: center; background-repeat: no-repeat; background-size: cover; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .faq-item .component-standard-content:not(.click-to-open) .cutaway-image, .information-card .component-standard-content:not(.click-to-open) .cutaway-image, .snapshot .component-standard-content:not(.click-to-open) .cutaway-image, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open) .cutaway-image { display: none; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .faq-item .component-standard-content:not(.click-to-open).is-image-a-map .cutaway-image, .information-card .component-standard-content:not(.click-to-open).is-image-a-map .cutaway-image, .snapshot .component-standard-content:not(.click-to-open).is-image-a-map .cutaway-image, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).is-image-a-map .cutaway-image { display: block; width: 100%; position: relative; left: 0; } .faq-item .component-standard-content:not(.click-to-open).is-image-a-map .cutaway-image .map-container, .information-card .component-standard-content:not(.click-to-open).is-image-a-map .cutaway-image .map-container, .snapshot .component-standard-content:not(.click-to-open).is-image-a-map .cutaway-image .map-container, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open).is-image-a-map .cutaway-image .map-container { min-height: 60em; } } .faq-item .component-standard-content:not(.click-to-open) img.cutaway-image-mobile, .information-card .component-standard-content:not(.click-to-open) img.cutaway-image-mobile, .snapshot .component-standard-content:not(.click-to-open) img.cutaway-image-mobile, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open) img.cutaway-image-mobile { display: none; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .faq-item .component-standard-content:not(.click-to-open) img.cutaway-image-mobile, .information-card .component-standard-content:not(.click-to-open) img.cutaway-image-mobile, .snapshot .component-standard-content:not(.click-to-open) img.cutaway-image-mobile, .StandardWidget.widget-full-width .component-standard-content:not(.click-to-open) img.cutaway-image-mobile { width: calc(100% - 4em); height: auto; margin: 2em auto 0; display: block; position: static; } } .faq-item .component-standard-content.is-highlighted, .faq-item .component-standard-content:not(.click-to-open), .information-card .component-standard-content.is-highlighted, .information-card .component-standard-content:not(.click-to-open), .snapshot .component-standard-content.is-highlighted, .snapshot .component-standard-content:not(.click-to-open), .StandardWidget.widget-half-width .component-standard-content.is-highlighted, .StandardWidget.widget-half-width .component-standard-content:not(.click-to-open) { padding: 2em; } .faq-item .component-standard-content.is-highlighted * + .copy-container, .faq-item .component-standard-content:not(.click-to-open) * + .copy-container, .information-card .component-standard-content.is-highlighted * + .copy-container, .information-card .component-standard-content:not(.click-to-open) * + .copy-container, .snapshot .component-standard-content.is-highlighted * + .copy-container, .snapshot .component-standard-content:not(.click-to-open) * + .copy-container, .StandardWidget.widget-half-width .component-standard-content.is-highlighted * + .copy-container, .StandardWidget.widget-half-width .component-standard-content:not(.click-to-open) * + .copy-container { margin: 2em; } .faq-item .component-standard-content:not(.is-highlighted) * + .copy-container, .information-card .component-standard-content:not(.is-highlighted) * + .copy-container, .snapshot .component-standard-content:not(.is-highlighted) * + .copy-container, .StandardWidget.widget-half-width .component-standard-content:not(.is-highlighted) * + .copy-container { margin-top: 2em; } .faq-item .component-standard-content .copy-container .copy img, .information-card .component-standard-content .copy-container .copy img, .snapshot .component-standard-content .copy-container .copy img, .StandardWidget.widget-half-width .component-standard-content .copy-container .copy img { max-width: 100%; } .faq-item.click-to-open, .information-card.click-to-open, .snapshopt.click-to-open { border-top: 1px solid #dbdbdb; } .faq-item.click-to-open:last-child, .information-card.click-to-open:last-child, .snapshopt.click-to-open:last-child { border-bottom: 1px solid #dbdbdb; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .StandardWidget.widget-is-standard-widget-click-to-open { margin-top: 0 !important; } } .StandardWidget.widget-is-standard-widget-click-to-open:first-child .component-standard-content.click-to-open, .StandardWidget:not(.widget-is-standard-widget-click-to-open) + .StandardWidget.widget-is-standard-widget-click-to-open .component-standard-content.click-to-open, .StandardWidget.widget-is-standard-widget-click-to-open.widget-half-width .component-standard-content.click-to-open, .StandardWidget.widget-is-standard-widget-click-to-open + .widget-is-standard-widget-click-to-open .component-standard-content.click-to-open { border-top: 1px solid #dbdbdb; } .StandardWidget.widget-is-standard-widget-click-to-open.widget-full-width:first-child { margin-top: 5em; } .StandardWidget.widget-is-standard-widget-click-to-open.widget-full-width:last-child { margin-bottom: 5em; } .StandardWidget.widget-is-standard-widget-click-to-open.widget-half-width:nth-last-child(2) .component-standard-content.click-to-open { border-bottom: 1px solid #dbdbdb; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .StandardWidget.widget-is-standard-widget-click-to-open.widget-half-width:nth-last-child(2) .component-standard-content.click-to-open { border-bottom: 0; } } .StandardWidget.widget-is-standard-widget-click-to-open.widget-half-width .component-standard-content.click-to-open, .StandardWidget.widget-is-standard-widget-click-to-open:last-child .component-standard-content.click-to-open { border-bottom: 1px solid #dbdbdb; } .is-all-standard-widget-click-to-open .StandardWidget.widget-is-standard-widget-click-to-open.widget-half-width:not(:last-child):not(:nth-last-child(2)) .component-standard-content.click-to-open { border-bottom: 0; } .faq-item, .information-card, .snapshot, .StandardWidget .component-standard-content { overflow: hidden; } .faq-item.is-highlighted .title-container .icon.svg circle, .faq-item.is-highlighted .title-container .icon.svg ellipse, .faq-item.is-highlighted .title-container .icon.svg line, .faq-item.is-highlighted .title-container .icon.svg path, .faq-item.is-highlighted .title-container .icon.svg polygon, .faq-item.is-highlighted .title-container .icon.svg rect, .faq-item.image-background .title-container .icon.svg circle, .faq-item.image-background .title-container .icon.svg ellipse, .faq-item.image-background .title-container .icon.svg line, .faq-item.image-background .title-container .icon.svg path, .faq-item.image-background .title-container .icon.svg polygon, .faq-item.image-background .title-container .icon.svg rect, .information-card.is-highlighted .title-container .icon.svg circle, .information-card.is-highlighted .title-container .icon.svg ellipse, .information-card.is-highlighted .title-container .icon.svg line, .information-card.is-highlighted .title-container .icon.svg path, .information-card.is-highlighted .title-container .icon.svg polygon, .information-card.is-highlighted .title-container .icon.svg rect, .information-card.image-background .title-container .icon.svg circle, .information-card.image-background .title-container .icon.svg ellipse, .information-card.image-background .title-container .icon.svg line, .information-card.image-background .title-container .icon.svg path, .information-card.image-background .title-container .icon.svg polygon, .information-card.image-background .title-container .icon.svg rect, .snapshot.is-highlighted .title-container .icon.svg circle, .snapshot.is-highlighted .title-container .icon.svg ellipse, .snapshot.is-highlighted .title-container .icon.svg line, .snapshot.is-highlighted .title-container .icon.svg path, .snapshot.is-highlighted .title-container .icon.svg polygon, .snapshot.is-highlighted .title-container .icon.svg rect, .snapshot.image-background .title-container .icon.svg circle, .snapshot.image-background .title-container .icon.svg ellipse, .snapshot.image-background .title-container .icon.svg line, .snapshot.image-background .title-container .icon.svg path, .snapshot.image-background .title-container .icon.svg polygon, .snapshot.image-background .title-container .icon.svg rect, .StandardWidget .component-standard-content.is-highlighted .title-container .icon.svg circle, .StandardWidget .component-standard-content.is-highlighted .title-container .icon.svg ellipse, .StandardWidget .component-standard-content.is-highlighted .title-container .icon.svg line, .StandardWidget .component-standard-content.is-highlighted .title-container .icon.svg path, .StandardWidget .component-standard-content.is-highlighted .title-container .icon.svg polygon, .StandardWidget .component-standard-content.is-highlighted .title-container .icon.svg rect, .StandardWidget .component-standard-content.image-background .title-container .icon.svg circle, .StandardWidget .component-standard-content.image-background .title-container .icon.svg ellipse, .StandardWidget .component-standard-content.image-background .title-container .icon.svg line, .StandardWidget .component-standard-content.image-background .title-container .icon.svg path, .StandardWidget .component-standard-content.image-background .title-container .icon.svg polygon, .StandardWidget .component-standard-content.image-background .title-container .icon.svg rect { fill: #ffffff !important; } .faq-item.is-highlighted .subtitle-container .icon.svg circle, .faq-item.is-highlighted .subtitle-container .icon.svg ellipse, .faq-item.is-highlighted .subtitle-container .icon.svg line, .faq-item.is-highlighted .subtitle-container .icon.svg path, .faq-item.is-highlighted .subtitle-container .icon.svg polygon, .faq-item.is-highlighted .subtitle-container .icon.svg rect, .faq-item.image-background .subtitle-container .icon.svg circle, .faq-item.image-background .subtitle-container .icon.svg ellipse, .faq-item.image-background .subtitle-container .icon.svg line, .faq-item.image-background .subtitle-container .icon.svg path, .faq-item.image-background .subtitle-container .icon.svg polygon, .faq-item.image-background .subtitle-container .icon.svg rect, .information-card.is-highlighted .subtitle-container .icon.svg circle, .information-card.is-highlighted .subtitle-container .icon.svg ellipse, .information-card.is-highlighted .subtitle-container .icon.svg line, .information-card.is-highlighted .subtitle-container .icon.svg path, .information-card.is-highlighted .subtitle-container .icon.svg polygon, .information-card.is-highlighted .subtitle-container .icon.svg rect, .information-card.image-background .subtitle-container .icon.svg circle, .information-card.image-background .subtitle-container .icon.svg ellipse, .information-card.image-background .subtitle-container .icon.svg line, .information-card.image-background .subtitle-container .icon.svg path, .information-card.image-background .subtitle-container .icon.svg polygon, .information-card.image-background .subtitle-container .icon.svg rect, .snapshot.is-highlighted .subtitle-container .icon.svg circle, .snapshot.is-highlighted .subtitle-container .icon.svg ellipse, .snapshot.is-highlighted .subtitle-container .icon.svg line, .snapshot.is-highlighted .subtitle-container .icon.svg path, .snapshot.is-highlighted .subtitle-container .icon.svg polygon, .snapshot.is-highlighted .subtitle-container .icon.svg rect, .snapshot.image-background .subtitle-container .icon.svg circle, .snapshot.image-background .subtitle-container .icon.svg ellipse, .snapshot.image-background .subtitle-container .icon.svg line, .snapshot.image-background .subtitle-container .icon.svg path, .snapshot.image-background .subtitle-container .icon.svg polygon, .snapshot.image-background .subtitle-container .icon.svg rect, .StandardWidget .component-standard-content.is-highlighted .subtitle-container .icon.svg circle, .StandardWidget .component-standard-content.is-highlighted .subtitle-container .icon.svg ellipse, .StandardWidget .component-standard-content.is-highlighted .subtitle-container .icon.svg line, .StandardWidget .component-standard-content.is-highlighted .subtitle-container .icon.svg path, .StandardWidget .component-standard-content.is-highlighted .subtitle-container .icon.svg polygon, .StandardWidget .component-standard-content.is-highlighted .subtitle-container .icon.svg rect, .StandardWidget .component-standard-content.image-background .subtitle-container .icon.svg circle, .StandardWidget .component-standard-content.image-background .subtitle-container .icon.svg ellipse, .StandardWidget .component-standard-content.image-background .subtitle-container .icon.svg line, .StandardWidget .component-standard-content.image-background .subtitle-container .icon.svg path, .StandardWidget .component-standard-content.image-background .subtitle-container .icon.svg polygon, .StandardWidget .component-standard-content.image-background .subtitle-container .icon.svg rect { fill: #ffffff !important; } .faq-item.is-highlighted, .information-card.is-highlighted, .snapshot.is-highlighted, .StandardWidget .component-standard-content.is-highlighted { background-color: #02549D; } .faq-item.is-highlighted .title-container .icon.svg circle, .faq-item.is-highlighted .title-container .icon.svg ellipse, .faq-item.is-highlighted .title-container .icon.svg line, .faq-item.is-highlighted .title-container .icon.svg path, .faq-item.is-highlighted .title-container .icon.svg polygon, .faq-item.is-highlighted .title-container .icon.svg rect, .information-card.is-highlighted .title-container .icon.svg circle, .information-card.is-highlighted .title-container .icon.svg ellipse, .information-card.is-highlighted .title-container .icon.svg line, .information-card.is-highlighted .title-container .icon.svg path, .information-card.is-highlighted .title-container .icon.svg polygon, .information-card.is-highlighted .title-container .icon.svg rect, .snapshot.is-highlighted .title-container .icon.svg circle, .snapshot.is-highlighted .title-container .icon.svg ellipse, .snapshot.is-highlighted .title-container .icon.svg line, .snapshot.is-highlighted .title-container .icon.svg path, .snapshot.is-highlighted .title-container .icon.svg polygon, .snapshot.is-highlighted .title-container .icon.svg rect, .StandardWidget .component-standard-content.is-highlighted .title-container .icon.svg circle, .StandardWidget .component-standard-content.is-highlighted .title-container .icon.svg ellipse, .StandardWidget .component-standard-content.is-highlighted .title-container .icon.svg line, .StandardWidget .component-standard-content.is-highlighted .title-container .icon.svg path, .StandardWidget .component-standard-content.is-highlighted .title-container .icon.svg polygon, .StandardWidget .component-standard-content.is-highlighted .title-container .icon.svg rect { fill: #ffffff !important; } .faq-item.is-highlighted .subtitle-container .icon.svg circle, .faq-item.is-highlighted .subtitle-container .icon.svg ellipse, .faq-item.is-highlighted .subtitle-container .icon.svg line, .faq-item.is-highlighted .subtitle-container .icon.svg path, .faq-item.is-highlighted .subtitle-container .icon.svg polygon, .faq-item.is-highlighted .subtitle-container .icon.svg rect, .information-card.is-highlighted .subtitle-container .icon.svg circle, .information-card.is-highlighted .subtitle-container .icon.svg ellipse, .information-card.is-highlighted .subtitle-container .icon.svg line, .information-card.is-highlighted .subtitle-container .icon.svg path, .information-card.is-highlighted .subtitle-container .icon.svg polygon, .information-card.is-highlighted .subtitle-container .icon.svg rect, .snapshot.is-highlighted .subtitle-container .icon.svg circle, .snapshot.is-highlighted .subtitle-container .icon.svg ellipse, .snapshot.is-highlighted .subtitle-container .icon.svg line, .snapshot.is-highlighted .subtitle-container .icon.svg path, .snapshot.is-highlighted .subtitle-container .icon.svg polygon, .snapshot.is-highlighted .subtitle-container .icon.svg rect, .StandardWidget .component-standard-content.is-highlighted .subtitle-container .icon.svg circle, .StandardWidget .component-standard-content.is-highlighted .subtitle-container .icon.svg ellipse, .StandardWidget .component-standard-content.is-highlighted .subtitle-container .icon.svg line, .StandardWidget .component-standard-content.is-highlighted .subtitle-container .icon.svg path, .StandardWidget .component-standard-content.is-highlighted .subtitle-container .icon.svg polygon, .StandardWidget .component-standard-content.is-highlighted .subtitle-container .icon.svg rect { fill: #ffffff !important; } .faq-item .title-container, .information-card .title-container, .snapshot .title-container, .StandardWidget .component-standard-content .title-container { position: relative; } .faq-item .title-container .icon.svg, .information-card .title-container .icon.svg, .snapshot .title-container .icon.svg, .StandardWidget .component-standard-content .title-container .icon.svg { width: auto; height: 2.6em; margin-right: 1em; display: inline; vertical-align: middle; } .faq-item .title-container .icon.svg circle, .faq-item .title-container .icon.svg ellipse, .faq-item .title-container .icon.svg line, .faq-item .title-container .icon.svg path, .faq-item .title-container .icon.svg polygon, .faq-item .title-container .icon.svg rect, .information-card .title-container .icon.svg circle, .information-card .title-container .icon.svg ellipse, .information-card .title-container .icon.svg line, .information-card .title-container .icon.svg path, .information-card .title-container .icon.svg polygon, .information-card .title-container .icon.svg rect, .snapshot .title-container .icon.svg circle, .snapshot .title-container .icon.svg ellipse, .snapshot .title-container .icon.svg line, .snapshot .title-container .icon.svg path, .snapshot .title-container .icon.svg polygon, .snapshot .title-container .icon.svg rect, .StandardWidget .component-standard-content .title-container .icon.svg circle, .StandardWidget .component-standard-content .title-container .icon.svg ellipse, .StandardWidget .component-standard-content .title-container .icon.svg line, .StandardWidget .component-standard-content .title-container .icon.svg path, .StandardWidget .component-standard-content .title-container .icon.svg polygon, .StandardWidget .component-standard-content .title-container .icon.svg rect { fill: #003c71; } .faq-item .title-container.click-close-open, .information-card .title-container.click-close-open, .snapshot .title-container.click-close-open, .StandardWidget .component-standard-content .title-container.click-close-open { padding: 2em 6em 2em 2em; /*margin: 2em;*/ } @media screen and (min-aspect-ratio: 35 / 40) { .faq-item .title-container.click-close-open:hover .cta-icons, .information-card .title-container.click-close-open:hover .cta-icons, .snapshot .title-container.click-close-open:hover .cta-icons, .StandardWidget .component-standard-content .title-container.click-close-open:hover .cta-icons { right: 1em; } } .faq-item .title-container.click-close-open:not(.open) .cta-icons .cta-icon.plus, .information-card .title-container.click-close-open:not(.open) .cta-icons .cta-icon.plus, .snapshot .title-container.click-close-open:not(.open) .cta-icons .cta-icon.plus, .StandardWidget .component-standard-content .title-container.click-close-open:not(.open) .cta-icons .cta-icon.plus { opacity: 1; } .faq-item .title-container.click-close-open:not(.open) .cta-icons .cta-icon.arrow-up, .information-card .title-container.click-close-open:not(.open) .cta-icons .cta-icon.arrow-up, .snapshot .title-container.click-close-open:not(.open) .cta-icons .cta-icon.arrow-up, .StandardWidget .component-standard-content .title-container.click-close-open:not(.open) .cta-icons .cta-icon.arrow-up { opacity: 0; } .faq-item .title-container.click-close-open.open .cta-icons .cta-icon.plus, .information-card .title-container.click-close-open.open .cta-icons .cta-icon.plus, .snapshot .title-container.click-close-open.open .cta-icons .cta-icon.plus, .StandardWidget .component-standard-content .title-container.click-close-open.open .cta-icons .cta-icon.plus { opacity: 0; } .faq-item .title-container.click-close-open.open .cta-icons .cta-icon.arrow-up, .information-card .title-container.click-close-open.open .cta-icons .cta-icon.arrow-up, .snapshot .title-container.click-close-open.open .cta-icons .cta-icon.arrow-up, .StandardWidget .component-standard-content .title-container.click-close-open.open .cta-icons .cta-icon.arrow-up { opacity: 1; } .faq-item .title-container.click-close-open .cta-icons, .information-card .title-container.click-close-open .cta-icons, .snapshot .title-container.click-close-open .cta-icons, .StandardWidget .component-standard-content .title-container.click-close-open .cta-icons { width: 2.5em; height: 2.5em; border-radius: 50%; position: absolute; right: 2em; top: calc(50% - 1em); background-color: #02549D; transition: right 0.25s; } .faq-item .title-container.click-close-open .cta-icons .cta-icon, .information-card .title-container.click-close-open .cta-icons .cta-icon, .snapshot .title-container.click-close-open .cta-icons .cta-icon, .StandardWidget .component-standard-content .title-container.click-close-open .cta-icons .cta-icon { width: 75%; height: 75%; position: absolute; left: calc(50% - 75% / 2 + 0.5px); top: calc(50% - 75% / 2); opacity: 0; transition: opacity 0.25s; } .faq-item .title-container.click-close-open .cta-icons .cta-icon.plus, .information-card .title-container.click-close-open .cta-icons .cta-icon.plus, .snapshot .title-container.click-close-open .cta-icons .cta-icon.plus, .StandardWidget .component-standard-content .title-container.click-close-open .cta-icons .cta-icon.plus { background-image: url(../image/ui/icon-plus.svg); } .faq-item .title-container.click-close-open .cta-icons .cta-icon.arrow-up, .information-card .title-container.click-close-open .cta-icons .cta-icon.arrow-up, .snapshot .title-container.click-close-open .cta-icons .cta-icon.arrow-up, .StandardWidget .component-standard-content .title-container.click-close-open .cta-icons .cta-icon.arrow-up { background-image: url(../image/ui/icon-minus.svg); } .faq-item .title-container.click-close-open .cta-icons .cta-icon circle, .faq-item .title-container.click-close-open .cta-icons .cta-icon ellipse, .faq-item .title-container.click-close-open .cta-icons .cta-icon line, .faq-item .title-container.click-close-open .cta-icons .cta-icon path, .faq-item .title-container.click-close-open .cta-icons .cta-icon polygon, .faq-item .title-container.click-close-open .cta-icons .cta-icon rect, .information-card .title-container.click-close-open .cta-icons .cta-icon circle, .information-card .title-container.click-close-open .cta-icons .cta-icon ellipse, .information-card .title-container.click-close-open .cta-icons .cta-icon line, .information-card .title-container.click-close-open .cta-icons .cta-icon path, .information-card .title-container.click-close-open .cta-icons .cta-icon polygon, .information-card .title-container.click-close-open .cta-icons .cta-icon rect, .snapshot .title-container.click-close-open .cta-icons .cta-icon circle, .snapshot .title-container.click-close-open .cta-icons .cta-icon ellipse, .snapshot .title-container.click-close-open .cta-icons .cta-icon line, .snapshot .title-container.click-close-open .cta-icons .cta-icon path, .snapshot .title-container.click-close-open .cta-icons .cta-icon polygon, .snapshot .title-container.click-close-open .cta-icons .cta-icon rect, .StandardWidget .component-standard-content .title-container.click-close-open .cta-icons .cta-icon circle, .StandardWidget .component-standard-content .title-container.click-close-open .cta-icons .cta-icon ellipse, .StandardWidget .component-standard-content .title-container.click-close-open .cta-icons .cta-icon line, .StandardWidget .component-standard-content .title-container.click-close-open .cta-icons .cta-icon path, .StandardWidget .component-standard-content .title-container.click-close-open .cta-icons .cta-icon polygon, .StandardWidget .component-standard-content .title-container.click-close-open .cta-icons .cta-icon rect { fill: #ffffff; } .faq-item .subtitle-container, .information-card .subtitle-container, .snapshot .subtitle-container, .StandardWidget .component-standard-content .subtitle-container { margin-top: 1em; position: relative; } .faq-item .subtitle-container .icon.svg, .information-card .subtitle-container .icon.svg, .snapshot .subtitle-container .icon.svg, .StandardWidget .component-standard-content .subtitle-container .icon.svg { width: auto; height: 2em; margin-right: 1em; display: inline; vertical-align: middle; } .faq-item .subtitle-container .icon.svg circle, .faq-item .subtitle-container .icon.svg ellipse, .faq-item .subtitle-container .icon.svg line, .faq-item .subtitle-container .icon.svg path, .faq-item .subtitle-container .icon.svg polygon, .faq-item .subtitle-container .icon.svg rect, .information-card .subtitle-container .icon.svg circle, .information-card .subtitle-container .icon.svg ellipse, .information-card .subtitle-container .icon.svg line, .information-card .subtitle-container .icon.svg path, .information-card .subtitle-container .icon.svg polygon, .information-card .subtitle-container .icon.svg rect, .snapshot .subtitle-container .icon.svg circle, .snapshot .subtitle-container .icon.svg ellipse, .snapshot .subtitle-container .icon.svg line, .snapshot .subtitle-container .icon.svg path, .snapshot .subtitle-container .icon.svg polygon, .snapshot .subtitle-container .icon.svg rect, .StandardWidget .component-standard-content .subtitle-container .icon.svg circle, .StandardWidget .component-standard-content .subtitle-container .icon.svg ellipse, .StandardWidget .component-standard-content .subtitle-container .icon.svg line, .StandardWidget .component-standard-content .subtitle-container .icon.svg path, .StandardWidget .component-standard-content .subtitle-container .icon.svg polygon, .StandardWidget .component-standard-content .subtitle-container .icon.svg rect { fill: #4f4f4f; } .faq-item .copy-container, .information-card .copy-container, .snapshot .copy-container, .StandardWidget .component-standard-content .copy-container { overflow: hidden; } .faq-item .copy-container .copy img, .information-card .copy-container .copy img, .snapshot .copy-container .copy img, .StandardWidget .component-standard-content .copy-container .copy img { max-width: 100%; height: auto; display: inline-block; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .faq-item .copy-container .copy img, .information-card .copy-container .copy img, .snapshot .copy-container .copy img, .StandardWidget .component-standard-content .copy-container .copy img { width: 100%; } } .faq-item .copy-container.click-close-open-content, .information-card .copy-container.click-close-open-content, .snapshot .copy-container.click-close-open-content, .StandardWidget .component-standard-content .copy-container.click-close-open-content { margin-top: 0 !important; } .faq-item .copy-container.click-close-open-content .copy, .information-card .copy-container.click-close-open-content .copy, .snapshot .copy-container.click-close-open-content .copy, .StandardWidget .component-standard-content .copy-container.click-close-open-content .copy { padding: 0 2em 2em; } .faq-item .title-container .icon.svg, .information-card .title-container .icon.svg, .snapshot .title-container .icon.svg { vertical-align: bottom; } .faq-item .title-container .icon.svg circle, .faq-item .title-container .icon.svg ellipse, .faq-item .title-container .icon.svg line, .faq-item .title-container .icon.svg path, .faq-item .title-container .icon.svg polygon, .faq-item .title-container .icon.svg rect, .information-card .title-container .icon.svg circle, .information-card .title-container .icon.svg ellipse, .information-card .title-container .icon.svg line, .information-card .title-container .icon.svg path, .information-card .title-container .icon.svg polygon, .information-card .title-container .icon.svg rect, .snapshot .title-container .icon.svg circle, .snapshot .title-container .icon.svg ellipse, .snapshot .title-container .icon.svg line, .snapshot .title-container .icon.svg path, .snapshot .title-container .icon.svg polygon, .snapshot .title-container .icon.svg rect { fill: #4f4f4f; } .faq-item .title-container h2, .faq-item .title-container h3, .information-card .title-container h2, .information-card .title-container h3, .snapshot .title-container h2, .snapshot .title-container h3 { margin-top: 0; display: inline; } .faq-item .subtitle-container .icon.svg, .information-card .subtitle-container .icon.svg, .snapshot .subtitle-container .icon.svg { vertical-align: bottom; } .faq-item .subtitle-container h2, .faq-item .subtitle-container h3, .information-card .subtitle-container h2, .information-card .subtitle-container h3, .snapshot .subtitle-container h2, .snapshot .subtitle-container h3 { margin-top: 0; display: inline; } * + .btn-projects { margin-top: 2em; } .component-ugnsw-btn-project { width: 100%; margin-top: 2em; overflow: hidden; background-color: #f4f4f4; position: relative; } .btn-projects .component-ugnsw-btn-project { width: calc((100% - 1em * 3) / 3); float: left; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .btn-projects .component-ugnsw-btn-project { width: 100% !important; margin-left: 0 !important; } .btn-projects .component-ugnsw-btn-project + .component-ugnsw-btn-project { margin-top: 2em !important; } } .component-ugnsw-btn-project:first-child, .component-ugnsw-btn-project:nth-child(2), .component-ugnsw-btn-project:nth-child(3) { margin-top: 0; } .component-ugnsw-btn-project + .component-ugnsw-btn-project { margin-left: 1em; } .component-ugnsw-btn-project:nth-child(3n+1) { margin-left: 0; clear: left; } .project-finder .btn-projects .component-ugnsw-btn-project { width: calc((100% - 1em * 3) / 3) !important; /*height: calc(19.7em + (8em + 2em * 2) + 5px);*/ margin-top: 0 !important; margin-right: 1em !important; margin-bottom: 2em !important; margin-left: 0 !important; float: left !important; clear: none !important; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .project-finder .btn-projects .component-ugnsw-btn-project { width: 100% !important; } } .is-ie .project-finder .btn-projects .component-ugnsw-btn-project { width: calc((100% - 1em * 3) / 3 - 1px) !important; } @media screen and (min-aspect-ratio: 35 / 40) { .project-finder .btn-projects .component-ugnsw-btn-project .hover-parent:hover .label { /*border-bottom-width: 5px; margin-top: -5px;*/ } .project-finder .btn-projects .component-ugnsw-btn-project .hover-parent:hover .label h2 { top: -5px; } } .project-finder .btn-projects .component-ugnsw-btn-project .label { height: 8em; /*border-bottom: 0px solid $colorMain; margin-top: 0; transition: border-bottom-width $transitionDurationVeryQuick, margin-top $transitionDurationVeryQuick;*/ } .project-finder .btn-projects .component-ugnsw-btn-project .label h2 { position: relative; top: 0px; transition: top 0.25s; } .UsefulLinkWidget .btn-projects.btn-projects-2 .component-ugnsw-btn-project { width: calc((100% - 1em * 2) / 2); } .UsefulLinkWidget .btn-projects.btn-projects-4 .component-ugnsw-btn-project { width: calc((100% - 1em * 4) / 4); } .UsefulLinkWidget .btn-projects.btn-projects-4 .component-ugnsw-btn-project:nth-child(3n+1) { clear: none; } .UsefulLinkWidget .btn-projects.btn-projects-4 .component-ugnsw-btn-project:nth-child(4n+1) { clear: left; } .UsefulLinkWidget .btn-projects.btn-projects-4 .component-ugnsw-btn-project:nth-child(4) { margin-top: 0; margin-left: 1em; } .component-ugnsw-btn-project .hover-parent.border { border-bottom: 5px solid #003c71; } .component-ugnsw-btn-project .image-container { width: 100%; height: 19.7em; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .component-ugnsw-btn-project .image-container .angle { width: 4.7em; height: 100%; position: absolute; left: 0; top: 0; background-image: url(../theme-landcomphase1/angle-cover.svg); background-position: left top; background-repeat: no-repeat; background-size: cover; opacity: 0.4; } .component-ugnsw-btn-project .image-container .angle circle, .component-ugnsw-btn-project .image-container .angle ellipse, .component-ugnsw-btn-project .image-container .angle line, .component-ugnsw-btn-project .image-container .angle path, .component-ugnsw-btn-project .image-container .angle polygon, .component-ugnsw-btn-project .image-container .angle rect { fill: #ffffff !important; } .component-ugnsw-btn-project .label { color: #ffffff; } .btn-projects .component-ugnsw-btn-project .label { height: 9em; margin: 0; padding: 2em; } .component-ugnsw-btn-project * + .label { margin-top: 2em; } .component-ugnsw-btn-project * + .copy { margin-top: 2em; } .component-ugnsw-btn-project .clickable-area { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } * + .video-playlist, .video-playlist-container .video-playlist { margin-top: 4em; } .fullscreen-pop-up * + .video-playlist, .fullscreen-pop-up .video-playlist-container .video-playlist { margin-top: 2em; } .VideoHolder .active-video-and-playlist .video-playlist { margin-top: 5.5em; } .video iframe.video-player { display: block; position: relative; z-index: 1; /*.VideoHolder & {*/ width: 100%; height: 55em; /*} .widget-full-width & { width: 100%; height: 55em; @media screen and (max-aspect-ratio: $breakpointMaxAspectRatio) and (max-width: 640px) { height: 27em; } }*/ } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .video iframe.video-player { height: 27em; } } .widget-full-width .video-playlist .video iframe.video-player { height: 18em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .widget-full-width .video-playlist .video iframe.video-player { height: 27em; } } .widget-half-width .video iframe.video-player { width: 100%; height: 24em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .widget-half-width .video iframe.video-player { height: 27em; } } h2 + .video iframe.video-player { margin-top: 2em; } .video iframe.video-player + .copy.is-wysiwyg { margin-top: 2em; } .video iframe.video-player + .copy.is-wysiwyg dl.meta-data-container dt.icon.date { background-image: url(../image/ui/icon-calendar.svg); } .video iframe.video-player + .copy.is-wysiwyg dl.meta-data-container dt.icon.date:after { display: none; } .video iframe.video-player + .copy.is-wysiwyg dl.meta-data-container dt.icon.date circle, .video iframe.video-player + .copy.is-wysiwyg dl.meta-data-container dt.icon.date ellipse, .video iframe.video-player + .copy.is-wysiwyg dl.meta-data-container dt.icon.date line, .video iframe.video-player + .copy.is-wysiwyg dl.meta-data-container dt.icon.date path, .video iframe.video-player + .copy.is-wysiwyg dl.meta-data-container dt.icon.date polygon, .video iframe.video-player + .copy.is-wysiwyg dl.meta-data-container dt.icon.date rect { fill: #cccccc; } .video-playlist .video .btn-play { width: 100%; height: 17.5em; background-position: center; background-repeat: no-repeat; background-size: cover; } .VirtualTourPage .video-playlist .video .btn-play { height: 7.5em; } .video-playlist .video.active h4 { color: #6d6e72; } .fullscreen-pop-up .video-playlist .video.active h4 { color: #003c71; } .video-playlist .video .copy.is-wysiwyg p { display: none; } .video-playlist .video .copy.is-wysiwyg dl.meta-data-container { display: none; } .video + .video { margin-top: 2em; } .load-more + .event-category, .event-category + .event-category { margin-top: 4em; } .event-category h2 + .event { margin-top: 4em; } .event { position: relative; } .event + .event { padding-top: 4em; border-top: 1px solid #acacac; margin-top: 4em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .event { background-color: transparent !important; } } .event.has-image .copy { padding: 2em 0 2em calc(31.8em + 2em); } .one-event-only .event.has-image .copy { padding: 0; } .widget-half-width .event.has-image .copy { padding: 0; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .event.has-image .copy { padding: 0; } } .event .image { width: 31.8em; height: 100%; position: absolute; left: 0; top: 0; background-position: center; background-repeat: no-repeat; background-size: cover; } .one-event-only .event .image { height: 25em; margin: 0 2em 2em 0; position: static; float: left; } .widget-half-width .event .image { width: 100%; height: 25em; position: static; margin-bottom: 2em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .event .image { width: 100%; height: 25em; position: static; margin-bottom: 2em; } } .event .copy { position: relative; } .one-event-only .event .copy { padding: 0; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .event .copy { padding: 0; } } .event .copy dl.meta-data-container { margin-top: 1em; } .one-event-only .event .copy dl.meta-data-container { width: auto; } .widget .faq-container .faq-category-container { margin-top: 2em; } .widget .faq-container .faq-category-container .faq-item { border-top: 1px solid #dbdbdb; border-bottom: 0; overflow: hidden; } .widget .faq-container .faq-category-container .faq-item:last-child { border-bottom: 1px solid #dbdbdb; } .widget .faq-container .faq-category-container .faq-item .clickable-area { padding: 2em 12em 2em 2em; } .widget .faq-container .faq-category-container .faq-item .clickable-area.open .icon-container.icon-arrow-left { opacity: 0; } .widget .faq-container .faq-category-container .faq-item .clickable-area.open .icon-container.icon-arrow-up { opacity: 1; } .widget .faq-container .faq-category-container .faq-item .clickable-area h3.question { border-left: 0; } .widget .faq-container .faq-category-container .faq-item .clickable-area .icon-container { width: 6em; height: 100%; position: absolute; right: 0em; top: 0; /*font-size: 10px;*/ transition: width 0.25s, opacity 0.25s; } .widget .faq-container .faq-category-container .faq-item .clickable-area .icon-container.icon-arrow-left { opacity: 1; } .widget .faq-container .faq-category-container .faq-item .clickable-area .icon-container.icon-arrow-left .icon { background-image: url(../image/ui/icon-plus.svg); } .widget .faq-container .faq-category-container .faq-item .clickable-area .icon-container.icon-arrow-up { opacity: 0; } .widget .faq-container .faq-category-container .faq-item .clickable-area .icon-container.icon-arrow-up .icon { background-image: url(../image/ui/icon-minus.svg); } .widget .faq-container .faq-category-container .faq-item .clickable-area .icon-container .icon { width: auto; height: 3em; position: absolute; left: 50%; top: calc(50% - 1.5em); transform: translateX(-100%); transition: transform 0.25s; } .widget .faq-container .faq-category-container .faq-item .clickable-area .icon-container .icon circle, .widget .faq-container .faq-category-container .faq-item .clickable-area .icon-container .icon ellipse, .widget .faq-container .faq-category-container .faq-item .clickable-area .icon-container .icon line, .widget .faq-container .faq-category-container .faq-item .clickable-area .icon-container .icon path, .widget .faq-container .faq-category-container .faq-item .clickable-area .icon-container .icon polygon, .widget .faq-container .faq-category-container .faq-item .clickable-area .icon-container .icon rect { fill: #ffffff; } .widget .faq-container .faq-category-container .faq-item .clickable-area .icon-container .end-left-up { width: 6em; height: 100%; position: absolute; left: -5.9em; top: 0; } .widget .faq-container .faq-category-container .faq-item .answer .copy { padding: 2em; } .widget .faq-container .see-more { border-bottom: 1px solid #ededed; background-color: #ffffff; } .widget .faq-container .see-more .clickable-area { padding: 2em; } .widget .faq-container .see-more .clickable-area p { font-style: italic; } .faq-container .faq-category-container { overflow: hidden; } .faq-container .faq-category-container + .faq-category-container { margin-top: 4em; } .faq-container .faq-category-container h2.title-container { width: 100%; overflow: hidden; position: relative; color: #02549D; } .faq-container .faq-category-container h2.title-container.open .icon-container .icon-open { opacity: 1; } .faq-container .faq-category-container h2.title-container.open .icon-container .icon-close { opacity: 0; } .faq-container .faq-category-container h2.title-container .label { display: inline-block; float: left; } .faq-container .faq-category-container h2.title-container .line { /*display: block;*/ display: none; overflow: hidden; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .faq-container .faq-category-container h2.title-container .line { display: none; } } .faq-container .faq-category-container h2.title-container .icon-container { display: block; } .faq-container .faq-category-container h2.title-container .icon-container .icon-close, .faq-container .faq-category-container h2.title-container .icon-container .icon-open { display: block; position: absolute; transition: opacity 0.25s; } .faq-container .faq-category-container h2.title-container .icon-container .icon-close { background-image: url(../image/ui/icon-plus.svg); } .faq-container .faq-category-container h2.title-container .icon-container .icon-open { background-image: url(../image/ui/icon-minus.svg); } .faq-container .faq-category-container .subcategories .subcategory + .subcategory { margin-top: 1em; } .faq-container .faq-category-container .subcategories .subcategory h3.open .icon-container .icon-close { opacity: 0; } .faq-container .faq-category-container .subcategories .subcategory h3.open .icon-container .icon-open { opacity: 1; } .faq-container .faq-category-container .subcategories .subcategory h3 .icon-container { height: 1em; display: inline-block; position: relative; vertical-align: bottom; } .faq-container .faq-category-container .subcategories .subcategory h3 .icon-container .icon-close, .faq-container .faq-category-container .subcategories .subcategory h3 .icon-container .icon-open { width: auto; height: 1em; display: block; position: absolute; left: 0; top: 0; transition: opacity 0.25s; } .faq-container .faq-category-container .subcategories .subcategory h3 .icon-container .icon-close { background-image: url(../image/ui/icon-arrow-right.svg); opacity: 1; } .faq-container .faq-category-container .subcategories .subcategory h3 .icon-container .icon-open { background-image: url(../image/ui/icon-arrow-up.svg); opacity: 0; } .faq-container .faq-category-container .subcategories .subcategory .faq-items { overflow: hidden; } .faq-container .faq-category-container .subcategories .subcategory .faq-items .faq-item { overflow: hidden; /*see also _projects 'coz .click-to-open is similar to faq-item*/ } .faq-container .faq-category-container .subcategories .subcategory .faq-items .faq-item .click-close-open.open .icon-arrow-left { opacity: 0; } .faq-container .faq-category-container .subcategories .subcategory .faq-items .faq-item .click-close-open.open .icon-arrow-up { opacity: 1; } .faq-container .faq-category-container .subcategories .subcategory .faq-items .faq-item .click-close-open .icon-arrow-left, .faq-container .faq-category-container .subcategories .subcategory .faq-items .faq-item .click-close-open .icon-arrow-up { transition: width 0.25s, opacity 0.25s; } .faq-container .faq-category-container .subcategories .subcategory .faq-items .faq-item .click-close-open .icon-arrow-left { opacity: 1; } .faq-container .faq-category-container .subcategories .subcategory .faq-items .faq-item .click-close-open .icon-arrow-up { opacity: 0; } .faq-container .faq-category-container .subcategories .subcategory .faq-items .faq-item .faq-question { color: #4f4f4f; } .gallery-container { position: relative; } .gallery-container .gallery-active-image { width: 100%; height: 35em; margin-top: 2em; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; } .widget-full-width .gallery-container .gallery-active-image { height: 50em; } .gallery-container .gallery-active-image a { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .gallery-container .gallery-items { margin-top: 2em; position: relative; } .widget-full-width .gallery-container .gallery-items.gallery-items-1 .gallery-item .copy, .widget-full-width .gallery-container .gallery-items.gallery-items-2 .gallery-item .copy, .widget-full-width .gallery-container .gallery-items.gallery-items-3 .gallery-item .copy, .widget-full-width .gallery-container .gallery-items.gallery-items-4 .gallery-item .copy { margin-top: 2em; } .gallery-container .gallery-items .gallery-item .thumbnail { width: 100%; height: 10em; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; } .widget-full-width .gallery-container .gallery-items .gallery-item .thumbnail { height: 20em; } .gallery-container .gallery-items .gallery-item .thumbnail a { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .gallery-container .gallery-items .gallery-item .copy { width: 100%; margin-top: 7em; } .gallery-container .gallery-items .hidden.lightbox-image { display: none; } .gallery-container .content-width + .content-width { margin-top: 2em; } .gallery-container .gallery-nav-container { width: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .lb-details { font-family: "franklin-gothic-urw"; } .housing-job-populations-widget h2.widget-title + .scenario { margin-top: 4em; } .housing-job-populations-widget .scenarios { margin-top: 2em; } .housing-job-populations-widget .scenarios .icon { width: 3em; height: 3em; margin-right: 1em; display: inline-block; vertical-align: middle; } .housing-job-populations-widget .scenarios .icon svg { width: inherit; height: inherit; } .housing-job-populations-widget .scenarios .icon svg circle, .housing-job-populations-widget .scenarios .icon svg ellipse, .housing-job-populations-widget .scenarios .icon svg line, .housing-job-populations-widget .scenarios .icon svg path, .housing-job-populations-widget .scenarios .icon svg polygon, .housing-job-populations-widget .scenarios .icon svg rect { fill: #D0021B !important; } .housing-job-populations-widget .scenarios .scenario { width: calc((100% - 2em) / 3 - 4em - 1px); padding: 2em; border-bottom: 1px solid #dbdbdb; position: relative; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .housing-job-populations-widget .scenarios .scenario { width: 100% !important; margin-left: 0 !important; } } .housing-job-populations-widget .scenarios .scenario + .column { margin-left: 1em; } .housing-job-populations-widget .scenarios .scenario.scenario-housing.c2e-circle-city:before { font-size: 5em; position: absolute; left: calc(2em / 5); top: calc(2em / 5); } .housing-job-populations-widget .scenarios .scenario.scenario-jobs.c2e-circle-briefcase:before { font-size: 5em; position: absolute; left: calc(2em / 5); top: calc(2em / 5); } .housing-job-populations-widget .scenarios .scenario.scenario-population.c2e-circle-people:before { font-size: 5em; position: absolute; left: calc(2em / 5); top: calc(2em / 5); } .housing-job-populations-widget .scenarios .scenario dl { margin-top: 2em; position: relative; } .housing-job-populations-widget .scenarios .scenario dl dt { width: 100%; float: none; } .housing-job-populations-widget .scenarios .scenario dl dt:after { content: ""; } .housing-job-populations-widget .scenarios .scenario dl dd { width: 100%; float: none; } .housing-job-populations-widget .scenarios .scenario dl dd .info { top: auto; } .IFrameWidget .iframe-container iframe { width: 100%; min-height: 25em; border: 0; margin: 2em auto 0; display: block; } .image-comparison { position: relative; } .image-comparison h2 + .image-comparison-carousel { margin-top: 2em; } .image-comparison .compared-image-2 { height: 100%; width: 50%; position: absolute; left: 0; top: 0; overflow: hidden; transform: translateZ(0); backface-visibility: hidden; } .image-comparison .compared-image-2 img { width: auto; } .image-comparison .is-visible .compared-image-2 { width: 50%; animation: compare-bounce-in 0.7s; } .image-comparison .compare-arrow { position: absolute; border-left: 2px solid #003c71; width: 2px; top: 0; left: 50%; cursor: pointer; background-color: #003c71; } .image-comparison .compare-arrow .icon { width: 4em; height: 4em; border-radius: 50%; position: absolute; left: -2em; top: calc(50% - 2em); text-align: center; color: #FFFFFF; background-color: #003c71; background-image: url(../image/ui/icon-arrow-left-right.svg); background-position: center; background-repeat: no-repeat; background-size: cover; } .image-comparison .compare-arrow .icon:before { position: absolute; display: block; } .image-comparison .compare-arrow .icon svg { width: 3em !important; height: 3em !important; position: absolute; left: calc(2em - 1.5em); top: calc(2em - 1.5em); } .image-comparison .compare-arrow .icon svg circle, .image-comparison .compare-arrow .icon svg ellipse, .image-comparison .compare-arrow .icon svg line, .image-comparison .compare-arrow .icon svg path, .image-comparison .compare-arrow .icon svg polygon, .image-comparison .compare-arrow .icon svg rect { fill: #ffffff !important; } .image-comparison .comparison-caption .cpadding { padding: 2em 0 0 0; } @keyframes compare-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } .image-comparison .custom-controls .comparison-next, .image-comparison .custom-controls .comparison-prev { width: 3.7em; height: 6.5em; position: absolute; cursor: pointer; z-index: 10; background-size: 100% auto; background-repeat: no-repeat; transition: transform 0.25s; } .image-comparison .custom-controls .comparison-next { right: calc(50% - 97em / 2); top: calc(50% - 6.5em / 2); } @media screen and (min-aspect-ratio: 35 / 40) { .image-comparison .custom-controls .comparison-next:hover { transform: translateX(10px); } } .image-comparison .custom-controls .comparison-prev { left: calc(50% - 97em / 2); top: calc(50% - 6.5em / 2); } @media screen and (min-aspect-ratio: 35 / 40) { .image-comparison .custom-controls .comparison-prev:hover { transform: translateX(-10px); } } @media screen and (min-aspect-ratio: 35 / 40) { .img-pop-up:hover .icon svg { width: 2.5em !important; height: 2.5em !important; left: calc(50% - 2.5em / 2); top: calc(50% - 2.5em / 2); } } .img-pop-up .icon { width: 4em; height: 4em; border-radius: 50%; position: absolute; right: 1em; bottom: 1em; background-color: rgba(0, 0, 0, 0.1); } .img-pop-up .icon svg { width: 2em !important; height: 2em !important; position: absolute; left: calc(50% - 1em); top: calc(50% - 1em); transition: width 0.25s, height 0.25s, left 0.25s, top 0.25s; } .img-pop-up .icon svg circle, .img-pop-up .icon svg line, .img-pop-up .icon svg path, .img-pop-up .icon svg polygon, .img-pop-up .icon svg rect { fill: #ffffff !important; stroke: #ffffff !important; } .info-graphic-container h2.widget-title + .copy { margin-top: 2em; } .info-graphic-container .info-graphic-items { width: 100%; min-height: 22.4em; position: relative; } * .info-graphic-container .info-graphic-items { margin-top: 2em; } .info-graphic-container .info-graphic-items.has-active .info-graphic-item:not(.active):not(.mouse-over) .icon-container { opacity: 0.25; } @media screen and (min-aspect-ratio: 35 / 40), (min-width: 641px) { .info-graphic-container .info-graphic-items.has-mouse-over:not(.has-active) .info-graphic-item:not(.mouse-over) .icon-container { width: 40%; } .info-graphic-container .info-graphic-items.has-mouse-over:not(.has-active) .info-graphic-item:not(.mouse-over):nth-child(9n+1) .icon-container { left: 15em; } .info-graphic-container .info-graphic-items.has-mouse-over:not(.has-active) .info-graphic-item:not(.mouse-over):nth-child(9n+2) .icon-container { left: 21.6em; } .info-graphic-container .info-graphic-items.has-mouse-over:not(.has-active) .info-graphic-item:not(.mouse-over):nth-child(9n+3) .icon-container { left: 19.8em; } .info-graphic-container .info-graphic-items.has-mouse-over:not(.has-active) .info-graphic-item:not(.mouse-over):nth-child(9n+4) .icon-container { left: 17em; } .info-graphic-container .info-graphic-items.has-mouse-over:not(.has-active) .info-graphic-item:not(.mouse-over):nth-child(9n+5) .icon-container { left: 22.2em; } .info-graphic-container .info-graphic-items.has-mouse-over:not(.has-active) .info-graphic-item:not(.mouse-over):nth-child(9n+6) .icon-container { right: 17.5em; } .info-graphic-container .info-graphic-items.has-mouse-over:not(.has-active) .info-graphic-item:not(.mouse-over):nth-child(9n+7) .icon-container { right: 22.4em; } .info-graphic-container .info-graphic-items.has-mouse-over:not(.has-active) .info-graphic-item:not(.mouse-over):nth-child(9n+8) .icon-container { right: 19.2em; } .info-graphic-container .info-graphic-items.has-mouse-over:not(.has-active) .info-graphic-item:not(.mouse-over):nth-child(9n+9) .icon-container { right: 17em; } } .info-graphic-container .info-graphic-items .info-graphic-item { width: 100%; /*min-height: 100%; position: absolute; left: 0; top: 0;*/ } .info-graphic-container .info-graphic-items .info-graphic-item .icon-container { width: 59em; height: 5.6em; position: absolute; left: 0; top: 0; border-radius: calc(5.6em / 2); background-color: rgba(218, 41, 28, 0.5); transition: opacity 0.25s, width 0.25s, left 0.25s, right 0.25s; z-index: 1; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .info-graphic-container .info-graphic-items .info-graphic-item .icon-container { width: 5.6em; height: 50%; } } .info-graphic-container .info-graphic-items .info-graphic-item .icon-container .icon.svg { width: 5.6em; height: 5.6em; border-radius: 50%; position: absolute; left: 0; top: 0; background-color: #ffffff; } .info-graphic-container .info-graphic-items .info-graphic-item .icon-container .icon.svg circle, .info-graphic-container .info-graphic-items .info-graphic-item .icon-container .icon.svg ellipse, .info-graphic-container .info-graphic-items .info-graphic-item .icon-container .icon.svg line, .info-graphic-container .info-graphic-items .info-graphic-item .icon-container .icon.svg path, .info-graphic-container .info-graphic-items .info-graphic-item .icon-container .icon.svg polygon, .info-graphic-container .info-graphic-items .info-graphic-item .icon-container .icon.svg rect { fill: #D0021B !important; } .info-graphic-container .info-graphic-items .info-graphic-item .icon-container .clickable-area { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .info-graphic-container .info-graphic-items .info-graphic-item .icon-container .clickable-area .cta-icon-arrow { display: none; } .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+2) .icon-container { left: calc(5.6em * 1.25); top: calc(5.6em * 0.5); } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+2) .icon-container { left: calc(100% / 5 * 1); top: 0; } } .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+3) .icon-container { left: calc(5.6em * 0.5); top: calc(5.6em * 1.5); } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+3) .icon-container { left: calc(100% / 5 * 2); top: 0; } } .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+4) .icon-container { left: calc(5.6em * 0.25); top: calc(5.6em * 2.5); } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+4) .icon-container { left: calc(100% / 5 * 3); top: 0; } } .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+5) .icon-container { left: calc(5.6em * 1.5); top: calc(5.6em * 3); } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+5) .icon-container { left: calc(100% / 5 * 4); top: 0; } } .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+6) .icon-container { left: auto; right: 0; top: calc(5.6em * 0.5); } .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+6) .icon-container .icon { left: auto; right: 0; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+6) .icon-container { left: calc(100% / 5 * 0.5); top: auto; bottom: 0; } .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+6) .icon-container .icon { top: auto; bottom: 0; } } .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+7) .icon-container { left: auto; right: calc(5.6em * 1.25); top: calc(5.6em * 1); } .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+7) .icon-container .icon { left: auto; right: 0; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+7) .icon-container { left: calc(100% / 5 * 1.5); top: auto; bottom: 0; } .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+7) .icon-container .icon { top: auto; bottom: 0; } } .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+8) .icon-container { left: auto; right: calc(5.6em * 0.5); top: calc(5.6em * 2); } .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+8) .icon-container .icon { left: auto; right: 0; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+8) .icon-container { left: calc(100% / 5 * 2.5); top: auto; bottom: 0; } .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+8) .icon-container .icon { top: auto; bottom: 0; } } .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+9) .icon-container { left: auto; right: calc(5.6em * 1.5); top: calc(5.6em * 3); } .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+9) .icon-container .icon { left: auto; right: 0; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+9) .icon-container { left: calc(100% / 5 * 3.5); top: auto; bottom: 0; } .info-graphic-container .info-graphic-items .info-graphic-item:nth-child(9n+9) .icon-container .icon { top: auto; bottom: 0; } } .info-graphic-container .info-graphic-items .info-graphic-item .copy-container { width: 0; /*min-height: 22.4em;*/ border-radius: 0 2em 2em 2em; margin: 0 auto; overflow: hidden; position: absolute; /*position: relative;*/ /*left: calc(50% - 68.2em / 2);*/ left: 50%; /*left: 0 !important;*/ top: 0; background-color: #ffffff; z-index: 1; opacity: 0; transition: opacity 0.25s, width 0.25s, left 0.25s; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .info-graphic-container .info-graphic-items .info-graphic-item .copy-container { top: 6.6em; transition: none; } } .info-graphic-container .info-graphic-items .info-graphic-item .copy-container .copy { width: calc(68.2em - 4em - 4px); min-height: calc(22.4em - 4em - 4px); padding: 2em; border: 2px solid #D0021B; border-radius: 0 2em 2em 2em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .info-graphic-container .info-graphic-items .info-graphic-item .copy-container .copy { width: calc(100% - 4em - 4px); } } .info-graphic-container .info-graphic-items .info-graphic-item.has-image .copy { width: calc(68.2em - 26.8em - 4em - 4px); padding-right: calc(26.8em + 2em); } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .info-graphic-container .info-graphic-items .info-graphic-item.has-image .copy { width: calc(100% - 4em - 4.5px); padding-right: 2em; } } .info-graphic-container .info-graphic-items .info-graphic-item.has-image .copy .image { width: calc(26.8em - 2px); height: calc(22.4em - 4px); border-radius: 0 calc(2em - 2px) calc(2em - 2px) 0; position: absolute; right: 2px; top: 2px; background-position: center; background-size: cover; background-repeat: no-repeat; /*display: none;*/ } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .info-graphic-container .info-graphic-items .info-graphic-item.has-image .copy .image { min-width: 100%; border-radius: 0; margin-top: 2em; position: static; } } .info-graphic-container .info-graphic-items .info-graphic-item.active .copy-container { width: 68.2em; left: calc(50% - 68.2em / 2); opacity: 1; z-index: 2; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .info-graphic-container .info-graphic-items .info-graphic-item.active .copy-container { width: 100%; left: 0; } } .information-cards-container * + .information-cards-ugdc { margin-top: 2em; } .intro { margin-top: 3em; } .StandardWidget .LoginWidget { width: 28em !important; position: static !important; float: right; margin-left: 4em; margin-bottom: 2em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .StandardWidget .LoginWidget { width: 100% !important; margin-left: 0; margin-bottom: 4em; } } .post-its-container { padding-bottom: 0 !important; position: relative; } .post-its-container div.name-and-email-container { margin-top: 2em; overflow: hidden; } .post-its-container div.submit-container { margin-top: 2em; text-align: right; } .post-its-container .btn-scroll-to-post-its { display: none; } .post-its-container div.post-its { height: 0; padding: 0; margin-top: 2em; position: relative; overflow: hidden; background-color: #31363a !important; transition: height 0.25s; } .post-its-container div.post-its.has-post-it { height: 69em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640) { .post-its-container div.post-its.has-post-it { height: auto; padding: 4em 0; } } .post-its-container div.post-its .post-its-page { width: 100%; height: 100%; position: absolute; top: 0; overflow: hidden; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640) { .post-its-container div.post-its .post-its-page { height: auto; position: static; } } .post-its-container div.post-its .post-its-page.post-its-on-screen { left: 0; } .post-its-container div.post-its .post-its-page.post-its-off-screen { left: 100%; } .post-its-container div.post-its .post-it { width: 28.5em; height: 28.5em; position: absolute; overflow: hidden; background-position: 0 0; background-repeat: no-repeat; background-size: 100% auto; cursor: pointer; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640) { .post-its-container div.post-its .post-it { width: 50%; /*height: auto;*/ position: static; float: left; } } .post-its-container div.post-its .post-it .copy { padding: 2em 4em; pointer-events: none; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640) { .post-its-container div.post-its .post-it .copy { padding: 2em; } } .post-its-container div.post-its .post-it .copy p.comment { color: #000000; } .post-its-container div.post-its .post-it .copy p.name { text-align: right; color: #4f4f4f; } .post-its-container div.post-its .post-it:nth-child(4n+1) { /*background-color: #74b6d7;*/ background-image: url(../image/ui/post-it-0.png); } .post-its-container div.post-its .post-it:nth-child(4n+2) { /*background-color: #de8bb4;*/ background-image: url(../image/ui/post-it-1.png); } .post-its-container div.post-its .post-it:nth-child(4n+3) { /*background-color: #b9db6d;*/ background-image: url(../image/ui/post-it-2.png); } .post-its-container div.post-its .post-it:nth-child(4n+4) { /*background-color: #ffe852;*/ background-image: url(../image/ui/post-it-3.png); } .post-its-container div.post-its .arrow-down { width: 0; height: 0; border-top: 2.5em solid #ffffff; border-right: 2.5em solid transparent; border-left: 2.5em solid transparent; position: absolute; left: calc(50% - 2.5em); top: 0; z-index: 1; } .post-its-container div.post-its .post-its-paginator { width: calc(100% - 10em); height: auto; position: absolute; left: 5em; bottom: 0; text-align: center; overflow: hidden; z-index: 2; } .post-its-container div.post-its .post-its-paginator .post-it-page { width: 2em; height: 2em; border-radius: 50%; margin: 0.5em; display: inline-block; background-color: #ffffff; } .post-its-container div.post-its .post-its-paginator .post-it-page.active { background-color: #D0021B !important; } .post-its-container div.post-its .post-its-paginator .post-it-page .label { display: none; } .post-its-container div.post-its .post-it-page-arrows .post-it-page-arrow-left, .post-its-container div.post-its .post-it-page-arrows .post-it-page-arrow-right { width: calc(2.8em / 4.7); height: 1em; display: block; font-size: 4.7em; position: absolute; left: calc(2.5em / 4.7); top: calc(50% - 0.5em); color: #ffffff; background-image: url(../image/ui/timeline-btn-arrow-left-white.svg); background-position: center; background-repeat: no-repeat; background-size: 100% auto; z-index: 2; transition: transform 0.25s; } .post-its-container div.post-its .post-it-page-arrows .post-it-page-arrow-left:hover, .post-its-container div.post-its .post-it-page-arrows .post-it-page-arrow-right:hover { transform: translateX(-10px); } .post-its-container div.post-its .post-it-page-arrows .post-it-page-arrow-right { left: auto; right: calc(2.5em / 4.7); background-image: url(../image/ui/timeline-btn-arrow-right-white.svg); } .post-its-container div.post-its .post-it-page-arrows .post-it-page-arrow-right:hover { transform: translateX(10px); } .ProjectStatusIconsWidget .icons { margin-top: 2em; overflow: hidden; } .ProjectStatusIconsWidget .icons .icon-container { text-align: center; float: left; overflow: hidden; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .ProjectStatusIconsWidget .icons .icon-container { width: 100% !important; text-align: left; } } .ProjectStatusIconsWidget .icons .icon-container .icon { height: 7em; background-position: center; background-size: auto 100%; background-repeat: no-repeat; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .ProjectStatusIconsWidget .icons .icon-container .icon { width: 10em; display: inline-block; vertical-align: middle; } } .ProjectStatusIconsWidget .icons .icon-container .copy { margin-top: 1.25em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .ProjectStatusIconsWidget .icons .icon-container .copy { width: calc(100% - 10em - 3em); margin-left: 2em; display: inline-block; vertical-align: middle; } } .ProjectStatusIconsWidget .icons .icon-container + .icon-container { margin-left: 2em; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .ProjectStatusIconsWidget .icons .icon-container + .icon-container { margin-top: 2em; margin-left: 0; } } .ProjectStatusIconsWidget .icons.icons-1 .icon-container { width: calc((100% - 2em * 0) / 1 - 0.5px); } .ProjectStatusIconsWidget .icons.icons-2 .icon-container { width: calc((100% - 2em * 1) / 2 - 0.5px); } .ProjectStatusIconsWidget .icons.icons-3 .icon-container { width: calc((100% - 2em * 2) / 3 - 0.5px); } .ProjectStatusIconsWidget .icons.icons-4 .icon-container { width: calc((100% - 2em * 3) / 4 - 0.5px); } .ProjectStatusIconsWidget .icons.icons-5 .icon-container { width: calc((100% - 2em * 4) / 5 - 0.5px); } .ProjectStatusIconsWidget .icons.icons-6 .icon-container { width: calc((100% - 2em * 5) / 6 - 0.5px); } .ProjectStatusIconsWidget .icons.icons-7 .icon-container { width: calc((100% - 2em * 6) / 7 - 0.5px); } .ProjectStatusIconsWidget .project-status-timeline-container { height: 1.5em; margin-top: 4em; margin-bottom: 1em; position: relative; background-color: #e3e3e3; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .ProjectStatusIconsWidget .project-status-timeline-container { display: none; } } .ProjectStatusIconsWidget .project-status-timeline-container .bg { width: 100%; height: 0.5em; position: absolute; left: 0; top: 0; background-color: #d7d7d7; } .ProjectStatusIconsWidget .project-status-timeline-container .project-status-timeline { height: 100%; overflow: visible; position: absolute; left: 0; top: 0; } .ProjectStatusIconsWidget .project-status-timeline-container .project-status-timeline .middle { width: 100%; height: 100%; position: relative; background-color: #003c71; } .ProjectStatusIconsWidget .project-status-timeline-container .project-status-timeline .middle .arrow { width: 2.5em; height: 2.5em; position: absolute; right: -1.25em; top: -.5em; border-radius: 50%; background-color: #003c71; background-image: url(../image/ui/icon-arrow-right.svg); background-position: center; background-size: auto 0.5em; background-repeat: no-repeat; } .ProjectStatusIconsWidget .project-status-timeline-container .project-status-timeline .middle .arrow svg { width: 1em !important; height: 1.25em !important; position: absolute; left: calc((2.5em - 1em) / 2); top: calc((2.5em - 1.25em) / 2); } .ProjectStatusIconsWidget .project-status-timeline-container .project-status-timeline .middle .arrow svg circle, .ProjectStatusIconsWidget .project-status-timeline-container .project-status-timeline .middle .arrow svg ellipse, .ProjectStatusIconsWidget .project-status-timeline-container .project-status-timeline .middle .arrow svg line, .ProjectStatusIconsWidget .project-status-timeline-container .project-status-timeline .middle .arrow svg path, .ProjectStatusIconsWidget .project-status-timeline-container .project-status-timeline .middle .arrow svg polygon, .ProjectStatusIconsWidget .project-status-timeline-container .project-status-timeline .middle .arrow svg rect { fill: #ffffff; } .project-finder.project-finder-disabled .project-search { display: none; } .project-finder.project-finder-disabled .project-search-results { overflow: hidden; } .project-finder.project-finder-disabled .project-search-results .btn-tabs { display: none; } .project-finder.project-finder-disabled .project-search-results hr { display: none; } .project-finder .btn-tabs.btn-tabs-unstyled .btn-tab.btn-tab-unstyled { display: block; } .project-finder .btn-tabs.btn-tabs-unstyled .btn-tab.btn-tab-unstyled.btn-tab-map { background-image: url(../image/ui/icon-map-pin.svg); background-position: left center; background-repeat: no-repeat; background-size: auto 1em; } .project-finder .btn-tabs.btn-tabs-unstyled .btn-tab.btn-tab-unstyled.btn-tab-current { background-image: url(../image/ui/icon-arrow-right.svg); background-position: left center; background-repeat: no-repeat; background-size: auto 1em; } .project-finder .btn-tabs.btn-tabs-unstyled .btn-tab.btn-tab-unstyled.active { display: none; } .project-finder .tab-contents.tab-contents-unstyled { margin-top: 2em; } .project-finder.project-finder-disabled .project-search { display: none; } .project-finder.project-finder-disabled .project-search-results { overflow: hidden; } .project-finder.project-finder-disabled .project-search-results .btn-tabs { display: none; } .project-finder.project-finder-disabled .project-search-results hr { display: none; } .project-finder .btn-tabs.btn-tabs-unstyled .btn-tab.btn-tab-unstyled { display: block; } .project-finder .btn-tabs.btn-tabs-unstyled .btn-tab.btn-tab-unstyled.btn-tab-map { background-image: url(../image/ui/icon-map-pin.svg); background-position: left center; background-repeat: no-repeat; background-size: auto 1em; } .project-finder .btn-tabs.btn-tabs-unstyled .btn-tab.btn-tab-unstyled.btn-tab-current { background-image: url(../image/ui/icon-arrow-right.svg); background-position: left center; background-repeat: no-repeat; background-size: auto 1em; } .project-finder .btn-tabs.btn-tabs-unstyled .btn-tab.btn-tab-unstyled.active { display: none; } .project-finder .tab-contents.tab-contents-unstyled { margin-top: 2em; } .SearchBoxWidget { overflow: hidden; } .SearchBoxWidget .search-box-container { width: calc(100% - 40em - 4em); float: left; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .SearchBoxWidget .search-box-container { width: 100%; } } .SearchBoxWidget .search-box-container h2.widget-title { white-space: nowrap; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .SearchBoxWidget .search-box-container h2.widget-title { white-space: normal; } } .SearchBoxWidget .search-box-container .input-container { margin-top: 2em; overflow: hidden; } .SearchBoxWidget .popular-keywords { width: 40em; margin-left: 4em; float: left; overflow: hidden; } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .SearchBoxWidget .popular-keywords { width: 100%; margin-top: 2em; margin-left: 0; } } .SearchBoxWidget .popular-keywords p { overflow: hidden; } .SearchBoxWidget .popular-keywords p .keyword { display: block; float: left; white-space: nowrap; color: #6d6e72; background-color: #dbdbdb; transition: color 0.25s, background-color 0.25s; } @media screen and (min-aspect-ratio: 35 / 40) { .SearchBoxWidget .popular-keywords p .keyword:hover { color: #ffffff; background-color: #6d6e72; } } /*note that the there are search result styles in _news.scss also*/ .keyword-search-result-items { /*.btn-search-result-item { .thumbnail { width: 20em; height: 15em; border-bottom: none; } .clickable-area { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } }*/ } .keyword-search-result-items .search-result-item:first-child, .keyword-search-result-items .search-result-item + .search-result-item { border-top: 1px solid #dbdbdb; } .keyword-search-result-items .search-result-item:last-child { border-bottom: 1px solid #dbdbdb; } /*see _component-standard-content.scss */ .StandardWidget.is-pre-useful-link-widget { width: calc(100% - 28em - 4em) !important; float: left; position: static !important; } @media screen and (max-width: 768px) { .StandardWidget.is-pre-useful-link-widget { width: calc(100% - 50em - 4em) !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .StandardWidget.is-pre-useful-link-widget { width: 100% !important; } .StandardWidget.is-pre-useful-link-widget .widget-content { padding: 0; } } .btn-tabs + hr { background-color: #dbdbdb; } .tab-contents { position: relative; } .btn-tabs + hr + .tab-contents { margin-top: 4em; } .tab-contents .tab-content { width: 100%; position: absolute; left: 0; top: 0; z-index: 0; } .tab-contents .tab-content.active { position: relative; overflow: hidden; z-index: 1; } .btn-tab:not(.btn-tab-unstyled) { display: block; position: relative; top: 0; float: left; background-repeat: no-repeat; box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.25); z-index: 1; transition: top 0.25s; } .btn-tab:not(.btn-tab-unstyled):not(.active) { z-index: 0; } .btn-tab:not(.btn-tab-unstyled):not(.active) .not-active-cover { opacity: 0.75; } .projects .btn-tab:not(.btn-tab-unstyled) { float: right; } .projects .btn-tab:not(.btn-tab-unstyled).btn-tab-map { background-image: url(../image/ui/project-tab-icon-map.png); } .projects .btn-tab:not(.btn-tab-unstyled).btn-tab-completed { background-image: url(../image/ui/project-tab-icon-completed.png); } .projects .btn-tab:not(.btn-tab-unstyled).btn-tab-current { background-image: url(../image/ui/project-tab-icon-current.png); } .projects .btn-tab:not(.btn-tab-unstyled).active { border-bottom-color: #ffffff; } @media screen and (min-aspect-ratio: 35 / 40) { .btn-tab:not(.btn-tab-unstyled):hover .not-active-cover { opacity: 0 !important; } } .btn-tab:not(.btn-tab-unstyled) .not-active-cover { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #cccccc; opacity: 0; transition: opacity 0.25s; } .btn-tabs { overflow: hidden; position: relative; top: 1px; z-index: 1; } .timeline { overflow: hidden; padding-top: 1em; margin-top: 2em; } .timeline .time { width: 100%; padding-bottom: 4em; position: relative; /*overflow: hidden;*/ float: left; } .timeline .time:last-child { padding-bottom: 0; } .timeline .time:last-child .horizontal-line { opacity: 0; transition: opacity 0.25s; } .timeline .time:last-child .time-copy { padding-bottom: 0; } .timeline .time.active .horizontal-line { border-color: #D0021B; } .timeline .time.active .time-copy .copy .bullet { border-color: #D0021B; } .timeline .time.click-opened-proxy .time-copy .copy .bullet.bullet-plus { opacity: 0; } .timeline .time.click-opened-proxy .time-copy .copy .bullet.bullet-minus { opacity: 1; } .timeline .time.click-opened-proxy .time-collapsible { overflow: visible; } .timeline .time.click-opened-proxy .horizontal-line { height: 100%; opacity: 1; } .timeline .time .horizontal-line { width: 2em; height: 100%; border-left: 2px solid #003c71; position: absolute; left: calc(13em + 2em); top: 1.5em; } @media screen and (max-width: 768px) { .timeline .time .horizontal-line { left: calc(26em + 2em); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .timeline .time .horizontal-line { left: calc(13em + 2em); } } .timeline .time .time-date { width: 13em; min-height: 1em; float: left; text-align: right; } @media screen and (max-width: 768px) { .timeline .time .time-date { width: 26em; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .timeline .time .time-date { width: 13em; } } .timeline .time .time-copy { width: calc(100% - 13em - 4em - 2px); padding-left: calc(4em + 2px); float: left; clear: right; position: relative; } @media screen and (max-width: 768px) { .timeline .time .time-copy { width: calc(100% - 26em - 4em - 2px); } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .timeline .time .time-copy { width: calc(100% - 13em - 4em - 2px); } } .timeline .time .time-copy .time-copy-content + .time-copy-content, .timeline .time .time-copy .time-copy-content + .time-collapsible .time-copy-content { margin-top: 2em; } .timeline .time .time-copy .copy { position: relative; } .timeline .time .time-copy .copy .bullet { width: 1em; height: 1em; border: 2px solid #003c71; border-radius: 50%; position: absolute; left: calc(-2em - 2px - 1em / 2 - 1px); top: 0; background-color: #ffffff; background-position: center; background-repeat: no-repeat; background-size: cover; transition: opacity 0.25s; } .timeline .time .time-copy .copy .bullet svg { width: 1.25em !important; height: 1.25em !important; position: absolute; left: calc(50% - 1.25em / 2); top: calc(50% - 1.25em / 2); } .timeline .time .time-copy .copy .bullet svg circle, .timeline .time .time-copy .copy .bullet svg ellipse, .timeline .time .time-copy .copy .bullet svg line, .timeline .time .time-copy .copy .bullet svg path, .timeline .time .time-copy .copy .bullet svg polygon, .timeline .time .time-copy .copy .bullet svg rect { fill: #ffffff !important; } .timeline .time .time-copy .copy .bullet.bullet-plus, .timeline .time .time-copy .copy .bullet.bullet-minus { width: 2em; height: 2em; border-color: transparent; background-color: #003c71; left: calc(-2em - 2px - 2em / 2 - 1px); } .timeline .time .time-copy .copy .bullet.bullet-plus { background-image: url(../image/ui/icon-plus.svg); opacity: 1; } .timeline .time .time-copy .copy .bullet.bullet-minus { background-image: url(../image/ui/icon-minus.svg); opacity: 0; } .timeline .time .time-copy .copy .description { margin-top: 2em; } .timeline .time .clickable-area { width: 100%; height: 2.6em; padding: 1em; position: absolute; left: 0; top: -1em; } .timeline .time.click-closing-proxy .time-collapsible, .timeline .time .time-collapsible { overflow: hidden; } /* also look at _quick-links.scss*/ .UsefulLinkWidget.is-post-standard-widget { width: 28em !important; position: static !important; float: right; } @media screen and (max-width: 768px) { .UsefulLinkWidget.is-post-standard-widget { width: 50em !important; } } @media screen and (max-aspect-ratio: 35 / 40) and (max-width: 640px) { .UsefulLinkWidget.is-post-standard-widget { width: 100% !important; margin-top: 4em; } } .UsefulLinkWidget.is-post-standard-widget .widget-content h2.widget-title .icon { width: 0.75em; height: 0.75em; display: inline-block; background-image: url(../image/ui/icon-chain-link.svg); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; } .UsefulLinkWidget.is-post-standard-widget .widget-content h2.widget-title .icon path { fill: #003c71; } .UsefulLinkWidget .widget-title + .copy { margin-top: 2em; } .UsefulLinkWidget .copy + .quick-links { margin-top: 2em; } .VideoHolder .active-video-and-playlist h3 + .video { margin-top: 2em; } .register-your-interest-container { position: fixed; right: 1em; top: 0.5em; z-index: 9; transition: top 0.25s; } .mini-header .register-your-interest-container, .is-scrolled .register-your-interest-container { top: calc(6em + 1em); } @media screen and (max-width: 1024px) { .register-your-interest-container { top: calc(11em + 1em) !important; } } .register-your-interest { padding: 0.5em 1em; border-radius: 1em; border-bottom: 3px solid #c27411; /*margin-top: -0.5em;*/ display: block; color: #ffffff; background-color: #ed9b33; transition: background-color 0.25s; } .register-your-interest:hover { background-color: #FCA332; }