/* 	------------------------------------------------------------------------------------------
	Grösser als iPad Querformat
	------------------------------------------------------------------------------------------ */
@media (max-width:1340px) and (min-width:1200px) {
	body {
		font-size: 				17px;
		padding-top: 			126px;
	}

	#topBar {
		height: 				126px;
	}
	
	#headImage {
		width: 					394px;
		height: 				81px;
	}
	
	#topBar > div.sub {
		width: 					1168px;
		height: 				81px;
	}
	
	#topBar > div.main ul {
		width: 					1212px;
	}
	
	#topBar ul a,
	#topBar ul span {
		padding: 				0 22px;
	}
	
	#subMenu > li {
		line-height: 			82px;
		height: 				81px;
	}
	
	#subMenu {
		width: 					774px;
	/* 	1168 - 394 */
	}
	
	#subMenu > li > a > div,
	#subMenu > li > span > div {
	/* Goldener Pfeil nach unten */
		top: 					82px;
	}
	
	body.home #pageDiaShow {
		top: 					126px;
		bottom: 				55px;
	}
		
	#pageDiaShow > div.dia > div {
		width: 					1168px;
	}
	
	#main > div {
		width: 					1168px;
		padding-top: 			28px;
	}
	
	body.home #area1 {
		width: 					1170px;
	}
	
	body.home:not(.edit) #area1 {
		width: 					1170px;
	}

	
	#area1 div.col50 {
		width: 					572px;
		margin-right: 			24px;
	}
	
	#area1 div.col50 div.col50 {
		width: 					274px;
	}

	#area1 div.col25 {
		width: 					274px;
		margin-right: 			24px;
	}

	#area1 div.col75 {
		width: 					870px;
		margin-right: 			24px;
	}
	
	#area1 div.col75 div.col25,
	#area1 div.col75 div.col50 div.col50 {
		width: 					207px;
		margin-right: 			14px;
	}
	
	#area1 div.col75 div.col50 {
		width: 					428px;
		margin-right: 			14px;
	}
	
	#area1 div.col75 div.col75 {
		width: 					649px;
		margin-right: 			14px;
	}
	
	#main div.referenceText {
		font-size: 				0.9em;	
	}
	
	#main div.referencePhoto {
		width: 					290px;
		height: 				290px;
	}

	#main div.referenceText h2 {
		padding: 				0 12px;
	}
	
	#main div.referenceText p {
		padding: 				0 12px;
	}
	
	#main div.newsPhoto {
		width: 					280px;
	}
	
	#main div.newsText {
		width: 					858px;
		margin-right: 			26px;
		padding: 				6px 0 32px 14px;
	}
	
	#main div.news div.newsLink {
		padding: 				0 32px 0 16px;
		font-size: 				0.95em;
		line-height: 			1.8em;
	}
	
	footer > div.content {
		width: 					1168px;
	}
}

/* 	------------------------------------------------------------------------------------------
	iPad Querformat
	------------------------------------------------------------------------------------------ */
