@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100;300;400;500;700&display=swap');

/*font-family: 'Noto Sans TC', sans-serif;
font-family: 'Montserrat', sans-serif;*/

.frase-general{
  font-weight: 500;
  font-size: 25pt;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  color: #013659;
  padding: 12px 0px 15px 0px;
}


/****INDEX SECCION1*****/
.box-content{ 
  padding-top:0; 
  color:#fff;
  margin-bottom: 3%;
}
.box-content .first-box{ 
  background:#42b3e5; 
  width:100%; 
  float:left; 
  padding:20px;
}
.box-content .first-box a:hover{ 
  color:#42b3e5;
}
.box-content .second-box{ 
  background:#1dd2c8; 
  width:100%; 
  float:left; 
  padding:20px;
}
.box-content .third-box{ 
  background:#4baabc; 
  width:100%; 
  float:left; 
  padding:20px;
}
.box-content .third-box a:hover{
  color:#4baabc;
}
.box-content .icon{ 
  width:20%; 
  float:left; 
  padding:6px 0; 
  border-right:1px dotted #fff;
}
.box-content .content{ 
  width:80%; 
  float:left; 
  padding-left:5%;
}
.box-content .content p{
  color:#fff; 
  margin-bottom:20px;
}
.modulo-index{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
  font-size: 11pt;
}
.box-content .content h4{
font-family: 'Noto Sans JP', sans-serif; 
  width:100%; 
  margin-bottom:23px; 
  margin-top:0; 
  position:relative; 
  font-weight:500;
}
.box-content .content h4:after{
  content:''; 
  width:30px; 
  height:1px; 
  float:left; 
  background:#fff; 
  position:absolute; 
  left:0; 
  bottom:-15px;
}
.boton-index{
  border: 1px solid #fff;
  padding: 8px 25px; 
  color: #fff;
}
.boton-index:hover{
  border: 1px solid #fff;
  padding: 8px 25px; 
  color: #fff!important;
  text-decoration: none;
  -webkit-box-shadow: 1px 1px 10px 0px rgba(255,255,255,1);
-moz-box-shadow: 1px 1px 10px 0px rgba(255,255,255,1);
box-shadow: 1px 1px 10px 0px rgba(255,255,255,1);
}

/*****PUNTOS IMPORTANTES*****/
.puntos{
  background: #F7F7F7;
  padding: 40px 15px;
  margin-bottom: 3%;
}
.border-img{
  border:2px solid #02294D;
  padding: 15px 15px;
  border-radius: 5px;
}

.cont{
  background: #C6D449;
  padding: 8px 6px;
  font-size: 13pt;
  font-family: 'Inter', sans-serif;
  text-align: center;
  font-weight: 500;
  margin-bottom: 4%;
}
.icono{
  font-size: 16pt!important;
  float: left;
  background: #86930d;
  padding: 16px 15px;
  color: #fff;
}
.cont1{
  background: #809cb5;
  padding: 8px 6px;
  font-size: 13pt;
  font-family: 'Inter', sans-serif;
  text-align: center;
  font-weight: 500;
  margin-bottom: 4%;
}
.icono1{
  font-size: 16pt!important;
  float: left;
  background: #023c70;
  padding: 16px 15px;
  color: #fff;
}
.cont2{
  background: #db7676;
  padding: 8px 6px;
  font-size: 13pt;
  font-family: 'Inter', sans-serif;
  text-align: center;
  font-weight: 500;
  margin-bottom: 4%;
}
.icono2{
  font-size: 16pt!important;
  float: left;
  background: #890202;
  padding: 16px 15px;
  color: #fff;
}
.cont3{
  background: #ef7d47;
  padding: 8px 6px;
  font-size: 13pt;
  font-family: 'Inter', sans-serif;
  text-align: center;
  font-weight: 500;
  margin-bottom: 4%;
}
.icono3{
  font-size: 16pt!important;
  float: left;
  background: #b53d05;
  padding: 16px 15px;
  color: #fff;
}
.cont4{
  background: #bb64e0;
  padding: 8px 6px;
  font-size: 13pt;
  font-family: 'Inter', sans-serif;
  text-align: center;
  font-weight: 500;
  margin-bottom: 4%;
}
.icono4{
  font-size: 16pt!important;
  float: left;
  background: #7e0fad;
  padding: 16px 15px;
  color: #fff;
}
.cont5{
  background: #5edbd0;
  padding: 8px 6px;
  font-size: 13pt;
  font-family: 'Inter', sans-serif;
  text-align: center;
  font-weight: 500;
  margin-bottom: 4%;
}
.icono5{
  font-size: 16pt!important;
  float: left;
  background: #099b91;
  padding: 16px 15px;
  color: #fff;
}

