@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,900;1,400&display=swap');

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/
.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}


/*****************************************/
/* Start your style declarations here    */
/*****************************************/

:root {
	--col-dark-fg: var(--col-dove);
	--col-dark-bg: var(--col-rhino);
	--col-light-fg: var(--col-rhino);
	--col-light-bg: var(--col-dove);
	
  --col-peacock: #1374CF;
  --col-gecko: #00B7BF;
  --col-fox: #FE5E00;
  --col-dove: #FFFFFF;
  --col-seal: #F5F6F6;
  --col-mouse: #ECEDEE;
  --col-elephant: #A1A4AA;
  --col-rhino: #434A56;
  --col-ox: #21252B;

  --unit-100vh: 100vh;
}

@supports (height: 100dvh) {
    :root {
        --unit-100vh: 100dvh;
    }
}

* {
  box-sizing: border-box;
}

body {
	font-family: "Lato";
  font-weight: 400;
  font-style: normal;
	font-size: 16px;
	background-color: var(--col-gecko);
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
}

a, form a {
	color: var(--col-gecko);
}

.con25_item_container {
	width: calc(100% - 4rem);
	height: 100%;
	min-height: calc(var(--unit-100vh) - 4rem);
	margin: 2rem;
	border-radius: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.con25_item_container_compact {
	width: calc(100% - 4rem);
	margin: 2rem;
	border-radius: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}


.widget-type-cell {
  height: 100%;
	max-height: var(--unit-100vh);
	overflow-y: auto;
	scroll-snap-type: y proximity;
	scroll-behavior: smooth;
}

/* excluding Safari from scroll snap because it doesn't play nice */
@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
	.widget-type-cell {
		height: auto;
		max-height: none;
		overflow-y: auto;
		scroll-snap-type: none;
	}
}

/* excluding the hubspot page builder as well */
.hubspot-disable-focus-styles .widget-type-cell {
		height: auto;
		max-height: none;
		overflow-y: auto;
		scroll-snap-type: none;
	}


.row-fluid-wrapper.row-depth-1 .widget-type-cell{
	height: 100%;
	max-height: none;
	scroll-snap-type: none;
}

.row-depth-1 {
	scroll-snap-align: start;
}

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

p {
	font-size: 1rem;
	line-height: 1.4rem;
}

form label {
	font-size: 0.8rem;
	line-height: 1.4rem;
  margin-top: 0.5rem;
  display: block;
}

form {
  margin-bottom: 0.5rem;
}

form li {
	list-style: none;
}

.con25_item_container form fieldset.form-columns-1 input.hs-input {
	calc(100% - 1rem)
}

form .form-columns-2 input {
	width: calc(96% - 1rem);
}


ul.inputs-list {
	padding-left: 1rem;
}

.button, button, form input[type=submit] {
	font-size: 1.25rem;
	padding: 0.75rem 1.25rem;
	background-color: var(--col-light-bg);
	color: var(--col-light-fg);
  font-weight: 900;
	box-shadow: 6px 7px 14px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.20);
	text-decoration: none;
	border-radius: 1rem;
	border: 4px solid var(--col-gecko);
	cursor: pointer;
	animation: button_glow 4s infinite;
}

@keyframes button_glow {
	0% {box-shadow: 0px 0px 0.5rem 0px var(--col-gecko);}
	50% {box-shadow: 0px 0px 1.5rem 0px var(--col-gecko);}
	100% {box-shadow: 0px 0px 0.5rem 0px var(--col-gecko);}
}

.button.button_small {
	font-size: 1rem;
	padding: 0.5rem 1rem;
	background-color: var(--col-light-bg);
	color: var(--col-light-fg);
  font-weight: 600;
	text-decoration: none;
	border: none;
	border-radius: 1rem;
	cursor: pointer;
	animation: button_small_glow 4s infinite;
}

.button.button_small a {
	text-decoration: none;
}

@keyframes button_small_glow {
	0% {box-shadow: 0px 0px 0.25rem 0px var(--col-gecko);}
	50% {box-shadow: 0px 0px .5rem 0px var(--col-gecko);}
	100% {box-shadow: 0px 0px 0.25rem 0px var(--col-gecko);}
}

@media (max-width: 590px) {
	.con25_item_container {
		width: 100%;
		margin: 2rem 0;
	}

	.con25_item_container_compact {
		width: 100%;
		margin: 2rem 0;
	}
}