:root {
	--background01: #0D0D0D;
	--background02: #1d1d1d;
	--background03: #242424;
	--accent01: #4B89BF;
	--accent02: #99D0F2;
	--accent03: #800080;
	--white: #EDEDED;
}

@font-face {
    font-family: 'lackitalic';
    src: url('fonts/Lack-Italic.woff2') format('woff2'),
         url('fonts/Lack-Italic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'lack_lineitalic';
    src: url('fonts/Lack-Line-Italic.woff2') format('woff2'),
         url('fonts/Lack-Line-Italic.woff') format('woff');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'lack_lineregular';
    src: url('fonts/Lack-Line-Regular.woff2') format('woff2'),
         url('fonts/Lack-Line-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'lackregular';
    src: url('fonts/Lack-Regular.woff2') format('woff2'),
         url('fonts/Lack-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body, html {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	scroll-behavior: smooth;
}

@media (min-width: 1600px) {

	.container {
		max-width: 1550px;
	}

}

#bootstrap-overrides {
	font-family: interstate,sans-serif;
	font-weight: 300;
	font-style: normal;
	background-color: var(--background03);
	color: var(--white);
}

#bootstrap-overrides b {
	font-weight: 600;
}

#bootstrap-overrides .navbar {
	background-color: var(--background01);
}

#bootstrap-overrides .navbar-nav .nav-item {
	font-family: jaf-domus-titling-web, sans-serif;
	font-style: normal;
	font-size: 16px;
	padding-right: 30px;
	color: var(--white);
}

#bootstrap-overrides .navbar .navbar-brand {
	padding-left: 15px;
}

#bootstrap-overrides .navbar-nav li a {
	font-weight: 400;
	color: var(--white);
}

#bootstrap-overrides .navbar-nav li a:hover {
	color: var(--accent01);
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}

#bootstrap-overrides .navbar-nav li.active a {
	font-weight: 700;
	color: var(--accent01);
}

#bootstrap-overrides .navbar-nav {
	padding-top: 30px;
	padding-bottom: 15px;
}

#bootstrap-overrides .navbar .dropdown-menu {
	background-color: var(--background03);
	border-radius: 0;
	font-family: jaf-domus-titling-web, sans-serif;
	font-style: normal;
	font-size: 16px;
	color: var(--white);
}

#bootstrap-overrides .navbar .dropdown-menu a:hover {
	background-color: var(--white);
	color: var(--accent01);
}

#box {
	display: flex;
	flex-flow: column;
	height: 100%;
  }

a:visited {
	text-decoration: none;
	color: var(--accent01);
}

a {
    text-decoration: none;
	color: var(--accent01);
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}

a:hover {
	color: var(--accent02);
	text-decoration: none;
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}

#bootstrap-overrides h1{
    font-family: lackregular;
    font-weight: 500;
    font-style: normal;
    font-size: 42px;
}

@media (min-width: 576px) {
	#bootstrap-overrides h1{
		font-size: 60px;
	}
}

#bootstrap-overrides h2 {
	font-family: lackregular;
	font-style: normal;
    font-size: 45px;
}

.card {
	background-color: var(--background02);
	margin-top: 20px;
	margin-bottom: 25px;
}

#bootstrap-overrides .btn-primary {
	background-color: var(--accent01);
	border-color: var(--accent01);
}

#title {
	text-align: center;
	margin-top: 30px;
	margin-bottom: 60px;
}

#bootstrap-overrides #papierkram h2 { 
    font-size: 25px;
    font-weight: bold;
}

#bootstrap-overrides #papierkram h3 { 
    font-size: 20px;
	font-weight: bold;
}

#bootstrap-overrides #papierkram h4 { 
    font-size: 15px;
	font-weight: bold;
}

#bootstrap-overrides button, #bootstrap-overrides .card {
	border-radius: 0;
}

#bootstrap-overrides .card-img-top {
	border-radius: 0;
}

#bootstrap-overrides .btn-primary:hover {
	background-color: var(--accent02);
}

#bootstrap-overrides .modal-content {
	background-color: var(--background03);
}

#bootstrap-overrides #nav2 {
	background-color: var(--background02);
}

#bootstrap-overrides #nav2 .nav-link {
	color: var(--white);
}

#bootstrap-overrides #nav2 .nav-link:hover {
	color: var(--accent01);
}

#bootstrap-overrides #nav2 .active {
	color: var(--accent01);
}

#bootstrap-overrides .nav-tabs .active {
	background-color: var(--background03);
	border-color: var(--background03);
	color: var(--accent01);
	font-weight: bold;
}

.cookieYouTube {
	background-color: var(--background01);
	text-align: center;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
	color: var(--white);
	display: flex;
	justify-content: center;
	align-items: center;
}

