.clear{
	clear: both;
}

.em-rpc-clearfix{
	clear: both;
	overflow: hidden;
}

.spacer{
	clear: both;
	height: 40px;
}

.caps{
	text-transform: uppercase;
}

.left{
	float: left;
}

.right{
	float: right;
}

.hidden{
	visibility: hidden;
}

.trans{
	opacity: 0;
}

.break{
	width: 100%;
	height: 0;
	margin: 0;
}

.normalhtml {
	color: #fff;
	display: none;
   background-color: rgba(0, 0, 0, 0.5);
   height: 100%;
   left: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 100000;
}

.margin5 {
	margin: 5px;
   border: 1px solid #CCCCCC;
   display: none; /* inline-block;*/
   left: 150%;
   padding: 5px;
   position: fixed; /*relative;*/
   top: 0%;
   max-height: 95%;
   max-width: 95%;
   overflow: hidden;
   background-color: rgba(0, 0, 0, 0.5);
   color: #fff;
   z-index: 100001
}

/*
.htmlinhalt {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  height: 100%;
  width: 100%;
  display: none;
}
*/

.wf{
	-webkit-transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
}

.ns{
	-webkit-user-select: none;
	-moz-user-select: none;
  	user-select: none;
}

.just{
	text-align: justify;
}

.just::after{
	content: '';
	display: inline-block;
	width: 100%;
	height: 0;
}

.anim150{
	-webkit-transition: all 150ms ease-in-out;
	-moz-transition: all 150ms ease-in-out;
	-ms-transition: all 150ms ease-in-out;
	-o-transition: all 150ms ease-in-out;
	transition: all 150ms ease-in-out;
}

.anim250{
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease-in-out;
	-ms-transition: all 250ms ease-in-out;
	-o-transition: all 250ms ease-in-out;
	transition: all 250ms ease-in-out;
}


.portfolio{
	margin: 0 0 30px 0;
}

/* IMAGES */

.img_wrapper{
	position: relative;
	/* background: #f0ebe5; */
	overflow: hidden;
}

.img_wrapper img{
	/* position: absolute; */
	width: 100%;
	height: auto;
	opacity: 0;
	top: 0;
	
	-webkit-transition: opacity 150ms;
	-moz-transition: opacity 150ms;
	-ms-transition: opacity 150ms;
	transition: opacity 150ms;
}

.img_wrapper.loaded img{
	opacity: 1;
}



/* CONTROLS STYLES */

.pfcontrols{
/*
	height: 100px;
	line-height: 100px;
*/
}

.group{
	display: inline-block;
}

