/*//////////////////////////
/////  GENERALES
//////////////////////////*/

* {box-sizing:border-box;font-family: 'Open Sans', sans-serif;}
/* colores */
:root {
    --azul: hsla(202, 48%, 32%, 1);
}

.container {position:relative;width: 1170px;}
.container.lectura {width: 660px;}
.container.lectura p {font-size: 15px !important;text-align: left !important;}
.container.lectura #slideshow {margin:30px 0 0;}
.container.lectura p a,.container.lectura li a {font-weight:bold;color:#2a5c79;border-bottom:2px solid #2a5c79;}
.container.lectura p a[href^="https://stsrosario.org.ar"],
.container.lectura li a[href^="https://stsrosario.org.ar"],
.container.lectura p a[href^="http://stsrosario.org.ar"],
.container.lectura li a[href^="http://stsrosario.org.ar"] {/* color:yellow; *//* color: white; *//* background-color: var(--azul); */padding: 0 0rem;color: hsla(202, 48%, 40%, 1);border-bottom: 2px solid hsla(202, 48%, 40%, 1);}
a,a:hover {text-decoration:none;}
body {padding-top:70px;}
h2 {text-align:center;margin:60px auto 40px;font-weight:bold;}
.grecaptcha-badge {display: none !important;}

/*//////////////////////////
/////  HEADER
//////////////////////////*/

#nav {
    height: 70px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: white;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}
#nav #hamburguesa {display: none;}
#nav > .container {height:100%;}
#nav #logo {/* width: 190px; */position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 180px;}
#nav #menu {position: absolute;right: 0;top: 50%;transform: translateY(-50%);padding: 0;}
#nav #menu li {padding: 0 7px;font-weight: bold;list-style: none;position: relative;display: inline-block;}
#nav #menu li a {
    font-size: 13px;
    color: inherit;
    cursor: pointer;
    padding: 11px 0;
    display: inline-block;
}
#nav #menu li a:hover {
    color:#2f6b8e;
}
#nav #menu li > ul {
    visibility: hidden;
    position:absolute;
    top: 220%;
    left: 0px;
    width: 190px;
    background-color: white;
    /* border: 1px solid #ccc; */
    /* border-radius: 0 0 10px 10px; */
    padding: 10px 20px 10px 15px;
    opacity: 0;
}
#nav #menu li:hover > ul {
    visibility: visible;
    top: 100%;
    /* left: auto; */
    transition: 0.3s;
    opacity: 1;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.1);
}
#nav #menu li:hover > ul li{
}
#nav #menu li > ul li{
    display: block;
    list-style: none;
    padding: 0;
}
#nav #menu li > a.colabora {background-color: var(--azul);color:white;padding: 8px 16px;border-radius: 30px;margin: 10px 0;}
#nav #menu li > a.colabora:hover {
    background: #2f6b8e;
}
#nav #menu .redes {
    padding: 0 4px;
}
#nav #menu .redes a {
    font-size: 16px;
    border: 2px solid var(--azul);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 30px;
    padding: unset;
    color: var(--azul);
}
#nav #menu .redes a:hover {
    background-color: var(--azul);
    color:white;
}


#slideshow {
    margin: 0px;
    position: relative;
    width: 100%;
    height: 350px;
    padding: 0px;
    /* overflow: hidden; */
}


/*//////////////////////////
/////  HOME SLIDESHOW
//////////////////////////*/


#slideshow .slide {position: absolute;opacity: 0;/* pointer-events: none; */transition: opacity 0.3s;z-index: 1;bottom: 0;width: 100%;height: 100%;background-repeat: no-repeat;background-position: center;background-size: cover;}
#slideshow .slide.on {opacity: 1; z-index: 2; }
#slideshow .slide .texto {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    text-align:center;
    height: 200px;
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
#slideshow .slide h4 {
    font-size: 30px;
    color: white;
    font-weight: bold;
    text-shadow: 0px 0px 8px rgba(0,0,0,0.8);
    width: 80%;
    text-align: center;
    margin: 0 auto;
    position: absolute;
    bottom: 80px;
    left: 0;
    width: 100%;
}
#slideshow .btns {position: absolute;z-index: 50;display:  inline-block;text-align: center;left: 50%;transform: translateX(-50%);bottom: 10px;}
#slideshow .btn {/* border: solid thin #ADADAD; */width: 10px;height: 10px;padding: 0;border-radius: 10px;margin: 0 4px;/* box-shadow: 0px 0px 1px .000; */transition: background 0.5s;background: #fff;transition: 0.3s;}
#slideshow .btn.on {background: #434344;width: 22px;}



