@font-face {
  font-family: Pumpkin;
  src: url(../fonts/Pumpkin.otf);
}

@font-face {
  font-family: Bailey;
  src: url(../fonts/Bailey.ttf);
}

@font-face {
  font-family: Apercu;
  src: url(../fonts/ApercuLight.otf);
}

@font-face {
  font-family: ApercuItal;
  src: url(../fonts/ApercuLightItal.otf);
}

.logotext{
		font-family: "Pumpkin";
}

.emotiontext{
	font-family: "Bailey";
}

body,html {
  height: 100%;
}

body {
		background-image: url("../images/bg.png");
		background-repeat: repeat;
		color: #fff;
		font-family: "Apercu";
}

h1{
	font-size: 10vw;
}

h2 {
		font-size: 5vh;
		padding: 10%;
}

p {
		font-size: 1.9vh;
}


header.fixed{
	position: fixed;
	top: 2.5vh;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 100;
}

footer{
	text-align: center;
	padding-bottom: 2.5vh;
	font-size: 1.5vh;
}

.wheel img{
	width: 100%;
}

summary{
	list-style-type:none;
}

.emotions{
  font-size: 3.5vh;
  line-height: 4vh;
  margin-bottom: 0.5vh;
  width: 100%;
  background-color: rgba(255,255,255, 0.1);
}

.emotions span{
	font-family: "Pumpkin";
	margin-left: 1vw;
	display: inline-block;
	width: 320px;
	height: 100%;
    vertical-align: middle;
}

span.explain{
	font-family: "Apercu";
	font-size: 1.5vh;
	line-height: 1.5vh;
	text-align: center;
	padding: 1vh;
	width: 330px;
}

span.link{
	width: 250px;
}

.words span{
	width: auto;
	text-align: left;
	margin-right: 5vw;
	font-family: "Bailey";
	font-size: 5vh;
}

.lightfill{
		background-color: rgba(255,255,255, 0.1);
		margin-bottom: 0.5vh;
}

.emotions img{
	width: 320px;
	vertical-align: middle;
	padding: 1vh;
}

.toppad{
	padding-top: 20vh;
}

.centre{
	text-align: center;
}

img.logo{
	height: 20vh;
}

.container {
		height: 100%;
		width: 80%;
}

.full{
	width: 100% !important;
	padding-bottom: 5vh;
}
.row {
		align-items: center;
		text-align: center;
		height: 100%;
}

a{
	color: #b8d8b3;
	font-weight: bold;
	font-style: italic;
	text-decoration: none;
}

a:hover{

	color:  #78abc6;
	text-decoration: none;

}

/*Top Nav*/

*, *:before, *:after 
{ box-sizing: border-box; }

label .menu {
  position: fixed;
  top: -5vh;
  left: -5vh;
  width: 15vh;
  height: 15vh;
  background: rgba(255,255,255,0.5);
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.5);
  cursor: pointer;
  z-index: 999; 
}

.back{
  position: fixed;
  top: 40vh;
  right: -5vh;
  width: 15vh;
  height: 15vh;
  background: rgba(255,255,255,0.5);
  border-radius: 50% 50% 50% 50%;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.5);
  cursor: pointer;
  z-index: 999; 
}

.list{
	list-style-type: none;
	font-size: 1.9vh;
	text-align: left;
	font-weight: bold;
}

.list a{
		font-weight: bold;
	font-style: italic;
}

ul a{
	font-weight: normal;
	font-style: normal;
}

.scroll-control a{
	font-weight: normal;
	font-style: normal;
}


.back a{
	font-size: 10vh;
	color:white;
	text-decoration: none;
  position: fixed;
  right: 2vh;
  opacity: 1;
  z-index: 998;
  font-style: normal;
  font-weight: normal;
}

/*hamburger stripes*/
label .hamburger {
  position: absolute;
  top: 9vh;
  left: 8vh;
  width: 1.5vw;
  height: 0.2vh;
  background: white;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

label .hamburger:after, label .hamburger:before {
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: white;
}

label .hamburger:before { top: -10px; }

label .hamburger:after { bottom: -10px; }

/*end hamburger stripes*/

/*rotate*/

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  
}

label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
  
}

label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
  
}
/*end rotate*/

/*menu size*/
label input:checked + .menu {
  box-shadow: -90vh 0 0 100vh rgba(255,255,255,0.5);
  z-index: 999;
  border-radius: 10%;
}
/*end*/


label input { display: none; }

label input:checked + .menu + ul{ 
	opacity: 1; 
}

label ul {
	list-style-type: none;
  position: fixed;
  top: 15vh;
  left: 7.5vh;
  margin-top: 7vh;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-transition: .25s 0s ease-in-out;
  transition: .25s 0s ease-in-out;
  z-index: 998;
}

label a {
	margin-bottom: 1vh;
  display: block;
  color: white;
    text-align: center;
  text-decoration: none;
    align-items: center;
  justify-content:center;
    font-size:  2vh;
}

label a:hover{
	text-decoration: none;
	font-weight: bold;
	font-style: italic;
	color:white;
}

/*Side Nav*/

.scroll-control {
		position: fixed;
		right: 20px;
		top: 40%;
		transform: translateX(-50%);
		z-index: 999;
}

.scroll-control a {
	display:block;
	height:20px;
	margin-bottom:5px;
	color:white;
	position:relative;
	padding:4px;
}

.scroll-control a.active:after {
	box-shadow:inset 0 0 0 5px;
}
.scroll-control a .hover-text {
	width:5vw;
	right: 1vw;
	text-align: right;
	position:absolute;
	top:0px;
	opacity:0;
	-webkit-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
	padding-right: 0px;
}
.scroll-control a:hover .hover-text {
	opacity: 1;
}
.scroll-control a:after {
	-webkit-transition:box-shadow 0.2s ease;
	transition:box-shadow 0.2s ease;
	width:10px;
	height:10px;
	display: block;
	border:1px solid;
	border-radius:50%;
	content:'';
	position: absolute;
	margin:auto;
	top:0;
	right:4px;
	bottom:0;
}
/*media queries for mobile*/
/* Hover Text on side nav*/
@media all and (max-width: 1024px) {

	.scroll-control span { 
		display: none;
	}

	.container{
		padding-top: 5vh;
	}

	/*top nav*/
	label .hamburger {
	  width: 30px;
	  height: 2px;
	}

	/*logo*/

	img.logo{
		height: 10vh;
	}

	/*menu size*/
	label input:checked + .menu {
	  box-shadow: 0vh 0 0 200vw rgba(255,255,255,0.75);
	  z-index: 997;
	  border-radius: 10%;
	}
	/*end*/

	label .menu {
	  background: rgba(255,255,255,0.75);
	  box-shadow: 0 0 0 0 rgba(255,255,255,0.75);
	}
	/* Move UL to offscreen initially, then move it onscreen when checked */

	label ul {
		list-style-type: none;
	  position: fixed;
	  top: 40vh;
	  left: -30vh;
	  margin-top: 7vh;
	  -webkit-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
	  opacity: 0;
	  -webkit-transition: .25s 0s ease-in-out;
	  transition: .25s 0s ease-in-out;
	  width: 100%;
	}

	/*changes position on checked*/
	label input:checked + .menu + ul{ 
	  left: 45vw;
	  opacity: 1;
	}

	label a {
	  color: #b8d8b3;
	    font-size:  5vh;
	    font-weight: bold;
	}

	label a:hover{
		font-style: italic;
		color: #b8d8b3;
	}
}