@media screen and (max-height: 700px) {

    .aboutSecName {
        margin-top: 13%;
        left: 43% !important;
    }

    .aboutPixelCopy {
        left: 67%;
        top: -205px;
        font-size: 13px;
    }
}


@media screen and (max-width: 1030px) {

    #mainNav {
        top: -153px;
    }

    .aboutSecName {
        margin-top: 22%;
        width: 180px !important;
        left: 43% !important;
    }

    .aboutPixelCopy {
        left: 67%;
        top: -231px;
        font-size: 13px;
    }

    #aboutBGViv {
        width: 130%;
        left: -12% !important;
    }
}


@media screen and (max-width:830px) {
    #logoSVG1 {
        display: none !important;
    }

    .playReelBtn {
        display: none !important;
    }


    #mobileMenuNav {
        display: block;
    }

    .demoReelContainerBG {
        display: none;
    }

    #mobileMenuBtn {
        position: absolute;
        top: 18px;
        left: 10px;
        z-index: 100;
        display: block;
        width: 42px;
        cursor: pointer;
    }

    .siteLoadingPleaseWaitHolder {
        width: 37%;
        margin-left: -20%;
    }

    #mainNav {
        top: -100%;
    }

    #aboutBGViv {
        width: 250%;
        left: -107% !important;
    }

    .aboutPixelCopy {
        width: 464px;
        left: 50%;
        margin-left: -240px !important;
        top: 5%;
        font-size: 14px;
    }

    .aboutSecName {
        margin-top: 7%;
        left: 50% !important;
        width: 226px !important;
        height: 110px;
        margin-left: -130px;
    }
}


@media screen and (max-width: 650px) {
    .aboutPixelCopy {
        width: 384px;
        left: 50%;
        margin-left: -200px !important;
        top: 5%;
        font-size: 14px;
    }
}

@media screen and (max-width: 420px) {
    .aboutSecName {
        width: 166px !important;
        height: 80px;
        margin-left: -88px;
    }

    .aboutPixelCopy {
        margin-left: -180px !important;
        font-size: 12px;
        width: 324px;
    }


    #preLoaderBGParts {
        left: -90px;
    }
}

@media screen and (max-width: 330px) {
    .aboutSecName {
        width: 129px !important;
        height: 30px;
        margin-left: -66px;
        margin-top: 10%;
    }

    .aboutPixelCopy {
        margin-left: -150px !important;
        width: 290px;
    }
}


/* INTRO */

@media screen and (max-width: 1400px) {

    #expSelSVGBG {
        width: 100%;
        left: 0;
    }

    #mainlogo {
        width: 35%;
        top: 25% !important;
    }

    #expSelBasic {
        width: 22%;
        left: 22%;
    }

    #expSelFull {
        width: 23%;
        right: 20%;
        margin-top: 0px;
    }

    .treeLine {
        width: 100%;
        left: 0px;
        bottom: -16%;
    }
}

@media screen and (max-width: 1000px) {

    #expSelSVGBG {
        width: 171%;
        left: -36%;
    }

    #mainlogo {
        width: 57%;
    }

    #expSelBasic {
        width: 40%;
        left: 0%;
    }

    #expSelFull {
        width: 40%;
        left: 0%;
    }

    .treeLine {
        width: 160%;
        left: -40%;
        bottom: -5%;
    }
}

@media screen and (max-width: 630px) {

    #expSelSVGBG {
        width: 240%;
        left: -69%;
    }

    #mainlogo {
        width: 80%;
    }

    #expSelBasic {
        width: 47%;
        left: -8%;
    }

    #expSelFull {
        width: 52%;
        left: 17%;
        margin-top: -53px;
    }

    .treeLine {
        width: 260%;
        left: -76%;
        bottom: -12%;
    }
}

@media screen and (max-width: 485px) {
    #expSelSVGBG {
        width: 290%;
        left: -94%;
    }

    #mainlogo {
        width: 70%;
    }
}

@media screen and (max-width: 400px) {

    #expSelSVGBG {
        width: 340%;
        left: -119%;
    }

    #expSelBasic {
        width: 55%;
    }

    #expSelFull {
        width: 58%;
        left: 26%;
    }

    .treeLine {
        width: 360%;
        left: -117%;
    }
}



/* BIO Sections */


@media screen and (max-width: 1200px) {


    .petersCopy {
        width: 410px;
    }

    .mikesCopy {
        width: 410px;
    }
}

@media screen and (max-width: 1050px) {
    .petersCopy {
        left: 4%;
        width: 360px;
        font-size: 13px;
    }

    .petersSecName {
        width: 265px !important;
        margin-top: 20%;
        height: 140px;
        left: 4% !important;
    }


    .mikesCopy {
        left: 4%;
        width: 360px;
        font-size: 13px;
    }

    .mikesSecName {
        width: 263px !important;
        margin-top: 20%;
        height: 110px;
        left: 4% !important;
    }
}

