/* CSS Document */

main h4 { font-size: 14px; color: #1E3A74; text-transform: uppercase; letter-spacing: 0.08em; text-align: center; }
main h2 { font-size: 40px; color: #1E3A74; letter-spacing: -0.005em; margin-bottom: 50px; }

#resorts-section {  }
#resorts-row { width: 1280px; max-width: 95%; height: 690px; max-height: 54vw; padding-bottom: 40px; margin: 0 auto; }
#resorts-row .col.primary { height: 100%; }
#resorts-row .col.primary .resort { height: 100%; position: relative; background-size: cover; background-position: center; border-radius: 12px; cursor: pointer; }
#resorts-row .col.primary .resort-details { background: #fff; position: absolute; bottom: 0; left: 0; margin: 8px; width: calc(100% - 16px); border-radius: 8px; padding: 16px 20px;  }
#resorts-row .col.primary .resort-details .resort-name { font-size: 20px; font-weight: 450; }
#resorts-row .col.primary .resort-details .resort-location { font-size: 14px; font-weight: 300; }

#resorts-row .col.secondary .resort { height: calc(50% - 8px); width: 100%; background: #fff; padding: 8px; border-radius: 16px; box-shadow: 0px 10px 40px 0px #0000000D; cursor: pointer; }
#resorts-row .col.secondary .resort:first-child { margin-bottom: 16px; }
#resorts-row .col.secondary .resort .resort-image { width: 100%; height: calc(100% - 52px); background-size: cover; background-position: center; border-radius: 8px; }
#resorts-row .col.secondary .resort .resort-details { padding-top: 8px; height: 52px; display: table-cell; vertical-align: middle; }
#resorts-row .col.secondary .resort .resort-name { font-size: 14px; line-height: 1.1; margin-bottom: 6px; }
#resorts-row .col.secondary .resort .resort-location { font-size: 12px; line-height: 1.1; font-weight: 300; }

@media ( max-width: 767px ) {
	#resorts-row { height: auto; max-height: none; }
	#resorts-row .col.primary { height: auto; margin-bottom: 16px; }
	#resorts-row .col.primary .resort { height: 50vw; }
	#resorts-row .col.secondary .resort .resort-image { height: 25vw; }
}
@media ( max-width: 575px ) {
	#resorts-row .col.secondary .resort { height: 50vw; }
	#resorts-row .col.secondary .resort .resort-image { height: calc(100% - 50px); }
}


#cruises-section { margin-top: 100px; }
#cruises-row { width: 1280px; max-width: 95%; height: 690px; max-height: 54vw; padding-bottom: 40px; margin: 0 auto; }
#cruises-row .col.primary { height: 100%; }
#cruises-row .col.primary .cruise { height: 100%; position: relative; background-size: cover; background-position: center; border-radius: 12px; cursor: pointer; }
#cruises-row .col.primary .cruise-details { background: #fff; position: absolute; bottom: 0; left: 0; margin: 8px; width: calc(100% - 16px); border-radius: 8px; padding: 10px 20px;  }
#cruises-row .col.primary .cruise-details .cruise-name { font-size: 20px; font-weight: 450; }

#cruises-row .col.secondary .cruise { height: calc(50% - 8px); width: 100%; background: #fff; padding: 8px; border-radius: 16px; box-shadow: 0px 10px 40px 0px #0000000D; cursor: pointer; }
#cruises-row .col.secondary .cruise:first-child { margin-bottom: 16px; }
#cruises-row .col.secondary .cruise .cruise-image { width: 100%; height: calc(100% - 52px); background-size: cover; background-position: center; border-radius: 8px; }
#cruises-row .col.secondary .cruise .cruise-details { padding-top: 8px; height: 30px; display: table-cell; vertical-align: middle; }
#cruises-row .col.secondary .cruise .cruise-name { font-size: 14px; line-height: 1.1; }
#cruises-row .col.secondary .cruise .cruise-location { font-size: 12px; line-height: 1.1; font-weight: 300; }

@media ( max-width: 767px ) {
	#cruises-row { height: auto; max-height: none; }
	#cruises-row .col.primary { height: auto; margin-bottom: 16px; }
	#cruises-row .col.primary .cruise { height: 50vw; }
	#cruises-row .col.secondary .cruise .cruise-image { height: 25vw; }
}
@media ( max-width: 575px ) {
	#cruises-row .col.secondary .cruise { height: 50vw; }
	#cruises-row .col.secondary .cruise .cruise-image { height: calc(100% - 50px); }
}
@media ( max-width: 680px ) and ( min-width: 576px ) {
	header h1#header-page-title { width: 450px; margin: 0 calc(50% - 215px); }
	header h1#header-page-title br { display: none; }
}
@media ( max-width: 440px ) {
	header h1#header-page-title { font-size: 36px; line-height: 1; padding: 5px; }
}


#tours-section { margin-top: 100px; }
#tours-row { width: 1280px; max-width: 95%; padding-bottom: 40px; margin: 0 auto; }
#tours-row .tour { background: #fff; border-radius: 16px; box-shadow: 0px 10px 40px 0px #0000000D; padding: 22px 22px 90px; position: relative; margin-bottom: 20px; }
#tours-row .tour h5.tour-title { font-size: 24px; color: #1E3A74; margin-bottom: 16px; font-weight: 600; }
#tours-row .tour img.tour-image { width: 100%; height: 300px; object-fit: cover; border-radius: 16px; margin-bottom: 25px; }
#tours-row .tour .tour-description { font-size: 14px; line-height: 1.4; color: #717171; }
#tours-row .tour a.btn-primary { border-radius: 8px; width: calc(100% - 44px); padding-top: 9px; padding-bottom: 9px; position: absolute; bottom: 22px; left: 22px; }

@media ( max-width: 767px ) {
	#tours-row { height: auto; max-height: none; }
}


#resorts-view-all-btn,
#cruises-view-all-btn,
#tours-view-all-btn { width: 300px; }