/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.01ms !important;
	scroll-behavior: auto !important;
  }
}

:root {
  --color-dark: #001435;
  --color-light: #f0f2f9;
  --color-white: #f8f8f8;
  --color-primary: #203592;
  --color-secondary: #24c196;
  --size-step-0: clamp(1rem, calc(0.96rem + 0.22vw), 1.13rem);
  --size-step-1: clamp(1.25rem, calc(1.16rem + 0.43vw), 1.5rem);
  --size-step-2: clamp(1.56rem, calc(1.41rem + 0.76vw), 2rem);
  --size-step-3: clamp(1.95rem, calc(1.71rem + 1.24vw), 2.66rem);
  --size-step-4: clamp(2.44rem, calc(2.05rem + 1.93vw), 3.55rem);
  --size-step-5: clamp(3.4332rem, calc(2.9805rem + 2.2636vw), 4.7348rem);
}

body {
  background: var(--color-white);
  color: var(--color-dark);
  font-family: "Work Sans", sans-serif;
  font-size: var(--size-step-0);
  line-height: 1.7;
}

a {
  color: currentColor;
  -webkit-text-decoration-color: var(--color-primary);
		  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 0.3ex;
  text-underline-offset: 0.3ex;
}

a:hover{
	-webkit-text-decoration-color: var(--color-secondary);
		  text-decoration-color: var(--color-secondary);
}

h1,
h2,
h3 {
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}

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

h1 {
  font-size: var(--size-step-3);
}

h2 {
  font-size: var(--size-step-3);
}

h3 {
  font-size: var(--size-step-2);
}

ul,
ol {
  -webkit-padding-start: 1em;
		  padding-inline-start: 1em;
}

blockquote {
  -webkit-padding-start: 1em;
		  padding-inline-start: 1em;
  -webkit-border-start: 0.3em solid;
		  border-inline-start: 0.3em solid;
  font-style: italic;
  font-size: var(--size-step-1);
}

/* Utilities */
.flow > * + * {
  -webkit-margin-before: var(--flow-space, 1em);
		  margin-block-start: var(--flow-space, 1em);
}

/* Flow and rythm */
:is(h1, h2, h3, blockquote) {
  --flow-space: 1.5em;
}

:is(h1, h2, h3) + * {
  --flow-space: 0.5em;
}

/* Line lengths */
article {
  max-width: 65ch;
  margin-inline: auto;
}

blockquote {
  max-width: 50ch;
}

h1 {
  max-width: 20ch;
}

h2,
h3 {
  max-width: 28ch;
}

main p,
main ul,
main ol{
	max-width:76ch;
}

table{
	margin-bottom:1rem;
}

table tr td{
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
	padding:0.3rem 1rem 0.3rem 0.3rem;
}

/* Blocks */
.lede {
  font-size: var(--size-step-1);
  font-style: italic;
  max-width: 50ch;
  text-wrap: balance;
}

.lede + * {
  --flow-space: 2em;
}

h1 span{
	color:#d6dadc;
}

/** STRUCTURAL STUFF **/
.restrict{
	max-width:1280px;
	margin:0 auto;
	display:block;
	padding:0 2rem;
}

.columns-1-1{
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap:2rem;
	grid-row-gap:2rem;
}

.columns-2-1{
	display:grid;
	grid-template-columns: 2fr 1fr;
	grid-column-gap:2rem;
	grid-row-gap:2rem;
}

@media screen and (max-width:700px){
	.columns-2-1,
	.columns-1-1{
		grid-template-columns: 1fr;
	}
}

.columns-1-1-1{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap:2rem;
	grid-row-gap:2rem;
}

@media screen and (max-width:1100px){
	.columns-1-1-1{
		grid-template-columns: 1fr;
	}
}

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

