/* GLOBAL STYLES
-------------------------------------------------- */
@font-face {
  font-family: 'RobotoSlab-SemiBold';
  src: url('../fonts/Cookie-Regular.ttf');
  src: url('../fonts/Cookie-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'RobotoSlab-Medium';
  src: url('../fonts/RobotoSlab-Medium.ttf');
  src: url('../fonts/RobotoSlab-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'RobotoSlab-Light';
  src: url('../fonts/RobotoSlab-Light.ttf');
  src: url('../fonts/RobotoSlab-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'RobotoSlab-Thin';
  src: url('../fonts/RobotoSlab-Thin.ttf');
  src: url('../fonts/RobotoSlab-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-ok:before {
  content: "\e013";
}
.glyphicon-remove:before {
  content: "\e014";
}
.glyphicon-chevron-left:before {
  content: "\e079";
}
.glyphicon-chevron-right:before {
  content: "\e080";
}
.glyphicon-th-large:before {
  content: "\e010";
}
.glyphicon-play:before {
  content: "\e072";
}
html {
	height: 100%;
}
body {
	background-color: rgba(251, 251, 251, 1);
	color: rgba(33, 33, 33, 1);
	font-family: 'RobotoSlab-Light', 'Times', sans-serif;
	font-size: 14px;
	font-size: 100%;
	font-size: 2vw;
  -webkit-transition: font-size .3s;
	text-align: left;
	position: relative;
	height:100%;
	overflow-x: hidden;
}
body:after {
	content:"";
	background-image: url(/static/img/rost-rost_bg_50.jpg);
	background-position: left top;
	background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;  
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 100vh;
	z-index: -1;
	filter:alpha(opacity=70); /* IE */
	opacity:0.7; /* allgemein */
	-moz-opacity:0.7; /* Mozilla */
	-khtml-opacity:0.7; /* KTHML */
	-opera-opacity:0.7; /* Opera */
}
h1, .h1 {
	color: rgba(33, 33, 33, 0.2);
	color: #e8e8e8;
	font-family: 'RobotoSlab-SemiBold', sans-serif;
	text-align: right;
	font-weight: normal;
	line-height: 0.75;
	position: absolute;
}
h2, .h2 {
	color: rgba(33, 33, 33, 1);
	font-family: 'RobotoSlab-Medium', sans-serif;
	text-align: right;
	font-weight: bold;
	font-size: 4rem;
}
h3, .h3 {
	color: rgba(33, 33, 33, 1);
	font-family: 'RobotoSlab-Medium', sans-serif;
	text-align: left;
	font-weight: bold;
	font-size: 1.5rem;
}
p {
	color: rgba(33, 33, 33, 1);
	text-align: left;
	font-weight: normal;
	font-size: 1rem;	
	line-height: 2;
	margin: 0px;
}
p.small, .small {
	color: rgba(33, 33, 33, 1);
	text-align: left;
	font-weight: normal;	
	font-size: 0.8rem;
	line-height: 1.2;
	margin: 2.2% 0px 3%;
}
a, a:link {
	color: rgba(33, 33, 33, 1);
	text-decoration: none;
}
a:hover {
	color: rgba(33, 33, 33, 0.8);
	text-decoration: none;
}
ul {
	list-style-type: square;
}
li {
	margin-left: -25px;
}
hr {
	border-top: dotted 1px rgba(33, 33, 33, 0.7);
	height: 2px;
	margin: 5% 0;
	clear: both;
}
.container {
  margin-right: 12%;
  margin-left: auto;
}
@media (max-width: 576px) {
body {
	background-position: -30px 30px;
	font-size: 4vw;
}
.container {
  margin-right: auto;
	margin-left: auto;
}
h2 {
	font-size: 5.3vw;
}
}
@media (min-width: 576px) {
body {
	background-position: 30px 0px;
	font-size: 3.5vw;
}
.container {
  margin-right: auto;
  margin-left: auto;
}
h2 {
	font-size: 4.5vw;
}
}
@media (min-width: 768px) {
body {
	font-size: 2.25vw;
}
.container {
  margin-right: auto;
  margin-left: auto;
}
h2 {
	font-size: 4vw;
}
}
@media (min-width: 992px) { 
body {
	font-size: 1.8vw;
}
.container {
  margin-right: auto;
  margin-left: auto;
}
h1 {
	font-size: 10rem;
}
h2 {
  font-size: 5rem;
  font-size: 3.5vw;
  right: 0rem;
  bottom: 20rem;
}
}
@media (min-width: 1200px) {
body {
	font-size: 1.1vw;
}
h1 {
	font-size: 14rem;
	right: 0rem;
	bottom: 15rem;	
}
h2 {
  font-size: 5rem;
  font-size: 2.8vw;
  right: 0rem;
  bottom: 20rem;
}
}

/* CONTENT-WRAPPER 
-------------------------------------------------- */
.content-wrapper {
	padding: 10% 0;
	margin-left: 0;
	margin-right: 0;
	height: auto;
	position: relative;
}
@media (min-width: 992px) { 
.content-wrapper {
	padding: 10% 0;
}
}
@media (min-width: 1200px) {
.content-wrapper {
	padding: 5% 0;
}
}
/* CONTAINER 
-------------------------------------------------- */
.container {
  margin-right: auto;
  margin-left: auto;
  position: relative;
}
@media (max-width: 576px) {
.navbar-expand > .container, 
.navbar-expand > .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}
}
@media (min-width: 576px) {
.navbar-expand > .container, 
.navbar-expand > .container-fluid {
    padding-right: 7px;
    padding-left: 7px;
}
}
@media (min-width: 992px) { 
.container {
  margin-right: auto;
  margin-left: auto;
}
}
@media (min-width: 1200px) {
.container {
  margin-right: 12%;
  margin-left: auto;
}
}
/* NAVIGATION 
-------------------------------------------------- */
.navbar {
	background-color: rgba(255, 255, 255, 0.95);
	width: 100%;
  padding: 5rem 0; 
  z-index: 1000;
}
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  z-index: 1030;
}
#navbarNav {
	width: 100%;
}
.navbar-nav {
  float: right;
  right: 0;
  position: relative;
}
.navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.7);
	font-size: 1.5rem;
	border-bottom: 0 dotted transparent;	
	padding-top: 0.5rem !important;
	padding-right: 1.5rem !important;
	padding-left: 1.5rem !important;
}
#mainnavi_kontakt .nav-link {
	padding-right: 0 !important;
}

