:root {
	--blue: #3fafe4;
	--dark-blue: #095c84;
	--border-radius: 50px;
}

html , body {
	font-family: Barlow, sans-serif !important;
	font-size: 16px;
	background: #fff;
}
main {
	position: relative;
	height: 100vh;
}
header *, article *, footer * { z-index: 999; }
.box {
	background-color: var(--blue);
	border-radius: var(--border-radius);
	/*z-index: 999;*/
}
.clouds-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 60vh;
	background: #999;
	background: linear-gradient(0deg,rgba(153, 153, 153, 1) 0%, rgba(239, 239, 239, 1) 30%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
	z-index: 0;
}
.clouds {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 60vh;
	background-position: top center;
	background-image: url('../images/bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 1;
	opacity: .75;
}
.box, .box a { color: white }
.box h5.h6 {
	font-family: lemonmilkregular, sans-serif;
	color: white;
}
.box h5 {
	font-family: "Shadows Into Light Two", cursive;
	font-weight: 500;
	font-style: normal;
	color: var(--dark-blue);
}
.input {
	border-radius: var(--border-radius);
	border: none;
}
.input, .input::placeholder {
	color: var(--dark-blue);
	text-align: center;
	font-size: 1.15rem;
	padding: 2px 5px;
}
.btn {
	border-radius: var(--border-radius);
}
.btn svg img {
	color: white;
	height: 15px;
}
hr { opacity: 1; }

.text-blue { color: var(--blue); }
.avatar { display: none; }
video { z-index: 999; }

.h-90-vh { height: 90vh; }



/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.avatar {
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.signature-wrapper { padding-right: 0; }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}