@font-face {
    font-family:"AvenirBook";
    src:url("../fonts/avenir/en/Avenir-Book.woff") format("woff")
}
@font-face {
    font-family:"AvenirLight";
    src:url("../fonts/avenir/en/Avenir-Light.woff") format("woff")
}
@font-face {
    font-family:"AvenirMedium";
    src:url("../fonts/avenir/en/Avenir-Medium.woff") format("woff")
}
@font-face {
    font-family:"AvenirHeavy";
    src:url("../fonts/avenir/en/Avenir-Heavy.woff") format("woff")
}
@font-face {
    font-family:"AvenirBlack";
    src:url("../fonts/avenir/en/Avenir-Black.woff") format("woff")
}
@font-face {
    font-family:"AvenirRoman";
    src:url("../fonts/avenir/en/Avenir-Roman.woff") format("woff")
}


@font-face {
    font-family:"AvenirArabicBook";
    src:url("../fonts/avenir/ar/AvenirArabic-Book.woff") format("woff")
}
@font-face {
    font-family:"AvenirArabicLight";
    src:url("../fonts/avenir/ar/AvenirArabic-Light.woff") format("woff")
}
@font-face {
    font-family:"AvenirArabicMedium";
    src:url("../fonts/avenir/ar/AvenirArabic-Medium.woff") format("woff")
}
@font-face {
    font-family:"AvenirArabicHeavy";
    src:url("../fonts/avenir/ar/AvenirArabic-Heavy.woff") format("woff")
}
@font-face {
    font-family:"AvenirArabicBlack";
    src:url("../fonts/avenir/ar/AvenirArabic-Black.woff") format("woff")
}

@font-face {
  font-family: 'SR2NEW2';
  src: url("../fonts/avenir/ar/SR2NEW2.ttf") format('truetype'),;
  font-weight: normal;
  font-style: normal;
}


*{border:none;box-sizing:border-box;color:#373A37;font-family:"AvenirBook", sans-serif;list-style:none;margin:0;outline:none;padding:0}
.l-ar *{font-family:"AvenirArabicBook"}
body{overflow-x:hidden}
.l-ar, .l-ar *[dir='ltr']{direction:rtl}

a, a:hover{color:#13181D;text-decoration:none}
a:hover{cursor:pointer}

.container{
    margin:0 auto;
    max-width:1220px
}

/*** generic roules ***/
h1{font:normal 40px/55px "AvenirBook"}
h2{font:normal 30px/44px "AvenirBook"}
.l-ar h1, .l-ar h2{font-family:"AvenirArabicBook"}

a.btn{
    display:inline-block;
    font:normal 16px/42px "AvenirHeavy";
    padding:0 25px;
    transition:background ease 0.3s;
}
.l-ar a.btn{font-family:"AvenirArabicHeavy"}
a.btn.arrow{
    border:2px solid #373A37;
    color:#373A37
}
a.btn.arrow.left{
    transform:rotate(180deg)
}
a.btn.arrow:hover{
    background:#373A37;
    color:#fff
}
a.btn.arrow:after, a.btn.download i span:after{
    border:solid #373A37;
    border-width:0 2px 2px 0;
    display:inline-block;
    content:"";
    margin:0 0 0 6px;
    padding:3px;
    transform:rotate(315deg)
}
#carousel-container a.btn.arrow:after, #carousel-container a.btn.download i span:after{border-color:#fff}
.l-ar a.btn.arrow:after{
     margin:0 6px 0 0;
     transform:rotate(135deg)
}
.l-ar a.btn.download i span:after{margin:0 3px 0 0}
a.btn.arrow:hover:after{border-color:#fff}

a.btn.arrow.down:after{
    display:block;
    float:right;
    margin:17px 0 0;
    transform:rotate(45deg)
}
.l-ar a.btn.arrow.down:after{float:left}

a.btn.flat{
    border:none!important;
    line-height:24px;
    padding:0;
    text-decoration:underline
}

a.btn.arrow.flat:hover{
    background:transparent;
    color:#373A37;
    font-weight:bold;
    text-decoration:underline
}
a.btn.arrow.flat:hover:after{border-color:#373A37}

a.btn.negative{
    border:2px solid #fff;
    color:#fff;
}
a.btn.negative:hover{
    background:#fff;
    color:#373A37
}


a.btn.negative:after{border-color:#fff}
a.btn.negative:hover:after{border-color:#373A37}

a.btn.fading span{display:none}
a.btn.fading span:first-child{display:inline-block}
a.btn.fading:hover span{display:inline-block}
a.btn.fading:hover span:first-child{display:none}


a.btn.fading:hover,
a.btn.fading:hover span{color:#fff}
a.btn.negative.fading:hover,
a.btn.negative.fading:hover span{color:#373A37}

a.btn.black{
    background:#373737;
    color:#fff;
    display:inline-block;
    font:normal 16px/42px "AvenirHeavy";
    padding:0 25px;
    transition:all ease 0.3s
}
.l-ar a.btn.black{font-family:"AvenirArabicHeavy"}
a.btn.black:hover{
    background:#00B174;
    border-color:#00B174
}
a.btn.black:after{border-color:#fff}

a.btn.download{position:relative}
a.btn.download:after{display:none}

a.btn.download i{
    line-height:24px;
}
a.btn.download i span{
    border-bottom:2px solid;
    content:"";
    display:inline-block;
    height:0px;
    margin:8px 0 0 10px;
    position:relative;
    width:13px;
}
.l-ar a.btn.download i span{margin:8px 10px 0 0}
a.btn.download i span{position:relative}
a.btn.download i span:after{
    border:2px solid #373A37;
    border-width:0 0 2px 2px;
    bottom:0;
    margin:0 0 0 2px;
    position:absolute
}
a.btn.download i span:before{
    background:#373A37;
    bottom:0px;
    content:"";
    display:block;
    height:10px;
    left:5px;
    position:absolute;
    width:2px
}
a.btn.download *,
a.btn.download.negative:hover *,
a.btn.download.negative:hover :after{border-color:#373A37}

a.btn.download.negative *,
a.btn.download.negative :after,
a.btn.download.grey:hover *,
a.btn.download.grey:hover :after{border-color:#fff;color:#fff}

a.btn.download.negative i span:before,
a.btn.download.grey:hover i span:before{background:#fff}
a.btn.download.negative:hover i span:before{background:#373A37}

a.btn.download.grey{padding:0 15px}
a.btn.download.grey:hover{
    background:#373A37;
    color:#fff
}

a.btn.download.grey i{
    float:right;
    line-height:42px
}
.l-ar a.btn.download.grey i{float:left}

a.btn.play{
    border-radius:50%;
    border-width:3px;
    height:82px;
    padding:0;
    width:82px
}
a.btn.play:after{
    border-top:19px solid transparent;
    border-bottom:19px solid transparent;
    border-left:23px solid #fff;
    content:"";
    display:block;
    height:0px;
    margin:18px auto 0 31px;
    width:0px
}

a.btn.negative.play:hover:after{
    border-color:transparent;
    border-left-color:#373A37
}

.subtitle{
    display:block;
    font:normal 16px/20px "AvenirBlack";
    text-transform:uppercase
}
.l-ar .subtitle{font-family:"AvenirArabicBlack"}

.date{
    display:block;
    font:normal 16px/22px "AvenirMedium";
    margin:0 0 30px
}
.l-ar .date{font-family:"AvenirArabicMedium"}


.align-to-right{text-align:right}
.l-ar .align-to-right{text-align:left}

.bg-grey{background:#F0ECEC}

.parag-inline{display:inline-block;vertical-align:top}

article.container{margin-bottom:80px}
article{padding:19px 0 0}
article .parag, article aside{
    display:inline-block;
    vertical-align:top
}
article .parag{
    padding:0 40px 0 0;
    width:72.78%
}
.l-ar article .parag{padding:0 0 0 40px}

article span.date{margin:17px 0 75px}
article p{margin:0 0 22px}

aside{
    float:right;
    width:20%
}
.l-ar aside{float:left}

aside *, aside a.btn.arrow{font:bold 11px/24px "AvenirHeavy"}
.l-ar aside *, .l-ar aside a.btn.arrow{font-family:"AvenirArabicHeavy"}

aside h3.title, aside p.title{
    font:normal 20px/29px "AvenirHeavy";
    margin:0 0 6px
}
.l-ar aside h3.title, .l-ar aside p.title{font-family:"AvenirArabicHeavy"}

aside .social-container{margin:0 0 15px}
aside .social-container li a{
    height:31px;
    width:31px
}

footer .half-parag .social-container p{margin:0 0 20px}
.social-container li{
    display:inline-block;
    margin:0 16px 0 0;
    width:auto
}
.l-ar .social-container li,
footer .social-container li{margin:0 0 0 16px}
.l-ar footer .social-container li{margin:0 16px 0 0}

.social-container li a{
    border:2px solid #373737;
    border-radius:50%;
    color:#373A37;
    display:block;
    height:35px;
    position:relative;
    width:35px;
    transition:background-color ease 0.8s;
}
.social-container li a:after{
    background:#373A37 no-repeat;
    content:"";
    display:block;
    left:50%;
    margin:-8px 0 0 -8px;
    position:absolute;
    top:50%;
}
.social-container li a.twitter:after{
    -webkit-mask-image:url("../img/social-icons/twitter.png");
    mask-image:url("../img/social-icons/twitter.png");
        width: 16px;
    height: 16px;
    -webkit-mask-repeat: no-repeat
}

.social-container li a.linkedin:after{
    height:16px;
    -webkit-mask-image:url("../img/social-icons/linkedin-in.svg");
    mask-image:url("../img/social-icons/linkedin-in.svg");
    width:14px
}
.social-container li a:hover{

border: 2px solid #00b174;

}
.social-container li a:hover:after{background-color:#00b174}

.short-download-list{
    line-height:40px
}
.short-download-list a{
    background:#f1f2f2;
    border:none;
    display:block;
    font-size:11px;
}

#top-slider li.open:after, .top-banner:after, .bottom-blocks div.half:after{
    background:url("../img/top-banner-gradient.png") repeat-y 0 0;
    background-size:120%;
    content:"";
    display:none;
    height:100%;
    left:0;
    opacity:0.7;
    position:absolute;
    top:0;
    width:100%;
    z-index:0
}
.top-banner *, #top-slider li.open > div > *, #top-slider li.open > span{
    position:relative;
    z-index:1
}

.email-link{text-decoration:underline}
/** end of generic rules**/

/*** header ***/
header{
    border-bottom:1px solid #383A37;
    display:flex;
    height:86px
}
.logo{
    margin:0 20px 0 0;
    vertical-align:top;
}
.l-ar .logo{margin:0 0 0 20px}
header nav{flex:1}
html[lang="ar"] header nav{float:right}
header nav, header ul li a{
    display:inline-block
}
header nav > ul{display:inline-block}
header nav > ul > li{
    display:inline;
    position:relative
}
header ul#menu{margin:22px 0 0}
header ul#menu ul{
    background:#13181D;
    color:#fff;
    left:0;
    min-width:220px;
    opacity:0;
    padding:22px 0;
    position:absolute;
    transition:opacity ease 0.3s;
    z-index:-1
}
.l-ar header ul#menu ul{left:auto;right:0}
header ul#menu ul::before{
    content:"";
    width:0px;
    height:0px;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:5px solid #f0f0f0;
    left:25px;
    position:absolute;
    top:0
}
.l-ar header ul#menu ul::before{
    left:auto;
    right:25px
}

header ul li a{
    line-height:32px;
    padding:0 25px
}

header ul#menu > li > a{
    font:normal 16px/50px "AvenirHeavy"
}
.l-ar header ul#menu > li > a{font-family:"AvenirArabicHeavy"}

header ul a.ar{
    font:normal 20px/50px "AvenirArabicMedium"
}
header ul a.ar:hover{font-family:"AvenirArabicHeavy"}

header ul#menu > li > a:hover,
header ul#menu > li > a.hover{background:#f0f0f0}
header ul#menu li a.hover + ul{
    opacity:1;
    z-index:300
}

header ul#menu > li > a:after{
    border:solid #13181D;
    border-width:0 2px 2px 0;
    display:inline-block;
    content:"";
    margin:0 0 2px 6px;
    padding:3px;
    transition:all ease 0.3s;
    transform:rotate(45deg)
}
.l-ar header ul#menu > li > a:after{
    margin:0 6px 2px 0;
    transform:rotate(135deg);
}

header ul#menu > li > a.hover:after{
    margin:0 0 -1px 6px;
    transform:rotate(-135deg)
}
.l-ar header ul#menu > li > a.hover:after{margin:0 6px -1px 0}

header ul#menu ul a{color:#fff}

header ul#menu ul a:hover{font-family:"AvenirHeavy"}
.l-ar header ul#menu ul a:hover{font-family:"AvenirArabicHeavy"}

#side-menu{float:right;margin:22px 0 0}
.l-ar #side-menu{float:left}
/*** end header***/


/*** section top-slider***/
#top-slider{
    margin-top:48px;
    max-height:653px;
    overflow:hidden;
    position:relative
}
#top-slider ul *{color:#fff}
#top-slider ul a:hover{color:#373A37}

#top-slider ul{
   /* align-items:stretch;*/
    column-gap:10px;
    display:flex;
   /* justify-content:space-between;*/
    height:653px;
    width:100%
}
#top-slider li{
    /* cursor:pointer;
    flex:1;
   max-width:111px;*/
    /*padding:20px 12px;*/
    position:relative
}
#top-slider li.open{
    /*  max-width:unset
      cursor:default;
      flex:9;
     max-width:100000px;*/

}


#top-slider{
    display:flex;
    flex-direction:row-reverse;
}
#top-slider li{
    cursor:pointer;
    display:flex;
    flex-direction:column;

    flex:1 0 111px;
    /* Handles any clipping/overflow issues on transition */
    overflow:hidden;
    transition:flex .4s ease;
}

