/*********************** Demo - 15 *******************/

.box15 {
	position: relative;
	text-align:center;
	cursor: pointer;
	
}

.box15 img {
	width: 100%;
	height: auto;
	padding: 0 !important;
    box-shadow: 0px 0px 7px 0px rgba(114, 110, 165, 0.17);
    border-radius: 5px;
}

.box15 .box-content {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: all .5s ease 0s;
	text-align:center;
	border-radius: 5px;
}

.box15:hover .box-content {
	background-color: rgba(102, 0, 51, 0.72)
}

.box15 .box-content:after,
.box15 .box-content:before {
	content: "";
	width: 40px;
	height: 40px;
	position: absolute;
	opacity: 0;
	transform: scale(1.5);
	transition: all .6s ease .3s
}

.box15 .box-content:before {
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	top: 15px;
	left: 15px
}

.box15 .box-content:after {
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	bottom: 15px;
	right: 15px
}

.box15:hover .box-content:after,
.box15:hover .box-content:before {
	opacity: 1;
	transform: scale(1)
}

.box15 .title {
    font-size: 15px;
	color: #fff;
	margin: 0;
	position: relative;
	top: 0;
	opacity: 0;
	transition: all 1s ease 10ms;
	line-height: 22px;
}

.box15:hover .title {
	top: 30%;
	opacity: 1;
	transition: all .5s cubic-bezier(1, -.53, .405, 1.425) 10ms
}

.box15 .title:after {
	content: "";
	width: 0;
	height:0px;
	background: #fff;
	position: absolute;
	bottom: -8px;
	left: 0;
	right: 0;
	margin: 0 auto;
	transition: all 1s ease 0s
}

.box15:hover .title:after {
	width: 80%;
	transition: all 1s ease .8s
}

.box15 .icon {
	width: 100%;
	margin: 0 auto;
	position: absolute;
	bottom: 0;
	opacity: 0;
	transition-duration: .6s;
	transition-timing-function: cubic-bezier(1, -.53, .405, 1.425);
	transition-delay: .1s
}

.box15:hover .icon {
    bottom: 25%;
    opacity: 1;
    left: 0;
    right: 0;
    text-align: center;
}

.box15 .icon li {
	display: inline-block
}

.box15 .icon li a {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    font-size: 17px;
    color: #fff;
    border: 1px solid #fff;
    margin-right: 5px;
    transition: all .3s ease-in-out 0s;
}

.box15 .icon li a:hover {
    background: #fff;
    color: #603;
    border-color: #603;
}

@media only screen and (max-width:990px) {
	.box15 {
		margin-bottom: 30px
	}
}



/*********************** Demo - 4 *******************/
.box4{position:relative}
.box4:before{width:0;height:200%;background:rgba(0,0,0,.5);position:absolute;top:0;left:-250px;bottom:0;transform:skewX(-36deg);transition:all .5s ease 0s}
.box4:hover:before{width:200%}
.box4 img{width:100%;height:auto}
.box4 .box-content{width:100%;height:100%;padding-top:20%;position:absolute;top:0;left:0;transform:scale(0);transition:all .3s ease 0s}
.box4 .icon,.box5 .icon{list-style:none;padding:0}
.box4:hover .box-content{transform:scale(1)}
.box4 .title{font-size:22px;font-weight:700;color:#fff;margin:0 0 10px}
.box4 .post{display:block;font-size:15px;font-weight:600;color:#fff;margin-bottom:20px}
.box4 .icon{margin:0}
.box4 .icon li{display:inline-block}
.box4 .icon li a{display:block;width:35px;height:35px;line-height:35px;font-size:20px;background:#fff;color:#ee4266;margin-right:10px;transition:all .3s ease 0s}
.box5 .icon,.box5 .icon li{display:inline-block}
@media only screen and (max-width:990px){.box4{margin-bottom:30px}
}
@media only screen and (max-width:767px){.box4:before{left:-400px}
.box4:hover:before{width:300%}
}