/* ========== Necessary styles ========== */

.view {
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	box-shadow: 1px 1px 2px #e6e6e6;
	cursor: default;
}

.view_noshadow {
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
	margin-bottom:10px;
}


.view .mask, .view .content {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
}

.view_noshadow .mask, .view .content {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
}

.view img {
	display: block;
	position: relative;
}

.view_noshadow img {
	display: block;
	position: relative;
}

.view h2 {
	font-family: "돋움",'dotum',Arial;
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 16px;
	line-height:16px;
	font-weight: bold;
	padding-top: 50px;
	margin: 20px 0 15px 0;
}

.view_noshadow h2 {
	font-family: "돋움",'dotum',Arial;
	color: #FFF;
	text-align: center;
	position: relative;
	font-size: 16px;
	line-height:16px;
	font-weight: bold;
	padding-top: 10px;
	margin: 30px 0 15px 0;
}

.view.block-four h2 { padding-top: 25px; }
.view.block-two h2 { padding-top: 40px; }
.view .block-five h2 { padding-top:20px; }

.view p {
	font-family: "돋움",'dotum';
	font-size: 11px;
	line-height: 14px;
	text-transform: uppercase;
	position: relative;
	color: #FFF;
	text-align: center;
	margin: 0 0 15px 0;
}

.view_noshadow p {
	font-family: "돋움",'dotum';
	font-size: 11px;
	line-height: 14px;
	text-transform: uppercase;
	position: relative;
	color: #FFF;
	text-align: center;
	margin: 0 0 15px 0;
}

.view a.info, .view a.zoom {	
	width: 24px;
	height: 24px;
	display: inline-block;
	border: none;
}

.view_noshadow a.info, .view a.zoom {	
	width: 24px;
	height: 24px;
	display: inline-block;
	border: none;
}

.view a.info { background: url('../images/link.png') no-repeat; }
.view a.zoom { background: url('../images/zoom.png') no-repeat; }

.view_noshadow a.info { background: url('../images/link.png') no-repeat; }
.view_noshadow a.zoom { background: url('../images/zoom.png') no-repeat; }

