/* ========================================================================= */
/* Global styles                                                             */
/* ========================================================================= */
html {
    box-sizing: border-box;
    /*font-size: 62.5%;*/
    /*font-size: 85%;*/
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    /*background-color: #333F50;*/
    background-color: #323334;
    /*background-color: #FAFAFA;*/
}

body,
input,
textarea {
    /*font-size: 1.4rem;*/
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #FAFAFA;
    /*color: #050505;*/
}

img {
    border: none;
}

p {
    line-height: 2rem;
}

hr:not([size]) {
    border: 0;
    height: 3px;
    background: #787878;
}


/* ========================================================================= */
/* Common styles                                                             */
/* ========================================================================= */
body > header,
body > article,
body > section/*:not(#missions)*/,
body > footer {
    position: relative;
    margin: auto;
    max-width: 1200px;
    /*min-width: 768px;*/
}

/* ------------------------------------------------------------------------- */
/* HEADER                                                                    */
/* ------------------------------------------------------------------------- */
/*...*/

/* ------------------------------------------------------------------------- */
/* FOOTER                                                                    */
/* ------------------------------------------------------------------------- */
/*...*/

/* ------------------------------------------------------------------------- */
/* ARTICLE                                                                   */
/* ------------------------------------------------------------------------- */
article > img {

}

/* ------------------------------------------------------------------------- */
/* SECTION                                                                   */
/* ------------------------------------------------------------------------- */
body > section ul {
    list-style-type: circle;
}

time.text-muted {
    display: block;
    margin-block-end: .5rem;
}

/* Custom SVG
-------------------------------------------------- */
/*div.btn-group > svg.fb_logo {
    !*border-top-left-radius: calc(.25rem - 1px);*!
    !*border-top-right-radius: calc(.25rem - 1px);*!
    border-radius: calc(2rem - 1px);
}*/

/* ------------------------------------------------------------------------- */
/* RESPONSIVE CSS                                                            */
/* ------------------------------------------------------------------------- */
@media (min-width: 768px) {
    section#missions div.row > div.col-md-5 {
        /*position: absolute;*/
        /*top: 10%;*/
    }

    section#missions div.row > div.col-md-7 {
        /*display: block flex;*/
        align-items: center;
    }

    section#missions > div {
        padding-bottom: 1rem;
    }
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px;
    }
}

@media (min-width: 540px)
and (max-width: 576px) {
    .container, .container-sm {
        max-width: 540px;
    }
}


/* Test CSS
-------------------------------------------------- */
article#support_us {
    /*display: none;*/
}

#inner {
    border: 1px solid black;
    height: 20px;
    position: absolute;
    top: 10%;
    /*right: 40%;*/
    /*bottom: 20%;*/
    /*left: 15%;*/
}

#outer {
    border: 1px solid red;
    height: 500px;
    position: relative;
    display: flex;
    justify-content: center;
    /*align-items: center;*/
}

/* ----------------------------------------------- */

/*!* The Masonry Container *!
.masonry {
    margin: 1.5em auto;
    !*max-width: 768px;*!
    column-gap: 1.5em;
}*/

/*.masonry {
    display: grid;
    grid-gap: 2em; !* [1] Add some gap between rows and columns *!
    grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) ); !* [2] Make columns adjust according to the available viewport *!
    grid-auto-rows: 250px; !* [3] Set the height for implicitly-created row track *!
}

!* The Masonry Brick *!
.item {
    padding: 1em;
    margin: 0 0 1.5em;
}



!* Masonry on medium-sized screens *!
@media only screen and (min-width: 1024px) and (min-width: 768px) {
    .masonry {
        column-count: 2;
    }
}*/

/*!* Masonry on large screens *!
@media only screen and (min-width: 1024px) {
    .masonry {
        column-count: 3;
    }
}*/

/*!* Masonry on small screens *!
@media only screen and (max-width: 767px) and (min-width: 540px) {
    .masonry {
        column-count: 2;
    }
}*/

/* ----------------------------------------------- */
/*@media (min-width: 768px) {
    body > div > div.container > div.row > div.col-md-5 {
        !*position: absolute;*!
        !*top: 10%;*!
    }

    body > div > div.container > div.row > div.col-md-7 {
        display: block flex;
        align-items: center;
    }

    body > div > div.container > div.row {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px;
    }

    body > div > div.container > div.row {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}*/

#mission2,
#mission4,
#mission6 {
    /*background-color: deepskyblue;*/
    background-color: rgb(238, 238, 238);
    color: #050505;
}

