* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  box-sizing: border-box;
  color: #494b4d;
  font: 400 16px 'Montserrat', sans-serif;
  min-height: 100%;
  position: relative;
}

h1 {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 0.75em;
}

h2 {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 0.9em;
}

h3 {
  font-size: 32px;
  font-weight: 800;
  margin: 1em 0 0.5em 0;
}

h4 {
  font-size: 24px;
  font-weight: 800;
  margin: 1.333em 0 0.667em 0;
}

h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 1em;
}

p {
  line-height: 1.8em;
  margin: 1em 0;
}

p:first-of-type { margin-top: 0; }

p:last-of-type { margin-bottom: 0; }

p.larger {
  font-size: 18px;
  font-weight: 400;
}

a { transition: 300ms; }

img {
  max-width: 100%;
  vertical-align: middle !important;
}

strong { font-weight: 800; }

.button {
  background-color: #396279;
  border-radius: 26px;
  color: #fff !important;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  padding: 15px 30px;
  text-decoration: none;
  text-transform: uppercase;
}

.button:hover { background-color: #193545; }

.button-wrapper { margin-top: 2em; }

.pull-left {
	float: left;
	margin: 0 2em 1em 0;
}

.pull-right {
	float: right;
	margin: 0 0 1em 2em;
}

.divider {
  color: #396279;
  margin: 120px auto;
  padding: 0 20px;
  text-align: center;
}

.divider h2 { margin: 0; }

ul.no-bullets {
  line-height: 1.5em;
  list-style: none;
  margin: 1.5em 0;
}

ul.checkmark,
ul.checkmark-circle,
ul.cross {
  list-style: none;
  margin: 1.5em 0;
}

ul.checkmark-circle li {
  background: url("../images/checkmark-circle.png") left top 1px no-repeat;
  line-height: 1.5em;
  min-height: 22px;
  margin-bottom: 1em;
  padding-left: 32px; 
}

ul.checkmark li,
ul.cross li {
  line-height: 1.5em;
  margin-bottom: 1em;
  min-height: 28px;
  padding-left: 39px;
}

ul.checkmark li { background: url("../images/check.png") left top no-repeat; }

ul.cross li { background: url("../images/cross.png") left top no-repeat; }

.hide { opacity: 0; }

/* ==========================================================================
   Header
   ========================================================================== */

header {
  display: grid;
  gap: 30px 50px;
  grid-template-columns: auto 1fr;
  margin: 0 auto;
  max-width: 1600px;
  padding: 40px 20px;
}

#menu-main-menu {
  display: flex;
  flex-flow: row wrap;
  gap: 50px;
  justify-content: end;
  list-style: none;
}

#menu-main-menu a {
  color: #fff;
  display: block;
  font-weight: 600;
  text-decoration: none;
}

#menu-main-menu a::after {
  border-bottom: 3px solid #a8c5d6;
  content: '';
  display: block;
  padding-bottom: 7px;
  transform: scaleX(0);
  transition: transform 300ms ease-in-out;
}

#menu-main-menu a:hover::after { transform: scaleX(0.9); }

/* ==========================================================================
   Mobile Menu
   ========================================================================== */

#mainMenu {
  background-color: #212121;
  color: #fff;
  height: 100vh;
  overflow-x: hidden;
  position: fixed;
    top: 0;
    right: 0;
  transition: 1s;
  width: 0;
  white-space: nowrap;
  z-index: 998;
}

#mainMenu.show { width: 100%; }

#mainMenu .nav { margin: 30px; }

#mainMenu ul { list-style: none; }

#mainMenu .menu li ul {
  display: none;
  margin-bottom: 15px;
}

#mainMenu .menu a {
  color: #fff;
  display: block;
  font-size: 16px;
  font-weight: 400;
  margin: 10px 0;
  text-decoration: none;
}

/* ==========================================================================
    Mobile Menu Toggle
   ========================================================================== */
  
#openMenu {
  background-color: #212121;
  display: none;
  padding: 20px 15px;
  position: fixed;
    top: 0;
    right: 0;
  transition: .5s;
  width: 41px;
  z-index: 999;
}

#openMenu.open {
  background-color: #212121;
  color: #fff;
}

#menuTitle {
  position: relative;
  text-align: center;
  transition: .5s;
}
  
/* ==========================================================================
    Mobile Menu Icon Transition Effect
   ========================================================================== */
  
#btn {
  cursor: pointer;
  display: block;
  height: 30px;
  position: relative;
  transition: .5s;
  z-index: 200;
}

