@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
/*

colors
dk blue #1c2674
br blue #009cde
green   #27a687
purple  #714194

*/


.path-frontpage .layout-one-sidebar .content .block.block-system, .path-frontpage .layout-one-sidebar .content .block.block-core, .path-frontpage .layout-one-sidebar .content .block.block-views, .landing-page.layout-one-sidebar .content .block.block-system, .landing-page.layout-one-sidebar .content .block.block-core, .landing-page.layout-one-sidebar .content .block.block-views, .full-browser-width.layout-one-sidebar .content .block.block-system, .full-browser-width.layout-one-sidebar .content .block.block-core, .full-browser-width.layout-one-sidebar .content .block.block-views {
    padding: 0;
}
.main > main > section p, .main > main > section h1, .main > main > section h2 {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif!important;
}
.main > main > section h1, .main > main > section h2 {
    color: #009cde;
    font-weight: bold;
}
.breadcrumb {
    margin: 0 auto;
    max-width: 1200px !important;
}
.standard-width p, .side-text p {
    color:#222222;
}
.center {
    margin: auto;
    text-align: center;
}
.grid-column h1 {
    margin-bottom: 0;
    line-height: 1.2em;
}
.grid-column img {
    margin: 0!important
}
.grid-column.side-text h1{
    margin-bottom: 20px;
    padding-right: 50px;
}

.grid-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: auto;
    max-width: 1200px;
    grid-column-gap: 40px;
}
.grid-three-col {
    display: grid;
    grid-template-columns: auto auto auto;
    width: 100%;
}
.grid-four-col {
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}
.two-column-full-width-wrapper {
    position: relative;
}
.text-left-wrapper div.side-img, .text-right-wrapper div.side-img {
}
.title-text .side-img {
}
div.two-column-full-width-wrapper.text-right-wrapper.title-text > div.grid-two-col > div:nth-child(1) > h1 {
    background: #1c2674;
    border-radius: 0 20px 20px 0;
    color: #fff;
    font-weight: bold;
    padding: 20px;
    position: relative;
}
.side-text a {
    color: #fff;
    font-weight: bold;
}
#ggr-header-photo {
    background: url('https://www.ippf.org/sites/default/files/Botswana_GGR_71962_IPPF_Tommy%20Trenchard_Botswana_IPPF.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 600px;
    margin-bottom: 5px;
    position: relative;
}
#header-photo-caption-block {
    margin: 0 auto;
    margin-bottom: 30px;
    max-width: 1200px;
    text-align: right;
    display: none;
}
#header-photo-caption-text {
    font-size: 0.8em;
    font-style: italic;
}
.counter-text h1 {
    background: rgba(28, 38, 116, 1);
    border-radius: 0 20px 20px 0;
    bottom: 100px;
    color: #fff!important;
    line-height: 1.4em;
    margin-top: 100px;
    padding: 20px;
    position: absolute;
}
.counter-text h1::before, div.two-column-full-width-wrapper.text-right-wrapper.title-text > div.grid-two-col > div:nth-child(1) > h1::before {
    background: #1c2674;
    bottom: 0;
    content: "";
    position: absolute;
    right: 100%;
    top: 0;
    width: 9600px;
}
.counter-text h1::before {
    background: rgba(28, 38, 116, 1);
}
#intro-text {
}
#ggr-map-header h1 {
    font-family: 'Roboto Slab'!important;
    line-height: 1.4;
    margin: auto;
    max-width: 740px;
    color:#1c2674;
}
div#ggr-map {
    margin: auto;
    padding-top: 34%;
    position: relative;
    width: 80%;
}
.ggr-map-iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
#ggr-map-key {
    border-bottom: 1px dotted #009cde;
    font-size: 0.8em;
    padding-bottom: 20px;
    text-align: center;
    color: #222;
}
#ggr-map-key strong {
    color: #1c2674;
}
#ggr-map-mobile-content {
    display: none;
}
#ggr-map-mobile-content h1 {
    background: #27a687;
    border-radius: 10px;
    color: #fff;
    font-size: inherit;
    font-weight: bold;
    margin: 20px auto;
    max-width: 300px;
    padding: 20px;
    position: relative;
    text-align: center;
}
#ggr-map-mobile-content h1:hover {
    cursor: pointer;
}
#ggr-map-mobile-content h1::after, .services-affected-list::after {
    content: "+";
    margin-left: 4px;
}
#ggr-map-mobile-content ul {
    display: none;
    margin-bottom: 40px;
    padding: 0;
}
#ggr-map-mobile-content ul li {
    list-style-type: none;
    margin-bottom: 10px;
    text-align: center;
}
#ggr-map-mobile-content ul li strong {
    color: #009cde;
    display: block;
}
.inline-button {
    background: #009cde;
    border-radius: 10px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: bold;
    margin: auto;
    max-width: 500px;
    padding: 20px;
    text-align: center;
    font-size: 1.2em;
    line-height: 2em;
}
.inline-button:hover {
    background: #1c2674;
    cursor: pointer;
}
.inline-button a {
    color: #fff;
    display: block;
}
#services-affected-section .grid-two-col, #what-is-ggr-section .grid-two-col, #how-we-are-working-section .grid-two-col, #why-we-will-not-section .grid-two-col {
    grid-template-columns: 1fr 3fr;
}
.services-affected-list:last-child::after {
    content: '';
}
.button-show-hide {
    border: 1px dotted #009cde;
    border-radius: 10px;
    color: #1c2674;
    display: inline-block;
    font-weight: bold;
    margin: 3px;
    padding: 15px;
}
.button-show-hide:hover {
    background-color: #1c2674;
    box-shadow: none;
    cursor: pointer;
    color: #fff;
}
.button-show-hide-content {
    display: none;
    font-weight: 300;
}
.button-show-hide-content:hover {
}
.green-wrapper {
    background-color: #27a687;
}
.purple-wrapper {
    background-color: #714194;
}
.green-wrapper, .green-wrapper h1, .green-wrapper h2, .green-wrapper p,
.purple-wrapper, .purple-wrapper h1, .purple-wrapper h2,  .purple-wrapper p,
.purple-wrapper.senegal, .purple-wrapper.senegal h1, .purple-wrapper.senegal h2, .purple-wrapper.senegal p
{
    position: relative;
    color: #fff!important;
}


