/* CSS Document */
@font-face {
  font-family: 'DINPro-Black';
  src: url('https://event.msi.com/msifonts/fonts/DINPro-Black.eot');
  src: url('https://event.msi.com/msifonts/fonts/DINPro-Black.woff2') format('woff2'),
       url('https://event.msi.com/msifonts/fonts/DINPro-Black.woff') format('woff'),
       url('https://event.msi.com/msifonts/fonts/DINPro-Black.ttf') format('truetype'),
       url('https://event.msi.com/msifonts/fonts/DINPro-Black.svg#DINPro-Black') format('svg'),
       url('https://event.msi.com/msifonts/fonts/DINPro-Black.eot?#iefix') format('embedded-opentype');
  
}
@font-face {
  font-family:'DINPro-Medium';
  src:url('https://event.msi.com/msifonts/fonts/DINPro-Medium.otf') format('opentype');
  src: url('https://event.msi.com/msifonts/fonts/dinpro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://event.msi.com/msifonts/fonts/dinpro-medium-webfont.woff') format('woff'),
         url('https://event.msi.com/msifonts/fonts/dinpro-medium-webfont.ttf') format(' truetype'),
         url('https://event.msi.com/msifonts/fonts/dinpro-medium-webfont.svg') format('svg');
}
@font-face {
  font-family:'DINPro-Regular';
  src:url('https://event.msi.com/msifonts/fonts/DINPro-Regular.otf') format('opentype');
  src: url('https://event.msi.com/msifonts/fonts/DINPro-Regular.eot?#iefix') format('embedded-opentype'),
         url('https://event.msi.com/msifonts/fonts/DINPro-Regular.woff') format('woff'),
         url('https://event.msi.com/msifonts/fonts/DINPro-Regular.ttf') format(' truetype'),
         url('https://event.msi.com/msifonts/fonts/DINPro-Regular.svg') format('svg');
}
@font-face{
  font-family: 'DINCond-Medium-Regular';
  src: url('https://event.msi.com/msifonts/fonts/ufonts.com_dincond-medium-opentype.otf') format("opentype");
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: bottom;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: '';
  content: none;
}

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

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
  noFocusline: expression(this.onFocus=this.blur());
  outline: 0;
}

a:hover {
  text-decoration: none;
}

a:focus {
  -moz-outline-style: none;
}

/*img*/
img {
    max-width: 100%;
    width: expression(document.body.clientWidth>100?"100%": "auto");
    overflow: hidden;
}

body {
    line-height: 1;
}


/* Animate Background Image */
@-webkit-keyframes loop {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes loop {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes imgS {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/* navitem */
img.full{width: 100%;}
#Lieferando {
    color: #fff;
    width: 100%;
    font-family:'DINPro-Medium';
    font-size:18px;
    background-color: #ed8f1e;
}

#Lieferando section {
    font-size: 100%;
    color: #fff;
    line-height: 1.5;
    width: 100%;
    overflow-x: hidden;
}

#Lieferando section .container {
    width: 100%;
    margin: 3% auto;
    max-width: 1800px;
    text-align: center;
}

#Lieferando h1, #Lieferando h2, #Lieferando h3 { font-family: 'DINPro-Black';}

/* kv */
#kv img{vertical-align: bottom;}
#kv{position: relative; overflow: hidden; width: 100%; margin:auto; display: flex;  align-items: center;}
#kv .kv-rightbox{position: absolute; right:3%; width:55%; height:100%; display: flex; align-items: center;}
#kv .txtbox{position: absolute; width: 55%;}
#kv .icon{position: absolute; right:0; top: 2%;
  display: flex; align-items: center; justify-content: space-between; width:25%; margin:auto; }
