/* LESS Document */
/* Mixins
==================================================== */
.ease {
outline: 0 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.text-shadow {
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}
/* Behaviours
==================================================== */
body {
overflow-x: hidden;
}
@media (min-width: 1200px) {
body {
font-size: 16px;
}
.container {
width: 1100px;
}
}
@media (min-width: 1500px) {
body {
font-size: 17px;
}
.container {
width: 1470px;
}
}
@media (max-width: 767px) {
.tight-container {
padding-left: 0;
padding-right: 0;
}
}
.valign {
position: relative;
}
section {
padding: 30px 0;
}
section:nth-child(even) {
background-color: #f7f7f7;
}
section:nth-child(odd) {
background-color: #ffffff;
}
section.tight {
padding: 0;
}
section.brand-success {
color: #ffffff;
background-color: #d85d00;
}
/* Typography
==================================================== */
.serif-italic {
font-family: 'Amiri', serif;
font-style: italic;
line-height: 115%;
}
@media (max-width: 767px) {
.serif-italic {
font-size: 110%;
line-height: 110%;
}
}
.btn {
text-transform: uppercase;
}
hr.narrow {
margin-left: 35%;
margin-right: 35%;
}
.lead {
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 110%;
font-weight: 400;
color: rgba(62, 149, 145, 0.7);
margin-bottom: 10px;
}
.activity-header {
color: #3e9591;
border-bottom: 1px solid rgba(62, 149, 145, 0.4);
padding-bottom: 10px;
margin-bottom: 10px;
font-weight: 700;
}
.white {
color: #ffffff;
}
/* Navbar
==================================================== */
.navbar-brand {
background-color: transparent;
padding: 20px 0 20 0;
}
@media (max-width: 767px) {
.navbar-brand {
padding: 10px 0;
}
}
.navbar-brand img {
height: 65px;
height: auto;
}
.navbar-brand:hover {
background-color: transparent !important;
}
.donate-button {
margin: 5px 0;
}
.donate-button h6,
.donate-button p {
margin: 0;
color: #fff !important;
text-transform: uppercase;
}
.donate-button p {
display: none;
}
.navbar {
margin-bottom: 0;
background-color: #ffffff;
z-index: 10000;
border-top: none;
border-right: none;
border-left: none;
}
.navbar form {
margin-top: 10px;
}
.navbar .navbar-toggle {
margin-top: 10px;
margin-right: 2px;
padding: 7px 13px;
}
@media (max-width: 767px) {
.navbar .navbar-form-acord {
float: left;
width: 220px;
position: absolute;
}
}
.navbar .navbar-collapse {
border: none;
}
@media (min-width: 768px) {
.navbar-nav {
margin: 0 0 0 -20px;
}
}
#nav {
outline: 0 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
-moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
#nav.stick {
position: fixed;
top: 0;
left: 0;
right: 0;
outline: 0 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
}
/* Carousel
==================================================== */
@media (min-width: 992px) {
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 50px;
height: 50px;
font-size: 50px;
margin-top: -25px;
}
}
@media (max-width: 991px) {
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 40px;
height: 40px;
font-size: 40px;
margin-top: -20px;
}
}
@media (max-width: 767px) {
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 30px;
height: 30px;
font-size: 30px;
margin-top: -15px;
}
}
.carousel-control .right,
.carousel-control .left {
background-image: none;
}
.carousel-inner .item {
-webkit-transition: 0.3s ease-in-out left;
-moz-transition: 0.3s ease-in-out left;
-o-transition: 0.3s ease-in-out left;
transition: 0.3s ease-in-out left;
}
.carousel-inner .center-block {
width: 100%;
height: auto;
}
.carousel-caption {
text-align: inherit;
color: #ffffff;
display: block;
left: 12%;
right: 12%;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}
.carousel-caption h1 {
color: #ffffff;
font-weight: 700;
font-style: normal;
line-height: 100%;
}
@media (max-width: 1199px) {
.carousel-caption h1 {
font-size: 250%;
}
}
@media (max-width: 991px) {
.carousel-caption h1 {
font-size: 250%;
}
}
@media (max-width: 767px) {
.carousel-caption h1 {
font-size: 130%;
}
}
.carousel-caption h1 strong {
font-weight: 700;
font-style: normal;
line-height: 100%;
font-size: 130%;
}
.carousel-caption h1 em {
font-weight: 700;
font-style: normal;
line-height: 100%;
font-size: 85%;
}
.carousel-caption p {
line-height: 100%;
color: #ffffff;
font-weight: 400;
}
.carousel-caption p a.action-button {
background-color: #037d42;
color: #fff;
border-radius: 8px;
padding: 10px 20px;
font-size: 25px;
margin-top: 10px;
}
.carousel-caption.left {
text-align: left;
padding-right: 33%;
}
.carousel-caption.right {
text-align: right;
padding-left: 33%;
}
@media (min-width: 1200px) {
}
@media (max-width: 1199px) {
.carousel-caption p {
top: 25%;
font-size: 120%;
}
}
@media (max-width: 767px) {
.carousel-caption p.description {
display: none;
}
}
@media (min-width: 1200px) {
.carousel-caption {
top: 5%;
bottom: auto;
}
.carousel-caption.left {
padding-right: 15%;
}
.carousel-caption.right {
padding-left: 15%;
}
.carousel-caption p {
font-size: 150%;
}
}
@media (min-width: 1500px) {
.carousel-caption {
top: 15%;
}
.carousel-caption.left {
padding-right: 33%;
}
.carousel-caption.right {
padding-left: 33%;
}
}
@media (max-width: 1199px) {
.carousel-caption {
top: 0%;
bottom: auto;
}
.carousel-caption.left {
padding-right: 15%;
}
.carousel-caption.right {
padding-left: 15%;
}
}
@media (max-width: 991px) {
.carousel-caption {
top: 0%;
bottom: auto;
}
.carousel-caption.left {
padding-right: 5%;
}
.carousel-caption.right {
padding-left: 5%;
}
.carousel-caption h1 {
font-size: 150%;
}
.carousel-caption p a.action-button {
font-size: 18px;
padding: 5px 10px;
border-radius: 5px;
}
}
@media (max-width: 767px) {
.carousel-caption {
bottom: 5%;
top: auto;
}
.carousel-caption.left {
text-align: center;
padding: 0;
}
.carousel-caption.right {
text-align: center;
padding: 0;
}
.carousel-caption p a.action-button {
margin-top: 0px;
}
}
#social-feeds > div {
}
#emb-youtube div {
margin-bottom: 20px;
}
@media (min-width: 992px) {
#emb-youtube {
}
}
@media (max-width: 991px) {
#social-feeds > div {
clear: both;
padding-bottom: 20px;
}
#emb-youtube {
}
}
@media (max-width: 767px) {
#emb-youtube {
}
}
/* Media lists
==================================================== */
.media-object-default {
padding-top: 15px;
}
a.media {
color: #604c3e;
font-size: 85%;
padding-top: 15px;
}
a.media .media-left {
padding-right: 25px;
padding-bottom: 25px;
}
a.media .media-object {
border: 4px solid #ffffff;
width: 80px;
height: 80px;
}
@media (max-width: 767px) {
a.media .media-object {
height: 60px;
width: 60px;
border-width: 2px;
}
}
a.media .media-heading {
color: #3e9591;
outline: 0 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.media:hover .media-heading {
color: #2f716e;
}
/* Map section
==================================================== */
.map-section {
background: url(../images/africa-panorama.jpg);
background-position: 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
box-sizing: content-box;
background-attachment: fixed;
padding-top: 120px;
padding-bottom: 120px;
color: #ffffff;
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
}
@media (max-width: 1024px) {
.map-section {
background-attachment: scroll;
padding-top: 50px;
padding-bottom: 50px;
}
}
.map-section h4,
.map-section .lead {
color: #ffffff;
opacity: 1;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}
.map-section .activity-header {
color: #ffffff;
border-bottom-color: rgba(255, 255, 255, 0.4);
}
.map-section .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
width: 100%;
z-index: 3000;
}
.wide {
padding: 8px 15px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.5);
display: inline-block;
margin-bottom: 20px;
outline: 0 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.wide:hover {
cursor: pointer;
background-color: #ffffff;
}
.media-responsive img {
display: block;
width: 100%;
margin-bottom: 10px;
border: 4px solid #ffffff;
}
@media (max-width: 767px) {
.media-responsive img {
display: none;
}
}
/* Blog summary
==================================================== */
.blog-summary {
padding: 8px 15px;
border-bottom: 1px dotted #aba8a6;
background-color: rgba(255, 255, 255, 0);
display: block;
margin-top: 20px;
outline: 0 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
clear: both;
}
.blog-summary > span {
color: #604c3e;
font-size: 85%;
line-height: 110%;
display: block;
}
.blog-summary > span img {
width: 60px;
float: left;
margin-right: 20px;
border-radius: 30px;
}
.blog-summary > span > span {
}
.blog-summary .list-inline {
color: #aba8a6;
font-size: 75%;
line-height: 110%;
margin-top: 10px;
margin-bottom: 5px;
}
.blog-summary:hover {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.5);
}
/* -- Map
================================================== */
#chartdiv {
overflow: hidden;
}
@media (max-width: 767px) {
#chartdiv {
width: 100%;
height: 250px;
padding-bottom: 20px;
}
}
@media (min-width: 768px) {
#chartdiv {
width: 100%;
height: 350px;
}
}
@media (min-width: 992px) {
#chartdiv {
width: 100%;
height: 375px;
}
}
@media (min-width: 1200px) {
#chartdiv {
width: 100%;
height: 350px;
}
}
.where-we-work-btn {
margin-bottom: 30px;
}
/* News filter area
==================================================== */
#container {
margin: 0 -10px 30px;
}
.grid-item {
overflow: hidden;
width: 33.33%;
padding: 0px 10px 20px 10px;
outline: 0 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
@media (max-width: 767px) {
.grid-item {
width: 100%;
}
}
.grid-item .update {
display: block;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.25);
border-radius: 2px;
color: #221b16;
border-bottom: 1px solid #037d42;
margin-top: 15px;
padding-bottom: 15px;
outline: 0 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.grid-item .update h5 {
color: #037d42;
padding: 0 15px;
}
.grid-item .update p {
font-size: 85%;
color: #604c3e;
padding: 0 15px;
}
.grid-item .update span {
display: block;
overflow: hidden;
height: 150px;
outline: 0 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.grid-item .update span img {
background-position: center center;
background-clip: border-box;
width: 100%;
height: auto;
position: relative;
left: 0;
top: 0;
border-radius: 0px;
outline: 0 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.grid-item .update .type,
.grid-item .update .date {
display: inline-block;
font-size: 65%;
color: #aba8a6;
margin: -5px 0 5px;
font-family: "Roboto Condensed", "Arial Narrow Bold", sans-serif;
}
.grid-item .update .date {
float: left;
}
.grid-item .update .type {
float: right;
}
.grid-item .update:hover {
background-color: #ffffff;
}
.grid-item .update:hover h5 {
color: #037d42;
}
.grid-item .update:hover span img {
width: 120%;
position: relative;
left: -10%;
top: -10%;
}
.is-checked {
background-color: #2f716e;
border-color: #2f716e;
}
.filters-button-group > .btn {
margin-bottom: 5px;
}
/* Custom button colours
==================================================== */
.btn-black {
background-color: #202023;
color: #FFFFFF;
}
.btn-black:hover {
background-color: #606060;
}
.btn-blue {
background-color: #00ADEF;
color: #FFFFFF;
}
.btn-blue:hover {
background-color: #0079A7;
}
/* footer
==================================================== */
footer {
border-top: 1px solid #d85d00;
color: #aba8a6;
padding: 40px 0 40px;
font-size: 85%;
font-family: "Roboto Condensed", "Arial Narrow Bold", sans-serif;
}
footer img {
height: 50px;
height: auto;
width: auto;
margin-bottom: 30px;
}
/* Follow box
==================================================== */
.follow-box {
background-color: #037d42;
border: 0;
border-radius: 2px;
color: #ffffff;
}
.follow-box .input-group {
margin-bottom: 10px;
}
.follow-box h5 {
color: #ffffff;
margin-top: 0;
}
.follow-box h5 span {
display: none;
}
.follow-box .list-inline {
margin-left: 0;
width: 100%;
}
.follow-box .list-inline li {
width: 18.5%;
margin-left: 0;
margin-right: 0;
padding: 0;
margin-bottom: 10px;
}
@media (min-width: 600px) {
.follow-box .list-inline li {
width: 19.3%;
}
}
@media (min-width: 768px) {
.follow-box .list-inline li {
width: 19.5%;
}
}
@media (min-width: 992px) {
.follow-box .list-inline li {
width: 18.7%;
}
}
@media (min-width: 1200px) {
.follow-box .list-inline li {
width: 18.4%;
}
}
@media (min-width: 1500px) {
.follow-box .list-inline li {
width: 18.7%;
}
}