#proj_page_header {
    margin-top: 15rem;
}
.section-spacing {
    height: 15rem;
}
.section-spacing-half {
    height: 6rem;
}
.rockler-blue {
    background-color: #325474;
}
.rockler-orange {
    background-color: #FD8F3E;
}
.hold-me-tight-pink {
    background-color: #FF9A9A;
}
.in-our-own-words-pink {
    background-color: #ffb2ce;
}
.creeture-pink {
    background-color: #F178A6;
}
.yokai-blue {
    background-color: #2196A3;
}
.orange {
    background-color: #F8A58C;
}
.light-green {
    background-color: #a2d2a1;
}
.zenit-green {
    background-color: #87A98D;
}
.zenit-red {
    background-color: #DA9897;
}
.zenit-blue {
    background-color: #97B3DB;
}
.grillfest-orange {
    background-color: #f15a22;
}
.grillfest-yellow {
    background-color: #ffcc32;
}
.fsc-orange {
    background-color: #df5c2a;
}
.patio-bracket-blue {
    background-color: #cceaf7;
}
.mhda-green {
    background-color: #006664;
}
.igh-yellow {
    background-color: #eda834;
}
.grey {
    background-color: #727272;
}
.grey-contact {
    background-color: #727272;
}
.dark-grey {
    background-color: #444444;
}
.black {
    background-color: #000000;
}
/*1x3 FLEXBOX CONTAINER*/
.three-by-one-flex {
    display: flex;
    column-gap: 2rem;
}
.three-by-one-flex-item {
    width: 33%;
    margin: auto;
}
.three-by-one-flex-item img {
    width: 100%;
    height: 100%;
}

/*1x2 FLEXBOX CONTAINER*/
.onebytwo-flexbox {
    display: flex;
    column-gap: 2rem;
    margin-bottom: 2rem;
}

.onebytwo-flex-item {
    width: 50%;
    text-align: right;
    margin: auto;
}
.onebytwo-flex-item img {
    width: 100%;
    height: 100%;
}
.onebytwo-flex-item h1 {
    font-family: "Articulat CF", sans-serif;
    font-weight: 400;
    line-height: 4rem;
    font-size: 3rem;
}
/*END 1x2 FLEXBOX CONTAINER*/

/*COVER IMAGE*/
.proj-page-top-img-container {
    width: 100vw;
    height: 100rem;
    align-items: center;
    overflow: hidden;
    margin-bottom: 22rem;
}
.proj-page-top-img-container img {
    height: 100%;
    width: 100vw;
    object-fit: cover;
}
/*COVER IMAGE END*/

/*TOP LOGO*/
#proj-top-logo {
    align-items: end;
    position: absolute;
}

.proj-logo {
    position: absolute;
    margin-top: 80rem;
    margin-right: 20%;
    margin-left: 60%;
    height: 30rem;
    width: 30rem;
}
.proj-logo img {
    height: 30rem;
    width: 30rem;
}
/*TOP LOGO END*/

/*TITLE CONTAINER*/
.proj-title-container {
    display: flex;
    margin-bottom: 10rem;
}
.proj-title {
    width: 60%;
    height: fit-content;
}
.proj-title h1 {
    font-family: "dazzle-unicase", sans-serif;
    font-weight: 500;
    font-size: 8rem;
    margin: 0;
}
.proj-desc-items {
    padding-top: 2.5rem;
    padding-left: 2%;
    width: 40%;
    height: fit-content;
}
.proj-desc-items h1 {
    font-family: "Articulat CF", sans-serif;
    font-weight: 400;
    margin: 0;
}
/*END TITLE CONTAINER*/

/*INTRO PARAGRAPH*/
.intro-paragraph {
    width: 60%;
}
.intro-paragraph h1 {
    font-family: "Articulat CF", sans-serif;
    font-weight: 400;
    line-height: 4rem;
    font-size: 3rem;
}
/*END INTRO PARAGRAPH*/

/*FULL WIDTH BANNER*/
.full-width-banner {
    height: 50rem;
}
#veg-sul-etc {
    padding-top: 15rem;
}

.full-width-banner #vegan-sulfate-etc {
    height: 80%;
    width: 80%;
    margin: 0 auto;
 }
.full-width-banner img {
    margin: 0 auto;
}
    /*Full Width Banner w/ Green Leaves*/

#green-banner-leaves img{
    width: 100vw;
}
#black-logo {
    height: 60rem;
    width: 60rem;
    margin: 0 auto;
}
/*END FULL WIDTH BANNER*/