@media screen and (max-width: 830px) {

    #peterBGViv {
        height: 38%;
        left: -73% !important;
        width: 176%;
        overflow: hidden;
    }

    .petersSecName {
        top: 30%;
        height: 13%;
    }

    .petersCopy {
        left: 26%;
        width: 65%;
        font-size: 14px;
        top: 40%;
    }

    #peterstitle {
        display: none !important;
    }

    #mikestitle {
        display: none !important;
    }

    .mobileBioName {
        display: block;
        position: relative;
        float: left;
        font-size: 10px;
        width: 340px;
        top: 42%;
        left: 26%;
        color: #8e8d8d;
        clear: both;
        margin-left: -60px;
    }

    #mikesBGVIV {
        height: 38% !important;
        left: -73% !important;
        width: 176% !important;
        overflow: hidden;
    }

    .mikesSecName {
        top: 30% !important;
        height: 91px !important;
        left: 6% !important;
        width: 233px !important;
    }

    .mobileBioNameMike {
        margin-left: -20px;
        top: 39%;
    }

    .mikesCopy {
        left: 30% !important;
        width: 65% !important;
        font-size: 14px !important;
        top: 36% !important;
    }
}

@media screen and (max-width: 650px) {

    .petersSecName {
        width: 199px !important;
        left: 3% !important;
    }
}

@media screen and (max-width: 420px) {
    #peterBGViv {
        height: 41%;
    }

    .petersSecName {
        width: 163px !important;
        top: 32%;
    }

    .mobileBioNamePeter {
        top: 38%;
        margin-left: -55px;
    }

    .petersCopy {
        left: 28%;
        width: 65%;
        font-size: 12px;
        top: 35%;
    }

    #mikesBGVIV {
        height: 41% !important;
    }

    .mikesSecName {
        width: 184px !important;
        top: 35% !important;
    }

    .mobileBioNameMike {
        margin-left: -51px;
        top: 40%;
    }

    .mikesCopy {
        left: 23% !important;
        width: 67% !important;
        font-size: 12px !important;
        top: 37% !important;
    }
}

@media screen and (max-width: 330px) {
    #peterBGViv {
        height: 45%;
    }

    .petersSecName {
        width: 128px !important;
        top: 37%;
    }

    .mobileBioNamePeter {
        margin-left: -143px;
        font-size: 9px;
        top: 42%;
    }

    .petersCopy {
        top: 38%;
        left: 4%;
        width: 90%;
        font-size: 11px;
    }


    #mikesBGVIV {
        height: 45% !important;
    }

    .mikesSecName {
        width: 142px !important;
        top: 36% !important;
    }

    .mobileBioNameMike {
        margin-left: -128px;
        font-size: 9px;
    }

    .mikesCopy {
        top: 36% !important;
        left: 2% !important;
        width: 92% !important;
    }
}



/* Team Section */

@media screen and (max-width: 1034px) {


    #ourTeamViv {
        width: 173px !important;
        margin-top: 14px !important;
        left: 50% !important;
        margin-left: -315px;
    }


    #teamlist {
        height: 100%;
        width: 100%;
        margin: 0px;
        top: 0px !important;
    }

    .teammemberSingleColumn {
        position: absolute;
        width: 100%;
        height: 100%;
        display: none;
    }

    .teamportraitSingleColumn {
        width: 50%;
        height: 50%;
        transform: skewX(-30deg);
        overflow: hidden;
        bottom: 0px;
        position: relative;
    }

        .teamportraitSingleColumn .BWFilter {
            display: none;
        }



        .teamportraitSingleColumn img {
            transform: skewX(30deg);
            width: 170% !important;
            left: 0px !important;
            position: relative !important;
        }

        .teamportraitSingleColumn svg {
            display: none;
        }

    .teamNameSingleColumn {
        top: 50%;
        text-align: left;
        font-size: 40px;
        margin-left: -260px;
        position: absolute;
        margin-top: 120px !important;
    }

    .teamJobtitleSingleColumn {
        top: 50%;
        text-align: left;
        font-size: 27px;
        left: 50%;
        margin-left: -260px;
        position: absolute;
        margin-top: 165px !important;
    }

    .teamMemBioSingleColumn {
        top: 50%;
        text-align: left;
        font-size: 16px;
        left: 50%;
        margin-left: -264px;
        display: block !important;
        height: 250px !important;
        opacity: 1;
        position: absolute;
        width: 450px;
        margin-top: 199px !important;
    }



    #mobileTeamArrowsNav {
        display: block !important;
        position: absolute;
        top: 28%;
        left: 15%;
        width: 95px;
        z-index: 10;
    }

    .mobileTeamArrow {
        width: 33px;
        position: absolute;
        float: left;
        margin-right: 11px;
        cursor: pointer;
    }

    #mobileTeamSwipePane {
        display: block !important;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 8;
        height: 50%;
    }
}


