/*.menu-icon {
  margin: 20px; }*/

.menu-icon {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255,0.8);;

}

  .menu-icon span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 22px;
    height: 2px;
    background-color: #be4856;
    -webkit-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%); }

    .menu-icon span::before, .menu-icon span::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 22px;
      height: 2px;
      background-color: #be4856;
      -webkit-transform: translateY(-6px);
          -ms-transform: translateY(-6px);
              transform: translateY(-6px);
      -webkit-transition: -webkit-transform 0.5s;
              transition: transform 0.5s; }
    .menu-icon span::after {
      -webkit-transform: translateY(6px);
          -ms-transform: translateY(6px);
              transform: translateY(6px); }
  .menu-icon:hover span::before {
    -webkit-transform: translateY(-8px);
        -ms-transform: translateY(-8px);
            transform: translateY(-8px); }
  .menu-icon:hover span::after {
    -webkit-transform: translateY(8px);
        -ms-transform: translateY(8px);
            transform: translateY(8px); }

.menu-icon-cross {
  -webkit-transition: -webkit-transform 0.5s;
          transition: transform 0.5s; }
  .menu-icon-cross span::before, .menu-icon-cross span::after {
    -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%; }
  .menu-icon-cross span {
    z-index: 2;
    -webkit-transition: background 0.5s, -webkit-transform 0.5s;
            transition: background 0.5s, transform 0.5s; }
  .menu-icon-cross svg {
    position: relative;
    z-index: 1;
    fill: #052b23;
    stroke-width: 1px;
    stroke: #be4856;
    stroke-dasharray: 170;
    stroke-dashoffset: 170;
    -webkit-transition: stroke-dashoffset 0.5s, -webkit-transform 0.5s;
            transition: stroke-dashoffset 0.5s, transform 0.5s; }
  .menu-icon-cross.is-opened {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg); }
    .menu-icon-cross.is-opened span {
      background: transparent; }
    .menu-icon-cross.is-opened span::before {
      -webkit-transform: translateY(0) rotate(45deg);
          -ms-transform: translateY(0) rotate(45deg);
              transform: translateY(0) rotate(45deg); }
    .menu-icon-cross.is-opened span::after {
      -webkit-transform: translateY(0) rotate(-45deg);
          -ms-transform: translateY(0) rotate(-45deg);
              transform: translateY(0) rotate(-45deg); }
    .menu-icon-cross.is-opened svg {
      -webkit-transform: rotate(-180deg);
          -ms-transform: rotate(-180deg);
              transform: rotate(-180deg);
      stroke-dashoffset: 0; }

.menu-icon-arrow {
  -webkit-transition: -webkit-transform 0.5s;
          transition: transform 0.5s; }
  .menu-icon-arrow span::before, .menu-icon-arrow span::after {
    right: 0;
    left: auto;
    -webkit-transform-origin: 100% 50%;
        -ms-transform-origin: 100% 50%;
            transform-origin: 100% 50%; }
  .menu-icon-arrow span, .menu-icon-arrow span::after, .menu-icon-arrow span::before {
    z-index: 2;
    -webkit-transition: -webkit-transform 0.5s, width 0.5s;
            transition: transform 0.5s, width 0.5s; }
  .menu-icon-arrow svg {
    position: relative;
    z-index: 1;
    fill: #052b23;
    stroke-width: 1px;
    stroke: #FFF;
    stroke-dasharray: 170;
    stroke-dashoffset: 170;
    -webkit-transition: stroke-dashoffset 0.5s;
            transition: stroke-dashoffset 0.5s; }
  .menu-icon-arrow.is-opened {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg); }
    .menu-icon-arrow.is-opened span::before {
      width: 50%;
      -webkit-transform: translateY(0) rotate(45deg);
          -ms-transform: translateY(0) rotate(45deg);
              transform: translateY(0) rotate(45deg); }
    .menu-icon-arrow.is-opened span::after {
      width: 50%;
      -webkit-transform: translateY(0) rotate(-45deg);
          -ms-transform: translateY(0) rotate(-45deg);
              transform: translateY(0) rotate(-45deg); }
    .menu-icon-arrow.is-opened svg {
      stroke-dashoffset: 0; }

.menu-icon-svg span {
  -webkit-transition: background 0.5s steps(1, end);
          transition: background 0.5s steps(1, end); }
.menu-icon-svg span::before, .menu-icon-svg span::after {
  -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
          transform-origin: 100% 50%; }
.menu-icon-svg svg {
  opacity: 0;
  fill: transparent;
  stroke-width: 2px;
  stroke: #be4856;
  stroke-dasharray: 22 230;
  -webkit-transition: stroke-dasharray 0.5s, stroke-dashoffset 0.5s, opacity 0.5s steps(1, end);
          transition: stroke-dasharray 0.5s, stroke-dashoffset 0.5s, opacity 0.5s steps(1, end); }
.menu-icon-svg.is-opened span {
  -webkit-transition: background 0.5s steps(1, start);
          transition: background 0.5s steps(1, start);
  background-color: transparent; }
.menu-icon-svg.is-opened span::before {
  -webkit-transform: translateX(-3px) translateY(-8px) rotate(-45deg);
      -ms-transform: translateX(-3px) translateY(-8px) rotate(-45deg);
          transform: translateX(-3px) translateY(-8px) rotate(-45deg); }
