/*
* Kablo Web Site
* Hizmet Verilen İller Sayfasi
*/

/*--- DESTEK HIZMET VERILEN ILLER ---*/
.hizmet-verilen-iller { 
  background: rgba(53,156,211,1);
  background: -moz-linear-gradient(left, rgba(53,156,211,1) 0%, rgba(44,69,150,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(53,156,211,1)), color-stop(100%, rgba(44,69,150,1)));
  background: -webkit-linear-gradient(left, rgba(53,156,211,1) 0%, rgba(44,69,150,1) 100%);
  background: -o-linear-gradient(left, rgba(53,156,211,1) 0%, rgba(44,69,150,1) 100%);
  background: -ms-linear-gradient(left, rgba(53,156,211,1) 0%, rgba(44,69,150,1) 100%);
  background: linear-gradient(to right, rgba(53,156,211,1) 0%, rgba(44,69,150,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#359cd3', endColorstr='#2c4596', GradientType=1 );
  height: 450px; width: 100%; position: relative;
}

.hizmet-verilen-iller .container { position: absolute; color: #FFF; width: 100%; top: 0; }
#vmap, .vmap-mask, .hizmet-aciklama { display: none; }

.iller { width: 300px; margin: 0 auto; overflow: hidden; margin-top: 30px; font-family: 'pnbold', Helvetica, Arial, sans-serif; font-size: 18px; }
.iller ul { margin: 0; padding: 0; list-style-type: none; width: 50%; float: left;}
.iller li { background: url('../images/destek/pin.png') no-repeat; background-size: auto 19px; background-position: 0 4px; text-indent: 24px;  }

@media (max-width: 768px) {
    .hizmet-verilen-iller {
        height: 2000px !important; /* !important kullanarak var olan diğer stillendirmeleri geçersiz kılabilirsiniz */
    }
}

@media screen and (min-width: 768px) {
  .hizmet-verilen-iller { height: 490px; }
  .hizmet-verilen-iller .container { height: 490px; }
  .iller { display: none; }  

  #vmap { display: block; width: 100%; height: 100%; margin-top: -50px;  }
  .vmap-mask { display: block; pointer-events:none; background: url('../images/destek/vmap-mask.png') no-repeat center center; background-size: auto 100%; position: absolute; top: 40px; bottom: 150px; left: 0; right: 0; margin:auto; }
  .jqvmap-label { font-family: 'pnbold', Helvetica, Arial, sans-serif; position: absolute; display: none; border-radius: 6px; background: #00b4ff; color: #FFF; font-size: 21px; padding: 6px 0; margin: auto; width: 120px; text-align: center; margin-left: 75px; margin-top: -15px; pointer-events:none; }
  .jqvmap-label:after { bottom: -10px; margin: auto; left: 0; right: 0; display: block; content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 11px 11px 0 11px; border-color: #00b4ff transparent transparent transparent; }  
  .hizmet-aciklama { display: block; position: absolute; color: #FFF; font-family: 'pnsemibold', Helvetica, Arial, sans-serif; font-size: 18px; bottom: 20px; overflow: hidden; }
  .mevcut, .mevcut-degil, .mevcut-not { height: 26px; line-height: 26px; text-indent: 36px; margin-bottom: 10px; position: relative;  float: left; margin-right: 30px; }
  .mevcut:before { position: absolute; content: '';  width: 26px; height: 26px; background: #1e4085; border-radius: 26px; left: 0px; }
  .mevcut-degil:before { position: absolute; content: '';  width: 26px; height: 26px; background: #FFF; border-radius: 26px; left: 0; }
  .mevcut-not { text-indent: 0; margin-bottom: 0; clear: both; margin-top: 10px; }
}


@media screen and (min-width: 1200px) {
  .hizmet-verilen-iller { height: 750px; }
  .hizmet-verilen-iller .container { max-width: 1200px; top: 30px; left: 0; right: 0; height: 750px; }
  .vmap-mask { top: 90px; bottom: 200px; }
  .hizmet-aciklama { font-size: 21px; bottom: 40px; }
  .mevcut, .mevcut-degil, .mevcut-not { height: 35px; line-height: 35px; text-indent: 45px; margin-bottom: 10px; }
  .mevcut, .mevcut-degil {  }
  .mevcut:before { width: 35px; height: 35px; border-radius: 35px; }
  .mevcut-degil:before { width: 35px; height: 35px; border-radius: 35px; }
  .mevcut-not { text-indent: 0; margin-bottom: 0; clear: both; margin-top: 20px; } 
}