/**
 * Brunner AG - Druck und Medien, Kriens
 * @copyright      Copyright 2014, Brunner Web, all rights reserved
 * @link           http://www.bag.ch/
 */

body:not(.cms_editpage) .flexcontainer {
	width: 100% !important;
	display: inline-flex;
    /*display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    flex-flow: row wrap;*/
}

body:not(.cms_editpage) .flexitem{
   /*flex: 1 0 auto;*/
   padding: 0px;
   float: none !important;
   margin: 0 1%;
}

.flexitem{
   /*background-color: grey;*/
   color: #fff;
   -moz-hyphens: auto;
   hyphens: auto;
}

.flexitem p{
	text-align: center;
}

@media only screen and (max-width: 1024px){
	div#footer{
		position: relative !important;
	}
}


@media only screen and (min-width: 980px) {

	div#top div#mainnavigation {
		position: absolute;
		left: 266px;
		top: 53px;
		z-index: 90;
	}
	
	/* dropdown */
	#mainnavigation ul.level1 li:hover > ul.level2 {
		display: block;
	}
	
	#mainnavigation ul li.quick {
	    display: none;
	}
	
	#mainnavigation ul.level1 li ul.level2 li {
	    float: none;
	}
	
		
	#mainnavigation ul.level1 li ul.level2 li a {
		width: 100%;
	}
}


@media only screen and (max-width: 615px) {
	div#footer div#footer_inner div#address{
		width: 100% !important;
		margin-left: 0px !important;
	}
	
	div#footer div#footer_inner div#footer_icon{
		display: none;
	}
	
	div#content div.cmsGroup.flexcontainer.cmsColSpan7{
		display: block;
	}
	
	div#content div.cmsGroup.flexcontainer.cmsColSpan7 div.cmsCell.flexitem.cmsColSpan1{
		width: 30.333% !important;
		display: inline-block;
	}
}

@media only screen and (min-width: 980px){
	div#main div#teaser {
	    width: 211px  !important;
	    min-height: 200px;
	    padding-left: 28px;
	}
	
	div#main div#teaser div#cmsGroup{
	    width: 211px  !important;
	}
}

@media only screen and (max-width: 979px) {

	body.menu div#sprachwahl{
		display: none;	
	}

	div#top div#mainnavigation{
		position: abosolute;
		display: none;
		height: 100%;
		right: 0px; 
	}
	
	body.menu div#top div#mainnavigation{
		display: block;
		height: 100%;
		right: 0px; 
	}
	
	div#top div#mainnavigation{
		height: 100%;
	}
	
	#navtop{
		background: #000;
		width: 268px;
		height: 72px;
	}

	#navigation {
		position: fixed;
		width: 268px;
        padding: 0 !important;
		margin: 0;
		top: 0; 
        display: block;
		left: auto;
        right: -268px;
		height: 100%;
		overflow: hidden;
		z-index: 999 !important;
        transition: right 0.3s ease-in-out;
	}
	
	#navigation>div {
		padding: 0;
        margin: 0;
		width: 100%;
        height: 100%;
        background: #00953E;
        overflow: auto;
	}
    
    body.naviFixed #navigation {
        position: fixed;
        top: 0;
        display: block;
        background-color: transparent;
        z-index: 4;
        border-bottom: 0;
    }
    
    #mainnavigation {
		margin: 0;		
	}
    
    #mainnavigation li {
		width: inherit !important;
		float: left;		
		list-style-type:none;
	}

	.fullLayer {
		display: none;
	}
	
	#mainnavigation ul li a.active:before{
		/*content: "\f111";*/
		font-family: FontAwesome;
	    font-style: normal;
	    font-weight: normal;
	    color: #000;
	    font-size: 8px;
	    padding-right: 0.5em;
	    position: absolute;
	    top: 7px;
	    left: 0;
	}
	
	#close {
		z-index: 3;
		width: 100%;
		height: 37px;
		right: 2%;
		margin-top: 20px;
		width: 37px;
		position: absolute;
		cursor: pointer;
		background: url(/_local/images/close.png) no-repeat;
		background-size: contain;
	}
	
	#topicons{
		position: relative;
		margin-left: 17%;
	}

	#menu-toggle {
		z-index: 105;
		display: block;
		position: absolute;
		right: 75px;
		top: 35px;
		height: 40px;
		width: 40px;
		background: transparent url("/_local/images/menu-toggle_white.svg") no-repeat scroll center center;
		transition: all 0.2s ease-out 0s;
		cursor: pointer;
		color: #fff;
	}
	
	#menu-toggle:after {
		content: 'MENU';
		position: absolute;
		margin: 13px 0 0 55px;
		color: #fff;
		
	}

	#kontakt-bubble {
		z-index: 105;
		display: block;
		position: absolute;
		left: 150px;
		top: 18px;
		height: 40px;
		width: 40px;
		background: transparent url("/_local/images/bubble.svg") no-repeat scroll center center;
		transition: all 0.2s ease-out 0s;
		cursor: pointer;
		color: #000;
	}
	
	#kontakt-bubble:after {
		content: 'KONTAKT';
		position: absolute;
		margin: 8px 0 0 55px;
		color: #000;
		
	}

	body.menu #navigation {
        background: transparent;
        right: 0; 
        transition: right 0.3s ease-in-out;
	}
	
	#wrapper.menu {
		overflow: hidden;
	}
	
	#address{
		position: relative;
		margin-left: 40px;
		clear: both;
	}
	
	#auge{
		margin-left: 45px;
		margin-top: 80px;
		opacity: 0.3;
		width: 223px;
		height: 188px;
	}
	
	#auge img{
		width: 223px;
		height: 188px;
	}
	
	#mainnavigation ul.level1 li ul.level2{
