/*------------------------------------
	[Table of contents]
	1. Body
	2. Header / #header
	3. Navigation / #navbar
	4. Content / #content
	5. Sidebar / #sidebar
	6. Search / #search
	7. Footer / #footer
	
--------------------------------------*/
@import "bootstrap/mixin-header-v3";
@import "bootstrap/mixin-back-top";
@import "bootstrap/mixin-style-search";
@media (max-width: 1399px){
	.banner{
		.title-banner{top: 22%;left: 30%;}
	}
}
@media (max-width: 1199px){
	.banner{
		.title-banner{top: 18%;left: 25%;}
	}
	.img-link{
		h2{font-size: 14px;}
	}
}
@media (max-width: 991px){
	.banner{
		padding-bottom: 30px;
		.title-banner{top: 14%;left: 18%;}
	}
	.mobile-menu{right: 2px;}
	header{
		.icon-menu{
		padding: 16px 70px 0 25px;
		&::before{right: 86px;    top: 20px;left: unset;}
		}
	}
	
	.img-link{
		padding-bottom: 30px;
		.img-color-3{margin-top: 30px;}
	}
	
	.message{
		.message-contact{padding-top: 30px;
			form{
				input{width: 100%;}
			}
		}
	}
	.info-footer{
		.social{padding-top: 20px;}
	}
	footer{
		span{padding-top: 34px;
			&.engo{padding-top: 0;}
		}
	}
}
@media (max-width: 736px){
	header{
		.icon-menu{
		padding: 10px 70px 0 25px;
		&::before{right: 85px;}
		}
	}
	.banner{
		.title-banner{top: 14%;left: 15%;}
	}
	.img-link{
		.img-color-1{
			margin-bottom: 30px;
		}
	}
	footer{
		.logo-footer{
			text-align: center;
		}
		.gmail-footer{
			text-align: center;
		}
	}
}
@media (max-width: 667px){
	.banner{
		.title-banner{top: 14%;left: 11%;}
	}
}
@media (max-width: 568px){
	.banner{
		.title-banner{top: 4%;left: 4%;}
	}
}
@media (max-width: 567px){
	.col-xs-6{
		width: 100%;
	}
	.mobile-menu{right: 0;}
	.banner{
		.title-banner{top: 0;left: 0;
			h1{font-size: 30px;}
		}
	}
}
@media (max-width: 375px){
	header{
		.icon-menu{
		&::before{right: 70px;}
		}
	}
}
@media (max-width: 320px){
	
	.banner{
		.title-banner{
			p{
				padding: 0 20px;
    			overflow: hidden;
   			 	display: -webkit-box;
    			-webkit-line-clamp: 2;
    			-webkit-box-orient: vertical;
			}
		}
	}
}