/****************************** SECTION ORDER ONLINE OR CALL TO ORDER! ******************************/
#section-order{
	background: url('../img/asian-food.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	padding-top: 130px;
	padding-bottom: 130px;
}
#section-order .dropdown-toggle.form-control{
	margin-bottom: 0;
	border: 0 !important;
}
#section-order input:not([type="button"]):not([type="submit"]):not([type="reset"]),
#section-order input.form-control:not([type="button"]):not([type="submit"]):not([type="reset"]){
	margin-bottom: 0;
	border: 0 !important;
}
#section-order .special-start input#inputState,
#section-order .special-center input#inputCity,
#section-order .special-center input#inputCity[readonly]{ 
	background-image: url('data:image/svg+xml,<svg class="bi bi-chevron-down" width="16px" height="16px" fill="rgba(152,3,33)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" /></svg>');
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: center;
    background-size: 16px;
    padding: 11px 25px 11px 0;
    border-radius: 5px;
}
#section-order .special-start input#inputState:hover,
#section-order .special-center input#inputCity:hover{ cursor: pointer; } 
#section-order .special-start .dropdown-menu,
#section-order .special-start .dropdown-menu.show{
	width: 85%;
	text-align: center;
}
#section-order .special-center .dropdown-menu,
#section-order .special-center .dropdown-menu.show{ width: 90%; }
#section-order .special-center .dropdown-menu li#iniCity{ pointer-events: none !important; }
#section-order .special-start,
#section-order .special-center,
#section-order .special-end{
	background: #fff;
	width: 100%;
	padding: 0 0 0 15px;
}
#section-order .special-start{ border-radius: 50px 0 0 50px; }
#section-order .special-center{
	margin-left: -2px;
	border-radius: 0 5px 5px 0;
}
#section-order .special-end{
	padding: 0 25px 0 15px;
	border-radius: 5px 50px 50px 5px;
}

/****************************** SECTION BROWSE PARTNER HOTELS ******************************/
#section-browse{
	background: #D0D0D0;
	padding-top: 70px;
	padding-bottom: 70px;
}
.slider{
	width: 872px;
	margin: 20px auto 0 auto;
	text-align:center !important;
}
.slider *{ text-align: center !important;}
.slick-list{
	padding: 0 0 10px 0;
	max-height: 230px;
	margin: 0;
	max-width: 100%;
}

.card-item.slick-slide{
	background: #fff;
	height: 200px;
	margin: 0 20px;
	padding: 15px 10px;
	position: relative;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0 5px 5px 0 rgba(112,112,112,.35);
	transition: all ease-in-out .3s;
	opacity: 1;
}
.card-item.slick-slide .wrapper-img{
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow:hidden;
}
.card-item.slick-slide .wrapper-img img{
	max-width: 100%;
	max-height: 100%;
}
.card-item.slick-slide p{
	height: 70px;
    margin: 10px auto 0 auto;
	padding-top: 10px;
    display: table-cell;
    vertical-align: middle;
	font-size: 12px;
	font-family: "Montserrat-Bold";
    line-height: 13px;
	overflow: hidden;
}
.card-item.slick-slide p + p{
    min-width: 100%;
    height: 11px;
    margin: 5px auto 10px auto;
    padding-top: 0;
    display: block;
    font-size: 10px;
    font-family: "Montserrat-Regular";
    line-height: 11px;
}
.card-item.slick-slide input.btn.btn-outline-white{
	width: 100%;
	max-width: 100%;
	padding: 10px 0 0 0;
	font-family: "Montserrat-Bold";
	font-size: 12px;
	line-height: 1;
	border-radius: 0;
	color: #980321 !important;
}
.slick-prev,
.slick-prev:hover,
.slick-prev:focus,
.slick-next,
.slick-next:hover,
.slick-next:focus{
	background: #fff;
	background-repeat: no-repeat !important;
	background-position: center;
	width: contain;
	height: contain;
	padding: 25px;
	display: block;
	font-family: "Montserrat-Bold" !important;
	font-size: initial;
	line-height: 100%;
	content: "" !important;
	position: absolute;
	top: 50%;
	-webkit-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	transform: translate(0, -50%);
	border: none;
	border-top-color: currentcolor;
	border-right-color: currentcolor;
	border-bottom-color: currentcolor;
	border-left-color: currentcolor;
	border-radius: 100%;
	color: grey !important;
	opacity: 1 !important;
	cursor: pointer;
	outline: none;
}
.slick-prev{
	background-image: url('data:image/svg+xml,<svg class="bi bi-chevron-left" width="20" height="20" fill="rgba(152,3,33)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" /></svg>') !important;
	left: -50px;
}
.slick-next{
	background-image: url('data:image/svg+xml,<svg class="bi bi-chevron-right" width="20" height="20" fill="rgba(152,3,33)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" /></svg>') !important;
	right: -50px;
}
.slick-prev.disabled-arrow{
	background-image: url('data:image/svg+xml,<svg class="bi bi-chevron-left" width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" /></svg>') !important;
	content: "";
}
.slick-next.disabled-arrow{
	background-image: url('data:image/svg+xml,<svg class="bi bi-chevron-right" width="20" height="20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" /></svg>') !important;
	content: "";
}
.slick-prev::before,
.slick-next::before{ display: none; }
.slick-track{ width:30000px !important; }

