/*-------Generales-------*/

@import url('https://fonts.cdnfonts.com/css/lufga');

* {
	padding:0;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

 
body {
    background:#001c37; 
    display:flex; 
    flex-wrap:wrap; 
    min-height:100vh;}

header{
	max-width:100%;
	width:100%;
	z-index:1000;
	top:0;
	position:fixed;
	/*Flex*/ 
	display:flex; 
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
}

.logomenu {
	width: 100%;
	min-width:300px;
	background:#3a547a;
	margin:auto;
	top:0;
	/*Flex*/ 
	display:flex; 
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
}

/*---------Logo----------*/

img{max-width:100%;}

header img{max-width:100%; width:100%;}

header .logo{color:#fff; font-size:30px; line-height:200px; display:flex;}

header .logo img{width:100px;}	

.logomenu .logo{width:100px; align-items:center;}

 /*------Botones------*/
.menu_bar .bt-menu{
	width:100%;
	flex-grow:1;
	color:#fff;
	font-size:2.0em;
	padding:25px;
	text-align: center;
	text-decoration:none;
	display:none;
}
 
 /*------Menu--------*/

 
header nav {
	z-index:1000;
	max-width: 100%;
	width:85%;
	margin:10px auto;
	/*Flex*/ 
	display:flex; 
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
}
 
header nav ul {
	list-style:none; 
	display:flex; 
	flex:auto;	
}

header nav ul li {flex:auto;}
 
header nav ul li:hover {
    /*background:#1a95d5; */
    /*border-radius:15px;*/
    border-bottom: 3px solid #eee;
    transition:all .5s;}
 
header nav ul li a {
	color:#fff;
	display:block;
	text-decoration:none;
	padding: 15px;
	font-size:1.1rem;
	/*border-right:1px dotted rgba(255,255,255,0.5);*/
}
 
header nav ul li:hover .children {
    display:block;
}
 
header nav ul li .children {
	display: none;
	background:#3a547a;
    position: absolute;
/*	width: 100%;*/
	z-index:1000;
}
 
header nav ul li .children li {
	display:block;
	overflow: hidden;
	border-bottom: 1px solid rgba(255,255,255,.5);
}

header nav ul li .children li:hover{
    border-bottom:3px solid #eee;
}
 
header nav ul li .children li a {
	display: block;
}
 
header nav ul li .children li a span {
	float: right;
	position: relative;
	top:3px;
	margin-right:0;
	margin-left:10px;
}
 
header nav ul li .caret {
	position: relative;
	top:3px;
	margin-left:10px;
	margin-right:1px;
}

header nav .activate{
    border-bottom:3px solid #949494;
}

/*-------------iconos----------------*/
.icono {font-size:16px; line-height:16px; margin:auto;}
.icono.izquierda {float:left;margin:auto; margin-right:10px; font-size:1.25rem;}
.icono.derecha {float:right; margin-left:10px; font-size:1.25rem;}

.icono2{font-size:75px; line-height:75px; color:blue;}

.icono.arriba{text-align:center; font-size:1.5rem; display:block;}

/*-------------Contenido-------------*/

/*-------------Contenedores------------*/
.contenedor{
	font-size:16px; 
    background:#3a547a;
	color:#3c556d;
	max-width:100%;
	width:90%;
	margin:auto;
	margin-top:10px;
	/*Flex*/ 
	display:flex; 
	flex-direction:row;
	flex-wrap:wrap;/*flex-flow:row wrap;*/
	justify-content:center;
	
}
/*#3c556d*/
/* color de la N del logo #4794CD */
/*#2c3e50*/

.principal{
	background:#fff;
	width:95%;	
	padding:20px;
	/*flex*/
	flex:1 1 70%;
}

.cont-formulario{
	width:90%;
	margin:auto;
	margin-top:100px;
	padding-top:70px;	
}

.formulario{
	position:relative;
	background:#ccc;
	max-width:40%;
	width:100%;
	display:table;
	margin:auto;
	margin-bottom:50px;
}


/*------------Section--------------*/

.aviso{
	max-width:100%;
	width:80%;
	background:#fff;
	padding:20px;
	font-size:15px;
	color:#4357ad;
	margin-top:20px;
	margin-bottom:20px;
	padding-bottom:20px;
	text-align:justify-all;
}

.main{
	width:95%;
    background:white;
	padding:20px;

	/*flex*/
	flex:1 1 70%;
}

.main article{
	width:100%;	
	margin-bottom:20px;
	padding-bottom:20px;
	border-bottom:1px solid #000;
	font-size:1.5em;
	color:#4357ad;
}

.main article:nth-last-child(1){
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom:none;
}
 
.main article hr{
	margin-bottom: .5em;
	height: 2px;
	background: #3a547a;
	margin-top: .5em;
	border:3px solid #3b5998;
	border-radius:200px /8px;
}

.main .imgmain{width:25%; float:left; margin-right:20px;}
.main .imgmainder{width:42%; float:right; margin-top:3%; padding-top:5%; padding-right:10%;}

.Tenet{padding: 20px 10px; margin-top:15px;}
.porque{padding: 20px 10px; margin-top:15px;}


svg {
    width: 80%;
    height: 80%;
    fill: white;
	padding-left: 5%;
}
svg:hover {
  fill: deepskyblue;
}


img.svg-img {
    fill: #ffffff !important;
    width: 300px; 
    height: auto; /* Mantener la proporción de aspecto */
}

/*button*/
.btn{
	padding: 15px 40px;
	border: none;
	outline: none;
	color: #fff;
	cursor: pointer;
	position: relative;
	z-index: 0;
	border-radius: 12px;
	font-family: 'lufga400normal';
}

.btn::after{
	content: " ";
	z-index: -1;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000;
	left: 0;
	top: 0;
	border-radius: 10px;
}

/*glow*/
.btn::before{
	content: " ";
	background: linear-gradient(45deg,
		#ff0000, #ff7300, #fffb00, #48ff00,
		#00ffd5, #002bff, #ff00c8, #ff0000
		);
	position: absolute;
	top: -2px;
	left: -2px;
	background-size: 600%;
	z-index: -1;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	filter: blur(8px);
	animation: glowing 20s linear infinite; 
	transition: opacity .3s ease-in-out;
	border-radius: 10px;
	opacity: 0;
}

/*hover*/
.btn:hover::before{opacity: 1;}

.btn:active:after{background: transparent;}

.btn:active{color:#000;	font-weight:bold;}


/*---------------- formas y texto------------------------*/

.rectangule {
	margin:auto;
	margin-bottom:20px;
	padding:10px 1px;
	text-align:center;
	top:0;
	height:auto;
	box-shadow:3px 3px 3px 3px *#FEFEFE;
	box-sizing:border-box;
	word-wrap:break-word;
}

.cuadrado {
	margin:10%;
	padding:10px 1px;
	text-align:center;
	top:0;
	height:auto;
	box-sizing:border-box;
	word-wrap:break-word;
}

.rectcuadrado{
	max-width:100%;
	width:100%;
	margin-top:25px;
	margin-bottom:25px;
	height:auto;
	box-sizing:border-box;
	word-wrap:break-word;
	justify-content:center;
	display:table;
}


.cajaflex{
	/*Flex*/ 
	display:flex; 
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
}

.cajaizq{width:30%; flex:auto; margin:auto;}
.cajader{width:70%; height:auto; display:block; float:right; margin:auto;}
.cajacompleta{display:block; width:100%; margin:auto;}

.info{margin:1px 5px; padding:0; height:auto;}

/*color del texto*/
.txtcolorwhite{color:#ffffff;}
.txtcolorblue{color:#3b5998;}
.txtcolorblack{color:#000000;}
.txtcolorazul{color:#2581c4;}
.txtcolorgrey{color:#7f8c8d;}

/*separacion (colocaciones) de textos*/
.sinespacio {padding:.5%;}
.espaciomedio {padding:1.5%;}
.espacioamplio {padding:3%;}

/*alineacion del texto*/
.txtleft{text-align:left;}
.txtright{text-align:right;}
.txtcenter{text-align:center;}


/* tamano del texto*/
.tamanotxtgrande{font-size:2.5rem;}
.tamanotxtmediano{font-size:1.75rem;}
.tamanotxtmitad{font-size:1.2rem;}
.tamanotxtchico{font-size:1.0rem;}


/* tipografia */
.italic {font-style: italic;}
.bold {font-weight: bold;}
.oblique {font-style: oblique}

/* tipografia general tienen costo*/
.cursive {font-family:cursive;}
.fantasy {font-family:fantasy;}
.inherit {font-family:inherit;}
.sanserif{font-family:sans-serif;}
.serif {font-family:serif;}
.monospace {font-family:monospace;}

/* Litografia Lufga */

@font-face {
    font-family: 'Lufga400normal';
    font-style: normal;
    font-weight: 400;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaRegular.woff') format('woff');
}
@font-face {
    font-family: 'Lufga400italic';
    font-style: italic;
    font-weight: 400;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaItalic.woff') format('woff');
}
@font-face {
    font-family: 'Lufga100normal';
    font-style: normal;
    font-weight: 100;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaThin.woff') format('woff');
}
@font-face {
    font-family: 'Lufga100italic';
    font-style: italic;
    font-weight: 100;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaThinItalic.woff') format('woff');
}
@font-face {
    font-family: 'Lufga200normal';
    font-style: normal;
    font-weight: 200;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaExtraLight.woff') format('woff');
}
@font-face {
    font-family: 'Lufga200italic';
    font-style: italic;
    font-weight: 200;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaExtraLightItalic.woff') format('woff');
}
@font-face {
    font-family: 'Lufga300normal';
    font-style: normal;
    font-weight: 300;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaLight.woff') format('woff');
}
@font-face {
    font-family: 'Lufga300italic';
    font-style: italic;
    font-weight: 300;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaLightItalic.woff') format('woff');
}
@font-face {
    font-family: 'Lufga500normal';
    font-style: normal;
    font-weight: 500;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaMedium.woff') format('woff');
}
@font-face {
    font-family: 'Lufga500italic';
    font-style: italic;
    font-weight: 500;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaMediumItalic.woff') format('woff');
}
@font-face {
    font-family: 'Lufga600normal';
    font-style: normal;
    font-weight: 600;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaSemiBold.woff') format('woff');
}
@font-face {
    font-family: 'Lufga600italic';
    font-style: italic;
    font-weight: 600;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaSemiBoldItalic.woff') format('woff');
}
@font-face {
    font-family: 'Lufga700normal';
    font-style: normal;
    font-weight: 700;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaBold.woff') format('woff');
}
@font-face {
    font-family: 'Lufga700italic';
    font-style: italic;
    font-weight: 700;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaBoldItalic.woff') format('woff');
}
@font-face {
    font-family: 'Lufga800normal';
    font-style: normal;
    font-weight: 800;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaExtraBold.woff') format('woff');
}
@font-face {
    font-family: 'Lufga800italic';
    font-style: italic;
    font-weight: 800;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaExtraBoldItalic.woff') format('woff');
}
@font-face {
    font-family: 'Lufga900normal';
    font-style: normal;
    font-weight: 900;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaBlack.woff') format('woff');
}
@font-face {
    font-family: 'Lufga900italic';
    font-style: italic;
    font-weight: 900;
    src: local('Lufga'), url('https://fonts.cdnfonts.com/s/67775/LufgaBlackItalic.woff') format('woff');
}



p {
    font-family: 'Lufga-Regular', sans-serif;
}

strong {
    font-family: 'Lufga-Bold', sans-serif; /* Usará el archivo bold definido */
}




/*Colores del fondo*/

.blue{background:#3b5998;}
.azul{background:#2581c4;}
.grey{background:#7f8c8d;}
.black{background:#000;}
.orange{background:orange;}

/*Tamaños*/

.chico {width:23%;}
.mediano {width:48%;}
.trescuartos{width:80%;}
.largo {width:98%;}



/*Efectos*/
.radius {border-radius:25px;}

/* estilo para titulos"*/
 
h1{color:#3b5998; text-align:center; font-size:2rem; display:block; padding:20px 1px 50px;}


h2{color:#2581c4; text-align:center; font-size:1.75rem; margin:100 100 300 400; padding:5%;}


h3{color:#192a46; text-align:center; font-size:1.5rem; margin-top:3%;}



/*estilos para los cuadros banner*/

#cuadro1{width:80%; margin-top:10%;}
#cuadro2{width:100%; margin-top:5%;}

.banner1{
		/*Flex*/ 
	display:flex; 
	flex-direction:row;
	flex-wrap:wrap;/*flex-flow:row wrap;*/
	justify-content:center;
	}	

.bancuadro1img{
	text-indent:0;
	text-align:left;
	line-height:1.75;
	width:55%; 
	margin-top:10%;
	padding-left:3%;
	font-size:1.30rem;
	}




	/*-------------Contenedores------------*/

.fondo{font-size:.8rem; margin: 2%; max-width:100%; width:100%; background:#0d0c0c;}    
.contenedor{
    font-size:.8rem; 
    margin:2%; 
    max-width:100%; 
    width:100%;
    background:#3c556d;}

.cont-formulario{margin-top:5px;}

.formulario{max-width:100%;}

.main{max-width:100%; width:100%; flex:auto;}
.mainmitad{max-width:50%; width:50%; flex:auto;}    

.modal__boton{position:absolute; right:30px;}

.icono2{font-size:75px;}

/*---------------------contacto---------------------*/

.formulario{max-width:100%; width:90%;}
	
form{width:100%;}

h1{font-size:1.5em;}
h2{font-size:1.25em;}

.rectangule{max-width:100%; width:95%; margin:3%;}
#cuadro1{max-width:100%; width:95%;}

/*------------Responsive-----------*/

@media screen and (max-width: 1350px){

	header nav ul li a {font-size:14px;}
	.icono.izquierda{font-size:1rem;}
	.icono.derecha{font-size:1rem;}
	.icono2{font-size:50px;}
	.tamanotxtgrande{font-size:2.0rem;}
	.tamanotxtmediano{font-size:1.25rem;}
	.tamanotxtmitad{font-size:.75rem;}
	.tamanotxtchico{font-size:.60rem;}
}
/*-------*/
@media screen and (max-width: 1250px){
.container img{transform: rotate(90deg);}
}
/*-------*/
@media screen and (max-width: 1200px) {
	header nav ul li a {font-size:12px;}
	.icono.izquierda {font-size:0.8rem; margin-right:5px;}
	.icono.derecha {font-size:0.8rem; margin-left:5px;}
	footer .links a{font-size:0.8rem;}
	}
/*-------*/
@media screen and (max-width: 900px) {
/*-----------Generales-------------*/
	body {padding-top:80px;}
	header{top:0; z-index:1000;}
	header nav ul li a {font-size:16px;}
	.icono.izquierda{font-size:1.25rem;}
	.icono.derecha{font-size:1.25rem;}

	.logoicon{max-width:100%; width:100%; display:inline-block; border-bottom:1px solid rgba(255,255,255,.3);}

	.logo{width:100px; margin-left:15px; margin-top:15px; float:left;}

	.menu_bar{display:block; width:100%;}

	.menu_bar .bt-menu{
		display:block; 
		width:100px; 
		margin-right:10px; 
		float:right;
		flex-grow:1;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
	}

	header .logo img{width:70px;}	

	.logomenu {height:70px;}
	
	@keyframes glowing{
		0% {background-position: 0 0;}
		50% {background-position: 400% 0;}
		100% {background-position: 0 0;}
	}

 /*---------------------Menu----------*/
 
	header nav {
		width: 35%;
		left:-100%;
		height: calc(100% - 450px);
		position:fixed;
		top:71px;
		margin: 0;
		flex:none;
		display:block;
		overflow:scroll;
		border-bottom:1px solid rgba(255,255,255,0.3);
	}

	header nav ul {display:block; background:#2c3e50;}
	header nav ul li {display:block; border-bottom:1px solid rgba(255,255,255,.3);}
	header nav ul li a{display:block;}
	header nav ul li:hover .children {display:none;}
	header nav ul li .children {width: 100%; position:relative;}
	header nav ul li .children li a {margin-left:20px;}
	header nav ul li .caret {float:right;}

	/*-------------Contenedores------------*/

.fondo{font-size:.8rem; margin: 2%; max-width:100%; width:100%;}    
.contenedor{
    font-size:.8rem; 
    margin:2%; 
    max-width:100%; 
    width:100%;
    }
	
	
.cont-formulario{margin-top:5px;}

.formulario{max-width:100%;}

.main{max-width:100%; width:100%; /*flex:1 1 100%;*/ flex:auto;}
.mainmitad{max-width:50%; width:50%; /*flex:1 1 100%;*/ flex:auto;}    

.modal__boton{position:absolute; right:30px;}

.icono2{font-size:75px;}
    

/*----------------------footer----------------------*/	

footer{max-width:100%; width:100%;}
footer .links {width:85%;}
footer .social {width:3%; float:right;}
footer .social a {margin:0;}
/*---------------------contacto---------------------*/

.formulario{max-width:100%; width:90%;}
	
form{width:100%;}

h1{font-size:1.5em;}
h2{font-size:1.25em;}

.rectangule{max-width:100%; width:95%; margin:3%;}
#cuadro1{max-width:100%; width:95%;}
}
/*-------*/

/*-------------------responsive---------------------*/
@media screen and (max-width: 600px) {
	footer{display:block;}
	footer .links{width:100%;}
	footer .social{width:20%; float:none; margin-left:40%;}
}