@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap');

:root {
  --content-width: 1180px;
  --border-radius: 8px;

  --font-sub: clamp(1.06rem, calc(0.97rem + 0.48vw), 1.38rem);
  --font-copy: 13pt;
  --font-small: 9pt;

  --font-head: clamp(1.88rem, calc(1.49rem + 1.92vw), 3.13rem);

  --transition: 0.25s ease-in-out;

  --bg-color: #1f1f1f;
  --dark-bg-color: #060606;
  --light-bg-color: #444444;

  --primary-color: #9cf74d;
  --secondary-color: #0858bf;
  --white-color: #e6e6e6;

  --error-color: #C6372C;

  --focus-opacity: 0.25;
}



/*** GLOBALS ***/
*{
	font-family: 'Lato', sans-serif;
	box-sizing: border-box;
}

body, html{
	height: 100%;
	width: 100%;
}

body{
	margin: 0;padding: 90px 0 0 0;
	background: var(--bg-color);
	overflow: hidden;
	overflow-y: scroll;
}

body::-webkit-scrollbar{
	width: 4px;
    height: 10px;
}

body::-webkit-scrollbar-thumb{
	background: var(--light-bg-color);
	border-radius: 10px;
}

body::-webkit-scrollbar-track{
	background: transparent;
}


html {
	scroll-behavior: smooth;
}

input{
	background: var(--light-bg-color);
	padding: 20px;
	margin: 0;
	outline: none;
	border: none;
	width: 100%;
	font-size: var(--font-copy);
	color: var(--white-color);
	border-radius: var(--border-radius);
}

input:disabled{
	opacity: var(--focus-opacity);
}

textarea{
	border: none;
	outline: none;
}

textarea::-webkit-scrollbar{
	width: 4px;
    height: 10px;
}

textarea::-webkit-scrollbar-thumb{
	background: var(--dark-bg-color);
	border-radius: 10px;
}

textarea::-webkit-scrollbar-track{
	background: transparent;
}

select {
	width: 100%;
    background: var(--light-bg-color);
    outline: none;
    border: none;
    padding: 20px;
    margin: 0;
    border-radius: var(--border-radius);
    color: var(--white-color);
	-moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    font-size: var(--font-copy);
text-transform: capitalize;
}


button{
	outline: none;
	box-shadow: none;
	border: none;
	cursor:pointer;
}


h4, h5{
	font-size: var(--font-sub);
	font-weight: 900;
	color: var(--white-color);
	margin: 0;
	letter-spacing: 0.02em;
	line-height: 120%;
}

p{
	font-size: var(--font-copy);
	font-weight: 300;
	color: var(--white-color);
	margin: 0;
	line-height: 160%;
}

h1,h2{
	font-size: var(--font-head);
	font-weight: 900;
	line-height: 100%;
	color: var(--white-color);
	margin: 0;
	letter-spacing:0.02em;
}

h3{
	font-size: calc(var(--font-head) / 1.4);
	font-weight: 300;
	line-height: 130%;
	color: var(--white-color);
	margin: 0;
	letter-spacing:0.02em;
}

h3 b, p b {
	font-weight: 800;
}

i{
	margin: 0;
	padding:0;
}


canvas{
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: transparent;
}

label{
	cursor: pointer;
}


nav{
  width: 100%;
  position: fixed;
  top:0;left:0;
  background: var(--dark-bg-color);
  height: 90px;
  z-index: 9001;
}

/*** NAV **/

