/* #Desktop
============================================================================================================================================================== */

/* Note: Design for a width of 1025px */

@media only screen and (min-width: 1024px) and (max-width: 1150px) {

    h1, h1 span {

    }

    .project-one-image {
        width: 350px;
        left: 30px;
        top: 70px;
        margin-bottom: 80px;
    }

    .folio-shot1 {
        float:none;
    }

}

/* Note: Design for a width of 960px */

@media only screen and (min-width: 960px) and (max-width: 1024px) {

    h1, h1 span {

    }


    .project-info {
        top: 50%;
    }


    .project-cover-image {
        width: 350px;
        left: 30px;
        top: 70px;
    }

    .project-one-image {
        width: 350px;
        left: 30px;
        top: 70px;
    }

    .project-two-image {
        width: 40%;
        left: 9.5%;
        top: 8%;
    }
    .project-three-image {
        width: 40%;
        left: 9.5%;
        top: 8%;
    }
    .project-four-image {
        width: 30%;
        left: 11.5%;
        top: 25%;
    }
    .project-five-image {
        width: 33%;
        left: 9.5%;
        top: 28%;
    }

    .hero-photo {
        width: 75%;
    }
    .hero-title {
        left:68%;
    }
    #intro {
        width: 75%;
        padding: 120px 0 50px 0;
    }
    .quote {
        padding-left:30px;
        padding-right:30px;
    }
    #dribbble {
        width: 85%;
    }
    .shot {
        width: 32%;
        padding: 10px;
        margin-left: 6px;
    }



    /*---- folio ---*/
    
    .main-container h1, .main-container h1 span {
        font-size: 100px;
        line-height: 90px;
    }

    .logos-img {
        width:400px;
        height:auto;
    }
    .folio-hero-wrap {
        width: 52%;
        top: 130px;
    }
    .folio-hero-title h1 {
    }
    .folio-hero-title .flipp2 {
        margin-left: 90px;
    }
    .folio-hero-photo {
        width: 65%
    }
    .folio-hero-title {
        top: 20px;
        left: 68%;
    }
    .folio-hero-blurb {
        font-size: 14px;
        line-height: 22px;
    }
    .folio {
        padding: 0px 0 50px 0;
    }
    .folio-fullimg {
        width: 85%;
        padding: 0;
    }
    .folio-img {
        width:100%;
        margin: 0 0 30px 0;
    }

    .next, .prev {
        line-height: 130px;
        font-size: 110px;
    }

    .indent-cover1 {
        margin-top: 30px;
        margin-left: 120px;
    }

    .indent-cover2 {
        margin-left: 0px;
    }

    .folio-shot1 {
        float: none;
        width: auto;
    } 

    .folio-shot-animate {
        width: 200px;
    }

    .folio-shot2 {
        float: right;
        width: 520px;
    }


}



