/* HEADER */
header {
    background: #042E13;
    }

/* NAVIGATION */
.topnav {
    overflow: hidden;
    max-width: 1300px;
    margin: 0 auto;
    align-items: center;
    display: flex;
    }
.topnav a {
    color: #fff;
    text-align: center;
    padding: 15px 16px;
    text-decoration: none;
    font-size: 18px;
    font-family: "quasimoda", sans-serif;
    font-weight: 500;
    }
a.nav-logo {
    max-width: 150px;
    float: left;
    }
.right-nav {
    float: right;
    text-align: right;
    margin: 0 0 0 auto;
    }
.icon {
    display: none;
    }

/* UNIVERSAL */
img {
    width: 100%;
    }
body {
    margin: 0px;
    }
a:hover {
    color: #F98B2F!important;
    text-decoration: none !important;
    }
.home-title {
    font-size: 60px;
    color: #042E13;
    font-family: 'quasimoda', sans-serif;
    font-weight: 600;
    text-align: center;
    }
.home-txt {
    font-family: 'quasimoda', sans-serif;
    font-size: 22px;
    font-weight: 300;
    text-align: center;
    }
.home-subtitle {
    color: #F98B2F;
    font-family: 'quasimoda', sans-serif;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    }
.home-header-mobile {
    display: none;
    }

/* ABOUT SECTION */
.aboutContainer{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1300px;
    margin: auto;
    align-items: center;
    }
.flex-direction {
    flex-direction: row;
    }
.aboutDiv1 {
    width: 25%;
    margin: 0% 1% 0 0;
    }
.aboutDiv2 {
    width: 73%;
    margin: 0 0 0 1%;
    }
.hanna-img-mobile {
    display: none;
    }
.clif1, .clif2, .clif3, .clif4, .clif5 {
    border-bottom: solid 1px #CFCFCF;
    }
.strenContainer{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1300px;
    margin: auto;
    align-items: center;
    }
.strenDiv1 {
    width: 20%;
    margin: 0% auto;
    padding: 1rem;
    }
.aboutDiv2 .home-title {
    text-align: left;
    }
.aboutDiv2 .home-txt {
    text-align: left;
    }
.journey-div {
    max-width: 1300px;
    text-align: center;
    margin: 1rem auto;
    }
.strengths-div {
    max-width: 1300px;
    margin: 4rem auto 5rem;
    }
.strengths-div .home-txt {
    margin-bottom: 2rem;
    }
.stren-theme {
    font-family: 'quasimoda', sans-serif;
    font-size: 20px;
    line-height: 1;
    color: #042E13;
    font-weight: 300;
    max-width: 150px;
    text-align: center;
    margin: 0 auto;
    }
.strength {
    font-family: 'quasimoda', sans-serif;
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0;
    }
.clif2, .clif3, .clif4, .clif5, .clif7, .clif8, .clif9, .clif10 {
    border-left: solid 1px #CFCFCF;
    }

/* PROCESS SECTION */
.processContainer{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1300px;
    margin: 3rem auto 0;
    z-index: 5;
    position: relative;
    }
.processDiv1 {
    width: 23%;
    margin: 0% 1%;
    text-align: center;
    }
.extra-pad {
    padding: 1.625rem;
    }
#process {
    background: #042E13;
    }
.process-div .home-title {
    color: #fff;
    }
.process-div {
    padding: 3rem 0;
    position: relative;
    }
.processDiv1 img {
    max-width: 125px;
    }
.proc-line {
    width: 1000px;
    border-bottom: 5px solid #fff;
    position: absolute;
    top: 54%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 0;
    }
.process-step {
    font-family: 'quasimoda', sans-serif;
    color: #F98B2F;
    font-weight: 300;
    font-size: 23px;
    margin-top: .75rem;
    margin-bottom: 0;
    }
.process-name {
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    font-family: 'quasimoda', sans-serif;
    line-height: 1;
    }
.process-explain {
    background: #000;
    }
.explain-txt {
    font-family: 'quasimoda', sans-serif;
    color: #fff;
    text-align: center;
    margin-bottom: 0;
    padding: 1rem 0 1.2rem;
    font-size: 25px;
    font-weight: 300;
    }
.explain-txt span {
    color: #F98B2F;
    font-weight: 700;
    font-size: 28px;
    }
#design-txt, #devel-txt, #deliv-txt {
    display: none;
    }
