@font-face {
  font-family: "hiragino-kaku-gothic";
  src: url("hiragino-kaku-gothic-std-w8.otf");
  font-weight: 900;
}
@font-face {
  font-family: "hiragino-kaku-gothic";
  src: url("Heisei Kaku Gothic Std W3.otf");
    font-weight: 300;

}
@font-face {
  font-family: "hiragino-kaku-gothic";
  src: url("Heisei Kaku Gothic Std W5.otf");

}
@font-face {
  font-family: "hiragino-kaku-gothic";
  src: url("Heisei Kaku Gothic Std W7.otf");
    font-weight: 500;

}
@font-face {
  font-family: "hiragino-kaku-gothic";
  src: url("Heisei Kaku Gothic Std W9.otf");
    font-weight: 700;


}


body{
	font-family: "hiragino-kaku-gothic";
  overflow-x: hidden;
  position: relative;
  height: 700px;
}

div.boton-lateral{
  background-color:#F8B836;
  height: 700px;
  width: 70px;
  position:relative;
  cursor:pointer;
  z-index:2;
}

img.img-menu{
  position: absolute;
top: 50%;
width: 45px;
left: 50%;
transform: translate(-50%,-50%);

}
div.menu-lateral{
  width: 428px;
  transition: all 0.3s ease-in-out;
  position: relative;
  z-index: 1;
  left:0px;
}
div.menu-lateral.oculto{
  left:-550px;
}
ul.Categorias {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
  display: table;
}

ul.Categorias li {
  display: table-cell;
  color: #8B8688;
  text-align: left;
  text-align: center;
  cursor:pointer;
  padding: 20px 5px 25px 5px;
  text-decoration: none;
  width: 1%;
  font-size:14px;
  vertical-align: middle;
  transition: all 0.3s ease-in-out;
  font: normal normal normal 15px/18px "hiragino-kaku-gothic";

}



ul.Categorias li {
  color: white;
}
ul.Categorias li.Defensores {
    background-color: #3CA375;
}
ul.Categorias li.AreasProtegias {
    background-color: #388bb0;
}
ul.Categorias li.Bosques {
    background-color: #a3704c;

}
ul.Categorias li.Entrevistas {
  background-color: #ef8840;
}

div.fichas div.row.Defensores:hover {
    background-color: #3CA375;
}
div.fichas div.row.AreasProtegias:hover {
    background-color: #388bb0;
}
div.fichas div.row.Bosques:hover {
    background-color: #a3704c;

}
div.fichas div.row.Entrevistas:hover {
  background-color: #ef8840;
}




div.fichas div.row{
  cursor:pointer;
}
div.fichas div.col-12.col-sm-12.nnn{
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
background-color: rgba(50,50,50,.3); 

}
div.fichas div.row{

  color:white;
  border-bottom:solid 2px white;
  transition: all 0.2s ease-in-out;
}
div#ListaEntlaces{
  scrollbar-width: thin;
  scrollbar-color:   #f8b836 rgba(250,250,250,.5); 
}

/* Works on Chrome/Edge/Safari */

div#ListaEntlaces::-webkit-scrollbar {
  width: 5px;
}

div#ListaEntlaces::-webkit-scrollbar-track {
  background: rgba(250,250,250,.5);
}

div#ListaEntlaces::-webkit-scrollbar-thumb {
  background-color: #f8b836;
  border-radius: 20px;
  border: 0px solid rgba(250,250,250,.5);
}

h4.titNotas{
  text-align: left;
font: normal normal normal 16px/24px "hiragino-kaku-gothic";
letter-spacing: 0px;
padding-right: 10px;
}
p.pfecha{
    font: normal normal normal 16px/24px "hiragino-kaku-gothic";
  }
div.contenedor-principal,div.contenedor-galeria{
  width: calc(100vw - 428px - 70px - 0px);
  transition: all 0.3s ease-in-out;
  position: absolute;
  left:calc(428px + 70px );
}
div.contenedor-principal.completa,div.contenedor-galeria.completa{
  width: calc(100vw - 65px );
  position: absolute;
  left:70px;
  transition: all 0.3s ease-in-out;
}

