@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(fonts/poppins-latin-300-normal.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/poppins-latin-400-normal.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/poppins-latin-600-normal.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/poppins-latin-700-normal.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: arial-adjusted; src: local("Arial"); ascent-override: 105%; descent-override: 35%; line-gap-override: 10%;}
/* Resets */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Utility Classes */
@media screen and (min-width: 768px) {
.hide-mobile {
display: none;
}
.desktopLineBreak {
display: block
}
}
@media screen and (max-width: 768px) {
.hide-desktop {
display: none;
}
}
@media screen and (max-width: 768px) {
.mobile-hide {
display: none !important;
}
}
.box-shadow {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.no-select {
user-select: none; /* Standard */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
}
/*////////////////////////////////////////*/
/* Toast CSS Configuration */
/*////////////////////////////////////////*/
/* Toast container */
#toast-container {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
min-width: 326px;
}
/* Toast notification */
.toast {
white-space: nowrap;
background-color: var(--deepGreen-main);
color: #fff;
padding: 1.25rem;
border-radius: 5px;
box-shadow: var(--box-shadow);
opacity: 0;
transition: opacity 0.3s, transform 0.3s, padding 0.3s;
text-align: center;
}
@media screen and (min-width: 768px) {
.toast {
padding: 1.25rem 6rem;
white-space: nowrap;
}
}
.toast.show {
opacity: 1;
transform: translateY(0);
}
.toast.hide {
opacity: 0;
transform: translateY(20px);
}
/*////////////////////////////////////////*/
/* Custom Properties as rgba values */
/*////////////////////////////////////////*/
:root {
--deepGreen-main: rgba(36, 76, 79, 1);
--lightGreen-main: rgba(36, 76, 79, .85);
--orange-main: rgba(236, 113, 64, 1);
--orange-light: rgba(236, 113, 64, .35);
/* #7D565F as rgba value: */
--deepOrange-main: rgba(125, 86, 95, .5);
--heading-2-desktop: 1.9rem; /* TODO: add clamp function */
--heading-2-mobile: 1.75rem;
--body-md-text: 1.2rem;
--body-sm-text: .9rem;
--paragraph-sm-text: .85rem;
--box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
body {
font-family: 'Poppins', Verdana, sans-serif;
font-size: 16px;
line-height: 1.6;
color: var(--deepGreen-main);
background-color: #f4f4f4;
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
display: flex;
flex-direction: column;
flex-grow: 1;
}
h1 {
font-size: 1.5rem;
margin-bottom: bold;
}
p {
margin-bottom: 1rem;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 2rem;
}
.container {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 2rem 0;
width: 326px;
height: auto;
}
@media screen and (min-width: 768px) {
.container {
width: 960px;
margin: 0 auto;
}
}
nav ul {
display: flex;
flex-direction: column;
list-style: none;
gap: 1rem;
padding-block: 1rem;
}
.siteHeader nav ul {
display: block;
position: absolute;
background-color: #fff;
width: 100%;
flex-direction: column;
gap: clamp(.5rem, 2.5vw, 3rem);
top: 100%;
}
.siteHeader nav ul li a {
display: none;
color: #333;
}
.site-header nav ul.active {
display: flex
}
.siteHeader nav ul.dropdownMenu {
display: none; /* Hidden by default */
position: absolute;
background-color: #fff;
width: 100%;
flex-direction: column;
gap: clamp(.5rem, 2.5vw, 3rem);
top: 100%;
}
.siteHeader nav ul.dropdownMenu.showMenu {
display: flex; /* Display flex when .showMenu is added */
}
.siteHeaderHomeSection {
position: absolute;
top: 0;
left: 0;
right: 0;
justify-content: space-between;
align-items: center;
inset: 0 0 auto 0;;
background-color: rgba(0, 0, 0, 0);
color: #fff;
padding: 1rem 0;
width: 100%;
z-index: 9999;
transition: background-color 0.3s ease, padding 0.3s ease;
}
.siteHeaderNotHomeSection {
justify-content: space-between;
align-items: center;
inset: 0 0 auto 0;;
background-color: #0F272F;
padding: 1rem 0;
width: 100%;
z-index: 9999;
transition: background-color 0.3s ease, padding 0.3s ease;
}
.siteHeaderContainer {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: .5rem 2rem;
}
@media screen and (min-width: 768px) {
.siteHeaderContainer {
width: 100%;
padding: 1rem 2rem;
}
}
.hamburgerMenuWrapper{
display: flex;
justify-content: center;
align-items: center;
}
.burgerMenu {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 40px;
height: 40px;
/* gap: .4rem; */
padding: .7rem;
margin: 0 0.25rem;
border-radius: .4rem;
background-color: var(--lightGreen-main);
opacity: 60%;
cursor: pointer;
& .burgerLine {
width: 25px;
height: 2px;
background-color: #fff;
border-radius: 0.5rem;
transition: all 0.3s ease;
}
}
@media screen and (min-width: 768px) {
.burgerMenu {
width: 42.5px;
height: 42.5px;
}
}
/* Animation classes */
.topAnimation {
transform-origin: center;
}
.middleAnimation {
opacity: 1;
}
.bottomAnimation {
transform-origin: center;
}
/* animates the X of th menu */
.burgerMenu.animate .topAnimation {
/* transform: rotate(45deg) translate(5px, 5px); */
transform: rotate(45deg) translate(6.25px, 6.25px);
}
.burgerMenu.animate .middleAnimation {
opacity: 0;
}
.burgerMenu.animate .bottomAnimation {
transform: rotate(-45deg) translate(6.25px, -6.25px);
}
.hamburgerMenu {
width: 45px;
height: 45px;
border: none;
border-radius: 0.25rem;
padding: 0.25rem;
opacity: 90%;
/* add filter to make the color match to #244C4F*/
filter: contrast(.8) brightness(1.3) saturate(1);
transition: width 0.3s ease;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.hamburgerMenu {
width: 50px;
height: 50px;
}
}
.dropdownMenu {
display: none;
position: absolute;
width: 216px;
height: auto;
top: 84px;
right: 0;
background-color: #fff;
margin-right: 2.25rem;
border: 1px solid #ccc;
border-radius: 0.5rem;
box-shadow: 0 10px 12px rgba(0, 0, 0, 0.1);
z-index: 9999;
& li {
display: flex;
justify-content: start;
align-items: center;
width: 100%;
max-height: 40px;
font-size: .9rem;
padding: 0.0125rem 0rem;
color: #333;
text-transform: capitalize;
text-decoration: none;
&:hover {
background: linear-gradient(to right, rgba(236, 113, 64, .20) 0%, rgba(236, 113, 64, 0) 70%);
}
}
& a {
display: flex;
justify-content: start;
align-self: center;
width: 100%;
max-height: 40px;
font-size: 1.25rem;
font-weight: 300;
padding: 0.625rem 1.25rem;
color: var(--deepGreen-main);
text-transform: capitalize;
text-decoration: none;
}
}
.showMenu {
display: block !important;
}
.bx-menu {
font-size: 2rem;
color: #000;
}
nav ul {
display: flex;
flex-direction: column;
list-style: none;
gap: 1rem;
/* & li:hover {
background-color: rgba(236, 113, 64, .25);
color: #fff;
} */
}
nav a {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem .875rem;
font-size: .825rem;
line-height: 1;
color: #000;
text-decoration: none;
}
a {
color: #fff;
text-decoration: none;
}
body {
font-family: 'Poppins', Verdana, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
}
.compTruthLogo {
width: 200px;
height: auto;
transition: width 0.3s ease;
}
@media screen and (min-width: 768px) {
.compTruthLogo {
width: 264px;
height: auto;
}
}
.hamburgerMenuMobile {
width: 50px;
transition: width 0.3s ease;
}
.heroSection {
position: relative;
background-color: #0F272F;
height: 478px;
color: #fff;
padding: 2rem 0;
text-align: center;
}
.heroContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* width: 326px;
height: auto;*/
margin: 0 auto;
padding: 0rem 0;
transition: all 0.5s ease;
}
@media screen and (min-width: 768px) {
.heroContainer {
/* width: 768px; */
margin: 0 auto;
width: 70%;
height: 100%;
}
}
.heroSectionBgWrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
& img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 75% 50%;
filter: brightness(.8) saturate(1.4);
}
}
@media screen and (min-width: 768px) {
.heroSection {
height: 786px;
}
}
.heroSection::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(67, 115, 121, 0.75), rgba(241, 88, 66, 0.35));
z-index: 1;
}
.searchbarWrapper {
/* position: absolute;
bottom: 0%;
width: 95%; */
align-items: center;
gap: 1rem;
margin-bottom: 3rem;
z-index: 2;
transition: all 0.5s ease;
width: 100%;
}
.searchMobileSection {
display: block;
}
@media screen and (min-width: 768px) {
.searchbarWrapper {
/* bottom: 25%;
width: 70%; */
}
.searchMobileSection {
display: none;
}
}
.searchbarContainer form{
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 0rem .125rem;
background-color: #fff;
border-radius: 0.5rem;
width: 90%;
/* max-width: 326px; */
margin: 0 auto;
transition: all 0.5s ease;
}
@media screen and (min-width: 768px) {
.searchbarContainer form {
max-width: 768px;
min-width: 326px;
width: auto;
margin: auto;
}
}
.searchbarIcon {
line-height: 0;
scale: .75;
color: #333;
margin: 0;
padding: 0;
}
.searchbarInput {
display: flex;
justify-content: flex-start;
align-items: center;
border: none;
padding: 0.625rem 0;
color: #333;
width: 100%;
font-size: .85rem;
outline: none;
}
.searchbarInput::placeholder {
position: relative;
top: .150rem;
font-size: 1rem;
color: var(--deepOrange-main);
}
.searchbarButton {
position: relative;
border: none;
color: #fff;
outline: none;
cursor: pointer;
text-transform: uppercase;
}
.searchbarButtonContainer {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
transition: all 0.5s ease;
outline: 2px solid deepskyblue;
}
#searchbarButtonContainer {
margin-top: .35rem;
margin-right: .2rem;
margin-bottom: .2rem;
cursor: pointer;
border: none;
border-radius: 4px;
background-color: transparent;
}
.searchbarGoButtonImg {
width: 40px;
height: auto;
}
.searchLinks {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-top: 1rem;
font-size: 1.125rem;
& a {
font-family: "Poppins", Verdana, sans-serif;
}
}
.searchLinks ul {
display: flex;
width: 326px;
text-decoration: underline;
list-style-type: none;
font-size: 14px;
justify-content: center;
gap: 1rem;
margin-top: .25rem;
}
@media screen and (min-width: 768px) {
.searchLinks ul {
padding-inline: 4rem;
width: 768px;
justify-content: space-between;
}
}
.searchIcon {
padding-left: 1rem;
}
.taglineSection {
position: relative;
width: 100%;
box-shadow: 0 10px 12px rgba(0, 0, 0, 0.1);
}
@media screen and (min-width: 768px) {
.taglineSection {
height: auto;
}
}
.taglineContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 326px;
margin: 0 auto;
padding: 2.5rem 0;
}
@media screen and (min-width: 768px) {
.taglineContainer {
width: 768px;
margin: 0 auto;
padding: 4rem 0;
}
}
.taglineContainer h2 {
font-family: 'Poppins', Verdana, sans-serif;
font-size: 30px;
font-weight: 600;
line-height: .9;
text-align: center;
color: #244C4F;
transition: all 0.25s ease;
}
@media screen and (min-width: 768px) {
.taglineContainer h2 {
font-size: 50px;
/*white-space: nowrap !important;*/
}
}
.taglineContainer h2::first-letter {
text-transform: capitalize;
}
.taglineContainer span {
font-family: 'Poppins', Verdana, sans-serif;
font-size: 18px;
font-weight: 300;
text-transform: lowercase;
color: #244C4F;
opacity: 0.6;
font-style: italic;
}
@media screen and (min-width: 768px) {
.taglineContainer span {
font-size: 32px;
}
}
.sayingWrapper {
/* position: absolute;
top: 0;
width: 95%; */
align-items: center;
gap: 1rem;
margin-bottom: 3rem;
z-index: 2;
transition: all 0.5s ease;
}
/* @media screen and (min-width: 768px) {
.sayingWrapper {
width: 70%;
}
} */
.sayingContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 2.5rem 0;
}
@media screen and (min-width: 768px) {
.sayingContainer {
/* width: 768px; */
max-width: 850px;
width: 100%;
margin: 0 auto;
padding: 4rem 0;
}
}
.sayingContainer h2 {
font-family: 'Poppins', Verdana, sans-serif;
font-size: 24px;
font-weight: 900;
text-align: center;
/* color: #244C4F; */
color: #fff;
transition: all 0.25s ease;
}
@media screen and (min-width: 768px) {
.sayingContainer h2 {
font-size: 70px;
/*white-space: nowrap !important;*/
}
}
.sayingContainer h2 .subtitle {
font-size: 16px; /* Smaller than the main text */
font-weight: 200; /* Lighter weight */
display: block; /* Makes it behave like a new line */
}
@media screen and (min-width: 768px) {
.sayingContainer h2 .subtitle {
font-size: 24px; /* Adjust for desktop */
}
}
.theTruthAboutSection {
position: relative;
background-image: url('images/truth_about_mobile_bg.webp');
background-size: cover;
background-attachment: local;
background-position: 0% 50%;
background-repeat: no-repeat;
background-color: #0F272F;
height: auto;
color: #fff;
padding: 2rem 0;
text-align: center;
}
@media screen and (min-width: 768px) {
.theTruthAboutSection {
background-image: url('images/theTruthAboutBg.webp');
background-size: cover;
background-attachment: fixed;
background-position: 0% 50%;
background-repeat: no-repeat;
}
}
.theTruthAboutContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 326px;
height: auto;
margin: 0 auto;
padding: 0rem 0;
}
@media screen and (min-width: 768px) {
.theTruthAboutContainer {
width: 100%;
max-width: 960px;
display: flex;
flex-direction: column;
margin-top: 2rem;
padding: 2rem 0;
}
}
.theTruthAboutDesktopWrapper {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0rem 0;
border-radius: .5rem;
z-index: 2;
}
@media screen and (min-width: 768px) {
.theTruthAboutDesktopWrapper {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 0;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
border-radius: .5rem;
z-index: 2;
}
}
.theTruthAboutSelectionsDesktop {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 768px;
gap: 1rem;
/* vanish effect but beware: this does not remove the element from the DOM */
transition: opacity 0.5s ease, visibility 0.5s;
opacity: 1;
visibility: visible;
& ul {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
width: 100%;
}
& li {
outline: 2px solid rgba(255, 255, 255, 0); /* necessary to prevent the element from shifting when hovered */
}
& li.theTruthAboutSelectionsDesktopButtons {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
background-color: rgba(71, 108, 115, .7);
padding: .25rem 8rem;
width: 186px;
height: 88px;
border-radius: .5rem;
list-style: none;
transition: all 0.3s ease;
font-size: 1.75rem;
font-weight: 400;
border-radius: .5rem;
backdrop-filter: blur(6px);
cursor: pointer;
& img:hover {
scale: initial;
background-color: transparent;
outline: none;
}
}
& .theTruthAboutSelectionsDesktopButtons:hover {
background-color: rgba(236, 113, 64, .35);
outline: 2px solid rgba(255, 255, 255, .75);
}
}
.theTruthAboutSelectionsDesktop:has(li:hover) li:not(:hover) {
opacity: .65;
}
@media screen and (max-width: 768px) {
.theTruthAboutSelectionsDesktop {
opacity: 0;
visibility: hidden;
height: 0;
overflow: hidden;
}
}
.theTruthAboutSelectionsDesktop a.selected {
color: #fff;
}
.theTruthAboutSelectionsDesktop li.selected {
background: rgba(236, 113, 64, 1);
/* font-weight: 500; */
color: rgba(255, 255, 255, 1);
outline: 2px solid rgba(255, 255, 255, 1);
}
@media screen and (min-width: 768px) {
.theTruthAboutSelectionsDesktop li.selected {
background-color: rgba(236, 113, 64, 1);
}
}
.theTruthAboutDesktopUpperRow {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
width: 100%;
height: auto;
margin: 1rem 0;
}
.theTruthAboutDesktopLowerRow{
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
width: 100%;
height: auto;
/* margin: 1rem 0; */
& ul {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
width: 100%;
}
}
.truthAboutDesktopIcons {
position: relative;
top: 10%;
display: flex;
width: 118px;
height: auto;
justify-content: center;
align-items: center;
gap: 1rem;
margin: 1rem 0;
& :hover {
background-color: transparent;
}
}
.theTruthAboutGlossary {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 768px;
gap: 1rem;
/* vanish effect but beware: this does not remove the element from the DOM */
transition: opacity 0.5s ease, visibility 0.5s;
opacity: 1;
visibility: visible;
margin: 4rem 0;
& ul {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
& li {
outline: 2px solid rgba(255, 255, 255, 0); /* necessary to prevent the element from shifting when hovered */
}
& li.theTruthAboutGlossaryButtons {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
background-color: rgba(236, 113, 64, .35);
padding: .25rem 8rem;
width: 186px;
height: 88px;
border-radius: .5rem;
list-style: none;
transition: all 0.3s ease;
font-size: 1.75rem;
font-weight: 400;
border-radius: .5rem;
backdrop-filter: blur(6px);
cursor: pointer;
& img:hover {
scale: initial;
background-color: transparent;
outline: none;
}
}
& .theTruthAboutGlossaryButtons:hover {
background-color: rgba(236, 113, 64, .75);
outline: 2px solid rgba(255, 255, 255, .75);
}
}
@media screen and (max-width: 768px) {
.theTruthAboutGlossary{
width: auto;
margin: 0;
}
.theTruthAboutGlossary {
& li.theTruthAboutGlossaryButtons {
font-family: 'Poppins', Verdana, sans-serif;
font-size: 22px;
font-weight: 200;
width: 100%;
border-radius: .5rem;
padding: 0 2rem;
cursor: pointer;
}
}
}
.GodIcon {
margin-bottom: 4rem;
}
.reduceLargeIcons {
position: relative;
top: 0;
width: 115px;
height: auto;
}
.reduceLargeIconsXL {
position: relative;
top: 0;
width: 88px;
height: auto;
}
.theTruthAboutMobileWrapper {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem;
width: 100%;
border: 2.5px solid rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
z-index: 2;
/* Fade in transition */
transition: opacity 0.5s ease, visibility 0.5s;
opacity: 1;
visibility: visible;
}
@media screen and (min-width: 768px) {
.theTruthAboutMobileWrapper {
opacity: 0;
visibility: hidden;
height: 0;
overflow: hidden;
}
}
.truthAboutIcons {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin: 1rem 0;
width: 30px;
height: auto;
}
@media screen and (min-width: 768px) {
.truthAboutIcons {
/* display: none; */
width: 40px;
}
}
.theTruthAboutHeading {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
top: -2.5rem;
gap: 1rem;
width: fit-content;
padding-inline: 1rem;
background: transparent;
z-index: 4;
}
.theTruthAboutHeading::before {
content: "";
position: absolute;
top: 0;
left: -0.5rem;
right: -0.5rem;
height: 100%;
bottom: 0;
z-index: -1;
border-radius: 0.5rem;
}
.theTruthAboutHeading h2 {
font-family: 'Poppins', Verdana, sans-serif;
font-size: 16px;
font-style: italic;
font-weight: 400;
line-height: .9;
color: #fff;
}
.theTruthAboutSelectionsMobile {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
width: 100%;
gap: 1rem;
}
.theTruthAboutSelectionsMobile ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
width: 100%;
gap: 1rem;
}
.theTruthAboutSelectionsMobile li {
font-family: 'Poppins', Verdana, sans-serif;
font-size: 22px;
font-weight: 300;
line-height: 1.6;
list-style-type: none;
text-align: left;
color: rgba(255, 255, 255, 0.7);
width: 100%;
border-radius: .5rem;
padding: 0 2rem;
transition-property: opacity, font-weight;
transition-duration: 0.3s;
cursor: pointer;
}
.theTruthAboutSelectionsMobile li:hover {
background: rgba(236, 113, 64, .6);
font-weight: 400;
}
@media screen and (min-width: 768px) {
.theTruthAboutSelectionsMobile li:hover {
width: 386px;
}
}
.theTruthAboutSelectionsMobile li.selected {
background: rgba(236, 113, 64, 1);
font-weight: 500;
color: rgba(255, 255, 255, 1);
}
@media screen and (min-width: 768px) {
.theTruthAboutSelectionsMobile li.selected {
width: 386px;
}
}
.theTruthAboutSelectionsMobile:has(li:hover) li:not(:hover) {
opacity: .65
}
.theTruthAboutCategoriesContainer {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 326px;
height: auto;
margin: 3.5rem auto;
border-radius: 0.5rem;
z-index: 1;
backdrop-filter: blur(3px);
}
@media screen and (min-width: 768px) {
.theTruthAboutCategoriesContainer {
/* margin: 6rem auto; */
width: 686px;
height: 300px;
padding-inline: 3rem;
margin: 0rem auto;
}
}
.theTruthAboutCategoriesContainer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(24, 27, 23, .45);
border-radius: 0.5rem;
/* z-index: -1; */
}
.theTruthAboutCategoriesHeader {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: auto;
row-gap: 1.5rem;
width: 100%;
height: 124px;
border-radius: 0.5rem 0.5rem 0 0;
background: rgba(24, 27, 23, .8);
transition: all 0.3s ease;
}
@media screen and (min-width: 768px) {
.theTruthAboutCategoriesHeader {
position: absolute;
row-gap: 0rem;
height: 124px;
top: 0px;
left: 0;
right: 0;
}
}
.theTruthAboutCategoriesHeader img {
position: relative;
top: 2rem;
width: 50px;
height: auto;
scale: 1.5;
}
@media screen and (min-width: 768px) {
.theTruthAboutCategoriesHeader img {
position: relative;
top: 1rem;
width: 50px;
height: auto;
scale: 1.5;
}
}
.theTruthAboutCategoriesHeading {
position: relative;
top: -1rem;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
width: 100%;
padding: 1rem 0;
border-radius: 0.5rem 0.5rem 0 0;
font-size: 1rem;
font-weight: 300;
}
@media screen and (min-width: 768px) {
.theTruthAboutCategoriesHeading {
top: 0rem;
}
}
.theTruthAboutCategoriesWrapper {
position: relative;
width: 100%;
height: auto;
}
@media screen and (min-width: 768px) {
.theTruthAboutCategoriesWrapper {
top: 0.75rem;
}
}
.theTruthAboutCategoriesWrapper ul {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
height: auto;
margin: 0 auto;
padding: 1.25rem 1.25rem 1.25rem 1.25rem;
list-style-type: none;
}
@media screen and (min-width: 768px) {
.theTruthAboutCategoriesWrapper ul {
margin-top: 4rem;
}
}
.theTruthAboutCategoriesWrapper li {
/* gap: 1rem; */
display: flex;
align-items: center;
padding: .125rem;
margin: 0.125rem;
font-size: .825rem;
text-transform: capitalize;
margin-inline: 0.5rem;
border-radius: 0.5rem;
transition: opacity 0.3s ease;
}
@media screen and (min-width: 768px) {
.theTruthAboutCategoriesWrapper li {
font-size: 16px;
}
}
.theTruthAboutCategoriesWrapper a {
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 0.5rem;
padding: 0.125rem .5rem;
}
.theTruthAboutCategoriesWrapper a:hover {
background: rgba(236, 113, 64, .65);
}
.theTruthAboutCategoriesWrapper:has(li:hover) li:not(:hover) {
opacity: .65
}
.theTruthAboutSelections a.selected {
background: rgba(236, 113, 64, 1);
font-weight: 500;
color: rgba(255, 255, 255, 1);
}
.recentArticlesSection {
box-sizing: border-box;
position: relative;
background-color: #fff;
width: 100%;
height: auto;
padding: 2rem;
}
.recentArticlesContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 326px;
height: auto;
margin: 0 auto;
padding: 0rem 0;
}
@media screen and (min-width: 768px) {
.recentArticlesContainer {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
}
.recentArticlesHeader {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 1rem 0;
gap: 1rem;
& h2 {
font-family: 'Poppins', Verdana, sans-serif;
font-weight: 500;
white-space: nowrap;
font-size: var(--heading-2-desktop);
color: #9AB0B2;
text-transform: capitalize;
}
& span {
text-transform: capitalize;
color: #244C4F;
}
& a {
font-size: .9rem;
font-weight: 600;
color: #EC7140;
text-transform: capitalize;
text-decoration: underline;
white-space: nowrap;
}
}
@media screen and (min-width: 768px) {
.recentArticlesHeader h2 {
font-size: var(--heading-2-desktop);
}
}
.recentArticlesBorderTop {
position: relative;
top: .5rem;
display: flex;
justify-content: baseline;
align-items: center;
width: 100%;
padding-inline: 1rem;
height: 2px;
border-radius: .5rem;
background-color: #9AB0B2;
opacity: .3;
}
.recentArticlesContentWrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
margin: 1rem auto;
padding: 1rem;
border: 2px solid rgba(198, 209, 209, .5);
border-radius: .5rem;
background-color: rgba(198, 209, 209, .3);
}
@media screen and (min-width: 768px) {
.recentArticlesContentWrapper {
width: 100%;
max-width: 960px;
padding: 1rem 2.5rem;
}
}
.articleContentInnerWrapper {
padding: 1rem 0;
border-bottom: 2px solid rgba(198, 209, 209, 1);
max-width: 326px;
}
.articleContentInnerWrapper:last-child {
border-bottom: none; /* remove border from last child */
}
@media screen and (min-width: 768px) {
.articleContentInnerWrapper {
width: 100%;
max-width: 960px;
padding: 1.5rem 0;
}
}
.articleLinkWrapper {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
/* margin: 0 auto; */
transition: all 0.3s ease;
& :hover {
opacity: 0.8;
}
}
@media screen and (min-width: 768px) {
.articleLinkWrapper {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
}
.recentArticle {
width: auto;
height: auto;
margin: 0 auto;
& p {
font-size: .8rem;
color: #416663;
text-align: start;
}
&:last-child {
margin-bottom: 0;
}
}
@media screen and (min-width: 768px) {
.recentArticle {
width: 100%;
padding-left: 2rem;
}
}
/*
.recentArticleImage {
width: 100%;
height: 150px;
margin: 1rem auto;
background-color: rgba(198, 209, 209, 1);
border-radius: 0.5rem;
}
@media screen and (min-width: 768px) {
.recentArticleImage {
width: 100%;
max-width: 325px;
height: 200px;
max-height: 250px;
margin: 1rem auto;
background-color: rgba(198, 209, 209, 1);
border-radius: 0.5rem;
}
}
*/
.recentArticleImage {
display: flex;
height: 150px;
overflow: hidden;
border-radius: 0.5rem;
margin: 1rem auto;
& :hover {
transform: scale(1.05);
}
}
@media screen and (min-width: 768px) {
.recentArticleImage {
width: 100%;
max-width: 325px;
height: 200px;
max-height: 250px;
}
}
.recentArticleImage img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: all 0.3s ease;
}
.recentArticleTitle {
display: flex;
justify-content: start;
align-items: center;
gap: 1rem;
width: auto;
height: auto;
margin: 1rem auto;
padding: 0;
& h3 {
font-size: 1.35rem;
font-weight: 600;
text-align: left;
color: #EC7140;
line-height: 1.2;
}
}
@media screen and (min-width: 768px) {
.recentArticleTitle {
display: flex;
justify-content: start;
align-items: start;
gap: 1rem;
width: auto;
height: auto;
margin: 1rem auto;
padding: 0;
}
}
.recentArticleDescription {
display: flex;
justify-content: start;
align-items: center;
width: auto;
height: auto;
margin: 0;
padding: 0;
& p {
font-weight: 300;
font-size: var(--body-md-text);
line-height: 1.2;
color: #416663;
text-align: start;
}
}
.recentArticlesBorderBottom {
margin-top: 1rem;
width: 100%;
border-bottom: 2px solid rgba(198, 209, 209, 1);
}
.useCompellingTruthSection {
position: relative;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
background: url('images/compelling_truth_bg_mobile.webp') no-repeat center center/cover;
padding: 2rem 0;
}
@media screen and (min-width: 768px) {
.useCompellingTruthSection {
background: url('images/compelling_truth_bg_desktop.png') no-repeat center center/cover;
}
}
.useCompellingTruthBgWrapper{
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
height: auto;
z-index: 1;
& img {
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover;
object-position: 100% 0;
}
}
.useCompellingTruthContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 326px;
height: auto;
margin: 0 auto;
padding: 0rem 0;
gap: 2rem;
& h2 {
font-size: var(--heading-2-desktop);
font-weight: 400;
color: #244C4F;
text-transform: capitalize;
}
}
@media screen and (min-width: 768px) {
.useCompellingTruthContainer {
width: 960px;
max-width: 100%;
margin: 0 auto;
}
}
.useCompellingTruthCardsWrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
}
@media screen and (min-width: 768px) {
.useCompellingTruthCardsWrapper {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 4rem;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
}
}
.useCompellingTruthCard {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 226px;
height: auto;
max-height: 180px;
margin: 2rem auto;
padding: 0;
z-index: 4;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 10px 12px rgba(0, 0, 0, 0.1);
transform: scale(1.25);
& h2 {
font-size: 1.25rem;
font-weight: 300;
width: 100%;
text-align: left;
color: #fff;
}
& span {
font-size: 1.25rem;
font-weight: 500;
width: 100%;
text-align: left;
color: #fff;
text-transform: capitalize;
}
&:hover {
outline: 2px solid rgba(255, 255, 255, .75);
box-shadow: 0 10px 12px rgba(0, 0, 0, 0.2);
}
}
@media screen and (min-width: 768px) {
.useCompellingTruthCard {
width: 226px;
height: auto;
max-height: 155px;
margin: 2rem auto;
padding: 0;
z-index: 4;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 10px 12px rgba(0, 0, 0, 0.1);
transform: scale(1.05);
}
}
@media screen and (min-width: 768px) {
.useCompellingTruthCard {
width: 326px;
height: 335px;
max-height: none;
}
}
.useCompellingTruthCardImage {
position: relative;
width: 100%;
margin: 0 auto;
border-radius: 0.5rem;
z-index: 11;
overflow: hidden;
& img {
width: 100%;
height: 100%;
max-height: 180px;
object-fit: cover;
border-radius: 0.5rem;
transform: scale(1);
transition: all 0.3s ease;
}
&:hover img {
transform: scale(1.05);
}
}
@media screen and (min-width: 768px) {
.useCompellingTruthCardImage {
width: 326px;
margin: 0 auto;
border-radius: 0.5rem;
z-index: 11;
/* overflow: hidden; */
& img {
height: 335px;
max-height: none;
}
}
}
/* nth-child selector used here to alternate backgrounds of the cards (orange and green) */
.useCompellingTruthCard:nth-child(even) .useCompellingTruthCardImage::before {
content: '';
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(236, 113, 64, 0) 0%, rgba(236, 113, 64, .9) 100%);
z-index: 1;
border-radius: 0.5rem;
}
.useCompellingTruthCard:nth-child(odd) .useCompellingTruthCardImage::before {
content: '';
position: absolute;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(15, 39, 47, 0) 0%, rgba(15, 39, 47, .9) 100%);
z-index: 1;
border-radius: 0.5rem;
}
.useCompellingTruthCardTitle {
position: absolute;
bottom: 10%;
left: 10%;
z-index: 10;
color: #fff;
}
.mailingListSection {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fff;
width: 100%;
height: auto;
min-height: 296px;
/* padding: 2rem; */
margin: 0 auto;
text-align: center;
}
.mailingListContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* gap: 1rem; */
width: 326px;
height: auto;
margin: 0 auto;
padding: 0rem;
}
@media screen and (min-width: 768px) {
.mailingListContainer {
width: 768px;
margin: 0 auto;
}
}
.mailingListTextWrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: auto;
margin: 0 auto;
/* padding-block: 2rem; */
margin-bottom: 2rem;
gap: 1rem;
& h2 {
font-size: var(--heading-2-desktop);
font-weight: 400;
color: #244C4F;
text-transform: capitalize;
}
& h3 {
font-size: var(--body-md-text);
font-weight: 300;
color: rgba(64, 102, 99, .4);
text-transform: capitalize;
font-style: italic;
}
}
.mailingListInputWrapper {
margin: 0 auto;
}
.mailingListInputWrapper form {
display: flex;
justify-content: space-between;
align-items: center;
gap: .25rem;
width: 100%;
max-width: 428px;
height: auto;
margin: 0 auto;
padding: 0rem 0;
& button {
background-color:rgba(236, 113, 64, 1);
color: #fff;
border: none;
border-radius: 0.55rem;
padding: 0.625rem 1rem;
font-size: 1rem;
font-weight: 600;
outline: none;
cursor: pointer;
text-transform: capitalize;
}
}
@media screen and (min-width: 768px) {
.mailingListInputWrapper form {
gap: 1rem;
width: 428px;
}
}
.mailingListInput {
display: flex;
justify-content: center;
align-items: center;
/* gap: 1rem; */
padding: 0.625rem;
width: 100%;
max-width: 300px;
border: 2px solid rgba(66, 103, 100, .3);
margin: 0 auto;
background-color: rgba(66, 103, 100, .1);
border-radius: 0.5rem;
transition: all 0.3s ease;
outline: none;
}
@media screen and (min-width: 768px) {
.mailingListInput {
width: 468px;
max-width: 326px;
}
}
.supportOurWorkSection {
position: relative;
background: linear-gradient(to right, rgba(36, 76, 79, .25), rgba(36, 76, 79, 0));
width: 100%;
height: auto;
padding: 2rem;
margin: 0 auto;
text-align: center;
z-index: 1;
}
.supportOurWorkContainer {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 1rem;
width: 326px;
height: auto;
margin: 0 auto;
padding: 2rem 0rem;
}
@media screen and (min-width: 768px) {
.supportOurWorkContainer {
width: 100%;
max-width: 960px;
margin: 0 auto;
flex-direction: row;
}
}
.supportOurWorkTextWrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: auto;
margin: 0 auto;
/* padding-block: 2rem; */
margin-bottom: 2rem;
gap: 1rem;
& h2 {
font-size: var(--heading-2-desktop);
font-weight: 300;
color: #244C4F;
text-transform: capitalize;
}
& h3 {
font-size: 1.25rem;
font-weight: 300;
color: rgba(64, 102, 99, .4);
text-transform: capitalize;
font-style: italic;
}
& p {
font-weight: 300;
color: #416663;
text-align: left;
}
}
@media screen and (min-width: 768px) {
.supportOurWorkTextWrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
text-align: left;
width: 300px;
height: auto;
margin: 0 auto;
padding: 2rem 0;
gap: 1rem;
}
}
.supportOurWorkContentWrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem 4rem;
width: auto;
height: auto;
margin: 0 auto;
padding: 2rem 0;
border-radius: .5rem;
flex-flow: row wrap;
& img {
width: 100%;
height: auto;
max-height: 180px;
object-fit: cover;
border-radius: 0.5rem;
transform: scale(1);
transition: all 0.3s ease;
}
& h3 {
font-size: var(--body-md-text);
font-weight: 300;
}
}
.supportOurWorkPieChartsWrapper {
display: flex;
flex-flow: column wrap;
& h3 {
font-size: var(--body-md-text);
font-weight: 300;
}
}
.supportOurWorkPieChart1OuterWrapper {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
width: auto;
height: auto;
margin: 0 auto;
padding: 0;
& h3 {
font-size: var(--body-md-text);
font-weight: 300;
}
}
.supportOurWorkPieChartInnerWrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: auto;
padding: 1rem;
& h3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: var(--body-md-text);
font-weight: 300;
}
}
.supportOurWorkPieChart2OuterWrapper {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
width: auto;
height: auto;
margin: 0 auto;
padding: 0;
& h3 {
font-size: var(--body-md-text);
font-weight: 300;
}
}
.supportOurWorkPieChart2 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: auto;
& h3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: var(--body-md-text);
font-weight: 300;
}
}
header-element {
min-height: 122px;
}
.breadcrumbSection {
position: relative;
display: flex;
justify-content: start;
align-items: center;
background-color: #fff;
width: 100%;
min-width: 326px;
/* height: 68px;
padding: 2rem 1rem 1rem; */
padding: 0 1rem;
margin: 0rem auto;
text-align: center;
overflow: hidden;
z-index: 9998;
}
.breadcrumbContainer {
display: flex;
justify-content: start;
align-items: center;
gap: 1rem;
width: 100%;
height: auto;
margin: 0 auto;
/* padding: 2rem 0; */
}
@media screen and (min-width: 768px) {
breadcrumb-element {
min-height: 57px;
}
header-element {
min-height: 78px;
}
.breadcrumbSection {
/*padding-top: 2rem;*/
min-height: 57px;
}
.breadcrumbContainer {
min-width: 960px;
/* max-width: 960px; */
/* margin: 0 auto; */
}
}
.breadcrumbWrapper {
display: flex;
justify-content: start;
align-items: center;
gap: 1rem;
width: 100%;
height: auto;
text-align: left;
/* margin: 2rem; */
/* padding: 0rem 2rem; */
}
@media screen and (min-width: 768px) {
.breadcrumbWrapper {
gap: 1rem;
margin: 0 2rem;
padding: 0rem 2rem;
}
}
.breadcrumbIcon {
position: relative;
display: flex;
justify-content: start;
align-items: center;
width: 25px;
height: auto;
margin: 0 auto;
padding: 0;
z-index: 9999;
}
.breadcrumbHomeIcon {
width: 25px;
height: 25px;
}
.breadcrumbList {
/* display: flex;
justify-content: start;
align-items: center;
flex-direction: row;
flex-flow: row wrap; */
width: 100%;
list-style: none;
padding: 1rem 0;
margin: 0;
color: #000;
overflow: auto;
white-space: nowrap;
}
.breadcrumbList li, .breadcrumbList span {
text-decoration: underline;
text-underline-offset: .25rem;
line-height: 1.6rem;
margin-right: 0.5rem;
color: #EC7140;
}
.breadcrumbList li:last-child, .breadcrumbList span:last-child {
text-decoration: none;
opacity: .5;
}
.breadcrumbList li a, .breadcrumbList span a {
color: #EC7140;
}
.breadcrumbList li a:last-child, .breadcrumbList span a:last-child {
color: #EC7140;
}
.breadcrumbList li a:hover, .breadcrumbList span a:hover {
text-decoration: underline;
}
.breadcrumbList .breadcrumbSeperator {
/* display: flex;
justify-content: center;
align-items: center; */
margin-right: 0.5rem;
opacity: 1;
text-decoration: none;
}
.breadcrumbSeperatorIcon {
position: relative;
width: 7px;
height: 10px;
padding: 0;
}
.articleMainContentSection {
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: start;
align-items: center;
background-color: #fff;
width: 100%;
height: auto;
padding: 2rem;
margin: 0 auto;
text-align: start;
z-index: 1;
}
.articleMainContentSection:has(.recentGuidesContentWrapper) {
background-color: #f4f4f4;
}
.articleMainContentSection::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(36, 76, 79, .25) 0%, rgba(36, 76, 79, 0) 20%);
z-index: -1;
}
.articleMainContentContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
width: 100%;
max-width: 1440px;
height: auto;
margin: 0 auto;
padding: 2rem 0;
/* outline: 2px solid deepskyblue; */
overflow-wrap: break-word;
word-wrap: break-word;
}
.articleMainContentWrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
& h1.articleTitle {
width: 100%;
font-size: 2.25rem;
font-weight: 700;
color: #244C4F;
text-align: left;
margin-bottom: 2.5rem;
}
& a {
color: var(--deepGreen-main);
}
}
.articleParagraphText {
font-size: .4rem;
}
@media screen and (min-width: 768px) {
.articleMainContentWrapper {
& h1.articleTitle {
width: 100%;
font-size: 2.5rem;
}
}
}
.articleButtonWrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0rem 0;
& .articleButton {
display: flex;
justify-content: space-between;
align-items: center;
gap: .5rem;
background-color: transparent;
color: rgba(36, 76, 79, .8);
border: 1.75px solid rgba(36, 76, 79, .5);
border-radius: 0.55rem;
padding: 0.25rem 1rem;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
text-transform: uppercase;
min-height: 35px;
}
& button.articleShareButton {
display: flex;
justify-content: space-between;
align-items: center;
gap: .5rem;
background-color: transparent;
color: rgba(236, 113, 64, 1);
border: 1.75px solid rgba(236, 113, 64, 1);
border-radius: 0.55rem;
padding: 0.25rem 1rem;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
text-transform: uppercase;
font-family: 'Poppins', Verdana, sans-serif;
}
& .articleButtonIcon {
width: 17px;
height: auto;
}
}
.articleFeaturedImgWrapper{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1000px;
height: auto;
margin: 0 auto;
margin-bottom: 2rem;
padding: 0;
border-radius: 1rem;
overflow: hidden;
outline: 2.5px solid rgba(36, 76, 79, .25);
&:hover img {
transform: scale(1.05);
}
}
@media screen and (min-width: 768px) {
.articleFeaturedImgWrapper {
max-width: 1000px;
}
}
.articleFeaturedImg {
width: 100%;
max-width: 1726px;
height: auto;
border-radius: 0.5rem;
transition: all .3s ease;
aspect-ratio: 20 / 10.5;
}
@media screen and (min-width: 768px) {
.articleFeaturedImg {
width: 100%;
max-width: 1726px;
height: auto;
}
}
.articleTLDRWrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
gap: 1rem;
width: 100%;
height: auto;
margin: 0 auto;
padding: 2rem;
background-color: rgba(236, 113, 64, .65);
border-radius: .5rem;
& h2 {
font-size: 1.25rem;
font-weight: 600;
color: #244C4F;
text-align: left;
}
& p {
font-size: 1rem;
font-weight: 300;
color: #416663;
text-align: left;
font-style: italic;
}
& .subscribeTitle {
text-align: center;
}
}
@media screen and (min-width: 768px) {
.articleTLDRWrapper {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 2rem 4rem;
gap: 2rem;
& h2 {
font-size: 1.65rem;
}
& p {
font-size: 1.25rem;
margin-bottom: 0;
}
}
}
.glossaryLettersWrapper {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
align-items: start;
gap: 1rem;
width: 100%;
height: auto;
margin: 0 auto;
padding: 2rem;
background-color: #0F272F;
border-radius: .5rem;
& a.glossaryLettersAnchorLink {
font-size: 1rem;
font-weight: 400;
color: #fff;
text-align: center;
text-decoration: none;
}
}
@media screen and (min-width: 768px) {
.glossaryLettersWrapper {
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
padding: 1rem;
}
}
.glossaryBodyWrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: start;
gap: 1rem;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
& h3 {
font-size: 1.75rem;
font-weight: 700;
color: #244C4F;
text-align: left;
text-transform: uppercase;
}
& ul {
list-style: none;
}
& li {
font-size: 1rem;
font-weight: 300;
color: #416663;
text-align: left;
}
& .glossaryLetterSection {
flex: 1 1 calc(50% - 20px);
}
}
@media screen and (min-width: 768px) {
.glossaryBodyWrapper {
& .glossaryLetterSection {
flex: 1 1 calc(33.333% - 20px);
}
& p {
font-size: 1.25rem;
}
& li {
font-size: 1.25rem;
}
& a {
font-size: 1.25rem;
}
}
}
.glossaryLetterSectionTerms {
position: relative;
}
.glossaryLetterSectionTerms .glossaryTermTldr {
display: none;
position: absolute;
background-color: #fff;
padding: .5em;
min-width: 10rem;
border: #244C4F solid 1px;
z-index: 9999;
& a {
color: #EC7140;
font-size: 1rem;
}
& .glossaryTermTldrFooter {
text-align: end;
}
}
.glossaryLetterSectionTerms .glossaryTermTldr.visible {
display: block;
}
.glossaryTerm:hover {
text-decoration: underline;
cursor: pointer;
}
.glossaryTerm.active {
color: #EC7140;
}
/* .glossaryLetterSectionTerms li:hover .glossaryTermTldr {
display: block;
}
*/
.articleBodyWrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
gap: 1rem;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
font-size: 1rem;
font-weight: 300;
color: #416663;
text-align: left;
& h2 {
font-size: 1.25rem;
font-weight: 600;
color: #244C4F;
text-align: left;
/*text-transform: uppercase;*/
}
& p {
font-size: 1rem;
font-weight: 300;
color: #416663;
text-align: left;
& p.bullet{
margin-left: 1rem;
}
}
p.bullet::before {
content: '•';
font-size: 1.5rem;
display: inline-block;
margin-right: 1rem;
color: #416663;
}
& blockquote {
font-size: 1rem;
font-weight: 300;
color: #416663;
text-align: left;
font-style: italic;
border-left: 2px solid #EC7140;
padding: 0.5rem 1rem;
margin: 1rem 0;
}
& ul {
list-style-type: disc;
padding-inline-start: 1rem;
}
& ol {
list-style-type: decimal;
padding-inline-start: 1rem;
}
& li {
font-size: 1rem;
font-weight: 300;
color: #416663;
text-align: left;
}
& a {
font-size: 1rem;
font-weight: 300;
color: #EC7140;
text-decoration: underline;
}
& .articleHeadingAnchorLinks {
font-size: 1.25rem;
font-weight: 700;
color: #244C4F;
text-align: left;
text-transform: uppercase;
color: var(--deepGreen-main);
text-decoration: none;
}
& a:hover {
color: #EC7140;
text-decoration: underline;
}
& h3 {
font-size: 1.25rem;
font-weight: 700;
color: #244C4F;
text-align: left;
text-transform: uppercase;
}
& h4 {
font-size: 1.25rem;
font-weight: 600;
color: #244C4F;
text-align: left;
}
& h5 {
font-size: 1
}
}
.articleBodyWrapper > div {
margin-bottom: 1rem;
}
@media screen and (min-width: 768px) {
.articleBodyWrapper {
font-size: 1.25rem;
& p {
font-size: 1.25rem;
}
& li {
font-size: 1.25rem;
}
& a {
font-size: 1.25rem;
}
}
}
.articleRecapSection {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
width: 100%;
height: auto;
padding: 2rem;
margin: 0 auto;
text-align: left;
overflow: hidden;
z-index: 1;
background-image: url("images/article_recap_bg.webp");
background-position: top left 35%;
background-size: 250%;
background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
.articleRecapSection {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
}
.articleRecapSection::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
filter: grayscale(100%);
z-index: -1;
}
@media screen and (min-width: 768px) {
.articleRecapSection {
min-height: 700px;
font-size: 1rem;
font-weight: 300;
color: #fff;
text-align: left;
}
}
@media screen and (min-width: 768px) {
.articleRecapSectionBgImg {
top: -40%;
left: -20%;
right: 0;
bottom: 0;
width: 150%;
height: auto;
object-fit: cover;
z-index: 1;
}
}
.articleRecapSection::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #093f42;
opacity: 1;
z-index: -2;
}
.articleRecapContainer {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
gap: 1rem;
width: 100%;
max-width: 1440px;
height: auto;
margin: 0 auto;
padding: 2rem 0rem;
z-index: 4;
& h2 {
font-size: 1.25rem;
font-weight: 600;
color: #fff;
text-align: left;
}
& h3 {
font-size: 1.25rem;
font-weight: 600;
color: #fff;
text-align: left;
text-transform: uppercase;
}
& p {
padding-left: 1.25rem;
font-size: 1rem;
font-weight: 300;
color: #fff;
text-align: left;
font-style: italic;
}
& img {
width: 50px;
height: auto;
object-fit: cover;
object-position: 50% 50%;
border-radius: 0.5rem;
transform: scale(1);
transition: all 0.3s ease;
}
}
.articleRecapKeyPointWrapper {
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
gap: 1rem;
width: 100%;
height: auto;
margin: 0 auto;
margin-bottom: 4rem;
padding: 0;
text-align: left;
}
.articleRecapKeyPointWrapper:last-child {
margin-bottom: 0;
}
@media screen and (min-width: 768px) {
.articleRecapKeyPointWrapper {
display: flex;
flex-direction: row;
justify-content: start;
align-items: start;
gap: 2rem;
width: 100%;
margin: 0 auto;
padding: 0;
}
}
.articleRecapKeyPointIconWrapper {
display: flex;
justify-content: start;
align-items: start;
gap: 1rem;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
& img {
width: 50px;
height: auto;
margin-bottom: .5rem;
object-fit: cover;
object-position: 50% 50%;
border-radius: 0.5rem;
transform: scale(1);
transition: all 0.3s ease;
}
}
@media screen and (min-width: 768px) {
.articleRecapKeyPointIconWrapper {
display: flex;
justify-content: start;
align-items: start;
gap: 1rem;
width: 100px;
height: auto;
margin: 0 auto;
padding: 0;
}
}
.articleRecapKeyPointText {
width: 100%;
transition: all 0.5s ease;
& ul {
list-style-type: disc;
padding-inline-start: 1rem;
}
& li {
font-weight: 300;
font-size: 1rem;
line-height: 1.85rem;
}
& a {
text-decoration: none;
transition: all 0.5s ease;
}
& a:hover {
text-decoration: underline ;
}
}
@media screen and (min-width: 768px) {
.articleRecapKeyPointText {
& li {
font-size: 1.25rem;
}
}
}
.articleMoreResourcesSection {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fff;
width: 100%;
height: auto;
padding: 2rem;
margin: 0 auto;
text-align: center;
overflow: hidden;
z-index: 97;
}
.articleMoreResourcesContainer {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1440px;
gap: 1rem;
height: auto;
margin: 0 auto;
padding: 2rem 0rem;
& h2 {
font-size: var(--heading-2-desktop);
font-weight: 500;
color: #244C4F;
text-transform: uppercase;
margin-bottom: 2rem;
}
& a {
color: #244C4F;
}
}
.articleMoreResourcesWrapper {
display: flex;
flex-direction: column;
position: relative;
justify-content: center;
align-items: center;
width: 100%;
gap: 1rem;
margin: 0 auto;
padding: 0;
}
@media screen and (min-width: 768px) {
.articleMoreResourcesWrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin: 0 auto;
padding: 0;
}
}
.articleMoreResourcesImgWrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
gap: 1rem;
z-index: 5;
overflow: hidden;
aspect-ratio: 1 / 0.546;
}
.articleMoreResourcesImg {
object-fit: cover;
width: 100%;
max-width: 500px;
height: auto;
max-height: 192px;
border-radius: 1rem;
aspect-ratio: 21 / 11;
}
.articleAdsSection {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(153, 178, 181, .5);
width: 100%;
height: auto;
padding: 2rem;
margin: 0 auto;
text-align: center;
overflow: hidden;
z-index: 100;
}
.articleAdsContainer {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1440px;
height: 600px;
gap: 1rem;
margin: 4rem auto;
padding: 2rem 0rem;
background-color: rgba(153, 178, 181, 1);
& h2 {
font-size: 1.65rem;
font-weight: 300;
color: #244C4F;
text-transform: uppercase;
}
}
@media screen and (min-width: 768px){
.articleAdsContainer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 2rem;
width: 600px;
max-width: 960px;
height: auto;
margin: 4rem auto;
padding: 2rem 0rem;
}
}
.articleAdsContentWrapper {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
margin: 0 auto;
padding: 0;
& h2 {
color: #fff
}
}
.recentGuidesSection {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
background: url('images/recent_guides_bg.webp') no-repeat center center/cover;
/* background-position-y: -400px; */
width: 100%;
height: auto;
padding: 2rem;
text-align: center;
overflow: hidden;
z-index: 0;
}
@media screen and (min-width: 768px) {
.recentGuidesSection {
background-image: url('images/recent_guides_bg.webp');
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
}
}
.recentGuidesContainer {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 326px;
height: auto;
margin: 0 auto;
padding: 0rem 0;
}
@media screen and (min-width: 768px) {
.recentGuidesContainer {
width: 960px;
margin: 0 auto;
max-width: 100%;
}
}
.recentGuidesHeader {
position: relative;
z-index: 4;
display: flex;
justify-content: space-between;
align-items: center;
margin: 2.5rem 0;
width: 100%;
color: #244C4F;
gap: 1rem;
& h2 {
font-family: 'Poppins', Verdana, sans-serif;
font-weight: 500;
white-space: nowrap;
font-size: var(--heading-2-desktop);
font-weight: 400;
/*color: #9AB0B2;*/
color: #0F272F;
text-transform: capitalize;
}
& span {
text-transform: capitalize;
color: #fff;
}
& a {
font-size: 1rem;
color: #EC7140;
text-transform: capitalize;
text-decoration: underline;
white-space: nowrap;
}
}
.recentGuidesBorderTop {
position: relative;
top: .5rem;
display: flex;
justify-content: baseline;
align-items: center;
height: auto;
width: 100%;
padding-inline: 1rem;
height: 3.25px;
border-radius: .5rem;
/*background-color: #9AB0B2;
opacity: .3*/
background-color: #0F272F;
opacity: .5;
z-index: 4;
}
.recentGuidesContentWrapper {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1rem;
width: 100%;
height: auto;
margin: 0rem auto;
border-radius: .5rem;
z-index: 4;
/* overflow: hidden; */
}
@media screen and (min-width: 768px) {
.recentGuidesContentWrapper {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: start;
gap: 1rem;
width: 100%;
}
}
.recentGuide {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
min-width; 300px;
background-color: rgba(255, 255, 255, 1);
height: auto;
margin: 0 auto;
margin-bottom: 4rem;
padding: 0;
z-index: 4;
border-radius: 0.5rem;
overflow: hidden;
& p {
font-size: .8rem;
color: #416663;
text-align: start;
}
}
.recentGuideImageWrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 200px;
margin: auto;
background-color: rgba(198, 209, 209, 1);
z-index: 4;
}
.recentGuideImage {
position: relative;
display: block;
transform: scale(1);
height: auto;
transition: all 0.3s ease;
z-index: 4;
&:hover {
transform: scale(1.05);
}
}
.recentGuideImageMarquee {
position: absolute;
width: auto;
top: 40%;
left: 0;
z-index: 10;
color: #fff;
& h2 {
background-color: #022422;
color: #fff;
font-size: .9rem;
font-weight: 400;
padding: 0.0625rem .3rem .0625rem 1rem;
text-align: start;
text-transform: uppercase;
position: relative;
/* the little triangle at the end of the marquee */
&::after {
content: '';
position: absolute;
top: 100%;
right: 0;
width: 0;
height: 0;
scale: 242.5%;
border-left: 10px solid transparent;
border-top: 10px solid #022422;
rotate: 270deg;
transform: translate(7.475px, 7.025px);
}
}
}
.recentGuideImageMarqueeHeading {
position: absolute;
bottom: 0%;
left: 10%;
width: 220px;
background-color: transparent;
color: #fff;
font-size: .9rem;
font-weight: 600;
padding: 0.5rem 1rem;
text-align: start;
text-transform: capitalize;
z-index: 10;
& h2 {
color: #fff;
}
}
.recentGuideLinks {
display: flex;
position: relative;
justify-content: center;
align-items: center;
width: auto;
text-align: start;
margin-top: 1rem;
padding: 1rem 2rem;
z-index: 4;
& a {
position: relative;
/*font-size: .725rem;
font-size: var(--body-sm-text);*/
font-weight: 400;
font-size: 1rem;
color: #EC7140;
text-align: start;
text-decoration: underline;
}
}
.recentGuideButtons {
display: flex;
justify-content: start;
align-items: center;
column-gap: 1rem;
width: 100%;
border: none;
border-radius: 0.25rem;
padding: 0.625rem .625rem;
margin: 0 0 1rem 4.5rem;
outline: none;
text-transform: uppercase;
z-index: 4;
& .recentGuideReadButton {
padding: .35rem 1rem;
text-transform: capitalize;
border: none;
background-color: #EC7140;
outline: 1.75px solid #fff;
border-radius: .25rem;
color: #fff;
font-size: .825rem;
font-weight: 600;
cursor: pointer;
transform: scale(1.05);
transition: all 0.1s ease;
&:hover {
transform: scale(1.1);
}
}
& .recentGuideShareButton {
padding: .35rem 1rem;
text-transform: capitalize;
border: none;
background-color: #fff;
outline: 1.75px solid #EC7140;
border-radius: .25rem;
color: #EC7140;
font-size: .825rem;
font-weight: 600;
cursor: pointer;
transform: scale(1.05);
transition: all 0.1s ease;
&:hover {
transform: scale(1.1);
}
}
}
@media screen and (min-width: 768px) {
.recentGuideButtons {
display: flex;
justify-content: start;
align-items: center;
width: 100%;
padding: 1rem;
z-index: 4;
margin: 0;
}
}
.button-link {
background-color: var(--orange-main);
color: #fff;
border: none;
border-radius: 0.55rem;
padding: 0.625rem 1rem;
font-size: 1rem;
font-weight: 600;
outline: none;
cursor: pointer;
text-transform: capitalize;
}
.sitemapContentContainer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: start;
align-items: start;
gap: 1rem;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0 0 1rem;
}
.sitemapListingWrapper {
flex-grow: 1;
width: 100%;
& .sitemapListingSectionHeader {
display: flex;
background: #0F272F;
flex-direction: row;
gap: 1rem;
padding: .5rem 1rem;
margin-bottom: 1rem;
border-radius: .5rem;
& img {
width: 50px;
height: auto;
object-fit: contain;
object-position: 50% 50%;
border-radius: 0.5rem;
transform: scale(1);
transition: all 0.3s ease;
}
}
& h3 {
font-size: 1.75rem;
font-weight: 700;
color: #fff;
text-align: left;
text-transform: uppercase;
padding-left: 1rem;
}
& ul {
list-style: none;
}
& a {
font-size: 1rem;
font-weight: 300;
color: #416663;
text-align: left;
text-decoration: none;
margin-left: 1em;
text-indent: -1em;
padding-bottom: .5em;
}
/* Style the buttons that are used to open and close the accordion panel */
& .accordion {
font-size: 1rem;
font-weight: 300;
color: #416663;
text-align: left;
text-decoration: none;
cursor: pointer;
width: 100%;
border: none;
outline: none;
transition: 0.4s;
background-color: transparent;
font-family: inherit;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
& .active, & .accordion:hover {
color: #EC7140;
text-decoration: underline;
}
/* Style the accordion panel. Note: hidden by default */
& .panel {
padding: 0 1rem 1rem;
display: none;
/*overflow: hidden;*/
flex-direction: column;
}
}
.sitemapImgWrapper img {
max-width: 100%;
width: 100%;
border-radius: .5rem;
}
@media screen and (min-width: 768px) {
.sitemapContentContainer {
flex-direction: row;
flex-wrap: nowrap;
gap: 2rem;
}
.sitemapListingWrapper {
width: auto;
& p {
font-size: 1.25rem;
}
& li {
font-size: 1.25rem;
}
& .accordion {
font-size: 1.25rem;
}
& .sitemapListingSectionSubcategory {
display: flex;
& ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%
}
& li {
flex-basis: calc(33% - 1rem);
min-width: 275px;
}
}
}
.sitemapImgWrapper img {
max-width: 375px;
width: auto;
}
}
/*///////////////////////////////////////*/
/* Share Modal Styling */
/*///////////////////////////////////////*/
.share-menu {
display: none;
position: absolute;
border-radius: 4px;
padding: 0 .8rem;
flex-flow: column nowrap;
background-color: #fff;
align-items: center;
border: 2px solid #EC7140;
color: #EC7140;
z-index: 999;
list-style: none;
}
.share-menu.visible {
display: flex;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 20%);
width: 80%;
max-width: 20em;
}
.share-menu a, .share-menu span {
font-weight: inherit;
font-size: inherit;
color: inherit;
}
.share-menu li {
border-bottom: none;
font-size: 1.2em;
font-weight: bold;
padding: .6em;
padding-left: 25%;
width: 90%;
}
.share-menu span {
cursor: pointer;
}
.share-menu a, .share-menu span {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
font-weight: 400;
}
.share-menu img {
padding-right: .8rem;
}
@media (min-width: 40em) {
.share-menu li {
font-size: .875em;
padding-left: 0;
}
.share-menu.visible {
top: 6em;
right: auto;
left: auto;
transform: none;
width: auto;
}
}
/*///////////////////////////////////////*/
/* End Share Modal Styling */
/*///////////////////////////////////////*/
.articleMoreResourcesCarouselWrapper {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
gap: 1rem;
margin: 0 auto;
padding: 0;
}
@media screen and (min-width: 768px) {
.articleMoreResourcesCarouselWrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin: 0 auto;
padding: 0;
}
}
.carousel {
width: 100%;
}
.carousel-arrow, .carousel-navigation {
display: none;
}
@media screen and (max-width: 768px) {
.carousel-main {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2rem;
}
.carousel-content {
display: flex;
flex-direction: row;
justify-content: normal;
position: static;
gap: 2rem;
max-width: 1400px;
overflow-x: hidden; /* VERY IMPORTANT: We rely on scrolling so we hide the overflow */
scroll-behavior: smooth;
}
.carousel-content > * {
flex: 0 0 auto;
}
.carousel-content .recentGuide {
width: 100%;
}
.carousel-arrow {
display: flex;
flex: 0 0 auto;
width: 35px;
height: 35px;
border: 4px solid #639ea4;
transform: rotate(45deg);
transition: 0.2s;
cursor: pointer;
}
.carousel-arrow:hover {
transform: rotate(45deg) scale(1.05);
}
.carousel-arrow-left {
border-top: none;
border-right: none;
}
.carousel-arrow-right {
border-bottom: none;
border-left: none;
}
.carousel-navigation {
display: flex;
justify-content: center;
align-items: center;
}
.carousel-dot {
width: 15px;
height: 15px;
border-radius: 15px;
margin: 0 15px;
border: 2px solid #639ea4;
transition: 0.1s;
cursor: pointer;
}
.carousel-dot:hover {
background-color: #639ea4;
}
.carousel-dot-active,
.carousel-dot-active:hover {
background-color: #639ea4;
cursor: auto;
}
}
/*/////////////////////////////*/
/* About Us styling */
/*/////////////////////////////*/
.useCompellingTruthContent {
display: none;
padding: 2rem;
background-color: #fff;
border-radius: 0.5rem;
}
.useCompellingTruthContent.visible {
display: flex;
}
/*/////////////////////////////*/
/* Donate styling */
/*/////////////////////////////*/
.donateContentWrapper {
position: relative;
background-image: url('images/truth_about_mobile_bg.webp');
background-size: cover;
background-attachment: local;
background-position: 0% 50%;
background-repeat: no-repeat;
background-color: #0F272F;
height: auto;
color: #fff;
padding: 2rem 0;
text-align: center;
}
@media screen and (min-width: 768px) {
.donateContentWrapper {
background-image: url('images/theTruthAboutBg.webp');
background-size: cover;
background-attachment: fixed;
background-position: 0% 50%;
background-repeat: no-repeat;
}
}
.donateContentContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 326px;
height: auto;
margin: 0 auto;
padding: 0rem 0;
& h1 {
font-size: 2.5rem;
margin-bottom: 2rem;
}
}
.donateTextBodyContainer {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.donateContentContainer {
width: 100%;
max-width: 80%;
display: flex;
flex-direction: row;
margin-top: 2rem;
padding: 2rem 0;
gap: 1rem;
align-items: start;
}
.donateTextBodyContainer {
flex-basis: 40%;
}
.donateFormContainer {
flex-basis: 60%;
}
}
.donateStatsSection {
position: relative;
background: linear-gradient(to right, rgba(36, 76, 79, .90), rgba(36, 76, 79, .80));
width: 100%;
height: auto;
padding: 2rem;
margin: 0 auto;
text-align: center;
z-index: 1;
}
.donateStatsContainer {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 1rem;
width: 326px;
height: auto;
margin: 0 auto;
padding: 2rem 0rem;
color: #fff;
}
.donateStatsCard {
& h2 {
font-size: 2rem;
}
& div {
font-size: 1.25rem;
}
}
@media screen and (min-width: 768px) {
.donateStatsContainer {
width: 100%;
max-width: 960px;
margin: 0 auto;
flex-direction: row;
}
}
.anchor {
scroll-margin-top: 125px;
scroll-snap-margin-top: 125px; /* iOS 11 and older */
}
/* If the browser supports the property... */
@supports (scroll-margin-top: 0;) {
.anchor {
scroll-margin-top: 125px;
}
}
@media screen and (min-width: 768px) {
.anchor {
scroll-margin-top: 75px;
scroll-snap-margin-top: 75px; /* iOS 11 and older */
}
/* If the browser supports the property... */
@supports (scroll-margin-top: 0;) {
.anchor {
scroll-margin-top: 75px;
}
}
}
/* styling for icontact form on homepage and footer */
#ic_signupform .elcontainer {
background: transparent;
text-align: left;
max-width: 428px;
padding: 0;
border: none;
margin: 0 auto;
}
#ic_signupform .formEl.fieldtype-input input[type="text"] {
display: flex;
justify-content: center;
align-items: center;
padding: 0.625rem;
width: 100%;
max-width: 300px;
border: 2px solid rgba(66, 103, 100, .3);
margin: 0 auto;
background-color: rgba(66, 103, 100, .1);
border-radius: 0.5rem;
transition: all 0.3s ease;
outline: none;
}
#ic_signupform .elcontainer .submit-container input[type="submit"] {
background-color: rgba(236, 113, 64, 1);
color: #fff;
border: none;
border-radius: 0.55rem;
padding: 0.625rem 1rem;
font-size: 1rem;
font-weight: 600;
outline: none;
cursor: pointer;
text-transform: capitalize;
}
#ic_signupform .elcontainer .sortables {
display: flex;
justify-content: space-between;
align-items: center;
gap: .25rem;
width: 100%;
max-width: 428px;
height: auto;
margin: 0 auto;
padding: 0;
}
/* Hide labels and other unnecessary elements */
#ic_signupform .form-header,
#ic_signupform .formEl label,
#ic_signupform .hidden-container,
#ic_signupform .g-recaptcha {
display: none;
}
@media screen and (min-width: 768px) {
#ic_signupform .elcontainer .sortables {
gap: 1rem;
width: 428px;
}
#ic_signupform .formEl.fieldtype-input input[type="text"] {
width: 468px;
max-width: 326px;
}
}
/* styling for google search results */
.gsc-search-button svg { width: auto; }
.google-search, .google-search * { overflow: initial;}
.gcsc-find-more-on-google {display: none!important}
.gsc-control-cse { border-color: transparent !important; background-color: inherit !important; }
.gsc-above-wrapper-area { border-color: transparent !important; }
.gsc-result-info { color: inherit !important; }
.gsc-results .gsc-cursor-box .gsc-cursor-page { color: #244C4F !important; background-color: inherit !important; }
.gsc-results .gsc-cursor-box .gsc-cursor-current-page{ color: #EC7140 !important; }
.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult { border-color: transparent !important; background-color: inherit !important; }
.gsc-webResult.gsc-result:hover { border-color: transparent !important; background-color: inherit !important; }
.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b { color: #244C4F !important }
.gs-webResult.gs-result a.gs-title:active, .gs-webResult.gs-result a.gs-title:active b, .gs-imageResult a.gs-title:active, .gs-imageResult a.gs-title:active b { color: #478D90) !important; text-decoration-color: #478D90 !important; }
.gs-webResult.gs-result a.gs-title:visited, .gs-webResult.gs-result a.gs-title:visited b, .gs-imageResult a.gs-title:visited, .gs-imageResult a.gs-title:visited b { color: #478D90 !important; text-decoration-color: #478D90 !important; }
.gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet, .gs-fileFormatType { color: inherit !important; }
.gs-result a {font-size: 13px; }
#gcse-searchbox-only, .gsc-control-cse {display: inline-block; }
@media (min-width: 40em) { .gsc-control-cse { width: calc(90% - 160px) !important;}}
@media (min-width: 1280px) { .gsc-control-cse {width: auto !important; }}
.google-search .flex-form form input { color: #000}
/*/////////////////////////////*/
/* Header styling */
/*/////////////////////////////*/
:root {
--site-theme: "dark";
--unified-gutter: 2.4rem;
--unified-space: .8rem;
--unified-color-primary: #244C4F;
--unified-color-secondary: #EC7140;
--unified-color-modal: #003A5B;
--unified-color-menu: #EC7140;
--unified-color-menuactive: #478D90;
--unified-color-menuhighlight: #fff;
--unified-color-menuhighlightmobile: #EC7140;
--unified-color-footer: #EC7140;
--unified-color-footer-secondary: #fff;
--unified-bgcolor-header: #0F272F;
--unified-bgcolor-header-start: #0F272F;
--unified-bgcolor-header-end: #0F272F;
--unified-bgcolor-modal: #fff;
--unified-bgcolor-search: #fff;
--unified-bgcolor-secondary: #EC7140;
--unified-bg-footer: #0F272F;
--unified-bgcolor-burger: rgba(36, 76, 79, .85);
--unified-dropdown-arrow: url("data:image/svg+xml;utf8,") no-repeat;
--unified-dropdown-arrow-active: url("data:image/svg+xml;utf8,") no-repeat;
}
[data-site-theme="light"] {
font-weight: 350;
--unified-color-primary: #244C4F;
--unified-color-secondary: #EC7140;
--unified-color-modal: #003A5B;
--unified-color-menu: #EC7140;
--unified-color-menuactive: #478D90;
--unified-color-menuhighlight: #fff;
--unified-color-menuhighlightmobile: #EC7140;
--unified-color-footer: #EC7140;
--unified-color-footer-secondary: #fff;
--unified-bgcolor-header: #0F272F;
--unified-bgcolor-header-start: #0F272F;
--unified-bgcolor-header-end: #0F272F;
--unified-bgcolor-modal: #fff;
--unified-bgcolor-search: #fff;
--unified-bgcolor-secondary: #EC7140;
--unified-bg-footer: #0F272F;
--unified-bgcolor-burger: rgba(36, 76, 79, .85);
}
header-element {
align-self: flex-start;
width: 100%;
position: sticky;
top: 0;
z-index: 99998;
}
/*/////////////////////////////*/
/* End Header styling */
/*/////////////////////////////*/
/*==============================
Glossary Styling
==============================*/
.glossary-term {
text-decoration: underline;
color: #EC7140;
cursor: pointer;
}
#glossary-popup {
position: absolute;
border: 1px solid #ccc;
background-color: #f9f9f9;
padding: 10px;
max-width: 300px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 1000;
}
#glossary-popup.hidden {
display: none;
}
#glossary-popup h3 {
margin-top: 0;
}
#glossary-popup a {
display: block;
margin-top: 10px;
color: #EC7140;
}