html, body{
	font-family: 'RobotoDraft', sans-serif;
	font-size:16px;
	-webkit-font-smoothing: antialiased;
}
a{
	color: #00bcd4;
	text-decoration: none;
}
ol, ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
#wrapper{
	position: relative;
	width: 100%;
}
header{
	background-color: #00bcd4;
	box-shadow: 0 2px 5px rgba(0,0,0,.26);
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1;
}
.lab-button,
.back-button,
.hamburger-button{
	background-size: 24px 24px;
	border: 0;
	display: block;
	height: 48px;
	left: 4px;
	overflow: hidden;
	position: fixed;
	text-indent: -9999px;
	top: 4px;
	width: 48px;
	z-index: 2;
}
.lab-button{
	background: url("../images/labs.png") transparent center center no-repeat;
}
.back-button{
	background: url("../images/back.png") transparent center center no-repeat;
}
.hamburger-button{
	background: url("../images/hamburger.svg") transparent center center no-repeat;
}
#header-wrapper{
	padding-left: 56px;
}
#header-wrapper span,
#header-wrapper a{
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	line-height: 56px;
	margin: 0;
	padding: 0;
}
section{
	box-sizing:border-box;
	margin: 56px auto 0 auto;
	max-width: 1120px;
	padding: 20px;
	width: 100%;
}
.red{
	background-color: #e51c23;
}
.pink{
	background-color: #e91e63;
}
.purple{
	background-color: #9c27b0;
}
.deeppurple{
	background-color: #673ab7;
}
.indigo{
	background-color: #3f51b5;
}
.blue{
	background-color: #5677fc;
}
.lightblue{
	background-color: #03a9f4;
}
.cyan{
	background-color: #00bcd4;
}
.teal{
	background-color: #009688;
}
.green{
	background-color: #259b24;
}
.lightgreen{
	background-color: #8bc34a;
}
.lime{
	background-color: #cddc39;
}
.yellow{
	background-color: #ffeb3b;
}
.amber{
	background-color: #ffc107;
}
.orange{
	background-color: #ff9800;
}
.deeporange{
	background-color: #ff5722;
}
.brown{
	background-color: #795548;
}
.grey{
	background-color: #9e9e9e;
}
.bluegrey{
	background-color: #607d8b;
}
.title{
	color: #00bcd4;
	font-size: 20px;
	font-weight: 400;
	line-height: 40px;
	margin: 0 0 20px 0;
}
.tile{
	box-shadow: 0 2px 5px rgba(0,0,0,.26);
	box-sizing: border-box;
	color: #fff;
	float: left;
	height: 170px;
	margin: 1%;
	opacity: 0;
	padding: 20px;
	text-align: center;
	transform: scale(0);
	width: 48%;
}
.tile img{
	display: block;
	margin: 0 auto 10px auto;
}
.visible{
	opacity: 1;
	transform: scale(1);
}
.clickable{
	cursor: pointer;
	overflow: hidden;
	position: relative;
	transition: all .3s ease-out;
}
.hovered {
	transform: scale(1.05) !important;
}
.ripple{
	background: rgba(255,255,255,.05);
	border-radius: 100%;
	height: 0;
	position: absolute;
	transition: all .3s ease-out;
	width: 0;
}
.notransition{
	transition: none !important;
}

/* Form */
.input-text{
	margin-top: 15px;
	position: relative;
}
.input-text input{
	border: none;
	border-bottom: 1px solid #757575;
	box-sizing: border-box;
	display: block;
	font-size: 16px;
	padding: 15px 0 5px 5px;
	width: 100%;
}
.input-text input:focus{
	outline: none;
}
.input-text label{
	color: #999; 
	font-size: 16px;
	font-weight: normal;
	left: 5px;
	pointer-events: none;
	position: absolute;
	top: 10px;
	transition: 0.2s ease all; 
}
.input-text input:focus ~ label,
.input-text input.used ~ label{
	color: #666;
	font-size: 14px;
	top: -5px;
}
.input-text .bar{
	display: block;
	position: relative;
	width: 100%;
}
.input-text .bar:before,
.input-text .bar:after{
	background: #009688;
	bottom: 1px;
	content: '';
	height: 2px;
	position: absolute;
	transition: all 0.2s ease;
	width: 0;
}
.bar:before {
	left:50%;
}
.bar:after {
	right:50%; 
}
.input-text input:focus ~ .bar:before,
.input-text input:focus ~ .bar:after {
	width:50%;
}
.input-button{
	background: #009688;
	border-radius: 3px;
	border: none;
	box-shadow: 0 2px 5px rgba(0,0,0,.26);
	color: #fff;
	display: block;
	display: inline-block;
	margin-top: 15px;
	padding: 5px 20px;
	position:relative;
}
.input-check{
	display: block;
	margin-bottom: 15px;
	position: relative;
}
.input-check input{
	display: none;
}
.input-check span{
	border: 2px solid #333;
	bottom: 0;
	height: 14px;
	left: 0;
	position: absolute;
	transition:all .3s ease-out;
	width: 14px;
	z-index: 1;
}
.input-check input:checked ~ span{
	border: 2px solid #0f9d58;
	border-top: none;
	border-right: none;
	content: '';
	height: 7px;
	top: 2px;
	transform: rotate(-45deg);
	transition:all .3s ease-out;
	width: 20px;
}
.input-check label{
	padding-left: 24px;
	z-index: 2;
}

@media screen and (min-width:640px){
	.tile{
		width: 31%;
	}
}
@media screen and (min-width:768px){
	.lab-button,
	.back-button,
	.hamburger-button {
		left: 12px;
		top: 8px;
	}
	#header-wrapper{
		padding-left: 72px;
	}
	#header-wrapper span,
	#header-wrapper a{
		font-size: 24px;
		line-height: 64px;
	}
	section{
		margin: 64px auto 0 auto;
	}
	.tile{
		width: 23%;
	}
}