.clearfix {
    height: 1px;
    clear: both;
}

.element {
    width: 2560px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}




/* Project Intro */

.ProjectIntro {
    margin-bottom: 5vw;
}

@media (min-width: 2561px){
    .ProjectIntro {
        margin-bottom: 128px;
    }
}

@media (max-width: 1000px){
    .ProjectIntro {
        margin-bottom: 50px;
    }
}

.ProjectIntro.no-margin-bottom {
    margin-bottom: 0;
}

/* Project Intro V1 */

.ProjectIntro.v-1 {
    min-height: calc(100vh - 5vw);
    overflow: hidden;
}

@media (min-width: 2561px){
    .ProjectIntro.v-1 {
        min-height: calc(100vh - 128px);
    }
}

.ProjectIntro.v-1 .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 9.3vw;
    overflow: hidden;
}

.ProjectIntro.v-1 .image {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.ProjectIntro.v-1 .image img {
    display: block;
    flex: 0 0 33vw;
    width: 33vw;
    height: auto;
    max-width: 33vw;
    margin-top: 13vh;
}

.ProjectIntro.v-1 .hero-text {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-end;
    position: relative;
    left: -9.3vw;
    margin-top: 130px;
    margin-bottom: 6vh;
    width: 100vw;
    height: 63vh;
    z-index: 3;
}

.ProjectIntro.v-1 .hero-text img {
    display: block;
    position: relative;
    left: -2px;
    flex: 0 0 auto;
    width: auto;
    height: 100%;
    max-height: 100%;
}

.ProjectIntro.v-1 h1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    color: #FFFFFF;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ProjectIntro.v-1 p.company {
    font-size: 1.5rem;
    line-height: 1.4em;
    position: relative;
    z-index: 1;
}

@media (max-width: 1200px){
    .ProjectIntro.v-1 p.company {
        font-size: 2rem;
    }
}

@media (orientation: portrait){
    .ProjectIntro.v-1 .hero-text img {
        display: block;
        position: relative;
        left: -2px;
        width: 90%;
        height: auto;
        max-height: 100%;
        max-width: 90%;
    }
}

@media (max-width: 1200px) AND (orientation: portrait){
    .ProjectIntro.v-1 {
        min-height: 0;
    }

    .ProjectIntro.v-1 .hero-text {
        margin-top: 110px;
        align-items: center;
    }

    .ProjectIntro.v-1 .image img {
        display: block;
        flex: 0 0 70vw;
        width: 70vw;
        height: auto;
        max-width: 70vw;
    }
}

@media (max-width: 1200px) AND (orientation: landscape){
    .ProjectIntro.v-1 .image img {
        display: block;
        flex: 0 0 50vw;
        width: 50vw;
        height: auto;
        max-width: 50vw;
    }
}



/* Project Intro V2 */

.ProjectIntro.v-2 {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.ProjectIntro.v-2 .wrapper {
    position: relative;
    width: 100%;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 100vh 9.3vw 0;
    overflow: hidden;
}

.ProjectIntro.v-2 .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ProjectIntro.v-2 .image img {
    display: block;
    visibility: hidden;
    max-width: 100%;
    width: 100%;
    height: auto;
}

.ProjectIntro.v-2 .hero-text {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    left: 0;
    margin-top: 0;
    margin-bottom: 6vh;
    width: 50%;
    height: auto;
    z-index: 1;
}

.ProjectIntro.v-2 .hero-text img {
    display: block;
    position: relative;
    left: 0;
    flex: 0 0 100%;
    height: auto;
    width: 100%;
    max-width: 100%;
}

.ProjectIntro.v-2 h1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    color: #FFFFFF;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ProjectIntro.v-2 p.company {
    font-size: 1.5rem;
    line-height: 1.4em;
    position: relative;
    z-index: 1;
}

@media (max-width: 1200px){
    .ProjectIntro.v-2 p.company {
        font-size: 2rem;
    }
}

@media (max-width: 768px) AND (orientation: portrait) {
    .ProjectIntro.v-2 .wrapper {
        padding-top: 40vh;
    }

    .ProjectIntro.v-2 .image {
        height: 40vh;
    }

    .ProjectIntro.v-2 .hero-text {
        width: 70vw;
    }
}

/* Project Intro V3 */

.ProjectIntro.v-3 {
    width: 100%;
    height: auto;
    overflow: hidden;
}

.ProjectIntro.v-3 .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 9.3vw;
    overflow: hidden;
    min-height: 120vh;
}


.ProjectIntro.v-3 .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.ProjectIntro.v-3 .image img {
    display: block;
    visibility: hidden;
    max-width: 100%;
    width: 100%;
    height: auto;
}

.ProjectIntro.v-3 .hero-text {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    left: -9.3vw;
    margin-top: 150px;
    margin-bottom: 6vh;
    width: 50vw;
    height: 100vh;
    z-index: 3;
}

.ProjectIntro.v-3 .hero-text img {
    display: block;
    position: relative;
    left: 5px;
    flex: 0 0 auto;
    width: auto;
    height: 100vh;
    max-height: 100vh;
}

.ProjectIntro.v-3 h1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    color: #FFFFFF;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ProjectIntro.v-3 p.company {
    font-size: 1.5rem;
    line-height: 1.4em;
    position: relative;
    z-index: 1;
}

@media (max-width: 1200px){
    .ProjectIntro.v-3 p.company {
        font-size: 2rem;
    }
}

