html {
    margin:                             0;
    padding:                            0;
    font-family:                        'Open Sans', Arial;
}

a {
    text-decoration:                    none;
    color:                              #000000;
}



body {
    background-color:   #f0f0f0;
}


a {
    position:   relative;
}

.outer {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255,0.3);
}

.wrap {
    display: table-cell;
    vertical-align: middle;
}

.container {
    max-width:  1350px;
    margin-left:    auto;
    margin-right:    auto;
}
.left {
    float:  left;
    width:  calc(50% - 50px);
    padding-right:  25px;
    padding-left:  25px;
}

.right {
    float:  right;
    width:  calc(50% - 50px);
    padding-right:  25px;
    padding-left:  25px;
}


@media (max-width: 567px) {
    .container {
        margin: 20px auto;
    }
    .left,
    .right {
        float: none;
        width: calc(100% - 40px);
        padding:    20px;
    }
}

.left > a,
.right > a {
    width:      calc(100% - 20px);
    height:     100%;
    overflow: hidden;
    position:  relative;
    display: block;
    border:                        10px solid #ffffff;
    /* border-bottom:                  0px; */
}

.left > a > div,
.right > a > div {
	-webkit-transition:            .3s ease-in-out;
    transition: .3s ease-in-out;
    -webkit-transform:  scale(1);
    transform:  scale(1);
}

.left > a:hover > div,
.right > a:hover > div {
    opacity:                         0.5;
}

.brandschutztechnik {
    background:                    url(brandschutztechnik.png);
}
.industrieanlagen {
    background:                    url(industrieanlagen.png);
}

.brandschutztechnik,
.industrieanlagen {
    background-position:            center;
    background-repeat:              no-repeat;
    background-size:                cover;
    width:                          100%;
    padding-top:                    53%;
}
.left aside,
.right aside {
    height:                         50px;
    line-height:                    50px;
    width:                          100%;
    text-align:                     center;
    font-size:                      28px;
    background-color:               #ffffff;
    text-transform:                 uppercase;
}

@media (min-width: 1200px) and (max-width: 1350px) {
    .left aside,
    .right aside {
        font-size:                  24px;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .left aside,
    .right aside {
        font-size:                  20px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .left aside,
    .right aside {
        font-size:                  16px;
    }
}
@media (max-width: 767px) {
    .left aside,
    .right aside {
        font-size:                  12px;
    }
}