* {
    box-sizing: border-box;
}
:root {
    /* ===== Color theme�Bright =====


        background-color: rgba(1, 1, 1, 0.4);
        rgb(197,171,229); #640B7A


        //gb #404040;
    */
    --hsl-h: 0;
    --hsl-s: 0%;
    --hsl-l: 50%;
    /*--color: hsl(var(--hsl-h), var(--hsl-s), var(--hsl-l));*/
    --color: rgb(197,171,229);
    --color3: #D933FF;
    /*--color-light: hsl(var(--hsl-h), var(--hsl-s), calc(var(--hsl-l) + (100% - var(--hsl-l)) * .9 ) );*/
    --color-light: #FBF5F3;
    /*--color-dark: hsl(var(--hsl-h), var(--hsl-s), calc(var(--hsl-l) * .7 ) );*/
    --color-dark: #141414;
    /*--color-bg: hsl(var(--hsl-h), var(--hsl-s), 99.5%);*/
    --color-bg: #0f0f0f;
    --color-bg1: #141414;
    --color-bg2: #B4B8AB;
    --color-bg3: #393939;
    /*--color-text: hsl(var(--hsl-h), var(--hsl-s), calc(var(--hsl-l) * .4 ) );*/
    --color-text: #888888; /*#757575;*/
    --color-text-gray: #E7E7E7;
    --color-text-light-gray: #f1f1f1;
    --hsl2-h: 20;
    --hsl2-s: var(--hsl-s);
    --hsl2-l: var(--hsl-l);
    /*--color2: hsl(var(--hsl2-h), var(--hsl2-s), var(--hsl2-l));*/
    --color1: #140626;
    --color2: #D933FF;
    --color4: #F4F9E9;
    --color-white: #fff;
    --color-purp: #640B7A;
    --color-sidebar: var(--color-bg);
    --color-bord: rgb(231, 231, 231);
}

body {
    margin: 0;
    background-color: var(--color-bg3);
    font-family: Verdana, sans-serif;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.5;
}

#root {
    margin: 0 auto;
    text-align: center;
    position: relative;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", "Segoe UI", sans-serif;
    font-weight: 400;
    margin: 10px 0;
}

h1, h2 {
    font-family: "Playfair", system-ui;
    font-size: 38px;
    font-weight: 400;
    text-transform:uppercase;
}

h2 {
    margin: 0px 0px 5px 0px;
}

h3 {
    font-size: 24px;
}

a:visited {
    color: var(--color3);
}
a:hover {
    color: var(--color);
}

footer a i.fa,
footer .fa {
    color: var(--color-text-gray);
}

.ac {
    text-align: center;
}


.s-hr {
    width: 300px;
}

.gm-jumbo {
    font-size: 50px !important;
}

.gm-htext {
    font-family: "Playfair", system-ui;
    font-size: 24px;
    color: var(--color3);
    text-transform: uppercase; 
    margin: 0px;
    margin-bottom: 12px;
    font-weight: 600;
}

    .gm-htext.alt {
        color: var(--color-white);
    }

.gmh {
    position:absolute;
    left:-9999px;
}



.gm-display-wrap {
    white-space: "nowrap";
}

.bg-backing {
    background-color: var(--color-bg3);
}

.gm-text-light-grey,
.gm-hover-text-light-grey:hover,
.gm-text-light-gray,
.gm-hover-text-light-gray:hover {
    color: var(--color-text-light-gray) !important;
}

.gm-padding-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.gm-padding-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}

.gm-text-grey, 
.gm-hover-text-grey:hover, 
.gm-text-gray, 
.gm-hover-text-gray:hover {
    color: var(--color-text-gray) !important;
}



.gm-justify {
    text-align: justify !important;
}

.gm-tc {
    text-align:center;
}

.gm-content {
    max-width: 980px;
}

.gm-content, .gm-auto {
    margin-left: auto;
    margin-right: auto;
}


/* Header/logo Title */
.header {
    padding: 20px 0px 0px 0px;
    text-align: center;
    color: #f5f0de;
}

    .header h1 {
        margin-top: 10px;
    }

    .header p {
        margin-top: 10px;
    }

footer {
    background-color: var(--color-bg3);
}

    footer i {
        padding: 10px;
    }

.mt-20{
    margin-top:20px;
}

.mt-50 {
    margin-top: 50px;
}

