/**
 * $Carousel
 */
#hero {
    width: 100%;
    height: 500px;
    padding: 0;
    background-color: #F6F6F6;
    overflow: hidden;
    /*padding-top: 2em;*/
}
#hero p {
  font-weight: 100;
  font-size: 1.1em;
  line-height: 1.4em;
}
/* TO DO adapt slick-prev and slick-next to use generic prev and next button styles */
.hero-carousel.slick-slider .slick-prev,
.hero-carousel.slick-slider .slick-next {
  border: 0;
  top: 20%;
}

.aboutUs-slide {
  width:100%;
  height: auto;    
  }

.carousel-slide {
  height: 500px;
  background-position: center;
  z-index: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
}
.carousel-textbox {
  background-color: #fff;
  /*for ie */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.8)), color-stop(100%, #ffffff));
  /* Chrome,Safari4+ */
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.8) 0%, #ffffff 100%);
  /* FF3.6+ */
  margin-top: 20px;
  position: absolute;
  max-width: 500px;
  bottom: 0;
  padding: 0.5em;
}

.hero-carousel {
        display: block;
        list-style-type: disc;
        -webkit-margin-before: 0px;
        -webkit-margin-after: 0px;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
        -webkit-padding-start: 0px;
    }

.carousel-textbox h2 {
  font-weight: 700;
  color: #4E1A43;
  /*font-size: 0.9em;*/
  margin-bottom: 0.5em;
}
.carousel-textbox h2:after {
  display: none;
}
#hero .carousel-textbox p {
  font-size: 0.9em;
  margin-bottom: 0.2em;
}
#hero .carousel-textbox a {
  font-size: 0.9em;
  font-weight: 600;
  color: #A64081;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.carousel-textbox a:hover {
  color: #4E1A43;
}
/**
 * $Showcase page
 */
#instruction-wrap .slick-dots li {
  margin: 0px 5px;
}
#instruction-wrap {
  width: 100%;
  height: auto;
  padding: 80px 0 0 0;
  background-color: #F6F6F6;
  overflow: hidden;
}
.instruction-carousel {
  height: 600px;
}
.instruction-slide {
  height: 800px;
  background-position: center;
  background-size: 50%;
  background: white;
  position: relative;
}
.instruction-image {
  width: 80%;
  margin: 0 auto;
}
.instruction-carousel h1 {
  margin: 0em 0 0.7em 0;
  font-size: 1.5em;
  text-align: center;
}
.instruction-carousel h1:after {
  display: none;
}
.instruction-carousel h2 {
  margin: 5em 0 0.5em 0;
  text-align: center;
  color: #A64081;
  font-size: 1.2em;
  font-family: arvo;
  text-transform: uppercase;
  font-weight: 900;
}
.instruction-carousel h2:after {
  display: none;
}
.instruction-text {
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.instruction-text p {
  font-size: 1.1em;
  line-height: 1.5em;
  color: #444444;
  font-weight: 100;
}
.instruction-text a {
  font-size: 1.1em;
  line-height: 1.4em;
  color: #A64081;
  font-weight: 600;
  display: inline-block;
  margin-top: 1em;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.instruction-text a:hover {
  color: #4E1A43;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.instruction-text p a {
  color: #A64081;
  font-weight: 600;
  display: inline-block;
  margin-top: 0em;
  font-size: 1em;
}
.instruction-buttons {
  margin: 0 auto;
  margin-top: 5em;
  text-align: center;
}
.instruction-slide .btn {
  background: #A64081;
  width: 10em;
}
.instruction-slide .btn:nth-child(odd) {
  margin-right: 1em;
}
.instruction-slide .btn:nth-child(even) {
  margin-left: 1em;
}
.instruction-half {
  height: 50%;
}
.instruction-half:nth-child(odd) {
  background: #FFFFFF;
}
.instruction-half:nth-child(even) {
  background: #F4F4F4;
}
.instruction-carousel .slick-dots {
  text-align: center;
  left: 0;
  top: 3.8em;
}
#instruction-wrap .slick-prev {
  /* display: none !important; */
  position: absolute;
  background: #A64081;
  display: block !important;
  height: 3em;
  width: 3em;
  line-height: 0;
  top: 10%;
  margin-top: -20px;
  right: 25px;
  border: 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #ffffff;
  font-family: 'arvo';
  font-weight: 300;
  font-size: 1em;
  -webkit-font-smoothing: antialiased;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 100;
  text-indent: -9999px;
  cursor: pointer;
}
#instruction-wrap .slick-next {
  /* display: none !important; */
  position: absolute;
  background: #A64081;
  display: block !important;
  height: 3em;
  width: 3em;
  line-height: 0;
  top: 10%;
  margin-top: -20px;
  right: 25px;
  border: 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #ffffff;
  font-family: 'arvo';
  font-weight: 300;
  font-size: 1em;
  -webkit-font-smoothing: antialiased;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 100;
  text-indent: -9999px;
  cursor: pointer;
}
#instruction-wrap .slick-next:after {
  content: "\f10b";
  font-family: Ionicons;
  font-size: 1.1em;
  text-indent: 0px;
  display: block;
}
#instruction-wrap .slick-prev:after {
  content: "\f108";
  font-family: Ionicons;
  font-size: 1.1em;
  display: block;
  text-indent: 0px;
}
#instruction-wrap .slick-prev:hover,
#instruction-wrap .slick-next:hover {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: #4E1A43;
}
/**
 * $Homepage intro
 */
