.anim {
    background: url("../images/brujula.jpg")no-repeat center;
    width: 306px !important;
    height: 300px !important;
    float: right !important;
    position: relative;
    top: -305px;
}

@keyframes rotar1 {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: rotate(0deg);
    }
    85% {
        transform: rotate(45deg);
        opacity: 1;
    }
    86% {
        opacity: 0.5;
        transform: rotate(45deg);
    }
    100% {
        opacity: 0;
        transform: rotate(45deg);
    }
}

@keyframes rotar2 {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: rotate(0deg);
    }
    85% {
        transform: rotate(-45deg);
        opacity: 1;
    }
    86% {
        opacity: 0.5;
        transform: rotate(-45deg);
    }
    100% {
        opacity: 0;
        transform: rotate(-45deg);
    }
}

.flechas1 {
    background: url("../images/20-01.svg")no-repeat center;
    width: 100% !important;
    height: 100% !important;
    /* animation: rotar1 11s infinite; */
}

.flechas2 {
    background: url("../images/50-02.svg")no-repeat center;
    width: 100% !important;
    height: 100% !important;
    /* animation: rotar2 11s infinite; */
}

@media screen and (min-width: 1024px) {
    .anim {
        background: url("../images/brujula.jpg")no-repeat center;
        width: 306px !important;
        min-height: 300px !important;
        float: right !important;
        margin-top: 55px !important;
        margin-top: 455px !important;
    }
    .flechas1 {
        background: url("../images/20-01.svg")no-repeat center;
        width: 770px !important;
        height: 770px !important;
        animation: rotar1 11s infinite;
        margin: -235px;
    }
    .flechas2 {
        background: url("../images/50-02.svg")no-repeat center;
        width: 770px !important;
        height: 770px !important;
        animation: rotar2 11s infinite;
        margin: -235px;
        position: relative;
        top: -536px;
    }
    .acceso24_movil .acceso24_movil_extended {
        margin-top: -44px;
    }
    .acceso24_movil .texto_acceso24 {
        margin-top: -55px;
    }
}

@media screen and (min-width: 836px) and (max-width: 1023px) {
    .fondo {
        width: 100% !important;
        min-height: 295px !important;
    }
    .anim {
        width: 340px !important;
        min-height: 335px !important;
        float: right !important;
        background-size: 80% !important;
        position: relative !important;
        left: -270px !important;
        margin: -97px !important;
    }
    .flechas1 {
        background: url("../images/20-01.svg")no-repeat right;
        width: 700px !important;
        height: 695px !important;
        position: relative !important;
        top: -178px !important;
        left: -180px !important;
        animation: rotar1 11s infinite;
    }
    .flechas2 {
        background: url("../images/50-02.svg")no-repeat right;
        width: 700px !important;
        height: 695px !important;
        position: relative !important;
        top: -873px !important;
        left: -180px !important;
        animation: rotar2 11s infinite;
    }
    .acceso24_movil .acceso24_movil_extended {
        margin-top: -44px;
    }
    .acceso24_movil .texto_acceso24 {
        margin-top: -55px;
    }
}

@media screen and (min-width: 715px) and (max-width: 835px) {
    .fondo {
        width: 100% !important;
        min-height: 295px !important;
    }
    .anim {
        width: 270px !important;
        min-height: 265px !important;
        float: right !important;
        background-size: 80% !important;
        position: relative !important;
        left: -120px !important;
        top: -320px;
        margin-left: -330px;
    }
    .flechas1 {
        background: url("../images/20-01.svg")no-repeat right;
        width: 570px !important;
        height: 565px !important;
        position: relative !important;
        top: -130px !important;
        left: -153px !important;
        animation: rotar1 11s infinite;
    }
    .flechas2 {
        background: url("../images/50-02.svg")no-repeat right;
        width: 570px !important;
        height: 565px !important;
        position: relative !important;
        top: -697px !important;
        left: -153px !important;
        animation: rotar2 11s infinite;
    }
    .acceso24_movil {
        position: relative;
        top: -94px;
    }
    .gbanorte .widget_launcher {
        margin-top: -85px;
    }
}