.pt-50{
    padding-top:50px;
}

.pt-80{
    padding-top: 80px;
}

#contact a {
    text-decoration: none;
    color: var(--color3);
}

#contact a:hover {
    text-decoration: none;
    color: var(--color);
}


.gm-opacity, .gm-hover-opacity:hover {
    opacity: 0.60;
}

hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 20px 0;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

hr.ac{
    margin-left:auto;
    margin-right:auto;
}

.gm-text-light-grey, 
.gm-hover-text-light-grey:hover, 
.gm-text-light-gray, 
.gm-hover-text-light-gray:hover {
    color: #f1f1f1 !important;
}



.gm-center {
    text-align: center !important;
}



.gm-small {
    font-size: 12px !important;
}

.gm-sidebar {
    height: 100%;
    width: 200px;
    background-color: #fff;
    position: fixed !important;
    z-index: 1;
    overflow: auto;
}

.gm-sidebar {
    width: 120px;
    background-color: var(--color-sidebar);
}




.gm-text-grey,
.gm-hover-text-grey:hover,
.gm-text-gray,
.gm-hover-text-gray:hover {
    color: var(--color-text-gray) !important;
}

.gm-padding-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}


.gm-content, .gm-auto {
    margin-left: auto;
    margin-right: auto;
}


.gm-bar-block.gm-center .gm-bar-item {
    text-align: center;
    text-decoration:none;
}



.gm-bar-block .gm-bar-item {
    width: 100%;
    display: block;
    padding: 8px 16px;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    outline: 0;
}

.gm-black, .gm-hover-black:hover {
    color: #fff !important;
    background-color: #000 !important;
}




.gm-button:hover {
    color: #000 !important;
    background-color: #ccc !important;
}

.gm-btn, .gm-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.gm-btn, .gm-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}


.gm-left {
    float: left !important;
}
.gm-margin-right {
    margin-right: 16px !important;
}

.gm-large {
    font-size: 18px !important;
}
.gm-margin-right {
    margin-right: 16px !important;
}

.gm-text-grey, 
.gm-hover-text-grey:hover, 
.gm-text-gray, 
.gm-hover-text-gray:hover {
    color: var(--color-text-gray);
}




.gm-padding-64 {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
}

.gm-xlarge {
    font-size: 24px !important;
}

.gm-xxlarge {
    font-size: 36px !important;
}

.gm-circle {
    border-radius: 50%;
    opacity: .7;
}

.gm-top {
    top: 0;
}

.gm-top, .gm-bottom {
    /*position: fixed;*/
    width: 100%;
    z-index: 1;
    margin: 0px;
    padding: 0px;
}

.gm-black, .gm-hover-black:hover {
    color: #fff !important;
    background-color: #000 !important;
}


.gm-padding-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.gm-input {
    padding: 8px;
    display: block;
    border: none;
    border-bottom: 1px solid #ccc;
    width: 100%;
}

.gm-bar {
    width: 100%;
    overflow: hidden;
    display:flex;
}

img {
    vertical-align: middle;
}

img {
    border-style: none;
}



#main {
    margin-left: 120px;
}

.gm-main, #main {
    transition: margin-left .4s;
}

.gm-padding-large {
    padding: 12px 24px !important;
}


label {
    color: #d9d0d0;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    padding-left: 0px;
}

textarea{
    resize: none;
}

select,
input[type=text],
input[type=email],
input[type=password],
button,
textarea {
    background-color: #dddada;
    background-color: transparent;
    padding: 5px 8px;
    border-radius: 3px;
    color: #dddada;
    outline: none;
    border: 1px solid #dddada !important;
}




    select option {
        background-color: #222228;
        color: #dddada;
        padding: 2px 4px;
    }

button {
    padding-top: 7px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
    background-color: #474190;
    border-color: #474190;
    color: #dddada;
    border: none;
    font-size: 14px;
    line-height: 14px;
}

    button:hover {
        background-color: #283333;
    }


.gm-light-grey, .gm-hover-light-grey:hover, .gm-light-gray, .gm-hover-light-gray:hover {
    color: #000;
    background-color: #f1f1f1;
}


.gm-padding-large {
    padding: 12px 24px !important;
}

.gm-btn, .gm-button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.gm-btn, .gm-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}

.gm-button-bord {
    border: 1px solid var(--color-bord);
}


