/* PORTAL SLIDE SHOW
 ================================================== */
#portalSlider {
    width: 100%;
    max-height: 750px;
    display: block;
}


@media screen and (min-width: 768px) and (max-width: 1023px) {
    #portalSlider + .live-data {
        /*position: absolute;*/
        /*margin-top: -274px;*/
        height: 274px;
    }
}
@media (min-width: 1024px ){
    #portalSlider + .live-data {
        position: absolute;
        margin-top: -190px;
    }
    #portalSlider + .live-data {

        background: rgba(0,65,115,0.8);
    }
}
#portalSlider + .live-data .progress {
    background: #004173;
    margin-top: -5px;
}
#portalSlider + .live-data .col-xs-12,
#portalSlider + .live-data .col-sm-4 {
    /*Hack for strange behaviour on IE9*/
    z-index: 1;
}
@media (max-width: 767px ){
    /*#portalSlider .rsImg { margin-left: 0 !important; }*/
    #portalSlider {
        max: 200px;
    }
}
@media (max-width: 992px ){
    body {
        overflow-x: hidden;
    }
}


/* TEMP */
@media (max-width: 767px ){
    .mycoustombackendslide > figure > img.img-responsive {
        position: relative;
        top: -10px;
    }
    .page-section.has-bg-image {
        padding-top: 0;
        padding-bottom: 20px;
    }
    h4.slide-has-bg-h4 { margin-top: 0; }
    .slide-has-bg-description { margin-top: 0; }
    h3.slide-has-bg-h3 { margin-top: 0; }
    h4.slide-has-bg-h4+h2.slide-has-bg-h2 {
        font-size: 24px;
    }
}


html.tablet .mycoustombackendslide .container .row .col-xs-12.col-sm-7.col-md-6 {
    width: 45%;
}

@media screen and (max-width: 767px) {
    .hotspot {
        display: none;
    }
}
.hotspot {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #0060AE;
    padding: 8px;
    transform: translate(-50%, -50%);
}
.hotspot:after {
    content: '';
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fff;
}
.hotspot__text {
    position: absolute;
    top: 0;
    left: 100%;
    background-color: #0060AE;
    color: #ffffff;
    font-size: calc(10px + .5vw);
    padding: 7px 18px 7px 5px;
    white-space: nowrap;
    margin-left: 30px;
    height: 44px;
    line-height: 29px;
}
@media screen and (min-width: 1920px) {
    .hotspot__text {
        font-size: 20px;
    }
}
.hotspot__text:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22px 20px 22px 0;
    border-color: transparent #0060AE transparent transparent;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hotspot:hover .hotspot__text {
    color: #FFC300;
}