@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic");
@import url("navi.css");


/* Basic */

 html{
     box-sizing: border-box;
     margin: 0;	
     padding: 0;
     font-size: 100%;
     border: 0;
 }
 
 *, *:before, *:after{
    box-sizing:inherit;
    font: inherit;
    vertical-align: baseline;}


body, input, select, textarea {
    color: #666;
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.65em;      }

    body {
        background: rgb(238, 238, 238);
        }

        ul    {list-style: none;}
        ul li, a {text-decoration: none;}
     

@media (min-width: 960px){
        .limit-width {
        max-width: 1200px;
        margin: auto;}    }




/*header Kopf*/

#head_section {
    padding: 9em 0 9em 0 ;padding: 20vh 0;
    background-color: #4686a0;
    color: rgba(255, 255, 255, 0.75);
    background-attachment: fixed,fixed,	fixed;
    
    background-position: top left,center center,center center;
    background-size: auto,cover,cover;
    overflow: hidden;
    position: relative;
    text-align: center;
                }

#head_section h1, #head_sectionh2, #head_section h3, #head_sectionh4, #head_section h5, #head_section h6, #head_section strong, #head_section b,  #head_section p {color: #ffffff; }
    #head_section p { margin: 1em 0 0 0; }


    /*Verlauf*/
.gradient{
    background-image: url(images/overlay2.png), url(images/overlay3.svg), linear-gradient(279deg, #004519 5%, #0d3f13 30%, #2a14a3);
    background-color: #1d4525;
            }


.bilder img {  width: 100%;}





/*Font formatierung*/


    h1 {
        font-size: 3em;
        line-height: 1.35em;
        }
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
        color: inherit;
        text-decoration: none;
    }
      
    h1, h2, h3, h4, h5, h6 {
        color: rgb(39, 39, 48);
        margin: 0 0 1em 0;
    }
    h2 {
        font-size: 2em;
        line-height: 1.35em;
    }
    strong{ font-weight: 600;}
    

 body, p{
    font-size: 1.25rem;
    line-height:1.5em;
}
/*----------------------------------------main--------------------*/
    /*.section.section{ padding: 50px 0;}*/
    .x2 {
        width: 46%;
        margin: 0 auto;
    }

.container{ width: 100%;margin: 0 auto;padding: 0 2%; }
    .container.color{background-color: #e3e6e4;padding: 5% 0;}

    @media (min-width: 1500px){
        .container { max-width: 1600px;  margin:0 auto;}
       #hero {padding: 150px 0; }
         }

    @media (max-width: 1200px){
.container { max-width: 1400px; padding:5%;  margin:0 auto;}

 }

  @media (max-width: 1000px){
      
.container{
    padding: 4%;
}
.flex.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: space-around;
    flex-direction: column;
    flex-wrap: wrap;}
    .x2 {
        width: 100%;
        margin: 0 auto;
        padding: 5%;
    }
}

    .bilder.fit {
        display: block;
        margin: 0 0 2em 0;
        width: 100%;
    }

    .bilder {
        border-radius: 4px;
        border: 0;
        display: inline-block;
        position: relative;
    }
    .btn {
        border: none;
        padding: 10px 25px;
        cursor: pointer;  background-color: #1d4525;
        font-weight: 900;
        color: #fff;
        font-size: 18px;
        text-transform: uppercase;
        position: relative;}
        
        .listyle li {
            padding: 10px 0;
            line-height: 1.13em;
        }
        .listyle li:before {
            content: "";
            position: absolute;
            left: 0px;
            margin-top: 21px!important;
            width: 10px;
            height: 10px;
            background: #1d4525;
            display: inline-block;
            float: left;
            line-height: 4rem;
        }
    

    /* Footer */


    #footer {
        padding: 6em 0 6em 0;
        background-color: #4686a0;
        color: rgba(255, 255, 255, 0.75);
        background-attachment: fixed, fixed, fixed;
        background-image: url(img/rauschen.png),  linear-gradient(45deg, #1a5831 5%, #123c17 30%, #2a14a3);
        background-position: top left, center center, center center;
        background-size: auto, cover, cover;
        text-align: center;
    }

            ul.icons, ul li {
                cursor: default;
                list-style: none;
                padding-left: 0;
            }
                ul.icons li {
                    display: inline-block;
                    padding: 0 1.25em 0 0;
                }
  #footer .copyright {
       font-size: 0.8em;
       list-style: none;
       margin: 2em 0 0 0;
       padding: 0;
                      }
            #footer a { color:#fff;}    
                
                .icon {   color: #fff;
                    border-bottom: none;
                    position: relative
               
	
        }



        html, body {
            height: 100%;
            margin: 0;
          }
          .wrapper {
            min-height: 100%;
          
            /* Equal to height of footer */
            /* But also accounting for potential margin-bottom of last child */
            margin-bottom: -50px;
          }
         #footer{
            position: relative;
            bottom: 0;
            width: 100%;
          }
          main{
              display: block;
          
          }