/* #Tablet (Portrait)
============================================================================================================================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {


    h1, h1 span {

    }

    p {
        font-size: 16px;
        line-height: 28px;
    }
    h2 {
        font-size: 30px;
        line-height: 34px;
    }
    h3 {
        font-size: 14px;
        line-height: 16px
    }

    .project-block {
        top: 80px;
    }

    .project-images-left {
        width: 45%;
    }


    .project-details-right {
        width: 55%;
        position: relative;
        top: 0px;
    }

    .project-img-cover {
        left:0;
        top: 30px;
    }

    .project-img-cover2 {
        top: 30px;
        left: -20px;
    }

    .project-img-cover img, .project-img-cover2 img, .project-img-flipp img, .project-img-platform img {
        width: 45%;
    }
    

    .project-img-moregidge img {
         width: 45%;  
    }

    .text-cover {
        left: 35%;
        top: 30;
    }

    .text-cover2 {
        left: 40%;
        top: 50;
    }

   .text-insta img, .text-cover img, .text-cover2 img, .text-platform img {
        width:50%;
    }

    .text-flipp {
        left: -30px;
        top: 60;
    }

    .text-platform {
        left: 30%;
        top: 0;
    }

    .project-img-platform {
        top: 20px;
        left: -20px;
    }

    .text-moregidge {
        left: 30%;
        top: 0;
    }


    .project-img-moregidge {
        top: 0px;
        left: -45px;
    }


    .project-info {
        top: 50%;
    }

    .project-cover-image {
        width: 40%;
        left: -20px;
        top: 70px;
        margin-bottom: 100px;
    }

    .project-one-image {
        width: 40%;
        left: -20px;
        top: 70px;
        margin-bottom: 100px;
    }
    .project-two-image {
        width: 40%;
        left: 3.5%;
        top: 12%;
    }
    .project-three-image {
        width: 50%;
        left: 5.5%;
        top: 16%;
    }
    .project-four-image {
        width: 30%;
        left: 11.5%;
        top: 25%;
    }

    .project-five-image {
        width: 33%;
        left: 9.5%;
        top: 28%;
    }

    .indent-cover1 {
        margin-left: 110px;
    }
    .indent-cover2 {
        margin-left: 0px;
    }

    .indent-flipp1 {
        margin-left: 30px;
    }

    .growth-indent {
        margin-left: 95px;
    }

    .dynamic-indent {
    margin-left: 110px;
}
    .main-container {
        width: 500px;
        left: 27%;
    }

    .project-info .cta {
        margin-left: 290px;
    }

    .header {
        height:435px;
        transition: left 0.5s;
    }





    .main-container h1, .main-container h1 span {
        font-size: 65px;
        line-height: 67px;
        margin: 0;
    }

    .main-container h1 {
        margin-left: 20px;
    }

    .indent-flipp1 {
        margin-left: 0;
    }

    .subtext {
        top: 20px;
    }



    .folio-shot1 {
        float: none;
        width:auto;
    }


    .folio-shot-animate {
        width: 150px;
    }

    .folio-shot2 {
        padding-top: 60px;
        float: right;
        width: 470px;
    }



    .color-about1 {
        font-size: 100px;
        line-height: 80px;
    }

    .hero-photo {
        width:58%;
    }
    .hero-title {
        width:320px;
        left:52%;
    }
    .hero-blurb {
        margin: 30px 30px 30px 70px;
        font-size: 12px;
        line-height: 20px;
    }
    .hero-cta {
        margin: 37px 0px 0px 70px;
    }
    #intro {
        width: 75%;
        padding: 80px 0 30px 0;
    }
    #work, #work2 {
        width: 85%;
        padding: 0px auto;
    }
    #work2 {
        height: 420px;
    }
    .work-hero-img {
        margin-left: 10px;
        width: 85%;
        height: 350px;
    }
    .hero-box {
        left: 50%;
        width: 315px;
        height: 245px;
    }
    .hero-box-cta {
        margin: 30px 0px 0px 0px;
    }
    .work-small {
        margin: 10px 0px;
    }
    .work-small-img {
        width: 315px;
        height: auto;
        margin-left:0;
    }
    #work-box1 {
        padding: 25px;
        position: relative;
        width: 270px;
        height: 195px;
        top: -70px;
        left: 20px;
    }
    #work-box2 {
        padding: 25px;
        position: relative;
        width: 270px;
        height: 195px;
        top: -70px;
        left: 20px;
    }
    .quote {
        padding-left:30px;
        padding-right:30px;
    }
    #dribbble {
        width: 85%;
        padding: 50px 0 50px 0;
    }
    .shot {
        width: 32%;
        padding: 10px;
        margin-left: 6px;
    }
    /*---- folio ---*/
/*    .folio-header {
        height: 460px;
    }*/

    .logos-img {
        width:90%;
        height:auto;
    }

    .folio-hero-wrap {
        top: 130px;
        width: 100%;
    }
    .folio-hero-photo {
        width: 58%;
        padding-top: 60px;
    }

    .folio-hero-title {
        left: 180px;
    }
    .folio-hero-title h1 {
    }
    .folio-hero-wrap .flipp1 {
        top: 170px;
        left: 45px;
    }
    .folio-hero-wrap .platform1 {
        top: 60px;
        left: 0px;
    }

    .folio-hero-wrap .growth1 {
        top: 20px;
        left: -40px;
    }

    .folio-hero-wrap .content1 {
        top: 20px;
        left: -40px;
    }


    .folio-hero-blurb {
        font-size: 12px;
        line-height: 20px;
        margin: 30px 30px 30px 240px;
        width: 240px;
    }
    #folio {
        padding: 0;
        width: 85%;
    }
    .folio-fullimg {
        width: 95%;
        padding: 0;
    }
    .folio-img {
        width:100%;
        margin: 0 0 30px 0;
        padding-top: 10px;
    }

    .folio-blurb {
        padding: 30px 0 30px 0;
    }

    .full {
        padding: 0 0 20px 0;
    }



}


