@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

.spacer {
	min-height: 60px;
}

.is-spaced {
	margin: 10vh 0;
}

.emphasize {
	font-size: 2rem;
}

.impact {
	font-size: 3rem;
	font-family: 'Dela Gothic One', cursive;
}

.is-bolder {
	font-weight: 600;
}

.is-boldest {
	font-weight: 800;
}

.is-xlarge {
	font-size: xxx-large;
}

.special {
	font-family: 'Dela Gothic One', cursive;
}

.dyna-hr,
.has-hr {
	padding: 0.1em;
	border-bottom: thick solid cadetblue;
}

.has-hr-black {
	padding: 0.1em;
	border-bottom: thick solid #000;
}

.has-hr-blue {
	padding: 0.2em;
	border-bottom: thick solid blue;
}

.hr-bottom {
	border-bottom-width: 0px;
	transition: all 400ms ease-out;
}

.title.has-hr {
	margin-bottom: 32px;
}

.dyna-vr,
.has-vr {
	padding-left: 0.4em;
	border-left: 0.2em solid cadetblue;
	margin: 0.2em;
}

.dyna-hr,
.dyna-vr {
	transition: all 500ms ease;
	border-bottom-color: transparent;
	border-left-color: transparent;
}

.darken {
	filter: brightness(50%);
}

.no-padding {
	padding: 0 !important;
}

.navbar-logo {
	max-height: unset;
	height: 64px;
	width: auto;
}

.hero.has-background {
	position: relative;
	overflow: hidden;
}

.hero-background {
	position: absolute;
	object-fit: cover;
	object-position: center center;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}

.hero.has-background .is-translucid {
	background-color: #ffffff99 !important;
}

.swiper-container {
	width: 100%;
	height: 100vh;
}

.swiper-button-next,
.swiper-button-prev,
.swiper-pagination {
	z-index: 1000 !important;
}

.tabs a {
	color: #fff !important;
	padding: 0px 8px;
	margin: 0px 4px;
	transition: all ease 1s;
}

.tabs.is-boxed a {
	border: 0;
}

.tabs.is-boxed a:hover {
	border: 1px solid #fff !important;
	border-bottom: 0;
	background-color: #00000050;
}

.tabs.is-boxed .is-active a {
	border: 1px solid #fff !important;
	border-bottom: 0;
	background-color: #00000050 !important;
}

.services {
	display: flex;
	min-height: 50vh;
	flex-direction: column;
	background-position: center;
	padding: 32px 8px;
	background-size: cover;
	border-radius: 4px;
	z-index: 0;
	transition: transform 1s;
	transition: z-index 0;
}

.services:hover {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
	transform: scale(1.03);
	cursor: pointer;
	z-index: 10;
}

.services div,
.services h3,
.services h4,
.services h5,
.services p,
.services span {
	padding: 0px 8px;
	line-height: normal;
}

.has-background-red {
	background-color: #ff000080;
}


.montserrat-regular {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}

.montserrat-bold {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}


