/* W3.CSS 2.88 Jan 2017 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent;-webkit-text-decoration-skip:objects}
a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}
img{border-style:none}svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal;width:100%;}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
/* End extract */
:root{
  font-size: 16px;
  --panel-dark:#383645;
  --panel-light:#56566d;
  --panel-dark-button:#56566d;
  --panel-dark-button-hover: #64647e;
  --panel-light-button:#383645;
  --panel-light-button-hover:#3e3c4e;
}
html,body{font-family: 'Roboto', sans-serif;line-height:1.61803398875}html{overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-weight:400}.wide{letter-spacing:4px}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}
hr{border:0;border-top:1px solid #eee;margin:20px 0}
a{color:inherit}
.image{width: 100%;height: 100%;object-fit: cover;}
.image-medium{width: 30%;height: auto;object-fit: cover;}
.centered tr th,.centered tr td{text-align:center}
.center{text-align:center!important}
.center-element{display: inline-block;margin-left: auto;margin-right: auto}
.center-text{width:auto;margin-left: auto;margin-right: auto;}
.btn,.btn-block{border:none;display:inline-block;outline:0;padding:6px 16px;vertical-align:middle;overflow:hidden;text-decoration:none!important;color:#fff;background-color:#000;text-align:center;cursor:pointer;white-space:nowrap}
.btn:hover,.btn-block:hover,.btn-floating:hover,.btn-floating-large:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.btn,.btn-floating,.btn-floating-large,.closenav,.opennav,.btn-block{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.btn-floating,.btn-floating-large{display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:24px}
.btn-floating{width:40px;height:40px;line-height:40px}.btn-floating-large{width:56px;height:56px;line-height:56px}
.disabled,.btn:disabled,.btn-floating:disabled,.btn-floating-large:disabled{cursor:not-allowed;opacity:0.3}
.btn.disabled *,.btn-block.disabled,.btn-floating.disabled *,.btn:disabled *,.btn-floating:disabled *{pointer-events:none}
.btn.disabled:hover,.btn-block.disabled:hover,.btn:disabled:hover,.btn-floating.disabled:hover,.btn-floating:disabled:hover,
.btn-floating-large.disabled:hover,.btn-floating-large:disabled:hover{box-shadow:none}
.btn-group .btn{float:left}.btn-block{width:100%}
.btn-bar .btn{box-shadow:none;background-color:inherit;color:inherit;float:left}.btn-bar .btn:hover{background-color:#ccc}
.badge,.tag,.sign{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}
.badge{border-radius:50%}
ul.ul{list-style-type:none;padding:0;margin:0}ul.ul li{padding:6px 2px 6px 16px;border-bottom:1px solid #ddd}ul.ul li:last-child{border-bottom:none}
.tooltip,.display-container{position:relative}.tooltip .text{display:none}.tooltip:hover .text{display:inline-block}
.btn,.btn-floating,.dropnav a,.btn-floating-large,.btn-block, .navbar a,.sidenav a,.pagination li a,.hoverable tbody tr,.hoverable li,
.accordion-content a,.dropdown-content a,.dropdown-click:hover,.dropdown-hover:hover,.opennav,.closenav,.closebtn,*[class*="hover-"]
{-webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s;transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s}
.modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}.closebtn{text-decoration:none;float:right;font-size:24px;font-weight:bold;color:inherit}
.closebtn:hover,.closebtn:focus{color:#000;text-decoration:none;cursor:pointer}
.pagination{display:inline-block;padding:0;margin:0}.pagination li{display:inline}
.pagination li a{text-decoration:none;color:#000;float:left;padding:8px 16px}
.pagination li a:hover{background-color:#ccc}
.input-group,.group{margin-top:24px;margin-bottom:24px}
.input{padding:8px;display:block;border:none;border-bottom:1px solid #808080;width:90%}
.label{color:#009688}.input:not(:valid)~.validate{color:#f44336}
.select{padding:9px 0;width:100%;color:#000;border:1px solid transparent;border-bottom:1px solid #009688}
.select select:focus{color:#000;border:1px solid #009688}.select option[disabled]{color:#009688}
.accordion {width:100%;cursor:pointer}
.accordion-content{cursor:auto;display:none;position:relative;width:100%;margin:0;padding:0}
.accordion-content a{padding:6px 16px;display:block}.accordion-content a:hover{background-color:#ccc}
.progress-container{width:100%;height:1.5em;position:relative;background-color:#f1f1f1}
.progressbar{background-color:#757575;height:100%;position:absolute;line-height:inherit}
input[type=checkbox].check,input[type=radio].radio{width:24px;height:24px;position:relative;top:6px}
input[type=checkbox].check:checked+.validate,input[type=radio].radio:checked+.validate{color:#009688}
input[type=checkbox].check:disabled+.validate,input[type=radio].radio:disabled+.validate{color:#aaa}
.responsive{overflow-x:auto}
.container:after,.panel:after,.row:after,.row-padding:after,.topnav:after,.clear:after,.btn-group:before,.btn-group:after,.btn-bar:before,.btn-bar:after
{content:"";display:table;clear:both}
.col,.half,.third,.twothird,.threequarter,.quarter{float:left;width:100%}
.col.s1{width:8.33333%}
.col.s2{width:16.66666%}
.col.s3{width:24.99999%}
.col.s4{width:33.33333%}
.col.s5{width:41.66666%}
.col.s6{width:49.99999%}
.col.s7{width:58.33333%}
.col.s8{width:66.66666%}
.col.s9{width:74.99999%}
.col.s10{width:83.33333%}
.col.s11{width:91.66666%}
.col.s12,.half,.third,.twothird,.threequarter,.quarter{width:99.99999%}
.s-offset-1{margin-left: 8.33333333%;}
.s-offset-2{margin-left: 16.66666667%;}
.s-offset-3{margin-left: 25%;}
.s-offset-4{margin-left: 33.33333333%;}
.s-offset-5{margin-left: 41.66666667%;}
.s-offset-6{margin-left: 50%;}
.s-offset-7{margin-left: 58.33333333%;}
.s-offset-8{margin-left: 66.66666667%;}
.s-offset-9{margin-left: 75%;}
.s-offset-10{margin-left: 83.33333333%;}
.s-offset-11{margin-left: 91.66666667%;}
.s-offset-12{margin-left: 100%;}
.top,.bottom{position:fixed;width:100%;z-index:1}.top{top:0}.bottom{bottom:0}
.overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
.left{float:left!important}.right{float:right!important;}
.tiny{font-size:0.6em!important}.small{font-size:0.8em!important}
.medium{font-size:1em!important}.large{font-size:1.2em!important}
.xlarge{font-size:1.5em!important}.xxlarge{font-size:1.8em!important}
.xxxlarge{font-size:48px!important}.jumbo{font-size:64px!important}
.vertical{word-break:break-all;line-height:1;text-align:center;width:0.6em}
.left-align{text-align:left!important}.right-align{text-align:right!important}
.justify{text-align:justify!important}.center{text-align:center!important}
.display-topleft{position:absolute;left:0;top:0}.display-topright{position:absolute;right:0;top:0}
.display-bottomleft{position:absolute;left:0;bottom:0}.display-bottomright{position:absolute;right:0;bottom:0}
.display-middle{text-align: center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
.display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
.display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
.display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
.display-container:hover .display-hover{display:block}.display-container:hover span.display-hover{display:inline-block}.display-hover{display:none}
.circle{border-radius:50%!important}
.round-small{border-radius:2px!important}.round,.round-medium{border-radius:4px!important}
.round-large{border-radius:8px!important}.round-xlarge{border-radius:16px!important}
.round-xxlarge{border-radius:32px!important}.round-jumbo{border-radius:64px!important}
.border-0{border:0!important}.border{border:1px solid #ccc!important}
.border-top{border-top:1px solid #ccc!important}.border-bottom{border-bottom:1px solid #ccc!important}
.border-left{border-left:1px solid #ccc!important}.border-right{border-right:1px solid #ccc!important}
.margin{margin:16px!important}.margin-0{margin:0!important}
.margin-both{margin-top:1em!important;margin-bottom:1em!important}
.margin-top{margin-top:16px!important}.margin-bottom{margin-bottom:16px!important}
.margin-bottom-2{margin-bottom:2rem!important}
.margin-top-2{margin-top:1.5rem!important}
.margin-left{margin-left:16px!important}.margin-right{margin-right:16px!important}
.margin-sides{margin-left:1rem;margin-right: 1rem;}
.section{margin-top:16px!important;margin-bottom:16px!important}
.topbar{border-top:6px solid #ccc!important}.bottombar{border-bottom:6px solid #ccc!important}
.leftbar{border-left:6px solid #ccc!important}.rightbar{border-right:6px solid #ccc!important}
.row-padding,.row-padding>.half,.row-padding>.third,.row-padding>.twothird,.row-padding>.threequarter,.row-padding>.quarter,.row-padding>.col{padding:0 8px}
.spin{animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
.animate-fading{-webkit-animation:fading 10s infinite;animation:fading 10s infinite}
@-webkit-keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.animate-opacity{-webkit-animation:opac 0.8s;animation:opac 0.8s}
@-webkit-keyframes opac{from{opacity:0} to{opacity:1}}
@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-top{position:relative;-webkit-animation:animatetop 0.4s;animation:animatetop 0.4s}
@-webkit-keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.animate-left{position:relative;-webkit-animation:animateleft 0.4s;animation:animateleft 0.4s}
@-webkit-keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.animate-right{position:relative;-webkit-animation:animateright 0.4s;animation:animateright 0.4s}
@-webkit-keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.animate-bottom{position:relative;-webkit-animation:animatebottom 0.4s;animation:animatebottom 0.4s}
@-webkit-keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0px;opacity:1}}
@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.animate-zoom {-webkit-animation:animatezoom 0.6s;animation:animatezoom 0.6s}
@-webkit-keyframes animatezoom{from{-webkit-transform:scale(0)} to{-webkit-transform:scale(1)}}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.animate-input{-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out}.animate-input:focus{width:100%!important}
.opacity,.hover-opacity:hover{opacity:0.50;filter:alpha(opacity=70);-webkit-backface-visibility:hidden}
.opacity-off,.hover-opacity-off:hover{opacity:1;filter:alpha(opacity=100);-webkit-backface-visibility:hidden}
.focus-opacity-off:focus{opacity:1;filter:alpha(opacity=100);-webkit-backface-visibility:hidden}
.opacity-max{opacity:0.25;filter:alpha(opacity=25);-webkit-backface-visibility:hidden}
.opacity-min{opacity:0.75;filter:alpha(opacity=75);-webkit-backface-visibility:hidden}
.greyscale-max,.grayscale-max,.hover-greyscale:hover,.hover-grayscale:hover{-webkit-filter:grayscale(100%);filter:grayscale(100%)}
.greyscale,.grayscale{-webkit-filter:grayscale(75%);filter:grayscale(75%)}
.greyscale-min,.grayscale-min{-webkit-filter:grayscale(50%);filter:grayscale(50%)}
.sepia{-webkit-filter:sepia(75%);filter:sepia(75%)}
.sepia-max,.hover-sepia:hover{-webkit-filter:sepia(100%);filter:sepia(100%)}
.sepia-min{-webkit-filter:sepia(50%);filter:sepia(50%)}
.text-shadow{text-shadow:1px 1px 0 #444}.text-shadow-white{text-shadow:1px 1px 0 #ddd}
.transparent{background-color:transparent!important}
.hover-none:hover{box-shadow:none!important;background-color:transparent!important}
/*-----------------------------------------------------------*/
.only-sr{border: 0;position: absolute !important;width: 1px;height: 1px;overflow: hidden;padding: 0;clip: rect(0, 0, 0, 0);margin: -1px;white-space: nowrap;/*posibles errores*/}
.skip-links{list-style: none;margin: 0;padding: 0;position: relative;}
.skip-links li a{background-color: white;display: block;position: absolute;top:0;left: -100%;padding: 0.5em;}
.skip-links li a:focus{position: fixed;left: 0;top: 0;border-radius: 4px;background-color: #657366;color:white;z-index: 29;}
/*[tabindex="-1"]:focus{ para quitar el outline
outline: none;
}*/
nav.breadcrumb {background-color: white; padding: 0.5em 0 0 0;}
nav.breadcrumb ol {margin: 0;padding-left: 0;list-style: none;}
nav.breadcrumb li {display: inline;}nav.breadcrumb li + li + li::before {color: #333;content: '> ';}
nav.breadcrumb a {color: #434C43;text-decoration: none;}
nav.breadcrumb a:focus,nav.breadcrumb a:hover {text-decoration: underline; background: transparent;}
nav.breadcrumb [aria-current="page"] {color: #000;font-weight: 700;text-decoration: none;}
/*-------------------------*/

/*HTML elements*/
/**{transition: all 400ms ease-in-out;}*/
html{font-size: 105%;}
h1{font-size:1.8rem;text-align: center;margin-top:0;}h2{font-size:1.6rem}h3{font-size:1.5rem}h4{font-size:1.4rem}h5{font-size:1.2rem}h6{font-size:1rem}
body{background-color: white;color: #333;margin: 0.75rem 0.75rem}
header nav{background-color: white;text-align: center;}
/*a:focus{
  outline: 1px auto -webkit-focus-ring-color;
  outline-color: #1a75ff;

  box-shadow: 0 0 2px 3px #78aeda, 0 0 2px #78aeda inset;
  border-radius: 2px;
}*/
footer{background-color: #0D1B25;color: white;padding: 1.2rem}
footer p:first-child, footer p:last-child{margin-bottom:  0}
footer nav:first-of-type{margin-bottom:1rem}
footer a{text-decoration: none; margin: 0 0.5rem}
footer a:hover{text-decoration: underline;}
.rrss a i{
  transition: all .25s ease-in-out;
}
.rrss a:hover i, .rrss a:focus i{
  transform: translateY(-4px);
}
button{margin: .3rem}
fieldset{border:none}
/*End HTML elements*/

/*Class elements*/

/*Helpers*/
.main-h1{
  font-size: 3rem !important;
}
.italic{font-style: italic}
.no-margin-top{margin-top: 0 !important}
.no-padding-top{padding-top: 0 !important}
.no-margin-bottom{margin-bottom: 0 !important}
.no-padding-bottom{padding-top: 0 !important}
.padding-top{padding-top:1rem;}
.padding-top-2{padding-top:2rem;}
/*-----*/
.sizeM{width: 95%;height: auto;}
.container{height: 90vh;padding: 0.4rem 0em;background-clip: content-box;}
.container-full{height: 60vh;padding: 0.4rem 0em;background-clip: content-box;}
.container-date{height: auto;padding: 0.4rem 0em;background-clip: content-box;}
.container-date input{margin: 1rem 0;}
.container-mid-height{height: 30vh}
.img-grid{padding: 0.3rem 0;background-clip: content-box;}
.hide-small{display:none!important}
#hamburguer{position: fixed;z-index: 3 !important;top:0;right: 0;width: auto;z-index: 2;
  padding:0.2rem;margin:0em !important;background-color: white;transform: translate(0,0);border-bottom-left-radius: 5px}
.menu{transform: translate(-100%, 0);transition: transform 0.5s ease;}
.menu ul{padding-left: 0;height: 100vh;background-color: white;}
.menu li{list-style-type: none;height: calc(100vh/10)}
.menu a{text-decoration: none;padding: 1.5vh}
.menu .image{height: 3rem !important; width: auto !important;}

.sticky{position: fixed;top:0;left: 0;width: 100%;height: 6rem;z-index: 2;}

.ancho,.anchohab{background-color: white;padding:0.75rem;max-width: 100%;margin-left: auto;margin-right: auto;padding-top:0;}

.vermas{text-decoration:none; text-align: center;background-color: green;color: white;}
.vermas:hover,.vermas:focus,.vermas:active{background-color: #0a6c0a;}
.reservar{text-decoration:none;text-align: center;background-color: orange; color: white;}
.reservar:hover,.reservar:focus,.reservar:active{background-color: #836329}

/*-------------Playroom-------------*/

.section{
  background-color: aqua;
  margin: 1rem 0;
  padding: 1.5rem;
}

.test div{
  z-index: -1000
}
.room{
  margin: 10rem 0;
}
.cool-panel { 
  display: grid;
  grid-template-columns: repeat(11,3rem);
  grid-gap: 1rem;
  align-items: stretch;
  justify-items: center;
  }

/*.box-item{
  margin:.2rem;
  display: inline-block;
  width: 3rem;
  height: 3rem;
  background-color: var(--bg-color);
  opacity: 0;
  animation-name: fade;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-delay: var(--anim-delay)
}*/

.box-item{
  margin:.2rem;
  display: inline-block;
  width: 3rem;
  height: 3rem;
  background-color: var(--bg-color);
  opacity: 0;
  transition-delay: var(--anim-delay);
  transition: all 1s ease; 
}


@keyframes fade {
  0%   {opacity:0;}
  100% {opacity:1;}
}

.box-item2{
  margin:.2rem;
  display: inline-block;
  width: 3rem;
  height: 3rem;
  background-color: red;
  opacity: 0;
  transition-delay: 1s;
  transition: all .3s ease; 
}
.box-visible{
  opacity:1;
  transition-delay: var(--anim-delay);
}
.opacity{
  opacity: 0.5;
}
.scale{
  transform: scale(1.05);
}
.dimensions{
  width: 4rem;
  height: 4rem;
}