/* Displays less than 768px (Smartphones, Tablets etc.) */
@media screen and (max-width: 767px) {
    #fixed-button {
		display: none;
	}
	h1 {
		font-size:2em;
	}
    #nav-toolbar {
        text-align: center;
        top:82px;
        left: 20px;
        z-index:999;
        margin:0;
        float:inherit;
    }
    
    .fixed {position:inherit;}
        #logo-home-small {display:none!important;
    }

    .logo-home {
        background-position: center center;
        background-size: auto auto;
        display: inherit;
        margin-bottom: 0;
        width: 100%;
        position: inherit;
        margin-top:15px;
    }
    
    #menu-board {
        display:none;
    }
    
    #nav-top {
/*        top: 180px;*/
    }
    .breadcrumbs ul {
        display: inline-block;
        text-align: center;
        width: auto;
    }
    .banner-image {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        text-align:center;
        margin:0;
        padding:7px 0;
    }
    .banner-image span {
        display:none;
    }
    .tx-macinasearchbox-pi1 input[type="text"] {
        width: 100px;
    }
    .fifth-icon {
        display:inherit;
    }
	#title-image {
        padding: 20px 15px 10px;	
		margin-top:37px;
	}
    .flex-direction-nav {
		display:none;
	}
	.flex-caption {
		height:auto;
		min-height:34px;
		top:13%;
		left:4%;
		width:55%;
	}
	.flex-caption h3 {
	/*	display:none;*/
		font-size:1.2em;
		line-height:1.25em;
	}
    .flex-caption-sub {
		display:none;
	}
        .flex-control-nav {
            bottom: -7px;
            position: absolute;
            right: inherit;
            text-align: center;
            width: 100%;
        }
    .caption-title {
        font-size: 2.2em;
        padding-left: 0px;
    }
    ul.sf-menu li {
        width: 100%;
    }
	.news-list-item img {
		max-width:100%;
		height:auto;
	}
	.news-list-item p {
		float:left;
	}
	.news-list-item hr {
		clear:both;
	}
	.news-latest-category {
		float:left;
		padding-bottom:0.5em;
	}
	.news-single-img {
		max-width:100%;
		height:auto;
	}
	#content {
/*		padding: 15px;*/
	}
	input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="phone"], textarea {
        width: 95%;
    }
	.powermail_captchaimage {
        margin:15px 0 10px 0px;
    }
    img.powermail_captchaimage {
        top: -40px;
    }
	#footer .units-row {
		padding: 40px 3%;
	}
        #footer .footer-left, #footer .footer-middle, #footer .footer-right {
		float:none;
		max-width:100%;
		width:100%;
		margin-bottom:20px;
	}
	.footer-left, .footer-middle {
/*		border-bottom:1px solid #666258;*/
		padding-bottom:10px;
	}
	.footer-left {
                text-align:center;
	}
	.footer-sitemap ul {
		margin: 0 0 15px;
	}
	#footer .footer-sitemap li.first-level {
		float: none;
	}
    #footer blockquote {
        background-position: 10px 33px;
        padding: 30px 20px 10px 70px;
    }
    #footer blockquote h1 {
        font-size: 1.4em;
        line-height: 1.35em;
    }
    .scrollup {
        right:5px;
        bottom:5px;
    }
    
    blockquote {
        background-position: 0 29px;
        background-size: 45px auto;
        margin-left: 0;
        padding-left: 55px;
        padding-top: 25px;
    }
    blockquote p.bodytext, blockquote p {
        font-size: 1.35em;
        line-height: 1.35em;
        margin-bottom: 1.5em;
    }
    .csc-textpic-intext-left-nowrap .csc-textpic-text {margin-left:0 !important;}
    .ce-left .ce-gallery, .ce-column {float: unset;}
    .ce-right .ce-gallery {float: unset;}
    .csc-textpic-intext-right-nowrap .csc-textpic-text {margin-right:0;}
	.forms.columnar label {text-align: left;}
	.csc-mailform .forms.columnar .csc-form-element-submit {margin-left: 0;}
	fieldset.fieldset-subgroup ol {margin: 0;}
	.forms.columnar li fieldset.fieldset-subgroup label {width: 91%;}
	.forms.columnar fieldset.fieldset-subgroup ol {margin: 0 0 0 0;}


