/* Takeover Game General */

@media screen {
    @font-face {
        font-family: digital;
        src: url('../fonts/digital.ttf');
    }
    @font-face {
        font-family: HelveticaNeue;
        src: url('../fonts/HelveticaNeue.ttf');
    }
    @font-face {
        font-family: HelveticaNeueLight;
        src: url('../fonts/HelveticaNeueLight.ttf');
    }
    @font-face {
        font-family: HelveticaNeueMedium;
        src: url('../fonts/HelveticaNeueMedium.ttf');
    }
    @font-face {
        font-family: HelveticaNeueBold;
        src: url('../fonts/HelveticaNeueBold.ttf');
    }
    @font-face {
        font-family: HelveticaNeueCondensedBlack;
        src: url('../fonts/HelveticaNeueCondensedBlack.ttf');
    }
    body {
        padding: 0;
        margin: 0;
        background: #003A5D;
        position: relative;
    }
    .narrow {
        max-width: 60rem;
    }
    .lh-normal {
        line-height: 1;
    }
    .white {
        color: white;
    }
    .italic {
        font-style: italic;
    }

    .faded-white {
        background-color: rgba(255, 255, 255, 0.75);
    }
     .standard-promo {
        margin-bottom: 1.4em;
        margin-top: 1.4em;
    }
}

/*Takeover Game Header */

@media screen {
    #header {
        background-color: #003A5D;
    }
    #contact-bar {
        width: 100%;
        height: 1em;
    }
    #sky {
        position: relative;
        width: 100%;
        background: linear-gradient(to right, #11aee1, #106784);
        /*padding-bottom: 5em;*/
        clear: both;
    }
    #helicopter-left {
        position: absolute;
        width: 5em;
        left: 1em;
        bottom: 5em;
    }
    #helicopter-right {
        position: absolute;
        width: 8em;
        right: 0em;
        top: 0em;
    }
    #logo {
        position: relative;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
    }
    #logo > img {
        width: 45%;
        padding: 1em;
    }
    #tagline {
        position: relative;
        text-align: center;
        font-family: 1em HelveticaNeueBold, "Helvetica Neue Bold", "Helvetica Neue", Helvetica, sans-serif;
        text-transform: capitalize;
        color: #FFFFFF;
        padding-bottom: 1em;
    }
    #menu {
        background-color: white;
    }
    ul {
        margin-left: 0 !important;
    }

    .menu-button {
        padding: 0.75em;
        display: inline-block;
        color: #0a0a0a;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none !important;
    }

    #bar {
        padding-top: 4em;
        margin-bottom: -2em;
        border-bottom: 0.25em solid rgba(255, 255, 255, 0.85);
    }

    #desk {
        position: relative;
        width: 90%;
        margin: 0 auto;
        /*margin-top: -4em;*/
        /*margin-bottom: -2em;*/
        height: 6em;
        border: 0.25em solid rgba(255, 255, 255, 0.85);
        z-index: 20;
        background: linear-gradient(to right, #00a8e1, #00567c);
    }
    #desk .top {
        position: absolute;
        background: linear-gradient(to right, #60b3d6, #3888a3);
        top: 0;
        width: 100%;
        height: 5.25em;
    }
    #desk .bottom {
        position: absolute;
        background: linear-gradient(to right, #b9dbed, #a7bfcf);
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    .clock-container {
        background: linear-gradient(to right, #11aee1, #106784);
        position: relative;
        height: 100%;
        max-width: none;
    }
    .clock {
        display: inline-flex;
        padding-top: 0.7em;
    }
    .clock-left {
        display: inline-block;
        width: 10px;
        vertical-align: top;
    }
    .clock-centre {
        display: inline-block;
        background-image: url('../img/TickerFramePart2.png');
        background-size: 10px 31px;
        background-repeat: repeat-x;
        image-rendering: -webkit-optimize-contrast;
    }
    .clock-text {
        font: 1em digital;
        color: #CF0A2C;
        padding-left: 0.25em;
        padding-right: 0.25em;
        padding-top: 0.48em;
    }
    .clock-right {
        display: inline-block;
        width: 10px;
        height: inherit;
    }
    .clock-back {
        position: relative;
        margin-left: -2.53em;
        margin-right: 0.25em;
    }
    .clock-ghost {
        font: 1em digital;
        color: rgba(207, 10, 44, 0.25);
        padding-top: 0.5em;
    }
    .clock-location {
        display: inline-block;
        text-align: center;
        width: 100%;
        font: 0.5em HelveticaNeueBold;
        color: #FFFFFF;
        padding-top: 2em;
    }


    /*#about {
        border-bottom: 6px solid white;
        padding-bottom: 1em;
    }*/
}

/* Medium */

@media screen and (min-width: 40.063em) {
    #logo {
        width: 80%;
    }
    #helicopter-left {
        position: absolute;
        width: 10em;
        left: 2em;
        bottom: 7em;
    }
    #helicopter-right {
        position: absolute;
        width: 12em;
        right: 1em;
        top: 3em;
    }
    #sky {
        /*padding-bottom: 7em;*/
    }
    #tagline {
        font-size: 1.5em;
        /*margin-top: -0.7em;*/
    }
    #bar {
        border-bottom: 0.5em solid rgba(255, 255, 255, 0.85);
    }

    #desk {
        /*margin-top: -6em;*/
        /*margin-bottom: -4em;*/
        border: 0.5em solid rgba(255, 255, 255, 0.85);
        height: 10em;
    }
    #desk .top {
        /*height: 5.5em;*/
    }
    #desk .bottom {
        /*height: 3.5em;*/
    }
    .clock-location {
        padding-top: 0.8em;
    }
    .clock-container {} .clock {} .clock-left {
        width: 20px;
    }
    .clock-centre {
        background-size: 10px 61px;
    }
    .clock-text {
        font: 1.6em digital;
        padding-top: 0.7em;
    }
    .clock-right {
        width: 20px;
    }
    .clock-back {
        margin-left: -4.45em;
    }
    .clock-ghost {
        font: 1.6em digital;
        padding-left: 0.25em;
        padding-top: 0.7em;
    }
    .clock-location {
        font: 1.2em HelveticaNeueBold;
    }

    .asterix {
        vertical-align: 1.4em;
    }

    .pandp {
        padding-top: 0.5em;
        font-size: 0.7em;
    }
}

