/* clearfix */
	.clearfix:before, .clearfix:after { content:""; display:table; }
	.clearfix:after { clear:both; }
	.clearfix { zoom:1; }	/* For IE 6/7 (trigger hasLayout) */
	
	
	/* common settings ------------------------------------------------------------------------------------------- */		
	html, body {
		height: 100%;	/* fix for lazyload plugin and correct position calculations */
		-webkit-text-size-adjust: 100%;	/* prevent huge font on stupid iPhone */
          -ms-text-size-adjust: 100%; 
	}
	body {
		margin: 0px;
		padding: 0px;	
		position: fixed;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
	}
	.page, .page td, .page th, .intro {
		font-family: Arial, sans-serif; 
		font-size: 12px;
		line-height: 1.2em;
		color: #333333;
	}
	.page a { text-decoration: none; }
	
	a img { border: none; }
	a {
		color: inherit;	
	}
	
	.gray { color: #8b8b8b; }
	
	/* Page layout -------------------------------------------------------- */
	.page {
		
	}
		.margin {
			position: absolute;
			
			top: 10px;
			left: 10px;
			width: 154px;
			/* background-color: #eeeecc; */
		}
			.margin .nav {
				/*
				position: absolute;
				display: block;
				z-index: 1;
				*/
				
				padding-bottom: 20px;
				
			}
				
				.margin .nav .title .small {
					display: none;
				}
			
		.content {
			position: absolute;
			right: 20px;
			top: 60px;
			bottom: 20px;
			left: 20px;
		}
			.content .col {
				float: left;
				width: 48%;
				/* margin-bottom: 12px; */
			}
				.content .col:first-of-type {
					margin-right: 4%;
				}
				
		.header {
			position: absolute;
			left: 20px;
			right: 20px;
			top: 0px;
			padding-top: 16px;
			height: 44px;
		}
			.header .title a {
				display: block;
				height: 40px;	
				width: 180px;
			}
			.header .contact a {
				position: absolute;
				right: 0px;
				top: 16px;
				height: 40px;	
			}
		
		
		.infoButton {
			position: absolute;
			left: 180px;
			width: 20%;
			min-width: 200px;
			top: 20px;
			height: 20px;	
			
			z-index: 10;
			padding: 20px 20px 0px 0px;
			cursor: pointer;
			display: none;
		}
		
		.infoLayer {
			position: absolute;
			left: 160px;
			width: 7%;
			min-width: 200px;
			top: 80px;
			bottom: 0%;	
			background-color: #ffffff;
			z-index: 10;
			margin-bottom: 20px;
			padding: 20px 5% 0px 20px;
			display: none;
			overflow-x: hidden;
			overflow-y: auto;
			white-space: pre-wrap;
		}
		
		
		
		/* slideshow -------------------------------------- */
		.slideshow {
			position: absolute;
			right: 0px;
			top: 0px;
			bottom: 0px;
			left: 0px;
			overflow: hidden;
		}
		
		/* home slideshows */
		.home .content  .col50 {
			width: 50%;
			float: left;	
		}
			.home .content  .col50.right {
				padding-top: 3%;
				position: relative;
				left: -1px;
				top: 0px;
			}
				.home .content .aspect-ratio {
				width: 100%;
				position: relative; /* If you want text inside of it */
				/* padding-top: 66.6%; /* 150:100 */
			}
				.home .content .aspect-ratio.type1 { padding-top: 66.6% }
				.home .content .aspect-ratio.type2 { padding-top: 100% }
				.home .content .aspect-ratio.type3 { padding-top: 75% }
				.home .content .aspect-ratio.type4 { padding-top: 56.25% }
				
			.home .content .title {
				pointer-events: none;
				position: absolute;
				top: 40%;
				left: 4%;
				font-size: 1.3vw;
				color: #FFFFFF;
			}
				.home .content .left .aspect-ratio.type2 .title {
					left: 37%;
				}
		
		.videocontainer {
			width: 100%;	
		}
		
		.home .projectlink {
			display: block;	
		}
		
		
		
		
		
		/* admin area for slideshows ------------------------------------------------ */
		.page .admin {
			position: absolute; 
			right: 10px;
			top: 10px;
			left: 174px;
			/* background-color: #eeeeee;	*/
		}
			.page .admin .row {
				border-style: none none solid none;
				border-width: 1px;
				border-color: #999999;
				padding-top: 10px;
				padding-bottom: 10px;
			}
				.page .admin .row .preview {
					display: inline-block;
					width: 100px;
					margin-right: 20px;
					text-align: right;
				}
				.page .admin .row .data {
					display: inline-block;
				}
					.page .admin .row .data td {
						vertical-align: top;
					}
					.page .admin .row .data tr > td:first-of-type {
						font-family: arial;
						font-weight: bold;
					}
					
					.page .admin .row .data td + td {
						width: 154px;
						border-style: none solid solid none;
						border-width: 1px;
						border-color: #eeeeee;
					}
	
		
		
		
		
		/* small version 
		@media only screen and (max-width: 720px) {
			
			.content {
				
			}
				.content .col {
					float: none;
					width: 100%;	
				}
					.content .col:first-of-type {
						margin-right: 0px;
					}
			
		}
		
		*/
		
		
		
		/* content elements ------------------------------------ */
		
		.page.standard {
			padding-bottom: 20px;
		}
		
		.page.standard .content {
			padding-top: 22px;
			max-width: 600px;
			bottom: auto;
			padding-bottom: 24px;
		}
			
			.page.standard .content a {
				color: #8b8b8b;
			}
				.page p a:before {
					content:"\►";
					position: relative;
					top: -1px;
					font-size: 8px;
					margin-right: 2px;
					margin-left: 3px;
				}
				
				.page.standard .content a:hover {
					color: #333333;
				}
			
			.page.standard .content .col h2 {
				font-weight: normal;
				font-size: 14px;
				line-height: 1.2em;
				margin: 0px 0px 12px 0px;
			}
			
			.page.standard .content .col p {
				margin: 0px 0px;
			}
		
			.page.standard .content .col .image {
				width: 100%;
				margin-top: 1px;
				margin-bottom: 12px;
			}
			
			.page.standard .content .col ul {
				padding-left: 20px;
				margin: 12px 0px;
				list-style-type: none;
			}
				.page.standard .content ul li {
					position: relative;	
				}
				 .page.standard .content ul li:before {
						content: "•";
						position: absolute;
						top: 0px;
						left: -10px;
						/* color: #28A546; */
					}
			
		
		/* small version */
		@media only screen and (max-width: 568px) {
			.page.standard .content .col .imagespace {
				text-align: center;
			}	
			.page.standard .content .col .image {
				max-width: 288px;
				margin-left: auto;
				margin-right: auto;
			}	
			
		}
		
		
		
		
		@media only screen and (max-width: 464px) {
			.infolayer {
				right: 40px;
				min-width:  auto;
				width: auto;	
			}
		}