/*------------------------------------*\
#RESPONSIVE
\*------------------------------------*/

@media all and (max-width: 1400px) {
    .author .primaryContainer {
        background-position: -100px 0;
    }
}

@media all and (max-width: 1100px) {
    .author .primaryContainer {
        background-position: -150px 0;
    }
}

@media all and (max-width: 1200px) {
    .author .primaryContainer h2 {
        left: 52%;
    }

    .author .primaryContainer p {
        left: 52%;
        width: 55%;
    }
}

@media all and (max-width: 1000px) {
    .author .primaryContainer h2 {
        left: 0%;
    }

    .author .primaryContainer p {
        left: 0%;
        width: 100%;
        /*text-shadow: 5px 2px 12px rgba(0, 0, 0, 0.29);*/
    }
}

@media all and (max-width: 951px) {
    .secondaryContainer .col02 {
        padding-top: 0;
    }
}

@media all and (max-width: 800px) {

    .author .primaryContainer {
        background-position: -200px 0;
    }

    .primaryContainer p {
        width: 100%;
    }

    .secondaryContainer .content {
        padding: 0;
        width: 90%;
        margin: 0 5%;
    }

    .secondaryContainer .col {
        width: 100%;
        margin: 0;
    }

    .secondaryContainer .col01 {
        margin-bottom: 20px;
        text-align: center;
    }

    .secondaryContainer .col01 img,
    .secondaryContainer .col01 a {
        float: none;
        display: inline;
    }

    .footerContainer {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        z-index: 1000;
    }

    .footerContainer .col {
        width: 95%;
        width: -moz-calc(100% - 40px);
        width: -webkit-calc(100% - 40px);
        width: calc(100% - 40px);
        margin: 0 0 20px;
        padding: 0 20px;
    }

    .footerContainer nav {
        position: relative;
    }

    .footerContainer .col03 .btn {
        width: 95%;
        margin: 0 2.5% 10px;
    }

    .primaryContainer .btn {
        float: none;
        width: 95%;
        margin: 0 2.5% 10px;
    }

    .parallax .parallax__layer p {
        font: normal 17px/27px "adobe-garamond-pro", sans-serif;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
    }

    .buttons {
        position: absolute;
        top: 50%;
        width: 100%;
        margin: 0;
        padding: 25px 0 0;
        transform: translateY(-50%);
    }

    .buttons a {
        float: left;
        clear: both;
        width: 95%;
        margin: 0 2.5% 10px;
        padding: 16px 0;
    }

    .viewpoint .col {
        width: 100%;
    }

    .castingContent p {
        margin-bottom: 50px;
    }

    .characterPod {
        width: 950%;
        width: -moz-calc(100% - 40px);
        width: -webkit-calc(100% - 40px);
        width: calc(100% - 40px);
        margin: 0 auto 20px;
    }

    .characterPodListing {
        clear: both;
        margin-bottom: 30px;
        margin-right: 0;
        width: 98%;
        width: -moz-calc(100% - 38px);
        width: -webkit-calc(100% - 38px);
        width: calc(100% - 38px);
    }

    .submitBtn {
        width: 100%;
        padding: 14px 0;
    }
}



@media all and (max-width: 680px) {
    .primaryContainer {
        width: 95%;
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
        width: calc(100% - 90px);
        padding: 30px 45px 34px;
    }

    .primaryContainer .btn {
        width: 90%;
        margin: 0 5% 10px;
        padding: 16px 0;
    }

    .homeTxt3 {
        width: 90%;
        margin: 0 5%;
    }

    .author .primaryContainer {
        background-position: -300px 0;
    }

    .author .primaryContainer p {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
    }

    .viewpoint .col {
        width: 100%;
    }

    .castingContentContainer {
        padding: 65px 0;
    }

    .castingContentContainer .content {
        padding-top: 0;
    }

    .castingList .content {
        padding-top: 60px;
    }

    .intro h2,
    .castingList h2 {
        margin-bottom: 20px;
    }

    .castingContent p {
        margin-bottom: 20px;
    }

    .characterPod {
        width: 95%;
        width: -moz-calc(100% - 40px);
        width: -webkit-calc(100% - 40px);
        width: calc(100% - 40px);
        margin: 0 0 20px;
    }

    #readChapter1 {
        width: 90%;
        margin: 0 5%;
    }
}


@media all and (max-width: 600px) {
    .introContainer {
        width: 90%;
        padding-right: 5%;
        padding-left: 5%;
    }

    .characterPodContent {
        padding-top: 0;
    }

    .characterPodContent .col01 {
        width: 100%;
    }

    .casting .characterPodContent .col01 img {
        width: 25%;
        height: auto;
    }

    .casting .characterPodContent .col01 {
        margin-bottom: 10px;
    }

    .castingList .characterPodContent .col01 img {
        display: block;
        float: none;
        margin: 0 auto 10px;
    }

    .characterPodContent .col02 {
        width: 90%;
        margin: 0 5%;
    }
}