/* Large */

@media screen and (min-width: 64.063em) {
    #logo {
        width: 60%;
    }
    #helicopter-left {
        position: absolute;
        width: 15em;
        left: 2em;
        bottom: 7em;
    }
    #tagline {
        font-size: 2em;
        padding-bottom: 1em;
        /*margin-top: -0.5em;*/
    }
    #sky {
        /*padding-bottom: 11em;*/
    }
    #desk {
        width: 70%;
        height: 12em;
        /*margin-top: -8.5em;*/
        /*margin-bottom: -3.5em;*/
    }
    #desk .top {
        /*height: 8em;*/
    }
    #desk .bottom {
        /*height: 3em;*/
    }
    .clock-container {} .clock {
        padding-top: 1.3em;
    }
    .clock-left {
        width: 25px;
    }
    .clock-centre {
        background-size: 10px 76px;
    }
    .clock-text {
        font: 2em digital;
        padding-left: 0.25em;
        padding-right: 0.25em;
        padding-top: 0.7em;
        padding-bottom: 1em;
    }
    .clock-right {
        width: 25px;
    }
    .clock-back {
        margin-left: -5.6em;
        margin-right: 0.5em;
    }
    .clock-ghost {
        font: 2em digital;
        padding-left: 0.25em;
        padding-top: 0.7em;
    }
    .clock-location {
        padding-top: 1.2em;
        font: 1.5em HelveticaNeueBold;
    }
}

/* Takeover Game Content */

