/* Range Slider overrides default styles 
 © Type on Point 2017 - All Rights Reserved */

input[type=range].rangeslider{
-webkit-appearance: none;
	position: relative;
  border-radius: 55px;
  padding: 6px;
  
  /* box-shadow: inset 0 3px 4px rgba(3, 3, 3, .4); */
  /* border: 2px inset rgba(255, 255, 255, 0.15); */
}

/* vertical art-board slider 
#vSlide {
  margin-top: 90px;
  margin-left: -44px;
  transform: rotate(90deg); 
  height: 11px;
  width: 160px;
  z-index: -2;
  pointer-events:auto;
  background: -moz-linear-gradient(left, rgba(36,36,36,1.5) 1%, rgba(112,112,112,1.6) 3%, rgba(165,165,165,1.5) 20%, rgba(229,229,229,1.5) 90%, rgba(290,290,290,1.5) 100%);
  background: -webkit-linear-gradient(left, rgba(36,36,36,1.5) 1%,rgba(112,112,112,1.6) 3%,rgba(165,165,165,1.5) 20%,rgba(229,229,2429,1.5) 90%, rgba(290,290,290,1.5) 100%);
  background: linear-gradient(to right, rgba(36,36,36,1.5) 1%,rgba(112,112,112,1.6) 3%,rgba(165,165,165,1.5) 20%,rgba(229,229,229,1.5) 90%, rgba(290,290,290,1.5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(36,36,36,.5)', endColorstr='rgba(245,245,245,.7)',GradientType=0 ); 

  box-shadow:
  inset -4px 0px 6px 1px rgba(198, 200, 204, .9),
   inset 2px 0px 0px 0px rgba(36, 36, 36, .5),
         3px 0px 1px 1px  rgba(204, 204, 204, .3);
}*/

#rectdown,
#rectup {
  margin-top: -24px;
  margin-left:45px;
}

#vertValue, #hzrect{
  width: 55px;
  height: 30px;
  border: 1px solid #2f2f2f;
  border-radius: 2px;
  background-color: rgba(113, 113, 113, 0.35);
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 -.03em .03em #f0f0f0;
  z-index: 1232;
}

.visible {
  visibility: visible !important;
}

#WxH-con{
  position: absolute;
  bottom: 25px;
  left: calc(50% - 65px);
  visibility: hidden;
}

.WbyH{
  margin: 0 5px 0 5px;
}

#hSlider {
    position: absolute;
    top: calc(50% - 13px);
    left: 16px;
  }

.sliderImage {
  float:left;
  width:35px; 
  height:30px; 
  margin-top:11px;
  -webkit-user-select: none;
-moz-user-select: none; 
-ms-user-select: none;
 user-select: none; 
}

.sliderImage:hover .imgFilterName{
  color:#f2f2f2;
}

.imageBlur {
  -webkit-filter: blur(1px);
  filter: blur(1px);
}

/*  slider styles and actions
*, *:before, *:after {
  box-sizing: border-box;
} */

.range-slider__range {
  height: 0px;
  background: rgba(113, 113, 113, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.13);
  /* background: -moz-linear-gradient(top, rgba(6,6,6,.7) 3%, rgba(112,112,112,.75) 15%, rgba(205,205,205,.65) 60%, rgba(249,249,249,0.47) 100%),
  -webkit-linear-gradient(top, rgba(6,6,6,.7) 3%,rgba(112,112,112,.75) 15%,rgba(205,205,205,.65) 60%,rgba(249,249,249,0.37) 100%);
  box-shadow:
      inset 0px -4px 2px 1px rgba(198, 200, 204, .8),
      0px 2px 1px 1px  rgba(204, 204, 204, .4);  */
}

.rangeSlider {
  float:left !important; 
  margin-top: 20px !important; 
  margin-right: 10px !important; 
  margin-left: 10px !important; 
  width: 75%;
}

#vSlide:focus,
#size:focus {
  filter:brightness(120%);
  -webkit-filter: brightness(120%); 
  outline: transparent;
}

/* WebKit Thumb
===================================================*/
.range-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #161616;
  cursor: pointer;
  margin-top: -8px;
  /* box-shadow: inset 0 .1em .05em rgba(226, 226, 226, 0.644), 0px 2px 5px rgba(46, 46, 46, 0.7), inset 0 1px .55em rgb(3, 3, 3); 
  background: -webkit-linear-gradient(top, rgba(19,19,19,1) 22%,rgba(17,17,17,1) 29%,rgba(48,48,48,1) 60%); 
  background: linear-gradient(to bottom, rgba(19,19,19,1) 22%,rgba(17,17,17,1) 29%,rgba(48,48,48,1) 60%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#303030',GradientType=0 );*/

}

#vSlide::-webkit-slider-thumb{
  transform: rotate(-90deg);
}

.range-slider__range::-webkit-slider-thumb:hover {
  width: 30px;
  height: 30px;
  margin-top: -12px;
}


.range-slider__range:active::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  margin-top: -12px;
}


