@charset "utf-8";

/* Master CSS by Pixelfabrik.ch */



/*	Wichtige Body definitionen
	================================*/
	body, html {padding:0px; margin:0px; width: 100%; height: 100%; border: 0;}
	a {text-decoration:underline;  font-weight:400; color: #1c2028;}
	
	h2 {font-family: 'Source Sans Pro', sans-serif; font-weight:700;  text-transform:uppercase; font-size:30px; color: #1c2028;}
	h3 {font-family: 'Source Sans Pro', sans-serif; font-weight:700;  text-transform:uppercase; font-size:30px; color: #fff;}
	/*h4 für titel portfolio*/
	h4 {font-family: 'Source Sans Pro', sans-serif; font-weight:700;  text-transform:uppercase; font-size:20px; color: #1c2028;}
	p {font-family: 'Source Sans Pro', sans-serif; font-weight:300; line-height:23px; margin:20px auto 10px auto; font-size:18px; color: #83868b;}
	.untertitel {font-family: 'Source Sans Pro', sans-serif; font-weight:400;  text-transform:uppercase; font-size:18px; color: #1c2028; line-height:40px;}
	.lauftext {font-family: 'Source Sans Pro', sans-serif; font-weight:300; line-height:23px; margin:20px auto 10px auto; font-size:18px; color: #83868b;}
		
		@media screen and (max-width: 1100px) {
			h2 {font-size:24px; line-height:26px;}
			h3 {font-size:24px; line-height:26px;}
			p {font-size:16px; line-height:20px; color: #676b72;}
			.untertitel {font-size:16px; line-height:30px;}
			.lauftext {font-size:16px; line-height:20px;}
		}
		
		@media screen and (max-width: 650px) {
			h2 {font-size:20px; line-height:22px;}
			h3 {font-size:20px; line-height:22px;}
			p {font-size:14px; line-height:18px; text-align:left; color: #676b72;}
			.untertitel {font-size:14px; line-height:18px;}
			.lauftext {font-size:14px; line-height:18px;}
		}
		

	
	#slider  {height: 600px; width: 100%;  z-index: 10; float: left; align-content:center;
	background-image:url(../images/head.jpg); background-position:center center; background-size:cover; background-attachment:fixed; }
	
	#slideragentur  {height: 600px; width: 100%;  z-index: 10; float: left;
	background-image:url(../images/desktop-pixi.jpg); background-position:center center; background-size:cover; background-attachment:fixed;}
	
	#sliderkontakt {height: 350px; width: 100%;  z-index: 10; float: left;
	background-image:url(../images/agentur2.jpg); background-position:center center; background-size:cover; background-attachment:fixed;}
	
	#slidervideo {height: 150px; width: 100%;  z-index: 10; float: left;
	background-image:url(../images/agentur2.jpg); background-position:center center; background-size:cover; background-attachment:fixed;}
	#slidervideo2 {height: 250px; width: 100%;  z-index: 10; float: left;
	background-image:url(../images/agentur2.jpg); background-position:center center; background-size:cover; background-attachment:fixed;}
	
	#sliderimp {height: 350px; width: 100%;  z-index: 10; float: left;
	background-image:url(../images/head2.jpg); background-position:center center; background-size:cover; background-attachment:fixed;}
	
	#slider2  {height: 300px; width: 100%;  z-index: 10; float: left;
	background-image:url(../images/portfolio/schwind-briefschaften.jpg); background-position:center center; background-size:cover; background-attachment:fixed;}
	
	#slider3  {height: 300px; width: 100%;  z-index: 10; float: left;
	background-image:url(../images/agentur.jpg); background-position:center center; background-size:cover; background-attachment:fixed;}
	
	#back {width: 50%; margin: 13px 0 13px 25%; height: 25px; background-color: #fff; float: left; text-align:left;}
	#up {width: 50%; margin: 13px 0 13px 25%; height: 25px; background-color: #fff; float: left; text-align:center;}
	.weiss {width: 100%; height: 50px; background-color: #fff; float: left;}
	
	#slider_portfolio  {height: 303px; width: 100%;  z-index: 10; float: left;}
	
	#content {width: 50%; margin: 25px 0 50px 25%; z-index: 1; align-content:center; float: left;}
	#text_box {width: 50%; margin: 125px 0 50px 25%; background-color: #fff; z-index: 1; align-content:center; float: left;}
	.video_box {width: 50%; margin: 25px 0 0 25%; z-index: 1; align-content:center; float: left; background-color: #fff;}
	.vidframe {width:722px; height:406px; background-color: #fff;}
	
	#vierbilder  { width: 100%; background-color: #fff; float: left;}
	
	#balkenblau {width: 100%;  background-color: #6a7282; text-align: center; float: left;}
	#textbalken {width: 50%; margin: 0px 25% 0px 25%; z-index: 1; text-align:left;}
	
	#contentdots {width: 100%; align-content:center; float: left; background-image:url(../images/pattern.jpg);}
	#textbox {width: 50%; margin: 50px 25% 45px 25%; z-index: 1; text-align:left;}
	
	#fuss {width: 100%; background-color: #1c2028; text-align: center; float: left;}
	
	
		@media screen and (max-width: 1100px) {
			#content {width: 80%; margin: 10px 10% 20px 10%;}
			#slider, #slideragentur  {height: 303px; background-size: 1200px; background-position:top center;}
			#sliderkontakt {height: 350px;}
			#slidervideo {height: 100px;}
			#slidervideo2 {height: 150px;}
			#sliderimp {height: 250px; background-size: 1200px; background-position:center center;}
			#slider2, #slider3 {height: 202px; background-size: 1600px; background-position:top center;}
			#textbox {width: 80%; margin: 35px 10% 40px 10%;}
			#text_box {width: 80%; margin: 100px 10% 50px 10%;}
			.video_box {width: 80%; margin: 10px 10% 0 10%; }
			.vidframe {width:500px; height:281px;}
			#back {width: 80%; margin: 13px 10% 13px 10%;}
			
			#textbalken {width: 80%; margin: 0px 10% 0px 10%; z-index: 1; text-align:left;}
			#fuss {width: 100%; background-color: #1c2028; float: left;}
		}
		
		@media screen and (max-width: 650px) {
			#fuss {width: 100%; background-color: #1c2028; float: left;}
			#slider, #slideragentur  {height: 250px; background-size: 800px; background-position:top center;}
			#slider2, #slider3 {height: 202px; background-size: 700px; background-position:center center;}
			#sliderkontakt {height: 200px;}
			#sliderimp {height: 200px; background-size: 800px; background-position:center center;}
			.vidframe {width:240px; height:135px;}
			.video_box {margin: 0px 10% 0 10%;}
			#slidervideo2 {height: 100px;}
			#back {width: 80%; margin: 13px 10% 13px 10%;}
		}

/*	Dienstleistungen Startseite
	================================*/
	#dienstleistungen {width:100%; height:300px;}
	.dienst_box { width:100%;  float: left; margin: 0 0 25px 0;}
	.bild1 	 { width:40%; height:150px; background:url(../images/001-logodesign.jpg) no-repeat; background-size:cover; background-position:center center; float: left; margin: 0 0 0 5%;}
	.bild2 	 { width:40%; height:150px; background:url(../images/portfolio/huber-briefschaften.jpg) no-repeat; background-size:cover; background-position:center center; float: left; margin: 0 0 0 5%;}
	.bild3 	 { width:40%; height:150px; background:url(../images/portfolio/stoll-mobile.jpg) no-repeat; background-size:cover; background-position:center center; float: left; margin: 0 0 0 5%;}
	.bild4 	 { width:40%; height:150px; background:url(../images/005-videodesign.jpg) no-repeat; background-size:cover; background-position:center center; float: left; margin: 0 0 0 5%;}
	.text	{ width:55%;  float: left; }
	.bild01 	 { width:40%; height:150px; background:url(../images/01.jpg) no-repeat; background-size:cover; background-position:center center; float: left; margin: 0 0 0 5%;}
		
	@media screen and (max-width: 650px) {
			.text {width:100%; height:auto;}
			.bild1 {display:none;}
			.bild2 {display:none;}
			.bild3 {display:none;}
			.bild4 {display:none;}
			.bild01 {display:none;}
		}
		
/*	Navigation GROSS
	================================*/
#erstes { height: 102px; background-color: #1c2028; width: 100%; z-index: 99; position: fixed;}
#zweites { width:50%; margin: 0 25% 0 25%; position: fixed; }
#logo {width: 246px; height: 69px; float: left; background-image:url(../images/logo.png); background-repeat:no-repeat;}
#navigation {margin: 43 0 0 0;}

			#px-menu {display:none;}
  			#navigation label {display: none; padding:0px;}
  			#navigation label:hover {cursor:pointer;}
			
			.menu ul { list-style:none; display:flex; justify-content:flex-start; padding:0 0 0 10px; margin: 42px 0 0 0;}
  
  			.menu li a:hover {color:#fff; }
			.menu li a.selected {color:#fff; }
  
  			.menu li a {display:block; color:#6b7382; margin: 0; padding:5px 10px 5px 17px; 
			text-decoration:none; font-weight:300; line-height:23px;
			font-size:18px; text-transform:uppercase; font-family: 'Source Sans Pro', sans-serif; letter-spacing:1;}
			
			/* NAVIGATION - MITTEL */
			@media screen and (max-width: 1100px) {
			#erstes { height:71px;}
			#zweites { width:80%; margin: 0 10% 0 10%; position: fixed; }
			#logo {width: 172px; height: 47px; background-image:url(../images/logo-klein.png); background-repeat:no-repeat;}
			.menu ul { padding:0 0 0 10px; margin: 16px 0 0 0;}
			.menu li a { line-height:23px; font-size:16px; letter-spacing:0.5;}
			#navigation {margin: 22 0 0 0;}
			}
			
			/* NAVIGATION - KLEIN */
			@media screen and (max-width: 650px) {
			#erstes { height:71px;}
			#zweites { width:100%; margin: 0;}
			#logo {width: 20px; height: 20px;}
			#navigation {margin: 0;}
			#navigation label {display: block;}
	 		.menu {background:#1c2028; width: 100%; margin-left:-100%;  transition:all 500ms; -moz-transition:500ms all;
			-ms-transition:500ms all; -o-transition:500ms all; -webkit-transition:500ms all;}	
	 		.menu ul {flex-direction:column; padding:0;}
	 		.menu li {border-top:1px solid #6b7382;}
			#px-menu:checked ~ .menu { margin:0;}
			}


/*	Unter-Navigation Portfolio
	================================*/
		#untermenu { height: 50px; background-color: #6a7282; width: 100%; z-index: 98; border-bottom: 10px solid #fff; float:left;}
		#umenu { width:50%; margin: 0 25% 0 25%;}
		.portmenu ul { list-style:none; display:flex; justify-content:flex-start; margin: 16px 0 0 0; padding:0;}
  		.portmenu li a:hover {color:#fff; }
		.portmenu li a.selected {color:#fff; }
  		.portmenu li a {display:block; color:#1c2028; margin: 0; padding:0px 10px 0px 0px; 
			text-decoration:none; font-weight:300; line-height:19px;
			font-size:16px; text-transform:uppercase; font-family: 'Source Sans Pro', sans-serif; letter-spacing:1;}
		
		
		@media screen and (max-width: 1100px) {
			#umenu { width:80%; margin: 0 10% 0 10%;}
			}
		@media screen and (max-width: 650px) {
			#umenu { width:100%; margin: 0;}
			.portmenu ul { margin: 16px 0 0 20px; padding:0;}
			}
			
/*	Video PORTFOLIO
	================================*/	
	#videohg { height: auto; background-color: #b2b7c1; width: 100%; z-index: 97; border-bottom: 10px solid #fff; float:left;}
	

/*	PIXI PORTFOLIO
	================================*/	

	/* portfolio BILDER*/

	.port_1 { background:url(../images/portfolio/stoll-logo2.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_1-1 { background:url(../images/portfolio/stoll-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_1-2 { background:url(../images/portfolio/stoll-desktop.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_1-3 { background:url(../images/portfolio/stoll-mobile.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_2 { background:url(../images/portfolio/huber-briefschaften.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_2-1 { background:url(../images/portfolio/huber-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_2-2 { background:url(../images/portfolio/huber-briefschaften.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_2-3 { background:url(../images/portfolio/huber-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_3 { background:url(../images/portfolio/schwind-logo3d-hell.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_3-1 { background:url(../images/portfolio/schwind-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_3-2 { background:url(../images/portfolio/schwind-briefschaften.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_3-5 { background:url(../images/portfolio/schwind-logo3d-orangel.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_4 { background:url(../images/portfolio/sems-vk.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_4-1 { background:url(../images/portfolio/sems-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_4-2 { background:url(../images/portfolio/sems-vk.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_4-3 { background:url(../images/portfolio/sems-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_8 { background:url(../images/portfolio/heresta-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_8-1 { background:url(../images/portfolio/heresta-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_8-2 { background:url(../images/portfolio/heresta-flyer.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_8-3 { background:url(../images/portfolio/heresta-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_7 { background:url(../images/portfolio/messora-visitenkarten.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_7-1 { background:url(../images/portfolio/messora-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_7-2 { background:url(../images/portfolio/messora-visitenkarten.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_6 { background:url(../images/portfolio/karizzma-felge.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_6-1 { background:url(../images/portfolio/karizzma-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_5 { background:url(../images/portfolio/bodywerk-briefschaften.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_5-1 { background:url(../images/portfolio/bodywerk-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_5-2 { background:url(../images/portfolio/bodywerk-briefschaften.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_5-3 { background:url(../images/portfolio/bodywerk-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_9 { background:url(../images/portfolio/velvet-logo3d-2.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_9-1 { background:url(../images/portfolio/velvet-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_10 { background:url(../images/portfolio/manoloca-briefschaften.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_10-1 { background:url(../images/portfolio/manoloca-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_10-2 { background:url(../images/portfolio/manoloca-briefschaften.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_11 { background:url(../images/portfolio/tzunamee-logo3d-1.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_11-1 { background:url(../images/portfolio/tzunamee-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_12 { background:url(../images/portfolio/walter-meier-print02.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_12-2 { background:url(../images/portfolio/walter-meier-print10.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_13 { background:url(../images/portfolio/alibi-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_13-2 { background:url(../images/portfolio/alibi-flyer2.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_13-3 { background:url(../images/portfolio/alibi-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_14 { background:url(../images/portfolio/garage-walter-tablet.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_14-3 { background:url(../images/portfolio/garage-walter-desktop.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_15 { background:url(../images/portfolio/gablemacher-web1.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_15-1 { background:url(../images/portfolio/gablemacher-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_15-3 { background:url(../images/portfolio/gablemacher-web2.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_16 { background:url(../images/portfolio/etawatt-print.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_16-2 { background:url(../images/portfolio/etawatt-print.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_17 { background:url(../images/portfolio/ochsner-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_17-3 { background:url(../images/portfolio/ochsner-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_18 { background:url(../images/portfolio/gasser-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_18-3 { background:url(../images/portfolio/gasser-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_19 { background:url(../images/portfolio/schoenbuehl-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_19-1 { background:url(../images/portfolio/schoenbuehl-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_19-2 { background:url(../images/portfolio/schoenbuehl-bild4.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_20 { background:url(../images/portfolio/homecare-logo3d.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_20-1 { background:url(../images/portfolio/homecare-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_20-2 { background:url(../images/portfolio/homecare-bag.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	
	.port_21 { background:url(../images/portfolio/altra-flyer2.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_21-2 { background:url(../images/portfolio/altra-flyer1.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_22 { background:url(../images/portfolio/sasag-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_22-3 { background:url(../images/portfolio/sasag-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_23 { background:url(../images/portfolio/adobe-portfolio.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_23-3 { background:url(../images/portfolio/adobe-portfolio.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_24 { background:url(../images/portfolio/hp-portfolio.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_24-3 { background:url(../images/portfolio/hp-portfolio.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_25 { background:url(../images/portfolio/sap-portfolio.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_25-3 { background:url(../images/portfolio/sap-portfolio.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_26 { background:url(../images/portfolio/microsoft-portfolio.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_26-3 { background:url(../images/portfolio/microsoft-portfolio.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_27 { background:url(../images/portfolio/schloss-laufen-broschuere2.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_27-2 { background:url(../images/portfolio/schloss-laufen-broschuere1.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_28 { background:url(../images/portfolio/sh-power-fassade.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_28-2 { background:url(../images/portfolio/sh-power-inserat.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_29 { background:url(../images/portfolio/pcp-prospekt1.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_29-2 { background:url(../images/portfolio/pcp-prospekt3.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_29-3 { background:url(../images/portfolio/pcp-shop-screen.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_30 { background:url(../images/portfolio/niedermann-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_30-3 { background:url(../images/portfolio/niedermann-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_31 { background:url(../images/portfolio/pberger-briefschaften.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_31-1 { background:url(../images/portfolio/pberger-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_31-2 { background:url(../images/portfolio/pberger-briefschaften.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_32 { background:url(../images/portfolio/wenger-web2.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_32-3 { background:url(../images/portfolio/wenger-web2.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_33 { background:url(../images/portfolio/beringen-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_33-3 { background:url(../images/portfolio/beringen-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_34 { background:url(../images/portfolio/hrm-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_34-3 { background:url(../images/portfolio/hrm-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_35 { background:url(../images/portfolio/raum-raum-ipad3er.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_35-3 { background:url(../images/portfolio/raum-raum-ipad3er.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_36 { background:url(../images/portfolio/regula-brunner-flyer.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_36-1 { background:url(../images/portfolio/regula-brunner-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_36-2 { background:url(../images/portfolio/regula-brunner-vk.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_36-3 { background:url(../images/portfolio/regula-brunner-ipad.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_37 { background:url(../images/portfolio/caromatic-ipad.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_37-3 { background:url(../images/portfolio/caromatic-ipad.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_38 { background:url(../images/portfolio/kunz-ipad.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_38-1 { background:url(../images/portfolio/kunz-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_38-3 { background:url(../images/portfolio/kunz-ipad.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_39 { background:url(../images/portfolio/gastrokonzept-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_39-3 { background:url(../images/portfolio/gastrokonzept-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_40 { background:url(../images/portfolio/interiordesign-ipad.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_40-3 { background:url(../images/portfolio/interiordesign-ipad.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_41 { background:url(../images/portfolio/cilag-portfolio.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_41-3 { background:url(../images/portfolio/cilag-portfolio.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_42 { background:url(../images/portfolio/rheinfall-ipad.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_42-3 { background:url(../images/portfolio/rheinfall-ipad.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_43 { background:url(../images/portfolio/altersheim-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_43-3 { background:url(../images/portfolio/altersheim-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_44 { background:url(../images/portfolio/haessig-gonzalez-ipad.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_44-3 { background:url(../images/portfolio/haessig-gonzalez-ipad.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_45 { background:url(../images/portfolio/beautycare-logo3d-2.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_45-1 { background:url(../images/portfolio/beautycare-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_45-2 { background:url(../images/portfolio/beautycare-logo3d-2.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_46 { background:url(../images/portfolio/syntron-vk1.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_46-2 { background:url(../images/portfolio/syntron-vk1.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_47 { background:url(../images/portfolio/strasser-voegtli-logo2.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_47-1 { background:url(../images/portfolio/strasser-voegtli-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_47-2 { background:url(../images/portfolio/strasser-voegtli-logo2.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_48 { background:url(../images/portfolio/it4sys-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_48-1 { background:url(../images/portfolio/it4sys-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_48-2 { background:url(../images/portfolio/it4sys-vk.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_49 { background:url(../images/portfolio/absolutely-loca-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_49-1 { background:url(../images/portfolio/absolutely-loca-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_49-2 { background:url(../images/portfolio/absolutely-loca-visitenkarte.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_50 { background:url(../images/portfolio/allrec-inserate.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_50-1 { background:url(../images/portfolio/allrec-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_50-2 { background:url(../images/portfolio/allrec-inserate.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_51 { background:url(../images/portfolio/laperla-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_51-1 { background:url(../images/portfolio/laperla-logo.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.port_52 { background:url(../images/portfolio/reha-bellikon-news.jpg) no-repeat; background-size:cover; background-position:center center;}
	.port_52-2 { background:url(../images/portfolio/reha-bellikon-kurse.jpg) no-repeat; background-size:cover; background-position:center center;}
	
	.vid_1 { background:url(../images/portfolio/video-001.jpg) no-repeat; background-size:cover; background-position:center center;}
	.vid_2 { background:url(../images/portfolio/video-003.jpg) no-repeat; background-size:cover; background-position:center center;}
	.vid_3 { background:url(../images/portfolio/video-002.jpg) no-repeat; background-size:cover; background-position:center center;}
	.vid_4 { background:url(../images/portfolio/video-showreel-web.jpg) no-repeat; background-size:cover; background-position:center center;}
	.vid_5 { background:url(../images/portfolio/video-showreel-ci.jpg) no-repeat; background-size:cover; background-position:center center;}
	.vid_6 { background:url(../images/portfolio/video-006.jpg) no-repeat; background-size:cover; background-position:center center;}
	.vid_7 { background:url(../images/portfolio/video-007.jpg) no-repeat; background-size:cover; background-position:center center;}
	.vid_8 { background:url(../images/portfolio/video-008.jpg) no-repeat; background-size:cover; background-position:center center;}
	.vid_9 { background:url(../images/portfolio/video-009.jpg) no-repeat; background-size:cover; background-position:center center;}



	/* portfolio allgemein */

	#Portfolio .portfolio { display:inline-block; float:left; margin:0px; height:250px; width:25%; position:relative;}
	#Portfolio .portfolio .sliding_box { z-index:1; opacity:0; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.7); transition: all 0.8s ease 0s; width:100%; height:100%; -moz-transition:800ms all; -ms-transition:800ms all; -o-transition:800ms all; -webkit-transition:800ms all; transition:800ms all;}
	
/*	transition-property: all;
	transition-duration: 0.4s;
	transition-timing-function: ease;
	transition-delay: 0s;*/

	#Portfolio .portfolio .sliding_box span { padding:0 0 0 10px; font-family: 'Source Sans Pro', sans-serif; font-weight:300; font-size:14px; color:#1c2028; opacity:0; position:absolute; border-left:1px solid #6a7282; left:0; top:0px; width:75%; text-align:left;}
	#Portfolio .portfolio .sliding_box span p { font-family: 'Source Sans Pro', sans-serif; font-weight:700;  text-transform:uppercase; font-size:16px; color:#1c2028; opacity:0;}
	
	#Portfolio .portfolio:hover > .sliding_box { opacity:1;}
	#Portfolio .portfolio:hover > .sliding_box span { opacity:1; left:6%;}
	#Portfolio .portfolio:hover > .sliding_box span p { opacity:1; left:6%;}
	
	@media screen and (max-width: 1100px) {#Portfolio .portfolio {width: 50%;} }
	@media screen and (max-width: 650px) {#Portfolio .portfolio {width: 100%;} }


/*	Portfolio DETAILseiten
	================================*/
	#port_detail_text {width: 23%; height: 250px; margin: 150px 2% 0 25%; z-index: 1; align-content:center; float: left;}
	#port_detail_logo {width: 50%; height:250px; margin: 150px 0 0 0; z-index: 1; align-content:center; float: left; }	
	.port_halb {width: 50%; height:500px; margin: 0 0 0 0; z-index: 1; align-content:center; float: left;}
	.port_ganz {width: 100%; height:500px; margin: 0 0 0 0; z-index: 1; align-content:center;float: left; }		
		
	@media screen and (max-width: 1100px) {
		#port_detail_text {margin: 150px 2% 0 10%; width: 38%;}
		}
		
	@media screen and (max-width: 650px) {
		#port_detail_logo {width: 100%; margin: 15px 0 0 0;}
		#port_detail_text {height:auto; width: 80%; margin: 85px 0 0 10%;}
		.port_halb {width: 100%; height:250px;}
		.port_ganz {height:250px;}		
	}
	

/*	Footer
	================================*/	
	#centerfuss {width: 50%; margin: 0px 25% 0px 25%; z-index: 1; float:left; text-align:left; background-color:#1c2028;}
	#centerfuss ul {list-style:none; color:#abadb1; margin: 0px; padding:0px; text-decoration:none; font-weight:300; line-height:23px; font-size:18px; font-family: 'Source Sans Pro', sans-serif; letter-spacing:1; display: inline-block;}
	#centerfuss ul a:hover {color:#fff; }
	#centerfuss ul a {color:#abadb1; }
	
	@media screen and (max-width: 1100px) {
			#centerfuss ul {line-height:20px; font-size:16px;}
			#centerfuss {width:80%; margin:0px 10% 0px 10%;}
			}
			
	@media screen and (max-width: 650px) {
			#fuss {display:none;}
			#centerfuss ul {line-height:20px; font-size:14px;}
			#centerfuss {width: 80%; margin: 0px 10% 0px 10%;}
			}
			
/*	End
	================================*/	
	#end {width: 100%; background-color: #1c2028; text-align: center; float: left; position:relative;}
	#endcenter {width: 50%; margin: 20px 25% 25px 25%; z-index: 1; text-align:left; color:#abadb1; padding:0px; text-decoration:none; font-weight:300; line-height:23px; font-size:12px; font-family: 'Source Sans Pro', sans-serif;}
	#endcenter a {color:#abadb1; }
	#endcenter a:hover {color:#fff; }
	
		@media screen and (max-width: 1100px) {
			#endcenter {width: 80%; margin: 20px 10% 25px 10%; }
			}
		@media screen and (max-width: 650px) {
			#endcenter  {width: 80%; margin: 10px 10% 10px 10%; font-size:12px; }
			}