body {
  background-color: rgb(255, 255, 255);
  
}

.courses_page h4 {
  margin-top: 2rem;
}

#main {
  margin: 30px 10%;
}

.the_content {
  max-width: 1244px;
  width: 100%;
  margin: 0 auto;
}

#live_courses {
  width: 101%;
}

#card_slider {
  overflow: hidden;
  position: relative;
}

#card_slider_slide {
  position: relative;
  height: 0;
  width: 103%;
  /*overflow: hidden;*/
}

.card a {
  display: block;
  margin: 2px;
}

.live_course a {
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.3);  
}

.card {
  float: left;
  width: 25%;
  position: relative;
}


.caption {
  background-color: rgba(0,0,0,0.6);
  color: #efeeee;
  font-size: 1vw;
  font-weight: 600;
  line-height: 3vw;
  position: absolute;
  right: 2px;
  top: 2px;
  padding: 0 1vw;
  border-radius: 3px;
}

.card .caption a {
  color: #efeeee;
  display: inline;
}

.caption .edit_link {
  color: #D60D0D;
  display: inline-block;
  font-size: 0.8em;
}
.caption .edit_link::after {
  font-family: tsn;
  content: "\e818";
}


#card_slider_container {
  position: relative;
}

.pre_nav, .next_nav {
  color: rgba(40, 43, 152, 0.8);
  font-size: 3.2em;
  position: absolute;
  top: 45%;
}

.pre_nav {
  left: -9%;
}
.pre_nav::after {
  content: " \e81b";
  font-family: tsn;
}

.next_nav {
  right: -9%;
}
.next_nav::after {
  content: " \e81c";
  font-family: tsn;
}

.filterBy {
  margin: 12px auto;
  max-width: 380px;
  width: 60%;
}

.filterBy #input {
  background-color: rgba(255,255,255,0.7);
  border: 1px solid #ddd;
  font-size: 1.1em;
  color: #616587;
}

.slider_topper {
  margin-bottom: 10px;
}

.st_left {
  width: 100%;
}

#count {
  /*background-color: rgba(255,255,255,0.69);*/
  background-color: #ff2e00;
  border-radius: 100%;
  color: #fff;
  display: inline-block;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.972em;
  padding: 0;
  text-align: center;
  width: 2.1em;
  display: inline-block;
}

#showing {
  margin-left: 5%;
  display: inline-block;
}

.reset {
  display: inline-block;
  width: 50px;
}

#show_all {
  color: #FF2E00;  
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  line-height: 1em;
  padding: 3px;
  font-size: .7em;
}

.category_links {
  font-size: .7em;
  color: #fff;
  width: 750px;
  margin: 6px auto 0;
}

.click_cat {
  background-color: rgba(0, 159, 244, 0.6);
  border-radius: 2px;
  line-height: 1em;
  padding: 3px;
  white-space: nowrap;
}

.click_cat:hover, #show_all:hover {
  outline: 1px solid #ccc;
}

.selected {
  background-color: rgba(17, 82, 55, 0.6);
  color: #4bee5f;
}





@media (max-width: 1040px) {

}

@media (max-width: 960px) {

}