* {
    box-sizing: border-box;
}
.hhs-screen-container {
    width: 640px;
    margin: 0 auto;
    max-width: 100%;
}
.hhs-screen-container .hhs-screen .slick-slide {
    width: 640px;
    max-width: 640px;
}
.hhs-screen-container .hhs-screen.slick-slider {
    border: 1px solid #cccccc;
}
.hhs-screen-selector {
    margin-top: 12px;
}
.hhs-screen-selector .slick-slide {
    margin: 0px 5px;
    background-color: #333333;
}
.hhs-screen .slick-slide {
    background-color: #cccccc;
}
.hhs-screen .slick-slide img {    
    height: 427px;
    min-height: 100px;
    min-width: 100px;
}
.hhs-screen .slick-slide img,
.hhs-screen-selector .slick-slide img {
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}
.hhs-screen-selector .slick-slide img {
    max-width: 100%;
    min-height: 70px;
    max-height: 70px;
}
.slick-prev,
.slick-next {
    top: 50%;
}
.slick-prev::before,
.slick-next::before {
    color: transparent;
    content: "";
}
.slider .slick-prev {
    background: rgba(255, 255, 255, 0.5) url("https://www.hhs.gov/sites/all/themes/project_h/css/images/carousel-left-arrow.png") no-repeat scroll 0 0;
    left: 0px;
    z-index: 5;
    border: 1px solid transparent;
}
.slider .slick-next {
    background: rgba(255, 255, 255, 0.5) url("https://www.hhs.gov/sites/all/themes/project_h/css/images/carousel-right-arrow.png") no-repeat scroll 0 0;
    right: 0px !important;
    border: 1px solid transparent;
}
.hhs-screen.slider .slick-prev,
.hhs-screen.slider .slick-next {
    background-size: 40px;
    width: 40px;
    height: 40px;
}
.slick-slider .slick-prev:hover, 
.slick-slider .slick-next:hover,
.slick-slider .slick-prev:focus, 
.slick-slider .slick-next:focus {
    background-color: rgba(255, 255, 255,1.0);
}

.hhs-screen-selector.slider .slick-prev,
.hhs-screen-selector.slider .slick-next {
    background-size: 30px;
    width: 30px;
    height: 30px;
}

.hhs-screen div div.image-slide a {
    border: none;
    outline: none;
    text-decoration: none;
}
.hhs-screen div div.image-slide span.caption {
    background-color: rgba(0, 0, 0, 0.70);
    color: #ffffff;
    display: block;
    font-family: Helvetica, sans-serif;
    font-size: 20px;
    height: 83px;    
    padding: 15px 20px;
    text-align: left;
    width: 100%;    
    position: relative;
    margin-top: -83px;
}
.hhs-screen div div.image-slide span.caption a {
    color: #ffffff;
    text-decoration: underline;
}
.hhs-screen div div.image-slide span.caption:empty {
    background: none;
    display: none;
}
.hhs-screen-selector .slick-slide {
    border-top: 7px solid #ffffff;
    border-bottom: 7px solid #ffffff;
}
.hhs-screen-selector .slick-slide.slick-current {
    border-top: 7px solid #fbae17;
    border-bottom: 7px solid #fbae17;
}
.hhs-screen-container input.pagerer-page {
    width: 35px;
    height: 35px;
    border: solid 1px  #ccc;
    text-align: center;
}
.slick-slider+.pagerer-pager {
  padding-bottom: 0px;
}


#hhs-screen-container-modal {
    display: none;
    position: fixed;
    z-index: 900; /* Needs to be higher than Back to Top, which has z-index of 888 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}
#hhs-screen-container-modal .content-modal,
.hhs-screen-container-modal .hhs-screen .slick-slide,
.hhs-screen-container-modal .hhs-screen .slick-slide img,
.hhs-screen-container-modal .hhs-screen div div.image-slide span.caption {
    width: 940px;
}
#hhs-screen-container-modal .content-modal {
    margin: 5% auto; /* 15% from the top and centered */
    height: 710px; /* (940 * (427 / 640)) + 83 -->  (max-width x aspect ratio) + caption height */
}
.hhs-screen-container-modal .hhs-screen .slick-slide {
    height: 710px; /* (940 * (427 / 640)) + 83 -->  (max-width x aspect ratio) + caption height */
    background-color: #353535;
}
.hhs-screen-container-modal .hhs-screen .slick-slide img {
    height: 627px; /* (940 * (427 / 640)) -->  (max-width x aspect ratio) */
}
.hhs-screen-container-modal .hhs-screen div div.image-slide span.caption {
    margin-top: 0;
    background-color: rgba(0, 0, 0, 1.0);
}
#hhs-screen-container-modal .close-button {
    z-index: 920;
    float: right;
    position: relative;
    top: -710px;
    width: 38px;
    height: 38px;
    background-color: rgba(255,255,255,0.5);
    text-align: center;
    cursor: pointer;
}
#hhs-screen-container-modal .close-button span{
    position: relative;
    top: -2px;
    font-size: 30px;
    font-weight: bold;
}
#slider-pager-modal {
    color: #ffffff;
    position: relative;
    top: -40px;
    right: -18px;
}