#kv .intel_icon {padding-top:30px; margin-left: 5px;line-height: 1.2; text-align: center;}
#kv .intel_icon p{padding-top: 5px; font-weight: bold; color: #000; font-size: 1.6em; }
#kv .intel_icon p a{display: block;color: #000; letter-spacing: 3px;}
#kv .intel_icon p a:hover{text-decoration: underline;}
#kv .kvimg {position: absolute; right:0; bottom:5%; width:45%;}
#kv .note {position: absolute; right:3%; bottom:2%; color:#000; font-size:1em;}
#kv .kvxs{display: none;}
#kv .kvlg{width: 100%; margin: auto;}
#kv h1 {font-size:5.5em; line-height: 1.2; text-shadow:15px 7px 7px #2c2c2c; letter-spacing: .3rem;}
#kv h1 span{display:block;}
#kv h1 span:nth-child(2){padding-left:13%;}
#kv h1 span:nth-child(3){padding-left:17%; font-size:85%;}
#kv h1 span:nth-child(4){padding-left:22%; font-size:85%;}
#kv .datalist {margin:4% 0 0 4%; letter-spacing: 3px;}
#kv .datalist li{padding-bottom:2%; padding-top:2%; font-family: 'DINCond-Medium-Regular'; font-weight: 700; text-transform: uppercase; font-size:2em;}
#kv .datalist li>div{display: block; max-width:400px; position: relative;}
#kv .datalist li>div:after{
  content: "";
  display: block;
  position: absolute;
  width: calc(100%);
  height: calc(100%);
  left: 0px;
  bottom: 0px;
  z-index: 1;
  background:#192837;
  transform: rotate(0deg) scale(1) skew(-15deg) translate(0px);
}
#kv .datalist li>div span{position: relative;z-index: 2; padding: 0 30px;}
#kv .datalist li:first-child{margin-left: 12%;}
#kv .datalist li p{margin-left:30px;text-shadow:5px 3px 3px #2c2c2c;}

@media (max-width:2560px){
  #kv h1 {font-size:4em;}
  #kv .intel_icon p {font-size: 1.2em;}
  #kv .datalist li {font-size: 1.6em;}
}

@media (max-width:1920px){
  #kv h1 {font-size:3.5em;}
  #kv .intel_icon p {font-size: 1em;}
  #kv .datalist li {font-size: 1.6em;}
  #kv .icon {top: 0;}
  #kv .icon img{max-width: 100px;}
  #kv .kvimg {width: 40%;}
}

@media (max-width:1780px){
  #kv h1 {font-size:3em;}
  #kv .datalist li {font-size: 1.2em;}
}

@media (max-width:1516px){
  #kv h1 {font-size:2.5em;}
  #kv .datalist li {font-size: 1em;}
  #kv .note{font-size: 16px;}
}

@media (max-width:1366px){
  #kv .kv-rightbox, #kv .txtbox {width: 60%;}
  #kv .icon {right: 5%;}
  #kv .kvimg {width: 35%;}
  #kv .intel_icon{padding-top:20px;}
  #kv .intel_icon p {font-size: 16px;}
}

@media (max-width:1100px){
  #kv .kv-rightbox, #kv .txtbox {width: 65%;}
  #kv h1 {font-size:2.2em;}
  #kv .kvimg {width: 30%;}
}

@media (max-width:960px){
  #kv{background: url("../images/kvxsbg.jpg")top center repeat-y; padding-bottom: 5%; flex-direction: column;}
  #kv .kvxs{display: block;}
  #kv .kvlg{display: none;}
  #kv .kv-rightbox, #kv .txtbox{position: initial; width: 90%; text-align: center; flex-direction: column;}
  #kv h1{font-size: 2em;}
  #kv h1 span:nth-child(2), #kv h1 span:nth-child(3), #kv h1 span:nth-child(4){padding: 0;}
  #kv .note{position: initial; width: 80%; margin:auto; text-align: center;}
  #kv .datalist li:first-child, #kv .datalist li p{margin-left: 0;}
  #kv .datalist li>div{margin: auto;}
  #kv .datalist li>div span {padding: 0 20px;}
  #kv .kvimg {position: initial; width:50%; text-align: center; margin:1% auto;}
  #kv .note, #kv .icon{position: initial; width: 80%; margin:1% auto; justify-content: center;}
}


/* features */
#features{width: 100%; max-width: 2560px; margin: auto; display: flex; align-items: stretch; justify-content: center;}
#features .left_icon{flex:0 0 14%;}
#features .left_icon .topname{background:#222; font-size: 1.6em; font-weight: bold; display: flex; align-items: center; justify-content: center; max-width:150px; height: 150px;  margin: auto;}
#features .left_icon ul{margin: auto; text-align:center;}
#features .left_icon ul li{margin:40px 15px;}
#features .left_icon ul img{margin: auto;}

