.tab-heading {
    display: block;
    cursor: pointer;
    margin-bottom: 1em;
    text-transform: uppercase;
    transition: all ease .3s;
}

.tab-heading.active, .tab-heading:hover{
    color: var(--color-orange);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tabs-content {
    border: 3px solid var(--color-orange);
	border-radius: 15px;
    background: var(--color-black);
    z-index: 1;
}
/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
/*XS Devices 0 - 767px*/
@media only screen and (max-width: 47.9375em) {
    .tab-heading.active+.tab-content {
        display: block;
    }
	    .tabs-content {
        padding: 2em;
    }	
}

/*Devices 768px in width*/
@media only screen and (min-width: 48em) {
	    .tabs-content {
        padding: 4em 2em;
    }
}

/*Devices 1024px in width*/
@media only screen and (min-width: 64em) {
    .tabs-content {
        padding: 8em 5em;
    }
    .tab-heading.active:after {
        content: '';
        bottom: 0;
        width: 200%;
        height: 3px;
        display: block;
        position: relative;
        background: var(--color-orange);
        z-index: -1;
    }    
}

/*Devices 1200px+ in width*/
@media only screen and (min-width: 75em) {}