/*@import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css);*/
@import url("https://fonts.googleapis.com/earlyaccess/notokufiarabic.css");
html,body,ul,li{
    margin: 0 auto;
    padding: 0px;
}
body{
    font-family: "Noto Kufi Arabic", serif;
    line-height: 25px;
    background: #f9f9f9;

}
a, a:hover{ text-decoration: none}
p{
    font-size: 13px;
    color: #666;
   /* padding: 14px 0 20px;*/
}
.logo{
    color: #0aa6cd;
}
.logo small {
    font-size: 15px;
}
.logo small > span {
    font-size: 15px;
    color:#ddd;
    padding: 0 10px;
}
.logo img {
    margin-bottom: -20px;
}
/* ============================================================
  NAV
============================================================ */

.bg-white{
    background: #fff;
}
.top-menu-bg{
    background: #fff;
    padding: 5px 0 10px;
    -webkit-box-shadow: 0px 2px 1px -1px #e2e2e2;
    -moz-box-shadow: 0px 2px 1px -1px #e2e2e2;
    box-shadow: 0px 2px 1px -1px #e2e2e2;
}
.mlogo > img  {
    height: 25px;
}
nav.main-nav ul {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 0 auto;
    margin-top: 4px;
}
nav.main-nav li {
    display: inline-block;
    margin: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    width: 100%;
    border-right: 3px solid #fff;
    z-index: 0;
}

nav.main-nav a {
    display: block;
    color: #285064;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    font-family: 'ge_thameenregular' !important;
    font-size: 16px !important;
    font-weight:  bold;
    height: 45px;
}
nav.main-nav a:hover {
    color: #12242d;
}
nav.main-nav span {
    display: block;
    padding: 10px 10px;
}
@media   (max-width: 690px) {
    nav.main-nav li  {
        display: block;
    }
    nav.main-nav li:first-child  {
        padding: 20px 0;
    }
}


@media all and (min-width: 690px) {

    nav.main-nav li:first-child {
        border-right: 0px solid #fff;
        background: none;
        background: transparent url('../img/bg-logo.png')  no-repeat center left;
    }
    nav.main-nav li:first-child a:hover {
        background: #f0f0f0 url('../img/bg-logo.png')  no-repeat center left;
    }


    nav.main-nav li a > .i-btn{
        height: 28px;
        width: 28px;
        float: right;
        -webkit-transform: skewX(20deg);
        -moz-transform: skewX(20deg);
        -ms-transform: skewX(20deg);
        -o-transform: skewX(20deg);
        transform: skewX(20deg);
        margin: 12px 10px 0 5px;
    }

    nav.main-nav li a span {
        -webkit-transform: skewX(20deg);
        -moz-transform: skewX(20deg);
        -ms-transform: skewX(20deg);
        -o-transform: skewX(20deg);
        transform: skewX(20deg);
    }

    /*
      nav.main-nav li.active a {
        box-shadow: inset 0 -2px 0 0 white;
        border-bottom: 1px solid #f2f2f2;
      }
    */
    .mlogo  {
        z-index: 3;
        /*position: relative;*/
        -webkit-transform: skewX(20deg);
        -moz-transform: skewX(20deg);
        -ms-transform: skewX(20deg);
        -o-transform: skewX(20deg);
        transform: skewX(20deg);
        border-radius: 0 30px 30px 0;
        width: 100%;
    }
    .mlogo > img {
        margin-top: 10px;
    }
    nav.main-nav ul {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;
        justify-content: space-between;
    }
    nav.main-nav li {
        margin: 0;
        -webkit-transform: skewX(-20deg);
        -moz-transform: skewX(-20deg);
        -ms-transform: skewX(-20deg);
        -o-transform: skewX(-20deg);
        transform: skewX(-20deg);
        transform-origin: left center;

    }
    nav.main-nav a {
        color: #222222;
        z-index: 0;
        background-color: #f0f0f0;
    }
    nav.main-nav a:hover {
        color: #fff;
        background-color: #12242d;
    }
    nav.main-nav a > span {
        -webkit-transform: skewX(20deg);
        -moz-transform: skewX(20deg);
        -ms-transform: skewX(20deg);
        -o-transform: skewX(20deg);
        transform: skewX(20deg);
    }
}

nav.main-nav li a.mlogo{
    z-index: 99;
    text-align: center;
}

