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


* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
.header {
  grid-area:  header;
  background-color: #f1f1f1;
  padding: 30px;
  margin-top:0 auto;
  text-align: center;
  font-size: 35px;
}


img {
display: block; 
margin: 0 auto;

}
/* The grid container */
.grid-container {
  display: grid;
  margin-top:0 auto;
  grid-template-areas: 
  	   'nave nave nave nave nave nave'
    'header header header header header header' 
    'left left left left middle middle ' 
    'footer footer footer footer footer footer';
  /* grid-column-gap: 10px; - if you want gap between the columns */
} 


.middle,
.right {
  padding: 5px;
  height: 580px;
  
  /* Should be removed. Only for demonstration */
  text-align:center;
}

/* Style the left column */
.left {
  grid-area: left;
  text-align:center;
  padding: 5px;
  height: 580px; /* Should be removed. Only for demonstration */
  text-align:center;
  width:100%
  
  
  
}

/* Style the middle column */
.middle {
  grid-area: middle;
  width:90%;
}



/* Style the footer */
.footer {
  grid-area: footer;
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
	   'nave nave nave nave nave nave'
      'header header header header header header' 
      'left left left left left left' 
      'middle middle middle middle middle middle' 
      'right right right right right right' 
      'footer footer footer footer footer footer';
  }
}



p { text-align:justify;
font-family:Verdana, Geneva, sans-serif;
border-color:#0FC;
font-style:italic}
  		
div#contenido {
	border: solid 1px #ccc;
	position: absolute;
	overflow: hidden;
	left: 28px;
	top: 176px;
	width: 580px;
	height: 350px;
	padding: 0 20px;
	margin: 30px;
	border: 20px solid #666;
	text-align:center
	
			
}
 
div#caja, div#video, div#acercade, div#videoyou, div#cancion, div#contacto{
  height: 100%;
  width: 100%;
  text-align:center;
  
  
}

.letra
{
    font-family: Arial, verdana; color:#006;
	font-style:italic;
}

div 
{
   height: 100%;
   width: 100%;

}

		
	  
   
.nave {
	grid-area: nave;
    display: block;
    width: 100%;
    overflow: hidden;
	 height: auto; 
	 margin:300 px;
	  width: 100%; 
	}

.nave ul {
    margin: 5px 0 20px 0;
    padding: .7em;
    float: left;
    list-style: none;
    background: #444;
    background: rgba(0,0,0,.2);
    border-radius: .5em;    
    box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset; 
}

.nave li {
    float:left;
}

.nave a {
    float:left;
    padding: .8em 1.5em;
    text-decoration: none;
    color: #555;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-width: 1px;
    border-style: solid;
    border-color: #fff #ccc #999 #eee;
    background: #c1c1c1;
    background: linear-gradient(#f5f5f5, #c1c1c1);            
 }
 
.nave a:hover, nav a:focus {
    outline: 0;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.2);
    background: #fac754;
    background: linear-gradient(#fac754, #f8ac00);
}

.nave a:active {
    box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}
 
.nave li:first-child a {
    border-left: 0;
    border-radius: 4px 0 0 4px;            
}

.nave li:last-child a {
    border-right: 0;
    border-radius: 0 4px 4px 0;            
}

 
   
   
 footer {
	   background:#666; text-align:center; 
}


	   
	 /*  header{
		   background-color:#CCC;
		   text-align:center}
*/