/*--- MEDIA SCREENS ---*/

/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
/* Portrait tablet to landscape and desktop */
/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/

@media (max-width: 1100px) {

	.wrap{
		width: auto;
	}

	.logo_top{
		margin-left: 10px;
		width: 240px;
	}

	#banners .banner{
		float: left;
		width: 49.8vw;
		height: 37vw;
		margin-right: 0.2vw;
    	margin-bottom: 0.2vw;
	}

	#banners .banner.banner_100.html{
		width: 100%;
		height: auto;
	}

	#banners .banner:nth-child(even){
		width: 50vw;
		margin-right: 0;
	}

	#banners .banner .txt_banner{
		padding:0 6%;
	}

	#banners .banner_descuento h2{
		font-size: 80px;
		margin:6% 0 0 0;
	}

	#banners .banner_descuento h2 span{
		font-size: 50px;
		margin-left: 8px;
	}

	#banners .banner_descuento p{
		font-size: 18px;
	}

	#banners .banner_info h2{
		font-size: 42px;
		margin:6% 0 0 0;
		line-height: 0.8em;
	}

	#banners .banner_info p{
		font-size: 15px;
		margin:12px 0 0 0;
	}

	#banners .banner_texto h2{
		font-size: 20px;
		margin:8% 0 0 0;
	}

	#banners .banner_texto p{
		font-size: 14px;
		margin:8px 0 0 0;
	}

	#banners .banner_producto h2{
		font-size: 24px;
	}

	#banners .banner_producto span{
		font-size: 32px;
	}

	.img_producto{
		max-width:80%;
	}
	

	#banners .banner_50 .txt_banner, #banners .banner_25 .txt_banner{
		top: 25%;
	}

	#banners .banner_50 h2, #banners .banner_25 h2{
		font-size: 2.2em;
		margin:0;
		padding:0;
		line-height: 1.2em;
	}

	#banners .banner_50 p, #banners .banner_25 p{
		font-size: 1.3em;
		margin:10px 0 0 0;
	}

	#contenido{
		width: auto;
		margin: 0 10px 40px 10px;
	}

	#producto_imagenes_main{
		width: 95%;
		margin-left: 0;
	}

	#producto_imagenes_main img{
		max-width: 100%;
	}

	#producto_imagenes ul{
		width: auto;
		margin-bottom: 10px;
	}

	#producto_imagenes ul li{
		display: inline-block;
	}

	#productos_carousel{
		width: auto;
		letter-spacing: -0.31em;
		font-size: 0.9em;
	}

	#productos_carousel li{
		width: 25%;
		letter-spacing: normal;
		margin: 10px 0;
	}

	#productos_carousel h3{
		width: 90%;
	}

	#settings{
		float: left;
		margin-top: 20px;
	}

	#carrito{
		top: 40px;
		left: -190px;
	}

	#settings li{
		margin-right: 20px;
	}

	#buscador_menu form{
		width: 280px;
		margin-left: 10px;
		margin-bottom: 10px;
	}

	#buscador_menu form input[type="text"]{
		width: 200px;
	}

	#buscador_menu ul{
		font-size: 0.8em;
	}

	#buscador_menu ul .submenu{
		width: auto;
		font-size: 1.3em;
		margin-top:-2px;
	}

	#buscador_menu ul .submenu > div{
		width: 100%;
		margin: 0;
	}

	#buscador_menu ul .submenu > div h2{
		margin: 20px 0;
	}

	#buscador_menu ul .submenu > div ul{
		width: auto;
	}

	#buscador_menu ul .submenu > div ul li{
		display: inline-block;
		margin-right: 20px;
		white-space: nowrap;
		font-size: 1.3em;
	}

	#buscador_menu ul .submenu > div .ultimos_proyectos li{
		white-space: normal;
		width: 170px;
	}

	#buscador_menu #menu > li:hover > a:after{
		bottom: -13px;
	}

	#buscador_menu .submenu > div.submenu_footer{
		border-top: none;
		width: auto;
	}

	#buscador_menu .ultimos_proyectos{
		border-right: none;
		padding-right: 0;
		width: auto;
		float: none;
	}

	#buscador_menu .submenu_banner{
		float: none;
		margin: 20px 0;
		text-align: left;
	}

	#info_compra{
		padding: 0 10px;
	}

	#info_compra ul{
		font-size: 0.9em;
	}

	#info_compra ul li{
		margin-right: 28px;
	}


	#servicios ul{
		width: auto;
		margin-left: 10px;
		margin-right: 10px;
		text-align: center;
	}


	#slider .slick-prev{
		left: 0;
		top: 30%;
	}

	#slider .slick-next{
		right: 1px;
		top: 30%;
	}

	#slider li.activePage div{
		display: block;
		width: auto;
		margin: 0 auto;
	}

	#servicios ul li{
		text-align: left;
	}

	#accesos h2{
		padding-left: 0;
	}

	#accesos ul{
		width: 100%;
		text-align: center;
	}

	#accesos ul li:first-child{
		margin-left: 10px;
	}

	#accesos ul li{
		display: inline-block;
		float: none;
		width: 30%;
		margin: 0 10px;
	}

	#listado_proyectos li {
    width: 31%;
    margin: 0 2% 40px 0;
	}

	#footer{
		text-align: center;
		width: 100%;
	}

	#footer div.lista_footer{
		width: 18%;
		display: inline-block;
		float: none;
		text-align: left;
		vertical-align: top;
	}
}


