@font-face {
    font-family: 'NotoSans Regular';
    src: url('../assets/fonts/Noto_Sans/NotoSans-Regular.ttf')
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/Inter-VariableFont_slnt\,wght.ttf') format('woff2 supports variations'), url('../assets/fonts/Inter/Inter-VariableFont_slnt\,wght.ttf') format('woff2-variations');
    font-weight: 100 900;
    font-stretch: 25% 151%;
}

@font-face {
    font-family: 'Mulish';
    src: url('../assets/fonts/Mulish/Mulish-VariableFont_wght.ttf') format('woff2 supports variations'), url('../assets/fonts/Mulish/Mulish-VariableFont_wght.ttf') format('woff2-variations');
    font-weight: 300 900;
    font-stretch: 25% 151%;
}

@font-face {
    font-family: 'Rubik';
    src: url('../assets/fonts/Rubik/Rubik-VariableFont_wght.ttf') format('woff2 supports variations'), url('../assets/fonts/Rubik/Rubik-VariableFont_wght.ttf') format('woff2-variations');
    font-weight: 300 900;
    font-stretch: 25% 151%;
}

@font-face {
    font-family: 'BigCaslon';
    src: url('../assets/fonts/Big_Caslon/Big\ Caslon\ Medium.ttf');
    font-weight: 300 900;
    font-stretch: 25% 151%;
}

h1 {
    /* font-family: 'Times New Roman'; */
    /* font-family: 'BigCaslon'; */
    /* font-family: 'Mulish'; */
    /* font-family: 'NotoSans Regular'; */
    /* font-family: 'Inter'; */
    font-family: 'Rubik';
    font-weight: 500;
}

h2 {
    /* font-family: 'Mulish'; */
    /* font-family: 'NotoSans Regular'; */
    /* font-family: 'Inter'; */
    font-family: 'Rubik';
    font-weight: 300;
}

h3 {
    /* font-family: 'Mulish'; */
    /* font-family: 'NotoSans Regular'; */
    /* font-family: 'Inter'; */
    font-family: 'Rubik';
    font-weight: 700;
}

p {
    /* font-family: 'Mulish'; */
    /* font-family: 'NotoSans Regular'; */
    /* font-family: 'Inter'; */
    font-family: 'Rubik';
    font-weight: 300;
}

article {
    /* font-family: 'Times New Roman'; */
    font-family: 'BigCaslon';
    /* font-family: 'Mulish'; */
    /* font-family: 'NotoSans Regular'; */
    /* font-family: 'Inter'; */
}

h4 {
    /* font-family: 'Times New Roman'; */
    /* font-family: 'BigCaslon'; */
    /* font-family: 'Mulish'; */
    /* font-family: 'NotoSans Regular'; */
    font-family: 'Inter';
}

