@charset "UTF-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	border: 0;
}
body {
	margin: 0;
	background-image: url(images/fondo_body.png);
	background-repeat:no-repeat; background-position: center top;
	background-color: #9A6225;
	font-family: 'Open Sans', sans-serif;
	color: #f3e3c6;
}
.wrap {
	width: 1440px;
	margin-left: auto;
	margin-right: auto;
}
.wrapLogo {
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	padding: 50px 0 0 0;
}
.wrapLogo img {width: 100%; height: auto;}
.barraProductos {height: 189px; width: 100%; background-image: url("images/barraProductos.png"); background-position: center bottom; background-repeat: repeat-x;} 
.wrapTextoPortada {
	width: 500px;
	margin-left: auto;
	margin-right: auto;
	padding: 50px 0 5px 0;
	text-align: center;
}
.wrapBotones {
	width: 310px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px 0 5px 0;
	text-align: center;
}
.wrapForma {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 50px;
	margin-top: 30px;
	border-radius: 10px;
	background-color: #FFFFFF;
}

.col2 {float: left; width: 50%;}

.cognito {
	margin-left: auto;
	margin-right: auto;
}
h1 {
	font-family: 'Signika', sans-serif;
	font-size: 40px;
	color: #f3e3c6;
}
p {padding: 5px 0;}
.wrapBotones p {padding: 0;}
a {text-decoration: none; color: #780102;} 

.centrar {text-align: center;}
.imgContenido {width: 100%; height: auto;}

.colorCafe {color: #9A6225;}
.colorCafeClaro {color: #D4C7A0;}
.colorTinto {color: #780102;}

ol, ul {
	padding:10px 30px;
}

.pad20 {padding: 20px;}
.icoRedes  {padding: 20px; float: left;}
.wrapRedes {margin-left: auto; margin-right: auto; width: 238px;}

.btnLikeFb {width: 220px; margin-left: auto; margin-right: auto;}
.limpiador {clear: both;}

@media only screen and (min-width: 1280px) and (max-width: 1439px) {
	.wrap {
		width: 1280px;
	}
}

@media only screen and (min-width: 960px) and (max-width: 1279px) {
	.wrap {
		width: 960px;
	}
}

@media only screen and (min-width: 640px) and (max-width: 959px) {
	.wrap {
		width: 640px;
	}
}

@media only screen and (min-width: 480px) and (max-width: 639px) {
	.wrap {
		width: 480px;
	}
	.wrapLogo {width: 320px; padding: 70px 0 5px 0;}
	.wrapTextoPortada {width: 460px;}
	.col2 {float: none; width: 100%;}
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
	.wrap {
		width: 320px;
	}
	.wrapLogo {width: 300px; padding: 70px 0 10px 0;}
	.wrapTextoPortada {width: 300px;}
	.col2 {float: none; width: 100%;}
}