/*--RESET & GENERAL--*/

* {
	margin: 0;
	padding: 0;
	border: none;
	font: inherit;
	color: inherit;
	outline: none;
	vertical-align: baseline;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.mouseDetected * {}

.ac {
	position: absolute;
	left: -999em;
	top: auto;
	height: 0;
}
[dir=rtl] .ac {
	left: auto;
	right: -999em;
}

ol, ul {
	list-style: none;	
}

html {
	height: 100%;
}

::selection {
	background: #249de2;
}

/*--BODY--*/

body {
	min-height: 100%;
	width: 100%;
	font: 400 16px/165% -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #222;
	text-align: center;
	background: #8fc06c;
	position: absolute;
}

p {
	margin: 10px 0 0;
}

a {
	text-decoration: none;
	cursor: pointer;
}

p a {
	border-bottom: 1px solid #ccc;
	
	-webkit-transition: border-bottom-color .15s ease-out;
	   -moz-transition: border-bottom-color .15s ease-out;
	        transition: border-bottom-color .15s ease-out;
}

p a:hover, p a:focus {
	border-bottom-color: #fff;
}

.popover p a:hover, .popover p a:focus {
	border-bottom-color: #222;
}

strong {
	font-weight: 700;
}

h2 {
	font-size: 18px;
	font-weight: 700;
}

pre, code {
	margin: 10px 0 0;
	padding: 10px 15px;
	font: normal 13px/150% Courier, "courier new", monospace;
	background: #eee;

	border-radius: 4px;
	
	-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.15);
	   -moz-box-shadow: 0 1px 0 rgba(0,0,0,.15);
	        box-shadow: 0 1px 0 rgba(0,0,0,.15);
}

pre {
	text-align: left;
	overflow-x: scroll;
	position: relative;
}

pre > span {
	color: #999;
}

pre > span.key {
	color: inherit;
}

pre > span.val {
	color: #1b5eb1;
}

pre > span.int {
	color: #f77015;
}

code {
	padding: 0 5px;
}

hr {
	height: 1px;
	width: 100%;
	margin: 25px 0 0;
	background: #eee;
	display: block;
}

/*--CLEARFIX--*/

.clearfix:after {
	content: '';
	display: block;
	clear: both;
}

/*--DATA--*/

#data {
	height: 100%;
	width: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	color: #fff;
	cursor: default;
	position: fixed;
}

#data:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.25em;
}

#data > div {
	width: 80%;
	display: inline-block;
	vertical-align: middle;
}

/* name */

#name {
	margin-bottom: 20px;
	font-size: 64px;
	color: #fff;
	font-weight: 600;
	line-height: 100%;
	display: inline-block;
	text-shadow: 0 5px 15px rgba(0,0,0,.15);
}

/* photo */

#photo-container {
	margin: 0 auto 15px;
	display: table;
	position: relative;
}

#photo-container .photo {
	height: 100px;
	width: 100px;
	background: rgba(0,0,0,.15);
	display: block;
	overflow: hidden;
	
	border-radius: 100%;
	
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.25);
	   -moz-box-shadow: 0 1px 4px rgba(0,0,0,.25);
	        box-shadow: 0 1px 4px rgba(0,0,0,.25);
	
	-webkit-transition: transform .15s ease-out;
	   -moz-transition: transform .15s ease-out;
	        transition: transform .15s ease-out;
}

#photo-container .photo:hover {
	-webkit-transform: scale(1.2);
	   -moz-transform: scale(1.2);
	        transform: scale(1.2);
}

#photo-container .photo img {
	height: 100%;
	width: 100%;
	display: block;
}

#photo-container .refresh {
	top: 31px; /* (100 - 38) / 2 */
	right: -48px;
	position: absolute;
	display: none;
}

body.touch-device #photo-container .refresh {
	display: block;
}

/* misc data */

#data ul, body.bulk #data p {
	font-size: 90%;
	text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

#data ul {
	margin: 0 auto;
	padding: 10px 15px;
	text-align: left;
	background: rgba(255,255,255,.1);
	display: table;
	border-radius: 5px;
	box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

body:not(.touch-device) #data .click-to-select:hover {
	cursor: default;
	background: rgba(255,255,255,.2);
}

/* bulk names */

