body {
    margin: 0;
    font-size: 16px
}
img {
    border: 0
}
#qzad {
    max-width: 1600px;
    margin: 0 auto
}
* {
    box-sizing: border-box
}
.map {
    background-image: url(../images/map.jpg);
}
.map-light-1 {
    z-index: 1;
    background-image: url(../images/map-lights-1.png);
    opacity: 0
}
.map-light-2 {
    z-index: 2;
    background-image: url(../images/map-lights-2.png);
    opacity: 0
}
.map-light-3 {
    z-index: 3;
    background-image: url(../images/map-lights-3.png);
    opacity: 0
}
.rangeslider,
.rangeslider__fill {
    display: block;
    height: 20px;
    width: 100%
}
.rangeslider {
    position: relative
}
.rangeslider--disabled {
    filter: alpha(Opacity=40);
    opacity: .4
}
.rangeslider__fill {
    background: #0f0;
    position: absolute;
    top: 0
}
.rangeslider__handle {
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
    position: absolute;
    background-size: 100%
}
.rangeslider__handle:after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: 100%
}
input[type=range]:focus+.rangeslider .rangeslider__handle {
    box-shadow: 0 0 8px rgba(255, 0, 255, .9)
}
.map,
.map-light-1,
.map-light-2,
.map-light-3 {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0)
}
.anim .map-light-1 {
    opacity: 1;
    transition: opacity 1s 1s;
    -webkit-transition: opacity 1s 1s
}
.anim .map-light-2 {
    opacity: 1;
    transition: opacity 1s 2s;
    -webkit-transition: opacity 1s 2s
}
.anim .map-light-3 {
    opacity: 1;
    transition: opacity 1s 3s;
    -webkit-transition: opacity 1s 3s
}
.map-wrapper {
    position: relative
}
.ratio16x9:before {
    content: '';
    display: block;
    padding-bottom: 56.25%
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}
.rangeslider__handle {
    background-image: url(../images/knob.png);
    width: 3%;
    height: 100%;
    top: 4%
}
.rangeslider__fill {
    display: none
}
.rangeslider {
    margin-top: 24px;
    padding: 2%
}
.bar-container {
    width: 98%;
    left: 1%;
    bottom: 4.5%;
    position: absolute;
    z-index: 10;
    background-position: -2px 15px;
    background-repeat: no-repeat;
    background-image: url(../images/bar.png);
    background-size: 100.5%
}
.clearfix {
    overflow: auto;
    zoom: 1
}
.copy {
    background: url(../images/copy.png) 0 0/100% no-repeat;
    position: absolute;
    width: 43%;
    height: 23%;
    right: 3%;
    bottom: 11.5%;
    z-index: 10;
    color: #fff
}
.legend {
    background-image: url(../images/legend.png);
    position: absolute;
    width: 15%;
    height: 14%;
    left: 3%;
    bottom: 15%;
    z-index: 4;
    background-size: contain;
    background-repeat: no-repeat
}
.disclaimer {
    background-image: url(../images/disclaimer.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 5;
    width: 36%;
    height: 24px;
    bottom: -2px;
    right: 3%
}
@media all and (min-width:768px) and (max-width:1024px) {
    .rangeslider__handle {
        top: 0
    }
}
@media all and (max-width:767px) {
    .rangeslider__handle {
        width: 4%;
        top: -2px
    }
    .disclaimer {
        bottom: -10px
    }
}
@media all and (max-width:480px) {
    .overlay {
        background-position: -30px
    }
    .legend {
        bottom: 18%
    }
    .copy {
        display: none
    }
    .ratio16x9:before {
        padding-bottom: 70.25%
    }
    .bar-container {
        background-position: -1px 0;
        background-size: 100%;
        background-image: url(../images/bar_mobile.png);
        bottom: 0;
        width: 84%;
        left: 8%
    }
    .rangeslider__handle {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        width: 8%;
        top: -18px
    }
    .rangeslider {
        height: 30px
    }
    .disclaimer {
        bottom: -16px
    }
}