#mission2 .featurette-heading,
#mission4 .featurette-heading,
#mission6 .featurette-heading {
    color: #333F50;
}
/*
.image_full{
    display:none;
}

.image_mobile{
    display:block;
}

@media (min-width: 768px) {

    .image_full{
        display:block;
    }

    .image_mobile{
        display:none;
    }
}*/

@media (min-width: 540px) {
/*    #mission2,
    #mission3,
    #mission4,
    #mission5,
    #mission6 {
        padding-top: 1rem;
    }*/
}

header > .gis_logo {
    margin: auto;
    position: absolute;
    top: 0%;
    right: 0%;
    z-index: 1;
    transform: translate(0%, 0%);
    max-height: 90px;
    background-color: rgba(238, 238, 240, 1);
    padding: 4px;
    /*border-radius: 8%;*/
    /*border-radius: 0 0 0 18%;*/
    border-radius: 5% 0 5% 10%;
}

/* ----------------------------------------------- */
section#missions {
    margin: initial;
    max-width: initial;
}

section#missions > h1 {
    /*position: relative;*/
    margin: auto;
}

section#missions > div:first-child {
    padding-top: initial;
}

section#missions > div {
    padding-top: 1rem;
}

section#missions > .album_missions {
    margin-top: 0.5rem;
}

section#missions > .album_missions > a {
    text-decoration: none;
    color: #FAFAFA;
    font-size: larger;
}

section#missions > .album_missions > a label{
    padding-left: 0.5rem;
    text-decoration: underline;
    text-decoration-thickness: 0.11em;
}

section#missions > .album_missions svg {
    transform: translateY(-0.11rem);
    fill: #eef0f0;
}


/* ----------------------------------------------- */
body > footer {
    padding-top: 1rem;
    padding-bottom: 2rem;
    margin: 2rem 0 auto;
    max-width: initial;
    background-color: #eef0f0;
    font-size: larger;
    color: #333F50;
    font-weight: bolder;
}

body > footer > div:first-child {
    margin-bottom: 1rem;
}

footer > div.container {
    padding-left: 48px;
    padding-right: 48px;
}

footer a {
    text-decoration: none;
}

footer .contact img {
    height: 50px;
    width: 50px;
}

footer#mobile_footer .gis_logo {
    max-width: 80%;
    margin: auto;
}

footer#mobile_footer .socials svg {
    height: 64px;
    width: 50px;
/*    margin-right: 10%;
    margin-left: auto;*/
}

footer#mobile_footer .socials svg.fb_logo {
    height: 50px;
    width: 50px;
    margin: auto auto auto 0;
}

footer#mobile_footer .donations {
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
}

footer#mobile_footer .donations label {
    margin-top: 8px;
    max-width: 70%;
    color: #333F50;
}

footer#full_footer .gis_logo {
    position: relative;
    max-width: 8rem;
    float: right;
    right: 15%;
}

footer#full_footer .socials svg {
    height: 64px;
    width: 50px;
    margin: auto 5% auto auto;
}

footer#full_footer .socials svg.fb_logo {
    position: relative;
    height: 50px;
    width: 50px;
    margin: auto auto auto 5%;
}

footer#full_footer .donations {
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
}

footer .contact label,
footer#full_footer .donations label {
    margin-top: 8px;
    color: #333F50;
}

footer#mobile_footer #contact_mobile {
    margin-bottom: 8px;
}


footer#full_footer{
    display:none;
}

footer#mobile_footer{
    display:block;
}

@media (min-width: 768px) {

    footer#full_footer {
        display: block;
    }

    footer#mobile_footer {
        display: none;
    }
}

/* ----------------------------------------------- */
article#support_us > div {
    text-align: center;
}

@media (max-width: 768px) {
    article#support_us > div > div#donations_text {
        margin-top: 1rem;
    }
}

@media (min-width: 768px) {
    article#support_us > div > div#donations_icon {
        margin: auto;
    }
}

article#support_us a {
    text-decoration: none;
    color: #FAFAFA;
}

article#support_us p#read_more {
    font-style: italic;
}

article#support_us p#read_more > a{
    /*padding-left: 0.5rem;*/
    text-decoration: underline;
    text-decoration-thickness: 0.11em;
}

/* ----------------------------------------------- */
.carousel_band {
    position: absolute;
    width: 100%;
    /*background-color: rgba(113, 113, 115, 0.68);*/
    /*background-color: rgba(90, 90, 92, 0.68);*/
    background-color: rgba(57, 57, 59, 0.68);
    bottom: 3rem;
}

p.start_of_list {
    margin-bottom: 0.2rem;
}