#tabs {
    text-align:center;
}

#tabs h2 {
    margin: 1em 0 0;
}

#tabs h2:focus {
    outline: 0;
    /* If you're removing the outline, you must add something as good or better! */
}

.tabsList {
	margin:1em 0 !important;
    list-style: none;
    -webkit-padding-start: 0;
	padding-left:0;
}

.tabsList li {
    position: relative; /*for z-index*/
    z-index: 1;
    display: inline;
}

.tabsList li:last-child {
    margin: 0 0 0 0;
}

.tabsList li a {
    position: relative;
    top: 4px;
    overflow: hidden;
    font-weight: normal;
    text-transform:uppercase;
    background-color: #efefef;
    text-decoration: none;
    margin: .5em .5vw 0 0;
    padding: 1em .5em;
    border:1px solid #c9c9c9;
    border-top:5px solid #bf5700;
    cursor: pointer;
    transition: 0.25s;
	-webkit-transition:0.25s;
	-moz-transition:0.25s;
	-o-transition:0.25s;
	-ms-transition:0.25s;
	box-sizing:border-box;
}

.tabsList li a:link, .tabsList li a:visited {
	color:#333;
}

.tabsList li a:hover,
.tabsList li a:focus,
.tabsList li a:active {
    border-top:5px solid #ccc;
    color:#222;
}

.tabsList li a:active { top: 2px; }

.tabsList li.current { z-index: 10; }

.tabsList li.current a {
    top: 3px;
    border-top:5px solid #ccc;
    border-bottom:1px solid #fff;
    background-color:#fff;
}

.tabsList li.current a:hover,
.tabsList li.current a:focus {
}

.tabsList li.current a:focus { outline: 1px dotted #ccc; }

.tabsList a span {
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.tabPanel {
    position: relative;  /*for z-index*/
    display: block;
    visibility: visible;
    clear: left;
    overflow: auto;
    padding: .5em 3em 2em;
    border: 1px solid #c9c9c9;
    z-index: 5;
    background-color: #fff;
    text-align:left;
}

.tabPanel li, .tabPanel h2 {
    text-align:left;
}

.tabPanel:focus { outline: 1px dotted #ccc; }

.tabPanel h2:focus { outline: 1px dotted #ccc; }




@media screen and (max-width: 1100px) {
	.tabsList li a {
		float: left;
		top:0;
		margin:0;
	}

	.tabsList li.current a {
    	top: 0;
    	border-bottom: 1px solid #c9c9c9; 
    }
}

@media screen and (max-width: 768px) {
	.tabsList li {
		display:list-item;
	}
	
	.tabsList li a {
		width:50%;
		padding: .5em .5%;
	}

	.tabsList li.current a {
    	top: 0;
    	border-bottom: 1px solid #c9c9c9; 
	}
}

@media screen and (max-width: 450px) {
	.tabsList li a {
		width:100%;
		padding: 1em .5em;
	}

	.tabPanel {
		padding: .5em 1em 2em;
	}
}