@font-face { font-family: 'PinkChicken';
             src: url('../ttf/PinkChicken-Regular.ttf') format('truetype'); }
@font-face { font-family: 'KaBlam';
             src: url('../ttf/KaBlam.ttf') format('truetype'); }
@font-face { font-family: 'Urusans';
             src: url('../ttf/Urusans-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Titillium';
             src: url('../ttf/Titillium-Regular.otf') format('opentype'); }
			 
			 
			 
html{
scroll-behavior: smooth; 
overflow-y: scroll;
}

body{
 hyphens: auto;
text-decoration: none;
font-family: Urusans;
background-color: #ececec;
margin:0;
padding:0;
}

.img-fit {
   margin-bottom: 10px;
   margin-top: 10px;
   width: 480px;
   object-fit: cover;
   height: auto; 
   
}

@media (max-width: 480px) {
.img-fit {
   width: 240px;
   object-fit: cover;
   height: auto; 
}
}	
 

.wrapper{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.topcontainer{
display: flex;
flex-direction: column;
justify-content: center; 
align-items: center; 
background-color:#fff;
width: 100%;
}

@media (min-width: 900px) {
	.topcontainer{
		width:900px;
	}
}

.container{
font-family:Titillium;
width: 100%;
padding:0;
margin:0;
border:0;
}



.headlineImg{
height:200px; 
background-position:left; 
position:relative;
}

.bottom{
display: flex;
flex-wrap:wrap;
justify-content: center;

height: auto; 
background: #3cad00; 
color: white;
width: 100%
}




.bottombox{
width: 50%;

	float: left;
	display: inline-block; 
	box-sizing: border-box;
    padding: 20px;
}

@media (min-width: 900px) {
.bottombox{
width:25%

}
}


.bottombox a:hover {
text-decoration: underline;
color:white;
}
.bottombox a{
text-decoration:none;
color:white;
}

.row {
	position: sticky;
    top: 0px;
	z-index:1;
	width:100%;
	max-height: 55px;
	display: flex;
	flex-direction: column;	
	align-items: flex-end;
	}
	
@media (min-width: 900px) {
.row {

}
}


/*Navigation*/
nav.main { 

	max-height:0; 
	background: #555; 
	overflow:hidden;
	
	display: flex;
	flex-direction: column;
	flex-wrap:wrap;

	width: auto;
	
	position:absolute;
	top:55px;

    transition: all 0.5s;
	
	padding:0;
	margin:0;
}


@media (min-width: 900px) {
nav.main { 
	
	max-height: 1600px;
	top:0;
	background: #fff; 
	flex-direction: row;
	justify-content: center;
	width: 100%;
	overflow: visible;

}

}

nav.main ul {
padding:0;
margin:0;
}

nav.main li {
    list-style: none;
    margin: 0; 
    padding: 0;
	display:block;
    text-align: left;

}

@media (min-width: 900px) {
	nav.main li {
		display:inline-block;
	}
}

nav.main li>a {
    display: inline-block;
	font-size:1.4em;
	color: white; 
	text-decoration: none;
	padding:7px;
	margin:0.2em;
	
	width: 100%;
}


@media (min-width: 900px) {
nav.main li>a {
	color: #3cad00; 
}
}


nav.main ul li ul {
   display: none;
   position: absolute;
}

@media (min-width: 900px) {
 nav.main ul li:hover>ul, nav.main ul li:focus-within>ul {
 display: block;
}
}

nav.main li a:hover {
    color: #19321e;
}
nav.main ul>li>ul>li>a {
    background-color: white;
    font-size: 1em;
	color: #3cad00; 
	margin:0;
	padding:7px;
}
nav.main ul>li>ul>li{
display:block;
text-align: left;

}



/*checkbox*/
nav > input, nav label {
    display: none;
}


h2.headline{
/*margin: 0 80px;*/
margin: 0 ;
font-family:Urusans; 
color:black; 
/*position: absolute; 
bottom: 0;  
left: 0;*/  
font-size: 2em
}


@media (min-width: 900px) {
.anchor{
visibility: hidden; 
height: 0px;  
margin: -80px;
position:absolute;
}
}

h2>.anchor{
position:absolute; 
top:-170px;
}


.textbox{
padding: 20px;
}



h3{
position:relative;
margin: 0;
padding:0;
}

@media (min-width: 900px) {
h2>.anchor{
top:-100px;
}
}

.texttop{
margin: 10px auto;
}

@media (min-width: 900px) {
.texttop{
max-width:45em;
margin: 10px auto;
}
}


.text{
font-size: 1.25rem;
line-height:2rem;
}

@media (min-width: 900px) {
.text{
column-width: 21em;
text-align:justify;
font-size: 1rem;
line-height:1.25rem;
}
}

@media (min-width: 900px) {

.container{
width:900px;
}


span.line{
max-height:0px;
}


}
	

.mixed>* { 
   width: 45%; 
   margin: 10px; border: 1px solid silver;
}
@media (min-width: 980px) {
   .mixed>* { width: 22%;}
}




/*hamburger*/

label.hamburg { 

   display:block;
   float: right;
      
   background: #555; 
   width: 75px; 
   height: 50px; 
   position: absolute; 
   /*border-radius: 4px; */
}

@media (min-width: 900px) {
label.hamburg { 
max-height: 0px;
}
}

input#hamburg {display:none}

.line { 
   position: absolute; 
   left:10px;
   height: 4px; width: 55px; 
   background: #fff; 
   border-radius: 2px;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

#hamburg:checked + .hamburg .line:nth-child(1){
   transform: translateY(12px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
   transform: translateY(-12px) rotate(45deg);
}

#hamburg:checked + .hamburg  + nav.main { 
    max-height: 1600px; 	

	
}


A:hover { 
	text-decoration:none; 
	
	color: #4e713c;
	   
	
}




/*

background-color: rgba(198,226,255, 0.3);



flex{
display: flex; 
justify-content: center; 
align-items: center;
}

test{
background-color:blue;
font-size:90em;
}	




			 





ul {
	font-family: Georgia;
	font-size: 12pt;
	list-style-type: none;
	list-style-image: url("../bp.png"); 
}
*/
/*A:after { content:url(../wl.gif)" "; } */