/*PROCESS WORK SECTION*/
.process-work {
    z-index: -1;
    width: 100%;
    height: 45rem;
    background-color: #dedcdc;
}
.process-bar {
    z-index: -1;
    background-color: #ffffff;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    height: 100%;
}
.process-bar-slide{
    align-items: center;
    animation: 25s slide infinite linear;
}
#yokai-process-bar {

}
.process-bar-slide img {
    padding-right: 2rem;
    padding-left: 2rem;
    display: inline-block;
    max-height: 100%;
}
/*END PROCESS WORK SECTION*/

/*NEXT PROJECT SECTION*/
#gen-head-next-proj{
    margin-bottom: 0;
}

#next-proj {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.next-proj-title h1 {
    font-family: "Articulat CF", sans-serif;
    font-weight: 500;
    color: white;
    font-size: 5rem;
    margin: 0;
    padding-left: 4rem;
}
.next-proj-logo {
    position: absolute;
    margin-top: 30rem;
    margin-right: 20%;
    margin-left: 60%;
    height: 30rem;
    width: 30rem;
}
.next-proj-logo img {
    height: 30rem;
    width: 30rem;
}

.grey-contact:hover {
    background-color: #606060;
}
.next-proj-link {
    text-decoration: none;
}
/*END NEXT PROJECT SECTION*/

/*Yokai Noodles Specific Tags*/
#yokai-title {
    font-family: "dazzle-unicase", sans-serif;
    font-weight: 500;
    font-size: 7rem;
    margin: 0;
}
.yokai-banner-flex {
    height: 50rem;
    display: flex;
    flex-direction: row;
    row-gap: 2rem;
    max-width: 100%;
    justify-content: center;
    overflow: hidden;
}
.yokai-banner-flexitem {
    display: flex;
    align-items: center;
    justify-content: center;
}
.yokai-banner-flex img {
    max-height: 100%;
    width: 100%;
}
#yokai-logo-banner {
    height: 70rem;
    display: flex;
    align-items: center;
}
#yokai-logo-banner img {
    height: 90%;
}
#yokai-logo-banner-2 {
    height: 70rem;
    display: flex;
    align-items: center;
}
#yokai-logo-banner-2 img {
    height: 90%;
}
/*END YOKAI NOODLES SPECIFIC TAGS*/

/*Mobility Hub Specific Tags*/
#mob-hub-title {
    font-family: "klavika", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 8rem;
    margin: 0;
}
#mob-hub-banner01 {
    height: 130rem;
}
#mob-hub-banner01 img {
    height: 100%;
    width: 100vw;
    object-fit: cover;
}
.style-guide-bar {
    z-index: -1;
    background-color: white;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    height: 60rem;
}
.style-guide-slide{
    align-items: center;
    animation: 45s slide infinite linear;
}
.style-guide-slide img {
    display: inline-block;
    max-height: 100%;
    margin-right: 2rem;
}
#text-mob-hub {
    z-index: 100;
    opacity: 1;
    background-color: transparent;
    height: 60rem;
}
#mob-hub {
    height: 60rem;
}
#text-mob-hub h1 {
    text-align: center;
    font-family: "Articulat CF", sans-serif;
    font-weight: 500;
    font-size: 4rem;
    color: white;
    margin: auto;
    padding: 3rem;
    border: solid 0.5rem white;
}
#page-overlay-hide-mob-hub {
    height: 60rem;
}
/*END MOBILITY HUB SPECIFIC TAGS*/

/*Creeture Energy Tags*/
#creeture-title {
    font-family: Shrub, serif;
    font-weight: bold;
    font-style: normal;
    font-size: 5.4rem;
    margin: 0;
    padding-top: 2.2rem;
}
.creeture-label-paragraph h1 {
    margin-top: 10rem;
    text-align: center;
    font-family: "Articulat CF", sans-serif;
    font-weight: 400;
    line-height: 4rem;
    font-size: 4rem;
}
/*END CREETURE TAGS*/

/*In Our Own Words Tags*/
#inourownwords-title {
    font-family: "Alternate Gothic No1 D", serif;
    font-style: normal;
    font-size: 11rem;
    margin: 0;
}
#ioow-banner01 {
    height: 100%;
}
#ioow-banner01 img {
    height: 100%;
    width: 100vw;
    object-fit: cover;
}
.ioow-label-paragraph h1 {
    margin-top: 10rem;
    text-align: center;
    font-family: "Articulat CF", sans-serif;
    font-weight: 400;
    line-height: 4rem;
    font-size: 4rem;
}
#ioow-banner02 {
    height: 150rem;
}
#ioow-banner02 img {
    height: 100%;
    width: 100vw;
    object-fit: cover;
}
/*END IN OUR OWN WORDS TAGS*/