/*colors*/
.purble  , .purble > span ,
.purble  { color: #594099}
nav.main-nav a.purble  > span > .fa , a.purble  > span > .fa{ color: #594099}

nav.main-nav a.purble:hover ,
nav.main-nav li.active a.purble { background: #594099}
nav.main-nav a.purble:hover  > span,
nav.main-nav a.purble:hover  > span > .fa ,
nav.main-nav li.active a.purble ,
nav.main-nav li.active a.purble > span ,
nav.main-nav li.active a.purble  > span > .fa  { color: #ffffff}

.green , .green > span , .green  { color: #3EB54A}
nav.main-nav a.green  > span > .fa , a.green  > span > .fa{ color: #3EB54A}

nav.main-nav a.green:hover , nav.main-nav li.active a.green  { background: #3EB54A}
nav.main-nav a.green:hover  > span,
nav.main-nav a.green:hover  > span > .fa  ,
nav.main-nav li.active a.green > span ,
nav.main-nav li.active a.green  > span > .fa { color: #ffffff}

.blue , .blue > span , .blue{ color: #00a7d2}
nav.main-nav a.blue  > span > .fa ,
a.blue  > span > .fa{ color: #00a7d2}

nav.main-nav a.blue:hover ,
nav.main-nav li.active a.blue  { background: #00a7d2}
nav.main-nav a.blue:hover  > span,
nav.main-nav a.blue:hover  > span > .fa ,
nav.main-nav li.active a.blue > span ,
nav.main-nav li.active a.blue  > span > .fa   { color: #ffffff}


/*Mobile*/
@media   (max-width: 690px) {
    nav.main-nav a  {
        margin-bottom: 1px;
    }

    /*Colors*/
    .purble  , .purble > span  { color: #594099}
    nav.main-nav a.purble  { background: #594099}
    nav.main-nav a.purble  > span , nav.main-nav   a.purble  > span > .fa  { color: #ffffff}
    .green , .green > span{ color: #3EB54A}
    nav.main-nav a.green  { background: #3EB54A}
    nav.main-nav a.green  > span  , nav.main-nav   a.green  > span > .fa  { color: #ffffff}
    .blue , .blue > span{ color: #00a7d2}
    nav.main-nav a.blue  { background: #00a7d2}
    nav.main-nav a.blue  > span , nav.main-nav   a.blue  > span > .fa  { color: #ffffff}

    /* hover */
    .purble  , .purble > span  { color: #594099}
    nav.main-nav a.purble:hover  { background: #4a318a}
    nav.main-nav a.purble:hover  > span  { color: #ffffff}
    .green , .green > span{ color: #3EB54A}
    nav.main-nav a.green:hover  { background: #2ea139}
    nav.main-nav a.green:hover  > span  { color: #ffffff}
    .blue , .blue > span{ color: #00a7d2}
    nav.main-nav a.blue:hover  { background: #0595ba}
    nav.main-nav a.blue:hover  > span  { color: #ffffff}
}




/* b1 */
nav.main-nav li a > .i-btn.b1{
    background: url('../img/b1.png')  no-repeat 1px 1px;
    background-size: 20px 20px;
}
nav.main-nav li a:hover > .i-btn.b1 , nav.main-nav li.active a > .i-btn.b1{
    background: url('../img/b1-h.png')  no-repeat 1px 1px;
    background-size: 20px 20px;
}

/* b2 */
nav.main-nav li a > .i-btn.b2{
    background: url('../img/b2.png')  no-repeat 1px 1px;
    background-size: 20px 20px;
}
nav.main-nav li a:hover > .i-btn.b2 , nav.main-nav li.active a > .i-btn.b2{
    background: url('../img/b2-h.png')  no-repeat 1px 1px;
    background-size: 20px 20px;
}

/* b3 */
nav.main-nav li a > .i-btn.b3{
    background: url('../img/b3.png')  no-repeat 1px 1px;
    background-size: 20px 20px;
}
nav.main-nav li a:hover > .i-btn.b3 , nav.main-nav li.active a > .i-btn.b3{
    background: url('../img/b3-h.png')  no-repeat 1px 1px;
    background-size: 20px 20px;
}

/* b4 */
nav.main-nav li a > .i-btn.b4{
    background: url('../img/b4.png')  no-repeat 1px 1px;
    background-size: 20px 20px;
}
nav.main-nav li a:hover > .i-btn.b4 , nav.main-nav li.active a > .i-btn.b4{
    background: url('../img/b4-h.png')  no-repeat 1px 1px;
    background-size: 20px 20px;
}

/* b5 */
nav.main-nav li a > .i-btn.b5{
    background: url('../img/b5.png')  no-repeat 1px 1px;
    background-size: 20px 20px;
}
nav.main-nav li a:hover > .i-btn.b5 , nav.main-nav li.active a > .i-btn.b5{
    background: url('../img/b5-h.png')  no-repeat 1px 1px;
    background-size: 20px 20px;
}

/* b6 */
nav.main-nav li a > .i-btn.b6{
    background: url('../img/b6.png')  no-repeat 1px 1px;
    background-size: 20px 20px;
}
nav.main-nav li a:hover > .i-btn.b6 , nav.main-nav li.active a > .i-btn.b6{
    background: url('../img/b6-h.png')  no-repeat 1px 1px;
    background-size: 20px 20px;
}

/* b7 */
nav.main-nav li a > .i-btn.b7{
    background: url('../img/b7.png')  no-repeat 1px 1px;
    background-size: 20px 20px;
}
nav.main-nav li a:hover > .i-btn.b7 , nav.main-nav li.active a > .i-btn.b7{
    background: url('../img/b7-h.png')  no-repeat 1px 1px;
    background-size: 20px 20px;
}


/*Mobile*/
@media   (max-width: 690px) {

    nav.main-nav li a > .i-btn{
        height: 28px;
        width: 28px;
        float: right;
        margin: 12px 15px 0 5px;
    }

    nav.main-nav li a > .i-btn.b1{
        background: url('../img/b1-h.png')  no-repeat 1px 1px;
        background-size: 20px 20px;
    }
    nav.main-nav li a > .i-btn.b2{
        background: url('../img/b2-h.png')  no-repeat 1px 1px;
        background-size: 20px 20px;
    }
    nav.main-nav li a > .i-btn.b3{
        background: url('../img/b3-h.png')  no-repeat 1px 1px;
        background-size: 20px 20px;
    }
    nav.main-nav li a > .i-btn.b4{
        background: url('../img/b4-h.png')  no-repeat 1px 1px;
        background-size: 20px 20px;
    }
    nav.main-nav li a > .i-btn.b5{
        background: url('../img/b5-h.png')  no-repeat 1px 1px;
        background-size: 20px 20px;
    }
    nav.main-nav li a > .i-btn.b6{
        background: url('../img/b6-h.png')  no-repeat 1px 1px;
        background-size: 20px 20px;
    }
    nav.main-nav li a > .i-btn.b7{
        background: url('../img/b7-h.png')  no-repeat 1px 1px;
        background-size: 20px 20px;
    }

}


.container {
    margin-right: auto;
    margin-left: auto;
}


@media (min-width: 768px){
    .container {
        width: 750px;
    }
}

@media (min-width: 920px){
    .container {
        width: 900px;
    }
}


@media (min-width: 1030px){
    .container {
        width: 1000px;
    }
}


.m-t{margin-top: 15px}
.m-t-l{margin-top: 25px}
.m-t-xl{margin-top: 35px}
.m-t-xxl{margin-top: 45px}

.pd{padding: 15px}
.wrapper{padding: 15px 0}

.no-border{border: none}
.r{
    border-radius: 4px;
}
a,a:hover,a:active{
    text-decoration: none;
}
h1,h2,h3{
    font-family: 'ge_thameenregular';
}
h4,h5,h6{
    font-family: "Noto Kufi Arabic", serif;
}
h1{ font-size: 50px;}
h2{ font-size: 42px;}
h3{ font-size: 32px;}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.b-b{
    border-bottom: 1px solid rgba(0, 0, 0, 0.06)
}
.header{
    border-bottom: 0px solid rgba(0, 0, 0, 0.04);
    padding: 10px 0 20px;
    -webkit-box-shadow: 0px 2px 0px -1px #ebebeb;
    -moz-box-shadow: 0px 0px 1px -1px #ebebeb;
	margin: auto !important;
}
ul{
    padding: 10px 30px 0 0;
    margin-top: 10px;
}
.title-page {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-top: 50px;
}
.title{
    border-bottom: 3px solid #0aa6cd;
    display: table-cell;
}
.title i{
    margin-left: 10px;
    color: #0aa6cd;
}
.b-title1{
    border-bottom: 3px solid #0aa6cd;
    width: 100px;
    margin-top: 10px;
}



.bg-dark{
    background: #333333;
}
.bg-darker{
    background: #222222;
    color: #999;
    font-size: 11px;
}

.footer{
    margin-top: 80px;
}
.bg-dark,  .bg-dark i, .bg-dark p, .bg-dark h1 , .bg-dark h2 , .bg-dark h3 , .bg-dark h4 , .bg-dark h5{
    color: #eee
}

.footer-links li{
    list-style: none;
    color:#eee;
    line-height: 24px;
}
.footer-links li a{
    color: #8d8d8d;
}
.align-center{text-align: center;}
.align-left{text-align: left;}
.align-right{text-align: right;}
.btn.btn-md{
    font-size: 13px;
    padding: 10px 20px;
}


/* fixes confilicts */
.title{
    line-height: 60px;
    margin-bottom: 0px;
}
.b-title{
    line-height: 3px;
    height: 3px;
    padding: 0px;
    margin: 0px;
    font-size: 2px;
}
.font-label legend {
    padding: 10px 0;
    line-height: 30px;
}

.webform-component--gender {
    display: inline-block;
    position: relative;
    clear: both;
}