@media screen and (max-width: 767px) {
    .slick-prev,
    .slick-next {
        top: 40%;
    }
}


@media screen and (max-width: 720px) {
    .hhs-screen-container,
    .hhs-screen,
    .hhs-screen .slick-slide,
    .hhs-screen .slick-slide img,
    .hhs-screen div div.image-slide,
    .hhs-screen div div.image-slide span.caption,
    .hhs-screen-selector {
        width: 660px;
    }
    .hhs-screen .slick-slide {
        height: 547px;
    }
    .hhs-screen .slick-slide img {
        height: 440px;
    }
    .hhs-screen div div.image-slide span.caption {
        height: 107px;
        position: inherit;
        margin-top: 0;
        background-color: rgba(53, 53, 53, 0.75);
    }
}


@media screen and (max-width: 680px) {
    .hhs-screen-container,
    .hhs-screen,
    .hhs-screen .slick-slide,
    .hhs-screen .slick-slide img,
    .hhs-screen div div.image-slide,
    .hhs-screen div div.image-slide span.caption,
    .hhs-screen-selector {
        width: 620px;
    }
    .hhs-screen .slick-slide {
        height: 521px;
    }
    .hhs-screen .slick-slide img {
        height: 414px;
    }
}


@media screen and (max-width: 640px) {
    .hhs-screen-container,
    .hhs-screen,
    .hhs-screen .slick-slide,
    .hhs-screen .slick-slide img,
    .hhs-screen div div.image-slide,
    .hhs-screen div div.image-slide span.caption,
    .hhs-screen-selector {
        width: 580px;
    }
    .hhs-screen .slick-slide {
        height: 494px;
    }
    .hhs-screen .slick-slide img {
        height: 387px;
    }
}


@media screen and (max-width: 600px) {
    .hhs-screen-container,
    .hhs-screen,
    .hhs-screen .slick-slide,
    .hhs-screen .slick-slide img,
    .hhs-screen div div.image-slide,
    .hhs-screen div div.image-slide span.caption,
    .hhs-screen-selector {
        width: 540px;
    }
    .hhs-screen .slick-slide {
        height: 467px;
    }
    .hhs-screen .slick-slide img {
        height: 360px;
    }
}


@media screen and (max-width: 560px) {
    .hhs-screen-container,
    .hhs-screen,
    .hhs-screen .slick-slide,
    .hhs-screen .slick-slide img,
    .hhs-screen div div.image-slide,
    .hhs-screen div div.image-slide span.caption,
    .hhs-screen-selector {
        width: 500px;
    }
    .hhs-screen .slick-slide {
        height: 441px;
    }
    .hhs-screen .slick-slide img {
        height: 334px;
    }
}


@media screen and (max-width: 520px) {
    .hhs-screen-container,
    .hhs-screen,
    .hhs-screen .slick-slide,
    .hhs-screen .slick-slide img,
    .hhs-screen div div.image-slide,
    .hhs-screen div div.image-slide span.caption,
    .hhs-screen-selector {
        width: 460px;
    }
    .hhs-screen .slick-slide {
        height: 414px;
    }
    .hhs-screen .slick-slide img {
        height: 307px;
    }
}


@media screen and (max-width: 480px) {
    .hhs-screen-container,
    .hhs-screen,
    .hhs-screen .slick-slide,
    .hhs-screen .slick-slide img,
    .hhs-screen div div.image-slide,
    .hhs-screen div div.image-slide span.caption,
    .hhs-screen-selector {
        width: 420px;
    }
    .hhs-screen .slick-slide {
        height: 387px;
    }
    .hhs-screen .slick-slide img {
        height: 280px;
    }
}


@media screen and (max-width: 440px) {
    .hhs-screen-container,
    .hhs-screen,
    .hhs-screen .slick-slide,
    .hhs-screen .slick-slide img,
    .hhs-screen div div.image-slide,
    .hhs-screen div div.image-slide span.caption,
    .hhs-screen-selector {
        width: 380px;
    }
    .hhs-screen .slick-slide {
        height: 361px;
    }
    .hhs-screen .slick-slide img {
        height: 254px;
    }
}


@media screen and (max-width: 400px) {
    .hhs-screen-container,
    .hhs-screen,
    .hhs-screen .slick-slide,
    .hhs-screen .slick-slide img,
    .hhs-screen div div.image-slide,
    .hhs-screen div div.image-slide span.caption,
    .hhs-screen-selector {
        width: 340px;
    }
    .hhs-screen .slick-slide {
        height: 334px;
    }
    .hhs-screen .slick-slide img {
        height: 227px;
    }
}


@media screen and (max-width: 360px) {
    .hhs-screen-container,
    .hhs-screen,
    .hhs-screen .slick-slide,
    .hhs-screen .slick-slide img,
    .hhs-screen div div.image-slide,
    .hhs-screen div div.image-slide span.caption,
    .hhs-screen-selector {
        width: 300px;
    }
    .hhs-screen .slick-slide {
        height: 307px;
    }
    .hhs-screen .slick-slide img {
        height: 200px;
    }
}