/* 
Theme Name:Erdbeer Custom-01
Theme URI: http://themes.mediendesign-quer.com/erdbeer
Author: mediendesign-quer
Author URI: http://mediendesign-quer.com
Description: Erdbeer customisation fuer die mediendesign-quer Website, mit Gutenberg Support.
Das Theme wird auf dem windows 10 bearbeitet, teste FSE
es hat
Gutenberg ready
masonry - grid im Blog
header-animation -startseite im widget
Version:1.3.0
License:
License URI:
Tags: 
Text Domain:erdbeercustom
 */
 

 /* Google Fonts Import 
---------------------------------------------
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin,latin-ext);

@import url('https://fonts.googleapis.com/css?family=Lora'); 

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);*/
/* Reset */

/*@import url(css/normalize.css);*/

*{
   margin:0px;
   padding:0px;
  }
			 
html{
   min-height:101%; 
   font-size:100%;
   }
   
   a:link {color:#880016;}
   a:visited {color:#880016;}
      a:hover {color:#880016;}
	  a:focus{color:#880016;}
   a:acitive {color:#880016;}

/* ---------------------------------
        Allgemeine Styles 
 ---------------------------------- */
 
/* #0A2941 - dunkelblau
 Schriftart: Lora 
 Links: #0A2941, unterstrichen */

body{
    font-family: Lora, serif;
     color:; /*wird überschrieben von weiter unten , es greift überall dort, wo nix überschrieben ist, footer, 1. spalte, block
	  datum und by admin*/
	font-size:1.3rem;
				
/*	background-color:blue;*/
/*	background:url(images/hg.png); greift*/
	overflow-x:hidden;
	 
	 -webkit-hyphens: auto;
	   -moz-hyphens: auto;
	    -ms-hyphens: auto;
			hyphens: auto;
			
}
p {
	margin-bottom: 0px;
	color:#880016;
}


/* -------------------------------------
             die Überschriften 
----------------------------------------*/	 

h1,h2,h3,h4,h5,h6 /*greift für Überschriften auf Seiten */
{
     font-family:Lora,serif;
	 color:#880016;
     font-weight:500;
	
	}		
h1{
	
	
	margin: 10px 0 34px;
   font-size:3.0rem !important;
   line-height:1.375;
   text-align:center;
   font-weight:500 !important;

  
 
}
h2{
   margin: 3.5rem 0 2rem;
   font-size:2.5rem;
   line-height:1.375;
   
}  
h3{
  margin: 3.5rem 0 2rem;
  font-size:2.1rem;
  line-height:1.275 !important;
 
}   
h4{
	 margin: 3.5rem 0 2rem;
    font-size:1.9rem;
    line-height: 1.25 !important; 
   }   
h5{ 
   margin: 3.5rem 0 2rem;
  font-size:1.6rem;
  line-height: 1.25 !important; 
  font-weight:700;
  }   
h6{
	 margin: 3.5rem 0 2rem;
   font-size: 1.4rem;
    font-style:italic;
line-height: 1.35 !important; 
	 padding-left:30px;
	 padding-bottom:10px;
	border-bottom:1px dotted #215568;
   }
 	   


/* ----------------------------------------------------------
    =WordPress Core & Alignments 
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}
/**/
.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 10px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}


.wp-caption {

   border-bottom:1px dotted silver;
	 -moz-border-radius: 0px;
    -khtml-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
	
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 0px;
    text-align: center;
	
	margin-top:25px !important;
	margin-bottom:25px !important;
	
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
	
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    
font-size:14px;
font-size:0.875rem;
  
   margin:0;
	
    padding: 10px 4px 5px;
	color:#000;
}


/*------------------------------------------------
 *  Diverser Kleinrkam 
 -------------------------------------------------*/

 .post-title{font-size:14px;}
 cite{}

blockquote{

width:90%;
margin:20px;
padding:20px;

padding-left:40px;
border-left:15px solid #337a7f;
border-radius:5px;


background:#fafafa;
}
blockquote p:before {
  color: #16ABB6;
  content: open-quote;
   content: "\201C";
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.10em;
  vertical-align: -0.4em;
  font-family:Georgia,serif;

}
blockquote p {
  display: block;
  color:#08585E!important; 
 
  line-height:1.7;
  font-size:1.2rem;
font-family:Lora,serif;
}
@media screen and (min-width: 320px) and (max-width: 1024px ){
blockquote{

width:100%;
padding-left:10px;
margin-left:2px;
font-size:0.9rem;
}

}

dt {
	font-weight: bold;
}
b, strong {
	font-weight: bold;
}
dfn, em, i {
	font-style: italic;
}
s, strike, del {
	text-decoration: line-through;
}
address {
	margin: 0 0 34px;
	font-size: 18px;
	font-size: 1.125rem;
	line-height: 1.6;
}


/*----- für codezeilen -----*/

pre {
background:none;
padding: 10px;
border-radius: 5px; 
overflow: auto;
margin: 0 0 15px 0;
width: 100%;
font-family: Consolas, Monaco, monospace;
font-size:1.3rem;
color:#c94147;
margin-bottom:20px;
}

code, kbd, tt, var {
	font-family: Consolas, Monaco, monospace;
	font-size: 14px;
	font-size: 0.8125rem;
}
abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}
mark, ins {
	background: #d9e9fc;
	text-decoration: none;
}
sup,
sub {
	position: relative;
	vertical-align: baseline;
	height: 0;
	font-size: 75%;
	line-height: 0;
}
sup {
	bottom: 1ex;
}
sub {
	top: .5ex;
}
small {
	font-size: 13px;
	font-size: 0.8125rem;
	letter-spacing: 0px !important;
}
big {
	font-size: 125%;
}
figure {
	margin: 0;
}
img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}
dt {
	padding: 0 0 7px;
	font-weight: bold;
	
}
dd {
	margin: 0 0 20px;
}
dl dt {
	font-size:20px;
	
	font-weight: bold;
	line-height:1.5;
	color: #162626;
	font-style:italic;
}
dl dd {
	margin: 0 0 34px;
	line-height:1.65;
}


 
/*authorbox
#author-box img.avatar {
	float:left;
	margin:0 10px 5px 0;
	padding:3px;
	-moz-border-radius: 15px;
       border-radius: 15px;
}
#author-box p{
    font-size:1.0rem;
	text-align:left;
	font-family:Lora,serif;
	
}
#author-box{ 
     width:60%;height:auto;
	 padding-left:10px; 
	 padding-top:10px;
	 padding-bottom:15px;
	 padding:5px;
	 margin-top:40px;
}
#authorbox a{}
#author-box a:link{
     border:0;
	 border-bottom:1px dotted #337a7f;
	 color:#616161;
}
#author-box a:hover{
     border:0;
	 border-bottom:0px dotted #337a7f;
	 color:#337a7f;
	 text-decoration:none;
}

.box3{ background-color: #efefef;
    border-width: 1px;
    border-color: #999999;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	padding:5px;
	
   }

img{
  border:none;
 }

#pagination{
    color:blue;
}
 
 */
 
 .wp-block-query-pagination{border:3px solid burlywood !important; }
/*=============== Der Blog ===============*/


.blog.wp-block-group{border:3px dotted burlywood;}

.wp-block-query{
	border:px solid teal;
    width:100%; 
	margin:0px auto;
	}/*wp-block-query und wp-block-post-template sind gleich groß*/
	
	/* Override the display: inline-block that is set by the the block editor, as it is 
causing long titles with links to overflow. */
.wp-site-blocks h2.wp-block-post-title a {
	display: initial;
}

 h2.wp-block-post-title{
	   margin:0px auto;
	   margin-top:25px;
	   margin-bottom:25px;
	   padding-left:0px;
	   padding-right:0px;
	   border:px solid blue;
	   width:70%;
	   color:#880016;
	   -ms-word-wrap: break-word;
	word-wrap: break-word;
	   }
	   
	   /*== Links Blog Post == */
	   
h2.wp-block-post-title a:link, h2.wp-block-post-title a:visited{
	
	color:#880016; /*dunkelblau*/
	text-decoration:2px dotted burlywood;
	
}
h2.wp-block-post-title a:hover, h2.wp-block-post-title a:focus{
	
	color:#880016;
	text-decoration: underline;
	
	
	
	
}
	   
   .entry-content.wp-block-post-content{
	   margin-top:0px !important;
	   border-top:px dotted #ccc;
	   border-bottom:px dotted #ccc;
	   }/*
   
   krass krank,, wenn ich hier einen Rand hinzufügen*/

   .wp-block-post-content{}
   
   
@media screen and (min-width: 450px) and (max-width: 1100px ){
	
 h2.wp-block-post-title{
	   margin:0px auto;
	   margin-top:20px;
	   margin-bottom:20px;
	  /* border:1px solid blue;*/
	   width:90%;
	   }
	
}  
   
 ul.wp-block-post-template{
	  /* border:2px solid red;*/
	   margin:0px auto;
	   }
     
/* == entire site == */

 .wp-site-blocks{
	 border:px solid blue;
	 margin:0px auto; 
	 padding:0px;
	 max-width:100%!important;
	background:#f5f5f5;
	 } 
 
   
/*Block Header template-part:header ======
=========================================*/

.site-header.wp-block-template-part{
	
	background:green;
	height:50%;           /*geht für alle devices, sieht man die navigation*/
	
} 
	
	
	
.wp-block-template-part ul li a:link,.wp-block-template-part ul li a:visited{
	
	color:#0D1137;
	
	
}	
/*== wp-block-post-content ==   */

.wp-block-post-content a:link {
	
	color:#880016;
	text-decoration:underline;
	
}

.wp-block-post-content a:hover,.wp-block-post-content a:active  {
	
	color:#880016; /*dunkelviolett*/
	text-decoration:none;
	
}

.wp-block-post-content ul li,.wp-block-post-content ol li {
	
	color:#880016;
	background:#EDD4B6;
	
	
}

.wp-block-post-content ul li a:link,.wp-block-post-content ul li a:visited {
	
	color:#880016;
	text-decoration:underline;
	
}

.wp-block-post-content ul li a:hover,.wp-block-post-content ul li a:active{
	
	color:#0D1137;
	text-decoration:none;
	
}
@media screen and (min-width: 320px) and (max-width: 1100px ){
	
	.wp-block-post-content ul li,.wp-block-post-content ol li {
	
	color:#0D1137;
	background:#EDD4B6;
	width:100% !important;
	list-style-type:disk;
	
}
	
	
	
	
}


/*========== Columns ===============*/

.wp-block-columns.has-background {
     padding: 0.8em 0.8em;
/*	padding:0; cool, damit bekomme ich einen schmalen Header, wenn ich will, */
margin-bottom:0px!important;
	 }
 .wp-block-columns {
    box-sizing: border-box;
    display: flex;
    flex-wrap: ; /*flex-wrap:wrap , das macht einen Zeilenumbruch, den hab ich weg, die Navi ist nach unten gerutscht. */
   margin-bottom: 0em; 
   border:px solid fuchsia;
   margin-top:0px!important;
   }

   
 /*  .wp-block-cover, .wp-block-cover-image {
    align-items: center;
    background-position: 50%;
    background-size: cover;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    min-height: 430px;
    padding: 0em;
    position: relative;
    width: 100%;
	border:3px solid teal;
	margin-top:0px !important;
}
	*/
/*============== Custom Logo=========*/

img.custom-logo{
	padding-top:0px;
	border:px solid blue;
	} /*das greift*/

.wp-block-site-logo{
	padding-left:30px;
}
/*================== Template Part has background ====
======================================================*/
	
.wp-block-template-part.has-background {
 margin-bottom:0 !important;
 margin-top:0 !important;
 padding:0em 0em !important;

} /*ist das Original, macht bei farbigen Hintergrund diesen padding dazu, welchen ich herauslösche */

header.wp-block-template-part {
	/*background:green !important;*/
	margin-bottom:0px!important;
/*	position:fixed !important;
	margin:0px auto;
	width:100% !important;
	z-index:1000;
	das wäre ein sticky header  https://blog.hubspot.com/website/sticky-menu-wordpress*/
	
	

	}/*template part header*/
	
	footer.wp-block-template-part{background:;} /*ha, das greift*/



  /*=============== Navigation ===========
  ========================================*/

 .wp-block-navigation{
	 border:px solid blue!important;
	 }
 
 /*navigation - erste -reihe*/
 li.wp-block-navigation-link{
	 background-color: rgba(255, 255, 255, 0.1);
	 margin-left:-9px;
	 margin-right:-9px;
	 }
	 
 li.wp-block-navigation-link a{
	padding:0.5rem;
	0.5rem; 
	border:px solid gray;
	color:#0D1137!important;
	font-weight:bold;
	font-family:Arial;
    margin-top:10px;
	}
	
 li.wp-block-navigation-link a:hover{ 
 background-color: rgba(255, 255, 255, 0.1);
 font-size:1.3rem;color:#000!important;
 }
 
 /*container-submenu*/
 
 li.wp-block-navigation-item ul{  background-color: rgba(162, 162, 162, 0.3)!important;
	 padding:-200px!important;
	 }  
	 
/*a: active*/
 .wp-block-navigation-item.current-menu-item{
	 border-bottom:2px solid white !important;
	 }
	 
 /*submenü*/
 
.wp-block-navigation-submenu{
	font-weight:bold; 
	background:;
	font-family:Arial;
	margin-top:10px;
	}
 

 
 /*==========================
 ========Suche Block stylen ===============*/
 
 .wp-block-search .wp-block-search__input {
    border: 1px solid #949494; border-radius:5px !important; background-color: rgba(255, 255, 255, 0.3)!important;
    flex-grow: 1;
    min-width: 3em;
 padding: 8px;}
 .wp-block-search .wp-block-search__button {
   background-color: rgba(255, 255, 255, 0.3)!important;
    border: 1px solid #ccc;
	border-radius:5px;
    color: #32373c;
    margin-left: .625em;
    padding: .375em .625em;
    word-break: normal;
}
 
/*===============================
==========Content ==============*/

.entry-content{
	width:;
	margin:0px auto; 
	border:px dotted black;
	background:; 
	line-height:1.6;
	}
.wp-block-post-content{
	width:55%; /**/
	background:;
	margin-top:-px!important;
	color:#0D1137!important; /* #000099 dunkelblau websafe*/
	
	
	border:px dotted black;
	}
	
	.wp-block-separator.is-style-wide {
    border-bottom-width:3px;
	
	}
	.wp-block-separator{ width:55%; padding-top:20px;}
   
@media screen and (min-width: 768px) and (max-width: 1100px ){
	
.wp-block-post-content{
	width:55%; 
	background:lightblue;
	}
	
}

/*================= Group where .has background =============
============================================================*/

.wp-block-group:where(.has-background) {
 padding:0em 0em;
}

/*scheisse, das ist es .. wenn der Gruppe Block eine Farbe hat, wird dieser Rand hier automatisch hinzugefügt, den hab ich jetzt weg. 
.wp-block-group:where(.has-background) {
 padding:1.25em 2.375em
}*/
.wp-block-group:{
	border:3px dotted burlywood!important;
	}
	
	
/*==============wp-block-columns=========*/
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:not(:first-child) {
    margin-left: var(--wp--style--block-gap,0em);
}
	
 /*===============  Überschriften ===========
 
 */ 
 
 
 
 p{border:	px solid burlywood; margin-bottom:20px !important; padding-left:20px;}
 

 
 /* ====== Listen punkte im post-content 
 ================================================ */
 
 
 .wp-block-post-content ul,.wp-block-post-content ol
 {
	 
	font-family:'Lora',serif !important;
     background:;
     font-size:1.3rem !important;
     line-height:1.5 !important;
     margin:0px auto!important;
	 
 }
 
 .wp-block-post-content ul:last-child,.wp-block-post-content ol:last-child
 {
	margin-bottom:20px !important; 
	 
 }
 
 .wp-block-post-content li{
	 
  	 font-family:'Lora',serif !important;
     font-size:1.3rem !important;
     line-height:1.5 !important;
     margin:0px auto!important;
     color:black;
     font-style:italic;
    
 }
  .wp-block-post-content ul li:last-child{
	  
	  
  }
  .wp-block-post-content li a:link, .wp-block-post-content li a:visited{color:fuchsia;}
.wp-block-post-content li a:active,.wp-block-post-content li a:hover {
	
	color:burlywood;
	
	
}
.wp-block-post-content a.more-link{color:#880016 ;} /*ich glaub das greift*/
.wp-block-post-date{color:#880016;}

.site-footer.wp-block-columns ul li a{color:#880016;}

 @media screen and (min-width : 320px)and (max-width:480px ){
	 
	 
 }
/*=== Ende Listenpunkte == greift für die Punkte */


.wp-block-columns li a{
	
	color:#880016 !important;
	list-style-type:none !important;
	
}
.wp-block-columns li a:link {
	
	color:;
	
}

 
 .wp-block-column.border-header{border-right:2px dotted red !important ;background:#a2a2a2;}/*so, das greift tatsächlich
 für den template-part-header , nur das column hier hat einen rechten roten Rand,
 und ich habe es aber manuell in den Code Editor hinzugefügt, aber es geht*/
 .wp-block-columns.border-header{background:#a2a2a2;}
 .wp-block-columns.header{}
 

 

  
  
  .wp-block-columns{background:;border:px dotted blue;padding:px!important;}
  .bottom{padding-bottom:-5px!important;}
  .wp-block-column{border:px solid yellow;margin-bottom:px !important;padding-left:}
  

/*Achtung, Gruppe Block und Columns Block sind die meisten, 
zu denen weil sie so oft vorkommoen, vergebe ich klassen, z.B. border-header, content, 
diese schreibe ich in die Theme Dateien rein, wie page.html, oder header.html,*/
 
 

   .wp-site-blocks{background:;}
.wp-block-group.content, .blog{border:px dotted blue!important; background:!important;}
.wp-post-content{border:px dotted blue!important; background:f5f5f5!important;margin-top:0px!important;}
     main{border:px dotted blue!important; background:#f5f5f5!important;}
	 
    .content{margin:0px auto;border:px solid green;margin-top:px;}/*
	diese sch.. ränder von gutenberg, wp-block-template-part war immer unten ein rand, anscheinend war das der 
	obere Rand von content, keine Ahnung, mit -35 geht es weg */
   

  
 
   .wp-block-query-pagination{}
  

 
/*-----------------------------------------
    Post - navigation - single.php
------------------------------------------*/

.post-navigation{
    font-size:1.0rem;
}
.postlinks{
   padding:5px;
   float:left;
   width:45%;
 }
 .postlinks:hover,.postrechts:hover{
    background:#fafafa;
}
 .postlinks a:link ,.postrechts a:link{
    font-weight:bold;
	color:#616161;
}
.postlinks a:hover,.postrechts a:hover{
   text-decoration:none;
   color:#337a7f;
}
.postrechts{
     padding:5px;
	 float:right;
	 width:45%;	
}
/*-----------------------------------------
      Pagination - blog - index.php 
------------------------------------------*/

.wp-block-query-pagination{text-align:center;}
.navigation.pagination{
}
.navigation{
   width:100%;
 }
.pagination{
    text-align:center;
}
.nav-links{
  margin:5px;
  padding:5px;
 }
 
.page-numbers{
  font-size:1.2rem;
  color:#616161;
  font-weight:bold;
   padding:10px 20px 10px 20px;
   margin:5px;
  border:1px solid #337a7f;
 }

.page-numbers a:link{ 
   color:#659b9e !important; 
 }
 .page-numbers.current{
   color:#4db1ac;
   border:1px solid #4db1ac;
 }
a:hover.page-numbers {
    text-decoration:none;
	font-family:Lora;
	color:#4db1ac;
   border:1px solid #4db1ac;
 }

@media screen and (min-width: 320px) and (max-width: 1100px ){
.page-numbers{
   font-size:0.9rem;
   padding:5px;
 }
}

@media screen and (min-width: 320px) and (max-width: 480px ){
.page-numbers{
   font-size:0.9rem;
   padding:5px;
 }
}


 
/* iframe .wp-embedded-content */
 .wp-embedded-content {
	width:100% !important;
	height:px!important;
	border:2px solid blue !important;
	padding-bottom:0px !important;
	margin-bottom:0px !important;
}
.video-container{ 
    height:px !important;
	background:blue !important;
	padding-bottom:0px !important;
	}

.skip-link {
    position: absolute;
    top:-100px;
 
    /* Styled to match the default WordPress screen reader text */
    background-color: #f1f1f1;
    -webkit-box-shadow:0 0 2px 2px rgba(0,0,0,.6);
    box-shadow:0 0 2px 2px rgba(0,0,0,.6);
    color: #21759b;
    display: block;
    font-family: "Open Sans",sans-serif;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left:6px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    width: auto;
    z-index: 100000; /* Above WP toolbar */
 
    -webkit-transition: top .75s ease-out;
    transition: top .75s ease-out;
}
 
.skip-link:focus {
    color: #21759b;
    top: 7px;
 
    -webkit-transition: top 0s;
    transition: top 0s;
}

.custom-logo{
   padding-top:15px; 
   }

/* inline abstandshalter */
.space-footer{
   margin-left:0.5em;
   }

/* gehört zu dem script - */
.menu-padding {
    padding-top:400px;
}
.navbar-fixed-top{
   background:url(images/hg.png);
   opacity: 0.9; 
   padding-left:103px!important;
   padding-right:103px !important;
 }

 
/*Jetpack Carousel ohne Kommentare*/
#jp-carousel-comment-form,.jp-carousel-commentlink,.jp-carousel-buttons{
    display:none;
	margin:0;
	padding:0;
	border:none;
	}
img#wpstats{display:none;} /*Statistik Smiley */

/** =======  Gutenberg Styles ============ */

/*---------------------------------------------*/
/*-------------*** Gutenberg *** --------------*/
/*---------------------------------------------*/

/*Custom Colours for Text Block*/

.has-black-background-color {
     background-color: #2a2a2a;
 }
.has-black-color {
     background-color: #2a2a2a;
}
.has-gray-background-color {
     background-color: #7a7a7a;
}
.has-gray-color {
     color: #7a7a7a;
}
.has-lightblue-background-color {
	background-color:#c6e4f1;
}
.has-lightblue-color {
	color:#c6e4f1;
}
.has-turkis-background-color {
	background-color: #93cede;
}
.has-turkis-color {
	color:#93cede;


}
/*Custom Colors for Section Backgrounds*/
.gray{background:#efefef;
padding-left:5%;padding-right:5%;font-family:Arial,sans-serif;padding-top:2%;margin:0px!important;}
.darkblue{background:#0a2941;height:auto;padding:10%;font-family:Arial,sans-erif;}
/*Mischmasch und Sammelsurium - daweil */
/*Alles hier abgelegte ist das, was ich daweil umgesetzt
habe.. und das gehört noch geordnet */

/*featured image*/

.size-post-thumbnail{}
img.attachment-post-thumbnail{}

.wp-block-post-featured-image{
	max-width:100%;
margin-bottom:15px;
border-bottom:2px solid burlywood;
height:auto;
	
	
}

/*.wp-post-image{
	max-width:1000%; 
	height:auto;
	}*/

img.wp-post-image{
 
}
 

 
.wp-block-image.layout-column-2{
padding:5px;}

.wp-block-image.layout-column-1{
padding:5px;}


.wp-block-shortcode{
 margin-left: -150px;
    margin-right: -150px;
}


img.attachment-post-thumbnail{
margin-top:40px; 
border:2px solid silver;
}
img.attachment-single-post-thumbnail{
margin-top:40px; 
border:2px solid gray;
}

/*blocks-columns */

.wp-block-text-columns{
background:lightblue;

}
/*-------*/
/*Quotes*/
/*------*/
.wp-block-pullquote{
background:#efefef;
border:none;
font-family:'Playfair Display',serif;
 margin-top: calc(3 * 1rem);
  margin-bottom: calc(3.33 * 1rem);
  hyphens: auto;
  word-break: break-word;

}

/* Block Quote Regular */
.wp-block-quote:not(.is-large):not(.is-style-large) {
  border-left:15px solid #337a7f !important;
  width:100%;
 
  padding-left:5%;
  padding-right:5%;
}

.wp-block-quote cite,
.wp-block-quote footer,
.wp-block-quote .wp-block-quote__citation {
  font-family:'Lora',serif;
  font-size: 1.0rem;
  line-height: 1.6;
  color:#337a7f;
}
.wp-block-quote p{font-size:1.6rem!important;}



.wp-block-quote.is-large, .wp-block-quote.is-style-large {

  font-size:4rem!important;
}

.wp-block-quote.is-large p,
.wp-block-quote.is-style-large p {
  font-size: 4rem;
  line-height: 1.3;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
}
/** =====  File ======  */

.wp-block-file {
  font-family: 'Lora',serif;
  color:#fff;
}

.wp-block-file .wp-block-file__textlink {
  text-decoration: underline;
  color: #fff!important;
}

.wp-block-file .wp-block-file__textlink:hover {
  color: #fff;
  text-decoration: none;
}

.wp-block-file .wp-block-file__button {
 
  line-height: 1.8;
  font-size: 1.0rem;
  font-weight: bold;
  background-color: lightblue;
  border-radius: 5px;
}

.wp-block-file .wp-block-file__button-richtext-wrapper {
  display: block;
  margin-top: calc(0.75 * 1rem);
  margin-left: 0;
}


/** === Verse === */

.wp-block-verse,
.wp-block-verse pre {
  padding: 0;
}

/** === Code === */

.wp-block-code {
  border-radius: 0;
}

/** === Table === */

.wp-block-table td, .wp-block-table th {
  border-color: #767676;
}
/*-------------*/
/* Text Columns- gibt es nicht mehr 3.3.0*/
/*--------------*/
/*32em , 512px*/
@media only screen and ( max-width: 32em ) {
	.wp-block-text-columns,
	.wp-block-text-columns.aligncenter {
		display: block;
	}
/*das hier ist es, deswegen ist der Teil jetzt responsive bei 512px*/
	.wp-block-text-columns.columns-2 .wp-block-column,
	.wp-block-text-columns.columns-3 .wp-block-column,
	.wp-block-text-columns.columns-4 .wp-block-column {
		float: none;
		margin-left: 0;
		margin-right: 0;
		width: 100%;border:2px solid yellow;
	}
}

img.wp-block-column{
max-width:100% !important;}

/** ========== Columns ============= */
/*--------------------*/
/*Spalten Block */
/*--------------------*/

	
	

.wp-block-columns {

  background:important; 
}/*ist sozusagen der wrapper*/

.wp-block-column{
border-right:1px dotted silver ;
margin-left:px;

}/*ist sozusagen ein column */

.border{border-right:0px dotted silver;}

/

/*damit ist der Spaltenblock für mich responsive - gilt das jetzt auch noch ?*/
@media only screen and (max-width: 767px) {
	.wp-block-columns {
		display: block;
	}
	.has-2-columns .wp-block-column,
	.has-3-columns .wp-block-column,
	.has-4-columns .wp-block-column,
	.has-5-columns .wp-block-column,
	.has-6-columns .wp-block-column {
		width: 100%;
	}
}

/*Ende Spaltenblock*/

.wp-inner-block{background:#efefef;}
.layout-column-2{background:powderblue;}
.layout-column-1{background:pink;}
p.layout-column-1{padding:10px;}
p.layout-column-2{padding:10px;}

/* ----------------------------- */
/* Gutenberg - Full und Wide -  */
/*------------------------------ */

 .alignwide {
   
        margin-left: calc(18% - 18vw);
        margin-right: calc(18% - 18vw);
        width: auto;
        max-width: 1000%;
		border:px dotted orange;
}
/**/



/*diese Klasse greift einfach komplett und total für mich , das overfolow:hidden ist ganz oben
unter html, somit wird kein Scrollstreifen erzeugt horizontal bei */
.alignfull {
      
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		width: auto;
		max-width: 1000%;
		border:px dotted fuchsia !important;
	}
	
}




/*unter erweitert - zusätzliche CSS Klasse einfügen für Absatz */
.hg-wort{background:lightblue;}
.hg-schrift{font-family:Georgia;color:green;}


.full{
	
	width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        text-align: center;
	
	border:1px solid blue;
	padding:0px 90px 0px 90px;
	
}
.full-a{
	
		width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        text-align: center;
	
	border:1px dotted silver;
	padding:10px 30px 10px 30px;
	margin-bottom:0px!important;
	margin-top:0px!important;
	
		
}

/*--------*/
/* Widths */
/*--------*/

@media screen and ( min-width: 770px ) {
	.edit-post-visual-editor .editor-post-title,
	.edit-post-visual-editor .editor-block-list__block {
		max-width: 820px; /* 730px - 90px */
	}
}

/*----------------------------*/
/* ! Cover Image / Titelbild */
/*---------------------------*/


.wp-block-cover{

background:;
background-attachment:!important;/*funktioniert von selber nicht, nur mit diesem Zusatz*/

}

.wp-block-cover.alignfull{
	
	
	
	
}
.wp-block-cover.alignwide
{
	
}

.wp-block-cover-text {

border:2px solid white!important;
	font-size:2.3rem!important;
	color:white !important;
	font-family:Lora,serif;
	position:absolute;
	margin-top:0px;
	margin-left:0px;
	
		
}
.wp-block-cover-text a:link{
	color:white!important;
	text-decoration:underline;
}
/* das funktioniert im frontend*/
.wp-block-cover > p{
	
	
	
}
/** ========= Media und Text ========= */

/*neuer Block Media-Text*/

.wp-block-media-text{
border:px solid deeppink;
margin-bottom:50px;
margin-top:50px;


}
.wp-block-media-text.wp-block-media-text_content{
	
	background:lightblue;
	border:1px solid blue;
	
}
.wp-block-media-text_media{
	
border:1px solid black;	
	
}
@media screen and (max-width : 480px){
	
.wp-block-media-text_content{
	
	width:100% !important;
}	
	
	
	
}



.wp-block-media-text >p{color:red;}


/*zusätzliche Klassen für Cover Text*/

/*-----------*/
/*Bild- Image*/
/*-----------*/
/* das ist der graue Abstand unter dem Bild, wusst nicht, wie ich das sonst lösen konnte */
.wp-block-image{

padding-bottom:10px !important;
padding-top:10px !important;
border:1px solid silver !important;
margin-bottom:15px;
margin-top:15px !important;
}


/*margin-left:30px;
margin-right:-30px;*/

/** ======== Gallery ========== */
/*Styles*/
.wp-block-gallery /*das ist sozusagen der Wrapper*/
.blocks-gallery-grid /**/
.blocks-gallery-item/*das ist die Anzahl der einzelnen Bilder in der Gallery*/
/*Galerie Unterschrift - Caption*/
/*Bild- Item- Unterschrift - Caption*/


/*----------*/
/*Galleries*/
/*---------*/




.blocks-gallery-grid{
background:;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);


}/*greift, nur dar ma kan padding machen !*/

/*sind die einzelnen Bilder in der Galerie */
li.blocks-gallery-item{
	border:px solid silver!important;
	padding:10px !important;
	
	padding-left:10px!important;
	} 
/*Bildbeschrfitung - mit Link*/	
/* bei .gallery-item a, da habe ich den Rand am unteren Bildrand, eben item. aber nicht die bildbeschriftung,
aber die Schrifgroesse und das alles, das greift schon. */


.blocks-gallery-item a{
	
}
.blocks-gallery-item a:link,.blocks-gallery-image a:link{
	border:3px dotted fuchsia !important;
	
	}
.blocks-gallery-item a:hover,.blocks-gallery image a:hover{
	border:2px solid blue!important;
	}
	/*opacity:0.75;
     -webkit-transition: 1s;
      -moz-transition: 1s;
       transition: 1s;*/


	 /* Galerie  Unterschrift - das greift*/
	figcaption.blocks-gallery-caption{
		border:px solid blue;
		margin-bottom:40px !important;/*bringt den Abstand nach unten, nur mit !important*/
		border-bottom:1px solid silver;
		
	max-width:100%;
	font-family:Lora,serif;
	font-size:1.1rem!important;
	margin:0px auto; /*das zentriert die Bildunterschrift, greift nur über margin*/

	}
	/*das greift für die Links für Galerie Unterschrift Link */
	figcaption.blocks-gallery-caption a{
		border-bottom:px dotted blue! important;
		
		}
		figcaption.blocks-gallery-caption a:link{}
		figcaption.blocks-gallery-caption a:hover {border-bottom: none!important;}	
	


/*.blocks-gallery-image ,
{
	border:3px solid fuchsia;background:red !important;
}*/
/*.entry.wp-block-gallery.blocks-gallery-item figcaption a:link {color:#fff !important;}*/







/*.blocks-gallery-item figcaption a {font-family:Arial;font-weight:700;font-size:1.1rem;color:white !important;border:1px solid white;}
.blocks-gallery-item figcaption a:link{border-bottom:1px solid black;}

.blocks-gallery-item figcaption a:hover{border-bottom:none;}*/

/*Damit geht der schwarze Rauchrand weg */
.wp-block-gallery.wp-gallery-image figcaption a {color:black!important;}

.wp-block-gallery .blocks-gallery-item.blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption
{background:rgba(250,250,250, 0.0); border:px solid #ccc;font-size:1.1rem;font-family:Lora,serif;font-style:normal;
color:#333;}

.wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption a{ color:;
font-size:1.3rem; background:;
}
.wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption a:link {}
.wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption a:hover{}

.wp-block-gallery.alignwide {


}
.wp-block-gallery.alignfull{


}


.wp-block-image figcaption {
	color: inherit;
	opacity: 0.8;
}


	/** =========== Embeds ============= */


/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

video {
	max-width: 100%;
	
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	border:1px solid yellow;
	background:#efefef;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border:5px solid lightblue;
	
}

/* Embed */

.wp-block-embed {

	background:;	border:0px solid black;margin-top:0px ! important;
}
/*macht den oberen Rand Issue bei Videos weg! , falls doppelt responsive*/
.wp-block-embed__wrapper div, .wp-block-embed__wrapper span {
    padding: inherit;
    position: static;
}
	
.wp-block-embed.alignwide{
		
		margin-left: calc(18% - 18vw);
		margin-right: calc(18% - 18vw);
		width: auto;
		max-width: 1000%;
		border:px dotted fuchsia !important;
      		
	}
		
.wp-block-embed-youtube.alignfull{
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		
		max-width: 1600px!important;
		border:px dotted green !important;
		
	}
/*	*/
.wp-block-embed_wrapper{
	
	
}
.wp-block-embed-youtube{

	
}





/** ============ Table =========== */

/*Tabellen Block*/

.wp-block-table {

 

 border-collapse:collapse;
 display:block;
 margin-bottom:10px;

}
.wp-block-table td,.wp-block-table th {

}

.wp-block-table.alignwide
{

	
      margin-left: calc(25% - 25vw);
		margin-right: calc(25% - 25vw);
	/*komisch, aber dieser WErt macht es, dass es passt*/
	
		max-width: 1000%;
		background:lightblue;
		
}

.wp-block-table.alignfull
{
	
	margin-left: calc(50% - 48vw);
		margin-right: calc(50% - 48vw);
			
		max-width: 1000%;
		border:1px dotted fuchsia !important;
		background:lavenderblush;
}

/* Tables */
.wp-block-table {
	display: table;
}

.wp-block-table.alignfull {
	width: 96vw;
}
.wp-block-table.alignwide {
	width:74vw;
}

/** =====   Button ===== */

.wp-block-button_link {
font-size:2rem!important;}


/*greift nix*/

/** ========== Categories ========== */

/*Category Block*/

.wp-block-categories.alignfull
{
	
	margin-left: calc(50% - 48vw);
		margin-right: calc(50% - 48vw);
			
		max-width: 1000%;
		border:1px dotted fuchsia !important;
		background:lavenderblush;
		text-align:center;
	
	
}
.wp-block-categories.alignfull {
	
	width: 96vw;
}
/* Categories */
.wp-block-categories {}

.wp-block-categories-list ul,
.wp-block-categories-list li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wp-block-categories-list li {
	padding: 0.25em 0;
}

.wp-block-categories-list li:not(:last-child) {
	border-bottom: 1px dashed rgba(0,0,0,0.2);
}

.wp-block-categories-list ul ul {
	padding-left: 2em;
}

.wp-block-categories-list ul ul li:last-child {
	padding-bottom: 0;
}

.wp-block-categories-dropdown {}




/*--------------------------------------
               Header  
---------------------------------------*/
#site-nav{
}
#branding{
   margin-top:0px;
   border:0px solid #ccc;
   padding-top:0px;
   padding-left:2px;
 }
#logo{
   text-align:center;
}
#description{
   font-size:12px;
}
#masthead{
   margin:0px;
 }
.site-header{margin:0px !important;
}
.textwidget.widget-area-header-3 h2 a{
 font-family:Lora;font-size:1.7rem;text-align: center;
}
.textwidget.widget-area-header-4 h2 a{
	font-family:Lora;font-size:1.7rem;text-align: center;
	
}
.schrift-1{font-family:Arial,sans-serif;}

/*-------------------------------------------------
    Navigation main-nav-wrapper und breadcrumbs 
-----------------------------------------------------*/
#site-nav{
}
#main-nav-wrapper{
     padding:10px;
	 border-bottom:2px solid silver;
	 }
#main-nav-wrapper2{
     padding:0px;
	 border-bottom:none;
	 } 
 /*ist der headerstreifen */

		
