body {
	background-color:#111;
	color:#ddd;
	font-size:36px;
	font-size:1.7vw;
	font-family:'Noto Serif SC', Bodoni, serif;

}

h1 {
	font-family:'Playfair Display', Bodoni, serif;;
}

a, a:visited, a:focus, a:active { 
	color:inherit;
	text-decoration:underline;
}
/* 
*************
NAVIGATION 
*************
 */

nav {
	position:fixed;
	right:0px;
	bottom:0px;
	padding:2.5em 1em;
	font-size:2vw;
	z-index:10000;
	height:3em;

/* 	background-color:#000;	 */
}

nav div {
	cursor:pointer;
}
nav > div {
	float:right;
	margin: 0 1em 0 0;
	opacity:0.7;
}
nav div.prev {
	margin-right:0.4em;
}

body.slide nav div.audio-control, body:not(.slide) nav div.start, body.lastslide nav div.prev {
	display:block;
}

body.startslide nav div.audio-control,
body.startslide nav div.prev,
body.slide nav div.start,
body.lastslide nav div.start,
body.lastslide nav div.audio-control,
body.lastslide nav div.next {
	display:none;
}

nav div.arrow {
	height:1em;
	width:1em;
	border-right:solid #ddd 0.2em;
	border-top:solid #ddd 0.2em;
	transform:rotate(45deg);
}

nav div.prev div.arrow {
	transform: rotate(225deg);
}
nav div.prev div.arrow:hover {
	transform: rotate(225deg) scale(90%);
	cursor:pointer;	
}

nav div.next div.arrow:hover {
	transform: rotate(45deg) scale(90%);
	cursor:pointer;
}

nav div.audio-control {
margin-top:-0.5em;

}

.progress-ring__circle {
	margin-top:-0.2em;
  stroke-dasharray: 20 0;
  stroke-width: 0.2em;
  stroke: #ddd;
  transition: stroke-dashoffset 0.35s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.progress-ring__shade {
  margin-top:-0.2em;
  stroke: #222;
  stroke-width: 0.2em;

}

/* 
******************
SLIDES SECTION  
******************
*/
section:not(.current) {
	display:none;
}

section.current {
	display:block;
}

/* 
******************
Start Slide  
******************
*/

.title-center {
	position:relative;
	top:20vh;
	left:0px;
	right:0px;
	width:80vw;
/* 	font-family:'Playfair Display', Bodoni, serif; */
	margin:auto;
	text-align:center;
}
h1 {
	font-size:7vw;
	font-weight:700;
}
h2 {
	font-size:2vw;
	font-weight:400;
}


/* 
******************
Regular Slides  
******************
*/
 
/* 
section .frame {
	margin-left:20vw;
	opacity:0.0;
}
 */
 

section .container {
	display:none;
	min-height:100vh ;
	height:auto;
	top:0px;
	width: 50vw;
	position:absolute;
	background-color:#111;
	padding:1em;
	padding-top:0.8em;
	    -webkit-animation: fadeinC 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeinC 1s; /* Firefox < 16 */
        -ms-animation: fadeinC 1s; /* Internet Explorer */
         -o-animation: fadeinC 1s; /* Opera < 12.1 */
            animation: fadeinC 1s;

}
section.showCont .container {
	display:block;
}
.container:after {
	content: ".";
	display: block;
	clear: both;
	font-size: 0;
	height: 0;
	visibility: hidden;
}

section .container.left {
	left:0px;
	right:unset;
}

section .container.right {
	right:0px;
	left:unset;
}




section h3 {
	font-size:1.15em;
	font-weight:bold;
	margin-bottom:1em;
}
section p {
	hyphens:auto;
	margin-bottom:0.5em;
}

section .frame {
	left:0px;
	top:0px;
	width:100vw;
	height:100vh;
	position: fixed;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
	z-index:-10;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}







}

@keyframes fadeinC {
    from { opacity: 0; }
    to   { opacity: 0.8; }
}

/* Firefox < 16 */
@-moz-keyframes fadeinC {
    from { opacity: 0; }
    to   { opacity: 0.8; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeinC {
    from { opacity: 0; }
    to   { opacity: 0.8; }
}

/* Internet Explorer */
@-ms-keyframes fadeinC {
    from { opacity: 0; }
    to   { opacity: 0.8; }
}

/* Opera < 12.1 */
@-o-keyframes fadeinC {
    from { opacity: 0; }
    to   { opacity: 0.8; }
}


@media only screen and (max-width: 850px) {
	body, p  {
		font-size:4vw;
	}
	section .container {
		left:0px;
		right:0px;
		width:100vw;
	}
	nav {
		transform:scale(200%);
		transform-origin:100% 100%;
	}
	h1 { font-size:12vw}
	h2 { font-size:4vw}
	h3 { font-size:2.5vw}
}



@media only screen and (max-width: 500px) {
	body, p  {
		font-size:5vw;
	}
	section .container {
		left:0px;
		right:0px;
		width:100vw;
		opacity:0.7;
	}
	nav {
		transform:scale(300%);
		transform-origin:100% 100%;
	}
	h1 { font-size:14vw}
	h2 { font-size:6vw}
	h3 { font-size:3vw}
	
}