.overlay {
    position:                    fixed;
    top:                         0;
    right:                       0;
    bottom:                      0;
    left:                        0;
    width:                       auto;
    height:                      auto;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -o-backface-visibility:      hidden;
    -ms-backface-visibility:     hidden;
    backface-visibility:         hidden;
    display:                     block;
    overflow-y:                  auto;
    z-index:                     10;
    -webkit-overflow-scrolling:  touch;
    background-image:            -webkit-linear-gradient(top, rgba(240, 240, 255, 0.98) 0%, rgba(245, 245, 245, 0.96) 50%);
    background-image:            -moz-linear-gradient(top, rgba(240, 240, 255, 0.98) 0%, rgba(245, 245, 245, 0.96) 50%);
    background-image:            -o-linear-gradient(top, rgba(240, 240, 255, 0.98) 0%, rgba(245, 245, 245, 0.96) 50%);
    background-image:            linear-gradient(to bottom, rgba(240, 240, 255, 0.98) 0%, rgba(245, 245, 245, 0.96) 50%)
}

.overlay .overlay-close {
    position:    absolute;
    top:         0;
    right:       0;
    bottom:      auto;
    left:        auto;
    width:       3rem;
    height:      3rem;
    line-height: 3rem;
    text-align:  center;
    z-index:     1;
    cursor:      pointer;
    font-size:   1em
}

@media screen and (min-width: 800px) {
    .overlay .overlay-close {
        right:     .75rem;
        top:       .75rem;
        font-size: 1.5em
    }
}

.overlay .overlay-close .icon-cross {
    display:        inline-block;
    vertical-align: middle;
    color:          #999;
    font-size:      14px;
    line-height:    20px
}

@media screen and (min-width: 800px) {
    .overlay .overlay-close .icon-cross {
        font-size:   24px;
        line-height: 1
    }
}

.overlay-content {
    position:   absolute;
    top:        45%;
    right:      0;
    bottom:     auto;
    left:       0;
    width:      auto;
    height:     auto;
    margin-top: -80px
}

@media screen and (min-width: 800px) {
    .overlay-content {
        margin: 0 5.55555%
    }
}

@media screen and (min-width: 1200px) {
    .overlay-content {
        margin: 0 8.333325%
    }
}

@media screen and (min-width: 1600px) {
    .overlay-content {
        margin: 0 11.1111%
    }
}

.overlay-content .overlay-panel {
    margin: 0 auto;
    width:  400px
}

.overlay-content .overlay-heading {
    padding-left:  1.25rem;
    padding-right: 1.25rem;
    text-align:    center
}

@media screen and (min-width: 800px) {
    .overlay-content .overlay-heading {
        padding-left:  1.875rem;
        padding-right: 1.875rem
    }
}

.overlay-content .title-overlay {
    margin-bottom: .75rem;
    font-weight:   300;
    font-size:     28px;
    line-height:   1
}

@media screen and (min-width: 800px) {
    .overlay-content .title-overlay {
        margin-bottom: 1rem;
        font-size:     40px;
        line-height:   1
    }
}

.overlay-screen-contact, .overlay-screen-slack {
    -webkit-transition:         all 250ms ease-in-out;
    -moz-transition:            all 250ms ease-in-out;
    -o-transition:              all 250ms ease-in-out;
    transition:                 all 250ms ease-in-out;
    -webkit-transform:          translate3d(0, 0, 0);
    -moz-transform:             translate3d(0, 0, 0);
    -o-transform:               translate3d(0, 0, 0);
    -ms-transform:              translate3d(0, 0, 0);
    transform:                  translate3d(0, 0, 0);
    opacity:                    0;
    z-index:                    -1;
    -webkit-overflow-scrolling: touch
}

.note-form {
    padding:          .7111em 1em;
    text-align:       center;
    font-size:        14px;
    line-height:      20px;
    background-color: #1384df;
    color:            #fff;
    max-width:        100%;
}

.form-confirmable .fieldset {
    -webkit-transition: all 300ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
    -moz-transition:    all 300ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
    -o-transition:      all 300ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
    transition:         all 300ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
    max-height:         30em;
    overflow:           hidden;
    opacity:            1
}

.form-confirmable .form-confirmation {
    -webkit-transition: all 300ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
    -moz-transition:    all 300ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
    -o-transition:      all 300ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
    transition:         all 300ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
    max-height:         0;
    overflow:           hidden;
    opacity:            0
}

.form-confirmable.confirmed .fieldset {
    max-height: 0;
    margin:     0;
    padding:    0;
    opacity:    0
}

.form-confirmable.confirmed .form-confirmation {
    max-height: 30em;
    opacity:    1
}

input:not([type="checkbox"]):not([type="number"]):not([type="radio"]):not([type=submit]):not([type=file]), input[type="number"] {
    overflow: inherit;
}

textarea, input:not([type="checkbox"]):not([type="number"]):not([type="radio"]):not([type=submit]):not([type=file]), input[type="number"] {
    font-size:          14px;
    line-height:        20px;
    padding:            .7111em 1em;
    background:         #fff;
    border:             none;
    box-sizing:         border-box;
    border-radius:      0;
    color:              #333;
    display:            block;
    outline:            none;
    width:              100%;
    -webkit-appearance: none;
    max-width:          100%;
}

.overlay input[type="email"] {
    height: 52px;
}

.overlay .submit-button {
    outline:          none;
    background-color: #1384df;
    color:            #fff;
    border:           none;
    border-radius:    52px;
    width:            100%;
    height:           52px;
    margin-top:       20px;
    max-width:        100%;
}

.overlay .submit-button:hover {
    background-color: #0266b6;
}


@media only screen and (max-width: 480px) {
    .overlay-content .overlay-panel {
        width: 300px;
    }
}