/* fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i');

/*
- fonts
- html body links and kbz's generic classes
- boostrap
- container
- sections
	- banner
	- about
	- footer
*/


/* bootstrap's vars light */
[data-bs-theme="light"] {
	--bs-body-bg: #e1e1e1;
	--kbz-btn-close: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230F0'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
/* bootstrap's vars dark */
[data-bs-theme="dark"] {
	--bs-body-bg: #333;
	--kbz-btn-close: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F90'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
/* end bootstrap's vars */


/* html body links and kbz's generic classes */
a {
	color: #666;
	outline: none;
}
a:hover,
a:focus {
	text-decoration: underline;
}
html {
  scroll-behavior: smooth;
}
body {
	color: #000;
	font-family: 'Roboto', 'Hevetica', 'Arial', sans-serif;
	font-size: 15px;
	font-weight: 300;
	background-color: #fff;
}
h1 {

}
h2 {

}
.no-padding {
	padding: 0 !important;
}
i {
	font-size: 2em;
}
ul {
	display: block;
	list-style-type: none;
	margin-block-start: 0em;
	margin-block-end: 0em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 0px;
}
/* end kbz */



/* boostrap */
/* nav */
.navbar-brand {
	padding: 0;
}
.navbar-toggler {
	z-index: 2;
	border: none;
	outline: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
}
.navbar-toggler:focus,
.offcanvas-header .btn-close:focus {
	box-shadow: none;
}
/* offcanvas */
.offcanvas {
	/*
	--bs-offcanvas-width: 100%;
	max-width: 768px;
	border: 0!important;
	*/
}
.offcanvas-body {

}
.offcanvas-header .btn-close {
	border: none;
	outline: none;
	box-shadow: none;
	padding: 0;
	opacity: 1;
	--bs-btn-close-white-filter: none;
}
.btn-close {
	--bs-btn-close-bg: var(--kbz-btn-close);
}
/* end nav */
/* end boostrap */



/* animated */
.animated-delay-333 {
	-webkit-animation-delay: .333s;
	animation-delay: .333s;
}
.animated-delay-500 {
	-webkit-animation-delay: .5s;
	animation-delay: .5s;
}
.animated-delay-666 {
	-webkit-animation-delay: .666s;
	animation-delay: .666s;
}
.animated-delay-999 {
	-webkit-animation-delay: .999s;
	animation-delay: .999s;
}
.animated-delay-1000 {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.animated-delay-1332 {
	-webkit-animation-delay: 1.332s;
	animation-delay: 1.332s;
}
/* end animated */



/* container */
.bi {
	fill: orange!important;
}
.kbz-anim {
	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
/* end container */



/* intro */
.intro {
	min-height: 100%;
	min-height: 100vh;
	min-height: 100svh;
}
.intro h2 {
	font-size: 1.5rem;
	white-space: nowrap;
	text-align: center;
	font-weight: 100;
}
ul.net-socials {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 30px;
	text-align: center;
	list-style-type: none;
	padding: 30px 0;
	padding-top: 60px;
}
ul.net-socials li {
	padding: 10px;
	display: inline-block;
}
ul.net-socials li a {
	display: block;
}
ul.net-socials li.cv a img {
	margin-top: -20px;
	width: 32px;
	height: auto;
	opacity: .6;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
ul.net-socials li.cv a:hover img,
ul.net-socials li.cv a:focus img {
	opacity: 1;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
.team {
	opacity: 0;
	cursor: default;
	background-color: #fff;
	position: absolute;
	top: 0;
	border: 1px solid #666;
	z-index: 666;
	padding: 6px 12px;
	width: 140px;
	margin-left: -50px;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
.team.view {
	opacity: 1;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
ul.net-socials li a i {
	font-size: 2.4em;
	color: #666;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
@media (max-width: 767px) {
	ul.net-socials {
		padding-top: 60px;
	}
	ul.net-socials li a i {
		font-size: 1.5em;
	}
	ul.net-socials li.cv a img {
		margin-top: -10px;
		width: 20px;
	}
	.intro h2 {
		font-size: 1.3em;
		white-space: nowrap;
		text-align: center;
		font-weight: 100;
	}
}
ul.net-socials li a:hover i,
ul.net-socials li a:focus i {
	color: #000;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
.arrow-down {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 30px;
	text-align: center;
}
/* end intro */



/* svg brand */
#svgBrand g,
#svgBrand polygon,
#svgBrand path,
#svgBrand g path,
#svgBrand g polygon {
	fill: #ffffff!important;
}
#svgBrand {
	width: 100%!important;
	height: auto!important;
}
.svg-brand-wrapper {
	margin: 0 auto;
}
.svg-brand-wrapper img {
	width: 100%;
	height: auto;
}
@media (max-width: 767px) {
	.intro h2 {
		white-space: initial;
		max-width: 54%;
		margin: 0 auto;
	}
	.svg-brand-wrapper {
		width: 90%;
		height: auto;
		margin: 0 auto;
	}
}
/* end svg brand */



/* projects */
.projects-wrapper {
	padding: 0 6px;
}
@media (max-width: 767px) {
	.projects-wrapper {
		padding: 0;
	}
}
.project-wrapper {
	position: relative;
	border: 0;

	padding: 0;
	margin: 0;
	overflow: hidden;
	border:	6px black solid;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
.project-wrapper:hover,
.project-wrapper:focus {
	/*border:	6px white solid;*/

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
.project-wrapper:hover .project-img img,
.project-wrapper:focus .project-img img {
	opacity: .5;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
.project-img img {
	width: 100%;
	height: auto;
	border: 0;
	padding: 0;
	margin: 0;
	overflow: hidden;
	transform: scale(1);

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
.project-img:hover img,
.project-img:focus img {
	transform: scale(1.025);

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
.project-info {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1;
	/*border: 1px solid red;*/
}
.project-info img {
	width: 50%;
	height: auto;
	margin: 0 auto
}
.project-data {
	font-size: 16px;
	color: #fff;
	text-align: center;
	opacity: 0;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
.project-wrapper:hover .project-data,
.project-wrapper:focus .project-data {
	opacity: 1;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
.project-data address {
	margin: 0;
}
.project-highlights {
	position: absolute;
	left: 150%;
	right: 0;
	top: 15px;
	z-index: 2;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
.project-wrapper:hover .project-highlights,
.project-wrapper:focus .project-highlights {
	left: 0;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
.project-highlight div {
	display: block;
	white-space: nowrap;
	width: 35%;
	max-width: 35%;
	color: #000;
	background-color: #fff;
	text-align: center;
}
.project-highlight div:hover,
.project-highlight div:focus {
	cursor: default;
}
.project-state,
.project-booking {
	font-weight: bold;
	padding: 12px 24px;
	text-align: center;
}
.project-booking {
	background-color: #CCC!important;
}
@media (max-width: 992px) {
	.project-highlights {
		top: 5px;
	}
	.project-highlight div {
		width: 45%;
		max-width: 45%;
		font-size: 10px;
	}
	.project-state,
	.project-booking {
		padding: 6px 12px;
	}
}
.project-bots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 30px;
	z-index: 2;
	text-align: center;
}
.project-bots .project-bot {
	display: inline-block;
	opacity: 0;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
.project-bots .project-bot a {
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 24px;
	color: #000;
	background-color: #fff;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
.project-bots .project-bot a:hover,
.project-bots .project-bot a:focus {
	color: #fff;
	background-color: #000;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
.project-wrapper:hover .project-bots .project-bot,
.project-wrapper:focus .project-bots .project-bot {
	opacity: 1;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
/* end projects */



/* about */
section.about,
section.contact {
	padding-top: 90px;
	padding-bottom: 90px;
	margin-bottom: 30px;
}
section.contact {
	margin-bottom: 0;
}
@media (max-width: 767px) {
	section.about,
	section.contact {
		padding-top: 45px;
		padding-bottom: 45px;
		margin-bottom: 30px;
		margin-bottom: 0;
	}
	section.contact {
		padding-bottom: 0;
		margin-bottom: 0;
	}
}
section.about .about-wrapper {
	margin-bottom: 1em;
	/*background-color: rgba(255,255,255,.125);*/
	/*padding: 45px 30px;*/
}
section.about .about-wrapper:last-child {
	margin-bottom: 0;
}
section.about h2,
section.contact h2 {
	/*text-align: center;*/
	color: #fff;
	font-weight: normal;
	margin-bottom: 1em;
}
section.about p {
	/*text-align: center;*/
	/*text-align: justify;*/
	font-size: 20px;
	color: #fff;
	color: #ccc;
}
@media (max-width: 767px) {
	section.about p {
		font-size: 16px;
	}
}
/* end about */



/* video */
section.video {
	overflow: hidden;
	/*margin-top: -90px;*/
}
video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	/*margin-bottom: 1em;*/
	margin: 0;
	opacity: .75;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;

	margin-top: -120px;
	margin-bottom: -120px;
}
video:hover,
video:focus {
	opacity: 1;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
@media (max-width: 991px) {
	video {
		margin-top: -60px;
		margin-bottom: -60px;
	}
}
@media (max-width: 767px) {
	video {
		margin-top: -45px;
		margin-bottom: -45px;
	}
	.projects-wrapper {
		padding: 0;
	}
	video,
	video:hover,
	video:focus {
		opacity: 1;
		transition: none;
	}
}
@media (max-width: 500px) {
	video {
		margin-top: 0px;
		margin-bottom: 0px;
	}
}
/* end video */



/* contact */
section.contact {
	overflow: hidden;
	background-color: rgba(255,255,255,.1);
}
input[type="button"],
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea,
input[type="submit"] {
	-webkit-appearance: none;
	outline: none;
}
/* form */
::placeholder {
	color: #ccc;
	opacity: 1; /* Firefox */
}
::-ms-input-placeholder { /* Edge 12 -18 */
	color: #ccc;
	opacity: 1; /* Firefox */
}
.big-input,
.big-textarea,
.big-select select {
	padding: 18px 25px;
	font-size: 14px;
	border-radius: 0;
}
input, textarea, select {
	border: 1px solid #d1d1d1;
	font-size: 14px;
	padding: 8px 15px;
	width: 100%;
	margin: 0 0 20px 0;
	max-width: 100%;
	resize: none;
	color: inherit;
	background-color: transparent;
}
.btn.submit {
	text-transform: uppercase;
	color: #fff;
	background-color: #000;
	padding: 8px 15px;
}
.form-message {
	color: #fff;
	width: 100%;
	margin: 30px 0;
	padding: 8px 15px;
	background-color: transparent;
}
/* end form */
/* end contact */



/* footer */
footer {
	padding-bottom: 30px;
}
footer ul.net-socials {
	padding: 60px 0;
}
footer p {
	color: #999;
}
footer p a {
	color: #999;
	text-decoration: none!important;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
footer a:hover,
footer a:focus {
	color: #fff!important;
	text-decoration: underline!important;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
.back-to-top-wrapper {
	text-align: right;
}
@media (max-width: 767px) {
	footer ul.net-socials {
		padding: 30px 0;
	}
	footer,
	.back-to-top-wrapper {
		text-align: center;
	}
	.back-to-top-wrapper {
		padding: 30px 0;
		padding-top: 0;
	}
	footer span.guion {
		display: none;
	}
	footer span.credits {
		padding-top: 8px;
		display: block;
	}
}
/* end footer */




/* Extra 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) {

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* Extra large devices (large desktops)
No media query since the extra-large breakpoint has no upper bound on its width */