body {
  width      : 100%;
  width      : 100%;
  height     : auto;
  margin     : 0 auto;
  /* background : white; */
  /* color: white; */
  background: rgba(225,225,225,1);
  background: -moz-linear-gradient(45deg, rgba(225,225,225,1) 0%, rgba(39,60,109,1) 40%, rgba(39,60,109,1) 60%, rgba(225,225,225,1) 100%);
  background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(225,225,225,1)), color-stop(40%, rgba(39,60,109,1)), color-stop(60%, rgba(39,60,109,1)), color-stop(100%, rgba(225,225,225,1)));
  background: -webkit-linear-gradient(45deg, rgba(225,225,225,1) 0%, rgba(39,60,109,1) 40%, rgba(39,60,109,1) 60%, rgba(225,225,225,1) 100%);
  background: -o-linear-gradient(45deg, rgba(225,225,225,1) 0%, rgba(39,60,109,1) 40%, rgba(39,60,109,1) 60%, rgba(225,225,225,1) 100%);
  background: -ms-linear-gradient(45deg, rgba(225,225,225,1) 0%, rgba(39,60,109,1) 40%, rgba(39,60,109,1) 60%, rgba(225,225,225,1) 100%);
  background: linear-gradient(45deg, rgba(225,225,225,1) 0%, rgba(39,60,109,1) 40%, rgba(39,60,109,1) 60%, rgba(225,225,225,1) 100%);

}

* {
  margin      : 0;
  padding     : 0;
  font-family: 'Amiri', serif;
  /* font-family: 'Jomhuria', cursive; */
}

.centerv {
  position          : relative;
  top               : 50%;
  -moz-transform    : translateY(-50%);
  -ms-transform     : translateY(-50%);
  -o-transform      : translateY(-50%);
  -webkit-transform : translateY(-50%);
  transform         : translateY(-50%);
}

.centerh {
  position          : relative;
  left              : 50%;
  -moz-transform    : translateX(-50%);
  -ms-transform     : translateX(-50%);
  -o-transform      : translateX(-50%);
  -webkit-transform : translateX(-50%);
  transform         : translateX(-50%);
}

.translate {
  position          : relative;
  top               : 100%;
  -moz-transform    : translateY(-100%);
  -ms-transform     : translateY(-100%);
  -o-transform      : translateY(-100%);
  -webkit-transform : translateY(-100%);
  transform         : translateY(-100%);
}

.centervh {
  position          : relative;
  top               : 50%;
  left              : 50%;
  -moz-transform    : translateX(-50%) translateY(-50%);
  -ms-transform     : translateX(-50%) translateY(-50%);
  -o-transform      : translateX(-50%) translateY(-50%);
  -webkit-transform : translateX(-50%) translateY(-50%);
  transform         : translateX(-50%) translateY(-50%);
}

.shadowin {
  -moz-box-shadow    : inset 1px 0 15px 2px #4E5E75;
  -webkit-box-shadow : inset 1px 0 15px 2px #4E5E75;
  box-shadow         : inset 1px 0 15px 2px #4E5E75;
}

.shadowout {
  -moz-box-shadow    : 0 0 10px 2px black;
  -webkit-box-shadow : 0 0 10px 2px black;
  box-shadow         : 0 0 10px 2px black;
}

/* ================================================================================================ */


body::-webkit-scrollbar-track {
  border-radius      : 3px;
  background-color   : #F5F5F5;
  -webkit-box-shadow : inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar {
  width            : 5px;
  background-color : #F5F5F5;
}

body::-webkit-scrollbar-thumb {
  border-radius    : 3px;
  background-image : -webkit-linear-gradient(
                       90deg,
                       rgba(0, 0, 0, .2) 25%,
                       transparent 25%,
                       transparent 50%,
                       rgba(0, 0, 0, .2) 50%,
                       rgba(0, 0, 0, .2) 75%,
                       transparent 75%,
                       transparent
                     );
  background-color : #0055E6;
}
#loader {
  z-index    : 2;
  display    : none;
  position   : fixed;
  background: #001D30;
  /* top        : 0; */
  width      : 100%;
  height     : 100%;
  overflow   : hidden;
  text-align : center;
  opacity: 0.7;
}
#loader2{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  float: right;
  position: absolute;
}
#loader2 img{
  width : 100%;
}
#loader img {
  width : 100%;
}