/*  #Mobile (Portrait)
============================================================================================================================================================== */

/* Note: Design for a width of 320px */

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




    .nav-content {
        height:55px;
    }

    h1, h1 span {
        font-size: 36px;
        margin-bottom: 10px;
    }

    h2 {
        font-size: 24px;
        line-height: 36px;
    }

    p {
        font-size: 15px;
        line-height: 26px;
    }

    .nav-link, .nav-social {
        display: none;
    }


    .project-info {
        position: relative;
    }

    .project-info p {
    }

    .project {
    }

    .logo {
        left: 50px;
        position: absolute;
        float: left;
        transform-origin: left;
    }

    .project-block {
        top: 100px;
        height: 700px;   
        width: 100%;
        padding: 50 0;
    }

    .project-images-left {
        width: 100%;
    }


    .project-details-right {
        width: 100%;
        position: relative;
        top: 30px;
    }
 
    .text-insta {
        top: -20px;
        left: 0px;
    }

    .text-insta img {
        width:70px;
    }

    .text-cover, .text-cover2 {
        left: 240px;
    }

    .text-cover img, .text-cover2 img {
        width: 40px;
    }

    .project-img-cover {
        top: 0;
    }

    .project-img-cover img {
        width: 80%;
    }

    .project-img-cover2 img, .project-img-flipp img, .project-img-platform img {
        width: 90%;
    }

    .project-img-cover2 {
        top: 0;
        left: 0;
    }


    .color-cover, .color-flipp, .color-platform, .color-moregidge {
        width: 80%;
        height: 180px;
    }

    .text-flipp img {
        width: 50px;
    }
    
    .text-flipp {
        left: 240px;
        top: 80px
    }

    .project-img-flipp {
        top: 40px;
        left: 0;
    }

    .text-platform {
        left: 220px;
    }

    .text-platform img {
        width: 90px;
        top: 60px;
    }

    .project-img-platform {
        top: 0px;
        left: 20;
    }


    .project-img-moregidge {
        top: 0px;
        left: 20;
    }

    .project-img-moregidge img {
        width: 110%;
        left: -20%;
        position: relative;
    }
    
    .text-moregidge {
        top: 0px;
        left: 240px;
    }
    .text-moregidge img {
        width: 40px;
    }


    /*=== PORTFOLIO PAGES ===*/

    .main-container {
        width: 100%;
        left: 0;
        position: relative;
        top:0;
    }

    .main-container h1, .main-container h1 span {
        font-family: 'Playfair Display', serif;
        font-weight: 700;
        font-size: 65px;
        line-height: 67px;
    }

    .main-wrapper .extra-top .img {
        width: 300px;
    }

    .extra-top {
        top: 0;
        margin-top:0;
    }

    .subtext {
        left:0;
        width: 100%;
    }


    .about-info {
        width: 54%;
        margin: 10 0 0 170px;
        text-align: left;
        font-family: 'Roboto Slab', serif;
        font-weight: 200;
        font-size: 13px;
        color: #6A6A6A;
        line-height: 23px;
        padding-left: 40px;
    }


    .project-one {
        position: relative;
    }

    .project-cover-image {
        width: 320px;
        height: auto;
        left: 0;
        position: relative;
        padding: 20px 0 40px 0;
    }

    .project-one-image {
        width: 320px;
        height: auto;
        left: 0;
        position: relative;
        padding: 20px 0 40px 0;
    }

    .project-two-image {
        width: 310px;
        height: auto;
        margin: auto;
        position: relative;
        padding-top: 50px;
    }

    .project-three-image {
        width: 320px;
        height: auto;
        left: 9.5%;
        top: 23%;
    }

    .project-four-image {
        width: 215px;
        height: auto;
        left: 18%;
        top: 30%;
    }

    .project-five-image {
        width: 310px;
        height: auto;
        left: 5%;
        top: 35%;

    }

    .indent-cover1 {
        margin-left: 0px;
    }
    .indent-cover2 {
        margin-left: 0px;
    }

    .indent-flipp1 {
        margin-left: 0px;
    }

    .growth-title {
        margin-left: 0px;
    }


    .dynamic-indent {
        margin-left: 0;
    }

    .project-info .cta {
        margin-left: 105px;
        margin-top: 235px;
        padding: 10px 22px;
        height: 45px;
/*      margin-left: 170px;
        margin-top: 15px;
        padding: 10px 22px;*/
    }


    .mobile-nav-link {
        display: inline;
        float: left;
        position: absolute;
        right: 10px;
        font-size:11px;
    }

    .folio-header {
        height: 70px;
        background: #fff;
        position: fixed;
        z-index: 12;
    }

    .header {
        height: 460px;
        background-position: center;
        background-size: auto 100%;
    }

    .hundred {
        width:100%;
    }

    .folio-shot1 {
        float: none; 
        width: 90%;
    }

    .folio-shot2 {
        float: none;
        width: 100%;
        padding-top: 0;
    }

