/* ------------------------------------------------------------------
   M Star Hotel Cleveland - responsive layer
   Added during the restore. Loaded last, so it only corrects layout
   problems that show up on small screens; the original design is
   untouched on desktop.
   ------------------------------------------------------------------ */

/* 1. no image may ever be wider than the box it sits in ------------- */
img {
	max-width: 100%;
	height: auto;
}

/* the hero background and the datepicker icon are sized by script /
   inline style and must keep their own dimensions */
.backstretch img,
img.ui-datepicker-trigger,
#checkin_calendar,
#checkout_calendar,
.ui-datepicker img {
	max-width: none;
	width: auto;
}

iframe,
embed,
object,
video {
	max-width: 100%;
}

/* room + gallery sliders: keep every slide inside the viewport ------ */
.slick-slider,
.slick-list,
.slick-track {
	max-width: 100%;
}

.slick-slide img,
img.slick-border {
	display: block;
	width: 100%;
	height: auto;
}

/* long words / urls in copy blocks must not push the page sideways -- */
.brandshowcasetext,
.newEdit,
footer .footercopy,
.homepagecontent p {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* 2. hero panel -----------------------------------------------------
   the markup hard-codes height:800px inline, which swallows a whole
   phone screen - scale it down with the viewport instead */
@media only screen and (max-width: 1199px) {
	#carousel {
		height: 640px !important;
	}
}

@media only screen and (max-width: 991px) {
	#carousel {
		height: 560px !important;
	}
}

@media only screen and (max-width: 767px) {
	#carousel {
		height: 500px !important;
	}

	.bannerwrapper .bannercontent h1 {
		font-size: 2.6rem;
	}

	.bannerwrapper .bannercontent h2 {
		font-size: 3rem;
		line-height: 1.15;
	}
}

@media only screen and (max-width: 480px) {
	#carousel {
		height: 440px !important;
	}

	.bannerwrapper .bannercontent h1 {
		font-size: 2.2rem;
	}

	.bannerwrapper .bannercontent h2 {
		font-size: 2.5rem;
	}
}

/* 3. header ---------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	header .logowrapper img {
		max-width: 100%;
		width: auto;
		max-height: 52px;
	}

	header .loginbtn {
		margin-right: 6px;
	}
}

/* the phone number is hidden below 580px by the original stylesheet,
   which leaves a phone user with no way to call the hotel */
@media only screen and (max-width: 580px) {
	header .greysubnav .contactnumber.mobilenumber {
		display: block !important;
		float: left;
		clear: both;
		width: auto;
		padding: 0 0 4px;
		font-size: 12px;
		line-height: 1.4;
		white-space: nowrap;
	}

	header .greysubnav .contactnumber.mobilenumber .icon-phone {
		margin-right: 4px;
	}
}

/* 4. the four "why book with us" tiles ------------------------------
   four across on a phone leaves ~85px per tile and 10px type */
@media only screen and (max-width: 767px) {
	.iconswrapper .iconblock {
		width: 50% !important;
		font-size: 12px;
		padding: 12px 8px;
		line-height: 1.35;
	}

	.iconswrapper .iconblock img {
		display: block;
		margin: 0 auto 6px;
		max-height: 34px;
	}
}

@media only screen and (max-width: 380px) {
	.iconswrapper .iconblock {
		font-size: 11px;
		padding: 10px 4px;
	}
}

/* 5. booking widget --------------------------------------------------
   stack the date / occupancy blocks instead of squeezing them */
@media only screen and (max-width: 767px) {
	.ohBookNowContainer {
		padding: 8px 4px;
	}

	.ohBookNowContainer .ohBookNowInner #resAreaContainer {
		gap: 6px;
	}

	.ohBookNowContainer .ohBookNowInner #resAreaContainer #checkInArea,
	.ohBookNowContainer .ohBookNowInner #resAreaContainer #checkOutArea {
		flex: 1 1 100%;
	}

	.ohBookNowContainer .ohBookNowInner #resAreaTwo {
		flex: 1 1 100%;
		flex-wrap: wrap;
	}

	.ohBookNowContainer .ohBookNowInner .ohResArea .ohBookNowButtonBox {
		width: 100%;
	}

	.ohBookNowContainer .ohBookNowInner .ohResArea .ohBookNowButtonBox .ohBookNowButton,
	.ohBookNowContainer .ohBookNowInner .ohResArea .ohBookNowButtonBox #submit_btn {
		width: 100% !important;
		height: 40px !important;
	}

	/* 16px keeps iOS from zooming the page when a field is focused */
	.ohBookNowContainer .ohBookNowInner #resAreaContainer input:not([type="submit"]),
	.ohBookNowContainer .ohBookNowInner #resAreaContainer select {
		font-size: 16px !important;
		height: 36px;
	}

	#indexResContainer.bannerfilter {
		width: 96% !important;
	}
}

/* the datepicker popup has a fixed pixel width in the platform css */
@media only screen and (max-width: 420px) {
	#ui-datepicker-div,
	.datePicker {
		max-width: 96vw !important;
		box-sizing: border-box;
	}
}

/* 6. mobile navigation ----------------------------------------------
   the panel is shown by jQuery slide; give it a sane size and make the
   rows big enough to tap */
@media only screen and (max-width: 990px) {
	nav.menuwrapper ul.mainmenu li a {
		display: block;
		padding: 12px 18px;
		font-size: 15px;
	}

	.hamburger.hamburgermenu {
		padding: 6px 8px;
	}
}

/* 7. content blocks --------------------------------------------------- */
@media only screen and (max-width: 767px) {
	.subpageblock .brandbkg {
		padding: 12px 0;
	}

	.travelideas .redbutton.btn,
	a.redbutton.btn {
		width: auto !important;
		max-width: 100%;
		white-space: normal;
		display: inline-block;
	}

	section.homepagecontent,
	section.pagebannerwrapper {
		overflow-x: hidden;
	}

	.newsletterpanel #mc_embed_signup .mc-field-group input,
	.newsletterpanel #mc_embed_signup .btn {
		width: 100%;
		box-sizing: border-box;
	}

	footer .footersocial {
		text-align: center;
	}

	footer .footercopy {
		text-align: center;
		line-height: 1.6;
	}
}

/* 8. tables in editorial content ------------------------------------- */
@media only screen and (max-width: 767px) {
	.brandshowcasetext table,
	.newEdit table {
		display: block;
		width: 100% !important;
		overflow-x: auto;
	}
}

/* 9. placeholder shown for photography the archive never captured ----- */
img.photo-unavailable {
	background: #ececec;
	object-fit: contain;
}