﻿@charset "UTF-8";

.toggleMobile { display: none; }
/* .hideMobile { display: block; } */
.showMobile { display: none; }

@media screen and (max-width: 1000px) {
	.showMobile { display: block; }
	.hideMobile { display: none; }

	.centered { max-width: 1000px; width: auto; }

	#head-wrap { height: auto; }
	#head-content { height: 70px; }
	#headnav, #topnav, #subnav, #topnav-bar, #slider_wrapper, #head-bar, #left-content { display: none; }
	#logo { height: 50px; width: auto; left: 10px; top: 10px; position: absolute; margin: 0; }
	#logo img { height: 50px; }
	#social_links { margin: 0 auto; position: relative; left: auto; right: auto; }

	#main-content { margin: 0 !important; box-sizing: border-box; padding: 20px; }

    #content img { width: 100%; }
    #content table td { padding: 2px !important; display: block; float: left; }
    #content table td[width="4"], #content table td[width="30"] { display: none; }
    #content table:after { content: ''; display: block; clear: both; }

    .pages.startseite {}
    .umallenews .leftbox-wrapper { width: 50%; box-sizing: border-box; margin: 0; padding: 20px 10px; }
    .umallenews .leftbox, .umallenews .title, .umallenews .text { width: 100%; margin: 0; }
    .umallenews .text { box-sizing: border-box; padding: 10px 20px; text-align: center; }
    .umallenews .leftbox-wrapper img#leftbox-img { display: block; margin: 0; padding: 0; float: none; height: auto; width: 100%; }
    .pages.startseite .noMobileTable, .pages.startseite .noMobileTable > tbody, .pages.startseite .noMobileTable > tbody > tr, .pages.startseite .noMobileTable > tr { clear: both; width: 100%; box-sizing: border-box; display: block; }
    .pages.startseite .noMobileTable > tbody > tr > td, .pages.startseite .noMobileTable > tr > td { display: block; padding: 10px; }
    .pages.startseite #home_gmap { margin: 0; height: auto; width: 100%; box-sizing: border-box; }
    .pages.startseite #home_gmap iframe { width: 100% !important; }
    .pages.startseite #home_contact { height: auto; width: 100%; box-sizing: border-box; padding: 10px; margin: 0; }
    #home_contact_title, #home_contact table { width: 100%; }
    #home_contact table td { width: 50%; }
    #home_contact a { color: #000; }
    #home_contact_title { margin-bottom: 20px; }
    #home_contact_phone { padding: 0; margin: 0; }

    body.pages.handyman #content img { width: 65px; }
    body.pages.handyman #content table td { padding: 0 5px !important; margin: 0; width: 33.33%; box-sizing: border-box; }
    body.pages.handyman #content table td > div { width: auto; padding: 45px 10px; height: 330px; }

    #gallery-set { padding-top: 0; width: 100%; box-sizing: border-box; margin: -10px; }
    #gallery-set .gallery_item { margin: 0; padding: 10px; width: 25%; box-sizing: border-box; }
    #gallery-set .gallery_item img { width: 100% !important; height: auto !important; display: block; }
    #gallery-set .gallery_item span { display: block; width: 100%; left: auto; margin: 0; position: relative; top: auto; }

	/*#content_wrapper.type3 #content img { width: 100% !important; }*/

    #ContactMobile {}
    #ContactMobile h1 { box-sizing: border-box; }
	#ContactMobile:after { content: ''; display: block; clear: both; }
	#ContactMobile .left { float: left; width: 60%; box-sizing: border-box; padding: 0 20px 0 0; }
	#ContactMobile .left h2 { text-align: center; }
	#ContactMobile .left p { font-size: smaller; text-align: center; }
	#ContactMobile .left .cbutton { margin: 0 auto; display: block; width: 100%; }
    #ContactMobile .right { float: left; width: 40%; }
    #ContactMobile .right p { text-align: center; }
    #ContactMobile .right a { color: #000 !important; }
	#ContactMobile .itext { width: 100%; min-width: 100%; max-width: 100%; border: 1px solid #fdd700; color: #555; font-family: inherit; margin: 5px 0; padding: 10px; font-size: inherit; display: block; box-sizing: border-box; }
	#ContactMobile textarea { max-height: 200px; }

	.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: #fdd700;
                -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; top: 70px; left: 0; width: 100%; display: none; list-style: none; padding: 0; margin: 0; }
    #MobileMenu li a { display: block; background: #fff; color: #888; padding: 12px 0; text-decoration: none; letter-spacing: 0.1em; text-align: center; border-bottom: 1px solid #fdd700; }
    #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: #fdd700; color: #000; }

    #footer_content table, #footer_content table tbody, #footer_content table tr { display: block; width: 100%; }
    #footer_content table td { display: block; padding: 0; text-align: center; }
    #footer_content_handyman, #footer_content_contact, #footer_content_handwerk, #footer_content_title, #footer_content_text { border: none; margin: 0 0 0 0 !important; height: auto; display: block; width: 100%; padding: 10px 0 0 0 !important; }
    #footer_content_text { padding: 0 20px 20px 20px !important; box-sizing: border-box; }
    #footer_content_text ul { list-style: none; }
    #footer_content_text li::before { display: none; }
    #footer_content_text div { padding: 0; }
    #footer_content_contact table td { width: 100% !important; }
}

@media screen and (max-width: 870px) {
    #copyright .left, #copyright .right { text-align: center; float: none; }
    #copyright .right { font-size: 12px; padding-top: 30px; }
    #copyright .right a { font-size: 12px; }
}

@media screen and (max-width: 760px) {
    #ContactMobile .left, #ContactMobile .right { float: none; width: 100%; padding: 0; }
    #ContactMobile .right { text-align: center; margin-top: 30px; }

    body.pages.handyman #content table td { padding: 0 !important; width: 100%; float: none; }
    body.pages.handyman #content table td > div { height: auto; }
}

@media screen and (max-width: 560px) {
    .umallenews .leftbox-wrapper { float: none; width: 100%; }
}


/** for gallery */
@media screen and (max-width: 950px) {
    #gallery-set .gallery_item { width: 33.33%; }
}
@media screen and (max-width: 700px) {
    #gallery-set .gallery_item { width: 50%; }
}
@media screen and (max-width: 500px) {
    #gallery-set .gallery_item { width: 100%; float: none; }
}

a:link, a:visited, a {
    text-decoration: none;
    color: #000;
}