@import url('https://fonts.googleapis.com/css?family=Dosis:300,400|Oswald:300,400');
@import "../font/flaticon.css";
*{margin:0; padding:0;}
.nosel {-webkit-touch-callout: none; -webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;text-align:left;}
html{height:100%;}
body {font-family:'Dosis', sans-serif; !important; color:#181818; font-size:1em ;background-color:#e1e1e1;padding:0; font-weight:400; overflow-y:scroll; height:100%;}
img{border:0;}
a{text-decoration:none;}
strong{font-weight:600}
p{ font-size:16px; font-weight:400; line-height:24px; color:#555}
li{font-size:16px; font-weight:400;}
input['text']{font-family:'Droid Sans', sans-serif; !important;}

/* animaciones por opacidad y general*/
.noview{display:none !important}
.nofloat{clear:both}
.noop{opacity:0}
.a05{-webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
.a02{-webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
.a01{-webkit-transition: all 1s ease; transition: all 1s ease;}
.ctr{text-align:center;}
.shd{text-shadow: 1px 1px 2px rgba(0,0,0,0.1);}
.buttoned{background:#da430c;display:block !important;padding:1em; font-size:0.9em; color:#181818; width:50% !important; margin:2em auto 0 auto;font-weight:600; text-align:center; cursor:pointer}
.buttoned:hover{background:#181818; color:#da430c}




#th{width:100%; background:rgba(255,255,255,0.6); position: absolute; z-index:100; min-height: 100%; height: 100% !important; top:0; left:0;display:none}
.thc{width:80%; max-width:980px; margin:2em auto; min-height:400px; background:#fff; box-shadow:0px 0px 10px rgba(0,0,0,0.5);}
.flaticon-close:before{ margin:0px !important; font-size:2em; color:#222}
#closebtn{float:right; margin-top:-10px !important;; margin-right:-10px}
.flaticon-close:hover:before{color:#800}

#page{width:100%; margin: 0 auto;}

#header{width:100%;height:90px; background:url(../img/general.background.png) 50% 50%; background-size:cover; position:fixed; }


#header .menu{font-family:'Oswald', sans-serif; text-align:center; font-weight:300 !important}
#header .menu ul{ margin:0em auto; padding:2em 0; }
#header .menu ul ul{display:none}
#header .menu ul li{display:inline-block; text-transform:uppercase; font-size:1.3em; margin-right:0.4em; color:#CCC; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; cursor:pointer}
#header .menu ul li hover{color:#fff}

#header .lng{position:absolute; right:20px; top:32px;text-transform:uppercase; font-size:1.3em; margin-right:0.4em; color:#CCC; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; cursor:pointer}

#header .lng a{color:#CCC; font-weight:700; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
#header .lng a:hover{color:#fff}

.cnt{width:100%;}
.hgt{-webkit-transition: all 0.2s ease; transition: all 0.2s ease;}


#footer{width:100%; background:url(../img/general.background.png) 50% 50%; background-size:cover; height:80px;}
#footersocial{ padding-top:2em; margin:0 auto;}
#footersocial ul{text-align:center; padding:0; margin:0 auto;}
#footersocial li{list-style:none; list-style-image:none; display:inline-block; border:none !important; padding:0 !important}
#footersocial li a{display:block; width:40px; height:40px; color:#bbb; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
#footersocial li a:hover{color:#fff !important}
#footersocial li a:before{font-family:'flaticon'; font-size:2em}


.foto{background-position:50% 50%; background-size:100%;float:left; width:50%;}
.texto{background-color:#fff; width:50%;float:left;}


#inspire{background:url(../img/foto.header.jpg) 50% 50%; background-size:100%; height:500px; padding-top:13em; overflow:hidden !important;}
#inspire img{width:60%; margin:0 auto; display:block}



#tierra{}
#tierra .foto{background-image:url(../img/find.your.pasion.jpg); background-size:100%}
#tierra .texto{background:url(../img/find.your.pasion.title.png) no-repeat 50% 10% #fff;}

#herencia{}
#herencia .foto{background-image:url(../img/never.stop.exploring.image.jpg)}
#herencia .texto{background:url(../img/never.stop.exploring.title.png) no-repeat 50% 10% #fff;}
#herencia .dt{padding-top:23em}

#valor{}
#valor .foto{background-image:url(../img/wonderful.life.image.jpg)}
#valor .texto{background:url(../img/wonderful.life.title.png) no-repeat 50% 10% #fff;}

#rioja{}
#rioja .foto{background-image:url(../img/carpe.diem.image.jpg)}
#rioja .texto{background:url(../img/carpe.diem.title.png) no-repeat 50% 10% #fff}
#rioja .dt{padding-top:15em}
#rioja p{line-height:1.2em}

#vinos{background:#fff; text-align:center;}

#vinos ul{margin:0 auto; text-align:center;}
#vinos li{list-style:none; display:inline-block; vertical-align:top; margin:2em 1em}
#vinos li img{height:500px; cursor:pointer;}
#vinos li p{color:#121212}
#vinos li p span{color:#aaa; display:block}
#vinos li p span span{font-size:0.8em; display:block}

#p05{height:300px !important;}
#p05 > div{ height:300px; background-color:#eee}
#p05 .dt{padding-top:2em}

#p05 .cen{background:url(../img/05.title.png) no-repeat 50% 50% #eee; background-size:40%}
.lft{width:40%;float:left;}
.cen{width:20%;float:left;}
.rgt{width:40%;float:left;}

#freespirit{height:400px; background:url("../img/free.spirit.image.jpg") 50% 40%; background-size:100%;}
#freespirit > div{float:left; height:350px;}




.dt{padding:20em 2em 2em 2em;}
.dt h2{display:none;}
.dt h3{font-family:'Oswald', sans-serif; font-size:2.5em; color:#888; text-transform: uppercase; text-align:center;}
.dt h4{font-family:'Oswald', sans-serif; font-size:1.2em; color:#dea151; text-transform: uppercase; text-align:center; font-weight:400; margin:0.4em 0}
.dt p{font-family:'Dosis', sans-serif; font-size:1em; color:#222; text-align:justify;}

#freespirit .dt{padding:5em 4em 3em 4em}
#freespirit .dt p, #freespirit .dt h4{color:#000}
#freespirit .cen{background:url(../img/free.spirit.title.png) no-repeat 50% 50%; background-size:80%}
#freespirit .legend{ padding:0em; color:#fff; font-size:1.2em; height:2em; letter-spacing:0.04em; text-align:center; width:100%;}


@media (min-width: 1440px){
	 .hgt{height:750px !important}
	 .dt{padding:20em 4em 4em 4em;!important}
	 .bgsz{background-size:50% !important}
	 #inspire {height:600px !important}
}

@media (max-width: 1440px){
	.hgt{height:660px !important}
	.dt{padding:20em 3em 4em 3em;!important}
	.bgsz{background-size:75%;!important}
	#inspire {height:500px !important}
}


@media (max-width: 1280px){
		.hgt{height:640px !important}
		.dt{padding:17em 2em 4em 2em !important}
		.bgsz{background-size:60% !important}
		#rioja .dt{padding-top:15em !important}
		#rioja .texto.bgsz{background-size:80% !important}
		#inspire {height:450px !important}
}

@media (max-width: 1024px){
		.hgt{height:600px !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		.dt{padding:15em 2em 4em 2em !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		.bgsz{background-size:60% !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		#rioja .dt{padding-top:12em !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		#rioja .texto.bgsz{background-size:70% !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		.dt h3{font-size:2em !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		.dt p{line-height:1.1em !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		#inspire {height:400px !important;}
		#vinos li img{height:400px !important;}
}

@media (max-width: 900px){
		.hgt{height:400px !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		.foto{clear:both; width:100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		.texto{clear:both; width:100%; height:auto !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		#inspire {height:300px !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		#vinos li img{height:200px !important;}
}


@media (max-width: 600px){

	.hgt{height:700px !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		.foto{clear:both; width:100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		.texto{clear:both; width:100%; height:auto !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		#inspire {height:250px !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		#vinos{height:300px !important}
		#vinos li{height:200px !important; margin:2em 0.5em !important}
	
}

@media (max-width: 400px){

	.hgt{height:300px !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		.foto{clear:both; width:100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		.texto{clear:both; width:100%; height:auto !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		#inspire {height:250px !important; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
		#vinos{height:300px !important}
		#vinos li{height:200px !important; margin:2em 0.5em !important}
	
}


/*Vinos*/

.vbg{width:100%; background-size:cover; background-repeat:no-repeat; padding-top:20px;}

.vbg .flaticon-pina:before{margin:0; font-size:5em}
.vbg .page{width:90%; border: 1px solid #e1e1e1; margin: 40px auto 0px auto !important;}
.vbg .page .tx, .vbg .page .vino{width:49%; text-align:center; display:inline-block; vertical-align:top; }

a.dwl{color:#333333; font-size:1em; margin-top:2em;}
a.dwl:before{font-size:1.4em; vertical-align:-0.2em}
a.dwl:hover{color:#800}
.vbg .tx{padding-top:10%}
.vbg .vino{min-height:1000px;}

.vbg .vino img{width:50%; margin-top:40%; margin-bottom:40px}
.vbg h1 span{display:none}
.vbg h1 img{width:180px;}
.vbg h2{font-weight:400; letter-spacing:0.5em; font-size:0.9em; text-shadow:0px 0px 3px #dd9c46}
.vbg p{width:80%; margin: 0.5em auto; line-height:1.8em}
.fot{margin:0; padding:2em 4em;}
.fot p{ font-size:1em; color:#000; font-weight:600; line-height: 1.7em; margin:0}

.vbg.blanco{background-image:url("../img/bg-blanco.jpg")}
.vbg.blanco .flaticon-pina:before{color:#e3d68f}

.vbg.rose{background-image:url("../img/bg-rosado.jpg")}
.vbg.rose .flaticon-pina:before{color:#ddacbf}

.vbg.temp{background-image:url("../img/bg-tempranillo.jpg")}
.vbg.temp .flaticon-pina:before{color:#dd9c46}
.vbg.temp .tx{padding-top:20%}
.vbg.temp .sello{background-image:url("../img/sello.tempranillo.png")}


.vbg.cri{background-image:url("../img/bg-crianza.jpg")}
.vbg.cri .flaticon-pina:before{color:#dccd86}
.vbg.cri .tx{padding-top:20%}

.vbg.res{background-image:url("../img/bg-reserva.jpg")}
.vbg.res .flaticon-pina:before{color:#dccd86}
.vbg.res .tx{padding-top:20%}
.vbg.res .fot{background-color:rgba(255,255,255,0.6)}

.vbg.sel{background-image:url("../img/bg-reserva-seleccionada.jpg")}
.vbg.sel .flaticon-pina:before{color:#dccd86}
.vbg.sel .tx{padding-top:30%}
.vbg.sel .name{width:50%;margin-left:-6em}
.vbg.sel p{width:90%; margin: 0.5em auto; line-height:1.5em}
.vbg.sel h2{margin-bottom:4em}
.vbg.sel .vino img{margin-top:50%; margin-bottom:30px}

.vbg.sel .intro{position:absolute; width:40%; min-width:400px; max-width:500px; margin-top:1em; margin-left:10em}
.vbg.sel .intro p{width:80%; margin:0 auto;}
.vbg.sel .intro p:first-child{width:100%; margin:0 auto;}