/*  collapse sign in form labels */

@media (max-width: 1880px) {
    .login label {
        display: block;
        text-align: left;
        padding-right: 10px;
    }
}

/*  adjust down hero text */

@media (max-width: 1400px) {
    #hero h1 {
        font-size: 24px;
        line-height: 28px;
        color: #ffffff;
        position: absolute;
        margin: 0;
        bottom: 10%;
        top: 10%;
        left: 20px;
        padding: 15px;
        width: 22%;
        text-align: left;
        background: rgba(31, 68, 119, 0.8);
    }
}

/*  adjust header phrase down in width */

@media (max-width: 1500px) {
    .motto,
    #motto {
        width: 150px;
        top: 35px;
        font-size: 10px;
        padding-bottom: 4px;
    }

    .login .bttn,
    .login .cncl {
        font-size: 14px;
        /*width: 150px;*/
        margin-top: 15px;
        margin-right: 20px;
        margin-left: 20px;
        padding: 6px 24px 6px 24px;
    }
}

/*  styles for smaller screens than 1270px */

/*  adjust special for cost-table */

@media (max-width: 1270px) {
    .half {
        width: 100%;
        float: none;
        margin: 10px;
    }

    .cost-table {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .theater-mode {
        height: 720px;
        width: 100%;
    }
    #wrapper,
    .wrapper {
        width: 100%;
    }

    #hero h1 {
        font-size: 16px;
        line-height: 18px;
        bottom: 10%;
        top: 10%;
        left: 20px;
        padding: 15px;
        width: 18%;
    }

    .logo-wide-sports a h1,
    .logo-wide-sports h1 {
        font-size: 24px;
        line-height: 24px;
        margin-bottom: 2px;
    }

    .logo-wide-sports a p,
    .logo-wide-sports p {
        font-size: 10px;
        line-height: 12px;
        margin-top: 0;
    }

    .goto-logon-text {
        display: block;
    }
    /* styling to override general split when < 1200px used on login form*/
    .general.split {
        width: 480px;
        padding-left: 20%;
        padding-right: 25%;
    }

    #header,
    .header {
        padding-bottom: 0px;
    }

    /* expanding logo box */
    #logo-wide {
        float: none;
        width: calc(95% - 100px);
        margin-top: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        margin-left: 30px;
        padding-right: 100px;
        overflow: hidden;
        background-image: url(/images/chen-half.png), linear-gradient(to right, white, cyan);
        background-size: contain;
        background-position: right;
        background-repeat: no-repeat;
    }
    /* expanding logo box SOFTWARE */
    .logo-wide-software {
        float: none;
        width: calc(100% - 30px);
        margin-top: 10px;
        margin-right: 10px;
        margin-bottom: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left: 12px;
        padding-top: 6px;
        padding-bottom: 2px;
        overflow: hidden;
        background-image: url(/images/bulb-icon.png), linear-gradient(to right, white, #b89bc8);
        background-size: contain;
        background-position: right;
        background-repeat: no-repeat;
    }

    .logo-wide-software a h1,
    .logo-wide-software h1 {
        text-decoration: none;
        color: #5F327A;
        font-style: normal;
        font-weight: normal;
        font-size: 30px;
        line-height: 32px;
        margin-bottom: 0;
        margin-top: 0;
        margin-right: 10px;
        float: left;
        clear: none;
    }

    .logo-wide-software a p,
    .logo-wide-software p {
        text-decoration: none;
        color: #000000;
        font-weight: bold;
        font-size: 12px;
        line-height: 14px;
        margin-top: 4px;
        margin-bottom: 4px;
        margin-left: 0;
        float: left;
        clear: left;
    }

    /* expanding logo box CG */
    .logo-wide-cg {
        float: none;
        width: calc(100% - 30px);
        margin-top: 10px;
        margin-right: 10px;
        margin-bottom: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left: 12px;
        padding-top: 6px;
        padding-bottom: 2px;
        overflow: hidden;
        background-image: url(/images/bulb-icon.png), linear-gradient(to right, white, #1d59a5);
        background-size: contain;
        background-position: right;
        background-repeat: no-repeat;
    }

    .logo-wide-cg a h1,
    .logo-wide-cg h1 {
        text-decoration: none;
        color: #1466a2;
        font-style: normal;
        font-weight: normal;
        font-size: 30px;
        line-height: 32px;
        margin-bottom: 0;
        margin-top: 0;
        margin-right: 10px;
        float: left;
        clear: none;
    }

    .logo-wide-cg a p,
    .logo-wide-cg p {
        text-decoration: none;
        color: #000000;
        font-weight: bold;
        font-size: 12px;
        line-height: 14px;
        margin-top: 4px;
        margin-bottom: 4px;
        margin-left: 0;
        float: left;
        clear: left;
    }

    /* small logo in button box */
    #button-logo {
        clear: none;
        float: left;
        margin-top: 0;
        margin-left: 0;
    }
    /* LARGE signup button  */
    #main-content .big-button:link,
    .main-content .big-button:link {
        display: block;
        margin-top: 10px;
        margin-right: auto;
        margin-left: 0;
    }
    /* sets up the grid for boxes */
    .testimonial {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 1em;
    }

    /* colors boxes in grid light gray */
    .testimonial-content {
        background-color: #eeeeee;
    }

    /* styles the paragraphs in the grid */
    .testimonial-content p {
        padding: 0 20px 10px 20px;
        font-size: 20px;
        line-height: 22px;
        text-align: left;
    }
    /* these two tweak the margin so name is closer to text */
    .testimonial-content p:nth-child(1) {
        margin-bottom: 0;
    }

    .testimonial-content p:nth-child(2) {
        margin-top: 0;
    }
    /* special one-off; could be done as in-line */
    .cost-table {
        margin-top: 20px;
        width: 100%;
        float: none;
    }
    /* lets half be full width for small screens */
    .half {
        width: 90%;
        float: none;
    }

    /* style login fields */
    .login .inpt {
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 5px;
        font-size: 16px;
        display: block;
        margin-left: 0; 
    }

    .login span {
        font-size: 16px;
        font-weight: normal;
    }

    .login label {
        font-size: 14px;
        display: block;
        text-align: left;
        padding-right: 0;
        margin-left: 0;
    }

    /* centers the copyright under other links  */
    #copyright {
        padding-left: 10px;
    }
}

/* Keeps login-sign buttons from stacking in narrow screen   */

@media (max-width: 1080px) {
    .login .bttn {
        padding: 6px 6px 6px 6px;
        margin-right: 5px;
    }
}