:root{
	--color-dark: 37, 35, 35;
	--color-light: 244, 242, 243;
	--color-orange: 255, 165, 0;
}
html{
	scroll-behavior: smooth;
}
.navbar-brand img{
	transition: height .3s;
}
.navbar-brand img{
	content: url(../img/bahau_color_invert_logo.svg);
	height: 60px;
}
#navbar-main{
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}
.navbar-floating .navbar-brand img{
	content: url(../img/bahau_color_logo.svg);
	height: 40px;
}
.navbar-collapse {
	
	
}
#navbar-main .navbar-collapse .nav-item{
	margin-left: 1rem;
}

#navbar-main .navbar-collapse  .nav-link {
	color: rgba(var(--color-light), 1);
	border-bottom: .25rem solid transparent;
}

#navbar-main.navbar-floating .navbar-collapse  .nav-link {
	color: rgba(var(--color-dark), .9);
	border-bottom: .25rem solid transparent;
}

#navbar-main .navbar-collapse .nav-link:hover,
#navbar-main .navbar-collapse  .nav-link:focus {
	border-bottom-color: rgba(var(--color-light), 1);
}
#navbar-main.navbar-floating .navbar-collapse .nav-link:hover,
#navbar-main.navbar-floating .navbar-collapse  .nav-link:focus {
	border-bottom-color: rgba(var(--color-dark), .9);
}

#navbar-main .navbar-collapse .active,
#navbar-main .navbar-collapse .active:hover,
#navbar-main .navbar-collapse .active:focus {
	color: rgba(var(--color-dark), 1);
	border-bottom-color: rgba(var(--color-dark), 1);
}

#navbar-main.navbar-floating .navbar-collapse .active,
#navbar-main.navbar-floating .navbar-collapse .active:hover,
#navbar-main.navbar-floating .navbar-collapse .active:focus {
	color: rgba(var(--color-orange), .9);
	border-bottom-color: rgba(var(--color-orange), .9);
}


#preloader{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(9, 30, 52, 100);
}
.grecaptcha-badge { 
    visibility: hidden;
}
#welcome{
	height: 100vh;
	width: 100%;
	overflow: hidden;
	position: relative;

}
#welcome .feature{
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	
}
#cover{
	position: absolute;
	height: 100%;
	width: 100%;
	background: url(../img/cover.jpg) 50% 50% no-repeat;
	background-size: cover;
	
	animation: cover-zoom 60s infinite;
}


#cover:before{
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: rgb(9,30,52);
	background: linear-gradient(
	330deg,
	rgba(var(--color-dark), .75) 0%,
	rgba(var(--color-dark), .75) 33%,
	rgba(var(--color-orange), .75) 33%,
	rgba(var(--color-orange), .75) 66%,
	rgba(var(--color-dark), .75) 66%,
	rgba(var(--color-dark), .75) 100%
	);
}

#welcome:hover #cover{
	
	transition: all .5s;
}
@keyframes cover-zoom {
  0% {transform: scale(1);}
  50% {transform: scale(1.2);}
  100% {transform: scale(1);}
}
#welcome .container{
	height: 100%;
	position: relative;
}

#map-contact{
	height: 25vh;
}

#contact .container{
	position: relative;
}
hr{
	width: 3rem;
	border-width: 0.25rem;
}
.btn, .navbar-toggler{
	border-radius:0;
	
}
.navbar-toggler{
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	color: var(--bs-white);
	
}
.container-50{
	--bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}


#contact .form-control::placeholder{
	color: #ccc;
	opacity: 1; /* Firefox */
}

#contact .form-control:-ms-input-placeholder{
    color: #ccc;
}

#contact .form-control::-ms-input-placeholder{
    color: #ccc;
}
:target::before {
  content: "";
  display: block;
  height: 60px; /* fixed header height*/
  margin: -60px 0 0; /* negative fixed header height */
}

@media only screen and (min-width: 576px){
	.container-50{
		max-width: 270px;
	}
}
@media only screen and (min-width: 768px){
	.container-50{
		max-width: 360px;
	}
}
@media only screen and (min-width: 992px){
	.container-50{
		max-width: 480px;
	}
}
@media only screen and (min-width: 1200px){
	.container-50{
		max-width: 570px;
	}
}
@media only screen and (min-width: 1400px){
	.container-50{
		max-width: 660px;
	}
}