@import url('https://fonts.googleapis.com/css?family=Leckerli+One');
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500);


/*RESET*/
html{font-size:62.50%;font-family:Roboto,arial,sans-serif;}
body {font-size:1em;line-height:1;}
*{margin:0;padding:0;box-sizing:border-box;-moz-box-sizing:border-box;}
ul li {list-style:none;}
button {border:none;background:transparent;}
input, textarea {color:#494847;font-family:Roboto,arial,sans-serif;}
.hddn {visibility:hidden;position:absolute;top:-100%;left:-100%;}
.ima {float:left;display:inline-block;overflow:hidden;width:100%;}

.treeBox button strong {color:#fff;}
.treeBox fieldset {border:0;}

.arbDes .grid .gridBox{padding:0;}

.step {clip:rect(0,0,0,0);position:absolute;top:0;left:0;}

.step.active {clip:auto;}
.treeBox {position:relative;padding-top:76.4em;background-image:url('./i/Fondo.jpg');background-repeat:no-repeat;background-size:cover;background-position:center top;}
.treeBox .panelBox {position:absolute;left:0;top:0;width:100%;height:100%;}

.treeBox .txtBox {text-align:center;padding:6rem;}
.treeBox .maintitle strong {position:relative;font-family:'Leckerli One';font-size:4rem;color:#696868;}
.treeBox .auxBox {display:inline-block;width:100%;padding:14rem 10rem 13rem 10rem;text-align:center;}
.treeBox .end .auxBox{padding:6rem;}

.navigation .boton strong, .boton.repeat strong {font-size:2rem;line-height:1.2;font-weight:300;font-family:Roboto,arial,sans-serif;color:#fff;cursor:pointer;}

.navigation .boton{float:right;}
.navigation .boton * {display:inline-block;vertical-align:middle;}
.boton.repeat{margin-bottom:3rem;}
.navigation .boton, .boton.repeat {width:15rem;text-align:center;padding:0.7rem 0;background-color:#FF7E97;cursor:pointer;}
.start.active ~ .boton.repeat, .navigation:not(.hddn) ~ .boton.repeat{clip:rect(0,0,0,0);}

.navigation .boton, .boton.repeat {position:absolute;bottom:0;}
.navigation .boton.next, .boton.repeat{right:3rem;}
.navigation .boton.back{left:3rem;}
.boton.start strong {position:relative;font-family:'Leckerli One';font-style:normal;font-weight:400;font-size:4rem;cursor:pointer;z-index:1;} 

/* step-start */
.treeBox .step.start .txtBox {display:block;position:relative;height:20rem;}
.treeBox .step.start .auxBox p {font-size:280%;color:#676565;line-height:130%;}
.treeBox .step.start .txtBox .maintitle strong {clip:rect(0,0,0,0);position:absolute;overflow:hidden;top:-100%;left:-100%;}
.treeBox .step.start .txtBox h2 {position:relative;margin:0 auto;top:3rem;background-image:url('./i/Logo.png');background-repeat:no-repeat;background-size:100% auto;width:27%;height:17.64rem;}
.treeBox .step.start .boton {display:inline-block;width:100%;}
.treeBox .step.start .boton button {display:block;margin:0 auto;}
.panelBox .boton.start button strong:after {content:'';position:absolute;left:50%;margin-left:-16rem;top:-4rem;display:block;background-image:url('./i/Boton_Empezar.png');background-repeat:no-repeat;background-size:100% auto;width:32rem;height:14rem;z-index:-1;}

/* step-2 */
.treeBox .step .types {display:inline-block;width:100%;border:8rem solid transparent;border-top-width:2rem;}
.treeBox .step .types .ima {text-align:center;}
.treeBox .step .types .ima img {position:relative;}
.treeBox .step .types li:hover{border-width:.1rem;
    -webkit-filter:drop-shadow(0 0 1.5em rgba(0,0,0,0.15));
    -moz-filter:drop-shadow(0 0 1.5em rgba(0,0,0,0.15));
    filter:drop-shadow(0 0 1.5em rgba(0,0,0,0.15));}
.treeBox .step .types li {float:left;cursor:pointer;width:33.33333%;border:2rem solid transparent;
    -webkit-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    transition:all 0.5s linear;}
.treeBox .step .types li {position:relative;}
	
/* navegacion */
.treeBox .navigation {width:100%;text-align:center;position:absolute;bottom:3rem;}
.treeBox .navigation ul {display:inline-block;}
.treeBox .navigation ul li {float:left;width:3.5em;height:3.5em;cursor:pointer;background:#5fd0e9;border-radius:50%;margin:0 2rem;}
.treeBox .navigation ul li.disable{background:#abe3f0;}
.treeBox .navigation ul li:hover {background:#abe3f0;}

/* sptep-3 formulario */
.treeBox .panelBox .contBox .ima {width:40%;padding:0 0 0 10rem;}
.treeBox .panelBox .contBox .ima img {float:right;}
.treeBox .panelBox .contBox form {position:relative;display:inline-block;width:60%;padding:0 10rem;}
.treeBox .panelBox .contBox form fieldset input, .treeBox .panelBox .contBox form fieldset textarea {width:100%;background:#abe3f0;border:none;display:block;margin:1rem 0;font-family:inherit;font-size:2rem;line-height:2;}
.treeBox .panelBox .contBox form fieldset label {font-size:250%;color:#FF7E97;}
.treeBox .panelBox .contBox form fieldset input {height:5rem;padding:0 1rem;}
.treeBox .panelBox .contBox form fieldset textarea {height:20rem;max-width:61rem;padding:1rem;}
.treeBox .panelBox .contBox form fieldset textarea ~ em{font-size:1.8rem;font-style:italic;color:#257486;margin-bottom:1rem;display:block;text-align:right;}
.treeBox .panelBox .contBox .requerido {display:inline-block;width:100%;text-align:right;font-size:1.8rem;font-weight:300;}

.treeBox .panelBox.end {background-image:url('./i/wish_tree.jpg');background-repeat:no-repeat;background-size:cover;background-position:top right;}
.treeBox .panelBox.end .txtBox{text-align:left;}
.treeBox .panelBox.end .maintitle strong {left:0rem;top:7rem;font-size:6rem;}
.treeBox .panelBox.end .auxBox p {max-width:35rem;font-size:300%;color:#696868;line-height:120%;}
.treeBox .panelBox.end .auxBox ul#socials-share {max-width:35rem;padding-top:6rem;text-align:center;}
.treeBox .panelBox.end .auxBox ul#socials-share li{display:inline-block;}
.treeBox .panelBox.end .auxBox ul#socials-share img {float:left;}
.treeBox .panelBox.end .contBox{position:absolute;top:45%;right:20%;margin-top:-4rem;margin-right:-3.15rem;}
.treeBox .panelBox.end .contBox .ima{width:6.3rem;height:8rem;padding:0;position:relative;overflow:visible;}
.treeBox .panelBox.end .contBox .ima img{position:absolute;top:0;left:0;height:100%;width:auto;}
.treeBox .panelBox.end .contBox .ima img {transition:all .5s ease-in;
    -webkit-filter:drop-shadow(0 0 1em rgba(0,0,0,.5));
    -moz-filter:drop-shadow(0 0 1em rgba(0,0,0,.5));
    filter:drop-shadow(0 0 1em rgba(0,0,0,.5));}

.treeBox .panelBox.end .contBox .ima img:hover{
    -webkit-filter:drop-shadow(0 0 1em rgba(0,0,0,.9));
    -moz-filter:drop-shadow(0 0 1em rgba(0,0,0,.9));
    filter:drop-shadow(0 0 1em rgba(0,0,0,.9));}

.treeBox form input[type='radio'] {position:absolute;clip:rect(0,0,0,0);top:0;left:0;overflow:hidden;}
label:focus,button:focus {outline:none;}

.ima img {position:relative;width:100%;display:inline-block;}