/* variables */
:root {
    --black-ish:            #222222;
    --white-ish:            #fafafa;
    --dark-grey:            #555555;
    --lite-grey:            #cccccc;

	--drc-red:          	#af161e;
    --drc-red-100:          #af161e;
    --drc-red-90:           #b72e35;
    --drc-red-80:           #bf454b;
    --drc-red-70:           #c75c62;
    --drc-red-60:           #cf7378;
    --drc-red-50:           #d78a8e;
    --drc-red-40:           #dfa2a5;
    --drc-red-30:           #e7b9bb;
    --drc-red-20:           #efd0d2;
    --drc-red-10:           #f7e7e8;

    --drc-red-dark:         #871d19;
    --drc-red-neon:         #fc2b32;

    --matte-blue:  		    #788a97;
    --matte-blue-100:       #788a97;
    --matte-blue-90:        #8696a2;
    --matte-blue-80:        #93a1ac;
    --matte-blue-70:        #a1adb6;
    --matte-blue-60:        #aeb9c1;
    --matte-blue-50:        #bbc4cb;
    --matte-blue-40:        #c9d0d5;
    --matte-blue-30:        #d6dce0;
    --matte-blue-20:        #e4e8ea;
    --matte-blue-10:        #f1f3f4;

    --matte-blue-dark:      #536975;
    --matte-blue-neon:      #428dcb;

    --matte-green:      	#a5c082;
    --matte-green-100:      #a5c082;
    --matte-green-90:       #aec68f;
    --matte-green-80:       #b7cd9b;
    --matte-green-70:       #c0d3a8;
    --matte-green-60:       #c9d9b4;
    --matte-green-50:       #d2dfc0;
    --matte-green-40:       #dbe6cd;
    --matte-green-30:       #e4ecd9;
    --matte-green-20:       #edf2e6;
    --matte-green-10:       #f6f9f2;

    --matte-green-dark:     #576846;
    --matte-green-neon:     #c5d301;

	--bright-blue: 			#61c3d9;
	--bright-blue-100: 		#61c3d9;
	--bright-blue-90: 		#71c9dd;
	--bright-blue-80: 		#81cfe1;
	--bright-blue-70: 		#91d5e4;
	--bright-blue-60: 		#a0dbe8;
	--bright-blue-50: 		#b0e1ec;
	--bright-blue-40: 		#c0e7f0;
	--bright-blue-30: 		#cfedf4;
	--bright-blue-20: 		#dff3f7;
	--bright-blue-10: 		#eff9fb;

	--bright-green: 		#00a870;
	--bright-green-100: 	#00a870;
	--bright-green-90: 		#1ab17f;
	--bright-green-80: 		#33b98d;
	--bright-green-70: 		#4dc29b;
	--bright-green-60: 		#66cba9;
	--bright-green-50: 		#7fd3b7;
	--bright-green-40: 		#99dcc6;
	--bright-green-30: 		#b2e5d4;
	--bright-green-20: 		#cceee2;
	--bright-green-10: 		#e5f6f0;

	--bright-orange: 		#e94f35;
	--bright-orange-100: 	#e94f35;
	--bright-orange-90: 	#eb614a;
	--bright-orange-80: 	#ed725d;
	--bright-orange-70: 	#f08472;
	--bright-orange-60: 	#f29586;
	--bright-orange-50: 	#f4a79a;
	--bright-orange-40: 	#f6b9ae;
	--bright-orange-30: 	#f8cac2;
	--bright-orange-20: 	#fbdcd7;
	--bright-orange-10: 	#fdedea;

	--bright-yellow: 		#ffd300;
	--bright-yellow-100: 	#ffd300;
	--bright-yellow-90: 	#ffd71a;
	--bright-yellow-80: 	#ffdc33;
	--bright-yellow-70: 	#ffe04d;
	--bright-yellow-60: 	#ffe566;
	--bright-yellow-50: 	#ffe97f;
	--bright-yellow-40: 	#ffed99;
	--bright-yellow-30: 	#fff2b2;
	--bright-yellow-20: 	#fff6cc;
	--bright-yellow-10: 	#fffbe5;

    --hard: 1px;
    --soft: 4px;

    --fast: 250ms;
    --slow: 1000ms;

    --very-tight: 1rem;
    --tight: 2rem;
    --loose: 4rem;
    --very-loose: 8rem;

    --pulsing: pulse 10s ease-in-out 0s infinite alternate both running;
    --shadow: 0 0 3px rgba(0,0,0,.3);
}


