/* CSS layout */

/* FONT-RALEWAY*/
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/raleway-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/raleway-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/raleway-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('./fonts/raleway-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/raleway-v18-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/raleway-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/raleway-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/raleway-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/raleway-v18-latin-700.woff') format('woff'), /* Modern Browsers */
       url('./fonts/raleway-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/raleway-v18-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/raleway-v18-latin-italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/raleway-v18-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/raleway-v18-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/raleway-v18-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('./fonts/raleway-v18-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/raleway-v18-latin-italic.svg#Raleway') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 700;
  src: url('./fonts/raleway-v18-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('./fonts/raleway-v18-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('./fonts/raleway-v18-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('./fonts/raleway-v18-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('./fonts/raleway-v18-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('./fonts/raleway-v18-latin-700italic.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* CSS layout */

html{
	margin: 0;
	border: 0;
	background:floralwhite;
	font-size: 16px;
		}
	
body {  
		margin: 0 auto;
		min-width: 300px;
		max-width: 950px;
		font-family: "Raleway", "Segoe UI", "Trebuchet MS", "UnDotum", sans-serif;
		
		color: #281B61;
		}
	
	/* === General CSS layout === */
	
*, *::before, *::after{
	box-sizing: border-box;
}
.clearfix::after{
			content:"";
			clear: both;
			display: bock;
			}

.schmal {
	font-size: 0.5rem;
		}
	
.mittel {
	font-size:13px;
		}
.gros {
	font-size:23px;
	font-weight: normal;
				}
.text-navi {
	font-size:15px;
	font-weight: normal;
	padding-left: 10px;
	}

.img{
	max-width: 100%;
	width: 90%;
	height: auto;
	margin-top: 10px;
}
.fig{
	font-size: .8rem;
}
 .img_l{
		height: 160px;
		width: auto;
		float:left;
		margin: 5px;
		padding-right: 15px;
		}
.img_lk{
		height: 100px;
		width: auto;
		float:left;
		margin: 5px;
		}
.img_lg{
		height: auto;
		width: 30%;
		float:left;
		margin: 5px;
		}
.img_rg{
			height: auto;
			width: 30%;
			float:right;
			margin: 0px;
			}
.img_rm{
		height: 140px;
		width: auto;
		float:right;
		margin: 5px;
		}
.img_lm{
		height: 140px;
		width: auto;
		float:left;
		margin: 5px;
		}


.img_2{
		width: 30%;
		height: auto;
		float: right;
		margin: 10px;
}
.img_3{
		width: 90%;
		height: auto;
		
		margin-left: auto;
		margin-right: auto;
}
.img_r{
		height: 160px;
		width: auto;
		float:right;
		margin: 5px;
		}
.img_rk{
		height: 100px;
		width: auto;
		float:right;
		margin: 5px;
		}
.linie {
		height: 14px;
		width: 100%;
		display: block;
		margin-top: 0px;
		margin-left: 0px;
		}
.blocksatz {
		text-align: justify;
		padding: 10px;
		font-size: 16px;
}
.blocksatz_m {
		text-align: justify;
		padding: 10px;
		font-size: 20px;
}
.medium{
	font-size: 1.2rem;
}
hr{
		height: 14px; 
		background-color: green; 
		margin-bottom: 0;
			}
		
	/* === Header === */

.img_txt{
		width: 100%;
		height: 0;
		padding-top: 22.27%;
		background: url("logo/Logo_OGV_nur_TXT.jpg") no-repeat;
		background-size: contain;
		position: relative;
	}

.img_logo{
	display: inline-block;
	width: 22.27%;
	height: auto;
	position: absolute;
	top: -00px;
}
header{
		width: 100%;
		height: 250px;
		position:relative;
		top: 0;
		left:0px;
		display: inline-block;
		background:floralwhite;
		min-width: 700px;
		}


#name{
		margin-top: 20px;
		min-width: 500px; 
		height: 190px;
		position: absolute;
		top: 0;
		left: 200px;
		display: inline-block;
		}
#titel {
		min-width: 100%;
		vposition: absolute;
		vtop: 100px;
		left: 200px;
		display: inline-block;
		}
	/* === Ende Header === */
	/* === Mobile Navigation === */
#mobile-nav-dropdown{
		display: inline-block;
		height: 20px;
	}
#mobile-nav-button{
		color: #FFF;
		font-size: 3rem;
		border: solid 2px #6d3689;
		height: 40px;
		width: 40px;
		position: relative;
	}
#mobile-nav-content{
	display: none;
	}
	