@media (max-width: 1400px) AND (orientation: portrait) {
    .ProjectIntro.v-3 .wrapper {
        min-height: 0;
    }

    .ProjectIntro.v-3 .image {
        height: 50vh;
    }

    .ProjectIntro.v-3 .hero-text {
        width: 30vw;
        height: 50vh;
    }

    .ProjectIntro.v-3 .hero-text img {
        height: 50vh;
        max-height: 50vh;
    }
}



/* Project Text */

.ProjectText {
    margin-top: 5vw;
    margin-bottom: 5vw;
}

@media (min-width: 2561px){
    .ProjectText {
        margin-top: 128px;
        margin-bottom: 128px;
    }
}


@media (max-width: 1000px){
    .ProjectText {
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

.ProjectText.no-margin-top {
    margin-top: 0 !important;
}

.ProjectText.no-margin-bottom {
    margin-bottom: 0 !important;
}

.ProjectText .wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    padding: 0 9.3vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ProjectText .text-wrapper {
    flex: 1 1 40%;
    width: 40%;
    max-width: 100%;
}

.ProjectText .text-wrapper p {
    font-size: 2rem;
    line-height: 1.3em;
    font-family:"FS Ostro W01 Regular";
}

.ProjectText .text-wrapper p em,
.ProjectText .text-wrapper p i
{
    font-family:"FS Ostro W01 Italic";
}

@media (max-width: 1400px){
    .ProjectText .text-wrapper {
        flex: 1 1 60%;
        width: 60%;
    }
}

@media (max-width: 768px){
    .ProjectText .text-wrapper {
        flex: 1 1 80%;
        width: 80%;
    }
}

@media (max-width: 550px){
    .ProjectText .text-wrapper {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Project Text V1 */

.ProjectText.v-1 .text-wrapper {
    align-self: flex-start;
}

@media (max-width: 768px){
    .ProjectText.v-1 .text-wrapper {
        align-self: flex-start;
    }
}

/* Project Text V2 */

.ProjectText.v-2 .text-wrapper {
    align-self: center;
}

@media (max-width: 768px){
    .ProjectText.v-2 .text-wrapper {
        align-self: flex-start;
    }
}

/* Project Text V3 */

.ProjectText.v-3 .text-wrapper {
    align-self: flex-end;
}

@media (max-width: 768px){
    .ProjectText.v-3 .text-wrapper {
        align-self: flex-start;
    }
}





/* Project Image Center */

.ProjectImageCenter {
    margin-top: 5vw;
    margin-bottom: 5vw;
}

@media (min-width: 2561px){
    .ProjectImageCenter {
        margin-top: 128px;
        margin-bottom: 128px;
    }
}

@media (max-width: 1000px){
    .ProjectImageCenter {
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

.ProjectImageCenter.no-margin-top {
    margin-top: 0 !important;
}

.ProjectImageCenter.no-margin-bottom {
    margin-bottom: 0 !important;
}

.ProjectImageCenter .wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 9.3vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ProjectImageCenter .wrapper > .image-wrapper {
    flex: 0 0 100%;
    width: 930px;
    max-width: 45vw;
    align-self: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

.ProjectImageCenter .wrapper > .image-wrapper img {
    display: inline-block;
    width: auto;
    max-width: 100%;
}

@media (max-width: 768px){
    .ProjectImageCenter .wrapper > .image-wrapper {
        max-width: 60vw;
    }
}

@media (max-width: 550px){
    .ProjectImageCenter .wrapper > .image-wrapper {
        max-width: 80vw;
    }
}




/* Project Image Center Color */

.ProjectImageCenterColor {
    margin-top: 5vw;
    margin-bottom: 5vw;
}

@media (min-width: 2561px){
    .ProjectImageCenterColor {
        margin-top: 128px;
        margin-bottom: 128px;
    }
}

@media (max-width: 1000px){
    .ProjectImageCenterColor {
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

.ProjectImageCenterColor.no-margin-top {
    margin-top: 0 !important;
}

.ProjectImageCenterColor.no-margin-bottom {
    margin-bottom: 0 !important;
}

.ProjectImageCenterColor .wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 14vw 9.3vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ProjectImageCenterColor .wrapper > .image-wrapper {
    flex: 0 0 100%;
    width: 930px;
    max-width: 45vw;
    align-self: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

.ProjectImageCenterColor .wrapper > .image-wrapper img {
    display: inline-block;
    width: auto;
    max-width: 100%;
}

@media (max-width: 768px){
    .ProjectImageCenterColor .wrapper > .image-wrapper {
        max-width: 60vw;
    }
}

@media (max-width: 550px){
    .ProjectImageCenterColor .wrapper > .image-wrapper {
        max-width: 80vw;
    }
}



/* Project Image Right */

.ProjectImageRight {
    margin-top: 5vw;
    margin-bottom: 5vw;
}

@media (min-width: 2561px){
    .ProjectImageRight {
        margin-top: 128px;
        margin-bottom: 128px;
    }
}

@media (max-width: 1000px){
    .ProjectImageRight {
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

.ProjectImageRight.no-margin-top {
    margin-top: 0 !important;
}

.ProjectImageRight.no-margin-bottom {
    margin-bottom: 0 !important;
}

.ProjectImageRight .wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0 0 9.3vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ProjectImageRight .wrapper > .image-wrapper {
    flex: 0 0 100%;
    width: 70vw;
    max-width: 70vw;
    align-self: flex-end;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: right;
    position: relative;
}

.ProjectImageRight .wrapper > .image-wrapper.portrait {
    width: 50vw;
    max-width: 50vw;
}

.ProjectImageRight .wrapper > .image-wrapper img {
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 768px){
    .ProjectImageRight .wrapper > .image-wrapper.portrait {
        width: 70vw;
        max-width: 70vw;
    }
}

@media (max-width: 550px){
    .ProjectImageRight .wrapper > .image-wrapper.portrait {
        width: 90vw;
        max-width: 90vw;
    }

    .ProjectImageRight .wrapper > .image-wrapper {
        width: 80vw;
        max-width: 80vw;
    }
}






/* Project Image Left */

.ProjectImageLeft {
    margin-top: 5vw;
    margin-bottom: 5vw;
}

@media (min-width: 2561px){
    .ProjectImageLeft {
        margin-top: 128px;
        margin-bottom: 128px;
    }
}

@media (max-width: 1000px){
    .ProjectImageLeft {
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

.ProjectImageLeft.no-margin-top {
    margin-top: 0 !important;
}

.ProjectImageLeft.no-margin-bottom {
    margin-bottom: 0 !important;
}

.ProjectImageLeft .wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 9.3vw 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ProjectImageLeft .wrapper > .image-wrapper {
    flex: 0 0 100%;
    width: 70vw;
    max-width: 70vw;
    align-self: flex-start;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
}

.ProjectImageLeft .wrapper > .image-wrapper img {
    display: inline-block;
    width: auto;
    max-width: 100%;
}

@media (max-width: 768px){
    .ProjectImageLeft .wrapper > .image-wrapper {
        /*max-width: 60vw;*/
    }
}

@media (max-width: 550px){
    .ProjectImageLeft .wrapper > .image-wrapper {
        width: 80vw;
        max-width: 80vw;
    }
}






/* Project Image Full */

.ProjectImageFull {
    margin-top: 5vw;
    margin-bottom: 5vw;
}

@media (min-width: 2561px){
    .ProjectImageFull {
        margin-top: 128px;
        margin-bottom: 128px;
    }
}

@media (max-width: 1000px){
    .ProjectImageFull {
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

.ProjectImageFull.no-margin-top {
    margin-top: 0 !important;
}

.ProjectImageFull.no-margin-bottom {
    margin-bottom: 0 !important;
}

.ProjectImageFull .wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ProjectImageFull .wrapper > .image-wrapper {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    align-self: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

.ProjectImageFull .wrapper > .image-wrapper img {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    height: auto;
}





/* Project Image Combo 1 */

.ProjectImageCombo1 {
    margin-top: 5vw;
    margin-bottom: 5vw;
}

@media (min-width: 2561px){
    .ProjectImageCombo1 {
        margin-top: 128px;
        margin-bottom: 128px;
    }
}

@media (max-width: 1000px){
    .ProjectImageCombo1 {
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

.ProjectImageCombo1.no-margin-top {
    margin-top: 0 !important;
}

.ProjectImageCombo1.no-margin-bottom {
    margin-bottom: 0 !important;
}

.ProjectImageCombo1 .wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 2100px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 9.3vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ProjectImageCombo1 .wrapper > * {
    flex: 0 0 50%;
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ProjectImageCombo1 .wrapper > * img {
    display: block;
    width: 100%;
    max-width: 100%;
}

.ProjectImageCombo1 .wrapper > .image1-wrapper {
    align-self: flex-start;
    padding-right: 5vw;
}

.ProjectImageCombo1 .wrapper > .image2-wrapper {
    align-self: flex-end;
    padding-left: 5vw;
}

@media (max-width: 768px){
    .ProjectImageCombo1 .wrapper > .image1-wrapper {
        padding-right: 2vw;
    }

    .ProjectImageCombo1 .wrapper > .image2-wrapper {
        padding-left: 2vw;
    }
}





/* Project Image Combo 2 */

.ProjectImageCombo2 {
    margin-top: 5vw;
    margin-bottom: 5vw;
}

@media (min-width: 2561px){
    .ProjectImageCombo2 {
        margin-top: 128px;
        margin-bottom: 128px;
    }
}

@media (max-width: 1000px){
    .ProjectImageCombo2 {
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

.ProjectImageCombo2.no-margin-top {
    margin-top: 0 !important;
}

.ProjectImageCombo2.no-margin-bottom {
    margin-bottom: 0 !important;
}

.ProjectImageCombo2 .wrapper {
    position: relative;
}

.ProjectImageCombo2 .wrapper .color-box {
    width: 100%;
    height: 92vw;
    position: absolute;
    z-index: 1;
    top: 10vw;
    left: 0;
}

.ProjectImageCombo2 .wrapper .image1-wrapper,
.ProjectImageCombo2 .wrapper .image2-wrapper,
.ProjectImageCombo2 .wrapper .image3-wrapper,
.ProjectImageCombo2 .wrapper .image4-wrapper
{
    width: 2400px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.ProjectImageCombo2 .wrapper .image1-wrapper {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 10vw;
}

.ProjectImageCombo2.v-2 .wrapper .image1-wrapper {
    text-align: left;
}

.ProjectImageCombo2 .wrapper .image1-wrapper img {
    display: inline-block;
    margin-right: 15vw;
    height: auto;
    max-width: 40vw;
}

.ProjectImageCombo2 .wrapper .image2-wrapper {
    position: relative;
    z-index: 3;
    text-align: center;
}

.ProjectImageCombo2 .wrapper .image2-wrapper img {
    display: inline-block;
    height: auto;
    max-width: 70vw;
}

.ProjectImageCombo2 .wrapper .image3-wrapper {
    position: relative;
    z-index: 2;
    margin-top: -15vw;
    margin-bottom: 2vw;
    text-align: left;
}

.ProjectImageCombo2 .wrapper .image3-wrapper img {
    display: inline-block;
    height: auto;
    max-width: 40vw;
}

.ProjectImageCombo2 .wrapper .image4-wrapper {
    position: relative;
    z-index: 2;
    text-align: left;
}

.ProjectImageCombo2 .wrapper .image4-wrapper img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}




/* Project Image Combo 3 */

.ProjectImageCombo3 {
    margin-top: 5vw;
    margin-bottom: 5vw;
}

@media (min-width: 2561px){
    .ProjectImageCombo3 {
        margin-top: 128px;
        margin-bottom: 128px;
    }
}

@media (max-width: 1000px){
    .ProjectImageCombo3 {
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

.ProjectImageCombo3.no-margin-top {
    margin-top: 0 !important;
}

.ProjectImageCombo3.no-margin-bottom {
    margin-bottom: 0 !important;
}

.ProjectImageCombo3 .wrapper {
    position: relative;
}

.ProjectImageCombo3 .wrapper .color-box {
    width: 100%;
    height: 92vw;
    position: absolute;
    z-index: 1;
    top: 10vw;
    left: 0;
}

.ProjectImageCombo3 .wrapper .image1-wrapper,
.ProjectImageCombo3 .wrapper .image2-wrapper,
.ProjectImageCombo3 .wrapper .image3-wrapper,
.ProjectImageCombo3 .wrapper .image4-wrapper
{
    width: 2400px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.ProjectImageCombo3 .wrapper .image1-wrapper {
    position: relative;
    z-index: 2;
    text-align: left;
    margin-bottom: 15vw;
}

.ProjectImageCombo3 .wrapper .image1-wrapper img {
    display: inline-block;
    margin-right: 15vw;
    height: auto;
    max-width: 60%;
}

.ProjectImageCombo3 .wrapper .image2-wrapper {
    position: relative;
    z-index: 3;
    text-align: center;
}

.ProjectImageCombo3 .wrapper .image2-wrapper img {
    display: inline-block;
    height: auto;
    max-width: 70%;
}

.ProjectImageCombo3 .wrapper .image3-wrapper {
    position: relative;
    z-index: 2;
    text-align: left;
    margin-top: 10vw;
}

.ProjectImageCombo3 .wrapper .image3-wrapper img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}







/* Project Teaser */

.ProjectTeaser {
    margin-top: 5vw;
    margin-bottom: 100px;
}

@media (min-width: 2561px){
    .ProjectTeaser {
        margin-top: 128px;
    }
}

@media (max-width: 1000px){
    .ProjectTeaser {
        margin-top: 50px;
    }
}

.ProjectTeaser.no-margin-top {
    margin-top: 0 !important;
}

.ProjectTeaser.no-margin-bottom {
    margin-bottom: 0 !important;
}

.ProjectTeaser .wrapper {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 9.3vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@media (max-width: 550px){
    .ProjectTeaser .wrapper {
        padding: 0 50px;
    }
}

.ProjectTeaser .wrapper h3 {
    font-family:"Radikal W01 Bold";
    font-size: 1.5rem;
    line-height: 1.5em;
    margin-top: 0;
    margin-bottom: 5rem;
}

@media (max-width: 1200px){
    .ProjectTeaser .wrapper h3 {
        font-size: 2rem;
    }
}

.ProjectTeaser .wrapper .slider {
    margin: 0 -4vw;
}

.ProjectTeaser .wrapper .slider .slick-prev,
.ProjectTeaser .wrapper .slider .slick-next {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: 100%;
}

.ProjectTeaser.v-2 .wrapper .slider .slick-prev,
.ProjectTeaser.v-2 .wrapper .slider .slick-next {
    display: none !important;
}

.ProjectTeaser .wrapper .slider .slick-prev:before,
.ProjectTeaser .wrapper .slider .slick-next:before {
    content: '';
    flex: 0 0 100%;
    display: block;
    font-size: 0;
    line-height: 0;
    opacity: 1;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 20px;
    height: 29px;
    margin: 0 auto;
}

.ProjectTeaser .wrapper .slider .slick-prev:before {
    background: url('../images/slider-cursor-left.svg') center center no-repeat;
}

.ProjectTeaser .wrapper .slider .slick-next:before {
    background: url('../images/slider-cursor-right.svg') center center no-repeat;
}


.ProjectTeaser .wrapper .slider .project-entry {
    width: 50vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 4vw;
    outline: none;
}

.ProjectTeaser .wrapper .slider .project-entry a {
    display: block;
    outline: none;
    position: relative;
    font-size: 28px;
}

@media (max-width: 1600px){
    .ProjectTeaser .wrapper .slider .project-entry a {
        font-size: 2vw;
    }
}

@media (max-width: 600px){
    .ProjectTeaser .wrapper .slider .project-entry a {
        font-size: 2.3vw;
    }
}

@media (max-width: 450px){
    .ProjectTeaser .wrapper .slider .project-entry a {
        font-size: 2.5vw;
    }

    .ProjectTeaser.v-1 .wrapper .slider .project-entry a {
        font-size: 4.5vw;
    }
}

.ProjectTeaser .wrapper .slider .project-entry a > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.ProjectTeaser .wrapper .slider .project-entry a .details {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    opacity: 0.5;
    color: transparent;
    font-size: 1em;
    line-height: 1.2em;
    overflow: hidden;
    transition: opacity 300ms linear 100ms, width 200ms linear 700ms, color 0ms linear 0ms;
    background: rgba(0,0,0,0.8);
}

.ProjectTeaser .wrapper .slider .project-entry a:hover .details {
    opacity: 1;
    width: 100%;
    color: #FFFFFF;
    transition: opacity 0ms linear 600ms, width 200ms linear 700ms, color 100ms linear 1000ms;
}

.ProjectTeaser .wrapper .slider .project-entry a .details .detail-wrapper {
    width: 100%;
    padding: 10%;
    box-sizing: border-box;
}

.ProjectTeaser .wrapper .slider .project-entry a .details .company {
    width: 100%;
    font-family:"Radikal W01 Light";
    font-size: 1.0em;
    line-height: 1.2em;
    margin-bottom: 0.5em;
}

.ProjectTeaser .wrapper .slider .project-entry a .details .title {
    font-family: "Radikal W01 Medium";
}

.ProjectTeaser .wrapper .slider .project-entry a .details .title > img {
    display: inline-block;
    position: relative;
    left: 0;
    margin-right: 0.3em;
    width: 0.9em;
    top: -0.10em;
    opacity: 0;
}

.ProjectTeaser .wrapper .slider .project-entry a:hover .details .title > img {
    opacity: 1;
    transition: opacity 0ms linear 1000ms;
}







/* Project Video */

.ProjectVideo {
    margin-top: 5vw;
    margin-bottom: 5vw;
}

@media (min-width: 2561px){
    .ProjectVideo {
        margin-top: 128px;
        margin-bottom: 128px;
    }
}

@media (max-width: 1000px){
    .ProjectVideo {
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

.ProjectVideo.no-margin-top {
    margin-top: 0 !important;
}

.ProjectVideo.no-margin-bottom {
    margin-bottom: 0 !important;
}

.ProjectVideo .wrapper {
    position: relative;
}

.ProjectVideo .wrapper > .video-wrapper {
    position: relative;
    z-index: 1;
    padding: 56.25% 0 0 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.ProjectVideo.ready .wrapper > .video-wrapper {
    background: none !important;
}

.ProjectVideo .wrapper > .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.ProjectVideo.ready .wrapper > .video-wrapper iframe {
    opacity: 1;
}

/* Left Video - Variant 1*/

.ProjectVideo.v-1 .wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 9.3vw 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ProjectVideo.v-1 .wrapper > .video-wrapper {
    flex: 0 0 100%;
    width: 70vw;
    max-width: 70vw;
    align-self: flex-start;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
}

@media (max-width: 768px){

}

@media (max-width: 550px){
    .ProjectVideo.v-1 .wrapper > .video-wrapper {
        width: 80vw;
        max-width: 80vw;
    }
}



/* Right Video - Variant 2 */

.ProjectVideo.v-2 .wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 0 0 9.3vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ProjectVideo.v-2 .wrapper > .video-wrapper {
    flex: 0 0 100%;
    width: 70vw;
    max-width: 70vw;
    align-self: flex-end;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: right;
}

@media (max-width: 768px){

}

@media (max-width: 550px){
    .ProjectVideo.v-2 .wrapper > .video-wrapper {
        width: 80vw;
        max-width: 80vw;
    }
}



/* Center Video - Variant 3 */

.ProjectVideo.v-3 .wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 9.3vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ProjectVideo.v-3 .wrapper > .video-wrapper {
    flex: 0 0 100%;
    width: 70vw;
    max-width: 70vw;
    align-self: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

@media (max-width: 768px){
    .ProjectVideo.v-3 .wrapper > .video-wrapper {
        max-width: 60vw;
    }
}

@media (max-width: 550px){
    .ProjectVideo.v-3 .wrapper > .video-wrapper {
        max-width: 80vw;
    }
}



/* Full Video - Variant 4 */

.ProjectVideo.v-4 .wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}






/* Project VR Image */

.ProjectVRImage {
    margin-top: 5vw;
    margin-bottom: 5vw;
}

@media (min-width: 2561px){
    .ProjectVRImage {
        margin-top: 128px;
        margin-bottom: 128px;
    }
}

@media (max-width: 1000px){
    .ProjectVRImage {
        margin-top: 50px;
        margin-bottom: 50px;
    }
}

.ProjectVRImage.no-margin-top {
    margin-top: 0 !important;
}

.ProjectVRImage.no-margin-bottom {
    margin-bottom: 0 !important;
}

.ProjectVRImage .wrapper {
    position: relative;
    height: 100vh;
    width: 100vw;
}

.ProjectVRImage .wrapper > .panorama {
    height: 100%;
    width: 100%;
    cursor: pointer;
}


.ProjectVRImage .wrapper > .panorama:active {
    cursor: grab;
}

.ProjectVRImage .wrapper > .panorama .icon {
    content: '';
    display: block;
    background: url('../images/360.svg') center center no-repeat;
    background-size: 20vw auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
}





/* Studio Intro */

#studio-intro {
    position: relative;
    width: 100%;
    height: 100vh;
}

#studio-intro > .background {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 1;
    overflow: hidden;
}

#studio-intro > .background > .background-item {
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#studio-intro > .background > .background-item img {
    display: none;
}

section#main #studio-intro .content-wrapper {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    position: relative;
    z-index: 2;
    text-align: center;
    height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
}

#studio-intro .content-wrapper .wrapper {
    display: inline-block;
    text-align: left;
    margin: 0 auto;
    color: #FFFFFF;
    font-size: 120px;
}

#studio-intro .content-wrapper h1.hero-text{
    font-family:"Radikal W01 Medium";
    text-transform: uppercase;
    text-align: center;
    font-size: 1em;
    line-height: 1.15em;
    margin: 0 0 4vw 0;
    padding: 0;
    letter-spacing: 0.05em;
}

#studio-intro .content-wrapper .teaser-link {
    display: block;
    font-family:"FS Ostro W01 Italic";
    font-size: 0.3em;
    line-height: 1.5em;
    margin-top: 28px;
    margin-bottom: 0;
    text-align: center;
    color: #FFFFFF;
}

#studio-intro .content-wrapper .teaser-link img {
    display: inline-block;
    position: relative;
    left: 0;
    top: -0.1em;
    width: 0.8em;
    margin-right: 10px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

#studio-intro .content-wrapper .teaser-link:hover img {
    left: 5px;
}

@media (max-width: 1920px){
    #studio-intro .content-wrapper .wrapper {
        font-size: 6.25vw;
    }
}

@media (max-width: 1280px){
    #studio-intro .content-wrapper .teaser-link {
        font-size: 24px;
    }
}

@media (max-width: 768px){
    #studio-intro .content-wrapper h1.hero-text {
        font-size: 48px;
    }
}

@media (max-width: 450px){
    #studio-intro .content-wrapper h1.hero-text {
        font-size: 10.5vw;
    }
}







/* About Page */

#AboutPage {
    position: relative;
    width: 100%;
    height: auto;
}

section#main #AboutPage .content-wrapper {
    position: relative;
    text-align: center;
    height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 15vw;
    padding-bottom: 0;
}

section#main #AboutPage .content-wrapper {
    padding-top: 460px;
}


@media (max-width: 1920px){
    section#main #AboutPage .content-wrapper {
        padding-top: 24vw;
    }
}

#AboutPage > .content-wrapper > .background-item {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-position: center bottom;
    background-repeat: repeat-y;
    background-size: contain;
}

#AboutPage > .content-wrapper > .background-item img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    opacity: 0;
}


#AboutPage .content-wrapper .wrapper {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin: 0 auto;
    color: #FFFFFF;
    font-size: 72px;
    line-height: 1em;
}

#AboutPage .content-wrapper .wrapper p {
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 0.6em;
}

#AboutPage .content-wrapper .wrapper p span.radikal-medium,
#AboutPage .content-wrapper .wrapper p span.radikal-bold {
    display: inline-block;
    font-size: 1em;
    line-height: 1.3em;
    margin-bottom: 0.3em;
    letter-spacing: 0.05em;
}

#AboutPage .content-wrapper .wrapper p em {
    display: inline-block;
    font-size: 0.5em;
    line-height: 1.3em;
}

#AboutPage .content-wrapper .wrapper .content p:after {
    content: '-';
    font-family:"Radikal W01 Bold";
    display: block;
    text-align: center;
    padding: 2em 0;
}

#AboutPage .content-wrapper .wrapper .content p:last-child:after {
    opacity: 0;
}


#AboutPage .content-wrapper .teaser-link {
    display: block;
    font-family:"FS Ostro W01 Italic";
    font-size: 0.5em;
    line-height: 1em;
    margin-top: 1em;
    margin-bottom: 0;
    text-align: center;
    color: #FFFFFF;
}


@media (max-width: 1950px){
    #AboutPage .content-wrapper .wrapper {
        font-size: 3.7vw;
    }
}

@media (max-width: 1300px){
    #AboutPage .content-wrapper .teaser-link,
    #AboutPage .content-wrapper .wrapper p em {
        font-size: 24px;
    }
}

@media (max-width: 975px){
    #AboutPage .content-wrapper .wrapper {
        font-size: 36px;
    }
}

