@font-face {
    font-family: "Circular-Black";
    src: url(../types/circular-black.otf);
    font-family: "Circular-Medium";
    src: url(../types/circular-medium.otf);
}

@font-face {
    font-family: "CaslonGraphique";
    src: url(../types/CaslonGraphiqueSHOP-Reg.otf);
}


.intro-paragraph {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.intro-paragraph p {
    font-family: Circular-Medium;
    font-size: 3rem;
    font-weight: 500;
    line-height: 3.75rem;
    padding-left: 15px;
    padding-right: 15px;
}

.intro-paragraph a {
    font-family: Circular-Medium;
    font-size: 3rem;
    color: blue;
}

.page-nav a {
    color: black;
    display: block;
    font-family: Circular-Medium;
    font-weight: 400;
    font-size: 1.25rem;
    width: 100%;
}

.page-nav {
    position: fixed;
    left: 10%;
    z-index: 0;
    height: 200px;

}

.main-title {
    font-size: 1.75rem;
    font-family: Circular-Medium;
    width: 65%;
    display: block;
    margin: auto;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem; 
}

.white-bg {
    background-color: white;
    position: relative;
}


.mockups-row {
    margin-bottom: 1rem;
}

.name-styling, .name-styling:active, .name-styling:hover {
    font-family: Circular-Medium;
    font-size: 1.2rem;
    color: black;
    margin-top: 1.3rem;
}

.dropdown-content {
    display: none;
}

.hamburger-menu-styling {
    display: none;
}

.container-web {
    padding-top: 3rem;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 2rem;
}

.underline {
    display: inline;
    position: relative;
  }

.underline:after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    width: 0;
    top: 2rem;
    background: #000;
    height: 4px;
    transition-property: width;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.underline:hover:after,
.underline:focus:after,

.underline:active:after {
    left: 0;
    right: auto;
    width: 100%;
}

.web-col-left {
    width: 50%;
    float: left;
}

.web-col-right {
    text-align: right;
    width: 50%;
}

.nav-links {
    float: right;
    margin-top: 1.2rem;
}

.img-illustration {
    width: 50vw;
    height: 50vh;
}


.nav-links a:link {
    color: black;
    font-family: Circular-Medium;
    font-weight: 400;
    font-size: 1.2rem;
    text-decoration: none;
}

.nav-links a:active {
    color: black;
    font-family: Circular-Medium;
    font-weight: 400;
    font-size: 1.2rem;
    text-decoration: none;
}

.nav-links a {
    color: black;
    font-family: Circular-Medium;
    font-weight: 400;
    font-size: 1.2rem;
}

.nav-links p {
    display: inline-block;
    margin: auto;
    margin-left: 5rem;
    text-align: center;
}

.navbar-top {
    margin: 5rem;
}

.mobile-col {
    display: none;
}

.alignment {
    display: inline-block;
}

.blue-background {
    background-color: #4885ed;
    height: 250px;
}

.purple-background {
    background-color: #252755;
    height: 250px;
}


.top {
    padding-top: 2.9rem;
}

.jobs-img {
    width: 45%;
    height: auto;
    display: block;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.companion-img {
    width: 15%;
    height: auto;
    display: block;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


.thirtysixtystyling {
    width: 17%;
    height: auto;
    display: block;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}


.illustration-div {
    width: 50%;
    display:block;
    height: auto;
}

.compair-resizing {
    width: 75%;
    height: auto;
    display: block;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.peach-background {
    background-color: #F9C1B1;
    height: 250px;
}

.smaller-container {
    width: 40%;
    height: 330px;
}

.larger-container {
    width: 55%;
    height: 330px;
}

.vr-spacing {
    width: 45px;
}

.project {
    position: relative;
  }


.project-name {
    /* display:none; */
    font-family: "Circular-Medium";
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 0;
    text-transform: uppercase;
}

.project-description {
    font-family: "Circular-Medium";
    font-size: 1rem;
}

.orange-background {
    background-color: #FE5858;
    height: 250px;
}

.div-illustration {
    position: relative;
}

.img-resizing-illustrations {
    position: absolute;
    width: 50%;
    left: 23%;
    bottom: 0;
    height: auto;
}

.first-line {
    width: 70%;
    display: block;
    margin: auto;
}

.green-background {
   background-color: #7CFFCB; 
   height: 250px;
   position: relative;
}

.grey-background {
    background-color: #f2f2f2;
    height: 250px;
    position: relative;
}

.intro-sentence {
    font-family: Circular-Medium;
    font-weight: 700;
    font-size: 2rem;
}

.personal-description {
    font-family: Lato;
    font-size: 1.5rem;
}


.list-styling {
    list-style-type: none;
}

.list-styling li {
    line-height: 3.75rem;
}

.underline-list {
    display: inline;
    position: relative;
  }

.underline-list:after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    width: 0;
    top: 1.9rem;
    background: #000;
    height: 4px;
    transition-property: width;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.underline-list:hover:after,
.underline-list:focus:after,

.underline-list:active:after {
    left: 0;
    right: auto;
    width: 100%;
}

.footer {
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin: auto;
    padding-top: 5rem;
}

.personal-description a {
    font-size: 1.5rem;
    font-family: Lato;
    color: black;
    font-weight: 700;
}

.personal-description a:active, a:visited, a:focus, a:hover {
    text-decoration: none;
}

.hr-spacing {
    height: 45px;
}

.img-resizing-profile {
    width: 70%;
    height: auto;
    float: right;
}

.wave-img {
    width: 5%;
    height: auto;
}

.dropdown {
    display: none;
}

.pale-orange-background {
    background-color: #ff9817;
    height: 250px;
}

/*  */


.title {
    font-family: Circular-Medium;
    font-size: 1.5rem;
    color: black;
    width: 65%;
    display: block;
    margin: auto;
    margin-top: 1rem;
}

.description {
    text-align: left;
    font-family: Lato;
    font-size: 1.2rem;
    font-weight: 400;
    color: #38333B;
    width: 65%;
    display: block;
    margin: auto;
    padding-bottom: 1rem;
}

.img-resizing-block {
    width: 65%;
    display: block;
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.img-resizing-65 {
    width: 65%;
    display: block;
    margin: auto;
    margin-bottom: 1rem;
}

.emphasis-text {
    font-family: Lato;
    font-weight: 700;
    font-size: 1.2rem;
    color: #38333B;
    width: 65%;
    display: block;
    margin: auto;
    margin-bottom: 1rem;
}

.goals-title {
    font-family: Circular-Medium;
    font-size: 1.2rem;
    color: black;
    margin: 0;
}

.goals-description {
    font-family: Lato;
    font-size: 1.2rem;
    color: black;
}

.goals-block {
    width: 65%;
    display: block;
    margin: auto;
}


.archetypes-row {
    width: 65%;
    display: block;
    margin: auto;
    margin-top: 1rem;
}

.archetype-title {
    font-family: Circular-Medium;
    font-size: 1.5rem;
}

.archetype-description {
    font-family: Lato;
    font-weight: 400;
    font-size: 1.2rem;
}

.ar-block {
    width: 49%;
    display: inline-block;
    vertical-align: top;
}

.goals-styling {
    width: 85%;
    float: right;
}

.icon-styling {
    display: block;
    margin: auto;
    margin-top: 0.5rem;
    width: 5%;
    height: auto;
}

.img-resizing {
    width: 100%;
    display: block;
    margin: auto;
    position: relative;
}

.video-alignment {
    display: flex;
    align-items: center;
}

.blue-container {
    background-color: #0086F0;
    padding: 4rem;
    position: relative;
}


.video-title {
    font-family: Circular-Medium;
    font-size: 2rem;
    text-align: right;
    color: white;
    margin-bottom: 0;
}

.video-description {
    width: 80%;
    float: right;
    text-align: right;
    font-family: Lato;
    font-size: 1.3rem;
    line-height: 1.3rem;
    font-weight: 400;
    color: white;
}

.scroll-up {
    position: fixed;
    bottom: 2rem;
    right: -2.9rem;
    width: 8rem;
}

.finger {
    width: 30%;
    height: auto;
    float: left;
}

.case-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.vid-block {
    width: 35%;
    margin-right: 1rem;
}

.vid-content {
    width: 60%;
}

.img-resizing-block:hover {
    transform: scale(1.5);
}

/*  */

/*  */

.description-quote {
    font-family: Lato, italic;
    font-size: 1.2rem;
    font-weight: 400;
    font-style: italic;
    width: 65%;
    display: block;
    margin: auto;
    margin-bottom: 1rem;
}

.li-row {
    width: 65%;
    display: block;
    margin: auto;
}

.emphasis-text-li {
    font-family: Lato;
    font-weight: 700;
    font-size: 1.2rem;
    color: black;
    display: inline-block;
    width: 23%;
    text-align: right;
}

.description-text-li {
    font-family: Lato;
    font-weight: 400;
    font-size: 1.2rem;
    color: black;
    display: inline-block;
    vertical-align: top;
    word-wrap: break-word;
    width: 70%;
    margin-left: 1.2rem;
}

.question {
    font-family: Circular-Medium;
    font-size: 1.2rem;
    line-height: 1.25;
    color: black;
    width: 100%;
    vertical-align: middle;
}

.insight {
    font-family: Lato;
    font-size: 1.2rem;
    color: black;
    width: 100%;
    vertical-align: middle;
}

.hovering-a, .hovering-a:hover {
    color: black;
    font-family: Lato;
    font-weight: 700;
    text-decoration: none;
}

.chart-container {
    width: 50%;
}

.chart-row {
    width: 65%;
    display: block;
    margin: auto;
    display: flex;
    align-items: center;
    margin-bottom: 4rem;
}

.video-styling-companion {
    width: 100%;
    height: auto;
    z-index: 1;
    position: relative;
    width: 65%;
    display: block;
    margin: auto;
    margin-bottom: 2rem;
}



.spotify-video-title {
    color: white;
    font-family: Circular-Medium;
    font-weight: 700;
    font-size: 1.5rem;
    text-decoration: none;
}

.spotify-video-description {
    color: white;
    font-family: Lato;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2rem;
    text-decoration: none;
    padding-right: 1rem;
}

.spotify-container {
    background-color: #1DB954;
    padding: 4rem;
    position: relative;
}

.col-spotify {
    width: 25%;
}


.col-spotify {
    border-radius: 2.5rem;
}

.vid-block-spotify {
    width: 55%;
}

.slide-styling {
    width: 100%;
    height: 70%;
    margin-bottom: 1rem;
}

.vid-content-fb {
    width: 100%;
}


/*  */
@media screen and (min-width: 320px) and (max-width: 321px) {
    .intro-paragraph p {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .intro-paragraph a {
        font-size: 2rem;
    }

    .intro-paragraph {
        padding-top: 8rem;
        padding-bottom: 3rem;
    }

    .name-styling {
       width: 200px;
       margin-left: 35px
    }
    .smaller-container {
        width: 100vw;
        height: 70vh !important;
    }

    .larger-container {
        width: 100vw;
        height: 70vh !important;
    }

    .first-line {
        width: 90%;
        display: block;
        margin: auto;
        margin-top: 6rem;
    }

    .case-container {
        margin-top: 4rem;
    }

    .description, .title, .main-title, .video-description, .emphasis-text, .archetypes-row, .img-resizing-block, .img-resizing-65, .img-resizing, .goals-block {
        width: 95%;
        display: block;
        margin: auto;
    }

    .img-resizing-block, .img-resizing-65, .img-resizing {
        margin-bottom: 1rem;
    }

    .ar-block {
        width: 100%;
    }

    .blue-container {
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 0;
        padding-right: 0;
    }

    .vid-block {
        width: 90%;
        margin-right: 0;
        display: block;
        margin: auto;
        margin-bottom: 1rem;
    }
    
    .vid-content {
        width: 90%;
        display: block;
        margin: auto;
    }

    .video-title {
        font-family: Circular-Medium;
        font-size: 1.2rem;
        text-align: center;
        color: white;
        margin-bottom: 0;
    }
    
    .video-description {
        width: 100%;
        text-align: center;
        font-family: Lato;
        font-size: 1rem;
        line-height: 1rem;
        font-weight: 400;
        color: white;
        margin-bottom: 1rem;
        display: block;
        margin: auto;
    }


    .description-quote, .video-styling-companion, .chart-row, .li-row, .description-text-li, .emphasis-text-li {
        width: 95%;
    }

    .description-text-li {
        margin-left: 0;
    }

    .video-styling-companion {
        margin-bottom: 2rem;
    }

    .emphasis-text-li {
        text-align: left;
    }

    .chart-container {
        width: 95%;
    }

    .chart-row {
        display: block;
    }

    .col-spotify {
        border-radius: 0.5rem;
    }

}

@media screen and (min-width: 375px) and (max-width: 376px) and (max-height: 668px) {
    .intro-paragraph p {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .intro-paragraph a {
        font-size: 2rem;
    }

    .intro-paragraph {
        padding-top: 8rem;
        padding-bottom: 3rem;
    }

    .name-styling {
        width: 200px;
    }

    .smaller-container {
        width: 100vw;
        height: 60vh !important;
    }

    .larger-container {
        width: 100vw;
        height: 60vh !important;
    }

    .first-line {
        width: 90%;
        display: block;
        margin: auto;
        margin-top: 6rem;
    }

    .description-quote, .video-styling-companion, .chart-row, .li-row, .description-text-li, .emphasis-text-li {
        width: 95%;
    }

    .description-text-li {
        margin-left: 0;
    }

    .video-styling-companion {
        margin-bottom: 2rem;
    }

    .emphasis-text-li {
        text-align: left;
    }

    .chart-container {
        width: 95%;
    }

    .chart-row {
        display: block;
    }

    .col-spotify {
        border-radius: 0.5rem;
    }

}

@media screen and (min-width: 375px) and (max-width: 376px) and (min-height: 812px) {
    .smaller-container {
        width: 100vw;
        height: 50vh !important;
    }

    .larger-container {
        width: 100vw;
        height: 50vh !important;
    }
    
    .first-line {
        width: 90%;
        display: block;
        margin: auto;
        margin-top: 6rem;
    }
}

@media screen and (min-width: 411px) and (max-width: 414px) and (max-height: 823px) {
    .intro-paragraph p {
        font-family: Circular-Medium;
        font-size: 2.5rem;
        font-weight: 500;
        line-height: 3rem;
    }

    .intro-paragraph a {
        font-size: 2rem;
    }

    .intro-paragraph {
        padding-top: 8rem;
        padding-bottom: 3rem;
    }

    .name-styling {
        width: 200px;
    }

    .smaller-container {
        width: 100vw;
        height: 55vh !important;
    }

    .larger-container {
        width: 100vw;
        height: 55vh !important;
    }

    .first-line {
        width: 90%;
        display: block;
        margin: auto;
        margin-top: 6rem;
    }

    .case-container {
        margin-top: 4rem;
    }

    .description, .title, .main-title, .video-description, .emphasis-text, .archetypes-row, .img-resizing-block, .img-resizing-65, .img-resizing, .goals-block {
        width: 95%;
        display: block;
        margin: auto;
    }

    .img-resizing-block, .img-resizing-65, .img-resizing {
        margin-bottom: 1rem;
    }

    .ar-block {
        width: 100%;
    }

    .blue-container {
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 0;
        padding-right: 0;
    }

    .vid-block {
        width: 90%;
        margin-right: 0;
        display: block;
        margin: auto;
        margin-bottom: 1rem;

    }
    
    .vid-content {
        width: 90%;
        display: block;
        margin: auto;
    }

    .video-title {
        font-family: Circular-Medium;
        font-size: 1.2rem;
        text-align: center;
        color: white;
        margin-bottom: 0;
    }
    
    .video-description {
        width: 100%;
        text-align: center;
        font-family: Lato;
        font-size: 1rem;
        line-height: 1rem;
        font-weight: 400;
        color: white;
        margin-bottom: 1rem;
        display: block;
        margin: auto;
    }

    .description-quote, .video-styling-companion, .chart-row, .li-row, .description-text-li, .emphasis-text-li {
        width: 95%;
    }

    .description-text-li {
        margin-left: 0;
    }

    .video-styling-companion {
        margin-bottom: 2rem;
    }

    .emphasis-text-li {
        text-align: left;
    }

    .chart-container {
        width: 95%;
    }

    .chart-row {
        display: block;
    }

    .col-spotify {
        border-radius: 0.5rem;
    }

}


@media screen and (min-width: 411px) and (max-width: 414px) and (min-height: 823px) {
    .smaller-container {
        width: 100vw;
        height: 50vh !important;
    }

    .larger-container {
        width: 100vw;
        height: 50vh !important;
    }

    .first-line {
        width: 90%;
        display: block;
        margin: auto;
        margin-top: 6rem;
    }

    .case-container {
        margin-top: 4rem;
    }

    .description, .title, .main-title, .video-description, .emphasis-text, .archetypes-row, .img-resizing-block, .img-resizing-65, .img-resizing, .goals-block {
        width: 95%;
        display: block;
        margin: auto;
    }

    .img-resizing-block, .img-resizing-65, .img-resizing {
        margin-bottom: 1rem;
    }

    .ar-block {
        width: 100%;
    }

    .blue-container {
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 0;
        padding-right: 0;
    }

    .vid-block {
        width: 90%;
        margin-right: 0;
        display: block;
        margin: auto;
        margin-bottom: 1rem;

    }
    
    .vid-content {
        width: 90%;
        display: block;
        margin: auto;
    }

    .video-title {
        font-family: Circular-Medium;
        font-size: 1.2rem;
        text-align: center;
        color: white;
        margin-bottom: 0;
    }
    
    .video-description {
        width: 100%;
        text-align: center;
        font-family: Lato;
        font-size: 1rem;
        line-height: 1rem;
        font-weight: 400;
        color: white;
        margin-bottom: 1rem;
        display: block;
        margin: auto;
    }

    .description-quote, .video-styling-companion, .chart-row, .li-row, .description-text-li, .emphasis-text-li {
        width: 95%;
    }

    .description-text-li {
        margin-left: 0;
    }

    .video-styling-companion {
        margin-bottom: 2rem;
    }

    .emphasis-text-li {
        text-align: left;
    }

    .chart-container {
        width: 95%;
    }

    .chart-row {
        display: block;
    }

}

@media screen and (max-width: 500px) {
    .name-styling {
        width: 200px;
    }

    .intro-paragraph a {
        font-size: 2rem;
    }

    .intro-paragraph p {
        font-family: Circular-Medium;
        font-size: 2rem;
        font-weight: 500;
        line-height: 2.5rem;
    }

    .intro-paragraph {
        padding-top: 8rem;
        padding-bottom: 3rem;
    }

    .hamburger-menu-styling {
        display: inline-block;
        width: 50%;
        margin-top: 0.65rem;
        margin-right: 0.5rem;
    }

    .nav-links p {
        display: none;
    }

    .header-margin {
        margin-top:2rem;
    }

    .navbar-shadow {
        box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.05);
        width: 100%;
    }

    .name-styling, .name-styling:active, .name-styling:hover {
        font-family: Circular-Medium;
        font-size: 1.5rem;
        color: black;
        margin-left: 2.8rem;
        margin-top: 0.5rem;;
    }
    
    .nav-up {
        top: -40px; 
    }
    
    header {
        position: fixed;
        top: 0;
        left: 0;
        height: 50px;
        transition: top 0.2s ease-in-out;
        background-color: white;
        z-index: 100;
    }

    .container-fluid {
        padding: 0;
        width: 100%;
    }

    .dropdown {
        display: inline-block;
        width: 48%;
    }

    .dropdown-toggle::after {
        display:none;
    }

    .btn-width {
        float: right;
    }

    .mobile-col {
        width: 48%;
    }

    .dropdown-menu {
        width: 113vw;
        height: 80px;
        border-style: none;
        border-radius: 0px;
        position: absolute;
        left: -10px;
    }

    .dropdown-item {
        font-family: Lato;
        font-weight: 700;
        margin-left: 4rem;
    }

    .dropdown-item:active {
        background-color: white;
        color: black;
    }

    .web-col-left {
        width: 0;
    }
    
    .web-col-right {
    }

    .smaller-container {
        width: 100vw;
        height: 100%;
    }

    .larger-container {
        width: 100vw;
        height: 100%;
    }

    .blue-background, .green-background, .pale-orange-background, .peach-background, .orange-background, .purple-background, .grey-background {
        height: 300px;
        width: 100vw;
    }

    .vr-spacing, .hr-spacing {
        width: 0;
        height: 0;
    }

    
    .project p {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
        font-size: 1rem;
    }

    .compair-resizing {
        width: 70%;
    }

    .jobs-img {
        width: 65%;
        padding-top: 0;
    }

    .thirtysixtystyling {
        width: 22%;
    }

    .first-line {
        width: 90%;
        display: block;
        margin: auto;
        margin-top: 6rem;
    }

    .case-container {
        margin-top: 4rem;
    }

    .description, .title, .main-title, .video-description, .emphasis-text, .archetypes-row, .img-resizing-block, .img-resizing-65, .img-resizing, .goals-block {
        width: 95%;
        display: block;
        margin: auto;
    }

    .img-resizing-block, .img-resizing-65, .img-resizing {
        margin-bottom: 1rem;
    }

    .ar-block {
        width: 100%;
    }

    .blue-container {
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 0;
        padding-right: 0;
    }

    .vid-block {
        width: 90%;
        margin-right: 0;
        display: block;
        margin: auto;
        margin-bottom: 1rem;

    }
    
    .vid-content {
        width: 90%;
        display: block;
        margin: auto;
    }

    .video-title {
        font-family: Circular-Medium;
        font-size: 1.2rem;
        text-align: center;
        color: white;
        margin-bottom: 0;
    }
    
    .video-description {
        width: 100%;
        text-align: center;
        font-family: Lato;
        font-size: 1rem;
        line-height: 1rem;
        font-weight: 400;
        color: white;
        margin-bottom: 1rem;
        display: block;
        margin: auto;
    }

    .description-quote, .video-styling-companion, .chart-row, .li-row, .description-text-li, .emphasis-text-li {
        width: 95%;
    }

    .description-text-li {
        margin-left: 0;
    }

    .video-styling-companion {
        margin-bottom: 2rem;
    }

    .emphasis-text-li {
        text-align: left;
    }

    .chart-container {
        width: 95%;
    }

    .chart-row {
        display: block;
    }

    .col-spotify {
        border-radius: 1rem;
    }

}


@media screen and (min-width: 500px) and (max-width: 767px) {
    .name-styling {
        width: 200px;
    }

    .intro-paragraph p {
        font-family: Circular-Medium;
        font-size: 2rem;
        font-weight: 500;
        line-height: 2.5rem;
        padding-left: 3rem;
        padding-right: 3rem;
        width: 95vw;
    }

    .intro-paragraph a {
        font-size: 2rem;
    }

    .intro-paragraph {
        padding-top: 8rem;
        padding-bottom: 6rem;
    }

    .hamburger-menu-styling {
        display: inline-block;
        width: 30%;
        margin-top: 0.6rem;
        margin-right: 2.21rem;
    }

    .nav-links p {
        display: none;
    }

    .navbar-shadow {
        box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.05);
        width: 100%;
    }

    .name-styling, .name-styling:active, .name-styling:hover {
        font-family: Circular-Medium;
        font-size: 1.5rem;
        color: black;
        margin-left: 3.2rem;
        margin-top: 0.5rem;;
    }
    
    .nav-up {
        top: -40px; 
    }
    
    header {
        position: fixed;
        top: 0;
        left:0;
        height: 50px;
        transition: top 0.2s ease-in-out;
        background-color: white;
        z-index: 100;
    }

    .container-fluid {
        width: 100%;
    }

    .container {
        padding: 0;
        margin: 0;
    } 

    .project p {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
        font-size: 1.5rem;
    }

    .compair-resizing {
        width: 50%;
    }

    .thirtysixtystyling {
        width: 22%;
    }

    .container-web {
        padding-bottom: 0;
    }

    .dropdown {
        display: inline-block;
        width: 48%;
    }

    .dropdown-toggle::after {
        display:none;
    }

    .btn-width {
        float: right;
    }

    .mobile-col {
        width: 25%;
    }

    .dropdown-menu {
        width: 110vw;
        height: 80px;
        border-style: none;
        border-radius: 0px;
        position: absolute;
        left: -10px;
    }

    .dropdown-item {
        font-family: Lato;
        font-weight: 700;
        margin-left: 6rem;
    }

    .dropdown-item:active {
        background-color: white;
        color: black;
    }

    .web-col-left {
    }
    
    .web-col-right {
    }

    .jobs-img {
        width: 75%;
        height: auto;
        display: block;
        margin: auto;
    }

    .smaller-container {
        width: 100vw;
        height: 100%;
        }

    .larger-container {
        width: 100vw;
        height: 100%;
    }

    .jobs-img {
        width: 50%;
    }

    .blue-background, .green-background, .pale-orange-background, .peach-background, .orange-background, .purple-background, .grey-background {
        height: 350px;
        width: 100vw;
    }

    .project {
        width: 100vw;
    }

    .hr-spacing, .vr-spacing {
        width: 0;
        height: 0;
    }

    .case-container {
        margin-top: 4rem;
    }

    .description, .title, .main-title, .video-description, .emphasis-text, .archetypes-row, .img-resizing-block, .img-resizing-65, .img-resizing, .goals-block {
        width: 95%;
        display: block;
        margin: auto;
    }

    .img-resizing-block, .img-resizing-65, .img-resizing {
        margin-bottom: 1rem;
    }

    .ar-block {
        width: 100%;
    }

    .blue-container {
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 0;
        padding-right: 0;
    }

    .vid-block {
        width: 90%;
        margin-right: 0;
        display: block;
        margin: auto;
        margin-bottom: 1rem;
    }
    
    .vid-content {
        width: 90%;
        display: block;
        margin: auto;
    }

    .video-title {
        font-family: Circular-Medium;
        font-size: 1.2rem;
        text-align: center;
        color: white;
        margin-bottom: 0;
    }
    
    .video-description {
        width: 100%;
        text-align: center;
        font-family: Lato;
        font-size: 1rem;
        line-height: 1rem;
        font-weight: 400;
        color: white;
        display: block;
        margin: auto;
    }

    .description-quote, .video-styling-companion, .chart-row, .li-row, .description-text-li, .emphasis-text-li {
        width: 95%;
    }

    .description-text-li {
        margin-left: 0;
    }

    .video-styling-companion {
        margin-bottom: 2rem;
    }

    .emphasis-text-li {
        text-align: left;
    }

    .chart-container {
        width: 95%;
    }

    .chart-row {
        display: block;
    }

    .col-spotify {
        border-radius: 1rem;
    }

}


@media screen and (min-width: 767px) and (max-width: 991px) {
    .vr-spacing {
        width: 28px;
    }

    
    .col-spotify {
        border-radius: 1.4rem;
    }
}