/*Nav bar*/

nav {
    display: block;
    position: fixed;
    z-index: 1;
    width: 500px;
    height: 500px;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-transform: translate3d(25px, -25px, 0);
            transform: translate3d(25px, -25px, 0);
    transition: -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
    transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
    transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
  }
  nav.open {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  
  .disc {
    position: absolute;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    line-height: 40px;
    padding-top: 10px;
    border-radius: 250px;
    -webkit-transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 0, 1, 190deg);
            transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 0, 1, 190deg);
    pointer-events: none;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
    transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), opacity 0.5s;
    transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
  }
  
  .disc div {
    -webkit-transform: rotate(170deg);
            transform: rotate(170deg);
    color: #ffffff;
    font-family: Variable;
    font-size: 16px;
    font-weight: 900;
  }
  .open .disc {
    pointer-events: auto;
    opacity: 1;
  }
  
  .l1 {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #f46438;
    transition-delay: 0s;
  }
  .open .l1 {
    transition-delay: 0s;
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
            transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
    opacity: 1;
  }
  .open .l1:hover {
    color: #f46438;
    transition-delay: 0s;
  }
  .open .l1:active {
    color: #f46438;
  }
  .open .l1.toggle {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
            transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
  }

  .carta-tit{width: 190px;}
  
  .l2 {
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    background: #ff7a39;
    transition-delay: 0.1s;
  }
  .open .l2 {
    transition-delay: 0.1s;
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
            transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
    opacity: 1;
  }
  .open .l2:hover {
    color: #f78d31;
    transition-delay: 0s;
  }
  .open .l2:active {
    color: #f78d31;
  }
  .open .l2.toggle {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
            transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
  }

  .reconocimientos-tit{width: 156px;}
  
  .l3 {
    top: 100px;
    left: 100px;
    right: 100px;
    bottom: 100px;
    background: #f4a019;
    transition-delay: 0.2s;
  }
  .open .l3 {
    transition-delay: 0.2s;
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
            transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
    opacity: 1;
  }
  .open .l3:hover {
    color: #f4a019;
    transition-delay: 0s;
  }
  .open .l3:active {
    color: #f4a019;
  }
  .open .l3.toggle {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
            transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
  }

  .cifras-tit{width: 112px;}
  
  .l4 {
    top: 150px;
    left: 150px;
    right: 150px;
    bottom: 150px;
    background: #ffc72c;
    transition-delay: 0.3s;
  }
  .open .l4 {
    transition-delay: 0.3s;
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
            transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
    opacity: 1;
  }
  .open .l4:hover {
    color: #ffc72c;
    transition-delay: 0s;
  }
  .open .l4:active {
    color: #ffc72c;
  }
  .open .l4.toggle {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
            transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
  }

  .capitulos-tit{width: 93px;}
  
  .l5 {
    top: 224px;
    left: 224px;
    right: 200px;
    bottom: 200px;
    background: #ffa300;
    transition-delay: 0.4s;
  }
  .open .l5 {
    transition-delay: 0.4s;
    -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
            transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
    opacity: 1;
  }
  .open .l5:hover {
    color: #ffa300;
    transition-delay: 0s;
  }
  .open .l5:active {
    color: #ffa300;
  }
  .open .l5.toggle {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
            transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
  }
  
  .toggle {
  
    line-height: 50px;
    padding: 0;
    width: 50px;
    height: 50px;
    background: #f3923d;
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    pointer-events: auto;
    transition-delay: 0s;
  }
  
  .toggle:hover{box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1); -ms-transform: translateY(-3px); -webkit-transform: translateY(-3px); transform: translateY(-3px);}
  
  .toggle svg{color: #ffffff;}
  
  .open .toggle {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
  .toggle:hover {
  }
  .toggle:active {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    transition-duration: 0s;
  }

  .disc div:hover{
    color: #6d6e71;
    transition: 0.3s;
  }
  /*Fin nav bar*/