@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family:QuattrocentoSans, Quattrocento Sans;
	src: url(../fonts/QuattrocentoSans-Regular.ttf);
}

body {
	font-family: 'Lato', Arial, sans-serif;
}

a, button {
	outline: none;
}

a {
	text-decoration: none;
}

.container > header {
	margin: 0 auto;
	padding: 2em;
	text-align: center;
	background: rgba(0,0,0,0.01);
}


.container > header h1 {
	font-size: 2.625em;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
}

.container > header span {
	display: block;
	font-size: 60%;
	opacity: 0.7;
	padding: 0 0 0.6em 0.1em;
}



.container > section {
	padding: 2em;
	font-size: 1.4em;
	max-width: 50em;
	margin: 0 auto;
}

.container > section p {
	padding: 0.8em 0;
	text-align: justify;
	opacity: 0.5;
	font-weight: 300;
	line-height: 1.4;
}

body {
  background: #323232;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
}


nav a {
  display: block;
  font: bold 1rem Sans-serif;
  color: rgba(0, 0, 0, .25);
  padding: 1em 2em;
  text-align: center;
  text-decoration: none;
}

nav li.completed a {
  color: rgba(0, 0, 0, .5);
}






.cls-1 {
	fill: rgba(175,175,175,1);
	transition: .3s;
	transition-timing-function: ease-in-out;
	-webkit-transition: .3s;
	-webkit-transition-timing-function: ease-in-out
}

.cls-1:hover {
	fill: #6ec8e6;
}

.cls-1:active {
    fill: #5093a5;
}

.cls-2 {
	fill: #232323;
	pointer-events: none;
}

#circlenav {
height: 40vh;
	position: fixed;
  top: 30%;
  left: 50%;
  margin-top: -10vh;
  margin-left: -6.5vh;
  shadow: 0 25px 20px -16px rgba(000,000,000,0.4), 0 10px 8px -8px rgba(000,000,000,0.5);
}

.cls-3 {
	fill:#323232;
	font-family:QuattrocentoSans;
	font-size: .58em;
	pointer-events: none;
}

.cls-4 {
	fill: rgba(175,175,175,1);
	transition: .3s;
	transition-timing-function: ease-in-out;
	-webkit-transition: .3s;
	-webkit-transition-timing-function: ease-in-out
}

.cls-11 {
	fill:#bdbdbd;
	font-family:QuattrocentoSans;
	font-size: .58em;
}