/* DOCUMENT */
/*___________________________________*/

    html
    {
        scroll-behavior: smooth;
    }

    *
    {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        outline: none;
    }

/* COLORS */
/*___________________________________*/

    /* BACKGROUND COLORS */
    /*___________________________________*/

    .bg_black
    {
        background-color: rgba(30, 31, 33, 1);
    }

    .bg_white
    {
        background-color: rgba(245, 244, 242, 1);
    }

    .bg_tan
    {
        background-color: #d8d0c2;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23e8e4dc' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
        background-attachment: fixed;
    }

    .bg_diag
    {
        background-color: #e8e4dc;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1765' height='1765' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23e8decc' stroke-width='1' stroke-opacity='0.2'%3E%3Crect x='-40' y='40' width='75' height='75'/%3E%3Crect x='-35' y='45' width='65' height='65'/%3E%3Crect x='-30' y='50' width='55' height='55'/%3E%3Crect x='-25' y='55' width='45' height='45'/%3E%3Crect x='-20' y='60' width='35' height='35'/%3E%3Crect x='-15' y='65' width='25' height='25'/%3E%3Crect x='-10' y='70' width='15' height='15'/%3E%3Crect x='-5' y='75' width='5' height='5'/%3E%3Crect width='35' height='35'/%3E%3Crect x='5' y='5' width='25' height='25'/%3E%3Crect x='10' y='10' width='15' height='15'/%3E%3Crect x='15' y='15' width='5' height='5'/%3E%3Crect x='40' width='75' height='75'/%3E%3Crect x='45' y='5' width='65' height='65'/%3E%3Crect x='50' y='10' width='55' height='55'/%3E%3Crect x='55' y='15' width='45' height='45'/%3E%3Crect x='60' y='20' width='35' height='35'/%3E%3Crect x='65' y='25' width='25' height='25'/%3E%3Crect x='70' y='30' width='15' height='15'/%3E%3Crect x='75' y='35' width='5' height='5'/%3E%3Crect x='40' y='80' width='35' height='35'/%3E%3Crect x='45' y='85' width='25' height='25'/%3E%3Crect x='50' y='90' width='15' height='15'/%3E%3Crect x='55' y='95' width='5' height='5'/%3E%3Crect x='120' y='-40' width='75' height='75'/%3E%3Crect x='125' y='-35' width='65' height='65'/%3E%3Crect x='130' y='-30' width='55' height='55'/%3E%3Crect x='135' y='-25' width='45' height='45'/%3E%3Crect x='140' y='-20' width='35' height='35'/%3E%3Crect x='145' y='-15' width='25' height='25'/%3E%3Crect x='150' y='-10' width='15' height='15'/%3E%3Crect x='155' y='-5' width='5' height='5'/%3E%3Crect x='120' y='40' width='35' height='35'/%3E%3Crect x='125' y='45' width='25' height='25'/%3E%3Crect x='130' y='50' width='15' height='15'/%3E%3Crect x='135' y='55' width='5' height='5'/%3E%3Crect y='120' width='75' height='75'/%3E%3Crect x='5' y='125' width='65' height='65'/%3E%3Crect x='10' y='130' width='55' height='55'/%3E%3Crect x='15' y='135' width='45' height='45'/%3E%3Crect x='20' y='140' width='35' height='35'/%3E%3Crect x='25' y='145' width='25' height='25'/%3E%3Crect x='30' y='150' width='15' height='15'/%3E%3Crect x='35' y='155' width='5' height='5'/%3E%3Crect x='200' y='120' width='75' height='75'/%3E%3Crect x='40' y='200' width='75' height='75'/%3E%3Crect x='80' y='80' width='75' height='75'/%3E%3Crect x='85' y='85' width='65' height='65'/%3E%3Crect x='90' y='90' width='55' height='55'/%3E%3Crect x='95' y='95' width='45' height='45'/%3E%3Crect x='100' y='100' width='35' height='35'/%3E%3Crect x='105' y='105' width='25' height='25'/%3E%3Crect x='110' y='110' width='15' height='15'/%3E%3Crect x='115' y='115' width='5' height='5'/%3E%3Crect x='80' y='160' width='35' height='35'/%3E%3Crect x='85' y='165' width='25' height='25'/%3E%3Crect x='90' y='170' width='15' height='15'/%3E%3Crect x='95' y='175' width='5' height='5'/%3E%3Crect x='120' y='160' width='75' height='75'/%3E%3Crect x='125' y='165' width='65' height='65'/%3E%3Crect x='130' y='170' width='55' height='55'/%3E%3Crect x='135' y='175' width='45' height='45'/%3E%3Crect x='140' y='180' width='35' height='35'/%3E%3Crect x='145' y='185' width='25' height='25'/%3E%3Crect x='150' y='190' width='15' height='15'/%3E%3Crect x='155' y='195' width='5' height='5'/%3E%3Crect x='160' y='40' width='75' height='75'/%3E%3Crect x='165' y='45' width='65' height='65'/%3E%3Crect x='170' y='50' width='55' height='55'/%3E%3Crect x='175' y='55' width='45' height='45'/%3E%3Crect x='180' y='60' width='35' height='35'/%3E%3Crect x='185' y='65' width='25' height='25'/%3E%3Crect x='190' y='70' width='15' height='15'/%3E%3Crect x='195' y='75' width='5' height='5'/%3E%3Crect x='160' y='120' width='35' height='35'/%3E%3Crect x='165' y='125' width='25' height='25'/%3E%3Crect x='170' y='130' width='15' height='15'/%3E%3Crect x='175' y='135' width='5' height='5'/%3E%3Crect x='200' y='200' width='35' height='35'/%3E%3Crect x='200' width='35' height='35'/%3E%3Crect y='200' width='35' height='35'/%3E%3C/g%3E%3C/svg%3E");
        background-attachment: fixed;
    }

    .bg_stripes
    {
        background-color: #966a61;
        background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23e8e4dc' fill-opacity='0.17'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        background-attachment: fixed;
    }

    /* TEXT COLORS */
    /*___________________________________*/

    .c_black
    {
        color: rgba(30, 31, 33, 1);
    }

    .c_white
    {
        color: rgba(245, 244, 242, 1);
    }

    .c_grey
    {
        color: rgba(103, 105, 107, 1);
    }

    .c_green
    {
        color: rgba(98, 122, 86, 1);
    }

