.containerAccordion {
display:grid;
grid-template-columns: 1fr;
padding:0.5em;
}

#content .accordion{
clear:both; 
padding: 0.5em; 
}

#content .accordion > h4{
background:#fc0; 
text-align:center;
color:#333!important;
}

#content .accordion > h4:hover {
cursor:pointer;
color:#9054f4!important;	
}

#content .accordion > h5{
background:#639; 
text-align:center;
color:#fff!important;
font-size:1.35em!important;
}

#content .accordion > h5:hover {
cursor:pointer;
color:#fc0!important;	
}







.containerFour {
display:grid;
grid-template-columns: repeat(4, 1fr);
margin:0.5em 0; 
background:#fff;
}

.containerThree {
display:grid;
grid-template-columns: repeat(3, 1fr);
margin:0.5em 0; 
background:#fff;
}

.containerTwo {
display:grid;
grid-template-columns: repeat(2, 1fr);
margin:0.5em 0; 
background:#fff;
}

.container {
display:grid;
grid-template-columns: 1fr;
/*margin:0.5em 0;*/
background:#fff;
padding:1em;
}

.card {
padding: 10px;
margin: 1em;
}

.shadow {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.gray {
background:#eee;
}

/*.purple {
background:#d1c1e0;
}*/


/*tablet*/
@media only screen and (max-width:1024px){

.containerFour, .containerThree {
display:grid;
grid-template-columns: repeat(2, 1fr);
}

.containerTwo {
display:grid;
grid-template-columns: 1fr;
}

}


/*mobile*/
@media only screen and (max-width:767px){
.containerFour, .containerThree, containerTwo {
display:grid;
grid-template-columns: 1fr;
}
}