#features .right_main {width: 80%; margin: 2%;}
#features .right_main .flexwarp {display: flex; align-items: center; justify-content: center; width: 100%; margin:2% auto; padding: 1%; background: #111; box-shadow:5px 1px 10px #111;}
#features .right_main .flexwarp .img{flex:0 0 50%; margin: auto; text-align: center;}
#features .right_main .flexwarp .txt_content {flex:0 0 50%;}
#features .right_main .flexwarp.apps .img{flex:0 0 40%;}
#features .right_main .flexwarp.apps .txt_content{flex:0 0 60%; justify-content: center; text-align: center;}
#features h2{max-width: 500px; margin:auto; padding: 1%; background:#ef7e1d; font-size: 3em; text-align: center;}
#features .right_main ul {margin:5% auto; }
#features .right_main ul li{font-size: 1.2em; padding:10px 0; list-style:inside;}
#features .right_main .logo {margin:1% auto;}
#features .bottmbtn {display: flex; align-items: center;}
#features .bottmbtn .logo_main {display: flex; align-items: center; flex:0 0 50%;}
#features .bottmbtn .logo_main img{margin-right:40px; max-width: 130px;}
#features .bottmbtn .logo_main span{color: #d41217; font-size: 1.6em; font-weight: bold;}
#features .bottmbtn .btnsty{flex:0 0 50%; text-align: center;}
#features .bottmbtn .btnsty2{flex:0 0 90%; text-align: center; display: flex;}
#features .bottmbtn .btnsty2 a {margin: 1%;}
#features .bottmbtn .btnsty a, #features .bottmbtn .btnsty2 a {background:#ef7e1d; font-size: 1.3em;  font-weight: bold; text-transform:uppercase; color: #fff; padding:10px 20px; transition: all 0.5s ease;}
#features .bottmbtn .btnsty a:hover, #features .bottmbtn .btnsty2 a:hover{
  background: #fff;
  color:#ef7e1d;
  animation-play-state:paused;
}

#features h3 {font-size:4em;}
#features .fontsA {font-size:1.2em;}
#features .fontsB {font-size:1.6em;}
#features .fontsC {font-size:4em; font-family: 'DINPro-Black';}
#features .fontsC:before{
  content: "";
  display: block;s
  background: #ef7e1d;
  max-width: 300px;
  height: 2px;
  margin: 20px auto 0;
}
#features .fontsD {font-size:2.5em;}

@media (max-width:1700px){
  #features h2 {font-size:2.2em;}
  #features .right_main .flexwarp .img img{width: 70%;}
  #features .right_main ul li {font-size: 1em; padding: 6px;}
  #features .bottmbtn .btnsty a {font-size: 1.2em;}
  #features .bottmbtn .btnsty2 a {font-size: 1em;}
}

@media (max-width:1516px){
  #features h3 {font-size:3em;}
  #features .fontsA {font-size:1em;}
  #features .fontsB {font-size:1.2em;}
  #features .fontsD {font-size:2em;}

}

@media (max-width:960px){
  #features h2 {font-size:1.6em; margin-top: 10px;}
  #features h3 {font-size:2.5em;}
  #features, #features .right_main .flexwarp{flex-direction: column;}
  #features .left_icon .topname{font-size: 1.2em; height: auto; padding: 1%;}
  #features .left_icon ul{display: flex; align-items: center; justify-content: center; flex-flow: wrap;}
  #features .left_icon ul li{flex:0 0 25%; margin:10px;}

  #features .right_main{width: 90%; margin: 2% auto;}
  #features .right_main .flexwarp{padding:20px;width: 95%; margin: 2% auto 5%;}
  #features .right_main .flexwarp .img img{width: 50%;}
  #features .right_main .flexwarp .txt_content {width: 95%;}
  #features .bottmbtn{justify-content: center; flex-direction: column;}
  #features .bottmbtn .logo_main{margin-bottom: 10px;}
  #features .bottmbtn .logo_main img {max-width: 80px;}
}

@media (max-width:479px){
  #features .bottmbtn .btnsty2 {flex-direction: column;}
  #features .bottmbtn .btnsty2 a:first-child{margin-right: 0;}
  #features .bottmbtn .btnsty a, #features .bottmbtn .btnsty2 a{margin: 2% auto; display: block;  width: 100%; font-size:.8em;}

}