@media screen {
    #content {
                border-top: 6px solid white;

    }

     #skyline {
        background-image: url('../img/SkylineRepeat.png'), linear-gradient(to right, #40bee9, #40809d);
        background-repeat: repeat-x;
        background-position: bottom;
    }

    .promo-box {
        /*border: 6px solid white;*/
        padding: 1em;
    }

    #games {

        border-top: 6px solid white;
        border-bottom: 6px solid white;
        /*background-image: url('..img/SkylineRepeat.png'), linear-gradient(to right, #40bee9, #40809d);*/
        background-repeat: repeat-x;
        background-position: bottom;
        padding-top: 2em;
        padding-bottom: 2em;
    }
    #description {
        padding-top: 1em;
        margin-left: 6%;
        margin-right: 6%;
        text-align: center;
        padding-bottom: 1em;
    }
    #description h1 {
        color: #231F20;
        font-family: HelveticaNeueBold, "Helvetica Neue Condensed Black", "Helvetica Neue", Helvetica, sans-serif;
        font-size: 1.9em;
        line-height: 1em;
        text-shadow: 1px 1px 1px rgba(152, 151, 151, 0.77);
        padding-bottom: 0.2em;
    }
    #description p {
        color: #231F20;
        font-size: 1em;
        line-height: 1em;
        font-family: HelveticaNeueMedium, "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
    }
    #crash-image {
        margin-bottom: -15px;
    }
    #pre-launch {
        padding-top: 2em;
        background-color: #003A5D;
        text-align: center;
        margin-left: 6%;
        margin-right: 6%;
        margin-bottom: -1.4em;
    }
    #pre-launch h2 {
        color: #FFFFFF;
        font-family: HelveticaNeueCondensedBlack, "Helvetica Neue Condensed Black", "Helvetica Neue", Helvetica, sans-serif;
        font-size: 1.8em;
        line-height: 1em;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.77);
    }
    #pre-launch p {
        color: #FFFFFF;
        font-size: 1em;
        padding: 0.5em;
        font-family: HelveticaNeueMedium, "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
    }
    #register-box {
        background: linear-gradient(to right, #11aee1, #106784);
        /*background-color: #455b75;*/
        padding-top: 1.5em;
        padding-bottom: 0.5em;
        text-align: center;
    }
    #register-box p {
        color: #FFFFFF;
        font-size: 1em;
        padding: 0.5em;
        font-family: HelveticaNeueMedium, "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
    }
    #email-field {
        text-align: center;
        color: #231F20;
        font-family: HelveticaNeueBold, "Helvetica Neue Bold", "Helvetica Neue", Helvetica, sans-serif;
        border: 2px solid #231F20;
        height: 45px;
    }
    .email-error {
        /*box-shadow: inset 0 0 10px 20px #CF0A2C;*/
        border-color: #CF0A2C;
    }
    #email-button {
        width: 100%;
        color: #FFFFFF;
        background-color: #231F20;
        font-family: HelveticaNeueBold, "Helvetica Neue Bold", "Helvetica Neue", Helvetica, sans-serif;
        /*border: 2px solid #FFFFFF;*/
        height: 45px;
    }
    #submit-thanks {
        text-align: center;
        color: #FFFFFF;
        font-family: HelveticaNeueBold, "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
    }
    #story {
        border-top: 6px solid white;
        background-image: url('../img/story.jpg');
        background-size: cover;
    }

    /*#story h2 {
        text-align: center;
        font-family: HelveticaNeueMedium, "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
    }
*/
    #story h1 {
        text-align: center;
        color: #231F20;
        font-family: HelveticaNeueBold, "Helvetica Neue Condensed Black", "Helvetica Neue", Helvetica, sans-serif;
        font-size: 1.9em;
        line-height: 1em;
        text-shadow: 1px 1px 1px rgba(152, 151, 151, 0.77);
        padding-bottom: 0.2em;
    }

    #story p {
        color: #231F20;
        font-size: 1em;
        /*line-height: 1em;*/
        font-family: HelveticaNeueMedium, "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
    }

    #countdown {
        display: inline-flex;
        /*width: 50%;*/
        margin: 0 auto;
    }

    .countdown-left {
        display: inline-block;
        float: left;
        background-image: url('../img/TickerFramePart1.png');
        width: 30px;
        background-size: 30px;
        background-repeat: no-repeat;
    }

    .countdown-centre {
        display: inline-block;
        background-image: url('../img/TickerFramePart2.png');
        margin-left: 0;
        margin-right: 0;
        width: auto;
        height: 78px;
        padding: 0 0.5em;
        background-size: 10px 91px;
        background-repeat: repeat-x;
        image-rendering: -webkit-optimize-contrast;
    }

    .countdown-text {
        display: inline-flex;
        font: 2em digital;
        color: #CF0A2C;
        padding-top: 0.9em;
    }

    .countdown-right {
        display: inline-block;
        float: right;
        background-image: url('../img/TickerFramePart3.png');
        width: 30px;
        background-size: 30px;
        background-repeat: no-repeat;
    }


    #buy-now {
        background-color: #053c58;
        padding-bottom: 1em;
        padding-top: 1em;
                        border-top: 6px solid white;

    }

    #buy-box {
        /*border: 1px solid black;*/
        border: 6px solid white;
        background-color: #f3f2f3;
        margin-bottom: 1em;

    }

    .buy-amazon {
        width: 50%;
        padding: 0.5em;
    }

    #fn-buy-box {
        border: 6px solid white;
        background-color: #f3f2f3;
    }

    #fn-buy-box .fn-product-image {
        border: 3px solid black ;
        margin: 1em 1em 1em 0em ;
    }

    .product-title {
        font-family: HelveticaNeueBold, "Helvetica Neue Bold", "Helvetica Neue", Helvetica, sans-serif;
    }
    .product-subtitle {
        font-family: HelveticaNeueBold, "Helvetica Neue Bold", "Helvetica Neue", Helvetica, sans-serif;

    }
    .product-price {
        color: red;
        font-size: 3em;
        font-family: HelveticaNeueBold, "Helvetica Neue Bold", "Helvetica Neue", Helvetica, sans-serif;

    }
    .product-quantity-text {
        text-align: center;
        color: white;
        background-color: #231F20;
        font-family: HelveticaNeueBold, "Helvetica Neue Bold", "Helvetica Neue", Helvetica, sans-serif;
        height: 45px;
    }
    .product-quantity {
        text-align: center;
        color: #231F20;
        font-family: HelveticaNeueBold, "Helvetica Neue Bold", "Helvetica Neue", Helvetica, sans-serif;
        border: 2px solid #231F20;
        transition: all 0.4s linear;
        height: 45px;
    }
    .product-image {
        border: 3px solid black;
        margin: 1em 1em 1em 0em ;
    }
    #buy-button {
        width: 100%;
        color: #FFFFFF;
        /*background-color: #231F20;*/
        background-color: red;
        font-family: HelveticaNeueBold, "Helvetica Neue Bold", "Helvetica Neue", Helvetica, sans-serif;
        /* border: 2px solid #FFFFFF; */
        height: 50px;
    }

}

