@font-face {
    font-family: 'Ink Free';
    src: url('InkFree.eot');
    src: url('../Fonts/InkFree.eot?#iefix') format('embedded-opentype'), url('../Fonts/InkFree.woff2') format('woff2'), url('../Fonts/InkFree.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Volte Rounded';
    src: url('../Fonts/VolteRounded-Regular.eot');
    src: url('../Fonts/VolteRounded-Regular.eot?#iefix') format('embedded-opentype'), url('../Fonts/VolteRounded-Regular.woff2') format('woff2'), url('../Fonts/VolteRounded-Regular.woff') format('woff'), url('../Fonts/VolteRounded-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Volte Rounded';
    src: url('../Fonts/VolteRounded-Bold.eot');
    src: url('../Fonts/VolteRounded-Bold.eot?#iefix') format('embedded-opentype'), url('../Fonts/VolteRounded-Bold.woff2') format('woff2'), url('../Fonts/VolteRounded-Bold.woff') format('woff'), url('../Fonts/VolteRounded-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Volte Rounded';
    src: url('../Fonts/VolteRounded-Light.eot');
    src: url('../Fonts/VolteRounded-Light.eot?#iefix') format('embedded-opentype'), url('../Fonts/VolteRounded-Light.woff2') format('woff2'), url('../Fonts/VolteRounded-Light.woff') format('woff'), url('../Fonts/VolteRounded-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

body {
    font-family: 'Volte Rounded', sans-serif;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0px;
    padding: 0px;
}

#body {
    margin: 0 auto;
    padding: 0px;
    font-size: 16px;
}

.content-block {
    margin: 0 auto;
    max-width: 1280px;
}

.content-block-v2 {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1200px;
}

.content-block-v2 h2 {
    font-size: 24px;
    line-height: 24px;
    font-weight: normal;
    font-family: 'Volte Rounded';
    text-align: left;
    margin-bottom: 20px;
    padding-left: 0px;
}

header {
    background-color: #000;
}

nav {
    background-color: #000;
}

#nav {
    max-width: 1280px;
    margin: 0 auto;
    background-color: #000;
    padding-top: 35px;
    padding-bottom: 37px;
}

#hidden-header-pull-down {
    display: none;
}

a, a:link, a:visited, a:hover {
    color: #787878;
    text-decoration: underline;
}

a:hover {
    color: #000;
}

#logo, #logo:link, #logo:visited, #logo:hover {
    float: left;
    margin-left: 40px;
    width: 138.775px;
    height: 48.863px;
    background-image: url("images/Common_Goal_Logo.svg");
    text-decoration: none;
    background-size: 100%;
    margin-top: -8px;
}

    #logo:hover {
        opacity: 0.8;
    }

#menu {
    margin: 0 auto;
    text-align: center;
    padding: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 204px;
    background-color: #000;
}

    #menu li {
        display: inline;
        list-style: none;
        margin-left: 30px;
        margin-right: 30px;
    }

        #menu li a, #menu li a:link, #menu li a:visited, #menu li a:hover, .login-button:link, .login-button:visited, .login-button:hover {
            color: #fff;
            text-decoration: none;
            line-height: 16px;
            text-transform: uppercase;
            font-size: 16.5px;
        }

            #menu li a:hover, #menu li a.selected, #menu li a:link.selected, #menu li a:visited.selected, .login-button:hover {
                font-weight: bold;
            }


#nav a.nav-join, #nav a.nav-join:link, #nav a.nav-join:visited, #nav a.nav-join:hover {
    border-radius: 4px;
    color: #fff;
    padding-top: 8px;
    padding-bottom: 8px;
    display: inline-block;
    width: 111px;
    text-decoration: none;
    text-align: center;
    line-height: 16px;
    font-size: 16.5px;
    -webkit-appearance: none;
    background: #4FA280; /* Old browsers */
    background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
    border-radius: 20px;
    text-transform: uppercase;
}

#nav li a.nav-join:hover {
    font-weight: bold;
}

.nav-join-mobile {
    display: none !important;
}

.flags {
    float: right;
    margin-right: 40px;
}

.flags a, .flags a:link, .flags a:visited, .flags a:hover {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-left: 23px;
}

.lang-english {
    background-image: url("images/flags/en-gb.svg") !important;
}

.lang-spanish {
    background-image: url("images/flags/es-es.svg") !important;
}

#dropbtn {
    height: 40px;
    width: 40px;
    border-radius: 40px;
    border: none;
    margin-top: -10px;
    margin-left: 20px;
    margin-right: 40px;
    background-color: #fff;
    background-size: 100%;
}

.dropdown {
    float: right;
    width: 100px;
    margin-left: 100px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    z-index: 1;
    border-radius: 4px;
    margin-left: -70px;
    border: 1px solid #000;
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        color: #000;
        font-weight: 600;
        background-color: #fff;
        text-transform: uppercase;
        font-weight: normal;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {
            font-weight: bold;
        }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    opacity: 0.6;
}

.dropdown-arrow {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #EDF9F5;
    margin-left: 95px;
}

.hamburger, .hamburger:link, .hamburger:visited, .hamburger:hover {
    display: block;
    background-image: url("mobile-images/Group 8.svg");
    float: left;
    margin-left: 40px;
    margin-top: 10px;
    width: 32px;
    height: 21px;
    background-size: 100%;
    display: none;
}

    .hamburger:hover {
        opacity: 0.6;
    }

#mobile-menu {
    position: fixed;
    background-color: #fff;
    z-index: 99999;
    width: 100%;
    padding: 40px;
    font-size: 24px;
    line-height: 44px;
    margin-top: -20px;
    display: none;
    height: 100%;
}

    #mobile-menu ul, #mobile-menu li {
        padding: 0px;
        margin: 0px;
        list-style-type: none;
    }

    #mobile-menu a, #mobile-menu a:link, #mobile-menu a:visited, #mobile-menu a:hover {
        color: #000;
        font-weight: bold;
        text-decoration: none;
    }

        #mobile-menu a:hover {
            color: #3AAE82;
        }

.mobile-join, .mobile-join:link, .mobile-join:visited, .mobile-join:hover {
    color: #3AAE82 !important;
}

    .mobile-join:hover {
        color: #000 !important;
    }

.mobile-menu-cross, .mobile-menu-cross:link, .mobile-menu-cross:visited, .mobile-menu-cross:hover {
    font-weight: normal !important;
}

.mobile-menu-buttons {
    display: flex;
    padding-right: 40px;
}

#mobile-menu .button {
    flex-basis: 100%; /** change back to 50% if contact button comes back in*/
    margin-right: 40px;
    font-size: 14px;
    line-height: 16px;
    padding-top: 22px;
    padding-bottom: 22px;
    max-width: 70px;
    margin: 0 auto;
    font-size: 16px;
    color: #fff !important;
    text-align: center;
    border: none;
    border-radius: 30px;
    padding: 12px 30px;
    font-weight: normal !important;
    -webkit-appearance: none;
    background: #4FA280; /* Old browsers */
    background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
    margin-left: 0px;
}

    #mobile-menu .button:hover {
        background-color: #3AAE82;
        color: #fff !important;
    }

h1 {
    margin: 0px;
    padding: 0px;
    text-transform: uppercase;
}

h2 {
    text-align: center;
    font-size: 32px;
    color: #000;
    line-height: 40px;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    padding-left: 40px;
    padding-right: 40px;
    text-transform: uppercase;
}

h3 {
    text-align: center;
    font-size: 20px;
    line-height: 20px;
    padding: 0px;
    margin: 0px;
    text-transform: uppercase;
}

input[type="submit"] {
    -webkit-appearance: none;
}

#right-nav {
    float: right;
    margin-right: 40px;
    margin-top: 5px;
}

    #right-nav .button, #right-nav .button:link, #right-nav .button:visited, #right-nav .button:hover {
        display: inline-block;
        width: 90px;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 600;
        padding: 8px 0px;
    }

        #right-nav .button:hover {
            background-color: #f0faf7;
        }

#video {
    width: 100%;
    height: 400px;
    background-color: #46b9ab;
    margin-bottom: 20px;
    text-align: center;
}

a.button, a.button:link, a.button:visited, a.button:hover {
    color: #fff;
    background-color: #000;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: normal;
    border-radius: 30px;
    padding: 8px 30px;
    font-size: 13px;
}

    a.button:hover {
        font-weight: bold;
    }

.button.alt-button, .button.alt-button:link, .button.alt-button:visited, .button.alt-button:hover {
    text-transform: uppercase;
    font-size: 13px;
    color: #fff;
    text-align: center;
    border: none;
    border-radius: 30px;
    padding: 8px 30px;
    font-weight: normal;
    -webkit-appearance: none;
    background: #4FA280; /* Old browsers */
    background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
}

    .button.alt-button:hover {
        background-color: #72d4af;
    }

a.alt2-button, a.alt2-button:link, a.alt2-button:visited, a.alt2-button:hover {
    background-color: #5b5b5b;
    color: #f5f5f5;
    font-weight: 600;
}

    a.alt2-button:hover {
        opacity: 0.8;
    }

a.alt3-button, a.alt3-button:link, a.alt3-button:visited, a.alt3-button:hover {
    background-color: #fff;
    border: 1px solid #707070;
    font-weight: normal;
    color: #707070;
}

    a.alt3-button:hover {
        opacity: 0.8;
    }


a.see-all-button, a.see-all-button:link, a.see-all-button:visited, a.see-all-button:hover {
    display: block;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    width: 180px;
    font-size: 11.5px;
    border-radius: 5px;
    padding: 8px 30px;
    font-weight: normal;
    background-color: #000;
    color: #fff;
    text-transform: uppercase;
}

.bar {
    width: 120px;
    height: 19px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 50px;
    background-image: url("images/bar.svg");
    background-size: 100%;
}

.box {
    background-color: #fff;
    border-radius: 10px;
    padding: 50px 20px 20px 20px;
}

/** responsive layout */
.row {
    display: flex;
    flex-direction: row;
}

.row.center-row {
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.col-10 {
    flex-basis: 10%;
}

.col-15 {
    flex-basis: 15%;
}


.col-18 {
    flex-basis: 18%;
}

.col-20 {
    flex-basis: 20%;
}

.col-25 {
    flex-basis: 25%;
}

.col-28 {
    flex-basis: 28%;
}

.col-30 {
    flex-basis: 30%;
}

.col-33 {
    flex-basis: 33.333333333%;
}

.col-33 {
    flex-basis: 35%;
}

.col-40 {
    flex-basis: 40%;
}

.col-45 {
    flex-basis: 45%;
}

.col-50 {
    flex-basis: 50%;
}

.col-55 {
    flex-basis: 55%;
}

.col-60 {
    flex-basis: 60%;
}

.col-80 {
    flex-basis: 80%;
}

.col-100 {
    flex-basis: 100%;
}

form .col-50, form .col-100 {
    margin-bottom: 10px;
}

.center-form, .terms-screen {
    max-width: 620px;
    margin: 0 auto;
    background-color: #fff;
    
    border-radius: 10px;
    border: double 4px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #4FA280,#3380C6 );
    background-origin: border-box;
    background-clip: content-box, border-box;
}
    .center-form .content-box, .terms-screen .content-box {
        padding-left: 70px;
        padding-right: 70px;
        padding-top: 63px;
        padding-bottom: 40px;
    }

    .center-form.invite-form {
        max-width: 340px;
        margin-top: 60px;
        padding-left: 60px;
        padding-right: 40px;
        padding-top: 47px;
    }

.col-50 .center-form {
    max-width: 460px;
}
    .col-50 .center-form .content-box {
        padding: 40px 20px;
    }

    .col-50 .center-form input[type="submit"] {
        width: 100%;
    }

.terms-container {
    padding-left: 40px;
    padding-right: 40px;
}

.terms-screen {
    margin-top: 50px;
    word-break: break-word;
}

.terms-screen h1 {
    text-align: center;
    margin-bottom: 40px;
}

.terms-screen h2 {
    font-size: 24px;
    line-height: 30px;
    text-align: left;
    padding: 0px;
}

.terms-screen h3 {
    text-align: left;
}

label {
    color: #000;
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 10px;
    display: block;
    text-transform: uppercase;
}

a.info-link, a.info-link:link, a.info-link:visited, a.info-link:hover {
    font-weight: bold;
    font-weight: 600;
    color: #fff;
    font-size: 10px;
    line-height: 10px;
    text-align: center;
    border-radius: 14px;
    height: 10px;
    width: 10px;
    padding: 2px;
    text-decoration: none;
    position: absolute;
    margin-left: 8px;
    background-color: #BFBFBF;
    text-align: center;
}

    a.info-link.info-link-no-margin {
        margin-left: -2px !important;
    }

a.info-link:hover {
    opacity: 0.6;
}

.tooltip {
    position: absolute;
    background-color: #EAEAEA;
    max-width: 302px;
    padding: 20px;
    font-weight: normal;
    text-transform: none;
    font-size: 12px;
    line-height: 14px;
    border-radius: 10px;
    -webkit-box-shadow: 6px 6px 12px 0px rgba(0,0,0,0.39);
    -moz-box-shadow: 6px 6px 12px 0px rgba(0,0,0,0.39);
    box-shadow: 6px 6px 12px 0px rgba(0,0,0,0.39);
}


input[type="text"], input[type="password"], input[type="email"], textarea {
    padding: 4px 10px;
    border-radius: 4px;
    border: 2px solid #000;
    width: 100%;
    box-sizing: border-box;
    font-family: "Asap";
    font-size: 14px;
    line-height: 20px;
    border-radius: 30px;
}

textarea
 {
    border-radius: 15px;
}
textarea {
    height: 150px;
}

.field-validation-error {
    color: #ff0300;
    font-size: 14px;
    line-height: 16px;
    display: inline-block;
    margin-top: 5px;
}

.center-form .submit-row input[type="submit"] {
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    min-width: 220px;
}

.submit-row a.button, .submit-row a.button:link, .submit-row a.button:visited, .submit-row a.button:hover {
    display: block;
    margin: 0 auto;
    min-width: 220px;
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 14px;
    line-height: 16px;
}

.center-form .col-50, .center-form .col-100 {
    margin-left: 10px;
    margin-right: 10px;
}

.center-form .col-50, .center-form .col-100 {
    margin-bottom: 20px;
}

footer {
    background-color: #000;
    padding-bottom: 50px;
    text-align: center;
    margin-top: 140px;
    padding-left: 40px;
    padding-right: 40px;
    font-weight: 500;
}

    footer .row {
        max-width: 940px;
        margin: 0 auto;
    }

    footer h4 {
        color: #fff;
        font-size: 20px;
        line-height: 20px;
        margin: 0px;
        padding: 0px;
        text-align: left;
        padding-top: 80px;
    }

    footer ul {
    }

    footer ul, footer li {
        padding: 0px;
        margin: 0px;
        list-style: none;
        text-align: left;
    }

    footer li {
        margin-top: 20px;
        opacity: 0.6;
    }

    footer a, footer a:link, footer a:visited, footer a:hover {
        color: #fff;
        text-decoration: none;
    }

    footer li a:hover {
        text-decoration: underline;
    }

.footer-social {
    text-align: left;
}

    .footer-social a, .footer-social a:link, .footer-social a:visited, .footer-social a:hover {
        text-decoration: none;
        margin-right: 18px;
    }

        .footer-social a:last-child {
            margin-right: 0px;
        }

        .footer-social a:hover {
            opacity: 0.7;
        }

    .footer-social img {
        width: 40px;
        border: none;
    }

.footer-bar {
    height: 1px;
    width: 100%;
    opacity: 0.2;
    background-color: #FFFFFF;
    box-shadow: 0 1px 20px 0 #DEDEDE;
    max-width: 960px;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 40px;
}

.footer-info {
    opacity: 0.6;
    color: #FFFFFF;
    font-family: Asap;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    margin-left: 40px;
    margin-bottom: 20px;
    font-weight: 500;
}

.footer-small-links {
    display: flex;
    opacity: 0.6;
    color: #FFFFFF;
    font-size: 12.5px;
    line-height: 20px;
    max-width: 940px;
    margin: 0 auto;
    margin-bottom: 10px;
    font-weight: 500;
    display: flex;
}

.footer-small-links a:hover {
        text-decoration: underline;
}

.footer-small-links .footer-dot {
    opacity: 0.6;
    color: #FFFFFF;
    margin-top: -5px;
    font-weight: bold;
    flex-basis: 5.9%;
}

.footer-small-links div {
    text-align: center;
}

.footer-small-links div.footer-dot {
    width: 40px;
    text-align: center;
}

a.street-football-world, a.street-football-world:link, a.street-football-world:visited, a.street-football-world:hover {
    float: left;
    display: block;
    max-width: 225px;
    width: 225px;
    height: 100px;
    background-image: url("images/streetfootball_logo.svg");
    background-size: 100%;
    padding: 0px;
    background-repeat: no-repeat;
}

    a.street-football-world:hover {
        opacity: 0.8;
    }

/** home stats */
.home-stats-section {
    background-color: #000;
    padding-top: 125px;
    padding-bottom: 75px;
    margin-top: 140px;
}

.home-stats {
    max-width: 760px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
    background-color: #000;
}

.home-stat {
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 50px;
}

.left-home-stat {
    float: left;
}

.right-home-stat {
    float: right;
}

.home-stat span {
    display: block;
    text-align: center;
    font-size: 24px;
    text-transform: uppercase;
}

.home-stat-num {
    height: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 90px;
    color: #fff;
    line-height: 90px;
    margin-top: -60px;
    font-weight: normal;
}

.home-stat-image {
    height: 150px;
    width: 180px;
    background-repeat: no-repeat;
    margin: 0 auto;
    margin-bottom: 20px;
    background-position: center top;
    background-size: auto 100%;
}

.members-stat {
    background-image: url("images/MembersStats.png");
}

.pledge-stat {
    background-position-x: 27px;
    background-image: url("images/PledgeStats.png");
}

.organisations-stat {
    background-image: url("images/NGOs.png");
}

/** testimonials ***/
.testimonials {
    margin: 0 auto;
    margin-bottom: 120px;
    max-width: 960px;
    padding-left: 20px;
    padding-right: 20px;
}

    .testimonials h2 {
        margin-top: 75px;
        text-align: left;
    }

.testimonial-item {
    margin-top: 19px;
}

.testimonial {
    font-size: 20px;
    color: #000;
    line-height: 29px;
    max-width: 340px;
    padding: 28px 60px 28px 60px;
    background-size: 100%;
    border-radius: 100px 100px 100px 0px;
    margin-bottom: 20px;
    content: "";
    -webkit-appearance: none;
    background: #4FA280; /* Old browsers */
    background: -moz-linear-gradient(left, RGB(79,162,128, 0.1) 0%, RGB(51, 128, 198, 0.1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, RGB(79,162,128, 0.1) 0%, RGB(51, 128, 198, 0.1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(79,162,128, 0.1), rgba(51, 128, 198, 0.1));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
}

.testimonial::after {
    content: " ";
    display: block;
    background-image: url("images/CG_Speech_Corner.png");
    width: 86px;
    height: 50px;
    position: absolute;
    margin-top: 27px;
    background-size: 100%;
    margin-left: -60px;
}

.login-testimonial.reset-password .testimonial{
    font-size: 16px;
}

#featured-supporters .testimonial {
    font-size: 16px;
    line-height: 24px;
    background-repeat: no-repeat;
}

#featured-supporters .testimonial-item {
    padding-right: 40px;
}

#featured-supporters-area-mobile {
    display: none;
}

.supporters-carousel {
    margin-left: 200px;
    margin-bottom: 100px;
}

.testimonial-3 {
    margin-top: -159px;
}

.testimonial-item img {
    margin-left: 20px;
    width: 75px;
    float: left;
    margin-right: 20px;
    border-radius: 75px;

    border: double 4px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #4FA280,#3380C6 );
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.testimonial-name-section {
    font-weight: bold;
    padding-top: 10px;
    float: left;
    max-width: 300px;
}

.testimonial-squiggle {
    width: 41px;
    height: 17px;
    float: left;
    background-image: url("images/Logo_swirl_small.svg");
    margin-top: -2px;
    display: none;
}

.testimonial-name {
    margin-right: 10px;
    line-height: 20px;
    text-transform: uppercase;
    font-size: 20px;
}

.testimonial-type {
    font-weight: normal;
    color: #000;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
}

.leaderboards {
    margin: 0 auto;
    max-width: 800px;
    margin-top: 80px;
    margin-bottom: 286px;
}

.leaderboard {
    max-width: 380px;
    margin: 0 auto;
    margin-right: 10px;
    margin-left: 10px;
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.05), 0 30px 30px 0 rgba(0,0,0,0.08);
    border-radius: 10px;
    padding: 60px 40px 40px 40px;
    background-color: #fff;
}

    .leaderboard table {
        width: 100%;
        margin-bottom: 20px;
    }

    .leaderboard th {
        font-size: 20px;
        line-height: 20px;
        font-weight: bold;
        max-width: 85px;
        text-align: left;
        padding-bottom: 40px;
    }

    .leaderboard .points {
        opacity: 0.4;
        font-size: 14px;
        line-height: 16px;
        text-align: right;
        padding-bottom: 40px;
    }

    .leaderboard td {
        font-size: 20px;
        line-height: 20px;
        padding-bottom: 20px;
    }

    .leaderboard p {
        text-align: center;
        font-size: 14px;
        line-height: 20px;
        opacity: 0.4;
        margin-bottom: 0px;
        padding-bottom: 0px;
    }

#leaderboards-bg {
    height: 1221px;
    width: 100%;
    position: absolute;
    background-image: url("images/BG_shape_1_members.svg");
    z-index: -1;
    background-size: cover;
    left: 0%;
    margin-top: 100px;
}

.leaderboard-points {
    font-size: 16px;
    line-height: 16px;
    opacity: 0.6;
}

.leaderboard-number-bg {
    background-color: #F8E71C;
    width: 40px;
    height: 30px;
    display: block;
    border-radius: 40px;
    text-align: center;
    padding-top: 10px;
    margin-right: 30px;
}

.leaderboard-number {
    font-size: 20px;
    line-height: 20px;
    opacity: 0.8;
}

.leaderboard-label {
    opacity: 0.8;
}

/*** members page - members section*/

#members-list-area {
    margin-bottom: 80px;
}

#members-bar {
    height: 70px;
    width: 100%;
    box-sizing: border-box;
    border: double 4px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #4FA280,#3380C6 );
    background-origin: border-box;
    background-clip: content-box, border-box;
    border-bottom: none;
    border-top: none;
}

#members-bar-content-box {
    padding-left: 58px;
    padding-right: 19px;
    background-color: #fff;
}

.members-toggle-section {
    display: inline;
}

a.members-tab, a.members-tab:link, a.members-tab:visited, a.members-tab:hover {
    font-size: 16px;
    line-height: 16px;
    color: #000;
    font-weight: normal;
    text-decoration: none;
    display: inline-block;
    padding-top: 27px;
    padding-bottom: 23px;
    margin-right: 38px;
    text-transform: uppercase;
}

    a.members-tab:hover {
        font-weight: bold;
    }

    a.members-tab.selected, a.members-tab.selected:link, a.members-tab.selected:visited {
        font-weight: bold;
    }

.members-toggle, .members-toggle:link, .members-toggle:visited, .members-toggle:hover {
    color: #000;
    border-radius: 0px 30px 30px 0px;
    text-decoration: none;
    border: none;
    background-color: #fff;
    width: 80px;
    text-align: center;
    display: inline-block;
    font-size: 14px;
    line-height: 16px;
    padding-top: 6px;
    padding-bottom: 6px;
    float: right;
    margin-top: 20px;
    text-transform: uppercase;
    border: 2px solid #3481c4;
    border-left: none;
}

    .members-toggle:last-child {
        border-radius: 30px 0px 0px 30px !important;
    }

    .members-toggle:hover {
       opacity: 0.6;
    }

    .members-toggle.selected, .members-toggle.selected:link, .members-toggle.selected:visited, .members-toggle.selected:hover {
        color: #fff;
        -webkit-appearance: none;
        background: #4FA280; /* Old browsers */
        background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
        border: none;
        padding-top: 8px;
        padding-bottom: 8px;
    }

.members-flag {
    width: 28px;
    display: block;
    height: 20px;
    background-size: 100%;
    float: right;
    margin-top: 34px;
    margin-bottom: 24px;
    margin-right: 40px;
}

.members-photo {
    width: 80px;
    height: 80px;
    margin-left: 59px;
    float: left;
    margin-top: 5px;
    border-radius: 80px;
    margin-right: 20px;
    margin-bottom: 5px;
    background-size: 100%;
}

