.c1 {background:#2E63CC;}
.c2 {background:#009EEE;}
.c3 {background:#00D0E5;}
.c4 {background:#5AECC0;}
.c5 {background:#CDE43F;}


.sliderCaption {
    z-index:2;    
    position:absolute;
    box-shadow:none;
    top:40px;
    transform: translate(-50%, -50%);
}
.sliderCaption.narrow .nameCaption {
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space:pre-wrap; /* this is for displaying whitespaces including Moz-FF.*/
    line-height:10px;
    margin-top:35px;
}

.sliderToggle {
    width:55px;
    height:55px;
    z-index:2;    
    position:absolute;
    z-index:1;
    box-shadow:none;
    top:-60px;
}

.sliderMarker {
    width:100%;
    height:100%;
    position:absolute;
    border-radius: 50% 50% 50% 0%;
    transform: translate(-50%, -50%) rotate(-45deg);
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.5);

}
.sliderInput {
    position:absolute;
    width:100%;
    top:-15%;
    left:-50%;color:#fff;    
}

.sliderInput input,.sliderInput {
    font-size:14px; font-weight:bold;
}

.sliderInput input {
    border: none;
    background:transparent;
    position:inline-block;
    max-width:25px;
    outline:none;
    box-shadow:none;
    color:#fff;
    text-align:center;
    outline: none;
}


@media screen and (max-width: 900px) {
    .sliderToggle {width:50px; height:50px;top:-50px;}
    .sliderToggle input {max-width:20px;}
    .sliderInput input,.sliderInput {font-size:11px;}
    .sliderToggle {font-size:4rem;}
 
}



@media screen and (max-width: 500px) {
    .sliderToggle {width:40px; height:40px;top:-40px;} 
}