@media (max-width:1199px) and (min-width:1024px) {
	body {
		font-size: 				16px;
		padding-top: 			115px;
	}
	
	#topBar {
		height: 				115px;
	}
	
	#headImage {
		width: 					337px;
		height: 				70px;
	}
	
	#topBar > div.sub {
		width: 					1000px;
		height: 				70px;
	}
	
	#topBar > div.main ul {
		width: 					1032px;
	}
	
	#topBar ul a,
	#topBar ul span {
		padding: 				0 16px;
	}
	
	#subMenu {
		width: 					663px;
	/* 	1000 - 337 */
	}
	
	#subMenu > li {
		line-height: 			71px;
		height: 				70px;
	}
	
	#subMenu > li > a > div,
	#subMenu > li > span > div {
	/* Goldener Pfeil nach unten */
		top: 					71px;
	}
	
	body.home #pageDiaShow {
		top: 					115px;
		bottom: 				47px;
	}
	
	#pageDiaShow > div.dia > div {
		width: 					1000px;
	}
	

	#pageDiaShow {
		font-size: 				0.9em;
	}
	
	#pageDiaShow h2 {
		padding: 				0 12px;
	}
		
	#pageDiaShow p {
		padding: 				6px 12px;
	}
	
	#main > div {
		width: 					1000px;
		padding-top: 			24px;
	}
	
	#main a.link > div {
		top: 						3px;
		width: 						10px;
		height: 					22px;
		background-position: 		-50px -15px;
	}
	
	body.home #area1 {
		width: 					1000px;
	}
	
	body.home:not(.edit) #area1 {
		width: 					1000px;
	}
	
	#main div.col50 div.onePersonText form label {
		float: 					none;
		display: 				block;
		width: 					auto;
		font-size: 				0.9em;
		margin-top: 			8px;
	}
	
	#main div.col50 div.onePersonText form input[type=text],
	#main div.col50 div.onePersonText form textarea {
		float: 					none;
		width: 					100%;	
	}
	
	#area1 div.col50 {
		width: 					490px;
		margin-right: 			20px;
	}
	
	#area1 div.col50 div.col50 {
		width: 					235px;
	}

	#area1 div.col25 {
		width: 					235px;
		margin-right: 			20px;
	}

	#area1 div.col75 {
		width: 					745px;
		margin-right: 			20px;
	}
	
	#area1 div.col75 div.col25,
	#area1 div.col75 div.col50 div.col50 {
		width: 					178px;
		margin-right: 			11px;
	}
	
	#area1 div.col75 div.col50 {
		width: 					367px;
		margin-right: 			11px;
	}
	
	#area1 div.col75 div.col75 {
		width: 					556px;
		margin-right: 			11px;
	}
	
	#main div.referenceOverview > div {
		margin-right: 			2px;
		margin-bottom: 			2px;
	}
	
	#main div.referenceText {
		font-size: 				0.82em;	
	}
	
	#main div.referencePhoto {
		width: 					248px;
		height: 				248px;
	}
	
	#main div.referenceText > div {
		margin-left: 			-12px;
		width: 					23px;
		height: 				40px;
		background-position: 	-67px -7px;
	}
	
	#main div.referencePhoto:hover div.referenceText > div {
		background-position: 	-37px -7px;
	}

	#main div.referenceText h2 {
		padding: 				0 8px;
	}
	
	#main div.referenceText p {
		padding: 				0 8px;
	}
	
	#main div.newsPhoto {
		width: 					280px;
	}
	
	#main div.newsText {
		width: 					694px;
		margin-right: 			22px;
		padding: 				6px 0 32px 8px;
	}
	
	#main div.news div.newsLink {
		padding: 				0 24px 0 8px;
		font-size: 				0.95em;
		line-height: 			1.8em;
	}
	
	#main div.news div.newsLink > div {
		right: 					8px;
		top: 					6px;
	}
	
	footer {
		height: 				47px;
	}
	
	footer > div.content {
		width: 					1000px;
	}
}


/* 	------------------------------------------------------------------------------------------
	iPad Hochformat
	------------------------------------------------------------------------------------------ */
@media (max-width:1023px) and (min-width:768px) {
	body {
		font-size: 				14px;
		padding-top: 			85px;
	}
	
	#topBar {
		height: 				85px;
	}
	
	#headImage {
