/* ZAKAT CSS
	1. CORE CSS
	2. NAVIGATION
	3. TOP
	4. ABOUT
	5. PROGRAM
	6. MILESTONE
	7. STORIES
	8. GALLERY
	9. EVENTS
	10. NEWS
	11. FOOTER
	12. MISC.
		A. FORM ELEMENTS
		B. BUTTONS
		C. PRELOAD
		D. OWL CAROUSEL
		E. IMAGE HOVER EFFECTS
*/

/* CORE CSS */
html {
  overflow-x: hidden;
}

body {
  color: #333;
  font-family: 'encode_sans_narrowregular';
  font-size: 1.4em;
  line-height: 1.5em;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #333;
  font-family: 'Montserrat-Bold';
}

h2 {
  color: #333;
  letter-spacing: -1px;
  margin-bottom: 0;
}

h3 {
  color: #333;
  letter-spacing: -1px;
  line-height: 20px;
}

h4 {
  font-size: 15px;
}

section {
  padding: 45px 0;
}

.lead {
  font-family: 'encode_sans_narrowregular';
  font-size: 15px;
}

.uppercase {
  text-transform: uppercase;
}

/* NAVIGATION */

header {
  width: 100%;
  z-index: 1041;
}

.navbar {
  -webkit-transition: background 0.75s ease-in-out, padding 0.75s ease-in-out;
  -moz-transition: background 0.5s ease-in-out, padding 0.75s ease-in-out;
  transition: background 0.75s ease-in-out, padding 0.75s ease-in-out;
}

.navbar-custom {
  color: #fff;
  font-family: 'encode_sans_narrowmedium';
  font-size: 14px;
  border-radius: 0;
  margin-bottom: 0;
  padding: 20px 0;
  width: 100%;
}

.navbar-custom a {
  color: #333;
}

.navbar-brand {
  padding: 0 15px;
}

.navbar-custom .navbar-nav > li > a:hover {
  color: #000;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.navbar-custom .navbar-toggle .icon-bar {
  background: #000;
}

.banner--clone {
  background: #fff;
}

.banner--clone .navbar-custom a {
  color: #eee;
}

.banner--clone .navbar-custom .navbar-nav > li > a:hover {
  color: #000;
}

/* TOP */

#top {
  color: #fff;
<<<<<<< HEAD
  background: url(packages/mr_latitude21/Resources/Public/Images/top-bg.png) bottom center no-repeat;
=======
  background: url(../Images/top-bg.png) bottom center no-repeat;
>>>>>>> parent of 2238f19 ([TASK] Migrate latitude21 css to scss)
  width: 100%;
  max-height: auto;
  height: 667px;
  margin-bottom: 15px;
  position: relative;
  display: table;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
}

#top .entry {
  display: table-cell;
  vertical-align: middle;
}

#top h1 {
  font-size: 65px;
  font-weight: 700;
  line-height: 52px;
  letter-spacing: -2px;
}

#top .lead {
  font-size: 16px;
  line-height: 16px;
}

/* Home image */
@media only screen and (max-width: 990px) {
  section#slider {
    max-height: 200px;
  }

  @media only screen and (min-width: 1200px) {
    section#slider {
      max-height: 400px;
    }
  }

  @media only screen and (min-width: 1201px) {
    section#slider {
      max-height: 600px;
    }
  }
}


/* ABOUT */

.service {
  padding: 15px;
}

.service i {
  color: #368ecd;
}

.service:hover {
  background: #368ecd;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.service:hover i {
  color: #000;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.service:hover h3 {
  color: #fff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.service:hover p {
  color: #000;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.service .button {
  opacity: 0;
  margin-bottom: 0;
}

.service:hover .button {
  opacity: 1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

/* PROGRAM */

#program {
  background: linear-gradient(
    rgba(0, 108, 157, 0.65),
    rgba(0, 108, 157, 0.65)
  );
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
}

.news {
  padding-left: 0;
  padding-right: 0;
}

.news .article {
  margin: 0 15px;
}

.article {
  background: #fff;
  margin-bottom: 20px;
}

.article div {
  padding: 15px;
  position: relative;
}

