.article-stepper h4 {
    font-size: 2.5rem;
}

.article-stepper > a {
    display: block;
    margin: 2rem auto;
    text-decoration: underline;
}

.article-stepper > a:nth-of-type(2n) {
    border: 0 none;
}

.article-stepper .carousel-control-prev {
    left: -20px;
    height: 50%;
}

.article-stepper .carousel-control-next {
    right: -20px;
    height: 50%;
}
.article-stepper .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")
}

.article-stepper .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

@media (max-width: 767px) {

    .article-stepper .carousel-inner {
        width: 90%;
        margin: 0 auto;
    }

    .article-stepper .carousel-inner .carousel-item > div {
        display: none;
    }
    .article-stepper .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

/* .article-stepper .carousel-inner .carousel-item.active, */
.article-stepper .carousel-inner .carousel-item-next,
.article-stepper .carousel-inner .carousel-item-prev {
    display: flex;
}

.article-stepper .carousel-image-container {
        height: 220px;
        width: 100%;
        background-color: #FFF;
        text-align: center;
        overflow: hidden;
        background-size: cover;
        background-position: center center;
    }

/* medium and up screens */
@media (min-width: 768px) {
    .article-stepper > a {
        display: inline-block;
    }

    .article-stepper > a:nth-of-type(2n) {
        border-left: 1px solid #CCC;
        border-right: 1px solid #CCC;
        margin-left: 2rem;
        margin-right: 2rem;
        padding-left: 2rem;
        padding-right: 2rem; 
    }

    .article-stepper .carousel-image-container {
        height: 170px;
    }

    .article-stepper .carousel-control-prev {
        left: -75px;
        height: 170px;
    }
    
    .article-stepper .carousel-control-next {
        right: -75px;
        height: 170px;
    }

    .article-stepper .carousel-inner {
        width: 100%;
        margin: 0 auto;
    }

    .article-stepper .carousel-inner .carousel-item-end.active,
    .article-stepper .carousel-inner .carousel-item-next {
        transform: translateX(25%);
    }
    
    .article-stepper .carousel-inner .carousel-item-start.active, 
    .article-stepper .carousel-inner .carousel-item-prev {
        transform: translateX(-25%);
    }

    .article-stepper .carousel {
        margin-bottom: 3rem;
    }
}

.article-stepper .carousel-inner .carousel-item-end,
.article-stepper .carousel-inner .carousel-item-start { 
    transform: translateX(0);
}

.article-stepper {
    display: block;
    text-align: center;
    border-top: 1px solid #CCC;
    margin-top: 2rem;
    margin: 2rem 0 0;
    padding-top: 3rem;
}

.article-stepper .carousel-item {
    height: 100%;
}

.article-stepper .carousel-item [class^="col-"] {
    padding-left: 5px;
    padding-right: 5px;
}

.article-stepper .carousel-image-container img {
    width: auto;
    height: 102%;
    margin: 0 auto;
}

.article-stepper .carousel-text-container {
    margin-top: 0.5rem;
    padding: 8px 8px;
    background-color: #FFF;
}

.article-stepper .carousel-text-container p {
    color: #0068AD;
    font-size: 1.8rem;
    line-height: 130%;
    font-weight: bold;
    text-align: center;
    min-height: 100px;
}

.article-stepper a {
    text-decoration: none;
    color:#777;
}

.article-stepper h3 {
    margin: 0 auto 3rem;
    text-align: center;
}

@media (min-width: 576px) {
    .article-stepper {
        margin: 2rem auto 0;
    }
}

@media (min-width: 768px) {
    .article-stepper {
        max-width: 90%;
    }
    .article-stepper h3 {
        text-align: left;
        margin-left: 2rem;
    }
}
@media (min-width: 992px) {
    .article-stepper {
        max-width: 940px;
    }  
    .article-stepper .carousel-inner {
        width: calc(100% - 30px);
    }
}




@media (min-width: 768px) {
    
    #articleStepper .carousel-inner .carousel-item-end.active,
    #articleStepper .carousel-inner .carousel-item-next {
      transform: translateX(25%);
    }
    
    #articleStepper .carousel-inner .carousel-item-start.active, 
    #articleStepper .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
    }
}

#articleStepper .carousel-inner .carousel-item-end,
#articleStepper .carousel-inner .carousel-item-start { 
  transform: translateX(0);
}