@media screen and (max-width: 520px) {
    .teamportraitSingleColumn {
        width: 100%;
        height: 100%;
        transform: skewX(-30deg);
        overflow: hidden;
    }

    .teamlistSingleColumn {
        margin-left: 0px !important;
        top: 0px !important;
        margin-top: 0px !important;
        left: 140px;
    }

    .teamNameSingleColumn {
        top: 11vw;
        text-align: left;
        font-size: 28px !important;
        margin-top: 13% !important;
        margin-left: -200px !important;
        position: relative;
    }

    .teamJobtitleSingleColumn {
        top: 9.5vw;
        text-align: left;
        font-size: 21px;
        margin-left: -200px;
        position: relative;
        margin-top: 2px !important;
    }

    .teamMemBioSingleColumn {
        top: 11.5vw;
        text-align: left;
        font-size: 16px;
        left: 50%;
        margin-left: -281px;
        display: block !important;
        height: 250px !important;
        opacity: 1;
        position: relative;
        width: 350px;
    }


    .teamlistSingleColumn {
        margin-left: 0px !important;
        top: 0px !important;
        margin-top: 0px !important;
        left: 140px;
    }



    #mobileTeamArrowsNav {
        top: 27%;
        left: 4%;
    }

    #ourTeamViv {
        width: 113px !important;
        top: 85vw !important;
        margin-left: -166px;
        margin-top: -70px !important;
    }

    .teammemberSingleColumn {
        height: 62vw;
    }

    .teamlistSingleColumn {
        left: 10%;
    }

    .teamportraitSingleColumn img {
        width: 95%;
    }

    .teamMemBioSingleColumn {
        width: 271px;
        font-size: 11px;
        margin-left: -203px;
        margin-top: 0px !important;
    }
}

@media screen and (max-width: 420px) {
    .teammemberSingleColumn {
        height: 75vw;
    }

    #ourTeamViv {
        top: 98vw !important;
        margin-left: -178px;
    }
}

@media screen and (max-width: 350px) {

    .teammemberSingleColumn {
        height: 81vw;
    }

    #ourTeamViv {
        width: 108px !important;
        top: 107vw !important;
        margin-left: -136px;
        margin-top: -70px !important;
    }

    .teamNameSingleColumn {
        font-size: 24px !important;
        margin-left: -226px !important;
    }

    .teamJobtitleSingleColumn {
        font-size: 18px;
        margin-left: -226px !important;
    }

    .teamMemBioSingleColumn {
        margin-left: -231px !important;
    }
}

/* Portfolio Section */


@media screen and (max-width: 1280px) {
    .projectThumb {
        left: 140px;
    }
}


@media screen and (max-width: 950px) {
    .portfolioSVGSecName {
        -ms-transform: scale(.7, .7); /* IE 9 */
        -webkit-transform: scale(.7, .7); /* Safari */
        transform: scale(.7, .7);
        margin-left: -90px !important;
        margin-top: 21%;
        height: 120px;
    }

    .portfolioSectionCopy {
        margin-left: -40px;
    }
}

@media screen and (max-width: 830px) {
    #portfolioNavBottom {
        display: none !important;
    }

    .projectSecondaryImage {
        z-index: 0;
        margin-right: 60px !important;
    }

        .projectSecondaryImage img {
            margin-left: 70px;
        }


    .projectThumb {
        height: 51%;
        width: 121%;
        margin-left: -38%;
    }

    .projectThumbSVGImage {
        width: 134%;
        margin-left: -22%;
        z-index: 1;
    }

    .project .viewProjSVGText {
        left: 44%;
        z-index: 2;
    }

    .project .viewProjSVGTextMask {
        left: 44%;
        z-index: 2;
    }

    .nextProjArrows {
        top: 55%;
        left: 42.5%;
        z-index: 2;
    }

    .portfolioSVGSecName {
        top: 34%;
        margin-left: -50px !important;
    }

    .portfolioSectionCopy {
        margin-left: 20%;
        top: 46%;
        width: 410px;
        font-size: 14px;
    }

    .projLoadingPleaseWaitHolder {
        left: -11%;
        position: relative;
        top: 40%;
        z-index: 2;
    }

    .projectLoadingBars {
        left: 35%;
    }

    .projectThumbMouseOverBox {
        left: 41%;
        height: 81px;
        width: 170px;
        z-index: 3;
    }

    .projectName {
        height: initial;
        top: 35%;
    }
}


