.resp-tabs-container {
    padding: 0px;
    background: transparent;
    clear: left;
}

h2.resp-accordion {
    cursor: pointer;
    padding: 5px;
    display: none;
}

.resp-tab-content {
    display: none;
    padding: 15px;
}

.resp-tab-active {
	border-bottom: none;
	margin-bottom: -1px !important;
	padding: 4px 10px !important;
}

.resp-content-active, .resp-accordion-active {
    display: block;
}

.resp-tab-content p {margin-right:30px}

h2.resp-accordion {
    margin-bottom: 10px;
    padding: 4px 10px; color:#000; font-weight:normal; font-size:12pt; background-color:rgba(0, 0, 0, 0.3) !important
}
h2.resp-accordion:hover {
    background-color:rgba(255, 255, 255, 0.3) !important;
}

h2.resp-tab-active {
    margin-bottom: 0px !important;
    padding: 4px 10px !important; color:#000; border-bottom:none; background-color:rgba(255, 255, 255, 0.3) !important
}

/*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
@media only screen and (max-width: 2000px) {
    ul.resp-tabs-list {
        display: none;
    }

    h2.resp-accordion {
        display: block;
    }

    .resp-vtabs .resp-tab-content {
    }

    .resp-vtabs .resp-tabs-container {
        border: none;
        float: none;
        width: 100%;
        min-height: 100px;
        clear: none;/* !important;*/
    }

    .resp-accordion-closed {
        display: none !important;
    }

    .resp-vtabs .resp-tab-content:last-child {
    }
}

@media screen and (min-width: 300px) {
h2.resp-accordion {padding: 4px 6px; font-size:9pt}
h2.resp-tab-active {padding: 4px 6px!important;}
.resp-tab-content {padding: 10px;}
/*.resp-tab-content {display: none;}*/
}

@media screen and (min-width: 768px) {
h2.resp-accordion {padding: 10px 15px; font-size:12pt} 
h2.resp-tab-active {padding: 10px 15px !important;}
.resp-tab-content {padding: 15px;}
/*.resp-tab-content {display: block;}*/
}