/*===========================================*/
/*	DESKTOP LAYOUT 
/*===========================================*/


@media (min-width: 1200px) {
	

}
@media (min-width: 992px) and (max-width: 1199px) {
	.head-form-back button{
		display: none;
	}
	.product-list .item{
		width: 30%;
	}
}

@media (min-width: 992px) {
		
}

/*===========================================*/
/*	MOBILE & TABLET COMMON
/*===========================================*/
@media (min-width: 200px) and (max-width: 991px) {
	.phone-span .phone-list p.title-p{
		position: absolute;
		left: 0;
	}
	.phone-span .phone-list ul{
		margin-top: 40px;
	}
	.head-form-back button{
		display: none;
	}
	.grid figure{
		min-width: 200px;
	}
	figure.effect-oscar:hover figcaption::before, figure.effect-oscar:hover p{
		display: none;
	}
	#product-list{
		margin-top: 30px;
	}
	.head-image-collection{
		display: none;
	}
	.box-modal, .arcticmodal-container_i{
		width: 100%;
		max-width: 500px;
	}
	.contact div{
	    margin-bottom: 6px !important;
	}
	#form-best{
		padding-top: 45px;
    	padding-bottom: 45px;
	}
}


/*===========================================*/
/*	TABLET
/*===========================================*/
@media (min-width: 768px) and (max-width: 991px) {
	.product-list .item {
	    width: 45%;
	}
	.page-branch .team-section-2{
		padding-bottom: 80px !important;
		padding-top: 80px !important;
	}
}


/*===========================================*/
/*	MOBILE
/*===========================================*/
@media (min-width: 200px) and (max-width: 767px) {
	.email-span-2{
		display: block;
  		margin-top: 20px;
  		margin-bottom: 15px;
	}
	.phone-span .phone-list{
		z-index: 50;
	    width: 100%;
	    left: 0;
	    border-radius: 0;
	}
	.phone-span .phone-list img{
		left: 50%;
    	margin-left: -10px;
	}
	.product-list .item{
		margin: 0;
		width: 100%;
	}
	figure.effect-oscar h2{
		font-size: 25px;
	}
	.page-branch .team-section-2{
		padding-bottom: 50px !important;
		padding-top: 50px !important;
	}
	.box-modal{
		width: 100%;
	}
	.ModalProduct h2{
		font-size: 25px;
	}

	.order-modal h1{
		font-size: 20px;
	}

	.order-modal h2{
		font-size: 15px;
	}
	.product-box3 .img img{
		width: 100%;
    	max-width: 250px;
	}

	.product-box3 .price{
		display: block;
    	margin-bottom: 10px;
	}

	.head-image-collection{
		display: none !important;
	}
	
}
@media (min-width: 600px) and (max-width: 767px) {
	.product-list .item{
		margin: 10px;
  	  	width: 40%;
	}
}
@media (min-width: 480px) and (max-width: 599px) {
}

@media (min-width: 200px) and (max-width: 400px) {
	figure.effect-oscar h2{
		position: absolute;
	    left: 0;
	    top: 0;
	    width: 100%;
		font-size: 25px;
	}
	.intro-section-28 .content>.title{
		font-size: 25px !important;
	}

	.title.mini-desc{
		font-size: 22px !important;
	}

	.intro-section-28 .carousel-widget .info-box .img{
		display: none;
	}
	.intro-section-28 .carousel-widget .info-box .info{
		margin: 0;
	}
	.intro-section-28 .light.btn-line.disabled, .light.btn-line[disabled], .light.btn-line{
		font-size: 13px;
	}
	.product-box1 .info{
		height: inherit;
	}
	.product-box3 .btn{
		display: block;
	    margin: auto;
	    margin-bottom: 7px;
	    max-width: 70%;
	}
	.feedback-box5 .person{
		float: none;
	}
	.feedback-box5 .feedback{
		margin: 0;
    	margin-top: 10px;
	}
	.title {
    	font-size: 25px!important;
	}
	img.head-product{
		max-width: 100%;
	}
}
@media (min-width: 200px) and (max-width: 310px) {
	.phone-span .phone-list ul li{
		width: 100%;
	}
}