.register {
    background-position: center center !important;
    background-size: cover !important;
}
    .register .register-container-grid {
        padding: 10rem 35rem;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-column-gap: 3rem;
    }
        .register.free .register-form-box {
            display: none;
        }
        .register.fanclub .register-container-grid {
            grid-template-columns: 1fr 1fr;
            padding: 10rem 15rem;
        }
        .register.fanclub .register-container-grid .answer-buttons {
            display: none;
        }
        .register.fanclub .register-container-grid .benefits h4 {
            display: none;
        }
        .register .register-container-grid .register-box {
            padding: 2rem;
            box-shadow: 0 0px 30px 0 #b7b7b7;
            border: 1px solid #ccc;
            background-color: #fff;
            border-radius: .5rem;
        }
            .register .register-container-grid .benefits h4 {
                font-weight: 600;
                margin: 0 0 .5rem 0;
            }
            .register .register-container-grid .benefits h5 {
                font-weight: 600;
                margin: 0 0 .5rem 0;
            }
            .register .register-container-grid .benefits p {
                margin: 0;
            }
        .register .register-container-grid .benefit-item {
            border: 1px solid #e8e8e8;
            margin-bottom: 1rem;
            padding: .5rem .75rem;
        }
            .register .register-container-grid .benefit-item img {
                max-width: calc(100% + 1.5rem);
                margin: -.5rem -.75rem .5rem -.75rem;
            }
        .register .register-container-grid .answer-buttons {
            display: grid;
            grid-template-columns: 2fr 1fr;
            grid-gap: .5rem;
        }

    .register input[type=text],
    .register input[type=email],
    .register input[type=date],
    .register input[type=password],
    .register select {
        width: 100%;
    }
    .register button {
        margin-top: 2rem;
    }

/* Register Plan Page */
.register.plan {
    padding: 5rem 0;
}
    .register.plan h1 {
        color: #fff;
        text-align: center;
        font-weight: 500;
        text-transform: uppercase;
        margin-bottom: 3rem;
    }
    .register.plan .plan-choice-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 2.5rem;
    }
        .register.plan .plan-choice-grid > div {
            background-color: #fff;
            padding: 1rem 1.5rem;
            border: 5px solid #fff;
            transition: border var(--transition-duration);
        }
            .register.plan .plan-choice-grid > div:hover {
                border: 5px solid var(--button-primary-bg-color);
                transition: border var(--transition-duration);
            }
            .register.plan .plan-choice-grid > div h2 {
                text-align: center;
                margin: 2rem;
                font-weight: 900;
                font-size: 2.8rem;
                text-transform: uppercase;
            }
            .register.plan .plan-choice-grid > div .price {
                text-align: center;
                margin: 2rem 0 0 0;
                font-weight: 900;
                font-size: 3.8rem;
                text-transform: uppercase;
            }
            .register.plan .plan-choice-grid > div .per {
                text-align: center;
                margin: 0 0 1rem 0;
                font-weight: 900;
                font-size: 1.4rem;
                text-transform: uppercase;
            }
            .register.plan .plan-choice-grid > div .select {
                padding: 0 7rem;
                margin-bottom: 3rem;
            }
                .register.plan .plan-choice-grid > div .select button.join-button {
                    width: 100%;
                    border-radius: 10rem;
                    padding: 1.5rem;
                    font-size: 1.8rem;
                    height: initial;
                }
            .register.plan .plan-choice-grid > div .description ul {
                font-weight: 500;
                margin-left: 1rem;
            }
            .register.plan .plan-choice-grid > div .description ul li {
                list-style: none;
            }
                .register.plan .plan-choice-grid > div .description ul li.callout {
                    color: #ff0000;
                }
            .register.plan .plan-choice-grid > div .details {
                color: #888;
                font-size: 1.2rem;
                line-height: 1.6rem;
            }