/* =================================================

Stylesheet für die Website der reformiert-info.de Emden1571

unter "http://www.reformiert-info.de"   

Datei: emden1571.css

Datum: 21. Oktober 2019

Autor:  Klaus Vogler

================================================== */



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



@media screen {

/* ========================== Layout (Größe und Positionierung) =========================================*/

* {

	box-sizing: border-box;

}

.flex-container {
	width: 100%;
  display:flex;
  
}
.flex-item-1 {
	
flex-basis:0%;

  order: 2;
}

.flex-item-2 { 

flex-basis:100%;
order: 1;
flex: 1;
}

body {
font-family: Geneva, Helvetica, Arial,  sans-serif;
	

	max-width: 1100px;

	margin: 0 auto;

}

.wrap {

	padding: 0 0em;

}

header {
/*	background: rgba(255,255,255,0.3); */
	
	padding: 0em 0;
	

	margin: 1% 0 0 0;
	clear:both;
	

}

.logo img{
	position: relative;
	

	top: 1em;
	width: 66%;
	height:auto;
	
	margin-bottom: 1em;

	

}

.logo a:hover  {
background: none;	
}
.logo a {
background: none;	
}

.slider {

	position: relative;

	margin-bottom: 0%;
	float:right;
	

}

.slider a {

	position: absolute;

	top: 1em;

	left: 1em;

	font-size: 30px;

	color: black;

	text-decoration: none;

	padding: 6px;

	background-color: white;

	opacity: 0.6;

}

.slider a:hover {

	color: white;

	text-decoration: none;

	padding: 6px;

	background-color: black;

	opacity: 0.6;

	transition: background-color 0.3s;

}



.welcome {

    padding: 1em 2em;

	margin-bottom: 3%;

}



/* Gestaltung der Featured Artikel auf Startseite oben */

.featured {

	float: left;

	width: 32.3%; 

	margin-right: 0%;

	margin-bottom: 0%;

	text-align: center;

	

	overflow: hidden;

	background: rgba(255,255,255,0.8);

}

.featured p {

	text-align: left;

}

article.featured:last-child {

	float: left;

	width: 32.3%;

	margin-bottom: 0%;

	margin-right: 0;

	text-align: center;

	

	overflow: hidden;

	background: rgba(255,255,255,0.8);

}

.featured #content_part_liste_titel {
	visibility: hidden;
	visibility:collapse;
	height:0px;}

.readon {

	float: right;

	padding: 0.2em;

	border: 1px solid #555555;

}

/* Ende Gestaltung der Featured Artikel auf Startseite oben */



/* Gestaltung Termine */

#termine h3 {

	margin: 2em 2em 1em 2em;

}

#termine h4 {

	margin: 1em 2em;

}

#kalender {

	float: left;

    background-color: #999999;

    color: #ffffff;

    font-size: 1.5em;

    margin: 0 10px 0 0;

    padding: 5px;

}

#termine article h3 {

	margin-top: 0;

}

#termine article h3, #termine article h4, #termine article h5, #termine article p {

	margin-left: 0px;

}

/* Ende Gestaltung Termine */



/* Bilder mit Bildunterschriften */

figure {

	display: table;

	padding: 10px

}

figcaption {

	display: table-caption;

	caption-side: bottom ;

	text-align: center;

	font-size: 15px;

	font-size:0.9375rem;

	font-weight:700;

}

/* Ende Bilder mit Bildunterschriften */

section.news {

	float: left;

	width: 65.6%;

	margin: 0 3% 3% 0;

}

article {

	padding: 1em 1em;

}

article.news {

	margin-bottom: 1em;

}

section.sidebar_right {
	
	background-image:url(../../../emden1571/dueren_01.png);
	background-position:top;
	background-repeat:no-repeat;
	background-size:auto;
	background-size:contain;
	margin-right:-3%;
	padding-right:-2%;
	
padding-top: 7.5em;
	width: 20em;
	min-height:5em;

}
 