@media screen and (max-width: 490px) {


    .projectThumb {
        height: 47%;
        width: 109%;
        margin-left: -38%;
    }

    .projectThumbSVGImage {
        width: 150%;
        margin-left: -34%;
    }

    .project .viewProjSVGText {
        left: 29%;
        width: 170px;
        top: 40%;
    }

    .project .viewProjSVGTextMask {
        left: 29%;
        width: 170px;
        top: 40%;
    }

    .nextProjArrows {
        top: 55%;
        left: 25%;
        -ms-transform: scale(.8, .8); /* IE 9 */
        -webkit-transform: scale(.8, .8); /* Safari */
        transform: scale(.8, .8);
    }



    .portfolioSVGSecName {
        top: 32%;
        -ms-transform: scale(.5, .5); /* IE 9 */
        -webkit-transform: scale(.5, .5); /* Safari */
        transform: scale(.5, .5);
        margin-left: -140px !important;
        height: 170px !important;
    }

    .portfolioSectionCopy {
        margin-left: -10px;
        top: 41%;
        width: 310px;
        font-size: 12px;
        margin-top: -100px !important;
    }

    .projLoadingPleaseWaitHolder {
        left: -28%;
        position: relative;
        top: 36%;
        -ms-transform: scale(0.9, 0.9); /* IE 9 */
        -webkit-transform: scale(0.9, 0.9); /* Safari */
        transform: scale(0.9, 0.9);
    }

    .projectLoadingBars {
        left: 15%;
        -ms-transform: scale(.7, .7); /* IE 9 */
        -webkit-transform: scale(.7, .7); /* Safari */
        transform: scale(.7, .7);
    }

    .projectThumbMouseOverBox {
        width: 146px;
        left: 25%;
        top: 38%;
    }


    .projectName {
        top: 24%;
        font-size: 12px;
        left: -38px !important;
    }
}

@media screen and (max-width: 370px) {

    .portfolioSectionCopy {
        margin-left: -50px;
    }
}

@media screen and (max-width: 330px) {

    .portfolioSectionCopy {
        margin-left: -70px;
        font-size: 11px;
        width: 290px;
        padding-top: 22px;
    }
}


/* Project Slides */
@media screen and (max-width: 1320px) {

    .mainSlideSVG {
        margin-left: -189px !important;
        height: 103% !important;
    }


    .projectMetaData {
        margin-left: -198px !important;
    }

    .svgSecNameInsideProject {
        margin-left: -161px !important;
        width: 280px;
    }

    .videoSlideSVG {
        margin-left: -211px !important;
        height: 100% !important;
    }

    .playButtonOver {
        margin-left: -300px !important;
    }

    .playVideoButtonSVG {
        margin-left: -300px !important;
    }

    .playVideoButtonArrowSVG {
        margin-left: -300px !important;
    }
}



@media screen and (max-width: 1000px) {

    .mainSlideSVG {
        margin-left: -259px !important;
    }

    .svgSecNameInsideProject {
        margin-left: -231px !important;
        width: 254px;
    }

    .projectMetaData {
        margin-left: -264px !important;
        -ms-transform: scale(.8, .8); /* IE 9 */
        -webkit-transform: scale(.8, .8); /* Safari */
        transform: scale(.8, .8);
        top: 41%;
    }

    .videoSlideSVG {
        margin-left: -321px !important;
    }

    .playButtonOver {
        margin-left: -430px !important;
    }

    .playVideoButtonSVG {
        margin-left: -430px !important;
    }

    .playVideoButtonArrowSVG {
        margin-left: -430px !important;
    }
}




@media screen and (max-width: 820px) {
    .mainSlideSVG {
        display: none;
    }

    .slideToReadMore {
        width: 140px;
        bottom: -5px;
    }

    #videoPlayerThumb {
        height: 160%;
    }

    .videoSlideSVG {
        margin-left: -385px !important;
        position: absolute;
        left: 50%;
        height: 79% !important;
    }

    .svgSecNameInsideProject {
        width: 235px !important;
        margin-left: -91px !important;
        z-index: 2;
        top: 40%;
        left: 50%;
    }

    .projectMetaData {
        margin-left: -240px !important;
        -ms-transform: scale(.7, .7);
        -webkit-transform: scale(.7, .7);
        transform: scale(.7, .7);
        top: 33%;
        z-index: 2;
        left: 50%;
    }

    .playButtonOver {
        -ms-transform: scale(.8, .8);
        -webkit-transform: scale(.8, .8);
        transform: scale(.8, .8);
        margin-left: -125px !important;
        top: 73%;
        left: 50% !important;
        z-index: 2;
    }

    .playVideoButtonSVG {
        -ms-transform: scale(.8, .8);
        -webkit-transform: scale(.8, .8);
        transform: scale(.8, .8);
        margin-left: -125px !important;
        top: 73%;
        left: 50% !important;
    }

    .playVideoButtonArrowSVG {
        -ms-transform: scale(.8, .8);
        -webkit-transform: scale(.8, .8);
        transform: scale(.8, .8);
        margin-left: -125px !important;
        top: 73%;
        left: 50% !important;
    }

    .slideContent {
        margin-left: 0px;
    }
}

