﻿@charset "utf-8";
/* CSS Document */
.searchbg {padding:0 0 20px;}
.wrap-1250 {max-width:1250px; margin:0 auto; display:flex; flex-direction:column;}
.ourCruiseTitle,
.cruisePartner {flex:0 0 100%;}
.bkBtn {display:block;}
.cruise-search-result {width:100%; float:left; margin:0; padding:20px 0;}
.cruise-search-result .left-pnl,
.cruise-search-result .right-pnl {width:75%; float:left; margin:0; padding:0;}
.cruise-search-result .left-pnl {width:23%; margin:0 2% 0 0;}

.cruise-search-result .toggle-filter {display:none;}

.cruise-search-result .left-pnl .filterHead {width:100%; float:left; padding:0 0 20px; font-size:20px; font-weight:700;}
.cruise-search-result .left-pnl .filterHead i.fa-filter {font-size:20px;}
.cruise-search-result .left-pnl .filterHead span {float:right;}
.cruise-search-result .left-pnl .filterHead span a.reset {font-size:15px; font-weight:normal; text-decoration:none;}

.filter-bx,
.filter-bx .box,
.filter-bx .box.arrange-by-flt ul {width:100%; float:left;}
.filter-bx .box {padding-bottom:10px; margin-bottom:10px; border-bottom:#d4d4d4 1px solid;}
.filter-bx .box h4 {color:#000; font-weight:700; text-align:left; padding-bottom:10px; font-size:1.6em;}
.filter-bx .box h4 span {float:right; padding-right:5px;}
.filter-bx .box h4 span i.arrow {font-size:1.4em;}

.filter-bx .box.arrange-by-flt ul li {width:100%; float:left; margin:0 0 2px; cursor:pointer;}
.filter-bx .box.arrange-by-flt ul li a {width:100%; float:left; padding:10px; background:#f2f2f2; color:#333; font-weight:700;}
.filter-bx .box.arrange-by-flt ul li a:hover,
.filter-bx .box.arrange-by-flt ul li a.active,
.filter-bx .box.arrange-by-flt ul li a.active:hover {background:#0062ad; color:#ffffff;}

.filter-bx .box .full {width:100%; float:left; padding-bottom:10px;}

.filter-bx .box ul {width:100%; float:left;}
.filter-bx .box ul li {width:100%; float:left; position:relative; font-size:1.4em;; line-height:18px; color:#333;}

.filter-bx .box ul li b.bOnly {vertical-align:super; opacity:0;}
.filter-bx .box ul li:hover b.bOnly {opacity:1;}
.filter-bx .box ul li input[type="checkbox"],
.filter-bx .box ul li input[type=radio] {position:absolute; left:0; top:7px; opacity:0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

.filter-bx .box ul.departPort {min-height:100px; max-height:300px; overflow:hidden; overflow-y:scroll;}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 5px;
  left: 0;
  height:16px;
  width:16px;
  background-color:#fff;
  border:#d9d9d9 1px solid;
}

/* On mouse-over, add a grey background color */
.filter-bx .box ul li:hover input ~ .checkmark {
  background-color:#fff;
  border:#d9d9d9 1px solid;
}

/* When the checkbox is checked, add a blue background */
.filter-bx .box ul li input:checked ~ .checkmark {
  background-color: #0062ad;
  border:#0062ad 1px solid;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.filter-bx .box ul li input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.filter-bx .box ul li .checkmark:after {
  left:4px;
  top:0px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.filter-bx .box ul li label {display:inline-block; padding:5px 10px 0px 20px; max-width:192px; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; position:relative;}

.grid-header {width:100%; float:left; padding:0 0 10px;}
.grid-header label {font-size:20px; color:#000000; font-weight:700; float:left;}
.grid-header label span {color:#ff561b; font-size:14px;}

.grid-header .r-column {width:auto; float:right;}
.grid-header .r-column .sorting-by-price {float:left;}
.grid-header .r-column .sorting-by-price h5{ font-weight:700; text-align:right; padding:0 0 10px 0; display:block;}
.grid-header .r-column .sorting-by-price .col-bx {float:left; margin-left:5px; color:#1a1a1a; font-size:14px; line-height:42px;}
.grid-header .r-column .sorting-by-price .col-bx select.pricefilter {border:#c7c7c7 1px solid; color:#808080; font-size:14px; padding:10px;}

.cruise-listing-bx {width:100%; float:left; margin:0; padding:0;}
.listing-cruise {width:100%; float:left; background:#fff; border:#cccccc 1px solid; padding:0px; margin:0 0 20px; border-radius:10px;}
.listing-cruise .lbox {max-width:280px; width:100%; height:auto; float:left; margin:0; padding:0;}
.listing-cruise .lbox .imgBx,
.listing-cruise .cruiseDetails .fullBx,
.listing-cruise .cruiseDetails .fullBx .tBox,
.cruiseDetails .fullBx .tBox .lcolumn .itinerayBx,
.cruiseDetails .fullBx .tBox .lcolumn .itinerayBx .titleBx,
.cruiseDetails .fullBx .tBox .rcolumn .priceGridBx {width:100%; float:left;}

.listing-cruise .cruiseDetails .fullBx .tBox {padding:0 0 8px;}

.listing-cruise .lbox .imgBx img {width:97%; height:auto; float:left; cursor:pointer; border-radius:10px; margin:10px; border:#969a9f 1px solid;}
.listing-cruise .cruiseDetails {width:calc(100% - 280px); float:left; padding:10px 10px 0;}

.cruiseDetails .fullBx .tBox .lcol,
.cruiseDetails .fullBx .tBox .rcol,
.cruiseDetails .fullBx .tBox .lcolumn .itinerayBx .cabin-type ul li {float:left;}

.cruiseDetails .fullBx .tBox .lcol {width:82%;}
.cruiseDetails .fullBx .tBox .rcol {width:18%;}

.cruiseDetails .fullBx .tBox .lcol h3 {font-size:2em; font-weight:700; padding:0 0 8px;}
.cruiseDetails .fullBx .tBox .lcol h3 a {color:#000; text-decoration:none;}
.cruiseDetails .fullBx .tBox .lcol .travel-period {display:block; font-size:1.4em;}
.cruiseDetails .fullBx .tBox .lcol .travel-period span.dateBx {padding-right:5px;}
.cruiseDetails .fullBx .tBox .lcol .travel-period span.nightsBx {padding-left:5px;}

.cruiseDetails .fullBx .tBox .rcol .cruiseLogoBx {float:right; display:none;}
.cruiseDetails .fullBx .tBox .rcol .cruiseLogoBx img {width:75px;}

.cruiseDetails .fullBx .tBox .cruiseName {width:100%; float:left; font-size:1.6em;}
.cruiseDetails .fullBx .tBox .cruiseName img {float:left; width:40px; padding-right:5px;}

.cruiseDetails .fullBx .tBox .lcolumn,
.cruiseDetails .fullBx .tBox .rcolumn {float:left;}

.cruiseDetails .fullBx .tBox .lcolumn {width:70%; margin:0 2% 0 0;}
.cruiseDetails .fullBx .tBox .rcolumn {width:28%;}


.cruiseDetails .fullBx .tBox .lcolumn .itinerayBx p {font-size:1.4em; padding:0 0 8px; line-height:1.4em;}
.cruiseDetails .fullBx .tBox .lcolumn .itinerayBx .titleBx {font-size:18px; font-weight:700; padding:0 0 8px;}

.cruiseDetails .fullBx .tBox .lcolumn .itinerayBx .cabin-type ul {list-style-type:none; display:flex; box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px; padding:8px;}
.cruiseDetails .fullBx .tBox .lcolumn .itinerayBx .cabin-type ul li {width:25%;}
.cruiseDetails .fullBx .tBox .lcolumn .itinerayBx .cabin-type ul li span.title-cabin,
.cruiseDetails .fullBx .tBox .lcolumn .itinerayBx .cabin-type ul li span.cabin-price {display:block; position:relative; padding:3px; text-align:center;}
.cruiseDetails .fullBx .tBox .lcolumn .itinerayBx .cabin-type ul li span.title-cabin:after,
.cruiseDetails .fullBx .tBox .lcolumn .itinerayBx .cabin-type ul li span.cabin-price:after {content:""; width:1px; background:#ccc; height:80%; position:absolute; right:-2px; top:0; z-index:1;}

.cruiseDetails .fullBx .tBox .lcolumn .itinerayBx .cabin-type ul li span.title-cabin:before,
.cruiseDetails .fullBx .tBox .lcolumn .itinerayBx .cabin-type ul li span.cabin-price:before {content:""; width:90%; background:#ccc; height:1px; position:absolute; left:5px; bottom:0; z-index:1;}



.listing-cruise .cabin-typeBx {width:100%; display:block; overflow:hidden; /*box-shadow:rgba(0, 0, 0, 0.24) 0px 3px 8px;*/ padding:8px 8px 20px;}
.listing-cruise .cabin-typeBx .headBx,
.listing-cruise .cabin-typeBx .priceBx {display:flex; width:100%; border-collapse:collapse;}
.listing-cruise .cabin-typeBx .headBx .colBx,
.listing-cruise .cabin-typeBx .priceBx .colBx {width:15%; padding:5px; border:#ccc 1px solid; text-align:center; font-size:1.4em; font-weight:700;}
.listing-cruise .cabin-typeBx .headBx .colBx {background:#e5e5e5;}
.listing-cruise .cabin-typeBx .priceBx .colBx {font-weight:400; font-size:1.4em;}

.listing-cruise .cabin-typeBx .headBx .colBx:first-child {border-radius:10px 0 0 0;}
.listing-cruise .cabin-typeBx .headBx .colBx:last-child {border-radius:0 10px 0 0;}

.listing-cruise .cabin-typeBx .priceBx .colBx:first-child {border-radius:0 0 0 10px;}
.listing-cruise .cabin-typeBx .priceBx .colBx:last-child {border-radius:0 0 10px 0;}

.listing-cruise .cabin-typeBx .priceBx .colBx span {padding:0 3px 0 0;}
.listing-cruise .cabin-typeBx .priceBx .colBx span:after {content:"*"; vertical-align:super; font-size:15px; display:none;}

.cruiseDetails .fullBx .tBox .rcolumn .priceGridBx .floor {display:block; text-align:center; font-size:14px; text-transform:uppercase; font-weight:700;}
.cruiseDetails .fullBx .tBox .rcolumn .priceGridBx .priceBx,
.cruiseDetails .fullBx .tBox .rcolumn .priceGridBx .btnbx {display:block; text-align:center;}

.cruiseDetails .fullBx .tBox .rcolumn .priceGridBx .floor,
.cruiseDetails .fullBx .tBox .rcolumn .priceGridBx .btnbx {padding:0 0 8px;}

.cruiseDetails .fullBx .tBox .rcolumn .priceGridBx .priceBx {padding:0 0 20px; color:#fe492b; font-size:26px; font-weight:700;}
.cruiseDetails .fullBx .tBox .rcolumn .priceGridBx .priceBx span:after {content:"*"; vertical-align:super; font-size:18px;}

.cruiseDetails .fullBx .tBox .rcolumn .priceGridBx .btnbx input.viewDetials,
.cruiseDetails .fullBx .tBox .rcolumn .priceGridBx .btnbx input.enquire {border-radius:8px;}

.cruiseDetails .fullBx .tBox .rcolumn .priceGridBx .btnbx input.viewDetials {background:#ffffff; color:#fe492b; border:1px solid #fe492b; font-size:13px; display:inline-block; padding:8px 20px; cursor:pointer;}

.cruiseDetails .fullBx .tBox .rcolumn .priceGridBx .btnbx input.enquire {background:#fe492b; color:#ffffff; border:1px solid #fe492b; font-size:13px; display:inline-block; padding:8px 18px; cursor:pointer;}

@media screen and (max-width:1024px){
	.listing-cruise .lbox {width:40%;}
	.listing-cruise .cruiseDetails {width:60%;}
	.cruiseDetails .fullBx .tBox .rcolumn .priceGridBx .priceBx {font-size:24px;}
	.cruiseDetails .fullBx .tBox .lcol h3 {font-size:2em;}
	.cruiseDetails .fullBx .tBox .lcolumn .itinerayBx p, {font-size:13px;}
	.cruiseDetails .fullBx .tBox .lcolumn .itinerayBx .cabin-type ul li span.title-cabin, 
	.cruiseDetails .fullBx .tBox .lcolumn .itinerayBx .cabin-type ul li span.cabin-price {font-size:13px;}
	.filter-bx .box h4 {font-size:1.2em;}
}
@media screen and (max-width:900px){

.cruise-search-result .left-pnl {width:100%; margin:0 0 2%;}	
.cruise-search-result .right-pnl {width:100%;}
	.grid-header, .cruise-search-result .left-pnl .filterHead{ padding: 10px 20px;}
.filter-bx {display:none; padding: 0 20px;}

.toggle-filter {width:100%; display:block; overflow:hidden; padding:10px; font-size:15px; text-align:center; background:#f2f2f2; color:#000000; font-weight:700; border-radius:15px; position:static; right:0; margin:0 0 20px;}
.toggle-filter span {float:right; padding-right:5px; padding-top:5px;}
.toggle-filter span i.arrow {font-size:13px;}

.listing-cruise .lbox .imgBx img {width:95%;}
.listing-cruise .lbox,
.listing-cruise .cruiseDetails {width:100%;}
.listing-cruise .lbox {max-width:100%;}

}
@media screen and (max-width:767px){
		.listing-cruise .cruiseDetails .fullBx .tBox, .listing-cruise .cabin-typeBx .headBx, .listing-cruise .cabin-typeBx .priceBx{ width:100%; display: flex; flex-wrap: wrap;}
	.cruiseDetails .fullBx .tBox .lcolumn, .cruiseDetails .fullBx .tBox .rcolumn{ flex:0 0 100%;}
	.listing-cruise .cabin-typeBx .headBx,  .listing-cruise .cabin-typeBx .priceBx{ justify-content: center;} 
	
  .listing-cruise .cabin-typeBx{display: flex; flex-wrap: wrap; justify-content: center;}
  .listing-cruise .cabin-typeBx .headBx, .listing-cruise .cabin-typeBx .priceBx{flex:0 0 50%;}
  .listing-cruise .cabin-typeBx .headBx .colBx, .listing-cruise .cabin-typeBx .priceBx .colBx{border-radius: 0 !important; flex:0 0 100%;}

	
}
@media screen and (max-width:480px){

}