/* 		0.55772113943 */
		width: 					251px;
		height: 				52px;
	}
	
	#topBar > div.sub {
		width: 					744px;
		height: 				52px;
	}
	
	#topBar > div.main {
		height: 				32px;
		border-bottom-width: 	2px;
		font-size: 				0.9em;
	}

	#topBar > div.main ul li {
		line-height: 			32px;
	}
	
	#topBar > div.main ul {
		width: 					760px;
	}
	
	#topBar ul a,
	#topBar ul span {
		padding: 				0 8px;
	}
	
	#subMenu {
		width: 					493px;
	/* 	744 - 251 */
	}
	
	#subMenu > li {
		line-height: 			53px;
		height: 				52px;
	}
	
	#subMenu > li > a > div,
	#subMenu > li > span > div {
	/* Goldener Pfeil nach unten */
		top: 					53px;
	}
	
	body.home #pageDiaShow {
		top: 					76px;
		bottom: 				35px;
	}
	
	#pageDiaShow {
		font-size: 				0.85em;
	}
	
	#topBar h2,
	#pageDiaShow h2 {
		padding: 				0 8px;
	}
		
	#pageDiaShow p {
		margin-top: 			3px;
		padding: 				4px 8px;
	}
	
	#pageDiaShow > div.dia > div {
		width: 					744px;
		margin-top: 			10%;
	}
	
	#main > div {
		width: 					744px;
		padding-top: 			16px;
	}
	
	#main a.link > div {
		top: 						2px;
		width: 						9px;
		height: 					20px;
		background-position: 		-52px -15px;
	}
	
	body.home #area1 {
		width: 					746px;
	}
	
	body.home:not(.edit) #area1 {
		width: 					746px;
	}
		
	#main ul.bullet li {
		background: 			url(../if/mini_bullet.png) no-repeat left top;
		background-size: 		10px 16px;
		padding-left: 			14px;
	}
	
	#main ul.bullet li.link {
		background: 			url(../if/mini_bulletLink.png) no-repeat left top;
		background-size: 		10px 16px;
	}
	
	
	#main div.pageImage > div.startVideo {
		background-size: 		48px 48px;
	}
	
	
	#main div.pageImage > div.startVideo:hover {
		background-size: 		48px 48px;
	}
	
	
	#main div.onePerson {
		padding-left: 			99px;
		min-height: 			91px;
	}
	
	#main div.onePersonText h2 {
		font-size: 				1.3em;
	}
	
	#main div.personDummy {
		width: 					91px;
		height: 				91px;
		background: 			#e0e0e0 url(../if/ifElementsElibag.png) no-repeat 0 -67px;
		background-size: 		100px 175px;
	}
	
	#main div.onePersonPhoto {
		width: 					91px;
		height: 				91px;
	}
	
	#main div.onePersonPhoto > div {
		width: 					91px;
	}
	
	#main div.col50 div.onePersonText form label {
		float: 					none;
		display: 				block;
		width: 					auto;
		font-size: 				0.9em;
		margin-top: 			8px;
	}
	
	#main div.col50 div.onePersonText form input[type=text],
	#main div.col50 div.onePersonText form textarea {
		float: 					none;
		width: 					100%;	
	}
	
	
	#area1 div.col50 {
		width: 					364px;
		margin-right: 			16px;
	}
	
	#area1 div.col50 div.col50 {
		width: 					174px;
	}

	#area1 div.col25 {
		width: 					174px;
		margin-right: 			16px;
	}

	#area1 div.col75 {
		width: 					554px;
		margin-right: 			16px;
	}
	
	#area1 div.col75 div.col25 {
		width: 					269px;
		margin-right: 			16px;
	}
	
	#area1 div.col75 div.col25.col2 {
		margin-right: 			0;
		margin-bottom: 			16px;	
	}
	
	#area1 div.col75 div.col50 div.col50 {
		width: 					269px;
		margin-right: 			0;
	}
	
	#area1 div.col75 div.col50 {
		width: 					269px;
		margin-right: 			16px;
	}
	
	#area1 div.col75 div.col75 {
		width: 					269px;
		margin-right: 			16px;
	}
	
	
	#main div.referencePhoto {
		width: 					185px;
		height: 				185px;
	}
	
	#main div.referenceOverview > div {
		margin-right: 			2px;
		margin-bottom: 			2px;
	}
	
	#main div.referenceText {
		font-size: 				0.82em;	
	}
	
	
	#main div.referenceText > div {
		margin-left: 			-12px;
		width: 					16px;
		height: 				26px;
		background-position: 	-74px -14px;
	}
	
	#main div.referencePhoto:hover div.referenceText > div {
		background-position: 	-44px -14px;
	}

	#main div.referenceText h2 {
		font-size: 				1.75em;
		padding: 				0 4px;
	}
	
	#main div.referenceText p {
		padding: 				0 4px;
	}
	
	
	#main div.newsPhoto {
		width: 					280px;
	}
	
	#main div.newsText {
		width: 					444px;
		margin-right: 			16px;
		padding: 				6px 0 32px 8px;
	}
	
	#main div.news div.newsLink {
		padding: 				0 24px 0 8px;
		font-size: 				1em;
		line-height: 			2em;
	}
	
	#main div.news div.newsLink > div {
		right: 					8px;
		top: 					6px;
	}
	
	footer {
		font-size: 				0.85em;
		height: 				35px;
	}

	footer > div.content {
		width: 					744px;
	}
	
	footer div.socialMedia img {
		width: 					16px;
	}
}

