﻿/*
* ----------------------------------------------------------------------------------------
* BANNERS
* ----------------------------------------------------------------------------------------
*/
@media only screen and (min-width: 1px) {
    .desktop--hero-banner {
        background-repeat: no-repeat;
        background-size: contain;
        height: 0;
        margin-top: -5px;
        padding-top: 44%;
        width: 100%;
    }

    .desktop--hero-banner-container h2 {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    .desktop--hero-banner {
        background-size: contain;
        background-repeat: no-repeat;
        height: 0;
        /*padding-top: 66.64%;*/
        padding-top: 36%;
        width: 100%;
    }

    .desktop--hero-banner-container h2 {
        display: none;
    }
}

/*
* ----------------------------------------------------------------------------------------
* CONTENT
* ----------------------------------------------------------------------------------------
*/

@media only screen and (min-width: 1px) {
    .form-container {
        margin-top: -3px;
        padding: 25px;
    }

    .header p {
        font-size: 14px;
        font-weight: 300;
    }

    .form-container p {
        font-size: 14px;
        font-weight: 300;
    }

    .form-container label {
        font-weight: 300;
    }

    .header {
        margin-bottom: 40px;
    }

    .header-title {
        color: #007078;
        font-weight: 400;
        line-height: 22px;
        text-transform: uppercase;
    }

    .maincat {
        border-bottom: 1px solid #D0D2D3;
        color: #007078;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 35px;
        padding-bottom: 10px;
        text-transform: uppercase;
        margin-top: 30px;
    }

    div.contact label:first-of-type {
        font-weight: 300;
    }

    .name-container {
        display: flex;
        flex-direction: column;        
    }

    .first-name, .last-name {
        display: block;
        /*width: 49.5%;*/
    }

    select[name="country"] {
        width: 100%;
        /*font-weight: 300;*/
    }
    
    .zip-form, .phone-form {
        display: block;        
    }

    .zip-form, .phone-form {
        width: 100%;       
    }    

    .contact {
        width: 100%;
    }

    .contact input {
        background: #FAFAFA;
        border: none;
        border-radius: 0;
        height: 30px;
        width: 100%;
    }

    .input-field {
        width: 100%;
        display: block;
        border: none;
        border-radius: 0;
        height: 30px;
    }

    .input-text-area {
        width: 100%;
        height: 125px;
        display: block;
    }

    .gray-background {
        background: #FAFAFA;
    }

    #cv {
        background: #FFFFFF;
        font-weight: 300;
    }

    .overview-intended-study {
        width: 100%;
    }

    .submit-to-industry-container {
        margin-top: 20px;
    }

    .radio-button-group {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    input[type="radio"] {
        display: inline-block;
    }

    .radio-button {
        margin: 10px 12px 10px 0;
    }

    /*.protocol {
        display: flex;
        flex-direction: row;
    }*/

    /*.protocol-left {
        width: 57%;
    }

    .protocol-right {
        width: 43%;
    }*/

    .protocol-label {
        width: 90%;
    }

    .protocol-checkbox-container {
        margin-bottom: 25px;
    }

    input[type="checkbox"] {
        margin-left: 10px;
    }

    .institution-approval-status-container {
        margin-bottom: 30px;
    }

    .support-type-label {
        width: 65px;
    }

    .text-area-item {
        margin-top: 20px;
    }

    .support_requested, .budget_for_review,
    .nih_id, .number_of_patients,
    .budget_company_support {
        display: none;
    }    

    .hidden-fields {
        margin: 20px 0 25px 0;
    }

    .catalog-link {
        font-weight: 600;
        font-size: 14px;
        text-decoration: underline !important;
        color: #007078;
    }

    .journal-submit-label {
        width: 100%;
    }

    .learn-more {
        color: #00AE41;
        display: block;
        font-size: 16px;
        font-weight: 700;
        margin-top: 20px;
        text-decoration: none !important;
        text-transform: uppercase;
    }

    .learn-more-btn {
        background: none;
        border: none;
        color: #00AE41;
        display: block;
        font-size: 16px;
        font-weight: 700;
        margin-top: 20px;
        text-align: left;
        text-decoration: none !important;
        text-transform: uppercase;
    }

}

@media only screen and (min-width: 768px) {
    .form-container {
        margin: 45px 0 60px;
        padding: 0 45px;        
    }

    .header p {
        font-size: 16px;
    }

    .maincat {
        border-bottom: 1px solid #D0D2D3;
        color: #007078;
        font-size: 22px;
        font-weight: 700;
        line-height: 30px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        text-transform: uppercase;
    }

    .name-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .first-name, .last-name {
        display: inline-block;
        width: 49.5%;
    }

    .contact {
        width: 50%;
    }

    .zip-phone-container {
        display: flex;
        justify-content: space-between;
    }

    .zip-form, .phone-form {
        display: inline-block;
    }

    .zip-form {
        width: 35.5%;
    }

    .phone-form {
        width: 63.5%;
    }

    .input-field {
        width: 50%;        
    }

    .journal-submit-label {
        width: 50%;
    }

    .protocol-label {
        width: 57%;
    }

    .input-text-area {        
        height: 100px;        
    }

    .radio-button {
        margin: 10px 20px 10px 0;
    }
    
}

@media only screen and (min-width: 992px) {
}

@media only screen and (min-width: 1200px) {
}

