@charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700"); @import url(https://fonts.googleapis.com/css?family=Poppins:400,300,700,500,600); @font-face { font-family: 'prominent'; src: url("/public/fonts/prominent.eot?65107362"); src: url("/public/fonts/prominent.eot?65107362#iefix") format("embedded-opentype"), url("/public/fonts/prominent.woff2?65107362") format("woff2"), url("/public/fonts/prominent.woff?65107362") format("woff"), url("/public/fonts/prominent.ttf?65107362") format("truetype"), url("/public/fonts/prominent.svg?65107362#prominent") format("svg"); font-weight: normal; font-style: normal; } /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ /* @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'prominent'; src: url('/public/fonts/prominent.svg?65107362#prominent') format('svg'); } } */ [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "prominent"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - margins should be symmetric */ /* remove if not needed */ margin-left: .2em; /* you can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Font smoothing. That was taken from TWBS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } .icon-menu:before { content: '\e800'; } /* '' */ .icon-left-open:before { content: '\e801'; } /* '' */ .icon-right-open:before { content: '\e802'; } /* '' */ .icon-angle-double-left:before { content: '\e803'; } /* '' */ .icon-angle-double-right:before { content: '\e804'; } /* '' */ .icon-play:before { content: '\e805'; } /* '' */ .icon-twitter:before { content: '\e806'; } /* '' */ .icon-youtube-squared:before { content: '\e807'; } /* '' */ .icon-youtube-play:before { content: '\e808'; } /* '' */ .icon-down-open-big:before { content: '\e809'; } /* '' */ .icon-left-open-big:before { content: '\e80a'; } /* '' */ .icon-right-open-big:before { content: '\e80b'; } /* '' */ .icon-up-open-big:before { content: '\e80c'; } /* '' */ .icon-plus:before { content: '\e80d'; } /* '' */ .icon-search:before { content: '\e80e'; } /* '' */ .icon-mail:before { content: '\e80f'; } /* '' */ .icon-gplus:before { content: '\e810'; } /* '' */ .icon-pinterest:before { content: '\e811'; } /* '' */ .icon-facebook:before { content: '\e812'; } /* '' */ .icon-facebook-rect:before { content: '\e813'; } /* '' */ .icon-twitter-bird:before { content: '\e814'; } /* '' */ .icon-vimeo-rect:before { content: '\e815'; } /* '' */ .icon-googleplus-rect:before { content: '\e816'; } /* '' */ .icon-linkedin-rect:before { content: '\e817'; } /* '' */ .icon-instagram-filled:before { content: '\e818'; } /* '' */ .icon-phone-2:before { content: '\e819'; } /* '' */ .icon-cancel:before { content: '\e81a'; } /* '' */ .icon-twitter-circled:before { content: '\e81b'; } /* '' */ .icon-linkedin-circled:before { content: '\e81c'; } /* '' */ .icon-pause-1:before { content: '\e81e'; } /* '' */ .icon-volume-off:before { content: '\e81f'; } /* '' */ .icon-volume-up:before { content: '\e820'; } /* '' */ .icon-pinterest-circled:before { content: '\f313'; } /* '' */ @font-face { font-family: 'lg'; src: url("../fonts/lg-fonts/lg.eot?n1z373"); src: url("../fonts/lg-fonts/lg.eot?#iefixn1z373") format("embedded-opentype"), url("../fonts/lg-fonts/lg.woff?n1z373") format("woff"), url("../fonts/lg-fonts/lg.ttf?n1z373") format("truetype"), url("../fonts/lg-fonts/lg.svg?n1z373#lg") format("svg"); font-weight: normal; font-style: normal; } .lg-icon { font-family: 'lg'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .lg-actions .lg-next, .lg-actions .lg-prev { background-color: rgba(0, 0, 0, 0.45); border-radius: 2px; color: #999; cursor: pointer; display: block; font-size: 22px; margin-top: -10px; padding: 8px 10px 9px; position: absolute; top: 50%; z-index: 1080; border: none; outline: none; } .lg-actions .lg-next.disabled, .lg-actions .lg-prev.disabled { pointer-events: none; opacity: 0.5; } .lg-actions .lg-next:hover, .lg-actions .lg-prev:hover { color: #FFF; } .lg-actions .lg-next { right: 20px; } .lg-actions .lg-next:before { content: "\e095"; } .lg-actions .lg-prev { left: 20px; } .lg-actions .lg-prev:after { content: "\e094"; } @-webkit-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-moz-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-ms-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-webkit-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @-moz-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @-ms-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } .lg-outer.lg-right-end .lg-object { -webkit-animation: lg-right-end 0.3s; -o-animation: lg-right-end 0.3s; animation: lg-right-end 0.3s; position: relative; } .lg-outer.lg-left-end .lg-object { -webkit-animation: lg-left-end 0.3s; -o-animation: lg-left-end 0.3s; animation: lg-left-end 0.3s; position: relative; } .lg-toolbar { z-index: 1082; left: 0; position: absolute; top: 0; width: 100%; background-color: rgba(0, 0, 0, 0.45); } .lg-toolbar .lg-icon { color: #999; cursor: pointer; float: right; font-size: 24px; height: 47px; line-height: 27px; padding: 10px 0; text-align: center; width: 50px; text-decoration: none !important; outline: medium none; -webkit-transition: color 0.2s linear; -o-transition: color 0.2s linear; transition: color 0.2s linear; } .lg-toolbar .lg-icon:hover { color: #FFF; } .lg-toolbar .lg-close:after { content: "\e070"; } .lg-toolbar .lg-download:after { content: "\e0f2"; } .lg-sub-html { background-color: rgba(0, 0, 0, 0.45); bottom: 0; color: #EEE; font-size: 16px; left: 0; padding: 10px 40px; position: fixed; right: 0; text-align: center; z-index: 1080; } .lg-sub-html h4 { margin: 0; font-size: 13px; font-weight: bold; } .lg-sub-html p { font-size: 12px; margin: 5px 0 0; } #lg-counter { color: #999; display: inline-block; font-size: 16px; padding-left: 20px; padding-top: 12px; vertical-align: middle; } .lg-toolbar, .lg-prev, .lg-next { opacity: 1; -webkit-transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; -moz-transition: -moz-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; -o-transition: -o-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; } .lg-hide-items .lg-prev { opacity: 0; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } .lg-hide-items .lg-next { opacity: 0; -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } .lg-hide-items .lg-toolbar { opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object { -webkit-transform: scale3d(0.5, 0.5, 0.5); transform: scale3d(0.5, 0.5, 0.5); opacity: 0; -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } .lg-outer .lg-thumb-outer { background-color: #0D0A0A; bottom: 0; position: absolute; width: 100%; z-index: 1080; max-height: 350px; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item { cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } .lg-outer .lg-thumb-outer.lg-dragging .lg-thumb { -webkit-transition-duration: 0s !important; transition-duration: 0s !important; } .lg-outer.lg-thumb-open .lg-thumb-outer { -webkit-transform: translate3d(0, 0%, 0); transform: translate3d(0, 0%, 0); } .lg-outer .lg-thumb { padding: 10px 0; height: 100%; margin-bottom: -5px; } .lg-outer .lg-thumb-item { border-radius: 5px; cursor: pointer; float: left; overflow: hidden; height: 100%; border: 2px solid #FFF; border-radius: 4px; margin-bottom: 5px; } @media (min-width: 1025px) { .lg-outer .lg-thumb-item { -webkit-transition: border-color 0.25s ease; -o-transition: border-color 0.25s ease; transition: border-color 0.25s ease; } } .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover { border-color: #a90707; } .lg-outer .lg-thumb-item img { width: 100%; height: 100%; object-fit: cover; } .lg-outer.lg-has-thumb .lg-item { padding-bottom: 120px; } .lg-outer.lg-can-toggle .lg-item { padding-bottom: 0; } .lg-outer.lg-pull-caption-up .lg-sub-html { -webkit-transition: bottom 0.25s ease; -o-transition: bottom 0.25s ease; transition: bottom 0.25s ease; } .lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html { bottom: 100px; } .lg-outer .lg-toogle-thumb { background-color: #0D0A0A; border-radius: 2px 2px 0 0; color: #999; cursor: pointer; font-size: 24px; height: 39px; line-height: 27px; padding: 5px 0; position: absolute; right: 20px; text-align: center; top: -39px; width: 50px; } .lg-outer .lg-toogle-thumb:after { content: "\e1ff"; } .lg-outer .lg-toogle-thumb:hover { color: #FFF; } .lg-outer .lg-video-cont { display: inline-block; vertical-align: middle; max-width: 1140px; max-height: 100%; width: 100%; padding: 0 5px; } .lg-outer .lg-video { width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative; } .lg-outer .lg-video .lg-object { display: inline-block; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .lg-outer .lg-video .lg-video-play { width: 84px; height: 59px; position: absolute; left: 50%; top: 50%; margin-left: -42px; margin-top: -30px; z-index: 1080; cursor: pointer; } .lg-outer .lg-has-iframe .lg-video { -webkit-overflow-scrolling: touch; overflow: auto; } .lg-outer .lg-has-vimeo .lg-video-play { background: url("../images/lg-images/vimeo-play.png") no-repeat scroll 0 0 transparent; } .lg-outer .lg-has-vimeo:hover .lg-video-play { background: url("../images/lg-images/vimeo-play.png") no-repeat scroll 0 -58px transparent; } .lg-outer .lg-has-html5 .lg-video-play { background: transparent url("../images/lg-images/video-play.png") no-repeat scroll 0 0; height: 64px; margin-left: -32px; margin-top: -32px; width: 64px; opacity: 0.8; } .lg-outer .lg-has-html5:hover .lg-video-play { opacity: 1; } .lg-outer .lg-has-youtube .lg-video-play { background: url("../images/lg-images/youtube-play.png") no-repeat scroll 0 0 transparent; } .lg-outer .lg-has-youtube:hover .lg-video-play { background: url("../images/lg-images/youtube-play.png") no-repeat scroll 0 -60px transparent; } .lg-outer .lg-video-object { width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; } .lg-outer .lg-has-video .lg-video-object { visibility: hidden; } .lg-outer .lg-has-video.lg-video-playing .lg-object, .lg-outer .lg-has-video.lg-video-playing .lg-video-play { display: none; } .lg-outer .lg-has-video.lg-video-playing .lg-video-object { visibility: visible; } .lg-progress-bar { background-color: #333; height: 5px; left: 0; position: absolute; top: 0; width: 100%; z-index: 1083; opacity: 0; -webkit-transition: opacity 0.08s ease 0s; -moz-transition: opacity 0.08s ease 0s; -o-transition: opacity 0.08s ease 0s; transition: opacity 0.08s ease 0s; } .lg-progress-bar .lg-progress { background-color: #a90707; height: 5px; width: 0; } .lg-progress-bar.lg-start .lg-progress { width: 100%; } .lg-show-autoplay .lg-progress-bar { opacity: 1; } .lg-autoplay-button:after { content: "\e01d"; } .lg-show-autoplay .lg-autoplay-button:after { content: "\e01a"; } .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap, .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image { -webkit-transition-duration: 0s; transition-duration: 0s; } .lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap { -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer.lg-use-left-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap { -webkit-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -moz-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -o-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } #lg-zoom-in:after { content: "\e311"; } #lg-actual-size { font-size: 20px; } #lg-actual-size:after { content: "\e033"; } #lg-zoom-out { opacity: 0.5; pointer-events: none; } #lg-zoom-out:after { content: "\e312"; } .lg-zoomed #lg-zoom-out { opacity: 1; pointer-events: auto; } .lg-outer .lg-pager-outer { bottom: 60px; left: 0; position: absolute; right: 0; text-align: center; z-index: 1080; height: 10px; } .lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont { overflow: visible; } .lg-outer .lg-pager-cont { cursor: pointer; display: inline-block; overflow: hidden; position: relative; vertical-align: top; margin: 0 5px; } .lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .lg-outer .lg-pager-cont.lg-pager-active .lg-pager { box-shadow: 0 0 0 2px white inset; } .lg-outer .lg-pager-thumb-cont { background-color: #fff; color: #FFF; bottom: 100%; height: 83px; left: 0; margin-bottom: 20px; margin-left: -60px; opacity: 0; padding: 5px; position: absolute; width: 120px; border-radius: 3px; -webkit-transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s; -moz-transition: opacity 0.15s ease 0s, -moz-transform 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s, -o-transform 0.15s ease 0s; transition: opacity 0.15s ease 0s, transform 0.15s ease 0s; -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } .lg-outer .lg-pager-thumb-cont img { width: 100%; height: 100%; } .lg-outer .lg-pager { background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset; display: block; height: 12px; -webkit-transition: box-shadow 0.3s ease 0s; -o-transition: box-shadow 0.3s ease 0s; transition: box-shadow 0.3s ease 0s; width: 12px; } .lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus { box-shadow: 0 0 0 8px white inset; } .lg-outer .lg-caret { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px dashed; bottom: -10px; display: inline-block; height: 0; left: 50%; margin-left: -5px; position: absolute; vertical-align: middle; width: 0; } .lg-fullscreen:after { content: "\e20c"; } .lg-fullscreen-on .lg-fullscreen:after { content: "\e20d"; } .lg-outer #lg-dropdown-overlay { background-color: rgba(0, 0, 0, 0.25); bottom: 0; cursor: default; left: 0; position: fixed; right: 0; top: 0; z-index: 1081; opacity: 0; visibility: hidden; -webkit-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s; -o-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s; transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s; } .lg-outer.lg-dropdown-active .lg-dropdown, .lg-outer.lg-dropdown-active #lg-dropdown-overlay { -webkit-transition-delay: 0s; transition-delay: 0s; -moz-transform: translate3d(0, 0px, 0); -o-transform: translate3d(0, 0px, 0); -ms-transform: translate3d(0, 0px, 0); -webkit-transform: translate3d(0, 0px, 0); transform: translate3d(0, 0px, 0); opacity: 1; visibility: visible; } .lg-outer.lg-dropdown-active #lg-share { color: #FFF; } .lg-outer .lg-dropdown { background-color: #fff; border-radius: 2px; font-size: 14px; list-style-type: none; margin: 0; padding: 10px 0; position: absolute; right: 0; text-align: left; top: 50px; opacity: 0; visibility: hidden; -moz-transform: translate3d(0, 5px, 0); -o-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); -webkit-transition: -webkit-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; -moz-transition: -moz-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; -o-transition: -o-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; } .lg-outer .lg-dropdown:after { content: ""; display: block; height: 0; width: 0; position: absolute; border: 8px solid transparent; border-bottom-color: #FFF; right: 16px; top: -16px; } .lg-outer .lg-dropdown > li:last-child { margin-bottom: 0px; } .lg-outer .lg-dropdown > li:hover a, .lg-outer .lg-dropdown > li:hover .lg-icon { color: #333; } .lg-outer .lg-dropdown a { color: #333; display: block; white-space: pre; padding: 4px 12px; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; } .lg-outer .lg-dropdown a:hover { background-color: rgba(0, 0, 0, 0.07); } .lg-outer .lg-dropdown .lg-dropdown-text { display: inline-block; line-height: 1; margin-top: -3px; vertical-align: middle; } .lg-outer .lg-dropdown .lg-icon { color: #333; display: inline-block; float: none; font-size: 20px; height: auto; line-height: 1; margin-right: 8px; padding: 0; vertical-align: middle; width: auto; } .lg-outer #lg-share { position: relative; } .lg-outer #lg-share:after { content: "\e80d"; } .lg-outer #lg-share-facebook .lg-icon { color: #3b5998; } .lg-outer #lg-share-facebook .lg-icon:after { content: "\e901"; } .lg-outer #lg-share-twitter .lg-icon { color: #00aced; } .lg-outer #lg-share-twitter .lg-icon:after { content: "\e904"; } .lg-outer #lg-share-googleplus .lg-icon { color: #dd4b39; } .lg-outer #lg-share-googleplus .lg-icon:after { content: "\e902"; } .lg-outer #lg-share-pinterest .lg-icon { color: #cb2027; } .lg-outer #lg-share-pinterest .lg-icon:after { content: "\e903"; } .lg-group:after { content: ""; display: table; clear: both; } .lg-outer { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1050; text-align: left; opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-outer * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .lg-outer.lg-visible { opacity: 1; } .lg-outer.lg-css3 .lg-item.lg-prev-slide, .lg-outer.lg-css3 .lg-item.lg-next-slide, .lg-outer.lg-css3 .lg-item.lg-current { -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } .lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current { -webkit-transition-duration: 0s !important; transition-duration: 0s !important; opacity: 1; } .lg-outer.lg-grab img.lg-object { cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lg-outer.lg-grabbing img.lg-object { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } .lg-outer .lg { height: 100%; width: 100%; position: relative; overflow: hidden; margin-left: auto; margin-right: auto; max-width: 100%; max-height: 100%; } .lg-outer .lg-inner { width: 100%; height: 100%; position: absolute; left: 0; top: 0; white-space: nowrap; } .lg-outer .lg-item { background: url("../images/lg-images/loading.gif") no-repeat scroll center center transparent; display: none !important; } .lg-outer.lg-css3 .lg-prev-slide, .lg-outer.lg-css3 .lg-current, .lg-outer.lg-css3 .lg-next-slide { display: inline-block !important; } .lg-outer.lg-css .lg-current { display: inline-block !important; } .lg-outer .lg-item, .lg-outer .lg-img-wrap { display: inline-block; text-align: center; position: absolute; width: 100%; height: 100%; } .lg-outer .lg-item:before, .lg-outer .lg-img-wrap:before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px; } .lg-outer .lg-img-wrap { position: absolute; padding: 0 5px; left: 0; right: 0; top: 0; bottom: 0; } .lg-outer .lg-item.lg-complete { background-image: none; } .lg-outer .lg-item.lg-current { z-index: 1060; } .lg-outer .lg-image { display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; } .lg-outer.lg-show-after-load .lg-item .lg-object, .lg-outer.lg-show-after-load .lg-item .lg-video-play { opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object, .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play { opacity: 1; } .lg-outer .lg-empty-html { display: none; } .lg-outer.lg-hide-download #lg-download { display: none; } .lg-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1040; background-color: #000; opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-backdrop.in { opacity: 0.5; } .lg-css3.lg-no-trans .lg-prev-slide, .lg-css3.lg-no-trans .lg-next-slide, .lg-css3.lg-no-trans .lg-current { -webkit-transition: none 0s ease 0s !important; -moz-transition: none 0s ease 0s !important; -o-transition: none 0s ease 0s !important; transition: none 0s ease 0s !important; } .lg-css3.lg-use-css3 .lg-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-css3.lg-use-left .lg-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-css3.lg-fade .lg-item { opacity: 0; } .lg-css3.lg-fade .lg-item.lg-current { opacity: 1; } .lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current { -webkit-transition: opacity 0.1s ease 0s; -moz-transition: opacity 0.1s ease 0s; -o-transition: opacity 0.1s ease 0s; transition: opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-css3 .lg-item { opacity: 0; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-left .lg-item { opacity: 0; position: absolute; left: 0; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide { left: -100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide { left: 100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { left: 0; opacity: 1; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { -webkit-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -moz-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -o-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } .lg-toolbar { top: 100px; } /*brandweer rood*/ /* blauw */ html { height: 100%; } body { position: relative; height: 100%; font-family: 'Poppins', sans-serif; font-weight: 300; line-height: 1.5em; background-color: #F1F1EE; } a { text-decoration: none; color: #1D1B1B; } a:hover { color: #CD1719; } .white-text { color: white; } ul, li { list-style: none; margin: 0; padding: 0; } .heading-base, h1, .h1, h2, .h2, h3, .h3, h4, h5, .h3 .h4, .h5 { font-size: 1.5em; font-size: 1.2em; font-weight: 600; text-transform: uppercase; margin: 0; padding: 0; line-height: 1em; } h1, .h1 { color: #CD1719; line-height: 1em; font-weight: bold; } h3, .h3 { font-size: 1.0em; } .title { color: #CD1719; line-height: 1em; font-weight: bold; font-size: 2em; margin-bottom: 1em; } p { margin: 0; padding-bottom: 2em; } em { font-style: italic; } hr { height: 1px; border: none; color: white; background-color: white; } /* FORMS */ input { border-radius: 0; border: 0; padding: 5px 15px; } input[type=submit] { background-color: #CD1719; } input[type=text], input[type=email] { color: #1D1B1B; } button[type=submit] { border-radius: 0; border: 0; padding: 5px 15px; background-color: #CD1719; color: white; } .hide { display: none !important; } .content-area { padding: 70px 0; } .content-area + .content-area { padding-top: 0 !important; } .content { line-height: 1.5em; } .content ul li { list-style-type: square; list-style-position: outside; margin-left: 1em; } .content a { color: #CD1719; } .content table td { border: 1px solid #CFCFCF; padding: 5px; } .summary { font-weight: bold; } .bold { font-weight: bold; } .upper { text-transform: uppercase; } .data, .contact-meta { font-size: 0.9em; } @media (max-width: 400px) { .container { padding-left: 10px; padding-right: 10px; } } .row::after { clear: both; content: ""; display: table; } .container { max-width: 1000px; margin: 0 auto; position: relative; } .container::after { clear: both; content: ""; display: table; } .column { position: relative; margin-top: 1.5%; } .large-3 { width: 23.33333%; float: left; margin-left: 0.83333%; margin-right: 0.83333%; } .large-4 { width: 31.66667%; float: left; margin-left: 0.83333%; margin-right: 0.83333%; } .large-6 { width: 48.33333%; float: left; margin-left: 0.83333%; margin-right: 0.83333%; } .large-8 { width: 65%; float: left; margin-left: 0.83333%; margin-right: 0.83333%; } .large-9 { width: 73.33333%; float: left; margin-left: 0.83333%; margin-right: 0.83333%; } .large-12 { width: 98.33333%; float: left; margin-left: 0.83333%; margin-right: 0.83333%; } img { width: 100%; height: auto; } /* FORMS */ input { border-radius: 0; border: 0; padding: 5px 15px; } input[type=submit] { background-color: #CD1719; } input[type=text], input[type=email] { color: #1D1B1B; } button[type=submit] { border-radius: 0; border: 0; padding: 5px 15px; background-color: #CD1719; color: white; } .Inputfield { padding: 10px 0; } .InputfieldContent ul li { display: inline-block; list-style: none; margin: 0 1.5em 0 0; } .InputfieldContent ul li .pw-no-select { margin-left: 0.5em; } .InputfieldHeader { font-weight: bold; } .menu { width: 100%; z-index: 1000; background-color: white; } .menu .menu-header { display: flex; height: 50px; justify-content: space-between; padding: 5px; } .menu .menu-header .menu-header-logo { width: 100px; } .menu ul { display: block; padding: 0; margin: 0; } .menu ul li { position: relative; display: block; border-bottom: 1px solid #CD1719; } .menu ul li a { position: relative; display: block; padding: .8em 1em; font-weight: 300; } .menu ul li a i { position: absolute; transition: all .3s ease; display: inline-block; right: 4px; top: 0; display: flex; align-items: center; height: 100%; } .menu ul li.active > a, .menu ul li:hover > a, .menu ul li.open > a { font-weight: bold; } .menu ul li.active > a i, .menu ul li:hover > a i, .menu ul li.open > a i { transform: rotate(90deg); } .menu ul li:last-child { border: none; } .menu ul li.has-children a { padding-right: 2em; } .menu > ul > li { display: block; } .menu > ul > li > a::after { display: block; content: attr(title); font-weight: bold; height: 1px; color: transparent; overflow: hidden; visibility: hidden; } .menu > ul > li.open > ul { display: block; } .menu > ul > li > ul { display: none; } .menu > ul > li > ul > li { border: none; } .menu > ul > li > ul > li a { margin-left: 30px; } .menu > ul > li > ul > li > ul > li { border: none; } .menu > ul > li > ul > li > ul > li > a { margin-left: 30px; } @media screen and (min-width: 700px) { .menu ul { background-color: white; } .menu ul li { display: inline-block; border: none; } .menu ul li a { display: inline-block; text-align: center; margin: 0; color: #CD1719; } .menu > ul { display: inline-block; } .menu > ul > li a { color: #1D1B1B; } .menu > ul > li a:hover { color: #CD1719; } .menu > ul > li > ul { transition: all .3s ease; position: absolute; opacity: 0; display: none; z-index: 10; } .menu > ul > li > ul > li { display: block; } .menu > ul > li > ul > li > a { margin-left: 0; white-space: nowrap; } .menu > ul > li > ul > li > a:hover { font-weight: 300; } .menu > ul > li:hover > ul { display: block; opacity: 1; } } #language-menu { box-sizing: border-box; } #language-menu a { display: inline-block; padding: 10px 20px; width: 100%; } #language-menu > ul > li { display: block; width: 100%; position: relative; cursor: pointer; } #language-menu > ul > li > ul { display: none; position: absolute; right: 0; background-color: white; } #language-menu > ul > li:hover > ul { display: inline-block; } .topbar { transition: all .3s ease; position: fixed; display: flex; flex-direction: row; z-index: 9990; background-color: white; width: 100%; } .topbar .logo-wrapper { position: absolute; flex: 1 1 200px; top: 0; left: 10px; right: 0; width: 200px; margin-right: auto; margin-left: auto; } .topbar .menus-wrapper { display: flex; flex: 1 1 100%; justify-content: space-between; flex-direction: row; flex-wrap: no-wrap; } .topbar .menus-wrapper .search { display: none; } .topbar .menus-wrapper .search .search-icon { display: inline-block; background-image: url(/public/images/magnify.png); background-repeat: no-repeat; background-size: contain; width: 20px; height: 20px; } .topbar .menus-wrapper .search form { padding: 0; } .topbar .menus-wrapper #language-menu { flex: 0 0 70px; z-index: 2000; } .topbar .menus-wrapper #language-menu a { color: #808080; } .topbar .menus-wrapper #language-menu a:hover { color: #CD1719; } .topbar .menus-wrapper #language-menu span { display: inline-block; } .topbar .menus-wrapper #language-menu i { display: inline-block; } .topbar .menus-wrapper .menu { position: fixed; display: block; width: 80%; flex: 0 0 60px; transition: all .3s ease; transform: translateX(-100%); } .topbar .menus-wrapper .menu.open { transform: translateX(0); } .topbar .menus-wrapper .mobile-menu-open { display: flex; align-items: center; } .topbar .menus-wrapper .mobile-menu-close { display: flex; align-items: center; } .topbar.scrolled .logo-wrapper .logo-vaandel { transform: translateY(-50%); opacity: 0; } .topbar.scrolled .logo-wrapper .logo-payoff { display: none; } .topbar.scrolled .logo-wrapper .logo-brand { top: 0; transform: scale(0.8, 0.8); } .testing { max-width: 200px; } .logo { position: relative; display: block; width: 100%; padding-bottom: 110%; } .logo .logo-vaandel { transition: all .3s ease; position: absolute; width: 100%; height: 100%; background-image: url(/public/images/icons/vaandel.png); background-repeat: no-repeat; background-size: contain; } .logo .logo-brand { transition: all .3s ease; position: absolute; display: inline-block; top: 50%; left: 8%; width: 70%; } .logo .logo-payoff { transition: all .3s ease; position: absolute; display: inline-block; top: 75%; left: 22%; width: 40%; } @media screen and (min-width: 700px) { .topbar .logo-wrapper { position: relative; flex: 0 0 200px; } .topbar .logo-wrapper .logo { position: absolute; } .topbar .menus-wrapper { display: flex; flex-direction: row; flex: 1 1 auto; flex-wrap: wrap; justify-content: center; } .topbar .menus-wrapper .search { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; flex: 1 1 auto; } .topbar .menus-wrapper .search input[type=text] { text-align: right; } .topbar .menus-wrapper .mobile-menu-open { display: none; } .topbar .menus-wrapper .mobile-menu-close { display: none; } .topbar .menus-wrapper .menu { display: flex; transform: translateX(0); justify-content: flex-end; position: relative; flex: 1 1 100%; } .topbar .menus-wrapper .menu .menu-header { display: none; } .topbar.scrolled { margin-top: -50px; } .topbar.scrolled .logo-wrapper .logo-brand { top: 23%; } } .footer { position: relative; padding: 70px 0; background-color: #233b4d; color: white; font-size: 0.9em; font-size: 0.8em; line-height: 1.3em; } .footer .copyright a { color: inherit; } .logo-door { width: 30%; float: left; margin-left: 1.66667%; margin-right: 1.66667%; } .text-door { width: 63.33333%; float: left; margin-left: 1.66667%; margin-right: 1.66667%; } form { padding: 5px 0 20px 0; } .footer_logoos::after { clear: both; content: ""; display: table; } .footer_logoos li { width: 16%; float: left; margin-left: 2%; margin-right: 2%; } .footer_logoos li.span-2 { width: 36%; float: left; margin-left: 2%; margin-right: 2%; } .footer_logoos li a { display: inline-block; height: 100px; width: 100%; background-size: contain; background-repeat: no-repeat; background-position: bottom left; } .part-four { position: relative; min-height: 100px; padding-top: 10px; } .part-four p { font-size: 1.1em; } .part-four a { color: white; } .part-four a:hover { text-decoration: underline; } .part-four .copyright { display: block; position: absolute; bottom: 5px; } /*.copyright { display: inline-block; width: 100%; text-align: right; vertical-align: middle; &:before{ content: ""; display: inline-block; vertical-align: bottom; height: 100%; } }*/ @media (max-width: 700px) { .footer .large-6 { width: 98.33333%; float: left; margin-left: 0.83333%; margin-right: 0.83333%; } } .spacer { height: 50px; } .shares { border-top: 1px solid #808080; } .shares .shares-title { font-size: 16px; margin: 15px auto; text-align: center; text-transform: capitalize !important; font-weight: 300; } .shares .MarkupSocialShareButtons { display: flex; max-width: 320px; justify-content: space-between; margin: 15px auto; } .shares .MarkupSocialShareButtons .mssb-item { margin: 0 10px; } .shares .MarkupSocialShareButtons .mssb-item a { background-color: #808080; color: white; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .shares .MarkupSocialShareButtons .mssb-item a i { font-size: 15px; } .shares .MarkupSocialShareButtons .mssb-item a:hover { background-color: #CD1719; } /* normalize.css v3.0.2 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; padding: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1, .h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } body.compensate-for-scrollbar { overflow: hidden; } .fancybox-active { height: auto; } .fancybox-is-hidden { left: -9999px; margin: 0; position: absolute !important; top: -9999px; visibility: hidden; } .fancybox-container { -webkit-backface-visibility: hidden; backface-visibility: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; height: 100%; left: 0; position: fixed; -webkit-tap-highlight-color: transparent; top: 0; -webkit-transform: translateZ(0); transform: translateZ(0); width: 100%; z-index: 99992; } .fancybox-container * { box-sizing: border-box; } .fancybox-outer, .fancybox-inner, .fancybox-bg, .fancybox-stage { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .fancybox-outer { -webkit-overflow-scrolling: touch; overflow-y: auto; } .fancybox-bg { background: #1e1e1e; opacity: 0; transition-duration: inherit; transition-property: opacity; transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71); } .fancybox-is-open .fancybox-bg { opacity: .87; transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } .fancybox-infobar, .fancybox-toolbar, .fancybox-caption, .fancybox-navigation .fancybox-button { direction: ltr; opacity: 0; position: absolute; transition: opacity .25s, visibility 0s linear .25s; visibility: hidden; z-index: 99997; } .fancybox-show-infobar .fancybox-infobar, .fancybox-show-toolbar .fancybox-toolbar, .fancybox-show-caption .fancybox-caption, .fancybox-show-nav .fancybox-navigation .fancybox-button { opacity: 1; transition: opacity .25s, visibility 0s; visibility: visible; } .fancybox-infobar { color: #ccc; font-size: 13px; -webkit-font-smoothing: subpixel-antialiased; height: 44px; left: 0; line-height: 44px; min-width: 44px; mix-blend-mode: difference; padding: 0 10px; pointer-events: none; text-align: center; top: 0; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .fancybox-toolbar { right: 0; top: 0; } .fancybox-stage { direction: ltr; overflow: visible; -webkit-transform: translate3d(0, 0, 0); z-index: 99994; } .fancybox-is-open .fancybox-stage { overflow: hidden; } .fancybox-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: none; height: 100%; left: 0; outline: none; overflow: auto; -webkit-overflow-scrolling: touch; padding: 44px; position: absolute; text-align: center; top: 0; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; white-space: normal; width: 100%; z-index: 99994; } .fancybox-slide::before { content: ''; display: inline-block; height: 100%; margin-right: -.25em; vertical-align: middle; width: 0; } .fancybox-is-sliding .fancybox-slide, .fancybox-slide--previous, .fancybox-slide--current, .fancybox-slide--next { display: block; } .fancybox-slide--next { z-index: 99995; } .fancybox-slide--image { overflow: visible; padding: 44px 0; } .fancybox-slide--image::before { display: none; } .fancybox-slide--html { padding: 6px 6px 0 6px; } .fancybox-slide--iframe { padding: 44px 44px 0; } .fancybox-content { background: #fff; display: inline-block; margin: 0 0 6px 0; max-width: 100%; overflow: auto; padding: 0; padding: 24px; position: relative; text-align: left; vertical-align: middle; } .fancybox-slide--image .fancybox-content { -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1); animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; background: transparent; background-repeat: no-repeat; background-size: 100% 100%; left: 0; margin: 0; max-width: none; overflow: visible; padding: 0; position: absolute; top: 0; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 99995; } .fancybox-can-zoomOut .fancybox-content { cursor: -webkit-zoom-out; cursor: zoom-out; } .fancybox-can-zoomIn .fancybox-content { cursor: -webkit-zoom-in; cursor: zoom-in; } .fancybox-can-drag .fancybox-content { cursor: -webkit-grab; cursor: grab; } .fancybox-is-dragging .fancybox-content { cursor: -webkit-grabbing; cursor: grabbing; } .fancybox-container [data-selectable='true'] { cursor: text; } .fancybox-image, .fancybox-spaceball { background: transparent; border: 0; height: 100%; left: 0; margin: 0; max-height: none; max-width: none; padding: 0; position: absolute; top: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; } .fancybox-spaceball { z-index: 1; } .fancybox-slide--html .fancybox-content { margin-bottom: 6px; } .fancybox-slide--video .fancybox-content, .fancybox-slide--map .fancybox-content, .fancybox-slide--iframe .fancybox-content { height: 100%; margin: 0; overflow: visible; padding: 0; width: 100%; } .fancybox-slide--video .fancybox-content { background: #000; } .fancybox-slide--map .fancybox-content { background: #e5e3df; } .fancybox-slide--iframe .fancybox-content { background: #fff; height: calc(100% - 44px); margin-bottom: 44px; } .fancybox-video, .fancybox-iframe { background: transparent; border: 0; height: 100%; margin: 0; overflow: hidden; padding: 0; width: 100%; } .fancybox-iframe { vertical-align: top; } .fancybox-error { background: #fff; cursor: default; max-width: 400px; padding: 40px; width: 100%; } .fancybox-error p { color: #444; font-size: 16px; line-height: 20px; margin: 0; padding: 0; } /* Buttons */ .fancybox-button { background: rgba(30, 30, 30, 0.6); border: 0; border-radius: 0; cursor: pointer; display: inline-block; height: 44px; margin: 0; outline: none; padding: 10px; transition: color .2s; vertical-align: top; width: 44px; } .fancybox-button, .fancybox-button:visited, .fancybox-button:link { color: #ccc; } .fancybox-button:focus, .fancybox-button:hover { color: #fff; } .fancybox-button.disabled, .fancybox-button.disabled:hover, .fancybox-button[disabled], .fancybox-button[disabled]:hover { color: #888; cursor: default; } .fancybox-button svg { display: block; overflow: visible; position: relative; shape-rendering: geometricPrecision; } .fancybox-button svg path { fill: transparent; stroke: currentColor; stroke-linejoin: round; stroke-width: 3; } .fancybox-button--play svg path:nth-child(2) { display: none; } .fancybox-button--pause svg path:nth-child(1) { display: none; } .fancybox-button--play svg path, .fancybox-button--share svg path, .fancybox-button--thumbs svg path { fill: currentColor; } .fancybox-button--share svg path { stroke-width: 1; } /* Navigation arrows */ .fancybox-navigation .fancybox-button { height: 38px; opacity: 0; padding: 6px; position: absolute; top: 50%; width: 38px; } .fancybox-show-nav .fancybox-navigation .fancybox-button { transition: opacity .25s, visibility 0s, color .25s; } .fancybox-navigation .fancybox-button::after { content: ''; left: -25px; padding: 50px; position: absolute; top: -25px; } .fancybox-navigation .fancybox-button--arrow_left { left: 6px; } .fancybox-navigation .fancybox-button--arrow_right { right: 6px; } /* Close button on the top right corner of html content */ .fancybox-close-small { background: transparent; border: 0; border-radius: 0; color: #555; cursor: pointer; height: 44px; margin: 0; padding: 6px; position: absolute; right: 0; top: 0; width: 44px; z-index: 10; } .fancybox-close-small svg { fill: transparent; opacity: .8; stroke: currentColor; stroke-width: 1.5; transition: stroke .1s; } .fancybox-close-small:focus { outline: none; } .fancybox-close-small:hover svg { opacity: 1; } .fancybox-slide--image .fancybox-close-small, .fancybox-slide--video .fancybox-close-small, .fancybox-slide--iframe .fancybox-close-small { color: #ccc; padding: 5px; right: -12px; top: -44px; } .fancybox-slide--image .fancybox-close-small:hover svg, .fancybox-slide--video .fancybox-close-small:hover svg, .fancybox-slide--iframe .fancybox-close-small:hover svg { background: transparent; color: #fff; } .fancybox-is-scaling .fancybox-close-small, .fancybox-is-zoomable.fancybox-can-drag .fancybox-close-small { display: none; } /* Caption */ .fancybox-caption { bottom: 0; color: #fff; font-size: 14px; font-weight: 400; left: 0; line-height: 1.5; padding: 25px 44px 25px 44px; right: 0; } .fancybox-caption::before { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEtCAQAAABjBcL7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHRJREFUKM+Vk8EOgDAIQ0vj/3+xBw8qIZZueFnIKC90MCAI8DlrkHGeqqGIU6lVigrBtpCWqeRWoHDNqs0F7VNVBVxmHRlvoVqjaYkdnDIaivH2HqZ5+oZj3JUzWB+cOz4G48Bg+tsJ/tqu4dLC/4Xb+0GcF5BwBC0AA53qAAAAAElFTkSuQmCC); background-repeat: repeat-x; background-size: contain; bottom: 0; content: ''; display: block; left: 0; pointer-events: none; position: absolute; right: 0; top: -25px; z-index: -1; } .fancybox-caption::after { border-bottom: 1px solid rgba(255, 255, 255, 0.3); content: ''; display: block; left: 44px; position: absolute; right: 44px; top: 0; } .fancybox-caption a, .fancybox-caption a:link, .fancybox-caption a:visited { color: #ccc; text-decoration: none; } .fancybox-caption a:hover { color: #fff; text-decoration: underline; } /* Loading indicator */ .fancybox-loading { -webkit-animation: fancybox-rotate .8s infinite linear; animation: fancybox-rotate .8s infinite linear; background: transparent; border: 6px solid rgba(100, 100, 100, 0.5); border-radius: 100%; border-top-color: #fff; height: 60px; left: 50%; margin: -30px 0 0 -30px; opacity: .6; padding: 0; position: absolute; top: 50%; width: 60px; z-index: 99999; } @-webkit-keyframes fancybox-rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes fancybox-rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } /* Transition effects */ .fancybox-animated { transition-timing-function: cubic-bezier(0, 0, 0.25, 1); } /* transitionEffect: slide */ .fancybox-fx-slide.fancybox-slide--previous { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .fancybox-fx-slide.fancybox-slide--next { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .fancybox-fx-slide.fancybox-slide--current { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* transitionEffect: fade */ .fancybox-fx-fade.fancybox-slide--previous, .fancybox-fx-fade.fancybox-slide--next { opacity: 0; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .fancybox-fx-fade.fancybox-slide--current { opacity: 1; } /* transitionEffect: zoom-in-out */ .fancybox-fx-zoom-in-out.fancybox-slide--previous { opacity: 0; -webkit-transform: scale3d(1.5, 1.5, 1.5); transform: scale3d(1.5, 1.5, 1.5); } .fancybox-fx-zoom-in-out.fancybox-slide--next { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 0.5); transform: scale3d(0.5, 0.5, 0.5); } .fancybox-fx-zoom-in-out.fancybox-slide--current { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } /* transitionEffect: rotate */ .fancybox-fx-rotate.fancybox-slide--previous { opacity: 0; -webkit-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg); } .fancybox-fx-rotate.fancybox-slide--next { opacity: 0; -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .fancybox-fx-rotate.fancybox-slide--current { opacity: 1; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } /* transitionEffect: circular */ .fancybox-fx-circular.fancybox-slide--previous { opacity: 0; -webkit-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); } .fancybox-fx-circular.fancybox-slide--next { opacity: 0; -webkit-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); } .fancybox-fx-circular.fancybox-slide--current { opacity: 1; -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } /* transitionEffect: tube */ .fancybox-fx-tube.fancybox-slide--previous { -webkit-transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg); transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg); } .fancybox-fx-tube.fancybox-slide--next { -webkit-transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg); transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg); } .fancybox-fx-tube.fancybox-slide--current { -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); } /* Share */ .fancybox-share { background: #f4f4f4; border-radius: 3px; max-width: 90%; padding: 30px; text-align: center; } .fancybox-share h1, .fancybox-share .h1 { color: #222; font-size: 35px; font-weight: 700; margin: 0 0 20px 0; } .fancybox-share p { margin: 0; padding: 0; } .fancybox-share__button { border: 0; border-radius: 3px; display: inline-block; font-size: 14px; font-weight: 700; line-height: 40px; margin: 0 5px 10px 5px; min-width: 130px; padding: 0 15px; text-decoration: none; transition: all .2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; } .fancybox-share__button:visited, .fancybox-share__button:link { color: #fff; } .fancybox-share__button:hover { text-decoration: none; } .fancybox-share__button--fb { background: #3b5998; } .fancybox-share__button--fb:hover { background: #344e86; } .fancybox-share__button--pt { background: #bd081d; } .fancybox-share__button--pt:hover { background: #aa0719; } .fancybox-share__button--tw { background: #1da1f2; } .fancybox-share__button--tw:hover { background: #0d95e8; } .fancybox-share__button svg { height: 25px; margin-right: 7px; position: relative; top: -1px; vertical-align: middle; width: 25px; } .fancybox-share__button svg path { fill: #fff; } .fancybox-share__input { background: transparent; border: 0; border-bottom: 1px solid #d7d7d7; border-radius: 0; color: #5d5b5b; font-size: 14px; margin: 10px 0 0 0; outline: none; padding: 10px 15px; width: 100%; } /* Thumbs */ .fancybox-thumbs { background: #fff; bottom: 0; display: none; margin: 0; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; padding: 2px 2px 4px 2px; position: absolute; right: 0; -webkit-tap-highlight-color: transparent; top: 0; width: 212px; z-index: 99995; } .fancybox-thumbs-x { overflow-x: auto; overflow-y: hidden; } .fancybox-show-thumbs .fancybox-thumbs { display: block; } .fancybox-show-thumbs .fancybox-inner { right: 212px; } .fancybox-thumbs > ul { font-size: 0; height: 100%; list-style: none; margin: 0; overflow-x: hidden; overflow-y: auto; padding: 0; position: absolute; position: relative; white-space: nowrap; width: 100%; } .fancybox-thumbs-x > ul { overflow: hidden; } .fancybox-thumbs-y > ul::-webkit-scrollbar { width: 7px; } .fancybox-thumbs-y > ul::-webkit-scrollbar-track { background: #fff; border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } .fancybox-thumbs-y > ul::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px; } .fancybox-thumbs > ul > li { -webkit-backface-visibility: hidden; backface-visibility: hidden; cursor: pointer; float: left; height: 75px; margin: 2px; max-height: calc(100% - 8px); max-width: calc(50% - 4px); outline: none; overflow: hidden; padding: 0; position: relative; -webkit-tap-highlight-color: transparent; width: 100px; } .fancybox-thumbs-loading { background: rgba(0, 0, 0, 0.1); } .fancybox-thumbs > ul > li { background-position: center center; background-repeat: no-repeat; background-size: cover; } .fancybox-thumbs > ul > li:before { border: 4px solid #4ea7f9; bottom: 0; content: ''; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 99991; } .fancybox-thumbs .fancybox-thumbs-active:before { opacity: 1; } /* Styling for Small-Screen Devices */ @media all and (max-width: 800px) { .fancybox-thumbs { width: 110px; } .fancybox-show-thumbs .fancybox-inner { right: 110px; } .fancybox-thumbs > ul > li { max-width: calc(100% - 10px); } } @keyframes bounce { 0% { transform: translate3d(-100%); } 20%, 53%, 80% { transform: translate3d(0, 0, 0); } 40%, 43% { transform: translate3d(0, -30px, 0); } 70% { transform: translate3d(0, -15px, 0); } 90% { transform: translate3d(0, -4px, 0); } 100% { transform: translate3d(0, 0, 0); } } .animation { position: absolute; z-index: 2; display: none; } @media (min-width: 900px) { .animation { display: block; } } .animation .inner { position: relative; } .animation img { display: block; position: absolute; width: 100%; height: auto; } .animating { transition-property: all; transition-duration: 0.15s; transition-timing-function: ease-out; } .in-viewport .animating { opacity: 1 !important; } .fancybox-active .pulsating, .fancybox-active .animating { animation-play-state: paused !important; } #source .scene { background-image: url(/public/images/story-images/source-main-small.jpg); } @media (min-width: 900px) { #source .scene { background-image: url(/public/images/story-images/source-main-large.jpg); } } #source-collaboration { top: 39%; left: 13%; } #source-healthybusiness { top: 41%; left: 37%; } #source-welovetomatoes { top: 37%; left: 52%; } #source-history { top: 83%; left: 11.4%; } #source-history-video { top: 89.5%; left: 16.8%; } #source-facts { top: 91%; left: 33.5%; } #source-future { top: 72.5%; left: 90%; } #source-tv { top: 79.4%; left: 11.3%; width: 11.1%; } #source-airplane { left: 0; top: 0; width: 100%; height: 8%; } #source-airplane img { animation: airplane-fly-toleft 25s forwards infinite linear 2s, airplane-move 3s alternate infinite linear; transform: translateY(-30%); opacity: 0; width: 24%; height: auto; top: 50%; left: 100%; } @keyframes airplane-fly-toleft { 0% { left: 100%; } 80%, 100% { left: -24%; } } @keyframes airplane-move { 0% { transform: translateY(-30%); } 100% { transform: translateY(30%); } } #care .scene { background-image: url(/public/images/story-images/care-main-small.jpg); } @media (min-width: 900px) { #care .scene { background-image: url(/public/images/story-images/care-main-large.jpg); } } #care-circular { top: 90%; left: 100%; } #care-water { top: 61%; left: 89%; } #care-greenhouses { top: 40%; left: 53%; } #care-light { top: 16%; left: 37%; } #care-wasp { top: 93%; left: 50%; } #care-humblebees { top: 68%; left: 67%; } #care-future { top: 85%; left: 92%; } #care-facts { top: 79%; left: 29.5%; } #care-blur-front { z-index: 5; display: block; position: absolute; width: 30%; height: auto; top: 0; left: 0; z-index: 9; } #care-panel-recycle { z-index: 4; top: 0; left: 3.6%; width: 9.75%; } #care-panel-recycle .inner { animation: bounce 1s forwards ease-in 1s; transform: translate3d(0, -100%, 0); opacity: 0; } #care-panel-recycle .inner img { position: relative; } #care-panel-recycle .inner .recycle-arrows { animation: recycle-rotate 1s forwards infinite linear; position: absolute; width: 68%; left: 16%; top: 70%; z-index: 9; } #care-panel-recycle.playing .inner { animation-play-state: running; } @keyframes recycle-rotate { 100% { transform: rotate(180deg); } } #care-humblebee { z-index: 9; top: 50%; height: 0; left: 0; width: 100%; } #care-humblebee .inner { animation: humblebee-fly 20s forwards infinite ease-in-out, humblebee-move 1.5s alternate infinite linear; transform: translateY(-5%); width: 16%; top: 0; left: -16%; } #care-humblebee img { position: relative; } @keyframes humblebee-fly { 0% { left: -16%; } 5%, 60% { top: -10vh; left: 10%; } 70%, 100% { top: -5vh; left: 110%; } } @keyframes humblebee-move { 0% { transform: translateY(-5%); } 100% { transform: translateY(5%); } } #fresh .scene { background-image: url(/public/images/story-images/fresh-main-small.jpg); } @media (min-width: 900px) { #fresh .scene { background-image: url(/public/images/story-images/fresh-main-large.jpg); } } #fresh-toptomatoes { left: 70%; top: 64%; } #fresh-packaging { left: 26%; top: 40%; } #fresh-blur-front { display: block; position: absolute; width: 20%; height: auto; top: 0; left: 0; z-index: 9; } #fresh-tracktrace { left: 80%; top: 85%; } #fresh-facts { left: 93%; top: 71%; } #fresh-panel-tracktrace { z-index: 4; top: 0; left: 17%; width: 15%; } #fresh-panel-tracktrace .inner { animation: bounce 1s forwards ease-in 1s; transform: translate3d(0, -100%, 0); opacity: 0; } #fresh-panel-tracktrace .inner img { position: relative; } #fresh-video { left: 14.75%; top: 78.5%; } #sustainable .scene { background-image: url(/public/images/story-images/sustainable-main-small.jpg); } @media (min-width: 900px) { #sustainable .scene { background-image: url(/public/images/story-images/sustainable-main-large.jpg); } } #sustainable-geothermal { top: 82%; left: 17%; } #sustainable-collector { top: 85%; left: 44.5%; } #sustainable-restproducts { top: 39%; left: 15%; } #sustainable-rainwater { top: 7%; left: 70%; } #sustainable-future { top: 88%; left: 81%; } #sustainable-facts { top: 64%; left: 11%; } #sustainable-cloud { left: 0; top: 10%; width: 100%; } #sustainable-cloud .inner { animation: cloud-moving 80s alternate infinite linear, rain 1s steps(3) infinite; transform: translateX(60vw); left: 0; top: 0; width: 14%; padding-top: 21%; background: url(/public/images/story-images/sustainable-rainwater.png) no-repeat 0 0; background-size: auto 100%; } @keyframes cloud-moving { 0% { transform: translateX(60vw); } 100% { transform: translateX(5vw); } } @keyframes rain { 0% { background-position: 0 0; } 100% { background-position: 150% 0; } } #sustainable-airplane { left: 0; top: 0; width: 100%; height: 8%; } #sustainable-airplane img { animation: airplane-fly-toright 25s forwards infinite linear 2s, airplane-move 3s alternate infinite linear; transform: translateY(-30%); opacity: 0; width: 24%; height: auto; right: 100%; top: 50%; } @keyframes airplane-fly-toright { 0% { right: 100%; } 80%, 100% { right: -24%; } } #sustainable-watermeter { animation: watermeter 10s alternate infinite ease-in-out 2s; transform: rotate(90deg); left: 63.1%; top: 64.5%; width: 6.5%; } @keyframes watermeter { 0% { transform: rotate(90deg); } 80%, 100% { transform: rotate(5deg); } } #healthy .scene { background-image: url(/public/images/story-images/healthy-main-small.jpg); } @media (min-width: 900px) { #healthy .scene { background-image: url(/public/images/story-images/healthy-main-large.jpg); } } #healthy-vitamins { left: 50%; top: 71%; } #healthy-saving { left: 12%; top: 44%; } #healthy-variation { left: 53%; top: 28.5%; } #healthy-recipes { left: 55%; top: 20%; } #healthy-fetfit { left: 46%; top: 30%; } #healthy-future { left: 20%; top: 33%; } #healthy-facts { left: 70%; bottom: 6%; } #healthy-video { left: 12%; top: 33%; } #healthy-screen { animation: screen-flickering 0.07s alternate infinite; left: 37.7%; top: 9.6%; width: 20%; opacity: 0.85; } @keyframes screen-flickering { 0% { opacity: 0.85; } 100% { opacity: 1; } } #healthy-salad { position: absolute; right: 0; top: 78%; width: 32%; z-index: 3; } #healthy-future-panel { animation: panel-future 1s alternate infinite ease-in-out; transform: rotate(0); transform-origin: 50% 100%; right: 4%; bottom: 10%; width: 13%; } #healthy-future-panel img { position: relative; } @keyframes panel-future { 0% { transform: rotate(0); } 100% { transform: rotate(-5deg); } } #partners .scene { background-image: url(/public/images/story-images/partners-main-small.jpg); } @media (min-width: 900px) { #partners .scene { background-image: url(/public/images/story-images/partners-main-large.jpg); } } #partners-partners { left: 0%; top: 78%; } #partners-retail { left: 33%; top: 31%; } #partners-future { left: 81%; bottom: 9%; } #partners-facts { left: 12%; top: 66%; } #partners-panel { z-index: 4; top: 0; left: 48%; width: 16%; } #partners-panel .inner { animation: bounce 1s forwards ease-in 1s; transform: translate3d(0, -100%, 0); opacity: 0; } #partners-panel .inner img { position: relative; } html { font-size: 100%; overfow-x: hidden; background-color: #fff; } @media (min-width: 1450px) { html { font-size: 106.25%; } } @media (min-width: 1750px) { html { font-size: 112.5%; } } body { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 100%; color: #444; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; line-height: 1.6; overfow-x: hidden; background-color: #fff; } h1, .h1, h2, .h2, h3, .h3 { color: #cd1719; line-height: 1.2; } @media (min-width: 900px) { h1:first-child, .h1:first-child, h2:first-child, .h2:first-child, h3:first-child, .h3:first-child { margin-top: 0; } } h1, .h1 { font-size: 1.75em; } @media (min-width: 1200px) { h1, .h1 { font-size: 2.25vw; } } @media (min-width: 1750px) { h1, .h1 { font-size: 2vw; } } #in-page-nav { display: none; transform: rotate(90deg) translateY(-100%); transform-origin: 0 0; position: fixed; z-index: 99; top: 0; left: 0; width: 100vh; line-height: 1; text-align: center; text-transform: lowercase; color: #cd1719; background-color: #fff; } @media (min-width: 900px) { #in-page-nav { display: block; } } #in-page-nav .inner { padding: 1em; min-width: 40em; overflow: hidden; } #in-page-nav * { vertical-align: middle; } #in-page-nav h4, #in-page-nav em { font-size: 1.5em; font-weight: 300; display: inline-block; margin: 0; padding-bottom: 0.25em; transform: rotate(-180deg); text-transform: lowercase; } #in-page-nav em { font-style: normal; text-align: right; width: 7em; } #in-page-nav nav { position: relative; display: inline-block; margin: 0 3%; } #in-page-nav nav ul { list-style: none; margin: 0; padding: 0; } #in-page-nav nav li { display: inline; } #in-page-nav nav li.current a { transform: scale(2) translateZ(0); } #in-page-nav nav a { transition-property: transform; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); display: inline-block; width: 0.5rem; height: 0.5rem; margin: 0 0.5rem; border-radius: 50%; background-color: #cd1719; text-indent: -999em; } section { position: relative; overflow: hidden; } @media (min-width: 900px) { section { padding-left: 3.5em; background: linear-gradient(#222, #1a1a1a); } } section.loading::before { transition-property: opacity; transition-duration: 1.2s; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-name: spin; animation-duration: 1.2s; animation-timing-function: linear; animation-iteration-count: infinite; position: fixed; z-index: 99999; content: ''; opacity: 0; left: 50%; top: 50%; width: 5em; height: 5em; margin-top: -2.5em; margin-left: -2.5em; border-radius: 50%; background: url(/public/images/story-images/icn-loading.svg) no-repeat center; background-size: 100% 100%; } section.loading.in-viewport::before { transition-delay: 1s; opacity: 1; } @keyframes spin { 100% { transform: rotate(360deg); } } .scene { transition-property: opacity; transition-duration: 1.2s; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); position: relative; padding-top: 70%; background: no-repeat center; background-size: cover; opacity: 1; } .loading .scene { opacity: 0; } @keyframes pulse { 0% { transform: translateY(-50%) translateX(-50%) scale(1); transform: scale(1); opacity: 1; } 100% { transform: translateY(-50%) translateX(-50%) scale(0.8); transform: scale(0.8); opacity: 0.7; } } .pulsating { animation-name: pulse; animation-duration: 1.2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } .marker, .marker-video { display: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; transition-property: all; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transform-origin: center center; position: absolute; z-index: 9; line-height: 0; width: 3.25vw; padding-top: 3.25vw; margin-left: -1.625vw; margin-top: -1.625vw; border-radius: 50%; text-decoration: none; text-indent: -999em; overflow: hidden; background: url(/public/images/story-images/marker.svg) center #fff; background-size: 100% 100%; } .marker::selection, .marker-video::selection { color: inherit; background: transparent; } @media (min-width: 900px) { .marker, .marker-video { display: block; } } @media (min-width: 1200px) { .marker, .marker-video { width: 2.75vw; padding-top: 2.75vw; margin-left: -1.375vw; margin-top: -1.375vw; } } .marker-video { background: url(/public/images/story-images/marker-video.svg) center; background-size: 100% 100%; } .marker-balloon { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overflow: hidden; display: none; position: absolute; top: 10%; left: 76%; z-index: 9; line-height: 0; width: 9%; padding-top: 6.921%; text-decoration: none; text-indent: -999em; background: url(/public/images/story-images/marker-balloon.svg) center; background-size: contain; } .marker-balloon::selection { color: inherit; background: transparent; } @media (min-width: 900px) { .marker-balloon { display: block; } } @media (min-width: 1200px) { .marker-balloon { transition-property: opacity; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); height: 0; opacity: 0; } .marker-balloon.show { height: auto; opacity: 1; transition-delay: 0.25s; } } .panel .inner, .panel-intro .inner { padding: 0 1em; } .panel.fancybox-content .inner, .panel-intro.fancybox-content .inner { padding: 2em; } .panel .icn-value, .panel-intro .icn-value { margin-top: 2em; width: 100%; height: auto; max-width: 25em; } @media (min-width: 900px) { .panel .icn-value, .panel-intro .icn-value { margin-top: 0; } } @media (min-width: 1200px) { .panel .icn-value, .panel-intro .icn-value { max-width: none; } } .panel .icn-value + h1, .panel .icn-value + .h1, .panel-intro .icn-value + h1, .panel-intro .icn-value + .h1 { margin-top: 0.5em; } .panel a, .panel-intro a { text-decoration: none; border-bottom: 1px solid #cd1719; color: #cd1719; font-weight: 700; } .panel ul, .panel-intro ul { list-style: none; padding: 0; } .panel li, .panel-intro li { padding-left: 1.75em; position: relative; } .panel li:before, .panel-intro li:before { content: ''; position: absolute; top: 0.15em; display: block; margin-left: -1.75em; width: 1.25em; height: 1.25em; background: url(/public/images/story-images/list-item.svg) no-repeat left top; background-size: 100% 100%; } .panel-intro { font-weight: 500; } .panel h2, .panel .h2 { font-size: 1.75em; margin: 1em 0; } .panel h3, .panel .h3 { color: #444; margin-bottom: 0; } .panel-intro h2, .panel-intro .h2, .panel h3, .panel .h3 { font-size: 1.25em; font-weight: 700; color: #444; margin-bottom: 0; } .panel-intro h2 + p, .panel-intro .h2 + p, .panel h3 + p, .panel .h3 + p { margin-top: 0.25em; } .panel-button, .btn-hide, .fancybox-close-small { transition-property: transform; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transform: scale(1); position: absolute; z-index: 9; width: 3em; height: 3em; top: -1.5em; right: -1.5em; border: 3px solid #fff; border-radius: 50%; outline: none; background: url(/public/images/story-images/btn-close.svg) no-repeat center #fff; background-size: 100% 100%; } .panel-button:hover, .btn-hide:hover, .fancybox-close-small:hover { transform: scale(1.1) rotate(90deg); } .btn-hide { display: none; text-indent: -999em; } @media (min-width: 1200px) { .btn-hide { display: block; } } @media (max-width: 899px) { .accordeon-arrows::after, .panel h2::after, .panel .h2::after, .readmore a::after { transition-property: transform; transition-duration: 0.2s; transition-timing-function: linear; content: ''; display: block; position: absolute; top: 0; right: 0; width: 1.5rem; height: 1.5rem; background: url(/public/images/story-images/arrow-double.svg) no-repeat center; background-size: 100% 100%; } .panels-wrapper, .txt-wrapper { display: none; } .panel-intro { display: block !important; } .panel { display: block !important; border-bottom: 1px solid #cd1719; } .panel:first-child { border-top: 1px solid #cd1719; } .panel h2, .panel .h2 { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; transition-property: color; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); cursor: pointer; color: #555; font-size: 1.25em; padding-right: 2em; position: relative; } .panel h2::selection, .panel .h2::selection { color: inherit; background: transparent; } .panel h2.active, .panel .active.h2 { color: #cd1719; } .panel .active::after { transform: rotate(90deg); } .txt-wrapper { padding: 0 0 1em; } .txt-wrapper p:first-child { margin: 0; } .readmore { color: #cd1719; font-weight: 600; text-transform: uppercase; } .readmore a { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; text-decoration: none; display: inline-block; color: #cd1719; padding: 0 2.25rem 1.25rem 1em; position: relative; } .readmore a::selection { color: inherit; background: transparent; } .readmore a.close { padding-top: 1.25rem; } .readmore a.close::after { transform: rotate(-90deg); top: 1.25em; } } @media (min-width: 900px) { .panel-intro, .panel, .readmore { display: none; } .panel { transition-property: transform; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transform: translateY(-5%); backface-visibility: hidden; } .fancybox-slide--current .panel { transition-duration: 0.6s; transform: translateY(0) scale(1); } .txt-wrapper { display: block !important; } } @media (min-width: 1200px) { .panel-intro { display: block !important; transition-property: transform, opacity; transition-duration: 0.3s; transition-delay: 0s; transition-timing-function: linear; transform: translateX(120%); position: absolute; z-index: 9; top: 5em; right: 3%; background-color: #fff; } .fancybox-active .panel-intro { transition-duration: 0.25s; transition-delay: 0s; transition-timing-function: ease-out; transform: translateX(120%); } .panel-intro::before, .panel-intro::after { content: ''; position: absolute; z-index: 9; left: 2em; right: 2em; height: 3em; } .panel-intro::before { top: 0; background: linear-gradient(#fff 10%, rgba(255, 255, 255, 0) 75%); } .panel-intro::after { bottom: 0; background: linear-gradient(rgba(255, 255, 255, 0) 25%, #fff 90%); } .panel-intro .scrollable { overflow: auto; -webkit-overflow-scrolling: touch; position: relative; z-index: 1; width: 25vw; min-height: 15em; max-height: 28em; padding: 2em; } section:not(.loading) .panel-intro.show { transition-duration: 1s; transition-delay: 0.5s; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transform: translateX(0) scale(1); } } @media (min-width: 1750px) { .panel-intro .scrollable { width: 22vw; max-height: 37em; } } .fancybox-slide--html { padding: 2em 1em; } .fancybox-slide--html .fancybox-content { width: 95%; padding: 0; overflow: visible; max-width: 42em; } .fancybox-bg { background-color: rgba(0, 0, 0, 0.3); } .fancybox-is-open .fancybox-bg { opacity: 1; } .fancybox-close-small svg { display: none; } /* ---- CUSTOM ---- */ .arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5; } .arrow_box:after, .arrow_box:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-top-color: #88b7d5; border-width: 20px; margin-left: -20px; } .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-top-color: #c2e1f5; border-width: 26px; margin-left: -26px; } .balloon { transition: .3s ease; position: absolute; display: inline-block; opacity: 0; background-color: white; padding: 20px; border-radius: 10px; z-index: 100; } .balloon.active { display: inline-block; opacity: 1; } .balloon::after { content: ''; position: absolute; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid white; bottom: -13px; left: 20px; }