* { margin:0;}

/*menu*/

/* Add a black background color to the top navigation */
.topnav {
    background-color:#FFFFFF;
    
	    overflow: hidden; font-family:Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, "Arial", sans-serif;

}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color:#666666;
    text-align: center;
    padding: 14px 35px;
    text-decoration: none;
    font-size: 20px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

.navbar {
    overflow: hidden;
    background-color: #333;
    
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: #848484;
    padding: 0px 0px 0px 0px;
    background-color: inherit;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #ddd;
	color: black;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}	

.text1 { font-family:Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, "Arial", sans-serif; font-size:20px; color:#1c39b4; margin:0px 0px 0px 50px}
.text2 { font-family:Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, "Arial", sans-serif; font-size:17px; color:#7d808b; margin:0px 0px 0px 65px}
.textp { font-family:Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, "Arial", sans-serif; font-size:23px; color:#7d808b; text-align:left; width:100%;
margin:10px 0px 0px 150px; padding:0px 0px 0px 0px;}
.textd { font-family:Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, "Arial", sans-serif; font-size:23px; color:#40424a; text-align:right; width:100%;
margin:20px 0px 0px 0px; padding:0px 0px 0px 0px;}
.textt { font-family:Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, "Arial", sans-serif; font-size:27px; color:#de0404; text-align:right; width:100%;
margin:10px 0px 0px 0px; padding:0px 0px 0px 0px;}


.linea{ width:230px; left:50px; position:relative;  height:1px;  
   background-color:#fd9903; }

	.img1{ width: 100%; margin:10px;}
	.img2{ width: 100%;}

#uno { width:100%; display:block; position:fixed; z-index:2; background-color:#FFFFFF; }
	
#logo {display:block; width:30%; position:relative; float:left;}
#dire {display:flex; width:70%; position:relative; float:right;}		
	
#menu { margin:0 auto; display:flex; width:90%; position:relative; flex-wrap: wrap; background-color:#FFFFFF;}

#menu-1 { width:90%; position:relative; margin:auto;}
#menu-2 { width:50%; position:relative;}	

/*fin menu*/

	/*top1*/
	
div.espacio{ 
	height:122px;
	}
	
div.top1{
	width:100%;
	height:120px;
	margin:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	}
div.top1-1{
	width:40%;
	height:120px;
	}
img.imga{
	width:400px;
	}
div.top1-2{
	width:100%;
	height:120px;
	margin:auto;
	}
p.a{
	font-size:23px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:bold;
	text-align:end;
	margin:0px 11px 0px 0px;
	}
h1.a{
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:end;
	margin:0px 10px 0px 0px;
	color:#B90205;
	}
	
	/*top2*/
	
#grad1 {
    background:#248CE3; 
    background:linear-gradient(#248CE3, rgba(9,35,83,1.00) );
	}
div.top2{
	width:100%;
	background-color:#1569AF;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	margin:auto;
	}
p.b{
	padding:15px 0px;
	font-size:19px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#FFFFFF;
	text-align:center;
	margin:auto 244px auto 290px;
	}
a.boton{
	font-size:17px;
	color:#EAEAEA;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
button{
	padding:7px 10px;
	margin:15px 40px 15px 0px;
	background-color:#D20205;
	color:#EAEAEA;
	font-size:16px;
	font-weight:500;
	border:none;
	}
	/*top3*/
div.top3{
	width:100%;
	margin:auto;
	display:flex;
	flex-direction:column;
	justify-content:center;
	}
h1.b{
	font-size:32px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:center;
	margin:10px 74px 0px 0px;
	}
p.c{
	font-size:21px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:bold;
	text-align:center;
	width:86%;
	margin:auto auto 18px;
	}
	
	/*top4*/
	
div.top4{
	width:100%;
	background-color:#DADADA;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	margin:auto;
	}

li{
	list-style-image:url(../imagenes/icono-triangulo.png);
	}

div.top4-1{
	width:330px;
	margin:10px auto auto;
	}
img.imgb{
	width:190px;
	height:50px;
	margin:auto 110px;
	}
div.top4-2{
	width:330px;
	margin:10px auto auto;
	}
div.top4-3{
	width:330px;
	margin:10px auto auto;
	}
div.top4-4{
	width:330px;
	margin:10px auto auto;
	}	
p.d{
	font-size:23px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:bold;
	text-align:center;
	}
p.da{
	font-size:23px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:bold;
	text-align:center;
	margin:1px 12px 0px 0px;
	}
nav.a{
	width:74%;
	margin:auto; 
	}
nav.b{
	width:74%;
	margin:auto; 
	}
nav.c{
	margin:auto;
	}
nav.d{
	margin:auto;
	}
a{
	font-size:25px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration:none;
	color:#626262;
	}
	
	/*galeria*/
	
div.galeria{
	width:100%;
	margin:auto; 
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	}
div.slide{
	width:100%;
	margin:10px auto;
	}
img.mySlides{
	width:100%;
	}
	/*top6(texto)*/
div.top6{
	width:100%;
	margin:auto auto 30px;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	}
div.texto{
	width:60%;
	margin:10px 0px auto auto;
	}
p.fa{
	font-size:24px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:left;
	color:#1874C2;
	font-weight:bold;
	}
p.f{
	font-size:22px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:left;
	font-weight:500;
	color:#626262;
	}
button.ver{
	padding:7px 10px;
	margin:15px 40px 15px 0px;
	background-color:#D20205;
	color:#EAEAEA;
	font-size:16px;
	font-weight:500;
	border:none;
	}
div.top6-1{
	height:100%;
	width:20%;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	margin:10px auto;
	}

p.h{
	font-size:26px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:left;
	color:#1874C2;
	font-weight:500; 
	}
p.i{
	font-size:26px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:left;
	color:#1874C2;
	font-weight:500; 
	}

a.a{
	font-size:25px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration:none;
	text-align:center;
	color:#626262;
	}
	
	/*top7*/
	
div.top7{
	width:100%;
	margin:auto;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	background-color:#DADADA;
	}
div.formula{
	width:48%;
	background-color:#DADADA;
	margin:0px 0px 0px auto;
	}
form{
	margin-left:auto;
	}
div.mapa{
	width:40%;
	height:255px;
	background-color:#DADADA;
	margin:10px auto 0px 0px;
	}
input[type=text] {
    width:90%;
	height:30px;
    padding:12px 10px;
    margin:8px 10px;
    box-sizing:border-box;
    border:2px solid white;
    border-radius:4px;
	font-size:14px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
input[type=email] {
    width:90%;
	height:30px;
    padding:12px 10px;
    margin:8px 10px;
    box-sizing:border-box;
    border:2px solid white;
    border-radius:4px;
	font-size:14px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
input[type=tel] {
    width:90%;
	height:30px;
    padding:12px 10px;
    margin:8px 10px;
    box-sizing:border-box;
    border:2px solid white;
    border-radius:4px;
	font-size:14px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
input[type=mensaje] {
    width:90%;
	height:120px;
    padding:0px 0px 90px 10px;
    margin:8px 10px;
    box-sizing:border-box;
    border:2px solid white;
    border-radius:4px;
	font-size:14px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
input[type=submit] {
	color:#FFFFFF;
    padding:5px 15px; 
    background:#B90205; 
    border:0 none;
    cursor:pointer;
	margin:0px 0px 8px 512px;
	font-size:15px;
	font-weight:600;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	float:right;
}

div.texto-a{
	width:45%;
	background-color:rgba(185,2,5,1.00);
	margin:5px 0px 0px 160px;
	border-radius:20px;
	}
h3{
	margin:0px 0px 0px 0px;
	padding-top:3px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align:center;
	color:rgba(255,255,255,1.00);
	}
	/*pie*/
#grad2 {
    background:#248CE3; 
    background:linear-gradient(#248CE3, rgba(9,35,83,1.00) );
	}
div.pie{
	width:100%;
	background-color:#1569AF;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:center;
	margin:auto;
	}
p.j{
	font-size:17px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:bold;
	color:#FFFFFF;
	text-align:center;
	margin:10px 0px 0px 0px;
	}
p.k{
	font-size:15px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#FFFFFF;
	text-align:center;
	margin:0px 0px 10px 0px;
	}
	
@media screen and (min-width: 1920px){
	
	img.imgb{margin:auto 100px auto 171px;}
	input[type=submit] {margin:0px 0px 8px 701px;}
	div.texto-a{margin:5px 0px 0px 180px;}
	
	}

@media screen and (max-width: 400px) {
	
	
#logo {width:44%;}
#dire {width:54%;}	

	div.top1{width:100%; margin:auto;}
	div.top1-1{width:150px; margin:10px 0px;}
	img.imga{width:150px;}
	div.top1-2{width:250px;  margin:10px 0px;}
	p.a{font-size:15px; margin:0px;}
	h1.a{font-size:19px; margin:0px;}
	
	div.top2{width:100%; }
	p.b{margin:auto;}
	button{font-size:12px; margin:auto auto 10px;}
	#grad1{margin:20px auto;}
	
	div.top3{ width:100%;}
	h1.b{font-size:24px; margin: 10px 0px 5px 0px;}
	p.c{font-size:17px; margin: 0px auto 10px auto;}
	
	div.top4{width:100%; flex-direction:column; margin:auto auto 10px auto;}
	div.top4-1{width:100%; }
	img.imgb{width:190px; height:61px; margin:10px 90px auto 99px;}
	div.top4-2{width:100%; }
	div.top4-3{width:100%; }
	div.top4-4{width:100%; }
	p.d{margin:auto;}
	p.da{margin:auto;}
	nav.a{width:92%; margin:auto;}
	nav.b{width:92%; margin:auto;}
	nav.c{width:92%; margin:auto;}
	nav.d{width:92%; margin:auto;}
	ul{width:86%;}
	
	div.galeria{display:none;}
	
	div.top6{width:100%; margin:auto auto 30px;}
	div.texto{width:85%; margin:10px auto auto;}
	p.fa{font-size:20px; text-align:center;}
	p.f{font-size:0px;}
	button.ver{font-size:12px; margin:0px 116px;}
	div.top6-1{width:87%;}
	p.h{text-align:center; margin:0px;}
	p.i{text-align:center;}
	img.imgusos{height:100px; width:200px; margin:10px 0px 10px 22px;}
	nav.e{width:300px;}
	nav.f{width:300px;}
	
	div.formula{width:100%; margin:10px auto;}
	form{width:94%; margin-left:auto;}
	div.top7{width:100%; margin:auto; flex-direction:column;}
	input[type=text]{width:90%; height:20px; font-size:13px;}
	input[type=email]{width:90%; height:20px; font-size:13px;}
	input[type=tel]{width:90%; height:20px; font-size:13px;}
	input[type=mensaje]{width:90%; height:60px; padding:9px 0px 90px 10px; font-size:13px;}
	input[type=submit]{margin:0px 10px 0px 20px;}
	div.texto-a{height:30px; width:130px; margin:auto;}
	h3{font-size:14px; padding:6px;}
	div.mapa{display:none;}	
	
	div.pie{width:100%; margin:5px auto;}
	p.j{font-size:16px; margin:10px 0px 0px}
	p.k{font-size:16px; margin:0px 33px 10px 33px;}
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 400px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 400px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

@media screen and (max-width:400px) {
	
.topnav a {
    padding: 14px 3px;
    font-size: 15px;
}
	
	}