* {
    box-sizing: border-box;
    font-family: "Lucida Sans", sans-serif;
    font-size: 18px;
  }
  
.row::after {
    content: "";
    clear: both;
    display: table;
}
  
[class*="col-"] {
    float: left;
    padding: 0px;
}
  
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

/*IMAGENES*/
img {
    width: 100%;
    height: auto;
}

h1 {font-family: Arial 24px;}

#menu ul {
    list-style-type: none;
    padding: 10px;
    margin: 0;
    overflow: hidden;
    background-color:LightGray; 
    border-top-color:red;
    border-top-style:solid;
    border-top-width: 5;
}
    
#menu li {
    font: verdana, sans-serif;
    font-weight: bold;
}

#menu li a, .normal {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

#menu li a:hover {
    background-color:gray;
    color: white;
    border-color:lightgray;
    border-style:solid;
    border-width: 5;
}  
#menu li a, .dropbtn {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

#menu li a:hover, .dropdown:hover .dropbtn {
    background-color: gray;
}
  
#menu li .dropdown {
    display: block;
}
  
#menu li .dropdown-content {
    display: none;
    position: absolute;
    background-color: lightgray;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    /*width:75%;*/
}
  
#menu li .dropdown-content a {
    color: black;
    font-weight: normal;
    padding: 10px;
    text-decoration: none;
    display: block;
    text-align: center;
}
  
  #menu  .dropdown-content a:hover {background-color: gray;}
  
  #menu  .dropdown:hover .dropdown-content {
    display: block;
  }

  #section {
    float: left;
    margin: 0px;
    padding-top:0px;
    padding-left:10px;
    padding-right: 10px;
  }
 
  /* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}
#pie {
  clear: both;
  text-align: center;
  padding: 15px;
  border-top: 2px solid #999999;
  font: italic sans-serif;
  }
  #columna {
    list-style-type: none;
    float: left;
    /*width: 210px;*/
    margin: 0px 0px 0px;
    padding-top:0px;
    padding-left: 10px;
    padding-right:0px;
    background: lightgray; 
    border-left-color:red;
    border-left-width: 0px;
    border-left-style:solid;
    height: 100%;
  }
  
  #columna ul {
  list-style-type: none;
  padding: 0px;
  margin: 0;
  overflow: hidden;
  }
  
  #columna li {
    width: 90%;
    margin: 0px 0px 0px;
    padding-top:5px;
    padding-left: 10px;
    padding-right:0px;
    padding-bottom: 5px;
    background: darkgray; 
    border-color:lightgray;
    border-width: 5px;
    border-style:solid;
    border-radius: 25px;	
    float:left;
    font: italic bold 14px cambria, verdana, sans-serif;
    position:relative;
  }
  
  #columna li a, .normal {
  display:block;
  color: black;
  text-align: center;
  padding: 5px ;
  text-decoration: none;
  }
  
  #columna li a:hover {
  color: red;
  } 
/* Style the tab */
.tab {
  float: left;
  width: 10%;
  height: 430px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  display: block;
  color: black;
  padding: 18px 10px;
  width: 100%;
  height: 150px;
  border: none;
  outline: none;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  font-size: 30px;
  font-weight: bold;
}
/* Style the tab Titol */
.tabtitol {
  float: left;
  padding: 5px 5px 5px 5px;
  width: 90%;
  height: 125px;
  font-size: 30px;
  font-weight: bold;
}
/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  width: 90%;
  margin-bottom: 30px;
}
.tooltip {
  display: none;
  width: 150px;
  background-color:rgba(0,0,0,0.4);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-size: small;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
.tab button:hover span.tooltip{
  display: block;
}
/* Tabla horario */
.tblhorario {
  float:block;
  text-align: center;
  border:1px solid black;
  border-collapse: separate;
  border-spacing: 10px;  
  background: #5a9aee;
  width: 100%;
  /*column-width: fixed;*/
}

.TitFil{
  text-align: center;
  Vertical-align: center;
  height: 10%;
  color: white;
  font-weight: bold;
}
.TitCol{
  text-align:center;
  color: white;
  font-weight: bold;
}

.CldHr{
border: none;
background-color: white;
text-align:center;
vertical-align:center;
width: 17%;
height: 3em;
font-weight: bold;
font-size:larger;
}

.CldDoc{
border: none;
background-color: white;
text-align:left;
vertical-align:center;
width: 80%;
margin-left:10px;
}

.CldDown{
border: none;
background-color: #5a9aee;
text-align:center;
vertical-align:center;
width: 50px;
text-decoration: none;
}

.tooltipnd {
display: none;
width: 150px;
background-color: #F75D36;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
font-size: small;
/* Position the tooltip */
position: absolute;
z-index: 1;
}

.CldHr:hover span.tooltipnd{
display: block;
}

.tab button:hover span.tooltipnd{
display: block;
}
.tooltip {
  display: none;
  width: 150px;
  background-color:rgba(0,0,0,0.4);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  font-size: small;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.CldHr:hover span.tooltip{
  display: block;
}

.tab button:hover span.tooltip{
  display: block;
}

.CldHr:hover {
  background-color: gold;
  cursor: pointer;
}
/* mensaje emergente */
.mensaje {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Contenido del mensaje */
.mensaje-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
}

/* Boton de cierre */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}




  .cookies {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10%;
    background: rgb(83, 85, 83);
    color: white;
    font-family: arial;
    text-align: center;
    opacity: 0.8;
  }
  
  .cookies__boton {
    background: whitesmoke;
    border: 2px solid white;
    padding: 5%;
    color: black;
    width: 30%;
    text-align: center;
  }
  .BoxTip{
    position: relative;
    display: inline-block;
  }

 .BoxTip .TexTip {
  /*visibility: hidden;*/
  position: absolute;
  display: inline-block;
  background-color: #ffefd5;
  color: blue;
  text-align: left;
  border-style: solid;
  border-width: 5px;
  border-color: gray;
  border-radius: 10px;
  padding: 10px;
  font: italic 12px Brush Script, verdana, sans-serif;
  /*left: 50px; 
  top: -500px;*/
  width:450px;
  height:350px;
  z-index: 1;
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
   /* #menu li a {display: inline;}
    #menu li {float: left;}*/
    * {font-size: 18px;}
    h1 {font-family: Arial 24px;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    * {font-size: 14px;}
    h1 {font-family: Arial 24px;}
    #menu li a {display:inline;}
    #menu li {float: left;}
    .cookies__boton {font-size: 32px;}
  }