html {
	--background: #000000;
	--active: #388EB2;
	background: var(--background);
	scroll-behavior: smooth;
	/* --active: #76C3C3; */
	/* --active: red; */
	font-family: Merriweather;
}

html {
	/* width: auto !important; */
	overflow-x: hidden !important;
}

body {
	color: white;
	margin: 0;
	/* #4a4364 */
	/* #55586c */
}

.header {
	position: sticky;
	top: 0;
	z-index: 10;
	box-shadow: 0 0 2px 1px black;
	/* background: #023B34; */
}

.mobile-menu {
	display: none;
	position: sticky;
	left: 0;
	right: 0;
	top: 0;
	top: 80px;
	background: var(--background);
	z-index: 10;
	overflow: hidden;
}

.mobile-menu.active .buttons {
	opacity: 1;
	/* min-height: 240px; */
	height: 320px;
	/* max-height: 240px; */
}

.mobile-menu .buttons {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: 0px;
	opacity: 0;
	transition: all 0.3s;

}

.mobile-menu .buttons .button {
	position: relative;
	text-transform: uppercase;
	font-family: inherit;
	padding: 20px;
	cursor: pointer;
	opacity: 0.8;
	transition: all 0.15s;
	background: transparent;
	border: none;
	color: inherit;
	font-size: 16px;
	height: 80px;
}

.footer {
	min-height: 100px;
	background: var(--background);
	box-shadow: 0 0 2px 1px black;
}

.footer .section .info {
	display: flex;
	justify-content: space-between;
	flex: 1;
	max-width: 800px;
	font-size: 14px;
}

.footer .section .info .email,
.footer .section .info .copyright {
	display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 10px;
}

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

.header .section {
	height: 80px;
	/* background: #023B34; */
	/* background: #273140; */
	/* background: #4A4364; */
	background: var(--background);
}

.header .section .container {
	display: flex;
	flex: 1;
	justify-content: space-between;
}

.header .section .logo {
	background-image: url(/static/header_logo.svg);
	width: 235px;
	background-repeat: no-repeat;
	background-size: 300px;
	background-position: -3px -112px;
	height: 80px;
}

.header .section .menu-button {
	display: none;
	justify-items: center;
	align-items: center;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	font-size: 25pt;
	padding: 25px;
	background: transparent;
	border: none;
	cursor: pointer;
}

.header .section .buttons {
	display: flex;
}

.header .section .buttons .button {
	position: relative;
	text-transform: uppercase;
	font-family: inherit;
	padding: 20px;
	cursor: pointer;
	opacity: 0.8;
	transition: all 0.15s;
	background: transparent;
	border: none;
	color: inherit;
	font-size: 16px;
	height: 101%;
}

.header .section .buttons .button .line,
.mobile-menu .buttons .button .line {
	position: absolute;
	background: var(--active);
	transition: all 0.5s;
	/* height: 0%;
	width: 0%; */
	z-index: -1;
}

.header .section .buttons .button .line.underline,
.mobile-menu .buttons .button .line.underline {
	bottom: 0;
	left: 0;
	right: 0;
	height: 0%;
}

.header .section .buttons .button .line.overline,
.mobile-menu .buttons .button .line.overline {
	top: 0;
	left: 0;
	right: 0;
	height: 0%;
}

.header .section .buttons .button .line.leftline,
.mobile-menu .buttons .button .line.leftline {
	left: 0;
	top: 0;
	bottom: 0;
	width: 0%;
}

.header .section .buttons .button .line.rightline,
.mobile-menu .buttons .button .line.rightline {
	right: 0;
	top: 0;
	bottom: 0;
	width: 0%;
}

.header .section .buttons .button:not(.active):hover,
.header .section .buttons .button:not(.active):focus,
.mobile-menu .buttons .button:not(.active):hover,
.mobile-menu .buttons .button:not(.active):focus {
	/* opacity: 1; */
	outline: none;
}

.header .section .buttons .button.active .underline,
.header .section .buttons .button.active .overline,
.mobile-menu .buttons .button.active .underline,
.mobile-menu .buttons .button.active .overline {
    height: 51%;
}

.header .section .buttons .button.active .leftline,
.header .section .buttons .button.active .rightline,
.mobile-menu .buttons .button.active .leftline,
.mobile-menu .buttons .button.active .rightline  {
    width: 51%;
}

