:root 
{
    --bordo: #6f1214;
    --mostaza: #9b742b;
    --fuente: 'Roboto Slab', serif;
    --altura-header:120px;
    --altura-header-fino:80px;
}

*
{
    padding:0px;
    margin:0px;
}

html
{
   height:100%
}

body
{
    min-height:100%;
}

.rs {
    background-image: url("https://webcontent.sfo3.cdn.digitaloceanspaces.com/svg/redes.svg");
    height: 45px;
    width: 45px;
    background-size: cover;
    filter: brightness(0) invert(1) drop-shadow(3px 3px 7px rgba(0,0,0,0.4));
    transition:all 0.3s;
}

.rs:hover{
    transform:scale(1.3);
}

.rs.instagram {
    background-position-x:0px;
}

.rs.facebook {
    background-position-x:-42px;
}

.rs.youtube {
    background-position:-86px;
}

.rs.twitter{
    background-position:-129px;
}

.rs.soundcloud {
    background-position:-174px;
}

.rs.spotify {
    background-position:-217px;
}

.rs.whatsapp {
    background-position-x:-261px;
}

#bienvenida-video
{
    padding:2%;
    height:650px;
    width:70%;
    margin:auto;
}

#bienvenida-video > iframe
{
    margin:auto;
    height:90%;
    width:100%;
}

#contenedorFooter
{
    position:relative;
    overflow-x:hidden;
    padding-top:var(--altura-header-fino);
}

#header 
{
    background-color:white;
    box-shadow: 0px -2px 14px 2px rgba(0,0,0,.33);
    padding: 10px 0px;
    z-index:100;
    position:fixed;
    width:100%;
    display:flex;
    align-items: center;
    max-height:var(--altura-header);
    visibility:hidden;
}

/*IMPLEMENTACION CON LOGO DIVIDIDO*/
#logo_2img 
{
    margin-left:4%;
    height:100px;
    width:25%;
    transition: height 0.1s ease-in;
}

#logo_2img img
{
    float: left;
    height:100%;
    transition: height 0.3s ease-in; 
}
/*--------------------------------*/

/*IMPLEMENTACION JS*/
.headerFino img[pos="izq"]
{
    height:60px !important;
}

.headerFino img[pos="der"]
{
    height:0px !important;
}

.headerFino #logo_2img
{
    height:60px;
}

.headerFino #menu 
{
    padding-top:10px !important;
}

.vistaInicial 
{
    height:calc(100vh - var(--altura-header-fino));
}

/*------------------*/


#menu
{
    width:100%;
    padding-top:30px;
    transition: padding-top 0.33s ease-in; 
}

    #menu > ul 
    {
        list-style: none;
        margin-bottom: 0px;
    }

        #menu > ul > li 
        {
            display:inline-block;
            padding-left:1.86%;
        }

        #menu > ul > li:first-child 
        {
            padding-left:1%;
        }

            #menu > ul > li > a
            {
                font-family: 'Roboto Slab', serif;
                letter-spacing: 1px;
                font-weight: 500;
                -webkit-text-stroke:0.5px;
                color: #6f1214;
                font-size: 1.1em;
                text-transform:uppercase;
            }

            a.linkOpcionSubmenu:after
            {
                border-right: 4px solid #6f1214;
                border-top: 4px solid transparent;
                border-bottom: 4px solid #6f1214;
                border-left: 4px solid transparent;
                border-style: inset;
                border-radius: 2px;
                content: '';
                position: absolute;
                transform: rotate(45deg) translateY(5px);
                margin-left: 7px;    
            }

.listado .submenu 
{
    position:relative;
    top:30px;
    display:none;
    transition:top 0.3s ease-in-out;
}

.listado .submenu .envoltorio
{
    position:absolute;
    left:0%;
    transform:translateX(-25%);
    display:inline-block;
    background-color:#6f1214;
    box-shadow: 0px 8px 10px 2px rgba(0,0,0,.33);
    width:210%;
}

.listado .submenu .envoltorio .puntero
{
    content:'';
    width:20px;
    height:20px;
    background-color:#6f1214;
    position:relative;
    left:50%;
    transform:translateX(-50%) translateY(-40%) rotate(45deg) ;
    margin:0;
    padding:0;
}

.listado .submenu .envoltorio .items
{
    transform:translateY(-10px);
}

.envoltorio form > button
{
    border:0px;
    box-sizing:content-box;
}

.envoltorio form > button,
.envoltorio a 
{
    color:white;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    text-transform:uppercase;
    display:block;
    padding:5px;
    padding-left:18px;
    text-align:left;
    background-color:#6f1214;
}

