.about .about-banner {
padding: 0 40px 0 40px;
background: url(//communitiesfornature.org/wp-content/themes/cfn-template/assets/images/about-banner.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 105vh;
}
.about .about-banner h1 {
padding-top: 50px;
font-size: 3.5rem;
}
.about .content-right {
position: absolute;
right: 0px;
width: 40%;
padding: 10px 45px 10px 10px;
top: 112%;
}
.about .section-2 {
background: url(//communitiesfornature.org/wp-content/themes/cfn-template/assets/images/about-section2bg.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: auto;
padding-top: 50px;
}
.about .section-2 .what-we-do {
padding: 50px 40px 40px 40px;
}
.about .section-2 .what-we-do h2 {
font-size: 3.2rem;
padding-bottom: 25px;
}
.about .section-2 .what-we-do .content {
padding: 40px;
}
.about .section-2 .what-we-do img {
width: 100%;
}
.about .section-2 .what-we-do .content h2 {
font-size: 1.4rem;
padding-bottom: 15px;
}
.about .section-3 {
background: url(//communitiesfornature.org/wp-content/themes/cfn-template/assets/images/our-approach-bg1.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 120vh;
}
.about .section-3 .our-approach {
padding: 50px 40px 40px 40px;
}
.about .section-3 .our-approach .img-approach {
margin-top: -180px
}
.about .section-3 .our-approach h2 {
font-size: 3.2rem;
margin-top: -10px;
margin-bottom: 40px;
}
.about .section-3 .our-approach h5 {
max-width: 750px;
padding-bottom: 40px;
}
.about .section-3 .our-approach .content h2 {
font-size: 1.4rem;
margin-bottom: 25px;
}
.about .section-3 .approach-bottom-img {
width: 250px;
margin-top: -80px !important;
}
.about .section-3 .our-approach p {
margin-right: 25px;
}
.about .section-4 { width: 100%;
height: auto;
padding: 0 40px 40px 40px;
}
.about .section-4 h2 {
font-size: 3.2rem;
margin-top: -100px;
margin-bottom: 40px;
}
.about .section-4 h5 {
max-width: 90%;
padding-bottom: 40px;
margin: 0 auto;
}
.about .section-4 .trustees-box {
border: 3px solid #cdcfcf;
width: 100%;
height: auto;
padding: 35px;
}
.about .section-4 .trustees-box img {
width: 100%;
height: 100%;
text-align: center;
margin: 0 auto;
object-fit: cover;
}
.about .section-4 .trustees-box h3 {
font-size: 1.5rem;
margin-top: 15px;
}
.about .section-4 .trustees-box p {
font-size: 1rem;
color: #b0b0b0;
margin-top: -5px;
text-transform: uppercase;
}
.about .section-4 .trustees-box .meet {
text-align: center;
}
.about .section-4 .trustees-box .meet a {
color: #6bc0ca;
text-decoration: none;
}
.about .section-4 .lst-img-trustees {
width: 100%;
margin-top: 80px;
margin-left: -17px;
}
.about .section-5 {
background: url(//communitiesfornature.org/wp-content/themes/cfn-template/assets/images/partners-bg.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: auto;
padding: 50px 40px 130px 40px;
}
.about .section-5 h2 {
font-size: 3.2rem;
margin-bottom: 40px;
}
.about .section-5 h5 {
max-width: 80%;
padding-bottom: 20px;
margin: 0 auto;
}
.about .section-5 .content {
max-width: 1100px;
margin: 0 auto;
text-align: center;
}
.about .section-5 .btn-partner {
background: #00aebe;
color: #fff;
padding: 10px 35px 10px 35px;
font-family: 'Cairo', sans-serif;
font-size: 1rem;
border-radius: 50px;
border: 2px solid #00aebe;
}
.about .section-5 .btn-partner:hover {
background: #fff;
border: 2px solid #00aebe;
color: #00aebe;
}
.about .modal-content {
width: 100%;
height: auto !important;
max-width: 100% !important;
}
.about .close {
color: #000000;
z-index: 9999;
}
@media only screen and (max-width: 540px) {
.modal-trustees .content h3 {
font-size: 1.8rem !important;
}
.modal-trustees .content label {
font-size: 1rem !important;
}
.modal-trustees .content {
padding: 30px !important;
}
.about .about-banner h1 {
font-size: 2.2rem;
}
.about .about-banner {
background: url(//communitiesfornature.org/wp-content/themes/cfn-template/assets/images/about-banner-mobile.png);
padding: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 63vh;
}
.about .content-right {
width: 100%;
right: 0;
top: 65%;
}
.about .section-2 {
background: transparent;
height: auto;
padding-top: 50px;
}
.about .section-2 .what-we-do {
padding: 0;
margin-top: 50px;
}
.about .section-2 .what-we-do h2 {
font-size: 2rem;
}
.about .section-2 .what-we-do .content {
padding: 10px 0 10px 0;
}
.about .section-3 .our-approach {
padding: 30px 0 30px 0;
}
.about .section-3 .our-approach .section-title {
font-size: 2rem;
margin-top: -50px;
}
.about .section-3 .our-approach .overimage {
position: relative;
text-align: center;
}
.about .section-3 .our-approach .overimage img {
width: 50%;
}
.about .section-3 .our-approach .content h2 {
margin-top: 25px;
}
.about .section-3 .our-approach p {
margin-right: 0;
}
.about .section-3 .our-approach .px-0 {
padding-left: 15px !important;
padding-right: 15px !important;
}
.about .section-3 {
height: auto;
}
.about .section-3 h2 {
margin-bottom: 0;
margin-top: 0;
}
.about .section-3 .mt-4 {
margin-top: 0 !important;
}
.about .section-4 {
padding: 0;
margin-top: 50px;
}
.about .section-3 .approach-bottom-img {
width: 150px;
}
.about .section-4 h2 {
margin-top: 0;
font-size: 2.2rem;
}
.about .section-4 h5 {
text-align: center;
max-width: 100%;
}
.about .section-4 .trustees-box {
width: 80%;
margin: 0 auto;
}
.about .section-4 .trustees-box img {
width: 100%;
height: 100%;
}
.modal-trustees img {
padding: 70px 40px 0px 40px !important;
}
.about .section-5 {
padding: 0;
}
.about .section-5 .content {
text-align: left;
}
.about .section-5 h5 {
max-width: 100%;
text-align: center;
}
.about .section-5 .btn-partner {
margin-top: -20px;
}
.about .section-3 .our-approach h5 {
text-align: center;
}
}
.modal-body {
padding: 0;
}
.modal-header {
margin: 0;
padding: 0;
}
@media only screen and (min-width: 720px) and (max-width: 820px) {
.modal-trustees img {
padding: 60px 60px 30px 60px !important;
}
.modal-trustees .content {
padding: 0 60px 30px 60px !important;
}
.about .section-4 .trustees-box {
padding: 20px;
}
.about .section-4 .trustees-box h3 {
font-size: 1.4rem;
}
.about .section-4 .trustees-box p {
font-size: 14px;
}
.about .section-3 {
padding-bottom: 50px;
height: auto;
}
.about .section-3 .our-approach .img-approach {
height: auto;
margin-top: 0;
}
}
.communities .banner .content {
padding: 250px 40px 50px 40px;
max-width: 750px;
}
.communities .banner .content h1 {
font-size: 3.5rem;
}
.communities .banner .content h5 {
margin-bottom: 20px;
margin-top: 20px;
}
.communities .banner .content span {
color: #00a6b4;
}
.communities-banner {
margin-top: -190px;
overflow-y: hidden;
}
.communities .banner {
background: url(//communitiesfornature.org/wp-content/themes/cfn-template/assets/images/communities-bg.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: auto;
} .communities .section-2 {
padding: 0 40px 50px 40px;
width: 100%;
height: auto;
}
.communities .section-2 .container .title{
color: #1a1a1a;
text-align: center;
margin-bottom: 10px;
}
.communities .section-2 .content {
position: relative;
width: 100%;
margin: auto;
overflow: hidden;
}
.communities .section-2 .big-img {
height: 529px;
}
.communities .section-2 .small-img {
height: 326px;
}
.communities .section-2  .content .content-overlay {
background: rgba(0,0,0,0.9);
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.communities .section-2  .content:hover .content-overlay{
opacity: 1;
z-index: -1;
}
.communities .section-2 .content-image{
width: 100%;
height: 100%;
object-fit: cover;
}
.communities .section-2 .content-details {
position: absolute; padding-left: 3em;
padding-right: 3em;
width: 100%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.communities .section-2 .content:hover .content-details{
top: 70%;
left: 50%;
opacity: 1;
}
.communities .section-2 .content-details h3{
color: #fff;
font-weight: 400;
letter-spacing: 0.15em;
margin-bottom: 0.5em;
}
.communities .section-2  .content-details p{
color: #fff;
font-size: 1rem;
}
.communities .section-2 .fadeIn-bottom{
top: 80%;
}
.communities .section-2 .support-btn {
background: #00aebe;
color: #fff;
padding: 10px 35px 10px 35px;
font-family: 'Cairo', sans-serif;
font-size: 1rem;
border-radius: 50px;
border: 2px solid #00aebe;
}
#myImg {
border-radius: 5px !important;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;} .modalImage {
display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0;
top: 0;
width: 100%; height: 100%; overflow: hidden; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9); } .modal-content {
margin: auto;
display: block;
width: 100%;
height: 537px;
max-width: 700px;
object-fit: cover;
} .main-caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 5px 0;
height: 150px;
} .modal-content, #caption {  
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)} 
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)} 
to {transform:scale(1)}
} .close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
} @media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
@media only screen and (max-width: 540px) {
.communities .banner {
background: transparent;
}
.communities .banner .content {
padding: 50px  50px ;
}
.communities .home-banner {
margin-top: -158px;
}
.communities .section-2 .big-img {
height: auto;
}
.communities .banner .content {
padding: 50px 0 50px 0;
}
.communities .section-2 {
padding: 0;
}
.communities .section-2 .col-md-12 {
margin-bottom: 15px !important;
}
.communities .section-2 .content:hover .content-details {
top: 50%;
}
.communities .section-2 .content-details {
padding-left: 1em;
padding-right: 1em;
}
.communities .section-2 .content-details h3 {
font-size: 1.2rem;
}
.communities .section-2 .content-details p {
font-size: 0.8rem;
}
.communities .section-2 .support-btn {
padding: 5px 20px 5px 20px;
font-size: 0.8rem;
}
}
@media only screen and (min-width: 720px) and (max-width: 1024px) {
.communities .banner {
background: transparent;
}
.communities .banner img {
display: block !important;
width: 70%;
float: right;
}
}
.nav-item .contactus {
background: #fff !important;
}
.nav-item .contactus:hover {
color: #00a6b4;
}
.contact-page .banner .content {
padding: 250px 40px 50px 40px;
max-width: 750px;
}
.contact-page .banner .content p {
max-width: 550px;
}
.contact-page .banner .content h1 {
font-size: 3.5rem;
}
.contact-page .banner .content h5 {
margin-bottom: 20px;
margin-top: 20px;
}
.contact-page .banner .content span {
color: #00a6b4;
}
.contact-page-banner {
margin-top: -190px;
overflow-y: hidden;
}
.contact-page .banner {
background: url(//communitiesfornature.org/wp-content/themes/cfn-template/assets/images/contact-bg-mobile-1-1.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 143vh;
} .contact-page h2 {
font-size: 3.2rem;
color: #fff;
}
.contact-page .ct-form .row {
align-items: flex-start;
}
.contact-page .contact-title {
font-size: 3.2rem;
color: #000000;
}
.contact-page .home-banner {
margin-bottom: -100px;
}
.contact-page .ctn-input {
background: #eeeeed;
border: 0;
border-radius: 30px;
padding: 24px;
color: #000000;
}
.contact-page .form-group {
margin-right: 20px;
}
.contact-page .form-group textarea {
resize: none;
height: 177px;
color: #000000;
}
.contact-page .btn-submit {
background: #00aebe;
padding: 10px 35px 10px 35px;
font-size: 1rem;
border-radius: 50px;
color: #fff;
margin-top: 10px;
}
.contact-page ul {
display: inline;
}
.contact-page ul li {
list-style-type: none;
padding: 10px;
}
.contact-page ul li i {
margin-right: 5px;
}
@media only screen and (max-width: 540px) { 
.contact-page .banner {
background: transparent;
height: auto;
}
.contact-page .home-banner {
margin-top: -190px;
margin-bottom: 0;
}
.contact-page .banner .content {
padding: 50px 0 50px 0;
}
}
@media only screen and (min-width: 720px) and (max-width: 1024px) {
.contact-page .banner {
background: transparent;
}
.contact-page .banner img {
display: block !important;
width: 40%;
float: right;
}
}
.nav-item .cts-white {
background: #fff !important;
border: 2px solid #00aebe;
}
.nav-item .cts-white:hover{
color: #00aebe;
}
.get-contribute .banner .content {
padding: 300px 40px 0 40px;
max-width: 800px;
}
.get-contribute .banner .content h1 {
font-size: 3.5rem;
}
.get-contribute .banner .content h5 {
margin-bottom: 20px;
margin-top: 20px;
}
.get-contribute .banner .content span {
color: #00a6b4;
}
.communities-banner {
margin-top: -190px;
overflow-y: hidden;
}
.get-contribute .banner {
background: url(//communitiesfornature.org/wp-content/themes/cfn-template/assets/images/contribute-bg.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: auto;
}
.get-contribute .learn-more {
background: #00aebe;
color: #fff;
padding: 10px 35px 10px 35px;
font-family: 'Cairo', sans-serif;
font-size: 1rem;
border-radius: 50px;
border: 2px solid #00aebe;
margin-right: 15px;
}
.get-contribute .get-contribute-form {
padding: 50px 40px 50px 40px;
max-width: 830px;
}
.get-contribute .get-contribute-form h5 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 25px;
margin-top: 25px;
}
.get-contribute .get-contribute-form .form-check-label {
padding-right: 150px;
}
.get-contribute .get-contribute-form .ctn-input {
background: #eeeeed;
border: 0;
border-radius: 30px;
padding: 24px;
color: #000000;
}
.get-contribute .get-contribute-form .form-group textarea {
resize: none;
height: 177px;
color: #000000;
resize: none;
}
.get-contribute .get-contribute-form .btn-submit {
background: #00aebe;
padding: 10px 35px 10px 35px;
font-size: 1rem;
border-radius: 50px;
color: #fff;
margin-top: 10px;
}
@media only screen and (max-width: 540px) {
.get-contribute .banner .content {
padding: 50px 0 50px 0;
}
.get-contribute .get-contribute-form {
padding: 0;
margin-bottom: 50px;
margin-top: 0;
max-width: 100%;
}
.get-contribute .banner {
background: transparent;
height: auto;
}
.get-contribute .banner img {
position: absolute;
right: 0%;
width: 95%;
z-index: -9999;
}
.get-contribute .home-banner {
margin-top: -90px;
}
.get-contribute .banner .content {
padding: 200px 0 50px 0;
}
}
@media only screen and (min-width: 720px) and (max-width: 1024px) {
.get-contribute .banner {
background: transparent;
}
.get-contribute .banner img {
display: block !important;
width: 90%;
float: right;
}
}
.nav-item .cts-white {
background: #fff !important;
border: 2px solid #00aebe;
}
.nav-item .cts-white:hover{
color: #00aebe;
}
.get-support .banner .content {
padding: 300px 40px 50px 40px;
max-width: 800px;
}
.get-support .banner .content h1 {
font-size: 3.5rem;
}
.get-support .banner .content h5 {
margin-bottom: 20px;
margin-top: 20px;
}
.get-support .banner .content span {
color: #00a6b4;
}
.communities-banner {
margin-top: -190px;
overflow-y: hidden;
}
.get-support .banner {
background: url(//communitiesfornature.org/wp-content/themes/cfn-template/assets/images/get-supported-bg.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: auto;
margin-top: -60px;
}
.get-support .learn-more {
background: #00aebe;
color: #fff;
padding: 10px 35px 10px 35px;
font-family: 'Cairo', sans-serif;
font-size: 1rem;
border-radius: 50px;
border: 2px solid #00aebe;
margin-right: 15px;
}
.get-support .get-support-form {
padding: 0 40px 0 40px;
}
.get-support .get-support-form h5 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 25px;
margin-top: 25px;
}
.get-support .get-support-form .form-check-label {
padding-right: 150px;
}
.get-support .get-support-form .ctn-input {
background: #eeeeed;
border: 0;
border-radius: 30px;
padding: 24px;
color: #000000;
}
.get-support .get-support-form .form-group textarea {
resize: none;
height: 177px;
color: #000000;
resize: none;
}
.get-support .get-support-form .btn-submit {
background: #00aebe;
padding: 10px 35px 10px 35px;
font-size: 1rem;
border-radius: 50px;
color: #fff;
margin-top: 10px;
}
.get-support  .wpcf7-radio {
padding-left: 15px !important;
}
.get-support  .wpcf7-list-item-label {
padding-left: 8px !important;
font-size: 16px;
}
.get-support .last {
padding-left: 200px;
}
.get-support .screen-reader-response {
display: none;
}
@media only screen and (max-width: 540px) {
.get-support .banner .content {
padding: 50px 0 50px 0;
}
.get-support .get-support-form {
padding: 0;
margin-bottom: 50px;
}
.get-support .banner {
background: transparent;
margin-top: 0;
}
.get-support .banner img {
position: absolute;
right: 0%;
width: 65%;
z-index: -9999;
}
.get-support .home-banner {
margin-top: -90px;
}
.get-support .banner .content {
padding: 200px 0 50px 0;
}
}
@media only screen and (min-width: 720px) and (max-width: 1024px) {
.get-support .banner {
background: transparent;
}
.get-support .banner img {
display: block !important;
width: 70%;
float: right;
}
}
.news .search {
position: relative;
color: #aaa;
font-size: 16px;
}
.news .search {display: inline-block;}
.news .search input {
width: 500px;
height: 45px;
background: #eeeeed; border-radius: 25px; }
.news .search input { text-indent: 5px;}
.news .search .fa-search { 
position: absolute;
top: 14px;
left: 10px;
}
.news .search .fa-search {left: auto; right: 30px;}
.news .banner .content {
padding: 450px 40px 150px 40px;
max-width: 100%;
}
.news .banner .content h1 {
font-size: 3.5rem;
color: #fff;
}
.news .banner .content h5 {
margin-bottom: 20px;
margin-top: 20px;
} .news-banner {
margin-top: -190px;
overflow-y: hidden;
}
.news .banner {
background: url(//communitiesfornature.org/wp-content/themes/cfn-template/assets/images/news-banner.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: auto;
}
.news .section-2 {
width: 100%;
height: 100vh;
padding: 50px 0 50px 55px;
background: url(//communitiesfornature.org/wp-content/themes/cfn-template/assets/images/news-section2.png);
background-position: center;
background-size: cover;
}
.news .section-2 .title {
font-size: 3.2rem;
}
.news .section-2 .news-column-1 {
float: left;
width: 40%;
height: auto;
padding-right: 150px;
}
.news .section-2 .news-column-2 {
float: left;
width: 60%;
height: auto;
}
.news .section-2 .news-row {
padding: 25px 0px 25px 0px;
align-items: center !important;
display: flex;
}
.news .section-2 .news-row h6 {
font-size: 14px;
font-family: 'Nunito', serif;
font-weight: 600;
}
.news .section-2 .news-row h2 {
font-size: 2.5rem;
}
.news .section-2 .news-row:after {
content: "";
display: table;
clear: both;
}
.news .section-2 .img-news {
width: 100%;
height: 80vh;
}
.news .section-2 .img-news img {
width: 100%;
height: 90%;
object-fit: cover;
}
.news .section-3 {
padding: 20px 0 40px 0
}
.news .section-3 .row {
margin: 0
}
.news .section-3 .row .col-md-4 {
padding: 0
}
.news .section-3 .row .col-md-4 .news-content {
height: 330px;
padding: 35px 60px 40px 55px;
}
.news .section-3 .row .col-md-4 .news-content p {
font-size: 14px;
}
.news .section-3 .row .col-md-4 .news-content h6 {
font-size: 14px;
font-family: 'Nunito', serif;
font-weight: 600;
}
.news .section-3 .row .col-md-4 .news-content h2 {
font-size: 1.5rem;
}
.news .section-3 .learn-more {
background: transparent;
border: 2px solid #00aebe;
color: #00aebe;
padding: 10px 35px 10px 35px;
}
.news .section-3 .learn-more:hover {
background: #00aebe;
color: #fff;
}
@media only screen and (max-width: 540px) {
.news .section-3 .news-box .news-content {
margin-top: 25px;
}
.news .search input {
width: 100%;
height: 45px;
}
.news .search {
display: block;
}
.news .banner .content {
padding: 450px 0 70px 0;
}
.news .search .fa-search {
top: 30%;
}
.news .news-content {
margin-top: 15px;
}
}
@media only screen and (min-width: 720px) and (max-width: 820px) {
.news .section-2 .news-column-1 {
padding-right: 50px;
}
.news .section-2 {
height: 85vh;
}
.news .section-3 .row .col-md-4 .news-content h2 {
font-size: 1.2rem;
}
.news .section-3 .row .col-md-4 .news-content {
padding: 20px;
}
.news .section-3 .row .col-md-4 .news-content p {
font-size: 13px;
}
}
@media only screen and (min-width: 840px) and (max-width: 1024px) {
.news .section-3 .row .col-md-4 .news-content h2 {
font-size: 1.2rem;
}
}
.single-post {
width: 100%;
height: auto;
padding: 50px 40px 50px 40px;
}
.single-post .bg-img {
width: 200px;
position: absolute;
right: 0;
top: 25%;
}
.single-post .back {
color: #00a6b4;
text-decoration: none;
}
.single-post h6 {
font-size: 16px;
font-family: 'Nunito', serif;
font-weight: 600;
margin-top: 25px;
}
.single-post .date-social {
padding-top: 30px;
}
.single-post .social-icons ul {
text-align: right;
}
.single-post .social-icons ul li a {
color: #222222;
cursor: pointer;
}
.single-post .social-icons ul li {
font-size: 21px;
display: inline;
padding-left: 15px;
cursor: pointer;
}
.single-post .main-content {
padding-top: 15px;
}
.single-post .related h2 {
font-size: 1.6rem;
margin-bottom: 25px;
margin-top: 50px;
padding-left: 50px;
}
.single-post .related-news {
margin-top: 25px;
padding-left: 50px;
}
.single-post .related-news h6 {
font-size: 14px;
}
.single-post .related-news h3 {
font-size: 1.6rem;
}
.single-post .related-news p {
margin-top: 15px;
}
.single-post .post-categories {
list-style-type: none;
margin: 0;
padding: 0;
}
.single-post .post-categories li a {
color: #222222;
text-decoration: none;
cursor: default;
}
@media only screen and (max-width: 540px) {
.single-post {
padding: 50px 0 50px 0;
}
.single-post .bg-img {
display: none;
}
.single-post .related h2 {
padding-left: 0;
}
.single-post .related-news {
padding-left: 0;
}
.single-post .social-icons ul li {
padding-left: 5px;
}
.single-post .social-icons ul {
margin-top: 5px;
}
}
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #ee3577;
--red: #dc3545;
--orange: #f68e62;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #767575;
--gray-dark: #434242;
--primary: #6f42c1;
--secondary: #4f4f4f;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #c2c2c2;
--lightgray: #eeeeee;
--dark: #434242;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-normal: 1em;
--font-small: 0.8125rem; --sidebar-width: 280px;
--content-max-width: 860px;
}
* {
box-sizing: border-box !important;
}
*,
*::before,
*::after {
box-sizing: border-box !important;
}
html,body {
width: 100%;
overflow-x: hidden;
padding: 0;
margin: 0;
margin-top: -1px !important;
}
html {
line-height: 1.15;
}
body {
transition: background-color .5s;
padding: 0;
margin: 0;
}
#layer  {
content: "";
background-color: rgba(255,255,255, 0.7);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
position: fixed;
display: none;
}
a{
color: #00aebe;
text-decoration: none !important;
}
h1,
h2,
h3,
h4,
h6 {
color: #222222; font-family: 'Alice', serif;
}
h5 {
font-family: 'Nunito', serif;
font-weight: 500;
color: #292929;
font-size: 1.4rem;
}
button, input, textarea {
font-family: 'Nunito', serif;
}
p {
font-family: 'Nunito', serif;
font-size: 1rem;
}
.learn-more {
background: #00aebe;
color: #fff;
padding: 10px 35px 10px 35px;
font-family: 'Cairo', sans-serif;
font-size: 1rem;
border-radius: 50px;
border: 2px solid #00aebe;
}
.learn-more:hover {
background: #fff;
border: 2px solid #00aebe;
color: #00aebe;
}
.sidenav button {
border-radius: 50%;
padding: 0.5em;
width: 30px;
height: 30px;
border: 2px solid blue;
color: blue;
position: relative;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
background-color: #00a6b4;
overflow-x: hidden;
transition: 0.5s;
padding-top: 160px !important;
text-align: right;
}
.sidenav a.menu {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 2rem;
color: #fff;
display: block;
transition: 0.3s;
font-family: 'Alice', serif;
text-align: right;
padding-right: 50px;
cursor: pointer;
}
.sidenav #getInvolved {
color: #fff;
}
.sidenav a:hover {
color: #fff;
}
.sidenav .closebtn {
position: absolute;
top: 70px;
right: 45px;
font-size: 36px;
margin-left: 50px;
border-radius: 50%;
margin-left: 50px;
background: #fff;
padding: 0px 20px 2px 20px;
color: #000000;
}
.sidenav .closebtn:hover {
color: #000000;
}
.sidenav2 {
height: 100%;
width: 0;
position: fixed;
z-index: -999999;
top: 0;
right: 0;
background-color: #fff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
margin-right: 350px;
padding-top: 160px !important;
text-align: right;
}
.sidenav2 a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 2rem;
color: #00a6b4;
display: block;
transition: 0.3s;
padding-right: 50px;
}
.sidenav2 a:hover {
color: #000000;
}
.sidenav2 .closebtn {
position: absolute;
top: 70px;
right: 45px;
font-size: 36px;
margin-left: 50px;
border-radius: 50%;
margin-left: 50px;
background: #fff;
padding: 0px 20px 2px 20px;
color: #000000;
border: 1px solid #00a6b4;
}
.sidenav3 {
height: 100%;
width: 0;
position: fixed;
z-index: -999999;
top: 0;
right: 0;
background-color: #fff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
margin-right: 350px;
padding-top: 160px !important;
}
.sidenav3 a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 2rem;
color: #00a6b4;
display: block;
transition: 0.3s;
padding-right: 50px;
}
.sidenav3 a:hover {
color: #000000;
}
.sidenav3 .closebtn {
position: absolute;
top: 70px;
right: 45px;
font-size: 36px;
margin-left: 50px;
border-radius: 50%;
margin-left: 50px;
background: #fff;
padding: 0px 20px 2px 20px;
color: #000000;
border: 1px solid #00a6b4;
}
.header-socialmedia {
position: absolute;
left: 0;
text-align: center;
right: 0;
bottom: 3%;
}
.header-socialmedia ul li {
display: inline;
padding: 10px;
}
.header-socialmedia ul li i {
color: #fff;
font-size: 24px;
}
.nav-item .cts-white {
background: #fff !important;
border: 2px solid #00aebe;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 2rem;}
}
.navbar {
padding: 80px 40px 0px 40px;
}
.navbar .logo {
width: 150px;
height: 100%;
}
ul#menu li {
display: inline;
}
.nav-item {
margin-left: 30px;
}
.nav-item .get-involved {
background: #00a6b4;
border: 3px solid #00a6b4;
border-radius: 50px;
padding: 12px 20px 12px 20px;
color: #fff;
}
.nav-item .get-involved:hover {
color: #00a6b4;
background: #fff;
}
.nav-item .contactus {
border: 3px solid #00a6b4;
border-radius: 50px;
padding: 12px 20px 12px 20px;
color: #00a6b4;
text-decoration: none;
background: #fff !important;
}
.nav-item .contactus:hover {
color: #fff;
background: #00a6b4 !important;
}
.nav-tgl {
display: inline-block;
cursor: pointer;  right: 30px;
top: 30px;
width: 60px;
height: 60px;
border: none;
border-radius: 50%;
padding: 0;
background: #fff;
border: 3px solid #00a6b4;
line-height: 0.6;
text-align: center;
}
.nav-tgl > span {
display: inline-block;
position: relative;
height: 3px;
width: 34px;
border-radius: 1px;
background: #293335;
vertical-align: middle;
}
.nav-tgl > span:before, .nav-tgl > span:after {
display: inline-block;
position: absolute;
content: "";
height: 3px;
border-radius: 1px;
background: #293335;
transition: all 200ms;
}
.nav-tgl > span:before {
top: -11px;
left: 3px;
width: 28px;
}
.nav-tgl > span:after {
top: 11px;
left: 6px;
width: 22px;
}
.nav-tgl:focus {
outline: none;
}
.nav-tgl:hover > span:after, .nav-tgl:hover > span:before {
width: 34px;
left: 0;
}
.desktop-hide {
display: none !important;
}
.modal-header {
border: 0;
}
.modal-trustees img {
width: 100%;
height: 100%;
padding: 0 40px 0 0;
}
.modal-trustees .content {
padding-right: 70px;
}
.modal-trustees .content h3 {
font-size: 3rem;
}
.modal-trustees .content label {
font-size: 1.4rem;
color: #b0b0b0;
margin-top: -10px;
text-transform: uppercase;
} .home .content {
padding: 0 40px 0 40px;
top: 45%;
position: absolute;
max-width: 750px;
}
.home .content h1 {
font-size: 2.5rem;
}
.home-banner {
margin-top: -192px;
overflow-y: hidden;
}
.home .banner {
background: url(//communitiesfornature.org/wp-content/themes/cfn-template/assets/images/home-banner.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 124vh;
overflow: hidden;
}
.home .section-2 {
width: 100%;
height: auto;
padding: 0 40px 50px 40px;
margin-top: -65px;
}
.home .section-2 h4 {
font-size: 6rem;
color: #b9e7eb;
margin-top: -7px;
}
.home .section-3 {
width: 100%;
height: 100vh;
padding: 50px 0 50px 55px;
}
.home .section-3 .title {
font-size: 3.2rem;
}
.home .section-3 .smallTitle {
font-size: 2.6rem;
}
.home .section-3 .news-column-1 {
float: left;
width: 40%;
height: auto;
padding-right: 150px;
}
.home .section-3 .news-column-2 {
float: left;
width: 60%;
height: auto;
}
.home .section-3 .news-row {
padding: 25px 0px 25px 0px;
align-items: center !important;
display: flex;
}
.home .section-3 .news-row h6 {
font-size: 14px;
font-family: 'Nunito', serif;
font-weight: 600;
}
.home .section-3 .news-row h2 {
font-size: 2.5rem;
}
.home .section-3 .news-row:after {
content: "";
display: table;
clear: both;
}
.home .section-3 .img-news {
width: 100%;
height: 80vh;
}
.home .section-3 .img-news img {
width: 100%;
height: 90%;
object-fit: cover;
}
.home .section-4 {
padding: 40px 0 40px 0
}
.home .section-4 .row {
margin: 0
}
.home .section-4 .row .col-md-4 {
padding: 0
}
.home .section-4 .row .col-md-4 .news-content {
height: 330px;
padding: 35px 60px 40px 55px;
}
.home .section-4 .row .col-md-4 .news-content p {
font-size: 14px;
}
.home .section-4 .row .col-md-4 .news-content h6 {
font-size: 14px;
font-family: 'Nunito', serif;
font-weight: 600;
}
.home .section-4 .row .col-md-4 .news-content h2 {
font-size: 1.5rem;
}
.home .section-4 .learn-more {
background: transparent;
border: 2px solid #00aebe;
color: #00aebe;
padding: 10px 35px 10px 35px;
}
.home .section-4 .learn-more:hover {
background: #00aebe;
color: #fff;
}
.home .news-content {
margin-top: 15px;
} .contact {
padding: 40px 0 40px 0;
height: auto;
width: 100%;
} .contact h2 {
font-size: 3.2rem;
color: #fff;
}
.contact .row {
margin: 0;
display: flex;
align-items: center;
}
.contact .row .col-md-6 {
padding: 0
}
.contact .contact-get-involved {
background: url(//communitiesfornature.org/wp-content/themes/cfn-template/assets/images/contact-img.jpg);
background-size: cover;
background-position: center;
width: 100%;
height: 100vh;
padding: 0 55px 0 55px;
}
.contact .btn-ct {
width: 100%;
height: 100px;
position: absolute;
top:0;
bottom: 0;
margin: auto;
}
.contact .btn-getsupport {
background: #fff;
border: 2px solid #00aebe;
color: #00aebe;
margin-right: 15px;
}
.contact .btn-getsupport:hover {
background: #00aebe;
color: #fff;
border: 2px solid #00aebe;
}
.contact .ct-form {
padding: 0 40px 0 60px;
}
.contact .ct-form .row {
align-items: flex-start;
}
.contact .contact-title {
font-size: 3.2rem;
color: #000000;
}
.contact .ctn-input {
background: #eeeeed;
border: 0;
border-radius: 30px;
padding: 24px;
color: #000000;
}
.contact .form-group {
margin-right: 20px;
}
.contact .form-group textarea {
resize: none;
height: 177px;
color: #000000;
}
.contact .btn-submit {
background: #00aebe;
padding: 10px 35px 10px 35px;
font-size: 1rem;
border-radius: 50px;
color: #fff;
margin-top: 10px;
} footer {
padding: 120px 0 50px 0
}
footer ul li {
display: inline;
}
footer li {
padding: 10px;
}
footer p {
color: #7b7e82;
}
footer ul {
padding: 0;
}
footer .designedby li {
padding: 3px;
}
footer .fa {
font-size: 24px;
color: #000000;
}
@media screen and (max-width: 600px) {
.news-column-1 {
width: 100%;
}
.news-column-2 {
width: 100%;
}
}
@media only screen and (max-width: 768px) {
.home .section-2 h4 {
font-size: 4rem !important;
}
}
@media only screen and (min-width: 720px) and (max-width: 820px) {
.home .section-4 .row .col-md-4 .news-content h2 {
font-size: 1rem;
}
.home .section-4 .row .col-md-4 .news-content p {
font-size: 12px;
}
.home .section-3 .news-column-1 {
width: 100%;
}
.home .section-3 .news-column-2 {
width: 100%;
}
.home .section-3 .news-column-1 {
padding-right: 15px;
}
.home .section-3 {
padding: 50px 40px 50px 55px;
height: auto;
}
.home .section-4 .row .col-md-4 .news-content {
padding: 20px 15px 20px 15px;
}
.home .banner {
height: 48vh;
}
.home .content {
top: 24%;
}
.home .content h1 {
font-size: 2rem;
max-width: 320px;
}
.home .section-2 {
margin-top: 0;
}
.home .section-2 h4 {
font-size: 3rem;
margin-top: 17px;
}
.nav-item .contactus {
padding: 10px;
}
.nav-item .get-involved {
padding: 10px;
}
}
@media only screen and (max-width: 550px) {
.nav-tgl {
position: fixed;
z-index: 999;
}
.hide-mobile {
display: none !important;
visibility: hidden;
}
.desktop-hide {
display: block !important;
}
.header-socialmedia {
right: 10%;
left: 30%;
}
.navbar {
padding: 15px 0 0 0;
}
.home-banner {
margin-top: -265px;
}
.home .banner {
background: url(//communitiesfornature.org/wp-content/themes/cfn-template/assets/images/home-banner-mobile.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.home .banner {
height: auto;
}
.home .content {
padding: 390px 80px 100px 0 !important;
max-width: 100%;
position: inherit;
}
.home .content h1{
font-size: 1.9rem;
}
.home .content h5 {
font-size: 1rem;
}
.home .section-2 {
padding: 0 15px 50px 15px;
text-align: center;
margin-top: 0;
}
.home .section-2 .col-md-6 {
padding: 0;
}
.home .section-2 h4 {
margin-top: 0;
}
.home .section-2 h2 {
margin-top: 0 !important;
}
.home .section-2 p {
margin-top: 15px;
}
.home .section-2 button {
margin-top: 15px !important;
}
.contact {
padding: 40px 30px 40px 30px;
height: auto;
}
.contact .form-group {
margin-right: 0;
}
.contact .contact-get-involved {
padding: 0 !important;
height: 50vh !important;
}
.contact .row {
margin: 0 -15px 0 -15px !important;
}
.contact .btn-ct {
padding: 0 25px 0 25px;
text-align: center;
}
.contact .ct-form {
padding: 40px 15px 40px 15px;
}
.home .section-4 .row {
margin: 0 -15px 0 -15px !important;
}
footer {
padding: 20px 0 50px 0;
width: 100%;
height: auto;
}
footer ul {
padding: 0;
}
.home .section-4 .news-box .news-content {
margin-top: 25px;
}
.contact .btn-ct {
padding: 0;
}
.contact .learn-more {
margin: 0 auto;
}
.contact .row p {
max-width: 100%;
}
}
@media only screen and (max-width: 375px)
.about .content-right {
top: 70%;
}
@media only screen and (max-width: 390px) {
.sidenav3 a {
font-size: 21px;
}
.sidenav a.menu {
font-size: 21px;
}
.sidenav2 a {
font-size: 21px;
}
.header-socialmedia ul li i {
font-size: 21px;
}
.about .content-right {
top: 67%;
}
.contact .contact-get-involved {
height: 70vh !important;
}
}
.btn-communities {
border: 3px solid #00a6b4;
border-radius: 50px;
color: #00a6b4 !important;
text-decoration: none;
background: #fff !important;
}
.btn-communities:hover {
background: #00aebe !important;
color: #fff !important;
} .news .section-3 .col-md-4 {
display: none;
}
.home .section-4 .col-md-4 {
display: none;
}
.news-content .post-categories {
display: inline;
padding: 0;
}
.news-content .post-categories li {
list-style: none;
}
.news-content .post-categories li a {
color: #222222;
text-decoration: none;
cursor: default;
}
.wpcf7-response-output {
display: none !important;
}
.screen-reader-response {
color: green;
}
.wpcf7 .screen-reader-response {
position: relative !important;
clip-path: initial !important;
width: 100% !important;
margin-bottom: 15px;
height: 100%;
}
@media only screen and (min-width: 840px) and (max-width: 1024px) {
.home .banner {
height: 98vh;
}
.home .content h1 {
font-size: 3rem;
}
.home .content {
max-width: 500px;
}
.home .section-2 {
margin-top: 0;
}
.home .section-2 h4 {
margin-top: 5px;
font-size: 4rem;
}
.home .section-4 .row .col-md-4 .news-content h2 {
font-size: 1.2rem;
}
.home .section-4 .row .col-md-4 .news-content p {
font-size: 13px;
}
.news .section-3 .row .col-md-4 .news-content {
padding: 20px;
}
}