@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:600,700|Prompt:600,700,800,900|Righteous&display=swap");
* {
font-family: 'Montserrat', sans-serif;
scroll-behavior: smooth;
} #section1 {
position: relative;
width: 100%;
min-height: 101vh;
background-size: cover;
background-position-x: 57%;
background-image: url(//ummahcharity.org/wp-content/plugins/uc-dons/public/img/forage/home_forage.jpg); }
#section1 .bloc_water1 {
width: 100%;
position: absolute;
bottom: -20px;
z-index: 0;
height: 0;
background-color: #00526D;
transition: height 3.5s;
}
#section1 .title {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 10;
padding: 0 25px;
height: 100vh;
}
#section1 .subtitle {
margin: 0;
color: #0dd1e2;
max-width: 43rem;
text-align: center;
margin-top: 35px;
text-shadow: 0px 0px 0.5px white;
}
#section1 .title h1 {
color: #0dd1e2;
font-size: 11vw;
}
#section1 .title h1 .letter_O {
font-size: 15vw;
font-weight: 300;
}
#section1 .count_O {
position: relative;
}
#section1 .title .count {
position: absolute;
top: 7.5vw;
font-size: 3vw;
left: 10.5vw;
color: #0dd1e2;
text-align: center;
font-weight: 600;
}
#section1 .title .forage_name {
position: absolute;
top: 16vw;
font-size: 1.5vw;
text-align: center;
width: 100%;
color: #0dd1e2;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 4px;
display: flex;
}
#section1 .title .line1 {
height: 2px;
background: #0dd1e2;
border: none;
top: 2px;
width: 30%;
width: 25%;
left: 0;
}
#section1 .title .line2 {
height: 2px;
background: #0dd1e2;
border: none;
top: 2px;
width: 25%;
right: 0;
}
.forage_name span {
width: 50%;
text-shadow: 0px 0px 0.5px white;
}
#section1 .wave {
position: absolute;
bottom: 0;
margin-left: -10px;
width: 103%;
left: 0; height: 100px;
background: url(//ummahcharity.org/wp-content/plugins/uc-dons/public/img/forage/wave.png);
background-size: 1300px 100px;
}
#section1 .wave.wave1 {
animation: animate 30s linear infinite;
z-index: 1000;
opacity: 1;
animation-delay: 0s;
top: -98px;
}
@keyframes animate {
0% {
background-position-x: 0;
}
100% {
background-position-x: 1300px;
}
}
#section1 .wave.wave2 {
animation: animate2 15s linear infinite;
z-index: 999;
opacity: 0.4;
animation-delay: -5s;
top: -125px;
}
@keyframes animate2 {
0% {
background-position-x: 0;
}
100% {
background-position-x: -1300px;
}
}
#section1 .wave.wave3 {
animation: animate 15s linear infinite;
z-index: 998;
opacity: 0.2;
animation-delay: -2s;
top: -120px;
}
#section1 .wave.wave4 {
animation: animate2 15s linear infinite;
z-index: 997;
opacity: 0.7;
animation-delay: -3s;
top: -120px;
}
.cta {
margin-top: 25px;
display: inline-block;
padding: .75rem 1.25rem;
color: #fff;
text-transform: uppercase;
font-size: 1rem;
font-weight: 500;
letter-spacing: 1px;
transition: all .3s;
position: relative;
overflow: hidden;
z-index: 1;
border: 2px solid #0dd1e2;
background-color: #0dd1e2;
transition: 0.7s;
}
.cta2 {
margin-top: 25px;
display: inline-block;
padding: .75rem 1.25rem;
color: #0dd1e2;
text-transform: uppercase;
font-size: 1rem;
font-weight: 500;
letter-spacing: 1px;
transition: all .3s;
position: relative;
overflow: hidden;
z-index: 1;
border: 2px solid #0dd1e2;
transition: 0.7s;
}
.cta3 {
margin-top: 25px;
display: inline-block;
padding: .75rem 1.25rem;
color: #0dd1e2;
text-transform: uppercase;
font-size: 1rem;
font-weight: 500;
letter-spacing: 1px;
transition: all .3s;
position: relative;
overflow: hidden;
z-index: 1;
border: 2px solid #004a60;
transition: 0.7s;
}
.cta:hover,
.cta2:hover {
background-color: #26c2d3;
border: 2px solid #26c2d3;
color: #fff;
transition: 0.7s;
}
.cta3:hover {
color: #004a60;
background-color: #26c2d3;
transition: 0.7s;
} @media screen and (max-width: 965px) {
.topnav a {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {
position: absolute;
top: 0;
right: 0;
padding: 85px 60px;
background: rgb(0, 87, 115);
height: 100vh;
margin: 0;
box-shadow: -4px 1px 4px 0 rgba(0, 0, 0, .1);
}
.topnav.responsive .icon {
position: absolute;
right: 15px;
top: 10px;
}
.topnav.responsive a {
float: none;
display: block;
}
.mon-espace {
margin-left: 0px;
}
}
@media screen and (max-width: 750px) {
.circle-txt {
font-size: 12vw!important;
}
.swiper-container {
height: 480px;
}
.topnav a {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {
position: absolute;
top: 0;
right: 0;
padding: 85px 60px;
background: rgb(0, 87, 115);
height: 100vh;
margin: 0;
box-shadow: -4px 1px 4px 0 rgba(0, 0, 0, .1);
}
.topnav.responsive .icon {
position: absolute;
right: 15px;
top: 10px;
}
.topnav.responsive a {
float: none;
display: block;
}
#section1 .title h1 {
font-size: 18vw;
}
#section1 .title h1 .letter_O {
font-size: 25vw;
}
#section1 .title .forage_name {
top: 29vw;
font-size: 0.8rem;
}
#section1 .title .line1,
#section1 .title .line2 {
width: 19%;
}
#section1 .title .count {
top: 12vw;
font-size: 6vw;
left: 16vw;
}
.forage_name span {
width: 60%;
}
h2 {
font-size: 1.5rem;
}
#section2 .intro h2,
#section4 .intro h2,
#section5 h2 {
padding-bottom: 1.5rem;
}
p {
font-size: 1rem;
line-height: 23px;
}
#section6 h3 {
font-size: 2.5em;
}
#donation,
#donation-entier {
height: 600px;
}
}
@media screen and (max-width: 500px) {
.swiper-container {
height: 350px;
}
footer .icon i:before {
border-radius: 2em;
display: inline-block;
height: 2.5em;
line-height: 2.5em;
width: 2.5em;
transition: 0.5s;
}
footer .icon i {
font-size: 20px;
}
.introduction,
#section2 p {
font-size: 1rem;
}
#faire_un_don {
max-width: 10rem;
font-size: 0.6rem;
padding: 1em 0;
}
#section2 h3,
#section5 h3 {
font-size: 2em;
}
#launch_cb {
font-size: 0.75rem;
}
#launch_pp {
font-size: 0.75rem;
}
footer p {
font-size: 12px;
}
.cta,
.cta2 {
font-size: 0.8rem;
}
#section6 h3 {
font-size: 2.2em;
}
#section4 .row1 {
margin: 5rem 1rem;
padding: 2rem;
}
#section1 {
background-image: none;
background: rgb(255, 254, 234);
background: radial-gradient(circle, rgba(255, 254, 234, 1) 0%, rgba(252, 253, 234, 1) 16%, rgba(162, 234, 236, 1) 100%);
}
#donation-entier .descr_forage,
#section6 .introduction {
padding: 0 2rem;
}
}
@media screen and (min-width: 600px) {
.circle-txt {
font-size: 5vw;
}
.grid {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.cell {
width: calc(100% / 2 - 2rem);
margin: 1rem;
}
}
@media screen and (min-width: 1000px) {
.circle-txt {
font-size: 5vw;
}
}
@media screen and (max-width: 400px) {
#launch_ch,
#launch_vi,
#launch_cb,
#launch_pp {
width: 13rem;
}
#launch_ch {
margin-bottom: 10px;
}
.cta2 {
margin-top: 4px;
}
}
@media screen and (max-width: 1000px) {
#section4 .row1 {
display: inherit;
}
#section4 .row1 .row_img {
width: 100%;
}
#section4 .row1 .intro {
width: 100%;
}
#section4 p {
padding: 0;
}
#donation-entier,
#donation {
width: 90%;
float: none;
margin: auto;
}
#donation-entier {
margin-bottom: 5rem;
margin-top: 5rem;
}
#section6 {
padding-bottom: 5rem;
}
.resp_block {
display: block;
}
.resp_none {
display: none;
}
.link_donation .fa-long-arrow-alt-left {
transform: rotate(-90deg);
}
}