#slider_img {
    position: relative;
    z-index: 1;
}

.range{
    -webkit-appearance: none;
    max-width: 520px;
    margin: 30px auto 0 auto;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    outline: none;
}

.range:hover {
    opacity: 1;
}

.range::-webkit-slider-runnable-track {
    background: #91ca64;
    width: 100%;
    height: 4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px  #cccccc; 
}

.range::-webkit-slider-thumb {
    background: #ffffff;	
    display: block;
    //margin-top: 10px;
    width: 20px;
    height: 50px;
    border: 1px solid #91ca64;	
    border-radius: 3px;
    box-shadow: 1px 1px 1px #cccccc;	
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -24px;
}

.range::-moz-range-track {
    background: #91ca64;
    width: 100%;
    height: 4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px  #cccccc; 
}

.range::-moz-range-thumb {
    background: #ffffff;	
    display: block;
    //margin-top: 10px;
    width: 20px;
    height: 50px;
    border: 1px solid #91ca64;	
    border-radius: 3px;
    box-shadow: 1px 1px 1px #cccccc;	
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -24px;
}

.range::-ms-track {
    width: 100%;
    height: 4px;
    
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}

.range::-ms-thumb {
    width: 20px;
    height: 50px;
    border: 1px solid #91ca64;	
    background: #fff;
}
.range:focus::-ms-fill-lower {
    background: #91ca64;
}
.range:focus::-ms-fill-upper {
    background: #91ca64;
}

.range::-ms-tooltip { display: none; }

.inf p {
    text-align: left;	
}

/*Рельєфний елемент*/
#inf2 {	margin-top: 80%;}
#inf2 .pointer {width: 112%;}

/*Зображення Івана Франка */
#inf3 { margin-top: 40%; }
#inf3 .pointer {width: 167%;}

/*Наскрізний елемент*/
#inf7 {	margin-top: 25%;}
#inf7 .pointer {width: 145%; margin-left: -75%;}
#inf8 {	margin-top: 25%;}
#inf8 .pointer {width: 125%; margin-left: -50%;}

/*Зображення Львівського оперного театру*/
#inf9 {	margin-top: 55%;}
#inf9 .pointer {width: 170%;}        
#inf10 {margin-top: 55%;	}
#inf10 .pointer {width: 170%;}      


/*Захисна стрічка*/
#inf12 {margin-top: 35%;}
#inf12 .pointer {width: 146%;}        
#inf13 {margin-top: 35%;	}
#inf13 .pointer {width: 166%;}    

/*Оптично-змінний елемент*/
#inf16 {margin-top:30%;}
#inf16 .pointer {width: 160%; margin-left: -92%;}
#inf17 {margin-top: 30%;}
#inf17 .pointer {width: 155%; margin-left: -85%;}

#inf2, #inf3, #inf9, #inf10, #inf12, #inf13 { margin-left: 20px!important; }
#inf7, #inf8, #inf16, #inf17 {margin-right: 20px!important; }


#inf2, #inf3, #inf4, #inf5, #inf6, #inf7, #inf8, #inf9, #inf10, #inf11, #inf12, #inf13, #inf14, #inf15, #inf16, #inf17, #inf18, #inf19 {
    display: none;
}

.pointer {   
    position: absolute;
    border-top: 1px solid #91ca64;
    z-index: 2;
}

.pointer i {
    position: absolute;
    top: -4px;
    width: 8px;
    height: 8px;
    padding: 1px;
    border: 1px solid #91ca64;
    background-color: #91ca64;
    border: 8px;
}

#inf2 i, #inf3 i, #inf4 i, #inf5 i, #inf6 i, #inf9 i, #inf10 i, #inf11 i, #inf12 i, #inf13 i,  #inf14 i, #inf15 i,  #inf18 i, #inf19 i {
    left: 100%;	
}

#inf7 i, #inf8 i, #inf16 i, #inf17 i {
    right: 100%;
}

@media screen and (max-width: 767px) {
    .pointer  { display: none}
    .inf {	margin: 0px!important;}
    .colt {position: absolute; height:80px!important; bottom:0; }
    .colb {height:80px!important; padding-left: 30px!important;}

}

@media screen and (max-width: 768px) {
    .inf {	font-size:12px!important;}
}