/*-------------------------------------
Template Name: Hovertend
Template URI: https://webtend.net/
Description: Hovertend Modern & Responsive Bootstrap 4 Forms is a simple and unique style for Iamge hover built with Bootstrap framework. 
Author: webtend
Author URI: https://ryetheme.com/
Version: 1.0
------------------------------------
CSS index:-

1.Default css
2.Hover_1
3.Hover_2
4.Hover_3
5.THover_4
6.Hover_5
7.Hover_6
8.Hover_7
9.Hover_8
10.Hover_9
11.Hover_10
12.Hover_11
13.Hover_12
14.Munfooter css
15.Responsive css
------------------------------------*/

/* Strat Default css*/
.hovertend_title{
	margin-bottom: 95px;
}
.hovertend_title h1{
	font-size: 60px;
	font-weight: 700;
}
.hover_area_1,
.hover_area_2,
.hover_area_3,
.hover_area_4,
.hover_area_5,
.hover_area_6,
.hover_area_7,
.hover_area_8,,
.hover_area_9,
.hover_area_10,
.hover_area_11,
.hover_area_12{
	overflow: hidden;
	position: relative;
}
.hover_img_1,
.hover_img_2,
.hover_img_3,
.hover_img_4,
.hover_img_5,
.hover_img_6,
.hover_img_7,
.hover_img_8,
.hover_img_9,
.hover_img_10,
.hover_img_11,
.hover_img_12{
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
}
.hover_img_1 img,
.hover_img_2 img,
.hover_img_3 img,
.hover_img_4 img,
.hover_img_5 img,
.hover_img_6 img,
.hover_img_7 img,
.hover_img_8 img,
.hover_img_9 img,
.hover_img_10 img,
.hover_img_11 img,
.hover_img_12 img{
	overflow: hidden;
	width: 350px;
  	height: 260px;
}
/* End Default css*/

/*
	2. Start Hover style css 1
*/
.hover_area_1:hover .overlay_content_1{

}
.hover_area_1:hover .overlay_content_1:after{
	width: 100px;
    height: 100px;
    visibility: visible;
}
.hover_area_1:hover .overlay_content_1:before{
	width: 100px;
    height: 100px;
    visibility: visible;
}
.overlay_content_1{
	position: absolute;
	top: 28px;
	left: 28px;
	bottom: 28px;
	background: rgb(22, 22, 34);
	opacity: 0.702;
	width: 294px;
	height: 202px;
	padding-top: 85px;
	padding-bottom: 38px;
	transition: all .5s;
}
.overlay_content_1:after{
	position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    border-top: 4px solid rgb(251, 106, 39);
    border-right: 4px solid rgb(251, 106, 39);
    right: -4px;
    top: -4px;
    visibility: hidden;
    transition: all 2s;
}
.overlay_content_1:before{
	position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    border-left: 4px solid rgb(251, 106, 39);
    border-bottom: 4px solid rgb(251, 106, 39);
    left: -4px;
    bottom: -4px;
    transition: all 2s;
    visibility: hidden;
}
.overlay_content_1 .overlay_content_text_1 h4{
	font-weight: bold;
}
.overlay_content_1 .overlay_content_text_1 h4,
.overlay_content_1 .overlay_content_text_1 h5{
	color: #f9f6f6;
}
.overlay_icon_1{
	margin-top: 10px;
}
.overlay_icon_1 a{
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	color: #fff;
	font-size: 22px;
	background: transparent;
	border: 1.5px solid  rgb(251, 106, 39);
	border-radius: 50%;
	transition: all .5s;
}
.overlay_icon_1 a:hover{
	background: #fff;
	border-color: #fff;
	color: rgb(251, 106, 39);
}
/*
	End Hover style css 1
*/