.mlText {
	text-align: left;
    font-weight: 400;
    font-size: 24px;
    padding-top: 40px;
	padding-bottom: 50px;
}

.mlText h1, .mlText h2 {
	text-align: center;
}

.fotoTrenner {
	line-height: 0;
	 
	-webkit-column-count: 2;
	-webkit-column-gap:   0px;
	-moz-column-count:    2;
	-moz-column-gap:      0px;
	column-count:         2;
	column-gap:           0px;
}

.fotoTrenner img {
	width: 100% !important;
	height: auto !important;
	display: block;
}

.videoBlock3 {
	line-height: 0;
	 
	-webkit-column-count: 1;
	-webkit-column-gap:   0px;
	-moz-column-count:    1;
	-moz-column-gap:      0px;
	column-count:         1;
	column-gap:           0px;
}

.videoBlock3 img {
	width: 100% !important;
	height: auto !important;
	display: block;
	-webkit-transition: transform .5s ease;
	transition: transform .5s ease;
}

.img-container:hover:hover img {
	transform: scale(1.1);
}

.img-container {
	position: relative;
	overflow: hidden;
}

.img-container .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(0, 0, 0, 0.35);
	-webkit-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}

.img-container:hover .overlay {
	background: rgb(0, 0, 0, 0);
}

.overlayText {
	line-height: normal;
	text-shadow: 2px 2px 10px #000;
	text-align: left;
	font-size: 20px;
	position: absolute;
	bottom: 2.5%;
	left: 30px;
	color: #fff;
	padding-right: 30px;
}

.overlayText h3 {
	line-height: 80%;
	font-size: 30px;
}

@media (min-width: 768px) {

	.fotoTrenner {
		line-height: 0;
		 
		-webkit-column-count: 3;
		-webkit-column-gap:   0px;
		-moz-column-count:    3;
		-moz-column-gap:      0px;
		column-count:         3;
		column-gap:           0px;  
	}

	.videoBlock3 {
		line-height: 0;
		 
		-webkit-column-count: 3;
		-webkit-column-gap:   0px;
		-moz-column-count:    3;
		-moz-column-gap:      0px;
		column-count:         3;
		column-gap:           0px;
	}

}

@media (min-width: 1200px) {

	.fotoTrenner {
		line-height: 0;
		 
		-webkit-column-count: 4;
		-webkit-column-gap:   0px;
		-moz-column-count:    4;
		-moz-column-gap:      0px;
		column-count:         4;
		column-gap:           0px;  
	}

}

.colorBlockBlack {
	background-color: var(--background02);
}

.colorBlockBlue {
	background-color: var(--accent01);
}

.mittenImg {
	top: 50%;
	transform: translate(0%, -50%);
}

/*Startseite*/

#startseite {
	text-align: center;
}

.vidBack {
	width:100%;
	height:100vh;
	overflow: hidden;
	position: relative;
}

.vidBack video {
	flex: 1 1 auto;
	object-fit: cover;
	width:100%;
	height:100%;
}

#mlVideoOverlay {
	position: absolute;
	width: 100%;
	height:100%;
	padding: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#mlVideoOverlayText {
	text-align: center;
	text-shadow: 2px 2px 10px #000;
}

#mlVideoOverlayText h1 {
	font-size: 30px;
}

#mlVideoOverlayText h2 {
	font-size: 60px;
}

@media (max-width: 768px) {

	#mlVideoOverlayText h1 {
		font-size: 20px;
	}
	
	#mlVideoOverlayText h2 {
		font-size: 35px;
	}
}

.srollIcon {
	width: 100%;
	margin: 0px;
	padding: 0px;
	text-align: center;
}

.chevron {
  position: absolute;
  width: 28px;
  height: 8px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: ' ';
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: var(--white);
}

.chevron:before {
    left: 0;
    transform: skew(0deg, 30deg);
    bottom: 38px;
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;

  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}

#mouseScroll{
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 1px;
    width: auto;
    height: 10%;
    position: relative;
    min-height: 110px;
	width: 0px;
}

.textScroll {
	font-family: jaf-domus-titling-web, sans-serif; 
	font-weight: 400;
	font-style: normal;
	font-size: 11px;
	display: block;
	margin-top: 60px;
	margin-left: -23px;
	color: var(--white);
	text-transform: uppercase;
	white-space: nowrap;
	opacity: .25;
	animation: pulse 2s linear alternate infinite;
	padding-bottom: 30px;
}

@keyframes pulse {
	to {
	  opacity: 1;
	}
  }
  
.blackBox {
	  width: 100%;
	  height: 200px;
	  background-color: var(--background01);
}

