﻿@media all and (max-width: 1200px) {
    html {
        background-image: none;
        background-color: #fff;
    }

	.containerWrapper, .footerWrapper, .mobileNavigation ul ul, .mobileSubNavigationWrapper {
		min-width: 320px;
    	width: 100%;
	}

}


@media all and (max-width: 1090px) {
    
    .topHead .topHeadRight .bannerDescription {
        bottom: 10%;
    }
	

}

@media all and (max-width: 1050px) {
    
	/* head */
	
	
	
	.topHead .topHeadLeft .topLogo img {
		width: 30%;
		height: auto;
	}
	
    /* ModulNews */

    .ModulNews .ModernInputBox {
        width: 90%;
    }

}

@media all and (max-width: 950px) {
    
	/* head */
	
    .topHead .topHeadLeft .topInfo .topInfoLinks {
        display: none;
    }
	
	.topHead .topHeadLeft .topLogo img {
		width: 25%;
		height: auto;
	}
	

}

@media all and (max-width: 900px) {
	
    .topHead .topHeadLeft .topLogo {
		padding: 11% 6%;
	}
	
	.topHead .topHeadLeft .topLogo img {
		display: none;
	}
	
    /* Startseite (Willkommen) */

    .ContentStartPirk {
		position: unset;
	}
	
	.ContentStartPirk .pnlContent > .ModulContent:first-child {
		max-width: unset;
		min-height: unset;
	}
	
	.ContentStartPirk .pnlContent > .ModulContent:first-child h3 {
		width: unset;
		top: unset;
		left: unset;
		position: unset;
	}
	.ContentStartPirk .pnlContent > .ModulContent:first-child h4 {
		margin: unset;
	}
	.ContentStartPirk .EditWrapper .pnlContent > div:nth-child(3),
	.ContentStartPirk .EditWrapper .pnlContent > div:nth-child(4) {
		max-width: unset;
	}
	
	
	.ContentStartPirk .Sidebar {
		position: unset;
		right: unset;
		top: unset;
		width: unset;
	}
	
}

@media all and (max-width: 850px) {

    /* FOOTER */

    .footerWrapper .footer {
        height: auto;
    }

    .footerWrapper .footerLinks {
        margin: 20px auto 0;
    }

    .footerWrapper .footerLinks a {
        font-size: 115%;
    }

    .footerWrapper img {
        left: unset;
        margin: 35px 0 10px 0;
        max-width: 80%;
        position: relative;
    }

    .footerWrapper .footerCopyright {
        position: relative;
        margin: 0px;
        padding: 10px 0 10px 0;
    }
}

@media all and (max-width: 800px) {

    /* NAVIGATION */

    .mobileNavigation ul li a span {
        font-size: 3vw;
    }

    .mobileNavigation ul ul li a span {
        font-size:2.5vw;
    }
}