/* FONTS */
/*___________________________________*/

    .f_xl
    {
        font-family: 'Staatliches', cursive;
        font-size: 2.7em;
        text-align: center;
    }

    .f_l
    {
        font-family: 'Staatliches', cursive;
        font-size: 1.5em;
    }

    .f_m
    {
        font-family: 'Mukta Malar', sans-serif;
        font-size: 1.2em;
    }

    .f_s
    {
        font-family: 'Mukta Malar', sans-serif;
        font-size: 1em;
    }

    /* SLOPES */
    /*___________________________________*/

    .s_top
    {
        width: 100%; height: 100px;
        position: absolute;
        top: -99px;
        background-color: inherit;
        background-image: inherit;
        background-attachment: inherit;
        clip-path: polygon(0 50%, 100% 0, 100% 100%, 0% 100%);
        z-index: 2;
    }

    .s_bottom
    {
        width: 100%; height: 100px;
        position: absolute;
        bottom: -99px;
        background-color: inherit;
        background-image: inherit;
        background-attachment: inherit;
        clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
        z-index: 2;
    }

/* CLASSES */
/*___________________________________*/

    /* PRELOADER */
    /*___________________________________*/
    .preloader
    {
        position: fixed;
        width: 100vw; height: 100vh;
        background-color: black;
        z-index: 100;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .preload-img
    {
        width: 100px;
    }

    .preloader.loaded
    {
        animation: loadComplete 1s;
        animation-fill-mode: both;
    }


    /* NAV */
    /*___________________________________*/
    .nav
    {
        width: 100%;
        top: 0;
        position: fixed;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        transition: 0.1s ease-in-out;
        background-color: transparent;
        z-index: 10;
        box-shadow: 0 0 10px 0 rgba(28,29,41,1);
    }

    .nav-icons
    {
        height: 80px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        z-index: 1;
        flex: 1 1 auto;
    }

    .nav-brand
    {
        margin: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #logo
    {
        width: 200px;
    }

    .nav-toggle
    {
        display: none;
        margin: 30px;
        flex-direction: column;
        justify-content: center;
    }

    .nav-items
    {
        max-height: none;
        text-align: center;
        display: flex;
        flex-direction: row;
        flex: 1 1 auto;
        justify-content: flex-end;
        align-items: stretch;
        overflow: hidden;
        transition: 0.3s ease-out;
    }

    .nav-items a
    {
        cursor: pointer;
        padding: 20px 30px;
        color: inherit;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: color 0.3s ease-in-out;
    }

    .nav-link:hover
    {
        text-decoration: underline;
    }

    .nav-filler
    {
        background-color: black;
    }

    /* HEADER */
    /*___________________________________*/

    .header
    {
        width: 100%; height: 100vh;
        overflow: hidden;
        background-image: url("../images/bg.png");
        background-size: cover;
        background-position: center;
        background-color: #5b534d;
    }

    .social
    {
        position: absolute;
        bottom: 20px;
        left: 20px;
        z-index: 5;
    }

    .fa
    {
        padding: 20px;
        font-size: 2em !important;
        width: 30px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        border-radius: 50%;
        background-color: rgba(30, 31, 33, 1);
        color: white;
    }

    .fa:hover
    {
        background-color: rgba(40, 41, 43, 1);
    }

    .notification
    {
        position: fixed;
        bottom: 40px; right: 40px;
        padding: 20px;
        max-width: 400px;
        background-color: rgba(30, 31, 33, 1);
        box-shadow: 0 0 10px 0 rgba(28,29,41,0.3);
        z-index: 5;
        animation: disappear 1s;
        animation-fill-mode: both;
    }

    .notification.visible
    {
        animation: appear 1s;
    }

    /* SECTION */
    /*___________________________________*/

    .section
    {
        position: relative;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        min-height: 200px;
        padding: 40px;
        background-color: inherit;
        background-image: inherit;
        background-attachment: inherit;
    }

    .subsection
    {
        margin: 20px;
        width: 600px;
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .anchor
    {
        display: block;
        position: relative;
        top: -80px;
        visibility: hidden;
    }

    .filler
    {
        width: 100%; height: 100px;
    }

    /* LIST */
    /*___________________________________*/

    .list
    {
        margin: 20px;
        width: 500px;
        display: flex;
        flex-direction: column;
    }

    .list-title
    {
        margin: 0 10px 10px 10px;
    }

    .list-accordion
    {
        padding: 20px;
        width: 100%;
        border: none;
        text-align: start;
        outline: none;
        box-shadow: 0 0 10px 0 rgba(28,29,41,0.3);
    }

    .list-accordion:hover
    {
        background-color: rgba(53, 54, 56, 1);
    }

    .list-accordion:after
    {
        content: '+';
        color: #777;
        font-weight: bold;
        float: right;
        margin-left: 5px;

    }

    .list-accordion.expanded:after
    {
        content: '-';
    }

    .list-panel
    {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        display: flex;
        flex-direction: column;
        box-shadow: 0 0 10px 0 rgba(28,29,41,0.3);
    }

    .list-item
    {
        padding: 12px 20px;
    }

    .list-item:nth-child(odd)
    {
        background-color: rgba(235, 228, 223, 1);
    }

    .list-item:nth-child(even)
    {
        background-color: rgba(217, 209, 204, 1);
    }

    .list-item-name
    {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }

    .list-item-hr
    {
        opacity: 0.2;
    }

    /* CONTACT */
    /*___________________________________*/

    .info
    {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin: 20px;
        width: 500px;
    }

    .info-tabs
    {
        padding: 10px;
        margin: 10px;
    }

    .info-title
    {
        display: flex;
        margin: 10px;
    }

    .info-table
    {
        width: 100%;
        padding: 10px;
        margin: 10px;
    }

    .map
    {
        margin: 20px;
        width: 500px;
        box-shadow: 0 0 10px 0 rgba(28,29,41,0.3);
    }


    /* FOOTER */
    /*___________________________________*/

    .footer
    {
        padding: 20px;
    }

/* ID's */
/*___________________________________*/

    #contact
    {
        flex-direction: row-reverse;
    }

    #txt_about
    {
        text-align: left;
    }



/* RESPONSIVE */
/*___________________________________*/
@media only screen and (max-width: 800px)
{
    .nav
    {
        flex-direction: column;
        border-bottom: 0;
        cursor: pointer;
    }

    .nav-toggle
    {
        display: flex;
    }

    .nav-items
    {
        max-height: 0;
        flex-direction: column;
        justify-content: center;
        opacity: 0;
    }

    .nav-items.expanded
    {
        flex-direction: column;
        opacity: 1;
    }

    .section
    {
        padding: 10px;
    }

    .notification
    {
        left: 0; right: 0;
        bottom: 110px;
        margin: auto;
    }
}

/* ANIMATION */
/*___________________________________*/
@keyframes loadComplete
{
    0%
    { opacity: 1;}

    100%
    { opacity: 0; visibility: hidden}
}

@keyframes appear
{
    0%
    { transform: translate(0px, 450px) rotate(-30deg);}

    50%
    { transform: translate(0px, -10px) rotate(5deg);}

    100%
    { transform: translate(0px, 0px) rotate(0deg);}
}

@keyframes disappear
{
    10%
    { transform: translate(0px, -10px) rotate(10deg);}

    100%
    { transform: translate(0px, 450px) rotate(-30deg);}
}