body{
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
}

@media only screen and (max-width: 360px) {
  #reloj{
    padding:0!important;
    padding-top:20px;padding-bottom:20vh;
  }
    .clock { margin: 0 auto; display: block; width: 100%; }

    .flip-clock-wrapper ul { height: 35px; line-height: 35px; margin:2px; width: 24px !important;}
    .flip-clock-wrapper ul li a div.up:after { top: 16px; }
    .flip { width: 24px !important; }
    .flip-clock-divider { height: 35px; width: 10px !important;}
    .flip-clock-dot { height: 4px; width: 4px; left: 2px !important;}
    .flip-clock-dot.top { top: 12px; }
    .flip-clock-dot.bottom { bottom: 6px; }

    .flip-clock-divider .flip-clock-label { font-size: 11px !important; }
    .flip-clock-divider.days .flip-clock-label { right: -42px !important; }
    .flip-clock-divider.hours .flip-clock-label { right: -42px !important; }
    .flip-clock-divider.minutes .flip-clock-label { right: -48px !important; }
    .flip-clock-divider.seconds .flip-clock-label { right: -50px !important; }
    .flip-clock-wrapper ul li { line-height: 35px; }
    .flip-clock-wrapper ul { width: 24px !important; }
    .flip-clock-wrapper ul li a div div.inn { font-size: 21px; }
}

@media only screen and (min-width: 361px) and (max-width: 480px) {
    .clock { margin: 0 auto; display: block; width: 100%; }

    .flip-clock-wrapper ul { height: 35px; line-height: 35px; margin:2px; width: 30px !important;}
    .flip-clock-wrapper ul li a div.up:after { top: 16px; }
    .flip { width: 30px; }
    .flip-clock-divider { height: 35px; width: 15px;}
    .flip-clock-dot { height: 4px; width: 4px; left: 4px !important;}
    .flip-clock-dot.top { top: 12px; }
    .flip-clock-dot.bottom { bottom: 6px; }

    .flip-clock-divider .flip-clock-label { font-size: 11px !important; }
    .flip-clock-divider.days .flip-clock-label { right: -46px !important; }
    .flip-clock-divider.hours .flip-clock-label { right: -46px !important; }
    .flip-clock-divider.minutes .flip-clock-label { right: -55px !important; }
    .flip-clock-divider.seconds .flip-clock-label { right: -55px !important; }
    .flip-clock-wrapper ul li { line-height: 35px; }
    .flip-clock-wrapper ul { width: 26px; }
    .flip-clock-wrapper ul li a div div.inn { font-size: 21px; }
}

@media screen and (min-width: 481px) and (max-width: 767px) {
    .clock { margin: 0 auto; display: block; width: 100%; }

    .flip-clock-wrapper ul { height: 50px; line-height: 50px; }
    .flip-clock-wrapper ul li a div.up:after { top: 24px; }
    .flip-clock-divider { height: 50px; }
    .flip-clock-dot { height: 6px; width: 6px; left: 7px;}
    .flip-clock-dot.top { top: 17px; }
    .flip-clock-dot.bottom { bottom: 8px; }

    .flip-clock-divider .flip-clock-label { font-size: 11px; }
    .flip-clock-divider.days .flip-clock-label { right: -58px; }
    .flip-clock-divider.hours .flip-clock-label { right: -58px; }
    .flip-clock-divider.minutes .flip-clock-label { right: -64px; }
    .flip-clock-divider.seconds .flip-clock-label { right: -64px; }
    .flip-clock-wrapper ul li { line-height: 50px; }
    .flip-clock-wrapper ul { width: 37px; }
    .flip-clock-wrapper ul li a div div.inn { font-size: 30px; }
}

#loading{
  position:fixed;
  width:100%;height:100%;
  background-color:rgba(255,255,255,0.8);
  top:0;left:0;
  z-index:200;
}
#loading img{
  position:absolute;
  margin-top:45%;
  margin-left:45%;
}
@media screen and (max-width: 700px){
  #loading img{
    margin-left:25%;
  }
}


#barradenavegacion{
  position:fixed;
  background-color: #e3e3e3;
  z-index:99;
  border-bottom:1px solid #00ffff;
}
.nav-item .btn{
  margin-left:5px;
}

.logositio{
  margin-bottom:-40px;
  width:60px;height:auto;
}
@media screen and (max-width: 700px){
    .nav-item .btn{
      margin-left:0px;
      margin-top:10px;
    }
    .navbar-brand{
      float:right;
      margin-top:-40px;
    }
     .logositio{
         float:right;
         width:40px;
         }
    }
.titulopagina{
  font-size:500;
  border-bottom:1px solid #222;
  margin-bottom:5vh;
}


#header{
  margin-top:10vh;
  margin-bottom:5vh;
}


#pie{
  background-color:#e3e3e3;
  color:#222;
  padding-top:2vh;padding-bottom:2vh;
  margin-top:15vh;
}

#pie h6 a{
  color:#f1f1f1;
}
.logofooter{
  width:400px;height:auto;
  margin-top:-130px;
}
@media screen and (max-width: 700px){
     .logofooter{
         width:70vw;
         margin-top:-70px;
         }
    }
#pie .imagenpatrocinadores{
  width:300px;height:auto;margin-top:30px;
}