/* =================================
   RESET
================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =================================
   BODY
================================= */

body {
    background-color: whitesmoke;
    font-family: 'Lucida Sans', sans-serif;
}


/* =================================
   HEADER / BRAND
================================= */

.site-header {
    width: 100%;
    position: relative;
}

.site-brand {
    width: 20%;
    margin-left: 75px;
}

.site-brand .site-logo {
    display: block;
    width: 100%;
    margin-left: 0;
}

.site-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.artist-description {
    display: block;
    width: 100%;

    margin-top: 6px;

    text-align: center;

    font-family: 'Lucida Sans', sans-serif;
    font-size: 10px;
    font-weight: normal;
    font-style: normal;

    line-height: 1.4;

    color: rgb(145, 145, 145);

    text-decoration: none;
    letter-spacing: 0;
}


/* =================================
   NAVIGATION
================================= */

.navbar {
    width: 100%;
    position: relative;
}


/* =================================
   NAV CONTAINER
================================= */

.nav-container {
    position: relative;
    display: block;

    width: 100%;
    height: 60px;
}


/* =================================
   HAMBURGER
================================= */

.nav-container .checkbox {
    position: absolute;

    display: block;

    width: 32px;
    height: 32px;

    top: 28px;
    left: 12px;

    opacity: 0;

    cursor: pointer;

    z-index: 200;
}


.nav-container .hamburger-lines {
    position: absolute;

    display: flex;

    width: 32px;
    height: 26px;

    top: 28px;
    left: 12px;

    flex-direction: column;
    justify-content: space-between;

    z-index: 150;

    cursor: pointer;
}


.nav-container .hamburger-lines .line {
    display: block;

    width: 100%;
    height: 2px;

    border-radius: 10px;

    background-color: #0e2431;

    transition:
        transform 0.4s ease-in-out,
        opacity 0.2s ease-in-out;
}


/* =================================
   MENU
================================= */

.navbar .menu-items {
    position: fixed;

    top: 100px;
    left: 0;

    width: 320px;

    margin: 0;

    padding-top: 10px;
    padding-left: 70px;
    padding-right: 30px;

    background-color: whitesmoke;

    transform: translateX(-100%);

    transition: transform 0.4s ease-in-out;

    text-align: left;

    z-index: 100;

    overflow: visible;
}


/* =================================
   OPEN MENU
================================= */

.nav-container input[type="checkbox"]:checked ~ .menu-items {
    transform: translateX(0);
}


/* =================================
   MENU SECTIONS
================================= */

.menu-section {
    margin-left: 0;
    padding-left: 0;

    margin-bottom: 25px;
}


.menu-heading {
    display: block;

    margin: 0 0 10px 0;

    font-family: 'Lucida Sans', sans-serif;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 0.8px;

    color: rgb(145, 145, 145);
}


/* =================================
   LISTS
================================= */

.menu-items ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.menu-items li {
    margin: 0 0 0.5rem 0;
    padding: 0;

    list-style: none;
}


/* =================================
   PROJECTS / WORKS
================================= */

.menu-section a {
    font-family: 'Lucida Sans', sans-serif;

    font-size: 11px;

    font-weight: 500;

    color: #0e2431;

    text-decoration: none;
}


.menu-section a:visited {
    color: #0e2431;
}


.menu-section a:hover {
    font-weight: bolder;
}


/* =================================
   DIVIDER
================================= */

.menu-items hr {
    width: 100%;

    height: 1px;

    margin: 20px 0;

    border: none;

    background-color: #ccc;
}


/* =================================
   GENERAL NAVIGATION
================================= */

.menu-information {
    margin-left: 0;
    padding-left: 0;

    margin-top: 10px;
}


.menu-information ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.menu-information li {
    margin-bottom: 0.5rem;
}


.menu-information a {
    font-family: 'Lucida Sans', sans-serif;

    font-size: 11px;

    font-weight: 500;

    color: #0e2431;

    text-decoration: none;
}


.menu-information a:visited {
    color: #0e2431;
}


.menu-information a:hover {
    font-weight: bolder;
}


/* =================================
   HAMBURGER ANIMATION
================================= */