.envoltorio form > button:hover
{
    text-decoration:underline;
}

.listado .submenu .envoltorio, 
.listado .submenu .envoltorio .items,
.listado .submenu .envoltorio .puntero
{
    opacity:0;
    transition: all 1s ease;
}

.mostrarSubmenu
{
    display:block !important;
}

#textoImagen 
{
    max-width:700px;
    margin:0px;
    position:relative;
    top:17%;
    left:10%;
    font-family:'Charm', cursive;
    text-shadow:1px 2px 7px black;
    color:rgb(255, 255, 255);
    opacity:0.7;
    line-height:65px;
}

    
    #textoImagen > span:nth-child(1) 
    {
         font-size:6vw;
    }
    
    #textoImagen > span:nth-child(2) 
    {
         font-size:4vw;
    }

.irAbajo 
{
    position: relative;
    top: 60%;
    left: 50%;
    cursor:pointer;
    width:50px;
}
.irAbajo span
{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 3px solid #FFFFFF;
    border-right: 3px solid #FFFFFF;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 1.7s infinite;
}
.irAbajo span:nth-child(2)
{
    animation-delay: -0.2s;
}

.envoltorio-titulo
{
    width:100%;
    text-align:center;
    padding-top:9.5%;
}

.titulo-identidad
{
    font-size: 5.5em;
    padding: 15px;
    background-color: rgba(245, 245, 220, .29);
    font-family: 'Roboto Slab';
    line-height: 146px;
    color: white;
    text-shadow: 3px 3px #00000069;
    text-align:center;    
}

@keyframes animate 
{
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}

#contenedorFooter
{
    visibility:hidden;
}

footer 
{
    /*border-top:5px solid var(--mostaza);*/
    background-color: #6f1214;
    width:100%;
    color:white;
    position:relative;
    bottom:0;
    padding:3% 0%;
    box-shadow: rgba(55, 0, 0, 0.78) 0px 0px 80px inset;
}

.contenedor
{
    padding-left:50px;
    padding-right:50px;
    
}

#pie
{
    font-family: 'Roboto Slab', serif;
    font-size:1.3vw;
    color:rgb(199, 199, 199);
    height:auto;
}

#logoPie 
{
    margin-left:2%;
}

#logoPie img
{
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
    height:12.33vw;
    float:left;
}

#pie span.titulo
{
    font-size:1.7vw;
    display:block;
    margin-top:5px;
    margin-bottom:5px;
    color: white;
    text-transform:uppercase;
    text-decoration:underline;
}

#contenedorRedes 
{
    position:absolute;
    right:7vw;
    top:5.33vw;
    width:200px;
}

#redes li 
{
    list-style:none;
    float:left;
    margin-right:20px;
    margin-top:10px;
    margin-bottom:20px;
}

/* #redes img
{
    height:30px !important;
    width:30px !important;
    transition:all 0.3s;
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1) drop-shadow(3px 3px 7px rgba(0,0,0,0.4));
} */

/* #redes img:hover
{
    transform:scale(1.3);
} */