.article .lead {
  color: #000;
}

.article .icon {
  color: #fff;
  background: #368ecd;
  padding: 10px;
  display: table;
  position: absolute;
  top: -25px;
  right: 15px;
}

.article .button {
  margin-bottom: 0;
}

/* POPUP PROGRAM DETAILS */

#program-detail {
  background: #fff;
  position: relative;
}

#program-detail header {
  margin-bottom: 10px;
}

#program-detail .icon {
  color: #000;
  background: #368ecd;
  padding: 10px;
  margin-right: 10px;
  display: table;
  float: left;
}

#program-detail p {
  margin-bottom: 20px;
}

#program-detail .small {
  line-height: 16px;
}

#program-detail .mfp-close {
  color: #fff;
  background: #000;
}

/* MILESTONE */

#milestone {
  width: 100%;
  padding: 100px 0;
  overflow: hidden;
  z-index: 0;
  height: auto;
  display: table;
}

.fact {
  text-transform: uppercase;
  display: table-cell;
  vertical-align: middle;
}

.fact .timer {
  color: #000;
  font-family: 'encode_sans_narrowthin';
  font-weight: 100;
  font-size: 65px;
  line-height: 55px;
}

.fact p {
  font-size: 14px;
  font-family: 'Montserrat-Bold';
  letter-spacing: 1px;
}

.fact i {
  color: #368ecd;
  vertical-align: middle;
  margin-bottom: 20px;
}

/* STORIES */

#stories {
  background: #368ecd;
<<<<<<< HEAD
  background-image: url(packages/mr_latitude21/Resources/Public/Images/map-black.png);
=======
  background-image: url(../Images/map-black.png);
>>>>>>> parent of 2238f19 ([TASK] Migrate latitude21 css to scss)
  background-repeat: no-repeat;
  background-position: right bottom;
}

#stories .lead {
  color: #000;
}

.stories {
  padding-left: 0;
  padding-right: 0;
}

.stories .story {
  margin: 0 15px 30px;
}

.story {
  background: #fff;
  margin-bottom: 20px;
}

.story h3 {
  font-size: 21px;
}

.story div {
  padding: 15px;
  position: relative;
}

.story .icon {
  color: #000;
  background: #368ecd;
  padding: 10px;
  display: table;
  position: absolute;
  top: -25px;
  right: 15px;
}

.story .icon h6 {
  margin-top: 0;
  margin-bottom: 0;
}

.story .button {
  margin-bottom: 0;
}

#donate .lead {
  color: #000;
  font-size: 19px;
}

#donate .pledged {
  color: #000;
  font-family: 'Montserrat-Bold';
  font-size: 55px;
  letter-spacing: -4px;
  margin: 15px 0;
}

#donate .progress {
  background: #ddd;
  margin-top: 20px;
  border-radius: 15px;
}

#donate .progress-bar {
  background: #000;
  border-radius: 15px;
}

/* POPUP DONATE FORM */

#donate-form {
  background: #fff;
}

#donate-form input,
#donate-form select {
  border: 1px solid #777;
}

/* POPUP STORY DETAILS */

#story-detail {
  background: #fff;
  position: relative;
}

#story-detail header {
  margin-bottom: 10px;
}

#story-detail .icon {
  color: #000;
  background: #368ecd;
  padding: 10px;
  margin-right: 10px;
  display: table;
  float: left;
}

#story-detail p {
  margin-bottom: 20px;
}

#story-detail blockquote {
  font-size: 14.5px;
}

#story-detail footer {
  background: none;
  padding: 0;
}

#story-detail .mfp-close {
  color: #fff;
  background: #000;
}

/* GALLERY */

#gallery .list-inline > li,
a {
  padding: 0;
}

#gallery a {
  display: inherit;
}

/* EVENTS */

.event {
  display: table;
  width: 100%;
  border-spacing: 3px;
  height: 110px;
}

.event-inner {
  display: table-row;
}

.event h3 {
  color: #000;
  margin-top: 0;
  font-size: 17px;
}