.sidebar_right article {
	
	background-color: rgba(229,229,229,0.7);
	
	margin-bottom: 3%;
	
	
	

}


section.sidebar_left {
	

	float: right;

	width: 30%;
	margin: 1em 1em 3% 1em;
	

}

section.main {

	float: none;

	width: 100%;

	


}

.pagefooter {
	
	

	clear: both;

	padding: 0.1% 3% 1% 3%;
	margin: 1% 0;


}

.footer_menu {

    float: right;

}

address {

	float: left;

	width: 31.3%;
	
	margin-right: 3%;

	

}

.fa {

	margin-right: 0.7em;

}

.transparency {

	float: left;

	width: 31.3%;

	margin-right: 3%;

	

}

ul.socialmedia {

	padding-top: 1em;

	margin: 0;

}

ul.socialmedia li {

	float: right;

	margin-left: 2em;

}

ul.data {

	

}

ul.data li {

	float: right;

	margin-left: 0.4em;

}

.copyright {

	clear: both;

	padding-top: 0.2em;

}



/* ========================== Inhalt (Gestaltung einzelner Elemente) =========================================*/

html {

	

	
	
	background-color: #161A1D;
background-color: #ffffff;
	

	font-family: 'Source Sans Pro', Arial, sans-serif;

	

}

body {

	

	font-size: 14px;

	font-size: 1.0rem;

	color: #333;

}

.welcome {

	background: rgba(255,255,255,0.8);

}

.welcome h1 {

	font-family: 'Source Sans Pro', Arial, sans-serif;

	font-weight:700;

	font-size: 26px;

	font-size: 1.625rem;

	color: #65AED5

}

.welcome p {

	font-size: 20px;

	font-size: 1.25rem;

	font-weight: 700;

}

section.news {

	overflow: hidden;

	

}

section.list {
	border-top: #333333 thin solid;
	margin:0 1.2%;
	
	width: 67.6%;
padding: 0 0 1% 0;
display:block;
float:none;
position: relative;





}

section.sidebar_right {
	margin-top: 11%;

	

}

.sidebar_right h3 {

	color: white;

	padding: 0.4em 0.9em;

	background: #aaa;

}

section.sidebar_left {

	background: rgba(255,255,255,0.8);

	padding-top: 1em;

}

section.main {

	

}

.pagefooter {

	color: white;

	background: #333333;

}

.pagefooter a {

	color: white;
	
	background: none;

	text-decoration: none;

}

address {

	text-align: left;

	font-style: normal;

}

ul.socialmedia li {

	display: inline-block;

}

ul.data li {

	display: inline-block;

}

.copyright {

	text-align: center;	

}

h1 {

	font-family: 'Source Sans Pro', Arial, sans-serif;

	font-weight:700;

	font-size: 26px;

	font-size: 1.625rem;

	color: #cccccc;
	color:#333333;
	width:69%;

}

h2 {

	font-family: 'Source Sans Pro', Arial, sans-serif;

	font-weight:700;

	font-size: 22px;

	font-size: 1.375rem;

	color: #333333;

}



h3 {

	font-family: 'Source Sans Pro', Arial, sans-serif;

	font-weight:700;

	font-size: 20px;

	font-size: 1.25rem;

	color: #333333;

}

/* Sections Kachel */


section.kachel {
	width: 100%;

	margin: -6% -2% 0% -2%;

}


section.kachel h3 {display:none; visibility:hidden}

h5 {

	font-size: 16px;

	font-size: 1rem;

	font-weight: 300;

	margin: -0.8em 0 1em 0;

}

.subtitle {

	float: none;

	font-weight: 600;

	margin-top: -0.5em;

}

section.main img {

	max-width: 100%;
	

}

#pict_1_block {
	
	position:relative;
	width: 30%;
	float:right;
	margin-top:-4%;
	margin-right:-1.6%;


	
}
#pict_1_text {
	margin-top: 3%;
	
	padding: 3% 0% 0 0%;

	
}