/* 	------------------------------------------------------------------------------------------
	iPhone
	------------------------------------------------------------------------------------------ */
@media (max-width:767px) {
	body {
		font-size: 				14px;
		padding-top: 			54px;
	}
	
	#topBar {
		height: 				54px;
	}
	
	#headImage {
		width: 					225px;
		height: 				46px;
		margin: 				4px 0;
	}
	
	#topBar > div.main,
	#subMenu {
		display: 				none;
	}
	
	
	#topBar > div.sub {
		width: 					auto;
		padding: 				0 8px;
		height: 				54px;
	}
	
	
	#topBar div.menu {
		position: 				fixed;
		height: 				auto;
		background-color: 		rgba(0, 0, 0, 0.6);
		margin: 				0;
		left: 					100%;
		right: 					0;
		top: 					72px;
		bottom: 				0;
		overflow-y: 			scroll;
		-webkit-overflow-scrolling: touch;
		z-index: 				1;
		opacity: 				0;
		-webkit-transition: 	opacity 0.5s;
		transition: 			opacity 0.5s;
		
	}
		
	body.menuOpen #main {
		display: 				none;	
	}
	
	#mobileMenu {
		display: 				block;
	}
	
	body.menuOpen #mobileMenu {
		left: 					0;
		width: 					auto;
		overflow: 				scroll;
		-webkit-overflow-scrolling: touch;
	}

	
	#mainMenu {
		position: 				absolute;
		right: 					-100%;
		top: 					0;
		text-align: 			left;
		min-height: 			100%;
		background-color: 		#666;
		width: 					100%;
		border-top: 			16px solid #026776;
		-webkit-transition: 	right 0.25s ease 0.1s;
		transition: 			right 0.25s ease 0.1s;
	}
	
	body.menuOpen #mainMenu {
		right:					0;
	}
	
	#mainMenu li {
		display: 				block;
	}
	
	#mainMenu > li {
		font-size: 				1.5em;
		line-height: 			2em;
		height: 				auto;
		background-color: 		#026776;
		border-left: 			40px solid #026776;
		border-bottom: 			none;
	}
	
	#mainMenu > li:hover {
		background-color: 		#026776;
	}
	
	#mainMenu a:hover,
	#mainMenu span:hover {
		background-color: 		rgba(0,0,0,0.1);
	}
	
	
	
	#mainMenu > li.hide {
		display: 				block;
	}
	
	#mainMenu > li.header {
		display: 				block;
		background-color: 		#0195aa;
		border-left: 			40px solid #0195aa;
	}
	
	#mainMenu > li.header:hover {
		background-color: 		#0195aa;
	}
	
	#mainMenu > li.footer {
		display: 				block;
		background-color: 		#666;
		border-left: 			40px solid #666;
	}
	
	#mainMenu > li.header:hover {
		background-color: 		#ccc;
	}
	
	#mainMenu a,
	#mainMenu span {
		display: 				block;
	}
	
	#mainMenu > li > a,
	#mainMenu > li > span {
		color: 					white;
		padding: 				0 16px 0 2px;
	}
	
	#mainMenu li.selected > a,
	#mainMenu li.selected > span {
		text-decoration: 		underline;
	}
	
	#mainMenu > li.main > a,
	#mainMenu > li.main > span {
		border-top: 			1px solid #a29061;
	}
	
	#mainMenu > li.main:first-child > a,
	#mainMenu > li.main:first-child > span {
		border-top: 			none;	
	}

	#mainMenu > li > a > div,
	#mainMenu > li > span > div {
	/* 	Responsive	 */
		display: 				none;
		position: 				absolute;
		left: 					-32px;
		top: 					8px;
		width: 					24px;
		height: 				24px;
		background: 			transparent url(../if/ifElementsElibag.png) no-repeat -163px 0;
		background-size: 		200px 350px;
	}

	#mainMenu > li.parent > a > div,
	#mainMenu > li.parent > span > div {
		display: 				block	;
	}
	
	#mainMenu > li.parent.open > a > div,
	#mainMenu > li.parent.open > span > div {
		background-position: 	-163px -24px;	
	}
	
	#mainMenu > li > div {
		display: 				none;
		position: 				static;
		left: 					auto;
		padding-left: 			0px;
		width: 					auto;
		top:					auto;
		background-color:		transparent;
		line-height: 			1.8em;
		font-weight: 			300;
	}
	
	#mainMenu > li.parent.open > div {
		display: 				block;
	}
		
	body.home #pageDiaShow {
		top: 					52px;
		bottom: 				0;
	}
	
	#pageDiaShow {
		font-size: 				0.4em;
	}
	
	#pageDiaShow h2 {
		padding: 				0 4px;
		margin-right: 			20px;
	}
	
	#pageDiaShow p {
		margin-top: 			3px;
		padding: 				4px;
	}
	
	#pageDiaShow > div.dia > div {
		width: 					auto;
		padding-left: 			8px;
		padding-right: 			8px;
		margin-top: 			6%;
	}
	
		
	#mobileMenuSelector {
		display: 				block;
	}
	
	#main > div {
		width: 					auto;
		padding: 				8px 8px 5em 8px;
	}
	
	#main > div > div.areaLeft {
		position: 				relative;	
	}
	
	#main a.link > div {
		top: 						2px;
		width: 						9px;
		height: 					20px;
		background-position: 		-52px -15px;
	}
	
	body.home #area1 {
		width: 					auto;
	}
	
	body.home:not(.edit) #area1 {
		width: 					100%;
	}
		
	#main h1 {
		font-size: 				1.5em;
	}
	
	#main ul.bullet li {
		background: 			url(../if/mini_bullet.png) no-repeat left top;
		background-size: 		10px 16px;
		padding-left: 			14px;
	}
	
	#main ul.bullet li.link {
		background: 			url(../if/mini_bulletLink.png) no-repeat left top;
		background-size: 		10px 16px;
	}
	
	
	#main div.pageImage > div.startVideo {
		background-size: 		48px 48px;
	}
	
	
	#main div.pageImage > div.startVideo:hover {
		background-size: 		48px 48px;
	}
	
	#main div.onePerson {
		padding-left: 			99px;
		min-height: 			91px;
	}
	
	#main div.personDummy {
		width: 					91px;
		height: 				91px;
		background: 			#e0e0e0 url(../if/ifElementsElibag.png) no-repeat 0 -67px;
		background-size: 		100px 175px;
	}
	
	#main div.onePersonPhoto {
		width: 					91px;
		height: 				91px;
	}
	
	#main div.onePersonPhoto > div {
		width: 					91px;
	}
	
	
	#main div.col25 div.onePerson,
	#main div.col50 div.onePerson {
		padding-left: 			0;
	}
	
	#main div.col25 div.onePersonText,
	#main div.col50 div.onePersonText {
		margin-top: 			8px;
	}
	
	#main div.col25 div.onePersonPhoto,
	#main div.col50 div.onePersonPhoto {
		position: 				static;
	}

	#main div.col50 div.onePersonText form label {
		float: 					none;
		display: 				block;
		width: 					auto;
		font-size: 				0.9em;
		margin-top: 			8px;
	}
	
	#main div.col50 div.onePersonText form input[type=text],
	#main div.col50 div.onePersonText form textarea {
		float: 					none;
		width: 					100%;	
	}
	
	#area1 div.col50 {
		width: 					49%;
		margin-right: 			2%;
	}
	
	#area1 div.col50 div.col50 {
		float: 					none;
		width: 					auto;
		margin: 				0;
	}

	#area1 div.col25 {
		width: 					49%;
		margin-right: 			2%;
	}
	
	#area1 div.col25.col2 {
		margin-right: 			0;
	}
	
	#area1 div.col25.col3,
	#area1 div.col25.col4 {
		margin-top: 			8px;
	}

	#area1 div.col75 {
		width: 					49%;
		margin-right: 			2%;
	}
	
	#area1 div.col75 div.col25 {
		width: 					auto;
		float: 					none;
		margin-right: 			0;
	}
	
	#area1 div.col75 div.col25.col2,
	#area1 div.col75 div.col25.col3,
	#area1 div.col75 div.col25.col4 {
		margin-top: 			8px;	
	}
	
	
	#area1 div.col75 div.col50 div.col50 {
		float: 					none;
		margin-right: 			0;
	}
	
	#area1 div.col75 div.col50 {
		float: 					none;
		margin-right: 			0;
	}
	
	#area1 div.col75 div.col75 {
		float: 					none;
		margin-right: 			0;
	}
	
	#main div.referenceCategories > span {
		margin-right: 			4px;
	}
	
	#main div.referencePhoto {
		width: 					calc(50% - 3px);
		height: 				auto;
	}
	
	#main div.referencePhoto:before {
		content: "";
		display:				block;
		padding-top: 			100%;
	}
	
	#main div.referencePhoto a {
		position: 				absolute;
		left: 					0;
		top: 					0;
		right: 					0;
		bottom: 				0;
	}
	
	#main div.referenceText > div {
		margin-left: 			-12px;
		width: 					16px;
		height: 				26px;
		background-position: 	-74px -14px;
	}
	
	#main div.referencePhoto:hover div.referenceText > div {
		background-position: 	-44px -14px;
	}

	#main div.referenceText h2 {
		font-size: 				1.2em;
		padding: 				0 4px;
		line-height: 			1.2em;
	}
	
	#main div.referenceText p {
		font-size: 				0.75em;
		padding: 				0 4px;
		top: 					35%;
	}
	
	#main div.newsPhoto {
		float: 					none;
		width: 					auto;
		margin: 				0;
	}
	
	#main div.newsText {
		float: 					none;
		width: 					auto;
		margin-right: 			0;
		padding: 				6px;
	}
	
	#main div.news div.newsLink {
		padding: 				0 24px 0 8px;
		font-size: 				1em;
		line-height: 			2em;
	}
	
	#main div.news div.newsLink > div {
		right: 					8px;
		top: 					6px;
	}
	
	#main div.col75 div.newsText {
		width: 					auto;
	}

	
	footer {
		display: 				none;
	}
	
}

/* 	------------------------------------------------------------------------------------------
	iPhone Hochformat
	------------------------------------------------------------------------------------------ */
@media (max-width:450px) {
	#area1 div.col50 {
		float: 					none;
		width: 					auto;
		margin-right: 			0;
	}
	
	#area1 div.col50.col2 {
		margin-top: 			8px;
	}
	
	#area1 div.col25 {
		float: 					none;
		width: 					auto;
		margin-right: 			0;
		margin-bottom: 			8px;
	}
	
	#area1 div.col25.col2,
	#area1 div.col25.col3,
	#area1 div.col25.col4 {
		margin-top: 			8px;
	}
	
	#area1 div.col25.col4 {
		margin-bottom: 			0;
	}

	#area1 div.col75 {
		float: 					none;
		width: 					auto;
		margin-right: 			0;
	}
}