﻿@media all and (max-width:1200px) {
    body {
    }

    .rotated{
        transform:rotate(-90deg);
        -ms-transform:rotate(-90deg);
        -moz-transform:rotate(-90deg);
        -webkit-transform:rotate(-90deg);
        -o-transform:rotate(-90deg);
    }

    .mobileProdukteOpen{
        background-image:url("/Masterpages/Images/icon_pfeil.png")!important;
    }

    #Viewport {
        width: 100%;
    }

    .Inner {
        display: none;
    }

    #HeaderMobileWrapper{
        display:block;
        margin-top:60px;
        text-align:center;
        margin-bottom: 20px; 
    }
    #HeaderMobileNavProdukte{
        height:25px;
        width:25px;
        float:left;
        background-image:url("/MasterPages/Images/nav-icon.png");
        background-size:contain;
    }
    #HeaderMobileWrapper img{
        height:80px
    }
    #HeaderMobileIconsWrapper img{
        height:25px;
    }
    #HeaderMobileIconsWrapper img:first-child{
        float:left;
    }
    #HeaderMobileIconsRechts{
        float: right;
        width: auto;
        min-width: 160px !important;
        margin-right: 20px;
        text-align:right;
    }
    #HeaderMobileIconsRechts img:nth-child(2){
        margin:0 0px 0 20px;
    }
    #pnlWarenkorbMobileWrapper{
            width: 80px;
        float: left;
        margin-left: 40px;
    }
        #pnlWarenkorbMobileWrapper img{
            margin-right:10px;
        }
        #pnlWarenkorbMobileWrapper span{
            font-size:1.5em
        }


    #HeaderMobile{
        display:block;
        color:white;
        background-color:#434443;
        width:100%;
        padding:10px 10px 0 10px;
        height:35px;
        position:fixed;
        text-align:center;
        top:0;
        z-index:9999;
    }

    #HeaderMobile_udpMobileWarenkorb
    {
        width: 60px;
        position: relative;
            left: -12px;
            font-size: 11px;
            top: 10px;
    }
    #pnlNichtAngemeldet{
        font-size:1.5em;
    }
    
    #pnlArtikelMenu{
        display:none;
        position:relative;
        top:6px;
        left:-10px;
        width:75%;
        padding:5px;
        float:left;
        text-align:left;
        color:white;
        background-color:#434443;
        font-size:1.3em;
        line-height:30px;
        text-transform:uppercase;
        max-height:500px;
        overflow-y:scroll;
    }

    #mobile_nav{
        margin-left:20px;
        list-style:none;
    }
        #mobile_nav li ul{
            display:none;
            list-style:none;
            margin-left:20px;
        }
        #mobile_nav li ul li ul{
            display:none;
            margin:0;
            text-transform:capitalize;
        }

    .mobile_ebeneEins{
        text-transform:uppercase;
    }
    .mobile_ebeneEinsP{
        border-bottom:1px solid white;
        width:95%;
    }

    .mobile_ebeneZwei{
        font-weight:600;
    }
    .mobile_ebeneZweiP{
        border-bottom:1px solid white;
        width:95%;
    }

    #pnlMobileHotline{
        display:none;
        background-color:#434443;
        color:white;
        position:relative;
        top:6px;
        left:-10px;
        padding:10px;
        text-align:left;
    }
    #MobileHotlineAnsprechpartner{
        margin-bottom:30px;
    }
        #MobileHotlineAnsprechpartner span:first-child{
            font-size:1.8em;
            font-weight:600;
        }
        #MobileHotlineAnsprechpartner span:last-child{
            font-size:1.4em;
        }
    #MobileHotlineKontakt{

    }
        #MobileHotlineKontakt span:first-child{
            font-size:1.8em;
            font-weight:600;
        }
        #MobileHotlineKontakt span:last-child{
            font-size:1.4em;
        }

    #pnlArtikelMenu p:first-child{
        text-transform:none;
        margin-bottom:10px;
    }
    #pnlArtikelMenu span:first-child{

    }
    #pnlArtikelMenu #nav{
        margin-left:10px;
        list-style:none;
        padding-right:10px;
    }
        #pnlArtikelMenu #nav .ebeneEins{
            border-bottom:1px solid white;
        }
    #pnlArtikelMenu #nav li ul{
        margin-left:20px;
        list-style:none;
        text-transform:capitalize;
    }
        #pnlArtikelMenu #nav .ebeneZwei{
            border-bottom:1px solid white;
            font-weight:600;
        }

    #pnlFunktionsMenu{
        display:none;
        position:relative;
        width:75%;
        padding:5px;
        float:right;
        text-align:left;
        color:white;
        background-color:#434443;
        text-transform:uppercase;
        font-size:1.5em;
        line-height:40px;
        overflow-y:scroll;
    }
    #pnlFunktionsMenu #ProduktDetailsHeader{
        border:none;
        font-size:1em;
        font-weight:400;
        margin:0;
    }
    #pnlFunktionsMenu #pnlProduktDetailsCheckboxes{
        border:none;
        background-color:#434443;
        padding:0;
        font-size:.8em;
    }

    #pnlMobileLogin{
        display:none;
        width:100%;
        background-color:#434443;
        color:white;
        position:relative;
        top:6px;
        left:-10px;
        font-size:1.4em !important;
        padding:5px;
    }

    .Error {
        color: white;
        text-align: left; 
    }

    #MobileLoginHeaderWrapper{
        text-align:left;
        margin-bottom:20px;
    }
    #MobileLoginTextboxesWrapper{
        text-align:left;
        margin-bottom:20px;        
    }
        #MobileLoginTextboxesWrapper input[type=text]{
            width:90%;
            line-height:2em;
            text-indent:10px;
            font-size:1em;
        }
        #MobileLoginTextboxesWrapper input[type=password]{
            width:90%;
            line-height:2em;
            text-indent:10px;
            font-size:1em;
        }
    #MobileLoginBottomElements{
        width:100%;
        text-align:left;
        margin-bottom:20px;
    }
        #MobileLoginBottomElements input[type=checkbox]{
            float:left;
            width:initial;
            position:relative;
            
            width: 20px; 
            height: 20px; 
        }
        #MobileLoginBottomElements input[type=submit]{
            border:1px solid white;
            background-color:#434443;
            color:white;
            height:40px;
            width:30%;
            float:right;
            margin-right:20px;
        }

    #pnlMobileSuche{
        display:none;
        position:relative;
        left:-10px;
        width:100%;
        height:90px;
        background-color:#434443;
    }
    #tbMobileSuche{
        position:relative;
        top:20px;
        width:70%;
        line-height:35px;
        padding:0;
        text-indent:20px;
        font-size:1.5em;
    }
    #ibtnMobileSuche{
        position:relative;
        top:26px;
    }


    .left{
        display:none;
    }
    .right{
        width:100%;
    }
    #Sprache, #btnFlexView, #btnListView{
        display:none
    }


    .Produkt{
        width:100%
    }
    .ProduktWrapper{
        justify-content:space-around;        
    }

    /*  ### Produkte.aspx ###   */

    #ProduktWrapper {
        height: auto !important;
    }
    #ProduktBildWrapper{
        float:none !important;
        margin:0 auto;
    }
    .ProduktContent{
        width:100% !important;
        text-align:center;
    }
    .ProduktContent h2 {
        float:none !important;
    }
    .ProduktContent p{
        float:none !important;
    }
    .ProduktContent span:first-child{
        float:none !important;
    }
    #ProduktContentBottom{
        position:initial !important;
        width:100% !important;
    }
    #ProduktContentBottomPreis{
        float:none !important;
        text-align:center !important;
        width:250px;
        margin:0 auto;
    }
    #ProduktEinheiten{
        width:100% !important;
        margin:15px 0 15px;
    }
    #pnlAmpel{
        float:right;
        text-align:center !important;
    }
    #ProduktinformationenWrapper{
        text-align:center !important;
    }
    #ProduktEinheitenMerkzettel{
        float:left !important;
    }
    #ProduktEinheitenMerkzettelWarenkorb{
        width:140px !important;
        margin:0 auto;
        float:none !important;
    }
    #ProduktEinheitenMerkzettel{
        float:left;
    }
    #ProduktinformationenHeader{
        display:none;
    }
    #divProduktLinks{
        margin:15px auto 0;
    }
    #divProduktLinks p{
        padding:0 !important;
        margin:0 3px !important;
        width:23% !important;
    }
    #ProduktinformationenTable{
        margin:15px auto 0;
    }
    #ProduktinformationenTable td:nth-child(even){
        width:200px !important;
    }

    /*  ### Merkzettel.aspx ### */

    #checkoutProduktBild{
        display:none;
    }
    #checkoutProdukt{
        max-height:none !important;
    }
    #checkoutProduktContent{
        width:100% !important;
        text-align:center;
    }
    #checkoutProduktContentInfo{
        float:none;
        width:50%;
        margin:15px auto 0;
    }


    /*  ### content page ### */
    .mainmenu{
        justify-content:space-around;
    }
    .flexgrid div, .mainmenu div{
        width:100%;
    }
    
    nav.flexgrid.infobox DIV{
        width:100%
    }

    
}











