@import url(../font/flaticon.css);
@import url(../font/flaticon2.css);

@import url(../css/this.styles.css);
@import '../css/cookies.css';

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;600&display=swap');


*{margin:0; padding:0;font-family:'Quicksand',sans-serif;}
html{height:100%;

}

body {font-family: 'Quicksand', sans-serif !important; color:#333; font-size:16px ;background-color:#fff;padding:0; font-weight:300; letter-spacing:0em}




.buttoned{background:#7673c0;;display:block !important;padding:1em; font-size:0.9em; color:#fff; width:50% !important; margin:2em auto 0 auto;font-weight:600; text-align:center; cursor:pointer}
.buttoned:hover{background:#fff; color:#333}


/*formularios*/
.checksubs{cursor:pointer;}
.checksubs:hover .check,  .checksubs.aceptado .check{background-color:rgba(118,115,192,2)}
.checksubs:hover .accept,  .checksubs.aceptado .accept{color:#222}
.check{width:1.2em; height:1.2em;border: 2px solid rgba(118,115,192,1); display:inline-block; margin-right:0.8em; background-image:url(https://bodegascampillo.com/img/close_button.svg); background-position:50% 50%; background-size:100%}
.accept{font-size:0.9em; display:inline !important; vertical-align:0.2em; color:#222}
.sendsubs{background:rgba(118,115,192,0.8);display:block !important; border:none !important; padding:1em 0; font-size:1.2em; color:#fff; margin-top:1em;font-weight:400; text-align:center; cursor:pointer;}
.sendsubs:hover{background:rgba(118,115,192,1); color:#fff}

#thv{position:fixed; width:100%; height:100vh; z-index:9999; top:0;background:rgba(0,0,0,0.95); display:none }
#thv div{width:80vw; height:80vh;   margin:10vh auto; box-shadow:2px 2px 20px rgba(0,0,0,0.2);}
#thv a{position:absolute; top:10vh; left:90vw; display:block; width:1em; height:1em; background:#000; color:#fff; font-size:2em; text-align:center; line-height:1em; border:1px solid #aaa}
#thv a:hover{border-color:#fff; background:#f4b218; color:#000}
#thv iframe{width:100% !important;; height:100% !important}

a.link{text-decoration:underline}
a.link:hover{color:rgba(118,115,192,1); text-decoration:underline}
#th{position:fixed; width:100%; height:100vh; z-index:9999; top:0;background:rgba(255,255,255,0.8); display:none }
#th >div{width:30%;  background:#fff; margin:30vh auto; border:2px solid #a0824d; box-shadow:2px 2px 20px rgba(0,0,0,0.2); display:table}
#th >div > div{display:table-cell; padding:3em 1em 0.5em 1em; vertical-align:bottom}
#th p#alertas{color:#333333; text-align:center; font-size:1em}
.xblk{background:url(../img/close.cross.png) #000 no-repeat 50% 50%; background-size:200%}
.xwht{background:url(../img/close.cross.blk.png) #000 no-repeat 50% 50%;}
img{border:0;}
a{text-decoration:none; color:#000}
a:hover{text-decoration:none; color:#888888; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
strong{font-weight:500}
p{font-size:16px; font-weight:500; line-height:20px;}
strong{font-weight:700; color:rgba(118,115,192,1)}
 li{font-size:16px; font-weight:500;}

/* animaciones por opacidad;*/
.noview{display:none !important}
.nofloat{clear:both}
.noindex{position: absolute !important; clip: rect(1px 1px 1px 1px);}

.a05{-webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
.a02{-webkit-transition: all 0.2s ease; transition: all 0.2s ease;}

/*contenidos*/
#allcontents{position:absolute; top:0; left:0; right:0; z-index:1000;;}


.banner{width:100%; background:url("../img/backheaderbig.png");overflow:hidden; height:60vw; background-size:auto 100%} 

#banner{opacity:1; padding:0;}
.fullbanner {width:100%; height:60vw;margin:0 auto;  overflow:hidden !important;}
.fullbanner ul{display:block;}
.fullbanner li{position:absolute;display:block; height:60vw; width:100%; background:no-repeat; background-size:100% auto; background-position:50% top}
.fullbanner li .text{height:60vw; width:100%; display:none}
.fullbanner li>div>div{display:table-cell; height:60vw; vertical-align:middle !important; text-align:center; padding:0 25%}
.fullbanner p{color:#888888 !important; font-size:1.2em; width:100%; line-height:1.3em;; marfin-left:1em; margin-bottom:1em}
.fullbanner .bpoint{position:absolute; z-index:25; text-align:center;width:100%; margin-top:370px;left:0; display:none}
.fullbanner .bpoint a{display:inline-block; margin:0.2em; border-radius:1em; width:0.8em; height:0.8em; background-color:#888888; border:1px solid #fff; box-shadow:1px 1px 3px rgba(0,0,0,0.5)}
.fullbanner .bpoint a:hover, .fullbanner .bpoint a.active{background:#888888}
.fullbanner h2, .fullbanner h3, .fullbanner a{}
.fullbanner h2{color:#aaa; font-size:1.5em;margin-bottom:1em; letter-spacing:0.15em; font-weight:400;}
.fullbanner h3{color:#444; font-size:3em;margin-bottom:0.8em ; letter-spacing:0.2em; }
.fullbanner a{ display:inline-block; padding:1em 2em; border: 1px solid #444; background-color:rgba(255,255,255,0.6); font-size:0.7em; margin:0em 1em}
.fullbanner a:hover{color:#fff; background-color:#7673c0; border-color:rgba(118,115,192,1)}
.banner, .fullbanner, .fullbanner li, .fullbanner li .text, .fullbanner li>div>div{height:41.5vw; }

.banner{border-bottom:20px solid #7673c0}

.fullbanner li:nth-child(1){z-index:24;}
.fullbanner li:nth-child(2){z-index:23;}
.fullbanner li:nth-child(3){z-index:22;}
.fullbanner li:nth-child(4){z-index:21;}
.fullbanner li:nth-child(5){z-index:20;}




.home .fullbanner li:nth-child(1) .text{display:table !important}
.home .fullbanner li:nth-child(1) .text >div{padding:0 15% 0 35%}
.home .fullbanner li:nth-child(1) .text h2{color:#7673c0; font-size:3em; margin-bottom:0.2em}
.home .fullbanner li:nth-child(1) .text p{margin:0em}
.home .fullbanner li:nth-child(1) .text a{margin-top:4em; font-size:1em; ; padding:0.5em 1em; border-color:#7673c0; color:#7673c0}
.home .fullbanner li:nth-child(1) .text a:hover{color:#fff}


#page{background:rgba(255,255,255,1); width:100%; margin: 0 auto;}

/*Header*/
#header{width:100%;z-index:9999; position:fixed;
    background-position:15% 50%,0% 0%;
    background-image:url(../img/perfum-fullcolor.svg), linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%) ;
    background-size: 150px auto,  100%;  
    background-color:transparent; 
    background-repeat: no-repeat;;
    top:0px; height:89px}
#logo{margin-left: 13%; width:150px;float:left}
#logo h1{display:none}
#logo a{width:150px; height:89px; display:block}

.menupral{width:100%;text-align:right; margin-top:1.2em}
.menupral ul{padding:0; text-align:left; display:inline}
.menupral a {text-decoration:none;display:block; color:#444; padding:0.6em 0em 0.8em 6em; text-transform:uppercase;font-size:1em; font-weight:400;}

.menupral a:hover, .menupral a.active{ color:#7673c0; }
.menupral ul li{list-style:none; display:inline-block; text-align:center; }
.menupral > ul >li:hover ul{display:block}
.menupral ul ul{position:absolute;z-index:999;display:none; margin:0;padding:0; padding-top:10px; width:inherit;background:#888888;}
.menupral ul ul li{font-size:1em; display:block; text-align:left;width:100%;background:#888888;border:0 !important}
.menupral ul ul a{font-size:1em; background:#3e3d40;!important;border:0 !important}




li.idioma a{border:1px solid #fff; padding:0.1em 0.2em 0.2em 0.2em; margin-left:3em; display:block; width:fit-content}

li.idioma a:hover{background:#7673c0; color:#fff}
li.idioma:last-child a{margin-left:0.2em !important}


#header.logotyped{background-image:url(../img/perfum-bwall.svg);background-color:#7673c0; background-size:120px auto; height:60px}
#header.logotyped .menupral{margin-top:0.5em;}
#header.logotyped .menupral a{color:#ffffff}
#header.logotyped #logo a{ height:60px;}


#header.logotyped .menupral a:hover,  #header.logotyped .menupral a.active{ color:rgba(255,255,255,0.5); }


/*Soluciones*/

.soluciones #header{background-color:rgba(255,255,255,0.8)}
.soluciones #header.logotyped{background-image:url(../img/perfum-bwall.svg);background-color:#7673c0; }
.soluciones .banner, .soluciones .fullbanner, .soluciones .fullbanner li, .soluciones .fullbanner li .text, .soluciones .fullbanner li>div>div{height:35vw; }

#content{
	width:100%;
}
.inc{
	width:100%;
	max-width:1170px;
	margin:0 auto;
}


.inc.mini{padding-top:6em !important}

#footer{width:100%;background:#7673c0; text-align:center; padding-top:2em}
#footer a, #footer li{color:rgba(255,255,255,0.5) !important;}
#footer a:hover{color:#fff; text-decoration:underline}
#footer ul{margin-top:2em}
#footer li{list-style:none;color:#888888; display:inline-block; margin:0 2em}
.footerlogo{width:200px}


.isos {background: rgba(0,0,0,0.2)}
.isos img{width:60px; margin:1em; vertical-align:middle; opacity:0.6}
.isos img:hover{opacity:1}


/*Listado de ejemploes*/
.listejemplos{margin-bottom:2em}
.listejemplos li {; width:49%;display:inline-block; border:1px solid #e1e1e1; padding:0em 0em; margin-bottom:0.5em}
.listejemplos li img{display:inline-block; Width:48%; vertical-align:middle}
.listejemplos li .dtext {display:inline-block; width:48%; padding:0em 0em; margin-bottom:0.5em}
.listejemplos li .dtext p{font-size:0.9em; color:#bbb; width:auto}



/*Materiales*/

.list{margin-bottom:2em;text-align:center}
.list >li {display:inline-block; padding:0.5em 0em; text-align:center; vertical-align:top; margin-bottom: 2em}
.list >li img{display:block; width:70%; vertical-align:middle; border-radius:50%;  border:4px solid #7673c0; margin:1em auto 2em auto;}
.list >li h4{font-size:1.6em !important; color:#7673c0}
.list >li  p{font-size:1em !important;  margin:0 10%; text-align:left}

.list >li ul {margin-top:1em}

.list >li ul li{font-size:1em !important;text-align:left; width:80%; margin:0 10%;list-style:disc; margin-left:15%; color:#7673c0}


.list.mat> li {; width:28%;}
.list.format> li {; width:28%;}


.list.mat> li.nuevo{background:#7673c0}
.list.mat> li.nuevo h4, .list.mat> li.nuevo p{color:#fff}
.list.mat> li.nuevo img{border-color:#fff}

.nmat{ background:#7673c0; color:#fff; box-shadow:1px 1px 2px rgba(0,0,0,0.5); width: fit-content; font-size:1.2em; padding:0.5em; position:absolute; margin:-1em 0em 0em -2em; z-index:10; transform: rotate(-15deg);}


/*generales*/
a.buton{;display:block; font-size:1.2em; margin:0 auto; background:rgba(118,115,192,0.8); color:#fff; padding: 1em 2em; text-align:center; width:150px}
a.buton:hover{background:rgba(118,115,192,1);}

 .inc h2{; margin:2em auto 1em auto; letter-spacing:0.12em; text-transform:lowercase; text-align:center; font-weight:300; font-size:4em;color:#7673c0}
 .inc h3{; margin:2em auto; letter-spacing:0.2em; text-transform:uppercase; text-align:center; font-weight:300; font-size:1.5em}

 .inc p{font-size:1.3em; color:#AAA; margin:1em 0; line-height: 1.2em}


/*Inicio*/

.perfum-data{padding:6em 0em; background:rgba(118,115,192,0.2)}
.perfum-data .inc{text-align:center}
.perfum-data img{width:200px; display:block; margin:2em auto 4em auto}
.perfum-data .inc>div{display:inline-block; vertical-align:top; width:25%; margin:0 4%}
.perfum-data h3{; margin-bottom:1em; letter-spacing:0.2em; text-transform:uppercase; margin-top:1em}
.perfum-data .inc div:nth-child(3) h3{margin-top:.5em !important; margin-bottom:0.5em}
.perfum-data p{font-size:1.1em !important}



.perfum-company{padding:4em 0em; background:#f1f1f1}
.perfum-company .inc{text-align:left}
.perfum-company img{width:100%; display:block; margin:0em auto 4em auto}
.perfum-company .inc>div{display:inline-block; vertical-align:middle; width:46%; margin:0 2%; text-align:justify}
.perfum-company h3{; margin-bottom:1em; letter-spacing:0.2em; text-transform:uppercase}
.perfum-company  a{float:right; border:1px solid #888; padding:0.4em 0.5em 0.3em 0.5em; color:#444; font-size:0.8em; font-weight:800}
.perfum-company p{font-size:1.1em !important}
.perfum-company  a:hover{border-color:rgba(118,115,192,1); background:rgba(118,115,192,1); color:#fff}


.perfum-fabric{padding:4em 0em; background:#fbfbfb; border-top:2px solid #f1f1f1}
.perfum-fabric .inc{text-align:left}
.perfum-fabric .inc>div{display:inline-block; vertical-align:top; width:46%; margin:0 2%; text-align:justify}
.perfum-fabric h2{; margin-bottom:1em; letter-spacing:0.2em; color:#7673c0;text-align:center; line-height:1.1em; font-size:3em}

.perfum-fabric h3{; margin-bottom:3em; letter-spacing:0.2em; color:#bbb;text-align:center; line-height:1.1em; font-size:1.6em}
.perfum-fabric h4{; margin-bottom:1em; letter-spacing:0.2em; font-size:1em; text-transform:uppercase}
.perfum-fabric  a{float:right; border:1px solid #888; padding:0.4em 0.5em 0.3em 0.5em; color:#444; font-size:0.8em; font-weight:800}
.perfum-fabric p{font-size:1.1em !important}
.perfum-fabric  a:hover{border-color:rgba(118,115,192,1); background:rgba(118,115,192,1); color:#fff}

.perfum-fabric li{margin-left:20px; list-style:none; margin-bottom:1em}
.perfum-fabric ul{margin-top:1em}

/*Personalización*/


.personalizacion .inc{}
.personalizacion .inc h2{; margin:2em auto; letter-spacing:0.2em; text-transform:uppercase; text-align:center; font-weight:500; font-size:2em}
.personalizacion .inc h3{; margin:2em auto; letter-spacing:0.2em; text-transform:uppercase; text-align:center; font-weight:400; font-size:1.5em}

.ejemplos{margin-bottom:2em}
.ejemplos>div{display:inline-block; width:18.1%; text-align:center; vertical-align:middle; box-sizing:border-box; border:1px solid #e1e1e1; margin:10px; cursor:pointer}
.ejemplos>div:hover{border-color:#7673c0}
.ejemplos>div img{width:90%}




/*contacto*/
/*formulario*/
.form {text-align:left; margin:3em auto}
.form div.inp{width:49%; float:right;margin-bottom:1em}
.form div.inp:nth-child(odd){float:left;}
.form div label{display:block; font-size:0.8em; color:#333; text-transform:uppercase;}
.form div.inp input{width:96%; background:#ebebe8; padding:0.5em 2%; font-size:1em; color:#333333; border:none}

.form div.inp select{width:100%; background:#ebebe8; padding:0.5em 2%; font-size:1em; color:#333333; border:none}

.form div textarea{width:98%; height:10em; padding:0.5em 1%; font-size:1em; color:#333333; border:none;  background:#ebebe8;}
.form .checksubs{margin:1em 0;}
.form .sendsubs{margin:0em auto; width:100% !important; box-shadow:1px 1px 2px rgba(0,0,0,0.8)}





.legal{/*la aceptcion*/
	text-align:left !important;
	margin-bottom:20px;
	}
.legal label{/*la aceptcion*/
	font-size:12px;
	font-weight:600;
	display:inline;
	margin-left:0.8em
	}
.legal label a{color:#800}
.legal a:hover{color:#B00}
.legal input{width:20px; vertical-align:-3px; margin-left:0.6em}

.obligatorios{font-size:0.8em; color:#222; background:rgba(255,255,255,0.6); text-align:center; padding:0.6em 0 !important; margin:2px auto 2em auto;width:95%}



.uso  #content .inc li{font-size: 1.3em;
    color: #888; margin-left:4em}

.uso #content .inc h4{color:#7673C0; margin-top:2em; font-size:1.6em}
.uso  #content .inc h5{color:#7673C0; margin-top:1em; font-size:1.3em}

.uso  #content .inc p{color:#888}
::-webkit-scrollbar {
    width: 16px;

}
::-webkit-scrollbar-track-piece{max-height:20px; border-left:1px #f00}
::-webkit-scrollbar-track {
    background-color: #000;
    border-left: 1px  dotted #fff;
	
}
::-webkit-scrollbar-thumb {
    background-color: #444;
	width:24px
}
::-webkit-scrollbar-thumb:hover {
    background-color: #666;
}


/*Animacione a la entrada*/

/*Fade*/
@keyframes fadein {
    1% {opacity:0; margin-top:-20px;}
	25% {opacity:1;}
	75% {opacity:1;}
    100% {opacity:0.1; margin-top:-400px;}
}
@-moz-keyframes fadein {
   1% {opacity:0; margin-top:-20px;}
	25% {opacity:1;}
	75% {opacity:1;}
    100% {opacity:0.1; margin-top:-400px;}
}
@-webkit-keyframes fadein {
   1% {opacity:0; margin-top:-20px;}
	25% {opacity:1;}
	75% {opacity:1;}
    100% {opacity:0.1; margin-top:-400px;}
}
@-o-keyframes fadein {
    1% {opacity:0; margin-top:-20px;}
	25% {opacity:1;}
	75% {opacity:1;}
    100% {opacity:0.1; margin-top:-400px;}
}


.fadein{animation: fadein 4s ease;}




@keyframes fading {
    0% {opacity:0;}
    50% {opacity:1;}
	100% {opacity:0;}
}
@-moz-keyframes fading {
     0% {opacity:0;}
    50% {opacity:1;}
	100% {opacity:0;}
}
@-webkit-keyframes fading {
    0% {opacity:0;}
    50% {opacity:1;}
	100% {opacity:0;}
}
@-o-keyframes fading {
    0% {opacity:0;}
    50% {opacity:1;}
	100% {opacity:0;}
}


/*Tablet horizontal SAMSUMG*/


 @media only screen and (max-width: 1320px){

     #header {background-position:2% 50%,0% 0%;}
    #logo{margin-left:2%}
    .fullbanner li{background-size:100%}
    .menupral a { padding:0.4em 0.8em 0.6em 0.4em;}
    .menupral{margin-right:40px; width: calc(100% - 40px)}
    .inc {
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
}º


 }

@media only screen and (max-width: 930px){

     #header {background-position:2% 50%,0% 0%;}
    .fullbanner li{background-size:100%}
    .menupral a { padding:1.2em 0.3em 0.8em 0.2em; font-size:0.8em}
    .menupral{margin-right:20px; width: calc(100% - 20px)}
    .home .fullbanner li:nth-child(1) .text h2 {font-size: 2em;}

    .inc {
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
}
.inc p {
    font-size: 1em;}
    .inc h2 {font-size:3em}

 }




 @media only screen and (max-width: 800px){
 .fullbanner li>div>div{display:table-cell; height:60vw; vertical-align:middle !important; text-align:center; padding:0 5%}

	
	#header.logotyped{ background:url(../img/perfum-bwall.svg) #7673c0 no-repeat 5% 50%; background-size:30%}
	#header{height:60px; background:url(../img/perfum-bwall.svg) #7673c0 no-repeat 5% 50%; background-size:30%}
	#header.logotyped .menupral{top:60px; margin-top:0}


	#logo{margin-left: 2%; height:60px; cursor:pointer}


	#cookiediv>div{width:95%;}
	#cookiediv p{padding:0}
	#cookiediv a.buttoned{display:inline-block !important; width:115px !important; margin: 1em 0.2em}
	#cookiediv>div>div{font-size:0.85em; display:block !important; width:100% !important;}
	#cookiediv>div>div:last-child{text-align:center}

	.burguer{display:block; position:fixed; top:0px; right:0; width:60px; height:60px; background:#7673c0 url("../img/menu_icon.svg") no-repeat 50% 50%; background-size:30%; z-index:25 } 


	.menupral{position:fixed; top:60px; right:0; width:80vw;background:#7673c0; padding-bottom:2em; display:none; margin-top:0}
	.menupral a {width:200px !important; padding:1em 0 0 0.8em; color:#fff; margin-right:2em; text-transform:lowercase}
	.menupral a.active {background:none; color:#fff}
	.menupral ul li{text-align:right}
	.menupral ul ul{display:block; padding-left:0.8em; position:relative; margin-top:-1.1em; color:#fff !important;}

	.menupral li.idioma {margin-top:1.1em}
	.menupral li.idioma a{border:1px solid rgba(255,255,255,0.6); padding:0.2em 0.3em 0.3em 0.3em ; margin-left:0.2em; display:block !important; width: fit-content !important}
	.menupral li.idioma a:hover{background:#7673c0; color:#fff}


	#content{padding-top:60px}

	.inc{max-width:95%}


	.perfum-data{padding:2em 0}
	.perfum-data img { width: 150px; margin: 1em auto 2em auto;}
	.perfum-data .inc>div{width:100%; margin:0}

	.perfum-company{}
	.perfum-data .inc>div, .perfum-company .inc>div, .perfum-fabric .inc>div {width:100%; margin:0; padding:1em 0}
	.perfum-company h3{margin-top:1em}

	.perfum-fabric{padding:1em 0}
	.inc h2{margin:1em auto 1em auto; font-size:2em}


	.ejemplos >div{width:41vw}
	.ejemplos>div>div{width: 41vw;height: 41vw;margin-top:-41vw;}

	.ejemplos>div:hover >div{opacity:1; width:95vw; height:95vw;margin-top:-300px; left:28vw; overflow:hidden }

	.list >li h4{font-size:1.2em !important}
	.list.mat> li{width:45%}

	.list.format> li{width:100%}

	.listejemplos li{width:100%}
	.listejemplos li .dtext{vertical-align:middle}

	.soluciones #header{background:url(../img/perfum-bwall.svg) #7673c0 no-repeat 5% 50%; background-size:30% }


	.inc h3{font-size:1em}


	#footer li{display:block}



	.fullbanner {max-width:800px;}
	.fullbanner li{ background-size: cover}
	.fullbanner li .text{height:100%; background:rgba(255,255,255,0); width:100%}
	.fullbanner .pricepromo{margin-right:1%; margin-top:1%; font-size:0.8em}
	.fullbanner h2{font-size:1em; width:100%;}
	.fullbanner h3{font-size:2em; width:100%;}
	.fullbanner p{font-size:0.7em; width:100%;}
	.fullbanner .btn{margin-top:4em; text-align:left}
	.fullbanner .btn a{font-size:0.8em; width:50px !important}
	.fullbanner .bpoint{margin-top:34vw;}
	.fullbanner a{display:block; font-size:1em; width:100px; margin:0.5em auto}


	.banner, .fullbanner, .fullbanner li{height:50vw;}
	.home .fullbanner li:nth-child(1) .text h2{color:#7673c0; font-size:1em; font-weight:600; margin-bottom:0.2em; margin-top:-2em}
	.home .fullbanner li:nth-child(1) .text a{margin-top:1.2em; font-size:0.8em; ;}



	
	
	#footer > div{;margin: 0 auto}
	#footer > div > div{width:90%; margin:1em 5% 0.5em 5%; text-align:center;}
	#footer > div h2 img{width:200px}
	#footer > div >div:nth-child(3){display:none}
	#footer > div > div
	#webs{width:100%;}
	#webs ul li{width:45%; height: auto;}
	#webs ul li:first-child{width:100%}
	
	#th >div{width:90%}
	h2.family{font-size:2em}
}