@font-face {
	font-family: "roboto";
	src: url('fonts/roboto.ttf') format('truetype'); 
}

body, html {
	height: 100%;
	font-family: 'roboto', sans-serif;
	color: #777;
	}

h1 {text-indent: -9999px; margin: 0;} /* Logo */	
h2 {font-family: 'roboto', sans-serif; color: #000;}
h3 {font-family: 'roboto', sans-serif; font-size: 150%;}
h4 {font-family: 'roboto', sans-serif; font-size: 100%; color: #fff; line-height: 150%; }

p {margin-bottom: 48px;}
	
a {color: rgba(0,0,0,.75);}

a:active, a:focus, a:hover {
	color: #000;
	text-decoration: none;
	}

a.mailme {color: #fff;}

.gototop {width: 45px; height: 25px; margin: 0 auto; padding-top: 2px; background: orange;}
.gototop a {color: #fff; padding-left: 9px;}
a:hover.gototop {background: #91bf1e;}

ul {
	list-style-type: none;
	list-style-position: inside;
	padding: 0;
	}

/* Navigation */	
.navbar-light .navbar-nav .nav-link {color: #fff; background: orange;}
a.nav-link {
	margin-right: 5px;
	padding: 2px 0 1px 0;
	letter-spacing: 1px;
	}
a.nav-link:hover {color: #fff! important; background: #91bf1e! important;}

.logo {
	width: 200px;
	margin: 0 auto;
	padding-top: 56px;
	}

.logoinside {padding-top: 0;}

.logo a {
	width: 200px; /* Logo */
	height: 200px;
	display: block;
	background-image:url(files/logo-rainer-rzepka.gif);
	background-position: 0 200px;
	}

.logo a:hover,
.logo a:active {
	background-position: 0 0;
	}

.tictac, .orangedots, .bluestripes, .itsme, .portfolio, .bgnauts {
	position: relative;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	}

.tictac{
	background-image: url("files/tictac.jpg");
	min-height: 75%;
	}

.orangedots {
	background-image: url("files/dots.jpg");
	min-height: 500px;
	}

.bluestripes {
	background-image: url("files/stripes.jpg");
	min-height: 500px;
	}

.itsme {
	background-image: url("files/bg-rainer-rzepka.jpg");
	min-height: 75%;
	}

.portfolio {
	background-image: url("files/portfolio.jpg");
	min-height: 50%;
	}
	
.bgnauts {
	background-image: url("files/bg-nauts.jpg");
	min-height: 50%;
	}

.caption {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	text-align: center;
	color: #000;
	}

.caption span.border {
	font-family: 'roboto', sans-serif;
	background-color: #0076aa; /* Marineblau */
	color: #fff;
	padding: 12px 24px;
	font-size: 25px;
	letter-spacing: 10px;
	}

.caption.shorter {top: 30%;}

.teaser {margin: 50px 175px;}

.printtextrb {
	padding: 333px 15px 333px 55px; /* Printtext */
	text-align: right;
	}

.webtextlb {
	padding: 333px 55px 333px 15px; /* Webtext */
	text-align: left;
	}
	
.profiltext {
	color: #fff;
	text-align: right;
	padding: 0 5% 0 50%;
	}

.profiltext h2 {color: #fff;}

.imprinttext, .datentext {
	text-align: center; /* Impressum- und Datenschutztext, 404-Text */
	color: #000;
	margin: 5%;
	min-height: 300px;
	}

.datentext {
	text-align: justify; /* Datenschutztext */
	}

footer {
	padding: 12px 0;
	color: rgba(0,0,0,.75);
	background-color: #fff;
	font-size: 90%;
	text-align: center;
	}

/* Cookies */
div.cookieinfo {font-family: 'roboto', sans-serif! important; padding: 50px 15px! important;}
div.cookieinfo-close {float: none! important; display: inline! important;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
	.tictac, .orangedots, .bluestripes, .itsme, .portfolio, .bgnauts {
		background-attachment: scroll;
		}
	}

/* etwas Kosmetik für kleine Monitore */
@media screen and (max-width: 991px) {
		a.nav-link {color: rgba(0,0,0,.5)! important; background: #f8f9fa! important;}
		a.nav-link:hover {color: rgba(0,0,0,1)! important; background: #f8f9fa! important;}
	}
		
@media screen and (max-width: 767px) {
		.teaser {margin: 50px;}
		.printtextrb {text-align: left; padding: 25px 0 0 15px;}
		.webtextlb {padding: 15px 0 25px 15px;}
		div.cookieinfo {font-size: 60%! important;}
    }
	
@media screen and (max-width: 575px) {
		.caption.shorter {top: 50%;}
		.profiltext {padding: 0 5%;}
		.tictac {min-height: 50%;}
		.orangedots, .bluestripes {min-height: 250px;}
		.itsme {background-position: -100px 0px;}
		.bgnauts {min-height: 25%; background-position: right;}
		.email {border-top: 15px solid #fff;}
		.imprinttext, .datentext {padding-bottom: 25px;}
		.datentext {text-align: left;}
    }