html{}
body{font-family: 'Roboto', sans-serif;}

/*header*/
header{display: inline-block;width: 90%;background: rgba(1,30,95,0.7);position: fixed;top: 0;left: 0;padding: 10px 5%;z-index: 9999;}
header .logo{position: absolute;display: inline-block;width: 80px;}
header .logo a{display: inline-block;width: 100%;}
header .logo a > picture{display: inline-block;width: 100%;}
header .logo a > picture > img{width: 100%;}
header .menu{display: inline-block;float: left;margin: 10px 10px 10px 10%;}
header .menu ul{display: inline-block;float: left;}
header .menu ul > li{display: inline-block;float: left;}
header .menu ul > li > a{text-decoration: none;display: inline-block;text-transform: uppercase;color: #fff;font-size: 14px;line-height: 20px;padding: 5px 10px;}
header .language{display: inline-block;float: right;margin: 10px 10px 10px 80px;}
header .language ul{display: inline-block;float: left;}
header .language ul > span{display: inline-block;float: left;padding: 5px 0px;color: #fff;font-size: 14px;line-height: 20px;}
header .language ul > li{display: inline-block;float: left;}
header .language ul > li > a{text-decoration: none;display: inline-block;text-transform: uppercase;color: #fff;font-size: 14px;line-height: 20px;padding: 5px 10px;}
#mobile{display: none;}

.section-one{    display: inline-block;
    width: 100%;
    position: relative;
    background: url(https://simrefill.globalbeamtelecom.com/images/banner.jpg);
    background-size:cover;}
.section-one picture{display:none;width: 100%;float: left;}
.section-one picture > img{width: 100%;position: relative;}
.section-one .content{display: inline-block;padding: 10% 5%;}
.section-one .content h2{color: #fff;font-size: 70px;text-transform: uppercase;font-weight: 700;letter-spacing: 5px;text-shadow: #000 2px 2px 15px;line-height: 80px;}
.section-one .content h5{color: #fff;font-size: 20px;text-transform: uppercase;font-weight: 500;text-shadow: #000 2px 2px 15px;line-height: 30px;width: 500px;text-align: justify;}

.section-two{display: inline-block;width: 94%;padding:1% 3%;}
.section-two h4{text-align: center;text-transform: uppercase;color: #666666;font-size: 16px;font-weight: 500;display: block;line-height: 25px;margin: 0px auto;}
.section-two h4 > span{color: #064891;}

.section-three{display: inline-block;width: 100%;}
.section-three .top{display: inline-block;background: #f0f0f0;width: 90%;padding: 3% 5%;}
.section-three .top h2{font-size: 20px;color: #054791;display: inline-block;background: #f0f0f0;padding: 0px 30px 0px 0px;font-weight: 500;text-transform: uppercase;float: left;position: relative;z-index: 9;}
.section-three .top .line{display: inline-block;width: 90%;border: solid #054791;border-width: 1px 0px 0px;position: absolute;margin: 13px 0px 0px;left: 5%;}
.section-three .top .content{display: inline-block;width: 100%;margin: 20px 0px 0px;}
.section-three .top .content .vouchers{cursor: pointer;display: inline-block;width:21%;padding: 10px;margin: 1% 1%;background: #fff;box-shadow: #ccc 0px 0px 10px;} 
.section-three .top .content .vouchers picture{display: inline-block;width: 100%;float: left;}
.section-three .top .content .vouchers picture > img{display: inline-block;width: 100%;float: left;}
.section-three .top .content .vouchers h4{display: inline-block;color: #666666;text-transform: uppercase;font-size: 15px;float: left;line-height: 30px;margin: 10px 0px 0px;} 
.section-three .top .content .vouchers h3{display: inline-block;color: #064894;text-transform: uppercase;font-size: 18px;float: right;font-weight: 500;line-height: 30px;margin: 10px 0px 0px;} 
.section-three .bottom{display: inline-block;background: #fff;width: 90%;padding: 3% 5%;}
.section-three .bottom h2{font-size: 20px;color: #054791;display: inline-block;background: #fff;padding: 0px 30px 0px 0px;font-weight: 500;text-transform: uppercase;float: left;position: relative;z-index: 9;}
.section-three .bottom .line{display: inline-block;width: 90%;border: solid #054791;border-width: 1px 0px 0px;position: absolute;margin: 13px 0px 0px;left: 5%;}
.section-three .bottom .content{display: inline-block;width: 100%;margin: 20px 0px 0px;}
.section-three .bottom .content .vouchers{cursor: pointer;display: inline-block;width:21%;padding: 10px;margin: 1% 1%;background: #fff;box-shadow: #ccc 0px 0px 10px;} 
.section-three .bottom .content .vouchers picture{display: inline-block;width: 100%;float: left;}
.section-three .bottom .content .vouchers picture > img{display: inline-block;width: 100%;float: left;}
.section-three .bottom .content .vouchers h4{display: inline-block;color: #666666;text-transform: uppercase;font-size: 15px;float: left;line-height: 30px;margin: 10px 0px 0px;} 
.section-three .bottom .content .vouchers h3{display: inline-block;color: #064894;text-transform: uppercase;font-size: 18px;float: right;font-weight: 500;line-height: 30px;margin: 10px 0px 0px;} 
.vouchers-detail{display: inline-block;width: 94%;background: #fff;box-shadow: #ccc 0px 0px 20px;padding: 3%;margin: 0% 1%;    position: relative;}
.vouchers-detail h4{font-size: 18px;color: #000;display: inline-block;background: #fff;padding: 0px 30px 0px 0px;font-weight: 400;text-transform: uppercase;float: left;position: relative;z-index: 9;}
.vouchers-detail span{display: inline-block;width: 93%;border: solid #000;border-width: 1px 0px 0px;position: absolute;margin: 13px 0px 0px;left: 4%;    top: 40px;}
.vouchers-detail form{display: inline-block;width: 100%;margin: 0px 0px 0px;}
.vouchers-detail .msisdn{display: inline-block;width: 160px;font-size: 19px;margin: 1% calc(100% - 160px) 1% 0;color: #000;overflow: hidden;float: left;position: relative;height: 29px;}
.vouchers-detail .msisdn input{font-size: 20px;margin: -5px 0px 0px 15px;border: solid 1px #000;border-width: 0px 0px 1px;width: 125px;position: absolute;outline: 0px;}
.vouchers-detail .qty{display: inline-block;float: left;font-size: 18px;color: #000;margin: 0px 5%;}
.vouchers-detail .qty input{margin: 0px 0px 0px 20px;font-size: 18px;text-align: center;width: 60px;border: solid 1px #000;padding:5px 10px;}
.vouchers-detail .total{display: inline-block;float: left;font-size: 20px;font-weight: 500;margin: 12px 0px;}
.vouchers-detail .total .price{display: inline-block;}
.vouchers-detail .detail{display: inline-block;background: #064892;color: #fff;padding: 10px;font-size: 16px;text-transform: capitalize;margin: 7px;}

.vouchers-detail .agree{margin: 1% 0 0;display: inline-block;width: 100%;font-size: 16px;font-weight: 300;}
.vouchers-detail .agree input{margin: 10px;}
.vouchers-detail .data{display: inline-block;width: 100%;margin: 15px 0px 0px;}
.vouchers-detail .data input{font-size: 15px;padding: 5px 10px;border: solid 1px #333;border-width: 0px 0px 1px;width: 250px;}
.vouchers-detail .agree a{text-decoration: none;color: #064892;font-weight: 500;}
 #submit{background: #064892;color: #fff;display: inline-block;font-size: 20px;text-transform: capitalize;padding: 10px 20px;margin: 20px 0px 0px;border: none;}
.detail-content{display: none;width: 100%;margin: 1% 0px 0px;}
.detail-content table{}
.detail-content th{display: table-cell;padding: 15px;border: solid 1px #aaa;text-transform: uppercase;vertical-align: middle;font-size: 14px;color: #111;font-weight: 500;}
.detail-content td{display: table-cell;padding: 5px 15px;border: solid 1px #aaa;color: #111;font-size: 14px;line-height: 20px;}

.section-four{display: inline-block;width: 100%;position: relative;float:left;box-shadow: rgba(0,0,0,0.5) 0px -2px 15px;}
.section-four picture{display: inline-block;
    width: 60%;
    float: left;
    margin: 0 20% 2%;}
.section-four picture > img{width: 100%;position: relative;float:left;}
.section-four h5{color: #012b51;font-size: 25px;text-transform: uppercase;line-height: 30px;text-align: center;width: 100%;margin: 2% 0px 1%;}

.section-five{display: inline-block;padding:2% 5%;width: 90%;background: #a0a0a0;float: left;position: relative;float:left;}
.section-five h2{font-size: 20px;color: #fff;display: inline-block;background: #a0a0a0;padding: 0px 30px 0px 0px;font-weight: 500;text-transform: uppercase;float: left;position: relative;z-index: 9;}
.section-five span{display: inline-block;width: 90%;border: solid #fff;border-width: 1px 0px 0px;position: absolute;margin: 13px 0px 0px;left: 5%;}
.section-five .content{display: inline-block;width: 100%;margin: 2% 0 0;}
.section-five .content .left{display: inline-block;width: 50%;float: left;}
.section-five .content .right{display: inline-block;width: 25%;float: right;margin: 0 10%;}
.section-five p{font-size: 14px;line-height: 30px;margin: 15px 0px;color: #fff;}
.section-five picture{width: calc(50% - 6px);
    display: inline-block;
    margin: 2px;
    border: solid 1px #fff;
    float: left;}
.section-five picture > img{ display: inline-block;width: 100%; float:left; }

footer{display: inline-block;width: 94%;padding:1% 3%;text-align: center;}
footer h4{font-size: 16px;font-weight: 800;text-transform: uppercase;color: #012b53;line-height: 22px;}
footer address{font-size: 14px;line-height: 20px;color: #012b53;}
footer p{color: #012b53;font-size: 14px;line-height: 20px;text-decoration: none;}
footer p > a{color: #012b53;font-size: 14px;line-height: 20px;text-decoration: none;}
footer ul{display: inline-block;margin: 10px 0px 0px;}
footer ul > li{display: inline-block;margin: 0px 10px;float: left;}
footer ul > li > a{display: inline-block;color: #084890;}
footer .fa{font-size:15px;}

.mobilein{display: inline-block;float: left;}

.thankyou{display: inline-block;width: 100%;margin: 15% 0;text-align: center;}
.thankyou h2{font-size: 30px;font-weight: 500;text-transform: capitalize;color: #012a53;margin: 0px 0px 10px;}
.thankyou p{font-size: 15px;font-weight: 500;text-transform: capitalize;color: #012a53;margin: 0px 0px 50px; line-height: 30px}
.thankyou a{font-size: 20px;font-weight: 300;text-transform: capitalize;background: #012a53;margin: 0px 0px 10px;color: #fff;text-decoration: none;padding: 10px;display: inline-block;}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.termsandcondition{    display: inline-block;
    width: 80%;
    padding: 10%;}
.termsandcondition h1{    display: inline-block;
    font-size: 20px;
    margin: 0px 0px 20px;}
.termsandcondition p{    display: inline-block;
    font-size: 15px;
    margin: 0px 0px 20px;
    line-height: 30px;}
.termsandcondition h3{    display: inline-block;
    font-size: 18px;
    margin: 0px 0px 20px;}
.termsandcondition ul{list-style: disc;
    margin: 0px 0px 0px 0px;}
.termsandcondition ul >li{    display: inline-block;
    font-size: 15px;
    line-height: 30px;}
.termsandcondition span{    margin: 0px 15px 0px 0px;
    display: inline-block;}

@media screen and  (max-width: 640px) 
{
#mobile{display: inline-block;float: right;width: 25px;margin: 15px 20px;}
header {width: 96%;padding: 0px 2%;}
header .logo {width: 60px;z-index: 9;margin: 10px 0px}
header .language ul > li > a {font-size: 15px;}
header .menu {display:none;float: unset;position: absolute;background: rgba(1,30,95,0.9);width: 100%;top: 50px;left: 0;margin: 0px;}
header .menu ul > li {width: 100%;text-align: center;}
.section-one {margin: 55px 0px 0px;background-size: 100% 100%;}
.section-one .content h2 {width: 100%;font-size: 14px;line-height: 15px;margin: 15px 0px 0px 0px;}
.section-one .content h5 {top: 50%;left: 1%;width: 60%;font-size: 10px;line-height: 15px;}
.section-two h4 {width: 90%;font-size: 12px;line-height: 20px;}
.section-three .top h2,.section-three .bottom h2 {font-size: 15px;line-height: 20px;}
.vouchers-detail .msisdn input {width: 200px;}
.section-three .top .content .vouchers {width:calc(50% - 30px);
margin: 0 5px 5%;
float: left;}
.section-three .bottom .content .vouchers {width: calc(50% - 30px);
margin: 0 5px 5%;
float: left;}
.vouchers-detail {width: 94%;margin: 0% 0% 5%;}
.vouchers-detail .total {width: 100%;}
.section-four h5 {font-size: 16px;bottom: 5%;}
.section-four picture {width: 90%; margin: 0 5% 2%;}
.section-five h2 {font-size: 20px;line-height: 25px;}
.section-five p {font-size: 10px;font-weight: 100;line-height: 20px;}
.section-five .content .left {width: 100%;}
.section-five .content .right {width: 100%;margin: 0%;}
.thankyou{margin: 15% 0;}
.section-three .top .content .vouchers h4 {font-size: 10px;line-height: 15px;}
.section-three .top .content .vouchers h3 {font-size: 12px;line-height: 12px;}
.section-three .bottom .content .vouchers h4 {font-size: 10px;line-height: 15px;}
.section-three .bottom .content .vouchers h3 {font-size: 12px;line-height: 12px;}
.section-five picture {width: calc(25% - 6px);}
}