@keyframes show
{
    from
    {
        opacity : 0;
        scale   : 90%;
    }
    to
    {
        opacity : 1;
        scale   : 100%;
    }
}
@keyframes mostrarScalar {
	from 
    {
        opacity   : 0;
        transform : scale3d(.5, .5, .5);
	}
	to 
    {
        opacity: 1;
	}
}

.bloque-1 .panel .imagen img, .bloque-1 .panel .tipo-noticia, .bloque-1 .panel .titulo, .bloque-1 .panel .row-autor .avatar, .bloque-1 .panel .row-autor .col-autor, .bloque-1 .panel .row-autor .fecha
{
    animation: mostrarScalar 1.5s ease 0s 1 normal forwards;
}
.bloque-2 .col-ayuda .txt-1, .bloque-2 .col-ayuda .txt-2,.bloque-2 .col-ayuda .txt-3, .bloque-3 .row-titulo .col-titulo
{
    view-timeline-name   : --fadeA;
    view-timeline-axis   : block;
    animation-timeline   : --fadeA;
    animation-name       : show;
    animation-range      : entry 35% cover 50%;
    animation-fill-mode  : both;
}
.row-noticias .col-noticia .noticia
{
    view-timeline-name   : --fadeB;
    view-timeline-axis   : block;
    animation-timeline   : --fadeB;
    animation-name       : show;
    animation-range      : entry 10% cover 30%;
    animation-fill-mode  : both;
}


.bloque-1
{
    background-color : #F4F7FE;
    position         : relative;
    height           : 400px;
}
.bloque-1 .panel
{
    position       : absolute;
    top            : 100px;
    border-radius  : 12px;
    background     : #FFF;
    box-shadow     : 0px 8px 20px 0px rgba(0, 0, 0, 0.05);
    margin         : 0px 150px 0px 150px;
    width          : fit-content;
    padding        : 0px;
    overflow       : hidden;
}
.bloque-1 .panel .imagen
{
    padding    : 0px;
    max-height : 370px;
}
.bloque-1 .panel .imagen img
{
    width : 100%;
}
.bloque-1 .panel .tipo-noticia
{
    border-radius : 15px;
    background    : #F4F7FE;
    color         : #737B7D;
    text-align    : center;
    font-size     : 16px;
    font-style    : normal;
    font-weight   : 700;
    line-height   : normal;
    margin        : 27px 33px 0px 0px;
    padding       : 6px 16px;
}
.bloque-1 .panel .titulo
{
    color       : #244079;
    font-size   : 36px;
    font-style  : normal;
    font-weight : 600;
    line-height : 46.8px;
    padding     : 20px 0px 80px 0px;
}
.bloque-1 .panel .col-info
{
    padding : 5px 35px 0px 65px;
    margin  : 0px 0px 0px 0px;
}
.bloque-1 .panel .row-autor .avatar
{
    padding : 0px 0px 0px 0px;
    margin  : 0px 0px 0px 0px;
}
.bloque-1 .panel .row-autor .sello
{
    padding : 0px 0px 0px 10px;
    margin  : -3px 0px 0px 0px;
}
.bloque-1 .panel .row-autor .col-autor .autor
{
    color       : #737B7D;
    font-size   : 16px;
    font-style  : normal;
    font-weight : 600;
    line-height : normal;
    padding     : 0px 0px 0px 10px;
}
.bloque-1 .panel .row-autor .col-autor .puesto
{
    color       : #5A7184;
    font-size   : 14px;
    font-style  : normal;
    font-weight : 400;
    line-height : normal;
    padding     : 3px 0px 0px 10px;
    margin      : 0px 0px 0px 0px;
}
.bloque-1 .panel .row-autor .fecha
{
    color       : #737B7D;
    text-align  : right;
    font-size   : 16px;
    font-style  : normal;
    font-weight : 600;
    line-height : normal;
    padding     : 10px 5px 0px 0px;
}


.bloque-2 .parrafo-1
{
    margin : 120px 0px 0px 0px;
}
.bloque-2 .parrafo-1 a
{ 
    text-decoration : underline;
    color           : #244079;
}
.bloque-2 .parrafo
{
    color       : #262626;
    font-size   : 16px;
    font-style  : normal;
    font-weight : 400;
    line-height : 22.4px;
    padding     : 0px 270px 0px 270px;
}

