@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400&display=swap');

  body {
      margin: 0px;
      background-image: url("../imagenes/FondoPrincipal.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      background-color: #ffffff;
      font-family: 'Montserrat', sans-serif;
      overflow-x: hidden;
  }
  .swirl-in-fwd {
      -webkit-animation: swirl-in-fwd 0.6s ease-out both;
              animation: swirl-in-fwd 0.6s ease-out both;
  }
  @-webkit-keyframes swirl-in-fwd {
    0% {
      -webkit-transform: rotate(-540deg) scale(0);
              transform: rotate(-540deg) scale(0);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotate(0) scale(1);
              transform: rotate(0) scale(1);
      opacity: 1;
    }
  }
  @keyframes swirl-in-fwd {
    0% {
      -webkit-transform: rotate(-540deg) scale(0);
              transform: rotate(-540deg) scale(0);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotate(0) scale(1);
              transform: rotate(0) scale(1);
      opacity: 1;
    }
  }
  .GranTitulo {
      font-size: 14px;
      color: #000;
      font-family: 'Montserrat', sans-serif;
      text-decoration: none;
  }
  .RotateMenu {
      -webkit-transition: -webkit-transform 0.5s ease-out;
      -moz-transition: -moz-transform 0.5s ease-out;
      transition: transform 0.5s ease-out;
      border-radius: 55px;
      font-size: 2em;
      border:2px solid #000;
      background: rgba(255,255,255,.2);
      padding: 15px;     
      color: #000;  
  }
  .RotateMenu:hover {
       -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
       transform: rotate(45deg);       
  }    


  .menu {
    width: 300px;
    height: 70px;
    margin: 2em auto;
    position: relative;
    text-align: left;
    cursor: pointer;
    z-index: 100;
  }
  .menu__label {
    display: block;
    background: none;
    border: none;
    width: 100%;
    height: 70px;
    padding: 0 1.25em;
    font-size: 1.3em;
    color: #fff;
    position: relative;
    outline: none;
    text-align: left;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */
  }

  .menu__inner li a span,
  .menu__label span {
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 300;
  }

  .menu .fa {
    vertical-align: top;
    line-height: 1.25;
    margin-right: 0.65em;
    font-size: 1.15em;
  }

  .menu__inner {
    list-style: none;
    padding: 0 1.25em;
    font-size: 2em;
    color: white;
    margin: 0;
    position: absolute;
    overflow: hidden;
    height: 0;
    font-weight: 100;

    -webkit-transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
  }

  .menu.menu--open .menu__inner {
    height: 310px;
  }

  .menu__inner li a {
    display: block;
    padding: 0.53em 0;
    line-height: 1.2;
    opacity: 0;
    color: rgba(0,0,0,.25);
    text-decoration: none;
    pointer-events: none;
    outline: none;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
  }

  .menu__inner li a:hover {
    color: rgba(0,0,0,.75);
  }

  .menu--open .menu__inner li a {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .menu--open .menu__inner li:nth-child(2) a {
    -webkit-transition-delay: 0.04s;
    transition-delay: 0.04s;
  }

  .menu--open .menu__inner li:nth-child(3) a {
    -webkit-transition-delay: 0.08s;
    transition-delay: 0.08s;
  }

  .menu--open .menu__inner li:nth-child(4) a {
    -webkit-transition-delay: 0.12s;
    transition-delay: 0.12s;
  }

  .menu--open .menu__inner li:nth-child(5) a {
    -webkit-transition-delay: 0.16s;
    transition-delay: 0.16s;
  }

  .menu--open .menu__inner li:nth-child(6) a {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
  }

  .morph-shape,
  .morph-shape svg {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
  }

  .morph-shape {
    height: 70px;
    -webkit-transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    transition: height 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    overflow: visible;
  }

  .morph-shape svg {
    height: 100%;
    overflow: visible;
  }

  .menu.menu--open .morph-shape {
    height: 500px;
  }

  .morph-shape svg path {
    fill: rgba(32,80,154,1);
    -webkit-transition: fill 0.5s cubic-bezier(32,80,154, 1);
    transition: fill 0.5s cubic-bezier(32,80,154, 1);
  }
  .menu.menu--open .morph-shape svg path {
    fill: rgba(32,80,154,0.7);
  }