@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  scroll-behavior: smooth; }

body {
  direction: rtl;
  font-family: 'Droid Arabic Kufi', serif; }

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

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

body::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.72, #c93737), color-stop(0.72, #c20101), color-stop(0.86, #c93737)); }

.scrolltop {
  position: fixed;
  right: 5px;
  bottom: 10px;
  z-index: 4;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  color: white;
  background-color: burlywood;
  font-size: 15pt;
  border: 1px solid #a0a0ff;
  cursor: pointer;
  transition-duration: 500ms; }
  .scrolltop:hover {
    background-color: #e0922b;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7); }
  .scrolltop:active {
    bottom: 12px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.801); }

/*

    Start loading icon

*/
.loading {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: #2b347c;
  top: 0;
  left: 0;
  z-index: 100000; }

.sk-folding-cube {
  margin: 0px auto;
  width: 70px;
  height: 70px;
  position: relative;
  top: calc(50% - 35px);
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg); }

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1); }

.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
  animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%; }

.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
  transform: scale(1.1) rotateZ(90deg); }

.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
  transform: scale(1.1) rotateZ(180deg); }

.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
  transform: scale(1.1) rotateZ(270deg); }

.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s; }

.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s; }

.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s; }

@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0; }
  25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1; }
  90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0; } }
@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0; }
  25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
    transform: perspective(140px) rotateX(0deg);
    opacity: 1; }
  90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
    transform: perspective(140px) rotateY(180deg);
    opacity: 0; } }
/* End Loading Icon*/
header {
  /******** logo-div ********/ }
  header .date-social {
    height: 40px;
    width: 100%;
    background-color: #009255;
    overflow: hidden; }
    header .date-social .date-div {
      height: 100%;
      min-width: 20%;
      float: right;
      text-align: center;
      justify-content: center; }
      header .date-social .date-div .date {
        color: #cacaca;
        display: inline-block;
        margin: 7px 16px 0 0px; }
      @media screen and (max-width: 380px) {
        header .date-social .date-div .date {
          font-size: 14px;
          margin: 10px 16px 0 0px; } }
    header .date-social .social-links {
      height: 100%;
      min-width: 30%;
      float: left;
      overflow: hidden;
      text-align: center;
      justify-content: center; }
      header .date-social .social-links .links {
        margin-left: 20px; }
        header .date-social .social-links .links a i {
          font-size: 15pt;
          color: white;
          padding: 10px;
          transition: all 250ms ease-in-out; }
          header .date-social .social-links .links a i:hover {
            color: red; }
        @media screen and (max-width: 380px) {
          header .date-social .social-links .links a i {
            font-size: 16px;
            padding: 12px 7px; } }
  header .logosearch-div {
    background: linear-gradient(to right, #00571a, #003b36); }
    header .logosearch-div .logo-div {
      position: relative;
      text-align: right;
      padding: 20px;
      overflow: hidden; }
      header .logosearch-div .logo-div a {
        display: inline-block;
        height: 100px;
        width: 400px;
        max-width: 100%;
        position: relative;
        overflow: hidden;
        right: 0; }
        header .logosearch-div .logo-div a .logo {
          position: absolute;
          width: 100%;
          height: 100%; }
    header .logosearch-div div {
      position: relative;
      min-height: 100px;
      justify-content: center; }
      header .logosearch-div div .searchBox {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #ffffff;
        height: 46px;
        border-radius: 40px;
        padding: 5px; }
      header .logosearch-div div .searchBox:hover > .searchInput {
        width: 200px;
        padding: 0 6px; }
      header .logosearch-div div .searchBox:hover .searchButton {
        background: #ffe8e8;
        color: #2f3640; }
      header .logosearch-div div .searchButton {
        color: white;
        float: left;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: #2f3640;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.4s;
        font-size: 14px; }
      header .logosearch-div div .searchInput {
        border: none;
        background: none;
        outline: none;
        float: right;
        padding: 0;
        color: #ce4848;
        font-size: 16px;
        transition: 0.4s;
        line-height: 35px;
        width: 0px; }
      @media screen and (max-width: 620px) {
        header .logosearch-div div .searchBox:hover > .searchInput {
          width: 200px;
          max-width: calc(100% - 35px);
          padding: 0 6px; } }

/*# sourceMappingURL=header.css.map */