/*FONT IMPORTS*/

/*Autopia-Bold-Italic*/
@font-face {
    font-family: 'Autopia';
    src: url('../assets/fonts/autopia/Autopia-Bold-Italic/Autopia-Bold-Italic.eot'); /* IE 9 Compatibility Mode */
    src: url('../assets/fonts/autopia/Autopia-Bold-Italic/Autopia-Bold-Italic.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
         url('../assets/fonts/autopia/Autopia-Bold-Italic/Autopia-Bold-Italic.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
         url('../assets/fonts/autopia/Autopia-Bold-Italic/Autopia-Bold-Italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../assets/fonts/autopia/Autopia-Bold-Italic/Autopia-Bold-Italic.svg#Autopia-Bold-Italic') format('svg'); /* Chrome < 4, Legacy iOS */
	font-weight: bold;
	font-style: italic;	  
    }

/*Autopia-Bold*/
@font-face {
    font-family: 'Autopia';
    src: url('../assets/fonts/autopia/Autopia-Bold/Autopia-Bold/Autopia-Bold.eot'); /* IE 9 Compatibility Mode */
    src: url('../assets/fonts/autopia/Autopia-Bold/Autopia-Bold/Autopia-Bold.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
         url('../assets/fonts/autopia/Autopia-Bold/Autopia-Bold/Autopia-Bold.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
         url('../assets/fonts/autopia/Autopia-Bold/Autopia-Bold/Autopia-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../assets/fonts/autopia/Autopia-Bold/Autopia-Bold/Autopia-Bold.svg#Autopia-Bold') format('svg'); /* Chrome < 4, Legacy iOS */
	font-weight: normal;
	font-style: bold;	 
    }

/*Autopia-Italic*/
@font-face {
    font-family: 'Autopia';
    src: url('../assets/fonts/autopia/Autopia-Italic/Autopia-Italic.eot'); /* IE 9 Compatibility Mode */
    src: url('../assets/fonts/autopia/Autopia-Italic/Autopia-Italic.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
         url('../assets/fonts/autopia/Autopia-Italic/Autopia-Italic.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
         url('../assets/fonts/autopia/Autopia-Italic/Autopia-Italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../assets/fonts/autopia/Autopia-Italic/Autopia-Italic.svg#Autopia-Italic') format('svg'); /* Chrome < 4, Legacy iOS */
	font-weight: normal;
	font-style: italic;	 
    }

/*Autopia-Regular*/
@font-face {
    font-family: 'Autopia';
    src: url('../assets/fonts/autopia/Autopia-Regular/Autopia-Regular.eot'); /* IE 9 Compatibility Mode */
    src: url('../assets/fonts/autopia/Autopia-Regular/Autopia-Regular.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
         url('../assets/fonts/autopia/Autopia-Regular/Autopia-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../assets/fonts/autopia/Autopia-Regular/Autopia-Regular.svg#Autopia-Regular') format('svg'); /* Chrome < 4, Legacy iOS */
	font-weight: normal;
	font-style: normal;	 
    }
/*SELECTRIC*/
@font-face {
    font-family: 'Selectric';
    src: url('../assets/fonts/selectric/OTF/SelectricMono.otf') format('embedded-opentype'), 
         url('../assets/fonts/selectric/WOFF/SelectricMono.woff') format('woff'); 
	font-weight: normal;
	font-style: normal;	 
    }
@font-face {
    font-family: 'Selectric';
    src: url('../assets/fonts/dmMono/DMMono-Italic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
    }
/*NEWSREADER*/
@font-face {
    font-family: 'Newsreader';
    src: url('../assets/fonts/newsreader/Newsreader-VariableFont_opsz,wght.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
    }
@font-face {
    font-family: 'Newsreader';
    src: url('../assets/fonts/newsreader/static/Newsreader/Newsreader-SemiBold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
    }
@font-face {
    font-family: 'Newsreader';
    src: url('../assets/fonts/newsreader/Newsreader-Italic-VariableFont_opsz,wght.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
    }
/**/
html{
	font-size: 62.5%;
	width: 100%;
	height: 100%;
}
body{
	margin:0;
	/* or 113% */
	background: #EDECE9;
	color:#2A1D64;
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: normal;
	font-size: 24px;
	font-size: 2.4rem;
	line-height: 36px;
	line-height: 3.6rem;
	text-rendering: geometricPrecision; 
}
p, p.standout{
	margin: 12px 0;
	margin: 1.2rem 0;
}
p{
	padding: 0;
}
p.standout, audio.p{
	font-family: 'Selectric';
    font-size: 20px;
	font-size: 2rem;
    line-height: 28px;
	line-height: 2.8rem;
	letter-spacing: -0.1em;
}
p.standout, .audio{
	border:1px solid #2A1D64;
	background: linear-gradient(90deg, #eae6f6 0%, #e9e9e9 100%);
}
p.standout{
    padding: 45px;
	padding: 4.5rem;
}
i{
	letter-spacing: 0;
}
sup{
	line-height:0; 
	vertical-align:text-top;
}

sup a, sup a:link, sup a:hover, sup a:focus, sup a:visited{
	text-decoration: none;
	cursor: pointer;
	padding-bottom: 1px;
	padding-bottom: 0.1rem;
}

.page{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
}
/* HIGH CONTRAST MODE */

body.contrast{
	background: black;
}

body.contrast .intro,
body.contrast .navigation,
body.contrast footer{
	filter: grayscale(100%) contrast(200%);
}

body.contrast main,
body.contrast .in-page-navigation,
body.contrast #mobile-nav-trigger{
	filter: grayscale(100%) invert(200%) contrast(200%);
}

body.contrast main img{
	filter: invert(200%) contrast(100%);
}

/* Button styles */

a.button, a.button:hover, a.button:link, a.botton:focus, a.button:visited, button, button:hover, button:link, button:focus,  button:visited {
	display: inline-block;
	width: 40%;
	margin: 20px auto;
	margin: 2rem auto;
	background: none;
	outline: none;
	border: 1px solid;
	font-family: "Selectric";
	font-size: 20px;
	font-size: 2rem;
	line-height: 25px;
	line-height: 2.5rem;
	letter-spacing: -0.1em;
	text-align: center;
	border-radius: 60px;
	padding: 20px 30px;
	padding: 2rem 3rem;
	text-decoration: none;
	cursor: pointer;
}

a.button, button{
	color: #2A1D64;
}

a.button:hover, button:hover{
	background:#4F30CA; 
	color:#EDECE9;
}

button.btn-nav-trigger{
	display: inline-block;
	position: inherit;
	width: inherit;
	margin: 0;
	background: none;
	outline: none;
	border: 0;
	font-size: 0;
	line-height: 0;
	letter-spacing: 0;
	text-align: center;
	border-radius: 0px;
	padding: 0;
}

/*HR styles */
hr{
	background:#2A1D64;
	outline:none;
	border:none;
	height:1px;
	margin: 30px 0;
	margin: 3rem 0;
}
hr.star-border{
	background:url("../assets/icons/divider.svg");
	background-size: contain;
	background-repeat: repeat-x;
	background-position: left center;
	height: 34px;
	height: 3.4rem;
	margin: 0;
	padding: 0;
}
/*Link & Heading styles */

a, a:link, a:hover, a:focus, a:visited{
	text-decoration: none;
	cursor: pointer;
	padding-bottom: 1.5px;
	padding-bottom: 0.15rem;
}

a, a:visited {
	color:#2A1D64;
	border-bottom: 1px solid #2A1D64;
}

a:hover {
	color:#4F30CA;
	border-bottom: 1px solid #4F30CA;
}

a:focus{
	color:#2A1D64;
	border-bottom: 2px solid #2A1D64;
}

li{
	list-style:  none;
}

h1,h2,h3{
	font-weight: normal;
	font-style: normal;
}
h2, h3{
	font-family: "Selectric";
	letter-spacing: -0.1em;
}
h1{
	display: block;
	font-family: "Autopia";
	margin: 60px 0 40px 0;
	margin: 6rem 0 4rem 0;
	font-size: 42px;
	font-size: 4.2rem;
	line-height: 50px;
	line-height: 5rem;
}
h2{
	margin: 50px 0 50px 0;
	margin: 5rem 0 5rem 0;
	font-size: 36px;
	font-size: 3.6rem;
	line-height: 42px;
	line-height: 4.2rem;
}
h3{
	font-size: 28px;
	font-size: 2.8rem;
	line-height: 32px;
	line-height: 3.2rem;
	margin: 28px 0 28px 0;
	margin: 2.8rem 0 2.8rem 0;
}
h3.newsreader{
	font-family: "Newsreader";
	font-weight: bold;
	font-size: 26px;
	font-size: 2.6rem;
	line-height: 34px;
	line-height: 3.4rem;
	letter-spacing: 0;
}
/* ACCESSIBILITY */
.screenreader-text{
	visibility: visible;
	opacity: 0;
	width:0;
	display: block;
	height:0;
}
.audio{
	display: none;
	width: calc(100%-25px);
	width: calc(100%-2.5rem);
	margin: 20px 0;
	margin: 2rem 0;
	padding: 15px 20px;
	padding: 1.5rem 2rem;
	justify-content: space-between;
	align-items: center;
}
.audio.show{
	display: flex;
}
.audio audio, p{
	display: inline-block;
	vertical-align: middle;
}
.audio p{
	margin: 0 25px 0 0;
	margin: 0 2.5rem 0 0;
}
/* INTRO */

/* NAVIGATION */
#left-sticky{
	display:inline-block;
	position: relative;
	width: 30%;
}
/* #mobile-nav-trigger{
	display: none;
} */
.intro img,.intro p{
	width: 35vw;
	display: block;
	font-family:"Autopia";
	margin: 0 auto;
}
.intro .inner p{
	margin-top: 1em;
	color: #EDECE9;
}
.intro .inner{
	width: 100%;
	height: 100vh;
	display: flex;
	text-align: center;
	flex-direction: column;
	justify-content: space-around;
}
.intro{
	background: url('../assets/textures/noise_bg.png'), linear-gradient(90deg, #2A1E4D 0%, #3B3A72 100%);
	background-blend-mode: soft-light;
	height: 100vh;
}
.inner{
	background: url('../assets/textures/stars.png');
	background-size:auto 100vh;
	background-position:center center;
}
.navigation .global-nav  li a, .navigation .global-nav  li a:hover, .navigation .global-nav  li a:visited, .navigation .global-nav  li a:focus, .navigation .global-nav  li a:link, .setting a, .setting a:hover, .setting a:visited, .setting a:focus, .setting a:link{
	border: none;
	color:#EDECE9;
}
.navigation{
	top:0;
    right: 0;
    z-index: 91;
    display: inline-block;
	position:fixed;
    width: auto;
    min-width: 80px;
	min-width: 8rem;
	height: 80px;
	height: 8rem;
    overflow: scroll;
	font-family: 'Selectric';
	font-style: normal;
	font-weight: normal;
	font-size: 17px;
	font-size: 1.7rem;
	line-height: 34px;
	line-height: 3.4rem;
	letter-spacing: -0.1em;
	color:#EDECE9;
	text-align: center;
	background: url('../assets/textures/noise_bg.png'), linear-gradient(90deg, #49387B 0%, #404385 100%);
	background-blend-mode: soft-light;
}
.navigation ul, .in-page-navigation ul{
	padding:0;
	margin:0;
	width:30vw;
}
.navigation li, .in-page-navigation li{
	border-top:1px solid;
	padding: 25px 0;
	padding: 2.5rem 0;
	margin: 0 25px;
	margin: 0 2.5rem;
}
.navigation li a, .in-page-navigation li a{
	text-decoration: none;
	border: none;
}
.in-page-navigation{
    font-family: 'Selectric';
	font-style: normal;
    font-weight: normal;
    font-size: 20px;
	font-size: 2rem;
    line-height: 27px;
	line-height: 2.7rem;
    text-align: center;
    letter-spacing: -0.1em;
    padding: 70px 0;
	padding: 7rem 0;
}

.in-page-navigation li a.on:before{
	position: relative;
    display: inline-block;
	content: ' ';
    background: url(../assets/icons/bullet.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px;
	width: 4rem;
    height: 28px;
	height: 2.8rem;
	padding: 0;
    bottom: 3px;
	bottom: 0.3rem;
    vertical-align: middle;
}
.navigation .global-nav{
	padding-top:25px;
	padding-top:2.5rem;
	margin-bottom: 50px;
	margin-bottom: 5rem;
}
.navigation .setting-toggles, .navigation .global-nav{
	display: none;
}
.navigation.open{
	height: auto;
}
.navigation.open li a{
	display: block;
	padding: 10px 0;
	padding: 0.1rem 0;
}
.navigation.open ul{
	padding-top: 50px;
	padding-top: 5rem;
}
.navigation.open li a.on{
	display: block;
	position: absolute;
	top:0;
	left:0;
	width: 100%;
}
.navigation li a.on:before{
	display: none;
}

#mobile-nav-trigger{
	display: inline-block;
	background: url('../assets/textures/noise_bg.png'), linear-gradient(90deg, #49387B 0%, #404385 100%);
	background-blend-mode: soft-light;
	position: absolute;
	width: 80px;
	width: 8rem;
	height: 80px;
	height: 8rem;
	right:0;
	top:0;
	text-align: center;
	z-index: 999;
	cursor: pointer;
}
#mobile-nav-trigger svg{
	position: relative;
	top: 1px;
	top: 0.1rem;
	transition: 0.2s;
	width: 50px;
	width: 5rem;
	height: 50px;
	height: 5rem;
}
#mobile-nav-trigger.open svg{
	transform: rotate(45deg);
 	transform-origin:center;
}
 .open.navigation{
	height: 100vh;
}
 .open.navigation .setting-toggles,  .open.navigation .global-nav{
	display: block;
}
 .open.navigation ul{
	padding: 0;
}
 .open.navigation li{
	padding: 0;
	width: 100%;
	margin: 0;
	font-size: 17px;
	font-size: 1.7rem;
	border-left: 1px transparent;
	border-right: 1px transparent;
}
.open.navigation li:hover{
	background-color: #4F30CA;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-left: 1px solid;
	border-right: 1px solid;
}
.in-page-navigation li:first-child{
	border:0;
}
.open.navigation li:first-child{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border: 1px solid transparent;
}
.open.navigation li:first-child:hover{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-left: 1px solid;
	border-right: 1px solid;
	border-top: 1px solid;
}
 .open.navigation li:last-child{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-top: 1px solid;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	border-bottom: 1px solid transparent;
 }
 .open.navigation li:last-child:hover{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	border-left: 1px solid;
	border-right: 1px solid;
	border-bottom: 1px solid;
}
 .open.navigation .global-nav{
	margin-top: 50px;
	margin-top: 5em;
	padding: 0 25px;
	padding: 0 2.5rem;
}

 .open.navigation li a{
	display: block;
	padding: 10px 0;
	padding: 1rem 0;
}
 .open.navigation li a.on{
	display: block;
}
 .open.navigation li a.on::before{
	height: 18px;
	height: 1.8rem;
	width: 30px;
	width: 3rem;
}
.setting-toggles{
 	background:url('../assets/textures/noise_bg.png'), linear-gradient(90deg, #2A1E4D 0%, #3B3A72 100%);
 	background-blend-mode: soft-light;
 	width: 100%;
 	padding: 0;
}
.twoCol {
	display: flex;
}
.setting fieldset{
	margin: 0;
	padding: 0;
	border:none;
}
.setting{
	font-size: 16px;
	font-size: 1.6rem;
	text-align: left;
	padding: 25px 30px;
	padding: 2.5rem 3rem;
	border-bottom:1px solid;
}

.setting input ~ label::before{
	content: '○';
	opacity: 1;
	position: absolute;
	left:0;
	font-size: 40px;
	font-size: 4rem;
	display: inline-block;
}
.setting input:checked ~ label::before{
	content: '⦿';
	opacity: 1;
	position: absolute;
	left:0;
	font-size: 25px;
	font-size: 2.5rem;
	display: inline-block;
}
.setting input:focus + label{
	box-shadow: 0 0px 5px white;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 5px;
}
.setting .option{
	position: relative;
	display: inline-block;
}
.setting label{
	width: 70px;
	width: 7rem;
	cursor: pointer;
	margin-left: 15px;
	margin-left: 1.5rem;
	text-align:left;
	display: inline-block;
}
.setting a{
	text-decoration: underline;
	border:none;
	display: inline-block;
}
.setting input{
	opacity: 0;
}
.setting:last-child{
	border:none;
}
.in-page-navigation{
	top:0;
	position:sticky;

}
/* FOOTER */
footer{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	background: url('../assets/textures/noise_bg.png'), linear-gradient(90deg, #2A1E4D 0%, #3B3A72 100%);
	background-blend-mode: soft-light;
	color:#EDECE9;
	padding: 15px 50px;
	padding: 1.5rem 5rem;
}
footer .footer-left{
	width: 40%;
	display: inline-block;
	margin-bottom:10px;
	margin-bottom:1rem;
}
footer h4{
	margin-bottom:0;
}
footer .footer-right{
	width: 40%;
	position: relative;
	text-align:right;
	align-self:stretch;
}
footer .footer-right p{
	position: absolute;
	bottom: 0;
	right:0;
	color:#ABB6E1;
	margin:0;
}
footer ul li{
	display: inline-block;
	margin-left: 50px;
	margin-left: 5rem;
}
footer img:hover{
	filter: invert(71%) sepia(35%) saturate(547%) hue-rotate(200deg) brightness(200%) contrast(104%);
}
footer ul li a, footer ul li a:focus, footer ul li a:link, footer ul li a:hover, footer ul li a:visited{
	border: none;
}
footer ul{
	text-align:right;
}
footer button{
	border: 1px solid #EDECE9;
	color: #EDECE9;
}
footer input{
	background: transparent;
	color:#EDECE9;
	outline:none;
	border:none;
	border-bottom:1px solid #EDECE9;
	width: 300px;
	width: 30rem;
	margin-right: 25px;
	margin-right: 2.5rem;
	vertical-align: bottom;
}
/* HEADERS */

/* SECTIONS */
main{
	width: calc(70% - 150px);
	width: calc(70% - 15rem);
	/* max-width: 80%; */
	display:block;
	/* overflow: hidden; */
	margin: 110px auto;
	margin: 11rem auto;
	padding-right: 25px;
	padding-right: 2.5rem;
}
main img{
	width: 100%;
	margin: 10px 0;
	margin: 1rem 0;
}
main p{
 font-family:'Newsreader';
}

main ul {
	margin: 12px 0;
	margin: 1.2rem 0;
	padding: 0;
}

main ul li{
  margin: 0;
  padding: 8px 0px 8px 40px;
  padding: 0.8rem 0 0.8rem 4rem;
  list-style: none;
  background-image: url('../assets/icons/flower.svg');
  background-repeat: no-repeat;
  background-position: 0 11px;
  background-position: 0 1.1rem;
  background-size: 22px;
  background-size: 2.2rem;
}
main ol li{
  list-style-type:decimal;
}

address{
	font-weight: normal;
	font-style: normal;
}

/* MOBILE */

@media(max-width: 768px){
	.page{
		display: block;
		position: relative;
	}
	/* NAVIGATION */
	hr.star-border{
		height: 30px;
    	height: 3rem;
	}
	main{
		display: block;
		float:none;
		width: calc(100% - 50px);
    	width: calc(100% - 5rem);
		padding: 0;
		margin: 40px auto;
    	margin: 4rem auto;
	}
	.navigation.open {
		width:100vw;
	}
	.navigation.open ul, .in-page-navigation ul{
		display: block;
		width:80vw;
		margin: auto;
	}
	#left-sticky{
		display: none;
	}
	.intro img, .intro p {
    	width: 66vw;
	}
	.intro{
		height: calc(100vh - 50px);
		height: calc(100vh - 5rem);
		overflow-y: hidden;
	}
	.in-page-navigation{
		display: none;
	}
	p.standout {
		padding: 25px;
		padding: 2.5rem;
	}

	/* Button styles */

	a.button, a.button:hover, a.button:link, a.botton:focus, a.button:visited, button, button:hover, button:link, button:focus,  button:visited {
		display: block;
		width: 80%;
	}
	audio{
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.audio{
		display: none;
		margin: 30px auto;
		margin: 3rem auto;
		padding: 25px;
		padding: 2.5rem;
		border:1px solid #2A1D64;
		background: linear-gradient(90deg, #eae6f6 0%, #e9e9e9 100%);
	}
	.audio.show{
		display: block;
	}
	.audio p{
		font-family: 'Selectric';
		font-size: 20px;
		font-size: 2rem;
		line-height: 28px;
		line-height: 2.8rem;
		letter-spacing: -0.1em;
		display: block;
		text-align: center;
		margin: 0 auto;
		padding: 0 0 20px 0;
	}
	/* FOOTER */
	footer{
		flex-direction: column;
	}
	footer .footer-left, footer .footer-right, footer ul{
		width: auto;
		text-align:left;
		margin-bottom:0;
	}
	footer .footer-right p{
		margin-top:2em;
		text-align:center;
		position: relative;
		display: block;
	}
	footer .footer-right ul{
		margin:0.5em 0 0 0;
		padding:0;
		text-align:center;
		display: flex;
		justify-content: space-around;
	}
	footer ul li{
		margin:0;
	}
	footer input{
		width: 100%;
		display: block;
		margin-bottom:3em;
	}
	footer button{
		width: 100%;
		margin-bottom:1em;
	}
}