/*      ####        Breakpoint Smartphone       ####        */


@media all and (max-device-width:1200px) {

    .flexgrid DIV {
        height: 170px;
        margin-bottom: 3px;
    }

    nav a {
        height: 170px;
    }

    .infobox {
        height: 170px;
        margin-bottom: 3px;
    }

    .mainmenu {
        margin-bottom: 3px;
    }

    #ddlSortierung {
        width: 80%;
    }

    #ProdukteTopControls {
        display: none;
    }

    #ProdukteTopControlsSortierung {
        display: none;
    }

    #Footer {
        display: none;
    }

    #FooterMobile {
        display: block;
        background-color: #434443;
        color: white;
        padding: 10px;
        font-size: 1.3em;
        line-height: 1.4em;
        Position: relative;
        bottom: -360px;
    }

        #FooterMobile div {
            margin-bottom: 10px;
            padding: 10px;
        }

            #FooterMobile div:nth-child(3) {
                margin-bottom: 20px;
            }

    #Anschrift p {
        font-weight: 600;
        margin-bottom: 10px;
    }

    #FooterMobileAdresse {
        line-height: 20px;
    }

        #FooterMobileAdresse img {
            height: 30px;
            float: left;
        }

    #FooterMobileTelefon {
        line-height: 30px;
    }

        #FooterMobileTelefon img {
            height: 30px;
            float: left;
        }

    #Copyright {
        border-top: 1px solid #dedede;
        padding-top: 10px;
    }

        #Copyright span:last-child {
            font-size: .9em;
        }



    .FooterMobileHeaders {
        color: #e3000b;
        text-transform: uppercase;
    }


    /*  ### Produkte    ### */
    .scrollup {
        display: none !important;
    }

    .Produkt {
        padding: 20px 20px 10px;
        height: 420px !important;
    }

    .ProduktePreisAmpel {
        width: 100% !important;
    }

    .ProduktPreisVEundAmpelWrapperFlex {
        width: 100%;
    }

    .ProduktButtonsFlex {
        width: auto !important;
        margin: 0 auto;
        padding-right: 10px;
        left: 0px;
        height: 50px;
        clear: both;
        top: 20px;
    }

        .ProduktButtonsFlex input[type=text] {
            
        }




    /*  ### Produkt ###    */


    .Produkt {
        text-align: center;
        width: 100% !important;
    }

    .ProduktContentFlex {
        display: none;
    }

    .ProduktContentFlex {
        display: block;
    }

    .Produkt .ProduktBild {
        display: block !important;
        margin: 0 auto !important;
    }

    .Produkt .ProduktPreis {
        width: 100% !important;
    }

        .Produkt .ProduktPreis .ProduktButtons {
            width: 50% !important;
            position: initial !important;
            margin: 0 auto;
        }

    .AufgerundetP {
        top: 500px;
        left: 0px;
        width: 100% !important;
        box-sizing: border-box;
    }
    /*  ### content page ### */

    .mainmenu {
        justify-content: space-around;
    }

        .mainmenu div {
            width: 100%;
        }

    #divSlider, #sliderBottomText {
        display: none;
        
    }
    .sliderInnerText{
        width:auto;
    }
    .cmslink {
        display: none;
    }

    nav.flexgrid.infobox DIV {
        width: 100%;
    }

    
    #ProduktinformationenWrapper{
        display:none;
    }
    
    footer{
        width: auto;
        
    }

    .pnlProdukteNichtAngemeldet{
        width:auto;
        height:auto;
        padding:20px;
        margin:10px;
    }


    /*  ### Registrieren ###    */

    #RegistrierungHeaderWrapper{
        width:100%;
    }

    #RegistrierungGrundlegend, #RegistrierungAdresse {
        float: none;
        width: 100%;
    }

        #RegistrierungGrundlegend input[type=text] {
            width: 90% !important;
            float: none !important;
        }

        #RegistrierungAdresse select {
            width: 95% !important;
            float: none !important;
        }

    #StrasseHausnummerWrapper {
        float: none !important;
        width: 90% !important;
    }

    #tbRegistrierungAdresseStrasse {
        width: 80% !important;
    }

    #tbRegistrierungAdresseHausnummer {
        width: 23% !important;
    }

    #RegistrierungAdresse input[type=text] {
        width: 95% !important;
        float: none !important;
    }

    #RegistrierungBottomElements {
        margin-top: 20px;
    }

    .g-recaptcha {
        float: none !important;
    }

    #btnRegistrieren {
        position: initial !important;
        float: left !important;
    }



    /*  ### Kontakt ### */
    #pnlKontaktHeader .KontaktLabel {
        line-height: initial !important;
    }

    #pnlKontaktContentLeft, #pnlKontaktContentRight {
        width: 100% !important;
    }

    .KontaktLabel {
        line-height: 3.5em !important;
    }

    #pnlKontaktContentLeft input[type=text] {
        width: 60% !important;
        line-height: 2em;
    }

    #pnlKontaktContentRight {
        margin-top: 20px;
    }

        #pnlKontaktContentRight input[type=text] {
            width: 100% !important;
            line-height: 2em !important;
            margin-bottom: 10px;
        }

    .tbKontaktBetreffText {
        width: 100% !important;
        padding: 0 !important;
    }

    /*  ### Newsletter ### */
    .newsletter {
        width: initial !important;
    }

    .newsletterLabel {
        line-height: 3.5em;
    }

    .newsletterDropdown {
        width: 64% !important;
        line-height: 2em;
    }

    .newsletterTextbox {
        width: 60% !important;
        line-height: 2em;
    }
}