section.kachel img {

	max-width: 100%;
	float:none;
	margin-right: 0;


	height: auto;

}

#content-h1 {
	float:left;	
}

#content_text2 img {

	max-width: 100%;
	float:none;
	margin-right: 0;


	height: auto;

}

#content_text2 {
	text-align:justify;
	width:69%;
	
}

#content_fuss {
	
	width:69%;
	
}

.img_right {

	float: right;

	margin-left: 15px;

}

.img_left {

	float: left;

	margin-right: 15px;

}
#content_part_liste_eintrag {
	border-top: 0.5em;
	margin-top: 0.5em;
	width: 100%;
	float: none;
	clear:both;
	
}

#content_part_liste_eintrag h3 {

margin-bottom: 0em;
}

.featured #content_part_liste_bild_right {
	float:none;
	width: 100%;
	border-left:1em;
	border-bottom:1em;
	margin-bottom:1em;
	margin-left:1em;
	
}


#content_part_liste_bild_right {
	float:right;
	width: 33%;
	border-left:1em;
	border-bottom:1em;
	margin-bottom:1em;
	margin-left:1em;
	
}
.featured #content_part_liste_bild_left {
	float:none;
	width: 100%;
	border-right:1em;
	border-bottom:1em;
	margin-right:1em;
	margin-bottom:1em;
	
}
#content_part_liste_bild_left {
	float:left;
	width: 33%;
	border-right:1em;
	border-bottom:1em;
	margin-right:1em;
	margin-bottom:1em;
	
	
	
}

.featured #content_part_liste_inhalt { visibility:hidden; display:none;
	
}

article h3 a, article h3 a:visited {

	color: #65AED5

	text-decoration: none;

}

article h3 a:hover, article h3 a:focus {

	color: #65AED5

	text-decoration: underline;

}

.sidebar_right h3 a:hover, .sidebar_right h3 a:focus {

	color: #ffffff;	

	text-decoration: underline;

}

.sidebar_right h3 a, .sidebar_right h3 a:visited {

	color: #ffffff;	

}

a {
    
	color: #DA538D;
	
	text-decoration: none;

}

a:hover, a:focus {
	background-color:#aaa;

	color: #fff;

	text-decoration: underline;

}

#zaehler {display:none; visibility:collapse;}

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



/*Navigation Menü oben*/

nav {
	position:relative;
	margin-top: 1%;
	
	clear: both;
background-color: #333333;
height:2.8em;
	
	
	

}

nav ul {

	padding: 0;

	margin: 0;

	float: right;

}

nav li {

	display: inline-block;

	position:relative;

	padding: 0.9em 1em;

	margin: 0;

	list-style-type: none;

	font-family: Tahoma, Arial, sans-serif;

	font-size: 0.9em;

	font-weight: 400;

	color: #fff;

	text-transform: uppercase;

	transition: background-color 0.3s;

	background: #333333;

}

nav li a {

	color: #fff;
	background:none;

	text-decoration: none;

}

nav li.active {

	color: white;

	background: #aaa;

}

nav li.active_devider {

	color: white;

	background: #aaa;

}

nav li.active a {

	color: white;

	text-decoration: none;

}

nav li:hover, nav li:focus {

	color: white;

	background: #aaa;

}

nav li:hover a, nav li:focus a {

	color: white;
background:none;
	text-decoration: none;

}



/* Navigation Menü oben Dropdown*/ 

nav ul.submenu li {

	clear: both;

	padding: 0.5em 1em;

	font-size: 0.9em;

}

nav li:hover ul.submenu {

	display: block;

	background: rgba(142,0,66,0.7);

	z-index: 10;

}

nav ul.submenu {
 
	position: absolute;


	bottom: 3em;

	right: 0em; 

	display:none;

	text-align: center;

}

nav ul.submenu li {

	color: white;

	text-transform: none;

	min-width: 14.2em;

}