.startText {
	text-align: left;
    font-weight: 400;
    font-size: 24px;
    padding-top: 60px;
	padding-bottom: 60px;
}

#startseiteShow {
	text-align: center;
	font-size: 25px;
}

#bootstrap-overrides .startseiteAuswahl {
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	padding-top: 10px;
	padding-bottom: 15px;
	background-color: hsla(0,0%,0%,0.8);
	color: var(--white);
	font-family: jaf-domus-titling-web, sans-serif;
	font-size: 15pt;
    font-weight: 400;
	font-style: normal;
	font-weight: bold;
	overflow: hidden;
}

.startseiten_auswahl {
	margin-bottom: 30px;
}

.startseiten_auswahl img{
	transform: scale(1);
	-webkit-transition: all 500ms ease;
	transition: all 500ms ease;
}

.startseiten_auswahl:hover img {
	transform: scale(1.1);
	-webkit-transition: all 500ms ease;
	transition: all 500ms ease;
}

#talkWithUs img {
	max-width: 50%;
}

#talkWithUsmittenText {
	top: 50%;
	position: absolute;
	transform: translate(0%, -50%);
	text-align: right;
	right: 0;
}

#aktuell {
	margin-top: 50px;
}

#aktuellSlider {
	margin-top: 35px;
	margin-bottom: 40px;
}

#aktuellSlider .carousel-control-prev, #aktuellSlider .carousel-control-next {
	background-color: var(--background03);
	opacity: 1;
}

#aktuellSlider .carousel-control-prev-icon, #aktuellSlider .carousel-control-next-icon {
	opacity: .5;
	-webkit-transition: all 500ms ease;
	transition: all 500ms ease;
}

#aktuellSlider .carousel-control-prev:hover .carousel-control-prev-icon, #aktuellSlider .carousel-control-next:hover .carousel-control-next-icon {
	opacity: 1;
	-webkit-transition: all 500ms ease;
	transition: all 500ms ease;
}

#aktuellSlider .carousel-inner {
	text-align: left;
	padding-left: 15%;
	padding-right: 15%;
}

#aktuellSlider .carousel-inner h4 {
	padding-top: 10px;
	padding-bottom: 5px;
}

#infoBlock {
	opacity: 75%;
	background-color: var(--accent03);
	font-size: 20px;
	/*background-image: url(../bilder/projekte/wiewirgehen/WieWirGehenPraegt_16zu7_v1_web.jpg);
	background-repeat: no-repeat;
	background-size: 100%;*/
	border: none;
	margin-bottom: 0;
	position: absolute;
	width: 100%;
	color: var(--white);
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
	border-radius: 0;
	z-index: 101;
}

#infoBlock:hover {
	opacity: 100%;
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}

#infoBlock .close {
	text-shadow: none;
}

#infoBlock a {
	color: var(--white);
	text-decoration: underline;
	font-weight: normal;
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}

#infoBlock a:hover {
	color: violet;
	text-decoration: underline;
	font-weight: normal;
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}

/*Leistungen*/

#uLeistungen {
	text-align: center;
}

#ihrProjektBox {
	background-color: var(--accent02);
	color: var(--background01);
	padding-top: 30px;
	padding-bottom: 40px;
}

#ihrProjektBox h2 {
	padding-bottom: 25px;
	text-align: center;
	font-size: 50px;
}

#ihrProjektBox h4 {
	padding-bottom: 10px;
}

#leistungen .card h2 {
	padding-bottom: 10px;
}

@media only screen and (max-width: 991px) {

	#leistungen .card h2 {
		padding-top: 10px;
	}

}

#leistungen .card h4 {
	padding-bottom: 5px;
	padding-top: 5px;
}

#leistungen .card hr {
	border-top: 2px solid var(--background01);
}

#nichtsDabei {
	background-color: var(--background02);
	color: var(--white);
	padding-top: 20px;
	text-align: center;
	padding-bottom: 25px;
}

#nichtsDabei h2 {
	padding-bottom: 25px;
	padding-bottom: 5px;
	text-align: center;
	font-size: 35px;
}

#bootstrap-overrides #leistungen .card .btn-primary {
	margin-bottom: 10px;
}

#bootstrap-overrides #underCats {
	margin-bottom: 50px;
}

#bootstrap-overrides #underCats .card {
	margin-top: 15px;
	margin-bottom: 15px;
	overflow: hidden;
}

#bootstrap-overrides #underCats .card-img-top {
	transform: scale(1.0);
	-webkit-transition: all 500ms ease;
	transition: all 500ms ease;
	}


#bootstrap-overrides #underCats .card:hover .card-img-top {
	transform: scale(1.1);
	-webkit-transition: all 500ms ease;
	transition: all 500ms ease;
	}

