.rightfade {
	background: url(../../portfolio/grafiken/fade.png) transparent right repeat-y;
	height:1000px;
	width:40px;
	position:absolute;
	top:0px;
	left:100%;
	z-index:2;
	display:none;
}
.style4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	background: #336666;
	text-align: center;
	width: 320px;
}
.spacer {
	height:40px;
}
.h2 {
	background:#76a49d url(../../portfolio/grafiken/spacer.gif) left no-repeat;
	padding:1px 0px 1px 10px;
	margin: 0 2px 1px -2px;
    padding: 1px 0 1px 10px;
}
.table {
	display:table;
}
.tr {
	display:table-row;
}
.td {
	display:table-cell;
}
.hidden {
	display:none;
}
.CENSORED {
    background: url(../../portfolio/grafiken/censored.gif) top left no-repeat #fff;
    height: 425px;
    position: absolute;
    width: 320px;
    z-index: 10;
	text-align: center;
	color: #fff;
	cursor: pointer;
}
.CENSORED div {
	font-size: 20px;
	margin: 159px 71px 0 71px;
}
.percont {
    -webkit-perspective: 50px; 
       -moz-perspective: 50px; 
        -ms-perspective: 50px; 
		 -o-perspective: 50px;
            perspective: 50px;
}
.portfolio-item {
	font-family: 'Economica',arial,sans-serif;
	position: relative;
    border: 2px solid #FFFFFF;
    -webkit-perspective: 500px; 
       -moz-perspective: 500px; 
        -ms-perspective: 500px; 
         -o-perspective: 500px;
            perspective: 500px;
	-webkit-transform-origin: center 10px;
	   -moz-transform-origin: center 10px;
	    -ms-transform-origin: center 10px;
		 -o-transform-origin: center 10px;
		    transform-origin: center 10px;
	overflow: hidden;
	text-align: bottom;
}
.pfi-content {
	min-width:270px;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
	height: 0px;
	-webkit-transition: .5s ease all;
	   -moz-transition: .5s ease all;
	     -o-transition: .5s ease all;
	        transition: .5s ease all;
}
.pfi-content.onStage {
	height: 425px;
}
.pfi-title {
	z-index: 1;
	background-color: #336666;
    color: #FFFFFF;
    text-align: center;
    width: 100%;
	font-size: 18px;
    font-weight: bold;
    height: 25px;
}
.pfi-participation {
	z-index: 1;
	font-size: 17px;
    padding: 2px;
	width: 100%;
	background-color: #fff;
}
.pfi-description {
	z-index: 1;
	font-size: 15px;
	line-height: 15px;
    height: 76px;
    padding: 2px;
	width: 100%;
}
.pfi-description,
.pfi-participation {
	opacity: 0;
	-webkit-transform: translateZ(-80px);
	   -moz-transform: translateZ(-80px);
	     -o-transform: translateZ(-80px);
	        transform: translateZ(-80px);
	-webkit-transition: .5s ease all;
	   -moz-transition: .5s ease all;
	     -o-transition: .5s ease all;
	        transition: .5s ease all;
}
.pfi-description.onStage,
.pfi-participation.onStage {
	opacity: 1;
	-webkit-transform: translateZ(0px);
	   -moz-transform: translateZ(0px);
	     -o-transform: translateZ(0px);
	        transform: translateZ(0px);
}
.pfi-imagelink {
	z-index: 5;
	-webkit-transition: .5s ease all;
	   -moz-transition: .5s ease all;
	     -o-transition: .5s ease all;
	        transition: .5s ease all;
	overflow:hidden;
	height: 0px;
}
.pfi-imagelink.onStage {
	height:204px;
}
.section {
	padding-bottom: 25px;
	background-color:#fff;
}
.AU,.AE,.AI,.AS,.PS,.CSS,.DW,.FLA,.HTML,.HTML5,.JAVA,.JQ,.MAYA,.MYSQL,.PHP,.PR,.SAI,.SWISH,.XML {
	width: 45px;
	height: 45px;
	-webkit-transition: .5s ease all;
	   -moz-transition: .5s ease all;
	     -o-transition: .5s ease all;
	        transition: .5s ease all;
	-webkit-transform: rotateX(-90deg);
	   -moz-transform: rotateX(-90deg);
	     -o-transform: rotateX(-90deg);
	        transform: rotateX(-90deg);
}
.AU.onStage,.AE.onStage,.AS.onStage,.AI.onStage,.PS.onStage,.CSS.onStage,.DW.onStage,.FLA.onStage,.HTML.onStage,.HTML5.onStage,.JAVA.onStage,.JQ.onStage,.MAYA.onStage,.MYSQL.onStage,.PHP.onStage,.PR.onStage,.SAI.onStage,.SWISH.onStage,.XML.onStage {
	-webkit-transform: rotateX(0deg);
	   -moz-transform: rotateX(0deg);
	     -o-transform: rotateX(0deg);
	        transform: rotateX(0deg);
}
.AU.onStage:hover,.AE.onStage:hover,.AI.onStage:hover,.AS.onStage:hover,.PS.onStage:hover,.CSS.onStage:hover,.DW.onStage:hover,.FLA.onStage:hover,.HTML.onStage:hover,.HTML5.onStage:hover,.JAVA.onStage:hover,.JQ.onStage:hover,.MAYA.onStage:hover,.MYSQL.onStage:hover,.PHP.onStage:hover,.PR.onStage:hover,.SAI.onStage:hover,.SWISH.onStage:hover,.XML.onStage:hover {
	-webkit-transform: rotateX(20deg);
	   -moz-transform: rotateX(20deg);
	     -o-transform: rotateX(20deg);
	        transform: rotateX(20deg);
}
.AE { background: url('../../portfolio/grafiken/icon_ae.png') scroll top left no-repeat;}
.AI { background: url('../../portfolio/grafiken/icon_ai.png') scroll top left no-repeat;} 
.AU { background: url('../../portfolio/grafiken/icon_au.png') scroll top left no-repeat;}
.AS { background: url('../../portfolio/grafiken/icon_as.png') scroll top left no-repeat;}
.PS { background: url('../../portfolio/grafiken/icon_ps.png') scroll top left no-repeat;}
.CSS { background: url('../../portfolio/grafiken/icon_css.png') scroll top left no-repeat;}
.DW { background: url('../../portfolio/grafiken/icon_dw.png') scroll top left no-repeat;}
.FLA { background: url('../../portfolio/grafiken/icon_fl.png') scroll top left no-repeat;}
.HTML { background: url('../../portfolio/grafiken/icon_html.png') scroll top left no-repeat;}
.HTML5 { background: url('../../portfolio/grafiken/icon_html5.png') scroll top left no-repeat;}
.JAVA { background: url('../../portfolio/grafiken/icon_java.png') scroll top left no-repeat;}
.JQ { background: url('../../portfolio/grafiken/icon_jquery.png') scroll top left no-repeat;}
.MAYA { background: url('../../portfolio/grafiken/icon_maya.png') scroll top left no-repeat;}
.MYSQL { background: url('../../portfolio/grafiken/icon_mysql.png') scroll top left no-repeat;}
.PHP { background: url('../../portfolio/grafiken/icon_php.png') scroll top left no-repeat;}
.PR { background: url('../../portfolio/grafiken/icon_pr.png') scroll top left no-repeat;}
.SAI { background: url('../../portfolio/grafiken/icon_sai.png') scroll top left no-repeat;}
.SWISH { background: url('../../portfolio/grafiken/icon_swish.png') scroll top left no-repeat;}
.XML { background: url('../../portfolio/grafiken/icon_xml.png') scroll top left no-repeat;}