nav ul.submenu li:hover, nav ul.submenu li:focus {

	background: #aaa;

}



.slicknav_menu {

	display: none;

}





/*Navigation Menü links*/

ul.menu_left  {

	padding: 0;

	margin: 0;

	float: none;

}

.menu_left li {

	display: block;

	position:relative;

	padding: 0.9em 1em;

	margin-bottom: 0.15em;

	list-style-type: none;

	font-family: Tahoma, Arial, sans-serif;

	font-size: 0.8em;

	font-weight: 400;

	text-transform: uppercase;

	transition: background-color 0.3s;

	background: #aaa;



}

.menu_left li a {

	color: #333;

	text-decoration: none;

}

.menu_left li:hover, nav li:focus {

	color: white;

	background: #aaa;

}

.menu_left li:hover a, nav li:focus a {

	color: white;

	text-decoration: none;

}

.menu_left li.active {

	color: white;

	background: #aaa;

}

.menu_left li.active a {

	color: white;

	text-decoration: none;

}

.menu_left_submenu li {
    
	font-size: 0.7em;
	
	

	text-transform: none;

	text-align: right;
	margin-left: 1em;
	padding-left:1em;

}

.menu_left li.submenu a {
   
	font-size: 0.7em;
	
	

	text-transform: none;

	text-align: right;
	margin-left: 1em;
	padding-left:1em;

}

.menu_left_submenu li.active a {
	

	
	

	text-transform: none;

	text-align: right;
	margin-left: 1em;
	padding-left:1em;

}




/*Navigation Menü Soziale Netzwerke*/

#soziale-netzwerke {

	overflow: hidden;

	background-color: #aaa;

	padding: 0 2% 2% 2%;

	margin: 3em 0 1em 0;

}

#soziales-netz ul {

	float: left;

}

#soziales-netz li {

	list-style-type:none;

	display: inline-block;

	float: right;

	margin-left: 20px;

}

	#cookie-popup { 
  text-align: center; 
  background: #fff;
  position: fixed;
  top: 0px; 
  left: 0;
  right: 0;
  z-index: 9999;
  font-size:14px; 
  line-height:20px;
  padding: 20px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  }
 
#cookie-popup.hidden {
  display: none;
}

}











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

body {

	width: 85%;

	font-size:15px;

	font-size:0.9375rem;

}

.wrap {

	padding: 0 0em;

}

.welcome {

    padding: 1em 1em;

	margin-bottom: 3%;

}



main {

	line-height: 1.6;

}

article {

	padding: 1em;

}

article.left {

	margin-bottom: 1em;

}

.pageheader {

	padding: 0.25em 0 0 0;
	

}

.slider {

	margin-bottom: 0em;

}

.left {

	width: 65%;

}

.aside {

	width: 30%;

	padding-left: 15px;

	margin-bottom: 15px;

}

h2 {

	font-size: 20px;

	font-size: 1.25rem;

}

h3 {

	font-size: 18px;

	font-size: 1.125rem;

}

nav li {

	font-size: 0.95em;

	padding: 0.75em 0.5em;

	color: white;

}

nav ul.submenu {

	position: absolute;

	top: 2.7em;

	left: 0;

	display:none;

	text-align: center;

}

#nav li:hover ul.level2 {

	margin-left: -0.5em;

}

.logo img {

width: 60%;
	


}

section.main img {

	margin-top:-6%;
	
	
	

}

