/*  Fonts  */
.font-cairo {font-family: 'Cairo', sans-serif !important; letter-spacing: -1px !important;}
.font-amiri {font-family: 'Amiri', serif !important; letter-spacing: 0 !important;}
.font-openSans {font-family: "Open Sans", "Helvetica", "Arial", sans-serif !important; }



/* color over rides */
:root {
    --vlGrey: #EAE7E7;
    --lGrey: #C2C2C2;
    --mGrey: #564C4C;
    --dGrey: #1C1A1A;
		--main-color: #A20014;
    --support-color: #E71D36;
    --s-blue: #8DA7BE ;
    --s-orange: #FE5F55;
    --s-purple: #987284;
}

/* coloring */
.csVLG { color: var(--vlGrey);}
.csLG { color: var(--lGrey);}
.csMG {  color: var(--mGrey);}
.csDG {  color: var(--dGrey) !important;}
.csM {  color: var(--main-color)!important;}
.csS {  color: var(--support-color);}
.csB {  color: var(--s-blue);}
.csO {  color: var(--s-orange);}
.csP {  color: var(--s-purple);}
.csW {  color: #fff;}


.bgVLG { background-color: var(--vlGrey);}
.bgLG { background-color: var(--lGrey);}
.bgMG {  background-color: var(--mGrey);}
.bgDG {  background-color: var(--dGrey);}
.bgM {  background-color: var(--main-color);}
.bgS {  background-color: var(--support-color);}
.bgW {  background-color: #fff;}



/* tags */
.img-rounded {  border-radius: 12px 12px 0 0; }
.img-desc-rounded {border-radius: 0 0 12px 12px; background-color: var(--vlGrey); height: 2.5em;padding-top: 0.25em;}

.close:focus, .close:hover {
  color: #fff;
}

.at-expanding-share-button.at-expanding-share-button-desktop .at-expanding-share-button-toggle-bg>span {
  background-color: var(--main-color)!important;
}

/* custom-timeline*/

.custom-timeline-bg {
  background-color: var(--main-color);
  height: 100%;
}

.custom-timeline-circle {
  font-size: 1.75rem;
  width: 60px;
  height: 60px;
  line-height: 65px;
  font-weight: 800;
  border-radius: 50%;
  background-color: #fff;
  color: var(--main-color) !important;
  z-index: 2;
}

.how-it-works.row {
  display: flex;
}



.how-it-works.row .col-2 {
  display: inline-flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}
.how-it-works.row .col-2::after {
  content: "";
  position: absolute;
  border-left: 3px solid#fff;
  z-index: 1;
}

.how-it-works.row .col-2.bottom::after {
  height: 50%;
  left: 50%;
  top: 50%;
}
.how-it-works.row .col-2.full-right::after {
  height: 100%;
  left: calc(50% - 0px);
}

.how-it-works.row .col-2.full-left::after {
  height: 100%;
  left: calc(50% - 3px);
}

.how-it-works.row .col-2.top::after {
  height: 50%;
  left: 50%;
  top: 0;
}


.how-it-works.row .col-2.top-end::after {
  height: 50%;
  left: 48.5%;
  top: 0;
}


.custom-timeline div {
  padding: 0;
  height: 40px;
}
.custom-timeline hr {
  border-top: 3px solid #fff;
  margin: 0;
  top: 17px;
  position: relative;
}

.custom-timeline .col-2 {
  display: flex;
  overflow: hidden;
}

.custom-timeline .corner {
  border: 3px solid #fff;
  width: 100%;
  position: relative;
  border-radius: 15px;
}
.custom-timeline .top-right {
  right: 48.5%;
  top: -50%;
}

.custom-timeline .left-bottom {
  right: -48.5%;
  top: calc(50% - 3px);
}
.custom-timeline .top-left {
  right: -48.5%;
  top: -50%;
}
.custom-timeline .right-bottom {
  right: 48.5%;
  top: calc(50% - 3px);
}



#chart_wrap {
  position: relative;
  padding-bottom: 100%;
  height: 0;
  overflow: hidden;
}

.charts-holder {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
}


.gender-salary {
  margin-top: -15px;
}

.num{
  margin-bottom: 0px !important;
}

/*grids */
.reverse {
  display: grid;
  width: 100%;
  grid-gap: 2em;
  grid-template-columns: 4fr 8fr;
  grid-template-areas: "content-right content-left";  }

  .content-left  {grid-area: content-left; }
  .content-right {grid-area: content-right; }


@media (max-width: 991px) {
  .reverse {
  grid-template-columns: 1fr;
  grid-template-areas: "content-left" "content-right";  }
}


/* mobile custom  */
#header-mobile {
  height: 100vh;
  display: none;}

@media (max-width: 720px) {
#header-video {display: none;}
#header-mobile {display: block;}
  .num{
    margin-top: 24px
  }
}