*, *:after, *:before { box-sizing: border-box; }
body,html { margin: 0px;
			padding: 0px;
			background: #afafaf;
			overflow: hidden; }

#line { position: absolute;
		border-radius: 1px;
		left: 10%;
		top: 20%;
		width: 80%;
		background-color: rgba(64, 64, 64, 0.75);
		height: 3px; }

#logo { position: absolute;
	    left: 20px;
		top: 20px; }

h1 { text-shadow: 5px 10px 16px rgba(0, 0, 0, 0.8); }
#title { position: absolute;
		 color: rgb(245, 245, 245);
		 font-size: 3vh;
		 top: 50%;
		 left: 50%;
		 transform: translate(-50%, -50%);
		 
		 text-align: center;
		 z-index: 1; }

#canvas { position: absolute;
		  left: 0px;
		  top: 0px;
		  width: 100%;
		  height: 100%;
		  z-index: 0;
		  background-color: #1f1f1f; }

#list { position: absolute;
	    top: 10%;
		left: 10%;
		width: 80%; }

ul.navbar { width: 100%;
	        list-style-type: none; }

li.navbar a { transition: all 1s ease;
	   color: white;
	   font-family: "Ubuntu Mono";
	   font-size: 32pt;
	   font-weight: 700;
	   text-decoration: none;
	   float: left;
	   outline: none;
	   width: 20%;
	   margin: 1%;
	   border-radius: 10px;
	   text-align: center;
	   position: relative; }

li.navbar a:hover::before { transform: scale(1);
							border: 2px solid white; }

li.navbar a::before { content: '';
			   width: 100%;
			   height: 100%;
			   left: 0%;
			   border: 2px solid transparent;
			   border-radius: 10px;
			   position: absolute;
			   transform: scale(0);
			   transition: border 250ms ease, transform 250ms ease; }

ul.demo {
	width: auto;
	list-style:none;
	float:left;
	padding: 0 0 0 5%;
}

.demo ul li {
	width:30%;
	position:relative;
	cursor:pointer;
}

.demo ul li img {
	max-width:30%;
	margin: 10px;
	padding: 10px;
}

.demo img {
	position: absolute;
	transition:all 300ms ease-in;
	transform:scale(1);
}

.demo img:hover {
	transform:scale(.8);
}

#main { position: absolute;
		top: 21%;
		left: 10%;
        width: 80%;
		height: auto; }

h2 { line-height: 75px;
	 text-align: center;
	 font-size: 35pt;
	 font-family: Ubuntu Mono;
	 font-weight: 900;
	 margin: 5%;
	 color: white; }

h3 { line-height: 55px;
	 text-align: center;
	 font-size: 25pt;
	 font-family: Ubuntu Mono;
	 font-weight: 900;
	 margin: 5%;
	 color: white; }

.center { text-align: center; }
.justify { text-align: justify; }

p { font-family: Ubuntu;
	font-size: 16pt;
	color: white;
	margin: 5%;
	display: block; }

.disable-select { -webkit-user-select: none;
				  -moz-user-select: none;
				  -ms-user-select: none;
				  user-select: none; }

.page { position: absolute;
		overflow-y: auto;
		overflow-x: hidden;
		transition: opacity 750ms, transform 750ms; }

.active { opacity: 1.;
          transform: scale(1); }

.inactive { opacity: .0;
            transform: scale(0); }

.front { background: rgba(32, 32, 32, .5);
		 width: 100%;
		 height: auto;
		 border-radius: 10px; }

.back { background: rgba(32, 32, 32, .5);
		width: 100%;
		height: 700px;
		border-radius: 10px; }

.left { background: rgba(32, 32, 32, .5);
		width: 100%;
		height: auto;
		border-radius: 10px; }

.right { background: rgba(32, 32, 32, .5);
		 width: 100%;
		 height: auto;
		 border-radius: 10px; }

/*-----------------*/

.grid {
	padding: 20px 20px 100px 20px;
	max-width: 1300px;
	margin: 0 auto;
	list-style: none;
	text-align: center;
}

.grid li {
	display: inline-block;
	width: 400px;
	margin: 0;
	padding: 20px;
	text-align: left;
	position: relative;
}

.grid figure {
	margin: 0;
	position: relative;
}

.grid figure img {
	max-width: 100%;
	display: block;
	position: relative;
	z-index: 10;
	transition: transform 0.4s;
}

.grid figcaption {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	background: #2c3f52;
	color: #ed4e6e;
	height: 100%;
	width: 100%;
	backface-visibility: hidden;
}

.grid figcaption h3 {
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 18pt;
	margin-top: 25%;
}

.grid figcaption span:before {
	content: 'by ';
}

.grid figcaption a {
	text-align: center;
	padding: 5px 10px;
	border-radius: 2px;
	display: inline-block;
	background: #ed4e6e;
	color: #fff;
	position: absolute;
	bottom: 20px;
	right: 20px;
}

figure:hover img {
	transform: translateY(-30px) scale(0.5);
}