* {
	margin: 0;
	padding: 0;
}

html { height: 100%; }

body {
	box-sizing: border-box;
	font: 300 16px "Work Sans", sans-serif;
	min-height: 100%;
	padding-bottom: 291px;
	position: relative;
}

h1, h2 {
	font-size: 36px;
	font-weight: 700;
	margin-bottom: 0.8em;
}

h3 {
	font-size: 24px;
	font-weight: 400;
	margin: 1em 0 0.667em 0;
}

h4 {
	font-size: 18px;
	font-weight: 400;
}

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

img { vertical-align: middle; }

strong { font-weight: 600; }

a.button {
	background-color: #557a94;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font: 400 18px "Work Sans", sans-serif;
	padding: 11px 20px 12px 20px;
	text-decoration: none;
}

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

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

ul.col2 {
	columns: 2;
	column-gap: 20px;
}

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

header {
	display: grid;
	grid-template-columns: 341px auto;
	margin: 0 auto;
	max-width: 1600px;
	padding: 30px 20px;
	position: relative;
	z-index: 100;
}

header .logo { display: block; }

.main-menu {
	align-items: start;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	list-style: none;
	margin: 0 -25px;
}

.main-menu li { margin: 0 25px; }

.main-menu a {
	color: #2f3941;
	font-size: 18px;
	font-weight: 600;
	padding-bottom: 2px;
	position: relative;
	text-decoration: none;
}

.main-menu > li > a::after {
  border-bottom: 3px solid #557a94;
  content: '';
  height: 100%;
  position: absolute;
    right: 5px;
    left: 5px;
  transform: scaleX(0.0001);
  transition: transform 300ms ease-in-out;
}

.main-menu > li:hover > a::after { transform: scaleX(1); }

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

.banner {
	margin-top: -130px;
	position: relative;
}

.banner img { width: 100%; }

#wds_90_slide1_layer1 {
	display: block !important;
	margin: 0 auto;
	max-width: 1600px;
	position: relative !important;
}

#wds_90_slide1_layer1 h1 {
	font: 700 48px 'Work Sans', sans-serif;
	line-height: 1.2em;
	margin-bottom: 0.5em;
	max-width: 640px;
}

#wds_90_slide1_layer1 h3 {
	color: #4e565c;
	font: 400 24px 'Work Sans', sans-serif;
	line-height: 1.2em;
	margin-bottom: 1em;
	max-width: 640px;
}

.mobile-banner {
  display: none;
  padding: 0 20px;
  text-align: center;
}

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

.inside-banner {
	display: grid;
  gap: 32px 80px;
  grid-template-columns: 4fr 5fr;
  margin: 0 auto;
  max-width: 1600px;
  padding: 60px 0;
  place-items: center start;
}

.inside-banner h1 {
  font-size: 60px;
  margin-bottom: 27px;
}

.inside-banner h4 {
  font-size: 30px;
  margin: 0 0 35px 0;
}

.inside-banner p {
  font-size: 22px;
  line-height: normal;
}

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

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

.mobile-menu {
	background-color: #2a485d;
	display: none;
	font-size: 18px;
	align-items: stretch;
}
	
.mobile-menu ul { display: none; }

.mobile-menu a,
.mobile-menu .separator {
	color: #fff;
	display: block;
	font-weight: 400;
	text-decoration: none;
	padding: 19px 20px;
}

.mobile-menu li { margin: 0; }

