/* CSS Document */


/* ========== Thank you for looking at this code ========== */
/* ========== WARNUNG! COPYRIGHT BY FLOVANADAM.COM | SWITZERLAND ========== */


/* https://youtu.be/tcpRdrVrtz0?t=50m39s ((DESIGNIDEE)) */

/* ======== SCHRIFTEN EINBETTEN ======= */	
@import 'https://fonts.googleapis.com/css?family=Open+Sans|Slabo+27px';

/* ======== RESET MACHEN ======= */
	
	* {
		box-sizing: border-box;     /*       *  gleich alles auf der Seite*/
	  /*   damit padding und border nicht addiert werden*/
		padding:0;
		margin:0;
	}
	
/* ======== allgemeine definitionen ======= */	
	
	body {
		font-family: 'Open Sans', sans-serif;
		font-size:18px;
		
	}

/* ======== DIV DESIGNEN ======= */
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}	
	

	div {
		/*border:2px orange solid;*/
		
	}
/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #C41E2A;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}
	/* ======== ID Definieren ======= */
	
	#container {
		/*border:2px #F77087 solid; */
		width:100%;
		height:100vh;
		
	}

	#links {
		display:block;
		width:80%;
		height:100vh;
		float:left;
		/* border:2px #1DE51D solid; 
		background-image: url("../bilder/lupe.jpg");*/
		background-size: cover;
		/*background-attachment: wenn das bild stehen bleiben soll*/
		background-position: center;
		position: absolute;
		transition: all 0.5s ease-in-out;
		background-color: aqua;
	}
	
	#rechts {
		min-height: 100%;
		Width:40%;
		height: 100%;
		align-content: flex-end;
		float:right;
		padding-bottom: 4rem;
		transition: all 0.5s ease-in-out;
		position:absolute;
		z-index: 5;
		right:0;
		background-color:white;
		bottom:0;
		overflow:scroll;
	}
#inhalt {
	Width:100%;
		
		height: 100%;
		
z-index: 6;
padding:2rem;
	
	
}
.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
	#rechts #haupttitel {
		font-family: 'Slabo+27px', sans-serif;	
		font-size:1.6rem;
		font-weight:bold;
		padding-top: 13%;
	}
	
	#rechts #untertitel {
		font-family: 'Slabo+27px', sans-serif;	
		font-size:1.6rem;
		padding:2rem 0rem 1.4rem 0rem;
		color:grey;
	}
	
	#rechts #text {
		column-count: 2;
		column-gap: 3rem;
		text-align:justify;
		padding-bottom: 4rem;	
	}
	#rechts #text2 {
		
		text-align:justify;
		padding-bottom: 4rem;	
	}
#myVideo {
  position:fixed;
top:0;
left:0;
  height:100%;
  min-height: 400px;
  filter:contrast(100%);
/*transform: translateY(0%) translateX(-50%);*/
z-index:1!important;
	background-color: brown;
}

#head {
	
}
.head img {
	width:20%;
	position: fixed;
	top:0rem;
	left:10rem;
	z-index: 10000;
}

		
		
/* ========== ========== MENU MOBILE ========== ==========*/

.containernav2 {
  		
  		cursor: pointer;
		right:2rem!important;
		top:20px;
		position: fixed;
	background-color: rgba(196,30,42,1.00);
		/*background-color:rgba(255,255,255,1.00);
		border-radius:5px;*/
		width: 55px;
		padding:0px 0px 0px 10px;
		height: 55px;
		display: inline-block;
		z-index: 80000!important;
		 transform: skewX(-10deg);
}


.bar1, .bar3 {
  margin-left: 5px;
	width: 25px;
  height: 5px;
  background-color: white;
	/*background-color: transparent;*/
  margin: 6px 0;
  transition: 0.4s;
	
}

.bar2 {
  width: 35px;
  height: 5px;
  background-color:white;
	/*background-color: transparent;*/
  margin: 6px 0;
  transition: 0.4s;
	
}

.active44 .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
	 background-color: rgba(196,30,42,1.00);;
	width: 35px;
}

.active44 .bar2 {opacity: 0;
}

.active44 .bar3 {
 background-color: rgba(196,30,42,1.00);;
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
	width: 35px;
}

.dropdown44-btn {
		display: block;
		border: none;	
}

.active44 {
  background-color: white;
  color: white!important;

}

.none {
	display:block;
}
#hamburger {
	display:none;
}
.dropdown44-container {
  		display: block;
		z-index: 10001;
  		background-color:rgba(69,69,69,0.95);
		position: fixed;
		top:0;
		right:0;
		padding:0rem;
		margin:0;
		width: 0%;
		height: 100%;
		border-top: 6rem solid  #C41E2A;

		
		
  transition: 0.8s;
}



.ulmenubutton2 {
		width: 100%;
text-align: center;
		position: absolute;
display: block;
	justify-content: space-around;
		margin:0rem;
		padding:0rem;

	
}

.limenubutton2 {
		list-style:none;		
		color:black;
		text-decoration:none; 
		font-weight:bold;
		width: 100%;
		margin: 1rem 0rem;
}

