html,
                body {
                    margin: 0%;
                    height: 100%;
                    overflow: scroll;
                    text-rendering: optimizeLegibility;
                    background-color: #000;
                    font-family: 'Nunito', ;
                }
                
                .background {
                    margin: 0%;
                    height: 100%;
                    width: 100%;
                    background: url('../img/fondo-mobile-2.png') no-repeat center center fixed;
                    -webkit-background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
                    background-size: cover;
                }
                
                #content {
                    height: 100%;
                }
                
                #page-content {
                    flex: 1 0 auto;
                    padding-top: 4rem;
                }
                
                #sticky-footer {
                    flex-shrink: none;
                    background-color: transparent;
                }
                /* .linea {
    display: inline-block;
    background-color: rgb(33, 157, 240);
} */
                
                .button1 {
                    margin-top: 60%;
                    margin: 7px;
                    margin-left: 87%;
                    font-family: inherit;
                    font-size: inherit;
                    background-color: rgb(223, 235, 235);
                }
                
                .button2 {
                    margin-top: 40%;
                    margin: -7px;
                    margin-left: 87%;
                    font-family: inherit;
                    font-size: inherit;
                    background-color: rgb(223, 235, 235);
                    text-rendering: optimizeLegibility;
                }
                
                .image1 {
                    width: 15%;
                    height: 10%;
                    align-content: center;
                }
                
                .image {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 120px;
                    height: 120px;
                    margin: -60px 0 0 -60px;
                    -webkit-animation: spin 4s linear infinite;
                    -moz-animation: spin 4s linear infinite;
                    animation: spin 4s linear infinite;
                }
                
                @-moz-keyframes spin {
                    100% {
                        -moz-transform: rotate(360deg);
                    }
                }
                
                @-webkit-keyframes spin {
                    100% {
                        -webkit-transform: rotate(360deg);
                    }
                }
                
                @keyframes spin {
                    100% {
                        -webkit-transform: rotate(360deg);
                        transform: rotate(360deg);
                    }
                }
                /* Home */
                
                #sidebar {
                    min-width: 250px;
                    max-width: 250px;
                    background: #3ffc49;
                    color: #fff;
                    transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
                    transform-origin: center left;
                    height: 100%;
                    /* Set the transformed position of sidebar to center left side. */
                }
                
                #sidebar.active {
                    margin-left: -250px;
                    transform: rotateY(100deg);
                    /* Rotate sidebar vertically by 100 degrees. */
                }
                
                #sidebarCollapse {
                    width: 40px;
                    height: 40px;
                    background: #f5f5f5;
                }
                
                #sidebarCollapse span {
                    width: 80%;
                    height: 2px;
                    margin: 0 auto;
                    display: block;
                    background: #555;
                    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
                }
                
                #sidebarCollapse span:first-of-type {
                    /* rotate first one */
                    transform: rotate(45deg) translate(2px, 2px);
                }
                
                #sidebarCollapse span:nth-of-type(2) {
                    /* second one is not visible */
                    opacity: 0;
                }
                
                #sidebarCollapse span:last-of-type {
                    /* rotate third one */
                    transform: rotate(-45deg) translate(1px, -1px);
                }
                
                @media (max-width: 768px) {
                    /* Reversing the behavior of the sidebar: 
       it'll be rotated vertically and off canvas by default, 
       collapsing in on toggle button click with removal of 
       the vertical rotation.   */
                    #sidebar {
                        margin-left: -250px;
                        transform: rotateY(100deg);
                    }
                    #sidebar.active {
                        margin-left: 0;
                        transform: none;
                    }
                    /* Reversing the behavior of the bars: 
       Removing the rotation from the first,
       last bars and reappear the second bar on default state, 
       and giving them a vertical margin */
                    #sidebarCollapse span:first-of-type,
                    #sidebarCollapse span:nth-of-type(2),
                    #sidebarCollapse span:last-of-type {
                        transform: none;
                        opacity: 1;
                        margin: 5px auto;
                    }
                    /* Removing the vertical margin and make the first and last bars rotate again when the sidebar is open, hiding the second bar */
                    #sidebarCollapse.active span {
                        margin: 0 auto;
                    }
                    #sidebarCollapse.active span:first-of-type {
                        transform: rotate(45deg) translate(2px, 2px);
                    }
                    #sidebarCollapse.active span:nth-of-type(2) {
                        opacity: 0;
                    }
                    #sidebarCollapse.active span:last-of-type {
                        transform: rotate(-45deg) translate(1px, -1px);
                    }
                }
                
                .ojo-container {
                    overflow: scroll;
                    height: 26rem;
                }
                
                .footer {
                    position: fixed;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    background-color: transparent;
                    color: white;
                    height: 100px;
                }
                
                @keyframes pulse {
                    0% {
                        margin-top: 0px;
                    }
                    100% {
                        margin-top: 6px;
                    }
                }
                /* menu select */
                
                select {
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    -ms-appearance: none;
                    appearance: none;
                    outline: 0;
                    box-shadow: none;
                    border: 1 solid;
                    background: rgb(0, 146, 222);
                    background-image: none;
                }
                /* Remove IE arrow */
                
                select::-ms-expand {
                    display: none;
                }
                /* Custom Select */
                
                select {
                    flex: 1;
                    padding: 0 .5em;
                    color: #fff;
                    cursor: pointer;
                }
                /* Arrow */
                
                .select::after {
                    content: '\25BC';
                    position: absolute;
                    top: 0;
                    right: 0;
                    padding: 0 1em;
                    background: hsla(260, 100%, 50%, 1);
                    cursor: pointer;
                    pointer-events: none;
                    -webkit-transition: .25s all ease;
                    -o-transition: .25s all ease;
                    transition: .25s all ease;
                }
                /* Transition */
                
                .select:hover::after {
                    color: #1c11b3;
                }
                
                .qq-gallery {
                    position: relative;
                    min-height: 200px;
                    max-height: 490px;
                    overflow-y: hidden;
                    width: inherit;
                    border-radius: 6px;
                    border: 1px dashed #CCCCCC;
                    background-color: #FAFAFA;
                    padding: 89px;
                }
                
                .msg-icn {
                    display: inline-block;
                    position: relative;
                    padding: 10px 20px;
                    color: #fff;
                    box-sizing: border-box;
                    max-width: 300px;
                    min-width: 80px;
                    min-height: 38px;
                }
                
                .msg-icn:before {
                    content: "";
                    position: absolute;
                    display: block;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;
                    border: 1px solid #3ffc49;
                    border-radius: 2px;
                    box-sizing: border-box;
                    clip-path: polygon(0% 105%, 0% 0%, 105% 0%, 105% 105%, 43px 105%, 43px 80%, 21px 80%, 21px 105%);
                }
                
                .msg-icn:after {
                    content: "";
                    position: absolute;
                    display: block;
                    width: 25px;
                    height: 20px;
                    background: #e5a002;
                    top: calc(100% - 1px);
                    left: 20px;
                    box-sizing: border-box;
                    clip-path: polygon(0 0, 0% 100%, 100% 0%, calc(100% - 2px) 0, 1px calc(100% - 2px), 1px 0);
                }
                
                small {
                    color: #888;
                }
                
                @media (min-width: 780px) {
                    .wrapper {
                        width: 600px;
                        display: grid;
                        grid-template-columns: repeat(2, [col] calc(100%/2));
                        grid-auto-rows: 120px;
                        margin: 30px auto 40px;
                    }
                }
                
                .boton-agrandar {
                    top: 549%;
                    bottom: -204%;
                    min-width: 34px;
                    margin: 1px auto;
                    background: #FFF;
                    color: #fefefe;
                    font-size: 1em;
                    padding: 1em;
                    border-radius: 15px;
                    text-align: center;
                    cursor: pointer;
                    appearance: none;
                    -webkit-appearance: none;
                    border: 0;
                    transition: border-radius linear 0.05s, width linear 0.05s;
                }
                
                @keyframes spin {
                    0% {
                        transform: translate(-50%, -50%) rotate(0deg) scale(1);
                    }
                    90% {
                        transform: translate(-50%, -50%) rotate(1080deg) scale(1);
                    }
                    100% {
                        transform: scale(0);
                    }
                }
                
                @-webkit-keyframes spin {
                    0% {
                        -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(1);
                    }
                    98% {
                        -webkit-transform: translate(-50%, -50%) rotate(1080deg) scale(1);
                    }
                    100% {
                        -webkit-transform: translate(-50%, -50%) rotate(1080deg) scale(0);
                    }
                }
                
                @keyframes success {
                    from {
                        transform: translate(-50%, -50%) rotate(0) scale(0);
                    }
                    to {
                        transform: translate(-50%, -50%) rotate(-45deg) scale(1);
                    }
                }
                
                @-webkit-keyframes success {
                    from {
                        -webkit-transform: translate(-50%, -50%) rotate(0) scale(0);
                    }
                    to {
                        -webkit-transform: translate(-50%, -50%) rotate(-45deg) scale(1);
                    }
                }
                
                @keyframes error {
                    from {
                        transform: translate(-50%, -50%) scale(0);
                    }
                    to {
                        transform: translate(-50%, -50%) scale(1);
                        background-color: #f44336;
                    }
                }
                
                @-webkit-keyframes error {
                    from {
                        -webkit-transform: translate(-50%, -50%) scale(0);
                    }
                    to {
                        -webkit-transform: translate(-50%, -50%) scale(1);
                        background-color: #f44336;
                    }
                }
                
                @keyframes vibrate {
                    0%,
                    30%,
                    60%,
                    85%,
                    100% {
                        left: 0;
                        background-color: #f44336;
                    }
                    10%,
                    40%,
                    90%,
                    70% {
                        left: -2px;
                        background-color: #f44336;
                    }
                    20%,
                    50%,
                    80%,
                    95% {
                        left: 2px;
                        background-color: #f44336;
                    }
                }