#mobile-nav-button > span{
		Position: absolute;
		bottom: -8px;
		font-size: 3rem;
	}
#mobile-nav-dropdown:hover #mobile-nav-content{
	display: block;
}

/* === Ende Mobile Navigation === */		

/* === Allgemeine Navigation === */
#navi {
		background-color: #bfda78;
		position: relative;
		font-weight: bold;
		font-size: .9rem;
	}
#navi ul {
		width: 150px;
		padding: 0;
		/*margin-left: -23px;*/
		margin-top: 0;
		list-style-type: none;	
	}
#navi  ul li {
		text-align: center;
		margin-top:3px;
		border-color: white !important;
		border: solid;
		border-width: 2px;
		border-radius:10px;
		background-color: #9acd4b;
	}
#navi ul li a {
		display: inline-block;
		width: 100px;
		font-size:13px;
		text-align: center;
		color: darkgreen ;
		background-color: #9acd4b;
		padding: 2px;
		margin: 5px;
		text-decoration: none;
	}
#navi ul  li  a:visited {
		background-color: #9acd4b;
		color: #darkgreen;
	}		
#navi ul li a:hover {
		font-size:13px;
		text-align: center;
		color: #FFF;
		background-color: grey;
		transition: all 0.8s ease;
		border-color: blue;
		border-width: 5px;
	}
.active {
	background-color: #36ebd8 !important;
	}
.active > a{
		background-color: #34ebd8 !important;
		color: #2E0562 !important;
	}
#mobile-nav{
	display: none;
	}	
#mobile-nav-text {
	display: none;
	}
@media(max-width: 768px) {
		#desktop-nav{
			display: none;
			}		
		#mobile-nav{
			display: block;
			}
		#mobile-nav-text{
			display: block;
			}		
	}
/* === Ende Navigation === */
	

/* === GRID SYSTEM === 
.container {
	width: 95%;
	margin-left: auto;
	margin-right:auto;
}
*/
.container {
	margin-left: auto;
	margin-right:auto;
}
.row::after{
		content: "";
		clear: both;
		display: block;
}
[class*='col-'] {
	float: left;
	}
.col-0{	width: 20%;    }
.col-1{	width: 16.666%;}
.col-2{	width: 33.333%;}
.col-3{	width: 50%     }
.col-4{	width: 40%;    }
.col-5{	width: 80%     }  /* Eingefügt 28.10.20*/
.col-6{	width: 100%;   }
.col-7{	width: 13.333%;}  /* Eingefügt 28.10.20*/

.col-4 img{
	width: 90%;
	height: auto;
	margin-top: 10px;
	}

.XXXcol-5 img{
		width: 95%;
		height: auto;
		margin-top: 10px;
	}

@media (max-width: 1024px) {
	.col-1 { width: 33.333%;}
	}
@media (max-width: 768px) {
	.col-0{	width: 100%;  }
	.col-1{	width: 50%;  }
	.col-2{	width: 50%; }
	.col-3{	width: 100%  }
	.col-4{	width: 50%;  }
	.columns{
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;}
	.kids{
		font-size: 1.5rem;
		font-weight: normal;
	}
	}
@media (max-width: 480px) {
	.col-0{	width: 100%;  }
	.col-1{	width: 100%; }
	.col-2{	width: 100%; }
	.col-3{	width: 100%  }
	.col-4{	width: 100%;  }
	}
	/* === Ende GRID SYSTEM === */
	/* === CSS layout Mover === */
#mover h2{
		Position: absolute;
		left: 67%;
		Top: 0;
		width:270px;
		padding: 10px 10px 10px 10px; 
		/*Rand End-Parken */
		/*background-color: #ff9a00;  /*orange */
		background-color: #62AAE3;  /*hellblau */
		border-bottom-left-radius:20px;
		border-bottom-right-radius:20px;
		-webkit-transform: rotate(-1.25deg);
		-transform: rotate(-1.25deg);
		-webkit-animation-name: slidingHeadline;
		-webkit-animation-duration: 5s;		
		-webkit-animation-iteration-count: 1;		
		-webkit-animation-direction: normal;		
		-moz-animation-name: slidingHeadline;
		-moz-animation-duration: 5s;		
		-moz-animation-iteration-count: 1;		
		-moz-animation-direction: normal;
			animation-delay: .5s;
			animation-timing-function: ease-out;
		}
	@keyframes slidingHeadline{
		from {
			margin:0 0 0 -90%;
			/*Startfarbe*/
		  background-color: #6d3689;/*dunkelblau */
			}
		to {
			margin:1.5% 0 0 0;
			/*Ankunft0farbe*/
			background-color: #92f5ff;/*hellblau */
			}
		}