.ulmenubutton2 a {
background-color: rgba(193,39,45,1);
			/*color:rgba(193,39,45,1);*/
	color:#F2F2F2;
	border: 2px solid rgba(193,39,45,1);
			font-weight: bold;
			font-size: 25px;
			letter-spacing: 0.1rem; 
			text-transform: uppercase;
			float:left;
			text-decoration:none;
			display: block;
			margin:0.5rem 0rem;
			padding:1rem 1rem 1rem 6rem;
		
			width: 100%;
			transition: 0.6s;
			overflow: hidden;
			cursor: pointer;
}

.ulmenubutton2 a:hover, .ulmenubutton a:focus {
 		border: 2px solid #FFFFFF;
			transition: 0.3s;
			/*background-color:cornflowerblue;*/
			background-color: rgba(193,39,45,1);
}



.limenubuttonaktiv2
{
 		border: 2px solid #FFFFFF!important;
			transition: 0.3s;
			/*background-color:cornflowerblue;*/
			background-color: rgba(193,39,45,1);
}

.flovanadam img {
	
	margin-left:80%;
	bottom:4rem;
	position: absolute;
	display: flex;
transition: all 0.5s ease-in-out;
}
.flovanadam img:hover {
	 /*transform: skewX(-10deg);*/
  transform: rotate(7deg) translate(-8px, -8px);
transition: all 0.5s ease-in-out;
}
.copystyle {
		position: absolute;
		padding:1rem;
		width:100%;	
		background-color: rgba(193,39,45,1);
		text-align: center;
		bottom: 0rem;
	justify-content: center;
	
		font-size:15px;
}
	
	.copystyle a {
		 color:black;
}
	
	.copystyle a:hover {
		 color:white;
}

.mobilefoot {
	
}

.mobilefoot2 {
	display:none;
}


.divbox {
	background-color: rgba(193,39,45,1);
	width: 100%;
border-radius: 5px;
	 transform: skewX(0deg);
	
}

.divbox:hover {
box-shadow: 5px 10px 18px #888888;
	 transform: rotate(0deg) translate(-2px, -2px);
	
}
.zuruckdiv {
		
	width: 140px;
padding:1rem;
	 transform: skewX(-10deg);
	
}


.zurucka {
		justify-content: center;
	align-content: center;
	text-align: center;
color:rgba(193,39,45,1);
	padding:1rem;
	text-decoration: none;
text-transform: uppercase;
	font-size: 25px;
	font-weight: bold;
	
}
.zuruckdiv:hover, .zurucka:hover {
background-color: white;
	color:black;
	

}

.h3bilder{
	justify-content: center;
	align-content: center;
	text-align: center;
	padding:1rem;
	color:white;
	text-decoration: none;
text-transform: uppercase;
}
.h3bilder img {
	width: 100px;
	height: 100px;
}

.linkdownload{
	font-size: 1rem!important;
		text-decoration: none;
text-transform: uppercase;
}
.linkdownload:hover{
color:rgba(193,39,45,1)!important;
}

.justy {
	justify-content: space-evenly;
}

.menuclass {
	width: 100%;
	position: relative;
	z-index: 40;

	
}

.menuh2{
	text-align: left;
}
.menuul{
	padding: 0;
	
	display:flex;

	
}.menuli{
	
	display:flex;
	padding:5px;
	
}
.followp{
	padding:1rem;
	color:black;
	text-decoration: none;
}


.followlink {
	text-decoration: none;
}
.menuli img {
	width: 50px;
	height: 50px;
}

.followlink img:hover{
	 transform: rotate(0deg) translate(-2px, -2px);
}

#menubox{
	width: 100%;
	
	height: auto;
	
	flex-wrap: wrap;
	display:flex;
	 list-style-type: none;
	margin:  2rem 0;
}
.menuboxli{
	width: 200px;
	height: 200px;
	text-decoration: none;
	background-color: rgba(193,39,45,1);
	text-align: center;
	margin:3px;
	box-shadow: 5px 10px 8px #888888;
	padding:0;
	border-radius: 5px;

}
.menuboxli:hover{

	text-decoration: none;
	
	text-align: center;
	margin:3px;
	box-shadow: 5px 10px 18px #888888;
	 transform: rotate(0deg) translate(-2px, -2px);

	
}


.menuboxa{
	text-decoration: none;
	display:block;
	text-align: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}

.menuboximg{
	text-decoration: none;
	display:block;
	text-align: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	padding:1rem;
	
}

.menuboxp {
	font-size: 20px;
	color:white;
	padding-top:0.5rem;
	transform: none;
	
	
}
.menuboxa img{
	padding-top:3rem;
	
	transform: none;
}

.contactul{
	text-decoration: none;
	list-style-type: none;
	padding:1rem;
}

.contacli{
	text-decoration: none;
	list-style-type: none;
	margin:1rem 0;
	padding-left:2rem;
}
/* ========== MEDIA SCREEN  1580px ========== */
/* ========== APPLE NOTEBOOK 16und13zoll ========== */
	@media screen and (max-width:1580px) 
	{

	body {
		/*background-color:palevioletred;ZUM ARBEITEN*/ 
}

	#rechts #haupttitel {
			
		font-size:1.2rem;
		
		padding-top: 20%;
	}
	
	#rechts #untertitel {
		
		font-size:1.2rem;
		
		
	}
	
