* {
  margin: 0;
}



.ws-flotante {
  position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
  right: 0px; /* Establecemos la barra en la derecha */
  top: 24.5%; /* Bajamos la barra 200px de arriba a abajo */
  z-index: 20000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
  display:block;
}

.ws-flotante a {
  color:#000;
  text-decoration: none;
}

.ws-flotante a img {
  width:80px;
  max-width: 100%;
  max-height: 100%;
  opacity:1;
  margin-bottom:0rem;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.ws-flotante a img:hover {
  opacity:0.85;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}




.bb-flotante {
  position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
  right: 0px; /* Establecemos la barra en la derecha */
  top: 40.5%; /* Bajamos la barra 200px de arriba a abajo */
  z-index: 20000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
  display:block;
}

.bb-flotante a {
  color:#000;
  text-decoration: none;
}

.bb-flotante a img {
  width:150px;
  max-width: 100%;
  max-height: 100%;
  opacity:1;
  margin-bottom:0rem;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.bb-flotante a img:hover {
  opacity:0.85;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}



.slider {
  position: relative;
  height: 100vh;
  width: 100%;
}

.slider-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
  z-index: 0;
}

.slider-panel {
  position: absolute;
  bottom: 0;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  color: rgba(255, 255, 255, 0.7);
  z-index: 20;
}

.slider-panel__navigation {
  margin: 0 auto;
  padding: 10px;
  width: 70%;
  text-align: center;
}

.slider-panel__navigation i {
  margin: 0 3%;
  font-size: 15px;
}

.slider-panel__navigation i:hover, .slider-panel__navigation i:active {
  color: white;
  cursor: pointer;
}

.slider-panel__controls {
  margin: 0 auto;
  padding: 10px;
  width: 70%;
  text-align: center;
}

.slider-panel__controls i {
  margin: 0 4%;
  font-size: 40px;
}

.slider-panel__controls i:hover, .slider-panel__controls i:active {
  color: white;
  cursor: pointer;
}

.active {
  z-index: 10;
  -webkit-animation: 0.2s blur ease-in;
          animation: 0.2s blur ease-in;
}



.social-nav {
  position:absolute;
  top: 0px;
  left: 40px;
  z-index: 100;
}
.social-nav ul {margin: 0; padding:0;}
.social-nav ul li{
  list-style: none;
  display: block;
  float: left;
  padding: 30px 10px 5px 10px;
  margin: 1px;
  opacity: .5;
  background-color: #047B91;
}
.social-nav ul li:hover {opacity: 1;}

.i_button{
  margin-top:3px;
  width:100px;
  height:25px;
  background-color:#CCC;
  color:#000;
}



@-webkit-keyframes circle {
  0% {
    -webkit-clip-path: circle(75%);
            clip-path: circle(75%);
  }
  100% {
    -webkit-clip-path: circle(0%);
            clip-path: circle(0%);
  }
}

@keyframes circle {
  0% {
    -webkit-clip-path: circle(75%);
            clip-path: circle(75%);
  }
  100% {
    -webkit-clip-path: circle(0%);
            clip-path: circle(0%);
  }
}

@-webkit-keyframes blur {
  0% {
    -webkit-filter: blur(10px);
            filter: blur(10px);
  }
  100% {
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}

@keyframes blur {
  0% {
    -webkit-filter: blur(10px);
            filter: blur(10px);
  }
  100% {
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}