/* .navbar-collapse {
	height: 100%;
	width: 100%;
}
.navbar-nav .nav-link.active {
	color: rgba(0, 0, 0, 0.8);
	color: rgba(115, 36, 102, 1); 
	list-style-type: disc;	
}
.navbar-nav .nav-link:hover, 
.navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.8);
	border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
}
.navbar-nav .show > .nav-link, 
.navbar-light .navbar-nav .active > 
.nav-link, .navbar-light .navbar-nav .nav-link.show, 
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.7);
	border-bottom: 2px dotted rgba(120, 110, 102, 1);
}
*/
@media (max-width: 576px) {
.navbar {
  padding: 0.5rem 0; 
}
.navbar-nav .nav-link {
	font-size: 1.15rem;
}
}
@media (min-width: 576px) {
.navbar {
  padding: 1rem 0; 
}
.navbar-nav .nav-link {
	font-size: 1.5rem;
}
}
@media (min-width: 768px) {

}
@media (min-width: 992px) { 

}
@media (min-width: 1200px) {

}

/* START 
-------------------------------------------------- */
#home {
	margin-left: 0;
	margin-right: 0;
	height: 100%;
	position: relative;
	display: block;
	overflow: hidden;
}
#home .content-wrapper {
	padding: 0;
	margin: 0;
	height: 100%;
	position: relative;
}
.maxh {
	height: 100%;
} 
#home h1 {
	color: rgba(111, 111, 111, 1);
	line-height: 0.75;
	font-size: 12vw;
	right: -1vw;
	bottom: 25vh;
	position: absolute;
}
#home h2 {
	font-size: 2.85vw;
	right: -1vw; 
	bottom: 12vh;
	position: absolute;
}

@media (max-width: 576px) {
#home h1 {
	font-size: 19vw;
}
#home h2 {
	font-size: 5.3vw;
}
}
@media (min-width: 576px) {
#home h1 {
	font-size: 17vw;
}
#home h2 {
	font-size: 4.5vw;
}
}
@media (min-width: 768px) {
#home h1 {
	font-size: 19vw;
}
#home h2 {
	font-size: 4vw;
}
}
@media (min-width: 992px) { 
#home h1 {
	font-size: 19vw;
}
#home h2 {
	font-size: 3.5vw;
}
}
@media (min-width: 1200px) {
#home h1 {
	font-size: 14vw;
}
#home h2 {
	font-size: 2.8vw;
}
}