body.bulk #data {
	height: 100%;
	width: 100%;
	top: 0;
	bottom: 0;
	padding: 88px 0;
	position: absolute;
	overflow: scroll;
}

body.bulk #data:before {
	display: none;
}

body.bulk h1 {
	top: auto;
	margin: 40px auto 10px;
	font-size: 32px;
	position: relative;
	display: table;
}
body.bulk h1:first-child {
	margin-top: 0;
}

/*--HELP--*/

#help {
	width: 80%;
	bottom: 75px;
	margin: 0 10%;
	font-size: 90%;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,.2);
	line-height: 100%;
	position: fixed;
	
	-webkit-transition: bottom .15s ease-out, opacity .15s ease-out;
	   -moz-transition: bottom .15s ease-out, opacity .15s ease-out;
	        transition: bottom .15s ease-out, opacity .15s ease-out;
}

#help p {
	display: none;
}

#help p:first-child {
	display: block;
}

/*--INFO & REGION POPUPS--*/

#tabs {
	width: 100%;
	overflow: hidden;

	border-radius: 5px 5px 0 0;
}

#tabs > a {
	width: 33.334%;
	padding: 12px 0;
	background: #eee;
	line-height: 100%;
	float: left;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
}

#tabs > a:first-child {
	border-left: none;
}

#tabs > a:hover,
#tabs > a:focus {
	color: #999;
}

#tabs a.active {
	color: #999;
	border-bottom: none;
	background: #fff;
	cursor: default;
}

[id$="-panel"] {
	padding: 25px;
	text-align: left;
	display: none;
}

.popover {
	width: 480px;
	max-width: 100%;
	margin: 88px auto 82px;
	background: #fff;
	position: relative;
	z-index: 4000;
	display: none;

	border-radius: 5px;
	
	-webkit-box-shadow: 0 10px 20px rgba(0,0,0,.15);
	   -moz-box-shadow: 0 10px 20px rgba(0,0,0,.15);
	        box-shadow: 0 10px 20px rgba(0,0,0,.15);
}

/* hide shortcuts tab on touch-devices */

body.touch-device #tabs > a {width: 50%;}
body.touch-device #shortcuts-tab {display: none}

/*--INFO--*/

#info h2 {
	margin: 20px 0 0;
}

#info h2:first-child {
	margin-top: 0;
}

.contributor {
	height: 26px;
	width: 26px;
	margin: 0 4px 4px 0;
	border-bottom: none;
	position: relative;
	display: block;
	float: left;
}

.contributor:before {
	content: '';
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 1px solid #000;
	opacity: .2;
	position: absolute;
	
	border-radius: 100%;
}

.contributor img {
	height: 100%;
	width: 100%;
	background: #eee;

	border-radius: 100%;
}

/* popups */

.popup {
	padding: 5px 8px;
	top: -20px;
	left: -5px;
	line-height: 100%;
	font-size: 12px;
	font-weight: bold;
	color: #999;
	background: #fff;
	position: absolute;
	white-space: nowrap;
	visibility: hidden;
	opacity: 0;
	z-index: 1000;

	border-radius: 2px;

	-webkit-transition: top .25s ease-out, opacity .25s ease-out;
	   -moz-transition: top .25s ease-out, opacity .25s ease-out;
	        transition: top .25s ease-out, opacity .25s ease-out;
	
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 3px 10px rgba(0,0,0,.15);
	   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 3px 10px rgba(0,0,0,.15);
	        box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 3px 10px rgba(0,0,0,.15);
}

.bar .popup {
	left: -16px;
}

.popup:before {
	content: '';
	height: 12px;
	width: 12px;
	bottom: -4px;
	left: 10px;
	background: #fff;
	position: absolute;
	z-index: -2;
	
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 3px 10px rgba(0,0,0,.15);
	   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 3px 10px rgba(0,0,0,.15);
	        box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 3px 10px rgba(0,0,0,.15);

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	        transform: rotate(45deg);
}

.popup:after {
	content: '';
	height: 14px;
	width: 32px;
	bottom: 0;
	left: 4px;
	background: #fff;
	position: absolute;
	z-index: -1;
}

.contributor:hover .popup,
.contributor:focus .popup,
#graph.visible .popup {
	top: -24px;
	visibility: visible;
	opacity: 1;
}

.contributor .popup > span,
#graph .popup span:first-child {
	color: #222;
}