/*---------------------------------
          breadcrums 
-------------------------------- */


#breadcrumb{
       height:auto;
	   background:#efefef !important;
	   padding-bottom:1px;
	   padding-top:2px;
	   font-size:12px;
	  border:1px dotted blue;
	   }/*greift nicht, aber es muss da sein .. ?*/
	   

/*#bread{
     padding-left:20px;
	 border-bottom:1px dotted #49afa9;
	 border-left:1px dotted #49afa9;
     font-family: Lora,serif;
	 font-size:0.9rem;
     content: '\f067';
  
     color:#337a7f;
}*/
#bread{
     padding-left:20px;
	 border-bottom:1px dotted #49afa9;
	 border-left:1px dotted #49afa9;
     font-family: Lora,serif;
	 font-size:0.9rem;
     content: '\f067';
  
     color:#337a7f;
}
#bread a{color:#616161;}
#bread a:link{color:#616161;}
#bread a:hover{ text-decoration:underline;}

/*===================================
============ Top Section Hero ==============*/
#top-section {}

 
/*===================================
============ Main ==============*/


 #primary{} 
 .conent-area{}
 #main{}
 .site-main{}
 #main-wrapper{}
 #content{}
.center{
   padding-left:20%;
   padding-right:20%;
   color:#2E2F43;
 }
