:root {
	--background01: #0D0D0D;
	--background02: #1d1d1d;
	--background03: #242424;
	--accent01: #396696;
	--accent02: #569AE2;
	--white: #EDEDED;
}

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

#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: 14px;
	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;
}

#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: 'Palanquin Dark', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 60px;
}

#bootstrap-overrides h2 {
	font-family: 'Palanquin Dark', sans-serif;
	font-style: normal;
    font-size: 38px;
}

.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 .btn-primary:hover {
	background-color: var(--accent02);
}

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

.cookieYouTube {
	background-color: var(--background01);
	text-align: center;
	position: absolute;
	top: 0;
	bottom: 0;
	padding-left: 15px;
	padding-right: 15px;
	color: var(--white)
}

#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;
}

/*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;
}