.container{
  height: auto;
  width: 80%;
  margin: 0 auto;
}
.header{
  height: 8%;
  width: 100%;
  background: #273C6D;
  /* border-radius: 3px; */
}
#footer{
  height: 8%;
  width: 80%;
  margin: 0 auto;
  background: #273C6D;
  color: white;
  text-align: center;
  font-size: 1.2vw;
  /* border-radius: 3px; */
}
.footersec1,.footersec2{
  width: 50%;
  float: left;
}
.footersec2 p{
  width: 48%;
  float: right;
  text-align: left;
  padding: 0 1%;
}
.footersec2 .subscribe{
  width: 48%;
  float: right;
  padding: 0 1%;
}
.inputtext1{
  width:85%;
  padding: 1%;
  background: white;
  font-size: 1.2vw;
  border: none;
  border-radius: 3px 0 0 3px;
  float: left;
}
.button{
  width: 15%;
  border-radius: 0 3px 3px 0;
  font-size: 1.2vw;
  border: none;
  float: left;
  padding: 1%;
  background: #041438 url(image/subscribe.png) center center no-repeat;
  background-size: 50% auto;
  cursor: pointer;
}
.logo{
  width: 25%;
  height: 100%;
  float: right;
  text-align: center;
  font-size: 2.5vw;
  color: white;
  /* border: 1px solid black; */
}
.menu {
  width: 74%;
  height: 100%;
  float: right;
  text-align: center;
  font-size: 1.5vw;
  list-style-type: none;
  /* background: green; */
  padding-left: 1%;
}
.menua {
  text-decoration: none;
  color: white;
  /* border: 1px solid white; */
  display: inline-block;
  float: left;
  padding: 0 10px;
  margin: 0 5px;
  position: relative;
  cursor: pointer;
}
.menua:hover{
  background: #6C7B9C;
}
.selected{
  background: #6C7B9C;
}
.menuli{
  width: auto;
  height: 100%;
  float: right;
  /* background: white; */
}
.menu2{
  position: absolute;
  top: 100%;
  width: 150%;
  padding: 5%;
  right: 0;
  /* background: black; */
  text-align: right;
  background: white;
  display: none;
  z-index: 1;
  border-radius:  0 0 3px 3px;
}
.menu2 ul{
  list-style-type: none;
  padding-top: 4%;
}
.menu2a{
  text-decoration: none;
  display: inline-block;
  width: 96%;
  padding: 0 2%;
  color: black;
  border-radius: 3px;
  font-size: 1.2vw;
  margin: 1% 0;
}
.menu2a:hover{
  background: #273C6D;
  color: white;

}
.selected2{
  background: #273C6D;
  color: white;
}
.downnemustyle {
  position: absolute;
  border: 2px solid #273C6D;
  top: 100%;
  left: 0;
  z-index: 2;
  width: calc(100% - 4px);
  display: none;
}
.downnemustylepointer {
  position: absolute;
  width: 10%;
  height: 5%;
  left: 45%;
  top: calc(100% + 2px);
  z-index: 2;
  display: none;
}
.downnemustylepointer img {
  width: 100%;
}
.homeimg{
  width: 100%;
  height: 70%;
  overflow: hidden;
  position: relative;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
.home_img{
  width: 100%;
}

/* ===================================================== transactions and president page ================================================================= */
.guidesec{
  width: 100%;
  height:84%;
  min-height: 84%;
  display: inline-block;
  background: #bbc1cb;
  /* padding-top: 3%; */
}
.guideimg{
  width: 47%;
  height: 96%;
  float: right;
  /* background: black; */
  margin: 0 1.5%;
  overflow: hidden;
}
.guideimg img{
  width: 100%;
  border-radius: 3px;
}
.committeeimg{
  width: 97%;
  padding: 0 1.5%;
  margin: 1% 0;
  height: 60%;
  overflow: hidden;
  /* background: red; */
}
.committeeimg img{
  width: 100%;
  border-radius: 3px;
}
.committecategory{
  text-align: right;
  width: 97%;
  padding: 0 1.5%;
  color: black;
  font-weight: bold;
  font-size: 1.2vw;
}
.guidepdf{
  text-align: right;
  width: 47%;
  padding: 0 1.5%;
  height: 100%;
  color: black;
  font-weight: bold;
  font-size: 1.2vw;
}
.guidepdf ul{
  list-style-type: none;
  direction: rtl;
}
.guidepdf a{
  color: black;
  font-weight: bold;
  text-decoration: none;
  font-size: 1.3vw;
}
.guidepdf a:hover{
  color: #660000;
}
/* =====================================================members page ================================================================= */
.memberul{
  list-style-type: none;
}
.memberul a{
  float: right;
  width: 25%;
  height: 30%;
  overflow: hidden;
  /* border: 1px solid red; */
}
.memberli{
  width: calc(22% - 2px);
  float: right;
  margin: 0.5%;
  padding: 1%;
  height: 50%;
  text-align: right;
  border: 1px solid black;
  border-radius: 3px;
  position: relative;
}
.eventli{
  width: calc(100% - 2px);
  float: right;
}
.memberimg{
  height: 80%;
  overflow: hidden;
  border-radius: 3px;

}
.memberimg img{
  width: 100%;
}
.membername,.memberemail{
  width: 100%;
  color: black;
  font-weight: bold;
  font-size: 1.2vw;
}
.membername {
  padding-top: 4%;
}
.committee{
  border: thin solid #e1e1e1;
  width: calc(96% - 2px);
  border-radius: 3px;
  margin-bottom: 1%;
  padding: 2%;
  display: inline-block;
}
.committee_name{
  display: inline-block;
  border-bottom: thin solid black;
  width: 100%;
}
.committeename{

  text-align: right;
  font-size: 1.5vw;
  float: right;
  width: 100%;
}
.committee_president{
  border-bottom: 1px solid black;
  text-align: center;
  font-size: 1.5vw;
  width: 85%;
  float: left;
}
.committee_members{
  font-size: 1.5vw;
  text-align: center;
  width: 85%;
  float: right;
  direction: rtl;
  /* border-bottom: thin solid #e1e1e1; */
}
.committee_text{
  font-size: 1.5vw;
  text-align: center;
  width: calc(15% - 2px);
  float: right;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}
.structureimg{
  width: 50%;
  padding: 2%;
  margin: 0 auto;
}
.eventimg{
  width: 100%;
  /* border-radius: 3px; */
}
.eventname{
  font-size: 1.2vw;
  color: white;
}
.eventdate{
  /* position: absolute;
  top: 1%;
  right: 1%; */
  padding: 5px;
  font-size: 1.2vw;
  color: white;
  text-align: right;
  width: calc(100% - 10px);
  background: rgba(0, 0, 0, 1);
  direction: rtl;
  /* border-radius: 3px; */
}
.eventtitle{
  width: 97%;
  padding: 0 1.5%;
}
.event1date{
  font-size: 1.2vw;
  color: white;
  /* background: rgba(0, 0, 0, 1); */
  direction: rtl;
  color: black;
  font-weight: bold;
  color: #ad0606;
}
.event1name{
  font-weight: bold;
  font-size: 2vw;
  text-align: right;
}
.event1text{
  padding-top: 2%;
  direction: rtl;
}
.event1img{
  width: 97%;
  margin: 0 auto;
  max-height: 100%;
  overflow: hidden;
  height: 80%;
  text-align: center;
  position: relative;
  /* background: black; */
  /* height: 100%; */
  /* background: black; */
  /* padding: 0 1.5%; */
  border-radius: 3px;
}
.event1img img{
  /* padding: 1.5% 0; */
  /* width: 100%; */
  height: 100%;
  border-radius: 3px;
}
.eventtext{
  width: 97%;
  padding: 0 1.5%;
  font-weight: bold;
  font-size: 1.3vw;
  float: right;
  /* background: red; */
}
.contactimg{
  width: 100%;
}
.contactimg img{
  width: 100%;
}
.contactform{
  width: 96%;
  /* background: red; */
  padding: 2% 0;
  margin: 0 2%;
  text-align: right;
  display: inline-block;
}
.inputp{
  padding-top: 1%;
  padding-right: 1%;
  width: 99%;
  font-size: 1.2vw;
}
.inputtext{
  width: 100%;
  padding: 1%;
  direction: rtl;
  background: white;
  font-size: 1.2vw;
  border: none;
  border-radius: 3px;
}
.botton{
  width: 30%;
  padding: 1%;
  direction: rtl;
  background: #6C7B9C;
  color: white;
  font-size: 1.2vw;
  border: none;
  border-radius: 3px;
  margin-top: 1%;
  float: left;
  cursor: pointer;
}
.botton:hover{
  background: #273C6D;
}
.errors{
  float: left;
  color: red;
  font-weight: bold;
  padding: 0 2%;
  background: rgba(0, 0, 0, 0.8);
}
.success{
  width: 100%;
  text-align: center;
  background: #005813;
  color: white;
  padding: 1% 0;
  border-radius: 3px;
  font-size: 1.5vw;
}
.news,.news2{
  /* padding: 2% 0; */
  width: 100%;
  direction: rtl;
}
.news2{
  min-height: 84%;
  display: inline-block;
}
.event{
  /* height: 500px; */
  padding: 2%;
  width: 96%;
  background: white;
  font-weight: bold;
  margin: 2% 0;
  border-radius: 3px;
}
.event_title{
  width: 100%;
  font-weight: bold;
  font-size: 2vw;
}
.event_date{
  font-size: 1.2vw;
  width: 100%;
  color: #ad0606;
}
.event_image{
  width: 100%;
  height: 40%;
}
.events_image{
  width: 25%;
  height: 100%;
  overflow: hidden;
  float: right;
  position: relative;
}
.event_image img{
  height: 100%;
  min-width: 100%;
}
.event_video{
  width: 100%;
  height: 50%;
  position: relative;
}
.event_text{
  font-size: 1.2vw;
}
.menuphoneimg{
  display: none;
}
.headerphone{
  display: none;
}
.sliderimg{
  width: 97%;
  margin: 1% auto;
  /* border: 1px solid red; */
  height: 20%;
}
.sliderimg ul{
  list-style-type: none;
}
.sliderimg li{
  overflow: hidden;
  width: 23%;
  float: right;
  margin: 1%;
  height: 100%;
  /* background: black; */
}
.sliderimg img{
  width: 100%;
  cursor: pointer;
  opacity: 0.5;
}
.active{
  opacity: 1 !important;
}
.controls{
  position: absolute;
  height: 10%;
  z-index: 1;
  width: 100%;
}
.moveleft,.moveleft1{
  background: #e1e1e1;
  opacity: 0.5;
  height: 100%;
  width: 4%;
  padding: 0 1%;
  float: left;
  cursor: pointer;
}
.moveleft img,.moveright img,.moveleft1 img,.moveright1 img{
  height: 70%;
}
.moveright,.moveright1{
  background: #e1e1e1;
  opacity: 0.5;
  height: 100%;
  width: 4%;
  padding: 0 1%;
  float: right;
  cursor: pointer;
}
.moveleft:hover,.moveright:hover{
  opacity: 1;
}
.ulslider{
  display: none;
}
.slidenav{
  width: 100%;
  /* float: left; */
  text-align: center;
  height: 6%;
  position: absolute;
  top: 94%;
  background: rgba(0, 0, 0, 0.56);
  list-style-type: none;
}
.bullet2{
  padding: 0.2% 2%;
  display: inline-block;
  /* float: left; */
  border-radius: 3px;
  background: white;
  margin: 0 0.3%;
  /* transition: 1s; */
  cursor: pointer;
}
.active3{
  background: #3b5998;
}
#loadMore{
  background: white;
  color: black;
  border-radius: 3px;
  text-align: center;
  padding: 1% 0;
  margin-bottom: 2%;
  font-size: 1.4vw;
  cursor: pointer;
}
.numberimage{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  background: rgba(73, 73, 73, 0.5);
  color: white;
  font-size: 5vw;
}
.desiciontext{
  font-size: 1.2vw;
}