@media screen and (max-width: 700px) {
    .svgSecNameInsideProject {
        -ms-transform: scale(.8, .8);
        -webkit-transform: scale(.8, .8);
        transform: scale(.8, .8);
    }
}

@media screen and (max-width: 480px) {
    .fp-slidesNav {
        -ms-transform: scale(.8, .8);
        -webkit-transform: scale(.8, .8);
        transform: scale(.8, .8);
        margin-left: -160px !important;
    }
}


/* Project Slides Stories */

@media screen and (max-width: 1320px) {
    .oceansideTextDot {
        height: 0px;
    }

    .layout2_BottomImage {
    }

        .layout2_BottomImage img {
            top: -11% !important;
        }

    .slideContentTitle {
        height: auto;
    }

    .slideContent {
        -ms-transform: scale(.9, .9);
        -webkit-transform: scale(.9, .9);
        transform: scale(.9, .9);
    }

    .storySVGSidePhoto {
        -ms-transform: scale(.9, 1);
        -webkit-transform: scale(.9, 1);
        transform: scale(.9, 1);
    }

    .slideSVG {
        // left: -40px !important;
    }

    .slideContentFloatMiddle {
        top: 50%;
        margin-top: -11% !important;
    }

    .slideContentFloatMiddle {
        top: 50%;
        margin-top: -11% !important;
        margin-left: 0px !important;
    }

    .contentCopy {
        left: initial;
        -ms-transform: scale(.9, .9);
        -webkit-transform: scale(.9, .9);
        transform: scale(.9, .9);
        left: 0px !important;
        margin-left: 81px !important;
        margin-bottom: -18px;
    }

    /*
    .h3_contentTitle {
        height: initial;
        position: relative;
        margin-left: initial;
    }*/

    .h1_contentTitle {
        clear: both;
    }
}

@media screen and (max-width: 1040px) {
    .slideContent {
        margin-left: -230px;
        // top: 27%;
    }

    .slideContentTitle {
        top: 0px !important;
    }


    .contentCopy {
        clear: both;
        margin-top: 0px;
        margin-left: 0px !important;
    }
}


@media screen and (max-width: 830px) {
    .fp-controlArrow {
        display: inline !important;
        top: 90%;
        border: none;
        height: 60px;
        width: 50px !important;
        background-size: 100% 100%;
    }

    .fp-prev {
        background-image: url(../images/teamMobileArrowLeft.png);
    }

    .fp-next {
        background-image: url(../images/teamMobileArrowRight.png);
    }

    .fp-slidesNav {
        display: none !important;
    }

    .slideContent {
        // -ms-transform: scale(.7, .7);
        // -webkit-transform: scale(.7, .7);
        // transform: scale(.7, .7);
    }

    .layout2_BottomImage img {
        top: 0px !important;
        width: 140%;
    }

    .slideContentFloatMiddle {
        margin-left: -50px !important;
    }

    .slideSVG {
    }
}


@media screen and (max-width: 590px) {
    .layout2_BottomImage img {
        top: 0px !important;
        width: 180%;
    }
}

/* Other Projects Page */


@media screen and (max-width: 1479px) {
    #logosList {
        top: 59px;
        width: 992px;
        left: 50%;
        margin-left: -345px;
        display: block;
    }

        #logosList li {
            height: 63px;
        }

    .featureclientlogo {
        width: 313px !important;
    }

    #firstOtherProject {
        width: 720px;
    }

        #firstOtherProject .otherProjImg img {
            top: -214px !important;
        }

        #firstOtherProject .otherProjImg svg {
            left: -22px;
        }

        #firstOtherProject .otherProjImg .otherProjThumbSVGText {
            top: 0px;
            left: 323px;
        }

    #otherProjectViv {
        top: 234px !important;
        width: 147px !important;
        left: 50% !important;
        margin-left: -470px !important;
    }

    .moreProjThumbs {
        top: 219px;
        width: 780px;
        left: 50%;
        margin-left: -300px;
    }

    #firstOtherProject .otherProjectLoadingBars #loaderBarsSVG {
        left: 24%;
    }
}



