
.WalBanner{background:url(../img/wallet-banner.svg) bottom center no-repeat #F1F8FF; margin-bottom:58px; text-align:center}
.WalBanner h1{color:#203152; font-size:42px; font-weight:300; padding-top:50px;}
.WalBanner p{color:#4d6f93; line-height:24px; max-width:70%; margin:0 auto; padding:20px 0 30px;}
.blRoundBtn{display:inline-block; border-radius:25px; background-color:#0B4D8E; color:#fff; text-transform:uppercase; letter-spacing:2px; padding:15px 30px; transition:all .3s ease; position:relative}
.blRoundBtn:hover,.blRoundBtn:focus{background-color:#0B3D6F; color:#fff}
.WalBanner > .container:before,.walFlist > li:before,.hWorksCont:before,.htUseCont:before{background:url('../img/wallet-land-sprite.png') 0 0 no-repeat;}
.WalBanner > .container{min-height:560px; position:relative;}
.WalBanner > .container:before {  background-position: 0 0;  bottom: -58px;  content: "";  height: 391px;  right: 0;  margin:auto;  position: absolute;  left: 0;  width: 352px;opacity:0;transition:1s;-webkit-transition:1s;-moz-transition:1s;}
.WalBanner.opacity > .container:before {opacity:1;}
.walHgroup{margin-bottom:60px; text-align:center}
.walHgroup > h2{font-weight:300; font-size:36px; margin-bottom:20px;}
.walHgroup > h6{font-size:14px; line-height:24px; max-width:50%; margin:0 auto;}
.walFeatures {  padding-top: 60px;}
.walFlist > li:before{content:""; width:125px; height:110px; margin-bottom:25px; display:inline-block;}
.walFlist > li.qRefunds:before{background-position:-395px -492px;}
.walFlist > li.rQitaf:before{background-position:-533px -500px;}
.walFlist > li.fOfUse:before{background-position:-663px -500px;}
.walFlist > li.aOffers:before{background-position:-795px -500px;}
.walFlist > li.nPayFail:before{background-position:-395px -619px;}
.walFlist > li.gYourFrnds:before{background-position:-565px -619px;}
.walFlist > li{width:32%;text-align:center;display:block;float:right;margin-bottom: 4%;}
.walFlist > li:nth-child(3n+2){margin-right:2%;margin-left:2%;}
.walFlist > li:nth-child(3n+1){clear:right;}
.walFlist h2{font-size:24px; font-weight:300;margin-bottom:15px;}
.walFlist span{line-height:24px; max-width:75%; margin:auto; display:block}
.inFlow{float:right;min-width:35%;position: relative;}
.outFlow{float:left; min-width:35%}
.hdiWorks{padding-top:50px;}
.hdiWorks li{display:block; font-size:16px;padding:0 5px 15px 0;}
.hdiWorks li:before,.htUseCont li:before{content:""; width:6px; height:6px; border-radius:50%; display:inline-block; margin-left:5px; background:#4d6f93; vertical-align:middle}
.inFlow > ul { border-bottom: 1px solid #444;  border-right: 1px solid #444;  margin: 25px 23% 30px 0;  padding: 40px 15px 15px; position:relative}
.inFlow > ul:before,.inFlow > ul:after,.inFlow li:first-child:after,.inFlow li:nth-child(2):after,.outFlow > ul:before,.outFlow > ul:after,.outFlow li:first-child:after,.outFlow li:nth-child(2):after{border-bottom: 1px solid #000; content: ""; height: 8px;  position: absolute; width: 8px;}
.inFlow > ul:before { border-right: 1px solid #000; right: -4px; top: 5px; transform: rotate(-43deg); }
.inFlow > ul:after,.inFlow li:first-child:after,.inFlow li:nth-child(2):after  { border-right: 1px solid #000; bottom: -4px; left: 0; transform: rotate(-130deg);}
.inFlow li:first-child:after{left:6px; opacity:.6}
.inFlow li:nth-child(2):after{left:12px; opacity:.3}
.outFlow > h3{text-align:left}
.outFlow > ul { border-bottom: 1px solid #444;  border-left: 1px solid #444;  margin: 25px 0 30px 23%;  padding: 40px 15px 15px; position:relative}
.outFlow > ul:before{border-right: 1px solid #000; right: -4px; bottom:-4px;  right: 10px; transform: rotate(230deg);}
.outFlow > ul:after,.outFlow li:first-child:after,.outFlow li:nth-child(2):after{ border-left: 1px solid #000; left: -4px; top: 10px;transform: rotate(-137deg);}
.outFlow li:first-child:after{ top:15px; opacity:.6}
.outFlow li:nth-child(2):after{top:20px; opacity:.3}
.hWorksCont{position:relative; min-height:350px; padding-top:35px;}
.hWorksCont:before{content:"";width:270px;height:300px;position:absolute;right:0;left:0;margin:auto;background-position: -1px -308px;z-index: 1;background-size:750px;top: 18px;}
.WalhtUse{margin-top:100px;background:#FAFAFC;padding:80px 0;overflow: hidden;}
.htUseCont{position:relative;max-width:90%;/* overflow: hidden; */}
.htUseCont:before{content:""; width:330px; height:424px; background-position:-297px 0; display:block; float:right; margin-left:120px; background-size: 850px auto;}
.htUseCont hgroup{ text-align:right; margin-bottom:30px;}
.htUseCont h3{font-size:20px; font-weight:500; margin:20px 0 10px;}
.htUseCont p,.htUseCont li{line-height:20px; padding-bottom:5px; display:block; }
.walTerms{padding:80px 0}
.faqBlock {  max-width: 80%;}
.faqBlock ul{margin:20px 0 0 0; padding:0; list-style:none}
.walTerms hgroup {  text-align: right; margin-bottom:40px;}
.walTerms h3{font-size:18px; margin-bottom:10px;}
.walTerms p,.walTerms .ans{padding-bottom:25px; line-height:20px; display:block}
.faqBlock li{padding:0 10px 5px 0; display:block; position:relative}
.faqBlock li:before{ content:""; width:5px; height:5px; border-radius:50%; position:absolute; right:0; top:7px; background:#ccc}
.WalletEnroll{text-align:center}
.WalletEnroll .modal-dialog{ padding:15px;}
.WalletEnroll .modal-header{border-bottom:none;}
.WalletEnroll .close{font-size:30px; z-index:10}
.noEnroll {  text-align: center;  margin: 50px 0;}
.noEnroll .titImg{margin-bottom:45px; max-width:50%;}
.noEnroll > h2 {  color: #333;  font-size: 22px;  margin-bottom: 30px;}
.noEnroll > p{color:#8d8d8d; font-size:16px; line-height:22px; margin:0 auto 30px; max-width: 80%;}
.noEnroll .wScheck{margin-bottom:30px; font-size:16px;}
.noEnroll .wScheck a{ text-decoration:underline}
.noEnroll .wScheck a:hover{text-decoration:none}
.noEnroll .btnMax{width:350px;} 



/*animation element*/

.animation-element {position:relative;margin: 0% 0 2.66% 0;} 
.animation-element:nth-of-type(3n-2) {margin: 0% 0% 2.75% 0;} 
.animation-element:nth-of-type(3n-1) {margin: 0% 0 2.75% 0 } 
.animation-element:nth-of-type(3n-0) {margin: 0% 0 2.75% 0%;} 
.bounce-up.subject {opacity: 0; -moz-transition: all 0.7s linear;-webkit-transition: all 0.7s linear;transition: all 0.7s linear;-moz-transform:translate3d(0px, 200px, 0px); -webkit-transform:translate3d(0px, 200px, 0px);-ms-transform:translate(0px, 200px);transform:translate3d(0px, 200, 0px);-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden;} 
.bounce-up.in-view.subject {opacity: 1; -moz-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -ms-transform: translate(0px, 0px); transform: translate3d(0px, 0px, 0px); }
.animation-element.slide-left {opacity: 0;-moz-transition: all 1000ms linear;-webkit-transition: all 1000ms linear;-o-transition: all 1000ms linear;transition: all 1000ms linear;-moz-transform: translate3d(-100px, 0px, 0px);-webkit-transform: translate3d(-100px, 0px, 0px);-o-transform: translate(100px, 0px);-ms-transform: translate(100px, 0px);transform: translate3d(53px, 0px, 0px);left: -1000px;position: relative;}
.animation-element.slide-left.in-view {opacity: 1;-moz-transform: translate3d(0px, 0px, 0px);-webkit-transform: translate3d(0px, 0px, 0px);-o-transform: translate(0px, 0px);-ms-transform: translate(0px, 0px);transform: translate3d(0px, 0px, 0px);left: 0;}
.hWorksCont svg {position:absolute;top:0;right: -4px;}




/******************************************Arabic CSS only******************************************/

.inFlow > ul:after, .inFlow li:first-child:after, .inFlow li:nth-child(2):after{transform: rotate(130deg);}
.inFlow > ul:before{transform: rotate(41deg)}
.outFlow > ul:before{transform: rotate(127deg);}
.outFlow > ul:after, .outFlow li:first-child:after, .outFlow li:nth-child(2):after{transform: rotate(-230deg);}