*{
    font-family: 'Geo';
}
html, body{
	height: 100%;
	width: 100%;
	
	-webkit-user-select: none; /* Safari 3.1+ */
	-moz-user-select: none; /* Firefox 2+ */
	-ms-user-select: none; /* IE 10+ */
	user-select: none; /* Standard syntax */
	
	background: rgba(44, 44, 44, 1); /* gris de fondo */
}
/* pagina - contenido */
#pagina{
	position: relative;
	margin:0 auto;
	height: 100%;
	width: 100%;
}
#contenido_cesta{
	float: left;
	margin:0 auto;
	height: 100%;
	width: 100%;
	color: #eee;
	
	-moz-transition:all .5s ease;
	-ms-transition:all .5s ease;
	-o-transition:all .5s ease;
	transition:all .5s ease;
}
	
	#col_central{
    	float:left;
    	width:90%;
    	margin-left:5%;
    	margin-top: 80px;
    	margin-bottom: 80px;
    	clear: both;
    }
		#col_articulos{
			float: left;
			width: 70%;
		}
			.info_col_articulos{
				float: left;
				width: 100%;
				margin: 10px 0;
				font-size: 1.2em;
			}
		#fila_articulo{
			float: left;
			width: 96%;
			padding: 10px 0;
			margin-right:4%;
			margin-bottom: 10px;
			background-color: rgba(60, 60, 60, 1); /* gris de fondo */
			border: 2px solid rgba(150, 150, 150, 1);
			
			-moz-transition:all .5s ease;
        	-ms-transition:all .5s ease;
        	-o-transition:all .5s ease;
        	transition:all .5s ease;
		}
			#fila_articulo:hover{
				border-color: rgba(243, 243, 243, 1); /* gris de fondo */
			    background-color: rgba(40, 40, 40, 1); /* gris de fondo */
			}
			#imagen_articulo{
				float: left;
				width: 18%;
				padding: 1%;
			}
				#imagen_articulo img{
					width: 90%;
					padding:5%;
					margin: 0 auto;
					height: auto;
					width: auto/9;
					text-align: center;
				}
			#nombre_articulo{
				float: left;
				width: 73%;
				padding: 20px 1% 5px 1%;
				font-size: 1.3em;
				
				overflow:hidden;
				white-space:nowrap; 
				text-overflow: ellipsis;
			}
				.descuento_articulo{
					position: absolute;
					padding: 4px;
					margin: 8px;
					font-size: 0.6em;
					background: rgba(124,20,37, 1); /* burdeos */
					color: white;
				}
			#eliminar_articulo{
				float: right;
				width: 4%;
				padding: 0.5%;
				font-size: 1.8em;
				color: grey;
			}
				#eliminar_articulo:hover{
					cursor: pointer;
					color: white;
					font-weight: bold;
				}
			#descripcion_articulo{
				float: left;
				width: 50%;
				padding: 10px 1%;
				font-size: 1em;
				
				overflow:hidden;
				white-space:nowrap; 
				text-overflow: ellipsis;
			}
			#precio_articulo{
				float: left;
				width: 26%;
				margin-right: 2%;
				font-size: 1em;
				text-align: right;
			}
				.precio_por_unidad{
					float: left;
					width: 100%;
					font-size: .8em;
					color: grey;
					margin-bottom: 10px;
				}
					.oferta{
						text-decoration: line-through;
						padding-right: 10px;
					}
				.precio_calculado{
					float: left;
					width: 100%;
					font-size: 1.2em;
					font-weight: bold;
				}
				#stock_articulo{
					float: left;
					width: 73%;
					padding: 5px 1%;
					font-size: 0.8em;
				}	
			
		#col_resumen{
			float: left;
			width: 30%;
		}
			#col_stockage{
				float: left;
				width: 90%;
				font-weight: normal;
				padding: 10px 5%;
				margin-right:4%;
				margin-bottom: 10px;
				border: 1px solid grey;
				/* background-color: rgba(243, 243, 243, 0.4); /* gris de fondo */
			}
				#titulo_col_stockage{
					float: left;
					width: 100%;
					color: grey;
					font-size: 1em;
				}
				#texto_col_stockage{
					float: left;
					width: 100%;
					font-size: 0.9em;
					margin: 10px 0;
				}
					.fila_cesta_resumen{
						float: left;
						width: 90%;
						font-size: 1.1em;
						padding: 14px 0;
					}
					.separador{
						border-bottom: 1px dashed #ccc;
					}
					.texto_descuento{
						float: left;
						width: 42%;
						font-size: 0.8em;
						margin: 10px 2%;
					}
					.titulo_cesta_resumen{
						float: left;
						width: 56%;
						font-size: 0.8em;
						margin: 10px 2%;
					}
					.total_cesta_resumen{
						float: left;
						text-align: right;
						width: 36%;
						font-size: 0.8em;
						margin: 10px 2%;
					}
					.total{
						font-weight: bold;
						font-size: 1em;
					}
			.boton{
				color: black;
				padding: 4px 2%;
				font-size: 0.9em;
				text-align: center;
				
				background: rgba(193, 193, 193, 1);
					
				border: 1px solid black;
				-webkit-border-radius: 3px; 
				-moz-border-radius: 3px; 
				border-radius: 3px;
				
				-moz-transition:all .5s ease;
				-ms-transition:all .5s ease;
				-o-transition:all .5s ease;
				transition:all .5s ease;
			}
				.boton:hover{
					background: rgba(124,20,37, 1); /* burdeos */
					color: white;
					cursor: pointer;
				}
				.boton_descuento{
					float: right;
					width: 30%;
				}
				.boton_comprar{
					float: left;
					width: 76%;
					padding: 8px 2%;
					margin-left: 10%;
				}
		#cesta_vacia, #gracias{
			float: left;
			width: 80%;
			margin-left: 10%;
			margin-top: 90px;
			margin-bottom: 90px;
			text-align: center;
			padding-bottom: 100px;
			border-bottom: 2px solid grey;
		}
			#cesta_vacia .icono-cesta{
				font-size: 6em;
			}
			#gracias .icono-mail{
				font-size: 6em;
			}
			.txt_cesta_vacia{
				float: left;
				width: 90%;
				padding: 30px 5%;
				font-size: 3em;
			}
				
		/* ofertas */
		#col_ofertas{
			float: left;
			width: 100%;
		}
			.titulo_ofertas{
				float: left;
				width: 100%;
				font-size: 2.2em;
				text-align: center;
				margin: 20px 0;
			}
			#tabla_ofertas{
				float: left;
				width: 100%;
			}
			#articulo_oferta_carro{
				float: left;
				width: 30%;
				margin: 5px 1.4%;
				border: 1px solid grey;
				
				-moz-transition:all .5s ease;
            	-ms-transition:all .5s ease;
            	-o-transition:all .5s ease;
            	transition:all .5s ease;
			}
			    #articulo_oferta_carro:hover{
    				border-color: white;
    			}
				#articulo_oferta_carro:hover > a > #nombre_producto_oferta_carro{
					color: rgba(224,23,12, 1); /* rojo claro */
				}
				#articulo_oferta_carro:hover{
					cursor: pointer;
				}
				#img_producto_oferta_carro{
					float: left;
					width: 18%;
					padding: 1%;
				}
				#img_producto_oferta_carro img{
					width: 90%;
					padding:5%;
					margin: 0 auto;
					height: auto;
					width: auto/9;
					text-align: center;
				}
				#nombre_producto_oferta_carro{
					float:left;
					width: 60%;
					color: #ccc;
					margin-top: 10px;
					font-size: 1em;
					
					overflow:hidden;
					white-space:nowrap; 
					text-overflow: ellipsis;
				}
				#descripcion_producto_oferta_carro{
					float:left;
					width: 64%;
					color: #ddd;
					font-size: 0.9em;
					
					overflow:hidden;
					white-space:nowrap; 
					text-overflow: ellipsis;
				}
					
				#precio_producto_oferta_carro{
					float: left;
					width: 62%;
					margin-right: 2%;
					margin-top: 10px;
					text-align: right;
				}
					.precio_pvp_carro{
						font-size:1.1em;
						color: white;
					}
					.precio_oferta_carro{
						font-size:0.8em;
						text-decoration: line-through;
						color: grey;
					}
				#boton_comprar_oferta_carro{
					float: right;
					width: 12%;
					width: 30px;
					height: 30px;
					font-size: 1.4em;
					margin-top: 14px;
					margin-right: 4px;
					padding: 6px;
					text-align: center;
					
					background: rgba(193, 193, 193, .7);
					
					border: 1px solid black;
					-webkit-border-radius: 3px; 
					-moz-border-radius: 3px; 
					border-radius: 3px;
					
					-moz-transition:all .5s ease;
                	-ms-transition:all .5s ease;
                	-o-transition:all .5s ease;
                	transition:all .5s ease;
				}
					#boton_comprar_oferta_carro:hover{
						-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); 
						-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); 
						box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
						
						-moz-box-shadow: 0 0 4px rgba(0,0,0,0.7); 
						-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.7); 
						box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
						
						background: rgba(124,20,37, 1); /* burdeos */
						color: white;
						cursor: pointer;
					}
		#col_info_pago{
			float: left;
			width: 100%;
			margin-top: 20px;
		}
			#col_info_pago_in{
				float: left;
				width: 25%;
				padding: 20px 4%;
				margin: 20px 0;
				text-align: center;
			}
			.col_info_pago_icono{
				float: left;
				width: 20%;
				text-align: center;
				color: white;
				font-size: 2.4em;
				padding: 5px 1%;
			}
			.col_info_pago_texto{
				float: left;
				width: 72%;
				text-align: center;
				color: white;
				font-size: 0.9em;
				padding: 5px 2%;
			}
				.subtitulo{
					color: #ddd;
					font-size: 0.8em;
				}
			.gris_fondo{
				background-color: rgba(135, 135, 135, 1); /* gris de fondo */
				background-color: rgba(18, 3, 6, 1); /* chocolate oscuro */
			}
			.separador_derecha{
				border-right: 1px solid #ddd;
			}
			
