/* ==========================================================================
   BNA Responsive Design - Tablet 760px - 1229
   ========================================================================== */
@media (max-width: 1229px) {
	html {
		font-size: 80%;
	}
	#wrapper {

	}
	.grid1 { width: 240px; }
	.grid2 { width: 500px; }
	.grid3 { width: 760px; }
	*[class*="grid"] {
		float: left;
		margin-left: 10px;
		margin-right: 10px;
	}
	#main .mod_article > .inside,
	.pagination {
		width: 780px;
		margin-left: auto;
		margin-right: auto;
	}
	.header .inside,
	#breadcrumb .inside,
	#slider,
	#footer .inside {
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
	}
	#search-button {
		width: 30px;
		height: 30px;
	}
	#search-input.active {
		width: 300px;
	}
	#search input {
		line-height: 20px;
		padding: 5px;
	}
	.mod_changelanguage {
		left: 31px;
	}
	.mod_changelanguage ul li a,
	.mod_changelanguage ul li strong {
		width: 30px;
		height: 30px;
		line-height: 30px;
	}
	#navi {
		line-height: 30px;
	}
	#navi ul li {
		margin-right: 15px;
	}
	#navi ul li.last {
		margin-right: 0;
	}
	#navi ul li a,
	#navi ul li strong {
		font-size: 1rem;
		padding-bottom: 5px;
		border-bottom: 2px solid #FFF;
	}
	#logo {
		width: 180px;
		height: 33px;
		background-size: 180px 30px;
		text-indent: -9999px;
		top: -5px;
	}
		@keyframes logo
		{
			0%   {opacity: 1; width: 180px; }
			25% {opacity: 0; width: 180px;}
			50% {opacity: 0; width: 55px;}
			100% {opacity: 1; width: 55px;}
		}
		@-webkit-keyframes logo /* Safari and Chrome */
		{
			0%   {opacity: 1; width: 180px;}
			25% {opacity: 0; width: 180px;}
			50% {opacity: 0; width: 55px;}
			100% {opacity: 1; width: 55px;}
		}
		.small .header #logo {
			width: 55px;
		}
	#banner {
		height: 300px;
	}
	#banner .inside {
		height: 300px;
	}
	#footer .inside {
		margin: 0 auto;
	}
	#footer-logo {
		float: none;
	}
	#footer-adresse,
	#footer-kontakt {
		float: none;
		margin-left: 0px;
	}
	#footernavi {
		float: none;
	}
	.ce_kachel {
		margin: 0 10px 20px 10px;
	}
	.ce_kachel:after,
	.ce_kachel_white:after {
		width: 40px;
		height: 40px;
		background-size: 40px 80px;
	}
	/* Separate Definition für Link-Kacheln, da Pseudoelement sonst über Link überlagert */
	.ce_kachel_link .teaser:after {
		width: 40px;
		height: 40px;
		background-size: 40px 80px;
	}
	.ce_kachel .teaser,
	.ce_kachel_white {
		width: 240px;
		height: 240px;
		background-size: 240px 240px;
	}
	.ce_kachel .teaser .info {
		height: 120px;
		padding: 10px;
	}
	.ce_kachel .teaser:hover .info {
		height: 130px;
	}
	.ce_kachel .teaser p {
		/* font-size: 0.75rem; */
		font-size: 0.925rem;
		max-width: 200px;
	}
	.ce_kachel_white p {
		font-size: 0.75rem;
	}
	.ce_kachel_white h2 {
		font-size: 1.25rem;
		margin-bottom: 1rem;
	}
	.ce_kachel .teaser h3 {
		text-transform: uppercase;
	}
	.ce_kachel .teaser .date {
		position: absolute;
		bottom: 10px;
	}
	.ce_kachel .content {
		height: 240px;
	}
	.ce_kachel.active .content {
		width: 500px;
		padding: 20px;
		overflow: hidden;
	}
	/* ==========================================================================
	   Typo
	   ========================================================================== */
	p.more {
		margin-bottom: 3px;
	}
	p.more a,
	.more a,
	a.more,
	p.back a,
	.enclosure a {
		padding: 5px;
	}
	/* ==========================================================================
	   BNA Slider Header
	   ========================================================================== */
	.ce_bna_header {
		height: 300px;
		margin: 0 10px; /* Besser über .grid3? */
	}
	.bna_header_content  {
		position: relative;
		width: 260px;
		height: 300px;
		background-image: url('../images/bna-slider-kachel.png');
		background-repeat: no-repeat;
		background-size: 480px 500px;
		background-size: auto 300px;
		background-position: right bottom;
		padding: 30px;
	}
	.bna_header_content  h2 {
		color: #FFF;
		font-size: 1.75rem;
		font-weight: normal;
		line-height: 1.2;
		text-transform: uppercase;
	}
	.bna_header_content  {
		position: absolute;
		list-style-type: none;
	}
	.bna_header_content .back {
		bottom: 30px;
		margin-left: -30px;
		line-height: 30px;
		height: 30px;
		padding-left: 50px;
		background-size: 30px 30px;
	}
	.bna_header_menu {
		bottom: 30px;
		margin-left: -30px;
	}
	.bna_header_menu li {

	}
	.bna_header_menu li a {
		display: block;
		position: relative;
		min-width: 200px;
		line-height: 30px;
		height: 30px;
		padding-left: 50px;
		font-size: 1.25rem;
		font-weight: 300;
		color: #FFF;
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 30px 30px;
	}
	.bna_header_menuli a:after {
		content: "\f105";
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		text-decoration: inherit;
		opacity: 0.5;
		font-size: 1.25rem;
		position: absolute;
		right: 0;
	  -webkit-transition: all 0.2s ease;
	     -moz-transition: all 0.2s ease;
	       -o-transition: all 0.2s ease;
	      -ms-transition: all 0.2s ease;
	          transition: all 0.2s ease;
	}
	.bna_header_menu li a:hover:after {
		right: -10px;
		opacity: 1;
		font-size: 2rem;
	}
	.bna_header_menu li.wasser a { background-image: url('../images/bna-icon-wasser_@2x.jpg'); }
	.bna_header_menu li.energie a { background-image: url('../images/bna-icon-energie_@2x.jpg'); }
	.bna_header_menu li.industrie a { background-image: url('../images/bna-icon-industrie_@2x.jpg'); }
/* ==========================================================================
   Module
   ========================================================================== */
	/* #slider.mod_article .image_container { */
	#slider.mod_article figure {
		max-width: 380px;
	}
	#slider.mod_article {
		margin-bottom: 30px;
	}
	#slider.mod_article .content-text {
		color: #FFF;
		background-color: #639CB6;
		position: relative;
		margin-bottom: 0;
		padding-bottom: 20px;
	}
	#slider.mod_article .content-text:after {
		content: "";
		display: block;
		width: 100px;
		height: 100px;
		border: 1px dashed #e4e4e4;
		background-color: #FFF;
		position: absolute;
		right: -50px;
		bottom: -50px;
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#slider.mod_article .content-text img {
		margin-right: 30px;
	}
	/* #slider.mod_article .image_container { */
	#slider.mod_article figure {
		margin-right: 20px;
	}
	#slider.mod_article .content-text h2,
	#slider.mod_article .content-text h3,
	#slider.mod_article .content-text p {
		padding: 0 30px 0 400px;
	}
	#slider.mod_article .content-text .rte:nth-child(2){
		padding-top: 30px;
	}
	#slider.mod_article .flex-control-nav {
		position: inherit;
	}
/* --- */
}