@charset "utf-8";
@font-face {
  font-family:'Alegreya Sans';
  src:    
  url("fonts/AlegreyaSans/AlegreyaSans-Regular.eot") format("embedded-opentype"),
  url("fonts/AlegreyaSans/AlegreyaSans-Regular.woff") format("woff"),
  url("fonts/AlegreyaSans/AlegreyaSans-Regular.ttf") format("truetype"),
  url("fonts/AlegreyaSans/AlegreyaSans-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family:'Lobster Two';
  src:
  url("fonts/LobsterTwo/LobsterTwo-Regular.eot") format("embedded-opentype"),
  url("fonts/LobsterTwo/LobsterTwo-Regular.woff") format("woff"),
  url("fonts/LobsterTwo/LobsterTwo-Regular.ttf") format("truetype"),
  url("fonts/LobsterTwo/LobsterTwo-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;    
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
	background: rgba(189, 195, 199,1.0);
	font-family: 'Alegreya Sans', Helvetica, sans-serif;
	color: rgba(52, 73, 94,1.0);
	text-align: center;
}

.bloque {
	width: 95%;
	margin: 2% auto;
	overflow: hidden;
}

.caja {
	box-sizing: border-box;
	float: left;
	margin-right: 2%;	
	padding: 1em 0;
	width: 100%;
}

.borde {
  border: .35em double rgba(52, 73, 94,1.0);
  border-radius: 15px;
}

a {
  color: rgba(241, 196, 15,1.0);
  text-decoration: none;    
}

a:hover {
  color: rgba(26, 188, 156,1.0);
  text-decoration: underline;
}

a:active, a:visited {
  color: rgba(26, 188, 156,1.0);
}

.header, .footer {
  background: rgba(52, 73, 94,1.0);
  box-shadow: 0 0 3px 3px rgba(241, 196, 15,1.0);
  color: rgba(236, 240, 241,1.0);
  padding: 1em;
  margin-bottom: .5em;
}

.header-h1 {
  font-family: 'Lobster Two', Helvetica, sans-serif;
  text-shadow: 3px 3px 3px rgba(241, 196, 15,1.0);
  font-size: 2em;
}

.footer { margin-top: 1em; }

.caja-h2 {
  font-family: 'Lobster Two', Helvetica, sans-serif;
  font-size: 1.5em;
}

.caja-h2 span {
	display: block;
	font-size: .8em;
	font-weight: lighter;
	font-style: italic;
}

/* BOTONES */

button, input {
  background: rgba(52, 73, 94,.3);
  border: .35em outset;
  border-radius: 15px;
  width: 95%;
  margin-bottom: .5em;
  padding: .1em;
  color: rgba(52, 73, 94,1.0);
  font-size: .8em;    
}

button:active, button:visited, input:active, input:visited { border: .35em inset; }

/* BOTONES */

/* MAPA */

#mapa {
  background: rgba(0, 255, 0, 0.5);
  position: absolute;
  top: 8.5em;
  left: 0;
  right: 0;
  bottom: 0; 
}

/* MAPA */

/* APPS */

.apps {    
  padding: 1em 1em 2.5em;
  margin-bottom: 1em;
}

.apps-link {
  color: rgba(26, 188, 156,1.0);
  border: solid .1em;
  border-radius: 15px;
  padding: .5em 1.5em;
}

.apps-link:hover {
  color: rgba(241, 196, 15,1.0);
  text-decoration: none;
}

.apps-p {
  margin: 1em .5em 2.5em;
  line-height: 1.6em;
}

.apps-h3 {    
  margin: .5em 0;    
  font-family: 'Orbitron', Helvetica, sans-serif;
}

/* APPS */

@media all and (min-width:550px){

	.x2 .caja { width:49%; }

  .x2 .caja:nth-child(2n){ margin-right: 0; }

	a { color: rgba(231, 76, 60,1.0); }
  
  .header-h1 {
    text-shadow: 3px 3px 3px rgba(231, 76, 60,1.0);
    font-size: 2.3em;
  }

  .caja-h2 { font-size: 1.8em; }

  .header, .footer { box-shadow: 0 0 3px 3px rgba(231, 76, 60,1.0); }

  button { font-size: 1em; }

  #mapa {top: 10em;}

}

@media all and (min-width:670px){	

	
  a { color: rgba(26, 188, 156,1.0); }

  a:hover { color: rgba(241, 196, 15,1.0); }

  a:active, a:visited { color: rgba(241, 196, 15,1.0); }

  .header, .footer { box-shadow: 0 0 3px 3px rgba(26, 188, 156,1.0); }

  .header-h1 {
    text-shadow: 3px 3px 3px rgba(26, 188, 156,1.0);
    font-size: 2.6em;
  }

  .caja-h2 { font-size: 2.1em; }

  .apps-h3 { font-size: 1.5em; }

  #mapa {top: 11em;}
	
}  

@media all and (min-width:1024px){

	.section {
    max-width: 1024px;
    margin: auto;
  }

  a { color: rgba(230, 126, 34,1.0); }
  
  .header-h1 {
    text-shadow: 3px 3px 3px rgba(230, 126, 34,1.0);
    font-size: 3em;
  }

  .bloque {max-width: 1024px;}

  .caja-h2 { font-size: 2.5em; }

  .apps-h3 { font-size: 1.8em; }
  
  .header, .footer { box-shadow: 0 0 3px 3px rgba(230, 126, 34,1.0); }

	#mapa {top: 12em;}

}