/*
	3.Start hover style 2
*/
.hover_area_2:hover .overlay_content_2{
	transform: rotate(55deg);
	right: -55%;
}
.hover_img_2{
	overflow: hidden;
}
.overlay_content_2 {
    position: absolute;
    top: 0;
    right: 155%;
    background: rgb(251, 106, 39);
    opacity: 0.702;
    width: 418px;
    height: 369px;
    border-radius: 25px;
    transform: rotate(0deg);
    transition: all .7s;
}
.overlay_content_area_2 {
    transform: rotate(-55deg);
    position: absolute;
    top: 57%;
    left: 0;
}
.overlay_text_2 h4{
	font-size: 18px;
	color: #fff;
}
.overlay_icon_2{
	margin-top: 20px;
}
.overlay_icon_2 a{
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	color: #fff;
	font-size: 22px;
	text-align: center;
	background: transparent;
	border: 1.5px solid  #fff;
	border-radius: 5px;
	transition: all .5s;
	margin-right: 12px;
}
.overlay_icon_2 a:hover{
	background: #fff;
	color: rgb(251, 106, 39);
}
/*
	End Hover style css 2
*/

/*
	4.Start hover style 3
*/
.hover_area_3:hover .hover_img_3 img{
	transform: scale(1.5) rotateY(10deg);
}
.hover_img_3 img{
	transform: scale(1) rotate(0deg);
	transition: all .5s;
}
.hover_area_3:hover .overlay_content_3{
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	transition: all .5s;
}
.overlay_content_3{
	position: absolute;
	bottom: 0;
	left: 0;
  	opacity: 0.702;
  	width: 350px;
  	height: 71px;
  	border-bottom: 75px solid rgb(67, 79, 229);
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    transition: all .5s;
}
.overlay_icon_3{
	margin-top: 20px;
}
.overlay_icon_3 a{
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	color: #fff;
	font-size: 22px;
	text-align: center;
	background: transparent;
	border: 1.5px solid  #fff;
	border-radius: 5px;
	transition: all .5s;
	margin-right: 12px;
}
.overlay_icon_3 a:hover{
	background: #fff;
	color: rgb(251, 106, 39);
}
/*
	End hover style 3
*/
/*
	5. Start Hover style css 4
*/
.hover_area_4:hover .overlay_content_4 {
    width: 305px;
    height: 111px;
    left: 22px;
    padding-top: 4%;
    top: 0;
}
.overlay_content_4{
	position: absolute;
	top: 17px;
	left: 22px;
	background: rgb(27, 27, 45);
  	opacity: 0.702;
  	width: 305px;
  	height: 225px;
  	border: 2px solid #fff;
  	padding-top: 78px;
  	transition: all .5s;
}
.overlay_text_4 h4{
	color: #fff;
	margin-bottom: 20px;
}
.overlay_icon_4 a{
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	color: #fff;
	font-size: 22px;
	text-align: center;
	background: transparent;
	border: 1.5px solid  #fff;
	border-radius: 5px;
	transition: all .5s;
	margin-left: 9px;
	margin-right: 9px;
}
.overlay_icon_4 a:hover{
	background: #fff;
	color: rgb(251, 106, 39);
}
/*
	End Hover style css 4
*/

/*
	6. Start Hover style css 5
*/
.hover_area_5:hover .overlay_content_5{
	width: 100%;
  	height: 100%;
  	left: 0;
  	padding-top: 30%;
}
.overlay_content_5{
	position: absolute;
	bottom: 0;
	left: 23px;
	background: rgb(27, 27, 45);
  	opacity: 0.702;
  	width: 305px;
  	height: 111px;
  	border: 2px solid rgb(18, 241, 154);
  	padding-top: 10px;
  	padding-bottom: 10px;
  	transition: all .5s;
}
.overlay_text_5 h4{
	color: #fff;
	margin-bottom: 20px;
}
.overlay_icon_5 a{
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	color: #fff;
	font-size: 22px;
	text-align: center;
	background: transparent;
	border: 1.5px solid  #fff;
	border-radius: 5px;
	transition: all .5s;
	margin-left: 9px;
	margin-right: 9px;
}
.overlay_icon_5 a:hover{
	background: #fff;
	color: rgb(251, 106, 39);
}
/*
	End Hover style css 5
*/
/*
	7. Start hover style csss 6
*/
.hover_area_6:hover .hover_img_6 img{
	transform: scale(1.5);
}
.hover_img_6 img{
	transform: scale(1);
	transition: all .5s;
}
.hover_area_6:hover .overlay_content_6{
	border-radius: 50%;
}
.overlay_content_6{
	position: absolute;
	top: 0;
	left: 0;
	background: rgb(50, 38, 214);
	opacity: 0.702;
	width: 350px;
  	height: 259px;
  	border-radius: 0;
  	padding-top: 95px;
  	transition: all .5s;
}
.overlay_text_6 h4{
	color: #fff;
	margin-bottom: 20px;
}
.overlay_icon_6 a{
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	color: #fff;
	font-size: 22px;
	text-align: center;
	background: transparent;
	border: 1.5px solid  #fff;
	border-radius: 5px;
	transition: all .5s;
	margin-left: 9px;
	margin-right: 9px;
}
.overlay_icon_6 a:hover{
	background: #fff;
	color: rgb(251, 106, 39);
}
/*
	End hover style 6
*/