.feature4{
   background:url(images/);
   padding-top:0px;
   }/* ist der content  main */
.feature4 img{
   max-width:100%;
   }

/*----------------------------------------------------------
                          sections 
-------------------------------------------------------------*/


	/*ultimate addon plugin section*/
	
	.wp-block-uagb-section {background:;border:3px solid magenta!important;
	

	
	
	}
.wp-block-uagb-section.alignwide{
	background:;border:3px solid lavenderblush!important;
	
	
}
	
	.wp-block-uagb-section.alignfull{
	background:;border:3px solid palevioletred!important;
	
}

/* features - für das grid */

  	 #carousel-dreispalter-widget{border-bottom:1px solid #efefef;padding:0px 10px 20px 10px; background: rgba(255, 255, 255, 0.7);
	  font-size:1.0rem;}
	
.feature2{position:fixed;}

/* section - konzept-teaser */
.bg_blue{background:#cce0e1;}


.bg_greengray{
	
	background:#8eaaab;
	background-attachment:fixed;
	z-index:1 ! important;
	}
.bg_white{background:#fff;color:#fff;}


#feature1{background:#b1d8ad; background-attachment:fixed; height:400px; margin-bottom:15px;opacity:0.4;}
#feature2{background:#ccc;}



.feature7{border-top:1px dotted #gray;}/*footer*/
.feature8{border:0px solid red;padding:0px 10px 10px 10px; background: transparent;}/* ist border_padding */
.footer-widget{text-align:center;padding-top:10px;}
.background{background:#eee;}
.footer_li{list-style-type:none;text-decoration:none;}
#feature7 li {list-style-type:none;}
#feature7 li a{text-decoration:none;}





/*-----------------------------------
               Footer 
------------------------------------*/
.feature7{}/*footer*/

.footer-widget{}

#footer-inner{
      border-top:2px solid silver;
	  padding:20px 0px 40px 0px;
	  }
#footer-outer{
      background: #2a3c48;
	  
	  }
#colophon{}

.widget-area-dynamic-footer-slider{
     background:none;
	 }
.widget-area-dynamic-footer-slider .textwidget a{color:#337a7f;}	 
.widget-area-dynamic-footer-slider .textwidget a:link {color:#337a7f;}
.widget-area-dynamic-footer-slider .textwidget a:hover {color:#fafafa;text-decoration:underline;}
.widget-area-footer-1,
.widget-area-footer-2,
.widget-area-footer-3{
     padding:15px; 
	 font-size:1rem;
	 background:;
	 color:#fff;
	 }
	 .widget-area-footer-1 h3 {font-size:1.9rem;}
	.widget-area-footer-3 h3 {font-size:1.9rem;}
.widget-area-footer-2 h3 {
     font-size:1.9rem;}
#menu-footer-menue{
     background: rgba(255, 255,255, 0.1);
	 list-style-type:none;
	 color:#fff;
	 }
#menu-footer-menue a {
     color:#fff;
	 }
#menu-footer-menue.current-menu-item a{
      text-decoration:underline;
	  }
	  
.widget-area-footer-1 li {
	
	 color:#fff;
	list-style-type:none;
}
.widget-area-footer-1 li a{
	text-decoration:none;
	color:white;
	
}
.widget-area-footer-1 li a:hover{
	
	text-decoration:underline;
}
.widget-area-footer-1 ul {
	
 background: rgba(255, 255,255, 0.1);
	
}
.widget-area-footer-1 .current-menu-item a{
      text-decoration:underline;
	  color:white;
	  }
.footer-widget-ue
     {border-bottom:2px solid silver;
	 }
.widget-area-dynamic-footer-colophon{
     background:none;color:white;
	 }
.widget-area-dynamic-footer-colophon .textwidget a{color:#337a7f;}	 
.widget-area-dynamic-footer-colophon .textwidget a:link{color:#337a7f !important;}
.widget-area-dynamic-footer-colophon .textwidget a:hover{color:#fafafa;text-decoration:underline;}
/*===================================
============ Widget Area ==============*/

.footer-widget{text-align:center;padding-top:10px; font-size:0.9rem;}
.footer-navi{}
.rights{}
.contacts{}

#likebox-wrapper{width: 80% !important;}


/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

video {
	max-width: 100%;
	
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	border:1px solid yellow;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border:5px solid lightblue;
	
}

#header{ height:90px;padding-top:30px;padding-bottom:30px;
        }
.header-slider{height:700px;  width:1980px;

	    margin:0px auto 0 auto !important;}

/* statische Seiten */
.about {}
.about ul li :before {
font-family: 'FontAwesome';
content: '\f067';
margin:0 5px 0 -15px;
color: #d0e3df;
}

	  
/*-------- Sidebar  und Widget Areas --------- */	 

.widget-area-header-page{}
.widget-area-dynamic-header-hero {

	 
}
/*hero-box - wieder rausgenommen, 
greift über die Einstellungen in der functions.php*/
.box-hero {}
.box-hero h1{
   text-align:center;
   font-size:2.4rem;
   font-family:Lora;
   color:#fff;
   
 }
.box-hero h2{
   font-family:Lora;
   font-size:1.6rem;
   text-align: center;
   color: #fff;
 }
.box-hero h2 a ,.box-hero h2 a:link{
   color: #fff;
   padding:5px;
   border:2px solid white;
   background:rgba(255,255,255,0.3);
 }
.box-hero h2 a:hover{
  border:none;
  text-decoration:none;
  border:2px solid white;
  opacity:0.25;
   -webkit-transition: all 2s ease; 
      -moz-transition: all 2s ease;
       transition: all 2s ease;
 }

 @media screen and (min-width : 320px)and (max-width:480px ){
.custom-logo{ width:70%;height:auto;float:left;margin-top:0px; padding-top:10px;}
.navbar-toggle{border: 2px solid #4f95d6 !important;}

 }


.widget-area-dynamic-featured-1 {background:none; font-size:18px;}
.widget-area-dynamic-featured-2{background:none;font-size:18px;}
.widget-area-dynamic-featured-3{background:none;font-size:18px;}


	
#sidebar{padding-left:30px;}

.widget-area-dynamic-header-testimonial{background:none;}

/*------------------------------------------------
                Seiten Sidebar Widget
-------------------------------------------------*/

/* sidebar für statische seite webdesign*/
.widget-area-sidebar-webdesign{
}

.box{color:white; background:#337a7f; padding:15px 20px  15px 20px;
	height:auto; }
.box a:link{color:white !important;}
 .box a:hover{color:#fafafa; text-decoration:underline !important;}
.box h3{color:white;}

/* sidebar für statische seiten*/

.box2{
	padding:20px 20px  20px 20px;
	height:auto; 
	 background:#bfd5d6; color:#337a7f;
	 transition:none;
	
}
.widget-area-sidebar-page {
  background:#bfd5d6; height:auto;
	
	
	}
	


.box2 img {
   
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}

.box2 img:hover {
   
    -webkit-filter: grayscale(0%);
}

/*------------------------------------------------
                Blog Sidebar Widget
-------------------------------------------------*/
.widget-area-dynamic-sidebar2-blog{
      padding-top:10px;
	  padding:10 auto 10;
	  }	
.widget-area-dynamic-sidebar2-blog h4{
     text-align:center;
	 }
.widget-area-dynamic-sidebar2-blog h6{
     font-size:1.5125rem;
	 font-weight:normal;
	 padding-bottom:4px;
	 padding-top:10px; 
	 color:#337a7f;
	 }
.widget-area-dynamic-sidebar2-blog ul li {
    font-size:1.0rem;
	margin-bottom:15px;
    border-bottom:1px dotted silver;
}
.widget-area-dynamic-sidebar2-blog li:before {    
    font-family: 'FontAwesome';
  content: '\f058';
    margin:0 5px 0 -15px;
    color:#49afa9;
}

	
/*-------------------------------------
        Sidebar Categories 
--------------------------------------*/
li.current-cat{
   
	font-weight:bold;
	list-style-type:none;
	padding-left:15px;
	line-height:20px;
	
	}
	
li ul .current-cat a .children{
    
	font-weight:bold;
	list-style-type:none;
	padding-left:15px;
	line-height:20px;
	}


li ul li.current-cat a{
   color:white;
}



/*----------------------------------------
             Sidebar
------------------------------------------*/

#sidebar li{
   list-style-type:none;
   padding-left:15px;
   }
 #sidebar {padding-left:0px;background:;}
/*--------------------------------------------
               Diverses
---------------------------------------------*/

 .current_page_item a {
    text-decoration:none;
    color:#000033;
}

.current-menu-item a {}
li{
   padding-left:15px;
   list-style-position:inside;
   }

/* fixed widget */


#fixed-widget{border:1px solid silver;height:300px;width:300px;background:green;}

 
#sidebar h3{ 

font-size:21px;
font-size:1.3125rem;}

h3 a{color:gray;text-decoration:none;}


/*-- Sidebar Asides*/

#about {}
#social-links{}
#new-posts{}
#kategorie{}
#most-popular{}

/* ------------ für Artikel - hardcoded  -----------------  

#support li:before {    
font-family: 'FontAwesome';
content: '\f058';
margin:0 5px 0 -15px;
color:#83aaab;
font-size:1.1rem;
padding-right:15px;
}
#support li{font-size:1.1rem;}
#support p{font-size:1.1rem;}
 #b_wrap {}
 
#kunden{}

.a_links{width:30%;margin-right:4%;float:left;height:80px;}
.a_rechts{width:60%;float:right;height:80px;margin-bottom:5px;}
.a_rechts p {font-size:14px;line-height:1.6;margin-bottom:5px; 
-webkit-hyphens: auto;
	   -moz-hyphens: auto;
	    -ms-hyphens: auto;
			hyphens: auto;}

#a_links{width:30%;margin-right:4%;float:left;height:80px;}
#a_rechts{width:60%;float:right;height:80px;margin-bottom:5px;}
#a_rechts p {font-size:14px;line-height:1.6;margin-bottom:5px; 
-webkit-hyphens: auto;
	   -moz-hyphens: auto;
	    -ms-hyphens: auto;
			hyphens: auto;}
#a_links img{padding:0px;}
.y{background:rgba(255, 255, 255, 0.9);}
#a_wrap{width:100%;background:transparent;height:auto;color:#000033;}
#a_wrap a:link, a:visited,#a_links a:link, a:visited,#a_rechts a:link,#a_rechts a:visited{color:#000033;}
#a_wrap a:hover ,#a_links a:link, a:visited,#a_rechts a:link,#a_rechts a:hover{color:#696969;}
#b_wrap{width:100%;background:transparent;height:auto;margin-bottom:5px;padding-top:5px;}
#c_wrap{width:100%;background:#efefef;height:auto;margin-bottom:5px;border-radius:5px;}
#k_wrap{width:100%;height:auto;margin-bottom:5px;border-radius:5px;padding-left:10px;padding-top:10px;
}

*/
/* category widget */
.screen-reader-text{display:none;}/*das war der h4 Text daneben*/
#cat{ 
   border:1px dotted silver;
   height:50px;
   color:#616161;
   width:100%;
   font-family:Lora, serif;
     font-size:1.1rem;
   padding-left:20px;
   border-radius:5px;
   margin-bottom:10px;
 background:none !important;
 
   }
 #cat .postform{}
.bg-cat{background:none !important;}
#archives-dropdown-4{
border:1px dotted silver;
   height:50px;
   color:#616161;
   width:100%;
   font-family:Lora,serif;
   font-size:1.1rem;
 
   padding-left:20px;
   border-radius:5px;
   margin-bottom:10px;
background:none !important;

}
/*------ Fullwidth -------------*/

#fullwidth{
		background:#fff;
		color:#2E2F43;
		}

/*------------------------------
           Suche  
------------------------------*/


#suche{border:1px solid #337a7f; height:52px;}
#suche input[type="text"]{
    width:80%;
    color: #616161;
	padding-left:10px;
	height:50px;
    margin-top:0px;
	font-size:2.0rem;
	font-family:Lora,serif;
}
#suche input[type="submit"]{
   width:20%;
   float:right;
 border-right:1px solid #337a7f;
   height:50px;
   font-family:FontAwesome;
   font-size:2rem;
   color:#337a7f;
 background:none !important;
   }