@media (max-width: 600px){
    #AboutPage .content-wrapper .wrapper {
        font-size: 6vw;
    }

    #AboutPage .content-wrapper .teaser-link,
    #AboutPage .content-wrapper .wrapper p em {
        font-size: 4vw;
    }
}

@media (max-width: 400px){
    #AboutPage .content-wrapper .teaser-link,
    #AboutPage .content-wrapper .wrapper p em {
        font-size: 16px;
    }
}

#AboutPage .content-wrapper .teaser-link img {
    display: inline-block;
    position: relative;
    left: 0;
    top: -0.1em;
    margin-right: 10px;
    width: 0.8em;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

#AboutPage .content-wrapper .teaser-link:hover img {
    left: 5px;
}

#AboutPage > .image-wrapper {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 1;
    overflow: hidden;
}

#AboutPage > .image-wrapper > .background-item {
    flex: 0 0 100%;
    height: auto;
    width: 100%;
    overflow: hidden;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
}

#AboutPage > .image-wrapper > .background-item img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    opacity: 0;
}




/* Team Page */
#AboutPage + #TeamPage {
    margin-top: -2px;
}

#TeamPage {
    background-color: #1b2b2b;
}

section#main #TeamPage .content-wrapper {
    padding: 460px 3vw 460px 8vw;
    max-width: 1920px;
    margin: 0 auto;
}


