.box3 {
	box-shadow:0 0 3px rgba(0,0,0,.3);
	position:relative
}

.box3 .box-content,.box3:after,.box3:before {
	position:absolute;
	left:7%;
	right:7%;
	transition:all .3s
}

.box3:after,.box3:before{display:block;background:rgba(0,0,0,.3);top:10%;bottom:10%;z-index:1;transform:scale(0,1)}
.box3:after{top:10.8%;bottom:10.8%;transform:scale(1,0)}
.box3:hover:after,.box3:hover:before{transform:scale(1);animation:animate 1.5s}
.box3:hover:before{border-top:3px solid #fff;border-bottom:3px solid #fff}
.box:hover:after{border-left:3px solid #fff;border-right:3px solid #fff}
.box img{width:100%;height:auto;transition:all .3s}
.box3:hover img{transform:scale(1.2);filter:blur(5px);-moz-filter:blur(5px);-webkit-filter:blur(5px)}
.box3 .box-content{padding:30px 10px;top:10%;bottom:10%;opacity:0;z-index:2}
.box3:hover .box-content{box-shadow:0 0 0 35px rgba(255,255,255,.3);opacity:1;transition:all .3s}
.box3 .title{font-size:24px;font-weight:600;color:#88c425;margin:0 0 5px}
.box3 .post{display:block;margin:0 0 5px;font-size:14px;color:rgba(255,255,255,.8)}
.box3 .description{font-size:14px;color:#fff;margin:0 0 20px}
.box3 .icon{padding:0;margin:0;list-style:none}
.box3 .icon li{display:inline-block;margin:0 10px 0 0}
.box3 .icon li a{display:block;width:30px;height:30px;line-height:30px;color:#fff;background:#88c425;transition:all .5s}
.box3 .icon a:hover{text-decoration:none;animation:animate-hover .5s;transition:all .3s}
@keyframes animate{
	0%,100%{opacity:1}
}

@keyframes animate-hover{
	0%{box-shadow:0 0 0 10px rgba(255,255,255,.3)}
	50%{box-shadow:0 0 0 5px rgba(255,255,255,.3)}
	100%{box-shadow:0 0 0 0 rgba(255,255,255,.3)}
}

.box10,.box11,.box12,.box14,.box4,.box5,.box6,.box7,.box9{box-shadow:0 0 3px rgba(0,0,0,.3)}
@media only screen and (max-width:990px){.box3{margin-bottom:30px}
.box3 .box-content{padding:10px}
.box3 .description{margin-bottom:10px}
}
@media only screen and (max-width:479px){.box3 .title{margin:0}
}

/* ----------- */
.box4 {
	position: relative;
	overflow: hidden;
}

.box4:before {
	content: '';
	width: 0;
	height: 200%;
	background: rgba(0,0,0,.5);
	position: absolute;
	top: 0;
	left: -250px;
	bottom: 0;
	transition: all .5s ease 0s;
}

.box4:hover:before {
	content: '';
	width: 200%;
}

.box4 img {
	width: 100%;
	height: auto;
}

.box4 img.imageFill {
	height: 250px;
}

.box4 .box-content{
	width: 100%;
	height: 100%;
	padding-top: 20%;
	position: absolute;
	top: 0;
	--left: 25%;
	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;
}

#imageModal .modal-dialog {
    max-width: 1000px;
    margin: 30px auto;
}

#imageModal .modal-body {
	position: relative;
	padding: 0px;
	--min-height: 400px;
	background-color: transparent;
}

#imageModal .modal-content {
	background-color: transparent;
	border: unset;
}

#imageModal .close {
	position: absolute;
	right: -30px;
	top: 0;
	z-index: 999;
	font-size: 2rem;
	font-weight: normal;
	color: #fff;
	opacity: 1;
}

#imageModal #image {
	min-height: 200px;
	--max-height: 600px;
	height: auto;
    width: auto;
}

#imageModal .leftArrow {
	position: absolute;
	right: 110%;
	top: 50%;
	z-index: 999;
	font-size: 20px;
}

#imageModal .rightArrow {
	position: absolute;
	right: -20%;
	top: 50%;
	z-index: 999;
	font-size: 20px;
}

#imageModal .imageCounterContainer {
	position: absolute;
	color: white;
	top: 102%;
	left: 50%;
}

#imageModal .imageTotal {
	font-size: 13px;
}

#imageModal .imageActualPosition {
	font-size: 30px;
}

.btnSeeImagesModal {
	padding: 10px 50px 10px 50px;
	color: #fff;
	background: #0091a6;
	cursor: pointer;
}

@media (max-width:1380px) {
	#imageModal .leftArrow {
		right: 76%;
		top: 102%;
	}

	#imageModal .rightArrow {
		right: 2%;
		top: 102%;
	}

	#imageModal .close {
		--right: 20px;
	}
}

@media (max-width:990px) {
	.box4 {
		margin-bottom: 30px;
	}
}

@media (max-width:767px) {
	.box4:before {
		content: '';
		left: -400px;
	}

	.box4:hover:before {
		width:300%;
	}

	#imageModal .modal-body {
		min-height: unset;
	}
}