/*bouns*/
#bouns h2{font-size: 4em; margin-bottom:20px; text-align: center; text-transform: uppercase;}
#bouns .bounsflex{display: flex; align-items:flex-start; justify-content: center;}
#bouns .bounsflex .item{flex:1; margin:1%; }
#bouns .bounsflex .item .btnsty{width: 80%; margin:5% auto;}
#bouns .bounsflex .item .btnsty a {display: block; text-transform: uppercase; font-size: 1.6em; background: #222; border-radius:8px; padding: 2% 5%; color: #fff; transition: all 0.5s ease;}
#bouns .bounsflex .item .btnsty a:hover {
  background: rgba(34,34,34,.5);
  color:#fff;
  animation-play-state:paused;
}

@media (max-width: 960px) {
  #bouns .bounsflex{flex-direction: column;}
  #bouns .bounsflex .item {margin: auto;}

}

/*redeem*/
#redeem .modal-content {
    font-size: 18px;line-height: 1.2;
    padding: 5%;
}
#redeem .close {
  color: #FFF;
}


/*Redeem*/
#redeem {
  width: 100%;
  text-align: center;
  padding: 2% 0px 5%;
}
#redeem h2{font-size: 4em; margin-bottom:20px; text-transform: uppercase;}
#redeem p.red{color:#c96901;}
#redeem p{font-size: 18px;}
#redeem .step-wrap {
  display: flex;
  justify-content: center;
}
#redeem .step-wrap .step {  
  width: calc(100%/3);
  margin:1%;
}
#redeem .step-wrap .step img{margin: auto;}
#redeem .step-wrap .step a {
  color: #fff; transition: all ease-In .2s;
}
#redeem .step-wrap .step a:hover {
  text-decoration: none;
  color:#000; 
}
#redeem .step-wrap .step h3 {
  margin: 0px 0 20px;
  font-size: 1.4em;
}

#redeem .step-wrap .step p.text-left{text-align: left; line-height: 1.3; margin-bottom: 10px;}

@media (max-width: 768px) {
  #redeem .step-wrap {
    flex-direction: column;
  }
  #redeem .step-wrap .step {
    width: 80%;
    margin: 0 auto;
  }
  #redeem .step-wrap .step img {width: 60%;}

}

#redeem .btn-area{
  max-width: 90%;
  margin: 0 auto;
}

#redeem .redeem-btn {
  display: flex;
  justify-content: space-between;
  margin-top: 3%;
}

#redeem .redeem-now-btn {
  margin-top: 1%;

  margin: 0 auto;
  text-align: center;
}

#redeem .redeem-btn button {
  font-size: 1.6em;
  background: rgba(34,34,34,1);
  padding: 2% 5%;
  border-radius: 8px;
  margin: 15px 10px 0;
  border: 0px solid #fff;
  transition: all 0.5s ease;
  outline: none;
  color: #FFF;
  width: 80%;
}


#redeem .redeem-now-btn button {
  width: 100%;
  padding: 2.4% 0;
  margin: 5px 0;
  margin: 15px 10px 0;
}


#redeem .redeem-btn button:hover {
  background: rgba(34,34,34,.5);
  color:#fff;
  animation-play-state:paused;
}




 @keyframes fade {
  from {
    background: rgba(21,70,157,.7);
  }
  50% {
    background: rgba(21,70,157,1);
  }
  to {
    background: rgba(21,70,157,.7);
  }
}
@-webkit-keyframes fade {
  from {
    background: rgba(21,70,157,.7);
  }
  50% {
    background: rgba(21,70,157,1);
  }
  to {
    background: rgba(21,70,157,.7);
  }
}
.blink {
  animation-fill-mode:forwards;
  animation: fade 2000ms infinite;
  -webkit-animation: fade 2000ms infinite;
}


ol.romaNum {list-style: lower-roman;} 
 .notice {
     width: 100%;
     padding: 15px 30px;
     background-color: #213d56;
     
 }
