@charset "UTF-8";

#queryModuleBackground{
    background-repeat: no-repeat;
    background-position: top;
    background-position: center;
    background-size: cover;
    padding-top: 3%;
    padding-bottom: 3%;
}

#queryModuleBackground2{
    background-repeat: no-repeat;
    background-position: top;
    background-position: center;
    background-size: cover;
}

#queryModule{
    max-width: 680px;
	background: white;
	border-color: #292b2c;
	box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.08);
	width:375px;
	border-radius: 0px 0px 10px 0px;
	z-index:3;
}

#queryModuleRight{
	 max-width: 680px;
	background: white;
	border-color: #292b2c;
	box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.08);
	width:375px;
	border-radius: 10px;
	z-index:3;
}
		

#queryModule2{
	margin-left:100px;
    max-width: 680px;
	background: rgba(30, 30, 30, 0.8);
	border-color: #292b2c;
	box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.08);
	width:375px;
	border-radius: 10px 10px 10px 10px;
	z-index:3;
}

#queryModuleLabel2{
	color:white;
	font-weight: bold;
}

.innerContainer{
	width:100%;
	background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(0,0,0.2,.5));
	padding-top: 3%;
    padding-bottom: 3%;
    max-height: 580px;
}

#queryModule.withTabs{
	border-radius: 0px 0px 10px 0px;
}

.hpDestinationDiv{
	width:100%;
}

.hpOccupancyDiv{
	width:148px !important;
	background-color: white !important;
	color: #495057 !important;
}

.hpOccupancyDiv .btn{
	color: #495057 !important;
}

.agePicker .btn{
	width:60px !important;
}

.hpQueryModuleLabel{
	padding-top:6px;
}


#qmContainer, #qmContainerCenter, #qmContainercenter, 
#qmContainerright, #qmContainerright1, #qmContainercenter1,
#qmContainerRight, #qmContainerRight1, #qmContainerCenter1{

	background: rgba(30, 30, 30, 0.8);
	margin: auto;
	border-radius: 10px;
	max-width:820px;
	overflow:hidden;
}

#qmContainerleft, #qmContainerleft1,
#qmContainerLeft, #qmContainerLeft1{
	background: rgba(30, 30, 30, 0.8);
	margin-left: 1em;
	border-radius: 10px;
	max-width:820px;
	overflow:hidden;
}

#qmContainerleft2,
#qmContainerLeft2{
	margin-left: 1em;
	border-radius: 10px;
	max-width:400px;
	overflow:hidden;
}

#qmContainerright2,
#qmContainerRight2 {
    margin-right: 1em;
}

.qmContent2{
	display:none;
}

.queryModule{
	display: block;
	padding: 1em;
	margin-left: auto;
}

.queryModulecenter1,
.queryModuleCenter1{
	display: block;
	padding: 0.5em 1em 1em 1em;
	margin-left: auto;
	
}

.queryModuleright2,
.queryModuleRight2{
	display: block;
	padding: 0.5em 1em 1em 1em;
	margin-left: auto;
	border-radius:10px !important;
}

#qmContainercenter2,
#qmContainerCenter2{
	min-height:50%;
}
#qmContainerCenter2 #qmContent{
	display: none !important;
}

#qmContainercenter2 #queryModule,
#qmContainerCenter2 #queryModule{
	    border-radius: 10px 10px 10px 10px;
	    margin-right: auto;
	    min-height:50%;
}


#qmContainerleft2 #qmContent,
#qmContainerLeft2 #qmContent{
	display: none !important;
}

#qmContainerleft2 #queryModule,
#qmContainerLeft2 #queryModule{
	    border-radius: 10px 10px 10px 10px;
}

#qmContainer2{
	margin: auto;
	border-radius: 10px;
	max-width:1020px;
}

#qmContent{
	color:white;
	padding: 0px;
	width: calc(100% - 375px);
	z-index:3;
}

.qmHeadline{
	font-size:20px;
	font-weight:500;
	padding: 10px 10px 0px 20px;
}

.qmHeadline2{
	font-size: 42px;
	font-weight:bold;
	padding:20px 10px 0px 20px;
	text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3);
}

.qmSubHeadline{
	font-size:20px;
	clear:both;
	padding:10px 20px 0px 20px;
}

.qmPillar{
	display:flex;
	width:100%;
	margin-right: 10px;
    font-size: 16px;
    
}

.qmPillar i{
	margin-right:5px;
}

.qmPillars{
	padding:10px 20px 0px 20px;
}
.qmButton{
	font-size:22px !important;
	min-width:200px;
	height: 46px;	
}

.qmH3{
	font-size:26px;
	font-weight:500;	
}

.qmArrows{
	color: grey;
    position: relative;
    top: -5px;
}

.hotelCount{
	color: grey;
}

#childAgeContainer{
}

