.heroB{
    width: 100%;
    height: 590px;
    background: url('../../images/nube1.png'), url('../../images/nube2.png'), url('../../images/sun.png'), url('../../images/Hero_Perfil-Viajes.jpg');
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

    background-position: 10% 15%, 25% 43%, 90% 8%, center center;
    -webkit-background-size: 108px auto ,134px auto, 160px, cover;
    -moz-background-size: 108px auto, 134px auto, 160px, cover;
    -o-background-size: 108px auto, 134px auto, 160px, cover;
    background-size: 108px auto, 134px auto, 160px, cover;

    color: #043263;
    position: relative;
    animation: heroAnimation 3s infinite;
    margin-top: 87px;
}
@media (max-width: 1024px){
    .heroB{
        margin-top: 44px;
    }
}
@keyframes heroAnimation {
0%   {
    background-position: 10% 15%, 25% 43%, 90% 8%, center center;
        }
10%   {
    background-position: 10.2% 15%, 25.5% 43%, 90% 9%, center center;
        }
20%   {
    background-position: 10.4% 15%, 26% 43%, 90% 10%, center center;
        }
30%   {
    background-position: 10.6% 15%, 26.5% 43%, 90% 11%, center center;
        }
40%   {
    background-position: 10.8% 15%, 27% 43%, 90% 12%, center center;
        }
50%   {
    background-position: 11% 15%, 27.5% 43%, 90% 13%, center center;
        }
60%   {
    background-position: 10.8% 15%, 27% 43%, 90% 12%, center center;
        }
70%   {
    background-position: 10.6% 15%, 26.5% 43%, 90% 11%, center center;
    }
80%   {
    background-position: 10.4% 15%, 26% 43%, 90% 10%, center center;
    }
90%   {
    background-position: 10.2% 15%, 25.5% 43%, 90% 9%, center center;
    }
100%   {
    background-position: 10% 15%, 25% 43%, 90% 8%, center center;
    }

}

.copyHero {
background-color: rgba(212, 237, 252, 0.7);
background: rgba(212, 237, 252, 0.7);
padding: 26px;
max-width: 491px;
max-height: 400px;

margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

.heroB h2{
font-family: 'BentonSansBBVA-Medium';
font-size: 18px;

}
.heroB h3{
font-family: 'BentonSansBBVA-Bold';
font-size: 40px;

}
.heroB h4{
font-family: 'BentonSansBBVA-Medium';
font-size: 18px;
line-height: 1.5;
}
@media screen and (max-width: 1024px) {
    .heroB{
    height: 590px;
    padding-top: 110px;
    }
    .heroB h3{
        font-size: 32px;
    }
}
@media screen and (max-width: 900px){
    .heroB{
        background-position: 10% 15%, 25% 43%, 95% 8%, center center;

        -webkit-background-size: 108px auto ,134px auto, 120px, cover;
        -moz-background-size: 108px auto, 134px auto, 120px, cover;
        -o-background-size: 108px auto, 134px auto, 120px, cover;
        background-size: 108px auto, 134px auto, 120px, cover;

    }
    @keyframes heroAnimation {
    0%   {
        background-position: 10% 15%, 25% 43%, 95% 8%, center center;
            }
    10%   {
        background-position: 10.2% 15%, 25.5% 43%, 95% 9%, center center;
            }
    20%   {
        background-position: 10.4% 15%, 26% 43%, 95% 10%, center center;
            }
    30%   {
        background-position: 10.6% 15%, 26.5% 43%, 95% 11%, center center;
            }
    40%   {
        background-position: 10.8% 15%, 27% 43%, 95% 12%, center center;
            }
    50%   {
        background-position: 11% 15%, 27.5% 43%, 95% 13%, center center;
            }
    60%   {
        background-position: 10.8% 15%, 27% 43%, 95% 12%, center center;
            }
    70%   {
        background-position: 10.6% 15%, 26.5% 43%, 95% 11%, center center;
        }
    80%   {
        background-position: 10.4% 15%, 26% 43%, 95% 10%, center center;
        }
    90%   {
        background-position: 10.2% 15%, 25.5% 43%, 95% 9%, center center;
        }
    100%   {
        background-position: 10% 15%, 25% 43%, 95% 8%, center center;
        }

    }
}
@media screen and (max-width: 768px) {
    .heroB {
        height: 750px;
        background: url('../../images/nube1.png'), url('../../images/nube2.png'), url('../../images/sun.png'), url('../../images/Hero_Perfil-Viajes-Mobile.jpg');
        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
        padding-top: 60px;

        -webkit-background-size: 70px auto ,80px auto, 80px, cover;
        -moz-background-size: 70px auto, 80px auto, 80px, cover;
        -o-background-size: 70px auto, 80px auto, 80px, cover;
        background-size: 70px auto, 80px auto, 80px, cover;
    }

        @keyframes heroAnimation {
    0%   {
        background-position: 10% 15%, 67% 11.5%, 90% 6%, center center;
            }
    10%   {
        background-position: 10.2% 15%, 67.5% 11.5%, 90% 6.5%, center center;
            }
    20%   {
        background-position: 10.4% 15%, 68% 11.5%, 90% 7%, center center;
            }
    30%   {
        background-position: 10.6% 15%, 68.5% 11.5%, 90% 7.5%, center center;
            }
    40%   {
        background-position: 10.8% 15%, 69% 11.5%, 90% 8%, center center;
            }
    50%   {
        background-position: 11% 15%, 69.5% 11.5%, 90% 8.5%, center center;
            }
    60%   {
        background-position: 10.8% 15%, 69% 11.5%, 90% 8%, center center;
            }
    70%   {
        background-position: 10.6% 15%, 68.5% 11.5%, 90% 7.5%, center center;
        }
    80%   {
        background-position: 10.4% 15%, 68% 11.5%, 90% 7%, center center;
        }
    90%   {
        background-position: 10.2% 15%, 67.5% 11.5%, 90% 6.5%, center center;
        }
    100%   {
        background-position: 10% 15%, 67% 11.5%, 90% 6%, center center;
        }

    }
    .copyHero {
    box-sizing: border-box;
    background: transparent;
    max-width: 100%;
    position: relative;
    -ms-transform: translateY(85%);
    transform: translateY(85%);
    }
    .heroB h3{
        font-size: 28px;
    }
}
@media screen and (max-width: 600px) {
.heroB{
    height: 1000px;
}
.heroB .inner {
    height: 100%;
}
.copyHero {

    top: 30%;
    -ms-transform: translateY(30%);
    transform: translateY(30%);
    padding: 0 26px 0;
    }
}
@media screen and (max-width: 450px) {
.heroB {
    height: 950px;
    padding-top: 50px;
}
.copyHero {
    max-height: auto;
    padding: 0px 10px 0 10px;
}
}