#bootstrap-overrides .underCatCaption  {
	position: absolute;
	z-index: 10;
	text-align: center;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	padding-top: 10px;
	padding-bottom: 15px;
	background-color: hsla(0,0%,0%,0.8);
	color: var(--white);
	font-family: jaf-domus-titling-web, sans-serif;
	font-size: 15pt;
    font-weight: 400;
	font-style: normal;
	font-weight: bold;
}

#bootstrap-overrides #underCats .card-body {
	margin-bottom: 50px;
}

.leistungsVideo {
	margin-top: 45px;
	margin-bottom: 50px;
}


/*Portfolio*/

#portfolioHeading {
	padding-top: 30px;
	padding-bottom: 10px;
	text-align: center;
}

#portfolio .container-fluid {
	padding: 0;
}

#portfolioAuswahl {
	margin: 0;
}

#portfolio .portfolio-col {
	padding: 0;
}

#portfolio .portfolioPad {
	padding-left: 20px;
	padding-right: 20px;
}

#portfolio .portfolio-caption {
	position: absolute;
	text-align: center;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	padding-top: 10px;
	padding-bottom: 15px;
	background-color: hsla(0,0%,0%,0.75);
	color: var(--white);
	font-family: jaf-domus-titling-web, sans-serif;
	font-size: 15pt;
    font-weight: 400;
	font-style: normal;
}

#portfolio .portfolioPad {
	padding-top: 20px;
	padding-bottom: 50px;
}


#portfolio .portfolio-col {
	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
	filter: grayscale(0%);
	-webkit-transition: all 500ms ease;
	transition: all 500ms ease;
}

#portfolio .portfolio-col:hover {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	-webkit-transition: all 500ms ease;
	transition: all 500ms ease;
}

#portfolio .container-fluid {
	max-width: 2500px;
}

/* Team */

.teamMember {
	max-width: 400px;
}

.teamMember ion-icon {
	font-size: 30px;
}

.teamMember a {
	color: var(--white);
	-webkit-transition: all 500ms ease;
	transition: all 500ms ease;
}

.teamMember a:hover {
	color: var(--accent01);
	-webkit-transition: all 500ms ease;
	transition: all 500ms ease;
}

/*contactBanner*/

.contactBanner {
    width: 100%;
    background-color: var(--accent01);
    padding-top: 20px;
	padding-bottom: 40px;
	text-align: center;
}

.contactBanner h2 {
	font-family: rift-soft, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 50px;
	margin-top: 20px;
}

.contactBanner a {
	color: var(--white);
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}

.contactBanner a:hover {
	color: var(--accent02);
	text-decoration: none;
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}

.contactBanner ion-icon {
	font-size: 100px;
}

/* Kontakt*/

#bootstrap-overrides #Kontaktblock h2 {
	font-family: lackregular;
	font-style: normal;
    font-size: 38px;
	text-align: center;
}

#Kontaktformular {
	text-align: left;
}

#Formular {
    font-family: interstate, sans-serif;
    font-weight: 500;
    font-style: normal;
}

#bootstrap-overrides #Formular .form-control {
	background-color: var(--background02);
	color: var(--white);
	border: none;
}

#bootstrap-overrides input, #bootstrap-overrides textarea {
	border-radius: 0;
}

#Kontaktblock {
	padding-bottom: 50px;
}

#ks_socialIcons a {
	font-size: 30px;
	padding-left: 15px;
	color: var(--white);
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}

#ks_socialIcons a:hover {
	color: var(--accent01);
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}

@media only screen and (min-width: 768px) {

	#Kontaktaufzaehlung {
		font-size: 20px;
		text-align: right;
	}

}

@media only screen and (max-width: 767px) {

	#Kontaktaufzaehlung {
		font-size: 20px;
		text-align: left;
		padding-top: 50px;
	}

}

#Kontaktaufzaehlung small {
	color: #C4C4C4;
}

/*footer*/

#bootstrap-overrides footer {
	color:var(--white);
	background-color: var(--background01);
	padding-left: 50px;
	padding-right: 50px;
}

#bootstrap-overrides footer a {
	color:var(--white);
	font-family: jaf-domus-titling-web, sans-serif;
    font-weight: 400;
    font-style: normal;
	font-size: 14px;
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}

#bootstrap-overrides footer a:hover {
	color: var(--accent01);
	text-decoration: none;
	-webkit-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
}

#bootstrap-overrides footer .social a {
	margin-right: 20px;
	height: 20px;
	font-size: 25px;
}

#madeBy {
	padding-top: 10px;
	margin-bottom: 0px;
}

#madeBy ion-icon {
	color: purple;
}