/* MS edge thumb + track etc.
===================================================*/
input[type=range]::-ms-track {
  width: 98%;
  height: 2px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 15px;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #151515;
  border-radius: 3px;
}
input[type=range]::-ms-fill-upper {
  background: #161616;
  border-radius: 3px;
}

input[type=range]::-ms-thumb {
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 1.8px 1.8px 3.3px rgba(0, 0, 0, 0.44), 0px 0px 1.8px rgba(13, 13, 13, 0.44) !important;
  border: 3px solid black !important;
  height: 20px !important;
  width: 20px !important;
  border-radius: 20px !important;
  background: #161616 !important;
  cursor: pointer !important;
}

input[type=range]::-ms-tooltip {
  display: none;
}

input[type=range]:focus::-ms-fill-lower {
    background: rgb(16, 255, 28);
}
input[type=range]:focus::-ms-fill-upper {
    background: #7264f7;
}


/* Mozilla Thumb 
===================================================*/
.range-slider__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border:  transparent;
  border-radius: 50%;
  background-color: #161616;
  cursor: pointer;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25) ;
  /* box-shadow: inset 0 .1em .05em rgba(226, 226, 226, 0.644), 0px 2px 5px rgba(46, 46, 46, 0.7), inset 0 1px .55em rgb(3, 3, 3); 
  background: -moz-linear-gradient(top, rgba(19,19,19,1) 22%, rgba(17,17,17,1) 29%, rgba(48,48,48,1) 60%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#303030',GradientType=0 );  */

}

.range-slider__range::-moz-range-thumb:hover {
  width: 30px;
  height: 30px;
}

.range-slider__range:active::-moz-range-thumb {
  width: 30px;
  height: 30px;
}

/* Value # after range slider
===================================================*/
.range-slider__value {
  display: inline-block;
  position: relative;
  width: 33px;
  height: 33px;
  color: #f2f2f2;
  line-height: 25px;
  text-align: center;
  background: rgba(0,0,0,.76);
  /* border: 2px solid rgba(0, 0, 0, 0.95); */
  padding: 7px 4px;
  margin: 12px 0 0 19px;
  border-radius: 50%;
  border: none;
  font-size: 13px;
  overflow: visible;
}

.stepper{
    list-style: none;
    padding-left: 0px;
    display: inline;
}

.stepperDown {
  position: absolute;
  height: 35px;
  width: 35px;
  margin: 10px 0 0 -65px;
  padding-right: 7px;
  background-color: rgba(112,112,112,.0);
  color: #161616;
  font-size: 18px;
  cursor: pointer;
  overflow: visible;
  border-radius: 50%;
  border:none;
  z-index: inherit;
  -webkit-user-select: none; 
	-moz-user-select: none; 
	-ms-user-select: none; 
 	user-select: none; 
}
.SD2{
  margin: -61px 0 0 19px !important;
}

.SU2{
  margin: -5px 0 0 20px !important;
}

.stepperUp {
  position: absolute;
  height: 35px;
  width: 35px;
  margin: 11px 0 0 -4;
  background-color: rgba(112,112,112,.0);
  color: #161616;
  font-size: 15px;
  cursor: pointer;
  overflow: visible;
  border-radius: 50%;
  border:none;
  -webkit-user-select: none; 
	-moz-user-select: none; 
	-ms-user-select: none; 
 	user-select: none; 
}

.stepperUp:focus,
.stepperDown:focus {
  box-shadow: inset 0 0 0 2px rgba(111,148,182,0.54);
  -webkit-animation: pulse .4s 1;
  animation: pulse .4s 1;
}

/*
.range-slider__range:focus::-moz-range-thumb {
  box-shadow: inset 0 0 0 2px rgba(111,148,182,0.54);
  -webkit-animation: pulse .4s 1;
  animation: pulse .4s 1;
} */

@-webkit-keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		box-shadow: inset 0 0 0 35px rgba(111,148,182,0.6);
		opacity: 1;
	}
	100% {
		box-shadow: inset 0 0 0 35px rgba(111,148,182,0.6);
		-webkit-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
}

@keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		box-shadow: inset 0 0 0 35px rgba(111,148,182,0.7);
		opacity: 1;
	}
	100% {
		box-shadow: inset 0 0 0 35px rgba(111,148,182,0.1);
		-webkit-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
}

/*runnable track color progress */
input[type='range']::-webkit-slider-runnable-track, 
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
}