/* ======= Work pages ======= */




    #intro {
        width: 75%;
        padding: 80px 0 50px 0;
    }

    .hero-box {
        padding: 35px;
        position: relative;
        top:0;
        width: 100%;
        height: auto;
        left: 0;
    }

    .work-hero {
        display: inline-block;
    }

    .work-hero-img, .work-small-img {
        margin-left: 0px;
        width: 100%;
        height: auto;
    }

    #work, #work2 {
        width:90%;
        margin:0 auto;
    }

    .quote {
        padding: 0 30px;
    }

    #dribbble {
        width:90%;
        margin:0 auto;
        margin-top: 40px;
    }

    #work-box1, #work-box2 {
        padding: 35px;
        position: relative;
        width: 100%;
        height: auto;
        top:0;
        left:0;
    }

    .shot {
        width: 48%;
        padding: 5px;
    }

    /* folio */
/*    .folio-hero-wrap {
        top: 90px;
    }*/

    .logos-img {
        width:90%;
        height:auto;
    }

    .folio-hero-wrap {
        top: 120px;
        width: 100%;
    }



/*    .folio-hero-title {
        position: absolute;
        top: -20px;
        float: left;
        left: 30px;
        padding-top: 20px;
        width: 280;
    }*/

    .folio-hero-title {
        left: 0;
        width: 100%;
    }

    .folio-hero-title h1 {

    }
    .folio-hero-title .flipp2 {
        margin-left: 15px;
    }
    .folio-hero-title .platform2, .folio-hero-title .growth2, .folio-hero-title .content2{
        margin-left: 0px;
    }
    .folio-hero-photo {
        width: 320px;
        height: auto;
        top: 300px;
        position: relative;
    }
    .folio-hero-flipp1, .folio-hero-platform1, .folio-hero-growth1 {
        width: 320px;
    }

    .folio-hero-content1 {
        width: 230px;
    }

    .folio-hero-wrap .flipp1 {
        top: 150px;
        left: 0px;
        text-align: center;
    }

    .folio-hero-wrap .platform1 {
        top: 100px;
        left: 0px;
        text-align: center;
    }

    .folio-hero-wrap .growth1 {
        top: 100px;
        left: 0px;
        text-align: center;
    }

    .folio-hero-wrap .content1 {
        top: 120px;
        left: 85px;
    }

    .folio-hero-blurb {
        font-size: 10px;
        line-height: 18px;
        margin: 210px 10px 20px 10px;
        width: 90%;
    }

    .platform-blurb {
        margin: 250px 0px 20px 10px;
    }

    #folio {
        width: 75%;
        padding: 0px 0 50px 0;
    }

    .folio-blurb {
        padding: 40px 0 40px 0;
    }
    .folio-fullimg {
        width: 85%;
        padding: 0;
    }
    .folio-img {
        width:100%;
        margin: 0 0 30px 0;
    }
    .folio-img .img {
        width: 100%;
    }
    .project-name{
        width: 100%;
        height: auto;
        position: relative;
        padding-right: 0;
    }
    .role {
        width: 100%;
        height: auto;
        position: relative;
        padding: 50px 0;
        margin-left: 0px;
    }

    .next-project, .prev {
        line-height: 130px;
        font-size: 110px;
        margin-bottom: 50px;
        width:100%;
    }

    .prev-text {
        text-align: center;
        right: 50%;
    }

    .next-text {
        text-align: center;
        left:30%;
    }



    .mobile-social {
        display:inline;
        text-align: center;
        padding-top: 10;
    }

    #caro-arrows .pre:hover {
        transform: none;
        transition: none;

    }
    #caro-arrows .nxt:hover {
        transform: none;
        transition: none;
    }

    .cover-title {
        margin-bottom: 0px;
        padding-top: 120px;
    }
    .cover-drib {
        display:none;
    }
    .cover-ill-1 {
        width: 100%;
        float: none;
        display: block;
        padding: 50px;
    }
    .cover-ill {
        width: 100%;
        float: left;
        display: inline-block;
        padding: 50px;
    }
}