ol.loABC {list-style:  lower-alpha;}
ul.numlist {list-style: decimal;}
.itmeTable {padding: 15px; border: 1px solid #FFF;}
 .notice_content {
     width: 100%;
     padding: 3% 15px;
     margin: 0 auto;
     max-width: 960px;
     color: #fff;text-align: left;
 }
 

.notice_content ul li {list-style: disc;}
.notice_content h3 {
     color: red;
     text-align: center;
     font-size: 2.5em;
     padding: 20px 15px;
     margin: 0;
     font-family: 'DINPro-Black';
 }
 .notice_content ul li {
     margin: 4px 0;
 }

 /*modal*/
 .modal-content {
     background: #000;
     font-family: 'DINPro-Regular';
 }
 
 .modal-header {
     padding: 15px 30px;
     border-bottom: 1px solid #444;
     background: #222;
     text-align: center;
     font-size: 24px;
 }
 
 .modal-body {
     position: relative;
     padding: 15px 60px;
     background: #222;
     color: #fff;
 }
 
 .modal-body hr {
     display: none;
 }
 
 .modal-conten {
     border: 0;
 }
 
 .modal-content p {
     margin: 15px 0;
     color: #fff;
     font-family: 'DINPro-Medium'
 }
 
 .modal-content ol,
 .modal-content li {
     color: #ddd;text-align: left; padding: 5px 0 5px 5px;
 }
 
 .modal-content ol {
     padding-left: 20px;
 }
 
 .modal-content .h4,
 .modal-content h4 {
     font-weight: bold;
     font-size: 22px;
     padding: 5px 0 10px;
     font-family: 'DINPro-Black';
 }
 
 .modal-footer {
     padding: 15px;
     text-align: right;
     border-top: 1px solid #444;
     background: #222;
 }
 
 .modal-footer .btn-default {
     color: #fff;
     background-color: red;
     border-color: red;
 }
 
 .modal-content .close {
     float: right;
     font-size: 21px;
     font-weight: 700;
     line-height: 1;
     color: #fff;
     text-shadow: 0 1px 0 #fff;
     filter: alpha(opacity=20);
     opacity: 1;
 }
 
 .modal-content .close:focus,
 .modal-content .close:hover {
     color: #fff;
 }

 .modal-content .red{color:#ef7e1d; margin: 15px auto; font-size:24px;font-family: 'DINPro-Black';}
 .modal-content p.toptitle{font-size:22px;}
 .modal-content table{text-align: center; margin-bottom: 10px;}
 .modal-content table .cored {background: #ef7e1d; color: #000; font-weight: bold;}
 .modal-content .note{color: red;}


 .error {
     color: #ff0000;
 }
 
 @media (max-width: 768px) {
     .modal-body {
         padding: 15px 20px;
     }
 }

/*lightBox*/
.lighttbox {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  width: 100%;
  min-height: 100vh;
  z-index: 10;
  top: 0;
  left: 0;
  overflow-y: auto;
  display: none;
}

.ltwp {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

.ltbox {
  background: #111;
  width: 90%;
  max-width: 1000px;
  margin: 3% auto;
  padding: 40px;
  border: #222 3px solid;
  color: #fff;
  line-height: 1.6;
  font-size: 18px;
  display: none;
}

.ltbox h2 {
  font-size: 26px;
  color: #f00;
  text-align: center;
  padding: 30px 0;
  text-transform: uppercase;
    background-color: #000;
}

.ltbox h2:after {
  content: "";
  display: block;
  height: 2px;
  width: 150px;
  margin: 15px auto 0;
  background: #f00;
}

.ltbox h4 {
  padding: 30px 0 10px;
  font-size: 22px;
}

.ltbox h4 span {
  border-bottom: #666 2px solid;
}

.ltbox p {
  font-size: 16px;
  line-height: 1.6;
  padding-bottom: 20px;
}

.ltbox .btclose {
  text-align: center;
  padding-top: 30px;
}

.ltbox .btclose button {
  background: #222;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 15px 25px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}

.ltbox .btclose button:hover {
  background: #f00;
}

@media screen and (max-width: 960px) {
  .ltbox .btclose button {
    width: 100%;
  }

  #redeem .redeem-btn {

    flex-wrap: wrap;
    margin-top: 3%;
  }

  #redeem .redeem-now-btn {
    margin-top: 0%;
}

  #redeem .redeem-btn button {

    width: 100%;
  }
  


}

@media screen and (max-width: 455px) {

  #redeem .redeem-btn button {
    font-size: 16px;
  }

  #redeem .redeem-now-btn button {
    font-size: 22px;
  }

}


#terms {
  text-align: left;
}

#terms a {
  color: #c00;
  border-bottom: #c00 1px dotted;
  cursor: pointer;
  margin-left: 10px;
}

#terms a:hover {
  color: #f00;
  border-bottom: #f00 1px solid;
}

#terms ul {
  margin-left: 20px;
}

#terms ul li {
  list-style: lower-roman;
  line-height: 1.6;
  padding-bottom: 10px;
}

#terms ul li ul li {
  list-style: lower-alpha;
}