.header .section .buttons .button:not(.active):hover .underline,
.header .section .buttons .button:not(.active):hover .overline,
.mobile-menu .buttons .button:not(.active):hover .underline,
.mobile-menu .buttons .button:not(.active):hover .overline {
    height: 51%;
}

.header .section .buttons .button:not(.active):hover .leftline,
.header .section .buttons .button:not(.active):hover .rightline,
.mobile-menu .buttons .button:not(.active):hover .leftline,
.mobile-menu .buttons .button:not(.active):hover .rightline {
    width: 51%;
}

.content .section {
	display: flex;
	flex-direction: column;
	gap: 20px;
	/* max-width: 1256px; */
	background-color: white;
	/* padding: 20px; */
	padding: 40px 20px 70px 20px;
	color: #666666;
	text-align: center;
}

.content .section:nth-child(odd) {
	background-color: #F8F8F8;
}

.content .section .title-text {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 0px;
	font-size: 38px;
}

.content .section .content-text {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 0px;
	font-size: 16px;
	line-height: 30px;
}

.content .section[data-location="title"] {
	display: flex;
	flex-direction: column;
	padding: 50px;
	gap: 50px;
	height: 300px;
	/* background: #023B34; */
	/* background: #63898D; */
	/* background: #7D8E9B; */
	/* background: #6DA9B0; */
	/* background: #69639D; */
	/* background: url(https://www.tpl.org/wp-content/uploads/2021/05/1_2021_Washington-DC_header.jpg) no-repeat center center; */
	/* background-position: 0px -200px; */
	/* background-size: cover; */
	/* background-image: url(https://www.tpl.org/wp-content/uploads/2021/05/1_2021_Washington-DC_header.jpg);
    background-position: 0px -456px;
    background-repeat: no-repeat;
    /* background-size: cover; */
}

.content .section[data-location="title"] .title-text {
	color: white;
}

.content .section[data-location="title"] .contact-us {
	display: flex;
	align-items: center;
	justify-content: center;
	justify-self: center;
	align-self: center;
	width: 100px;
}

.content .section[data-location="about"] {
	background: url(/static/tech_background.jpg);
	background-size: cover;
	color: white;
	padding-bottom: 90px;
	padding-top: 90px;
}

.content .section[data-location="about"] .content-text {
	max-width: 870px;
}

.content .section[data-location="services"] .services {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 50px;
	grid-row-gap: 50px;
}

.content .section[data-location="services"] .services .service {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	max-width: 400px;
	gap: 10px;
}

.content .section[data-location="services"] .services .service i {
	font-size: 24pt;
	color: var(--active);
}

.content .section[data-location="projects"] .carousel-container {
	display: flex;
	gap: 50px;
	justify-content: center;
	align-items: center;
}

.content .section[data-location="projects"] .carousel-container .tiny-carousel .item .project {
	font-size: 20pt;
}

.content .section[data-location="projects"] .carousel-container .tiny-carousel .item .client {
	padding: 20px 0px;
	font-size: 11pt;
	font-weight: bold;
}

.content .section[data-location="projects"] .carousel-container .carousel-previous button,
.content .section[data-location="projects"] .carousel-container .carousel-next button {
	border: none;
	background: transparent;
	font-size: 50pt;
	color: inherit;
	transition: all 0.3s;
	cursor: pointer;
}

.content .section[data-location="projects"] .carousel-container .tns-outer {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 1000px;
	line-height: 30px;
}

.content .section[data-location="projects"] .carousel-navigation {
	display: flex;
	gap: 20px;
	color: inherit;
}

.content .section[data-location="projects"] .carousel-navigation button {
	border: none;
	background: transparent;
	font-size: 36pt;
	color: inherit;
	transition: all 0.3s;
	cursor: pointer;
}

.content .section[data-location="projects"] .carousel-navigation button:hover,
.content .section[data-location="projects"] .carousel-container .carousel-previous button:hover,
.content .section[data-location="projects"] .carousel-container .carousel-next button:hover {
	color: var(--active);
}

.content .section[data-location="projects"] .carousel-navigation button.tns-nav-active i {
	/* color: var(--active); */
}

.content .section[data-location="projects"] .carousel-navigation button:not(.tns-nav-active) i.fa-solid,
.content .section[data-location="projects"] .carousel-navigation button.tns-nav-active i.fa-regular {
	display: none;
}

.content .section[data-location="projects"] .carousel-navigation button.tns-nav-active i.fa-solid,
.content .section[data-location="projects"] .carousel-navigation button:not(.tns-nav-active) i.fa-regular {
	display: inline-block;
}

