/* 	------------------------------------------------------------------------------------------
	iPad Querformat
	------------------------------------------------------------------------------------------ */
@media (max-width:1220px) and (min-width:1024px) {
	body {
		font-size: 				16px;	
	}
	
	#dorfkorporationBronschhofen {
		width: 					220px;
		height: 				120px;
	}
	
	#topBar > div.area,
	#headImage > div.slogan > div,
	#area1,
	#footer > div.area {
		width: 					980px;	
	}
	
	#topBar {
		height: 				62px;
	}
	
	#menuHandle {
		top: 					32px;
	}
	
	#menuHandle > div {
		margin-bottom: 			7px;
	}
	
	#menuHandle > span {
		line-height: 			20px;
	}
	
	#main > div {
		width: 					980px;
		padding-top: 			38px;
	}
		
	#headImage > div.slogan {
		bottom: 				14px;
	}
	
	#dummy {
		height: 				62px;
	}

	#area1.narrow {
	/* 81.666% */
		float: 					left;
		width: 					696px;
		margin-right: 			38px;	
	}
	
	#area1 div.col1_4,
	#area1 div.col2_4,
	#area1 div.col3_4,
	#area1 div.col4_4 {
		width: 					233px;
	}
	
	#area1.narrow div.col1_4,
	#area1.narrow div.col2_4,
	#area1.narrow div.col3_4,
	#area1.narrow div.col4_4 {
		width: 					162px;
	}
	
	#area1 div.col1_2,
	#area1 div.col2_2 {
		width: 					482px;
	}
	
	#area1.narrow div.col1_2,
	#area1.narrow div.col2_2 {
		width: 					340px;
	}
	
	#area1 div.col_30_70 > ul.first,
	#area1 div.col_70_30 > ul.second {
		width: 					279px;
	}
	
	#area1 div.col_40_60 > ul.first,
	#area1 div.col_60_40 > ul.second {
		width: 					372px;
	}
	
	#area1 div.col_50_50 > ul.first,
	#area1 div.col_50_50 > ul.second {
		width: 					465px;
	}
	
	#area1 div.col_60_40 > ul.first,
	#area1 div.col_40_60 > ul.second {
		width: 					558px;
	}
	
	#area1 div.col_70_30 > ul.first,
	#area1 div.col_30_70 > ul.second {
		width: 					651px;
	}
	
	
	#area1.narrow div.col_30_70 > ul.first,
	#area1.narrow div.col_40_60 > ul.first,
	#area1.narrow div.col_50_50 > ul.first,
	#area1.narrow div.col_60_40 > ul.first,
	#area1.narrow div.col_70_30 > ul.first {
		margin-right: 			40px;
	}
	
	#area1.narrow div.col_30_70 > ul.first,
	#area1.narrow div.col_70_30 > ul.second {
		width: 					197px;
	}
	
	#area1.narrow div.col_40_60 > ul.first,
	#area1.narrow div.col_60_40 > ul.second {
		width: 					262px;
	}
	
	#area1.narrow div.col_50_50 > ul.first,
	#area1.narrow div.col_50_50 > ul.second {
		width: 					328px;
	}
	
	#area1.narrow div.col_60_40 > ul.first,
	#area1.narrow div.col_40_60 > ul.second {
		width: 					394px;
	}
	
	#area1.narrow div.col_70_30 > ul.first,
	#area1.narrow div.col_30_70 > ul.second {
		width: 					459px;
	}
	
	#area1 div.promotionTitle {
		font-size: 				1.1em;
	}
	
	#area1.narrow div.promotionTitle {
		font-size: 				0.8em;
	}
	
	#area2 {
		width: 					246px;
	}
	
	#main ul.bullet li {
		background-position: 	left -2px;
	}

	#galleryImage > div.close {
		left:				4px;
		top:				4px;
	}
}





/* 	------------------------------------------------------------------------------------------
	iPad Hochformat
	------------------------------------------------------------------------------------------ */
