@charset "UTF-8";
  @keyframes breathing {
0%, 100% {
transform: scale(1); }
50% {
transform: scale(1.10); }
} .btn-large.btn-brand.btn--card {
animation: breathing 2s ease-in-out infinite; font-weight: 600 ; }
.error {
border: 2px solid #f00 !important;
}
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
overflow: visible
}
pre {
font-family: monospace, monospace;
font-size: 1em
} abbr[title] {
border-bottom: none;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted
}
b,
strong {
font-weight: bolder
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
img {
border-style: none
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
[type=button],
[type=reset],
[type=submit],
button {
-webkit-appearance: button
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none;
padding: 0
}
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
padding: 0.35em 0.75em 0.625em
}
legend {
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
vertical-align: baseline
}
textarea {
overflow: auto
}
[type=checkbox],
[type=radio] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details {
display: block
}
summary {
display: list-item
}
template {
display: none
}
[hidden] {
display: none
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
*,
:after,
:before {
-webkit-box-sizing: inherit;
box-sizing: inherit
}
a {
color: #4C1372;
text-decoration: none
}
a:active,
a:focus,
a:hover {
color: #333333;
text-decoration: underline
}
@media (max-width:767px) {
.m-center {
text-align: center
}
.m-left {
text-align: left
}
.m-right {
text-align: right
}
}
@media (min-width:768px) and (max-width:980px) {
.t-left {
text-align: left
}
.t-right {
text-align: right
}
.t-center {
text-align: center
}
}
@media (min-width:981px) {
.d-left {
text-align: left
}
.d-right {
text-align: right
}
.d-center {
text-align: center
}
}
.df-center {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.rotate {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
display: block
}
.rotate-big {
-webkit-transform: rotate(-4deg);
transform: rotate(-4deg);
display: block
} .full {
width: 100%
}
@media (min-width:768px) and (max-width:980px) {
.p-xl {
padding: 15px 0
}
.p-100 {
padding: 15px 0
}
}
@media (max-width:767px) {
.p-xl {
padding: 15px 0
}
.p-100 {
padding: 15px 0
}
}
.bg-zakat {
background-color: #E5AD22
}
.bg-white {
background-color: #FFFFFF
}
.bg-light-grey {
background-color: #F8F8F8
}
.bg-mid-grey {
background-color: #ECECEC
}
.d-hidden {
visibility: hidden
}
@media (min-width:768px) and (max-width:980px) {
.t-hidden {
visibility: hidden
}
}
@media (max-width:767px) {
.m-hidden {
visibility: hidden
}
}
.mw-600 {
max-width: 600px;
margin: 0 auto
}
.mid-content {
max-width: 600px
}
html {
font-size: 100%
}
body {
color: #333333;
font: normal 115%/1.15 "Source Sans Pro", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif
}
p {
line-height: 1.4em
}
.light-title {
color: #FFFFFF
}
.dark-title {
color: #000000
}
.color-title-zakat {
color: #E5AD22
}
.light-title {
color: #FFFFFF
}
.light-text {
color: #FFFFFF
}
.clearfix:after {
clear: both;
content: "";
display: table
}
.content { width: 100%
}
.hide-text {
overflow: hidden;
padding: 0;
text-indent: 101%;
white-space: nowrap
}
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.content { }
p-100 {
padding: 15px  0
}
header {
background-color: #FFFFFF;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px;
box-shadow: rgba(0, 0, 0, 0.1) 0 0 20px;
height: 60px;
z-index: 1000
}
.btn--mobile,
.overlay-menu {
display: none
}
@media (max-width:341px) {
.bouton--mobile {
display: none !important
}
}
#navbar {
color: #000000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
max-height: 60px;
z-index: 4
}
#navbar .menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 60px;
max-width: 80%;
list-style: none;
text-align: center;
margin: 0;
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: -webkit-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
-webkit-transition: transform 0.5s ease-out
}
.menuIcon.toggle .icon-bars-neutral {
top: 5px;
-webkit-transform: translate3d(0, 5px, 0) rotate(135deg);
transform: translate3d(0, 5px, 0) rotate(135deg);
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}
.menuIcon.toggle .icon-bars-neutral:before {
top: 0;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
opacity: 0
}
.menuIcon.toggle .icon-bars-neutral:after {
top: 10px;
-webkit-transform: translate3d(0, -10px, 0) rotate(-270deg);
transform: translate3d(0, -10px, 0) rotate(-270deg);
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}
.menuIcon.toggle .icon-bars-neutral.overlay {
width: 20px;
opacity: 0;
-webkit-transition: all 0s ease 0s;
transition: all 0s ease 0s
}
.bouton--mobile {
display: inline-block;
position: absolute;
height: 44px;
line-height: 44px;
top: 4px;
right: 60px
}
.bouton--mobile .menu--don {
text-decoration: none;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 0.03rem;
background-color: #4C1372;
padding: 8px 24px;
color: #FFFFFF
}
.bouton--mobile .menu--don-neutral {
text-decoration: none;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 0.03rem;
background-color: #000000;
padding: 8px 24px;
color: #FFFFFF
}
.overlay-menu {
background-color: #FFFFFF;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
padding-right: 15px;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
width: 100vw;
height: 100vh;
-webkit-transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
z-index: 3
}
.overlay-menu li,
.overlay-menu ul {
display: block;
position: relative
}
.overlay-menu li a {
display: block;
font-size: 1em;
font-weight: 500;
letter-spacing: 0.1rem;
color: #000000;
text-decoration: none;
padding: 20px 0;
text-align: center;
text-transform: uppercase;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease
}
.overlay-menu .menu--don {
background-color: #4C1372;
color: #FFFFFF;
margin-top: 10px
}
.overlay-menu .menu--don-neutral {
background-color: #000000;
color: #FFFFFF;
margin-top: 10px
}
.overlay-menu li a:active,
.overlay-menu li a:hover {
color: #000000;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease
}
footer {
padding: 50px 0 10px 0
}
footer .footer--p {
font-size: 16px
}
footer .navigation .footer--h4 {
margin-top: 0
}
.subfooter .content {
text-align: center;
color: #000000
}
.logo-footer {
margin-bottom: 25px
}
.social-media {
margin: 50px -25px 50px -25px
}
.social-media .content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #F8F8F8;
padding: 25px 0;
margin: 0
}
.social-media .social-icon {
list-style-type: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 180px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-left: 0
}
.social-media .social-icon li>a>i {
color: #000000;
-webkit-transition: all ease 0.5s;
transition: all ease 0.5s
}
.social-media .social-icon li>a>i:hover {
-webkit-transform: scale(1.6) rotate(-15deg);
transform: scale(1.6) rotate(-15deg);
color: #4C1372
}
.social-media .social-icon.alt>li>a>i:hover {
color: #000000
}
.nav-footer {
list-style-type: none;
padding: 0 0 25px 0
}
.nav-footer li>a {
font-size: 1rem;
text-decoration: none;
line-height: 1.6rem;
color: #000000;
-webkit-transition: all ease 0.5s;
transition: all ease 0.5s
}
.nav-footer li>a:hover {
font-weight: 700
}
.navigation:not(:last-child)>.nav-footer {
border-bottom: 1px solid rgba(0, 0, 0, 0.2)
}
.footer {
border-top: 1px solid rgba(0, 0, 0, 0.2)
}
.nav-footer.tiny {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-bottom: 0
}
.nav-footer.tiny li:not(:first-child):before {
content: "|";
margin: 0 10px
}
.tiny>li>a {
color: #808080;
font-size: 0.8rem
}
footer p.tiny {
font-size: 0.8rem;
line-height: 1.2rem;
text-align: center;
color: #808080
}
@media (min-width:768px) and (max-width:980px) {
.subfooter,
footer.content {
padding: 0 50px
}
.social-media {
width: auto;
margin: 50px 0
}
.social-media .content {
width: auto
}
.col.content-navigation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
text-align: left;
padding: 0
}
.navigation:not(:last-child)>.nav-footer {
border-bottom: none
}
.navigation:first-child {
width: 40%
}
.navigation:nth-child(2),
.navigation:nth-child(3) {
width: 25%
}
}
@media (min-width:981px) {
.subfooter {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.subfooter .content {
text-align: left
}
.subfooter>.col:first-child {
width: 40%
}
.subfooter>.col:first-child .social-media {
margin: 50px 0 50px -25px;
width: auto
}
.subfooter>.col:first-child .social-media .content {
min-width: 60%;
max-width: 70%;
background-color: #F8F8F8;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: left;
-ms-flex-align: left;
align-items: left;
padding: 15px;
height: 130px;
position: relative;
z-index: 2;
height: 130px !important
}
.subfooter>.col:first-child .social-media .content:before {
content: "";
width: 700px;
max-width: 700px;
height: 130px;
background-color: #F8F8F8;
position: absolute;
left: -700px;
margin-top: -15px;
z-index: 1
}
.subfooter>.col:first-child .social-media .content .footer--h4 {
width: 100%;
margin-top: 8px
}
.subfooter>.col:first-child .social-media .content .social-icon {
max-width: 180px;
-ms-flex-item-align: self-start;
-ms-grid-row-align: self-start;
align-self: self-start;
margin-top: 0
}
.subfooter>.col:first-child .content {
text-align: left;
padding: 0 25px 0 0
}
.subfooter .col.content-navigation {
width: 55%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 30px;
padding: 0
}
.subfooter .col.content-navigation>.navigation:first-child {
width: 38%;
margin-right: 10px
}
.subfooter .col.content-navigation>.navigation:nth-child(2),
.subfooter .col.content-navigation>.navigation:nth-child(3) {
width: 30%
}
.subfooter .col.content-navigation .nav-footer {
border: none
}
.footer .content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.footer .content .col:first-child {
text-align: right;
color: #000000
}
.footer .content .col:first-child a {
color: #000000;
-webkit-transition: all ease 0.5s;
transition: all ease 0.5s
}
.footer .content .col:first-child a:hover {
font-weight: 400;
color: #333333
}
.footer .content .col:last-child .tiny {
text-align: left
}
} @media (min-width:768px) and (max-width:980px) {
.hero-zakat-alt {
margin-top: 0
}
}
@media (max-width:767px) {
.hero-zakat-alt {
margin-top: 0
}
}
.attention {
padding: 10px 25px;
border-radius: 5px
}
@media (min-width:981px) {
.combien-nissab .offset {
margin: -50px 0 100px 50px
}
}
.zakat-argent,
.zakat-or {
border-radius: 5px;
padding: 10px 40px
}
.zakat-or {
margin-top: -50px;
margin-bottom: 65px;
position: relative;
padding-bottom: 0
}
.zakat-or:before {
content: url(//ummahcharity.org/wp-content/plugins/uc-dons/public/img/page/zakat/Or.svg);
position: absolute;
top: -70px;
right: 40px
}
.zakat-or h4 {
position: relative;
margin-bottom: 40px
}
.zakat-or h4:after {
content: url(//ummahcharity.org/wp-content/plugins/uc-dons/public/img/page/zakat/arrow-black-right.svg);
position: absolute;
top: 25px
}
.zakat-argent {
position: relative;
padding-bottom: 40px
}
.zakat-argent:before {
content: url(//ummahcharity.org/wp-content/plugins/uc-dons/public/img/page/zakat/argent.svg);
position: absolute;
top: -70px;
left: 40px
}
.zakat-argent h4 {
margin-top: 70px;
position: relative;
margin-bottom: 40px
}
.zakat-argent h4:after {
content: url(//ummahcharity.org/wp-content/plugins/uc-dons/public/img/page/zakat/arrow-yellow-right.svg);
position: absolute;
top: 25px
}
.nissab {
width: 100%;
background-color: #FFFFFF;
font-size: 3rem;
font-weight: 700;
border-radius: 3px;
padding: 10px;
margin-bottom: 0;
margin-top: 0;
color: #000000
}
@media (min-width:768px) and (max-width:980px) {
.exemple-nissab {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.exemple-nissab .col:first-child {
width: 100%
}
.exemple-nissab .col:not(:first-child) {
width: 48%
}
.exemple-nissab .zakat-argent h4,
.exemple-nissab .zakat-or h4 {
margin-bottom: 50px
}
}
@media (max-width:767px) {
.zakat-or {
margin-top: 80px;
padding-bottom: 40px
}
.zakat-argent .nissab,
.zakat-or .nissab {
font-size: 2.5rem
}
.zakat-argent h4,
.zakat-or h4 {
margin-bottom: 50px
}
}
figure.temoignage {
padding: 30px;
border-radius: 5px;
margin-top: 50px;
position: relative
}
figure.temoignage p {
font-style: italic;
margin: 0
}
figure.temoignage figcaption {
font-weight: 700;
padding: 30px 30px 10px 30px
}
figure.temoignage:before {
content: url(//ummahcharity.org/wp-content/plugins/uc-dons/public/img/page/zakat/quotes.svg);
position: absolute;
top: -50px;
right: 40px
}
.collecte-zakat h2 {
margin-bottom: 50px
}
.collecte-zakat .mid-content {
padding: 50px 0
}
.collecte-zakat .bg-img {
background-image: url(//ummahcharity.org/wp-content/plugins/uc-dons/public/img/page/zakat/zakat-happyDonation.png);
background-size: cover;
background-repeat: no-repeat;
background-position: top 25% right 0%
}
@media (min-width:768px) and (max-width:980px) {
.d-2-col-fw {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: column !important;
flex-direction: column !important
}
.d-2-col-fw .mid-content {
max-width: 90%;
padding: 50px 25px 50px 0
}
.d-2-col-fw .col {
width: 100% !important
}
.d-2-col-fw .bg-img {
height: 400px
}
}
@media (max-width:767px) {
.d-2-col-fw {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: column !important;
flex-direction: column !important
}
.d-2-col-fw .mid-content {
max-width: 90%;
padding: 50px 20px 50px 0
}
.d-2-col-fw .col {
width: 100% !important
}
.d-2-col-fw .bg-img {
height: 400px
}
}
#fitr {
margin-top: -100px
}
#fitr .underline {
text-decoration: underline !important
}
.fitr {
background-color: #3F0E60;
border-radius: 10px;
-webkit-box-shadow: -10px 10px 0 rgba(0, 0, 0, 0.05);
box-shadow: -10px 10px 0 rgba(0, 0, 0, 0.05);
padding: 25px;
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.fitr:after {
content: url(//ummahcharity.org/wp-content/plugins/uc-dons/public/img/page/zakat/pain.svg);
position: absolute;
right: -30px;
top: -30px
}
.fitr .h2-zakat.d-left>.h2--enhance {
margin-top: -5px;
line-height: 2.5rem;
margin-bottom: 50px
}
.fitr .perso {
width: 300px;
margin: 50px 0 50px 100px
}
.fitr p {
color: #FFFFFF;
margin-bottom: 50px
}
.fitr .col:first-child {
width: 50%
}
.fitr .col:last-child {
width: 50%
}
.fitr .arrow-left-bis {
position: relative
}
.fitr .arrow-left-bis:after {
content: url(//ummahcharity.org/wp-content/plugins/uc-dons/public/img/page/zakat/arrow-btn-bis-left.svg);
position: absolute;
right: -100px;
top: -30px
}
@media (min-width:768px) and (max-width:980px) {
.fitr {
padding: 50px 25px
}
.fitr:after {
content: none
}
.fitr .perso {
width: 250px;
margin: 0
}
}
@media (max-width:767px) {
.fitr {
padding: 70px 20px
}
.fitr .col:first-child,
.fitr .col:last-child {
width: 100%
}
.fitr:after {
content: none
}
.fitr .perso {
width: 250px;
margin: 0;
display: block;
margin: 0 auto
}
.fitr .h2-zakat {
margin-top: 50px
}
.fitr .arrow-left-bis:after {
content: none
}
.fitr .btn-left {
display: block;
text-align: center
}
}
.bg-white-grey {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #FFFFFF), color-stop(30%, #F8F8F8));
background-image: linear-gradient(180deg, #FFFFFF 30%, #F8F8F8 30%)
}
.galerie {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(35%, #FFFFFF), color-stop(35%, #E5AD22), color-stop(70%, #E5AD22), color-stop(70%, #FFFFFF));
background-image: linear-gradient(#FFFFFF 35%, #E5AD22 35%, #E5AD22 70%, #FFFFFF 70%);
padding-bottom: 0 !important
}
.galerie .d-3-col {
-ms-flex-pack: distribute;
justify-content: space-around
}
.galerie .d-3-col .col-2 {
margin-top: -50px
}
.galerie .d-3-col .col {
width: 32%
}
.galerie .d-3-col .col img {
width: 100%;
height: auto;
border-radius: 10px
}
@media (min-width:768px) and (max-width:980px) {
.col-2 {
margin-top: -35px !important
}
}
@media (max-width:767px) {
.galerie {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #FFFFFF), color-stop(15%, #E5AD22), color-stop(85%, #E5AD22), color-stop(85%, #FFFFFF));
background-image: linear-gradient(#FFFFFF 15%, #E5AD22 15%, #E5AD22 85%, #FFFFFF 85%)
}
.galerie .m-1-col .col {
width: 100%;
height: auto;
margin-bottom: 25px
}
.galerie .d-3-col .col-2 {
margin-top: 0
}
}
.question-zakat {
padding-bottom: 0 !important
}
.question-zakat .content {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.question-zakat .h2--enhance {
margin-top: -20px !important
}
.question-zakat img {
border-radius: 5px
}
@media (min-width:981px) {
.question-zakat img {
width: 95%;
text-align: left
}
}
@media (min-width:768px) and (max-width:980px) {
.question-zakat img {
width: 95%;
margin: 20px 20px 50px 20px
}
}
@media (max-width:767px) {
.question-zakat .h2--enhance {
margin-top: -10px !important
}
.question-zakat img {
width: 95%;
text-align: center;
margin: 10px 20px 50px 10px
}
}
.d-2-col-fw {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row
}
.d-2-col-fw .col {
width: 50%
}
.d-1-col-fw {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.d-1-col-fw .col {
width: 100%
}
.d-2-col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.d-2-col .col {
width: 48%
}
.d-3-col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.d-3-col .col {
width: 30%
}
.d-4-col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: distribute;
justify-content: space-around;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.d-4-col .col {
width: 20%;
margin: 0 2.5%
}
.p-col {
margin-top: 0;
margin-bottom: 50px
}
@media (min-width:768px) and (max-width:980px) {
.t-1-col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.t-1-col .col {
width: 100%
}
.t-2-col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.t-2-col .col {
width: 30%
}
}
@media (max-width:767px) {
.m-1-col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.m-1-col .col {
width: 100%
}
}
.offset {
padding: 50px;
margin: -50px 0 0 50px;
border-radius: 5px;
position: relative;
z-index: -2
}
.offset-center {
padding: 50px;
margin: -50px 0 0 0;
border-radius: 5px;
position: relative;
z-index: -2
}
.offset-center-alt {
padding: 25px 20px 50px 20px;
border-radius: 5px
}
@media (max-width:767px) {
.offset {
padding: 25px;
margin: -40px 0 0 0
}
}
.video-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
border-radius: 10px;
margin-top: 50px
}
.video-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute
}
.btn-center {
display: block;
text-align: center
}
.btn-left {
display: block;
text-align: left
}
.btn-left-offset {
display: block;
text-align: left;
margin-left: 80px
}
@media (max-width:767px) {
.btn-left-offset {
margin-left: 0;
text-align: center
}
}
.btn-large {
padding: 16px 32px;
border-radius: 5px;
border: none;
cursor: pointer
}
.btn-double-arrow:before {
content: url(//ummahcharity.org/wp-content/plugins/uc-dons/public/img/page/zakat/btn--arrow-left.svg);
margin-right: 30px
}
.btn-double-arrow:after {
content: url(//ummahcharity.org/wp-content/plugins/uc-dons/public/img/page/zakat/btn--arrow-right.svg);
margin-left: 30px
}
.btn-light-double-arrow:before {
content: url(//ummahcharity.org/wp-content/plugins/uc-dons/public/img/page/zakat/btn--light-arrow-left.svg);
margin-right: 30px
}
.btn-light-double-arrow:after {
content: url(//ummahcharity.org/wp-content/plugins/uc-dons/public/img/page/zakat/btn--light-arrow-right.svg);
margin-left: 30px
}
.btn-brand {
background-color: #4C1372;
color: #FFFFFF;
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
-webkit-transition: all ease-in-out 0.5s;
transition: all ease-in-out 0.5s
}
.btn-brand:hover {
color: #FFFFFF;
text-decoration: none;
-webkit-box-shadow: inset 400px 0 0 rgba(0, 0, 0, 0.3);
box-shadow: inset 400px 0 0 rgba(0, 0, 0, 0.3)
}
.btn-disabled {
background-color: #DFDFDF;
color: rgba(0, 0, 0, 0.5);
cursor: not-allowed
}
@media (max-width:767px) {
.btn-double-arrow:after,
.btn-double-arrow:before,
.btn-light-double-arrow:after,
.btn-light-double-arrow:before {
content: none
}
}
.btn-zakat {
background-color: #E5AD22;
color: #FFFFFF;
font-weight: 600;
text-decoration: none;
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
-webkit-transition: all ease-in-out 0.5s;
transition: all ease-in-out 0.5s
}
.btn-zakat:hover {
color: #FFFFFF;
text-decoration: none;
-webkit-box-shadow: inset 300px 0 0 rgba(0, 0, 0, 0.05);
box-shadow: inset 300px 0 0 rgba(0, 0, 0, 0.05)
}
.btn-light {
background-color: #FFFFFF;
color: #000000;
font-weight: 600;
text-decoration: none;
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
-webkit-transition: all ease-in-out 0.5s;
transition: all ease-in-out 0.5s
}
.btn-light:hover {
color: #000000;
text-decoration: none;
-webkit-box-shadow: inset 300px 0 0 rgba(0, 0, 0, 0.05);
box-shadow: inset 300px 0 0 rgba(0, 0, 0, 0.05)
}
.h1-zakat {
font-family: como, sans-serif;
font-size: 6rem;
line-height: 6rem
}
.h1--bellow {
margin: -25px 0
}
@media (min-width:768px) and (max-width:980px) {
.h1-zakat {
font-size: 5rem;
line-height: 5rem
}
}
@media (max-width:767px) {
.h1-zakat {
font-size: 4rem;
line-height: 4rem
}
}
.subtitle {
font-size: 1.5rem;
margin-top: -50px
}
@media (min-width:768px) and (max-width:980px) {
.subtitle {
margin-top: -40px
}
}
@media (max-width:767px) {
.subtitle {
font-size: 1.2rem;
margin-top: -20px
}
}
.h2-zakat.d-left>.h2--enhance {
margin-top: -30px
}
.h2-zakat.d-center>.h2--enhance,
.h2-zakat.t-center>.h2--enhance {
margin-top: -10px
}
.h2-zakat {
font-size: 1.4rem;
font-weight: 600;
font-weight: 600;
letter-spacing: 0.05em
}
.h2-zakat .h2--enhance {
font-family: como, sans-serif;
font-size: 3rem;
letter-spacing: 0
}
.h2-zakat .arrow-left:before {
content: url(//ummahcharity.org/wp-content/plugins/uc-dons/public/img/page/zakat/arrow-title-left.svg);
position: absolute;
top: 50px;
left: -20px
}
.h2-formdon {
color: #FFFFFF;
font-weight: 600;
font-size: 1.4rem
}
.h4--enhance {
font-family: como, sans-serif;
font-size: 2rem;
letter-spacing: 0
}
@media (min-width:768px) and (max-width:980px) {
.h2-zakat.t-left>.h2--enhance {
margin-top: -25px
}
}
@media (max-width:767px) {
.h2--enhance {
font-size: 2.3rem !important
}
.h2-zakat.m-center>.h2--enhance {
margin-top: -10px
}
.arrow-left:before {
content: none !important
}
}
input {
-moz-appearance: textfield
}
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0
}
input::-o-inner-spin-button {
-o-appearance: none;
margin: 0
} .formdon {
position: relative;
margin: 0 auto;
padding: 20px;
background-color: rgba(255, 255, 255, 0);
max-width: 450px;
border-radius: 5px
}
.formdon .validation {
margin-top: 0
}
.formdon p.validation.d-center.t-center.m-center.btn-light-double-arrow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.formdon p.validation.d-center.t-center.m-center.btn-light-double-arrow:before {
position: absolute;
left: -100px
}
.formdon p.validation.d-center.t-center.m-center.btn-light-double-arrow:after {
position: absolute;
right: -100px
}
.formdon .btn--card {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 15px;
height: 44px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.formdon .btn--card:before {
content: "";
font-family: "Font Awesome 6 Pro";
margin-right: 10px
}
.formdon h2.caisse_nom {
display: none
}
.formdon a#launch_ch_vi {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.formdon .btn--paypal {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 15px;
height: 44px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.formdon .btn--paypal:before {
content: "";
font-family: "Font Awesome 6 Brands";
margin-right: 10px
}
.formdon .btn--cheque {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 15px;
height: 44px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.formdon .btn--cheque:before {
content: "";
font-family: "Font Awesome 6 Pro";
margin-right: 10px
}
.formdon .btn--virement {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 15px;
height: 44px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.formdon .btn--virement:before {
content: "";
font-family: "Font Awesome 6 Pro";
margin-right: 10px
}
.formdon .retour {
position: absolute;
height: 30px;
background-color: transparent;
width: 100%;
margin-left: -20px;
border-radius: 0 0 5px 5px;
text-transform: uppercase;
font-size: 0.9rem;
padding: 0 20px
}
.formdon .retour a {
line-height: 30px
}
.formdon .retour a:before {
content: "";
font-family: "Font Awesome 6 Pro";
margin-right: 10px
}
.formdon .retour a:hover {
text-decoration: none
}
.formdon input#montant {
width: 100%;
height: 55px;
border-radius: 5px;
border: none;
text-align: center;
font-size: 2rem;
font-family: "Source Sans Pro", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
display: inline-block;
margin-bottom: 25px;
background-color: #F8F8F8;
border: 1px solid #DFDFDF
}
.formdon input#montant:focus {
outline: 2px solid #4C1372
}
.formdon input#montant:focus::-webkit-input-placeholder {
opacity: 0
}
.formdon input#montant:focus::-moz-placeholder {
opacity: 0
}
.formdon input#montant:focus:-ms-input-placeholder {
opacity: 0
}
.formdon input#montant:focus::-ms-input-placeholder {
opacity: 0
}
.formdon input#montant:focus::placeholder {
opacity: 0
}
.formdon input#montant:focus:not(:focus-visible) {
background: transparent
}
.formdon input#email,
.formdon input#nom {
width: 100%;
height: 44px;
border: 1px solid #DFDFDF;
text-align: center;
border-radius: 5px;
background-color: #F8F8F8;
margin-bottom: 15px
}
.formdon input#email:focus,
.formdon input#nom:focus {
outline: 2px solid #4C1372
}
.formdon input#email:focus::-webkit-input-placeholder,
.formdon input#nom:focus::-webkit-input-placeholder {
opacity: 0
}
.formdon input#email:focus::-moz-placeholder,
.formdon input#nom:focus::-moz-placeholder {
opacity: 0
}
.formdon input#email:focus:-ms-input-placeholder,
.formdon input#nom:focus:-ms-input-placeholder {
opacity: 0
}
.formdon input#email:focus::-ms-input-placeholder,
.formdon input#nom:focus::-ms-input-placeholder {
opacity: 0
}
.formdon input#email:focus::placeholder,
.formdon input#nom:focus::placeholder {
opacity: 0
}
.formdon input#email:focus:not(:focus-visible),
.formdon input#nom:focus:not(:focus-visible) {
background: transparent
}
.field.amount {
position: relative;
margin: 0 auto;
width: 100%
}
.choice-donation {
width: 100%;
margin: 0 auto;
margin-bottom: 20px
}
.btn-small-form {
color: #333333;
background-color: #FFFFFF;
padding: 8px 16px;
border: 2px solid #FFFFFF;
border-radius: 5px;
text-transform: uppercase;
text-decoration: none;
font-size: 0.9rem;
cursor: pointer;
-webkit-transition: all ease-in-out 0.2s;
transition: all ease-in-out 0.2s
}
.btn-small-form:hover {
text-decoration: none;
border: 2px solid #4C1372;
background-color: #4C1372;
color: #FFFFFF
}
.btn-small-form:active,
.btn-small-form:focus {
text-decoration: none
}
.btn--check {
background-color: #4C1372;
border-color: #4C1372;
color: #FFFFFF !important
}
.btn--check:hover {
color: #FFFFFF
}
.btn--check:active,
.btn--check:focus {
text-decoration: none
}
.btn--check:before {
content: "";
font-family: "Font Awesome 6 Pro";
margin-right: 10px
}
.eur {
position: absolute;
font-size: 2rem;
z-index: 1;
margin-left: 75%;
margin-top: 8px
}
.btn--submit input[type=submit] {
margin-top: 20px !important;
width: 320px;
border-radius: 5px;
height: 55px; border: none; cursor: pointer;
text-decoration: none;
-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
-webkit-transition: all ease-in-out 0.5s;
transition: all ease-in-out 0.5s
}
.btn--submit input[type=submit]:hover { text-decoration: none;
-webkit-box-shadow: inset 300px 0 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 300px 0 0 rgba(0, 0, 0, 0.2)
}
.form-2-col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: distribute;
justify-content: space-around
}
.form-2-col div {
width: 48%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.form-2-col div a {
text-align: center;
-webkit-transition: all ease-in-out 0.2s;
transition: all ease-in-out 0.2s
}
.month {
font-size: 1rem
}
.tiny-form {
font-size: 0.9rem;
font-style: italic
}
.formdon {
display: none
}
.current {
display: block !important
}
#autres_moyens.hidden {
display: none
}
@media (max-width:767px) {
.btn-small-form {
font-size: 0.85rem
}
} .loader {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100; }
.loader.visible {
display: block;
background-color: rgba(0, 0, 0, .6);
;
}
.dots {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.dot {
width: 15px;
height: 15px;
border: 2px solid white;
border-radius: 50%;
float: left;
margin: 0 5px;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation: fx 1000ms ease infinite 0ms;
animation: fx 1000ms ease infinite 0ms;
}
.dot:nth-child(2) {
-webkit-animation: fx 1000ms ease infinite 300ms;
animation: fx 1000ms ease infinite 300ms;
}
.dot:nth-child(3) {
-webkit-animation: fx 1000ms ease infinite 600ms;
animation: fx 1000ms ease infinite 600ms;
}
@-webkit-keyframes fx {
50% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fx {
50% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
100% {
opacity: 0;
}
}