#contenedorInf
{
    padding:0px 22px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.contenedorInf
{
    float:left;
}

#lineaHorizontal
{
    height:2px;
    background-color:white;
    width:100%;
    margin-top:30px;
    margin-bottom:10px;
}

.separador
{
    height:18vh;
    background-color:white;
    width:2px;
    float:left;
    margin-top:10px;
    margin-left:1.66%;
    margin-right:1.66%;
}

#anuncioASPO
{
    background-color:#eee;
    width:100%;
    padding:5% 15%;
    font-family:'Roboto Slab', serif;
    color:#6f1214;
    text-transform:uppercase;
    font-size:2.3em;
    text-align:center;
    line-height:2em;
}

    #anuncioASPO > span
    {
        display:block;
        font-weight:bold;
        margin-top:70px;
    }

.envoltorio-mensaje-envoltorio-citaBiblica 
{
    margin: auto;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    align-content: center;
}

.envoltorio-citaBiblica 
{
    height: fit-content;
    width: fit-content;
    margin: 10px;
}

.citaBiblica 
{
    background-color: #fafafa;
    padding: 30px;
    box-sizing: border-box;
    margin: 50px auto;
    margin-top: 20px;
    color: var(--bordo);
    box-shadow: 0px 0px 80px rgba(77, 77, 77, 0.3);
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    font-family: 'Merriweather', serif;
    font-weight: 400;
    transition: box-shadow .5s ease-in-out;
}

    .citaBiblica[ancho="max"] 
    {
        width: 1020px;
    }

    .citaBiblica[ancho="med"] 
    {
        width: 500px;
    }

    .citaBiblica[ancho="min"] 
    {
        width: 250px;
    }

    .citaBiblica:hover 
    {
        box-shadow: 2px 2px 70px rgba(77, 77, 77, 0.1);
    }

.envoltorio-Textos 
{
    box-sizing: border-box;
    overflow-y: hidden;
    padding: 30px 0px;
    width:100%;
}

.textoBiblico p 
{
    font-size: 20px;
    padding-bottom: 50px;
    font-style:italic;
}

.pasaje 
{
    font-size: 16px;
    text-align: left;
    margin-bottom: 50px;
    font-weight: bold;
}

    .pasaje::before 
    {
        content: '';
        width: 3.5px;
        height: 20px;
        background-color: var(--mostaza);
        display: inline-block;
        position: relative;
        top: 4px;
        margin-right: 5px;
    }

.version 
{
    font-size: 15px;
    text-align: right;
    color: #757575;
}

/*TODO: HACER AJUSTES, SI LA POSICIÓN FUE SETEADA INICIALMENTE TRANSICIONES*/
.animacion 
{
    visibility:visible;
    /*position:initial;
    left:0;
    top:0;*/
    opacity:inherit;
    transition: transform 1s ease, 
                opacity 2s ease;
}

.deAbajo 
{
    transform:translateY(102%);    
}

.deArriba 
{
    transform:translateY(-102%);
}

.deIzquierda
{
    transform:translateX(-102%);
}

.deDerecha 
{
    transform:translateX(102%);
}

.conTransparencia 
{
    opacity:0 !important;
}

.modal-ofrenda {
    display:flex;
    flex-flow:row wrap;
    justify-content:space-around;
}

#datos-ofrenda {
    min-width:400px;
    max-width:500px;
    margin: 10px;
    padding: 30px;
}

#datos-ofrenda > h1 {
    font-family: var(--fuente);
    font-size: 1.5em;
    margin-top: 0px !important;
    background-color: #71717117;
    color: #6f1214;
    border-radius: 3px;
    padding: 7px;
    border-left: 4px solid var(--bordo);
    text-shadow: 2px 2px 2px #adadad;
}

#datos-ofrenda h2 
{
    font-family: var(--fuente);
    margin-right: 10px;
    width: 100%;
    padding-bottom: 13px;
    color: var(--bordo);
    margin-top: 2vh;
    display: inline-block;
    font-weight: bold;
    font-size:1.3em;
    margin-bottom:2px !important;
    padding-bottom:4px;
    margin-top:33.3px;
    position:relative;
    border-bottom:1px solid var(--mostaza);
}

#datos-ofrenda h2 > span
{
    color:#333;
    display:inline;
    font-size:0.9em;
    font-weight:lighter;
}

#datos-ofrenda h2 i:after {
    content:'';
    opacity:0.3;
    width:20px;
    height:20px;
    padding:3px;
    background-image:url('svg/copy.svg');
    background-repeat:no-repeat;
    position:absolute;
    cursor:pointer;
    right:0px;
    transition:all 0.3s ease-out;
}

    #datos-ofrenda h2 i:hover:after {
        opacity:0.7;
    }

    #datos-ofrenda h2 i:active:after {
        transform:scale(1.2);
    }

@media (max-width:1451px)
{
    #logo_2img 
    {
        height:90px;
        margin-left:2%;
    }

    #menu > ul > li > a
    {
        font-weight: 300;
        font-size: 0.9em;
    }

    

    .envoltorio-titulo
    {
        padding-top:6%;
    }
}

@media (max-width:1281px)
{
    #logo_2img 
    {
        margin-left:2%;
    }
    
    #menu
    {
        width:90%;
    }

    #menu > ul 
    {
        margin-bottom: 0px;
    }

        #menu > ul > li 
        {
            display:inline-block;
            padding-left:1.5%;
        }
    
    .envoltorio-titulo
    {
        padding-top:3%;
    }

    .citaBiblica
    {
        min-height:460px;
        padding: 40px;
    }

    .citaBiblica[ancho="max"] 
    {
        width: 850px;
    }

    .citaBiblica[ancho="med"] 
    {
        width: 390px;
    }
    
    .mensaje[ancho=max] 
    {
        width: 900px;
    }

    .mensaje[ancho=med] 
    {
        width: 450px;
    }

    .mensaje[ancho=min] 
    {
        width: 250px;
    }

    .textoBiblico p 
    {
        font-size: 21px;
    }

    .textoBiblico p 
    {        
        font-size:18px;
        padding-bottom: 20px;
    }

}