/*	 background-color: #6d3689;
background-color: #92f5ff;
@-moz-keyframes slidingHeadline{
		from {
			margin:0 0 0 -105%;
			background-color: rgba(34,32,34,20);
			}
		to {
			margin:0 ;
			background-color: rgb(200,200,200);
			}
		}
*/
/*	@-webkit-keyframes slidingHeadline{
		from {
			margin:0 0 0 -105%;
			background-color: rgb(250,0,0);
			}
		to {
			margin:0;
		  background-color: rgb(250,0,0);
			}
		}
	@-moz-keyframes slidingHeadline{
		from {
			margin:0 0 0 -105%;
			background-color: rgba(34,32,34,20);
			}
		to {
			margin:0 ;
			background-color: rgb(200,200,200);
			}
		}
*/
#mover h2 span{  /* Feld für Text */
		display: block;
		font-family: "Raleway", "Segoe UI", "Trebuchet MS", "UnDotum", sans-serif;
		font-size: 12px;
		line-height: 120%;
		text-decoration: none;

		padding: 5px 5px; 
		background-color: #fffd00;  /*gelb */
		/*color: rgb(0,0,0);   /*Ohne Auswirkung? */
		/*rgb(255,255,070); /*orange*/
	}
#mover img{
		float:left; 
		margin-right:3px;
		width: 58px;
		height: auto;
	}
	/*  ===  ENDE CSS layout Mover  ===  */

#GD_rund{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-image: url("JL_rund.jpg");
	float:right; 
}
.bilder-kirche{
	width: 92%;
	margin-left: auto;
	margin-right: auto;
}
.img-col3{
	width: 95%;
	height: auto;
}
.img-col5{
	width: 95%;
	height: auto;
}
.box_1 {
		padding: 5px;
		font-weight: 400;
		font-size: 1.0em;
		text-align: center;
		background-color:  #d3d3d342;
		margin-top: 15px;
		border: 3px;
		border-style: solid;
		border-color: #ff8f00;
			}
	/*  background-color: #FFFFD8; */		
.box_1 span {
		font-size: 1.8rem;
		}
.box_1 .klein {
		font-size: 1.0em;
		text-align: justify;
		padding: 5px;
			}
.box_1 .mittel{
		font-size: 1.3em;
		text-align: center;
		padding: 5px;
			}
.box_1 .mittel_block{
		font-size: 1.3em;
		text-align: justify;
		padding: 5px;
			}
.box_1 .schmal {
	font-size: 0.5rem;
}
.box_1 .img_gr{
		height: 160px;
		width: auto;
		float: right;
		margin: 10px;
		}
		
.box_1 .azv{
		width: 80%;
		height: auto;
		float:auto;
		}	
.box_1 .epd{
		height: 80px;
		width: auto;
		float:left;
		}	
.box_1 .img {
		height:auto;
		width: 90%;
		Border: 10em;
		}
.box_2 {
		width: 32%;
		min-width: 200px;
		height: 160px;
		padding: 5px;
		font-weight: 400;
		font-size: 1.0em;
		text-align: center;
		background-color: #FFFFD8;
		background-image: Linear-gradient(#D7B0E5, #FFFFD8);
		border-top-left-radius: 30px;
		border-top-right-radius: 30px;
		margin: 5px 5px;
		box-shadow: 0 0 10px #ff8f00 inset;
		}
.box_A{
			margin-top: 25px;
			border-style: solid;
			border-color: #ff8f00;
			width: 100%;
			vertical-align: super;
			padding: 0 5px;
			font-weight: 400;
			font-size: 1.5em;
			float:left;
	}	
.box_A img{
		padding:0;
		width: 100%;
}	

@media (max-width: 790px) {
	.box_2 {
		min-height: 200px;}
	}
@media (max-width: 480px) {
	.box_2 {
		min-height: 200px;}
	}
#losung {
		margin: 10px;
		background-color: #FFFFD8;
		}
#losung>img{
		max-width: 95%;
		height: auto;
		margin: 10px;
		}

footer {
	padding: 15px;
	height: auto;
	margin-top: 15px; 
	font-size:100%;
	background-color:#9acd4b;
	clear: both;
}
footer>span {
	font-size:80%;
}
Xfigure {
	margin-inline-start: 0;
	margin-inline-end: 0;
}