span {
    /* font-family: 'Times New Roman'; */
    /* font-family: 'BigCaslon'; */
    /* font-family: 'Mulish'; */
    /* font-family: 'NotoSans Regular'; */
    font-family: 'Inter';
    font-weight: 300;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

.mobileNavOpciones {
    width: 100%;
    background-color: #FFFFFFF5;
    list-style: none;
    position: absolute;
    /* top: -660px; */
    left: -100vw;
    transition: 0.8s ease;
    font-family: 'NotoSans Regular';
    z-index: 2;
}

.show {
    top: 70px;
    left: 0px;
    display: inline;
}

.hide {
    display: none;
}


#botonAbrirNav i,
#botonCerrarNav i
{
    left: -100vw;
}

.mobileNavOpciones ul {
    width: 100%;
}

.mobileNavOpciones li {
    height: 40px;
    width: 100%;
    text-align: center;
}

.mobileNavOpciones li,
a {
    color: black;
    text-decoration: none;
    padding: 10px;
    opacity: 1;
}

.mobileNavOpciones li a {
    padding: 0 30%;
}

@media only screen and (max-width: 767px) {
    .soloGrandes{
        display:none; 
    }
    .desktop {
        display: none;
    }
    .mobiles {
        display: grid;
        grid-template-columns: 30vw 70vw;
        grid-template-rows: auto;
        background-color: white;
        z-index: 4;
    }
    #mobileNavBoton {
        grid-column: 1/2;
        grid-row: 1/2;
        display: grid;
        grid-template-columns: 1;
        grid-template-rows: 1;
        justify-content: center;
        text-align: center;
        align-items: center;
        font-size: 1em;
        z-index: 1;
    }
    #botonAbrirNav {
        color: black;
        font-size: 2em;
        text-decoration: none;
        font-weight: normal;
        grid-column: 1/2;
        grid-row: 1/2;
        transition: all 0.3s ease-in-out;
    }
    #botonCerrarNav {
        color: black;
        font-size: 0;
        text-decoration: none;
        font-weight: normal;
        grid-column: 1/2;
        grid-row: 1/2;
        transition: all 0.3s ease-in-out;
    }
    #mobileLogo {
        grid-column: 1/3;
        grid-row: 1/2;
        height: 70px;
        justify-content: center;
        align-items: center;
        text-align: center;
        z-index: 0;
    }
    #mobilesOpciones {
        margin-top: 70px;
        width: 0;
        text-align: center;
        position: absolute;
        transition: all 1s ease-in-out;
        background-color: white;
    }
    #mobilesOpciones>a {
        padding: 15px 0;
        text-decoration: none;
        border: 0;
    }
    #mobileNavOpciones>ul>.botonUnete {
        border-radius: 0;
        background-color: #1C658C;
        color: white;
    }
    #mobileNavOpciones>ul>.botonUnete>a {
        color: white;
    }
}

@media only screen and (min-width: 768px) {
    .mobiles {
        display: none;
    }
    nav.desktop {
        display: grid;
        max-height: 10vh;
        /* grid-template-columns: 19vw repeat(2, 1fr); */
        grid-template-columns: 19vw 3fr 1fr;
        grid-template-rows: 1fr;
        align-content: center;
        align-items: center;
        justify-content: left;
        text-align: center;
        font-family: 'Rubik';
        font-weight: 300;
    }
    nav.desktop>div>.botonUnete {
        background-color: #1C658C;
        color: white;
        padding: 10px 20px;
        border-radius: 7px;
        transition: all 0.3s ease-in-out;
        border-style: solid;
    }
    nav.desktop>div>.botonUnete:hover {
        padding: 10px 20px;
        border-color: #1C658C;
        border-width: 2px;
        color: #1C658C;
        background-color: white;
        font-weight: 500;
    }
    nav>a>img {
        height: 13vh;
    }
    nav.desktop>div>a {
        background-color: white;
        text-decoration-line: none;
        transition: all 0.3s ease-in-out;
        border-radius: 7px;
    }
}

nav.desktop>div>a:hover {
    background-color: #1C658C;
    color: white;
    padding: 10px 15px;
}

.mainInicio {
    margin: 0;
    border: 0;
}

.mainInicio>header {
    background-color: grey;
    font-family: 'NotoSans Regular';
    box-shadow: 0px 7px 7px 0px rgba(0, 0, 0, 0.5);
}

.mainInicio>main {
    z-index: -2;
    /* background-color: blue; */
    font-family: 'Inter';
    font-weight: 400;
}

.slider {
    box-shadow: 0px 15px 30px -15px rgba(0, 0, 0, 0.75);
}

.gridSlide {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto 200px 100px;
}

