* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #c7c9cc;
}

html,
body {
    height: 100%;
    width: 100%;
    background: #0e1c2a;
    color: #f5f5f5;
    text-align: center;
}

body {
    line-height: 1.1;
    font: 1rem sans-serif;
}

section,
main,
aside,
footer {
    padding: 0 1rem 1rem 1rem;
}

#layout {
    text-align: left;
    margin: 0 auto;
    position: relative;
}

.content {
    max-width: calc(1450px - 1rem);
    margin: 0 auto;
}

header {
    display: block;
    position: sticky;
    left: 0;
    top: 0;
    background: #0a131e;
border-bottom: 1px solid #172130;
    padding: 1rem;
    z-index: 1000;
    min-height: 45px;
}

header h1 {
    float: left;
    padding: 0.8rem 0 0 0.5rem;
    letter-spacing: 0;
}

header h1 a {
    color: #c68e39;
}

header h1 span {
color: #7b899d;
}

header button {
    display: none;
    background: #0e1c2a;
    border: 1px solid #1c334a;
    padding: 0 0.5rem;
    color: #fff;
    font-size: 2rem;
    border-radius: 0.5rem;
    float: right;
margin-right: 0.5rem;
    margin-top: 0.35rem;
}

header nav {
    text-align: right;
    padding: 0.25rem 0.5rem 0 0.5rem;
    font-size: 0.9rem;
}

header li {
    margin-left: 1rem;
}

section.intro {
    text-align: center;
    padding: 10rem 5%;
    background: url('tausta.jpg') no-repeat 50% 100%;
    background-size: 100% auto;
    min-height: 600px;
}

section.intro h2 {
    font-size: 4rem;
    max-width: 640px;
    margin: 0 auto;
}

section.intro p {
font-size: 0.9rem;
    max-width: 640px;
    margin: 0 auto;
}

section.intro div p {
font-size: 1.25rem;
}

section.intro li {
    margin: 0.5rem;
}

section.text,
main.text {
    background: #0a121f;
    padding: 5rem 5%;
}

section.text article,
main.text article {
    max-width: calc(1450px - 1rem);
    margin: 0 auto;
}

section.text article {
max-width: 640px;
}

section.text h2,
section.text h3,
section.text h4,
section.text h5,
section.text h6,
main.text h1,
main.text h2,
main.text h3,
main.text h4,
main.text h5,
main.text h6 {
    font-size: 3rem;
}

main.text h3,
main.text h4 {
font-size: 2rem;
}

main.text h5,
main.text h6,
dt {
font-size: 1.5rem;
}

section.text p,
section.text ul,
section.text ol,
section.text dl,
main.text p,
main.text ul,
main.text ol,
main.text dl {
color: #7b899d;
}

section.text ul,
section.text ol,
main.text ul,
main.text ol {
padding-left: 1.1rem;
}

h5#faq {
margin-top: 3rem;
padding-left: 1.5rem;
background: url('question.svg') no-repeat 0 0.25rem;
background-size: 15px auto;
}

details:last-of-type {
margin-bottom: 4rem;
}

details {
border:	1px solid #242f41;
margin-bottom: 1rem;
padding: 0.5rem;
border-radius: 0.5rem;
}

summary {
cursor: pointer;
color: #d9e6e4;
font: 1rem sans;
padding: 0.5rem;
}

summary:hover {
color: snow;
}

details p {
padding: 1rem;
}

.clearfix {
    display: block;
    clear: both;
}

img {
    width: auto;
    height: auto;
    max-width: 100%;
}

article.listing {
    text-align: center;
    padding: 5rem 0;
    margin: 0 auto;
    max-width: 1450px;
    counter-reset: casinos 1;
}

article.listing h3 {
    font-size: 2.5rem;
    padding-bottom: 4rem;
}

nav ul,
form ul {
    list-style: none;
    padding: 0;
}

nav li,
nav a {
    display: inline-block;
}

nav a {
color: #7b899d;
font-weight: 600;
padding: 0.25rem;
}

.cta a {
    background-color: #d08c25;
background-image: url('tahti.svg');
background-repeat: no-repeat;
background-size: 15px auto;
background-position: 1rem 50%;
    border-radius: 0.5rem;
    color: #000;
    display: inline-block;
    padding: 0.75rem 1.25rem 0.75rem 2.25rem;
    border: 1px solid #cb9c25;
font: bold 1.1rem sans;
}