.mobile-menu li { border-top: 1px solid #3a586d; }

.mobile-menu .separator {
	background: url("../images/mobile-menu-icon.png") 20px center no-repeat;
	padding-left: 70px;
}

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

.frontpage {
	align-items: center;
	display: grid;
	gap: 60px;
	grid-template-columns: auto 1fr;
}

.content {
	color: #3b3d40;
	margin: 0 auto;
	max-width: 1600px;
	overflow: hidden;
	padding: 80px 20px;
}

.content h1,
.content h2,
.content h3 { color: #2f3941; }

.content .custom_grid.solid {
	background-color: #fff;
	box-shadow: 0 1px 20px rgba(220,223,224,0.75);
}

.content .custom_grid.solid .grid-item {
	box-shadow: none;
}

.content .custom_grid {
	display: grid;
	gap: 25px;
	grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
	margin: 2em 0;
}

.content .grid-item {
	box-shadow: 0 1px 20px rgba(220,223,224,0.75);
	padding: 30px;
}

.content .grid-item h3 { margin-top: 0; }

.content .grid-item .image {
	border-bottom: 1px solid #e8edf0;
	margin: -30px -30px 30px -30px;
}

.content .grid-item img { max-width: 100%; }

.content ul {
	margin: 1em 0;
	overflow: hidden;
}

.content li {
	line-height: 1.3em;
	margin-left: 1.2em;
	margin-bottom: 0.5em;
}

.content .wdform_page {
	display: grid;
	gap: 80px;
	grid-template-columns: 610px auto;
	max-width: 1000px;
	margin: 0 auto;
}

.content .wdform_page h3 { display: none; }

.breadcrumb {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
}

.breadcrumb li { margin: 0 7px 0 0; }

.breadcrumb li:first-child { margin-right: 0; }

.content .step {
	align-items: center;
	display: grid;
	grid-template-columns: 169px auto;
	margin: 40px 0;
}

.content .label {
	display: inline-block;
	position: relative;
}

.content .number {
	color: #fff;
	font-size: 72px;
	font-weight: 400;
	line-height: 72px;
	position: absolute;
		left: 0;
		top: 48px;
		right: 0;
	text-align: center;
	width: 169px;
	z-index: 100;
}

.content .step .text {
	align-items: center;
	background-color: #1e80c4;
	border-radius: 100px;
	color: #fff;
	display: grid;
	font-size: 18px;
	gap: 60px;
	grid-template-columns: minmax(100px, 240px) minmax(320px, auto) 80px;
	margin: 20px 0;
	padding: 30px 60px;
	flex: 1 1 auto;
}

.content .step h3 {
	color: #fff;
	margin: 0;
}

.grid-item :last-child { margin-bottom: 0; }

.grid-item h3 { text-align: center; }

.grid-item div { text-align: center; }

#form12 .wdform_page .wdform_section:first-child {
	border-right: 2px dotted #4e565c;
	padding-right: 5px;
}

.content .left-image {
	align-items: center;
	display: grid;
	gap: 60px;
	grid-template-columns: auto 1fr;
}

.content .right-image {
	align-items: center;
	display: grid;
	gap: 60px;
	grid-template-columns: 1fr auto;
}

.content .item-page_screenshots {
	margin-top: 80px;
}

/* ==========================================================================
   Divider
   ========================================================================== */

div.divider {
	color: #3e596d;
	font-size: 48px;
	font-weight: 700;
	margin: 0 auto;
	max-width: 1600px;
	padding: 40px 20px;
	text-align: center;
}

/* ==========================================================================
   Section 1
   ========================================================================== */

.section1,
.section6 {
	margin: 0 auto;
	max-width: 1600px;
	padding: 80px 20px;
}

.section1 .custom_grid,
.section6 .custom_grid {
	display: grid;
	gap: 25px;
	grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
}

.section1 .grid-item,
.section6 .grid-item {
	align-items: center;
	box-shadow: 0 1px 20px rgba(220,223,224,0.75);
	display: flex;
	flex-flow: row nowrap;
	padding: 30px;
}

.section1 .icon,
.section6 .icon {
	background-color: #e8edf0;
	border-radius: 70px;
	display: inline-block;
	margin-right: 30px;
	padding: 30px;
}

.section1 h1,
.section6 h1 {
	color: #2f3941;
	margin-bottom: 1.1em;
	text-align: center;
}

.section1 h3,
.section6 h3 {
	color: #2f3941;
	margin: 0;
}

/* ==========================================================================
   Section 2
   ========================================================================== */

.section2 {
	margin: 0 auto;
	max-width: 1600px;
	padding: 80px 20px;
}

.section2 .custom_grid {
	display: grid;
	gap: 25px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.section2 .grid-item { text-align: center; }

.section2 h1 {
	color: #2f3941;
	margin-bottom: 1.1em;
	text-align: center;
}

.section2 h3 {
	color: #2f3941;
	font-weight: 600;
	margin-bottom: 0.3em;
}

.section2 h4 { color: #3e596d; }

/* ==========================================================================
   Section 3
   ========================================================================== */

.section3 {
	counter-reset: section;
	font-size: 24px;
	margin: 0 auto;
	max-width: 1040px;
	padding: 80px 20px;
}

.section3 h1 {
	color: #2f3941;
	margin-bottom: 1.1em;
	text-align: center;
}

.section3 ol {
	columns: 2;
	list-style: none;
}

.section3 ol li {
	counter-increment: section;
	margin-bottom: 0.8em;
}

.section3 ol li:before {
	background-color: #557a94;
	border-radius: 50%;
	color: #fff;
	content: counter(section);
	display: inline-block;
	font-size: 18px;
	font-weight: 400;
	margin-right: 20px;
	padding: 8px;
	text-align: center;
	width: 24px;
}

/* ==========================================================================
   Section 4
   ========================================================================== */

.section4 {
	margin: 0 auto;
	max-width: 1200px;
	padding: 40px 20px 80px 20px;
}

.section4 .wdform_page {
	display: grid;
	gap: 80px;
	grid-template-columns: repeat(auto-fit, minmax(400px, auto));
}

.section4 h1 {
	color: #2f3941;
	margin-bottom: 1.1em;
	text-align: center;
}

.section4 h3 { margin-top: 0; }

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

.footer-wrapper {
	background-color: #15252f;
	position: absolute;
		bottom: 0;
	width: 100%;
}

.footer {
	align-items: center;
	color: #fff;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1600px;
	padding: 40px 20px;
}

.footer h3 { margin-top: 0; }

.bottom-menu {
	columns: 2;
	list-style: none;
}

.bottom-menu a {
	color: #fff;
	display: block;
	margin: 5px 0;
	text-decoration: none;
}

.footer .logo {
	display: block;
	margin-bottom: 20px;
}

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

header {
	gap: 20px;
	grid-template-columns: auto;
	grid-template-rows: repeat(2, auto);
	justify-content: center;
}

header .logo { text-align: center; }

.banner { margin-top: 0; }

#wds_90_slide1_layer1 { display: none !important; }

.banner { display: none; }

.mobile-banner { display: block; }
  
}

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

.frontpage {
  grid-template-columns: auto;
  gap: 30px;
}
  
.frontpage img { max-width: 100%; }

.section3 { font-size: 20px; }

.section3 ol { columns: 1; }

}

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

.main-menu { display: none; }

.mobile-menu { display: block; }

.banner { display: none; }

.mobile-banner { display: block; }

div.divider { font-size: 40px; }

#form12 { overflow: hidden; }

#form12 input[type="text"],
#form12 textarea { width: 90% !important; }

.footer { justify-content: center; }

.footer .moduletable_menu { display: none; }

.content .step { grid-template-columns: auto; }

.content .step .label { display: none; }

.content .step .text {
	gap: 20px;
	grid-template-columns: auto;
	grid-template-rows: repeat(3, auto);
	text-align: center;
}

.footer .moduletable:first-child { display: none; }

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

}