body {

    font-family: 'Audiowide', cursive;
    font-weight: 300;
    font-size: 14px;
}



:root{
    --pink: #ef3c82;
    --White: white;
    --black: black;
    --red: #e74c3c;
    --blue: #3498db;
    --purple: #9b59b6;
    --yellow: #FEB506;
    --green: #62cb31;

}


.wrapper .left,
.wrapper .right {
    width:100%;
    height:50vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: bottom;
    justify-content: center;

}

.wrapper .image {
        width:100%;
        height:100%; 
        background-size: cover;
        background-position:center;
        position: absolute;
        top: 0;
        left: 0;
        transition: 0.25s ease all;
} 

.xflota {
        background:url(images/xflota.png);
}

.multar {
    background:url(images/multar.png);
}

.wrapper .caption
{
        position: relative;
        z-index: 10;
        color: antiquewhite;
        text-align: center;
}

.wrapper .caption h1 {
    text-transform: uppercase;
    letter-spacing: 0.25em;
}

.wrapper .caption .button {
    background: transparent;
    color: antiquewhite;
    display: inline-block;
    border: 1px solid whitesmoke;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    transition: 0.25s ease all;
    border-radius: 30px;
}

.wrapper .caption .button:hover {
    background: #ff5d31;
    color: black;
}


.wrapper .side::before {
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    content:'';
    display: block;
}

.wrapper .left:hover .image,
.wrapper .right:hover .image
{
        transform: scale(1.2);    
}

@media screen and (min-width:1200px) {

    .wrapper {
       display:flex
}

.wrapper .left,
.wrapper .right {
    width:50%;
    height:100vh;
}
    

}