body{ overflow: hidden;}
.container{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.form-header{ padding-bottom: 20px;}
.form-header p:nth-child(1){ font-size: 30px; padding-bottom: 10px; font-weight: bold;}
.form-header p:nth-child(2){ font-size: 18px;}

.form{ width: 600px; margin: auto; min-height: 550px;}
.form-item{ margin-bottom: 20px;}
.form input, .form textarea{ border: 2px solid #000; width: 100%; height: 46px; padding: 10px 10px; display: block; box-sizing: border-box; font-size: 16px; font-family: futurastd;}
.form textarea{ height: 120px;}
.form-item div.error{ font-size: 12px; color: #f31b1b; margin-top: 10px;}
.form input:focus, .form textarea:focus{  outline: 3px solid rgba(42, 184, 177, 0.3);}


.form-footer{ text-align: right;}
.green-btn {
    display: inline-block;
    background-color: var(--bg-green);
    padding: 0 20px;
    color: #000;
    font-size: 20px;
    border: none;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
}
.submit-btn:hover{ background-color: #000; color: var(--bg-green);}

/* success */
.success-popup{ display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0;}
.success-popup::before{ content: ''; position: absolute;  width: 100%; height: 100%; left: 0; top: 0; background-color: #FFF; z-index: 2;}
.popup-content{ position: relative; width: 100%; height: 100%; z-index: 3; text-align: center;  flex-direction: column; display: flex; justify-content: center; align-items: center;}
.popup-header{ font-size: 24px; padding-bottom: 40px;}

.submitting{ display: none;}
.submitting .loading{ display: inline-block; background-image: url(../images/icon-loading.svg); background-size: 18px 18px; background-repeat: no-repeat; padding-left: 20px;}

@media screen and (max-width: 640px) {
    .container{ display: block; width: auto; height: auto; padding: 100px 20px 20px 20px;}
    .form{ width: auto; min-height: 100px;}
    .form-header p:nth-child(1) {
        font-size: 20px;
    }
    .form-header p:nth-child(2) {
        font-size: 14px;
    }
    .green-btn {
        padding: 0 20px;
        font-size: 16px;
        height: 38px;
        line-height: 38px;
    }
    .popup-header {
        font-size: 16px;
        padding: 0 15px 40px 15px;
    }
    
}

@media screen and (max-width: 980px) and (orientation: landscape) {
    .form-header{ padding-top: 20px;}
    .form-header p:nth-child(1){ font-size: 18px; padding-bottom: 5px;}
    .form-header p:nth-child(2){ font-size: 14px;}
    .form{ min-height: 100px;}
    .form-item{ margin-bottom: 10px;}
    .form input, .form textarea {
        border: 1px solid #000;
        height: 30px;
        padding: 5px 10px;
        font-size: 12px;
    }
    .green-btn {
        padding: 0 15px;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
    }
}