/*
	8. Start hover style 7
*/
.hover_area_7:hover .hover_img_7 img{
	transform: rotate(10deg) scale(1.5);
}
.hover_img_7 img{
	transform: rotate(0deg) scale(1);
	transition: all .5s;
}
.hover_area_7:hover .overlay_content_7{
	top: 0;
}
.hover_area_7:hover .overlay_icon_7{
	bottom: 0;
}
.overlay_content_7{
	position: absolute;
	top: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(23, 23, 37);
	opacity: 0.749;
	transition: all .5s;
}
.overlay_text_7{
	padding: 85px 65px 85px 33px;
}
.overlay_text_7 h4{
	color: #fff;
	margin-bottom: 10px;
}
.overlay_text_7 p{
	color: #fff;
	line-height: 20px;
}
.overlay_icon_7{
	background: rgb(251, 106, 39);
	width: 90px;
  	height: 105px;
  	position: absolute;
  	bottom: -100%;
  	right: 0;
  	padding: 15px;
  	border-top-left-radius: 50%;
  	transition: all .5s;
}
.overlay_icon_7 ul{
	text-align: center;
	margin-top: 4px;
}
.overlay_icon_7 ul li a{
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	color: #fff;
	font-size: 22px;
	text-align: center;
	background: transparent;
	border: 1.5px solid  #fff;
	border-radius: 5px;
	transition: all .5s;
	margin-bottom: 10px;
}
.overlay_icon_7 ul li a:hover{
	background: #fff;
	color: rgb(251, 106, 39);
}
/*
	End hover style 7
*/

/*
	9. Start hover style 8
*/
.hover_area_8:hover .hover_img_8 img{
	transform: scale(1.5);
}
.hover_img_8 img{
	transform: scale(1.1);
	transition: all .5s;
}
.hover_area_8:hover .overlay_content_8:after{
	width: 350px;
	height: 4px;
}
.hover_area_8:hover .overlay_content_8:before{
	width: 4px;
	height: 260px;
}
.overlay_content_8{
	position: absolute;
	bottom: 0px;
	left: 0;
	background: -moz-linear-gradient( -180deg, rgb(53,2,136) 0%, rgb(248,10,178) 100%);
	background: -webkit-linear-gradient( -180deg, rgb(53,2,136) 0%, rgb(248,10,178) 100%);
	background: -ms-linear-gradient( -180deg, rgb(53,2,136) 0%, rgb(248,10,178) 100%);
	opacity: 0.702;
	width: 322px;
  	height: 230px;
  	padding-top: 75px;
  	transition: all .5s;
}
.overlay_content_8:after{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 0px;
	height: 0px;
  	border-top: 4px solid #fff;
  	transition: all .7s;
    box-sizing: border-box;
    transition: all .5s;
}
.overlay_content_8:before{
	position: absolute;
	content: '';
	bottom: 0;
	right: 0;
	width: 0px;
	height: 0px;
  	border-right: 4px solid #fff;
  	transition: all .7s;
    box-sizing: border-box;
    transition: all .5s;
}
.overlay_content_text_8 h4{
	color: #fff;
}
.overlay_content_text_8 h5{
	color: #fff;
}
.overlay_icon_8{
	margin-top: 11px;
}
.overlay_icon_8 a{
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	color: #fff;
	font-size: 22px;
	text-align: center;
	background: transparent;
	border: 1.5px solid  #fff;
	border-radius: 50px;
	transition: all .5s;
}
.overlay_icon_8 a:hover{
	background: #fff;
	color: rgb(251, 106, 39);
}
/*
	End hover style 8
*/

