/*@import url(http://weloveiconfonts.com/api/?family=entypo);*/
@import url(http://fonts.googleapis.com/css?family=ABeeZee);
/* entypo */

/*@font-face {
  font-family: 'botonera';
  src: url('../font/botonera.eot?56193592');
  src: url('../font/botonera.eot?56193592#iefix') format('embedded-opentype'),
       url('../font/botonera.woff?56193592') format('woff'),
       url('../font/botonera.ttf?56193592') format('truetype'),
       url('../font/botonera.svg?56193592#botonera') format('svg');
  font-weight: normal;
  font-style: normal;
}*/
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'botonera';
    src: url('../font/botonera.svg?78857338#botonera') format('svg');
  }
}
*/
 
 
.pisos-icon{
  font-size: 16px;
  margin-left: -20px;
  color: white;
}

.pisos-icon-primero{
  font-size: 23px;
  margin-left: -14px;
  color: white;
}

.piso-active{
  color: #FFAB3E;
}

.botonera-right{
  position: absolute;
  right: 0px;
  top: 80px;
}

.bg{
  border: 1px solid #ccc;
  background-color: #E8E8E8;
}

.nav-list {
  list-style: none;
}

.nav-item {
  position: relative;
  perspective: 1000px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #b1b1b1;
  padding: 10px;
}

.nav-item:first-child{
  border-top: none;
}

.nav-item:last-child{
  border-bottom: none;
}

.nav-item:hover {
  cursor: pointer;
}

.nav-label,
.nav-icon {
  line-height: 3.5rem;
  color: #333;
}

.nav-label {
  display: inline-block;
  position: absolute;
  right: 73px;
  top: 20px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  transform-origin: 0% 50%;
  padding-left: 1rem;
  opacity: 0;
  visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  font-family: ABeeZee;
  background: #E8E8E8;
  text-align: center;
}

.nav-item:hover .nav-label {
  visibility: visible;
  opacity: 1;
  width: 175px;
  animation-name: swing;
  animation-duration: 1s;
  animation-timing-function: ease;
}

.bg-icon{
  padding: 6px;
  border-radius: 50%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d3d3d3+0,f9f9f9+100 */
  background: #d3d3d3; /* Old browsers */
  background: -moz-linear-gradient(top, #d3d3d3 0%, #f9f9f9 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#f9f9f9)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #d3d3d3 0%,#f9f9f9 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #d3d3d3 0%,#f9f9f9 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #d3d3d3 0%,#f9f9f9 100%); /* IE10+ */
  background: linear-gradient(to bottom, #d3d3d3 0%,#f9f9f9 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3', endColorstr='#f9f9f9',GradientType=0 ); /* IE6-9 */
}

.nav-icon {
  box-shadow: 0 2px 2px #aaa;
  display: inline-block;
  padding: 0;
  line-height: 40px !important;
  width: 40px;
  font-size: 20px;
  height: 40px;
  text-align: center;
  border-radius: 50%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9f9f9+0,d0d0d0+100 */
  background: #f9f9f9; /* Old browsers */
  background: -moz-linear-gradient(top, #f9f9f9 0%, #d0d0d0 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#d0d0d0)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f9f9f9 0%,#d0d0d0 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #f9f9f9 0%,#d0d0d0 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #f9f9f9 0%,#d0d0d0 100%); /* IE10+ */
  background: linear-gradient(to bottom, #f9f9f9 0%,#d0d0d0 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#d0d0d0',GradientType=0 ); /* IE6-9 */
}

.nav-icon-inactive{
  color: white;
}

@keyframes swing {
  
  0% {
    transform: rotateY(-90deg);
  }
  
  30% {
    transform: rotateY(35deg);
  }
  
  65% {
    transform: rotateY(-10deg);
  }
  
  100% {
    transform: rotateY(0deg);
  }
  
}