.member-item {
    display: block;
    clear: left;
    text-decoration: none !important;
    height: 90px;
}

    .member-item:hover {
        -webkit-appearance: none;
        background: #4FA280; /* Old browsers */
        background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
    }

    .member-item.selected {
        -webkit-appearance: none;
        background: #4FA280; /* Old browsers */
        background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
    }

        .member-item.selected .members-name, .member-item:hover .members-name {
            color: #fff;
        }

        .member-item .members-name {
            font-weight: bold;
            padding-top: 27px;
            color: #000;
            font-size: 20px;
            line-height: 20px;
            text-transform: uppercase;
        }

#business-list .member-item .members-name {
    padding-top: 36px;
}

    .member-item .member-club {
        font-size: 14px;
        line-height: 16px;
        font-weight: normal;
        padding-top: 10px;
    }

.member-item.selected .member-club, .member-item:hover .member-club {
    color: #fff;
}

#members-list, #business-list {
    height: 640px;
    overflow-y: scroll;
    border: double 4px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #4FA280,#3380C6 );
    background-origin: border-box;
    background-clip: content-box, border-box;
}

#business-list {
    display: none;
}

.member-arrow {
    display: none;
    width: 20px;
    background-color: #3AAE82;
    height: 2px;
    width: 15px;
    float: right;
    margin-top: -47px;
    margin-right: -70px;
}

.member-arrow-head {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #3AAE82;
    margin-top: -7px;
    margin-left: 15px;
}


#member-supported-organisations {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 16px;
    opacity: 0.4;
}

#member-profile {
    padding-top: 35px;
    overflow-y: scroll;
    z-index: 9000;
}

.member-profile-arrow, #member-profile-name {
   display: none;
}

#member-profile-name {
    font-weight: bold;
    font-size: 16px;
    margin-left: 20px;
    margin-bottom: 40px;
    float: left;
    margin-top: -9px;
}

.member-profile-arrow {
    display: none;
    width: 20px;
    background-color: #3AAE82;
    height: 2px;
    width: 20px;
    margin-left: 40px;
    float: left;
}

.member-profile-arrow:hover {
    opacity: 0.6;
}

.member-profile-arrow-head {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #3AAE82;
    margin-top: -7px;
    margin-left: 0px;
}

#member-quote-area {
    margin: 0 auto;
    display: table;
    margin-top: 40px;
    width: 480px;
    padding: 0px;
}

#member-quote {
    font-size: 16px;
    line-height: 24px;
    padding: 30px 40px 30px 40px;
    display: table-cell;
    vertical-align: middle;
    border-radius: 0px 100px 100px 100px;
    content: "";
    -webkit-appearance: none;
    background: #4FA280; /* Old browsers */
    background: -moz-linear-gradient(left, RGB(79,162,128, 0.1) 0%, RGB(51, 128, 198, 0.1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, RGB(79,162,128, 0.1) 0%, RGB(51, 128, 198, 0.1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(79,162,128, 0.1), rgba(51, 128, 198, 0.1));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
}

    #member-quote::before {
        content: " ";
        display: block;
        background-image: url("images/CG_Speech_Corner.png");
        width: 86px;
        height: 55px;
        position: absolute;
        background-size: 100%;
        margin-left: -40px;
        margin-top: -82px;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
    }

#member-card, #member-card-area {
    width: 161px !important;
    background-size: 100%;
    border-radius: 5px;
}

#member-card-area {
    padding-right: 20px;
}

/*** REMOVE WHEN GOING BACK TO CAROUSEL ***/
#member-card-area {
    margin: 0 auto !important;
}

#member-carousel {
    margin: 0 auto !important;
}

/*** END OF REMOVE SECTION*/

#member-card {
    height: 233px;
    box-shadow: -1px 18px 25px 4px rgba(0,0,0,0.05);
}

#member-video {
    height: 240px;
    width: 460px !important;
    margin-top: -20px;
}

    #member-video iframe {
        min-height: 300px;
        width: 460px;
    }

#member-card {
    margin: 0 auto;
}

#member-club {
    font-size: 14px;
    line-height: 16px;
    opacity: 0.4;
    padding-top: 30px;
    text-align: center;
}

#member-carousel {
    margin-left: 200px;
    width: 460px;
}

#supported-organisation-logos {
    text-align: center;
    padding-top: 20px;
}

    #supported-organisation-logos img {
        display: inline-block;
        margin-right: 10px;
        margin-left: 10px;
    }

/** mailing list **/
.mailing-list {
    margin-top: 20px;
    color: #d4d4d4;
    text-align: left;
    margin-bottom: 40px;
}

    .mailing-list input[type="text"] {
        background-color: #787878;
        border-radius: 4px 0px 0px 4px;
        border-right: none;
        width: 100px;
        color: #d4d4d4;
        border: none;
        height: 20px;
        padding-top: 16px;
        padding-bottom: 16px;
        box-sizing: content-box;
    }

    .mailing-list input[type="submit"] {
        border-radius: 0px 4px 4px 0px;
        background-color: #cbd1cf;
        color: #fff;
        font-size: 14px;
        line-height: 16px;
        margin-left: -5px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 18.5px;
        padding-bottom: 17.5px;
        max-width: 120px;
    }

    .mailing-list ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: #B3B3B3;
        text-transform: uppercase;
    }

    .mailing-list ::-moz-placeholder { /* Firefox 19+ */
        color: #B3B3B3;
        text-transform: uppercase;
    }

    .mailing-list :-ms-input-placeholder { /* IE 10+ */
        color: #B3B3B3;
        text-transform: uppercase;
    }

    :-moz-placeholder { /* Firefox 18- */
        text-transform: uppercase;
    }

    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        text-transform: uppercase;
    }

    .mailing-list ::-moz-placeholder { /* Firefox 19+ */
        text-transform: uppercase;
    }

    .mailing-list :-ms-input-placeholder { /* IE 10+ */
        text-transform: uppercase;
    }

    .mailing-list :-moz-placeholder { /* Firefox 18- */
        text-transform: uppercase;
    }

/** hero shots v2 */
.hero-shot-v2 {
    width: 100%;
    height: 116px;
    background-size: cover;
    clear: right;
    padding-top: 420px;
    background-position: center center;
}

    .hero-shot-v2 h1, .hero-shot-v2 h2 {
        color: #fff;
        font-family: 'Volte Rounded';
        text-align: left;
        margin: 0px;
        padding: 0px;
    }

    .hero-shot-v2 h1 {
        font-size: 48px;
        line-height: 48px;
        font-weight: bold;
    }

    .hero-shot-v2 h2 {
        font-size: 36px;
        line-height: 36px;
        font-weight: normal;
    }

.hero-shot-v2-text {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}

.hero-shot-bar-v2 {
    background-image: url("images/blackgradientlarge@2x.png");
    width: 100%;
    height: 170px;
    background-repeat: repeat-x;
    margin-top: -170px;
}

/** hero shots **/
.hero-shot {
    height: 550px;
    width: 100%;
    background-color: rgba(0,0,0,0.2);
    background: linear-gradient(270deg, rgba(0,0,0,0.17) 0%, rgba(248,231,28,0.62) 100%);
    margin-bottom: 100px;
    background-size: cover;
    clear: right;
}

    .hero-shot h1 {
        color: #fff;
        padding-top: 140px;
        line-height: 40px;
        font-weight: bold;
        font-size: 35px;
        margin-bottom: 10px;
        max-width: 460px;
        margin-left: 200px;
        text-transform: uppercase;
    }

        .hero-shot h1.portal-heading {
            text-align: center;
            margin-left: 0px;
            max-width: none;
        }

    .hero-shot p {
        color: #FFFFFF;
        font-size: 20px;
        line-height: 30px;
        margin-left: 200px;
        text-transform: uppercase;
        max-width: 460px;
    }

.about-page {
    background-image: url("images/headers/About Page/Header_Image_About.jpg");
}

.members-page {
    background-image: url('images/headers/Member Page/Header_image_Members.jpg');
    margin-bottom: 0px;
}

.join-page {
    background-image: url('images/headers/Join Now Page/Header_image_Join.jpg');
    height: 551px;
}

.donate-page {
    background-image: url('images/headers/Donate Page/Common_Goal_Donate_Header.jpg');
    height: 550px;
}

.down-arrow {
    margin-top: -140px;
    position: absolute;
    width: 80px;
    height: 80px;
    background-image: url("images/Down_button.svg");
    left: 50%;
    margin-left: -40px;
}

/*** about page ****/

.about-intro {
    margin: 0 auto;
    max-width: 1120px;
    margin-bottom: 140px;
    color: #000000;
    font-size: 16px;
    line-height: 24px;
}

    .about-intro .col-50 {
        padding-left: 90px;
        padding-right: 90px;
    }

#about-background-1, #about-background-2 {
    background-image: url("images/BG_shape_1_about.svg");
    width: 100%;
    height: 895px;
    position: absolute;
    background-size: cover;
    background-position: center top;
    right: 0%;
    margin-left: -640px;
    margin-top: -100px;
    z-index: -2;
    background-repeat: no-repeat;
}

#about-background-2 {
    margin-top: 143px;
    background-image: url("images/BG_shape_2_about.svg");
    height: 1252px;
    width: 100%;
    left: 0%;
    margin-left: 0px;
}

/** how it works */
#how-it-works {
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 1020px;
    margin-top: 80px;
}

.how-it-works-arrow {
    background-color: #fff;
    width: 80px;
    height: 80px;
    position: absolute;
    margin-top: 100px;
    margin-left: -40px;
}

.arrow-right {
    background-color: #4FCA9B;
    width: 20px;
    height: 2px;
    margin: 39px auto;
}

.arrow-right .arrowhead {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #4FCA9B;
    margin-left: 15px;
    position: absolute;
    margin-top: -6px;
}

.how-it-works-container {
    margin: 0 auto;
    max-width: 300px;
    max-height: 243px;
    border: 2px solid #F0F3F6;
    border-radius: 10px;
    height: 280px;
    padding-top: 37px;
    margin-bottom: 60px;
}

.how-it-works-graphic {
    height: 170px;
    width: 200px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: top center;
    margin-bottom: 20px;
    background-size: 100%;
}

.how-it-works-collective {
    background-image: url('images/Members.png');
    background-position: center center;
}

.how-it-works-fund {
    background-image: url('images/Central Fund.png');
    width: 180px;
}

.how-it-works-ngo {
    background-image: url('images/Footbal NGO.png');
    width: 160px;
}

#how-it-works p {
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.goals {
    margin: 0 auto;
    max-width: 1000px;
    padding-left: 40px;
    padding-right: 40px;
    display: flex;
    flex-wrap: wrap;
}

.goal {
    background-color: #f5f9fe;
    color: #48494b;
    border-radius: 20px;
    padding-right: 20px;
    margin: 0 auto;
    margin-bottom: 20px;
}

    .goal span {
        display: inline-block;
        color: #fff;
        text-align: center;
        padding: 10px;
        border-radius: 20px 0px 0px 20px;
        margin-right: 20px;
        font-weight: 600;
    }

.goal-1 span {
    background-color: #4ca146;
}

.goal-2 span {
    background-color: #c7212f;
}

.goal-3 span {
    background-color: #ef402d;
}

.goal-4 span {
    background-color: #a31d44;
}

.goal-5 span {
    background-color: #dd1767;
}

.goal-6 span {
    background-color: #146a9f;
}

/** about featured content */
.about-container {
    height: 900px;
}

#about-featured {
    margin: 0 auto;
    max-width: 1070px;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 205px;
}

#about-subheader {
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    opacity: 0.8;
    margin-top: 10px;
    padding-bottom: 120px;
}

#about-featured h2 {
    margin-bottom: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
}

#about-featured .slick-prev.slick-arrow, #about-featured .slick-next.slick-arrow {
    display: block !important;
    margin-top: -935px !important;
    right: 0px;
    position: absolute;
    margin-right: 390px !important;
}

#about-featured .slick-list {
    padding: 0 0 0 0 !important;
}

#about-featured .slick-prev.slick-arrow {
    margin-top: -35px !important;
    margin-right: 490px !important;
}

#about-featured .about-col-50:first-child {
    padding-right: 50px;
    flex-basis: 40%;
}

#about-featured .about-col-50:last-child {
    padding-left: 50px;
    flex-basis: 60%;
}

.about-image {
    width: 100%;
    height: 360px;
    margin-top: -5px;
    margin-bottom: -45px;
    background-size: cover;
}

a.button-360, a.button-360:link, a.button-360:visited, a.button-360:hover {
    display: block;
    background-image: url("images/360.png");
    width: 80px;
    height: 80px;
    background-size: 100%;
    margin: 0 auto;
    margin-top: -220px;
    margin-bottom: 115px;
}

a.button-360:hover {
    opacity: 0.9;
}

#about-featured .testimonial-item {
    margin-top: 0px;
}

#about-featured .testimonial {
    max-width: 214px;
    font-size: 16px;
    line-height: 24px;
    padding-left: 44px;
    padding-right: 42px;
    padding-top: 31px;
    content: "";
    -webkit-appearance: none;
    background: #4FA280; /* Old browsers */
    background: -moz-linear-gradient(left, RGB(79,162,128, 0.1) 0%, RGB(51, 128, 198, 0.1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, RGB(79,162,128, 0.1) 0%, RGB(51, 128, 198, 0.1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(79,162,128, 0.1), rgba(51, 128, 198, 0.1));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
}

#about-featured .testimonial:after {
    margin-left: -44px;
}

#about-featured p {
    opacity: 0.6;
    line-height: 24px;
}

#about-featured h3 {
    text-align: left;
}

#about-featured h4 {
    font-weight: normal;
}

.about-stat-row .col-50:first-child {
    padding-left: 14px;
    padding-right: 19px;
}

.about-stat {
    width: 110px;
    border-radius: 10px;
    padding: 20px 15px;
    min-height: 180px;
    content: "";
    -webkit-appearance: none;
    background: #4FA280; /* Old browsers */
    background: -moz-linear-gradient(left, RGB(79,162,128, 0.1) 0%, RGB(51, 128, 198, 0.1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, RGB(79,162,128, 0.1) 0%, RGB(51, 128, 198, 0.1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(79,162,128, 0.1), rgba(51, 128, 198, 0.1));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
}

.about-stat-number {
    font-size: 40px;
    font-weight: bold;
    opacity: 0.8;
}

.about-stat-details {
    opacity: 0.6;
    font-size: 16px;
}

.about-contact {
    margin-bottom: 40px;
}

/*** about page core team*/
#core-team-bg {
    background-image: url('images/BG_shape_3_about.svg');
    width: 100%;
    height: 885px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 100px;
    z-index: -1;
}

.team {
    padding-left: 40px;
    padding-right: 40px;
    max-width: 940px;
    margin: 0 auto;
    margin-bottom: 200px;
}

.team .row {
    flex-wrap: wrap;
}

.team .col-25 {
    margin-top: 40px;
}

.job-title {
    text-align: center;
    opacity: 0.4;
    font-size: 14px;
    line-height: 18px;
    padding-top: 5px;
}

.bio-image {
    height: 169px;
    width: 169px;
    margin: 0 auto;
    border-radius: 169px;
    border: double 4px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #4FA280,#3380C6 );
    background-origin: border-box;
    background-clip: content-box, border-box;
}
.bio-image-file {
    height: 169px;
    width: 169px;
    background-size: cover;
    border-radius: 169px;
}

.team.logos .bio-image {
    margin-bottom: 20px;
}

.bio-i, .bio-i:link, .bio-i:visited, .bio-i:hover {
    font-weight: bold;
    color: #fff;
    font-size: 20px;
    text-align: center;
    border-radius: 32px;
    height: 29px;
    width: 32px;
    margin: 0 auto;
    margin-top: -16px;
    padding-top: 3px;
    margin-bottom: 20px;
    text-decoration: none;
    display: block;
    -webkit-appearance: none;
    background: #4FA280; /* Old browsers */
    background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
}

    .bio-i:hover {
        opacity: 0.8;
    }

.ui-tooltip, .bio {
    border: double 4px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #4FA280,#3380C6 );
    background-origin: border-box;
    background-clip: content-box, border-box;
    -webkit-box-shadow: 0px 13px 29px -1px rgba(0,0,0,0.19);
    -moz-box-shadow: 0px 13px 29px -1px rgba(0,0,0,0.19);
    box-shadow: 0px 13px 29px -1px rgba(0,0,0,0.19);
    max-width: 400px;
    border-radius: 10px;
    padding: 2px;
}

.bio, .ui-tooltip {
    position: absolute;
    margin-top: 20px;
    display: none;
    margin-right: 20px;
    z-index: 99999;
}

.info-bubble {
    margin-top: 0px;
}

.bio-text, .ui-tooltip-content {
    color: #000;
    font-size: 16px;
    line-height: 20px;
    font-style: normal;
    font-weight: normal;
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
}

.ui-tooltip-content {
    padding: 20px;
}

.bio-arrow {
    width: 16px;
    height: 16px;
    border-radius: 20px;
    border: double 6px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #4FA280,#3380C6);
    background-origin: border-box;
    background-clip: content-box, border-box;
    margin: 0 auto;
    margin-top: -16px;
}
.bio-arrow-bottom {
    width: 30px;
    height: 14px;
    margin: 0 auto;
    margin-top: -12px;
    background-color: #fff;
}

a.bio-close, a.bio-close.link:link, a.bio-close:visited, a.bio-close:hover {
    float: right;
    opacity: 0.8;
    font-size: 30px;
    font-weight: 600;
    color: #000;
    /* Safari */
    -webkit-transform: rotate(-45deg);
    /* Firefox */
    -moz-transform: rotate(-45deg);
    /* IE */
    -ms-transform: rotate(-45deg);
    /* Opera */
    -o-transform: rotate(-45deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5);
    margin-right: -20px;
    margin-top: -35px;
    text-decoration: none;
    margin-right: 0px;
    margin-top: -25px;
}

a.bio-close:hover {
    opacity: 0.5;
}

/** featured membeers carousel **/
#members-container {
    display: none;
}

#featured-members, #featured-members-desktop {
    margin-top: -235px;
    margin-left: 420px;
    margin-bottom: 50px;
}

#featured-members-desktop {
    margin-left: 190px;
}

.featured-member {
    margin-top: 10px;
    height: 319px;
    width: 220px;
    background-size: 100%;
    border-radius: 5px;
}

.join-member-area {
    position: relative !important;
    z-index: 10;
    margin-left: 210px;
    margin-bottom: 30px;
    height: 320px;
    width: 220px;
    float: left;
    background: none;
    background-color: none;
    margin-top: 10px;
}

.join-member {
    background-image: Url("images/join@2x.png");
    height: 320px;
    width: 220px;
    box-shadow: -1px 18px 25px 4px rgba(0,0,0,0.05);
    position: absolute;
    background-size: 100% !important;
    background-repeat: no-repeat;
}

.featured-member-shadow:hover {
    opacity: 0.7;
}

.join-member-area:hover {
    opacity: 0.7;
}

.join-member-slide {
    background-image: Url("images/join@2x.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: left;
}

.featured-join-link {
    position: absolute;
    height: 27px;
    padding-top: 7px;
    display: block;
    border-radius: 0 0 4px 4px;
    font-weight: 600;
    text-decoration: none;
    text-align: left;
    font-size: 14px;
    line-height: 16px;
    color: #fff;
    margin-top: 268px;
    margin-left: 10px;
    width: 200px;
    background: none;
    text-transform: uppercase;
    font-size: 18px;
}

.featured-join-link span {
    display: block;
    font-weight: normal;
}

    .join-member a, .join-member a:link, .join-member a:visited, .join-member a:hover {
        height: 35px;
        padding-top: 15px;
        width: 220px;
        display: block;
        border-radius: 0 0 4px 4px;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        font-size: 14px;
        line-height: 16px;
        color: #fff;
        margin-top: 270px;
    }

        .join-member a:hover {
            background-color: #72d4af;
        }

.featured-member-shadow {
    /*box-shadow: 0 0 20px 0 rgba(0,0,0,0.05), 0 30px 30px 0 rgba(0,0,0,0.08);*/
    padding: 0px 10px 40px 10px;
}

.featured-member {
    box-shadow: -1px 18px 25px 4px rgba(0,0,0,0.05);
}

    .featured-member a, .featured-member a:link, .featured-member a:visited, .featured-member a:hover {
        text-align: center;
        display: block;
        width: 180px;
        background-color: #4fca9b;
        color: #fff;
        text-decoration: none;
        padding: 10px;
        margin-left: -10px;
        margin-top: -28px;
        position: absolute;
        border-radius: 5px;
        font-weight: normal;
    }

        .featured-member a:hover {
            opacity: 0.6;
        }

.slick-prev.slick-arrow, .slick-next.slick-arrow {
    background-color: #edf9f5;
    border: none;
    color: #4fca9b;
    width: 80px;
    height: 80px;
    border-radius: 100px;
    background-image: url("images/Next_button.svg");
    font-size: 0px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    position: absolute;
}

.slick-prev.slick-arrow {
    display: none !important;
    z-index: 2;
}

.slick-next.slick-arrow {
    margin-top: -210px;
    margin-left: -150px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

    .slick-next.slick-arrow:hover {
        opacity: 0.9;
    }

.slick-list {
    padding: 0 10% 0 0;
}

#members-container .slick-next.slick-arrow, #members-container-desktop .slick-next.slick-arrow {
    margin-left: -130px;
    margin-top: -255px;
}

.featured-member-shadow:hover {
    opacity: 1 !important;
}


/*** story items */
.story-row {
    padding-bottom: 20px;
    max-width: 972px;
    margin: 0 auto;
}

.story-img-container {
    padding-left: 20px;
    padding-right: 20px;
}

.story-img, .story-img :link, .story-img :visited, .story-img:hover {
    width: 100%;
    background-size: cover;
    background-position: center;
    height: 180px;
    margin-top: 20px;
    display: block;
    text-decoration: none;
}

    .story-img:hover {
        opacity: 0.8;
    }

.story-item-area {
    margin-left: 10px;
    margin-right: 10px;
}

.story-item {
    border-radius: 10px;
    height: 444px;
    max-width: 300px;
    background-color: #fff;
    border-radius: 10px;
    border: double 4px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #4FA280,#3380C6 );
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.story-item-bottom {
    padding: 20px 20px 20px 20px;
    
}

    .story-item-bottom h2 {
        text-align: center;
        font-size: 16px;
        line-height: 18px;
        padding: 0px;
        margin: 0px;
        margin-bottom: 0px;
        text-transform: uppercase;
        text-align: left;
    }

.story-item p {
    font-size: 14px;
    line-height: 20px;
    height: 54px;
    margin-bottom: 50px;
}

.story-item a.button, .story-item a.button:link, .story-item a.button:visited, .story-item a.button:hover {
    display: block;
    margin: 0 auto;
    max-width: 80px;
}

.story-item h2 {
    height: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.share-story h3 {
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: left;
}

.share-story {
    margin-bottom: -40px;
}

    .share-story a, .share-story a:link, .share-story a:visited .share-story a:hover {
        width: 40px;
        height: 40px;
        background-size: 100%;
        display: inline-block;
        margin-left: 0px;
        margin-right: 30px;
    }

        .share-story a:hover {
            opacity: 0.6;
        }

a.facebook-share {
    background-image: url("images/Icon_Facebook_Color.svg");
}

a.twitter-share {
    background-image: url("images/Icon_Twitter_Color.svg");
}

a.whats-app-share {
    background-image: url("images/Whatsapp-icon.svg");
}

#featured-stories {
    margin-left: 200px;
    margin-top: 70px;
}

    #featured-stories .slick-next.slick-arrow {
        margin-top: -256px;
    }

.story-hero-shot {
    background-size: cover;
    background-position: center;
}

.story-hero-shot.mobile {
    display: none;
}

.story-content {
    max-width: 848px;
    margin: 0 auto;
    margin-bottom: 80px;
    padding-left: 40px;
    padding-right: 40px;
    margin-top: -50px;
}

.story-caption {
    text-align: center;
    font-size: 0.8em;
    margin-bottom: 30px;
}

.story-content img {
    text-align: center;
    width: 100%;
}

.story-content iframe {
    margin-bottom: 20px;
    width: 100%;
    height: 400px;
}

.story-content h1 {
    font-size: 48px;
    line-height: 48px;
    text-align: left;
    margin: 0px;
    padding: 0px;
}

.story-content h2 {
    font-size: 26px;
    line-height: 30px;
    font-weight: normal;
    text-align: left;
    margin: 0px;
    margin-bottom: 80px;
    margin-top: 20px;
    padding: 0px;
}

.story-content p {
    font-size: 16px;
    line-height: 24px;
}

.story-quote {
    font-size: 24px;
    color: #3380C6;
}

.story-date {
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    opacity: 0.4;
    margin-bottom: 61px;
    margin-top: 20px;
}

/** faq's */
.faqs {
    max-width: 620px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
    margin-bottom: 140px;
}

h2#FAQ {
    padding-bottom: 60px;
}

