/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme example child theme.
Author: Nick
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
Text Domain: Oceanwp-child
*/

/* Parent stylesheet should be loaded from functions.php not using @import */
/* von keckser*/

.topbar-content { display: flex; justify-content: center; width:100%; font-size:16px;}
.topbar-content a { width:33%;}
.topbar-content a img { width:20px;}
.top-bar-left {float: none;}
.home div#outer-wrap.site.clr div#wrap.clr main#main.site-main.clr header.page-header { display: none;}
#main #content-wrap {padding-top: 10px;}

html {
 font-weight: 300;
 font-family: Helvetica Neue,Calibri,Corbel,Helvetica,Roboto,Droid,sans-serif;
 text-rendering: optimizeLegibility;
 -webkit-text-size-adjust: 100%;
 -moz-text-size-adjust: 100%;
}

#copyright  {display: none;}
#primary {width:80%; float:right;display:inline-block;}
.widget-area.sidebar-primary {display:inline-block;	width:19%; float:left;}
@media only screen and (max-width: 1000px) { 
.widget-area.sidebar-primary {display:none}
#primary {width:100%; float:left;display:inline-block;}
.mobile-menu .fa {font-size:24px; font-weight:600;}
.mobile-menu  .oceanwp-text {font-size:24px; }
.mobile-menu  .oceanwp-close-text {font-size:24px; }
 }