/****************************** SECTION AREAS AND ROOM SERVICE ORDERS IN PROGRESS ******************************/
#section-service{ padding-top: 70px; }
#section-service .bg-wood {
	background: url('../img/bg-wood.png');
	background-size: cover;
	background-repeat: no-repeat;
	padding: 0;
	color: #fff;
}
#section-service .bg-wood label{ 
	display: block;
	font-family: "Montserrat-SemiBold"; 
	line-height: 1.1;
}
#section-service .bg-wood label+label{ margin-top: 5px; }
#section-service .bg-wood label:last-child{
	margin-top: 10px;
	font-family: "Montserrat-Regular";
}
#map,
#mapAlaska,
#mapHawaii{
	width: 100%;
	height: 500px;
	margin: 0 auto;
	padding: 0;
}
#map{ margin-top: -4.5rem; }
#mapAlaska,
#mapHawaii{  height: 200px; }
#plateImg.slider{
	width: 1000px;
	max-height: 150px;
	margin: 0 auto 0 auto !important;
	text-align: center !important;
	overflow: hidden;
}
#plateImg .slick-list{
	max-width: 100%;
	max-height: 150px;
	margin: 0 auto;
	padding: 0;
}
#plateImg .slick-track{ transform: translate3d(0px, 0px, 0px) !important; }
#plateImg .slick-prev.slick-arrow,
#plateImg .slick-next.slick-arrow{ display: none; }
#plateImg .item-order{	
	display: flex;
	align-items: center;
	justify-content: center;
}
#plateImg .item-order .img-order img{
	width: 100px;
	margin: 25px auto;
}
#plateImg .item-order .info-order{ padding-left: 10px; }
#plateImg .item-order .info-order label{
	text-align: left !important;
	font-size: 12px;
	line-height: 14px;
	white-space: pre-line !important;
}
#plateImg .item-order .info-order label:nth-child(2){
	font-size: 10px;
	font-family: "Montserrat-Regular";
	line-height: 12px;
}
#plateImg .slick-slide{
	width: 250px;
	padding: 0 10px;
	display: block !important;
}


/*-------------------- MOBILE (max-width:575.98px) --------------------*/
@media (max-width:575.98px) {
	/****************************** SECTION ORDER ONLINE OR CALL TO ORDER! ******************************/
	#section-order .special-start{ border-radius: 10px 0 0 10px; }
	#section-order .special-center{ border-radius: 0 10px 10px 0; }
	#section-order .special-end{ border-radius: 10px; }
	#section-order .special-start .dropdown-menu,
	#section-order .special-start .dropdown-menu.show{ width: 85%; }
	.span-error2{
		position: absolute;
		top: 5px;
		line-height: 1.1;
	}
	/****************************** SECTION BROWSE PARTNER HOTELS ******************************/
	.card-item.slick-slide{
		width: 142px !important;
		height: 190px;
		margin: 0 5px;
	}
	.card-item.slick-slide p{ min-width: 122px; }
	.card-item.slick-slide input.btn.btn-outline-white{ padding: 0; }
	.slick-prev,
	.slick-next{ display: none; }
	#carruoselListHot{ width:304px !important; }
	/****************************** SECTION AREAS AND ROOM SERVICE ORDERS IN PROGRESS ******************************/
	#section-service { padding-top: 0; }
	#map{
		height: 170px;
		margin-top: 0;
	}
	#mapAlaska,
	#mapHawaii{  height: 110px; }
	#plateImg.slider{ width: 320px; }
	#plateImg .slick-slide{ width: 320px; }
}


