html {
    font-size: 10px;
}

.wrapper {
    top: 0;
    left: 0;
    right: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    width: 100vw;
    position: absolute;
    z-index: 1;
}

.container {
    display: flex;
    flex-direction: column;
    /*Responsive shrinking margins: code below!*/
    width: 100%;
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 3rem 0 3rem;
}
.white {
    background-color: white;
}
.black {
    background-color: black;
}
.orange {
    background-color: #ffb27a;
}
.cb-orange {
    background-color: #ffb27a;
}
.grey {
    background-color: #444444;
}
.light-grey {
    background-color: #727272;
}

/*BEGIN HEADER*/
.general-header {
    width: 100vw;
    height: 20rem;
    background-color: #444444;
    margin-bottom: 2rem;
}
.general-header h1 {
    color: white;
    padding-top: 2.2rem;
    font-family: "TAN-BUSTER", serif;
    font-size: 8rem;
}
.general-titles {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 15rem;
    margin-top: 2rem;
}
.general-titles h1 {
    font-family: "TAN-BUSTER", serif;
    font-size: 8rem;
    margin: 0 auto;
}
#gen-head-contact-bar {
    margin: 0;
}

/*END HEADER*/


/*START NAV BAR CODE*/
#nav-container {
    z-index: 900;
    transition: opacity 0.2s ease-in-out;
    transition-delay: 0.1s;
    position: fixed;
    top: 0;
    opacity: 1;
    display: flex;
    align-items: center;
    width: 100vw;
    height: 11rem;
    background-color: #888888;
}
/*.show {*/
/*    &#nav-container {*/
/*        opacity: 1;*/
/*    }*/
/*}*/
.nav-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100vw;
    height: 8rem;
    margin-left: 3%;
    margin-right: 3%;
}
/*END NAV BAR CODE*/

    /*START HAMBURGER MENU CODE*/
.material-icons {
    font-size: 60px;
    color: white;
}
li {
    padding-top: 3rem;
}
.menuItem {
    color: #ffb27a;
    font-family: "TAN-BUSTER", serif;
    font-size: 4rem;
    text-decoration: none;
}
.hamburger {
    display: block;
    z-index: 1000;
    border: none;
    background: none;
    cursor: pointer;
    padding-right: 17.7rem;
}
.closeIcon {
    display: none;
}
.menu {
    display: block;
    margin-top: 0;
    position: fixed;
    transform: translateX(-100%);
    transition: transform 0.6s;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: #000000;
    opacity: 90%;
    color: white;
    list-style: none;
    padding-top: 14rem;
    padding-left: 5.5rem;
}
.showMenu {
    transform: translateX(0);
    padding-top: 14rem;
    padding-left: 5.5rem;
}
    /*END HAMBURGER MENU CODE*/

#top-logo {
    margin: 0 auto;
}
#top-logo img {
    height: 8rem;
    text-decoration: none;
}

.social-bar {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 0;
}
.social-bar li {
    padding: 0;
    list-style-type: none;
}
.social-bar img {
    padding: 0.5rem;
}
.social-bar a {
    width: 100%;
    height: 100%;
}
/*END NAV BAR CODE*/

/*START TITLE CARD CODE*/
.page-titles {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 15rem;
    margin-top: 2rem;
}
.left-square{
    margin-left: 5rem;
    height: 4rem;
    width: 4rem;
}
.right-square{
    margin-right: 5rem;
    height: 4rem;
    width: 4rem;
}
.center-square {
    height: 4rem;
    width: 4rem;
    margin: 0 auto;
}
.page-titles h1 {
    font-family: "Articulat CF", sans-serif;
    font-size: 5rem;
    font-weight: 500;
    margin: 0 auto;
}
/*END TITLE CARD CODE*/

/*START SCROLL BAR 1 CODE*/
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
.scroll-bar {
    z-index: -1;
    background-color: #232323;
    opacity: 94%;
    padding-top: 4rem;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    height: 7rem;
    margin-top: 11rem;
}
.scroll-bar-slide{
    align-items: center;
    animation: 30s slide infinite linear;
}
.scroll-bar-slide h1 {
    display: inline-block;
    font-family: "TAN-BUSTER", serif;
    color: #ffb27a;
    font-size: 3.5rem;
    margin: 0 4rem;
    width: fit-content;
}
/*END SCROLL BAR ONE CODE*/

