tabs.css

/*
 CSS for the main interaction
*/
.tabset > input[type="radio"] {
    position: absolute;
    left: -200vw;
}

.tabset .tab-panel {
    display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
    display: block;
}

.tabset > label {
    position: relative;
    display: inline-block;
    margin-top: -2.3rem;
    padding-top: 40px;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 20px;
    border-radius: 1rem;
    border-top: 0;
    cursor: pointer;
    font-weight: 600;

    background-color: #EEE;

    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.59);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.59);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.59);

    transition: 	border-color .15s ease-out,
    color .25s ease-out,
    background-color .25s ease-out,
    /*margin-top 0.3s ease-out,*/
    box-shadow .25s ease-out;

    z-index: inherit;
}

.tabset > label:hover,
.tabset > input:focus + label {
    color: #ffffff;
    /*text-shadow: 0 0 1px black;*/
}

.tabset > input:checked + label {

    background-color: #ef7600;
    color: #ffffff;

    -webkit-box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.7);
    box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.7);
}

.tabset {
    width: 30rem;
}