.n2-ow {text-shadow: 3px 3px 7px #000,10px 10px 15px #000, 15px 15px 25px #000, 7px 7px 20px #000, 6px 8px 20px rgba(0, 0, 0, 1)!important; text-transform: uppercase!important;}
#site-header { position: sticky;	 top: 0; /* required */	box-shadow: 0 1px 3px rgba(50,50,50,0.2);transition: all 0.3s; animation:slide-down 0.7s;}
.rahmen { box-shadow: none; border: 1px solid grey; width: 900px; box-shadow: 0px 0px 10px 0px black;animation: floatText 5s infinite alternate ease-in-out; margin:0 auto;}
.rahmen2 { box-shadow: none; border:none; width: 900px; margin:0 auto;min-height:300px; }
.beitragsbild-links { box-shadow: none; border:none; width: 100%; float:left; position:absolute;}
.beitragsbild-rechts { box-shadow: none; border:none; width: 100%; float:right; position:absolute;}
.beitragsbild { box-shadow: none; border: 1px solid grey; width: 100%;}
.beitragsbild img { width: 100%; height:350px!important;object-fit: cover;background-position: top !important;}
.bildbeitrag { width: 100%; height:300px!important;object-fit: cover;background-position: top !important;}
.bildbeitrag-links { width: 100%; height:300px!important;object-fit: cover;background-position: top !important; position: fixed; left:-50%; top:0px; z-index:9;}
.bildbeitrag-rechts { width: 100%; height:300px!important;object-fit: cover;background-position: top !important; position: fixed; left:45%; top:0px; }
.beitragtext {padding:10px; }
.beitragsueberschrift-links {width:80%;padding:10px; margin-top:20px; box-shadow: none; border: 1px solid black; background:white;position: relative; opacity:0.8;text-transform: uppercase;font-weight:300; }
.beitragsueberschrift-rechts {width:80%;padding:10px; margin-top:20px; text-align:right; left:-50%; box-shadow: none; border: 1px solid black; background:white;position: relative	; opacity:0.8; text-transform: uppercase;font-weight:300; }
h1.beitragsueberschrift-links a {text-decoration-line:none!important;}
h1.beitragsueberschrift-rechts a {text-decoration-line:none!important; }
.beitragtext-rechts {padding:10px; position: relative; left:60%; clear:both;z-index:1}
.beitragtext-links {padding:10px; position:relative; text-align:left; z-index:0}
.schreibtexte { margin:10px;}
.block-inhalte { padding:20px;}
.firmenlogo2 { object-fit: contain; padding:0px; padding-bottom:7px; float:left; }
.firmenlogo2 img {margin-right:10px; }
.firmentext {width:230px;padding-top:25px; float:left;}
.content-rechts { z-index:0; background:white;}
.kopfrechts {width:250px;;display:block;margin-left:auto}
.bildlinks {width:30px;float:left;}
.texte {width:180px;float:left;padding-top:15px;}
.zeiten {font-size:12px; padding:5px 0 0 25px; margin:0 ;line-height:1; float: left;
 clear: right;position:left; }
.anruf {font-size:15px!important; padding:0; margin:0;line-height:1; float: left; clear: left; posiiton:relative; padding-left:10px;}
.obensymbol { object-fit: contain; width: 110px; height:60px; }
#footer h5 { color:white;;}
#footer-widgets .footer-box a { color: #fff; font-size: 14px;}
.footer-logo {display:flex;vertical-align:sub;}
.footer-logo2 {display:flex; padding-bottom:15px; }
.footer-logo2 img {display:flex; width:50px; height: 50px; }
.firmenlogo { object-fit: contain; width: 65px; padding:0px; padding-bottom:7px; float:left; }
.firmenlogo2 { width: 40px; padding:0px; margin:0 10px 0 0 ; }
.firmentext2 {font-size:1.2em;vertical-align:9px; padding-top:7px; font-family:castellar;line-height: 1.1;}
.footer-telefon { width:20px;fill:white;}
.footer-email { width:20px;fill:white;}
.footer-texte { line-height:1.2;}
.texte-bild { }
.texte-bild a { }
 [class^="icon-"],
 [class*=" icon-"] { display: inline-block; width: 1.5em; height: 1.5em; stroke-width: 0; stroke: currentColor; fill: currentColor;margin-right:7px; } 
.abstand { margin:5px}
.draw { position:relative; width:35px; height:35px;}
.draw svg { }
.path1{	 position: absolute;top:4px;left:5px;font-size:14px; color:white; }
.path2{	position: absolute; display:inline-block; top:-1px;left:-1px; height:32px;width:32px; color:white;}
#kreis {width:15px; height:15px; font-size:15px; color:white; float:left;}
svg:hover #kreis { transform: scale(1.05);}
.kasten {display: flex; align-items:center; line-height:1.5em; color:white; font-size:14px;}
.kasten-top {display: flex; align-items:center; line-height:1.5em; color:red; font-size:14px;float:right;}
.kasten2 {display: flex; align-items:top; color:white; font-size:15px; }
.kasten-top2 {display: flex; align-items:center; line-height:1.5em; color:red; font-size:14px;}
.gross {font-size:1.3em;}
span.topbar-content a:nth-child(2){width:60%;}
.custom-logo-link img {position:absolute; top:-20px;z-index:1;margin: 0px 0 0 30px;}
#top-bar-wrap {z-index:2;width:80%;margin-left:20%;}
.bildernachweis {display:block; width:75%; height: 70px; margin:5px auto;padding-top:50px;}
.kontakt { display: inline-block;	float:left; width: 45px; margin: 0;	padding: 0 0 0 10px;
}
#anfragetext{display: inline-block;	float:left;	width:auto;	margin: 0 0 0 10px;	padding: 0 0 0 10px;
}
div.spaltezusammen input
{border: 2px solid darkgrey;
 border-radius: 4px;
 padding-left:10px;
}
div.spaltezusammen input[type=text], select, textarea {
 padding-left: 30px;
 resize: vertical;
 width:70%;
}

div.spaltezusammen input[type=text]:focus {
 border: 3px solid #555;
}
div.spaltezusammen select {
 border: 2px solid darkgrey;
}

