:root {
  --ndp-orange: #F58220;
  --ndp-yellow: #FDB913;
  --ndp-blue: #00A0DC;
  --ndp-dark-grey: #58595B;
  --ndp-light-grey: #E2E3E4;
  --main-font: 'Jost','Roboto',sans-serif;
  --secondary-font: 'Sorts Mill Goudy','Source Serif Pro',sans-serif;
}

.mobile-only {
     display:none;
}

.sr-only {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

html {
  scroll-behavior: smooth;
}

body {
	background-image: url('../img/sophie-bg.webp');
	background-size: cover;
	background-position: top left;
	background-color: var(--ndp-dark-grey);
	font-family: var(--main-font);
	font-size: 14pt;
	line-height: 20pt;
	color: #ffffff;
}

a {
	color: #9cf;
}

a:hover {
	color: #def;
}


h1, h2, h3 {
	font-family: var(--main-font);
	text-transform: uppercase;
	font-weight: normal;
	display: block;
	text-align: center;
}

h2 {
    font-size: 1.5vw;
    line-height: 1;
    letter-spacing: 0.15em;
    color: #ddeeffcc;
}

h3 {
    font-size: 1em;
    letter-spacing:  .1em;
}

p, ul, li, ul li {
	font-family:  var(--main-font);
	text-align: justify;
}

#logo {
	position: relative;
	top: 1vh;
	left: 1vw;
	width: 100%;
	max-width: 200px;
	height: auto;
}

#logo img {
	width: 100%;
	height: auto;
}

#slogan {
	position: relative;
	text-align: center;
	color: #ffffffaa;
	font-size: .7em;
	font-weight: 700;
	line-height: 0;
	text-transform: uppercase;
}

#slogan span {
	color: #ffffffff;
}

#ctas {
	position: relative;
	text-align: center;
	margin-top: 2.5vh;
}

.cta {
	display: inline-block;
	width: 100%;
	max-width: 200px;
	font-family: var(--main-font);
	font-size: .7em;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 5px 15px;
	margin: 10px auto;
	border: none;
	box-shadow: 2px 2px 6px #0003;
}

.give {
	color: #ffffff;
	background: var(--ndp-orange);
}

.volunteer {
	color: #ffffff;
	background: var(--ndp-blue);
}

.container {
	position: absolute;
	width: 40vw;
	right: 0vw;
	top: 0vh;
	height: 100vh;
	text-align: center;
	padding: 0;
	background-color: #0369;
	background: radial-gradient(ellipse at 50% 100%, #036c 0%, #fff3 100%);
	overflow-y: scroll;
	scroll-behavior: smooth;
}

.inner-container {
	padding: 5vh 10% 0 10%;
}

.title {
	font-family:  var(--secondary-font);
	color: #ffffff;
	font-size: 3.5vw;
    text-transform: none;
	line-height: 0;
}

h2.subtitle {
    font-size: 1.5vw;
    line-height: 0;
    letter-spacing: 0.15em;
    color: #ddeeffcc;
}

h3.subtitle {
	font-size: 1.1vw;
	font-weight: 400;
	line-height: 1.3em;
	letter-spacing: .2em;
	text-transform: none;
	color: #ffffff;
}

.quote {
	font-family: var(--secondary-font);
	font-style: italic;
}

.signed {
	font-size:  1.2em;
	font-style: italic;
}

#downarrow {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
	font-size: .6em;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #fff;
}

.da-text,
.da-arrow {
	pointer-events: none;
}

#downarrow img {
	height: .75em;
	width: auto;
	transform: translateY(-10px);
	pointer-events: none;
}

@keyframes goaway {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.go-dark {
  animation: goaway 1s ;
	opacity: 0;
}