.senegal h1::after,
.mozambique h1::after,
.burundi h1::after,
.kenya h1::after
{
    content: '';
    border: 3px solid #fff;
    border-radius: 100%;
    height: 45px;
    position: absolute;
    right: 0;
    width: 45px;
    top:0;
}
   



.mozambique h1::after {
    background-image: url(https://www.ippf.org/static/ggr/ggr-map/flags/1x1/mz.svg);
}
 
.senegal h1::after {
    background-image: url(https://www.ippf.org/static/ggr/ggr-map/flags/1x1/sn.svg);
}   
    
.burundi h1::after {
    background-image: url(https://www.ippf.org/static/ggr/ggr-map/flags/1x1/bi.svg);
}   

.kenya h1::after {
    background-image: url(https://www.ippf.org/static/ggr/ggr-map/flags/1x1/ke.svg);
}   

.purple-wrapper div.side-img {
    background: url('https://www.ippf.org/static/ggr/images/albertina.jpg') no-repeat center top #27a687;
    background-size: cover;
    display: block;
    height: 100%;
    position: absolute;
    width: 50%;
}
.green-wrapper div.side-img {
    background: url('https://www.ippf.org/static/ggr/images/students-in-burundi.jpg') no-repeat left top #27a687;
    background-size: cover;
    display: block;
    height: 100%;
    position: absolute;
    width: 50%;
}

.purple-wrapper.senegal div.side-img
{
    background: url('https://www.ippf.org/static/ggr/images/Senegal_GGR_77781_IPPF_Xaume_Olleros_Senegal_IPPF.jpg') no-repeat center top #27a687;
    background-size: cover;
    display: block;
    height: 100%;
    position: absolute;
    width: 50%;
}

.green-wrapper.kenya div.side-img {
    background: url('https://www.ippf.org/static/ggr/images/Kenya_GGR _77742_IPPF_Adriane_Ohanesian_Kenya_IPPF_Adriane_Ohanesian.jpg') no-repeat left top #27a687;
    background-size: cover;
    display: block;
    height: 100%;
    position: absolute;
    width: 50%;
}

.green-wrapper .grid-column.side-text, .purple-wrapper .grid-column.side-text {
    padding: 40px;
}

.senegal .side-text{
        background-image: url(https://www.ippf.org/static/ggr/images/countries/senegal.png);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
}
.burundi .side-text{
        background-image: url(https://www.ippf.org/static/ggr/images/countries/burundi.png);
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: center;
}
.kenya .side-text{
        background-image: url(https://www.ippf.org/static/ggr/images/countries/kenya.png);
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: center;
}
.mozambique .side-text{
        background-image: url(https://www.ippf.org/static/ggr/images/countries/mozambique.png);
    background-repeat: no-repeat;
    background-size: 40%;
    background-position: center;
}
.text-left-wrapper .grid-column img, .text-right-wrapper .grid-column img {
    display: none;
}
.text-left-wrapper div.side-img {
    right: 0;
}
.quote {
    background: url(https://www.ippf.org/static/icons/quote-bubble-white.png) center top no-repeat;
    background-size: 50px;
    font-family: 'Roboto Slab', serif;
    margin: 30px 0;
    padding: 55px 20px 0;
    text-align: center;
}
.quote p.quote-text {
    font-family: 'Roboto Slab', serif!important;
}
.video-wrapper {
    height: 0;
    margin-bottom: 40px;
    padding-bottom: 56.25%;
    padding-top: 25px;
    position: relative;
}
.video-wrapper iframe {
    height: 100% !important;
    left: 0 !important;
    margin: auto 0 auto 0 !important;
    position: absolute;
    top: 0 !important;
    width: 100% !important;
}
.country-box-grid .grid-column {
    border: 1px dotted #009cde;
    border-radius: 10px;

}
.country-box {
    padding:30px;
}
.country-box h1 {
    color: #1c2674!important;
    font-size: 1.3em;
    margin-bottom: 10px;
    position: relative;
}
.country-box p {
}
.country-box a
{
    display: inline;
    color: #1c2674;
    font-weight: bold;
}
.country-box h1 + a {
    display:inline;
}
.country-box a:hover{
    color:#00a6e2;
}
.country-box img
{
    width:30%!important;
    max-width: 200px!important;
    max-height: 200px;
    float: right;
    border-radius: 100%;
    margin: 10px 00px 20px 30px!important;
}
.country-box a:hover img{
    opacity: 0.6;
}
.country-box h1::after
{
    content:'';
    border:3px solid #009cde;
    border-radius:100%;
    height:35px;
    position:absolute;
    right:0;
    width:35px;    
}

.country-box-botswana h1::after
{
    background-image: url('https://www.ippf.org/static/ggr/ggr-map/flags/1x1/bw.svg');
}

.country-box-uganda h1::after
{
    background-image: url('https://www.ippf.org/static/ggr/ggr-map/flags/1x1/ug.svg');
}

.country-box-malawi h1::after
{
    background-image: url('https://www.ippf.org/static/ggr/ggr-map/flags/1x1/mw.svg');
}

.country-box-burundi h1::after
{
    background-image: url('https://www.ippf.org/static/ggr/ggr-map/flags/1x1/bi.svg');
}

.case-studies-title, .video-title
{
    margin-bottom: 50px;
}

#ggr-map-header, #ggr-map-mobile-content, #intro-text, #ggr-header-photo, #ggr-map-key, #what-is-ggr-section, #services-affected-section, .inline-button, .green-wrapper, .purple-wrapper, .country-box-grid, #how-we-are-working-section, #why-we-will-not-section {
    margin-bottom: 50px;
}
#why-we-will-not-section{
    margin-bottom: 70px;
}
#why-we-will-not-section a{
    color:#009cde;
}

@media (max-width: 899px ) {
    #intro-text{
        padding-left: 40px;
        padding-right: 40px;
    }
    .green-wrapper .grid-column img, .purple-wrapper .grid-column img {
        width: 100%!important;
    }
    div.two-column-full-width-wrapper.text-right-wrapper.title-text > div.grid-two-col > div:nth-child(1) > h1 {
        margin: 20px;
    }
    #ggr-map-mobile-content {
        display: block;
    }
    #ggr-map-key {
        display: none;
    }
    .country-box-grid {
    padding: 0 40px;
    }
    .country-box-grid .grid-column {
        margin-bottom: 20px;
    }
    .grid-two-col, .grid-three-col, .grid-four-col {
        display: block;
    }
    .side-text {
        padding: 40px;
    }
    .text-left-wrapper div.side-img, .text-left-wrapper.senegal div.side-img, .text-right-wrapper div.side-img, .text-right-wrapper.kenya div.side-img {
        display: none;
    }
    .text-left-wrapper .grid-column img, .text-right-wrapper.green-wrapper > div.grid-two-col > div:nth-child(1) > img {
        display: block;
    }
    
    .video-title .side-text,
    .case-studies-title .side-text{
        display:none;
    }
    .inline-button {
        max-width:80%;
    }
}