.head img {
	width:20%;

	left:5rem;

}	
.dropdown44-container {
  		display: block;
		z-index: 10001;
  		background-color:rgba(69,69,69,0.95);
		position: fixed;
		top:0;
		right:0;
		padding:0rem;
		margin:0;
		width: 0%;
		height: 100%;
		border-top: 6rem solid  #C41E2A;

		
		
  transition: 0.8s;
}
.flovanadam img {
	
z-index: 100000;
}
		
.menuboxli{
	width: 150px;
	height: 150px;
}
		
.menuboxp {

	padding-top:0.5rem;
	
}
.menuboxa img{
	padding-top:1.5rem;

}
		
		
		
		
}

/* ========== MEDIA SCREEN  1200px ========== */
/* ========== APPLE NOTEBOOK 13zoll ========== */
	@media screen and (max-width:1200px) 
	{

	body {
		/*background-color:lightgreen;ZUM ARBEITEN*/ 
}

	
}


/* ========== MEDIA SCREEN  1080px ========== */
	@media screen and (max-width:1080px) 
	{
		
	body {
		/*background-color: darkorchid;ZUM ARBEITEN*/
}
	#rechts #haupttitel {
			
		font-size:1rem;
		
		padding-top: 50%;
	}
	
.ulmenubutton2 {
		width: 100%;
text-align: left;
		
display: block;
	justify-content: space-around;


	
}
.ulmenubutton2 a {

		
			font-size: 25px;
			letter-spacing: 0.1rem; 
	
			float:left;
			text-decoration:none;
			display: block;
			margin:0.5rem 0rem;
			padding:1rem 1rem 1rem 6rem;
			width: 100%;
	
}


}	
	
/* ========== MEDIA SCREEN  960px ========== */
/* ========== APPLE tablet (kleineres) ========== */
	@media screen and (max-width:960px) 
	{
		

body {
			/*background-color: red;*/
			font-size:30px;
		}
		
		#rechts {
			width:80%;
			transition: all 0.5s ease-in-out;
		}
		
		#links {
			width:20%;
			transition: all 0.5s ease-in-out;
		}
		
		#rechts #text {
		column-count: 1;
		column-gap: 3rem;
		text-align:justify;
		padding-bottom: 4rem;	
		}
		
		#rechts #haupttitel {
			
		font-size:1.6rem;
		
		padding-top: 15%;
	}
	
	#rechts #untertitel {
		
		font-size:1.2rem;
		
		
	}
		#text2{
			font-size:1.2rem;
		}
	.ulmenubutton2 a {

			font-weight: bold;
			font-size: 20px;
			letter-spacing: 0.1rem; 
			
			float:left;
	
			margin:0.5rem 0rem;
			padding:1rem 1rem 1rem 6rem;
		
		
		
}
.mobilefoot {
	display:none;
}

.mobilefoot2 {
	display:block;
}

		#hamburger {
	display:block;
}	
		.zuruckdiv {
	margin-top:10rem;
	
}
		h3 {
			font-size: 20px;
		}

.h3bilder img {
	width: 100px;
	height: 100px;
}

	}

	
/* ========== MEDIA SCREEN  450px ========== */
	@media screen and (max-width:450px) 
	{

	body {
		/*background-color:aqua;ZUM BEARBEITEN */
}
		.ulmenubutton2 a {

			font-weight: bold;
			font-size: 15px;
			letter-spacing: 0.1rem; 
			
			float:left;
	
			margin:0.5rem 0rem;
			padding:1rem 3rem 1rem 1rem;
		
		
		
}
	
		#rechts {
			width:100%;
			transition: all 0.5s ease-in-out;
		}
		
		#links {
			display:none;
			
		}
		
		#rechts #text {
		column-count: 1;
		column-gap: 3rem;
		text-align:justify;
		padding-bottom: 4rem;	
		}
		
		#rechts #haupttitel {
			
		font-size:1rem;
		
		padding-top: 40%;
	}
	
	#rechts #untertitel {
		
		font-size:1.2rem;
		
		
	}
		#text2{
			font-size:1.2rem;
		}
	.ulmenubutton2 a {

			font-weight: bold;
			font-size: 20px;
			letter-spacing: 0.1rem; 
			
			float:left;
	
			margin:0.5rem 0rem;
			padding:1rem 1rem 1rem 6rem;
		
		
		
}
		
		#myVideo {
display:none
}
		.zuruckdiv {
	margin-top:5rem;
	
}
		
.head img {
	width:30%;

	left:2rem;

}
		
	.menuboxli{
	width: 140px;
	height: 140px;
	

}


.menuboxp {
	
	padding-top:0.5rem;

}
		.contactul{
	text-decoration: none;
	list-style-type: none;
	padding:1rem;
}

.contacli{
	text-decoration: none;
	list-style-type: none;
	margin:0rem 0;
	padding-left:0rem;
}
	}