.silver-block.info_box .know-more:hover [class*=" icon-"]:before,
.silver-block.info_box .know-more:hover [class^=icon-]:before {
    color: #8778b7
}
.silver-block.info_box .know-more [class*=" icon-"],
.silver-block.info_box .know-more [class^=icon-] {
    color: #3178ca;
    position: relative;
    top: 1px
}
.silver-block.info_box .know-more [class*=" icon-"]:before,
.silver-block.info_box .know-more [class^=icon-]:before {
    color: #3178ca
}
.silver-block.info_box img {
    display: inline-block;
    max-width: 100%;
    height: auto
}
.silver-block.info_box ul {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    list-style: none
}
.silver-block.info_box ul li {
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1.5;
    display: table;
    width: 100%;
    text-align: left
}
.silver-block.info_box ul li:before {
    content: "\25CF";
    font-size: 20px;
    font-size: 1.25rem;
    color: #d4d4d4;
    list-style: none;
    display: table-cell;
    width: 20px
}
.silver-block.info_box ul li:last-child {
    margin-bottom: 0;
    padding-bottom: 10px
}
.silver-block.info_box ul.gray li {
    display: table;
    width: 100%;
    text-align: left
}
.silver-block.info_box ul.gray li:before {
    content: "\25CF";
    font-size: 20px;
    font-size: 1.25rem;
    color: #3a444b;
    list-style: none;
    display: table-cell;
    width: 20px
}
.silver-block.info_box>ul {
    padding: 10px 0;
    margin: 0;
    list-style: none
}
.silver-block.info_box>ul li {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    display: table;
    width: 100%;
    text-align: left
}
.silver-block.info_box>ul li:before {
    content: "\25CF";
    font-size: 20px;
    font-size: 1.25rem;
    color: #d4d4d4;
    list-style: none;
    display: table-cell;
    width: 20px
}
.silver-block.info_box time {
    font-size: 12px;
    font-size: .8571428571428571rem;
    color: #333333
}
.silver-block.info_box.last-no-padding {
    margin-bottom: 60px;
    padding-bottom: 0
}
.silver-block.info_box .img,
.silver-block.info_box figure {
    margin: 0 -12.5px 0 -12.5px;
    text-align: center
}
.silver-block.info_box .img .label-wrap,
.silver-block.info_box figure .label-wrap {
    position: relative
}
.silver-block.info_box .img .label,
.silver-block.info_box figure .label {
    position: absolute;
    top: 0;
    left: 0
}
.silver-block.info_box .img.full,
.silver-block.info_box figure.full {
    margin: 0 -12.5px 0 -12.5px
}
.silver-block.info_box figure {
    margin: 0 -12.5px 0 -12.5px;
    text-align: center
}
.silver-block.info_box figure img {
    display: inline-block
}
.silver-block.info_box .wrap {
    padding-left: 12.5px;
    padding-right: 12.5px
}
.silver-block.info_box .wrap.sticky {
    background-color: #eff6e5;
    padding: 12.5px;
    padding-top: 0
}
.silver-block.info_box .wrap.sticky .img,
.silver-block.info_box .wrap.sticky figure {
    margin: 0 -12.5px 0 -12.5px
}
.silver-block.info_box .wrap.sticky ul li {
    display: table;
    width: 100%;
    text-align: left
}
.silver-block.info_box .wrap.sticky ul li:before {
    content: "\25CF";
    font-size: 20px;
    font-size: 1.25rem;
    color: #8778b7;
    list-style: none;
    display: table-cell;
    width: 20px
}
.silver-block.info_box .compare {
    margin: 30px 0
}
@media (min-width: 768px) {
    .silver-block.info_box .info-box-thumb {
        display: none!important
    }
}
@media (min-width: 768px) {
    .silver-block.info_box .view-more {
        display: none!important
    }
}
.silver-block.info_box.info-box-list {
    display: table;
    width: 100%;
    padding: 12.5px;
    border-bottom: 1px solid #8dc63f;
    background-color: #eff6e5
}
.silver-block.info_box.info-box-list .img img,
.silver-block.info_box.info-box-list .img span,
.silver-block.info_box.info-box-list figure img,
.silver-block.info_box.info-box-list figure span {
    display: none
}
.silver-block.info_box.info-box-list .info-box-content {
    display: none
}
.silver-block.info_box.info-box-list .info-box-thumb {
    display: table-cell;
    width: 40px;
    vertical-align: top
}
.silver-block.info_box.info-box-list .info-box-thumb img {
    border: 1px solid #8dc63f
}
@media (min-width: 768px) {
    .silver-block.info_box.info-box-list .info-box-thumb {
        display: none!important
    }
}
.silver-block.info_box.info-box-list .wrap {
    display: table-cell;
    vertical-align: top;
    padding-bottom: 0
}
.silver-block.info_box.info-box-list .wrap h3 {
    margin: 0;
    min-height: 0;
    padding-top: 0;
    background-color: transparent;
    padding-bottom: 0
}
.silver-block.info_box.info-box-list .wrap .center {
    margin: 0;
    text-align: left;
    color: #3178ca
}
.silver-block.info_box.info-box-list .wrap .center .btn,
.silver-block.info_box.info-box-list .wrap .center .btn-primary,
.silver-block.info_box.info-box-list .wrap .center .btn-sm {
    color: #3178ca;
    background-color: transparent;
    border: 0;
    padding: 0;
    color: #3178ca!important;
    font-family: Axiata_bold, "Helvetica Neue", Helvetica, Arial, sans-serif
}
.silver-block.info_box.info-box-list .view-more {
    display: table-cell;
    width: 40px;
    vertical-align: middle;
    font-size: 40px
}
.silver-block.info_box.info-box-list .view-more a {
    color: #8dc63f
}
@media (min-width: 768px) {
    .silver-block.info_box.info-box-list .view-more {
        display: none!important
    }
}
@media (min-width: 768px) {
    .silver-block.info_box.info-box-list {
        display: block;
        background-color: #FFF;
        border-bottom: none;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 12.5px;
        padding-right: 12.5px
    }
    .silver-block.info_box.info-box-list h3 {
        margin-top: 0!important
    }
    .silver-block.info_box.info-box-list.col-md-4 {
        width: 33.33333333333333%
    }
    .silver-block.info_box.info-box-list.col-md-8 {
        width: 66.66666666666666%
    }
    .silver-block.info_box.info-box-list .img img,
    .silver-block.info_box.info-box-list .img span,
    .silver-block.info_box.info-box-list figure img,
    .silver-block.info_box.info-box-list figure span {
        display: inline-block
    }
    .silver-block.info_box.info-box-list .info-box-content {
        display: block
    }
    .silver-block.info_box.info-box-list .wrap {
        display: block;
        vertical-align: top;
        padding-bottom: 12.5px
    }
    .silver-block.info_box.info-box-list .wrap h3 {
        margin: 0;
        min-height: 0;
        padding-top: 0;
        background-color: #FFF;
        padding-bottom: 0
    }
    .silver-block.info_box.info-box-list .wrap .center {
        margin: 0;
        text-align: left;
        color: #3178ca
    }
    .silver-block.info_box.info-box-list .wrap .center .btn,
    .silver-block.info_box.info-box-list .wrap .center .btn-primary,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm {
        padding: 7px 20px;
        color: #3178ca;
        color: #fff!important;
        background-color: #8dc63f;
        border: none;
        color: #FFF!important;
        font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
    }
    .open .dropdown-toggle.silver-block.info_box.info-box-list .wrap .center .btn,
    .open .dropdown-toggle.silver-block.info_box.info-box-list .wrap .center .btn-primary,
    .open .dropdown-toggle.silver-block.info_box.info-box-list .wrap .center .btn-sm,
    .silver-block.info_box.info-box-list .wrap .center .btn-primary.active,
    .silver-block.info_box.info-box-list .wrap .center .btn-primary:active,
    .silver-block.info_box.info-box-list .wrap .center .btn-primary:focus,
    .silver-block.info_box.info-box-list .wrap .center .btn-primary:hover,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm.active,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm:active,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm:focus,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm:hover,
    .silver-block.info_box.info-box-list .wrap .center .btn.active,
    .silver-block.info_box.info-box-list .wrap .center .btn:active,
    .silver-block.info_box.info-box-list .wrap .center .btn:focus,
    .silver-block.info_box.info-box-list .wrap .center .btn:hover {
        color: #fff!important;
        background-color: #602d91
    }
    .open .dropdown-toggle.silver-block.info_box.info-box-list .wrap .center .btn,
    .open .dropdown-toggle.silver-block.info_box.info-box-list .wrap .center .btn-primary,
    .open .dropdown-toggle.silver-block.info_box.info-box-list .wrap .center .btn-sm,
    .silver-block.info_box.info-box-list .wrap .center .btn-primary.active,
    .silver-block.info_box.info-box-list .wrap .center .btn-primary:active,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm.active,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm:active,
    .silver-block.info_box.info-box-list .wrap .center .btn.active,
    .silver-block.info_box.info-box-list .wrap .center .btn:active {
        background-image: none
    }
    .silver-block.info_box.info-box-list .wrap .center .btn-primary.disabled,
    .silver-block.info_box.info-box-list .wrap .center .btn-primary.disabled.active,
    .silver-block.info_box.info-box-list .wrap .center .btn-primary.disabled:active,
    .silver-block.info_box.info-box-list .wrap .center .btn-primary.disabled:focus,
    .silver-block.info_box.info-box-list .wrap .center .btn-primary.disabled:hover,
    .silver-block.info_box.info-box-list .wrap .center .btn-primary[disabled],
    .silver-block.info_box.info-box-list .wrap .center .btn-primary[disabled].active,
    .silver-block.info_box.info-box-list .wrap .center .btn-primary[disabled]:active,
    .silver-block.info_box.info-box-list .wrap .center .btn-primary[disabled]:focus,
    .silver-block.info_box.info-box-list .wrap .center .btn-primary[disabled]:hover,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm.disabled,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm.disabled.active,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm.disabled:active,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm.disabled:focus,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm.disabled:hover,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm[disabled],
    .silver-block.info_box.info-box-list .wrap .center .btn-sm[disabled].active,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm[disabled]:active,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm[disabled]:focus,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm[disabled]:hover,
    .silver-block.info_box.info-box-list .wrap .center .btn.disabled,
    .silver-block.info_box.info-box-list .wrap .center .btn.disabled.active,
    .silver-block.info_box.info-box-list .wrap .center .btn.disabled:active,
    .silver-block.info_box.info-box-list .wrap .center .btn.disabled:focus,
    .silver-block.info_box.info-box-list .wrap .center .btn.disabled:hover,
    .silver-block.info_box.info-box-list .wrap .center .btn[disabled],
    .silver-block.info_box.info-box-list .wrap .center .btn[disabled].active,
    .silver-block.info_box.info-box-list .wrap .center .btn[disabled]:active,
    .silver-block.info_box.info-box-list .wrap .center .btn[disabled]:focus,
    .silver-block.info_box.info-box-list .wrap .center .btn[disabled]:hover,
    fieldset[disabled] .silver-block.info_box.info-box-list .wrap .center .btn,
    fieldset[disabled] .silver-block.info_box.info-box-list .wrap .center .btn-primary,
    fieldset[disabled] .silver-block.info_box.info-box-list .wrap .center .btn-primary.active,
    fieldset[disabled] .silver-block.info_box.info-box-list .wrap .center .btn-primary:active,
    fieldset[disabled] .silver-block.info_box.info-box-list .wrap .center .btn-primary:focus,
    fieldset[disabled] .silver-block.info_box.info-box-list .wrap .center .btn-primary:hover,
    fieldset[disabled] .silver-block.info_box.info-box-list .wrap .center .btn-sm,
    fieldset[disabled] .silver-block.info_box.info-box-list .wrap .center .btn-sm.active,
    fieldset[disabled] .silver-block.info_box.info-box-list .wrap .center .btn-sm:active,
    fieldset[disabled] .silver-block.info_box.info-box-list .wrap .center .btn-sm:focus,
    fieldset[disabled] .silver-block.info_box.info-box-list .wrap .center .btn-sm:hover,
    fieldset[disabled] .silver-block.info_box.info-box-list .wrap .center .btn.active,
    fieldset[disabled] .silver-block.info_box.info-box-list .wrap .center .btn:active,
    fieldset[disabled] .silver-block.info_box.info-box-list .wrap .center .btn:focus,
    fieldset[disabled] .silver-block.info_box.info-box-list .wrap .center .btn:hover {
        background-color: #8dc63f!important
    }
    .silver-block.info_box.info-box-list .wrap .center .btn .badge,
    .silver-block.info_box.info-box-list .wrap .center .btn-primary .badge,
    .silver-block.info_box.info-box-list .wrap .center .btn-sm .badge {
        color: #8dc63f;
        background-color: #fff
    }
    .sinhala .silver-block.info_box.info-box-list .wrap .center .btn,
    .sinhala .silver-block.info_box.info-box-list .wrap .center .btn-primary,
    .sinhala .silver-block.info_box.info-box-list .wrap .center .btn-sm {
        font-family: Axiata_sinhala, "Arial Unicode MS"!important
    }
}
@media (min-width: 768px) {
    .silver-block.info_box h3 {
        margin: 0!important
    }
    .silver-block.info_box h3+p {
        margin: 15px 0 10px 0;
        min-height: 70px
    }
    .silver-block.info_box .img,
    .silver-block.info_box figure {
        margin: 0 0 12.5px 0
    }
    .sub .silver-block.info_box .img,
    .sub .silver-block.info_box figure {
        margin: 0 -12.5px 12.5px -12.5px
    }
    .silver-block.info_box .img img,
    .silver-block.info_box figure img {
        width: 100%
    }
    .silver-block.info_box .img .label,
    .silver-block.info_box figure .label {
        position: absolute;
        top: -10px;
        left: auto;
        right: 10px
    }
    .silver-block.info_box .wrap {
        padding: 0
    }
    .sub .silver-block.info_box .wrap,
    .sub-show .silver-block.info_box .wrap {
        padding-left: 12.5px;
        padding-right: 12.5px
    }
    .silver-block.info_box .wrap .img+p,
    .silver-block.info_box .wrap figure+p {
        min-height: 75px
    }
    .sub .silver-block.info_box .wrap .img+p,
    .sub .silver-block.info_box .wrap figure+p {
        min-height: 0
    }
}
.silver-block.info_box .collapse-content {
    border-bottom: none
}
.silver-block.info_box .collapse-content .panel-body {
    padding-top: 0;
    padding-bottom: 0;
    overflow: auto
}
.silver-block.info_box .panel-group h4 {
    margin: 0!important
}
.silver-block.info_box .panel-group h4 a {
    background-color: #e5eef2;
    border-color: #bacad2
}
.silver-block.info_box .panel-group h4 a.first-collapse {
    border-top: none
}
.silver-block.info_box .panel-group p {
    margin-top: 0
}
.block3 img {
    display: block;
    max-width: 100%;
    height: auto
}
.plans {
    background-color: #eff6e5
}
.plans+.center {
    margin-top: 20px
}
.plan {
    border-top: 1px solid #8dc63f;
    display: table;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px
}
.plan .plan-img {
    position: relative
}
.plan .plan-img img {
    display: none
}
.plan .plan-img .label.new-label {
    position: absolute;
    top: 8px;
    right: 10px
}
.plan h3 {
    margin: 0;
    padding-left: 10px;
    display: table;
    float: left;
    width: 100%;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    color: #8778b7
}
.sinhala .plan h3 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.plan h3 a {
    display: table-cell;
    vertical-align: middle;
    padding-left: 10px;
    color: #8778b7
}
.plan h3 span {
    color: #FFF;
    display: table-cell;
    margin-left: 10px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #8dc63f;
    width: 40px;
    height: 40px;
    vertical-align: middle;
    text-align: center
}
.plan ul.features {
    margin: 30px 10px 0 50px;
    padding: 0;
    list-style: none
}
.plan ul.features li {
    display: inline-block;
    margin-left: 10px
}
.plan ul.features li a {
    font-size: 12px;
    font-size: .8571428571428571rem;
    text-transform: uppercase;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .plan ul.features li a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.plan ul.features li a.voice {
    color: #ee3e80
}
.plan ul.features li a.sms {
    color: #f47920
}
.plan ul.features li a.data {
    color: #f26664
}
.plan ul {
    width: 100%
}
.size-type {
    display: table;
    margin: 20px 0;
    line-height: 1
}
.size-type span {
    color: #FFF;
    display: table-cell;
    margin-left: 10px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #8dc63f;
    width: 40px;
    height: 40px;
    vertical-align: middle;
    text-align: center;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-size: 1rem;
    line-height: 1
}
.sinhala .size-type span {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.size-type ul.features {
    margin: 10px;
    padding: 0;
    list-style: none;
    float: right
}
.size-type ul.features li {
    display: inline-block;
    margin-left: 10px
}
.size-type ul.features li a {
    font-size: 12px;
    font-size: .8571428571428571rem;
    text-transform: uppercase;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .size-type ul.features li a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.size-type ul.features li a.voice {
    color: #ee3e80
}
.size-type ul.features li a.sms {
    color: #f47920
}
.size-type ul.features li a.data {
    color: #f26664
}
@media (min-width: 768px) {
    .plans {
        background-color: transparent;
        margin-bottom: 30px
    }
    .plans+.center {
        margin: 0
    }
    .plan {
        border-top: none;
        display: block;
        padding-top: 10px;
        padding-bottom: 0;
        margin-bottom: 30px
    }
    .plan .plan-img {
        display: block;
        position: relative
    }
    .plan .plan-img img {
        display: block;
        max-width: 100%;
        height: auto
    }
    .plan .plan-img .label.new-label {
        position: absolute;
        top: -10px;
        right: 10px
    }
    .plan h3 {
        margin: 20px 0;
        padding-left: 0;
        display: block;
        vertical-align: middle;
        float: none;
        font-size: 18px;
        font-size: 1.2857142857142858rem;
        font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
        color: #8778b7
    }
    .sinhala .plan h3 {
        font-family: Axiata_sinhala, "Arial Unicode MS"!important
    }
    .plan ul.features {
        margin: 15px 0 15px -10px;
        float: none
    }
    .plan ul.features li a {
        font-size: 14px;
        font-size: 1rem
    }
    .plan .share.hlist {
        clear: both;
        display: block;
        width: 100%;
        margin: 20px 0 20px -15px
    }
    .plan .share.hlist li a {
        margin: 0!important
    }
    .plan .desktop {
        display: block
    }
    .plan .desktop ul:first-child {
        display: block;
        margin: 0;
        padding: 0
    }
    .plan .desktop ul:first-child li {
        margin: 5px 0;
        padding: 0;
        font-size: 14px;
        font-size: 1rem;
        list-style: none;
        clear: both;
        line-height: 1.2;
        display: table;
        width: 100%;
        text-align: left
    }
    .plan .desktop ul:first-child li:before {
        content: "\25CF";
        font-size: 20px;
        font-size: 1.25rem;
        color: #bacad2;
        list-style: none;
        display: table-cell;
        width: 20px
    }
    .plan .more {
        display: block;
        clear: both;
        margin: 20px 0
    }
}
.card {
    background-color: #FFF;
    position: relative;
    border: 1px solid #8dc63f;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    padding: 20px;
    margin: 20px auto;
    max-width: 275px
}
.card .label {
    position: absolute;
    top: 0;
    right: 0
}
.card h3 {
    margin: 0 0 3px 0;
    font-size: 21px;
    font-size: 1.5rem;
    font-weight: 400;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
    color: #8778b7
}
.sinhala .card h3 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.card h3 a {
    color: #8778b7
}
.card h4 {
    margin: 20px 0 10px 0!important;
    color: #333333;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .card h4 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.card .card-img h3 {
    margin: 0;
    height: 45px
}
.card .card-img img {
    max-width: 100%
}
.card label {
    font-weight: 400;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-size: 1rem
}
.sinhala .card label {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.card .features {
    margin: 0;
    padding: 0;
    list-style: none;
    clear: both
}
.card .features dt {
    margin: 15px 0 0 0;
    font-size: 14px;
    font-size: 1rem;
    color: #333333;
    font-weight: 400;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
    clear: both;
    overflow: auto
}
.sinhala .card .features dt {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.card .features dd {
    margin: 0;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    color: #3a444b;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .card .features dd {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.card .features.with-img dt {
    margin: 15px 0 0 35px
}
.card .features.with-img dd {
    margin-left: 35px
}
.card .features.with-img dd.fa {
    margin: 0;
    position: relative;
    top: -18px;
    float: left;
    width: 35px;
    font-family: FontAwesome;
    color: #8dc63f
}
.card .features.right-list {
    clear: none
}
.card .features.right-list dd,
.card .features.right-list dt {
    padding-left: 10px;
    border-left: 1px solid #bacad2
}
.card .card-action {
    position: absolute;
    bottom: 0;
    border-top: 1px solid #bacad2;
    width: 100%;
    margin: 0 -20px;
    padding: 15px 20px;
    background-color: #FFF
}
.card .card-action .know-more {
    color: #3178ca;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .card .card-action .know-more {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.card .card-action .know-more i {
    color: #3178ca
}
.card .card-action .know-more i:before {
    color: #3178ca
}
.card.linked {
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, .3);
    padding-bottom: 65px
}
.card.linked:hover {
    border: 1px solid #8778b7;
    cursor: pointer
}
.card.shadow {
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, .3)
}
.card.shadow:hover {
    border: 1px solid #8778b7
}
.card .compare {
    display: none
}
@media (min-width: 768px) {
    .card {
        margin: 30px 0 0 0
    }
    .card .compare {
        display: block
    }
}
.card.card-small {
    padding: 20px 10px;
    padding-bottom: 45px
}
.card.card-small h3 {
    font-size: 16px;
    font-size: 1.1428571428571428rem
}
.card.card-small h4 {
    margin-top: 10px!important;
    font-size: 14px;
    font-size: 1rem
}
.card.card-small .card-img h3 {
    height: 35px
}
.card.card-small .card-action {
    margin: 0 -10px;
    padding: 10px 10px
}
.secondary-info {
    margin-top: 50px;
    background-color: #e5eef2;
    border-top: 1px solid #bacad2
}
.secondary-info h2 {
    margin-bottom: 30px;
    color: #8778b7;
    font-size: 16px
}
.secondary-info .container>div {
    padding: 10px
}
.secondary-info .help-box {
    text-align: center
}
.secondary-info .help-box a.btn {
    margin: 30px 0
}
@media (min-width: 768px) {
    .secondary-info h2 {
        color: #8778b7;
        font-size: 18px
    }
    .secondary-info .container>div {
        padding: 30px 0
    }
    .secondary-info .help-box {
        text-align: center
    }
    .secondary-info .help-box a.btn {
        margin: 30px 0 20px 0
    }
}
.main-header {
    background-color: #1d2429
}
.sub_title {
    margin: 20px 0;
    color: #8778b7;
    font-size: 24px;
    font-size: 1.7142857142857142rem;
    text-align: center;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .sub_title {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.phones+.center {
    margin-bottom: 60px;
    clear: both
}
.phones>p {
    margin: 20px 0;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    color: #333333;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    text-align: center
}
.sinhala .phones>p {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.phones h3 {
    margin: 0;
    color: #333333;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    text-align: center
}
.phones .phone {
    margin-bottom: 30px;
    overflow: auto
}
.phones .phone .center {
    text-align: center
}
.phones .phone .center img {
    display: inline
}
.phones h4 {
    margin: 20px 0;
    color: #8778b7;
    font-size: 18px;
    font-size: 1.2857142857142858rem;
    text-align: center
}
.phones h4 a {
    color: #8778b7
}
.phones ul.phone-features {
    display: block;
    margin: 0;
    padding: 0
}
.phones ul.phone-features li {
    margin: 5px 10px;
    padding: 0;
    font-size: 14px;
    font-size: 1rem;
    list-style: none;
    clear: both;
    line-height: 1.2;
    display: table;
    text-align: left;
    width: 100%
}
.phones ul.phone-features li:before {
    content: "\25CF";
    font-size: 20px;
    font-size: 1.25rem;
    color: #bacad2;
    list-style: none;
    display: table-cell;
    width: 20px
}
.phones h5 {
    margin-bottom: 0;
    color: #333333;
    font-size: 14px;
    font-size: 1rem
}
.phones .phone-bundles {
    clear: both;
    padding: 10px
}
.phones .phone-bundles ul {
    margin: 0;
    padding: 0
}
.phones .phone-bundles ul li {
    display: block;
    margin-right: 10px;
    position: relative;
    float: left
}
.phones .phone-bundles ul li span {
    color: #bacad2;
    text-transform: uppercase;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-size: 1.8571428571428572rem;
    display: block
}
.sinhala .phones .phone-bundles ul li span {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
@media (min-width: 992px) {
    .phones .phone-bundles ul li span {
        font-size: 36px;
        font-size: 2.5714285714285716rem
    }
}
.phones .phone-bundles ul li.active span {
    color: #8dc63f
}
.phones .phone-bundles .nav-tabs {
    border: none
}
.phones .phone-bundles .nav-tabs li {
    line-height: 1;
    border: none
}
.phones .phone-bundles .nav-tabs li a {
    line-height: 1;
    border: none
}
.phones .phone-bundles .nav-tabs li.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 5px;
    border-width: 0 10px 10px;
    border-style: solid;
    border-color: #eff6e5 transparent;
    display: block;
    width: 0
}
.phones .phone-bundles .tab-content {
    clear: both
}
.phones .phone-bundles div.tab-pane {
    padding: 10px;
    clear: both;
    width: 100%;
    font-size: 14px;
    font-size: 1rem;
    background-color: #eff6e5;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px
}
.phones .phone-bundles div.tab-pane h4 {
    margin: 0;
    color: #3178CA;
    font-size: 14px;
    font-size: 1rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    text-align: left
}
.sinhala .phones .phone-bundles div.tab-pane h4 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.phones .phone-bundles div.tab-pane strong.mate {
    margin: 10px 0 0 0;
    display: inline-block;
    color: #333333;
    font-size: 14px;
    font-size: 1rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .phones .phone-bundles div.tab-pane strong.mate {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.phones .more {
    clear: both;
    margin-top: 20px
}
@media (min-width: 768px) {
    .phones>p {
        text-align: left;
        font-size: 16px;
        font-size: 1.1428571428571428rem;
        margin: 60px 0
    }
    .phones .phone .center {
        text-align: left
    }
    .phones h4 {
        margin: 60px 0 30px 0;
        font-size: 18px;
        font-size: 1.2857142857142858rem;
        text-align: left
    }
}
.content {
    padding: 20px 12.5px
}
.content h3 {
    font-size: 21px;
    font-size: 1.5rem;
    color: #8778b7
}
.content h3 a {
    background-color: #e5eef2;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    padding: 2px 10px;
    font-weight: 400;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
    position: relative;
    top: -3px;
    left: 20px
}
.sinhala .content h3 a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.content>h3 {
    margin-top: 0;
    padding-top: 0
}
.content h4 {
    color: #333333;
    font-size: 21px;
    font-size: 1.5rem;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .content h4 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.content h5 {
    color: #3a444b;
    font-size: 18px;
    font-size: 1.2857142857142858rem;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .content h5 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.padding-top {
    padding-top: 50px
}
@media (min-width: 768px) {
    .content {
        margin-top: 30px;
        margin-bottom: 30px;
        padding: 0
    }
    .content h3 {
        font-size: 24px;
        font-size: 1.7142857142857142rem
    }
    .content.no-bottom-gap {
        margin-bottom: 0
    }
    .content .intro {
        margin-top: 30px
    }
    .top-content,
    div.separator {
        margin-top: 50px;
        padding-bottom: 50px;
        border-bottom: 2px solid #e5eef2;
        overflow: auto
    }
    .padding-top {
        padding-top: 50px
    }
    .border-top {
        /*! border-top: 55px solid #eff6e5 */
    }
    .border-top>.container {
        margin-top: -55px
    }
}
.collapse-content {
    border-bottom: 1px solid #bacad2
}
.collapse-content .panel-title {
    margin: 0
}
.collapse-content .panel-title a {
    display: block;
    padding: 10px;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    border-top: 1px solid #bacad2;
    color: #FFF;
    background-color: rgba(226, 235, 240, .4);
    color: #3178ca
}
.collapse-content .panel-title a.collapsed {
    color: #3178ca;
    background-color: rgba(226, 235, 240, .4)
}
.collapse-content .panel-title a:after {
    float: right;
    content: "\f106";
    font-size: 24px;
    position: relative;
    top: -5px;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.collapse-content .panel-title a.collapsed:after {
    content: "\f107"
}
.collapse-content .panel-body {
    padding: 10px 10px 10px 10px;
    overflow: auto
}
.collapse-content .panel-body h2 {
    color: #3a444b;
    font-size: 21px;
    font-size: 1.5rem
}
.collapse-content .panel-body h5 {
    color: #3a444b;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .collapse-content .panel-body h5 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.collapse-content .panel-body .share {
    float: right
}
.phone_details {
    overflow: auto
}
.detail .colours {
    margin: 20px 0
}
.detail .colours li a {
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%
}
.detail .memory {
    margin: 20px 0
}
.detail .memory .hlist li a {
    background-color: #e5eef2;
    color: #333333;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    height: auto;
    width: 55px;
    padding: 3px 0 2px 0
}
.detail .memory .hlist li a.active {
    background-color: #8dc63f;
    color: #FFF
}
.detail .memory .hlist li a:hover {
    background-color: #8dc63f;
    color: #FFF
}
.detail .buy {
    margin: 20px 0;
    overflow: auto
}
.detail .recommended-plans {
    display: none;
    padding: 10px;
    overflow: auto;
    background-color: #e5eef2;
    border-bottom: 3px solid #bacad2
}
.detail .recommended-plans h3 {
    margin: 0 0 10px 0;
    color: #3a444b;
    font-size: 18px;
    font-size: 1.2857142857142858rem
}
.detail .recommended-plans ul {
    margin: 0;
    padding: 0;
    list-style: none
}
.detail .recommended-plans li {
    line-height: 1;
    margin-right: 20px;
    float: left;
    color: #8778b7;
    font-size: 18px;
    font-size: 1.2857142857142858rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .detail .recommended-plans li {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.detail .recommended-plans li a {
    color: #8778b7
}
.detail .recommended-plans li a:hover {
    text-decoration: underline
}
@media (min-width: 768px) {
    .details_images {
        margin: 30px 0
    }
    .detail .content {
        padding: 0
    }
    .detail .colours {
        margin: 10px 0 30px 0
    }
    .detail .memory {
        margin: 10px 0 30px 0
    }
    .detail .buy {
        margin: 30px 0 0 0
    }
    .detail .recommended-plans {
        display: block
    }
}
.navigation {
    overflow: auto;
    background-color: #527424
}
.navigation ul {
    display: table;
    width: 100%;
    margin: 0;
    padding: 0
}
.navigation ul li {
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    margin: 0;
    width: 40%;
    font-size: 12px;
    font-size: .8571428571428571rem
}
.navigation ul li.more {
    width: 20%;
    text-align: center
}
.navigation ul li.more a {
    border-left: 1px solid #8dc63f;
    border-right: 1px solid #8dc63f;
    font-size: 21px;
    font-size: 1.5rem
}
.navigation ul li.next {
    text-align: right
}
.navigation ul li.next a:after {
    margin-left: 10px;
    content: "\f105";
    font-size: 14px;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.navigation ul li.previous a:before {
    margin-right: 10px;
    content: "\f104";
    font-size: 14px;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.navigation ul li a {
    color: #FFF;
    display: block;
    padding: 10px;
    line-height: 1
}
.compare-control .compare-selection {
    display: table;
    width: 100%;
    background-color: #e5eef2
}
.compare-control form {
    display: block;
    padding: 10px;
    vertical-align: middle;
    width: 100%;
    overflow: auto
}
.compare-control form span.left {
    float: left;
    width: 100%;
    margin: 0 0 10px 0
}
.compare-control form span.right {
    float: left;
    text-align: left;
    width: 100%;
    margin-bottom: 0
}
@media (min-width: 768px) {
    .compare-control {
        height: 45px;
        margin-right: -50px
    }
    .compare-control .compare-selection {
        height: 44px
    }
    .compare-control form {
        padding: 0 0 0 12.5px;
        display: table-cell
    }
    .compare-control form span.left {
        margin-right: 25px;
        margin-bottom: 0;
        width: auto
    }
    .compare-control form span.right {
        float: left;
        width: auto
    }
    .compare-control .view-select {
        margin: 0;
        padding: 0;
        list-style: none;
        display: block;
        float: right;
        height: 40px;
        background-color: #e5eef2;
        margin-right: 40px
    }
    .compare-control .view-select li {
        margin: 0;
        display: table-cell;
        vertical-align: middle;
        height: 45px;
        position: relative
    }
    .compare-control .view-select a {
        color: #333333;
        padding: 10px 10px;
        font-size: 21px;
        font-size: 1.5rem
    }
    .compare-control .view-select a.active {
        color: #3a444b
    }
}
.page-control-wrap .row {
    overflow: initial
}
.page-control-wrap.is_stuck {
    background-color: #bacad2
}
.page-control {
    background-color: #bacad2;
    padding: 12.5px
}
.page-control .select-account label {
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    margin-right: 10px
}
.page-control .row .select-account .dropdown {
    width: 100%
}
.page-control .row .select-account .dropdown .plan-name-box {
    float: right;
    font-size: 14px;
    font-size: 1rem
}
@media (min-width: 768px) {
    .page-control {
        padding: 10px
    }
    .page-control .row {
        overflow: visible
    }
    .page-control .row .select-account label {
        font-size: 16px;
        font-size: 1.1428571428571428rem;
        margin-right: 10px
    }
    .page-control .row .select-account .dropdown {
        border: 1px solid #333333;
        width: 275px!important;
        padding-top: 0;
        line-height: 28px
    }
    .page-control .row .select-account .dropdown .plan-name-box {
        float: right;
        font-size: 16px;
        font-size: 1.1428571428571428rem
    }
    .page-control .row .select-account .dropdown .plan-name-box .fa {
        float: none;
        position: relative;
        top: 3px
    }
}
.page-control.sub-sticky-fixed {
    position: fixed;
    top: 40px;
    height: 54px;
    width: 100%;
    z-index: 9999;
    padding: 10px
}
.search_results {
    padding: 12.5px;
    overflow: auto
}
@media (min-width: 768px) {
    .search_results {
        padding: 12.5px 0
    }
}
.controller form {
    padding: 0;
    display: block;
    vertical-align: middle;
    width: 100%;
    overflow: auto
}
.controller form span.left {
    float: left
}
.controller form span.right {
    float: right;
    text-align: right
}
@media (min-width: 768px) {
    .controller form {
        padding: 30px 0;
        display: table-cell
    }
    .controller form span.left {
        margin-right: 25px
    }
    .controller form span.right {
        float: left
    }
}
.article {
    margin: 20px 0
}
.article h2 {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    font-weight: 400
}
.sinhala .article h2 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.article h2+p {
    margin: 0 0 5px 0;
    width: 185px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}
.article h2+p a {
    color: #527424;
    font-size: 12px;
    font-size: .8571428571428571rem
}
.article p {
    margin: 0
}
.article div {
    display: table
}
.article div p {
    display: table-cell;
    vertical-align: top
}
.article div p img {
    vertical-align: top
}
.article div p:first-child {
    text-align: center;
    padding-right: 12.5px
}
.article div p:first-child a {
    margin-top: 10px;
    font-size: 12px;
    font-size: .8571428571428571rem;
    padding-right: 10px;
    padding-left: 10px
}
@media (min-width: 768px) {
    .article {
        margin: 30px 0
    }
    .article h2 {
        font-size: 18px;
        font-size: 1.2857142857142858rem
    }
    .article h2+p {
        margin: 0 0 15px 0
    }
    .article h2+p a {
        font-size: 14px;
        font-size: 1rem
    }
    .article.first {
        margin-top: 0
    }
    .article div p:first-child {
        padding-right: 20px
    }
}
.sub .article h2+p {
    margin: 0 0 5px 0
}
.sub .article p {
    margin: 0
}
.app-list-box h2 {
    color: #8778b7;
    margin: 20px 0;
    padding: 0 12.5px;
    font-size: 24px;
    font-size: 1.7142857142857142rem
}
@media (min-width: 768px) {
    .app-list-box {
        margin-bottom: 20px
    }
    .app-list-box h2 {
        margin: 0 0 20px 0;
        padding: 0
    }
}
.app-list {
    display: table;
    width: 100%;
    padding: 12.5px 0;
    border-bottom: 1px solid #e5eef2
}
.app-list div {
    display: table-cell;
    vertical-align: top
}
.app-list .app-thumb {
    width: 40px;
    padding: 0 12.5px;
    text-align: center
}
.app-list .app-thumb img {
    vertical-align: top;
    width: 40px
}
.app-list .app-thumb .btn {
    margin-top: 10px;
    font-size: 11px;
    font-size: .7857142857142857rem;
    padding: 5px 10px;
    display: none;
    margin-bottom: 12.5px
}
.app-list .app-content h3 {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    font-weight: 400
}
@media screen and (min-width: 1200px) {
    .app-list .app-content h3 {
        font-size: 18px;
        font-size: 1.2857142857142858rem
    }
}
.sinhala .app-list .app-content h3 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.app-list .app-content h3 a {
    color: #8778b7
}
.app-list .app-content p {
    margin: 0;
    font-size: 14px;
    font-size: 1rem;
    display: none
}
.app-list .app-content p:last-child {
    font-size: 14px;
    font-size: 1rem;
    display: block
}
.app-list .view-more-icon {
    width: 50px;
    text-align: center;
    vertical-align: middle
}
.app-list .view-more-icon a {
    color: #bacad2;
    font-size: 30px
}
@media (min-width: 768px) {
    .app-list {
        padding: 0 0 10px 0;
        border: none
    }
    .app-list div {
        padding-bottom: 50px
    }
    .app-list .app-thumb {
        padding: 0;
        width: 80px;
        padding-right: 20px
    }
    .app-list .app-thumb img {
        vertical-align: top;
        width: 80px
    }
    .app-list .app-thumb .btn {
        display: inline-block
    }
    .app-list .app-content p {
        display: block
    }
    .app-list .app-content p:last-child {
        display: none
    }
    .app-list .view-more-icon {
        display: none
    }
}
.contact-line {
    margin-bottom: 30px
}
@media (min-width: 768px) {
    .contact-line {
        margin-bottom: 0
    }
}
.contact-lines {
    margin: 20px 0;
    padding: 0;
    list-style: none
}
.contact-lines h4 {
    font-size: 21px;
    font-size: 1.5rem;
    color: #3a444b;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .contact-lines h4 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.contact-lines .contact-img {
    margin: 0 10px
}
.contact-lines li:last-child .contact-img {
    margin: 0 0
}
.contact-lines a img {
    margin-bottom: 10px;
    width: 40px
}
.contact-lines .contact-box {
    text-align: center
}
@media (min-width: 768px) {
    .contact-lines {
        margin-bottom: 0
    }
    .contact-lines h4 {
        font-size: 18px;
        font-size: 1.2857142857142858rem
    }
    .contact-lines a img {
        margin-top: 20px;
        width: 80px
    }
    .contact-lines a span {
        display: none
    }
}
.contact-lines-info {
    margin: 0;
    padding: 0;
    list-style: none
}
.contact-lines-info li {
    display: none
}
.contact-lines-info li:first-child {
    display: block
}
.contact-lines-info h5 {
    margin-top: 0;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    display: none;
    margin-top: 55px
}
.contact-lines-info h6 {
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    color: #3a444b
}
@media (min-width: 768px) {
    .contact-lines-info {
        display: block
    }
    .contact-lines-info h5 {
        display: block
    }
    .contact-lines-info li {
        display: block
    }
}
.contact-lines-btn {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none
}
@media (min-width: 768px) {
    .contact-lines-btn {
        display: block
    }
}
.steps {
    border: none;
    list-style: none;
    margin: 0 0 20px 0
}
.steps li {
    text-align: center;
    float: left
}
.steps li a {
    border: none;
    font-size: 14px;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    color: #333333;
    line-height: 1
}
.sinhala .steps li a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.steps li a:hover {
    background-color: transparent;
    border: none
}
.steps li a strong {
    display: table;
    width: 40px;
    margin: 0 auto
}
.steps li a strong span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    background-color: #8778b7;
    color: #FFF;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    font-size: 28px;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .steps li a strong span {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.steps li.active {
    border: none
}
.steps li.active a {
    border: none;
    color: #8778b7
}
.steps li.active a:hover {
    background-color: transparent;
    border: none;
    color: #8778b7
}
.steps li.active a strong span {
    background-color: #602d91
}
@media (min-width: 768px) {
    .steps li {
        display: block
    }
    .steps li a {
        font-size: 18px
    }
    .steps li a strong {
        width: 60px
    }
    .steps li a strong span {
        width: 60px;
        height: 60px;
        font-size: 40px
    }
}
@media (max-width: 768px) {
    .steps li {
        width: 100%
    }
}
.first-only-mobile .steps li {
    display: none
}
@media (min-width: 768px) {
    .first-only-mobile .steps li {
        display: block
    }
}
.first-only-mobile .steps li.active {
    display: inline-block;
    text-align: center
}
@media (max-width: 768px) {
    .first-only-mobile .steps li.active {
        width: 100%
    }
}
.steps.steps-4 li {
    width: 25%
}
@media (min-width: 768px) {
    .steps {
        margin: 50px 0
    }
}
.plan-recommender-steps .steps li a strong {
    margin-bottom: 10px;
    height: 30px;
    width: 30px
}
.plan-recommender-steps .steps li a strong span {
    height: 30px;
    width: 30px;
    font-size: 20px;
    background-color: #8dc63f
}
.plan-recommender-steps .steps li a em {
    font-style: normal
}
.plan-recommender-steps .steps li.active a strong span {
    background-color: #8778b7
}
.plan-recommender-steps .steps li.active a em span {
    color: #8778b7
}
@media (min-width: 768px) {
    .plan-recommender-steps .steps {
        background-color: #eff6e5;
        border-top: 1px solid #8dc63f
    }
    .plan-recommender-steps .steps li a {
        background-color: #eff6e5;
        float: left;
        width: 100%
    }
    .plan-recommender-steps .steps li a strong {
        margin: 0;
        float: left
    }
    .plan-recommender-steps .steps li a em {
        display: table;
        height: 30px
    }
    .plan-recommender-steps .steps li a em span {
        padding-left: 20px;
        display: table-cell;
        vertical-align: middle;
        font-size: 18px;
        font-style: normal
    }
    .plan-recommender-steps .steps li.active a,
    .plan-recommender-steps .steps li:hover a {
        background-color: #eff6e5
    }
}
@media (min-width: 768px) {
    .btn-group-wrap {
        background-color: #eff6e5;
        border-bottom: 1px solid #8dc63f;
        float: left;
        width: 100%
    }
    .btn-group-wrap .btn-group {
        margin: 10px 0
    }
    .btn-group-wrap .btn-group .btn-left {
        padding-top: 10px
    }
}
.step-info {
    margin: 20px 0;
    font-size: 14px;
    font-size: 1rem
}
@media (min-width: 768px) {
    .step-info {
        margin: 20px 0 50px 0;
        font-size: 16px;
        font-size: 1.1428571428571428rem
    }
}
.step-form label {
    color: #3A444B
}
.step-form h4 {
    margin-bottom: 20px;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .step-form h4 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.step-form .form-group h4 {
    margin: 0 0 10px 0
}
.btn-left {
    float: left;
    width: 30%;
    font-size: 16px;
    font-size: 1.1428571428571428rem
}
.btn-right {
    float: right;
    width: 100%;
    text-align: right;
    overflow: auto
}
.btn-right.bordered {
    border-top: 1px solid #e5eef2;
    padding-top: 25px
}
.btn-group {
    margin-top: 50px
}
.btn-group .btn-right {
    width: 50%
}
.select-account label {
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
    font-size: 14px;
    font-size: 1rem
}
.select-account .dropdown {
    margin: 0 auto;
    width: 180px;
    background-color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding: 3px 7px 0 7px
}
.select-account .dropdown a {
    color: #8778b7;
    font-size: 14px;
    font-size: 1rem;
    display: inline-block;
    width: 100%
}
.select-account .dropdown a .fa {
    color: #333333;
    font-size: 24px;
    float: right
}
@media (min-width: 768px) {
    .select-account .dropdown a {
        font-size: 18px;
        font-size: 1.2857142857142858rem
    }
}
.select-account .dropdown .dropdown-menu {
    width: 100%
}
@media (min-width: 768px) {
    .select-account .dropdown .dropdown-menu {
        width: auto;
        min-width: 400px
    }
}
.select-account .dropdown .dropdown-menu span:first-child {
    float: left
}
.select-account .dropdown .dropdown-menu span:last-child {
    float: right;
    color: #3a444b
}
.select-account .dropdown .dropdown-menu li:last-child {
    text-align: center
}
.select-account .dropdown .dropdown-menu li:last-child a {
    color: #3178ca
}
.select-account .plan_name {
    display: none
}
.select-account .my-profile {
    text-align: center;
    margin-top: 10px;
    float: right;
    font-weight: 400;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif
}
.sinhala .select-account .my-profile {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.select-account .my-profile a {
    font-size: 12px;
    font-size: .8571428571428571rem;
    text-transform: uppercase
}
.select-account .add-account-btn {
    margin-top: 10px;
    font-size: 14px;
    font-size: 1rem;
    background-color: transparent;
    padding-left: 0;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif;
    color: #333333
}
.sinhala .select-account .add-account-btn {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.select-account .my-profile {
    font-size: 14px;
    font-size: 1rem;
    background-color: transparent;
    padding-left: 0;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif;
    color: #333333;
    padding-right: 0
}
.sinhala .select-account .my-profile {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.select-account .plan_name {
    display: block;
    float: left;
    margin: 0 0 0 20px;
    font-size: 18px;
    font-size: 1.2857142857142858rem;
    color: #8778b7;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .select-account .plan_name {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
@media (min-width: 768px) {
    .select-account label {
        float: left;
        margin-right: 20px;
        margin-top: 0;
        font-size: 18px;
        font-size: 1.2857142857142858rem;
        margin-bottom: 0;
        width: auto;
        text-align: left;
        line-height: 30px
    }
    .select-account .dropdown {
        float: left
    }
    .select-account .add-account-btn {
        font-size: 14px;
        font-size: 1rem;
        float: left;
        margin: 0 0 0 10px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
        color: #333333!important;
        background-color: #e5eef2;
        border: none;
        padding-left: 10px
    }
    .open .dropdown-toggle.select-account .add-account-btn,
    .select-account .add-account-btn.active,
    .select-account .add-account-btn:active,
    .select-account .add-account-btn:focus,
    .select-account .add-account-btn:hover {
        color: #333333!important;
        background-color: #cadce4
    }
    .open .dropdown-toggle.select-account .add-account-btn,
    .select-account .add-account-btn.active,
    .select-account .add-account-btn:active {
        background-image: none
    }
    .select-account .add-account-btn.disabled,
    .select-account .add-account-btn.disabled.active,
    .select-account .add-account-btn.disabled:active,
    .select-account .add-account-btn.disabled:focus,
    .select-account .add-account-btn.disabled:hover,
    .select-account .add-account-btn[disabled],
    .select-account .add-account-btn[disabled].active,
    .select-account .add-account-btn[disabled]:active,
    .select-account .add-account-btn[disabled]:focus,
    .select-account .add-account-btn[disabled]:hover,
    fieldset[disabled] .select-account .add-account-btn,
    fieldset[disabled] .select-account .add-account-btn.active,
    fieldset[disabled] .select-account .add-account-btn:active,
    fieldset[disabled] .select-account .add-account-btn:focus,
    fieldset[disabled] .select-account .add-account-btn:hover {
        background-color: #e5eef2!important
    }
    .select-account .add-account-btn .badge {
        color: #e5eef2;
        background-color: #333333
    }
    .open .dropdown-toggle.select-account .add-account-btn,
    .select-account .add-account-btn.active,
    .select-account .add-account-btn:active,
    .select-account .add-account-btn:focus,
    .select-account .add-account-btn:hover {
        background-color: #FFF
    }
    .select-account .add-account-btn .fa {
        display: none
    }
    .select-account .my-profile {
        margin-top: 0;
        text-align: right;
        font-size: 14px;
        font-size: 1rem;
        float: right;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
        color: #333333!important;
        background-color: #e5eef2;
        border: none;
        padding-left: 10px;
        padding-right: 10px
    }
    .open .dropdown-toggle.select-account .my-profile,
    .select-account .my-profile.active,
    .select-account .my-profile:active,
    .select-account .my-profile:focus,
    .select-account .my-profile:hover {
        color: #333333!important;
        background-color: #cadce4
    }
    .open .dropdown-toggle.select-account .my-profile,
    .select-account .my-profile.active,
    .select-account .my-profile:active {
        background-image: none
    }
    .select-account .my-profile.disabled,
    .select-account .my-profile.disabled.active,
    .select-account .my-profile.disabled:active,
    .select-account .my-profile.disabled:focus,
    .select-account .my-profile.disabled:hover,
    .select-account .my-profile[disabled],
    .select-account .my-profile[disabled].active,
    .select-account .my-profile[disabled]:active,
    .select-account .my-profile[disabled]:focus,
    .select-account .my-profile[disabled]:hover,
    fieldset[disabled] .select-account .my-profile,
    fieldset[disabled] .select-account .my-profile.active,
    fieldset[disabled] .select-account .my-profile:active,
    fieldset[disabled] .select-account .my-profile:focus,
    fieldset[disabled] .select-account .my-profile:hover {
        background-color: #e5eef2!important
    }
    .select-account .my-profile .badge {
        color: #e5eef2;
        background-color: #333333
    }
    .open .dropdown-toggle.select-account .my-profile,
    .select-account .my-profile.active,
    .select-account .my-profile:active,
    .select-account .my-profile:focus,
    .select-account .my-profile:hover {
        background-color: #FFF
    }
    .select-account .my-profile .fa {
        display: none
    }
}
.account-info-boxes {
    margin-bottom: 50px;
    text-align: center
}
.account-info-boxes h4 {
    color: #333333;
    margin-bottom: 20px
}
.account-info-boxes .total-due {
    background-color: #eff6e5;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    padding: 15px 10px
}
.account-info-boxes .total-due h5 {
    color: #3a444b;
    font-size: 14px;
    font-size: 1rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .account-info-boxes .total-due h5 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.account-info-boxes .total-due h5 strong {
    margin-top: 10px;
    font-size: 25px;
    font-size: 1.7857142857142858rem;
    display: block;
    color: #8778b7
}
.account-info-boxes .starpoint-balance {
    background-color: #eff6e5;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    padding: 15px 10px 10px 10px
}
.account-info-boxes .due-on {
    margin: 20px 0
}
.account-info-boxes .due-on h5 {
    font-size: 14px;
    font-size: 1rem;
    font-weight: 400;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
    color: #000
}
.sinhala .account-info-boxes .due-on h5 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.account-info-boxes .due-on h5 strong {
    margin-top: 10px;
    display: block;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .account-info-boxes .due-on h5 strong {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.account-info-boxes .pay-online {
    display: inline-block;
    text-align: center
}
.account-info-boxes .pay-online a {
    display: inline-block;
    width: 100%
}
.account-info-boxes .pay-online ul {
    margin-top: 10px
}
.account-info-boxes .starpoint-balance {
    text-align: center;
    margin-top: 40px
}
.account-info-boxes .starpoint-balance h4 {
    margin-bottom: 10px
}
.account-info-boxes .starpoint-balance p {
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    color: #8778b7
}
.sinhala .account-info-boxes .starpoint-balance p {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.account-info-boxes .add-data {
    margin-top: 20px;
    display: inline-block;
    text-align: center
}
.account-info-boxes .add-data a {
    display: inline-block;
    width: 100%;
    white-space: normal
}
.account-info-boxes .add-data ul {
    margin-top: 10px
}
.account-info-boxes .edit-my-top-10 {
    margin-top: 0;
    display: inline-block;
    text-align: center
}
.account-info-boxes .edit-my-top-10 a {
    display: inline-block;
    width: 100%
}
@media (min-width: 768px) {
    .account-info-boxes {
        border-bottom: 2px solid #e5eef2;
        overflow: auto
    }
    .account-info-boxes h4 {
        margin-bottom: 30px
    }
    .account-info-boxes .total-due {
        padding: 20px 10px
    }
    .account-info-boxes .total-due h5 {
        font-size: 16px;
        font-size: 1.1428571428571428rem
    }
    .account-info-boxes .total-due h5 strong {
        font-size: 30px;
        font-size: 2.142857142857143rem
    }
    .account-info-boxes .due-on {
        margin: 0 0 30px 0
    }
    .account-info-boxes .due-on h5 {
        font-size: 16px;
        font-size: 1.1428571428571428rem
    }
    .account-info-boxes .pay-online ul {
        margin-top: 20px
    }
    .account-info-boxes .add-data {
        margin-top: 30px
    }
    .account-info-boxes .edit-my-top-10 {
        margin-top: 10px
    }
}
.account-extra-info-boxes h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    font-size: 1.2857142857142858rem;
    color: #8778b7;
    min-height: 40px;
    line-height: 150%
}
.account-extra-info-boxes h4 {
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    color: #3a444b
}
.account-extra-info-boxes dl dt {
    margin: 0;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .account-extra-info-boxes dl dt {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.account-extra-info-boxes dl dd {
    margin-bottom: 30px
}
.img-intro {
    display: table
}
.img-intro figure {
    display: table-cell;
    width: 60px;
    padding-right: 20px;
    vertical-align: top
}
.img-intro figure img {
    width: 100%
}
.img-intro div {
    display: table-cell
}
.img-intro div h3 {
    margin-top: 0
}
.img-intro div p {
    margin-bottom: 0
}
.img-intro div ul {
    margin-top: 20px
}
@media (min-width: 768px) {
    .img-intro figure {
        width: 75px;
        padding-right: 25px
    }
}
.activation-option {
    margin: 50px 0;
    text-align: center
}
.activation-option h4 {
    margin: 0 0 10px 0;
    padding: 0;
    color: #bacad2
}
.activation-option h5 {
    margin: 0 0 20px 0;
    padding: 0;
    color: #8778b7;
    font-size: 16px;
    font-size: 1.1428571428571428rem
}
.activation-option h5 a {
    color: #8778b7
}
.collapse-content .panel-body .activation-option h5 {
    color: #8778b7
}
.activation-option p {
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    color: #3a444b
}
.sinhala .activation-option p {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.activation-option ul {
    margin: 0;
    padding: 0;
    list-style: none
}
.activation-option ul li {
    margin: 0 0 10px 0
}
.activation-option ul li img {
    width: 100px
}
@media (min-width: 768px) {
    .activation-option {
        margin: 40px 0 10px 0
    }
    .activation-option h5 {
        margin-bottom: 30px
    }
}
#screenshots .flexslider .slides>li {
    margin: 0 25px 0 0
}
.coverage-for label {
    display: block
}
.coverage-for select {
    font-size: 16px;
    font-size: 1.1428571428571428rem
}
.current-location {
    margin: 20px 0
}
.current-location label {
    font-weight: 400;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif
}
.sinhala .current-location label {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.current-location input {
    padding: 8px 7px 7px 7px;
    font-size: 14px;
    font-size: 1rem;
    border: none;
    width: 100%;
    border: 2px solid #6689ab;
    z-index: 90;
    -webkit-appearance: none;
    border-radius: 0;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
    color: #30373b
}
.current-location input:focus {
    outline: 0
}
.coverage-show {
    margin-bottom: 20px
}
.coverage-show label {
    font-weight: 400;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif
}
.sinhala .coverage-show label {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.coverage-show select {
    min-width: 100%
}
.coverage-search-btn {
    margin-bottom: 10px
}
.coverage-search-btn .btn {
    padding-right: 25px;
    padding-left: 25px
}
@media (min-width: 768px) {
    .coverage-for label {
        display: inline;
        font-size: 18px;
        font-size: 1.2857142857142858rem;
        margin-right: 10px
    }
    .current-location {
        margin: 25px 0
    }
}
.coverage-map .widescreen:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 10;
    pointer-events: none;
    -webkit-box-shadow: inset 1px 1px 3px 0 rgba(50, 50, 50, .45);
    -moz-box-shadow: inset 1px 1px 3px 0 rgba(50, 50, 50, .45);
    box-shadow: inset 1px 1px 3px 0 rgba(50, 50, 50, .45)
}
.coverage-map aside h3 {
    font-size: 18px;
    font-size: 1.2857142857142858rem
}
@media (min-width: 768px) {
    .coverage-map section {
        margin: 50px 0
    }
}
.location-result {
    margin-top: 30px;
    margin-right: -25px;
    border-top: 1px solid #D4D4D4;
    border-bottom: 1px solid #D4D4D4;
    padding-top: 25px;
    height: 341px;
    overflow: auto
}
.location-result h3 {
    margin-top: 0;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-size: 1.2857142857142858rem;
    color: #3a444b
}
.sinhala .location-result h3 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.location-result ul {
    margin: 30px 20px 0 0;
    padding: 0;
    list-style: none
}
.location-result ul li {
    display: table;
    margin-bottom: 20px
}
.location-result ul .pin {
    display: table-cell;
    padding-right: 15px
}
.location-result ul .pin img {
    width: 15px
}
.location-result ul .text {
    display: table-cell;
    font-size: 14px;
    font-size: 1rem;
    vertical-align: top
}
.location-result ul .text h4 {
    margin-top: 0;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-size: 1rem
}
.sinhala .location-result ul .text h4 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.location-result ul .text h5 {
    color: #f47920;
    font-size: 14px;
    font-size: 1rem;
    font-weight: 400;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif
}
.sinhala .location-result ul .text h5 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.location-result ul .text .info_window div {
    position: relative;
    line-height: 1.4em;
    height: 4.2em;
    overflow: hidden
}
.location-result ul .text .info_window div::after {
    content: "...";
    font-weight: 700;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 1px 45px;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, #fff 60%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(60%, #fff));
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, #fff 60%);
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, #fff 60%);
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0, #fff 60%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 60%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1)
}
.legend {
    margin: 0 10px;
    padding: 0;
    list-style: none
}
.legend label {
    position: relative;
    top: 5px;
    margin-bottom: 0
}
.legend li {
    float: left;
    width: 50%;
    margin-bottom: 20px
}
.legend li:first-child {
    width: 100%
}
.legend .legend-wrap {
    display: table;
    width: 100%
}
.legend .legend-img {
    display: table-cell;
    vertical-align: middle;
    padding-right: 10px;
    width: 20px
}
.legend .legend-img img {
    width: 20px
}
.legend .legend-name {
    display: table-cell;
    vertical-align: middle;
    font-size: 16px;
    font-size: 1.1428571428571428rem
}
@media (min-width: 768px) {
    .legend {
        margin: 0
    }
    .legend li {
        float: left;
        width: 22.9166666667%;
        padding-left: 12.5px;
        padding-right: 12.5px
    }
    .legend li:first-child {
        width: 8.333333333333332%;
        padding-left: 0
    }
    .legend .legend-img img {
        width: 40px
    }
}
.service-points h3 {
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 18px;
    font-size: 1.2857142857142858rem;
    color: #8778b7
}
.service-points ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: auto
}
.service-points ul li {
    margin-bottom: 50px;
    float: left;
    width: 50%;
    text-align: center
}
.service-points ul li a {
    width: 176px;
    display: inline-block;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .service-points ul li a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.mobile .service-points ul li a {
    width: 140px
}
.service-points ul li img {
    margin-bottom: 10px;
    width: 100%
}
.service-points ul li.last {
    margin-bottom: 0
}
#map {
    padding: 10px 10px 30px 10px
}
#map h3 {
    text-align: center;
    color: #FFF;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    margin-bottom: 30px
}
#map .coverage {
    display: table;
    width: 100%;
    margin: 0
}
#map .coverage>div {
    display: table-cell;
    vertical-align: top
}
#map .coverage>div:first-child {
    width: 130px;
    color: #FFF;
    font-size: 14px;
    font-size: 1rem
}
#map .check-coverage {
    margin-top: 17px;
    text-align: center
}
.sub-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 3px solid #bacad2;
    border-bottom: 2px solid #bacad2
}
.sub-nav>li {
    color: #3178ca
}
.sub-nav>li:hover {
    cursor: pointer
}
.sub-nav>li>a {
    margin: 0;
    display: block;
    padding: 20px 10px;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    color: #3178ca;
    background-color: #e5eef2;
    border-bottom: 1px solid #bacad2;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .sub-nav>li>a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.sub-nav>li>a.active,
.sub-nav>li>a:hover {
    background-color: #FFF;
    color: #8778b7
}
.sub-nav>li>a:hover {
    cursor: pointer
}
.sub-nav>li h3 {
    margin: 0;
    display: block;
    padding: 10px;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    color: #3178ca;
    background-color: #e5eef2;
    border-bottom: 1px solid #bacad2;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    list-style: none
}
.sinhala .sub-nav>li h3 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.sub-nav>li h3:after {
    float: right;
    content: "\f107";
    font-size: 24px;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.sub-nav>li ul {
    display: none;
    border-bottom: 1px solid #bacad2;
    margin: 0;
    padding: 0 10px 15px 10px;
    list-style: none
}
.sub-nav>li ul li {
    line-height: 32px;
    font-size: 16px;
    font-size: 1.1428571428571428rem
}
.sub-nav>li.active h3 {
    border-bottom: none;
    background-color: #FFF;
    padding-bottom: 10px
}
.sub-nav>li.active h3:after {
    content: "\f106"
}
.sub-nav>li.active>a {
    background-color: #FFF
}
.sub-nav>li.active ul {
    display: block
}
.sub-nav>li.active ul li a:hover {
    color: #8778b7
}
.sub-nav>li.active ul li.active a {
    color: #8778b7
}
.sub-nav>li.active ul ul {
    border: none;
    padding-bottom: 0
}
.mobile-sub-nav {
    margin-bottom: 30px
}
@media (min-width: 768px) {
    .mobile-sub-nav {
        display: none!important
    }
}
.mobile-sub-nav .dropdown {
    margin: 0 auto;
    width: 100%;
    background-color: #8778b7;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    padding: 5px 7px 2px 7px;
    line-height: 30px
}
.mobile-sub-nav .dropdown a {
    color: #FFF;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-size: 1.2857142857142858rem;
    display: inline-block;
    width: 100%
}
.sinhala .mobile-sub-nav .dropdown a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.mobile-sub-nav .dropdown a .fa {
    color: #FFF;
    font-size: 24px;
    float: right
}
.mobile-sub-nav .dropdown h3 {
    padding: 3px 20px 0 20px;
    font-size: 18px;
    font-size: 1.2857142857142858rem
}
.mobile-sub-nav .dropdown ul ul {
    list-style: none;
    margin: 0;
    padding: 0
}
.mobile-sub-nav .dropdown ul ul a {
    padding: 0 20px
}
.mobile-sub-nav .dropdown ul ul a:focus,
.mobile-sub-nav .dropdown ul ul a:hover {
    text-decoration: none;
    color: #252a2d;
    background-color: #f5f5f5
}
.mobile-sub-nav .dropdown .dropdown-menu {
    min-width: 100%
}
.mobile-sub-nav .dropdown .dropdown-menu a {
    color: #333
}
.plain-box h3 {
    font-size: 24px;
    font-size: 1.7142857142857142rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    margin: 0 0 40px 0;
    color: #8778b7;
    text-align: center
}
.sinhala .plain-box h3 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.plain-box h3+.row {
    margin-bottom: 50px
}
.plain-box h4.title {
    font-size: 18px;
    font-size: 1.2857142857142858rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    margin: 0 0 30px 0;
    color: #8778b7;
    text-align: center
}
.sinhala .plain-box h4.title {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
@media (min-width: 768px) {
    .plain-box {
        margin-top: 50px;
        padding-top: 60px;
        border-top: 3px solid #8dc63f
    }
    .plain-box h4.title {
        text-align: left
    }
}
.plainslider-wrap {
    width: 126px;
    margin: 0 auto
}
.plainslider-wrap .plainslider .slides li a {
    text-align: center;
    display: block;
    width: 126px;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .plainslider-wrap .plainslider .slides li a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.plainslider-wrap .plainslider.flexslider .slides img {
    width: 126px
}
.plainslider-wrap .plainslider .flex-control-paging li a {
    background-color: #bacad2
}
.plainslider-wrap .plainslider .flex-control-paging li a.flex-active {
    background-color: #8778b7
}
.plainslider-wrap .plainslider .flex-direction-nav a {
    opacity: 1;
    top: 40%
}
.plainslider-wrap .plainslider .flex-control-nav {
    width: 200%;
    left: -50%;
    top: 110%
}
.plainslider-wrap .plainslider.flexslider .flex-direction-nav .flex-disabled {
    opacity: 1!important
}
.plainslider-wrap .plainslider.flexslider .flex-next {
    right: -50px
}
.plainslider-wrap .plainslider.flexslider:hover .flex-next {
    right: -50px
}
.plainslider-wrap .plainslider.flexslider .flex-prev {
    left: -50px
}
.plainslider-wrap .plainslider.flexslider:hover .flex-prev {
    left: -50px
}
@media (min-width: 768px) {
    .plainslider-wrap {
        margin: 0 auto;
        width: auto
    }
    .plainslider-wrap .plainslider.flexslider:hover .flex-prev {
        left: -50px
    }
    .plainslider-wrap .plainslider .flex-control-nav {
        width: 100%;
        left: 0;
        top: 110%
    }
}
.plainslider-wrap.slide-175 {
    width: 175px
}
.plainslider-wrap.slide-175 .plainslider .slides li a {
    width: 175px
}
.plainslider-wrap.slide-175 .plainslider.flexslider .slides img {
    width: 175px
}
@media (min-width: 768px) {
    .plainslider-wrap.slide-175 {
        margin: 0;
        width: auto
    }
    .plainslider-wrap.slide-175 .plainslider .slides li a {
        width: 100%
    }
    .plainslider-wrap.slide-175 .plainslider.flexslider .slides img {
        width: 175px;
        margin: 0 auto
    }
}
.like-to-watch {
    padding: 30px 0
}
.like-to-watch .program-intro {
    padding: 0 10px 20px 10px
}
.like-to-watch h3 {
    margin-top: 0;
    color: #8778b7;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    font-size: 21px;
    font-size: 1.5rem
}
.sinhala .like-to-watch h3 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.like-to-watch .row {
    width: 320px;
    margin: 0 auto
}
.like-to-watch .row>div {
    float: left;
    width: 140px;
    margin: 0 10px 20px 10px
}
.like-to-watch .row img {
    display: block;
    max-width: 100%;
    height: auto
}
@media (min-width: 768px) {
    .like-to-watch {
        padding: 0;
        width: auto
    }
    .like-to-watch .program-intro {
        padding: 0
    }
    .like-to-watch .row {
        width: auto;
        margin-left: -12.5px;
        margin-right: -12.5px
    }
    .like-to-watch .row>div {
        width: 33.33333333333333%;
        margin: 0;
        margin-top: 25px
    }
    .like-to-watch .row img {
        display: block;
        max-width: 100%;
        height: auto
    }
}
.program-packages {
    padding: 30px 0;
    margin-top: 20px;
    border-top: 1px solid #8dc63f
}
.program-packages .program-packages-intro {
    padding: 0 10px 20px 10px
}
.program-packages .program-packages-intro h3 {
    text-align: left;
    margin-bottom: 20px
}
.program-packages h3 {
    margin-top: 0;
    color: #8778b7;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-size: 1.7142857142857142rem;
    line-height: 1.5
}
.sinhala .program-packages h3 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.program-packages ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #8dc63f
}
.program-packages ul li {
    margin: 0;
    padding: 10px;
    width: 100%;
    background-color: #eff6e5;
    border-bottom: 1px solid #8dc63f;
    display: table
}
.program-packages ul li div {
    display: table-cell
}
.program-packages ul li h4 a {
    color: #8778b7;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-size: 1.1428571428571428rem
}
.sinhala .program-packages ul li h4 a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.program-packages ul li>a {
    display: table-cell;
    vertical-align: middle;
    color: #8dc63f;
    font-size: 30px;
    font-size: 2.142857142857143rem
}
@media (min-width: 768px) {
    .program-packages {
        padding: 0;
        width: auto;
        margin-top: 0;
        border-top: none
    }
    .program-packages .program-packages-intro {
        padding: 0 0 20px 0
    }
}
.quick_info_search label {
    font-size: 21px;
    font-size: 1.5rem;
    color: #8778b7;
    padding-top: 7px
}
.quick_info_search input {
    padding: 10px;
    font-size: 14px;
    font-size: 1rem;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    border: 2px solid #6689AB;
    -webkit-appearance: none;
    border-radius: 0;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    zoom: 1
}
.quick_info_search input:focus {
    outline: 0
}
.quick_info_search button {
    padding: 13px 10px 12px 10px;
    width: 100%;
    border: none;
    color: #FFF;
    font-size: 18px;
    line-height: 1;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: #3a444b
}
.popular-topics {
    margin-top: 20px;
    margin-bottom: 20px
}
.popular-topics h3 {
    color: #333333;
    font-size: 16px;
    font-size: 1.1428571428571428rem
}
.popular-topics ul {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: auto
}
.popular-topics ul li {
    margin: 5px 0;
    display: block;
    display: table;
    width: 100%;
    text-align: left
}
.popular-topics ul li:before {
    content: "\25CF";
    font-size: 20px;
    font-size: 1.25rem;
    color: #8778b7;
    list-style: none;
    display: table-cell;
    width: 20px
}
@media (min-width: 768px) {
    .popular-topics {
        margin-top: 50px;
        margin-bottom: 50px
    }
    .popular-topics ul {
        margin: 20px 0 0 0
    }
    .popular-topics ul li {
        margin: 5px 0;
        display: block;
        width: 33%;
        float: left;
        display: table;
        width: 100%;
        text-align: left
    }
    .popular-topics ul li:before {
        content: "\25CF";
        font-size: 20px;
        font-size: 1.25rem;
        color: #8778b7;
        list-style: none;
        display: table-cell;
        width: 20px
    }
}
.category-banner-wrap .separator {
    display: none
}
.category-banner-wrap .category-banner {
    padding: 10px 10px;
    background-color: #eff6e5;
    border-bottom: 1px solid #8dc63f;
    display: table;
    width: 100%
}
.category-banner-wrap .category-banner h3 {
    text-align: left;
    font-size: 18px;
    font-size: 1.2857142857142858rem;
    margin: 0;
    display: table-cell;
    vertical-align: middle
}
.category-banner-wrap .category-banner h3 a {
    display: block;
    line-height: 1;
    color: #8778b7
}
.category-banner-wrap .category-banner .more-mobile {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    font-size: 30px;
    font-size: 2.142857142857143rem
}
.category-banner-wrap .category-banner .more-mobile a {
    color: #8dc63f
}
.category-banner-wrap .category-banner img {
    display: none
}
.category-banner-wrap .category-banner .category-banner-content {
    display: none
}
@media (min-width: 768px) {
    .category-banner-wrap {
        padding: 50px 0
    }
    .category-banner-wrap .title {
        font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
        font-size: 24px;
        font-size: 1.7142857142857142rem;
        color: #8778b7;
        margin: 0 0 50px 0
    }
    .sinhala .category-banner-wrap .title {
        font-family: Axiata_sinhala, "Arial Unicode MS"!important
    }
    .category-banner-wrap .row {
        overflow: visible
    }
    .category-banner-wrap .separator {
        display: block;
        margin: 50px 0;
        float: left
    }
    .category-banner-wrap .category-banner {
        padding: 0;
        background-color: #FFF;
        border: none;
        position: relative;
        float: left;
        display: block
    }
    .category-banner-wrap .category-banner h3 {
        text-align: center;
        font-size: 18px;
        font-size: 1.2857142857142858rem;
        margin: 0;
        display: block
    }
    .category-banner-wrap .category-banner h3 a {
        display: block;
        color: #3178ca;
        line-height: 1.5
    }
    .category-banner-wrap .category-banner img {
        margin-bottom: 10px;
        display: block;
        max-width: 100%;
        height: auto
    }
    .category-banner-wrap .category-banner .category-banner-content {
        display: block;
        background-color: #3a444b;
        padding: 20px 20px 10px 20px;
        position: absolute;
        top: 0;
        display: none
    }
    .category-banner-wrap .category-banner .category-banner-content h3 {
        margin: 0 0 20px 0;
        text-align: center;
        color: #FFF;
        font-size: 18px;
        font-size: 1.2857142857142858rem
    }
    .category-banner-wrap .category-banner .category-banner-content p {
        color: #e5eef2
    }
    .category-banner-wrap .category-banner .category-banner-content ul {
        margin: 0 0 20px 0;
        padding: 0;
        list-style: none
    }
    .category-banner-wrap .category-banner .category-banner-content ul a {
        color: #8dc63f;
        font-size: 16px;
        font-size: 1.1428571428571428rem;
        font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
        line-height: 30px
    }
    .sinhala .category-banner-wrap .category-banner .category-banner-content ul a {
        font-family: Axiata_sinhala, "Arial Unicode MS"!important
    }
    .category-banner-wrap .category-banner:hover .category-banner-content {
        text-indent: 0;
        z-index: 111;
        display: block
    }
}
.support-mobile-search {
    border: none
}
@media (min-width: 768px) {
    .support-mobile-search .search-box form {
        display: table;
        width: auto;
        max-width: auto
    }
    .support-mobile-search .search-box form .search-term input {
        min-width: 400px
    }
}
.results-info {
    margin-bottom: 50px
}
.results-info strong {
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-size: 1rem
}
.sinhala .results-info strong {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.results-info span {
    padding-left: 10px
}
.main-result img {
    margin-bottom: 30px
}
.main-result h3 {
    margin: 0 0 20px 0;
    font-size: 24px;
    font-size: 1.7142857142857142rem
}
.main-result ul {
    margin-bottom: 20px
}
.main-result p {
    margin-bottom: 40px
}
.total-amount-due .left strong {
    color: #333333;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .total-amount-due .left strong {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.total-amount-due .right {
    color: #8778b7;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-size: 1.7142857142857142rem;
    margin-top: 20px
}
.sinhala .total-amount-due .right {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.total-amount-due .pay-online {
    text-align: center
}
@media (min-width: 768px) {
    .total-amount-due .right {
        margin-top: 0;
        font-size: 30px;
        font-size: 2.142857142857143rem
    }
    .total-amount-due .pay-online {
        text-align: right
    }
}
.my-account h4 {
    color: #333333;
    font-size: 14px;
    font-size: 1rem
}
@media (min-width: 768px) {
    .my-account h4 {
        font-size: 16px;
        font-size: 1.1428571428571428rem
    }
}
.previous-bill .bill-period {
    padding: 15px 0
}
.previous-bill strong {
    color: #333333;
    font-size: 14px;
    font-size: 1rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .previous-bill strong {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
@media (min-width: 768px) {
    .previous-bill .bill-period {
        padding: 0
    }
    .previous-bill .bill-period div {
        padding-top: 10px
    }
    .previous-bill strong {
        font-size: 16px;
        font-size: 1.1428571428571428rem
    }
}
.payment-date {
    width: 40%
}
.payment-date ul {
    display: none!important;
    margin: 0;
    padding: 10px 10px 5px 0;
    list-style: none;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-size: .8571428571428571rem
}
.sinhala .payment-date ul {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.open .payment-date ul {
    display: block!important
}
@media (min-width: 768px) {
    .payment-date {
        width: auto
    }
}
.payment-amount ul {
    display: none!important;
    margin: 0;
    padding: 10px 10px 5px 0;
    list-style: none;
    text-align: left;
    font-size: 12px;
    font-size: .8571428571428571rem
}
.open .payment-amount ul {
    display: block!important
}
.my-payments .fa-angle-down {
    font-size: 21px;
    font-size: 1.5rem;
    color: #3178ca
}
.my-payments .open .fa-angle-down:before {
    content: "\f106"
}
.pay-online tr td:first-child {
    padding-right: 10px
}
.my-plan-info .highlight-box {
    float: left;
    width: 100%;
    margin-top: 20px
}
.my-plan-info .highlight-box ul {
    margin: 0 0 -30px 0;
    padding: 0;
    list-style: none;
    float: left;
    width: 100%
}
.my-plan-info .highlight-box li {
    width: 50%;
    float: left;
    margin-bottom: 30px;
    font-size: 14px;
    font-size: 1rem
}
.my-plan-info .highlight-box li strong {
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    color: #333333
}
.sinhala .my-plan-info .highlight-box li strong {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.my-plan-info .plan-overview {
    clear: both
}
.my-plan-info .plan-overview ul {
    list-style: none;
    margin: 0;
    padding: 0
}
.my-plan-info .plan-overview ul li {
    display: table;
    width: 100%;
    text-align: left
}
.my-plan-info .plan-overview ul li:before {
    content: "\25CF";
    font-size: 20px;
    font-size: 1.25rem;
    color: #bacad2;
    list-style: none;
    display: table-cell;
    width: 20px
}
.my-plan-info .plan-extra-info {
    clear: both;
    overflow: auto
}
.my-plan-info .plan-extra-info h4 {
    color: #8778b7
}
.my-plan-info .plan-extra-info strong {
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    color: #333333
}
.sinhala .my-plan-info .plan-extra-info strong {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.my-plan-info .plan-extra-info td:last-child {
    text-align: right
}
.my-plan-info .plan-extra-info .hidden-xs-i {
    display: none
}
.my-plan-info .plan-extra-info td label {
    font-weight: 400;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif
}
.sinhala .my-plan-info .plan-extra-info td label {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.my-plan-info .bill-email {
    display: none
}
.my-plan-info .row {
    clear: both
}
.my-plan-info .add_numbers ul {
    display: table;
    list-style: none;
    margin: 0;
    padding: 0
}
.my-plan-info .add_numbers ul li {
    margin: 0;
    padding: 0;
    display: table-row
}
.my-plan-info .add_numbers ul li .number-count {
    padding-bottom: 20px;
    display: table-cell;
    vertical-align: middle;
    width: 30px;
    text-align: left
}
.my-plan-info .add_numbers ul li .number-input {
    padding-bottom: 20px;
    display: table-cell;
    vertical-align: middle;
    max-width: 220px;
    text-align: center
}
.my-plan-info .add_numbers ul li .number-remove {
    padding-bottom: 20px;
    display: table-cell;
    vertical-align: middle;
    text-align: center
}
.my-plan-info .add_numbers .add-phone-number {
    margin-left: 30px
}
.my-plan-info .add_numbers .add-phone-number a {
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    margin-bottom: 10px;
    display: inline-block
}
.sinhala .my-plan-info .add_numbers .add-phone-number a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.my-plan-info .plan-overview label {
    font-weight: 400;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif
}
.sinhala .my-plan-info .plan-overview label {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.my-plan-info .divert-to {
    margin-bottom: 20px
}
.my-plan-info .divert-to label input {
    width: 20px
}
.my-plan-info .divert-to div {
    margin-left: 23px
}
@media (min-width: 768px) {
    .my-plan-info .highlight-box {
        margin-top: 30px
    }
    .my-plan-info .highlight-box li {
        width: 25%;
        font-size: 16px;
        font-size: 1.1428571428571428rem
    }
    .my-plan-info .plan-extra-info td:last-child {
        text-align: left
    }
    .my-plan-info .plan-extra-info .hidden-xs-i {
        display: inline-block
    }
    .my-plan-info .divert-to {
        display: table;
        width: 100%;
        margin-bottom: 20px
    }
    .my-plan-info .divert-to label {
        display: table-cell;
        vertical-align: middle
    }
    .my-plan-info .divert-to div {
        display: table-cell;
        width: 225px;
        vertical-align: middle;
        text-align: right
    }
}
.programme h4 {
    margin-top: 20px
}
.programme form div {
    margin: 10px 0
}
.programme .submit-box {
    padding: 0 0 30px 0;
    margin-top: 30px;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #e5eef2
}
.search-programme {
    padding-top: 10px;
    margin-top: 40px;
    border-top: 1px solid #e5eef2;
    text-align: center
}
.search-programme form {
    margin-top: 20px;
    display: table;
    width: 100%
}
.search-programme form div {
    vertical-align: top;
    display: table-cell;
    margin: 0;
    padding: 0
}
.search-programme form div:last-child {
    text-align: right
}
.search-programme form .btn {
    padding: 8px 12px
}
.filter-programme form.tv-filter {
    display: none
}
.filter-programme form.tv-filter>ul {
    display: table;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    float: left
}
.filter-programme form.tv-filter>ul>li {
    display: table-cell;
    vertical-align: middle;
    padding: 0 10px 0 0;
    margin: 0;
    text-align: left
}
.filter-programme form.tv-filter>ul .show-cel {
    width: 150px
}
.filter-programme form.tv-filter>ul .channels-cel {
    width: 160px
}
.filter-programme form.tv-filter>ul .lang-cel {
    width: 140px
}
.filter-programme form.tv-filter>ul .hd-cel {
    vertical-align: middle
}
.filter-programme form.tv-filter>ul .hd-cel label {
    font-weight: 400;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
    margin: 0
}
.sinhala .filter-programme form.tv-filter>ul .hd-cel label {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.filter-programme form.tv-filter>ul .download-tv-pdf {
    width: 140px
}
.filter-programme form.tv-filter>ul .download-tv-pdf .btn {
    font-size: 14px;
    font-size: 1rem
}
@media (min-width: 768px) {
    .filter-programme form.tv-filter {
        display: block
    }
}
.filter-programme .search-cel {
    float: left;
    width: 100%;
    padding-left: 10px
}
.filter-programme .search-cel div {
    vertical-align: middle
}
.filter-programme .search-cel div input {
    padding: 6px 30px 6px 10px;
    height: 34px;
    border: 2px solid #333333;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px
}
.filter-programme .search-cel div button {
    padding: 6px 10px;
    height: 33px;
    -webkit-border-top-right-radius: 3px;
    background-color: #333333;
    -webkit-border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px
}
@media (min-width: 400px) {
    .filter-programme .search-cel {
        max-width: 380px;
        float: right!important
    }
}
@media (min-width: 768px) {
    .filter-programme .search-cel {
        width: 220px;
        float: right!important;
        position: absolute;
        right: 10px
    }
}
@media (min-width: 820px) {
    .filter-programme .search-cel {
        width: 270px;
        float: right!important
    }
    .filter-programme .search-cel .search-action {
        position: relative;
        bottom: 0;
        right: 0
    }
    .filter-programme .search-cel .main-search {
        float: right
    }
}
.dropdown-normal {
    margin: 0;
    padding: 0;
    z-index: 1111;
    position: relative
}
.dropdown-normal a {
    font-size: 14px;
    font-size: 1rem
}
.dropdown-normal>li {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%
}
.dropdown-normal>li>a {
    background-color: #8dc63f;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    display: block;
    padding: 3px 10px;
    color: #FFF
}
.dropdown-normal>li>a:hover {
    text-decoration: none
}
.dropdown-normal>li>a .fa {
    float: right;
    position: relative;
    top: 1px;
    font-size: 18px
}
.dropdown-normal>li .dropdown-menu {
    right: 0;
    left: auto;
    margin: -1px 0 0 0;
    border: 1px solid #8dc63f;
    border-radius: 0 3px 3px 3px;
    -moz-border-radius: 0 3px 3px 3px;
    -webkit-border-radius: 0 3px 3px 3px;
    border-top-right-radius: 0;
    -webkit-box-shadow: 0 0 0 #000;
    box-shadow: 0 0 0 #000;
    min-width: 100%;
    display: none
}
.dropdown-normal>li .dropdown-menu li {
    width: 100%
}
.dropdown-normal>li .dropdown-menu a,
.dropdown-normal>li .dropdown-menu label {
    font-size: 12px;
    font-size: .8571428571428571rem;
    color: #333333;
    padding: 7px 10px;
    width: 100%
}
.dropdown-normal>li .dropdown-menu a:hover,
.dropdown-normal>li .dropdown-menu label:hover {
    background-color: #e5eef2
}
.dropdown-normal>li.open li {
    display: block
}
.dropdown-normal>li.open>a {
    border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0
}
.dropdown-normal>li.open>a .fa-angle-down:before {
    content: "\f106"
}
.dropdown-normal>li.open .dropdown-menu {
    display: block
}
@media (min-width: 768px) {
    .dropdown-normal>li {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0
    }
    .dropdown-normal>li>a {
        padding: 7px 10px
    }
    .dropdown-normal>li .dropdown-menu {
        right: auto;
        left: 0;
        margin: -1px 0 0 0
    }
}
.tv-days {
    list-style: none;
    margin: 0;
    padding: 10px 0 0 0;
    width: 100%;
    height: 55px;
    border-bottom: 2px solid #333333;
    z-index: 1111;
    background-color: #FFF;
    position: fixed;
    top: 93px
}
.tv-days li {
    float: left;
    margin: 0 5px
}
.tv-days li a {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-size: 1rem;
    display: inline-block;
    padding: 5px 10px
}
.sinhala .tv-days li a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.tv-days li a:hover {
    background-color: #f47920;
    color: #FFF
}
.tv-days li.active a {
    background-color: #f47920;
    color: #FFF
}
.tv-days li:first-child {
    margin-left: 10px
}
.tv-days li:last-child {
    display: none
}
@media (min-width: 768px) {
    .tv-days li:last-child {
        display: block;
        margin-right: 10px
    }
}
@media (max-width: 768px) {
    .tv-days li {
        margin: 0 2px
    }
    .tv-days li a {
        font-weight: 400;
        font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-size: 1rem;
        padding: 5px 7px
    }
    .sinhala .tv-days li a {
        font-family: Axiata_sinhala, "Arial Unicode MS"!important
    }
}
#tv-programme {
    position: relative;
    opacity: 0
}
#tv-programme .open .move-left,
#tv-programme .open .move-right {
    display: block
}
#tv-programme #time-line-wrap {
    width: 100%;
    overflow: hidden;
    z-index: 111;
    position: fixed;
    top: 148px
}
#tv-programme .time-line {
    list-style: none;
    padding: 0;
    margin: 0 0 0 200px;
    width: 5000px;
    position: relative;
    display: inline-block;
    z-index: 111;
    border-bottom: 1px solid #333333
}
@media (max-width: 768px) {
    #tv-programme .time-line {
        margin: 0 0 0 65px
    }
}
#tv-programme .time-line li {
    float: left;
    height: 50px;
    line-height: 50px;
    width: 180px;
    color: #FFF;
    text-align: left;
    display: block;
    position: relative;
    background-color: #8996A5
}
#tv-programme .time-line li span {
    display: inline-block;
    width: 100%;
    padding-left: 10px;
    position: relative;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala #tv-programme .time-line li span {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
#tv-programme .time-line li span:before {
    position: absolute;
    left: 50%;
    bottom: 0;
    content: '';
    height: 10px;
    display: inline-block;
    border-right: 1px solid #FFF
}
#tv-programme .time-line li:after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    height: 30px;
    border-right: 1px solid #FFF;
    display: inline-block
}
#tv-programme #channels {
    z-index: 1111;
    position: fixed;
    top: 198px;
    padding-top: 0;
    background-color: #FFF;
    border-right: 1px solid #333333;
    visibility: hidden;
    width: 200px;
    height: 100%;
    overflow: hidden
}
#tv-programme #channels ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center
}
#tv-programme #channels ul li {
    height: 65px;
    line-height: 65px;
    text-align: center;
    border-bottom: 1px solid #D7DFE7
}
#tv-programme #channels ul li img {
    position: relative;
    top: -1px
}
#tv-programme #channels ul li:last-child {
    border-bottom: 1px solid #8996A5
}
@media (max-width: 768px) {
    #tv-programme #channels {
        width: 65px
    }
    #tv-programme #channels ul li img {
        width: 55px
    }
}
#tv-programme .move-left,
#tv-programme .move-right {
    margin: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: 40px;
    border-style: none;
    cursor: pointer;
    opacity: 0;
    position: fixed;
    text-indent: -9999px;
    z-index: 5;
    -moz-transition: opacity .2s ease-out;
    -o-transition: opacity .2s ease-out;
    -webkit-transition: opacity .2s ease-out;
    -ms-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
    top: 195px;
    bottom: 0;
    z-index: 11;
    background-color: #8778b7
}
#tv-programme .move-left:hover,
#tv-programme .move-right:hover {
    opacity: .8
}
#tv-programme .move-right {
    vertical-align: middle;
    left: 200px
}
#tv-programme .move-right:before {
    content: "\f053";
    color: #FFF;
    font-size: 18px;
    font-size: 1.2857142857142858rem;
    position: absolute;
    left: 0;
    top: 53%;
    vertical-align: middle;
    text-align: center;
    height: 100%;
    width: 40px;
    text-indent: 0
}
@media (max-width: 768px) {
    #tv-programme .move-right {
        left: 65px
    }
}
#tv-programme .move-left {
    right: 0
}
#tv-programme .move-left:before {
    content: "\f054";
    color: #FFF;
    font-size: 18px;
    font-size: 1.2857142857142858rem;
    position: absolute;
    left: 0;
    top: 53%;
    vertical-align: middle;
    text-align: center;
    height: 100%;
    width: 40px;
    text-indent: 0
}
#tv-programme div.channels-top {
    width: 200px;
    height: 51px;
    position: fixed;
    top: 148px;
    z-index: 1111;
    background-color: #FFF;
    border-right: 1px solid #333333
}
@media (max-width: 768px) {
    #tv-programme div.channels-top {
        width: 65px
    }
}
#tv-programme #programme-wrap {
    width: 4320px;
    position: absolute;
    overflow: hidden;
    top: 198px;
    left: 200px
}
@media (max-width: 768px) {
    #tv-programme #programme-wrap {
        left: 65px
    }
}
#tv-programme #programme-wrap .channel-programme ul {
    width: 100%;
    border-bottom: 1px solid #D7DFE7;
    float: left;
    height: 65px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    position: relative
}
#tv-programme #programme-wrap .channel-programme ul li {
    border-left: 1px solid #D7DFE7;
    border-right: 1px solid #D7DFE7;
    height: 64px;
    background-color: #FFF;
    position: absolute;
    width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis
}
#tv-programme #programme-wrap .channel-programme ul li a {
    height: 65px;
    padding: 10px;
    line-height: 150%;
    font-size: 14px;
    font-size: 1rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis
}
.sinhala #tv-programme #programme-wrap .channel-programme ul li a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
#tv-programme #programme-wrap .channel-programme ul li a span {
    display: block;
    font-weight: 400;
    font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-size: .8571428571428571rem;
    color: #333333
}
.sinhala #tv-programme #programme-wrap .channel-programme ul li a span {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
#tv-programme #programme-wrap .channel-programme ul li a:hover {
    background-color: #8dc63f;
    color: #FFF
}
#tv-programme #programme-wrap .channel-programme ul li a:hover span {
    color: #FFF
}
#tv-programme #programme-wrap .channel-programme ul li.timeslot_1 a,
#tv-programme #programme-wrap .channel-programme ul li.tinyslot a {
    text-indent: -9999px;
    line-height: 0;
    text-align: center
}
#tv-programme #programme-wrap .channel-programme ul li.timeslot_1 a span,
#tv-programme #programme-wrap .channel-programme ul li.tinyslot a span {
    visibility: hidden
}
#tv-programme #programme-wrap .channel-programme ul li.timeslot_1 a:after,
#tv-programme #programme-wrap .channel-programme ul li.tinyslot a:after {
    font-size: 24px;
    content: '\f129';
    text-indent: 0;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 400;
    line-height: 2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
