@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;
  }
  .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(70,96,43,1);
    -webkit-transition: fill 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    transition: fill 0.5s cubic-bezier(0.7, 0, 0.3, 1);
  }
  .menu.menu--open .morph-shape svg path {
  	fill: rgba(70,96,43,0.7);
  }