/*------------------*/
/* Basic Code Shell */
/*------------------*/

* {
	box-sizing: border-box;
}

html, body, p, h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0;
}

/* Optional min width: 320px/20rem */
html {
	min-width: 20rem;
}

@font-face {
	font-family: 'Heebo';
	src: url('/fonts/heebo-vf.ttf') format("truetype-variations");
	font-weight: 1 999;
	font-display: swap;
}

body {
	font-size: 0.75rem;
	line-height: 0px;
	font-family: 'Heebo', sans-serif;
	letter-spacing: 0.1ex;
	color: #80798B;
}

img {
	max-width: 100%;
	height: auto;
}

a,
a:link,
a:visited,
a:hover,
a:active {
	text-decoration: none;
	cursor: pointer;
	color: #6359f9;
}

.hidden {
	display: none !important;
}

.box,
.box_hero,
.box_small {
	width: 100%;
	max-width: 92.75rem; /* 1420px */
	margin: 0 auto;
}

.box_small {
	padding: 0 16rem;
}

.box {
	padding: 0 8.375rem;
}

.box_hero {
	padding: 0 2rem;
}

.nowrap {
	white-space: nowrap;
}

@media (max-width: 70rem) {
	.box_hero {
		padding: 0 1rem;
	}

	.box {
		padding: 0 4rem;
	}

	.box_small {
		padding: 0 8rem;
	}
}

@media (max-width: 60rem) {
	.box_hero {
		padding: 0 1rem;
	}

	.box {
		padding: 0 2rem;
	}

	.box_small {
		padding: 0 4rem;
	}
}

/*** GRID ***/

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0;
	margin: 0;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	/*margin: 0% 0 0% 1.6%;*/
	margin: 0;
	/*text-align: center;*/
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}

/*  GRID OF "ONE"  */
.col_1_of_1 { width: 100%; }

/*  GRID OF TWO  */
.col_2_of_2 { width: 100%; }
.col_1_of_2 { width: 50%; }

/*  GRID OF THREE  */
.col_3_of_3 { width: 100%; }
.col_2_of_3 { width: 66.66%; }
.col_1_of_3 { width: 33.33%; }

/*  GRID OF FOUR  */
.col_4_of_4 { width: 100%; }
.col_3_of_4 { width: 75%; }
.col_2_of_4 { width: 50%; }
.col_1_of_4 { width: 25%; }

/*  GRID OF FIVE  */
.col_5_of_5 { width: 100%; }
.col_4_of_5 { width: 80%; }
.col_3_of_5 { width: 60%; }
.col_2_of_5 { width: 40%; }
.col_1_of_5 { width: 20%; }

/*  GRID OF SIX  */
.col_6_of_6 { width: 100%; }
.col_5_of_6 { width: 83.33%; }
.col_4_of_6 { width: 66.66%; }
.col_3_of_6 { width: 50%; }
.col_2_of_6 { width: 33.33%; }
.col_1_of_6 { width: 16.66%; }

/*  GRID OF SEVEN  */
.col_7_of_7 { width: 100%; }
.col_6_of_7 { width: 85.71%; }
.col_5_of_7 { width: 71.42%; }
.col_4_of_7 { width: 57.14%; }
.col_3_of_7 { width: 42.85%; }
.col_2_of_7 { width: 28.57%; }
.col_1_of_7 { width: 14.28%; }

/*  GRID OF EIGHT  */
.col_8_of_8 { width: 100%; }
.col_7_of_8 { width: 87.5%; }
.col_6_of_8 { width: 75%; }
.col_5_of_8 { width: 62.5%; }
.col_4_of_8 { width: 50%; }
.col_3_of_8 { width: 37.5%; }
.col_2_of_8 { width: 25%; }
.col_1_of_8 { width: 12.5%; }

/*  GRID OF NINE  */
.col_9_of_9 { width: 100%; }
.col_8_of_9 { width: 88.88%; }
.col_7_of_9 { width: 77.77%; }
.col_6_of_9 { width: 66.66%; }
.col_5_of_9 { width: 55.55%; }
.col_4_of_9 { width: 44.44%; }
.col_3_of_9 { width: 33.33%; }
.col_2_of_9 { width: 22.22%; }
.col_1_of_9 { width: 11.11%; }

/*  GRID OF TEN  */
.col_10_of_10 { width: 100%; }
.col_9_of_10 { width: 90%; }
.col_8_of_10 { width: 80%; }
.col_7_of_10 { width: 70%; }
.col_6_of_10 { width: 60%; }
.col_5_of_10 { width: 50%; }
.col_4_of_10 { width: 40%; }
.col_3_of_10 { width: 30%; }
.col_2_of_10 { width: 20%; }
.col_1_of_10 { width: 10%; }

