﻿/*:hover { box-shadow: 0 0 1px 1px red; }*/
.inner { width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 10px; }

header { padding: 00px 0 40px 0; }

.header-intro { width: 100%; max-width: 440px; background-color: var(--hl-dark-green); padding: 100px 40px 40px 40px; position: relative; }
.header-intro img.logo { height: 126px; position: absolute; left: 40px; top: -63px; }
.header-intro h1 { font-family: Roobert; font-size: 40px; font-weight: 600; color: #ffffff; margin-bottom: 0.5em; line-height: 1.1; }
.header-intro p { font-family: Roobert; font-size: 36px; font-weight: 400; color: var(--hl-light-green); }

.header-intro p:last-of-type { margin-bottom: 0; }

.header-intro ul.icon-list { margin: 40px 0 0 0; list-style: none; display: flex; flex-direction: row; align-items: center; gap: 20px; }

.header-intro ul.icon-list button,
.header-intro ul.icon-list a { background-color: transparent; cursor: pointer; transition: 0.3s ease-out;}

.header-intro ul.icon-list button img,
.header-intro ul.icon-list a img { height: 27px; transition: 0.3s ease-out;}

.header-intro ul.icon-list button img:hover,
.header-intro ul.icon-list a img:hover {opacity: 0.5;}



.header-media { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }

section.contacts { opacity: 0; }

h2.title { font-family: Roobert; font-size: 28px; font-weight: 400; }


.header-link { position: fixed; z-index: 5; top: 200px; width: 65px; height: 65px; background-color: var(--hl-light-green); text-decoration: none; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0; gap: 10px; }
.header-link.link-next { right: 0; }
.header-link span { font-family: Roobert; font-size: 18px; font-weight: 400; color: var(--hl-dark-green); position: absolute; top: 0; display: flex; align-items: center; height: 65px; padding: 16px; background-color: var(--hl-light-green); visibility: hidden; opacity: 0; transition: opacity 0.5s; }
.header-link.link-next span { right: 100%; padding-right: 5px; }
.header-link img { height: 31px; width: auto; }
.header-link.link-previous { left: 0; }
.header-link.link-previous img { transform: rotate(180deg); }
.header-link.link-previous span { left: 100%; padding-left: 5px; }

.menu { position: absolute; top: 0; right: 0; z-index: 1000; padding: 50px 50px 0 0; transition: background-color 0.2s; max-width: 350px; }
.menu .menu-buttons { display: flex; flex-direction: row; gap: 20px; position: relative; z-index: 5; }

.menu .btn-expand-menu { background-color: transparent; }

.menu .menu-content { position: absolute; z-index: 4; padding: 120px 35px 35px 35px; display: none; flex-direction: column; gap: 18px; width: 380px; right: 0; top: 0; background-color: var(--hl-dark-green); overflow: hidden; max-height: 90vh; overflow: hidden !important; }
.menu .menu-item { font-family: Roobert; color: var(--hl-light-green); text-decoration: none; font-size: 19px; line-height: 1.1em; }

.menu .menu-item.active,
.menu .menu-item:hover { text-decoration: underline; text-decoration-color: var(--very-light-green); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.menu img { height: 30px; }

.menu.footer-menu { top: initial; bottom: 0; padding-bottom: 50px; }
.menu.footer-menu .menu-content { top: initial; bottom: 0; padding: 30px 50px 120px 50px; }

.home-page header { padding-top: 100px; }

.home-page section.content { margin-top: 40px; z-index: 4; }


h2.header { font-size: 32px; color: var(--hl-dark-green); margin-bottom: 1em; display: inline-block; line-height: 1.2em; }

.underline { text-decoration: underline; text-decoration-color: var(--hl-light-green); text-decoration-thickness: 2px; text-underline-offset: 6px; }


.content-and-quote { display: flex; flex-direction: row; gap: 60px; align-items: start; }

.standard-page-content p { font-family: Roobert; font-size: 19px; color: var(--hl-dark-green); font-weight: 400; line-height: 1.5em; }


img.quote-mark { width: 75px; }

.home-page section.content .quote-container { margin-top: -120px; max-width: 440px; }

.quote { padding: 40px; }
.quote .quote-text { font-family: Roobert; font-size: 26px; font-weight: 400; line-height: 1.3em; color: var(--hl-dark-green); }
.quote .quote-quoter { font-family: Roobert; font-size: 20px; font-weight: 400; font-style: italic; color: var(--hl-dark-green); }

section.contacts { margin-top: 50px; }

.key-contacts-v3 .carousel-controls .slick-arrow,
.slick-arrow { border-color: var(--hl-dark-green); background-image: url("/_assets/icon-line-arrow-hl-dark-green.png"); background-size: 21px; }

.key-contacts-v3 .carousel-controls .slick-arrow:hover,
.slick-arrow:hover { background-color: var(--hl-dark-green); background-image: url("/_assets/icon-line-arrow-hl-light-green.png"); }


.key-contacts-v3 .key-contact,
.key-contact-container { height: 360px; }

.key-contacts-v3 .header h2 { font-family: Roobert; font-size: 35px; font-weight: 400; color: var(--hl-dark-green); }



h2.section-title { font-family: Roobert; font-size: 35px; font-weight: 400; color: var(--hl-dark-green); margin-bottom: 0.75em; }

section h3 {
   line-height: 1.3;
}


section.topic-list { margin-top: 60px; }
section.topic-list div.topic-list { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }

.topic-panel { position: relative; min-height: 240px; }
.topic-panel .inner { position: relative; width: 100%; height: 100%; overflow: hidden; padding: 0; margin: 0; max-width: initial; }
.topic-panel .image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: transform 0.2s; z-index: 0; }
.topic-panel .image:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.topic-panel .image:after { background: linear-gradient(to bottom, rgba(0,0,0,0.0) 0%,rgba(0,0,0,0.69) 75%,rgba(0,0,0,0.89) 100%); }

.topic-panel:hover .image { transform: scale(1.1); }

.topic-panel .content-container { padding: 20px; min-height: 280px; display: flex; align-items: end; }
.topic-panel .content { width: 100%; position: relative; padding: 0px; }
.topic-panel .content p.title { font-family: Roobert; font-size: 23px; font-weight: 400; position: relative; z-index: 1; color: #ffffff; line-height: 1.2em; }
.topic-panel .content p.link { display: flex; flex-direction: row; align-items: center; gap: 20px; font-family: Roobert; font-size: 16px; font-weight: 400; color: #ffffff; }
.topic-panel .content p.link img { height: 16px; }
.topic-panel a.view { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0; cursor: pointer; z-index: 2; }


.c2019 footer { margin-top: 80px; }
footer .next-article-container { position: relative; z-index: 1000000; }
footer .next-article-container .inner { position: relative; z-index: 5; }
footer .next-article-wrapper { text-decoration: none; display: block; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 50px 0; position: relative; z-index: 1; }

footer .next-article p.subheading { font-family: Roobert; color: var(--hl-light-green); font-size: 19px; margin-bottom: 1em; }
footer .next-article h2 { font-family: Roobert; font-size: 28px; font-weight: 400; color: #ffffff; }
footer .next-article p.read-now { display: flex; flex-direction: row; align-items: center; gap: 20px; font-family: Roobert; font-size: 19px; font-weight: 400; color: #ffffff; margin: 40px 0 0 0; }
footer .next-article p.read-now img { height: 19px; transition: transform 0.2s; }

footer .next-article-wrapper:hover p.read-now img { transform: translateX(5px); }

.footer-gradient:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(to right, rgba(0,0,0,0.75) 0%,rgba(69,69,69,0.15) 100%); }




/*** Topic Page ***/

.topic-container { padding: 100px 0 80px 0; margin: 0; width: 100%; position: relative; }

.topic-container .background { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

.topic-page .header-intro p { font-size: 21px; color: #ffffff; }

h2.content-title { font-family: Roobert; font-size: 26px; font-weight: 600; color: var(--hl-dark-green); margin-bottom: 0.75em; }


.intro-cols { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 100px; }
.intro-cols .cols-left { width: 60%; position: relative; z-index: 5; }
.intro-cols.flip { justify-content: flex-start; padding-bottom: 0px; gap: 0; }
.intro-cols.flip .cols-left { width: 100%; }
.intro-cols .cols-right .quote { width: auto; max-width: 600px; flex-grow: 0; }


/* To make it look like the quote overlaps the content panel */
.intro-cols.flip .main-content.cols-left:before { content: ""; position: absolute; width: 40px; height: 100%; top: 0; right: 100%; background-color: #ffffff; }

/*section.main-content div.main-content { container: chapcon / inline-size; }

@container chapcon (max-width: 700px) {
   .main-content .chapter-content iframe { height: calc(100cqw * 0.563); }
}*/

.topic-content div.intro { margin-bottom: 20px; }
.topic-content div.intro p { font-size: 21px; color: var(--hl-dark-green); }
.topic-content div.intro > :last-child { margin-bottom: 0; }



.quote-container { opacity: 0.98; position: relative; z-index: 10; margin-top: 10%; }
.quote .quote-text { font-family: Roobert; color: var(--hl-dark-green); font-size: 26px; font-weight: 400; line-height: 1.2em; }

section.main-content div.main-content { background-color: #ffffff; padding: 40px; }

section.main-content p,
section.main-content li { font-family: Roobert; font-size: 17px; font-weight: 400; color: #000000; line-height: 1.5em; }



.content-with-slidein { display: flex; flex-direction: row; gap: 40px; margin-bottom: 0.75em; margin-top: 30px; }
.slidein-container { position: relative; }

.slidein { text-decoration: none; display: block; }

.slidein.left { position: absolute; top: 50%; }

.slidein.left.aos-init[data-aos='slide-left'] { right: 0; transform: translate3d(-100%, -50%, 0) !important; }
.slidein.left.aos-init.aos-animate[data-aos='slide-left'] { transform: translate3d(0, -50%, 0) !important; }

.slidein:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: #243508; opacity: 0.79; z-index: 0; }

/*.slidein .flash { position: absolute; top: 0; bottom: 0; background-color: #C3D544; }
.slidein.left .flash { width: 60px; clip-path: polygon(0 0, 66% 0, 100% 100%, 0 100%); }*/

/*.slidein.left .copy { padding-left: 90px; }*/
.slidein .copy { padding: 25px; position: relative; z-index: 1; }

.slidein .copy p { font-size: 17px; color: #ffffff; font-family: Roobert; font-weight: 400; line-height: 1.3em; }
.slidein .copy p.title { font-size: 26px; color: var(--hl-light-green); font-weight: 600; margin-bottom: 0.75em; }

.slidein .read-more { display: flex; flex-direction: row; gap: 20px; font-size: 16px; color: var(--very-light-green); position: relative; z-index: 2; }

.slidein.left .read-more { padding: 0 0 24px 90px; }

.slidein.right.aos-init[data-aos='slide-left'] { transform: translate3d(100%, 0, 0) !important; }
.slidein.right.aos-init.aos-animate[data-aos='slide-left'] { transform: translate3d(0, 0, 0) !important; }

.slidein.right.aos-animate { left: 0; transform: translate3d(0, 0, 0) !important; }
.slidein-right-container { position: absolute; top: 50%; transform: translate3d(0, -50%, 0); overflow: hidden; z-index: 100; }
.slidein.right .flash { width: 30px; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.slidein.right .read-more { padding: 0 0 24px 24px; }

.slidein .copy > :last-child { margin-bottom: 0; }

.slidein.has-icon { display: flex; flex-direction: row; gap: 10px; }

.slidein .icon { position: relative; z-index: 1; width: 100px; height: 100px; background-color: var(--hl-light-green); flex-shrink: 0; background-size: auto 64px; background-position: center; background-repeat: no-repeat; }

.slidein p a { border-bottom-color: var(--hl-light-green); }


.tooltop.popup { }
.tooltip.popup .tooltip-inner { background: var(--hl-taupe); max-width: 280px !important; text-align: left; padding: 16px; font-family: Roobert; font-size: 14px; font-weight: 200; color: var(--hl-dark-green); line-height: 1.3em; }
.tooltip.popup .tooltip-inner p { font-size: inherit; font-family: inherit; font-weight: inherit; color: #000000; }
.tooltip.popup .tooltip-inner .date { text-align: left; margin-bottom: 1em; font-size: 12px; color: inherit; }
.tooltip.popup .tooltip-title { font-family: inherit; font-size: 16px; font-weight: 600; text-align: left; line-height: 1.2em; margin-bottom: 0.75em; }

.tooltip.popup .image { padding-top: 50%; width: 100%; height: 0; background-size: cover; background-position: center; background-repeat: no-repeat; margin: 20px 0; }

.tooltip.popup div.read-more { margin-top: 30px; font-size: inherit; font-family: inherit; }
.tooltip.popup a.btn-read-more { display: flex; flex-direction: row; align-items: center; gap: 10px; font-size: inherit; font-family: inherit; font-weight: 500; color: #333333; text-decoration: none; text-decoration-color: var(--hl-light-green); }
.tooltip.popup a.btn-read-more img { height: 16px; transition: transform 0.2s; }
.tooltip.popup a.btn-read-more:hover img { transform: translateX(5px); }

.tooltip.popup .highlight { border-top-width: 8px; border-top-style: solid; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.tooltip.popup .tooltip-inner { border-top-left-radius: 0; border-top-right-radius: 0; }
/*.has-popup { position: relative; z-index: 100000; }*/

@media (max-width: 1800px) {
   .inner { max-width: 85vw; padding: 0 30px; }
}


@media (max-width: 1400px ) {
   .key-contacts-v3 .key-contact,
   .key-contact-container { height: 20vw; }
}

@media (max-width: 1200px) {
   .header-link { width: 45px; }
}

@media (max-width: 1100px ) {
   .key-contacts-v3 .key-contact,
   .key-contact-container { height: 30vw; }

   section.topic-list div.topic-list { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
   .header-link:hover span { opacity: 1; visibility: visible; }
}

@media (max-width: 960px) {
   .content-and-quote { flex-direction: column; }
   .home-page section.content .content-and-quote .quote-container { margin-top: 0; max-width: 100%; }


   .intro-cols { flex-direction: column; gap: 20px; }
   .intro-cols.flip { flex-direction: column-reverse; gap: 40px; }

   .intro-cols.flip .main-content.cols-left:before { display: none; }

   .intro-cols.flip .quote-container { margin-top: 0; }

   .intro-cols .cols-right .quote { max-width: 100%; }
}

@media (max-width: 800px ) {
   .inner { max-width: 100%; }

   .key-contacts-v3 .key-contact,
   .key-contact-container { height: 44vw; }

   section.topic-list div.topic-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
   .header-intro h1 { font-size: 10vw; }

   .slidein.has-icon { flex-direction: column; gap: 0; }
   .slidein .icon { width: 50px; height: 50px; background-size: 66%;  }
}

@media (max-width: 500px) {
   .key-contacts-v3 .key-contact,
   .key-contact-container { height: 90vw; }

   section.topic-list div.topic-list { grid-template-columns: 1fr; }


}
