.layer {
    position: absolute;
    left: 0;
    top: 0;
    height: 0;
    overflow: hidden;
    z-index: 1000000;
}

.layer.layer-opened {
    right: 0;
    bottom: 0;
    height: auto;
}

.layer-overlay {
    position: fixed;
    display: none;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background: #000;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 1, 1) 0s;
}

.layer-opened .layer-overlay {
    opacity: 1;
    display: block;
}

.layer-content {
    border-radius: 2px;
    background-color: #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
    top: -100%;
    padding: 1.5rem;
    position: absolute;
    transition: top 0.35s cubic-bezier(0.4, 0, 1, 1) 0s;
}

.layer-fixed .layer-content {
    position: fixed;
    top: -1000%;
}

@media (min-width: 600px) {
    .layer-content {
        left: 50%;
        transform: translateX(-50%);
    }

    .layer-opened .layer-content {
        width: 400px;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
}

@media (max-width: 599px) {
    .layer-opened .layer-content {
        left: 1rem;
        top: 1rem;
        right: 1rem;
        max-height: 90vh;
    }
}

@media (max-width: 359px) {
    .layer-opened .layer-content {
        overflow-y: auto;
    }
}

.layer-close::after {
    content: "×";
    position: absolute;
    z-index: 10;
    font-size: 2rem;
    width: 2rem;
    height: 2rem;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    right: .25rem;
    top: .25rem
}

.layer .control:not(.control-checkbox) {
    display: block;
    padding-bottom: .5rem;
}

.layer label {
    width: 100%;
}

.layer input[type=text],
.layer input[type=email],
.layer input[type=password],
.layer select {
    width: 100%
}

.layer .error {
    position: static;
}

.layer .control-birthDate select#birthYear {
    width: 28%
}

.layer .control-birthDate select#birthDay {
    width: 26%
}

.layer .control-birthDate select#birthMonth {
    width: 42%
}