/* ========== Demo #1 styles ========== */
.view-first .mask {
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
    background-color: rgba(29, 165, 255, 0.95); 
    -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-first h2 {
	-webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	-o-transform: translateY(-100px);
	-ms-transform: translateY(-100px);
    transform: translateY(-100px);
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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-first p {
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	-o-transform: translateY(100px);
	-ms-transform: translateY(100px);
    transform: translateY(100px);
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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-first a.info, .view-first a.zoom {
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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-first:hover .mask { 
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info, .view-first:hover a.zoom {
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
    transform: translateY(0px);
}
.view-first:hover 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-first:hover a.info, .view-first:hover a.zoom {
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	-ms-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

/* ========== Demo #2 styles ========== */

.view-second img {  
    -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-second .mask { 
    background-color: rgba(29, 165, 255, 0.95);
    width: 350px;
    padding: 60px;
    height: 350px;
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
    -webkit-transform: translate(265px, 145px) rotate(45deg);
	-moz-transform: translate(265px, 145px) rotate(45deg);
	-o-transform: translate(265px, 145px) rotate(45deg);
	-ms-transform: translate(265px, 145px) rotate(45deg);
	transform: translate(265px, 145px) rotate(45deg);
    -webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.view-second h2 {
    background: transparent;
    margin: 0 40px 0px 40px;
	-webkit-transform: translate(200px, -200px);
	-moz-transform: translate(200px, -200px);
	-o-transform: translate(200px, -200px);
	-ms-transform: translate(200px, -200px);
    transform: translate(200px, -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-second p { 
	-webkit-transform: translate(-200px, 200px);
	-moz-transform: translate(-200px, 200px);
	-o-transform: translate(-200px, 200px);
	-ms-transform: translate(-200px, 200px);
	transform: translate(-200px, 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-second a.info, .view-second a.zoom  { 
    -webkit-transform: translate(0px, 100px);
	-moz-transform: translate(0px, 100px);
	-o-transform: translate(0px, 100px);
	-ms-transform: translate(0px, 100px);
	transform: translate(0px, 100px);
    -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-second:hover .mask { 
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100); 
    -webkit-transform: translate(-80px, -125px) rotate(45deg);
	-moz-transform: translate(-80px, -125px) rotate(45deg);
	-o-transform: translate(-80px, -125px) rotate(45deg);
	-ms-transform: translate(-80px, -125px) rotate(45deg);
	transform: translate(-80px, -125px) rotate(45deg);
}                             
.view-second:hover h2 { 
    -webkit-transform: translate(0px,0px);
	-moz-transform: translate(0px,0px);
	-o-transform: translate(0px,0px);
	-ms-transform: translate(0px,0px);
	transform: translate(0px,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; 
}
.view-second:hover p { 
    -webkit-transform: translate(0px,0px);
	-moz-transform: translate(0px,0px); 
	-o-transform: translate(0px,0px); 
	-ms-transform: translate(0px,0px); 
	transform: translate(0px,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-second:hover a.info, .view-second:hover a.zoom { 
    -webkit-transform: translate(0px,0px);
	-moz-transform: translate(0px,0px); 
	-o-transform: translate(0px,0px); 
	-ms-transform: translate(0px,0px); 
	transform: translate(0px,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;
}

/* ========== Demo #3 styles ========== */

.view-third img {   
    -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-third .mask { 
    background-color: rgba(29, 165, 255, 0.95);
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
    -webkit-transform: translate(460px, -100px) rotate(180deg);
	-moz-transform: translate(460px, -100px) rotate(180deg);
	-o-transform: translate(460px, -100px) rotate(180deg);
	-ms-transform: translate(460px, -100px) rotate(180deg);
	transform: translate(460px, -100px) 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-third h2{
    -webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	-o-transform: translateY(-100px);
	-ms-transform: translateY(-100px);
	transform: translateY(-100px);
    -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-third p { 
    -webkit-transform: translateX(300px) rotate(90deg);
	-moz-transform: translateX(300px) rotate(90deg);
	-o-transform: translateX(300px) rotate(90deg);
	-ms-transform: translateX(300px) rotate(90deg);
	transform: translateX(300px) 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-third a.info, .view-third a.zoom { 
    -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-third:hover .mask { 
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100); 
    -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-third: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-third:hover 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-third:hover a.info, .view-third:hover a.zoom { 
    -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;
}

/* ========== Demo #4 styles ========== */

.view-fourth img { 
    -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;
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
}
.view-fourth .mask { 
    background-color: rgba(29, 165, 255, 0.95);
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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;
	-o-border-radius: 0px;
	-ms-border-radius: 0px;
	border-radius: 0px;
}
.view-fourth h2{
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
    background: transparent;
    margin: 0 40px 0px 40px;
    -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-fourth p { 
	-moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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-fourth a.info { 
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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-fourth:hover .mask {
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
    -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-fourth:hover img    { 
    -webkit-transform: scale(0);
	-moz-transform: scale(0); 
	-o-transform: scale(0); 
	-ms-transform: scale(0); 
	transform: scale(0); 
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
    -webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-o-transition-delay: 0s;
	-ms-transition-delay: 0s;
	transition-delay: 0s;
}                       
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info{
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
    -webkit-transition-delay: 0.5s;
	-moz-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	-ms-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

/* ========== Demo #5 styles ========== */

.view-fifth img {
    -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-fifth .mask { 
    background-color: rgba(29, 165, 255, 0.95);
    -webkit-transform: translateX(-326px);
	-moz-transform: translateX(-326px);
	-o-transform: translateX(-326px);
	-ms-transform: translateX(-326px);
	transform: translateX(-326px);
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
    -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-fifth p{
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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-fifth:hover .mask { 
    -webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-o-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
}                       
.view-fifth:hover img { 
    -webkit-transform: translateX(326px);
	-moz-transform: translateX(326px);
	-o-transform: translateX(326px);
	-ms-transform: translateX(326px);
	transform: translateX(326px);
    -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-fifth:hover p{
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
    -webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	-ms-transition-delay: 0.4s;
	transition-delay: 0.4s;
}

/* ========== Demo #6 styles ========== */

.view-sixth img { 
    -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-sixth .mask{ 
    background-color: rgba(29, 165, 255, 0.95);
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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-sixth h2{
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
    background: transparent;
    margin: 0 40px 0px 40px;
    -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-sixth p { 
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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-sixth a.info, .view-sixth a.zoom { 
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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-sixth:hover .mask {  
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100); 
    -webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-o-transition-delay: 0s;
	-ms-transition-delay: 0s;
	transition-delay: 0s;
}                                                                            
.view-sixth:hover img { 
    -webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-o-transition-delay: 0s;
	-ms-transition-delay: 0s;
	transition-delay: 0s;
}
.view-sixth:hover h2 { 
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
    -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-sixth:hover p { 
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100); 
    -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-sixth:hover a.info, .view-sixth:hover a.zoom { 
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
    -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;
}

/* ========== Demo #7 styles ========== */

.view-seventh img{
    -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;
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
}
.view-seventh .mask { 
    background-color: rgba(29, 165, 255, 0.95);
    -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);
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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;
    -webkit-transform: translateY(-200px) rotate(180deg);
	-moz-transform: translateY(-200px) rotate(180deg);
	-o-transform: translateY(-200px) rotate(180deg);
	-ms-transform: translateY(-200px) rotate(180deg);
	transform: translateY(-200px) rotate(180deg);
}
.view-seventh 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-seventh p { 
    -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-seventh a.info, .view-seventh a.zoom { 
    -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-seventh:hover img{
    -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);
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
}
.view-seventh:hover .mask { 
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);  
    -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-seventh: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-seventh:hover 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-seventh:hover a.info, .view-seventh:hover a.zoom { 
    -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;
}

/* ========== Demo #8 styles ========== */

.view-eighth .mask { 
    background-color: rgba(29, 165, 255, 0.95);
    top: -200px;
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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-eighth 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-eighth p { 
    -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-eighth a.info, .view-eighth a.zoom { 
    -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-eighth:hover .mask { 
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100); 
    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;
	-o-animation: bounceY 0.9s linear;
	-ms-animation: bounceY 0.9s linear;
	animation: bounceY 0.9s linear;
}                                                                                       
.view-eighth: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-eighth:hover 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-eighth:hover a.info, .view-eighth:hover a.zoom { 
    -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);}
}

/* ========== Demo #9 styles ========== */

.view-ninth img { 
    -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-ninth .mask { 
    background-color: rgba(29, 165, 255, 0.95); 
    -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;
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
}   
.view-ninth h2{
    background: transparent;
    margin: 0 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;
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
}
.view-ninth p {
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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-ninth a.info, .view-ninth a.zoom { 
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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-ninth:hover img { 
    -webkit-transform: scale(10);
	-moz-transform: scale(10);
	-o-transform: scale(10);
	-ms-transform: scale(10);
	transform: scale(10);
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
}
.view-ninth:hover .mask { 
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
}                                                                            
.view-ninth:hover h2,
.view-ninth:hover p,
.view-ninth:hover a.info,
.view-ninth:hover a.zoom{ 
    -webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
}



/* ========== Demo #10 styles ========== */
.view-ten .mask {
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
    background-color: rgba(29, 165, 255, 0.95); 
    -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-ten h2 {
	-webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	-o-transform: translateY(-100px);
	-ms-transform: translateY(-100px);
    transform: translateY(-100px);
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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-ten p {
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	-o-transform: translateY(100px);
	-ms-transform: translateY(100px);
    transform: translateY(100px);
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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-ten a.info, .view-first a.zoom {
    -moz-opacity: 0.00;
	opacity: 0.00;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(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-ten:hover .mask { 
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
}
.view-ten:hover h2,
.view-ten:hover p,
.view-ten:hover a.info, .view-first:hover a.zoom {
    -moz-opacity: 1;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
    transform: translateY(0px);
}
.view-ten:hover 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-ten:hover a.info, .view-first:hover a.zoom {
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	-ms-transition-delay: 0.2s;
    transition-delay: 0.2s;
}