/*//////////////////////////
/////  HOME PROYECTOS
//////////////////////////*/

#proyectos {text-align: center;min-height: 400px;}
#proyectos .proyecto {
    display: inline-block;
    width: 30%;
    /* border: 1px solid #ccc; */
    padding: 20px 10px 30px;
    vertical-align: top;
    border-radius: 10px;
    margin: 12px 12px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
#proyectos .proyecto h4 {font-weight:bold;font-size: 20px;}
#proyectos .proyecto > div.img {
    width: 100%;
    height: 140px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
}
#proyectos .proyecto > a {
    background-color:var(--azul);
    color: white;
    padding: 7px 22px;
    font-size: 13px;
    border-radius: 20px;
    font-weight: bold;
}
#proyectos .proyecto p {
    font-size:13px;
    height: 60px;
    max-width: 90%;
    margin: 0px auto 10px;
}


/*//////////////////////////
/////  HOME TE CONTAMOS MAS
//////////////////////////*/

#te-contamos-mas {
    text-align: center;
    margin-bottom: 50px;
}
#te-contamos-mas .item {
    display: inline-block;
    width: 40%;
    vertical-align: top;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    height: 130px;
    padding: 20px;
    margin: 12px;
    border-radius: 10px;
}
#te-contamos-mas .item h4 {
    font-weight: bold;
    color: hsla(193, 48%, 32%, 1);
}
#te-contamos-mas .item p {}



/*//////////////////////////
/////  CTA
//////////////////////////*/

#cta-bloque {
    text-align:center;
    padding:90px 0 110px;
    margin: 60px 0 0;
    background: rgba(147,206,222,1);
    background: -moz-linear-gradient(top, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(147,206,222,1)), color-stop(41%, rgba(117,189,209,1)), color-stop(100%, rgba(73,165,191,1)));
    background: -webkit-linear-gradient(top, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%);
    background: -o-linear-gradient(top, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%);
    background: -ms-linear-gradient(top, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%);
    background: linear-gradient(to bottom, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf', GradientType=0 );
    color:white;
}
#cta-bloque h3 {font-weight:bold;font-size: 32px;}
#cta-bloque > p {}
#cta-bloque a {border: 0;background-color: white;font-weight: bold;margin: 20px 0 0;padding: 10px 20px;color: hsla(193, 48%, 42%, 1);border-radius: 30px;}


#pagina {}
h2#tituloPagina {text-align: center;background-color: var(--azul);color:white;font-weight: bold;padding: 20px 0;margin: 0;font-size: 28px;}
#pagina #hero {
    width: 100%;
    height: 280px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 0 50px;
}
#pagina h3 {font-weight:bold;}


/*//////////////////////////
/////  PUBLICACIONES
//////////////////////////*/