/*  GRID OF ELEVEN  */
.col_11_of_11 { width: 100%; }
.col_10_of_11 { width: 90.90%; }
.col_9_of_11 { width: 81.81%; }
.col_8_of_11 { width: 72.72%; }
.col_7_of_11 { width: 63.63%; }
.col_6_of_11 { width: 54.54%; }
.col_5_of_11 { width: 45.45%; }
.col_4_of_11 { width: 36.36%; }
.col_3_of_11 { width: 27.27%; }
.col_2_of_11 { width: 18.18%; }
.col_1_of_11 { width: 9.090%; }

/*  GRID OF TWELVE  */
.col_12_of_12 { width: 100%; }
.col_11_of_12 { width: 91.66%; }
.col_10_of_12 { width: 83.33%; }
.col_9_of_12 { width: 75%; }
.col_8_of_12 { width: 66.66%; }
.col_7_of_12 { width: 58.33%; }
.col_6_of_12 { width: 50%; }
.col_5_of_12 { width: 41.66%; }
.col_4_of_12 { width: 33.33%; }
.col_3_of_12 { width: 25%; }
.col_2_of_12 { width: 16.66%; }
.col_1_of_12 { width: 8.333%; }

/* RESPONSIVE */

@media (max-width: 40rem) {
	.col_2_of_2, .col_1_of_2 { width: 100% !important; }
	.col_3_of_3, .col_2_of_3, .col_1_of_3 { width: 100% !important; }
	.col_1_of_4, .col_2_of_4, .col_3_of_4, .col_4_of_4 { width: 100% !important; }
	.col_1_of_5, .col_2_of_5, .col_3_of_5, .col_4_of_5, .col_5_of_5 { width: 100% !important; }
	.col_1_of_6, .col_2_of_6, .col_3_of_6, .col_4_of_6, .col_5_of_6, .col_6_of_6 { width: 100% !important; }
	.col_1_of_7, .col_2_of_7, .col_3_of_7, .col_4_of_7, .col_5_of_7, .col_6_of_7, .col_7_of_7 { width: 100% !important; }
	.col_1_of_8, .col_2_of_8, .col_3_of_8, .col_4_of_8, .col_5_of_8, .col_6_of_8, .col_7_of_8, .col_8_of_8 { width: 100% !important; }
	.col_1_of_9, .col_2_of_9, .col_3_of_9, .col_4_of_9, .col_5_of_9, .col_6_of_9, .col_7_of_9, .col_8_of_9, .col_9_of_9 { width: 100% !important; }
	.col_1_of_10, .col_2_of_10, .col_3_of_10, .col_4_of_10, .col_5_of_10, .col_6_of_10, .col_7_of_10, .col_8_of_10, .col_9_of_10, .col_10_of_10 { width: 100% !important; }
	.col_1_of_11, .col_2_of_11, .col_3_of_11, .col_4_of_11, .col_5_of_11, .col_6_of_11, .col_7_of_11, .col_8_of_11, .col_9_of_11, .col_10_of_11, .col_11_of_11 { width: 100% !important; }
	.col_1_of_12, .col_2_of_12, .col_3_of_12, .col_4_of_12, .col_5_of_12, .col_6_of_12, .col_7_of_12, .col_8_of_12, .col_9_of_12, .col_10_of_12, .col_11_of_12, .col_12_of_12 { width: 100% !important; }
}


/*** SVG SITES ***/
svg {
	display: inline-block;
}

.svg-container{
 display: inline-block;
 position: relative;
 width: 100%;
 /*padding-bottom: 60%;*/ /* depends on svg ratio, for my zebra height/width = 1.2 so padding-bottom = 50% * 1.2 = 60% */
 vertical-align: top; /* top | middle | bottom ... do what you want */
}

.svg { /* svg into : object, img or inline */
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  /*width: 100%;*/ /* only required for <img /> */
}

.svg-right { /* svg into : object, img or inline */
  display: block;
  position: absolute;
  top: 0;
  left: 94%;
  width: 100%; /* only required for <img /> */
}

/* FLOAT OPTIONS */
.fleft {
	float: left;
}

.fright {
	float: right;
}

/* TEXT AND ALIGNMENT */

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.center {
	text-align: center;
}

.strong {
	font-weight: 600;
}

.underline {
	text-decoration: none;
    position: relative;
    white-space: nowrap;
}

.underline:after {
	content: '';

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;

    border-width: 0 0 0.0625rem;
    border-style: solid;
}

/** COMPONENTS **/

.button, input, .input, button, textarea {
	border: 0;
	border-radius: 0.25rem;
	font-family: 'Heebo', sans-serif;
}

textarea {
	resize: none;
}

.input {
	padding: 0 0.8rem;
}

.button {
	background-color: #6359f9;
	color: #fff;
	text-align: center;
	cursor: pointer;
}

a.button:not(.outline), a.button:not(.outline):hover, a.button:not(.outline):focus, a.button:not(.outline):active {
	color: #fff;
}