@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600&display=swap');
         :root {
            --dark-color: hsl(0, 0%, 0%);
            --gray-color: hsl(0, 0%, 60%);
            --light-color: hsl(0, 0%, 100%);
            --border-color-dark: hsl(10, 95%, 70%);
            --border-color-normal: hsl(10, 95%, 83%);
            --border-color-light: hsl(10, 95%, 93%);
        }
        /*Boton animado*/
        
        .login-box2 {
            position: absolute;
            top: 2%;
            left: 83%;
            width: 10%;
            transform: translate(-50%, -50%);
            box-sizing: border-box;
        }
        
        .login-box2 form a {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            color: #03e9f4;
            font-size: 16px;
            text-decoration: none;
            text-transform: uppercase;
            overflow: hidden;
            transition: .5s;
            margin-top: 50%;
            letter-spacing: 4px
        }
        
        .login-box2 a:hover {
            background: #03e9f4;
            color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
        }
        
        .login-box2 a span {
            position: absolute;
            display: block;
        }
        
        .login-box2 a span:nth-child(1) {
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #03e9f4);
            animation: btn-anim1 1s linear infinite;
        }
        
        @keyframes btn-anim1 {
            0% {
                left: -100%;
            }
            50%,
            100% {
                left: 100%;
            }
        }
        
        .login-box2 a span:nth-child(2) {
            top: -100%;
            right: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, transparent, #03e9f4);
            animation: btn-anim2 1s linear infinite;
            animation-delay: .25s
        }
        
        @keyframes btn-anim2 {
            0% {
                top: -100%;
            }
            50%,
            100% {
                top: 100%;
            }
        }
        
        .login-box2 a span:nth-child(3) {
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(270deg, transparent, #03e9f4);
            animation: btn-anim3 1s linear infinite;
            animation-delay: .5s
        }
        
        @keyframes btn-anim3 {
            0% {
                right: -100%;
            }
            50%,
            100% {
                right: 100%;
            }
        }
        
        .login-box2 a span:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(360deg, transparent, #03e9f4);
            animation: btn-anim4 1s linear infinite;
            animation-delay: .75s
        }
        
        @keyframes btn-anim4 {
            0% {
                bottom: -100%;
            }
            50%,
            100% {
                bottom: 100%;
            }
        }
        /* GLOBAL STYLES */
        
        button {
            background: transparent;
            border: none;
            border-radius: 2em;
            cursor: pointer;
            font-size: .875em;
            font-weight: 600;
            height: 2em;
            letter-spacing: -.025em;
            text-transform: uppercase;
            transition: .25s;
        }
        
        button:hover {
            color: var(--gray-color);
        }
        
        header {
            min-height: 10vh;
            padding: 2em;
        }
        
        p {
            color: var(--light-color); 
            font-size: .875em;
            hyphens: auto;
            line-height: 1.5;
            margin: 0.5em 0;
        }

        /* HEADER NAV */
        
        .logo-link {
            color: white;
            letter-spacing: .125em;
            text-transform: uppercase;
        }
        
        
        .logo {
            position: absolute;
            display: block;
            z-index: 100;
            transition: all 250ms linear;
        }
        
        .logo img {
            height: 26px;
            width: auto;
            display: block;
        }
        /*Responsive*/
        
        @media (max-width:1036px) {
            .header-menu {
                margin-left: 45%;
                justify-content: space-evenly;
            }
        }
        
        @media only screen and (min-width: 1024px) {
            /* GLOBAL STYLES */
            header {
                overflow: hidden;
            }
            img {
                object-position: 50% 100%;
            }
            /* HEADER NAV */
            .header-nav {
                flex-direction: row;
                justify-content: space-between;
            }
            .header-menu-link {
                padding: 0 1.5em;
            }
            .ghost-button {
                font-size: 1.30em;
            }
            /* HEADER CONTENT */
            .header-content {
                position: relative;
                margin-top: 15vh;
            }
            .header-img {
                box-shadow: 0 0 0 2em var(--border-color-dark), 0 0 0 4em var(--border-color-normal), 0 0 0 6em var(--border-color-light);
                height: 55vw;
                margin: 0;
                position: absolute;
                right: -16vw;
                top: 0vw;
                width: 55vw;
            }
            .header-description {
                margin: 6em 3em 0;
                max-width: 50vw;
            }
            .header-title {
                font-size: calc(1vw + 2.5em);
            }
        }
        
        @media (max-width:991px) {
            .login-box2 {
                position: absolute;
                top: 2%;
                left: 71%;
                width: 10%;
                transform: translate(-50%, -50%);
            }
            .header-menu {
                padding: 1% 0.5%;
                display: flex;
                margin-left: 0%;
                margin-top: 15%;
                flex-direction: row;
                justify-content: space-evenly;
            }

            .header-menu > li:hover .submenu {
                display: flex;
                flex-direction: column!important;
            }

                        .submenu {
                display: flex;
                position: absolute;
            }
        }
        
        @media (max-width:768px) {
            .logo {
                top: 1%;
            }
            .header-menu {
                padding: 1% 0.5%;
                display: flex;
                margin-left: 0%;
                margin-top: 15%;
                flex-direction: row;
                justify-content: space-evenly;
            }
            .login-box2 {
                position: absolute;
                top: 2%;
                left: 46%;
                width: 10%;
                transform: translate(-50%, -50%);
                box-sizing: border-box;
            }

            .header-menu > li:hover .submenu {
                display: flex;
                flex-direction: column!important;
            }

            .submenu {
                display: flex;
                position: absolute;
            }
        }
        
        @media (max-width:450px) {
            .flex-container {
                margin-top: 30%;
            }
            .header-menu-link {
                padding: 10px;
            }
          /*  .login-box2 form a {
                margin-top: 20%;
            } */
            .submenu {
                font-size: large;
            }
            .header-menu {
                padding: 1% 0.5%;
                display: flex;
                margin-left: 0%;
                margin-top: 15%;
                flex-direction: row;
                justify-content: space-evenly;
            }
            .header-menu li {
                    /* padding: 5%; */
                    margin: 2%;
            }
            .login-box2 {
                position: absolute;
                top: 4em;
                left: 23%;
                width: 10%;
                transform: translate(-50%, -50%);
                box-sizing: border-box;
            }

            .header-menu > li:hover .submenu {
                display: flex;
                flex-direction: column!important;
            }


            .submenu {
                display: flex;
                position: absolute;
            }

        }
        
        @media (max-width: 340px) {
            .logo {
                top: 1%;
            }

            .submenu {
                font-size: large;
            }
            .flex-container {
                display: flex;
                margin-left: -9%;
                flex-direction: row;
                margin-top: 20%;
                flex-wrap: nowrap;
            }
            .header-menu-link {
                padding: 10px;
            }
            .header-menu {
                padding: 1% 0.5%;
                margin-top: 10%;
                display: flex;
                flex-direction: row;
                align-content: flex-end;
                justify-content: center;
                margin-left: 0%;
                flex-wrap: nowrap;
            }
            .header-menu li {
                    /* padding: 5%; */
                    margin: 2%;
            }
            .login-box2 {
                position: absolute;
                top: 10%;
                left: 23%;
                width: 10%;
                transform: translate(-50%, -50%);
                box-sizing: border-box;
            }

            .header-menu > li:hover .submenu {
                display: flex;
                flex-direction: column!important;
            }

            .submenu {
                display: flex;
                position: absolute;
            }
        }

        /*Header y Nav del Header*/

        .header-menu {
            list-style-type: none;
            margin: 0;
            display: flex;
            padding: 1% 0.5%;
            margin-left: 50%;
        }
        
        .header-menu-link {
            text-decoration: none;
            color: white; 
            padding: 10px 15px;
            display: block;
            text-transform: uppercase;
            font-size: .75em;
            font-weight: 500;
            z-index: 1;
            text-align: center;
        }
        
        .header-menu-link:hover {
            background-color: #555; 
            text-decoration: underline;
        }
        
        .header-menu > li {
            position: relative;
        }
     
        .submenu {
            display: none;
            position: absolute;
            top: 100%; 
            left: 0;
            background-color: rgb(0 0 0 / 92%);
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            z-index: 2;
            white-space: nowrap; 
        }

        .header-menu > li:hover .submenu {
            display: flex;
            flex-direction: row;
            position: absolute;
        }

        .submenu li {
            display: inline-block;
        }