.resp-tabs-list {
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
}

.resp-tabs-container {
  clear: both;
}

.resp-accordion {
  cursor: pointer;
  display: none;
}

.resp-tab-content {
  display: none;
}




/*-----------Vertical tabs-----------*/

@media only screen and (min-width: 768px) {

.resp-vtabs  {
	display:-webkit-flex;display:-ms-flexbox;display:flex;
	-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;
}

.resp-vtabs .resp-tabs-list {
	display:block;
	margin-left:-0.5rem;
	margin-right:-0.5rem;
}

.resp-vtabs .resp-tabs-list li {
  display: block;
  padding: 0.75rem 0rem !important;
  margin: 0rem 0.5rem;
  cursor: pointer;
  float: none;
  border-bottom:1px solid #fff;
  text-align:left;
  font-size:18px;
  letter-spacing:0.05em;
  white-space: nowrap;
}



.resp-vtabs li.resp-tab-active {
	border-bottom:1px solid var(--wf-color4);
}

.resp-vtabs .resp-tabs-container  {
   position: relative;
  z-index: 1;
}

}



/*----------- Arrow -----------*/

.resp-arrow {
  position: absolute;
  right:0.75rem;
  top:50%;
  transform: translateY(-50%);
}

.resp-arrow:before {
  font-family: 'iconfont';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;  	
  content: "\e999";
  color:#222;
}

.resp-arrow:hover:before {
  color:#18649e;
}

.resp-tab-active span.resp-arrow:before {
  content: "\e99a";
  color:#fff;
}




/* Tabs */
.resp-tabs-list {
	margin-left: -1.0rem;
	margin-right: -1.0rem;
}

.resp-accordion,
.resp-tabs-list .resp-tab-item {
  position: relative;
  cursor: pointer;
  text-transform: none;
  padding: 0.75rem 1.5rem;
  margin-left: 1.0rem;
  margin-right: 1.0rem;        
  text-align: center;
  border: none;
  border-radius: 8px;

  font-family: var(--wf-page-font-family);
  font-size:18px;
  line-height:1.2em;
  font-weight:500;
  background-color: var(--wf-color2);

}

.resp-accordion:hover,
.resp-accordion.resp-tab-active,
.resp-tabs-list .resp-tab-item:hover,
.resp-tabs-list .resp-tab-item.resp-tab-active {
  color:var(--wf-color6);
  background-color: var(--wf-color4);
}

.resp-accordion {
  display: none;
  position: relative;
  cursor: pointer;
  -moz-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
  z-index: 0;
  margin-bottom:0.5rem;
  border: none;
}


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

.tabs-style {
	margin-top:2rem;
}


/* Nav */
.resp-tabs-list {
  list-style: none;
}

.resp-tabs-list li:before {
	display:none;
}


@media (max-width: 420px) {
  .resp-accordion {
    display: block;
  }
  .resp-tabs-list {
    display: none;
  }

  
}











/*-----------Accordion styles-----------*/
.resp-easy-accordion .resp-accordion { 
	display: block; 
}

.resp-jfit {
  width: 100%;
  margin: 0px;
}

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

/*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
@media only screen and (max-width: 767.5px) {

.resp-tabs-list { display: none; }


.tabs-style {
	margin-top:1rem;
}

.resp-accordion { 
	display: block;
	text-align:left;
	padding-right:1.5rem;
	width:100%;
	margin-left:0;
	margin-right:0;
	margin-top:1.0rem;
}

.resp-tabs-container {
	margin-left:0;
	margin-right:0;
}


.resp-vtabs .resp-tabs-container {
  width: 100%;
  clear: none;  
}


.resp-vtabs .resp-tabs-container {
  width: 100%;
  clear: none;  
}

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



}

@media only screen and (max-width: 480px) {

.resp-accordion{
  font-size:16px;
}

}



.resp-tab-content-active .object-non-visible-animation {
	animation-delay: 1s;
	animation: fadeIn 1s ease-in both;

}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

.clear:before, .clear:after {
  content:"";
  display:table
}

.clear:after {
  clear:both
}