.front-container {
  width: 80%;
  margin: 2em auto 0 auto;
  padding: 0 1em;
  overflow: auto;
}
.front-container.odd {
  background: #f8f8f8;
}
.front-intro {
  
  height: auto;
  overflow: auto;
  /* background-image: url(../img/mariprist-hand2.png);
    background-position: bottom right;
    background-repeat: no-repeat; */
}
.front-intro a {
  font-size: 1.1em;
  margin-top: 1em;
  font-weight: 600;
  display: block;
  color: #ffffff;
}
.front-intro a:hover {
  color: #FFFFFF;
}
.front-intro li {
  font-size: 0.9em;
  line-height: 1.4em;
}
.front-intro h1 {
  /* text-align: center; */
  width: 100%;
  max-width: 450px;
  /* margin: 0 auto; */
  font-weight: 600;
  font-size: 1.2em;
  line-height: 1em;
}
.front-intro h1:after {
  display: none;
}
.front-intro hr {
  margin: 0 auto;
}
.front-intro p {
  font-size: 1.2em;
  font-weight: 100;
  line-height: 1.6em;
}
.front-intro img {
  margin-top: 1em;
}
.front-intro .btn .icon {
  padding-left: 0.5em;
  vertical-align: middle;
}
.features {
  margin: 2em 0 0.5em 0;
}
.features li {
  display: block;
  padding: 0.3em 0 0.3em 0;
}
.features li:before {
  content: "\f120";
  font-family: 'Ionicons';
  font-weight: bold;
  font-size: 1.5em;
  color: #B05790;
  vertical-align: middle;
  padding-right: 0.5em;
}
/**
 * $Standard page intro
 */
#page-intro {
  width: 100%;
  height: auto;
  padding: 5em 1em 3em 1em;
  background-color: #f6f6f6;
  font-weight: 100;
}
#page-intro hr {
  margin: 2em 0 2.5em 0;
}
#page-intro h1 {
  font-weight: 600;
}
#page-intro-photobg {
  position: relative;
  width: 100%;
  height: auto;
  padding: 7em 1em 1em 1em;
  font-weight: 100;
  /* Note: we need to set transparency on this element, and also set the background image as an inline style
    because it is editable in the cms (it's a background image so we can use 'background-size:cover' to resize it to fit the content).
    Using an after: pseudoelement for the transparency doesn't work because you can't set
    pseudoelement styles inline. And using a separate div for opacity doesn't work because the height of the intro div is variable.
    As a result I am using a gradient trick to set the background opacity - http://css-tricks.com/snippets/css/transparent-background-images/-
    and as this has to be declared in the same background: declaration as the image, it is all inline. Bit hacky but there you go. */
}
#page-intro-photobg h1 {
  font-size: 2.5em;
}
#page-intro p,
#page-intro-photobg p {
  font-size: 1.2em;
  line-height: 1.4em;
  width: 100%;
}
#page-intro hr,
#page-intro-photobg hr {
  margin: 1em 0 1.7em 0;
}
/**
 * $Sidebar
 */
#sidebar,
#sidebar-sticky-wrapper {
  display: none;
}
/**
 * $Contraceptive table mobile - currently works by hiding the table content and styling up repeated list content.
 * Can probably do this a better way
 */
