@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK&display=swap');
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Noto Sans HK', sans-serif;
  background: #fff;
}
p{
	text-align: justify;
	font-size: 13px;
}
.nav-shadow {
    box-shadow: 0 2px 15px rgb(0 0 0 / 5%) !important;
}
.nav-border{
	border-right: 3px solid #fc4a1a;
}
.nav-pills .nav-link {
  padding: 20px;
  width: 300px;
  height: 100%;
  border: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;
  color: #333;
  transition: all 0.3s;
}
.nav-pills .nav-link.active {
  background: -webkit-linear-gradient(30deg, #fc4a1a, #f7b733);
  background: -o-linear-gradient(30deg, #fc4a1a, #f7b733);
  background: linear-gradient(120deg, #fc4a1a, #f7b733);
  color: #fff;
  box-shadow: 0 2px 15px rgb(0 0 0 / 10%);
}
.nav-pills .nav-link{
	border-radius: 0px;
}
.nav-link .circle-icon {
    height: 50px;
    width: 50px;
    border-radius: 50px;
    border: 2px solid #f7b733;
    background: #fff;
    color: #fc4a1a;
    font-size: 22px;
}
.img-cont{
	max-width: 350px;
		width: 100%;
}
.anyClass {
  height:650px;
  overflow-y: scroll;
}

.contenido_check {
  width: 50px;
  height: 50px;
  background-color: red;
  /* centrar vertical y horizontalmente */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px; /* aplicar a top y al margen izquierdo un valor negativo para completar el centrado del elemento hijo */
}
.diseño_banner{
   filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.8));
   width: auto;
   height: 100px;
}
#div_carga{
   opacity: 0.5;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
	background:#d4d4d4 repeat;
	display:none;

         z-index: 9999999;
   
}
#cargador{
    position:absolute;
    top:50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
    z-index:2;
   /*z-index:999999;*/
}

.areas {
  
 opacity: 0.8;
  
}

.areas1 {
  
 opacity: 0.8;
  
}

.btn_img {
 border-top-right-radius:  0px ;
  border-bottom-right-radius: 0px;

}

.carousel-inner > .item > img,
        .carousel-inner > .item > a > img {
            width: 100%;
            height: 500px;
            margin: auto;
        }
        /* Para los margenes del contendor de las fotos. Podes cambiarle el ancho a gusto tambien! */
        .carousel-control {
            width: 10%;
        }
 .social {
	position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	left: 0; /* Establecemos la barra en la izquierda */
	top: 200px; /* Bajamos la barra 200px de arriba a abajo */
	z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}

	.social ul {
		list-style: none;
	}

	.social ul li a {
		display: inline-block;
		color:#fff;
		background: #000;
		padding: 10px 15px;
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
	}

	.social ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
	.social ul li .icon-twitter {background: #00abf0;}
	.social ul li .icon-googleplus {background: #d95232;}
	.social ul li .icon-pinterest {background: #ae181f;}
	.social ul li .icon-mail {background: #666666;}

	.social ul li a:hover {
		background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}