/* animations */
@keyframes pulse {
    from {
        transform: translate(-50%,-50%) scale(1.0);
    }
    to {
        transform: translate(-50%,-50%) scale(1.1);
    }
}

@keyframes pointer {
    from {
        opacity: .5;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* misc */
::placeholder,
::-moz-placeholder,
::-ms-input-placeholder,
:-ms-input-placeholder {
    color: black;
    opacity: .5;
}

* {
    box-sizing: border-box;
}

#map_outer,
#map_zoom {
    display: none;
}

.hide,
.off {
    display: none;
}

.test {
    color: purple;
    background: pink;
}

.svg_test {
    display: block;
    width: 300px;
    height: 300px;
    background-color:pink;
    background-image: url('https://drc.ngo/svg/test_icon.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}


/* main elements */
html,
body,
main {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Source Sans 3', 'Calibri', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: black;
    background: transparent;
}

body.lock {
    overflow: hidden;
}

@media screen and (min-width:1000px)
{
    body.lock {
        padding-right: 17px;
    }
}

main.home {
    padding-bottom:1rem;
}


/* sections */
section {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: var(--very-tight);
    margin: 0;
    background: white;
}

@media screen and (min-width:800px)
{
    section {
        padding: var(--tight) calc(50vw - 300px);
    }
}

@media screen and (min-width:1000px)
{
    section {
        padding: var(--tight) calc(50vw - 400px);
    }
}

@media screen and (min-width:1200px)
{
    section {
        padding: var(--tight) calc(50vw - 500px);
    }
}

@media screen and (min-width:1400px)
{
    section {
        padding: var(--tight) calc(50vw - 600px);
    }
}


/* articles */
article {
    box-sizing: border-box;
    position: relative;
    display: block;
}


/* pictures */
picture {
    box-sizing: border-box;
    position: relative;
    display: block;
    overflow: hidden;
    object-fit: cover;
}

picture svg,
picture img {
    position: absolute;
    display: block;
    object-fit: cover;
    top: 50%;
    left: 50%;
    width: 100%;
    min-height: 100%;
    transform: translate(-50%,-50%) scale(1);
}

.zoom picture img {
    transform: translate(-50%,-50%) scale(1.1);
    transition-delay: 200ms;
    transition: var(--slow);
}

.zoom:hover picture img {
    transform: translate(-50%,-50%) scale(1);
}

picture .image-credits {
    position: absolute;
    bottom: 0;
    right: calc(-50% + 2rem);
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 50%;
    height: auto;
    background: black;
    color: white;
    padding: .5em;
    font-size: .9rem;
    margin-bottom: -.5em;
    transition: var(--fast);
    opacity: .5;
}

picture:hover .image-credits {
    right: 0;
    opacity: 1;
}

picture .image-credits svg {
    fill: white;
    display: inline-block;
    position: relative;
    height: auto;
    width: 1rem;
    top: 0;
    left: 0;
    min-height: 0;
    transform: none;
    transition: none;
    margin: 0 .5rem 0 0;
}


/* typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.1;
    padding: 0;
    margin: 0 0 .5em 0;
}

h1 {
    font-weight: 900;
    font-size: 2.2rem;
}

h2 {
    font-weight: 900;
    font-size: 1.8rem;
}

h3 {
    font-weight: 300;
    font-size: 1.6rem;
}

h4 {
    font-weight: 900;
    font-size: 1.8rem;
}

h5 {
	font-weight: 900;
	font-size: 1.2rem;
}

h6 {
    font-weight: 900;
    font-size: 1.0rem;
}

p {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 0;
    margin: 0 0 1em 0;
    font-weight: 400;
    font-size: 1rem;
}


/* special typography */
h2.donor-campaign-name {
    display: none;
}

section > h3 {
    flex: 0 0 100%;
    text-align: center;
    break-after: avoid;
}

section > h3 + p {
	width: 90%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

section.rich-text > h3,
section.pop-out > h3,
section.side-by-side > h3,
section.content > h3 {
    font-weight: 900;
    font-size: 1.1rem;
    text-align: left;
    flex: none;
    width: 100%;
}

section.rich-text > p,
section.rich-text > ol,
section.rich-text > ul,
section.pop-out > p,
section.pop-out > ol,
section.pop-out > ul,
section.content > p,
section.content > ol,
section.content > ul
{
    max-width: 800px;
}


section.rich-text > h3 + p,
section.pop-out > h3 + p,
section.side-by-side > h3 + p,
section.content >h3 + p {
    width: 100%;
    text-align: left;
}

.keep {
    display: inline-block;
    break-inside: avoid-column;
}


/* links */
a {
    cursor: pointer;
}

main a:link,
main a:visited {
    font-weight: 900;
    text-decoration: none;
    color: var(--drc-red-90);
    transition: var(--fast);
}

main a:hover,
main a:active {
    color: var(--drc-red);
}

a.casper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
}

span.button a,
a.button {
    z-index: 10;
    display: inline-block;
    padding: .5em 1.5em;
    margin: 1rem 0 0 0;
    border-radius: var(--soft);
    border-width: 2px;
    border-style: solid;
    letter-spacing: .05em;
    transition: var(--fast);
    box-shadow: var(--box-shadow);
}

span.button a:hover,
a.button:hover {
    letter-spacing: .1em;
}
 
a.tag {
    display: inline-block;
    padding: .3em .6em;
    margin: .3em  0 .3em .3em;
    border-radius: var(--hard);
    background: transparent;
    color: var(--drc-red-60);
    border-style: solid;
    border-width: 1px;
    text-decoration: none;
    transition: var(--fast);
    letter-spacing: .05em;
    font-size: .8rem;
    margin-bottom: -.5em;
}

a.tag:hover {
    color: var(--drc-red);
}


/* lists */
ul {
    padding: 0 0 0 1em;
    margin: 0 0 2em 0;
}


/* page head */
.page-head {
    display: flex;
    flex-flow: row no-wrap;
    align-items: stretch;
    padding-top: 4rem;
    padding-bottom: 0;
}

.page-head .txt,
.page-head picture {
    flex: 1 1 50%;
}

.page-head .txt {
    padding: 1rem 3rem 1rem 0;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-start;
}

@media screen and (max-width:800px)
{
    .page-head {
        display: flex;
        flex-flow: row wrap;
        align-items: stretch;
        padding: 2rem 0 0 0;
    }
    
    .page-head .txt,
    .page-head picture {
        flex: 1 1 100%;
    }
    
    .page-head .txt {
        padding: var(--tight);
    }
}

.page-head picture {
    height: 100%;
    min-height: 400px;
}

.page-head p 
{
    font-weight:300;
    font-size:1.3rem;
    max-width:50em;
}

.page-head .parent 
{
    display:inline-block;
    padding:0 0 .1em 0;
    margin:0 0 1em 0;
    border-style:solid;
    border-width:0 0 1px 0;
    font-weight:300;
    font-size:1rem;
    letter-spacing:.05em;
    text-decoration:none;
    transition:var(--fast);
    background:transparent;
    white-space: nowrap;
}

.page-head .parent:hover {
    letter-spacing: .1em;
}

.page-head .button {
    display: inline-block;
    padding: 1em 3em;
    border-radius :var(--soft);
    border-width: 2px;
    border-style: solid;
    font-weight: 900;
    letter-spacing: .05em;
    transition: var(--fast);
    box-shadow: var(--box-shadow);
}

.page-head .button:hover {
    letter-spacing: .1em;
}

.preheader
{
    display:inline-block;
    margin-bottom: .2rem;
    font-weight: 400;
    font-size: 1.2rem;
    letter-spacing: .05em;
    white-space: nowrap;
    align-self: flex-start;
}


/* page foot */
.page-foot .tags,
.page-foot .tags span {
    display: block;
    width: 100%;
    text-align: center;
}

@media screen and (min-width:1000px) 
{
    .page-foot .tags {
        text-align: left;
        }
    .page-foot .tags span {
        display: inline;
        width: auto;
        font-size: .8rem;
    }   
}


/* THEMES */

/* classic lite */
.classic.lite {
    background-image: url('../svg/design-dots.svg'), radial-gradient(white,var(--white-ish));
    background-size: auto 150px, 150%;
    background-position: right 10px center, left bottom;
    background-repeat: repeat-y, no-repeat;
}

.classic.lite .textside {
    color: var(--black-ish);
    transition: var(--fast);
}

.classic.lite:hover .textside {
    color: black;
}

.classic.lite .button {
    color: white;
    background-color: var(--drc-red);
    border-color: var(--drc-red);
}

.classic.lite .parent {
    color: var(--drc-red);
    border-color: var(--drc-red);
    background: transparent;
}


/* classic dark */
.classic.dark {
    background-image: url('../svg/design-dots.svg'), radial-gradient(var(--drc-red-80),var(--drc-red));
    background-size: auto 150px, 150%;
    background-position: right 10px center, left bottom;
    background-repeat: repeat-y, no-repeat;
}

.classic.dark .textside {
    color: var(--white-ish);
    transition: var(--fast);
}

.classic.dark:hover .textside {
    color: white;
}

.classic.dark .button {
    color: white;
    background-color: black;
    border-color: black;
}

.page-head.classic.dark .parent {
    color: white;
    border-color: white;
    background: transparent;
}

.page-head.classic.dark h1,
.page-head.classic.dark p {
    color: white;
}


/* urgent lite */
.urgent.lite {
    background-image: url('../svg/design-dots.svg'), radial-gradient(var(--bright-yellow-60),var(--bright-yellow));
    background-size: auto 150px, 150%;
    background-position: right 10px center, left bottom;
    background-repeat: repeat-y, no-repeat;
}

.urgent.lite .textside {
    color: var(--black-ish);
    transition: var(--fast);
}

.urgent.lite:hover .textside {
    color: black;
}

.urgent.lite .button {
    color: white;
    background-color: var(--matte-blue);
    border-color: var(--matte-blue);
}

.page-head.urgent.lite .parent {
    color: var(--matte-blue);
    border-color: var(--matte-blue);
    background: transparent;
}


/* urgent dark */
.urgent.dark {
    background-image: url('../svg/design-dots.svg'), radial-gradient(var(--dark-grey),var(--black-ish));
    background-size: auto 150px, 150%;
    background-position: right 10px center, left bottom;
    background-repeat: repeat-y, no-repeat;
}

.urgent.dark .textside {
    color: var(--white-ish);
    transition: var(--fast);
}

.urgent.dark:hover .textside {
    color: white;
}

.urgent.dark .button {
    color: black;
    background-color: var(--bright-yellow);
    border-color: var(--bright-yellow);
}

.page-head.urgent.dark .parent {
    color: var(--bright-yellow);
    border-color: var(--bright-yellow);
    background: transparent;
}

.page-head.urgent.dark h1,
.page-head.urgent.dark p {
    color: white;
}


/* embed dark + lite + none */
.video-player.dark,
.embed.dark {
    background-image: url('../svg/design-dots.svg'), radial-gradient(var(--dark-grey),var(--black-ish));
    color: white;
}

.video-player.lite,
.embed.lite {
    background-image: url('../svg/design-dots.svg'), radial-gradient(var(--lite-grey),var(--white-ish));
    color: black;
}

.video-player.none,
.embed.none {
    background-image: none;
    color: black;
}