#contra-table-wrapper table {
  display: none;
}
/* Note that desktop styles are included here even though they are display none because
they are needed at tablet size */
#contra-table-wrapper table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}
#contra-table-wrapper {
  font-size: 1em;
  overflow: hidden;
  padding-top: 1em;
}
#contra-table-wrapper table td,
#contra-table-wrapper table th {
  padding: 0.6em 1.2em;
}
#contra-table-wrapper table thead th {
  background-color: #4E1A43;
  color: #FFFFFF;
  font-size: 1.2em;
  font-weight: 700;
  font-family: Arvo;
}
#contra-table-wrapper table thead th:first-child {
  border: none;
}
#contra-table-wrapper table tbody td {
  /* border-left: 1px solid #000000; */
  font-size: 0.9em;
}
#contra-table-wrapper table tbody .alt td {
  background: #f6f6f6;
  color: #525252;
}
#contra-table-wrapper table tbody td:first-child {
  border-left: none;
}
#contra-table-wrapper table tbody tr:last-child td {
  border-bottom: none;
}
.subtitle {
  background: #B05790;
  color: #ffffff;
  font-weight: 700;
}
#contra-table-wrapper ul li {
  width: 100%;
  display: block;
  padding: 0.5em 1em;
  font-size: 0.9em;
}
#contra-table-wrapper .info:nth-of-type(even) {
  background-color: #f4f4f4;
}
#contra-table-wrapper .type {
  background: #4E1A43;
  color: #FFFFFF;
  font-weight: 700;
  font-family: Arvo;
  font-size: 1em;
}
#contra-table-wrapper .title {
  background: #B05790;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.9em;
}
#contra-table-wrapper ul li span {
  font-weight: 900;
}
/**
 * $Body content
 */
#body-content-wrap {
  width: 100%;
  overflow: auto;
  margin-left: 0;
  margin-top: 2em;
}
.body-content {
    width: 100%;
    float: left;
    margin-bottom: 3em;
    /*padding-left: 1em;
    padding-right: 1em;*/
}
.body-content:last-of-type {
  margin-bottom: 3em;
}
/*.body-content ~ .body-content {
    margin-top: 0px;
}*/
.body-content p {
  font-weight: 100;
  font-size: 0.9em;
  line-height: 1.4em;
  widows: 3;
  orphans: 3;
}
.body-content h2 {
  font-size: 1.9em;
}
.padded {
  margin: 1em 0 1em 0;
}
.full-width-images {
  display: block;
  overflow: auto;
  width: 100%;
  height: 600px;
  background-position: top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
  z-index: -100;
}
.full-w1 {
  background-image: url('/core/images/6.jpg');
}
.full-w2 {
  background-image: url('/core/images/8.jpg');
}

/**
 * $Product shots & packaging pictures
 */
.packaging {
  width: 500px;
  margin: 0 auto;
}
#points h1 {
  text-align: center;
}
/**
 * $Testimonials and blockquotes
 */

.testimonial-container {
  margin: 0 auto;
  padding: 2em 0;
  background: #f8f8f8;
  width: 80%;
  overflow: hidden;
}
.testimonial-container h1 {
  font-size: 1.2em;
}
.testimonial-container h2 {
  width: 100%;
}
.testimonial-container h2:after {
  display: none;
}
.main-testimonial {
  width: 100%;
  font-size: 0.9em;
  line-height: 1.5em;
  margin: 2em auto;
}
.main-testimonial blockquote:before,
.main-testimonial blockquote:after {
  font-size: 230px;
  margin-left: -0.1em;
}
.main-testimonial .testimonial-left {
  display: none;
}
.main-testimonial .testimonial-right {
  width: 100%;
}
.secondary-testimonial .testimonial-left,
.secondary-testimonial .testimonial-right {
  margin-top: 3em;
  margin-bottom: 1em;
  width: 100%;
}
blockquote {
  position: relative;
}
blockquote a {
  position: relative;
}
blockquote:before {
  content: "\201C";
  font-family: 'Georgia';
  font-weight: bold;
  font-size: 96px;
  color: rgba(166, 64, 129, 0.1);
  position: absolute;
  padding-top: 0.3em;
}
blockquote:after {
  content: "\201D";
  font-family: 'Georgia';
  font-weight: bold;
  font-size: 96px;
  color: rgba(166, 64, 129, 0.1);
  position: absolute;
  padding-top: 0.2em;
  right: 0.2em;
}
cite {
  display: block;
  margin-top: 1em;
  color: #ccc;
}
/**
 * $Textboxes and their arrow link styles
 */