.spaltelinks {
	vertical-align:top;
	float:left;
	width:50%;
 margin:0;
	padding: 2px 0 0 0;
}
.spalterechts {
	vertical-align:top;
	width:50%;
	float:left;
	margin:0;
	padding:0;
}
.spaltevoll {
 width: 100%;
	vertical-align:top;
	margin:0;
	padding:0;
}
.spaltezusammen {
	width:90%;
 margin: 0 auto;
}
.spaltereihe {
	display:table;
width:100%;
}
.spaltereihe::after {
	 content: "";
 display: table;
 clear: both;
}
.texteoben {
 margin-left:60px;
}
.form_hint {
 background: #d45252;
 border-radius: 3px 3px 3px 3px;
 color: white;
 margin-left: 8px;
 padding: 1px 6px;
 z-index: 9;
 position: absolute;
 display: none;
}
.form_hint, .required_notification {
 font-size: 14px;
}
.form_hint::before {
 content: "\25C0";
 color: #d45252;
 position: absolute;
 top: 1px;
 left: -6px;
}
* === Form hints === */
.form_hint {
	background: #d45252;
	border-radius: 3px 3px 3px 3px;
	color: white;
	margin-left:8px;
	padding: 1px 6px;
	z-index: 999; /* hints stay above all other elements */
	position: absolute; /* allows proper formatting if hint is two lines */
	display: none;
}
.form_hint::before {
	content: "\25C0";
	color:#d45252;
	position: absolute;
	top:1px;
	left:-6px;
}

input.submit {
	background-color: #68b12f;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 0 #eee;
	color: white;
	font-weight: bold;
	padding: 6px 20px;
	text-align: center;
	text-shadow: 0 -1px 0 #396715;
background: #393A50;
	
}
input.submit:hover {
	opacity:.85;
	cursor: pointer; 
}
input.submit:active {
	border: 1px solid #20911e;
	background: #393A50;
	}	
div.spaltezusammen textarea {
 border: 2px solid darkgrey;
 border-radius: 4px;
 padding-left: 10px;
}