#top-slider li.open{cursor:default;flex:870px}
#top-slider li.on-animate > div{transition:opacity .8s ease}

#top-slider li > div{opacity:1;z-index: 1;padding-left: 12px;padding-right: 12px;}
#top-slider li > div > span.subtitle{opacity:1}
#top-slider li.open > div{opacity:1}

#top-slider li > div > *{opacity:0}
#top-slider li.open > div > *{opacity:1}
#top-slider li.open.on-animate > div{opacity:0}

@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
    #top-slider ul{
        display:block;
    }
    #top-slider li{
        display:block;
        float:left;
        height:100%;
        margin:0 1.165% 0 0;
        width:9%;
    }
    #top-slider li:first-child + li + li{margin:0}
    #top-slider li.open{
        width:79.67%

    }
}
#top-slider li{background:no-repeat center 0}

#top-slider li:nth-child(1){
    background-image:url("../img/top-slider/stay-abreast-of-the-latest-technological-developments-in-the-Saudi-capital-market.jpg");
}

#top-slider li:nth-child(2){
    background-image:url("../img/top-slider/unlock-the-power-of-data-and-technology.jpg");
}

#top-slider li:nth-child(3){
    background-image:url("../img/top-slider/we-are-an-innovation-focused-company.jpg");
}

#top-slider li:nth-child(4){
    background-image:url("../img/top-slider/the-innovation-arm-of-the-saudi-tadawul-group.jpg");
}
#top-slider li{background-size:cover}



#top-slider .half-title{
    font:normal 22px/30px "AvenirMedium";
    z-index: 1;
    padding-top: 20px;
    padding-left: 12px;
    padding-right: 12px;
}
.l-ar #top-slider .half-title{font-family:"AvenirArabicMedium"}

#top-slider .subtitle{width:60px}

#top-slider li.open .subtitle{
    margin:0 0 8px;
    width:auto
}
#top-slider li a.btn{text-transform:capitalize}



#top-slider li.open div{margin:148px 0 0 86px}
.l-ar #top-slider li.open div{margin:148px 86px 0 0}

#top-slider h1{
    font:normal 60px/68px "AvenirLight";
    margin:0 0 27px -4px;
    max-width:685px;
    text-shadow:0 0 20px #000
}
.l-ar #top-slider h1 {
    font-family:"AvenirArabicLight";
    margin:0
}

#top-slider p{margin:0 0 23px}

#top-slider a#cloned-link{
    display:none;
    left:0;
    position:absolute;
    text-transform:capitalize;
    top:0;
    z-index:100
}
#top-slider a#cloned-link.off{display:none}

/*#top-slider li a.btn.arrow{visibility:hidden}*/

/*** end top-slider section ***/

/*** next-gen section ***/
#next-generation{
    background:#000 url("../img/next-gen/next-gen.jpg") no-repeat center top;
    background-attachment:fixed;
    margin:94px 0 0;
    overflow:hidden;
    padding:0 0 120px;
    position:relative
}
#next-generation *{color:#fff}

#next-generation div.container{
    overflow:hidden;
    position:relative;
    text-align:center;
    z-index:2
}
#next-generation .overlayer{
    background:rgba(0,0,0,0.6);
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:1
}

#next-generation h1{
    font:normal 60px/70px "AvenirBook";
    margin:98px auto 0
}
.l-ar #next-generation h1{font-family:"AvenirArabicBook"}

#next-generation h1 strong{font-family:"AvenirHeavy"}
#next-generation p{
    font:normal 20px/40px "AvenirHeavy";
    margin:31px 0 0
}

.l-ar #next-generation h1 strong,
.l-ar #next-generation p{
    font-family:"AvenirArabicHeavy"
}

#next-generation h2{
    font:normal 36px/55px "AvenirBook";
    margin:66px 0 0
}
.l-ar #next-generation h2{font-family:"AvenirArabicBook"}

#next-generation ul{
    margin:65px auto 0;
    max-width:880px;
    overflow:auto;
    position:relative;
    text-align:center;
    z-index:2
}
#next-generation ul *{
    color:#fff;
    font:normal 36px/55px "AvenirBook"
}
.l-ar #next-generation ul *{font-family:"AvenirArabicBook"}
#next-generation ul li, .container-for-scroll{}
#next-generation ul li, .container-for-scroll{
    cursor:default;
    display:block;
    opacity:0.2;
    padding:48px 0;
    transition:opacity ease 1s;
}
#next-generation ul li a{cursor:default}
#next-generation ul li, .container-for-scroll{
    overscroll-behavior-y:contain;
}
#next-generation ul li.hover, .container-for-scroll.hover{
    opacity:1
}
#next-generation ul li.sibling, .container-for-scroll.sibling{opacity:0.3}

#next-generation ul li a.btn{
    cursor:pointer;
    display:inline-block;
    margin:20px 0 0;
    transition:all ease 0.6s
}


#next-generation a.btn,
#next-generation a.btn *{color:#fff;font:normal 16px/42px "AvenirHeavy"}

.l-ar #next-generation a.btn,
.l-ar #next-generation a.btn *{font-family:"AvenirArabicHeavy"}

#next-generation a.btn:hover,
#next-generation a.btn:hover *{color:#373737}

/*** end of next-gen section***/

/*** introducing section ***/
.half-parag{
    display:flex;
    min-height:576px;
    position:relative;
}

.half-parag.parallax-container{
    margin:0 auto;
    max-width:none;
    overflow:hidden
}

.half-parag.parag-to-right{position:static}
.half-parag .half{
    flex:1;
    width:50%
}
.half-parag .half.par{
    padding:164px 0 40px;
    position:relative
}

.half-parag.parallax-container .half.par, .l-ar .half-parag.parag-to-right .half.par{
    position:relative;
    padding-left:calc(50vw - 610px);
    padding-right:0;
    max-width:50%;
}
.half-parag.parag-to-right .half.par, .l-ar .half-parag .half.par{
    padding-left:0;
    padding-right:calc(50vw - 610px)

}

.half-parag.parag-to-right .half.par{
    background:#fff
}

.half-parag .half.par.less-margin-top{padding-top:100px}

.half-parag .half.par > div{padding:0 40px 0 0}
.l-ar .half-parag .half.par > div{padding:0 0 0 40px}
.half-parag.parag-to-right .half.par > div{padding:0 0 0 96px}
.l-ar .half-parag.parag-to-right .half.par > div{padding:0 96px 0 0}

.half-parag h1{
    margin:7px 0 24px
}

.half-parag p{
    font:normal 16px/22px "AvenirBook";
    margin:0 0 34px
}
.l-ar .half-parag p{font-family:"AvenirArabicBook"}

.half-parag .parallax img{margin:109px 0;width:100%}

.half-parag.parag-to-right img{
    left:0;
    margin:0
}
.l-ar .half-parag.parag-to-right img{left:auto;right:0}

.half-parag img.expand{position:absolute}


/*** end of introducing section ***/

/*** contact us section ***/
.contact-us{
    background:#f1f2f2;
    height:196px;
    line-height:196px;
    text-align:center
}
.contact-us h2, .contact-us hgroup{
    display:inline-block;
    margin:0 30px 0 0
}
.l-ar .contact-us h2, .l-ar .contact-us hgroup{
    margin:0 0 0 30px
}

.contact-us h2{
    font:normal 30px/196px "AvenirBlack";
    vertical-align:top
}
.l-ar .contact-us h2{
    font-family:"AvenirArabicBlack";
    margin:0 0 0 30px
}

.contact-us.two-rows{padding:72px 0 0}
.contact-us.two-rows, .contact-us.two-rows h2{
    line-height:36px;
    margin:0
}
.contact-us hgroup{text-align:left}

.contact-us h3, contact-us p{
    font:normal 16px/22px "AvenirBook"
}
.l-ar .contact-us h3, .l-ar contact-us p{font-family:"AvenirArabicBook"}

.contact-us hgroup, .contact-us.two-rows a{vertical-align:top}



/*** end contact us section ***/

/*** explore-updates section ***/
#explore-updates h1{
    margin:109px 0 42px;
    text-align:center
}
#carousel-container *{color:#fff}
#carousel-container ul.carousel-items{
    align-items:stretch;
    column-gap:8.5px;
    display:flex;
    justify-content:space-between;
}
#carousel-container ul.carousel-items li{
    background:#000;
    flex:1;
    height:546px;
}
#carousel-container ul.carousel-items li figure{
    height:232px;
    overflow:hidden;
}
#carousel-container ul.carousel-items li img{max-width:100%}

#carousel-container ul.carousel-items li .par{
    padding:49px 20px
}
#carousel-container ul.carousel-items li .par h2{
    font:normal 20px/30px "AvenirHeavy";
    margin:24px 0 21px
}
.l-ar #carousel-container ul.carousel-items li .par h2{font-family:"AvenirArabicHeavy"}
#carousel-container ul.carousel-items li .par p{
    font:normal 16px/22px "AvenirBook";
    height:44px;
    margin:0 0 48px
}
.l-ar #carousel-container ul.carousel-items li .par p{font-family:"AvenirArabicBook"}
#carousel-container ul.carousel-items li .par a{
    font:normal 16px/28px "AvenirMedium";
    text-decoration:underline;
}
.l-ar #carousel-container ul.carousel-items li .par a{font-family:"AvenirArabicMedium"}

#carousel-container ul.carousel-items li .par a:hover{font-family:"AvenirHeavy"}
.l-ar #carousel-container ul.carousel-items li .par a:hover{font-family:"AvenirArabicHeavy"}

ul.carousel-bullets{display:none}
/*** end explore-updates section ***/

/*** join-our-teams section ***/
#join-our-team{
    margin-top:110px;
    min-height:460px
}
#join-our-team.half-parag.parag-to-right .half.par{padding:106px 0 40px}
/*** end join-our-teams section ***/

/*** breadcrumbs section ***/
#breadcrumbs{padding:0 0 7px}/*** unfortunately the render of the font is not perfect and the vertical align seem not perfect. So I must add a padding ***/
#breadcrumbs *{
    font:normal 16px/102px "AvenirHeavy"
}
.l-ar #breadcrumbs *{font-family:"AvenirArabicHeavy"}

#breadcrumbs li{display:inline-block}
#breadcrumbs a{
    display:block;
    font-family:"AvenirRoman"
}
#breadcrumbs a{
    margin:0 4px 0 0
}
#breadcrumbs a span{
    font-family:"AvenirRoman";
    text-decoration:underline; /*** the only way to avoid underline after content. No before in li, the / must be attached after every single <a> ***/
}
.l-ar #breadcrumbs a, .l-ar #breadcrumbs a span{font-family:"AvenirArabicBook"}

#breadcrumbs a:after{
    content:"/";
    margin:0 0 0 8px;
    text-decoration:none
}
.l-ar #breadcrumbs a:after{margin:0 4px}
/*** end of breadcrumbs section  ***/

/*** our solutions section***/
.top-banner{
    background:url("../img/our-solutions/our-solutions-01.jpg") no-repeat center center;
    background-size:100%;
    max-height:210px;
    margin-bottom:70px;
    padding:59px 60px 87px;
    position:relative
}


#our-solutions{background-position:center -40px}
#product-detail-top.top-banner{background-image:url("../img/product-detail/product-detail-01.jpg")}
#our-story.top-banner{background-image:url("../img/about-us/our-story-01.jpg")}
#media-centre.top-banner{background-image:url("../img/news-listing/news-listing-01.jpg")}
#our-vision{background-image:url("../img/our-vision/our-vision-01.jpg")}
#careers{background-image:url("../img/careers/careers-01.jpg")}
#helpful-links{background-image:url("../img/helpful-links/helpful-links-01.jpg")}
#leadership-page{background-image:url("../img/leadership-page/leadership-page-01.jpg")}
#contact-us{background-image:url("../img/contact-us/contact-us-01.jpg")}

