.slideShow-wrapper {
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.ss-header {
    width: 100%;
    height: 55px;
    position: relative;
    border-bottom: 1px solid #e3e3e3;
}

.ss-navigation {
    position: absolute;
    right: 40px;
    bottom: 0;
}

.ss-navigation a {
    display: block;
    width: 42px;
    height: 44px;
    text-align: center;
    line-height: 57px;
    float: left;
}

.ss-navigation div {
    float: left;
    display: inline-block;
    height: 44px;
    line-height: 46px;
}

.ss-navigation div span {
    font-size: 21px;
}

.ss-navigation a i {
    width: 11px;
    height: 21px;
    display: inline-block;
}

.ss-navigation a.prev i {
    background: url("../../images/ss-arrow-left.png") no-repeat 0 0;
}
.ss-navigation a.next i {
    background: url("../../images/ss-arrow-right.png") no-repeat 0 0;
}

.ss-navigation a:hover i {
    background-position: -11px 0;
}

a.ss-close {
    background: url('/assets/gqnew/images/sprite.png') no-repeat -205px -916px;
    width: 28px;
    height: 28px;
    position: absolute;
    bottom: 6px;
    right: 0;
}

.slideshow-fancy-wrapper .fancybox-close {
    position: absolute;
    top: 15px;
    right: 10px;
    width: 42px;
    height: 44px;
    padding-top: 15px;
    background: none;
}
.carousel-element-ss {
    display: block;
}

.slideshow-fancy-wrapper .fancybox-close:before {
    content: " ";
    display: block;
    width: 14px;
    height: 14px;
    background: url("../../images/ss-close.png") no-repeat 0 0;
    position: absolute;
    left: 50%;
    top:50%;
    margin: -7px 0 0 -7px;
}
.slideshow-fancy-wrapper .ss-close {
    position: absolute;
    top: 15px;
    right: 10px;
    width: 42px;
    height: 44px;
    padding-top: 15px;
    background: none;
}
.slideshow-fancy-wrapper .ss-close:before {
    content: " ";
    display: block;
    width: 14px;
    height: 14px;
    background: url("../../images/ss-close.png") no-repeat 0 0;
    position: absolute;
    left: 50%;
    top:50%;
    margin: -7px 0 0 -7px;
}

.slideshow-fancy-wrapper .ss-close:hover, .slideshow-fancy-wrapper .ss-close:active, .slideshow-fancy-wrapper .ss-close:focus { 
    background-color: #000;
}

.slideshow-fancy-wrapper .ss-close:hover:before, .slideshow-fancy-wrapper .ss-close:active:before, .slideshow-fancy-wrapper .ss-close:focus:before { 
    background-position: -14px 0;
}

.slideshow-fancy-wrapper .owl-carousel, .slideshow-fancy-wrapper .owl-carousel .owl-wrapper-outer, .slideshow-fancy-wrapper .owl-carousel .owl-stage-outer, .slideshow-fancy-wrapper .owl-carousel .owl-item, .slideshow-fancy-wrapper .item, .slideshow-fancy-wrapper .item .container {
    height: 100%;
}
.slideshow-fancy-wrapper .owl-carousel .owl-item {
    background-color: #fff;
}
.slideshow-fancy-wrapper .item {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
}


.ss-container {
    margin-top: 20px;
}

.ss-side {
    width: 320px;
    
    overflow-y: auto;
    max-height: 100%;
    padding-right: 15px;
    position: absolute;
    left: 0;
    top: 0;
}

.ss-side h1 {
    font-size: 32px;
    line-height: 36px;
    font-family: 'Raleway', serif;
    margin-bottom: 15px;
}

.ss-side .ss-desc {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 15px;
}


.ss-image-container {
    width: calc(100% - 320px);
    text-align: center;
    padding: 0 20px;
    margin-left: 320px;
        overflow-y: auto;
    max-height: 100%;
}

.ss-image-container img {
    max-width: 100%;
    margin: 0 auto;
    width: auto !important;
}

.ss-photo-desc {
    text-align: center;
        text-align: center;
    font-size: 14px;
    line-height: 18px;
    margin: 10px 0;
}

.ss-photo-desc a {
    color: rgb(68, 68, 68);
}

.ss-photo-desc a:hover {
    color: #ee3042;
}

.ss-image-container img {
    max-height: 60vh;
}

.fancybox-overlay {
    overflow: hidden !important;
}

@media (min-width: 640px) and (max-width: 1036px) {

}

@media (max-width: 1036px) {
    .fancybox-inner {
        overflow: scroll !important;
        -webkit-overflow-scrolling: touch;
    }
    .slideShow-wrapper {
        height: auto;
    }
    .slideshow-fancy-wrapper .owl-carousel, .slideshow-fancy-wrapper .owl-carousel .owl-wrapper-outer, .slideshow-fancy-wrapper .owl-carousel .owl-stage-outer, .slideshow-fancy-wrapper .owl-carousel .owl-item, .slideshow-fancy-wrapper .item, .slideshow-fancy-wrapper .item .container {
        height: auto;
    }

    .ss-image-container img {
        max-width: 100%;
    }

    .ss-image-container {
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    .slideshow-fancy-wrapper .item .container {
        padding: 0 20px;
    }
    .ss-side {
        position: relative;
        width: 100%;
        max-height: none;
        height: auto;
        overflow-y: hidden;
        margin-bottom: 20px;
    }

}
@media (max-width: 639px) {
    .ss-header {
        display: table;
        height: 30px;
        border: 0 none;
    }
    .ss-navigation {
        display: inline-block;
        -webkit-transform: translate(-30%, 20%);
        -ms-transform: translate(-30%, 20%);
        transform: translate(-30%, 20%);
    }
    .slideShow-wrapper {
        padding: 15px;
    }
    #slideshow .breadcrumb {
        max-width: 100% !important;
        width: 100%;
        border-bottom: 1px solid #e3e3e3 !important;
        position: absolute !important;
        left: 0 !important;
        bottom: 45px !important;
        padding: 5px 0 !important;
    }
    a.ss-close {
        bottom: -2px;
    }
    .ss-side h2 {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    .ss-image-container img {
        max-height: initial;
    }
}