#suche input[type="submit"]:hover{background:#fafafa !important; height:50px;opacity:0.75;
     -webkit-transition: all 2s ease;
      -moz-transition: all 2s ease;
       transition: all 2s ease;
   
 }	

/*---------Suche stylen --------*/
#search{
   border:1px solid #337a7f;
   padding:5px;
 }
input[type="text"]{
    width:90%;
    color: #616161;
	border:1px solid #efefef;
	height:35px;
    margin-top:0px;
	font-size:large;
	font-family:Lora,serif;
	padding-left:10px;
}

input[type="text"]:hover{
   
 }

input[type="submit"]{
   width:10%;
   float:left;
  border:none ! important;
   height:35px;
   font-family:FontAwesome;
   font-size:1.5rem;
   color:#337a7f;
   background:none !important;
   }
	
	
input[type="submit"]:hover{
   height:35px;
   opacity:0.75;
     -webkit-transition: all 2s ease;
      -moz-transition: all 2s ease;
       transition: all 2s ease;
   background:#fafafa !important;
 }

/*contactform 7 styles */

.wpcf7 p{ 
         font-size:1rem;
		 font-weight:bold;
		 color:black;}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"]

{
    background-color: white;
    color: #000;
    width: 100%;
	border:2px solid darkgray;height:40px;
    margin-top:5px;
	padding-left:5px;
  /* Abgerundete Ecken fuer Browser die es koennen */
    -moz-border-radius: 0px;
    -khtml-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
	font-size:normal;
	font-family:Arial,sans-serif;

}

