/**
 *  WebSite: elrecreo.es
 *  Archivo: ztt_elrecreo.css
 *  (cc) 3con14.pro, ENE/2017
 */

/*===================================================
=            custom class                           =
===================================================*/
/* @import url('https://fonts.googleapis.com/css?family=Merienda'); */
@import url('https://fonts.googleapis.com/css?family=Architects+Daughter|Patrick+Hand');
:focus { outline: 0 none transparent; }
.sombraMedia { box-shadow: 0 0 10px 1px rgba(0,0,0,0.2); }
.txt1  { font: 1.5rem 'Patrick Hand', cursive; }
.txt2  { font: 1.5rem 'Architects Daughter', sans-serif; }
.txt-S { font-size: 80%; }
.txt-M { font-size: 130%; }
.txt-L { font-size: 180%; }
.txt-w { 
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    background-color: rgba(0,0,0,0.3);
    padding: 1em;
}
.txt-k { color: #000; }

/** Tablas de precios */
#tb1, .tb {
  max-width        : 100vw;
  width            : 85%;
  margin           : 3em auto;
  border-spacing   : 2px;
  empty-cells      : hide;
  padding          : 0.1em;
  position         : relative;
  background-color : hsla(31, 95%, 64%, 0.3);
  box-shadow: 0 16px 10px -8px hsla(0, 0%, 20%, 0.3);
  color: #333;
  font: 1em "Merienda", sans-serif;
  /* table-layout     : fixed; */
}
#tb1 td,#tb1 th, .tb td,.tb th  { 
  padding: 0.5em 1em;
  border: 1px solid rgba(255,255,255,0.8);
}
#tb1 td, .tb td { text-align: right; }
#tb1 tr > td:nth-child(1) { text-align: left; }
.tb tr > td:nth-child(1) { text-align: left; }
#tb1 th, .tb th {
  background-color : hsla(31, 95%, 64%, 1);  
  color            : #000;
  padding          : 0.5em;
}
#tb1 tr:nth-child(2n+1) { background-color: hsla(25, 100%, 24%, 0.1); }
.tb tr:nth-child(2n+1) { background-color: hsla(25, 100%, 24%, 0.1); }
#tb1 tr:nth-child(2n) { background-color: hsla(25, 100%, 24%, 0.05); }
.tb tr:nth-child(2n) { background-color: hsla(25, 100%, 24%, 0.05); }
#tb1 tr:hover { background-color: hsla(0, 100%, 100%, 0.5); }
.tb tr:hover { background-color: hsla(0, 100%, 100%, 0.5); }

#tb1::after, .tb::after {
  content          : "";
  position         : absolute;
  top              : -30px; left: 10px;
  border           : 18px solid hsla(31, 95%, 64%, 1);
  border-top-color : transparent;
}

.tb2{
  background-color : hsla(79, 23%, 64%, 0.3);
}
.tb2 th {
  background-color : hsla(82, 9%, 50%, 1);  
  color            : #fff;
}
.tb2::after {
  content          : "";
  border           : 18px solid hsla(82, 9%, 50%, 1);
  border-top-color : transparent;
}

.reservas {
  font-size: 2em;
  line-height: 1.2em;
}
.blink { animation: parpadeo 4s infinite steps(8); color: red; }
@keyframes parpadeo { 50% {visibility: hidden; } }


/** ==============================================   
 *    ELEMENTOS RESPONSIVE DESING  ///////////////
 *  ============================================== */

/**
 *  OBJETOS (obj) FULL-WIDTH (ANCHO 100% DEL NAVEGADOR) DESDE HTML
 *  1) Ejemplo con una imagen como banner
 *        <div class="full-box">
 *            <img src="img/wpp1_13.jpg" class="full-obj">
 *        </div>
 *  2) Ejemplo con un mapa de Google-Maps
 *        <div class="full-box">
 *          <iframe class="full-img" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d68724.23825770643!2d-3.7231663634384162!3d40.426328001427194!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1486287754960" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
 *        </div>
 */
.full-box {
  position       : relative;
  height         : 0;
  padding-bottom : 25%;     /* alto de objeto */
  overflow       : hidden;
  margin         : 2% auto;
}
.full-obj {
  width             : 100%;
  background-size   : cover;
  background-repeat : no-repeat;
}

/**
 * OBJETOS (media) RESPONSIVE: videos, mapas, páginas, onDrive, Drive,...
 * 1) Ejemplo con video de Youtube 16:9
 *      <div class="media-16_9">
 *          <iframe width="560" height="315" src="https://www.youtube.com/embed/v64KOxKVLVg" frameborder="0" allowfullscreen></iframe>
 *      </div>
 * 2) Ejemplo con video de Vimeo 16:9
 *      <div class="media-16_9">
 *          <iframe src="https://player.vimeo.com/video/36296951" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
 *      </div>
 * 3) Ejemplo con mapa de Google-Maps 4:3
 *      <div class="media-16_9 media-4_3">
 *          <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d68724.23825770643!2d-3.7231663634384162!3d40.426328001427194!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2ses!4v1486287754960" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
 *      </div>
 * NOTA: Estos ejemplos se adaptarán al tamaño de su contenedor, por ejemplo:
 *        <div class="item-flo-2_4"> (aquí poner ejemplo) </div>
 *        <div class="fila-flo ancho-full"> (aquí poner ejemplo) </div>
 *        <div class="fila-flo ancho-fix"> (aquí poner ejemplo) </div>
 */