.gridSlide>h4 {
    grid-row: 1/2;
    grid-column: 1/2;
    text-align: center;
    padding-top: 15px;
    color: white;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.gridSlide:hover>h4 {
    opacity: 1;
    color: white;
    background-color: #00000090;
}

.gridSlide>img {
    height: 350px;
    width: auto;
}

.gridSlide>a {
    grid-column: 1/2;
    grid-row: 1/4
}

@supports(object-fit: cover) {
    .gridSlide>img {
        height: 350px;
        object-fit: cover;
        object-position: center center;
    }
}

.gridSlide>div.textoImagen {
    grid-row: 3/4;
    grid-column: 1/2;
    transition: all 0.3s ease-in-out;
}

.gridSlide:hover>div.textoImagen {
    background-color: #00000090;
}

.textoImagen {
    display: grid;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    text-align: center;
    align-items: center;
}

.textoImagen>p {
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    color: white;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.gridSlide:hover>.textoImagen>p {
    opacity: 1;
}

.gridSlide>img {
    z-index: -1;
    grid-row: 1/4;
    grid-column: 1/2;
}


/* Columnas */

.columnas1 {
    display: grid;
    grid-template-columns: 1fr;
}

.columnas1-2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
}


/* Actual, frase del dia e itinerario */

.actual {
    margin: 1em 0;
}

#fraseDelDia {
    margin: 0 4em;
}

#fraseDelDia>h2 {
    text-align: center;
    margin: 1em 0;
    font-family: 'Inter';
    font-weight: 600;
}

#fraseDelDia>p {
    font-style: italic;
    font-size: 1em;
    text-align: justify;
}

#fraseDelDia>h5 {
    font-size: 0.9em;
    text-align: center;
    margin: 0.9em 0;
}


/* Novedades, articulos recientes, proximos eventos, evangelizacion */

section.novedades {
    display: grid;
    grid-template-columns: 3fr 4fr 3fr;
    margin: 2em 2%;
}

@media only screen and (max-width: 767px) {
    section.novedades {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        margin: 2em 0;
        grid-row-gap: 2em
    }
}

.tarjetaInicio {
    box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.4);
    border-radius: 7px;
    margin: 0 10px;
    background-color: #EEEEEE;
}

.tarjetaInicio>h2 {
    border-radius: 7px 7px 0 0;
    text-align: center;
    padding: 2em 0 0.5em 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no;
    color: white;
    font-family: 'Mulish';
    font-weight: 400;
}

#articulos.tarjetaInicio>h2 {
    background-image: linear-gradient( rgba(28, 101, 140, 0.5), rgba(28, 101, 140, 0.5)), url("../assets/pictures/fondos/articulos.jpeg");
    background-size: cover;
    background-position: center center;
    background-repeat: no;
    color: white;
    font-family: 'Mulish';
    font-weight: 400;
}

.listadoArticulosRecientes>.articulo {
    display: grid;
    grid-template-columns: 3fr 8fr 2fr;
    align-items: center;
    margin: 20px 10px 20px 0;
}

.listadoArticulosRecientes>.articulo>.imagen {
    text-align: center;
}

.listadoArticulosRecientes>.articulo>.imagen>img {
    border-radius: 50%;
    width: 4em;
    height: 4em;
}

@supports(object-fit: cover) {
    .listadoArticulosRecientes>.articulo>.imagen>img {
        height: 1fr;
        object-fit: cover;
        object-position: center center;
    }
}

.listadoArticulosRecientes>.articulo>.datosArticulo {
    margin: 0 5px 0 10px;
    padding: 0;
    font-family: "Mulish";
}

.listadoArticulosRecientes>.articulo>.datosArticulo>h3 {
    font-size: 1.2em;
}

.listadoArticulosRecientes>.articulo>.datosArticulo>h4 {
    font-size: 1em;
    font-weight: 300;
    font-style: italic;
}

.listadoArticulosRecientes>.articulo>.datosArticulo>span {
    font-size: 0.8em;
    font-weight: 500;
    color: grey;
}

.listadoArticulosRecientes>.articulo>.metadatosArticulo {
    text-align: center;
    color: grey;
}

.listadoArticulosRecientes>.articulo>.metadatosArticulo>div {
    margin-top: 0.5em;
}

#proximosEventos.tarjetaInicio>h2 {
    background-image: linear-gradient( rgba(28, 101, 140, 0.5), rgba(28, 101, 140, 0.5)), url("../assets/pictures/fondos/eventos.jpg");
}


/* Eventos */

.listadoEventosProximos>.eventos {
    display: grid;
    grid-template-columns: 2fr 7fr 1fr;
    margin: 0.8em 0;
    align-items: center;
}

