/*

	Theme Name: Ville - Responsive Multipurpose HTML5 Template
	Theme URI: http://locotheme.com/ville-html/
	Description: Responsive Multipurpose HTML5 Template
	Version: 1.0
	Author: Loco Theme
	Author URI: http://www.locotheme.com

	- - - - - Contents - - - - -
	
	01 - Max 480px
	02 - Max 767px
	03 - Min 768px
	04 - Max 991px
	05 - Min 992px

	- - - - - - - - - - - - - -
	
*/	

/*  01 -  Max 480px
-----------------------------------------------------------*/
@media (max-width: 480px){
	.section-collection .collection-item{
		padding-left			: 20px;
	}
	.section-collection .collection-item .collection-image{
		display					: none;
	}
}

/*  02 -  Max 767px
-----------------------------------------------------------*/
@media (max-width: 767px){
	.back-top{
		right					: -99999px;
	}
	.bx-wrapper .bx-controls-direction a{
		width					: 40px;
		height					: 40px;
		margin-top				: -20px;
	}
	.bx-wrapper .bx-prev:before, .bx-wrapper .bx-next:before{
		line-height				: 40px;
	}
	.site-slider .slide-caption .caption-wrap{
		padding					: 0 50px;
		font-size				: 12px;
	}
	.site-slider .slide-caption .caption-big{
		font-size				: 14px;
	}
	.site-slider .slide-caption .caption-small{
		font-size				: 12px;
	}
	.hero-about .box-dark{
		text-align				: justify;
	}
	.hero-small .vertical-center{
		width					: 100%;
		float					: left;
		margin					: 15px 0 0 15px;
		position				: relative;
		right					: inherit;
		top						: inherit;
		 -webkit-transform		: none;
		-ms-transform			: none;
		transform				: none;
	}
	h2.f-left,
	.team-vertical h2{
		font-size				: 30px;
	}
	h2.f-left,
	.social-icons.f-right,
	.team-vertical h2,
	.team-vertical .social-icons{
		float					: none;
		margin-bottom			: 10px;
	}
	.data-form .row > div{
		margin-bottom			: 15px;
	}
	.data-form .row > div:last-child{
		margin-bottom			: 0;
	}
	.data-form .btn{
		width					: 100%;
		display					: block;
	}
}

/*  03 -  Min 768px
-----------------------------------------------------------*/
@media (min-width: 768px){
	.hero-about{
		background				: url("../img/home-about.png") no-repeat scroll top right transparent;
		background-size			: contain;
	}
}
/*  04 -  Max 991px
-----------------------------------------------------------*/
@media (max-width: 991px){
	.site-header .header-logo{
		float					: none;
	}
	.site-header .header-menu .mobile-menu{
		display					: block;
	}
	.site-header .header-menu > ul{
		display					: none;
		padding-top				: 30px;
	}
	.site-header .header-menu ul li a{
		height					: 30px;
		line-height				: 30px;
		border-bottom			: 1px solid #ebebeb;
	}
	.site-header .header-menu ul li .down{
		display					: inline-block;
	}
	.site-header .header-menu ul li ul{
		display					: none;
		padding-left			: 10px;
	}
}

/*  05 -  Min 992px
-----------------------------------------------------------*/
@media (min-width: 992px){
	.site-header .header-menu{
		margin-top				: 11px;
		float					: left;
	}
	.site-header .header-menu ul li a{
		padding					: 0 15px;
	}
	.site-header .header-menu ul li ul{
		position				: absolute;
		visibility				: hidden;
		opacity					: 0;
		filter					: alpha(opacity=0);
		background-color		: #fff;
	}
	.site-header .header-menu ul li ul li{
		height					: 0;
		-webkit-transition		: height 200ms ease-in;
		-moz-transition			: height 200ms ease-in;
		-o-transition			: height 200ms ease-in;
		transition				: height 200ms ease-in;
	}
	.site-header .header-menu ul li ul li a{
		height					: 30px;
		line-height				: 30px;
		border-bottom			: 1px solid #FFF;
	}
	.site-header .header-menu ul li ul li ul{
		top						: 0;
		left					: 100%;
		border-top				: 1px solid #ebebeb;
		border-right			: 1px solid #ebebeb;
		border-bottom			: 1px solid #ebebeb;
	}
	.site-header .header-menu ul li ul li ul li a{
		border-left				: 1px solid #ebebeb;
	}
	.site-header .header-menu ul li ul li ul li:first-child a{
		border-color			: #FFF;
	}
	.site-header .header-menu ul li:hover > a{
		color					: #c5a35b;
	}
	.site-header .header-menu ul li:hover > ul{
		visibility				: visible;
		opacity					: 1;
		filter					: alpha(opacity=100);
	}
	.site-header .header-menu ul li:hover > ul > li{
		height					: 30px;
	}
	.site-header .header-menu > ul > li{
		float					: left;
	}
	.site-header .header-menu > ul > li > a{
		height					: 15px;
		line-height				: 18px;
	}
	.site-header .header-menu > ul > li > ul{
		top						: 15px;
		padding-top				: 21px;
	}
	.site-header .header-menu > ul > li > ul li:hover > a{
		border-bottom-color		: #ebebeb;
	}

}