/* Eric Meyer's Reset */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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;}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,q:before,q:after{content:none;}table{border-collapse:collapse;border-spacing:0;}
/* @fontface */
@font-face {
    font-family: 'BMW Helvetica';
    src: url('../fonts/subset-BMWHelvetica-Roman.eot');
    src: url('../fonts/subset-BMWHelvetica-Roman.eot?#iefix') format('embedded-opentype'),
        url('../fonts/subset-BMWHelvetica-Roman.woff2') format('woff2'),
        url('../fonts/subset-BMWHelvetica-Roman.woff') format('woff'),
        url('../fonts/subset-BMWHelvetica-Roman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BMW Helvetica';
    src: url('../fonts/subset-BMWHelvetica-Light.eot');
    src: url('../fonts/subset-BMWHelvetica-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/subset-BMWHelvetica-Light.woff2') format('woff2'),
        url('../fonts/subset-BMWHelvetica-Light.woff') format('woff'),
        url('../fonts/subset-BMWHelvetica-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'BMW Helvetica';
    src: url('../fonts/subset-BMWHelvetica-Bold.eot');
    src: url('../fonts/subset-BMWHelvetica-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/subset-BMWHelvetica-Bold.woff2') format('woff2'),
        url('../fonts/subset-BMWHelvetica-Bold.woff') format('woff'),
        url('../fonts/subset-BMWHelvetica-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
/* Common */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
 opacity:0;  /* make things invisible upon start */
 -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
 -moz-animation:fadeIn ease-in 1;
 animation:fadeIn ease-in 1;
 
 -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
 -moz-animation-fill-mode:forwards;
 animation-fill-mode:forwards;
 
 -webkit-animation-duration:1s;
 -moz-animation-duration:1s;
 animation-duration:1s;
}
 
.fade-in.one,
.fade-in.one1 {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.two {
-webkit-animation-delay: 1.4s;
-moz-animation-delay:1.4s;
animation-delay: 1.4s;
}
 
.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}
.fade-in.one2 {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}
.fade-in.one3 {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
.fade-in.one4 {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.fade-in.one5 {
-webkit-animation-delay: 1.4s;
-moz-animation-delay: 1.4s;
animation-delay: 1.4s;
}
.fade-in.one6 {
-webkit-animation-delay:  1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}
.rot { color: #e10f21 !important; }
strong,.strong,b { font-weight:bold;}
ol li + li {
    margin-top: 1.5em;
}
ol, ol > li {
    list-style-type: decimal;
    list-style: decimal;
    list-style-position: inside;
}
.upper { text-transform: uppercase;}
.center {text-align:center;}
/* Shared classes */
.header {background: #aeb2be; /* Old browsers */background: -moz-linear-gradient(top, #ffffff 0%, #aeb2be 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#aeb2be)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #ffffff 0%,#aeb2be 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #ffffff 0%,#aeb2be 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #ffffff 0%,#aeb2be 100%); /* IE10+ */background: linear-gradient(top, #ffffff 0%,#aeb2be 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#aeb2be',GradientType=0 ); /* IE6-9 */
border-bottom:1px solid #000;height:43px;position:fixed;text-align:center;top:0;left:0;}
.header .title {color:#71787F;font-size:18px;font-weight:bold;margin-top:10px;text-shadow:0 1px 1px #fff;}
/* Structure */
html, body, #wrap {background:#ffffff;font-size: 16px; font-weight: 300; font-family:'BMW Helvetica',sans-serif;-webkit-user-select: none;}
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
  font-family: 'BMW Helvetica', sans-serif;
    line-height: 263px;
    font-size: 90px;
    font-weight: bold;
}
.hexagon label.error {
    color: #ffffff;
    padding-top: 40%;
    padding-left: 15%;
    position: absolute;
}
.mittetext {
    display: block;
    width: 223px;
    position: absolute;
    left: 347px;
    top: 373px;
    font-size: 20px;
    line-height: 1.3em;
}
.odometer { 
    background-image: url('../img/maerz19/hex1-active-red.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px 21px 0px;
    margin: auto;
    border-radius: 0;
    width: 100%;
    height: 100%;
}
.odometer-inside {
    text-align: center;
}
#wrap { width: 1024px; height: 1269px; margin: 0 auto; } 
    #main {height:100%;padding:0 55px;position:relative;vertical-align:top;}
    .step1, .step3a, .step3b, .abgelehnt {     background-image: url('../img/maerz19/iPad-lotterygame-step1bgr-red.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; }
    .step2, .step3  { background-image: url('../img/maerz19/iPad-lotterygame-step2bg-red.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; }
    .tos { background-image: url('../img/maerz19/iPad-lotterygame-step3bg-red.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; }
    .tos .content { padding-top: 200px;
    padding-left: 96px;
    padding-right: 96px;
    text-align: justify; }
    .scrollme { overflow-y: scroll; height: 878px; width: 100%; }
    .tos .content h1 { font-weight: bold; font-size: 20px; margin-bottom: 55px; }
    .tos .content h2 { font-weight: bold;  margin-top: 25px; }
    .tos .content p { margin-bottom: 25px; }
    .step1 .content, .step3a .content, .abgelehnt .content { padding-top: 245px; }
.step3b .content { padding-top: 112px;}
    .step2 .content { padding-top: 168px; }
    .step3 .content { padding-top: 93px; }
    .car { background-image: url('../img/maerz19/iPad-lotterygame-step1-car-red.png'); }
    .simpleblue { background-image: url('../img/maerz19/iPad-lotterygame-step3a-simple-red.png'); }
    .win { background-image: url('../img/maerz19/iPad-lotterygame-step3b-win-red.png'); 
        background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 850px;
    height: 852px;
    margin: 0 auto; }
    .car, .simpleblue {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 853px;
    height: 737px;
    margin: 0 auto;
    }
    .datenformular {
    margin: 0 auto;  
    width: 851px;
    height: 669px;
    }
    .hexagonfeld {
        margin: 0 auto;
        height: 872px;
        width: 100%;
    }
    .hexaformular {
        height: 876px;
        position: relative;
        overflow: hidden;
    }
    .codeformular {
    position: relative;
}
    .white { color: #ffffff !important; }
    .formnewsletter .white { color: #ffffff !important; }
    .felderset { margin-top: 22px; }
    .datenformular input {
        font-size: 17px;
        /* text-transform: uppercase; */
        padding: 20px 25px;
        border-radius: 0;
        outline: none;
        border: none;
        background: rgba(255,255,255,0.4);
        color: rgba(34, 34, 34, 0.6);
        -webkit-box-shadow: 0px 5px 17px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 5px 17px rgba(0,0,0,0.2);
        box-shadow: 0px 5px 17px rgba(0,0,0,0.25);
        margin-bottom: 30px;
    }
    .hexaformular input[type=number] {
        border-radius: 0;
        outline: none;
        border: none;
        -webkit-appearance: none;
    }
    .hexaformular input[type=submit]{

    }
    input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ffffff;

    }
    input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
    }
.filialcodeindex input[type="text"]::focus::-webkit-input-placeholder {
  color: rgba(0,0,0,0.8);
  text-transform: uppercase;
}
.filialcodeindex input[type="text"]::-webkit-input-placeholder {
  color: rgba(0,0,0,0.6);
  text-transform: uppercase;
  text-align: center;
}
#hexin1, #hexin2, #hexin3, #hexin4, #hexin5, #hexin6 {
background-image: url('../img/maerz19/hex1-red.png');
}
.activehex {
    background-image: url('../img/maerz19/hex1-active-red.png') !important;
}
 .hexagon {   overflow: hidden;
    width: 321px;
    height: 279px;
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;
    visibility: visible;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.hexagon-container {
  position: absolute;
  width: 321px; 
  height: 279px;
  background-size: auto 317.5426px;
  background-position: center;
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
    cursor: pointer;
}
.hexaformular .hexagon-container:nth-of-type(1) {
    top: 0;
    left: 300px;
}
.hexaformular .hexagon-container:nth-of-type(2) {
    top: 150px;
    left: 559px;
}
.hexaformular .hexagon-container:nth-of-type(3) {
    top: 447px;
    left: 559px;
}
.hexaformular .hexagon-container:nth-of-type(4) {
    left: 300px;
    bottom: 0;
}
.hexaformular .hexagon-container:nth-of-type(5) {
    top: 447px;
    left: 41px;
}
.hexaformular .hexagon-container:nth-of-type(6) {
    top: 150px;
    left: 41px;
}
.hexin1-1 {
    overflow: hidden;
    width: 321px;
    height: 279px;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.hexaformular .submitset {
    position: absolute;
    bottom: 30px;
    right: 55px;
    padding: 0;
    margin-top: 0;
}
.control-group {
    text-align: left;
    vertical-align: top;
}
.control {
    position: relative;
    display: block;
    margin-bottom: 15px;
    padding-left: 55px;
    padding-top: 14px;
    cursor: pointer;
}
.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.control__indicator {
    position: absolute;
    top: 2px;
    left: 0;
    width: 40px;
    height: 40px;
    background: #fefffc;
}
.control--radio .control__indicator {
    border-radius: 50%;
}
/* Hover and focus states */
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
    background: #fefffc;
}

/* Checked state */
.control input:checked ~ .control__indicator {
    background: #cb8686;
}

/* Hover state whilst checked */
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
    background: #cb8686;
}

/* Disabled state */
.control input:disabled ~ .control__indicator {
    pointer-events: none;
    opacity: .6;
    background: rgba(229, 209, 144, .3);
}

/* Check mark */
.control__indicator:after {
    position: absolute;
    display: none;
    content: '';
}

/* Show check mark */
.control input:checked ~ .control__indicator:after {
    display: block;
}

/* Checkbox tick */
.control--checkbox .control__indicator:after {
    top: 8px;
    left: 16px;
    width: 8px;
    height: 20px;
    transform: rotate(45deg);
    border: solid #fff;
    border-width: 0 2px 2px 0;
}

/* Disabled tick colour */
.control--checkbox input:disabled ~ .control__indicator:after {
    border-color: #7b7b7b;
}
input[type="submit"]{
    background: #7b1f1d;
    border: 1px solid #7b1f1d; 
}
.button {
    background: #b95953;
    border: 1px solid #b95953;
}
input[type="submit"],
.button {
    color: #ffffff;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 20px 40px;
    -webkit-appearance: none;
    font-size: 17px;
    -webkit-border-radius: 0;
    border-radius: 0;
}
input[type="submit"]:hover, input[type="submit"]:focus,
.button:hover, .button:focus {
    background: #ffffff;
    color: #7b1f1d !important;
    border: 1px solid #7b1f1d;
    cursor: pointer;
    outline: none;
}
    .datenformular input:focus {
        background: rgba(255,255,255,1);
        color: #000000;
    }
    span.tostext {
        font-size: 85%;
        line-height: 1.15em;
    }
    span.newsletter-agreement {
    margin-bottom: 1em;
    }
    a.tos {
        text-transform: uppercase;
        color: #000000;
        text-decoration: underline;
        background: none !important;
    }
    a.tos:focus, a.tos:hover, a.tos:visited {
        text-decoration: underline !important;
    }
    a:focus, a:visited, a:hover {
        text-decoration: none !important;
    }
    label[for=newsletter] {
    vertical-align: middle;
    }
    .submitset {
        margin-top: 18px;
        padding: 0 0 0 76px;
    }
    .left50 {
    width: 320px;
    margin-right: 53px;
    }
    .right50 {
        width: 320px;
        display: inline-block;
    }
    .left66 {
        width: 420px;
        margin-right: 53px;
        display: inline-block;
    }
    .right33 {
        width: 220px;
        display: inline-block;
    }
    .left33 {
        width: 220px;
        margin-right: 53px;
        display: inline-block;
    }
    .right66 {
        width: 420px;
        display: inline-block;
    }
    .fullw {
        width: 100%;
    }
    .formularbg {
    background-image: url('../img/maerz19/formular-bg-red.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 37px 76px;
    }
    form.filialcodeindex {
        text-align: center;
        display: block;
        padding: 546px 0 0;
    }
    input.fade-in.two.startknopf {
        display: inline-block;
        width: 100%;
        height: 100%;
        text-align: center;
        color: #fff;
        font-size: 50px;
        text-transform: uppercase;
        font-weight: bold;
        background: none;
        border: none;
    }
    input[type="submit"].startknopf:hover,
    input[type="submit"].startknopf:focus,
    input[type="submit"].startknopf:active {
        color: #ffffff !important;
        border: none;
    }
    .filialcodeindex input[type="text"] {
        padding: 14px 21px;
        font-size: 20px;
        color: #222222;
        text-align: center;
    }
    .startknopf { display: inline-block; width: 100%; height: 100%; text-align:center; color: #fff; font-size:50px;
            text-transform: uppercase;
            font-weight: bold;
            padding: 573px 0 0;}
.codeausgabe {
    letter-spacing: 30px;
    font-size: 56px;
    text-align: center;
    display: inline-block !important;
    padding: 20px 10px 20px 40px;
    background: rgba(238, 238, 238, 0.34);
    border: 1px solid rgba(27, 16, 2, 0.75);
}
.simpleblue .startknopf.infotext {
    padding-top: 108px;
    font-size: 50px;
    line-height: 1.2em;
}
.abgelehnt .simpleblue .startknopf.infotext {
    padding-top: 278px;
    font-size: 42px;
    line-height: 1.2em;
}
.step3a .simpleblue .startknopf.infotext {
    padding-top: 132px;
    font-size: 50px;
    line-height: 1.2em;
    height: auto !important;
}
.step3a .infotext span {
    display: block;
    margin-bottom: 1.2em;
}
.win .startknopf.infotext {
    padding-top: 688px;
    font-size: 50px;
    line-height: 1.2em;
}
.simpleblue {
    text-align: center;
}
.simpleblue .button {
display: inline-block;
    padding: 20px 70px;
    margin-top: 32px;
}
.step3a .simpleblue .button {
display: inline-block;
    padding: 20px 70px;
    margin-top: 20px;
}
.abgelehnt .simpleblue .button {
display: inline-block;
    padding: 20px 70px;
    margin-top: 108px;
}
.win .button {
display: inline-block;
    padding: 20px 70px;
margin-top: 68px;
}
        #main .header {padding-left:155px;width:100%;}
            #main .header .left,
            #main .header .right {background: #7A8091; /* Old browsers */background: -moz-linear-gradient(top, #999999 0%, #333333 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#333333)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #999999 0%,#333333 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #999999 0%,#333333 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #999999 0%,#333333 100%); /* IE10+ */background: linear-gradient(top, #999999 0%,#333333 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
            }
    


            #main .header .title {}
            #main .header .right {right: 10px;left: auto;}
        .confetti { background-image: url('../img/confetti.png'); background-size: cover; background-position: center; position:absolute;
    width: 1024px;
    height: 1269px;
    position: absolute;
    top: 0;
}
        #main .content { height: 1203px; width: 100%; }
            /* #main .content>:first-child {margin-top:0 !important;} */
            #main .content .title {font-size:18px;font-weight:bold;margin:20px 0 10px;}
            #main .content .title2 {color:#4C536C;font-size:16px;font-weight:bold;margin:20px 0 10px;}
            #main .content .title3 {}
            #main .content .title4 {}
            #main .content .title5 {}
            #main .content>p {color:#4C536C;margin:10px 0;text-shadow:0 1px 1px #ccc;}
            #main .content p.note {color:#4C536C;font-size:12px;text-align:center;text-shadow:0 1px 1px #ccc;}
            .footer-container { line-height: 50px; font-size: 20px; }
            /* Box white */
            #main .content .box-white {background:#fff;border:1px solid #B4B7BB;border-radius:10px;}
                #main .content .box-white p {color:#000;border-bottom:1px solid #B4B7BB;font-weight:bold;margin:0;padding:10px;}
                    #main .content .box-white p:last-child {border-bottom:none;}
                #main .content .box-white p span {color:#4C556C;float:right;font-weight:normal;}
                    #main .content .box-white p span.detail {color: #999;float: none;font-size:12px;margin-left:5px;}
                    #main .content .box-white p span.arrow {color: #666;float: none;font-family: monospace;font-weight: bold;margin-left: 5px;text-shadow: 0 1px 1px #666;}
            
            /* Tables */
            #main table {margin:20px 0 10px;width:100%;}
                #main table thead th {color:#848B9A;font-size:90%;font-weight:normal;margin:20px 0 10px;padding-bottom:10px;text-align:left;}
                    #main table thead th:first-child {color:#000;font-size:16px;font-weight:bold;}
                #main table tbody {background:#fff;border:1px solid #B4B7BB;border-radius:10px;/* not working */}
                    #main table tbody tr {border-bottom:1px solid #B4B7BB;}
                        #main table tbody tr:last-child {border-bottom:none;}
                        #main table tbody tr td {color:#4C556C;padding:10px 0;}
                            #main table tbody tr td:first-child {color:#000;padding-left:10px;}
                            #main table tbody tr td:last-child {padding-right:10px;}
                            
                            /* Dirty fix attempt for tbody border-radius */
                            #main table tbody {border-spacing: 0;}
                                #main table tbody tr {border:1px solid #B4B7BB;border-radius:10px;}
                                #main table tbody tr:first-child td:first-child {border-top-left-radius:10px;}
                                #main table tbody tr:first-child td:last-child {border-top-right-radius:10px;}
                                #main table tbody tr:last-child td:first-child {border-bottom-left-radius:10px;}
                                #main table tbody tr:last-child td:last-child {border-bottom-right-radius:10px;}
                                #main table tbody tr:last-child {border-bottom:1px solid #B4B7BB;}
                /* Links */
                a {color:#0085d5;text-decoration:none;-webkit-touch-callout: none;}
                #main .content .box-white p a,
                #main .content table a {display: block;padding: 10px;margin: -10px;}
                /* Forms and buttons */
                #main .content p label {width:15%;} /* Labels not currently clickable without scripting */
                #main .content p input[type=text],
                #main .content p input[type=password],
                #main .content p select {background:none;border:none;color:#4C556C;float:right;font-size:14px;margin-top: -1px;width:84%;}
                #main .content p select {margin-right:15px;}
                #main .content .button {color:#fff;cursor:pointer;}
                #main .content .button.red {background: #D42E32; /* Old browsers */
background: -moz-linear-gradient(top, #d58e94 0%, #d42e32 50%, #be1012 51%, #90191b 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d58e94), color-stop(50%,#d42e32), color-stop(51%,#be1012), color-stop(100%,#90191b)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #d58e94 0%,#d42e32 50%,#be1012 51%,#90191b 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #d58e94 0%,#d42e32 50%,#be1012 51%,#90191b 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #d58e94 0%,#d42e32 50%,#be1012 51%,#90191b 100%); /* IE10+ */background: linear-gradient(top, #d58e94 0%,#d42e32 50%,#be1012 51%,#90191b 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d58e94', endColorstr='#90191b',GradientType=0 ); /* IE6-9 */
border-color:#9A8185;}
    #sidebar {background:#BCBEC4;border-right:1px solid #000;height:100%;left:0;position:fixed;top:0;vertical-align:top;width:300px;z-index:1;}
        #sidebar .header {width:300px;}
            #sidebar .header .title {}
        #sidebar .content {padding: 43px 0 20px 0;}
            #sidebar .content .nav {}
                #sidebar .content .nav a {background:#D9DCE0;border-top:1px solid #E7EAED;border-bottom:1px solid #D0D3D7;color:#000;display:block;font-weight:900;height: 17px;padding: 12px 10px 16px 10px;text-decoration:none;}
                    #sidebar .content .nav a.active {background: #0375EE;/* Old browsers */background: -moz-linear-gradient(top, #058CF5 0%, #015DE6 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#058CF5), color-stop(100%,#015DE6)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #058CF5 0%,#015DE6 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #058CF5 0%,#015DE6 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #058CF5 0%,#015DE6 100%); /* IE10+ */background: linear-gradient(top, #058CF5 0%,#015DE6 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#058CF5', endColorstr='#015DE6',GradientType=0 ); /* IE6-9 */
                    border-top:1px solid #015DE6;color:#fff;text-shadow:0 1px 1px #333;}
                    #sidebar .content .nav a span {color:#4C556C;float:right;font-weight:normal;}
                        #sidebar .content .nav a.active span {color:#fff;}
                    #sidebar .content .nav a .ico {background:#999;border-radius:5px;display: inline-block;float: none;height: 28px;margin: -5px 10px 0 0;vertical-align: middle;width: 28px;}
                    #sidebar .content .nav a .info {background: #E20000;border: 1px solid #C00;border-radius: 100%;box-shadow:0 1px 1px #999;color: white;font-size: 12px;display: block;padding: 1px 5px;}
            #sidebar .content p {color:#4C536C;font-size:14px;padding:10px;text-shadow:0 1px 1px #ccc;}

/* iPad pro 10.5'' 834px x 1112px */
@media only screen and (max-width: 834px) {
    .step1, .step3a, .step3b, .abgelehnt { background-image: url('../img/maerz19/iPad-lotterygame-step1bgr10-red.jpg'); background-repeat: no-repeat; background-position: top center; background-size: cover; }
    .step2, .step3  { background-image: url('../img/maerz19/iPad-lotterygame-step2bgr10-red.jpg'); background-repeat: no-repeat; background-position: top center; background-size: cover; }
    .tos { background-image: url('../img/maerz19/iPad-lotterygame-step3bgr10-red.jpg'); background-repeat: no-repeat; background-position: top center; background-size: cover; }
    #wrap {
        width: 834px;
        height: 1015px;
    }
    #main {
        padding: 0 40px;
    }
    .step3 .content {
    padding-top: 66px;
    }
    #main .content {
    height: 970px;
    }
    #main.tos .content {
    height: 970px;
    }
    .step1 .content, .step3a .content, .abgelehnt .content {
    padding-top: 190px;
    }
    .car, .simpleblue {
        width: 695px;
        height: 604px;
    }
    form.filialcodeindex {
        padding: 470px 0 0;
    }
    .startknopf {
        padding: 470px 0 0;
        font-size: 38px;
    }
    .footer-container {
    line-height: 36px;
    font-size: 16px;
    }
    .datenformular {
        width: 695px;
        height: 546px;
    }
    .step2 .content {
    padding-top: 150px;
    }
    .hexaformular {
    height: 743px;
    }
    .hexagon-container {
    width: 277px;
    height: 240px;
    }
    .hexaformular .hexagon-container:nth-of-type(1){
        left: 238px
    }
    .hexaformular .hexagon-container:nth-of-type(2) {
        top: 126px;
        left: 457px;
    }
    .hexaformular .hexagon-container:nth-of-type(3) {
        top: 377px;
        left: 457px;
    }
    .hexaformular .hexagon-container:nth-of-type(4) {
        left: 238px;
    }
    .hexaformular .hexagon-container:nth-of-type(5) {
        top:  377px;
        left: 19px;
    }
    .hexaformular .hexagon-container:nth-of-type(6) {
        top: 126px;
        left: 19px;
    }
    .hexagon {
        width: 277px;
        height: 240px;
    }
    .odometer.odometer-auto-theme, .odometer.odometer-theme-default {
        line-height: 219px;
        font-size: 90px;
    }
    .hexin1-1 {
        width: 277px;
        height: 240px;
    }
    .mittetext {
    width: 220px;
    left: 263px;
    top: 313px;
    font-size: 19px;
    }
    .hexaformular .submitset {
    bottom: 23px;
    right: 41px;
    }
    .car, .simpleblue {
    width: 695px;
    height: 604px;
    }
    .step1 .content, .step3a .content, .abgelehnt .content {
    padding-top: 172px;
    }
    .step3a .simpleblue .startknopf.infotext {
    padding-top: 99px;
    font-size: 38px;
    }
    .codeausgabe {
        margin-bottom: .9em !important;
    }
    .step3a .simpleblue .button {
    margin-top: 12px;
    }
    .left66 {
    width: 353px;
    margin-right: 31px;
    }
    .submitset .left66 {
        width: 470px;
        margin-right: 0;
    }
    .submitset div:nth-of-type(2){
        width: 106px !important;
    }
    span.tostext {
    font-size: 65%;
    }
    .formularbg {
        padding: 28px 57px;
    }
    .formularbg .center img {
    width: 75px;
    height: 75px;
    }
    .right50 {
    width: 272px;
    }
    .left50 {
    width: 272px;
    margin-right: 31px;
    }  
    .right33 {
    width: 191px;    
    }
    .right66 {
    width: 353px;
    }
    .left33 {
    width: 191px;
    margin-right: 31px;
    }
    .datenformular input{
        padding: 18px 21px;
        font-size: 16px;
        margin-bottom: 17px;
    }
    label[for=newsletter] {
        font-size: 14px;
    }
    .control__indicator {
        width: 35px;
        height: 35px;
    }
    .control--checkbox .control__indicator:after {
        top: 6px;
        left: 13px;
    }
    .submitset {
        padding: 0 0 0 56px;
    }
    .confetti {
        width: 834px;
        height: 1015px;
    }
    .step3b .content {
    padding-top: 89px;
    }
    .win {
    width: 695px;
    height: 719px;
    }
    .win .startknopf.infotext {
    padding-top: 581px;
    font-size: 38px;
    }
    .tos .content {
    padding-top: 186px;
    padding-left: 77px;
    padding-right: 95px;
    }
    .scrollme {
        height: 658px;
    }
    .tncheck .scrollme {
        overflow-y: auto;
    }
    .abgelehnt .simpleblue .startknopf.infotext {
    padding-top: 208px;
    font-size: 36px;
    }
    .abgelehnt .simpleblue .button {
    margin-top: 73px;
    }
}

/* iPad klein 768px x 1024px */
@media only screen and (max-width: 768px) {
    .step1, .step3a, .step3b, .abgelehnt { background-image: url('../img/maerz19/iPad-lotterygame-step1bgsm-red.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; }
    .step2, .step3  { background-image: url('../img/maerz19/iPad-lotterygame-step2bgsm-red.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; }
    .tos { background-image: url('../img/maerz19/iPad-lotterygame-step3bgsm-red.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; }
    #wrap {
        width: 768px;
        height: 927px;
    }
    #main {
        padding: 0 40px;
    }
    .step3 .content {
    padding-top: 56px;
    }
    #main .content {
    height: 885px;
    }
    #main.tos .content {
    height: 850px;
    }
    .step1 .content, .step3a .content, .abgelehnt .content {
    padding-top: 172px;
    }
    .car, .simpleblue {
        width: 640px;
        height: 553px;
    }
    form.filialcodeindex {
        padding: 400px 0 0;
    }
    .startknopf {
        padding: 430px 0 0;
        font-size: 38px;
    }
    .footer-container {
    line-height: 36px;
    font-size: 16px;
    }
    .datenformular {
        width: 638px;
        height: 502px;
    }
    .step2 .content {
    padding-top: 127px;
    }
    .hexaformular {
    height: 657px;
    }
    .hexagon-container {
    width: 241px;
    height: 209px;
    }
    .hexaformular .hexagon-container:nth-of-type(1){
        left: 226px
    }
    .hexaformular .hexagon-container:nth-of-type(2) {
        top: 112px;
        left: 420px;
    }
    .hexaformular .hexagon-container:nth-of-type(3) {
        top: 335px;
        left: 420px;
    }
    .hexaformular .hexagon-container:nth-of-type(4) {
        left: 226px;
    }
    .hexaformular .hexagon-container:nth-of-type(5) {
        top:  335px;
        left: 31px;
    }
    .hexaformular .hexagon-container:nth-of-type(6) {
        top: 112px;
        left: 31px;
    }
    .hexagon {
        width: 240px;
        height: 209px;
    }
    .odometer.odometer-auto-theme, .odometer.odometer-theme-default {
        line-height: 197px;
        font-size: 90px;
    }
    .hexin1-1 {
        width: 241px;
        height: 209px;
    }
    .mittetext {
    width: 220px;
    left: 235px;
    top: 269px;
    font-size: 19px;
    }
    .hexaformular .submitset {
    bottom: 23px;
    right: 41px;
    }
    .car, .simpleblue {
    width: 640px;
    height: 553px;
    }
    .step1 .content, .step3a .content, .abgelehnt .content {
    padding-top: 172px;
    }
    .step3a .simpleblue .startknopf.infotext {
    padding-top: 99px;
    font-size: 38px;
    }
    .codeausgabe {
        margin-bottom: .9em !important;
    }
    .step3a .simpleblue .button {
    margin-top: 12px;
    }
    .left66 {
    width: 315px;
    margin-right: 37px;
    }
    .submitset .left66 {
        width: 470px;
        margin-right: 0;
    }
    .submitset div:nth-of-type(2){
        width: 106px !important;
    }
    span.tostext {
    font-size: 65%;
    }
    .formularbg {
        padding: 28px 57px;
    }
    .formularbg .center img {
    width: 75px;
    height: 75px;
    }
    .right50 {
    width: 240px;
    }
    .left50 {
    width: 240px;
    margin-right: 37px;
    }  
    .right33 {
    width: 166px;    
    }
    .right66 {
    width: 315px;
    }
    .left33 {
    width: 166px;
    margin-right: 37px;
    }
    .datenformular input{
        padding: 14px 17px;
        font-size: 16px;
        margin-bottom: 17px;
    }
    label[for=newsletter] {
        font-size: 14px;
    }
    .control__indicator {
        width: 35px;
        height: 35px;
    }
    .control--checkbox .control__indicator:after {
    top: 6px;
    left: 13px;
    }
    .submitset {
            padding: 0 0 0 56px;
    }
    .confetti {
        width: 768px;
        height: 927px;
    }
    .step3b .content {
    padding-top: 89px;
    }
    .win {
    width: 637px;
    height: 639px;
    }
    .win .startknopf.infotext {
    padding-top: 516px;
    font-size: 38px;
    }
    .tos .content {
    padding-top: 186px;
    padding-left: 72px;
    padding-right: 72px;
    }
    .scrollme {
        height: 576px;
    }
    .abgelehnt .simpleblue .startknopf.infotext {
    padding-top: 208px;
    font-size: 36px;
    }
    .abgelehnt .simpleblue .button {
    margin-top: 73px;
    }
    .felderset {
    margin-top: 16px;
    }
}