@media only screen and (max-width: 767px) {
    .listadoEventosProximos>.eventos {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
        margin: 0.8em 0;
        align-items: center;
    }
}

.listadoEventosProximos>.eventos>.fecha {
    text-align: center;
}

.listadoEventosProximos>.eventos>.enlace {
    text-align: center;
}

.listadoEventosProximos>.eventos>.fecha>h4 {
    font-size: 2.5em;
}

.listadoEventosProximos>.eventos>.fecha>h5 {
    font-size: 0.8em;
    font-family: 'Mulish';
    font-weight: 400;
    /* font-family: 'NotoSans Regular'; */
    /* font-family: 'Inter'; */
    /* font-family: 'Rubik'; */
}

.listadoEventosProximos>.eventos>.evento>h4 {
    font-family: 'Mulish';
    font-size: 2em;
}

.listadoEventosProximos>.eventos>.evento>h5 {
    font-family: 'Mulish';
    font-weight: 300;
    font-size: 1em;
    color: gray;
}

.listadoEventosProximos>.eventos>.enlace>a {
    color: grey;
}

.listadoEventosProximos>.eventos>.enlace>a:hover {
    color: black;
}

@media only screen and (max-width: 767px) {
    .listadoEventosProximos>.eventos>.fecha>h4 {
        font-size: 1.8em;
    }
    .listadoEventosProximos>.eventos>.fecha>h5 {
        font-size: 0.5em;
    }
    .listadoEventosProximos>.eventos>.evento>h4 {
        font-size: 1.8em;
    }
    .listadoEventosProximos>.eventos>.evento>h5 {
        font-size: 0.8em;
    }
}


/* Evangelizacion*/

#evangelizacion.tarjetaInicio>h2 {
    background-image: linear-gradient( rgba(28, 101, 140, 0.5), rgba(28, 101, 140, 0.5)), url("../assets/pictures/fondos/evangelizacion.jpeg");
}

#evangelizacion.tarjetaInicio>.capsulaEvangelica {
    padding: 10px 5% 0;
}

#evangelizacion.tarjetaInicio>.capsulaEvangelica>h4 {
    font-size: 1.3em;
    margin: 1em 0;
}

#evangelizacion.tarjetaInicio>.capsulaEvangelica>p {
    font-size: 1em;
}

#evangelizacion.tarjetaInicio>.capsulaEvangelica>.controlesEvangelizacion {
    text-align: center;
    margin: 1.5em 0;
}

#evangelizacion.tarjetaInicio>.capsulaEvangelica>.controlesEvangelizacion>span {
    font-size: 1.4em;
    margin: 0 0.5em;
    color: gray;
}

#evangelizacion.tarjetaInicio>.capsulaEvangelica>.controlesEvangelizacion>span:hover {
    color: black;
    cursor: pointer;
}


/* Seccion cincelazo */
.cincelazo{
    text-align: center;
    padding:  1.5em 0 0.5em 0;
}

.cincelazo h1 {
    margin: 0.6em 0;
    font-size: 1.5em;
}
.cincelazo > .frase{
    font-style: italic;
    font-size: 1.4em;
    margin: 0.4em 0;
}
.cincelazo > .autor{
    color: black;
}

/* Seccion mundial */

.mundial {
    display: grid;
    grid-template-columns: 1fr 2fr;
    background-color: #1C658C;
    color: white;
    margin-top: 3em;
    padding: 0 5%;
    height: 500px;
}

@media only screen and (max-width: 767px) {
    .mundial {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }
}

.mundial>#predicando {
    text-align: center;
    margin-right: 20px;
}

@media only screen and (max-width: 767px) {
    .mundial>#predicando {
        margin-right: 0px;
    }
}

.mundial>#predicando>h2 {
    margin: 2em 0 1em;
    font-size: 2em;
    font-family: 'Mulish';
    font-weight: 400;
}

@media only screen and (max-width: 767px) {
    .mundial>#predicando>h2 {
        margin: 1em 0;
        font-size: 1.8em;
    }
}