.comfortaa-regular {
	font-family: "Comfortaa", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

html,
body {
	font-family: "Comfortaa", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	background-color: #fff;
}

.comfortaa-bold {
	font-family: "Comfortaa", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}

.border-white {
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

.border-black {
	text-shadow: -1px 0 #030000, 0 1px #030000, 1px 0 #030000, 0 -1px #030000;
}

.title-shadow {
	text-shadow: 3px 3px 9px #000;
}

.title.big-title {
	font-size: 5vw;
}

.title.big-caption {
	font-size: 3vw;
}

.top-layer {
	z-index: 1000;
}

.mid-layer {
	z-index: 500;
}

.topic-list {
	line-height: 2em;
	transition: all 1s ease-out;
}

.topic-list li {
	transition: all 300ms ease-in-out;
}

#main-text {
	height: 62vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dynatheme {
	transition: all 2s ease;
}

.back_photo {
	transition: all 500ms ease-out;
	position: absolute;
	max-height: 61.8vh;
	height: auto;
	width: auto;
	max-width: 50vw;
	opacity: 0;
	filter: grayscale(1);
}

.back_photo.shadow {
	filter: grayscale(1) drop-shadow(6px 6px 4px #00000020);
}

.back_photo.mobile {
	max-height: 61.8vh;
	height: auto;
	width: auto;
	max-width: 80vw;
	min-height: 300px;
}

.back_ellipse_svg {
	opacity: 0;
	transform: scale(0.25);
	transition: all 500ms ease-out;
	position: absolute;
	width:80vw;
	height:50vh;
	min-height: 300px;
}

.logo-normal {
	width: 10vw;
	height: auto;
	transition: all 2s ease-out;
}

.about-logo {
	top: 1em;
	padding: 0 1em;
	position: relative;
	filter: drop-shadow(0px 0px 2px #fff);
	z-index: 500;
}

.client-logo {
	-webkit-filter: brightness(0) invert(1) drop-shadow(0 0 4px #00000080);
	filter: brightness(0) invert(1) drop-shadow(0 0 4px #00000080);
	height: 38%;
	width: auto;
	opacity: 0.25;
	transition: all 700ms ease-out;
}

@media screen and (max-width: 768px) {
	.client-logo {
		height: 20vh;
	}
}

@media screen and (min-width: 768px){
	.is-spaced {
		margin: 10vh 0;
	}
}
@media screen and (max-width: 768px){
	.is-spaced {
		margin: 0;
	}
}

.client-name {
	-webkit-filter: brightness(0) invert(1) drop-shadow(0 0 2px #00000080);
	filter: brightness(0) invert(1) drop-shadow(0 0 2px #00000080);
	font-weight: bold;
}

.transparent-fx {
	transition: all 1s ease-out;
	opacity: 0;
}

.drawbar {
	transition: all 1.5s ease-out;
}

.svg_anim_container .description {
	position: absolute;
}

.step-container {
	display: flex;
	width: 62vw;
	position: relative;
	transition: all 1.5s ease;
}

.step-number {
	color: #fff;
	border-radius: 50%;
	width: 1.5em;
	height: 1.5em;
	text-shadow: #00000080 0px 0px 4px;
	text-align: center;
}

.step-number-container {
	flex: 1;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 0 0.25em;
}

.step-text {
	flex: 4;
	display: inline-block;
	padding: 0.3em 1em;
	border-left-style: solid;
	border-left-width: thick;
}

.team-photo {
	width: 10vw;
	height: auto;
	margin: auto;
	border-radius: 50%;
	box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .25), 0 0 0 1px rgba(10, 10, 10, .02);
	transition: all 0.5s ease;
	position: relative;
	z-index: 0;
}

.team-photo.margin-top {
	margin-top: 10vw;
}

.team-photo:hover {
	box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .3), 0 0 0 1px rgba(10, 10, 10, .3);
}

.team-card {
	width: 10vw;
	height: auto;
	box-shadow: 0 .5em 1em -.125em rgba(10, 10, 10, .25), 0 0 0 1px rgba(10, 10, 10, .02);
	background-color: #fff;
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	font-size: small;
	text-align: center;
	padding: 0.5em 0;
	position: relative;
	z-index: 1000;
}

.team-card .name {
	font-weight: bold;
}

.team-mobile {
	background-color: #FFFFFF;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 100 100" style="position:relative; height:100vh; width:100%"><g transform="scale(0.5,1) rotate(15 50 50) translate(50,0)"><rect x="0" y="35" width="20" height="60" fill="%23f6b36b"></rect><rect x="25" y="15" width="20" height="60" fill="%2393c47d"></rect><rect x="50" y="35" width="20" height="60" fill="%23ff8888"></rect><rect x="75" y="15" width="20" height="60" fill="%238888cc"></rect></g></svg>');
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	min-height: 100vh;

}

.team-mobile .team-photo {
	width: 50%;
	max-width: 400px;
}

.team-mobile .team-card {
	width: 50%;
	max-width: 400px;
	height: auto;
	margin:auto;
	font-size: large;
}

.parallax {
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

section,.section{
	overflow:hidden !important;
}