@font-face {
  font-family: 'Nunito';
  src: url('https://www.aey.fi/fonts/nunito.woff2') format('woff2');
  font-weight: 200 400 700 900;
}

@font-face {
  font-family: 'Mulish';
  src: url('https://www.aey.fi/fonts/mulish.woff2') format('woff2');
  font-weight: 200 400 700 900;
}

:root {

  --radius: 20px;
  --color-emphasis: #ffcc55;

  --color-dark-bg: #000;
  --color-light-bg: #efefef;

  --color-dark-paper: #151515;
  --color-light-paper: #fff;

  --color-light-secondary: #999;
  --color-dark-secondary: #555;

  --color-light-font: #151515;
  --color-dark-font: #efefef; 

  --font-base: 400 16px / 24px "Nunito", Arial, sans-serif;
  --font-small: 700 13px / 16px "Nunito", Arial, sans-serif;
  --font-big: 700 18px / 26px "Nunito", Arial, sans-serif;

  --font-header-base: 900 32px / 36px "Mulish", Arial, sans-serif;
  --font-header-small: 900 20px / 22px "Mulish", Arial, sans-serif;

  --font-menu: 700 18px / 24px "Nunito", Arial, sans-serif;
}

html { height: 100%; }

html, body {
font: var(--font-base);
margin: 0;
padding: 0;
max-width: 100vw;
color: #191919;
}

body { background: var(--color-light-bg); overflow-x: hidden; }

body * { 
  -webkit-font-smoothing: subpixel-antialiased !important; 
  text-rendering:optimizeLegibility !important;
}

hr { border: none; border: 1px solid var(--color-light-secondary); }

h1 span
{
  font-weight: 400;
  font-size: 100%;
}

button {
  height: 50px;
  padding: 10px 30px;
  border-radius: 25px;
  border: 2px solid #666;
  background: rgba(20,20,20,.8);
  color: var(--color-dark-font);
  font: var(--font-small);  
  text-transform: uppercase;
  transition: .3s all;
  opacity: 1;
  cursor: pointer;
  margin-right: 10px;
}

button.secondary
{
  border: none !important;
  background: none !important;
  color: var(--color-light-font);
}

button:disabled {
  opacity: .3;
}

button:hover {
  color: var(--color-emphasis) !important;
  border: 2px solid var(--color-emphasis);
}

button.cta
{
  background: #efefef !important;
  color: #333 !important;
}

button.cta:hover
{
  background: var(--color-emphasis) !important;
  color: #fff !important;
}

h1 { font: var(--font-header-base); }
h2 { font: var(--font-header-small); }
h3 { font: var(--font-small); text-transform: uppercase; transition: .3s all; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

#toast {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: var(--color-emphasis);
  color: #333;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 999;
  left: 50%;
  top: 0px;
  opacity: 0;
  transition: .5s all;
  display: none;
}
  
#toast.show {
  animation-iteration-count: 1;
  display: block;
  visibility: visible;
  top: 30px;
  opacity: 1;
}

div.tooltip { display: inline-block; background: #bbb; color: #fff; border-radius: 20px; padding: 3px 3px 5px 6px; width: 8px; height: 8px; vertical-align:middle; line-height:10px; font-size:small; margin: 0 4px; }
div.tooltip span { visibility: hidden; text-transform: none; width: 200px; padding: 10px; border-radius: 5px; margin-left: -113px; margin-top:20px; background: #000; position: absolute; color: #fff; line-height: 16px; z-index: 10; }
div.tooltip:hover span { visibility: visible; }
div.tooltip span::after { content: " "; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; }


#topbar {
  max-width: 1600px;
  position: absolute;
  top: 0px;
  left:0;
  right:0px;
  height: 30px;
  text-align: right;
  margin: 5px auto 0 auto;
  z-index: 15;
}

#topbar a img {
width: 30px;
height: 30px;
margin: 0 auto 5px auto;
display: block;
}

#topbar a {
display: inline-block;
color: #fff;
text-align: center;
padding: 0 20px;
text-transform: uppercase;
top:0;
position: relative;
font: var(--font-small);
text-shadow: 0 0 10px rgb(0 0 0 / 20%);
}