#btn .icon,
#btn .icon::before,
#btn .icon::after {
  background: #fff;
  content: '';
  display: block;
  height: 2px;
  position: absolute;
  transition: top ease .5s .5s, transform ease .5s;
  width: 41px;
}

#btn .icon {
  top: 14px;
  left: 2px;
}

#btn .icon::before { top: -8px; }

#btn .icon::after { top: 8px; }

#btn.active .icon { background: transparent; }

#btn.active .icon::before { transform: rotate(45deg); }

#btn.active .icon::after { transform: rotate(-45deg); }

#btn.active .icon::before,
#btn.active .icon::after {
  background-color: #fff;
  top: 0;
  transition: top ease .5s, transform ease .5s .5s;
}

/* ==========================================================================
   Banner
   ========================================================================== */

.banner-wrapper {
  background: #1f3c4d url("../images/header-bg.png") center bottom no-repeat;
  background-size: cover;
  box-sizing: border-box;
  height: 870px;
  margin: -140px 0 120px;
  padding-top: 140px;
}

.banner {
  color: #fff;
  display: grid;
  gap: 30px 80px;
  grid-template-columns: 4fr 5fr;
  margin: 0 auto;
  max-width: 1600px;
  padding: 0 20px;
  place-items: center;
}

.banner h1 {
  font-size: 64px;
  font-weight: 800;
  margin-bottom: 0.5em;
}

.banner h3 {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.5em;
  margin-bottom: 0; 
}

.banner p { font-size: 20px; }

.banner img { max-width: 100%; }

/* ==========================================================================
   Content
   ========================================================================== */

.content,
.section {
  margin: 120px auto;
  max-width: 1600px;
  padding: 0 20px;
}