/*		display: block;*/
	}

	body.menu #mainnavigation>ul.level1 li>a,
	body.menu #mainnavigation>ul.level1 li>a:hover,
	body.menu #mainnavigation>ul.level1 li.open>a,
	body.menu #mainnavigation>ul.level1 li.open>a:hover,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>a,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>a:hover,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li.open>a,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li.open>a:hover,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>a,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>a:hover,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li.open>a,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li.open>a:hover,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li>a,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li>a:hover,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li.open>a,
	body.menu #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li.open>a:hover  {
		float: none;
		background: transparent;
		border: 0 !important;
        height: auto !important;
	}

	body #mainnavigation>ul.level1>li>ul.level2,
    body #mainnavigation>ul.level1>li:hover>ul.level2,
	body #mainnavigation>ul.level1>li>ul.level2>li>ul.level3,
    body #mainnavigation>ul.level1>li>ul.level2>li:hover>ul.level3,
	body #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4,
    body #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li:hover>ul.level4 {
		float: left;
		float: none;
		position: relative;
		margin: 0 !important;
		padding: 0 !important;
		left: 0 !important;
		top: 0;
	}
	
	body #mainnavigation>ul.level1>li.open>ul.level2,
	body #mainnavigation>ul.level1>li.open>ul.level2>li.open ul.level3,
	body #mainnavigation>ul.level1>li.open>ul.level2>li.open ul.level3 li.open ul.level4 {
		float: left;
		position: relative;
		margin: 0 !important;
		padding: 0 !important;
		left: 0 !important;
        display: block;
        padding: 0;
        font-size: 1em;
        transition: background 0.6s ease-in-out;
		height: auto;
        
	}

    #mainnavigation ul.level1 > li > ul.level2 > div {
        display: none;
    }
	
	#mainnavigation>ul.level1,
	#mainnavigation ul.level2,
	#mainnavigation ul.level3,
    #mainnavigation ul.level4 {
		padding-top: 0px;
		width: 90%;
	}
    
    
    
    /********************** Span more ************************/
    
    
    /* plus sign if child nodes (created using jquery) */
	#mainnavigation li>span.more {
		position:absolute;
		width: 50px;
		text-align: center;
		top: 0.7em;
		right: 5%;
		font-weight: 100;
		cursor: pointer;
		opacity: 0.8;
		transition: all 0.1s ease-out 0s;
		z-index: 2000;
	}
	
	#mainnavigation ul.level2 li>span.more {
		top: 1.2em;
	}

	#mainnavigation li>span.more::before {
		position:absolute;
		content: '\f107';
		font-family: 'fontAweSome',sans-serif;
		color: white;
		font-size: 200%;
		-ms-transform: rotate(0deg); /* IE 9 */
    	-webkit-transform: rotate(0deg); /* Safari */
    	transform: rotate(0deg); /* Standard syntax */
    	transition: all 0.1s ease-out 0s;
    	z-index: 2000;
    	top: -13px;
	}

	#mainnavigation>ul.level1>li.open>span.more:before,
	#mainnavigation>ul.level1>li.open.quick.last>span:before,
    #mainnavigation>ul.level1>li>ul.level2>li.open>span.more:before,
	#mainnavigation>ul.level1>li>ul.level2>li.open.quick.last>span:before,
    #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li.open>span.more:before,
	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li.open.quick.last>span:before,
    #mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li.open>span.more:before,
	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li.open.quick.last>span:before     {
		-ms-transform: rotate(180deg); /* IE 9 */
    	-webkit-transform: rotate(180deg); /* Safari */
    	transform: rotate(180deg); /* Standard syntax */
    	transition: all 0.2s ease-out 0s;
    	z-index: 2000;
	}
    

	/* ///////////////////////////////// LEVEL 1 ///////////////////////////////// */
	
	
	body #mainnavigation>ul.level1 {
		padding: 50px 0 0px 0px;
		font-size: 14px;
		position: relative;
		background: #00953E;
		float: left;
		height: auto;
		width:100%;
	}
	
    #mainnavigation>ul.level1>li.first {		
		/*border-top: 1px solid #eee;*/
	}
	
	 #mainnavigation>ul.level1>li.last {
	 	margin-bottom: 40px;
	 }		

	#mainnavigation>ul.level1>li {
		position: relative;		
        /*border-bottom: 1px solid #eee;*/
		margin: 0;
		padding: 0;
		width: 100%;
	}
		
	#mainnavigation>ul.level1>li>a {
        /*border-top: 1px solid #fff !important;*/
		text-decoration: none;	
		text-transform: uppercase;
		color: #000;
		display: block;
		font-size: 17px !important;
		font-weight: 100;
		padding: 0.15em 0.3em 0.15em 1em !important;
		font-family: "UniversLTPro-Condensed",Arial,Verdana,sans-serif;
	} 


	#mainnavigation ul.level1>li:hover a,
	#mainnavigation ul.level1>li>a:hover,
	#mainnavigation ul.level1>li.open>a,
	#mainnavigation ul.level1>li>a.open {
		color: black ;

	}
	
	#mainnavigation ul.level1>li.haschildren{
		padding-bottom: 1em;
	}


	/* ///////////////////////////////// LEVEL 2 ///////////////////////////////// */

    /*body.menu #mainnavigation>ul.level1>li.open>ul.level2 {
		background: #888;
	}*/

	#mainnavigation>ul.level1>li>ul.level2{
		width: 100%;
		/*background: #246640;*/
	}
	

	#mainnavigation>ul.level1>li>ul.level2>li{
		position: relative;	
        border-bottom: 0;	
        /*border-top: 1px solid #eee;*/
		margin: 0;
		padding: 0;
		width: 100%;		
	}

		
	#mainnavigation>ul.level1>li>ul.level2>li>a {
		text-decoration: none;	
		text-transform: uppercase;
		color: #fff;
		display: block;
		font-size: 14px;
		font-weight: 400;
		padding: 0.9em 0.3em 0.9em 2.5em;
	} 


	#mainnavigation>ul.level1>li>ul.level2>li:hover a,
	#mainnavigation>ul.level1>li>ul.level2>li>a:hover,
	#mainnavigation>ul.level1>li>ul.level2>li.open>a,
	#mainnavigation>ul.level1>li>ul.level2>li>a.open {
		color: #fff;

	}

	/* ///////////////////////////////// LEVEL 3 ///////////////////////////////// */

	 body.menu #mainnavigation>ul.level1>li.open>ul.level2>li.open>ul.level3  {
		background: #999;
		float: left;
		height: auto;
		width: 100%;
	}
	

	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li {
		position: relative;	
        border-bottom: 0;	
        /*border-top: 1px solid #eee;*/
		margin: 0;
		padding: 0;
		width: 100%;
	}

		
	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>a {
		text-decoration: none;	
		text-transform: uppercase;
		color: #fff;
		display: block;
		font-size: 100%;
		font-weight: 400;
		padding: 0.9em 0.3em 0.9em 2.5em;
	} 


	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li:hover a,
	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>a:hover,
	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li.open>a,
	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>a.open {
		color: white ;
	}
    

	/* ///////////////////////////////// LEVEL 4 ///////////////////////////////// */

	 body.menu #mainnavigation>ul.level1>li.open>ul.level2>li.open>ul.level3>li.open>ul.level4  {
		background: #aaa;
		float: left;
		height: auto;
	}
	

	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li {
		position: relative;	
        border-bottom: 0;	
        border-top: 1px solid #eee;
		margin: 0;
		padding: 0;
		width: 100%;
	}

		
	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li>a {
		text-decoration: none;	
		text-transform: uppercase;
		color: #fff;
		display: block;
		font-size: 100%;
		font-weight: 400;
		padding: 0.9em 0.3em 0.9em 3.5em;
	} 


	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li:hover a,
	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li>a:hover,
	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li.open>a,
	#mainnavigation>ul.level1>li>ul.level2>li>ul.level3>li>ul.level4>li>a.open {
		color: white ;
	}
	

	li.nodisplay {
	    visibility: hidden;
	}
	
	#quicklinks{
		display: none;
	}
	
	/*body.menu #mainnavigation > ul.level1>img{
		padding: 1em 0 0 1em;
	}*/
	
	div#top, div#main, div#footer div#footer_inner{
		width: 100% !important;
	}
	
	div#main div#content{
		width: 98%;
		margin-left: 1%;
		margin-right: 1%;
		padding: 0px;
	}
	
	div#footer, div#footer div#footer_inner{
		min-width: 100% !important;
	}
	
	div#footer div#footer_inner div#shortcuts{
		width: 25%;
	}
	
	div#footer div#footer_inner div#address{
		width: 50%;
	}
	
	div#footer div#footer_inner div#quicklinks{
		width: 25%;
	}
	
	/*div#teaser{
		display: none;
	}*/
	
	div#subnavigation{
		display: none;
	}
	
	div#top, div#main, div#footer div#footer_inner{
		width: 100% !important;
	}
	
	div#main div#content{
		width: 98%;
		margin-left: 1%;
		margin-right: 1%;
		padding: 0px;
	}
	
	div.smallBox{
		width: 25%;	
		margin-left: 1%;
	}

}

@media only screen and (max-width: 615px) {
	div#footer div#footer_inner div#address{
		width: 100% !important;
		margin-left: 0px !important;
	}
	
	div#footer div#footer_inner div#footer_icon{
		display: none;
	}
	
}


@media only screen and (max-width: 600px) {

	div#sprachwahl{
		display: none;	
	}
	
	div#location{
		display: none;
	}
	
	span#menu-toggle{
		top: 22px;
	}
	
}

@media only screen and (max-width: 370px) {
	div#logo a img{
		width: 200px;
		height: 150px;
	}
}

@media only screen and (max-width: 340px) {
	div#logo a img{
		width: 200px;
		height: 150px;
	}
	
	div#content div.cmsGroup.flexcontainer.cmsColSpan7 div.cmsCell.flexitem.cmsColSpan1{
		width: 47% !important;
		display: inline-block;
	}
}