.top-banner.no-mg{margin-bottom:0}
.top-banner *{color:#fff}

.top-banner h1{
    font-size:56px;
    margin:0 0 12px
}

.top-banner p{
    padding:0 0 0 2px /** unfortunately for the above h1, the browser rendering of the font push the text 2px from left border **/
}
/*** end of our solutions section***/

/*** what we do section ****/

#what-we-do{
    height:584px;
    margin:74px 0 0;
}
#what-we-do div.parag-inline{
    padding:124px 0 0
}
#what-we-do p{
    font:normal 18px/28px "AvenirLight";
    padding:16px 0 0
}
.l-ar #what-we-do p{font-family:"AvenirArabicLight"}

#what-we-do ul{
    display:block;
    float:right;
    overflow:hidden;
    position:relative;
    width:70%
}
.l-ar #what-we-do ul{float:left}
#what-we-do ul li{
    display:inline-block;
    float:left;
    height:584px;
    width:33.3333%
}

#what-we-do figure{
    align-items:center;
    display:flex;
    height:342px;
    overflow:hidden;
    position:absolute;
    width:237px
}
#what-we-do figure:after{
    background:rgba(0,0,0,0.3);
    content:"";
    display:block;
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:2
}

#what-we-do ul li figure img{
    height:auto;
    position:absolute;
    width:100%;
    z-index:1
}
#what-we-do ul li:nth-child(1) figure{
    top:20%
}
#what-we-do ul li:nth-child(2) figure{
    top:0
}
#what-we-do ul li:nth-child(3) figure{
    top:35%
}

#what-we-do figcaption{
    color:#fff;
    font:normal 20px/40px "AvenirMedium";
    padding:0 20px;
    position:relative;
    z-index:3
}
.l-ar #what-we-do figcaption{font-family:"AvenirArabicMedium"}

/*** end of what we do section ****/

/*** our first soluction section ***/

#our-first-solution h2{
    margin:0 0 12px
}

#our-first-solution h3{
    font:normal 20px/24px "AvenirHeavy";
    margin:0 0 18px
}
.l-ar #our-first-solution h3{font-family:"AvenirArabicHeavy"}

#our-first-solution ul li{
    margin:0 0 18px
}

#our-first-solution .half ul li::before{
    background:#373A37;
    border-radius:4px;
    content:"";
    display:inline-block;
    height:8px;
    margin:0 14px 0 0;
    width:8px
}
.l-ar #our-first-solution .half ul li::before{margin:0 0 0 14px}
/*** end of our first soluction section ***/

/*** big-ballons section***/
.big-ballons{
    padding:123px 0 104px;
    text-align:center;
}
.big-ballons h1{
    margin:0 0 19px
}

.big-ballons h2{
    margin:0 0 29px
}

.big-ballons ul{
    column-gap:50px;
    display:flex;
    margin:0 auto;
    width:90%
}
.big-ballons li{
    flex:1 1 0;
    text-align:center;
}
.big-ballons li a:not([href]){cursor:default}
.big-ballons li a figure{
    background:#373A37;
    border-radius:50%;
    display:table-cell;
    height:227px;
    margin:0 auto;
    padding:0;
    text-align:center;
    vertical-align:middle;
    width:227px
}
.big-ballons li a figure img{}
.big-ballons li p{
    font-size:20px;
    line-height:30px;
    padding:32px 0 0
}


/*** end of big-ballons section***/

/*** message from ceo section***/
.parag-with-pic{
    display:flex;
    margin:70px 0 0;
    padding:122px 0 0
}
.parag-with-pic h1{margin:0 0 55px}
.parag-with-pic div{
    flex:4;
    padding:0 0 70px
}
.parag-with-pic blockquote{position:relative}
.parag-with-pic span.quote{
    background:url("../img/quote.png") no-repeat;
    display:block;
    height:77px;
    left:0;
    position:absolute;
    top:2px;
    width:81px
}
.l-ar .parag-with-pic span.quote{left:auto;right:0}

.parag-with-pic p{
    font:normal 22px/30px "AvenirBook";
    margin:0 0 30px;
    padding:0 104px 0 128px
}
.l-ar .parag-with-pic p{
    font-family:"AvenirArabicBook";
    padding:0 139px 0 104px
}
.parag-with-pic img{
    align-self:flex-end;
    flex:1;
    height:420px;
    width:315px;
}
.quote{
    font:normal 300px/55px "Arial"
}
.parag-with-pic strong{
    display:block;
    font-family:"AvenirHeavy";
    padding:19px 0 0
}
.l-ar .parag-with-pic strong{font-family:"AvenirArabicHeavy"}
/*** end of message from ceo section***/

/*** tab widget ***/
.tab-widget{
    margin:67px 0;
    overflow:hidden;
}

.tabs li{display:inline-block}
.tabs li a{
    display:block;
    font:normal 20px/40px "AvenirRoman";
    padding:0 46px 0 0;
    text-decoration:underline
}
.l-ar .tabs li a{
    font-family:"AvenirArabicBook";
    padding:0 0 0 46px
}

.tabs li a.current{
    font-family:"AvenirHeavy"
}
.l-ar .tabs li a.current{font-family:"AvenirArabicHeavy"}
.tabs li a.current, .tabs li a:hover{text-decoration:none}

.tabs-contents{margin:59px 0 0}
.tabs-contents > div{
    display:none
}
.tabs-contents .current{
    display:flex;
    flex-direction:column;
    row-gap:48px
}

.tabs-contents .current *{color:#fff}
.tabs-contents .current > div{display:none}
.tabs-contents .current > div.current-page{
    background:#373A37;
    display:flex;
    padding:37px 44px 2px
}

.tabs-contents .parag{
    flex:4
}

.tabs-contents a{
    font:normal 20px/53px "AvenirHeavy";
    text-decoration:underline
}
.l-ar .tabs-contents a{font-family:"AvenirArabicHeavy"}

.tabs-contents p{padding:0 0 21px}
.tabs-contents .parag span{display:inline-block;padding:0 42px 0 0}
.l-ar .tabs-contents span{padding:0 0 0 42px}

.tabs-contents ul.downloads{
    flex:1;
    font:normal 20px/24px "AvenirHeavy";
    margin:15px 0 0;
    max-width:300px
}
.l-ar .tabs-contents ul.downloads{font-family:"AvenirArabicHeavy"}
.tabs-contents ul.downloads li{
    display:inline-block;
    margin:0 0 0 36px
}
.tabs-contents ul.downloads li a{
    display:block;
}

/*** end of tab widget ***/

/*** paginator ***/
.paginator{
    height:64px;
    margin:72px auto 102px;
    text-align:center;
}
.paginator ul{
    background:#f7f7f7;
    display:inline-block;;
    padding:10px 0
}

.paginator li{
    display:inline-block;
    font:bold 18px/44px "AvenirHeavy";
    height:44px;
    margin:0 4px;
    vertical-align:top;

    text-align:center;
    width:44px
}
.l-ar .paginator li{
    float:right;
    font-family:"AvenirArabicHeavy"
}
.paginator li a{
    display:block;
    height:100%
}

.paginator li a:hover, .paginator li a.current, .paginator li.current a, .paginator li.current{
    background:#373A37;
    color:#fff
}
.paginator a.btn{}
.paginator a.btn.arrow{
    border:none;
    padding:0
}
.paginator a.btn.arrow:after{
    border-color:#373A37;
    border-width:0 3px 3px 0;
    padding:6px;
    margin:15px 0 0 -5px;
}
.paginator a.btn.arrow.off{cursor:default}

.paginator a.btn.arrow.off:after,.paginator a.btn.arrow.off:hover:after{
    border-color:#A6B1B8
}
.paginator a.btn.arrow:hover:after{border-color:#fff}
.paginator a.btn.arrow.off:hover{
    background:transparent;
}

.l-ar .paginator a.btn.arrow:after{margin:15px 0 0 5px}
/*** end of paginator ***/

/*** bottom blocks section ***/
.bottom-blocks{margin:0 0 114px}
.bottom-blocks .half-parag{
    column-gap:20px;
    min-height:0
}
.bottom-blocks .half{
    overflow:hidden;
    position:relative
}
.bottom-blocks .parag{
    padding:84px 46px;
    position:absolute;
    z-index:3;
}
.bottom-blocks div.half:after{z-index:2}
.bottom-blocks .parag *{color:#fff}
.bottom-blocks .parag h2{
    font-size:40px;
    margin:0 0 30px
}
.bottom-blocks img{
    position:relative;
    width:100%;
    z-index:1
}
.bottom-blocks .parag p{height:44px}
.bottom-blocks .btn.arrow{margin:0 0 31px}
/*** end of bottom blocks section ***/


/*** blocks slider section ***/
.blocks-slider-container h1{margin:0 0 43px}
.blocks-slider{display:flex;margin:0 0 146px}

.blocks-slider > a.btn.arrow{
    border:none;
    display:none;
    line-height:350px;
    padding:0 0 0 8px
}
.blocks-slider > a.btn.arrow:after{
    border-width:0 4px 4px 0;
    padding:3px 30px 30px 3px;
    transform:scaleX(0.7) rotate(315deg);
    vertical-align:middle
}
.l-ar .blocks-slider > a.btn.arrow:after{transform:scaleX(0.7) rotate(135deg);}
.blocks-slider > a.btn.arrow:hover{
    background:none;
    color:#373A37;
    opacity:0.7
}
.blocks-slider > a.btn.arrow:hover:after{
    background:none;
    border-color:#373A37;

}

.blocks-container{
    column-gap:15px;
    display:flex;
    flex:1 1 0
}

.blocks-container > div{
    background:#F1F2F2;
    flex:1;
    height:350px;
    max-width:33%;
    padding:58px 20px 20px 28px
}

.blocks-container > div h2{margin:0 0 11px}
.blocks-container > div p{height:44px;margin:0 0 34px}
/*** end of blocks slider section ***/

.image-on-bg{
    position:absolute;
    z-index:1;
}
.image-on-bg .blur-div{
    background:rgba(0,0,0,0.49);
    height:100%;
    position:absolute;
    width:100%;
    z-index:2
}
.image-on-bg img{
    position:relative;
    width:100%;
    z-index:1
}
.image-on-bg + div.par{
    position:relative;
    z-index:2
}

.image-on-bg + div.par *{color:#fff}

/*** wide-video section ***/
.wide-video, .wide-video .image-on-bg{
    height:555px;
    overflow:hidden
}
.wide-video{
    margin:80px 0;
    position:relative
}
.wide-video .image-on-bg{
    position:absolute
}
.wide-video .image-on-bg + div.par{
    align-items:center;
    display:flex;
    height:100%;
    text-align:center
}
.wide-video .image-on-bg + div.par > div{
    flex:1
}

.wide-video .container{max-width:760px}
.wide-video h1{margin:0 0 27px}
.wide-video p{
    font-size:18px;
    line-height:28px;
    margin:0 0 40px
}

.bottom-blocks + .big-ballons{padding-top:36px}
.bottom-blocks + .big-ballons h1{margin:0 0 62px}
/*** end of wide-video section ***/


/*** overlay video container***/
.video-container{
    background-color:rgba(0,0,0,0.79);
    height:100%;
    left:0;
    opacity:0;
    position:fixed;
    top:0;
    transition:all ease 1s;
    width:100%;
    z-index:-1
}
.video-container.on{
    opacity:1;
    z-index:9999
}
.video-container .video-strip{
    bottom:80px;
    left:50%;
    margin:0 0 0 -30%;
    position:fixed;
    top:20px;
    width:60%
}

.video-container .video-strip > video, .video-container .video-strip > iframe{
    background:#000;
    display:block;
    height:100%;
    width:100%
}
.video-container .video-strip .video-container-close{
    background:#000;
    color:#fff;
    content:"X";
    display:block;
    height:45px;
    line-height:45px;
    margin:0 0 0 auto;
    position:relative;
    text-align:center;
    width:50px
}
.video-container .video-strip .video-container-close:after,
.video-container .video-strip .video-container-close:before{
    background:#fff;
    border:1px solid #fff;
    content:"";
    height:0;
    left:50%;
    margin:0 0 0 -10px;
    position:absolute;
    top:50%;
    transform:rotate(-54deg);
    width:20px
}
.video-container .video-strip .video-container-close:before{
    transform:rotate(54deg);
}
/*** end overlay video container***/

/*** helpful-links section ***/
.links-list{
    margin-bottom:148px;
    position:relative
}
.links-list ul{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap
}

.links-list ul li{
    border-bottom:1px solid #373A37;
    column-gap:25px;
    display:flex;
    flex:1;
    flex-basis:50%;
    padding:71px 0
}
/*.links-list ul > li:nth-child(1), .links-list ul > li:nth-child(2){padding:0 0 71px}*/

.links-list ul li > *{
}
.links-list ul li div.pic{
    align-items:center;
    background:#f8f8f8;
    border:1px solid #bebebe;
    display:flex;
    height:144px
}
.links-list ul li div.summary{
    flex:4;
    padding:0 50px 0 0
}
.links-list ul li img{width:150px}

.links-list h2{
    font:normal 22px/30px "AvenirMedium";
    padding:13px 0
}
.l-ar .links-list h2{font-family:"AvenirArabicMedium"}

.links-list p{
    font-size:16px;
    margin:0 0 18px
}
.links-list p[data-cut]{height:44px}



/*** end of helpful-links section ***/

.tabbed-lists-container{margin-bottom:0}
.tabbed-lists{position:relative}

.links-list .tabbed-lists{width:80%}

/*.links-list .tabbed-lists li{border:none}*/

ul.tabbed-list-menu{
    display:block;
    overflow:hidden
}
ul.tabbed-list-menu{
    font-size:20px;
    margin:0 0 48px
}
ul.tabbed-list-menu li{
    border-bottom:1px solid #707070;
    display:block;
    float:left;
    padding:0 40px 12px 0
}



.tab-widget ul.tabbed-list-menu li{padding:0 40px 16px 0}

.l-ar ul.tabbed-list-menu li,
.l-ar .tab-widget ul.tabbed-list-menu li{
    float:right;
    min-height:42px;
    padding:0 0 9px 40px
}

ul.tabbed-list-menu li a.current{
    font-family:"AvenirHeavy";
    text-decoration:none!important
}
.l-ar ul.tabbed-list-menu li a.current{font-family:"AvenirArabicHeavy"}

ul.tabbed-list-menu li a:hover{font-weight:bold}

.links-list .tabbed-lists .tabbed-list ul{display:none}
.links-list .tabbed-lists .tabbed-list ul.current{display:block}
.links-list .tabbed-lists .tabbed-list li{
    border-bottom:1px solid #373A37;
    column-gap:29px;
    flex-basis:100%;
    padding:43px 0 4px
}

.links-list .tabbed-lists .tabbed-list ul > li:nth-child(1), .links-list .tabbed-lists .tabbed-list ul > li:nth-child(2){padding:0 0 4px}

.links-list .tabbed-lists .tabbed-list ul > li:nth-child(2){padding:43px 0 4px}

.links-list .tabbed-lists .tabbed-list ul li img{margin:0 0 20px;width:100%}

.links-list .tabbed-lists ul li div.pic {
    background:none;
    border:none;
    height:auto;
    flex-direction:column;
    flex-wrap:wrap;
    width:200px
}
.links-list .tabbed-lists .tabbed-list .pic p{font:normal 20px/26px "AvenirBook"}
.l-ar .links-list .tabbed-lists .tabbed-list .pic p{font-family:"AvenirArabicBook"}
.links-list .tabbed-lists .tabbed-list p strong{
    display:block;
    font-family:"AvenirHeavy"
}
.l-ar .links-list .tabbed-lists .tabbed-list p strong{font-family:"AvenirArabicHeavy"}

.links-list .tabbed-lists .tabbed-list .summary{}

.tabbed-lists .peak{ /*** we can't manipulate pseudo element :after via js***/
    border-bottom:7px solid #373A37;
    content:"";
    display:block;
    height:0;
    left:0;
    position:absolute;
    top:36px;
    transition:left ease 0.3s;
    width:100px
}
.tab-widget.tabbed-lists .peak{top:40px}

/*** contact us form section ***/
#contact-us-form{
    background:#f1f2f2;
    background:linear-gradient(to right, #f1f2f2 0%,#f1f2f2 49.9%,#ffffff 50%,#ffffff 100%);
    margin:0 0 160px;
    min-height:200px;
    padding:122px 0 100px
}
#contact-us-form fieldset *{font:normal 18px/25px "AvenirRoman"}
.l-ar #contact-us-form fieldset *{font-family:"AvenirArabicBook"}

#contact-us-form .half-parag{column-gap:100px}

#contact-us-form h2{
    font:normal 40px/55px "AvenirBook";
    margin:0 0 13px
}
.l-ar #contact-us-form h2{font-family:"AvenirArabicBook"}

#contact-us-form form label{
    display:block;
    margin:0 0 5px
}
#contact-us-form form{margin:67px 0 0}
#contact-us-form form > fieldset > div{margin:0 0 31px}
#contact-us-form form input, #contact-us-form form select, #contact-us-form form textarea,.cool-select-widget a.btn.arrow.down{
    border:1px solid #BDC3C7;
    font-size:18px;
    height:48px;
    line-height:48px;
    padding:0 16px;
    width:100%
}

.cool-select{display:none}
.cool-select-widget{position:relative}
.cool-select-widget a.btn.arrow.down{
    background:#fff;
    display:block
}
.cool-select-widget a.btn.arrow.down:hover,
.cool-select-widget a.btn.arrow.down.open{background:#373A37;color:#fff}

.cool-select-widget a.btn.arrow.down:after{
    margin:15px 0 0;
    padding:5px;
    transition:all ease 0.2s
}

.cool-select-widget a.btn.arrow.down.open:after{
    border-color:#fff;
    margin:20px 0 0;
    transform:rotate(-135deg);
}
.cool-select-widget a.btn.arrow.down:hover:after{}

.cool-select-widget ul{
    background:#373A37;
    color:#fff;
    height:0;
    overflow:hidden;
    position:absolute;
    transition:all ease 0.2s;
    width:100%;
}
.cool-select-widget ul *{color:#fff}

.cool-select-widget a.open + ul{
    border:1px solid #373A37;
    max-height:280px;
    min-height:200px;
    overflow:auto;
}

.cool-select-widget ul a{
    display:block;
    padding:0 20px
}
#contact-us-form fieldset .cool-select-widget a{line-height:46px}
#contact-us-form fieldset .cool-select-widget ul a{line-height:35px}

#contact-us-form fieldset .cool-select-widget ul a:hover,
#contact-us-form fieldset .cool-select-widget ul a.selected{
    background:#fff;
    color:#373A37
}

#contact-us-form form input#phone{padding:0 16px 0 58px}
.l-ar #contact-us-form form input#phone{padding:0 58px 0 16px}
#contact-us-form form textarea{
    height:160px;
    line-height:24px;
    padding:16px;
    resize:none
}
#contact-details li{
    align-items:flex-start;
    display:flex;
    height:58px;
    margin:0 0 34px
}
#contact-details .phone{
    direction:ltr;
    display:inline-block;
}