.cta a:hover,
.cta a:focus,
.cta a:active {
    background-color: #dfac29;
    border-color: #dfac29;
box-shadow: 0 0 1rem #dfa54b;
}

.cta.hollow a {
    background-color: transparent;
    color: #cb9c25;
}

.cta.hollow:hover a,
.cta.hollow:focus a,
.cta.hollow.active a {
    color: #dfac29;
}

.cta.visit a {
background-image: url('ponnahdus.svg');
color: #d08c25;
}

article.casino {
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 2px - 3rem);
    border: 1px solid #242f41;
    background: #111c2c;
    padding: 1rem;
    min-height: 100px;
    border-radius: 0.5rem;
    margin: 0 1rem 1rem 0;
    max-width: 430px;
    text-align: left;
    counter-increment: casinos;
}

article.casino:nth-of-type(3n),
article.casino:last-of-type {
    margin-right: 0;
}

main#single.text {
padding-top: 2rem;
padding-bottom: 2rem;
}

main#single article.container {
max-width: calc(1050px - 2rem);
padding-right: 400px;
margin: 0 auto;
position: relative;
}

main#single article.container div.main {
position: relative;
}

main#single article.container div.main,
main#single article.container div.sidebar,
main#single article.others {
max-width: calc(1000px - 3rem - 2px);
padding: 1.5rem;
border-radius: 0.5rem;
background: #111c2c;
border: 1px solid #242f41;
}

main#single article.container div.sidebar {
position: absolute;
top: 0;
right: 0;
max-width: calc(400px - 3rem - 2px);
}

main#single article.container div.sidebar h4 {
font-size: 1.5rem;
color: #e7e6e4;
}

div.sidebar dl:first-of-type {
text-align: center;
padding-bottom: 0.5rem;
}

div.sidebar dl:first-of-type dt {
color: #e7e6de;
}

div.sidebar dl:first-of-type dd {
color: #c68e39;
font-weight: 500;
font-size: 0.9rem;
padding: 0.5rem 0;
}

div.sidebar dl:first-of-type dd.cta a {
display: block;
}

div.sidebar hr {
display: block;
border: 0;
border-bottom: 1px solid #243042;
margin-bottom: 1rem;
}

main#single ul.facts {
list-style: none;
padding-left: 0;
padding-bottom: 1rem;
}

main#single ul.facts li {
padding-bottom: 1rem;
padding-left: 1.5rem;
background-repeat: no-repeat;
background-size: 15px auto;
background-position: 0 0.15rem;
}

main#single ul.facts li.person {
background-image: url('person.svg');
}

main#single ul.facts li.document {
background-image: url('document.svg');
}

main#single ul.facts li.headset {
background-image: url('headset.svg');
}

main#single ul.facts li.calendar {
background-image: url('calendar.svg');
}

main#single ul.facts li.wallet {
background-image: url('wallet.svg');
}

main#single ul.facts li.shield {
background-image: url('shield.svg');
}

main#single ul.facts li.operator {
background-image: url('operator.svg');
}

main#single ul.facts li.money {
background-image: url('money.svg');
}

main#single ul.facts li.gamepad {
background-image: url('gamepad.svg');
}

main#single ul.facts li.box {
background-image: url('box.svg');
}

main#single ul.facts li.clock {
background-image: url('clock.svg');
}

main#single div.info ul.facts li {
color: #e7e6e4;
font-weight: bold;
}

main#single ul.facts a:hover,
main#single ul.facts a:focus,
main#single ul.facts a:active {
text-decoration: underline;
}

main#single article.others {
margin: 1rem auto 0 auto;
max-width: calc(1402px - 2rem);
}

main#single article.others article {
display: inline-block;
vertical-align: top;
width: calc(33.33% - 2px - 2.75rem);
margin: 0 1rem 1rem 0 !important;
}

main#single article.others article:last-of-type {
margin-right: 0 !important;
}

main#single article.others img {
width: auto;
height: auto;
max-width: 60px;
}

main#single article.others div {
padding-left: 80px;
padding-bottom: 1rem;
position: relative;
}

main#single article.others p.logo {
padding: 0;
position: absolute;
left: 0;
top: 0;
}

