@font-face {
	src: url(/fonts/Ubahn.ttf);
	font-family: ubahn;
}
html,body {
	background-color: #E1E1E1;
	margin: 0;
	padding: 0px;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	width: 100%;
}


.big1 {
	font-size: 50px;
	padding: 0px;
	margin:0px;
}
.big2
{
  font-size: 35px;
  padding:0px;
  margin:0px;
}
.big3
{
  font-size: 22px;
  padding:0px;
  margin:0px;
}
.big4
{
  font-size: 15px;
  padding:0px;
  margin:0px;
}
.big5
{
  font-size: 7px;
  padding:0px;
  margin:0px;
}

/* nav3 */
nav3 {
	margin-bottom: 10px;
}
nav3 ul {
	overflow: auto;
	margin: 0px;
	list-style: none;
	padding: 15px;
}
nav3 ul.primary {
	background: linear-gradient(to right, #000000, #000000);
}
nav3 ul.primary li a.logo {
	padding: 0px;
	padding-right: 5px;
}
nav3 ul.primary li {
	float:left;
}
nav3 ul.primary li a {
	transition: color .3s;
	text-decoration: none;
	float: left;
	display: block;
	padding:5px;
	color: #fff;
}
nav3 ul.primary li a:hover {
	color: rgba(255,255,255,0.8);
}
nav3 ul.primary .left {
	float:left;
}
nav3 ul.primary .right {
	float:right;
}
nav3 ul.secondary {
	background-color: #333;
	padding:0px;
}
nav3 ul.secondary li {
	float:left;
	padding:15px;
	padding-left:5px;
	padding-right:5px;
}
nav3 ul.secondary li a {
	text-decoration: none;
	color: #fff;
	border: 1px solid transparent;
	border-radius:5px;
	padding:5px;
}
nav3 ul.secondary li a:hover {
	border-color:#808080;
}
nav3 ul.secondary .left {
	float:left;
}
nav3 ul.secondary .right {
	float:right;
}
/* Header 2 */
nav2 {
	font-weight: 600;
}
nav2:hover {
	cursor: default;
}
nav2 .logo {
	background: linear-gradient(to right, #000000, #000000) ;
	overflow:auto;
	text-align:center;
	padding: 15px;
}
nav2 .logo img {
	width: 150;
}
nav2 ul {
	margin: 0px 0px 10px 0px;
	padding: 6px;
	text-align: center;
	list-style-type: none;
	background-color: #444;
}

nav2 ul li {
	display: inline-block;
	margin-left: 5px;
}

nav2 li a {
	border-radius: 5px;
	padding: 5px;
	border: 1px solid transparent;
	display: block;
	float: left;
	color: #fff;
}

nav2 li a.logout:hover {
	background-color: #ff2424;
	border-color: #ff2424;
}

nav2 li a.current {
	border-color: #7f69ef;
	background-color: #7f69ef;
}

nav2 li a.current:hover {
	border-color: #7f69ef;
	background-color: #7f69ef;
}

nav2 li a:hover {
	border-color: #808080;
}

/* Header */

nav {
	background: linear-gradient(to right, #000000, #000000) ;
	font-family: ubahn;
	overflow:auto;
	margin-bottom: 10px;
	box-shadow: 0 -3px 6px 3px rgba(1,1,1,0.7);
}
nav ul {
	margin:0px;
	padding: 10px 0px 10px 0px;
	text-align: center;
	list-style-type: none;
}
nav ul li a:not(.logo) {
	transition: 0.1s;
	border-bottom: 2px solid transparent;
}
nav ul li a:not(.logo):hover {
	border-bottom: 2px solid #fff;
}
nav ul li a {
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}
nav ul li {
	padding: 15px 0px 15px 0px;
	display: inline-block;
	font-size: 1.3rem;
	margin-left: 10px;
}
nav ul li.logo img {
	height: 100%;
}
nav ul li.logo {
	vertical-align: middle;
	height: 50px;
}

.nav-right, .nav-left {
	display: inline-block;
}

/* Classes */

.page-title {
	font-size: 1.5rem;
	margin-bottom: 10px;
}

/* Card */
.card {
	overflow: auto;
	background-color: #fff;
	border-radius: 5px;
	margin-bottom: 20px;
}

.card .content {
	padding: 5px;
	word-break: break-word;
}

.card .body {
	overflow: auto;
}

.card:not(.b), .card.b .body, .card.b .top {
	padding: 5px;
}

.card.b .body {
	border: 1px solid #bdbdbd;
	border-top: 0px;
	border-radius: 0px 0px 5px 5px;
}

.card.b .top {
	/*background: repeating-linear-gradient(
	  -45deg,
	  #000000,
	  #000000 10px,
	  #6953d6 10px,
	  #6953d6 20px
	);*/
	background: #000000;
	color: #fff;
	font-size: 1.2rem;
}

.button {
	border: none;
	margin-top: 5px;
	border-radius: 3px;
	/*background-image: repeating-linear-gradient(
	  -45deg,
	  #333333,
	  #333333 20px,
	  #474747 20px,
	  #474747 40px
	);*/
	background-size:56px 56px;
	padding: 10px 20px;
	color: white;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
}

.button:hover {
	animation: barberpole 0.5s linear infinite;
}

@keyframes barberpole {
  from { background-position: 0 0}
  to   { background-position: 8px 20px}
}

.button.success {
	background-color: #2db721;
	background-size:56px 56px;
}

.button.warning {
	/*background: repeating-linear-gradient(
	  -45deg,
	  #cc760e,
	  #cc760e 10px,
	  #a5560d 10px,
	  #a5560d 20px
	);*/
	background-color: #FF9900;
	background-size:56px 56px;
}

.button.danger {
	/*background: repeating-linear-gradient(
	  -45deg,
	  #b51b1b,
	  #b51b1b 10px,
	  #961515 10px,
	  #961515 20px
	);*/
	background-color:#EF3D56;
	background-size:56px 56px;
}

/* Tabs */
.tab-container {
	background-color: #000000;
	border-radius: 5px;
	overflow: auto;
}

.tab-container .tab {
	padding: 10px;
	text-align:center;
	color: #fff;
	font-weight: 600;
}

.tab-container .tab:last-child {
	padding-right: 10px !important;
}

.tab-container .tab.current {
	background-color: rgba(255,255,255,0.1);
}

.tab-container .tab:hover {
	cursor: pointer;
	background-color: rgba(255,255,255,0.1);
}

/* Games */
.game .title {
	font-size: 1.4rem;
	margin-bottom: 3px;
}

.game .creator a {
	font-weight: 600;
	color: #000;
}

.game .creator {
	margin-bottom: 5px;
}

.game .thumbnail img {
	width: 100%;
	border-radius: 5px;
}

.game .thumbnail {
	margin-bottom: 5px;
}

.game .play {
	padding: 10px;
	font-size: 1.2rem;
	color: #fff;
	background-color: #43c543;
	text-align:center;
	border-radius: 5px;
	margin-bottom: 10px;
}

.game .info {
	margin-bottom: 5px;
	overflow: auto;
}

.game .info .value {
	font-size: 0.9rem;
}

.game .info .name {
	font-weight: 600;
	color: #333;
}

.game .play:hover {
	cursor: pointer;
}

.game .options {
	margin-bottom: 10px;
}

.game .option {
	float: left;
	padding-right: 20px;
	font-size: 1.2rem;
}

.game .option:hover {
	cursor: pointer;
}

.game .option.active {
	font-weight: 600;
}

.game .servers .server {
	margin-bottom: 10px;
}

.game .servers .server .user {
	width: 35px;
}
.game .servers .server .in-server, .game .servers .server .join-server {
	font-weight: 600;
}

.game .servers .server .join-server {
	margin-top: 5px;
}

.game .servers .server .join-server:hover {
	cursor: pointer;
}

.game-categories:hover {
	cursor: default;
}

.game-categories .subtitle {
	font-weight: 600;
	font-size: 0.9rem;
	margin: 13px 0px 13px 0px;
	color: #000;
}

.game-categories .genre {
	margin-bottom: 4px;
	font-size: 0.9rem;
}

.game-categories .category {
	margin-bottom: 5px;
}

.game-categories .category:hover, .genre:hover {
	font-weight: 600;
	cursor: pointer;
}

.game-categories .category.active,.genre.active  {
	font-weight: 600;
}

/* Shop Buttons */
.shop-button {
	padding: 10px;
	border-radius: 5px;
	padding: 10px;
	margin-bottom:5px;
	font-size: 1rem;
}
.shop-button:hover {
	cursor: pointer;
	background-color: rgba(0,0,0,0.05);
}

.shop-button.current {
	background: linear-gradient( to bottom right, #000000, #000000);
	background-color: #000000;
	color:#fff;
}

.shop-search-button:hover {
	background-color: #000000;
	cursor: pointer;

}

.float-left-nav {
	float:left;
}

.float-right-nav {
	float:right;
}

.shop-search-button:focus {
	outline:none;
}
.shop-search-button {
	font-family: 'Open sans', sans-serif;
	width:100%;
	border: 0px solid transparent;
	border-radius: 5px;
	padding: 10px;
	margin-bottom: 5px;
	color: #000;
	font-size: 1.2rem;
	background-color: 000000;
	text-align:center;
	color: #fff;
	transition: 0.1s;
}

.cog-hover:hover {
	cursor: pointer;
}

.cog-hover .fa-cog {
	transition: .5s;
}

.cog-hover:active .fa-cog {
	transform: rotate(90deg);
}

.search-results {
	overflow: auto;
	color: #8e8e8e;
	margin-top: 5px;
	font-size: 0.8rem;
	margin-bottom: 5px;
}

.subtitle,.danger-option,.safe-option {
	color: #9E9E9E;
	margin-bottom: 5px 0px 5px 0px;
	font-size: 0.9rem;
	font-weight: 600;
}

.safe-option:hover {
	color: #0db533;
}

.small-subtitle {
	text-align:center;
	margin-bottom: 5px;
	font-weight: 600;
	color: 000000;
}

.shop-search {
	border: 1px solid #ababab;
	border-radius: 5px;
	overflow: auto;
	background-color: #f2f2f2;
}

.shop-search .advanced {
	transition: max-height .1s ease-in;
	overflow: auto;
	margin: 7px 5px 7px 5px;
	background: #f2f2f2;
	font-size: .8rem;
	font-weight: 600;
	color: #808080;
}

.shop-search .d {
	margin: 7px 5px 7px 5px;
}

.shop-search .advanced input {
	margin-top: 2px;
	width: 100%;
	border-radius: 5px;
	color: #444444;
	padding: 3px;
	border: none;
	font-size: .8rem;
}
.shop-search .advanced select {
	margin-top: 2px;
	width: 100%;
	border-radius: 5px;
	color: #444444;
	padding: 3px;
	border: none;
	font-size: .8rem;
}
.shop-search .advanced select:focus {
	outline: none;
}

.shop-search .search {
	border: none;
	font-family: 'Quicksand', sans-serif;
	padding: 9px;
	color: #000;
	font-size: 1rem;
	font-weight:500;
}

.create.card .top {
	padding: 10px;
	font-size: 1rem;
	background-color: 000000;
}

.create select {
	/*color: #ababab;*/
}
/* Landing */
.landing-black {
	background-color: #333;
	color: #d4d4d4;
}
.landing-card {
	border: 1px solid #bdbdbd;
	padding: 5px;
	border-radius: 5px;
	background-color: #fff;
	transition: margin .5s;
}
.landing-card .title {
	text-align: center;
	font-weight: 500;
	font-size: 1.5rem;
}
.landing-card:hover {
	margin-bottom: 2px;
}
.landing-button {
	color: #fff;
	padding: 15px;
	font-size: 1.2rem;
	border-radius: 5px;
}
.landing-button.green {
	background-color: green;
}
.landing-button.blurple {
	background-color: #000000;
}
.landing-button.blurple:hover {
	background-color: #101010;
	color: #fff;
}
.landing-button:hover {
	color: #d4d4d4;
}
/* Item */
.shop-item-container.no-margin {
	margin-right: 0px;
}
.shop-item-container {
	width: 24%;
	margin-right: 1.333333333%;
	float: left;
}

.shop-item.shop-item-dark {
	border: 1px solid #7b7b7b;
	background-color: #444;
}

.shop-item {
	border: 1px solid #bdbdbd;
	border-radius: 5px;
	background-color: #fff;
	overflow:auto;
	margin-bottom: 10px;
}

.shop-item .name {
	font-weight: 600;
	font-size: 1rem;
	color: #000;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 5px 0px 5px 0px;
}

.shop-item .info {
	border-top: 1px solid #bdbdbd;
	padding: 5px;
}

.shop-item .info a {
	color: #3a3a3a;
	font-weight: 600;
	text-decoration: none;
}
.shop-item .preview {
	position: relative;
	padding: 5px;
}
.shop-item .bundle-preview {
	position: absolute;
	margin-right: 5px;
	margin-top: 5px;
	top: 0;
	right:0;
}
.shop-item .preview .bundle-preview img  {
	display: block;
	background-color: #fff;
	border-radius: 3px;
	border: .5px solid #bdbdbd;
	width: 40px;
}

.shop-item .preview .bundle-preview img.active {
	border-color: #000;
}
.shop-item .preview .bundle-preview img:not(:last-child) {
	margin-bottom: 4px;
}
.shop-item .preview img {
	width:100%;
}

.shop-item .buy {
	overflow: auto;
	padding: 10px 0px 10px 0px;
}

.shop-item .buy.disabled {
	opacity: 0.5;
}

.shop-item .buy .price {
	color:000000;
	font-weight: 600;
	float:left;
}

.shop-item .buy .button.offsale{
	background-color: #505050;
}
.shop-item .buy .price.offsale, .item-name.offsale {
	color: #505050;
}

.shop-item .buy .price.free, .item-name.free {
	color: #56bfff;
}

.shop-item .buy .button {
	text-align:center;
	text-decoration: none;
	margin-top: 0px;
	color:#fff;
	background-color: 000000;
	font-weight: 600;
	width: 50%;
	float:right;
	padding: 3px 0px 3px 0px;
	font-size: 0.8rem;
}


.shop-item .buy .button.free, .buy-button.free {
	background-color: #56bfff;
}

.shop-item .buy .price.tradable, .item-name.tradable {
	color: #efc502;
}

.shop-item .buy .button.tradable, .buy-button.tradable {
	background-color: #efc502;
}

/* Item Page */
.border.card {
	border: 1px solid #bdbdbd;
}
.item-name {
	margin: 0px 0px 5px 0px;
	font-size: 1.4rem;
	font-weight: 600;
	color: #000000;
}

.creator-name {
	margin: 0px 0px 10px 0px;
	color: #222;
	font-weight: 600;
}

.creator-name a {
	color: #222;
	text-decoration: none;
}

.buy-button {
	display: inline-block;
	padding: 10px 20px;
	color: #fff;
	border-radius: 5px;
	background-color: #000000;
	font-size: 1.4rem;
	margin-bottom: 10px;
}

.buy-button.offsale {
	background-color: #505050;
}

.buy-button.disabled:not(.offsale) {
	opacity: 0.5;
}
.buy-button.disabled:hover {
	cursor: default;
}

.item-icons {
	color: #9E9E9E;
	font-size: 1.2rem;
	margin-bottom: 15px;
}



.buy-button:hover,.delete:not(.disabled), .item-icons .fa-heart:hover:not(.disabled), .item-icons .fa-list:hover:not(.disabled) {
	cursor: pointer;
}

.delete:not(.disabled):hover {
	color: #ad3131;
}

.fa-heart.active,.danger-option:hover {
	color: #f73535;
}

.fa-list.active {
	color: #5bb6f9;
}

/* Upload */
.button.upload {
	font-weight: 600;
	color: #848484;
	padding: 8px 13px;
	background-color: #d3d3d3;
	display: block;
	margin: 5px 0px 5px 0px;
}

input[type=file].upload:not(.button) {
	display: none;
}

::-webkit-input-placeholder {
	color: transparent;
	text-shadow: 0 0 0 #ababab;
}

.shop-search input:focus {
	outline:none;
}

/* Forum */
.forum-topic {
	margin-bottom: 15px;
}

.forum-topic .title {
	border-radius: 5px;
	margin-bottom: 10px;
	overflow:auto;
	font-size: 1.1rem;
	padding: 10px;
	color: #fff;
	background-color: #000000;
}

.label-title {
	border-radius: 5px;
	margin-bottom: 10px;
	overflow:auto;
	font-size: 1.1rem;
	padding: 10px;
	color: #fff;
	background-color: #000000;
}

.dotted-body {
	border: 1px dashed #000000;
	border-radius: 5px;
	margin-bottom: 10px;
	overflow:auto;
	background-color: #f7f7f7;
	padding: 10px;
}

.forum-topic .subforum {
	border: 1px dashed #000000;
	border-radius: 5px;
	margin-bottom: 10px;
	overflow:auto;
	background-color: #f7f7f7;
	padding: 10px;
}

.forum-topic .subforum.locked {
	border: 1px dashed #333;
}

.forum-topic .subforum.pinned {
	border: 1px dashed #ff9800;
}

.subforum-title {
	margin-bottom: 3px;
	font-size: 1.1rem;
}

.forum-topic .subforum .subforum-description {
	color: #333;
}

.banner {
	border-radius: 5px;
	padding: 10px;
	position: relative;
	color: white;
	margin-bottom: 20px;
}

.banner.success {
	background-color: #52BC0D;
}

.banner.warning {
	background-color: #FF9900;
}

.banner.danger {
	background-color: #b51b1b;
}

.banner .banner-x {
	position: absolute;
	color: white;
	right: 10px;
	font-size: 12px;
	text-decoration: none;
}


.register-container {
    margin: 0 auto;
    width: 65%;
	max-width:400px;
	min-width:250px;
}


input[type=text]:not(.not-default), select:not(.not-default), textarea:not(.not-default), input:not(.not-default), input[type=password]:not(.not-default) {
	border: 1px solid #d3d3d3;
	padding: 8px 13px;
	border-radius: 5px;
	font-family: 'Open sans', sans-serif;
	font-size: 15px;
	margin: 5px 0px 5px 0px;
	font-weight: 500;
}

input[type=text]:not(.not-default).invalid, select:not(.not-default).invalid, textarea:not(.not-default).invalid, input:not(.not-default).invalid, input[type=password]:not(.not-default).invalid {
	border-color: #eca7a7;
}

.input-error {
	color: #eca7a7;
	font-size: .8rem;
	text-align:left;
}


input[type=text]:not(.not-default):disabled, select:not(.not-default):disabled, textarea:not(.not-default):disabled, input:not(.not-default):disabled, input[type=password]:not(.not-default):disabled {
	background-color: #dedede ;
	color: #ababab;
}

select :dsiabled{
	color: #d3d3d3;
}


textarea:not(.not-default) {
	resize: vertical;
}

input[type=text]:not(.not-default):focus, textarea:not(.not-default):focus, select:not(.not-default):focus, input:not(.not-default):focus, input[type=password]:not(.not-default):focus {
	outline:none;

}
/* Fieldset / Legends */

fieldset {
	border: 2px solid #B5B5B5;
	border-radius: 5px;
}

legend {
	font-weight: 600;
	color: #B5B5B5;
}

a {
	text-decoration: none;
}

/* Tooltipster */
.tooltipo {
	position: absolute;
}

.tooltipster-default {
	position: absolute;
	background-color: #424242;
	padding: 10px;
}

.shop-tooltip {
	position: abosulute;
	color: #fff;
	background-color: #424242;
	padding: 10px;
	border-radius: 5px;
}

.tooltipster-dying {
	display: none;
}


.text-input:focus {
	box-shadow: 0 0 12px 1px #5f10ba;
}

.width-100 {
	width: 100%;
}
.width-90 {
	width: 90%;
}
.width-80 {
	width: 80%;
}
.width-70 {
	width: 70%;
}
.width-60 {
	width: 60%;
}
.width-50 {
	width: 50%;
}
.width-40 {
	width: 40%;
}
.width-30 {
	width: 30%;
}
.width-333 {
	width: 33.333333%;
}
.width-25 {
	width: 25%;
}
.width-20 {
	width: 20%;
}
.width-10 {
	width: 10%;
}
.width-32 {
	float:left;
	width: 32%;
	margin-left: .5%;
	margin-right: .5%;
}
.left {
	float: left;
}
.right {
	float: right;
}
/* Membership */

/* Cheapest */
.membership.tertiary .title {
	color: #65c565;
}
.membership.tertiary .price, .membership.tertiary .buy {
	background-color: #65c565;
}
/* Moderate */
.membership.secondary .title {
	color: #a900ff;
}
.membership.secondary .price, .membership.secondary .buy {
	background-color: #a900ff;
}
/* What */
.membership.primary .title {
	color: #444;
}
.membership.primary .price, .membership.primary .buy {
	background-color: #444;
}

.membership {
	overflow: auto;
	border-radius: 5px;
	background-color: #fff;
	border: 1px solid #bdbdbd;
}

.membership .title {
	font-size: 1.3rem;
	padding: 7px;
	font-weight: 600;
	text-align:center;
}

.membership .price {
	padding: 10px;
	color: #fff;
	font-size: 2rem;
	text-align:center;
}
.membership .price .term {
	font-size: 1rem;
}

.membership .features {
	/*margin-bottom: 5px;*/
}
.membership .features ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.membership .buy, .bopibits .buy {

	display: inline-block;
	color: #fff;
	border-radius: 5px;
	padding: 10px 20px;
	margin: 0;
	margin-top: 4px;
	margin-bottom: 10px;
}

.membership a {
	display: block;
	text-align: center;
}
/*
.membership .features ul li:first-child {
	border-top: 0px solid transparent;
}*/
.membership .features ul li {
	padding-top: 7px;
	padding-bottom: 7px;
	border-top: 1px solid #bdbdbd;
}

/* BopiBits */
.bopibits .price {
	color: #7952C5;
	font-weight: 600;
	text-align:center;
	font-size: 1.5rem;
}

.bopibits .buy {
	margin-top: 10px;
	background-color: 7952C5;
}

.centered {
	text-align: center;
}

.hidden {
	display: none;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.image {
	max-width:100%;
	height: auto;
	width: auto\9; /* ie8 */
}
.image-custom {

}
.image-cont {
	float:left;
	padding:0px !important;
	width: calc(25% - 2.5px);
	margin-left: 1.25px;
	margin-right:1.25px;
	background-color: #E1E1E1;
	margin-top: 1.25px;
	margin-bottom: 1.25px;
	position: relative;
	margin-top:5px;
}
.image-cont-2 {
	float:left;
	padding:0px !important;
	width: calc(45% - 10px);
	margin-left: 12.5px;
	margin-right: 12.5px;
	background-color: #E1E1E1;
	margin-top: 12.5px;
	margin-bottom: 12.5px;
}

.image-cont .image
{
	position: relative;
	margin-top:5px;
}

.image-cont .text {
	white-space: nowrap;
	font-size: 12.5px;
	height:20px;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align:center;
}

.image-cont .image .equipped {
	position: absolute;
	top: -5px;
	right: 0px;
	font-size: 20px;
	z-index: 5000;
	color: red;
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
	cursor: pointer;
	background-image: url(/emojis/exit-200.png);
	padding: 10px;
	background-size: 20px;
}

.image-cont .image .equip {
	position: absolute;
	top: -5px;
	right: 0px;
	font-size: 20px;
	z-index: 5000;
	color: red;
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
	cursor: pointer;
	background-image: url(/emojis/equip-200.png);
	padding: 10px;
	background-size: 20px;
}

.far-left-rad {
	border-top-left-radius: 7.5px;
	border-bottom-left-radius: 7.5px;
}
.far-right-rad {
	border-top-right-radius: 7.5px;
	border-bottom-right-radius: 7.5px;
}
/* Footer */

.vertical-button {
	padding: 10px;
	border-radius: 5px;
	padding: 10px;
	margin-bottom:5px;
	font-size: 1rem;
	width:calc(100% - 20px);
	margin-left: 2.5px;
	margin-right: 2.5px;
}
.vertical-button:hover {
	cursor: pointer;
	background-color: rgba(0,0,0,0.05);
}

.vertical-button.current {
	background: linear-gradient( to bottom right, #000000, #000000);
	background-color: #000000;
	color:#fff;
}

.footer {
	overflow: auto;
	box-sizing: border-box;
	border-top: 10px solid #222;
	background-color: #222;
	color: #fff;
	margin-top: -110px;
}

.inputGroup {
    background-color: #fff;
    display: block;
    margin: 10px 0;
    position: relative;

    label {
      padding: 12px 30px;
      width: 100%;
      display: block;
      text-align: left;
      color: #3C454C;
      cursor: pointer;
      position: relative;
      z-index: 2;
      transition: color 200ms ease-in;
      overflow: hidden;

      &:before {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        content: '';
        background-color: #5562eb;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale3d(1, 1, 1);
        transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
        opacity: 0;
        z-index: -1;
      }

      &:after {
        width: 32px;
        height: 32px;
        content: '';
        border: 2px solid #D1D7DC;
        background-color: #fff;
        background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
        background-repeat: no-repeat;
        background-position: 2px 3px;
        border-radius: 50%;
        z-index: 2;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        transition: all 200ms ease-in;
      }
    }

    input:checked ~ label {
      color: #fff;

      &:before {
        transform: translate(-50%, -50%) scale3d(56, 56, 1);
        opacity: 1;
      }

      &:after {
        background-color: #54E0C7;
        border-color: #54E0C7;
      }
    }

    input {
      width: 32px;
      height: 32px;
      order: 1;
      z-index: 2;
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      visibility: hidden;
    }
  }