body, html{
	width:100%;
	height:100%;}

/*el boto l'he fet amb dabutton factory pero posant la font que vull i copiant el css */

#vinedo{
	width:100%;
	height:25%;
}

@font-face {
    font-family: "eaglelake";
    src: url(eaglelake.ttf);
}

.boton{
		background:    #ffe599;
		background:    -webkit-linear-gradient(#ffe599, #783f04);
		background:    -o-linear-gradient(#ffe599, #783f04);
		background:    linear-gradient(#ffe599, #783f04);
		border:        2px solid #000000;
		border-radius: 1000px;
		box-shadow:    3px 3px #cccccc;
		padding:       13px 50px;
		color:         #ffffff;
		display:       inline-block;
		font-size:     28px;
		font-family: "eaglelake", cursive;
		text-align:    center;
		text-shadow:   2px 2px #666666;
		clear:left;
		float:left;
		margin:10px;
		animation-name:animaBoton;
		animation-duration:5s;
		z-index:1;
}

.boton:hover{
	    opacity: 0.5;
}

@keyframes animaBoton{
	from{
		margin-top:100%;
	}
	to{
		margin-left:0%;
	}
}

#fc {
    position:absolute;
    top:30%;
    left:18%;
    width:33%;
    height:58%;
    border:3px solid #cc9900;
}

#uvas{
	position:absolute;
    top: 90%;
    left:1%;
    border:3px solid #663300;
}

#uvas2{
	position:absolute;
    top: 90%;
    left:28%;
    border:3px solid #cc3300;
}

.texto{
	font-family:"eaglelake";
	font-size:25px;
	position:absolute;
    top: 30%;
    left:55%;
	width:40%;
	height:80%;
	text-align:justify;
	background-color:#f2f2f2;
	overflow:scroll;
	
}

.texto2{
	font-family:"eaglelake";
	font-size:25px;
	position:absolute;
    top: 80%;
    left:22%;
	width:70%;
	height:18%;
	text-align:justify;
	background-color:#f2f2f2;
	overflow:scroll;
	
}

.comodin{
    border:2px solid red;
}

.logo{
	float:left;
	width:15%;
	height:15%;
}

.madera{
	border-radius:25px;
	background-image:url("images/madera1.jpg");
}

.madera1{
	width:55%;
	height:20%;
	float:left;
	border:5px solid #ffcccc;
}

.madera2{
	width:95%;
	height:25%;
	border:5px solid #993300;
}

.fotos{
	border:5px solid #bfbfbf;
	float: left;
	margin: 2%;

}

.fotos1{
	border:5px solid #bfbfbf;
	float: left;
	border-radius:50%;
	width:200px;
	height:200px;
	margin-left: 125px;
	margin-top: 10px;
}

.fotos:hover{
	border-radius:50%;
}

.fotos1:hover{
	border:10px solid #993300;
}

#vinedos{
	position:absolute;
    top: 25%;
    left:22%;
    width:70%;
    height:60%;
	animation-name:animaBoton;
	animation-duration:5s;
}

#barricas{
	width:1350px;
	height:500px;
	margin:20px;
	border-radius:50%;
	border:5px solid black;
}

.fondoMadera{
	position:absolute;
	top:275px;
	left:400px;
	width:77%;
	height:57%;
	border:5px solid #bfbfbf;
	border-radius:25px;
	background-image:url("images/madera2.jpg");
}

.fondoMaderaMida{
	position:absolute;
	top:835px;
	left:0px;
	width:100%;
	border:5px solid #bfbfbf;
	border-radius:25px;
	background-image:url("images/madera3.jpg");
}

#textoOculto{
	width:70%;
	height:20%;
	visibility:hidden;
	border:5px solid #bfbfbf;
	border-radius:25px;
	font-family:"eaglelake";
	font-size:20px;
	float:left;
	margin:35px;
	padding:5px;
	z-index:3;
	color:white;
}

#imagenbarrica{
	margin:30px;
	border:5px solid #bfbfbf;
	border-radius:25px;
	float:left;
}

#imagenOculta:hover #textoOculto{
	visibility:visible;
}

.fondoMaderaVinos{
	position:absolute;
	top:10px;
	left:400px;
	width:77%;
	height:100%;
	border:5px solid #bfbfbf;
	border-radius:25px;
	background-image:url("images/madera2.jpg");
}

.fondoMaderaVinosContacto{
	position:absolute;
	top:10px;
	left:400px;
	width:67%;
	height:100%;
	border:5px solid #bfbfbf;
	border-radius:25px;
	background-image:url("images/madera3.jpg");
}