@media (max-width: 1920px){
    section#main #TeamPage .content-wrapper {
        padding: 24vw 3vw 24vw 8vw;
    }
}

#TeamPage .team-grid {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: flex-start;
}

#TeamPage .team-grid .entry {
    flex: 0 1 25%;
    width: 25%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 5vw 5vw 0;
}

@media (max-width: 1400px) {
    #TeamPage .team-grid .entry {
        flex: 0 1 33%;
        width: 33%;
        padding: 0 5vw 7vw 0;
    }
}

@media (max-width: 991px) {
    #TeamPage .team-grid .entry {
        flex: 0 1 50%;
        width: 50%;
        padding: 0 5vw 9vw 0;
    }
}

#TeamPage .team-grid .entry > a {
    display: block;
    max-width: 100%;
    color: #FFFFFF;
    font-size: 26px;
}

@media (max-width: 678px) {
    #TeamPage .team-grid .entry > a {
        font-size: 26px;
        font-size: 3.835vw;
    }
}

#TeamPage .team-grid .entry > a > .image {
    width: 300px;
    max-width: 100%;
}

#TeamPage .team-grid .entry > a > .image > img {
    max-width: 100%;
    width: 303px;
    height: auto;
}

#TeamPage .team-grid .entry > a > .name {
    width: 300px;
    max-width: 100%;
    font-family: "Radikal W01 Medium";
    font-size: 1em;
    line-height: 1.38em;
    margin-top: 1em;
    margin-bottom: 0.45em;
    letter-spacing: 0.05em;
}