/* SOFORTKONTAKT
-------------------------------------------------- */
#sofortkontakt {
	background-color: rgba(33, 33, 33, 0.7);
	height: auto;
	overflow: hidden;
}
#sofortkontakt .content-wrapper {

}
#sofortkontakt h2,
#sofortkontakt h3,
#sofortkontakt p, 
#sofortkontakt a {
	color: rgba(255, 255, 255, 0.9);
	text-align: right;
	margin-bottom: 0rem;
}
#sofortkontakt h2 {
/* font-size: 1.5rem; */
	display: none;
}
/* VITA
-------------------------------------------------- */
#vita {
	background-color: transparent;
	height: auto;
}
#vita h2 {
	color: rgba(33, 33, 33, 0.3);
	float: left;
	display: none;
}
#vita .portrait {
	padding: 0; 
	margin: 0 0 2rem 5rem;
	float: right;
}

/* VIDEO
-------------------------------------------------- */
#video {
	background-color: transparent;
	position: relative;
	height: auto;
}
#video h2 {
	color: rgba(33, 33, 33, 0.3);
	float: left;
	display: none;
}

/* KONTAKT
-------------------------------------------------- */
#kontakt {
	background-color: transparent;
	margin-left: 0;
	margin-right: 0;
	height: auto;
}
#kontakt h2 {
	margin-top: 2rem;
	margin-bottom: 0rem;
	display: none;
}
#kontakt hr {
	border-top: solid 1px rgba(0, 0, 0, 0.7);
	height: 1px;
	width: 97.5%;
	margin: 2% 0 0;
	clear: both;
}
.kontaktfeld {
	margin: 15px;
	margin-bottom: 4rem;
}
.kontaktdaten {
  background-color: rgba(245, 245, 245, 1);
  color: rgba(33, 33, 33, 1);
  padding: .375rem .75rem;
}

/* KONTAKTFORMULAR
-------------------------------------------------- */
fieldset {
	background-color: rgba(0, 0, 0, 0.1);
	border: 0;
	padding: 0;	
	margin-left: 0;
	margin-right: 0;	
}
form {
	margin: 15px;
}
label {
	font-size: 1rem !important;
	padding-left: 0.25rem;
	margin-top: 0.65rem;
	margin-bottom: 0.1rem;
}


/* KONTAKTFORMULAR
-------------------------------------------------- */
/* Farbe des validierten Eingabefeldes */
/*.field-error,
.field-error a, */
.field-error .control-label,
.field-error .help-block,
.field-error .form-control-feedback,
.field-error .fv-control-feedback {
  color: rgba(0, 0, 0, 0.5);
  font-weight: normal;
}
.field-error .form-control {
  border-color: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.form-group {
    margin-bottom: 0rem;
}
.form-control {
  background-color: rgba(245, 245, 245, 1);
  color: rgba(33, 33, 33, 1);
  padding: .375rem .75rem;
  border: 0px solid rgba(33, 33, 33, 0.2);
  border-radius: 0;
}
/* Farbe des validierten Eingabefeldes */
/*.field-success,
.field-success a, */
.field-success .control-label, 
.field-success .help-block,
.field-success .form-control-feedback,
.field-success .fv-control-feedback {
  color: rgba(0, 0, 0, 1);
  font-weight: normal;
}
.field-success .form-control {
  border-color:  rgba(33, 33, 33, 0.1);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
/* Transparenter Rahmen bei aktivem Inputfeld */
/*
.form-control:focus {
	border-color: transparent !important;
	box-shadow: none;
}
 */

/* SubmitButton deaktiviert bis Formular vollstängig ausgefüllt */
.form-control-feedback {
  pointer-events: auto;
}
.btn-default.disabled {
  background-color:  rgba(33, 33, 33, 0.3);
  border-color:  rgba(33, 33, 33, 0.5);	
}
/* Icon - Platzirerung 
.fv-control-feedback {
  right: 15px;
}
*/
.fv-form-bootstrap4:not(.form-inline) label ~ .fv-control-feedback {
  top: 43px;
}
.fv-form-bootstrap4 .fv-control-feedback {
  width: 38px;
  height: 38px;
  line-height: 38px;
}

/* Placeholder - Farbe */
.form-control::placeholder,
.form-control::-moz-placeholder  {
  color: rgba(0,0,0,.25);
}
/* Datenschutztext inkl. Verlinkung - Ausrichtung */
.form-check-label {
	font-size: 1rem;
	width: 90%;
	display: block;
}
.form-check-label a {
  text-decoration: underline;
}
p.hinweis {
	margin: 10px 0px !important;
	font-size: 1rem;
}
/* Warnhinweis - Abstände */
small.form-control-feedback {
	padding-top: 0.5rem;
	padding-left: 0.25rem;
	display: block;
  font-size: 50%;
}
/* Warnhinweis - Zeichen */
form .glyphicon {
  position: absolute; 
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Warnhinweis - Zeichenpositionierung */
.col-form-label {
  padding-top: 0;
	padding-bottom: 0;
}
.fv-form-bootstrap4:not(.form-inline) .form-check ~ .fv-control-feedback {
  top: -7px !important;
}

/* KONTAKTFORMULAR - BESTÄTIGUNG AUF DER SEITE
-------------------------------------------------- */
#mail_summary {
	width: 100%;	
}
#mail_summary p {
	margin: 1rem;	
}
#mail_summary .btn-default {
	margin: 0 1rem;	
}
.table-bordered {
  border: 0px solid #eceeef;
}
.table-bordered td, .table-bordered th {
  border: 0px solid #dee2e6;
	font-size: 1rem;
}
.table-striped tbody tr:nth-of-type(2n+1) {
  background-color: rgba(0, 0, 0, 0.02);
}
.table-striped tbody td:nth-of-type(2n+1) {
	width: 40%;
}