#topbar a:hover {
text-decoration: none;
color: var(--color-emphasis);
}

#topbar.burger a {
  all: revert;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font: var(--font-small);
  text-transform: uppercase;
}

#topbar.burger a:hover {
  color: var(--color-emphasis);
}


.infobar
{
margin-top: -30px;
width: 300px;
display: inline-flex;
z-index:1;
}

.infobar b
{
font-size: 30px;
display: block;
}

.infobar div
{
flex: 1;
text-align: center;
text-transform: uppercase;
font-size: 12px;
border-right: 1px solid #ccc;
height: 100%;
}

.infobar div:last-child
{
border: none;
}



.progress {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  
.progress .spinner {
  stroke-dasharray: 169.646;
  stroke-dashoffset: 339.292;
  -webkit-animation: progress 1.3s infinite;
          animation: progress 1.3s infinite;
  stroke-linecap: round;
}



@-webkit-keyframes progress {
  from {
    stroke-dashoffset: 339.292;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes progress {
  from {
    stroke-dashoffset: 339.292;
  }
  to {
    stroke-dashoffset: 0;
  }
}

#popup
{
  background: #fff;
  border-radius: 10px;
  width: 350px;
  min-height: 220px;
  z-index: 99;
  position: absolute;
  right: 0;
  background: #333;
  color: #fff;
  box-shadow: 0px 0px 20px #000;
  opacity: 0;
  display: none;
  padding: 20px;
}

#popup:after
{
  content: '';
  position: absolute;
  top: 0;
  right: 10px;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-bottom-color: #333;
  border-top: 0;
  margin-left: -20px;
  margin-top: -10px;
}

#popup p
{
  margin-top: 5px;
}

#popup a
{
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #333;
}

#popup a:hover
{
  border-bottom: 1px solid var(--color-emphasis);
  text-decoration: none;
}

input
{
  width: calc(100% - 20px);
  height: 25px;
  padding: 10px;
  margin-bottom: 15px;
  border: none;
  background: #fff;
  font: var(--font-base);
  border-bottom: 3px solid #000;
  outline: none;
  transition: .5s border-color;
  caret-color: var(--color-emphasis);
}

input:focus { border-color: var(--color-emphasis);}

input:-webkit-autofill { box-shadow: 0 0 0 30px #fff inset; }

textarea { caret-color: var(--color-emphasis); }

div.list-title {
  margin-top: 10px;
  font: var(--font-big);
}

label
{
  text-transform: uppercase;
  font-size: 13px;
}

#popupbg
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:98;
  display: none;
}

#login_email, #loginload, #register_form, #forgot_form { display: none; }

#tab_login, #tab_register, #tab_forgot
{
  display: inline-block;
  cursor: pointer;
  padding-bottom: 5px;
  margin: 0 10px 20px 0;
  user-select: none;
}

#tab_login:hover, #tab_register:hover, #tab_forgot:hover
{
  border-bottom: 3px solid var(--color-emphasis);
}

#popup .selected
{
  color: var(--color-emphasis);
  border-bottom: 3px solid var(--color-emphasis);
}

#loginload
{
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    width: 120px;
    top: 70px;
}

#hamburger
{
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
  width:30px; height: 30px; margin: 10px 10px 0 0;
  cursor: pointer;
  mix-blend-mode: difference;
}

#hamburger:hover span
{
  background: var(--color-emphasis);
}

#hamburger span
{
  display: block;
  position: absolute;
  height: 2.5px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}
#hamburger span:nth-child(1) {
  top: 3px;
}

#hamburger span:nth-child(2) {
  top: 14px;
  width: 80%;
}

#hamburger span:nth-child(3) {
  top: 26px;
}

#hamburger.open span:nth-child(1) {
  top: 18px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#hamburger.open span:nth-child(2) {
  opacity: 0;
  left: 60px;
}

#hamburger.open span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

#topbar.burger { transition: .5s top; top: -330px; width:300px; height:300px; margin: 0 0 0 auto; padding: 30px 0 0 0 !important; background: rgba(10,10,10,.6); z-index: 21; backdrop-filter: blur(5px); border-radius: var(--radius); }
#topbar.burger a { width: calc(100% - 40px); text-align: left; line-height: 46px; }
#topbar.burger a img { float: left; margin: 10px 15px 5px 0;  }

