﻿* { 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: 'berlingske_sans_roundmedium', 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: 'berlingske_sans_roundmedium'; }

.btn.green.solid { background-color: #bed600 }

.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; }

/* 2023 STYLES */
.landing-wrapper p { margin-bottom: 1em; line-height: 1.2em; }

.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: #ffffff; position: relative; display: flex; flex-direction: column; height: 100%; }
.intro-col-left h1		{font-size: 44px; margin-bottom: 0.4em; line-height: 1.1em; }
.intro-col-left p		{color: #ffffff}
.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: #42AC47; padding: 40px 35px 30px; flex: 1; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%); }



.landing-wrapper .btn	{background-color:#C3D544; 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; background-color: #E8EEED; display: flex; flex-direction: column; height: 100%; align-items: flex-start}
.incentives-box h2				{font-size: 39px; font-family: 'berlingske_sans_roundlight'; margin-bottom: 0.35em}
.incentives-box h3				{font-size: 23px; font-family: 'berlingske_sans_roundmedium'; margin-bottom: 1em; color: #42AC47}
.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}
.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-top					{flex: 1}

.incentives-box.dark	{background-color: #114D42}
.incentives-box.dark h2	{color: #ffffff}
.incentives-box.dark ul	{color: #ffffff}

.landing-key-contacts,
.key-contacts-list-wide { background-color: #31574E !important; padding: 0!important; font-size: 0; padding-top: 10px!important; }

.key-contacts-list-wide .carousel-container .title { padding: 0 !important; }
.key-contacts-list-wide .carousel-container .title h2 { color: #ffffff !important; font-size: 39px !important; font-family: berlingske_sans_roundlight, sans-serif !important; }

.key-contacts-list-wide .contacts 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;  }

.xxkey-contacts-list-wide .contacts a.btn-contact-us:before { content: ""; display: inline-block; width: 20px; height: 13px; background-image: url("/encryption-assistant/_assets/envelope.svg"); background-size: contain; background-repeat: no-repeat; margin-right: 10px;  }
.key-contacts-list-wide .contacts a.btn-contact-us:hover { background-color: #bed400!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 .key-contact-panel .key-contact-panel-content p { font-size: 17px; color: #ffffff !important; font-family: berlingske_sans_roundregular, sans-serif; }
.key-contacts-list-wide .key-contact-panel .key-contact-panel-content p.name { font-size: 18px; font-family: berlingske_sans_roundmedium, sans-serif; }

.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: 'berlingske_sans_roundlight';}

.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: 'berlingske_sans_roundmedium'; 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: 'berlingske_sans_roundlight'; margin-bottom: 0.4em}
.tool-section p				{font-size: 19px; line-height: 1.3em}

.tool-container				{background-color: #ffffff; width: 100%; padding: 30px;}
.tool-container iframe		{width: 100%; height: 640px;}

.callout		{background-color:#114D42; 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; }
}