#publicaciones {margin: 30px auto 120px;}
#publicaciones.container {width: 960px;}
#publicaciones .publicaciones-item {
    display: inline-block;
    width: 46%;
    margin: 0 10px 40px;
    vertical-align: top;
    position: relative;
    transition:0.1s;
    background-color: #eee;
    padding: 0 0 20px;
    border-radius: 0 0 5px 5px;
    position: relative;
    top: 0;
}
#publicaciones .publicaciones-item:hover {
    top: -10px;
    transition: 0.2s;
}
#publicaciones h3.titulo-publicacion,#publicacion h3.titulo-publicacion {color:var(--azul);font-size: 21px;line-height: 1.2 !important;/* min-height: 66px; */vertical-align: baseline;/* display: block; */font-weight: bold;/* min-height: 66px; */position: relative;margin: 0 0 10px;width: 100%;padding: 0 18px;}
#publicacion h3.titulo-publicacion {padding:0;font-size: 23px;}
#publicaciones .fecha-publicacion,#publicacion .fecha-publicacion {color:#888;/* font-style:italic; */font-size: 13px !important;padding: 0 18px;}
#publicacion .fecha-publicacion {padding:0;}
#publicaciones .imagen-publicacion {
    display: block;
    max-height: 350px;
    width: auto;
    height: 270px;
    max-width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto 20px;
}
#publicacion .imagen-publicacion {
    display: block;
    height: auto;
    width: auto;
    max-width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto 20px;
}
#publicaciones .separacion-publicacion {
    margin: 10px 0 70px;
}
#publicaciones .volver,#publicacion .volver {
    margin:30px 0;
    display: block;
    font-size: 14px;
    color: var(--azul);
    font-weight: bold;
}
#publicacion p {
    text-align:justify;
    line-height: 1.9;
    font-size: 16px;
}
#publicacion blockquote {
    position:relative;
    padding:1.2em 40px 1.2em 50px;
    margin: 2em 0 2em 2em;
    display: block;
    font-size: 15px;
    border-left: 8px solid #2a5c79;
    background-color: #EDEDED;
    color:#555555;
    font-style:italic;
    line-height:1.6;
}
#publicacion blockquote::before {
    font-family: Arial;
    content: "\201C";
    color: #2a5c79;
    font-size: 4em;
    position: absolute;
    left: 10px;
    top: 0px;
}
#publicacion img {
    max-width: 100%;
    width: auto;
    display: block;
    margin: 0 auto;
}
#publicacion img.small {
    max-width: 40%;
    width:auto;
    height:auto !important;
}
#publicaciones .abstract {
    margin:10px 0;
}
#publicaciones .abstract p {
    font-size: 15px;
}
#publicaciones .leer-mas{
    display: inline-block;
    font-size: 15px;
    font-weight:bold;
    margin: 0 0 20px;
    color:var(--azul);
}




/*//////////////////////////
/////  CURSOS
//////////////////////////*/

#cursos {margin: 30px auto 120px;}
#cursos .imagen-cursos {
    max-width: 600px;
    max-height: 800px;
    width: auto;
    height: auto;
    margin: 30px auto;
}
#cursos .titulo-curso {font-weight:bold;text-decoration:none;}
#cursos .titulo-curso a {color:var(--azul);}
#cursos .fecha-curso {color:#888;font-weight:bold;font-style:italic;font-size:13px;}
#cursos .imagen-curso {
    display: block;
    width: auto;
    max-height: 320px;
}
#cursos .separacion-curso {
    margin: 10px 0 70px;
}
#cursos .volver {
    margin:30px 0;
    display: block;
    font-size: 14px;
    color: var(--azul);
    font-weight: bold;
}
#cursos .cta {
    background-color: var(--azul);
    color: white;
    display: inline-block;
    padding: 9px 21px;
    border-radius: 30px;
    margin: 30px 0 10px;
    font-weight: bold;
    font-size: 18px;
}
#cursos hr {
    margin:60px 0 0;
}


/*//////////////////////////
/////  COLABORA CON STS
//////////////////////////*/

.tablaColabora {margin: 40px auto 80px;}
.tablaColabora div.col {
    padding: 0px 0 50px;
}
.tablaColabora h3 {
    background-color:#2a5c79;
    color:white;
    padding: 14px 20px;
    font-size: 18px;
    margin-bottom: 20px;
}
.tablaColabora div.col p {
    font-size: 14px;
    padding: 0 20px;
    margin: 0 0 10px;
}
.tablaColabora h5 {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px;
    padding: 0 15px;
}
.tablaColabora .redes {
    background-color:#2a5c79;
    padding:7px 15px;
    border-radius: 20px;
    color:white;
    margin:0 1px;
    display: inline-block;
}
.tablaColabora .redes:hover {
    background-color:#357397;
}