.switchbutton,
.drop_down{
	display: inline-block;
	width: auto;
	height: 31px;
	line-height: 30px;
	padding: 0 8px;
	background: #fcfcf9; /*#c3bdb8;*/
	vertical-align: middle;
	margin-right: 10px;
	color: #000; /*#f9f6f0;*/
	text-transform: uppercase;
	cursor: pointer;
	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.drop_down{
	width: auto;
	margin: 0 20px 0 0;
	/* background: none; */
	color: #c3bdb8;
	/* padding: 0; */
	position: relative;
	letter-spacing: 2px;
	z-index: 999;
}

.drop_down span{
	position: relative;
	padding-right: 20px;
}

.drop_down span::after,
.drop_down span::before{
	position: absolute;
	top: 5px;
	right: 3px;
	display: block;
	content: '';
	border: 6px solid transparent;
	border-top: 7px solid #c3bdb8;
}

.drop_down span::before{
	top: 3px;
	border-top-color: #fff; /*#f9f6f0;*/
	z-index: 10;
}

.drop_down:hover span::after{
	border-top-color: #333;
}

.drop_down ul{
	position: absolute;
	opacity: 0;
	max-height: 0;
	right: -3px;
	background: #fff;
	padding: 0;
	min-width: 120px;
	text-align: right;
	overflow: hidden;
	margin: 0;
	
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,.3);
	box-shadow: 0 0 10px rgba(0,0,0,.3);
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.drop_down:hover ul{
	opacity: 1;
	padding: 10px;
	max-height: inherit; /* 300px; */
}

.drop_down:hover span{
	color: #333;
}

.drop_down li{
	display: block;
	text-transform: none;
	color: #ccc; /*#808080;*/
	font-weight: 300;
	line-height: 1;
	letter-spacing: 0;
	margin-bottom: 10px;
	
	-webkit-transition: all 150ms;
	-moz-transition: all 150ms;
	-ms-transition: all 150ms;
	transition: all 150ms;
}

.drop_down li:after{
	content: '';
	position: relative;
	display: inline-block;
	width: 10px;
	height: 10px;
	top: 1px;
	margin-left: 6px;
	border: 1px solid #ccc;
	
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

.drop_down li:last-of-type{
	margin: 0;
}

.drop_down li:hover{
	color: #444; /*#59514c;*/
}

.drop_down li.active{
	color: #000; /*#e96d51;*/
	font-weight: 400;
}

.drop_down li.active:after{
	background: #000; /*#e96d51;*/
	border-color: #000; /*#e96d51;*/
}

.switchbutton.active{
	background: #ccc; /*#e96d51;*/
	color: #fff;
}

/*
.switchbutton i{
	position: relative;
	display: inline-block;
	background: #f9f6f0;
	width: 17px;
	height: 17px;
	margin-right: 8px;
	top: 3px;
}

.switchbutton i:before,
.switchbutton i:after{
	content: '';
	position: absolute;
	display: block;
	background: #c3bdb8;
}

.rpctogrid i:before,
.rpctogrid i:after{
	width: 100%;
	height: 3px;
	top: 7px;
}

.rpctogrid i:after{
	width: 3px;
	height: 100%;
	top: 0;
	left: 7px;
}

.rpctolist i:before,
.rpctolist i:after{
	width: 100%;
	height: 4px;
	top: 3px;
}

.rpctolist i:after{
	top: 10px;
}

.switchbutton.active i:before,
.switchbutton.active i:after{
	background: #e96d51;
}
*/

/* --- Button Icons --- */

@font-face {
	font-family: 'portfolio';
	src:url('portfolio.eot');
	src:url('portfolio.eot?#iefix') format('embedded-opentype'),
		url('portfolio.woff') format('woff'),
		url('portfolio') format('truetype'),
		url('portfolio.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

.portfolio-image, .portfolio-html, .portfolio-video, .portfolio-article, .portfolio-product, .portfolio-list, .portfolio-grid, .portfolio-shuffle, .portfolio-filter {
	font-family: 'portfolio';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.portfolio-image:before {
	content: "\e600";
}
.portfolio-html:before {
	content: "\e604";
}
.portfolio-video:before {
	content: "\e602";
}
.portfolio-article:before {
	content: "\e601";
}
.portfolio-product:before {
	content: "\e603";
}
.portfolio-list:before {
	content: "\e605";
}
.portfolio-grid:before {
	content: "\e606";
}
.portfolio-shuffle:before {
	content: "\e607";
}
.portfolio-filter:before {
	content: "\e608";
}

/* --- Button Icons End --- */

/* FAIL ELEMENT */

.portfolio{
	position: relative;
}

.fail_element{
	position: static;
	opacity: 0;
	top: 100px;
	text-align: center;
	width: 50%;
	left: 25%;
	line-height: 1.4;
	font-size: 30px;
	font-weight: 300;
	margin: 0 auto;
	height: 0px;
	display: none;
}

.fail .fail_element{
	opacity: 1;
	height: auto;
	display: block;
}

/* LIST VIEW STYLES */

.portfolio.list {
   background: rgba(252,252,249,0.6);
}

.portfolio.list .list_header{
	height: 38px;
	line-height: 38px;
	background: #fcfcf9; /* #f0ebe5; */
	text-align: right;
	color: #59514c;
	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.portfolio.list .meta{
	display: inline-block;
	/* width: 205px; */
	text-align: left; /* center; */
	/* line-height: 99px; */
	/* border-left: 1px solid #d7d7d7; */
	height: 100%;
	vertical-align: top;
	overflow: hidden;
}

.portfolio.list .list_header .meta{
	line-height: 38px;
	border: 0 none;
}

.portfolio.list .meta.name{
	float: left;
	/* text-align: left; */
	/* width: auto; */
	border-left: 0 none;
	margin-left: 1%;
}

.portfolio.list .list_header .meta.name{
	/* padding-left: 15px; */
}

.portfolio.list .list_header .meta span{
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 7px 0 0;
	cursor: pointer;
	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.portfolio.list .list_header .meta span:after{
	content: '';
	position: absolute;
	top: 9px;
	left: 7px;
	border: 5px solid transparent;
}

.portfolio.list .list_header .meta span.asc:after{
	border-top: 7px solid #c3bdb8;
}

.portfolio.list .list_header .meta span.desc:after{
	top: 4px;
	border-bottom: 7px solid #c3bdb8;
}

.portfolio.list .list_header .meta span:hover{
	background: #ccc; /*#c3bdb8;*/
}

.portfolio.list .list_header .meta span.asc:hover:after{
	border-top-color: #fff; /*#f0ebe5;*/
}

.portfolio.list .list_header .meta span.desc:hover:after{
	border-bottom-color: #fff; /*#f0ebe5;*/
}

.portfolio.list .list_header .meta span.active.asc:after{
	border-top-color: #000; /*#e96d51;*/
}

.portfolio.list .list_header .meta span.active.desc:after{
	border-bottom-color: #000; /*#e96d51;*/
}


.portfolio.list .mix{
	display: none;
	opacity: 0;
	padding: 18px 0 14px;
	border-top: 1px solid #d7d7d7;
	text-align: justify; /* right; */
	height: 99px;
	width: 100%;
	/* line-height: 99px; */
	/* background: rgba(252,252,249,0.6); /*#f9f6f0;*/ */
	vertical-align: top;
	font-weight: 300;
}

.portfolio.list .mix .meta *{
	line-height: 1;
}

.portfolio.list .mix .meta p,
.portfolio.list .mix .meta ul{
	display: inline-block;
	vertical-align: middle;
	list-style: none;
}

.portfolio.list .mix .meta li{
	margin-bottom: 5px;
}

.portfolio.list .img_wrapper{
	display: inline-block;
	width: 100%; /*177px;*/
	height: 100%; /*95px;*/
	vertical-align: top;
	margin: 0;
}

.portfolio.list .titles{
	display: inline-block;
	vertical-align: middle;
}

.portfolio.list .titles h2{
	font-weight: 700;
	font-size: 17px;
	text-transform: uppercase;
	color: #47a497;
	letter-spacing: 2px;
	margin-bottom: 3px;
	line-height: 1.2 !important;
}

.portfolio.list .titles p{
	text-indent: -2px;
}

.portfolio.list .mix .meta .mask p {
    display: block;
    margin: 6% 0;
}

/* GRID VIEW STYLES */

.portfolio.grid{
	text-align: justify;
}

.portfolio.grid .list_header,
.portfolio.grid .meta{
	display: none;
}

.portfolio.grid .meta.name{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	display: block;
}

.portfolio.grid .mix{
	display: none;
	opacity: 0;
	position: relative;
	/* width: 48.5%; */
	/* padding-top: 26%; */
	margin-bottom: 3%;
}

.portfolio.grid .mix .meta .mask p {
    display: block;
    margin: 2% 0;
}

.portfolio.grid .img_wrapper{
	position: absolute;
	width: 100%;
	height: 100%;
	background: #000;
}

.portfolio.grid .titles{
	position: relative;
	width: 90%;
	max-width: 400px;
	height: auto;
	margin-top: 75%;
	margin: 53.5% auto 0;
	top: -80px;
	z-index: 1;
	padding: 10px 0;
	background: #fff;
	background: rgba(255,255,255,.8);
	text-align: center;
}

.portfolio.grid .titles h2{
	font-weight: 700;
	font-size: 17px;
	text-transform: uppercase;
	color: #47a497;
	letter-spacing: 2px;
	margin-bottom: 3px;
}

.portfolio.grid .titles p{
	font-weight: 300;
	text-indent: -2px;
}

.portfolio.list .list_header .meta div.filtername { display: inline-block; height: auto; position: relative; top: -8px; }

@media (max-width: 979px) {
/* .portfolio.list .list_header .meta div.filtername { display: none; } */
}

@media (max-width: 479px) {
.portfolio.list .meta { display: none; }
}








/* animations/hover - effekte der elemente */

/* generelle effekt-definitionen */
.view.loaded { opacity: 1; }

.view {
   width: 100%;
   height: 100%;
   /* margin: 10px; */
   float: left;
   /* border: 10px solid #fff; */
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   /* background: #fff url(../images/bgimg.jpg) no-repeat center center; */
}
.view .mask,.view .content {
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   /* display: block; */
   /* position: relative; */
   border: 0 none;
   height: auto;
   max-width: 100%;
   vertical-align: middle;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 2%;
   background: rgba(0, 0, 0, 0.8);
   margin: 2% 0 0 0;
}
.view p {
   /* font-family: Georgia, serif; */
   font-style: italic;
   font-size: 10px;
   position: relative;
   /* color: #fff; */
   /* padding: 10px 20px 20px; */
   text-align: center;
}
.view a.info {
   display: inline-block;
   padding: 7px 14px;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info:hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.rpc-shadow { box-shadow: 0 0 10px 0 #ccc inset; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.portfolio.list .mix .meta .mask span.rpc-description { display: none; }
.mix .meta .mask span.rpc-description, .mix .meta .mask span.rpc-tags { display: block; }


/* --- Color definitions for overlay --- */
.view .mask { background-color: rgba(0,0,0,0.4); }
.view h2 { background: rgba(255, 255, 255, 0.5); color: #000; }
.view p { color: #333; }
.view a.info { background: #000; color: #fff; text-transform: uppercase; text-decoration: none; }
/* --- Color definitions for overlay end --- */

.view.view-1, .view.view-2, .view.view-3, .view.view-4, .view.view-5, .view.view-6, .view.view-7, .view.view-8, .view.view-9, .view.view-10, .view.view-11, .view.view-12, .view.view-13 { width: inherit; }

/* generelle effekt-definitionen ende  */

/* Spezielle Definitionen-Animationen */

/* Effect 1 : background-zoom, foreground from above and below */
.view-1 .content {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-1 .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-1 h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-1 .mask p {
	color: #fff;
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-1:hover .content {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-1 a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-1:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-1:hover h2,
.view-1:hover p,
.view-1:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-1:hover .mask p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-1:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
/* Effect 1 end */


/* Effect 2 : foreground appears on the bottom right */
.view-2 .content {
   -webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;
}
.view-2 .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: opacity: 0;
   -moz-transform: opacity: 0;
   -o-transform: opacity: 0;
   -ms-transform: opacity: 0;
   transform: opacity: 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.view-2 h2 {
	opacity: 0;
   -webkit-transform: opacity: 0;
   -moz-transform: opacity: 0;
   -o-transform: opacity: 0;
   -ms-transform: opacity: 0;
   transform: opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-2 .mask p {
	color: #fff;
	opacity: 0;
   -webkit-transform: opacity: 0;
   -moz-transform: opacity: 0;
   -o-transform: opacity: 0;
   -ms-transform: opacity: 0;
   transform: opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-2 a.info {
	opacity: 0;
   -webkit-transform: opacity: 0;
   -moz-transform: opacity: 0;
   -o-transform: opacity: 0;
   -ms-transform: opacity: 0;
   transform: opacity: 0;
   -webkit-transition: all 0.2s 0.1s ease-in-out;
   -moz-transition: all 0.2s 0.1s ease-in-out;
   -o-transition: all 0.2s 0.1s ease-in-out;
   -ms-transition: all 0.2s 0.1s ease-in-out;
   transition: all 0.2s 0.1s ease-in-out;
}
.view-2:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: opacity: 1;
   -moz-transform: opacity: 1;
   -o-transform: opacity: 1;
   -ms-transform: opacity: 1;
   transform: opacity: 1;
}
.view-2:hover h2 {
	opacity: 1;
   -webkit-transform: opacity: 1;
   -moz-transform: opacity: 1;
   -o-transform: opacity: 1;
   -ms-transform: opacity: 1;
   transform: opacity: 1;
   -webkit-transition-delay: 0.3s;
   -moz-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -ms-transition-delay: 0.3s;
   transition-delay: 0.3s;
}
.view-2:hover .mask p {
	opacity: 1;
   -webkit-transform: opacity: 1;
   -moz-transform: opacity: 1;
   -o-transform: opacity: 1;
   -ms-transform: opacity: 1;
   transform: opacity: 1;
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view-2:hover a.info {
	opacity: 1;
   -webkit-transform: opacity: 1;
   -moz-transform: opacity: 1;
   -o-transform: opacity: 1;
   -ms-transform: opacity: 1;
   transform: opacity: 1;
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}
/* Effect 2 end  */


/* Effect 3 : foreground tilt on the bottom right corner */
.view-3 .content {
   -webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
   -ms-transition: all 0.2s ease-in;
   transition: all 0.2s ease-in;
}
.view-3 .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: translate(100%, 0px) rotate(180deg);
   -moz-transform: translate(100%, 0px) rotate(180deg);
   -o-transform: translate(100%, 0px) rotate(180deg);
   -ms-transform: translate(100%, 0px) rotate(180deg);
   transform: translate(100%, 0ps) rotate(180deg);
   -webkit-transition: all 0.2s 0.4s ease-in-out;
   -moz-transition: all 0.2s 0.4s ease-in-out;
   -o-transition: all 0.2s 0.4s ease-in-out;
   -ms-transition: all 0.2s 0.4s ease-in-out;
   transition: all 0.2s 0.4s ease-in-out;
}
.view-3 h2 {
   -webkit-transform: translateY(-1000%);
   -moz-transform: translateY(-1000%);
   -o-transform: translateY(-1000%);
   -ms-transform: translateY(-1000%);
   transform: translateY(-1000%);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-3 .mask p {
	color: #fff;
   -webkit-transform: translateX(100%) rotate(90deg);
   -moz-transform: translateX(100%) rotate(90deg);
   -o-transform: translateX(100%) rotate(90deg);
   -ms-transform: translateX(100%) rotate(90deg);
   transform: translateX(100%) rotate(90deg);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-3 a.info {
   -webkit-transform: translateY(-500%);
   -moz-transform: translateY(-500%);
   -o-transform: translateY(-500%);
   -ms-transform: translateY(-500%);
   transform: translateY(-500%);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-3:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-transform: translate(0px, 0px);
   -moz-transform: translate(0px, 0px);
   -o-transform: translate(0px, 0px);
   -ms-transform: translate(0px, 0px);
   transform: translate(0px, 0px);
}
.view-3:hover h2 {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}
.view-3:hover .mask p {
   -webkit-transform: translateX(0px) rotate(0deg);
   -moz-transform: translateX(0px) rotate(0deg);
   -o-transform: translateX(0px) rotate(0deg);
   -ms-transform: translateX(0px) rotate(0deg);
   transform: translateX(0px) rotate(0deg);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view-3:hover a.info {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.3s;
   -moz-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -ms-transition-delay: 0.3s;
   transition-delay: 0.3s;
}
/* Effect 3 end */


/* Effect 4 : background gets smaller, foreground rotates out */
.view-4 .content {
   -webkit-transition: all 0.4s ease-in-out 0.2s;
   -moz-transition: all 0.4s ease-in-out 0.2s;
   -o-transition: all 0.4s ease-in-out 0.2s;
   -ms-transition: all 0.4s ease-in-out 0.2s;
   transition: all 0.4s ease-in-out 0.2s;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-4 .mask {
   /* background-color: rgba(0,0,0,0.8); */
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0) rotate(-180deg);
   -moz-transform: scale(0) rotate(-180deg);
   -o-transform: scale(0) rotate(-180deg);
   -ms-transform: scale(0) rotate(-180deg);
   transform: scale(0) rotate(-180deg);
   -webkit-transition: all 0.4s ease-in;
   -moz-transition: all 0.4s ease-in;
   -o-transition: all 0.4s ease-in;
   -ms-transition: all 0.4s ease-in;
   transition: all 0.4s ease-in;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
}
.view-4 h2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.view-4 .mask p {
	color: #fff;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 1;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.view-4 a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.view-4:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1) rotate(0deg);
   -moz-transform: scale(1) rotate(0deg);
   -o-transform: scale(1) rotate(0deg);
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.view-4:hover .content {
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.view-4:hover h2,
.view-4:hover .mask p,
.view-4:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}

/* Effect 4 end */


/* Effect 5 : from top to bottom */
.view-5 .content {
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-5 .mask {
   -webkit-transform: translateY(-100%);
   -moz-transform: translateY(-100%);
   -o-transform: translateY(-100%);
   -ms-transform: translateY(-100%);
   transform: translateY(-100%);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-5 h2 {
   -webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-5 .mask p {
	color: #fff;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-5:hover .mask {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-5:hover .content {
   -webkit-transform: translateY(100%);
   -moz-transform: translateY(100%);
   -o-transform: translateY(100%);
   -ms-transform: translateY(100%);
   transform: translateY(100%);
}
.view-5:hover .mask p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
/* Effect 5 end */


/* Effect 6 : from right to left */
.view-6 .content {
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-6 .mask {
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   -o-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-6 h2 {
   -webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-6 .mask p {
	color: #fff;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-6:hover .mask {
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);
}
.view-6:hover .content {
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
   -o-transform: translateX(-100%);
   -ms-transform: translateX(-100%);
   transform: translateX(-100%);
}
.view-6:hover .mask p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
/* Effect 6 end */


/* Effect 7 : bottom-up */
.view-7 .content {
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-7 .mask {
   -webkit-transform: translateY(100%);
   -moz-transform: translateY(100%);
   -o-transform: translateY(100%);
   -ms-transform: translateY(100%);
   transform: translateY(100%);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-7 h2 {
   -webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-7 .mask p {
	color: #fff;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-7:hover .mask {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-7:hover .content {
   -webkit-transform: translateY(-100%);
   -moz-transform: translateY(-100%);
   -o-transform: translateY(-100%);
   -ms-transform: translateY(-100%);
   transform: translateY(-100%);
}
.view-7:hover .mask p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
/* Effect 7 end */


/* Effect 8 : from left to right */
.view-8 .content {
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-8 .mask {
   
   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
   -o-transform: translateX(-100%);
   -ms-transform: translateX(-100%);
   transform: translateX(-100%);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.view-8 h2 {

   -webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
   box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.view-8 .mask p {
	color: #fff;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-8:hover .mask {
   -webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);
}
.view-8:hover .content {
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   -o-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
}
.view-8:hover .mask p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
/* Effect 8 end */


/* Effect 9 : foreground zooms in */
.view-9 .content {
   -webkit-transition: all 0.4s ease-in-out 0.5s;
   -moz-transition: all 0.4s ease-in-out 0.5s;
   -o-transition: all 0.4s ease-in-out 0.5s;
   -ms-transition: all 0.4s ease-in-out 0.5s;
   transition: all 0.4s ease-in-out 0.5s;
}
.view-9 .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-in 0.4s;
   -moz-transition: all 0.3s ease-in 0.4s;
   -o-transition: all 0.3s ease-in 0.4s;
   -ms-transition: all 0.3s ease-in 0.4s;
   transition: all 0.3s ease-in 0.4s;
}
.view-9 h2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -webkit-transition: all 0.3s ease-in-out 0.1s;
   -moz-transition: all 0.3s ease-in-out 0.1s;
   -o-transition: all 0.3s ease-in-out 0.1s;
   -ms-transition: all 0.3s ease-in-out 0.1s;
   transition: all 0.3s ease-in-out 0.1s;
}
.view-9 .mask p {
	color: #fff;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -webkit-transition: all 0.3s ease-in-out 0.2s;
   -moz-transition: all 0.3s ease-in-out 0.2s;
   -o-transition: all 0.3s ease-in-out 0.2s;
   -ms-transition: all 0.3s ease-in-out 0.2s;
   transition: all 0.3s ease-in-out 0.2s;
}
.view-9 a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -webkit-transition: all 0.3s ease-in-out 0.1s;
   -moz-transition: all 0.3s ease-in-out 0.1s;
   -o-transition: all 0.3s ease-in-out 0.1s;
   -ms-transition: all 0.3s ease-in-out 0.1s;
   transition: all 0.3s ease-in-out 0.1s;
}
.view-9:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.view-9:hover .content {
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.view-9:hover h2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-9:hover .mask p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.view-9:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.3s;
   -moz-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -ms-transition-delay: 0.3s;
   transition-delay: 0.3s;
}
/* Effect 9 end */


/* Effect 10 : background disappears in a swirl, foreground from above */
.view-10 .content {
   -webkit-transition: all 0.5s ease-out;
   -moz-transition: all 0.5s ease-out;
   -o-transition: all 0.5s ease-out;
   -ms-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-10 .mask {
   -webkit-transform: rotate(0deg) scale(1);
   -moz-transform: rotate(0deg) scale(1);
   -o-transform: rotate(0deg) scale(1);
   -ms-transform: rotate(0deg) scale(1);
   transform: rotate(0deg) scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   -ms-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}
.view-10 h2 {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-10 .mask p {
	color: #fff;
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-10 a.info {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-10:hover .content {
   -webkit-transform: rotate(720deg) scale(0);
   -moz-transform: rotate(720deg) scale(0);
   -o-transform: rotate(720deg) scale(0);
   -ms-transform: rotate(720deg) scale(0);
   transform: rotate(720deg) scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-10:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px) rotate(0deg);
   -moz-transform: translateY(0px) rotate(0deg);
   -o-transform: translateY(0px) rotate(0deg);
   -ms-transform: translateY(0px) rotate(0deg);
   transform: translateY(0px) rotate(0deg);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view-10:hover h2 {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.7s;
   -moz-transition-delay: 0.7s;
   -o-transition-delay: 0.7s;
   -ms-transition-delay: 0.7s;
   transition-delay: 0.7s;
}
.view-10:hover .mask p {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.6s;
   -moz-transition-delay: 0.6s;
   -o-transition-delay: 0.6s;
   -ms-transition-delay: 0.6s;
   transition-delay: 0.6s;
}
.view-10:hover a.info {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}
/* Effect 10 end */


/* Effect 11 : foreground pushes down and jumps 2 times */
.view-11 .mask {
   top: -200px;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-out 0.5s;
   -moz-transition: all 0.3s ease-out 0.5s;
   -o-transition: all 0.3s ease-out 0.5s;
   -ms-transition: all 0.3s ease-out 0.5s;
   transition: all 0.3s ease-out 0.5s;
}
.view-11 h2 {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.1s;
   -moz-transition: all 0.2s ease-in-out 0.1s;
   -o-transition: all 0.2s ease-in-out 0.1s;
   -ms-transition: all 0.2s ease-in-out 0.1s;
   transition: all 0.2s ease-in-out 0.1s;
}
.view-11 .mask p {
   color: #fff;
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.2s;
   -moz-transition: all 0.2s ease-in-out 0.2s;
   -o-transition: all 0.2s ease-in-out 0.2s;
   -ms-transition: all 0.2s ease-in-out 0.2s;
   transition: all 0.2s ease-in-out 0.2s;
}
.view-11 a.info {
   -webkit-transform: translateY(-200px);
   -moz-transform: translateY(-200px);
   -o-transform: translateY(-200px);
   -ms-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out 0.3s;
   -moz-transition: all 0.2s ease-in-out 0.3s;
   -o-transition: all 0.2s ease-in-out 0.3s;
   -ms-transition: all 0.2s ease-in-out 0.3s;
   transition: all 0.2s ease-in-out 0.3s;
}
.view-11:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   top: 0px;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
   -webkit-animation: bounceY 0.9s linear;
   -moz-animation: bounceY 0.9s linear;
   -ms-animation: bounceY 0.9s linear;
   animation: bounceY 0.9s linear;
}
.view-11:hover h2 {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.4s;
   -moz-transition-delay: 0.4s;
   -o-transition-delay: 0.4s;
   -ms-transition-delay: 0.4s;
   transition-delay: 0.4s;
}
.view-11:hover .mask p {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.view-11:hover a.info {
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
@keyframes bounceY {
    0% { transform: translateY(-205px);}
    40% { transform: translateY(-100px);}
    65% { transform: translateY(-52px);}
    82% { transform: translateY(-25px);}
    92% { transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
    0% { -moz-transform: translateY(-205px);}
    40% { -moz-transform: translateY(-100px);}
    65% { -moz-transform: translateY(-52px);}
    82% { -moz-transform: translateY(-25px);}
    92% { -moz-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
    0% { -webkit-transform: translateY(-205px);}
    40% { -webkit-transform: translateY(-100px);}
    65% { -webkit-transform: translateY(-52px);}
    82% { -webkit-transform: translateY(-25px);}
    92% { -webkit-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}
/* Effect 11 end */


/* Effect 12 : foreground unfolds in a twisting movement  */
.view-12 .mask {
    height: 0;
    overflow: hidden;
    -webkit-transform: rotate(46.5deg) translate(-100%/*-112px*/, -100%/*166px*/);
    -moz-transform: rotate(46.5deg) translate(-100%, -100%);
    -o-transform: rotate(46.5deg) translate(-100%, -100%);
    -ms-transform: rotate(46.5deg) translate(-100%, -100%);
    transform: rotate(46.5deg) translate(-100%, -100%);
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transition: all 0.4s ease-in-out 0.3s;
    -moz-transition: all 0.4s ease-in-out 0.3s;
    -o-transition: all 0.4s ease-in-out 0.3s;
    transition: all 0.4s ease-in-out 0.3s;
}
.view-12 h2 {
}
.view-12 .mask p {
	 color: #fff;
}
.view-12 a.info {
}
.view-12:hover .mask {
    height: 100%;
    width: 100%;
    -webkit-transform: rotate(0deg) translate(0, 0);
    -moz-transform: rotate(0deg) translate(0, 0);
    -o-transform: rotate(0deg) translate(0, 0);
    -ms-transform: rotate(0deg) translate(0, 0);
    transform: rotate(0deg) translate(0, 0);
}
/* Effect 12 end */


/* Effect 13 : background zooms out fast, foreground zooms in slow  */
.view-13 .content {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.view-13 .mask {
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-13 h2 {
   /*border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;*/
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-13 .mask p {
	color: #fff;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-13 a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.view-13:hover .content {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-13:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-13:hover h2,.view-13:hover .mask p,.view-13:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
				
/* Effect 13 end */

/* animations/hover - effekte der elemente ende */





/* yoxview */

/* 
# YoxView v2.0 CSS file - modified by eXtro-media
# by eXtro-media.de
*/
#yoxview .yoxview_bottom{ bottom: 0; }
#yoxview .yoxview_right{ float: right; }
#yoxview .yoxview_left{ float: left; }

#yoxview_popupWrap
{
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 1000;
}
#yoxview
{
	position: absolute;
	font-family: Arial, Sans-Serif;
	z-index: 999;
	border: solid 1px #999;
	overflow: hidden;
	font-size: 10pt;
	text-align: left;
	/* extro-media */
	border-radius: 0px;
	box-shadow: 1px 1px 2px #444;
}
#yoxview a img, #yoxview_infoPanel a img{ border: none; }
#yoxview a:focus, #yoxview a:hover { outline: none; background: transparent; }
#yoxview div.yoxview_imgPanel{ position: absolute; top: 0; left: 0; }
#yoxview div.yoxview_mediaPanel
{ 
	position: absolute; 
	background: #191919; 
	width: 100%; 
	height: 100% 
}
#yoxview .yoxview_ctlBtn
{
	position: absolute; 
	z-index: 3;
	display: block;
	text-decoration: none;
	outline: none;
	width: 50%;
	height: 100%;
}
#yoxview .yoxview_ctlBtn img
{
	position: absolute;
	border: none;
	top: 50%;
	margin-top: -22px;
}
#yoxview a.yoxview_ctlBtn:focus, #yoxview a.yoxview_ctlBtn:active{ outline: none; outline: none;}
#yoxview .yoxview_notification
{
	width: 59px; 
	height: 59px; 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	margin-top: -30px;
	margin-left: -30px;
	z-index: 4;
	opacity: 0.6;
	filter: alpha(opacity=60);
	background-image: url(../js/images/sprites.png);
	background-repeat: no-repeat;
	display: none;
}
#yoxview #yoxview_ajaxLoader img
{
	padding: 13px;
}
#yoxview .yoxview_popupBarPanel
{
	position: absolute;
	z-index: 4;
	min-height: 70px;
	width: 100%;
	right: 0;
}
#yoxview #yoxview_menuPanel
{ 
	width: 145px; 
	height: 42px; 
	padding-top: 0px;
	padding-right: 9px;
	position: absolute; 
	right: 0;
	background: url(../js/images/sprites.png) no-repeat left -77px;
	background: rgba(0, 0, 0, 0.8);
	-moz-border-radius: 0 4px 0 15px;
	-webkit-border-radius: 0 4px 0 15px;
	border-radius: 0 4px 0 15px;
	top: -42px;
}
#yoxview #yoxview_menuPanel a
{ 
	display: block; 
	width: 45px; 
	float: right; 
	text-align: center; 
	font-size: 0.8em; 
	position: relative;
	margin-top: -5px;
	padding-bottom: 13px;
	text-decoration: none;
	font-family: Arial, Sans-Serif;
}
#yoxview #yoxview_menuPanel a span{ color: White; display: block; margin-bottom: 3px;  }
#yoxview #yoxview_menuPanel a.last{ margin-left: 0; }
#yoxview #yoxview_menuPanel a:focus{ outline: none; background: transparent; }
#yoxview #yoxview_menuPanel a:hover { outline: none; background: transparent; }
#yoxview_infoPanel
{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 0;
	color: White;
	z-index: 2;
	overflow: hidden;
	border-radius: 0 0 4px 4px;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
}
#yoxview_infoPanel #yoxview_infoPanelBack
{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	left: 0;
	top: 0;
}
#yoxview_infoPanel #yoxview_infoPanelContent
{
	position: absolute;
	width: 100%;
	z-index: 2;
	top: 0;
	left: 0;
}
#yoxview_infoPanel span#yoxview_count
{
	display: block;
	width: 55px;
	font-size: 0.8em;
	float: left;
	text-align: center;
	padding-top: 8px;
	color: #bbb;
}
#yoxview_infoPanel #yoxview_infoText
{
	margin: 0 55px;
	font-size: 12pt;
	padding: 5px 0;
}
#yoxview_infoPanel #yoxview_infoText #yoxview_infoTextDescription
{
	margin-top: 1em;
	font-size: 10pt;
	padding-bottom: 0.5em;
	max-height: 200px;
	overflow: auto;
	padding-right: 10px;
}
#yoxview_infoPanel #yoxview_infoText a, #yoxview .yoxview_error a{ color: #a7d557; text-decoration: none; outline: none; }
#yoxview_infoPanel #yoxview_infoText a:hover, #yoxview .yoxview_error a:hover{ color: #d5eeaa }
#yoxview_infoPanel a.yoxviewInfoLink
{
	display: none;
	opacity: 0.8;
	float: right;
	margin-right: 5px;
	margin-top: 5px;
}
#yoxview_infoPanel a.yoxviewInfoLink:hover{ opacity: 1; background: transparent; }
#yoxview #yoxview_helpPanel
{
	display: none;
	width: 201px;
	height: 312px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -171px;
	margin-left: -111px;
	z-index: 5;
	color: White;
	padding: 20px;
	padding-top: 10px;
	cursor: pointer;
}
#yoxview #yoxview_helpPanel h1{ font-family: Arial Black, Arial, Sans-Serif; font-size: 1em; }
#yoxview #yoxview_helpPanel p{ margin-top: 80px; }
#yoxview #yoxview_helpPanel span#yoxview_closeHelp{ display: block; position: absolute; bottom: 20px; left: 0; text-align: center; width: 100%; }
#yoxview .yoxview_error
{
	display: block;
	text-align: center;
	color: White;
	font-family: Arial, Sans-Serif;
	font-size: 14pt;
	top: 41%;
	width: 100%;
	height: 20%;
	position: absolute;
	padding: 10px;
}
#yoxview .yoxview_error .errorUrl{ font-size: 10pt; }
#yoxview .yoxview_top{ top: 0; width: 50%; }
#yoxview .yoxview_element{ width: 100%; height: 100%; position: absolute;  border: none; background: #333; }

.yoxview-thumbnails a
{
	float: left;
	margin: 4px;
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.yoxview-thumbnails a:hover
{
	opacity: 1;
	filter: alpha(opacity=100);
}
.yoxview-thumbnails a img
{ 
	border: solid 1px #ffffff;
}
.yoxview-thumbnails-details{ margin-bottom: 1em; }
.yoxview-thumbnails-details h2{ margin-bottom: 0; padding: 0; font-size: 1.2em; font-weight: bold;}


/* yoxview ende */