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

body {
  background: rgb(139, 195, 199);
  font-family: 'Droid Sans', 'Helvetica', Arial, sans-serif;
  color: rgb(52, 73, 94);
  text-align: center;
}

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

.caja {

  float: left;
  margin-right: 2%; 
  padding: 1em 0;
  width: 100%;
}

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

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

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

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


.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: black;
  border: 0.35em;
  border-radius: 15px;
  width: 95%;
  margin-bottom: .5em;
  padding: 0.1em;
  color: white;
  font-size: .8em;
}

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

/* BOTONES */

/* MAPA */

#mapa { 
  background: rgb(118, 218, 246);
  position: absolute;
  top: 21.5em;
  left: 0;
  right: 0;
  bottom: 0; 
}

/* MAPA */

/* APPS */

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

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

.apps-link:hover {
  color: rgb(241, 196, 15);
  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: rgb(231, 76, 60); }
  
  .header-h1 {
    /* text-shadow: 3px 3px 3px rgba(231, 76, 60,1.0); */
    font-size: 2.3em;
  }

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

  
  

  #mapa {top:4em;}

}

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

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

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

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

  

  .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: 4em;}
  
}  

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

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

  a { color: rgb(230, 126, 34); }
  
  .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; }
  
  

  #mapa {top: 4em;}

}