button, [type=button], [type=reset], [type=submit] {
    --webkit-appearance: button;
}

button, select {
    text-transform: none;
}

button, input {
    overflow: visible;
}

button, input, select, textarea, optgroup {
    font: inherit;
    margin: 0;
}

button:disabled {
    border-color: #af3838;
    color: #af3838;
    opacity: .4;
}

.form-validation {
    color: #af3838;
    margin-bottom: 15px;
}

.gm-form {
    max-width: 480px;
    margin: 20px 0 0px 0;
    
}

.gm-form div.form-group {
    margin-bottom: 12px;
}

.logo {
    margin: 0px auto;
    position: relative;
    /* left: -100px; */
    /* top: 40px; */
    background-image: url(../img/lgmg_logo.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    width: 300px;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
}

.user {
    margin: 0px auto;
    position: relative;
    background-image: url(../img/profile.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 32px;
    width: 32px;
    overflow: hidden;
    border: 2px solid var(--color3);
    border-radius: 50%;
}

    .user:hover {
        background-color: #283333;
    }


    .timesheet-title {
        font-size: 24px;
        color: #f5f0de;
    }




/* Style the top navigation bar */
.navbar {
    display: flex;
    background-color: #333;
}

    /* Style the navigation bar links */
    .navbar a {
        color: white;
        padding: 14px 20px;
        text-decoration: none;
        text-align: center;
    }

        /* Change color on hover */
        .navbar a:hover {
            /*background-color: #ddd;*/
            color: black;
        }



.sidebar-close {
    position: absolute;
    right: 20px;
    background-color: transparent;
    font-size: 28px;
    padding: 10px;
}


/* sidebar nav */
.sidenav {
    margin: 20px 0px;
}

    .sidenav li {
        line-height: 21px;
        margin-bottom: 10px;
    }


/* Footer */
.footer {
    padding: 50px;
    text-align: center;
    /*background: #ddd;*/
    color: #ccc;
    font-size: 12px;
}

.main-content {
    margin:0px auto;
    max-width: 1280px;
}

/* Main column */
.main {
    flex: 70%;
    padding: 20px;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
    flex: 30%;
    /*background-color: #f1f1f1;*/
    padding: 20px;
}




.card {
    padding: 2em;
}


/* Column container */
.row {
    display: flex;
    flex-wrap: wrap;
}







table td, table th {
    border: 1px solid #3c3c3c;
    padding: 8px;
}

    table tr:nth-child(even) {
        background-color: #283333;
    }

    table tr:hover {
        background-color: #3c3c3c;
    }

table thead th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #302f1e;
    color: white;
}

/* Modal */

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }


/* Fake image, just for this example */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
}



.show {
    display: block;
}

.gm-main, #main {
    transition: margin-left .4s;
}

.gm-image{
    margin-top: 30px;
    max-width:100%;
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /*position: static;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;*/
}

/* First image (Logo. Full height) */
.bgimg-1 {
    background-position: top;
    background-image: url('/img/parallax0001.png');
    min-height: 500px;
}

/* Second image (Portfolio) */
.bgimg-2 {
    background-image: url("/img/parallax2.jpg");
    min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
    background-image: url("/img/parallax3.jpg");
    min-height: 400px;
}

.gm-wide {
    letter-spacing: 7px;
}

.gm-hover-opacity {
    cursor: pointer;
}

.gm-row-padding, .gm-row-padding > .gm-half, .gm-row-padding > .gm-third, .gm-row-padding > .gm-twothird, .gm-row-padding > .gm-threequarter, .gm-row-padding > .gm-quarter, .gm-row-padding > .gm-col {
    padding: 0 8px;
}

.gm-container, .gm-panel {
    padding: 0.01em 16px;
}

.gm-row-padding, .gm-row-padding > .gm-half, .gm-row-padding > .gm-third, .gm-row-padding > .gm-twothird, .gm-row-padding > .gm-threequarter, .gm-row-padding > .gm-quarter, .gm-row-padding > .gm-col {
    padding: 0 8px;
}

#work img {
    max-width:300px;
    height: auto;
    max-height:300px;
    padding-bottom:20px;
}

.gm-white, .gm-hover-white:hover {
    color: #000 !important;
    background-color: #fff !important;
}

