@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

body {
 font-family: "Rubik", sans-serif;
 background-image: url('img/bonusdeildin-bg.png');
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
 background-attachment: fixed;
 margin: 10px;
 padding: 0px;
 }
 img {
 max-width: none;
 width: 100%;
 height: auto;
 }
 .wrapper {
 width: 100%;
 max-width: 800px;
 height: 100%;
 display: table;
 margin: 0 auto;
 }
.header {
 width: 100%;
 margin: 15px 0 0 0;
}
.header .logo {
 background-image: url('img/bonusdeildin-logo-2.png');
 background-repeat: no-repeat;
 background-size: 300px 90px;
 width: 300px;
 height: 90px;
 margin: 15px auto;
 cursor: pointer;
}
.footer {
 margin: 25px 0 20px 0;
}
.footer p {
 color: #fff;
 text-transform: uppercase;
 text-align: center;
 font-size: 11px;
}
.footer p span {
 text-transform: none;
}
.main {
 display: table;
 margin: auto;
 width: 95%;
}
.main .title {
 width: 100%;
 margin: auto;
}
.main .title p {
 text-transform: uppercase;
 font-size: 35px;
 font-weight: 500;
 text-align: center;
 padding: 0px;
 margin: 15px 0;
 color: #fff;
}
.main .menu {
 margin: 15px auto;
 text-align: center;
 text-transform: uppercase;
 display: table;
 font-size: 30px;
 font-weight: 500;
}
.main .menu a {
 color: #fff;
 text-decoration: none;
 opacity: 1;
 transition: .5s ease;
}
.main .menu a:hover {
 color: #222;
 opacity: 0.7;
}
.main .menu .a {
 float: left;
 margin: 0 20px;
}
.main .menu .b {
 float: left;
 margin: 0 20px;
}
.main .submenu {
 margin: 15px auto;
 text-align: center;
 text-transform: uppercase;
 display: table;
 font-size: 25px;
 font-weight: 500;
}
.main .submenu a {
 color: #fff;
 text-decoration: none;
 opacity: 1;
 transition: .5s ease;
}
.main .submenu a:hover {
 color: #222;
 opacity: 0.7;
}
.main .submenu a:selected {
 color: #222;
}
.main .submenu .a {
 float: left;
 margin: 0 10px;
}
.main .submenu .selected {
 text-decoration: underline;
 color: #fff;
 font-weight: bold;
}
.main .submenu .selected a {
 color: #fff;
 text-decoration: underline;
 opacity: 1;
 transition: .5s ease;
}
.main .submenu .selected a:hover {
 text-decoration: underline;
 color: #222;
 opacity: 0.7;
}
.main .submenu .b {
 float: left;
 margin: 0 10px;
}
.main .submenu .c {
 float: left;
 margin: 0 10px;
}

.main .textwrap {
 border-top: solid 1px #fff;
 margin: 0px auto;
 display: table;
 width: 100%;
 text-align: center;
 color: #fff;
}
.main .textwrap p {
 text-transform: uppercase;
 font-size: 25px;
 font-weight: 500;
 color: #fff;
}

.main .data {
 border-top: solid 1px #fff;
 margin: 0 auto;
 display: table;
 width: 100%;
}
.main .data .list {
 text-transform: uppercase;
 font-weight: bold;
 display: table;
 margin: 20px auto;
}
.main .data .list .a {
 display: table;
 margin: 0 auto;
 text-align: center;
 width: 100%;
}
.main .data .list .a .logoT1 {
 font-size: 0px;
 display: inline-table;
 width: 40%;
}
.main .data .list .a .logoT2 {
 font-size: 0px;
 display: inline-table;
 width: 40%;
}
.main .data .list .a .vs {
 font-size: 0px;
 display: inline-table;
 width: 14%;
 margin: 0 12px;
}
.main .data .list .b {
 display: table;
 margin: 0 auto;
 text-align: center;
 width: 100%;
}
.main .data .list .b .winT1 {
 text-align: center;
 font-size: 35px;
 color: #fff;
 width: 40%;
 float: left;
}
.main .data .list .b .winT2 {
 text-align: center;
 font-size: 35px;
 color: #fff;
 width: 40%;
 float: left;
}
.main .data .list .b .space {
 text-align: center;
 font-size: 25px;
 color: #fff;
 width: 20%;
 height: 25px;
 float: left;
 margin: 8px 0 0 0;
 cursor: pointer;
}
.main .data .list .b .space a {
 color: #fff;
 text-decoration: none;
 opacity: 1;
 transition: .5s ease;
}
.main .data .list .b .space:hover {
 color: #222;
 opacity: 0.7;
 transition: .5s ease;
}
.main .data .list p {
 margin: 0;
 padding: 0;
}


