/*
 This quick example demonstrates the potentially drastic effects of simply
 toggling a class on an element.
 */

.my-element.my-element-vertical h4.my-element-heading {

	display: inline-block;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

.hai-container .animated {
	opacity: 0;
}

.hai-container:hover .animated {
	opacity: 1 !important;
	transition: ease-in .3s;
}

/* Defaults */

.hai-foot {
	position: absolute !important;
	bottom: 0 !important;
	width: 100% !important;
}

.hai-icon #icon_background_id {
	position: absolute !important;
	right: 20px !important;
	top: 20px !important;
}

#x-site a.hai-img:hover {
	color: white !important;
}

p.hai-secondary-text {
	text-transform: uppercase !important;
	margin-bottom: 0px !important;
	margin-top: -5px !important;
	font-size: 14.5px !important;
	line-height: 1.3em !important;
}

.hai-container {
	cursor:pointer;
}

.hai-container #icon_background_id {
	opacity: 0;
}

.hai-container:hover #icon_background_id {
	opacity: 1 !important;
	transition: ease-in .3s;
}

.hello_feature a.hai-img {
	line-height: 1.2em !important;
}

.hello_feature p.hai-secondary-text {
	margin-top: 0px !important;
	padding-top: 7px !important;
}