@charset "UTF-8";
/* CSS Document */

.clear-all {
	clear: all;
}

#feature-section {
	min-height: 480px;
}

#feature-section .image {
	/*float: right;*/
	width: 300px;
	position: relative;
	height: 480px;
	overflow: hidden;
}

#feature-section .image img {
	position: absolute;
	bottom: -180px;
}

#feature-section .image img:hover {
	position: absolute;
	bottom: 0px;
}

#feature-section .image img {
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}

.feature-left {
	background: #fff;
}

.feature-right {
	background: #f4f7f9;
}

/*#feature-section.feature-right .description {
	float: right;
}*/
/*#feature-section.feature-right .image {
	float: left;
}*/

@media all and (max-width: 1024px){
	
	#feature-section .image img {
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		transition: none;
	}
	#feature-section .image img {
		bottom: 0px;
		width: 300px;
	}
	#feature-section .image {
		width: 300px;
	}
}

@media all and (max-width: 768px){
	
	#feature-section {
		/*float: none;*/
		width: 100%;
	}
	#feature-section .image, #feature-section.feature-right .image {
		/*float: none;*/
		width: 100%;
	}
}

@media all and (max-width: 480px){

	#feature-section .image {
		margin-top: -50px;
	}
	
}

@media all and (max-width: 400px){
	header form input[type=text] {
		width: 120px;
	}
	header h1 {
		font-size: 1.6em;
	}
	
@media all and (max-width: 360px){

}