.nav_contain{
  max-width: 1680px;
  width: 90%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav_item{
	text-decoration: none;
	color: var(--white-color);
}

.nav_item a{
    color: var(--white-color);
    text-decoration: none;
    position: relative;
    text-align: right;
    height: 20px;
    font-weight: 400;
}

.nav_item a:hover, a.nav_item:hover, .nav_item:hover{
	color: var(--primary-color);
}

/*.logo{
  width: 30px;min-width:30px;
  text-decoration: none;
}*/

.logo svg{
  fill: var(--primary-color);
}

.logo img {
    max-height: 34px;
}


.nav_dropdown{
	height: 0;
	overflow: hidden;
	list-style: none;
	text-decoration: none;
	padding:0;
	margin:0;
	display: flex;
  gap: 5px;
  flex-direction: column;
  padding: 0;
  border-radius: var(--border-radius);
  position: absolute;
  background: var(--dark-bg-color);
  min-width: 200px;
}


.nav_item:hover .nav_dropdown{
	height: auto;
	padding: 10px;
	margin-top: 10px;
}

.nav_dropdown li{
	display: none;
}

.nav_dropdown a{
	text-decoration: none;
	color: var(--white-color);
	position: relative;
	padding: 10px 15px;
	z-index: 1;
	display: flex;
	align-items: center;
	height: auto;
}

.nav_dropdown a:hover{
	color: var(--primary-color);
}

.nav_dropdown a:hover:after{
	content: '';
	width:100%;height:100%;
	top:0;left:0;
	position: absolute;
	border-radius: var(--border-radius);
	background: var(--light-bg-color);
	opacity: var(--focus-opacity);
	z-index: -1;
}

.nav_dropdown a span{
	padding-right: 10px;
}

.nav_item:hover .nav_dropdown li{
	display: block;
}


.nav_item:hover .nav_dropdown_header{
	padding-bottom: 10px;
}


.nav_dropdown_header:after{
	content: '\e901';
	font-size: 12px;
    display: inline-block;
    transform: rotateZ(90deg);
   margin-left: 10px;

  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

.nav_item:hover .nav_dropdown_header{
	color: var(--primary-color);
}


.nav_main{
	display: flex;
	justify-content: end;
	flex: 1;
  gap: 5%;
  align-items: center;
  list-style-type: none;
}


.nav_mobile_btn{
	display: none;
}

.open-nav{
	font-size: 30px;
	cursor: pointer;
}

.open-nav:hover{
	color: var(--primary-color);
}


a.nav_btn.btn{
	  color: var(--dark-bg-color) !important;
    width: auto;
    margin: 0;
    font-size: var(--font-copy);
    padding: 10px 20px;
    font-weight: 700;
	display: inline;
}

@media(max-width: 880px){


	.nav_mobile_btn{
		display: inline-block;
	}

	.nav_desktop_btn{
		display: none;
	}

	.nav_dropdown{
		position: relative;
	}

	.nav_item{
		width: 100%;
	}

	.nav_main .nav_item a{
		font-size: var(--font-head);
		height: auto;
	}

	.nav_main .nav_item a.nav_btn{
		margin-top: 30px;
    display: block;
    text-align: center;
	}

	.nav_dropdown_header{
	    display: flex;
	    align-items: center;
	}

	.nav_dropdown_header:after{
		font-size: var(--font-sub);
	}

	.active-nav .nav_main{
		height: calc(100dvh - 90px);
		padding: 5% 5%;
		overflow-y: scroll;
	}

	.active-nav .open-nav .icon-menu:before{
		content: '\e922';
	}

	.nav_main{
			transition: var(--transition);
			overflow: hidden;
		  position: fixed;
	    top: 90px;left: 0;
	    flex-direction: column;
	    align-items: start;
	    justify-content: flex-start;
	    gap: 20px;
	    height: 0;
	    background: var(--dark-bg-color);
	    width: 100%;
	    z-index: 9001;
	    margin: 0;
	    padding: 0 5%;
	}
}

/** GLOBAL COLS **/

section{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
  row-gap: 20px;
  padding: 7vh 0;
  min-height: 70vh;
  position: relative;
}

section.reduced-height{
	min-height: auto;
	padding: 0;
}

.col{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	flex-basis: calc(50% - 10px);
	border-radius: var(--border-radius);
}

.img-col img{
	width: 100%;
	border-radius: var(--border-radius);
}

.section-header{
	flex-basis: 100%;
  margin: 0 auto 30px auto;
  text-align: center;
  max-width: 850px;
}

.fullwidth-section .section-header{
	width: 90%;
}

.col.filled-col{
	overflow: hidden;
  padding: 30px 0 0 0;
  justify-content: space-between;
  position: relative;
}

.col.filled-col:after{
	content: '';
	width:100%;height:100%;
	position: absolute;
	top:0;left: 0;
	background: var(--light-bg-color);
	opacity: var(--focus-opacity);
	z-index: -1;
}

.col.filled-col.extra-padding{
	padding: 30px 0 30px 0;
}

.dark{
	background: var(--dark-bg-color);
}

.half-dark:after{
	content: '';
	width: 100%;height:60%;
	background: var(--dark-bg-color);
	top:20%;bottom:20%;left:0;
	z-index: -1;
	position: absolute;
}

.col.fullwidth-col, .single-col.fullwidth-col{
	flex-basis: 100% !important;
}

section.fullwidth-section{
	width: 100%;
	max-width: 100%;
}

section.extra-padding{
	padding: 10vh 0;
}


.col .primary-element{
	flex: 1;
}

h2.extra-padding, h3.extra-padding, h4.extra-padding, p.extra-padding{
	padding: 0 30px;
}

.btn{
	font-size: var(--font-sub);
	padding:15px 35px;
}
a.btn{
	display: inline-block;
	width: auto;
}



.col.sub-cols{
	flex-direction: row;
	gap:15px;
	flex-wrap: wrap;
}

.sub-col{
	flex-basis: calc(50% - 10px);
display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}




.right-weighted-col .col, .left-weighted-col .col{
	align-self: center;
	justify-content: start;
}

.right-weighted-col .col:first-child, .left-weighted-col .col:last-child{
	flex-basis: 40%;
}

.right-weighted-col .col:last-child, .left-weighted-col .col:first-child{
	flex-basis: 58%;
}



.double-col{
  max-width: 1080px;
  width: 90%;
  margin: 30px auto;

	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
  row-gap: 20px;
}





.single-col {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 580px;
    margin: 0 auto;
    width:90%;
}

.single-col.extra-padding{
	padding: 30px 0;
}



.tri-cols, .quad-cols {
    display: flex;
    gap: 2.5%;
    justify-content: space-between;
    align-items: start;
}

.tri-cols .col{
	gap: 10px;
	flex-basis: calc(33% - 5px);
}

.quad-cols .col{
	gap: 10px;
	flex-basis: calc(25% - 5px);
}

.tri-cols .col-detail, .quad-cols .col-detail {
    display: flex;
    text-align: left;
    align-items: center;
	justify-content: flex-start;
    gap: 10px;
	flex-direction: row;
	color: var(--primary-color);
}


.col-icon{
	font-size: var(--font-sub);
	color: var(--primary-color);
}

.tri-cols .filled-col, .quad-cols .filled-col{
	padding: 25px 20px;
	align-self: stretch;
}

.tri-cols .img-icon, .quad-cols .img-icon{
	margin: 0 auto;
	max-width: 140px;
    color: var(--primary-color);
    font-size: 90px;
}

.tri-cols img{
	width: 100%;
	padding: 10px 0;
	border-radius: 100%;
}





.contained{
  max-width: 1080px;
  width: 90%;
  margin: 30px auto;
}


@media(max-width: 768px){

	section, .double-col{
		flex-direction: column;
		width: 95%;
	}

	.col, .sub-col{
		flex-basis: 100%;
		width: 100%;
	}

	.col.sub-cols{
		flex-direction: column;
		gap: 40px;
	}

	section.double-col.mobile-reversed{
		flex-direction: column-reverse;
	}

	.col.sub-cols.mobile-reversed{
		flex-direction: column-reverse;
	}


	section h1, section h2, section h4, section h4, section .section-header, section p{
		text-align: left;
	}

	section{
		min-height: auto;
		margin: 15vw auto !important;
	}

	.half-dark:after{
		top:0;
		height: 85%;
	}

	.tri-cols, .quad-cols{
		flex-direction: column;
		gap: 20px;
	}

	.tri-cols .col, .quad-cols .col{
		text-align: left;
		flex-direction: row;
		justify-content: start;
		align-items: center;
	}

	.tri-cols .col .img-icon, .quad-cols .col .img-icon{
		margin: 0;
	}

	.tri-cols.mobile-wrapped .col{
		display: block;
		margin-top: 40px;
	}

	.col h3.text-center{
		text-align: left;
	}

	a.btn{
		width: inherit;
	}
}



/*** SPECIFIC STYLES **/

.highlight-icon {
    min-width: 60px;
    min-height: 60px;
    max-width: 60px;
    max-height: 60px;

    background: var(--primary-color);
    border-radius: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: var(--bg-color);
    margin: 20px 0 0 0;
}

.highlight-icon-col{
	justify-content: start;
	gap: 15px;
}

.highlight-desc p{
	margin-top: 8px;
}

.highlight-text{
	color: var(--primary-color);
}

.img-shadow{
  filter: drop-shadow(-15px 10px 20px rgba(0,0,0,0.5));
}

.number-highlight {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: var(--font-head);height:var(--font-head);
	font-weight: 800;
	overflow: hidden;
	line-height: 100%;
	border-radius: 100%;
	background-color: var(--primary-color);
	color: var(--dark-bg-color);
	font-size: calc(var(--font-head) / 1.5);
	position: relative;
	top: -5px;
	margin-right: 10px;
}

.col-list ul{
	color: var(--white-color);
	font-size: var(--font-sub);
	line-height: 200%;
}


@media(max-width: 768px){
	.highlight-icon-col{
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.highlight-icon{
		margin: 0;
	}

}



/** SLIDER **/

.slider{
	position: relative;
	margin: 0;
	padding-bottom: 50px;
	max-width: 100%;
	width: 100%;
	overflow: hidden;
	row-gap: 30px;
	min-height: auto !important;
}



.slides{
	display: flex;
  justify-content: left;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 0 5% 0 0;
  gap: 2.5%;
}

.slides::-webkit-scrollbar{
	width: 0;
  height: 0;
}

.slides::-webkit-scrollbar-thumb{
	background: var(--light-bg-color);
	border-radius: 10px;
}

.slides::-webkit-scrollbar-track{
	background: transparent;
}



.slider-step {
    scroll-snap-align: start;
    flex-shrink: 0;
    transform: scale(1);
    transform-origin: center center;
    transition: transform .5s;
    position: relative;
    overflow: hidden !important;
    max-width: 1080px;
    width:90%;
}

.slider-step-inner {
    height: 100%;
    background: var(--dark-bg-color);
    border-radius: var(--border-radius);
}

.slider-step img{
    height: 100%;
    object-fit: cover;
    width: 100%;
    transition: 0.5s;
    border-radius: var(--border-radius);
}

.slides .slider-step:first-child{
	padding-left: 5%;
}


.slider:after {
    content: '';
    height: 60%;width: 100%;
    position: absolute;
    bottom:0;left:0;
    background: var(--dark-bg-color);
    z-index: -1;
}

.slider .tri-cols, .slider .section-header{
	  width: 95%;
    max-width: 1080px;
    margin: 0 auto;
}

[data-slider-step-desc]{
	opacity: var(--focus-opacity);
	transition: var(--transition);
}

[data-slider-step-desc] h5{
	display: flex;
	align-items: center;
}

.slider [data-slider-step-desc] h5:before{
	content: '';
	background: var(--primary-color);
	width: 20px;height:20px;
	border-radius: 100px;
	display: inline-block;
	transform: scale(0);
	opacity: 0;
	margin-right: -20px;
	transition: var(--transition);
}

.slider [data-slider-step-image] img{
	opacity: var(--focus-opacity);
}




[data-slider-step="1"] [data-slider-step-desc="1"],
[data-slider-step="2"] [data-slider-step-desc="2"],
[data-slider-step="3"] [data-slider-step-desc="3"],
[data-slider-step="4"] [data-slider-step-desc="4"]{ 
	opacity: 1 
}


[data-slider-step="1"] [data-slider-step-image="1"] img,
[data-slider-step="2"] [data-slider-step-image="2"] img,
[data-slider-step="3"] [data-slider-step-image="3"] img,
[data-slider-step="4"] [data-slider-step-image="4"] img{ 
	opacity: 1 
}


.slider[data-slider-step="1"] [data-slider-step-desc="1"] h5:before,
.slider[data-slider-step="2"] [data-slider-step-desc="2"] h5:before,
.slider[data-slider-step="3"] [data-slider-step-desc="3"] h5:before,
.slider[data-slider-step="4"] [data-slider-step-desc="4"] h5:before{
	opacity:1;
	transform: scale(1);
	margin-right: 10px;
}


.slider-step-desc-mobile{
	display: none;
	margin-top: 30px;
}


@media(max-width: 768px){
	.slider-step-desc-desktop{
		display: none;
	}

	.slider-step-desc-mobile{
		display: block;
	}
	.slider-step{
		padding-left: 5%;
	}
	.slider-step img{
		height: auto;
	}

	.slider-step-desc-mobile p{
		margin-top: 20px;
	}

	.slider .tri-cols{
		flex-direction: row;
	}
}

/** MESSAGES **/

.automatic-message .highlight-icon-col {
	display: flex;
	align-items: center;
}

.automatic-message .highlight-icon-col .highlight-icon{
	margin: 0;
}

.automatic-message .highlight-icon-col .highlight-icon{
    min-width: 80px;
    min-height: 80px;
    max-width: 80px;
    max-height: 80px;
    font-size: 60px;
}

.automatic-message .highlight-desc{
	max-width: 370px;
}

.automatic-message{
	align-self: flex-start !important;
	margin-top: 40px;
}


.red-highlight{
	background: var(--error-color);
}


#messages-schedule-slider .slider-step{
	max-width: 660px;
}


@media(max-width: 768px){

}

/*** FOOTER **/


footer{
	padding: 50px 10px;
}

.footer_contain{
	display: flex;
	justify-content: center;
	gap: 20px;
}

.footer_contain a{
	text-decoration: none;
	color: var(--white-color);
}

.footer_contain a:hover{
	text-decoration: underline;
}




/** COMPARE / CONTRAST **/

.compare-grid {
	display: grid;
	grid-template-columns: var(--grid-left-width-d) repeat(var(--grid-cols), 1fr);
	overflow-x: scroll;
	padding-bottom: 10px;
}

.compare-grid-container{
position: relative;
margin: 0 auto;
}

.compare-grid-container:after {
	content: "";
	position: absolute;
	height: calc(100% - 20px);
	box-shadow: 0 0 20px 1px var(--primary-color);
	border: 1px solid var(--primary-color);
	width: calc((100% - var(--grid-left-width-d)) / var(--grid-cols));
	top: 0;
	left: var(--grid-left-width-d);
	min-width: 100px;
	pointer-events: none;
	border-radius: var(--border-radius);
}


.compare-grid .fixed{
position: sticky;
color: var(--primary-color);
font-weight: 800;
}

.compare-check, .compare-feature {
	padding: 15px;
	text-align: left;
	word-wrap: break-word;
	border-right: 1px solid var(--light-bg-color);
	border-bottom: 1px solid var(--light-bg-color);
}

.compare-grid > .compare-check:nth-child(3n),
.compare-grid > .compare-feature:nth-child(3n) {
border-right: none;
}

.compare-feature{
padding: 15px 20px 15px 0;
}

.compare-feature, .compare-feature-detail {
	display: flex;
	flex-direction: column;
	border-left: none;
	justify-content: center;
}

.compare-feature-detail p, .compare-feature-detail li{
font-size: var(--font-small);
line-height: 130%;
}

.compare-header {
	font-weight: 800;
	padding: 20px 10px;
	text-align: left;
	justify-content: end !important;
	text-wrap: nowrap;
	font-size: var(--font-small);

}

.compare-header svg{
	width: 30px;
	fill: var(--primary-color);
}
.compare-header img {
	width: 50px;
}


.compare-feature, .compare-feature-header{ left:0; }
.compare-check.fixed, .compare-header:not(.compare-feature-header).fixed{ left:300px; }

.compare-feature-title {
	font-weight: 800;
	margin-bottom: 10px;
	text-align: left;
}

.compare-check, .compare-header {
color: var(--white-color);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
word-wrap: break-word;
flex-direction: column;
gap:10px;
min-width: 100px;
}

.compare-feature-header{
flex-direction: row;
justify-content: start !important;
color: var(--primary-color);
font-size: var(--font-sub);
padding-left: 0;
}

.compare-feature ul {
	padding-left: 20px;
	margin: 0;
}



.compare-check{
color: var(--light-bg-color);
font-size: var(--font-small);
}

.compare-check.checked, .compare-check.not-checked {

/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icons' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

font-size: calc(var(--font-sub) * 1.5);
}

.compare-check.not-checked:after{
content: "\e922";
}

.compare-check.checked:after{
content: "\e908";
color: var(--light-bg-color);
}

.compare-check.checked.fixed:after{
color: var(--primary-color);
}

.compare-grid .compare-check:nth-child(6n) {
border-right: none;
}


.compare-grid::-webkit-scrollbar{
width: 9px;
height: 10px;
}

.compare-grid::-webkit-scrollbar-thumb{
background: var(--light-bg-color);
border-radius: 10px;
}

.compare-grid::-webkit-scrollbar-track{
background: transparent;
}

.compare-desc{
max-width: 500px;
padding: 2.5%;
margin: 20px auto 60px auto;
}



@media all and (max-width: 800px) {

	.compare-grid {
		grid-template-columns: var(--grid-left-width-m) repeat(var(--grid-cols), 1fr);
	}

	.compare-check.fixed, .compare-header:not(.compare-feature-header).fixed{ 
		left:var(--grid-left-width-m); 
	}

	.compare-grid-container:after{
		width: calc((100% - var(--grid-left-width-m)) / var(--grid-cols));
		left: var(--grid-left-width-m); 
	}

	.compare-check, .compare-header, .compare-grid-container:after{
		min-width: 60px;
	}

	.compare-feature-header, .compare-grid .compare-feature.fixed{
		padding-left: 10px;
	}

	/* .compare-header{
		font-size: 0;
		justify-content: start !important;
	} */

	.compare-header svg{
		margin-top: 10px;
	}

}