/*-------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:#FEFEFE; 
    display:flex; 
    flex-wrap:wrap; 
    min-height:100vh;}
/*#FEFEFE Blanco
#373c3c gris*/

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:#2c3e50;
	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:#000;
    /*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:#2c3e50;
    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:0px;*/
}

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:#FEFEFE;
	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%;
	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: #4357ad;
	margin-top: .5em;
	border:3px solid #3b5998;
	border-radius:200px /8px;
}

.main .imgmain{width:20%; 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: 95%;
    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 */

}

.galeria{
	background:#e6e6e6;
	width:60%;
	float:right;
	padding:1%;
	text-decoration:none;
	margin: auto;
	list-style:none;
	box-sizing:border-box;
	/*Flex*/ 
	display:flex; 
	flex-direction:row;
	flex-wrap:wrap;/*flex-flow:row wrap;*/
	justify-content:center;
}

.galeria img{
	line-height:450px;
	display:block; 
	margin:1%;
	max-width:100%;
	transition:all .2s;
	border:4px solid rgba(250,250,250,.9);
	overflow:hidden;
}

.galeria img:hover{transform:scale(1.2); transition:all .4s;}

.galeria__item{
	width:48%; 
	/*height:calc(50% - 1em);*/
	cursor:pointer;
	margin:auto;
	}

.descripcion{
	width:40%;
	float:left;
	padding:1%;
	text-decoration:none;
	margin: auto;
	list-style:none;
	background:white; color:#4357ad;
	box-sizing:border-box;
	font-size:1.5em;
	/*Flex*/ 
	display:flex; 
	flex-direction:row;
	flex-wrap:wrap;/*flex-flow:row wrap;*/
	justify-content:center;
}

 
.principal hr{
	margin-bottom: .5em;
	height: 2px;
	background: #4357ad;
	margin-top: .5em;
	border:3px solid #3b5998;
	border-radius:200px /8px;
}

.modal{
	position:fixed;
	width:100%;
	height:100vh;
	background:rgba(0,0,0,0.7);
	top:0;
	left:0;

	display:flex;
	justify-content:center;
	align-items:center;	
}

.modal__img{
	width:70%;
	max-width:600px;
}

.modal__boton{
	width:50px;
	height:50px;
	color:#fff;
	font-weight:bold;
	font-size:50px;
	font-family:monospace;
	line-height:50px;
	text-align:center;
	background:red;
	border-radius:50%;
	cursor:pointer;

	position:absolute;
	top:145px;
	right:145px;
}


.grangaleria{
	background:#e6e6e6;
	width:100%;
	float:right;
	padding:1%;
	text-decoration:none;
	margin: auto;
	list-style:none;
	box-sizing:border-box;
	/*Flex*/ 
	display:flex; 
	flex-direction:row;
	flex-wrap:wrap;/*flex-flow:row wrap;*/
	justify-content:center;
}

.grangaleria img{
	line-height:450px;
	display:block; 
	margin:1%;
	max-width:100%;
	transition:all .2s;
	border:4px solid rgba(250,250,250,.9);
	overflow:hidden;
}

.grangaleria img:hover{transform:scale(1.2); transition:all .4s;}

/*------------aside------------*/
aside {
	background:#bdbdbd;
	padding:2%;
	box-sizing:border-box;
	height:auto;
	/*FLEX*/
	flex:1 1 30%;
/*	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:space-around;*/
}

aside #widget a{text-decoration:none;}

aside #widget:hover{transform:scale(1.2); transition:all .3s; background-color:#000; color:#fff;}
aside #widget2:hover{transform:scale(1.2); transition:all .3s; background-color:#000; color:#fff;}

 /*-------------footer-----------*/


footer {
	max-width:100%;
	width: 100%; 
	background:#2c3e50;
	/*Flex*/ 
	display:flex; 
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	}

footer .social{	
	width:10%; 
	margin:auto;
	/*flex:1 1 10%;*/
	flex:auto;
	/*Flex*/ 
	display:flex; 
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	}

footer .social ul{list-style:none;}
 
footer .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;
}

