/*
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
    
}

*/

.absolute-center, .menu, .menu .btn .fa, .menu .btn.trigger .line, .menu .btn.trigger1 .line, .menu .btn.trigger2 .line {
  position: relative; 
  top: 60%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}

.menu {
  width: 5em;
  height: 5em;
    top:10px;
    padding-top: 20px;

}

#boton1 {
   
  margin: 0px 0px 0px -20% ; 
/*    padding-top: 0px;*/
    float: left;
}


#boton2 {
  margin: 80px 0px 0px 20% ; 

    float: left;
    
}
.menu .btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
/*  background: rgba(255, 255, 255, 0.15);*/
  opacity: 0;
  z-index: -10;
  cursor: pointer;
  -webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
          transition: opacity 1s, z-index 0.3s, transform 1s;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}
.menu .btn .fa {
  font-size: 1.2em;
  -webkit-transition: color 0.3s;
          transition: color 0.3s;
    margin: -15px 0px 0px 10px;
}
.menu .btn:hover .fa {
  color: rgba(255, 255, 255, 0.7);
}

.menu .btn.trigger{
  opacity: 1;
  z-index: 100;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.menu .btn.trigger1{
  opacity: 1;
  z-index: 100;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}
.menu .btn.trigger2{
  opacity: 1;
  z-index: 100;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}



 .menu .btn.trigger:hover {
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}
 .menu .btn.trigger1:hover {
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}
 .menu .btn.trigger2:hover {
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}


.menu .btn.trigger:hover .line {
  background-color: rgba(255, 255, 255, 0.7);
}
.menu .btn.trigger1:hover .line {
  background-color: rgba(255, 255, 255, 0.7);
}
.menu .btn.trigger2:hover .line {
  background-color: rgba(255, 255, 255, 0.7);
}
.menu .btn.trigger:hover .line:before, .menu .btn.trigger:hover .line:after {
  background-color: rgba(255, 255, 255, 0.7);
}   
.menu .btn.trigger1:hover .line:before, .menu .btn.trigger1:hover .line:after {
  background-color: rgba(255, 255, 255, 0.7);
} 
.menu .btn.trigger2:hover .line:before, .menu .btn.trigger2:hover .line:after {
  background-color: rgba(255, 255, 255, 0.7);
} 
.menu .btn.trigger .line {
  width: 60%;
  height: 6px;
  background: #000;
  border-radius: 6px;
  -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
          transition: background-color 0.3s, height 0.3s, top 0.3s;
}
.menu .btn.trigger1 .line {
  width: 60%;
  height: 6px;
  background: #000;
  border-radius: 6px;
  -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
          transition: background-color 0.3s, height 0.3s, top 0.3s;
}
.menu .btn.trigger2 .line {
  width: 60%;
  height: 6px;
  background: #000;
  border-radius: 6px;
  -webkit-transition: background-color 0.3s, height 0.3s, top 0.3s;
          transition: background-color 0.3s, height 0.3s, top 0.3s;
}
.menu .btn.trigger .line:before, .menu .btn.trigger .line:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 6px;
  background: #000;
  border-radius: 6px;    position: fixed;
  -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
          transition: background-color 0.3s, transform 0.3s;
}
.menu .btn.trigger1 .line:before, .menu .btn.trigger1 .line:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 6px;
  background: #000;
  border-radius: 6px;    position: fixed;
  -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
          transition: background-color 0.3s, transform 0.3s;
}
.menu .btn.trigger2 .line:before, .menu .btn.trigger2 .line:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 6px;
  background: #000;
  border-radius: 6px;    position: fixed;
  -webkit-transition: background-color 0.3s, -webkit-transform 0.3s;
          transition: background-color 0.3s, transform 0.3s;
}