#mc_embed_signup {
    /* background-color: #dddde3; */
    /* padding: 28px 15px; */
    margin: 0 15px 20px;
    /* border: 1px solid hsla(240, 10%, 79%, 1); */
    border-radius: 15px;
}
#mc_embed_signup h5 {
    padding:0;
    margin: 0 0 10px;
}
#mc_embed_signup input {
    width:100%;
    padding: 5px;
    margin:0;
    border-radius: 5px;
    border: 1px solid #999;
    font-size: 14px;
}
#mc_embed_signup input[type='submit'] {
    width:auto;
    padding: 4px 13px;
    margin: 5px 0;
    border-radius:5px;
    border:0;
    background-color:#30749c;
    color:white;
    font-weight:bold;
    font-size: 14px;
}
#mc_embed_signup input[type='submit']:hover {
    background-color:hsla(202, 50%, 46%, 1);   
}

#form-enviado {
    visibility: hidden;
    opacity: 0;
    transition:0.2s;
    font-size: 18px;
}
#form-enviado.on {
    visibility: visible;
    opacity: 1;
    transition:0.2s;
    margin: 50px 0 150px;
}
.boton-donar {
    padding: 12px 0px;
    border-radius: 20px;
    width: 40%;
    margin: 5px 5px 0 0;
    font-size: 13px;
    background: #2a5c79;
    color:white;
    display: inline-block;
    text-align: center;
    line-height:  1.1em;
}
.boton-donar:hover {
    background-color: #357397;
    color: white;
}


/*//////////////////////////
/////  CONTACTO
//////////////////////////*/

#contactoForm,#sumateForm {
    text-align: center;
    margin: 30px 0;
    max-height: 600px;
    overflow:hidden;
}
#sumateForm input,#sumateForm textarea {text-align: center;}
#contactoForm.hidden,#sumateForm.hidden {
    max-height: 0px;
    transition:0.2s;
}
#contactoForm #chequeo-captcha,#sumateForm #chequeo-captcha {max-height: 0px;overflow: hidden;color: red;text-align: center;}
#contactoForm #chequeo-captcha.on,#sumateForm #chequeo-captcha.on {max-height: 30px;transition:0.3s;}
#contactoForm .g-recaptcha > div,#sumateForm .g-recaptcha > div {margin: 10px auto 30px;}



/*//////////////////////////
/////  DE LA HUERTA A LA OLLA
//////////////////////////*/
#form-donaciones-delahuertaalaolla {padding: 40px 30px 50px;margin:20px 0;border-radius:10px;text-align:center;background-color: #eeeef5;/* background-color: #eee; */}
#form-donaciones-delahuertaalaolla h3 {margin: 0 0 20px;}
#form-donaciones-delahuertaalaolla select {padding: 5px;vertical-align: middle;}
#form-donaciones-delahuertaalaolla button {padding: 6px 14px;font-weight:bold;vertical-align: middle;background-color: #295c79;border: 0;border-radius: 4px;color: white;margin: 0 0 0 10px;}
#form-donaciones-delahuertaalaolla button:hover {background-color: hsla(202, 49%, 37%, 1);}
#form-donaciones-delahuertaalaolla button:active {background-color: hsla(202, 49%, 30%, 1);}
#form-donaciones-delahuertaalaolla #seleccionarMonto {color:red;max-height: 0px;overflow: hidden;transition:0.2s;opacity: 0;font-size: 15px;width: 80%;margin: 0px auto 0;}
#form-donaciones-delahuertaalaolla #seleccionarMonto.on {max-height: 100px;opacity: 1;transition:0.3s;}
#form-donaciones-delahuertaalaolla #masde3000 {max-height: 0px;overflow: hidden;transition:0.2s;opacity: 0;font-size: 15px;width: 80%;}
#form-donaciones-delahuertaalaolla #masde3000.on {max-height: 100px;opacity: 1;margin: 30px auto 0;transition:0.3s;}


/*//////////////////////////
/////  FOOTER
//////////////////////////*/
#foot {background-color:#333;color:white;padding:30px;}
#foot .container > div {display:inline-block;width: 50%;}
#foot .container > div:first-child {/* float:left; */}
#foot .container > div:last-child {float:right;text-align: right;}
#foot .container > div a {color:white;margin: 0 10px;}
#foot .container > div p {margin:0;}



