/* General styles for the homepage templates */
.home .homepage-intro-content-wrapper {
    background-color: #ffffff;
  }
  #homepage-intro-sidebar {
    margin-top: 40px;
  }
  @media screen and (min-width: 1024px) {
    #homepage-intro-sidebar {
      margin-top: 0;
    }
  }
  .homepage-intro-content-wrapper #homepage-intro-sidebar section.widget {
    background-color: #ffffff;
    border-radius: 0;
    margin-bottom: 2.8em;
    padding: 0;
  }

/* Slider styles */
.slider-banner {
    background-color:#001e44;
    background-repeat: repeat-x;
    background-position: top 0px left -30px;
    background-image: url(/wp-content/plugins/ooe-slider-picker/images/hub-geometric-sky-blue.svg);
    background-size: 700px;
}

.slides-wrapper {
    line-height:1.0rem;
    margin:auto;
    max-width:1200px;
    overflow:visible;
    position:relative;
}

.slides {
    list-style:none;
    margin:auto;
    max-width:1200px;
    overflow:hidden;
    padding:0;
    position:relative;
    width:100%;
}

.slider-banner .slides li,
.pager li {
    height:inherit;
    opacity:1;
    overflow:hidden;
    padding:0;
    visibility:visible;
}

.pager li a,
.pager li a:active,
.pager li a:focus {
    color:#ffffff;
    font-size: 1.25rem;
}

.pager li a:hover,
.pager li a .fa-circle:before {
    color:#FFD100;
}

.slides li.current-hero {
    overflow:hidden;
}

.slider-banner .slides li {
    display: flex;
    -webkit-transition:visibility .5s ease, opacity .5s ease;
    -moz-transition:visibility .5s ease, opacity .5s ease;
    -o-transition:visibility .5s ease, opacity .5s ease;
    transition:visibility .5s ease, opacity .5s ease;
    width:100%;
}

.slides li:not(.current-hero) {
    left:0;
    opacity:0;
    position:absolute;
    top:0;
    visibility:hidden;
}

.slides li figure {
    display:inline-block;
    margin:0;
    overflow:hidden;
    padding:0;
    width:100%;
}

.slides li figure figcaption {
    color: #ffffff;
    font-size:1.625rem;
    font-weight:600;
    line-height:1.2;
    margin: 0 auto;
    padding:40px 16px;
    -webkit-font-smoothing:antialiased;
}

.slides li figure .image-wrapper {
    height:50vw;
    max-height:376px;
    overflow:hidden;
}

.slides li figure img {
    width:100%;
}

.slides li figure figcaption p {
    font-size:1rem;
    font-weight:normal;
    margin-bottom: 0;
}

.slides li figure figcaption p.no-cta {
    margin-bottom:4rem;
}

.slides li figure figcaption a.slider-call-to-action {
    background-color:#005FA9;
    border-radius: 32px;
    box-shadow: 1px 1px 0px rgba(0,0,0,0.2);
    color: #ffffff;
    display:inline-block;
    font-size:0.875rem;
    font-weight:600;
    margin-top:16px;
    padding:16px 24px;
    text-align:center;
    text-decoration:none;
    text-transform: uppercase;
    min-width:153px;
    -webkit-transition:background-color .25s ease-out;
    -moz-transition:background-color .25s ease-out;
    -o-transition:background-color .25s ease-out;
    transition:background-color .25s ease-out;
    -webkit-font-smoothing: antialiased;
}

.slides li figure figcaption a.slider-call-to-action:hover {
    background-color:#FFD100;
    color: #001e44;
}

.pager {

    list-style:none;
    margin:0;
    padding:0 0 16px 6px;
    width:auto;
}

.pager li {
    cursor:pointer;
    display: inline-block;
    padding:10px;
}


@media screen and (min-width:768px) {

    .slides li figure .image-wrapper {
        height:47vw;
        max-height:482px;
        overflow:hidden;
    }

}

@media screen and (min-width:1024px) {

    .pager {
        bottom:-44px;
        padding:0;
        position:absolute;
        left:0;
    }
    .slider-banner {
        padding: 50px 16px;
    }

    .slides-wrapper {
        background-color: #ffffff;
    }

    .slider-banner .slides {
        padding:0;
    }

    .slider-banner .slides li {
        padding:0;
    }

    .slides li figure .image-wrapper {
        float:right;
        height:29vw;
        max-height:384px;
        overflow:hidden;
        width:64%;
    }

    .slides li figure figcaption {
        color: #0F192D;
        margin: 16px 0 0;
        padding:16px 16px 0;
        width:36%;
    }

    .slides li figure figcaption p {
        font-size: 0.9375rem;
        line-height: 1.3;
        margin-top:.5rem;
    }

    .slides li figure figcaption a {
        bottom:1.4rem;
        display:inline-block;
    }

    .slides li figure figcaption a.slider-call-to-action:hover {
        background-color:#001e44;
        color: #ffffff;
    }

    .pager {
        float:left;
        left:inherit;
        margin:auto;
        right:inherit;
    }
}

@media screen and (min-width:1232px) {

    .slides li figure figcaption p {
        line-height: 1.7;
    }
}