.menu .btn.trigger .line:before {
  top: -12px;
  -webkit-transform-origin: 15% 100%;
      -ms-transform-origin: 15% 100%;
          transform-origin: 15% 100%;
}
.menu .btn.trigger1 .line:before {
  top: -12px;
  -webkit-transform-origin: 15% 100%;
      -ms-transform-origin: 15% 100%;
          transform-origin: 15% 100%;
}
.menu .btn.trigger2 .line:before {
  top: -12px;
  -webkit-transform-origin: 15% 100%;
      -ms-transform-origin: 15% 100%;
          transform-origin: 15% 100%;
}
.menu .btn.trigger .line:after {
  top: 12px;
  -webkit-transform-origin: 25% 30%;
      -ms-transform-origin: 25% 30%;
          transform-origin: 25% 30%;
}
.menu .btn.trigger1 .line:after {
  top: 12px;
  -webkit-transform-origin: 25% 30%;
      -ms-transform-origin: 25% 30%;
          transform-origin: 25% 30%;
}
.menu .btn.trigger2 .line:after {
  top: 12px;
  -webkit-transform-origin: 25% 30%;
      -ms-transform-origin: 25% 30%;
          transform-origin: 25% 30%;
}
.menu .rotater {
  position: absolute;
  top: 50px;
  left: 0px;    
position: fixed;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.rotater a {
    color="#040196";
}


.menu.active .btn-icon {
  opacity: 1;
  z-index: 50;
  background-image:url(imgcss/nubejum2.png);
  background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
   padding: 20px 40px 30px 10px;
    width: initial;
}
.menu.active .trigger .line {
  height: 0px;
  top: 45%;
}
.menu.active .trigger1 .line {
  height: 0px;
  top: 45%;
}
.menu.active .trigger2 .line {
  height: 0px;
  top: 45%;
}
.menu.active .trigger .line:before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 110%;
}
.menu.active .trigger1 .line:before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 110%;
}
.menu.active .trigger2 .line:before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 110%;
}
.menu.active .trigger .line:after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  width: 110%;
}
.menu.active .trigger1 .line:after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  width: 110%;
}
.menu.active .trigger2 .line:after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  width: 110%;
}
.rotater:nth-child(1) {
  -webkit-transform: rotate(-22.5deg);
      -ms-transform: rotate(-22.5deg);
          transform: rotate(-22.5deg);
}
.menu.active .rotater:nth-child(1) .btn-icon {
  -webkit-transform: translateY(-10em) rotate(22.5deg);
      -ms-transform: translateY(-10em) rotate(22.5deg);
          transform: translateY(-10em) rotate(22.5deg);
}
.rotater:nth-child(2) {
  -webkit-transform: rotate(22.5deg);
      -ms-transform: rotate(22.5deg);
          transform: rotate(22.5deg);
}    
.menu.active .rotater:nth-child(2) .btn-icon {
  -webkit-transform: translateY(-10em) rotate(-22.5deg);
      -ms-transform: translateY(-10em) rotate(-22.5deg);
          transform: translateY(-10em) rotate(-22.5deg);
}
.rotater:nth-child(3) {
  -webkit-transform: rotate(67.5deg);
      -ms-transform: rotate(67.5deg);
          transform: rotate(67.5deg);
}
.menu.active .rotater:nth-child(3) .btn-icon {
  -webkit-transform: translateY(-10em) rotate(-67.5deg);
      -ms-transform: translateY(-10em) rotate(-67.5deg);
          transform: translateY(-10em) rotate(-67.5deg);
}
.rotater:nth-child(4) {
  -webkit-transform: rotate(112.5deg);
      -ms-transform: rotate(112.5deg);
          transform: rotate(112.5deg);
}
.menu.active .rotater:nth-child(4) .btn-icon {
  -webkit-transform: translateY(-6em) rotate(-112.5deg);
      -ms-transform: translateY(-6em) rotate(-112.5deg);
          transform: translateY(-6em) rotate(-112.5deg);
}
.rotater:nth-child(5) {
  -webkit-transform: rotate(157.5deg);
      -ms-transform: rotate(157.5deg);
          transform: rotate(157.5deg);
}
.menu.active .rotater:nth-child(5) .btn-icon {
  -webkit-transform: translateY(-7em) rotate(-157.5deg);
      -ms-transform: translateY(-7em) rotate(-157.5deg);
          transform: translateY(-7em) rotate(-157.5deg);
}
.rotater:nth-child(6) {
  -webkit-transform: rotate(202.5deg);
      -ms-transform: rotate(202.5deg);
          transform: rotate(202.5deg);
}
.menu.active .rotater:nth-child(6) .btn-icon {
  -webkit-transform: translateY(-5em) rotate(-202.5deg);
      -ms-transform: translateY(-5em) rotate(-202.5deg);
          transform: translateY(-5em) rotate(-202.5deg);
}
.rotater:nth-child(7) {
  -webkit-transform: rotate(247.5deg);
      -ms-transform: rotate(247.5deg);
          transform: rotate(247.5deg);
}
.menu.active .rotater:nth-child(7) .btn-icon {
  -webkit-transform: translateY(-6em) rotate(-247.5deg);
      -ms-transform: translateY(-6em) rotate(-247.5deg);
          transform: translateY(-6em) rotate(-247.5deg);
}
.rotater:nth-child(8) {
  -webkit-transform: rotate(292.5deg);
      -ms-transform: rotate(292.5deg);
          transform: rotate(292.5deg);
}
.menu.active .rotater:nth-child(8) .btn-icon {
  -webkit-transform: translateY(-10em) rotate(-292.5deg);
      -ms-transform: translateY(-10em) rotate(-292.5deg);
          transform: translateY(-10em) rotate(-292.5deg);
}
.boton-manzana {
    position: absolute;
   width: 150px;
    height: 100px;
   z-index: -50;
    margin-left: -55px;
}
.boton-gusano {
    width: 70px;
}
.texto-manzana {
   position:absolute;
   margin: 30px 0px 0px 10px;
    font-size: 15px; 
    color: #efe9e5;
    text-shadow:
2px 0px 0px #460c0c,
3px 1px 0px #414141;
}