span.huoltoloota
{
  display: block;
  padding: 20px;
  line-height: 1.3;
}

.loota
{
  border-radius: var(--radius);
  background: var(--color-light-paper);
}

span.stars
{
  vertical-align: middle;
  margin-right: 10px;
}

.pikkuotsikko {
  line-height: 0.5;
  text-align: center;
  margin: 25px 0 0 0;
}
.pikkuotsikko h3 {
  display: inline-block !important;
  position: relative;  
}
.pikkuotsikko h3:before,
.pikkuotsikko h3:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid var(--color-dark-secondary);
  top: 0;
  width: 600px;
}
.pikkuotsikko h3:before {
  right: 100%;
  margin-right: 15px;
}
.pikkuotsikko h3:after {
  left: 100%;
  margin-left: 15px;
}


@media screen and (max-width: 800px) and (prefers-color-scheme: light)
{
  #popupbg { background: rgba(205,205,205,.8) !important; }
}

@media screen and (max-width: 800px)
{
  * { letter-spacing: -0.03rem; }
  h1, h2, h3 { letter-spacing: -0.1rem; }
  #popup { padding: 20px; width: calc(100% - 40px); left: 0 !important; border-radius: 0; border: 0;}
  #popupbg { background: rgba(0,0,0,.8); }
  #toast { width: calc(100% - 32px); left: 0; margin: 0; border-radius: 0; }
  #topbar.burger { background: rgb(10,10,10); backdrop-filter: none; }
}

@media screen and (prefers-color-scheme: dark) {
  body, #page { background: var(--color-dark-bg) !important; }
  .box, #nosto, #latest, #tilastot, #aeyinfo, .user, .rater, #arv_teksti, .card { background: var(--color-dark-paper) !important;  }
  #overlay .rater { background: none !important; }
  #page, #nosto a, #nosto h1, .alkuinfo, #pisteytykset, .hakuotsikko, .box2, .box--half h1, #aeyinfo, .user, .review, .pisteytys div a, .reviewcontent p, .reviewcontent li, .reviewheader div a, .reviewcontent a, #modal_caption, #arv_teksti, .card, .card h1 { color: #efefef !important; }
  .palkkicontainer { background: #000 !important; }
  #modal { background: rgba(0,0,0,.8) !important; }
  #reviewactioncontainer { box-shadow: none !important; }
  .loota { background: var(--color-dark-paper) !important; box-shadow: 0 0 80px 0 rgba(0,0,0,0); }
  .review .avatar { border-color: #666 !important; }
  button { border: 2px solid #fff; }
  .box2 .footer { border-top: 1px solid var(--color-dark-secondary) !important; }
  .box--half .box2 { border-color: var(--color-dark-secondary) !important; }
  .tag { background: rgba(0,0,0,.3) !important; color: #fff !important; }
  .tag.selected { background: #666 !important;  color: #ccc !important; } 
  #modal_caption span {  color: #ccc; }
  #modal_nav img { border: 5px solid #000 !important; }
  .rater.reversed label { background: #000 !important; }
  .rater input[type="radio"]:checked+label { background: var(--color-emphasis) !important; }
  .notfound img { filter: brightness(0.5); }

  .user #avatar { border: 10px solid #333 !important; }
  .row.sel { color: #000; }
  .user a { color: #aaa !important; }
  .user svg text:not(.svghov) { fill: #fff !important;  }
  .row:hover { background: #000 !important; }
  input:focus { border-color:var(--color-emphasis);}
  a.tag img { filter: none !important; }
  .noreviews { color: #fff !important; }
  hr { border: none; border-top: 1px solid var(--color-dark-secondary); }
  h3 { color: var(--color-dark-secondary) !important; }
  .sortbar div ul { box-shadow: none !important; background: var(--color-dark-paper); }
  #bg { opacity: .5 !important; }
}

@media screen and (min-width: 1600px)
{
  #hamburger { left: calc(1560px + (100% - 1600px) / 2); }
  #button_back { left: calc(5px + (100% - 1600px) / 2) !important; }
  #topbar.burger { margin-right: calc((100% - 1600px) / 2); }
}