@CHARSET "ISO-8859-1";

@font-face {
  font-family: 'pixel';
  src: url('fonts/px.eot'); /* IE9 Compat Modes */
  src: url('fonts/px.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/px.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/px.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/px.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/px.svg#svgFontName') format('svg'); /* Legacy iOS */
}
html {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#05abe0+0,080e57+100 */
	background: #05abe0; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover, #05abe0 0%, #080e57 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover, #05abe0 0%,#080e57 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center, #05abe0 0%,#080e57 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05abe0', endColorstr='#080e57',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	background-size: 100vw 100vh;
	background-attachment: fixed;
}
body,input,button {
	font-family: pixel, helvetica, arial, sans-serif;
	background-color: transparent;
	font-size: 12px;
}
body {
	padding-bottom: 4em;
}
aside {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 50;
	width: 320px;
	display: none;
}

header {
	background: url("reshootr.png") no-repeat center 10px rgba(0,0,0,0);
	height: 120px;
	background-size: auto 30px;
	transition: all 250ms;
	position: relative;
}
@media (min-width:768px) {
	header {
		background-size: auto 40px;
	}
}


header a {
	position: absolute;
	top:0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
}
header div {
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 150px;
	z-index: 10;
}
header div::before{
	
}
header:hover {
	transition: all 100ms;
	background-position: center 5px;
}
h1 {
	font-size: 22px;
	color: #ccc;
	text-shadow: rgba(0,0,0,.5) 0 3px; 
}
.ranking {
	padding-bottom: 80px;
	position: relative;
	width: 60%;
	min-width: 260px;
	margin: 0 auto;
	max-width: 620px;
	color: #fff;
}
.ranking h1 {
	padding: .5em 0 2em;
}
.ranking li {
	position: relative;
	padding-left: 100px;
	text-align: right;
	margin-bottom: 1em;
	transition: all 250ms;
	text-shadow: rgba(0,0,0,.5) 0 2px;
	color: #ccc;
}
.ranking li:hover {
	background-color: rgba(0,0,0,.75);
	transition: all 100ms;
	transform: scale(1.25);
	color:#fff;
}
.shorthandle {
	position: absolute;
	left: 0px;
}
.btn,h1,.panel-heading {
	text-transform: uppercase;
}
.options {
	position: fixed;
	bottom: 20px;
	left: 40px;
	right: 40px;
}
.btn-primary {
	background-color: #cb5f9c;
	border-color: #94386c;
}
.ranking .btn-primary {
	padding: 16px 32px;
}
.btn-primary:hover, .btn-primary:focus {
	background-color: #df9ec3;
	border-color: #c284a7;
}
.darker {
	z-index: 25;
	background-color: rgba(0,0,0,.25);
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: fixed;
	display: none;
}
.codeform {
	position: relative;
}
.codeform fieldset {
	padding-bottom: 1em;
}
.codeform .btn {
	font-size: 13px;
}
.codeform .loading, .codeform .coderesult {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #fff;
	display: none;
}
.loading {
	background: url('loader.gif') no-repeat 50% 50% #fff;
	background-size: 75px;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(http://reshootr.richard-loewenstein.de/static/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(http://reshootr.richard-loewenstein.de/static/fonts/MaterialIcons-Regular.woff2) format('woff2'),
    url(http://reshootr.richard-loewenstein.de/static/fonts/MaterialIcons-Regular.woff) format('woff'),
    url(http://reshootr.richard-loewenstein.de/static/fonts/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.unit {
	float: left;
	display: block;
}
.funit {
	float: right;
	display: block;
}
#loadmore,#highscore{
	border-radius: 50%;
	padding: 25px;
	position: relative;
}
#loadmore i,#highscore i{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-style: normal;
  font-size: 32px;  /* Preferred icon size */	
}
#loadmore i {
	transform: translate(-53%,-46%) rotateZ(90deg);
	transition: all 150ms;
}
#highscore i{
	transform: translate(-42%,-53%)
}
.error{
	border-color: #ff0000 !important;
}
#codefield.error::after {
	content: "Something went wrong with your highscore code. Wrong code or duplicate entry";
	display: block;
}
.turned {
	transform: rotate(-810deg) translate(18px,-16px) !important;
}
#rankOutput {
	font-size: 60px;
}
.errormessage {
	display: none;
	color: #ff0000;
	font-weight: bold;
}
.tooltipt {
	border-radius: 4px;
	background-color: rgba(33, 33, 33, 1);
	color: #fff;
	font-weight: bold;
	padding: 5px 7px;
	display: none;
}
.tooltipt::before {
	position: absolute;
	width: 6px;
	height: 6px;
	background-color: rgba(33, 33, 33, 1);	
	content: " ";
	transform: rotatez(45deg);
}
.buy.tooltipt {
	position: absolute;
	top: 55px;
	left: 50%;
	transform: translate(-50%,0)
}
.buy.tooltipt::before{
	left: 50%;
	top: -3px;
	margin-left: -3px;
}
.sah.tooltipt,.slh.tooltipt {
	position: fixed;
	left: 85px;
	bottom: 33px;
}
.sah.tooltipt::before,.slh.tooltipt::before {
	top: 50%;
	left: -3px;
	margin-top: -3px;
}
.ahs.tooltipt {
	position: fixed;
	right: 85px;
	bottom: 33px;
}
.ahs.tooltipt::before {
	top: 50%;
	right: -3px;
	margin-top: -3px;
}
@media (max-width:767px) {
	.tooltipt.buy.desktop {
		display: none !important;
	}
}
@media (min-width:768px) {
	.tooltipt.buy.mobile {
		display: none !important;
	}
}