/* FONT COLORS */

.text-blue {
    color: #006699;
}


/* SPACES */

.onethird {
    width: 33.3333%;
}

.twothirds {
    width: 66.6666%;
}

.five {
    width: 5%;
}

.ten {
    width: 10%;
}

.fifteen {
    width: 15%;
}

.twenty {
    width: 20%;
}

.twentytwo {
    width: 22%;
}

.twentyfour {
    width: 24%;
}

.twentyfive {
    width: 25%;
}

.thirty {
    width: 30%;
}

.thirtythree {
    width: 33.3%;
}

.thirtyfive {
    width: 35%;
}

.forty {
    width: 40%;
}

.fortyfive {
    width: 45%;
}

.fifty {
    width: 50%;
}

.fiftyfive {
    width: 55%;
}

.sixty {
    width: 60%;
}

.sixtyfive {
    width: 65%;
}

.seventy {
    width: 70%;
}

.seventyfive {
    width: 75%;
}

.eighty {
    width: 80%;
}

.eightyfive {
    width: 85%;
}

.ninety {
    width: 90%;
}

.ninetyfive {
    width: 95%;
}

.onehundred {
    width: 100%;
}

.full {
    width: 100%;
    height: 100%;
}


/* HELPERS */

.row {
    margin: 0;
}

.hidden {
    display: none;
}

.fl,
.left {
    float: left;
}

.fr,
.right {
    float: right;
}

.block-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.clear {
    clear: both;
}

.no-wrap {
    white-space: nowrap;
}

.flexbox {
    display: flex;
}
.flex-col { flex-direction: column; }
.flex-colrev { flex-direction: column-reverse; }
.flex-row { flex-direction: row; }
.flex-rowrev { flex-direction: row-reverse; }

.ai-center {
    align-items: center;
}

.jc-center {
    justify-content: center;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.allcaps {
    text-transform: uppercase;
}

.clickable {
    cursor: pointer;
}

.m0 {
    margin: 0 !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mr1 {
    margin-right: 1em;
}

.li-align {
    margin-left: 20px;
}

* {
    margin: 0;
    padding: 0;
    outline: none;
    /*font-size: 32px;*/
}

a,
a:hover {
    text-decoration: none;
    color: white;
}

select,
input {
    height: 50px;
    font-size: 16px;
    padding: 5px;
    background-color: transparent;
    color: white;
    border: 1px solid white;
}

option {
    color: black;
    font-size: 16px;
}

select:focus,
input:focus {
    box-shadow: 0 0 2px 1px white;
}

.desktop-only {
    display: none;
}

.mobile-only {
    display: block;
}

.btn {
    text-decoration: none;
    font-size: 18px;
    padding: 20px 60px;
}

.btn-disabled {
    background-color: gray !important;
    cursor: default !important;
}

.btn-small {
    padding: 10px 30px;
}

.btn-secondary {
    background-color: transparent;
    border-color: transparent;
    display: block;
    margin-top: 10px;
}

.btn-secondary:hover {
    background-color: transparent;
}

.error-div {
    height: 20px;
}

.error {
    color: red;
    font-size: 16px !important;
}

.error-div .error {
    display: none;
}

.inner {
    height: 100vh;
}

.header {
    padding: 20px;
}

.header .logo {
    display: block;
    margin: auto;
    height: 30px;
}

.header .faq {
    cursor: pointer;
    position: absolute;
    top: 26px;
    right: 5%;
    font-size: 18px;
    line-height: 18px;
}

.modelholder h2 {
    font-size: 18px;
}

.modelholder h3,
.modelholder span,
.modelinner p,
.modelinner a {
    font-size: 16px;
}

.modelinner .section p {
    font-size: 12px;
    width: 95%;
}

.modelinner .section .link {
    font-size: 12px;
}

#country-code {
    width: 50%;
}

#phone {
    width: 45%;
    margin-left: 1%;
}

.codeBox {
    text-transform: uppercase;
    text-align: center;
    width: 45px;
}

.accordion {
    width: 90%;
    max-height: 90%;
    overflow: scroll;
}

.accordion .section {
    text-align: left;
    cursor: pointer;
}

.accordion hr {
    margin: 0.5rem 0;
}

.early-page {
    margin: 0 auto;
}

