html {
  background: url("imagenes/todos.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
*{
  color:#fff;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
}
#logo
{
	
	margin: 20px 0 0 0;
	float: right;
	
}


.menu {
  position: fixed;
  height: 100%;
  width: 65px;
  background: rgba(0,84,122,0.3);
  transition:width 1s;
  overflow: hidden;
  font-family: 'Michroma', sans-serif;
  z-index: 99;
  text-decoration:none;
  color:#FFF;
  font-weight:bold;
}

.menu:hover {
  color:#FFF;
  width: 220px;
}

.menuItem span {
  position: absolute;
  left:50px;
  top:20px;
  transition:color 1s;
  color:#fff;
  font-weight:bold;
  
}
.menuItem span a{
  color:rgba(255,255,255,0);
  text-decoration:none;
}
.menu:hover .menuItem  span a
{
 color:#039;
 font-weight:bold;
 text-decoration:none;
}
.menu .menuItem:hover  span a
{
 color:#fff;
 font-weight:bold;
 text-decoration:none;
}

.menuItem {
  position: relative;
  color:#039;
  padding: 20px;
  transition:border .5s, background .2s;
    
}

.menuItem:hover  {
  background: #34495e;
  color:#FFF;
  cursor: pointer;
}

.uno {
  border-left:5px solid #16a085;
}

.uno:hover{
  border-left:20px solid #16a085;
}

.dos {
 border-left:5px solid #2980b9;
}

.dos:hover {
 border-left:20px solid #2980b9;
}

.tres {
  border-left:5px solid #8e44ad;
}

.tres:hover {
  border-left:20px solid #8e44ad;
}

.cuatro {
  border-left:5px solid #e67e22;
}

.cuatro:hover {
  border-left:20px solid #e67e22;
}

.cinco {
 border-left:5px solid #e74c3c;
}

.cinco:hover {
 border-left:20px solid #e74c3c;
}

.seis {
 border-left:5px solid #900;
}

.seis:hover {
 border-left:20px solid #900;
}

.siete {
 border-left:5px solid #790e11;
}
.siete:hover {
 border-left:20px solid #790e11;
}

@media only screen and (max-width : 480px)
{
  .menu 
  {
   width: 220px;
  }
  
   .menuItem span a
   {
  		color:#039;
		font-weight:bold;
  		text-decoration:none;
	}
	.menu .menuItem:hover  span a
{
 color:#fff;
 font-weight:bold;
 text-decoration:none;
}

}


@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
	.menu { width:220px;}
	.menu: hover {width:220px;}
	.menuItem span {color:#FFF; color:#039;font-weight:bold;}
	.menu .menuItem:hover  span a
{
 color:#fff;
 font-weight:bold;
 text-decoration:none;
}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1)
{
	.menu 
  { 
  		width: 220px;
  }
 	.menuItem span a{
  		color:#039;
		font-weight:bold;
  		text-decoration:none;
	}
	.menu .menuItem:hover  span a
{
 color:#fff;
 font-weight:bold;
 text-decoration:none;
}
	
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1)
{
	.menu 
  { 
  		width: 220px;
  }
 	.menuItem span a{
  		color:#039;
		font-weight:bold;
  		text-decoration:none;
 	}
	.menu .menuItem:hover  span a
{
 color:#fff;
 font-weight:bold;
 text-decoration:none;
}
	

}

@media only screen  and (min-device-width : 320px) and (max-device-width : 480px)  and (orientation : landscape)
{
		.menu 
  { 
  		width: 220px;
  }
 	.menuItem span a{
  		color:#039;
		font-weight:bold;
  		text-decoration:none;
	}
	.menu .menuItem:hover  span a
{
 color:#fff;
 font-weight:bold;
 text-decoration:none;
}

	
}

@media only screen  and (min-device-width : 320px) and (max-device-width : 480px)  and (orientation : portrait)
{
		.menu 
  { 
  		width: 220px;
  }
 	.menuItem span a{
  		color:#039;
		font-weight:bold;
  		text-decoration:none;
	}
	.menu .menuItem:hover  span a
{
 color:#fff;
 font-weight:bold;
 text-decoration:none;
}

	
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape)
{
	.menu 
  { 
  		width: 220px;
  }
 	.menuItem span a{
  		color:#039;
		font-weight:bold;
  		text-decoration:none;
	}
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait)
{
	.menu 
  { 
  		width: 220px;
  }
 	.menuItem span a{
  		color:#039;
		font-weight:bold;
  		text-decoration:none;
	}
	.menu .menuItem:hover  span a
{
 color:#fff;
 font-weight:bold;
 text-decoration:none;
}
}