/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
/* Landscape phone to portrait tablet */
/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/

@media (max-width: 767px) {

	#menu > li{
		width: 33% !important;
	}

	.logo_top{
		width: 100%;
		text-align: center;
		margin: 20px 0;
	}

	#header > .wrap{
		margin: 0 10px;
	}

	#buscador_menu ul .submenu{
		width: 100%;
		padding: 0;
		margin-top:-4px;
	}

	#buscador_menu ul .submenu #categorias_destacadas{
		width: 100%;
		margin: 0;
	}

	#settings{
		width: 100%;
		font-size: 0.9em;
		margin-top: 0;
	}

	#settings li{
		margin-right: 25px;
	}

	#settings li.carrito{
		background-size: 24px !important;
		padding-left: 30px;
	}

	#buscador_menu{
		background-color: #cf4647;
		background-image: none;
	}

	#buscador_menu ul{
		display: table;
		width: 100%;
		position: relative;
	}

	#buscador_menu ul li{
		display: table-cell;
		text-align: center;
	}

	#buscador_menu ul li a{
		padding: 20px 0;
	}

	#buscador_menu ul li.tus_proyectos{
		background-color: #888;
	}

	#buscador_menu form{
		width: 92%;
		margin-left: 4%;
	}

	#buscador_menu form input[type="text"]{
		width: 82%;
		font-size: 0.9em;
	}

	#info_compra{
		display: none;
	}

	#servicios ul{
		width: auto;
		text-align: left;
		letter-spacing: -0.31em;
	}

	#servicios ul li{
		width: 50%;
		letter-spacing: normal;
		margin: 10px 0;
	}

	#servicios ul li span, #servicios ul li h3, #servicios ul li p{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	#productos_listado li{
		margin:0 44px 40px 0;
	}

	#productos .tabs li{
		font-size: 0.8em;
		margin: 0 0.5em;
	}

	#accesos ul{
		width: auto;
		margin-left: 10px;
		margin-right: 10px;
		overflow: hidden;
	}

	#accesos ul li:first-child{
		margin-left: 0;
	}

	#accesos ul li{
		float: none;
		width: auto;
		margin: 20px 0;
	}

	#accesos ul li .accesos_txt{
		min-height: auto;
	}

	#accesos ul li .accesos_img{
		height: 140px;
	}

	#producto_imagenes{
		width: 100%;
	}

	#producto_detalle{
		width: 100%;
		margin-left: 0;
	}

	#productos_carousel li{
		width: 50%;
		letter-spacing: normal;
		margin: 10px 0;
	}

	#listado_proyectos li {
		width: 46.5%;
		margin: 0 1.5% 40px 1.5%;
	}

	#footer div.lista_footer{
		width: 100%;
		text-align: center;
		margin: 0;
	}

	#footer div.lista_footer li{
		display: inline-block;
		margin: 0 6px;
	}

	#buscador_menu ul .submenu #categorias_destacadas{
		width: 100%;
		margin-right: 0;
	}

	#buscador_menu ul .submenu #categorias_destacadas div{
		width: auto;
		display: block;
		margin: 10px;
		font-size: 1.2em;
	}

	#buscador_menu ul .submenu > div h2{
		text-align: left;
		margin: 10px 0;
	}

	#buscador_menu .submenu #categorias_destacadas div ul{
		display: block;
		width: 100%;
		text-align: left;
	}

	#buscador_menu .submenu #categorias_destacadas div ul li{
		display: inline-block;
		margin-right: 1em;
	}

	#buscador_menu ul .submenu #categorias_nodestacadas{
		width: 100%;
		font-size: 1.2em;
	}

	#buscador_menu ul .submenu #categorias_nodestacadas ul li h2 a{
		font-size: 1.4em;
	}

	#buscador_menu .submenu > div.submenu_footer{
		width: 100%;
	}

	#buscador_menu .ultimos_proyectos{
		width: auto;
		float: none;
		padding-right: 0;
		margin: 10px;
	}

	#buscador_menu ul .submenu > div ul{
		margin: 0;
	}

	#buscador_menu ul .submenu > div .ultimos_proyectos li{
		width: 100%;
		text-align: left;
		margin-bottom: 1em;
	}

	#buscador_menu ul .submenu .ultimos_proyectos li a{
		color: #cf4647;
		text-transform: none;
	}

	#buscador_menu ul .submenu{
		border: none;
	}

	#guest, #returning{
		width: 100%;
		display: block;
	}

	#menu_usuario, #datos_usuario, #cuenta_usuario, .bloque_usuario{
		width: auto;
	}

	.bloque_usuario table{

		font-size:.85em;
	}

	.bloque_usuario table td{

	}

	#banners .banner,
	#banners .banner:nth-child(even){
		float: none;
		width: 100vw;
		min-height: 360px;
		margin-right: 0;
    	margin-bottom: 0.2vw;
	}

	#banners .banner.banner_100.html{
		width: 100%;
		min-height: auto;
	}

	#contacto_info{
		width: 100%;
	}

	#contact-form{
		width: 100%;
	}

	#contact-form textarea, #contact-form select, #contact-form input{
		max-width: 100%;
	}
}