.early-page {
    min-height: calc(100% - 172px);
    min-height: -moz-calc(100% - 172px);
    min-height: -webkit-calc(100% - 172px);
}

.timer {
    padding: 50px;
    background-size: auto 90%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: black;
}

.timer h1 {
    text-align: center;
}

#timer p,
#timer li {
    font-size: 22px;
}

#countdown-timer h1 {
    font-size: 28px;
}

#passed h1,
.message h1 {
    text-align: center;
    font-size: 36px;
    margin-top: 35%;
    margin-bottom: 30px;
}

#timer #time {
    margin-top: 0;
    font-size: 56px;
}

.message {
    text-align: center;
    margin: 50px 5% 0 5%;
}

.message h1 {
    margin: 0;
}

.message p {
    font-size: 18px;
}

.message {
    height: calc(100% - 200px);
    height: -moz-calc(100% - 200);
    height: -webkit-calc(100% - 200px);
}

.message-columns {
    height: 100%;
}

.message-columns .column-right {
    border-left: none;
    padding-top: 20px;
}

.form {
    margin: 5%;
    min-height: 100vh;
}

.form input {
    width: 100%;
}

.movie-details {
    padding: 20px;
}

.movie-details h2 {
    font-size: 28px;
}

.movie-details p,
.movie-details span,
.morelink {
    font-size: 18px;
    margin-bottom: 10px;
}

.rating {
    font-size: 18px;
    border-style: solid;
    border-width: 1px;
    padding: 1px 10px;
}

.movie-poster {
    width: 100%;
    height: auto;
    margin: 20px 0;
}

.video {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 172px);
    width: 100%;
}

.video-inner {
    border: 1px solid #222;
}

.youtube {
    min-height: calc(100vh - 400px);
    width: 100%;
}

.footer {
    padding: 20px;
}

.footer * {
    font-size: 12px;
}


/* desktop */

@media all and (min-width: 992px) {
    /* * {
        font-size: 14px;
    }*/
    select,
    input {
        font-size: 18px;
    }
    .desktop-only {
        display: block;
    }
    .mobile-only {
        display: none;
    }
    .btn-secondary {
        font-size: 18px !important;
    }
    .error-div {
        height: 30px;
    }
    .header {
        padding: 20px;
    }
    .header .logo {
        height: 50px;
    }
    .header .faq {
        top: 31px;
        right: 10%;
        font-size: 28px;
        line-height: 28px;
    }
    .header .faq:hover {
        text-decoration: underline;
    }
    .modelholder h2 {
        font-size: 30px;
    }
    .modelholder h3,
    .modelholder span,
    .modelinner p,
    .modelinner a {
        font-size: 22px;
    }
    .modelinner p.small {
        font-size: 16px !important;
    }
    .modelinner .section p {
        font-size: 16px;
        width: 95%;
    }
    .modelinner .section .link {
        font-size: 16px;
    }
    #country-code {
        width: 43.3%;
    }
    #phone {
        width: 55%;
        margin-left: 1%;
    }
    .codeBox {
        width: 10%;
        height: 70px;
        margin: 0 5px;
    }
    .accordion .section {
        padding: 10px 0;
    }
    .early-page {
        width: 80%;
    }
    #timer p,
    #timer li {
        font-size: 18px;
    }
    #countdown-timer h1 {
        font-size: 2.5rem;
    }
    #passed h1 {
        margin-top: 150px;
        margin-bottom: 50px;
    }
    #timer #time {
        font-size: 56px;
    }
    .message {
        margin: 0 auto;
        margin-top: 100px;
        width: 75%
    }
    .message p {
        margin: 1rem 15%;
    }
    .message {
        height: calc(100% - 272px);
        height: -moz-calc(100% - 272px);
        height: -webkit-calc(100% - 272px);
    }
    .message-columns .column-right {
        border-left: solid 1px white;
        padding-top: 0;
    }
    .form-outer {
        height: calc(100% - 223px);
        height: -moz-calc(100% - 223px);
        height: -webkit-calc(100% - 223px);
        min-height: 750px;
    }
    .form {
        margin: 50px 25%;
        min-height: 0;
    }
    .movie-details {
        padding: 20px 0;
    }
    .movie-details h2 {
        font-size: 3rem;
    }
    .movie-details p,
    .movie-details span,
    .morelink,
    .rating {
        font-size: 1.2rem;
    }
}