/**
Styles for the flexslider. These are injected directly into the page, which is why they are not included in
the main styles.css file.
 */
.section_related_resources {
  margin-bottom: 3em;
}
.section_related_resources > h3,
.section_related_resources > h4,
.section_related_resources > p {
  text-align: center;
}
.section_related_resources > p {
  margin-bottom: 1.5em;
}
/*
	Width of slides is determined by using the width of this element, so do coarse slider sizing here
 */
.flex-viewport {
  background-color: #ffffff;
  width: 75%;
  margin: 0 auto;
}
.flexslider h4 {
  color: #ed1c24;
}
.flexslider ol.flex-control-nav {
  display: none;
}
.flexslider ul.slides {
  padding: 0 !important;
}
.flexslider ul.slides > li {
  border-right: 1px solid #4d4d4f !important;
  float: left;
}
.flexslider ul.slides > li .slide_internal_wrap {
  padding: 1em;
}
.flexslider ul.slides li:only-child,
.flexslider ul.slides li:last-child {
  border-right: 0px solid #4d4d4f !important;
}
.flexslider ul.flex-direction-nav > li {
  list-style-type: none;
}
.flexslider ul.flex-direction-nav > li a {
  display: block;
}
.flexslider .flex-direction-nav .flex-next {
  right: 0 !important;
  opacity: 1 !important;
  margin-top: -35px;
  height: 60px;
}
.flexslider .flex-direction-nav .flex-prev {
  left: 0 !important;
  opacity: 1 !important;
  margin-top: -35px;
  height: 60px;
}
@media only screen and (max-width: 800px) {
  .flex-viewport {
    width: 80%;
  }
}
@media only screen and (max-width: 600px) {
  .flex-viewport {
    width: 80%;
  }
  .section_related_resources {
    margin-bottom: 0;
  }
  .flexslider {
    margin-bottom: 0;
  }
  .flexslider ul.slides > li {
    border-right: 0px solid #4d4d4f !important;
  }
  .flexslider ul > li {
    padding: 0;
  }
}