.accordion {
    background-color: #fff;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
	font-size:18px;
	font-weight:700;
	border-bottom:1px solid #ccc;
	position: relative
}


.active{
	background-color:#eee
}
.accordion:hover{
	background-color:#f7f7f7
}


.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
.panel1 {
     padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
.accordion:after{
	content:'\02795';
	font-size:13px;color:#777;
	float:right;
	margin-left:5px;
	position:absolute;
	bottom:calc(50% - 11px);right:15px
}
.active:after{content:"\2796"}
@media (max-width: 768px){	.accordion{		font-size:14px;		padding:10px		}}