:focus { outline: none; }

html
{
    overflow:scroll;
    overflow-x:hidden;
    overflow-y: scroll;
}

body{
	font-family: 'Montserrat', sans-serif;
	color:#282828;
	height:100%;
}

.placeholder{
  color:#b7b7b7!important;
}

.noselect, .generate .settings, .user-details{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: moz-none;
	-ms-user-select: none;
	user-select: none;
}

a{
	text-decoration: none;
}

.group:after {
	content: "";
	display: block;
	clear: both;
}

input{
	outline:none;
}

.error{
	margin-top: 20px;
	margin-bottom:20px;
	font-size:18px;
	color:#d01616;
	line-height:140%;
}

section{
}

section .wrapper{
	width:750px;
	margin:0 auto;
}


section.top{
	position:absolute;
	width: 100%;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	z-index: 1000;
}


section.generator{
	background-color: #fafafa;
	background: url(../img/bg.png);
	background-attachment: fixed;
}

section.other{
	padding:35px 0;
}



nav .primary {
}

nav .primary li {
	display: inline;
}

nav .primary a , .user-details{
	text-transform:uppercase;
	font-size:18px;
	font-weight:bold;
	padding:27px 18px;
	display:inline-block;
	color:#1b1b1b;
}

nav .primary li.logo a{
	background:url(../img/logo.png) 50% 50% no-repeat;
	width:50px;
}

nav .primary a:hover {
	color: #128abc;
}




.nav-primary li {
	float: left;
	display: block;
	line-height: 85px;
	margin-left: 25px;
	font-size: 14px;
	text-transform: uppercase;
}

.nav-primary li a {
	color: #7a7a7a;
	font-weight: bold;
}

.logo {
	display: block;
	padding: 27px 0;
}

.generator-container {
	xbackground-color: rgba(255,255,255,0.9);
}







.generate{
	padding:140px 0;
	padding-top: 225px;
}

.generate .title{
	font-size:24px;
}

.generate .url{
	padding:22px 0;
}

.generate .url input{
	font-size:24px;
	padding:18px 22px;
	color:#656565;
	width:706px;
	border: 2px solid #c9c9c9;
	border-radius: 4px;
}

.generate .settings {
	float: left;
    font-size: 15px;
    font-weight: bold;
    padding: 10px 0 5px 0px;
	width: 50%;
    transition: 0.3s all ease;
	cursor: pointer;
}

.generate .settings i {
    font-size: 20px;
    padding-right: 4px;
    bottom: -1px;
    position: relative;
}

.generate .settings.show,
.generate .settings:hover {
	color: #2962ff;
}

.generate .go{
	float:right;
}


.generate .go button,
.generate .go span {
	padding: 15px 33px;
	font-size: 14px;
	color: #fff;
	border-radius: 8px;
}

.generate .go button{
	background: #00c853;
	border:none;
	font-weight: bold;
	cursor: pointer;
    transition: 0.3s all ease;
}


.generate .go button:hover{
	background: #01ba4e;
}


.generate .go span{
	background: #2962ff;
	border:none;
	font-weight:bold;
	cursor: pointer;
    transition: 0.3s all ease;
}

.generate .go span:hover{
	background: #1d55ef;
}



.generate .more{
	float:left;
	width:55%;
	padding-top:40px;
	display:none;
}

.generate .more .smalltitle{
	font-size:18px;
	margin-bottom:20px;
}


.other .title{
	padding-top: 15px;
	font-size:21px;
	color:#ababab;
}

.other .button{
	float:left;
	height:65px;
	padding:15px;
	margin-top:25px;
	margin-right:30px;
	border:1px solid #dedede;
	background:#fff;
	border-radius: 4px;
}

.other .group img {
	border-radius: 4px;
}

.copyrights{
	margin-top:0px;
	font-size:14px;
	color:#C2C2C2;
	line-height:140%;
	margin-bottom: 0px;
}

.copyrights a{
	color:#A1A1A1;
}

.load-more{
	margin:auto;
	text-align:center;
	cursor:pointer;
	margin-top:30px;
	padding:16px 33px;
	text-transform:uppercase;
	font-size: 15px;
	color:#fff;
	font-weight:bold;
	color:#868686;

	background:#F5F5F5;
	border-bottom:4px solid #E7E7E7;
}

.login {
	cursor: pointer;
}


/* QR Update */

#qr-code {
	display: table;
	margin: 0 auto;
}

#qr-code canvas {
	margin-bottom: 40px;
	border: 10px solid #fff;
}


@media (max-width: 765px) {
	.wrapper {
		width: 100%!important;
		margin: 0!important;
	}

	input[name=url] {
		width: 250px!important;
		font-size: 16px;
	}

	header.top,
	section.generator,
	section.other {
		padding: 0 15px;
	}

	.generate {
		text-align: center;
		padding: 80px 0;
		padding-top: 145px;
	}

	.generate .settings {
	    margin: 0 auto;
	    display: table;
	    width: auto;
	    float: none;
	    margin-bottom: 20px;
	}

	.generate .go {
    	float: none;
	}

	.generate .more {
	    border-top: 0;
	    width: 100%;
	}

	.generate .more > div {
	    margin: 0 auto;
	    display: table;
	    width: auto;
	    float: none;
	}
}


/* Games */

.game-spacer {
	height: 85px;
}

.game-container {
	background: darkslategrey;
	position: absolute;
	left: 0; right: 0; top: 0px; bottom: 0;
	height: 100%;
	width: 100%;
	z-index: 0;
}

.game-container canvas {
	position: absolute;
	width: 100%;
	height: 100%;
}

.game-help {
	position: absolute;
	bottom: 0;
	right: 0;
	background: rgba(255,255,255,0.4);
	padding: 14px;
	font-size: 18px;
	font-style: italic;
	text-align: center;
	color: #fff;
	z-index: 1000;
}

.game-help i {
	padding-left: 5px;
}

.game-help i:first-child {
	padding-left: 25px!important;
}