.mundial>#predicando>h3 {
    margin: 0 2em;
    font-family: 'Mulish';
    font-weight: 400;
}

.mundial>#predicando>h4 {
    margin: 0.5em 0 2em;
    font-family: 'Mulish';
    font-weight: 500;
    font-style: italic;
}

.mundial>#predicando>p {
    text-align: justify;
    font-weight: 200;
    /* font-family: 'Mulish'; */
    /* font-family: 'NotoSans Regular'; */
    /* font-family: 'Inter'; */
    font-family: 'Rubik';
}

.mundial>#predicando>.botones {
    margin: 2em 0;
}

#mapa {
    height: 500px;
    padding: 2em 0;
}
@media only screen and (max-width: 767px) {
    .mundial>#mapa {
        height: 30vh;
    }
}


/* Seccoion somosMSP */

.somosMSP {
    display: grid;
    padding: 0 5% 4em;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "titulo titulo titulo" "fundador nosotros nosotros";
    background-color: #D8D2CB;
}

@media only screen and (max-width: 767px) {
    .somosMSP {
        display: grid;
        padding: 0 ;
        margin: 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: "titulo " "fundador" "nosotros";
        background-color: #D8D2CB;
    }
}

.somosMSP>h2 {
    grid-area: titulo;
}

.somosMSP>.padreLuigi {
    grid-area: fundador;
}

.somosMSP>.seccionesSomos {
    grid-area: nosotros;
}

.somosMSP>h2 {
    text-align: center;
    margin: 2em 0;
    font-weight: 600;
    font-size: 2em;
    /* font-family: 'Mulish'; */
    /* font-family: 'NotoSans Regular'; */
    /* font-family: 'Inter'; */
    font-family: 'Rubik';
}

@media only screen and (max-width: 767px) {
    .somosMSP>h2 {
        text-align: center;
        font-weight: 600;
        font-size: 1.7em;
    }
}

.padreLuigi {
    text-align: center;
}

.fotografia>img {
    border-radius: 50%;
    width: 70%;
}

@supports(object-fit: cover) {
    .fotografia>img {
        object-fit: cover;
        object-position: center center;
    }
}

.padreLuigi>p {
    margin: 2em 10% 1em;
    font-style: italic;
}

.padreLuigi>span {
    font-weight: 600;
    color: grey;
}

.seccionesSomos {
    display: grid;
    grid-template-rows: 1fr 1fr auto;
    align-items: center;
    margin-left: 5%;
}

.seccionesSomos>div>p {
    text-align: justify;
}

.seccionesSomos>div>h3 {
    font-size: 1.3em;
}

@media only screen and (max-width: 767px) {
    .seccionesSomos {
        margin: 2em 5% 0 5%;
        display: grid;
        grid-template-rows: auto auto auto;
    }
    .seccionesSomos>div>h3 {
        font-size: 1.4em;
        text-align: center;
        margin: 1.5em 0 0.5em;
    }
    .seccionesSomos>#botonConocer {
        margin-top: 2em;
    }
}


/* Pie de pagina */

footer,
.mainInicio>footer {
    background-color: #EEEEEE;
    font-family: 'Inter';
    display: grid;
    grid-template-columns: 1fr 2fr 3fr 1fr;
    align-items: center;
    padding: 1em 5%;
    text-align: center;
    column-gap: 1.5em;
}

footer>h5,
.mainInicio>footer>h5 {
    grid-column: 1/6;
    text-align: center;
    font-weight: 300;
    margin-top: 1.4em;
}

footer>.redes>h3 {
    font-weight: 500;
    margin-bottom: 0.5em;
    font-size: 1.25em;
}

