/* CSS GRID */
*{box-sizing:border-box;}

.container{width:1200px;margin-left:auto;margin-right:auto;}

.col-lg-12,
.col-lg-11,
.col-lg-10,
.col-lg-9,
.col-lg-8,
.col-lg-7,
.col-lg-6,
.col-lg-5,
.col-lg-4,
.col-lg-3,
.col-lg-2,
.col-lg-1{position:relative;min-height:1px;float:left;padding-left:10px;padding-right:10px;}

.col-lg-12{width:100%;}
.col-lg-11{width:91.666666%}
.col-lg-10{width:83.333333%}
.col-lg-9{width:75%;}
.col-lg-8{width:66.666666%}
.col-lg-7{width:58.333333%}
.col-lg-6{width:50%;}
.col-lg-5{width:41.666666%}
.col-lg-4{width:33.333333%}
.col-lg-3{width:25%;}
.col-lg-2{width:16.666666%}
.col-lg-1{width:8.333333%}

.lg-hidden{display:none}
.lg-visible{display:block;}

.row{margin-left:-10px; margin-right:-10px;}
.row:after{content:'';display:block;float:none;clear:both;}

body {
        background-color: #4d521c;
                }

img{width:100%;height:auto;}
.navigation {
        background-color: #cbbfa4;
        width: 100%;
                }
.navigation li{font-family: sans-serif;
        font-size: 25px;
        font-weight: bold;
        background-color: #cbbfa4;
        width:20%;
        float:left;
        text-align:center;
        height:40px;}
ul {
        list-style-type: none;
        text-align: center;
}
.reiter {
        text-decoration: none;
        color: #4d521c;
        margin-top: 7px;
}
.reiter:hover, .active, a {
        color: black;
}
a {
        text-decoration: none;
}

#content{margin:10px 0;}

.text {
        background-color: #cbbfa4;
        border-radius: 5px;
        padding:10px;
        margin-bottom:10px;
}
#links {
        background-color: #cbbfa4;
        border-radius: 5px;
        text-align:center;
        padding:10px;
}

h1, h4, h2, h3, h6, p {
        font-family: sans-serif;
        margin-top: 0.67em;
        margin-bottom: 0.67em;
}
h1, h4 {
        font-size: 40px;
        font-weight: bold;
}
p {
        font-size: 20px;
}
h3, h2 {
        font-size: 30px;
        font-weight: bold;
}
h6 {
        font-size: 10px;
}

@media screen and (max-width:1220px){
        /* kleine Monitore */

        .col-md-12{width:100%;}
        .col-md-11{width:91.666666%}
        .col-md-10{width:83.333333%}
        .col-md-9{width:75%;}
        .col-md-8{width:66.666666%}
        .col-md-7{width:58.333333%}
        .col-md-6{width:50%;}
        .col-md-5{width:41.666666%}
        .col-md-4{width:33.333333%}
        .col-md-3{width:25%;}
        .col-md-2{width:16.666666%}
        .col-md-1{width:8.333333%}

        .md-hidden{display:none}
        .md-visible{display:block;}

        .container{width:960px;}
}

@media screen and (max-width:1024px){
        /* Tablets */

        .col-sm-12{width:100%;}
        .col-sm-11{width:91.666666%}
        .col-sm-10{width:83.333333%}
        .col-sm-9{width:75%;}
        .col-sm-8{width:66.666666%}
        .col-sm-7{width:58.333333%}
        .col-sm-6{width:50%;}
        .col-sm-5{width:41.666666%}
        .col-sm-4{width:33.333333%}
        .col-sm-3{width:25%;}
        .col-sm-2{width:16.666666%}
        .col-sm-1{width:8.333333%}

        .sm-hidden{display:none}
        .sm-visible{display:block;}

        .container{width:90%}

        .navigation li{width:100%;}
}

@media screen and (max-width:640px){
        /* Smartphones */

        .col-xs-12{width:100%;}
        .col-xs-11{width:91.666666%}
        .col-xs-10{width:83.333333%}
        .col-xs-9{width:75%;}
        .col-xs-8{width:66.666666%}
        .col-xs-7{width:58.333333%}
        .col-xs-6{width:50%;}
        .col-xs-5{width:41.666666%}
        .col-xs-4{width:33.333333%}
        .col-xs-3{width:25%;}
        .col-xs-2{width:16.666666%}
        .col-xs-1{width:8.333333%}

        .xs-hidden{display:none}
        .xs-visible{display:block;}
        h1, h4 {font-size: 20px;}
        h3, h2 {font-size: 20px;}
        p {font-size: 15px;}
}