.atr-bg-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: url(http://images.africatravelresource.com/cdn/images/bg-stripe-grid.png) repeat;
}

.atr-top-gradient {
    z-index: 50;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
    opacity: 1;
}

.atr-bottom-gradient {
    z-index: 50;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background-color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    opacity: 1;
}

.atr-image-nav-controls-wrapper {
    z-index: 1000;
    position: absolute;
    top: calc(50% - 25px);
    /*top: calc(50vh - 25px);*/
    left: 0;
    width: calc(100% - 32px);
    padding-left: 16px;
    padding-right: 16px;
}

    .atr-img-nav-button {
        display: inline-block;
        width: 22px;
        height: 50px;
    }

        .atr-img-nav-button.atr-previous {
            float: left;
            background: url(/Content/Images/sprites.png) no-repeat 0 -600px;
        }

        .atr-img-nav-button.atr-next {
            float: right;
            background: url(/Content/Images/sprites.png) no-repeat 0 -660px;
        }

@media screen and (max-width: 480px) and (orientation: portrait) {

    .atr-img-nav-button {
        -moz-transform: scale(0.5, 0.5);
        -ms-transform: scale(0.5, 0.5);
        -webkit-transform: scale(0.5, 0.5);
        -o-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
    }
}

@media screen and (max-width: 768px) and (orientation: landscape) {

    .atr-img-nav-button {
        -moz-transform: scale(0.5, 0.5);
        -ms-transform: scale(0.5, 0.5);
        -webkit-transform: scale(0.5, 0.5);
        -o-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
    }
}

.atr-videos-wrapper {
    visibility: visible;
}

    .atr-videos-wrapper.atr-hidden {
        visibility: hidden;
    }

.atr-images-wrapper {
    visibility: visible;
}

    .atr-images-wrapper.atr-hidden {
        visibility: hidden;
    }

    .atr-images-wrapper > img {
        /* Set rules to fill background */
		min-height: 100%;
		min-width: 1024px;
			
		/* Set up proportionate scaling */
		width: 100%;
		height: auto;
			
		/* Set up positioning */
		position: fixed;
		top: 0;
		left: 0;
    }

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

    .atr-images-wrapper > img {
        left: 50%;
        margin-left: -512px;
    }
}

.atr-image {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    opacity: 1.0;
    -moz-transition: opacity 0.7s ease-in-out;
    -webkit-transition: opacity 0.7s ease-in-out;
    transition: opacity 0.7s ease-in-out;
}

    .atr-image.inactive {
        opacity: 0.0
    }

.atr-video {
    /*display: none;*/
    position: absolute;
    top: 0;
    left: 0;
    /*z-index: 10;*/
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
}

#big-video-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    object-fit: cover;
}

.atr-multimedia-controls-wrapper {
    z-index: 200;
    position: absolute;
    display: none;
    bottom: 0;
    left: 0;
    width: 100%;
}

@media screen and (max-width: 767px) {

    .atr-multimedia-controls-wrapper {
        bottom: 48px;
    }

    .atr-page-wrapper.home .atr-image-counter-wrapper {
        display: none;
    }
}


@media screen and (max-width: 767px) and (orientation: landscape){
    
    .atr-multimedia-controls-wrapper {
        bottom: 0;
    }
}

.atr-multimedia-viewer {
    height: 100%;
    background-color: #000;
    overflow: hidden;
}

.atr-multimedia-controls {
    display: block;
    width: 210px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 24px;
    text-align: center;
}

    .atr-multimedia-controls a {
        color: #fff;
        line-height: 22px;
        vertical-align: middle;
    }

        .atr-multimedia-controls a:hover,
        .atr-multimedia-controls a.selected {
            color: #55e67f;
        }
        

a.atr-multimedia-control {
    display: inline-block;
    height: 17px;
    width: 22px;
    margin-left: 32px;
    margin-right: 32px;
}

    a.atr-multimedia-control.atr-play {
        background: url(/Content/Images/sprites.png) no-repeat 0 -780px;
    }

    a.atr-multimedia-control.atr-pause {
        background: url(/Content/Images/sprites.png) no-repeat 0 -810px;
        /*overflow: hidden;
        position: relative;
        width: 22px;
        height: 14px;
        top: -810px;*/
    }

@media screen and (max-width: 767px) {
    
    a.atr-multimedia-control {
        margin-left: 16px;
        margin-right: 16px;
    }
}


.atr-image-counter-wrapper {
    z-index: 100;
    position: absolute;
    bottom: 26px;
    right: 0;
    padding-bottom: 10px;
    padding-right: 16px;
    text-align: right;
}


    .atr-image-counter-wrapper > span {
        display: block;
        margin-top: 16px;
    }

.atr-image-caption-wrapper {
    z-index: 100;
    position: absolute;
    bottom: 26px;
    left: 0;
    padding-bottom: 10px;
    padding-left: 16px;
    width: 80%;
}


.atr-image-chapter-selector-wrapper {
    z-index: 100;
    position: absolute;
    top: calc(50% + 25px);
    right: 0;
    padding-right: 22px;
}

    .atr-image-chapter-selector-wrapper > a {
        display: block;
        margin-top: 32px;
        width: 16px;
        height: 18px;
        background: url(/Content/Images/sprites.png) no-repeat 0 -500px;
    }


.atr-image-chapters {
    z-index: 1010;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 38px;
    padding-right: 36px;
}

    .atr-image-chapters.atr-opaque {
        z-index: -1;
    }

    
ul.atr-image-chapter-selector {
    white-space: nowrap;
}

    ul.atr-image-chapter-selector li {
        height: 28px;
        line-height: 28px;
        margin-bottom: 1px;
        float: left;
        clear: left;
        width: 200px;
        padding-left: 15px;
        background-color: #d6d6d6;
        text-align: left;
        color: #8d8d8d;
        cursor: pointer;
    }

        ul.atr-image-chapter-selector li:hover {
            background-color: #b2b2b2;
            color: #696969;
        }

@media screen and (max-height: 767px) and (orientation: portrait) {
    
    .atr-image-counter-wrapper {
        display: none;
    }

    .atr-image-caption-wrapper {
        display: none;
    }

    .atr-image-chapter-selector-wrapper {
        display: none;
    }
    
    .atr-image-chapter-selector-wrapper {
        display: none;
    }
    
    .atr-image-caption-wrapper {
        display: none;
    }
}

@media screen and (max-width: 767px) and (orientation: landscape) {

    .atr-image-counter-wrapper {
        /*display: none;*/
        opacity: 1.0;
        bottom: 12px;
    }

    .atr-image-caption-wrapper {
        display: none;
    }

    .atr-image-chapter-selector-wrapper {
        display: none;
    }
    
    .atr-image-chapter-selector-wrapper {
        display: none;
    }
    
    .atr-image-caption-wrapper {
        display: none;
    }

    /*.atr-image-counter-wrapper .jq-image-chapter {
        display: none;
    }*/
}