/* General */
* {margin:0;padding:0;font-weight:normal;text-decoration:none;font-family: 'Quicksand', sans-serif;}
html {font-size:62.5%;background:#181818}
a {color: white}
body, html {float:left;width:100vw;}
ul {list-style-type: none;}
h1 {font-size:3.0rem;color:white}
@media (hover: none) {
  * {transition:none}
}
input:focus {outline:0;}

/* Navigation */
ul#nav {pointer-events:none}
ul#nav > li img {height: 27px;}
ul#nav {display:block;float:left;width:100%;font-size:1.6rem;text-transform:uppercase;height:100px;z-index:500;position:relative;background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.6),rgba(0,0,0,0));color:white}
ul#nav > li {display:block;float:left;z-index:100;transition: background .35s ease-out;pointer-events:auto;white-space: nowrap;}
ul#nav > li > a {display:block;padding:25px}
ul#nav > li:nth-of-type(1) > a {padding: 17px 25px}
ul#nav > li:nth-of-type(8) {float:right;}
ul#nav > li:nth-of-type(8) > span {font-size:2.1rem}
ul#nav > li:nth-of-type(8) a:hover {background:#eee;}
ul#nav > li:nth-of-type(8) a:hover {color:#181818}
ul#nav > li:nth-of-type(7) {float:right;width:68px}
ul#nav > li:nth-of-type(7) > a {margin-top: -7px;padding-bottom:18px;padding-left:25px}
ul#nav > li:nth-of-type(7) > a span {display:block;transform: rotate(-45deg);font-size: 2.3rem}
ul#nav > li:nth-of-type(7) a:hover {background:#eee;}
ul#nav > li:nth-of-type(7) a:hover {color:#181818}
ul#nav > li:hover a {background:rgba(0,0,0,0.5)}
img#hamburger {display:none}

/* Min meny */
ul#minmeny {background:#eee;text-transform:uppercase;font-size:1.6rem;display:block;position:absolute;right:68px;display: none;}
ul#minmeny li {display:block}
ul#minmeny li:first-of-type {padding-top:10px}
ul#minmeny li:last-of-type {padding-bottom:10px}
ul#minmeny a {color:#cd0050 !important;padding:10px 20px;display:block}

/* Sök */
div#sok {background:#eee;text-transform:none;font-size:2rem;display:block;position:absolute;right:0px;left:0px;text-align:center;display:none;z-index:201;}
div#sok form {display: inline-block;width: calc(100% - 80px);margin: 20px;font-size: 2rem;max-width: 800px;border: 1px solid rgba(12,12,12,0.4);padding: 10px 20px;border-radius: 22px;background: #fff;}
div#sok form input {font-size:2rem;border:none;padding:0;margin:0;float:left;display:block}
div#sok form input[type="submit"] {float:right;cursor:pointer}
div#sok form input[type="text"] {width: calc(100% - 100px);}  
div#sok form input:focus {outline:0;}
div#sok form span {color: #cd0050;text-transform: uppercase;display: block;float: right;font-size: 1.3rem;margin-right: 11px;margin-top: 6px;cursor:pointer}
div#sok::after {display: block;position: absolute;background-image: linear-gradient(to bottom, rgba(24,24,24,1.0), rgba(24,24,24,0.5), rgba(24,24,24,0));height: 20px;width: 100%;left:0;bottom:-20px;content: '';}

/* Sökresultat */
div#sokres {position: absolute;left: 0px;right: 0px;background: #cd0050;margin-top: calc(2rem + 71px);box-shadow: 0 0px 200px #000;z-index: 200;text-transform:none;padding-bottom:50px;display:none;top:58px;z-index:499}
div#sokres h1 {margin:40px 0 20px 50px;display:block;clear:both}

div#sokres div.horizontal {height:auto}
div#sokres div.horizontal div.start {position:absolute;margin-top:-300px;float:none;left:0px;top:auto;background-image:linear-gradient(to left, rgba(205,0,80,0) , rgba(205,0,80,1));}
div#sokres div.horizontal div.end {position:absolute;margin-top:-300px;float:none;right:0px;top:auto;background-image:linear-gradient(to right, rgba(205,0,80,0) , rgba(205,0,80,1));}

div#sokres div.horizontal span.prev, div#sokres div.horizontal span.next {padding-top: 33px}

div#sokres h1#nores {display:none;margin-top:65px}



/* Progress bar */
div.laddar {background-image:url(https://api.kritiker.se/bilder/laddar_vit.svg);display:none;height:70px;background-repeat: no-repeat;background-position:center top;margin-bottom:30px;color:#fff;text-align:center;line-height: 177px;min-width:70px}
div.laddar.left {float:left;clear:both;margin-left:50px}
div.laddar.center {float:left;clear:both;width:100%}
div.laddar.top {margin-top:30px}

/* Vertikal lista */
ul#list, ul.favs {color:white;width:calc(100vw - 370px);float:left;clear:left;position:relative;margin-top:20px;padding:0px 0px 0 50px}
ul#list li, ul.favs li {display:block; float:left;height:300px;width:200px;background-repeat: no-repeat;background-size: cover;background-position:center center;margin:0 20px 20px 0}
ul#list li.coverskivor, ul.favs li.coverskivor {width:250px;height:250px}
ul#list li.coverspel, ul.favs li.coverspel {width:250px;height:333px;background-size:cover;background-position:center 67%}

ul#list li a, div.horizontal ul li a, div.threefixed ul li a, ul.favs li a {width:100.1%;height:100.1%;display:block;float:left;position:relative;transition: .35s ease-out;background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0.2),rgba(0,0,0,0.7),rgba(0,0,0,0.8))}
div.threefixed ul li a {position:absolute;left:0;right:0;top:0;bottom:0}
ul#list li a h3, div.horizontal ul li a h3, div.threefixed ul li a h3, ul.favs li a h3 {position:absolute;bottom:10px;left:10px;right:10px;color:rgba(255,255,255,1);font-size:2rem;line-height:1.1;transition: .35s ease-out;word-break: break-word}
ul#list li a span.star, div.horizontal ul li a span.star, div.threefixed ul li a span.star, ul.favs li a span.star {position:absolute;top:8px;right:10px;color:rgba(242,176,30,0);font-size:2rem;text-shadow:0px 1px 2px rgba(0,0,0,0);transition: .35s ease-out}
ul#list li a span.grade, div.horizontal ul li a span.grade, ul.favs li a span.grade {background-color:rgba(var(--rgb), 1.0);color:rgba(255,255,255,1);transition: .35s ease-out;}
span.grade {padding: 1px 3px;display: inline-block;border-radius: 4px;text-shadow:none;}
ul#list li span.artist, div.horizontal ul li span.artist, div.threefixed ul li span.artist, ul.favs li span.artist  {font-size:1.5rem;text-transform:uppercase}
ul li span.year  {font-size:1.3rem;text-transform:uppercase;color:rgba(170,170,170,1);transition: .35s ease-out;}

ul#list li a:hover, div.horizontal ul li a:hover, ul.favs li a:hover {background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.0),rgba(0,0,0,0.0),rgba(0,0,0,0.0),rgba(0,0,0,0.0))}
ul#list li a:hover h3, div.horizontal ul li a:hover h3, ul.favs li a:hover h3 {color:rgba(255,255,255,0)}
ul#list li a:hover span.star, div.horizontal ul li a:hover span.star, ul.favs li a:hover span.star {color:rgba(242,176,30,1);text-shadow:0px 1px 2px rgba(0,0,0,1)}
ul#list li a:hover span.grade, div.horizontal ul li a:hover span.grade, ul.favs li a:hover span.grade {background-color:rgba(var(--rgb), 0.85);color:rgba(255,255,255,0.85);font-size:5rem;display:block;float: right;}
div.horizontal ul li a:hover span.year, ul#list li a:hover span.year {color:rgba(170,170,170,0)}

/* Favoriter */
ul.favs {display:none}
h1#spelfavh, h1#skivorfavh, h1#serierfavh, h1#filmfavh {display:none} 

/* Horisontell lista */
div.horizontal {color:white;width:100%;float:left;height:400px;position:relative;z-index:100;overflow:hidden}
div.horizontal.landscape ul li {width:420px;background-size: cover;background-position:top center}
div.horizontal.square ul li {width:300px;}
div.horizontal.square ul li a {background-image:none}
div.horizontal.square ul li a {background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0.2),rgba(0,0,0,0.7),rgba(0,0,0,0.8))}
div.horizontal.game div.cover, div.horizontal.landscapecover div.cover, div.horizontal.albumcover div.cover {width:220px;height:280px;background-position:center center;background-size:cover;margin:10px;z-index:10;position:relative}
div.horizontal.game ul li, div.horizontal.landscapecover ul li, div.horizontal.albumcover ul li {width:620px;background-size: cover;background-position:top center;}
div.horizontal.albumcover ul li {width:480px}
div.horizontal.game ul li a h3 {left:240px}
div.horizontal.landscapecover div.cover {width:186px}
div.horizontal.albumcover div.cover {height:180px;top:100px;width:180px}
div.horizontal.landscapecover ul li a h3 {left:206px}
div.horizontal.albumcover ul li a h3 {left:200px}
div.horizontal.gameposter ul li {width:288px;background-size: cover;background-position: center center}
div.horizontal h1, h1.outside, div.twofixed h1, div.threefixed h1 {margin:30px 50px 20px 50px;float:left}
h1.outside#filmer {margin-top:0}
div.horizontal ul {margin-top:20px;display: flex;flex-wrap: nowrap;overflow-x: auto;-webkit-overflow-scrolling: touch;padding:0px 50px;clear:both;height:100%;-ms-overflow-style: none;scrollbar-width: none;}
div.horizontal ul li {flex: 0 0 auto;display:block; float:left;height:300px;width:200px;background-repeat: no-repeat;background-size: 100% 100%;background-position:center center;margin-right:20px;}
div.horizontal ul::-webkit-scrollbar {display: none;}
div.horizontal ul:after { content: ' '; min-width: 30px; } 

div.horizontal div.end {background-image: linear-gradient(to right, rgba(24,24,24,0) , rgba(24,24,24,1));height:300px;position:relative;top:-400px;width:50px;float:right;z-index:200}
div.horizontal div.start {background-image: linear-gradient(to left, rgba(24,24,24,0) , rgba(24,24,24,1));height:300px;position:relative;top:-400px;width:50px;float:left;z-index:200}
div.horizontal span.prev, div.horizontal span.next {float:right;color:white;font-size:3.5rem;cursor:pointer;padding:24px 0 0 0}
div.horizontal span.prev {margin-left:-20px}
div.horizontal span.prev {padding-right:20px}
div.horizontal span.next {padding-right:20px}
a.all {position:absolute;z-index:100;float:right;color:white;font-size:1.6rem;text-transform:uppercase;border-radius: 20px;border: 1px solid white;padding: 3px 20px;margin: 0;top:36px;right:100px}


/*@media (hover: none) {
  div.horizontal ul li a {background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,1))}
  div.horizontal ul li a h3 {color:rgba(255,255,255,1)}
  div.horizontal ul li a span.star {color:rgba(255,255,255,1)}
  div.horizontal ul li a span.grade {background-color:rgba(var(--rgb), 1.0);color:rgba(255,255,255,1)}
  div.horizontal ul li a span.star {color:rgba(255,255,255,0)}
}*/

/* Full trailer */
div.fulltrailer {display:block;float:left;width:100%;position:relative;height: calc(100vw*9/22 - 1px);overflow-y:hidden}
div.fulltrailer div#overlay {position:absolute;width:100vw;height:calc(100% + 2px);background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0.2),rgba(0,0,0,0.9),rgba(0,0,0,1));z-index:300;pointer-events:none;}
div.fulltrailer iframe {left:0;height: calc(100vw*9/16);width: 100vw;position:absolute;top:calc(0px - (((100vw*9/16) - (100vw*9/22)) / 2));}
div.fulltrailer a {position: absolute;bottom:20px;left:20px;display:block;z-index:301}
div.fulltrailer a h4 {font-size: 1.6rem;text-transform: uppercase;font-weight: bold;}
div.fulltrailer a h3 {font-size: 4rem}
div.fulltrailer a span.grade {background-color:rgba(var(--rgb), 1);color:white}

/* Full landscape */
div.fulllandscape {display:block;float:left;width:100%;position:relative;height: calc(100vw*9/22);overflow-y:hidden;background-position:center center !important;background-size:cover !important}
div.fulllandscape div#overlay {position:absolute;width:100vw;height:calc(100% + 2px);background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0.2),rgba(0,0,0,0.9),rgba(0,0,0,1));z-index:300;pointer-events:none;}
div.fulllandscape a {position: absolute;bottom:20px;left:20px;display:block;z-index:301}
div.fulllandscape a h4 {font-size: 1.6rem;text-transform: uppercase;font-weight: bold;}
div.fulllandscape a h3 {font-size: 4rem}
div.fulllandscape a span.grade {background-color:rgba(var(--rgb), 1);color:white}

/* Två fixed */
div.twofixed {width:100%;color:white}
div.twofixed, div.twofixed ul, div.twofixed ul li {display:block;float:left}
div.twofixed ul {clear:both;padding:0 50px;width:calc(100% - 100px);text-align:center}
div.twofixed ul li {width:calc(50% - 25px);height:400px;background-position:center center;background-size:cover;position:relative}
div.twofixed ul li:last-of-type {float:right}
div.twofixed ul li div {position:absolute;bottom:50px;width:100%}
div.twofixed h3 {font-size: 4rem;margin:0 50px;text-shadow: 1px 1px 2px black}
div.twofixed h4 {font-size: 2.6rem;margin:0 50px 20px 50px;text-shadow: 1px 1px 2px black}
div.twofixed a, a.spotifyplay, a#spotifyplaylist, a.spotifyplayplaylist {display:inline-block;color:#2bb95d;font-size:1.6rem;text-transform:uppercase;border-radius: 20px;border: 1px solid #2bb95d;padding: 3px 20px;}

/* Tre fixed */
div.threefixed {width:100%;color:white}
div.threefixed, div.threefixed ul, div.threefixed ul li {display:block;float:left}
div.threefixed ul {clear:both;padding:0 50px;width:calc(100% - 100px);text-align:center}
div.threefixed ul li {width:calc(33.3% - 16.7px);height:0;padding-bottom:calc(33.3% - 16.7px);background-position:center center;background-size:cover;position:relative;margin-right:25px}
div.threefixed ul li:last-of-type {float:right;margin-right:0}
div.threefixed ul li a {display:table;text-align:center}
div.threefixed ul li div {display:table-cell;vertical-align:middle}
div.threefixed ul li h3 {bottom:inherit !important;text-shadow:1px 1px #181818}


/* Knappar */
div.twofixed a, a.spotifyplay, a.netflixplay, a.hboplay, a.viaplayplay, a.cmoreplay, a.svtplay, a.fel, a.huluplay, a.atvplay, a.primeplay, a.dplusplay {display:inline-block;font-size:1.6rem;text-transform:uppercase;border-radius: 20px;padding: 4px 20px;border: 1px solid}
div.twofixed a, a.spotifyplay {color:#2bb95d;border-color: #2bb95d}
a.netflixplay {color:#f80004;border-color: #f80004}
a.hboplay {color:#5b1be6;border-color: #5b1be6}
a.dplusplay {color:#83e0ee;border-color: #83e0ee}
a.viaplayplay {color:#fd0038;border-color: #fd0038}
a.cmoreplay {color:#fb353d;border-color: #fb353d}
a.svtplay {color:#00c800;border-color: #00c800}
a.huluplay {color:#1ce783;border-color: #1ce783}
a.atvplay {color:#fff;border-color: #fff}
a.primeplay {color:#00a9e1;border-color: #00a9e1}

a.fel {color:#b3b3b3;border-color: #b3b3b3;float:right;;margin-top: 3.8rem;cursor:pointer}
a.fel:first-of-type{margin-left: 20px;margin-right:50px}
a.fel:nth-of-type(n+3) {display:none}
a.fel:nth-of-type(-n+2) {display:block}

/* Årsbästa */
form#yearform span {display:none}
form#yearform input {font-size: 10rem;line-height: 10rem;width: 26rem;text-align: center;background: rgba(0,0,0,0.6);color: transparent;text-shadow : 0 0 0 #fff;border: none;border-radius:3px;pointer-events: all;display: block;margin: 0 auto;}
form#yearform {display: flex;width:100%;position: absolute;top:0;pointer-events: none;max-height: 630px;height: 53vw;flex-direction: column;justify-content: center;}
    

/* Colors */
.grade10 {--rgb: 99,37,35; background-color:rgb(var(--rgb))}
.grade11 {--rgb: 108,42,33; background-color:rgb(var(--rgb))}
.grade12 {--rgb: 116,46,32; background-color:rgb(var(--rgb))}
.grade13 {--rgb: 125,51,30; background-color:rgb(var(--rgb))}
.grade14 {--rgb: 133,56,28; background-color:rgb(var(--rgb))}
.grade15 {--rgb: 142,61,26; background-color:rgb(var(--rgb))}
.grade16 {--rgb: 150,65,25; background-color:rgb(var(--rgb))}
.grade17 {--rgb: 159,70,23; background-color:rgb(var(--rgb))}
.grade18 {--rgb: 167,75,21; background-color:rgb(var(--rgb))}
.grade19 {--rgb: 176,80,19; background-color:rgb(var(--rgb))}
.grade20 {--rgb: 184,84,18; background-color:rgb(var(--rgb))}
.grade21 {--rgb: 193,89,16; background-color:rgb(var(--rgb))}
.grade22 {--rgb: 201,94,14; background-color:rgb(var(--rgb))}
.grade23 {--rgb: 210,99,12; background-color:rgb(var(--rgb))}
.grade24 {--rgb: 218,103,11; background-color:rgb(var(--rgb))}
.grade25 {--rgb: 227,108,9; background-color:rgb(var(--rgb))}
.grade26 {--rgb: 218,110,12; background-color:rgb(var(--rgb))}
.grade27 {--rgb: 209,111,16; background-color:rgb(var(--rgb))}
.grade28 {--rgb: 200,113,19; background-color:rgb(var(--rgb))}
.grade29 {--rgb: 191,115,22; background-color:rgb(var(--rgb))}
.grade30 {--rgb: 182,116,25; background-color:rgb(var(--rgb))}
.grade31 {--rgb: 173,118,29; background-color:rgb(var(--rgb))}
.grade32 {--rgb: 164,120,32; background-color:rgb(var(--rgb))}
.grade33 {--rgb: 155,121,35; background-color:rgb(var(--rgb))}
.grade34 {--rgb: 146,123,38; background-color:rgb(var(--rgb))}
.grade35 {--rgb: 137,125,42; background-color:rgb(var(--rgb))}
.grade36 {--rgb: 128,126,45; background-color:rgb(var(--rgb))}
.grade37 {--rgb: 119,128,48; background-color:rgb(var(--rgb))}
.grade38 {--rgb: 116,126,47; background-color:rgb(var(--rgb))}
.grade39 {--rgb: 113,123,47; background-color:rgb(var(--rgb))}
.grade40 {--rgb: 110,121,46; background-color:rgb(var(--rgb))}
.grade41 {--rgb: 107,118,46; background-color:rgb(var(--rgb))}
.grade42 {--rgb: 104,116,45; background-color:rgb(var(--rgb))}
.grade43 {--rgb: 101,114,44; background-color:rgb(var(--rgb))}
.grade44 {--rgb: 97,111,44; background-color:rgb(var(--rgb))}
.grade45 {--rgb: 94,109,43; background-color:rgb(var(--rgb))}
.grade46 {--rgb: 91,107,42; background-color:rgb(var(--rgb))}
.grade47 {--rgb: 88,104,42; background-color:rgb(var(--rgb))}
.grade48 {--rgb: 85,102,41; background-color:rgb(var(--rgb))}
.grade49 {--rgb: 82,99,41; background-color:rgb(var(--rgb))}
.grade50 {--rgb: 79,97,40; background-color:rgb(var(--rgb))}

/* Listor med ranking */
div.rank {width: 0;height: 0;border-style: solid;border-width: 61px 62px 0 0;border-color: rgba(24,24,24,0.7) transparent transparent transparent;text-align: center;z-index: 35;;color:white;position:absolute}
div.rank p {margin-top: -60px;font-size: 25px;text-align: center;width: 39px;}

/* Footer */
div#footer {float:left;width:calc(100% - 300px);padding:30px 30px;font-size:1.6rem;color:#fff;margin-top:20px;box-sizing:border-box}
div#footer img {width:166px;margin: 0 auto;display:block;margin-bottom:50px}
div#footer ul {display:block;float:left;width:calc(20% - 10px);margin:0 5px}
div#footer ul li {display:block;float:left;clear:both;padding:5px 0;word-break: break-word}
div#footer ul li:first-of-type{text-transform:uppercase;color:#cd0050}
div#copy {float:left;width:100%;text-align:center;color:#fff;background:#cd0050;font-size:1.6rem;line-height:5rem}

/* Dialog */
div.dialogwrapper {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);z-index:2000;display:none}
div.dialog {position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background: #cd0050;color:#fff;border-radius: 10px;padding:30px 40px;text-align:center;}
div.dialog h3 {font-size:3rem}
div.dialog p {font-size:1.5rem;margin-bottom:1rem;margin-top:1rem}

div.dialog a#closedialog {font-size: 6rem;line-height: 0rem;display: block;float: right;margin: -9px -26px 0 0;}
div.dialog form {margin-top:22px}
div.dialog form input[type="email"], div.dialog form input[type="password"] {border: none;padding: 2px 5px;font-size: 1.6rem;clear: both;display: block;margin: 18px 0;width: 100%;min-width:250px}
div.dialog form input[type="submit"], div.dialog a#mem1, div.dialog a#mem2 {display:inline-block;color:#cd0050;font-size:1.6rem;text-transform:uppercase;border-radius: 20px;border: none;padding: 3px 20px;background:#fff;}
div.dialog form input[type="submit"]:hover {cursor: pointer}

div.dialog#premiumf, div.dialog#premiumfl, div.dialog#memberf {max-width:350px}
div.dialog#premiumf h3, div.dialog#memberf h3, div.dialog#premiumfl h3 {line-height:1.1;margin-bottom:14px}
div.dialog#premiumf p, div.dialog#premiumfl p, div.dialog#memberf p, div.dialog#newreviewdialog,  div.dialog#errordialog {font-size:1.6rem}
div.dialog#newreviewdialog p, newreviewdialog#errordialog p {text-align:left;margin:10px 0}
div.dialog#newreviewdialog p:first-of-type, newreviewdialog#errordialog p:first-of-type {margin-top:20px}
div.dialog a#mem1, div.dialog a#mem2 {margin-top:20px}
div.dialog#newreviewdialog form, div.dialog#errordialog form {text-align:left;width:500px;margin: 20px auto 0 auto}
div.dialog#newreviewdialog form label, div.dialog#errordialog form label {float:left;clear:left;width:100px;text-align:left;margin-bottom:16px}
div.dialog#newreviewdialog form input[type="text"], div.dialog#newreviewdialog form input[type="number"], div.dialog#newreviewdialog form select, div.dialog#newreviewdialog form input[type="url"] {float:left;width:400px;clear:right;border: none;padding: 2px 5px;font-size: 1.6rem}
div.dialog#errordialog form input[type="text"], div.dialog#errordialog form input[type="email"], div.dialog#errordialog form select, div.dialog#errordialog form textarea {float:right;width:390px;clear:right;border: none;padding: 2px 5px;font-size: 1.6rem;margin:0}
div.dialog#newreviewdialog form input[type="submit"],div.dialog#errordialog form input[type="submit"] {display:block;clear:both;margin:0 auto}
div.dialog#newreviewdialog form input[type="text"], div.dialog#newreviewdialog form input[type="number"], div.dialog#errordialog form textarea {margin-bottom:20px}
div.dialog form * {outline-width: 0}


/* spel */
span#platform img {height: 3rem !important;box-shadow: none;width: auto !important;margin-top: 0.2rem;margin-right: 0;margin-left: 1.5rem;}

/* Login */
a#glomt {font-size: 1.2rem;clear: both;display: block;margin: 8px;}
span#eller {font-size: 1.6rem;display: inline-block;position: relative;padding: 10px;background:#cd0050}
div#ellerline {border-top: 1px solid #fff;width: 100%;margin-top: calc(-1rem - 10px);}
div.dialog form input#fbbutton {color:#fff;background:#3b5998;margin-top:6px}
div#blimedlem {background: #fff;color: #181818;margin: 30px -40px -30px -40px;padding: 16px 0 20px 0;border-radius: 0 0 10px 10px;}
div#blimedlem a {color:#3b5998;font-size:1.6rem;margin-top: 5px;display: inline-block;}

/* Feature startsidan */
ul#start {position:relative;height:53vw;max-height:630px}
ul#start li {position:absolute;width:25%;background-size:cover;background-position:center center;height:30vw}
ul#start li:nth-of-type(1), ul#start li:nth-of-type(6) {width:50%;height:23vw;max-height:280px;background-position:top center}
ul#start li:nth-of-type(2), ul#start li:nth-of-type(4) {width:30%;max-height:350px}
ul#start li:nth-of-type(2), ul#start li:nth-of-type(6) {left:50%}
ul#start li:nth-of-type(3), ul#start li:nth-of-type(5) {width:20%;max-height:350px}
ul#start li:nth-of-type(3), ul#start li:nth-of-type(6) {right:0}
ul#start li:nth-of-type(4), ul#start li:nth-of-type(5), ul#start li:nth-of-type(6) {bottom:0}
ul#start li:nth-of-type(5) {left:30%}
ul#start li a {width:100%;height:100%;display:block;float:left;background-image: radial-gradient(rgba(0,0,0,0.05),rgba(0,0,0,0.4));transition: background .35s ease-out;position:relative;}
ul#start li a:hover{background-image: radial-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.7))}
ul#start li a:hover h2, ul#start li a:hover h1 {color:rgba(255,255,255,1.0);text-shadow: 1px 1px 2px #000}
ul#start li a:hover span.grade {background-color:rgba(var(--rgb), 1.0);color:rgba(255,255,255,1)}
ul#start h2 {font-size:1.6rem;text-transform:uppercase;font-weight:bold;margin: 1rem 1rem 0.2rem 1rem;transition: color .35s ease-out, text-shadow .35s ease-out;color:rgba(255,255,255,0)}
ul#start h1 {font-size:3.0rem;margin: 0rem 1rem 1rem 1rem;line-height:1.1;transition: color .35s ease-out,text-shadow .35s ease-out;color:rgba(255,255,255,0)}
ul#start .bottomleft {position:absolute;bottom:0}
ul#start .bottomright {position:absolute;bottom:0;right:0;text-align:right}
ul#start a.centercenter {display:table;text-align:center}
ul#start a.centercenter div {display:table-cell;vertical-align:middle}
ul#start li span.grade {background-color: rgba(var(--rgb),0.0);color:rgba(255,255,255,0);transition: .35s ease-out}

/* Feature övriga */
ul.filmf {height:67vw !important}
ul.filmf li:nth-of-type(2), ul.filmf li:nth-of-type(3), ul.filmf li:nth-of-type(4), ul.filmf li:nth-of-type(5) {width: 25% !important;height:37vw !important}
ul.filmf li:nth-of-type(5) {left:25% !important}
ul.filmf li:nth-of-type(1), ul.filmf li:nth-of-type(6) {height:30vw !important}

ul.skivf {height:56vw !important}
ul.skivf li:nth-of-type(2), ul.skivf li:nth-of-type(3), ul.skivf li:nth-of-type(4), ul.skivf li:nth-of-type(5) {width: 25% !important;height:25vw !important;max-height: 281.25px !important;}
ul.skivf li:nth-of-type(5) {left:25% !important}
ul.skivf li:nth-of-type(1), ul.skivf li:nth-of-type(6) {height:31vw !important;max-height: 348.75px !important}

ul.spelf {height:59vw !important}
ul.spelf li:nth-of-type(2), ul.spelf li:nth-of-type(3), ul.spelf li:nth-of-type(4), ul.spelf li:nth-of-type(5) {width: 25% !important;height:27vw !important;max-height: 288.30px !important;}
ul.spelf li:nth-of-type(5) {left:25% !important}
ul.spelf li:nth-of-type(1), ul.spelf li:nth-of-type(6) {height:32vw !important;max-height: 341.69px !important}

div.gametop span#year {margin-right:0 !important}

div#modules, div#detailswrapper {display:block; width: calc(100% - 300px);float:left;}

/* Ads */
div.stickyad {float: right; margin-top:30px;display: block;position: sticky;top: 0;}

@media only screen and (max-height: 1450px) {
  div#full6001 {display:block}
  div#full6002 {display:block}
  div#full250 {display:none}
}
@media only screen and (max-height: 1200px) {
  div#full6001 {display:block}
  div#full6002 {display:none}
  div#full250 {display:block}
}
@media only screen and (max-height: 850px) {
  div#full6001 {display:block}
  div#full6002 {display:none}
  div#full250 {display:none}
}
@media only screen and (max-height: 600px) {
  div#full6001 {display:none}
  div#full6002 {display:none}
  div#full250 {display:block}
}

@media only screen and (max-height: 1750px) {
  div#rec6001 {display:block}
  div#rec6002 {display:block}
  div#rec250 {display:none}
}
@media only screen and (max-height: 1500px) {
  div#rec6001 {display:block}
  div#rec6002 {display:none}
  div#rec250 {display:block}
}
@media only screen and (max-height: 1150px) {
  div#rec6001 {display:block}
  div#rec6002 {display:none}
  div#rec250 {display:none}
}
@media only screen and (max-height: 900px) {
  div#rec6001 {display:none}
  div#rec6002 {display:none}
  div#rec250 {display:block}
}

@media only screen and (max-height: 1510px) {
  div#list6001 {display:block}
  div#list6002 {display:block}
  div#list250 {display:none}
}
@media only screen and (max-height: 1260px) {
  div#list6001 {display:block}
  div#list6002 {display:none}
  div#list250 {display:block}
}
@media only screen and (max-height: 910px) {
  div#list6001 {display:block}
  div#list6002 {display:none}
  div#list250 {display:none}
}
@media only screen and (max-height: 660px) {
  div#list6001 {display:none}
  div#list6002 {display:none}
  div#list250 {display:block}
}










iframe > html {text-align:center !important}
div#fulladwidth {width:300px}
div#ipadwidth {width:160px;display:none}
div.recad {top: calc(13vw + 106px) !important;margin-top:40px}
div.recad#ipadwidth {margin-top:15px}
div.listad {top: 60px !important;margin-top:20px}

@media (hover: none) {
  * {transition: none}
  ul#start li a {background: radial-gradient(rgba(0,0,0,0.35),rgba(0,0,0,0.70))}
  ul#start li a h2, ul#start li a h1 {color:rgba(255,255,255,1.0);text-shadow: 1px 1px 2px #000}
  ul#start li a span.grade {background-color:rgba(var(--rgb), 1.0);color:rgba(255,255,255,1)}
  ul#list li a span.star, div.horizontal ul li a span.star, div.threefixed ul li a span.star, ul.favs li a span.star {color:rgba(242,176,30,1);}
  ul#list li a:hover, div.horizontal ul li a:hover, ul.favs li a:hover {background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.2),rgba(0,0,0,0.2),rgba(0,0,0,0.7),rgba(0,0,0,0.8))}
  ul#list li a:hover h3, div.horizontal ul li a:hover h3, ul.favs li a:hover h3 {color:rgba(255,255,255,1)}
  ul#list li a:hover span.star, div.horizontal ul li a:hover span.star, ul.favs li a:hover span.star {color:rgba(242,176,30,1);text-shadow:0px 1px 2px rgba(0,0,0,1)}
  ul#list li a:hover span.grade, div.horizontal ul li a:hover span.grade, ul.favs li a:hover span.grade {background-color:rgba(var(--rgb), 0.85);color:rgba(255,255,255,0.85);font-size:1.8rem;display:inline-block;float: none;}
  div.horizontal ul li a:hover span.year, ul#list li a:hover span.year {color:rgba(170,170,170,1)}
}

/* Bread text */
div.imageheader {height: 40vw;max-height: 50%;position:relative;width: 100%;text-align: center;background-size: cover;background-repeat: no-repeat;background-position: center center;}
div.imageheader h1 {margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-shadow: 1px 1px black;}
div#bread {width: 75%;margin: 0 auto;color: #fff;font-size: 1.6rem;padding-top:25px}
div#bread h2 {color:#cd0050;line-height:1.7;margin-top:1.6rem}
div#bread h3 {color:#cd0050;}
div#bread p {line-height:1.5;margin-bottom: 1rem;}
div#bread a {color:#cd0050}

/* Contact form */
form#contact input, form#contact textarea {border:0;outline:0;font-size:1.6rem;padding: 10px 10px;clear:both;width:100%;margin-top:20px;border-radius:3px}
form#contact textarea {height:200px}
form#contact input[type="submit"] {color:#fff;display:block;background:#cd0050;font-size:1.6rem;text-transform:uppercase;border-radius: 20px;border: none;padding: 3px 20px;width:auto;margin:20px auto}

/* Settings */
div.centerdiv {display:table;margin:auto;padding:0 20px;width:auto !important}
form.settings {margin:0 20px 0 20px;display:block;float: left;width:calc(100% / 3 - 40px)}
form.settings input[type="checkbox"] {clear:left;margin:6px 5px 0 20px;display:block;float:left}
form.settings label {clear:right;margin:0 0 0 0;display:block;float:left;line-height:25px}
form.settings input#losenord {font-size: 1.6rem;border: 0;padding: 3px 6px;margin: 5px 0 15px 0;clear: both;display: block;min-width: 200px;}
form.settings input[type="submit"] {display: inline-block;color: #fff;font-size: 1.6rem;text-transform: uppercase;border-radius: 20px;border: none;padding: 3px 20px;background: #cd0050;min-width: 200px;}

/* New member */
form#blimedlem input {border:0;outline:0;font-size:1.6rem;padding: 10px 10px;clear:both;width:100%;margin-top:20px;border-radius:3px}
form#blimedlem input[type="submit"], form#blimedlemfb input[type="submit"] {color:#fff;display:block;background:#cd0050;font-size:1.6rem;text-transform:uppercase;border-radius: 20px;border: none;padding: 3px 20px;width:auto;margin:20px auto}
form#blimedlem {max-width:500px;margin:0 auto}
form#blimedlemfb input[type="submit"] {background:#3b5998;margin-bottom: 27px;}
form#blimedlemfb {text-align: center;margin: 50px auto 20px auto;max-width:500px}
form#blimedlemfb span#eller {background:#181818}

/* Table with member levels */
table#nivaer {background:#373737;margin:20px auto;border-radius:5px;border-spacing: 0;text-align: center;color:#fff}
table#nivaer td {padding:8px;margin:0;border:none;width:100px}
table#nivaer td.ja {background:#4ec400;font-weight:bold}
table#nivaer td.nej {background:#c40050;font-weight:bold}
table#nivaer td.nja {background:#c47600;font-weight:bold}
table#nivaer tr:first-child td, table#nivaer tr:last-child td {font-size:2rem}
table#nivaer tr td:first-child{text-align:left;width:auto}
a#paypallink {color:#fff !important;display:block;background:#cd0050;font-size:1.6rem;text-transform:uppercase;border-radius: 20px;border: none;padding: 3px 20px;width: 18rem;margin:40px auto 20px auto}

/* Lists */
div#bread ul {list-style-type: circle}
div#bread ul li {margin-left:40px;line-height: 1.6}
div#bread ul.reviewer li {list-style:none}
div#bread ul.reviewer li a {color: #fff}
div#bread ul.reviewer li a:hover {text-decoration:underline}
div#bread ul.reviewer li span.inactiverevs a, div#bread ul.reviewer li span.inactiverevs {color:#b3b3b3}


/* Stjärnmärkr */
a.starrec {margin-top: 1.4rem;margin-right:15px}
a.starrec {color:#f2b01e;border-color:#f2b01e;display: inline-block;font-size: 1.6rem;text-transform: uppercase;border-radius: 20px;padding: 3px 20px;border: 1px solid;float:left;}
a.starsel {color:#181818 !important;background:#f2b01e !important;border: 1px solid;border-color:#f2b01e}

/* Create spotify playlist */
a#spotifyplaylist {display: block;width: 20rem;clear: both;margin: auto;}
div#spellistor {float: left;margin: 70px 50px 20px 50px;text-align: center;width: calc(100% - 100px);display:none}
div#spellistor a {margin:30px 20px}
ul.favs#skivor {margin-bottom:40px}

/* GDPR */
.qc-cmp-button {color: #181818 !important;}
.qc-cmp-button.qc-cmp-secondary-button {color: #777 !important;}
.qc-cmp-button.qc-cmp-button.qc-cmp-secondary-button:hover {color:#ffffff !important;}
.qc-cmp-ui a,.qc-cmp-ui .qc-cmp-alt-action {color: #fff !important;}
.qc-cmp-ui {background-color: #cd0050 !important;}
.qc-cmp-small-toggle.qc-cmp-toggle-on,
.qc-cmp-toggle.qc-cmp-toggle-on {background-color: #fff !important;border-color: #fff !important;}
a.qc-cmp-persistent-link {display:none !important}
.qc-cmp-button:hover, .qc-cmp-button.qc-cmp-button.qc-cmp-secondary-button:hover {background-color: black !important;color:white !important}


/* Ad */
div.adhor {text-align:center;padding: 30px 30px 0 30px !important;width: calc(100% - 60px);float:left}

/* Filterlista */
ul#filterbar {display:block;float:left;width:100%;background:#c0c0c0;position:sticky;top:0;font-size:2rem;;margin-top:-35px;z-index:100}
ul#filterbar > li {display:block;float:right;padding:13px 0;cursor:pointer}
ul#filterbar li#valj2 ul li {display:block;float:right;padding:0 0;cursor:pointer;margin-left:20px}
ul#filterbar li#valj2 span {display:none}
ul#filterbar > li:first-of-type {float:left;margin-left:20px;}
ul#filterbar > li:nth-of-type(2) {margin-right:50px;}
ul#filterbar li#sorttitel, ul#filterbar li#sortpop, ul#filterbar li#sortmc, ul#filterbar li#sortimdb, ul#filterbar li#sortbetyg, ul#filterbar li#sortdatum {display:none;}

ul#filter {display:none;float:left;position:absolute;z-index:300;clear:both;margin-top: calc(2rem - 7px);margin-left: -20px;width: 500px;background:#c0c0c0;padding-top:10px}
ul#filter > li {display:block;float:left;margin:0 20px 20px 20px;width: calc(50% - 0px);}
ul#filter > li.left {margin:0 0 20px 20px;width:calc(50% - 60px)}
ul#filter > li span {font-weight:bold}
ul#filter li ul {display:block;float:left;width:100%}
ul#filter li ul li {float:left;margin-left:4px;padding: 3px 6px;clear:both;}
ul#filter > li:last-of-type {width: 100%;text-align: center;background: #cd0050;margin: 0;color: #fff;padding: 20px 0;}

/* Stjärnmärkt */
ul#startabs {display: block;margin:0 auto;font-size:4rem;text-align:center;background-image:radial-gradient(rgba(0,0,0,0.3),rgba(0,0,0,1.0)), url(https://live.staticflickr.com/3682/9421427349_090b3ea9c8_k.jpg);background-size: cover;background-repeat: no-repeat;background-position: center center;padding-top:16rem;border-bottom: 2px solid #f2b01e}
ul#startabs li {display:inline-block;margin:8rem 2px -2px 2px;padding:6px 23px 12px 23px;border: 2px solid rgba(1,1,1,0);width:120px}
ul#startabs li a {color:#fff}
ul#startabs li#skivortab {background-image: url(https://api.kritiker.se/bilder/spotify_circle.png);background-repeat: no-repeat;background-position: 142px 7px;background-size: 19px 19px;}    
ul#startabs li.sel {border-top: 2px solid #f2b01e;border-right: 2px solid #f2b01e;border-left: 2px solid #f2b01e;border-bottom: 2px solid #181818;background: #181818;border-radius: 10px 10px 0 0;}
ul#startabs li.sel a {color:#f2b01e}
a#starheader {display: block;;width: 138px;margin-top: -18rem;float:none;position: absolute;left: calc(50% - 69px);color: #fff;background: #f2b01e;border: none;}

/* Lista premium */
div#premiumfl {z-index:300;}

/* Kategorimoduler */
ul.kategorimodul {display: block;float: left;clear: both;width:100%}
ul.kategorimodul li a {display: flex;float: left;width:100%;height:100%;display: -webkit-flexbox;display: -ms-flexbox;display: -webkit-flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;justify-content: center;}
ul.kategorimodul h2 {font-size:3rem;text-align:center;padding:20px;text-shadow:1px 1px black;line-height:1.1}

ul.threecols li {margin-right:10px;width:calc((100% - 20px) / 3);display:block;float:left;height: calc(33.333vw/1.5);background-size: cover;background-repeat: no-repeat;background-position: center center}
ul.threecols li:nth-of-type(3), ul.threecols li:nth-of-type(6) {margin-right:0}
ul.threecols li:nth-of-type(-n+3) {margin-bottom:10px}

ul.fourcols li {margin-right:10px;width:calc((100% - 30px) / 4);display:block;float:left;height: calc(33.333vw/1.5);background-size: cover;background-repeat: no-repeat;background-position: center center}
ul.fourcols li:nth-of-type(4) {margin-right:0}

ul.twocols li {width:calc((100% - 10px) / 2);display:block;float:left;height: calc(33.333vw/2);background-size: cover;background-repeat: no-repeat;background-position: center center}
ul.twocols li:nth-of-type(1) {margin-right:10px}


/* Footer */
@media only screen and (max-width: 1100px) {
  div#footer {font-size:1.4rem}
}

@media only screen and (max-width: 1000px) {
  div#footer {font-size:1.3rem}
}

@media only screen and (max-width: 950px) {
  div#footer {font-size:1.2rem}
}


/* iPad */
@media only screen and (max-width: 900px) {
  
  /* Navigation */
  ul#nav > li {width:100%;clear:both}
  ul#nav > li:nth-of-type(n+2):nth-of-type(-n+6) {display:none;}
  ul#nav > li:nth-of-type(n+2):nth-of-type(-n+5) {border-bottom: 1px solid #c0c0c0}
  ul#nav > li:nth-of-type(n+2):nth-of-type(-n+6) a {color:#cd0050;background:rgb(238, 238, 238);}
  ul#nav > li:nth-of-type(1) {text-align:center;height: 57px;}
  ul#nav > li:nth-of-type(1) a {display:inline-block}
  ul#nav > li:nth-of-type(7) {position:absolute;right:0;padding-top:0px;padding-right:0px;height:57px;z-index:200;width: auto;left: 0;padding-left: calc(100% - 64px);pointer-events: none;}
  ul#nav > li:nth-of-type(7) > a {padding:0;margin:0;width:100%;height:100%;text-align:center;pointer-events: auto;}
  ul#nav > li:nth-of-type(7) > a span {font-size:3.3rem;display:inline-block;padding-top:8px;padding-right:4px}
  ul#nav > li:nth-of-type(8) {position:absolute;left:0;right:0;padding-left: calc(100% - 184px);padding-right:66px;width:auto;pointer-events: none}
  ul#nav > li:nth-of-type(8) a {pointer-events: auto}
  ul#minmeny {position:absolute;left:0;right:0}
  ul#minmeny li {border-bottom: 1px solid #c0c0c0}
  ul#minmeny li:first-of-type {padding-top:0px}
  ul#minmeny li:last-of-type {padding-bottom:0px}
  ul#minmeny a {color:#cd0050 !important;padding:18px;display:block}
  ul#nav > li > a {display:block;padding:18px}
  ul#nav > li:hover a {background:none}
  div#sok form {pointer-events: auto}
  div#sok form input[type="submit"] {display:none}
  div#sok form span {display:none}
  div#sok form input[type="text"] {width: 100%}
  div#sok {width:100%}
  
  img#hamburger {display:block;padding: 16px;width: 22px;top:0px;left:0px;position:absolute;cursor:pointer;z-index:200}
  
  a.starrec {margin-top: 1.0rem;margin-right:12px;font-size: 1.3rem;text-transform: uppercase;border-radius: 17px;padding: 3px 17px;}
  div.twofixed a, a.spotifyplay, a.netflixplay, a.hboplay, a.viaplayplay, a.cmoreplay, a.svtplay, a.fel, a.huluplay, a.atvplay, a.primeplay, a.dplusplay {margin-top: 1.0rem;margin-right:12px;font-size:1.3rem;border-radius: 17px;padding: 4px 12px;}
  a.fel {margin-top: 36px;margin-right:0;}
  a.fel:first-of-type{margin-left: 15px;margin-right:10px}
  
  ul#nav {pointer-events:none}
  ul#nav > li img {height: 25px;}
  ul#nav {display:block;float:left;width:100%;font-size:1.6rem;text-transform:uppercase;;z-index:500;position:relative;background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.6),rgba(0,0,0,0));color:white;}
  ul#nav > li {display:block;float:left;z-index:100;transition: background .35s ease-out;pointer-events:auto;}  
  ul#nav > li:nth-of-type(1) > a {padding: 17px 25px}
  ul#nav > li:nth-of-type(8) {float:right;}
  ul#nav > li:nth-of-type(8) > span {font-size:2.1rem}
  ul#nav > li:nth-of-type(7) {float:right;}
  
  /* Min meny */
  ul#minmeny li {display:block}
  
  /* Feature startsidan */
  ul#start h1 {font-size:2.5rem;margin: 0.2rem 1rem 1rem 1rem;line-height:1.1;}
  ul#start h2 {font-size:1.6rem;margin: 1rem 1rem 0 1rem;}
  ul.filmf h2 {display:none}
  
  
  
  /* Vertikal lista */
  ul#list, ul.favs {width:calc(100vw - 180px) !important;margin-top:10px;padding:0px 0px 0 10px}

  ul#list li, ul.favs li {height:279px;width:186px;margin:0 10px 10px 0}
  ul#list li.coverskivor, ul.favs li.coverskivor {width:186px;height:186px}
  ul#list li.coverspel, ul.favs li.coverspel {width:186px;height:186px;}
  
  ul#list li a h3, div.horizontal ul li a h3, div.threefixed ul li a h3, ul.favs li a h3 {bottom:10px;left:10px;right:10px;font-size:2rem;}
  ul#list li span.artist, div.horizontal ul li span.artist, div.threefixed ul li span.artist, ul.favs li span.artist  {font-size:1.5rem;}
  ul li span.year  {font-size:1.3rem;}
  
  /* Horisontell lista */
  div.horizontal h1, h1.outside, div.twofixed h1, div.threefixed h1 {margin:20px 15px 10px 10px;font-size:2.5rem}
  div.horizontal span.prev, div.horizontal span.next {padding:8px 20px 0 0}
  a.all {top:21px;font-size:1.3rem;border-radius: 17px;padding: 4px 12px}
  div.horizontal ul {padding:0px 0px 0px 10px;}
  div.horizontal ul li:last-of-type{padding-right:0;margin-right:0}
  div.horizontal {height:360px;}
  div.horizontal div.start, div.horizontal div.end {top:-360px;}
  
  div.horizontal.square ul li, div.horizontal.gameposter ul li {width:225px;height:225px}
  div.horizontal.square, div.horizontal.gameposter {height:285px}
  div#sokres div.horizontal.square div.start, div#sokres div.horizontal.square div.end, div#sokres div.horizontal.gameposter div.start, div#sokres div.horizontal.gameposter div.end {height:225px;margin-top:-225px !important;}
  
  div.horizontal.gameposter div.start, div.horizontal.gameposter div.end, div.horizontal.square div.start, div.horizontal.square div.end {height: 225px;top: -285px;}
  
  ul#list li span.artist, div.horizontal ul li span.artist, div.threefixed ul li span.artist, ul.favs li span.artist  {font-size:1.4rem;}
  ul#list li a h3, div.horizontal ul li a h3, div.threefixed ul li a h3, ul.favs li a h3 {font-size:1.8rem;}
  ul li span.year  {font-size:1.2rem;}
  
  div.horizontal.game ul li, div.horizontal.landscapecover ul li, div.horizontal.albumcover ul li {width:520px;}
  
  /* Två fixed */
  div.twofixed ul {padding:0 25px;width:calc(100% - 50px);}
  div.twofixed ul li {width:calc(50% - 12.5px);height:calc(50vw - 12.5px);}
  div.twofixed ul li div {bottom:25px}
  div.twofixed h3 {font-size: 3rem;margin:0 25px;text-shadow: 1px 1px 2px black}
  div.twofixed h4 {font-size: 2rem;margin:10px 25px 20px 25px;text-shadow: 1px 1px 2px black}
  
  /* Full landscape */
  div.fulllandscape {height: calc(100vw*9/16);}
  div.fulllandscape a h4 {font-size: 1.6rem;}
  div.fulllandscape a h3 {font-size: 3rem}
  
  /* Tre fixed */
  div.threefixed ul {padding:0;width:100%;}
  div.threefixed ul li {width:33.33333333333vw;height:33.33333333333vw;margin-right:0}
  div.threefixed ul li h3 {font-size:2.6rem !important}
  
  /* Footer */
  div#footer {float:left;width:calc(100% - 160px);padding:20px 10px;font-size:1.28rem;color:#fff;margin-top:0px;}
  div#footer img {margin-bottom:20px}
  
  /* Sökresultat */
  div#sokres h1 {margin:20px 0 20px 25px;}
  div.laddar.left {float:left;clear:both;margin-left:25px}
  div#sokres div.horizontal span.prev, div#sokres div.horizontal span.next {padding-top: 13px}
  
  
  
  /* spel */
  span#platform img {height: 2.3rem !important;margin-top: 0.2rem;margin-right: 0;margin-left: 0.5rem;}
  span#platform {margin-left:0px}
  div.fulltrailer#phonetrailer {height: calc(100vw*9/19.5)}
  div.reviewtrailer {display:none}
  
  div#fulladwidth {display:none}
  div#ipadwidth {display:block}
  div#modules, div#detailswrapper {width:calc(100% - 160px)}
  
  div.recad {top: calc(13vw + 70px) !important;margin-top:40px}


}

/* iPhone */
@media only screen and (max-width: 415px)  {
  
  h1 {font-size:5.6vw;color:white}
  div#sok form {width:80vw;margin:20px auto}
  
  ul#nav > li:nth-of-type(8) > a {width:0px;height:57px;background:none;padding:0;font-size:0}
  ul#minmeny {background:#cd0050 !important;;top:340px;}
  ul#minmeny a {color:rgb(238, 238, 238) !important;}
  
  ul#start li a {width:100%;height:100%;display:block;float:left;position:relative;}
  
  /* Feature startsidan */
  ul#start {display:block;float:left;width:100%;margin-top:-100px;height:auto;max-height:none}
  ul#start li {position:relative;background-size:cover;background-position:center center;height:auto;float:left;left:inherit !important;right:inherit}
  ul#start li:nth-of-type(1), ul#start li:nth-of-type(6) {width:100%;max-height:none;background-position:top center;height:46vw}
  ul#start li:nth-of-type(2), ul#start li:nth-of-type(4) {width:60%;max-height:none;height:60vw}
  ul#start li:nth-of-type(3), ul#start li:nth-of-type(5) {width:40%;max-height:none;height:60vw}
  ul#start li:nth-of-type(4) {float:right}
  ul#start h2 {font-size:3vw;}
  ul#start h1 {font-size:5.6vw}
  
  ul.filmf {display:block;float:left;width:100%;margin-top:-100px;height:auto !important;max-height:none}
  ul.filmf li:nth-of-type(1), ul.filmf li:nth-of-type(6) {max-height:none !important;height:46vw !important}
  ul.filmf li:nth-of-type(2), ul.filmf li:nth-of-type(5) {display:none}
  ul.filmf li:nth-of-type(1), ul.filmf li:nth-of-type(6) {width:100vw !important}
  ul.filmf li:nth-of-type(3), ul.filmf li:nth-of-type(4) {width:50vw !important;height:50vw  !important}
  ul.filmf h2 {display:none}
  
  ul.skivf {display:block;float:left;width:100%;margin-top:-100px;height:auto !important;max-height:none}
  ul.skivf li:nth-of-type(1), ul.skivf li:nth-of-type(6) {max-height:none !important;height:56vw !important}
  ul.skivf li:nth-of-type(2), ul.skivf li:nth-of-type(5) {display:none}
  ul.skivf li:nth-of-type(1), ul.skivf li:nth-of-type(6) {width:100vw !important}
  ul.skivf li:nth-of-type(3), ul.skivf li:nth-of-type(4) {width:50vw !important;height:50vw  !important}
  
  ul.spelf {display:block;float:left;width:100%;margin-top:-100px;height:auto !important;max-height:none}
  ul.spelf li:nth-of-type(1), ul.spelf li:nth-of-type(6) {max-height:none !important;height:56vw !important}
  ul.spelf li:nth-of-type(3), ul.spelf li:nth-of-type(5) {display:none}
  ul.spelf li:nth-of-type(1), ul.spelf li:nth-of-type(6) {width:100vw !important}
  ul.spelf li:nth-of-type(2), ul.spelf li:nth-of-type(4) {width:50vw !important;height:50vw  !important}
  
  /* Horisontell lista */
  div.horizontal {color:white;width:100%;float:left;height:inherit !important;position:relative;z-index:100}
  div.horizontal h1, h1.outside, div.twofixed h1, div.threefixed h1 {margin:4.80vw 2.666666667vw 3.2vw 2.666666667vw;float:left;max-width: 72vw;}
  h1.outside#filmer {margin-top:-5vw}
  div.horizontal span.prev, div.horizontal span.next {display:none}
  a.all {font-size:3.2vw;border-radius: 2.666666667vw;padding: 0.53333333vw 1.6vw;right: 10px;top: 26px;}
  div.horizontal ul {padding:0 2.666666667vw;height:auto}
  div.horizontal ul li {height:60vw;width:40vw;margin-right:2.666666667vw;}
  div.horizontal ul li:last-of-type {margin-right:-2.666666667vw;}
  div.horizontal div.end, div.horizontal div.start {height:60vw;position:relative;margin-top:-60vw;width:8vw;position:sticky}
  div.horizontal.square ul li {width:60vw;}
  div.horizontal.gameposter ul li {width:60vw;}
  div.horizontal.game ul li, div.horizontal.landscapecover ul li {width:80vw;height:54vw}
  div.horizontal.game div.cover, div.horizontal.landscapecover div.cover {width:32vw;height:48vw;}
  div.horizontal.landscapecover ul li a h3 {left:37.3333333vw}
  div.horizontal.game div.end, div.horizontal.landscapecover div.end, div.horizontal.game div.start, div.horizontal.landscapecover div.start {height:54vw;position:relative;margin-top:-54vw;width:8vw;position:sticky}
  div.horizontal.game, div.horizontal.landscapecover {height:auto}
  div.horizontal.game ul li a h3 {left:37.3333333vw}
  div.horizontal.albumcover div.cover {width:40vw;height:40vw;top:15vw;margin-left:2vw}
  div.horizontal.albumcover ul li a h3 {bottom: 2vw;left:44vw}
  div.horizontal.albumcover ul li {width:90vw}
  
  /* Vertikal lista */
  ul#list li a h3, div.horizontal ul li a h3, div.threefixed ul li a h3, ul.favs li a h3 {bottom:2.666666667vw;left:2.666666667vw;right:2.666666667vw;font-size:4.8vw;}
  ul li span.year  {font-size:3.066666667vw;}
  ul#list li span.artist, div.horizontal ul li span.artist, div.threefixed ul li span.artist, ul.favs li span.artist  {font-size:3.33333333vw;}
  
  /* Full landscape */
  div.fulllandscape {height: calc(100vw*9/16);}
  div.fulllandscape a {bottom:2.666666667vw;left:2.666666667vw;}
  div.fulllandscape a h4 {font-size: 3.33333333vw;}
  div.fulllandscape a h3 {font-size: 4.8vw}
  
  /* Två fixed */
  div.twofixed ul {padding:0;width:100%}
  div.twofixed ul li {width:100%;height:77.333333333vw;background-position:center center;background-size:cover;position:relative}
  div.twofixed ul li:last-of-type {float:right}
  div.twofixed ul li div {position:absolute;bottom:10.66666667vw}
  div.twofixed h3 {font-size: 5.6vw;margin:1.8666666667vw 8vw;text-shadow: 1px 1px 2px black;text-transform:uppercase}
  div.twofixed h4 {font-size: 4.8vw;margin:0 8vw 3.466666667vw 8vw;text-shadow: 1px 1px 2px black}
  a.starrec, div.twofixed a, a.spotifyplay, a#spotifyplaylist, a.spotifyplayplaylist, a.netflixplay, a.hboplay, a.viaplayplay, a.cmoreplay, a.svtplay, a.fel, a.primeplay, a.atvplay, a.huluplay, a.dplusplay {font-size:3.4vw;border-radius: 2.7vw;padding: 0.8vw 1.8vw;height:4.2vw;line-height:4.2vw;text-align:center}
  
  /* Tre fixed */
  div.threefixed ul {padding:0;width:100%}
  div.threefixed ul li {width:33.3333333333333%;height:calc(100vw / 3);margin:0}
  div.threefixed ul li a {background-image: none}
  div.threefixed ul li a div {display:none}
  div.threefixed ul li a span {display:none}
  
  /* Stjärnmärkr */
  a.starrec {margin-top: 3.5vw;margin-right:4vw}
  
  a.fel {margin: 6vw 2.7vw 0 0 !important;}
  a.fel:nth-of-type(n+3) {display:block}
  a.fel:nth-of-type(-n+2) {display:none}
  h1#h1revs {margin-top: 6vw !important}
  
  /* Årsbästa */
  form#yearform input {background:none;pointer-events:none;display: inline-block;width: 50vw;font-size:22vw;line-height:28vw}
  form#yearform {display: block;float: left;position: static;max-height: none;pointer-events: auto;height: auto;}
  form#yearform span {display: block;color:#c0c0c0;line-height:26vw;height:26vw;font-size:14vw;width: 25vw;float: left;text-align: center;}
  form#yearform span:last-of-type {float:right;}
  
  /* Bread text */
  div.imageheader {height: 60vw;}
  div.imageheader h1 {font-size:5.6vw}
  div#bread {margin: 0 auto;color: #fff;font-size: 4.3vw;padding-top:0vw;width:90vw;max-width:90vw}
  div#bread h2 {color:#cd0050;line-height:1.7;margin-top:4vw;font-size:5.6vw}
  div#bread p {line-height:1.5;margin-bottom: 1rem;}
  div#bread a {color:#cd0050}
  div#bread ul.reviewer li {margin-left:0px;}
  div#bread ul.reviewer li span {font-size:4.3vw;margin-bottom: 1vw !important;
    display: block;}
  div#bread ul.reviewer li h3 {margin-top:}
  
  /* Settings */
  div.centerdiv {padding:0 0;width:auto !important}
  form.settings {clear:both;margin:0;width:100%}
  form.settings input#losenord {font-size: 4.8vw;width:63vw}
  form.settings input[type="submit"] {font-size: 4.8vw;width:63vw}
  input[type="submit"] {-webkit-appearance: none;}
  
  /* Filterlista */
  ul#filterbar {font-size:4.8vw;margin-top:-35px;z-index:100}
  ul#filterbar ul#sortera {display:none;margin-top: calc(2rem + 7px);font-size: 4.2vw;position:absolute;z-index:300;padding-top:10px;background: #c0c0c0;right:0;padding-bottom:11px}
  ul#filterbar ul#sortera li {display:block;clear:both;float:right;padding: 0.7vw 1vw 0.7vw 1vw !important;margin-right:20px}
  ul#filterbar li span#valdlistasortera {display:block;float:right} 
  ul#filterbar > li {display:block;float:right;padding:13px 0;cursor:pointer}
  ul#filterbar > li:first-of-type {float:left;margin-left:50px}
  ul#filterbar > li:nth-of-type(2) {margin-right:20px}
  ul#filterbar > li:nth-of-type(n+1) {margin-left:20px}
  ul#filterbar li#sorttitel, ul#filterbar li#sortpop, ul#filterbar li#sortmc, ul#filterbar li#sortimdb, ul#filterbar li#sortbetyg, ul#filterbar li#sortdatum {display:none;}
  ul#filterbar li span#valdlista {display:block;float:left}
  ul#filter {margin-top: calc(2rem + 7px);width: 100vw;font-size:4.2vw;display:none}
  ul#filter > li {margin:0 4vw 2vw 4vw;width:50%}
  ul#filter > li.left {margin:0 0 20px 20px;width:calc(50% - 60px)}
  ul#filter li ul {display:block;float:left;width:100%}
  ul#filter li ul li {padding: 0.7vw 1vw 0.7vw 1vw;margin-left:1vw}
  
  /* Vertikal lista */
  ul#list, ul.favs {width:100% !important;margin-top:0vw;padding:0}
  ul#list li, ul.favs li {height:68.25vw;width:45.5vw;margin:0 0 3vw 3vw;box-shadow:#333 0px 0px 4vw}
  ul#list li.coverskivor, ul.favs li.coverskivor {width:45.5vw;height:45.5vw}
  ul#list li.coverspel, ul.favs li.coverspel {width:45.5vw;height:45.5vw}
  ul#list li a, div.horizontal ul li a, div.threefixed ul li a, ul.favs li a {width:100.1%;height:100.1%;transition: none}
  ul#list li a h3, div.horizontal ul li a h3, div.threefixed ul li a h3, ul.favs li a h3 {font-size:4.8vw;transition: none;word-break: break-word}
  ul#list li span.artist, div.horizontal ul li span.artist, div.threefixed ul li span.artist, ul.favs li span.artist  {font-size:3.5vw;}
  ul#list li a span.star, div.horizontal ul li a span.star, div.threefixed ul li a span.star, ul.favs li a span.star {transition: none}
  ul#list li a span.grade, div.horizontal ul li a span.grade, ul.favs li a span.grade {transition: none}
  ul li span.year  {font-size:3.5vw;transition: none;}
  
  /* Dialog */
  div.dialog {border-radius:4vw;padding:4vw 6vw 5vw 6vw}
  div.dialog h3 {font-size:8vw}
  div.dialog p {font-size:3.5vw;margin-bottom:2vw}
  div.dialog a#closedialog {font-size: 15vw;margin: 0 -3vw 0 0;}
  div.dialog form {margin-top:22px}
  div.dialog form input[type="email"], div.dialog form input[type="password"] {padding: 1vw 2vw;font-size: 5vw;margin: 5vw 0;min-width:250px}
  div.dialog form input[type="submit"], div.dialog a#mem1, div.dialog a#mem2 {font-size:4.3vw;border-radius: 5vw;padding: 1vw 5vw;}

  div.dialog#premiumf, div.dialog#memberf, div.dialog#premiumfl {width:70vw}
  div.dialog#premiumf h3, div.dialog#memberf h3, div.dialog#premiumfl h3 {margin-bottom:4vw}
  div.dialog#premiumf p, div.dialog#premiumfl p, div.dialog#memberf p, div.dialog#newreviewdialog,  div.dialog#errordialog {font-size:4.5vw}
  div.dialog a#mem1, div.dialog a#mem2 {margin-top:3vw}
  div.dialog a#mem2 {min-width:56vw}
  
  div.dialog#newreviewdialog p, newreviewdialog#errordialog p {margin:2vw 0;}
  div.dialog#newreviewdialog p:first-of-type, newreviewdialog#errordialog p:first-of-type {margin-top:3vw}
  div.dialog#newreviewdialog form, div.dialog#errordialog form {width:80vw;margin: 1vw auto 0 auto}
  div.dialog#newreviewdialog form label, div.dialog#errordialog form label {width:100%;margin:3vw 0 1vw 0}
  div.dialog#newreviewdialog form input[type="text"], div.dialog#newreviewdialog form input[type="number"], div.dialog#newreviewdialog form select, div.dialog#newreviewdialog form input[type="url"] {width:100%;padding: 1vw 2vw;font-size: 4.5vw;border-radius:1.5vw}
  div.dialog#errordialog form input[type="text"], div.dialog#errordialog form input[type="email"], div.dialog#errordialog form select, div.dialog#errordialog form textarea {width:100%;padding: 1vw 2vw;font-size: 4.5vw;border-radius:1.5vw;}
  div.dialog#newreviewdialog form input[type="text"], div.dialog#newreviewdialog form input[type="number"], div.dialog#errordialog form textarea {margin-bottom:7vw}

  /* Login */
  a#glomt {font-size: 3.8vw;margin: 2vw;}
  span#eller {font-size: 4.8vw;padding: 2.4vw;}
  div#blimedlem {margin: 8vw -6vw -5vw -6vw;padding: 4vw 0 6vw 0;border-radius: 0 0 4vw 4vw}
  div#blimedlem a {font-size:4.8vw;margin-top: 2vw;}
  
  /* Table with member levels */
  table#nivaer {margin:4vw auto;border-radius:2vw;font-size:3.5vw}
  table#nivaer td {padding:8px;width:100px}
  table#nivaer tr:first-child td, table#nivaer tr:last-child td {font-size:3.2vw;width:auto;text-transform:uppercase}
  a#paypallink {font-size:4vw;border-radius: 4vw;padding: 1vw 4vw;width: 54vw;margin:7vw auto 7vw auto;text-align:center}
  
    /* Stjärnmärkt */
  ul#startabs {font-size:5.6vw;padding-top:0vw;}
  ul#startabs li {margin:7vw 2px -2px 2px;padding:1vw 1vw 2vw 1vw;width:calc((100vw / 4) - 20px)}
  ul#startabs li#skivortab {background-position: 142px 7px;background-size: 19px 19px;}    
  a#starheader {width: 34vw;margin-top: -24vw;left: calc(50% - 17vw);text-align:center}


  /* Sökresultat */
  div#sokres {margin-top: calc(2rem + 71px);padding-bottom:50px;top:58px;}
  div#sokres h1 {margin:40px 0 20px 50px;}
  
  
  /* Sökresultat */
  div#sokres {margin-top:84px;padding-bottom:3vw;}
  div#sokres h1 {margin:6vw 2vw 3vw 3vw;font-size:6vw}
  div#sokres div.horizontal div.start {margin-top:-60vw;}
  div#sokres div.horizontal div.end {margin-top:-60vw;}
  div#sokres div.horizontal span.prev, div#sokres div.horizontal span.next {padding-top: 3vw;display:block;padding-right:6vw}
  div#sokres h1#nores {margin-top:8vw;}

  /* Footer */
  div#footer {width:calc(100% - 3vw);padding:4vw 1.5vw;font-size:4.266666667vw;margin-top:5.333333333vw;}
  div#footer img {width:44vw;margin-bottom:7vw}
  div#footer ul {width:calc(50% - 1.5vw);margin-left:1.5vw;margin-top:2vw}
  div#footer ul li {padding:1.33333333vw 0;margin-top:1vw}
  div#footer ul:first-of-type {display:none}
  div#copy {font-size:4.2666667vw;line-height:13.33333333vw}
   
  /* Kategorimoduler */
  ul.kategorimodul h2 {font-size:5.6vw;padding:3vw;}
  
  ul.threecols li, ul.fourcols li {width:calc((100% - 5px) / 2);height: calc(33.333vw/1.5);}
  ul.threecols li:nth-of-type(2), ul.threecols li:nth-of-type(4), ul.threecols li:nth-of-type(6) {margin-right:0}
  ul.threecols li:nth-of-type(1), ul.threecols li:nth-of-type(3), ul.threecols li:nth-of-type(5) {margin-right:5px  }
  ul.threecols li:nth-of-type(-n+4) {margin-bottom:5px}
  ul.threecols.fullwidthmobile li {width:100%;margin-bottom:0px;height:calc(33.333vw/0.6)}
  
  ul.fourcols li:nth-of-type(2), ul.fourcols li:nth-of-type(4) {margin-right:0 !important}
  ul.fourcols li:nth-of-type(1), ul.fourcols li:nth-of-type(3) {margin-right:5px !important}
  ul.fourcols li:nth-of-type(-n+2) {margin-bottom:5px}
  
  div#fulladwidth {display:none}
  div#ipadwidth {display:none}
  div#modules, div#detailswrapper {width:100%}
}