/*START INTRO SECTION CODE*/
.intro-section {
    width: 100vw;
    height: fit-content;
    margin-bottom: 20rem;
    overflow: hidden;
}
.intro-cover-container {
    width: 100vw;
    height: fit-content;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.intro-cover-container img {
    height: 100%;
    width: 100vw;
    object-fit: cover;
}
.button-container {
    position: absolute;
    background-color: #ffb27a;
    padding: 0 4rem 0 4rem;
    margin-top: 45rem;
}
        /*intro contents container*/
#intro-container {
    overflow: hidden;
    flex-direction: row;
    height: 80rem;
    margin-top: 10rem;
    margin-bottom: 5rem;
    align-items: center;
}
        /*Text block container*/
.intro-text {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 100%;
    margin-right: 5rem;
}
        /*"hi there I'm ogden"*/
.intro-text h1 {
    font-family: "Articulat CF", sans-serif;
    font-weight: 700;
    font-size: 3.7rem;
    color: #ffb27a;
    margin: auto 0 auto 0;
}
        /*"What impression does your brand..."*/
.intro-text #semi-bold {
    font-family: "Articulat CF", sans-serif;
    font-weight: 600;
    font-size: 3rem;
    margin: auto;
    color: white;
}
        /*"Life is all about impress..."*/
.intro-text #light {
    font-family: "Articulat CF", sans-serif;
    font-weight: 400;
    font-size: 3rem;
    margin: auto;
    color: white;
}
        /*"I will work with you..."*/
.intro-text #bold {
    font-family: "Articulat CF", sans-serif;
    font-weight: 700;
    font-size: 3rem;
    margin: auto;
    color: white;
}
        /*Services Button*/
.button {
    text-decoration: none;
    text-align: center;
    background-color: #ffb27a;
    margin-top: 2rem;
}
.button:hover {
    background-color: #ffc9a0;
}
.button h1 {
    color: black;
    font-family: "Articulat CF", sans-serif;
    font-weight: 600;
    font-size: 5rem;
    margin: 2rem 0;
}
        /*Portrait container*/
.intro-img-container {
    flex: 1 1 0;
    height: 100%;
    width: 60%;
    overflow: hidden;
}
        /*Portrait*/
.intro-img-container img {
    max-height: 100%;

}
/*END INTRO SECTION CODE*/

/*BEGIN MORE ABOUT ME*/

.vid-border {
    overflow: hidden;
    max-width: 100%;
    height: fit-content;
}
.vid-border h1 {
    color: #444444;
    padding-top: 2.2rem;
    font-family: "TAN-BUSTER", serif;
    font-size: 6rem;
}
#youtube-vid {
    aspect-ratio: 16 / 9;
}
/*END MORE ABOUT ME*/

/*BEGIN SERVICES*/
#services-header {
    margin: 0;
}
.service-container {
    column-gap: 6rem;
    display: flex;
    max-width: 100rem;
    height: fit-content;
    margin: 0 auto;
    padding: 5rem 3rem 0 3rem;
}
.service-container h1 {
    font-family: "Articulat CF", sans-serif;
    font-weight: 600;
    font-size: 7rem;
    text-align: center;
    margin: 0 auto 1rem auto;
}
.service-item {
    flex: 1;
    background-color: #444444;
    min-width: 0;
    padding: 4rem;
}
.service-item h1 {
    margin-top: 2rem;
    font-family: "Articulat CF", sans-serif;
    font-weight: 600;
    font-size: 2.4rem;
    text-align: center;
    color: #ffb27a;
}
.service-item h2 {
    margin-top: 3rem;
    margin-bottom: 2rem;
    font-family: "Articulat CF", sans-serif;
    font-weight: 400;
    font-size: 1.8rem;
    text-align: center;
    color: #ffffff;
}
#interested-lets-talk {
    padding-top: 15rem;
    margin-bottom: 10rem;
}

