/* ------------------------------------------------------------------------------- */
/*  5. Separators
/* ------------------------------------------------------------------------------- */


    .separator1-bg {
        position: absolute;
        height: 100%;
        width: 100%;
        background: url('../images/diewand2-wide.png') 0 0 repeat fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        z-index:-1;
    }

    .separator2-bg {
        position: absolute;
        height: 100%;
        width: 100%;
        background: url('../images/der_hof-wide.png') 0 0 repeat fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        z-index:-1;
    }

    .separator3-bg {
        position: absolute;
        height: 100%;
        width: 100%;
        background: url('../images/der_hof2-wide.png') 0 0 repeat fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        z-index:-1;
    }

    .separator4-bg {
        position: absolute;
        height: 100%;
        width: 100%;
        background: url('../images/ein-weg-wide_2.png') 0 0 repeat fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        z-index:-1;
    }

    .separator5-bg {
        position: absolute;
        height: 100%;
        width: 100%;
        background: url('../images/der-hof2-wide.png') 0 0 repeat fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        z-index:-1;
    }

    #separator1, #separator2, #separator3, #separator4, #seperator5 {
        width: 100%;
        min-height: 400px;
        overflow: hidden;
        position: relative;
    }

    .pattern {
        background: url('../images/pattern.png');
        background-repeat:repeat;
        position:absolute;
        width:100%;
        height:100%;
        opacity:0.7;
        z-index:0;
    }

    .client {
        float:left;
        margin:10px;
        width:140px;
        cursor:pointer;
        margin-top:65px;
        transition: all 0.3s ease 0s;
    }

    .client:hover {
        float:left;
        margin:10px;
        width:140px;
        cursor:pointer;
        margin-top:60px;
    }

    @media only screen and (max-width: 1024px) {
        .separator1-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }

    .separator2-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }

    .separator3-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }

    .separator4-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }

     .separator5-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }
}

@media only screen and (max-width: 959px) {
        .separator1-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }

    .separator2-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }

    .separator3-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }

    .separator4-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }

    .separator5-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }

}

@media only screen and (max-width: 767px) {
    .separator1-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }

    .separator2-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }

    .separator3-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }

    .separator4-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }
    .separator5-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }



}
@media only screen and (max-width: 479px) {
    .separator1-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }

    .separator2-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }

    .separator3-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }

    .separator4-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }
       .separator5-bg {
        -webkit-background-size: auto;
        -moz-background-size: auto;
        background-size: auto;
    }
}

/* ======================
    10XX horizontale linie
========================= */

    hr.green {
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      border-top: 1px solid #35b181;
      }

    hr.green100 {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      border-top: 1px solid #35b181;
    }

    hr.pink {
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      border-top: 1px solid #ee4494;
    }

    hr.pink100 {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
      border-top: 1px solid #ee4494;
    }

    hr.white {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid #ffffff;
    }

    hr.white100 {
       width: 100%;
       margin-left: auto;
       margin-right: auto;
       border-top: 1px solid #ffffff;
    }

    hr.black {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid #000000;
        }

    hr.black100 {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid #000000;
        }

    hr.grey {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid #797979;
        }

        hr.grey100 {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid #797979;
        }

        hr.lgrey {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid #7f7c7c;
        }

    hr.lgrey100 {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid #7f7c7c;
        }

        /* hr ersatz */
        #borderlgrey70 {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid #7f7c7c;
        }

        #borderlgrey100 {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid #7f7c7c;
        }

         hr.grey {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid #797979;
        }

        hr.grey100 {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid #797979;
        }

        hr.lgrey {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid #7f7c7c;
        }

    hr.lgrey100 {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid #7f7c7c;
        }

        /* hr ersatz */
        #borderlgrey70 {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid #7f7c7c;
        }

        #borderlgrey100 {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        border-top: 1px solid #7f7c7c;
        }
    hr.lightgrey {
                width: 70%;
                margin-left: auto;
                margin-right: auto;
                border-top: 1px solid #797979;
                }

                hr.lightgrey100 {
                width: 100%;
                margin-left: auto;
                margin-right: auto;
                border-top: 1px solid #797979;
                }

                hr.lightgrey {
                width: 70%;
                margin-left: auto;
                margin-right: auto;
                border-top: 1px solid #7f7c7c;
                }

        hr.lightgrey100 {
                width: 100%;
                margin-left: auto;
                margin-right: auto;
                border-top: 1px solid #7f7c7c;
                }

                /* hr ersatz */
                #borderlightgrey70 {
                width: 70%;
                margin-left: auto;
                margin-right: auto;
                border-top: 1px solid #7f7c7c;
                }

                #lightgrey100 {
                width: 100%;
                margin-left: auto;
                margin-right: auto;
                border-top: 1px solid #7f7c7c;
                }