main#single article.others h5 {
font-size: 1.25rem;
padding-bottom: 1rem;
}

main#single article.others mark {
background: none;
color: #e7e6e4;
font: bold 1.25rem sans;
padding: 0 0.25rem 0 1.25rem;
background: url('star.svg') no-repeat 0 0.15rem;
background-size: 15px auto;
}

main#single article.others h5 a {
color: #e7e6e4;
}

main#single article.others h5 a:hover,
main#single article.others h5 a:focus,
main#single article.others h5 a:active {
color: snow;
}

main#single article.others p:last-of-type {
padding-bottom: 0;
}

main#single article.others p:last-of-type a {
font-weight: bold;
color: #c68032;
display: inline-block;
padding-right: 1.25rem;
background: url('ponnahdus.svg') no-repeat 100% 0;
background-size: 13px auto;
}

main#single article.others p:last-of-type a:hover,
main#single article.others p:last-of-type a:focus,
main#single article.others p:last-of-type a:active {
text-decoration: underline;
}

ul.facts li:first-line {
color: #7b899d;
font-size: 0.9rem;
font-weight: normal;
}

ul.facts span {
display: none;
}

ul.facts b {
margin:	0.5rem 0.5rem 0 0;
font-size: 0.75rem;
font-weight: normal;
background: #182639;
display: inline-block;
padding: 0.15rem 0.5rem;
border-radius: 1rem;
border: 1px solid #243042;
}

div.sidebar p:has(small) {
text-align: center;
padding-bottom: 0;
}

main#single article.container div.intro {
padding-left: calc(102px + 2rem);
padding-right: 200px;
}

main#single article.container div.intro p.logo {
padding: 0;
position: absolute;
top: 1.5rem;
left: 1.5rem;
}

main#single article.container div.intro img {
border-radius: 0.5rem;
border: 1px solid #5a4a31;
}

main#single article.container dl#points {
position: absolute;
right: 2rem;
top: 1.5rem;
font-size: 0.8rem;
text-align: center;
}

dl#points dd:first-of-type {
display: block;
border:	5px solid #d08c25;
border-radius: 100%;
padding: 2rem 0;
}

dl#points dd:first-of-type span {
display: block;
font: bold 2rem sans;
color: #e7e6e4;
padding-bottom: 0.25rem;
}

dl#points dt {
font: bold 0.8rem sans-serif;
letter-spacing:	normal;
color: #7b898f;
padding: 1rem 0 0.5rem 0;
}

dl#points dd.updated {
background: url('kalenteri.svg') no-repeat 0 -0.1rem;
padding-left: 1.25rem;
}

dl#points meter {
margin-bottom: 0.5rem;
}

.listing article.casino:hover {
    border-color: #816c2d;
    box-shadow: 0 0 1rem #16212a;
}

article.listing article.casino h4 {
    color: #f5f5f5;
    position: relative;
    padding: 0 0 1.5rem 3rem;
}

article.listing article.casino h4::before {
    content: counter(casinos);
    font: bold 2.75rem sans;
    color: #cb9c25;
    display: inline-block;
    position: absolute;
    left: 0;
    top: -0.2rem;
    letter-spacing: -2px;
}

article.casino h2 {
line-height: 0.5;
padding: 1rem 0 2rem 0;
}

article.casino h4 span,
article.casino h2 span {
    color: #8a998f;
    font: 1rem sans-serif;
    letter-spacing: 0;
}

article.casino ul,
section.text ul {
    list-style: none;
    color: #8a99a8;
}

article.casino ul li,
section.text ul li {
    padding: 0 0 0.25rem 1.5rem;
    background: url('rasti.svg') no-repeat 0 0.25rem;
    background-size: 13px auto;
}

article.casino p.cta {
    padding-bottom: 0.5rem;
    text-align: center;
}

main#single article.casino p.cta {
padding-bottom: 2rem;
}

aside {
    text-align: center;
    background: #081421;
    padding: 5rem 1rem;
    border-top: 1px solid #172130;
    border-bottom: 1px solid #172130;
}

aside h2,
aside h3,
aside h4,
aside h5,
aside h6 {
    font-size: 2.5rem;
    max-width: 640px;
    margin: 0 auto;
}

aside p {
    color: #adb1b5;
}

