@charset "utf-8";
/* CSS Document */

/* colors
------------------------------------------------*/
:root {
	--color-1: #fff; /* weiß */
	--color-2: #93867b; /* hellbraun */
	--color-2b: #e5dcd3; /* hellbraun 2 */
	--color-3: #8f371a; /* hellbraun */ 
	--color-4: #96ba00; /* apfelgrün*/
	--color-5: #f7f4f1; /* hellbeige-warm | Hintergrund */
	--color-6: #003624; /* british racing green 023f2b */
	--color-7: #0179c8; /* cyan 0087e0*/
	--color-8: #2d3e4f; /* Dunkelgrau | Text 3d4f62 */
}
.color1{color: var(--color-1);}
.color2{color: var(--color-2);}
.color4{color: var(--color-4);}
.color6{color: var(--color-6);}
.color7{color: var(--color-7);}

.bgcolor2b{background-color: var(--color-2b);}
.bgcolor6{background-color: var(--color-6); color: var(--color-1);}

/* fonts
--------------------------------------*/
@font-face {  /* open-sans-700 - latin */
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v34-latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/* basics
--------------------------------------------------- */
html { scroll-behavior: smooth; }
body, html, header, div, ul{margin:0; padding:0;}
img { max-width: 100%; height: auto; } 
body{
	color: var(--color-1);
	font-family: 'Open Sans', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-weight: 700;
	font-size: 26px; line-height: 160%;
	background-color: var(--color-5);
}
.max850auto{ max-width: 850px; margin: 0px auto 0px auto; z-index: 1;}	
.m50auto{margin: 0 auto; width: 50%;}
@media all and (max-width : 960px) { .m50auto{width: 90%;}}
.width100{ width: 100%;}	
.padding1{	padding: 50px 20px 50px 20px;}
.padding2{	padding: 20px 20px 50px 20px;}

/* Text 
--------------------------------------------------- */
strong{font-weight: 700;}
/* h1 im Hero Text */
h2{ font-size: 54px; color: var(--color-7); line-height: 110%;}
/* ul Haupttext*/
.listev1{ margin-left: 40px}
.listev1 li{ margin-bottom: 25px;}

@media all and (max-width : 960px) { 
	h2{ font-size: 34px; color: var(--color-7); line-height: 110%;}
	body{ font-size: 20px;}
	.listev1{ margin-left: 5px}
}



.link1, .datenschutz a {color: var(--color-2); text-decoration: none; border-bottom: solid 3px #9d989e;}

.link2{ color: var(--color-2);}
.link2:hover{ color: #bf8700;}

/* Navigations leiste flexbox
--------------------------------------------------- */
.flex-container {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	max-width: 1700px;
	margin: 0 auto;
}
#flex-navbar{ margin: 0 30px; align-items: center;}	
			
#flex-navbar div:nth-of-type(1) {flex-grow: 1; padding-left: 4%;}
#flex-navbar div:nth-of-type(2) {flex-grow: 3; text-align: right; line-height: 70%;} 
#buttonkennenlernen{margin-left: 20px;}
.menukontakt{display: none;}

@media all and (max-width : 1100px) {
	
/*	#flex-navbar div:nth-of-type(2) {flex-grow: 1; text-align: right;} */
}
@media all and (max-width : 1100px) {
	#buttonkennenlernen{display: none;}
	.menukontakt{display: inline;}

	#flex-navbar { flex-direction: column; padding-top: 0px;}
	#flex-navbar div:nth-of-type(1) {padding-left: 0%;}
	#flex-navbar div:nth-of-type(2) {padding: 0px 0 15px 0; text-align: center; font-size: 24px; line-height: 170%;}
	#navbar a { padding: 0 5px;}
}	
				
@media all and (max-width : 500px) { label {  padding: 0px 0 10px 10px;} }


/* blocks
--------------------------------------------------- */
#navbar {
	overflow: hidden;
	background-color: rgba(28,30,36,0.7); /* Seesternewerfer */
	background-color: rgba(0,35,55,0.7);
	background-color: rgba(0,100,155,0.8);
	background-color: rgba(2,63,43,0.8);
	color: var(--color-1);
	position: fixed; /* Set the navbar to fixed position */
	top: 0; /* Position the navbar at the top of the page */
 	width: 100%; /* Full width */
	z-index: 20;
}
.nav10{color: var(--color-1); text-decoration: none;}

/* Hero Bild 
--------------------------------------*/
#hero{
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-size: cover;
	background-position: center;
	justify-content: center;
	z-index: 10;
}
.herohome{ background-image: url('../img/computerwissen.v12.jpg');}
.heropodcast{ background-image: url('../img/podcast.v1.jpg');}
.herofleger{ background-image: url('../img/juergen-fleger.v3.jpg');}
.heroschulungen{ background-image: url('../img/schulungen.v3.jpg');}

/* Hero Button 
__________________________________________________ */			
.buttonClassv2 {
	background: transparent;
	text-decoration: none;
	display: inline-block;
	padding: 20px 50px;
	margin: 0 20px;
	color:rgba(255, 255, 255, 1);
	font-weight:bold;
	border-radius: 6px;
	background: rgba(2,63,43,0.9);
	-webkit-transition: all 2.5s ease-out;
	-moz-transition: all 2.5s ease-out;
	-o-transition: all 2.5s ease-out;
	 transition: all 1.5s ease-out;
}
.buttonClassv2:hover { background:linear-gradient(rgba(0,110,170,0.9), rgba(0,130,200,0.9)); transform: scale(1.1);}

/* Hero Schriftfeld
--------------------------------------*/
.fontsize1{ font-size:33px;}
.fontsize2{ font-size:26px;}
#heroh1{padding-top:20%; line-height: 20%;}

@media all and (max-width : 1200px) {
	.fontsize1{ font-size:28px;}
	.fontsize2{ font-size:20px;}
	#heroh1{padding-top:30%; line-height: 30%;}
}
@media all and (max-width : 800px) {
	.fontsize1{ font-size:22px;}
	.fontsize2{ font-size:18px;}
	#heroh1{padding-top:70%; line-height: 30%;}
}

h1 {font-size: 5vw; color: rgba(255,255,255); margin:0; padding:60px 20px 60px 20px;line-height: 90%;}
@media all and (max-width : 1200px) {h1 {font-size: 70px; line-height: 120%; text-align: center;}}
@media all and (max-width : 450px) {h1 {font-size: 55px;}}	



/* Schulungen */
#schulungen{ background-color: var(--color-2b);  color: var(--color-3);}
#schulungen h2{ color: var(--color-6);}

/* Live-Community & Podcast */
#community{ width: 100%; padding: 50px 0; background-color: var(--color-4);  color: var(--color-1);}

/* Medialetter */
#medialetter{ background-color: var(--color-6);  color: var(--color-1);}
#medialetter h2{ color: var(--color-1);}
#medialetter a{ color: var(--color-1);}
#medialetter li{ margin-bottom: 15px;}

/* Kontakt */	
.kontakt{ width: 100%; background-color:var(--color-5); color: var(--color-8);}
.kontakt h2{ color: var(--color-8);}
.kontakt a{ color: var(--color-8); text-decoration: none;}
.kontakt-1{
	max-width: 850px;
	margin: 0px auto 0px auto;
	padding: 80px 20px 50px 20px;
	z-index: 1;
}


/* navigation */

#down1, #down2, #down3, #down4{ cursor: pointer;}	


/* to top button
------------------------------------------------------------------------- */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #e00f15;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {background-color: #555;}


/* buttons
------------------------------------------------------------------------- */			
.custom-btn {
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}		

.btn-15 {
	background: -webkit-linear-gradient(#e46958, #e00b11);
	background: -o-linear-gradient(#e46958, #e00b11);
	background: linear-gradient(#e46958, #e00b11);
	border: none;
	z-index: 1;
	text-decoration: none;
	font-size:22px;
	padding: 9px 20px;
	margin: 10px 0 10px 0px;
	color:rgba(255, 255, 255, 1);
	font-weight:bold;
	border-radius: 10px;
}
.btn-15:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
	border-radius: 10px;
	background:linear-gradient( #3181ac, #205977);
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.3s ease;
}
.btn-15:hover { color: #fff;}
.btn-15:hover:after { left: 0; width: 100%;}
.btn-15:active { top: 2px;}

/* 16 */
.btn-16 {
background:-webkit-linear-gradient(#A5BE00, #5f8700);
background:-o-linear-gradient(#A5BE00, #5f8700);
background:linear-gradient(#f5f5f5, #f1f1f1);
  border: none;
  z-index: 1;
text-decoration: none;
font-size:22px;
padding: 12px 20px 16px 20px;
margin: 10px 0 10px 0px;
color: var(--color-3);
font-weight:bold;
border-radius: 10px;
}
.btn-16:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
	border-radius: 10px;
	background:linear-gradient( #3181ac, #205977);
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.5s ease;
}
.btn-16:hover { color: #fff;}
.btn-16:hover:after { left: 0; width: 100%;}
.btn-16:active { top: 2px;}