@media only screen and (min-width: 768px) {
#post-ul li {
  display: none;
}	
		
#post-ul li:nth-child(-n+3){
  display: list-item;
}		
	}	
		

.mybutton {
  
  border-radius: 35px;
  color: #0CC8F4;
  text-decoration: none;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  text-decoration: none;
	
}		

@media only screen and (max-width: 768px) {		
.mybutton {
 display: none;
	
}			
	}		
		
.accordiv{
	margin-bottom: 30px;
		}		
	
.accordion {
	border-radius: 35px;
	 box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  background-color: #fff;
  color: #000;
  cursor: pointer;
  padding: 5px;
	padding-bottom: 0px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
	margin: auto;
  
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordiv .active {
	border-radius: 25px 25px 0px 0px;
	color: #fff;
  background-image: linear-gradient(
90deg
, #0039E4 0%, #0CC8F4 88%);
	box-shadow: none !important;
}

.accordiv h4 {
	vertical-align: middle;
	font-size: 16px;
	font-weight: 200;
	padding-top: 3%;
	padding-bottom: 0px;
	padding-left: 5%;
	color: #000;
}
		
	
.accordiv .active h4, .accordion:hover h4 {
	padding-top: 3%;
	padding-left: 5%;
}
		
.accordiv .active h4, .accordiv .active a {
	color: #fff;
}		
		
.accordion h4:after {
	
	
	border-radius: 50%;
  content: "\2193";
	text-align: center;
    height: 30px;
    width: 30px;
    line-height: 30px;
    font-size: 18px;
	font-weight: bold;
	color: #fff;
	background-color: #0CC8F4;
	margin: 0% 1% 1.5% 0%;
  float: right;
  margin-left: 5px;
}

.active h4:after {
	
	border-radius: 50%;
  content: "\2191";
	text-align: center;
    height: 30px;
    width: 30px;
    line-height: 30px;
    font-size: 18px;
	font-weight: bold;
	color: #0CC8F4;
	background-color: #fff;
	margin: 0% 1% 1.5% 0%;
	float: right;
}		

/* Style the accordion panel. Note: hidden by default */
div.panel {
    display: none;
}

div.panel.show {
	border-radius: 0px 0px 25px 25px;
	background-image: linear-gradient(
90deg
, #0039E4 0%, #0CC8F4 88%);
	padding-top: 10px;
	padding-bottom: 30px;
	margin-top: 0px;
    display: block !important;
	color: #fff;
  
}
		
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
	padding-right: 5px;
  content: "-";
  text-indent: -5px;
	}
.underlinedaccord a	{
  text-decoration: underline !important;
}

#post-ul{
	margin-left: 1em;
	padding-top: 1em;
	}

.panel ul.dashed > li {
	text-indent: -0.8em;
	}

.panel ul.dashed > li:before {
    font-weight: bold;
}

.accordiv .active:after {
    content: '';
    display: block;
    margin-left: 1em;
    margin-right: auto;
    width: 80%;
    height: 1px;
    background-color: #fff;
    margin-top: 17px;
}

.accordiv .postactive {
    border-radius: 25px 25px 25px 25px;
    color: #fff;
    background-image: linear-gradient( 
90deg
 , #0039E4 0%, #0CC8F4 88%);
    box-shadow: none !important;
}

.postactive h4:after {
	
	border-radius: 50%;
  content: "\2193";
	text-align: center;
    height: 30px;
    width: 30px;
    line-height: 30px;
    font-size: 18px;
	font-weight: bold;
	color: #0CC8F4;
	background-color: #fff;
	margin: 0% 1% 1.5% 0%;
	float: right;
}		

.accordiv .postactive h4, .accordiv .postactive a {
	color: #fff;
}


.accordiv .accordion {
height: 3em;
}

.accordion h4:after {
	margin: -0.2em 0.2em 0em 0em;
	}

.accordiv .accordion:hover{
     background-image: linear-gradient(
90deg
, #0039E4 0%, #0CC8F4 88%);
	
}

.accordiv .accordion:hover h4{
    color: #fff;
	}

.accordiv .accordion:hover h4:after{
    background-color: #fff;
	color: #0CC8F4;
	}