div.tit-fecha{
margin:20px 0px;
}

div.contenedor-menu{
  margin:0px -15px;
  position: relative;
  overflow: hidden;

}

div#contenedor-menu-fondo{
  background-image: url("../imgs/Defensores-ambientales.JPG");
  height: 100%;
  background-position: 30% center;
  background-repeat: no-repeat;
  background-size: cover;
}


div.texto-grande{
  height: 700px;

  position: relative;
}
div.texto-grande div.texto-grande-cita {
  text-align: left;
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(0%, -50%);
  font-size:50px;
  color: white;
  width: 80%;
  font-weight: 700;
  min-width: 300px;
  text-shadow: 0 0 4px #000, 0 0 4px #000;
}
div.texto-grande div.texto-grande-cita p.pinicio{
  font: normal normal normal 36px/48px "hiragino-kaku-gothic";
 border-bottom: solid 1px white;
  margin-bottom:0px;
}
div.texto-grande div.texto-grande-cita p.citaNorm{
  font: normal normal normal 36px/48px "hiragino-kaku-gothic";
   border-bottom: solid 1px white;
  margin-bottom:0px;
}

p.autor-afiliacion{
  text-align: right;
font: normal normal normal 18px/28px "hiragino-kaku-gothic";
letter-spacing: 0px;
  font-weight:700;
  right: -100%;
  margin-top:15px;
position: relative;
max-width: 500px;
transform: translateX(-100%);

}

div#boton-galeria{
  cursor: pointer;
  position: absolute;
  z-index: 3;
  right: 70px;
  width: 208px;
  background:#4A3E3C;
  bottom:0px;
}
div#boton-galeria p{
  text-align: center;
  color: #FFFFFF;
  padding:24px;
  margin:0px;
  font: normal normal normal 15px/18px "hiragino-kaku-gothic";
}
div#boton-galeria.boton-inicio{
  background:#CAB854;
  right: 0px;
  width: 278px;
}

div#boton-home{
  cursor: pointer;
  position: absolute;
  z-index: 3;
  right: 0px;
  width: 70px;
  background:#CAB854;
  bottom:0px;
}
div#boton-home p{
  text-align: center;
  color: #FFFFFF;
  padding:24px 0px;
  margin:0px;
  text-align: center;
  font: normal normal normal 15px/18px "hiragino-kaku-gothic";
}


div#boton-home.oculto{
  visibility: hidden;
}








button.ir-al-articulo{
  float:right;
  background: #F8B836 0% 0% no-repeat padding-box;
  border-radius: 4px;
  font: normal normal normal 16px/22px "hiragino-kaku-gothic";
  margin-top: 20px;
  padding:5px 10px;
  visibility: hidden;
  border:none;


}
button.ir-al-articulo a{
  font: normal normal normal 16px/22px "hiragino-kaku-gothic";

color: #FFFFFF;

text-transform: uppercase;

}


/*GALERIA*/
div.contenedor-galeria{
  background:#F8B836;
  visibility: hidden;
  height: 100%;
  overflow-y:scroll; 
  overflow-x: hidden;
}







ul.selectorFotosVideos {
  list-style-type: none;
  margin-left: 15px;
  padding: 0;

  overflow: hidden;
  background-color: white;
  display: table;
}

ul.selectorFotosVideos li {
  display: table-cell;
  color: #8B8688;
  text-align: center;
  padding: 20px 5px 25px 5px;
  text-decoration: none;
  width: 25%;
  font-size:14px;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.3s ease-in-out;
  font: normal normal normal 15px/18px "hiragino-kaku-gothic";

}



ul.selectorFotosVideos li.activo {
  color: white;
  background:#C18800;
}
div.galeria-unidadid{
  width: calc( 100% - 55px)
}
.modal-dialog{
  max-width: 1200px;
}

div.modal-content{
  background:none;
  border:none;
}

div#ModalCentradoGaleria{
  background:rgba(248, 184, 54,.8);
}
a.carousel-control-prev.video, a.carousel-control-next.video{
  height: calc(100% - 200px);
}