/*//////////////////////////
/////  RESPONSIVE
//////////////////////////*/

@media screen and (min-width: 1400px){
    #slideshow {height: 450px;}
    .container.lectura #slideshow {height:350px;}
}

@media screen and (max-width: 768px){
    .container {position:relative;width: 100%;}
    .container.lectura {width:100%;padding: 0 15px;}
    .container.lectura iframe {width:100%;}
    .container.lectura img {width:100%;height:auto;}
    #nav #logo {
        width:130px;
        left: 20px;
    }
    #slideshow {
        height: 160px;
    }
    #proyectos .proyecto {
        width: 100%;
        margin: 10px 0;
    }    

    #nav #menu {
        left: 101vw;
        right: unset !important;
        float: unset !important;
        top: 60px !important;
        text-align: left;
        margin: 0;
        transform: unset !important;
        width: 100vw;
        box-sizing: border-box;
        height: 100vh;
        padding: 10px 20px;
        background-color: white;
        z-index: 10;
        transition: 0.2s;
        text-align: center;
        position: fixed;
        overflow: scroll;
    }
    #nav #menu.on {
        left: 0;
        transition: 0.3s;
    }
    #nav #menu li {
        display: block;
        width: 100%;
        padding: 3px 0;
        border-bottom: 1px solid #ccc;
        /* padding: 0 !important; */
    }
    #nav #menu li > ul li {
        border: 0;
        display: inline-block;
        width: auto;
        background-color: #eee;
        padding: 0px !important;
        margin: 7px 4px;
    }
    #nav #menu li > ul li a {
        padding: 7px 9px;
    }
    ul#menu li a {
        margin: 0;
    }
    #nav #menu li:hover > ul {
        visibility: unset;
        top: unset;
        left: unset;
        transition: unset;
        opacity: unset;
        box-shadow: unset;
    }
    #nav #menu li.redes {
        display: inline-block;
        width: auto;
        margin: 12px 10px;
        text-align: center;
        border-bottom: 0;
    }
    #nav #hamburguesa {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
        padding: 10px;
        /* z-index: 20; */
        font-size: 27px;
        color: #333;
        z-index: 102;
        display: block;
    }    
    #nav #menu li > ul {
        position: relative;
        width: 100%;
        /* background-color: #eee; */
        left: unset;
        top: unset !important;
        box-shadow: unset !important;
        padding: 7px 0 10px;
        margin: 0;
        opacity: 1;
        visibility: visible;
    }
    #slideshow .slide h4 {
        font-size: 16px;
        bottom: 40px;
    }
    #te-contamos-mas .item {width: 90%;height: auto;}

    #te-contamos-mas .item p {font-size: 14px;}

    h2 {font-size: 26px;}
    
    #proyectos .proyecto p {
        font-size:15px;
    }
    #publicaciones.container {width: 100%;}
    #publicaciones .publicaciones-item {
        display:block;
        width:100%;
        margin: 0 0 30px;
    }
    #publicaciones h3.titulo-publicacion {min-height:unset;margin:0;}
    #publicaciones .imagen-publicacion {
        width:100%;
    }
    #publicaciones .fecha-publicacion {margin: 5px 0;font-size: 12px !important;}
    #publicaciones p {
        text-align:left;
    }
    #proyectos .proyecto > a {font-size: 16px;padding: 10px 25px;}
    #publicacion blockquote {width: 100%;padding: 50px 30px 1.2em 20px;margin: 0;}
    .tablaColabora div.col {
        width: 100%;
        display: block;
        flex-basis: unset;
        flex-grow: unset;
    }
    #cursos {}
    #cursos .imagen-cursos {
        width:100%;
        max-height:unset;
        max-width:unset;
        height:unset;
    }
    #form-donaciones-delahuertaalaolla {
        padding: 50px 20px;
        font-size: 15px;
    }
    #form-donaciones-delahuertaalaolla select {
        display:block;
        margin: 0 auto 20px;
    }
    #form-donaciones-delahuertaalaolla #masde3000 {
        width: 100%;
    }
    #form-donaciones-delahuertaalaolla #masde3000.on {
        max-height: 170px;
    }


}