.content a,
.section a { color: #396279; }

.box {
  border: 1px solid #e1e1e1;
  padding: 40px;
  margin: 0 auto;
  max-width: max-content;
}

img.border { border: 1px solid #e1e1e1; }

a.larger {
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  text-decoration: none;
}

.screenshot + .text h4 { margin-bottom: 0.25em; }

.medium { max-width: 1360px; }

.center { text-align: center; }

.center ul[class*="col"] { justify-content: center; }

.image.wide { margin: -30px -30px 30px !important; }

.intro {
  margin-bottom: 60px;
  text-align: center;
}

.left-image,
.right-image {
  display: grid;
  gap: 40px 80px;
  place-items: center start;
}

.left-image { grid-template-columns: 1fr 2fr; }

.right-image { grid-template-columns: 2fr 1fr; }

.ratio-1-1 { grid-template-columns: repeat(2, 1fr); }

.ratio-3-4 { grid-template-columns: 3fr 4fr; }

.ratio-3-5 { grid-template-columns: 3fr 5fr; }

.ratio-4-5 { grid-template-columns: 4fr 5fr; }

.ratio-5-4 { grid-template-columns: 5fr 4fr; }

.ratio-5-6 { grid-template-columns: 5fr 6fr; }

.ratio-10-9 { grid-template-columns: 10fr 9fr; }

.content a { color: #396279; }

ul { text-align: left; }

ul:last-child { margin-bottom: 0; }

ul[class*="col"] {
  display: grid;
  gap: 20px 80px;
}

ul[class*="col"] li { margin: 0; }

ul.col-1 { grid-template-columns: auto; }

ul.col-2 { grid-template-columns: repeat(2, max-content); }

ul.col-3 { grid-template-columns: repeat(3, max-content); }

ul.col-5 { grid-template-columns: repeat(5, max-content); }

.flex {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  gap: 30px 80px;
  justify-content: center;
}

.grid {
  display: grid;
  gap: 40px;
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)); }

.grid-3 { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }

.grid-4 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.grid-5 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.grid.gap-60 { gap: 60px; }

.grid.gap-80 { gap: 80px; }

.grid-item > :first-child { margin-top: 0; }

.grid.border .grid-item {
  border: 1px solid #e1e1e1;
  padding: 30px;
}

.grid.side-icon .grid-item {
  align-items: center;
  display: grid;
  gap: 40px;
  grid-template-columns: auto 1fr;
}

.grid.side-icon .text :first-child { margin: 0; }

.icon {
  margin-bottom: 2em;
  position: relative;
}

.icon img {
  position: relative;
  z-index: 1;
}

.icon.shadow {
  display: inline-block;
  margin: 0;
  padding: 10px 10px 0 0;
}

.icon.shadow::after {
  border: 50px solid rgba(114,158,184,0.25);
  border-radius: 50px;
  content: ' ';
  position: absolute;
    top: 0;
    left: 0;
  z-index: 0;
}

.icon.shadow.large { padding: 20px 20px 0 0; }

.icon.shadow.large::after {
  border: 60px solid rgba(114,158,184,0.25);
  border-radius: 60px;
}

/* Flip Box Effect
   ========================================================================== */

.flip-container {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  height: 260px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.flip-card.large { height: 400px; }

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  box-sizing: border-box;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  align-items: center;
  background-color: #396279;
  background-size: cover;
  color: #fff;
  display: flex;
  justify-content: center;
  text-align: center;
}

.flip-card-front h4 { margin-bottom: 0; }

.flip-card-back h4 { margin-top: 0; }

/* Style the back side */
.flip-card-back {
  align-items: center;
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  padding: 20px;
  text-align: center;
  transform: rotateY(180deg);
}

.large .flip-card-back { font-size: 18px; }

.flip-card .button { margin-top: 1em; }

/* ==========================================================================
   Forms
   ========================================================================== */

.fm-header-title {
  font-weight: 800;
  margin-bottom: 0.75em;
}

.fm-header-description { line-height: 1.5em; }

.fm-header-bg { margin-bottom: 30px; }

.fm_empty_margin { margin-top: 0 !important; }

.fm-form-container.fm-theme1 .fm-form,
input[type="text"],
textarea { font-family: 'Montserrat', sans-serif !important; }

.fm-form-container.fm-theme1 .fm-form .button-submit {
  font: 700 16px 'Montserrat', sans-serif;
  text-transform: uppercase;
}

.iti { display: block !important; }

.fm-form .wd-flex { display: block !important; }

.fm-form .fm-header-bg { padding: 0 !important; }

.fm-form .wdform-field:not([type="type_hidden"]) { padding: 7px 0 !important; }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer-wrapper { background-color: #3a4046; }

.footer {
  color: #fff;
  display: grid;
  gap: 30px 80px;
  grid-template-columns: max-content 1fr max-content;
  margin: 0 auto;
  max-width: 1600px;
  padding: 60px 20px;
}

.footer .menu { list-style: none; }

.footer .menu li { margin-bottom: 0.5em; }

.footer .menu li:last-child { margin-bottom: 0; }

.footer a {
  color: #fff;
  text-decoration: none;
}

.footer a:hover { color: #a8c5d6; }

.footer .logo { margin-bottom: 2em; }

.copyright {
  border-top: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 20px 0;
  text-align: center;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media only screen  
and (max-width : 1499px) {

.banner h1 { font-size: 48px; }

.banner h3 { font-size: 24px; }

header {
  grid-template-columns: auto;
  justify-items: center;
}

#menu-main-menu { gap: 20px 30px; }

.banner-wrapper {
  height: auto;
  margin-top: -199px;
  padding: 199px 0 140px;
}

.grid { gap: 20px; }

.image { justify-self: center; }

.image img {
  max-width: 600px;
  width: 100%;
}

.left-image,
.right-image { grid-template-columns: auto; }

}

@media only screen  
and (max-width : 1199px) {

h2 { font-size: 36px; }

h3 { font-size: 28px; }

.banner h1 { font-size: 36px; }

.banner h3 { font-size: 18px; }

.banner { gap: 30px 60px; }

.divider,
.content,
.section { margin: 80px auto; }

.left-image .image,
.right-image .image { grid-row: 1; }
  
}

@media only screen  
and (max-width : 1023px) {

.main-menu { display: none; }

#openMenu { display: block; }

.banner-wrapper {
  margin-top: -140px;
  padding: 140px 0 140px;
}

.banner { grid-template-columns: auto; }

.banner .image { grid-row: 1; }

.banner .text { text-align: center; }

.footer {
  gap: 30px 40px;
  grid-template-columns: repeat(2, auto);
}

.branding {
  grid-column: 1 / span 2;
  grid-row: 1;
  text-align: center;
}

}

@media only screen  
and (max-width : 767px) {

h2 { font-size: 32px;}

h3 { font-size: 24px; }

h4 { font-size: 20px; }

.banner h1 { font-size: 32px; }

.intro { margin-bottom: 40px; }

ul[class*="col-"],
[class*="grid-"] { grid-template-columns: auto; }

.footer { grid-template-columns: auto; }

.branding { grid-column: 1; }

}

@media only screen  
and (max-width : 479px) {

img { max-width: 100% !important; }

header { padding-top: 80px; }

.divider,
.content,
.section { margin: 60px auto; }

.banner-wrapper {
  margin: -180px 0 60px;
  padding-top: 180px;
}

}