/*header {
	background-color: rgba(0,0,0,0.05);
	height: 38px;
	line-height: 1%;
    color: black;
    text-align: center;
	position: fixed;
	top: 0;
	left: 20%;
	right: 20%;
}*/

/*footer {
	background-color: rgba(0,0,0,0.05);
	height: 38px;
	line-height: 1%;
    text-align: center;
	position: fixed;
	bottom: 0;
	left: 20%;
	right: 20%;
}*/

/* Setting body background and font style*/

body {
    font-family: 'Open Sans Condensed', sans-serif;
    background: white;
}

/* Styling navigation */

.nav-bar {
    width: 100%;
	position: fixed;
    z-index: 100;
}

.nav-container {
	/*****agregado por joel*****/
	position: absolute;
    z-index: 100;
    width: 100%;
	/**************************/
    overflow: hidden;
    /*margin: 2.95% 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:20%;
}

.nav-list li a {
  display: block;
  color: #f9f9f9;
  text-shadow: 1px 1px 3px rgba(150, 150, 150, 1);
  padding: 30px 30px;
  font-size: 1.5em;
  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:#00a8af
}

#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%;*/
  }
 .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) {
  .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) {
  .nav-container,.container {
    background:#4f6f8f
   }
  
  .nav-menu{
	color: #fff;
	float: left;
	display: block;
	padding: 10px 10px;
	cursor: pointer;
   }
  
   header, footer {
    display: none;
   }
  
  .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;
   }