@charset "utf-8";
/* CSS Document */


header {
	
	
	line-height: 1%;
    color: black;
    text-align: center;
/*0margin-bottom: 1%; */
	position: fixed;
	
	margin-top: 8%;
	z-index: 2000;/* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
	color: white;
	
	
	
}
header a {color: #30bf39; text-shadow: 1px 1px 1px #1c7721;}





/* Setting body background and font style*/



/* Styling navigation */

.nav-bar {
    width: 100%;
	
	
}

.nav-container {
    overflow: hidden;
    /* margin: 1% auto; */
	
}

.nav-menu {
  display: none;
	
	
}

nav.nav-bar ul {
  list-style: none;
	
}

.nav-list {
  margin: 0 auto;
  width: 100%;
  padding: 0;
	

}

.nav-list li {
  float: left;
  width:16.66%;
	height: 126px;
	
	
	
	
}

.nav-list li a {
  display: block;
  color: #f9f9f9;
  text-shadow: 1px 1px 3px rgba(150, 150, 150, 1);
  height: 126px;
	padding-top:20px;
  font-size: 2.2em;
  text-align: center;
  text-decoration: none;
  -webkit-transition:all 0.2s linear;
   -moz-transition:all 0.2s linear;
     -o-transition:all 0.2s linear;
        transition:all 0.2s linear;
}

.nav-list li a:hover {
  -webkit-filter: brightness(1.3);
  padding-top: 80px ;
}

/* Adding background color to tiles */

#tile1 {
  background:#00ced7
}

#tile2 {
  background:#00bbc3
}

#tile3 {
  background:#08A7B7
}

#tile4 {
  background:#00959c
}

#tile5 {
  background:#00889c
}

#tile6 {
  background:#007b9c
}

#tile7 {
  background:#006e9c
}

#tile8 {
  background:#005c83
}

/* Making the tiled menu responsive */

@media screen and (min-width: 1080px) and (max-width: 1224px) {
 .nav-bar {
   /* margin-top: 3.5%; */
  }
	header{margin-top: 12% }
	
	
 .nav-list li a {
    padding: 20px 15px;
    font-size: 1.3em;
    text-align: center;
  }
}
@media screen and (min-width: 769px) and (max-width: 1079px) {
	
	header{margin-top: 16% }
	
	/* .nav-bar {
    margin-top: 3.5%;
  } */
 .nav-list li a {
    padding: 20px 15px;
    font-size: 1.3em;
    text-align: center;
  }
	
	
}

/* @media screen and (min-width: 769px) and (max-width: 1079px) {
 .nav-bar {
    margin-top: 4.7%;
  }
  .nav-list li a {
    padding: 20px 8px;
    font-size: 1.3em;
    text-align: center;
  }
} */

@media screen and (min-width: 481px) and (max-width: 768px) {
	header{margin-top: 9% }
	.nav-container {
	
    background:#00a8af;
	/*  margin: 11% auto; */
   }
	
  
  .nav-menu{
	color: #fff;
	float: left;
	display: block;
	padding: 10px 10px;
	cursor: pointer;
   }
  
   
  
  .nav-list{
    float: left; 
    width: 100%;
    height: 0;
   }
  
  .open {
    height:auto
   }

  .nav-list li {
    width:100%
   }

  .nav-list li a {
    text-align: left;
   }

   .nav-list li a:hover {
    padding-left: 36%;
    padding-top: 30px;
   }
	
/*	header{margin-top: 12% }
	.nav-bar {
  /*  margin-top: 3.5%; /*
  }
 .nav-list li a {
    padding: 20px 15px;
    font-size: 1.3em;
    text-align: center;
  } */
	
}

/* @media screen and (min-width: 481px) and (max-width: 768px) {
  .nav-container,.container {
    margin: 8% auto;
  }
  .nav-list li {
    float: left;
    width: 50%;
  }
  .nav-list li a:hover{
    padding-right: 40%;
    padding-top: 30px ;
  }
} */

@media screen and (max-width: 480px) {
	header{margin-top: 16% }
	
  .nav-container {
    background:#00a8af;
	/*  margin: 11% auto; */
   }
	
  
  .nav-menu{
	color: #fff;
	float: left;
	display: block;
	padding: 10px 10px;
	cursor: pointer;
   }
  
   
  
  .nav-list{
    float: left; 
    width: 100%;
    height: 0;
   }
  
  .open {
    height:auto
   }

  .nav-list li {
    width:100%
   }

  .nav-list li a {
    text-align: left;
   }

   .nav-list li a:hover {
    padding-left: 36%;
    padding-top: 30px;
   }
  
}