/*
SVG color calculator: 
https://codepen.io/sosuke/pen/Pjoqqp?__cf_chl_jschl_tk__=b30d51884a55dd6e0e3395e3b0b25e6535379f86-1587321091-0-AUli-YpauDA_1Do0oKoHl9TtNKjqBK4zpkgAAoPZ4seKhRGWTd050oWLC4NBU4ZNgmPaZu2KVyENoGXRN7xrKeEHiIxAa4iL798uwJfRT5Px_bzolXJbT_PM-trI0NYErXNPao5f7OutglA32U1MDp47M7LZZOaH-E5JatPDCG5IVZ2Ul-RDOstFVuGbXRmSjA-TLod5ZaK1Kx7hqNnUBbOCBomGur1ZHLrAMgfRMN168bqLuH8E2eQRnNXG-ueUDHa_bJbWYuwVrYo5CD06Y5eLbj3GWcuHmKNSZIoIiTYx25nW0QS2vj77T_aLYrkjICujQEclf2FjEgr30g3KoNap1v0Lq2LMfqz7cmzYu9ri
*/

:root {
    --primary: #283d73;
    --primary-hover: #6877a2;
    --primary-dark: #0E131F;
    --primary-light: #d6e2ff;
    --secondary: #DEEFB7;
    --secondary-light: #ffd9001c;
    --red: #FF0035;
    --primary-font: 'Roboto', sans-serif;
    --secondary-font: 'Montserrat', sans-serif;

    /* Major Third Scale for 10px root */

    --size-tiny: 0.8rem;
    --size-smaller: 1rem;
    --size-small: 1.25rem;

    --size-default: 1.562rem;

    --size-large: 1.953rem;
    --size-larger: 2.441rem;
    --size-big: 3.052rem;
    --size-bigger: 3.815rem;
    --size-huge: 4.769rem;
}

*, 
*::after, 
*::before {
    /* border: 0.1px solid black;  */


    box-sizing: inherit;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    color: black;
}

html {
    font-size: 62.5%;
}
    @media only screen and (max-width: 900px) {
        html {
        font-size: 56.25%;
        }
    }

    @media only screen and (max-width: 600px) {
        html {
        font-size: 50%;
        }
    }

body {
    box-sizing: border-box;
    line-height: 1.6;
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
    background-color: #f1f1f1;
}

.container-flex {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */

header {
    position: fixed;
    width: 100%;
    background-color: rgba(0,0,0,0);
    z-index: 2;
}

    header > nav {
        display: flex;
        padding:  1.2rem 1.8rem 1.2rem 1.2rem;
        transition: 0.3s;
    }

    @media only screen and (max-width: 600px) {
        header > nav {
            display: flex;
            flex-wrap: wrap;
        }
    }
    

        .ches-logo-link > img {
            height: 7.6rem;
            transition: 0.3s;
        }

        .main-nav {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
        }

        @media only screen and (max-width: 600px) {
            .main-nav {
                order: 2;
            }
        }

        .main-nav > li:nth-child(1),
        .main-nav > li:nth-child(2),
        .main-nav > li:nth-child(3) {
            margin-right: var(--size-large);
        }

        .main-nav a {
            color:#eee;
            font-size: var(--size-default);
            text-transform: uppercase;
            font-family: var(--secondary-font);
            font-weight: 400;
        }

        .main-nav #current {
            color: var(--red);
        }

        .main-nav a:hover {
            color: var(--red);
            transition: 0.3s;
        }

        .contact-nav {
            display: flex;
            align-items: center; 
            justify-content: space-between;

            align-content: space-evenly;
            flex-wrap: nowrap;
            flex-basis:8rem;
        }

        @media only screen and (max-width: 600px) {
            .contact-nav {
                display: none;
            }
        }

        .contact-nav img {
            height: var(--size-large);
            filter: invert(99%) sepia(1%) saturate(51%) hue-rotate(183deg) brightness(116%) contrast(87%);
        }

        .contact-nav #envelope:hover,
        .contact-nav #envelope:active {
            filter: invert(17%) sepia(97%) saturate(5310%) hue-rotate(340deg) brightness(97%) contrast(116%);
            transition: 0.3s;
        }

        .contact-nav #phone:hover,
        .contact-nav #phone:active {
            filter: invert(17%) sepia(97%) saturate(5310%) hue-rotate(340deg) brightness(97%) contrast(116%);
            transition: 0.3s;
        }

        .contact-nav #line:hover,
        .contact-nav #line:active {
            filter: invert(55%) sepia(98%) saturate(3853%) hue-rotate(89deg) brightness(155%) contrast(110%);
            transition: 0.3s;
        }


        .contact-nav #facebook:hover,
        .contact-nav #facebook:active {
            filter: invert(92%) sepia(15%) saturate(4678%) hue-rotate(181deg) brightness(79%) contrast(91%);
            transition: 0.3s;
        }
        

        .sticky-header {
            background-color: rgba(20, 20, 20, 0.7);
            box-shadow: 0 2px 16px rgba(20, 20, 20, 0.4);
        }

        .sticky-nav {
            padding: 0.6rem;
            transition: 0.3s;
        }

        .sticky-logo {
            height: 3.0rem !important;
            padding: 0;
            transition: 0.3s;
        }

        @media only screen and (max-width: 600px) {
            .sticky-logo {
                height: 5.0rem !important
            }
        }


        .sticky-contact {
            flex-basis: 10rem;
            flex-wrap: nowrap;
        }