/************************************************************************************
MOBILE TOP NAVI
*************************************************************************************/
    #header {height:260px;}
    #nav-top {
        display:block;
    }
    #header-bottom {
        height: 70px;
    }    
    /* nav-wrap */
    #nav-top-mobile {
        display:block;
        height: 37px;
        margin: 0 auto;
        position: inherit/*absolute*/;
        width:92%;
	padding:0 4%;
	top:114px;
    }


    .sixth-icon {
        padding:0;
    }
 
    /* menu icon */
    .menu-icon-wrap {
    position:absolute;
    width: 94%;
    z-index:1100;
    height:56px;
    }
    
    #menu-icon {
        color: transparent;
        cursor: pointer;
        display: block; /* show menu icon */
        background-image:url(images/icon_menu.png);
        background-repeat:no-repeat;
        background-position:0px 0px;
        background-color:#006411;
        height:55px;
        float:right;
        width:60px;
        
    }

    #menu-icon:hover, #menu-icon.active {
        color:transparent;
        background-color:#orange;
        background-position:0px -56px;
    }
         
     /* main nav  CLINX */
	.sf-arrows .sf-with-ul:after {
		display:inherit;
	}
    .sf-menu {
        clear: both;
        position: absolute;
/*        top: 43px;*/
        width:100%;
        z-index: 1090;
        padding:1px 0;
        background-color:#fff;
        display: none; /* visibility will be toggled with jquery */
        /*box-shadow: 0 0 150px 150px rgba(0, 0, 0, 0.5);*/
    }
    .sf-menu li {
        clear: both;
        float: none;
        margin:0;
        padding:0;
    }

    .sf-menu a, .sf-menu ul a {
        font: inherit;
        background: none;
        display: block;
        padding: 0.8em 0;
        color: #666;
        border: none;
    }

    .sf-arrows .sf-with-ul  {
        padding: 5px 7px;
    }

    .sf-menu a:hover, .sf-menu ul a:hover {
        background: none;
        color: #000;
    }
    .sf-menu ul li ul li {
    background: #b3b3b3/*f2a200*/ none repeat scroll 0 0;
}
    
    .sf-menu ul li ul li a {
        padding: 5px 1.5em 5px 7px!important;
        color: #fff; 
    }
         
    /*** arrows (for all except IE7) **/
    .sf-arrows .sf-with-ul {
        padding-right: 0/*2.5em*/;
        *padding-right: 0/*1em*/; /* no CSS arrows for IE7 (lack pseudo-elements) */
    }
    /* styling for both css and generated arrows */
    .sf-arrows .sf-with-ul:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 1em;
        margin-top: -3px;
        height: 0;
        width: 0;
    /* order of following 3 rules important for fallbacks to work */
        /*border: 6px solid transparent;*/
        border-top-color: #83f121/*#dFeEFF*/; /* edit this to suit design (no rgba in IE8) */
        border-top-color: rgba(255,255,255,.5);
    }
    .sf-arrows > li > .sf-with-ul:focus:after,
    .sf-arrows > li:hover > .sf-with-ul:after,
    .sf-arrows > .sfHover > .sf-with-ul:after {
        /*border-top-color: white; *//* IE8 fallback colour */
        margin-right:10px;
    }
    .sf-arrows > li > .sf-with-ul:focus::after, .sf-arrows > li:hover > .sf-with-ul::after, .sf-arrows > .sfHover > .sf-with-ul::after {
    border-top-color: #7e7e7e;
    border-left-color: transparent;
    margin-right:0;
    }
    .sf-arrows ul li > .sf-with-ul:focus::after, .sf-arrows ul li:hover > .sf-with-ul::after, .sf-arrows ul .sfHover > .sf-with-ul::after {
        border-left-color:transparent;
    }
    
    .sf-arrows ul .sf-with-ul:after {
        content: '';
        border-color: transparent transparent transparent rgba(36, 242, 118, 0.8);
        top:50%;
        right: 1em;
        height: 0;
        width: 0;
        position:absolute;
        border: 5px solid transparent;
        border-top-color: #83f121/*#dFeEFF*/; /* edit this to suit design (no rgba in IE8) */
        border-top-color: rgba(20,20,80,.5);
    }
    /*.sf-arrows .sf-with-ul {
       padding-right: 0em;
    }*/
    .sf-menu a:hover, .sf-menu ul a:hover {
        background: none;
        color: #000;
    }
    ul.sf-menu li {
        width: 100%;
    }
    .nav-h ul li a {padding:5px 7px;}
    
    .nav-h ul li a:hover, .nav-g ul li a:hover, .nav-h ul li a.active, .sf-menu li.sfHover a, .nav-h ul li a.current {
    border-bottom:none;
    }
         
    /* dropdown */
	.nav-h {
		padding-left:0;
	}
	.nav-h ul, .nav-g ul {
		/*box-shadow:0 3px 8px rgba(0, 0, 0, 0.25);*/
		border-radius: 2px;
		list-style: none outside none;
		margin: 56px 0 10px;
	}
	.nav-h ul li ul, .nav-g ul li ul {
		margin-bottom:20px;
		padding-bottom:10px;
	}
	.nav-h ul li {
       /* border-bottom: 1px solid #fff;*/
    }
	.nav-h ul li ul li, .nav-h ul li:hover {
        border-bottom: 0px;
    }

	/* fuer alle ul innerhalb sf-menu */
    .sf-menu ul {
        width: auto;
        position: static;
        display: block;
        border: none;
        background: inherit;
    }
    .sf-menu ul li {
		/*border-top:1px solid #fff;*/
		}
    /*.sf-menu ul li ul {
		background-color:#b23834;
	}*/
	.sf-menu > li > a {
        border-left: 0px;
	}

	/* fuer jedes einzelne ul innerhalb sf-menu */
    ul.sf-menu {
		padding: 10px 0 !important;
		width:94%;
	}
	ul.sf-menu li {
        margin: 3px 10px;
        width:auto;
	    text-align:left;
    }
	ul.sf-menu li.sfHover {
		/*margin-bottom:20px;
		padding-top:7px;
		padding-bottom:10px;
		border-radius:6px;*/
	}
	ul.sf-menu li ul {
		max-width:90%;
		margin:10px auto 10px !important;
		padding: 0 0 8px !important;
	}
    ul.sf-menu li ul li {
        margin: 0 0px;
        width:90%;
    }
}