/* LISTA DESPLEGABLE */
updated ver
 {
  box-sizing:border-box;
}

.heading-primary {
  font-size:2em;
  padding:2em;
  text-align:center;
}

.accordion {
    position:relative;
    padding-right: 0px;
    padding-left: 0px;
  
}

/*  BOTONES REDONDOS PIE  */
.btn-float {
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  border: none;
  font-size: 18px;
  color: #fff;
  text-align: center;
  position: relative;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.11);
}
.btn-float:hover {
  text-decoration: none;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15), 0 4px 15px rgba(0, 0, 0, 0.13);
}
.btn-float:active, .btn-float:focus {
  outline: none;
}
.btn-float + .btn-float {
  margin-left: 5px;
}

.yellow {
  background: #ffa000;
}

.blue {
  background: #40c4ff;
}

.green {
  background: #00e676;
}

.purple {
  background: #8e24aa;
}

.pink {
  background: #e91e63;
}
.icon-bars {
/*  background: #fff;*/
/*
  height: 1px;
  width: 22px;
*/
  margin: auto;
  display: block;
  position: relative;
  -moz-transition: 0.1s 0.1s;
  -o-transition: 0.1s 0.1s;
  -webkit-transition: 0.1s;
  -webkit-transition-delay: 0.1s;
  -webkit-transition: 0.1s 0.1s;
          transition: 0.1s 0.1s;
}
.icon-bars:after {
  content: '';
  position: absolute;
  height: 22px;
  width: 1px;
/*  background: #fff;*/
  top: -10px;
}

.float-btn-group {
  position: relative;
  float: right;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}