footer>.redes>.grupoRedes {
    font-size: 1.5em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.grupoRedes>a {
    color: gray;
}

.grupoRedes>a:hover {
    color: black;
}

footer>.administradores {
    margin: 0 2em;
}

footer>.administradores>h4 {
    font-weight: 400;
    font-size: 0.8em;
}

footer>.administradores>h3 {
    font-weight: 500;
    font-size: 1.3em;
}

footer>.administradores>h5 {
    font-weight: 600;
    color: gray;
    font-size: 0.7em;
    margin-top: 2em;
}

footer>.suscripcion>form>input {
    margin: 1.5em 0 0.5em;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 0.9em;
    border-color: #1C658C;
    border-style: solid;
    border-width: 2px;
    width: 70%;
}

footer>.MSPimgen>img {
    max-width: 100%;
}

@media only screen and (max-width: 767px) {
    footer,
    .mainInicio>footer {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: repeat(5, auto);
        row-gap: 2em;
    }
    footer>h5,
    .mainInicio>footer>h5 {
        grid-column: 1/2;
    }
    footer>.redes>h3 {
        margin: 1em 0 0.5em;
        font-size: 1.5em;
    }
    footer>.redes>.grupoRedes {
        grid-template-columns: repeat(4, 1fr);
        font-size: 2em;
    }
    footer>.redes>.grupoRedes>a:nth-child(5) {
        grid-column: 2/3;
    }
    footer>.redes>.grupoRedes>a:nth-child(6) {
        grid-column: 3/4;
    }
    footer>.administradores>h4 {
        font-size: 1.15em;
    }
    footer>.administradores>h3 {
        font-size: 1.5em;
    }
    footer>.administradores>h5 {
        font-weight: 600;
        color: gray;
        font-size: 1em;
        margin: 1em 0 2em;
    }
    footer>.MSPimgen>img {
        max-height: 50vw;
    }
    footer>h5,
    .mainInicio>footer>h5 {
        margin-top: 0;
    }
}


/* Pagina Anuncios */

main.articulosMain {
    text-align: center;
}

main.articulosMain>h1 {
    margin: 20px 0;
}

main.articulosMain>h2 {
    margin: 0 0 20px 0;
}

main.articulosMain>.tableroAnuncios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    /* align-items: center; */
    /* justify-items: center; */
    text-align: left;
    row-gap: 4em;
    column-gap: 2em;
    margin: 0 2%;
}

main.articulosMain>.tableroAnuncios>.tarjetaAnuncios {
    display: grid;
    grid-template-rows: 80% 8% 12%;
    grid-template-columns: auto;
    overflow: hidden;
    margin: 2%;
    transition: all 0.2s ease-in-out;
    height: 500px;
}

main.articulosMain>.tableroAnuncios>.tarjetaAnuncios>a {
    z-index: 1;
    grid-row: 1 / 4;
    grid-column: 1 / 2;
}

main.articulosMain>.tableroAnuncios>.tarjetaAnuncios>img {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    min-height: 100%;
    max-height: 100%;
    transition: all 0.2s ease-in-out;
    object-fit: cover;
}

main.articulosMain>.tableroAnuncios>.tarjetaAnuncios>h3 {
    background-color: #EEEEEE;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 1.8em;
    padding: 0 0 0.1em 15px;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    transition: all 0.2s ease-in-out;
}

main.articulosMain>.tableroAnuncios>.tarjetaAnuncios>p {
    background-color: #EEEEEE;
    font-size: 1em;
    padding: 0 15px 0.1em 15px;
    text-align: justify;
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    transition: all 0.2s ease-in-out;
}

main.articulosMain>.tableroAnuncios>.tarjetaAnuncios:hover {
    margin: 0;
    background-color: #D4D4D4;
}

main.articulosMain>.tableroAnuncios>.tarjetaAnuncios:hover>img {
    width: 116%;
    margin-left: -8%;
    margin-top: -8%;
}
main.articulosMain>.tableroAnuncios>.tarjetaAnuncios:hover>p,
main.articulosMain>.tableroAnuncios>.tarjetaAnuncios:hover>h3  {
    background-color: #D4D4D4;
}

@supports(object-fit: cover) {
    main.articulosMain>.tableroAnuncios>.tarjetaAnuncios>img {
        width: 100%;
        object-fit: cover;
        object-position: center center;
        border-radius: 7px 7px 0 0;
        overflow: hidden;
    }
}

