﻿
section.banner { background-color: var(--hl-dark-green)!important; background-size: contain; background-position: center right; background-repeat: no-repeat;  }

section.banner .col-1 { display: grid; flex; grid-template-columns: 1fr 0.9fr 0.1fr; gap: 20px; align-items: start;  }

section.banner .content { padding: 30px 0; width: 100%; max-width: 600px; }
section.banner .graphic { height: 100%; background-size: 76% auto; background-repeat: no-repeat; background-position: right center; }


section.banner h2.title { color: var(--hl-light-green); font-size: 41px; font-family: Roobert; font-weight: 600; line-height: 1.2em; margin: 0 0 0.5em 0; }

section.banner p { color: #ffffff; font-family: Roobert; font-size: 17px; }



section.banner .buttons { margin-top: 30px; }


section.content { background-color: #E6E6E6; padding: 30px 0; background-size: cover; background-repeat: no-repeat; background-position: center; }

.content-wrapper { font-size: 0; position: relative; padding-right: 0; }

.content-wrapper .left { display: block; vertical-align: top; width: 100%;}
.content-wrapper .right { display: block; vertical-align: top; width: 100%; }



@media (max-width: 1024px) { section .tool-header .whats-new .carousel-container .carousel .slick-prev { left: -15px; }
   section.tool-header .whats-new .carousel-container .carousel .slick-next { right: -15px; background-color: transparent; }
}

.slick-arrows .slick-arrow { position: absolute; display: block; width: 24px; height: 50px; background-color: #e6e6e6; font-size: 0; top: 50%; margin-top: -26px; background-size: 12px 24px; background-position: center; background-repeat: no-repeat; border: 1px solid #e6e6e6; transition: all 0.2s; cursor: pointer; }
.slick-arrows .slick-arrow.slick-prev { left: -30px; background-image: url("/_assets/btn-arrow-hl-dark-green.png"); transform: rotate(180deg); }
.slick-arrows .slick-arrow.slick-next { right: -30px; background-image: url("/_assets/btn-arrow-hl-dark-green.png"); }

.slick-arrows .slick-arrow:hover { background-color: transparent; }


.slick-arrows .slick-arrow.slick-prev:hover { background-image: url("/_assets/btn-arrow-white.png"); }
.slick-arrows .slick-arrow.slick-next:hover { background-image: url("/_assets/btn-arrow-white.png"); }


.key-contacts-v3 { padding: 40px 0; background-color: var(--hl-light-taupe); }
.key-contacts-v3 .header h2 { font-size: 38px !important; font-family: Roobert !important; color: var(--hl-dar-green) !important; font-weight: 200; }

.key-contacts-v3 .carousel-controls .slick-arrow { background-color: transparent; border-color: var(--hl-dark-green); background-size: 18px auto; background-image: url("/_assets/icon-line-arrow-hl-dark-green.png"); }
.key-contacts-v3 .carousel-controls .slick-arrow:hover { background-color: var(--hl-dark-green); background-image: url("/_assets/icon-line-arrow-hl-light-green.png"); }

.key-contacts-v3 a.btn-contact-us { font-family: Roobert !important; border-color: var(--hl-dark-green); background-color: var(--hl-dark-green); color: #ffffff; background-image: url("/_assets/icon-email-hl-light-green.png"); background-repeat: no-repeat; background-size: 22px 15px; background-position: 1em center; padding-left: 50px; }
.key-contacts-v3 a.btn-contact-us:hover { background-color: transparent; color: var(--hl-dark-green); background-image: url("/_assets/icon-email-dark.png"); }

.links { margin-bottom: 30px; }


body.c2019 section.recent-developments { background-color: #ececec; padding: 20px 0; }
.recent-developments-container { margin: 0 -10px; }

.recent-developments .rd-panel { background-color: #ffffff; padding: 25px 18px 18px 18px; border-top: 7px solid #2c5e4f; transition: all 0.2s; }
.recent-developments .rd-panel .date { font-size: 12px; color: #808080; }
.recent-developments .rd-panel h3 { font-size: 18px; color: #333333; line-height: 1.2em; }
.recent-developments .rd-panel .panel-image { background-size: cover; padding-top: 60%; background-repeat: no-repeat; margin-top: 15px; }

.recent-developments .rd-panel:hover { background-color: #f8f8f8; }

@media (max-width: 1024px) {
   .c2019 .page-banner.extra-button-left .copy-container { flex-direction: column; gap: 0; }   
}