@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400&display=swap');

@import url("prettyPhoto.css") screen;
@import url("hoverex-all.css") screen;

main {
	margin-top: 5rem;
}

/********** BRANDING ***********/

.branding1  {
  font-family: 'Special Elite';
  font-size: 2em;
  color: #7088a4;
  line-height: 1.0;
  text-shadow: 0.3px 0.3px black;
}

.branding2  {
  font-family: 'Special Elite';
  font-size: 0.8em;
  letter-spacing: 0.2em;
  color: #7088a4; 
  line-height: 1.0;
  text-shadow: 0.3px 0.3px black;
}

/******* // BRANDING ***********/

/********** START **************/

.branding {
  position: absolute;
  z-index: 100;
  font-family: 'Special Elite';
  margin-top: -2em; 
  margin-left: 6em;
  /*background-color: yellow;*/
}

.branding1_start {
  font-family: 'Special Elite';
  font-size: 8em;
  text-shadow: 2px 2px black;
  color: #7088a4;
}

.branding2_start {
  font-family: 'Special Elite';
  font-size: 3.2em;
  letter-spacing: 0.4em; 
  margin-top: -1.0em;
  text-shadow: 3px 3px black;
  color: #7088a4;
}

.nav_start {
  margin-top: 1.1em;
  font-family: 'Segoe UI', sans-serif; */
  
}
  
.nav_start a {
  /* font-family: 'Gothic A1', sans-serif; */
  font-family: 'Segoe UI', sans-serif; 
  font-size: 1.5em;
  color: #7088a4;
  color: white;
  background-color: #7088a4;
  margin-right: 0.2em;
  padding: 0.3em;
  font-weight: 800;
  text-decoration: none;
}

.nav_start a:hover {
  /* color: red; */
  color: red;
}

/******* // START **************/

/********** NAVIGATION **********/

.navbar {
	padding-top: 2rem;
}

.navbar-nav {
	/* min-height: 70px;*/
	padding-top: 10px;
	margin-top: 1.4em;
}

.nav-item {
	color: white;
	font-weight: 700;
	font-size: 1.0em;
	text-transform: uppercase;
	padding-left: 0.3em;
	padding-right: 0.3em;
}

.nav-item > a {
	color: #7088a4;
	text-decoration: none;
}

.nav-item > a:hover { 
  /* color: red; */
  color: white;
}

.nav-item.active > a {
	color: red;
	text-decoration: none;
}

.hdn {
	display: none;
}

/********** EVENT **********/
.event {
  background-color: #eee;
  padding: 12px;
  margin-bottom: 10px;
}

.event h2 {
  font-size: 1.8em;
  font-weight: 700;  
  color: #000000;
  margin-top: 5px;    
}

.event a {
  text-decoration: none;
}

.event h3 {
  font-size: 1.4em;
  font-weight: 400;  
  color: #000000;
  margin-top: -5px;  
}

.event .key {
  font-size: 1.0em;  
  font-weight: bold;
  padding: 0;
  line-height: 24px;
  color: #384452;
  min-width: 6em;
  padding-left: 12px;
}

.event .value {
  font-size: 1.0em;  
  padding: 0;
  line-height: 24px;
  color: #384452;
  padding-left: 12px;
}

.event p {
	margin-top: 0;
	padding-top: 0;
}

.event .img {
	min-width: 200px;
}

.event hr,
.termin {
  border-top: 0.1em solid #333;
  margin-top: 0;
  margin-bottom: 0;
}


/********** FLIP CARD **********/

 /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 235px; 
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  height: 380px; 
  margin: 10px; 
  padding: 0px; 
  display: inline-block;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
  font-weight: bold;
}

/* Style the back side */
.flip-card-back {
  background-color: black;
  color: white;
  transform: rotateY(180deg);
}

.card-body .card-text {
  color: black;
  font-weight: bold;
}

.card-back-body {
  color: white;
  padding: 10px;
}

.articlelink .card-text {
  color: white;
  font-size: 1.2rem;
}

.articlelink {
  /* color: red; */
  color: #7088a4;
  text-shadow: 2px 2px black;
}

.articlelink2 {
  /* color: red; */
  color: #7088a4;
  font-size: 0.8rem;
  text-decoration: none;
}

.card-text {
  color: white;
}

/******* // FLIP CARD **********/

/********** BLOCKQUOTE *********/

blockquote {
	font-family: 'Gothic A1';
    background: #fffdf5;
	background: #ddd;
	color: #3f3f5a;
	font-weight: 400;
	font-size: 1.0rem;
	max-width: 800px;
	line-height: 1.6;
	position: relative;
	margin: 0 4rem -0.8rem 4rem;
	padding: 2rem;  
    border-left: 0px solid #eee;
}

blockquote:before,
blockquote:after {
	position: absolute;
	color: #f1efe6;
	color: #3f3f5a;
    font-size: 8rem;
	width: 4rem;
	height: 4rem;
}

