html, body {
scroll-behavior: smooth;
font-size: 20px;
font-weight: 400;
line-height: 160%;
margin: 0;
padding: 0;
color: #1C1C1E;
background: #fff;
}
html, body, p, a, button {
font-family: "Public Sans", sans-serif;
}
a {
color: #1C1C1E;
text-decoration: underline;
transition: all 0.3s ease;
}
.button, .donate-button a, .trip-button a {
display: inline-block;
padding: 9px 29px;
border: 0 none;
background: #24205E;
border-radius: 999px;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.donate-button a {
margin: 0 0 0 15px;
}
.donate-button a, .trip-button a {
display: inline-block;
padding: 0px 20px;
font-size: 14px;
}
.trip-button a {
background: #8983DA;
}
.trip-button a:hover {
background: #24205E;
}
.button:hover, .small-button:hover, .donate-button a:hover {
background: #8983DA;
}
img {
display: block;
object-fit: cover;
width: 100%;
height: auto;
border-radius: 20px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 800;
line-height: 110%;
margin: 0 0 20px;
}
h1 {
font-size: 48px;
}
h2, h3 {
font-size: 40px;
}
p {
margin: 0 0 30px;
}
header {
box-sizing: border-box;
display: flex;
justify-content: space-between;
margin: 0 auto;
padding: 20px 30px;
align-items: center;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
nav ul a {
display: block;
margin: 0 0 0 35px;
text-decoration: none;
font-size: 14px;
color: #1C1C1E;
text-decoration: none;
}
iframe[name="donorbox"] {
width: 100% !important;
} .m-by {
display: none !important;
} #logo {
width: 180px;
height: auto;
}
#body-content {
margin: 90px auto 150px;
width: 90%;
max-width: 1300px;
box-sizing: border-box;
}
#hero {
display: block;
background: #333244;
box-sizing: border-box;
padding: 40px 0;
}
#hero #container {
display: flex;
flex-direction: column;
position: relative;
width: 90%;
max-width: 1300px;
height: 500px;
overflow: hidden;
margin: 0 auto;
}
#hero #container::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 5;
border-radius: 20px;
}
#hero video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
border-radius: 20px;
}
#content {
position: relative;
z-index: 10;
color: #fff;
padding: 0 60px 40px;
margin-top: auto;
width: 60%;
}
#content h1 {
font-size: 40px;
}
#page-title {
color: #fff;
display: block;
margin: 0 auto;
width: 90%;
max-width: 1300px;
}
#content .button {
border: 1px solid #A8A8A8;
background: rgba(93, 93, 94, .2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
#content .button:hover {
background: #24205E;
border: 1px solid #24205E;
}
.attachment-post-thumbnail {
width: 90%;
max-width: 1000px;
margin: 0 auto 40px;
}
#page {
width: 90%;
max-width: 800px;
margin: 0 auto;
}
.content-container {
display: flex;
width: 100%;
margin: 0 auto 80px;
justify-content: space-between;
align-items: center;
}
.content-container img {
width: 50%;
}
.content-container .content {
width: 45%;
}
.content-container.reverse {
flex-direction: row-reverse;
}
#upcoming-trips {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 80px 0 0;
}
#upcoming-trips h2 {
font-size: 48px;
}
#trip-container {
width: 900px;
max-width: 90%;
margin: 0 auto;
}
.trip {
margin: 40px auto 0;
}
footer {
text-align: center;
padding: 100px 30px 50px;
box-sizing: border-box;
font-size: 14px;
} @media only screen and (max-width: 930px) {
.mobile-hide {
display: none !important;
}
header {
padding: 20px 10px;
}
#logo {
margin: 0 auto 10px;
}
nav ul a, .donate-button a {
margin: 0 10px;
}
.donate-button a, .trip-button a {
padding: 0;
background: #fff;
color: #1C1C1E;
font-size: 14px;
}
.trip-button a:hover, .donate-button a:hover {
background: #fff;
}
header, .content-container, .content-container.reverse {
flex-direction: column;
}
.home-hero {
padding: 0 !important;
}
#hero #container {
width: 100%;
}
#hero #container::after {
border-radius: 0;
}
#hero video {
border-radius: 0;
}
#body-content {
margin: 40px auto;
}
.content-container {
margin: 0 auto 30px;
}
#content h1, h2, h3, #upcoming-trips h2 {
font-size: 32px;
}
h3 {
font-size: 24px;
}
#content {
position: relative;
z-index: 10;
color: #fff;
padding: 0 30px 30px;
box-sizing: border-box;
margin-top: auto;
width: 100%;
}
#body-content .button {
margin: 0 0 30px;
}
#upcoming-trips {
padding: 40px 0 0;
}
.content-container .content, .content-container img {
width: 100%;
}
.attachment-post-thumbnail, #page {
width: 100%;
}
footer {
text-align: center;
padding: 30px;
box-sizing: border-box;
font-size: 14px;
}
}