.faq {
    margin-bottom: 40px;
}

.faq-line {
    width: 100%;
    margin-bottom: 40px;
    height: 2px;
    -webkit-appearance: none;
    background: #4FA280; /* Old browsers */
    background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
}

.faqs h3 {
    line-height: 24px;
    text-align: left;
    padding-bottom: 10px;
}


.faq-answer {
    display: none;
    font-size: 16px;
    line-height: 24px;
}

.faq-expand, .faq-shrink {
    background-image: url("images/faq-plus.svg");
    width: 20px;
    height: 20px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.faq-shrink {
    display: none;
    background-image: url("images/faq-minus.svg");
}

.faq-circle {
    height: 35px;
    width: 40px;
    display: block;
    margin-top: -2px;
    text-align: center;
    padding-top: 5px;
    float: right;
}

/* slide show */
.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
    z-index: 0;
    margin-bottom: 80px;
}

    .rslides li {
        -webkit-backface-visibility: hidden;
        position: absolute;
        display: none;
        width: 100%;
        left: 0;
        top: 0;
    }

rslides li:first-child {
    position: relative;
    display: block;
    float: left;
}

.rslides a:hover {
    opacity: 0.7;
}

.rslides img {
    display: block;
    height: auto;
    width: 100%;
    border: 0;
}

.rslides div {
    width: 100%;
    height: 550px;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.rslides#mobile-hero-shots-slider div {
    height: 536px;
}

.rslides#mobile-hero-shots-slider {
    height: 536px;
}

.rslides#photo-slider div {
    height: 754px;
}

.rslides#photo-slider {
    height: 754px;
}

.rslides {
    color: #fff;
    height: 550px;
}

    .rslides a, .rslides a:link, .rslides a:visited, .rslides a:hover {
        color: #fff;
    }

    .rslides h1, .image-slide .strapline {
        max-width: 460px;
        margin-left: 200px;
        float: left;
        text-align: left;
        text-transform: uppercase;
    }

    .rslides h1 {
        margin-top: 100px;
        font-size: 35px;
        line-height: 40px;
        padding-bottom: 0px;
        margin-bottom: 10px;
    }

.image-slide .strapline {
    clear: left;
    line-height: 30px;
    font-size: 20px;
}

.slider-background {
    /*background: linear-gradient(90deg, #4FCA9B 0%, rgba(51,148,238,0) 100%);*/
}

.rslides_tabs {
    position: absolute;
    margin-top: -600px;
    margin-left: 200px;
    padding: 0px;
    list-style-type: none;
}

.story-slider .rslides_tabs {
    text-align: center;
    width: 100px;
    margin: 0 auto;
    position: relative;
    margin-top: -400px;
    margin-bottom: 400px;
}

.story-slider h1 {
    margin-top: 300px;
    font-size: 48px;
    line-height: 48px;
    margin-left: 0px;
    padding-left: 40px;
    padding-right: 40px;
    width: 100%;
}

.story-slider #photo-slider h1 {
    margin-top: 0px;
}
.story-slider #photo-slider h2 {
    padding-top: 0px;
}

#photo-slider .content-block {
    padding-top: 554px;
}

#photo-gallery-mobile {
    display: none;
}

#photo-gallery a.prev, #photo-gallery a.next {
    margin-top: -500px !important;
    display: block;
    position: absolute;
}

#photo-gallery a.next {
    float: right;
    right: 40px;
    background-image: url("images/Arrow next R.svg");
    width: 36px;
    height: 57px;
}

#photo-gallery a.prev {
    float: left;
    margin-left: 40px;
    background-image: url("images/Arrow next L.svg");
    width: 36px;
    height: 57px;
}

#photo-gallery .rslides2_tabs, #photo-gallery .rslides1_tabs {
    display: none;
}

.image-slide.mobile {
    display: none;
}

.story-slider h2 {
    text-align: left;
    font-weight: normal;
    font-size: 24px;
    line-height: 24px;
    clear: left;
    color: #fff;
}

.story-slider a {
    text-decoration: none !important;
}

.rslides_tabs li {
    padding: 0px;
    margin: 0px;
    float: left;
    margin-right: 20px;
    padding-top: 5px;
}

    .rslides_tabs a, .rslides_tabs a:link, .rslides_tabs a:visited, .rslides_tabs a:hover {
        background-color: #fff;
        border-radius: 5px;
        font-size: 0px;
        padding: 5px;
    }

.rslides_here a, .rslides_here a:link, .rslides_here a:visited, .rslides_here a:hover {
    background-color: #fff;
    color: #fff;
    display: block;
    padding: 10px;
    border-radius: 40px !important;
    font-size: 0px;
    text-decoration: none;
    margin-top: 10px;
}

.story-slider .rslides_tabs {

}

.rslides_tabs li.rslides_here {
    padding-top: 0px;
}

.video-slide {
    background-color: #000;
}

.rslides iframe {
    width: 100%;
    height: 100%;
}

.video-bg {
    height: 100px;
    width: 100%;
    background: linear-gradient(90deg, #4FCA9B 0%, rgba(51,148,238,0) 100%) !important;
    position: absolute;
    margin-top: -550px;
}

a.play-button, .play-button:link, .play-button:visited, .play-button:hover,
a.pause-button, .pause-button:link, .pause-button:visited, .pause-button:hover {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 80px;
    position: absolute;
    margin-top: -340px;
    left: 50%;
    margin-left: -40px;
    z-index: 5;
    text-decoration: none;
    -webkit-appearance: none;
    background: #4FA280; /* Old browsers */
    background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
}

    a.play-button span {
        display: block;
        width: 0;
        height: 0;
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
        border-left: 16px solid #fff;
        margin-top: 30px;
        margin-left: 34px;
    }

a.pause-button, .pause-button:link, .pause-button:visited, .pause-button:hover {
    height: 65px !important;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    letter-spacing: 2px;
    padding-top: 15px;
    color: #c6b816 !important;
    display: none;
}

.play-button:hover, .pause-button:hover {
    opacity: 0.6;
}

/*** who can get involved ***/
.involved-bg {
    background-image: url('images/BG_shapes home 1.svg');
    width: 100%;
    height: 1021px;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 0px;
    z-index: -1;
}

.involved {
    margin-top: 50px;
    padding-top: 187px;
    background-size: cover;
    max-width: 980px;
    margin: 0 auto;
}

    .involved h2 {
        margin-bottom: 50px;
    }

a.involved-box, a.involved-box:link, a.involved-box:visited, a.involved-box:hover {
    display: block;
    font-weight: bold;
    width: 300px;
    font-size: 20px;
    color: #000;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 20px;
    margin: 0 auto;
    text-decoration: none;
    margin-bottom: 50px;
    text-align: center;
    border-radius: 10px;
    border: double 4px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #4FA280,#3380C6 );
    background-origin: border-box;
    background-clip: content-box, border-box;
    -webkit-box-shadow: 0px 13px 29px -1px rgba(0,0,0,0.19);
    -moz-box-shadow: 0px 13px 29px -1px rgba(0,0,0,0.19);
    box-shadow: 0px 13px 29px -1px rgba(0,0,0,0.19);
}

    a.involved-box:hover {
        color: #3AAE82;
    }

.involved-content-box {
    background-color: #fff;
    padding-bottom: 40px;
    padding-top: 10px;
    border-radius: 10px;
}

.join-image-box {
    margin-bottom: 40px;
    padding-right: 20px;
}

.join-involved-box {
    border-radius: 10px;
    border: double 4px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #4FA280,#3380C6 );
    background-origin: border-box;
    background-clip: content-box, border-box;
    -webkit-box-shadow: 0px 13px 29px -1px rgba(0,0,0,0.19);
    -moz-box-shadow: 0px 13px 29px -1px rgba(0,0,0,0.19);
    box-shadow: 0px 13px 29px -1px rgba(0,0,0,0.19);
}

.join-content-box {
    padding-top: 10px;
    padding-bottom: 40px;
}

.join-image-box {
    background-color: #fff;
}

.join-involved-box .box-image {
    height: 190px;
    width: 100%;
    background-position: center center;
    background-size: cover;
}

a.involved-box .box-image {
    height: 190px;
    width: 280px;
    background-position: center center;
    background-size: cover;
    margin-left: 10px;
    margin-bottom: 30px;
}

.join-involved-box a.donate-link, .join-involved-box a.donate-link:link, .join-involved-box a.donate-link:visited, .join-involved-box a.donate-link:hover {
    font-size: 10.5px;
    margin-top: -10px;
    position: absolute;
    width: 200px;
    box-sizing: border-box;
}

a.players-box .box-image, .players-box .box-image {
    background-image: url('images/Players & Mangers.jpg') !important;
}

a.supporters-box .box-image, .supporters-box .box-image {
    background-image: url('images/Supporters.jpeg') !important;
}

a.businesses-box .box-image, .businesses-box .box-image {
    background-image: url('images/Businesses.jpg') !important;
}

.join-involved-box .box-image {
    margin-left: 10px;
}

.recent-stories-bg {
    height: 1000px;
    width: 100%;
    position: absolute;
    background-image: url("images/BG_shapes_2_home.svg");
    z-index: -2;
    background-position: top left;
    background-size: cover;
    left: 0%;
    margin-top: -190px;
    background-position-x: 450px;
    background-repeat: no-repeat;
}

/*** members page - featured supporters */
#featured-supporters p {
    text-align: center;
}

.button.join-button {
    margin: 0 auto;
    display: block;
    width: 200px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    padding: 17px 0px !important;
    margin-top: 40px !important;
    margin-bottom: 170px !important;
}

/** contact page */
.contact-intro {
    margin-top: 150px;
    text-align: center;
    padding-left: 40px;
    padding-right: 40px;
}

    .contact-intro h1 {
        opacity: 0.8;
        font-size: 48px;
        line-height: 48px;
        margin-bottom: 20px;
    }

    .contact-intro p {
        opacity: 0.6;
        font-size: 16px;
        max-width: 700px;
        font-weight: 600;
        line-height: 24px;
        margin: 0 auto;
        margin-bottom: 102px;
    }

#contact-bg {
    height: 1177px;
    width: 100%;
    position: absolute;
    background-image: url("images/BG_shape_1_contact.svg");
    z-index: -2;
    background-size: cover;
    left: 0%;
    margin-top: 212px;
}

/*** join page get involved */
.join-involved {
    background-image: none;
    max-width: 960px;
    margin: 0 auto;
    margin-top: -180px;
}

.join-involved-box {
    height: 616px;
    font-size: 16px;
    color: #000;
    line-height: 24px;
    text-decoration: none;
    margin-left: 10px;
    margin-right: 10px;
    box-sizing: border-box;
    margin-bottom: 40px;
}

    .join-involved-box p, .join-involved-box .join-stats {
        margin-left: 40px;
        margin-right: 40px;
    }

    .join-involved-box h2 {
        text-align: left;
        font-size: 20px;
        line-height: 20px;
        margin-bottom: 20px;
        margin-left: 0px;
    }

    .join-involved-box p {
        height: 210px;
        margin-bottom: 20px;
    }

    .join-involved-box p, .join-involved-box .join-stats {
        opacity: 0.6;
    }

    .join-involved-box a, .join-involved-box a:link, .join-involved-box a:visited, .join-involved-box a:hover {
        display: block;
        width: 160px;
        padding-top: 18px;
        padding-bottom: 18px;
        padding-left: 0px;
        padding-right: 0px;
        margin: 0px 0px 0px 40px;
        margin-top: 10px;
    }


#join-background-1, #join-background-2 {
    height: 1103px;
    width: 100%;
    position: absolute;
    background-image: url("images/BG_shape_1_joinnow.svg");
    z-index: -2;
    background-size: cover;
    left: 0%;
    margin-top: -170px;
}

#join-background-1 {
    transform: scaleX(-1);
}

#join-background-2 {
    height: 1268px;
    background-size: 100% 1268px;
    background-image: url("images/BG_shape_2_joinnow.svg");
    margin-top: -200px;
}

.button.not-ready-button, .button.not-ready-button:link, .button.not-ready-button:visited, .button.not-ready-button:hover {
    display: block;
    margin: 0 auto;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 14px;
    line-height: 16px;
    padding-left: 0px;
    padding-right: 0px;
    font-weight: 600;
    width: 280px;
    margin-bottom: 100px;
}

/*** join promise */
.promise {
    max-width: 960px;
    padding-left: 40px;
    padding-right: 40px;
    margin: 0 auto;
    margin-top: 140px;
    margin-bottom: 113px;
}

    .promise .row .col-50:first-child {
        margin-right: 40px;
    }

    .promise .row .col-50:last-child {
        margin-left: 40px;
    }

    .promise h2 {
        margin-bottom: 71px;
    }

    .promise h3 span {
        color: #fff;
        display: block;
        float: left;
        border-radius: 40px;
        height: 20px;
        width: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        margin-left: -80px;
        margin-top: -10px;
        -webkit-appearance: none;
        background: #4FA280; /* Old browsers */
        background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
    }

    .promise h3 {
        margin-left: 80px;
        text-align: left;
        padding-top: 10px;
    }

    .promise p {
        margin-left: 80px;
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 50px;
    }

/*** not ready section */
.not-ready {
    margin: 0 auto;
    margin-bottom: 291px;
    max-width: 1080px;
    background-color: #fff;
    border: 1px solid #F0F3F6;
    border-radius: 10px;
    box-shadow: 0 30px 30px 0 rgba(0,0,0,0.11);
    padding-top: 60px;
    padding-bottom: 65px;
    padding-left: 60px;
    padding-right: 60px;
}

    .not-ready h2 {
        margin-bottom: 82px;
    }

    .not-ready h3 {
        text-align: left;
        opacity: 0.8;
        height: 48px;
    }

    .not-ready .col-33 {
        margin-left: 65px;
        margin-right: 65px;
    }

    .not-ready p {
        min-height: 140px;
        padding-bottom: 20px;
        font-size: 16px;
        line-height: 24px;
        opacity: 0.6;
    }

    .not-ready a {
        font-weight: 600;
    }

    .not-ready .col-33 {
        background-repeat: no-repeat;
        background-position: top left;
        padding-top: 207px;
        background-size: 146px auto;
    }

.not-ready-spread {
    background-image: url("images/Spread the Word.png");
}

.not-ready-donate {
    background-image: url('images/One-off donation.png');
}

.not-ready .col-33.not-ready-visit {
    background-image: url("images/Field Trip.png");
    background-size: 120px auto;
}

/*** take the pledge share form **/
.invite-form textarea {
    opacity: 0.4;
    line-height: 20px;
    font-size: 14px;
    height: 116px;
    max-width: 299px;
}

.invite-form .share-buttons {
    margin: 0 auto;
    max-width: 320px;
}

.facebook-button.button, .facebook-button.button:link, .facebook-button.button:visited, .facebook-button.button:hover,
.twitter-button.button, .twitter-button.button:link, .twitter-button.button:visited, .twitter-button.button:hover {
    font-weight: 600;
    color: #fff;
    padding-top: 17px;
    padding-bottom: 17px;
    font-size: 14px;
    line-height: 16px;
    width: 130px;
    padding-left: 0px;
    padding-right: 0px;
    display: inline-block;
}

    .facebook-button.button, .facebook-button.button:link, .facebook-button.button:visited, .facebook-button.button:hover {
        background-color: #3B5998;
        margin-right: 12px;
    }

    .twitter-button.button, .twitter-button.button:link, .twitter-button.button:visited, .twitter-button.button:hover {
        background-color: #55ACEE;
        margin-left: 12px;
    }

        .facebook-button.button:hover, .twitter-button.button:hover {
            opacity: 0.6;
        }

.invite-form span {
    font-size: 14px;
    line-height: 16px;
    opacity: 0.4;
}

/** donate page */
.donate-intro {
    font-size: 16px;
    line-height: 24px;
    max-width: 690px;
    opacity: 0.6;
    margin: 0 auto;
    padding-bottom: 65px;
    padding-left: 40px;
    padding-right: 40px;
}

#donate-form {
    padding-left: 40px;
    padding-right: 40px;
    max-width: 690px;
    margin: 0 auto;
}

.mobile-only {
    display: none;
}

/*** sign u page ***/

#sign-up-bg {
    background-image: url("images/BG_shape_1_CreateAccount.svg");
    width: 100%;
    position: absolute;
    height: 990px;
    left: 0%;
    background-repeat: no-repeat;
    background-position: top right;
    z-index: -1;
}

.sign-up {
    padding-top: 100px;
    max-width: 1080px;
    margin: 0 auto;
}

.sign-up-left {
    padding-left: 40px;
    padding-right: 40px;
}

    .sign-up-left h1 {
        padding-bottom: 50px;
        margin-bottom: -100px;
        font-size: 46px;
    }

.sign-up.login .sign-up-left h1 {
    margin-bottom: -40px;
}

.sign-up-right .center-form .content-box {
    padding-bottom: 0px;
    padding-right: 40px;
    padding-left: 40px;
    padding-top: 40px;
}

    .sign-up-right h3 {
        text-align: left;
        padding-left: 10px;
    }

    .sign-up-right h2 {
        text-align: left;
        padding-left: 10px;
        font-size: 24px;
        line-height: 24px;
    }

.sign-up-left .sign-up {
    text-align: center;
}

.sign-up-bar, .sign-up-bar-left, .sign-up-bar-right {
    width: 100%;
    background-color: #d4d4d4;
    height: 4px;
    margin-top: -20px;
    position: absolute;
    z-index: -1;
    width: 200px;
}

.sign-up-bar-left {
    margin-left: 80px;
}

.sign-up-bar-right {
    margin-left: -120px;
}

.sign-up-icon {
    margin: 0 auto;
    margin-bottom: 30px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.sign-up-left .row {
    margin-left: -25px
}

.sign-up-icon.pledge {
    background-image: url("images/Pledge.png");
    width: 87px;
    height: 98px;
   
    
}

.sign-up-icon.donation {
    background-image: url('images/Donation.png');
    width: 91px;
    height: 106px;
    margin-top: -8px;
}

.sign-up-icon.projects {
    background-image: url('images/Select Projects.png');
    width: 86px;
    height: 98px;
}

.alread-registered {
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
    padding: 0px;
    margin: 0px;
}

    .alread-registered span {
        opacity: 0.4;
    }

    .alread-registered a, .alread-registered a:link, .alread-registered a:visited, .alread-registered a:hover {
        text-decoration: none;
    }

        .alread-registered a:hover {
            text-decoration: underline;
        }

#password-strength {
    background-color: #F0F3F6;
    width: 180px;
    height: 6px;
    border-radius: 3px;
    margin-bottom: 10px;
    margin-top: -5px;
}

#strength-value {
    width: 0px;
    height: 6px;
    background-color: #4FCA9B;
    border-radius: 3px;
}

/*** forgotten password page */
.forgot-password-message {
    padding-left: 10px;
    opacity: 0.6;
    margin-bottom: 50px;
}

/** kendo window */
.k-window-titlebar.k-header {
    background-image: none !important;
    border-color: #4FCA9B !important;
    -webkit-appearance: none;
    background: #4FA280 !important; /* Old browsers */
    background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%) !important; /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%) !important; /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #4FA280 0%, #3380C6 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ) !important; /* IE6-9 */
    text-transform: uppercase;
}

/*** kendo drop down */
.k-dropdown {
    border-radius: 30px !important;
    color: #fff !important;
}

    .k-dropdown.alt-dropdown {
        color: #000 !important;
    }

.k-select .k-icon {
    margin-top: 5px;
    opacity: 1 !important;
    margin-right: 20px;
}

.k-dropdown-wrap {
    background: none !important;
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
    font-weight: normal;
    border-radius: 30px !important;
    font-size: 13px;
    line-height: 14px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 12px;
    text-transform: uppercase;
}

.alt-dropdown .k-dropdown-wrap {
    background-color: #fff !important;
    color: #000 !important;
}

    .k-dropdown-wrap span {
        color: #fff !important;
    }

.alt-dropdown .k-dropdown-wrap span {
    color: #000 !important;
}

.k-list-container {
    margin-top: -12px !important;
    background-color: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
    border-radius: 0px 0px 10px 10px !important;
    font-size: 13px;
}

    .k-list-optionlabel.k-state-selected, .k-list-container .k-item.k-state-selected.k-state-focused {
        background-color: #fff !important;
        border-color: #fff !important;
        color: #000;
        font-weight: bold;
    }

    .k-list-container .k-item.k-state-hover {
        background-color: #fff !important;
        border-color: #fff !important;
        color: #000;
        font-weight: bold;
    }

/** checkboxes */
.square-checkbox {
    margin-bottom: 10px;
}

.square-checkbox .k-checkbox {
    border-radius: 0px !important;
    color: #fff;
    background-image: none !important;
    border: 1px solid #000;
    height: 19px !important;
    width: 19px !important;
}

    .square-checkbox .k-checkbox:checked {
        border: none !important;
        background-image: url('images/checkbox.svg') !important;
        height: 19px !important;
        width: 19px !important;
    } 

.k-checkbox {
    height: 24px;
    width: 24px;
    border-radius: 24px;
    background-color: #fff;
}

.k-checkbox-label {
    font-weight: normal;
}

.k-checkbox-label:before {
    border-radius: 28px;
    border: double 4px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #4FA280,#3380C6 );
    background-origin: border-box;
    background-clip: content-box, border-box;
}
.k-checkbox:checked + .k-checkbox-label:before {
    color: #000;
    border: double 4px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #4FA280,#3380C6 );
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.k-checkbox label, .k-checkbox-label {
    opacity: 1 !important;
}

.k-checkbox:checked + .k-checkbox-label:before {
    content: "\e118" !important;
}


/*** pledge content */
.pledge-content {
    font-size: 16px;
    line-height: 24px;
    opacity: 0.6;
}

.pledge-content li {
    margin-bottom: 20px;
}

.pledge-page {
    height: 400px;
    background-image: url('images/headers/pledge agreement page/header_image_pledge.jpg');
}

    .pledge-page h1 {
        padding-top: 80px;
    }

.pledge-form {
    margin-top: -330px;
}

/*** pledge options ***/
#pledge-options-bg {
    background-color: rgba(51, 51, 51, 0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 1001;
}

#pledge-options {
    top: 0px;
    color: #fff;
    z-index: 1001;
    position: absolute;
    width: 100%;
    left: 0%;
}

    #pledge-options h1 {
        padding-top: 100px;
        text-align: center;
        font-size: 48px;
        line-height: 48px;
        padding-bottom: 20px;
    }

    #pledge-options .strapline {
        margin: 0 auto;
        max-width: 620px;
        padding-left: 40px;
        padding-right: 40px;
        text-align: center;
        line-height: 24px;
        font-size: 16px;
        padding-bottom: 60px;
        opacity: 0.8 !important;
    }

    #pledge-options .col-50 {
        background-color: #333333;
        min-height: 205px;
        border-radius: 10px;
        padding: 40px;
        margin-bottom: 36px;
    }

        #pledge-options .col-50:first-child {
            margin-right: 20px;
        }

#pledge-options-content {
    max-width: 1020px;
    padding-left: 40px;
    padding-right: 40px;
    margin: 0 auto;
}

#pledge-options h3 {
    color: #fff;
    text-align: left;
    background-position: left center;
    background-repeat: no-repeat;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 75px;
    display: block;
    max-width: 210px;
}

#pledge-options .individual-org {
    background-image: url('images/Individual Organisation.png');
    background-size: 50px auto;
}

#pledge-options .collective-fund {
    background-image: url("images/Collective Fund.png");
    background-size: 50px auto;
}

#pledge-options p {
    opacity: 0.6;
    font-size: 16px;
    line-height: 24px;
}

/** login screen */

#login-bg {
    background-image: url("images/BG_shape_1_Login.svg");
    width: 100%;
    position: absolute;
    height: 1103px;
    left: 0%;
    background-repeat: no-repeat;
    background-position: top right;
    z-index: -1;
}