#contact-details i{
    background:url("../img/contact-us/contact-us.png") no-repeat 0 2px;
    height:36px;
    width:35px
}

#contact-details i.email{background-position:0 -40px}
#contact-details i.working{background-position:0 -72px}
#contact-details i.ramadan{background-position:0 -110px}
#contact-details p{
    flex:4;
    margin:0 0 0 20px
}
.l-ar #contact-details p{margin:0 20px 0 0}
#contact-details p span{
    display:block;
    font-family:"AvenirHeavy";
    margin:0 0 6px
}
.l-ar #contact-details p span{font-family:"AvenirArabicHeavy"}
#map{margin:99px 0 0}
#map iframe{
    border:1px solid #cecece;
    height:267px;
    margin:0 0 24px;
    width:550px
}
#map p{font-family:"AvenirMedium"}
.l-ar #map p{font-family:"AvenirArabicMedium"}
/*** end of contact us form section ***/


/*** footer section ***/
footer{background:#fafafa}
footer *{
    font:normal 16px/24px "AvenirHeavy"
}
.l-ar footer *{font-family:"AvenirArabicHeavy"}
#footer-top{
    min-height:0;
    padding:49px 0 60px
}
footer img.logo{
    height:auto;
    margin:0 86px 0 0;
    max-width:97px;
    position:absolute
}
.l-ar footer img.logo{margin:0 0 0 86px}

footer ul{
    display:inline-block;
    margin:0 0 0 203px;
    vertical-align:top
}
.l-ar footer ul{margin:0 203px 0 0}
footer ul li{
    display:inline-block;
    margin:0 0 4px;
    vertical-align:top;
    width:49%;
}
footer ul li a{
    display:block;
    line-height:35px;
}
footer .half-parag p{font-family:"AvenirHeavy"}
.l-ar footer .half-parag p{font-family:"AvenirArabicHeavy"}

#footer-bottom{
    background:#373A37;
    min-height:65px;
    overflow:hidden
}
footer #copy-right{
    color:#fff;
    float:right;
    font-weight:bold;
    line-height:65px
}
.l-ar footer #copy-right{float:left}

/*** end footer section ***/

/*#hamburger{
    border-bottom:2px solid #373737;
    border-top:2px solid #373A37;
    display:none;
    float:right;
    height:18px;
    position:relative;
    width:32px
}
#hamburger:before{
    border-top:2px solid #373737;
    content:"";
    height:0;
    position:absolute;
    top:6px;
    width:100%
}*/

#hamburger{

    display:none;
    float:right;
    height:18px;
    position:relative;
    width:32px
}
#hamburger i, #hamburger:before, #hamburger:after{
    border-top:2px solid #373737;
    content:"";
    display:block;
    height:0;
    position:absolute;
    transition:all ease 0.3s;
    width:100%
}

#hamburger i{top:8px}
#hamburger:before{
    top:0;
}

#hamburger:after{
    bottom:0;
}

#change-language.off{display:none}


/*** list-of-downloads-container ***/

.list-of-downloads-container h2,
.list-of-downloads li span{
    font:normal 18px/28px "AvenirHeavy"
}
.l-ar .list-of-downloads-container h2,
.l-ar .list-of-downloads li span{
    font-family:"AvenirArabicHeavy"
}

.list-of-downloads-container h2{margin:0 0 13px}

.list-of-downloads-container p{
    font:normal 16px/22px "AvenirMedium";
    width:75%
}
.l-ar .list-of-downloads-container p{font-family:"AvenirArabicMedium"}

