html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    background-color: #000;
    font-family: serif;
}

a:focus,
input:focus {
    outline-color: #6e9c8b;
}

img {
    display: block;
}

.site-wrapper {
    width: 1366px;
    height: 1025px;
    margin: 30px auto;
    position: relative;
    background: url(http://thecrucibleonbroadway.com/images/static-bg.jpg) no-repeat center center;
    background-size: cover;
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

video {
    display: block;
}

.site-content {
    margin-left: 793px;
    text-align: center;
    width: 523px;
    position: relative;
    z-index: 20;
    padding-top: 103px;
}

.get-tickets {
    display: block;
    text-indent: -999em;
    width: 355px;
    height: 53px;
    margin: 18px auto 0;
    background: url(http://thecrucibleonbroadway.com/images/get-tickets.png) no-repeat;
    background-position: center top;
}

.get-tickets:hover {
    background-position: center bottom;
}

.group-tickets {
    display: block;
    text-indent: -999em;
    width: 356px;
    height: 10px;
    margin: 8px auto 0;
    background: url(http://thecrucibleonbroadway.com/images/group-tickets.png) no-repeat;
    background-position: center top;
}

.group-tickets:hover {
    background-position: center bottom;
}

.enter-email { margin-top: 33px; }

.email-form {
    margin: 10px 0 0 0;
    height: 33px;
}

.email {
    border: 0;
    background: url(http://thecrucibleonbroadway.com/images/email-field-bg.png) no-repeat;
    background-size: cover;
    width: 265px;
    height: 33px;
    text-transform: uppercase;
    padding: 0 10px;
    color: #000;
    font-family: sans-serif;
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
}

.submit {
    display: inline-block;
    vertical-align: middle;
    margin-left: 11px;
    text-indent: -999em;
    width: 79px;
    height: 33px;
    background: url(http://thecrucibleonbroadway.com/images/submit.png) no-repeat;
    background-position: center top;
    border: 0;
    cursor: pointer;
}

.submit:hover {
    background-position: center bottom;
}


.invalid {
    border: 1px solid #d80e18 !important;
}


.privacy {
    color: #6e9c8b;
    text-decoration: none;
    font-size: 10px;
    text-transform: uppercase;
    position: absolute;
    bottom: -20px;
    right: 5px;
}

.photo-credit {
    position: absolute;
    right: 18px;
    bottom: 36px;
    z-index: 100;
}

::-webkit-input-placeholder {
    font-family: sans-serif;
    font-size: 10px;
    color: #000;
}

:-moz-placeholder {
    font-family: sans-serif;
    font-size: 10px;
    color: #000;
}

::-moz-placeholder {
    font-family: sans-serif;
    font-size: 10px;
    color: #000;
}

:-ms-input-placeholder {
    font-family: sans-serif;
    font-size: 10px;
    color: #000;
}


/* ================================================================= mobile === */

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

    .mobile {
        position: relative;
        display: block;
        width: 100%;
    }

    .m-content {
        position: relative;
        width: 100%;
        display: block;
        padding-top: 177.86666667%;
    }

    .m-link {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .m-bg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-repeat: no-repeat;
        background-image: url(http://thecrucibleonbroadway.com/images/mobile-bg.jpg);
        background-size: 100% auto;
    }

    .m-cast {
        position: absolute;
        top: 3.14842579%;
        width: 79.06666667%;
        margin-left: 10.46666667%;
    }

    .m-tickets {
        position: absolute;
        bottom: 7.79610195%;
        width: 79.2%;
        margin-left: 10.4%;
    }


    .m-location {
        position: absolute;
        bottom: 1.27436282%;
        width: 71.86666667%;
        margin-left: 14.66666667%;
    }

    .m-cast img ,
    .m-tickets img,
    .m-location img
    {
        display: block;
        width: 100%;
        height: auto;
    }


    .m-email-form {
        height: 3.29835082%;
        width: 100%;
        position: absolute;
        bottom: 3.52323838%;
        overflow: hidden;
    }

    .m-email {
        float: left;
        position: relative;
        width: 61.73333333%;
        margin-left: 10.4%;
    }

    .m-email:before {
        content: '';
        display: block;
        padding-top: 9.50323974%;
    }

    .m-email input {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(http://thecrucibleonbroadway.com/images/email-field-bg.png) no-repeat center;
        background-size: cover;
        border: 0;
        padding: 0 10px;
        color: #626262;
        font-family: arial,helvetica,sans-serif;
        font-size: 12px;
        text-transform: uppercase;
    }

    .m-submit {
        float: left;
        position: relative;
        width: 14%;
        margin-left: 3.46666667%;
    }

    .m-submit:before {
        content: '';
        display: block;
        padding-top: 40.95238095%;
    }

    .m-submit input {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(http://thecrucibleonbroadway.com/images/mobile-submit.png) no-repeat center;
        background-size: 100% auto;
        font-size: 0/0 a;
        color: transparent;
        text-shadow: none;
        border: 0;
    }

}