/*--REGION--*/

#region {
	width: 300px;
	overflow: hidden;
}

#region li, #region .contribute {
	max-height: 150px;
	text-align: left;
	line-height: 100%;
	border-top: 1px solid #eee;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

#region li.inactive {
	max-height: 0;
	border-width: 0;
	opacity: 0;
}

.flag {
	height: 20px;
	width: 20px;
	margin: 12px;
	float: left;
	position: relative;
	overflow: hidden;
}

.flag:before {
	content: '';
	height: 18px;
	width: 18px;
	top: 0;
	left: 0;
	border: 1px solid #000;
	opacity: .25;
	position: absolute;
	z-index: 1;

	border-radius: 100%;
}

.flag img {
	height: auto;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
	
	border-radius: 100%;
}

#region li .region-label {
	line-height: 275%;
}

#region li:hover {
	cursor: pointer;
}

#region li.active {
	color: #999;
}

#region li:hover,
#region li.active {
	background: #f9f9f9;
}

#region li .flag img {
	border-radius: 100%;
}

#region li .flag {
	background: url(../img/flags.png) no-repeat 0 20px;
	
	-webkit-background-size: 20px 1180px;
	   -moz-background-size: 20px 1180px;
	        background-size: 20px 1180px;
}

#region li.highlight {
	color: #fff;
	background: #249de2;
}

#region li.highlight .flag:before {
	border-color: #fff;
	opacity: 1;
}

#region li.new:after, #region li.fav:after {
	content: 'NEW';
	right: 0;
	margin: 13px 12px;
	padding: 4px 6px;
	font-size: 10px;
	font-weight: 700;
	line-height: 100%;
	color: #fff;
	background: #161616;
	position: absolute;

	border-radius: 25px;
}

#region li.fav:after {
	content: 'POPULAR';
	background: #e59c1c;
}

#region li.active:after {
	background: #999;
}

#region .contribute {
	padding: 0;
	text-align: center;
	line-height: 150%;
	display: block;
}

#region .contribute a {
	padding: 15px;
	display: block;
}

#region .contribute svg {
	height: 48px;
	width: 48px;
	margin: 0 auto 5px;
	display: block;
	fill: #222;
}

#region .contribute:hover svg {
	fill: #444;
}

/* region count */

#region .regionCount {
	top: 0;
	right: 12px;
	line-height: 275%;
	color: #999;
	position: absolute;
}

/* region search */

#region input {
	width: 100%;
	padding: 9px 13px;
	background: none;
	outline: none;
}

#region a.random {
	height: 20px;
	width: 20px;
	top: 12px;
	right: 13px;
	background: #bbb;

	border-radius: 2px;

	position: absolute;
}

/*--OVERLAY--*/

#overlay {
	opacity: 0;

	-webkit-transition: opacity .25s ease-out;
	   -moz-transition: opacity .25s ease-out;
	        transition: opacity .25s ease-out;
}

#overlay.visible {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #8fc06c;
	opacity: .75;
	position: fixed;
	z-index: 3000;
	cursor: pointer;
	cursor: zoom-out;
}

/*--SHAREBOX--*/

#share {
	width: 303px;
	height: 32px;
	bottom: 25px;
	left: 50%;
	margin-left: -151px;
	padding: 6px;
	text-align: left;
	background: #fff;
	white-space: nowrap;
	overflow: hidden;
	position: fixed;
	z-index: 500;

	border-radius: 5px;

	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.25);
	   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.25);
	        box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.share-button, .share-count {
	height: 20px;
	padding: 3px 5px;
	font-size: 11px;
	font-weight: 700;
	line-height: 120%;
	letter-spacing: -0.25px;
	color: #fff;
	background: #111;
	position: relative;
	vertical-align: top;
	display: inline-block;

	border-radius: 3px;
}