@media only screen and (max-width: 767px) {
    main.articulosMain>.tableroAnuncios {
        row-gap: 1.5em;
        column-gap: 1em;
        margin: 0 2%;
    }
    main.articulosMain>.tableroAnuncios>.tarjetaAnuncios:hover {
        margin: 2%;
        /* margin: 0;˚ */
    }
}


/* Pagina anuncio */

main.anuncioMain {
    display: grid;
    grid-template-columns: 70vw 30vw;
    grid-template-rows: auto;
    row-gap: 30px;
}

.anuncioMainBackground {
    grid-column: 1/3;
    grid-row: 1/2;
    z-index: -1;
    display: grid;
    grid-template-rows: 60vh auto;
}

.anuncioMainBackgroundGradient {
    /* background-color: red; */
    background: linear-gradient(to bottom, white, #D8D2CB);
}

.anuncioMainBackgroundSolid {
    background-color: #D8D2CB;
}
main.anuncioMain>div.columnaIzquierda{
    grid-column: 1/2;
    grid-row: 1/2;
}
main.anuncioMain>div.columnaDerecha{
    grid-column: 2/3;
    grid-row: 1/2;
}


main.anuncioMain>div>section.anuncioVideos {
    text-align: center;
    background-color: #EEEEEE;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 20vh 20vh;
    row-gap: 1.5em;

}
@media only screen and (max-width: 767px) {
    main.anuncioMain>div>section.anuncioVideos {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 20vh 20vh;
        row-gap: 1em;
    }
}
main.anuncioMain>div>section.anunciosRecomendados {
    background-color: #EEEEEE;
}

main.anuncioMain>div>section.anunciosRecomendados,
main.anuncioMain>div>section.anuncioVideos {
    margin: 20px 10%;
    padding: 3% 7% 20px;
}
main.anuncioMain>div>section.anuncioVideos {
    margin-bottom: 4em; /* Space after otros articulos section*/
}

.anuncioEncabezado {
    /* background: linear-gradient(to bottom, white, #D8D2CB); */
    padding-bottom: 30px;
}

main.anuncioMain>div>section.anuncioContenido>.anuncioEncabezado {
    text-align: center;
}

main.anuncioMain>div>section.anuncioContenido>.anuncioEncabezado>h1 {
    padding: 0.5em 0 10px 0;
    font-size: 2em;
}

main.anuncioMain>div>section.anuncioContenido>.anuncioEncabezado>h2 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

main.anuncioMain>div>section.anuncioContenido>.anuncioEncabezado>img {
    height: 100%;
    max-height: 90vh;
    padding: 0 5%;
    width: auto;
    max-width: 100%;
}

main.anuncioMain>div>section.anuncioContenido>article {
    margin: 20px 16% 5em 16%;
    text-align: justify;
    font-size: 1.1em;
    line-height: 1.5;
}
main.anuncioMain>div>section.anuncioContenido>article p {
    margin-bottom: 1em;
}
main.anuncioMain>div>section.anuncioContenido>article ul {
    margin-left: 5%;
    margin-bottom: 2em;
    font-family: 'Rubik';
}

main.anuncioMain>div>section.anuncioVideos>h3,
main.anuncioMain>div>section.anunciosRecomendados>h3 {
    color: grey;
    font-size: 1.3em;
    margin: 5px 0 12px;
    text-align: center;
}


.anuncioRecomendado {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: auto;
    margin-bottom: 20px;
}

.anuncioRecomendado>img {
    max-height: 20vh;
    grid-row: 1/2;
    grid-column: 1/2;
}

.anuncioRecomendado>h4 {
    grid-row: 2/3;
    grid-column: 1/2;
    font-size: 1.2em;
}

.anuncioRecomendado>span {
    grid-row: 3/4;
    grid-column: 1/2;
    padding: 0 0 15px 5px;
    font-size: 0.9em;
    text-align: justify;
}

.anuncioRecomendado>a {
    grid-column: 1/2;
    grid-row: 1/4;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

.anuncioRecomendado>a:hover {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 10px 10px 0 0;
    /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), #EEEEEE); */
}

@supports(object-fit: cover) {
    .anuncioRecomendado>img {
        width: 100%;
        object-fit: cover;
        object-position: center center;
        border-radius: 10px 10px 0 0;
        overflow: hidden;
    }
    .anuncioEncabezado>img {
        width: 100%;
        object-fit: cover;
        object-position: center center;
        overflow: hidden;
    }
}

@media only screen and (max-width: 767px) {
    main.anuncioMain {
        grid-template-columns: 100vw;
        grid-template-rows: auto auto auto;
        row-gap: 0;
    }
    main.anuncioMain>div.columnaIzquierda{
        grid-column: 1/2;
        grid-row: 1/2;
    }
    main.anuncioMain>div.columnaDerecha{
        grid-column: 1/2;
        grid-row: 2/3;
    }
    .anuncioMainBackgroundSolid{
        background-color: #D8D2CB;
        /* display: none */
    }

    main.anuncioMain>div>section.anuncioContenido {
        /* background-color: #D8D2CB; */
        padding-bottom: 4em;
    }

    main.anuncioMain>div>section.anuncioVideos {
        background-color: #EEEEEE;
        margin: 0;
        border-radius: 0;
    }

    main.anuncioMain>div>section.anunciosRecomendados {
        background-color: #EEEEEE;
        margin: 0;
        border-radius: 0;
        box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0);
    }
    main.anuncioMain>div>section.anuncioContenido>.anuncioEncabezado>img {
        padding: 0;
    }

    main.anuncioMain>div>section.anuncioContenido > article {
        font-size: 1.2em;
        /* background-color: #D8D2CB; */
    }
    footer{
        box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.4);
    }


}