#calidad{
	position:absolute;
	left:10px;
	top:850px;
}

#botella1{
	position:absolute;
	top:20px;
	left:30px;
	border:5px solid #bfbfbf;
	border-radius:25px;
}

#textoBotella1{
	position:absolute;
	left:300px;
	width:70%;
	height:20%;
	visibility:hidden;
	border:5px solid #bfbfbf;
	border-radius:25px;
	font-family:"eaglelake";
	font-size:20px;
	margin:15px;
	padding:5px;
	z-index:3;
	color:white;
}

#botella1b:hover #textoBotella1{
	visibility:visible;
}

#botella2{
	position:absolute;
	top:255px;
	left:30px;
	border:5px solid #bfbfbf;
	border-radius:25px;
}

#textoBotella2{
	position:absolute;
	left:300px;
	top:220px;
	width:70%;
	height:20%;
	visibility:hidden;
	border:5px solid #bfbfbf;
	border-radius:25px;
	font-family:"eaglelake";
	font-size:20px;
	margin:35px;
	padding:5px;
	z-index:3;
	color:white;
}

#botella2b:hover #textoBotella2{
	visibility:visible;
}

#botella3{
	position:absolute;
	top:490px;
	left:30px;
	border:5px solid #bfbfbf;
	border-radius:25px;
}

#textoBotella3{
	position:absolute;
	left:300px;
	top:460px;
	width:70%;
	height:20%;
	visibility:hidden;
	border:5px solid #bfbfbf;
	border-radius:25px;
	font-family:"eaglelake";
	font-size:20px;
	margin:35px;
	padding:5px;
	z-index:3;
	color:white;
}

#botella3b:hover #textoBotella3{
	visibility:visible;
}

#botella4{
	position:absolute;
	top:720px;
	left:30px;
	border:5px solid #bfbfbf;
	border-radius:25px;
}

#textoBotella4{
	position:absolute;
	left:300px;
	top:690px;
	width:70%;
	height:20%;
	visibility:hidden;
	border:5px solid #bfbfbf;
	border-radius:25px;
	font-family:"eaglelake";
	font-size:20px;
	margin:35px;
	padding:5px;
	z-index:3;
	color:white;
}

#botella4b:hover #textoBotella4{
	visibility:visible;
}

.tituloVino{
	font-family:"eaglelake";
	font-size:30px;
	font-weight:bolder;
}

.camposFormulario{
/*	position:absolute;
	left:50px;*/
	font-family:"eaglelake";
	font-size:30px;
	color:white;
	clear:left;
	float:left;
/*	border:2px solid red;*/
}

.camposFormularioTarjetas{
/*	position:absolute;
	left:50px;*/
	font-family:"eaglelake";
	font-size:30px;
	color:white;
	clear:left;
	float:left;
	width:400px;
/*	border:2px solid red;*/
}

.camposTexto{
/*	position:absolute;
	left:150px;*/
	float:left;
	font-family:"eaglelake";
	font-size:15px;
	color:black;
/*	border:2px solid red;*/
/*	padding-left: 25px;
	padding-top: 10px;*/
	margin: 10px;
}

.tarjetas{
	float:left;
}

.camposTexto2{
/*	position:absolute;
	left:150px;*/
	float:left;
	font-family:"eaglelake";
	font-size:15px;
	color:black;
/*	border:2px solid red;*/
/*	padding-left: 25px;
	padding-top: 10px;*/
	margin-top: 20px;
}

.pedidoVinos{
	font-family:"eaglelake";
	font-size:40px;
	color:white;
/*	text-decoration:underline;*/
/*	border:2px solid red; */
/*	clear:left;*/
	float:left;
	width:500px;
}

.tituloFormulario{
	font-family:"eaglelake";
	font-size:40px;
	color:white;
	text-decoration:underline;
/*	border:2px solid red; */
	clear:left;
	float:left;
}