@media (min-width: 690px) and (max-width: 990px) {

 div.texto-grande div.texto-grande-cita p.pinicio{
  font: normal normal normal 22px/38px "hiragino-kaku-gothic";
 border-bottom: solid 1px white;
  margin-bottom:0px;
}
div.texto-grande div.texto-grande-cita p.citaNorm{
  font: normal normal normal 22px/38px "hiragino-kaku-gothic";
   border-bottom: solid 1px white;
  margin-bottom:0px;
}
}



@media (max-width: 690px) {


  div.fichas div.col-12.col-sm-12.nnn{
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
background-color: rgba(50,50,50,.3); 

}
  div.galeria-unidadid{
  width: calc( 100%);
  margin-bottom:100px;
}
  body{
  font-family: "hiragino-kaku-gothic";
  overflow-x: hidden;
  position: relative;
}
  
  div.boton-lateral{
    height: 560px;
    width: 45px;
    z-index: 10;
  }

  img.img-menu{
    width: 35px;
  }
  div.menu-lateral{
    width: calc(100vw - 45px );
    position: absolute;
    left:45px;
    top:0px;
  }
  div.menu-lateral.oculto{
    left:-100vw;
  }
  ul.Categorias{width: 100%;}

  ul.Categorias li {
    padding: 15px 10px 20px 12px;
    width: 1%;
    font: normal normal normal 12px/14px "hiragino-kaku-gothic";
  }
ul.selectorFotosVideos li {

    padding: 15px 10px 20px 12px;
    font: normal normal normal 12px/14px "hiragino-kaku-gothic";

}
  h4.titNotas{
    font: normal normal normal 12px/14px "hiragino-kaku-gothic";

  }
  p.pfecha{
    font: normal normal normal 10px/12px "hiragino-kaku-gothic";
  }
  div.contenedor-principal,div.contenedor-galeria{
    width: calc(100vw  - 45px );

    left:calc(100vw + 45px );
  }
  div.contenedor-principal.completa,div.contenedor-galeria.completa{
    width: calc(100vw - 45px );
    left:45px;
  }



  div.contenedor-menu{

    margin:100px -15px;
    overflow-x: hidden;
    position: relative;
  }
div.texto-grande{
  height: 560px;

}
  div.texto-grande div.texto-grande-cita{

    top: 40%;
    left: 5%;
    transform: translate(0%, -40%);
    width: 90%;
    min-width:auto;
    text-shadow: 0 0 3px #000, 0 0 3px #000;


  }
  div.texto-grande div.texto-grande-cita p.pinicio{
    padding-top:100px;
  font: normal normal normal 16px/20px "hiragino-kaku-gothic";
 border-bottom: solid 1px white;
  margin-bottom:0px;
}
div.texto-grande div.texto-grande-cita p.citaNorm{
      padding-top:100px;

  font: normal normal normal 16px/20px "hiragino-kaku-gothic";
   border-bottom: solid 1px white;
  margin-bottom:0px;
}
p.autor-afiliacion{
  text-align: right;

font: normal normal normal 11px/14px "hiragino-kaku-gothic";
  font-weight:700;

letter-spacing: 0px;
}
  div#boton-galeria{
    right: 70px;
    width: calc(100vw - 45px - 70px);
    z-index: 9;
  }
  div#boton-galeria p{

    font: normal normal normal 15px/18px "hiragino-kaku-gothic";
  }

div#boton-home{
  cursor: pointer;
  position: absolute;
  z-index: 3;
  right: 0px;
  width: 70px;
  background:#CAB854;
  bottom:0px;
}
div#boton-home p{
  text-align: center;
  color: #FFFFFF;
  padding:24px 0px;
  margin:0px;
  text-align: center;
  font: normal normal normal 15px/18px "hiragino-kaku-gothic";
}
div#boton-galeria.boton-inicio{
  right: 0px;
    width: calc(100vw - 45px );
}

button.ir-al-articulo a{

  font: normal normal normal 12px/22px "hiragino-kaku-gothic";
color: #fff;

text-transform: uppercase;

}



}