﻿
.middle {
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
    /* Made by */
}

    .middle h1 {
        color: #fff;
    }

    .middle input[type="radio"] {
        display: none;
    }

        .middle input[type="radio"]:checked + .box {
            background-color: #fff;
            border: 2px solid #008065;
        }

            .middle input[type="radio"]:checked + .box > div {
                color: #191E28;
                transform: translateY(5px);
            }

                .middle input[type="radio"]:checked + .box > div:before {
                    transform: translateY(0px);
                    opacity: 1;
                }

    .middle .box {
        width: calc(200px - 2em);
        height: 220px;
        background-color: #fff;
        transition: all 250ms ease;
        will-change: transition;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        position: relative;
        border: 1px solid #D2D8E5;
        box-sizing: border-box;
        border-radius: 6px;
        font-weight: 900;
        margin-right: 5px;
    }

.box:hover {
    border: 2px solid #008065;
}

.middle .box:active {
    transform: translateY(5px);
}

.middle .box > div {
    position: absolute;
    transform: translate(0, 5px);
    left: 0;
    right: 0;
    transition: all 300ms ease;
    font-size: 1.5em;
    user-select: none;
    color: #191E28;
    padding-left: 5px;
    padding-right: 5px;
}

    .middle .box > div:before {
        font-size: 1.2em;
        font-family: FontAwesome;
        display: block;
        transform: translateY(-20px);
        opacity: 0;
        transition: all 300ms ease-in-out;
        font-weight: normal;
        color: white;
    }



.middle p {
    color: #fff;
    font-weight: 400;
}

    .middle p a {
        text-decoration: underline;
        font-weight: bold;
        color: #fff;
    }

    .middle p > div:after {
        content: '\f0e7';
        font-family: FontAwesome;
        color: yellow;
    }