@media screen and (max-width: 830px) {

    #firstOtherProject {
        width: 560px;
    }

    .otherProjImg .otherProjThumbSVGText {
        left: 131px;
    }

    #firstOtherProject .otherProjImg img {
        top: -137px !important;
    }

    #firstOtherProject .otherProjImg svg {
        left: -23px;
    }

    #firstOtherProject .otherProjImg .otherProjThumbSVGText {
        top: 3px;
        left: 233px;
    }

    .moreProjThumbs {
        top: 111px;
        width: 100%;
        margin-left: -270px;
        left: 50%;
    }


    .otherProj {
        width: 270px;
    }

        .otherProj img {
            top: -30px !important;
        }

    #logosList {
        display: none;
    }

    #otherProjectViv {
        top: 3% !important;
        width: 147px !important;
        margin-left: -71px !important;
    }

    .otherProjectLoadingBars svg {
        -ms-transform: scale(.9, .9);
        -webkit-transform: scale(.9, .9);
        transform: scale(.9, .9);
    }

    .otherProjsViewProjSVG {
        width: 110%;
    }
}

@media screen and (max-width: 560px) {
    #firstOtherProject .otherProjImg img {
        top: -66px !important;
    }

    .otherProjImg svg {
        width: 200px;
        left: -40px;
    }

    #firstOtherProject .otherProjImg svg {
        left: 37px;
    }

    #firstOtherProject .otherProjImg .otherProjThumbSVGText {
        width: 129px;
        left: 118px;
        top: -13px;
    }

    .otherProjImg .otherProjThumbSVGText {
        left: 43px;
        width: 121px;
        top: -12px;
    }

    #firstOtherProject {
        width: 312px;
    }

    .otherProj {
        width: 150px;
        height: 50px;
        margin-bottom: 19px;
    }

    .otherProjImg {
        height: 50px !important;
    }

    .otherProj img {
        top: -20px !important;
    }

    .otherProjName {
        font-size: 10px;
    }

    .moreProjThumbs {
        margin-left: -156px;
        left: 50%;
        width: 314px;
    }

    .otherProjectLoadingBars #loaderBarsSVG {
        margin-top: -19px !important;
        left: 0% !important;
    }

    .otherProjLoadingPleaseWaitHolder {
        top: -38px;
        width: 75px;
    }
}
/* Other Project Open Box*/

@media screen and (max-width: 600px) {

    .otherProjsViewProjSVG {
        position: absolute;
        left: 50%;
        top: 0px;
        width: 150%;
        display: none;
        margin-left: -69%;
        margin-top: -7%;
    }

    .otherProjectVideoMaskDiv {
        width: 70%;
        margin-left: -200px;
    }

    .otherProjOpenVideoDesc {
        left: 21px;
    }

    .otherProjCloseButton {
        left: 37%;
        top: 11%;
    }
}

@media screen and (max-width: 420px) {
    .otherProjsViewProjSVG {
        margin-left: -75%;
        width: 170%;
    }

    .otherProjectVideoMaskDiv {
        width: 87%;
        margin-left: -52%;
    }

    .otherProjOpenVideoDesc {
        font-size: 11px;
        width: 89%;
        left: 32px;
    }
}



/* Services Page */
@media screen and (max-width: 1345px) {
    #servicesContainer {
        left: -82px;
    }

    .servicesSectionSVG {
        height: 670px;
    }

    .servicesBGImage {
        width: 360%;
        height: 153%;
    }

    #creativeProductionImageBG {
        x: -900;
    }
}

@media screen and (max-width: 1250px) {
    #servicesContainer {
        left: -132px;
    }

    .servicesSectionSVG {
        margin-right: -9%;
    }
}

@media screen and (max-width: 1170px) {
    #servicesContainer {
        left: -150px;
    }

    .servicesSectionSVG {
        margin-right: -14%;
    }
}

@media screen and (max-width: 1000px) {
    #servicesContainer {
        left: -162px !important;
    }


    .servicesSectionSVG {
        margin-right: -18%;
    }
}



@media screen and (max-width: 830px) {


    #servicesContainer {
        left: -80px !important;
        width: 400%;
    }

    .servicesSectionSVG {
        margin-right: -4%;
        height: 650px;
    }

    #servicesArrowsNav {
        display: block !important;
        position: absolute;
        bottom: 16%;
        left: 57%;
        width: 105px;
        z-index: 2100;
    }

    .servicesArrow {
        width: 40px;
        position: absolute;
        float: left;
        margin-right: 11px;
        cursor: pointer;
        opacity: 0;
    }
}

@media screen and (max-width: 320px) {

    .servicesSectionSVG {
        // font-size:18px !important;
        height: 556px;
    }
}