/* Buttons */


        .buttons {
            display: flex;
            justify-content: center;
      
        }
        
        .workbutton {
            border: 3px solid #eee;
            box-shadow: 0 0 4px var(--primary);
            border-radius: 100px;
            background-color: rgba(240,240,240,0.3);
            padding: 0.8rem 1.4rem;
            display: flex;
            align-items: center;
            backface-visibility: hidden;
        }
        
        #arrow-img {
            height: 3.0rem;
        }
        
        .buttons p {    
            color: #eee;
            font-family: var(--secondary-font);
            text-transform: uppercase;
            font-size: 1.6rem;
            font-weight: 700;
            padding-right: 1.2rem;
        }

        .buttons .workbutton:hover{
            background-color: var(--red);
            transform: translateY(-2px);
            box-shadow: 0 4px 14px rgba(255,255,255,0.3);
            scale: 1.02;
            transition: all 0.3s; 
        }
        
        .buttons img {
            filter: invert(99%) sepia(1%) saturate(51%) hue-rotate(183deg) brightness(116%) contrast(87%);
        }
        
        .buttons > a:nth-child(1) {
            margin-right: 3rem;
        }


/* Footer */

footer {
    border-top: 1px solid var(--primary);
    padding: 3.9rem 0;
}

footer > .container-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

@media only screen and (max-width: 900px) {
    footer > .container-flex {
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    .footer-column:nth-child(2) {
        order: -1;
        flex-basis: 100%;
        padding: 2rem 5rem;
    }
}

    .color-logo {
        height: 10rem;
    }

    .footer-column:nth-child(1) {
        flex-basis: 15rem;
        margin-left: var(--size-default);
    }

    .footer-column:nth-child(3) {
        margin-right: var(--size-default);
    }

    .footer-column:nth-child(2) > h3 {
        margin: 0;
        padding: 0 0 1.2rem 0;
        font-family: var(--primary-font);
        color: var(--primary);
        font-size: var(--size-larger);
        text-align: center;
    }

    .footer-column:nth-child(2) > p {
        margin: 0;
        padding: 0;
        font-family: var(--secondary-font);
        color: var(--primary);
        font-size: var(--size-default);
        text-align: center;
    }

    .footer-link {
        display: flex;
        align-items: center;
    }

    .footer-link img {
        width: var(--size-larger);
        padding: 0 0.9rem 0.3rem 0;
        filter: invert(19%) sepia(46%) saturate(1405%) hue-rotate(193deg) brightness(95%) contrast(88%);
    }

    .footer-link a {
        font-family: var(--primary-font);
        font-size: var(--size-default);
        color: var(--primary);
        font-weight: 700;
    }