.twitter-button .share-button {background: #1b95e0;}
.twitter-button .share-button:hover {background: #0c7abf;}

.facebook-button .share-button {background: #4267b2;}
.facebook-button .share-button:hover {background: #365899;}

.github-button .share-button {
	color: #333;
	text-shadow: 0 1px 0 #fff;
	background: #eee;
	
	-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
	   -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
	        box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;

	background: -webkit-linear-gradient(#fff, #eee);
	   background: -moz-linear-gradient(#fff, #eee);
	        background: linear-gradient(#fff, #eee);
}

.github-button .share-button:hover {
	-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;
	   -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;
	        box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;
}

.share-button svg {
	height: 14px;
	width: 14px;
	margin-right: 4px;
	display: inline-block;
	float: left;
}

.share-count {
	margin: 0 2px;
	padding: 2px 3px;
	font-weight: 600;
	color: #555;
	border: 1px solid #bbb;
	background: #fff;
}

.share-count:hover {
	border-color: #aaa;
	color: #333;
}

.share-count:before,
.share-count:after {
	content: '';
	height: 6px;
	width: 6px;
	top: 50%;
	left: -3.75px;
	margin-top: -3px;
	background: #bbb;
	position: absolute;
	z-index: -1;

	border-radius: 0px 100% 0px 1px;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
}

.share-count:after {
	left: -2px;
	background: #fff;
	z-index: 1;
}

/*--DETAILS--*/

#options, #details {
	top: 25px;
	position: fixed;
	z-index: 3500;
}

#options {
	left: 25px;
}

#options > span {
	margin-left: 24px;
	float: left;
	position: relative;
}

#options > span:first-child {
	margin-left: 0;
}

#options .icon {
	margin-left: 4px;
	float: left;
}

#options .icon:first-child {
	margin-left: 0;
}

#options .label, #details .label {
	left: -12px;
	right: -12px;
	top: 44px;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 1px;
	text-align: center;
	color: #fff;
	white-space: nowrap;
	line-height: 100%;
	text-shadow: 0 1px 2px rgba(0,0,0,.2);
	position: absolute;
	display: inline-block;
	border-radius: 2px;
}

#details {
	right: 25px;
}

.icon {
	height: 38px;
	width: 38px;
	position: relative;
	background-color: #fff;
	display: inline-block;
	opacity: .5;
	cursor: pointer;

	border-radius: 100%;

	-webkit-transition: opacity .15s ease-out, -webkit-box-shadow .15s ease-out;
	   -moz-transition: opacity .15s ease-out, -moz-box-shadow .15s ease-out;
	        transition: opacity .15s ease-out, box-shadow .15s ease-out;
}

.info::-moz-focus-inner {
	border: 0;
}

.icon:focus,
[data-popup] #genderSelect .icon:focus,
[data-popup] .icon.region:focus {
	outline: 0;
	opacity: 1;
}

.icon:focus {
	-webkit-box-shadow: 0 0 0 2px #249de2;
	   -moz-box-shadow: 0 0 0 2px #249de2;
	        box-shadow: 0 0 0 2px #249de2;
}

.icon.active,
.icon.region,
.icon.info {
	opacity: 1;
	
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
	   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
	        box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

.icon:hover {
	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,.15);
	   -moz-box-shadow: 0 3px 10px rgba(0,0,0,.15);
	        box-shadow: 0 3px 10px rgba(0,0,0,.15);
}

.icon span,
.icon.info span {
	background: #8fc06c;
}

/*--ICONS--*/

.icon span {
	background: #8fc06c;
	position: absolute;

	border-radius: 5px;
}

/* male */

.male .m1 {
	height: 14px;
	width: 14px;
	top: 15px;
	left: 9px;
	border: 2px solid #8fc06c;
	background: #fff;

	border-radius: 100%;
}

.male .m2 {
	height: 10px;
	width: 2px;
	top: 10px;
	left: 22px;

	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
}

.male .m3 {
	height: 2px;
	width: 8px;
	top: 10px;
	left: 20px;
}

.male .m4 {
	height: 8px;
	width: 2px;
	top: 10px;
	left: 26px;
}

/* female */

.female .f1 {
	height: 14px;
	width: 14px;
	top: 9px;
	left: 12px;
	border: 2px solid #8fc06c;
	background: #fff;

	border-radius: 100%;
}

.female .f2 {
	height: 9px;
	width: 2px;
	top: 21px;
	left: 18px;
}

.female .f3 {
	height: 2px;
	width: 8px;
	top: 25px;
	left: 15px;
}

/* random */

.random .r1, .random .r2, .random .r7 {
	height: 2px;
	width: 20px;
	top: 18px;
	left: 8px;

	-webkit-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}

.random .r2, .random .r7 {
	top: 13px;
	left: 9px;
	width: 8px;
	
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
}