.footer_menu {

	float: none;

	margin-bottom: 10px;

	text-align: center;

}



}





 @media screen and (min-width: 280px) and (max-width: 789px) {

body {

	width: 96%;

   -moz-hyphens: auto;

   -o-hyphens: auto;

   -webkit-hyphens: auto;

   -ms-hyphens: auto;

   hyphens: auto; 

} 

.wrap {

	padding: 0 0em;

}

.welcome {

    padding: 0.5em 0.5em;

	margin-bottom: 3%;

}

article {

	padding: 0.5em;

}

/* Featured Artikel */

.featured {

	float: left;

	width: 32%; 

	margin-right: 0;

	margin-bottom: 0%;

}

article.featured {
padding: 1em 1em;

}

article.featured:last-child {

	float: left;

	width: 32%; 

	margin-right: 0;

	margin-bottom: 2%;

}

/* Sections untereinander */

section.news {

	float: none;

	width: 100%;

	margin: 0 3% 3% 0;

}

/* Sections Kachel */

section.kachel {

	
width: 100%;
	margin: -2% 1% 1% 0;

}

h1 {
width:100%;

}

section.kachel h3 {display:none; visibility:hidden}

section.sidebar_right {

	float: none;

	width: 100%;
	margin-top: 20%;
	margin-bottom: 2%;

}

section.sidebar_left {

	float: none;

	width: 100%;

	margin-bottom: 2%;

}

section.main {
	
	border-top: #333333 thin solid;

	float: none;

	width: 100%;

	margin: 3% 0 1% 0%; 

}

section.main img {

	
}

section.kachel img {

	max-width: 100%;
	float:none;
	margin-top:-5%; 
	
	padding: 0 2% 3% 3%;


	height: auto;

}

#pict_1_block {
padding: 1% 0 3% 3%;


	
}
#pict_1_text {
	font-size:0.85em;
	

	
}

.pagefooter {

	padding: 1% 3% 1% 3%;

	

}


/* Navigation und Kopfbereich */

#nav {

	display:none;

}

	

.slicknav_menu {
	magin-left:40%;
	padding-left:40%;
	padding-top: 5%;
	display:block;

}

.slicknav_btn {

  background-color: #aaa; }
  .slicknav_nav a:hover {

      background: #aaa;
  }
    .slicknav_nav a {
		text-align:right;
		
		

      background: rgba(204,204,204,1);}

.logo img {
	background-color:#FFFFFF;
	position: absolute;
width: 44%;
	top: 2%;
	margin-left:4%;


}

header {
	background: none;
	height: 35px;

	margin-bottom: 0;

	padding: 0;

}

section.list {
	padding:2%;
	margin:0%;
	
	width: 100%;
	float:none;


}

#content_text2 {
	
	width:100%;
	float:none;
}


address {

    float: none;

	width: 100%;

	margin-right: 0;

	margin-bottom: 30px;

	border-right: none;

	text-align: center;

}

.transparency {

    float: none;

	width: 100%;

	margin-right: 0;

	border-right: none;

	margin-bottom: 30px;

	text-align: center;

}

.footer_menu {

    float: none;

	width: 100%;

	margin-right: 0;

	margin-bottom: 0px;

	border-right: none;

	text-align: center;

}

ul.socialmedia li {

	float: none;

	margin-left: 2em;

	text-align: center;

}

ul.socialmedia li:first-child {

	margin-left: 0;

}

ul.data {
text-align: center;
	margin-top: 0em;

}

ul.data li {

	float: none;
text-align: center;
	margin-left: 0em;

}

.flex-container {
  display:flex;
  flex-direction: column;
}
.flex-item-1 { 
flex-basis:100%;

  order: 2;
}

.flex-item-2 { 
flex-basis:100%;

  flex: 1;
  order: 1;
}
}





#side {
	top: -20px;
	margin-top: -40px;
	}





































 @media print {

* {

	color:#000 !important;

	box-shadow:none !important;

	text-shadow:none !important;

	background:transparent !important;

}

html {

	background-color:#fff;

}

nav {

	display:none;

}

a[href]:after {

	content: " (" attr(href) ") ";

}

a[href] {

	font-weight:bold;

	text-decoration:underline;

	color:#06c;

	border:none;

}

a[href^="javascript:"]:after, a[href^="#"]:after {

	content:"";

}

abbr[title]:after {

	content: " (" attr(title) ")";

}

figure {

	margin-bottom:1em;

	overflow:hidden;

}

figure img {

	border:1px solid #000;

}

}