@import url("https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz");
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('../css/menu.css');
@import url('../css/footer.css');


* {
    top: 0;
    margin: 0;
    box-sizing: border-box;
}

img{
    display: block;
    max-width: 100%;
}


body {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
    background-color: #000;
    /*background: #000 url(../img/banner/mathew-macquarrie-149083-unsplash.jpg) no-repeat 0 0;*/

    
}

h1 {
    border: 0px solid red;
/*    position: absolute;*/
    top: 0;
    left: 0;
	
    }

a:visited {
	color: #bbb;
}

a:active{
	color:#bbb;
}

a:link{
	color: #bbb;
}

/*centrar el menu y logo*/
.logo, .icon-menu {
    margin: 5px;
    border: 0px solid yellow;
    /*margin: 0 5px 0 5px;*/
    color: #bbb;
}

/*********** STYLE HEADER *********/

/* el contenedor del header es una rayita azul arriba del todo por que el h1 (logo) y el menu-bar estan flotando a la izq entonces para solucionarlo se ha de limpiar los floats */

.header {
    height: 60px;
    /*width: 100%;
    background: #fff;
    color: #fff;*/
    /* el header se quede pegado */
    position: relative;
    /* y que empiece desde la esquina izquierda*/
/*
    top: 0;
    left: 0;
*/
    /* este siempre delante de los demas elementos y sea el header que tape a los demas elementos*/
    z-index: 100;
}

.header .contenedor{
    border: 0px solid green;
    display: flex;
/*    para que el menu icon se vaya al extremo derecho*/
    justify-content: space-between;
}


.icon-menu{
	border: 0px solid yellow;
    display: block;
    width: 40px;
    height: 40px;
    font-size: 30px;
    background: #FBA919;
    color: #fff;
    text-align: center;
    line-height: 45px;
    border-radius: 5px;
    /*en mozilla el menu no se coloca al extremo derecho para empujarlo a esa posicion se aplica esto*/
    margin-left: auto;
    /*la manito*/
    cursor: pointer;
}

.nav {
	border: 0px solid yellow;
    position: absolute;
    top: 60px;
    /*left: 0;*/
    /*para ocultar el menu vertical*/
    left: -100%;
    width: 100%;
	/*el desplegable se abra en transicion*/
	transition: all 0.4s;
}

.menu {
    border: 0px solid orange;
        width: 110%;
/*
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(51,51,51,0.9);
    transition: all 0.5s;
    transform: translateX(-100%);
    z-index: 1000;
*/
    list-style: none;
    padding: 0;
    margin: 0;
    
}

.menu__link{
	display: block;
	padding: 10px;
	background: rgba(51,51,51,0.3);
	text-decoration: none;
	color: #fff;
}

.menu__link:hover {
	background: rgba(51,51,51,0.3);
	color: #fba919;
}


.muestrate {
    left: 0;
}

.menu .select {
	background: rgba(51,51,51,0.3);
	color: #FBA919;
}


.contenedor{
    border: 0px solid red;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

.leftsidebar{
	
    border: 0px solid red;
    width: 100%;
    display: flex;
    justify-content: center;
    
}

#photoArea {
    border: 0px solid green;
    /* min-height: 187px; * min-height is not understood by IE 6 and less, so this is defined differently in ie.css, which is linked on the homepage with an IE-proprietary conditional statement */
/*    width: 20%;*/
    width: 290px;  /* movil*/
    height: 410px;	
    background: #000000 url(../../main/homepagev2/images/homePhotos/092507/homePhoto1.jpg) no-repeat 0 0;
    
    background-size: auto;
    background-position: -120px;

    animation: slider 0s infinite alternate;
    
}

.photoArea{

	border: 0px solid red;
	/* en mobile no se ve*/
	/*display: none;*/
	/* en mobile si se ve*/
	display: block;
	margin-left: auto;
	margin-right: auto;

}

@keyframes slider{
    from {
/*        background-size: 120px;*/
        background-position: left center;
    }
    
    to {
/*        background-size: 150px;*/
        background-position: right center;
    }
}

.gallery-container{
    border: 0px solid green;
    width: 100%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;

    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;

/*    max-width:1000px;*/
/*    margin-left:175px;*/
/*    margin-right:auto;*/
    margin: auto;
}


.gallery-item{
    box-sizing:border-box;
    /* 50% - 2 imagenes*/
/*    width:-webkit-calc(50% - 2em);*/ 
    width: 100%;
    overflow:hidden;
    border:2px solid rgba(255,255,255,0.7);
    position:relative;
    cursor:pointer;
    margin:1em;

}

.gallery-item h4{
    /*para posicionar los titulos y ponerlos en el CENTRO de las imagenes para eso el ancestor ofertas__columna tiene que estar en posicionamiento relative*/
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #fff;
    font-size: 25px;
            
}

footer .social{
    width: 100%;
}

footer .copy{
    width: 100%;
}