@media screen and (min-width: 767px) {
    /* ensure #nav is visible on desktop version */
    .sf-menu {
        display: block;
    }
}

/*fix text/image elements in small displays */
@media screen and (max-width: 767px) {
    #header {height:85px;}
    .news a.more-link, .news .more-link a/*, .news-single-nextlink a, .news-single-backlink a, .news-single-prevlink a, a.navigation-link, .navigation-link a, ul.browsebox li a*/ {
        clear: left;
        float: right;
        bottom:30px;
        position:relative;
    }
}

/*fix text/image elements in small displays */
@media screen and (max-width: 767px) {
    div.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap, div.csc-textpic-intext-right .csc-textpic-imagewrap, div.csc-textpic-intext-left .csc-textpic-imagewrap {
        float: none;
    }
    .csc-textpic-intext-right-nowrap-310 .csc-textpic-text {
        float: left;
        margin-right: 0;
    }
    div.csc-textpic-intext-right .csc-textpic-imagewrap, div.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap {
        float: none;
    }
    div.csc-textpic-intext-right .csc-textpic-imagewrap {
        float: none;
        width: 100%;
    }
    .news .news-list-view .article .news-img-wrap, .news .news-list-view .article .teaser-text {
    float:left;
    margin-left:0 !important;
    clear:left;
    }
    .news .article .news-img-wrap img {width:100%;}
}

/*fix text/image elements in small displays */
@media screen and (max-width: 440px) {
    .logo-home {background-size:90%;}
    .news a.more-link, .news .more-link a/*, .news-single-nextlink a, .news-single-backlink a, .news-single-prevlink a, a.navigation-link, .navigation-link a, ul.browsebox li a*/ {
        clear: both;
        display: block;
        margin-top: 5px;
        margin-bottom: 30px;
        padding: 3px 13px;
        text-align: center;
		position:inherit;
		float:inherit;
    }
}

/*fix text/image elements in small displays */
@media screen and (max-width: 360px) {
    .bereich_item {
        float: none;
        margin: 0;
		width:100%;
    }
}

/*fix text/image elements in small displays */
@media screen and (max-width: 360px) {
    #footer blockquote {
        background-position: 0px 33px;
        padding: 30px 20px 10px 50px;
		background-size:35px;
    }
}



/************************************************************************************
RESPONSIVE TABLE START
*************************************************************************************/
@media only screen and (max-width: 40em) { /*640*/

    table.width-100 { font-size: 0.8em; }

    table.width-100:after, table.width-100 thead:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    * html table.width-100, * html table.width-100 thead { zoom: 1; }
    *:first-child+html table.width-100, *:first-child+html table.width-100 thead { zoom: 1; }

    table.width-100 { display: block; position: relative; width: 100%; }
    table.width-100 thead { display: block; float: left; }
    table.width-100 tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
    table.width-100 thead tr { display: block; }
    table.width-100 th { display: block; }
    table.width-100 tbody tr { display: inline-block; vertical-align: top; }
    table.width-100 td { display: block; min-height: 1.25em; width:100%;}
	
    /* sort out borders */
	
    table.width-100 tbody tr { border-right: 1px solid #dedede; width: auto; }
}
/************************************************************************************
RESPONSIVE TABLE END
*************************************************************************************/
@media screen and (max-width:767px) {
    .ui-tabs .ui-tabs-nav {border:none;}
    .ui-tabs .ui-tabs-nav li {display:block;float:none;width:100%;border-bottom: 1px solid #fff;margin: 0 0 0.5em 0;}
    .ui-tabs .ui-tabs-nav li a {float:none;display:block;}
    .ui-tabs .ui-tabs-nav li.ui-tabs-active {border-bottom: 1px solid #fff;margin-bottom: 0.5em;padding-bottom: 0;}
    .ui-tabs .ui-tabs-panel { background:none;}
}


.menu-overlay {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,.7);
    z-index:1080;
}