/**
 *  Direction-Aware Hover Effect with CSS3 Transform and jQuery
 *  AUTHOR: Jozef Butko
 *  URL: www.jozefbutko.com
 *
 *  CREDITS:
 *  Direction Aware effect: http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/
 *  Improved version of Direction Aware jQuery plugin: http://appyourbrain.com/direction-aware-hover-with-jquery-cross-browser-compatible/
 *  Office Icons pack: https://www.iconfinder.com/iconsets/officeicons
 *  Dellipack Icons pack: https://www.iconfinder.com/iconsets/dellipack
 *  Linecons Icons Pack: https://www.iconfinder.com/iconsets/linecons-free-vector-icons-pack
 *  Images: http://unsplash.com/
 *  Font-Awesome icons: http://fontawesome.io/icons/
 *
 **/

.full-size {
	width: 100%;
	-webkit-transition: all 0.4s ease-in;
	-moz-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	-ms-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
}
/* hover effect */
.hover-wrapper {
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	-o-transition: all 0.15s ease-out;
	-ms-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
	/* without this the link would be collapsed and won't be clickable */
	position: relative;
	overflow: hidden;
}
/* Flicker bug fix (hardware acceleration). More info here: http://davidwalsh.name/translate3d */
.accelerate {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
/* 1st version of hover bg */
.full-size:hover {

	position: relative;
	z-index: 99999;
}
/* 2nd second version of hover bg */
.hover-wrapper-left:hover {
	background: rgba(0, 0, 0, 0.8);
	z-index: initial;
}
/* 3rd version of hover bg */
.hover-wrapper-right {
	position: absolute;
	top: -100%;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity: 0;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	/* IE fallback */
	-webkit-transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out;
	-o-transition: all 0.4s ease-out;
	-ms-transition: all 0.4s ease-out;
	transition: all 0.4s ease-out;
}
.hover-wrapper:hover .hover-wrapper-right {
	background: rgba(0, 0, 0, 0.5);
	z-index: initial;
	top: 0;
	opacity: 1;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	/* IE fallback */
}
.hover-wrapper img {
	z-index: -1;
	/* position image behing black hover area */
	vertical-align: bottom;
	/* this fixes problem with ugly gap below the image*/
	transition: all .4s;
	-moz-transition: all .4s;
	-webkit-transition: all .4s;
	-o-transition: all .4s;
	background-color: #343434;
}
.hover-wrapper:hover img {
	transform: rotate(30deg) scale(2) skew(1deg) translate(0px);
	-webkit-transform: rotate(30deg) scale(2) skew(1deg) translate(0px);
	-moz-transform: rotate(30deg) scale(2) skew(1deg) translate(0px);
	-o-transform: rotate(30deg) scale(2) skew(1deg) translate(0px);
	-ms-transform: rotate(30deg) scale(2) skew(1deg) translate(0px);
	opacity: .7;
}

.icon {
}
/* animate opacity from 0 to 100% */
.full-size__magnifyingGlass {
	opacity: 0;
	/*     margin-left: -38px;
	 margin-top: -38px; */
	/* this is fallback in case you will not use jQuery icon positioning fix */
	background: #ddd;
	padding: 14px;
	border-radius: 50%;
}
.hover-wrapper:hover .full-size__magnifyingGlass {
	opacity: 1;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
/* scale the icon from 0 to 100% */
.full-size__magnifyingGlass--second {
	margin-left: -25px;
	margin-top: -25px;
	width: auto;
	height: auto;
	z-index: 100 !important;
	-webkit-transform: rotate3d(1,90,90,360deg) scale(2.2);
	-moz-transform: rotate3d(1,90,90,360deg) scale(2.2);
	-ms-transform: rotate3d(1,90,90,360deg) scale(2.2);
	transform: rotate3d(1,90,90,360deg) scale(2.2);
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
	opacity: 0;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	z-index: 100 !important;
}

/* on image hover scale the icon to 100% size with animation */
.hover-wrapper:hover .full-size__magnifyingGlass--second {
	/*transform*/
	-webkit-transform: scale(1, 1);
	/* width will be 110% as well as height */
	-moz-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	-o-transform: scale(1, 1);
	transform: scale(1, 1);
	-webkit-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	opacity: 1;
}

/* scale and rotate at the same time */
.full-size__magnifyingGlass--third {
	/* vertical centering of the icon */
	margin-top: -26px;
	border-radius: 50%;
	z-index: 100 !important;
	/* place the icon on the top of the image */
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
	-ms-transition: all 0.5s ease-in;
	transition: all 0.5s ease-in;
	/*transform*/
	-webkit-transform: rotate(360deg) scale(0);
	/* rotate and scale before hover */
	-moz-transform: rotate(360deg) scale(0);
	-ms-transform: rotate(360deg) scale(0);
	-o-transform: rotate(360deg) scale(0);
	transform: rotate(360deg) scale(0);
}
.hover-wrapper:hover .full-size__magnifyingGlass--third {
	/*transform*/
	-webkit-transform: rotate(0deg) scale(1, 1);
	/* rotate and scale to default state */
	-moz-transform: rotate(0deg) scale(1, 1);
	-ms-transform: rotate(0deg) scale(1, 1);
	-o-transform: rotate(0deg) scale(1, 1);
	transform: rotate(0deg) scale(1, 1);
}
/* magnifyingGlass__full-size-third: icon motion from the left to the right and vice versa */
.left {
	left: 0;
}
/* on hover move the left icon to the right */
.hover-wrapper:hover .left {
	left: 55%;
}
.right {
	right: 0;
}
/* on hover move the right icon to the left */
.hover-wrapper:hover .right {
	right: 55%;
}
/* FOURTH GROUP OF IMAGES */
 
.last {
	margin-right: 0;
	/* clear margin-right on the last image */
}
.bg {
	position: absolute;
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	display: inline-block;
	z-index: 501;
	left: 0;
	top: -100%;
}
/* font-awesome icons */

.hover-wrapper:hover i {
	/*transform*/
	-webkit-transform: scale(1, 1);
	/* width will be 100% as well as height */
	-moz-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	-o-transform: scale(1, 1);
	transform: scale(1, 1);
}
.hover-wrapper:hover .bg {
	top: 0;
}

.fa {
	display: inline-block;
}
.textcentered {
	margin: 0 auto;
	color: #FFF;
	text-align: center;
	border-top: 1px solid #FFFFFF;
}
.hotype {
	color: #FFFFFF;
	font-size: 30px;
	padding: 5px;
	background-image: url(img/bg.png);
	/* box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.2), inset 0px 0px 2px 2px rgba(0,0,0,0.2); */
}
.hotsmall {
	padding: 12px 8px;
	color: #FFFFFF;
	font-size: 20px;
	border-radius: 100%; 
}

/* DEFAULT */

.textdefault {
	margin: 0 auto;
	color: #FFF;
	text-align: center;
	border-top: 1px solid #F4F5F4;
}
.hovermodule {
	color: #FFFFFF;
	font-size: 30px;
	padding-bottom: 5px;
	background-image: url(img/bg.png);
	/* box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.2), inset 0px 0px 2px 2px rgba(0,0,0,0.2); */
}
/* SINGLE */
.icon-single {
	position: absolute;
	padding: 15px;
	box-sizing: border-box; /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari, Chrome et al */
	-moz-box-sizing: border-box; /* Firefox */
	bottom: 0;
	overflow: hidden;
	z-index: 99;
	width: 100%;
	text-shadow: 0 0 5px rgba(0,0,0,.6);
}
.textunder-single {
	color: #FFF;
	text-align: right;
	display: inline-block;
	float: right;
	background-color: rgba(0,0,0,.7);
	padding: 0 10px;
	border-radius: 36px;
}
.hovermodule-single {
	color: #EFEFEF;
	font-size: 26px;
	color: #FFFFFF;
	text-transform: uppercase;
	font-family: 'BebasNeue', Arial, sans-serif;
}
.single-onver {
	top: 0;
	left: 0;
	width: auto;
	height: auto;
}
.single-onver img {
	width: 100%;
}
.single-onver img.blur {
	-webkit-filter: brightness(55%) saturate(1.4);
	-moz-filter: brightness(55%) saturate(1.4);
	-o-filter: brightness(55%) saturate(1.4);
	-ms-filter: brightness(55%) saturate(1.4);
	filter: brightness(55%) saturate(1.4);
}
.single-onver:hover img {
}
/* UPPER */

.text-upper {
	margin: 0 auto;
	color: #FFF;
	text-align: center;
	border-top: 1px solid #F4F5F4;
}
.hovermodule-upper {
	color: #FFFFFF;
	font-size: 12px;
	background-image: url(img/bg.png);
	/* box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.2), inset 0px 0px 2px 2px rgba(0,0,0,0.2); */
}
.icon-upper {
	display: inline-block;
	position: absolute;
	width: auto;
	height: auto;
	padding: 10px;
	z-index: 100 !important;
	width: 100%;
	box-sizing: border-box; /* Opera/IE 8+ */
	-webkit-box-sizing: border-box; /* Safari, Chrome et al */
	-moz-box-sizing: border-box; /* Firefox */
	bottom: 0;
	text-align: center;
	background-color: rgba(54,56,56,.5);
	-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255,1);
	-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255,1);
	box-shadow: 0px 1px 1px 0px rgba(255,255,255,1);
}
.icon-upper h2 {
}
.icon-upper a {
	color: #FFFFFF;
	font-size: 12px;
}
.textunder-on {
	color: #F8F8F7;
	margin-top: 5px;
	border-top: 1px solid rgba(255,255,255,.15);
	border-bottom: 1px solid rgba(255,255,255,.15);
}
.textunder-on i {
}
.text-onver {
	overflow: hidden;
}
@media screen and (max-width: 980px) {
	.text-onver {
		height: auto;
	}
}