@media all and (max-width: 450px) {
    .primaryContainer {
        width: 95%;
        width: -moz-calc(100% - 40px);
        width: -webkit-calc(100% - 40px);
        width: calc(100% - 40px);
        padding: 30px 20px 34px;
    }

    .author .primaryContainer {
        padding-top: 40px;
        /*background-position: -800px 0;*/
    }
}




/* Portrait and Landscape */

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


    header h1 {
        font: 500 25px/25px "termina", sans-serif;
    }

    .homeTxt h2 {
        font: normal 62px/64px "adobe-garamond-pro", sans-serif;
    }

    .home .primaryContainer {
        background-size: auto 100%;
    }


    .home .primaryContainer .btn {
        width: 80%;
    }

    .story .parallax p {
        width: 80%;
        margin: 0 10%;
        font: normal 45px "adobe-garamond-pro", sans-serif;
    }


    .author .primaryContainer {
        /*background-position: -850px 0;*/
    }

    .primaryContainer p {
        font: normal 20px/25px "adobe-garamond-pro", sans-serif;
    }

    .buttons a {
        float: left;
        clear: both;
        width: 100%;
        margin-bottom: 20px;
        font: 600 14px/14px "adobe-garamond-pro", sans-serif;
    }

    .intro p {
        font: normal 26px/31px "adobe-garamond-pro", sans-serif;
    }

    .characterPodContent .col02 h3 {
        font: 600 27px/27px "adobe-garamond-pro", sans-serif;
    }

    .characterPodContent .col02 h4 {
        font: 500 16px/16px "termina", sans-serif;
    }

    .characterPodContent .col02 p {
        font: normal 26px/31px "adobe-garamond-pro", sans-serif;
    }

    .characterPodContent .col02 input {
        width: 350px;
        font: normal 30px/35px "adobe-garamond-pro", sans-serif;
    }

    .characterPodContent .choice {
        padding: 7px;
        color: #fff;
        font: normal 19px/19px "adobe-garamond-pro", sans-serif;
    }

    .submitBtn {
        font: 600 19px/19px "adobe-garamond-pro", sans-serif;
    }

    .parallax .parallax__layer p {
        font: normal 19px/31px "adobe-garamond-pro", sans-serif;
    }

    footer .col {
        width: 100% !important;
        padding: 0 0 15px;
    }

    #twitter li {
        font: normal 23px/25px "adobe-garamond-pro", sans-serif
    }

    .footerContainer .col02 p {
        font: normal 23px/25px "adobe-garamond-pro", sans-serif;
    }

    .footerContainer .col02 img {
        max-width: 200px;
    }
}


@media only screen and (min-device-width: 375px) and (max-device-width: 667px) {

    div,
    p,
    a,
    li {
        -webkit-text-size-adjust: none;
    }

    header h1 {
        font: 500 18px/18px "termina", sans-serif;
    }

    .homeTxt h2 {
        font: normal 28px "adobe-garamond-pro", sans-serif;
    }

    .author .primaryContainer {
        /*background-position: -628px 0;*/
    }

    .viewpoints .castingContent p {
        font: normal 18px/24px "adobe-garamond-pro", sans-serif;
    }

    .characterPodContent .choice {
        font: 600 13px/13px "adobe-garamond-pro", sans-serif;
        color: #4660d1;
    }

    .footerContainer nav {
        min-height: 290px;
    }

    .buttons a {
        width: 95%;
    }

    .footerContainer .col {
        width: 100%;
        padding: 0;
    }

    .footerContainer .col02 p {
        font: normal 17px/21px "adobe-garamond-pro", sans-serif;
    }

    .footerContainer .col03 .btn {
        display: block;
        width: 98%;
        margin: 0 auto 10px;
        padding-right: 0;
        padding-left: 0;
    }
}




/* VIEWPOINTS  PAGE */

