/*
 * Web Fonts from fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2012 Fontspring
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      FontSite Inc.
 * License URL: http://www.fontspring.com/fflicense/fontsite
 *
 *
 */

@font-face {
    font-family: 'franklin_gothic_fs_medcdRg';
    src: url('fonts/FranklinGothic-Med-webfont.eot');
    src: url('fonts/FranklinGothic-Med-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/FranklinGothic-Med-webfont.woff') format('woff'),
         url('fonts/FranklinGothic-Med-webfont.ttf') format('truetype'),
         url('fonts/FranklinGothic-Med-webfont.svg#franklin_gothic_fs_medcdRg') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'franklin_gothic_fs_cdregular';
    src: url('fonts/FranklinGothic-Book-webfont.eot');
    src: url('fonts/FranklinGothic-Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/FranklinGothic-Book-webfont.woff') format('woff'),
         url('fonts/FranklinGothic-Book-webfont.ttf') format('truetype'),
         url('fonts/FranklinGothic-Book-webfont.svg#franklin_gothic_fs_cdregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('fonts/websymbols-regular-webfont.eot');
    src: url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/websymbols-regular-webfont.woff') format('woff'),
         url('fonts/websymbols-regular-webfont.ttf') format('truetype'),
         url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

	* {
		margin: 0;
	}
	
	html, body {
		height: 100%;
	}

	body{
		background-color: #f7f8f8;
		font-family: 'franklin_gothic_fs_cdregular', Arial, sans-serif; 
		font-size: 1em;
		line-height: 1.5em;
	}
	
	/*.wrapper{
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -65px;
		
	}*/
	
	.footer, .push{
		height: 65px;
		margin-top: 25px;
	}
	
	p{
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		-o-hyphens: auto;
		hyphens: auto;
	}
	
		
	h1, h2, h3, h4{
		font-family: 'franklin_gothic_fs_cdregular', Arial, sans-serif; 
		font-size: 1em;
		padding-left: 0.2em;
	}
	
	.article-menu h3{
		text-align: center;
	}
	
	h3{
		text-transform: uppercase;
	}
	
	h1{
		font-size: 20px;
		text-align: center;
		color: #eee;
		letter-spacing: 0.5em;
		text-transform: uppercase;
		cursor: pointer;
	}
	
	.hteaser{
		font-size: 80px;
		text-align: center;
		color: #000;
		text-transform: none;
		letter-spacing: normal;
		line-height: 80px;
	}
	
	h2, h3, h4, #article-menu a{
		text-align: left;
		padding-top: 0.3em;
		padding-bottom: 0.2em;
		margin-bottom: 0.4em;
		letter-spacing: 0.2em;
		margin-top: 1em;	
	}
	
	h2 a, h3 a{
		text-decoration: none !important;
	}
	

	h4{
		color: #eee;
	}
	
	.content a{
		color: #000;
	}
	
	h4 a{
		color: #eee;
	}
	
	p{
		padding-bottom: 0.5em;
	}
	
	.teaser p{
		margin-top: 1em;
		text-align: center;
	} 
	
	.load{
	    display: none;  
	    position: absolute;
	    background: url(../css/img/ajax-loader.gif);  
	    top: 50%;
	    left: 50%;
	    width:24px;  
	    height: 24px;  
	    text-indent: -9999em;  
	    z-index: 999;
	}
	
	#head{
		margin-top: 25px;
		margin-bottom: 15px;
	}
	
	#sitemenu{
		display: none;
	}
	
	.mainmenu{
		text-transform: uppercase;
	}
	
	/* @group Submenu */
	
	.kersten{
		font-family: 'franklin_gothic_fs_medcdRg', Arial, sans-serif; 
		font-size: 1.2em;
		border: 2px solid #000;
	}
	
	.active{
		border: 2px solid #000 !important;
	}
	
	li.twocol{
		border: 2px solid rba(0,0,0,0);
	}
	
	.submenu{
		text-align: center;
	}
	
	
	.submenu li{
		display: inline;
	}
	
	.submenu li a{
		color: #000;
		text-decoration: none;
		letter-spacing: 0.2em;
		padding-bottom: 25px;
		display: block;
		padding-top: 25px;
	}
	
	.submenu .active a{
		color: #000;
	}
	
	/* @end */
	
	.teasercontainer{
		background: #ffed72;
		color: #000;
		margin: 1.4em 0 1.6em;
	}
	
	.teaser{
		padding: 5em 0;
		
	}
	
	.categories{
		margin: 1.4em 0 1.6em;
		text-align: left;
		padding: 0.8em 0 0.8em;
	}
	
	.categories li{
		display: inline;
	}
	
	ul.categories li a{
		text-decoration: none;
		color: #000;
		padding: 0.4em 0.5em 0.3em;
		margin-top: 0;
		margin-bottom: 0;
		margin-right: 0.2em;
	}
	
	
	.categories a.active_btn, .categories a.active_btn:hover, .categories a.active_btn {
		background: #ffed72;
		color: #000;
	}
	
	
	.active a, .active a:hover, .inactive a:hover{
		color: #ffed72; 
	}
	
	.inactive a{
		color:  #fff !important;
	}
	
	.submenu li a:hover, .content a:hover, .header a:hover, h1:hover {
		color: #ffed72;
	}
	
	
	#article-menu a, h1 a{
		text-decoration: none;
		display: block;
	}
	
	
	.content a{
		text-decoration: underline;
	}
	
	
	
	.header{
		padding: 15px 0 10px;
	}
	
	.header, .footer{
		color: #000000;
		border-bottom: 1px solid #ffffff;
	}
	
	.navicon, .topicon, .imageicon, .socialicon{
		font-family: 'WebSymbolsRegular', Arial, sans-serif;
		text-align: center;
		padding-top: 0.3em;
		padding-bottom: 0.2em;
		margin-bottom: 0.4em;
		letter-spacing: 0.2em;
		margin-top: 1em;
		color: #222;
	}
	
	.socialicon{
		font-size: 36px;
	}
	
	.teaser a{
		text-decoration: none;
	}
	
	.topicon, .imageicon{
		padding-right: 0.4em;
	}
	
	.previewimage{
		padding: 0;
		overflow: hidden;
		height: 130px;
		text-align: center;
		color: #333;
		border-bottom: 2px solid #000;
	}
	
	.previewimage img{
		transform: scaleY(1);
		transition: all 0.7s ease-in-out;
		-webkit-transform: scaleY(1);
		-webkit-transition: all 0.7s ease-in-out;
		-moz-transform: scaleY(1);
		-moz-transition: all 0.7s ease-in-out;
		-o-transform: scaleY(1);
		-o-transition: all 0.7s ease-in-out;
	}
	
	.previewimage img:hover{
		transform: scale(3);
		-webkit-transform: scale(3);
		-moz-transform: scale(3);
		-o-transform: scale(3);
	}
	
	.previewimage:hover, .previewimage:active, previewimage:focus {
		/*
		-webkit-box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.7), 
								  1px 1px 0px rgba(255, 255, 255, 0.7);
		-moz-box-shadow: inset 1px 1px 0px rgba(255,255,255,0.7), 
							   1px 1px 0px rgba(255,255,255,0.7);
		box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.7), 
						  1px 1px 0px rgba(255, 255, 255, 0.7);*/
	}
	
	.previewimage, .totop{
		
	}
	
	.caption{
		text-align: center;
		margin-top: 0.3em;
		margin-bottom: 1em;
	}
	
	
	.portfolioimage img{
		box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15), 
					1px 0 0 rgba(0, 0, 0, 0.1);
		margin: 10px 0 15px;
		border-radius: 2px;
		border: solid 6px rgba(255, 255, 255, 1);
	}

	
	.portfolioimage{
		width: 100%;
		float: left;
	}
	
	.thumb{
		width: 22.05%;
		float: left;
		margin-right: 3.8%;
		margin-bottom: 3.8%;
		height: 100px;
	}
	
	.image_container div:nth-child(4n+4){
		margin-right: 0px;
	}
	
	
	.vimeo{
		padding: 0;
		width: 100%;
		overflow: hidden;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		border: solid 6px #fff;
		background-color: #fff;
		box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15), 
					1px 0 0 rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15), 
					1px 0 0 rgba(0, 0, 0, 0.1);
		-webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.15), 
					1px 0 0 rgba(0, 0, 0, 0.1);
	}
	
	.borderbtm{
		border-bottom: 1px #000 solid;
	}
	
	.bordertop{
		border-top: 1px #000 solid;
	}
	
				
	.metainfo{
		border-bottom: solid 1px #000;
		padding: 1.3em 0.3em 1.2em;
	}
	
	.information h3, .imprint h3{
		border-bottom: 1px #000 solid;
	}
		
	table{
		width: 100%;	
	}
	
	tr{
		vertical-align: center;
		padding-top: 0.8m;
		padding-bottom: 0.3em;
	}
	
	tr:nth-child(even), .totop {
	  background-color: #ebebeb;
	}
	
	td, tr{
		padding-left: 0.3em;
		padding-right: 0.3em;
	}
	
	.totop{
		position: fixed;
		bottom: 2%;
		right: 3.8%;
	}
	
	.totop a{
		text-align: center;
		display: block;	
		padding: 0.5em 1em 0.4em;
		text-decoration: none;
	}
	
	.change_view a{
		text-decoration: none;
	}



/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

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

	body {
		
	}
	
	
	.information h2{
		text-align: center;	
	}
	
	.submenu{
		margin-left: 25px;
		margin-right: 25px;
	}
	
	.submenu li{
		display: block;
		margin-bottom: 10px;
	}
	
		
	#menu, #article-title{
		float: left !important; 
		margin-right: 3.8% !important;
		min-height: 1px ;
		padding-left: 0px;
		padding-right: 0px;		
	}
	
	.navicon a{
		display: block;
	}
	
	
	.categories li a{
		display: inline-block;
		margin-top: 0.3em;
		margin-top: 0.3em;
	}
	
}