.bloque-2 .col-ayuda
{
    border-radius    : 12px;
    background-color : #F4F7FE;    
    margin           : 50px 270px;
}
.bloque-2 .col-ayuda .txt-1
{
    color       : #244079;
    text-align  : center;
    font-size   : 28px;
    font-style  : normal;
    font-weight : 800;
    line-height : 36.4px;
    max-width   : 525px;
    margin      : 0 auto;
    padding     : 50px 0px 0px 0px;
}
.bloque-2 .col-ayuda .txt-2
{
    color       : #333;
    text-align  : center;
    font-size   : 18px;
    font-style  : normal;
    font-weight : 400;
    line-height : 23.4px;
    max-width   : 525px;
    margin      : 0 auto;
    padding     : 10px 0px 30px 0px;
}
.bloque-2 .col-ayuda .txt-3
{
    border-radius  : 6px;
    border         : 2px solid #DD082D;
    color          : #DD082D;
    font-size      : 16px;
    font-style     : normal;
    font-weight    : 600;
    line-height    : 22px;
    letter-spacing : -0.32px;
    padding        : 12px 60px;
    margin         : 0px auto 50px auto;

}
.bloque-2 .col-ayuda a
{
    width  : fit-content;
    margin : 0 auto;
}

.bloque-3
{
    background-color: #F4F7FE;
}
.bloque-3 .row-titulo
{
    color       : #244079;
    text-align  : center;
    font-size   : 36px;
    font-style  : normal;
    font-weight : 800;
    line-height : 46.8px;
    margin      : 120px 0px 60px 0px;
}
.bloque-3 .row-noticias
{
    padding : 0px 165px 70px 165px;
}
.bloque-3 .row-noticias .col-noticia
{
    margin : 0px 0px 30px 0px;
}




