@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/banner.css');
@import url('../css/footer.css');


.contenedor{
    width: 99%;
    margin: auto;
}

.columna__img{
    width: 297px;
    
}

.dashboard-container{
    border: 0px solid red;
    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: 0;
}


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

}

.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;
}


/*oculta input box checked*/
#menu-bar {
    display: none;
}

header label {
    border: 0px solid red;
    float: right;
    font-size: 28px;
    margin: 6px 0;
    cursor: pointer;

}

/* caja de menu*/
.xmenu {
	border: 1px solid red;
	/*color: #FBA919 ;*/
/*        background: #FBA919;*/
	
}

.menu a {
    border: 0px solid red;
    display: block;
    color: #fff;
    height: 50px;
    text-decoration: none;
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    
}

.mmenu a:hover {
    background: rgba(255,255,255,0.3);
        color: #FBA919;
}


/*#menu-bar:checked ~ .menu {
    transform: translateX(0%);
}*/

/*
.icon-menu {
    float: right;
}
*/

/*
.icon-menu {
    display: block;
    width: 40px;
    height: 40px;
    font-size: 30px;
    background: #FBA919;
    text-align: center;
    line-height: 45px;
    border-radius: 5px;
    margin-left: auto;
    cursor: pointer;
}
*/







* {
    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;
}

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

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

.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{
    
    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;
}


.nnav {
	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 red;
/*
    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{
	border: 0px solid red;
	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;
}



.logobanner {
	display: none;
}


#photoArea {
    
    /* 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 */
    /*margin-top: 0px;*/
    width: 290px;
    min-height: 410px;	
	 background: #000000 url(../main/homepagev2/images/homePhotos/092506/homePhoto1.jpg) no-repeat 0 0;
    /*float: left;*/
	/*si pongo position relative el desplegable aparece detras de esta imagen*/
	/*position: relative;*/
    
    /*background-size: auto;*/
/*    background-position: center center;*/
    /*background-position: -120px;*/
	
    
}

.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;

}

@media all and (min-width: 480px) {

	
		.slider .contenedor .modelo{
		display: flex;
		flex-wrap: wrap;
		margin-top: -125px;
					
	}
	
		.model__img{
		width: 25%;
		position: absolute;
		top: 15%;
		right: 7%;
		
	}
	
    .nav {
	border: 0px solid green;
    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;
}
  
	
	.main .contenedor .info{
		display: flex;
		flex-wrap: wrap;
					
	}
	
	.info__columna {
		
		border: 0px solid red;
		display: inline-block;
		background: #000;
		padding: 5px;
		margin-bottom: 10px;
		/*	box-sizing: border-box;*/
		/*float: left;*/
		width: 50%;

	}	
    
            .gallery-container{
        width: 80%;
    }

    .gallery-item{
        width:-webkit-calc((80% - 0em)/2);
        width:calc((80% - 0em)/2);
    }
    
}
	
@media (min-width:768px){

	.slider .contenedor .modelo{
		display: flex;
		flex-wrap: wrap;
		margin-top: -250px;
					
	}
	
		.model__img{
		width: 25%;
		position: absolute;
		top: 15%;
		right: 7%;
		
	}
	
	.main .contenedor .info{
		display: flex;
		flex-wrap: wrap;
					
	}
	
	.info__columna {
		
		border: 0px solid red;
		display: inline-block;
		background: #000;
		padding: 5px;
		margin-bottom: 10px;
		/*	box-sizing: border-box;*/
		/*float: left;*/
		width: 33%;

	}	
    
        .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){
    
	.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;
    }
	
	.mmenu__link{
		background: none;
		/*font-size: 20px;*/
	}
	
		
	/*los botones tienen una rayita en el border botton para quitarlo*/
    .menu a {
        border: none;
    }

    .menu a:hover {
        background: none;
        color: #FBA919;
}

    
    .photoArea{
        display: block;
    }
    

	.banner {
		position: relative;
	}
	
	.logo__item {
	border: 0px solid red;
	position: absolute;
		
	/*left: -90%;*/
	/*font-family: 'Yanone Kaffeesatz', sans-serif;*/
	font-family: 'Open Sans', sans-serif;		
	color: #bbb;
	font-size: 170px;
		top: 85%;
		left: 50%;
		transform: translate(-50%, -50%)
					
}
	
    .banner .transmission{
        border: 0px solid red;
        display: flex;
        align-items: center;
    }
    .panel .contenedor{
        display: block;
    }
    

	.slider .contenedor .modelo{
		display: flex;
		flex-wrap: wrap;
		margin-top: -600px;
					
	}
	
	.main .contenedor .info{
		display: flex;
		flex-wrap: wrap;
		margin-top: -180px;
					
	}
	
	
	.model__columna1 {
		
		float: left;
		/*position: absolute;
		top: 0;*/
		/*left: 10%;*/
		margin-left: 5%;
		
	}	
	
	.model__columna2 {
		
		border: 0px dashed steelblue;
		float: left;
		/*position: inherit;*/
		/*top: 0;*/
	/*	right: 10%;*/
		margin-left: 5%;
	}
	
	.model__img{
		width: 25%;
		position: absolute;
		top: 15%;
		right: 7%;
		
	}
	
	.model__columna3 {
/*		float: left;*/
		position: absolute;
		top: 100%;
		right: 13%;
/*		text-align: center;*/
	border: 0px solid red;
			
	/*	display: inline-block;*/
	/*vertical-align: bottom;*/
	width: 20%;
		color: #fff;
		margin-top: -5%;
		margin-left: 5%;
		
	
}
	
	main .contenedor {
		position: relative;
		border: 0px solid yellow;
		margin-top: 400px;
					
	}

	.info {
		display: flex;
		flex-wrap: wrap;
		
		
	}	
	
	.info__columna {
		
		border: 0	px solid red;
		background: #000;
		padding: 15px;
		margin-bottom: 30px;
		/*	box-sizing: border-box;*/
		/*float: left;*/
		width: 33%;

	}
    
      .gallery-container{
        width: 80%;
    }
    
    .gallery-item{
        border: 0px solid green;
        width:-webkit-calc((80% - 0em)/3);
        width:calc((80% - 0em)/3);
    }  
    
	
}

