.tabs {
        width: 100%;
        max-width: 700px;
        border: 0px solid black;
        margin: 50px auto;
    }

        input {
            opacity: 1;    
        }

        label {
            cursor: pointer;
            background: yellow;
            color: red;
            border-radius: 0px 0px 0 0;
            padding: 0% 0%;
            float: left;
            margin-right: 20px;
            font: italic 1em cambria;
        }

            label:hover {
                background: blue;
            }

            input:checked + label {
                background: palegreen;
                color: blueviolet;
            }

        .tabs input:nth-of-type(1):checked ~ .panels .panel:first-child,
        .tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2),
        .tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3),
        .tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {
            opacity: 1;
            -webkit-transition: .9s;
        }

        .panels {
            float: left;
            clear: both;
            position: relative;
            width: 100%;
            background: #fff;
            border-radius: 0 0px 0px 0px;
            min-height: 465px;
        }

            .panel {
                width: 100%;
                opacity: 0;
                position: absolute;
                background: #fff;
                border-radius: 0 10px 10px 10px;
                padding: 4%;
                box-sizing: border-box;
            }

                .panel h2 {
                    margin: 0;
                    font-family: Arial;
                }