.textbox {
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 1em;
}
.textbox a {
  color: rgba(0, 0, 0, 0.5);
  display: block;
  padding-top: 1em;
}
.textbox a:after {
  content: "\f10a";
  font-family: Ionicons;
  padding-left: 0.6em;
  vertical-align: middle;
}
.textbox a:hover {
  color: rgba(0, 0, 0, 0.9);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
/**
 * $Highlights
 */
.item {
  float: left;
  width: 100%;
  color: white;
}
.highlight-image-1,
.highlight-image-2,
.highlight-image-3 {
  width: 100%;
  height: 200px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#highlight-image-overlay-1,
#highlight-image-overlay-2,
#highlight-image-overlay-3 {
  height: 200px;
}
#highlight-image-overlay-1 {
  background: #361919;
  /* For browsers that don't support rgba */
  background: rgba(200, 57, 85, 0.5);
}
#highlight-image-overlay-2 {
  background: #361919;
  /* For browsers that don't support rgba */
  background: rgba(229, 184, 26, 0.5);
}
#highlight-image-overlay-3 {
  background: #361919;
  /* For browsers that don't support rgba */
  background: rgba(76, 67, 172, 0.5);
}
.highlight-text-1,
.highlight-text-2,
.highlight-text-3 {
  padding: 0.8em;
}
.highlight-text-1 {
  background-color: #C83955;
}
.highlight-text-2 {
  background-color: #E5B81A;
}
.highlight-text-3 {
  background-color: #4C43AC;
}
.item h4 {
  padding: 0.3em 0 0.3em 0;
}
.item a {
  font-weight: 600;
  display: block;
  padding: 1em 0 0 0;
}
.more:after {
  content: "\f10a";
  font-family: Ionicons;
  padding-left: 0.6em;
  vertical-align: middle;
}
.more:hover {
  color: rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
/**
 * $Information
 */
#information h4 {
  text-align: center;
}
#information ul {
  margin: 0 1em 0 1em;
}
/**
 * $FAQs
 */
.faqs {
  width: 100%;
  margin: 0 auto;
  padding-top: 4em;
  padding-bottom: 2em;
}
.body-content .faqs {
  padding-top: 0;
}
.question {
  background: #A64081;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1em;
  line-height: 2em;
  vertical-align: middle;
  margin-top: 4px;
  padding: 0.5em 1em 0.4em;
  color: #fff;
}
.question:hover {
  cursor: pointer;
  background-color: #782A67;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.question-active {
  background: #782A67;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.answer {
  display: none;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  font-weight: 100;
  color: #525252;
  background: #FFFFFF;
  padding: 1em 1.5em;
  border-left: 2px solid #782A67;
  border-right: 2px solid #782A67;
  border-bottom: 2px solid #782A67;
  padding: 0.5em 1em 0.4em;
}
.answer p {
  line-height: 1.5em;
  font-size: 1em;
  margin-bottom: 1em;
}
.answer .more {
  font-weight: 600;
  font-size: 1em;
  color: #A64081;
}
.answer a:hover {
  color: #782A67;
}
.faq-arrow {
  content: " ";
  font-family: Ionicons;
  float: right;
  margin-right: 0.2em;
}
.faq-arrow:before {
  content: "\f123";
}
.active-arrow:before {
  content: "\f126";
}
/**
 * $Footer
 */
