body {font-family:'Vodafone';font-size:16px; color: #000000}
strong{font-family: 'VodafoneBold'}
.head{background: url(../img/headerbg.jpg) center top no-repeat;;background-size: cover; height: 1120px; position: relative}
header{height: 547px; font-size: 32px; position: relative; text-align: center; color: #fff}
header a{color: #fff!important}
header strong.name{font-size: 100px; display: block; margin: -40px 0 -20px 0}
a.logo{position: absolute; left: 0; top: 0; transition:  all 0.5s ease}
.red, .red strong{color: #e60000!important}
header p{padding: 50px 0 0px 0; width: 70%; margin: 0 auto}
header p.second{padding:10px 0 20px 0}
header .icons{display: block; position: absolute; right: 25px; top: 25px; padding: 0; margin: 0; list-style: none}
header .icons li{display: inline-block; height: 32px; line-height: 21px; vertical-align: top}
header .icons li a{font-size: 14px; font-family: 'Vodafone xBold'; text-decoration: none!important;}
header .icons li a:hover, header .icons li a.selected{color:#e60000!important;}
header .icons li.seperator{border-right:1px solid rgba(255, 255, 255, 0.3);}
.info{font-size: 36px; text-align: center;width: 100%; color: #fff; background: #ce152b; padding: 20px 0}
.simple-logo{position: absolute; right: 30px; top: 30px}
.simple-logo img{width: 100%}
.spacer20{display: block; height: 20px}
a.btn{background: url(../img/bg-btn.png) center center repeat-x; font-family: 'VodafoneLight'; color: #fff!important; font-size: 26px; border-radius: 4px!important; height:80px;-webkit-box-shadow: 0px 17px 31px -5px rgba(0,0,0,0.66);-moz-box-shadow: 0px 17px 31px -5px rgba(0,0,0,0.66); box-shadow: 0px 17px 31px -5px rgba(0,0,0,0.66); border:1px solid  rgba(255, 255, 255, 0.3); line-height:70px; display:block; margin:40px auto; max-width:439px; width:88%}
header a.btn{margin:10px auto}
header a.another{font-size: 22px; text-decoration: none;}
header a.another u{text-decoration: none;border-bottom: 2px solid #fff}
section .container{max-width: 1000px; margin: 0 auto}
.summary{text-align: center; padding: 30px 70px; font-family: 'VodafoneLight'}
.summary h1{font-size: 60px}
.summary p{font-size: 30px}
.summary-item{text-align: left; font-size: 20px; padding: 0!important; margin-top: 40px}
.summary-item p{font-size: 36px; margin-top: -60px; white-space: nowrap}
.summary-item p strong{font-size: 100px; position: relative; top:40px}
.summary-item strong{color: #000}
.tariff p.small{font-size:38px; margin-top:-40px}
.summary-item span{display: block; font-size: 20px;}
.summary-item span strong{display: block}
.summary-item .dots{background: url(../img/bg-dots.png) center center repeat-x; display: block; height: 14px; width: 100%; position: relative}
.summary-item .dots .circle{background: url(../img/bg-dot-cir.png) center center; width: 30px; position: relative; top: -8px; height: 30px; margin: 0 auto}
.summary-item > div.txt{position: absolute; top: 40px; left: 50%; transform: translateX(-50%); -webkit-transform:translateX(-50%)}
.details p.small{margin-top:-30px; font-size:25px; text-align:center; margin-bottom:40px}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}


.btn-vodafone{background: #e90000; color: #fff!important; border-radius: 60px; height: 60px; line-height: 60px; padding: 0; margin: 20px auto 0 auto; display: block; width: 424px; max-width: 88%; font-size: 21px; text-decoration: none!important}
.btn-vodafone.inverted{border: 1px solid #e90000; background: #fff; color: #e90000!important}

.details{display: block; padding: 20px 45px}
.details .headline{ text-align: center; height: 100px; line-height: 100px; font-family: 'VodafoneBold'; font-size: 85px; margin-bottom: 70px; margin-top: 20px}
.details .headline strong{font-family: 'Vodafone xBold'}
.details ul{ border: 1px solid #ebebeb; list-style: none; padding: 0; margin: 0; color: #000; font-family: 'VodafoneLight'; font-size: 18px}
.details ul strong.value{font-size: 22px; float:right}
.details ul strong{font-family: 'Vodafone xBold'}
.details ul li{line-height: 75px; position: relative;}
.details ul li > a{ border-bottom: 1px solid #ebebeb; padding: 0 30px 0 68px; }
.details ul li.hassomething a{cursor: pointer; display: block; color: #000; text-decoration: none!important; outline: none!important}
.details ul li:last-child{border: none}
.details ul li ul{border: none; background: #ebebeb; display: none;}
.details ul li ul li{ border-bottom: 1px solid #d3d3d3; padding:0 30px 0 80px}
.details ul li ul li ul{ margin:0 -30px 0 -80px; display:block}
.details ul li ul li ul li{ background: #e1e1e1; padding:0 30px 0 122px}
.details ul li ul li a{ margin-left: -70px!important; padding-right: 0px; font-family: 'VodafoneBold'}
.details > ul > li:last-child{color: #e90000}
.details small{text-align: center; display: block; color: #2a2a2a; font-size: 20px; margin-top: 20px}
.details .total{font-size: 70px; position: relative}
.details .total span{font-family:"VodafoneBold"; float:right; color: #e60000}
.details a.automate{color: #9b29a0; font-size: 22px; text-decoration: underline; text-align: center; display: block; margin: 40px 0}

.svg-container{margin-top:-20px}
.animations{position: relative; text-align: center; font-size: 26px; padding: 0!important}
.anim{position: relative; overflow: hidden}
.anim .cont{position: absolute; top:50%; left:50%; margin-top: 10px; margin-left: 10px;transform: translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); font-size: 22px}
.anim .cont strong{font-size: 40px}
.anim .cont strong span{font-size: 25px; font-family: 'Vodafone'}
.tariff{text-align: center; overflow: hidden; background: url(../img/bg-bottom.jpg) center top no-repeat;;background-size: cover; color: #fff; font-family: 'VodafoneLight'}
.tariff p{font-size: 80px; color: #fff; margin-bottom: 50px}
.tariff span{font-family: 'Vodafone xBold'; font-size: 26px}
p.subnote{font-size: 15px; text-align: center}

#terms-conditions .text-block{position: absolute; transform: translate(-50%, -50%); width: 60%; left: 50%; top: 50%;color: #fff; margin: 0 auto; height: 90%; font-size: 30px; text-align: left}
#terms-conditions .text-block a{color: #fff; font-weight: bold; text-decoration: none!important}
#terms-conditions .text-block h1{font-family: 'Vodafone xBold'; font-size: 100px}
#terms-conditions .text-block .inners{position: relative; height: calc(100% - 200px); overflow: auto; padding-right: 40px}
#terms-conditions .text-block p{font-size: 26px; text-align: left}
#terms-conditions .text-block .inners::-webkit-scrollbar{
width:12px;
background-color:transparent;
border-radius: 12px;
border: 1px solid #fff;
padding:1px;
}
#terms-conditions .text-block .inners::-webkit-scrollbar-thumb{
background-color:#fff;
border-radius:12px;
width: 10px
}
#terms-conditions .text-block .inners::-webkit-scrollbar-thumb:hover{
background-color:#fff;
}
#terms-conditions .text-block .inners::-webkit-scrollbar-thumb:active{
background-color:#fff;
}


#error .error-block{position: absolute; transform: translate(-50%, -50%); width: 60%; left: 50%; top: 50%;color: #fff; margin: 0 auto; height: 90%; font-size: 30px; text-align: left}
#error .error-block a{color: #fff; font-weight: bold; text-decoration: none!important}
#error .errors{position: absolute; transform: translate(-50%, -50%); width: 60%; height: 60%; left: 50%; top: 50%; text-align: center}
#error h1{font-size: 200px; font-family: 'Vodafone xBold'}
.login{width: 100%; height: 100%; position: absolute; left: 0; top: 0;  display: block; background: no-repeat center center; background-size: cover;}
.login#step-one{background-image: url(../img/login-bg.png)}
.login#step-two{background-image: url(../img/login-bg.png)}
.login#terms-conditions{background-image: url(../img/login-terms.jpg)}
.login#error{background: #f00000}

.login .form{position: absolute; left: 50%; top: 50%; max-width: 1000px; transform: translate(-50% , -50%);-webkit-transform:translate(-50%,-50%); width: 80%;}
.login .form figure{text-align: center}
.login .form figure img{max-width: 100%;}
.login p{color: #fff; text-align: center; font-size: 30px; padding-top: 25px; font-family: 'VodafoneLight'}
.login .inputs{max-width: 480px; width: 90%; margin: 30px auto}
.login .inputs input{width: 100%; border: none; border-radius: 4px; padding: 25px; font-size: 20px; outline: none!important}
.login .captcha{font-size: 0; padding: 10px 0}
.login .captcha > *{font-size: 15px; display: inline-block; width: calc(50% - 5px)!important; vertical-align: middle}
.login .captcha input{margin-left: 10px; font-size: 15px; padding: 28px 25px}
.login .captcha figure{width: 100%; height: 78px; line-height: 78px; border-radius: 4px; background: #c5c5c5; overflow: hidden!important}
.login .captcha img{width: 100%}
.login input.btn{background: url(../img/bg-btn.png) center center repeat-x; font-family: 'Vodafone xBold'; color: #fff; font-size: 30px; border-radius: 4px!important; padding: 18px;-webkit-box-shadow: 0px 17px 31px -5px rgba(0,0,0,0.66);-moz-box-shadow: 0px 17px 31px -5px rgba(0,0,0,0.66); box-shadow: 0px 17px 31px -5px rgba(0,0,0,0.66); border:1px solid  rgba(255, 255, 255, 0.3)}
.login .remaining-time{text-align: center; color: #fff; line-height: 25px; vertical-align: middle; font-size: 20px}
.login .remaining-time.ended{color: #c5c5c5}


[class*="icn-"]{display:inline-block; background-image:url(../img/sprite.png); background-repeat: no-repeat ; text-indent:-999999px; }
.icn-big-button{text-indent: 0px; text-decoration: none!important; background-position: -26px -324px; width: 410px; height: 96px; line-height: 78px; color: #fff; text-align: center; margin: 0 auto; font-size: 21px;}
  .icn-big-button:hover{color: #fff}
.icn-app-store{width: 159px; height: 47px; background-position: -9px -237px}
.icn-windows-store{width: 159px; height: 47px; background-position: -9px -454px}
.icn-google-store{width: 159px; height: 47px; background-position: -178px -237px; margin:0 5px}
.icn-download{width: 14px; background-position: -14px -55px}
.icn-print{width: 20px; background-position: -50px -55px}
.icn-clock{width: 22px; height: 22px; background-position: -93px -53px; top: 4px; position: relative; margin-right: 5px;}
.icn-bill{width: 74px; height: 87px; background-position: -4px -120px; margin: 10px auto; display: block}
.icn-coins{width: 91px; height: 87px; background-position: -154px -123px; margin: 10px auto; display: block}
.icn-calendar{width: 90px; height: 87px; background-position: -319px -120px; margin: 10px auto; display: block}
.details [class*="icn-"]{width: 48px; height: 48px; display: block; float: left; margin-right: 15px; border-radius: 48px; margin-top: 13px}
.icn-tariff{background-position: -375px 3px; background-color:#00b5c6}
.icn-device{background-position: -330px 3px; background-color:#f99e1c}
.icn-prices{background-position: -290px 8px; background-color:#8f3f96}
.icn-world{background-position: -248px 4px; background-color:#732979}
.icn-internet{background-position: -207px 6px; background-color:#510444}
.icn-call{background-position: -163px 4px; background-color:#510444}
.icn-sms{background-position: -123px 2px; background-color:#510444}
.icn-int-call{background-position: -80px 3px; background-color:#732979}
.icn-services{background-position: -40px 2px; background-color:#732979}
.icn-tax{background-position: 4px 2px; background-color:#bec71c}
.icn-log{width: 20px; height: 17px; background-position: -309px -56px;}
.icn-info{width: 36px; height: 36px; background-position: -343px -48px;}

.details .icn-plus{background-position: -128px -46px; width: 36px; height: 36px; border-radius: 0; margin-left: -42px; margin-top: 17px}
.details .active .icn-plus{background-position: -168px -45px;}
.details ul li ul li .icn-plus{margin-left: 0;background-position:  -265px -44px; width: 16px}
.details ul li ul li .active .icn-plus{margin-left: 0;background-position:-222px -44px;}
p.terms{position: absolute; bottom: 20px; color: #fff; font-size: 16px; right: 20px;right: auto; width:100%; text-align:center}
@media only screen and (min-width:768px) and (max-width: 1100px)  {
  .anim .cont{ font-size: 15px}
  .anim .cont strong{font-size: 20px}
	}

  @media only screen and (max-width:1366px) {
    header{font-size: 30px}
    .login>.form>figure>img{max-width:50%}
  }
  @media only screen and (max-width:1022px) {
    header{font-size: 24px}
  }
@media only screen and (max-width:780px) {
    .details .headline{font-size:55px}
    a.logo{left: -50px}
    .summary{padding: 0 30px}
    .summary p{font-size: 25px}
    .summary-item{width:31%}
    header p{width: 90%}
    .summary h1{font-size: 50px}
    .icn-download,.icn-print, header .icons li.seperator{display:none}
    .login p{font-size: 20px; padding-top: 15px}
    .simple-logo{width: 110px; top:40px}
    header strong.name{font-size: 70px; margin-top: -20px}
    .summary-item > div.txt{position: static; transform: translateX(0);-webkit-transform: translateX(0); margin: 0 auto; width: auto}
    .details p.small{font-size:20px}
    .details{padding-left:0!important; padding-right:0!important}
    .container{max-width:768px!important}
    .summary-item .dots{top:-20px}
    .tariff p{font-size:66px}
    .tariff p.subnote{font-size:14px}
    .summary .container .row{padding-top:30px;}
    section .container{padding-top:30px}
	}

@media only screen and (max-width:480px) {
  .info{font-size: 22px;}
  .summary-item{width:100%}
  .icn-google-store{margin-top: 5px}
  .icn-windows-store{margin-top: 5px}
  header{font-size: 18px; height: 443px}
  .summary{padding: 0px 15px}
  .summary h1{font-size: 36px}
  .summary p{font-size: 18px;}
  .details a.automate{font-size:18px}
  .summary-item{text-align: center; font-size: 20px; padding: 10px 15px 31px 15px!important; position: relative;}
  .summary-item .dots{position: absolute; bottom: -10px; right: 15px; left: 15px; width: auto}
  header p{width: 100%; padding: 120px 0px 0px 0;}
  .login {min-height:545px;}
  p.terms{font-size:12px!important}
  .login .form figure img{max-width:81%}
  .welcome{font-size:20px}
  .login .form .captcha figure img{max-width:100%}
  .copyright{display:block; margin:10px 0 0 0 }
  p.terms{bottom:10px; width:81%; left:9.5%}
  header p.second{padding:5px 0 10px 0}
  .icn-big-button{font-size: 14px; background-size: 231px 420px; width: 205px; height:48px; line-height: 39px; background-position: -13px -162px}
  .details{display: block; border: 1px solid #ebebeb; padding: 0}
  .details .headline{height: 50px; line-height: 50px; font-size: 26px}
  .details ul li{margin:0px}
  .details ul strong{font-family:'Vodafone'}
  section .container{padding-top:40px!important}
  .details ul li > a{padding:0 10px 0 51px}
  .details ul strong.value{font-size: 14px}
  .details ul li ul li{padding:0 10px 0 10px; overflow: hidden}
  .details ul li ul li a{margin-left: -42px!important}
  .details ul{font-size:12px}
  .details p.small{font-size:16px}
  .details .total{font-size: 25px}
  .anim .cont{ font-size: 15px}
  .anim .cont strong{font-size: 20px}
  .login p{font-size: 13px}
  .login .inputs{width: 100%}
  .login .inputs input{padding: 10px 20px; font-size: 15px}
  .login .inputs figure{height: 41px; line-height: 41px}
  a.logo{left:-40px}
  a.logo img{width: 130px}
  a.terms, .copyright{font-size: 12px; right: 10px}
  a.terms{right: auto; left: 10px}
  header strong.name{font-size: 50px; margin-top: -5px; margin-bottom: 20px}
  a.btn{font-size: 18px}
  header{height: 530px}
  header a.btn{margin:20px auto}
  .head{height: 1116px; background-position: bottom center}
  .summary-item{margin-top: 0px}
  .summary-item span{margin: 15px 0}
  .summary-item span strong{display: inline}
  .summary-item p strong{font-size: 60px; top: 27px}
    .tariff p {font-size:30px;}
    .tariff p.small {font-size: 22px;}
    .tariff p.subnote{font-size:12px; max-width:90%; margin-left:auto; margin-right:auto}
    .tariff span{font-size:20px}
    .anim .cont strong span{font-size:14px}
    .tariff .container{padding-top:40px}
  }

    .validation-summary-errors ul {padding: 0; margin: 20px 0 0 0;}
        .validation-summary-errors ul li {color: #fff; list-style: none; font-weight: bold; padding: 0; margin: 0; text-align: center; font-size: 15px;}
		
 .info-wrap {background: #333; padding: 30px 0 50px; position: relative; margin-bottom: 40px;}
      .info-wrap h2 { font-size: 52px; color: #fff; text-align: center; margin: 10px 0 40px;}
      .info-wrap h2 span {color: #e60000; font-family: 'Vodafone xBold'; }
      .info-wrap .bottom-info { border-top: 2px dotted #666; padding: 30px 0 30px 75px; position: relative; }
      .info-wrap .info {border-top: 2px dotted #666; padding: 30px 0 30px 75px; position: relative; background:#333; text-align:left}
      .info-wrap .info b { font-family: 'Vodafone xBold'; }
      .info-wrap .info h3 { font-family: 'VodafoneBold'; font-size: 34px; color: #fff; margin-bottom: 5px;margin-top: 0; }
      .info-wrap .info h4 { font-family: 'VodafoneBold'; font-size: 24px; color: #fff;margin-top: 25px; }
      .info-wrap .info .subhead {color: #c2c2c2; font-size: 28px; line-height: 1.2em }
      .info-wrap .info p,
      .info-wrap .bottom-info p {color: #c2c2c2; font-size: 18px }
      .info-wrap .bottom-info p { font-size: 16px; opacity: 0.7 }
      .info-wrap .info p a { color: #c2c2c2; border-bottom: 1px solid #c2c2c2; 
      -webkit-transition: all 0.2s ease-out;
              transition: all 0.2s ease-out}
      .info-wrap .info p a:hover { color: #e60000; border-color: #e60000; text-decoration: none; }
      .info-wrap .info:nth-child(2):after,
      .info-wrap .info:nth-child(3):after { content: "01"; position: absolute; display: block; top: 23px; left: 20px; width: 40px; height: 40px; color: #fff; font-family: 'VodafoneBold'; font-size: 34px; opacity: 0.1;}
      .info-wrap .info:nth-child(3):after { content: "02" }
      .info-wrap .scroll { width: 47px; height: 107px; display: block; background: url(/a/img/scroll-v1.png) no-repeat; bottom: -60px; position: absolute; left: 50%; cursor: pointer;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);}
			  
			  
			  .headerScroll { width: 1px; height: 1px; z-index:-9999}
			  
			  
      @media (max-width: 780px) { 
          .info-wrap h2 { font-size: 42px }
          .info-wrap .info h3 { font-size: 26px; }
          .info-wrap .info h4 { font-size: 22px; }
          .info-wrap .info .subhead { font-size: 26px }
      }
      @media (max-width: 480px) { 
          .info-wrap h2 { font-size: 30px; margin: 0px 0 25px }
          .info-wrap .info,
          .info-wrap .bottom-info { padding-left: 35px; }
          .info-wrap .info h3 { font-size: 24px; }
          .info-wrap .info h4 { font-size: 18px; }
          .info-wrap .info .subhead { font-size: 18px }
          .info-wrap .info p { font-size: 16px; }    
          .info-wrap .info:nth-child(2):after, 
          .info-wrap .info:nth-child(3):after { font-size: 24px; left: 0; top: 25px }
          .details { border-top: 0 !important; }
          .info-wrap .scroll { background: url(/a/img/scroll-v2.png) no-repeat; bottom: 20px; width: 48px; height: 48px; 
            -webkit-background-size: 47.5px;
            background-size: 47.5px;}
			
			
			.headerScroll { background: url(/a/img/scroll-v2.png) no-repeat; bottom: 20px; width: 48px; height: 48px; 
            -webkit-background-size: 47.5px;
            background-size: 47.5px; margin: 0 auto; margin-top:15px}
      }