@media (min-width: 1440px)  /*XXXL*/
{
}
@media (min-width: 1400px)  and (max-width: 1440px) /*XXL*/
{
    .bloque-3 .row-noticias
    {
        padding: 0px 110px 70px 130px !important;
    }
}
@media (min-width: 1200px)  and (max-width: 1399px) /*XL*/
{
    .bloque-1
    {
        height: 350px !important;
    }
    .bloque-1 .panel
    {
        height :325px !important;
        margin : 0px 120px 0px 120px !important;
    }
    .bloque-1 .panel .imagen img
    {
        height : 325px !important;
    }
    .bloque-1 .panel .imagen
    {
        overflow: hidden !important;
    }
    .bloque-1 .panel .col-info
    {
        padding: 5px 35px 0px 35px !important;
    }
    .bloque-1 .panel .titulo
    {
        font-size   : 26px !important;
        line-height : normal !important;
    }

    .bloque-2 .parrafo
    {
        padding: 0px 180px 0px 200px;
    }
    .bloque-2 .col-ayuda
    {
        margin: 50px 180px 50px 200px !important;
    }

    .bloque-3 .row-noticias
    {
        padding: 0px 50px 70px 70px !important;
    }
    .noticia .contenido-noticia .autor .info-autor .nombre-autor
    {
        font-size: 15px !important;
    }
    .noticia .contenido-noticia .autor .info-autor .cargo-autor .puesto-autor
    {
        font-size : 13px !important;
    }
}
@media (min-width: 992px)  and (max-width: 1199px) /*LG*/
{
    .bloque-1
    {
        height: 350px !important;
    }
    .bloque-1 .panel
    {
        height :325px !important;
        margin : 0px 80px 0px 80px !important;
    }
    .bloque-1 .panel .imagen
    {
        overflow: hidden !important;
    }
    .bloque-1 .panel .imagen img
    {
        height : 325px !important;
    }
    .bloque-1 .panel .col-info
    {
        padding: 5px 35px 0px 35px !important;
    }
    .bloque-1 .panel .titulo
    {
        font-size   : 26px !important;
        line-height : normal !important;
    }

    .bloque-2 .parrafo
    {
        padding: 0px 140px 0px 160px;
    }
    .bloque-2 .col-ayuda
    {
        margin: 50px 140px 50px 160px !important;
    }
    .bloque-2 .col-ayuda .txt-1
    {
        max-width : fit-content;
        padding   : 50px 30px 0px 30px !important;
        font-size : 25px;
    }
    .bloque-3 .row-noticias
    {
        padding: 0px 100px 70px 120px !important;
    }
}
@media (min-width: 768px)  and (max-width: 991px) /*MD*/
{
    .bloque-1 .panel
    {
        flex-direction : column-reverse !important;
        margin         : 0px 90px 0px 90px !important;
        top            : 80px !important;
    }
    .bloque-1 .panel .imagen img
    {
        width : 100% !important;
    }

    .bloque-1 .panel .titulo
    {
        font-size   : 26px !important;
        line-height : normal !important;
        padding     : 20px 0px 50px 0px;
    }
    .bloque-1 .panel .row-autor
    {
        padding: 0px 0px 40px 0px !important;
    }


    .bloque-2 .parrafo-1
    {
        margin: 350px 0px 0px 0px !important;
    }

    .bloque-2 .parrafo
    {
        padding: 0px 80px 0px 100px;
    }
    .bloque-2 .col-ayuda
    {
        margin: 50px 80px 50px 100px !important;
    }
    .bloque-2 .col-ayuda .txt-1
    {
        max-width : fit-content;
        padding   : 50px 30px 0px 30px !important;
        font-size : 25px;
    }
    .bloque-2 .col-ayuda .txt-2
    {
        max-width : fit-content !important;
        padding   : 10px 20px 30px 20px !important;
    }
}
@media (min-width: 576px)  and (max-width: 767px) /*SM*/
{
    .bloque-1 .panel
    {
        flex-direction : column-reverse !important;
        margin         : 0px 30px 0px 30px !important;
        top            : 80px !important;
    }
    .bloque-1 .panel .imagen img
    {
        width : 100% !important;
    }
    .bloque-1 .panel .titulo
    {
        font-size   : 26px !important;
        line-height : normal !important;
        padding     : 20px 0px 50px 0px;
    }
    .bloque-1 .panel .row-autor
    {
        padding: 0px 0px 40px 0px !important;
    }

    .bloque-2 .parrafo-1
    {
        margin: 460px 0px 0px 0px !important;
    }
    .bloque-2 .parrafo
    {
        padding: 0px 60px 0px 80px;
    }

    .bloque-2 .col-ayuda
    {
        margin: 50px 30px 50px 50px !important;
    }
    .bloque-2 .col-ayuda .txt-1
    {
        max-width : fit-content;
        padding   : 50px 30px 0px 30px !important;
        font-size : 25px;
    }
    .bloque-2 .col-ayuda .txt-2
    {
        max-width : fit-content !important;
        font-size: 16px !important;
        padding: 10px 20px 30px 20px !important;
    }

    .bloque-3 .row-noticias
    {
        padding: 0px 40px 70px 50px !important;
    }
}
@media (min-width: 0px)  and (max-width: 575px) /*XS*/
{ 
    .bloque-1 .panel
    {
        flex-direction : column-reverse !important;
        margin         : 0px 20px 0px 20px !important;
        top            : 80px !important;
    }
    .bloque-1 .panel .col-info 
    {
        padding: 5px 30px 0px 35px !important;
    }
    .bloque-1 .panel .row-autor .fecha
    {
        position   : absolute;
        margin-top : -45px;
    }
    .bloque-1 .panel .imagen img
    {
        width : 100% !important;
    }
    .bloque-1 .panel .titulo
    {
        font-size   : 20px !important;
        line-height : normal !important;
        padding     : 20px 0px 65px 0px;
    }
    .bloque-1 .panel .titulo span
    {
        font-size   : 20px !important;
        line-height : normal !important;
        padding     : 0px;
        margin      : 0px;
    }
    .bloque-1 .panel .row-autor
    {
        padding: 0px 0px 40px 0px !important;
    }


    .bloque-2 .parrafo-1
    {
        margin: 250px 0px 0px 0px !important;
    }
    .bloque-2 .parrafo
    {
        padding: 0px 30px 0px 30px;
    }
    .bloque-2 .col-ayuda
    {
        margin: 50px 10px 50px 30px !important;
    }
    .bloque-2 .col-ayuda .txt-1
    {
        max-width : fit-content;
        padding   : 50px 30px 0px 30px !important;
        font-size : 25px;
    }
    .bloque-2 .col-ayuda .txt-2
    {
        max-width : fit-content !important;
        font-size: 16px !important;
        padding: 10px 20px 30px 20px !important;
    }

    .bloque-3 .row-titulo
    {
        margin: 60px 0px 60px 0px;
    }
    .bloque-3 .row-noticias
    {
        padding: 0px 0px 70px 20px !important;
    }
}