.cb-container {
    column-gap: 6rem;
    display: flex;
    max-width: 100vw;
    height: fit-content;
    margin-bottom: 0;
    padding: 3rem 8rem 3rem 8rem;
}
#contact-button {
    margin-bottom: 15rem;
}
.cb-item {
    flex: 1;
    min-width: 0;
}

.cb-item h1 {
    text-align: center;
    font-family: "Articulat CF", sans-serif;
    font-weight: 600;
    font-size: 5rem;
    margin: 0 auto;
    padding: 2rem;
}
.cb-item h1:hover{
    background-color: #ffc9a0;
}
/*END SERVICES*/

/*BEGIN CONTACT INFORMATION*/
.contact {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    align-items: center;
}
.contact h1 {
    text-align: center;
    font-family: "Articulat CF", sans-serif;
    font-weight: 500;
    font-size: 4rem;
    color: black;
    padding: 1rem 0;
    margin: 1rem auto;
}
#resume-button {
    padding-bottom: 0;
}
#res-button {
    background-color: #ffb27a;
}
#social-links-contact li {
    flex: 1;
    align-items: center;
    text-align: center;
}
#social-buttons {
    padding-bottom: 0;
}
#bottom-logo {
    padding-bottom: 0;
}
#bottom-logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
/*END CONTACT INFORMATION*/

/*BEGIN FOOTER*/
.footer {
    margin-top: 40rem;
    width: 100vw;
    height: 10rem;
    background-color: #444444;
}
/*BEGIN PORTFOLIO WORK SECTION*/
.page-imgs {
    z-index: -1;
    width: 100%;
    height: 70rem;
    background-color: #dedcdc;
    margin-bottom: 5rem;
}
    /*Hover activated button overlays*/
.page-overlay {
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 99;
    height: 70rem;
    width: 100%;
    background-color: black;
    opacity: 60%;
}
.page-overlay-hide {
    position: absolute;
    z-index: 99;
    height: 70rem;
    width: 100%;
    /*opacity: 0;*/
    /*transition: opacity 0.2s ease-in-out;*/
}
/*.page-overlay-hide:hover {*/
/*    opacity: 100%;*/
/*}*/
        /*hover overlay text*/
.text {
    z-index: 100;
    opacity: 1;
    background-color: transparent;
}
.text 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;
}

.branding-bar {
    z-index: -1;
    background-color: #444444;
    display: flex;
    align-items: center;
    flex-direction: column;
    white-space: nowrap;
    overflow: hidden;
    height: 100%;
}
.branding-bar-slide{
    align-items: center;
    /*animation: 35s slide infinite linear;*/
}
.branding-bar-slide img {
    display: inline-block;
    height: 35rem;
}
.poster-bar {
    align-items: center;
    z-index: -1;
    background-color: #444444;
    flex-direction: column;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    height: 100%;
}
.poster-bar-slide{
    align-items: center;
    /*animation: 25s slide infinite linear;*/
    /*animation-direction: reverse;*/
}
.poster-bar-slide img {
    display: inline-block;
    height: 35rem;
}
.photo-bar {
    z-index: -1;
    background-color: #444444;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    height: 100%;
}
.photo-bar-slide{
    align-items: center;
    animation: 45s slide infinite linear;
}
.photo-bar-slide img {
    display: inline-block;
    max-height: 100%;
}

/*Contact Bar*/
.next-proj-link {
    text-decoration: none;
}
.full-width-banner {
    height: 50rem;
}
.light-grey:hover {
    background-color: #606060;
}
.contact-logo {
    position: absolute;
    margin-top: 30rem;
    margin-right: 20%;
    margin-left: 60%;
    height: 30rem;
    width: 30rem;
}
.contact-logo img {
    height: 30rem;
    width: 30rem;
}
#next-contact {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.next-contact-title h1 {
    font-family: "Articulat CF", sans-serif;
    font-weight: 500;
    color: white;
    font-size: 4rem;
    margin: 0;
    padding-left: 4rem;
}
.section-spacing {
    height: 15rem;
}
.section-spacing-half {
    height: 6rem;
}