.nav-container input[type="checkbox"]:checked
~ .hamburger-lines .line1 {

    transform:
        translateY(12px)
        rotate(45deg);
}


.nav-container input[type="checkbox"]:checked
~ .hamburger-lines .line2 {

    opacity: 0;
}


.nav-container input[type="checkbox"]:checked
~ .hamburger-lines .line3 {

    transform:
        translateY(-12px)
        rotate(-45deg);
}


/* =================================
   MOBILE
================================= */

/* =================================
   NAVIGATION
================================= */

.navbar {
    width: 100%;
    position: relative;
}


/* =================================
   NAV CONTAINER
================================= */

.nav-container {
    position: relative;
    display: block;

    width: 100%;
    height: 60px;
}


/* =================================
   HAMBURGER
================================= */

.nav-container .checkbox {
    position: absolute;

    display: block;

    width: 32px;
    height: 32px;

    top: 28px;
    left: 12px;

    opacity: 0;

    cursor: pointer;

    z-index: 200;
}


.nav-container .hamburger-lines {
    position: absolute;

    display: flex;

    width: 32px;
    height: 26px;

    top: 28px;
    left: 12px;

    flex-direction: column;
    justify-content: space-between;

    z-index: 150;

    cursor: pointer;
}


.nav-container .hamburger-lines .line {
    display: block;

    width: 100%;
    height: 2px;

    border-radius: 10px;

    background-color: #0e2431;

    transition:
        transform 0.4s ease-in-out,
        opacity 0.2s ease-in-out;
}


/* =================================
   MENU
================================= */

.navbar .menu-items {
    position: fixed;

    top: 100px;
    left: 0;

    width: 320px;

    margin: 0;

    padding-top: 10px;
    padding-left: 70px;
    padding-right: 30px;

    background-color: whitesmoke;

    transform: translateX(-100%);

    transition: transform 0.4s ease-in-out;

    text-align: left;

    z-index: 100;

    overflow: visible;
}


/* =================================
   OPEN MENU
================================= */

.nav-container input[type="checkbox"]:checked ~ .menu-items {
    transform: translateX(0);
}


/* =================================
   MENU SECTIONS
================================= */

.menu-section {
    margin-left: 0;
    padding-left: 0;

    margin-bottom: 25px;
}


.menu-heading {
    display: block;

    margin: 0 0 10px 0;

    font-family: 'Lucida Sans', sans-serif;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 0.8px;

    color: rgb(145, 145, 145);
}


/* =================================
   LISTS
================================= */

.menu-items ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.menu-items li {
    margin: 0 0 0.5rem 0;
    padding: 0;

    list-style: none;
}


/* =================================
   PROJECTS / WORKS
================================= */

.menu-section a {
    font-family: 'Lucida Sans', sans-serif;

    font-size: 11px;

    font-weight: 500;

    color: #0e2431;

    text-decoration: none;
}


.menu-section a:visited {
    color: #0e2431;
}


.menu-section a:hover {
    font-weight: bolder;
}


/* =================================
   DIVIDER
================================= */

.menu-items hr {
    width: 100%;

    height: 1px;

    margin: 20px 0;

    border: none;

    background-color: #ccc;
}


/* =================================
   GENERAL NAVIGATION
================================= */

.menu-information {
    margin-left: 0;
    padding-left: 0;

    margin-top: 10px;
}


.menu-information ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.menu-information li {
    margin-bottom: 0.5rem;
}


.menu-information a {
    font-family: 'Lucida Sans', sans-serif;

    font-size: 11px;

    font-weight: 500;

    color: #0e2431;

    text-decoration: none;
}


.menu-information a:visited {
    color: #0e2431;
}


.menu-information a:hover {
    font-weight: bolder;
}


/* =================================
   HAMBURGER ANIMATION
================================= */

.nav-container input[type="checkbox"]:checked
~ .hamburger-lines .line1 {

    transform:
        translateY(12px)
        rotate(45deg);
}


.nav-container input[type="checkbox"]:checked
~ .hamburger-lines .line2 {

    opacity: 0;
}


.nav-container input[type="checkbox"]:checked
~ .hamburger-lines .line3 {

    transform:
        translateY(-12px)
        rotate(-45deg);
}