.processDiv1 img:hover {
    cursor: pointer;
    }

/* BRING TO THE TABLE SECTION */
.tableContainer{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1300px;
    margin: auto;
    align-items: center;
    }
.tableDiv1 {
    width: 48%;
    margin: 0% 2% 0 0;
    }
.tableDiv2 {
    width: 48%;
    margin: 0% 0 0 2%;
    }
.table-txt {
    font-family: 'quasimoda', sans-serif;
    font-size: 22px;
    font-weight: 300;
    margin-bottom: 0;
    max-width: 450px;
    }
.table-subhead {
    color: #F98B2F;
    font-family: 'quasimoda', sans-serif;
    font-size: 30px;
    margin-bottom: 1rem;
    }
#bring-table {
    margin: 5rem auto 3rem;
    }
.space {
    padding: 0 3rem 0 1rem;
    }
.tableDiv2 .home-title {
    text-align: left;
    margin-right: 10rem;
    line-height: 1;
    margin-bottom: 3rem;
    }
.slick-next {
    right: 100px!important;
    background-image: url(/img/table-arrow-right.png)!important;
    }
.slick-prev {
    left: -60px!important;
    background-image: url(/img/table-arrow-left.png)!important;
    }
.slick-prev, .slick-next {
    width: 30px!important;
    }
.slick-prev:before, .slick-next:before {
    color: transparent!important;
    }
.table-img-mobile {
    display: none;
}

/* PORTFOLIO SECTION */
.portContainer{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    }
.portDiv1 {
    width: 31.3%;
    margin: 1% 1%;
    }
#portfolio {
    max-width: 1300px;
    margin: 0 auto;
    }
.port-div {
    max-width: 980px;
    margin: 0 auto;
    }
.profess-div {
    margin: 3rem auto 2.5rem;
    max-width: 950px;
    }
.freelance-div {
    max-width: 935px;
    margin: 4rem auto 2rem;
    }
.proj-img {
    display: block;
    }
.proj-img-800 {
    display: none;
    }
.proj-img-600 {
    display: none;
    }

/* BEYOND THE SCREEN SECTION */
.beyondContainer{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1300px;
    margin: auto;
    align-items: center;
    }
.beyondDiv1 {
    width: 48%;
    margin: 0% 2% 0 0;
    }
.beyondDiv2 {
    width: 48%;
    margin: 0% 0 0 2%;
    }
#beyond {
    background: #042E13;
    margin: 7rem auto 5rem;
    }
.beyondDiv1 .home-title {
    color: #fff;
    text-align: left;
    line-height: 1;
    }
.beyondDiv1 .home-txt {
    color: #fff;
    text-align: left;
    margin-top: 2rem;
    max-width: 600px;
    margin-bottom: 0;
    }
.beyond-mobile-img {
    display: none;
    }


/* IMPACT SECTION */
#impact {
    max-width: 1300px;
    margin: 0 auto;
    }
#impact .home-title {
    text-align: left;
    }
#impact .home-txt {
    text-align: left;
    max-width: 1200px;
    }

/* CONTACT SECTION */
#contact {
    margin: 5rem auto;
    max-width: 1300px;
    }
.cont-group {
    display: block;
    margin-bottom: .2rem;
    }
.cont1 {
    display: inline-flex;
    align-items: anchor-center;
    }
.cont2 {
    display: inline-flex;
    align-items: anchor-center;
    }
.cont3 {
    display: inline-flex;
    align-items: anchor-center;
    }
.cont1 .cont-icon {
    max-width: 15px;
    margin-right: 5px;
    }
.cont2 .cont-icon {
    max-width: 12px;
    margin-left: 1.5px;
    margin-right: 6.5px;
    }
.cont3 .cont-icon {
    max-width: 13px;
    margin-left: 1.5px;
    margin-right: 5.5px;
    }
#contact .home-title {
    text-align: left;
    }
.cont-link {
    font-family: 'quasimoda', sans-serif;
    color: #000;
    font-weight: 200;
    font-size: 20px;
    }
.left-space {
    margin-left: 10px;
    }

/* FOOTER */
footer {
    background: #042E13;
    }
.footer-cont {
    padding: 1.25rem 0;
    max-width: 1300px;
    margin: 0 auto;
    }
.footer-logo {
    text-align: right;
    background: #fff;
    max-width: 1300px;
    margin: 0 auto;
    }