@media (max-width:1191px)
{
    #logo_2img 
    {
        height:85px;
        width:22%;
    }

    #menu > ul > li 
    {
        padding-left:1%;
    }

    .envoltorio-titulo
    {
        padding-top:3%;
    }

    .titulo-identidad 
    {
        font-size: 4em;
        line-height: 116px;
        padding: 11px;
    }

    .citaBiblica[ancho="max"] 
    {
        width: 800px;
        min-height:400px;
        max-height:400px;
    }
}

@media (max-width:1130px)
{
    #logo_2img 
    {
        width:8%;
    }

    #logo_2img > img[pos="der"]
    {
        display:none;
    }
}

@media (max-width:981px)
{
    #logo_2img 
    {
        height:70px;
        width:7%;
    }

    #menu > ul > li > a
    {
        font-weight: 200;
        font-size: 0.8em;
    }

    .textoImagen 
    {
        width:500px;
        top:17%;
        left:10%;
        font-size:7em;
        line-height:90px;
    }

    .textoImagen > span 
    {
        font-size:70px;
    }

    .envoltorio-titulo
    {
        padding-top:5%;
    }

    .titulo-identidad 
    {
        font-size: 3.66em;
        line-height: 116px;
        padding: 11px;
    }

    #pie
    {
        font-size:1.4vw;
    }

    #logoPie img 
    {
        height:13.33vw;
    }

    #redes img 
    {
        height:26px !important;
        width:26px !important;
    }
}

@media (max-width:886px)
{
    .citaBiblica
    {
        min-height:380px;
    }

    .citaBiblica.desplegar .envoltorio-Textos 
    {
        max-height: 380px;
    }

    .citaBiblica[ancho="max"] 
    {
        width: 740px;
    }

    .citaBiblica[ancho="med"] 
    {
        width: 320px;
    }
    
    .textoBiblico p 
    {        
        font-size:16px;
        padding-bottom: 17px;
    }

    #logo_2img 
    {
        margin-left:5%;
    }

    #menuicon
    {
        display: inline-block;
        cursor: pointer;
        margin-left:75%;
    }

    .bar1, .bar2, .bar3 
    {
        width: 35px;
        height: 4px;
        background-color: #6f1214;
        margin: 7px 0;
        transition: 0.4s;
    }

    .desplegado .bar1 
    {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px);
        transform: rotate(-45deg) translate(-9px, 6px);
    }

    .desplegado .bar2 
    {
        opacity: 0;
    }

    .desplegado .bar3 
    {
      -webkit-transform: rotate(45deg) translate(-8px, -8px);
      transform: rotate(45deg) translate(-8px, -8px);
    }
    
    #menu
    {
        position:fixed;
        right:0;
        top:0;
        width:auto;
        min-width:170px;
        height:100vh;
        background-color:white;
        padding-top:100px;
        padding-left:10px;
        padding-right:20px;
        box-shadow: 0px -2px 14px 2px rgba(0,0,0,.33);
        transition: transform 1s;
        z-index:99;
     }

        #menu > ul > li 
        {
            display:block;
            text-align:right;
            line-height:30px;
        }
    
    .ocultar
    {
        transform:translateX(100%);
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0) !important;
    }

    #header ~ .submenu
    {
        display:block;
        position:fixed;
        right:0px;
        width:auto;
        height:100vh;
        background-color:#6f1214;
        padding-left:20px;
        padding-right:20px;
        padding-top:100px;
        box-shadow: 0px;
        transition: transform 1s ease-in-out;
        z-index:99;
    }

    #header ~ .submenu .envoltorio .items, 
    #header ~ .submenu .envoltorio .puntero 
    {
        opacity: 1;
    }

    #header ~ .submenu .envoltorio
    {
        display: inline-block;
        background-color: #6f1214;
        box-shadow: 0px;
        width: auto;
        position:relative;
        opacity: 0;
        transition: opacity 0.5s ease-out;
    }

    #menu ~ .puntero
    {
        display: block;
        position: fixed;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #6f1214;
        z-index:100;
        transition: top 0.4s ease-in-out;
    }

    .envoltorio .items form > button
    {
        float:right;
        display:block;
        width:100%;
    }

    .envoltorio form > button,
    .envoltorio .items a 
    {
        font-weight: 200;
        font-size: 0.8em;
        display: block;
        text-align: right;
        line-height: 30px;
        padding:0px;
        letter-spacing: 1px;
    }

    .envoltorio-titulo
    {
        padding-top:18%;
    }

    .titulo-identidad 
    {
        font-size: 6vw;
        line-height: 100px;
        padding: 11px;
    }

    #contenedorRedes 
    {
        top:4vw;
    }

}