@media (min-width:1280px){
    
	.contenedor{
        width: 1200px;
		
		    }
    
	.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;
    }
	
	.mmenu__link{
		background: none;
		/*font-size: 20px;*/
	}
	
		
	/*los botones tienen una rayita en el border botton para quitarlo*/
    .menu a {
        border: none;
    }

    .menu a:hover {
        background: none;
        color: #FBA919;
}

    
    .photoArea{
        display: block;
    }
    

	.banner {
		position: relative;
	}
	
	.logo__item {
	border: 0px solid red;
	position: absolute;
		
	/*left: -90%;*/
	/*font-family: 'Yanone Kaffeesatz', sans-serif;*/
	font-family: 'Open Sans', sans-serif;		
	color: #bbb;
	font-size: 200px;
		top: 75%;
		left: 50%;
		transform: translate(-50%, -50%)
					
}
	
    .banner .transmission{
        border: 0px solid red;
        display: flex;
        align-items: center;
    }
    .panel .contenedor{
        display: block;
    }
    

	.slider .contenedor .modelo{
		display: flex;
		flex-wrap: wrap;
		margin-top: -750px;
					
	}
	
	.main .contenedor .info{
		display: flex;
		flex-wrap: wrap;
		margin-top: -180px;
					
	}
	
	
	.model__columna1 {
		
		float: left;
		/*position: absolute;
		top: 0;*/
		/*left: 10%;*/
		margin-left: 5%;
		
	}	
	
	.model__columna2 {
		
		border: 0px dashed steelblue;
		float: left;
		/*position: inherit;*/
		/*top: 0;*/
	/*	right: 10%;*/
		margin-left: 5%;
	}
	
	.model__img{
		width: 25%;
		position: absolute;
		top: 15%;
		right: 7%;
		
	}
	
	.model__columna3 {
/*		float: left;*/
		position: absolute;
		top: 100%;
		right: 13%;
/*		text-align: center;*/
	border: 0px solid red;
			
	/*	display: inline-block;*/
	/*vertical-align: bottom;*/
	width: 20%;
		color: #fff;
		margin-top: -5%;
		margin-left: 5%;
		
	
}
	
	main .contenedor {
		position: relative;
		border: 0px solid yellow;
		margin-top: 400px;
					
	}

	.info {
		display: flex;
		flex-wrap: wrap;
		
		
	}	
	
	.info__columna {
		
		border: 0	px solid red;
		background: #000;
		padding: 15px;
		margin-bottom: 30px;
		/*	box-sizing: border-box;*/
		/*float: left;*/
		width: 33%;

	}
    
        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 (min-width:1366px){
	
			.contenedor{
        width: 1366px;
		
		    }
    
	.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;
    }
	
	.mmenu__link{
		background: none;
		/*font-size: 20px;*/
	}
	
		
	/*los botones tienen una rayita en el border botton para quitarlo*/
    .menu a {
        border: none;
    }

    .menu a:hover {
        background: none;
        color: #FBA919;
}

    
    .photoArea{
        display: block;
    }
    

	.banner {
		position: relative;
	}
	
	.logo__item {
	border: 0px solid red;
	position: absolute;
		
	/*left: -90%;*/
	/*font-family: 'Yanone Kaffeesatz', sans-serif;*/
	font-family: 'Open Sans', sans-serif;		
	color: #bbb;
	font-size: 200px;
		top: 70%;
		left: 50%;
		transform: translate(-50%, -50%)
					
}
	
    .banner .transmission{
        border: 0px solid red;
        display: flex;
        align-items: center;
    }
    .panel .contenedor{
        display: block;
    }
    

	.slider .contenedor .modelo{
		display: flex;
		flex-wrap: wrap;
		margin-top: -825px;
					
	}
	
	.main .contenedor .info{
		display: flex;
		flex-wrap: wrap;
		margin-top: -85px;
					
	}
	
	
	.model__columna1 {
		
		float: left;
		/*position: absolute;
		top: 0;*/
		/*left: 10%;*/
		margin-left: 15%;
		
	}	
	
	.model__columna2 {
		
		border: 0px dashed steelblue;
		float: left;
		/*position: inherit;*/
		/*top: 0;*/
	/*	right: 10%;*/
		margin-left: 5%;
	}
	
	.model__img{
		width: 25%;
		position: absolute;
		top: 15%;
		right: 7%;
		
	}
	
	.model__columna3 {
/*		float: left;*/
		position: absolute;
		top: 115%;
		right: 5%;
/*		text-align: center;*/
	border: 0px solid red;
			
	/*	display: inline-block;*/
	/*vertical-align: bottom;*/
	width: 30%;
		color: #fff;
		margin-top: -5%;
		margin-left: 5%;
		
}
	
	main .contenedor {
		position: relative;
		border: 0px solid yellow;
		margin-top: 400px;
					
	}

	.info {
		display: flex;
		flex-wrap: wrap;
		
		
	}	
	
	.info__columna {
		
		border: 0	px solid red;
		background: #000;
		padding: 15px;
		margin-bottom: 30px;
		/*	box-sizing: border-box;*/
		/*float: left;*/
		width: 33%;

	}

	    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 (min-width:1440px){
	
		.contenedor{
        width: 1400px;
		
		    }
    
	.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;
    }
	
	.mmenu__link{
		background: none;
		/*font-size: 20px;*/
	}
	
		
	/*los botones tienen una rayita en el border botton para quitarlo*/
    .menu a {
        border: none;
    }

    .menu a:hover {
        background: none;
        color: #FBA919;
}

    
    .photoArea{
        display: block;
    }
    

	.banner {
		position: relative;
	}
	
	.logo__item {
	border: 0px solid red;
	position: absolute;
		
	/*left: -90%;*/
	/*font-family: 'Yanone Kaffeesatz', sans-serif;*/
	font-family: 'Open Sans', sans-serif;		
	color: #bbb;
	font-size: 250px;
		top: 60%;
		left: 50%;
		transform: translate(-50%, -50%)
					
}
	
    .banner .transmission{
        border: 0px solid red;
        display: flex;
        align-items: center;
    }
    .panel .contenedor{
        display: block;
    }
    

	.slider .contenedor .modelo{
		display: flex;
		flex-wrap: wrap;
		margin-top: -1000px;
					
	}
	
	.main .contenedor .info{
		display: flex;
		flex-wrap: wrap;
		margin-top: -80px;
					
	}
	
	
	.model__columna1 {
		
		float: left;
		/*position: absolute;
		top: 0;*/
		/*left: 10%;*/
		margin-left: 15%;
		
	}	
	
	.model__columna2 {
		
		border: 0px dashed steelblue;
		float: left;
		/*position: inherit;*/
		/*top: 0;*/
	/*	right: 10%;*/
		margin-left: 5%;
	}
	
	.model__img{
		width: 25%;
		position: absolute;
		top: 15%;
		right: 7%;
		
	}
	
	.model__columna3 {
/*		float: left;*/
		position: absolute;
		top: 115%;
		right: 5%;
/*		text-align: center;*/
	border: 0px solid red;
			
	/*	display: inline-block;*/
	/*vertical-align: bottom;*/
	width: 30%;
		color: #fff;
		margin-top: -5%;
		margin-left: 5%;
		
}
	
	main .contenedor {
		position: relative;
		border: 0px solid yellow;
		margin-top: 400px;
					
	}

	.info {
		display: flex;
		flex-wrap: wrap;
		
		
	}	
	
	.info__columna {
		
		border: 0	px solid red;
		background: #000;
		padding: 15px;
		margin-bottom: 30px;
		/*	box-sizing: border-box;*/
		/*float: left;*/
		width: 33%;

	}

        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 all and (min-width: 1920px){
	
    .contenedor{
        width: 1440px;
		
		    }
    
	.nnav {
		position: static;
		width: auto;
	}

        .nav {
	border: 0px solid orange;
    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;
}
    
    /* 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;
    }
	
	.mmenu__link{
		background: none;
		/*font-size: 20px;*/
	}
	
		
	/*los botones tienen una rayita en el border botton para quitarlo*/
    .menu a {
        border: none;
    }

    .menu a:hover {
        background: none;
        color: #FBA919;
}

    
    .photoArea{
        display: block;
    }
    

	.banner {
		position: relative;
	}
	
	.logo__item {
	border: 0px solid red;
	position: absolute;
		
	/*left: -90%;*/
	/*font-family: 'Yanone Kaffeesatz', sans-serif;*/
	font-family: 'Open Sans', sans-serif;		
	color: #bbb;
	font-size: 250px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
					
}
	
    .banner .transmission{
        border: 0px solid red;
        display: flex;
        align-items: center;
    }
    .panel .contenedor{
        display: block;
    }
    

	.slider .contenedor .modelo{
		display: flex;
		flex-wrap: wrap;
		margin-top: -1095px;
					
	}
	
	.main .contenedor .info{
		display: flex;
		flex-wrap: wrap;
		margin-top: -80px;
					
	}
	
	
	.model__columna1 {
		
		float: left;
		/*position: absolute;
		top: 0;*/
		/*left: 10%;*/
		margin-left: 15%;
		
	}	
	
	.model__columna2 {
		
		border: 0px dashed steelblue;
		float: left;
		/*position: inherit;*/
		/*top: 0;*/
	/*	right: 10%;*/
		margin-left: 5%;
	}
	
	.model__img{
		width: 25%;
		position: absolute;
		top: 15%;
		right: 7%;
		
	}
	
	.model__columna3 {
/*		float: left;*/
		position: absolute;
		top: 115%;
		right: 5%;
/*		text-align: center;*/
	border: 0px solid red;
			
	/*	display: inline-block;*/
	/*vertical-align: bottom;*/
	width: 30%;
		color: #fff;
		margin-top: -5%;
		margin-left: 5%;
		
}
	
	main .contenedor {
		position: relative;
		border: 0px solid yellow;
		margin-top: 400px;
					
	}

	.info {
		display: flex;
		flex-wrap: wrap;
		
		
	}	
	
	.info__columna {
		
		border: 0	px solid red;
		background: #000;
		padding: 15px;
		margin-bottom: 30px;
		/*	box-sizing: border-box;*/
		/*float: left;*/
		width: 33%;
	}

	    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 (min-width:1920px){
	
		.contenedor{
        width: 1440px;
		
		    }
    
	.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;
    }
	
	.mmenu__link{
		background: none;
		/*font-size: 20px;*/
	}
	
		
	/*los botones tienen una rayita en el border botton para quitarlo*/
    .menu a {
        border: none;
    }

    .menu a:hover {
        background: none;
        color: #FBA919;
}

    
    .photoArea{
        display: block;
    }
    

	.banner {
		position: relative;
	}
	
	.logo__item {
	border: 0px solid red;
	position: absolute;
		
	/*left: -90%;*/
	/*font-family: 'Yanone Kaffeesatz', sans-serif;*/
	font-family: 'Open Sans', sans-serif;		
	color: #bbb;
	font-size: 250px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%)
					
}
	
    .banner .transmission{
        border: 0px solid red;
        display: flex;
        align-items: center;
    }
    .panel .contenedor{
        display: block;
    }
    

	.slider .contenedor .modelo{
		display: flex;
		flex-wrap: wrap;
		margin-top: -1195px;
					
	}
	
	.main .contenedor .info{
		display: flex;
		flex-wrap: wrap;
		margin-top: -80px;
					
	}
	
	
	.model__columna1 {
		
		float: left;
		/*position: absolute;
		top: 0;*/
		/*left: 10%;*/
		margin-left: 15%;
		
	}	
	
	.model__columna2 {
		
		border: 0px dashed steelblue;
		float: left;
		/*position: inherit;*/
		/*top: 0;*/
	/*	right: 10%;*/
		margin-left: 5%;
	}
	
	.model__img{
		width: 25%;
		position: absolute;
		top: 15%;
		right: 7%;
		
	}
	
	.model__columna3 {
/*		float: left;*/
		position: absolute;
		top: 115%;
		right: 5%;
/*		text-align: center;*/
	border: 0px solid red;
			
	/*	display: inline-block;*/
	/*vertical-align: bottom;*/
	width: 30%;
		color: #fff;
		margin-top: -5%;
		margin-left: 5%;
		
}
	
	main .contenedor {
		position: relative;
		border: 0px solid yellow;
		margin-top: 400px;
					
	}

	.info {
		display: flex;
		flex-wrap: wrap;
		
		
	}	
	
	.info__columna {
		
		border: 0	px solid red;
		background: #000;
		padding: 15px;
		margin-bottom: 30px;
		/*	box-sizing: border-box;*/
		/*float: left;*/
		width: 33%;

	}

	    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;
    }

}	

.gallery-item img{
    width:100%;
    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.3);  
}

.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;
}