.landing-wrapper { display: block; width: 100%; background-color: #e7eeed; background-image: url("/esg/landing/_assets/header-banner-3.jpg"); background-position: top left; background-size: 100% auto; background-repeat: no-repeat; padding: 40px 10px; }

.agreement-wrapper { display: block; width: 100%; background-color: transparent; padding: 40px 0; }

.vision-wrapper { display: block; width: 100%; background-color: transparent; padding: 20px 0; }

.landing-wrapper .inner,
.agreement-wrapper .inner,
.vision-wrapper > .inner,
section.contacts .inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px; }

.top { font-size: 0; }

.top .left { width: 50%; display: inline-block; vertical-align: top; padding: 0 20px 0 0; margin-bottom: 30px; }

.top .left h1 { color: #ffffff; font-size: 32px; font-family: berlingske_sans_roundmedium, sans-serif; display: block; margin-bottom: 14px; }
.top .left h1:after { content: ""; display: block; margin-top: 10px; width: 80px; height: 2px; background-color: #ffffff; margin-bottom: 14px; }

.top .left .intro { font-family: berlingske_sans_roundmedium, sans-serif; font-size: 25px; color: #ffffff; line-height: 1.3em; }

.top .left p { font-family: berlingske_sans_roundregular, sans-serif; font-size: 17px; color: #ffffff; line-height: 1.3em; margin-bottom: 0.75em; }

.top .left .buttons { margin-top: 20px; display: flex; flex-direction: row; }

.top .left .buttons a { flex-basis: 200px; border: 1px solid #bed400; color: #ffffff; background-color: transparent; font-family: berlingske_sans_roundregular, sans-serif; font-size: 18px; text-align: center; padding: 10px; text-decoration: none; white-space: nowrap; margin-right: 10px; transition: all 0.2s; }

.top .left .buttons a:hover { background-color: #bed400; color: #000000; }

.top .right { width: 50%; display: inline-block; vertical-align: top; padding: 0 0 0 20px; margin-bottom: 30px; }


.bottom { font-size: 0; }

.bottom .left { width: 50%; display: inline-block; vertical-align: top; padding: 0 10px 0 0; }
.bottom .right { width: 50%; display: inline-block; vertical-align: top; padding: 0 0 0 10px; }

.bottom .panel { width: 100%; background-color: #ffffff; padding: 35px; margin: 0; display: block; }

.bottom .panel h2 { color: #58a618; font-family: berlingske_sans_roundlight, sans-serif; font-size: 25px; margin-bottom: 30px; }

.bottom .panel .point { color: #000000; font-family: berlingkse_sans_roundregular, sans-serif; font-size: 16px; line-height: 1.3em; margin-bottom: 20px; position: relative; padding: 0 0 0 50px;  }

.bottom .panel .point:before { content: ""; position: absolute; width: 32px; height: 32px; top: 0; left: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }

.bottom .left .panel .point:before { background-image: url("/esg/landing/_assets/exclamation.png"); }
.bottom .right .panel .point:before { background-image: url("/esg/landing/_assets/tick.png"); }


section.contacts { margin-top: 50px; }

section.contacts h4 { font-family: berlingske_sans_roundmedium, sans-serif; font-size: 25px; color: #58a618; display: block; margin-bottom: 20px;  }

section.contacts .contact-list { font-size: 0; margin: 0 -10px;  }

.contact { display: inline-block; width: 16.66%; vertical-align: top; padding: 0 10px 30px 10px; background-color: #ffffff;  }

.contact .image { width: 60%; padding-top: 70%; background-size: cover; background-position: center; background-repeat: no-repeat; }

.contact .details { margin-top: 10px; }

.contact .name { font-family: berlingske_sans_roundmedium, sans-serif; font-size: 15px; color: #58a618; margin-bottom: 0; }

.contact .position-location { font-family: berlingske_sans_roundregular, sans-serif; font-size: 15px; color: #000000; margin-bottom: 0; }


.block-header { background-color: #58a618; color: #ffffff; }


.form-cell { font-size: 13px; margin-bottom: 17px; }
.form-cell label { display: block; margin-bottom: 8px; }
.form-container input[type="text"], .form-container input[type="password"] { color: #354546; font-size: 13px; padding: 11px; width: 100%; font-family: 'berlingske_sans_roundmedium', sans-serif; border: 1px solid #f2f2f2; }

.dk-select .dk-selected { border-color: #f2f2f2; }

.container { display: block; position: relative; padding-left: 35px; margin-bottom: 10px; cursor: pointer; font-size: 13px; line-height: 1.2em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-top: 4px; }

.container input { position: absolute; opacity: 0; cursor: pointer; }

.checkmark { position: absolute; top: 0; left: 0; height: 22px; width: 22px; background-color: #ffffff; border: 1px solid #f2f2f2; }

.container .checkmark:after { content: ""; position: absolute; display: none; left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate( 45deg); -ms-transform: rotate(45deg); transform: rotate( 45deg); }

.container:hover input ~ .checkmark { background-color: #ccc; }
.container input:checked ~ .checkmark { background-color: #bed400; }
.container input:checked ~ .checkmark:after { display: block; }

span.required-fields { font-size: 12px; }

.submit-container { margin-top: 30px; }

.btn-submit { background-color: #bed400; border: 1px solid #bed400; font-family: berlingske_sans_roundregular, sans-serif; color: #333333; font-size: 14px; transition: all 0.2s; padding: 0.8em 1.8em; cursor: pointer; }
.btn-submit:hover { background-color: transparent; }


.error-list { display: none; padding-left: 16px; margin-bottom: 10px; }
.error-list.active { display: block; }
.error-list span { color: #CC0000; font-size: 12px; display: block; margin: 5px 0px; }

.thanks h2 { margin-bottom: 20px; }
.thanks p { font-size: 16px; color: #000000; }

.vision-wrapper .content { background-image: url(/esg/landing/_assets/vision-banner.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; text-align: right; overflow: hidden; }

.vision-wrapper .content .text { width: 50%; display: block; margin: 0 0 0 auto; position: relative; padding: 30px 30px 80px 50px; }

.vision-wrapper .content .flash { position: absolute; bottom: 0; right: 0; width: 100%; height: 500px; background-color: #09584e; transform: rotate( 7deg); transform-origin: bottom right; z-index: 1; }

.vision-wrapper .content .inner { z-index: 2; position: relative; text-align: left; }

.vision-wrapper .content .text .inner h3 { color: #ffffff; margin-bottom: 0.8em; }

.vision-wrapper .content .text .inner p { color: #ffffff; }

.vision-wrapper .content .text p a { border-bottom-color: #58a618; }

.flex { display: flex; }

.tilt-container { perspective: 300px; height: 100%; }

.tilt { transition: all 0.3s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }

.tilt:hover { -webkit-transform: rotateX( 4deg); -moz-transform: rotateX(4deg); -o-transform: rotateX(4deg); transform: rotateX( 4deg); z-index: 999; }

.cta-panel { padding: 35px 20px; background-size: cover; height: 100%; background-repeat: no-repeat;  }

.cta-panel h4 { color: #ffffff; font-size: 27px; margin-bottom: 0.5em; }

.cta-panel p { color: #ffffff; font-size: 17px; margin-bottom: 1.5em; }

.cta-panel .content { margin-bottom: 20px; }

.mr-plus-btn { width: 45px; height: 45px; border: 2px solid #bed600; display: block; position: relative; transition: 0.2s ease-out; }
.mr-plus-btn:before { width: 3px; height: 19px; background-color: #ffffff; display: block; content: ''; position: absolute; left: 19px; top: 11px; }
.mr-plus-btn:after { width: 19px; height: 3px; background-color: #ffffff; display: block; content: ''; position: absolute; left: 11px; top: 19px; }

.cta-panel:hover .mr-plus-btn, .mr-plus-btn:hover { background-color: #bed600; }

@media (max-width: 1350px) { .landing-wrapper { background-size: 1350px; }
}

@media (max-width: 1024px) {
   .top .left { display: block; width: 100%; padding-right: 30%; }
   .top .right { display: block; width: 100%; padding-left: 0; }

   .bottom .left,
   .bottom .right { display: block; width: 100%; padding: 0; }

   .bottom .left { margin-bottom: 10px; }
}

@media (max-width: 700px) {
   .top .left { padding-right: 0; }
}