#popup {
    margin: auto;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
	z-index: 200;
}
#tab {
    background: none repeat scroll 0 0 #76A49D;
    border-left: 3px solid rgba(255, 255, 255, 0.5);
    border-bottom: 3px solid rgba(255, 255, 255, 0.5);
    border-right: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 2px 5px #000A22;
    color: #FFFFFF;
    font-family: 'Economica',tahoma,sans-serif;
    font-size: 18px;
    height: 28px;
    margin: auto;
    padding-top: 3px;
	cursor: default;
    width: 630px;
	margin-top: -40px;
	-webkit-transition: .5s ease margin-top;
	   -moz-transition: .5s ease margin-top;
	     -o-transition: .5s ease margin-top;
	        transition: .5s ease margin-top;
}
#tab.visible {
	margin-top: 0px;
}
#tab a, #tab a:visited,#tab a:hover {
	color: #fff;
	font-weight: bold;
	font-family: inherit !important;
}
#tab a:hover {
	text-decoration: underline;
	background: none;
}
/*a:hover {background:#ffffff; text-decoration:none; font-family:Tahoma, Geneva, sans-serif} */
a.tooltip span {display:none; padding:2px 2px; margin-left:2px; font-size:9px;}
a.tooltip:hover span{background:#e2dc7b; display:inline; position:absolute; border:1px solid #555555; color:#555555;}

@media only screen and (max-width: 800px) {
	.pfi-description,
	.pfi-participation,
	#skillmeter	{
		opacity:1;
		-webkit-transform: translateZ(0px);
		   -moz-transform: translateZ(0px);
			 -o-transform: translateZ(0px);
				transform: translateZ(0px);
	}
	#skillmeter .barbox .bar,
	#skillmeter .barbox .bar.tense, 
	.pfi-content,
	.pfi-description,
	.pfi-participation,
	.pfi-imagelink,
	.AU,.AE,.AI,.AS,.PS,.CSS,.DW,.FLA,.HTML,.HTML5,.JAVA,.JQ,.MAYA,.MYSQL,.PHP,.PR,.SAI,.SWISH,.XML,
	#tab	{
		-webkit-transition:  none 0s ease 0s ;
		   -moz-transition:  none 0s ease 0s ;
			 -o-transition-duration: 0s;
			 -o-transition-property: none;
			 -o-transition-timing-function: linear;
				transition:  none 0s ease 0s ;
	}
	.pfi-content {
		height: auto;
	}
	.pfi-imagelink {
		height: auto;
	}
	.AU,.AE,.AI,.AS,.PS,.CSS,.DW,.FLA,.HTML,.HTML5,.JAVA,.JQ,.MAYA,.MYSQL,.PHP,.PR,.SAI,.SWISH,.XML {
		-webkit-transform: rotateX(0deg);
		   -moz-transform: rotateX(0deg);
			 -o-transform: rotateX(0deg);
				transform: rotateX(0deg);
	}
}