#footer {
  width: 100%;
  height: 200px;
  background-color: #4E1A43;
  position: relative;
  bottom: 0;
  clear: both;
  /* margin-top: 3em; */
}
#footer-bottom {
  height: 1.8em; 
  width: 100%;
  position: fixed;
  bottom: 0;
 //background-color: #A64081;
  padding: 0 0.5em 0 0.5em;
  color: darkgray;
}
#footer-logo {
  float: left;
}
#footer-logo img {
  width: 185px;
}
#footer-logo a {
  margin: 1.2em 0.8em 0.8em 0.8em;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display: block;
}
#footer-logo a:hover {
  margin: 1.2em 0.8em 0.8em 0.8em;
  opacity: 0.5;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#footer-social-links {
  float: right;
}
/* Footer links & legal */
.footer-links-wrapper {
  display: block;
  position: absolute;
  top: 220px;
}
/* Footer legal */
.footer-legal {
  float: left;
  color: #FFFFFF;
  margin-right: 3em;
  font-size: 0.9em;
  line-height: 1.2em;
  margin: 0 10% 0 10%;
}
.footer-legal dt {
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 0.5em;
}
.footer-legal a {
  color: rgba(255, 255, 255, 0.7);
  display: block;
  font-weight: 600;
  padding: 1em 0 0.1em 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.footer-legal a:hover {
  color: #ffffff;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
/* Round social link buttons */
.round-button {
  width: 2em;
  height: 2em;
  background-color: #FFFFFF;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  float: right;
  display: block;
  font-size: 1.4em;
  line-height: 2em;
  vertical-align: middle;
  color: #A64081;
  margin-top: 1.5em;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.round-button:nth-child(2) {
  margin-right: 0.7em;
}
.round-button:hover {
  background-color: #4E1A43;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
/* Call centre teaser */
#call-teaser {
  background: #ffffff;
  position: absolute;
  top: 2em;
  padding: 1.5em;
  height: 170px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}
#call-teaser h2 {
  font-family: arvo;
  font-size: 1em;
  text-transform: uppercase;
  font-weight: 900;
  color: #A64081;
  margin-bottom: 0.6em;
}
#call-teaser h2:after {
  display: none;
}
#call-teaser:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 0px 15px 15px;
  border-color: transparent #FFFFFF;
  display: block;
  width: 0;
  z-index: 1;
  right: -15px;
  top: 100px;
}
#call-teaser p {
  margin-bottom: 0.5em;
  font-size: 0.9em;
}
#call-teaser p:before {
  content: "\f2d2";
  font-family: 'Ionicons';
  font-weight: bold;
  font-size: 144px;
  color: rgba(166, 64, 129, 0.1);
  vertical-align: middle;
  position: absolute;
  padding-top: 0.1em;
  left: 1.2em;
  -webkit-transform: scale(-1, 1);
  -moz-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
#call-teaser a {
  color: #B05790;
  font-size: 0.9em;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#call-teaser a:hover {
  color: #4E1A43;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
/**
 * $Section index
 */
.page-intro-index {
  width: 100%;
  height: auto;
  padding: 8em 1em 3em 1em;
  background-color: #f6f6f6;
  font-weight: 100;
}
.page-intro-index p {
  font-size: 1.25em;
  line-height: 1.5em;
}
.page-intro-index img {
  display: none;
}
.section-index ol, ul {
    list-style: none;
    display: block;
    -webkit-margin-start: 0px;
    -webkit-padding-start: 0px;
}
.section-index li {
    margin: 1em 0 0 0;
    display: list-item;
    border-radius: 25px;
    border: 2px solid #a0a7b2;
    padding: 32px;
    box-shadow: 6px 6px 3px #cdd2d8;
}
.section-index li img {
    margin: 0 0 0 0;
    display: block;
    width: 100%;
    height: auto;
}
.section-index li h4 {
  font-size: 1.2em;
  color: #A64081;
  margin-top: 0.25em;
}
.section-index li hr {
  margin: 1.5em 0 1.2em 0;
  background-color: #A64081;
}
.section-index a {
    text-decoration: none;
}
/**
 * $Resources
 */
.resources-list h2 {
  margin: 3em 0 2em 0;
}
.resources-list h2:first-child {
  margin-top: 0;
}
.resources-list li {
  margin-bottom: 3em;
  border-bottom: 1px solid #d4d4d4;
  padding-bottom: 2em;
  padding-left: 3em;
}
.resources-list li:last-of-type {
  border-bottom: 0;
  margin-bottom: 0;
}
.resources-list li a h3 {
  font-size: 1.4em;
  line-height: 1.6;
  margin-bottom: 0em;
  color: #A64081;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-align: left;
}
.resources-list li a h3:after {
  display: none;
}
.resources-list li a:hover h3 {
  color: #4E1A43;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.resources-list li p {
  line-height: 1.5;
  margin-top: 0.4em;
}
.resources-list li a {
  margin-top: 1.5em;
}
.resources-list li.pdf:before {
  font-family: 'ionicons';
  position: absolute;
  content: "\f12e";
  line-height: 1em;
  font-size: 2em;
  color: #4E1A43;
  margin-left: -1.3em;
}
.resources-list li.link:before {
  font-family: 'ionicons';
  position: absolute;
  content: "\f10a";
  line-height: 1em;
  font-size: 2em;
  color: #4E1A43;
  margin-left: -1.3em;
}