#tv-programme #programme-wrap .channel-programme ul li.open {
    z-index: 11111;
    background-color: #8778b7
}
#tv-programme #programme-wrap .channel-programme ul li.open a {
    color: #FFF
}
#tv-programme #programme-wrap .channel-programme ul:last-child {
    border: none
}
#tv-programme #programme-wrap .dropdown-menu {
    width: 400px;
    margin: 0;
    box-shadow: none;
    border-top: 5px solid #8778b7;
    border-bottom: 5px solid #8778b7;
    border-left: 1px solid #8778b7;
    border-right: 1px solid #8778b7;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    padding: 10px
}
#tv-programme #programme-wrap .dropdown-menu .programme-info {
    display: table
}
#tv-programme #programme-wrap .dropdown-menu .programme-info div {
    display: table-cell;
    white-space: normal;
    vertical-align: top
}
#tv-programme #programme-wrap .dropdown-menu .programme-info .programme-logo {
    padding-right: 10px
}
#tv-programme #programme-wrap .dropdown-menu .tags {
    margin: 0 0 10px 0;
    padding: 0;
    list-style: none;
    border: none
}
#tv-programme #programme-wrap .dropdown-menu .tags li {
    margin-right: 10px;
    float: left;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: #CDE1F9;
    color: #000;
    font-size: 14px;
    font-size: 1rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    padding: 2px 5px
}
.sinhala #tv-programme #programme-wrap .dropdown-menu .tags li {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
#programme-modal .modal-dialog {
    margin-top: 30px;
    max-width: 624px
}
#programme-modal .fa-stack {
    z-index: 11
}
#programme-modal .modal-content {
    border: 2px solid #8dc63f
}
#programme-modal .modal-content .close {
    right: 0
}
@media (min-width: 768px) {
    #programme-modal .modal-content .close {
        right: -15px
    }
}
#programme-modal .modal-body {
    padding: 0 20px 20px 20px
}
.programme-info .programme-channel {
    margin: 0;
    width: 100px
}
.programme-info .programme-name {
    font-size: 18px;
    font-size: 1.2857142857142858rem;
    color: #8778b7;
    margin: 10px 0
}
.programme-info .programme-schedule {
    margin-bottom: 20px
}
.programme-info .programme-details {
    margin: 20px 0
}
.programme-info .programme-meta {
    margin: 0;
    padding: 0;
    list-style: none
}
.programme-info .programme-meta li {
    margin: 0;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .programme-info .programme-meta li {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.programme-info .programme-meta li.programme-category {
    color: #333333
}
.zone-cats-wrap {
    background-color: #FFF
}
.zone-cats-wrap ul {
    margin: 0;
    padding: 0;
    list-style: none
}
.zone-cats-wrap ul li {
    float: left;
    width: 20%;
    text-align: center
}
.zone-cats-wrap ul li a {
    font-size: 14px;
    font-size: 1rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    padding: 10px 0;
    display: block;
    height: 60px;
    text-transform: uppercase
}
.sinhala .zone-cats-wrap ul li a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.zone-cats-wrap ul li a .fa {
    font-size: 24px;
    font-size: 1.7142857142857142rem
}
.zone-cats-wrap ul li a span {
    display: none
}
.zone-cats-wrap ul.ringin-tones li {
    width: auto;
    padding: 0 15px;
    margin: .5em 0
}
.zone-cats-wrap ul.ringin-tones li a {
    padding: 0;
    height: auto
}
@media (min-width: 768px) {
    .zone-cats-wrap ul li {
        width: auto;
        margin: 0 25px
    }
    .zone-cats-wrap ul li a {
        color: #333333;
        font-size: 16px;
        font-size: 1.1428571428571428rem;
        padding: 10px 5px;
        height: auto;
        border-bottom: 5px solid #FFF
    }
    .zone-cats-wrap ul li a .fa {
        display: none
    }
    .zone-cats-wrap ul li a span {
        display: inline
    }
    .zone-cats-wrap ul li a.active,
    .zone-cats-wrap ul li a:hover {
        border-bottom: 5px solid #8778b7
    }
    .zone-cats-wrap ul.ringin-tones li {
        width: auto;
        padding: 0 15px;
        margin: 0 0
    }
    .zone-cats-wrap ul.ringin-tones li a {
        padding: 20px 5px;
        display: block
    }
}
.zone-sub-cats-wrap ul {
    margin: 0;
    padding: 0;
    list-style: none
}
.zone-sub-cats-wrap ul li {
    float: left;
    text-align: center;
    width: 25%
}
.zone-sub-cats-wrap ul li a {
    font-size: 14px;
    font-size: 1rem;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif;
    padding: 5px 5px;
    display: block;
    text-transform: uppercase
}
.sinhala .zone-sub-cats-wrap ul li a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.zone-sub-cats-wrap ul li a.active {
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    background-color: #FFF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    color: #8778b7
}
.sinhala .zone-sub-cats-wrap ul li a.active {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.zone-sub-cats-wrap ul li a:hover {
    color: #8778b7
}
.zone-sub-cats-wrap ul.item_4 li {
    width: 25%
}
.zone-sub-cats-wrap ul.item_2 li {
    width: auto
}
.zone-sub-cats-wrap form {
    float: right
}
.zone-sub-cats-wrap form label {
    margin: 0
}
.zone-sub-cats-wrap form input {
    display: block;
    width: 275px;
    height: 29px;
    padding: 10px 5px 10px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #1d2429;
    background-color: #fff;
    background-image: none;
    border: 1px solid #333333;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}
.zone-sub-cats-wrap form input:focus {
    border-color: #3178ca;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(49, 120, 202, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(49, 120, 202, .6)
}
.zone-sub-cats-wrap form input[type=text]:focus,
.zone-sub-cats-wrap form input[type=password]:focus,
.zone-sub-cats-wrap form input[type=email]:focus,
select.zone-sub-cats-wrap form input:focus,
textarea.zone-sub-cats-wrap form input:focus {
    border-color: #3178ca;
    box-shadow: none;
    background-color: #F9FCFF
}
.zone-sub-cats-wrap form .fa {
    position: relative;
    top: 0
}
@media (min-width: 768px) {
    .zone-sub-cats-wrap {
        padding: 10px 0
    }
    .zone-sub-cats-wrap ul li {
        width: auto;
        margin: 0 25px
    }
    .zone-sub-cats-wrap ul li a {
        font-size: 14px;
        font-size: 1rem;
        height: auto;
        padding: 5px 10px
    }
    .zone-sub-cats-wrap ul.item_4 li {
        width: auto
    }
    .zone-sub-cats-wrap ul.item_2 li {
        width: auto
    }
    .zone-sub-cats-wrap form {
        margin-right: 25px
    }
}
.zone {
    margin: 20px 0
}
.zone .panel-title {
    font-size: 16px;
    font-size: 1.1428571428571428rem
}
.zone .panel-title .fa {
    font-size: 24px;
    font-size: 1.7142857142857142rem;
    margin-right: 10px
}
.zone .collapse-content .panel-body {
    padding: 0;
    overflow: hidden
}
.zone .zone-list {
    display: table;
    width: 100%;
    padding: 12.5px 0;
    border-bottom: 1px solid #e5eef2
}
.zone .zone-list div {
    display: table-cell;
    vertical-align: top
}
.zone .zone-list .zone-thumb {
    width: 40px;
    padding: 0 12.5px;
    text-align: center
}
.zone .zone-list .zone-thumb img {
    vertical-align: top;
    width: 40px
}
.zone .zone-list .zone-thumb .btn {
    margin-top: 10px;
    font-size: 11px;
    font-size: .7857142857142857rem;
    padding: 5px 10px;
    width: 40px
}
.zone .zone-list .zone-thumb .btn span {
    display: none
}
.zone .zone-list .zone-thumb .btn .fa {
    font-size: 13px;
    font-size: .9285714285714286rem
}
.zone .zone-list .zone-content h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    font-weight: 400
}
@media screen and (min-width: 1200px) {
    .zone .zone-list .zone-content h3 {
        font-size: 18px;
        font-size: 1.2857142857142858rem
    }
}
.sinhala .zone .zone-list .zone-content h3 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.zone .zone-list .zone-content h3 a {
    color: #8778b7
}
.zone .zone-list .zone-content p {
    margin: 0;
    font-size: 14px;
    font-size: 1rem
}
.zone .zone-list .zone-content .price {
    font-size: 12px;
    font-size: .8571428571428571rem;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
    color: #f47920;
    padding-bottom: 10px
}
.sinhala .zone .zone-list .zone-content .price {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.zone .zone-list .zone-content .price .fa {
    font-size: 18px;
    font-size: 1.2857142857142858rem;
    color: #8dc63f;
    margin-right: 10px
}
@media (min-width: 768px) {
    .zone .zone-list {
        padding: 0;
        border: none
    }
    .zone .zone-list .zone-thumb {
        padding: 0;
        width: 75px;
        padding-right: 20px
    }
    .zone .zone-list .zone-thumb img {
        vertical-align: top;
        width: 75px
    }
    .zone .zone-list .zone-thumb .btn {
        display: inline-block;
        width: 75px
    }
    .zone .zone-list .zone-thumb .btn span {
        display: block
    }
    .zone .zone-list .zone-thumb .btn .fa {
        display: none
    }
    .zone .zone-list .zone-content h3 {
        font-size: 18px;
        font-size: 1.2857142857142858rem
    }
    .zone .zone-list .zone-content .price {
        font-size: 14px;
        font-size: 1rem
    }
    .zone .zone-list .zone-content .price .fa {
        font-size: 21px;
        font-size: 1.5rem
    }
}
@media (min-width: 768px) and screen and (min-width: 1200px) {
    .zone .zone-list .zone-content h3 {
        font-size: 20px;
        font-size: 1.4285714285714286rem
    }
}
.zone p.center {
    margin: 20px 0
}
@media (min-width: 768px) {
    .zone .collapse {
        display: block
    }
    .zone .collapse-content {
        border: none
    }
    .zone .panel-default {
        border-bottom: 2px solid #e5eef2
    }
    .zone .panel-default.last {
        border-bottom: none
    }
    .zone .collapse-content .panel-title a {
        background-color: #FFF;
        border: none;
        padding: 40px 0;
        font-size: 24px;
        font-size: 1.7142857142857142rem;
        color: #333333
    }
    .zone .collapse-content .panel-title a .fa {
        color: #bacad2;
        font-size: 36px;
        font-size: 2.5714285714285716rem
    }
    .zone .collapse-content .panel-title a:after {
        display: none
    }
    .zone p.center {
        margin: 50px 0
    }
}
.tones {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 2px solid #e5eef2
}
.tones>li>ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #e5eef2
}
.tones>li.selected>ul {
    border-bottom: none
}
.tones>li.selected>ul .fa:before {
    content: "\f077"
}
.tones>li.selected>ul .btn {
    background-color: #eff6e5;
    color: #3178ca!important
}
.tones>li:last-child>ul {
    border-bottom: 2px solid #e5eef2
}
.tones .tone-list {
    display: table;
    width: 100%;
    padding: 12.5px 0 0 0
}
.tones .tone-list div {
    display: table-cell;
    vertical-align: top
}
.tones .tone-list .tone-thumb {
    width: 40px;
    padding: 0 12.5px;
    text-align: center
}
.tones .tone-list .tone-thumb img {
    vertical-align: top;
    width: 40px
}
.tones .tone-list .tone-content {
    position: relative;
    padding-left: 10px
}
.tones .tone-list .tone-content h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif;
    font-weight: 400
}
.sinhala .tones .tone-list .tone-content h3 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.tones .tone-list .tone-content h3 a {
    color: #3a444b
}
.tones .tone-list .tone-content p {
    margin: 0;
    font-size: 14px;
    font-size: 1rem
}
.tones .tone-list .tone-content .btn {
    font-size: 10px;
    font-size: .7142857142857143rem;
    padding: 5px 10px;
    width: 40px;
    float: right;
    position: relative;
    top: -40px;
    right: 10px
}
.tones .tone-list .tone-content .btn .fa {
    font-size: 16px;
    font-size: 1.1428571428571428rem
}
.tones .tone-list .tone-content .btn.close {
    background-color: #eff6e5;
    color: #3178ca!important
}
.tones .player-wrap {
    margin-left: 5px;
    position: relative;
    top: -10px
}
.tones .player-wrap audio {
    width: 90%;
    display: block;
    float: left;
    overflow: auto
}
@media (min-width: 768px) {
    .tones>li>ul {
        display: table;
        width: 100%;
        table-layout: fixed
    }
    .tones>li>ul>li {
        display: table-cell;
        padding: 10px 0;
        vertical-align: middle;
        text-align: left
    }
    .tones>li>ul>li.mobile {
        display: none
    }
    .tones .tone-list {
        padding: 0
    }
    .tones .tone-list .tone-thumb {
        padding: 0 12.5px 0 0
    }
    .tones .tone-list .tone-content {
        vertical-align: middle;
        padding-left: 0
    }
    .tones .player-wrap {
        margin-left: 0;
        top: 0
    }
    .tones .hlist li a,
    .tones .hlist li a i {
        height: 30px;
        width: 30px
    }
    .tones .btn-sm {
        padding: 5px 10px
    }
    .tones .player {
        margin: 0
    }
    .tones .share-cel {
        text-align: right
    }
    .tones .share-cel .share {
        float: right
    }
    .tones .song-cel {
        width: 30%
    }
    .tones .artist-cel {
        width: 17%
    }
    .tones .artist-cel a {
        zoom: 1
    }
    .tones .player-wrap {
        width: 175px
    }
    .tones .download-cel {
        text-align: right;
        width: 13%
    }
    .tones .download-cel .btn {
        width: 100%
    }
    .tones .download-cel .btn.close {
        background-color: #eff6e5;
        color: #3178ca!important
    }
}
@media (min-width: 768px) {
    .heading {
        font-size: 14px;
        font-size: 1rem;
        font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif;
        color: #333333;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        text-transform: uppercase
    }
    .sinhala .heading {
        font-family: Axiata_sinhala, "Arial Unicode MS"!important
    }
    .heading li {
        float: left
    }
    .heading .heading-song-cel {
        width: 30%
    }
    .heading .heading-artist-cel {
        width: 17%
    }
}
.text-banner-wrap {
    display: none
}
.selected .text-banner-wrap {
    display: block
}
.text-banner {
    background-color: #e5eef2;
    padding: 12.5px;
    position: relative
}
.text-banner ul {
    list-style: none;
    margin: 0;
    padding: 0
}
.text-banner ul .price {
    color: #f47920;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .text-banner ul .price {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.text-banner ul strong {
    color: #333333;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .text-banner ul strong {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
@media (min-width: 768px) {
    .text-banner {
        display: table;
        margin: 0 auto;
        top: 0;
        bottom: 0;
        padding-top: 0;
        padding-right: 0;
        padding-left: 0;
        width: 100%;
        background-color: #FFF;
        border-bottom: 1px solid #e5eef2
    }
    .text-banner ul {
        background-color: #eff6e5;
        text-align: center
    }
    .text-banner ul li {
        display: inline-block;
        padding: 5px 10px
    }
    .text-banner ul li a {
        font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
    }
    .sinhala .text-banner ul li a {
        font-family: Axiata_sinhala, "Arial Unicode MS"!important
    }
}
.sub-sticky {
    z-index: 11111
}
.payment-method img {
    width: 51px;
    vertical-align: middle
}
.payment-method input {
    display: inline-block;
    margin-right: 7px
}
#step-2 span.amount {
    color: #333333;
    display: inline-block;
    margin-left: 30px;
    font-size: 14px;
    font-size: 1rem
}
.other-option {
    display: none
}
.popover-content {
    width: 275px
}
.popover {
    border: 1px solid #bacad2
}
.popover.bottom>.arrow {
    border-bottom-color: #bacad2
}
.cart-summary {
    margin: 0 0 10px 0;
    width: 100%;
    border: none
}
.cart-summary td {
    border: none
}
@media (min-width: 768px) {
    .cart-summary {
        margin: 0
    }
}
.box {
    padding: 0 12.5px
}
.box.highlight {
    background-color: #e5eef2;
    border-bottom: 1px solid #3a444b;
    padding: 12.5px
}
.box .split {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f4f4f4
}
.box h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #8778b7;
    font-size: 24px;
    font-size: 1.7142857142857142rem
}
.box h3:first-child {
    margin-top: 20px
}
.box h4 {
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .box h4 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.box .bline {
    border-bottom: 1px solid #bacad2;
    padding-bottom: 20px
}
.box .bar-heading {
    margin-bottom: 10px;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif;
    overflow: auto
}
.sinhala .box .bar-heading {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.box .bar-value {
    color: #333333;
    font-size: 12px;
    font-size: .8571428571428571rem;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .box .bar-value {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.box .gray-bar {
    margin-bottom: 0;
    background-color: #bacad2;
    height: 30px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, .1);
    box-shadow: inset 0 0 0 rgba(0, 0, 0, .1)
}
.box .gray-bar .progress-bar {
    background-color: #333333;
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, .1);
    box-shadow: inset 0 0 0 rgba(0, 0, 0, .1)
}
.box .btn-silver:hover {
    background-color: #bacad2
}
.box .more {
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .box .more {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.box .more .fa:before {
    color: #bacad2
}
.box .hbox {
    border: 1px solid #8dc63f;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px
}
.box .hbox .hbox-heading {
    background-color: #8dc63f;
    padding: 15px 12.5px
}
.box .hbox .hbox-heading h4 {
    margin: 0;
    color: #FFF;
    line-height: 1;
    text-align: center
}
.box .hbox .hbox-content {
    padding: 20px 12.5px;
    text-align: center
}
.box.account-menu {
    background-color: transparent;
    border-bottom: none
}
.box.account-menu .dropdown {
    width: 100%
}
.box.account-menu .dropdown>a {
    display: inline-block;
    width: 100%;
    border: 1px solid #333333;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    background-color: #e5eef2;
    padding: 5px;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-size: 1.1428571428571428rem;
    color: #8778b7
}
.sinhala .box.account-menu .dropdown>a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.box.account-menu .dropdown>a .fa {
    float: right;
    position: relative;
    top: 3px;
    color: #333333
}
.box.account-menu .dropdown .dropdown-menu {
    width: 100%
}
.box.account-menu .dropdown .dropdown-menu li {
    list-style: none;
    padding: 0;
    margin: 0
}
.box.account-menu .dropdown .dropdown-menu li a {
    font-size: 14px;
    font-size: 1rem;
    color: #333
}
.box.account-menu .dropdown .dropdown-menu li a:hover {
    color: #8778b7
}
.box.account-menu .dropdown .dropdown-menu li a.active {
    color: #8778b7;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .box.account-menu .dropdown .dropdown-menu li a.active {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.box.account-menu .dropdown .dropdown-menu li .account-sub-menu {
    margin: 5px 0 5px 30px;
    padding: 0
}
.box.account-menu .dropdown .dropdown-menu li .account-sub-menu li {
    margin: 5px 0;
    font-size: 12px;
    font-size: .8571428571428571rem
}
.box dl {
    margin: 0 0 20px 0
}
.box dl dt {
    margin-bottom: 5px;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .box dl dt {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.box dl dd {
    color: #333333;
    font-size: 18px;
    font-size: 1.2857142857142858rem
}
.box dl dd a.more {
    font-size: 14px;
    font-size: 1rem;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .box dl dd a.more {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.box.my-plan .btn {
    margin-top: 10px
}
.box.my-bill h3 {
    margin-bottom: 20px
}
.box.my-bill .hbox {
    margin-bottom: 20px
}
.box.my-bill .hbox-content p {
    margin: 0;
    color: #333333;
    font-size: 14px;
    font-size: 1rem;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .box.my-bill .hbox-content p {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.box.my-bill .hbox-content p strong {
    color: #8778b7;
    font-size: 24px;
    font-size: 1.7142857142857142rem
}
.box.my-bill .hbox-content .btn {
    margin-top: 10px;
    padding: 5px 25px;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .box.my-bill .hbox-content .btn {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
@media (min-width: 768px) {
    .box {
        padding: 0
    }
    .box h3 {
        margin-bottom: 20px
    }
    .box h3:first-child {
        margin-top: 20px
    }
    .box .bline {
        padding-bottom: 30px
    }
    .box .bline.center {
        text-align: left
    }
    .box .hbox .hbox-heading h4 {
        text-align: left
    }
    .box .hbox .hbox-content {
        text-align: left
    }
    .box.account-menu {
        background-color: #e5eef2
    }
    .box.account-menu .dropdown {
        width: 100%
    }
    .box.account-menu .dropdown>a {
        display: none
    }
    .box.account-menu .dropdown .dropdown-menu {
        width: 100%;
        display: block;
        position: relative;
        float: none;
        border: none;
        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .175);
        box-shadow: 0 0 0 rgba(0, 0, 0, .175);
        background-color: transparent;
        padding: 0
    }
    .box.account-menu .dropdown .dropdown-menu li {
        margin-bottom: 7px
    }
    .box.account-menu .dropdown .dropdown-menu li a {
        color: #333;
        font-size: 16px;
        font-size: 1.1428571428571428rem;
        padding: 0
    }
    .box.account-menu .dropdown .dropdown-menu li a:hover {
        color: #8778b7;
        background-color: transparent
    }
    .box.account-menu .dropdown .dropdown-menu li a.active {
        color: #8778b7;
        font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
    }
    .sinhala .box.account-menu .dropdown .dropdown-menu li a.active {
        font-family: Axiata_sinhala, "Arial Unicode MS"!important
    }
    .box.account-menu .dropdown .dropdown-menu li:last-child {
        margin-bottom: 0
    }
    .box.account-menu .dropdown .dropdown-menu .account-sub-menu {
        margin: 5px 0 5px 10px!important
    }
    .box.account-menu .dropdown .dropdown-menu .account-sub-menu li a {
        font-size: 14px;
        font-size: 1rem
    }
    .box dl {
        margin: 0
    }
    .box.my-plan .btn {
        margin-top: 20px
    }
    .box.my-bill .hbox {
        margin-bottom: 30px
    }
    .box.my-bill .hbox-content {
        padding-top: 15px;
        padding-bottom: 15px
    }
    .box.my-bill .hbox-content .btn {
        margin-top: 5px;
        padding: 5px 25px;
        font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
    }
    .sinhala .box.my-bill .hbox-content .btn {
        font-family: Axiata_sinhala, "Arial Unicode MS"!important
    }
}
#right-block .wrap {
    border: 1px solid #bacad2;
    border-top: 0
}
#right-block h3 {
    color: #3a444b;
    font-size: 18px;
    font-size: 1.2857142857142858rem;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala #right-block h3 {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
#right-block h4 {
    font-size: 16px;
    font-size: 1.1428571428571428rem
}
#right-block .row .col-xs-5 {
    padding-left: 10px
}
@media (min-width: 768px) {
    #right-block .wrap {
        padding: 0 20px;
        overflow: auto
    }
    #right-block .row .col-xs-5 {
        padding-left: 12.5px
    }
}
.links {
    display: none;
    background-color: #3a444b;
    color: #FFF
}
.links h2 {
    color: #8dc63f;
    font-size: 14px;
    font-size: 1rem
}
@media screen and (min-width: 768px) {
    .links h2 {
        font-size: 16px;
        font-size: 1.1428571428571428rem
    }
}
@media screen and (min-width: 1200px) {
    .links h2 {
        font-size: 18px;
        font-size: 1.2857142857142858rem
    }
}
.links a {
    color: #FFF
}
.links a:hover {
    color: #8dc63f
}
.links ul {
    margin: 0;
    padding: 0;
    list-style: none
}
.links ul li {
    margin: 0;
    padding: 0
}
.links ul li.more {
    display: inline-block;
    margin-top: 5px;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.sinhala .links ul li.more {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.links ul li.coverage-map-link {
    margin-top: 0
}
@media (min-width: 768px) {
    .links {
        display: block;
        padding: 30px 0
    }
    .links ul li {
        margin-bottom: 10px;
        line-height: 1.2
    }
    .links ul li a {
        font-size: 12px;
        font-size: .8571428571428571rem
    }
}
@media (min-width: 1200px) {
    .links {
        padding: 30px 0
    }
    .links ul li a {
        font-size: 14px;
        font-size: 1rem
    }
}
.main_share {
    margin: 15px 0 0 0;
    padding: 0;
    list-style: none
}
.main_share li {
    display: inline;
    text-align: center
}
.main_share li a {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: 0 5px;
    font-size: 12px;
    text-align: center;
    font-family: HelveticaNeue-Bold, Helvetica, Arial, sans-serif
}
.lte-ie8 .main_share li a {
    display: inline;
    zoom: 1
}
.main_share li a li {
    display: inline-block!important
}
.sinhala .main_share li a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.main_share li a i {
    display: table;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    color: #FFF
}
.main_share li a i:before {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
    position: relative;
    top: 2px
}
.main_share li a:hover i {
    color: #e5eef2
}
.main_share li:first-child a {
    margin: 0 5px 0 0
}
.main_share li:last-child a {
    margin: 0 0 0 5px
}
.main_share .envelope {
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px solid #FFF;
    height: 30px;
    display: inline-block
}
@media (min-width: 768px) {
    .main_share {
        margin: 0
    }
}
.has-children .main_share {
    margin: 0
}
.has-children .main_share li {
    display: block;
    text-align: left;
    line-height: 30px
}
.has-children .main_share li a {
    margin: 0;
    padding: 2px;
    line-height: 34px;
    width: 100px;
    overflow: auto;
    text-overflow: none;
    height: 32px;
    text-align: left
}
.has-children .main_share li a i {
    box-shadow: 0 0 0 2px #333333;
    float: left;
    margin-right: 10px
}
.has-children .main_share li a i:before {
    color: #333333
}
.has-children .main_share li a:hover i {
    box-shadow: 0 0 0 2px #8778b7;
    color: #8778b7
}
.has-children .main_share li a:hover i:before {
    color: #8778b7
}
.has-children .main_share li a span {
    position: relative;
    top: -3px
}
.has-children .main_share li a:hover {
    color: #8778b7
}
#main-menu .menu-box-inner .main_share i {
    display: table!important;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    color: #FFF;
    float: left!important;
    box-shadow: 0 0 0 2px #333333
}
#main-menu .menu-box-inner .main_share i:before {
    display: table-cell!important;
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
    position: relative;
    top: 2px;
    color: #333333
}
#main-menu .menu-box-inner .main_share a span {
    line-height: 30px
}
footer {
    padding: 20px 10px;
    background-color: #1d2429
}
footer h2 {
    margin: 10px 0 10px 0;
    color: #bacad2;
    font-size: 16px;
    font-size: 1.1428571428571428rem
}
footer .circle-icon {
    background-color: #333333;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    width: 40px;
    height: 40px;
    display: table-cell;
    vertical-align: middle;
    color: #FFF;
    line-height: 1;
    text-align: center;
    font-size: 13px
}
footer .circle-icon:hover {
    background-color: #fff;
    color: #333333;
    text-decoration: none
}
footer .circle-icon i {
    font-size: 12px
}
@media screen and (min-width: 768px) {
    footer {
        padding: 40px 10px
    }
    footer .col-md-12 {
        height: 50px
    }
}
.icon-wrap {
    text-align: center;
    display: inline-block
}
.footer_box {
    text-align: center;
    position: relative
}
.footer_links {
    margin: 20px 0;
    padding: 0;
    list-style: none
}
.footer_links li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    width: 33%;
    font-size: 12px;
    font-size: .8571428571428571rem;
    text-align: center
}
.footer_links li a {
    color: #8dc63f;
    text-transform: uppercase;
    font-family: HelveticaNeue-Medium, Helvetica, Arial, sans-serif
}
.sinhala .footer_links li a {
    font-family: Axiata_sinhala, "Arial Unicode MS"!important
}
.copy {
    clear: both;
    color: #bacad2;
    text-align: center;
    font-size: 12px;
    font-size: .8571428571428571rem
}
.copy ul {
    margin: 0;
    padding: 0;
    text-align: center
}
.copy ul li {
    margin: 0;
    padding: 0 5px;
    line-height: 1;
    display: inline-block;
    border-left: 1px solid #bacad2
}
.lte-ie8 .copy ul li {
    display: inline;
    zoom: 1
}
.copy ul li li {
    display: inline-block!important
}
.copy ul li a {
    color: #bacad2;
    text-decoration: underline
}
.copy ul li a:hover {
    text-decoration: none
}
.copy ul li:first-child {
    border-left: none
}
@media screen and (min-width: 768px) {
    .icon-wrap {
        display: none
    }
    .footer_links {
        overflow: auto;
        margin: 0 0 10px 0
    }
    .footer_links li {
        font-size: 14px;
        font-size: 1rem;
        width: auto;
        margin-right: 40px
    }
    .footer_box {
        position: absolute;
        right: 10px;
        top: 5px
    }
    .footer_box h2 {
        display: none
    }
    .copy {
        font-size: 12px;
        font-size: .8571428571428571rem;
        text-align: left;
        margin-bottom: 0
    }
    .copy p {
        display: inline
    }
    .copy ul {
        text-align: left;
        display: inline
    }
}
@media only screen and (min-width: 1200px) {
    body {
        font-size: 16px;
        font-size: 1.1428571428571428rem
    }
}
.multicolumns {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-rule: 0 double #666;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-rule: 0 double #666;
    column-count: 3;
    column-gap: 10px;
    column-rule: 0 double #666
}
.multicolumns li {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid
}