input.blue[type='range']::-webkit-slider-runnable-track {
  background: linear-gradient(#0059b2, #074c91) no-repeat #161616;
  height:2px;
}

input.red[type='range']::-webkit-slider-runnable-track {
  background: linear-gradient(#8d1e1e, #8a1111) no-repeat #161616;
  height:2px; 
}

input.white[type='range']::-webkit-slider-runnable-track {
  background: linear-gradient(#e2e2e2, #f0f0f0) no-repeat #161616;
  height:2px; 
}

input.blue[type='range']::-moz-range-track {
  background: linear-gradient(#0059b2, #074c91) no-repeat #161616;
  height:2px;
  width:98%;
}

input.red[type='range']::-moz-range-track {
  background: linear-gradient(#8d1e1e, #8a1111) no-repeat #161616;
  height:2px;
  width:98%;
}

input.white[type='range']::-moz-range-track {
  background: linear-gradient(#e2e2e2, #f0f0f0) no-repeat #161616;
  height:2px;
  width:98%;
}

input.red[type='range']::-ms-fill-lower {
  border-radius: 0.25em;
  background: #161616;
}

input.blue[type='range']::-webkit-slider-runnable-track {
  background-size: 0% 100%;
}
input.red[type='range']::-webkit-slider-runnable-track {
  background-size: 0% 100%;
}
input.white[type='range']::-webkit-slider-runnable-track {
  background-size: 0% 100%;
}

input.blue[type='range']::-moz-range-track {
  background-size: 0% 100%;
}
input.red[type='range']::-moz-range-track {
  background-size: 0% 100%;
}
input.white[type='range']::-moz-range-track {
  background-size: 0% 100%;
}

/*   webkit track
=============================================== */
input::-webkit-slider-runnable-track-inner,
input::-webkit-slider-runnable-track-outer {
  -webkit-appearance: none;
  appearance: none;
  border: 10px;
}
/*     MS track   
=================================================*/
input[type=range]:focus::-ms-fill-lower {
  background: #161616;
}
input[type=range]:focus::-ms-fill-upper {
  background: #2f2f2f;
}

/* BORDER RADIUS */

.br-rs
{
  -webkit-appearance: none;
  opacity: 0;
  z-index: 13;
  height: 15px;
  border: none;
}

#box:hover .br-rs
 {
  opacity: 1;
}

/* next four for border radius on artborad */
#tl_rs{
  background-color: transparent;
  display: none;
  transform: rotate(45deg);
  position: absolute;
  top: 50px;
  left: -10px;
  touch-action: none;
}
#tr_rs{
  background-color: transparent;
  float: right;
  transform: rotate(135deg);
  position: absolute;
  top: 48px;
  right: -8px;
  touch-action: none;
}
#bl_rs{
  background-color: transparent;
  display: none;
  transform: rotate(315deg);
  position: absolute;
  bottom: 48px;
  left: -8px;
  touch-action: none;
}
#br_rs{
  background-color: transparent;
  display: none;
  float: right;
  transform: rotate(225deg);
  position: absolute;
  bottom: 48px;
  right: -8px;
  touch-action: none;
}

#tl_rs:hover, #tr_rs:hover, #br_rs:hover, #bl_rs:hover{
  background-color:  rgba(0, 0, 0, 0.15);
 }

.br-rs::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: rgba(34, 34, 34, .75);
  border: 2px solid rgba(255, 255, 255, 0.993);
  border-radius: 50%;
  cursor: pointer;
  margin-top: -8px;
  margin-bottom: -125px;
}

.br-rs::-moz-range-thumb{
  width: 15px;
  height: 15px;
  background: rgba(34, 34, 34, .75);
  border: 2px solid rgba(255, 255, 255, 0.993);
  border-radius: 50%;
  cursor: pointer;
}

.br-rs::-webkit-slider-runnable-track{
  background-color: rgba(0, 0, 0, 0.0);
  height: 0px;
} 

.br-rs::-moz-range-track{
  background-color: rgba(0, 0, 0, 0.15);
  height: 0px;
}

/*==========================
  Adjust for smaller screens (may not work because some styles are inline)
============================*/

@media screen and (max-width: 924px) {
  .range-slider__value {
    width: 33px;
    height: 19px;
    color: #f2f2f2;
    background: rgba(0,0,0,.3);
    padding: 7px 4px;
    margin: 18px 0 0 19px;
    border-radius: 5%;
    border: 1px solid rgba(0,0,0,.7);
    font-size: 13px;
    overflow: visible;
  }
}

@media screen and (max-width: 610px) {

  .range-slider__range::-moz-range-thumb {
    width: 25px;
    height: 25px;
  }

  .range-slider__range::-webkit-slider-thumb {
    width: 25px;
    height: 25px;
    margin-top: -11px;
  }

  input[type=range]::-ms-thumb {
    height: 25px;
    width: 25px;
  }

.sliderImage {
  width:30px; 
  height:25px; 
  margin-top:14px;
  margin-left: -10px;
}

}

/* verticle phone ~  iPhone SE */
@media screen and (max-width: 448px) {
.blurRange{
  width: 55% !important;
  margin-top: 18px !important;
}

.imageBlur {
  width: 30px;
  margin-left: -20px;
  margin-top: 12px;
}

.rangeSlider {
  margin-left: 5px !important;
  width: 80%;
}

.range-slider__value {
  display: none;
}
 /* move stepper buttons above range slider */
.stepperDown{
  margin: -10px 0 5px -59px;
  display: none;
}

.stepperUp{
  margin: -10px 0 0 -15px;
  display: none;
}

}