.slider {	
 display: none;
 color: #fff;
}
.sliderData {
 text-transform: uppercase;
 border-top: solid 1px #fff;
 border-bottom: solid 1px #fff;
 font-size: 20px;
 background-color: rgba(255, 255, 255, 0.1);
}
.sliderData img {
 margin: 0;
 padding: 0;
}
.sliderData a {
 color: #fff;
 text-decoration: none;
 opacity: 1;
 transition: .5s ease;
}
.sliderData a:hover {
 color: #222;
 opacity: 0.7;
}


.sliderData .g1 {
 display: table;
 margin: 20px auto;
 text-align: center;
}
.sliderData .g1 .logot1a {
 display:table;
 float: left;
 width: 5%;
 font-size: 0px;
}
.sliderData .g1 .logot2a {
 display:table;
 float: left;
 width: 5%;
 font-size: 0px;
}
.sliderData .g1 .text1 {
 display:table;
 width: 35%;
 float: left;
 margin: 12px 0 0 0;
}
.sliderData .g1 .date-kl {
 display:table;
 float: left;
 width: 35%;
 margin: 12px 0 0 0;
}
.sliderData .g1 .text2 {
 display:table;
 width: 20%;
 float: left;
 margin: 12px 0 0 0;

}


.sliderData .g2 {
 display: table;
 margin: 20px auto;
 text-align: center;
}
.sliderData .g2 .logot1a {
 display:table;
 float: left;
 width: 5%;
 font-size: 0px;
}
.sliderData .g2 .logot2a {
 display:table;
 float: left;
 width: 5%;
 font-size: 0px;
}
.sliderData .g2 .text1 {
 display:table;
 width: 35%;
 float: left;
 margin: 12px 0 0 0;
}
.sliderData .g2 .date-kl {
 display:table;
 float: left;
 width: 35%;
 margin: 12px 0 0 0;
}
.sliderData .g2 .text2 {
 display:table;
 width: 20%;
 float: left;
 margin: 12px 0 0 0;
}


.sliderData .g3 {
 display: table;
 margin: 20px auto;
 text-align: center;
}
.sliderData .g3 .logot1a {
 display:table;
 float: left;
 width: 5%;
 font-size: 0px;
}
.sliderData .g3 .logot2a {
 display:table;
 float: left;
 width: 5%;
 font-size: 0px;
}
.sliderData .g3 .text1 {
 display:table;
 width: 35%;
 float: left;
 margin: 12px 0 0 0;
}
.sliderData .g3 .date-kl {
 display:table;
 float: left;
 width: 35%;
 margin: 12px 0 0 0;
}
.sliderData .g3 .text2 {
 display:table;
 width: 20%;
 float: left;
 margin: 12px 0 0 0;
}


.sliderData .g4 {
 display: table;
 margin: 20px auto;
 text-align: center;
}
.sliderData .g4 .logot1a {
 display:table;
 float: left;
 width: 5%;
 font-size: 0px;
}
.sliderData .g4 .logot2a {
 display:table;
 float: left;
 width: 5%;
 font-size: 0px;
}
.sliderData .g4 .text1 {
 display:table;
 width: 35%;
 float: left;
 margin: 12px 0 0 0;
}
.sliderData .g4 .date-kl {
 display:table;
 float: left;
 width: 35%;
 margin: 12px 0 0 0;
}
.sliderData .g4 .text2 {
 display:table;
 width: 20%;
 float: left;
 margin: 12px 0 0 0;
}


.sliderData .g5 {
 display: table;
 margin: 20px auto;
 text-align: center;
}
.sliderData .g5 .logot1a {
 display:table;
 float: left;
 width: 5%;
 font-size: 0px;
}
.sliderData .g5 .logot2a {
 display:table;
 float: left;
 width: 5%;
 font-size: 0px;
}
.sliderData .g5 .text1 {
 display:table;
 width: 35%;
 float: left;
 margin: 12px 0 0 0;
}
.sliderData .g5 .date-kl {
 display:table;
 float: left;
 width: 35%;
 margin: 12px 0 0 0;
}
.sliderData .g5 .text2 {
 display:table;
 width: 20%;
 float: left;
 margin: 12px 0 0 0;
}

.menu-new {
 margin: 15px auto;
 display: table;
 text-transform: uppercase;
 font-size: 30px;
 font-weight: 500;
}
.menu-new a {
 text-decoration: none;
 }
.menu-new .anew {
  background-color: #fff;
  border: none;
  color: #000;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 30px;
  margin: 4px 8px;
  transition-duration: 0.4s;
  cursor: pointer;	
  border-radius: 4px;
}
.menu-new .bnew {
  background-color: #fff;
  border: none;
  color: #000;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 30px;
  margin: 4px 8px;
  transition-duration: 0.4s;
  cursor: pointer;	

}
.button1 {
  background-color: #fff; 
  color: #000;
  border-radius: 4px;
}

.button1:hover {
  background-color: #222;
  color: #fff;
}

.button2 {
  background-color: #fff;
  color: #000;
  border-radius: 4px;
}

.button2:hover {
  background-color: #222;
  color: #fff;
}


.arrow {
  border: solid #fff;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  margin: -10px 10px 0 0;
}
.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}