/**
 * Left navigation trigger UI
 */
.sp-menu-container ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.js-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-width: 0px;
    border-style: solid;
    border-color: #333;
    background-color: rgba(0,0,0,0);
    -webkit-backface-visibility: hidden;
    -webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
    transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
}

.js-menu.js-menu-open {
    height: 100%;
    border-width: 30px 30px 90px 30px;
    background-color: rgba(0,0,0,0.3);
    -webkit-transition: border-width 0.3s, background-color 0.3s;
    transition: border-width 0.3s, background-color 0.3s;
}

.bt-overlay {
    position: absolute;
    width: 100%;
}

.js-menu-open .bt-overlay {
    height: 100%;
}

.sp-menu-trigger {
    position: fixed;
    bottom: 22px;
    left: 50%;
    z-index: 100;
    display: block;
    margin-left: -25px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.sp-menu-trigger span {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: 8%;
    background-color: #fff;
    font-size: 0px;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sp-menu-open .sp-menu-trigger span,
.js-menu-open .sp-menu-trigger span {
    background-color: #2980b9;
}

.sp-menu-trigger span:before,
.sp-menu-trigger span:after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
    transition: transform 0.3s, background-color 0.3s;
}

.sp-menu-trigger span:before {
    -webkit-transform: translateY(-250%);
    transform: translateY(-250%);
}

.sp-menu-trigger span:after {
    -webkit-transform: translateY(250%);
    transform: translateY(250%);
}

.sp-menu-open .sp-menu-trigger span:before,
.sp-menu-open .sp-menu-trigger span:after,

.js-menu-open .sp-menu-trigger span:before,
.js-menu-open .sp-menu-trigger span:after {
    background-color: #2980b9;
}

.sp-menu-open .sp-menu-trigger span:before,
.js-menu-open .sp-menu-trigger span:before {
    -webkit-transform: translateY(-350%);
    transform: translateY(-350%);
    /* guion
    -webkit-transform: translateY(0%);
    transform: translateY(0%);*/
}

.sp-menu-open .sp-menu-trigger span:after,
.js-menu-open .sp-menu-trigger span:after {
    -webkit-transform: translateY(350%);
    transform: translateY(350%);
    /* guión
    -webkit-transform: translateY(0%);
    transform: translateY(0%);*/
} 

.js-menu {
    top: 2em;
    left: 2em;
    z-index: 9999;
}
/**
 * Slide and push menu
 */ 

 .js-spmenu { cursor: pointer; }
 .spmenu {
   position: fixed;
   z-index: 9999;
 }
 
 .sp-menu-overlay {
     position: absolute;
     width: 100%;
 }
 
 .sp-menu-open .sp-menu-overlay {
     height: 100%;
   background-color: rgba(0,0,0,0.3);
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   z-index: 1;
 }
 
 /* General styles for all menus */
 .sp-menu {
     background: #fff;
     position: fixed;
 }
 
 .sp-menu h3 {
     color: #000;
     font-size: 1.9em;
     padding: 20px;
     margin: 0;
     font-weight: 300;
     background: #dfdfdf;
 }
 
 .sp-menu a {
     display: block;
     color: #000;
     /* font-size: 1.1em; */
     font-weight: 300;
 }
 
 .sp-menu a:hover {
     background: #fafafa;
 }
 
 .sp-menu a:active {
     background: #eff0f1;
     color: #000;
 }
 
 /* Orientation-dependent styles for the content of the menu */
 
 .sp-menu-vertical {
     width: 240px;
     height: 100%;
     top: 0;
     z-index: 1000;
 }
 
 .sp-menu-vertical a {
     border-bottom: 1px solid #f2f2f2;
     padding: 1em;
 }
 
 .sp-menu-horizontal {
     width: 100%;
     height: 150px;
     left: 0;
     z-index: 1000;
     overflow: hidden;
 }
 
 .sp-menu-horizontal h3 {
     height: 100%;
     width: 20%;
     float: left;
 }
 
 .sp-menu-horizontal a {
     float: left;
     width: 20%;
     padding: 0.8em;
     border-left: 1px solid #258ecd;
 }
 
 /* Vertical menu that slides from the left or right */
 
 .sp-menu-left {
     left: -240px;
 }
 
 .sp-menu-right {
     right: -240px;
 }
 
 .sp-menu-open .sp-menu-left,
 .sp-menu-left.sp-menu-open {
     left: 0px;
 }
 
 .sp-menu-right.sp-menu-open {
     right: 0px;
 }
 
 /* Horizontal menu that slides from the top or bottom */
 
 .sp-menu-top {
     top: -150px;
 }
 
 .sp-menu-bottom {
     bottom: -150px;
 }
 
 .sp-menu-top.sp-menu-open {
     top: 0px;
 }
 
 .sp-menu-bottom.sp-menu-open {
     bottom: 0px;
 }
 
 /* Push classes applied to the body */
 
 .sp-menu-push {
     overflow-x: hidden;
     position: relative;
     left: 0;
 }
 
 .sp-menu-push-toright {
     left: 240px;
 }
 
 .sp-menu-push-toleft {
     left: -240px;
 }
 
 /* Transitions */
 
 .sp-menu,
 .sp-menu-push {
     -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
     transition: all 0.3s ease;
 }
 
 /* Example media queries */
 
 @media screen and (max-width: 55.1875em){
 
     .sp-menu-horizontal {
         font-size: 75%;
         height: 110px;
     }
 
     .sp-menu-top {
         top: -110px;
     }
 
     .sp-menu-bottom {
         bottom: -110px;
     }
 
 }
 
 @media screen and (max-height: 26.375em){
 
     .sp-menu-vertical {
         font-size: 90%;
         width: 190px;
     }
 
     .sp-menu-left,
     .sp-menu-push-toleft {
         left: -190px;
     }
 
     .sp-menu-right {
         right: -190px;
     }
 
     .sp-menu-push-toright {
         left: 190px;
     }
 }