.event .icon {
  color: #000;
  background: #368ecd;
  width: 25%;
  padding: 5px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.event .icon i {
  display: block;
  margin-bottom: 10px;
}

.event .description {
  background: #eee;
  padding: 15px;
  display: table-cell;
  vertical-align: middle;
}

.event .details {
  margin-right: 10px;
}

#upcoming-events .owl-buttons {
  position: absolute;
  top: -29px;
  right: 0;
}

#upcoming-events .owl-buttons .icon {
  color: #fff;
  background: #368ecd;
  width: 20px;
  height: 20px;
  border-radius: 0;
  vertical-align: middle;
  margin-right: 3px;
  display: table;
}

#upcoming-events .owl-buttons .icon i {
  display: table-cell;
  vertical-align: middle;
}

#events img {
  margin-bottom: 25px;
}

#world-map {
  width: 100%;
  height: 500px;
}

@media (max-width: 768px) {
  #world-map {
    height: 350px;
  }
}

/* NEWS */

.news .date {
  font-size: 12px;
  padding: 0;
  position: absolute;
  bottom: 0;
  right: 10px;
}

.news .date i {
  color: #368ecd;
}

/* Common style */
.news figure {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: #368ecd;
  text-align: center;
  cursor: pointer;
}

.news figure img {
  position: relative;
  display: block;
  opacity: 0.8;
}

.news figure figcaption {
  padding: 1.1em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.news figure figcaption:before,
.news figure figcaption:after {
  pointer-events: none;
}

.news figure figcaption,
.news figure a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Anchor will cover the whole item by default */

/* For some effects it will show as a button */
.news figure a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}

.news figure h3 {
  color: #fff;
  font-size: 21px;
  font-weight: 400;
}

.news figure h3,
.news figure p {
  margin: 0;
}

.news figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}

/* --------------- */

/***** news-effect *****/

/* --------------- */

figure.news-effect {
  background: #000;
}

figure.news-effect img {
  width: -webkit-calc(100% + 20px);
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

figure.news-effect:hover img {
  opacity: 0.4;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.news-effect figcaption {
  text-align: left;
}

figure.news-effect h3 {
  position: relative;
  overflow: hidden;
  padding: 0.5em 0;
}

figure.news-effect h3:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #368ecd;
  content: '';
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

figure.news-effect:hover h3:after {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.news-effect .date,
figure.news-effect p,
figure.news-effect i {
  padding: 1em 0;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

figure.news-effect:hover .date,
figure.news-effect:hover p,
figure.news-effect:hover i {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

figure.news-effect i {
  padding: 0.3em 0;
}

/* POPUP NEWS DETAILS */

#news-detail {
  background: #fff;
  position: relative;
}

#news-detail header {
  margin-bottom: 10px;
}

#news-detail .date {
  color: #000;
  background: #368ecd;
  padding: 10px;
  margin-right: 10px;
  display: table;
  float: left;
  position: absolute;
  top: 0;
  right: -10px;
}

#news-detail p {
  margin-bottom: 20px;
}

#news-detail .mfp-close {
  color: #fff;
  background: #000;
}

/* FOOTER */

footer {
  color: #000;
  background: #368ecd;
  padding: 55px 0;
<<<<<<< HEAD
  background-image: url(packages/mr_latitude21/Resources/Public/Images/map-black.png);
=======
  background-image: url(../Images/map-black.png);
>>>>>>> parent of 2238f19 ([TASK] Migrate latitude21 css to scss)
  background-repeat: no-repeat;
  background-position: right top;
}

footer .address {
  display: table;
  margin-bottom: 5px;
}

footer .icon,
footer p {
  display: table-cell;
  vertical-align: top;
}

footer .icon {
  text-align: center;
  width: 35px;
  height: 35px;
}

footer #newsletter {
  margin-top: 15px;
}

footer .button {
  margin: 0;
}

/* social buttons */

.social {
  margin: 5px 0;
}

.social .fa-inverse {
  color: #368ecd;
}

.social .fa-inverse:hover {
  color: #368ecd;
}

