*{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

body {
    background-image: url(../imagenes/stardust%20i.png);
    background-color: #ffffff;
    margin: 0 auto;
    font-size: 16px;
    
}

@media all and (max-width: 1024px){

.logo {
    position:inherit;
    width: 100%;
    margin: auto;
    padding-bottom: 1rem;
    padding-top: 0.5rem;
    background-image: url("../imagenes/stardust%20i.png");
    border-bottom: 2px solid #748a95;
    }

.logo div.image {
    content:url(../imagenes/logomob.png);
    height: 6rem;
    padding-left: -2.25em;
    margin: auto;
}

#lupa {
    line-height: 5em;
    right: 1.25em;
    position: absolute;
}
    
#lupa div.image {
    content: url(../imagenes/searchmob.png);
    width: 1.5rem;
}

#header nav {
    right: auto;
    width: 100%;
    float: left;
    text-align: center;
    margin: auto;
    top: 8.3em;
}

			#header nav > ul {
				list-style: none;
            }
				#header nav > ul > li {
					display: inline-block;
					margin: 1em;
				}

					#header nav > ul > li a {
						color: #666;
						display: inline-block;
						text-decoration: none;
					}

						#header nav > ul > li a:hover {
							color: #73a8e3;
						}

#teamvilo {
    top: 14em;
    width: 100%;
    position: absolute;
    text-align: center;
}

.banner {
		padding: 5em 0 1em 0;
		background-attachment: fixed;
		background-image: url("../imagenes/banner.jpg");
		background-position: center top;
		background-size: cover;
		line-height: 1.75;
		text-align: center;
	}

		.banner h1.detail { 
			color: #2b3942;
			display: inline-block;
			font-size: 3.5em;
            font-weight: 400;
			line-height: 1.35em;
			margin-bottom: 0.5em;
		}

        span.name {
            font-weight:bolder;
        }

		.banner p {
			color: #e6e6e6;
			font-size: 1.25em;
            font-weight: 300;
			margin-bottom: 1.75em;
		}

.button {
		background-color: #0f2d38;
		border-radius: 4px;
		color: #ffffff !important;
		cursor: pointer;
		display: inline-block;
		font-weight: 700;
        font-size: 1.5em;
		height: 3.15em;
		line-height: 3.25em;
		padding: 0 2.2em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
}


#garagedoor {
  list-style: none;
  width: 100%;
}

#garagedoor li {
  width: 11.111%;
  height: 100px;
  float: left;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#garagedoor li:hover {
  background-position: 0 -100px !important;
}

#garagedoor li#shutter1 {
  position: relative;
  background: url(../imagenes/nav1.jpg) no-repeat; 
}

#garagedoor li#shutter1:before {
  content: "";
  position: absolute;
  display: block;   
  top: 0;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  background: rgba(238, 40, 40, 0.7);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;  
}

#garagedoor li#shutter2 {
  position: relative;
  background: url(../imagenes/nav2.jpg) no-repeat; 
}

#garagedoor li#shutter2:before {
  content: "";
  position: absolute;
  display: block;   
  top: 0;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  background: rgba(231, 147, 20, 0.7);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;  
}

#garagedoor li#shutter3 {
  position: relative;
  background: url(../imagenes/nav3.jpg) no-repeat; 
}

#garagedoor li#shutter3:before {
  content: "";
  position: absolute;
  display: block;   
  top: 0;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  background: rgba(119, 212, 0, 0.7);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;  
}

#garagedoor li#shutter4 {
  position: relative;
  background: url(../imagenes/nav4.jpg) no-repeat; 
}
    
#garagedoor li#shutter4:before {
  content: "";
  position: absolute;
  display: block;   
  top: 0;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  background: rgba(0, 213, 0, 0.7);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;  
}

#garagedoor li#shutter5 {
  position: relative;
  background: url(../imagenes/nav5.jpg) no-repeat; 
}

#garagedoor li#shutter5:before {
  content: "";
  position: absolute;
  display: block;   
  top: 0;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  background: rgba(0, 213, 0, 0.7);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;  
}

#garagedoor li#shutter6 {
  position: relative;
  background: url(../imagenes/nav6.jpg) no-repeat; 
}

#garagedoor li#shutter6:before {
  content: "";
  position: absolute;
  display: block;   
  top: 0;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  background: rgba(0, 147, 212, 0.7);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;  
}


#garagedoor li#shutter7 {
  position: relative;
  background: url(../imagenes/nav7.jpg) no-repeat; 
}
    
#garagedoor li#shutter7:before {
  content: "";
  position: absolute;
  display: block;   
  top: 0;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  background: rgba(37, 37, 214, 0.7);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;  
}

#garagedoor li#shutter8 {
  position: relative;
  background: url(../imagenes/nav8.jpg) no-repeat; 
}

#garagedoor li#shutter8:before {
  content: "";
  position: absolute;
  display: block;   
  top: 0;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  background: rgba(171, 38, 214, 0.7);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;  
}

#garagedoor li#shutter9 {
  position: relative;
  background: url(../imagenes/nav9.jpg) no-repeat; 
}