#TeamPage .team-grid .entry > a > .position {
    width: 300px;
    max-width: 100%;
    font-family: "Radikal W01 Regular";
    font-size: 0.775em;
    line-height: 1.3em;
    letter-spacing: 0.03em;
}

#TeamPage .team-grid .entry > a > .position img {
    display: inline-block;
    position: relative;
    left: 0;
    top: -0.1em;
    margin-right: 10px;
    width: 0.8em;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

#TeamPage .team-grid .entry > a:hover > .position img {
    left: 5px;
}




/* Jobs Page */

#JobsPage {

}

#JobsPage .intro-image {
    display: block;
}

#JobsPage .intro-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}


section#main #JobsPage .content-wrapper {
    padding-bottom: 400px;
}

@media (max-width: 1200px){
    section#main #JobsPage .content-wrapper {
        padding-bottom: 300px;
    }
}

@media (max-width: 768px){
    section#main #JobsPage .content-wrapper {
        padding-top: 10vw;
        padding-bottom: 20vw;
    }
}

@media (max-width: 550px){
    section#main #JobsPage .content-wrapper {
        padding-top: 15vw;
        padding-bottom: 30vw;
    }
}

#JobsPage ul.job-list {

}

#JobsPage ul.job-list li.entry {

}

#JobsPage ul.job-list li.entry > a {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    font-family: "Radikal W01 Medium";
    font-size: 36px;
    line-height: 1.5em;
    padding: 0 0 1.5em 0;
}