input[type='email'],
input[type='search'] {
    background: #1c2e40;
    border: 3px solid #273849;
    border-radius: 0.5rem;
    margin-right: 0.5rem;
    color: #8a99a8;
    outline: none;
padding: 0.5rem;
}

input[type='email']:hover,
input[type='email']:focus,
input[type='email']:active,
input[type='search']:hover,
input[type='search']:focus,
input[type='search']:active {
    border-color: #695823;
    outline-color: #695823;
    color: #fff;
}

button {
    background: #6a5823;
    border: 3px solid #6a5823;
    outline: none;
    color: #0b1825;
    border-radius: 0.5rem;
padding: 0.5rem 1rem;
}

#search {
padding: 3rem 0 5rem 0;
}

#search label {
display: none;
}

footer {
    text-align: center;
    padding: 5rem 1rem;
    background: #0a121f;
    color: #808e9d;
}

footer p:first-of-type {
    padding-bottom: 2.5rem;
}

footer p mark {
    display: inline-block;
    padding: 1rem 0.75rem;
    border: 2px solid #cb9c25;
    color: #cb9c25;
    font: 1.25rem sans;
    background: none;
    border-radius: 100%;
}

footer p {
    max-width: 640px;
    margin: 0 auto;
}

footer ul {
    list-style: none;
    font-size: 0.9rem;
}

footer li,
footer li a {
    display: inline-block;
}

footer li {
    border-right: 1px solid #243445;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    margin-left: 1rem;
}

footer li:last-of-type {
    border-right: 0;
    margin-left: 0;
}

footer a:hover,
footer a:active,
footer a:focus {
    color: #cb9c27;
}

input[type='checkbox'] {
    vertical-align: middle;
}

input[type='checkbox'] + label {
    margin-left: 0.5rem;
}

input[type='checkbox'],
input[type='radio'],
input[type='file'],
input[type='date'],
input[type='number'],
button,
label,
select {
    cursor: pointer;
}

input[type='text'],
input[type='email'],
input[type='password'] {
    padding: 1rem;
}

input,
button,
select,
textarea,
label {
    font: 1rem sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
dt {
    font: bold 1.5rem serif;
    color: #c68e39;
    letter-spacing: -1px;
    line-height: 1;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
table {
    padding-bottom: 1.5rem;
}

hr {
    display: none;
}

iframe {
border:	0;
max-width: 640px;
margin: 0 auto;
height: 100%;
background: #081421;
border-radius: 0.5rem;
min-height: 177px;
}

ul.plussat,
ul.miinukset {
display: inline-block;
vertical-align: top;
width: 50%;
}

main.text ul.plussat,
main.text ul.plussat ul,
main.text ul.miinukset,
main.text ul.miinukset ul {
color: #e7e6e4;
padding-left: 0;
list-style: none;
}

ul.plussat ul,
ul.miinukset ul {
padding-top: 1.25rem;
padding-bottom: 0;
}

ul.plussat strong,
ul.miinukset strong {
font-family: sans;
font-size: 1.1rem;
padding-left: 1.5rem;
}

ul.plussat li,
ul.miinukset li {
background-position: 0 0.25rem;
background-repeat: no-repeat;
}

ul.plussat li {
background-image: url('plussa.svg');
background-size: 15px auto;
padding-left: 0;
}

ul.miinukset li {
background-image: url('miinus.svg');
background-size: 15px auto;
padding-left: 0;
}

ul.plussat ul li,
ul.miinukset ul li {
padding-left: 1.5rem;
}

q:before,
q:after {
content: '"';
}

dl#affiliate,
main#single article.others article {
padding: 1rem;
margin: 1rem 0 0 0;
border: 1px solid #1c2838;
border-radius: 0.5rem;
font-size: 0.8rem;
color: #7b899d;
}

dl#affiliate dt {
padding-bottom: 1rem;
font-size: 1rem;
letter-spacing: 0;
}

main ul.highlights {
list-style:	none;
padding-left: 0;
padding-bottom: 0.5rem;
font-size: 0.8rem;
}

ul.highlights li {
display: inline-block;
margin: 0 1rem 1rem 0;
padding: 0.25rem 0.75rem;
border-radius: 1rem;
border:	1px solid #5a4a31;
background: #2c2d2e;
color: #c68e39;
white-space: nowrap;
}

dl.ctas {
padding-bottom: 0;
}