/* #Mobile (Landscape)
================================================================================================================================================== */

/* Note: Design for a width of 480px */

@media only screen and (min-width: 448px) and (max-width: 767px) {

    .main-container {
        width: 95%;
        left: 0%;
        top: 3%;
    }


    .text-cover img, .text-cover2 img {
        width: 40px;
    }

    .text-cover {
        left: 275px;
    }

    .text-cover2 {
        left: 330px;
    }

    .project-img-cover {
        top: -40px;
    }

    .project-img-cover img {
        width: 280px;
    }

    .project-img-cover2 img, .project-img-cover img, .project-img-flipp img, .project-img-platform img {
        width: 350px;
    }

    .text-moregidge {
        left: 290px;
    }

    .text-moregidge img {
        width: 40px;
    }

    .project-img-moregidge img {
        width: 80%;
        left: -10px;
    }


    .color-about1 {
        font-size: 65px;
        line-height: 50px;
    }
    .indent-about2 {
        margin-left: 50px;
    }


    .project-info p {
    }

    .project-info {
        position: relative;
        padding-top:0;
    }

    .project-one-image {
        width: 50%;
        height: auto;
        left: 0;
    }


    .extra-left {
        left: 22%;
    }

    .project-info .cta {
        margin-left: 0;
        margin-top: 0;
        padding: 10px 22px;
        height: 45px;
        width: auto;
        top: 150px;
        left: 60%;
        position: absolute;
    }

    .folio-hero-wrap {
        top: 150px;
    }
    .folio-hero-photo {
        width: 95%;
        height: auto;
        top: 0px;
        position: relative;
    }
    .folio-header {
        /*height: 720px;*/
    }
    .folio-hero-photo {
        width: 480px;
        height: auto;
    }
    .folio-hero-wrap .flipp1 {
        top: 120px;
    }
    .folio-hero-flipp1 {
        width: 450;
    }
    .folio-hero-title {
        position: relative;
        width: 100%;
        float: none;
        padding-top: 20px;
        text-align: center;
    }

    .folio-hero-title .flipp2 {
        margin-left: 0;
    }

    .folio-hero-blurb {
        font-size: 12px;
        line-height: 20px;
        margin: 300px 0px 0px 0px;
        width: 100%;
    }
    #folio {
        width: 75%;
        padding: 0;
    }
    .folio-fullimg {
        width: 85%;
        padding: 0;
    }
    .folio-img {
        width:100%;
        margin: 0 0 30px 0;
    }
    .folio-blurb {
        width: 75%;
    }
    .role {
        margin-left:0;
    }
    .prev-text {
        right: 50%;
    }
    .next-text {
        left:50%;
    }

    .folio-shot-animate {
        width: 28%;
    }

    .folio-shot2 {
        padding-top: 60px;
        float: right;
        width: 70%;
    }
}