blockquote:before {
	content: '“';
	left: -5rem;
	top: -2rem;
}

blockquote:after {
	content: '”';
	right: -5rem;
	bottom: 1rem;
}

cite {
  margin-left: 4rem;
	line-height: 3;
	text-align: left;
}
/******* // BLOCKQUOTE *********/


/********** FOOTER *************/
/*
footer {
    display: block;
	unicode-bidi: isolate;
}
*/
  .talr {
	text-align: end; 
  }
/******* // FOOTER *************/

p {
	padding: 0;
	margin-bottom: 12px;
	font-weight: 400;
	font-size: 15px;
	line-height: 24px;
	color: #384452;
	margin-top: 10px;
}

/******* KONTAKTFORMULAR *******/
.yform {
	margin-top: 3em;
}

.form-helper {
	
}

.form-group {
	margin-bottom: 1em;
}

.checkbox label {
    margin-left: 3em;	
	margin-top: 0em;
	margin-bottom: 3em;
	padding-top: 1em;
}
.control-label {
    margin-top: 0em;	
}

.form-control {
	
}
input[type='checkbox'] {
	margin-top: 0em;
	margin-left: -3em;
	margin-right: 2em;
	margin-bottom: 0em;
	padding-top: 10em;
}

/******* // KONTAKTFORMULAR ****/

/********** HERO-SLIDER ********/

.slider { position: relative; }
.slider .slides li { position: relative; }
.slider.small-controls .flex-direction-nav a { margin-top: -20px; }
.slider.small-controls .flex-control-nav { display: none; }
.hero-slider {
	padding: 0px;
	position: relative;
}

.hero-slider .slides { overflow: hidden; }
.hero-slider .slides li {
	height: 650px;
	position: relative;
	background-size: cover !important;
}

.hero-slider .slides li .row {
	position: relative;
	z-index: 2;
}

.hero-slider .slides li h3 { font-size: 30px; }
.hero-slider .slides li h2 {
	line-height: 1;
	margin-bottom: 33px;
	padding-bottom: 7px;
}

.hero-slider .slides li h1 {
	line-height: 1;
	font-size: 60px;
	margin-bottom: 33px;
}

.work-slider { margin-top: 28px; }
.work-slider .slides li { height: 400px; }
.slides li .fadeUp { opacity: 0; }
.slides li {
	position: relative;
	color: #fff;
}