.merchIcon{
	float:left;
	padding-top:2px;

}

.merchText{
	float: left;
    width: calc(100% - 26px);
}    

.childLabel{
	margin-top:6px;
	margin-right:6px;	
	float:left;
	width: 100px !important;
}

.agePicker{
	float:left;
	width: 60px !important;
}


.cardCashbackBadge{
	height: fit-content;
	margin-top: 11px;
}

.priceMed{
	font-size:18px;
	float:right;
	padding-top: 6px;
}

.perNightMed{
	font-size:18px;
	float:right;
}

.merchandisingHeadline{
	font-size:24px;
}

.merchandisingSubHeadline{
	font-size:18px;	
    text-align: center;
    font-weight: 700;
}

.helperHeadlineContainer{
	background-color:#F0F3FA;
	
}

.helperHeroBottom{
	height:160px;
}

.loginHelperImage{
	top: -80px;
    position: relative;
    height: 200px;
}

.loginHelperImage img{
	border-radius: 20px;
	max-width: 800px;
    width: 100%;   
    object-fit: cover;
    height: 300px;
}

.loginHelpIcon{
	border-radius:0px !important;
}

.loginHelperHeadline{
	font-size:24px;
	font-weight:bolder;
	
}

.loginHelperSubHeadline{
	font-size:16px;
	color:grey;
	max-width: 800px;
}

.strikeThroughPriceTopHotels{
	color:gray;
	text-decoration: line-through;
	margin-top: 7px;
}

.topSearchContainer2{
    color: white;
    font-weight: bold;
    z-index: 2;
    height: 100%;
    width: 100%;
    padding-top: 120px;
    position: absolute;
}

.carouselCard4 a{	
    text-decoration: none;
}

.datepicker-dropdown{
	padding:1em !important;
}

.date-highlight {
   background: #ced4da;
   color: #ffffff;
}

.cardLocation{
	font-weight: normal;
}

.howItWorksElementContainer{
	width:400px;
}

.howItWorksTemplate2{
	max-width: 1000px;
	width: 100%;
    margin: auto;
    display:flex;
    margin-top: 1em;
}

.jloMerchModule{
	max-width: 760px;
    width: 100%;
    max-height: 430px;
    height: 100%;
    margin: auto;
    display: flex;
    margin-top: 1em;
    padding-bottom: 60px;
}

.hiwTextSection{
	width: 50%;
	background-color:#FBF5EB;
	display: flex;
  	justify-content: center;
  	align-content: center;
  	flex-direction: column;
  	padding: 2em;
}

.hiwImageSection{
	width: 50%;
}

.merchandisingHeadline3{
	font-size:22px;
	align-items:center;
}
.hiwImageSection img{
	object-fit: cover;
    width: 100% !important;
    height: 100%;
}

.merchandisingHeadline2{
	color:#C98A6B;
	font-size:32px;
}

.jloMerchTextSection{
	width: 50%;
	background-color:#F3E3E3;
	display: flex;
  	justify-content: center;
  	align-content: center;
  	flex-direction: column;
  	padding: 1em;
  	text-align: center;
}

.jloMerchImgSection{
	width: 50%;
}

.hpMerchModuleJloText{
	font-size:16px;
}

.jloMerchImgSection img{
	object-fit: cover;
    width: 100% !important;
    height: 100%;
}

.hiwCopy2{
	font-size:16px;
}

#parnerNavbarImg img{
	max-width:242px;
}

@media only screen and (max-width: 768px) {
	
	#qmContainerCenter2 {
	    min-height: auto;
	}
	.hiwTextSection{
		width:100%;  
		text-align: center;
	}
	
	.hiwImageSection{
		display:none;
	}
	
	.loginHelperImage{
		top: -30px;
	    position: relative;
	    height: 200px;
	}
	
	
	.loginHelperImage img{
		 height: 274px;
	}
	
	
	.hpTypeAheadModalClass{
		width:342px;
	}

	#qmContent{
		color:white;
		width: 100%;
	}
	
	#queryModule{
		width: 100%;
		max-width: 100%;
    	border-radius: 0px 0px 10px 10px;
    	z-index:3;
	}
	
	#queryModuleRight{
		width: 100%;
		max-width: 100%;
    	border-radius: 10px;
    	z-index:3;
	}
	
	.hpTypeAheadModalClass{
		min-width:inherit;
	}
	
	.qmHeadline{
		font-size:20px;
		font-weight:500;
	}
	
	.hpTypeAheadModalClass{
		width: calc( 100% - 62px );
	}
	
	.howItWorksElementContainer{
		width:100%;
	}
	
	.containerHiddenBackground{
		background:none !important;
		padding: 0px !important;
	}
	
	.qmContainerHiddenBackground{
		margin-top: 1em !important;
	}
	
	.qmHeadline2{
		font-size: 26px;
	}
		
}