@charset "UTF-8";
/* CSS Document */
/*Insertamos las tipografías que vamos a utilizar de Google Fonts*/
article, aside, footer, header, nav, section, address {
display: block;
}
#contenedor {
font-family: 'Montserrat', sans-serif;
color: black;
text-align: center;
max-width: 1280px;
min-width: 320px;
margin: 0% auto;
}
body {
background: url(images/symphony.png) repeat;
margin: 0%;
font-size: 62.5%;
}
#hyde, .hyde {
display: none;
}
h1 {
width: 50%;
height: 140px;
margin-right: auto;
text-indent: -9999px;/*mandamos el texto a la izquierda para que no interfiera con el logo*/
background: url(images/iconos/tlachinollan_logo.png) 0% 0%/ 100% no-repeat;
margin-left: 3%;
margin-bottom: -28%;
}
/*Buscador*/
input[name="buscar"] {
width: 48%;
height: 27px;
padding-left: 3%;
position: absolute;
left: 4%;
top: 17%;
font-size: 1.5em;
}
input[type="text"] {
background-image: url(images/iconos/buscar.png);
background-size: 10%;
background-position: 93% 52%;
background-repeat: no-repeat;
border: none;
}
#open-button {
position: absolute;
z-index: 111;
top: 13%;
right: 2%;
}
section:nth-child(3) h2{
text-align: center;
font-family: "Martel";
font-size: 2.6em;
color: #75AD58;
background: url(images/iconos/piramide_secciones.png) no-repeat 50% -3px;
margin-top: 37px;
padding-top: 35px;
}
nav h2 {
display: none;
}
.carrusel {
width: 98.5%;
height: 615px;
margin-top: 50px;
}
section:nth-child(4) h2:nth-child(2) { /********************************SEPARADOR Tlachi*****************************/
text-align: center;
font-family: "Martel";
font-size: 2.6em;
color: #75AD58;
background: url(images/iconos/piramide_secciones.png) no-repeat 50% -3px;
margin-top: 26px;
padding-top: 35px;
}
.anual h3, .internacional h3 {/***********************************************************h3 de la seccion de Publicaciones*****************************************************/
font-family: martel;
font-size: 5.6em;
margin-top: -11%;
}
figure {
width: 100%;
text-align: center;
}
figure img {
max-width: 100%;
}
figcaption {
font-family: martel;
font-size: 5.6em;
margin-top: -11%;
}
p {
font-size: 2.1em;
text-align: left;
}
article a {
margin-left: 75%;
}
article div:nth-child(5) {
display: block;
margin: 0%;
}
article div:nth-child(5) > a:nth-child(1) > img:nth-child(1) { /*Aqui estoy editando los iconos de fb*/
float: left;
margin-top: -5%;
margin-left: 5%;
}
article div:nth-child(5) > a:nth-child(2) {/*Aqui estoy editando los iconos de tw*/
float: left;
margin-top: -11%;
margin-left: 5%;
}
article > a:nth-child(6) > img:nth-child(1) {/*LEERMAS ICONO*/
position: absolute;
}
figure:nth-child(4) > img:nth-child(1) {
width: 100%;
}
.anual > input:nth-child(3), .internacional > input:nth-child(3) {/***********************************************************Botones de publicaciones****************************************************/
text-indent: -9999px;
background: transparent url("images/down_button_03.png") no-repeat scroll 0% 0% / 50% auto;
margin: 0%;
padding: 0.1% 5% 3.1%;
}
#open > div:nth-child(1) > input:nth-child(1), #open2 > div:nth-child(1) > input:nth-child(1) {
text-indent: -9999px;
background: url(images/cross_button_03.png) no-repeat scroll 0% 0% / 45% auto;
margin: 0%;
padding: 0.1% 5% 3.1%;
}
section {
display: flex;
flex-flow: row wrap;
justify-content: space-around;/*! align-items: center; */
/*! height: 1600px; */
}
.anual, .internacional {
background: none;
font-family: martel;
font-size: 4.6em;
color: black;
position: absolute;
z-index: 3;
margin-left: -7%;
}
.medios {
background: url(images/iconos/seccion_medios.png) no-repeat 50% -2px;
border-style: solid;
border-left: none;
border-top: none;
border-right: none;
}
h2 {
text-align: center;
font-family: "Martel";
font-size: 2.6em;
color: #75AD58;
margin-top: 43px;
padding-top: 125px;
background-size: 5%;
width: 100%;
}
.casos {
background: url(images/iconos/seccion_casos.png) no-repeat 50% -2px;
border-style: solid;
border-left: none;
border-top: none;
border-right: none;
}
.publicaciones {
background: url(images/iconos/seccion_publicaciones.png) no-repeat 50% -2px;
border-style: solid;
border-left: none;
border-top: none;
border-right: none;
}
.publicacionesh2 {
background: url(images/iconos/seccion_publicaciones.png) no-repeat 50% 22px;
border-style: solid;
border-left: none;
border-top: none;
border-right: none;
background-size: 20%;
}
/*#anuales, #internacionales{
position:absolute;
}
#anuales figure, #internacionales figure{
position:relative;
}
#internacionales figure{
top:105%;
}
*/
section div div {
display: none; /* OJO */
}
section div div div {
display: none;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
z-index: 1;
}
/*PUBLICACIONES BOTONES*/
#buttonOpen, #buttonOpen2 {
width: 4%;
margin-top: -7%;
z-index: 4;
position: absolute;
margin-left: 40%;
}
#buttonOpen, #buttonOpen2:hover {
cursor: pointer;
}
#open > a:nth-child(2) > img:nth-child(1) {
width: 4%;
float: right;
margin-top: -34%;
margin-right: 2%;
}
#buttonClose2 {
width: 40%;
float: right;
margin-top: -34%;
margin-right: 5%;
}
#buttonClose, buttonClose2:hover {
cursor: pointer;
}
/*CERRAR BOTON*/
#buttonClose {
width: 4%;
margin-top: -7%;
z-index: 4;
position: absolute;
margin-left: 5%;
}
#buttonClose:hover {
cursor: pointer;
}
article {
flex-basis: 336px;
/*! margin:1.6%; */
background: hsla(0,0%,100%,0.7);
text-align: left;
margin-top: 20px;
}
#open, #open2 {
flex-basis: 336px;
margin: 1.6%;
text-align: left;
margin-top: 20px;
}
#open article, #open2 article {
flex-basis: 336px;
margin: 1.6%;
background: white;
text-align: left;
margin-top: 36px;
padding-bottom: 8%;
width: 94%;
}
h3 {
width: 95%;
float: left;
background: #85B840;
margin-top: 0%;
color: white;
padding-left: 5%;
font-family: martel;
text-shadow: 2px 2px 8px #000000;
font-size: 2em;
}
h4 {
color: #85B840;
padding: 5%;
padding-bottom: 0%;
font-family: martel;
font-size: 1.6em;
}
article p {
font-size: 1.4em;
padding: 5%;
padding-top: 0%;
padding-bottom: 0%;
}
#open > article div a:nth-child(1) img {
position: absolute;
margin-left: -85%;
}
#open > article div a:nth-child(2) img {
position: absolute;
margin-left: 20%;
margin-top: 12%;
}
#open2 > article div a:nth-child(1) img {
position: absolute;
margin-left: -88%;
}
#open2 > article div a:nth-child(2) {
position: absolute;
margin-left: -70%;
margin-top: 0%;
}
/*OJO AGREGAR PODCAST*/
#podcast{
display:block;
}
#podcast iframe{
width:90%;
height:500px;
margin:50px 0px;
border: none;
}
/*FOOTER DEL SITIO WEB*/
footer{
height:auto;
padding:0%;
overflow:auto;
color:rgba(105,105,105,1.00);
font-family: 'PT Sans', sans-serif;
text-align:center;
background-color:hsla(0,0%,24%,0.98); /*Cargamos el icono decorativo y el color de fondo de la caja*/
}
footer p{
margin-bottom:0%;
}
/*Microfotmato*/
.org{
margin:6% 0%;
font-size:1.7em;
}
.adr{
margin-bottom:6%;
font-size:1.7em;
}
.dir{
font-weight:bold;
}
.tel{
margin-bottom:6%;
font-size:1.7em;
}
.tel p:nth-child(2){
margin-top:0%;
}
.correo{
font-size:1.7em;
font-weight:bold;
}
.email{
color:rgba(255,255,255,1.00);
font-size:1.7em;
text-decoration:none;
}
a.email{
font-size:1em;
}
.redessociales{
margin-top:6%;
font-size:1.7em;
font-weight:bold;
}
/*--REDES SOCIALES--*/
/*Facebook*/
width:42px; /*Modificamos tamaño*/
height:42px; /*Modificamos altura*/
margin:2% 5% 1% 34%; /*Ajustamos márgenes*/
display:block; /*Propiedad que despliega al elemento <a>*/
float: left; /*Lo flotamos a la izquierda*/
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/facebook_logo.svg) center top no-repeat; /*Cargamos el icono*/
background-size:100%; /*Tamaño del icono*/
}
/*Twitter*/
width:42px; /*Modificamos tamaño*/
height:42px; /*Modificamos altura*/
margin-top:2%; /*Ajustamos márgenes*/
display:block; /*Propiedad que despliega al elemento <a>*/
float: left; /*Lo flotamos a la izquierda*/
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/twitter_logo.svg) center top no-repeat; /*Cargamos el icono*/
background-size:100%; /*Tamaño del icono*/
}
/*ORGANIZACIONES HERMANAS*/
div.organizaciones_hermanas{
height:auto;
margin-top:24%;
margin-right:2%;
overflow:auto;
background-color:rgba(55,55,55,1.00);
}
width:66px;
height:20px;
margin-right:2%;
margin-left:10%;
float:left;
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/organizacion_hermana_fundar.svg) center top no-repeat;
background-size:100%; /*Tamaño del icono*/
}
width:56px;
height:25px;
margin-right:2%;
float:left;
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/organizacion_hermana_prodh.svg)center top no-repeat; /*Cargamos el icono*/
background-size:100%; /*Tamaño del icono*/
}
width:58px;
height:25px;
margin-right:2%;
float:left;
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/organizacion_hermana_francisco_de_vitoria.svg) center top no-repeat;
background-size:100%; /*Tamaño del icono*/
}
width:55px;
height:21px;
margin-right:2%;
float:left;
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/organizacion_hermana_oficina_alto_comisionado_logo.svg) center top no-repeat;
background-size:100%; /*Tamaño del icono*/
}
width:56px;
height:26px;
margin:2% 2% 2% 25%;
float:left;
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/organizacion_hermana_cidh.svg) center top no-repeat;
background-size:100%; /*Tamaño del icono*/
}
width:25px;
height:25px;
margin:2%;
display:block;
float:left;
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/organizacion_hermana_red_tdt.svg) center top no-repeat;
background-size:100%; /*Tamaño del icono*/
}
width:55px;
height:18px;
margin:2%;
display:block;
float:left;
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/organizacion_hermana_serapaz.svg) center top no-repeat;
background-size:100%; /*Tamaño del icono*/
}
/*Vínculo "Mapa del Sitio"*/
#aspectos_legales p:first-child a{
margin-top:52%;
}
/*Aspectos Legales*/
div.aspectos_legales{
padding:2% 0%;
overflow:auto;
background-color:rgba(112,168,59,1.00);
}
.aspectos_legales p:first-child a{
margin-left:1.4%;
float:left;
color:rgba(255,255,255,1.00);
font-size:1.7em;
}
.aspectos_legales p:nth-child(3) a{
clear:left;
color:rgba(255,255,255,1.00);
font-size:1.7em;
}
/*--LICENCIA DE CREATIVE COMMONS--*/
width:99px; /*Modificamos tamaño*/
height:34px; /*Modificamos altura*/
margin:0% 0% 0% 35%; /*Ajustamos márgenes*/
display:block;
float:left;
text-indent:-9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/creativecommons_logo.png) center top no-repeat;
background-size:100%; /*Tamaño del icono*/
}
/******************************************************************Media Query para pantalla horizontal del móvil (320px X 480px)************************************************************************************/
@media screen and (min-width:320px) {
h2, body > div:nth-child(1) > section:nth-child(4) > h2:nth-child(2), body > div:nth-child(1) > section:nth-child(3) > h2:nth-child(1) {
font-size: 2em;
}
#open-button {
top: 14%;
}
input[name="buscar"] {
top: 15.5%;
}
.carrusel {
height: 350px;
}
p {
font-size: 1.6em;
padding-left: 2.2%;
padding-right: 2.2%;
}
figure {
margin: 0%;
}
.medios {
background: url(images/iconos/seccion_medios.png) no-repeat 50% 41px;
background-size: 15%;
margin-top: 4%;
}
.casos {
background: url(images/iconos/seccion_casos.png) no-repeat 50% 41px;
background-size: 15%;
margin-top: 0%;
}
.publicaciones {
background: url(images/iconos/seccion_publicaciones.png) no-repeat 50% 41px;
background-size: 15%;
margin-top: 0%;
}
h1 {
width: 90%;
}
.nav {
height: 800px;
}
article div:nth-child(5) > a:nth-child(1) > img:nth-child(1) {
margin-top: 1%;
}
article div:nth-child(5) > a:nth-child(2) > img:nth-child(1) {
margin-top: 60%;
}
article > a:nth-child(6) > img:nth-child(1) {/*LEERMAS ICONO*/
margin-top: -3%;
}
.suscripcion {
height: 615px;
}
.icon-list > ul > li > ul {
left: 6.5%, !important;
}
}
@media screen and (min-width:360px) {
article div:nth-child(5) > a:nth-child(1) > img:nth-child(1) {
margin-top: 0%;
}
input[name="buscar"] {
top: 6%;
}
input[type="text"] {
background-size:7%;
}
#open-button {
top: 4.5%;
}
.carrusel {
height: 370px;
}
p {
padding-left: 4%;
padding-right: 4%;
}
body > div:nth-child(1) > section:nth-child(4) > p:nth-child(3) {
text-align: left;
}
article > a:nth-child(6) > img:nth-child(1) {
margin-top: -9%;
}
h1 {
margin-bottom: -21%;
margin-top: 1%;
}
input[name="buscar"] {
top: 12%;
}
#open-button {
top: 9%;
}
#open > article div a:nth-child(1) img {
margin-left: -81% !important;
}
/*FOOTER DEL SITIO WEB*/
/*Organizaciones hermanas*/
div.organizaciones_hermanas{
margin-top:21%;
margin-right:0%;
}
width: 73px;
height: 23px;
}
width: 57px;
margin-right:2%;
}
width: 60px;
margin-right:3%;
}
width: 82px;
height: 25px;
}
margin-left:26%;
}
width: 26px;
height: 26px;
}
width: 66px;
height: 25px;
}
/*Aspectos legales*/
.aspectos_legales p:first-child a {
margin-left: 4%;
}
margin: 0% 0% 0% 36%;
}
}
@media screen and (min-width:480px) {
h1 {
margin-bottom: -9%;
margin-top: 1%;
}
#open-button {
top: 24%;
}
input[name="buscar"] {
top: 29%;
}
.carrusel {
height: 426px;
}
/*FOOTER DEL SITIO WEB*/
footer{
height:auto;
padding:0%;
overflow:auto;
color:rgba(105,105,105,1.00);
font-family: 'PT Sans', sans-serif;
text-align:center;
background-color:hsla(0,0%,24%,0.98); /*Cargamos el icono decorativo y el color de fondo de la caja*/
}
footer p{
margin-bottom:0%;
}
/*Microfotmato*/
.org{
margin:5% 0%;
}
.adr{
margin-bottom:5%;
}
.tel{
margin-bottom:5%;
}
.redessociales{
margin-top:5%;
}
/*--REDES SOCIALES--*/
/*Facebook*/
width:48px; /*Modificamos tamaño*/
height:48px; /*Modificamos altura*/
margin:2% 5% 1% 37%; /*Ajustamos márgenes*/
}
/*Twitter*/
width:48px; /*Modificamos tamaño*/
height:48px; /*Modificamos altura*/
}
/*ORGANIZACIONES HERMANAS*/
div.organizaciones_hermanas{
margin-top:18%;
margin-right:0%;
}
width:90px;
height:32px;
margin-right:2%;
margin-left:6%;
}
width:65px;
height:32px;
}
width:71px;
height:32px;
margin-right:2%;
}
width:99px;
height:32px;
}
width:62px;
height:26px;
margin:0% 2% 2% 0%;
}
width:38px;
height:38px;
margin:1% 2% 2% 35%;
}
width:92px;
height:32px;
}
/*Vínculo "Mapa del Sitio"*/
#aspectos_legales p:first-child a{
margin-top:52%;
}
/*Aspectos Legales*/
div.aspectos_legales{
padding:2% 0%;
overflow:auto;
background-color:rgba(112,168,59,1.00);
}
.aspectos_legales p:first-child a{
margin-left:4.8%;
float:left;
color:rgba(255,255,255,1.00);
font-size:1.7em;
}
.aspectos_legales p:nth-child(3) a{
clear:left;
color:rgba(255,255,255,1.00);
font-size:1.7em;
}
/*--LICENCIA DE CREATIVE COMMONS--*/
width:99px; /*Modificamos tamaño*/
height:34px; /*Modificamos altura*/
margin:0% 0% 0% 48%; /*Ajustamos márgenes*/
display:block;
float:left;
text-indent:-9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/creativecommons_logo.png) center top no-repeat;
background-size:100%; /*Tamaño del icono*/
}
#open > article:nth-child(1) > div:nth-child(4) > a:nth-child(1) > img:nth-child(1) {
margin-left: 0%;
}
.medios {
background: url(images/iconos/seccion_medios.png) no-repeat 50% 15px;
background-size: 14%;
}
.casos {
background: url(images/iconos/seccion_casos.png) no-repeat 50% 15px;
background-size: 14%;
}
.publicaciones {
background: url(images/iconos/seccion_publicaciones.png) no-repeat 50% 15px;
background-size: 14%;
}
}
@media screen and (min-width:640px) {
.carrusel {
height: 501px;
margin-top: 11%;
}
#open-button {
top: 24%;
}
input[name="buscar"] {
top: 32%;
}
input[type="text"] {
background-size: 7%;
}
.menu-button{
width:3.5em !important;
height:3.5em !important;
}
.medios {
background: url(images/iconos/seccion_medios.png) no-repeat 50% 10px;
background-size: 11%;
}
.casos {
background: url(images/iconos/seccion_casos.png) no-repeat 50% 10px;
background-size: 11%;
}
.publicaciones {
background: url(images/iconos/seccion_publicaciones.png) no-repeat 50% 10px;
background-size: 11%;
}
.publicacionesh2 {
background: url(images/iconos/seccion_publicaciones.png) no-repeat 50% 10px;
background-size: 11%;
}
article > a:nth-child(6) > img:nth-child(1) {
margin-top: -4%;
}
/*FOOTER DEL SITIO*/
/*Redes Sociales*/
width: 46px;
height: 46px;
margin: 2% 3% 1% 41%;
}
width: 46px;
height: 46px;
}
/*Organizaciones Hermanas*/
div.organizaciones_hermanas{
margin-top:15%;
}
margin-bottom:1%;
margin-left:4%;
}
width: 64px;
margin: 0% 2% 1% 0%;
}
width: 27px;
height: 26px;
margin: 0% 2% 1% 0%;
}
margin: 0%;
}
/*Aspectos legales*/
.aspectos_legales p:first-child a {
margin-left:4%;
}
margin-left:60%;
}
}
/*Media Query para tableta (768px X 1024px)*/
@media screen and (min-width:768px) {
input[name="buscar"] {
width: 25%;
height: 31px;
left: 70%;
top: 5%;
padding-left: 2%;
}
input[type="text"] {
background-size: 8%;
}
.carrusel {
margin-top: -21%;
height: 490px;
}
/*OJO ROLAR*/
h1 {
width: 50%;
margin-left: 3%;
margin-top: 2%;
margin-bottom: -15%;
}
p {
font-size: 1.75em;
}
.medios {
background-size: 7%;
font-size: 3em;
}
.casos {
background-size: 7%;
font-size: 3em;
}
.publicaciones {
background-size: 7%;
font-size: 3em;
}
.publicacionesh2 {
background: url(images/iconos/seccion_publicaciones.png) no-repeat 50% 10px;
background-size: 9%;
position: absolute;
top: 21%;
}
article {
flex: 1;
margin: 5%;
}
body > div:nth-child(1) > section:nth-child(7) > div:nth-child(4) {
flex: -moz-available;
}
article div:nth-child(5) > a:nth-child(2) > img:nth-child(1) {
margin-top: 146%;
}
article > a:nth-child(6) > img:nth-child(1) {
margin-top: -4%;
}
.suscripcion {
height: 592px;
}
.nav {
margin-top: 30%;
}
/*FOOTER*/
footer{
clear:left; /* regresamos el footer a su posicion debido a que flotamos las secciones de telefono y comentarios*/
}
#footer div{
min-width:0px;
}
.org{
margin:3% 0%;
font-size:1.6em;
}
.adr{
margin-left:3%;
float:left;
font-size:1.6em;
text-align:left;
}
.tel{
margin-left:1%;
float:left;
font-size:1.6em;
text-align:left;
}
.correo{
margin-left:3%;
float:left;
font-size:1.6em;
text-align:left;
}
.redessociales{
margin-left: 3%;
margin-top: 0%;
float:left;
font-size:1.6em;
text-align:left;
}
/*REDES SOCIALES*/
/*Facebook*/
width:43px;
height:43px;
margin-right:16%;
margin-left:0%;
}
/*Twitter*/
width:43px;
height:43px;
}
margin: 0% 14% 11% 14%;
}
/*Organizaciones hermanas*/
div.organizaciones_hermanas{
padding:1.5%;
clear:left;
position:relative;
}
margin-left: 1%;
margin-right: 4%;
}
margin-right:4%;
}
margin-right:4%;
}
margin-right:4%;
}
margin-right:5%;
}
margin-right:4%;
}
margin-left:3%;
}
/*Aspectos Legales*/
/*Creative Commons*/
margin: 0% 0% 0% 65%;
}
.aspectos_legales p:nth-child(3) a {
position:absolute;
left:42%;
}
}
@media screen and (min-width:800px) {
.nav {
margin-top: 30%;
}
article {
flex: 1 1 0%;
margin: 6%;
}
}
@media screen and (min-width:980px) {
article {
flex-basis: 305px;
background: rgba(255, 255, 255, 0.7) none repeat scroll 0% 0%;
text-align: left;
margin: 0%;
flex: 0;
height: 600px;
}
section:nth-child(7) div:nth-child(4) {
background: rgba(255, 255, 255, 0.7) none repeat scroll 0% 0%;
text-align: left;
margin: 0%;
flex: 0;
}
h2, body > div:nth-child(1) > section:nth-child(4) > h2:nth-child(2), body > div:nth-child(1) > section:nth-child(3) > h2:nth-child(1) {
font-size: 3em;
}
}
/*Media Query para pantalla horizontal de tableta (768px X 1024px)*/
@media screen and (min-width:1024px) {
.carrusel {
height: 606px;
}
/*FOOTER*/
.org{
margin: 3% 0%;
}
.adr{
margin-left:6%;
}
.tel{
margin-left:7%;
}
.correo{
margin-left:7%;
}
.redessociales{margin-left:8%;}
/*Organizaciones hermanas*/
margin-right: 6%;
}
margin-right: 6%;
}
margin-right: 6%;
}
margin-right: 6%;
}
margin-right: 6%;
}
margin-left: 2.5%;
}
/*Aspectos Legales*/
.aspectos_legales p:first-child a {
margin-left: 6%;
}
margin: 0% 0% 0% 67%; /*Modificamos los márgenes del elemento <a> que pertenece al vínculo de la licencia de uso*/
}
.aspectos_legales p:nth-child(3) a {
left: 44%;
}
}
/*Media Query para DESKTOP(1280px)*/
@media screen and (min-width:1280px) {
/*Buscador*/
h1{
margin-bottom:0%;
}
input[name="buscar"] {
width: 13%;
height: 35px;
left: 78.6%;
top: 12%;
padding-left: 1%;
font-size: 1.7em;
}
/*ROLAR*/
input[type="text"] {
background-size: 6%;
background-position: 97% 52%;
border: thin solid;
border-color: gray;
top: 90px;
left: 79.4%;
}
h2 {
padding-top: 147px;
}
section:nth-child(3), section:nth-child(4), section:nth-child(5), section:nth-child(6) {
margin-top: 5%;
}
body > div:nth-child(1) > section:nth-child(8) {
padding-top: 4%;
}
/*Articulos*/
section:nth-child(5) article {
margin-left: 2%;
}
/*Compartir Facebook*/
article div:nth-child(5) > a:nth-child(1) > img:nth-child(1) {
margin-top: 2%;
}
/*Compartir Twitter*/
article div:nth-child(5) > a:nth-child(2) > img:nth-child(1) {
margin-top: 50%;
}
/*Leer más*/
article > a:nth-child(6) > img:nth-child(1) {
margin-top: -2%;
}
figure:nth-child(4) > img:nth-child(1) {
width: 90%;
}
/*FOOTER*/
div.organizaciones_hermanas{
margin-top: 3%;
}
.tel{
margin-bottom:0%;
margin-left:12%;
}
.correo{
margin-left:12%;
}
/*REDES SOCIALES*/
.redessociales{
margin-left:10%;
}
/*Facebook y Twitter*/
width:50px;
height:50px;
margin-right:0%;
margin-left:0%;
}
width:50px;
height:50px;
margin-left:4%;
}
/*Organizaciones Hermanas*/
margin-right:8%;
}
margin-right: 7%;
}
margin-right: 8%;
}
margin-right: 8%;
}
margin-right: 7%;
}
margin-right: 7%;
}
margin-left: 2%;
}
/*Creative Commons*/
margin: 0% 0% 0% 70%; /*Modificamos los márgenes del elemento <a> que pertenece al vínculo de la licencia de uso*/
}
}
/*********************************************************************************************************************************************************************NAV********************************************************/
.contenedor {
max-width: 100%;
min-width: 640px;
height: auto;
margin: 0 auto;
overflow: auto;
}
/*Insertar los estilos para ajustar el menu para móviles sideslide*/
.menu-wrap a {
font-size: 1em;
}
/* Estilos botones móvil*/
.icon-list > ul:nth-child(1) > li > a {
color: #000000;
}
/*Estilos colores hover*/
.menu-wrap a:hover, .menu-wrap a:focus {
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
/* Menu Button */
.menu-button {
position: fixed;
z-index: 1000;
margin: .1em;
margin-top: 4%;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.1em;
color: transparent;
background: rgba(107, 159, 61, 1.00);
right: 20px;
border-radius: 6px;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#FFFFFF 20%, transparent 20%, transparent 40%, #FFFFFF 40%, #FFFFFF 60%, transparent 60%, transparent 80%, #FFFFFF 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 1em;
height: 1em;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 1em;
font-size: 0.75em;
border: none;
background: transparent;
color: transparent;
}
.close-button::before, .close-button::after {
content: '';
position: absolute;
width: 3px;
height: 100%;
top: 0;
left: 50%;
background: #bdc3c7;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*Colocamos el menú más arriba reduciendo el padding*/
div.menu-wrap {
padding-top: 20px;
background: none;
}
/* Menu */
.menu-wrap {
position: absolute;
z-index: 1001;
width: 96%;
height: 100%;
background: white;
/*padding: 2.5em 1.5em 0;*/
font-size: 1.15em;
-webkit-transform: translate3d(-736px, 0, 0);
-moz-transform: translate3d(-736px, 0, 0);
-o-transform: translate3d(-736px, 0, 0);
-ms-transform: translate3d(-736px, 0, 0);
transform: translate3d(-736px, 0, 0);
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.menu, .icon-list {
height: 100%;
}
.icon-list {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.icon-list ul {
list-style: none;
position: fixed;
right: 0%;
width: 45%;
}
/*interlineado*/
.icon-list > ul li {
padding-bottom: 15px;
padding-top: 15px;
}
/*Acomodo de los elementos desplegables de los li con hijos*/
.icon-list > ul > li > ul {
left: 0%;
top: 100px;
width: 45%;
padding-left: 10%;
color: #000000;
}
.icon-list > ul:nth-child(1) > li:nth-child(4) > ul:nth-child(2){
top: 145px;
}
.icon-list > ul:nth-child(1) > li:nth-child(6) > ul:nth-child(2){
top: 233px;
}
.icon-list > ul > li > ul > li:nth-child(1) {
background-color: #386A33;
}
.icon-list > ul > li > ul > li:nth-child(7) {
background-color: #BCCC47;
}
.icon-list > ul > li > ul > li:nth-child(6) {
background-color: #85B840;
}
.icon-list > ul > li > ul > li:nth-child(5) {
background-color: #7EB040;
}
.icon-list > ul > li > ul > li:nth-child(4) {
background-color: #509E44;
}
.icon-list > ul > li > ul > li:nth-child(3) {
background-color: #5a8e39;
}
.icon-list > ul > li > ul > li:nth-child(2) {
background-color: #4A813C;
}
.icon-list > ul > li > ul > li:nth-child(1) {
background-color: #386A33;
}
.icon-list a, #menuprincipal li a {
font-family: 'Montserrat', sans-serif !important;
color: #000000 !important;
font-size: 1em;
}
.icon-list ul li>ul {
display: none;
}
.icon-list ul li:hover ul {
display: block;
}
/*Colores para los botones del nav en movil*/
div.menu-wrap > div > ul > li:nth-child(1) {
background-color: #BCCC47;
}
div.menu-wrap > div > ul > li:nth-child(2) {
background-color: #85B840;
}
div.menu-wrap > div > ul > li:nth-child(3) {
background-color: #7EB040;
}
div.menu-wrap > div > ul > li:nth-child(4) {
background-color: #509E44;
}
div.menu-wrap > div > ul > li:nth-child(5) {
background-color: #5a8e39;
}
div.menu-wrap > div > ul > li:nth-child(6) {
background-color: #4A813C;
}
div.menu-wrap > div > ul > li:nth-child(7) {
background-color: #386A33;
}
/*Colores para los botoenes del submeú*/
body > div > nav > div.menu-wrap > div > ul > li > ul > li:nth-child(1) {
background-color: #386A33;
}
body > div > nav > div.menu-wrap > div > ul > li > ul > li:nth-child(2) {
background-color: #4A813C;
}
body > div > nav > div.menu-wrap > div > ul > li > ul > li:nth-child(3) {
background-color: #5a8e39;
}
body > div > nav > div.menu-wrap > div > ul > li > ul > li:nth-child(4) {
background-color: #509E44;
}
body > div > nav > div.menu-wrap > div > ul > li > ul > li:nth-child(5) {
background-color: #7EB040;
}
body > div > nav > div.menu-wrap > div > ul > li > ul > li:nth-child(6) {
background-color: #85B840;
}
body > div > nav > div.menu-wrap > div > ul > li > ul > li:nth-child(7) {
background-color: #BCCC47;
}
/* Shown menu */
.show-menu .menu-wrap {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.show-menu .icon-list, .show-menu .icon-list a {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.show-menu .icon-list a {
text-decoration: none;
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.8s;
transition: opacity 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/*Estilos para menu principal para desktop*/
#menuprincipal {
width: 100%;
margin: 0% 85px 30% auto;
z-index: 2000;
display: block;
}
#menuprincipal ul ul {
display: none;
border-radius: 4px;
padding: 0;
position: absolute;
top: 100%;
background: #fff; /* Old browsers */
z-index: 2000;
}
#menuprincipal ul li:hover > ul {
display: block;
}
#menuprincipal ul {
/*width: 100%;*/
margin: 0% 0% 0% 0%;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
#menuprincipal ul:after {
content: "";
clear: both;
display: block;
}
#menuprincipal ul li {
text-align: center;
float: left;
/*width: auto !important;*/
display: block;
}
#menuprincipal ul li a {
/*CAMBIAR EN EL QUERY EL PADDING y EL FONT SIZE*/
padding: 7px 40px !important;
display: block;
color: #000000;
font-family: nunito;
font-size: 1.7em;
text-align: center;
text-decoration: none;/*float: left;*/
}
/*Media Query para arrgeglar el tamaño del nav*/
@media screen and (max-width: 1220px) {
#menuprincipal ul li a {
padding: 7px 39px !important;
font-size: 1.5em;
}
}
@media screen and (max-width: 1105px) {
#menuprincipal ul li a {
padding: 7px 35px !important;
font-size: 1.5em;
}
}
@media screen and (max-width: 1024px) {
#menuprincipal ul li a {
padding: 7px 30px !important;
font-size: 1.4em;
}
}
@media screen and (max-width: 1067px) {
#menuprincipal ul li a {
padding: 7px 28px !important;
font-size: 1.4em;
}
}
@media screen and (max-width: 936px) {
#menuprincipal ul li a {
padding: 7px 26px !important;
font-size: 1.4em;
}
}
@media screen and (max-width: 902px) {
#menuprincipal ul li a {
padding: 7px 25px !important;
font-size: 1.4em;
}
}
@media screen and (max-width: 888px) {
#menuprincipal ul li a {
padding: 7px 22px !important;
font-size: 1.4em;
}
}
@media screen and (max-width: 846px) {
#menuprincipal ul li a {
padding: 7px 20px !important;
font-size: 1.4em;
}
}
@media screen and (max-width: 818px) {
#menuprincipal ul li a {
padding: 7px 16px !important;
font-size: 1.4em;
}
}
@media screen and (max-width: 769px) {
#menuprincipal ul li a {
padding: 7px 13px !important;
font-size: 1.4em;
}
}
/*Color para cada link*/
#menuprincipal > ul:nth-child(1) > li:nth-child(1) > a {
border-top: 10px solid #BCCC47;
}
#menuprincipal > ul:nth-child(1) > li:nth-child(2) > a {
border-top: 10px solid #85B840;
}
#menuprincipal > ul:nth-child(1) > li:nth-child(3) > a {
border-top: 10px solid #7EB040;
}
#menuprincipal > ul:nth-child(1) > li:nth-child(4) > a {
border-top: 10px solid #509E44;
}
#menuprincipal > ul:nth-child(1) > li:nth-child(5) > a {
border-top: 10px solid #5a8e39;
}
#menuprincipal > ul:nth-child(1) > li:nth-child(6) > a {
border-top: 10px solid #4A813C;
}
#menuprincipal > ul:nth-child(1) > li:nth-child(7) > a {
border-top: 10px solid #386A33;
}
#menuprincipal ul li:first-child ul {
width: 23%;
left: 0%;
}
#menuprincipal ul li:nth-child(2) ul {
width: 23%;
left: 24%;
}
/*Animacion hover para el nav*/
/* Sweep To Bottom */
.hvr-sweep-to-bottom {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.hvr-sweep-to-bottom:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #BCCC47;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.vinculo2:before {
background: #85B840 !important;
}
.vinculo3:before {
background: #7EB040 !important;
}
.vinculo4:before {
background: #509E44 !important;
}
.vinculo5:before {
background: #5a8e39 !important;
}
.vinculo6:before {
background: #4A813C !important;
}
.vinculo7:before {
background: #386A33 !important;
}
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {
color: none;
}
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
#menuprincipal ul ul li {
float: none;
position: relative;
}
#menuprincipal ul ul li a {
width: 190px;
padding: 6px 12px;
border-radius: 0px;
border-top-width: 5px;
border-top-style: solid;
margin-right: 0px;
float: none;
color: #000000;
font-size: 14px;
line-height: normal;
text-align: left;
text-transform: uppercase;
background: none;
text-shadow: none;
-webkit-text-shadow: none;
-moz-text-shadow: none;
}
/*Colores border top para submenñu*/
#menuprincipal > ul > li > ul > li:nth-child(1) > a {
border-color: #BCCC47;
}
#menuprincipal > ul > li > ul > li:nth-child(2) > a {
border-color: #85B840;
}
#menuprincipal > ul > li > ul > li:nth-child(3) > a {
border-color: #7EB040;
}
#menuprincipal > ul > li > ul > li:nth-child(4) > a {
border-color: #509E44;
}
#menuprincipal > ul > li > ul > li:nth-child(5) > a {
border-color: #5a8e39;
}
#menuprincipal > ul > li > ul > li:nth-child(6) > a {
border-color: #4A813C;
}
#menuprincipal > ul > li > ul > li:nth-child(7) > a {
border-color: #386A33;
}
/*Colores para submenú en movil*/
.icon-list > ul:nth-child(1) > li:nth-child(3) > ul:nth-child(2) > li{
background-color: #7EB040;
border: thin solid black;
}
.icon-list > ul:nth-child(1) > li:nth-child(4) > ul:nth-child(2) > li{
background-color:#509E44;
border: thin solid black;
}
.icon-list > ul:nth-child(1) > li:nth-child(6) > ul:nth-child(2) > li{
background-color:#4A813C;
border:thin solid black;
}
/*Esconder el #menuprincipal en los moviles y tableta 768 y aparecer .menu-wrap y .menu-button*/
@media screen and (max-width: 767px) {
#menuprincipal {
display: none;
}
.menu-wrap, .menu-button {
display: block;
}
}
/*Esconder el .menu-wrap y .menu-button y aparecer el menú para tableta 1024 y computadoras*/
@media screen and (min-width: 768px) {
#menuprincipal {
display: block;
}
.menu-wrap, .menu-button {
display: none;
}
/***OJO ROLAR**/
#casos #menuprincipal{
margin-bottom:0px;
margint-top:110px;
}
#sectioncasos{
width: 94.5%;
margin: 0 AUTO;
}
#sectioncasos article{
flex-basis: 300px;
margin-bottom:50px;
height:auto;
}
#sectioncasos > h2{
padding-top: 147px;
border-bottom: solid 5px;
color: #5a8e39;
}
}
@media screen and (min-width: 1280px) {
#sectioncasos article{
flex-basis: 311px;
margin-bottom:50px;
height:auto;
}
#casos #menuprincipal{
margint-top:80px;
}
}
/*FOTER*/
/*FOOTER DEL SITIO WEB*/
footer{
height:auto;
padding:0%;
overflow:auto;
color:rgba(105,105,105,1.00);
font-family: 'PT Sans', sans-serif;
text-align:center;
background-color:hsla(0,0%,24%,0.98); /*Cargamos el icono decorativo y el color de fondo de la caja*/
}
footer p{
margin-bottom:0%;
}
/*Microfotmato*/
.org{
margin:6% 0%;
font-size:1.7em;
}
.adr{
margin-bottom:6%;
font-size:1.7em;
}
.dir{
font-weight:bold;
}
.tel{
margin-bottom:6%;
font-size:1.7em;
}
.tel p:nth-child(2){
margin-top:0%;
}
.correo{
font-size:1.7em;
font-weight:bold;
}
.email{
color:rgba(105,105,105,1.00);
font-size:1.7em;
text-decoration:none;
}
.email:hover{
color:rgba(255,255,255,1.00);
}
a.email{
font-size:1em;
}
.redessociales{
margin-top:6%;
font-size:1.7em;
font-weight:bold;
}
/*--REDES SOCIALES--*/
/*Facebook*/
width:42px; /*Modificamos tamaño*/
height:42px; /*Modificamos altura*/
margin:2% 5% 1% 34%; /*Ajustamos márgenes*/
display:block; /*Propiedad que despliega al elemento <a>*/
float: left; /*Lo flotamos a la izquierda*/
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/facebook_logo.svg) center top no-repeat; /*Cargamos el icono*/
background-size:100%; /*Tamaño del icono*/
}
/*Twitter*/
width:42px; /*Modificamos tamaño*/
height:42px; /*Modificamos altura*/
margin-top:2%; /*Ajustamos márgenes*/
display:block; /*Propiedad que despliega al elemento <a>*/
float: left; /*Lo flotamos a la izquierda*/
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/twitter_logo.svg) center top no-repeat; /*Cargamos el icono*/
background-size:100%; /*Tamaño del icono*/
}
/*ORGANIZACIONES HERMANAS*/
div.organizaciones_hermanas{
height:auto;
margin-top:24%;
margin-right:2%;
overflow:auto;
background-color:rgba(55,55,55,1.00);
}
width:66px;
height:20px;
margin-right:2%;
margin-left:10%;
float:left;
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/organizacion_hermana_fundar.svg) center top no-repeat;
background-size:100%; /*Tamaño del icono*/
}
width:56px;
height:25px;
margin-right:2%;
float:left;
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/organizacion_hermana_prodh.svg)center top no-repeat; /*Cargamos el icono*/
background-size:100%; /*Tamaño del icono*/
}
width:58px;
height:25px;
margin-right:2%;
float:left;
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/organizacion_hermana_francisco_de_vitoria.svg) center top no-repeat;
background-size:100%; /*Tamaño del icono*/
}
width:55px;
height:21px;
margin-right:2%;
float:left;
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/organizacion_hermana_oficina_alto_comisionado_logo.svg) center top no-repeat;
background-size:100%; /*Tamaño del icono*/
}
width:56px;
height:26px;
margin:2% 2% 2% 25%;
float:left;
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/organizacion_hermana_cidh.svg) center top no-repeat;
background-size:100%; /*Tamaño del icono*/
}
width:25px;
height:25px;
margin:2%;
display:block;
float:left;
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/organizacion_hermana_red_tdt.svg) center top no-repeat;
background-size:100%; /*Tamaño del icono*/
}
width:55px;
height:18px;
margin:2%;
display:block;
float:left;
text-indent: -9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/organizacion_hermana_serapaz.svg) center top no-repeat;
background-size:100%; /*Tamaño del icono*/
}
/*Vínculo "Mapa del Sitio"*/
#aspectos_legales p:first-child a{
margin-top:52%;
}
/*Aspectos Legales*/
div.aspectos_legales{
padding:2% 0%;
overflow:auto;
background-color:rgba(112,168,59,1.00);
}
.aspectos_legales p:first-child a{
margin-left:7%;
float:left;
color:rgba(255,255,255,1.00);
font-size:1.7em;
}
.aspectos_legales p:nth-child(3) a{
clear:left;
color:rgba(255,255,255,1.00);
font-size:1.7em;
}
/*--LICENCIA DE CREATIVE COMMONS--*/
width:99px; /*Modificamos tamaño*/
height:34px; /*Modificamos altura*/
margin:0% 0% 0% 22%; /*Ajustamos márgenes*/
display:block;
float:left;
text-indent:-9999px; /*Propiedad que sistituye al texto por la imagen*/
background:url(images/iconos/creativecommons_logo.png) center top no-repeat;
background-size:100%; /*Tamaño del icono*/
}