/*
Right slidebar or Related resources block styles starts below
*/

/*
If using as a 2 column add:;
<div class="col-sm-4" id="relatedResourcesColumn">
as the parent div - see customer-experience.php
*/
.result{
   /* background-color: #323f49;*/
    padding: 0px 0 17px;
    min-height: 185px;
    width: 100%;
    height: 100%;
    line-height: 1.2;
}
.result-item {
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 35px;
}

.resource-details {
    padding: 10px 0 0 30px;
    margin-right: -15px;
    height: 226px;
    overflow: hidden;
}

.resource-details div.resourceType p {
    color: #F15D22;
    margin: 0;
    font-size: 17px;
}

div.col-sm-12.resource-image {
    height: 200px;
    width: 100%;
    overflow: hidden;
}

.results-content {
  font-family: "bariol_regular";
  font-size: 18px;
}

.carousel-inner .active.left { left: -33%; }
.carousel-inner .next        { left:  33%; }
.carousel-inner .prev        { left: -33%; }


@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(33%, 0, 0);
      transform: translate3d(33%, 0, 0);
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-33%, 0, 0);
      transform: translate3d(-33%, 0, 0);
  }
}

@media (max-width: 767px) {
.carousel-inner .active.left { left: -100%; }
.carousel-inner .next        { left:  100%; }
.carousel-inner .prev        { left: -100%; }
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
  }

  .result-item{
  display:none;
  }

  .testclass.testclass3{
  display:block;
  }
    .testclass.testclass2{
  display:block;
  }

}

.resources-button-dark{
    border-color: white;
    color: white;
    background-color: transparent;
    font-family: "bariol_regular_bold";
    font-size: 14px;
    height: 45px;
    padding: 11px 0px;
    text-transform: uppercase;
    width: 197px;

}
.resources-button-light{
    border-color: #333e49;
    color: #333e49;
    background-color: transparent;
    font-family: "bariol_regular_bold";
    font-size: 14px;
    height: 45px;
    padding: 11px 0px;
    text-transform: uppercase;
    width: 197px;
}
.result-item-inner{
  height: 255px;
  overflow: hidden;
  /*min-height: 240px;*/
  padding: 40px 30px;
  margin: 0 4px;
  background-color: white;
}

.result-view-button {
    position:absolute;
    top:177px;
    left:30px;
    width:48px;
    height:36px;
    padding: 8px 12px 6px 12px;
    background: transparent;
    font-family: "bariol_regular_bold";
    font-size: 16px;
    color: white;
    border: 1px solid white;
    background-color: #00A0AF;
    border-color: #00A0AF;
    box-shadow: 2px 3px 1px 0 rgb(0, 114, 125);
    color: #FFFFFF !important;
    outline: none !important;
}
.result-view-button:hover {
    background-color: #F25D22;
    border-color: #F25D22;
    box-shadow: 2px 3px 1px 0 rgb(168, 77, 15);
    color: #FFFFFF !important;
}

.result-hover{
    position:relative;
    text-align:center;
    overflow: hidden;
}

.result .type{
    color: #f25d22;
    font-family: "bariol_regular";
    font-size: 18px;
    margin: 0;
}
.result h3 {
    font-family: 'bariol_regular';
    font-weight: 600;
    color: #16a3b2;
    font-size: 22px;
    margin: 5px 0 5px 0;
    line-height: 1.2em;
    max-height: 2.4em;
    overflow: hidden;
}
.result .description{
    color: #323f49;
    font-family: "bariol_regular";
    font-size: 18px;
    max-height: 6em;
}
.readmore {
  display: none;
}
#relatedResourcesColumn {
    padding:0;
    margin-top: 25px;
    margin-bottom: 10px;
    padding-left: 18px;
    width: 28% !important;
}

.featuredResourcesData h4{
    font-size: 25px;
    font-family: "bariol_regular";
    color: #323f49;
    margin-top: 0px;
    margin-bottom: 18px;
}
.featuredResourcesData h4{
    font-size: 36px;
    font-family: "bariol_regular";
    color: white;
    margin-bottom: 30px;
}
.featuredResourcesData {
    text-align: center;
    padding: 0px 0 0px 0;
    margin: 5px 0 5px 0;
}

/*Courousel view for mobile devices*/
.sidebar-mobile-carousel{
    padding: 0 10%;
    padding-top: 0px;
}
.sidebar-mobile-carousel-item{
     /* background-color: white;*/
    text-align: left;
     /* padding:40px 30px;*/
    /*    min-height: 327px;*/
     /* min-height: 233px;*/
}
.sidebar-mobile-carousel-item a:hover{
    text-decoration: none;
}

#featuredResourceCarousel .carousel-control.left {
    background-image: none;
}
#featuredResourceCarousel .carousel-control.right {
    background-image: none;
}
#featured-resource-slider .carousel-control {
    opacity: 1;
    width: 10%;
    background-color: white;
    height: 460px;
}
#featuredResourceCarousel .carousel-control .left-arrow{
    left: 25%;
    position: absolute;
    top: 36%;
}
#featuredResourceCarousel .carousel-control .right-arrow{
    position: absolute;
    top: 36%;
    right: 38%;
}

@media (max-width: 767px) {
    .featuredResourcesData .result .type {
        font-size: 13px;
    }
    .result .description {
        font-size: 18px;
    }
  .result .type {
        font-size: 18px;
    }
  .result h3 {
    font-size: 20px;
    margin: 0px 0px 5px;
  }
  .featuredResourcesData {
        padding: 0px 0px 15px;
    }
  .featuredResourcesData h4 {
        font-size:25px;
    }
  .result-item-inner {
    padding: 40px 30px;
    margin: 0px 4px;
    }
  .carousel-control {
    /*top:  -15px;*/
  }
  div.col-sm-12.resource-image img {
    display: block;
    margin: 0 auto;
    width:100%;
    max-width:360px;
  }
  .results-content {
    width: 90%;
  }
  .result-view-button {
     top: auto;
     left:auto;
  }
  .featuredResourcesData {
    padding-bottom: 0px;
    padding-top: 0px;
  }
  .result {
    height:  450px;
  }
  .sidebar-mobile-carousel-item {
    padding-bottom:  0px;
  }
  .resource-details {
    padding: 10px 20px 0;
    overflow: hidden;
    max-width: 400px;
    margin: 0 auto;
    }
  #featured-resource-slider .carousel-control {
    height:  100%;
  }

  @media (max-width: 500px) {
    div.col-sm-12.resource-image {
        height: auto;
        width: 100%;
        overflow: hidden;
    }
    .result {
    height:  450px;
  }
    .results-content {
    width: 90%;
  }
   }
}