.slides li p, .slides li a { color: #fff; }
.slides li .slide-content {
	position: relative;
	z-index: 3;
}

.slides li h1, .slides li p {
	padding-left: 100px;
	padding-right: 100px;
}

.slides li .overlay {
	background-color: #000;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.4;
	z-index: 2;
}

.slides li .btn-theme {
	border: none;
	background-color: #b2c85f;
	color: #384452;
}

.slides li .btn-theme:hover, .slides li .btn-theme:focus, .slides li .btn-theme:active, .slides li .btn-theme.active {
	background-color: #384452;
	color: #fff;
}

.hero-slider .slides li .slide-content img { max-height: 500px; }
.hero-slider .flex-direction-nav a {
	height: 60px;
	width: 60px;
	font-size: 0;
}

.hero-slider .flex-direction-nav a:before {
	position: absolute;
	font-size: 40px;
	display: block;
	top: 15px;
	left: 23px !important;
	right: auto !important;
}

.flex-next, 
.flex-prev,
.flex-direction-nav,  
.flex-control-nav {
	display: none;
}

.hero-slider .flex-direction-nav a.flex-prev:before { left: 20px !important; }
@media all and (max-width: 1100px) {
	.hero-slider .slides li .slide-content img { max-height: 300px; }
}

.background-breathe {
	-webkit-animation: burnsIn 16s ease infinite alternate;
	-moz-animation: burnsIn 16s ease infinite alternate;
	animation: burnsIn 16s ease infinite alternate;
}

.background-breathe .slide-content {
	-webkit-animation: burnsOut 16s ease infinite alternate;
	animation: burnsOut 16s ease infinite alternate;
	-moz-animation: burnsOut 16s ease infinite alternate;
	position: relative;
	top: 30px;
}

@-webkit-keyframes burnsIn {
	from {
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
		-ms-transform: scale(1,1);
	}

	to {
		-webkit-transform: scale(1.2,1.2);
		transform: scale(1.2,1.2);
		-ms-transform: scale(1.2,1.2);
	}

}

@-webkit-keyframes burnsOut {
	from {
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
		-ms-transform: scale(1,1);
	}

	to {
		-webkit-transform: scale(0.8,0.8);
		transform: scale(0.8,0.8);
		-ms-transform: scale(0.8,0.8);
	}

}

@-moz-keyframes burnsIn {
	from {
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
		-ms-transform: scale(1,1);
	}

	to {
		-webkit-transform: scale(1.2,1.2);
		transform: scale(1.2,1.2);
		-ms-transform: scale(1.2,1.2);
	}

}

@-moz-keyframes burnsOut {
	from {
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
		-ms-transform: scale(1,1);
	}

	to {
		-webkit-transform: scale(0.8,0.8);
		transform: scale(0.8,0.8);
		-ms-transform: scale(0.8,0.8);
	}

}

@keyframes burnsIn {
	from {
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
		-ms-transform: scale(1,1);
	}

	to {
		-webkit-transform: scale(1.2,1.2);
		transform: scale(1.2,1.2);
		-ms-transform: scale(1.2,1.2);
	}

}

@keyframes burnsOut {
	from {
		-webkit-transform: scale(1,1);
		transform: scale(1,1);
		-ms-transform: scale(1,1);
	}

	to {
		-webkit-transform: scale(0.8,0.8);
		transform: scale(0.8,0.8);
		-ms-transform: scale(0.8,0.8);
	}

}





/******* // HERO-SLIDER ********/

/******* // EXTRA EXTRA LARGE xxl ***/
@media (min-width: 1400px) {
  .branding {
    margin-top: -20em; 
    margin-left: 6em;
  }
  .branding1_start {
    font-family: 'Special Elite';
    font-size: 8em;
    text-shadow: 2px 2px black;
  }
  .branding2_start {
    font-family: 'Special Elite';
    font-size: 3.2em;
    letter-spacing: 0.4em; 
    margin-top: -1.0em;
    text-shadow: 3px 3px black;
    color: #7088a4;
  }
}

/******* // EXTRA LARGE xl **/
@media (max-width: 1399px) {
  .branding {
    margin-top: -23em; 
    margin-left: 6em;
  }
  .branding1_start {
  	font-size: 7em;
    text-shadow: 0.7px 0.7px black;
  }  
  .branding2_start {
    font-size: 3em;
    letter-spacing: 0.26em;
    text-shadow: 0.3px 0.3px black;
  }
}

/******* // LARGE lg ********/
@media (max-width: 1199px) {
  .branding {
    margin-top: -23em; 
    margin-left: 6em;
  }
  .branding1_start {
  	font-size: 6em;
    text-shadow: 0.7px 0.7px black;
  } 
  .branding2_start {
    font-size: 3em;
    letter-spacing: 0.26em;
    text-shadow: 0.3px 0.3px black;
  }
  .nav_start a {
    font-size: 1.6em;
	line-height: 2.3em;
  } 
}

/******* // MEDIUM md *******/
@media (max-width: 991px) {
  .branding {
    margin-top: -23em; 
    margin-left: 6em;
  }
  .branding1_start {
  	font-size: 5em;
    text-shadow: 0.7px 0.7px black;
    text-shadow: 0.3px 0.3px black;
  }
   .branding2_start {
    font-size: 2.5em;
    letter-spacing: 0.26em;
    text-shadow: 0.3px 0.3px black;
  }
  .nav-item {
	  font-size: 1.6em;
  }
  .nav_start a {
    font-size: 1.5em;
	line-height: 2.3em;
  }
  .hdn {
	display: block;
  }
  .branding1 {
  	font-size: 2.5em;
  } 
  .branding2 {
    font-size: 1.0em;
  }  
  .talr {
	text-align: end; 
  }
}

/******* // SMALL sm ********/
@media (max-width: 767px) {
  .branding {
    margin-top: -20em; 
    margin-left: 4em;
  }
  .branding1_start {
  	font-size: 4em;
    text-shadow: 1px 1px black;
    text-shadow: 0.5px 0.5px black;
  }
  .branding2_start {
    font-size: 2em;
    letter-spacing: 0.26em;
    text-shadow: 0.3px 0.3px black;
  }
  .nav-item {
	  font-size: 1.6em;
  }
  .nav_start a {
    font-size: 1.5em;
	line-height: 2.3em;
  }
  .hdn {
	display: block;
  }
  .branding1 {
  	font-size: 2.0em;
  } 
  .branding2 {
    font-size: 0.8em;
  }  
  .talr {
	text-align: start; 
  }
}

/******* // EXTRA SMALL *****/
@media (max-width: 575px) {
  .branding {
    margin-top: -15em; 
    margin-left: 4em;
  }
  .branding1_start {
  	font-size: 2.5em;
    text-shadow: 0.7px 0.7px black;
    text-shadow: 0.3px 0.3px black;
  }
  .branding2_start {
    font-size: 1.2em;
    letter-spacing: 0.26em;
    text-shadow: 0.3px 0.3px black;
  }
  .navbar-nav {
	  margin-left:-2em;
  }
  .nav-item {
	  font-size: 1.4em;
  }  
  .nav_start a {
    font-size: 1em;
	line-height: 2.3em;
  }
  .hdn {
	display: block;
  }
  .branding1 {
  	font-size: 1.5em;
  }  
  .branding2 {
    font-size: 0.5em;
  }
  .talr {
	text-align: start; 
  }
}