@font-face {
  font-family:'Avenir';
  src:url('../fonts/Avenir/Avenir-Book.woff2') format('woff2'), url('../fonts/Avenir/Avenir-Book.woff') format('woff');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:'Avenir';
  src:url('../fonts/Avenir/Avenir-Medium.woff2') format('woff2'), url('../fonts/Avenir/Avenir-Medium.woff') format('woff');
  font-weight:500 600 700;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:'Avenir';
  src:url('../fonts/Avenir/Avenir-Heavy.woff2') format('woff2'), url('../fonts/Avenir/Avenir-Heavy.woff') format('woff');
  font-weight:800 900;
  font-style:normal;
  font-display:swap;
}
@font-face {
  font-family:'Avenir';
  src:url('../fonts/Avenir/Avenir-Oblique.woff2') format('woff2'), url('../fonts/Avenir/Avenir-Oblique.woff') format('woff');
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face {
  font-family:'Avenir';
  src:url('../fonts/Avenir/Avenir-HeavyOblique.woff2') format('woff2'), url('../fonts/Avenir/Avenir-HeavyOblique.woff') format('woff');
  font-weight:700 800 900;
  font-style:italic;
  font-display:swap;
}

:root {
  --border-radius:5px;
  --box-shadow:2px 2px 10px;
  --color:#e31e27;
  --color-accent:#951b20;
  --color-body:#535353;
  --color-dark:#982624;
  --color-bg:#fff;
  --color-bg-secondary:#e9e9e9;
  --color-secondary:#e31e27;
  --color-secondary-accent:#920de90b;
  --color-shadow:#f4f4f4;
  --color-text:#000;
  --color-text-secondary:#999;
  --color-dark:#313D48;
  --font-family:'Roboto', sans-serif;
  --hover-brightness:1.2;
  --justify-important:center;
  --justify-normal:left;
  --line-height:1.5;
  --width-card:30%
}
html, body, header {
  height:100%
}
body {
  font-family:"Avenir", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}
body:lang(ar) {
  font-family:'Arabic'
}
a {
  color:inherit;
  text-decoration:none;
}
a:hover {
  color:var(--color)
}
button a:hover {
  color:inherit;
}
.btn, .btn:focus, .btn-check:focus+.btn-primary, .btn-primary:focus, .btn-check:focus+.btn, .form-control:focus, .form-select:focus, .form-check-input:focus, .btn-check:checked+.btn-primary:focus, .btn-check:active+.btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show>.btn-primary.dropdown-toggle:focus, .btn-check:focus+.btn-secondary, .btn-secondary:focus, .btn-check:checked+.btn-secondary:focus, .btn-check:active+.btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show>.btn-secondary.dropdown-toggle:focus {
  box-shadow:none;
}
.btn, .btn:focus, .navbar-toggler, .navbar-toggler:focus, .page-link, .page-link:focus, .btn-close, .btn-close:focus {
  box-shadow:none!important;
}
header {
  height:720px;
  position:relative;
  display:flex;
  flex-direction:column;
}
header .navbar {
  background-color:#fff;
  background-color:rgba(255,255,255,0.78);
  padding-top:0;
  padding-bottom:0;
}
header .navbar:lang(ar) {
  font-family:'Arabic';
  font-weight:700;
  font-style:normal;
}
header .navbar-brand {
  padding:0;
}
header .navbar-brand:hover {
  filter:brightness(1.2)
}
header .navbar-nav {
  margin-bottom:0;
  margin-right:auto;
}
header .navbar-collapse {
  margin-top:.75rem;
  height:5rem;
}
header .nav-item {
  position:relative;
}
header .nav-item:nth-child(5) {
  font-weight:900;
}
header .nav-item .nav-link {
  padding-bottom:1.3rem;
  padding-top:2.2rem;
  color:var(--color-dark)!important;
  text-transform:capitalize;
  border-bottom:3px solid transparent;
}
header .nav-item .nav-link.dropdown-toggle::after {
  display:none;
}
header .nav-item .nav-link:lang(ar) {
  font-size:1rem;
}
header .nav-item:hover .nav-link, header .nav-item.active .nav-link {
  border-bottom:3px solid var(--color)
}
header .nav-item .dropdown-menu {
  display:none;
  background-color:#fff;
  background-color:rgba(255,255,255,0.78);
  content:" ";
  position:absolute;
  min-width:100%
}
header .nav-item:hover .dropdown-menu {
  display:block;
}
header .nav-item .dropdown-item:hover {
  color:var(--color)
}
header .nav-item .dropdown-item.active, header .nav-item .dropdown-item:active {
  color:#fff;
  text-decoration:none;
  background-color:var(--color);
  color:#fff!important;
}
header .nav-divider {
  font-weight:900;
  font-size:1.5rem;
  margin:auto 1.5rem;
  color:#fff;
}
header .nav-divider i {
  font-size:.35rem;
}
header .nav-divider:last-child i {
  display:none;
}
header .navbar-extra>* {
  width:min-content;
  display:inline-block;
}
header #navbar.collapse.show, #navbar.collapsing {
  height:8rem;
  margin-top:0;
}
header #navbar.collapsing {
  transition:height .10s ease;
}
header .navbar-light .navbar-toggler {
  color:rgba(0,0,0,.55);
  border:none;
}
header .navbar #support-btn {
  background:#d9203a;
  color:#fff;
  border:1px solid #d9203a;
  border-radius:3rem;
  margin-right:4rem;
  margin-top:.6rem;
  padding:.35rem 1.5rem;
  text-transform:capitalize;
  font-size:.85rem;
  font-weight:700;
}
header .navbar #support-btn:hover {
  background:#fff;
  color:#d9203a;
}
header .navbar #login-btn {
  color:gray;
  margin-right:3rem;
  font-weight:700;
  text-transform:capitalize;
  display:none;
}
header .navbar #login-btn>i {
  margin-right:.25rem;
}
header .navbar #lang-selector {
  font-size:.85rem;
  font-weight:700;
  text-transform:uppercase;
  margin-right:1.5rem;
  right:0;
  position:absolute;
  top:50%
}
header .navbar #lang-selector #lang-dropdown {
  color:gray;
  text-decoration:none;
  padding-bottom:.2rem;
  border-bottom:2px solid gray;
}
header .navbar #lang-selector .dropdown-menu {
  min-width:0;
  font-size:.85rem;
  padding:.25rem 0;
}
header .navbar #lang-selector .dropdown-item {
  font-weight:700;
  text-transform:uppercase;
}
header .navbar #lang-selector .dropdown-item:focus, header .navbar #lang-selector .dropdown-item:hover {
  color:#fff;
  background-color:var(--color)
}
@media(max-width:1471.98px) {
  header .nav-divider {
    margin:auto 1rem;
  }
  header .navbar #lang-selector {
    margin-right:1rem;
  }

}
@media(max-width:1370px) {
  header .nav-divider {
    margin:auto .5rem;
  }
  header .navbar #login-btn {
    margin-right:.75rem;
    font-size:.85rem;
  }
  header .navbar #lang-selector {
    font-size:.85rem;
    margin-right:1rem;
  }

}
@media(max-width:1263.98px) {
  header .navbar-brand {
    margin-right:.85rem;
  }
  header .navbar #support-btn {
    padding:.35rem .95rem;
    font-size:.85rem;
  }
  header .nav-divider {
    margin:auto .22rem;
  }
  header .nav-item .nav-link {
    font-size:.92rem;
    padding-left:.45rem!important;
    padding-right:.45rem!important;
  }
  header .nav-item .nav-link:lang(ar) {
    font-size:1rem;
  }

}
@media(max-width:1129.98px) {
  header .navbar #support-btn {
    margin-right:3.25rem;
    margin-top:.6rem;
    padding:.35rem .85rem;
    font-size:.72rem;
    font-weight:700;
  }
  header .navbar #support-btn:lang(ar) {
    font-weight:700;
  }
  header .nav-divider {
    margin:auto .22rem;
  }
  header .nav-item .nav-link {
    font-size:.85rem;
  }
  header .nav-item .nav-link:lang(ar) {
    font-size:1rem;
  }

}
@media(max-width:1065.98px) {
  header .navbar-brand {
    margin-right:.85rem;
  }
  header .navbar #support-btn {
    margin-right:3rem;
    margin-top:.6rem;
    padding:.35rem .85rem;
    font-size:.72rem;
    font-weight:700;
  }
  header .navbar #support-btn:lang(ar) {
    font-weight:700;
  }
  header .nav-divider {
    margin:auto .22rem;
  }
  header .nav-item .nav-link {
    font-size:.81rem;
    padding-left:.25rem!important;
    padding-right:.25rem!important;
  }
  header .nav-item .nav-link:lang(ar) {
    font-size:1rem;
  }
  header .navbar #lang-selector {
    margin-right:.5rem;
  }

}
@media(max-width:991.98px) {
  header .nav-divider {
    display:none;
  }
  header .navbar-brand {
    margin:1rem;
  }
  header .navbar-collapse {
    display:flex;
  }
  header .navbar-collapse.collapse.show {
    margin-top:0;
    display:flex;
    flex-wrap:wrap;
    padding:1rem;
    padding-top:0;
  }
  header #navbar.collapse.show {
    height:auto;
    padding-right:0;
  }
  header #navbar.collapsing {
    height:auto;
    flex-wrap:wrap;
    padding:1rem;
    padding-right:0;
    padding-top:0;
  }
  header .navbar-brand {
    margin-left:0;
  }
  header .navbar-nav {
    margin:0;
    width:100%;
    margin-bottom:.5rem;
  }
  header .navbar-extra {
    width:100%
  }
  header .nav-item {
    margin-bottom:.5rem;
    width:100%;
    max-width:calc(100vw - 2rem);
    position:relative;
  }
  header .nav-item::after {
    content:" ";
    position:absolute;
    display:block;
    border-top:1px solid #c4bfbf;
    width:100vw;
    transform:translateX(-1.75rem)
  }
  header .nav-item .nav-link {
    padding:0;
    font-size:1rem;
    font-weight:400;
    width:max-content;
  }
  header .nav-item.menu .nav-link::after {
    display:inline-block;
    margin-left:.255em;
    vertical-align:.255em;
    content:"";
    border-top:.3em solid;
    border-right:.3em solid transparent;
    border-bottom:0;
    border-left:.3em solid transparent;
    margin-bottom:-.1em;
    height:auto;
    position:static;
  }
  header .nav-item:hover .dropdown-menu {
    display:none;
  }
  header .nav-item.active .dropdown-menu {
    display:block;
    position:static;
    background:#e3e3e3;
    border-radius:0;
    border:0;
    transform:translateX(-1.75rem);
    padding-left:1rem;
    width:100vw;
  }
  header .navbar #support-btn {
    margin-top:0;
    padding:.35rem 1rem;
    font-size:.85rem;
  }
  header .navbar #lang-selector {
    margin-right:.5rem;
    margin-left:1rem;
    margin-bottom:.25rem;
    width:max-content;
    display:inline-block;
    position:absolute;
    top:1.9rem;
    right:4rem;
  }

}
@media(max-width:767.98px) {
  header .navbar-brand {
    margin:.5rem;
  }
  header .navbar #lang-selector {
    top:1.4rem;
  }

}
header .alert {
  color:#fff;
  background-color:#e31e2791;
  border:0;
  border-radius:0;
  text-align:center;
  padding:.675rem 3rem;
  margin-bottom:0;
  position:absolute;
  width:100%;
  z-index:1;
}
header .alert .alert-link {
  color:inherit;
  font-style:italic;
}
header .alert .alert-body {
  display:inline-block;
}
header .alert .alert-date {
  display:inline;
  font-weight:900;
  direction:ltr;
}
header .alert .btn {
  color:#fff;
  position:absolute;
  right:1vw;
  top:50%;
  transform:translateY(-50%);
  background-color:transparent!important;
  outline:none!important;
  border:none!important;
}
header .alert .btn:hover {
  color:lightgray!important;
  filter:unset!important;
}
header .alert .btn:focus {
  box-shadow:none;
}
header .alert-body p {
  margin:auto;
}
@media(max-width:991.98px) {
  header .alert {
    padding:.5rem 3rem;
    margin:0;
    position:relative;
  }

}
header .social-list {
  display:flex;
  flex-direction:column;
  margin-left:1rem;
  padding-left:0;
  margin-bottom:0;
  list-style-type:none;
  position:absolute;
  bottom:1rem;
}
header .social-link {
  background-color:transparent;
  border:none;
  margin-bottom:.75rem;
}
header .social-link i {
  font-size:1.1rem;
  color:#fff;
  border:2px solid #fff;
  padding:.35rem;
  border-radius:100px;
}
header .social-link.facebook i {
  padding:.35rem .55rem;
}
header .social-link.instagram i {
  padding:.35rem .40rem;
}
header .social-link.twitter i {
  padding:.35rem .35rem;
}
header .social-link.linkedin i {
  padding:.35rem .40rem;
}
header .social-link.youtube i {
  font-size:1.05rem;
  padding:.37rem .3rem;
}
header .social-link:hover i {
  background-color:var(--color)
}
header section#intro {
  background-image:url("https://dsclebanon.org/static/assets/backgrounds/homepage_banner.jpg");
  background-attachment:scroll;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  height:100%
}
header section#intro .container {
  width:80%;
  margin-top:12rem;
}
header section#intro .title {
  color:#fff;
  text-transform:uppercase;
  font-weight:700;
  font-size:3.5rem;
}
header section#intro .subtitle {
  color:#fff;
  font-weight:700;
  font-size:1.77rem;
}
header section#intro .subtitle:lang(fr) {
  font-size:1.92rem;
}
header section#intro .slogan {
  color:#fff;
  text-transform:uppercase;
  margin-top:1rem;
  font-weight:700;
  display:none;
}
header section#intro .content button {
  padding:.5rem 2rem;
  background:transparent;
  border-radius:5rem;
  border-color:#fff;
  border-width:2px;
  color:#fff;
  text-transform:capitalize;
  margin-top:1rem;
  position:relative;
  width:15rem;
}
header section#intro .content button:hover {
  background:var(--color)
}
header section#intro .content button i {
  position:absolute;
  right:1rem;
  top:.75rem;
}
header .hotline {
  text-transform:uppercase;
  color:white;
  font-size:19px;
  font-weight:900;
  border-radius:1rem;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  width:12rem;
  position:absolute;
  bottom:0;
  right:0;
  background-color:var(--color);
  text-align:center;
}
header:lang(ar) .hotline {
  left:0;
  right:auto;
}
header .hotline .hotline-number {
  display:inline-block;
  position:relative;
  top:5px;
  font-size:1.1rem;
  color:#fff;
  text-align:center;
}
header .hotline .hotline-number .hotline-tag {
  text-transform:uppercase;
  margin:auto;
  font-size:.75rem;
  width:100%;
  padding-bottom:.125rem;
  border-bottom:1px solid #fff;
  display:none;
}
header .hotline .hotline-number .hotline-tag:lang(ar) {
  font-size:1.2rem;
}
header .hotline .hotline-number .hotline-link {
  color:#fff;
  font-size:1.35rem;
  margin:auto;
  width:100%
}
header .hotline .hotline-number .hotline-link a:hover {
  color:#fff;
}
header .hotline .hotline-icon {
  margin:5px;
  margin-left:0;
  margin-top:9px;
  max-width:100%;
  height:auto;
}
header .hotline::after {
  content:'';
  width:40px;
  height:30px;
  border:5px solid var(--color);
  position:absolute;
  bottom:-5px;
  border-top:0;
}
header .hotline::after {
  border-left:0;
  -moz-border-radius:0 0 1rem 0;
  -webkit-border-radius:0 0 1rem 0;
  border-radius:0 0 1rem 0;
  left:-2.2rem;
}
header:lang(ar) .hotline::after {
  right:-2.2rem;
  left:auto;
  border-radius:0 0 0 1rem;
  border-left:5px solid var(--color);
  border-right:0;
}
@media(max-width:991.98px) {
  header {
    height:auto!important;
    background-image:none!important;
  }
  header .navbar {
    background-color:#dedede;
  }
  header section#intro {
    background-image:url("https://dsclebanon.org/static/assets/backgrounds/homepage_banner.jpg");
    height:calc(720px - 5.5rem);
    background-attachment:scroll;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    padding-top:2rem;
    position:relative;
  }
  header section#intro .container {
    margin-top:10rem;
  }
  header section#intro .content:lang(ar) {
    padding-right:50%
  }

}
@media(max-width:767.98px) {
  header section#intro {
    background-image:url("https://dsclebanon.org/static/assets/backgrounds/homepage_mobile_banner.jpg")
  }
  header section#intro .container {
    width:95%
  }
  header section#intro .title {
    font-size:3.25rem;
  }
  header section#intro .subtitle {
    font-size:1.25rem;
  }
  header section#intro .slogan {
    font-size:1rem;
  }
  header .hotline {
    left:50%;
    transform:translateX(-50%)
  }
  header:lang(ar) .hotline {
    left:50%
  }
  header .hotline::after {
    right:-2.2rem;
    left:auto;
    border-radius:0 0 0 1rem;
    border-left:5px solid var(--color);
    border-right:0;
  }
  header .hotline::before {
    content:'';
    width:40px;
    height:30px;
    border:5px solid var(--color);
    position:absolute;
    bottom:-5px;
    border-top:0;
    border-left:0;
    -moz-border-radius:0 0 1rem 0;
    -webkit-border-radius:0 0 1rem 0;
    border-radius:0 0 1rem 0;
    left:-2.2rem;
  }

}
@media(max-width:576.98px) {
  header section#intro {
    height:calc(100vh - 5.5rem)
  }

}
main .container {
  max-width:1140px;
}
main h5 {
  color:var(--color);
  font-weight:900;
  margin-bottom:1rem;
}
main h5:lang(ar) {
  font-weight:900;
}
main h5::after {
  content:'';
  display:block;
  margin-top:1rem;
  height:2px;
  width:2.5rem;
  background:var(--color)
}
main p {
  color:var(--color-body);
  font-weight:500;
}
.carousel-indicators [data-bs-target] {
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:5px;
  margin-left:5px;
}
.full-width {
  left:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  max-width:100vw;
  position:relative;
  right:50%;
  width:100vw;
}
.view {
  position:relative;
  cursor:default;
}
.view img, .view video {
  position:relative;
  display:block;
}
.overlay .mask:hover, .overlay .mask:focus, .overlay .mask.active, .overlay .mask:active {
  opacity:1;
  background-color:rgba(244,67,54,.7)
}
.overlay .mask:hover img {
  position:relative;
  bottom:3rem;
}
.overlay .mask:hover p.description {
  display:block!important;
}
.overlay .mask:hover button {
  display:block!important;
  position:relative;
  bottom:11rem;
}
.overlay .mask:hover>i {
  margin-top:3rem!important;
}
.overlay .mask {
  opacity:1;
  -webkit-transition:all .4s ease-in-out;
  -o-transition:all .4s ease-in-out;
  transition:all .4s ease-in-out;
  background-color:rgba(20,20,20,.3)
}
.view .mask {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  background-attachment:fixed;
}
.view, .view .mask, .waves-effect {
  overflow:hidden;
}
@media(max-width:991.98px) {
  #get-involved .overlay .mask:hover p.description {
    bottom:10rem;
  }
  .overlay .mask:hover button {
    bottom:10rem;
  }

}
footer {
  background-color:#b3b3b380;
  color:#6c757d;
}
footer h5 {
  font-weight:700;
  margin-bottom:1.5rem;
}
footer a {
  color:inherit;
  text-decoration:none;
}
footer a:hover {
  color:var(--color)
}
footer p {
  margin-bottom:.5rem;
}
footer p>i {
  margin-right:1rem;
}
footer .social-list a {
  margin-right:.5rem;
  border:1px solid;
  border-radius:50%;
  display:inline-block;
  width:1.5rem;
  height:1.5rem;
  position:relative;
}
footer .social-list a:hover {
  color:var(--color)
}
footer .social-list i {
  font-size:.9rem;
  font-size:.9rem;
  padding:0!important;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%)
}
footer .mailing-list p {
  margin-top:1rem;
}
footer .mailing-list .input-group {
  background-color:gray;
  border-radius:.5rem;
  padding:.25rem;
  font-size:.85rem;
  width:100%;
  max-width:300px;
}
footer .mailing-list .input-group input {
  border-radius:.5rem!important;
  font-size:.85rem;
  padding-top:.25rem;
  padding-bottom:.25rem;
}
footer .mailing-list .input-group input.invalid {
  background:rgba(230,80,87,0.56)
}
footer .mailing-list .input-group input.valid {
  background:rgba(170,230,202,0.67)
}
footer .mailing-list .input-group button {
  border:none;
  color:#fff;
  padding:.15rem .35rem;
  font-size:.85rem;
  box-shadow:none!important;
  outline:none;
  border:none;
}
footer .mailing-list .input-group button:hover {
  background:transparent;
  color:var(--color)
}
footer #copyright {
  background-color:var(--color);
  font-size:.85rem;
  padding:.2rem 0;
  text-align:center;
  color:#fff;
  font-weight:700;
}
@media(max-width:991.98px) {
  footer .social-list a {
    margin-right:.15rem;
  }
  footer #footer-logo {
    display:none;
  }
  footer .row {
    padding-right:.5rem;
    padding-left:.5rem;
  }
  footer .row>div {
    text-align:left;
  }
  footer .mailing-list .input-group {
    width:100%
  }

}
.tab-content .tab-title {
  margin:auto;
  text-align:center;
  text-transform:uppercase;
  color:var(--color);
  font-size:1.5rem;
  font-weight:700;
  display:none;
}
.tab-content .tab-title.space-below {
  margin-bottom:1rem;
}
.tab-content .tab-title.space-above {
  margin-top:1rem;
}
.tab-content .tab-title span {
  margin:0;
}
.tab-content .tab-title .tab-control {
  cursor:pointer;
  color:lightgray;
  padding:1rem;
}
.tab-content .tab-title .tab-control:hover {
  transform:scale(1.04)
}
.tab-content .tab-title .tab-control:active {
  transform:scale(.96)
}
@media(max-width:991.98px) {
  .tab-content .tab-title {
    display:block;
  }

}
@media(max-width:767.98px) {
  .tab-content .tab-title {
    font-size:1.25rem;
  }

}
i.fa-chevron-right:lang(ar), i.fa-chevron-left:lang(ar) {
  transform:rotateZ(-180deg)
}
.navbar:lang(ar) .navbar-nav {
  margin-left:auto;
  margin-right:0;
}
.navbar:lang(ar) .nav-item .dropdown-menu {
  direction:rtl;
  text-align:right;
}
.navbar:lang(ar) #lang-selector {
  margin-right:0;
  margin-left:2rem;
  left:0;
  right:auto;
}
.navbar:lang(ar) #lang-selector .dropdown-menu {
  right:0;
  left:auto;
}
.navbar:lang(ar) #support-btn {
  min-width:8rem;
  margin-right:0;
  margin-left:4rem;
  padding-bottom:.5rem;
}
@media(max-width:1125.98px) {
  .navbar:lang(ar) #support-btn {
    min-width:6rem;
  }

}
@media(max-width:991.98px) {
  .navbar:lang(ar) .navbar-nav {
    padding-right:0;
  }
  .navbar:lang(ar) .nav-item::after {
    transform:translateX(.75rem)
  }
  .navbar:lang(ar) .nav-item.active .dropdown-menu {
    transform:translateX(.75rem)
  }
  .navbar:lang(ar) #support-btn {
    min-width:8rem;
  }
  .navbar:lang(ar) .nav-item.menu .nav-link::after {
    margin-right:.255em;
    margin-left:0;
  }
  .navbar:lang(ar) #lang-selector {
    margin-right:2rem;
    margin-left:0;
    top:1.9rem;
    right:auto;
    left:4rem;
  }

}
@media(max-width:767.98px) {
  .navbar:lang(ar) #lang-selector {
    top:1.4rem;
  }

}
header section#intro .content:lang(ar) {
  direction:rtl;
  text-align:start;
  padding-right:60%
}
@media(max-width:991.98px) {
  header section#intro .content:lang(ar) {
    padding-right:50%
  }

}
header section#intro .content:lang(ar) button {
  text-align:start;
}
header section#intro .content:lang(ar) button i {
  right:auto;
  left:1rem;
}
@media(max-width:767.98px) {
  header section#intro .content:lang(ar) {
    direction:rtl;
    padding-right:0;
  }

}
footer:lang(ar) section#footer .row>div {
  text-align:right!important;
}
footer:lang(ar) section#footer p>i {
  margin-right:0;
  margin-left:1rem;
}
[lang="ar"] .tab-content .tab-title .tab-control:hover {
  transform:scale(1.04) rotateZ(-180deg)
}
[lang="ar"] .nav-tabs>.nav-item .nav-link {
  border-right:0;
  border-left:2px solid #cbc9c9;
}
[lang="ar"] .nav-tabs>.nav-item:first-child .nav-link::before {
  right:-12px;
}
[lang="ar"] .nav-tabs>.nav-item:last-child .nav-link::before {
  left:-12px;
  right:auto;
}
@media(max-width:767.98px) {
  [lang="ar"] .nav-tabs>.nav-item:first-child .nav-link::before {
    right:-12px;
  }
  [lang="ar"] .nav-tabs>.nav-item:last-child .nav-link::before {
    left:-12px;
    right:auto;
  }

}
.form-btn.disabled {
  background-color:gray!important;
  border-color:gray!important;
}
.dsc-form .email-info {
  font-size:.85rem;
  text-align:center;
  margin-top:1rem;
  width:100%;
  flex:0 0 auto;
}
.test-skip {
  font-size:10px;
  color:gray;
  padding-top:.5rem;
}
.test-skip:hover {
  color:var(--color);
  cursor:pointer;
}
.form-link {
  position:relative;
}
.modal-open {
  overflow:auto!important;
}
.modal.form {
  position:absolute;
  top:4rem;
  height:50rem;
}
[lang="ar"] .modal.form {
  width:80vw;
  max-width:80vw;
  direction:rtl;
  text-align:center;
}
.modal.form .row {
  padding-top:unset!important;
}
.modal.form .modal-dialog {
  position:relative;
}
.modal.form .modal-dialog::before {
  content:" ";
  height:0;
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-bottom:15px solid white;
  display:block;
  position:absolute;
  top:-14px;
  left:-123px;
  z-index:20;
}
.form-modal {
  display:block;
  position:absolute;
  top:45rem;
  z-index:9999;
  width:100%;
  height:100%;
  background-color:black;
  background-color:rgba(0,0,0,0.4);
  -webkit-transition:.5s;
  overflow:auto;
  transition:all .3s linear;
}
.dsc-form {
  position:absolute;
  height:40rem;
  width:50rem;
  top:0;
  left:50%;
  transform:translate(-50%);
  background-color:#fff;
  background-image:url('../assets/forms/blood_line_1.svg');
  background-repeat:no-repeat;
  background-size:contain;
  background-attachment:inherit;
  background-position:bottom;
}
.dsc-form .container {
  max-width:600px;
  margin:0 auto!important;
}
.dsc-form .form-progress {
  margin-top:3rem;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  direction:ltr;
}
.dsc-form .form-progress .dot {
  background:#c2c8ca;
  border-radius:50%;
  height:10px;
  width:10px;
  min-height:10px;
  min-width:10px;
}
.dsc-form .form-progress .dot:first-child {
  margin-left:auto!important;
}
.dsc-form .form-progress .dot:last-child {
  margin-right:auto!important;
}
.dsc-form .form-progress .dot.active {
  height:13px;
  width:13px;
  min-height:13px;
  min-width:13px;
  background:#9d9d9e;
  position:relative;
  bottom:1px;
  margin:0 1px;
}
.dsc-form .form-progress .sep {
  width:100px;
  height:1px;
  margin-top:4px;
  border-top:2px solid #c2c8ca;
}
.dsc-form .form-step {
  display:none;
}
.dsc-form .form-step.show {
  display:block;
}
.dsc-form .form-header {
  margin:2rem auto;
}
.dsc-form .form-header img {
  margin-bottom:1rem;
}
.dsc-form .form-header h5 {
  color:#9d9d9d;
  color:var(--color);
  text-transform:none;
}
.dsc-form .form-header h5::after {
  display:none;
}
.dsc-form .form-header p {
  color:#a1a1a1;
}
.dsc-form .form-body {
  margin:1rem auto;
}
.dsc-form .form-body p {
  color:#a3a3a3;
}
.dsc-form .form-step[data-order="1"] .form-body p {
  color:#666;
  font-size:1.5rem;
  position:absolute;
  bottom:7rem;
  left:50%;
  transform:translateX(-50%);
  margin:auto;
}
.dsc-form .form-body form {
  text-align:left;
}
.dsc-form .form-body form.row {
  justify-content:space-between;
}
.dsc-form .form-body form>.row {
  justify-content:space-between;
}
.dsc-form .form-body form .row {
  margin-bottom:.5rem;
}
.dsc-form .form-body form .form-label, .dsc-form .form-body form p {
  padding-left:0;
  color:#666;
  font-size:.9rem;
  font-weight:600;
  margin-bottom:.25rem;
  text-align:start;
}
.dsc-form .form-body form .mobile-number-input .form-label, .dsc-form .verification-code-input .form-label {
  text-align:center!important;
}
.dsc-form .form-body form .form-control {
  border-radius:0;
  background-color:#e5e5e5;
  border-color:transparent;
  font-size:.9rem;
  box-shadow:none;
}
.dsc-form .form-body form .form-select {
  background-image:url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23d81c32' stroke='%23d81c32' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  border-radius:0;
  background-color:#e5e5e5;
  border-color:transparent;
  font-size:.9rem;
}
[lang="ar"] .dsc-form .form-body form .form-select {
  background-position:left .75rem center;
}
.dsc-form .form-body form .form-check {
  text-align:start;
}
.dsc-form .form-body form .form-check-input {
  border-radius:0;
  background-color:#e5e5e5;
  border-color:transparent;
}
[lang="ar"] .dsc-form .form-body form .form-check-input {
  float:right;
  margin-left:1rem;
}
.dsc-form .form-body form .form-check-input:checked[type="checkbox"] {
  background-image:url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23686767' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e")
}
.dsc-form .form-body hr {
  width:100%
}
.dsc-form .form-back {
  position:absolute;
  top:1rem;
  left:1rem;
  color:#9c9c9c;
  cursor:pointer;
}
.dsc-form .form-back:hover {
  transform:scale(1.03);
  color:var(--color)
}
.dsc-form .form-back:active {
  transform:scale(0.96)
}
[lang="ar"] .dsc-form .form-back {
  left:auto;
  right:1rem;
}
.dsc-form .form-close {
  position:absolute;
  top:1rem;
  right:1rem;
  color:#d3d3d3;
  cursor:pointer;
}
.dsc-form .form-close:hover {
  transform:scale(1.03);
  color:var(--color)
}
.dsc-form .form-close:active {
  transform:scale(0.96)
}
[lang="ar"] .dsc-form .form-close {
  right:auto;
  left:1rem;
}
.dsc-form .form-next {
  margin-top:3rem;
  margin-bottom:1rem;
  position:absolute;
  bottom:1rem;
  left:50%;
  transform:translateX(-50%)
}
.dsc-form .form-next button {
  background:var(--color)!important;
  color:#fff!important;
  width:200px!important;
  border-radius:2rem!important;
  height:50px!important;
  padding-left:2rem!important;
  text-align:center!important;
}
.dsc-form .form-next button:disabled {
  background:#979797!important;
}
.dsc-form .form-next button:hover {
  transform:scale(1.03);
  background-color:var(--color)!important;
}
.dsc-form .form-next button:active {
  transform:scale(0.97)
}
@media(max-width:991.98px) {
  .modal.form {
    height:70rem;
  }
  .dsc-form {
    max-width:70vw;
  }
  .modal.form .modal-dialog::before {
    left:0;
  }

}
@media(max-width:767.98px) {
  .modal.form {
    top:5rem;
  }
  :lang(ar) .modal.form, .modal.form {
    width:100vw;
    max-width:100vw;
  }
  .dsc-form {
    top:.625rem;
    height:auto!important;
  }
  .modal.form .modal-dialog::before {
    top:-3px;
    left:50%;
    transform:translateX(-50%)
  }
  .dsc-form .form-next {
    position:static;
    transform:none;
  }
  .dsc-form .form-next .btn {
    max-width:100%
  }
  .dsc-form .form-step[data-order="1"] .form-body p {
    position:relative;
    bottom:0;
  }

}
.accepted-units, .number-of-units {
  display:none;
}
.accepted-units>div, .number-of-units>div {
  display:none;
}
.accepted-units.show {
  display:flex;
}
.number-of-units.show {
  display:block;
}
.accepted-units.show>div.show, .number-of-units.show>div.show {
  display:flex;
  flex-wrap:wrap;
  text-align:start;
}
.accepted-units>div>p {
  font-size:.82rem!important;
  margin-left:-.5rem;
  cursor:pointer;
}
.accepted-units>div>p::after {
  display:inline-block;
  margin-left:.255em;
  vertical-align:.255em;
  content:"";
  border-top:.3em solid;
  border-right:.3em solid transparent;
  border-bottom:0;
  border-left:.3em solid transparent;
  margin-bottom:-.1em;
  height:auto;
  position:static;
}
.accepted-units>div>p+.row {
  display:none;
}
.accepted-units>div>p.active+.row {
  display:flex;
}
.accepted-units .form-check input {
  width:.75em;
  height:.75em;
  margin-top:.5em;
  margin-left:-1em;
}
[lang="ar"] .accepted-units .form-check input {
  margin-right:-1em;
  margin-left:0!important;
}
.accepted-units .form-check label {
  font-size:.85rem;
}
.number-of-units label {
  font-size:.88rem;
  padding-right:0;
}
[lang="ar"] .number-of-units label {
  padding-left:0;
  padding-right:calc(var(--bs-gutter-x) * .5)
}
@media(max-width:955.98px) {
  .accepted-units>div>p {
    font-size:.75rem!important;
    margin-left:-.5rem;
  }

}
@media(max-width:899.98px) {
  .accepted-units>div>p {
    font-size:.7rem!important;
  }
  .accepted-units>div>p.active+.row {
    margin:0;
    margin-left:-.5rem;
  }
  .accepted-units .form-check {
    margin-bottom:0;
    padding-left:.75rem;
  }
  .accepted-units .form-check input {
    width:.65em;
    height:.65em;
    margin-top:.6em;
    margin-left:-.8em;
  }
  .accepted-units .form-check label {
    font-size:.65rem;
  }

}
@media(max-width:859.98px) {
  .dsc-form .form-body .col-md-5 {
    flex:0 0 auto;
    width:46%
  }

}
@media(max-width:835.98px) {
  .accepted-units>div>p {
    font-size:.62rem!important;
  }

}
@media(max-width:767.98px) {
  .dsc-form .form-body .col-md-5 {
    width:100%
  }
  .accepted-units>div {
    margin-bottom:.5rem;
  }
  .accepted-units>div>p {
    font-size:.9rem!important;
  }
  .accepted-units>div>p.active+.row {
    --bs-gutter-x:1.5rem;
    --bs-gutter-y:0;
    margin-top:calc(var(--bs-gutter-y) * -1);
    margin-right:calc(var(--bs-gutter-x) * -.5);
    margin-left:calc(var(--bs-gutter-x) * -.5);
    padding-left:.25rem;
  }
  .accepted-units .form-check {
    padding-left:1.5em;
    margin-bottom:.125rem;
  }
  .accepted-units .form-check input {
    width:1em;
    height:1em;
    margin-top:.25em;
    margin-left:-1.5em;
  }
  .accepted-units .form-check label {
    font-size:.9rem;
  }

}
.datepicker table tr td.active.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active.disabled:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active:active, .datepicker table tr td.active:hover, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active:hover:active, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active[disabled] {
  background:none!important;
  background-color:var(--color)!important;
}
.datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled.disabled, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover.disabled, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active.disabled:hover[disabled], .datepicker table tr td span.active.disabled[disabled], .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active:hover.disabled, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active:hover:hover, .datepicker table tr td span.active:hover[disabled], .datepicker table tr td span.active[disabled] {
  background:none!important;
  background-color:var(--color)!important;
}
.datepicker .today {
  text-decoration:underline;
  text-decoration-color:var(--color);
  text-decoration-thickness:2px;
  background:none!important;
  background-color:#e31e2766!important;
}
.dsc-form .iti {
  padding:0;
}
.dsc-form .form-checks.is-invalid>p {
  color:#dc3545;
}
.dsc-form .form-checks.is-valid>p {
  color:#198754;
}
.dsc-form .form-body form .form-control:disabled {
  background-color:#e9ecef;
}
header {
  border-bottom:.7rem solid var(--color)
}
header section#intro {
  background-image:url("../assets/backgrounds/banner_0.jpg");
  direction:ltr;
}
header section#intro .title {
  font-family:"Avenir";
  font-size:4rem;
}
header section#intro .title_ar {
  margin-right:-2rem;
}
header section#intro .content button {
  width:13rem;
}
header section#intro .content button:lang(fr) {
  font-size:.9rem;
}
header section#intro .content .form-link button {
  text-align:start;
}
header section#intro .content .form-link button:lang(ar) {
  font-size:1.25rem;
}
.modal.form:not(#request-blood-form) {
  position:fixed;
}
header #homepage-banner-carousel.carousel, header #homepage-banner-carousel .dsc-carousel-inner, header #homepage-banner-carousel .carousel-item {
  position:static;
  height:100%
}
header #homepage-banner-carousel .dsc-carousel-inner {
  overflow:visible;
}
header #homepage-banner-carousel .carousel-item.map .title {
  font-family:'Avenir';
  color:#5d5d5d;
}
header #homepage-banner-carousel .carousel-item .title:lang(ar) {
  font-family:'Arabic';
  font-size:5rem;
}
header #homepage-banner-carousel .carousel-item.map .title:lang(ar) {
  font-family:'Arabic';
  font-size:3.25rem;
}
header #homepage-banner-carousel .carousel-item.map .slogan:lang(ar) {
  font-size:1.5rem;
  font-family:'Arabic'
}
header #homepage-banner-carousel .carousel-item.volunteer .title:lang(ar) {
  font-family:'Arabic';
  font-size:4.25rem;
}
header #homepage-banner-carousel .carousel-item.map .title span {
  color:var(--color)
}
header #homepage-banner-carousel .carousel-item.map .subtitle {
  font-family:'Avenir';
  color:#5d5d5d;
}
header #homepage-banner-carousel .carousel-item.map .subtitle:lang(ar) {
  font-family:'Arabic'
}
header #homepage-banner-carousel .carousel-item.map .slogan {
  font-family:'Avenir';
  color:#5d5d5d;
  font-weight:600;
  display:block;
  font-size:1.15rem;
  text-transform:none;
}
header #homepage-banner-carousel .carousel-item.map button {
  color:#fff;
  background-color:var(--color);
  border-color:var(--color)
}
header #homepage-banner-carousel .carousel-item.map button:hover {
  filter:brightness(1.2)
}
.dsc-carousel-inner .carousel-item {
  transition:-webkit-transform .4s ease;
  transition:transform .4s ease;
  transition:transform .4s ease, -webkit-transform .4s ease;
}
header #homepage-banner-carousel .carousel-item.map section#intro {
  background-image:url('../assets/backgrounds/banner_0.jpg')
}
header #homepage-banner-carousel .carousel-item.blood section#intro {
  background-image:url('../assets/backgrounds/banner_1.jpg')
}
header #homepage-banner-carousel .carousel-item.volunteer section#intro {
  background-image:url('../assets/backgrounds/banner_2.jpg')
}
header #homepage-banner-carousel .carousel-item.damlb section#intro {
  background-image:url('../assets/backgrounds/banner_3.jpg')
}
header #homepage-banner-carousel .carousel-item.damlb section#intro .title img {
  height:300px;
}
header section#intro {
  display:flex;
}
header section#intro .container {
  margin:auto;
}
header .map section#intro .title {
  font-size:2rem;
}
header .map section#intro .subtitle {
  font-size:2rem;
  font-family:'Avenir'
}
@media(max-width:767.98px) {
  header {
    background-image:none;
  }
  header #homepage-banner-carousel .carousel-indicators {
    margin-bottom:3.25rem;
  }
  header #homepage-banner-carousel section#intro {
    padding-top:1rem;
  }
  header #homepage-banner-carousel .carousel-item.map section#intro {
    background-image:url('../assets/backgrounds/mobile_banner_0.jpg')
  }
  header #homepage-banner-carousel .carousel-item.blood section#intro {
    background-image:url('../assets/backgrounds/mobile_banner_1.jpg')
  }
  header #homepage-banner-carousel .carousel-item.volunteer section#intro {
    background-image:url('../assets/backgrounds/mobile_banner_2.jpg')
  }
  header #homepage-banner-carousel .carousel-item.damlb section#intro {
    background-image:url('../assets/backgrounds/mobile_banner_3.jpg')
  }
  header section#intro .container {
    margin-top:2rem;
  }
  header section#intro .title {
    font-size:3.25rem;
  }
  header section#intro .title:lang(ar) {
    font-size:2.75rem!important;
  }
  header section#intro .title_ar {
    margin-right:0;
    width:88%
  }
  header section#intro .subtitle {
    font-size:1.5rem;
  }
  header section#intro .subtitle:lang(ar) {
    font-size:1.75rem!important;
  }
  header section#intro .hotline::before {
    right:-2rem;
  }
  header section#intro .hotline::after {
    left:-2rem;
  }
  header section#intro .hotline {
    left:calc(50% - 5rem)!important;
  }
  header section#intro .hotline::before {
    -moz-border-radius:0 0 0 1rem;
    -webkit-border-radius:0 0 0 1rem;
    border-radius:0 0 0 1rem;
    right:-2rem;
    content:'';
    width:40px;
    height:30px;
    border:5px solid var(--color);
    position:absolute;
    bottom:-5px;
    border-top:0;
    border-right:0;
  }
  header section#intro .content .form-link button {
    text-align:center;
  }
  header section#intro .content .form-link:lang(ar) {

  }
  header section#intro .content .form-link:lang(ar) button {
    font-size:1rem;
    padding:.5rem 1rem;
  }

}
@media(max-width:576.98px) {
  header {
    height:100vh;
  }

}
@media(max-width:429.98px) {
  header section#intro .title {
    font-size:2.6rem;
  }
  header .map section#intro .title {
    font-size:1.5rem;
  }
  header section#intro .subtitle {
    font-size:1.25rem;
  }
  header section#intro .slogan {
    font-size:1.1rem;
  }

}
@media(max-width:349.98px) {
  header section#intro .title {
    font-size:2.35rem;
  }
  header section#intro .subtitle {
    margin-bottom:0;
  }
  header section#intro .slogan {
    margin-top:1.5rem;
  }

}
main section#mission video {
  width:100%
}
main section#mission .content {
  padding:3rem;
}
main section#mission .content h5 {
  text-transform:none;
}
main section#mission .content button {
  padding:.5rem 2rem;
  background:#fff;
  border-radius:5rem;
  border-color:var(--color);
  border-width:2px;
  color:var(--color);
  text-transform:capitalize;
  margin-top:1rem;
}
main section#mission .content button:hover {
  background:var(--color);
  color:#fff;
}
main section#mission .content button i {
  margin-left:.5rem;
}
main section#mission .content p {
  color:var(--color-body);
  font-weight:500;
}
main section#mission .video {
  margin:0 auto;
  margin-bottom:-5px;
  padding:0;
  align-self:center;
  text-align:center;
  max-width:100%
}
main section#mission .video img {
  max-width:100%;
  width:100%
}
@media(max-width:1076.98px) {
  main section#mission .content p {
    margin-bottom:0;
  }

}
@media(max-width:767.98px) {
  main section#mission .content {
    text-align:start;
    padding-bottom:0;
  }

}
main section#blog {
  background:var(--color-bg-secondary)
}
main section#blog .container {
  padding:3rem;
}
main section#blog #blog-carousel {
  display:none;
}
main section#blog .blog-articles .post {
  flex-grow:1;
}
main section#blog .view {
  cursor:pointer;
}
main section#blog .view .mask {
  opacity:1;
  background-color:rgba(43,38,38,.43)
}
main section#blog .view .mask:hover {
  background-color:rgba(244,67,54,.7)
}
main section#blog .info {
  position:absolute;
  bottom:0;
}
main section#blog .title {
  color:#fff;
  padding:0 1.5rem;
  margin-bottom:0;
  font-weight:700;
  font-size:1.05rem;
}
main section#blog .description {
  color:#fff;
  padding:0 1.5rem;
  font-size:.95rem;
  font-weight:500;
}
main section#blog .view img {
  max-height:200px;
  min-height:200px;
  height:200px;
  width:100%;
  object-fit:cover;
}
@media(max-width:767.98px) {
  main section#blog .container {
    padding:2rem;
  }
  main section#blog #blog-carousel {
    display:block;
  }
  main section#blog #blog-carousel .carousel-indicators {
    margin-bottom:-2rem;
  }
  main section#blog #blog-carousel .carousel-indicators button {
    background-color:var(--color)
  }
  main section#blog .row.blog-articles {
    display:none;
  }

}
main section#quote {
  padding-top:3rem;
  padding-bottom:3rem;
  background-image:url("../assets/backgrounds/quote.svg");
  background-repeat:no-repeat;
  background-origin:border-box;
  background-attachment:scroll;
  background-position:bottom center;
  background-size:contain;
}
main section#quote blockquote.quote {
  position:relative;
  text-align:center;
  padding:1rem 1.2rem;
  width:80%;
  color:#484748;
  margin:1rem auto 2rem;
  font-size:2rem;
  font-weight:900;
}
main section#quote blockquote.quote span {
  color:var(--color)
}
main section#quote blockquote.quote:before, main section#quote blockquote.quote:after {
  font-family:"Font Awesome 5 Free";
  position:absolute;
  color:#e31e27;
  font-size:40px;
}
main section#quote blockquote:before {
  content:"\f10d";
  top:-2rem;
  margin-right:-4.5rem;
  right:100%
}
main section#quote blockquote:after {
  content:"\f10e";
  margin-left:-4.5rem;
  left:100%;
  top:auto;
  bottom:-2rem;
}
main section#quote span br {
  display:none;
}
main section#quote br:last-child {
  display:none;
}
@media(max-width:767.98px) {
  main section#quote {
    background-image:none;
    padding-top:3rem;
    padding-bottom:.75rem;
    padding-right:.5rem;
    padding-left:.5rem;
  }
  main section#quote blockquote.quote {
    padding:1rem 0;
    font-size:1.35rem;
    width:100%
  }
  main section#quote blockquote::before {
    margin-right:-2rem;
  }
  main section#quote blockquote::after {
    margin-left:-2rem;
  }
  main section#quote span br {
    display:block;
  }
  main section#quote br:last-child {
    display:block;
  }

}
main section#get-involved .container {
  margin:2rem auto;
  margin-top:0;
}
main section#get-involved .row {
  margin:auto;
}
main section#get-involved #involved-carousel {
  display:none;
}
main section#get-involved .row .involved-actions {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}
main section#get-involved .row>.description {
  text-align:center;
  margin:.5rem auto;
  text-align:center;
  color:var(--color);
  font-weight:900;
  font-size:1.3rem;
}
main section#get-involved .item {
  text-align:center;
  color:#fff;
  font-size:1.5rem;
  padding-right:.15rem;
  padding-left:.15rem;
}
main section#get-involved .mask a.mask-link {
  width:100%;
  height:100%
}
main section#get-involved .mask p {
  color:#fff;
}
main section#get-involved .mask img {
  max-width:100%;
  height:auto;
}
main section#get-involved .item p.description {
  display:none;
  font-size:1rem;
  margin:auto 1rem;
}
main section#get-involved .overlay button {
  padding:.5rem 1rem;
  background:transparent;
  border-radius:5rem;
  border-color:#fff;
  border-width:2px;
  color:#fff;
  text-transform:capitalize;
  margin:1rem auto;
  display:none;
}
main section#get-involved .overlay picture img {
  max-width:100%;
  height:auto;
}
main section#get-involved .overlay picture img.mobile {
  width:100%;
  display:none;
}
main section#get-involved .overlay mask img {
  display:block;
}
main section#get-involved .overlay button:hover {
  transform:scale(1.03)
}
main section#get-involved .overlay .mask:hover p.description {
  position:relative;
  bottom:11rem;
}
main section#get-involved .overlay .mask:hover button {
  bottom:11rem;
}
@media(max-width:991.98px) {
  main section#get-involved .overlay .mask:hover img {
    bottom:4rem;
  }
  main section#get-involved .overlay .mask:hover p.description {
    bottom:8.5rem;
  }
  main section#get-involved .overlay .mask:hover button {
    bottom:9rem;
  }

}
@media(max-width:767.98px) {
  main section#get-involved .row>p {
    font-size:.85rem;
    margin-bottom:.25rem;
    margin-top:-.5rem;
  }
  main section#get-involved .container {
    padding:0;
    margin:0 auto;
  }
  main section#get-involved .involved-actions {
    padding:0;
  }
  main section#get-involved .involved-actions .item {
    padding:0;
    margin-bottom:.2rem;
  }
  main section#get-involved .involved-actions .overlay {
    max-width:100vw;
    margin-right:auto;
    margin-left:auto;
  }
  main section#get-involved .overlay picture img {
    display:none;
  }
  main section#get-involved .overlay picture img.mobile {
    display:block;
  }
  main section#get-involved .involved-actions .overlay .mask:hover {
    text-align:center;
  }
  main section#get-involved .overlay .mask img {
    display:block;
    position:absolute;
    top:-3.3rem;
    right:75%;
    width:30%;
    height:auto;
    transform:translateX(50%)
  }
  main section#get-involved:lang(en) .overlay .mask img {
    top:-2rem;
  }
  main section#get-involved .overlay .mask .description {
    display:none!important;
  }
  main section#get-involved .mask a.mask-link {
    display:block;
  }
  main section#get-involved .mask:hover a button.btn, main section#get-involved .mask a button.btn {
    display:block;
    position:absolute;
    top:auto;
    right:75%;
    transform:translateX(50%);
    margin:auto;
    bottom:1rem;
    padding:.2rem .7rem;
    width:max-content;
  }
  main section#get-involved .item:nth-child(2n+1) .mask:hover a button.btn, main section#get-involved .item:nth-child(2n+1) .mask a button.btn {
    right:25%
  }
  main section#get-involved .item:nth-child(2n+1) .overlay .mask img {
    right:25%
  }

}
@media(max-width:359.98px) {
  main section#get-involved .mask:hover a button.btn, main section#get-involved .mask a button.btn {
    bottom:1.5rem;
  }
  main section#get-involved .overlay .mask img {
    width:25%;
    top:-2rem;
  }

}
main section#impact {
  position:relative;
}
main section#impact::before {
  background-color:var(--color);
  background-image:url("../images/backgrounds/impact_nobg.svg"), url("../images/backgrounds/dot_pattern.svg");
  background-repeat:no-repeat;
  background-origin:content-box;
  background-attachment:scroll;
  background-position:top right, top left;
  background-size:cover, contain;
  position:absolute;
  z-index:-1;
  content:" ";
  width:100%;
  height:100%
}
main section#impact:lang(ar)::before {
  transform:scale(-1, 1)
}
main section#impact h5 {
  color:#fff;
}
main section#impact h5::after {
  background:#fff;
}
main section#impact .content {
  padding:3rem;
}
main section#impact .content button {
  padding:.5rem 2rem;
  border-radius:5rem;
  border-color:#fff;
  border-width:2px;
  color:#fff;
  text-transform:capitalize;
  margin-top:1rem;
}
main section#impact .content button:hover {
  background:#fff;
  color:var(--color)
}
main section#impact .content button i {
  margin-left:.5rem;
}
main section#impact .content p {
  color:#fff;
  font-weight:500;
}
main section#impact #impact-carousel .carousel-inner {
  padding-bottom:2rem;
}
main section#impact #impact-carousel .carousel-indicators {
  bottom:-4rem;
}
main section#impact .impact-stats>div {
  padding-top:1rem;
  padding-bottom:1rem;
}
main section#impact .impact-stats>div:first-child {
  border-right:1px solid #fff;
}
main section#impact .impact-number {
  color:#fff;
  font-weight:900;
  font-size:3rem;
}
main section#impact .impact-label {
  color:#fff;
  font-weight:600;
  font-size:1.5rem;
}
@media(max-width:991.98px) {
  main section#impact .content {
    padding-right:0;
  }

}
@media(max-width:767.98px) {
  main section#impact {
    background:#fff;
  }
  main section#impact .container {
    padding:0;
  }
  main section#impact .wrapper>.container>.row {
    max-width:100vw;
    margin:auto;
  }
  main section#impact .content {
    text-align:start;
    padding:2rem;
    position:relative;
  }
  main section#impact .content::before {
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:0;
    background-image:url("../assets/backgrounds/impact_nobg_red.svg");
    background-repeat:no-repeat;
    background-attachment:scroll;
    background-position:top right;
    background-size:cover;
  }
  main section#impact .content h5 {
    color:var(--color)
  }
  main section#impact .content h5 {
    color:var(--color)
  }
  main section#impact .content h5::after {
    background:var(--color)
  }
  main section#impact .content button {
    color:var(--color);
    border-color:var(--color);
    background:#fff;
  }
  main section#impact .content button:hover {
    color:#fff;
    border-color:#fff;
    background:var(--color)
  }
  main section#impact .content p {
    color:var(--color-body);
    margin-top:3rem;
  }
  main section#impact .impact-stats>div:first-child {
    border-right:none;
  }
  main section#impact {
    background-image:none;
  }
  main section#impact>.wrapper>.container>.row>div:not(.content) {
    background-image:url("../assets/backgrounds/quote_white.svg"), url('../assets/backgrounds/red_brush_stroke_mobile.svg');
    background-repeat:no-repeat;
    background-origin:padding-box;
    background-attachment:scroll;
    background-position:bottom;
    background-size:contain, cover;
    padding-top:7rem;
    padding-bottom:7rem;
  }
  main section#impact #impact-carousel .carousel-indicators {
    bottom:0;
  }

}
@media(max-width:576.98px) {
  main section#impact>.wrapper>.container>.row>div:not(.content) {
    padding-top:5.5rem;
    padding-bottom:5.5rem;
  }

}
@media(max-width:499.98px) {
  main section#impact>.wrapper>.container>.row>div:not(.content) {
    padding-top:3.5rem;
    padding-bottom:3.5rem;
  }

}
@media(max-width:429.98px) {
  main section#impact>.wrapper>.container>.row>div:not(.content) {
    padding-top:2.5rem;
    padding-bottom:1.5rem;
  }

}
@media(max-width:767.98px) {
  .dsc-form .form-next {
    margin-top:1rem;
  }
  .modal.form {
    top:4rem;
    width:100vw;
    left:50%;
    transform:translateX(-50%)
  }
  .modal.form .modal-dialog {
    max-width:100%
  }
  .dsc-form {
    top:.625rem;
    height:auto!important;
    width:95%;
    max-width:100%
  }
  .dsc-form .form-body p, .dsc-form .form-header p {
    margin-bottom:.5rem;
    font-size:.85rem;
  }
  .dsc-form .form-header {
    margin:1rem -.5rem;
  }
  .dsc-form .form-step[data-order="1"] .form-body p {
    position:relative;
    bottom:5rem;
    margin-top:8rem;
  }

}
:lang(ar) .overlay .mask:hover img {
  bottom:7rem;
}
main section#mission:lang(ar) .content {
  text-align:start;
}
main section#impact:lang(ar) .content {
  text-align:start;
}
main section#impact:lang(ar) .content::before {
  transform:scale(-1, 1)
}
main section#blog .blog-articles .post {
  direction:ltr;
}
@media(max-width:767.98px) {
  header section#intro:lang(ar) .content {
    text-align:center;
  }
  header section#intro:lang(ar) .content .form-link button {
    direction:rtl;
  }
  header section#intro:lang(ar) .content .form-link button i {
    right:auto;
    left:1rem;
    transform:rotateZ(-180deg)
  }

}
#addToCalendarModal:lang(ar) .btn-close {
  margin:-.5rem -.5rem auto -.5rem;
}
@media(max-width:991.98px) {
  main section#impact:lang(ar) .content {
    padding-right:3rem;
    padding-left:0;
  }
  main section#get-involved .overlay .mask:hover img {
    bottom:4.5rem;
  }
  main section#get-involved .overlay .mask:hover p.description {
    width:95%;
    margin:auto;
    bottom:9.5rem;
  }
  main section#get-involved .overlay button {
    padding:.5rem;
    font-size:.85rem;
  }
  main section#get-involved .overlay .mask:hover button {
    bottom:10rem;
  }
  main section#get-involved:lang(ar) .overlay .mask:hover img {
    bottom:5.5rem;
  }
  main section#get-involved:lang(ar) .overlay .mask:hover p.description {
    width:99%;
    margin:auto;
  }
  main section#get-involved:lang(ar) .overlay button {
    padding:.5rem .25rem;
  }

}
@media(max-width:767.98px) {
  header section#intro .ar-title {
    width:70%;
    margin:auto;
    transform:translateX(-1rem);
    margin-bottom:-2rem;
    position:static;
  }
  [lang="ar"] section#intro .slogan {
    font-size:1.25rem;
  }
  [lang="ar"] header section#intro .content button {
    width:10rem;
  }

}
@media(max-width:575.98px) {
  header section#intro .ar-title {
    width:90%;
    transform:translateX(-.5rem);
    margin-bottom:-1.5rem;
  }

}
main section#calendar {
  background:var(--color-bg-secondary)
}
main section#calendar .container>.row>div {
  padding:3rem;
}
.heading-section {
  font-size:28px;
  color:#000;
}
.calendar-content {
  padding:0;
  height:420px;
  position:relative;
  margin:20px auto;
  background:var(--color-bg-secondary)
}
.calendar-container {
  padding:0;
}
.calendar {
  width:100%;
  padding:0;
  background:#fff;
  max-width:375px;
}
hr {
  max-width:420px;
  margin:auto;
  margin-bottom:.75rem;
}
.year-header {
  background:#fff;
  height:40px;
  text-align:center;
  position:relative;
  color:#fff;
  border-top-left-radius:3px;
}
.year-header span {
  display:inline-block;
  font-size:20px;
  line-height:40px;
  color:#000;
}
.left-button, .right-button {
  cursor:pointer;
  width:28px;
  text-align:center;
  position:absolute;
  color:#ccc!important;
  -webkit-transition:.3s;
  -o-transition:.3s;
  transition:.3s;
  font-size:14px!important;
}
.left-button:hover, .right-button:hover {
  color:var(--color)!important;
}
.left-button {
  left:0;
}
.right-button {
  right:0;
  top:0;
}
.days-table, .dates-table, .months-table {
  border-collapse:separate;
  text-align:center;
  width:100%
}
.day {
  height:26px;
  width:26px;
  padding:0 10px;
  line-height:26px;
  border:2px solid transparent;
  text-transform:uppercase;
  font-size:10px;
  color:#000;
}
.month {
  cursor:default;
  height:26px;
  width:26px;
  padding:0 2px;
  padding-top:10px;
  line-height:26px;
  text-transform:uppercase;
  font-size:11px;
  color:#ccc;
  -webkit-transition:all 250ms;
  -o-transition:all 250ms;
  transition:all 250ms;
}
.active-month {
  font-weight:700;
  color:#000;
}
.month:hover {
  color:var(--color)
}
.table-date {
  cursor:default;
  color:#2b2b2b;
  height:26px;
  width:26px;
  font-size:15px;
  padding:10px;
  line-height:26px;
  text-align:center;
  border-radius:50%;
  border:2px solid transparent;
  -webkit-transition:all 250ms;
  -o-transition:all 250ms;
  transition:all 250ms;
  position:relative;
}
.table-date:not(.nil):hover {
  border-color:var(--color)
}
.event-date {
  border-color:var(--color);
  background:#fff;
}
.event-date:after {
  position:absolute;
  top:0;
  left:0;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#28a745;
}
.today {
  text-decoration:underline;
  text-decoration-color:var(--color)
}
.active-date {
  background:var(--color);
  color:#fff;
}
.event-date.active-date {
  background:var(--color)
}
.events-container {
  height:100%;
  overflow-y:auto;
}
.events-container.empty {
  height:auto;
}
.event-card {
  padding:.5rem 1rem;
  background:#fff;
  border-radius:1.5rem;
  margin:auto;
  margin-bottom:.75rem;
  max-width:420px;
  height:31%
}
.event-card:first-child {
  margin-top:0;
}
.event-card.empty {
  height:auto;
}
.event-card>.row {
  align-content:center;
  align-items:center;
  align-self:center;
  margin:auto;
  width:100%;
  height:100%
}
.event-card .event-date {
  border-right:1px solid lightgray;
  text-align:center;
  color:#313D48;
}
.event-card .event-day {
  font-size:3rem;
  font-weight:500;
}
.event-card .event-month {
  font-size:1.5rem;
  font-weight:500;
  margin-top:-1.25rem;
}
.event-card .event-date {
  width:25%
}
.event-card .event-title {
  width:66.66667%
}
.event-card .event-link {
  width:8.33333%
}
.event-card .event-name {
  font-weight:500;
  font-size:1.15rem;
  color:#313D48;
  padding-left:0;
}
.event-card .event-time {
  font-weight:400;
  font-size:1rem;
  color:#999;
}
.event-card:not(.empty):hover {
  transform:scale(1.03);
  cursor:pointer;
}
.event-card:hover .event-link {
  color:var(--color)
}
.event-card:hover .event-date {
  color:var(--color)
}
.event-card:not(.empty):hover .event-name {
  color:var(--color)
}
.table-date:hover {
  cursor:pointer;
}
.event-count, .event-name, .event-cancelled {
  display:inline;
  padding:0 10px;
  font-size:1rem;
}
.event-count {
  color:var(--color);
  text-align:right;
}
.event-name {
  padding-right:0;
  text-align:left;
}
.event-cancelled {
  color:#cd4dcc;
  text-align:right;
}
.modal#addToCalendarModal .modal-header {
  border-bottom:none;
}
.modal#addToCalendarModal .modal-body>div {
  text-align:center;
  cursor:pointer;
}
.modal#addToCalendarModal .modal-body>div:hover {
  transform:scale(1.04)
}
.modal#addToCalendarModal .modal-body h6 {
  margin-top:1rem;
  color:var(--color-text-secondary);
  font-weight:600;
}
@media(max-width:991.98px) {
  .month {
    font-size:8px;
  }
  .table-date {
    padding:9px;
  }

}
@media(max-width:819.98px) {
  .table-date {
    padding:8px;
  }

}
@media(max-width:767.98px) {
  hr {
    max-width:375px;
  }
  .calendar-content {
    justify-content:center;
  }
  .calendar {
    margin-left:auto;
    margin-right:auto;
  }
  main section#calendar .container>.row>div {
    padding:2rem;
  }
  .events-container {
    height:330px;
  }
  .event-card {
    margin:.625rem;
    margin-right:auto;
    margin-left:auto;
    max-width:375px;
  }
  .event-card:hover {
    transform:none;
  }
  .calendar-content {
    height:auto;
  }
  .events-container {
    margin-top:1rem;
    padding:0;
  }
  .month {
    font-size:10.5px;
  }

}
@media(max-width:439.98px) {
  .table-date {
    padding:9px;
  }
  .event-card {
    padding:.5rem;
  }
  .event-card:not(.empty):hover {
    transform:none;
  }
  .event-card .event-date {
    width:20%;
    justify-content:center;
    text-align:center;
  }
  .event-card .event-title {
    width:73%;
    width:calc(80% - 20px);
    padding-right:1rem;
  }
  .event-card .event-day {
    font-size:2rem;
    font-weight:500;
  }
  .event-card .event-month {
    font-size:1.25rem;
    font-weight:500;
    margin-top:-1rem;
  }
  .event-card .event-link {
    padding:0;
    width:16px;
    text-align:center;
  }
  .event-card .event-name {
    font-weight:500;
    font-size:1rem;
    color:#313D48;
    padding-left:0;
  }
  .event-card .event-time {
    font-weight:400;
    font-size:.95rem;
    color:#999;
  }

}
@media(max-width:409.98px) {
  .table-date {
    padding:7px;
  }
  .event-card {
    padding:.5rem .4rem;
  }
  .event-card .event-link {
    padding:0;
  }

}
@media(max-width:389.98px) {
  .table-date {
    padding:6px;
  }

}
@media(max-width:376.98px) {
  main section#calendar .container>.row>div {
    padding:1rem;
  }
  .table-date {
    padding:8px;
  }

}
@media(max-width:362.98px) {
  .table-date {
    padding:6px;
  }

}
@media(max-width:349.98px) {
  .month {
    font-size:9.5px;
    padding-left:0;
    padding-right:0;
  }
  .day {
    padding:0;
  }
  .table-date {
    font-size:14px;
  }

}
@media(max-width:339.98px) {
  .table-date {
    padding:5px;
  }

}
@media(max-width:329.98px) {
  .table-date {
    padding:4px;
  }

}
@media(prefers-reduced-motion:reduce) {
  .left-button, .right-button {
    -webkit-transition:none;
    -o-transition:none;
    transition:none;
  }

}
[lang="ar"] .event-card .event-link i.fa-chevron-right:lang(ar) {
  width:8.33333%;
  transform:none;
}
[lang="ar"] .event-card.empty {
  text-align:right;
  border-left:0!important;
  border-right:10px solid #ff1744;
}
@media(min-width:768px) {
  [lang="ar"] .calendar-container {
    order:2;
  }
  [lang="ar"] .calendar-container .calendar {
    margin-right:0;
    margin-left:auto;
  }
  [lang="ar"] .events-container {
    order:1;
  }

}
.mapboxgl-ctrl-group:not(:empty) {
  box-shadow:0 0 0 2px rgba(0,0,0,.1);
  opacity:.75;
}
main section#map {
  background-color:var(--color);
  position:relative;
}
main section#map .form-select, main section#map .btn-check:focus+.btn, main section#map .btn:focus {
  outline:0;
  box-shadow:0;
}
main section#map .banner {
  text-align:center;
  color:white;
  font-size:1.5rem;
  font-weight:700;
  padding:.5rem 0;
  background:var(--color);
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  position:relative;
  text-align:center;
}
main section#map .dropdown {
  position:absolute;
  z-index:2;
  bottom:.2rem;
  right:.2rem;
  background:var(--color);
  color:#fff;
  padding:.15rem .5rem;
  border-radius:2rem;
  font-size:.85rem;
}
main section#map .dropdown a {
  color:inherit;
  font-size:inherit;
}
main section#map .dropdown .dropdown-menu.show {
  display:block;
  position:absolute;
  top:0!important;
  transform:translate(-19%, -142%)!important;
  min-width:auto;
  padding:0;
  width:100%;
  text-align:center;
  font-size:.85rem;
  inset:auto!important;
}
main section#map .dropdown .dropdown-menu .dropdown-item {
  padding:.25rem .5rem;
}
main section#map .dropdown .dropdown-menu .dropdown-item:hover, main section#map .dropdown .dropdown-menu .dropdown-item:active {
  background-color:var(--color);
  color:#fff;
}
main section#map .banner .blood-icon {
  position:absolute;
  left:2rem;
  top:50%;
  transform:translateY(-50%);
  height:95%;
  width:auto;
}
main section#map .banner .menu-icon {
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
  border-radius:1rem;
  margin:auto .25rem;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding-left:.25rem;
}
main section#map .banner .menu-icon[data-toggle="map"] {
  transform:translate(-110%, -50%);
  width:65px;
  height:30px;
}
main section#map .banner .menu-icon[data-toggle="map"] svg {
  width:30px;
  height:30px;
}
main section#map .banner .menu-icon[data-toggle="map"] svg .cls-1 {
  fill:#fff;
}
main section#map .banner .menu-icon.active[data-toggle="map"] svg .cls-1, main section#map .banner .menu-icon:hover[data-toggle="map"] svg .cls-1 {
  fill:#d91b31;
}
main section#map .banner .menu-icon[data-toggle="list"] {
  width:65px;
  height:30px;
}
main section#map .banner .menu-icon[data-toggle="list"] i {
  font-size:1.2rem;
  padding:6px;
}
main section#map .banner .menu-icon:hover, main section#map .banner .menu-icon.active {
  background:#fff;
  color:#d81c32;
  cursor:pointer;
}
main section#map .banner .menu-icon .label {
  font-size:.75rem;
}
main section#map .banner .banner-title {
  margin:auto;
  text-align:center;
}
main section#map #mapContainer {
  margin:auto;
  width:100%;
  height:600px;
  position:relative;
}
main section#map #mapContainer.listView {
  background:#f6f6f6;
}
main section#map #mapContainer.listView #mapListView {
  display:block;
}
main section#map #mapContainer.listView .map-title {
  display:none!important;
}
main section#map #mapContainer.listView #mapWrapper {
  display:none;
}
main section#map #mapContainer.listView #mapForm {
  top:50%;
  transform:translateY(-50%)
}
main section#map #mapContainer>#mapWrapper {
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  background-image:url('../assets/dsctoday/map.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}
main section#map #mapContainer .mapboxgl-popup {
  z-index:1;
}
main section#map #mapContainer .popup-div {
  text-align:center;
  font-family:'Avenir'
}
main section#map #mapContainer .popup-title {
  font-size:1.15rem;
}
main section#map #mapContainer .popup-category-title {
  color:#D5112A;
  display:inline;
  font-weight:bold;
  font-size:.875rem;
}
main section#map #mapContainer .needs-div {
  font-size:.875rem;
}
main section#map #mapContainer .popup-btn {
  border:2px solid var(--color);
  background:var(--color);
  color:#fff;
  font-size:.75rem;
  margin-top:.25rem;
}
main section#map #mapContainer .popup-btn:hover {
  filter:brightness(1.2)
}
main section#map #mapContainer .popup-div:lang(ar) {
  text-align:center;
  font-family:'Arabic'
}
main section#map #mapContainer .popup-div .hours-div:lang(ar) {
  direction:rtl;
  font-family:'Arabic'
}
main section#map #mapContainer #mapForm {
  position:absolute;
  top:4rem;
  left:4%;
  max-width:40%
}
main section#map #mapContainer>.map-title {
  display:none;
  padding:.5rem 1rem;
  position:absolute;
  color:gray;
  background:#fff;
  font-size:1rem;
  font-weight:500;
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  border-radius:0 0 1rem 1rem;
  width:80%;
  text-align:center;
}
main section#map #mapContainer>.map-title>.title>br, main section#map #mapContainer>.maptitle[dir="rtl"]>.title>br {
  display:none;
}
main section#map #mapContainer #mapForm .map-title {
  font-size:2rem;
  font-weight:900;
  color:#fff;
  margin-bottom:.75rem;
  display:none;
}
main section#map #mapContainer .map-title .strong {
  color:var(--color);
  font-weight:900;
}
main section#map #mapContainer .map-subtitle, main section#map #mapContainer .list-subtitle {
  color:#fff;
  margin-bottom:2.5rem;
  font-size:1.8rem;
  font-weight:700;
  line-height:1.1;
  word-spacing:.15rem;
}
main section#map[lang="ar"] #mapContainer #mapForm .map-title {
  font-size:2.5rem;
}
main section#map[lang="ar"] #mapContainer #mapForm .map-subtitle {
  font-size:1.5rem;
  margin-bottom:2.5rem;
}
main section#map #mapContainer #mapForm .list-subtitle {
  display:none;
}
main section#map #mapContainer.listView #mapForm .list-subtitle {
  color:var(--color-body);
  width:250px;
  display:block;
  font-size:1rem;
  padding-bottom:.5rem;
  font-weight:500;
  font-family:Avenir;
}
main section#map #mapContainer.listView #mapForm .list-subtitle:lang(ar) {
  font-size:1.5rem;
  font-family:'Arabic'
}
main section#map #mapContainer.listView #mapForm .list-subtitle span {
  color:var(--color);
  font-weight:700;
}
main section#map #mapContainer.listView #mapForm .map-subtitle {
  display:none;
}
main section#map #mapContainer #mapForm>.row, main section#map #mapContainer #mapForm>.row.show {
  margin:0;
  margin-top:1rem;
  width:14.3rem;
  padding:.5rem;
  background:#f0f0f1;
  border-radius:1rem;
}
[lang="fr"] main section#map #mapContainer #mapForm>.row, [lang="fr"] main section#map #mapContainer #mapForm>.row.show {
  width:15.6rem;
}
[lang="fr"] main section#map #mapContainer .map-subtitle, [lang="fr"] main section#map #mapContainer .list-subtitle {
  font-size:1.5rem;
}
main section#map #mapContainer #mapForm .icon, main section#map #mapContainer #mapForm>.row.show .icon {
  width:20%;
  margin:auto;
  padding-left:0;
  padding-right:.5rem;
  cursor:pointer;
}
main section#map #mapContainer #mapForm .form-select, main section#map #mapContainer #mapForm>.row.show .form-select {
  background-image:url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23d81c32' stroke='%23d81c32' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  border-radius:2rem;
  font-family:"Avenir";
  font-weight:900;
  color:#59595c;
  border-color:#fff;
  width:80%;
  display:block;
}
main section#map #mapContainer #mapForm .form-select:lang(ar), main section#map #mapContainer #mapForm>.row.show .form-select:lang(ar) {
  font-family:"Arabic";
  font-weight:500;
}
main section#map #mapContainer #mapForm .blood-type-select, main section#map #mapContainer #mapForm>.row.show .blood-type-select {
  border-radius:2rem;
  font-family:"Avenir";
  font-weight:900;
  color:#59595c;
  border-color:#fff;
  width:80%;
  display:block;
}
main section#map #mapContainer #mapForm .blood-type-select>.row>div {
  padding-left:.25rem;
  padding-right:.25rem;
}
main section#map #mapContainer #mapForm .blood-type-select button {
  background:#fff;
  padding:0;
  width:100%;
  margin:auto;
  margin-bottom:.25rem;
  font-size:1rem;
  font-weight:900;
  color:#59595c;
  border-radius:.7rem;
}
main section#map #mapContainer #mapForm .blood-type-select button:hover, main section#map #mapContainer #mapForm .blood-type-select button.selected {
  background:var(--color);
  color:#fff;
}
main section#map #mapContainer #mapListView {
  height:90%;
  width:calc(100vw - 25%);
  max-width:1060px;
  overflow:auto;
  position:absolute;
  top:5%;
  left:25%;
  display:none;
}
main section#map #mapContainer #mapListView>.row {
  margin:0;
}
main section#map #mapContainer #mapListView>.row>div {
  flex:0 0 auto;
  width:50%
}
main section#map #mapContainer #mapListView .card {
  width:100%;
  max-width:500px;
  padding:.5rem;
  border-radius:1rem;
  border-left:5px solid var(--bs-danger);
  margin-bottom:.5rem;
  margin-right:.5rem;
}
main section#map #mapContainer #mapListView .card .row {
  align-items:start;
  max-width:100%;
  --bs-gutter-x:.85rem;
}
main section#map #mapContainer #mapListView .card>.row {
  position:relative;
  max-width:105%
}
main section#map #mapContainer #mapListView .card>.row>div {
  padding-right:0;
}
main section#map #mapContainer #mapListView .card .row i {
  color:#989898;
}
main section#map #mapContainer #mapListView .card .col-1 {
  text-align:center;
}
main section#map #mapContainer #mapListView .card .hospital-name {
  padding:0;
  font-weight:900;
  font-size:.95rem;
  color:#666;
  overflow:hidden;
  text-overflow:ellipsis;
}
main section#map #mapContainer #mapListView .card .hospital-hours-row {
  margin-top:.5rem;
}
main section#map #mapContainer #mapListView .card .hospital-hours {
  font-size:.85rem;
  padding-left:0;
}
main section#map #mapContainer #mapListView .card .hospital-hours:lang(ar) {
  direction:rtl;
  text-align:end;
}
main section#map #mapContainer #mapListView .card .floating {
  text-align:center;
  width:auto;
  position:absolute;
  right:0;
  bottom:0;
}
main section#map #mapContainer #mapListView .card .blood-type {
  width:auto;
  font-weight:900;
  font-size:1.25rem;
  color:var(--color)
}
main section#map #mapContainer #mapListView .card .hospital-donate {
  width:auto;
  padding:0 .5rem!important;
}
main section#map #mapContainer #mapListView .card .hospital-donate button {
  background:var(--color);
  color:#fff;
  border-radius:2rem;
  text-transform:capitalize;
  font-size:.75rem;
  padding:.375rem .75rem;
}
main section#map #mapContainer #mapListView .card .hospital-donate button .short-text {
  display:none;
}
main section#map #mapContainer #mapListView .card .hospital-donate button:hover {
  background:#fff;
  color:var(--color);
  border-color:var(--color)
}
main section#map #mapContainer #mapListView .card.platelets {
  border-left-color:#ffc90e;
}
main section#map #mapContainer #mapListView .card.platelets .blood-type {
  color:#ffc90e;
}
main section#map #mapContainer #mapListView .card.platelets .hospital-donate button {
  background:#ffc90e;
}
main section#map #mapContainer #mapListView .card.platelets .hospital-donate button:hover {
  color:#ffc90e;
  border-color:#ffc90e;
  background-color:#fff;
}
main section#map #mapContainer #mapListView .card.plasma {
  border-left-color:#2da44e;
}
main section#map #mapContainer #mapListView .card.plasma .blood-type {
  color:#2da44e;
}
main section#map #mapContainer #mapListView .card.plasma .hospital-donate button {
  background:#2da44e;
}
main section#map #mapContainer #mapListView .card.plasma .hospital-donate button:hover {
  color:#2da44e;
  border-color:#2da44e;
  background-color:#fff;
}
@media(max-width:1091.98px) {
  main section#map #mapContainer #mapListView {
    height:90%;
    width:calc(100vw - 33%);
    max-width:1060px;
    overflow:auto;
    position:absolute;
    top:5%;
    left:33%;
    display:none;
  }
  main section#map #mapContainer #mapListView>.row>div {
    flex:0 0 auto;
    width:100%;
    margin:auto;
  }
  main section#map #mapContainer #mapListView .card {
    margin:auto;
    margin-bottom:.5rem;
    width:100%
  }
  main section#map #mapContainer #mapListView .card .hospital-name {
    width:83.3333333333%
  }

}
@media(max-width:991.98px) {
  main section#map #mapContainer #mapListView {
    height:90%;
    width:calc(100vw - 35%);
    max-width:1060px;
    overflow:auto;
    position:absolute;
    top:5%;
    left:35%;
    display:none;
  }
  main section#map:not([lang="ar"]) #mapContainer #mapForm .map-title {
    font-size:1.65rem;
  }

}
@media(max-width:889.98px) {
  main section#map #mapContainer #mapListView {
    height:90%;
    width:calc(100vw - 38%);
    max-width:1060px;
    overflow:auto;
    position:absolute;
    top:5%;
    left:38%;
    display:none;
  }

}
@media(max-width:819.98px) {
  main section#map #mapContainer #mapListView {
    height:90%;
    width:calc(100vw - 40%);
    max-width:1060px;
    overflow:auto;
    position:absolute;
    top:5%;
    left:40%;
    display:none;
  }

}
@media(max-width:767.98px) {
  main section#map {
    height:100vh;
    background:#fff;
  }
  main section#map #mapContainer {
    height:90vh;
  }
  main section#map .banner .blood-icon {
    left:1rem;
  }
  main section#map .banner .menu-icon {
    right:1rem;
  }
  main section#map #mapContainer #mapForm {
    top:7rem;
    left:2%
  }
  main section#map #mapContainer #mapForm>.row {
    width:3rem;
  }
  main section#map #mapContainer #mapForm>.row.show {
    width:14rem;
    padding:.5rem .25rem;
  }
  main section#map #mapContainer #mapForm .blood-type-select button {
    font-size:.95rem;
  }
  main section#map #mapContainer #mapForm .form-select, main section#map #mapContainer #mapForm>.row.show .form-select {
    font-size:.95rem;
  }
  main section#map #mapContainer #mapForm .icon {
    width:100%;
    margin:auto;
    padding:0;
  }
  main section#map #mapContainer #mapForm .form-select, main section#map #mapContainer #mapForm .blood-type-select {
    width:0;
    display:none;
  }
  main section#map #mapContainer>.map-title.banner {
    display:block;
    position:relative;
  }
  main section#map #mapContainer>.map-title.banner>.title {
    font-weight:600;
    display:none;
  }
  main section#map[lang="ar"] #mapContainer .map-title.banner>.title {
    font-size:1.15rem;
  }
  main section#map #mapContainer>.map-title>.map-subtitle {
    color:gray;
    text-transform:none;
    margin-bottom:0;
    margin-top:.25rem;
    font-size:.95rem;
    padding:0 .5rem;
  }
  main section#map #mapContainer>.map-title.banner>.close {
    position:absolute;
    top:-10px;
    right:2px;
    font-size:1.5rem;
    content:"×";
    padding:0;
    margin:0;
    color:gray;
  }
  main section#map #mapContainer>.map-title>.map-subtitle br {
    display:none;
  }
  main section#map #mapContainer #mapForm .map-title {
    display:none;
  }
  main section#map #mapContainer #mapForm .map-subtitle {
    display:none;
  }
  main section#map #mapContainer #mapForm>.row.show {
    position:relative;
    z-index:1;
  }
  main section#map #mapContainer.listView #mapForm {
    position:static;
    margin:auto;
    width:95%;
    max-width:500px;
    transform:none;
  }
  main section#map #mapContainer.listView #mapForm .list-subtitle {
    color:gray;
    display:block;
    margin:auto;
    text-align:center;
    padding:1rem 0;
    width:auto;
    font-weight:600;
  }
  main section#map #mapContainer.listView #mapForm .map-subtitle {
    display:none;
  }
  main section#map #mapContainer.listView #mapForm>.row, main section#map #mapContainer.listView #mapForm>.row.show {
    width:100%;
    margin:auto;
    align-content:center;
    justify-content:center;
    padding:.25rem;
    margin-bottom:.5rem;
  }
  main section#map #mapContainer.listView #mapForm>.row>* {
    display:flex;
  }
  main section#map #mapContainer.listView #mapForm .icon {
    margin:auto!important;
    padding:0!important;
    width:32px!important;
  }
  main section#map #mapContainer.listView #mapForm .row .blood-type-select, main section#map #mapContainer.listView #mapForm .row.show .blood-type-select {
    width:calc(100% - 46px);
    padding:0;
  }
  main section#map #mapContainer.listView #mapForm .blood-type-select>.row {
    width:100%;
    margin:auto;
  }
  main section#map #mapContainer.listView #mapForm .blood-type-select>.row>div {
    padding-left:.25rem;
    padding-right:.25rem;
    width:12.5%
  }
  main section#map #mapContainer.listView #mapForm .blood-type-select button {
    margin-bottom:0;
    padding:.3rem 0;
  }
  main section#map #mapContainer.listView #mapForm>.row:nth-last-child(2) {
    width:49%;
    float:left;
  }
  main section#map #mapContainer.listView #mapForm>.row:last-child {
    width:49%;
    float:right;
  }
  main section#map #mapContainer.listView #mapForm .form-select, main section#map #mapContainer.listView #mapForm>.row.show .form-select {
    width:calc(100% - 46px)
  }
  main section#map #mapContainer.listView #mapListView {
    position:static;
    margin:auto;
    width:95%;
    transform:none;
    height:calc(100% - 165px)
  }

}
@media(max-width:576.98px) {
  main section#map #mapContainer>#mapWrapper {
    background-image:url('../assets/dsctoday/map_mobile.jpg')
  }
  main section#map .banner .blood-icon {
    display:none;
  }
  main section#map #mapContainer #mapForm>.row.show {
    width:12rem;
    padding:.5rem .25rem;
  }
  main section#map #mapContainer #mapForm .blood-type-select button {
    font-size:.85rem;
  }
  main section#map #mapContainer #mapForm .form-select, main section#map #mapContainer #mapForm>.row.show .form-select {
    font-size:.8rem;
  }
  main section#map .banner .banner-title {
    margin:0 1rem;
    text-align:start;
  }
  main section#map #mapContainer #mapListView {
    width:calc(100% - 5% - 3rem);
    left:calc(3rem - 5% * -1);
    transform:none;
  }
  main section#map #mapContainer #mapListView .card .hospital-hours {
    font-size:.80rem;
    padding-right:0;
  }
  main section#map .banner .menu-icon {
    right:0rem;
  }
  main section#map #mapContainer #mapListView .card .blood-type {
    right:2rem;
  }

}
@media(max-width:476.98px) {
  main section#map .banner .banner-title {
    font-size:1.15rem;
  }
  main section#map #mapContainer #mapListView .card .hospital-donate button .full-text {
    display:none;
  }
  main section#map #mapContainer #mapListView .card .hospital-donate button .short-text {
    display:inherit;
  }

}
@media(max-width:459.98px) {
  main section#map #mapContainer>.map-title {
    font-size:.95rem;
  }
  main section#map #mapContainer>.map-title>.map-subtitle {
    font-size:.85rem;
  }
  main section#map #mapContainer>.map-title:lang(fr) {
    font-size:.85rem;
  }
  main section#map #mapContainer>.map-title>.map-subtitle:lang(fr) {
    font-size:.75rem;
  }

}
@media(max-width:409.98px) {
  main section#map .banner .menu-icon {
    font-size:1.15rem;
  }
  main section#map .banner .banner-title {
    font-size:1.05rem;
  }

}
@media(max-width:386.98px) {
  main section#map #mapContainer>.map-title {
    padding:.5rem .5rem;
  }
  main section#map #mapContainer #mapListView .card .row.hospital-name-row .col-11 {
    width:85%
  }
  main section#map #mapContainer #mapListView .card .row.hospital-hours-row .col-11 {
    width:80%
  }
  main section#map #mapContainer #mapListView>.row>div {
    padding:0 .25rem;
  }
  main section#map #mapContainer.listView #mapForm .blood-type-select>.row>div {
    padding-left:.15rem;
    padding-right:.15rem;
    width:12.5%
  }

}
@media(max-width:376.98px) {
  main section#map .banner .banner-title {
    font-size:.9rem;
  }
  main section#map #mapContainer>.map-title {
    padding:.5rem .5rem;
    width:88%
  }
  main section#map #mapContainer>.map-title>.map-subtitle {
    font-size:.75rem;
  }
  main section#map #mapContainer.listView #mapForm .form-select, main section#map #mapContainer.listView #mapForm>.row.show .form-select {
    font-size:.65rem;
  }

}
@media(max-width:356.98px) {
  main section#map #mapContainer #mapListView .card .hospital-hours {
    font-size:.75rem;
  }
  main section#map #mapContainer #mapListView .card .hospital-donate button {
    text-transform:capitalize;
  }
  main section#map #mapContainer.listView #mapForm .list-subtitle {
    font-size:.85rem;
  }

}
@media(max-width:345.98px) {
  main section#map #mapContainer #mapForm {
    top:8rem;
  }

}
@media(max-width:336.98px) {
  main section#map .banner .banner-title {
    font-size:.95rem;
  }

}
@media(max-width:329.98px) {
  .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
    opacity:.7;
  }
  main section#map #mapContainer #mapListView .card .hospital-hours {
    font-size:.7rem;
  }

}