@media (max-width:1023px) and (min-width:768px) {
	body {
		font-size: 				15px;	
	}
	
	#dorfkorporationBronschhofen {
		width: 					176px;
		height: 				96px;
	}
	
	#topBar > div.area,
	#headImage > div.slogan > div,
	#area1,
	#footer > div.area {
		width: 					688px;
	}
	
	#topBar {
		height: 				50px;
	}
	
	#menuHandle {
		top: 					24px;
	}
	
	#menuHandle > div {
		margin-bottom: 			6px;
	}
	
	#menuHandle > span {
		line-height: 			20px;
	}
	
	#main > div {
		width: 					688px;
		padding-top: 			32px;
	}
	
	#headImage > div.slogan {
		bottom: 				12px;
	}
	
	#dummy {
		height: 				50px;
	}

	#area1.narrow {
		width: 					488px;
		margin-right: 			26px;	
	}
	
	#area1 div.col1_4,
	#area1 div.col2_4,
	#area1 div.col3_4,
	#area1 div.col4_4 {
		width: 					160px;
	}
	
	#area1.narrow div.col1_4,
	#area1.narrow div.col2_4,
	#area1.narrow div.col3_4,
	#area1.narrow div.col4_4 {
		width: 					236px;
	}
	
	#area1.narrow div.col2_4 {
		margin-right: 			0;
		margin-bottom: 			8px;
	}
	
	#area1 div.col1_2,
	#area1 div.col2_2 {
		width: 					336px;
	}
	
	#area1.narrow div.col1_2,
	#area1.narrow div.col2_2 {
		width: 					236px;
	}
	
	#area1 div.col_30_70 > ul.first,
	#area1 div.col_40_60 > ul.first,
	#area1 div.col_50_50 > ul.first,
	#area1 div.col_60_40 > ul.first,
	#area1 div.col_70_30 > ul.first {
		margin-right: 			40px;
	}
	
	#area1 div.col_30_70 > ul.first,
	#area1 div.col_70_30 > ul.second {
		width: 					194px;
	}
	
	#area1 div.col_40_60 > ul.first,
	#area1 div.col_60_40 > ul.second {
		width: 					259px;
	}
	
	#area1 div.col_50_50 > ul.first,
	#area1 div.col_50_50 > ul.second {
		width: 					324px;
	}
	
	#area1 div.col_60_40 > ul.first,
	#area1 div.col_40_60 > ul.second {
		width: 					389px;
	}
	
	#area1 div.col_70_30 > ul.first,
	#area1 div.col_30_70 > ul.second {
		width: 					454px;
	}
	
	
	#area1.narrow div.col_30_70 > ul.first,
	#area1.narrow div.col_40_60 > ul.first,
	#area1.narrow div.col_50_50 > ul.first,
	#area1.narrow div.col_60_40 > ul.first,
	#area1.narrow div.col_70_30 > ul.first {
		margin-right: 			16px;
	}
	
	#area1.narrow div.col_30_70 > ul.first,
	#area1.narrow div.col_70_30 > ul.second {
		width: 					142px;
	}
	
	#area1.narrow div.col_40_60 > ul.first,
	#area1.narrow div.col_60_40 > ul.second {
		width: 					189px;
	}
	
	#area1.narrow div.col_50_50 > ul.first,
	#area1.narrow div.col_50_50 > ul.second {
		width: 					236px;
	}
	
	#area1.narrow div.col_60_40 > ul.first,
	#area1.narrow div.col_40_60 > ul.second {
		width: 					283px;
	}
	
	#area1.narrow div.col_70_30 > ul.first,
	#area1.narrow div.col_30_70 > ul.second {
		width: 					330px;
	}
	
	
	#area1 div.promotionTitle {
		font-size: 				0.8em;
	}
	
	#area1.narrow div.promotionTitle {
		font-size: 				1.1em;
	}
	
	#area2 {
		width: 					174px;
	}
	
	#footer address,
	#footer div.col {
		width: 					25%;
	}
	
	#main ul.bullet li {
		background-position: 	left -4px;
	}
		
	#galleryImage > div.close {
		left:				4px;
		top:				4px;
	}
}






/* 	------------------------------------------------------------------------------------------
	iPhone
	------------------------------------------------------------------------------------------ */
