* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust:none;
    text-size-adjust:none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.15) rgba(0,0,0,0);
    outline:none;
    box-sizing: border-box;
    font-family: 'RockwellBold', tahoma, helvetica;
}

@font-face {
    font-family: 'RockwellBold';
    src: url('../_fonts/rockwell_bold-webfont.eot');
    src: url('../_fonts/rockwell_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../_fonts/rockwell_bold-webfont.woff') format('woff'),
         url('../_fonts/rockwell_bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html { height:100%; -ms-overflow-style: -ms-autohiding-scrollbar; overflow:hidden; background-color: #301f17; }
body {
    background: #2f1f16 url('/_img/bg.jpg') no-repeat top left;
    background-size: calc(100% + 200px) auto;
    height:100%;
    padding:0;
    margin:0;
    overflow:hidden;
    font-size: 14px;
    transition: background-position .3s ease-out;
}

::-webkit-input-placeholder { color:rgba(255,255,255,.2); font-weight: 600; font-size:.8em; }
:-moz-placeholder { color:rgba(255,255,255,.25); font-weight: 600; }
::-moz-placeholder { color:rgba(255,255,255,.25); font-weight: 600; }
:-ms-input-placeholder { color:rgba(255,255,255,.25); font-weight: 600; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.15); }

/* Autocomplete styles in Chrome*/
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:active,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus,select:-webkit-autofill:active { -webkit-animation: autofill 0s forwards; animation: autofill 0s forwards; }
@keyframes autofill { 100% { background: rgba(255,255,255,.1); color: inherit; } }
@-webkit-keyframes autofill { 100% { background: rgba(255,255,255,.1); color: inherit; } }

h1, h2, h3, h4 { margin:0; text-shadow: 1px 1px #000; }
h1 { font-size:28px; font-weight: 500; color:#fff; font-family: 'RockwellBold'; }
h2 { font-size:20px; font-weight: 500; margin:10px 0; color:#fff; font-family: 'RockwellBold'; }
h3 { font-size:14px; font-weight: 500; color:#fff;}
h4 { font-size:14px; font-weight: 300; margin:5px 0; color:#fff; }
p { margin:0; }
hr { height:0; border:0; border-top:1px solid rgba(255,255,255,.15); margin:13px 0; }

.fadeInQueue { opacity: 0; }
.clear {clear:both;}
.hidden { display:none; }
.center { margin:0 auto; }
.textcenter { text-align: center; }
.relative { position: relative; }
.inline { display:inline;}
.block { display:block; }
.faded { opacity: .5};
.clickable { transition: all .3s ease-in-out; }
.clickable:active, .clickable:active .item { cursor:pointer; opacity: .75; }
.smallspacer { height:5px; }
.spacer { height:10px; }
.bigspacer { height:24px; }
.scrollable { overflow-x:hidden; overflow-y: auto; height: 100%; -webkit-overflow-scrolling: touch; }
.scrollable.fade {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 64px, rgba(0, 0, 0, 1) calc(100% - 24px), rgba(0, 0, 0, 0) 100% ); 
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 64px, rgba(0, 0, 0, 1) calc(100% - 24px), rgba(0, 0, 0, 0) 100% ); 
}
ul { list-style:none; padding:0; }

.app { width:100%; height:100%; overflow:hidden; position: relative; }
.main, .garbage { width:100%; height:100%; overflow:hidden; }
.main.hiddenscroll view::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0); }

/* Content */
.content { padding:0 16px; color:#fff; max-width: 1024px; margin:0 auto; }
.content a { color:#fff; }
.content label { display:inline-block; margin:16px 0; text-transform: uppercase; font-size:11px; font-weight: 600; text-shadow: 1px 1px #000; }
.content.scrollable.fade { height:calc(100% + 80px); margin:-80px auto 0 auto; padding:80px 16px 0 16px; 
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 64px, rgba(0, 0, 0, 1) calc(100% - 24px), rgba(0, 0, 0, 0) 100% ); 
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 64px, rgba(0, 0, 0, 1) calc(100% - 24px), rgba(0, 0, 0, 0) 100% ); 
}
.insetbox {        
    width:100%;        
    border-radius: 1.3em;
    overflow:hidden;
    margin:24px auto;
    background:#301f1766;  
    box-shadow: inset 0 2px #000, inset 0 -1px #ffffff33;        
    position: relative;
    min-height:64px;
}

/* Buttons */
button {
    cursor: pointer;
    transition: opacity .3s ease-in-out;
    background: #00000055;    
    color: #fff;
    border: 0;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 20px 24px;
    border-radius: 10px;
    display: block;
    font-family: 'RockwellBold';
    box-shadow: inset 0 -2px 0 0 #000;
}
button:disabled { opacity: .25; }
button.centered { margin:0 auto; }
button.fullwidth { width:100%; }
button:active { background:#00000033; box-shadow: inset 0 2px 0 0 #000; }

button.navbutton { background:#00000055; }
button.navbutton:active { background:#00000033; }

/* Inputs */
input, select { 
    display: block;
    width: 100%;
    height: 60px;
    padding: 0 15px;
    border: 0;
    background: #00000044;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    box-shadow: inset 0 2px 0 0 #000;
    transition: all .3s ease-in-out;
}
input:focus { background: #00000066; box-shadow: inset 0 0 0 0 #000; }
select { width:100%; -webkit-appearance: none; appearance: none; margin:0; outline:none;}
select option { font-size:16px; background-color: #5a3b29; color:#fff; outline:none; }

select option:checked,
select option:hover,
select option:focus { font-size:16px; background-color: #fff !important; color:#000 !important; outline:none; }

.selectwrapper { width:100%; position: relative; box-sizing: border-box; margin:0; }
.selectwrapper:after { position: absolute; right:14px; top:50%; margin-top:-6px; font-size:12px; content:'\f078'; font-family: 'FontAwesome'; color:#fff; }

input[type=checkbox] { display:none; }

input[type=checkbox] + label {
    background: transparent;
    border:3px solid #fff;
    border-radius: 5px;
    height: 24px;
    width: 24px;
    display:inline-block;
    padding: 0 0 0 0px;
    margin:0 !important;
    position: relative;
}

input[type=checkbox]:checked + label { background: #fff; }
input[type=checkbox]:checked + label:after {
    content:'\f00c';
    position: absolute;
    top:50%;
    left:50%;
    font-family: 'FontAwesome';
    color:#000;
    transform:translate(-50%,-50%);
}

/* Slick */
.slick-list, .slick-track { touch-action:pan-y !important; }
.slick, .panes { height:100%; }
.slick-track { height:100%; }
.slick-slide { padding:0px; }

/* Top */
.navigation { position: absolute; background: linear-gradient(to bottom, #2f1f16, #2f1f1600); border-bottom: none; border-color: #fff; width:100%; height:74px; top:0; left:0; padding:16px 0; z-index:100; display:none; user-select: none; }
.navigation.fixed { background: #fff; border-bottom:1px solid #eee; transition: border .3s ease-in-out, box-shadow .3s ease-in-out; box-shadow: 0 10px 32px 0 rgba(0,0,0,.1); }
.navigation .title { color:#fff; font-weight: 600; line-height: 42px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding:0 64px; }
.navigation button { position: absolute; top:16px; width:42px; height:42px; font-size:20px; background: none; padding:0; color:#fff; box-shadow: none; }
.navigation button:active { opacity: .50 !important; }
.navigation button.backbtn { left:12px; }
.navigation button.menubtn { right:12px; }
.navigation button.menubtn:after {
    content:'\f036';
    font-family: 'FontAwesome';
    font-weight: 400;
    transform: rotate(180deg);
    display: block;
}
.sidr-menu-open .navigation button.menubtn:after { content:'\f00d'; }

/* Nav bar */
.navbar { position: absolute; bottom:20px; left:50%; width:calc(100% - 30px); max-width: 360px; height:80px; transform:translateX(-50%); background:#301f17aa; border-radius: 1.2em; list-style: none; margin:0; padding: 0; display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; box-shadow: inset 0 -2px 0 0 #000, inset 0 1px #ffffff33; user-select: none; }
.navbar li { display: grid; place-content: center;text-align: center; color:#fff; text-shadow: 1px 1px #000; border-radius: 1.2em; position: relative; user-select: none; }
.navbar li.active:after { content:''; position: absolute; top:0; left:0; width:100%; height:100%; border-radius: 0; background:#00000066; z-index: -1; box-shadow: inset 0 -2px 0 0 #000, inset 0 1px #ffffff33;    }
.navbar li:first-child.active:after { border-top-left-radius: 1.2em; border-bottom-left-radius: 1.2em; }
.navbar li:last-child.active:after { border-top-right-radius: 1.2em; border-bottom-right-radius: 1.2em; }
.navbar li.active.left:after { animation: fadeInLeft .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; }
.navbar li.active.right:after { animation: fadeInRight .3s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; }
.navbar li:active, .navbar li:not(.active):hover, .navbar li:hover:active { opacity: .5; }
.navbar li i { font-size:24px; user-select: none; }
.navbar li img { height:22px; user-select: none; vertical-align: bottom; padding-top:1px;}
.navbar li p { font-size:10px; margin-top:10px; user-select: none; }

/* Cards */
.achievement {
    display: grid;
    align-content: center;
    height: calc(100% - 80px);
}
.achievement .achievementterms { padding:20px; width:auto; text-align: center; }
.achievement .achievementterms button { padding:16px 20px; font-size:12px; display: inline-block; }
.achievement .clubcardplaque {
    display: inline-block;
    background: #301f1766;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 2px 20px 10px;
    font-size: 20px;
    margin: 0 auto;        
    box-shadow: inset 0 -1px #ffffff33;
    position: relative;
    top:-1px;
    border-top:1px solid #44210c70;
    z-index: 1;
}

.achievement .clubcardanimator {
    z-index: 2;
    left: 0;
    position: absolute;
    width: 100%;
    top: calc(50% - 148px);
}

.achievement .clubcardcontainer {
    width: 100%;
    max-width: 300px;
    border-radius: 1em;    
    margin: 0 auto;
    background: #301f1766;
    z-index: 1;
    box-shadow: inset 0 2px #000, inset 0 -1px #ffffff33; 
}
.achievement .clubcardcontainer:before {
    content:'';
    float:left;
    padding-top:calc(60% + 10px);    
    text-align: center;
}

.achievement .clubcard {
    width:100%;
    max-width: 280px;
    border-radius: 1em;
    overflow:hidden;
    margin:0 auto;
    transform:rotate(-5deg);        
    z-index: 100;
}

.achievement .clubcard.inactive {
    transform:rotate(0);
    filter: brightness(50%);  
}

.achievement .clubcard:after {
    content:'';
    float:left;
    padding-top:60%;    
    text-align: center;
}

.achievement .clubcard.empty {
    border:2px dashed #fff;
    animation:none;
}

.achievement .clubcard h3 { display:none; position:absolute; top:25%; left:50%; transform:translate(-50%,-50%); text-align: center; margin:0; font-size:20px; color: #00000033; text-shadow: none; }
.achievement .clubcard h2 { display:none; position:absolute; top:55%; left:50%; transform:translate(-50%,-50%); text-align: center; margin:0; font-size:100px; letter-spacing: -2px; color: #00000055; text-shadow: none; }
/* .achievement .clubcard h1 {     
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    margin: 0;
    font-size: 450px;
    letter-spacing: -20px;
    color: #00000010;
    text-shadow: none; 
    z-index:0;
} */
.achievement .clubcard h1 { display:none; }
.achievement .clubcard:before {
    content:'';
    width:100%;
    height:100%;
    background:url('/_img/datoklub.png') no-repeat center center;
    background-size: contain;
    position: absolute;
    top:0;
    left:0;
    z-index:0;
    opacity: .2;
}

.achievement .achievementinactive { 
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 32px;
    display: inline-block;
    padding: 12px 16px;
    border: 2px dashed #fff;
    transform: translate(-50%, -50%);
    opacity: .5;
}
 
.clubcard-bob { animation: bob-rotated 4s infinite ease-in-out both; }

.clubcard:not(.empty) {
    background: radial-gradient(ellipse farthest-corner at right bottom, #bdbdbd 0%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffffff 8%, #d7d7d7 25%, #aaaaaa 62.5%, #cccccc 100%);
    border: 1px solid #333333aa;
}

.achievement25 .clubcard {
    background: radial-gradient(ellipse farthest-corner at right bottom, #7c532f 0%, #835020 8%, #663b1f 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffdaac 8%, #d1a064 25%, #684112 62.5%, #5d3b1f 100%);
    border: 1px solid #3c1e06aa;
}

.achievement50 .clubcard {
    background: radial-gradient(ellipse farthest-corner at right bottom, #bdbdbd 0%, #a9a9a9 8%, #898989 30%, #818181 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffffff 8%, #d7d7d7 25%, #787878 62.5%, #000000 100%);
    border: 1px solid #333333aa;
}

.achievement100 .clubcard {
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #e9af3b 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    border:1px solid #3c2d06aa;
}

.achievement500 .clubcard {
    background: radial-gradient(ellipse farthest-corner at right bottom, #ffffff 0%, #ffffffa8 8%, #7d9595 30%, #708180 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #ffffff 8%, #aab8d1 25%, #1f5d5a 62.5%, #5e5e5e 100%);
    border: 1px solid #1f4c52aa;
}

.achievement1000 .clubcard {
    background: radial-gradient(ellipse farthest-corner at right bottom, #3e3e3e 0%, #242424 8%, #0c0c0c 30%, #101010 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #282828 0%, #101010 8%, #000000 25%, #0a0a0a 62.5%, #000000 100%);
    border: 1px solid #000000aa;
}

.achievement1000 .clubcard h1 { color: #ffffff05; }
.achievement1000 .clubcard h2, .achievement1000 .clubcard h3 { color: #ffffff11; }

.achievementbadge { position:absolute; bottom:0px; right:0px; width:48px; height:48px; border-radius: 50%; }
.achievementbadge.achievement1000 { background:#000; }

/* Alias */
.alias {
    display: inline-block;
    background: #301f1766;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 2px 20px 10px;
    font-size: 20px;
    margin: 0 auto;        
    box-shadow: inset 0 -1px #ffffff33;
    position: relative;
    top:-1px;
    border-top:1px solid #44210c70;
}

/* Stats */
.stats { width:100%; padding:20px; }
.stats>div { display: inline-block; }
.stats>div>div { display:grid; grid-template-columns: auto auto; grid-gap:12px; place-items: center; }
.stats img { height:64px; place-self: flex-end; display: flex; }
.stats h1 { padding-top:10px; font-size:48px; place-self: flex-start; display: flex; }

/* Photo */
.photocontainer { width:100%; max-width: 360px; margin:0 auto; }
.photo .changephoto {
    position: absolute;
    padding: 10px;
    bottom: 32px;
    left: 32px;
}
.photo {    
    width:100%;        
    border-radius: 1.3em;
    overflow:hidden;
    margin:0 auto;
    background:#301f1766;  
    box-shadow: inset 0 2px #000, inset 0 -1px #ffffff33;
    height: 0;
    padding-bottom: 100%;
    position: relative;
}

.photo .img { position:absolute; top:20px; left:20px; width:calc(100% - 40px); height:calc(100% - 40px); border-radius: .8em; background-color: #00000066; background-size:cover; background-repeat:no-repeat; background-position: center center; box-shadow: 0 2px #000; }

/* History */
.history { padding:20px; }
.history .date {
    background: #301f17aa;
    /* box-shadow: 0 2px #000, inset 0 1px #ffffff33; */
    border-radius: 8px;
    margin-bottom: 5px;
    display:grid;
    grid-template-columns: minmax(48px, 64px) 1fr auto;
    text-align: left;    
}
.history .date p { padding:16px; }
.history .date p:first-child { text-align: center; background:#00000033; }

/* Highscores */
.highscores img { display: inline-block; width:100%; max-width: 100px;; }
.scorescontainer { padding: 32px; }
.scorescontainer select { text-align: center; margin-bottom:10px; }
.scores {     
    width: 100%;        
}
.scores .score {
    background: #301f17aa;
    box-shadow: 0 2px #000, inset 0 1px #ffffff33;
    border-radius: 8px;
    margin-bottom: 5px;
    display:grid;
    grid-template-columns: 48px 1fr auto;
    text-align: left;    
}
.scores .score p:first-child { text-align: center; background:#00000033; border-top-left-radius:8px; border-bottom-left-radius:8px;  }
.scores .score p { padding:16px; }

/* Orientation guide */
.orientationguide {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #301f17;
    color:#fff;
    z-index:0;
    opacity:0;
    transition: opacity 1s ease-in-out;
}

.orientationguide>div { text-align: center; }
.orientationguide img { height:100px; width:auto; }

/* Install */
.modal_window.install .logo { height:64px; margin:20px auto 32px; display:block; }
.modal_window .modal_buttons { margin-top: 24px;}
.modal_window .gutter {
    text-align:center;
    padding:24px 0 8px 0;
    background: linear-gradient(to bottom,rgba(0,0,0,.1) 0px, rgba(0,0,0,0) 20px);
    margin:0 -20px;
}
.modal_window .gutter a { color:rgba(201,181,183,.45)}
.modal_window { max-width: 100%; }
.modal_window .icon { font-size: 100px; }
.modal_window.error .modal_content {
    height: 100%;
    display: grid;
    align-content: center;
    text-align: center;
}

.modal_window.succes { background:#4bb54b; }
.modal_window.succes .modal_content {
    height: 100%;
    display: grid;
    align-content: center;
    text-align: center;
}

/* Toast */
.toast_window {
	position:absolute;
    width:100%;
	background: #2e2016f0;
	color:#fff;
	font-size:14px;
	font-weight:600;
	padding:16px 12px;
	text-align:center;
	z-index:9999;
	top:0;
    left:0;
}
.toast_window.red { background:#ab051b; }
.toast_window.green { background:#4bb54b; }
.toast_window a { color:#333; font-weight: 400; }

/* Modal */
.modal_bg {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 65px, rgba(0,0,0,.1) 66px, rgba(0,0,0,.1) 100%);    
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    z-index: 98;
    display: none;
}
.modal_window {
    position: absolute;
    background:#2e2016f0;
    color:#fff;
    width: 100%;
    min-height: 32px;
    z-index: 99;
    padding:20px;
    font-family:tahoma, helvetica;
    font-weight: 400;
    font-size:14px; 
    box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.25);
}
.modal_close { position: absolute; top: 0px; right: 0px; color: #555; font-size: 16px; padding: 21px 23px; }
.modal_window .fa-ul { margin: 0; padding: 0 20px; list-style-type: square; }
.modal_window h1 { margin:0 0 10px 0; }
.modal_window a { color:#fff; }
/* .modal_button_wrapper { display:inline-block; width:50%; vertical-align: top;} */
.modal_button_wrapper:first-child { padding-right:10px; }
.modal_button_wrapper:last-child { padding-left:10px; }
.modal_button { margin:0 !important; position:relative; }
.modal_icon.modal_success::before, .modal_icon.modal_success::after, .modal_icon.modal_success .modal_fix { background:#fff; }

/* No internet */
.nointernet { font-size:12px; text-align: center; position: relative; }
.nointernet:before {
    content:'\f1e6';
    font-family: FontAwesome;
    font-size:200px;
    color:#ddd;
    z-index:0;
    display: inline-block;
    vertical-align: middle;
    margin-bottom:20px;
}

/* Loader */
.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top:-24px;
    margin-left:-24px;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    padding:0;
    box-sizing: border-box;
    border: 5px solid rgba(255, 255, 255, 0.15);
    border-top: 4px solid rgba(255,255,255,1);
    animation: loader 1.2s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

@keyframes loader { 100% { transform: rotate(360deg); } }


/* Custom animations */
@keyframes puff-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 0;
  }
}

@keyframes peekdown {
  0% { transform: translateY(-100%) rotate(180deg); }
  100% { transform: translateY(0) rotate(180deg); }
}

@keyframes heartbeat
{
  0% { transform: scale( 1 ); }
  20% { transform: scale( 1.1 ); }
  40% { transform: scale( 1 ); }
  60% { transform: scale( 1.1 ); }
  80% { transform: scale( 1 ); }
  100% { transform: scale( 1 ); }
}

@keyframes bob {
    0% { transform:translateY(0); }
    50% { transform:translateY(5px); }
    100% { transform:translateY(0); }
}

@keyframes bob-rotated {
    0% { transform:translateY(0) rotate(-5deg); }    
    50% { transform:translateY(10%) rotate(-5deg); }
    100% { transform:translateY(0) rotate(-5deg); }
}

/* Orientation */
@media (orientation:landscape) and (min-device-aspect-ratio: 4/4) and (max-width: 768px) {
    .orientationguide {
        display:grid;
        place-items: center;
        z-index:1000;
        opacity: 1;
    }
}

/* Progress */
.progress { width: 100%; height: 2px; background: rgba(0,0,0,0); margin: 10px auto; }
.progress .fill { width:0; height:100%; background:#fff; transition: all .3s ease-in-out; }
.progress .msg { font-size:11px; font-weight: 600; text-transform: uppercase; padding:16px 0; }

/* splash */
.splash { width:100%; height:100%; position: fixed; top:0; z-index: 99999; background:#301f17 url('/_img/bg.jpg') no-repeat center center; background-size: cover; }
.splash .overlay { width:100%; height:100%; position: relative; background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 20% ) }
.splash .logo { width:100%; max-width: 640px; margin: 0 auto; height:calc(100vh - 200px); background:url('/_img/logo.png') no-repeat center center; background-size:50% auto; }
.splash .footer { position: absolute; bottom:0; left:0; width:100%; height:200px; background-image: radial-gradient( 100% 200px at top, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 100%); text-align:center; color:#fff; }
.splash.puff-out-center { animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both; }

/* View */
view { width:100%; height:100%; display:block; position: relative; margin:0 auto; padding: 80px 0 100px 0; overflow:hidden; }

    /* Login */
    view.login { width:100%; height:100%; max-width: 100%; padding: 0 16px 24px; display: grid; grid-template-rows: auto auto; }
    view.login .wallpaper { position: relative; width: 100%; height:100%; min-height:150px; margin-top: 10px; }
    view.login .content { width:100%; padding:32px 0 32px 0; position: relative; z-index:100; }
    view.login h1 { text-align: center; text-shadow: 0 0 #000;}
    view.login .logo { width: 100%; height: 100%; max-width:calc(100% - 20px); margin:0 auto; position: relative; }
    view.login .logo:before { content:''; position: absolute; bottom:-3px; left:3px; transform:rotate(-5deg); width: 100%; height: 136px; background: url('/_img/logo_black.png') no-repeat center center; background-size: contain; z-index:10; opacity: .66; }
    view.login .logo:after { content:''; position: absolute; bottom:0px; left:0px; transform:rotate(-5deg); width: 100%; height: 136px; background: url('/_img/logo.png') no-repeat center center; background-size: contain; z-index:11; }
    view.login .loginform { width:100%; max-width:480px; margin:0 auto; }
    view.login .loginform label { display:inline-block; margin:16px 0; text-transform: uppercase; font-size:11px; font-weight: 600; text-shadow: 1px 1px #000; }
    view.login .loginform label span {opacity: .5; text-transform: none;}
    view.login .loginform input { text-align: center; font-size:16px; }
    view.login .loginform button { margin-top:20px; }
    view.login .loginform a { text-align: center; display:block; padding:20px; width:100%; text-shadow: 1px 1px #000; text-decoration: none; }

    /* Forgot password */
    view.forgotpassword { width:100%; height:100%; max-width: 100%; }
    view.forgotpassword .content { width:100%; padding: 0 16px 24px; position: relative; z-index:100; }
    view.forgotpassword .forgotpasswordform { width:100%; max-width:480px; margin:0 auto; }
    view.forgotpassword .forgotpasswordform label { display:inline-block; margin:16px 0; text-transform: uppercase; font-size:11px; font-weight: 600; }
    view.forgotpassword .forgotpasswordform label span {opacity: .5; text-transform: none;}
    view.forgotpassword .forgotpasswordform input { text-align: center; font-size:16px; }
    view.forgotpassword .forgotpasswordform button { margin-top:20px; }

    /* Search */
    view.search .searchcontainer { display:grid; grid-template-rows: auto 1fr; }    
    view.search .searchcontainer>div:first-child { display:grid; grid-template-columns: 1fr auto; grid-gap:10px; }
    
    view.search .searchcontainer button { padding-top:16px; }
    view.search .searchcontainer button:active { padding-top:20px; }
    
    view.search .searchresults { padding:20px; }
    view.search .searchresults { padding:20px; }
    view.search .searchresults .player {
        background: #301f17aa;
        box-shadow: 0 2px #000, inset 0 1px #ffffff33;
        border-radius: 8px;
        margin-bottom: 5px;
        display:grid;
        grid-template-columns: 1fr 48px;
        text-align: left;    
    }
    view.search .searchresults .player p:last-child { text-align: center; background:#00000033; border-top-right-radius:8px; border-bottom-right-radius:8px;  }
    view.search .searchresults .player p { padding:16px; }

    /* Player */
    view.player { width:100%; height:100%; max-width: 100%; padding-bottom: 20px; padding-top:20px; }
    view.player .content { display:grid; grid-template-rows: 1fr auto; height: 100%; grid-gap:20px; }
    view.player .content .scrollable.fade { padding-top:80px; }

    /* Installing */
    view.installing { width:100%; height:100%; max-width: 100%; padding-top:0; }
    view.installing .content { height:100%; display:grid; justify-content:center; align-content: center; }
    view.installing h1 { line-height: 32px; }

    /* Offline */
    view.offline { width:100%; height:100%; max-width: 100%; padding-top:0; }
    view.offline .content { height:100%; display:grid; align-content: center; }
    view.offline .content button { margin:0 auto; }
    
    /* Rules */
    view.rules { padding: 80px 0 0 0; }
    view.rules .content { padding-bottom: 24px !important; }
    view.rules ul { list-style: square; padding:20px; margin:0; }
    view.rules ul li { margin-bottom:20px; }
    view.rules ul li:last-child { margin-bottom:0; }

    /* Signup */
    view.signup { padding: 80px 0 0 0; }
    view.signup .content { padding-bottom: 24px !important; }
    view.signup .signupform label { display:inline-block; margin:16px 0; text-transform: uppercase; font-size:11px; font-weight: 600; }
    view.signup .signupform label span {opacity: .5; text-transform: none;}
    
    
    /* Benefits */
    .benefits ul { list-style: square; padding:20px; }
    .benefits ul li { margin-bottom:20px; }
    .benefits ul li:last-child { margin-bottom:0; }