/*
	10. Start hover style 9
*/
.hover_area_9:hover .hover_img_9 img{
	transform: scale(1.5);
	transition: all .5s;
}
.hover_area_9:hover .overlay_content_9{
	left: -21px;
}
.hover_img_9 img{
	transform: scale(1);
	transition: all .5s;
}
.overlay_content_9{
	position: absolute;
	top: 19px;
	left: -100%;
	background: -moz-linear-gradient( 180deg, rgb(53,2,136) 0%, rgb(248,10,178) 100%);
	background: -webkit-linear-gradient( 180deg, rgb(53,2,136) 0%, rgb(248,10,178) 100%);
	background: -ms-linear-gradient( 180deg, rgb(53,2,136) 0%, rgb(248,10,178) 100%);
	opacity: 0.8;
	width: 321px;
  	height: 120px;
  	padding-left: 48px;
    padding-top: 23px;
  	transform: skew(20deg);
  	transition: all .5s;
}
.overlay_content_area_9 {
    transform: skew(-20deg);
}
.overlay_content_text_9 h4{
	color: #fff;
}
.overlay_content_text_9 h5{
	color: #fff;
}
.overlay_icon_9{
	margin-top: 11px;
}
.overlay_icon_9 a{
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	color: #fff;
	font-size: 22px;
	text-align: center;
	background: transparent;
	border: 1.5px solid  #fff;
	border-radius: 50px;
	transition: all .5s;
	margin-right: 14px;
}
.overlay_icon_9 a:hover{
	background: #fff;
	color: rgb(251, 106, 39);
}
/*
	End hover style 9 css
*/

/*
	11. Start hover style 10 css
*/
.hover_area_10:hover .hover_img_10 img{
	transform: translate(100px);
}
.hover_area_10:hover .overlay_content_area_10{
	bottom: 0;
}
.hover_img_10 img{
	transform: translate(0px);
	transition: all .5s;
}
.overlay_content_area_10{
	position: absolute;
	bottom: -100%;
	left: 0;
	background: rgba(105,43,241,1);
	background: -moz-linear-gradient(left, rgba(105,43,241,1) 0%, rgba(172,130,236,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(105,43,241,1)), color-stop(100%, rgba(172,130,236,1)));
	background: -webkit-linear-gradient(left, rgba(105,43,241,1) 0%, rgba(172,130,236,1) 100%);
	background: -o-linear-gradient(left, rgba(105,43,241,1) 0%, rgba(172,130,236,1) 100%);
	background: -ms-linear-gradient(left, rgba(105,43,241,1) 0%, rgba(172,130,236,1) 100%);
	background: linear-gradient(to right, rgba(105,43,241,1) 0%, rgba(172,130,236,1) 100%);
	width: 350px;
  	height: 110px;
  	padding-top: 10px;
  	transition: all .5s;
}
.overlay_content_text_10 h4{
	color: #fff;
}
.overlay_content_text_10 h5{
	color: #fff;
}
.overlay_icon_10{
	margin-top: 11px;
}
.overlay_icon_10 a{
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	color: #fff;
	font-size: 22px;
	text-align: center;
	background: transparent;
	border: 1.5px solid  #fff;
	border-radius: 50px;
	transition: all .5s;
	margin-right: 7px;
	margin-left: 7px;
}
.overlay_icon_10 a:hover{
	background: #fff;
	color: rgb(251, 106, 39);
}
/*
	End hover style 10 css
*/