.footer-logo img {
    max-width: 230px;
    }
.footer-txt {
    margin-bottom: 0;
    }
.footer-links {
    display: inline;
    margin: 0 auto;
    }
.footer-txt {
    display: inline-block;
    color: #F98B2F;
    font-family: 'quasimoda', sans-serif;
    float: right;
    }
.footer-links a {
    color: #fff;
    font-family: 'quasimoda', sans-serif;
    font-size: 18px;
    margin-right: 2rem;
    font-weight: 400;
    }

/* PROJECT PAGES */
.projContainer {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
    }
.projDiv1 {
    width: 43%;
    margin: 3% 4% 0 7%;
    }
.projDiv2 {
    width: 46%;
    margin: 0% auto;
    }
.project-txt {
    font-family: 'quasimoda', sans-serif;
    font-size: 18px;
    font-weight: 300;
    text-align: left;
    margin-bottom: 0;
    }
.project-subtitle {
    color: #F98B2F;
    font-family: 'quasimoda', sans-serif;
    font-size: 35px;
    font-weight: 600;
    text-align: left;
    margin-bottom: .5rem;
    }
.roleContainer {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
    }
.roleDiv1 {
    width: 23%;
    margin: 0% 1%;
    text-align: center;
    }
#proj-header {
    position: relative;
    }
.proj-title {
    position: absolute;
    margin: auto;
    font-size: 50px;
    color: #fff;
    text-align: center;
    font-family: 'quasimoda';
    font-weight: 300;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
.proj-title span {
    color: #F98B2F;
    font-weight: 700;
    }
.text-section-div {
    margin-bottom: 2.5rem;
    }
img.role-icon {
    max-width: 100px;
    }
.role-step {
    margin-bottom: 0;
    margin-top: .5rem;
    font-family: 'quasimoda', sans-serif;
    color: #F98B2F;
    }
.role-name {
    font-family: 'quasimoda', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #042e13;
    margin-bottom: 0;
    line-height: 1;
    }
.link-group {
    display: block;
    }
.link1 {
    display: inline-flex;
    align-items: center;
    }
.link2 {
    display: inline-flex;
    align-items: center;
    }
.link3 {
    display: inline-flex;
    align-items: center;
    }
.link1 .link-icon {
    max-width: 14px;
    margin-left: 1.5px;
    margin-right: 6.5px;
    }
.link2 .link-icon {
    max-width: 14px;
    margin-left: 1.5px;
    margin-right: 6.5px;
    }
.link3 .link-icon {
    max-width: 14px;
    margin-left: 1.5px;
    margin-right: 6.5px;
    }
.link-link {
    font-family: 'quasimoda', sans-serif;
    color: #042e13;
    font-weight: 300;
    font-size: 18px;
    font-style: italic;
    text-decoration: underline;
    }
.link-left-space {
    margin-left: 5px;
    }
.impact-proj {
    max-width: 1300px;
    margin: 5rem auto 0;
    }
.impact-proj .home-title {
    text-align: left;
    }
.impact-proj .home-txt {
    text-align: left;
    }
.contact-proj {
    max-width: 1300px;
    margin: 2rem auto 3rem;
    }
.contact-proj .home-title {
    text-align: left;
    }
.capContainer{
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 3rem auto;
    }
.capDiv1 {
    width: 27.5%;
    margin: 0% 2% 0 0;
    }
.capDiv2 {
    width: 70.5%;
    margin: 0% 0%;
    }
.cap-body {
    max-width: 1300px;
    margin: 0 auto;
    }
.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:0px;
    height:0;
    overflow:hidden;
    }
.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    }


/* NEW HAMBURGER MENU */
.menuItem {
    display: block;
    margin: .5rem 2rem;
    font-size: 1.8rem;
    color: white;
    text-decoration: none;
    }
.menuItem:hover {
    text-decoration: underline;
    }
.hamburger {
    z-index: 100;
    padding: 4px;
    border: black solid 1px;
    background: white;
    margin: 0 0 0 auto;
    }
.closeIcon {
    display: none;
    }
.menu {
    position: fixed;
    transform: translateY(-100%);
    transition: transform 0.2s;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: black;
    color: white;
    list-style: none;
    padding-top: 4rem;
    margin-bottom: 0;
    }
.showMenu {
    transform: translateY(0);
    }