/* BUTTON
-------------------------------------------------- */
.btn-default {
  background-color:  rgba(33, 33, 33, 1);	
  border-color:  rgba(33, 33, 33, 0.1);	
  color:  rgba(255, 255, 255, 0.9);
  width: 100%;
}

/* IMPRESSUM
-------------------------------------------------- */
#impressum {
	background-color: rgba(33, 33, 33, 0.05);
	margin-left: 0;
	margin-right: 0;
	overflow: hidden;
}
#impressum h2 {
 text-align: left;
 margin-bottom: 5rem;
}
#impressum p {
	text-align: left;
	text-align: justify;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
	margin: 20px 0px;	
}
#impressum li {
	font-size: 1rem;
	line-height: 2;
}
/* DATENSCHUTZ
-------------------------------------------------- */
#datenschutz {
	background-color: rgba(33, 33, 33, 0.05);
	margin-left: 0;
	margin-right: 0;
	overflow: hidden;
}
#datenschutz h2 {
 text-align: left;
 margin-bottom: 5rem;
}
#datenschutz h4 {
	font-size: 1rem;
	font-weight: bolder;
}

#datenschutz p {
	text-align: left;
	text-align: justify;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
	margin: 20px 0px;	
}
#datenschutz li {
	font-size: 1rem;
	line-height: 2;
}
/* Footer
-------------------------------------------------- */
footer {
	background-color: rgba(33, 33, 33, 1);
	height: 60px;
	position: relative;
	z-index: 9999;
}
.nav-footer ul {
	list-style: none;
	margin: 0;
	padding-top: 5px;
	float: right;
}
.nav-footer li {
	float: left;
	margin-left: 0px;
}

.nav-footer a, .nav-footer a:link {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
}
.nav-footer a:hover {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}
.nav-footer .nav-link {
  padding: 1rem 1rem;
	font-size: 1rem;
}

@media (max-width: 576px) {
footer {
	width: 100%;
}
.nav-footer ul {
  margin-left: -35px;
  float: left;  
}
.nav-footer .nav-link {
  padding: 0.5rem 0.5rem;
	font-size: 0.95rem;
}
}

@media (min-width: 576px) {
footer {
	width: 100%;
}
.nav-footer ul {
  margin-left: -35px;
  float: right;
}
.nav-footer .nav-link {
  padding: 0.5rem 0.5rem;
}
}

@media (min-width: 768px) {
footer {
	width: auto;
}
.nav-footer .nav-link {
  padding: 1rem 1.5rem;
}
}

@media (min-width: 992px) { 
footer {
	width: auto;
}
.nav-footer .nav-link {
  padding: 1rem 0 1rem 3rem;
	font-size: 1rem;
}
}

@media (min-width: 1200px) {
footer {
	width: auto;
}
.nav-footer .nav-link {
  padding: 0.5rem 0 0.5rem 2.4rem;
	font-size: 1.5rem;
}
}