#JobsPage ul.job-list li.entry:last-child > a {
    padding: 0;
}

@media (max-width: 768px){
    #JobsPage ul.job-list li.entry > a {
        font-size: 4.7vw;
    }
}

@media (max-width: 450px){
    #JobsPage ul.job-list li.entry > a {
        font-size: 21px;
    }
}

#JobsPage ul.job-list li.entry > a .column:first-child {
    flex: 0 1 60%;
    width: 730px;
    max-width: 100%;
    padding: 0 30px 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#JobsPage ul.job-list li.entry > a .column:last-child {
    flex: 0 1 40%;
    width: 40%;
}

#JobsPage ul.job-list li.entry > a .title {
    font-size: 1em;
    line-height: 1em;
    padding: 0 0 0.5em 0.8em;
    position: relative;
}

#JobsPage ul.job-list li.entry > a .title img {
    display: inline-block;
    position: absolute;
    left: -0.3em;
    top: 0.3em;
    margin-right: 10px;
    width: 0.8em;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

#JobsPage ul.job-list li.entry > a:hover .title img {
    left: 0;
}

#JobsPage ul.job-list li.entry > a .description {
    padding: 0 0 0 0.8em;
}

#JobsPage ul.job-list li.entry > a .description > p {
    font-family: "FS Ostro W01 Regular";
    font-size: 0.75em;
    line-height: 1.3em;
    margin: 0;
    padding: 0;
}

