html, body {
	width: 100vw;
	overflow-x: hidden;
	background-color: #fefcf8;
}

/* HEADER */

.navbar {
	position: fixed;
	width: 100% !important;
	background-color: transparent !important;
	padding: 2%;
}

.navbar-toggler {
	border: none !important;
}

.container-fluid {
	padding: 0%;
}

.navbar-brand {
	text-transform: uppercase;
	font-weight: bold;
	z-index: 600;
}

ul.navbar-nav {
	width: 100%;
}

li {
	font-weight: 600;
}

.header {
	border-bottom: solid 1px #2E2E26;
	height: 100vh;
}

.header h1 {
	text-align: left;
	font-size: 7rem;
	margin: 1% 2%;
	line-height: 1.2em;
	text-transform: uppercase;
}

.hidden {
	display: none !important;
}

.title {
	z-index: 200;
	position: fixed;
	top: 3.75%;
	left: 2%;
}

.title h1 {
	text-align: left;
	font-size: 2rem;
	text-transform: uppercase;
}

.fineprint {
	font-weight: 400;
}

section {
	width: 100vw;
	height: auto;
	scroll-snap-stop: always;
	scroll-snap-align: start;
}

a {
	color: #2E2E26;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.bold {
	font-weight: 700;
}

button.contact {
	z-index: 200;
	position: fixed;
	top: 3.75%;
	right: 2%;
	
	color: #fff;
	background-color: #2E2E26;
	width: 10%;
	padding: 0.5%;
	border: 1px #2E2E26;
	border-radius: 60px;
}

button.contact:hover {
	background-color: #20201a;
	border: 1px #20201a;
}

/* IMPRESSUM */

section#impressum {
	margin-top: 12vh;
	padding: 5% 2%;
}

div.highlight {
	padding: 3% 0%;
}

div.highlight  p {
	font-size: 1em !important;
}

section#impressum p {
	font-size: 0.6em;
}


/* PORTFOLIO */

section#portfolio {
	margin-top: 12vh;
}

.prod1 {
	background-image: url(img/nm_rime@2x.png);
	background-repeat:none;
	background-size:cover;
}
.prod2 {
	background-image: url(img/tc_here@2x.png);
	background-repeat:none;
	background-size:cover;
}
.prod3 {
	background-image: url(img/th_sinfonieorchester@2x.png);
	background-repeat:none;
	background-size:cover;
}

.prod4 {
	background-image: url(img/mima_typo@2x.png);
	background-repeat:none;
	background-size:cover;
}
.prod5 {
	background-image: url(img/dr_exoverb@2x.png);
	background-repeat:none;
	background-size:cover;
}
.prod6 {
	background-image: url(img/mw_logo@2x.png);
	background-repeat:none;
	background-size:cover;
}

.prod7 {
	background-image: url(img/dhaus_cabaret@2x.png);
	background-repeat:none;
	background-size:cover;
}
.prod8 {
	background-image: url(img/colorspacecologne@2x.png);
	background-repeat:none;
	background-size:cover;
}
.prod9 {
	background-image: url(img/gr_christian@2x.png);
	background-repeat:none;
	background-size:cover;
}
.prod10 {
	background-image: url(img/koreanbap@2x.png);
	background-repeat:none;
	background-size:cover;
}

/* Image To Text On Hover #5784e6 */

.hovtxt {
	position: relative;
	background: #0750A4 /*#fefcf8CC*/ /*#E3E3DBCC*/;
	opacity:0;
	transition-duration: 500ms;
	transition-timing-function: ease-in-out;
	height: 33.3vw;   
}

 .hovtxt:hover {
	 z-index: 500;
	opacity:1;
}

.col-6 {
	border: solid 1px #2E2E26;
	padding: 0;
	cursor: pointer;
}

.hovtxt h3 {
	position: absolute;
	top: 6%;
	left: 6%;
	font-size: 1.5rem;
}

.date {
	font-weight: 700;
	position: absolute;
	top: 6%;
	right: 6%;
}

.info {
	font-weight: 700;
	position: absolute;
	bottom: 4%;
	left: 6%;
	text-transform: uppercase;
}

.offcanvas {
	max-height: 100vh;
	width: 100% !important;
	overflow: hidden;
	background-color: #fefcf8;
}

.offcanvas-header {
	z-index: 300;
	position: relative;
	top: 0;
}

.offcanvas-header.btn-close {
	position: absolute;
	right: 0;
}


.offcanvas-body {
}

.carousel {
	width: 75% !important;
}

.carousel-control-next-icon {
	
}

.carousel-control-prev {
	left: -15%;
}

.carousel-control-next {
	left: 100%;
}

footer {
	color: #2E2E26 !important;
	padding: 2%;
	border-top: 0px !important;
}

p.copyright {
	margin-bottom: 0 !important;
}

.nav-link {
	padding: 0;
	color: #2E2E26;
}

.mobile {
	display: none !important;
}
.desktop {
	display: block !important;
}


/******************************************************************************************/
 /********************************************         MEDIAQUERIES         ****************/
 /******************************************************************************************/
 
 /* Extra small devices (phones, less than 768px) */
 /* No media query since this is the default in Bootstrap */
 
 
 /* Small devices (tablets, 767px and down) */
 @media (max-width: 767px) {
	 
	 .navbar-brand {
		 position: absolute;
		 top: 50%;
		left: 50%;
		  -ms-transform: translate(-50%, -50%);
		  transform: translate(-50%, -50%);
	 }
	 
	 .navbar-collapse {
		 position: absolute;
		 background: #fefcf8;
		 top: 0;
		 left: 0;
		 width: 100vw !important;
		 height: 100vh !important;
	 }
	 
	 ul.navbar-nav {
		 text-align: center;
		 position: absolute;
		 width: 100%;
		 top: 50%;
	 }
	 
	 button.navbar-toggler {
		 z-index: 55555;
	 }
	 
	 .navbar-toggler:focus {
	 box-shadow: none !important;
 	}
	 
	 li.nav-item {
		 padding: 2% !important;
	 }
	 
	 .navbar .justify-content-between {
		 justify-content: end !important;
	 }
	 
	 .title h1 {
		 font-size: 1.5rem;
		 margin-bottom: 0 !important;
	 }
	 
	 .col-6 {
		 width: 100% !important;
		 aspect-ratio: 1 / 1 !important;
	 }
	 
	 section#portfolio {
		 margin-top: 8vh !important;
	 }
	 
	 .hovtxt {
		 height: 100% !important;
	 }
	 
	 button.contact {
		 top: 2%;
		 right: 5%;
		 width: 30%;
		 padding: 1% !important;
	 }
	 
	 .title {
		 top: 2.25%;
		 left: 5%;
	 }
	 
	 footer {
		 padding: 5%;
		 margin-bottom: 0% !important
	 }
	 
	 footer ul.justify-content-end {
		 justify-content: flex-start !important;
	 }
	 
	 .col-md-4 {
		 width: 100% !important;
	 }
	 
	 .copyright {
		 margin-top: 5% !important;
		 justify-content: flex-end !important;
	 }
	 
	 p.bi.copyright.mobile {
		 text-align: center;
		 width: 100% !important;
	 }
	 
	 li.nav-item {
		 padding-left: 0% !important;
	 }
	 
	 li.nav-item a {
		  padding-left: 0% !important;
	  }
	 
	 
	 ul.nav {
		margin: 5% 0% !important; 
	 }
	 
	 .desktop {
		 display: none !important;
	 }
	 .mobile {
		 display: block !important;
	 }
}