.wpcf7 textarea{background-color: white;
    color: #000;
	font-family:Arial,sans-serif;
    width: 100%;
	border:2px solid darkgray;height:80px;
	 margin-top:5px;
	 padding-left:5px;
  /* Abgerundete Ecken fuer Browser die es koennen */
    -moz-border-radius: 0px;
    -khtml-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
	height:200px;
	}

.wpcf7
{
  
  
	width:80%;
}	

.wpcf7 textarea:hover{background:#fff;}



.wpcf7 input[type="text"]:hover,
.wpcf7 input[type="email"]:hover

{ background:#fff;}

	
.wpcf7-submit {width:100%;
                                 height:50px;
								 border:1px solid #d0d0d0;
								 background:grey;
  /* Abgerundete Ecken fuer Browser die es koennen */
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
	font-size:1rem;
		 font-weight:bold;
		 color:black;
	}
	
	
.wpcf7-submit:hover{background:#efefef;
}
#footer-inner{line-height:150%;}



/* Computer */
.grid_1 { width: 6.5%; } 
.grid_2 { width: 15%; } 
.grid_3 { width: 23.5%; } 
.grid_4 { width: 32%; } 
.grid_5 { width: 40.5%; }
.grid_6 { width: 49%; } 
.grid_7 { width: 57.5%; } 
.grid_8 { width: 66%; } 
.grid_9 { width: 74.5%; } 
.grid_10 { width: 83%; } 
.grid_11 { width: 91.5%; } 
.grid_12 { width: 100%; } 

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin: 0 2% 0.5% 0;
	float: left;
	display: block;
}

.alpha{margin-left:0;}
.omega{margin-right:0;}
.reset{margin:0;}
.space{margin:0 5% 1% 0;}
.space2{margin:0 8% 1% 0;}


.container{
	width: 100%; /*width: 1000px;*/
	max-width: 1440px;
	margin: auto;	
	border:2px solid green;
}

.container-center{
   width:80%; 
   border:1px solid #efefef;
   margin:0px auto;
   max-width:;
   text-align:center;
   padding-top:40px;
   padding-bottom:10px;
   background:green;
  
 }
 .container-thumb{border:0px solid blue; 
width:100%; /*width: 1000px;*/
	max-width:2200px;
		
	margin-bottom:30px;
	margin-top:30px;
	padding-top:-10px;
        margin-left: calc(15% - 15vw);
        margin-right: calc(15% - 15vw);
        width: auto;
        max-width: 1000%;
	
		}
.teaser{
   background: #efefef;
 }
.clear{
   clear:both;
   display:block;
   overflow:hidden;
   visibility:hidden;
   width:0;
   height:0
 }
.clearfix:after{
  clear:both;
  content:' ';
  display:block;
  font-size:0;
  line-height:0;
  visibility:hidden;
  width:0;
  height:0
}
* html .clearfix,*:first-child+html .clearfix{zoom:1}



/* Mobile */
/* die bootstrap devs - @media (max-width: 480px) {}  */
/*von 320-480 - mobiles hochformat */
@media screen and (max-width : 480px) {

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	width:100%;
	
}

#header{
  height:auto;
 }
	 
