@font-face {
  font-family: 'Lato-Regular';
  src: url('../fonts/regular/Lato-Regular.eot');
  src: url('../fonts/regular/Lato-Regular.woff2') format('woff2'),
       url('../fonts/regular/Lato-Regular.woff') format('woff'),
       url('../fonts/regular/Lato-Regular.ttf') format('truetype'),
       url('../fonts/regular/Lato-Regular.svg#Lato-Regular') format('svg'),
       url('../fonts/regular/Lato-Regular.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
html, body{
	font-family: 'Lato-Regular', sans-serif;
	margin:0;
	padding:0;
	overflow:hidden;
	background:#FAFAFA;
}
body::-webkit-scrollbar {
	width: 8px;
}
body::-webkit-scrollbar-thumb {
  background: #4CAF50; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(#4CAF50 , #1B5E20); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#4CAF50, #1B5E20); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#4CAF50, #1B5E20); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#4CAF50 , #1B5E20); /* Standard syntax */
}
.controls-container::-webkit-scrollbar {
	width: 8px;
}
.controls-container::-webkit-scrollbar-thumb {
  background: #4CAF50; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(#4CAF50 , #1B5E20); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#4CAF50, #1B5E20); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#4CAF50, #1B5E20); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#4CAF50 , #1B5E20); /* Standard syntax */
}
canvas{ 
	width:100%; 
	height:100%; 
}
.root{
	z-index:0;
	cursor:pointer;
}
.ripple-button{
	cursor:pointer;
	position:relative;
	overflow:hidden;
}
.splash{
	pointer-events:none;
	position:absolute;
	background:#9E9E9E;
	border-radius:50%;
	opacity:0.5;
	transform: scale(0,0);
	animation: splash 1s, fade 1.5s;

	-webkit-transform: scale(0,0);
	-webkit-animation: splash 1s, fade 1.5s;

	-moz-transform: scale(0,0);
	-moz-animation: splash 1s, fade 1.5s;

	-o-transform: scale(0,0);
	-o-animation: splash 1s, fade 1.5s;
}
@keyframes splash {
	from {transform: scale(0,0);}
	to {transform: scale(1,1);}
}
@keyframes fade {
	from {opacity:0.5;}
	to {opacity:0;}
}
@-webkit-keyframes splash {
	from {transform: scale(0,0);}
	to {transform: scale(1,1);}
}
@-webkit-keyframes fade {
	from {opacity:0.5;}
	to {opacity:0;}
}
@-moz-keyframes splash {
	from {transform: scale(0,0);}
	to {transform: scale(1,1);}
}
@-moz-keyframes fade {
	from {opacity:0.5;}
	to {opacity:0;}
}
@-o-keyframes splash {
	from {transform: scale(0,0);}
	to {transform: scale(1,1);}
}
@-o-keyframes fade {
	from {opacity:0.5;}
	to {opacity:0;}
}
.errorModal{
	position:absolute;
	z-index:1;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	height:300px;	
	width:80%;
	max-width:400px;
	background:white;
	text-align:center;

	/*Box Shadow*/
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	-moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

	/*Border Radius*/
	border-radius:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;

	/*Transform*/
	transform:scale(0, 0);
	-webkit-transform:scale(0, 0);
	-ms-transform:scale(0, 0);
	-moz-transform:scale(0, 0);
	-o-transform:scale(0, 0);

	/*Transition*/
	transition: transform .25s;	
	-webkit-transition: transform .25s;
	-moz-transition: transform .25s;
	-o-transition: transform .25s;

	/*Transition Timing Function*/
   transition-timing-function: ease-in-out;
	-webkit-transition-function: ease-in-out;
	-moz-transition-function: ease-in-out;
	-o-transition-function: ease-in-out;
}
.errorModal_animation{

	/*Transform*/
	transform:scale(1, 1);
	-webkit-transform:scale(1, 1);
	-ms-transform:scale(1, 1);
	-moz-transform:scale(1, 1);
	-o-transform:scale(1, 1);
}
.errorModal-top{
	position:relative;
	width:100%;
	height:50%;
	text-align:center;
	padding-top:25px;
}
.errorModal-top img{
	height:100%;
}
.errorModal-middle{
	box-sizing:border-box;
	text-align:center;
	padding-left:16px;
	padding-right:16px;
	opacity:0.65;
}
.errorModal-button{
	display:inline-block;
	position:absolute;
	bottom:0;
	padding:16px 32px 16px 32px;
	color:#4CAF50;

	/*Transform*/
	transform:translate(-50%, 0);
	-webkit-transform:translate(-50%, 0);
	-ms-transform:translate(-50%, 0);
	-moz-transform:translate(-50%, 0);
	-o-transform:translate(-50%, 0);
}
.initModal{
	position:absolute;
	z-index:3;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	height:300px;	
	width:80%;
	max-width:400px;
	background:white;
	text-align:center;

	/*Box Shadow*/
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	-moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

	/*Border Radius*/
	border-radius:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;

	/*Transform*/
	transform:scale(0, 0);
	-webkit-transform:scale(0, 0);
	-ms-transform:scale(0, 0);
	-moz-transform:scale(0, 0);
	-o-transform:scale(0, 0);

	/*Transition*/
	transition: transform .25s;	
	-webkit-transition: transform .25s;
	-moz-transition: transform .25s;
	-o-transition: transform .25s;

	/*Transition Timing Function*/
   transition-timing-function: ease-in-out;
	-webkit-transition-function: ease-in-out;
	-moz-transition-function: ease-in-out;
	-o-transition-function: ease-in-out;
}
.initModal_animation{

	/*Transform*/
	transform:scale(1, 1);
	-webkit-transform:scale(1, 1);
	-ms-transform:scale(1, 1);
	-moz-transform:scale(1, 1);
	-o-transform:scale(1, 1);
}
.initModal-top{
	position:relative;
	width:100%;
	height:50%;
	text-align:center;
	padding-top:25px;
}
.initModal-top img{
	height:100%;
}
.initModal-middle{
	box-sizing:border-box;
	text-align:center;
	padding-left:16px;
	padding-right:16px;
	opacity:0.65;
}
.initModal-button{
	display:inline-block;
	position:absolute;
	bottom:0;
	padding:16px 32px 16px 32px;
	color:#4CAF50;

	/*Transform*/
	transform:translate(-50%, 0);
	-webkit-transform:translate(-50%, 0);
	-ms-transform:translate(-50%, 0);
	-moz-transform:translate(-50%, 0);
	-o-transform:translate(-50%, 0);
}
.header{
	position:fixed;
	text-align:center;
	overflow:hidden;
	z-index:2;
	width:100%;
	height:60px;
	background:white;

	/*Box Shadow*/
	box-shadow:0 3px 40px rgba(0,0,0,0.1);
	-webkit-box-shadow:0 3px 40px rgba(0,0,0,0.1);
	-moz-box-shadow:0 3px 40px rgba(0,0,0,0.1);
}
.back{
	position:absolute;
	left:0;
	height:60px;
	width:60px;
}
.back img{
	pointer-events:none;
	width:100%;
	top:0;
	bottom:0;
	margin:auto;

	/*Transform*/
	transform:scale(.75, .75);
	-webkit-transform:scale(.75, .75);
	-ms-transform:scale(.75, .75);
	-moz-transform:scale(.75, .75);
	-o-transform:scale(.75, .75);
}
.logo{
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	height:60px;
	width:60px;
}
.logo img{
	pointer-events:none;
	height:60px;
	margin-top:5px;
}
.menu{
	position:absolute;
	right:0;
	height:60px;
	width:60px;

	-webkit-transition: transform .33s;
	-moz-transition: transform .33s;
	-o-transition: transform .33s;

   transition-timing-function: ease-in-out;
	-webkit-transition-function: transform ease-in-out;
	-moz-transition-function: transform ease-in-out;
	-o-transition-function: transform ease-in-out;
}
.menu img{
	pointer-events:none;
	width:100%;
	top:0;
	bottom:0;
	margin:auto;

	transform:scale(.75, .75);
	-webkit-transform:scale(.75, .75);
	-ms-transform:scale(.75, .75);
	-moz-transform:scale(.75, .75);
	-o-transform:scale(.75, .75);
}
.menu-animation{
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-o-transform:rotate(180deg);
}
.controls{
	position:fixed;
	background:white;
	z-index:1;
	right:0;
	top:0;
	height:100%;
	width:50%;
	max-width:300px;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

	-webkit-transition: transform .33s;
	-moz-transition: transform .33s;
	-o-transition: transform .33s;

   transition-timing-function: ease-in-out;
	-webkit-transition-function: transform ease-in-out;
	-moz-transition-function: transform ease-in-out;
	-o-transition-function: transform ease-in-out;

	transform:translate(0, -100%);
	-webkit-transform:translate(0, -100%);
	-ms-transform:translate(0, -100%);
	-moz-transform:translate(0, -100%);
	-o-transform:translate(0, -100%);
}
.controls-animation{
	transform:translate(0, 0);
	-webkit-transform:translate(0, 0);
	-ms-transform:translate(0, 0);
	-moz-transform:translate(0, 0);
	-o-transform:translate(0, 0);
}
.controls-container{
	box-sizing:border-box;
	overflow:auto;
	position:relative;
	padding:60px 16px 60px 16px;
	width:100%;
	height:100%;
	text-align:center;
}

.controls-container h5{
	opacity:0.8;
}
.option{
	width:100%;
	min-width:160px;
	text-align:left;
	margin-bottom:16px;
}
.description{
	margin-left:8px;
	opacity:0.65;
}
.info{
	position:relative;
	float:right;
	cursor:pointer;
	opacity:0.33;
}
.footer{
	position:absolute;
	background:white;
	bottom:0;
	width:100%;
	height:60px;
	text-align:center;
	cursor:pointer;
	z-index:2;	
}
.footer h5{
	pointer-events:none;
	opacity:0.8;
	color:#4CAF50;
}
.loader{
	position:fixed !important;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	z-index:2;
}
.fab{
	z-index:3;
	position:fixed;
	bottom:16px;
	right:16px;
	width:60px;
	height:60px;
	border-radius:50%;
	background:#FFFFFF;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
	cursor:pointer;
}
.fab img{

	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
}