/* media queries */
@media screen and (min-width: 1200px) {
    #fila_articulo{
		padding: 0;
	}
	#imagen_articulo{
	    max-width: 160px;
	}
}
@media screen and (max-width: 1200px) {
	#articulo_oferta_carro{
		width: 48%;
		margin: 5px 0.5%;
		max-height: auto;
	}
}

@media screen and (max-width: 850px) {
	#col_articulos{
		width: 100%;
	}
    	#fila_articulo{
    		width: 100%;
    		margin: 0;
    		margin-bottom: 10px;
    	}
    	    #imagen_articulo{
    	        min-width: 120px;
    	    }
    	#nombre_articulo{
			width: 50%;
		}
		#eliminar_articulo{
			float: right;
		}
	#descripcion_articulo{
    	width: 70%;
	}
	#precio_articulo{
	    width: 30%;
	    padding: 0;
	    margin: 0;
		text-align: left;
	}
	#stock_articulo{
		width: 30%;
		padding: 0;
		margin: 0;
		text-align: right;
	}
	#col_resumen{
		width: 100%;
	}
    	#articulo_oferta_carro{
    		width: 98%;
    	}
	    #img_producto_oferta_carro{
			max-width: 80px;
		}
	#col_info_pago_in{
		width: 92%;
		padding: 20px 4%;
		margin: 0;
	}
}

@media screen and (max-width: 600px) {
	#nombre_articulo{
		width: 40%;
		padding: 0;
	}
	#eliminar_articulo{
		margin-right: 20px;
	}
	#descripcion_articulo{
    	width: 50%;
    	padding: 0;
	}
}

@media screen and (max-width: 450px) {
    html, body{
		background: black;
	}
	#col_central{
		width:96%;
		margin-left:2%;
	}
	#descripcion_producto_oferta_carro{
		width: 54%;
	}
	#precio_producto_oferta_carro{
		color: white;
	}
}