@media (max-width:767px) {


	#dorfkorporationBronschhofen {
		left: 					8px;
		width: 					110px;
		height: 				60px;
	}
	
	#topBar {
		height: 				40px;
	}
	
	#topBar > div.area {
		width: 					100%;
	}
	
	#topBar > div.line {
		height: 				1px;
	}

	#menuHandle {
		right: 					8px;
		top: 					12px;
	}
	
	#menuHandle > div {
		margin-bottom: 			7px;
	}
	
	#menuHandle > span {
		display: 				none;
	}
	
	#menu {
		width: 					100%;
		right: 					-100%;
		font-size: 				1.2em;
	}
	
	#menu div.menuBar {
		height: 				40px;
	}
	
	#menu div.dorfkorporationBronschhofen {
		margin-left: 			8px;
		width: 					137px;
		height: 				75px;
	}

	
	#menu div.close {
		right: 					8px;
		top: 					12px;
	}
	
	#menu ul.main {
		margin-top: 			96px;
	}
	
	#menu address {
		padding: 				32px 8px 8px 48px;
	}

	#area1 {
		float: 					none;
		width: 					100%;
		margin-bottom: 			32px;
	}
	
	
	#dummy {
		height: 				40px;
	}

	#headImage {
		font-size: 				0.3em;
	}
	
	#headImage > div.slogan {
		bottom: 				4px;
		-webkit-box-sizing: 	border-box;
		-moz-box-sizing: 		border-box;
		box-sizing: 			border-box;
		padding: 				0 8px;
	}
	
	#headImage > div.slogan > div {
		width: 					100%;
	}
	
	#main {
		font-size: 				0.9em;
		line-height: 			1.4em;
	}
	
	#main > div {
		width: 					100%;
		padding: 				16px 8px;
		-webkit-box-sizing: 	border-box;
		-moz-box-sizing: 		border-box;
		box-sizing: 			border-box;
	}
	
	#area1 {
		width: 					100%;
	}
	
	#area1.narrow {
		float: 					none;
		width: 					100%;
		margin-right: 			0;
	}
	
	
	#area1 div.col1_4,
	#area1 div.col2_4,
	#area1 div.col3_4,
	#area1 div.col4_4 {
		float: 					left;
		width: 					48%;
		margin-right: 			4%;
	}
	
	#area1.narrow div.col1_4,
	#area1.narrow div.col2_4,
	#area1.narrow div.col3_4,
	#area1.narrow div.col4_4 {
		width: 					48%;
	}
	
	#area1 div.col4_4,
	#area1 div.col2_4 {
		margin-right: 			0;
	}
	
	#area1 div.col2_4 {
		margin-bottom: 			8px;
	}
	
	
	#area1 div.col1_2,
	#area1 div.col2_2 {
		float: 					none;
		width: 					100%;
		margin-right: 			0;
	}
	
	#area1 div.col1_2 {
		margin-bottom: 			16px;
	}
	
	#area1.narrow div.col1_2,
	#area1.narrow div.col2_2 {
		width: 					100%;
	}
	
	#area1 div.col_30_70 > ul.first,
	#area1 div.col_40_60 > ul.first,
	#area1 div.col_50_50 > ul.first,
	#area1 div.col_60_40 > ul.first,
	#area1 div.col_70_30 > ul.first {
		float: 					none;
		margin-right: 			0;
	}
	
	#area1 div.col_30_70 > ul.second,
	#area1 div.col_40_60 > ul.second,
	#area1 div.col_50_50 > ul.second,
	#area1 div.col_60_40 > ul.second,
	#area1 div.col_70_30 > ul.second {
		float: 					none;
	}
	
	#area1 div.col_30_70 > ul.first,
	#area1 div.col_70_30 > ul.second,
	#area1 div.col_40_60 > ul.first,
	#area1 div.col_60_40 > ul.second,
	#area1 div.col_50_50 > ul.first,
	#area1 div.col_50_50 > ul.second,
	#area1 div.col_60_40 > ul.first,
	#area1 div.col_40_60 > ul.second,
	#area1 div.col_70_30 > ul.first,
	#area1 div.col_30_70 > ul.second,
	#area1.narrow div.col_30_70 > ul.first,
	#area1.narrow div.col_70_30 > ul.second,
	#area1.narrow div.col_40_60 > ul.first,
	#area1.narrow div.col_60_40 > ul.second,
	#area1.narrow div.col_50_50 > ul.first,
	#area1.narrow div.col_50_50 > ul.second,
	#area1.narrow div.col_60_40 > ul.first,
	#area1.narrow div.col_40_60 > ul.second,
	#area1.narrow div.col_70_30 > ul.first,
	#area1.narrow div.col_30_70 > ul.second {
		width: 					100%;
	}
	
	#area1 div.promotionTitle {
		font-size: 				0.8em;
	}
	
	#area1.narrow div.promotionTitle {
		font-size: 				0.8em;
	}
	
	#area2 {
		float: 					none;
		width: 					100%;
	}
	
	#main ul.bullet li {
		background-position: 	left -4px;
	}

	#footer {
		display: 				none;
	}
	
	
	#imageGallery > div {
		position:			static;
		left:				auto;
		float:				none;
	}
	
	#imageGallery > div > div {
		position:			static;
		left:				auto;
		float:				none;
		padding-top: 		64px;
		width: 				100%;
	}
	
	#galleryImage > div.close {
		left:				4px;
		top:				4px;
	}

}