/*
* Kablo Web Site
* Tarife Secici Sayfasi
*/
.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative;direction:ltr}.noUi-base{width:100%;height:100%;position:relative;z-index:1}.noUi-connect{position:absolute;right:0;top:0;left:0;bottom:0}.noUi-origin{position:absolute;height:0;width:0}.noUi-handle{position:relative;z-index:1}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:top .3s,right .3s,bottom .3s,left .3s;transition:top .3s,right .3s,bottom .3s,left .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-base,.noUi-handle{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;left:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;left:-6px;top:-17px}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connect{background:#3FB8AF;box-shadow:inset 0 0 3px rgba(51,51,51,.45);-webkit-transition:background 450ms;transition:background 450ms}.noUi-draggable{cursor:w-resize}.noUi-vertical .noUi-draggable{cursor:n-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-large,.noUi-marker-sub{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate3d(-50%,50%,0);transform:translate3d(-50%,50%,0)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);padding-left:25px}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}


/*
* Kablo Web Site
* Tarife Secici
*/

/*--- TARIFE SECICI ---*/
.tarife-secici-cont { padding-top: 20px!important; padding-bottom: 100px!important;}
.circle-container { width: 140px; height: 140px; margin: 0 auto; position: relative; }
.circle-container > svg { height: 100%; display: block; }
.circle-container .circle {}
.circle-container .toplam {
  background: rgba(53,156,211,1);
  background: -moz-linear-gradient(left, rgba(53,156,211,1) 0%, rgba(44,68,150,1) 100%);
  background: -webkit-linear-gradient(left, rgba(53,156,211,1) 0%, rgba(44,68,150,1) 100%);
  background: linear-gradient(to right, rgba(53,156,211,1) 0%, rgba(44,68,150,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#359cd3', endColorstr='#2c4496', GradientType=1 );
  width: 114px; height: 114px; border-radius:114px; position: absolute; top: 13px; left: 13px; text-align: center; }

.circle-container .toplam p { font-family: 'pnsemibold', Helvetica, Arial, sans-serif; color: #FFF; font-size: 30px; margin: 0; line-height: 1; margin-top: 36px;  }
.circle-container .toplam sub { display: block; font-family: 'pnlight', Helvetica, Arial, sans-serif; font-size: 16px; margin-top: -5px; line-height: 1; }

.tarife-belirle { text-align: center; font-size: 19px; line-height: 26px; font-family: 'pnlight', Helvetica, Arial, sans-serif; margin: 10px 0; }
.tarife-belirle span { color: #2e56a2; font-family: 'pnbold', Helvetica, Arial, sans-serif; }
.tarife-belirle hr { display: block; margin: 0; padding: 0; border: 0; }

.slider-height { height: 120px; margin: 0 auto 10px auto; }
.noUi-target { border: 0; }
.noUi-base { border: 1px solid #ccc; background: #FFF; border: 1px solid #EDEDED; box-shadow: 0px 0px 10px 0px rgba(183,183,183,0.36); border-radius: 1px; }
.noUi-origin { box-shadow: 0px 0px 10px 0px rgba(183,183,183,0.36); border-radius: 1px;  }
.noUi-connect {
  background: #2c4496; border-radius: 1px;
  background: -moz-linear-gradient(top, #2c4496 0%, #359cd3 100%);
  background: -webkit-linear-gradient(top, #2c4496 0%,#359cd3 100%);
  background: linear-gradient(to bottom, #2c4496 0%,#359cd3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c4496', endColorstr='#359cd3',GradientType=0 );
}

.noUi-vertical .noUi-handle { border: 0; border-radius: 5px; background: #3c9fd6; box-shadow: none; width: 26px; height: 10px; left: -5px; top: -8px; }
.noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after { background: #7dbfe4; width: 6px; height: 1px; left: 10px; top: 4px; }
.noUi-vertical .noUi-handle:after { top: 6px; }

.slider-box { width: 14.285714%; float: left; text-align: center; }
.slider-box .total-mb {
  background: #2c4496;
  background: -moz-linear-gradient(top, #2c4496 0%, #359cd3 100%);
  background: -webkit-linear-gradient(top, #2c4496 0%,#359cd3 100%);
  background: linear-gradient(to bottom, #2c4496 0%,#359cd3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c4496', endColorstr='#359cd3',GradientType=0 );
  color: #FFF; font-size: 12px; line-height: 1; border-radius: 6px; padding: 3px 0 1px 0; margin: 0 2px 10px 2px;  }
.slider-box .total-mb span { display: block; font-size: 9px; line-height: 1; }
.slider-box .slider-desc { display: none; }
.slider-box .slider-val { font-family: 'pnsemibold', Helvetica, Arial, sans-serif; color: #3173b6; font-size: 11px; line-height: 1; margin-top: 10px; }
.slider-box .slider-val span { display: block;}


@media screen and (min-width: 478px) {
  .circle-container { width: 170px; height: 170px; margin-bottom: 10px; }
  .circle-container .toplam {  width: 140px; height: 140px; border-radius:140px; top: 15px; left: 15px; }
  .circle-container .toplam p { font-size: 36px; margin-top: 48px; }
  .circle-container .toplam sub { font-size: 18px; margin-top: -5px; }
  .slider-height { height: 160px; }
  .noUi-vertical { width: 20px; }
  .noUi-base { width: 20px; border-radius: 3px; }
  .noUi-vertical .noUi-connect { border-radius: 3px; }
  .noUi-vertical .noUi-handle { left: -4px; }
  .slider-box .total-mb { font-family: 'pnbold', Helvetica, Arial, sans-serif; font-size: 15px; }
  .slider-box .total-mb span { font-family: 'pnsemibold', Helvetica, Arial, sans-serif; }
  .slider-box .slider-desc { display: block; font-size: 14px; line-height: 15px; margin: 10px auto; padding: 0 3px; max-width: 80px; height: 90px; overflow: hidden; }
  .slider-box .slider-val { font-size: 14px; margin: 0; }
}


@media screen and (min-width: 660px) {
  .slider-box .slider-desc { max-width: 90px; height: 60px; }
  .slider-height { height: 180px; }
}


@media screen and (min-width: 768px) {
  .circle-container { width: 190px; height: 190px; margin-bottom: 10px; }
  .circle-container .toplam {  width: 160px; height: 160px; border-radius:160px; top: 15px; left: 15px; }
  .circle-container .toplam p { font-size: 42px; margin-top: 50px; }
  .circle-container .toplam sub { font-size: 20px; margin-top: -5px; }
  .tarife-belirle { text-align: left; position: absolute; top: 40px; left: 65%; }
  .slider-height { height: 220px; margin-top: 13px; }
  .noUi-vertical { width: 26px; border-radius: 4px; }
  .noUi-vertical .noUi-connect { border-radius: 4px; }
  .noUi-base { width: 26px; }
  .noUi-vertical .noUi-handle { border-radius: 7px; width: 36px; height: 14px; left: -6px; top: -11px; }
  .noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after { width: 8px; height: 2px; left: 14px; top: 4px; }
  .noUi-vertical .noUi-handle:after { top: 8px; }
  .slider-box .total-mb { border-radius: 18px; font-size: 21px; max-width: 78px; margin: 0 auto 10px auto; padding: 3px 0; }
  .slider-box .total-mb span { font-size: 11px; }
  .slider-box .slider-desc { font-size: 15px; line-height: 15px; padding: 0 3px; max-width: 100%; height: 60px; overflow: hidden; }
  .slider-box .slider-val { font-size: 15px; }
  .slider-box .slider-val span { display: inline-block; }
}


@media screen and (min-width: 992px) {
  .circle-container .toplam p { font-size: 46px; margin-top: 55px; }
  .circle-container .toplam sub { margin-top: -10px; }
  .tarife-belirle { top: 50px; left: 63%; }
  .noUi-vertical { width: 35px; }
  .noUi-base { width: 35px; border-radius: 5px; }
  .noUi-vertical .noUi-connect { border-radius: 5px; }
  .noUi-vertical .noUi-handle { border-radius: 10px; width: 50px; height: 20px; left: -9px; top: -12px; }
  .noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after { width: 10px; height: 3px; left: 20px; top: 6px; }
  .noUi-vertical .noUi-handle:after { top: 12px; }
  .slider-box .total-mb { font-size: 19px; max-width: 81px; padding: 4px 0; }
  .slider-box .total-mb span { font-size: 10px; }
  .slider-box .slider-desc { font-size: 16px; line-height: 18px; margin-top: 20px; height: 55px; }
  .slider-box .slider-val { font-size: 19px; }
}


@media screen and (min-width: 1200px) {
  .noUi-vertical { width: 45px; }
  .noUi-base { width: 45px; border-radius: 6px; }
  .noUi-vertical .noUi-connect { border-radius: 6px; }
  .noUi-vertical .noUi-handle { border-radius: 12px; width: 62px; height: 24px; left: -10px; top: -12px; }
  .noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after { width: 12px; height: 3px; left: 25px; top: 8px; }
  .noUi-vertical .noUi-handle:after { top: 14px; }
  .slider-box .slider-desc { font-size: 17px; line-height: 22px; margin-top: 30px; height: 40px; }
  .slider-box .slider-val { font-size: 22px; }
}


@media screen and (min-width: 1440px) {
  .circle-container { width: 240px; height: 240px; margin-bottom: 20px; }
  .circle-container .toplam {  width: 200px; height: 200px; border-radius:200px; top: 20px; left: 20px; }
  .circle-container .toplam p { font-size: 54px; margin-top: 65px; }
  .circle-container .toplam sub { font-size: 22px; margin-top: -10px; }
  .tarife-belirle { top: 100px; left: 63%; }
  .slider-height { height: 300px; margin-top: 13px; }
}