/*** project selection ***/
.hero-shot.select-projects {
    background: none;
    background-color: #F0F3F6;
    height: 325px;
    background-image: url('images/headers/Project Selection Page/Header_image_projectsleection.jpg');
}

    .hero-shot.select-projects h1 {
        padding-top: 80px;
        color: #000;
        font-size: 32px;
        line-height: 32px;
        opacity: 0.8;
    }

.project-filters {
    max-width: 780px;
    margin: 0 auto;
    background-color: #fff;
    margin-top: -250px;
    border-radius: 10px;
    border: double 4px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #4FA280,#3380C6 );
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.project-filters-content-box {
    padding: 40px 80px;
}

.project-filters label {
    font-weight: bold;
    text-align: center;
}

.project-filters .list-box {
    position: relative;
}

    .project-filters .list-box label {
        font-size: 14px;
        line-height: 16px;
    }

    .project-filters .k-checkbox-label {
        font-size: 16px;
        margin-bottom: 9px;
        margin-top: 9px;
        font-weight: normal;
        text-align: left;
    }

    .project-filters .k-checkbox {
        margin-top: 24px !important;
    }

.filter-drop-down {
    width: 100%;
    display: none;
    background-color: #edf9f5;
    font-weight: bold;
    color: #3AAE82;
    padding: 20px;
    box-sizing: border-box;
}

.filter-arrow {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #2f3131;
    float: right;
    margin-top: 6px;
}

.filter-drop-down.selected .filter-arrow {
    border-top: none;
    border-bottom: 8px solid #2f3131;
}

.noscroller-checkboxes {
    margin-top: 27px;
}

.region-checkboxes {
    margin: 0 auto;
    max-width: 150px;
}

#project-seleciton-area {
    padding-top: 50px;
}

.project-filters .list-box {
    margin-top: 17px;
}

.list-box {
    background-color: #fff;
    border-radius: 4px;
    height:216px;
    padding: 10px;
    overflow-y: scroll;
    color: #3AAE82;
    font-weight: 600;
    font-size: 14px;
    line-height: 39px;
}

.list-box.members-list-box {
    height: 350px;
}

    .list-box label {
        opacity: 1 !important;
    }

.organisation-content {
    display: flex;
    flex-wrap: wrap;
    max-width: 980px;
    padding-left: 30px;
    padding-right: 30px;
    margin: 0 auto;
}

    .organisation-content .organisation-content {
        padding-left: 0px;
        padding-right: 0px;
    }

    .organisation-content .col-25 {
        margin-bottom: 20px;
    }

.row.organisation-row {
    max-width: 960px;
    padding-left: 30px;
    padding-right: 30px;
    margin: 0 auto;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.organisation-list-item-area {
    border: double 4px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #4FA280,#3380C6 );
    background-origin: border-box;
    background-clip: content-box, border-box;
    border-radius: 10px;
    margin-right: 10px;
    margin-left: 10px;
}

.organisation-list-item {
    height: 211px;
    padding: 10px;
    background-color: #FFFFFF;
    font-weight: bold;
    border-radius: 10px;
}

.org-header-img {
    height: 120px;
    width: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #000000 100%);
    margin-bottom: 20px;
    background-size: cover;
    background-position: center center;
}

.organisation-list-item h3 {
    font-size: 14px;
    line-height: 18px;
    text-align: left;
    height: 37px;
}

.organisation-list-item a, .organisation-list-item a:link, .organisation-list-item a:visited, .organisation-list-item a:hover {
    text-decoration: none;
    font-size: 14px;
    line-height: 18px;
}

    .organisation-list-item a:hover {
        text-decoration: underline;
    }

.org-checkbox {
    float: left;
    margin-right: 0px;
    margin-bottom: 10px;
    opacity: 1;
    z-index: 10;
    width: 30px;
    height: 50px;
    border-radius: 4px;
}

.learn-more {
    text-transform: uppercase;
    text-decoration: underline !important;
    font-weight: normal;
}

.org-checkbox .k-checkbox:checked + .k-checkbox-label:before {
    /*opacity: 1 !important;
        background-color: #3AAE82 !important;
        color: #fff !important;
        border: 2px solid #3AAE82 !important;*/
}

#selected-projects {
    position: fixed;
    z-index: 1000;
    bottom: 0px;
    background-color: #fff;
    width: 100%;
    padding-top: 19px;
    left: 0px;
    border-top: 1px solid #d4d4d4;
    padding-bottom: 10px;
}

    #selected-projects p {
        padding: 0px;
        margin: 0px;
        text-align: center;
        opacity: 0.4;
        color: #000000;
        font-family: Asap;
        font-size: 14px;
        line-height: 16px;
    }

    #selected-projects .row {
        padding-left: 40px;
        padding-right: 40px;
        max-width: 940px;
        margin: 0 auto;
    }

#selected-projects .mobile {
    display: none !important;
}

.selected-fund {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    text-transform: uppercase;
}

.selected-projects .selected-fund-box {
    margin-right: 10px;
}


.selected-fund-box .not-selected-fund {
    display: none;
}

.not-selected-fund-box .selected-fund {
    display: none;
}

.fund-box {
    margin-top: 19px;
}

#selected-projects a.alt-button {
    margin-top: 42px !important;
    display: block;
    width: 220px;
    font-size: 14px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.fund-amount {
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    margin-bottom: 10px;
    color: #fff;
}

    .fund-amount#common-goal-fund {
        color: #fff;
    }

.fund-box {
    height: 68px;
    width: 118px;
    border-radius: 10px;
    padding: 10px;
    background-color: #F0F3F6;
    border: 2px dashed rgba(0,0,0,0.2);
}

    .fund-box.selected-fund-box {
        -webkit-appearance: none;
        background: #4FA280; /* Old browsers */
        background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
        border: none;
        width: 120px;
        height: 70px;
    }

.not-selected-fund {
    opacity: 0.4;
    color: #000000;
    font-size: 14px;
    letter-spacing: -0.5px;
    line-height: 18px;
    margin-top: -2px;
}

.not-selected-fund-box .fund-amount {
    display: none;
}

.fund-box .k-checkbox, .fund-box .k-checkbox-label:before {
    /*background-color: #4FCA9B !important;
    color: #fff !important;
    padding: 2px !important;*/
}

.fund-box .k-checkbox-label:before {
    /*border: 2px solid#4FCA9B !important*/
}

/***** confirm page ********/
.confirm-page {
    height: 360px;
    background-image: url('images/headers/confirmation page/header_image_confirmation.jpg');
}

    .confirm-page h1 {
        padding-top: 80px;
    }

#confirm-area {
    padding-left: 40px;
    padding-right: 40px;
    margin-top: -200px;
}

#confirm-page-breakdown {
    max-width: 780px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.05), 0 30px 30px 0 rgba(0,0,0,0.08);
    padding-top: 40px;
    padding-bottom: 40px;
}

    #confirm-page-breakdown p {
        text-align: center;
        font-size: 16px;
        line-height: 24px;
        opacity: 0.6;
        margin-bottom: -20px;
    }

#donation-confirmation {
    max-width: 620px;
    margin: 0 auto;
    border: 2px solid #F0F3F6;
    border-radius: 10px;
    background-color: #fff;
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 40px;
    padding-bottom: 40px;
}

    #donation-confirmation p {
        font-size: 16px;
        line-height: 24px;
        opacity: 0.6;
        margin-top: 0px;
        margin-bottom: 40px;
    }

    #donation-confirmation h2 {
        padding-bottom: 60px;
    }

    #donation-confirmation h3 {
        text-align: left;
        padding-bottom: 10px;
    }

#confirm-area .bar {
    margin-bottom: 50px;
}

#donation-bg {
    height: 1268px;
    width: 100%;
    position: absolute;
    background-image: url("images/BG_shape_makedonation.svg");
    z-index: -2;
    background-size: cover;
    left: 0%;
}

.your-email {
    color: #3394EE;
}

#confirm-page-breakdown {
    max-width: 700px;
    padding-left: 40px;
    padding-right: 40px;
}

    #confirm-page-breakdown .row {
        margin: 0 auto;
        max-width: 620px;
        margin: 0 auto;
    }

        #confirm-page-breakdown .row .fund-box {
            margin: 0 auto;
            margin-top: 40px;
        }

.payment-details {
    overflow-wrap: break-word;
}

    .payment-details p, .payment-details span {
        font-size: 16px !important;
        font-family: "asap" !important;
        line-height: 24px !important;
    }

    .payment-details p {
        margin: 0px !important;
        padding: 0px !important;
    }

.payment-details {
    margin-bottom: 40px;
}

/*** my account page */
.account-page {
    height: 320px;
    background-image: url('images/headers/Account Page/Header_image_myaccount.jpg');
}

    .account-page h1 {
        padding-top: 100px;
    }



.delete-profile-button {
    display: inline-block;
    width: 80px;
}

.active-pledge {
    float: right;
    margin-top: 36px;
    font-weight: 600;
    font-size: 16px;
}


.account-form .center-form {
    margin-top: -200px;
    max-width: 750px;
}

    .account-form h3 {
        text-align: left;
        padding-left: 10px;
        padding-bottom: 20px;
        padding-top: 40px;
    }

    .account-form .payment-details {
        padding-left: 10px;
    }

    .account-form .selected-projects {
        padding-left: 10px;
    }

        .account-form .center-form input[type="submit"], .account-form .center-form a.submit-button, .account-form .center-form a.submit-button:link, .account-form .center-form a.submit-button:visited, .account-form .center-form a.submit-button:hover {
            margin: 0 auto;
            display: block;
            margin-top: 20px;
        }

            .account-form .center-form a.submit-button, .account-form .center-form a.submit-button:link, .account-form .center-form a.submit-button:visited, .account-form .center-form a.submit-button:hover {
                padding-left: 20px;
                padding-right: 20px;
                width: 200px;
                padding: 8px 30px;
            }

                .account-form .center-form a.submit-button, .account-form .center-form a.submit-button:link, .account-form .center-form a.submit-button:visited, .account-form .center-form a.submit-button:hover {
                    max-width: 320px;
                    margin-top: 40px;
                }

.email-validation {
    font-size: 14px;
    line-height: 19px;
}

.email-validated {
    color: #3AAE82;
}

.email-not-validated {
    color: #E14113;
}

    .email-not-validated a, .email-not-validated a:link, .email-not-validated a:visited, .email-not-validated a:hover {
        color: #000;
        opacity: 0.5;
        text-decoration: underline;
    }

        .email-not-validated a:hover {
            opacity: 0.2;
        }

#email-validation-required, .loggedout {
    position: absolute;
    margin-top: 55px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 16px;
    background-color: #3394EE;
    padding-top: 17px;
    padding-bottom: 17px;
    padding-left: 40px;
    padding-right: 40px;
    left: 0%;
    box-sizing: border-box;
    z-index: 5000;
}

    #email-validation-required {
        position: relative;
        display: block;
        margin-top: 54px;
    }

    #email-validation-required a, #email-validation-required a :link, #email-validation-required a :visited, #email-validation-required a :hover {
        color: #fff;
    }

    #email-validation-required a:hover {
        opacity: 0.6;
    }

#email-validation-required.password-notification {
    margin-top: 0px;
}

#verification-email {
    text-decoration: underline;
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

.loggedout {
    position: absolute;
    margin-top: 0px;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

#flash-message, #flash-error-message {
    text-align: center;
    position: fixed;
    width: 100%;
    background-color: #3394ee;
    font-size: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    z-index: 1000;
    display: none;
    font-weight: 500;
    top: 0px;
    border-bottom: 1px solid rgba(0,0,0,0.08)
}

#flash-error-message {
    color: #F8E71C;
}

/*** spreadh the word page */
.spread-the-word {
    padding-left: 40px;
    padding-right: 40px;
    max-width: 980px;
    margin: 0 auto;
}

    .spread-the-word h1 {
        text-align: center;
        padding-top: 150px;
        line-height: 60px;
        font-weight: bold;
        font-size: 48px;
        padding-bottom: 20px;
    }

    .spread-the-word h2 {
        padding-bottom: 50px;
    }

    .spread-the-word p {
        text-align: center;
        font-size: 16px;
        line-height: 20px;
        font-weight: normal;
        opacity: 0.6;
        max-width: 620px;
        margin: 0 auto;
        padding-bottom: 100px;
    }

    .spread-the-word .row .col-33 {
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 140px;
    }

    .spread-the-word iframe {
        width: 100%;
    }

    .spread-the-word a, .spread-the-word a:link, .spread-the-word a:visited .spread-the-word a:hover {
        width: 40px;
        height: 40px;
        background-size: 100%;
        display: inline-block;
        margin-left: 20px;
        margin-top: 14px;
    }

.share-story a:hover {
    opacity: 0.6;
}

.spread-the-word .col-33 span {
    opacity: 0.6;
    display: block;
    margin-top: 25px;
    float: left;
}

.featherlight-content {
    border-radius: 10px !important;
}

.featherlight-close-icon.featherlight-close {
    font-weight: bold;
}

.share-window {
    max-width: 620px;
    padding-top: 40px;
    padding-left: 80px;
    padding-right: 80px;
    padding-bottom: 30px;
}

    .share-window img {
        max-width: 460px !important;
        max-height: 460px !important;
    }

    .share-window textarea {
        width: 100%;
        line-height: 20px;
        font-size: 14px;
        height: 116px;
    }

    .share-window .col-100 {
        margin: 0px;
        padding: 0px;
        margin-top: 20px;
    }

    .share-window .share-buttons a, .share-window .share-buttons a:link, .share-window .share-buttons a:visited, .share-window .share-buttons a:hover {
        margin: 0 auto;
        display: block;
        margin-top: 20px;
    }

        .share-window .share-buttons a:hover {
            opacity: 0.6;
        }

/**** resource centre ***/

#resource-header {
    height: 284px;
    width: 100%;
    background-image: url("images/resource-centre/Header@2x.png");
    background-size: cover;
}

#resource-welcome {
    margin-bottom: 80px;
    margin-top: 20px;
}

#resource-welcome h1 {
    text-transform: uppercase;
    font-size: 32px;
}

#resource-welcome h1 span {
    font-weight: normal;
}

#resource-welcome p {
    font-family: Asap;
    font-size: 24px;
}

.resource-content-block {
    padding-left: 20px;
    padding-right: 20px;
    max-width: 1196px;
}

#resource-areas {
    margin-top: 20px;
    margin-bottom: 50px;
}

.resource-box-area-disabled {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    opacity: 0.3;
}

.resource-box-area-disabled {
    cursor: default !important;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #777, #eee ) !important;
}

.resource-box-area {
    border-radius: 10px;
    border: double 4px transparent;
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #777, #eee );
    background-origin: border-box;
    background-clip: content-box, border-box;
    margin-right: 20px;
}

.active-resource .resource-box-area, .resource-col:hover .resource-box-area {
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #4FA280,#3380C6 );
    cursor: pointer;
}

.resource-box-arrow {
    height: 52px;
    width: 80px;
    position: relative;
    background: #4FA280; /* Old browsers */
    background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
    /*-moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg); /* Internet Explorer */
    /*-webkit-transform: rotate(-135deg); /* Safari and Chrome */
    margin-top: -27px;
    left: 50%;
    margin-left: -50px;
    display: none;
}

.resource-box-arrow:after {
    width: 80px;
    height: 23px;
    background-color: #fff;
    content: " ";
    position: absolute;
}

.active-resource .resource-box-arrow {
    display: block;
}

.resource-arrow-middle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 48px 80px 0 80px;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    margin-left: -40px;
    margin-top: -2px;
}
.resource-arrow-left {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 36px 0 0 60px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    margin-left: 0px;
    margin-top: 27px;
}
.resource-arrow-right {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 36px 60px;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    margin-left: 20px;
    margin-top: 27px;
}

.resource-box {
    padding-top: 130px;
    background-size: 92px auto;
    background-position: center 30px;
    background-repeat: no-repeat;
    text-align: center;
    font-family: Asap;
    font-size: 16px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 30px;
    min-height: 79px;
}

#resource-areas h3 {
    font-size: 22px;
    margin-bottom: 10px;
    font-family: 'Volte Rounded';
}

#training-resource-box {
    background-image: url("images/resource-centre/training-inactive@2x.png");
}

.active-resource #training-resource-box, .resource-col:hover #training-resource-box {
    background-image: url("images/resource-centre/training@2x.png");
}

#acquisition-resource-box {
    background-image: url("images/resource-centre/acquisition-inactive@2x.png");
}

.active-resource #acquisition-resource-box, .resource-col:hover #acquisition-resource-box {
    background-image: url("images/resource-centre/acquisition@2x.png");
}

#onboarding-resource-box {
    background-image: url("images/resource-centre/onboarding-inactive@2x.png");
}

.active-resource #onboarding-resource-box, .resource-col:hover #onboarding-resource-box {
    background-image: url("images/resource-centre/onboarding@2x.png");
}

.resource-support h3 {
    font-size: 22px;
    text-align: center;
}

.resource-support .testimonial-item {
    margin-top: 0px;
}

.resource-support p {
    font-family: Asap;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
}

.resource-support .testimonial-name {
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 0px;
    margin-right: 0px;
}

.resource-support .testimonial-type {
    font-size: 12px;
    line-height: 14px;
    margin-right: 0px;
}

.testimonial-phone a, .testimonial-email a {
    text-decoration: none;
    color: #000 !important;
    font-size: 12px;
    font-weight: normal;
    line-height: 14px;
    font-family: Asap;
}

.testimonial-email a {
    color: #0080C4 !important;
}

#resource-area-intro h2 {
    text-align: left;
    padding-left: 0px;
    font-family: 'Volte Rounded';
    margin-bottom: 10px;
}

#resource-area-intro {
    font-family: Asap;
    width: 75%;
    margin-bottom: 30px;
    clear: both;
}

#resource-filters {
    float: right;
}

.language-filters {
    float: right;
}

    .language-filters a, .language-filters a:link, .language-filters a:visited, .language-filters a:hover {
        font-size: 18px;
        text-decoration: none;
        color: #454443;
    }

        .language-filters a:hover, .language-filters a.active {
            font-weight: bold;
        }

.view-filters {
    float: right;
    margin-left: 50px;
}

    .view-filters a, .view-filters a:link, .view-filters a:visited, .view-filters a:hover {
        background-image: url('images/resource-centre/Group 52@2x.png');
        background-size: auto 100%;
        display: inline-block;
        background-repeat: no-repeat;
        width: 23px;
        height: 23px;
        opacity: 0.6;
    }

.view-filters a:hover {
    opacity: 1;
}

    .view-filters a.list-view, .view-filters a.list-view:link, .view-filters a.list-view:visited, .view-filters a.list-view:hover {
        background-image: url('images/resource-centre/list-layout@2x.png');
        margin-left: 10px;
    }

    .view-filters a.grid-view.view-active, .view-filters a.list-view.view-active {
        opacity: 1 !important;
    }

.resource-content-block h4 {
    color: #707070;
    font-weight: bold;
    font-size: 14px;
    font-family: Asap;
    float: left;
    padding-top: 15px;
}

#resource-type-filter {
    float: right;
    clear: right;
}

#resource-breaker {
    width: 100%;
    height: 1px;
}

#resource-collections {
    padding-top: 20px;
    padding-bottom: 20px;
}

#resource-collections, #resources {
    clear: both;
}

.resource-folder-content, .resource-content {
    display: flex;
    flex-wrap: wrap;
}

.resource-heading {
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    margin-top: -12px;
}

a.resource-folder, a.resource-folder:link, a.resource-folder:visited, a.resource-folder:hover {
    background-image: url("images/resource-centre/folder@2x.png");
    background-size: 55px auto;
    background-repeat: no-repeat;
    background-position: 10px 10px;
    display: block;
    height: 56px;
    padding: 14px 10px 10px 75px;
    margin-right: 5px;
    margin-left: 5px;
    -webkit-box-shadow: 0px 17px 12px -6px rgba(0,0,0,0.09);
    -moz-box-shadow: 0px 17px 12px -6px rgba(0,0,0,0.09);
    box-shadow: 0px 17px 12px -6px rgba(0,0,0,0.09);
    text-decoration: none;
    font-size: 16px;
    font-family: Asap;
    line-height: 18px;
    margin-bottom: 10px;
}

    a.resource-folder.active-resource-folder, a.resource-folder.active-resource-folder:link, a.resource-folder.active-resource-folder:visited, a.resource-folder.active-resource-folder:hover {
        background-image: url("images/resource-centre/open-folder@2x.png");
    }

#collection-back a, #collection-back a:link, #collection-back a:visited, #collection-back a:hover {
    text-decoration: none;
}

#collection-back {
    display: none;
}

.resource-content-list .resource-content {
    display: block;
}

    .resource-content .col-25 {
        font-size: 16px;
        margin-bottom: 20px;
    }

.resource-content-list .resource-content .col-25 {
    display: block;
    font-size: 18px;
}

.resource-content a, .resource-content a:link, .resource-content a:visited, .resource-content a:hover {
    width: 24px;
    height: 24px;
    background-size: 100% 100%;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    background-position: center top;
}

.resource-links {
    margin-top: 5px;
    text-align: center;
}

.resource-content-list .resource-content .resource-links {
    float: right;
    margin-top: -35px;
}

.resource-content a:hover {
    opacity: 0.5;
}

    .resource-content a.share-resource, .resource-content a.share-resource:link, .resource-content a.share-resource:visited, .resource-content a.share-resource:hover {
        background-image: url("images/resource-centre/resource-share@2x.png");
    }

    .resource-content a.view-resource, .resource-content a.view-resource:link, .resource-content a.view-resource:visited, .resource-view a.view-resource:hover {
        background-image: url("images/resource-centre/view-resource@2x.png");
        width: 30px;
        height: 18px;
    }

    .resource-content a.download-resource, .resource-content a.download-resource:link, .resource-content a.download-resource:visited, .resource-content a.download-resource:hover {
        background-image: url("images/resource-centre/download-resource@2x.png");
    }

.resource-item {
    padding: 20px;
    -webkit-box-shadow: 0px 17px 12px -6px rgba(0,0,0,0.09);
    -moz-box-shadow: 0px 17px 12px -6px rgba(0,0,0,0.09);
    box-shadow: 0px 17px 12px -6px rgba(0,0,0,0.09);
    border-radius: 10px;
    font-family: Asap;
    font-size: 16px;
    color: #575554;
    height: 251px;
    max-width: 245px;
    margin: 0 auto;
}

.resource-content-list .resource-content .resource-item {
    max-width: none;
    width: 100%;
    height: auto;
    box-sizing: border-box;
}

.resource-icon {
    width: 42px;
    height: 56px;
    background-size: 100%;
    position: absolute;
    margin-left: -10px;
}

.resource-content-list .resource-content .resource-icon {
    position: relative;
    float: left;
    margin-left: 0px;
    margin-right: 30px;
}

    .resource-icon-pdf {
        background-image: url("images/resource-centre/pdf@2x.png");
    }


    .resource-icon-word {
        background-image: url("images/resource-centre/doc@2x.png");
    }

    .resource-icon-video {
        background-image: url("images/resource-centre/avi@2x.png");
    }

    .resource-icon-image {
        background-image: url("images/resource-centre/jpg@2x.png");
    }

.resource-thumbmail {
    width: 100%;
    height: 169px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border: 0.1px solid #ccc;
    margin-top: 20px;
    margin-bottom: 5px;
}

.resource-content-list .resource-content .resource-thumbmail {
    display: none;
}


.resource-title {
    height: 37px;
}

    .resource-title a, .resource-title a:link, .resource-title a:visited, .resource-title a:hover {
        display: inline;
        text-decoration: none;
    }

.resource-content-list .resource-content .resource-title {
    height: 50px;
    max-width: 320px;
    vertical-align: middle;
    display: table-cell;
}

.resource-share-buttons {
    width: auto;
    margin: 0 auto;
    text-align: center;
}

.resource-share-buttons a {
    display: inline-block;
    width: 60px;
    margin-left: 5px;
    margin-right: 5px;
    background-size: auto 60px;
    padding-top: 65px;
    background-repeat: no-repeat;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-family: Asap;
}
    .resource-share-buttons a:first-child {
        margin-left: 0px;
    }
    .resource-share-buttons a:last-child {
        margin-right: 0px;
    }

.resource-share-buttons a:hover {
    opacity: 0.6;
    font-weight: bold;
} 

a.resource-copy-link, a.resource-copy-link:link, a.resource-copy-link:visited, a.resource-copy-link:hover {
    background-image: url("images/resource-centre/copy-link@2x.png");
}