/* /////////////////  Social Page  \\\\\\\\\\\\\\\\*/
@media screen and (max-height: 670px) {
    .blogwrap {
        top: -6px;
    }

    .igwrap {
        height: 240px;
        bottom: 2%;
    }
}

@media screen and (max-height: 545px) {
    .blogwrap {
        top: 2%;
    }

    #ourBlogViv {
        width: 85px !important;
        top: 51px !important;
        left: -110px;
    }

    #socialFeedViv {
        width: 85px;
        top: 37px;
        left: -110px;
    }

    #newsNav {
        z-index: 2;
        left: -160px;
        top: -140px;
    }

    #igNav {
        z-index: 2;
        left: -160px;
        top: -132px;
    }

    .igwrap {
        height: 194px;
        bottom: 2%;
    }


    #igBlocker {
        left: -501px;
        top: 28px;
        width: 501px;
        height: 104px;
    }
}

@media screen and (max-width: 1030px) {
    .blogwrap {
        left: 200px;
    }

    .igwrap {
        left: 200px;
    }
}


@media screen and (max-width: 606px) {
    .blogwrap {
        left: 28px;
        top: 11%;
    }

    .igwrap {
        left: 30px;
    }

    .newsSnippet {
        display: none;
    }

    .fixedHeader {
        top: 46px;
        z-index: 2;
        margin-left: -20px;
    }

    .storyDate {
        top: 7px;
        height: 20px;
        padding-top: 8px;
    }

    .storyheader {
        background-color: white;
        width: auto;
        position: relative;
        top: 7px;
        height: 32px !important;
        transform: skewX(-11deg);
        left: 26px;
        max-width: 70%;
    }


        .storyheader p {
            transform: skewX(11deg);
            top: -9px;
            font-size: 13px;
            line-height: 19px;
        }

    .readMoreBtn {
        top: -36px;
        left: 20px;
    }


    #ourBlogViv {
        width: 65px !important;
        top: 9px !important;
        left: 13px;
    }

    #newsNav {
        z-index: 2;
        left: -24px;
        top: -100px;
        -ms-transform: scale(.9, .9);
        -webkit-transform: scale(.9, .9);
        transform: scale(.9, .9);
    }


    #socialFeedViv {
        width: 71px !important;
        top: -11px !important;
        left: 13px;
    }

    .igCaption {
        display: none;
    }

    .iglikesicon {
        top: -30px;
        position: relative;
        float: right;
        right: 50px;
    }

    .numberoflikes {
        top: -30px !important;
        ;
        position: relative;
        float: right;
        right: 50px;
    }

    .igcommentbubble {
        top: -30px;
        position: relative;
        float: right;
        right: 50px;
    }

    .numberofcomments {
        top: -30px !important;
        ;
        position: relative;
        float: right;
        right: 50px;
    }

    .igreadmore {
        top: -50px;
        position: relative;
        left: 20px;
    }

    #igNav {
        left: -20px;
        top: -82px;
    }
}

@media screen and (max-width: 330px) {

    .storyheader p {
        font-size: 11px;
        line-height: 11px;
        width: 83%;
    }

    .storyDate {
        width: 50px;
    }

        .storyDate span {
            font-size: 9px;
        }
}



/* /////////////////  Contact Page  \\\\\\\\\\\\\\\\*/


@media screen and (max-height: 650px) {
    #ContactSection {
    }

    .fancy-form {
        left: 0px !important;
        width: 380px !important;
    }

    .fancy-form__title svg {
        width: 106px !important;
        position: absolute;
    }

    #contactInfo {
        margin-top: 0px !important;
        float: right !important;
    }

        #contactInfo p {
            font-size: 13px !important;
        }

    .fancy-input__label {
        font-size: 1em !important;
    }

    .fancy-input__input {
        font-size: 1.2em !important;
    }

    .svgDots {
        -ms-transform: scale(.9, .9);
        -webkit-transform: scale(.9, .9);
        transform: scale(.9, .9);
    }

    .fancy-input__input:focus ~ .svgDots, .fancy-input__input:active ~ .svgDots, .fancy-input__input.active ~ .svgDots {
        transform: translate(0px, -5px) !important;
    }

    .fancy-input__input:focus ~ label, .fancy-input__input:active ~ label, .fancy-input__input.active ~ label {
        transform: translate(0px, -5px) !important;
    }

    .fancy-input_error_line {
    }
}

@media screen and (max-width: 1000px) {
    #ContactSection {
        background-size: 100% 100%;
    }


    .fancy-form {
        left: 50% !important;
        margin-left: -280px !important;
    }
}