.list-of-downloads{
    background:#373A37;
    margin:46px 0 61px;
    padding:0 30px
}
.list-of-downloads *{color:#fff}
.list-of-downloads li{
    border-top:1px solid #fff;
    padding:23px 0 23px 7px;
    position:relative
}
.list-of-downloads li:first-child{border:none}

.list-of-downloads li span.title{
    display:block;
    margin:0 0 8px
}

.list-of-downloads li .download-link{
    position:absolute;
    right:0;
    top:41px
}
.l-ar .list-of-downloads li .download-link{
    left:0;
    right:auto
}

.list-of-downloads li .download-link span{
    font:normal 16px/22px "AvenirMedium";
    margin:0 22px 0 0
}
.l-ar .list-of-downloads li .download-link span{
    font-family:"AvenirArabicMedium";
    margin:0 0 0 22px
}

.list-of-downloads li .download-link a{
    font:normal 20px/24px "AvenirHeavy"
}
.l-ar .list-of-downloads li .download-link a{font-family:"AvenirArabicHeavy"}
/*** end of list-of-downloads-container***/

/*** contacts-list ***/
.contacts-list{
    background:#f1f2f2;
    margin:50px auto 107px;
    padding:38px 35px 42px
}

.contacts-list h2{
    font:normal 18px/28px "AvenirHeavy";
    margin:0 0 32px
}
.l-ar .contacts-list h2{font-family:"AvenirArabicHeavy"}

.contacts-list ul{margin:20px 0 0}
.contacts-list ul li{margin:0 0 14px}
.contacts-list ul li a:before{
    background:url("../img/contact-us/contact-us.png") no-repeat;
    background-size:22px;
    content:"";
    display:inline-block;
    height:24px;
    margin:0 10px 0 0;
    vertical-align:top;
    width:20px
}
.l-ar .contacts-list ul li a:before{margin:0 0 0 10px}

.contacts-list ul li a.email-link:before{
    background-position:0 -20px;
}
/*** end of contacts-list ***/

/*** media queries ***/
@media  (max-width:1024px){
    header{padding:0 26px}
    header nav{padding:20px 0 0}
    header ul#menu{margin:0}
    h1{font:normal 32px/42px "AvenirBook"}
    .l-ar h1{font-family:"AvenirArabicBook"}

    h2{font:normal 22px/32px "AvenirHeavy"}
    .l-ar h2{font-family:"AvenirArabicHeavy"}

    a.btn, a.btn *, a.btn.black,
    #next-generation ul li a.btn,
    #next-generation ul li a.btn *{font:normal 20px/48px "AvenirHeavy"}
    .l-ar #next-generation ul li a.btn,
    .l-ar #next-generation ul li a.btn *{font-family:"AvenirArabicHeavy"}

    #menu{
        background:#fff;
        display:none;
        left:0;
        padding:0 0 10px;
        position:absolute;
        top:86px;
        width:100%;
        z-index:110
    }

    .open #menu,
    header nav > ul > li,
    header ul li a{display:block}

    .open #menu{
        height:100%;
        position:fixed
    }
    #side-menu{margin:0}
    #side-menu a.btn.black{
        font:normal 15px/36px "AvenirHeavy";
        margin:4px 22px 0 0;
        padding:0 15px
    }
    .l-ar #side-menu a.btn.black{
        font-family:"AvenirArabicHeavy";
        margin:4px 0 0 22px
    }
    #side-menu a.btn.black:after{
        margin-bottom:1px
    }

    a.btn.arrow:after, a.btn.download i span:after{margin-bottom:1px}
    a.btn.arrow.flat:after{margin-bottom:0}

    .open #side-menu{display:none}
    header.container{
        border-color:transparent;
        /*margin:0 26px*/
    }
    #hamburger {
        display:block;
        margin:14px 0 0 10px
    }
    .l-ar #hamburger {
        float:left;
        margin:14px 10px 0 0
    }

    header.open #hamburger i{
        opacity:0
    }

    header.open #hamburger:before{
        top:8px;
        transform:rotate(-45deg);
    }

    header.open #hamburger:after{
        bottom:8px;
        transform:rotate(45deg);
    }

    header ul#menu li{
        max-height:50px;
        transition:
                opacity 0.1s 0.1s,
                max-height 0.1s 0s

    }
    header ul#menu li.off{
        max-height:0;opacity:0;
        overflow:hidden;
        transition:
                opacity 0.1s 0s,
                max-height 0.1s 0.1s;
    }
    header ul#menu li.off *{color:transparent}

    #change-language{
        border-top:1px solid #dbdbdb;
        margin:0 26px 20px
    }
    #change-language a{
        font:normal 30px/47px "AvenirLight";
        padding:0;
        text-align:right
    }
    .l-ar #change-language a{font-family:"AvenirArabicLight"}

    header ul#menu > li > a:after, header ul#menu > li > a.hover:after{margin:0 0 0 6px}
    header ul#menu li a:after,header ul#menu > li > a.hover:after{
        transform:rotate(-45deg)
    }
    header ul#menu li#change-language a:after{display:none}
    header ul#menu > li > a.back{
        display:block;
        position:fixed;
        top:106px;
        width:80px;
        z-index:3
    }
    header ul#menu > li > a.back:after{
        transform:rotate(135deg)
    }
    .l-ar header ul#menu > li > a.back:after{transform:rotate(-45deg)}

    header ul#menu ul a{color:#373A37}
    header ul#menu a + ul{background:#fff;display:none;padding:0;position:static}
    header ul#menu a.hover + ul{display:block;padding:0 0 0 26px}


    #top-slider{margin-top:0;max-height:100000px}
    #top-slider h1, #next-generation h1{
        font:normal 36px/38px "AvenirBook";
        margin:0 0 11px
    }
    .l-ar #top-slider h1, .l-ar #next-generation h1{font-family:"AvenirArabicBook"}
    #top-slider p{font-size:20px;margin:0 0 20px}

    #top-slider ul{display:block;height:auto}
    #top-slider li{
        display:block;
        flex:unset;
        margin:0 0 28px;
        max-width:100000px;
        padding:0 26px
    }

    #top-slider li.open{padding:80px 26px}
    #top-slider li.open .subtitle{font-size:14px;margin:0 0 7px}

    #top-slider li.open div,
    #top-slider li > div{display:inline;margin:0}
    #top-slider .subtitle{
        display:inline;
        line-height:32px;
        margin:0 0 0 10px;
        vertical-align:top;
        width:auto
    }
    #top-slider li.open > span{bottom:3px;position:absolute}
    #top-slider li > div{opacity:1}

    #top-slider .subtitle ~ *{display:none}
    #top-slider li.open .subtitle ~ *{display:inline-block}

    #next-generation{margin:10px 0 0;padding:36px 26px 60px}
    #next-generation h1{margin:40px 0 0}
    #next-generation p{font:normal 18px/40px "AvenirLight";margin:8px 0 0}
    .l-ar #next-generation p{font-family:"AvenirArabicLight"}
    #next-generation ul *{font:normal 24px/35px "AvenirBook"}
    .l-ar #next-generation ul *{font-family:"AvenirArabicBook"}
    #next-generation ul{margin:30px 0 0}


    .half-parag{display:block;min-height:0}
    .half-parag .half{width:auto}
    .half-parag .half, .half-parag .half.par,
    #introducing.half-parag .half + .half.parallax,
    #join-our-team .half-parag .half + .half.parallax,
    #presse-release .half-parag .half + .half.parallax,
    .l-ar .half-parag.parag-to-right .half.par{
        max-width:none;
        padding:40px 0 0;
        width:auto}

    /*.half-parag .half + .half{padding:0 26px 40px}*/
    .half-parag .half:first-child, .l-ar .half-parag .half:first-child{padding:40px 0 0}

    .half-parag.parallax-container .half.par,
    .l-ar .half-parag.parallax-container .half.par{
        max-width:none;
        padding:0

    }
    .half-parag, .l-ar .half-parag{padding:26px}
    #contact-us-form .half-parag,
    #contact-us-form .l-ar .half-parag,
    .bottom-blocks .half-parag,
    .l-ar .bottom-blocks .half-parag{padding:0}

    .half-parag img, .half-parag .parallax img{margin:0}
    .half-parag img.expand{position:static}
    .half-parag.parag-to-right .half.par > div,
    .l-ar .half-parag.parag-to-right .half.par > div{padding:0}

    .contact-us{
        height:auto;
        line-height:normal;
        margin:40px 0 0;
        padding:60px 26px
    }
    .contact-us h2{
        font:normal 26px/40px "AvenirBlack";
        margin:0 10px 20px
    }
    .l-ar .contact-us h2{font-family:"AvenirArabicBlack"}

    #explore-updates h1{
        margin:60px 0 42px;
        padding:0 26px;
        text-align:left;
    }
    #carousel-container, .blocks-slider{
        overflow:hidden;
        margin:0 26px;
    }

    #carousel-container ul.carousel-items{
        display:block;
        margin:0 16px 0 0;
        overflow:hidden;
        width:1028px
    }
    #carousel-container ul.carousel-items li{
        display:inline-block;
        float:left;
        height:462px;
        margin:0 16px 0 0;
        vertical-align:top;
        width:323px
    }
    .l-ar #carousel-container ul.carousel-items,
    .l-ar #carousel-container ul.carousel-items li{margin:0 0 0 16px}
    .l-ar #carousel-container ul.carousel-items li{float:right}
    #carousel-container ul.carousel-items li figure{height:178px}

    ul.carousel-bullets{
        display:block;
        margin:45px auto 0;
        text-align:center
    }
    ul.carousel-bullets li{
        display:inline-block;
        margin:0 6px
    }
    ul.carousel-bullets li a{
        background:#eae7e7;
        border-radius:50%;
        display:block;
        height:17px;
        width:17px
    }
    ul.carousel-bullets li a.current{
        background:#23d3a8
    }


    #join-our-team{margin-top:0}

    #breadcrumbs{
        border-top:2px solid #dbdbdb;
        margin:0 26px 2px;
        padding:0;
    }
    #breadcrumbs *{line-height:78px}
    #breadcrumbs a{margin:0}
    #breadcrumbs a{margin:0}
    #breadcrumbs a:after{margin:0 0 0 4px}

    .top-banner{
        background-position:left -40px!important;
        background-size:150%;
        margin:0;
        padding:58px 26px
    }
    #our-solutions.top-banner{background-size:190%}
    .top-banner h1{font-size:36px}

    .half-parag .parallax.still img.expand{
        height:auto!important;
        width:100%!important
    }
    .half-parag .parallax.still{padding:0}


    .half-parag p{font:normal 18px/30px "AvenirBook";margin:0 0 30px}
    .l-ar .half-parag p{font-family:"AvenirArabicBook"}

    .half-parag .half.par > div{padding:0}

    #contact-details p {
        font-size:15px;
        line-height:24px;
    }

    #message-from-ceo{
        background:url("../img/next-gen/next-gen.jpg") no-repeat;
        background-size:100%;
    }
    #message-from-ceo *{color:#fff}
    #message-from-ceo h1{
        font-size:32px;
        margin:0 0 20px
    }
    #message-from-ceo img{display:none}
    #message-from-ceo .parag-with-pic{padding:66px 28px 49px}
    #message-from-ceo .parag-with-pic div {
        padding:0;
    }
    #message-from-ceo .parag-with-pic p{
        font:normal 16px/22px "AvenirLight";
        margin:0 0 22px;
        padding:0;
        width:90%
    }
    .l-ar #message-from-ceo .parag-with-pic p{font-family:"AvenirArabicLight"}
    #message-from-ceo .parag-with-pic p.sign{
        font:normal 18px/24px "AvenirBook";
        margin:46px 0 0
    }
    .l-ar #message-from-ceo .parag-with-pic p.sign{font-family:"AvenirArabicBook"}
    #message-from-ceo .parag-with-pic p.sign strong{
        margin:0 0 6px;
        padding:0
    }


    a.btn.play{
        height:55px;
        width:55px
    }
    a.btn.play:after{
        border-top:14px solid transparent;
        border-bottom:14px solid transparent;
        border-left:16px solid #fff;
        margin:11px auto 0 20px
    }

    .wide-video, .wide-video .image-on-bg{height:414px}
    .wide-video{margin:72px 0 20px}
    .wide-video p{font-size:16px}

    .wide-video .image-on-bg + div.par{padding:0 28px}

    .video-container .video-strip{
        bottom:30%;
        left:10px;
        margin:0;
        position:fixed;
        right:10px;
        top:10%;
        width:auto;
    }

    .image-on-bg img{height:100%;width:auto}
    .image-on-bg + div.par{padding:0 26px}

    .list-of-downloads-container{padding:26px 0}
    .list-of-downloads-container h2,
    .list-of-downloads-container p{padding:0 26px;width:auto}

    .list-of-downloads{margin:40px 0}
    .list-of-downloads p{padding:0}
    .list-of-downloads li .download-link{
        margin:20px 0 10px;
        position:static
    }
    .contacts-list{margin:20px 0 0}


    .big-ballons{padding:20px 26px 0}
    .big-ballons h1{margin:0 0 40px}
    .big-ballons ul{display:block}
    .big-ballons ul li{margin:0 0 43px}
    .big-ballons li a figure{
        height:108px;
        margin:0 auto 22px;
        padding:4px 0 0;
        width:108px
    }

    .big-ballons li a figure img{width:54px}
    .big-ballons li p{font-size:18px}

    #presse-release{background:#f1f2f2;margin:40px 0}

    .paginator{
        height:54px;
        margin:40px auto 60px;
        width:362px;
    }
    .paginator li{
        font:bold 12px/36px "AvenirHeavy";
        height:36px;
        margin:0 5px;
        width:36px
    }
    .l-ar .paginator li{font-family:"AvenirArabicHeavy"}
    .paginator li a{
        height:100%;
    }

    .paginator a.btn.arrow:after, .l-ar .paginator a.btn.arrow:after{margin:0 0 5px -5px;padding:5px}

    #contact-us-form{
        background:none;
        margin:0 0 40px;
        padding:0
    }
    #contact-us-form form{margin:27px 0 0}
    #contact-us-form h2{font-size:36px}
    #contact-us-form .half-parag > .half{padding:26px}
    #contact-us-form .half-parag > .half:first-child{
        background:#F1F2F2;
        padding:26px
    }



    #map{margin:60px 0 0}
    #map iframe{
        width:100%
    }

    .iti-mobile .iti--container{
        bottom:0!important;
        left:0!important;
        right:0!important;
        top:0!important
    }

    .links-list{margin-bottom:0;padding:0 26px 40px}
    .links-list h2{
        font-size:16px;
        font-weight:bold;
        padding:12px 0 0
    }
    .links-list p[data-cut]{height:auto;margin:0 0 10px}
    .links-list a.btn.flat{font-size:16px}
    .links-list ul > li, .links-list ul > li:nth-child(1), .links-list ul > li:nth-child(2){padding:40px 0}

    .links-list ul li{display:block;flex-basis:100%}
    .links-list ul li div.summary{padding:0}
    .links-list ul li div.pic{
        justify-content:center
    }

    .links-list .tabbed-lists{margin:40px 0 0;width:auto}


    .links-list .tabbed-lists ul li div.pic{width:100%}

    .links-list .tabbed-lists ul.tabbed-list-menu{margin:0 0 30px}



    .links-list .tabbed-lists ul.tabbed-list-menu li{padding:0 10px 12px 0;width:50%}
    .l-ar .links-list .tabbed-lists ul.tabbed-list-menu li{padding:0 0 12px 10px}

    .tabbed-lists ul.tabbed-list-menu li a{font-size:14px}

    ul.tabbed-list-menu{
        margin:16px 0 0;
        padding:0 0 0 26px
    }
    .l-ar ul.tabbed-list-menu{padding:0 26px 0 0}
    .links-list ul.tabbed-list-menu{padding:0}

    .links-list .tabbed-lists .tabbed-list li{padding:42px 0}

    .tabs-contents{margin:24px 0 0}
    .tab-widget ul.tabbed-list-menu li{padding:0 40px 9px 0}
    .l-ar ul.tabbed-list-menu li, .l-ar .tab-widget ul.tabbed-list-menu li{min-height:0}
    .tab-widget.tabbed-lists .peak{top:49px}

    .tab-widget.tabbed-lists .tabs-contents p{padding:0 0 29px}

    .links-list .tabbed-lists ul li div.pic{
        align-items:center;
        display:flex;
        flex-direction:unset;
        flex-wrap:unset;
    }

    .links-list .tabbed-lists p{font:normal 18px/30px "AvenirBook"}
    .l-ar .links-list .tabbed-lists p{font-family:"AvenirArabicBook"}

    links-list .tabbed-lists p, links-list .tabbed-lists img{
        display:inline-block
    }
    .links-list .tabbed-lists .tabbed-list ul li img{
        float:left;
        margin:0 15px 40px 0;
        width:136px
    }
    .l-ar .links-list .tabbed-lists .tabbed-list ul li img{margin:0 0 40px 15px}

   /* .tabbed-lists .peak{top:76px}*/

    article.container{
        margin-bottom:69px;
        padding:0 26px
    }
    article .parag{padding:0;width:auto}
    article h1{line-height:38px}
    article p{
        font:normal 18px/28px "AvenirBook";
        margin:0 0 28px
    }
    .l-ar article p{font-family:"AvenirArabicBook"}
    article span.date {
        font-size:18px;
        margin:55px 0 40px;
    }

    aside, .l-ar aside{
        float:none;
        width:100%
    }
    aside .social-container{margin:20px 0}
    aside h3.title{margin:0 0 7px}
    aside .social-container li{margin:0 27px 0 0}

    #all-media-centre h1,
    #all-media-centre .tabs{padding:0 26px}
    #all-media-centre h1{font-size:26px}

    .tab-widget .tabs-contents .current > div{padding:37px 26px 0}

    .tab-widget a.btn.negative{color:#373737}
    .tab-widget a.btn.download.negative *,
    .tab-widget a.btn.download.negative :after,
    .tab-widget a.btn.download.grey:hover *,
    .tab-widget a.btn.download.grey:hover :after{border-color:#373737;color:#373737}
    .tab-widget a.btn.download.negative i span:before,
    .tab-widget a.btn.download.grey:hover i span:before{background:#373A37}
    .tab-widget .date{margin:0}

    .tabs-contents .current > div.current-page{background:#f1f2f2;display:block;margin:0 0 20px}
    .tabs-contents .current *{color:#373A37}

    .l-ar .tabs-contents span{padding:0}
    .tabs-contents .parag span{padding:0 32px 0 0}
    .l-ar .tabs-contents .parag span{padding:0 0 0 32px}

    .tabs-contents .current{
        background:transparent;
        display:block
    }
    .tabs-contents ul.downloads{
        margin:18px 0 0;
        padding:0 0 36px
    }
    .tabs-contents ul.downloads li{margin:0 36px 0 0}
    .l-ar .tabs-contents ul.downloads li{margin:0 0 0 36px}

    .tabs-contents ul.downloads li a{
        line-height:36px;
        padding:0
    }

    .blocks-slider-container{
        margin:0 26px
    }
    .blocks-slider-container h1{margin:0 0 20px}
    #other-news .blocks-slider-container h1{margin:0 0 14px}

    .blocks-slider{
        display:block;
        margin:0 0 20px;
        overflow:hidden;
        padding:0;
    }
    .blocks-slider > a.btn.arrow{margin:0 0 80px}
    .blocks-slider > a.btn.arrow{display:none}
    .blocks-container{
        display:block;
        overflow:hidden
    }
    .blocks-container > div{
        float:left;
        margin:0 26px 20px 0;
        max-width:none
    }
    .l-ar .blocks-container > div{float:right;margin:0 0 20px 26px}

    .blocks-slider-container ul.carousel-bullets{margin:0 auto 40px}

    .bottom-blocks .parag h2{
        font:normal 32px/42px "AvenirBook";
        margin:0 0 9px
    }
    .l-ar .bottom-blocks .parag h2{font-family:"AvenirArabicBook"}
    .bottom-blocks .parag p{
        height:auto;
        line-height:28px;
        margin:0 0 19px
    }

    #wide-video a.btn,
    .bottom-blocks a.btn{
        font:normal 16px/37px "AvenirHeavy"
    }
    .l-ar #wide-video a.btn,
    .l-ar .bottom-blocks a.btn{font-family:"AvenirArabicHeavy"}

    .bottom-blocks .btn.arrow{margin:0 0 34px}
    .bottom-blocks{margin:0 0 60px;padding:0}
    .bottom-blocks .parag{padding:50px 45px 28px}

    .bottom-blocks .half-parag .half,
    .bottom-blocks .half-parag .half.par{
        margin:0 0 20px;
        min-height:292px;
        padding:0
    }

    .l-ar .bottom-blocks .half-parag img{
        width:130%
    }

    .parag-with-pic{display:block;padding:40px}
    .parag-with-pic h1{font-size:26px;margin:0 0 20px}

    .parag-with-pic span.quote{display:none;font-size:40px}

    .parag-with-pic p {
        font:normal 16px/30px "AvenirBook";
        margin:0 0 30px;
        padding:0;
    }
    .l-ar .parag-with-pic p{font-family:"AvenirArabicBook"}

    .tab-widget{margin:0}

    #what-we-do{
        height:auto;
        margin:40px 0 0;
        overflow:hidden;
        padding:0 26px 58px
    }
    #what-we-do div.parag-inline{padding:48px 0 36px}
    #what-we-do p{padding:0}
    #what-we-do ul{
        float:none;
        width:100%
    }
    #what-we-do ul li{
        height:auto;
        margin:0 0 16px;
        overflow:hidden;
        width:50%;
    }
    #what-we-do ul li:nth-child(1){padding:0 8px 0 0}
    #what-we-do ul li:nth-child(2){padding:0 0 0 8px}
    #what-we-do ul li:nth-child(3){margin:0 25%;padding:0 4px}

    #what-we-do figure{
        max-height:224px;
        position:relative;
        top:unset!important;
        width:100%;
    }
    #what-we-do figure img{max-width:100%}
    #what-we-do figcaption{
        font:normal 18px/26px "AvenirMedium";
        padding:0 6px 0 17px;
    }
    .l-ar #what-we-do figcaption{
        font-family:"AvenirArabicMedium";
        padding:0 17px 0 6px
    }

    .half-parag .half.par.less-margin-top{padding-top:40px}

    .contact-us.two-rows{padding:40px 0}
    .contact-us hgroup, .l-ar .contact-us hgroup{
        margin:0 0 26px;
        padding:0 26px;
        text-align:center;
    }

    .short-download-list{width:68%}
    .short-download-list a.btn.download.grey{font:normal 18px/42px "AvenirHeavy"}
    .l-ar .short-download-list a.btn.download.grey{font-family:"AvenirArabicHeavy"}

    #footer-top{padding:0}
    #footer-top.half-parag .half:first-child{padding:40px 26px 0}

    #footer-top.half-parag .half:first-child ul{margin:20px 0 0}
    footer img.logo{position:static}
    footer ul{margin:0}
    footer .align-to-right{text-align:left}
    .l-ar footer .align-to-right{text-align:right}
    footer .social-container li{margin:0 16px 0 0}
    .l-ar footer .social-container li{margin:0 0 0 16px}
    footer .half-parag .social-container p{margin:0 0 8px}

    footer .social-container{margin:40px 26px}
    footer #copy-right{float:none;padding:0 0 0 26px}
} /*** end of max-width:1024 ***/


