@font-face {
    font-family: "DefaultSans-Medium";
    src: url(/fonts/default-sans/DefaultSans-Medium.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "DefaultSans-SemiBold";
    src: url(/fonts/default-sans/DefaultSans-SemiBold.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "DefaultSans-Bold";
    src: url(/fonts/default-sans/DefaultSans-Bold.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "midnight";
    src: url(/fonts/blackout_midnight-webfont.woff) format("woff");
    font-display: swap;
}

html {
    font-family: "DefaultSans-Medium";
}

body {
    -webkit-font-smoothing: antialiased;
    background-color: #f42525;
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
    margin: 0;
    display: block;
    max-width: 100%;
    overflow-wrap: break-word;
    overflow: visible
}

#logo img {
    max-height: 150px;
    max-width: 100%
}

header {
    position: relative;
    display: flex;
    z-index: 2;
    max-width: 100%;
    box-sizing: border-box;
    padding-top: 1vw;
    padding-bottom: 1vw;
    padding-left: 4vw;
    padding-right: 4vw;
    pointer-events: auto;
    align-items: center
}

#logo {
    max-width: 34% !important;
    width: 34%;
    display: block
}

nav {
    font-family: "DefaultSans-SemiBold";
    max-width: 33% !important;
    width: 33%;
    display: block;
    white-space: nowrap;
    z-index: 0
}

.active-page {
    background-image: linear-gradient(to right, #333 100%, #333 0);
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 calc(100% - .5em);
    text-decoration: none;
    backface-visibility: hidden
}

nav a {
    margin-right: 4vw;
    text-decoration: none;
    width: 50% !important;
    font-size: calc((1.1 - 1) * 1.2vw + 1rem);
    letter-spacing: .02em;
    font-weight: 500;
    line-height: 1.8em
}

#nav2 {
    margin: 0 !important
}

path,
svg {
    fill: #333;
    width: 25px !important;
    height: 25px !important
}

.socials a {
    text-decoration: none;
    margin-left: 5vw
}

.socials {
    display: inline-flex;
    justify-content: flex-end;
    max-width: 33% !important;
    width: 33%;
    text-align: right !important
}


a {
    color: #333
}

h1,
h1 a {
    text-decoration: none !important;
    margin: 2rem;
    font-size: calc((4.2 - 1) * 1.2vw + 1rem)
}

h2,
h2 a {
    font-size: calc((2.8 - 1) * 1.2vw + 1rem)
}

.title em {
    margin: 1rem;
    font-size: 1.15em
}

h1 a:hover {
    text-decoration: underline !important
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "midnight";
}

h1 a {
    text-decoration: none !important
}

@keyframes scroll {
    from {
        transform: translatex(-20%)
    }

    to {
        transform: translatex(-100%)
    }
}

@keyframes scroll_p {
    from {
        transform: translatex(-20%)
    }

    to {
        transform: translatex(-150%)
    }
}

@keyframes scrollM {
    from {
        transform: translatex(-10%)
    }

    to {
        transform: translatex(-300%)
    }
}

@keyframes scrollM_p {
    from {
        transform: translatex(-10%)
    }

    to {
        transform: translatex(-260%)
    }
}

.title {
    padding-bottom: calc(10vmax/5);
    letter-spacing: .02em
}

#name-header {
    text-decoration: none !important;
    white-space: nowrap !important;
    animation: scroll 60s linear infinite
}

#subtitle {
    text-decoration: none !important;
    white-space: nowrap !important;
    font-size: .8em !important;
    animation: scroll 60s linear infinite
}

#home-content {
    border: solid #000;
    border-width: 2px
}

.image-text {
    margin: 0;
    color: #f42525;
    /*background-color: blue;*/
    width: 33.33%;
    width: calc(100%/3);
    text-align: center;
    position: absolute;
    padding-top: 11vmax !important;
    font-size: calc((1.5 - 1) * 1.2vw + 1rem);
    -webkit-text-stroke: .5px #000;
}

#home-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #000;
    align-content: space-between;
}

.gallery-item:hover .image-text {
    color: #f6f3ea !important
}

.gallery-item {
    margin: 2px !important;
    float: left;
    aspect-ratio: 4/3;
    flex: 30%;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    margin: 0;
    display: block
}

section {
    overflow: hidden !important;
    position: relative;
    justify-content: flex-start;
    justify-items: right;
    align-items: center;
    display: block;
    text-align: center !important;
    max-width: 100%
}

#subheader {
    border: none !important;
    min-height: 20vh !important;
    justify-content: center;
    display: flex
}

footer {
    border-top: solid #000;
    border-width: 4px
}

#footer-links p {
    font-size: calc((1.1 - 1) * 1.2vw + 1rem);
    font-family: "DefaultSans-Bold" !important;
    height: auto;
    letter-spacing: .02em
}

h2 a,
h3 a,
p a {
    text-decoration: none !important
}

h2 a:hover,
h3 a:hover,
p a:hover {
    color: #f53d3d !important
}

#title-about-me {
    font-size: calc((1.1 - 1) * 1.2vw + 1rem);
    line-height: 1.8em;
    font-weight: 500;
    margin-left: 3vw;
    margin-right: 3vw
}

#title-email {
    font-size: calc((1.1 - 1) * 1.2vw + 1rem);
    line-height: 1.8em;
    margin-left: 2vw;
    margin-right: 2vw
}

