.banner {
    width: 100%;
    float: left;
    height: 150px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
}
a:not(:last-of-type) > .banner {
  margin-bottom: 15px;
}
.banner__a:hover {
  text-decoration: none;
}
.banner h1, .banner h2 {
    margin: 0;
}
.banner--cover {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 15px;
}
.banner--cover div {
    max-width: 100%;
}
.banner--align {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.banner--side-images {
    outline: 1px solid rgba(0, 0, 0, .2);
    background-repeat: no-repeat;
    background-position: center left, center right;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
.banner__side-image {
    height: 100%;
}
.banner__side-text {
    flex-basis: 50%;
}
.banner__bottom-text {
    max-width: 100%;
}
.banner__side-text h1, .banner__side-text h2 {
    text-align: center;
}
.banner--vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 300px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 15px;
    max-width: 100%;
}
.banner--vertical .banner__bottom-text:not(:last-child) {
    margin-bottom: 15px;
}
.banner--vertical h2 {
    margin-top: 15px;
}
.banner--image-center {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.banner__image-text {
    position: relative;
    width: 85%;
    padding-left: 100px;
}
.banner__image-text:before {
    content: '';
    position: absolute;
    top: 50%;
    left: -10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-size: cover;
    width: 100px;
    height: 100px;
    margin-top: -50px;
}

/*MEDIA*/

@media (max-width:990px) {
    .banner--vertical {
        height: 200px;
    }
}
@media (max-width:640px) {
    .banner__side-text {
        -ms-flex-preferred-size: 60%;
        flex-basis: 60%;
    }
    .banner__side-text h1 {
        text-align: left;
    }
    .banner--side-images {
        background-position: center left, -100% -100%;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        padding-right: 15px;
    }
}
@media(max-width:500px) {
    .banner--side-images {
        padding-right: 0;
    }
}
@media(max-width:420px) {
    .banner--side-images {
        background-position: 10px center, -100% -100%;
        background-size: 35%!important;
    }
}
@media(max-width:319px) {
    .banner--side-images {
        background-position: -100% -100%, -100% -100%;
    }
    .banner__side-text h1 {
        text-align: center;
    }
    .banner--side-images {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}