@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=PT+Sans:ital@0;1&display=swap');

@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%; background:#faf5e2}
body {font-family:'Open Sans', sans-serif; !important; color:#181818; font-size:1em ;padding:0; font-weight:400; overflow-y:scroll; height:100%;}
img{border:0;}
a{text-decoration:none;}
strong{font-weight:600}
p{ font-size:1em; font-weight:400; line-height:24px; color:#222}
li{font-size:16px; font-weight:400;}
input['text']{font-family:'Open 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);}


h2{font-size:3em; font-weight:600; text-align:center; margin:1em auto; color:#222; font-family:"Cabin" , sans-serif; font-weight:400}

h3{font-size:2em; font-weight:600; text-align:center; margin:1em auto; color:#222; font-family:"Cabin" , sans-serif; font-weight:400}
h4{font-size:1.5em; font-weight:600; text-align:center; margin:1em auto; color:#222; font-family:"Cabin" , sans-serif; font-weight:400}
.buttoned{background:#645312;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:#181818; color:#ffffff}

 ul.rrss li:first-child{display:none !important}



#thl{position: fixed;top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; overflow-x: hidden; overflow-y: auto; background: rgba(0,0,0,0.92); display:none;}

#thl >div{width:50vw; background:#000; border:1px solid #444; box-shadow: 0px 0px 3px rgba(255,255,255,0.3); min-height: 40vh; margin: 10vh auto 10vh auto; padding:2.5em 3em; border-radius:20px;}
#thl .close{width:24px; height:24px; float:right; background:#000;  margin:-2em}
#thl .data{display:none}

#thl .data h2, #thl .data h3{color:#b8873a; font-size:1.5em; text-align:left; text-transform:uppercase; border-bottom: 1px solid #b8873a;}
#thl .data h3{font-size:1.2em; border:none}
#thl .data p, #thl .data li, #thl .data a{color:#ddd !important}

#legalnew{margin:3em; text-align:center;}
#legalnew a{font-size:0.9em; color:#222;; margin: 0 2em 3em 2em}


/*formularios*/
.checksubs{cursor:pointer;}
.checksubs:hover .check,  .checksubs.aceptado .check{background:#f1948e url("../img/checked.png") 50% 50%; background-size:100%;}
.checksubs:hover .accept,  .checksubs.aceptado .accept{color:#645312}
.check{width:1.2em; height:1.2em; background:#fff; display:inline-block; margin-right:0.8em}
.accept{font-size:0.8em; display:inline !important; vertical-align:0.2em}
.sendsubs{background:#645312;display:block !important; border:none !important; padding:1em 0; font-size:0.9em; color:#fff; margin-top:1em;font-weight:600; text-align:center; cursor:pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
.sendsubs:hover{background:#000; color:#fff}

#cookiediv{position:fixed; bottom:0px; background:rgba(0,0,0,0.95); z-index:190; width:100%}
#cookiediv p{color:#fff ; padding:0.5em 2em; text-align:center }
#cookiediv p a{color:#fff; text-decoration:underline}
#cookiediv p a.buttoned{text-decoration:none; margin:1em auto;background:#faf5e2 !important; color:#222 !important}
#cookiediv p a.buttoned:hover{background:#bda95c !important}


#lang{position:absolute; top:0.5vw; right:1vw}
#lang a{display:inline-block; width:80px; margin-left:0.1em; border:1px solid rgba(255,255,255,0.8); color:#222; padding:0.5em 0em; font-size:0.8em;padding-left:35px; text-align:left;background-color:rgba(255,255,255,1); background-repeat:no-repeat; background-position:2px 50%; background-size:auto 50%}
#lang a:first-child{background-image:url(../img/es-flag.png)}
#lang a:nth-child(2){background-image:url(../img/en-flag.png)}
#lang a:last-child{background-image:url(../img/nl-flag.png)}
#lang a:hover{background-color:rgba(255,255,255,0.6); border:1px solid rgba(255,255,255,1);}


#th{position:fixed; width:100%; height:100vh; z-index:9999; top:0;background:rgba(255,255,255,0.6); display:none }
#th >div{width:30%;  background:#faf5e2; margin:30vh auto; border:2px solid #645312; 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:#1e2f1d; text-align:center; font-size:1em}


#the{position:fixed; width:100%; height:100vh; z-index:9999; top:0;background:rgba(255,255,255,0.95); display:block}
#the >div{width:30%;  background:#faf5e2; margin:30vh auto; border:2px solid #645312; box-shadow:2px 2px 20px rgba(0,0,0,0.2); display:table}
#the >div > div{display:table-cell; padding:3em 1em 0.5em 1em; vertical-align:bottom; text-align:center}
#the p#alertas{color:#333333; text-align:center; font-size:1em}
#the .buttoned{background:#181818;display:inline-block !important;padding:1em; font-size:0.9em; color:#f4b218; width:20% !important; margin:1em;font-weight:600; text-align:center; cursor:pointer}
#the .buttoned:hover{background:#645312; color:#fff}
#the img{width:250px}
#the .buttoned.cookie{width:75% !important; margin:1em 10% !important; padding:1em}
#the .edaddisabled, #the .edaddisabled:hover{background:#d1d1d1 !important; color:#bbb !important}


#header{text-align:center; height:80vh;  width:100wv; background: url(../img/full.web.jpg) no-repeat 50% 50%; background-size: auto 100% }

.arrow{
	cursor:pointer;
    position: absolute;
    transform: translate(-50%,-50%);
}

.one{top: 85vh;left: 50%;}
.two{top: 85vh;left: 50%;}
.arrow span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid #9c7c02;
    border-right: 5px solid #9c7c02;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
.arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow span:nth-child(3){
    animation-delay: -0.4s;
}


#video{width:100%}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}


#content{width:100%; min-height:800px;}
#content div.int{width:52%; margin:2em auto 0em auto; min-width:864px}
#content div.video{height:auto; background:#222}

#content div.share{text-align:center; border: 1px solid rgba(0,0,0,00.1); padding:0.5em}
	#content div.share a{font-size:1em; color:#c7c4b8; margin:0.5em}
	#content div.share a:hover{color:#9d8c4c}

#content div.share a:last-child{display:none}
#quiz{height:400px; overflow:hidden;background:#b8873a;}


#quiz >div{ padding:2em 5em; height:400px}

#quiz div.counter{padding:0; text-align:right; color:#fff; height:auto; width:90%; padding:0.2em 5%; font-size:1em; color:rgba(255,255,255,0.6) }
#quiz div.counter>div{display:inline-block; width:50%}
#quiz div.counter>div:first-child{text-align:left !important}

#quiz >div h4{color:#fff; font-size:2em; margin-top:0}
#quiz>div p,#quiz>div li{color:#e3ddc7; font-weight:400; font-size:1.5em; line-height:1.4em}
#quiz>div li{list-style:none; padding:0.2em; cursor:pointer}
#quiz>div li:hover{color:#fff}

#quiz>div ul{margin-top:1em; margin-left:3em;}

#quiz span{font-size:1em; vertical-align:-1em; margin-right:0.5em; display:inline-block; margin-top:0.6em}
#quiz span:last-child{margin-left:5em}


.question7 p{color:#e3ddc7; font-weight:400; font-size:1.3em !important; line-height:1.4em}
.question0{display:block}
.question1{display:none}
.question2{display:none}
.question3{display:none}
.question4{display:none}
.question5{display:none}
.question6{display:none}
.question7{display:none}
.question8{display:none}
.question9{display:none}

.nunpregunta{font-size:18em !important; color:rgba(255,255,255,0.05) !important; margin-top:-0.3em !important; margin-bottom:-0.9em; text-align:left}

.reload{margin:0 auto; display:block; fill: rgba(255,255,255,0.5); cursor:pointer}

.reload:hover{fill:#fff;transform: rotate(90deg);}

#quiz .email{ margin:0.5em auto; text-align:center}
.question0 li{margin-top:80px !important}
.question0 p{font-size:1em !important; text-align:center}
.question0 li h4{color:rgba(255,255,255,0.58) !important}
.question0 li:hover h4{color:#fff !important}

.question6 li{margin-top:80px !important}
.question6 li h4{color:rgba(255,255,255,0.58) !important}

#quiz input{margin-left:10px; background:transparent; border: 1px solid #fff; font-size:1em; color:#fff; padding:0.15em; font-family:'Open Sans', sans-serif;}
button{margin-left:2em; color:#fff; background: transparent; border:1px solid #fff; font-size:1em; padding: 0.15em 1em; font-weight:400;font-family:'Open Sans', sans-serif; cursor:pointer}
button:hover{background:rgba(255,255,255,0.6);color:#645312}

.rrss{text-align:center}
.rrss a{font-size:1.2em !important ;color:#c7c4b8}
.rrss a:hover{color:#a08624}
.rrss li{list-style:none; display:inline-block; margin: 0.2em}

.color1{background:#fff; padding-top:1em; padding-bottom:1em}



@media (max-width: 550px ){
	#lang{position:absolute; top:0.5vw; right:0; text-align:center; width:100%}
	#lang a{display:inline-block; width:20%; margin:0% 1%; border:1px solid rgba(255,255,255,0.8); color:#222; padding:0.5em 0.1em;padding-left:27px; font-size:0.8em; text-align:left;background-color:rgba(255,255,255,1); background-repeat:no-repeat; background-position:3px 50%; background-size:auto 50%}

	#content div.share a:last-child{display:inline-block}
	.one{margin-top:-20vh;}
	#header{ height:60vh;  width:100wv; background: url(../img/full.web.jpg) no-repeat 50% 100%; background-size: 100% auto;} 
	h2{font-size:1.8em !important}
	h3{font-size:1.6em !important}
	h4{font-size:1.2em !important}
	p{font-size:1em !important}
	#quiz>div,#quiz{height:650px}
	#quiz >div h4{font-size:1.5em; margin-top:0}
	#quiz>div p,#quiz>div li{font-size:1em !important; line-height:1.8em}
	#quiz>div li{padding:0.8em}
	#quiz>div ul{margin-top:1em; margin-left:1em;}
	.question7 p{color:#e3ddc7; font-weight:400; font-size:0.9em !important; line-height:1.1em}
	#quiz button{display:block; margin:20px auto}

	.int{min-width:auto !important; width:95% !important}

	#quiz >div{ padding:2em 2em; height:400px}

	#th >div,#the >div{width:90% !important;  background:#faf5e2; margin:10vh auto;}

	#cookiediv p{font-size:0.8em !important}
	#cookiediv p a{color:#fff !important}
	#cookiediv p a.buttoned{color:#222 !important; margin:0em auto; line-height:0.8em; padding:0.5em}
	#quiz span{margin-top:2.6em}

	#thl >div{width:90vw; margin: 5vh auto 10vh auto; padding:2.5em 1em; border-radius:10px; box-sizing:border-box}
#thl .close{width:24px; height:24px; float:right; background:#000;  margin:-2em 0em}
#thl .data{display:none}
#thl .data p, #thl .data li, #thl .data a{font-size:0.9em}

#legalnew a{margin: 0 1em 3em 1em}
}