a.resource-email, a.resource-email:link, a.resource-email:visited, a.resource-email:hover {
    background-image: url("images/resource-centre/email@2x.png");
}

a.resource-message, a.resource-message:link, a.resource-message:visited, a.resource-message:hover {
    background-image: url("images/resource-centre/message@2x.png");
}

a.resource-whatsapp, a.resource-whatsapp:link, a.resource-whatsapp:visited, a.resource-whatsapp:hover {
    background-image: url("images/resource-centre/whatsapp@2x.png");
}

#fixed-resource-bar {
    display: none;
    width: 100%;
    height: 56px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    -webkit-appearance: none;
    background: #4FA280; /* Old browsers */
    background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
    text-align: center;
}

    #fixed-resource-bar a, #fixed-resource-bar a:link, #fixed-resource-bar a:visited, #fixed-resource-bar a:hover {
        display: inline-block;
        width: 40px;
        height: 40px;
        text-decoration: none;
        background-repeat: no-repeat;
        margin-top: 8px;
        background-size: 100% auto;
        background-position: center center;
        margin-right: 12px;
        margin-left: 12px;
    }

.fixed-bar-training {
    background-image: url("images/resource-centre/menu-training@2x.png") !important;
}

.fixed-bar-acquisition {
    background-image: url("images/resource-centre/menu-acquisition@2x.png") !important;
}

.fixed-bar-onboarding {
    background-image: url("images/resource-centre/menu-onboarding@2x.png") !important;
}

.fixed-bar-support {
    background-image: url("images/resource-centre/menu-support@2x.png") !important;
    background-size: 100% auto;
    width: 50px !important;
}

.support-menu-i {
    display: inline-block;
    background-image: url("images/resource-centre/menu-i@2x.png");
    width: 19px;
    height: 19px;
    position: absolute;
    margin-left: -10px;
    margin-top: 8px;
}

/**** end resource centre ***/

/**** story version 4 */
#mobile-hero-stories {
    display: none;
    border-bottom: 3px solid #707070;
}

#hero-stories {
    padding-bottom: 127px;
    border-bottom: 1px solid #000;
}

.hero-story {
    margin-bottom: 10px;
}

#hero-stories .row .col-50:first-child {
    padding-right: 5px;
}

#hero-stories .row .col-50:first-child a {
    border-radius: 0px 6px 6px 0px;
}

#hero-stories .row .col-50:last-child {
    padding-left: 5px;
}

#hero-stories .row .col-50:last-child a {
    border-radius: 6px 0px 0px 6px;
}

.hero-story-title {
    background-image: url("images/blackgradientlarge-feature.svg") !important;
    height: 167px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom center;
}

#hero-stories .row .col-50 .hero-story-title {
    background-image: url("images/blackgradientsmall-left.svg") !important;
    margin-left: -2px;
}

#hero-stories .row .col-50:last-child .hero-story-title {
    background-image: url("images/blackgradientsmall-left.svg") !important;
    margin-right: -2px;
}

#hero-stories .row .col-50:last-child a .hero-story-title {
    border-radius: 0px 0px 0px 6px;
}

#hero-stories .row .col-50:first-child a .hero-story-title {
    border-radius: 0px 0px 6px 0px;
}

a.hero-story {
    padding-top: 370px;
    height: 166px;
    background-size: cover;
    background-position: center center;
    text-align: left;
    display: block;
    text-decoration: none !important;
}

    a.hero-story h2, a.hero-story h3 {
        color: #fff;
        text-align: left;
        padding-left: 0px;
        max-width: 1220px;
        padding-left: 20px;
        padding-right: 20px;
        margin: 0 auto;
        
    }

    a.hero-story h3 {
        padding-bottom: 36px;
    }

#hero-stories .row .col-50 a.hero-story h2, #hero-stories .row .col-50 a.hero-story h3 {
    max-width: 580px;
}

#hero-stories .row .col-50:first-child a.hero-story h2, #hero-stories .row .col-50:first-child a.hero-story h3 {
    float: right;
    clear: right;
}

#hero-stories .row .col-50:last-child a.hero-story h2, #hero-stories .row .col-50:last-child a.hero-story h3 {
    margin-left: 52px;
}

    a.hero-story h2 {
        font-size: 48px;
        line-height: 48px;
        margin-bottom: 10px;
    }

    a.hero-story h3 {
        font-size: 36px;
        font-weight: normal;
        line-height: 36px;
    }

#hero-stories .row .col-50 h2 {
    font-size: 36px;
    line-height: 36px;
}

#hero-stories .row .col-50 h3 {
    font-size: 24px;
    line-height: 24px;
}

#featured-videos h2, #stories-from-the-field h2, #football-for-good-in-history h2, #latest-stories h2, #keep-exploring h2 {
    font-size: 24px;
    line-height: 24px;
    margin-top: 45px;
    margin-bottom: 30px;
    text-align: left;
    font-weight: normal;
}

#featured-videos .row {
    padding-left: 40px;
    padding-right: 40px;
}

#featured-videos h3, #featured-videos h4 {
    text-align: left;
}

#featured-videos h3 {
    font-size: 36px;
    line-height: 36px;
    margin-bottom: 0px;
}

#featured-videos h4 {
    font-size: 24px;
    line-height: 24px;
    font-weight: normal;
    margin-top: 10px;
}

#featured-videos iframe {
    border-radius: 10px;
}

#main-featured-video {
    padding-right: 45px;
}

#main-featured-video h3 {
    margin-top: 182px;
}

#main-featured-video.story-video-playing h3 {
    margin-top: 12px;
}

.featured-video-small {
    min-height: 201px;
}

.featured-video-small iframe {
    float: left;
    margin-right: 20px;
    clear: left;
}

#featured-videos .featured-video-small h3, #featured-videos .featured-video-small h4 {
    font-size: 18px;
    line-height: 22px;
}

.featured-video-small h3.large-video {
    display: none;
}

#main-featured-video h3.small-video {
    display: none;
}


a.story-play-button {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.99;
    display: block;
    margin: 0 auto;
    margin-top: -253px;
    background-image: url("images/Play-button.svg");
    background-size: 100%;
}


.featured-video-small a.story-play-button {
    width: 45px;
    height: 45px;
    margin-top: 0px;
    margin-left: 40px;
    position: absolute;
    margin-top: 40px;
}

#latest-stories {
    margin-top: 127px;
}

#latest-stories a {
    text-decoration: none !important;
}

#latest-stories h3 {
    text-align: left;
    color: #000;
    font-size: 24px;
}

#latest-stories .row {
    padding-left: 40px;
    padding-right: 40px;
}

.latest-story-image {
    background-size: cover;
    width: 100%;
    height: 241px;
    background-position: center center;
    margin-bottom: 10px;
    border-radius: 10px;
}

.latest-story {
    margin-right: 10px;
}

#latest-stories .slick-prev.slick-arrow, #latest-stories .slick-next.slick-arrow {
    display: block !important;
    margin-top: 90px !important;
    right: 60px;
    position: absolute;
    background-image: url("images/Arrow next R.svg");
    background-color: inherit !important;
    background-repeat: no-repeat;
    border-radius: 0px;
    width: 36px;
    height: 57px;
}

#latest-stories .slick-prev.slick-arrow {
    left: 60px;
    margin-top: 90px !important;
}

    #photo-gallery {
        margin-top: 127px;
    }

#stories-from-the-field {
    margin-top: 30px;
}

#stories-from-the-field .slick-next slick-arrow {
    display: none;
}

.field-image {
    height: 414px;
    width: 590px;
    background-size: cover;
    background-position: center center;
    margin: 0 auto;
    margin-bottom: 10px;
    border-radius: 10px;
}

#stories-from-the-field {
    height: 500px;
}

#stories-from-the-field .story-from-the-field:first-child {
    margin-right: 5px;
}

#stories-from-the-field .story-from-the-field:last-child {
    margin-left: 5px;
}


#stories-from-the-field .row {
    padding-left: 40px;
    padding-right: 40px;
}

#stories-from-the-field a {
    text-decoration: none !important;
    color: #000;
}

#stories-from-the-field h3, #stories-from-the-field h4 {
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
}

#stories-from-the-field h3 {
    font-size: 24px; 
    line-height: 24px;
    font-weight: bold;
}

#stories-from-the-field h4 {
    font-size: 18px;
    line-height: 18px;
    font-weight: normal;
}

#stories-from-the-field .slick-list, #football-for-good-in-history .slick-list {
    margin: 0 auto;
    max-width: 1200px;
    padding-right: 0px;
}

.story-breaker {
    height: 1px;
    width: 100%;
    border-top: 1px solid #000;
    opacity: 0.1;
}

#football-for-good-in-history {
    margin-top: 127px;
}

.football-for-good-story {
    width: 25%;
}

#football-for-good-in-history a {
    text-decoration: none !important;
    color: #000;
}

.football-for-good-image {
    height: 124px;
    width: 124px;
    background-size: cover;
    background-position: center center;
    margin: 0 auto;
    margin-bottom: 10px;
    float: left;
    margin-right: 18px;
    border-radius: 10px;
}

#football-for-good-in-history .row {
    padding-left: 40px;
    padding-right: 40px;
}

#football-for-good-in-history h3 {
    text-align: left;
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 18px;
    padding-right: 23px;
}

#football-for-good-in-history h4 {
    margin-top: 0px;
    text-align: left;
    font-weight: normal;
    text-transform: none;
    font-size: 18px;
    line-height: 22px;
    padding-right: 23px;
}

#football-for-good-magazine-text{
    color: white;
    font-size: 36px;
    line-height: 36px;
    padding-top: 100px;
}

#football-for-good-magazine {
    width: 100%;
    background-size: cover;
    background-position: center center;
    margin: 0 auto;
    margin-bottom: 10px;
    float: left;
    margin-right: 10px;
    background-image: url("images/black-background-1@2x.png");
    padding-bottom: 10px;
    margin-top: 127px;
    flex-direction: row-reverse;
}

#football-for-good-magazine-text a {
    margin-top: 20px;
    display: inline-block;
    font-size: 20px;
}

#football-for-good-magazine-image {
    height: 388px;
    width: auto;
    margin-top: 20px;
}

#keep-exploring {
    clear: both;
    padding-top: 107px;
    padding-bottom: 50px;
}

#keep-exploring h2 {
    margin-top: -6px;
}

    #keep-exploring .content-block {
        padding-left: 0px;
        padding-right: 0px;
        border-top: 1px solid #000;
        padding-top: 36px;
    }

#keep-exploring .archive-photo {
    width: 199px;
    height: 179px;
    background-size: cover;
    background-position: center center;
    float: left;
    margin-right: 16px;
    margin-bottom: 36px;
    border-radius: 10px;
}

#story-archive {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}

.story-archive-content {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.story-archive-content .col-33 {
    flex-basis: 33.3333%;
}

.story-archive-content h3 {
    font-size: 18px;
    line-height: 18px;
    text-align: left;
    padding-right: 25px;
    margin-bottom: 15px;
}

    .story-archive-content h4 {
        font-size: 18px;
        line-height: 18px;
        font-weight: normal;
        text-align: left;
        padding-right: 25px;
        margin-top: 0px;
    }

.story-archive-item {
    padding-right: 20px;
    text-decoration: none !important;
    color: #000 !important;
}

#story-search-term {
    width: 200px;
    float: right;
    margin-top: -4px;
    text-align: center;
    margin-right: 40px;
}

.load-more-section a.button, .load-more-section a.button:link, .load-more-section a.button:visited, .load-more-section a.button:hover {
    display: block;
    text-align: center;
    margin: 0 auto;
    width: 200px;
    margin-bottom: 20px;
}

/**** members v2 ***/
#featured-members-v2 {
    margin-top: 70px;
    max-width: 1200px;
    padding-left: 40px;
    padding-right: 40px;
}

.featured-member-v2 {
    padding-right: 20px;
}

#featured-members-v2 .slick-prev.slick-arrow, #featured-members-v2 .slick-next.slick-arrow {
    display: none !important;
}

#featured-members-v2:hover .slick-prev.slick-arrow, #featured-members-v2:hover .slick-next.slick-arrow {
    display: block !important;
}

.featured-member-v2 a {
    display: block;
    height: 260px;
    width: 100%;
    max-width: 388px;
    background-size: cover;
    background-position: center center;
    border-radius: 10px;
    text-decoration: none;
}

#featured-members-v2 .slick-list {
    padding: 0 1% 0 0;
}

#featured-members-v2 .slick-prev.slick-arrow, #featured-members-v2 .slick-next.slick-arrow {
    margin-top: -159px !important;
    right: 50px;
    position: absolute;
    background-image: url("images/Arrow next R.svg") !important;
    background-color: inherit !important;
    background-repeat: no-repeat;
    border-radius: 0px;
    width: 36px;
    height: 57px;
}

#featured-members-v2 .slick-prev.slick-arrow {
    left: 20px;
    margin-top: 101px !important;
}

.member-firstname, .member-lastname {
    color: #fff;
    text-transform: uppercase;
    display: block;
    text-align: center;
}

.member-firstname {
    font-size: 40px;
    line-height: 42px;
    padding-top: 94px;
}
.member-lastname {
    font-size: 70px;
    line-height: 54px;
    font-weight: bold;
    color: #fff;
}

    .member-lastname.shrink-member-last-name {
        font-size: 55px;
    }

.hero-shot-v2.member-profile-header-v2 {
    padding-top: 268px;
    height: 268px;
}

.member-profile-header-v2 h1 {
    text-align: center;
    font-size: 88px;
    line-height: 88px;
}

.member-profile-header-v2 h1 span {
    font-weight: normal;
    display: block;
    font-size: 77px;
    line-height: 77px;
}

.member-profile-header-v2 h2 {
    text-align: center;
    font-weight: normal;
    font-size: 18px;
    padding-top: 10px;
}

.member-social-v2 {
    padding-top: 10px;
    text-align: center;
}

    .member-social-v2 a, .member-social-v2 a:link, .member-social-v2 a:visited, .member-social-v2 a:hover {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .member-social-v2 a:hover {
        opacity: 0.7;
    }

    a.member-instagram, a.member-instagram:link, a.member-instagram:visited, a.member-instagram:hover {
        background-image: url("images/member-profile/Instagram.svg");
        background-size: 100%;
    }
    a.member-twitter, a.member-twitter:link, a.member-twitter:visited, a.member-twitter:hover {
        background-image: url("images/member-profile/Twitter.svg");
        background-size: 100%;
    }
    a.member-facebook, a.member-facebook:link, a.member-facebook:visited, a.member-facebook:hover {
        background-image: url("images/member-profile/Facebook.svg");
        background-size: 100%;
    }

.member-quote-v2 {
    font-size: 36px;
    line-height: 36px;
    padding-top: 50px;
    padding-bottom: 50px;
}
.member-text {
    padding-top: 50px;
    padding-bottom: 50px;
    max-width: 792px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 24px;
}

.member-profile-v2 a.alt3-button, .member-profile-v2 a.alt3-button:link, .member-profile-v2 a.alt3-button:visited, .member-profile-v2 a.alt3-button:hover {
    display: block;
    margin: 0 auto;
    width: 76px;
    margin-bottom: 50px;
}

#latest-stories.members-latest-stories {
    margin-top: -15px;
    max-width: 1200px;
    padding-left: 40px;
    padding-right: 40px;
}

    #latest-stories.members-latest-stories .row {
        padding-left: 0px;
        padding-right: 0px;
    }

    #latest-stories.members-latest-stories .slick-list {
        padding: 0 1% 0 0;
    }

    #latest-stories.members-latest-stories .latest-story-image {
        max-width: 388px;
    }

    #latest-stories.members-latest-stories .latest-story {
        padding-right: 10px;
    }



.member-profile-image-v2 {
    width: 100%;
    max-width: 791px;
    height: 518px;
    background-size: cover;
    background-position: center center;
    margin: 0 auto;
    margin-bottom: 10px;
}

#member-profile-images-v2 {
    margin: 0 auto;
    text-align: center;
}

.member-profile-slide-v2 {
    text-align: center;
}

#member-profile-image-arrows-v2 {
    max-width: 791px;
    margin: 0 auto;
}

    #member-profile-image-arrows-v2 a, #member-profile-image-arrows-v2 a:link, #member-profile-image-arrows-v2 a:visited, #member-profile-image-arrows-v2 a:hover {
        position: absolute;
        z-index: 3;
        margin-top: 221px;
        display: block;
        background-image: url('images/Arrow next L.svg');
        width: 36px;
        height: 56.74px;
        margin-left: 20px;
    }

        #member-profile-image-arrows-v2 a.profile-arrow-next, #member-profile-image-arrows-v2 a.profile-arrow-next:link, #member-profile-image-arrows-v2 a.profile-arrow-next:visited, #member-profile-image-arrows-v2 a.profile-arrow-next:hover {
            background-image: url("images/Arrow next R.svg");
            margin-left: 734px;
        }

#member-profile-images-v2 iframe {
    height: 518px;
    margin-top: -465px;
}

.member-video-overlay {
    width: 100%;
    height: 405px;
    background-color: #000;
    opacity: 0;
    margin-top: 60px;
}

a.story-play-button.member-play-button-v2, a:link.story-play-button.member-play-button-v2, a:visited.story-play-button.member-play-button-v2, a:hover.story-play-button.member-play-button-v2 {
    margin-top: -380px;
    margin-bottom: 231px;
}

/*** members list v2 */
.members-list-section-v2 h3 {
    font-size: 13px;
    font-weight: normal;
    text-transform: uppercase;
    text-align: left;
}

.content-block.content-block-v2.content-block-members-list {
    padding-left: 40px;
    padding-right: 40px;
}

.members-list-section-v2 {
    padding-bottom: 80px;
}

#member-list-v2 {
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #707070;
    border-bottom: 1px solid #707070;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 10px;
}

.member-list-content {
    display: flex;
    flex-wrap: wrap;
}

.member-list-image {
    width: 120px;
    height: 120px;
    background-size: 100%;
    margin-bottom: 20px;
    display: block;
    margin: 0 auto;
    text-decoration: none !important;
    border: double 4px transparent;
    
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-repeat:no-repeat;
}

a.member-list-image:hover, .member-list-image.active {
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #4FA280,#3380C6 ) !important;
}

a.member-list-image.active {
    border-radius: 120px;
}

a.member-list-image.player-member:hover, a.member-list-image.player-member.active {
    border-radius: 10px;
}

a.off-the-pitch-member {
    margin-bottom: 165px !important;
}

.m-name, .m-name-bold {
    display: block;
    text-transform: uppercase;
}

.m-name {
    margin-top: 10px;
}

.m-name-bold {
    font-weight: bold;
    color: #000 !important;
}

.m-job-title {
    display: block;
}

.player-member {
    width: 186px;
    height: 269px;
}

.member-list-img {
    width: 120px;
    height: 120px;
    background-size: 100%;
    display: block;
}

.player-member .member-list-img {
    width: 186px;
    height: 269px;
}

a.member-list-image:hover .member-list-img {
    border-radius: 120px;
}

a.member-list-image:hover {
    border-radius: 120px;
}

a.member-list-image.player-member:hover .member-list-img {
    border-radius: 10px;
}

.member-bio {
    display: none;
    width: 100%;
    background-color: #EAEAEA;
    padding: 40px 100px;
    border-radius: 10px;
    box-sizing: border-box;
    position: absolute;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.14);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.14);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.14);
    z-index: 500;
}

.member-bio.non-player-bio {
    padding: 15px;
}

.member-bio.non-player-bio h5 {
    margin-top: 0px;
    padding-top: 0px;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 16px;
}

.member-short-bio {
    font-size: 13px;
    line-height: 13px;
}

.member-bio a.alt3-button,
.member-bio a.alt3-button:link,
.member-bio a.alt3-button:visited,
.member-bio a.alt3-button:hover {
    background-color: #EAEAEA;
    display: block;
    margin: 0 auto;
    width: 138px;
    padding-left: 0px;
    padding-right: 0px;
    border: 1px solid #707070;
    margin-top: 40px;
}

a.member-bio-close, a:link.member-bio-close, a:visited.member-bio-close, a:hover.member-bio-close {
    font-size: 25px;
    line-height: 25px;
    float: right;
    color: #95989A;
    text-decoration: none;
    margin-right: -90px;
    margin-top: -36px;
}

.member-bio.non-player-bio a.member-bio-close,
.member-bio.non-player-bio
.member-bio.non-player-bio a:link.member-bio-close,
.member-bio.non-player-bio a:visited.member-bio-close,
.member-bio.non-player-bio a:hover.member-bio-close {
    margin-right: -6px;
    margin-top: -15px;
}

.member-bio h6 {
    font-weight: normal;
    margin-top: -24px;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 14px;
}

.member-bio .row {
    font-size: 18px;
    line-height: 18px;
}

    .member-bio .row div.col-15, .member-bio .row div.col-40, .member-bio .row div.col-30 {
        margin-bottom: 40px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    .member-bio .row div.col-15, .member-bio .row div.col-30 {
        border-left: 1px solid #707070;
        padding-left: 15px;
    }

.member-bio-heading {
    font-size: 10px;
    line-height: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

#member-filters {
    width: 186px;
    margin-right: 20px;
}

#member-filters h4 {
    text-transform: uppercase;
    font-size: 10px;
    line-height: 10px;
    font-weight: normal;
}

    #member-filters .k-dropdown.alt-dropdown {
        width: 100% !important;
        font-size: 12px !important;
        
    }

    #member-filters .k-dropdown-wrap {
        border-color: #D0CFCF !important;
        font-size: 12px !important;
        padding-left: 6px !important;
    }

a.member-filter ,a:link.member-filter, a:visited.member-filter, a:hover.member-filter {
    display: block;
    float: left;
    margin-right: 15px;
    width: 20px;
    height: 13px;
    background-image: url('images/Group 288.svg');
    margin-top: 4px;
    display: none;
}

.member-filter-dd {
    margin-top: 10px;
    display: none;
}

#member-filters .k-dropdown.alt-dropdown.filter-dropdown {
    background-color: #707070 !important;
    border-color: #707070 !important;
    color: #fff !important;
}

#member-filters .member-filter-dd .k-dropdown-wrap {
    border-color: #707070 !important;
    background-color: #707070 !important;
    color: #fff !important;
}

.alt-dropdown.filter-dropdown .k-dropdown-wrap span {
    color: #fff !important;
}

a#clear-member-filters, a#clear-member-filters:link, a#clear-member-filters:visited, a#clear-member-filters:hover {
    display: inline-block;
    float: right;
    text-decoration: none;
    margin-top: 15px;
    font-size: 10px;
    line-height: 10px;
    margin-bottom: 10px;
}

#member-filters .alt3-button {
    display: block;
    margin-top: 20px;
    font-size: 12px;
    width: 76px;
}

a#close-members-filters, a:link#close-members-filters, a:visited#close-members-filters, a:hover#close-members-filters {
    display: inline-block;
    float: right;
    text-decoration: none;
    font-size: 18px;
    line-height: 20px;
    margin-right: 22px;
    margin-top: -30px;
    display: none;
}

#member-filter-text {
    font-size: 13px;
    line-height: 13px;
    margin-top: 85px;
}

.members-bar {
    margin-top: 70px;
    padding-bottom: 35px;
    border-top: 1px solid #000;
}

/******* portal */

.portal-banner {
    height: 344px;
    background-color: #F1F1F1;
}

.portal-banner .content-block-v2.content-block {
    max-width: 640px;
    padding-top: 60px;
}