.spaltezusammen input:focus + .form_hint {display: inline;}
.spaltezusammen input:required:valid + .form_hint {background: #28921f;}
.spaltezusammen input:required:valid + .form_hint::before {color:#28921f;}
::-webkit-input-placeholder {
 color: grey;
}
.required-field::after {
 content: "*";
 color: red;
}

div.spaltezusammen input:required, .spaltezusammen textarea:required, div.spaltezusammen textarea {
	background: #fff url(assets/images/asterisk.svg) no-repeat 98% center; background-size:15px;
}

.notwendig input:focus:valid, .notwendig textarea:focus:valid {
	background: #fff url(assets/images/valid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #5cd053;
	border-color: #28921f;
}
div.spaltezusammen .wpcf7-validates-as-required input:focus:invalid, .spaltezusammen textarea:focus:invalid { 
	background: #fff url(assets/images/invalid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #d45252;
	border-color: #b03535;
}
div.spaltezusammen .wpcf7-validates-as-required {
	background: #fff url(assets/images/asterisk.svg) no-repeat 98% center; background-size:15px;
}
div.spaltezusammen .wpcf7-validates-as-required input:focus:invalid, .spaltezusammen .wpcf7-validates-as-required textarea:focus:invalid { 
	background: #fff url(assets/images/invalid.png) no-repeat 98% center;
	box-shadow: 0 0 5px #d45252;
	border-color: #b03535;
}
.wpcf7-response-output {
 animation: fadeOut 2s forwards;
 animation-delay: 5s;
}

@keyframes fadeOut {
 from {opacity: 1;}
 to {opacity: 0;}
}
.wpcf7-submit {
background-color:green!important;
}
.knopf {
display:inline-block;
margin:0 5%;
width: 160px;
text-align:center;

}
.knopf img {
margin:0 auto;
height: 30px;
text-align:center;
float:none;
}

#aussen2 { display: inline-block; padding: 4px; width: 95%; height: auto; text-align: center;}
#einst, #zweist, #dreist {display:inline-block; width: 25%; height: 100%;text-align:center; margin: 15px 30px;box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.21);}
#einst:hover, #zweist:hover, #dreist:hover {background:lightgrey;transition: all 2s;}
#einst img , #zweist img , #dreist img {opacity:.6; width:50%;}
#einst img:hover , #zweist img:hover , #dreist img:hover {opacity:1;transition: all 1s; }


.buch1 li{display: flex; flex-direction: row;}

.buch {width: 30%;}
.buch2 {width: 50%;}


input.submit:active {
	border: 1px solid #20911e;
	background: #393A50;
	}	


/* verstecken von optionalen Feldern */




@media only screen and (max-width: 1000px) {
	

.topbar-content img { width:20px;}
.topbar-content a img { width:20px;}
#top-bar-wrap { height:50px; width:50%;margin-left:50%;}
.n2-ss-item-content.n2-ow {text-shadow: 3px 3px 7px #000, 7px 7px 20px #000, 6px 8px 20px rgba(0, 0, 0, 1);font-size:3.5vw!important; }
.pagesidebar, body.page-two-column:not(.archive) #primary .entry-header {float:none; width: 100%;}
 .verschwinde {display:none;}
.kontaktrechts a {float:right}
.site-branding-text {}
.site-footer div.wrap {width:100%; margin:0 auto; }
eingangseitetext {position:relative;float:left; z-index:6;}
.eingangsseite { margin-left:0; margin-right:0; background:#05164d; border-top: 2px solid white; width:100%;} 
.fertig a, .fertig a:link, .fertig a:visited, .fertig a:hover, .fertig a:active { color:white;underline:none;}
.fertig { width: 50%; background-color: #003D85; float: left; border-radius: 0px; background-image: linear-gradient(45deg, #041341, #04248C); text-align: center; vertical-align: middle; height: 150px;
}
.rahmen {width: 99%; margin: 0 auto; }
.rahmen2 { box-shadow: none; border:none; width: 99%; margin:0 auto;min-height:400px; clear:both; display:block; box-shadow: 0px 0px 10px 0px black;;margin-bottom:30px;}
.beitragsbild-links { clear: both; box-shadow: none; border:none; width: 100%; position:relative; }
.beitragsbild-rechts { clear: both; box-shadow: none; border:none; width: 100%; position:relative;}
.bildbeitrag-links { clear: both; width: 100%; height:200px!;display:block; position: relative; z-index:9;left:0px;}
.bildbeitrag-rechts { clear: both; width: 100%; height:200px!; text-align:center; display:block; position: relative; left:0px; }
.beitragsueberschrift-links {font-size: 1.3em;font-weight: 400;padding:10px; width:300px; box-shadow: none;position: fixed; left: 50%; top:-11%; text-align:center; margin-left: -150px; text-decoration:none;	}
 .beitragsueberschrift-rechts {font-size: 1.3em;font-weight: 400;padding:10px; width:300px; box-shadow: none; ;position: fixed; left: 50%; top:-11%; text-align:center; margin-left: -150px; text-decoration:none; }
.beitragtext-rechts {padding:10px; position: relative; clear:both;z-index:1; left:0;}
.beitragtext-links {padding:10px; position: relative; z-index:0}
#site-logo #site-logo-inner a img { }
.custom-logo {width: 20%; }
.site-branding {margin:0; padding:0; }
.site-branding-text {float:left; display:inline-block; }
.spaltelinks {width:100%;}
.spalterechts { width:100%;}
.spaltevoll { width: 100%;}
.spaltezusammen {}
}

@media only screen and (max-width: 700px) {
	#site-logo #site-logo-inner a img {max-width: 40%;width:70%}
	.mobile-right{ margin-right:10px}
	#site-logo #site-logo-inner { position:absolute;	top:-10px;	left:14px;}
	#site-logo.has-responsive-logo .responsive-logo-link { }
	.spaltezusammen {width: 100%;}
	#anfragetext {max-width: 80%;}
	.beitragsbild img { height:200px!important;}

#aussen2 { display: inline-block; padding: 4px; width: 95%; height: auto; text-align: center;}
#einst, #zweist, #dreist {display:inline-block; width: 70%; height: 100%;}

}
@media only screen and (min-width: 700px) {
#site-navigation-wrap {display:none;}
.sidebar-box.widget_nav_menu {background:pearl;padding: 5px; margin-right:10px;}
.sidebar-box.widget_nav_menu li {padding: 5px; font-size:1.3em;}
.sidebar-box.textwidget {background:pearl;padding: 5px; font-size:1.2em; }
}