:root {
    --color-first: #65587f;
    --color-second: #f18867;
    --color-third: #e85f99;
    --color-forth: #50bda1;
    --block-width: 80%;
    --block-height: 500px;
    --border-width: .625rem;
    --border-radius-outer: 8px;
    --border-radius-inner: calc(var(--border-radius-outer) / 2);
    --font-plain: 'IBM Plex Sans', sans-serif;
    --font-special: 'Fredoka One', sans-serif;
    box-sizing: border-box;
    line-height: 1.4;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/*body {
    background: #f2f2f2;
    color: #5e5e5e;
    font-family: var(--font-plain);
    height: 100vh;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}*/

.rainbow {
    width: 100%;
    height: 100%;
    -webkit-animation: o-rotate-360 linear 8s infinite;
    animation: o-rotate-360 linear 8s infinite;
}
.rainbow span {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.rainbow span:after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 100%;
}
.rainbow span:first-child {
    background: var(--color-first);
}
.rainbow span:first-child:after {
    background: var(--color-second);
}
.rainbow span:last-child {
    background: var(--color-third);
}
.rainbow span:last-child:after {
    background: var(--color-forth);
}

.c-subscribe-box {
    width: var(--block-width);
    height: var(--block-height);
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 40px -10px rgba(0, 64, 128, 0.2);
    border-radius: var(--border-radius-outer);
}
.c-subscribe-box__wrapper {
    width: calc(100% - var(--border-width));
    height: calc(100% - var(--border-width));
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 1.2rem 1rem 1.8rem;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    border-radius: var(--border-radius-inner);
}
.c-subscribe-box__title {
    font-size: 1.6rem;
}
.c-subscribe-box__desc {
    font-size: .935rem;
    margin: .7rem auto 1.8rem;
    max-width: 240px;
}
.c-subscribe-box__form {
    margin-top: auto;
}

.c-form--accent input:hover, .c-form--accent input:active, .c-form--accent input:focus {
    border-color: var(--color-third);
    box-shadow: 0 0 0 3px rgba(232, 94, 152, 0.25);
}
.c-form--accent [type=submit] {
    background: var(--color-third);
    border-color: var(--color-third);
    color: #fff;
}

@-webkit-keyframes o-rotate-360 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes o-rotate-360 {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.bannerBox {
    transition: transform .5s;
}
.bannerBox:hover {
    -ms-transform: scale(1.15); /* IE 9 */
    -webkit-transform: scale(1.15); /* Safari 3-8 */
    transform: scale(1.15);
    z-index: 1;
}