.content .section[data-location="contacts"] .title-text {
	padding-bottom: 0px;
}

.content .section[data-location="contacts"] .content-text {
	padding-top: 0px;
}

.content .section[data-location="contacts"] .form {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.content .section[data-location="contacts"] .form .item {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.content .section[data-location="contacts"] .form .item .label {
	text-align: left;
}

.content .section[data-location="contacts"] .form .item .input-element {
	padding: 10px;
    border: 2px solid var(--active);
    border-radius: 4px;
	min-width: 500px;
    color: inherit;
    font-family: inherit;
	transition: all 0.3s;
}

.content .section[data-location="contacts"] .form .item .input-element:focus {
	border-color: #666666;
	background: #F8F8F8;
	outline: none;
}

.content .section[data-location="contacts"] .form .item textarea.input-element {
	resize: none;
	height: 100px;
}

.content .section[data-location="contacts"] .form .item.submit-container {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
	gap: 20px;
}

.content .section[data-location="contacts"] .form .item.submit-container button.submit {
	background: var(--active);
	color: white;
	/* color: #2B2A2E; */
    padding: 15px;
    border: none;
    border-radius: 4px;
    font-size: 14pt;
    cursor: pointer;
    width: 200px;
    display: flex;
    align-self: flex-end;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
	overflow: hidden;
	position: relative;
	user-select: none;
}

.content .section[data-location="contacts"] .form .item.submit-container button.submit[disabled] {
	background: #F8F8F8;
	cursor: not-allowed;
	border: 2px solid #2B2A2E;
	color: #2B2A2E;
	opacity: 0.35;
}

.content .section[data-location="contacts"] .form .item.submit-container[data-status] button.submit {
	outline: none;
}

.content .section[data-location="contacts"] .form .item.submit-container .message-status {
	display: flex;
    flex: 1;
    align-self: stretch;
	position: relative
}

.content .section[data-location="contacts"] .form .item.submit-container:not([data-status]) button.submit:not([disabled]):hover {
	outline: none;
	color: white;
	background: var(--active);
    border-color: #2b2a2e;
}

.content .section[data-location="contacts"] .form .item.submit-container:not([data-status]) button.submit:not([disabled]):focus {
	outline: none;
	color: white;
	background: var(--active);
	border-color: #2b2a2e;
}

.content .section[data-location="contacts"] .form .item.submit-container:not([data-status]) button.submit:not([disabled]):active {
	/* transform: scale(0.985); */
	/* background: #2b2a2e; */
}

.content .section[data-location="contacts"] .form .item.submit-container[data-status] button.submit {
	cursor: not-allowed;
	color: white;
	background: #2B2A2E;
}

.content .section[data-location="contacts"] .form .item.submit-container button.submit span,
.content .section[data-location="contacts"] .form .item.submit-container button.submit div,
.content .section[data-location="contacts"] .form .item.submit-container button.submit .spinner,
.content .section[data-location="contacts"] .form .item.submit-container button.submit .success,
.content .section[data-location="contacts"] .form .item.submit-container button.submit .error,
.content .section[data-location="contacts"] .form .item.submit-container .message-status .success,
.content .section[data-location="contacts"] .form .item.submit-container .message-status .error {
	opacity: 0;
	-webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    -o-transition: all 0.15s;
    transition: all 0.15s;
}

.content .section[data-location="contacts"] .form .item.submit-container:not([data-status]) button.submit span {
	opacity: 1;
}

.content .section[data-location="contacts"] .form .item.submit-container[data-status="loading"] button.submit {
	background-color: #898989;
	border-color: transparent;
}

.content .section[data-location="contacts"] .form .item.submit-container[data-status="loading"] button.submit .spinner {
	opacity: 1;
}

.content .section[data-location="contacts"] .form .item.submit-container[data-status="success"] button.submit .success,
.content .section[data-location="contacts"] .form .item.submit-container[data-status="success"] .message-status .success {
	opacity: 1;
}

.content .section[data-location="contacts"] .form .item.submit-container[data-status="error"] button.submit .error,
.content .section[data-location="contacts"] .form .item.submit-container[data-status="error"] .message-status .error {
	opacity: 1;
}

.content .section[data-location="contacts"] .form .item.submit-container button.submit div,
.content .section[data-location="contacts"] .form .item.submit-container button.submit .spinner,
.content .section[data-location="contacts"] .form .item.submit-container button.submit .success,
.content .section[data-location="contacts"] .form .item.submit-container button.submit .error,
.content .section[data-location="contacts"] .form .item.submit-container .message-status .success,
.content .section[data-location="contacts"] .form .item.submit-container .message-status .error {
	position: absolute;
	  top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content .section[data-location="contacts"] .form .item.submit-container .message-status .success,
.content .section[data-location="contacts"] .form .item.submit-container .message-status .error {
	justify-content: flex-end;
}

.content .section[data-location="contacts"] .form .item.submit-container[data-status="loading"] button.submit .spinner {
	-webkit-animation: spin 1.5s 0.15s infinite;
    -moz-animation: spin 1.5s 0.15s infinite;
    -o-animation: spin 1.5s 0.15s infinite;
	animation: spin 1.5s 0.15s infinite;
}

.content .section[data-location="contacts"] .form .item.submit-container[data-status="loading"] button.submit div {
	opacity: 1;
}

    /* opacity: 0.75;
}

/* @media (max-width: 940px) {
	.header .section .buttons {
		display: none;
	}
	.header .section .logo {
		position: absolute;
		right: 5px;
	}
	.header .section .menu-button {
		display: flex;
	}
} */

@keyframes spin {
	0% {
		-webkit-transform: rotate3d(0, 0, 1, 0deg);
		-moz-transform: rotate3d(0, 0, 1, 0deg);
		-o-transform: rotate3d(0, 0, 1, 0deg);
		transform: rotate3d(0, 0, 1, 0deg);
	}
	50% {
		-webkit-transform: rotate3d(0, 0, 1, 180deg);
		-moz-transform: rotate3d(0, 0, 1, 180deg);
		-o-transform: rotate3d(0, 0, 1, 180deg);
		transform: rotate3d(0, 0, 1, 180deg);
	}
	100% {
		-webkit-transform: rotate3d(0, 0, 1, 360deg);
		-moz-transform: rotate3d(0, 0, 1, 360deg);
		-o-transform: rotate3d(0, 0, 1, 360deg);
		transform: rotate3d(0, 0, 1, 360deg);
	}
}

@media (max-width: 1425px) {
	.content .section[data-location="title"] {
		background-size: auto;
		background-position: 0px -90px;
	}
}

@media (max-width: 1160px) {
	.header .section .buttons {
		display: none;
	}
	/* .header .section .logo {
		position: absolute;
		top: 0;
		left: 0;
	} */
	.header .section .menu-button,
	.mobile-menu {
		display: flex;
	}
	.content .section[data-location="services"] .services {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media (max-width: 850px) {
	.content .section[data-location="projects"] .carousel-container .carousel-previous,
	.content .section[data-location="projects"] .carousel-container .carousel-next {
		display: none;
	}
	.content .section[data-location="contacts"] .form {
		align-items: stretch;
		align-self: stretch;
	}

	.content .section[data-location="contacts"] .form .item .input-element {
		min-width: initial;
	}
}

@media (max-width: 600px) {
	.content .section[data-location="projects"] .carousel-container .tns-ovh {
		max-width: 300px;
	}
	.content .section[data-location="projects"] .carousel-navigation {
		gap: 20px;
	}
	.content .section[data-location="projects"] .carousel-navigation button {
		font-size: 25pt;
	}
	.content .section[data-location="contacts"] .form .item.submit-container {
		flex-direction: column;
	}
	.content .section[data-location="contacts"] .form .item.submit-container .message-status .success,
	.content .section[data-location="contacts"] .form .item.submit-container .message-status .error {
		justify-content: center;
	}
	.content .section[data-location="contacts"] .form .item.submit-container button.submit span,
	.content .section[data-location="contacts"] .form .item.submit-container button.submit .spinner,
	.content .section[data-location="contacts"] .form .item.submit-container button.submit .success,
	.content .section[data-location="contacts"] .form .item.submit-container button.submit .error,
	.content .section[data-location="contacts"] .form .item.submit-container .message-status .success,
	.content .section[data-location="contacts"] .form .item.submit-container .message-status .error {
		transition: none;
	}
	
	.content .section[data-location="contacts"] .form .item.submit-container[data-status="loading"] button.submit .spinner {
		animation: none;
		opacity: 0;
	}

	.content .section[data-location="contacts"] .form .item.submit-container button.submit {
		width: 100%;
		margin: 20px 0px;
	}
	.footer .section .info {
		flex-direction: column;
	}
}


@media (max-width: 300px) {
	.header .section .logo {
		display: none;
	}
}