dl.ctas.center {
text-align: center;
padding-top: 2rem;
padding-bottom: 4rem;
}

dl.ctas dd {
display: inline-block;
vertical-align: top;
margin: 0 1rem 1rem 0;
}

dl.ctas.center dd {
display: block;
margin: 1rem 0 0 0;
font-size: 0.8rem;
font-style: oblique;
}

p small {
font-size: 0.75rem;
}

p small a {
color: #7b899d;
text-decoration: underline;
}

p small a:hover,
p small a:focus,
p small a:active {
color: #8e9aac;
}

main#single h3:first-of-type {
color: #e7e6e4;
background: url('menu.svg') no-repeat 0 0.25rem;
background-size: 15px auto;
padding-left: 1.5rem;
font-size: 1.25rem;
letter-spacing: normal;
}

ol#sisallysluettelo {
list-style: none;
counter-reset: menu;
padding-left: 0;
}

ol#sisallysluettelo li {
counter-increment: menu;
}

ol#sisallysluettelo li,
ol#sisallysluettelo a {
display: inline-block;
}

ol#sisallysluettelo a:before {
content: counter(menu);
margin-top: -0.1rem;
margin-right: 1rem;
padding: 0 0.25rem;
display: inline-block;
border-radius: 100%;
background: #3a4d63;
font-size: 0.75rem;
vertical-align: middle;
}

ol#sisallysluettelo a {
background: #182639;
padding: 0.5rem 1rem;
border: 1px solid #7b898f;
border-radius: 0.5rem;
margin: 0 1rem 1rem 0;
}

ol#sisallysluettelo a:hover,
ol#sisallysluettelo a:focus,
ol#sisallysluettelo a:active {
border-color: #fff;
}

table {
color: #7b899d;
}

th,
td {
padding: 0.5rem;
border-radius: 0.5rem;
border: 1px solid #242f41
}

@media (max-width: 1570px) {
main#single article.container div.sidebar {
max-width: calc(380px - 3rem - 2px);
}
main#single.text {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}

@media (max-width: 1500px) {
    article.casino:nth-of-type(3n) {
        margin-right:1rem;
    }
    article.casino:nth-of-type(2n) {
        margin-right: 0;
    }
}

@media (max-width: 1050px) {
main#single article.container {
max-width: 100%;
padding-right: 0;
}
main#single article.container div.main {
margin-bottom: 1rem;
}
main#single article.container div.main,
main#single article.container div.sidebar {
position: static;
width: auto;
max-width: 100%;
}
}

@media (max-width: 780px) {
    header button {
        display: inline-block;
    }
    header nav {
        display: none;
        position: fixed;
        left: 0;
        top: 60px;
        width: 100%;
        background: #0a131e;
        text-align: center;
        padding: 1rem 0 3rem 0;
border-bottom: 1px solid #172130;
    }
    header ul {
        max-width: 300px;
        margin: 0 auto;
    }
    header nav li {
        display: block;
        padding-top: 2rem;
        margin: 0;
    }
    header nav.visible {
        display: inline-block;
    }
main#single article.others article {
display: block;
width: auto;
margin: 0 0 1rem 0 !important;
}
main#single article.others article:last-of-type {
margin: 0 !important;
}
}

@media (max-width: 1000px) {
    section.intro h2 {
        font-size: 2.5rem;
    }
    article.casino {
        display: block;
        width: auto;
        margin: 0 auto 1rem auto !important;
    }
    section.text p.image {
        float: none;
        padding-left: 0;
    }
}

@media (max-width: 700px) {
main#single article.container div.intro {
padding-right: 0;
}
main#single article.container dl#points {
position: static;
padding-left: calc(102px + 2rem);
max-width: 150px;
}
main#single article.container dl#points dd.updated {
background-size: 15px 15px;
}
}

@media (max-width: 470px) {
    article.casino {
        margin: 0 1rem 1rem 1rem !important;
    }
main#single article.container div.intro,
main#single article.container dl#points {
padding-left: 0;
margin: 0 auto;
text-align: center;
}main#single article.container dl#points {
padding-bottom: 3rem;
}
main#single article.container dl#points + p {
text-align: center;
padding-bottom: 5rem;
}
main#single article.container div.intro h2 {
font-size: 2rem;
}
main#single article.container div.intro p.logo {
position: static;
padding: 0 0 1rem 0;
}
}