/*** portal default css rewriting ***/
body .wpthemeControl{margin:0}
/*** end portal default css rewriting ***/

/*** flags css***/
.iti {
    position:relative;
    display:inline-block;width:100% }
.iti * {
    box-sizing:border-box;
    -moz-box-sizing:border-box; }
.iti__hide {
    display:none; }
.iti__v-hide {
    visibility:hidden; }
.iti input, .iti input[type=text], .iti input[type=tel] {
    position:relative;
    z-index:0;
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-right:36px;
    margin-right:0; }
.iti__flag-container {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    padding:1px;
z-index:2}
.iti__selected-flag {
    background:#fff;
    z-index:1;
    position:relative;
    display:flex;
    align-items:center;
    height:100%;
    padding:0 6px 0 8px; }
.l-ar .iti__selected-flag{padding:0 8px 0 6px}
.iti__arrow {
    margin-left:6px;
    width:0;
    height:0;
    border-left:3px solid transparent;
    border-right:3px solid transparent;
    border-top:4px solid #555; }
.iti__arrow--up {
    border-top:none;
    border-bottom:4px solid #555; }
.iti__country-list {
    position:absolute;
    z-index:2;
    list-style:none;
    text-align:left;
    padding:0;
    margin:0 0 0 -1px;
    box-shadow:1px 1px 4px rgba(0, 0, 0, 0.2);
    background-color:white;
    border:1px solid #CCC;
    white-space:nowrap;
    max-height:200px;
    overflow-y:scroll;
    -webkit-overflow-scrolling:touch; }
.iti__country-list--dropup {
    bottom:100%;
    margin-bottom:-1px; }
@media (max-width:500px) {
    .iti__country-list {
        white-space:normal; } }
.iti__flag-box {
    display:inline-block;
    width:20px; }
.iti__divider {
    padding-bottom:5px;
    margin-bottom:5px;
    border-bottom:1px solid #CCC; }
.iti__country {
    padding:5px 10px;
    outline:none; }
.iti__dial-code {
    color:#999; }
.iti__country.iti__highlight {
    background-color:rgba(0, 0, 0, 0.05); }
.iti__flag-box, .iti__country-name, .iti__dial-code {
    vertical-align:middle; }
.iti__flag-box, .iti__country-name {
    margin-right:6px; }
.iti--allow-dropdown input, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel] {
    padding-right:6px;
    padding-left:52px;
    margin-left:0; }
.iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container {
    right:auto;
    left:0; }
.l-ar .iti--allow-dropdown .iti__flag-container, .l-ar .iti--separate-dial-code .iti__flag-container{
    left:auto;
    right:0
}
.iti--allow-dropdown .iti__flag-container{border-right:1px solid #BDC3C7}
.l-ar .iti--allow-dropdown .iti__flag-container{border-left:1px solid #BDC3C7;border-right:none}
.iti--allow-dropdown .iti__flag-container:hover {
    cursor:pointer; }
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color:rgba(0, 0, 0, 0.05); }
.iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
.iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
    cursor:default; }
.iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
.iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
    background-color:transparent; }
.iti--separate-dial-code .iti__selected-flag {
    background-color:rgba(0, 0, 0, 0.05); }
.iti--separate-dial-code .iti__selected-dial-code {
    margin-left:6px; }
.iti--container {
    position:absolute;
    top:-1000px;
    left:-1000px;
    z-index:1060;
    padding:1px; }
.iti--container:hover {
    cursor:pointer; }

.iti-mobile .iti--container {
    top:30px;
    bottom:30px;
    left:30px;
    right:30px;
    position:fixed; }

.iti-mobile .iti__country-list {
    max-height:100%;
    width:100%; }

.iti-mobile .iti__country {
    padding:10px 10px;
    line-height:1.5em; }

.iti__flag {
    width:20px; }
.iti__flag.iti__be {
    width:18px; }
.iti__flag.iti__ch {
    width:15px; }
.iti__flag.iti__mc {
    width:19px; }
.iti__flag.iti__ne {
    width:18px; }
.iti__flag.iti__np {
    width:13px; }
.iti__flag.iti__va {
    width:15px; }
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi) {
    .iti__flag {
        background-size:5652px 15px; } }
.iti__flag.iti__ac {
    height:10px;
    background-position:0px 0px; }
.iti__flag.iti__ad {
    height:14px;
    background-position:-22px 0px; }
.iti__flag.iti__ae {
    height:10px;
    background-position:-44px 0px; }
.iti__flag.iti__af {
    height:14px;
    background-position:-66px 0px; }
.iti__flag.iti__ag {
    height:14px;
    background-position:-88px 0px; }
.iti__flag.iti__ai {
    height:10px;
    background-position:-110px 0px; }
.iti__flag.iti__al {
    height:15px;
    background-position:-132px 0px; }
.iti__flag.iti__am {
    height:10px;
    background-position:-154px 0px; }
.iti__flag.iti__ao {
    height:14px;
    background-position:-176px 0px; }
.iti__flag.iti__aq {
    height:14px;
    background-position:-198px 0px; }
.iti__flag.iti__ar {
    height:13px;
    background-position:-220px 0px; }
.iti__flag.iti__as {
    height:10px;
    background-position:-242px 0px; }
.iti__flag.iti__at {
    height:14px;
    background-position:-264px 0px; }
.iti__flag.iti__au {
    height:10px;
    background-position:-286px 0px; }
.iti__flag.iti__aw {
    height:14px;
    background-position:-308px 0px; }
.iti__flag.iti__ax {
    height:13px;
    background-position:-330px 0px; }
.iti__flag.iti__az {
    height:10px;
    background-position:-352px 0px; }
.iti__flag.iti__ba {
    height:10px;
    background-position:-374px 0px; }
.iti__flag.iti__bb {
    height:14px;
    background-position:-396px 0px; }
.iti__flag.iti__bd {
    height:12px;
    background-position:-418px 0px; }
.iti__flag.iti__be {
    height:15px;
    background-position:-440px 0px; }
.iti__flag.iti__bf {
    height:14px;
    background-position:-460px 0px; }
.iti__flag.iti__bg {
    height:12px;
    background-position:-482px 0px; }
.iti__flag.iti__bh {
    height:12px;
    background-position:-504px 0px; }
.iti__flag.iti__bi {
    height:12px;
    background-position:-526px 0px; }
.iti__flag.iti__bj {
    height:14px;
    background-position:-548px 0px; }
.iti__flag.iti__bl {
    height:14px;
    background-position:-570px 0px; }
.iti__flag.iti__bm {
    height:10px;
    background-position:-592px 0px; }
.iti__flag.iti__bn {
    height:10px;
    background-position:-614px 0px; }
.iti__flag.iti__bo {
    height:14px;
    background-position:-636px 0px; }
.iti__flag.iti__bq {
    height:14px;
    background-position:-658px 0px; }
.iti__flag.iti__br {
    height:14px;
    background-position:-680px 0px; }
.iti__flag.iti__bs {
    height:10px;
    background-position:-702px 0px; }
.iti__flag.iti__bt {
    height:14px;
    background-position:-724px 0px; }
.iti__flag.iti__bv {
    height:15px;
    background-position:-746px 0px; }
.iti__flag.iti__bw {
    height:14px;
    background-position:-768px 0px; }
.iti__flag.iti__by {
    height:10px;
    background-position:-790px 0px; }
.iti__flag.iti__bz {
    height:14px;
    background-position:-812px 0px; }
.iti__flag.iti__ca {
    height:10px;
    background-position:-834px 0px; }
.iti__flag.iti__cc {
    height:10px;
    background-position:-856px 0px; }
.iti__flag.iti__cd {
    height:15px;
    background-position:-878px 0px; }
.iti__flag.iti__cf {
    height:14px;
    background-position:-900px 0px; }
.iti__flag.iti__cg {
    height:14px;
    background-position:-922px 0px; }
.iti__flag.iti__ch {
    height:15px;
    background-position:-944px 0px; }
.iti__flag.iti__ci {
    height:14px;
    background-position:-961px 0px; }
.iti__flag.iti__ck {
    height:10px;
    background-position:-983px 0px; }
.iti__flag.iti__cl {
    height:14px;
    background-position:-1005px 0px; }
.iti__flag.iti__cm {
    height:14px;
    background-position:-1027px 0px; }
.iti__flag.iti__cn {
    height:14px;
    background-position:-1049px 0px; }
.iti__flag.iti__co {
    height:14px;
    background-position:-1071px 0px; }
.iti__flag.iti__cp {
    height:14px;
    background-position:-1093px 0px; }
.iti__flag.iti__cr {
    height:12px;
    background-position:-1115px 0px; }
.iti__flag.iti__cu {
    height:10px;
    background-position:-1137px 0px; }
.iti__flag.iti__cv {
    height:12px;
    background-position:-1159px 0px; }
.iti__flag.iti__cw {
    height:14px;
    background-position:-1181px 0px; }
.iti__flag.iti__cx {
    height:10px;
    background-position:-1203px 0px; }
.iti__flag.iti__cy {
    height:14px;
    background-position:-1225px 0px; }
.iti__flag.iti__cz {
    height:14px;
    background-position:-1247px 0px; }
.iti__flag.iti__de {
    height:12px;
    background-position:-1269px 0px; }
.iti__flag.iti__dg {
    height:10px;
    background-position:-1291px 0px; }
.iti__flag.iti__dj {
    height:14px;
    background-position:-1313px 0px; }
.iti__flag.iti__dk {
    height:15px;
    background-position:-1335px 0px; }
.iti__flag.iti__dm {
    height:10px;
    background-position:-1357px 0px; }
.iti__flag.iti__do {
    height:14px;
    background-position:-1379px 0px; }
.iti__flag.iti__dz {
    height:14px;
    background-position:-1401px 0px; }
.iti__flag.iti__ea {
    height:14px;
    background-position:-1423px 0px; }
.iti__flag.iti__ec {
    height:14px;
    background-position:-1445px 0px; }
.iti__flag.iti__ee {
    height:13px;
    background-position:-1467px 0px; }
.iti__flag.iti__eg {
    height:14px;
    background-position:-1489px 0px; }
.iti__flag.iti__eh {
    height:10px;
    background-position:-1511px 0px; }
.iti__flag.iti__er {
    height:10px;
    background-position:-1533px 0px; }
.iti__flag.iti__es {
    height:14px;
    background-position:-1555px 0px; }
.iti__flag.iti__et {
    height:10px;
    background-position:-1577px 0px; }
.iti__flag.iti__eu {
    height:14px;
    background-position:-1599px 0px; }
.iti__flag.iti__fi {
    height:12px;
    background-position:-1621px 0px; }
.iti__flag.iti__fj {
    height:10px;
    background-position:-1643px 0px; }
.iti__flag.iti__fk {
    height:10px;
    background-position:-1665px 0px; }
.iti__flag.iti__fm {
    height:11px;
    background-position:-1687px 0px; }
.iti__flag.iti__fo {
    height:15px;
    background-position:-1709px 0px; }
.iti__flag.iti__fr {
    height:14px;
    background-position:-1731px 0px; }
.iti__flag.iti__ga {
    height:15px;
    background-position:-1753px 0px; }
.iti__flag.iti__gb {
    height:10px;
    background-position:-1775px 0px; }
.iti__flag.iti__gd {
    height:12px;
    background-position:-1797px 0px; }
.iti__flag.iti__ge {
    height:14px;
    background-position:-1819px 0px; }
.iti__flag.iti__gf {
    height:14px;
    background-position:-1841px 0px; }
.iti__flag.iti__gg {
    height:14px;
    background-position:-1863px 0px; }
.iti__flag.iti__gh {
    height:14px;
    background-position:-1885px 0px; }
.iti__flag.iti__gi {
    height:10px;
    background-position:-1907px 0px; }
.iti__flag.iti__gl {
    height:14px;
    background-position:-1929px 0px; }
.iti__flag.iti__gm {
    height:14px;
    background-position:-1951px 0px; }
.iti__flag.iti__gn {
    height:14px;
    background-position:-1973px 0px; }
.iti__flag.iti__gp {
    height:14px;
    background-position:-1995px 0px; }
.iti__flag.iti__gq {
    height:14px;
    background-position:-2017px 0px; }
.iti__flag.iti__gr {
    height:14px;
    background-position:-2039px 0px; }
.iti__flag.iti__gs {
    height:10px;
    background-position:-2061px 0px; }
.iti__flag.iti__gt {
    height:13px;
    background-position:-2083px 0px; }
.iti__flag.iti__gu {
    height:11px;
    background-position:-2105px 0px; }
.iti__flag.iti__gw {
    height:10px;
    background-position:-2127px 0px; }
.iti__flag.iti__gy {
    height:12px;
    background-position:-2149px 0px; }
.iti__flag.iti__hk {
    height:14px;
    background-position:-2171px 0px; }
.iti__flag.iti__hm {
    height:10px;
    background-position:-2193px 0px; }
.iti__flag.iti__hn {
    height:10px;
    background-position:-2215px 0px; }
.iti__flag.iti__hr {
    height:10px;
    background-position:-2237px 0px; }
.iti__flag.iti__ht {
    height:12px;
    background-position:-2259px 0px; }
.iti__flag.iti__hu {
    height:10px;
    background-position:-2281px 0px; }
.iti__flag.iti__ic {
    height:14px;
    background-position:-2303px 0px; }
.iti__flag.iti__id {
    height:14px;
    background-position:-2325px 0px; }
.iti__flag.iti__ie {
    height:10px;
    background-position:-2347px 0px; }
.iti__flag.iti__il {
    height:15px;
    background-position:-2369px 0px; }
.iti__flag.iti__im {
    height:10px;
    background-position:-2391px 0px; }
.iti__flag.iti__in {
    height:14px;
    background-position:-2413px 0px; }
.iti__flag.iti__io {
    height:10px;
    background-position:-2435px 0px; }
.iti__flag.iti__iq {
    height:14px;
    background-position:-2457px 0px; }
.iti__flag.iti__ir {
    height:12px;
    background-position:-2479px 0px; }
.iti__flag.iti__is {
    height:15px;
    background-position:-2501px 0px; }
.iti__flag.iti__it {
    height:14px;
    background-position:-2523px 0px; }
.iti__flag.iti__je {
    height:12px;
    background-position:-2545px 0px; }
.iti__flag.iti__jm {
    height:10px;
    background-position:-2567px 0px; }
.iti__flag.iti__jo {
    height:10px;
    background-position:-2589px 0px; }
.iti__flag.iti__jp {
    height:14px;
    background-position:-2611px 0px; }
.iti__flag.iti__ke {
    height:14px;
    background-position:-2633px 0px; }
.iti__flag.iti__kg {
    height:12px;
    background-position:-2655px 0px; }
.iti__flag.iti__kh {
    height:13px;
    background-position:-2677px 0px; }
.iti__flag.iti__ki {
    height:10px;
    background-position:-2699px 0px; }
.iti__flag.iti__km {
    height:12px;
    background-position:-2721px 0px; }
.iti__flag.iti__kn {
    height:14px;
    background-position:-2743px 0px; }
.iti__flag.iti__kp {
    height:10px;
    background-position:-2765px 0px; }
.iti__flag.iti__kr {
    height:14px;
    background-position:-2787px 0px; }
.iti__flag.iti__kw {
    height:10px;
    background-position:-2809px 0px; }
.iti__flag.iti__ky {
    height:10px;
    background-position:-2831px 0px; }
.iti__flag.iti__kz {
    height:10px;
    background-position:-2853px 0px; }
.iti__flag.iti__la {
    height:14px;
    background-position:-2875px 0px; }
.iti__flag.iti__lb {
    height:14px;
    background-position:-2897px 0px; }
.iti__flag.iti__lc {
    height:10px;
    background-position:-2919px 0px; }
.iti__flag.iti__li {
    height:12px;
    background-position:-2941px 0px; }
.iti__flag.iti__lk {
    height:10px;
    background-position:-2963px 0px; }
.iti__flag.iti__lr {
    height:11px;
    background-position:-2985px 0px; }
.iti__flag.iti__ls {
    height:14px;
    background-position:-3007px 0px; }
.iti__flag.iti__lt {
    height:12px;
    background-position:-3029px 0px; }
.iti__flag.iti__lu {
    height:12px;
    background-position:-3051px 0px; }
.iti__flag.iti__lv {
    height:10px;
    background-position:-3073px 0px; }
.iti__flag.iti__ly {
    height:10px;
    background-position:-3095px 0px; }
.iti__flag.iti__ma {
    height:14px;
    background-position:-3117px 0px; }
.iti__flag.iti__mc {
    height:15px;
    background-position:-3139px 0px; }
.iti__flag.iti__md {
    height:10px;
    background-position:-3160px 0px; }
.iti__flag.iti__me {
    height:10px;
    background-position:-3182px 0px; }
.iti__flag.iti__mf {
    height:14px;
    background-position:-3204px 0px; }
.iti__flag.iti__mg {
    height:14px;
    background-position:-3226px 0px; }
.iti__flag.iti__mh {
    height:11px;
    background-position:-3248px 0px; }
.iti__flag.iti__mk {
    height:10px;
    background-position:-3270px 0px; }
.iti__flag.iti__ml {
    height:14px;
    background-position:-3292px 0px; }
.iti__flag.iti__mm {
    height:14px;
    background-position:-3314px 0px; }
.iti__flag.iti__mn {
    height:10px;
    background-position:-3336px 0px; }
.iti__flag.iti__mo {
    height:14px;
    background-position:-3358px 0px; }
.iti__flag.iti__mp {
    height:10px;
    background-position:-3380px 0px; }
.iti__flag.iti__mq {
    height:14px;
    background-position:-3402px 0px; }
.iti__flag.iti__mr {
    height:14px;
    background-position:-3424px 0px; }
.iti__flag.iti__ms {
    height:10px;
    background-position:-3446px 0px; }
.iti__flag.iti__mt {
    height:14px;
    background-position:-3468px 0px; }
.iti__flag.iti__mu {
    height:14px;
    background-position:-3490px 0px; }
.iti__flag.iti__mv {
    height:14px;
    background-position:-3512px 0px; }
.iti__flag.iti__mw {
    height:14px;
    background-position:-3534px 0px; }
.iti__flag.iti__mx {
    height:12px;
    background-position:-3556px 0px; }
.iti__flag.iti__my {
    height:10px;
    background-position:-3578px 0px; }
.iti__flag.iti__mz {
    height:14px;
    background-position:-3600px 0px; }
.iti__flag.iti__na {
    height:14px;
    background-position:-3622px 0px; }
.iti__flag.iti__nc {
    height:10px;
    background-position:-3644px 0px; }
.iti__flag.iti__ne {
    height:15px;
    background-position:-3666px 0px; }
.iti__flag.iti__nf {
    height:10px;
    background-position:-3686px 0px; }
.iti__flag.iti__ng {
    height:10px;
    background-position:-3708px 0px; }
.iti__flag.iti__ni {
    height:12px;
    background-position:-3730px 0px; }
.iti__flag.iti__nl {
    height:14px;
    background-position:-3752px 0px; }
.iti__flag.iti__no {
    height:15px;
    background-position:-3774px 0px; }
.iti__flag.iti__np {
    height:15px;
    background-position:-3796px 0px; }
.iti__flag.iti__nr {
    height:10px;
    background-position:-3811px 0px; }
.iti__flag.iti__nu {
    height:10px;
    background-position:-3833px 0px; }
.iti__flag.iti__nz {
    height:10px;
    background-position:-3855px 0px; }
.iti__flag.iti__om {
    height:10px;
    background-position:-3877px 0px; }
.iti__flag.iti__pa {
    height:14px;
    background-position:-3899px 0px; }
.iti__flag.iti__pe {
    height:14px;
    background-position:-3921px 0px; }
.iti__flag.iti__pf {
    height:14px;
    background-position:-3943px 0px; }
.iti__flag.iti__pg {
    height:15px;
    background-position:-3965px 0px; }
.iti__flag.iti__ph {
    height:10px;
    background-position:-3987px 0px; }
.iti__flag.iti__pk {
    height:14px;
    background-position:-4009px 0px; }
.iti__flag.iti__pl {
    height:13px;
    background-position:-4031px 0px; }
.iti__flag.iti__pm {
    height:14px;
    background-position:-4053px 0px; }
.iti__flag.iti__pn {
    height:10px;
    background-position:-4075px 0px; }
.iti__flag.iti__pr {
    height:14px;
    background-position:-4097px 0px; }
.iti__flag.iti__ps {
    height:10px;
    background-position:-4119px 0px; }
.iti__flag.iti__pt {
    height:14px;
    background-position:-4141px 0px; }
.iti__flag.iti__pw {
    height:13px;
    background-position:-4163px 0px; }
.iti__flag.iti__py {
    height:11px;
    background-position:-4185px 0px; }
.iti__flag.iti__qa {
    height:8px;
    background-position:-4207px 0px; }
.iti__flag.iti__re {
    height:14px;
    background-position:-4229px 0px; }
.iti__flag.iti__ro {
    height:14px;
    background-position:-4251px 0px; }
.iti__flag.iti__rs {
    height:14px;
    background-position:-4273px 0px; }
.iti__flag.iti__ru {
    height:14px;
    background-position:-4295px 0px; }
.iti__flag.iti__rw {
    height:14px;
    background-position:-4317px 0px; }
.iti__flag.iti__sa {
    height:14px;
    background-position:-4339px 0px; }
.iti__flag.iti__sb {
    height:10px;
    background-position:-4361px 0px; }
.iti__flag.iti__sc {
    height:10px;
    background-position:-4383px 0px; }
.iti__flag.iti__sd {
    height:10px;
    background-position:-4405px 0px; }
.iti__flag.iti__se {
    height:13px;
    background-position:-4427px 0px; }
.iti__flag.iti__sg {
    height:14px;
    background-position:-4449px 0px; }
.iti__flag.iti__sh {
    height:10px;
    background-position:-4471px 0px; }
.iti__flag.iti__si {
    height:10px;
    background-position:-4493px 0px; }
.iti__flag.iti__sj {
    height:15px;
    background-position:-4515px 0px; }
.iti__flag.iti__sk {
    height:14px;
    background-position:-4537px 0px; }
.iti__flag.iti__sl {
    height:14px;
    background-position:-4559px 0px; }
.iti__flag.iti__sm {
    height:15px;
    background-position:-4581px 0px; }
.iti__flag.iti__sn {
    height:14px;
    background-position:-4603px 0px; }
.iti__flag.iti__so {
    height:14px;
    background-position:-4625px 0px; }
.iti__flag.iti__sr {
    height:14px;
    background-position:-4647px 0px; }
.iti__flag.iti__ss {
    height:10px;
    background-position:-4669px 0px; }
.iti__flag.iti__st {
    height:10px;
    background-position:-4691px 0px; }
.iti__flag.iti__sv {
    height:12px;
    background-position:-4713px 0px; }
.iti__flag.iti__sx {
    height:14px;
    background-position:-4735px 0px; }
.iti__flag.iti__sy {
    height:14px;
    background-position:-4757px 0px; }
.iti__flag.iti__sz {
    height:14px;
    background-position:-4779px 0px; }
.iti__flag.iti__ta {
    height:10px;
    background-position:-4801px 0px; }
.iti__flag.iti__tc {
    height:10px;
    background-position:-4823px 0px; }
.iti__flag.iti__td {
    height:14px;
    background-position:-4845px 0px; }
.iti__flag.iti__tf {
    height:14px;
    background-position:-4867px 0px; }
.iti__flag.iti__tg {
    height:13px;
    background-position:-4889px 0px; }
.iti__flag.iti__th {
    height:14px;
    background-position:-4911px 0px; }
.iti__flag.iti__tj {
    height:10px;
    background-position:-4933px 0px; }
.iti__flag.iti__tk {
    height:10px;
    background-position:-4955px 0px; }
.iti__flag.iti__tl {
    height:10px;
    background-position:-4977px 0px; }
.iti__flag.iti__tm {
    height:14px;
    background-position:-4999px 0px; }
.iti__flag.iti__tn {
    height:14px;
    background-position:-5021px 0px; }
.iti__flag.iti__to {
    height:10px;
    background-position:-5043px 0px; }
.iti__flag.iti__tr {
    height:14px;
    background-position:-5065px 0px; }
.iti__flag.iti__tt {
    height:12px;
    background-position:-5087px 0px; }
.iti__flag.iti__tv {
    height:10px;
    background-position:-5109px 0px; }
.iti__flag.iti__tw {
    height:14px;
    background-position:-5131px 0px; }
.iti__flag.iti__tz {
    height:14px;
    background-position:-5153px 0px; }
.iti__flag.iti__ua {
    height:14px;
    background-position:-5175px 0px; }
.iti__flag.iti__ug {
    height:14px;
    background-position:-5197px 0px; }
.iti__flag.iti__um {
    height:11px;
    background-position:-5219px 0px; }
.iti__flag.iti__un {
    height:14px;
    background-position:-5241px 0px; }
.iti__flag.iti__us {
    height:11px;
    background-position:-5263px 0px; }
.iti__flag.iti__uy {
    height:14px;
    background-position:-5285px 0px; }
.iti__flag.iti__uz {
    height:10px;
    background-position:-5307px 0px; }
.iti__flag.iti__va {
    height:15px;
    background-position:-5329px 0px; }
.iti__flag.iti__vc {
    height:14px;
    background-position:-5346px 0px; }
.iti__flag.iti__ve {
    height:14px;
    background-position:-5368px 0px; }
.iti__flag.iti__vg {
    height:10px;
    background-position:-5390px 0px; }
.iti__flag.iti__vi {
    height:14px;
    background-position:-5412px 0px; }
.iti__flag.iti__vn {
    height:14px;
    background-position:-5434px 0px; }
.iti__flag.iti__vu {
    height:12px;
    background-position:-5456px 0px; }
.iti__flag.iti__wf {
    height:14px;
    background-position:-5478px 0px; }
.iti__flag.iti__ws {
    height:10px;
    background-position:-5500px 0px; }
.iti__flag.iti__xk {
    height:15px;
    background-position:-5522px 0px; }
.iti__flag.iti__ye {
    height:14px;
    background-position:-5544px 0px; }
.iti__flag.iti__yt {
    height:14px;
    background-position:-5566px 0px; }
.iti__flag.iti__za {
    height:14px;
    background-position:-5588px 0px; }
.iti__flag.iti__zm {
    height:14px;
    background-position:-5610px 0px; }
.iti__flag.iti__zw {
    height:10px;
    background-position:-5632px 0px; }

.iti__flag {
    height:15px;
    box-shadow:0px 0px 1px 0px #888;
    background-image:url("../img/contact-us/flags.png");
    background-repeat:no-repeat;
    background-color:#DBDBDB;
    background-position:20px 0; }
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi) {
    .iti__flag {
        background-image:url("../img/contact-us/flags@2x.png"); } }