#JobsPage ul.job-list li.entry > a .date {
    font-size: 0.75em;
    line-height: 1.3em;
    text-align: right;
    font-family: "Radikal W01 Regular";
}

@media (max-width: 1200px){
    #JobsPage ul.job-list li.entry > a {
        display: block;
    }

    #JobsPage ul.job-list li.entry > a .column:first-child {
        width: 100%;
        padding: 0;
    }

    #JobsPage ul.job-list li.entry > a .column:last-child {
        width: 100%;
    }

    #JobsPage ul.job-list li.entry > a .date {
        text-align: left;
        padding: 1em 0 0 1.05em;
    }
}





/* Contact Page */

#ContactPage {

}

#ContactPage .image {
    position: relative;
    width: 100%;
}

#ContactPage .image .background-item {
    position: relative;
    z-index: 1;
    height: 1320px;
    width: 100%;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}

#ContactPage .image .background-item img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

#ContactPage .image .contact {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#ContactPage .image .contact > .content-wrapper{
    padding-top: 115px;
    font-size: 26px;
}

#ContactPage .image .contact h1 {
    font-family:"Radikal W01 Medium";
    font-size: 1em;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
}

#ContactPage .image .contact .columns {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
}

#ContactPage .image .contact .columns p:first-child {
    margin-right: 100px;
}