@media all and (max-width: 1100px) {
    /* reset, stack */
    #time-travel {
        width: 100%;
        height: auto;
        min-height: 0;
 
    }
    /* reset, stack */
    .ttLayer,
    .ttLayer1,
    .ttLayer2,
    .ttLayer3,
    .ttLeft,
    .ttRight {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        width: 100%;
        height: auto;

        overflow: hidden;
        padding: 0;
        margin: 0;
    }

    /* now go back and style stuff... */
    .ttLayer2 {
        /* height is 600px - gets set in JS when layer becomes visible in JS */
    }
    .ttLayer3 {
        position: absolute;
        top: 0;
        left: 0;
        height: auto;
    }
    .ttLayer1 {
        background: transparent url(/lib/img/tt/earthscape.jpg) no-repeat 100% 100%;
    }

    .ttLayer3 {
        background: transparent url(/lib/img/tt/earthscape.jpg) no-repeat 50% 50%;
        background-size: cover;
    }
    .ttLayer1 .ttLeft,
    .ttLayer3 .ttLeft {
        padding-top: 50px;
    }
    .ttLayer1 .ttRight,
    .ttLayer3 .ttRight {
        padding-top: 50px;
    }
    .ttRight .ttFormPod {
        max-width: 100%;
        padding: 0 1em 50px 1em;
    }
    .ttRight .ttFormPod p.form-text {
        font-size: 24px;
        line-height: 30px;
    }
    .ttFormPod form#ttFormOne select[name='month'] {
        width: 100%;
    }
    .ttFormPod form#ttFormOne select[name='year'] {
        width: 100%;
        margin-left: 0;
    }
    .ttFormPod form#ttFormOne select {
        margin: 0 0 30px 0;
    }
    .ttFormPod form#ttFormOne .select-month-arrow {
        left: 90%;
        top: 13px;
    }
    .ttFormPod form#ttFormOne .select-year-arrow {
        left: 90%;
        top: 78px;
    }
    .ttFormPod form#ttFormOne .checkbox-container {
        width: 100%;
        top: 0;
    }
    .ttFormPod form#ttFormOne .checkbox-container input[type="checkbox"]:checked + label:before { 
        color: #fff;
    } 
    .ttFormPod form#ttFormOne .checkbox-container p.robot {
        font-size: 20px;
        line-height: 26px;
        top: 10px;
        position: relative;
    }
    .ttFormPod form#ttFormOne .submit-container {
        margin: 40px 0 0 0;
    }


    #carouselLayerOne,
    #carouselLayerThree,
    #carouselLayerThreeUpdated {
        overflow: visible;
        position: relative;
        width: 110%;
        height: 790px;
        /* do I need to make dynamic? auto and 100% don't work */
    }
    .carousel-container {
        top: 40px;
    }
    .ex-item {
        max-width: 300px;
    }
    .ex-item:after {
        /* make right arrow thingy smaller */
        border-width: 15px;
        margin-top: -15px;
    }
    /* form two */
    .ttFormPod form#ttFormTwo p.form-text {
        margin: 0;
        padding-bottom: 20px;
    }
    .ttFormPod form#ttFormTwo textarea,
    .ttFormPod form#ttFormTwo input {
        width: 100%;
    }
    .ttFormPod form#ttFormTwo .parsley-errors-list li {
        width: 100%;
    }
    .ttFormPod form#ttFormTwo input {
        margin-top: 20px;
    }
    .ttLayer.ttLayer2 {
        /*  height: 600px;*/
    }
}





@media all and (min-width: 600px) and (max-width: 1100px) {
    #carouselLayerOne,
    #carouselLayerThree,
    #carouselLayerThreeUpdated {
        width: 100%;
        height: 790px;
        float: none;
    }
    .ex-item {
        max-width: 500px;
    }
    .carousel-container {
        height: 790px;
        top: 0;
    }
    .ttRight .ttFormPod {
        max-width: 100%;
        padding: 0 2em 130px 2em;
    }
    .ttFormPod form#ttFormOne .select-month-arrow,
    .ttFormPod form#ttFormOne .select-year-arrow {
        left: 96%;
    }
    .ttFormPod form#ttFormOne .submit-container {
        margin: 30px 0px 40px 0;
        float: right;
    }
}



/* carousel .ex-item adjustments */

@media all and (min-width: 600px) and (max-width: 700px) {
    .ex-item {
        max-width: 450px;
    }
}

@media all and (min-width: 500px) and (max-width: 699px) {
    .ex-item {
        max-width: 400px;
    }
}

@media all and (min-width: 450px) and (max-width: 599px) {
    .ex-item {
        max-width: 360px;
    }
}

@media all and (min-width: 400px) and (max-width: 449px) {
    .ex-item {
        max-width: 270px;
    }
}


/* fix so super large screens don't see the white line in space end */

@media all and (min-width: 1500px) {
    #time-travel {
        max-height: 1150px;
    }
}



/* Ipad Pro 12.9 Portrait  - exception to the rule because this is basically a desktop situation but acts like a tablet...*/


/* https://goo.gl/SLqc37 for more info */

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
    #time-travel {
        width: 100%;
        height: 1100px;
    }
    .ttFormPod {
        max-width: 500px;
    }
}