.portal-banner h1 {
    font-size: 24px;
    line-height: 24px;
    text-transform: uppercase;
    font-weight: normal;
    margin: 0;
    padding: 0;
    text-align: center;
}

    .portal-banner h1 span {
        font-size: 35.5px;
        line-height: 35.5px;
        display: block;
        font-weight: bold;
        background: #4FA280; /* Old browsers */
        background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

.portal-banner h2 {
    font-size: 17px;
    line-height: 20px;
    text-align: center;
    margin: 0;
    padding: 0;
    margin-top: 48px;
}

.portal-banner-quote-img {
    width: 84px;
    height: 84px;
    border-radius: 84px;
    float: left;
}

.portal-banner-quote, .portal-banner-quote-name, .portal-banner-quote-club {
    margin-left: 100px;
    color: #575554;
}

.portal-banner-quote {
    font-size: 26px;
    line-height: 26px;
    margin-bottom: 50px;
}

.portal-banner-quote-name {
    font-size: 18px;
    line-height: 18px;
    text-transform: uppercase;
    font-weight: bold;
}

.portal-banner-quote-club {
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
}

.portal-form {
    max-width: 388px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.portal-form input[type="text"], .portal-form input[type="password"] {
    width: 100%;
    height: 30px;
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: 1px solid #575554;
    border-radius: 0px;
    font-size: 14px;
    line-height: 16px;
    padding-bottom: 13px;
    padding-top: 13px;
    margin-top: 10px;
}

    .portal-form h1 {
        font-size: 20px;
        line-height: 27px;
        text-transform: uppercase;
        text-align: center;
        margin-top: 37px;
        color: #575554;
    }

    .portal-form h2 {
        font-weight: normal;
        font-size: 15px;
        line-height: 20px;
        text-transform: uppercase;
    }

.portal-form :-ms-input-placeholder { /* IE 10+ */
    text-transform: none;
}

.portal-form :-moz-placeholder { /* Firefox 18- */
    text-transform: none;
}

.portal-form ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    text-transform: none;
}

.portal-form-intro-text {
    text-align: center;
    font-size: 13px;
    line-height: 15px;
    max-width: 270px;
    margin: 0 auto;
    padding-bottom: 20px;
}

a.forgotten-password-link, a:link.forgotten-password-link, a:visited.forgotten-password-link, a:hover.forgotten-password-link {
    font-size: 14px;
    line-height: 16px;
    display: inline-block;
    margin-top: 24px;
}

.portal-form input[type="submit"] {
    font-size: 18px;
    line-height: 18px;
    display: block;
    margin: 0 auto;
    text-transform: uppercase;
    background-color: #fff;
    padding: 15px 55px;
    border-color: #4FA280;
    border-radius: 30px;
    margin-top: 57px;
    color: #575554;
}

.portal-form input[type="submit"]:disabled {
    border-color: #575554;
    color: #575554;
    opacity: 0.24;
}

#join-steps {
    background-image: url("images/join-steps.svg");
    width: 301.66px;
    height: 43.43px;
    margin: 0 auto;
    margin-top: 20px;
    background-size: 100%;
}

.sign-up-stage {
    float: left;
    color: #fff;
    display: block;
    width: 14px;
    height: 13px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 12px;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
    padding-top: 1px;
    background: #4FA280; /* Old browsers */
    background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%) !important; /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%) !important; /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #4FA280 0%, #3380C6 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ) !important; /* IE6-9 */
    margin-right: 0px;
}

.sign-up-step-name {
    font-size: 12px;
    line-height: 14px;
    float: left;
    text-align: center;
}

#join-step-details {
    width: 340px;
    margin: 0 auto;
    margin-top: 10px;
}

#join-step-1 {
    width: 130px;
    float: left;
}
#join-step-2 {
    width: 128px;
    float: left;
}
#join-step-1 .sign-up-step-name {
    width: 40px;
}
#join-step-2 .sign-up-step-name {
    width: 45px;
}
#join-step-3 .sign-up-step-name {
    width: 55px;
}

.terms-info {
    font-size: 12px;
    line-height: 14px;
    max-width: 587px;
    margin: 0 auto;
    margin-top: 38px;
    margin-bottom: -20px;
}

.terms-info a, .terms-info a:link, .terms-info a:visited, .terms-info a:hover {
    font-weight: bold;
    text-decoration: none;
}

#join-bar {
    min-height: 156px;
    border-bottom: 1px solid #BEBEBE;
    padding-top: 36px;
    padding-bottom: 10px;
    margin-bottom: 50px;
}

#join-header, #join-header-hover {
    margin: 0 auto;
    max-width: 790px;
    margin-bottom: 50px;
}

#join-header-text {
    font-size: 18px;
    line-height: 20px;
    color: #575554;
    padding-top: 22px;
    margin-left: 90px;
}

.join-title {
    font-weight: bold;
    text-transform: uppercase;
}

a#help-hover, a:link#help-hover, a:visited#help-hover, a:hover#help-hover {
    background-image: url("images/Assistent@2x.png");
    width: 84px;
    height: 86.31px;
    display: block;
    background-size: 100%;
    float: left;
    margin-right: 15px;
    background-repeat: no-repeat;
}

a:hover#help-hover {
    opacity: 0.8;
}

#join-header-hover {
    display: none;
}

.col-help-options {
    width: 140px;
    padding-top: 10px;
    text-align: center;
}

#help-name {
    text-align: center;
}

    .col-help-options span {
        font-size: 14px;
        line-height: 12px;
        text-transform: uppercase;
        color: #575554;
    }

    .col-help-options span span {
        font-weight: bold;
    }

.col-help-options a, .col-help-options a:link, .col-help-options a:visited, .col-help-options a:hover {
    width: 25px;
    height: 25px;
    background-size: 100%;
    display: inline-block;
}

.col-help-options a:hover {
    opacity: 0.8;
}

a.help-mail, a.help-mail:link, a.help-mail:visited, a.help-mail:hover {
    background-image: url('images/help-email.svg');
    margin-right: 10px;
}

a.help-whatsapp, a.help-whatsapp:link, a.help-whatsapp:visited, a.help-whatsapp:hover {
    background-image: url('images/help-chat.svg');
    margin-left: 10px;
}

.help-text {
    font-size: 18px;
    line-height: 20px;
    color: #575554;
    padding-top: 22px;
    margin-left: 53px;
}

#pledge {
    max-width: 590px;
    background-color: #f1f1f1;
    height: 618px;
    font-size: 17px !important;
    line-height: 24px !important;
    border-radius: 10px;
    -webkit-box-shadow: 6px 6px 12px 0px rgba(0,0,0,0.39);
    -moz-box-shadow: 6px 6px 12px 0px rgba(0,0,0,0.39);
    box-shadow: 6px 6px 12px 0px rgba(0,0,0,0.39);
    margin-bottom: 40px;
}

#pledge-contents {
    max-height: 540px;
    overflow-y: scroll;
    margin-bottom: 20px;
}

#pledge-signature, #pledge-date {
    font-family: 'Ink Free';
    width: 300px;
    margin: 0 auto;
    border-bottom: 1px solid #575554;
    margin-bottom: 30px;
    font-size: 22px;
    line-height: 27px;
    display: none;
}

.join-step-bar {
    width: 387px;
    margin: 0 auto;
}

.join-step-bar .row {
    margin-top: -8px;
}

.step-item-1 {
    width: 120px;
}

.step-item-2 {
    width: 115px;
}

.step-item-3 {
    width: 125px;
}

.step-item-3 .step-item-text {
    display: inline-block;
    width: 58px;
}

.step-item a, .step-item a:link, .step-item a:visited, .step-item a:hover {
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

    .step-item a:hover .step-item-num {
        background: none !important;
        background-color: #000 !important;
    }

.step-not-reached {
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.step-item-num, .step-item-dot {
    margin: 0 auto;
    color: #fff;
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 14px;
    text-align: center;
    font-size: 10px;
    line-height: 13px;
    font-weight: bold;
    margin-bottom: 9.5px;
    -webkit-appearance: none;
    background: #4FA280; /* Old browsers */
    background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
}

.step-item-dot {
    background: #BEBEBE !important;
    height: 8px;
    width: 8px;
    margin-top: 3px;
    margin-bottom: 12.5px;
}

.step-item-num.step-passed {
    font-size: 0px;
    height: 8px;
    width: 8px;
    margin-top: 3px;
    margin-bottom: 12px;
}

.step-item-text {
    font-size: 12px;
    line-height: 14px;
    vertical-align: top;
    display: inline-block;
}

.step-item a span {
    display: block;
}

.inactive-step-bar, .active-step-bar {
    height: 2px;
    width: 347px;
    background-color: #BEBEBE;
}

.active-step-bar {
    margin-top: -2px;
    -webkit-appearance: none;
    background: #4FA280; /* Old browsers */
    background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
}

.step-bar-area {
    width: 347px;
    margin: 0 auto;
}

#join-step-bar-mobile {
    display: none;
}

.project {
    width: 100%;
    max-width: 385px;
    height: 219px;
    background-size: cover;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 24px;
    border-radius: 10px;
    padding: 0px;
    box-sizing: border-box;
    background-position: center center;
}

.project:hover {
    cursor: pointer;
}

.project-selected-bg {
    border-radius: 10px;
    box-sizing: border-box;
    max-width: 385px;
    height: 219px;
    padding: 15px;
}

.project-selected-bg-active {
    background: -moz-linear-gradient(left, rgb(79,162,128, 0.7) 0%, rgb(51,128,198, 0.7) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgb(79,162,128, 0.7) 0%, rgb(51,128,198, 0.7) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgb(79,162,128, 0.7) 0%, rgb(51,128,198, 0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.select-projects-row {
    max-width: 808px;
    margin: 0 auto;
    flex-wrap: wrap;
}

a.select-project-button, a.select-project-button:link, a.select-project-button:visited, a.select-project-button:hover {
    width: auto;
    padding-left: 15px;
    padding-right: 15px;
    height: 20px;
    display: block;
    float: right;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    line-height: 15px;
    padding-top: 5px;
    border-radius: 20px;
}

    a.select-project-button:hover, a.select-project-button.selected-project {
        background-color: #000 !important;
        color: #fff !important;
    }

.project-goal {
    width: 34px;
    height: 34px;
    background-size: 100%;
    float: left;
    margin-top: 155px;
    margin-right: 15px;
}

.project h2 {
    color: #fff;
    font-weight: bold;
    margin-top: 152px;
    font-size: 19px;
    line-height: 20px;
    padding-top: 0px;
    width: auto !important;
    padding-right: 0px;
}

.project h3 {
    color: #fff;
    font-weight: normal;
    margin: 0px;
    padding: 0px;
    text-align: left;
    font-size: 20px;
    line-height: 20px;
    margin-top: -20px;
}

a.show-project, a.show-project:link, a.show-project:visited, a.show-project:hover {
    color: #fff;
    font-weight: bold;
    float: right;
    margin-top: 140px;
    text-decoration: none;
    background-image: url("images/project-plus.svg");
    display: block;
    width: 18.5px;
    height: 18.5px;
    clear: right;
}

a.show-project:hover {
    opacity: 0.8;
}

    a.show-project.selected-show-project {
        transform:  rotate(45deg) !important;
    }

.project-info-desktop {
    flex-basis: 100%;
    display: none;
}

.project-info-mobile {
    display: none;
}

.project-info {
    background-color: #EAEAEA;
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 35px;
    -webkit-box-shadow: 6px 6px 12px 0px rgba(0,0,0,0.39);
    -moz-box-shadow: 6px 6px 12px 0px rgba(0,0,0,0.39);
    box-shadow: 6px 6px 12px 0px rgba(0,0,0,0.39);
}

.project-content {
    max-width: 590px;
    margin: 0 auto;
}

.project-quote p {
    margin: 0px;
    padding: 0px;
    text-align: center !important;
}

.project-quote {
    text-align: center !important;
    font-size: 26px;
    line-height: 26px;
    color: #DD1367;
}

.quote-name {
    padding-top: 10px;
    text-align: right;
    color: #707070;
    font-size: 14px;
    line-height: 18px;
}

.project-description {
    padding-top: 60px;
    padding-bottom: 40px;
    font-size: 17px;
    line-height: 24px;
}

.project-image-section {
    padding-bottom: 35px;
}

.project-image-section .col-50:first-child {
    padding-right: 5px;
}
.project-image-section .col-50:last-child {
    padding-left: 5px;
}

    .project-image-section iframe {
        height: 252px;
        border-radius: 10px;
    }

.project-image-tagline {
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    color: #707070;
    margin-bottom: 10px;
}

.project-content h4 {
    font-weight: normal;
    font-size: 13px;
    line-height: 15px;
    text-transform: uppercase;
    margin: 0px 0px 26px 0px;
}

    .project-content .top-line {
        padding: 10px 0px 0px 0px;
        border-top: 1px solid #707070;
    }

.project-info-section-text {
    font-size: 14px;
    line-height: 21px;
}

.project-info-section-text.goal-supported-text {
    margin-left: 99px;
}

.project-info-row .col-50 {
    padding-bottom: 50px;
}

.project-goal-image {
    width: 69px;
    height: 69px;
    background-size: 100%;
    float: left;
    margin-right: 30px;
    margin-top: 6px;
}

.region-image {
    width: 115px;
    height: 115px;
    background-size: 100%;
    float: right;
    margin-left: 5px;
}

.project-info-section-text p {
    padding: 0px;
    margin: 0px;
}

.impact-stat {
    font-weight: bold;
    font-size: 50px;
    line-height: 50px;
    background: -webkit-linear-gradient(#4FA280, #3380C6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    float: left;
    margin-right: 5px;
    min-width: 70px;
}

    .impact-stat.impact-stat-1char {
        font-size: 76px;
        line-height: 60px;
        text-align: center;
    }

    .impact-stat.impact-stat-2char {
        font-size: 76px;
        line-height: 60px;
        text-align: center;
    }

    .impact-stat-text {
        margin-left: 90px;
    }

.project-info-row .col-50:first-child {
    padding-right: 8px;
}
.project-info-row .col-50:last-child {
    padding-left: 8px;
}

.project-or {
    text-align: center;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 25px;
    text-transform: uppercase;
    color: #575554;
    font-size: 18px; 
    line-height: 18px;
}

.project-collective-fund {
    background-image: url("images/collective-fund@2x.jpg");
}

.project-collective-fund p {
    color: #fff;
    margin: 0px;
    padding: 0px;
    display: block;
    padding-top: 51px;
    height: 70px;
}
.project.project-collective-fund h2 {
    margin-top: 33px;
}

.project-collective-fund .project-goal {
    background-image: url("images/collective-fund-icon.svg");
    margin-top: 38px;
}

h2.selection-summary {
    font-weight: bold;
    font-size: 16px;
    line-height: 19px;
    color: #575554;
    text-align: left;
    margin-left: 8px;
}

.project-percentage {
    position: absolute;
    color: #fff;
    font-size: 45px;
    line-height: 54px;
    font-weight: bold;
    margin-top: 45px;
}

.donate-selection {
    max-width: 636px;
    margin: 0 auto;
}

.donate-selection .project {
    width: 287px;
    height: 162px;
}

    .donate-selection .project-selected-bg  {
        width: 287px;
        height: 162px;
    }

.donate-selection .project h2 {
    margin-top: 95px;
    font-size: 18px !important;
    line-height: 18px !important;
}


    .donate-selection .project h3 {
        font-size: 18px;
        line-height: 18px;
    }

a.edit-selection, a.edit-selection:link, a.edit-selection:visited, a.edit-selection:hover {
    margin-left: 8px;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 14px;
    text-decoration: none;
    background-image: url("images/project-back-arrow.svg");
    background-position: center left;
    background-repeat: no-repeat;
    padding-left: 10px;
}

a.edit-selection:hover {
    opacity: 0.8;
}

.country-selected-value, .country-non-selected {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background-size: cover;
    background-position: center center;
    margin-right: 15px;
    border-radius: 15px;
}

.selection-summary.donation-headings {
    padding-top: 50px;
    font-size: 20px;
    line-height: 24px;
}

#select-projects-area .portal-form {
    max-width: 610px;
}

.alt-dropdown.country-selection {
    width: 388px;
}

#select-projects-area .portal-form .square-checkbox {
    text-transform: uppercase;
}

.donate-details {
    background-color: #EAEAEA;
    padding: 35px 96px;
    max-width: 590px;
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 6px 6px 12px 0px rgba(0,0,0,0.39);
    -moz-box-shadow: 6px 6px 12px 0px rgba(0,0,0,0.39);
    box-shadow: 6px 6px 12px 0px rgba(0,0,0,0.39);
    font-size: 17px;
    line-height: 24px;
    color: #575554;
}

    .donate-details h2 {
        margin: 0;
        padding: 0;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        line-height: 24px;
        color: #575554;
        text-transform: uppercase;
    }

.redirect-text {
    font-size: 13px;
    line-height: 24px;
    text-transform: uppercase;
    text-align: center;
}

.main-donation-details {
    padding-top: 35px;
}

.donate-details h3 {
    margin-top: 50px;
    font-size: 14px;
    line-height: 24px;
    color: #575554;
}

.donate-redirect-link {
    text-align: center;
    font-size: 10px;
    line-height: 24px;
    text-transform: uppercase;
}

.wire-transfer-details .wire-transfer-details span {
    font-size: 17px !important;
    line-height: 24px !important;
}

.portal-form.done-page {
    max-width: 590px;
}

.account-banner {
    background-color: #1A1A1A;
    padding-top: 10px;
    padding-bottom: 40px;
}

.account-banner .content-block.content-block-v2 {
    max-width: 622px;
}

#profile-photo {
    height: 150px;
    width: 150px;
    background-size: cover;
    background-position: center center;
    float: left;
    margin-right: 50px;
}

#croppie {
    margin: 0 auto;
    margin-top: 20px;
    display: none;
    clear: left;
}

#upload-buttons {
    width: 290px;
    margin: 0 auto;
    display: none;
}

#upload-result {
    display: inline-block;
    width: 70px;
    margin-left: 10px;
}
#cancel-result {
    display: inline-block;
    margin-right: 10px;
    width: 70px;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

    .inputfile + label {
        text-transform: uppercase;
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        display: inline-block;
        opacity: 1 !important;
        text-align: center;
        padding: 10px 20px;
        border-radius: 4px;
        margin-top: 30px;
        margin-right: 20px;
        width: 80px;
        border: none;
        border-radius: 30px;
        padding: 8px 30px;
        font-weight: normal;
        -webkit-appearance: none;
        background: #4FA280; /* Old browsers */
        background: -moz-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, #4FA280 0%, #3380C6 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, #4FA280 0%, #3380C6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4FA280', endColorstr='#3380C6',GradientType=1 ); /* IE6-9 */
    }

        .inputfile + label:hover {
            font-weight: bold;
        }

.account-banner h1 {
    font-size: 36px;
    line-height: 36px;
    color: #fff;
    margin: 0px;
    padding: 0px;
    font-weight: normal;
    padding-top: 25px;
}

.account-banner h1 span {
    display: block;
    font-weight: bold;
}

.account-banner h2 {
    padding: 0px;
    margin: 0px;
    color: #FAB94B;
    font-weight: normal;
    padding-top: 10px;
}

.account-banner h2 span {
    font-weight: bold;
}

.account-section {
    max-width: 622px;
    margin: 0 auto;
}

.account-header {
    background-color: #575554;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
    padding: 10px;
}

.account-section {
    margin-bottom: 3px;
}

.row.pledge-status-row {
    font-size: 16px;
    line-height: 19px;
    text-transform: uppercase;
    color: #575554;
    padding-top: 25px;
}

.pledge-status-text {
    font-weight: bold;
}

.pledge-active {
    color: #3380D2;
}

.pledge-inactive {
    color: #dd5652;
}

.pledge-pending, .pledge-reactivate {
    color: #FAB94B
}

.pledge-tick {
    width: 16.89px;
    height: 16px;
    background-image: url("images/pledge-tick.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.account-text {
    font-size: 12px;
    line-height: 12px;
    text-transform: none;
}

.account-text-bold {
    font-weight: bold;
}

.account-data {
    padding-left: 40px;
    padding-right: 40px;
}

    .donate-selection.account-selection {
        margin-top: 20px;
    }

    .donate-selection.account-selection h2 {
        margin-left: 0px;
        padding-left: 0px;
        text-align: left;
    }

    .donate-selection.account-selection h3 {
        margin-top: 0px;
    }

.whats-app-info {
    font-size: 12px;
    line-height: 14px;
    color: #575554;
}

    .whats-app-info span {
        font-weight: bold;
    }

.country-code {
    position: absolute;
    width: 34px !important;
    height: 21px !important;
    border: 1px solid #707070 !important;
    border-radius: 5px !important;
    padding: 0px 5px !important;
    font-size: 14px !important;
    line-height: 16px !important;
    color: #575554 !important;
}

.phone-number {
    padding-left: 42px !important;
    padding-top: 5px !important;
}

h1.marketing-heading {
    font-size: 16px;
    line-height: 24px;
}

h2.marketing-heading {
    font-size: 13px;
    line-height: 13px;
    padding-bottom: 20px;
}

.account-header a, .account-header a:link, .account-header a:visited, .account-header a:hover {
    display: block;
    float: right;
    background-image: url("images/header-arrow.svg");
    width: 10px;
    height: 6.35px;
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: 8px;
    transform: rotate(180deg);
}

    .account-header a.active-account-header {
        transform: rotate(0deg) !important
    }

.account-header a:hover {
    opacity: 0.7;
}

.alt-dropdown.country-selection.account-country-selection {
    width: 100%;
    margin-top: 15px;
}

.account-help {
    text-align: center;
}

.account-help a {
    display: inline-block !important;
    float: none !important;
    width: 25px !important;
    height: 25px !important;
    margin-left: 0px !important;
    margin-right: 25px !important;
    margin-top: 0px !important;
}

.account-help a.help-mail {
    background-image: url("images/help-account-email.svg") !important;
}

.account-help a.help-whatsapp {
    background-image: url("images/help-account-whatsapp.svg") !important;
}

.account-help {
    max-width: 190px;
    margin: 0 auto;
}

.account-help div {
    float: right;
    margin-top: 0px;
}

.account-header.account-help-header {
    padding: 9px 0px 4px 0px;
}

.project-image-section .slick-list {
    padding: 0 0 0 0;
}

.project-image-section {
    max-width: 770px;
    margin: 0 auto;
}

.project-image-item {
   padding-left: 5px;
   padding-right: 5px;
}

a.story-play-button.member-play-button-v2.project-play-button, a.story-play-button.member-play-button-v2.project-play-button:link,
a.story-play-button.member-play-button-v2.project-play-button:visited, a.story-play-button.member-play-button-v2.project-play-button:hover {
    display: none;
}

.project-image {
    width: 100%;
    height: 252px;
    background-size: cover;
    border-radius: 10px;
    margin-bottom: 12px;
    background-position: center center;
}

.project-video {
    width: 100%;
    height: 252px;
}

    .project-video  .member-video-overlay {
        display: none;
    }

.project-image-section .slick-next.slick-arrow {
    display: none !important;
}

.project-image-arrows {
    max-width: 770px;
    margin: 0 auto;
}

    .project-image-arrows a, .project-image-arrows a:link, .project-image-arrows a:visited, .project-image-arrows a:hover {
        position: absolute;
        z-index: 3;
        margin-top: 100px;
        display: block;
        background-image: url('images/Arrow next L.svg');
        width: 36px;
        height: 56.74px;
        margin-left: 20px;
    }

        .project-image-arrows a.profile-arrow-next, .project-image-arrows a.profile-arrow-next:link, .project-image-arrows a.profile-arrow-next:visited, #member-profile-image-arrows-v2 a.profile-arrow-next:hover {
            background-image: url("images/Arrow next R.svg");
            margin-left: 714px;
        }

.hazard {
    background-image: url("images/hazard.svg");
    width: 32px;
    height: 14px;
    background-size: 100%;
    float: left;
    margin-right: 15px;
    background-repeat: no-repeat;
}

.hazard-text {
    text-transform: none;
    font-size: 12px;
    line-height: 14px;
}

.hazard-text span {
    font-weight: bold;
}

.donate-selection input[type="submit"] {
    margin-top: 40px;
    margin-bottom: 40px;
}

.pledge-status-row a, .pledge-status-row a:link, .pledge-status-row a:visited, .pledge-status-row a:hover {
    font-size: 12px;
    line-height: 14px;
    font-weight: normal;
    text-transform: none;
}

/**** end portal */
/******************************************* media styles ********************/
@media only screen and (max-width : 1280px) {
    .not-ready {
        margin-left: 40px;
        margin-right: 40px;
    }

        .not-ready .col-33 {
            margin-left: 30px;
            margin-right: 30px;
        }

    .resource-box {
        min-height: 85px;
    }

    #football-for-good-in-history .slick-list {
        margin: 0 auto;
        max-width: none;
        padding-right: 50px;
    }

    .story-archive-content .col-33 {
        flex-basis: 50%;
    }

    .field-image {
        width: 100%;
    }
}

@media only screen and (max-width : 1220px) {
    #members-container .slick-next.slick-arrow{
        margin-left: -330px;
    }

    #featured-members {
        margin-left: 350px;
    }

    .join-member-area {
        margin-left: 140px;
    }

    #member-video {
        width: 360px !important;
    }

        #member-video iframe {
            width: 360px;
        }

    #member-carousel {
        margin-left: 140px;
        max-width: 400px;
    }

        #member-carousel .slick-next.slick-arrow {
            margin-left: -120px;
        }

    /*** resource centre */
    .resource-content .col-25 {
        flex-basis: 50%;
    }
}

