.hide-2cols,
.hide-4cols,
.show-6cols {
    display: inline-block;
}
.show-2cols,
.show-4cols,
.hide-6cols {
    display: none;
}
#wrapper { overflow: visible;}

/* for all */
@media only screen and (min-width: 0) {
    html {
        -webkit-text-size-adjust: none;
        -moz-text-size-adjust: none;
        -ms-text-size-adjust: none;
        text-size-adjust: none;
    }

    #wrapper {
        min-width: 0;
    }

    #page-footer {
        border-bottom: none;
    }


    .hide-6cols {
        display: inline-block;
    }
    .show-6cols {
        display: none;
    }
}

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

    #wrapper {
        overflow: visible;
    }

    #page-header {
        background: #ffffff;
        border-bottom: 1px solid #dadada;
        margin: 0;
        padding-top: 0;
        width: 100%;
    }

    #page-header.header-simple {
        border-bottom: none;
    }
    #page-header #header-brand {
        display: inline-block;
        width: 32px;
        height: 32px;
        background-position: 100% 100%;
        background-repeat: no-repeat;
        background-image: url(https://img.ui-portal.de/ci/webde/global/logo_2019_32.svg);
        color: transparent;
        overflow: hidden;
        text-indent: -5em;
        top: 8px;
        left: 50%;
    }
    #page-header #header-service {
        display: none;
    }

    #nav-logout span {
        display: none !important;
    }

    #additional-nav li {
        margin: 0;
    }

    #page-nav {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        height: 48px;
        width: 100%;
        position: relative;
    }

    #main-nav {
        display: none;
    }

    #additional-nav li#nav-logout a {
        padding-left: 50px;
        margin-top: 10px;
    }

    #additional-nav li#nav-register {
        margin-top: 10px;
        margin-right: 10px;
        display: none !important;
    }

    #container {
        background-image: none;
        width: auto;
        min-width: 320px;
    }
    #page-content {
        left: 50%;
        width: 330px;
        margin-left: -165px;
        padding: 30px 0px 10px 0px;
    }
    #main {
        width: 327px;
        min-height: 0;
        overflow: hidden;
        margin: 0px;
        padding: 0px;
    }

    #main.large.startseite,
    #main.startseite { margin-bottom: 0px; }
    #main.large {margin:0px; padding: 0px;}

    #main #process-steps {
        background-image: none;
        box-shadow: none;
    }

    #breadcrumb {
        display: none;
    }

    .content-part-col6 { width: 300px; }
    .content-part-col5 { width: 300px; }
    .content-part-col4 { width: 300px; }
    .content-part-col3 { width: 300px; }

    .module-content.large { display: none;}

    #page-footer #footerOptional {
        display: none;
        height: auto;
    }

    #page-footer #footerAddition {
        width: 100%;
        padding: 0;
        display:table;
    }
    #footerAddition #footerNavlinks {
        width: 320px;
        margin: 0 auto;
        display:table;
        float:none;
        margin-bottom: 15px;
        padding-top: 10px;
    }
    #footerAddition #footerNavlinks h\:nav:nth-child(3n+3) {
        clear: both;
    }
    #footerAddition #footerNavlinks h\:nav {
        padding-top: 40px;
    }
    #footerAddition #footerNavlinks h\:nav h4,
    #footerAddition #footerNavlinks h\:nav .headline {
        top: 11px;
    }
    #footerAddition #footerIcons {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 17px;
        float: none;
        display: block;
        overflow: hidden;
        display:table;
    }
    #footerMOTD {
        display: none;
    }
    #page-footer #footerMainlinks {
        height: auto;
        overflow: hidden;
        padding: 0 0 20px 0;
        width: 100%;
    }
    #page-footer #footerMainlinks ul {
        width: 320px;
        margin: auto;
        padding-left: 0px;
    }
    #page-footer #footerMainlinks li {
        width: 140px;
        margin-right: 20px;
    }

    #page-content .hint,
    #page-content .hint-tipping {
        margin-left: 0px;
        margin-right:0px;
    }


    .hint.hint-step-one .arrow,
    .hint.hint-step-two .arrow,
    .hint.hint-step-three .arrow,
    .hint.hint-step-four .arrow {display: none;}

    #page-content #process-steps { width: 318px;}

    /* Step 1 */
    .step-one .module-two   { display: none;}
    .step-one .module-three { display: none;}

    /* Step 2 */
    .step-two .module-one   { display: none; }
    .step-two .module-three { display: none; }
    .step-two #stepMarker { left: 0px; }
    .step-two .module-two { width: 318px; }
    .step-two #tipping-module h2 { background-position: -377px -37px; }
    .step-two #tipping-module .stepContentZone { padding-left: 0px; }

    /* Step 3 */
    .step-three .module-one   { display: none; }
    .step-three .module-two { display: none; }
    .step-three #stepMarker { left: 0px; }
    .step-three .module-three { width: 318px; }
    .step-three #banner-module h2 { background-position: -732px -37px;}
    .step-three #tipping-module .stepContentZone { padding-left: 0px; }
    .step-three .stepBanner { margin-left: 7px; }

    /* Step 4 */
    .step-four .module-one   { display: none; }
    #page-content .module-content { display: none; }
    .step-four #message-module .banner { position:static; float: none; left: 0px; margin-top: 20px;}
    .step-four #stepMarker { left: 0px; }
    .step-four .module-three { width: 318px; }
    /*
    .step-four #tipping-module .stepContentZone { padding-left: 0px; }
    .step-four .stepBanner { margin-left: 7px; }
    */

    .confirmation-two #countdown,
    .confirmation-two .lotto-details { display: none; }

    .confirmation-two #zur-brand {
        background-image: none;
        position: static;
        text-indent: 0px;
        box-shadow: none;
        margin-top: 20px;
    }
    .confirmation-two .cta span {
        border-radius: none;
        padding: 0px;
        margin: 0px;
        padding: 20px 15px 13px 15px;
    }

    #main.confirmation-two { padding: 0px; }
    .confirmation-two #hero-image { display: none; }
    .confirmation-two .alt-img {
        display: block;
    }
    .confirmation-two .drawing-details {
        position: relative;
        font-size: 13px;
        top: 0px;
        left: 0px;
        bottom: 0px;
        padding: 20px 15px 13px 15px;
    }
    .confirmation-two .drawing-details .drawing-numbers {
        overflow: hidden;
    }

    .alt-img .hint { margin: 0px; }


}



@media only screen and (max-width: 340px) {
    #main {
        -webkit-transform: scale(0.97);
        -moz-transform: scale(0.97);
        -ms-transform: scale(0.97);
        -o-transform: scale(0.97);
        transform: scale(0.97);
    }
    #page-content {
        padding: 3px 0 10px;
    }
}