@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');

* {
    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;     /* 1936px desktop screen */
    /*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 red;
    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 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 yellow;
	display: block;
	padding: 15px;
	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 (min-width:480px){

	
		.slider .contenedor .modelo{
        border: 0px solid yellow;
		display: flex;
		flex-wrap: wrap;
		margin-top: -125px;
					
	}
	
		.model__img{
		width: 25%;
		position: absolute;
		top: 15%;
		right: 7%;
		
	}
	
	
	
	.main .contenedor .info{
        border: 0px solid yellow;
		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%;
	}	
	
}
	
@media (min-width:768px){

	.slider .contenedor .modelo{
        border: 0px solid yellow;
		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%;
	}	
}
	
@media (min-width:1024px){
    
	.contenedor{
        border: 0px solid red;
        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;
    }
	
	.menu__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{
        border: 0px solid red;
        display: block;
    }
    

	.slider .contenedor .modelo{
        border: 0px solid yellow;
		display: flex;
		flex-wrap: wrap;
		margin-top: -600px;
					
	}
	
	.main .contenedor .info{
		display: flex;
		flex-wrap: wrap;
		margin-top: -80px;
					
	}
	
	
	.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 {
        border: 1px solid red;
		position: relative;
		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%;
	}
	
}

@media (min-width:1280px){
    
	.contenedor{
        border: 0px solid red;
        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;
    }
	
	.menu__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{
        border: 1px solid red;
        display: block;
    }
    

	.slider .contenedor .modelo{
        border: 0px solid yellow;
		display: flex;
		flex-wrap: wrap;
		margin-top: -750px;
					
	}
	
	.main .contenedor .info{
		display: flex;
		flex-wrap: wrap;
		margin-top: -80px;
					
	}
	
	
	.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 {
        border: 1px solid red;
		position: relative;
		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%;
	}
	
}

@media (min-width:1366px){
	
			.contenedor{
                border: 0px solid red;
                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;
    }
	
	.menu__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{
        border: 1px solid red;
        display: block;
    }
    

	.slider .contenedor .modelo{
        border: 0px solid yellow;
		display: flex;
		flex-wrap: wrap;
		margin-top: -825px;
					
	}
	
	.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 {
        border: 0px solid red;
		position: relative;
		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%;
	}

	
	
	
}


@media (min-width:1440px){
	
		.contenedor{
            border: 0px solid red;
            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;
    }
	
	.menu__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{
        border: 1px solid red;
        display: block;
    }
    

	.slider .contenedor .modelo{
        border: 0px solid yellow;
		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 {
        border: 0px solid red;
		position: relative;
		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%;
	}

	@media (min-width:1825px){
	
		.contenedor{
            border: 0px solid red;
            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;
    }
	
	.menu__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{
        border: 0px solid red;
        display: block;
    }
    

	.slider .contenedor .modelo{
        border: 0px solid yellow;
		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 {
        border: 0px solid red;
		position: relative;
		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%;
	}

	

}

@media (min-width:1920px){
	
		.contenedor{
            border: 0px solid red;
            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;
    }
	
	.menu__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{
        border: 0px solid red;
        display: block;
    }
    

	.slider .contenedor .modelo{
        border: 0px solid yellow;
		display: flex;
		flex-wrap: wrap;
		margin-top: -1195px;
					
	}
	
	.main .contenedor .info{
		display: flex;
		flex-wrap: wrap;
		margin-top: -70px;  /* 1936 px Desktop screen */
					
	}
	
	
	.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 {
        border: 0px solid red;
		position: relative;
		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%;
	}

	

}