/* 
    Created on : 15 Jan 2024, 11:40:26
    Author     : ewan.stacey
*/

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

h1 b {
    font-weight:400;
    text-shadow: none;
}

h1,h2 {
    font-family: "Formata","Tahoma","Arial",sans-serif;
    letter-spacing: 0.004em;
    font-size: 3.25em;
    line-height: 1.25;
    font-weight: 300;
    margin: 0 0 1rem;
    transition: font-size 250ms linear,opacity 250ms linear;
}

body {
    color: white;
    font-family: "Work Sans","Arial",sans-serif;
    font-size: 1.35em;
    line-height: 1.4;
}

p {
    font-size: 1.5em;
}

.inner-well {
    background-color: #99bbd7;
    border: 0px solid;
    border-radius: 0px;
}

.inner-well-pale {
    background-color: #dee8f2;
}

.inner-well-dark {
    background-color: #568ebd;
}

.inner-well-white {
    background-color: #fff;
}

.green-box {
    background-color: #91bfc5;
    font-size: 1.5em;
    color: #fdfdfd;
    height: 100%
}

.blue-box {
    background-color: #66d0f0;
    font-size: 1.5em;
    color: #fdfdfd;
    height: 100%
}

.grey-box {
    background-color: #fff;
    font-size: 1.5em;
    color: #fdfdfd;
    height: 100%
}

.equal-box {
    height: 50%;
}

.equal-box-image {
    height: 50%;
}

.quoteBox {
    padding: 2em;
}

.blueText {
    color: #366a82 !important;
}

.page-header {
    text-shadow: 0 0 0.75em rgba(0,0,0,0.7),0 0 0.5em rgba(0,0,0,0.25);
    border-bottom: 0px;
}

.logo {
    width: 148px;
    height: 225px;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 40px;
}

img {
    width: 100%;
}

.donate-button {
    background: #ff9c00;
    transition: background-color 0.3s ease;
    font-family: "Formata","Tahoma","Arial",sans-serif;
    position: relative;
    display: inline-block;
    padding: 0.7em 1em;
    margin: 0 0.25em 1em 0;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgba(100,100,100,0.1);
    line-height: normal;
    vertical-align: middle;
    border-radius: 3px;
    text-transform: uppercase;
    cursor: pointer;
    color: black;
    text-shadow: none;
    font-size: 1.2em;
    font-weight: 500;
}

.donate-button-yellow {
    background: #f8df82;
    transition: background-color 0.3s ease;
    font-family: "Formata","Tahoma","Arial",sans-serif;
    position: relative;
    display: inline-block;
    padding: 0.7em 1em;
    margin: 0 0.25em 1em 0;
    text-align: center;
    text-decoration: none;
    border: 1px solid rgba(100,100,100,0.1);
    line-height: normal;
    vertical-align: middle;
    border-radius: 3px;
    text-transform: uppercase;
    cursor: pointer;
    color: black;
    text-shadow: none;
    font-size: 1.2em;
    font-weight: 500;
    width: 400px;
    max-width: 100%;
    border-radius: 1em;
}

.hover-link {
    color: #fff;
    text-decoration: underline;
    font-size: 1.35em;
    font-family: "Work Sans","Arial",sans-serif;
    font-weight: 400;
    line-height: 1.4;
}

.donate-button:hover {
    background: #d98600;
}

.blue-hover-link {
    text-decoration: underline;
    font-size: 1.35em;
    font-family: "Work Sans","Arial",sans-serif;
    font-weight: 400;
    line-height: 1.4;
}

.footer {
    clear: both;
    background: #000e29;
    color:#999;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

.footer-button {
    color: #fff;
    text-decoration: none;
}

.footer-button:hover {
    color: #fff;
    text-decoration: underline;
}

.banner_image {
    position: absolute;
    animation: fadeIn 2s ease forwards;
    z-index: -1;
    min-width: 100%;
    top: -15vw;
    left: 0;
    right: 0;
}

.quotePicture {
    width: 33.33333%;
}

.second-section-text {
    color: #31597d;
}

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

.no-space-bottom {
    margin-bottom: 0em;
    padding-bottom: 0em;
}

.no-space-top {
    margin-top: 0em;
    padding-top: 0em;
}

.square-corners-well {
    border-radius: 0px;
}

@media(max-width: 1500px) {
    .headerBirdImage {
        display: none;
    }
    .bto-top-logo {
        display: none;
    }
}

@media (min-width: 1200px){
    .pictureQuote {
        transform: translateY(50%);
    }
}

@media (min-width: 992px){
    .equal-box {
        height: 75%;
    }
    .quotePicture {
        width: 100%;
    }
}

@media(max-width: 700px) {
    .equal-box {
        height: 60%;
    }
}