@media all and (max-width: 700px) {

    /* MAIN */

    .topInfo {
        font-size: 115%;
        text-align: center;
    }

    .topHead {
        display: inline-block;
    }

    
    .topHead .mobileMenu {
        display: inline-block;
        float: left;
        padding: 4% 0;
        width: 25%;
    }

    .topHead .mobileMenu a {
        display: inline-block;
        text-align: center;
        width: 100%;
    }

    .topHead .mobileMenu a span {
        color: #fff;
        font-size: 400%;
        font-size: 13vw;
        padding: 25% 0;
    }
        
    .topHead .topHeadLeftBackground {
        width: 100%;
		background-position: left top;
    }

    .topHead .topHeadLeft {
        width: 100%;
        float: none;
        display: inline-block;
        position: relative; 
		vertical-align: middle;
    }
	
	.topHead .topHeadLeft .topInfo {
		position: unset;
		right: unset;
		bottom: unset;
		display: inline-block;
		width: 100%;
		/*border-top: 1px solid #666;
		border-bottom: 1px solid #666;*/
	}
	.topHead .topHeadLeft .topInfo.topInfoSearch {
		border-top: unset;
		border-bottom: unset;
		display: none;
	}
	
	
	.SearchWrapper .Searchbox {
		width: calc(100% - 50px);
		
	}

    .topHead .topHeadLeft .topLogo {
        padding: 11% 0px;
        width: 75%;
        float: left;
    }

    .topHead .topHeadLeft .topLogo img {
        display: none;
    }


    .topHead .topHeadRight {
        width: 100%;
        float: none;
        position: relative;
		min-height: unset;
    }

    .topHead .topHeadRight img.bannerImage {
        width: 100%;
    }

    .topHead .topHeadRight .bannerDescription {
        right: 0;
        top: -1px;
        left: unset;
        bottom: unset;
        width: auto;
    }

    .topHead .topHeadRight .bannerDescription span {
        background-color: rgba(20, 20, 20, 0.5);
        font-size: 105%;
        padding: 5px 15px;
    }

    /* NAVIGATION */

    body.showMobileMenu {
        overflow: hidden;
        position: fixed;
        z-index: 1;
        display: block;
        height: 100%;
        width: 100%;
    }
    
    
    .topWrapper .topNavigation {
        display: none;
        visibility: hidden;
    }
    
    .middleWrapper .leftNavigation {
        display: none;
        visibility: hidden;
    }

    .middleWrapper .Content {
        margin: 0 0 0 0px;
    }

    .backgroundLeftNav {
        display: none;
        visibility: hidden;
    }


    .mobileNavigation {
        display: none;
    }

    .mobileNavigation.showMobileMenu {
        
        background-color: rgba(0, 0, 0, 0.75);
        display: block;
        left: 0px;
        top: 0px;
        position: fixed;
        z-index: 99999;
        width: 100%;
        height: 100%;
    }

    .mobileNavigation.showMobileMenu .mobileSubNavigationWrapper {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
    }

    .mobileNavigation.showMobileMenu .mobileSubNavigationWrapper::after {
        width: 100%;
        height: 50%;
        content: "";
        display: block;
    }


    /* Ebene 1 */

    .mobileNavigation ul li a span {
        font-size: 180%;
    }

    .mobileNavigation.showMobileMenu .mobileSubNavigationWrapper ul {
        display: block;
    }

    .mobileNavigation.showMobileMenu .mobileSubNavigationWrapper > ul {
        margin: 50px 0 0 0;
    }

    .mobileNavigation.showMobileMenu .mobileSubNavigationWrapper ul a {
        display: block;
        width: auto;
        padding: 7px 50px 7px 15px;
    }

    .mobileNavigation.showMobileMenu .mobileSubNavigationWrapper ul a span.fa {
        display: none;
        visibility: hidden;
    }

    .mobileNavigation.showMobileMenu .mobileSubNavigationWrapper ul li {
        width: 100%;
        margin: 0px;
    }

    .mobileNavigation.showMobileMenu .mobileSubNavigationWrapper > ul > li > div {
        background-color: #4b924b;
        position: relative;
    }

    .mobileNavigation.showMobileMenu .mobileSubNavigationWrapper > ul > li > div::after {
        color: #fff;
        content: "";
        font-family: FontAwesome;
        font-size: 180%;
        position: absolute;
        right: 15px;
        top: 13px;
        transition: transform 0.5s linear;
    }
    .mobileNavigation.showMobileMenu .mobileSubNavigationWrapper > ul > li.curNavPage > div::after {
        /*transform: rotate(90deg);*/
    }
    .mobileNavigation.showMobileMenu .mobileSubNavigationWrapper > ul > li.navClick > div::after {
        transform: rotate(90deg);
        transition: transform 0.5s linear;
    }
    
    .mobileNavigation.showMobileMenu .mobileSubNavigationWrapper > ul > li.curNavPage > div,
    .mobileNavigation.showMobileMenu  .mobileSubNavigationWrapper> ul > li:hover > div {
        background-color: #316e31;
    }
    
    /* Ebene 2 */

    .mobileNavigation ul ul li a span {
        font-size:150%;
    }

    .mobileNavigation.showMobileMenu  .mobileSubNavigationWrapper ul ul {
        position: relative;
        text-align: left;
       /*visibility: visible;*/
        display: none;
    }

    .mobileNavigation.showMobileMenu .mobileSubNavigationWrapper  ul li.curNavPage ul {
        /*display: inline-block;*/
    }

    .mobileNavigation.showMobileMenu .mobileSubNavigationWrapper  ul li.navClick ul {
        display: inline-block;
    }

    .mobileNavigation.showMobileMenu  .mobileSubNavigationWrapper ul li {
        width: 100%;
    }

    .mobileNavigation.showMobileMenu  .mobileSubNavigationWrapper ul ul a {
        padding: 7px 15px 7px 35px;
    }

    /* FOOTER */
    
    .footerWrapper {
        z-index: 0;
    }

    .footerWrapper .footer {
        height: auto;
    }

    .footerWrapper .footerLinks {
        margin: 20px auto 0;
    }

    .footerWrapper img {
        left: unset;
        margin: 35px 0 10px 0;
        max-width: 80%;
        position: relative;
    }

    .footerWrapper .footerCopyright {
        position: relative;
        margin: 0px;
        padding: 10px 0 10px 0;
    }

    /* ModulContent */

    h3.contentHeader {
        width: 95%;
    }


}