@media (max-width:815px) 
{
    .citaBiblica
    {
        min-height:350px;
        padding: 60px 40px;
    }

    .citaBiblica[ancho="med"],
    .citaBiblica[ancho="max"] 
    {
        width: 80%;
    }

    #menuicon
    {
        margin-left:70%;
    }

    .contenedor
    {
        padding-left:30px;
        padding-right:30px;
    }

    #pie
    {
        font-size:1.5vw;
    }

    #logoPie img 
    {
        height:14vw;
    }

    #contenedorInf
    {
        padding:0px 10px;
    }

    #redes img 
    {
        height:24px !important;
        width:24px !important;
    }
}

@media (max-width:500px)
{
    :root
    {
        --altura-header-fino:52px;
    }

    body
    {
        width:100%;
    }
    
    #menuicon
    {
        margin-left:67%;
    }

    #header ~ .submenu {
        padding-left:10px;
    }

    .headerFino #logo_2img 
    {
        height: 40px;
    }
    
    .headerFino img[pos="izq"]
    {
        height:40px !important;
    }

    #contenedorInf
    {
        text-align:center;
        padding:20px 22px;
        display:block;
    }

    .contenedorInf 
    {
        font-size:2.5vh;
        float:none;
    }

    .separador
    {
        height:1px !important;
        width:80%;
        float:none;
        margin:15px 0px;
        display:inline-block;
    }

    #logoPie 
    {
        margin-top:10px;
        display:flex;
        justify-content:center;
    }

    #logoPie img 
    {
        height:18vh;
    }

    #contenedorRedes 
    {
        position:relative;
        width:110%;
        left:-5%;
        display:flex;
        justify-content:center;
        right:0px;
        background-color:white;
        margin:10px 0px;
        padding: 17px 0px;
    }

    #redes 
    {
        margin:10px 0px;
    }

    #redes li
    {
        margin: 0px 10px;
    }

    #redes img 
    {
        height:29px !important;
        width:29px !important;
    }

    #lineaHorizontal 
    {
        display:none;
    }

    #pie span.titulo 
    {
        font-size: 3vh;
        margin-bottom: 15px;
    }

}

@media (max-width:361px)
{
    html, body 
    {
        overflow-x:hidden;
    }

    #header 
    {
        padding-top:7px;
        padding-bottom:5px;
    }

    .headerFino img[pos="izq"]
    {
        height:35px !important;
    }

    .citaBiblica 
    {
        min-height: 380px;
        padding: 50px 30px;
    }

        .citaBiblica.desplegar .envoltorio-Textos 
        {
            max-height: 380px;
        }

        .citaBiblica[ancho="med"] 
        {
            width: 300px;
        }

        .citaBiblica[ancho="max"] 
        {
            width: 333.33px;
        }

    .textoBiblico p 
    {
        font-size: 14px;
        padding-bottom: 12px;
    }

    .pasaje 
    {
        font-size: 12px;
        margin-bottom: 24px;
    }

    .version 
    {
        font-size: 10px;
    }

    .irAbajo 
    {
        top: 35%;
    }

    #anuncioASPO 
    {
        font-size:3em;
        padding-left:50px;
        padding-right:50px;
    }
            
    #anuncioASPO img 
    {
        width:100%;
    }

    #anuncioASPO span 
    {
        font-size:2.2vh;
        transform:scale(1.18);
    }

    #menuicon
    {
        margin-left:67%;
    }

    .bar1, .bar2, .bar3 
    {
        width: 25px;
        height: 2px;
    }

    .desplegado .bar1 
    {
        -webkit-transform: rotate(-45deg) translate(-6px, 6px);
        transform: rotate(-45deg) translate(-6px, 6px);
    }

    .desplegado .bar3 
    {
      -webkit-transform: rotate(45deg) translate(-6px, -7px);
      transform: rotate(45deg) translate(-6px, -7px);
    }

    #header ~ .submenu {
        padding-top:80px;
        padding-left: 10px;
        padding-right:10px;
    }

    #menu
    {
        padding-right:15px;
        padding-top:80px;
        padding-left:0px;
    }
   
}