.social a {
  color: #fff;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

.social a:hover {
  color: #000;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

/* FORM ELEMENTS */

input[type='text'],
input[type='email'],
select {
  font-size: 20px;
  font-family: inherit;
  width: 100%;
  min-height: 30px;
  padding: 10px;
  text-transform: uppercase;
  border: 0;
  margin-bottom: 20px;
  outline: none;
}

/* BUTTONS */

.button {
  font-family: 'Montserrat-Regular';
  font-size: 10px;
  text-transform: uppercase;
  border: none;
  margin: 15px 0;
  padding: 5px 15px;
  display: inline-block;
  position: relative;
  outline: none;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.button:after {
  content: '';
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.button-big {
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.button-light {
  color: #fff;
  background: #368ecd;
}

.button-light:hover,
.button-light:active {
  color: #000;
  text-decoration: none;
}

.button-dark {
  color: #fff;
  background: #000;
}

.button-dark:hover,
.button-dark:active {
  color: #368ecd;
  text-decoration: none;
}

/* PRELOAD */

#preload {
  background: #ececee;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: table;
}

.preload {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}

.loader:before,
.loader:after {
  position: absolute;
  content: '';
}

.loader:before {
  width: 5.2em;
  height: 10.2em;
  background: #ececee;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.2em 5.1em;
  transform-origin: 5.2em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
}

.loader {
  font-size: 11px;
  text-indent: -99999em;
  margin: 5em auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em #368ecd;
}

.loader:after {
  width: 5.2em;
  height: 10.2em;
  background: #ececee;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 5.1em;
  -webkit-transform-origin: 0 5.1em;
  transform-origin: 0 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
}

@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* OWL CAROUSEL */

.owl-theme .owl-controls .owl-page span {
  background: #368ecd;
}

.owl-theme .owl-controls .owl-buttons div {
  color: #368ecd;
  padding: 0;
}

/* IMAGE HOVER EFFECTS */

.wrap {
  display: block;
  overflow: hidden;
  position: relative;
}

.wrap .plus {
<<<<<<< HEAD
  background: url(packages/mr_latitude21/Resources/Public/Images/plus.png) no-repeat scroll center center / 60px 60px #222;
=======
  background: url(../Images/plus.png) no-repeat scroll center center / 60px 60px #222;
>>>>>>> parent of 2238f19 ([TASK] Migrate latitude21 css to scss)
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 100%;
  z-index: 9999;
}

.wrap:hover .plus {
  opacity: 0.6;
  visibility: visible;
}

/* NAVIGATION HOVER EFFECTS */

.nav-effect li a {
  overflow: hidden;
  padding: 0 10px;
}

.nav-effect li a span {
  position: relative;
  display: inline-block;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}

.nav-effect li a span:before {
  position: absolute;
  top: 100%;
  content: attr(data-hover);
  font-family: 'encode_sans_narrowbold';
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.nav-effect li a:hover span,
.nav-effect li a:focus span {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
}

.navbar-brand {
  max-width: 450px;
  max-height: 80px;
  width: 100%;
  height: 100%;
}

.navbar-brand img {
  margin: 15px 0;
  height: auto;
  width: 100%;
  max-width: 100%;
}

.navbar.navbar-custom > .container {
  display: flex;
  height: 70px;
  max-height: 70px;
}

.navbar.navbar-custom .container #main-nav {
  width: 100%;
}

.iban {
  font-size:15px;
  margin-top:15px;
}

.social-media .fa-brands::before {
    font-size:25px;
}

.social-media .fa-brands:hover{
  color:#000000;
}

.social-media:first-child {
  margin-right:10px;
}

.media-logos {
  display:flex;
  flex-wrap:wrap;
  margin-top:20px
}

@media (max-width: 1200px) {
  .navbar.navbar-custom .container .navbar-brand {
    max-width: 260px;
    margin: 5px 0;
  }

  .navbar-custom {
    font-size: 12px;
  }
}

@media (max-width: 992px) {
  .navbar.navbar-custom .container {
    width: 1070px !important;
    height: 50px;
  }
  .navbar.navbar-custom .container .navbar-brand {
    margin: 0;
  }
}

@media (max-width: 768px) {
  .navbar.navbar-custom .container {
    width: 850px;
  }
}