@charset "utf-8";
/* CSS Document */
/*************************************************************************************************************************************/
.hover-list {
	margin: 0 -15px;
	padding: 0;
}
.hover-list li {
	display: inline-block;
	margin: 0 15px;
	float: left;
}
/*************************************************************************************************************************************/

.hover-item {
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.hover-item img {
	position: absolute;
	left: 0;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
}
.hover-item .overbox {
	background: rgba(20,20,20,0.8);
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	z-index: 100;
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
	opacity: 0;
	width: 100%;
	height: 100%;
	padding: 60px 50px;
	text-align: center;
	vertical-align: middle;
}
.hover-item:hover .overbox {
	opacity: 1;
}
.hover-item .overtext {
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;
	transition: all 300ms ease-out;
	transform: translateY(100px);
	-webkit-transform: translateY(100px);
}
.hover-item .title {
	font-size: 24px;
	font-family: inherit;
	text-transform: uppercase;
	opacity: 0;
	transition-delay: 0.1s;
	transition-duration: 0.1s;
	font-weight: 400;
}
.hover-item:hover .title, .hover-item:focus .title {
	opacity: 1;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
}
.hover-item .tagline {
	font-size: 1.3em;
	font-weight: 400;
	font-family: inherit;
	opacity: 0;
	transition-delay: 0.2s;
	transition-duration: 0.2s;
}
.hover-item:hover .tagline, .hover-item:focus .tagline {
	opacity: 1;
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
}
/* media query*************************************************************************************/
@media (max-width: 991px) {
.hover-list { text-align:center;}
.hover-list li { float:none;}
}
@media (max-width: 319px) {}
.hover-list li, .hover-item {
	width: calc(100% - 30px);
}

@media (min-width: 320px) {
.hover-list li, .hover-item {
	width: 290px;
}
.hover-item {
	height:193px;
}

}
@media (min-width: 480px) {
.hover-list li, .hover-item {
	width: 440px;
}
.hover-item {
	height: 293px;
}
}
@media (min-width: 768px) {
.hover-list li, .hover-item {
	width: 470px;
}
.hover-item {
	height: 313px;
}
}
@media (min-width: 992px) {
.hover-list li, .hover-item {
	width: 330px;
}
.hover-item {
	height: 220px;
}
}
@media (min-width: 1200px) {
.hover-list li, .hover-item {
	width: 430px;
}
.hover-item {
	height: 287px;
}
}

@media (min-width: 1440px) {
.hover-list li, .hover-item {
	width: 555px;
}
.hover-item {
	height: 370px;
}
}