.landing-wrapper {
   position: relative;
   background-image: url('../../_assets/banner.jpg');
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   padding: 40px 10px;
}

.landing-wrapper:before { 
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: 0;
   background-color: rgba(var(--hlc-midnight-blue-rgb), 0.7);
}

.landing-wrapper .inner,
.spotlight-wrapper .inner,
section.contacts .inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 10px; font-size: 0; position: relative; z-index: 1; }

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

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

.landing-wrapper .left .intro { font-family: 'GT Ultra Regular', sans-serif; font-size: 25px; color: #ffffff; line-height: 1.3em; }

.landing-wrapper .left p { font-family: var(--hlc-gt-ultra); font-size: 17px; color: #ffffff; line-height: 1.3em; margin-bottom: 0.75em; }

.landing-wrapper .left .buttons { margin-top: 30px; }

.btn-access { display: block; width: 100%; text-align: center; border: 1px solid var(--hl-light-green); background-color: var(--hl-light-green); color: var(--hlc-midnight-blue); font-family: var(--hlc-gt-ultra); font-size: 18px; padding: 10px 20px; transition: all 0.2s; line-height: 1.4em; text-decoration: none; }
.btn-access:hover { background-color: transparent; color: #ffffff; }

.btn-talk { margin-top: 20px; width: 100%; border: 1px solid var(--hl-light-green); background-color: transparent; color: #ffffff; font-family: var(--hlc-gt-ultra); font-size: 18px; padding: 10px 20px; transition: all 0.2s; display: block; text-align: center; text-decoration: none; line-height: 1.4em; }
.btn-talk:hover { background-color: var(--hl-light-green); color: var(--hlc-midnight-blue); }

.landing-wrapper .right img { width: 100%; }


.spotlight-wrapper { margin: 40px 0; }

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

.spotlight-wrapper .left .panel { background-color: var(--hlc-light-blue); }

.spotlight-wrapper .right .panel { background-color: var(--hlc-midnight-blue); }

.spotlight-wrapper .panel { padding: 30px; width: 100%; margin: 0; }

.spotlight-wrapper .panel h2 { font-family: var(--hlc-gt-ultra); font-size: 25px; margin-bottom: 30px; line-height: 1.2em; }
.spotlight-wrapper .left .panel h2 { color: var(--hlc-midnight-blue); }
.spotlight-wrapper .right .panel h2 { color: #ffffff; }

.spotlight-wrapper .left p { font-family: var(--hlc-gt-ultra); font-size: 19px; color: var(--hlc-midnight-blue); line-height: 1.4em; margin-bottom: 0.75em; }
.spotlight-wrapper .left p:last-child { margin-bottom: 0; }

.spotlight-wrapper .left p.point { padding-left: 20px; position: relative; }
.spotlight-wrapper .left p.point:before { content: ""; position: absolute; left: 0; top: 13px; height: 1px; width: 10px; background-color: var(--hlc-midnight-blue);  }

.spotlight-wrapper .right p { color: #ffffff; font-family: var(--hlc-gt-ultra); font-size: 19px; line-height: 1.3em; margin-bottom: 30px; position: relative; padding: 0 0 0 50px; }

.spotlight-wrapper .right p:before {
   background-image: url('/standard-contractual-clauses-generator/landing/_assets/tick.svg');
   content: "";
   position: absolute;
   width: 32px;
   height: 32px;
   top: 4px;
   left: 0;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}


section.contacts { margin-top: 50px; }
section.contacts h4 { font-family: var(--hlc-gt-ultra); font-size: 25px; color: var(--hlc-midnight-blue); display: block; margin-bottom: 20px; }

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

section.contacts .contact { display: inline-block; width: 33.33%; vertical-align: top; padding: 10px; background-color: transparent;  }

section.contacts .contact .image { display: inline-block; width: 35%; padding-top: 40%; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; }
section.contacts .contact .details { display: inline-block; width: 65%; padding-left: 20px; vertical-align: bottom; }

section.contacts .contact a { text-decoration: none; border-bottom: 0 ; }
section.contacts .contact p { font-family: var(--hlc-gt-ultra); font-size: 18px; line-height: 1.4em; margin-bottom: 0.75em; color: var(--hlc-midnight-blue); }

section.contacts .contact p.name { font-family: 'GT Ultra Regular', sans-serif; color: var(--hlc-midnight-blue); }
section.contacts .contact p:last-child { margin-bottom: 0; }

div.key-contacts-v3.light-background { background-color: var(--hl-taupe); }


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

   .buttons { text-align: center;  }

   .buttons a,
   .buttons button { display: inline-block; max-width: 300px; margin-right: 10px; }

   .buttons a:last-child,
   .buttons button:last-child { margin-right: 0; }

   .spotlight-wrapper .left { margin-bottom: 20px; }

   section.contacts .contact { width: 50%; }
}

@media (max-width: 680px) {
   .buttons a,
   .buttons button { margin-right: 0; margin: 0 auto 10px 0; }

   .buttons a:last-child,
   .buttons button:last-child { margin-bottom: 0; }
}