/*-------------------- MOBILE (min-width:576px) and (max-width:767.98px) --------------------*/

@media (min-width:576px) and (max-width:767.98px){
	/****************************** SECTION ORDER ONLINE OR CALL TO ORDER! ******************************/
	#section-order .special-start{ border-radius: 10px 0 0 10px; }
	#section-order .special-center{ border-radius: 0 10px 10px 0; }
	#section-order .special-end{ border-radius: 10px; }
	#section-order .special-start .dropdown-menu,
	#section-order .special-start .dropdown-menu.show,
	#section-order .special-center .dropdown-menu,
	#section-order .special-center.dropdown-menu.show{ width: 95%; }
	/****************************** SECTION BROWSE PARTNER HOTELS ******************************/
	.card-item.slick-slide{ width: 202px !important; }
	.card-item.slick-slide p{ min-width: 178px; }
	.card-item.slick-slide input.btn.btn-outline-white{ padding: 0; }
	.slick-prev,
	.slick-next{ display: none; }
	#carruoselListHot{ width: 484px !important; }
	/****************************** SECTION AREAS AND ROOM SERVICE ORDERS IN PROGRESS ******************************/
	#map{
		height: 170px;
		margin-top: 0;
	}
	#mapAlaska,
	#mapHawaii{ height: 110px; }
	#plateImg.slider{ width: 500px; }
	#plateImg .slick-slide{ width: 500px; }
}


/*-------------------- TABLET (min-width:768px) and (max-width:991.98px) --------------------*/

@media (min-width:768px) and (max-width:991.98px){
	/****************************** SECTION ORDER ONLINE OR CALL TO ORDER! ******************************/
	#section-order .special-start .dropdown-menu,
	#section-order .special-start .dropdown-menu.show{ width: 75%; }
	/****************************** SECTION BROWSE PARTNER HOTELS ******************************/
	.card-item.slick-slide{ width: 170px !important; }
	.card-item.slick-slide p{ min-width: 150px; }
	.card-item.slick-slide input.btn.btn-outline-white{ padding: 0; }
	.slick-prev,
	.slick-next{ display: none; }
	#carruoselListHot{ width: 629px !important; }
	/****************************** SECTION AREAS AND ROOM SERVICE ORDERS IN PROGRESS ******************************/
	#map{
		height: 340px;
		margin-top: 0;
	}
	#mapAlaska,
	#mapHawaii{ height: 150px; }
	#plateImg.slider{ width: 650px; }
	#plateImg .slick-slide{ width: 325px; }
}


/*-------------------- TABLET (min-width:992px) and (max-width:1199.98px) --------------------*/

@media (min-width:992px) and (max-width:1199.98px){
	/****************************** SECTION ORDER ONLINE OR CALL TO ORDER! ******************************/
	#section-order .special-start .dropdown-menu,
	#section-order .special-start .dropdown-menu.show{ width: 85%; }
	/****************************** SECTION BROWSE PARTNER HOTELS ******************************/
	.card-item.slick-slide{
		width: 222px !important;
		margin: 0 25px;
	}
	.card-item.slick-slide p{ min-width: 202px; }
	.slick-prev,
	.slick-next{ display: none; }
	#carruoselListHot{ width: 814px !important; }
	/****************************** SECTION AREAS AND ROOM SERVICE ORDERS IN PROGRESS ******************************/
	#map{
		height: 340px;
		margin-top: 0;
	}
	#mapAlaska,
	#mapHawaii{ height: 150px; }
	#plateImg.slider{ width: 850px; }
	#plateImg .slick-slide{ width: 425px; }
}


