@charset "utf-8";
/* first----------------------------------*/
@media screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}
.view-firstsp,.view-first {
	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;
}
.view-firstsp .mask,.view-firstsp .content {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
}
.view-first .mask,.view-first .content {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
}
.view-firstsp img {
	display: block;
	position: relative;
	width: 215px;
	max-width: 100%;
	height: 322px;
}
.view-first img {
	display: block;
	position: relative;
	width: 150px;
	max-width: 100%;
	height: 225px;
}
@media screen and (min-width: 768px) {
	.view-firstsp {
		float: left;
		width:  220px;
		height: 329px;
		margin: 10px;
	}
	.view-first {
		float: left;
		width: 155px;
		height: 232px;
		margin: 10px;
	}
	.staffbox1 {
		margin-left: 230px;
	}
	.view-firstsp .mask,.view-firstsp .content {
		width: 220px;
		height: 329px;
	}
	.view-first .mask,.view-first .content {
		width: 155px;
		height: 232px;
	}
}
@media screen and (max-width: 767px) {
	.view-firstsp {
		float: left;
		width: 40%;
		margin: 5px;
	}
	.view-first {
		float: left;
		width: 40%;
		height: 232px;
		margin: 5px;
	}
	.view-firstsp .mask,.view-firstsp .content {
		width: 100%;
		height: 250px;
	}
	.view-first .mask,.view-first .content {
		width: 100%;
		height: 250px;
	}
	.view-firstsp img {
		width: auto;
		height: auto;
	}
	.view-first img {
		width: auto;
		height: auto;
	}
}
@media screen and (max-width: 479px) {
}
.view-firstsp h2 {
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 17px;
	padding: 10px;
	background: rgba(0, 0, 0, 0.8);
	margin: 287px 0 0 0;
}
.view-first h2 {
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 17px;
	padding: 10px;
	background: rgba(0, 0, 0, 0.8);
	margin: 190px 0 0 0;
}
.view-firstsp p,.view-first p {
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 12px;
	position: relative;
	color: #fff;
	padding: 10px 20px 20px;
	text-align: center;
}
.view-firstsp a.info,.view-first a.info {
	display: inline-block;
	text-decoration: none;
	padding: 7px 14px;
	background: #000;
	color: #fff;
	text-transform: uppercase;
	-webkit-box-shadow: 0 0 1px #000;
	-moz-box-shadow: 0 0 1px #000;
	box-shadow: 0 0 1px #000;
}
.view-firstsp a.info: hover,.view-first a.info: hover {
	-webkit-box-shadow: 0 0 5px #000;
	-moz-box-shadow: 0 0 5px #000;
	box-shadow: 0 0 5px #000;
}
.view-firstsp img,.view-first img {
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
.view-firstsp .mask,.view-first .mask {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	background-color: rgba(252,244,240, 0.3);
	-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-firstsp h2,.view-first 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-firstsp p,.view-first p {
	-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-firstsp:hover img,.view-first:hover img {
	-webkit-transform: scale(1.4,1.4);
	-moz-transform: scale(1.4,1.4);
	-o-transform: scale(1.4,1.4);
	-ms-transform: scale(1.4,1.4);
	transform: scale(1.4,1.4);
}
.view-firstsp a.info,.view-first 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-firstsp:hover .mask,.view-first:hover .mask {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
.view-firstsp:hover h2,
.view-firstsp:hover p,
.view-firstsp:hover a.info,
.view-first:hover h2,
.view-first:hover p,
.view-first: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-firstsp:hover p,.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-firstsp:hover a.info,.view-first: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;
}
/* second----------------------------------*/
.view-second {
	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: #000;
	padding: 5px;
}
.view-second .mask,.view-second .content {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 100%;
}
.view-second img {
	display: block;
	position: relative;
	max-width: 100%;
	margin: 0px auto;
}
@media screen and (min-width: 768px) {
	.view-second {
		float: left;
		width: 175px;
		margin: 5px;
	}
	.view-second img {
		height: 250px;
	}
}
@media screen and (max-width: 767px) {
	.view-second {
		float: left;
		width: 29%;
		margin: 5px;
	}
	.view-second img {
		height: 200px;
	}
}
@media screen and (max-width:479px) {
	.view-second {
		width: 44%;
		margin: 5px;
	}
}
.view-second h2 {
	text-transform: uppercase;
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 16px;
	padding: 20px 0px 10px 0px;
}
.view-second p {
	font-size: 12px;
	position: relative;
	color: #fff;
	line-height: 1.4em;
	padding: 10px 20px 20px;
	text-align: center;
}
.view-second a.info {
	display: inline-block;
	text-decoration: none;
	padding: 7px 14px;
	background: #f4c6b6;
	color: #fff;
	text-transform: uppercase;
}
.view-second a.info:hover {
	background: #ff9f7e;
}