.menuIcon {
    display: block;
}


/* MOBILE RESPONSIVE */
@media screen and (max-width: 1500px) {
    .topnav, .aboutContainer, .journey-div, .strengths-div, .processContainer, .tableContainer, .portContainer, .beyondContainer, #impact, #contact {
        padding: 0 2rem;
        }
    .footer-cont {
        padding: 1.25rem 2rem;
        }
    .footer-logo {
        padding: 0 1.75rem;
        }
}
@media screen and (max-width: 1300px) {
    .topnav a {
        padding: 1.1539vw 1.231vw;
        font-size: 1.384615vw;
        }
    .home-title {
        font-size: 4.61539vw;
        }
    .home-txt {
        font-size: 1.69231vw;
        }
    .home-subtitle {
        font-size: 3.077vw;
        }
    .stren-theme {
        font-size: 1.53847vw;
        }
    .stren-theme {
        font-size: 1.53847vw;
        max-width: 11.539vw;
        }
    .strength {
        font-size: 1.9231vw;
        }
    .process-step {
        font-size: 1.77vw;
        margin-top: .75vw;
        }
    .process-name {
        font-size: 2.31vw;
        }
    .explain-txt span {
        font-size: 2.15385vw;
        }
    .explain-txt {
        font-size: 1.9231vw;
        padding: 1.231vw 0 1.4616vw;
        }
    .tableDiv2 .home-title {
        margin-right: 12.308vw;
        margin-bottom: 3.69235vw;
        }
    .table-subhead {
        font-size: 2.308vw;
        margin-bottom: 1.231vw;
        }
    .table-txt {
        font-size: 1.6924vw;
        max-width: 80%;
        }
    .cont-link {
        font-size: 1.539vw;
        }
    .cont1 .cont-icon {
        max-width: 6%;
        margin-right: .5vw;
        }
    .cont2 .cont-icon {
        max-width: 8%;
        margin-left: .116vw;
        margin-right: .5vw;
        }
    .cont3 .cont-icon {
        max-width: 7.03%;
        margin-left: .116vw;
        margin-right: .423vw;
        }
    .footer-links a {
        font-size: 1.3847vw;
        margin-right: 2.46155vw;
        }
    .footer-txt {
        font-size: 1.2vw;
        margin-right: 1vw;
        }
    .proc-line {
        width: 75%;
        border-bottom: .4vw solid #fff;
        }
    .footer-logo img {
        max-width: 18.49%;
        }
    .processDiv1 img {
        max-width: 43.975%;
        }
    .project-subtitle {
        font-size: 2.7vw;
        }
    .project-txt {
        font-size: 1.384615vw;
        }
    .text-section-div {
        margin-bottom: 3vw;
        }
    .proj-title {
        font-size: 3.8462vw;
        }
    .role-step {
        font-size: 1.5vw;
        line-height: 1;
        }
    .role-name {
        font-size: 1.75vw;
        }
    .impact-proj {
        padding: 0 7vw;
        margin: 5vw auto 0;
        }
    .contact-proj {
        padding: 0 7vw;
        margin: 2.5vw auto 3.5vw;
        }
    img.role-icon {
        max-width: 8vw;
        }
    .cap-body {
        padding: 0 7vw;
        }
}
@media screen and (max-width: 1000px) {
    .topnav, .aboutContainer, .journey-div, .strengths-div, .processContainer, .tableContainer, .beyondContainer, #impact, #contact, #portfolio {
        padding: 0 3rem;
        }
    .slick-prev {
        left: -4vw !important;
        }
    .slick-next {
        right: 6vw !important;
        }
    .table-txt {
        max-width: 85%;
        }
    a.nav-logo {
        max-width: 16.6%;
        }
    .proc-line {
        width: 65%;
        }
    #contact {
        margin: 4.5vw auto;
        }
}
@media screen and (min-width: 801px) {
    .menu, .hamburger {
        display: none;
        }
}
@media screen and (max-width: 800px) {
    .right-nav {
        display: none;
        }
    a.menuItem {
        display: block;
        text-align: left;
        color: #fff;
        font-size: 2.25vw;
        padding: .5vw 3vw;
        }
    .aboutDiv1 {
        width: 35%;
        }
    .aboutDiv2 {
        width: 63%;
        }
    .home-title {
        font-size: 5vw;
        }
    .home-txt {
        font-size: 1.8vw;
        }
    .home-subtitle {
        font-size: 4vw;
        }
    .strenDiv1 {
        width: 50%;
        }
    .stren-theme {
        max-width: none;
        font-size: 1.8vw;
        }
    .extra-pad {
        padding: 1.5rem;
        }
    .strength {
        font-size: 2.5vw;
        }
    .clif1, .clif2, .clif3, .clif4, .clif5, .clif6, .clif7, .clif8 {
        border-bottom: solid 1px #CFCFCF;
        }
    .clif2, .clif4, .clif6, .clif8, .clif10 {
        border-left: solid 1px #CFCFCF;
        }
    .clif3, .clif5, .clif7, .clif9 {
        border-left: none;
        }
    .strenContainer {
        max-width: 500px;
        }
    .strenDiv1 {
        padding: 1.5rem;
        }
    .strengths-div {
        margin: 4vw auto;
        }
    .process-div {
        padding: 4vw 0 4.5vw;
        }
    .processContainer {
        margin: 4vw auto 0;
        }
    #bring-table {
        margin: 5vw auto 4vw;
        }
    .profess-div {
        margin: 4vw auto 3.5vw;
        }
    .freelance-div {
        margin: 5vw auto 3vw;
        }
    #beyond {
        margin: 5.5vw auto 4vw;
        }
    .processDiv1 img {
        max-width: 55%;
        }
    .process-step {
        font-size: 2.25vw;
        margin-top: 1vw;
        }
    .process-name {
        font-size: 3vw;
        margin-bottom: 0;
        }
    .explain-txt span {
        font-size: 2.75vw;
        }
    .explain-txt {
        font-size: 2.25vw;
        padding: 1.25vw 0 2vw;
        }
    .tableDiv2 .home-title {
        margin-right: 0;
        margin-bottom: 4vw;
        }
    .table-subhead {
        font-size: 2.75vw;
        margin-bottom: 2vw;
        }
    .table-txt {
        font-size: 2vw;
        }
    .slick-next, .slick-prev {
        background-size: contain!important;
        background-repeat: no-repeat!important;
        }
    .slick-prev, .slick-next {
        width: 20px !important;
        }
    .beyondDiv1 .home-txt {
        max-width: none;
        margin-top: 1vw;
        }
    .beyondDiv1 {
        width: 50%;
        margin: 0 auto;
        }
    .cont-link {
        font-size: 1.8vw;
        }
    .cont1 .cont-icon {
        max-width: 7%;
        margin-right: 1vw;
        }
    .cont2 .cont-icon {
        max-width: 10%;
        margin-left: .2vw;
        margin-right: 1vw;
        }
    .cont3 .cont-icon {
        max-width: 8.5%;
        margin-left: .2vw;
        margin-right: 1vw;
        }
    .cont-group {
        margin-bottom: 0px;
        }
    .cont1 {
        margin-bottom: .4rem;
        }
    .footer-links a {
        font-size: 1.5vw;
        margin-right: 2vw;
        }
    .footer-txt {
        font-size: 1.5vw;
        margin-right: 0;
        padding: .2rem 0;
        }
    .proj-img {
        display: none;
        }
    .proj-img-800 {
        display: block;
        }
    .proj-img-600 {
        display: none;
        }
    .projContainer.flex-direction {
        flex-direction: column-reverse;
        }
    .projDiv2 {
        width: 100%;
        }
    .projDiv1 {
        width: 100%;
        margin: 8% auto 0%;
        padding: 0 8vw;
        }
    .project-subtitle {
        font-size: 3.5vw;
        }
    .proj-title {
        font-size: 5vw;
        width: 100%;
        }
    .project-txt {
        font-size: 1.8vw;
        }
    img.role-icon {
        max-width: 12vw;
        }
    .role-step {
       font-size: 2.5vw;
        }
    .role-name {
        font-size: 3vw;
        }
    .text-section-div {
        margin-bottom: 5.5vw;
        }
}
@media screen and (max-width: 600px) {
    .aboutDiv1 {
        width: 39%;
        margin: 0% 2% 0 0;
        }
    .aboutDiv2 {
        width: 58%;
        }
    .aboutContainer {
        margin-top: 2.5vw;
        margin-bottom: 1rem;
        }
    .home-title {
        font-size: 6.5vw;
        }
    .home-txt {
        font-size: 2.5vw;
        }
    .topnav, .aboutContainer, .journey-div, .strengths-div, .processContainer, .tableContainer, .beyondContainer, #impact, #contact, #portfolio {
        padding: 0 3vw;
        }
    .home-header-mobile {
        display: block;
        }
    .home-header {
        display: none;
        }
    .hanna-img-mobile {
        display: block;
        }
    .hanna-img {
        display: none;
        }
    .home-subtitle {
        font-size: 4.5vw;
        }
    .aboutDiv2 .home-txt {
        margin-bottom: 0;
        }
    .stren-theme {
        font-size: 2.25vw;
        }
    .strength {
        font-size: 3.5vw;
        }
    .processDiv1 {
        width: 46%;
        margin: 1% 2% 5%;
        }
    .processDiv1 img {
        max-width: 50%;
        }
    .process-step {
        font-size: 3.5vw;
        }
    .process-name {
        font-size: 4vw;
        }
    .proc-line {
        display: none;
        }
    .process-div {
        padding: 6vw 0 4.5vw;
        }
    .processContainer {
        max-width: 80%;
        }
    .explain-txt span {
        font-size: 4vw;
        display: block;
        line-height: 1.25;
        }
    .explain-txt {
        line-height: 1.25;
        font-size: 3.25vw;
        margin: 0 auto;
        max-width: 62%;
        padding: 2vw 0 3.75vw;
        }
    .table-img {
        display: none;
        }
    .table-img-mobile {
        display: block;
        }
    .tableDiv1, .tableDiv2 {
        width: 100%;
        margin: 0 auto;
        }
    .tableDiv2 .home-title {
        text-align: center;
        margin-top: 2vw;
        }
    .space {
        padding: 0 5vw;
        }
    .table-subhead {
        font-size: 3.5vw;
        text-align: center;
        }
    .table-txt {
        max-width: 90%;
        font-size: 2.5vw;
        text-align: center;
        margin: 0 auto;
        }
    .slick-prev {
        left: 2vw !important;
        }
    .slick-next {
        right: 2vw !important;
        }
    .slick-prev, .slick-next {
        top: 65%;
        }
    .portContainer {
        padding: 0;
        }
    #beyond {
        margin: 10vw auto 7vw;
        }
    .beyond-mobile-img {
        display: block;
        padding-bottom: 1.25vw;
        }
    .beyond-img {
        display: none;
        }
    .beyondDiv1, .beyondDiv2 {
        width: 100%;
        margin: 0 auto;
        }
    .beyondContainer.flex-direction {
        flex-direction: column-reverse;
        }
    .beyondContainer {
        padding: 4vw 3vw;
        }
    .beyondDiv1 .home-title {
        text-align: center;
        }
    .beyondDiv1 .home-txt {
        line-height: 1.2;
        text-align: center;
        }
    a.menuItem {
        font-size: 3vw;
        }
    .cont-link {
        font-size: 2.75vw;
        }
    .cont1 {
        align-items: center;
        }
    .cont1 .cont-icon {
        max-width: 8%;
        }
    .cont2 .cont-icon {
        margin-left: .35vw;
        margin-right: 1.5vw;
        }
    .cont3 .cont-icon {
        margin-left: .35vw;
        margin-right: 1.5vw;
        }
    .cont3 {
        display: inline-flex;
        align-items: anchor-center;
        }
    .footer-links a {
        font-size: 2.25vw;
        }
    .footer-cont {
        padding: 1.5vw;
        text-align: center;
        }
    .footer-links {
        display: block;
        margin: 0 auto;
        text-align: center;
        }
    .footer-txt {
        display: block;
        text-align: center;
        float: none;
        font-size: 2.5vw;
        padding: 0;
        }
    .footer-links a:last-child {
        margin-right: 0;
        }
    .footer-logo img {
        max-width: 25%;
        }
    #impact .home-title {
        text-align: center;
        }
    #impact .home-txt {
        text-align: center;
        }
    #contact .home-title {
        text-align: center;
        }
    .left-space {
        max-width: fit-content;
        margin: 0 auto;
        text-align: center;
        }
    .footer-logo {
        text-align: center;
        }
    .proj-img {
        display: none;
        }
    .proj-img-800 {
        display: none;
        }
    .proj-img-600 {
        display: block;
        }
    .project-subtitle {
        font-size: 4vw;
        text-align: center;
        margin-bottom: 1.75vw;
        }
    .project-txt {
        font-size: 2.5vw;
        text-align: center;
        }
    img.role-icon {
        max-width: 15vw;
        }
    .role-step {
        font-size: 3vw;
        line-height: 1.5;
        }
    .role-name {
        font-size: 3.5vw;
        }
    .text-section-div {
        margin-bottom: 6.5vw;
        }
    .link-left-space {
        margin-left: 0px;
        text-align: center;
        }
    .link-link {
        font-size: 3vw;
        }
    .impact-proj .home-title {
        text-align: center;
        font-size: 5.5vw;
        }
    .impact-proj .home-txt {
        text-align: center;
        }
    .contact-proj .home-title {
        text-align: center;
        font-size: 5.5vw;
        }
    .contact-proj {
        margin: 3.5vw auto 10vw;
        }
    .roleContainer {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        }
    .capContainer {
        margin: 3vw auto 5vw;
        }
    .capContainer.flex-direction {
        flex-direction: column-reverse;
        }
    .capDiv2 {
        width: 100%;
        margin: 0 auto 2vw;
        }
    .capDiv1 {
        width: 50%;
        margin: 0 auto;
        }
}
@media screen and (max-width: 400px) {
    .home-title {
        font-size: 7.5vw;
        }
    .home-txt {
        font-size: 3.5vw;
        }
    .aboutDiv1 {
        width: 50%;
        margin: 0 auto;
        }
    .aboutDiv2 {
        width: 100%;
        margin: 0 auto;
        }
    .hanna-img-mobile {
        margin-top: -18vw;
        }
    .aboutDiv2 .home-title {
        text-align: center;
        margin-top: 1.5vw;
        }
    .aboutDiv2 .home-txt {
        text-align: center;
        }
    .topnav, .aboutContainer, .journey-div, .strengths-div, .processContainer, .tableContainer, .beyondContainer, #impact, #contact, #portfolio {
        padding: 0 5vw;
        }
    .aboutContainer, .journey-div, .strengths-div {
        margin-top: 3.5vw;
        margin-bottom: 5vw;
        }
    a.menuItem {
        font-size: 4.5vw;
        padding: 0;
        }
    ul.menu.showMenu {
        margin-left: 0;
        padding-left: 2vw;
        }
    .topnav {
        padding-top: 2vw;
        padding-bottom: 2vw;
        }
    .home-subtitle {
        font-size: 5.5vw;
        }
    .strengths-div .home-txt {
        max-width: 90%;
        margin: 0 auto 2rem;
        }
    .strenDiv1 {
        padding: 1rem;
        }
    .stren-theme {
        font-size: 3vw;
        }
    .strength {
        font-size: 4.5vw;
        }
    .processDiv1 img {
        max-width: 70%;
        }
    .process-step {
        font-size: 4.25vw;
        }
    .process-name {
        font-size: 5vw;
        }
    .processContainer {
        max-width: 90%;
        }
    .explain-txt span {
        font-size: 5.25vw;
        }
    .explain-txt {
        font-size: 4.25vw;
        max-width: 70%;
        }
    .table-txt {
        font-size: 3.5vw;
        }
    .table-subhead {
        font-size: 5vw;
        }
    .portDiv1 {
        width: 46%;
        margin: 2% 2%;
        }
    .beyondContainer {
        padding: 5vw 4vw;
        }
    .cont-link {
        font-size: 3.75vw;
        }
    .footer-logo img {
        max-width: 35%;
        }
    .footer-links a {
        display: block;
        font-size: 3.5vw;
        margin-right: 0px;
        }
    .footer-txt {
        font-size: 3.5vw;
        margin-top: 2vw;
        }
    .footer-cont {
        padding: 5vw;
        }
    .project-txt {
        font-size: 3.5vw;
        }
    .proj-title {
        font-size: 5.5vw;
        }
    .project-subtitle {
        font-size: 5.25vw;
        }
    img.role-icon {
        max-width: 25vw;
        }
    .role-step {
        font-size: 3.5vw;
        }
    .roleDiv1 {
        width: 48%;
        margin: 3% auto;
        }
    .role-name {
        font-size: 4.25vw;
        }
    .text-section-div {
        margin-bottom: 10vw;
        }
    .link-link {
        font-size: 3.75vw;
        }
}