.text-center h1,
.text-center h2,
.text-center h3,
.text-centre p{
	margin-left:auto;
	margin-right:auto;
	display:block;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white p,
.text-white ul,
.text-white a{
	color:var(--color-white);
}

.text-dark h1,
.text-dark h2,
.text-dark h3,
.text-dark p,
.text-dark ul{
	color:var(--color-dark);
}

ul.inline{
	list-style: none;
}

ul.inline li{
	display:inline-block;
}

ul.inline li a span{
	width:0px;
	display:inline-block;
	overflow: hidden;
}

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

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

.bg-white{
	background:var(--color-white)
}

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

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

.padding{
	padding:4rem 0;
}

.margin-top{
	margin-top:2rem;
}

/** BUTTONS **/

.button,
header nav > ul > li:last-child a,
input[type=submit],
button{
  appearance: none;
  background-color: var(--color-primary);
  font-family: "Work Sans", sans-serif;
  border: 1px solid rgba(27, 31, 35, .15);
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: poWork Sans;
  display: inline-block;
  font-size: var(--size-step-1);
  font-weight: 600;
  line-height: 36px;
  padding: 6px 24px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
}

.button:focus:not(:focus-visible):not(.focus-visible) {
  box-shadow: none;
  outline: none;
}

.button:hover,
header nav > ul > li:last-child a:hover {
  background-color: var(--color-secondary);
}

.button:focus {
  box-shadow: var(--color-white) 0 0 0 3px;
  outline: none;
}

.button:disabled {
  background-color: #94d3a2;
  border-color: rgba(27, 31, 35, .1);
  color: rgba(255, 255, 255, .8);
  cursor: default;
}

.button:active {
  background-color: var(--color-secondary);
  box-shadow: var(--color-dark) 0 1px 0 inset;
}

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

.button.secondary:hover{
	background:var(--color-dark);
	color:var(--color-white);
}

.larger{
	font-size:var(--size-step-2);
	line-height: 1.2;
}

.smallest{
	font-size:var(--size-step-0);
	line-height: 1.2;
}

/** HEADER **/
header .restrict{
	display:grid;
	grid-template-columns: 150px auto;	
}

.contact{
	grid-column: 1 / 3;
	font-size:80%;
	text-align: right;
	border-bottom:1px solid var(--color-white);
}

.contact a{
	border-bottom:none;
	text-decoration: none;
	color:var(--color-white);
}

.contact ul li{
	margin-left:1rem;
}

header img{
	height:60px;
	margin:20px 0;
}

header nav{
	grid-column: 2;
	grid-row: 2;
	margin-bottom:0.5rem;
}

header nav ul{
	line-height:100px;
	text-align: right;
	float:right;
	width:auto;
	position: relative;
}

header nav ul li{
	margin-left:2rem;
	position: relative;
}

header nav ul li ul{
	display:none;
}

header nav ul li:hover > ul,
header nav ul li ul.show{
	display:block;
	position: absolute;
	z-index:30001;
	top:80px;
	left:0px;
	width:200px;
	line-height:40px;
	text-align:left;
	background:var(--color-primary);
	border-radius:4px;
	box-shadow: 0px 0px 8px var(--color-primary);
}

header nav > ul > li:nth-last-child(2):hover > ul,
header nav > ul > li:nth-last-child(2) > ul.show{
	right:0px;
	left:auto;
}

header nav ul li ul li{
	margin-left:0px;
	padding:0.3rem 1rem;
	width:100%;
}

header nav ul li ul li a{
	color:var(--color-dark);
	white-space: nowrap;
}

header nav ul li ul li ul{
	display:none;
}

header nav ul li ul li{
	display:block;
}

header nav ul li ul li:hover ul,
header nav ul li ul li ul.show{
	display:block;
	position: absolute;
	z-index:30001;
	top:50px;
	left:70px;
	width:180px;
	line-height:40px;
	text-align:left;
	background:var(--color-dark);
	border-radius:4px;
	box-shadow: 0px 0px 8px var(--color-primary);
}

header nav ul li:nth-last-child(2):hover ul li ul{
	left:70px;
	top:50px;
}

header nav ul li:nth-last-child(2):hover ul li ul li ul{
	display:none;
}

header nav ul li:nth-last-child(2):hover ul li ul li:hover ul,
header nav ul li:nth-last-child(2) ul li ul li ul.show{
	display:block;
	position: absolute;
	z-index:30001;
	top:50px;
	left:70px;
	width:180px;
	line-height:40px;
	text-align:left;
	background:var(--color-primary);
	border-radius:4px;
	box-shadow: 0px 0px 8px var(--color-secondary);
}

header nav > ul > li > ul:before,
header nav > ul > li > ul > li > ul > li > ul:before{
	content:"";
	position: absolute;
	left: 11px;
	top: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent var(--color-primary) transparent;
	z-index:9999;
}

header nav > ul > li > ul > li > ul:before{
	content:"";
	position: absolute;
	left: 11px;
	top: -10px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent var(--color-dark) transparent;
	z-index:9999;
}

header nav > ul > li:nth-last-child(2) > ul:before{
	right:11px;
	left:auto;
}

@media screen and (max-width:600px){
	/* header nav ul li:last-child{
		position: fixed;
		bottom:20px;
		right:20px;
		z-index:20000;
	}
	header nav ul li:last-child a{
		box-shadow: 0px 0px 60px var(--color-secondary);
	} */
	header .restrict{
		grid-template-columns: 110px auto;	
	}
}

/** HERO **/
.hero{
	padding:6rem 2rem;
	z-index:20001;
	position: relative;
}

.hero h1{
	font-weight:200;
	max-width:24ch;
	font-size:var(--size-step-4);
	text-shadow: 0px 0px 200px var(--color-secondary);
	font-family:"Work Sans", sans-serif;
}

.hero h2{
	font-size:var(--size-step-1);
	font-weight:300;
	margin-top:4rem;
	text-shadow: 0px 0px 200px var(--color-secondary);
}

.hero p{
	color:var(--color-secondary);
	margin-top:4rem;
	max-width:100%;
}

.hero .button{
	box-shadow:0px 0px 120px var(--color-secondary);
}

@media screen and (max-width:480px){
	.hero{
		min-height:80vh;
	}
	.hero h1{
		font-size:var(--size-step-4);
	}
	.hero h2{
		font-size:var(--size-step-1);
	}
	.hero p{
		font-size:80%;
	}
}

ul.buttons{
	margin-top:4rem;
	max-width: 100%;
}

ul.buttons li{
	margin:0 1rem;
}

/** IMAGES **/
img.radius{
	border-radius:8px;
}

img.shadow{
	box-shadow: 0px 0px 8px var(--color-dark);
}

img.fill{
	height:100%;
	object-fit: cover;
}

figcaption{
	font-size:80%;
	text-align:right;
	font-family:monospace;
	color:var(--color-primary);
	margin-top:2rem;
	max-width:34ch;
	float:right;
}

.bg-primary figcaption{
	color:var(--color-white);
}

.flex{
	display:flex;
	flex-direction: column;
	justify-content: space-around;
}

/** VIDEO **/
iframe{
	border-right: 8px;
}

/** CARDS **/
.card{
	padding:2rem;
	border-right: 8px;
	box-shadow: 0px 0px 8px var(--color-dark);
	border-radius: 8px;
}

.card h2,
.card h3{
	font-weight: 600;
}

.card h3 small{
	font-size:40%;
	color:var(--color-primary);
}

.card img{
	border-radius: 4px;
	margin-bottom:2rem;
}

.card.blog .flow p{

}

/** PROFILE **/
.profile{
	display:grid;
	grid-template-columns: 100px auto;
	grid-column-gap:2rem;
	border-top:1px solid #fff;
	padding-top:1rem;
}

.profile img{
	width:100px;
	height:100px;
	object-fit: cover;
	object-position: center;
	grid-row: 1 / 3;
	border-radius:50%;
}

.profile div{
	padding-top:1rem;
}

.profile h3{
	font-size:var(--size-step-1);
	font-weight:600;
}

.profile p{
	font-style: italic;
}

/** QUOTES **/
blockquote{
	border-color: var(--color-secondary);
}

blockquote cite{
	display:block;
	margin-top:2rem;
	font-size:var(--size-step-0);
	color:var(--color-primary);
}

blockquote cite small{
	font-size:80%;
}

/** LIST ICONS **/
ul.list-icons{
	text-align:left;
	font-size:var(--size-step-1);
	margin-top:4rem;
	max-width:100%;
}

ul.list-icons li .material-symbols-outlined{
	font-size:var(--size-step-5);
	margin-right:2rem;
}

ul.list-icons li{
	display:flex;
}

/** FAQ **/
ul.list-faq{
	margin-top:2rem;
	max-width:100%;
}

ul.list-faq li{
	display:flex;
}

ul.list-faq li .material-symbols-outlined{
	margin-right:2rem;
	margin-top:8px;
}

ul.list-faq li div strong{
	font-size:var(--size-step-1);
}

ul.list-faq li div strong:hover{
	color:var(--color-secondary);
	cursor: poWork Sans;
}

ul.list-faq li div span.answer{
	display:none;
}

ul.list-faq li div span.answer.show{
	display:block;
}

ul.features{
	margin-top:1rem;
	margin-left:1rem;
}

ul.features li{
	list-style: disc;
}

/** VIDEO **/
.video h2{
	
}

.video p{
	max-width:100%;
	margin-bottom:2rem;
}

/** FOOTER **/
footer .restrict{
	display:grid;
	grid-template-columns: auto auto auto auto;
	grid-column-gap:2rem;
	grid-row-gap:2rem;
}

footer .restrict p.copyright{
	grid-column: 1 / 5;
	grid-row: 2;
	padding-top:1rem;
	border-top:1px solid #fff;
}

@media screen and (max-width:1100px){
	footer .restrict{
		grid-template-columns: auto auto;
	}
	footer .restrict p.copyright{
		grid-column: 1 / 3;
		grid-row: 3;
	}
}

@media screen and (max-width:768px){
	footer .restrict{
		grid-template-columns: 1fr;
	}
	footer .restrict p.copyright{
		grid-column: 1;
		grid-row: 5;
	}
}

footer h3{
	font-weight:600;
	font-size:var(--size-step-0);
}

footer img{
	max-width:200px;
	margin-bottom:2rem;
}

footer p{
	line-height: 1.2;
}

footer ul.inline{
	margin:2rem 0 0;
}

footer ul.inline li{
	margin-right:1rem;
}

#sib-container input:-ms-input-placeholder {
text-align: left;
font-family: proxima-nova, sans-serif;
color: #c0ccda;
}

#sib-container input::placeholder {
text-align: left;
font-family: proxima-nova, sans-serif;
color: #c0ccda;
}

#sib-container textarea::placeholder {
text-align: left;
font-family: proxima-nova, sans-serif;
color: #c0ccda;
}

#sib-container a {
text-decoration: underline;
color: #2BB2FC;
}

#sib-container{
padding:0 !important;
border-radius: 4px;
background:transparent;
}

.sib-form-block{
padding:0 !important;
}

.entry__field{
border:none;
}

.sib-form-block__button-with-loader{
line-height:28px !important;
}

.sib-form-block__button{
	margin-top:1rem;
}

.sib-form-block__button svg{
display:none;
}

.entry__error.entry__error--primary{
	display:none !important;
}

/** BLOG **/

.meta,
p.date{
	font-family: monospace;
	color:var(--color-primary);
	font-size:80%;
}

ul.hfeed{
	max-width: 100%;
}

.padding-blog{
	padding:4rem 2rem;
}

article.h-entry img{
	border-radius:8px;
	box-shadow: 0px 0px 8px var(--color-dark);
}