.main {
  padding: 20px;
}

.tabs-vertical .tabs {
	height: auto;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	display: -webkit-flex;
	display: flex;
}

#sideNav .tab {
  height: auto;
  line-height: inherit;
}

.tabs-vertical .tab a {
  text-align:left;
  padding: 10px;
}

.tabs-vertical .tab .active {
	-moz-transition: border-color .5s ease;
	-o-transition: border-color .5s ease;
	-webkit-transition: border-color .5s ease;
	transition: border-color .5s ease;
	border-left: 3px solid #617ba9;
  padding: 10px 7px;
  font-weight: bold;
}

.tabs-vertical .indicator {
	display: none;
}

.tabs-vertical .tab-content {
  /*
	display: block;
  */
	/*  make tab content scrollable , by define height, then overflow: auto*/
	/*height: 15.6vh;
	overflow: auto;
	overflow-y: auto;
	overflow-x: auto;
  */
	/*  make tab content scrollable */
}

#sideNav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
	overflow-x: auto;
}

.tab-content h4 {
  color: #617ba9;
  margin-top: 0;
  font-size: 18px;
  text-transform: uppercase;
}

.tab-content h5 {
  color: #0009;
  font-size: 1.3em;
  font-style: italic;
}

.about-page section {
}


@media only screen and (max-width: 600px) {
  .main {
    margin: 0;
    padding: 20px 0px;
    font-size: 1em;
  }
  #sideNav {
    padding-right: 0;
    margin-bottom: 20px;
  }

  .tab {
    border-bottom: 1px solid #dbe7ff;
  }
  #sideNav .tab a {
    font-size: .9em;
    padding: 10px 5px;
    white-space: break-spaces;
  }
  .main h4,
  .main h5 {
    font-size: 1em;
  }
}

@media only screen and (min-width: 993px) {

}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}