#author-box{ 
     width:100%;height:auto;
	 padding-left:10px; 
	 padding-top:10px;
	 padding-bottom:15px;
	 padding:5px;
	 margin-top:40px;
}

 .header-page-bg{
    background:url(images/header3.jpg) no-repeat center center fixed;
    background-size:cover;
	 -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
    width:100%;
	height:380px;
	background-attachment:fixed;
}

.widget-area-header-3.textwidget h2 span{border:0px solid white!important;
	 
}

h1,h2,h3,h4,h5,h6 
{
     font-family:Lora,serif;
	font-weight:500;
	color:#337a7f;

	
	}		
h1{margin: 10px 0 34px;
   font-size:43px;
   font-size:1.9rem;
   line-height:1.375;
  
  
 
}
h2{
     margin: 10px 0 34px;
   font-size:41.6px;
   font-size:1,9rem;
   line-height:1.375;
  
}  
h3{ margin: 20px 0 24px;
   font-size: 33.6px;
   font-size: 1.7rem;
   line-height: 1.25;
}   
h4{margin:0px 0 24px;
 
   font-size:28.8px;
   font-size: 1.8rem;
   line-height: 1.25;  
   }   
h5{ margin: 18px 0 14px;

   font-size: 24px;
   font-size: 1.5rem;
   line-height: 1.15; 
   
   }   