@media only screen and (max-width : 1190px) {
    #members-bar-content-box {
        padding-left: 40px;
    }
    .members-toggle span {
        font-size: 12px;
    }
    a.members-tab, a.members-tab:link, a.members-tab:visited, a.members-tab:hover {
        font-size: 14px;
        margin-right: 10px;
    }
}

@media only screen and (max-width : 1160px) {
    #about-featured .about-col-50:first-child {
        padding-right: 20px;
        flex-basis: 50%;
    }

    #about-featured .about-col-50:last-child {
        padding-left: 20px;
        flex-basis: 50%;
    }

    #about-featured .slick-prev.slick-arrow {
        margin-right: 380px !important;
    }

    #about-featured .slick-next.slick-arrow {
        margin-right: 280px !important;
    }

    #featured-members-v2 .slick-list {
        padding: 0 20% 0 0;
    }

    #latest-stories.members-latest-stories .slick-list {
        padding: 0 20% 0 0;
    }
}

@media only screen and (max-width : 1130px) {
    #members-container .slick-next.slick-arrow {
        margin-left: -305px;
    }

    #featured-members {
        margin-left: 310px;
    }

    .join-member-area {
        margin-left: 90px;
    }
}

@media only screen and (max-width : 1089px) {
    #members-container .slick-next.slick-arrow {
        margin-left: -380px;
    }

    #featured-members {
        margin-left: 440px;
    }

    .join-member-area {
        margin-left: 210px;
    }
}


@media only screen and (max-width : 1060px) {
    #menu li {
        margin-left: 10px;
        margin-right: 10px;
    }

    .organisation-content {
        max-width: 600px;
    }

    .organisation-content .col-25 {
        flex-basis: 50%;
    }

    .resource-folder-content .col-25 {
        flex-basis: 33%;
    }
}

@media only screen and (max-width : 1034px) {
    .footer-small-links .footer-dot {
        flex-basis: 5%;
    }
}

@media only screen and (max-width : 1020px) {
    #members-list-area .row {
        display: block;
    }

    #members-list-area .col-50 {
        display: block;
        flex-basis: 100%;
    }

    #member-video {
        width: 1000px !important;
    }

        #member-video iframe {
            width: 500px;
        }

    #member-carousel {
        margin-left: 40px;
        max-width: 1000px;
    }

        #member-carousel .slick-next.slick-arrow {
            display: none;
        }

        #member-carousel .slick-list.draggable {
            width: 1000px !important;
        }

    #member-profile {
        position: fixed;
        top: 0px;
        background-color: #fff;
        bottom: 0px;
        height: 100%;
        width: 100%;
        left: 1000px;
    }

    .member-arrow, .member-profile-arrow, #member-profile-name {
        display: block !important;
    }

    .members-flag {
        margin-right: 60px
    }

    /** MIGHT HAVE TO REMOVE IF CAROUSEL COMES BACK */
    #member-carousel {
        clear: both;
        max-width: 161px !important;
    }

    #member-card {
        margin: 0 auto;
    }
    /** END OF CONTENT TO REMOVE*/

    .how-it-works-container {
        max-width: 250px;
    }

    .hero-shot-v2 h1 {
        font-size: 36px;
        line-height: 36px;
    }

    .hero-shot-v2 h2 {
        font-size: 26px;
        line-height: 26px;
    }

    .member-profile-header-v2 h1 {
        font-size: 62px;
        line-height: 62px;
    }

        .member-profile-header-v2 h1 span {
            font-size: 42px;
            line-height: 42px;
        }

    .member-profile-header-v2 h2 {
        font-size: 18px;
        line-height: 18px;
    }
}

@media only screen and (max-width : 1003px) {
    .member-list-content .col-25 {
        flex-basis: 50%;
    }
}

@media only screen and (max-width : 1003px) {
    footer .row .col-25 {
        flex-basis: 22% !important;
    }

        footer .row .col-25:last-child {
            flex-basis: 29% !important;
        }


    .featured-supporters-area {
        margin-left: -60px;
    }

        #featured-supporters .slick-next.slick-arrow {
            margin-left: -110px;
        }

    /*** home page involved section */
    .involved .row {
        display: block;
    }

    .involved .col-33 {
        flex-basis: 100% !important;
    }

    .project-filters {
        margin-left: 40px;
        margin-right: 40px;
    }

    .project-filters-content-box {
        padding-left: 40px;
        padding-right: 40px;
    }

    .resource-box {
        min-height: 103px;
    }
}


@media only screen and (max-width : 1000px) {

    #featured-members-v2 .slick-list {
        padding: 0 35% 0 0;
    }

    #latest-stories.members-latest-stories .slick-list {
        padding: 0 35% 0 0;
    }
}

@media only screen and (max-width : 970px) {
    #members-container .slick-next.slick-arrow {
        margin-left: -320px;
    }

    #featured-members {
        margin-left: 330px;
    }

    .join-member-area {
        margin-left: 110px;
    }

    #members-container-desktop .slick-next.slick-arrow {
        margin-left: -85px;
    }

    #featured-members-desktop {
        margin-left: 100px;
    }
}

@media only screen and (max-width : 980px) {
    .footer-small-links {
        display: block;
    }

    .footer-small-links div {
        float: left;
    }

    .footer-small-links div {
        width: 12%;
        flex-basis: auto;
    }

    .footer-small-links .footer-dot {
        flex-basis: auto;
        width: 20px !important;
    }
}

@media only screen and (max-width : 950px) {

    .about-container {
        height: auto;
        padding-bottom: 200px;
    }

    #about-carousel {
        margin-top: -100px;
    }

    .about-container .row:first-child {
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap-reverse;
    }

    #about-featured .about-col-50:first-child {
        padding-right: 0px;
        flex-basis: 100%;
        width: 100%;
        padding-top: 50px;
    }

    #about-featured .about-col-50:last-child {
        padding-left: 0px;
        flex-basis: 100%;
        width: 100%;        
    }

    #about-featured .slick-prev.slick-arrow {
        margin-top: 0px !important;
        display: none !important;
    }

    #about-featured .slick-next.slick-arrow {
        margin-top: -180px !important;
        margin-left: -40px !important;
        left: 50%;
    }

    .about-image {
        margin-top: 50px;
    }
}

.cc-message {
    font-size: 12px;
}

@media only screen and (max-width : 920px) {
    .member-bio .row {
        flex-wrap: wrap;
    }

        .member-bio .row {
            display: flex !important;
        }

        .member-bio .row .col-40, .member-bio .row .col-30, .member-bio .row .col-15 {
            flex-basis: 50% !important;
        }

        .member-bio .row div.col-30 {
            border-left: none;
            padding-left: 0px;
        }
}

@media only screen and (max-width : 900px) {
    footer .row {
        display: flex !important;
        flex-wrap: wrap;
    }

        footer .row .col-25 {
            flex-basis: 40% !important;
        }

            footer .row .col-25:nth-child(2), footer .row .col-25:last-child {
                flex-basis: 60% !important;
            }

    .testimonials .row {
        display: block;
    }

        .testimonials .row .col-50 {
            display: block;
            flex-basis: 100% !important;
        }

    .testimonials {
        margin-bottom: 248px;
    }
    .testimonial-item {
        margin: 0 auto;
        max-width: 450px;
        padding-top: 56px !important;
        clear: left;
    }

    .supporters-carousel .testimonial-item {
        clear: none;
    }

    .testimonial {
    }

    .testimonial-3 {
        margin-top: 0px !important;
    }

    .sign-up-left .testimonial {
        margin-top: 19px !important;
    }

    .sign-up-left {
        padding-right: 20px;
    }

    .sign-up-right {
        padding-left: 20px;
    }

    .testimonials h2 {
        text-align: center;
    }

    #selected-projects .row {
        flex-wrap: wrap;
    }

    #selected-projects .col-18 {
        flex-basis: 25%;
    }

    #selected-projects .col-28 {
        flex-basis: 100%;
        margin-top: -20px;
    }

    #about-featured .testimonial {
        margin-top: 0px !important;
    }

    .how-it-works-container {
        max-width: 220px;
    }

    /*** resources */
    #resource-areas .col-33, #resource-areas .col-25 {
        flex-basis: 100%;
    }

    #resource-areas {
        display: block;
        margin-right: 0px;
        margin-bottom: 10px;
    }

    .resource-box-area {
        margin-right: 0px;
    }

    .resource-box {
        min-height: 0px;
        background-position: 10px 23px;
        padding-top: 20px;
        text-align: left;
        padding-left: 70px;
        padding-right: 10px;
        padding-bottom: 20px;
        background-size: 50px auto;
    }

    .active-resource .resource-box {
        padding-bottom: 25px;
    }

    .resource-col {
        padding-bottom: 20px;
    }

    .resource-box h3 {
        text-align: left;
    }

    .resource-box-arrow {
        margin-left: -38px;
    }

    #resource-area-intro {
        width: auto;
    }

    .language-filters a, .language-filters a:link, .language-filters a:visited, .language-filters a:hover {
        font-size: 14px;
    }

    .resource-folder-content .col-25 {
        flex-basis: 50%;
    }

    #fixed-resource-bar.fixed-bar {
        display: block;
    }

    .resource-content-block {
        padding-bottom: 76px;
    }
}

@media only screen and (max-width : 860px) {
    .hero-shot h1 {
        margin-left: 100px;
    }
    .hero-shot p {
        margin-left: 100px;
    }

    .center-form {
        margin-left: 40px;
        margin-right: 40px;
    }

        .center-form.invite-form {
            margin: 0 auto;
            margin-top: 60px;
        }

    #right-nav {
        display: none;
    }

    #menu {
        display: none;
    }

    #logo, #logo:link, #logo:visited, #logo:hover {
        float: none;
        margin: 0 auto;
        display: block;
    }

    nav {
        padding-bottom: 21px;
    }

    .nav-join-mobile {
        display: inline-block !important;
        float: right;
        margin-right: 40px;
        margin-top: 3px;
    }

    .hamburger {
        display: block !important;
    }

    #dropbtn {
        display: none;
    }

    /** slick carousels **/
    .slick-next.slick-arrow {
        margin-left: -100px;
    }

    #featured-stories {
        margin-left: 130px;
    }

    .slick-list {
        padding: 0 30% 0 0;
    }

    /** slider */
    .slider-background h1, .slider-background .strapline {
        margin-left: 0px !important;
        margin-right: 0px !important;
        padding-left: 40px;
        max-width: none;
        width: 85%;
        padding-right: 40px;
    }

    .rslides_tabs {
        margin-left: 40px;
    }

    .story-row {
        display: block;
        padding-bottom: 0px;
    }

        .story-row .col-33 {
            flex-basis: 100%;
            margin-left: 30px;
            margin-right: 30px;
            margin-bottom: 20px;
        }

    .story-row .story-item {
        margin: 0 auto;
    }

    /*** sign up form ***/
    .row.sign-up {
        display: block;
    }

    .sign-up-left, .sign-up-right {
        display: block;
    }

        .sign-up-left h1 {
            text-align: center;
        }

    #sign-up-bg {
        margin-top: 450px;
    }

    .sign-up-right {
        padding-top: 100px;
    }

        .sign-up-right .center-form {
            margin: 0 auto;
        }

    .sign-up-left .row {
        display: flex !important;
    }

    .col-33.sign-up {
        padding-left: 0px;
        padding-right: 0px;
        margin: 0px;
    }

    .sign-up-bar-left {
        margin-left: 130px;
    }

    .sign-up-bar-right {
        margin-left: -80px;
    }

    .sign-up-left .testimonial {
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .login-testimonial {
        margin: 0 auto;
        max-width: 450px;
    }

    #members-container .slick-list {
        padding: 0 50% 0 0;
    }

    .not-ready {
        padding-left: 20px;
        padding-right: 20px;
    }

        .not-ready .col-33 {
            margin-left: 30px;
            margin-right: 30px;
        }

    .account-form .selected-projects {
        flex-wrap: wrap;
        margin: 0 auto;
        max-width: 500px;
    }

    .account-form .selected-projects .col-25 {
        flex-basis: 50% !important;
    }

    .account-form .selected-projects .col-25 .fund-box {
        margin-left: auto;
        margin-right: auto;
    }

    #how-it-works .row {
        display: block;
    }

    .how-it-works-container {
        max-width: 300px;
    }

    .how-it-works-arrow {
        left: 50%;
        margin-left: -40px;
        margin-top: -65px;
    }

    .arrow-right {
        width: 2px;
        height: 20px;
        margin-top: 25px;
    }

        .arrow-right .arrowhead {
            margin-left: -6px;
            margin-top: 20px;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 7px solid #4FCA9B;
        }

    /*** stories v4 */
    #hero-stories {
        display: none;
    }

    #mobile-hero-stories {
        display: block;
        border-bottom: none;
        background-color: #000;
    }

    #mobile-hero-stories h1 {
        font-size: 36px;
        line-height: 40px;
        padding-left: 20px;
        padding-right: 20px;
        width: auto;
    }

        #mobile-hero-stories h2 {
            font-size: 16px;
            line-height: 24px;
            padding-top: 10px;
            padding-left: 20px;
            padding-right: 20px;
            color: #fff;
            text-align: left;
            font-weight: normal;
        }

    #mobile-hero-stories a {
        color: #fff !important;
        text-decoration: none !important;
        display: block;
    }

    #mobile-hero-stories .hero-story-title {
        background-color: #000;
        margin-top: 0px;
        margin-top: -4px;
        padding-top: 20px;
        height: 225px;
        background-image: none !important;
    }

        #mobile-hero-stories .slick-list, #photo-gallery-mobile .slick-list {
            margin: 0 auto;
            max-width: none;
            margin-right: 0px;
            padding: 0 0% 0 0;
            border: none;
        }

    .slick-dots {
        background-color: #000;
        padding-top: 1px;
        padding-bottom: 25px;
        margin-top: -1px;
        width: 100px;
        margin: 0 auto;
        position: absolute;
        left: 50%;
        right: 50%;
        margin-left: -50px;
        margin-top: 570px;
    }

    .slick-dots li {
        display: inline-block;
    }

    .slick-dots li button {
        background-color: #fff;
        border-radius: 50%;
        border: none;
        width: 12px;
        height: 12px;
        font-size: 0px;
        line-height: 0px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .slick-dots li.slick-active button {
        width: 18px;
        height: 18px;
    }

    #latest-stories {
        margin-top: 0px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

        #latest-stories .content-block {
            
        }

        #latest-stories h2, #latest-stories h3 {
            font-size: 14px;
            line-height: 15px;
            margin-bottom: 20px;
        }

        #latest-stories h3 {
            margin-top: 20px;
        }

    #latest-stories .slick-prev.slick-arrow, #latest-stories .slick-next.slick-arrow {
        display: none !important;
    }

    #photo-gallery {
        margin-top: 0px;
        display: none;
    }

    #stories-from-the-field {
        margin-top: 0px;
        padding-top: 20px;
        padding-bottom: 0px;
        height: 300px;
    }

        #stories-from-the-field {
            height: 425px;
        }
        
        #stories-from-the-field .row {
            padding-left: 5px;
            padding-right: 20px;
        }

        #stories-from-the-field h2 {
            padding-left: 20px;
            padding-right: 20px;
        }

        #stories-from-the-field h2, #stories-from-the-field h3, #stories-from-the-field h4 {
            font-size: 14px;
            line-height: 16px;
        }

    #stories-from-the-field h3 {
        font-size: 18px;
        line-height: 22px;
    }

    #stories-from-the-field h2 {
        margin-top: 10px;
    }

    .field-image {
        height: 218px;
    }

    .story-from-the-field {
        margin-left: 10px;
        margin-right: 0px;
        padding-right: 0px;
    }

    #stories-from-the-field .slick-list {
        margin: 0 auto;
        max-width: none;
        padding-right: 50px;
    }

    #football-for-good-in-history {
        background-color: #010101;
        margin-top: -20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    #football-for-good-in-history h2 {
        color: #fff;
        font-size: 14px;
        padding-left: 20px;
        padding-right: 20px;
    }

    #football-for-good-in-history .row {
        padding-left: 20px;
        padding-right: 20px;
    }

    .football-for-good-story h3, .football-for-good-story h4 {
        color: #fff;
        font-size: 14px !important;
        line-height: 16px !important;
    }

    .football-for-good-image {
        width: 79px;
        height: 79px;
    }

    #football-for-good-in-history .slick-next.slick-arrow {
        display: none !important;
    }

    #football-for-good-magazine {
        flex-direction: column;
        margin-top: 0px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    #football-for-good-magazine .col-25:first-child {
        display: none !important;
    }

        #football-for-good-magazine .col-25 {
            flex-basis: 100% !important;
            width: 100% !important;
            text-align: center;
        }
        #football-for-good-magazine .col-50 {
            flex-basis: 100% !important;
            width: 100% !important;
            margin-bottom: -80px;
        }

    #football-for-good-magazine-image {
        display: block;
        margin: 0 auto;
        width: 100%;
        height: auto;
    }

    #football-for-good-magazine-text {
        font-weight: normal;
        font-size: 22px;
    }

    #featured-videos .row {
        display: block;
    }

    #featured-videos .col-60 {
        margin-bottom: 20px;
    }

    #featured-videos {
        background-color: #010101;
        padding-top: 20px;
        padding-bottom: 0px;
        border-top: 3px solid #707070;
    }

        #featured-videos h2, #latest-stories h2 {
            margin-top: 0px;
        }

        #featured-videos h2, #featured-videos h3, #featured-videos h4 {
            color: #fff;
            font-size: 14px !important;
            line-height: 15px !important;
        }

        #featured-videos #main-featured-video h3 {
            font-size: 24px !important;
            line-height: 28px !important;
        }

        #featured-videos h2 {
            margin-left: -20px;
        }

    #featured-videos .row {
        padding-left: 20px;
        padding-right: 20px;
    }

    .featured-video-small {
        min-height: 150px;
    }

    #main-featured-video {
        padding-right: 0px;
    }

    #keep-exploring {
        padding-top: 0px;
    }

    #keep-exploring h2 {
        padding-left: 20px;
    }

    #keep-exploring .content-block {
        border-top: none;
    }

    #keep-exploring h2 {
        font-size: 14px;
    }

    #story-search-term {
        font-size: 14px;
        width: 180px;
        margin-right: 20px;
        margin-top: -10px;
    }

    #story-archive {
        padding-left: 20px;
    }

    .story-archive-content .col-33 {
        flex-basis: 100%;
    }

    .story-archive-content h3, .story-archive-content h4 {
        line-height: 16px;
        font-size: 14px;
    }

    #keep-exploring .archive-photo {
        width: 130px;
        height: 127px;
    }

    #photo-gallery-mobile {
        display: block;
        background-color: #000;
    }

        #photo-gallery-mobile a {
            background-color: #000;
            padding-top: 68px;
            padding-bottom: 40px;
            display: block;
            text-decoration: none !important;
        }

    #photo-gallery-mobile .image-slide.mobile {
        display: block;
        height: 401px;
        background-size: cover;
        background-position: center center;
    }

    #photo-gallery-mobile h2, #photo-gallery-mobile h1 {
        padding-left: 20px;
        padding-right: 20px;
        background-color: #000;
        color: #fff;
        text-align: left;
    }

    #photo-gallery-mobile h2 {
        font-size: 14px;
        line-height: 16px;
        margin-bottom: 10px;
        font-weight: normal;
        padding-top: 20px;
    }

        #photo-gallery-mobile h1 {
            font-size: 24px;
            line-height: 28px;
            padding-bottom: 50px;
        }

    a.story-play-button {
        width: 103px;
        height: 103px;
        margin-top: -160px;
    }

    #main-featured-video h3 {
        margin-top: 65px;
    }

    .featured-video-small iframe {
        margin-bottom: 20px;
    }

    .story-content h1 {
        font-size: 24px;
        line-height: 28px;
    }

    .story-content h2 {
        font-size: 18px;
        line-height: 22px;
    }

    .hero-shot-v2 {
        height: 128px;
        padding-top: 420px;
    }

    .hero-shot-v2-text {
        padding-left: 17px;
        padding-right: 17px;
        background-color: #000;
        height: 128px;
    }

    .hero-shot-bar-v2 {
        height: 190px;
        background-repeat: repeat-x;
        margin-top: -280px;
    }

    #featured-members-v2 {
        margin-top: 160px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .hero-shot-v2.member-profile-header-v2 {
        padding-top: 190px;
        height: 185px;
    }

    .member-quote-v2 {
        font-size: 22px;
        line-height: 22px;
        padding-bottom: 25px;
    }

    .member-text {
        font-size: 17px;
        line-height: 17px;
        padding-bottom: 25px;
        padding-top: 25px;
    }

    .content-block.content-block-v2 h2 {
        font-size: 14px; 
        line-height: 14px;
    }

    #latest-stories.members-latest-stories {
        margin-top: 0px;
    }

    #latest-stories.members-latest-stories h2 {
        padding-left: 0px;
        padding-right: 0px;
    }

    #latest-stories.members-latest-stories .row {
        padding-left: 0px;
        padding-right: 0px;
    }

        #latest-stories.members-latest-stories{
            padding-left: 15px;
            padding-right: 15px;
        }

    .member-bio {
        padding: 15px;
    }

    a.member-bio-close, a:link.member-bio-close, a:visited.member-bio-close, a:hover.member-bio-close {
        margin-right: -6px;
        margin-top: -15px;
    }

        .member-bio .row div.col-15, .member-bio .row div.col-40, .member-bio .row div.col-30 {
            margin-bottom: 20px;
        }

    .content-block.content-block-v2.content-block-members-list {
        padding-left: 15px;
        padding-right: 15px;
    }

    .flags {
        margin-top: -30px;
    }

    .flags a {
        width: 20px !important;
        height: 20px !important;
        background-size: 100%;
    }
}

@media only screen and (max-width : 850px) {

    .footer-small-links div {
        width: 11%;
    }
}

@media only screen and (max-width : 820px) {
    .team .row .col-25 {
        flex-basis: 50%;
    }

    .slick-slide.slick-cloned .member-profile-image-v2 {
        float: none;
    }

    .slick-slide .member-profile-image-v2 {
        float: none;
    }

    #member-profile-images-v2 {
        padding-left: 15px;
        padding-right: 15px;
    }

    #member-profile-images-v2 .slick-list {
        padding: 0 5% 0 0 !important;
    }

    .member-profile-image-v2 {
        height: 234px;
    }

    .member-profile-slide-v2 {
        padding-right: 20px;
    }

    #member-profile-image-arrows-v2 {
        display: none;
    }

    #member-profile-images-v2 iframe {
        height: 234px;
        margin-top: -195px;
    }

    .member-video-overlay {
        height: 150px;
        margin-top: 45px;
    }

    a.story-play-button.member-play-button-v2, a:link.story-play-button.member-play-button-v2, a:visited.story-play-button.member-play-button-v2, a:hover.story-play-button.member-play-button-v2 {
        margin-top: -205px;
        margin-bottom: 81px;
        width: 80px;
        height: 80px;
    }

    .project-image-arrows {
        display: none;
    }

    .project-image-section .slick-list {
        padding: 0 5% 0 0;
    }
}

@media only screen and (max-width : 810px) {

    .organisation-content .col-25 {
        flex-basis: 50%;
    }

    .footer-small-links div {
        width: 11%;
    }
}

