﻿/*** Fonts ***/
/*@import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600');
@import url('https://fonts.googleapis.com/css?family=Cairo');

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400;
  src: local('Cairo'), local('Cairo-Regular'), url(../fonts/cairo.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}*/
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-Regular.woff2') format('woff2'),
        url('../fonts/Cairo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: local('Oswald SemiBold'), local('Oswald-SemiBold'), url(../fonts/Oswald-SemiBold.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face {
    font-family: 'GE Flow';
    src: url('../fonts/ar/GE-Flow/GE_Flow.eot');
    src: url('../fonts/ar/GE-Flow/GE_Flow.eot?#iefix') format('embedded-opentype'),
        url('../fonts/ar/GE-Flow/GE_Flow.woff2') format('woff2'),
        url('../fonts/ar/GE-Flow/GE_Flow.woff') format('woff'),
        url('../fonts/ar/GE-Flow/GE_Flow.ttf') format('truetype'),
        url('../fonts/ar/GE-Flow/GE_Flow.svg#GE_Flow') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Right_Arrow';
    src: url('../fonts/right-arrow.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    
    font-family: 'Left_Arrow';
    src: url('../fonts/left-arrow.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*** Standerd Global CSS ***/
html {padding: 0; margin: 0; direction: rtl}
body {padding: 0; margin: 0 auto; color: #555555; /*line-height: 1.6rem;*/ font-family:'Cairo', sans-serif; font-size:.93rem;}

/* Backgroun Colors */
.white-color {background: #ffffff}
.offWhite-color {background: #f6f6f6}
.whiteGray-color {background: #e5e5e5}
.gray-color {background: #cccccc}
.babyBlue-color {background: #00bcf5}
.blue-color {background: #003284}
.orange-color {background: #ffbd00}

/* images style */
/*img {max-width: 100%; height: auto}*/

.clear {clear: both;}

div, ::after, ::before { transition: ease 0.2s; -moz-transition: ease 0.2s; -webkit-transition: ease 0.2s; -o-transition: ease 0.2s; -ms-transition: ease 0.3s}
a, .btn {text-decoration: none !important; cursor: pointer; transition: ease 0.2s; -moz-transition: ease 0.2s; -webkit-transition: ease 0.2s; -o-transition: ease 0.2s; -ms-transition: ease 0.3s}
a:focus, .btn:focus , button:focus{ outline:none !important;}
/* Button Styles */
.btn {font-family: 'GE Flow'; border-radius: 0;}
.btn-primary {background-color: #bbbbbb; font-size: 1.2rem; color: #002f8a; font-weight: 200; padding: 10px 25px; border: none; transition: ease 0.3s; -moz-transition: ease 0.3s; -webkit-transition: ease 0.3s; -o-transition: ease 0.3s; -ms-transition: ease 0.3s}
.btn-primary:hover {background-color: #f6b100; color: #002f8a; box-shadow: none !important;}
.btn-center {display: table; margin: auto;}

/* Titles Styles */
h1, h2, h3 {position: relative; padding: 0; margin: 0; font-family: 'GE Flow'}
h1.center, h2.center, h3.center {display: table; margin-right: auto; margin-left: auto; text-align: center;}
h1 {font-size: 2rem; color: #0143b0; height: 40px; padding: 0; margin: 0 0 20px 0;}
h1.blue {color: #0143b0;}
h1.darkBlue {color: #002663;}
h1.white {color: #ffffff;}
h1.whiteBG {display: table; background: #ffffff; padding: 0 40px;}
h1.orangeLeftline::before, h1.orangeUnderline::after, h1.blueUnderline::after, h1.whiteUnderline::after {content: ''; position: relative; display: block; width: 40px; height: 0.3rem; z-index: 2;}
h1.orangeLeftline::before {background: #f6b100; position: absolute; left: -40px; bottom: 1.15rem; top: 17px;}
h1.orangeUnderline::after {background: #f6b100; margin: 10px auto 0 auto;}
h1.blueUnderline::after {background: #00184a; margin: 10px auto 0 auto;}
h1.whiteUnderline::after {background: #ffffff; margin: 10px auto 0 auto;}

h2 {font-size: 1.3rem; margin-bottom: 15px; color: #f8b800;}
h2.blue {color: #0143b0;}
h2.whiteBG {display: table; background: #ffffff; padding: 0 20px;}
h2.orangeLeftline::before, h2.orangeUnderline::after, h2.whiteUnderline::after {content: ''; position: relative; display: table; width: 30px; height: 0.3rem; z-index: 1;}
h2.orangeLeftline::before {background: #f6b100; position: absolute; left: -30px; bottom: .56rem; z-index: 0; top: 11px;}
h2.orangeUnderline::after {background: #f6b100; margin: 10px auto 0 auto;}
h2.whiteUnderline::after {background: #ffffff; margin: 10px auto 0 auto;}

h3 {font-size: 1rem; color: #00184a; margin-bottom: 10px;}

p {text-align: justify; line-height: 1.65rem;}
p.text-center-justify {text-align: justify; text-align-last: center;}

ul, li {padding: 0; margin: 0; list-style: none}

section {position: relative; width: 100%; height: auto; padding: 80px 0;}

@media (max-width: 991px){
    h1 {font-size: 1.7rem;}
    section {padding: 40px 0;}
}
/*** End Standerd Global CSS ***/

/*** Header Top Bar Styles ***/
.topLimks-container {width: 100%; background: #e8eff8; min-height: 50px; padding: 5px 0; /*margin-top: -207px;*/}

/* Top Social Media Styles */
.topSocialMediaContainer a.language {display: none;}
a.topSocialMedia {display: inline-block; width: 28px; height: 28px; border-radius: 50%; padding: 6px 0 0 0; margin: 7px 3px; opacity: 0.7; color: #e8eff8; font-size: 14px; text-align: center;}
a.topSocialMedia:hover {opacity: 1;}
a.facebook {background-color: #00257c}
a.twitter {background-color: #0099ff}
a.youtube {background-color: #bd0100}
/*- Mobile View Style -*/
@media (max-width: 991px){
    .topSocialMediaContainer {text-align: center;}
    .topSocialMediaContainer a.language {display: inline-block;}
    .topLanguageContainer {display: none;}
}

/* Top Short Links Styles */
a.toplinks {color: #002055; font-size: .73rem; display: inline-table; padding: 12px 5px; margin: 0 auto;}
a.toplinks:hover {color: #f4b000}

/* Search Styles */
.search-container, .search-collapse-container {position: relative; width: 95%; margin: 4px auto; text-align: center;}
.search-collapse-container {display: none;}
.search-container form, .search-collapse-container form {margin: 0;}
.search-container input, .search-collapse-container .search-colapced-palceholder {width: 100% !important; height: 36px; border: 1px #bbbbbb solid; border-radius: 18px; padding: 5px 10px 5px 44px; margin: 0 auto; font-size: 12px; color: #444444;}
.search-container .btn, .search-collapse-container .btn {position: absolute; left: 4px !important; top: 4px; border: none; border-radius: 16px 0 0 16px;}
.search-container .btn {background-color: #002f7c; color: #ffffff; padding: 6px; }
.search-container .btn:hover{background-color: #f8b800; color: #002f7c;}
.search-container .btn i{ display:block;}
/*- Mobile View Styles -*/
@media (max-width: 991px){
    .search-container {display: none;}
    .search-collapse-container {display: block; margin: 10px auto;}
    .search-collapse-container .search-colapced-palceholder {height: 44px; border-radius: 18px; padding: 10px 18px 10px 55px;}
    .search-collapse-container input[type=text]:focus {outline: none !important;}
    .search-collapse-container .search-colapced-btn {left: 4px; padding: 10px; background-color: #f8b800; color: #002f7c;}
    .search-collapse-container .search-colapced-btn:hover {background-color: #002f7c; color:#ffffff;}
}

/* Language Styles */
.topLanguageContainer {text-align: left;}
a.language {display: inline-block; background-color: #002f7c; width: 28px; height: 28px; border-radius: 50%; padding: 5px 0 0 0; margin: 7px 3px; font-family: 'Oswald'; font-size: .8rem; font-weight: 600; color: #e8eff8; text-align: center;}
a.language:hover {background-color: #f8b800; color:#002055;}
/*** End Header Top Bar Styles ***/

/*** Logo Styles ***/
.logoContainer {position: relative; width: 100%; margin-bottom: -207px;}
.logo {position: relative; margin: 0 auto; padding: 0; width: 100%; top: -25px;}
.logo img, .logoMobileView img {display: table; border:none; padding: 0; margin: 0 auto; width: 100%; max-width: 366px; height: auto;}
.logoMobileView {display: none; position: relative; width: 100%; margin: 5px 0;}
.logoMobileView img {max-width: 190px;}
/*- mobile View Style -*/
@media (min-width: 768px) and (max-width: 1023px){
    .logoContainer {margin-bottom: -170px;}
    .logo {top: -21px;}
    .logo img {max-width: 300px;}
}
@media screen and (max-width: 767px){
    .logoContainer {display: none}
    .logoMobileView {display: block;}
    .main-header-bg {display: none;}
}
/*** End Logo Styles ***/

/*** End Header BG Styles ***/
.main-header-bg {clear: both; width: 100%; padding: 0; margin: 0;}
.main-header-bg img {width: 100%; height: auto; max-height: 400px; padding: 0; margin: 0;}
/*** End Header BG Styles ***/

/*** Navigation Styles ***/
.navContainer {width: 100%; min-height: 60px; background-color: #003284; font-family: 'GE Flow'; font-weight: 200; font-size: 16px;}
.navContainer nav, .navContainer ul.navbar-nav {width: 100%; padding: 0; margin: 0;}
.navLable {display: none;}
.navContainer a.nav-link {padding: 1.15rem 2rem !important; color: #ffffff;}
@media (min-width: 992px) and (max-width: 1199px){
    .navContainer a.nav-link {padding: 1.25rem 1.33rem !important;}
}
.navContainer a.nav-link {position: relative; color: #ffffff !important; z-index: 1;}
.navContainer a.nav-link i {font-size: 36px; display:block;}
.navContainer a.active {padding: 0.78rem 1.6rem !important; background-color: #f6b100; color: #002663 !important;}

/* Animation Styles */
.navContainer a.nav-link:hover, .navContainer a.nav-link:focus {color: #002663 !important;}
.navContainer a.nav-link:focus {background-color: #f6b100;}
.navContainer a.nav-link::before {content:''; position: absolute; display:block; width:100%; height:0px; background:#f6b100; bottom: 0px; right: 0; z-index: -1; cursor: pointer;}
.navContainer a.nav-link:hover::before {height: 100%;}

/* Navbar Toggle*/
.navbar-dark .navbar-toggler {border: 1px rgba(255,255,255,.7) solid; border-radius: .50rem; margin: 10px 18px auto; padding: .35rem .65rem; font-size: 1.0rem;}

/*- Mobile Menyu Setting -*/
@media (max-width: 991px){
    .navLable {display: block; color: rgba(255,255,255,.8); font-size: 18px; padding: 0; margin: 20px 0 auto auto;}
    .navContainer ul.navbar-nav {background: #003790; margin: 15px auto 0; max-height: 280px; overflow-y: auto;}
    .navContainer li.nav-item {border-bottom: 1px rgba(255,255,255,.2) solid;}
    .navContainer a.nav-link, .navContainer a.active {padding: 0.7rem 1rem !important;}
    /* Animation Styles */
    .navContainer a.nav-link:hover {color: #ffffff !important;}
    .navContainer a.nav-link:focus {color: #002663 !important;}
    .navContainer a.nav-link::before {content:''; position: absolute; display: block; width: 0px; max-height: 3px; background: #f6b100; bottom: 0px; right: 0; z-index: -1; cursor: pointer;}
    .navContainer a.nav-link:hover::before {width: 100%;}
}
/*** End Navigation Styles ***/

/*** About Section Styles ***/
.aboutContainer, .creationContainer {position: relative; width: 72.2%; border: 0.3rem #bbbbbb solid;}
.aboutContainer {float: left; padding: 60px 120px 60px 60px;}
.creationContainer {float: right; padding: 60px 60px 60px 120px; margin-top: 60px;}
.aboutContainer h1.whiteBG, .creationContainer h1.whiteBG {margin-top: -82px;}
.aboutRightImg, .creationLeftImg {position: relative; width: 100%; max-width: 375px; height: 290px; background: center center; background-size: cover; border: 1px #b2b2b2 solid;}
.aboutRightImg {float: right; margin: -4.9rem -445px 0 0; box-shadow: -15px 15px 0 #bbbbbb;}
/*.creationLeftImg {float: left; margin: -4.9rem 0 0 -445px; box-shadow: 15px 15px 0 #bbbbbb;}*/
.creationLeftImg {float: left; margin: -4.9rem 0 0 -445px; box-shadow: 15px 15px 0 #bbbbbb;}
.aboutContainer .textContainer {width: 100%;}
.aboutContainer p, .creationContainer p {float: right;}
.aboutContainer a.btn-primary, .creationContainer a.btn-primary {display: table; bottom: -5px; margin: 20px auto -65px;}
/*- Mobile View Style -*/
@media (max-width: 991px){
    .aboutContainer, .creationContainer {width: 100%; padding: 60px 40px;}
    h1.whiteBG {margin: 0 auto 30px auto; text-align: center; font-size: 1.5rem;}
    /*.aboutContainer h1.orangeUnderline::after {display: block !important;}*/
    .aboutContainer h1.orangeLeftline::before, .creationContainer h1.orangeLeftline::before {display: none !important;}
    .aboutRightImg, .creationLeftImg {display: block; float: none; max-width: 100%; height: 320px; margin: 0 auto 20px auto; box-shadow: none !important;}
}
@media (min-width: 992px){
    /*.aboutContainer h1.orangeLeftline::after {display: block !important;}*/
    .aboutContainer h1.orangeUnderline::after, .creationContainer h1.orangeUnderline::after {display: none !important;}
}
@media (min-width: 992px) and (max-width: 1199px){
    .aboutContainer, .creationContainer {width: 67%;}
}

/* Modal Container Styles */
.modal-open .modal {background: rgba(0,20,50,.7);}
.modalContainer .modal-dialog {max-width: 95%; margin: 3rem auto;}
.modalContainer .modal-content {border: 1px solid rgba(0,0,0,.3); border-radius: 1rem; box-shadow: 0 0 10px rgba(0,0,0,.5);}
.modalContainer .modal-header {border: 0; padding: .7rem 1.5rem .1rem;}
.modalContainer .modal-body {padding: 1rem 1.5rem;}
.modalContainer .modal-body p {float: none;}
.modalContainer .modal-body h2 {font-size: 1.2rem;}
.modalContainer p {float: none;}
.modalContainer .modal-footer {padding: .2rem 1.5rem 1.5rem; border: 0;}
.modalContainer .btn-primary {border-radius: 1rem; color: #ffffff; background: #0143b0;}
.modalContainer .btn-primary:hover, .modalContainer .btn-primary:focus {background: #f6b100;}

/*** End About Section Styles ***/

/*** Services Section Styles ***/
.servicesSectionBg {background: transparent url('/humanrights/PublishingImages/services-bg.jpg') center top no-repeat; background-size: cover;}
.servicesContainer {position: relative; width: 90%; margin: 0 auto;}
/*** End Services Section Styles ***/

/*** Activities Section Styles ***/

.activitiesLeftContainer, .activitiesRightContainer {position: relative; width: 66.3%; border: 5px #bbbbbb solid; margin: 30px 0 30px 0;}

.activitiesLeftContainer {float: left; padding: 30px 90px 30px 30px;}

.activitiesRightContainer {float: right; padding: 30px 30px 30px 90px;}

.activitiesLeftContainer h2.whiteBG, .activitiesRightContainer h2.whiteBG {padding: 0 25px; margin-top: -46px;}

/*.activitiesRightImg, .activitiesLeftImg {position: relative; width: 100%; max-width: 300px; border: 1px #b2b2b2 solid;}*/

.activitiesRightImg, .activitiesLeftImg {position: relative; display: block; height: 175px; width: 100%; background: center center no-repeat; background-size: cover; border: 1px #b2b2b2 solid;}

.activitiesRightImg {float: right; margin: -49px -290px 0 0; box-shadow: -15px 15px 0 #bbbbbb;}

.activitiesLeftImg {float: left; margin: -49px 0 0 -290px; box-shadow: 15px 15px 0 #bbbbbb;}

.activitiesLeftContainer .textContainer {width: 100%;}

.activitiesLeftContainer p, .activitiesRightContainer p {float: right; }

.activitiesLeftContainer a.btn-primary, .activitiesRightContainer a.btn-primary {display: table; bottom: -5px; margin: 20px auto -34px;}

/*- Mobile View Style -*/

@media (max-width: 991px){

    .activitiesLeftContainer, .activitiesRightContainer {width: 100%; padding: 30px 15px; margin-bottom: 30px;}

    h2.whiteBG {margin: 0 auto 30px auto; text-align: center;}

    .activitiesLeftContainer h2.orangeLeftline::before, .activitiesRightContainer h2.orangeLeftline::before {display: none;}

    .activitiesRightImg, .activitiesLeftImg {float: none; max-height: 280px; margin: 0 auto 10px auto; box-shadow: none !important;}

}

@media (min-width: 992px){

    .activitiesLeftContainer h2.orangeUnderline::after, .activitiesRightContainer h2.orangeUnderline::after {display: none;}

    .activitiesLeftContainer p, .activitiesRightContainer p { max-height: 470px; overflow: hidden;}

}

@media (min-width: 992px) and (max-width: 1199px){

    .activitiesLeftContainer, .activitiesRightContainer {width: 68.2%; min-height: 588px;}

    .activitiesLeftContainer h2.orangeLeftline::before, .activitiesRightContainer h2.orangeLeftline::before {bottom: .40rem;}

    .activitiesLeftContainer h2.whiteBG, .activitiesRightContainer h2.whiteBG {font-size: 1.12rem; margin-top: -45px;}

    .activitiesLeftContainer {padding: 30px 80px 20px 20px;}

    .activitiesRightContainer {padding: 30px 20px 20px 80px;}

    .activitiesRightImg {margin: -50px -240px 0 0;}

    .activitiesLeftImg {margin: -50px 0 0 -240px;}

    .activitiesLeftContainer a.btn-primary, .activitiesRightContainer a.btn-primary {margin: 20px auto -24px; font-size: 1.1rem;}

}

@media (min-width: 1200px){

    .activitiesLeftContainer, .activitiesRightContainer {min-height: 543px;}

}

/*** End Activities Section Styles ***/
    
/*** Photo Album Section Style ***/

.photoAlbum {background: #c9ced7;}

.photoAlbumContainer {position: relative; width: 90%; margin: 0 auto;}   

/*** End Photo Album Section Style ***/

/*** Contact Us Section Styles ***/
.contactUs {background: #f7b400;}
.ourContacts li {clear: both; margin-bottom: 25px;}
.ourContacts i {display: flex; float: right; width: 100px; height: 100px; background: #001135; text-align: center; font-size: 3.5rem; color: #ffc600; border: 10px #ffe075 solid; border-radius: 100%; padding-top: 12px; margin: 0 0 10px 20px;}
.ourContacts .contactNumberContainer {padding-top: 30px;}
.ourContacts p {margin: 0; font: normal 600 1.5rem 'Oswald'; color: #000000; direction: ltr; text-align: right; line-height: 1.8rem; letter-spacing: -.07rem;}
/* Google Map Styles */
.gMap {width: 100%; height: 100%; min-height: 300px; max-height: 450px; border: 1px #ffffff solid; box-shadow: 0 0 8px rgba(0,0,0,.5);}
/* Mobile View Styles */
@media (max-width: 767px){
    .ourContacts {margin: 0 auto; text-align: center;}
    .ourContacts li {display: inline-table; margin: 0 auto 20px auto;}
    .ourContacts i {float: none; width: 60px; height: 60px; padding-top: 8px; margin: 0 auto 8px auto; border-width: 5px; font-size: 2.1rem;}
    .ourContacts .contactNumberContainer {padding: 0 10px;}
    .ourContacts p {margin: 0; font-size: .88rem; line-height: 1.2rem; letter-spacing: -.03rem;}
    .gMap {margin-top: 20px;}
}
@media (min-width: 768px) and (max-width: 991px){
    .ourContacts .contactNumberContainer {padding-top: 15px;}
    .ourContacts i {width: 80px; height: 80px; font-size: 2.6rem; border-width: 7px; padding-top: 13px; margin: 0 0 10px 12px;}
    .ourContacts p {font-size: 1.23rem;}
}
/*** End Contact Us Section Styles ***/

/*** Footer Styles ***/
footer {background: #001b47; padding-top: 40px; font-size: .8rem; color: #b0b0b0; line-height: 1.3rem;}
footer h2 {font-size: 1.2rem;}
footer ul {margin-bottom: 30px;}
footer ul a {position: relative; color: #b0b0b0;}
footer ul a:hover, footer ul a:focus {color: #f7b400;}
footer ul a::after {content: ''; position: absolute; display: block; background: #f7b400; width: 0; height: .05rem; right: 18px; bottom: 0;}
footer ul a:hover::after {width: 93%;}
.copyr-ight {background: #00173c; padding: 30px 0; margin-top: 20px; text-align: center; color: #5f687b;}
.copyr-ight p {margin: 0;}
.copyr-ight a, .copyr-ight span {color: #ffffff; font-weight: bold;}
.copyr-ight a:hover, .copyr-ight a:focus {color: #f7b400;}
    
/*** End Footer Styles ***/


/*******Ay*******/
i{ line-height:70%;}
input[type=button], input[type=reset], input[type=submit], button {
    min-width:inherit;
    padding: inherit;
    border: inherit;
    background-color: inherit;
    background-color: inherit;
    margin-left:inherit;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}/******************************/
.table .thead-dark th {
    color: #fff;
    background-color: #0143b0;
    border-color: #0143b0;
}
/***********15/1/2019************/
.ContactUsTitleNo {
    margin: 0 0 10px 0;
    padding-top: 18px;
    font-size: 22px;
    color: #000;
    font-weight: bold;
}
.contactNumberContainer2 {
    padding-top: 0 !important;
}
.contactInfo {
    color: #222;
    margin-bottom: 0;
    font-size: 20px;
}

/**************20/1/2019*************/

.page-content{
	padding-top:40px;
	padding-bottom:40px;
}

.page-content h3{ font-size: 1.3rem;}
.page-content h2{ font-size: 1.4rem;}

/*****************31/1/2019****************/
.activitiesLeftContainer, .activitiesRightContainer{ height:100%; min-height: inherit; flex: auto;}
.activities{ display:table;}
.height-fill [class*="col"]{
/*display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
position:relative;*/
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
}

.activities .col-lg-6:nth-child(1){ -webkit-align-items: flex-end; -ms-flex-align: flex-end; align-items: flex-end;}

/**************12/2/2019*************/
.text-card{ background:#fff; padding:30px; border:1px solid #CCC; border-right:5px solid #0143b0; font-size:15px; margin-bottom: 15px;}
.text-card h1 , .text-card h2 , .text-card h3 , .text-card h4 , .text-card h5 , .text-card h6{ color:#0143b0;}
.text-card ul { list-style:square; margin:0 15px 15px 0;}