/* Elementos comunes */

a.botonInverso {
    display: inline-block;
    padding: 5px 15px;
    margin: 0.8em;
    font-size: 1em;
    color: white;
    border-width: 2px;
    border-style: solid;
    border-color: white;
    border-radius: 7px;
}

a.botonInverso:hover {
    color: #1C658C;
    background-color: white;
    font-weight: 600;
}

a.boton,
.boton {
    display: inline-block;
    padding: 5px 15px;
    margin: 0.8em;
    font-size: 1em;
    color: white;
    background-color: #1C658C;
    border-width: 3px;
    border-style: solid;
    border-color: #1C658C;
    border-radius: 7px;
    box-shadow: 0px 3px 7px 2px rgba(0, 0, 0, 0.75);
}

a.boton:hover,
.boton:hover {
    color: white;
    background-color: #398AB9;
    border-color: #398AB9;
    cursor: pointer;
}

a.botonFaith{
    animation: 3s linear infinite placeHolderShimmer;
    background: linear-gradient(to right, #f9e031 0%, #ecc01d 15%, #dc933d 30%, #d0714c 45%,#dc933d 60%, #ecc01d 75%, #f9e031 95%);
    background-size: 200%;
    padding: 1em 2em;
    border-radius: 10px;
    border-color: #20202000;
    border-style: solid;
    border-width: 2px;
    cursor: pointer;
    text-decoration: none;
    color: black;
    font-size: 1em;
    text-align: center;
    box-sizing: border-box;

  }

@-moz-keyframes placeHolderShimmer  {
    0%   { background-position:  100%; }
    100% { background-position: -100%; }
  }
@-webkit-keyframes placeHolderShimmer {
    0%   { background-position:  100%; }
    100% { background-position: -100%; }
  }
@keyframes placeHolderShimmer {
    0%   { background-position:  100%; }
    100% { background-position: -100%; }
  }


a.botonFaith:hover{
    /* background: linear-gradient(45deg, #f9e031, #ecc01d , #dc933d , #d0714c) ; */
    border-color: #202020ff;
}



.textoCentrado {
    text-align: center;
}

.tarjeta {
    box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.4);
    border-radius: 7px;
    margin: 0 10px;
    background-color: #EEEEEE;
}

.separadorSombreado{
    box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.4);
    height: 0.1px;
    background-color: rgba(0, 0, 0, 0);
    margin: 20px ;
}