/*********CSS script layout 5 eulerkidsfoundation.com**********/


	@media screen and (max-width:55em) {
	
		body {
		 font-size: 80% !important;
	}
	
	#menu {
		background-color: #2942AF;
	}
	
	.parallel {
		width: 100% !important;
		border: 0px solid black;
		padding: 0px;
	}
	
	article a {
         color:#000;
    }
	article a:hover {
         background-color: #8394ce;
    }

    article a:activ {
         background-color: #8394ce;
    }
	article a:visited {
         color: #000;
    }
	
		.pic_large {
		width: 75% !important;
		height: auto !important;
		max-width: 400px;
	}
	}
	
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
	body {
		 font: normal 100.01% Gothic, Helvetica, Arial, sans-serif; 
         color: black;
         background-color: #FFFFFF;
		}

    #visible {
         background-color:#FFFFFF;
         margin:0px auto; 
		 width: 96%;
         height: auto;
         border: solid 0px #cdc4c1;
         overflow: hidden;
         }
		/* ++++++++ Header +++++++++++ */
    header {
         width: 100%;
         height: 293px;
		 background-image: url(../data/header.jpg); 
		 padding: 10px; 
		 height: 273px; 
		 background-position: 35% 50%; 
		 background-repeat: no-repeat; 
		 background-size: cover;
    }
	
	#title {
		font-size: 1.33em;
		color: white;
		text-shadow: 0.05em 0.1em 0.2em #333;
		background: rgba( 60, 60, 60, 0.3);
	}
	
	.title_big {
		font-size: 2.4em !important;
	}

    #headline {
         margin: 12px 0px 12px 0px;
         font-size: 22px;
		 position: absolute;
		 bottom: 10px;
		 right: 10px;
    }

			/* ++++++++ Menu +++++++++++ */
			
	#menubar {
		padding: 0.5em 7.5px;
		width: 100%; 
		height: auto; 
		font-size: 2em;
		color: black; 
		display: block;
		background: #FFD80E;
		margin: 0.5em 0 0 0;
		font-variant-caps: unicase;
    }
	#smallarlize {
		display: none;
	}
	
	#menubar img {
		height: 1em;
		float: right;
		margin-right: 20px;
    }
	
	#menubar a {
		 
		 
	}
	#menu {
		display: none;
		margin-bottom: 1em;
		background-color: #2942AF;
		margin-top: 2px;
	}
	#menu ul {
		margin: 0;
		padding: 1em 0;
        text-align: left;
	}
	#menu ul li {
		 list-style: none;
         margin: 0em;
         display: block;
         padding: 5px 2%;
         border-right: solid 0px;
	}		

    #navlink{
         text-decoration:inherit;
         font-size: 1.6em;
    }
    #navlink:hover{
         color: white;
		 
    }
    #navlink:active{
         opacity: 0.5;
    }
    #currentnavlink li{
         text-decoration: underline;
         font-size: 1.6em;
    }
	#menu ul li:hover {
		background: #6f8acf;
	}

    .welcome {
         color: #dd3308;
    }
    .who {
         color: #BB909B;
    }
    .projects {
         color: #F19A27;
    }
    .donation {
         color: #AAB983;
    }
    .contact {
         color: #F0E3B7;
    }

		/* ++++++++ Content +++++++++++ */
		
	h2 {
		color: #5a71d8;
	}
		
    #line {
         margin: 10px 0px;
		 width: 100%;
         border: none;
		 border-top: 1px solid #2942AF; 
		 clear: both;
    }

	#content {
		display: block;
		padding: 0.5em 0;
		line-height: 160%;

	}
	
	.text_fat {
         margin: 1.1em 0px 1.1em 0px;
         font-size: 1.25em;
    }
	
	.text_pic {
		border: 0px;
		width: 70%;
		display: block;
		margin: 0.5em auto; 
		float: inherit;
	}
	
	.pic_large {
		border: 0px;
		display: block;
		margin: 0.5em auto;
		float: inherit;
	}
	
	
	/* +++++++++++++++++++++ sidelink +++++++++++++ */
	.sidelinks {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.sidelinks h2{
		width: 100%
	}
	
	#linkpic {
		width: 18em;
		margin: 0.5em auto;
		background: url(data/link-bazaar.jpg); /* +++++ Ändern +++++ */
		background-position: 35% 50%; 
		background-repeat: no-repeat; 
		background-size: cover; 
		height: 10em; 
		display: flex; 
		flex-direction: column-reverse;
		padding: 0;
    }
	#linkpic a {
		width: 98%; 
		background: rgba( 60, 60, 60, 0.6); 
		margin: 0;
		font-size: 1.25em;
	    color:#FFF;
		padding: 0.2em 1%;
		text-decoration: none;
    }

    #linkpic a:hover {
         color: #cdc4c1;
		 background: rgba( 60, 60, 60, 0.8);
    }

    #linkpic a:activ {
         color: #cdc4c1;
    }
	
		/* ++++++++++++++ footer +++++++++++ */
	#footer {
         background-color: #2942AF;
         width: 100%;
         height: 100px;
         color: white;
         padding: 5px;
         margin: 10px auto;
         font-size: 15px;
    }
	
	
	
	




/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

	@media screen and (min-width:30em) {
		
	
	
	
	/* ++++++++++++ Content ++++++++++++ */
	.text_pic {
		border: 0px;
		height: 10em;
		width: auto;
		float: right;
		margin-left: 1.2em; 
		margin-bottom: 1.2em;
		transition: transform .5s ease; /* Animation */
		max-width: 15em
	}

		
	
	}