.gm-dark-grey, .gm-hover-dark-grey:hover, .gm-dark-gray, .gm-hover-dark-gray:hover {
    color: #fff !important;
    background-color: #616161 !important;
}

.gm-col, .gm-half, .gm-third, .gm-twothird, .gm-threequarter, .gm-quarter {
    float: left;
    width: 100%;
}

.gm-row-padding, .gm-row-padding > .gm-half, .gm-row-padding > .gm-third, .gm-row-padding > .gm-twothird, .gm-row-padding > .gm-threequarter, .gm-row-padding > .gm-quarter, .gm-row-padding > .gm-col {
    padding: 0 8px;
}

.gm-col, .gm-half, .gm-third, .gm-twothird, .gm-threequarter, .gm-quarter {
    float: left;
    width: 100%;
}

.cb {
    clear:both;
}

.gm-sidebar a {
    color: var(--color3);
}
/*.gm-sidebar a:hover {
    color: #fff;
}*/
.gm-bar .gm-button {
    white-space: normal;
}

.gm-bar .gm-bar-item {
    padding: 8px 16px;
    /*float: left;*/
    width: auto;
    border: none;
    display: block;
    outline: 0;
    flex:auto;
}

.gm-sidebar a:hover i {
    color: var(--color);
}

.gm-sidebar a:active i,
.gm-bar-item.active,
.gm-bar-item.active i {
    color: var(--color-white);
}



/*.gm-bar-item:hover {
    color: var(--color);
}*/

.gm-sidebar:first-child a{
    margin-top:20px;
}

.gm-sidebar a {
    margin-top: 40px;
}


.gm-sidebar a .ico-service {
    background-image: url('/img/icons/service_purp.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 50px;
    width: 50px;
}

    .gm-bar-item.active .ico-service {
        background-image: url('/img/icons/service_light.png');
    }
    /*.gm-bar-item:not(.active):hover .ico-service {
        background-image: url('/img/icons/service_purp.png');
    }*/


.gm-sidebar a .ico-about {
    background-image: url('/img/icons/about_purp.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 50px;
    width: 50px;
}

    .gm-bar-item.active .ico-about {
        background-image: url('/img/icons/about_light.png');
    }

    /*.gm-bar-item:hover .ico-about {
        background-image: url('/img/icons/about_purp.png');
    }*/


.gm-sidebar a:hover .ico-service {
    background-image: url('/img/icons/service_mid.png');
}

.gm-sidebar a:hover .ico-about {
    background-image: url('/img/icons/about_mid.png');
}



.gm-text-purp {
    color: var(--color3);
}






@media (min-width: 993px) {
    .gm-col.l3 {
        width: 24.99999%;
    }
}

@media (min-width: 601px) {
    .gm-col.m3, .gm-quarter {
        width: 24.99999%;
    }
    .gm-col.m6, .gm-half {
        width: 49.99999%;
    }
}

.gm-col, .gm-half, .gm-third, .gm-twothird, .gm-threequarter, .gm-quarter {
    float: left;
    width: 100%;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
    
    .gm-form {
        margin: 20px auto 0px auto;
    }

    .bgimg-1:after,
    .bgimg-2:after,
    .bgimg-3::after {
        content: '';
        width: 100%;
        height: 100%;
        background-position: inherit;
        background-image: inherit;
        background-size: inherit;
        background-attachment: inherit;
        background-repeat: inherit;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        overflow: hidden;
        margin:0px;
        padding:0px;
        box-sizing:border-box;
    }
    
}


@media only screen and (max-width: 991px) {


    .gm-content {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 680px;
    }

}

@media (min-width: 600px) {
    .gm-hide-large {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .gm-hide-small {
        display: none !important;
    }
}

@media only screen and (max-width: 600px) {
    #main {
        margin-left: 0;
    }
    .gm-content {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 480px;
    }
    .gm-image {
        margin-top: 50px;
        width: 320px;
        height: auto;
    }

    .bgimg-1 {
        min-height: 400px;
    }

    .gm-bar .gm-bar-item {
        /*width: 24.5%;*/
        flex:24%;
    }

    
    .s-ac {
        text-align: center;
    }

    .s-hr {
        width:200px;
    }

    hr.s-ac {
        margin-left: auto;
        margin-right: auto;
    }

    .bgimg-1, .bgimg-2, .bgimg-3 {
        background-attachment: scroll;
        min-height: 400px;
    }
}