@charset "utf-8";
/* CSS Document */

	* {
		margin: 0;
		padding: 0;
		}
		
	body {
        max-width: 2500px;
        font-family: 'Montserrat', sans-serif;
		font-size: 14px;
        background-attachment: fixed;
        background-image: url(../img2design/hg_grosses_maennchen2.jpg);
        background-size: 110%;
		background-repeat: no-repeat; 
        background-color: rgba(255,255,255,1.0);
	   }

        h3{
        text-align: left;    
        }

		p{color: #000;}

		div#container{
		text-align: center;
		width: 100%;  /*Eintrag macht die Box responsiv*/   
		margin: 0 auto;  /*zentriert unseren "container" im Browserfenster*/
		flex-wrap: wrap;
		flex-basis: auto;
        margin-bottom: 10%;    
		}

        #section0 {
        padding-top: 1%;
		padding-left: 35%;
        background-image: 100%;
        text-align: center;
        background-color:rgba(255,255,255,0.0);
        }



        ul#navi {
		margin-bottom: -3%;	
		margin-top: 5%;
		height: 130px; 
		text-align: center;
		}

		ul#navi li {
		float: left;     
		width: 19%;
		list-style: none;
		background-color: rgba(13,134,211,1.0);
        margin: 3px;
		}

		ul#navi li a {
		display: block;
		color: #fff;
		text-decoration: none;
		padding: 7px;
		padding-top: 10px;
        color: #fff;
        font-size: 15px;
		}

		ul#navi li a:hover {
		color: rgba(255,120,181,1.0);
		font-weight: bold;
		}

        #section1 {
            
        height: 300px;
        margin-bottom: 15px;
        background-color: rgba(13,134,211,1.00);
        background-size: 30%;
        padding-top: 1%;
        padding-left: 10%;
        padding-right: 10%;
        padding-bottom: 1%;
        color: rgba(255,255,255,1.00);            
        }

        p{
        text-align: left;
        color: #fff;  
        line-height: 19px;
        }

        #section1 p img{
        float: left;
		width:350px;
		height:auto;
        }

		#section1 p img:hover {
		width: 400px;
		display: block;
        background-position: center;
		background-repeat: no-repeat;    
        /*transform: translateY(0px);
		transform: translateX(0px);*/
        transform: rotate(-10deg);
        transition: 2s;
		z-index:10;     
		}

        #section2{
        height: 150px;
        margin-bottom: 15px;
        background-color: rgba(13,134,211,1.00);
        background-size: 30%;
        padding-top: 1%;
        padding-left: 20%;
        padding-right: 20%;
        padding-bottom: 1%;
        color: rgba(255,255,255,1.00);            
        }
    
        #section2 p{
        text-align: center;
        }
		
		
		.floatstop{
        clear: both;
		}

        h2{
        font-weight: lighter;
        }

		footer {
        height: 150px;
/*		background-color: #2FB4F4;*/
		text-align: center;
		color: rgba(0,0,0,1.0);
		list-style: none;
        padding-top: 5%;
		}


		ul#footerdaten li a{
		text-decoration: none;
		color: rgba(0,0,0,1.0);
		line-height: 1.75em;
		}

		ul#footerdaten li a:hover {
		text-decoration: none;
		color: rgba(13,134,211,1.00);
		font-weight: bold;
		}

		footer li{
			list-style: none;
		}

@media (max-width:800px){
	
            body {
            background-attachment: fixed;
            background-image: url(../img2design/hg_grosses_maennchen.jpg);
            background-size: 150%;
            background-repeat: no-repeat;
           }
	
			div#container{
			padding: 30px;
			width: 90%;  
			background-color: rgba(199,127,128,0.00);
			margin: 0 auto;
			padding-left: 5%;	
			flex-wrap: wrap;
			flex-basis: auto;
			text-align: center;
			background-repeat: no-repeat;
			background-size: 80%;
			background-repeat: no-repeat;
			background-position: 50px 5px;
            margin-bottom: 600px;    
			}
	
            #section0 {
            max-width: 40%;    
            margin-bottom: 5%;
            color: rgba(75,60,60,1.00);  
            padding-bottom: 1%;
            padding-top: 1%;    
            }
    
            #logo{
            margin-top: -10%;
            margin-left: -95%;    
            text-align: center;
            }
		
			ul#navi {
			margin-top: 5%;
			margin-bottom: 40%;	
			}
		
		
			ul#navi {
			}

			ul#navi li {
			width: 100%;
			}

			ul#navi li a {
			/*background-color: #D19D1A;*/
			}
    
            h3{
            text-align: center;    
            }
		
			#section1 p{
			text-align: center;
            max-height: 400px;
			}

            #section1 p img{
            width:350px;
            margin-left: -8%;
            padding-left: -15%;
                            float: none;
            }
    
            #section1 {
            padding-top: 5%;    
            height: 500px;
            margin-top: 5%;        
            margin-bottom: 15px;
            background-color: rgba(13,134,211,1.00);
            padding-top: 1%;
            padding-bottom: 1%;
            color: rgba(255,255,255,1.00);            
            }
    
    		#section1 p img:hover {
            margin-left: 0%;
            padding-left: 0%;
		    width: 400px;
            display: block;
            background-position: center;
            /*transform: translateY(0px);
            transform: translateX(0px);*/
            transform: rotate(-10deg);
            transition: 2s;
            z-index:10;     
            }


        #section2{
        height: 200px;
        margin-bottom: 15px;
        background-color: rgba(13,134,211,1.00);
        background-size: 30%;
        padding-top: 1%;
        padding-left: 20%;
        padding-right: 20%;
        padding-bottom: 1%;
        color: rgba(255,255,255,1.00);            
        }
    
}