.float-btn-group .btn-triger {
  z-index: 15;
  float: left;
}
.float-btn-group .btn-list {
  position: absolute;
  right: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
    
}
.float-btn-group .btn-list li {
  display: inline-block;
}
.float-btn-group.open .icon-bars {
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

.model-2 .float-btn-group {
  float: right;
    margin-right: 20px;
    margin-bottom: 10px;
}

.model-2 .float-btn-group .icon-bars {
  -webkit-transition: 0.8s;
  transition: 0.8s;
}

.model-2 .float-btn-group .btn-list .btn-float {
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
  -ms-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
}

.model-2 .float-btn-group .btn-list .btn-float:nth-child(1) {
  -moz-transition: 0.2s 0.3s;
  -o-transition: 0.2s 0.3s;
  -webkit-transition: 0.2s;
  -webkit-transition-delay: 0.3s;
  -webkit-transition: 0.2s 0.3s;
          transition: 0.2s 0.3s;
}
.model-2 .float-btn-group .btn-list .btn-float:nth-child(2) {
  -moz-transition: 0.2s 0.5s;
  -o-transition: 0.2s 0.5s;
  -webkit-transition: 0.2s;
  -webkit-transition-delay: 0.5s;
  -webkit-transition: 0.2s 0.5s;
          transition: 0.2s 0.5s;
}
.model-2 .float-btn-group .btn-list .btn-float:nth-child(3) {
  -moz-transition: 0.2s 0.7s;
  -o-transition: 0.2s 0.7s;
  -webkit-transition: 0.2s;
  -webkit-transition-delay: 0.7s;
  -webkit-transition: 0.2s 0.7s;
          transition: 0.2s 0.7s;
}
.model-2 .float-btn-group .btn-list .btn-float:nth-child(4) {
  -moz-transition: 0.2s 0.92s;
  -o-transition: 0.2s 0.92s;
  -webkit-transition: 0.2s;
  -webkit-transition-delay: 0.92s;
  -webkit-transition: 0.2s 0.92s;
          transition: 0.2s 0.92s;
}
.model-2 .float-btn-group.open .btn-list .btn-float {
  opacity: 1;
  -ms-transform: scale(0.9, 0.9);
  -webkit-transform: scale(0.9, 0.9);
  transform: scale(0.9, 0.9);
}
.model-2 .float-btn-group.open .btn-list .btn-float:nth-child(1) {
  top: -220px;
  -moz-transition: 0.2s 0.9s;
  -o-transition: 0.2s 0.9s;
  -webkit-transition: 0.2s;
  -webkit-transition-delay: 0.9s;
  -webkit-transition: 0.2s 0.9s;
          transition: 0.2s 0.9s;
}
.model-2 .float-btn-group.open .btn-list .btn-float:nth-child(2) {
  top: -165px;
  -moz-transition: 0.2s 0.7s;
  -o-transition: 0.2s 0.7s;
  -webkit-transition: 0.2s;
  -webkit-transition-delay: 0.7s;
  -webkit-transition: 0.2s 0.7s;
          transition: 0.2s 0.7s;
}
.model-2 .float-btn-group.open .btn-list .btn-float:nth-child(3) {
  top: -110px;
  -moz-transition: 0.2s 0.5s;
  -o-transition: 0.2s 0.5s;
  -webkit-transition: 0.2s;
  -webkit-transition-delay: 0.5s;
  -webkit-transition: 0.2s 0.5s;
          transition: 0.2s 0.5s;
}
.model-2 .float-btn-group.open .btn-list .btn-float:nth-child(4) {
  top: -55px;
  -moz-transition: 0.2s 0.3s;
  -o-transition: 0.2s 0.3s;
  -webkit-transition: 0.2s;
  -webkit-transition-delay: 0.3s;
  -webkit-transition: 0.2s 0.3s;
          transition: 0.2s 0.3s;
}

.accordion dl,
.accordion-list {
   border:1px solid #ddd;
   &:after {
        content: "";
       display:block;
       height:1em;
       width:100%;
       background-color:darken(#38cc70, 10%);
     }
}

.accordion dd,
.accordion__panel {
   background-color:#eee;
   font-size:1em;
   line-height:1.5em; 
}

.accordion p {
  padding:1em 2em 1em 2em;
}

.accordionTitle,
.accordion__Heading {
    background-color:#6f5212; 
    text-align:center;
    font-weight:700; 
    padding:0.5em;
    display:block;
    text-decoration:none;
    color:#fff;
    transition:background-color 0.5s ease-in-out;
    border-bottom:1px solid darken(#4a2704, 5%);
  &:before {
   content: "+";
   font-size:1.5em;
   line-height:0.5em;
   float:left; 
   transition: transform 0.3s ease-in-out;
  }
  &:hover {
    background-color:darken(#4c722c, 10%);
  }
}

.accordionTitle:before,
.accordion__Heading:before {
  content: "+";
  font-size: 1.5em;
  line-height: 0.5em;
  float: left;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
          transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover,
.accordion__Heading:hover {
  background-color: #2ba659;
}

.accordionTitleActive, 
.accordionTitle.is-expanded {
   background-color:darken(#4c722c, 10%);
    &:before {
     
      transform:rotate(-225deg);
    }
}
.accordionTitle:hover,
.accordion__Heading:hover {
  background-color: #ac825e;
    color:#581d0f;
}

.accordionTitleActive,
.accordionTitle.is-expanded {
  background-color: #165f31;
    color: #e3f50c;
    
}
.accordionTitleActive:before,
.accordionTitle.is-expanded:before {
  -webkit-transform: rotate(-225deg);
      -ms-transform: rotate(-225deg);
          transform: rotate(-225deg);
}



.accordionItem {
    height:auto;
    overflow:hidden; 
/*    //SHAME: magic number to allow the accordion to animate*/   
     max-height:50em;
    transition:max-height 1s;   
 
    
    @media screen and (min-width:48em) {
         max-height:15em;
        transition:max-height 0.5s
        
    }      
}
 
.accordionItem.is-collapsed {
    max-height:0;
}
.no-js .accordionItem.is-collapsed {
  max-height: auto;
}
.animateIn {
     animation: accordionIn 0.45s normal ease-in-out both 1; 
}
.animateOut {
     animation: accordionOut 0.45s alternate ease-in-out both 1;
}
@keyframes accordionIn {
  0% {
    opacity: 0;
    transform:scale(0.9) rotateX(-60deg);
    transform-origin: 50% 0;
  }
  100% {
    opacity:1;
    transform:scale(1);
  }
}

@keyframes accordionOut {
    0% {
       opacity: 1;
       transform:scale(1);
     }
     100% {
          opacity:0;
           transform:scale(0.9) rotateX(-60deg);
       }
}

.accordionItem {
  height: auto;
  overflow: hidden;
  max-height: 50em;
  -webkit-transition: max-height 1s;
          transition: max-height 1s;
}
@media screen and (min-width: 48em) {
  .accordionItem {
    max-height: 15em;
    -webkit-transition: max-height 0.5s;
            transition: max-height 0.5s;
  }
}

.accordionItem.is-collapsed {
  max-height: 0;
}

.no-js .accordionItem.is-collapsed {
  max-height: auto;
}

.animateIn {
  -webkit-animation: accordionIn 0.45s normal ease-in-out both 1;
          animation: accordionIn 0.45s normal ease-in-out both 1;
}

.animateOut {
  -webkit-animation: accordionOut 0.45s alternate ease-in-out both 1;
          animation: accordionOut 0.45s alternate ease-in-out both 1;
}

@-webkit-keyframes accordionIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.9) rotateX(-60deg);
            transform: scale(0.9) rotateX(-60deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes accordionIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.9) rotateX(-60deg);
            transform: scale(0.9) rotateX(-60deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes accordionOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.9) rotateX(-60deg);
            transform: scale(0.9) rotateX(-60deg);
  }
}
@keyframes accordionOut {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.9) rotateX(-60deg);
            transform: scale(0.9) rotateX(-60deg);
  }
}

/* =============================Botón menu oculto =================================*/

.hamburglar {
/*      transform: rotate(-90deg);*/
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
  margin: -10px 25% 0px 0px;
  position:relative;
  display: block;
  width: 68px;
  height: 68px;
  background:tansparent;
     float: right;
/*
  -webkit-touch-callout:none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
*/
}

.path-burger {
  position: absolute;
  top: 0;
  right: 0;
  height: 68px;
  width: 68px;
   
/*
  -webkit-mask: url(#mask);
          mask: url(#mask);
  -webkit-mask-box-image: url(https://raygun.io/upload/mask.svg);
*/
}

.animate-path {
  position: absolute;
  top: 0;
/*  right: 0;*/
  width: 68px;
  height: 68px;
}

.path-rotation {
  height: 24px;
  width: 24px;
    
    
  margin: 54px 34px 0px 50px;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transform-origin: 100% 0;
      -ms-transform-origin: 100% 0;
          transform-origin: 100% 0;
}
.path-rotation:before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 4px 0 0;
  background: #5c0e04;
    border: solid 2px #2f0803;
}