.random .r7 {
	top: 23px;
	left: 19px;
}

.random .r3, .random .r5 {
	height: 2px;
	width: 7px;
	top: 10px;
	left: 20px;
}

.random .r3 {
	top: 26px;
}

.random .r4, .random .r6 {
	height: 7px;
	width: 2px;
	top: 10px;
	left: 25px;
}

.random .r4 {
	top: 21px;
}

/* bulk */

body.touch-device #bulk {
	display: none;
}

.bulk .b1, .bulk .b2 {
	border: 2px solid #8fc06c;
	background: none;
	border-radius: 1px;
}

.bulk .b1 {
	height: 6px;
	width: 18px;
	left: 10px;
	top: 11px;
}

.bulk .b2 {
	height: 12px;
	width: 16px;
	left: 11px;
	top: 15px;
}

.bulk .b3 {
	height: 2px;
	width: 4px;
	top: 19px;
	left: 17px;
}

/* region */

.region .flag {
	margin: 9px;
	top: 0;
	left: 0;
	color: #000;
	background: none !important;
}

/* info */

.info .i1, .info .i2, .info .i3, .info .i4 {
	height: 2px;
	width: 16px;
	top: 13px;
	left: 11px;

	-webkit-transition: top .15s ease-out .15s, opacity 0s ease-out .15s, -webkit-transform .15s ease-out;
	   -moz-transition: top .15s ease-out .15s, opacity 0s ease-out .15s, -ms-transform .15s ease-out;
	        transition: top .15s ease-out .15s, opacity 0s ease-out .15s, transform .15s ease-out;
}

.info .i2, .info .i4 {
	top: 18px;
}

.info .i3 {
	top: 23px;
}

/* info (active) */

.active.info .i1,
.active.info .i2,
.active.info .i3,
.active.info .i4 {
	-webkit-transition: top .15s ease-out, opacity 0s ease-out .15s, -webkit-transform .15s ease-out .15s;
	   -moz-transition: top .15s ease-out, opacity 0s ease-out .15s, -ms-transform .15s ease-out .15s;
	        transition: top .15s ease-out, opacity 0s ease-out .15s, transform .15s ease-out .15s;
}

.active.info .i1,
.active.info .i3 {
	top: 16px;
	opacity: 0;
}

.active.info .i2 {
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
}

.active.info .i4 {
	-webkit-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}

/* refresh */

.refresh .r1 {
	height: 20px;
	width: 20px;
	top: 9px;
	left: 9px;
	border: 2px solid #8fc06c;
	background: #fff;
	border-radius: 100%;
}

.refresh .r2, .refresh .r3, .refresh .r4, .refresh .r5 {
	height: 2px;
	width: 7px;
	top: 21px;
	left: 22px;
	z-index: 1;
	
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
}

.refresh .r2 {
	top: 15px;
	left: 9px;
}

.refresh .r3 {
	top: 15px;
	left: 5px;
}

.refresh .r5 {
	left: 26px;
}

.refresh .r3, .refresh .r5 {
	-webkit-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}

.refresh .r6, .refresh .r7 {
	height: 3px;
	width: 10px;
	top: 12px;
	left: 7px;
	background: #fff;
	
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
}

.refresh .r7 {
	top: 23px;
	left: 21px;
}

/* no-js fix */

span.no-js {display: none}
body.no-js span.no-js {display: inline}

body.no-js h1:after {
	content: 'JavaScript is disabled :(';
}

body.no-js #info,
body.no-js #region,
body.no-js #options,
body.no-js #details,
body.no-js #help,
body.no-js #share {
	display: none;
}

/*--RESPONSIVE--*/

@media (max-width: 900px) {

	h1#name {
		font-size: 48px;
	}

}

@media (max-width: 640px) {

	h1#name {
		font-size: 36px;
	}
	
	#share {
		left: 50%;
	    margin-left: -152px;
	}

}

@media (max-width: 520px) {

	h1#name {
		font-size: 28px;
	}
	
	#bulk {
		display: none;
	}

}

@media (max-width: 480px) {
	
	.popover, #tabs {
		width: 100% !important;
		border-radius: 0;
	}

}

@media (max-height: 500px) {
	
	#data ul {
		display: none;
	}

}

@media (prefers-color-scheme: dark) {
	body {
		background: #202020;
	}
}