@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

  .navbar {
    display: block;
    overflow: hidden;
  }
  
  .navbar a {
    color: #5c5c5c;
    text-align: right;
    margin-left: 15px;
    font-size: 15px;
    z-index:2;
  }

  .navbar a:hover {
    font-weight: bold;
    color: rgb(0, 109, 5);
  }

  .content {
      color: #a2a2a2;
      background-color: #FFF;
      height: auto;
      box-shadow: 5px 10px 18px #888888;
  }

  .container {
      background-color: #f2f2f2;
  }
  .sidebar-outer {
      margin-top: 0px;
      position: relative;
  }
  .fixed {
      position: fixed;
  }
  .active {
    background-color: #e0ebeb;
    color: #333;
  }

  .an {
    float: left;
    font-size: 200%;
    font-family: algerian, courier;
  }

.caja {
  background-color: #FFF;
  height: auto;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 5px 5px 5px gray;
  border: 1px solid Gainsboro;
  
}

.caja-tit {
padding: 10px 5px 10px 5px;
min-height: 100px;
background-color: white;
border: 10px solid gray;
border-radius: 15px;
}

.caja-tit2 {
padding: 10px 3px 10px 3px;
min-height: 100px;
background-color: white;
border-radius: 5px;
}

.texto-tit {
font-family: Impact;
color: #fff;
padding: 10px 20px 10px 20px;
font-weight: bold;
font-family: Helvetica;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1),
              0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25),
              0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

  .botonimg{
    float: right;
    display: block;
    color: #fff;
    background-color: #0059FF;
    text-align: center;
    padding: 10px 10px;
    text-decoration: none;
    font-size: 15px;
    border-radius: 2px;
    border: 2px solid #808080;
  }
  .botonimg:hover{
    background-color: #339CFF;
  }

  /*--------------------------------------------------------------
  # Back to top button
  --------------------------------------------------------------*/
  
   #toTop {
      position: fixed;
      bottom: 5px;
      right: 10px;
      cursor: pointer;
      display: none;
      z-index: 999999;
    }

    .tooltiptable{
      position:relative;
    }

    .titletable{
      display:none;
      position:absolute; 
      z-index:100;
      border-radius:10px;
      background-color:black;
      border-style:solid;
      padding:4px 8px 6px 8px;
      color:white; 
      top:-25px; 
      left:-10px;
    }

    .tooltiptable:hover span.titletable{
      display:block;
    }

    .fade-in-up{
      animation: fadeInUp 1s ease forwards;
      }

      @keyframes fadeInUp{
      from{
      opacity:0;
      transform: translateY(40px);
      }
      to{
      opacity:1;
      transform: translateY(0);
      }
    }