/*@-webkit-keyframes rotate-out {*/
@-webkit-keyframes rotate-in {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/*@keyframes rotate-out {*/
@keyframes rotate-in {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/*@-webkit-keyframes rotate-in {*/
@-webkit-keyframes rotate-out {
  0% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  40% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
/*@keyframes rotate-in {*/
@keyframes rotate-out {
  0% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  40% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
/*.hamburglar.is-open .path {*/
.hamburglar.is-closed .path {
  -webkit-animation: dash-in 0.6s linear normal;
          animation: dash-in 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
/*.hamburglar.is-open .animate-path {*/
.hamburglar.is-closed .animate-path {
  -webkit-animation: rotate-in 0.6s linear normal;
          animation: rotate-in 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

/*.hamburglar.is-closed .path {*/
.hamburglar.is-open .path {
  -webkit-animation: dash-out 0.6s linear normal;
          animation: dash-out 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
/*.hamburglar.is-closed .animate-path {*/
.hamburglar.is-open .animate-path {
  -webkit-animation: rotate-out 0.6s linear normal;
          animation: rotate-out 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  stroke-linejoin: round;
}

/*@-webkit-keyframes dash-in {*/
@-webkit-keyframes dash-out {
  0% {
    stroke-dashoffset: 240;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/*@keyframes dash-in {*/
@keyframes dash-out {
  0% {
    stroke-dashoffset: 240;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
/*@-webkit-keyframes dash-out {*/
@-webkit-keyframes dash-in {
  0% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 240;
  }
}
/*@keyframes dash-out {*/
@keyframes dash-in {
  0% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: 240;
  }
  100% {
    stroke-dashoffset: 240;
  }
}
.burger-icon {
  position: absolute;
  padding: 20px 15px;
  height: 68px;
  width: 68px;
    background-color: #d4af89;
    border-radius: 50%;
    border: solid 2px #41190a;
}

.burger-container {
  position: relative;
  height: 28px;
  width: 36px;
}

.burger-bun-top,
.burger-bun-bot,
.burger-filling {
  position: absolute;
  display: block;
  height: 4px;
  width: 36px;
  border-radius: 2px;
  background: #41190a;
}

.burger-bun-top {
  top: 0;
  -webkit-transform-origin: 34px 2px;
      -ms-transform-origin: 34px 2px;
          transform-origin: 34px 2px;
}

.burger-bun-bot {
  bottom: 0;
  -webkit-transform-origin: 34px 2px;
      -ms-transform-origin: 34px 2px;
          transform-origin: 34px 2px;
}

.burger-filling {
  top: 12px;
}

.burger-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 68px;
  height: 68px;
}

.svg-ring {
  width: 68px;
  height: 68px;
/*    z-index: -1150px;*/
    opacity: 0.5;
}

/*.hamburglar.is-open .burger-bun-top {*/
.hamburglar.is-closed .burger-bun-top {
  -webkit-animation: bun-top-out 0.6s linear normal;
          animation: bun-top-out 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
/*.hamburglar.is-open .burger-bun-bot {*/
.hamburglar.is-closed .burger-bun-bot {
  -webkit-animation: bun-bot-out 0.6s linear normal;
          animation: bun-bot-out 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

/*.hamburglar.is-closed .burger-bun-top {*/
.hamburglar.is-open .burger-bun-top {
  -webkit-animation: bun-top-in 0.6s linear normal;
          animation: bun-top-in 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
/*.hamburglar.is-closed .burger-bun-bot {*/
.hamburglar.is-open .burger-bun-bot {
  -webkit-animation: bun-bot-in 0.6s linear normal;
          animation: bun-bot-in 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

/*@-webkit-keyframes bun-top-out {*/
@-webkit-keyframes bun-top-in {
  0% {
    left: 0;
    top: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    left: 0;
    top: 0;
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  80% {
    left: -5px;
    top: 0;
    -webkit-transform: rotate(-60deg);
            transform: rotate(-60deg);
  }
  100% {
    left: -5px;
    top: 1px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}

/*@keyframes bun-top-out {*/
@keyframes bun-top-in {
  0% {
    left: 0;
    top: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    left: 0;
    top: 0;
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  80% {
    left: -5px;
    top: 0;
    -webkit-transform: rotate(-60deg);
            transform: rotate(-60deg);
  }
  100% {
    left: -5px;
    top: 1px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}
/*@-webkit-keyframes bun-bot-out {*/
@-webkit-keyframes bun-bot-in {
  0% {
    left: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    left: 0;
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  80% {
    left: -5px;
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  100% {
    left: -5px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
}
/*@keyframes bun-bot-out {*/
@keyframes bun-bot-in {
  0% {
    left: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    left: 0;
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  80% {
    left: -5px;
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  100% {
    left: -5px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
}
/*@-webkit-keyframes bun-top-in {*/
@-webkit-keyframes bun-top-out {
  0% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  20% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(-60deg);
            transform: rotate(-60deg);
  }
  80% {
    left: 0;
    bot: 0;
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  100% {
    left: 0;
    bot: 1px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
/*@keyframes bun-top-in {*/
@keyframes bun-top-out {
  0% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  20% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(-60deg);
            transform: rotate(-60deg);
  }
  80% {
    left: 0;
    bot: 0;
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  100% {
    left: 0;
    bot: 1px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
/*@-webkit-keyframes bun-bot-in {*/
@-webkit-keyframes bun-bot-out
  0% {
    left: -5px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  20% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  80% {
    left: 0;
    bot: 0;
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  100% {
    left: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
/*@keyframes bun-bot-in {*/
@keyframes bun-bot-out {
  0% {
    left: -5px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  20% {
    left: -5px;
    bot: 0;
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  80% {
    left: 0;
    bot: 0;
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  100% {
    left: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
/*.hamburglar.is-open .burger-filling {*/
.hamburglar.is-closed .burger-filling {
  -webkit-animation: burger-fill-out 0.6s linear normal;
          animation: burger-fill-out 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

/*.hamburglar.is-closed .burger-filling {*/
.hamburglar.is-open .burger-filling {
  -webkit-animation: burger-fill-in 0.6s linear normal;
          animation: burger-fill-in 0.6s linear normal;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

/*@-webkit-keyframes burger-fill-in {*/
@-webkit-keyframes burger-fill-out {
  0% {
    width: 0;
    left: 36px;
  }
  40% {
    width: 0;
    left: 40px;
  }
  80% {
    width: 36px;
    left: -6px;
  }
  100% {
    width: 36px;
    left: 0px;
  }
}

/*@keyframes burger-fill-in {*/
@keyframes burger-fill-out {
  0% {
    width: 0;
    left: 36px;
  }
  40% {
    width: 0;
    left: 40px;
  }
  80% {
    width: 36px;
    left: -6px;
  }
  100% {
    width: 36px;
    left: 0px;
  }
}
/*@-webkit-keyframes burger-fill-out {*/
@-webkit-keyframes burger-fill-in {
  0% {
    width: 36px;
    left: 0px;
  }
  20% {
    width: 42px;
    left: -6px;
  }
  40% {
    width: 0;
    left: 40px;
  }
  100% {
    width: 0;
    left: 36px;
  }
}
/*@keyframes burger-fill-out {*/
@keyframes burger-fill-in {
  0% {
    width: 36px;
    left: 0px;
  }
  20% {
    width: 42px;
    left: -6px;
  }
  40% {
    width: 0;
    left: 40px;
  }
  100% {
    width: 0;
    left: 36px;
  }
}
/*ARCHIVO RESET.CSS DEL BOTON OCULTABLE*/
/*html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*/