.media-16_9 {
  position  : relative;
  height    : 0;
  max-width : 85%;
  overflow  : hidden;
  margin    : 0 auto;
}
.media-16_9 { padding-bottom : 56.25%; }
/** si seguidamente añadimos esta sera 4:3; */
.media-4_3  { padding-bottom : 75%;    }

.media-16_9 iframe,
.media-16_9 object,
.media-16_9 embed,
.media-16_9 video {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
}

/*=====  End custom class =========================*/

.eti-pvp-1,.eti-pvp-2,.eti-pvp-3 {
  padding: 0.01em 0.5em 0.02em 0.5em;
  position: relative;
  margin-left: 1.5em;
  box-shadow: 1px 1px 0 hsla(0, 0%, 0%, 0.2);
  color: #fff;
}
.eti-pvp-1::before,.eti-pvp-2::before,.eti-pvp-3::before {
  content:"";
  position: absolute;
  top: 0; left: -1.8em;
  width: 0; height: 0;
  border: 0.8em solid transparent;
}

.eti-pvp-1 {background: hsla(0, 80%, 40%, 0.6); }
.eti-pvp-1::before { border-right-color: hsla(0, 100%, 50%, 0.7); }
.eti-pvp-2 {background: hsla(30, 80%, 40%, 0.6); }
.eti-pvp-2::before { border-right-color: hsla(30, 100%, 50%, 0.7); }
.eti-pvp-3 {background: hsla(120, 80%, 40%, 0.6); }
.eti-pvp-3::before { border-right-color: hsla(120, 100%, 50%, 0.7); }

p,ul {
  margin: 25px 50px;  
}
td p, td ul { margin: 0; }


blockquote p {
  font: 1rem 'Merienda', serif;
  line-height: 1.5;
  margin: 25px 50px;
}
.cerrado {
    background-color: rgba(255, 0, 0, 0.5);
    color: #fff;
    text-transform: uppercase;
    padding: 0 10px;
    border-radius: 4px;
    box-shadow: 0.5px 0.5px 1px 0 rgba(0,0,0,0.7);
}
li, dt, dd {
    line-height: 30px;
}
.trans {
    display: inline-block;
    opacity: 0.7;
}
.trans:hover {
    opacity: 1;
    cursor: pointer;
}
a.resalta {
    color: #fff;
    border-bottom: 1px dashed #e1e1e1;
    display: inline-block;
    transition: all 0.2s ease-in-out;
}
a.resalta:hover{
    border-bottom: 1px solid #ff0; 
    transform: translateY(-4px);    
}
.rota:hover{
}
/*===================================================
=            Modifications of the template          =
===================================================*/

.uk-article-title, h1, h2, h3, h4, h5, h6 {
  text-transform: none;
}

[class^="icon-"], [class*=" icon-"] {
    margin: 0 0.5em;
    width: 16px;
}

.tm-navbar {
    padding: 1em 0 1em 1em;
}
.uk-navbar {
    background-color: rgba(242,152, 0, 0.3);
    background-image: url(cabecera1.png);
    background-size: cover;
    background-repeat: no-repeat;
}
.uk-navbar-nav > li > a {
    color: #fff;
    text-shadow: 0 1px 1px #000;
    height: 48px;
    line-height: 48px;
    transition: all 0.2s ease-in-out;
}
.uk-navbar-nav > li {
    background: rgba(128, 64, 0, 0.5);
    margin: 0 4px;
}
.uk-navbar-nav > li.uk-active > a {
    background-color: rgba(128, 64, 0, 0.5);
    color: hsla(60, 51%, 75%, 1);
}
.uk-navbar-nav > li:hover > a, .uk-navbar-nav > li > a:focus, .uk-navbar-nav > li.uk-open > a {
    background-color: rgba(128, 64, 0, 0.6);
    color: hsla(60, 51%, 75%, 1);
    box-shadow: 0 0 2px 1px rgba(255,255,255,0.8);
}
.uk-nav-navbar > li > a:hover, .uk-nav-navbar > li > a:focus {
    background: rgba(0, 0, 0, 0.05);
    color: hsla(35, 100%, 35%, 1);
}

.uk-pagination > li > a, .uk-pagination > li > span, .uk-button {
  text-transform: none;  
}
ul.uk-nav-sub {
    padding: 5px 0 5px 10px;
}

.uk-overlay-panel .uk-margin {
    margin: 8em 0 0 0;
}

article.uk-article img {
  margin-left: auto;
  margin-right: auto;  
}
.uk-navbar-toggle::after {
    color: #fff;
    text-shadow: 0 1px 1px #000;
    font-size: 1.3em;
}
/*=====  End Modifications of the template  ======*/