/*
	12. Start hover style 11 css
*/
.hover_area_11{
	overflow: hidden;
}
.hover_area_11:hover .hover_img_11 img{
	transform: scale(1.5);
}
.hover_area_11:hover .overlay_content_11 {
	transform: skew(15deg);
}
.hover_area_11:hover .overlay_content_area_11 {
	transform: skew(-15deg);
}
.hover_img_11 img{
	overflow: hidden;
	transform: scale(1);
	transition: all .5s;
}
.overlay_content_11 {
    position: absolute;
    top: 55px;
    left: 30px;
    background: -moz-linear-gradient( 180deg, rgb(91,77,235) 0%, rgb(40,209,147) 100%);
    background: -webkit-linear-gradient( 180deg, rgb(91,77,235) 0%, rgb(40,209,147) 100%);
    background: -ms-linear-gradient( 180deg, rgb(91,77,235) 0%, rgb(40,209,147) 100%);
    opacity: 0.8;
    width: 280px;
    height: 150px;
    transform: skew(0deg);
    transition: all .5s;
}
.overlay_content_11:after{
	position: absolute;
	content: '';
	top: 0;
	left: 55px;
	width: 4px;
	height: 77px;
  	border-right: 4px solid #fff;
  	transition: all .7s;
    box-sizing: border-box;
}
.overlay_content_11:before{
	position: absolute;
	content: '';
	bottom: 0;
	right: 55px;
	width: 4px;
	height: 77px;
  	border-right: 4px solid #fff;
  	transition: all .7s;
    box-sizing: border-box;
}
.overlay_content_area_11 {
    transform: skew(0deg);
    margin-top: 40px;
    text-align: center;
    transition: all .5s;
}
.overlay_content_text_11 h4{
	color: #fff;
	margin-bottom: 4px;
}
.overlay_content_text_11 h5{
	color: #fff;
}
.overlay_icon_11{
	margin-top: 11px;
}
.overlay_icon_11 a{
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	color: #fff;
	font-size: 22px;
	text-align: center;
	background: transparent;
	border: 1.5px solid  #fff;
	border-radius: 50px;
	transition: all .5s;
	margin-right: 14px;
}
.overlay_icon_11 a:hover{
	background: #fff;
	color: rgb(251, 106, 39);
}
/*
	End hover style 11 css
*/

/*
	13. Start hover style 12 css
*/
.hover_area_12:hover .overlay_content_12{
	left: 0;
}
.hover_area_12:hover .hover_img_12 img{
	transform: translate(100px);
}
.hover_img_12{
	overflow: hidden;
}
.hover_img_12 img{
	transform: scale(1.1);
	transition: all .5s;
}
.overlay_content_12{
	position: absolute;
	top: 0;
	left: -100%;
	background: -moz-linear-gradient( 0deg, rgb(36,219,135) 0%, rgb(14,154,126) 100%);
	background: -webkit-linear-gradient( 0deg, rgb(36,219,135) 0%, rgb(14,154,126) 100%);
	background: -ms-linear-gradient( 0deg, rgb(36,219,135) 0%, rgb(14,154,126) 100%);
	width: 100%;
	height: 100%;
	padding-top: 93px;
	padding-left: 50px;
	transition: all .5s;
}
.overlay_content_text_12 h4{
	margin-bottom: 7px;
	font-weight: bold;
	color: #fff;
}
.overlay_content_text_12 h5{
	color: #fff;
}
.overlay_icon_12{
	margin-top: 12px;
}
.overlay_icon_12 a{
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	color: #fff;
	font-size: 22px;
	text-align: center;
	background: transparent;
	border: 1.5px solid  #fff;
	border-radius: 50px;
	transition: all .5s;
	margin-right: 14px;
}
.overlay_icon_12 a:hover{
	background: #fff;
	color: rgb(251, 106, 39);
}
/*
	End hover style 12 css
*/

/*
	14. Start Footer area css
*/
.hovertend_footer{
	background: #4f93e1;
	padding: 40px 0;
}
.hovertend_footer .footer_text{
	text-align: center;
}
.hovertend_footer .footer_text p{
	color: #fff;
	font-size: 16px;
}
/*
	End Footer area css
*/

/*
   15. Start Responsive css
*/