.iti__flag.iti__np {
    background-color:transparent; }
 
.asa.portlet  {display:none;}  
.asa-hidden {display:none;} 

#asa.portlet.Z7_FC99OHEV6AJSADFORJDK30Q326  {display:none;}

.sar-symbol{
	font-family: SR2NEW2 !important;
    font-weight: 800 !important;
	/*font-size: 18px;*/
    margin: 0px 2px 0px 2px;
}


.page-main-menu .theme-change-trigger {
    position: absolute;
    right: 0;
    top: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    font-size: 0.75rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.page-main-menu .dark-mode {
    content: url(../images/light-mode.png);
    width: 19px;
    height: 22px;
}

.page-main-menu .light-mode {
    content: url(../images/light-mode.png);
    width: 19px;
    height: 22px;
}

.popup-trigger {
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    position: absolute;
    right: 80px;
    bottom: 0;
    z-index: 9;
    height: 250px;
    width: 250px;
    display: none
}

 .dark-mode {
    content: url(../img/dark-mode.png);
    width: 19px;
    height: 22px;
  }

 .light-mode {
    content: url(../img/light-mode.png);
    width: 19px;
    height: 22px;
  }
  
  .logoDark{
  	display: none;
  }
  
  .theme-change-trigger{
  	position: relative;
  	bottom: 70px;
  	left: 77px;
  	gap:5px;
  	cursor: pointer;
  }
  
  html[lang="ar"] .theme-change-trigger {
	  left: auto;
	  right: 77px; /* Change from left to right */
  }
  
  @media screen and (max-width: 1024px) {
	.theme-change-trigger span {
		display: none;
	}
	.light-mode{
		width: 30px !important;
		height: 26px !important;
	}
	
	.theme-change-trigger{
	 
		margin: 38px 72px;
		left: 59px;
	}
	
	 html[lang="ar"] .theme-change-trigger {
   		 margin: 38px 82px; /* Change from 40px to 21px */
  	}
}

/* Hide all light logos globally */
.navbar-brand.light {
  display: none !important;
}

/* Hide all dark logos by default */
.navbar-brand.dark {
  display: none;
}

/* Mobile screen: show only mobile light logo */
@media (max-width: 600px) {
  .navbar-brand.light.display-mobile {
    display: block !important;
  }
}

/* Tablet screen: show only tablet light logo */
@media (min-width: 601px) and (max-width: 1200px) {
  .navbar-brand.light.display-tablet {
    display: block !important;
  }
}

/* Desktop screen: show only desktop light logo */
@media (min-width: 1201px) {
  .navbar-brand.light.display-desktop {
    display: block !important;
  }
}

/*** end of flags css ***/