.menu-icon-svg.is-opened span::after {
  -webkit-transform: translateX(-3px) translateY(8px) rotate(45deg);
      -ms-transform: translateX(-3px) translateY(8px) rotate(45deg);
          transform: translateX(-3px) translateY(8px) rotate(45deg); }
.menu-icon-svg.is-opened svg {
  opacity: 1;
  -webkit-transition: opacity 0.5s steps(1, start);
          transition: opacity 0.5s steps(1, start);
  -webkit-animation: pathanimation 0.5s linear;
          animation: pathanimation 0.5s linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }
.menu-icon-svg.is-closed svg {
  -webkit-animation: pathanimation-out 0.5s linear;
          animation: pathanimation-out 0.5s linear; }

@-webkit-keyframes pathanimation {
  40% {
    stroke-dasharray: 22 230; }

  60% {
    stroke-dashoffset: -65; }

  100% {
    stroke-dashoffset: -65;
    stroke-dasharray: 160; } }

@keyframes pathanimation {
  40% {
    stroke-dasharray: 22 230; }

  60% {
    stroke-dashoffset: -65; }

  100% {
    stroke-dashoffset: -65;
    stroke-dasharray: 160; } }

@-webkit-keyframes pathanimation-out {
  100% {
    stroke-dashoffset: 0; }

  60% {
    stroke-dasharray: 22 230; }

  40% {
    stroke-dashoffset: -65; }

  0% {
    stroke-dashoffset: -65;
    stroke-dasharray: 160; } }

@keyframes pathanimation-out {
  100% {
    stroke-dashoffset: 0; }

  60% {
    stroke-dasharray: 22 230; }

  40% {
    stroke-dashoffset: -65; }

  0% {
    stroke-dashoffset: -65;
    stroke-dasharray: 160; } }

#menu-icon-button.loading{
  z-index: 10;
  /*opacity: 0;*/
}


#menu-icon-button.loaded{
  z-index: 10000;
  /*opacity: 1;
  -webkit-transition: 1.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 1.5s ease-in-out;*/
  /*opacity: 0.2;*/

  transition-delay: 1s;
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  -moz-transition-delay: 1s;


}



.modalMenu {
  z-index: 105;
  position: fixed;
  top: -100%;
  left: 0px;  
  height: 100%;
  width: 100%;
  padding: 100px;
  /*background-color: #be0000;*/
  background-color: #be4856;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.modalMenu.open {
  /*background-color: #00f;*/
  top: 0px;
}


#menuList {
  opacity: 0;
  transition-property: width, opacity, margin-left, border-width;
  transition-duration: 1.0s;

  -webkit-transition-property: width, opacity, margin-left, border-width;
  -webkit-transition-duration: 1.0s;
         
  -o-transition-property: width, opacity, margin-left, border-width;
  -o-transition-duration: 1.0s;
         
  -moz-transition-property: width, opacity, margin-left, border-width;
  -moz-transition-duration: 1.0s;

  transition-delay: 0s;
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  -moz-transition-delay: 0s;
}



#menuList.open {
 opacity: 1;   

  transition-delay: 0.45s;
  -webkit-transition-delay: 0.45s;
  -o-transition-delay: 0.45s;
  -moz-transition-delay: 0.45s;
 
}



.vertical-align {
  display: flex;
  width: 100%;
  padding: 0px;
  margin: 0px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/*.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"],*/
.vertical-align > [class^="row"]  {
  display: flex;
  width: 70%;
  /*min-width: 320px;*/
  /*align-items: center;*/
  justify-content: center;  /*Optional, to align inner items horizontally inside the column */
  /*margin: 0px;*/
  padding: 0px;
}


/**
 * S T Y L I N G
 ==================================*/


.vertical-align > div:last-child {
  /*background-color: gold;*/
}

#menuList > div{
  /*align-items: center;*/
  justify-content: center;
  text-align: center;                             
}

#menuList > div > a > svg path {
  fill: #ddd;
}

#menuList > div > a > svg circle {
  fill: rgba(255, 255, 255, 0.34);
  stroke : #ddd;
  stroke-width : 0;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#menuList > div > a > svg ellipse {
  fill: #ddd;
}

#menuList > div > a > svg {
  width: 75%;
  height : 75%;
}

#menuList > div > a > svg:hover circle {
  fill: rgba(255, 255, 255, 0);
  stroke : #ddd;
  stroke-width : 8.63602805;
}

#menuList h5{
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.7em;
  color: rgba(255, 255, 255, 0.34);
}

#menuList > div > a:hover {
  text-decoration: none;
}
#menuList > div > a:hover h5 {
  color: rgba(221, 221, 221, 1);
}





@media (max-width: 440px) { 
  .menu-icon {
    position: fixed;
    top: 5px;
    left: 5px;
  }

  .vertical-align > [class^="row"]{
      display: block;
      align-items: center;
      width: 100%;
  }
  #menuList > div > a > svg {
    width: 30%;
    height : 30%;
  }

  #menuList h5{
    text-transform: uppercase;
    font-size: 1em;
    margin-top: 2px;
    margin-bottom: 8px;
  }

}


/*
 CARTINA GOOGLE MAPS
}*/

#cartina {
        height:400px;
        width:550px;
    }
    .gm-style-iw * {
        display: block;
        width: 100%;
    }
    .gm-style-iw h4, .gm-style-iw p {
        margin: 0;
        padding: 0;
    }
    .gm-style-iw a {
        color: #4272db;
    }