@media (min-width: 480px){
    .leftsidebar{
        width: 20%;
    }
    
        #photoAreaO{
        animation: slider 0s; 
            
    }
    
        .gallery-container{
        width: 80%;
    }

    .gallery-item{
        width:-webkit-calc((80% - 0em)/2);
        width:calc((80% - 0em)/2);
    }

}

@media (min-width: 768px){

        .leftsidebar{
        width: 20%;
    }
    
    #photoAreaO{
        border: 0px solid red;
        animation: slider 0s; 
        
    }
    
    .gallery-container{
        width: 80%;
    }
    
    .gallery-item{
        border: 0px solid green;
        width:-webkit-calc((80% - 0em)/3);
        width:calc((80% - 0em)/3);
    }
}

@media (min-width:1024px){
	
    xheader .contenedor {
        border: 0px solid yellow;
		position: absolute;
    }
       
    xheader .contenedor,.gallery-container{
        margin: auto;
           width: 80%;
    }
	
		.header .contenedor{
        width: 1000px;
		
		    }
    
	.nav {
		position: static;
		width: auto;
	}
	
    /* recuerden que el menu de botones tiene position absolute , lo hemos sacado del flujo lo hemos colocado debajo del header y tiene apariencia de barra vertical*/
    .menu {
		/* hacemos que el menu ya no esta posicionado absolutamente, se ve algo del lado izquierdo por que lo habiamos traslado*/
        /*position: static; */
        /*width: auto;
        height: auto;        */
        /* tenemos que transformarlo para que vuelva a su posicion original*/
        /*transform: translateX(0%);*/
		/*para que flote a la derecha*/
        /*float: right; */
        display: flex;
        /*background: #000;*/
        
    }
	
	
		 .icon-menu{
        display: none;
    }
	
	#photoAreaO {
		position: static;
    border: 0px solid green;
    /* min-height: 187px; * min-height is not understood by IE 6 and less, so this is defined differently in ie.css, which is linked on the homepage with an IE-proprietary conditional statement */
/*    width: 20%;*/
    width: 290px;  /* movil*/
    height: 410px;	
    background: #000000 url(../../main/homepagev2/images/homePhotos/092507/homePhoto1.jpg) no-repeat 0 0;
    
    background-size: auto;
    background-position: -120px;

    animation: slider 0s infinite alternate;
    
}

	

}


@media (min-width: 1266px){
        
    .select {
/*    color: #FBA919 ;*/
/*        background: #FBA919;*/
  }
    
    header .contenedor,.gallery-container{
/*        width: 1000px;*/
        margin: auto;
    }
    .gallery-item{
        width:-webkit-calc((80% - 0em)/4);
        width:calc((80% - 0em)/4);
    }
    header .contenedor{
        height: 50px;
    }
}

/*
@media screen and (min-width: 1600px){
    #photoAreaO{
        width: 20%;
    }
    header .contenedor,.gallery-container{
        width: 1500px;
        margin: auto;
    }
    .gallery-item{
        width:-webkit-calc((80% - 0em)/5);
        width:calc((80% - 0em)/5);
    }
}
*/


.gallery-item img{
    width:100%;
    -webkit-transform:scale(1.4);
    -ms-transform:scale(1.4);    
    display:block;
    -webkit-transition:all 0.4s;
    transition:all 0.4s;
}

.gallery-item:hover{
/*    border-color:yellow*/
}

.gallery-item:hover img{
    -webkit-transform:scale(1.3);
    -ms-transform:scale(1.3);
    /* el rotate genera un efecto raro se lo quitamos*/
/*    transform:scale(1.3) rotate(-5deg);  */
    /* se escala no mas*/
    transform:scale(1.6);  
}

.gallery-item:hover:after{
    opacity:1;
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    /* favorito*/
    transform:scale(1);
    /* se añade top:0 para que el icon gallery este abajo y luego suba o para que venga de la esquina superior derecha*/
    top: 0; 
    /* se añade left:0 para que el icon gallery este en la derecha y vaya a la izquierda */
    left: 0;
}

gallery-item:after{
    content:"";
    position:absolute;
/*    top:0; */
    /* se modifica top:-100% para que el icon gallery que venga de la esquina superior derecha*/
    top: -100%;
    /* se modifica top:100% para que el icon gallery este abajo y luego suba */
/*    top: 100%;  */
/*    left:0;*/
    /* se modifica left:100% para que el icon gallery este en la derecha y vaya a la izquierda */
/*    left: 100%;*/
    /* se modifica left:-100% para que el icon gallery que venga de la esquina superior izquirda*/
    left: -100%;
    width:100%;
    height:100%;
    background:url(../images/gallery.png) center center/3em 3em no-repeat rgba(0,0,0,0.8);
    opacity:0;
    -webkit-transform:scale(0.1);
    -ms-transform:scale(0.1);
    /* favorito*/
    transform:scale(0.1);
    -webkit-transition:all 0.4s;
    transition:all 0.4s;
}