@import 'https://fonts.googleapis.com/css?family=Open+Sans';
@import "header-nav.css";    
   


body{
    margin:0px;
    background:grey;
    font-family: 'open sans', sans-serif;
}
#content {
    max-width:1100px;
    background: #F0F0F0;
    height: auto;
    margin: 85px auto;
}
/*--Wiederholung aus header-nav.css, da sonst überschrieben-*/
@media screen and (max-width: 768px) {
    #content {
    margin: 65px auto;
    }}
/*-------------------------------*/
h3{
    font-size: 180%;
    line-height: 120%;
    padding: 2%;
    font-weight: 300;
    color: #F5F5F5;
}
p {
    color: #F5F5F5;
    font-size: 115%;
    line-height: 110%;
    padding: 3%;
    font-weight: 300;
    }
img {
    max-width: 100%;  
    display: block;
    margin: auto;
}
/*---------Start Banner---------------*/
#banner {
    width: 100%;    
    height: auto;
    background-color: #6991AC;
    border-bottom: 2px solid grey;
    }
#bannerLeft {
    width: 85%; 
    height: auto;
}
#banner2{
    height: 15%;
    background-color: rgba(69, 131, 61, 0.56); 
    border-bottom: 2px solid grey;
}
#banner2Text{
    margin: 0;
    text-align: center;
}
/*----------Start Main---------*/
#main{
    background-color: #d7d7d7;
    display: flex;
    align-items: center;
    justify-content: center;
}
#mainColLeft{    
    float: left;
    width: 40%;
}
#mainColRight {
    width: 60%;
    background-color: rgba(195, 107, 86, 0.71);
    float: right;
}
/*--------------------MEDIA-----------------------*/
@media screen and (max-width: 768px) {
h3 {
    font-size: 140%;
}
p {
    font-size: 110%;
}
#main{
    flex-direction: column;        
    }
#mainColLeft{    
    width: 100%;
}
#mainColRight {
    width: 100%;
}
}