#ContactPage .image .contact p {
    font-family:"Radikal W01 Regular";
    font-size: 1em;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    min-height: 200px;
}

@media (max-width: 1200px){
    #ContactPage .image .contact .columns {
        display: block;
    }

    #ContactPage .image .contact p:last-child {
        font-family:"Radikal W01 Light";
        margin-top: 0px;
        color: #FFFFFF;
        min-height: 0;
    }


    #ContactPage .image .contact p:last-child a {
        color: #FFFFFF;
    }
}

section#main #ContactPage > .content-wrapper {
    font-size: 26px;
    line-height: 1.38em;
}

@media (max-width: 860px) {
    section#main #ContactPage > .content-wrapper,
    #ContactPage .image .contact > .content-wrapper{
        font-size: 3vw;
    }
}

@media (max-width: 670px) {
    section#main #ContactPage > .content-wrapper,
    #ContactPage .image .contact > .content-wrapper{
        font-size: 20px;
    }
}




section#main #ContactPage > .content-wrapper .wrapper {

}

section#main #ContactPage > .content-wrapper .wrapper #map {
    height: 680px;
    width: 100%;
}

section#main #ContactPage > .content-wrapper .wrapper .directions {
    margin-top: 115px;
}

section#main #ContactPage > .content-wrapper .wrapper .socials {
    margin-top: 85px;
}

section#main #ContactPage > .content-wrapper .wrapper .socials li {
    list-style: none;
}

section#main #ContactPage > .content-wrapper .wrapper .socials li a {
    display: inline-block;
    position: relative;
}

section#main #ContactPage > .content-wrapper .wrapper .socials li a img {
    display: inline-block;
    position: relative;
    left: 0;
    top: -0.1em;
    margin-right: 10px;
    width: 0.85em;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

section#main #ContactPage > .content-wrapper .wrapper .socials li a:hover img {
    left: 0.3em;
}

section#main #ContactPage > .content-wrapper .wrapper .company {
    margin-top: 460px;
}

section#main #ContactPage > .content-wrapper .wrapper .company p,
section#main #ContactPage > .content-wrapper .wrapper .company .copy {
    font-size: 0.7em;
    line-height: 1.3em;
}







/* Project Image Full */

.StudioOfficeImageFull {

}

.StudioOfficeImageFull .wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.StudioOfficeImageFull .wrapper > .image-wrapper {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    align-self: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

.StudioOfficeImageFull .wrapper > .image-wrapper img {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    height: auto;
}





/* Studio Office Image Full */

.StudioOfficeImageFull {

}

.StudioOfficeImageFull .wrapper {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.StudioOfficeImageFull .wrapper > .image-wrapper {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    align-self: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
}

.StudioOfficeImageFull .wrapper > .image-wrapper img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}





/* Studio Office Image Text */

.StudioOfficeImageTextColor {

}

.StudioOfficeImageTextColor .wrapper {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    width: 100%;
    min-height: 100vh;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.StudioOfficeImageTextColor .wrapper > .image-wrapper {
    position: relative;
    flex: 0 0 50%;
    width: 50%;
    height: 100%;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.StudioOfficeImageTextColor .wrapper > .image-wrapper .image {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
}

.StudioOfficeImageTextColor .wrapper > .image-wrapper img {
    display: block;
    opacity: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
}

section#main .StudioOfficeImageTextColor .wrapper > .content-wrapper {
    flex: 0 0 50%;
    width: 50%;
    padding-left: 6vw;
    padding-right: 6vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
}

.StudioOfficeImageTextColor .wrapper > .content-wrapper > p {
    font-family:"FS Ostro W01 Regular";
    font-size: 36px;
    line-height: 1.39em;
    margin: 0;
    padding: 0;
}

.StudioOfficeImageTextColor .wrapper > .content-wrapper > p .hero-text {
    font-size: 2em;
    line-height: 1.4em;
}

@media (max-width: 1920px) {
    .StudioOfficeImageTextColor .wrapper > .content-wrapper > p {
        font-size: 1.88vw;
    }
}

@media (max-width: 1065px) {
    .StudioOfficeImageTextColor .wrapper > .content-wrapper > p {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .StudioOfficeImageTextColor .wrapper {
        flex-flow: column nowrap;
    }

    section#main .StudioOfficeImageTextColor .wrapper > .content-wrapper {
        order: 1;
        flex: 0 0 100%;
        width: 100%;
    }

    .StudioOfficeImageTextColor .wrapper > .image-wrapper {
        order: 2;
        flex: 0 0 100%;
        width: 100%;
    }
}