@media only screen and (max-width : 800px) {
    #members-container .slick-list, #members-container-desktop .slick-list {
        padding: 0 30% 0 0;
    }

    #member-video iframe {
        width: 400px;
        margin-top: -15px;
    }

    .not-ready .row {
        display: block;
    }

        .not-ready .row .col-33 {
            background-position: top center;
            padding-top: 170px;
            margin-bottom: 40px;
        }

    .not-ready p {
        min-height: 0px;
    }

    .project-filters .row {
        display: block;
    }

    .project-filters .col-33 {
        flex-basis: 100%;
        margin-bottom: 20px;
    }

    .project-filters .region-checkboxes {
        margin: 0;
        width: auto;
        display: none
    }

    .project-filters label:first-child {
        display: none;
    }

    .project-filters .filter-drop-down {
        display: block;
    }

    .project-filters .checkboxes {
        display: none;
    }

    .select-projects-row .col-50 {
        flex-basis: 100%;
    }

    .project {
        margin-left: 0px;
        margin-right: 0px;
        height: 194px;
        max-width: 1000px;
    }

    .project-selected-bg {
        margin-left: 0px;
        margin-right: 0px;
        height: 194px;
        max-width: 1000px;
    }

    .project-goal {
        margin-top: 130px;
    }

    .project-info {
        margin-left: 0px;
        margin-right: 0px;
    }

        .project-info .row {
            flex-wrap: wrap;
        }

        .project-info .col-50 {
            flex-basis: 100%;
        }

    .project h2, .project h3 {
        font-size: 18px;
        line-height: 18px;
    }

    .project h2 {
        margin-top: 128px;
    }

    .show-project {
        height: 16px !important;
        width: 16px !important;
        margin-top: 114px !important;
        background-size: 100%;
    }

    .project-image-section .col-50 {
        padding: 0px !important;
    }

    .region-text {
        width: 50%;
    }

    .region-image {
        width: 142px;
        height: 142px;
    }

    .project-goal-image {
        width: 50px;
        height: 50px;
    }

    .project-info-section-text.goal-supported-text {
        margin-left: 89px;
    }

    .project-info-row .col-50:first-child {
        padding-right: 0px;
    }

    .project-info-row .col-50:last-child {
        padding-left: 0px;
    }

    .impact-stat-2 {
        margin-top: -50px;
    }

    .project-collective-fund p {
        padding-top: 41px;
        height: 60px;
    }

    .project-collective-fund .project-goal {
        margin-top: 34px;
    }

    h2.selection-summary {
        margin-left: 0px;
        font-size: 12px;
        line-height: 14px;
    }

    .selection-summary.donation-headings {
        font-size: 16px;
        line-height: 19px;
    }

    .donate-selection .select-projects-row .col-50 {
        flex-basis: 50% !important;
    }

        .donate-selection .select-projects-row .col-50:first-child {
            padding-right: 8px;
            box-sizing: border-box;
        }

        .donate-selection .select-projects-row .col-50:last-child {
            padding-left: 8px;
            box-sizing: border-box;
        }

    .donate-selection .project {
        width: 100%;
        box-sizing: border-box;
        height: 94px;
    }

    .donate-selection .project-selected-bg {
        width: 100%;
        box-sizing: border-box;
        height: 94px;
    }

    .donate-selection .select-projects-row {
        display: flex !important;
    }

    .project-percentage {
        font-size: 26px;
        line-height: 32px;
        margin-top: 16px;
    }

    .donate-selection .project h2 {
        margin-top: 45px;
        font-size: 12px !important;
        line-height: 12px !important;
    }

    .donate-selection .project h3 {
        font-size: 12px !important;
        line-height: 12px !important;
    }

    #select-projects-area .portal-form .col-100 {
        margin-left: 0px;
        margin-right: 0px;
    }

    .alt-dropdown.country-selection {
        width: 100%;
        max-width: 341px;
    }

    .donate-details {
        padding: 20px 10px;
    }

    .main-donation-details {
        padding-top: 35px;
    }

    .hidden-header {
        display: none;
    }

    #hidden-header-pull-down {
        display: block;
        background-color: #000;
        height: 15px;
    }

        #hidden-header-pull-down a, #hidden-header-pull-down a:link, #hidden-header-pull-down a:visited, #hidden-header-pull-down a:hover {
            background-image: url("images/header-arrow.svg") !important;
            width: 10px;
            height: 6.85px;
            background-size: 100%;
            display: block;
            float: right;
            margin-top: 3px;
            margin-right: 15px;
            margin-bottom: 5px;
            transform: rotate(180deg);
        }

    .header-pulled-down {
        transform: rotate(0deg) !important;
    }

    #nav {
        padding-bottom: 0px;
    }

    .project-video iframe {
        margin-top: -185px;
    }

    .project-video .member-video-overlay {
        display: block;
        height: 140px;
        border-radius: 10px;
    }

    a.story-play-button.member-play-button-v2.project-play-button, a.story-play-button.member-play-button-v2.project-play-button:link,
    a.story-play-button.member-play-button-v2.project-play-button:visited, a.story-play-button.member-play-button-v2.project-play-button:hover {
        display: block;
        margin-top: -210px !important;
    }
}

@media only screen and (max-width : 780px) {
    .join-involved-box p {
        height: 260px;
    }

    .join-involved-box {
        height: 680px;
    }
}

@media only screen and (max-width : 745px) {
    .supporters-carousel .testimonial-name {
        max-width: 200px;
    }
}

@media only screen and (max-width : 720px) {
    .spread-the-word .row {
        display: block;
    }

    .spread-the-word iframe {
        height: 300px;
    }

    .join-involved .row {
        display: block;
        margin-left: 20px;
        margin-right: 20px;
    }

    .join-involved-box p {
        height: auto;
    }

    .join-involved-box {
        height: auto;
    }

    #selected-projects .row {
        margin: 0 auto;
        max-width: 300px;
    }

    #selected-projects .col-18 {
        flex-basis: 50%;
    }
}


@media only screen and (max-width : 700px) {
    .hero-shot h1 {
        margin-left: 40px;
    }

    .hero-shot p {
        margin-left: 40px;
    }

    #members-container {
        display: block !important;
    }

    #members-container-desktop {
        display: none;
    }

    #pledge-options .row {
        display: block;
    }

    #pledge-options .col-50 {
        margin-right: 0px !important;
    }

    #members-container-desktop .slick-list {
        padding: 0 10% 0 0;
    }

    #members-container .slick-list {
        padding: 0 0 0 0 !important;
    }

    .promise .row {
        display: block;
    }

        .promise .row .col-50:first-child {
            margin-right: 0px;
        }

        .promise .row .col-50:last-child {
            margin-left: 0px;
        }

    .sign-up-bar-left {
        margin-left: 100px;
    }

    .sign-up-bar-right {
        margin-left: -100px;
    }

    .share-window {
        max-width: 500px;
        padding-left: 40px;
        padding-right: 40px;
    }

    #member-carousel .slick-next.slick-arrow {
        display: none !important;
    }

    #member-carousel {
        margin-left: 40px;
    }

    .supporters-carousel .slick-next.slick-arrow {
        display: none !important;
    }

    .supporters-carousel {
        margin-left: 100px;
    }

    #featured-supporters-area-mobile {
        display: block;
    }

    #featured-supporters-area {
        display: none;
    }

    .members-list-section-v2 {
        display: block;
    }

    .members-list-section-v2 .col-20 {
        flex-basis: 100%;
        display: block;
    }

        .members-list-section-v2 .col-80 {
            flex-basis: 100%;
            display: block;
        }

    a.member-filter, a:link.member-filter, a:visited.member-filter, a:hover.member-filter {
        display: block;
    }

    .members-list-section-v2 .col-20 {
        position: fixed !important;
        background-color: rgba(255, 255, 255, 0.9);
        z-index: 99999;
        width: 192px;
        height: 100%;
        top: 0px;
        left: 0px;
        display: none;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box;
    }

    #member-filters {
        margin-top: 50px;
    }

    #member-filters .k-dropdown.alt-dropdown {
        width: 166px !important;
        font-size: 12px;
    }

    #member-filters .k-dropdown-wrap {
        border-color: #D0CFCF !important;
        font-size: 12px;
    }

    a#close-members-filters, a:link#close-members-filters, a:visited#close-members-filters, a:hover#close-members-filters {
        display: inline-block;
    }

    a#clear-member-filters, a#clear-member-filters:link, a#clear-member-filters:visited, a#clear-member-filters:hover {
        margin-right: 22px;
    }

    .members-bar {
        padding-bottom: 15px;
    }
}

@media only screen and (max-width : 665px) {
    #member-video {
        width: 100% !important;
        max-width: 660px !important;
    }

        #member-video iframe {
            width: 75%;
        }

    #member-carousel {
        margin-left: 40px;
        max-width: 600px;
    }

        #member-carousel .slick-list.draggable {
            width: 100% !important;
        }

    .footer-small-links {
        display: flex !important;
        flex-wrap: wrap !important;
    }

        .footer-small-links div {
            flex-basis: 33.33% !important;
            width: auto !important;
            text-align: left;
        }

    .footer-dot {
        display: none;
    }

    .footer-small-links div {
        padding-bottom: 10px;
    }

    #logo, #logo:link, #logo:visited, #logo:hover {
        width: 92.92px;
        height: 33.57px;
        background-repeat: no-repeat;
    }

    /*** resource centre */
    .resource-content .col-25 {
        flex-basis: 100%;
    }
}

@media only screen and (max-width : 650px) {
    #select-projects-area .portal-form .col-100 {
        margin-left: 15px;
        margin-right: 15px;
    }
}

@media only screen and (max-width : 601px) {
    #members-container .slick-next.slick-arrow, #members-container-desktop .slick-next.slick-arrow {
        display: none !important;
    }

    #featured-members, #featured-members-desktop {
        margin-left: 250px;
    }

    .join-member-area {
        margin-left: 20px;
    }

    .left-home-stat {
        float: none;
    }

    .right-home-stat {
        float: none;
    }

    .supporters-carousel .slick-list {
        padding: 0 12% 0 0 !important;
    }

    /* resource centre */
    #resource-header {
        display: none;
    }

    .resource-folder-content .col-25 {
        flex-basis: 100%;
    }

    .story-hero-shot.desktop {
        display: none;
    }

    .story-hero-shot.mobile {
        display: block;
    }

    #featured-members-v2 .slick-list {
        padding: 0 25% 0 0;
    }

    #latest-stories.members-latest-stories .slick-list {
        padding: 0 25% 0 0;
    }
}

@media only screen and (max-width : 590px) {
    #member-video {
        width: 100% !important;
        max-width: 500px !important;
    }

        #member-video iframe {
            width: 50%;
        }

    #member-carousel {
        margin-left: 40px;
        max-width: 500px;
    }

    .members-photo {
        margin-left: 10px;
    }

    .about-stat-row {
        display: block;
    }

    .about-stat-row .col-50 {
        flex-basis: 100% !important;
        padding: 0px !important;
    }

    .about-stat-row .testimonial-item {
        margin: 0 auto !important;
        width: 300px;
    }

    .about-stat {
        margin: 0 auto;
        margin-top: 50px;
    }

    .about-intro .row {
        display: block;
    }

    .about-intro .col-50:first-child {
        margin-bottom: 20px;
    }

    .members-toggle {
        display: none !important;
    }

    /*** resourece centre */
    .resource-content-list .resource-content .resource-title {
        max-width: 225px;
    }
}

@media only screen and (max-width : 540px) {
    .mobile-only {
        display: block;
    }

    .web-only {
        display: none;
    }

    .submit-row {
        display: flex !important;
    }

    .center-form {
        margin-left: 40px;
        margin-right: 40px;
    }

        .center-form .content-box {
            padding-left: 10px;
            padding-right: 10px;
        }

        .center-form.invite-form {
            padding-left: 40px;
            padding-right: 20px;
        }

        .center-form .submit-row {
            padding-left: 10px;
            padding-right: 10px;
        }

    p.alread-registered {
        padding-bottom: 20px;
    }

    /*** footer ****/

    a.street-football-world, a.street-football-world:link, a.street-football-world:visited, a.street-football-world:hover {
        margin-left: 0px;
        float: none;
        width: 125px;
    }

    .footer-info {
        margin-left: 0px;
        margin-top: -30px;
    }

    /*** hero shot */

    .hero-shot h1, .hero-shot p {
        margin-left: 40px;
        margin-right: 40px;
        text-align: left;
    }

    .hero-shot h1 {
        padding-top: 80px;
    }

    .row {
        display: block;
    }

    .col-50 {
        flex-basis: 100%;
    }

    /*** about page ***/
    .about-intro .col-50 {
        padding-left: 40px;
        padding-right: 40px;
    }


    #featured-stories {
        margin-left: 40px;
    }

    .slick-next {
        display: none !important;
    }

    .slick-list {
        padding: 0 30% 0 0;
    }

    .sign-up-bar-left {
        margin-left: 80px;
    }

    .sign-up-bar-right {
        margin-left: -120px;
    }

    .share-window {
        max-width: 400px;
    }

        .share-window textarea {
            height: 180px;
        }

    #selected-projects .mobile {
        display: inline-block !important;
        position: fixed !important;
        left: 50%;
        margin-left: -110px !important;
    }

    #selected-projects .col-28 {
        display: none;
    }

    #selected-projects {
        overflow-x: auto;
        height: 210px;
        border-top: 1px solid #3394EE;
    }

        #selected-projects p {
            padding-left: 40px;
            padding-right: 40px;
            font-size: 12px; 
            margin-top: -10px;
        }

        #selected-projects .row {
            display: flex;
            flex-wrap: nowrap;
            margin-top: -10px;
        }

        #selected-projects .col-18 {
            flex-basis: 25%;
            margin-right: 20px;
        }

        #selected-projects .row {
            margin-left: 0px;
            margin-bottom: -25px;
        }

        #selected-projects .mobile {
            display: block !important;
        }

    .confirm-page h1 {
        padding-top: 50px;
    }

    .pledge-page h1 {
        padding-top: 25px;
    }

    /** resource centre */
    #resource-welcome h1 {
        font-size: 24px;
    }

    #resource-welcome {
        margin-bottom: 0px;
    }

    #resource-welcome p {
        font-size: 16px;
    }

    #resource-areas {
        margin-top: 0px;
    }

    /*** resourece centre */
    .resource-content-list .resource-content .resource-title {
        max-width: 200px;
    }

    /** stories */
    .slick-dots {
        position: relative;
        margin-top: 0px;
    }

    #photo-gallery-mobile h1 {
        padding-bottom: 0px;
    }

    .member-bio .row {
        font-size: 14px;
        line-height: 14px;
    }
    .member-bio-heading {
        font-size: 10px;
        line-height: 10px;
    }

    .player-member {
        width: 164px;
        height: 237px;
    }

        .player-member .member-list-img {
            width: 164px;
            height: 237px;
        }

    .member-bio .row .col-40, .member-bio .row .col-30, .member-bio .row .col-15 {
        margin-bottom: 20px;
    }

    .tooltip {
        left: 5% !important;
        right: 5% !important;
    }
}

@media only screen and (max-width : 522px) {
    #featured-members, #featured-members-desktop {
        margin-left: 195px;
    }

    .featured-member, .join-member-area, .join-member {
        width: 165px;
        height: 240px;
        background-size: 100%;
    }

        .join-member a, .join-member a:link, .join-member a:visited, .join-member a:hover {
            width: 165px;
            margin-top: 190px;
        }

    .featured-join-link {
        margin-top: 195px;
        font-size: 14px;
    }

    #member-quote-area {
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .members-name {
        font-size: 14px !important;
    }

    .members-photo {
        width: 60px;
        height: 60px;
        margin-top: 23px;
    }

    .login-testimonial.reset-password .testimonial {
        font-size: 14px;
        line-height: 23px
    }

    /*** resourece centre */
    .resource-content-list .resource-content .resource-title {
        font-size: 14px;
        max-width: 160px;
    }

    .resource-content-list .resource-content .resource-links {
        margin-top: -28px;
    }

    .resource-content-list a, .resource-content-list a:link, .resource-content-list a:visited, .resource-content-list a:hover {
        width: 16px;
        height: 16px;
        margin-left: 5px;
        margin-right: 5px;
    }

        .resource-content-list a.view-resource, .resource-content-list a.view-resource:link, .resource-content-list a.view-resource:visited, .resource-content-list a.view-resource:hover {
            width: 20px;
            height: 12px;
        }

    #featured-members-v2 .slick-list {
        padding: 0 5% 0 0;
    }

    #featured-members-v2 .slick-prev.slick-arrow, #featured-members-v2 .slick-next.slick-arrow {
        display: none !important;
    }

    .featured-member-v2 a {
        height: 230px;
    }

    #latest-stories.members-latest-stories .slick-list {
        padding: 0 5% 0 0;
    }

    .portal-banner {
        height: 240px;
    }

    .portal-banner h1 {
        font-size: 16px;
        line-height: 16px;
        margin-top: -20px;
    }

    .portal-banner h1 span {
        font-size: 23.5px;
        line-height: 23.5px;
    }

        .portal-banner h2 {
            font-size: 12px;
            line-height: 14px;
            margin-top: 22px;
        }

    .portal-banner-quote {
       font-size: 16px;
       line-height: 19px;
       margin-bottom: 25px;
    }

    .portal-banner-quote-name {
        font-size: 14px;
        line-height: 14px;
    }

    .portal-banner-quote-club {
        font-size: 12px;
        line-height: 12px;
    }

    .portal-banner-quote-img {
        width: 78px;
        height: 78px;
    }

    .portal-form h1 {
        font-size: 16px;
        line-height: 21px;
        margin-top: 47px;
    }

    .portal-form h2 {
        font-size: 13px;
        line-height: 17px;
    }

    #join-steps {
        width: 197.11px;
        height: 28.37px;
    }

    #join-step-details {
        width: 240px;
    }

    #join-step-1 {
        width: 82px;
    }

    #join-step-2 {
        width: 80px;
    }

    #join-step-1 .sign-up-step-name {
        width: 40px;
    }

    #join-step-2 .sign-up-step-name {
        width: 45px;
    }

    #join-step-3 .sign-up-step-name {
        width: 55px;
    }

    #join-bar {
        min-height: 145px;
        padding-top: 18px;
    }

    #join-header {
        max-width: 342px;
    }

    #join-header-text {
        font-size: 16px;
        line-height: 19px;
        padding-top: 0px;
    }

    a#help-hover, a:link#help-hover, a:visited#help-hover, a:hover#help-hover {
        width: 78px;
        height: 81px;
        background-repeat: no-repeat;
        margin-right: 8px;
    }

    .help-text {
        font-size: 16px;
        line-height: 19px;
        margin-top: -20px;
    }

    #join-header-hover .row {
        flex-direction: column-reverse;
        display: flex !important;
    }

    #join-header-text {
        min-height: 75px;
    }

    .help-text {
        margin-left: 15px;
    }

    #help-name {
        display: block;
        float: left;
        padding-top: 3px;
    }

    .col-help-options {
        width: auto;
        text-align: left;
        padding-left: 15px;
    }

        .col-help-options a {
            float: left !important;
            margin-right: 24px !important;
            margin-left: 0px !important;
        }

    #pledge {
        height: 373px;
    }

    #pledge-contents {
        max-height: 310px;
    }

    #join-step-bar-desktop {
        display: none;
    }

    #join-step-bar-mobile {
        display: block;
    }

    .join-step-bar {
        width: 290px;
        margin-top: -25px;
        clear: both;
    }

    .step-item-1 {
        width: 88px;
    }

    .step-item-2 {
        width: 84px;
    }

    .step-item-3 {
        width: 92px;
    }

    .step-item-3 .step-item-text {
        display: inline-block;
        width: auto;
    }

    .step-item-3.step-es-ES .step-item-text {
        width: 60px;
    }

    .join-step-bar .row {
        display: flex !important;
    }

    .step-bar-area {
        width: 258px;
    }

    .inactive-step-bar {
        width: 258px;
    }

    #profile-photo {
        width: 126px;
        height: 126px;
        margin-right: 30px;
    }

    .account-banner h1 {
        font-size: 24px;
        line-height: 24px;
        padding-top: 40px;
    }

    .account-banner h2 {
        font-size: 16px;
        line-height: 24px;
    }

    .account-banner {
        padding-bottom: 25px;
    }

    .row.pledge-status-row {
        display: flex !important;
    }

    .account-data .col-50 {
        flex-basis: 100% !important;
    }

    .row.pledge-status-row {
        font-size: 14px;
        line-height: 17px;
    }
}

@media only screen and (max-width : 490px) {
    #featured-supporters .slick-list {
        padding: 0 0 0 0 !important;
    }
}

@media only screen and (max-width : 480px) {
    .center-form .submit-row input[type="submit"], #pledge-options a.button, #pledge-options a.button:link, #pledge-options a.button:visited, #pledge-options a.button:hover {
        min-width: 100px;
        width: 100%;
    }


    footer .row {
        display: block !important;
    }

    footer .col-25 {
        flex-basis: 100% !important;
    }

    #pledge-options .col-50 {
        padding: 12px;
    }

    .testimonials {
        max-width: 340px;
        padding-left: 30px;
        padding-right: 30px;
        margin: 0 auto;
        margin-bottom: 160px;
    }

    .testimonial, .login-testimonial.reset-password .testimonial {
        font-size: 14px;
        line-height: 18px;
    }

    .center-form.invite-form {
        padding-left: 20px;
        padding-right: 0px;
    }

    .organisation-content .col-25 {
        flex-basis: 100%;
    }

    .members-photo {
        margin-left: 10px;
    }

    .footer-small-links div {
        flex-basis: 50% !important;
    }

    .hamburger {
        margin-left: 20px !important;
    }

    .nav-join-mobile {
        margin-right: 20px !important;
    }

    #featured-members {
        margin-top: -190px;
    }

    #featured-stories .slick-list {
        padding: 0 12% 0 0 !important;
    }

    #donation-confirmation {
        padding-left: 20px;
        padding-right: 20px;
    }

    .filter-drop-down {
        font-size: 14px;
        padding: 15px;
    }

    .filter-arrow {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #2f3131;
        margin-top: 6px;
    }

    .filter-drop-down.selected .filter-arrow .filter-arrow.selected {
        border-top: none;
        border-bottom: 6px solid #2f3131;
    }

    .hero-shot p {
        font-size: 18px;
        line-height: 28px;
    }

}

@media only screen and (max-width : 450px) {
    .testimonial {
        font-size: 14px;
    }
    .testimonial-name {
        font-size: 16px;
    }
    .testimonial-type {
        font-size: 14px;
    }

    #featured-supporters .testimonial {
        width: 100%;
        box-sizing: border-box;
        margin-right: 0px;
        padding-top: 15px;
        max-width: none;
    }

    #featured-supporters .testimonial-squiggle {
        margin-right: 10px;
    }

    #logo, #logo:link, #logo:visited, #logo:hover {
        margin-left: 100px;
    }
}

@media only screen and (max-width : 430px) {
    .testimonial, .login-testimonial.reset-password .testimonial {
        font-size: 14px;
        line-height: 16px;
    }

    .login-testimonial.reset-password .testimonial {
        font-size: 12px;
        line-height: 14px;
    }

    .center-form.invite-form {
        margin-left: 40px;
        margin-right: 40px;
        padding-right: 20px;
    }

        .center-form.invite-form textarea {
            height: 160px;
        }

    .invite-form .share-buttons a {
        display: block !important;
        margin: 0 auto !important;
    }

    .invite-form .share-buttons span {
        display: block !important;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .sign-up-bar-left, .sign-up-bar-right, .sign-up-bar {
        display: none;
    }

    .sign-up-left .row {
        display: block !important;
    }

    .share-window {
        max-width: 290px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

        .share-window textarea {
            height: 220px;
        }

        .share-window iframe {
            max-width: 200px;
        }

        #selected-projects .row {
            padding-left: 10px;
            padding-right: 0px;
        }

        #selected-projects .col-18 {
            flex-basis: 50%;
        }

    #selected-projects .mobile {
        width: 94% !important;
        left: 3% !important;
        margin-left: 0px !important
    }

    #members-bar {
        padding-left: 10px;
    }

    .goal {
        font-size: 12px
    }

    #featured-stories {
        margin-left: 10px;
    }

    .project-filters-content-box {
        padding-left: 15px;
        padding-right: 15px;
    }

    .join-involved {
        margin-top: -60px;
    }

    /*** resourece centre */
    .resource-content-list .resource-content .resource-title {
        font-size: 12px;
        max-width: 120px;
    }

    
}

@media only screen and (max-width : 380px) {

    .footer-small-links div {
        flex-basis: 100% !important;
        box-sizing: border-box;
    }

    .confirm-page h1 {
        padding-top: 10px;
    }

    #logo, #logo:link, #logo:visited, #logo:hover {
        margin-left: 80px;
    }

    #members-bar {
        padding-left: 0px;
    }

    #members-bar-content-box {
        padding-left: 20px;
    }

    .hero-shot h1 {
        padding-top: 40px;
    }

    .hero-shot p {
        font-size: 17px;
    }
}


@media only screen and (max-width : 320px) {
    .footer-social a, .footer-social a:link, .footer-social a:visited, .footer-social a:hover {
        margin-right: 15px;
    }

    .mailing-list input[type="text"] {
        width: 96px;
    }

    .mailing-list input[type="submit"] {
        margin-left: -9px;
    }

    .sign-up-left .row {
        display: block !important;
    }

    #sign-up-bg {
        margin-top: 1100px;
    }

    #logo, #logo:link, #logo:visited, #logo:hover {
        margin-left: 70px;
    }
}