@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;800&display=swap');

* {
  box-sizing:border-box;
}
body {
  background:#ddd;
  font-family:"Raleway";
}
.sch-tabs-7 .container {
  width: 80%;
  margin: 0 auto;
}
.sch-tabs-7 .sch-tabs {
  position:relative;
  width:100%;
  height:360px;
  padding:30px 0;
  background:#fff;
  box-shadow:5px 5px 10px 5px #ccc;
  overflow:hidden;
}
.sch-tabs-7 .sch-tabs .sch-header {
  float:left;
  width:180px;
  height:100%;
  border-right:1px solid #ccc;
  padding:50px 0px;
}
.sch-tabs-7 .sch-tabs .sch-header > div {
  height:50px;
  line-height:50px;
  font-size:16px;
  font-weight:600;
  color:#888;
  cursor:pointer;
  padding-left:10px;
  position: relative;
}
.sch-tabs-7 .sch-tabs .sch-header > div:hover,
.sch-tabs-7 .sch-tabs .sch-header > div.active {
  color:#fff;
  background: #7FCDCD;
}
.sch-tabs-7 .sch-tabs .sch-header > div:hover::before, .sch-tabs-7 .sch-tabs .sch-header > div.active::before {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid transparent;
  border-left: 10px solid #7FCDCD;
  right: -20px;
  content: "";
  position: absolute;
  top: 15px;
}
.sch-tabs-7 .sch-tabs .sch-header div i {
  display:inline-block;
  margin-left:10px;
  margin-right:5px;
}
.sch-tabs-7 .sch-tabs .sch-content {
  position:relative;
  height:100%;
  overflow:hidden;
}
.sch-tabs-7 .sch-tabs .sch-content > div > i {
  display:inline-block;
  width:50px;
  height:50px;
  background:#00acee;
  color:#f5f5f5;
  font-size:25px;
  font-weight:600;
  text-align:center;
  line-height:50px;
  border-radius:50%;
}
.sch-tabs-7 .sch-tabs .sch-content > div.active {
  top: 0px;
  display: block;
}
.sch-tabs-7 .sch-tabs .sch-content > div {
  position: absolute;
  text-align: center;
  padding: 40px 20px;
  top: -200%;
  transition: all 500ms ease-in-out;
  display: none;
}


@media only screen and (max-width:979px){
.sch-tabs-7 .sch-tabs .sch-content > div.active p {
  overflow: scroll;
  height: 120px;
  margin: 0;
}
.sch-tabs-7 .sch-tabs .sch-content > div.active .h2, .sch-tabs-7 .sch-tabs .sch-content > div.active h2 {
  font-size: 20px;
}
}
@media only screen and (max-width:639px){
	.sch-tabs-7 .container {
  width: 100%;
}
.sch-tabs-7 .sch-tabs .sch-header {
  width: 125px;
}
.sch-tabs-7 .sch-tabs .sch-content > div.active {
  padding: 0;
}
.sch-tabs-7 .sch-tabs .sch-content > div.active p {
  height: auto;
}
}
@media only screen and (max-width:479px){
.sch-tabs-7 .sch-tabs {
  height: 100%;
  display: grid;
}
.sch-tabs-7 .sch-tabs .sch-header {
  width: 97%;
  border-right: none;
  border-bottom: 1px solid #ccc;
  padding: 0;
}
.sch-tabs-7 .sch-tabs .sch-content {
  overflow: initial;
  padding-top: 20px;
}
.sch-tabs-7 .sch-text.active {
  display: block;
}
.sch-tabs-7 .sch-text {
  display: none;
}
.sch-tabs-7 .sch-content > div {
  position: relative !important;
}
}