#form-content {
    background-color: #f6f3ea;
    display: flex;
    justify-content: center;
    padding: 3vw 4vw
}

form {
    width: 75%;
    display: block
}

.form-field {
    width: 100%;
    text-align: left;
    padding-bottom: 24px;
    display: inline-block
}

.form-field-title {
    font-size: calc((1.1 - 1) * 1.2vw + 1rem) !important;
    font-weight: 500;
    width: 100%;
    display: inline-block;
    font-style: normal;
    letter-spacing: .02em;
    line-height: 1.8em;
    color: #000
}

.required {
    color: #f42525 !important
}

#both-names {
    display: flex;
    color: #333;
    box-sizing: border-box;
    width: 100%
}

#spacer {
    width: 6% !important
}

#first-name {
    width: 48%
}

#last-name {
    width: 48%
}

.content {
    border-top: solid #000;
    border-width: 4px
}

input,
textarea {
    width: 100%;
    margin-top: 8px;
    border: solid 1px;
    border-color: #ccc;
    border-radius: 2px;
    padding: 12px;
    box-sizing: border-box !important
}

textarea {
    min-height: 100px;
    resize: vertical
}

.form-button {
    width: 100%;
    display: inline-block;
    text-align: left
}

#submit-button {
    width: auto;
    margin: 0;
    border-radius: 0;
    color: #f6f3ea;
    background-color: #f42525;
    margin: 0;
    padding: 1.2rem 2rem;
    line-height: 1.8rem;
    font-size: 1rem
}

#submit-button:hover {
    background-color: #f53d3d;
    cursor: pointer
}

#header-burger {
    display: none
}

#burger-container {
    display: none
}

#mobile-menu {
    background-color: #f42525;
    display: flex;
    position: fixed;
    opacity: 0;
    visibility: hidden;
    width: 100% !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    will-change: opacity, visibility;
    z-index: 1 !important
}

#mobile-menu nav,
#mobile-menu nav a {
    display: flex;
    width: 100% !important;
    max-width: none !important;
    text-align: center;
    align-self: center;
    flex-direction: column;
    flex-grow: 1;
    margin: 0;
    font-size: 8.5vmin
}

#mobile-menu div {
    display: flex !important;
    position: absolute;
    clear: both;
    width: 100% !important;
    justify-content: center;
    bottom: 5%
}

.mobile-social {
    display: block !important;
    clear: both;
    padding: 2vw
}

.mobile-social path,
.mobile-social svg {
    fill: #333;
    height: 30px !important;
    width: 30px !important
}

@media (max-width:767px) {
    nav a {
        font-size: calc((0.8 - 1) * 1.2vw + 1rem);
    }

    path,
    svg {
        fill: #333;
        width: 20px !important;
        height: 20px !important
    }
}

@media (max-width:600px) {

    .gallery-item {
        margin: 2px !important;
        float: left;
        aspect-ratio: 4/3;
        flex: 48% !important;
    }

    header {
        display: flex;
        padding-top: 3vw;
        padding-bottom: 3vw
    }

    #name-header {
        animation: scrollM 60s linear infinite
    }

    p#subtitle {
        animation: scrollM_p 60s linear infinite
    }

    #logo {
        width: 90%;
        max-width: none !important;
        display: block;
        text-align: left !important
    }

    #logo img {
        max-height: calc(150px/3);
        max-width: calc(63px/3)
    }

    svg {
        margin: 0 !important
    }

    nav {
        display: none
    }

    .active-page {
        background-image: none
    }

    .socials {
        display: none
    }

    #logo,
    button {
        z-index: 2 !important;
        display: flex;
        position: relative
    }

    #burger-container {
        display: inline-block !important;
        position: relative;
        border: none;
        background-color: transparent;
        cursor: pointer;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box
    }

    #header-burger {
        height: 35px;
        width: 35px;
        display: block;
        float: right
    }

    #header-burger div {
        background-color: #333;
        display: block;
        top: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        content: '';
        width: 100%;
        height: 2px;
        transition: transform 250ms cubic-bezier(.2, .6, .3, 1), width 250ms cubic-bezier(.2, .6, .3, 1);
        will-change: transform, width
    }

    #burger-top {
        transform: translatey(10px) !important
        
    }

    #burger-bottom {
        transform: translatey(17px) !important
    }

    #x-top {
        transform: translatex(-12px) translatey(12px) rotate(45deg);
    }

    #x-bottom {
        transform: translatex(-12px) translatey(10px) rotate(-45deg);
    }

    .image-text {
        color: #f42525;
        width: 50%;
        width: calc(100%/2);
        text-align: center;
        position: absolute;
        margin: 0;
        padding-top: 17% !important;
        font-size: calc((0.8 - 1) * 1.2vw + 1rem);
        -webkit-text-stroke: .5px #000
    }
}

@media only screen and (pointer:coarse) and (max-width:1024px),
screen and (max-width:799px) {
    #mobile-menu {
        transition: visibility .6s cubic-bezier(.4, 0, .2, 1), opacity .4s cubic-bezier(.4, 0, .2, 1)
    }

    #burger-top {
        transform: translatey(10px) !important;

    }

    #burger-bottom {
        transform: translatey(17px) !important;
    }
}

@media (min-width:601px) {
    #mobile-menu {
        opacity: 0 !important;
        visibility: hidden !important
    }

    body {
        overflow: visible !important
    }
}