@supports (display: grid) {
    @import url("https://use.typekit.net/wfs8gte.css");
    
        /* http://meyerweb.com/eric/tools/css/reset/ 
        v2.0 | 20110126
        License: none (public domain)
        */
    
        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;
        }
        /* HTML5 display-role reset for older browsers */
        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;
        }
        /* My styles */
        * {
            -webkit-box-sizing: border-box;
                    box-sizing: border-box
        }
    
        .hide {
            display: none;
        }
    
        textarea,
        input.text,
        input[type="text"],
        input[type="button"],
        input[type="submit"],
        .input-checkbox {
            -webkit-appearance: none;
            border-radius: 0;
        }
    
        html, body {
            font-family: sofia-pro,"sofia pro", sans-serif;
            font-size: 10px;
            text-rendering: optimizelegibility;
            -webkit-font-smoothing: antialiased;
            overflow-y: auto;
            overflow-x: hidden;
            scroll-behavior: smooth;
            -ms-scroll-snap-type: none;
                -webkit-scroll-snap-type: none;
                    scroll-snap-type: none;
            -webkit-transition: 150ms ease-in-out;
            -o-transition: 150ms ease-in-out;
            transition: 150ms ease-in-out;
            background: #000;
        }
    
        @media only screen and (min-width: 801px) {
            html, body {
                -webkit-scroll-snap-type: y proximity;
                    -ms-scroll-snap-type: y proximity;
                        scroll-snap-type: y proximity;
            }
        }
    
        h1 {
            font-size: 5.0em;
            text-align: center;
        }
    
        h2 {
            font-size: 4.2em;
        }
    
        h3 {
            font-size: 3.6em;
        }
    
        h4 {
            font-size: 3.0em;
        }
    
        h5 {
            font-size: 2.4em;
        }
    
        p {
            font-size: 1.6em;
            font-weight: 300;
            line-height: 1.8;
            letter-spacing: .05em;
        }
    
        @media only screen and (max-width: 380px) {
            html, body {
                font-size: 7.75px;
                letter-spacing: 0;
            }
        }
    
        @media only screen and (min-width: 381px) and (max-width: 800px) {
            html, body {
                font-size: 8.75px;
                letter-spacing: 0;
            }
        }
    
        @media only screen and (min-width: 1921px) {
            html, body {
                font-size: 12px;
            }
        }
    
        h1, h2, h3, h4, h5 {
            font-weight: 700;
            margin-bottom: .25em;
            line-height: 1.2;
        }
    
        a {
            color: #cdcdcd;
            -webkit-transition: 150ms ease-in-out;
            -o-transition: 150ms ease-in-out;
            transition: 150ms ease-in-out;
        }
    
        a:hover, a:active {
            color: #fff
        }
    
        div {
            margin: auto;
            color: #fff;
            background-size: cover;
            background-repeat: no-repeat;
            display: grid;
        }
    
        #top, #login-page, #about, #skills, #portfolio, #contact {
            display: grid;
            min-height: 100vh !important;
        }
    
        @media only screen and (min-width: 801px) {
            div {
                scroll-snap-align: start;
            }
        }
    
        section {
            position: relative;
            margin: auto;
            padding-top: 0;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }
    
        header {
            width: 100%;
            height: 7em;
            background-image: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%);
            background-image: -webkit-gradient(linear, left top, left bottom, from(black), color-stop(19%, rgba(0, 0, 0, 0.738)), color-stop(34%, rgba(0, 0, 0, 0.541)), color-stop(47%, rgba(0, 0, 0, 0.382)), color-stop(56.5%, rgba(0, 0, 0, 0.278)), color-stop(65%, rgba(0, 0, 0, 0.194)), color-stop(73%, rgba(0, 0, 0, 0.126)), color-stop(80.2%, rgba(0, 0, 0, 0.075)), color-stop(86.1%, rgba(0, 0, 0, 0.042)), color-stop(91%, rgba(0, 0, 0, 0.021)), color-stop(95.2%, rgba(0, 0, 0, 0.008)), color-stop(98.2%, rgba(0, 0, 0, 0.002)), to(transparent));
            background-image: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%);
            border-bottom: none;
            position: fixed;
            z-index: 1000;
        }
    
        @media only screen and (min-width: 801px) {
            header {
                background-image: -o-linear-gradient(left, rgba(0,0,0,.8), rgba(0,0,0,.5));
                background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,.8)), to(rgba(0,0,0,.5)));
                background-image: linear-gradient(to right, rgba(0,0,0,.8), rgba(0,0,0,.5));
                border-bottom: 1px solid rgba(255,255,255,.5);
            }
        }
    
        #navigation {
            height: 7em;
            max-width: 1055px;
            margin: auto;
            background: none;
            display: block;
        }
    
        @media only screen and (min-width: 801px) {
            header {
                height: 7.4em;
            }
            #navigation  {
                height: 7.4em;
                display: contents;
            }
        }
    
        @media only screen and (min-width: 1055px) {
            header {
                height: 7.8em;
            }
            #navigation {
                margin: 0;
            }
        }
    
        #logo {
            margin: 1.4em calc(50vw - 105px);
            height: 35px;
        }
    
        @media only screen and (min-width: 801px) {
            #logo {
                margin: 1.4em;
                float: left;
                height: 44px;
            }
        }
    
        @media only screen and (min-width: 1055px) {
            #logo {
                height: 50px;
            }
        }
    
    
        nav {
            padding: 3.2em 1.6em 3.2em;
            float: right;
        }
    
        @media only screen and (min-width: 801px) and (max-width: 1054px) {
            nav {
                padding: 2.9em 1.6em;
            }
        }
    
        @media only screen and (min-width: 1921px) {
            #logo {
                height: 60px;
                padding-top: 4px;
            }
            header {
                height: 8em;
            }
            nav {
                padding-top: 3.3em; 
            }
        }
    
        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: grid;
            -ms-grid-columns: auto;
            grid-template-columns: auto;
        }
    
        nav ul li {
            display: inline;
            margin-left: 3em;
            -ms-grid-row: 1;
            grid-row: 1;
        }
    
        nav ul li:first-of-type {
            margin-left: 0;
        }
    
        .nav-icon {
            display: none;
        }
    
        nav ul li a {
            position: relative;
            font-size: 1.4em;
            font-weight: 500;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: #aaa;
            text-decoration: none;
            -webkit-transition: 150ms ease-in-out;
            -o-transition: 150ms ease-in-out;
            transition: 150ms ease-in-out;
        }
    
        nav ul li a:hover, nav ul li a:focus, .active {
            color: #fff;
        }
    
        nav ul li a:before {
            content: "";
            position: absolute;
            width: 100%;
            height: .15em;
            bottom: 0;
            left: 0;
            background-color: rgb(42,181,167);
            visibility: hidden;
            -webkit-transform: scaleX(0);
            -ms-transform: scaleX(0);
                transform: scaleX(0);
            -webkit-transition: all 0.3s ease-in-out 0s;
            -o-transition: all 0.3s ease-in-out 0s;
            transition: all 0.3s ease-in-out 0s;
        }
    
        nav ul li a:hover:before {
            visibility: visible;
            -webkit-transform: scaleX(1);
            -ms-transform: scaleX(1);
                transform: scaleX(1);
        }
    
        #login {
            font-size: 1.4em;
            font-weight: 500;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: #aaa;
            border: 1px solid #aaa;
            padding: .55em 1.5em .55em;
            text-decoration: none;
            cursor: pointer;
            -webkit-transition: .3s ease-in-out;
            -o-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
    
        @media only screen and (max-width: 800px) {
            nav ul li a, #login{
                color: #fff;
            }
        }
    
        #login:hover {
            color: #000;
            background-color: #fff;
            border: 1px solid #fff;
        }
    
        #login:hover:before {
            visibility: hidden;
            -webkit-transform: scaleX(0);
            -ms-transform: scaleX(0);
                transform: scaleX(0);
        }
    
        @media only screen and (max-width: 800px) {
            nav {
                background-image: -o-linear-gradient(bottom, black 0%, rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%);
                background-image: -webkit-gradient(linear, left bottom, left top, from(black), color-stop(19%, rgba(0, 0, 0, 0.738)), color-stop(34%, rgba(0, 0, 0, 0.541)), color-stop(47%, rgba(0, 0, 0, 0.382)), color-stop(56.5%, rgba(0, 0, 0, 0.278)), color-stop(65%, rgba(0, 0, 0, 0.194)), color-stop(73%, rgba(0, 0, 0, 0.126)), color-stop(80.2%, rgba(0, 0, 0, 0.075)), color-stop(86.1%, rgba(0, 0, 0, 0.042)), color-stop(91%, rgba(0, 0, 0, 0.021)), color-stop(95.2%, rgba(0, 0, 0, 0.008)), color-stop(98.2%, rgba(0, 0, 0, 0.002)), to(transparent));
                background-image: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%);
                padding: 0;
                float: none;
                position: fixed;
                bottom: 0;
                font-size: .9em;
                height: 7em;
                width: 100vw;
            }
            nav ul {
                display: grid;
                -ms-grid-columns: auto;
                grid-template-columns: auto;
                -ms-grid-rows: 50px;
                grid-template-rows: 50px;
                height: 4.5em;
                padding-top: .5em;
            }
            nav ul li {
                height: 5em;  
                margin: 0 auto; 
                text-align: center 
            }
            nav ul li:first-of-type {
                margin: 0 auto;
                text-align: center;
            }
            .nav-icon {
                display: block;
                font-size: 1.5em;
                padding-bottom: .25em;
            }
            #login {
                border: none;
                padding: 0;
            }
            #login:hover {
                color: #fff;
                background: none;
                border: none;
            }
        }
    
        #login-page {
            display: grid;
            -ms-grid-rows: 1fr auto 1fr;
            grid-template-rows: 1fr auto 1fr;
            -ms-grid-columns: 2em auto 2em;
            grid-template-columns: 2em auto 2em;
            position: fixed;
            top: 0;
            right: 0;
            width: 0;
            -webkit-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;
            -webkit-transition-delay: 0s;
                -o-transition-delay: 0s;
                    transition-delay: 0s;
            background: -o-linear-gradient(top, rgba(25,25,25,.5) 0%, rgba(0,0,0,.5) 100%), -o-linear-gradient(top, rgba(42,181,167,.85) 0%, rgba(170,42,181,.85) 100%), url("../img/login.jpg");
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(25,25,25,.5)), to(rgba(0,0,0,.5))), -webkit-gradient(linear, left top, left bottom, from(rgba(42,181,167,.85)), to(rgba(170,42,181,.85))), url("../img/login.jpg");
            background: linear-gradient(to bottom, rgba(25,25,25,.5) 0%, rgba(0,0,0,.5) 100%), linear-gradient(to bottom, rgba(42,181,167,.85) 0%, rgba(170,42,181,.85) 100%), url("../img/login.jpg");
            background-size: cover;
            background-position: center center;
            z-index: 10000;
        }
    
        #login-form {
            text-align: center;
            -ms-grid-row: 2;
            grid-row: 2;
            -ms-grid-column: 2;
            grid-column: 2;
            opacity: 0;
            height: auto;
            width: 44em;
            -webkit-transition: .5s ease-in-out;
            -o-transition: .5s ease-in-out;
            transition: .5s ease-in-out;
            -webkit-transition-delay: .3s;
                -o-transition-delay: .3s;
                    transition-delay: .3s;
            margin: auto;
            padding: 3.5em 5.5em;
        }
    
        #login-form p {
            text-align: center;
            margin-top: 1em;
            font-size: 1.4em;
        }
    
        #login-form p span {
            color: #aaa;
            font-size: 1.1em;
            font-weight: 600;
            letter-spacing: .15em;
            text-transform: uppercase;
            text-align: center;
            margin: 1.2em auto 0;
            cursor: pointer;
            -webkit-transition: .3s ease-in-out;
            -o-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
    
        #login-form p span:hover {
            color: #fff;
        }
    
        @media only screen and (max-width: 500px) {
            #login-form {
                text-align: center;
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 50px 10px;
                background: none;
            }
            #login-form p {
                margin-top: 2em;
            }
            #login-form p span{
                color: #fff;
            }
            #username, #password {
                text-align: center;
                margin: 0 auto 1.5em;
                max-width: 20em;
            }
            #login-send {
                max-width: 22.7em;
            }
        }
    
        #top {
            -ms-grid-rows: 1fr;
            grid-template-rows: 1fr;
            -ms-grid-columns: 1fr;
            grid-template-columns: 1fr;
            background: -o-linear-gradient(top, rgba(0,0,0,.5), rgba(0,0,0,0)), url("../img/top.jpg");
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,.5)), to(rgba(0,0,0,0))), url("../img/top.jpg");
            background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0)), url("../img/top.jpg");
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
        }
    
        #top section {
            width: auto;
            padding: 0 1em;
        }
    
        #tagline {
            text-transform: uppercase;
            font-size: 1.8em;
            text-align: center;
            line-height: 1.4;
            max-width: 40em;
            font-weight: 500;
            margin: auto;
        }
    
        #about {
            -ms-grid-columns: 1fr 43em 3em 58em 1fr;
            grid-template-columns: 1fr 43em 3em 58em 1fr;
            -ms-grid-rows: 8em 1fr auto 1fr;
            grid-template-rows: 8em 1fr auto 1fr;
            background: #322960;
        }
    
    
        @media only screen and (max-width: 1055px) {
            #about {
                -ms-grid-columns: 2em 1fr 3em 496px 2em;
                grid-template-columns: 2em 1fr 3em 496px 2em;
            }
            #about::after {
                top: 0;
                left: 1000px;
                background-image: -o-linear-gradient(left, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 100%);
                background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,.6)), to(rgba(0,0,0,.3)));
                background-image: linear-gradient(to right, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 100%);
                -ms-grid-column: 1;
                -ms-grid-column-span: 5;
                grid-column: 1/6;
            }
        }
        #about::before {
            content: '';
            background-image: -o-linear-gradient(110deg, rgba(42,181,167,.85) 0%, rgba(42,181,167,0) 75%),-o-linear-gradient(left, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
            background-image: linear-gradient(-20deg, rgba(42,181,167,.85) 0%, rgba(42,181,167,0) 75%),linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%);
            -ms-grid-column: 1;
            -ms-grid-column-span: 5;
            grid-column: 1/6    ;
            -ms-grid-row: 1;
            -ms-grid-row-span: 4;
            grid-row: 1/5;
            z-index: 100;
        }
    
        #about::after {
            position: relative;
            content: '';
            height: 41em;
            width: 108em;
            top: calc(50% - (41em) / 2 + 4em);
            left: 0;
            background-image: -o-linear-gradient(left, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%);
            background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,.5)), to(rgba(0,0,0,0)));
            background-image: linear-gradient(to right, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%);
            -ms-grid-column: 3;
            -ms-grid-column-span: 3;
            grid-column: 3/6;
            -ms-grid-row: 1;
            -ms-grid-row-span: 4;
            grid-row: 1/5;
            z-index: 150;
        }
    
        #about-pic {
            background-image: -o-linear-gradient(left, rgba(50,41,96,0) 50%, rgba(50,41,96,1) 100%), url("../img/portrait.jpg");
            background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(50,41,96,0)), to(rgba(50,41,96,1))), url("../img/portrait.jpg");
            background-image: linear-gradient(to right, rgba(50,41,96,0) 50%, rgba(50,41,96,1) 100%), url("../img/portrait.jpg");
            background-size: cover;
            background-position: top center;
            width: 100%;
            -ms-grid-column: 1;
            -ms-grid-column-span: 3;
            grid-column: 1/4;
            -ms-grid-row: 1;
            -ms-grid-row-span: 4;
            grid-row: 1/5;
            z-index: 50;
        }
    
        #about section {
            padding-top: 0px;
            text-align: left;
            -ms-grid-column: 4;
            grid-column: 4;
            -ms-grid-row: 3;
            grid-row: 3;
            z-index: 200;
        }
        #about section h2 {
            margin-top: 0px;
        }
        #about section h2, #about section p {
            width: auto;
            padding: 0px;
        }
    
        @media only screen and (max-width: 800px) {
            #about {
                -ms-grid-columns: 2em 1fr 2em;
                grid-template-columns: 2em 1fr 2em;
                -ms-grid-rows: 7em 1fr 7em;
                grid-template-rows: 7em 1fr 7em;
            }
            #about::after {
                height: 100vh;
                width: 100vw;
                top: 0;
                right: 100px;
                background-image: -o-linear-gradient(left, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 100%);
                background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,.6)), to(rgba(0,0,0,.3)));
                background-image: linear-gradient(to right, rgba(0,0,0,.6) 0%, rgba(0,0,0,.3) 100%);
                -ms-grid-column: 1;
                -ms-grid-column-span: 3;
                grid-column: 1/4;
                -ms-grid-row: 1;
                -ms-grid-row-span: 3;
                grid-row: 1/4;
            }
            #about-pic {
                -ms-grid-column: 1;
                -ms-grid-column-span: 3;
                grid-column: 1/4;
                -ms-grid-row: 1;
                -ms-grid-row-span: 3;
                grid-row: 1/4;
            }
            #about section {
                -ms-grid-column: 2;
                grid-column: 2;
                -ms-grid-row: 2;
                grid-row: 2;
                max-width: 496px;
                text-align: center;
            }
        }
    
        #skills {
            -ms-grid-columns: 1fr 58em 46em 1fr;
            grid-template-columns: 1fr 58em 46em 1fr;
            -ms-grid-rows: 8em 1fr auto 1fr;
            grid-template-rows: 8em 1fr auto 1fr;
            color: #121212;
            background-image: url("../img/skills.jpg");
            background-attachment: fixed;
            background-size: cover;
            background-position: center right;
        }
    
        
    
        @media only screen and (max-width: 1055px) {
            #skills {
                -ms-grid-columns: 2em 58em auto 2em;
                grid-template-columns: 2em 58em auto 2em; 
                background-size: cover;
            }
        }
    
        @media only screen and (max-width: 800px) {
            #skills {
                -ms-grid-columns: 2em 1fr 2em;
                grid-template-columns: 2em 1fr 2em;
                -ms-grid-rows: 7em 1fr auto 1fr 7em;
                grid-template-rows: 7em 1fr auto 1fr 7em;
                background: url("../img/skills-sm.jpg");
                background-position: center right;
                background-size: cover;
                color: #fff;
                text-align: center;
            }
        }
    
        #skills::before {
            content: '';
            background-image: -o-linear-gradient(70deg, rgba(170,42,181,.85) 0%, rgba(170,42,181,0) 75%);
            background-image: linear-gradient(20deg, rgba(170,42,181,.85) 0%, rgba(170,42,181,0) 75%);
            background-attachment: scroll;
            -ms-grid-column: 1;
            -ms-grid-column-span: 4;
            grid-column: 1/5;
            -ms-grid-row: 1;
            -ms-grid-row-span: 4;
            grid-row: 1/5;
            z-index: 100;
        }

        @media only screen and (max-width: 800px) {
            #skills::before {
                -ms-grid-row: 1;
                -ms-grid-row-span: 5;
                grid-row: 1/6;
            }
        }
    
        #skills::after {
            position: relative;
            content: '';
            height: 41em;
            width: 108em;
            top: calc(50% - (41em) / 2 + 4em);
            left: calc(50% - 100em);
            background-image: -o-linear-gradient(right, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 100%);
            background-image: -webkit-gradient(linear, right top, left top, from(rgba(255,255,255,.9)), to(rgba(255,255,255,0)));
            background-image: linear-gradient(to left, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 100%);
            -ms-grid-column: 1;
            -ms-grid-column-span: 4;
            grid-column: 1/5;
            -ms-grid-row: 1;
            -ms-grid-row-span: 4;
            grid-row: 1 / 5;
            z-index: 150;
        }
    
        @media only screen and (max-width: 800px) {
            #skills::after {
                position: relative;
                content: '';
                height: 100vh;
                width: 100vw;
                top: 0;
                left: 0;
                background-image: -o-linear-gradient(right, rgba(0,0,0,.9) 0%, rgba(0,0,0,.8) 100%);
                background-image: -webkit-gradient(linear, right top, left top, from(rgba(0,0,0,.9)), to(rgba(0,0,0,.8)));
                background-image: linear-gradient(to left, rgba(0,0,0,.9) 0%, rgba(0,0,0,.8) 100%);
                -ms-grid-column: 1;
                -ms-grid-column-span: 3;
                grid-column: 1/4;
                -ms-grid-row: 1;
                -ms-grid-row-span: 3;
                grid-row: 1/4;
                z-index: 50;
            }
        }
    
        #skills section {
            padding-top: 0px;
            margin: 0;
            -ms-grid-column: 2;
            grid-column: 2;
            -ms-grid-row: 3;
            grid-row: 3;
            z-index: 200;
        }
    
        @media only screen and (max-width: 800px) {
            #skills section{
                -ms-grid-row: 3;
                grid-row: 3;
            }
        }
    
        #skills section h2 {
            text-align: left;
            margin: 0 auto .25em;
            width: auto;
        }
    
        #skills section p {
            -webkit-column-count: 2;
            -moz-column-count: 2;
                    column-count: 2;
            -webkit-column-gap: 0;
            -moz-column-gap: 0;
                    column-gap: 0;
            margin-bottom: 1em;
            padding: 0px;
            text-align: left !important;
            letter-spacing: 0;
        }

        #skills section i {
            font-size: 2.5em; 
            color: #333;
            transition: 300ms ease-in-out;
        }

        #skills section i:hover {
            font-size: 2.5em; 
            color: #000
        }
    
        @media only screen and (min-width: 550px) {
            #skills section p {
                font-family: sofia-pro, "sofia pro", sans-serif;
                -webkit-column-count: 3;
                -moz-column-count: 3;
                        column-count: 3;
            }
        }
    
        #download {
            font-size: 1.4em;
            font-weight: 400;
            width: 14em !important;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: #121212;
            border: 1px solid #121212;
            padding: .55em 1.5em .55em;
            margin: 0;
            text-decoration: none;
            -webkit-transition: .3s ease-in-out;
            -o-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
    
        #download:hover {
            background-color: #121212;
            color: #fff;
        }
    
        @media only screen and (max-width: 800px) {
            #skills section h2 {
                text-align: center;
            } 

            #download {
                color: #fff;
                border: 1px solid #fff;
                width: 14em;
                margin: auto;
            }
    
            #download:hover {
                background-color: #fff;
                color: #121212;
            }
        }
    
    
        #portfolio {
            display: grid;
            -ms-grid-rows: 1fr;
            grid-template-rows: 1fr;
            min-height: 100vh !important;
            text-align: center;
            background: rgb(42,181,167);
            background-size: cover;
            background-position: center center;
        }
    
        #portfolio section {
            -ms-grid-row: 1;
            grid-row: 1;
            display: grid;
            margin: 100px auto 50px;
            padding: 0 2em;
        }
    
        @media only screen and (max-width: 800px) {
            #portfolio section {
                margin: 70px auto 50px;
            }
        }
    
        #portfolio section div{
            display: grid;
            -ms-grid-columns: 1fr 1em 1fr;
            grid-template-columns: 1fr 1fr;
            grid-gap: 1em;
            max-width: 900px;
        }
    
        @media only screen and (max-width: 800px) {
            #portfolio section div{
                -ms-grid-columns: minmax(1fr, 330px);
                grid-template-columns: minmax(1fr, 330px);
                -ms-grid-rows: auto;
                grid-template-rows: auto;
            }
        }
    
        #portfolio section div h2 {
            -ms-grid-column: 1;
            -ms-grid-column-span: 2;
            grid-column: 1/3;
            -ms-grid-row: 1;
            grid-row: 1;
        }

        @media only screen and (max-width: 800px) {
            #portfolio section div h2 {
                -ms-grid-column: 1;
                -ms-grid-column-span: 2;
                grid-column: 1/3;
                -ms-grid-row: 1;
                grid-row: 1;
            }
        }
    
        #showcase1 {
            -ms-grid-row: 2;
            -ms-grid-row-span: 1;
            grid-row: 2/3;
            -ms-grid-column: 1;
            -ms-grid-column-span: 1;
            grid-column: 1/2;
        }
    
        #cluster {
            background-image: url("../img/cluster.jpg");
        }
    
        #showcase2 {
            -ms-grid-row: 2;
            -ms-grid-row-span: 1;
            grid-row: 2/3;
            -ms-grid-column: 2;
            -ms-grid-column-span: 1;
            grid-column: 2/3;
        }
    
        @media only screen and (max-width: 800px) {
            #showcase2 {
                -ms-grid-column: 1;
                -ms-grid-column-span: 1;
                grid-column: 1/2;
                -ms-grid-row: 3;
                -ms-grid-row-span: 1;
                grid-row: 3/4;
            }
        }
    
        #sightsy {
            background-image: url("../img/sightsy.jpg");
        }
    
        #showcase3 {
            -ms-grid-row: 3;
            -ms-grid-row-span: 1;
            grid-row: 3/4;
            -ms-grid-column: 1;
            -ms-grid-column-span: 1;
            grid-column: 1/2;
        }
    
        @media only screen and (max-width: 800px) {
            #showcase3 {
                -ms-grid-column: 1;
                -ms-grid-column-span: 1;
                grid-column: 1/2;
                -ms-grid-row: 4;
                -ms-grid-row-span: 1;
                grid-row: 4/5;
            }
        }
    
        #know {
            background-image: url("../img/know.jpg");
        }
    
        #showcase4 {
            -ms-grid-row: 3;
            -ms-grid-row-span: 1;
            grid-row: 3/4;
            -ms-grid-column: 2;
            -ms-grid-column-span: 1;
            grid-column: 2/3;
        }
    
        @media only screen and (max-width: 800px) {
            #showcase4 {
                -ms-grid-column: 1;
                -ms-grid-column-span: 1;
                grid-column: 1/2;
                -ms-grid-row: 5;
                -ms-grid-row-span: 1;
                grid-row: 5/6;
            }
        }
    
        #guest {
            background-image: url("../img/guest.jpg");
        }
    
        #showcase5 {
            -ms-grid-row: 4;
            -ms-grid-row-span: 1;
            grid-row: 4/5;
            -ms-grid-column: 1;
            -ms-grid-column-span: 1;
            grid-column: 1/2;
        }
    
        @media only screen and (max-width: 800px) {
            #showcase5 {
                -ms-grid-column: 1;
                -ms-grid-column-span: 1;
                grid-column: 1/2;
                -ms-grid-row: 6;
                -ms-grid-row-span: 1;
                grid-row: 6/7;
            }
        }
    
        #veritas {
            background-image: url("../img/veritas.jpg");
        }
    
        #showcase6 {
            -ms-grid-row: 4;
            -ms-grid-row-span: 1;
            grid-row: 4/5;
            -ms-grid-column: 2;
            -ms-grid-column-span: 1;
            grid-column: 2/3;
        }
    
        @media only screen and (max-width: 800px) {
            #showcase6 {
                -ms-grid-column: 1;
                -ms-grid-column-span: 1;
                grid-column: 1/2;
                -ms-grid-row: 7;
                -ms-grid-row-span: 1;
                grid-row: 7/8;
            }
        }
    
        #give {
            background-image: url("../img/give.jpg");
        }
    
        #portfolio section div a {
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            text-transform: uppercase;
            color: #fff;
            width: 100%;
        }
    
        @media only screen and (max-width: 800px) {
            #portfolio section div a {
                -ms-grid-column: 1;
                -ms-grid-column-span: 2;
                grid-column: 1/3;
            }
        }
    
    
        #portfolio section div a p {
            grid-gap: .4em;
            font-size: 8px;
            font-weight: 600;
        }
    
        @media only screen and (min-width: 401px) {
            #portfolio section div a p{
                font-size: 10px;
            }
        }
    
        #portfolio section div a div {
            width: 100%;
            padding-top: 56.25%;
            background-size: cover;
            background-position: center;
            -webkit-transition: 150ms ease-in-out;
            -o-transition: 150ms ease-in-out;
            transition: 150ms ease-in-out;
            -webkit-box-shadow: 0px 3px 10px rgba(0,0,0,.2);
                    box-shadow: 0px 3px 10px rgba(0,0,0,.2);
        }
    
        #portfolio section div a div:hover {
            -webkit-transform: scale(.985);
                -ms-transform: scale(.985);
                    transform: scale(.985);
            -webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.25);
                    box-shadow: 0px 1px 5px rgba(0,0,0,.25); 
        }
    
        .fancy-dev p {
            margin-top: 1em;
        }
    
        .fancybox-content {
            max-width: 900px !important;
        }
    
        .fancybox-button svg {
            color: #808080;
        }
    
        .showcase {
            color: #000;
            display: grid;
            -ms-grid-columns: 1fr;
            grid-template-columns: 1fr;
            grid-gap: 2em;
            -ms-grid-rows: auto;
            grid-template-rows: auto;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }
    
        @media only screen and (min-width: 801px) {
            .showcase {
                -ms-grid-columns: 1.25fr 3em 1.75fr;
                grid-template-columns: 1.25fr 1.75fr;
                grid-gap: 3em;
            } 
        }
    
        .screenshot {
            -ms-grid-column: 1;
            grid-column: 1;
            width: 100%;
            max-width: 325px;
            margin: auto;
        }
    
        #screen-sightsy {
            background-image: url("../img/cluster.gif")
        }
    
        #screen-cluster {
            background-image: url("../img/cluster.gif")
        }
    
        @media only screen and (max-width: 500px) {
            .screen-logo {
                height: 70px;
            }
        }
    
        .screen-logo {
            margin: 0 auto 2em;
        }
    
        .discription {
            color: #000;
            -ms-grid-column: 1;
            grid-column: 1;
        }
    
        @media only screen and (min-width: 801px) {
            .discription {
                -ms-grid-column: 2;
                grid-column: 2;
            }
        }
    
        .discription h5 {
            text-align: center;
        }
    
        @media only screen and (max-width: 475px) {
            .fancybox-content {
                padding: 40px 2em 2em !important;
            }
        }
    
        #contact {
            -ms-grid-columns: 1fr 80em 1fr;
            grid-template-columns: 1fr 80em 1fr;
            -ms-grid-rows: 8em 1fr 41em 1fr 4em;
            grid-template-rows: 8em 1fr 41em 1fr 4em;
            height: 100vh;
        }
    
    
        @media only screen and (max-width: 800px) {
            #contact {
                -ms-grid-columns: 2em 1fr 2em;
                grid-template-columns: 2em 1fr 2em;
                -ms-grid-rows: 7em 1fr auto auto 1fr 7em;
                grid-template-rows: 7em 1fr auto auto 1fr 7em;
            }
            #contact > *:nth-child(1) {
                        -ms-grid-row: 1;
                        -ms-grid-column: 1;
            }
            #contact > *:nth-child(2) {
                        -ms-grid-row: 1;
                        -ms-grid-column: 2;
            }
            #contact > *:nth-child(3) {
                        -ms-grid-row: 1;
                        -ms-grid-column: 3;
            }
            #contact > *:nth-child(4) {
                        -ms-grid-row: 2;
                        -ms-grid-column: 1;
            }
            #contact > *:nth-child(5) {
                        -ms-grid-row: 2;
                        -ms-grid-column: 2;
            }
            #contact > *:nth-child(6) {
                        -ms-grid-row: 2;
                        -ms-grid-column: 3;
            }
            #contact > *:nth-child(7) {
                        -ms-grid-row: 3;
                        -ms-grid-column: 1;
            }
            #contact > *:nth-child(8) {
                        -ms-grid-row: 3;
                        -ms-grid-column: 2;
            }
            #contact > *:nth-child(9) {
                        -ms-grid-row: 3;
                        -ms-grid-column: 3;
            }
            #contact > *:nth-child(10) {
                        -ms-grid-row: 4;
                        -ms-grid-column: 1;
            }
            #contact > *:nth-child(11) {
                        -ms-grid-row: 4;
                        -ms-grid-column: 2;
            }
            #contact > *:nth-child(12) {
                        -ms-grid-row: 4;
                        -ms-grid-column: 3;
            }
            #contact > *:nth-child(13) {
                        -ms-grid-row: 5;
                        -ms-grid-column: 1;
            }
            #contact > *:nth-child(14) {
                        -ms-grid-row: 5;
                        -ms-grid-column: 2;
            }
            #contact > *:nth-child(15) {
                        -ms-grid-row: 5;
                        -ms-grid-column: 3;
            }
            #contact > *:nth-child(16) {
                        -ms-grid-row: 6;
                        -ms-grid-column: 1;
            }
            #contact > *:nth-child(17) {
                        -ms-grid-row: 6;
                        -ms-grid-column: 2;
            }
            #contact > *:nth-child(18) {
                        -ms-grid-row: 6;
                        -ms-grid-column: 3;
            }
        }
    
        #contact section {
            -ms-grid-column: 2;
            grid-column: 2;
            -ms-grid-row: 3;
            grid-row: 3;
            width: 80em;
            height: 41em;
            text-align: left;
            background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5)0%, rgba(0, 0, 0, 0.369) 19%, rgba(0, 0, 0, 0.2701) 34%, rgba(0, 0, 0, 0.191) 47%, rgba(0, 0, 0, 0.139) 56.5%, rgba(0, 0, 0, 0.126) 65%, rgba(0, 0, 0, 0.097) 73%, rgba(0, 0, 0, 0.0375) 80.2%, rgba(0, 0, 0, 0.021) 86.1%, rgba(0, 0, 0, 0.0105) 91%, rgba(0, 0, 0, 0.004) 95.2%, rgba(0, 0, 0, 0.001) 98.2%, transparent 100%);
            background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), color-stop(19%, rgba(0, 0, 0, 0.369)), color-stop(34%, rgba(0, 0, 0, 0.2701)), color-stop(47%, rgba(0, 0, 0, 0.191)), color-stop(56.5%, rgba(0, 0, 0, 0.139)), color-stop(65%, rgba(0, 0, 0, 0.126)), color-stop(73%, rgba(0, 0, 0, 0.097)), color-stop(80.2%, rgba(0, 0, 0, 0.0375)), color-stop(86.1%, rgba(0, 0, 0, 0.021)), color-stop(91%, rgba(0, 0, 0, 0.0105)), color-stop(95.2%, rgba(0, 0, 0, 0.004)), color-stop(98.2%, rgba(0, 0, 0, 0.001)), to(transparent));
            background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5)0%, rgba(0, 0, 0, 0.369) 19%, rgba(0, 0, 0, 0.2701) 34%, rgba(0, 0, 0, 0.191) 47%, rgba(0, 0, 0, 0.139) 56.5%, rgba(0, 0, 0, 0.126) 65%, rgba(0, 0, 0, 0.097) 73%, rgba(0, 0, 0, 0.0375) 80.2%, rgba(0, 0, 0, 0.021) 86.1%, rgba(0, 0, 0, 0.0105) 91%, rgba(0, 0, 0, 0.004) 95.2%, rgba(0, 0, 0, 0.001) 98.2%, transparent 100%);
            padding: 3.5em 5.5em;
            display: grid;
            -ms-grid-columns: calc(47% - 1.5em) 3em calc(53% - 1.5em);
            grid-template-columns: calc(47% - 1.5em) calc(53% - 1.5em);
            -ms-grid-rows: auto;
            grid-template-rows: auto;
            grid-gap: 3em;
            z-index: 500;
        }
    
        @media only screen and (max-width: 800px) {
            #contact section {
                text-align: center;
                padding: 0;
                -ms-grid-column: 1;
                -ms-grid-column-span: 4;
                grid-column: 1/4;
                -ms-grid-row: 1;
                -ms-grid-row-span: 3;
                grid-row: 1/3;
                width: 100%;
                height: 100vh;
                -ms-grid-columns: 2em 1fr 2em;
                grid-template-columns: 2em 1fr 2em;
                -ms-grid-rows: 7em 1fr auto auto 1fr 7em;
                grid-template-rows: 7em 1fr auto auto 1fr  7em;
                grid-gap: 0;
            }
            #contact section > *:nth-child(1) {
                        -ms-grid-row: 1;
                        -ms-grid-column: 1;
            }
            #contact section > *:nth-child(2) {
                        -ms-grid-row: 1;
                        -ms-grid-column: 3;
            }
            #contact section > *:nth-child(3) {
                        -ms-grid-row: 1;
                        -ms-grid-column: 5;
            }
            #contact section > *:nth-child(4) {
                        -ms-grid-row: 3;
                        -ms-grid-column: 1;
            }
            #contact section > *:nth-child(5) {
                        -ms-grid-row: 3;
                        -ms-grid-column: 3;
            }
            #contact section > *:nth-child(6) {
                        -ms-grid-row: 3;
                        -ms-grid-column: 5;
            }
            #contact section > *:nth-child(7) {
                        -ms-grid-row: 5;
                        -ms-grid-column: 1;
            }
            #contact section > *:nth-child(8) {
                        -ms-grid-row: 5;
                        -ms-grid-column: 3;
            }
            #contact section > *:nth-child(9) {
                        -ms-grid-row: 5;
                        -ms-grid-column: 5;
            }
            #contact section > *:nth-child(10) {
                        -ms-grid-row: 7;
                        -ms-grid-column: 1;
            }
            #contact section > *:nth-child(11) {
                        -ms-grid-row: 7;
                        -ms-grid-column: 3;
            }
            #contact section > *:nth-child(12) {
                        -ms-grid-row: 7;
                        -ms-grid-column: 5;
            }
            #contact section > *:nth-child(13) {
                        -ms-grid-row: 9;
                        -ms-grid-column: 1;
            }
            #contact section > *:nth-child(14) {
                        -ms-grid-row: 9;
                        -ms-grid-column: 3;
            }
            #contact section > *:nth-child(15) {
                        -ms-grid-row: 9;
                        -ms-grid-column: 5;
            }
            #contact section > *:nth-child(16) {
                        -ms-grid-row: 11;
                        -ms-grid-column: 1;
            }
            #contact section > *:nth-child(17) {
                        -ms-grid-row: 11;
                        -ms-grid-column: 3;
            }
            #contact section > *:nth-child(18) {
                        -ms-grid-row: 11;
                        -ms-grid-column: 5;
            }
        }
    
        #contact::before {
            content: '';
            background-image: -o-linear-gradient(290deg, rgba(170,42,181,1) 0%, rgba(170,42,181,0) 75%);
            background-image: linear-gradient(160deg, rgba(170,42,181,1) 0%, rgba(170,42,181,0) 75%);
            background-attachment: scroll;
            -ms-grid-column: 1;
            -ms-grid-column-span: 3;
            grid-column: 1/4;
            -ms-grid-row: 1;
            -ms-grid-row-span: 6;
            grid-row: 1/7;
            z-index: 100;
        }
    
        @media only screen and (max-width: 800px) {
            #contact::before {
                background-image: -o-linear-gradient(290deg, rgba(170,42,181,1) 0%, rgba(170,42,181,0) 50%);
                background-image: linear-gradient(160deg, rgba(170,42,181,1) 0%, rgba(170,42,181,0) 50%);
                -ms-grid-column: 1;
                -ms-grid-column-span: 3;
                grid-column: 1/4;
                -ms-grid-row: 1;
                -ms-grid-row-span: 3;
                grid-row: 1/4;
            }
        }
    
        #contact::after {
            content: '';
            background-image: -o-linear-gradient(250deg, rgba(42,181,167,1) 0%, rgba(42,181,167,0) 75%);
            background-image: linear-gradient(-160deg, rgba(42,181,167,1) 0%, rgba(42,181,167,0) 75%);
            background-attachment: scroll;
            -ms-grid-column: 1;
            -ms-grid-column-span: 3;
            grid-column: 1/4;
            -ms-grid-row: 1;
            -ms-grid-row-span: 6;
            grid-row: 1/7;
            z-index: 100;
        }
    
        @media only screen and (max-width: 800px) {
            #contact::after {
                background-image: -o-linear-gradient(250deg, rgba(42,181,167,1) 0%, rgba(42,181,167,0) 50%);
                background-image: linear-gradient(-160deg, rgba(42,181,167,1) 0%, rgba(42,181,167,0) 50%);
                -ms-grid-column: 1;
                -ms-grid-column-span: 3;
                grid-column: 1/4;
                -ms-grid-row: 1;
                -ms-grid-row-span: 3;
                grid-row: 1/4;
            }
        }
    
        #contact section div {
            -ms-grid-column: 1;
            grid-column: 1;
            -ms-grid-row: 1;
            -ms-grid-row-span: 1;
            grid-row: 1/2;
            -ms-grid-row-align: start;
                align-self: start;
        }
    
        @media only screen and (max-width: 800px) {
            #contact section div {
                -ms-grid-column: 2;
                grid-column: 2;
                -ms-grid-row: 3/4;
                grid-row: 3/4;
                -ms-grid-row-align: end;
                    align-self: end;
            }
        }
    
        #contact section form {
            -ms-grid-column: 2;
            grid-column: 2;
            -ms-grid-row: 1;
            -ms-grid-row-span: 2;
            grid-row: 1/3;
            -ms-grid-row-align: start;
                align-self: start;
        }
    
        #contact section form h3{
            margin: .5em auto;
        }
    
        @media only screen and (max-width: 800px) {
            #contact section form {
                margin-top: 1em;
                -ms-grid-column: 2;
                grid-column: 2;
                -ms-grid-row: 4/5;
                grid-row: 4/5;
                max-width: 100%;
            }
        }
    
        label, input, textarea{
            display: block;
        }
    
        label {
            font-size: 1.2em;
            letter-spacing: .05em;
            text-transform: uppercase;
            font-weight: 500;
            padding-bottom: .5em;
        }
    
        input, textarea {
            font-family: sofia-pro, "sofia pro", sans-serif;
            color: #fff;
            font-size: 1.6em;
            font-weight: 600;
            letter-spacing: .075em;
            margin-bottom: 1em;
            width: 100%;
            background-color: rgba(255,255,255,0);
            -webkit-transition: 150ms ease-in-out;
            -o-transition: 150ms ease-in-out;
            transition: 150ms ease-in-out;
        }
    
        input {
            border: none;
            border-bottom: 1px solid rgb(42,181,167);
            height: 2em;
            padding: .2em .3em 0;;
        }
    
        textarea {
            height: 11.75em;
            resize: none;
            border: 1px solid rgb(42,181,167);
            padding: .5em .3em;
        }
    
        @media only screen and (max-height: 575px) {
            textarea {
                height: 9em;
            }
        }
    
        input:focus, textarea:focus {
            background: rgba(63,133,152,.25);
            outline: none !important;
        }
    
        ::-webkit-input-placeholder {
            color: #aaa
        }
        ::-moz-placeholder {
            color: #aaa
        }
        :-ms-input-placeholder {
            color: #aaa
        }
        ::-ms-input-placeholder {
            color: #aaa
        }
        ::placeholder {
            color: #aaa
        }
    
        #send, #login-send{
            cursor: pointer;
            font-size: 1.4em;
            font-weight: 400;
            letter-spacing: .05em;
            text-transform: uppercase;
            color: #fff;
            border: 1px solid rgb(42,181,167);
            background: none;
            padding: .45em 1.5em .5em;
            height: 2.6em;
            width: 100%;
            text-decoration: none;
            -webkit-transition: .3s ease-in-out;
            -o-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
    
        #login-send {
            cursor: not-allowed;
        }
    
        @media only screen and (max-width: 500px) {
            #send, #login-send {
                background: rgb(42,181,167);
            }
        }
    
        #send:focus, #login-send:focus {
            background-color: rgba(63,133,152,.25);
            outline: none !important;
        }
    
        #send:hover, #login-send:hover {
            background-color: rgb(42,181,167);
            color: #000;
        }
    
        @media only screen and (max-width: 800px) {
            footer {
                display: none;
            }
        }
    
        footer {
            color: #fff;
            position: relative;
            background: none;
            height: 0;
            width: 100%;
            bottom: 9em;
            right: 0;
            text-align: center;
            letter-spacing: .05em;
            font-weight: 500;
            text-transform: uppercase;
            -ms-flex-item-align: start;
                -ms-grid-row-align: start;
                align-self: start;
            z-index: 200;
        }
    
        @media only screen and (min-width: 801px) {
            footer {
                bottom: 2em;
            }
        }
    }