.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;
    }
    @font-face {
        font-family: 'Fira Sans';
        src: url('//img.ui-portal.de/ci/webde/global/fonts/fira/firasansot-medium-webfont.eot?#iefix') format('embedded-opentype'),
        url('//img.ui-portal.de/ci/webde/global/fonts/fira/firasansot-medium-webfont.woff') format('woff'),
        url('//img.ui-portal.de/ci/webde/global/fonts/fira/firasansot-medium-webfont.ttf') format('truetype'),
        url('//img.ui-portal.de/ci/webde/global/fonts/fira/firasansot-medium-webfont.svg#fira') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    #wrapper {
        min-width: 0;
    }
    #page-content {
        background-image: none;
    }
    h\:section > h1,
    .article-text > h1 {
        font-family: 'Fira sans', Verdana, Arial, Helvetica, sans-serif;
    }
    h\:section > h2,
    .article-text > h2 {
        font-family: 'Fira sans', Verdana, Arial, Helvetica, sans-serif;
    }
    #page-footer {
        border-bottom: none;
    }
    #footerNavlinks h\:nav h4,
    #footerNavlinks h\:nav .headline {
        font-family: 'Fira sans', Verdana, Arial, Helvetica, sans-serif;
        font-size: 19px;
        line-height: 26px;
    }
    #footerMainlinks {
        background-image: none;
    }
    .hide-6cols {
        display: inline-block;
    }
    .show-6cols {
        display: none;
    }
}

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

    html {
        background: #FFFFFF;
    }

    #wrapper {
        overflow: visible;
    }

    .hint h2 {
        font-size: 15px!important;
    }

    #page-header {
        margin: 0;
        width: 100%;
        padding: 0;
        top: 0;
        height: 44px;
    }

    #page-header h1 {
        position: absolute;
        top: 0px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        margin: 12px 0px 0px 0px;
        font-size: 20px;
        line-height: 44px;
        color: #FFFFFF;
        /*  */
        background: url(//img.ui-portal.de/cd/ci/gmx.net/brand-logo-s.svg) no-repeat 0 0;
        background-size: auto 20px;
        height: 20px;
        width: 62px;
    }

    #page-header h1 a span {
        display: inline-block!important;
        font-size: 29px;
        color: #FFF;
        line-height: 47px;
    }
    #page-header #header-service {
        line-height: 23px;
        font-size: 20px;
        font-weight: 400;
        color: #262626;
    }
    #page-header #header-brand {
        display: none;
    }
    #page-header h2 {
        display: none;
    }
    #page-header h2, #page-header h2 a {
        color: #FFF;
    }
    #page-nav {
        display: inline-block;
        width: 100px;
        float: right;

        z-index: 99999;
        border: none;
        background: transparent;
        height: 42px;
        /* width: 100%; */
        position: relative;
    }
    #main-nav {
        display: none;
    }

    #nav-logout a {
        background: url(http://img.ui-portal.de/millionenklick/gmx/logout-icon.png) no-repeat 5px !important;
        /* Bugfix START: BUG-5905 - Logout Button fehlt */
        margin-top: 4px; /* was margin-top: 11px; */
        height: 100%;
        width: 30px;
        /* Bugfix END */
    }

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

    #container {
        background-image: none;
        border: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        width: auto;
        min-width: 320px;
    }
    #page-content {
        left: 50%;
        width: 330px;
        margin-left: -165px;
        padding: 0px 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 {
        text-align: center;
    }

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

    #page-footer #footerAddition {
        width: 300px;
        margin: auto;
        padding: 0;
    }
    #footerAddition #footerNavlinks {
        margin-bottom: 15px;
        width: 320px;
        padding-top: 10px;
        height: 150px;
    }
    #footerAddition #footerNavlinks h\:nav:nth-child(3n+3) {
        clear: both;
        padding-top: 0;
    }
    #footerAddition #footerNavlinks h\:nav {
        padding-top: 40px;
        height: 80px;
    }
    #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;
    }
    #footerMOTD {
        display: none;
    }
    #footerMain, #footer-icons {
        display: inline-block;
    }
    #page-footer #footer-icons {
        padding-bottom: 35px;
        width: 318px;
    }
    #page-footer #footerMainlinks {
        height: auto;
        margin: auto;
        overflow: hidden;
        padding: 0 0 20px 0;
        width: 300px;
    }
    #page-footer #footerMain ul {
        overflow: hidden;
        height: 93px;
        width: 318px;
        border-bottom: none;
    }
    #page-footer #footerMain li {
        margin-left: 0;
        padding-left: 0;
        display: inline-block;
        width: 160px;
        background: none!important;
        text-align: left;
    }
    #page-footer #footerMainlinks ul {
        width: 320px;
    }
    #page-footer #footerMainlinks li {
        width: 140px;
        margin-right: 20px;
    }

    #page-footer a {
        color: #FFFFFF;
    }

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

    #page-content .hint {
        font: 400 11px/15px Verdana, Arial, Helvetica, sans-serif;
    }


    .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 {
        display: block;
        position: relative;
        top: 0;
        left: 16px;
        font-weight: bold;
        box-shadow: none;
        background: none;
        height: auto;
        width: auto;
    }
    .confirmation-two #zur-brand span {
        margin: 0;
        padding: 0;
        display: block;
        text-indent: 0;
    }
    .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;
    }
}