@media screen and (max-width: 630px) {
    #ContactSection {
        background-size: 160% 100%;
        background-position-x: -100px;
    }

    .fancy-form {
        width: 450px !important;
    }

    .fancy-form__wrapper {
        left: -19px;
        position: relative;
    }

    .fancy-form__title svg {
        width: 106px !important;
        position: absolute;
    }

    #contactInfo {
        margin-top: 0px !important;
        float: right !important;
    }

        #contactInfo p {
            font-size: 13px !important;
        }

    .fancy-input__label {
        font-size: 1em !important;
    }

    .fancy-input__input {
        font-size: 1.2em !important;
        // height: 30px !important;
    }

    .svgDots {
        -ms-transform: scale(.9, .9);
        -webkit-transform: scale(.9, .9);
        transform: scale(.9, .9);
    }

    .fancy-input__input:focus ~ .svgDots, .fancy-input__input:active ~ .svgDots, .fancy-input__input.active ~ .svgDots {
        transform: translate(0px, -12px) !important;
    }

    .fancy-input__input:focus ~ label, .fancy-input__input:active ~ label, .fancy-input__input.active ~ label {
        transform: translate(0px, -12px) !important;
    }

    .fancy-input_error_line {
    }
}


@media screen and (max-width: 440px) {

    .fancy-form__title svg {
        width: 82px !important;
        left: 42px !important;
        top: 32px !important;
    }

    #contactInfo p {
        font-size: 12px !important;
    }

    #contactInfo {
        margin-top: 27px !important;
        left: -7px;
        height: 27px;
    }

    .fancy-input {
        clear: both;
    }

    .fancy-form {
        top: -50px;
        left: -80px !important;
        margin-left: 0px !important;
    }

    #sendMsg {
        top: 60px !important;
        left: 15px;
    }
}


/* ///////////////// Mobile Menu Resize \\\\\\\\\\\\\\\\ */



@media screen and (max-width: 525px) {
    #mobileMenuNav li {
        left: 10px;
    }

    #mobileMenuNav {
        width: 93%;
    }
}

@media screen and (max-width: 455px) {



    .mobileDRBtn {
        margin-left: -39px;
        bottom: -11px;
    }
}

@media screen and (max-width: 400px) {
    .mobileDRBtn {
        margin-left: -20px;
        bottom: -11px;
        width: 236px;
    }

    #mobileMenuNav {
        width: 100%;
    }
}


@media screen and (max-width: 350px) {
    #mobileMenuNav li {
        left: -20px;
    }

    #mobileMenuNav {
        width: 110%;
    }

    #mobileMenuClose {
        margin-right: -40px;
    }

    .mobileDRBtn {
        width: 206px;
    }
}

@media screen and (max-width: 300px) {

    #mobileMenuNav {
        width: 121%;
    }



    .mobileDRBtn {
        width: 226px;
        margin-left: -40px;
    }
}




/* ///////////////// Demo Reel Force \\\\\\\\\\\\\\\\ */

.aboutSecNameDR {
    left: 3% !important;
    width: 15% !important;
    bottom: 29% !important;
    position: absolute !important;
    margin-left: initial !important;
}


.peterSecNameDR {
    left: 3% !important;
    width: 17% !important;
    bottom: 26% !important;
    position: absolute !important;
    top: initial !important;
}


.mikesSecNameDR {
    left: 3% !important;
    width: 17% !important;
    bottom: 26% !important;
    position: absolute !important;
    top: initial !important;
}

.forceServicesContainerDR {
    left: 0px !important;
}


@media screen and (max-width: 1530px) {

    .portfolioSVGSecNameDR {
        -ms-transform: scale(.9, .9);
        -webkit-transform: scale(.9, .9);
        transform: scale(.9, .9);
        margin-left: -27px !important;
    }
}

@media screen and (max-width: 1375px) {

    .portfolioSVGSecNameDR {
        -ms-transform: scale(.8, .8);
        -webkit-transform: scale(.8, .8);
        transform: scale(.8, .8);
        margin-left: -41px !important;
    }
}

@media screen and (max-width: 1240px) {

    .portfolioSVGSecNameDR {
        -ms-transform: scale(.7, .7);
        -webkit-transform: scale(.7, .7);
        transform: scale(.7, .7);
        margin-left: -53px !important;
    }
}

@media screen and (max-width: 1000px) {

    .portfolioSVGSecNameDR {
        -ms-transform: scale(.6, .6);
        -webkit-transform: scale(.6, .6);
        transform: scale(.6, .6);
        margin-left: -72px !important;
    }
}


/*

@media screen and (orientation: portrait) {

    
}


@media screen and (orientation: landscape) {
    .siteLoadingPleaseWaitHolderMobile {
        width: 300px;
        margin-left: -150px;
    }
}

    */