footer .social ul li .icon-facebook{background:#3b5998;}
footer .social ul li .icon-twitter{background:#00abf0;}
footer .social ul li .icon-mail{background:#050505;}

footer .social ul li a:hover{padding:10px 30px 10px 30px; background:#000; border-radius: 1px 25px 25px 1px;}

footer .links {
	width:90%;
	margin:auto;
	/*flex:1 1 90%;*/
	flex:auto;
	/*Flex*/ 
	display:flex; 
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
}

footer .nivel1{max-width:90%; width:10%;}

footer .nivel2{max-width:100%; width:15%;}

footer .nivel3{max-width:100%; width:15%;}

footer .nivel4{max-width:100%; width:15%;}

footer .nivel5{max-width:100%; width:15%;}

footer .nivel6{max-width:100%; width:15%;}

footer .links a {
	text-decoration:none;
	display:block;
	padding:10px 5px 10px 1px;
	color:#fff;
	height:auto;
	text-align: center;
	font-size:.9rem;
}

footer .links b {
	text-decoration:none;
	display:block;
	padding:10px 5px 10px 1px;
	color:#fff;
	height:auto;
	text-align: center;
	font-size:1.0rem;
}


footer .links a:hover {background:#000; border-radius:15px; transition: all .5s;}

footer a span {margin-bottom:10px; font-size:1.3rem; height:auto;}

.lineapunteada {border-right:1px dotted rgba(255,255,255,0.5);}

footer #widget a{text-decoration:none; color:#fff;}

footer #widget:hover{transform:scale(1.2); transition:all .3s;}

img.svg-img {
    fill: #ffffff !important;
    width: 300px; 
    height: auto; /* Mantener la proporción de aspecto */
}


/*----------------derechos------------------------------*/

#derechos{width:100%; text-align:center; margin-top:1%; align-self:flex-end;}

/*----------------contacto------------------------------*/

form{
     max-width:550px;
     width:550px;
     margin:auto;
     /*margin: 150px 300px;*/
     background: rgba(0,0,0,0.4);
     padding: 15px 20px;
     box-sizing: border-box;
     /*margin-top: 20px;*/
     border-radius: 7px;
     text-align:center;
}

input, textarea{
     width: 100%;
     margin-bottom: 20px;
     padding: 7px;
     box-sizing: border-box;
     font-size:16px;
}

textarea{min-height: 100px; max-height: 200px; max-width: 100%;}

#boton{background:#31384a; color:#fff; padding: 20px; opacity:.7; border-radius:10px;}
#boton2{background:#949292; 
    color:#fff; 
    padding: 10px 1px; 
    opacity:.7; 
    border-radius:15px; 
    margin-top:10px;
    font-size:5}

#boton:hover{cursor:pointer; opacity:1;}
#boton:active{transform:scale(0.95);}

/*button*/
.btn{
	padding: 15px 40px;
	border: none;
	outline: none;
	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:3%;
	padding:10px 1px;
	text-align:left;
	top:0;
	height:auto;
	box-sizing:border-box;
	word-wrap:break-word;
}

.cuadrado img{
	width:25%;
	height:25%;
    fill: white;
    padding-left: 5%;	
}

.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;
    border-radius: 15px;
    padding: 15px;
    margin: 10px;
}

.cajaflexmarco{
    /*display:flex;*/
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-around;
    display: inline-block; /* Para que se ponga al lado, no debajo */
    border-radius: 15px; /* Bordes redondeados */
    padding: 15px; /* Espacio interno entre contenido y borde */
    margin: 10px; /* Espacio externo entre esta caja y otras */
    border: 2px solid #3c556d; /* Borde: grosor, estilo, color */

    text-align: center; /* Centrar texto dentro de la caja */
   /* font-family: sans-serif;*/
    overflow:hidden;

}

.cajaflexmarco img{
	width: 15%;
    height: 15%;
    fill: white;
    padding-left: 5%;
}

.cajaflexnomarco{
    /*display:flex;*/
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-around;
    display: inline-block; /* Para que se ponga al lado, no debajo */
    /*width:7%;  /*Ancho de la caja */
    /*height:150px; /* Alto de la caja */
    padding: 15px; /* Espacio interno entre contenido y borde */
    margin: 2px; /* Espacio externo entre esta caja y otras */

    /*text-align: center; /* Centrar texto dentro de la caja */
    overflow:hidden;
}

.cajaflexnomarco svg{
	width: 195%;
    height: 180%;
    fill: white;
    padding-left: 5%;
}

.cajaflexnomarco img{
	width: 15%;
    height: 15%;
    fill: white;
    padding-left: 5%;
}

.cajaflexnomarcoflechas{
    /*display:flex;*/
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-around;
    display: inline-block; /* Para que se ponga al lado, no debajo */
    /*width:7%;  /*Ancho de la caja */
    /*height:150px; /* Alto de la caja */
    padding: 15px; /* Espacio interno entre contenido y borde */
    margin: 2px; /* Espacio externo entre esta caja y otras */

    text-align: center; /* Centrar texto dentro de la caja */
    overflow:hidden;
}

.cajaflexnomarcoflechas svg{
	width: 60%;
    height: 80%;
    fill: white;
    padding-left: 5%;
}
	
.cajaflex2{
	position:relative;
	justify-content: center;
	align-items: center;
	min-height:45vh;
	/*background: #222;*/
}
.container{
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap: wrap;
	gap: 40px;
}

.container img{
	width:400px;
	height:400px;
}

.flechaizq img{
    align-items: center; /* Alinea los elementos verticalmente al centro (opcional, pero útil) */
    justify-content: flex-start; /* Asegura que los elementos se inicien en el lado izquierdo (comportamiento por defecto) */
    border: 1px solid #ccc; /* Solo para visualizar la caja */
    padding: 10px;
}

/* ancho caja flex */
.anchomini{width: 170px;}
.anchominiporc{width: 25%;}
.anchocorto{width:200px;}
.anchomediano{width:300px;}
.ancholargo{width:450px;}
.ancho550px{width:550px;}
.ancho650px{width:650px;}
.ancho750px{width:750px;}
.ancho100porc{width:100%;}
.anchoautoajustable{width:auto;}

.cajaizq{width:30%; flex:auto; float:left; margin:auto;}
.cajaizqmarco{width:30%; flex:auto; float:left; margin:auto; border:2px solid #3c556d; border-radius: 15px;}
.cajader{width:30%; flex:auto; float:right; margin:auto;}
.cajadermarco{width:30%; flex:auto; float:right; margin:auto; border:2px solid #3c556d; border-radius: 15px;}
.cajacentral{width:30%; flex:auto; float:inherit; margin:auto;}
.cajacompleta{display: block; width:100%; margin:auto;}
.cajadernomarcomini{width:10%; flex:auto; float:right; margin:auto;}

/* separaciones del top */
.separaciontop10{margin-top:10px;}
.separaciontop20{margin-top:20px;}
.separaciontop50{margin-top:50px;}
.separaciontop100{margin-top:100px;}

.circulocentro {
    width: 150px;
    height: 150px;
    /* Ancho igual al alto para un círculo perfecto */
    border-radius: 50%; /* ¡Esta es la clave para el círculo! */
    margin: 50px auto; /* Centrar el círculo en la página (opcional) */
	
}

.circulocentro img{
	width:50%;
	height: 50%;
	border-radius: 50%;
	object-fit:cover;
	overflow:hidden;
	display:flex;
	justify-content:center;
	/*margin: 20px auto;*/
	align-items: center;
}

.circulo-imagen {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  overflow: hidden; /* Recorta lo que se salga del círculo */
  display: flex; /* Para centrar la imagen dentro */
  justify-content: center;
  align-items: center;
  margin: 20px auto;
}

.circulo-imagen img {
  width: 20%; /* O ajústala según necesites */
  height: 20%;
  object-fit: cover; /* Asegura que la imagen se vea bien */
}

.info{margin:1px 5px; padding:0; height:auto;}

/* altura caja flex */
.alturamini{height:180px;}
.alturacorto{height: 200px;}
.alturamediana{height: 230px;}
.altura300{height:300px;}
.alturalargo{height: 450px;}
.altura550px{height: 550px;}
.altura650px{height: 650px;}
.altura900px{height:900px;}
.alturaautoajustable{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;}
.tamanotxtmini{font-size:0.7rem;}


/* tipografia */
.tipografiaitalic {font-style: italic;}
.tipografiabold {font-weight: bold;}
.tipografiaoblique {font-style: oblique}

/* tipografia general tienen costo*/
.tipografiacursive {font-family:cursive;}
.tipografiafantasy {font-family:fantasy;}
.tipografiainherit {font-family:inherit;}
.tipografiasanserif{font-family:sans-serif;}
.tipografiaserif {font-family:serif;}
.tipografiamonospace {font-family:monospace;}
.tipografialufga400normal {font-family:'Lufga400normal'}

/* 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*/

.fondoblue{background:#3b5998;}
.fondoazulobs{background:#2c3e50;}
.fondoazul{background:#B3E0F5;}
.fondogrey{background:#7f8c8d;}
.fondoblack{background:#000;}
.fondoorange{background:orange;}
.fondogris{background:#e2e2e2;}

/*Tamaños*/

.mini {width:3%;}
.chico {width:18%;}
.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{font-family: 'lufga400normal';color:#3c556d; text-align:center; font-size:1.75rem; margin:100 100 300 400; padding:5%;}


h3{color:grey; text-align:center; font-size:1.5rem; margin-top:3%;}


/*estilos para los cuadros banner*/

#cuadro1{width:80%; margin-top:3%;}
#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;
	}


/*------------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;
		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: 85%;
		left:-100%;
		height: calc(100% - 150px);
		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%;
    /*background:#3c556d;*/}
	
	
.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%;}
}