#garagedoor li#shutter9:before {
  content: "";
  position: absolute;
  display: block;   
  top: 0;  
  bottom: 0;  
  left: 0;  
  right: 0;  
  background: rgba(238, 38, 155, 0.7);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  -ms-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;  
}

#garagedoor li:after {
    content: "";
    position: absolute;
    display: block;   
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0; 
    background: #eeeeec;
    border-radius: 5px;
    z-index: -2;
}

#garagedoor a {
    height: 100px;
    display: block;
    transition: all 0.4s ease;
    opacity: 0;
    text-decoration: none;
    font-family: 'Open Sans';
    font-weight: 700;
    font-size: 1em;
    line-height: 6.5em;
    margin: auto;
    text-align: center;
    color: #244e64;
}

#garagedoor li:hover a {
  opacity: 1;
}

#garagedoor li:hover:before {
  opacity: 0;
}
    .pagina{
    width: 100%;
    float: left;
    text-align: center;
    margin: auto;
    margin-top: 2em;
}

.pagina ul{
    list-style: none;
}

.pagina ul li{
    display: inline-block;
    width: 50%;
    min-width: 350px;
    margin:auto;
    margin-left: 1rem;
    margin-right: 1rem;
}

.recomendado img{
    width: 100%;
    margin-bottom: 2rem;
}

.recomendado .bandas{
    border-top: 5px solid rgba(238, 40, 40, 0.7) ;
}

.recomendado .ciencia{
    border-top: 5px solid rgba(231, 147, 20, 0.7) ;
}

.recomendado .comercios{
    border-top: 5px solid rgba(119, 212, 0, 0.7) ;
}

.recomendado .cultura{
    border-top: 5px solid rgba(0, 213, 0, 0.7) ;
}

.recomendado .deportes{
    border-top: 5px solid rgba(0, 212, 143, 0.7);
}

.recomendado .educacion{
    border-top: 5px solid rgba(0, 148, 212, 0.7) ;
}

.recomendado .ficciones{
    border-top: 5px solid rgba(38, 38, 214, 0.7) ;
}

.recomendado .lugares{
    border-top: 5px solid rgba(172, 39, 208, 0.7) ;
}

.recomendado .sociedad{
    border-top: 5px solid rgba(238, 38, 155, 0.7) ;
}


.recomendado header{
    font-size: 1rem;
    font-family: 'open sans';
    color: #333232;
} 

.recomendado .subtitle{
    margin-bottom: .5rem;
    font-size: 0.9rem;
    font-family: 'open sans';
    font-style: italic;
    color: #333232;
}
.boton{
    display: none;
}
    
#main{
    width: 100%;
    min-width: 330px;
    align-content: center;    
    margin: auto;
}
    
#main section{
    width: 90%;
    margin: auto;
}
  
aside.medio{
    min-width: 330px;
    align-content: center
}
    
.derecha{    
}
    
#header #navprog {
    right: auto;
    width: 100%;
    float: left;
    text-align: center;
    margin: auto;
    top: 8.3em;
    min-width: 400px;
}

			#header nav > ul {
				list-style: none;
            }
				#header nav > ul > li {
					display: inline-block;
					margin: 1em;
				}

					#header navprog > ul > li a {
						color: #cccccc;
						display: inline-block;
						text-decoration: none;
					}

						#header nav > ul > li a:hover {
							color: #73a8e3;
						}
    
#logooscuro{
    width: 100%;
    margin: auto;
    float: left;
    top: 2.5em;
}
    
#bannerbanda{
    font-size: 0.8rem;
    height: 20rem;
}
    #bannerbanda header{
    top: 3rem;
    height: 32rem;
    }
    
    #pagina video{
        width: 100%;
        margin:0px;
        padding: 0px;
    }
    
    #pagina img{
    display: none;
    
    }
    
    #botonera{
    margin-top: 5.6em;
    }
    
    #botonera li{
    height: 6.2em;
    }
    
@media screen and (min-width: 0px) and (max-width: 600px) {
#bannerbanda header ul li.desaparecido1, #bannerbanda header ul li.desaparecido2{
		display: none;
	}
    
    #footer{
    text-align: center;}
    
    
    #participavilo p{
        display: block;
        margin: 1rem;
    }
    #participavilo .boton{
        display: block;
        margin-bottom: 2rem;
        margin: 1rem;
    }
    
    
    aside.medio{
        margin-left: 5%;
        margin-bottom: 2em;
    }
    
    .derecha{
        display: none;
    }
}
    
        #participavilo .boton{
        display: block;
        margin-bottom: 2rem;
        margin: 1rem;
            width: 200px;
            margin: auto;
            margin-top: 1em;
    }
    
section#compartifotos{
    width: 75%;
}
    
@media screen and (min-width: 601px) and (max-width: 895px) {
#bannerbanda header ul li.desaparecido2{
		display: none;
	}
    
    
#participavilo .boton{
    display: inline-block;
    margin-bottom: 2rem;
}

}
    
@media screen and (min-width: 601px) and (max-width: 1024px) {
    aside{
        align-content: center;
        width: 100%;
        margin: auto;
    }
    aside.derecha{
        width: 30%;
    }
    
    aside.medio{
        width: 40%;

    }
}
}