/* MAIN STYLES */
body,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 1em;
	font-family: "Roboto", sans-serif !important;
	line-height: 1.4 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
ul,
ol,
small {
	margin-bottom: 20px !important;
}

p {
	font-weight: 400;
	color: var(--color1);
}

h1,
h2,
h3,
h4,
h5 {
	font-weight: 900 !important;
}
figcaption {
	font-size: 0.81rem;
	margin-top: 2vh;
	font-style: italic;
	color: darkgray;
}

.top_bar {
	background: var(--color7);
}
.bg01 {
	background: var(--primary);
}
.bg02 {
	background: var(--secondary);
}

.color1 {
	color: var(--color1);
}

.color2 {
	color: var(--color2);
}

.color3 {
	color: var(--color3);
}

.color4 {
	color: var(--color4);
}

.color5 {
	color: var(--color5);
}
.color6 {
	color: var(--color6);
}
.color7 {
	color: var(--color7);
}
.color8 {
	color: var(--color8);
}
.color9 {
	color: var(--color9);
}

.color10 {
	color: var(--color10);
}

.radius {
	border-radius: 10px !important;
}

/* HeyFlow wrapper styling */
.heyflow-container {
	border-radius: 10px;
	overflow: hidden;
	background-color: var(color6);
}

heyflow-wrapper,
heyflow-wrapper::part(container),
heyflow-wrapper::shadow-dom {
	border-radius: 10px !important;
	overflow: hidden !important;
	background-color: var(color6);
}

.container {
	max-width: 800px;
}

.logo {
	max-width: 140px;
}

.ctn {
	color: var(--color4);
	font-weight: 600;
}

.checks {
	background-color: var(--color4);
}
.age {
	background-color: var(--color5);
	color: var(--color4);
	font-weight: 700;
}

.icon {
	display: flex;
	align-items: center;
	justify-content: left;
}

.icon img {
	max-width: 70px;
}

/*Castom margin*/

.mb-1 {
	margin-bottom: 1rem;
}
.mt-1 {
	margin-top: 1rem;
}
.mb-2 {
	margin-bottom: 2rem;
}
.mt-2 {
	margin-top: 2rem;
}
.mb-3 {
	margin-bottom: 3rem;
}
.mt-3 {
	margin-top: 3rem;
}

/* Small only */

@media screen and (max-width: 38em) {
	.top_bar img {
		padding-left: 0.5rem;
	}
	.msb-0 {
		margin-bottom: 0rem;
	}
	.mst-0 {
		margin-top: 0rem;
	}
	.msb-1 {
		margin-bottom: 1rem;
	}
	.mst-1 {
		margin-top: 1rem;
	}
	.msb-2 {
		margin-bottom: 2rem;
	}
	.mst-2 {
		margin-top: 2rem;
	}
	.msb-3 {
		margin-bottom: 3rem;
	}
	.mst-3 {
		margin-top: 3rem;
	}
}

/* CUSTOM FORMS */

.fade-out {
	opacity: 0;
	transition: opacity 0.1s ease-out;
}

.fade-in {
	opacity: 1;
	transition: opacity 0.05s ease-in;
}

/* AGE STYLES */

.banners a,
.flags a {
	text-decoration: none;
}

.banner,
.flag {
	background-color: white;
	cursor: pointer;
	color: var(--primary);
	border: 2px solid var(--color9);
	font-weight: 700;
	overflow: hidden;
	transition: 0.15s ease-in-out;
}

.banner:hover {
	-webkit-animation: shadow-drop-2-center 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
	animation: shadow-drop-2-center 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.banner img,
.flag img {
	max-width: 130px;
}

.centered:hover {
	-webkit-animation: scale-up-center 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
	animation: scale-up-center 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

/* FLAG STYLES */

.flags {
	padding: 1em;
}

.flags img {
	max-width: 40px;
}

#ctn {
	display: none;
	opacity: 0;
}

/**
 * ----------------------------------------
 * animation shadow-drop-2-center
 * ----------------------------------------
 */
@-webkit-keyframes shadow-drop-2-center {
	0% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}

	100% {
		-webkit-transform: translateZ(50px);
		transform: translateZ(50px);
		-webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
		box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
	}
}

@keyframes shadow-drop-2-center {
	0% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}

	100% {
		-webkit-transform: translateZ(50px);
		transform: translateZ(50px);
		-webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
		box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
	}
}

/* FOOTER */
/* Modal styles */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 9000; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100vh; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: 0 auto;
	padding: 20px;
	border: 1px solid var(--primary);
	height: calc(100% - 55px); /* Adjust for full height minus margins */
	overflow-y: auto; /* Enable vertical scroll */
}

.close {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: var(--secondary);
	color: white;
	text-align: center;
	padding: 15px;
	font-size: 18px;
	cursor: pointer;
	transition: 0.5s;
}

.close:hover,
.close:focus {
	background-color: var(--secondary-8);
}
.dnmFooter {
	margin: auto 0;
	text-align: center;
	font-size: 0.8rem;
	color: var(--color2);
}

.dnmFooter a {
	color: var(--secondary-6);
	text-decoration: none;
	transition: 0.5s;
	cursor: pointer;
}
.dnmFooter a:hover {
	color: var(--secondary);
}

.modal-content iframe {
	width: 100%;
	height: 100vh;
}

.footer-container {
	container-type: inherit;
}

@font-face {
	font-family: "Roboto";
	src: local("Roboto Bold Italic"), local("Roboto-BoldItalic"), url("roboto/Roboto-BoldItalic.woff2") format("woff2"), url("roboto/Roboto-BoldItalic.woff") format("woff");
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: local("Roboto Bold"), local("Roboto-Bold"), url("roboto/Roboto-Bold.woff2") format("woff2"), url("roboto/Roboto-Bold.woff") format("woff");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"), url("roboto/Roboto-ThinItalic.woff2") format("woff2"), url("roboto/Roboto-ThinItalic.woff") format("woff");
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: local("Roboto"), local("Roboto-Regular"), url("roboto/Roboto-Regular.woff2") format("woff2"), url("roboto/Roboto-Regular.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"), url("roboto/Roboto-MediumItalic.woff2") format("woff2"), url("roboto/Roboto-MediumItalic.woff") format("woff");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: local("Roboto Medium"), local("Roboto-Medium"), url("roboto/Roboto-Medium.woff2") format("woff2"), url("roboto/Roboto-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: local("Roboto Italic"), local("Roboto-Italic"), url("roboto/Roboto-Italic.woff2") format("woff2"), url("roboto/Roboto-Italic.woff") format("woff");
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: local("Roboto Black"), local("Roboto-Black"), url("roboto/Roboto-Black.woff2") format("woff2"), url("roboto/Roboto-Black.woff") format("woff");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: local("Roboto Thin"), local("Roboto-Thin"), url("roboto/Roboto-Thin.woff2") format("woff2"), url("roboto/Roboto-Thin.woff") format("woff");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: local("Roboto Black Italic"), local("Roboto-BlackItalic"), url("roboto/Roboto-BlackItalic.woff2") format("woff2"), url("roboto/Roboto-BlackItalic.woff") format("woff");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: local("Roboto Light Italic"), local("Roboto-LightItalic"), url("roboto/Roboto-LightItalic.woff2") format("woff2"), url("roboto/Roboto-LightItalic.woff") format("woff");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Roboto";
	src: local("Roboto Light"), local("Roboto-Light"), url("roboto/Roboto-Light.woff2") format("woff2"), url("roboto/Roboto-Light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}