h6{ margin: 5px 0 14px;
 
   font-size: 20.8px;
   font-size: 1.3rem;
   line-height: 1.15;    
   }
 	   



#main-nav-wrapper{
   margin:0px;
   padding:0px;
 }
#s{width:40%;}	

#feature3{
  height:auto;
 }
#feature6{
  height:auto;
 }
#feature4 img{
  max-width:100%;
  height:auto;
 }
#feature1{
  height:auto;
}
	
.entry p{
  padding-left:0px !important;
  padding-right:0px !important;
  font-size:1.1rem;
  font-family:Lora,serif;
  
  
 
 }  
 .entry {width:100%;
 padding-left:0px !important;
 padding-right:0px !important;}
 .entry h2 a, .entry h2 a:link{font-size:1.9rem;}

#sidebar{
   padding-left:0px;
}
.nav.navbar-nav{
   width:100%;
 }
.center{
   padding-left:0%;
   padding-right:0%;
  
}
/*h1 blogueberschriften*/
.entry h1 a ,.entry h1 a:link{
    color:#337a7f;
	font-family:Lora,serif;
	border:0;
	border-bottom:2px dotted #337a7f;
	text-decoration:none !important;
}
.entry h1 a:hover{
    background:#fafafa;
	border:none;
	
	text-decoration:none !important;
     opacity: 0.75;
     -webkit-transition: all 2s ease;
      -moz-transition: all 2s ease;
       transition: all 2s ease;
}

