:root {
    --contact-form-padding-top: 40px;
    --contact-form-font-size: 20px;
    --contact-form-phone-prefix-width: 72px;
    --contact-form-input-margin-top: 20px;
}

body {
    font-size: var(--contact-form-font-size);
}

section p {
    margin-bottom: 30px;
}

h1 {
    margin-top: 86px;
    margin-bottom: 40px;
}

h2, .h2 {
    margin-bottom: 32px;
}

section.bg-green {
    padding: 1px 0 50px 0;
}

img.beep-inline-logo {
    height: 72px
}

@media (max-width: 768px) {
    h1 {
        margin-top: 32px;
        margin-bottom: 48px;
    }
    section.bg-green {
        padding-bottom: 80px;
    }
    img.beep-inline-logo {
        height: 52px;
        margin-top: 20px;
    }
}

section.bg-white {
    padding-top: 50px;
}

section#contact-form-and-call-us-wrapper {
    background-color: var(--beep-green);
    padding: 1px 0 40px 0;
}

div.call-us {
    color: var(--beep-white);
    padding-top: var(--contact-form-padding-top);
}

img.call-us-icon {
    position: relative;
    left: -28px;
}

#contact_form {
    padding-bottom: 0;
    padding-top: var(--contact-form-padding-top);
    position: absolute;
}

@media (max-width: 768px) {
    section#contact-form-and-call-us-wrapper {
        background-color: var(--beep-white);
    }
    div.call-us {
        color: var(--beep-green);
    }
    img.call-us-icon {
        position: static;
        margin-bottom: 24px;
    }
    #contact_form {
        padding-top: 20px;
        position: relative;
        top: -48px;
    }
}

.md-form-control {
    font-size: var(--contact-form-font-size);
}

input, select {
    margin-top: var(--contact-form-input-margin-top);
}

.md-input.d-flex {
    margin-top: var(--contact-form-input-margin-top);
}
.md-input.d-flex input, .md-input.d-flex select {
    margin-top: 0;
}

select#id_phonePrefix {
    direction: rtl;
    padding-right: 6px;
    width: var(--contact-form-phone-prefix-width);
}
select#id_phonePrefix:valid {
    background-image: none;
    padding-right: 6px;
}
select#id_phonePrefix > option {
    direction: ltr;
}

input[id="id_phone"] ~ label {
    left: var(--contact-form-phone-prefix-width);
}

input[id="id_phone"]:focus ~ label,
input[id="id_phone"]:not(:placeholder-shown) ~ label {
    left: 0;
}

textarea {
    margin-top: 40px;
    min-height: 160px;
}

span.char-count {
    float: right;
    font-size: 0.8rem;
    margin-top: -1rem;
}

p.info-clause {
    font-size: 14px;
    margin-bottom: 0;
}

button.send-button {
    line-height: 1;
    margin-top: 22px;
    padding: 20px 60px;
    position: relative;
    top: 28px;
}

div.map-spacer {
    height: 240px;
}

@media (max-width: 768px) {
   div.map-spacer {
        display: none;
    }
}


div#map {
    background-color: #00cc66;
    height: 736px; width: 100%;
}

div#map > *:first-child {
    transform: scale(1.4);
}

div#map-marker,
div#map .gmnoprint,
div#map .gm-fullscreen-control {
    display: none;
}