@charset "UTF-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700);

html, body {
  background: url('https://www.casinolisten.com/bonuskoder/images/sport.jpg') top center / cover no-repeat fixed;
  font-family:'Titillium Web',sans-serif;
  color:#FFFFFF;
  font-size:17px;
  line-height:21px;
  height:100%;
  margin:0;
  -webkit-font-smoothing:antialiased;
}

header, footer {
  background:rgba(0,0,0,0.5);
  color:#fff;
  padding:20px;
  border-radius:8px;
}

/* Mobil */
@media (max-width:768px){
  html, body{
    background-image:url('https://www.casinolisten.com/bonuskoder/images/sport-mobile.png') !important;
    background-position: top center !important;
    background-size: 100% auto !important;   /* fyld bredden, bevar højde-forholdet */
    background-repeat: repeat-y !important;  /* gentag nedad */
    background-attachment: scroll !important;
    background-color: transparent !important;
  }
}

.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

*, *:before, *:after {box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

#wrapper{width:100%; max-width:1000px; margin:0 auto;}
h1{font-size:39px; text-transform:uppercase; font-weight:600; margin: 10px 0 0; padding:0;}
h1 .h1-large{font-size:80px;line-height:78px;}
h1 .h1-small{line-height:38px;}
h1 span{color:#cbe54c;}

.subtext{padding:10px 0 0;width:100%; max-width:850px; margin:0 auto;}
.table{height:100%; display:table;}
.cell{ height:100%; display:table-cell; vertical-align:middle; text-align:center;}
@media (max-width: 1100px) {
#wrapper{max-width:750px; width:100%;padding:0 20px;}
h1{font-size:36px; }
h1 .h1-large{font-size:72px;line-height:72px;}
.subtext{font-size:15px;}
}
@media (max-width: 768px) {
h1{font-size:27px; margin: 5px 0px 0px;}
h1 .h1-large{font-size:27px;line-height:27px;}
h1 .h1-small{line-height: 27px;}
.subtext{font-size: 12px;line-height: 15px;}
}

header{text-align:center;}
header .logo{margin:15px auto 0;}
@media (max-width: 768px) {
header .logo {margin: 10px auto 0px;height: 35px;}
}

.topboxes{margin:35px -1%;}
.topboxes .box{float:left; width:31.3%; margin:0px 1% 20px;height:335px; text-align:center;border:3px solid #FFFFFF; border-radius:8px;}
.topboxes .box.tivolicasino{background:url(images/box-tivolicasino.png) top center no-repeat;}
.topboxes .box.unibet{background:url(images/box-unibet.png) top center no-repeat;}
.topboxes .box.bet365{background:url(images/box-bet365.png) top center no-repeat;}
.topboxes .box .text{background:#23347c; width:90%; height:90px; font-weight:600; color:#FFFFFF;font-size:35px; line-height:30px; text-transform:uppercase; border-radius:8px; margin:30px auto 5px;}
.topboxes .box .topcasino-logo a{cursor:pointer;}
.topboxes .box .text span{font-size:24px; display:block;}
.topboxes .box .bonuscode{background:#FFFFFF; width:90%; height:40px;font-weight:600; color:#000000;font-size:24px; line-height:25px;text-transform:uppercase; border-radius:8px; margin:0 auto;}
.topboxes .box .button{width:90%; height:60px; background:#0eabf4; border-radius:8px; margin:10px auto; text-align:center;}
.topboxes .box .button a{color:#FFFFFF;  text-decoration:none; text-transform:uppercase; font-weight:600;}
.button .table, .button .cell{width:100%; text-align:center;}
.topboxes .terms{font-size:14px; line-height:16px; font-style:italic; text-align:center; padding:30px 0 0; clear:both;}
@media (max-width: 1100px) {
.topboxes .box {height:300px;}
.topboxes .box .text span {font-size: 17px;}
.topboxes .box .text {font-size: 24px;line-height: 23px;height: 70px;margin: 15px auto 5px;}
.topboxes .box .bonuscode{font-size: 19px;}
}
@media (max-width: 768px) {
.topboxes{margin:10px -1%;}
.topboxes > .box{width:100%;}
.topboxes .box .text{width:280px;font-size: 30px;line-height: 25px;height: 75px;}
.topboxes .box .text span{font-size:21px;}
.topboxes .box .info{width:280px;}
.topboxes .box .bonuscode{width:280px;}
.topboxes .box .button{width:280px;}
}
@media (max-width: 580px) {
.topboxes .box .text{width:90%;}
.topboxes .box .info{width:90%;}
.topboxes .box .bonuscode{width:90%;}
.topboxes .box .button{width:90%;}
}

.maincontent{background:#FFFFFF; border-radius:8px; height:auto; overflow:hidden; color:#000000; text-transform:uppercase; font-weight:600;}
.maincontent ul{padding:0; margin:0; list-style:none;}
.maincontent li{overflow:hidden; height:140px;}
.maincontent .logo{float:left;width:33.3%;}
.maincontent .logo a{cursor:pointer;}
.maincontent .info{float:left;width:33.3%; background:#ebeff9; font-size:39px;}
.maincontent .info span{font-size:24px; line-height:36px; display:block;}
.maincontent .bonuscode{float:left;width:33.3%;}
.maincontent .bonuscode span{font-size:24px;}
.maincontent .button{width:270px; height:60px; background:#0eabf4; border-radius:8px; margin:10px auto; text-align:center;}
.maincontent .button a{color:#FFFFFF;  text-decoration:none; text-transform:uppercase;}
@media (max-width: 1100px) {
.maincontent{background:none;}
.maincontent ul li > div{float:none; width:100% !important;}
.maincontent ul li{height:auto !important;background:#FFFFFF; border-radius:8px; margin-bottom:20px;}
.maincontent .logo.table, .maincontent .info.table, .maincontent .bonuscode.table{height:auto;}
.maincontent .logo{margin:20px auto;}
.maincontent .info{height:100px !important; padding-bottom:15px;}
.maincontent .bonuscode{margin:20px auto;}
}
@media (max-width: 768px) {
.maincontent .button{width:80%;}
.maincontent .info{font-size:32px;}
}
.button:hover{background:#058ccb !important;cursor:pointer;}

#newsletter{position:fixed;bottom:0;right:20px;z-index:9999; display:none; margin-left:20px;}
#newsletter #closenewsletter{top: 20px;right: -15px;position: absolute;z-index:9999; cursor:pointer;}
#newsletter .tab{line-height:14px; margin-left:10px;}
#newsletter .content{border-radius:8px 8px 0 0;max-width:436px;width:100%;height:292px;background:url(images/newsletter-bg.jpg) top center;padding-top: 25px; border:3px solid #FFFFFF;}
#newsletter .arrow{position:absolute;top: 80px;left: -20px;}
#newsletter .header{font-size:30px; line-height:30px; text-align:center; text-transform:uppercase; font-weight:600;width: 90%; margin: 0 auto;}
#newsletter .header span{color:#23347c;text-transform:uppercase; font-weight:600;}
#newsletter .small{font-size:18px; line-height:20px;text-align:center; padding-top:5px;}
#newsletter form{text-align:center;}
#newsletter input[type="email"]{font-family: 'Titillium Web', sans-serif;width:100%; max-width:340px; height:50px; margin:0 auto; border-radius:6px; border:none; padding-left:10px;}
#newsletter button{font-family: 'Titillium Web', sans-serif;background:#0eabf4; width:100%; max-width:340px; height:50px;border-radius:6px; font-size:24px; color:#FFFFFF;text-transform:uppercase;font-weight:600;border: none; margin-top:10px;}
@media (max-width: 800px) {
#newsletter{bottom:-60px;}
#newsletter .header {font-size: 20px;line-height: 20px;}
#newsletter .content{padding-top: 10px;}
#newsletter .arrow{display:none;}
#newsletter .small {font-size: 15px;line-height: 18px;}
#newsletter input[type="email"] {max-width:90%;clear: both;display:block;}
#newsletter button{max-width:90%;clear: both; display:block;margin:10px auto;}
#newsletter form {margin-top: 10px;}
}
footer {
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    font-style: italic;
    margin-bottom: 40px;
}

/* Styling for bonusvilkår (T&C-tekst) */
.bonus-terms {
    background-color: #ffffff;
    padding: 3px 8px; /* Mindre padding */
    border-radius: 3px;
    max-width: 1000px;
    line-height: 1.1em; /* Mindre linjeafstand */
    font-size: 10px; /* Sikrer ensartet størrelse */
    color: gray;
    margin: -5px auto 8px auto; /* Justeret afstand */
    text-align: left;
}

/* Mobiljustering */
@media (max-width: 767px) {
    .bonus-terms {
        font-size: 9px; /* Gør teksten lidt mindre på mobil */
        margin: -8px auto 5px auto; /* Tættere på bonusboksen ovenfor */
        padding: 2px 6px; /* Mindre padding */
    }
}

/* Desktopjustering */
@media (min-width: 768px) {
    .bonus-terms {
        font-size: 10px; /* Holder en ensartet skriftstørrelse */
        margin: 3px auto 10px auto; /* Lidt mere luft til næste boks */
        line-height: 1.0em; /* Kompaktere linjeafstand */
    }
}

/* Sikrer, at `p`-tag inde i `.bonus-terms` ikke arver en global `p`-stil */
.bonus-terms p {
    margin: 0;
    padding: 0;
    font-size: inherit; /* Bruger fontstørrelsen fra `.bonus-terms` */
    line-height: inherit;
}



#overlay{display:none;position:fixed; z-index:999; width:100%; height:100%; background:rgba(0,0,0,0.65);}
#popup{position:absolute; z-index:9999; max-width:500px; max-height:450px; width:100%; height:100%; background:url(images/popup-bg.jpg) top left repeat-x #3f61bb; border-radius:8px; left:calc(50% - 250px); top:100px; border:3px solid #FFFFFF;}
#popup #closepopup{cursor:pointer;position:absolute; top:-20px; right:-20px;}
#popup .header{font-size:48px; line-height:48px; font-weight:600; text-align:center; text-transform:uppercase;margin-top:20px;}
#popup .text{font-size:24px; line-height:25px; text-transform:uppercase; text-align:center; width:80%; margin: 4px auto;}
#popup .text span{color:#aec82d;}
#popup .free-spins{font-size:50px; background:#0b0a36; display:block; min-height:70px;height: auto; width:100%; text-align:center; text-transform:uppercase; padding:12px 0 0; font-weight:600;margin:18px auto;line-height: 45px;}
#popup .code{text-align:center; font-size:26px;line-height:26px; text-transform:uppercase;font-weight:600;margin:0 auto 15px;}
#popup .button{width:90%; height:50px; background:#aec82d; border-radius:8px; margin:0 auto 15px; text-align:center;}
#popup .button a{color:#FFFFFF;  text-decoration:none; text-transform:uppercase; font-weight:600;font-size:21px;}
#popup .button:hover{background:#94ae10 !important;}
#popup .alternative{background:#1d1b56; border-radius:0 0 8px 8px; height:110px; border-top:3px solid #FFFFFF;padding: 10px 0 0;}
#popup .alternative-text{font-size:16px; text-align:center;}
#popup form{width:90%; margin:10px auto 0;}
#popup form p{padding:0; margin:0;}
#popup form input[type="email"]{font-family: 'Titillium Web', sans-serif;height:50px;width:55%; margin-right:2%;border-radius:4px; border:none; padding-left:10px; font-size:16px;}
#popup form button{cursor:pointer;font-family: 'Titillium Web', sans-serif;border:0; background:#0eabf4; height:50px; color:#FFFFFF; border-radius:4px; width:42%; font-size:15px; font-weight:600; text-transform:uppercase;}
@media (max-width: 500px) {
#popup{width:96%; left:2%; height:auto; max-height:100%;top:20px;}
#popup #closepopup{position:absolute; top:-10px; right:-10px;}
#popup .header{font-size:34px; line-height:34px;}
#popup .text{font-size:18px; line-height:18px;}
#popup .free-spins{padding: 10px 0px 10px;font-size: 36px;}
#popup .alternative{height:auto; padding-bottom:20px;}
#popup .alternative-text{font-size:14px;}
#popup form input[type="email"]{display:block; width:100%; margin:0 0 10px;}
#popup form button{font-size:12px; display:block; width:100%;}
}