.entry h4{
   padding-top:20px;
 }

#sys_facebook{display:none;}
#sys_twitter{display:none;}
#sys_xing{display:none;}
#sys_google{display:none;}



	}

.custom-logo{}


}

 
/* Mobile */
@media screen and (max-width : 1100px) {


.grid_1 { width: 6.5%; } 
.grid_2 { width: 15%; } 
.grid_3 { width: 23.5%; } 
.grid_4 { width: 32%; } 
.grid_5 { width: 40.5%; }
.grid_6 { width: 49%; } 
.grid_7 { width: 57.5%; } 
.grid_8 { width: 66%; } 
.grid_9 { width: 74.5%; } 
.grid_10 { width: 83%; } 
.grid_11 { width: 91.5%; } 
.grid_12 { width: 100%; } 

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin: 0 2% 1% 0;
	float: left;
	display: block;
}

.alpha{margin-left:0;}
.omega{margin-right:0;}
.reset{margin:0;}

.container{
	width: 90%; /*width: 1000px;*/
	max-width: 1100px;
	margin: auto;
	
}
.entry{}

#sidebar{padding-left:0px;}



.entry h2{
     margin: 10px 0 34px;
  
   font-size: 1.8rem;
   line-height: 1.35;
} 
.center{padding-left:20%;padding-right:20%;} 
}


/* Tablet */
@media screen  and (max-width : 1024px) {


.grid_1 { width: 6.5%; } 
.grid_2 { width: 15%; } 
.grid_3 { width: 23.5%; } 
.grid_4 { width: 32%; } 
.grid_5 { width: 40.5%; }
.grid_6 { width: 49%; } 
.grid_7 { width: 57.5%; } 
.grid_8 { width: 66%; } 
.grid_9 { width: 74.5%; } 
.grid_10 { width: 83%; } 
.grid_11 { width: 91.5%; } 
.grid_12 { width: 100%; } 

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin: 0 2% 1% 0;
	float: left;
	display: block;
}

.alpha{margin-left:0;}
.omega{margin-right:0;}
.reset{margin:0;}

.container{
	width: 100%; /*width: 1000px;*/
	max-width: 1024px;
	margin: auto;
	
}


#sys_facebook{display:none;}
#sys_twitter{display:none;}
#sys_xing{display:none;}
#sys_google{display:none;}


#feature3{height:auto;}
#feature1{height:auto;}
#menu {
			display: none;
		}

#sidebar{padding-left:0px;}
#s{padding:0px;}	
.entry p {
   padding-left:0px;
   padding-right:0px;
   font-size:1.1rem;
   font-family:Lora,serif;
   }  
.center{
   padding-left:0%;
   padding-right:0%;
 }


.navbar-header{background:fuchsia;}
 .navbar-brand >image{max-width:100%;}
.navbar-fixed-top{background:url(images/hg.png);
 opacity: 0.9; padding-left:0px!important;padding-right:0px !important;
}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix,*:first-child+html .clearfix{zoom:1}



/* Tablet */
@media screen  and  (max-width :768px) {

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	width:100%;
}
#feature3{height:auto;}
#feature6{height:auto;}
#feature1{height:auto;}
#feature4 img{max-width:100%; height:auto;}
#header{height:auto;}
#navi ul{background:#efefef;}


#sidebar{padding-left:0px;}
#s{padding:0px;}	
.entry p{
   padding-left:0px;
   padding-right:0px;
   font-size:1.1rem;
   font-family:Lora,serif;
   }  

h1,h2,h3,h4,h5,h6 
{
     font-family:Lora,serif;
	font-weight:500;
	color:#337a7f;

	
	}		
h1{margin: 10px 0 34px;
   font-size:43px;
   font-size:1.9rem;
   line-height:1.375;
  
  
 
}
h2{
     margin: 10px 0 34px;
   font-size:41.6px;
   font-size:1,9rem;
   line-height:1.375;
  
}  
h3{ margin: 20px 0 24px;
   font-size: 33.6px;
   font-size: 1.7rem;
   line-height: 1.25;
}   
h4{margin:0px 0 24px;
 
   font-size:28.8px;
   font-size: 1.8rem;
   line-height: 1.25;  
   }   
h5{ margin: 18px 0 14px;

   font-size: 24px;
   font-size: 1.5rem;
   line-height: 1.15; 
   
   }   
h6{ margin: 5px 0 14px;
 
   font-size: 20.8px;
   font-size: 1.3rem;
   line-height: 1.15;    
   }
 	      
  #sys_facebook{display:none;}
#sys_twitter{display:none;}
#sys_xing{display:none;}
#sys_google{display:none;} 
   
   
   
   
}

/* =========================
Tablets ==============*/
@media screen and (min-width:320px) and (max-width:480px){
.custom-logo-link{}
.custom-logo{}
 .home-header-bg{background-attachment:scroll;}
  .header-page-bg{background-attachment:scroll;}
  .wp-block-post-content{width:100%;background:burlywood;}
}


@media screen and (min-width: 768px) and (max-width: 1024px ){

#sidebar {width:30%;}
.center{padding-left:0%;padding-right:0%;}

}
/* das media max-width 991 ersetzt eigentlich obiges, mit min und max width, kommtzu 
dem selben ergebnis */



@media screen and (min-width: 1024px) and (max-width: 1100px ){

#sidebar {width:30%;}
#searchform{width:80%;}
.center{padding-left:0%;padding-right:0%;}

       
}




@media (max-width: 1199px) {


/* das ist der Menü Button */
.navbar-default .navbar-toggle {
  font-size:1.0rem;text-decoration:underline;border:none;font-weight:bold;border-radius:0px;border:2px solid #696969;
  padding-top:5px;padding-bottom:5px;
}
.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus { background:#efefef; border-radius:0px; 

}/* kein hover */
.navbar-default .navbar-toggle .icon-bar {

}
.caret{float:right;}

    .navbar-header {
        float: none;
    }
	.navbar-header{background:transparent;width:100%;}
    .navbar-toggle {
        display: block; 
    }
    .navbar-collapse {
        border-top: 0px solid transparent;
      box-shadow:none;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
	
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
	.navbar-fixed-top{background:url(images/hg.png);
 opacity: 0.9; 
 height:auto!important;
}
/*padding-left:10px!important;padding-right:10px !important;*/

@media screen and (min-width: 1024px) and (max-width: 1100px ){

#sidebar {width:30%;}
#searchform{width:80%;}
.center{padding-left:0%;padding-right:0%;}

       
}

/*
-----------------------jQuery für three line drop down menu */


	@media screen and (max-width: 768px) {
		#menu {
			width:100%;
			display: block;
			background:#93adce;
			font-size:1.35rem;
			text-align: center;
			
			
		}
		
	#searchform{width:100%;}
	.center{padding-left:0%;padding-right:0%;}
	
		#main-nav.js {
			display: none;
		}
		
		
	ul {
			width:80%;
			list-style:none;
		}
		li {
			width:98%;
			border-right:none;
		}


}

	@media  screen and (min-width: 880px) {
		#menu {
			display: none;
		}
		
		
			
	}
	
	
	}