body {
	padding: 0;
	margin: 0;
	color: #615F5F;
	background-color: #FFFFFF;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	font-weight: 300;	
	width: 100%;
	height: 100%;
	z-index: 3;
}

#content {
	width: 50%;
	height: 50%;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	text-align: center;
	z-index: 10;
}

#content h1 {
	font-size: 50px;
	color: #424242;
	margin: auto;
	text-align: center;
	letter-spacing: 7px;
}

#content h2 {
	font-size: 18px;
	color: #474747;
	text-align: center;
	letter-spacing: 2px;
	font-weight: 200;
}

#socialmedia {
	position: relative;
	text-align: center;
	margin: auto;
	top: 0px; left: 0; bottom: 0; right: 0;
}

#socialmedia ul {
	display: inline-block; 
	list-style: none;
}

#socialmedia li {
	float: left;
	padding: 5px;
}

#socialmedia a {
	opacity: 1;
}

#socialmedia a:hover {
	opacity: 0.5;
}

#links {
	position: relative;
	text-align: center;
	margin: auto;
	top: 0px; left: 0; bottom: 0; right: 0;

}

#links ul {
	display: inline-block;
	list-style: none;
	float: center;
}

#links li {
	padding: 5px;
	display: inline;
}

#links a {
	text-decoration: none;
	color: #090909;
	opacity: 1;
}

#links a:hover {
	opacity: .5;
}

#randomfact {
	position: absolute;
	text-align: center;
	margin: auto;
	top: 400px; left: 0; bottom: 0; right: 0;
	font-size: 14px;
	color: #060606;
}

#draw-shapes {
	z-index: -10;
}

.inline-popups {
	z-index: 10;
}

.aboutbtn {
	width: 50px;
	height: 50px;
	border: 0px;
	border-radius: 50%;
	background-color: #d9d9d9;
	opacity: .8;
	text-align: center;
	vertical-align: middle;
	line-height: 50px;
	float: left;
	z-index: 30;
	font-size: 25px;
	font-weight: 900;
	color: #090909;
	margin: 10px;
	position: relative;
	text-decoration: none;
}

.aboutbtn:hover {
	opacity: .6;
	-webkit-transform: scale(.8);
	-moz-transform: scale(.8);
	-ms-transform: scale(.8);
	transform: scale(.8);
}

#about {
	font-size: 15px;
	position: relative;
	background: #d9d9d9;
	width: auto;
	max-width: 500px;
	opacity: .8;
}

.popup {
  position: relative;
  background: #FFF;
  padding: 25px;
  width:auto;
  max-width: 400px;
  margin: 0 auto; 
}

/* 3D Unfold effect from Codepen.io */
.mfp-3d-unfold {
  
  .mfp-content {
    perspective: 2000px; 
    -webkit-perspective: 2000px; 
  }
  
  /* start state */
  .mfp-with-anim {
    opacity: 0;
    transition: all 0.3s ease-in-out;
    -moz-transition-property: all 0.3s ease-in-out; /* Firefox 4 */
    -webkit-transition-property: all 0.3s ease-in-out; /* Safari and Chrome */
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateY(-60deg);
    -webkit-transform: rotateY(-60deg);
  }
  
  &.mfp-bg {
    opacity: 0;
    transition: all 0.5s;
    -moz-transition-property: all 0.5s ease-in-out; /* Firefox 4 */
    -webkit-transition-property: all 0.5s ease-in-out; /* Safari and Chrome */
  }
  
  /* animate in */
  &.mfp-ready {
    .mfp-with-anim {
      opacity: 1;
      transform: rotateY(0deg);
      -webkit-transform: rotateY(0deg);
    }
    &.mfp-bg {
      opacity: 0.8;
    }
  }
  
  /* animate out */
  &.mfp-removing {
    
    .mfp-with-anim {
      transform: rotateY(60deg);
      -webkit-transform: rotateY(60deg);
      opacity: 0;
    }
    &.mfp-bg {
      opacity: 0;
    }
    
  }
  
}