.siguiente{
		position:absolute;
		top:700px;
		left:400px;
		background:    #ffe599;
		background:    -webkit-linear-gradient(#ffe599, #783f04);
		background:    -o-linear-gradient(#ffe599, #783f04);
		background:    linear-gradient(#ffe599, #783f04);
		border:        2px solid #000000;
		border-radius: 1000px;
		box-shadow:    3px 3px #cccccc;
		padding:       13px 50px;
		color:         #ffffff;
		display:       inline-block;
		font-size:     28px;
		font-family: "eaglelake", cursive;
		text-align:    center;
		text-shadow:   2px 2px #666666;
		margin:10px;
}

.siguiente2{
		position:absolute;
		top:200px;
		left:400px;
		background:    #ffe599;
		background:    -webkit-linear-gradient(#ffe599, #783f04);
		background:    -o-linear-gradient(#ffe599, #783f04);
		background:    linear-gradient(#ffe599, #783f04);
		border:        2px solid #000000;
		border-radius: 1000px;
		box-shadow:    3px 3px #cccccc;
		padding:       13px 50px;
		color:         #ffffff;
		display:       inline-block;
		font-size:     28px;
		font-family: "eaglelake", cursive;
		text-align:    center;
		text-shadow:   2px 2px #666666;
		margin:10px;
}

input:focus{
	border:2px solid red;
	background-color:#ffff99;
}/*cuando seleccionamos la caja le pone un borde y un fondo de cuadro*/

#pedidos1{
	position:absolute;
	top:30px;
	left:75px;

}

label{
	width:35%;
}

.regular-checkbox {
	-webkit-appearance: none;
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
}

.checkbox{
	clear:left;
	float:left;
	margin-right: 50px;
	margin-top:15px;
}


.regular-checkbox:active, .regular-checkbox:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.regular-checkbox:checked {
	background-color: #e9ecee;
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #99a1a7;
}

.regular-checkbox:checked:after {
	content: '\2714';
	font-size: 14px;
	position: absolute;
	top: 0px;
	left: 3px;
	color: #99a1a7;
}

.big-checkbox {
	padding: 18px;
}

.big-checkbox:checked:after {
	font-size: 28px;
	left: 6px;
}

#posicionCondiciones{
	position: absolute;
	top:400px;
	left:10px;
	border: 3px solid black;
	border-radius:25px;
	width:1100px;
}

#condiciones{
	font-family:"eaglelake";
	font-size:40px;
	color:#ffff33;
	clear:left;
}

#condiciones2{
	font-family:"eaglelake";
	font-size:40px;
	color:#ffff33;
/*	clear:left;*/
}

.condicionesGenerales{
	font-family:"eaglelake";
	font-size:20px;
	color:#ffff33;
}

#cantidad{
	position:absolute;
	top:10px;
	left:600px;
	font-family:"eaglelake";
	font-size:40px;
	color:white;
}

#carrito{
	position:absolute;
	top:50px;
	left:800px;
	clear:left;
}

.flecha{
	position: absolute;
	left:1000px;
}

.direccion{
	position:absolute;
	top:350px; 
	left:600px;
	font-family:"eaglelake";
	font-size:20px;
}

.direccion1{
	position:absolute;
	top:1100px; 
	left:400px;
	font-family:"eaglelake";
	font-size:20px;
	width:100%;
}

.telefono{
	float:left;
	margin-left: 50px;
	margin-right: 50px;
}

#mail{
	clear:left;
	float:left;
	margin-left: 500px;
}

hr{
	position:absolute;
	top:325px; 
	left: 400px;
	width: 70%;
	height:10px;
    background-color:#adb8c0;
    border-radius:5px;
}

#logofc{
	position:absolute;
	top:25px; 
	left: 700px;
}

aside{
	width: 50%;
}

#mapa{
	position:absolute;
	top:400px; 
	left:600px;
	width:50%;
	height:50%;
}

#fuente{
	position:absolute;
	left:10px;
	top:700px;
	opacity:0.5;
	border: 1px solid black;
	border-radius:50%;
}

#fuente:hover{
	opacity:1;
}

.posicionCondiciones{
	position:absolute;
	top:900px; 
	left:600px;
	width:50%;
	height:17%;
	border: 5px solid red;
	padding: 5px;
	border-radius:25px;
}

table{
	position:absolute;
	top: 450px;
	left:400px;
	border:3px solid black;
	border-collapse:collapse;
	width:1200px;
	margin:auto;
	font-family:"eaglelake";
}

table tr{
	border:1px solid black;
	padding:5px;
}

table td{
	border:1px solid black;
	padding:20px;
	text-align:center;
}

.botellasExp:hover{
	background-color:grey;
	color:white;
}

#video1{
	position:absolute;
	top:25px; 
	left: 400px;
	width:560px; 
	height:315px;
}

#video2{
	position:absolute;
	top:25px; 
	left: 1000px;
	width:560px; 
	height:315px;
}

#export{
	position:absolute;
	left:10px;
	top:850px;
	z-index:0;
}

.datosTabla{
	font-size:30px;
	text-shadow:2px 2px #ff0000;
}

#volumen{
	position:absolute;
	top: 400px;
	left:550px;
	font-family:"eaglelake";
	font-size:25px;
}