@media screen and (min-width: 640px) and (max-width: 714px) {
    .fondo {
        width: 100% !important;
        min-height: 295px !important;
    }
    .anim {
        width: 230px !important;
        min-height: 225px !important;
        float: right !important;
        background-size: 80% !important;
        padding-top: 75px;
        margin-left: -108px;
        position: relative !important;
        left: -80px !important;
        top: -330px;
    }
    .flechas1 {
        background: url("../images/20-01.svg")no-repeat right;
        width: 510px !important;
        height: 505px !important;
        position: relative !important;
        left: -140px !important;
        top: -140px;
        animation: rotar1 11s infinite;
    }
    .flechas2 {
        background: url("../images/50-02.svg")no-repeat right;
        width: 510px !important;
        height: 505px !important;
        position: relative !important;
        top: -645px;
        left: -140px !important;
        animation: rotar2 11s infinite;
    }
    .acceso24_movil .acceso24_movil_extended {
        margin-top: -90px;
    }
    .acceso24_movil .texto_acceso24 {
        margin-top: -55px;
    }
}

@media screen and (min-width: 481px) and (max-width: 639px) {
    .fondo {
        width: 100% !important;
        min-height: 295px !important;
    }
    .anim {
        width: 230px !important;
        min-height: 225px !important;
        float: right !important;
        background-size: 80% !important;
        padding-top: 75px;
        margin-left: -200px;
        position: relative !important;
        left: -65px !important;
        top: -295px;
    }
    .flechas1 {
        background: url("../images/20-01.svg")no-repeat right;
        width: 510px !important;
        height: 505px !important;
        position: relative !important;
        left: -140px !important;
        top: -140px;
        animation: rotar1 11s infinite;
    }
    .flechas2 {
        background: url("../images/50-02.svg")no-repeat right;
        width: 510px !important;
        height: 505px !important;
        position: relative !important;
        top: -645px;
        left: -140px !important;
        animation: rotar2 11s infinite;
    }
    .acceso24_movil {
        position: relative;
        top: -160px;
    }
    .gbanorte .widget_launcher {
        margin-top: -145px;
    }
}

@media screen and (min-width: 446px) and (max-width: 480px) {
    .fondo {
        width: 100% !important;
        max-height: 175px !important;
    }
    .anim {
        width: 250px !important;
        height: 175px !important;
        float: right !important;
        background-size: 50% !important;
        margin-left: -210px;
        position: relative;
        top: -205px;
    }
    .flechas1 {
        background: url("../images/20-01.svg")no-repeat right;
        width: 340px !important;
        height: 340px !important;
        position: relative !important;
        top: -84px !important;
        left: -45px !important;
        animation: rotar1 11s infinite;
    }
    .flechas2 {
        background: url("../images/50-02.svg")no-repeat right;
        width: 340px !important;
        height: 340px !important;
        position: relative !important;
        top: -423px !important;
        left: -45px !important;
        animation: rotar2 11s infinite;
    }
    .acceso24_movil {
        position: relative;
        top: -90px;
    }
    .gbanorte .widget_launcher {
        margin-top: -95px;
    }
}

@media screen and (min-width: 439px) and (max-width: 445px) {
    .fondo {
        width: 100% !important;
        max-height: 175px !important;
    }
    .anim {
        width: 250px !important;
        height: 245px !important;
        float: right !important;
        background-size: 50% !important;
        margin-left: -210px;
        position: relative;
        top: -235px;
        left: -15px;
    }
    .flechas1 {
        background: url("../images/20-01.svg")no-repeat right;
        width: 340px !important;
        height: 340px !important;
        position: relative !important;
        top: -50px !important;
        left: -45px !important;
        animation: rotar1 11s infinite;
    }
    .flechas2 {
        background: url("../images/50-02.svg")no-repeat right;
        width: 340px !important;
        height: 340px !important;
        position: relative !important;
        top: -390px !important;
        left: -45px !important;
        animation: rotar2 11s infinite;
    }
    .acceso24_movil {
        position: relative;
        top: -160px;
    }
    .gbanorte .widget_launcher {
        margin-top: -135px;
    }
}

@media screen and (max-width:438px) {
    .fondo {
        width: 100% !important;
        height: 145px !important;
    }
    .anim {
        width: 130px !important;
        height: 125px !important;
        float: right !important;
        background-size: 80% !important;
        position: relative;
        top: -140px;
        left: -20px;
        margin-left: -125px;
    }
    .flechas1 {
        background: url("../images/20-01.svg")no-repeat right;
        width: 270px !important;
        height: 270px !important;
        position: relative !important;
        top: -70px !important;
        left: -70px !important;
        animation: rotar1 11s infinite;
    }
    .flechas2 {
        background: url("../images/50-02.svg")no-repeat right;
        width: 270px !important;
        height: 270px !important;
        position: relative !important;
        top: -341px !important;
        left: -70px !important;
        animation: rotar2 11s infinite;
    }
    .acceso24_movil .acceso24_movil_extended {
        margin-top: -44px;
    }
    .acceso24_movil .texto_acceso24 {
        margin-top: -55px;
    }
}