/*Hold Me Tight Tags*/
#holdmetight-title {
    padding-top: 0.7rem;
    font-family: 'inter', serif;
    font-style: normal;
    font-size: 7rem;
    margin: 0;
}
/*END HOLD ME TIGHT TAGE*/

/*Rockler Roller Tags*/
#rockler-roller-title {
    font-family: "Articulat CF", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 6.5rem;
    margin: 0;
    padding-top: 3rem;
}
#rockler-roller-banner01 {
    height: fit-content;
}
#rockler-roller-banner01 img {
    width: 100%;
}
.rockler-banner-text {
    padding-top: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.rockler-banner-text h1 {
    font-family: inter, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 7rem;
    text-align: center;
    line-height: 1rem;
    color: white;
}
/*End Rockler Roller Tags*/

/*ZENIT LONGBOARDS TAGS*/
#zenit-title {
    font-family: "Alternate Gothic No3 D", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 6.5rem;
    margin: 0;
    padding-top: 3rem;
}
#zenit-banner01 {
    height: fit-content;
}
#zenit-banner01 img {
    width: 100%;
}
#zenit-banner02 {
    height: fit-content;
}
#zenit-banner02 img {
    width: 100%;
}
.zenit-banner-text {
    padding-top: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.zenit-banner-text h1 {
    font-family: "Alternate Gothic No3 D", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 10rem;
    text-align: center;
    color: white;
}
.zenit-under-img-text {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
}

/*END ZENIT LONGBOARD TAGS*/

/*BEGIN MNMO EVENTS TAGS*/
#mnmo-title {
    font-family: Sentinel, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 6.5rem;
    margin: 0;
    padding-top: 3rem;
}

.grillfest-banner-text {
    padding-top: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.grillfest-banner-text h1 {
    font-family: "inter", sans-serif;
    font-weight: 1000;
    font-style: normal;
    font-size: 10rem;
    text-align: center;
    color: #ffcc32;
}
.fsc-banner-text {
    padding-top: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.fsc-banner-text h1 {
    font-family: "inter", sans-serif;
    font-weight: 1000;
    font-style: normal;
    font-size: 10rem;
    text-align: center;
    color: white;
}
.patio-bracket-banner-text {
    padding-top: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.patio-bracket-banner-text h1 {
    font-family: "inter", sans-serif;
    font-weight: 1000;
    font-style: normal;
    font-size: 10rem;
    text-align: center;
    color: #e79249;
}
.mhda-banner-text {
    padding-top: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mhda-banner-text h1 {
    font-family: "inter", sans-serif;
    font-weight: 1000;
    font-style: normal;
    font-size: 10rem;
    text-align: center;
    color: white;
}
.igh-banner-text {
    padding-top: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.igh-banner-text h1 {
    font-family: "inter", sans-serif;
    font-weight: 1000;
    font-style: normal;
    font-size: 10rem;
    text-align: center;
    color: #0f385c;
}



/*About Me Tags*/
#about-me-banner {
    display: flex;
    align-items: center;
    justify-content: center;
}
#about-me-div {
    width: fit-content;
    height: 100%;
}
#about-me-div img {
    width: 100%;
    height: 100%;
}
#about-me-paragraph-text h1 {
    margin-top: 5rem;
}
/*End About Me Tags*/

/*Contact Tags*/
.contact-items {
    & h1:hover {
        background-color: #444444;
        color: white;
    }
    padding-top: 2.5rem;
    padding-left: 2%;
    width: 40%;
    height: fit-content;
}
.contact-items a {
    text-decoration: none;
    color: black;
    font-family: "Articulat CF", sans-serif;
    font-weight: 400;
    margin: 0;
}
.contact-items h1 {
    margin: 0;
    padding: 1rem;
    width: fit-content;
}
#contact-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: fit-content;
}
.contact-block h2 {
    text-align: center;
    color: #ffb27a;
    font-family: "Articulat CF", sans-serif;
    font-weight: 600;
    font-size: 10rem;
    margin: 0;
}
.contact-block h3 {
    text-align: center;
    color: white;
    font-family: "Articulat CF", sans-serif;
    font-weight: 500;
    font-size: 8rem;
    margin: 0;
}