@font-face {
    font-family: 'Sakkal_Majalla';
    src: url('../fonts/subset-SakkalMajalla.woff2') format('woff2'),
        url('../fonts/subset-SakkalMajalla.woff') format('woff'),
        url('../fonts/subset-SakkalMajalla.svg#SakkalMajalla') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Yassin_MagdySoliman';
    src: url('../fonts/subset-Yassin_MagdySoliman-Regular.eot');
    src: local('../fonts/Yassin_MagdySoliman-Regular'),
        url('../fonts/subset-Yassin_MagdySoliman-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/subset-Yassin_MagdySoliman-Regular.woff2') format('woff2'),
        url('../fonts/subset-Yassin_MagdySoliman-Regular.woff') format('woff'),
        url('../fonts/subset-Yassin_MagdySoliman-Regular.ttf') format('truetype'),
        url('../fonts/subset-Yassin_MagdySoliman-Regular.svg#Yassin_MagdySoliman-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}




.directionRTL
{
	direction: rtl !important;
}

.spaceTop50
{
	padding-top: 50px !important;
}

.spacebuttom50
{
	padding-buttom: 50px !important;
}

.spaceTop25
{
	padding-top: 25px !important;
}

.spacebuttom25
{
	padding-buttom: 25px !important;
}

.handCursor
{
	cursor: pointer !important;
}

.mainFont
{
	font-family: 'Sakkal_Majalla', serif !important;
}

.fontSize16
{
	font-size: 16px !important;
}

.fontSize18
{
	font-size: 18px !important;
}

.fontSize20
{
	font-size: 20px !important;
}


.fontSize26
{
	font-size: 26px !important;
}


.hiddenElement
{
	display: none !important;
}






.card-big-shadow {
  max-width: 320px;
  position: relative;
}
.card-big-shadow:before {
  background-image: url("../img/shadow.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  bottom: -12%;
  content: "";
  display: block;
  left: -12%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}









/* LOADING SPINNER WHICH WILL WORK ON ALL BROWSERS */
/* Absolute Center Spinner */
#spinnerDiv {
  position: fixed;
  z-index: 9999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
#spinnerDiv:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

/* :not(:required) hides these rules from IE9 and below */
#spinnerDiv:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

#spinnerDiv:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1900ms infinite linear;
  -ms-animation: spinner 1900ms infinite linear;
  -o-animation: spinner 1900ms infinite linear;
  animation: spinner 1900ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* =============================================== */