/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/
/* Landscape phones and down */
/*---------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------*/

@media (max-width: 576px) {

	#settings{
		width: 100%;
		letter-spacing: -0.31em;
		margin-top: 0;
		padding: 0;
	}

	#settings > li{
		width: 25%;
		display: inline-block;
		margin-right: 0;
		padding-left: 0 !important;
		margin-bottom: 0;
		letter-spacing: normal;
		text-indent: 0;
		padding: 30px 0 0 0 !important;
		vertical-align: top;
		text-align:center;
		background-position: 50% 0 !important;
	}

	#settings li.location span{
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
	}

	#settings li.login{
		margin-right: 0;
	}

	#settings li.login > a, #settings li.login > span {
		max-width: 100%;
	}

	#info_atencion_cliente {
		top: 60px;
		margin-right: 20px;
	}

	#login_hover {
		top: 60px;
		left: 20px;
	}

	#listado_proyectos li {
		width: 98%;
		margin: 0 1% 40px 1%;
	}


	#footer form input[type="submit"]{
		position:relative;
		vertical-align: bottom;
	}

	#carrito{
		top: 48px;
		left: -190px;
		width: 360px;
	}


}

@media (max-width: 480px) {

	#carro table, #carro tbody, #carro th, #carro td, #carro tr {
		display: block;
	}

	#carro table{
		width: auto;
		table-layout: fixed;
	}

	#carro tr{
		border-bottom: 1px solid #c1c1c1;
	}

	#carro .seguir_comprando{
		font-size: 13px;
		font-weight: 700;
		padding: 10px 25px;
		text-transform: uppercase;
	}

	#carrito{
		top: 48px;
		left: -190px;
		width: 360px;
	}

	#carrito ul li{
		width: 100%;
		text-indent: 0;
		margin-right: 0;
		display: block;
		padding: 20px 0;
		margin-bottom: 0;
		margin-top: 0;
	}

	#carrito ul li span.imagen_producto, #carrito ul li span.titulo_producto{
		display: block;
		width: 100%;
	}

	#carrito ul li span.titulo_producto{
		margin: 10px 0;
		font-weight: 700;
	}

	#carrito .total{
		float: none;
	}

	#carrito .boton{
		text-indent: 0;
	}

	#carrito .enlace_carro{
		text-indent: 0;
		margin: 20px 0;
	}

	#encabezado_carro{
		text-align: center;
	}

	#encabezado_carro .seguir_comprando{
		display: inline-block;
		margin-bottom: 10px;
	}

	#encabezado_carro #encabezado_compra{
		float: none;
		margin-top: 20px;
		text-align:center;
	}

	#carro #pie_carro{
		border: none;
		margin-top: 0;
	}

	#pie_carro #pagos_carro{
		width: auto;
		float: none;
		text-align: center;
	}

	#pie_carro #resumen_carro ul, #pie_carro #resumen_carro{
		float: none;
		width: auto;
		text-align:center;
	}

	#pie_carro .tramitar_pedido{
		margin-top: 10px;
		float: none;
		display: inline-block;
	}

	#resumen_carro ul li{
		text-align: center;
		font-size: 1.1em;
	}

	#resumen_carro ul li span{
		float: none;
		padding-left: 10px;
	}

	#carro thead{
		display: none;
	}

	#carro tr{
		margin-bottom: 1em;
	}

	#buscador_menu > .wrap{
		background-color: #cf4647;
		width: auto;
	}

	#buscador_menu form{
		width: auto;
		float: none;
		display: block;
		margin-bottom: 10px;
	}

	#buscador_menu form input[type="text"]{
		width: 75%;
		-webkit-appearance: none;
	}

	#buscador_menu #menu{
		padding-left: 0;
		font-size: 0.7em;
	}

	#productos{
		height: 600px;
	}

	#productos .tabs li a{
		padding: 4px 6px;
	}

	#productos div.slick-slide{
		text-align: center;
	}

	#productos div.slick-slide .producto_img{
		width: 100%;
	}

	#productos div.slick-slide .producto_img img{
		margin: 0 auto;
		position: relative;
		max-width: 100%;
	}

	#productos div.slick-slide h3{
		width: 100%;
	}

	#productos div.slick-slide .preis_comprar{
		width: 100%;
	}

	#productos .slick-prev{
		left: -20px;
	}

	#productos .slick-next{
		right: -20px;
	}

	#productos_listado li{
		width: 100%;
		margin: 20px 0;
		text-align: center;
	}

	#productos_listado li .producto_img{
		width: 100%;
		height: auto;
	}

	#productos_listado li .producto_img img{
		position: relative;
	}

	#slides{
		height: 560px;
	}

	#slides div.slick-active > div{
		padding: 0 10px;
	}

	#servicios{
		margin-left: 10px;
		margin-right: 10px;
	}

	#servicios ul{
		margin-left: 0;
		margin-right: 0;
	}

	#servicios ul li{
		width: auto;
		text-align: center;
	}

	#productos_carousel li{
		width: 100%;
		letter-spacing: normal;
		margin: 10px 0;
		text-align: center;
	}

	#productos_carousel li .producto_img{
		width: 100%;
		margin: 20px 0;
	}

	#productos_carousel li .producto_img img{
		position: relative;
	}

	#productos_carousel h3, #productos_carousel p{
		width: 100%;
	}

	#banners .banner_descuento h2{
		font-size: 100px;
		margin:7% 0 0 0;
	}

	#banners .banner_descuento h2 span{
		font-size: 70px;
		margin-left: 10px;
	}

	#banners .banner_descuento p{
		font-size: 22px;
	}

	#banners .banner_info p{
		font-size: 18px;
		margin:20px 0 0 0;
	}

	#banners .banner_texto h2{
		font-size: 24px;
		margin:8% 0 0 0;
	}

	#banners .banner_texto p{
		font-size: 16px;
		margin:12px 0 0 0;
	}

	#banners .banner_producto h2{
		font-size: 32px;
		margin: 6% 0 0 0;
	}

	#banners .banner_producto span{
		font-size: 42px;
	}

	.img_producto{
		max-width:100%;
	}

	#banners .banner_100 h2{
		font-size: 2.2em;
	}

	#banners .banner_50 h2{
		font-size: 2.2em;
	}

	#banners .banner_100 p{
		font-size: 1.2em;
		line-height: 1.2em;
	}

	#banners .banner_100.html{
		padding: 30px;
	}

	#banners .banner_100.html p{
		font-size: 1em;
		line-height: 1em;
	}

	#banners .banner_100.html p.imagen_sobre{
		float: none;
		margin: 0;
	}



	#banners .banner_50 p{
		font-size: 1.2em;
		line-height: 1.2em;
	}

	#banners .banner_100{
		width: 100%;
	}

	#banners .banner_50{
		width: 100%;
	}

	#banners .banner_25{
		width: 100%;
	}

	#buscador_menu .submenu_banner img{
		width: 100%;
	}

	#servicios ul li h3, #servicios ul li p{
		width: 100%;
	}

	#productos .slick-next, #productos .slick-prev{
		top: 80px;
	}

	#producto_imagenes_main img{
		width: 100%;
	}

}

@media (max-height: 798px) {

	.modal > div{
		height: 70%;
	}

	.modal > div dl{
		max-height: 75%;
	}

	.modal button{
		position: absolute;
		bottom: 20px;
	}

}