
.toggleMobile { display: none; }
/* .hideMobile { display: block; } */
.showMobile { display: none; }


@media screen and (max-width: 1000px) {
	.showMobile { display: block; }
	.hideMobile { display: none; }

	#topnav_wrapper { height: 70px; }
	#topnav_back { display: none; }
	#LogoMobile { height: 36px; padding: 15px; }

	#ref_backgrounds, #slider-wrapper, #subnav { display: none !important; }
	#root, #footer, #topnav_wrapper { max-width: 1000px; min-width: 0; width: 100% !important; }
	body #root-wrapper #content-area { width: 100% !important; float: none !important; box-sizing: border-box; padding: 20px; margin: 0 !important; }
	body #root-wrapper #content-area #main-content { padding: 0; margin: 0; }
    body.lcontact #main-content, body.lcontact #content-area { min-width: 0 !important; width: 100% !important; }

	#root-wrapper, #footer-wrapper { min-width: 0; }
	#root-wrapper.produkte { padding: 0; }

    #content-area #main-content table { display: block; width: 100%; }
    #content-area #main-content table img { display: block; width: 100% !important; }
    #content-area #main-content table ul { padding: 0 !important; }
    #content-area #main-content table tbody { display: block; width: 100%; }
    #content-area #main-content table tr { display: block; width: 100%; }
    #content-area #main-content table tr td { display: block; width: 100%; }
    #content-area #main-content table tr th { display: block; width: 100%; }

    #image-video-demo > div { float: none !important; width: 100% !important; }
    #image-video-demo .videolink { background: none; width: 100%; height: auto; box-sizing: border-box; margin: 0 !important; display: block; }
    #image-video-demo .videolink img { width: 100%; }
    #image-video-demo .videolink .videocover { height: 100%; width: 100%; box-sizing: border-box; background-position: center center; background-size: cover; }

	.contentbox { width: 33.33% !important; margin: 0 !important; padding: 0 20px; box-sizing: border-box; }
    .contentbox img { width: 100% !important; }
	.contentbox .cbcontent-area { background: #fff !important; border: 1px solid #888; }
	.contentbox .cbbottom, .contentbox .cbtop { background: none !important; }

    body.lcontact #topnav_wrapper, body.lcontact #slider_wrapper, body.lcontact #root_wrapper, body.lcontact #footer_wrapper, body.lcontact #slider, body.lcontact #root, body.lcontact #footer { min-width: 0 !important; max-width: 100%; width: 100%; }
    body.lcontact #root { margin-top: 0; }
    body.lcontact .fixbox { background: none; margin: 0 0 0 0 !important; padding: 0; width: 100%; }
    body.lcontact #ContactAddForm { display: none; }
    #MobileContactForm input, #MobileContactForm textarea { display: block; margin: 0 0 10px 0; width: 100%; box-sizing: border-box; padding: 10px; font-family: inherit; font-size: inherit; border: 1px solid grey; }
    #MobileContactForm textarea { height: 200px; }
    #MobileContactForm input[type=text]:focus,
    #MobileContactForm textarea:focus { background: #d6ffd6; }
    #MobileContactForm input[type=submit] { cursor: pointer; color: #fff; background-color: #141414; }
    #MobileContactForm input[type=submit]:hover { background-color: #00BC00; }
    #MobileContactForm input[type=submit]:active { background-color: #00BC00; }

    #reference_slider, .navi-ref, .refbutton { display: none; }
    #ReferenceMobile * { text-align: center !important; }
    #ReferenceMobile img { display: block; width: 100% !important; }
    #ReferenceMobile > div { margin-bottom: 70px; }
    #ReferenceMobile > div:last-child { margin-bottom: 0; }

    a[rel="publisher"] { display: none !important; }
    #footer ul { display: none; }
    #footer ul[data-url="add"] { text-align: center; display: block; }
    #footer ul[data-url="add"] > li { width: 100%; float: none; }
    #footer ul[data-url="add"] li { padding: 0; }
    #footer ul[data-url="add"] img { margin-top: 20px; }

	.toggleMobile { display: block; position: absolute; top: 15px; right: 15px; width: 40px; height: 36px; cursor: pointer; z-index: 999; }
    .toggleMobile span { display: block; position: absolute; width: 40px; height: 8px; left: 0; background: #00bc00;
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95); }
    .toggleMobile span.menu1 { top: 0; }
    .toggleMobile span.menu2 { top: 14px; }
    .toggleMobile span.menu3 { top: 28px; }

    .toggleMobile.active span.menu1 { top: 14px;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
            transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    }
    .toggleMobile.active span.menu2 {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
            transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    }
    .toggleMobile.active span.menu3 {
            opacity: 0;
            -webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
            transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
    }

    #MobileMenu { position: absolute; z-index: 50; top: 70px; left: 0; width: 100%; display: none; list-style: none; padding: 0; margin: 0; }
    #MobileMenu li a { display: block; background: #fff; color: #00bc00; padding: 12px 0; text-decoration: none; letter-spacing: 0.1em; text-align: center; border-bottom: 1px solid #00bc00; }
    #MobileMenu li .before, #MobileMenu li .after { display: none; }
    #MobileMenu ul { display: block; list-style: none; margin: 0; padding: 0; }
    #MobileMenu ul a { font-size: smaller; background: #00bc00; color: #fff; }
}


@media screen and (max-width: 900px) {
    .contentbox { width: 50% !important; }
}

@media screen and (max-width: 700px) {
    .contentbox { width: 100% !important; }
}