﻿* { margin: 0; padding: 0; outline: none; border: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { font-family: 'berlingske_sans_roundlight', sans-serif; color: #406382; }

h1 { font-weight: normal; font-size: 41px; line-height: 1.2em; }
h2 { font-weight: normal; font-size: 41px; line-height: 1.2em; }
h3 { font-weight: normal; color: #5482ab; font-size: 32px; }
h4 { font-weight: normal; color: #5482ab; font-size: 32px; }
h5 { font-weight: normal; }
h6 { font-weight: normal; }

p { font-size: 16px; line-height: 1.4em; margin-bottom: 15px; }
p a { color: inherit; }

section { padding: 60px 0; position: relative; }
section.background { background-size: cover; background-repeat: no-repeat; }

img { height: auto; }

.wrapper {background-position: top right; background-repeat: no-repeat; background-size: 1000px; }
.inner 	{width: 1215px; max-width: 100%; margin: auto; }

::-webkit-input-placeholder { color: #BEC5C2; }
::-moz-placeholder { color: #BEC5C2; opacity: 1; }
:-ms-input-placeholder { color: #BEC5C2; }
:-moz-placeholder { color: #BEC5C2; opacity: 1; }

/***** HEADER *****/
header { padding: 57px 0px 35px 0px; }
.logo-container { width: 720px; font-size: 0; max-width: 100%; }
.logo-container img { display: inline-block; vertical-align: middle; }
.logo-container h1 { font-size: 41px; margin-bottom: 10px; color: #5482ab; }
.logo-container-text { width: 560px; max-width: 100%; display: inline-block; vertical-align: middle; margin-left: 35px; }
.logo-container-text p { margin-bottom: 0; }

/***** INTRO SECTION *****/
section.intro-page { padding-bottom: 50px; overflow: hidden }
.intro-left { width: 50%; display: inline-block; vertical-align: top; }
.intro-right { width: 50%; vertical-align: top; }
.intro-right img { width: 90%; float: right; }
.intro-left h2 { color: #ffffff; margin-bottom: 20px; }
.intro-left p { color: #ffffff; margin-bottom: 25px; }
.intro-left-col { width: 48.5%; display: inline-block; margin-top: 10px; }

.intro-right { float: right; }

.intro-left-col input[type="text"] { border: 1px solid #BBDB00; background-color: transparent; }
.form-left { margin-right: 10px; }

.form-full input[type="text"],
.form-left input[type="text"],
.form-right input[type="text"] { width: 100%; height: 40px; padding-left: 5px; color: white; font-size: 16px; }
.form-full { width: calc(100% - 9px); }
.intro-left-col p { margin-bottom: 5px; }

.intro-left-col input[type="text"].error-input { border-color: red; }

.error-message { margin-top: 10px; }
.error-message ul { margin-left: 20px; }
.error-message ul li,
.error-message p { font-size: 16px; color: white; }
.error-message ul li { margin-top: 5px; }

/** FOOTER **/
footer { background-color: #f2f2f2; padding: 70px 0; }
ul.social-list { display: inline-block; list-style: none; }
ul.social-list li { display: inline-block; vertical-align: top; margin-right: 18px; }
ul.social-list li a img { width: 42px; }
ul.footer-nav { display: inline-block; list-style: none; font-family: 'GT Ultra', sans-serif; font-size: 17px; margin-right: 40px; vertical-align: top; margin-top: 10px; }
ul.footer-nav li { display: inline; margin: 0 10px 0px 0px; font-size: 14px; }
ul.footer-nav li a { color: #2c5e4f; text-decoration: none; padding-bottom: 2px; }
ul.footer-nav li a:hover { border-bottom: 1px solid #bed600; }
p.copyright-text { font-size: 10px; color: #95989a; font-family: Georgia, Times New Roman, serif; display: inline-block; width: 100%; margin-top: 20px; }

/***** COLUMNS AND ROWS *****/
.col-row { font-size: 0; }
.col-container { margin-left: -10px; margin-right: -10px; }
.col { display: inline-block; vertical-align: top; padding: 10px; }
.col-1 { width: 100%; }
.col-2 { width: 50%; }
.col-3 { width: 33.333%; }
.col-4 { width: 25%; }


/***** BUTTONS *****/
.btn {
   font-size: 17px;
   padding: 0.8em 1.8em;
   text-align: center;
   display: inline-block;
   border: 1px solid #bed600;
   text-decoration: none;
   color: #4d5357;
   transition: all 0.2s ease-in;
   cursor: pointer;
   margin-bottom: 10px;
   font-family: var(--hlc-gt-ultra);
}

.btn.green.solid {
   background-color: var(--hl-light-green);
}

.btn.block { width: 100%; display: block; padding-left: 0; padding-right: 0; }
.btn.big { font-size: 21px; }
.btn.text-white { color: #ffffff }

.btn:hover { background-color: #ffffff !important; color: #4d5357 !important; }

.btnSubmit { width: 295px; height: 45px; padding: 0 0 0 10px; text-align: left; margin-top: 20px; }

.mobile-get-started { display: none; }

.landing-wrapper { position: relative; }
.landing-wrapper section.background {
   padding: 25px;
   background-position: bottom center;
}

/* 2023 STYLES */
.landing-wrapper p {
   margin-bottom: 1em;
   line-height: 1.2em;

   font-size: 18px;
}

.landing-two-cols .cols,
.landing-intro .cols { display: flex; justify-content: space-between; width: calc(100% + 40px); margin-left: -20px; }

.landing-two-cols .col,
.landing-intro .col { width: calc(50% - 20px); }

.landing-wrapper:not(.compressed) .landing-intro.tool-intro .col { width: 100%; max-width: 800px; }

.landing-wrapper.compressed .landing-intro.tool-intro .col { width: 100%; }

/*.landing-wrapper.compressed section.background:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.45);
}*/

.landing-two-cols .inner,
.landing-intro .inner { width: 1200px; padding: 0 20px; }

.intro-col-left {
   color: var(--hlc-midnight-blue);
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
}



.intro-col-left h1 {
   font-size: 44px;
   margin-bottom: 0.4em;
   line-height: 1.1em;
}

section.landing-intro:not(.tool-intro) .intro-col-left h1,
section.landing-intro:not(.tool-intro) .intro-col-left p {
   color: #ffffff;
}

.intro-col-left p {
   color: var(--hlc-midnight-blue);
}

.intro-col-left p a {
   border-color: #ffffff;
}

.intro-col-left img {
   width: 100%;
   height: auto;
}

.landing-wrapper:not(.compressed) .intro-col-left-inner {
   background-color: var(--hlc-midnight-blue);
   padding: 40px 35px 30px;
   flex: 1;
}



.landing-wrapper .btn {
   background-color: var(--hl-light-green);
   border-color: var(--hl-light-green);
   color: var(--hlc-midnight-blue);
   font-size: 16px;
   padding-top: 1em;
   padding-bottom: 1em
}

.intro-col-right		{background-color: #ffffff; padding: 20px; height: 100%; display: flex; align-items: center; }
.intro-col-right img	{max-width: 100%; display: block; margin: auto;}

.incentives-box {
   padding: 40px 35px 30px 35px;
   background-color: var(--hl-taupe);
   display: flex;
   flex-direction: column;
   height: 100%;
   align-items: flex-start
}

.incentives-box h2 {
   font-size: 39px;
   font-family: var(--hlc-gt-ultra);
   font-weight: 400;
   margin-bottom: 0.35em
}

.incentives-box h3 {
   font-size: 23px;
   font-family: var(--hlc-gt-ultra);
   margin-bottom: 1em;
   color: var(--hlc-midnight-blue);
}

.incentives-box ul {
   font-size: 20px;
   margin-bottom: 2em;
   list-style: none;
}

.incentives-box ul li {
   position: relative;
   padding-left: 50px;
   margin-bottom: 0.75em;
   min-height: 28px;
   font-size: 16px;
}

.incentives-box ul li:before {
   background-image: url(../../_assets/bullet-tick.svg);
   content: '';
   width: 31px;
   height: 27px;
   display: block;
   position: absolute;
   top: 2px;
   left: 0;
}

.incentives-box.dark ul li:before {
   background-image: url(../../_assets/bullet-tick-light-green.svg);
}

.incentives-top {
   flex: 1
}

.incentives-box.dark {
   background-color: var(--hlc-midnight-blue);
   color: #ffffff;
}

.incentives-box.dark h2 {
   color: #ffffff
}

.incentives-box.dark h3 { 
   color: var(--hl-light-green);
}

.incentives-box.dark ul {
   color: #ffffff
}

.incentives-box.dark ul li { 
   color: inherit;
}


body.c2019 section.landing-key-contacts,
.key-contacts-list-wide,
div.key-contacts-v3 {
   background-color: var(--hlc-midnight-blue)!important;
   padding: 0 !important;
   font-size: 0;
   padding: 20px 0!important;
}

.key-contacts-list-wide .carousel-container .title { padding: 0 !important; }

div.key-contacts-v3 .header h2 {
   color: #ffffff !important;
   font-size: 39px !important;
   font-family: 'GT Ultra Light', sans-serif !important;
   font-weight: 300;
}


/*div.key-contacts-v3 a.btn-contact-us {
   background-color: #ffffff;
   padding: 1em 1.8em 1em 3.8em !important;
   font-size: 16px;
   color: #2c5e4f;
   background-image: url("/encryption-assistant/_assets/envelope.svg") !important;
   background-position: 1.8em center !important;
   background-repeat: no-repeat;
}

div.key-contacts-v3 .contacts a.btn-contact-us:hover {
   background-color: var(--hl-light-green) !important;
   color: var(--hlc-midnight-blue) !important;
}*/


.key-contacts-list-wide .carousel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.key-contacts-list-wide .key-contact-panel { padding: 0!important; }
.key-contacts-list-wide .key-contact-panel .key-contact-panel-content { display: flex; flex-direction: row; column-gap: 20px; }

.key-contacts-list-wide .contacts a.btn-contact-us, .key-contacts-list-side .btn-contact-us { 
   color: var(--hlc-midnight-blue);
   background-image: url("/_assets/icon-envelope-hl-midnight-blue.png")!important;
}

.key-contacts-list-wide .key-contact-panel .key-contact-panel-content p {
   font-size: 16px;
   color: #ffffff !important;
   font-family: 'GT Ultra Fine', sans-serif;
}

.key-contacts-list-wide .key-contact-panel .key-contact-panel-content p.name {
   font-size: 17px;
   font-family: 'GT Ultra', sans-serif;
   color: var(--hl-light-green)!important;
}

.key-contacts-list-wide .key-contact-panel .key-contact-panel-content img { width: 158px; margin: 0; }

.key-contacts-list-wide .key-contact-panel .key-contact-panel-content .key-contact-details { align-self: end; }

.landing-key-contacts-heading { display: flex; justify-content: space-between; margin-bottom: 20px; }
.landing-key-contacts-heading h2 {
   color: #ffffff;
   font-size: 39px;
   font-family: 'GT Ultra';
}


.tool-section .inner,
.landing-key-contacts .inner		{padding-left: 20px; padding-right: 20px;}

.landing-key-contacts-heading .btn			{background-color: #ffffff; color: #2C5E4F; border: none; display: inline-flex; align-items: center;}
.landing-key-contacts-heading .btn svg		{margin-right: 10px;}
.landing-key-contacts-heading .btn:hover	{background-color: #bed600 !important}

.landing-key-contacts .col	{padding: 0}

.landing-key-contact		{display: flex; align-items: flex-end}
.lkc-image					{width: 158px; margin-right: 18px;}
.lkc-image img				{width: 100%;}
.lkc-text h4				{color: #ffffff; font-family: 'GT Ultra'; font-size: 18px; margin-bottom: 0.1em}
.lkc-text p					{margin-bottom: 0; color: #ffffff; font-size: 17px;}

.white-mask					{width: 100%;}

.tool-section				{background-color:#E8EEED !important}
.tool-section h2			{font-size: 39px; color: #114D42;  font-family: 'GT Ultra'; font-weight: 300; margin-bottom: 0.4em}
.tool-section p				{font-size: 19px; line-height: 1.3em}

.tool-container				{background-color: #ffffff; width: 100%; padding: 10px;}
.tool-container iframe		{width: 100%; height: 640px;}

.callout		{background-color:var(--hlc-midnight-blue); display: flex; padding:10px 24px; align-items: center;}
.callout p		{color:#ffffff; margin: 0 10px 0 0}
.callout .btn	{margin: 0}

section.tool-section {padding: 30px 0;}

/**********************/
/***** RESPONSIVE *****/
/**********************/


@media (max-width: 1430px) {
    .wrapper { background-position-x: 400px; }
}

@media (max-width: 1225px) {
   .inner { padding-left: 15px; padding-right: 15px; }
   .col-container { margin-left: -5px; margin-right: -5px; }

   /*** INTRO PAGE **/
   .intro-left { width: 48% }
   .intro-right { width: 48%; }

   .key-contacts-list-wide .carousel { grid-template-columns: repeat(2, 1fr); }
}


@media (max-width: 1100px) {
    /*** INTRO PAGE ***/
    .intro-left h2 { font-size: 30px; }
    .intro-right { position: absolute; right: 15px; bottom: 136px; }

    /*** FOOTER ***/
    footer { padding: 35px 0; }
    footer ul.social-list { display: block; text-align: center; margin-bottom: 30px; }
    ul.footer-nav { margin: 0; display: block; text-align: center; }
    ul.footer-nav li { margin-bottom: 10px; font-size: 16px; display: inline-block; }
    p.copyright-text { text-align: center; margin-top: 30px; float: none; width: 80%; margin-left: auto; margin-right: auto; display: block; }
}

@media (max-width: 960px) {
    .logo-container h1 { font-size: 32px; }

    /** INTRO PAGE **/
    .home-panels .col-inner { padding: 20px; }
    .home-panels .col-inner h3 { font-size: 28px; }
}

@media (max-width: 960px) {
    .wrapper { background-image: none; }
	
	/* 2023 */
	.landing-two-cols .col,
	.landing-intro .col		{width: 50%}
	
	
}

@media (max-width: 840px) {
	
	/* 2023 */
	.landing-key-contacts-heading h2,
	.incentives-box h2,
	.intro-col-left h1	{font-size: 30px;}
}


@media (max-width: 800px) {

    header { padding: 25px 0 }
    .logo-container-text { margin-left: 25px; width: 60%; }
    .wrapper { background-size: 30% auto; }

    /*** INTRO PAGE ***/
    section.intro-page { padding-top: 80px; padding-bottom: 50px; }
    .intro-left { width: 100%; }
    .intro-right { width: 100%; position: relative; bottom: auto; right: auto; float: none; margin-top: 30px; }
    .intro-right img { width: 60%; vertical-align: middle; margin-left: auto; margin-right: auto; display: block; float: none; }
    section.intro-page .inner { padding-left: 40px; padding-right: 40px; }
}

@media (max-width: 767px) {
	
	/* 2023 */
	.landing-two-cols .cols, .landing-intro .cols	{flex-direction: column;}
	.landing-two-cols .col, .landing-intro .col		{width: 100%;}
	.incentives-box ul								{font-size: 16px;}
	.landing-key-contact							{padding-bottom: 30px;}
	
	.landing-intro	{padding: 50px 0 !important}
	
	.callout	{flex-direction: column; text-align: center; padding: 20px;}
	.callout p	{margin-bottom: 1em}

   .key-contacts-list-wide .carousel { grid-template-columns: repeat(1, 1fr); }
}

@media (max-width: 650px) {
    .col-3 { width: 50%; }
    .btn { font-size: 14px; }


    .logo-container-text { width: 72%; margin-left: 4%; }
    .logo-container img { width: 24%; }
    .logo-container p { display: none; }

    /*** INTRO PAGE ***/
    section.intro-page .inner { padding-left: 20px; padding-right: 20px; }
    .testimonials { padding-top: 15px; }
    .testimonials .col-2 { width: 100%; margin-bottom: 40px; }
    .testimonials blockquote { font-size: 17px; }
    .testimonials { padding-bottom: 10px; }
}


@media (max-width: 550px) {
    .form-container .col-2 { width: 100%; }
    p.discount-ribbon { display: block; width: auto; margin-left: 0; margin-top: 10px; text-align: center; }
    .block-header { margin-top: 20px; }
}

@media (max-width: 480px) {
    .form-left,
    .form-full,
    .form-right { width: 100%; display: block; }
}

@media (max-width: 450px) {
    header { padding: 15px 0 }
    .logo-container h1 { font-size: 28px; }
    .col-3 { width: 100%; }

    /** INTRO PAGE **/
    .intro-right { margin-top: 10px; }
    .intro-left h2 { font-size: 28px; }
    .home-panels .col-inner img { width: 50px; margin-bottom: 10px; }
    .home-panels .col-inner p { font-size: 14px; margin-bottom: 5px; }
}

@media (max-width: 374px) {
    .btnSubmit { width: 100%; }
    .intro-right img { width: 100%; }
}

@media (max-width: 374px) {
    .logo-container h1 { font-size: 24px; }
}
