.heroB{
width: 100%;
height: 590px;
background: url('../../images/Hero_Perfil-Compras.jpg');
background-repeat: no-repeat;
background-position: center center;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

color: #043263;
position: relative;
z-index: 1;
margin-top: 87px;

}
@media (max-width: 1024px){
    .heroB{
        margin-top: 44px;
    }
}
.element1{
background: url('../../images/Hero_Perfil_Compras-09.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 40px;

animation: element1 3s infinite;
width: 50px;
height: 50px;
position: absolute;
top: 150px;
right: 290px;
z-index: 2;

}
.element2{
background: url('../../images/Hero_Perfil_Compras-07.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 40px;

animation: element2 1s infinite;
width: 50px;
height: 50px;
position: absolute;
top: 70px;
right: 150px;
z-index: 2;
}
.element3{
background: url('../../images/Hero_Perfil_Compras-08.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 40px;

animation: element3 5s infinite;
width: 50px;
height: 50px;
position: absolute;
top: 210px;
right: 50px;
z-index: 2;
}


@keyframes element1 {
10%   {
transform: scale(0.6);
    }
50%   {
transform: scale(0.8);
    }
100%   {
transform: scale(1.1);
    }
}
@keyframes element2 {
10%   {
transform: scale(0.7);
    }
50%   {
transform: scale(0.9);
    }
100%   {
transform: scale(1.1);
    }
}
@keyframes element3 {
10%   {
transform: scale(0.5);
    }
50%   {
transform: scale(0.9);
    }
100%   {
transform: scale(1.1);
    }
}

.wrapperGray{
background: #f7f5f5;
padding: 1px 0 50px;
position: relative;
display: block;
height: auto;
}
.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{
height: 590px;
background-repeat: no-repeat;
background-position: center center;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

}
@media screen and (max-width: 768px) {
.heroB {
height: 850px;
background: url('../../images/Hero_Perfil-Compras-Mobile.png');
background-repeat: no-repeat;
padding-top: 60px;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.heroB .inner {
height: 100%;

}
.element1{
top: 150px;
right: 70%;
}
.element2{
top: 70px;
right: 50%;
}
.element3{
top: 180px;
right: 22%;
}

.copyHero {
box-sizing: border-box;
background: transparent;
padding: 26px;
max-width: 100%;
max-height: 400px;
color: #fff;
margin: 0;
position: relative;
top: 45%;
-ms-transform: translateY(5%);
transform: translateY(5%);
}
.heroB h3{
font-size: 28px;
}
}
@media screen and (max-width: 600px) {
.heroB{
height: 1000px;
background-position: 50%;
}
.heroB .inner {
height: 100%;
}
.copyHero {

top: 45%;
-ms-transform: translateY(5%);
transform: translateY(5%);

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

}