.accordion {
  background-color: #ecf3f3;
  color: #000;
  cursor: pointer;
  padding:10px 35px;
  width: 100%;
  border: none!important;
  text-align: left;
  outline: none!important;
  font-size: 15px;
  transition: 0.4s;
  letter-spacing: 0.5px;   
 font-weight: 500;

}

.active, .accordion:hover {
  background-color: #e2eded;
	color: #000;
	border:none;
	outline: none!important;
	
}

.accordion:after {
  content: '\002B';
  color: #000;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  font-size: 20px;
	outline: none!important;
	
}

.active:after {
  content: "\2212";
	border: none!important;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
	letter-spacing: 0.5px;
	border: none!important;
	border-radius: 0 0 15px 15px;
}

.panel p{
	font-size: 14px;
	color: #333;
	line-height: 24px;
	padding: 15px 15px;	font-family: 'Poppins', sans-serif;

}


/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
	.accordion {
	   background-color: #ecf3f3;
	  color: #000;
	  cursor: pointer;
	  padding:5px 5px;
	  width: 100%;
	  border: none!important;
	  text-align: left;
	 	outline: none!important;
	  font-size: 13px;
	  transition: 0.2s;
	  border-bottom:2px solid #fff;
	  letter-spacing: 0.5px;
		margin-bottom:5px;
		margin-right: 10px;
	}

	.active, .accordion:hover {
	  background-color: #e2eded;
		color: #000;
			outline: none!important;
	}

	.accordion:after {
	  content: '\002B';
	  color: #000;
	  font-weight: bold;
	  float: right;
	  margin-left: 5px;
		font-size: 20px;
			outline: none!important;
	}

	.active:after {
	  content: "\2212";
	}

	.panel {
	  padding: 0 18px;
	  background-color: white;
	  max-height: 0;
	  overflow: hidden;
	  transition: max-height 0.2s ease-out;
		letter-spacing: 0.5px;
	}

	.panel p{
		font-size: 12px!important;
		color: #333;
		line-height: 18px;
		padding: 15px 0;
	}
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
	.accordion {
	  background-color: #fff;
	  color: #000;
	  cursor: pointer;
	  padding:12px 18px;
	  width: 100%;
	  border: none;
	  text-align: left;
	 	outline: none!important;
	  font-size: 14px;
	  transition: 0.2s;
	  border-bottom:2px solid #fff;
	  letter-spacing: 0.5px;
		margin-bottom: 10px;
	}

	.active, .accordion:hover {
	  background-color: #fff;
		color: #000;
			outline: none!important;
	}

	.accordion:after {
	  content: '\002B';
	  color: #000;
	  font-weight: bold;
	  float: right;
	  margin-left: 5px;
		font-size: 20px;
			outline: none!important;
	}

	.active:after {
	  content: "\2212";
	}

	.panel {
	  padding: 0 18px;
	  background-color: white;
	  max-height: 0;
	  overflow: hidden;
	  transition: max-height 0.2s ease-out;
		letter-spacing: 0.5px;
	}

	.panel p{
		font-size: 12px!important;
		color: #333;
		line-height: 18px;
		padding: 15px 0;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) { 
	.accordion {
	  background-color: #fff;
	  color: #000;
	  cursor: pointer;
	  padding:12px 18px;
	  width: 100%;
	  border: none;
	  text-align: left;
	 	outline: none!important;
	  font-size: 14px;
	  transition: 0.2s;
	  border-bottom:2px solid #fff;
	  letter-spacing: 0.5px;
		margin-bottom: 10px;
	}

	.active, .accordion:hover {
	  background-color: #fff;
		color: #000;
			outline: none!important;
	}

	.accordion:after {
	  content: '\002B';
	  color: #000;
	  font-weight: bold;
	  float: right;
	  margin-left: 5px;
		font-size: 20px;
			outline: none!important;
	}

	.active:after {
	  content: "\2212";
	}

	.panel {
	  padding: 0 18px;
	  background-color: white;
	  max-height: 0;
	  overflow: hidden;
	  transition: max-height 0.2s ease-out;
		letter-spacing: 0.5px;
	}

	.panel p{
		font-size: 12px!important;
		color: #333;
		line-height: 18px;
		padding: 15px 0;
	}
}