/* Medium */

@media screen and (min-width: 40.063em) {
    #description {
        /*padding-top: 5em;*/
    }
    #description h1 {
        font-size: 3em;
    }

#story h1 {
        font-size: 3em;
    }
    #story .row .columns {
        padding: 2em 1em;
    }

    #pre-launch h2 {
        font-size: 2.5em;
    }
    #crash-image {
        position: relative;
        padding-top: 1em;
        max-width: 45%;
        margin: 0 auto;
        margin-bottom: -30px;
    }
}

/* Large */

@media screen and (min-width: 64.063em) {
    #description {
        margin-left: 15%;
        margin-right: 15%;
    }
}

/* Takeover Game Footer */

@media screen {
    #footer {
        /*background-color: #231F20;*/
        position: relative;
    }
    #social {
        /*background-color: #003A5D;*/
        background-color: #231F20;
        text-align: center;

        padding: 1em;
    }
    #social .icon img {
        max-width: 3em;
        padding: 0 0.25em;
    }
    /*#social .icon:first-child {
        padding-right: 2em;
    }*/
    #random-bear {
        position: absolute;
        top: 0em;
        max-width: 5.75em;
        left: 10%;
    }
    #quotes {
        /*margin-top: -58px;
        margin-bottom: -42px;*/
        margin-top: -12px; 
        margin-bottom: -23px;
        height: 100px;
        width: 100%;
        overflow: hidden;
    }

    .text-bold {
        font-weight: bold;
    }
    #reviews {
        padding-top: 1em;
        background-color: #ffffff;
    }
    .review-title {
        text-align: center;
        padding: 0.5em;
    }
    .review-image {
        height: 50px;
        text-align: center;
    }
    .review-image-large {
        height: 75px !important; 
    }
    .review-image-larger {
        height: 90px !important; 
    }
    .speech {
        font-weight: bold;
        /*font-size: larger;*/
    }
    .tick {
        display: flex;
        /*margin-left: 4%;*/
        /*margin-right: 4%;*/
        /*width: 92%;*/
        width:100%;
        clear: both;
    }
    /*.tick-left {
        display: inline-block;
        float: left;
        background-image: url('/web/20180421213402im_/https://thetakeovergame.com/img/TickerFramePart1.png');
        width: 30px;
        background-size: 30px;
        background-repeat: no-repeat;
    }*/
    .tick-centre {
        display: inline-block;
        background-image: url('../img/TickerFramePart2.png');
        margin-left: 0;
        margin-right: 0;
        width: auto;
        height: 100px;
        /*background-size: 10px 91px;*/
        background-size: 100% 91%;
        background-repeat: repeat-x;
    }
    /*.tick-right {
        display: inline-block;
        float: right;
        background-image: url('/web/20180421213402im_/https://thetakeovergame.com/img/TickerFramePart3.png');
        width: 30px;
        background-size: 30px;
        background-repeat: no-repeat;
    }*/
    .tickercontainer {
        height: 122px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        vertical-align: bottom;
    }
    .tickercontainer .mask {
        position: relative;
        top: 24px;
        overflow: hidden;
    }
    ul.newsticker {
        -webkit-transition: all 0s linear;
        -moz-transition: all 0s linear;
        -o-transition: all 0s linear;
        transition: all 0s linear;
        position: relative;
        font: 3em digital;
        color: #CF0A2C;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    ul.newsticker li {
        float: left;
        height: 122px;
        margin: 0;
        vertical-align: middle;
        padding-right: 4em;
    }
    #terms {
        background-color: #231F20;
        text-align: center;
        padding: 1em;
        padding-left: 5%;
        padding-right: 5%;
    }
    #terms p {
        color: #FFFFFF;
        font-size: 0.7em;
        font-family: HelveticaNeueLight, "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
    }
    #copyright {
        background-color: #231F20;
        padding: 1em;
    }
    #copyright p {
        color: #FFFFFF;
        font-size: 0.7em;
        font-family: HelveticaNeueLight, "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
    }
    .text-small {
        color: white;
        font-size: 0.7em;
        font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
        margin: 0;
    }
}

@media screen and (min-width: 40.063em) {
    #random-bear {
        left: 20%;
        top: -1.6em;
        max-width: 7.75em;
    }
}