.cont6{
  background: #7acaff;
  padding: 8px 6px;
  font-size: 13pt;
  font-family: 'Inter', sans-serif;
  text-align: center;
  font-weight: 500;
  margin-bottom: 4%;
}
.icono6{
  font-size: 16pt!important;
  float: left;
  background: #3184b7;
  padding: 16px 15px;
  color: #fff;
}
.titulo-puntos{
	font-weight: 500;
	font-size: 12pt;
	font-family: 'Montserrat', sans-serif;
}


/* CATEGORIAS*/
/******NUEVAS CATEGORIAS*****/
.categoria-p{
  background: #074c75;
  color: #fff;
  padding: 8px 20px;
  font-weight: 500;
  font-size: 14pt;
  text-align: center;
  border-radius: 8px;
  -webkit-box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
  box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
}
.categoria-1{
  border:2px solid #389dd3;
  color: #074C75;
  padding: 8px 20px;
  font-weight: 500;
  font-size: 14pt;
  text-align: center;
  border-radius: 8px;
  -webkit-box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
  box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
}
.categoria-color{
  background:#2d88bc;
  color: #fff;
  padding: 8px 20px;
  font-weight: 500;
  font-size: 14pt;
  text-align: center;
  border-radius: 8px;
  -webkit-box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
  box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
}
.separador{
  border-right: 2px solid #fff;
}
.separador1{
  border-right: 2px solid #389dd3;
}

/****EFECTO CATEGORIAS****/
.categoria-1:hover, .categoria-p:hover, .categoria-color:hover{
  transform: scale(1.06);
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -o-transform: scale(1.06);
    -ms-transform: scale(1.06);
    z-index: 1;
}

.categoria-1, .categoria-p, .categoria-color{
  flex: 1;
    -webkit-box-flex: 1;      
    -moz-box-flex: 1;                
    -webkit-flex: 1;          
    -ms-flex: 1;              
  margin:0 5px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    box-shadow: rgba(0,0,0,0.5) 0px 6px 5px 0px;
   }


/********************/
.categoria-p1{
  background: #470120;
  color: #fff;
  padding: 8px 20px;
  font-weight: 500;
  font-size: 14pt;
  text-align: center;
  border-radius: 8px;
  -webkit-box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
  box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
}
.categoria-11{
  border:2px solid #60233f;
  color: #60233f;
  padding: 8px 20px;
  font-weight: 500;
  font-size: 14pt;
  text-align: center;
  border-radius: 8px;
  -webkit-box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
  box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
}
.categoria-color1{
  background:#60233f;
  color: #fff;
  padding: 8px 20px;
  font-weight: 500;
  font-size: 14pt;
  text-align: center;
  border-radius: 8px;
  -webkit-box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
  box-shadow: -2px 2px 15px 0px rgba(0,0,0,0.75);
}


/****EFECTO CATEGORIAS****/
.categoria-11:hover, .categoria-p1:hover, .categoria-color1:hover{
  transform: scale(1.06);
    -webkit-transform: scale(1.06);
    -moz-transform: scale(1.06);
    -o-transform: scale(1.06);
    -ms-transform: scale(1.06);
    z-index: 1;
}

.categoria-11, .categoria-p1, .categoria-color1{
  flex: 1;
    -webkit-box-flex: 1;      
    -moz-box-flex: 1;                
    -webkit-flex: 1;          
    -ms-flex: 1;              
  margin:0 5px;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    -o-transition: 0.5s all;
    box-shadow: rgba(0,0,0,0.5) 0px 6px 5px 0px;
   }


.boton-reg1{
  background: #09a00c;
  color: #fff;
  padding: 15px 15px;
  margin-bottom: 3%;
  font-weight: 400;
  font-size: 13pt;
}

.boton-reg1:hover{
  background: #fff;
  color: #09a00c;
  border:2px solid #09a00c;
}

.boton-reg2{
  background: #1d4860;
  color: #fff;
  padding: 15px 15px;
  margin-bottom: 3%;
  font-weight: 400;
  font-size: 13pt;
}

.boton-reg2:hover{
  background: #fff;
  color: #1d4860;
  border:2px solid #1d4860;
}

@media only screen and (max-width: 600px) {
  .responsive-cate{
    display: none;
  }
}