/* Theme Name: The Ellinikon Author: Addedlovely Author URI: https://www.addedlovely.com Template: addedlovely Version: 1.7.0 Text Domain: addedlovely */ /* ========================================================================== Fonts ========================================================================== */ @font-face{ font-family:"BwEllinikon"; src:url('fonts/BwEllinikon-Regular.woff2') format("woff2"), url('fonts/BwEllinikon-Regular.woff') format("woff"); font-weight: normal; font-display: swap; } @font-face{ font-family:"BwEllinikon"; src:url('fonts/BwEllinikon-Medium.woff2') format("woff2"), url('fonts/BwEllinikon-Medium.woff') format("woff"); font-weight: 600; font-display: swap; } @font-face{ font-family:"BwEllinikon"; src:url('fonts/BwEllinikon-Light.woff2') format("woff2"), url('fonts/BwEllinikon-Light.woff') format("woff"); font-weight: 300; font-display: swap; } /* ========================================================================== Structure ========================================================================== */ body { padding: 0; margin:auto; position: relative; } svg { width: 100%; height: 100%; vertical-align: top; } video { width: 100%; height:auto; } .container { max-width: 1420px; width: 84.523809523809524%; position: relative; } .is-inset { padding-left: 80px; padding-right:80px; } .mb { margin-bottom:150px; } .grid { grid-gap:20px; } .inset { padding-left: 5.633802816901408%; padding-right: 5.633802816901408%; } .container.inset { padding-left: 4.761904761904762%; padding-right: 4.761904761904762%; } .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal !important; } .transition { -webkit-transition: all 0.3s cubic-bezier(.77,0,.175,1); transition: all 0.3s cubic-bezier(.77,0,.175,1); } .reveal { visibility: hidden; } .center { text-align:center; } .image { overflow: hidden; } .image img { height: 100%; object-fit: cover; } .lazyload { min-height: 1px; } .c-scrollbar { display: none; } /* Video */ .video { width: 100%; height: 0; padding-top: 56.25%; position: relative; display: block; } .video video { position: absolute; bottom:0; left:0; } .bg-green { background: #E8EAE1; } .bg-blue { background: #00578C; color: #FFF; } .bg-light-blue { background: #DAEAF0; } .bg-light-grey { background: #F4F5F6; } .bg-grey { background: #E3E3E3; } .bg-cream { background: #F4F4EF; } .black { color: #000; } .grey { color: #979797; } .blue { color: #035996; } .light-grey { color: #D8D8D8; } .white { color: #FFF; } .cyan { color: #00CBEA; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } /* Caption */ .caption { position: absolute; background: #FFF; line-height: 1.0625; padding: 14px 30px; right: 0; max-width: 220px; margin: 0; transform: translateY(-50%); } /* Close down margin for layouts with background */ .has-bg { padding: 160px 0; } .has-bg:last-child { margin-bottom:0; } .has-bg.mb + .has-bg { margin-top:-200px; } .main section:last-of-type.has-bg { padding-bottom: 120px; margin-bottom: 0; } /* Media Transitions */ .image, .video { overflow:hidden; } img.lazyload, video.lazyload { clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); transition: all 0.5s; transform:translate3d(0, 50px, 0); } img.lazyload.loaded, video.lazyload.loaded { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transform:translate3d(0, 0, 0); } /* Title Animations */ .has-title-animation span { display: inline-block; vertical-align: top; } .has-title-animation .outer { overflow: hidden; margin-right: 1px; } .has-title-animation.f-40 .outer { margin-right: 0; } .has-title-animation .inner { transition: transform 0.5s cubic-bezier(.23, 1, .32, 1); transform: translate3d(0,100%,0);padding-bottom: 2px; } .has-title-animation .outer:nth-of-type(1) span { transition-delay:0.5s; } .has-title-animation .outer:nth-of-type(2) span { transition-delay:0.6s; } .has-title-animation .outer:nth-of-type(3) span { transition-delay:0.7s; } .has-title-animation .outer:nth-of-type(4) span { transition-delay:0.8s; } .has-title-animation .outer:nth-of-type(5) span { transition-delay:0.9s; } .has-title-animation .outer:nth-of-type(6) span { transition-delay:1.0s; } .has-title-animation .outer:nth-of-type(7) span { transition-delay:1.1s; } .has-title-animation .outer:nth-of-type(8) span { transition-delay:1.2s; } .has-title-animation .outer:nth-of-type(9) span { transition-delay:1.3s; } .has-title-animation .outer:nth-of-type(10) span { transition-delay:1.4s; } .has-title-animation .outer:nth-of-type(11) span { transition-delay:1.5s; } .has-title-animation .outer:nth-of-type(12) span { transition-delay:1.6s; } .has-title-animation .outer:nth-of-type(13) span { transition-delay:1.7s; } .has-title-animation.is-inview .inner { transform: translate3d(0,0,0); } /* Text Animation */ .has-text-animation { transform:translateY(40px); opacity: 0; transition: transform 0.5s cubic-bezier(.23, 1, .32, 1) 0.3s, opacity 1s cubic-bezier(.23, 1, .32, 1) 0.3s; } .has-text-animation.is-inview { opacity: 1; transform: translateY(0); } .has-text-animation.delay-1 { transition-delay:0.4s; } .has-text-animation.delay-2 { transition-delay:0.5s; } .has-text-animation.delay-3 { transition-delay:0.6s; } .has-text-animation.delay-4 { transition-delay:0.7s; } .has-text-animation.delay-5 { transition-delay:0.8s; } .has-text-animation.delay-6 { transition-delay:0.9s; } .has-text-animation.delay-7 { transition-delay:1.0s; } .has-text-animation.delay-8 { transition-delay:1.1s; } .has-text-animation.delay-9 { transition-delay:1.2s; } .has-text-animation.delay-10 { transition-delay:1.3s; } .has-text-animation.delay-11 { transition-delay:1.4s; } .has-text-animation.delay-12 { transition-delay:1.5s; } .has-text-animation.delay-13 { transition-delay:1.6s; } .has-text-animation.delay-14 { transition-delay:1.7s; } .has-text-animation.delay-15 { transition-delay:1.8s; } .has-text-animation.delay-16 { transition-delay:1.9s; } /* ========================================================================== Typography ========================================================================== */ body { font-family:"BwEllinikon"; font-size: 16px; } hr { height: 1px; background: #979797; outline:none; border:0; margin: 40px 0; } .f-12 { font-size: 12px; } .f-14 { font-size: 14px; } .f-16 { font-size: 16px; } .f-18 { font-size: 18px; } .f-22 { font-size: 22px; } .f-26 { font-size: 26px; } .f-32 { font-size: 32px; } .f-40 { font-size: 40px; } .f-50 { font-size: 50px; } .f-56 { font-size: 56px; } .f-66 { font-size: 66px; } .f-80 { font-size: 80px; } .f-italic { font-style:italic; } .f-light { font-weight: 300; } .f-medium { font-weight: 600; } .f-ucase { text-transform: uppercase; } /* Button : Lined */ .button-cta { line-height: 1.5; color: #035996; border-bottom: 1px solid #035996; border-left: 1px solid #035996; position: relative; display: inline-block; padding: 13px 30px; } .button-cta:after { content:''; height: 1px; background: #035996; position: absolute; top:0; left:0; width: 33%; transition: width 0.3s linear 0.15s;} .button-cta:before { content:''; width: 1px; background: #035996; position: absolute; top:0; right:0; height: 0; transition: height 0.15s linear; } .button-cta:hover:after { width: 100%; transition-delay: 0s; } .button-cta:hover:before { height: 100%; transition-delay: 0.3s;} .button-cta svg { fill:#035996; } /* Button : Filled */ .button-alt { background: #00578C; color: #FFF; height: 48px; line-height: 48px; padding: 0 20px; display: inline-block; transition: background 0.3s; min-width: 145px; text-align: center; } .button-alt:hover { background: #00BDE3; } /* Button : With icon */ .button-icon { position: relative; height: auto; padding: 14px 20px 14px 44px; line-height: 1.5; min-width: 81px; } .button-icon svg { width: 40px; height: 40px; position: absolute; top:4px; left: 4px; bottom:4px; margin: auto; fill:currentcolor; } /* Button : Expand */ .button-expand { width: 40px; height: 40px; position: absolute; top:0; right:0; } .button-expand svg { width: 100%; height: 100%; vertical-align: top; } /* Read More */ .button-text-read-more { line-height: 20px; display: flex; } .button-text-read-more svg { width: 20px; height: 20px; margin-right: 5px; vertical-align: top; transition: transform 1s cubic-bezier(.77,0,.175,1); fill: currentColor; } .button-text-read-more span { transition: opacity 1s cubic-bezier(.77,0,.175,1); } /* Button : Contact */ .button-contact { position: fixed; bottom:30px; right:30px; border-radius:24px; } /* ========================================================================== Layouts ========================================================================== */ /* ========================================================================== Forms ========================================================================== */ input, select, textarea { width: 100%; line-height:46px; height: 48px; border:1px solid #e9eae5; padding: 0 10px; background: transparent; margin-bottom: 0; text-indent:0; color:#8F8F8F; } input:focus, select:focus, textarea:focus { border-color:#8F8F8F; } label { padding: 10px 0;} button { width: 100%; } fieldset { border: 0; } textarea { height: 50px; line-height: 1.5; padding: 13px 0; border-radius: 0; } select { background-image:url('images/icon-select.svg'); background-size:12px 8px; background-repeat:no-repeat; background-position: center right; } input::placeholder, textarea::placeholder, select { color:#979797; } form button { line-height:54px; height: 56px; display:inline-block; color:#FFF; background: #00578C; width:100%; border:1px solid #035996; } .gfield_visibility_hidden { display: none; } .hidden_label label { display: none; } /* ========================================================================== Header ========================================================================== */ .header { position: fixed; top:0; left:0; right:0; height: 87px; letter-spacing: 2px; line-height: 87px; z-index: 3; color:#FFF; transition: transform 1s cubic-bezier(.77,0,.175,1); } .header:after { content:''; background: rgba(255,255,255,0.96); position: absolute; top:0; left: 0; right:0; height: 87px; transform: translateY(-100%); transition: all 1s cubic-bezier(.77,0,.175,1); z-index: 0; } .header .container { display: flex; flex-direction: row; width: 100%; padding: 0 50px; max-width: none; margin: auto; height: 100%; transition: all 1s cubic-bezier(.77,0,.175,1); position: relative; z-index: 1; } .header .container.has-no-transition { transition:none; } .header-logo { position: absolute; top:0; left:50px; width: 132px; height: 112px; padding: 12px; background: #FFF; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20); z-index: 1; overflow: hidden; transition: transform 1s cubic-bezier(.77,0,.175,1), box-shadow 1s cubic-bezier(.77,0,.175,1); } .header-logo a { display:block; } .header-logo video { width: 108px; height: 88px; display: none; } .header-logo.has-video video { display:block; } .header-logo.has-video img { display: none; } /* Menu */ .header-menu { margin: auto 4px auto auto; line-height: 87px; } .header-menu-item { position: relative; list-style-type: none; margin-right: 24px; letter-spacing: 1.8px; line-height: 36px; } .header-menu-item:last-of-type { display:none; } .header-menu-inner { display:flex; flex-direction: row; justify-content: center; } .header-menu-item-link { position: relative; display:block; } .header-menu-item-link:after { content: ''; height: 1px; background: currentcolor; left: 0; right: 0; top:28px; position: absolute; transform-origin: right top; transform: scale(0, 1); transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .header-menu-item-link svg { width:12px; height: 8px; vertical-align: middle; margin-top: -2px; fill:currentcolor; margin-left: -2px; } .header-menu-item-link.active:after, .header-menu-item-link:hover:after, .has-submenu:hover .header-menu-item-link:after { transform-origin: left top; transform: scale(1, 1);} .header-menu-item-link.active:after, .has-submenu .header-menu-item-link:after { background: #00CBEA; } /* Language Switcher */ .header-languages { margin: 32.5px 0 0 0; color: rgba(255,255,255,0.6); height: 23px; line-height: 21px; min-width:60px; display: flex; transition: color 1s cubic-bezier(.77,0,.175,1); } .header-languages a:first-of-type { margin-right:auto; } .header-languages a:last-of-type { margin-left:auto; } .header-languages a { display:inline-block; border-bottom: 1px solid transparent; position: relative; transition: color 1s cubic-bezier(.77,0,.175,1);} .header-languages a:after { content:''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right top; transform: scale(0, 1); transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .header-languages .active:after, .header-languages a:hover:after, .header-languages a:focus:after { transform-origin: left top; transform: scale(1, 1); } .header-languages .active { color: #FFF; } .header-languages .active:after { background:currentcolor; } /* Search */ .header-search { margin: 32.5px 18px 0 0; position: relative; width: 164px; height: 22px; } .header-search-input { border: 0; line-height: 21px; height: 22px; width: 100%; border-bottom: 1px solid #B4D5E0; vertical-align: top; text-indent: 0; padding: 0; } .button-search { width: 40px; height: 22px; padding: 4px 0; vertical-align: middle; position: absolute; top:0; right: 0; background: transparent; border: 0; } .button-search svg { width: 12px; height: 12px; margin: 0 0 0 auto; display: block; fill:currentColor; color:#B4D5E0; } .header-search:hover .header-search-input { border-color:#00CBEA; } .button-menu { display: none; } /* Submenu */ .header-submenu { position: absolute; top:29px; left: 0; min-width:100%; line-height: 2.33; z-index: 2; color: #00578C; background: rgba(252,252,252,0.98); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10); border-radius: 0 0 2px 2px; overflow: hidden; max-height:0; transition: max-height 0.5s cubic-bezier(.23, 1, .32, 1); } .header-submenu-inner { padding: 15px; } .header-submenu-item-link { white-space: nowrap; transition: color 0.5s cubic-bezier(.77,0,.175,1); display:flex; flex-direction: row; letter-spacing: normal; } .header-submenu-item-link svg { width: 6px; height: 10px; margin: auto 0 auto auto; vertical-align: middle; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } .header-submenu-item-link svg use { transform:translateX(-6px); transition: transform 0.5s cubic-bezier(.77,0,.175,1); } .header-submenu-item-link span { padding-right:10px; } .header-submenu-item-link.active { color:#00CBEA; } .header-submenu-item-link.active svg use { transform:translateX(0px); } .header-submenu-item-link:hover svg use { transform:translateX(0px); } .header-submenu-item-link:hover { color:#00CBEA; } .header-menu-item:hover .header-submenu { max-height:200px; } .button-open-submenu { display:none; } /* Mobile Languages / Search */ .mobile-menu-footer { display: none; } /* Has no hero */ .has-no-hero .header { color: #00578C; } .has-no-hero .header-languages { color:rgba(0, 87, 140, 0.6); } .has-no-hero .header-languages .active { color:#00578C; } /* Condensed */ .logo-marque { width: 70.16px; height: 87px; position: absolute; padding: 12px 0; left: 81px; transform:translateY(-87px); transition: transform 1s cubic-bezier(.77,0,.175,1); } .header.is-condensed .container { color: #00578C; transform: translateY(0); } .header.is-condensed:after { transform: translateY(0); } .header.is-condensed .header-languages { color:rgba(0, 87, 140, 0.6); } .header.is-condensed .header-languages .active { color:#00578C; } .header.is-condensed .logo-marque { transform: translateY(0); } .header.is-condensed .header-logo { transform: translateY(-112px); box-shadow:none; } /* Hidden */ .header.is-hidden .container { transform: translateY(-112px); } .header.is-hidden:after { transform: translateY(-100%); } .header.is-hidden .header-logo { transform: translateY(-112px); box-shadow:none; } /* Hover */ .header.is-hidden:hover .container { transform: translateY(0); } .header.is-hidden:hover:after { transform: translateY(0); } /* Loading : Homepage */ .is-loading .header { transform: translateY(-112px) !important ;} /* ========================================================================== Layout : Text & Image ========================================================================== */ .layout-text-image .grid { grid-gap: 7.042253521126761%; } .layout-text-image article { line-height: 1.55; } .layout-text-image figure { position: relative; } .layout-text-image h2 { line-height: 1.25; margin-bottom: 12px; } .layout-text-image h2.no-standfirst { margin-bottom: 38px; } .layout-text-image h3 { margin-bottom: 32px; line-height: 1.5; } .layout-text-image p { margin-bottom: 25px; } .layout-text-image p a { color: #00578C; text-decoration: underline; } .layout-text-image p a:after { content:''; height: 20px; width:20px; background-image:url('images/icon-right-circle.svg'); background-size:100% auto; margin-left:10px; display: inline-block; vertical-align: middle; } .layout-text-image p:last-of-type { margin-bottom: 0; } .layout-text-image .button-cta { margin-top: 30px; } /* Image off grid */ .layout-text-image.is-off-grid.has-text-left .grid, .layout-text-image.is-off-grid.has-text-right .grid { grid-gap: 7.042253521126761%; } .layout-text-image.is-off-grid.has-text-left .grid { grid-template-columns: auto 60.563380281690141%; } .layout-text-image.is-off-grid.has-text-right .grid { grid-template-columns: 60.563380281690141% auto; } .layout-text-image.is-off-grid.has-text-left figure { margin-right: -7.738095238095238vw; } .layout-text-image.is-off-grid.has-text-right figure { margin-left: -7.738095238095238vw; } /* Text Left */ .layout-text-image.has-text-left .grid { grid-template-columns: auto 55.555555555555556%; grid-gap:7.936507936507937%; } /* Text Right */ .layout-text-image.has-text-right .grid { grid-template-columns: 55.555555555555556% auto; grid-gap:7.936507936507937%; } .layout-text-image.has-text-right article { grid-column: 2; grid-row: 1;} .layout-text-image.has-text-right figure { grid-column: 1; grid-row: 1; } /* Text Below : Columns */ .layout-text-image.has-text-below-columns .grid { grid-gap:40px; } .layout-text-image.has-text-below-columns article { display:grid; grid-gap: 20px; grid-template-columns: repeat(3, 1fr); } .layout-text-image.has-text-below-columns figure { grid-row: 1; grid-column: 1/-1; } .layout-text-image.has-text-below-columns .text { grid-column: span 2; columns: 2; column-gap: 20px; } .layout-text-image.has-text-below-columns .button-cta { margin-top: 30px; } /* Text Below */ .layout-text-image.has-text-below .grid { grid-gap: 50px; padding-top:50px;} .layout-text-image.has-text-below figure { grid-row: 1; } .layout-text-image.has-text-below article { grid-row: 2; display: flex; flex-direction: row; } .layout-text-image.has-text-below article .text { max-width: 36.507936507936508%; margin-left: auto; } .layout-text-image.has-text-below .titles{ max-width: 43.661971830985915%; margin-top:4px; } /* Text Bottom */ .layout-text-image.has-text-bottom article { display: flex; flex-direction: column; } .layout-text-image.has-text-bottom h2 { margin-top: auto; } .layout-text-image.has-text-bottom .text p:last-of-type { margin-bottom: 0; } .layout-text-image.has-text-bottom .button-cta { margin: 40px auto 0 0; } /* Read More */ .text-read-more { max-height: 0; overflow: hidden; transition: max-height 1s cubic-bezier(.77,0,.175,1); margin-top: 25px; } .text-read-more.is-visible { max-height: 1000px; } .text-read-more.is-visible .button-text-read-more { display: none; } .text-read-more.is-visible + .button-text-read-more svg { transform:rotate(-180deg); } .text-read-more.is-visible + .button-text-read-more span { opacity: 0; } .layout-text-image .text-read-more p:last-of-type { margin-bottom: 25px; } /* Background */ .bg-light-blue.layout-text-image .grey { color: #00578C; } /* Map */ .layout-text-image .has-map .map { right: auto; width: 50%; } /* Remove margin next to masterplan */ .layout-text-image.mb + .layout-masterplan { margin-top: -150px; } /* ========================================================================== Layout : Text & Video ========================================================================== */ .layout-text-video .grid { grid-gap: 50px; } .layout-text-video figure { grid-row: 1; position: relative; } .layout-text-video article { grid-row: 2; display: flex; flex-direction: row; line-height: 1.55; } .layout-text-video article .text { max-width: 36.507936507936508%; margin-left: auto; } .layout-text-video .titles{ max-width: 43.661971830985915%; margin-top:4px; } .layout-text-video h2 { line-height: 1.25; margin-bottom: 12px; } /* ========================================================================== Layout : Text & Two images ========================================================================== */ .layout-text-two-images .grid, .layout-text-two-images h2 { max-width:66.197183098591549%; width:100%; margin-left: auto; margin-right: auto; } .layout-text-two-images h2 { margin-bottom:62px; text-align: left; } .layout-text-two-images h3 { margin-bottom:10px; line-height: 1.375; } .layout-text-two-images figure { margin-bottom: 52px; } .layout-text-two-images .text { line-height: 1.5; } .layout-text-two-images .column-left p:first-of-type { font-size:18px; color:#000; margin-bottom: 29px; } .layout-text-two-images .column-right { padding-top:22.993492407809111%; } .layout-text-two-images .column-right figure { margin-bottom: 54px; } .layout-text-two-images .button-cta { margin-top:48px; } /* ========================================================================== Layout : Text, Image & Background ========================================================================== */ .layout-text-image-background article { background: #FFF; line-height: 1.5; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; } .layout-text-image-background .grid { grid-gap:0; } .layout-text-image-background figure { position: relative; z-index: 0; } .layout-text-image-background h2 { margin-bottom: 13px; line-height: 1.25; } .layout-text-image-background h2.no-standfirst { margin-bottom: 40px; } .layout-text-image-background h3 { margin-bottom: 30px; } .layout-text-image-background p:last-of-type { margin-bottom:0; } .layout-text-image-background .button-cta { margin-top: 36px; margin-right: auto; } /* Text Left */ .has-text-left.layout-text-image-background article { grid-column: 1; } .has-text-left.layout-text-image-background figure { grid-column: 2; } /* Text Right */ .has-text-right.layout-text-image-background article { grid-column: 2; grid-row: 1; } .has-text-right.layout-text-image-background figure { grid-column: 1; grid-row: 1; } /* Text : Side by side */ .has-side-by-side.layout-text-image-background article { position: relative; } .has-side-by-side.layout-text-image-background .grid { grid-template-columns: 50% 50%; } .has-side-by-side.layout-text-image-background .scroll { position: absolute; top:65px; bottom: 65px; left:14.285714285714286%; right: 14.285714285714286%; overflow: hidden; flex-direction: column; justify-content: center; margin: auto; display: flex; padding-bottom: 30px; } .has-side-by-side.layout-text-image-background .scroll + .button-cta { display: none; position: absolute; left:14.285714285714286%; bottom:30px; } .has-side-by-side.layout-text-image-background .scroll.ps--active-y { display:block; padding-right:42px; bottom: 133px; } .has-side-by-side.layout-text-image-background .scroll.ps--active-y .button-cta { visibility: hidden; } .has-side-by-side.layout-text-image-background .scroll.ps--active-y + .button-cta { display: inline-block; } /* Founder */ .has-founder.layout-text-image-background { position: relative; /* padding-top:220px; */ z-index: 0; } .has-founder.layout-text-image-background .grid { grid-gap:20px; padding: 0; } .has-founder.layout-text-image-background article { background: transparent; color: #FFF; grid-column-start: 9; grid-column-end: 16; padding: 0; margin-top:110px; } .has-founder.layout-text-image-background figure { grid-column-start: 3; grid-column-end: 7; position: relative; z-index: 1; margin-right: -20px; } .has-founder.layout-text-image-background em { color:#00cbea; font-size:16px; } .has-founder.layout-text-image-background h2 { line-height:1.25; margin-bottom: 27px; position: relative; } .has-founder.layout-text-image-background h2 > span:first-of-type { margin-left: -18px; } .has-founder.layout-text-image-background h3 { line-height: 1.461; margin-bottom: 19px; } .has-founder.layout-text-image-background p { color: #FFF; } .has-founder.layout-text-image-background .motif { height: 120px; position: absolute; top:94px; left:-1px; right:0; background-image: url('images/motif-blue.svg'); background-size: auto 100%; background-repeat: no-repeat; background-position: top left; z-index: 0; } /* Map */ .has-map { cursor: pointer; } .has-map .map { position: absolute; top:0; left:0; right:0; bottom: 0; padding: 60px; visibility: hidden; z-index: 2; transition: all 0.3s cubic-bezier(.77,0,.175,1); opacity: 0; background: rgba(255,255,255,0.4); display: flex; align-items: center; } .is-visible .map { visibility: visible; opacity: 1; } .button-view-map { width: 48px; height: 48px; position: absolute; top:5px; left:5px; background: rgba(252,252,252,0.96); transition: background 0.3s cubic-bezier(.77,0,.175,1); color:#00578C; z-index: 3; } .button-view-map svg { fill:currentColor; } .button-view-map .icon-close { position: absolute; top:0; left:0; visibility: hidden; } .is-visible .button-view-map .icon-marker { visibility: hidden; } .is-visible .button-view-map .icon-close { visibility: visible; } /* ========================================================================== Layout : Icons ========================================================================== */ .layout-icons ul { grid-row-gap: 80px; } .layout-icons li { list-style-type: none; text-align: center; } .layout-icons svg { margin: auto auto 12px auto; height: 45px; width:auto; max-width: 62px; } .layout-icons h2 { margin-bottom: 80px; } .layout-icons h3 { line-height: 1.16; letter-spacing: 2px; } .layout-icons p { max-width: 180px; margin: auto; } .layout-icons .is-inview .has-text-animation { opacity: 1; transform: translateY(0); } /* ========================================================================== Layout : Text, Image & Background ========================================================================== */ .layout-cta { text-align: center; background: #E3EFF0; } .layout-cta:before { content:''; height: 121px; background: #FFF; background-image: url('images/motif-blue.svg'); background-size: auto 100%; background-repeat: no-repeat; background-position: top left; display: block; } .layout-cta .button-cta { margin: 36px auto; height: 47px; line-height: 45px; } /* ========================================================================== Layout : FAQs ========================================================================== */ .layout-faqs h2 { margin-bottom: 80px; } .layout-faqs h3 { margin-bottom: 34px; } .layout-faqs dl { border-bottom: 1px solid #00578C; padding-bottom: 7px; margin-bottom: 50px; } .layout-faqs dl:last-of-type { margin-bottom: 0; } .faq { margin-bottom: 60px; border-bottom: 1px solid #00cbea; } .question { position: relative; cursor: pointer; padding-right: 40px; } .question svg { position: absolute; width: 20px; height: 20px; bottom: 0; right:10px; transition: transform 1s cubic-bezier(.77,0,.175,1); fill:currentcolor; } .question span { display: inline-block; max-width: 640px; } .answer p { max-width: 800px; line-height: 1.5; } .answer p:first-of-type { padding-top:20px; } .accordion { max-height: 0; overflow: hidden; transition: max-height 1s ease-out; } .is-open .accordion { transition: max-height 1s ease-in; } .is-open .answer { max-height: 500px; } .is-open .question svg { transform:rotate(-180deg); } /* ========================================================================== Layout : Directions ========================================================================== */ .directions-title { grid-column-start: 2; grid-column-end: 18; margin-bottom: 24px; } .directions-text { grid-column-start: 2; grid-column-end: 7; line-height: 1.5; } .directions-text em { font-size:14px; color:#000; } .directions-times { grid-column-start: 8; grid-column-end: 18; margin-bottom: 90px; } .directions-times em { font-weight: 400; display: block; } .transport-mode-links { grid-column-start: 2; grid-column-end: 7; } .transport-modes-title { border-bottom: 1px solid #3BBDDE; padding-bottom: 22px; margin-bottom: 36px; } .transport-mode-link { display: block; line-height: 1.92; transition: color 0.5s cubic-bezier(.77,0,.175,1); } .transport-mode-link svg { width: 20px; height: 20px; margin: auto auto auto 12px; vertical-align: middle; transform:rotate(-90deg); transition: opacity 0.5s cubic-bezier(.77,0,.175,1); fill:#00578C; overflow: hidden; } .transport-mode-link svg use { transform:translateY(-20px); transition: transform 0.5s cubic-bezier(.77,0,.175,1); } .transport-mode-link.active, .transport-mode-link:hover.active { color: #00578C; } .transport-mode-link.active svg use { transform:translateY(0px); } .transport-mode-link:hover { color:#00CBEA; } .transport-mode { grid-column-start: 8; grid-column-end: 18; display: none; margin-top: 53px; grid-column-gap:100px; border-top: 1px solid #3BBDDE; } .transport-mode.active { display: grid; } .transport-mode-title { margin-top: 46px; margin-bottom: 4px; grid-column: 1/-1; } .transport-mode-title em { font-weight: normal; } .transport-mode-section { border-top: 1px solid #3BBDDE; padding-top: 42px; padding-bottom: 100px; } .transport-mode-section h4 { margin-bottom: 10px; } .transport-mode-section p { line-height: 2; } .transport-mode-section:nth-of-type(1), .transport-mode-section:nth-of-type(2) { border: 0; padding-top:0; } /* ========================================================================== Layout : Banners ========================================================================== */ .layout-banners { grid-gap:20px; } .layout-banners .grid { grid-gap:0; } .layout-banners.has-bg { margin-bottom: 0; } .banner { position: relative; z-index: 0; overflow: hidden; } .banner picture { transform: scale(1.01); } .banner:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; background-image: linear-gradient(0deg, #000000 0%, rgba(0,0,0,0.00) 100%); z-index: 1; display: block; height: 60%; } .banner-caption { position: absolute; left:30px; right:30px; bottom: 30px; color: #FFF; z-index: 2; } .banner-caption h3 { margin-bottom: 12px; } .banner-caption p { margin-bottom: 32px; } /* 4 Column Variant */ .layout-banners .columns-4 { display: flex; flex-direction: row; height: 37.632607481853713vw; } .layout-banners .columns-4 p { margin-bottom: 0; } .layout-banners .columns-4 picture { height: 100%; } .layout-banners .columns-4 .banner { width: 25%; will-change:width; transition: width 1s cubic-bezier(.77,0,.175,1); cursor: pointer; overflow: hidden; } .layout-banners .columns-4 .banner:after { height: 30%; background-image: linear-gradient(0deg, #000000 0%, rgba(0,0,0,0.34) 51%, rgba(0,0,0,0.00) 77%); transition: height 0.5s cubic-bezier(.77,0,.175,1); } .layout-banners .columns-4 .banner-caption { display: flex; flex-direction: column; justify-content: space-between; transition: opacity 1s cubic-bezier(.77,0,.175,1); width:calc(25vw - 60px); } .layout-banners .columns-4 .banner-caption-mask { max-height: 0; transition: max-height 0.5s cubic-bezier(.77,0,.175,1); overflow:hidden; } .layout-banners.is-open .columns-4 .banner { width:20%; } .layout-banners.is-open .columns-4 .banner.is-active { width:40%; } .layout-banners.is-open .banner-caption { opacity: 0; } .layout-banners.is-open .is-active .banner-caption { opacity: 1; } .layout-banners.is-open .is-active .banner-caption-mask { max-height: 100px; } .layout-banners.is-open .columns-4 .banner:after { height:50%; } /* 5 Column Variant */ .layout-banners .columns-5 { display: flex; flex-direction: row; height: 37.632607481853713vw; } .layout-banners .columns-5 p { margin-bottom: 0; } .layout-banners .columns-5 picture { height: 100%; } .layout-banners .columns-5 .banner { width: 20%; will-change:width; transition: width 1s cubic-bezier(.77,0,.175,1); cursor: pointer; overflow: hidden; } .layout-banners .columns-5 .banner:after { height: 30%; background-image: linear-gradient(0deg, #000000 0%, rgba(0,0,0,0.34) 51%, rgba(0,0,0,0.00) 77%); transition: height 0.5s cubic-bezier(.77,0,.175,1); } .layout-banners .columns-5 .banner-caption { display: flex; flex-direction: column; justify-content: space-between; transition: opacity 1s cubic-bezier(.77,0,.175,1); width:calc(25vw - 60px); } .layout-banners .columns-5 .banner-caption-mask { max-height: 0; transition: max-height 0.5s cubic-bezier(.77,0,.175,1); overflow:hidden; } .layout-banners.is-open .columns-5 .banner { width:16%; } .layout-banners.is-open .columns-5 .banner.is-active { width:36%; } .layout-banners.is-open .banner-caption { opacity: 0; } .layout-banners.is-open .is-active .banner-caption { opacity: 1; } .layout-banners.is-open .is-active .banner-caption-mask { max-height: 100px; } .layout-banners.is-open .columns-5 .banner:after { height:50%; } /* ========================================================================== Layout : Title ========================================================================== */ .layout-title { margin-bottom: 78px; } .layout-title.has-bg { margin-bottom: 0; } .layout-title.has-bg + .has-bg { margin-top: -100px; padding-top: 0; } .layout-title.is-centre { text-align: center; } .layout-title.is-centre h2 { margin-left: auto; margin-right: auto; max-width: none; } .layout-title.is-centre h3 { margin-top:20px; } .layout-title h2 { max-width: 870px; width: 100%; } .layout-title h3 { line-height: 1.5; max-width: 780px; width: 100%; margin: 22px auto auto auto; } .layout-title .subtitle { max-width: 460px; } .layout-title .subtitle.before { margin: 0 auto 10px auto; } .layout-title.is-left .subtitle.before { margin-left: 0; } .layout-title.is-left .subtitle { margin-left: 0; } /* ========================================================================== Slider ( old / tbc ? ) ========================================================================== */ /* Slider */ .slider-navigation { position: relative; line-height: 60px; display: flex; flex-direction:row; justify-content: center; margin: 28px auto auto auto; } .slider-navigation svg { width: 100%; height: 100%; fill:#00578c; } .slider-button-prev { margin: 0 15px 0 auto; } .slider-button-next { margin: 0 -23px 0 0; } .slider-button-prev, .slider-button-next { width: 60px; height: 60px; min-width: 60px; cursor: pointer; } .swiper-pagination-bullets { display:flex; width: 100%; position: relative; } .swiper-pagination-bullets:after { content:''; height: 1px; width: 100%; z-index: 0; background: #00578C; position: absolute; left:0; right:0; margin: auto; top:0; bottom: 0; } .slider-pagination-bullet { background: transparent; width: auto; display: inline-block; flex-grow: 1; position: relative; cursor: pointer; } .slider-pagination-bullet.swiper-pagination-bullet-active { background: none; } .slider-pagination-bullet.swiper-pagination-bullet-active:after { content:''; background:#00578C; height: 5px; position: absolute; top:0; bottom: 0; left:0; right:0; margin: auto; } .swiper-button-disabled { opacity: 0.5; } /* ========================================================================== Layout : Videos ========================================================================== */ .layout-videos.has-bg { padding: 100px 0; } .layout-videos .video-text-container {width:100%;} .layout-videos h2 { margin-bottom: 42px; line-height: 1.25; margin-bottom: 12px;} .layout-videos h4 { margin-bottom: 8px; } .layout-videos h5 { margin-bottom: 6px; } .layout-videos .standfirst {grid-column-start: 1; grid-column-end: 7;} .layout-videos .videos-intro { margin: 0 0 32px 0; line-height: 1.5; font-size: 18px; grid-column-start: 1; grid-column-end: 10;} .layout-videos .videos-intro h3 {font-size: 18px; } .video-embed-container { z-index: 1; background: #f4f4ef; position: relative; height: 0; padding-top:56.25%; overflow: hidden; } .video-embed-container iframe, .video-embed-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } .video-embed-container img { z-index: 1; object-fit:cover; } .video-embed-container iframe { opacity: 0; } .video-embed-container:after { content: ''; background-image: linear-gradient(0deg, #000000 0%, rgba(0,0,0,0.00) 100%); height: 48%; position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; } .video-slide-container { position: relative; z-index: 0; background: #f4f4ef; } .video-caption { position: absolute; left:40px; right: 40px; bottom: 40px; z-index: 2; } .video-caption .icon-play { width: 66px; height: 66px; margin-bottom: 10px; fill: #FFF; cursor: pointer; } .video-buttons { margin-top: 14px; display: flex; } .video-buttons a { margin-right: 20px; } .video-buttons a:last-of-type { margin-right: 0; } /* Thumbnails */ .video-thumbnails-wrapper { position: relative; overflow: visible; } .video-thumbnails { margin-top:30px; } .video-thumbnails .image { margin-bottom: 6px; } .video-thumb-container { cursor: pointer; } .video-thumb-container .icon-play { position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; width: 40px; height: 40px; fill: currentColor; color: #FFF; margin: auto; } .button-video-gallery { position: absolute; top:0; left: 100%; background: #f7f7f7; margin-left:20px; bottom: 137px; width: 17.857142857142857vw; } .button-video-gallery .button-read-more { position: absolute; top: 0; bottom: 0; margin: auto; left: 20px; } /* Playing */ .is-playing .video-embed-container img, .is-playing .video-caption { opacity:0; visibility: hidden; } .is-playing .video-embed-container:after { display: none; } .is-playing .video-embed-container iframe { z-index: 3; opacity: 1; } /* Navigation */ .video-navigation { line-height: 40px; max-width: 870px; width: 100%; display: flex; flex-direction: row; margin: 50px auto auto auto; } .video-navigation svg { width: 40px; height: 40px; fill: #00578c; } .video-button-prev, .video-button-next { cursor: pointer; } .video-button-prev { margin-left: 50px; } .video-button-next { margin-left: 40px; } .video-pagination { display: flex; width: 100%; align-items: stretch; flex-direction: row; } .video-pagination-bullet { margin: 19px 0; background: #80abc5; display: block; flex-grow: 1; } .video-pagination-bullet.swiper-pagination-bullet-active { margin: 18px 0; background: #00578c; } /* No pagination ( homepage variant ) */ .layout-videos.has-no-pagination .swiper-slide-thumb-active { } /* ========================================================================== Layout : Timeline ========================================================================== */ .layout-timeline { background: #D9F1F1; overflow:hidden; } .layout-timeline h3 { line-height: 1.6; margin-top: 30px; } .layout-timeline h4 { margin-bottom: 35px; } .layout-timeline p { line-height: 1.555; } .layout-timeline .swiper-slide { height: auto; /* overflow: hidden; */ } .layout-timeline .swiper-container { overflow: visible; } .layout-timeline .slider-navigation { margin-top:38px; } .timeline-swiper { grid-column-start: 2; grid-column-end: 18; } .timeline-header { grid-column-start: 2; grid-column-end: 8; } .timeline-title { margin-bottom: 15px; } .timeline-text { grid-column-start: 12; grid-column-end: 18; line-height: 1.555; margin-bottom: 60px; } .timeline-entry { background: #FFFFFF; padding: 30px; height: calc(100% - 60px); } .timeline-intro { margin: auto; line-height: 1.555; margin-bottom: 116px; } .timeline-entry-text { margin-bottom: 0; } .timeline-entry, .timeline-entry-year, .timeline-entry-text { opacity: 0; transition: opacity 0.5s cubic-bezier(.77,0,.175,1); } .timeline-entry { opacity: 0.6; } .timeline-entry-year, .timeline-entry-text { opacity: 0; } .swiper-slide-visible .timeline-entry, .swiper-slide-visible .timeline-entry-year, .swiper-slide-visible .timeline-entry-text { opacity: 1; } /* ========================================================================== Layout : Text with Read Mores ========================================================================== */ .layout-text-readmore article, .layout-text-readmore figure { grid-row:1; } .layout-text-readmore p { line-height:1.5; } .layout-text-readmore h4 { margin-bottom: 34px; } .has-image-right.layout-text-readmore article { grid-column-start: 2; grid-column-end: 8; } .has-image-right.layout-text-readmore figure { grid-column-start: 9; grid-column-end: 18; } .has-image-left.layout-text-readmore article { grid-column-start: 12; grid-column-end:18; } .has-image-left.layout-text-readmore figure { grid-column-start: 2; grid-column-end: 11; } /* ========================================================================== Layout : About ========================================================================== */ .about-titles { grid-column-start: 2; grid-column-end: 8; } .about-titles h2 { margin-bottom: 15px; } .about-text { grid-column-start: 12; grid-column-end: 18; line-height: 1.5625; margin-bottom: 122px; } .leadership-title, .development-title, .leadership-listing, .development-listing { grid-column-start: 2; grid-column-end: 18; } .leadership-title { margin-bottom: 32px; } .leadership-listing { grid-row-gap:100px; margin-bottom: 145px; } .leadership-image { grid-column: span 3; grid-row:span 2; } .leadership-person { grid-row-gap: 0; margin-bottom: auto; } .leadership-person-text { line-height: 1.55; } .leadership-person-text, .leadership-person-titles { grid-column: span 5; } .leadership-person-text .button-text-read-more { color:#00cbea; } .leadership-person-text svg { fill:currentcolor; } .leadership-person-title { margin-bottom: 6px; } .leadership-person-position { margin-bottom:26px; font-weight: normal; } .development-title { margin-bottom: 30px; } .development-listing { grid-row-gap:50px; } .development-partner { border-bottom: 1px solid #00cbea; position: relative; margin-bottom: 35px; } .development-partner h4 { padding: 6px 0; line-height: 1.555555; position: relative; padding-right: 40px; cursor: pointer; } .development-partner svg { width: 20px; height: 20px; position: absolute; right: 10px; top: 10px; transition: transform 1s cubic-bezier(.77,0,.175,1); transform: rotate3d(0,0,1,0deg); background: #00CBEA; border-radius: 10px; overflow:hidden; } .development-partner.is-open .accordion { max-height: 300px; } .development-partner.is-open svg { transform: rotate3d(0,0,1,180deg); } .development-partner .accordion { line-height: 1.888888888888889; } /* ========================================================================== Layout : Masterplan ========================================================================== */ .layout-masterplan { width: 100%; height: 100vh; position: relative; overflow: hidden; font-size:0; z-index: 0; } .layout-masterplan canvas { width:100%; height: 100%; pointer-events: none; object-fit: cover; } .layout-masterplan .container { position: absolute; top:0; left: 0; right: 0; height: 100%; z-index: 2; } .layout-masterplan .sticky-container { height: 100%; } .masterplan-inner { width: 100vw; height:100vh; position: relative; } .canvas-container { position: relative; height: 100%; width: 100%; z-index: 0; } .container-caption-top { pointer-events: none; } /* Title */ .masterplan-title { position: absolute; bottom: 30px; left: 50px; transition: all 0.5s cubic-bezier(.77,0,.175,1); opacity: 0; transform:translateY(-20px); z-index: 2; } .masterplan-title h3 { margin-bottom: 12px; } /* Title : Top */ .masterplan-title.has-caption-top { margin-top:156px; position: static; } .masterplan-title.has-caption-top h3 { margin-bottom: 9px; } .masterplan-title.has-caption-top h4 { margin-bottom: 28px; } /* Title : Faded */ .masterplan-title.is-visible { opacity:1; transform:translateY(0);} /* Caption */ .masterplan-caption { position: absolute; max-width: 440px; color: #FFF; line-height: 1.333; opacity: 0; transition: opacity 0.5s cubic-bezier(.77,0,.175,1); } .masterplan-caption.top-left { left:50px; top:124px; } .masterplan-caption.bottom-left { left:50px; bottom:30px; } .masterplan-caption.top-right { right:50px; top:124px; } .masterplan-caption.bottom-right { right:50px; bottom:30px; } .masterplan-caption.is-visible { opacity: 1; } .masterplan-caption p { margin: 4px 0 0 0; } /* Caption : Boxed */ .masterplan-caption.is-boxed { background-image:url('images/caption-bg.png'); background-size:cover; padding: 20px; max-width: 440px; color: #FFF; line-height: 1.333; } /* Skip */ .button-skip { height: 48px; line-height: 48px; color:#00578c; transition: opacity 0.5s cubic-bezier(.77,0,.175,1); position: absolute; bottom: 30px; left:0; right:0;margin: auto; border-radius: 24px; background: rgb(255,255,255); width:100px; z-index: 10; opacity: 0; visibility: hidden;} .is-skip .button-skip { opacity: 1; visibility: visible;} html[lang="el"] .button-skip { width: 140px; } /* Play */ .button-masterplan-play { width: 120px; height: 120px; position: absolute; top:0; left: 0; bottom: 0; right: 0; margin: auto; display: none; } .button-masterplan-play svg { width: 100%; height: 100%; vertical-align: top; } .is-play .button-masterplan-play { display: block; } /* Status */ .is-play .masterplan-status { display: none; } .is-loading .masterplan-status .loading { opacity: 1; } .is-ready .masterplan-status .loaded { opacity: 1; } .is-skip .masterplan-status { opacity: 0; } .masterplan-status { background: #FFFFFF; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50); border-radius: 24px; font-size: 16px; color: #00578C; letter-spacing: 0; width: 128px; height: 48px; position: absolute; top:0; left: 0; right: 0; bottom: 0; margin: auto; line-height: 48px; transition: opacity 0.5s cubic-bezier(.77,0,.175,1); } .masterplan-status .loading, .masterplan-status .loaded { display: flex; flex-direction: row; align-items: center; justify-content: center; opacity: 0; position: absolute; top:0; left: 0; right: 0; bottom: 0; } .masterplan-status .loading { transition: opacity 0.5s cubic-bezier(.77,0,.175,1); } .masterplan-status .loaded { transition: opacity 0.5s cubic-bezier(.77,0,.175,1) 0.5s; } .masterplan-status .loaded svg { width: 15px; height: 34px; vertical-align: middle; margin-top: -3px; margin-left: 5px; } html[lang="el"] .masterplan-status { width: 170px; } /* Loading */ .loading-indicator { width: 18px; display: flex; flex-direction: row; height: 4px; margin-left: 8px; justify-content: space-between; } .loading-indicator .dot { animation: loading 1.3s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); width: 4px; height: 4px; background: #00578C; border-radius: 50%; overflow: hidden; justify-content: space-around; } .loading-indicator .dot:nth-of-type(1) { } .loading-indicator .dot:nth-of-type(2) { animation-delay: 0.2s; } .loading-indicator .dot:nth-of-type(3) { animation-delay: 0.4s; } /* ========================================================================== Layout : Map ========================================================================== */ .layout-map { grid-column: 1/-1;} .map { position: relative; z-index: 0; } .marker { position: absolute; background: #095b8d; color:#FFF; min-width: 90px; text-align: center; transform:translateX(-50%) translateY(-70%); padding: 5px 18px; margin: -8px 0 0 0; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.30); transition: opacity 0.3s cubic-bezier(.77,0,.175,1), transform 0.3s cubic-bezier(.77,0,.175,1); opacity: 0; max-width: 180px; } .marker:hover { z-index: 20; } .marker:after { content:''; width: 0; height: 0; border-style: solid; border-width: 8px 8px 0 8px;border-color: #095b8d transparent transparent transparent; position: absolute; left:0; right:0; margin: 0 auto; bottom:-8px; position: absolute; } .marker-marina-residential-tower { max-width:160px; } .map-toggle { position: absolute; width: 60px; height: 30px; top:15px; right:15px; display: flex; flex-direction: row; z-index: 2; opacity: 0; transition: opacity 0.3s cubic-bezier(.77,0,.175,1) 3.0s; } .map-toggle button { width: 30px; height: 26px; background: #d8d8d8; border: 1px solid #FFF; } .map-toggle button:first-of-type { border-right-color:transparent; } .map-toggle button:last-of-type { border-left-color:transparent; } .map-toggle .active { background: #095b8d; color: #FFF; border-color:#095b8d;} .map-toggle svg { fill:currentcolor; width: 40px; height: 40px; margin: -8px -6px; } .has-markers-hidden .marker { visibility: hidden; } .map-markers { position: absolute; top:0; bottom: 0; left:0; right:0; z-index: 1; } .map-markers-mobile { display: none; } .marker:nth-of-type(1) { transition-delay:2.1s; } .marker:nth-of-type(2) { transition-delay:2.2s; } .marker:nth-of-type(3) { transition-delay:2.3s; } .marker:nth-of-type(4) { transition-delay:2.4s; } .marker:nth-of-type(5) { transition-delay:2.5s; } .marker:nth-of-type(6) { transition-delay:2.6s; } .marker:nth-of-type(7) { transition-delay:2.7s; } .marker:nth-of-type(8) { transition-delay:2.8s; } .marker:nth-of-type(9) { transition-delay:2.9s; } .marker:nth-of-type(10) { transition-delay:3.0s; } .marker:nth-of-type(11) { transition-delay:3.1s; } .marker:nth-of-type(12) { transition-delay:3.2s; } .marker:nth-of-type(13) { transition-delay:3.3s; } .marker:nth-of-type(14) { transition-delay:3.4s; } .is-inview .marker { opacity: 1; transform:translateX(-50%) translateY(-100%);} .is-inview .map-toggle { opacity: 1; } /* ========================================================================== Layout : Simple text ========================================================================== */ .layout-simple-text div.text { margin-top:32px; } /* ========================================================================== Layout : Stats ========================================================================== */ .layout-stats ul { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; } .layout-stats li { list-style-type: none; } .layout-stats h2 { margin-bottom: 82px; } .layout-stats h3 { margin-bottom: 4px; } .layout-stats p { line-height: 1.5; } .layout-stats.has-border { margin-bottom:100px; } .layout-stats.has-border ul { border-bottom:1px solid #979797; padding-bottom:88px; } .layout-stats .columns-4 li { width:25%; margin-bottom: 20px; } /* ========================================================================== Layout : Hero ========================================================================== */ .layout-hero { overflow: hidden; margin-bottom: 80px; } .layout-hero.is-edge-to-edge { margin-top: 0; } .layout-hero.is-contained { margin: 87px auto 80px auto; padding: 0 50px; } /* Text below / Text Right */ .layout-hero h2 { margin-bottom: 41px; grid-column: 1/-1; } .layout-hero .text { line-height: 1.5; } /* Text below */ .layout-hero.has-text-below { margin-right: auto; margin-left: auto; margin-top: 174px; } .layout-hero.has-text-below .standfirst { grid-column-start: 2; grid-column-end: 8; } .layout-hero.has-text-below .text { grid-column-start: 12; grid-column-end: 18; } .layout-hero.has-text-below .image { margin-bottom: 56px; min-height: calc(100vh - 291px); } .layout-hero.has-text-below h2 { margin-left: 46px; } .layout-hero.has-text-below h3 { margin-bottom: 17px; } /* Text Below & Title Below */ .layout-hero.has-image-text-title-below { margin-top: 87px; } .layout-hero.has-image-text-title-below h2 { grid-column-start: 2; grid-column-end: 8; } .layout-hero.has-image-text-title-below h3 { margin-bottom: 30px; line-height: 1.5; } .layout-hero.has-image-text-title-below article { grid-column-start: 12; grid-column-end: 18; line-height: 1.5; } .layout-hero.has-image-text-title-below picture { margin: 0 50px 80px 50px; width: auto; min-height:calc(100vh - 110px); } /* Text Overlaid */ .layout-hero.has-text-overlaid .standfirst { grid-column-start: 2; grid-column-end: 8; } .layout-hero.has-text-overlaid .text { grid-column-start: 12; grid-column-end: 18; } .layout-hero.has-text-overlaid picture, .layout-hero.has-text-overlaid video { width: 100%; height: 100% } .layout-hero.has-text-overlaid h3 { margin-bottom: 17px; } .layout-hero.has-text-overlaid h4 { line-height: 1.5; } .layout-hero.has-text-overlaid .image-container { position: relative; z-index: 0; height:100vh; overflow: hidden; } .layout-hero.has-text-overlaid .hero-title { position: absolute; left:50px; bottom: 80px; margin-bottom: 0; z-index: 2; max-width:830px; pointer-events: none; } .layout-hero .hero-text-container { margin-top:80px; } /* Text Right */ .layout-hero.has-text-right .image { grid-column: span 9; } .layout-hero.has-text-right article { grid-column-start: 11; grid-column-end: 17; display: flex; flex-direction: column; justify-content: center;} .layout-hero.has-text-right .text { padding-bottom: 60px; } .layout-hero.has-text-right:after { bottom: 64px; top:auto; right:-50px; } /* Video */ .layout-hero .hero-video-title {position: absolute; z-index: 2; top: 50%; left: 40px; margin: 0; line-height: 1.3125; transform: translateY(-50%); pointer-events: none; } .layout-hero video { width: 100%; height: 100%; object-fit: cover; } .has-title-shadow { height: 100vh; position: relative; margin-bottom: 56px; } /* Gradients */ .layout-hero.has-text-overlaid .image-container:before, .layout-hero.has-text-overlaid .image-container:after, .has-title-shadow:before, .has-title-shadow:after { content:''; position: absolute; left:0; right:0; width:100%; z-index: 1; opacity: 0; transition: opacity 1s cubic-bezier(.77,0,.175,1); pointer-events: none; } .layout-hero.has-text-overlaid .image-container:before, .has-title-shadow:before { top:0; height: 12%; background: linear-gradient( hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.738) 19%, hsla(0, 0%, 0%, 0.541) 34%, hsla(0, 0%, 0%, 0.382) 47%, hsla(0, 0%, 0%, 0.278) 56.5%, hsla(0, 0%, 0%, 0.194) 65%, hsla(0, 0%, 0%, 0.126) 73%, hsla(0, 0%, 0%, 0.075) 80.2%, hsla(0, 0%, 0%, 0.042) 86.1%, hsla(0, 0%, 0%, 0.021) 91%, hsla(0, 0%, 0%, 0.008) 95.2%, hsla(0, 0%, 0%, 0.002) 98.2%, hsla(0, 0%, 0%, 0) 100%); } .layout-hero.has-text-overlaid .image-container:after, .has-title-shadow:after { bottom:0; height: 35%; background: linear-gradient( hsl(0, 0%, 0%) 0%, hsla(0, 0%, 0%, 0.738) 19%, hsla(0, 0%, 0%, 0.541) 34%, hsla(0, 0%, 0%, 0.382) 47%, hsla(0, 0%, 0%, 0.278) 56.5%, hsla(0, 0%, 0%, 0.194) 65%, hsla(0, 0%, 0%, 0.126) 73%, hsla(0, 0%, 0%, 0.075) 80.2%, hsla(0, 0%, 0%, 0.042) 86.1%, hsla(0, 0%, 0%, 0.021) 91%, hsla(0, 0%, 0%, 0.008) 95.2%, hsla(0, 0%, 0%, 0.002) 98.2%, hsla(0, 0%, 0%, 0) 100%); transform:rotate(-180deg); } .hero-loaded .layout-hero.has-text-overlaid .image-container:before, .hero-loaded .has-title-shadow:before { opacity: 0.5; } .hero-loaded .layout-hero.has-text-overlaid .image-container:after, .hero-loaded .has-title-shadow:after { opacity: 0.7; } /* Disable lazyloading animation */ .layout-hero img.lazyload, .layout-hero video.lazyload { clip-path:none; transition:none; } /* ========================================================================== Layout : News ========================================================================== */ .layout-news { overflow: hidden; padding: 100px 0 120px 0;} .layout-news h2 { margin-bottom: 60px; } .layout-news .grid { position: relative; } .tease.news { background: #FFF; padding: 44px 25px 80px 25px; position: relative; } .tease.news time { letter-spacing: 2px; margin-bottom: 2px; display: block; } .tease.news h3 { margin-bottom: 35px; line-height:1.5; } .tease.news h4 { letter-spacing: 2px; margin-bottom: 26px; } .tease.news time + h3 { margin-top: 32px; } .tease.news .button-read-more { position: absolute; left:25px; bottom:40px; } .button-read-more { line-height: 20px; height: 20px; display: inline-block; } .button-read-more svg { width: 20px; height: 20px; margin-right: 1px; } .button-news { position: absolute; left: 100%; margin-left: 20px; top: 0; bottom: 0; display: flex; align-items: flex-end; padding: 44px 25px 42px 25px; background: #fafbfb; width: 23.376484375vw; } .no-touchevents .has-vertical-transition { transition: all 0.5s cubic-bezier(.77,0,.175,1); } .no-touchevents .has-vertical-transition:hover { transform:translateY(-30px); } /* ========================================================================== Page : Newsroom ========================================================================== */ /* Latest News */ .layout-latest-news { padding-top: 180px; } .layout-latest-news h2 { grid-column-start: 2; grid-column-end: 18; } .layout-latest-news h3 { line-height: 1.5; margin-bottom: 16px; } .layout-latest-news h4 { line-height: 1.66; margin-bottom: 26px; } .layout-latest-news article { grid-column-start: 2; grid-column-end: 11; } .layout-latest-news aside { grid-column-start: 12; grid-column-end: 18; } .layout-latest-news time { letter-spacing: 2px; } /* Layout : Newsroom */ .layout-newsroom { overflow:hidden; } .layout-newsroom h2 { margin-bottom: 50px; } .layout-newsroom .swiper-slide { height: auto; } .layout-newsroom .swiper-container { overflow: visible; } .layout-newsroom .slider-navigation { margin-top:79px; } .layout-newsroom .is-hidden { display:none; } .layout-newsroom .tease.news { opacity: 0.6; background: #FFF; height: calc(100% - 86px); } .layout-newsroom .tease.news > * { opacity:0; } .layout-newsroom .swiper-slide.swiper-slide-visible .tease.news { opacity: 1; } .layout-newsroom .swiper-slide.swiper-slide-visible .tease.news { opacity: 1; } .layout-newsroom .swiper-slide.swiper-slide-visible .tease.news > * { opacity:1; } /* Media Kit */ .layout-media-kits h2 { margin-bottom: 55px; } .tease.media-kit { list-style-type: none; border-bottom:1px solid #00CBEA; margin-bottom: 20px; padding-bottom: 20px; position: relative; } .tease.media-kit a { display: flex; padding: 0; line-height: 52px; } .tease.media-kit:last-of-type { border-bottom:0; } .media-kit-size { margin-left: auto; margin-right: 200px; text-align: left; } .media-kit-size { font-weight: normal; } /* Filters */ .newsroom-filters { height: 30px; border: 1px solid #00578C; display: flex; align-items: row; margin: auto auto auto 0; } .newsroom-filters .active { background: #00578C; color: #FFF; } .newsroom-filters button { padding: 0 20px; line-height: 28px; border-right: 1px solid #00578C; min-width: 77px; color: #00578C; } .newsroom-filters button:last-of-type { border-right: 0; } .newsroom-filter-break { display: none; } @media only screen and (min-width:769px) { .newsroom-filters button { width: auto !important; } } /* ========================================================================== Page : Newsroom : Article ========================================================================== */ .layout-article { padding:180px 0 200px 0; } .article-header { margin-bottom: 60px; } .article-header h2 { line-height: 1.25; } .article-header h3 { letter-spacing: 2px; margin-bottom: 20px; } .article-header h3 span { margin-left: 10px; } .article-standfirst { line-height: 1.555; max-width: 690px; margin-bottom: 62px; } .article-text { line-height: 1.5625; } .article-text article { margin-bottom: 24px; } .article-text p { max-width: 1020px; margin-bottom: 26px; } .article-text p a { color: #00578C; text-decoration: underline; } .article-text li { margin: 0 0 10px 12px; list-style-type: none; } .article-text li:before { content: '- '; margin-left: -12px; } .article-text strong { color: #00578C; } .article-text table { width: 100%; border: 1px solid #A3A3A3; border-collapse: collapse; margin-bottom: 20px; } .article-text th { background: #00578C; color: #FFF; font-weight:600; height: 60px; } .article-text td, .article-text th { border: 1px solid #A3A3A3; vertical-align: top; } .article-text th { padding:18px 20px 16px 20px; } .article-text td { padding:12px 20px 22px 20px; } .article-featured-image { margin-bottom: 52px; } .article-subtitle { margin-bottom: 30px; } .article-link { height: 20px; line-height: 20px; display: flex; margin-bottom: 28px; } .article-link svg { width: 20px; height: 20px; margin-left: 4px; vertical-align: top; } .article-columns { max-width: 1020px; grid-gap:100px; } .article-download { height: 40px; line-height: 40px; display: flex; } .article-download svg { fill:#00578C; width: 40px; height: 40px; } /* Table of contents */ .article-table-of-contents { margin: 18px 0 100px 0; } .article-table-of-contents a { text-decoration: underline; display: block; height: 20px; margin-bottom: 14px; } .article-table-of-contents svg { width: 20px; height: 20px; vertical-align: middle; margin-left: 18px; } /* Privacy, Terms etc */ .layout-article-secondary .article-text article { margin-bottom: 65px; } .layout-article-secondary .article-subtitle { font-size: 26px; } /* ========================================================================== Page : Invest ========================================================================== */ .page-invest .layout-hero.has-text-overlaid .hero-title { max-width: 1000px; } /* ========================================================================== Page : Search ========================================================================== */ .page-search { background: #00578c; } .page-search .header { color: #FFF; } .page-search .header:after { background: rgba(0, 87, 140, 0.96); } .page-search .header.is-condensed .container { color: #FFF; } .layout-search { padding: 180px 0 200px 0; } .layout-search h2 { margin-bottom: 52px; } .tease.search { border-bottom: 1px solid #00CBEA; line-height: 1.555555555555556; padding-bottom: 6px; margin-bottom: 58px; position: relative; padding-right: 40px; } .tease.search h3 { letter-spacing: 2px; margin-bottom: 7px; } .tease.search p { margin-bottom: 0; max-width: 1040px; } .tease.search mark { background: transparent; color:#00cbea; } .tease.search .hotspot { position: absolute; top:0; left: 0; bottom: 0; right: 0;} .tease.search .hotspot svg { position: absolute; bottom: 0; right: 0; width: 40px; height: 40px; fill:#FFF; } .tease.search:last-of-type { margin-bottom: 0; } /* ========================================================================== Page : Contact ========================================================================== */ .page-contact .button-contact { display: none; } .page-contact .header { color: #FFF; } .page-contact .header:after { background: rgba(0, 87, 140, 0.96); } .page-contact .header.is-condensed .container { color: #FFF; } .page-contact.has-no-hero .header-languages { color:rgba(255, 255, 255, 0.6); } .page-contact.has-no-hero .header-languages .active { color:#FFF; } .layout-contact { background: #00578C; color:#FFF; padding: 180px 0 150px 0; min-height: 100vh; } .contact-text { grid-column-start: 2; grid-column-end:8; line-height: 1.5; } .contact-forms { grid-column-start: 9; grid-column-end:15; } .contact-title { line-height: 1.25; margin-bottom: 38px; } .contact-form-selector { margin-bottom: 20px; background: #FFF; color:#00578C; } .contact-form { display: none; } .contact-form.active { display:block; } .contact-form a { text-decoration: underline; } .contact-form > p { line-height: 1.5625; } .contact-form .gform_wrapper { display: block !important;} .layout-contact input, .layout-contact select { height: 48px; line-height: 46px; } .layout-contact input, .layout-contact select, .layout-contact textarea { border-color: #00CBEA; font-size: 14px; color: #FFF; padding: 0 10px; width: 100%; } .layout-contact select { background-image:url('images/icon-select.svg'); background-size:40px 40px; background-position:center right; background-repeat: no-repeat; background-color: #00578C; } .layout-contact select.contact-form-selector { background-image:url('images/icon-select_blue.svg'); color:#00578C; background-color:#FFF; } .layout-contact input::placeholder, .layout-contact textarea::placeholder { color:#FFF; } .layout-contact input[type=checkbox] { -webkit-appearance:none; appearance: none; width: 25px; height: 25px; padding: 0; } .layout-contact input[type=checkbox]:checked { background: url('images/icon-tick.svg'); background-size: 13px auto; background-repeat: no-repeat; background-position: center; background-color: #FFF; } .layout-contact input[type=file] { border: 1px solid #00CBEA; margin-bottom: 6px; } .layout-contact textarea { min-height: 144px; padding: 10px; } .layout-contact legend { font-weight: 600; } .layout-contact .gform_hidden { display: none; } .layout-contact .hidden_label label, .layout-contact .hidden_label > legend { display: none; } .layout-contact .hidden_label .gfield_consent_label { display: block; padding: 0; } .layout-contact .gfield_consent_label { font-size: 14px; line-height: 1.5; } .layout-contact .ginput_container_consent { position: relative; padding: 0 40px 0 0; margin-bottom: 4px;} .layout-contact .ginput_container_consent input { position: absolute; top:0; right:0; } .layout-contact .gchoice input { margin:12px 14px 12px 0; vertical-align: top; } .layout-contact .gchoice label { cursor: pointer; } .layout-contact .gform_button { background: #FFF; color: rgba(0, 87, 140, 1.00); position: relative; padding:0 20px 0 50px; width: auto; margin-left: auto; height: 48px; line-height: 48px; font-size: 14px; font-weight: 600; } .layout-contact .gform_button svg { fill:#00578c; } .layout-contact .gform_footer { display: flex; position: relative; } .layout-contact .gform_footer:before { content:'* Mandatory fields'; font-size: 14px; } .layout-contact .gform_button svg { width: 40px; height: 40px; top:0; bottom: 0; left:10px; margin: auto; position: absolute; } .layout-contact .validation_error { margin-bottom: 18px; } .layout-contact .gfield { margin-bottom: 18px; } .layout-contact .gsection { margin-bottom: 9px; } .layout-contact .gfield_validation_message { font-size: 12px; text-align: right; margin-top: 10px; } .layout-contact .gfield_contains_required { position: relative; } .layout-contact .gfield_contains_required:before { content:'*'; position: absolute; left: -10px; width: 10px; color: #FFF; } .layout-contact span.gfield_required { display: none; } .layout-contact .gform_fileupload_rules { font-size: 12px; color: #D8D8D8; font-style: italic; line-height: 1.333333333333333; } .layout-contact .gsection_title { font-size: 14px; font-weight: 600; color: #00CBEA; } .layout-contact .gform_ajax_spinner { width: 123px; height: 48px; position: absolute; bottom: 0; right: 0; padding: 10px; background: #00578C;} .layout-contact .gfield_description { padding: 10px 0; } #field_3_16:before { top:10px; } #field_5_6:before { display: none; } #field_3_18:before, #field_3_19:before { top:-15px; } /* Grievance Form */ #field_6_8 .ginput_complex { display: grid; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 18px;} input[type="file"]::-webkit-file-upload-button { line-height: 46px; font-size: 14px; font-weight: bold; background: none; outline: none; color: #FFF; border: 0; height: 48px; font-family: inherit; border-right: 1px solid #00cbea; margin: 0 10px 0 0; padding: 0 10px 0 0; } /* Greek */ html[lang="el"] .layout-contact .gform_footer:before { content:'* Υποχρεωτικά πεδία'; } html[lang="el"] .layout-contact .gform_ajax_spinner { width: 144px; } /* ========================================================================== Footer ========================================================================== */ .footer-container { position: relative; z-index: 2; } .footer { text-align: center; min-height: 176px; } .footer .container { display: flex; flex-direction: row; padding-top:40px; } .footer-social { text-align: left; } .footer-social a { margin-left: 16px; color: #3BBDDE; } .footer-social label { line-height: normal; padding: 0; } .footer-social .footer-social-getintouch { display: block; margin-bottom: 15px; color:#FFF; margin-left: 0; } .footer-menu { text-align: right; line-height: 1.833; letter-spacing: 2px; margin-left: auto; display: flex; align-items: end; min-height: 84px; } .footer-menu p { margin-bottom: 0; } .footer-menu-item-link { display: block; margin-right: 34px; } /* Subscribe */ .layout-subscribe { padding: 164px 0; position: relative; background: #FFF; } .layout-subscribe article { max-width: 940px; background: #FFF; padding: 32px 84px 24px 240px; position: relative; z-index: 0; background-image: url('images/footer-subscribe.jpg'); background-size: 200px 100%; background-repeat: no-repeat; background-position: top left; margin: auto; z-index: 1; min-height: 269px; } .layout-subscribe h3 { max-width: 570px; line-height: 1.461538461538462; } .layout-subscribe form { display: grid; grid-gap:20px; grid-template-columns: auto 128px; margin:12px 0 14px 0; } .layout-subscribe .gform_fields { display: grid; grid-gap:12px; } .layout-subscribe .gform_fields { grid-template-columns: repeat(2, 1fr); } .layout-subscribe .gform_footer { display: flex; align-items: end; position: relative; } .layout-subscribe #field_2_2, .layout-subscribe #field_2_4 { grid-column: 1/-1; } .layout-subscribe .image { position: absolute; top:0; left:0; right:0; height: 100%; z-index: 0; padding-top: 0 !important; } .layout-subscribe .image img { clip-path:none; transform:none; } .layout-subscribe .gform_button { padding-left: 48px; position: relative; height: 48px; line-height: 48px; font-size:14px; text-align: left; } .layout-subscribe .icon-send { width: 40px; height: 40px; position: absolute; left:10px; top:4px; fill:#FFF; } .layout-subscribe .gform_confirmation_message { position: absolute; top: 0; left: 199px; right: 0; bottom: 0; color: #FFF; padding: 0 0 0 40px; background: #00578c; display: flex; flex-direction: column; justify-content: center; } .layout-subscribe .gform_confirmation_message h3 { margin-top: 14px; } .layout-subscribe .gfield_validation_message { display: none; } .layout-subscribe .validation_error { margin: 10px 0 20px 0; } .layout-subscribe .gform_ajax_spinner { padding: 10px; height: 48px; width: 128px; background: #00578C; position: absolute; top: 0; right: 0; } .layout-subscribe .hidden_label .gfield_consent_label { display: block; padding: 0; font-size: 14px; line-height: 1.5; } .layout-subscribe .ginput_container_consent { position: relative; padding: 0 40px 0 0; margin-bottom: 4px;} .layout-subscribe .ginput_container_consent input { position: absolute; top:0; right:0; appearance: none; -webkit-appearance: none; height: 22px; width: 22px; } .layout-subscribe .ginput_container_consent input:checked { background: url('images/icon-tick.svg'); background-size: 13px auto; background-repeat: no-repeat; background-position: center; } .layout-subscribe .ginput_container_consent .gfield_required { display: none; } .layout-subscribe .ginput_container_consent a { text-decoration: underline; } #field_2_4 legend { display: none; } /* Contact */ .button-contact { position: fixed; bottom: 30px; right: 30px; padding-right: 14px; z-index: 1; border: 1px solid #FFF; height: 48px; padding: 11px 17px 11px 44px; } /* Cookie Banner */ #moove_gdpr_cookie_info_bar { background: #F4F5F6 !important; border: 0 !important; } #moove_gdpr_cookie_info_bar .mgbutton { padding: 14px 30px !important; opacity: 1 !important; } .moove-gdpr-info-bar-container { max-width: 100% !important; width: 100%% !important; padding: 6px 50px !important; } .moove-gdpr-info-bar-container .moove-gdpr-button-holder { margin-right: -4px !important; } .moove-gdpr-info-bar-content { padding: 0 !important; } .moove-gdpr-infobar-settings-btn { background: #00578C !important; border: 0 !important; color:#FFF !important; box-shadow: none !important; } .moove-gdpr-cookie-notice p { color: #A3A3A3 !important; } .moove-gdpr-button-holder .mgbutton { width:auto !important; } .gdpr_lightbox { background: #00578C !important; } .gdpr-nav-tab-title { color: #000 !important; } .menu-item-selected .gdpr-nav-tab-title { color:#00578C !important; } .moove-gdpr-modal-right-content, .moove-gdpr-modal-footer-content { background: #FFF !important; } .moove-gdpr-modal-left-content { background: #F4F5F6 !important; box-shadow:none !important; } #moove-gdpr-menu button { background: transparent !important; } #moove-gdpr-menu svg { color: #A3A3A3 !important; } #moove-gdpr-menu .menu-item-selected svg { color: #00578C!important; } .moove-gdpr-modal-content { border-radius: 0 !important; } /* ========================================================================== Cursor ========================================================================== */ .cursor { position: fixed; width: 60px; height: 60px; margin: -30px 0 0 -30px; top:0; left:0; visibility: hidden; pointer-events: none; border-radius: 50%; overflow: hidden; cursor: none; } .cursor:before { content:''; background: #00578c; width: 60px; height: 60px; transform:scale(0); transition: transform 1s cubic-bezier(.77,0,.175,1); display: block; border-radius: 50%; overflow: hidden; } .cursor svg { width: 24px; height: 12px; position: absolute; top:0; left: 0; bottom: 0; right: 0; margin: auto; } .has-cursor-visible .cursor { visibility: visible; } .has-cursor-visible .cursor:before { transform:scale(1); } .touchevents .cursor { display: none; } /* ========================================================================== Popup ========================================================================== */ .layout-popup { position: fixed; top:120px; left:0; right:0; bottom: 0; display: flex; align-items: center; padding: 30px; overflow: auto; -webkit-overflow-scrolling: touch; display: none; z-index: 99; } .layout-popup aside { max-width: 620px; width: 100%; margin: auto; color: #FFF; background: #00578C; background-image: url('images/popup-bg.jpg'); background-size: 100% auto; background-position: top left; background-repeat: no-repeat; } .layout-popup P { line-height: 1.5; } .layout-popup h3 { line-height: 1.142857142857143; margin-bottom: 10px; } .layout-popup h4 { margin-bottom: 20px; } .popup-inner { padding: 90px 30px 30px 30px; position: relative; } .popup-link { background: #FFF; color: #00578C; padding: 20px 30px; text-decoration: none; display: block; } .popup-link svg { width: 24px; height: 24px; margin:auto auto auto 8px; vertical-align: middle; } .popup-link svg path {fill:#00CBEA !important; } .button-popup-close { height: 40px; position: absolute; top:14px; width: 106px; padding-left:14px; letter-spacing: 2px; text-transform: uppercase; right:0; } .button-popup-close svg { position: absolute; top:0; left: 0; width:40px; height: 40px; fill: currentColor; } .show-popup .layout-popup { display: flex; } /* ========================================================================== Loading ========================================================================== */ @keyframes loading { 0% { transform: scale(0.2); opacity: 0.2; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.2); opacity: 0.2; } } /* ========================================================================== Media Queries ========================================================================== */ @media only screen and (max-width:1450px) { /* Expand container */ .container { width: 100%; } .container, .container.inset { padding-right: 50px; padding-left:50px; } /* Layout : Hero */ .layout-hero.has-image-text-title-below h2, .layout-hero.has-text-below .standfirst { grid-column-start: 1; } .layout-hero.has-image-text-title-below article, .layout-hero.has-text-below .text { grid-column-end:19; } /* Layout : Text & Read More */ .has-image-right.layout-text-readmore article, .has-image-left.layout-text-readmore figure { grid-column-start: 1; } .has-image-right.layout-text-readmore figure, .has-image-left.layout-text-readmore article { grid-column-end:19; } /* Layout : Latest news */ .layout-latest-news article, .layout-latest-news h2 { grid-column-start: 1; } .layout-latest-news aside { grid-column-end:19; } /* Layout : About */ .about-titles { grid-column-start: 1; } .about-text { grid-column-end:19; } .leadership-title, .development-title, .leadership-listing, .development-listing { grid-column-start: 1; } .leadership-title, .development-title, .leadership-listing, .development-listing { grid-column-start: 1; grid-column-end:19; } /* Layout : Directions */ .directions-title, .directions-text, .transport-mode-links { grid-column-start: 1; } .directions-times, .transport-mode { grid-column-end:19; } /* Page : Contact */ .contact-text { grid-column-start: 1; } .contact-forms { grid-column-end:19; } body .video-slides.swiper-container, body .video-thumbnails-wrapper{ margin-left:50px; margin-right:50px; } } @media only screen and (max-width:1280px) { /* Footer */ .footer { min-height: 200px; } .footer .container { flex-direction: column; } .footer-menu { margin-left: 0; margin-top:14px; min-height: auto; line-height: 1.91666; display: block; text-align: left; } .footer-menu-item-link { display: inline-block; } /* petros changes */ .header-menu { position: fixed; top: 87px; right: 0; bottom: 0; background: #00578c; z-index: 200; line-height: normal; max-width:506px; width:100%; color:#FFF; padding:26px 20px 40px 20px; overflow: auto; flex-direction: column; transform: translateX(100%) translateZ(0); display: flex; transition: 0.4s transform cubic-bezier(0.77, 0, 0.175, 1); margin: 0; z-index: 1;} .button-menu { position: absolute; height: 18px; line-height: 18px; top:34.5px; right:20px; display: block; color: currentColor; width: 100px; text-align: right; overflow: hidden; } .header-menu-item { margin: 0; border-bottom: 1px solid #00CBEA; } .header-menu-item:last-of-type { display:block; border-bottom:0; } /* Show contact */ .header-menu-item-link { display: flex; flex-direction: row; font-weight: 600; text-transform: none; letter-spacing: normal; font-size: 18px; padding: 16px 0; } .header-menu-item-link:last-of-type { border-bottom: 0; display: block; } .header-menu-item-link:after { display: none; } .header-menu-item-link > svg { display: none; } .header-menu-inner { display:block; flex-direction: column; justify-content: unset; } .button-open-submenu { margin: auto 0 auto auto; width: 44px; height:44px; position: absolute; top:12px; right:-16px; display: block; transition: transform 1s cubic-bezier(.77,0,.175,1); } .button-open-submenu svg { margin: auto 0 auto auto; color:#FFF; fill:currentColor; width: 12px; height: 8px; vertical-align: middle; } .show-menu .header-menu { transform: translateX(0) translateZ(0); } /* Mobile : Menu : Footer */ .mobile-menu-footer { display: flex; flex-direction: row; margin-top:auto; } /* Header : Search */ .header-search { display:none; } /* Header : Languages */ .header-languages { display: none; } /* Mobile: Mobile Languages */ .mobile-languages { height: 48px; border: 1px solid #FFF; width: 120px; display: flex; font-size:14px; font-weight: 600; text-transform:uppercase; text-align: center; flex-direction: row; line-height: 46px; margin-right:auto; } .mobile-languages .active { background: #FFF; color:#00578c; } .mobile-languages a { width: 59px; } /* Mobile : Search */ .mobile-search { height: 48px; max-width: 197px; display: block; margin-left:auto; position: relative; } .mobile-search input { height: 48px; line-height: 47px; border-bottom:1px solid #B4D5E0; color:#B4D5E0; } .button-search { padding: 0; margin: auto; height:48px; } .button-search svg { width: 16px; height: 16px; } span.header-menu-item-link{ letter-spacing: 1.8px; } /* Change to mobile menu */ .header-search { margin-left:auto; } /* Header : Menu */ /* Header : Submenu */ .header-submenu { display: block; position: static; min-width: 0; border-radius: 0; background: transparent; color: #B4D5E0; font-size:16px; } .header-submenu-inner { padding: 0 0 18px 0; margin-top:-10px; } .header-menu-item:hover .header-submenu { max-height:0; } .header-menu-item.is-open .header-submenu { max-height:200px; } .header-menu-item.is-open .button-open-submenu { transform:rotate(-180deg); } /* Header : Menu : Button */ .button-menu-label-menu, .button-menu-label-close { position: absolute; top:0; left:0; right:0; transition: all .8s 0.05s cubic-bezier(1,0,0.47,1.01); line-height: 18px; padding-right: 34px; } .button-menu-label-close { transform:translateY(18px); } .button-menu .icon { position: absolute; width: 26px; height: 2px; background: currentColor; right: 0; transition: all .8s 0.05s cubic-bezier(1,0,0.47,1.01); } .button-menu .icon-1 { top:0; transform-origin: top left;} .button-menu .icon-2 { top:0; bottom: 0; margin: auto; } .button-menu .icon-3 { bottom: 0; transform-origin: bottom left; } .show-menu .button-menu-label-menu { transform:translateY(-18px); } .show-menu .button-menu-label-close { transform:translateY(0px); } .show-menu .button-menu .icon-1 { transform: translateY(-1px) rotate(45deg); } .show-menu .button-menu .icon-2 { opacity: 0; } .show-menu .button-menu .icon-3 { transform: rotate(-45deg) translateY(1px); } /* Header : Show, when menu open */ .show-menu .header.is-hidden .container, .show-menu .header .container { transform: none; color: #00578C; } .show-menu .header:after { transform:translateY(0); } } @media only screen and (max-width:1400px) { body .video-slides.swiper-container, body .video-thumbnails-wrapper{ max-width:135vh; } } @media only screen and (max-width:1200px) { /* Layout : Videos */ .button-video-gallery { display:none;} } @media only screen and (max-width:768px) { /* Type Reduction */ .f-80 { font-size: 46px; } .f-66 { font-size: 54px; } .f-40 { font-size: 32px; } /* Structure */ .container { width: 100%; } .container, .container.inset { padding-left: 20px; padding-right: 20px; } .mb { margin-bottom: 40px; } .has-bg { padding: 40px 0; } .has-bg.mb + .has-bg { margin-top: -40px; } .main section:last-of-type.has-bg { padding-bottom: 40px; } .main section:last-of-type.has-bg.layout-banners { padding-bottom: 0; } .mobile-bg-cream, .mobile-bg-light-blue { padding: 40px 20px; } .mobile-bg-cream { background: #F4F4EF; } .mobile-bg-light-blue { background: #DAEAF0; } .mobile-bg-cream .container, .mobile-bg-light-blue .container { padding: 0; } hr { margin: 20px 0; } /* Text Animations : Remove delay, for vertical stack */ .has-text-animation.delay-1, .has-text-animation.delay-2, .has-text-animation.delay-3, .has-text-animation.delay-4, .has-text-animation.delay-5, .has-text-animation.delay-6, .has-text-animation.delay-7, .has-text-animation.delay-8, .has-text-animation.delay-9, .has-text-animation.delay-10, .has-text-animation.delay-11, .has-text-animation.delay-12, .has-text-animation.delay-13, .has-text-animation.delay-14, .has-text-animation.delay-15, .has-text-animation.delay-16 { transition-delay:0.5s; } /* Swiper */ .slider-button-prev, .slider-button-next { width: 40px; height: 40px; min-width:40px; margin: 0; position: absolute; top:0; } .slider-navigation { display: grid; grid-template-columns: 1fr; margin: 0; justify-content: normal;} .slider-button-next { right:-16px; } .slider-button-prev { right:44px; } .slider-pagination { margin-right: 88px; width: auto; height: 40px; } /* Header */ .header { height: 78px; } .header:after { height: 78px; } .header .container { padding: 0 20px 0 20px; position: relative; z-index: 1; } .header-logo { padding: 10px; left:20px; width: 118px; height: 100px; z-index: 2; } .header-logo video { width: 98px; height: 80px; } .button-menu { top:30px; } .header.is-condensed .header-logo { transform: translateY(-100px); } .logo-marque { width: 64px; height: 78px; padding: 10px 0; left: 47px; transform: translateY(-78px); } /* Header : Menu */ .header-menu { top:78px; } /* Layout : Hero */ .layout-hero video { height: 100%; object-fit:cover; } .layout-hero .video { padding-top:0 !important; height: calc( 100vh - 94px); } .layout-hero .hero-video-title { left:16px; } .layout-hero .grid { grid-template-columns: 1fr; } .layout-hero.is-contained { margin-bottom: 32px; } .hero-mask { max-height: none; height: auto; } .hero-mask .video, .hero-mask .image { position: static; } /* Layout : Hero : Text below */ .layout-hero.has-text-below h2 { margin-left: 17px; } .layout-hero.has-text-below .grid { display: block; } .layout-hero.has-text-below .standfirst { margin-bottom: 22px; } .layout-hero.has-text-below .image { padding-top:120.533333333333333% !important; margin-bottom: 32px; } /* Layout : Hero : Text, image, title below */ .layout-hero.has-image-text-title-below h2 { margin-bottom: 0; } .layout-hero.has-image-text-title-below h3 { margin-bottom: 20px; } .layout-hero.has-image-text-title-below h2, .layout-hero.has-image-text-title-below article { grid-column: 1/-1; } .layout-hero.has-image-text-title-below .grid { grid-gap:10px; } .layout-hero.has-image-text-title-below picture { padding-top:0 !important; height: calc(100vh - 94px); margin-bottom: 43px; margin-left: 20px; margin-right:20px; } /* Text Overlaid */ .layout-videos .video-text-container { display: block; padding:0;} .layout-hero.has-text-overlaid .grid { display: block; } .layout-hero.has-text-overlaid .hero-title { left:20px; bottom: 30px; font-size: 38px; } .layout-hero.has-text-overlaid h4 { margin-bottom: 20px; } .layout-hero .hero-text-container { margin-top:43px; } .has-title-shadow { margin-bottom: 43px; } /* Layout : Text & Image */ .layout-text-image h2, .layout-text-image h3 { max-width:75%%; } .layout-text-image h3 { margin-bottom: 22px; } .layout-text-image.is-off-grid.has-text-left .grid { grid-template-columns: 1fr; } .layout-text-image.is-off-grid.has-text-left figure { margin: 0 -20px; } .layout-text-image .button-cta { margin-top:20px; } /* Remove margin next to masterplan */ .layout-text-image.mb + .layout-masterplan { margin-top: -40px; } /* Layout : Text & Image : Map */ .has-map .map { padding: 5px; } .layout-text-image .has-map .map { width: 100%; } .layout-text-image .has-map .map .image { padding-top: 0 !important; height: 100%;} .layout-text-image .has-map .map img { object-fit:contain; } /* Layout : Text & Image : Text below */ .layout-text-image.has-text-below .grid { grid-gap: 30px; } .layout-text-image.has-text-below .titles { max-width: none; } .layout-text-image.has-text-below article { display: block; } .layout-text-image.has-text-below article .text { max-width:none; } /* Layout : Text & Image : Text left */ .layout-text-image.has-text-left .grid, .layout-text-image.has-text-right .grid { grid-template-columns: 1fr; grid-gap:25px; } .layout-text-image.has-text-left figure, .layout-text-image.has-text-right figure { grid-row:1; } .layout-text-image.has-text-left article, .layout-text-image.has-text-right article { grid-row:2; } .layout-text-image.has-text-right article { grid-column: 1; } /* Layout : Text & Image : Off grid */ .layout-text-image.is-off-grid.has-text-left .grid, .layout-text-image.is-off-grid.has-text-right .grid { grid-gap: 62px; } /* Layout : Text & Video */ .layout-text-video figure { margin: 0 -20px; padding: 0; } .layout-text-video .video-caption { margin: 0 0 24px 0; padding: 44px 20px 20px 20px; } .layout-text-video .video-caption h4 { margin-bottom: 20px; } .layout-text-video .grid { grid-gap: 30px; } .layout-text-video .titles { max-width: none; } .layout-text-video article { display: block; } .layout-text-video article .text { max-width:none; } .layout-text-video h3 { margin-bottom: 22px; } .layout-text-video .is-playing .video-caption { opacity: 1; visibility: visible; } .mb + .layout-text-video { margin-top:-40px; } /* Layout : Text Image Background : Side by Side */ .has-text-left.layout-text-image-background figure { grid-column: 1; } .has-side-by-side.layout-text-image-background article { grid-row: 2; grid-column: 1; } .has-side-by-side.layout-text-image-background .grid { grid-template-columns: 1fr; } .has-side-by-side.layout-text-image-background .scroll { position: static; padding: 20px; } .layout-text-image-background h3 { margin-bottom: 20px; } .layout-text-image-background .button-cta { margin-top:20px; } /* Layout : Text, Image & Background : Founder */ .has-founder.layout-text-image-background { padding: 114px 20px 40px 20px; } .has-founder.layout-text-image-background .grid { grid-template-columns: 1fr; grid-gap: 45px; } .has-founder.layout-text-image-background .motif { top:80px; height: 69px; } .has-founder.layout-text-image-background article, .has-founder.layout-text-image-background figure { grid-column: 1/-1; } .has-founder.layout-text-image-background figure { grid-row:1; max-width:58.507462686567164%; margin-right: 0; } .has-founder.layout-text-image-background article { grid-row:2; margin: 0; } .has-founder.layout-text-image-background h2 { font-size: 26px; line-height: 1.461538461538462; } .has-founder.layout-text-image-background h2 > span:first-of-type { margin-left: -12px; } /* Layout : Text Read More */ .layout-text-readmore .grid { grid-template-columns: 1fr; } .has-image-left.layout-text-readmore article, .has-image-right.layout-text-readmore article, .has-image-left.layout-text-readmore figure, .has-image-right.layout-text-readmore figure { grid-column: 1/-1; } .layout-text-readmore figure { grid-row:1; } .layout-text-readmore article { grid-row:2; } .layout-text-readmore .button-text-read-more { margin-top: 8px; } .layout-text-readmore h4 { margin-bottom: 11px; } /* Layout : Timeline */ .layout-timeline .grid { display: block; } .timeline-title { margin-bottom: 25px; } .timeline-intro { margin: 0 0 32px 0; } .timeline-text { margin-bottom: 40px; } .timeline-entry { padding: 20px; } /* Layout : Stats */ .layout-stats h2 { margin-bottom: 26px; } .layout-stats ul { flex-direction: column; line-height: 1.5; } .layout-stats li { margin-bottom: 14px; } .layout-stats.has-border { margin-bottom: 32px; } .layout-stats.has-border ul { padding-bottom: 48px; } .layout-stats .columns-4 li { width:100%; margin-bottom: 14px; } /* Layout : Masterplan */ .layout-masterplan { background:#00578C; } .layout-masterplan canvas { height: 61.8666666666667vw; } .layout-masterplan .container { position: static; padding-top: 20px; height: 180px; background:#DAEAF0; } .layout-masterplan .masterplan-title.has-caption-top { height: 140px; } .layout-masterplan .masterplan-title.has-caption-bottom { height: 180px; } .canvas-container { height: auto; } .masterplan-inner { padding-top:0; } .masterplan-title, .masterplan-title.has-caption-top {; position: static; margin-top:0; opacity: 1; visibility: visible; transform:none; } .masterplan-title.has-caption-bottom { padding: 20px 20px 0 20px; } .masterplan-title h3 { font-size: 32px; color:#035996; } .masterplan-title.has-caption-bottom h3 { color: #FFF; } .masterplan-title h4, .masterplan-title.has-caption-top h4 { font-size:18px; max-width:none; margin-bottom: 14px; } .masterplan-title h4 { padding-right: 150px; } .masterplan-caption, .masterplan-caption.top-left, .masterplan-caption.bottom-left, .masterplan-caption.top-right, .masterplan-caption.bottom-right { top: calc(61.8666666666667vw + 180px); left: 0; right: 0; bottom: 0; padding: 20px; max-width: none; border: 0; } .masterplan-caption.is-boxed { background: none; } .masterplan-caption h3 { color: #00CBEA; font-size: 18px; } .masterplan-caption p { font-size:16px; color:#FFF; line-height: 1.5625; } .button-skip { right:20px; top: 110px; left: auto; bottom: auto; } /* Masterplan : Play */ .button-masterplan-play { width: 80px; height: 80px; } /* Layout : Banners */ .layout-banners.has-bg, .layout-banners.has-bg .container { padding: 0; } .layout-banners .grid { grid-template-columns: 1fr; } .layout-banners .columns-3 { padding: 0; } .layout-banners .columns-3 .image { padding-top: 80% !important; } .layout-banners .columns-4 { flex-direction: column; height: auto; } .layout-banners .columns-4 .banner { width: 100%; cursor: default; will-change: auto; transition:none; } .layout-banners .columns-4 .banner-caption { width: auto; } .layout-banners .columns-4 .banner-caption-mask { max-height: none; } .layout-banners .columns-4 .image { padding-top: 66.666666666666667% !important; } .layout-banners .columns-4 .banner:after {transition:none; } .banner-caption { left:20px; right: 20px; bottom: 20px; } /* Layout : Videos */ .video-slide-container { background: none; } .video-slide-container.is-playing .video-caption { opacity: 1; visibility: visible; } .video-embed-container:before { content:''; width: 50px; height: 50px; position: absolute; top:0; left: 0; right: 0; bottom: 0; background-image:url('images/icon-play_white.svg'); background-size: 100% auto; z-index: 3; margin: auto; } .is-playing .video-embed-container:before { display: none; } /* Layout : Videos : Break apart slider */ .video-slides.has-thumbnails .swiper-wrapper { height: auto !important; transform: none !important; flex-direction: column; } .video-slides.has-thumbnails .swiper-slide { margin-bottom: 40px; } .video-slides.has-thumbnails .swiper-slider:last-of-type { margin-bottom: 0; } .video-caption { position: static; margin-top: 14px; } .video-caption h3 { color: #00578C; font-size: 26px; } .video-caption h4 { font-size: 18px; } .video-caption .icon-play { display: none; } .video-buttons { flex-direction: column; } .video-buttons a { text-align: left; margin: 0 auto 10px 0; } .video-buttons a:last-of-type { margin: 0 auto 0 0;} /* Layout : Title */ .layout-title { margin-bottom: 30px; } .layout-title h2 { font-size: 26px; } .layout-title h2.f-40 { font-size: 26px; } .layout-title h2 br { display:none; } .layout-title h3 { margin-top: 16px; } .layout-title .subtitle { font-size: 16px; } .layout-title.has-bg + .has-bg { margin-top: 0; } /* Layout : News */ .layout-news h2 { margin-bottom: 30px; } .layout-news .grid { grid-template-columns: 1fr; grid-gap: 20px; } .tease.news { padding: 32px 25px; } .tease.news .button-read-more { position: static; } /* Layout : Two images */ .layout-text-two-images .grid, .layout-text-two-images h2 { max-width: none; } .layout-text-two-images .grid { grid-template-columns: 1fr; } .layout-text-two-images h2 { margin-bottom: 42px; } .layout-text-two-images figure { margin-bottom: 32px; } .layout-text-two-images .column-right { padding-top:0; } .layout-text-two-images .column-right figure { margin-bottom: 31px; } .layout-text-two-images .column-right p:last-of-type { margin-bottom: 0; } /* Layout : Map */ .layout-map { counter-reset: marker; } .map-markers-mobile { display: block; counter-reset: marker; margin:10px 0 60px 0;} .map-markers-mobile li { list-style-type: none; color:#A3A3A3; display: inline-block; counter-increment: marker; margin-right: 8px; line-height: 1.5; } .map-markers-mobile li:before { content: counter(marker) '. '; } .marker { font-size: 0; min-width: 0; padding: 0; width: 17px; } .marker:before { counter-increment: marker; content: counter(marker); font-size:14px; } .marker:after { border-width: 6px 6px 0 6px; bottom:-6px; } /* Layout : List */ .layout-icons { margin-bottom: 0; } .layout-icons ul { grid-template-columns: repeat(2, 1fr); } .about-titles { margin-bottom:24px; } .about-text { margin-bottom: 52px; } /* Layout : About */ .layout-about > .grid { display: block; } .leadership-listing { grid-template-columns: repeat(1, 1fr); grid-gap:20px; margin-bottom: 45px; } .leadership-person { grid-template-columns: 33.432835820895522% auto; grid-row-gap:18px; padding-bottom: 20px; border-bottom: 1px solid #00CBEA; } .leadership-person:last-of-type { border-bottom: 0; } .leadership-person-titles { grid-column: span 1; margin: auto 0 0 0; } .leadership-person-position { margin-bottom: 0; } .leadership-image { grid-column: 1; grid-row:1; } .leadership-person-text { grid-column: 1/-1; } .development-listing { grid-template-columns: 1fr; grid-gap: 30px; } /* Layout : Directions */ .directions-title, .directions-text, .directions-times { grid-column: 1/-1; } .directions-times { grid-template-columns: 1fr; margin-bottom: 14px; } .transport-mode-links, .transport-mode, .transport-modes-title { grid-column: 1/-1; } .transport-mode-links { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap:20px; } .transport-mode-link { height: 48px; background: #DFE1D6; color: #FFF; font-size: 12px; text-align: center; line-height: 48px; font-weight:600; } .transport-mode-link.active, .transport-mode-link.active:hover { background: #00578C; color:#FFF; } .transport-mode-link svg { display: none; } .transport-mode-link:hover { color: #FFF; } .transport-modes-title { margin-bottom: 4px; border: 0; padding-bottom: 0;} .transport-mode { margin-top:0; border-top:0; grid-column: 1/-1; grid-template-columns: 1fr; } .transport-mode-title { margin-top: 14px; } .transport-mode-section, .transport-mode-section:nth-of-type(1), .transport-mode-section:nth-of-type(2) { padding: 0 0 16px 0; border:0; border-bottom: 1px solid #3BBDDE; margin-bottom: 10px; } .transport-mode-section:last-of-type { border-bottom:0; margin-bottom: 0; } /* Layout : Newsroom */ .layout-latest-news h2 { margin-bottom: 7px; } .layout-latest-news h3 { margin-bottom: 3px; } .layout-latest-news .grid { display: block; } .layout-latest-news aside { margin-top:27px; } .layout-newsroom h2 { margin-bottom: 32px;} .layout-newsroom .slider-navigation { margin-top:8px; } .layout-newsroom .tease.news { height: calc(100% - 64px); } .video-thumb-container { width: 65% !important; } .newsroom-filters { grid-row: 2; margin-right: auto; margin-left: 0; flex-wrap: wrap; height: auto; width: 100%; border: 0; } .newsroom-filters button { padding: 0; border: 1px solid #00578C; border-right: 0; min-width:0; } .newsroom-filters button:last-of-type { border-right: 1px solid #00578C; } .newsroom-filters button.filter-all { border: 1px solid #00578C; margin-bottom: -1px; } .newsroom-filter-break { flex:100%; display: block; } /* Layout : Media Kit */ .layout-media-kits h2 { margin-bottom: 20px; } .tease.media-kit a { display: block; line-height: normal; font-size: 18px; padding-right:160px; } .tease.media-kit .button-alt { position: absolute; top:0; right:0; } .media-kit-size { display: block; margin: 15px 0 0 0; } /* Layout : FAQs */ .layout-faqs h2 { margin-bottom: 52px; } .faq:last-of-type { margin-bottom: 0; } /* Layout : Article */ .layout-article { padding-bottom:46px; } .article-header, .article-standfirst { margin-bottom: 40px; } .article-subtitle { margin-bottom: 12px; font-size: 18px; } .article-columns { display: block; } .article-table-of-contents { margin: 0 0 70px 0; } .article-text table { border: 0; } .article-text table, .article-text tbody, .article-text td, .article-text tr, .article-text th { display: block; } .article-text thead { display: none; } .article-text td { padding: 8px 10px; font-size: 16px; } .article-text td[data-title]:before { content: attr(data-title); padding: 10px; height: 40px; background: #00578C; color:#FFF; font-size: 18px; font-weight: 600; display: block; margin: -8px -10px 9px -10px; line-height: 20px; border-bottom: 1px solid #a3a3a3;} .article-text tr { margin-bottom:40px; } .layout-article-secondary .article-text article { border-bottom: 1px solid #979797; margin-bottom: 40px; padding-bottom: 13px; } .layout-article-secondary .article-text article:last-of-type { border-bottom:0; margin-bottom: 0; padding-bottom: 0; } .layout-article-secondary .article-subtitle { font-size: 18px; } /* Layout : Search */ .layout-search { padding-top: 180px; } /* Page : Contact */ .layout-contact { padding-bottom: 80px; min-height: calc(100vh - 94px); } .layout-contact .grid { display: block; } .layout-contact .gform_footer { display: block; } .layout-contact .gform_button { margin-bottom: 8px; } .layout-contact .gform_footer:before { display: none; } .layout-contact .gform_footer:before .contact-title { margin-bottom: 24px; } .contact-text { margin-bottom: 30px; } /* Lightbox */ .fancybox-slide { padding-left: 0 !important; padding-right:0 !important; } /* Footer */ .button-contact { display: none; } .footer-menu-item-link { margin-right: 16px; } /* Footer : Subscribe */ .layout-subscribe { padding: 20px; } .layout-subscribe article { padding: 40px 20px; background-image: none; } .layout-subscribe form, .layout-subscribe .gform_fields { grid-template-columns: 1fr; } .layout-subscribe form { margin-bottom: 0; grid-gap:10px; } .layout-subscribe .gform_button { margin-right: auto; display: inline-block; width: auto; padding-right: 20px; } .layout-subscribe .gform_confirmation_message { left: 0; padding: 40px 20px;} .layout-subscribe .gform_ajax_spinner { left:0; right:auto; } /* Cookie Banner */ .moove-gdpr-info-bar-container { padding: 20px !important; } #moove_gdpr_cookie_info_bar .moove-gdpr-button-holder { flex-wrap: nowrap !important; } #moove_gdpr_cookie_info_bar .mgbutton { padding: 14px 0 !important; width: 100% !important; } /* Popup */ .layout-popup { top:110px; } .layout-popup aside { font-size: 14px; } .layout-popup h3 { font-size: 26px; } .layout-popup h4 { font-size: 18px; } .layout-popup p:last-of-type { font-size: 12px; } .button-popup-close { right: auto; left: 0; top:0; } .popup-inner { padding: 60px 10px 20px 10px; } .popup-link { padding: 10px; font-size: 14px; text-decoration: none; } .popup-link svg { vertical-align: bottom; } .popup-link span { display: block; text-decoration: underline; } body .video-slides.swiper-container, body .video-thumbnails-wrapper{ margin-left:0; margin-right:0; } } @media only screen and (max-width:768px) and (orientation : landscape) { /* Structure */ html, body { height: 100vh; } /* Masterplan */ .layout-masterplan .container { height: 110px; } .layout-masterplan canvas { width: 50%; } .masterplan-caption, .masterplan-caption.top-left, .masterplan-caption.bottom-left, .masterplan-caption.top-right, .masterplan-caption.bottom-right { left:50%; top:170px; } } /* petros changes */ .standfirst h2.f-26 { font-size:40px; } @media only screen and (max-width: 768px) { .standfirst h2.f-26 { font-size:32px; } } /* Nicolas CSS - START */ footer { padding-bottom: 100px; } @media only screen and (max-width: 600px) { footer .footer-social.f-14 { display: flex; flex-direction: column; text-align: center; } footer .footer-social.f-14 a { margin-left:0; } footer .footer-menu.f-ucase.f-12 { text-align: center; } footer .footer-menu.f-ucase.f-12 a { margin: 0 5px; } } /* Nicolas CSS - END */