[data-accordion-element-content] {
	 height: auto;
	 overflow: hidden;
	 transition: height 0.5s;
}
 * {
	 box-sizing: border-box;
}

 .card {
	 width: 100%;
	 margin: 50px auto;
	 border-radius: 2px;
	 background: white;
	 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
 article {
	 position: relative;
	 transition: all 0.3s;
	 background: #fff;
}

 article.selected {
	 transform: scale(1.1);
	 box-shadow: 0 0 5px rgba(2, 2, 2, 0.4);
	 z-index: 2;
}
 .card h2 {
	 position: relative;
	 background: #27348b;
	 padding: 20px 75px 20px 30px;
	 font-size: 20px;
	 line-height: 30px;
	 color: #fff;
	 overflow: hidden;
	 transition: background 0.3s;
	 margin: 0px;
}

 .card h4 {
	 font-size: 20px;
	 padding: 20px;
	 color: #fff;
	 margin-top: 0px;
	 text-align: center;
}

 .card h2:hover, .selected h2 {
	 cursor: pointer;
	 background: #3949ab;
}
 .card h2:before, h2:after {
	 content: "";
	 position: absolute;
	 right: 0;
	 top: 50%;
	 margin-top: -1px;
	 margin-right: 30px;
	 width: 20px;
	 height: 2px;
	 background: #fff;
	 transition: transform 0.3s;
}
 .card h2:before {
	 transform: rotate(0deg);
	 animation: close-line-one-in 0.8s forwards;
}
 .selected h2:before {
	 animation: close-line-one-out 0.8s forwards;
}
 .card h2:after {
	 transform: rotate(90deg);
	 animation: close-line-two-in 0.8s forwards;
}
 .selected h2:after {
	 animation: close-line-two-out 0.8s forwards;
}
 .content {
	 opacity: 0;
	 transform: translateY(20px);
	 transition: all ease-out 0.4s 0.1s;
}
 .selected .content {
	 transform: translateY(0);
	 opacity: 1;
}
 .collapsed .content {
	 display: none;
}
.card  p {
	 padding: 25px 30px;
	 font-size: 16px;
	 line-height: 24px;
	 color: #000;
}

.card  h3 {
	 padding-top: 30px;
	 font-size: 24px;
	 color: #000;
	 text-align: center;
}

 @keyframes close-line-one-out {
	 0%, 50% {
		 transform: translateX(0);
	}
	 75% {
		 transform: translateX(50px);
	}
	 76% {
		 transform: translateX(50px) translateY(50px);
	}
	 100% {
		 transform: rotate(45deg);
	}
}
 @keyframes close-line-one-in {
	 0%, 20% {
		 transform: rotate(45deg);
	}
	 60% {
		 transform: translateX(50px) translateY(50px) rotate(45deg);
	}
	 61% {
		 transform: translateX(50px);
	}
	 100% {
		 transform: rotate(0deg);
	}
}
 @keyframes close-line-two-out {
	 0%, 50% {
		 transform: rotate(90deg);
	}
	 75% {
		 transform: translateY(-50px) rotate(90deg);
	}
	 76% {
		 transform: translateY(-50px) translateX(50px) rotate(90deg);
	}
	 100% {
		 transform: rotate(135deg);
	}
}
 @keyframes close-line-two-in {
	 0% {
		 transform: rotate(135deg);
	}
	 50% {
		 transform: translateY(-50px) translateX(50px) rotate(135deg);
	}
	 51% {
		 transform: translateY(-50px) rotate(90deg);
	}
	 100% {
		 transform: rotate(90deg);
	}
}



/* ##   header */
thead {
  background-color: rgb(27,30,36);
  color: rgb(220,220,220);
}

/* #   row */
td {
color: #000;
}

.table-responsive {
	padding-bottom: 30px;
}

.black {
	color: #000
}