@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(menu.css);

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

body {
  font-family: "Open Sans", sans-serif;
}

body {
  margin: 0;
  min-height: 100vh;
      /* The image used */
  background-image: url(torre.jpg);
  background-position: center;
  background-repeat: no-repeat;
  
    

  /* Full height 
  height: 100%; */

  /* Center and scale the image nicely */
  /*background-position: center center;
  background-repeat: no-repeat;*/
  background-size: cover;
  background-attachment: fixed;
  color: #000;

  
      /*background-color:#464646;*/
     
}

body:before {
    content: "";
    width: 100%;
    min-height: 100vh;
    position:fixed;
   
   background: rgba(70,108,231,1);
background: -moz-linear-gradient(top, rgba(70,108,231,1) 0%, rgba(29,65,226,0.31) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(70,108,231,1)), color-stop(100%, rgba(29,65,226,0.31)));
background: -webkit-linear-gradient(top, rgba(70,108,231,1) 0%, rgba(29,65,226,0.31) 100%);
background: -o-linear-gradient(top, rgba(70,108,231,1) 0%, rgba(29,65,226,0.31) 100%);
background: -ms-linear-gradient(top, rgba(70,108,231,1) 0%, rgba(29,65,226,0.31) 100%);
background: linear-gradient(to bottom, rgba(70,108,231,1) 0%, rgba(29,65,226,0.31) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#466ce7', endColorstr='#1d41e2', GradientType=0 );
     opacity: 0.9;
    z-index: -1;
}

nav {
  background: #0B0B61;
  width: 100%;
  height: 30px;
  font-size: large;
    align-content: right;
}

header {
  width: 100%;
  height: auto;
  background: #000;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

header a.active {
  background-color: #0B0B61;
  color: white;
}

.contenedor {
  width: 98%;
  margin: auto;
 
}

.grid-contenedor {
  display: grid;
  grid-template-columns: auto auto auto;
    padding: 10px;
}

.grid-contenedor > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

h1 {
  float: left;
  text-align: center;
  
}

header .contenedor { 
  display: table;
}

section {
  width: 100%;
  margin-top: 60px;
  margin-bottom: 25px;
  align-content: center;
   
}

#bienvenidos {
  text-align: center;

}


footer .contenedor{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 25px;
    
}

video{
  width: 50%;
}

.copy{
  font-size: 20px;
    
}

.sociales {
  width: 100%;
  text-align: center;
  font-size: 28px;
}

.sociales a{
  color: #333;
  text-decoration: none;
}

form {
    /* Sólo para centrar el formulario a la página */
  margin: 0 auto;
  max-width: 500px;
    
    /* Para ver el borde del formulario */
  padding: 1em;
  border: 1px solid #000;
  border-radius: 1em;
   
}

form div + div {
  margin-top: 1em;
}

label {
    /* Para asegurarse que todos los labels tienen el mismo tamaño y están alineados correctamente */
  display: inline-block;
  width: 100px;
  text-align: left;
}

input, textarea {
    /* Para asegurarse de que todos los campos de texto tienen las mismas propiedades de fuente
       Por defecto, las areas de texto tienen una fuente con monospace */
  font: 1em sans-serif;
    /* Para darle el mismo tamaño a todos los campos de texto */
  width: 300px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

    /* Para armonizar el look&feel del borde en los campos de texto */
  border: 1px solid #999;
}

input:focus, textarea:focus {
    /* Para dar un pequeño destaque en elementos activos*/
  border-color: #000;
}

textarea {
    /* Para alinear campos de texto multilínea con sus labels */
  vertical-align: top;

    /* Para dar suficiente espacio para escribir texto */
  height: 5em;

    /* Para permitir a los usuarios cambiar el tamaño de cualquier textarea verticalmente
        No funciona en todos los navegadores */
  resize: vertical;
}

.button {
    /* Para posicionar los botones a la misma posición que los campos de texto */
  padding-left: 90px; /* mismo tamaño a todos los elementos label */
}
button {
    /* Este margen extra representa aproximadamente el mismo espacio que el espacio
       entre los labels y sus campos de texto */
  margin-left: 5em;
    margin-right: -2em;
    width: 100px;
    height: 30px;
    
    border: 2px solid black;
   
}

/*@media only screen and (min-width: 400px) {
  body { 
    background-image: url('esferas.jpg'); 
  }
}*/
/* Diseño para celulares */
#columna1, #columna2, #columna3 {
	float:none;
	width:100%;
}

/* Diseño para tabletas */ 
@media screen and (min-width: 800px) {
	#columna1, #columna2 {
		float:left;
		width:50%;
	}
}

/* Diseño para PC */ 
@media screen and (min-width: 1025px) {
	#columna1, #columna2, #columna3 {
	float:left;
	width:33%;
}

    /* fin de zona común a todas las resoluciones */
@media screen and (min-width:800px) {
	body {
		font-size:100%;
		/* ampliamos los textos si mide más de 800px */
	}
}

/* fin de la zona para más de 800px de ancho de pantalla */
@media screen and (min-width:1200px) {
	body {
		font-size:120%;
		/* ampliamos más aún los textos si mide más de 1200px */
	}
}

/* fin de la zona para más de 1200px de ancho de pantalla */

@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit], h2, p {
    width: 100%;
    margin-top: 0;
  }
}