/* Medium Layout: 1280px. */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    
}
/* Tablet Layout: 768px. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.hovertend_hover .hover_area_1,
	.hovertend_hover .hover_area_2,
	.hovertend_hover .hover_area_3,
	.hovertend_hover .hover_area_4,
	.hovertend_hover .hover_area_5,
	.hovertend_hover .hover_area_6,
	.hovertend_hover .hover_area_7,
	.hovertend_hover .hover_area_8,
	.hovertend_hover .hover_area_9,
	.hovertend_hover .hover_area_10,
	.hovertend_hover .hover_area_11,
	.hovertend_hover .hover_area_12,
	.hovertend_hover .hover_area_13,
	.hovertend_hover .hover_area_14,
	.hovertend_hover .hover_area_15{
		margin-bottom: 60px;
	}
}
/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {
	.hovertend_hover .hover_area_1,
	.hovertend_hover .hover_area_2,
	.hovertend_hover .hover_area_3,
	.hovertend_hover .hover_area_4,
	.hovertend_hover .hover_area_5,
	.hovertend_hover .hover_area_6,
	.hovertend_hover .hover_area_7,
	.hovertend_hover .hover_area_8,
	.hovertend_hover .hover_area_9,
	.hovertend_hover .hover_area_10,
	.hovertend_hover .hover_area_11,
	.hovertend_hover .hover_area_12{
		margin-bottom: 60px;
	}
	.hovertend_title h1 {
        font-size: 30px;
    }
   	.hover_area_1 .overlay_content_1 {
	    left: 23px;
	    top: 10px;
	}
    .hover_area_3 .overlay_content_3{
    	left: -5px;
    }
    .hover_area_4 .overlay_content_4{
    	left: 16px;
    }
    .hover_area_4:hover .overlay_content_4{
    	left: 16px;
    }
    .hover_area_5 .overlay_content_5{
    	left: 16px;
    }
    .hover_area_5:hover .overlay_content_5{
    	left: 0px;
    }
    .overlay_content_6{
		width: 100%;
		height: 100%;
	}
    .overlay_text_7 {
	    padding: 50px 65px 85px 33px;
	}
	.overlay_content_8 {
	    width: 310px;
	    height: 200px;
	}
	.hover_img_1 img,
	.hover_img_2 img,
	.hover_img_3 img,
	.hover_img_4 img,
	.hover_img_5 img,
	.hover_img_6 img,
	.hover_img_7 img,
	.hover_img_8 img,
	.hover_img_9 img,
	.hover_img_10 img,
	.hover_img_11 img,
	.hover_img_12 img{
		width: 100%;
		height: 100%;
	}
}
/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 400px) and (max-width: 499px) {
	.hover_img_1 img,
	.hover_img_2 img,
	.hover_img_3 img,
	.hover_img_4 img,
	.hover_img_5 img,
	.hover_img_6 img,
	.hover_img_7 img,
	.hover_img_8 img,
	.hover_img_9 img,
	.hover_img_10 img,
	.hover_img_11 img,
	.hover_img_12 img{
		width: 100%;
		height: 100%;
	}
	.hover_area_1 .overlay_content_1 {
	    left: 38px;
	    top: 25px;
	}
	.hover_area_2:hover .overlay_content_2 {
	    right: -47%;
	}
	.hover_area_3 .overlay_content_3 {
	    left: 9px;
	}
	.hover_area_4 .overlay_content_4 {
	    left: 35px;
	}
	.hover_area_4:hover .overlay_content_4 {
	    left: 35px;
	}
	.hover_area_5 .overlay_content_5 {
	    left: 35px;
	}
	.hover_area_8:hover .overlay_content_8:after {
	    width: 370px;
	    height: 4px;
	}
	.hover_area_8:hover .overlay_content_8:before {
	    width: 4px;
	    height: 370px;
	}
	.overlay_content_11{
		left: 50px;
	}
}
/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 500px) and (max-width: 599px) {
	.hover_img_1 img,
	.hover_img_2 img,
	.hover_img_3 img,
	.hover_img_4 img,
	.hover_img_5 img,
	.hover_img_6 img,
	.hover_img_7 img,
	.hover_img_8 img,
	.hover_img_9 img,
	.hover_img_10 img,
	.hover_img_11 img,
	.hover_img_12 img{
		width: 100%;
		height: 100%;
	}
	.hover_area_1 .overlay_content_1 {
	    left: 90px;
	    top: 55px;
	}
	.hover_area_2:hover .overlay_content_2 {
	    right: -37%;
	}
	.hover_area_3 .overlay_content_3 {
	    left: 60px;
	}
	.hover_area_4 .overlay_content_4 {
	    left: 80px;
	    top: 50px;
	}
	.hover_area_4:hover .overlay_content_4 {
	    left: 80px;
	}
	.hover_area_5 .overlay_content_5 {
	    left: 80px;
	}
	.overlay_content_8 {
	    width: 90%;
	    height: 90%;
	}
	.hover_area_8:hover .overlay_content_8:after {
	    width: 480px;
	    height: 4px;
	}
	.hover_area_8:hover .overlay_content_8:before {
	    width: 4px;
	    height: 480px;
	}
	.overlay_content_11{
		left: 100px;
		top: 100px;
	}
}
/*
    End Responsive css
*/