body{ font-size:19px; /*1.3rem;*/}

.entwurf-blau { background-color: #212750!important; }


/* Content and Cards */

.card img { height:auto; }

.collection-card .stripe {top:0em;bottom:auto;}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6, .navbar-nav > li > a{
	font-family: 'Raleway', sans-serif; 
}

i.entwurf-blau.fas {
    width: 52px;
}

a:link, a:visited {
	color: rgba(30, 55, 135,1);
}
a:hover, a:focus, a:active {
	color: rgba(33, 9, 80,1);
}

a.carousel-control-next, a.carousel-control-prev { color:#fff; }

.carousel-caption.rgba-black-light.p-3 {
	padding-top: 30px !important;
	background-color: transparent;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	left: 0;
	right: 0;
	bottom: 0;
}
.carousel-item .carousel-caption.rgba-black-strong.p-3 {
	padding-top: 30px !important;
	background-color: transparent;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	left: 0;
	right: 0;
	bottom: 0;
}

.navbar .breadcrumb {
	font-size: 18px;
}

#navbarSupportedContent{position:relative;}

.navbar-nav {
	right: 0px;
	font-size: 26px;
	padding:0px;
}

.navbar-nav li.current{
    background-color: rgb(33, 39, 80);
}
.navbar-nav li.current a.nav-link{
    color: #fff;
}

.navbar-nav li:hover{
    background-color: rgba(33, 39, 80, 0.75);
}
	
.navbar-nav li.current a.nav-link:hover{
    color: #ffdd06;
}


.navbar-dark .navbar-nav .nav-link {
	color: #444444;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.navbar .breadcrumb{    padding: .3rem 0;}

.zoom-bg {
  transition:all 0.5s ;
  -webkit-transition:all 0.5s ;
  -o-transition:all 0.5s ;
  -moz-transition:all 0.5s ;
	background-size:80%;
}

	/* Navigation*/

		.navbar {
			background-color: transparent;
		}
		.scrolling-navbar {
			transition: background .5s ease-in-out, padding .5s ease-in-out;
		}
		.top-nav-collapse {
			background-color: rgba(0,0,0,0.75);
		}

		@media only screen and (max-width: 767px) {
			.navbar {
				background-color: rgba(0,0,0,0.75);
			}
		}

		/* Necessary for full page carousel*/
		html,
		body,
		.view {
			height: 100%;
		}

		/* Carousel*/
		.carousel,
		.carousel-item,
		.carousel-item.active {
			height: 100%;
		}
		.carousel-inner {
			height: 100%;
		}
		.carousel-item {
		
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
		}
		



@media (min-width: 768px) and (max-width: 991px){
	.carousel-control-next .fa-chevron-right, 
	.carousel-control-prev .fa-chevron-left{font-size:40px;}
}

@media (min-width: 992px) {
	.carousel-control-next .fa-chevron-right, 
	.carousel-control-prev .fa-chevron-left{font-size:60px;}

	.navbar-nav{    
		margin-top: 40px;

	}
}


/* Projektübersicht */
.row.d-flex {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}
.row.d-flex .card {
	height: 100%;
	border-radius: 0;
}
.row.d-flex .card .card-img-top {
	border-radius: 0;
}

/* Referenz-Detailseite */

.ref-detail .img-fluid {
				height: auto;
				max-width: 100%;
			}

.ref-detail .img-before-after {
				/* width: 360px;
				height: 454px;*/
				position: relative;
				width: max-content;
				display:inline-block; 
			}

.ref-detail .img-before {
				/* background-color: orange;*/
				height: 100%;
				position: absolute;
			}

.ref-detail .img-after {
				background-color: #d0d0d0;
				/*height: 100%;*/
				position: relative;
				/*float: right;
				width: auto;*/
				z-index: -1;
			}

.ref-detail .divider {
				width: 2%;
				background-color: #212750;
				height: 100%;
				position: absolute;
				display: inline-block;
				left:170px;
	box-shadow:1px 0px 4px rgba(0,0,0,0.5);
	-webkit-box-shadow:1px 0px 4px rgba(0,0,0,0.5);
			}

.ref-detail .divider:hover {
				cursor: pointer;
			}
.ref-detail .divider .fas { position:absolute; top:45%; color:#212750; font-size:64px; left:-20px; }
.ref-detail .carousel-control-next, .ref-detail .carousel-control-prev { width:20%;  }

.ref-detail .carousel-item p.caption {
	font-size: 16px;
	line-height: 18px;
	position: absolute;
	left: 50px;
	padding: 0 40px 0 0;
	height: 48px;
	margin-bottom: 0;
	display: flex;
	align-items: center;
}

.btn-outline-indigo {
	border: 2px solid #212750!important;
	color: #212750!important;
}
.btn-outline-indigo:hover, .btn-outline-indigo:active, .btn-outline-indigo:focus {
	border: 2px solid #666666!important;
}

@media (max-width: 767px) {
	.carousel-control-next .fa-chevron-right, 
	.carousel-control-prev .fa-chevron-left{font-size:30px;}
	
	.navbar-brand img {
		max-height: 90px;
		object-fit: contain;
	}
	.carousel-caption h3.display-4 {
		font-size: 2.5rem;
	}
}

@media (min-width: 1200px) {

	.navbar-nav{    
		margin-top: 46px;

	}

}

.video-wrapper.embed-responsive {
	cursor: pointer;
}
.video-wrapper.embed-responsive .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: auto;
    background-color: rgba(0, 0, 0, 0.5);
    aspect-ratio: 1;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    min-width: fit-content;
    padding: 20px;
}
.video-wrapper.embed-responsive .play i.fab {
	font-size: 70px;
}
.video-wrapper.embed-responsive .play span{
	font-size: 30px;
    font-weight: 700;
}


small, .small {
	font-size: 15px;
	line-height: 20px;
	display: inline-block;
	font-weight: 300;
}

.we_select select {
    font-family: "Roboto",Helvetica,Arial,sans-serif;
    display: inline-block!important; 
}

.we_input [type=checkbox]:checked, .we_input [type=checkbox]:not(:checked) {
	position: static;
	opacity: 1;
	pointer-events: auto;
}

.weBtn .fa-trash-o::before {
	content:'\f2ed';
}

.navbar.navbar-dark .navbar-toggler-icon {
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(33, 39, 80, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
			cursor:pointer
    cursor: pointer;
}

/* 
NEW NAV LAYOUT
*/
#top-section .container-fluid {
	display: flex;
	align-items: center;
	padding-top: 23px;
}

.navbar.fixed-top.navbar-dark.scrolling-navbar {
	background-color: transparent !important;
	box-shadow: none;
}
.navbar.fixed-top .navbar-brand img {
    object-fit: contain;
    background: rgba(255, 255, 255, 0.8);
    padding: 30px;
	backdrop-filter: blur(5px);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
	aspect-ratio:1;
	max-height: initial;
}
.navbar.fixed-top .navbar-brand {
	max-width: 280px;
}
.navbar.fixed-top .navbar-collapse.col-sm-9 {
	flex-basis: content;
	flex-grow: 0;
}
.navbar.fixed-top .navbar-collapse ul.navbar-nav {
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(5px);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
}

#top-section button.navbar-toggler {
	background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
	margin-right: 16px;
	margin-left: 16px;
}
@media (min-width: 1200px) {
    ul.navbar-nav {
        margin-top: 7px;
    }
}
@media (min-width: 992px) {
    ul.navbar-nav {
        margin-top: 5px; 
    }
}

@media (max-width: 991.9px) {
	#top-section .container-fluid {
		padding-top: 8px;
	}
}

@media (max-width: 767.9px) {
	.navbar.fixed-top .navbar-brand {
    max-width: 220px;
	}
	.navbar.fixed-top .navbar-brand img {
    padding: 5px;
	}
	#top-section .container-fluid {
		padding-top: 8px;
	}
}