/* TABS ONLY USING CSS */

.tabs {
    float: none;
    list-style: none;
}
.tabs:after {
    content: '';
    display: table;
    clear: both;
}
.tabs input[type=radio] {
    display:none;
}
.tabs label {
    display: block;
    float: left;
    width: calc(20% - 4px);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.5s; /* Safari 3.1 to 6.0 */
    transition: all 0.5s;
}
.tabs label span {
    display: none;
}

.tabs label:hover h3{
    color: $dark-gold;
}
.tab-content {
    display: none;
    width: 100%;
    float: left;
}


.tabs [id^="tab"]:checked + label h3{
    color: $dark-gold;
}
#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2,
#tab3:checked ~ #tab-content3,
#tab4:checked ~ #tab-content4,
#tab5:checked ~ #tab-content5 {
    display: block;
}