/* content sidebar //////////*/

.main-sidebar {
  display:none;
  text-align:right;
}

.mobile-sidebar {
  display:block;
  position:fixed;
  height:100%;
  background-color:#fff;
  top:4em;
  width:15em;
  left:0;
  border-right:1px solid #21c1ff;
  z-index:300;
  transform:translateX(-100%);
  transition:.2s transform ease;
}

.mobile-sidebar--content {
  overflow-y:scroll;
  height:100%;
  padding: 2em 2em 5em;
}

.mobile-sidebar__active {
  transform:translateX(0);
}

.mobile-sidebar--button {
  font-size: 1.5em !important;
  display: inline-block;
  border: 1px solid #21c1ff;
  position: absolute;
  right: -1.25em;
  top: 50%;
  padding: .2em .3em .45em .3em;
  margin: 0;
  color: #fff !important;
  background-color: #21c1ff;
}

.mobile-sidebar--button:hover {
  cursor:pointer;
}

.mobile-sidebar ul {
  list-style-type:none;
  padding:0;
  margin:0;
}

.main-sidebar h3 {
  margin-top:0;
  margin-bottom:0;
}

.main-sidebar h4 {
  margin-top:0;
  margin-bottom:0;
}

.main-sidebar .sticky {
  top:4em;
  margin-bottom: 5.1em;
}

.main-sidebar ul, .mobile-sidebar ul {
  list-style-type:none;
  padding:0;
  margin:0;
}

.main-sidebar li, .mobile-sidebar li {
  margin:1em 0;
}

.main-sidebar a, .mobile-sidebar a {
  color:#000;
  font-size:.9em;
  text-decoration:none;
}

.main-sidebar a:hover {
  text-decoration:underline;
}

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.sticky:before,
.sticky:after {
  content: '';
  display: table;
}

/* sidebar switch */

.sidebar-button--container {
  font-weight:300;
}

.sidebar-button--container a:hover {
  cursor:pointer;
  text-decoration:none;
  background-color:#21c1ff;
  color:#fff;
}

.switch__active {
  font-weight:300;
  color:#000 !important;
  background-color:rgba(169, 235, 251, 0.89);
}

.content__switch {
  border:1px solid #21c1ff;
  padding:.5em;
  display:inline-block;
}

.gallery__switch {
  border:1px solid #21c1ff;
  border-left:0;
  padding:.5em .5em .505em;
    display:inline-block;
}

.sidebar-button--container {
  margin-bottom:1em;
}

.sidebar--button {
  font-size:1.25em;
  border:1px solid #21c1ff;
  padding:.6em 2.35em;
  display:inline-block;
  margin-bottom:.5em;
}

.sidebar--button-request {
  font-size:1.25em;
  border:1px solid #21c1ff;
  border-bottom:0;
  padding:.6em 1.89em;
  display:inline-block;
}

/* content link section */

.content-links {
  display:flex;
  flex-wrap:wrap;
}

h2.content-links--header {
  margin-top:3em;
}

.content-links a {
  border:1px solid #21c1ff;
  width:50%;
  padding:1em;
  color:#000;
  text-decoration:none;
  background-color:#fff;
  transition:.1s background-color ease;
}

a.sub-link__active {
  background-color:rgba(169, 235, 251, 0.89)
}

.content-links a:nth-child(even) {
  border-left:0;
}

.content-links a:nth-child(n+3) {
  border-top:0;
}

.content-links a:hover {
  color:#fff;
  background-color:#21c1ff;
}

.ui-loader-default {
  display:none;
}


.sidebar__collapse {
  margin:1em 0;
}

.sidebar__collapse--content {
  display:none;
}

.collapse--link:hover {
  cursor:pointer;
}

.collapse--link:before {
  content:"+";
}

.collapse--link-open:before {
  content:"-" !important;
}

.program-sub-link li{
  margin:0;
}

.program-sub-link li a {
  border:1px solid #21c1ff;
  border-top:0;
  padding:.5em .7em;
  display:block;
  margin:0;
}

.program-sub-link li:first-child a {
  border-top:1px solid #21c1ff;
}

.program-sub-link li a:hover {
  text-decoration:none;
  background-color:#21c1ff;
  color:#fff;
}


@media (min-width:680px) {
  .main-sidebar {
    display:block;
    width:27%;
    float:left;
    padding:.5em 1em 1.5em 0;
    background-color: #fff;
    z-index: 200;
  }
  
  .mobile-sidebar {
    display:none;
  }
  
  .main-sidebar ul {
    margin:1em 0;
  }
  
  .main-sidebar li, .mobile-sidebar li {
    margin:.3em 0;
  }
  
  .program-sub-link li{
    margin:0 !important;
  }
  
  .program-sub-link li a{
    margin-left:auto;
    max-width:160px;
  }

}

@media (min-width:980px) {
  .main-sidebar {
    display:block;
    width:25%;
    float:left;
    padding:.5em 2em 1.5em 0;
    background-color: #fff;
    z-index: 200;
  }
  
  .main-content {
    float:left;
    width:77%;
    max-width:650px;
  }
}