/*-------------------- DESKTOP (min-width:1200px) and (max-width:1399.98px) --------------------*/

@media (min-width:1200px) and (max-width:1399.98px){
	/****************************** SECTION BROWSE PARTNER HOTELS ******************************/
	#section-map.container{ padding: 0 15%;}
	.card-item.slick-slide{
		width: 148px !important;
		height: 210px;
		margin: 0 10px;
	}
	.card-item.slick-slide .wrapper-img{ margin-top: 20px; }
	.card-item.slick-slide p{
		min-width: 128px;
        height: 40px;
	}
	.card-item.slick-slide p + p{
        position: absolute;
        left: 0;
        bottom: 15px;
    }
	.card-item input.btn.btn-outline-white{
		padding: 10px 5px !important;
		display: none;
		border-radius: 50px !important;
	}
	.card-item.slick-slide:hover{
		background: #980321;
		transform: rotateY(360deg);
		transition: 2s;
		color: #fff;
	}
	.card-item.slick-slide:hover .wrapper-img{ margin-top: 0; }
	.card-item.slick-slide:hover p{ margin: 10px auto 5px auto; }
	.card-item.slick-slide:hover p + p{
        position: relative;
        left: auto;
        bottom: auto;
    }
	.card-item.slick-slide:hover input.btn.btn-outline-white{
		width: 80%;
        display: block;
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 15px;
        color: #fff !important;
	}
	.card-item.slick-slide input.btn.btn-outline-white:hover{
		background: #fff !important;
		color: #980321 !important;
	}
	#carruoselListHot{ width: 837px !important; }
	/****************************** SECTION AREAS AND ROOM SERVICE ORDERS IN PROGRESS ******************************/
	#plateImg.slider{ width: 900px; }
	#plateImg .slick-slide{ width: 450px; }
}


/*-------------------- DESKTOP FULL HD (min-width:1400px) --------------------*/

@media (min-width:1400px){
	/****************************** SECTION BROWSE PARTNER HOTELS ******************************/
	#section-map.container{ padding: 0 17%;}
	.card-item.slick-slide{
		height: 195px;
        margin: 0 10px;
	}
	.card-item.slick-slide .wrapper-img{ margin-top: 20px; }
	.card-item.slick-slide p{
		min-width: 135px;
        height: 40px;
	}
	.card-item.slick-slide p + p{
        position: absolute;
        left: 0;
        bottom: 15px;
    }
	.card-item input.btn.btn-outline-white{
		padding: 10px 5px !important;
		display: none;
		border-radius: 50px !important;
	}
	.card-item.slick-slide:hover{
		background: #980321;
		transform: rotateY(360deg);
		transition: 2s;
		color: #fff;
	}
	.card-item.slick-slide:hover .wrapper-img{ margin-top: 0; }
	.card-item.slick-slide:hover p + p{
		position: relative;
		left: auto;
		bottom: auto;
	}
	.card-item.slick-slide:hover input.btn.btn-outline-white{
		width: 80%;
        display: block;
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 15px;
        color: #fff !important;
	}
	.card-item.slick-slide input.btn.btn-outline-white:hover{
		background: #fff !important;
		color: #980321 !important;
	}
}


/*-------------------- DESKTOP FULL HD (min-width:1900px) --------------------*/

@media (min-width:1921px){
	/****************************** SECTION BROWSE PARTNER HOTELS ******************************/
	.card-item.slick-slide{ margin: 0 25px; }
	.card-item.slick-slide:hover p{ margin: 15px auto 10px auto; }
	.card-item.slick-slide p{ min-width: 195px; }
	#carruoselListHot{ width: 100% !important; }
	/****************************** SECTION AREAS AND ROOM SERVICE ORDERS IN PROGRESS ******************************/
	#plateImg.slider{ width: 1300px; }
	#plateImg .slick-slide{ width: 325px; }
}


/*-------------------- LANSCAPE --------------------*/

@media (orientation: landscape){
	.slick-track{ max-height: 200px; }
}