/* ~~~~~~~~~~~~~~~~~~~  Tablet: Landscape ~~~~~~~~~~~~~~~~~~~ */
@media screen 
	and (min-width: 768px)
	and (max-width: 1024px)
	and (orientation: landscape) {
	/* ~~~~~~~~~~~~~~ General ~~~~~~~~~~~~~~ */
	#landscape-popup {
		display: none;
	}

	.fullscreen .container-fullscreen .text-middle {
		padding: 0 100px;
	}

	/* Youtube Vid */
	#iframe-container {
	  position: relative;
	  overflow: hidden;
	  width: 100%;
	  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	}

	/* Then style the iframe to fit in the container div with full height and width */
	.responsive_iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  right: 0;
	  width: 100%;
	  height: 100%;
	}

	/* Portal */
	#reservation-portal {
		width: 85%;
	}
	#booking-wizard-portal{
		position: absolute;
		width: 95%;
		height: 675px;
		margin: auto;
		right: 0;
		left: 0;
		top: 8%;
		background-color: white;
		border: 5px solid #f30d0d;
		border-radius: 10px;
		z-index: 999;
		display: none;
		overflow-y: auto;
	}
	.booking_wizard_footer {
		padding: 15px 0;
		height: 75px;
		width: 325px;
		float: right;
	}

	.mobile_no_show {
		display: none;
	}

	.mobile_br {
		display: inline;
	}

	.room_title {
		font-size: 1.2em;
		font-weight: bold;
	}

	/* .close_booking_wizard {
		margin-top: -125px;
	} */

	#faq-btn {
		/* margin-top: -170px; */
		z-index: 1000;
	}

	.booking_wizard_nav #step-tracker-col {
		margin-top: 30px;
	}

	#page2.pricing-table .plan {
		margin-bottom: 20px;
	}

	#booking-wizard-menu #page2-subtitle {
		margin-bottom: 10px;
	}

	.pricing-table.plan-list ul li {
		line-height: 25px;
	}

}


/* ~~~~~~~~~~~~~~~~~~~  Tablet: Portrait ~~~~~~~~~~~~~~~~~~~ */
@media only screen
	and (min-width: 481px)
	and (max-width: 768px)
	and (orientation: portrait) {
	/* ~~~~~~~~~~~~~~ General ~~~~~~~~~~~~~~ */
	#landscape-popup {
		display: none;
	}

	/* Youtube Vid */
	#iframe-container {
	  position: relative;
	  overflow: hidden;
	  width: 100%;
	  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	}

	/* Then style the iframe to fit in the container div with full height and width */
	.responsive_iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  right: 0;
	  width: 100%;
	  height: 100%;
	}

	/* Portal */
	#reservation-portal {
		width: 90%;
	}
	#mobile-review-table{
		display:block;
	}
	#desktop-review-table{
		display:none;
	}

	
	#booking-wizard-portal{
		position:absolute;
		width:99%;
		height:875px;
		margin:auto;
		right:0; left:0; top:10%;
		background-color:white;
		border:5px solid #f30d0d;
		border-radius:10px;
		z-index:999;
		display:none;
		overflow-y:auto;
	}

	.order_side{
		border-right: 0px;
		padding: 0 25px;
	}

	.booking_wizard_footer {
		padding: 15px 0;
		height: 75px;
		width: 325px;
		float: right;
	}

	/* .jdr_footer_col {
		width: 0%;
	} */

	/* .booking_wizard_footer {
		padding: 15px 0;
		height: 75px;
		float: right;
	} */

	.mobile_no_show {
		display: none;
	}

	.mobile_br {
		display: inline;
	}

	.room_title {
		font-size: 1.2em;
		font-weight: bold;
	}

	.close_booking_wizard {
		margin-top: -125px;
	}

	#faq-btn {
		margin-top: -170px;
		z-index: 1000;
	}

	.booking_wizard_nav #step-tracker-col {
		margin-top: 30px;
	}

	#booking-wizard-order .comes_with_text {
		margin-top: 15px;
		font-size: 1.5rem;
	}

	/* #page2-title {
		margin-top: 50px;
	} */

	#booking-wizard-menu #page2-subtitle {
		margin-bottom: 10px;
	}

	#page2.pricing-table .plan {
		margin-bottom: 20px;
	}

	#page2.pricing-table .plan h5 {
		font-size: 1.5rem;
	}

	#page2.pricing-table .plan .plan-header img {
		width: 100%;
	}

	#page2.pricing-table .plan-list ul li {
		line-height: 25px;
		font-size: 1.25rem;
	}
	#hex-pod, #included-row, .included_hr{
		display:none;
	}

	.mobile_hr {
		border-top: 2px solid #2f056b;
		margin-top: 15px;
	}

	/* More Info Mobile Portal */
	.include_more_info{
		display:inline-block;
		margin-left:5px;
	}

	#mobile-more-info-portal {
		position: fixed;
		height: 55%;
		width: 90%;
		margin: auto;
		top: 50px; right: 0; bottom: 0; left: 0;
		border: 3px solid black;
		border-radius: 25px;
		background-color: white;
		z-index: 1000;
	}

	#mobile-more-info-portal #mobile-more-info-portal-contents {
		position: absolute;
		top: 10px; right: 10px; bottom: 0; left: 0;
		height: 100%;
		max-height: 97%;
		width: 99%;
		margin: auto;
		overflow-y: auto;
	}

	#mobile-more-info-portal #mobile-more-info-portal-contents .row {
		margin-bottom: 10px;
	}

	.booking_wizard_nav_btn h5 {
		margin-top: 5px;
		font-weight: bold;
		line-height: 1.25rem;
	}

	#mobile-more-info-portal #escape-pod-text,
	#mobile-more-info-portal #hex-pod-text {
		font-size: 1.15rem;
	}

	#mobile-more-info-portal #escape-pod-text p,
	#mobile-more-info-portal #hex-pod-text p {
		margin-bottom: 0;
	}

}



/* ~~~~~~~~~~~~~~~~~~~  Cell Phone: Landscape ~~~~~~~~~~~~~~~~~~~  */
@media only screen
	and (max-height: 481px)
	and (max-width: 964px)
	and (orientation: landscape) {
	/* ~~~~~~~~~~ Global ~~~~~~~~~~ */
	#landscape-popup {
		position: fixed;
		width: 98%;
		height: 98%;
		margin: auto;
		right: 0; 
		left: 0; 
		top: 1%;
		background-color:white;
		border:5px solid red;
		border-radius: 10px;
		z-index: 999;
		display: block;
	}

	#landscape-popup #landscape-popup-contents h1 {
		position: absolute;
		top: 30vh;
		left: 0;
		right: 0;
		bottom: 0;
	} 

	.container {
		max-width: 96vw;
		padding: 0 15px;
	}

	/* Youtube Vid */
	#iframe-container {
	  position: relative;
	  overflow: hidden;
	  width: 100%;
	  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	}

	/* Then style the iframe to fit in the container div with full height and width */
	.responsive_iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  right: 0;
	  width: 100%;
	  height: 100%;
	}	
	
	/* Portal */
	#reservation-portal {
		width: 85%;
	}
	
	/* ~~~~~~~~ AJAX ~~~~~~~~ */
	.flickity-enabled.is-draggable .flickity-viewport {
		height: 120vh;
	}
	
	.carousel .polo-carousel-item img {
		height: 120vh;
	}
	#hex-pod, #included-row, .included_hr{
		display:none;
	}
}




/* ~~~~~~~~~~~~~~~~~~~  Cell Phone: Portrait ~~~~~~~~~~~~~~~~~~~  */
@media only screen
	and (max-width: 480px) 
	and (orientation: portrait) {
	/* ~~~~~~~~ General ~~~~~~~~ */
	h1 {
		font-size: 2em;
	}
	
	h2 {
		font-size: 1.75em;
	}
	
	h3 {
		font-size: 1.5em;
	}
	
	h4 {
		font-size: 1.25em;
	}
	
	h5 {
		font-size: 1.2em;
	}
	
	.container {
		padding: 0 15px;
	}

	#landscape-popup {
		display: none;
	}

	.mobile_br {
		display: inline;
	}

	.mobile_hr {
		border-top: 2px solid #2f056b;
		margin-top: 15px;
	}
	
	/* Youtube Vid */
	#iframe-container {
	  position: relative;
	  overflow: hidden;
	  width: 100%;
	  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	}

	/* Then style the iframe to fit in the container div with full height and width */
	.responsive_iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  right: 0;
	  width: 100%;
	  height: 100%;
	}
	
	/* Portal */
	#reservation-portal {
		width: 95%;
	}
	
	/* ~~~~~~~~~~ Room Reservations ~~~~~~~~~~ */
	/* General */
	#room-reserve-nav .room_btn {
		margin-top: .5rem;
	}
	#reservation-card .tab_title {
		margin-top: 20px;
	}
	#booking-wizard-portal{
		position:fixed;
		width:98%;
		height:95%;
		margin:auto;
		right:0; left:0; top:4%;
		background-color:white;
		border:5px solid #f30d0d;
		border-radius:10px;
		z-index:999;
		display:none;
		overflow-y:scroll;
	}
	.booking_wizard_container{
		position:relative;
		width:94%;
		margin-left:2%;
	}
	/* #included-row{
		display:none;
	} */
	.booking_wizard_nav_btn{
		padding-left:10px;
		padding-right:10px;
		margin-left:-40px;
	}
	.booking_wizard_nav_btn h5 {
		margin-top: 5px;
		font-size: 0.9em;
		font-weight: bold;
		line-height: 1.25rem;
	}
	.booking_wizard_nav_btn h2{
		margin-top:-1px;
	}
	.booking_wizard_nav_btn .nav_info_circle{
		width:37px;
		height:37px;
	}
	.order_side{
		border-right-width:0px;
		
	}
	.order_side h3{
		display:none;
	}
	#booking-wizard-menu{
		font-size:0.8em;
	}
	#black-room-box h5, #rock-band-box h5, #red-room-box h5{
		font-size:1.3em;
	}
	.mobile_price{
		display:inline-block;
	}
	.desktop_price{
		display:none;
	}
	#mobile-review-table{
		display:block;
	}

	#booking-wizard-menu h5:not(:last-child),
	#mobile-review-table h4:not(:last-child) {
		margin-top: 5px;
		margin-bottom: 0;
	}

	/* Date Picker */
	input:not([type="checkbox"]):not([type="radio"]),
	select.form-control:not([size]):not([multiple]) {
		margin-bottom: 5px;
	}

	#desktop-review-table{
		display:none;
	}

	.mobile_no_show {
		display: none;
	}

	.small_h3 {
		font-size: .90em;
		line-height:15px;
	}

	.modal_header {
		line-height: 1.5em;
	}

	.room_title {
		font-size: 1.75em;
		font-weight: bold;
		padding-top: 5px;
	}

	#booking-title-main {
		line-height: 15px;
		margin-top:20px;
		margin-left: 4%;
	}

	#booking-review-table td {
		font-size: 1.05em;
	}

	#booking-review-table td, #booking-review-table th {
		padding: 5px;
	}

	/* FAQ */
	#faq-btn {
		margin-top: -70px;
		z-index: 1000;
	}

	#faq-portal {
		width: 98%;
	}

	#faq-portal-contents {
		padding-left: 8px;
		padding-right: 8px;
	}

	#faq-portal .card {
		margin-bottom: 0;
		padding: 5px;
	}

	#faq-portal .card .card-header,
	#faq-portal .card .card-body {
		padding: .5rem 0 0 0;
	}

	#faq-portal .accordion .ac-item {
		padding: 12px 15px;
	}

	#faq-portal .accordion .ac-item .ac-title {
		padding-right: 20px;
	}


	.close_booking_wizard {
		margin-top: -15px;
	}

	.booking_wizard_nav #step-tracker-col {
		margin-top: 8px;
	}

	#page2-title {
		margin-top: 0;
	}

	#page2-subtitle {
		margin-bottom: 10px;
	}

	/* More Info Mobile Portal */
	#mobile-more-info-portal {
		position: fixed;
		height: 85%;
		width: 90%;
		margin: auto;
		top: 50px; right: 0; bottom: 0; left: 0;
		border: 3px solid black;
		border-radius: 25px;
		background-color: white;
		z-index: 1000;
	}

	#mobile-more-info-portal #mobile-more-info-portal-contents {
		position: absolute;
		top: 0; right: 10px; bottom: 0; left: 0;
		height: 100%;
		max-height: 97%;
		width: 99%;
		margin: auto;
		overflow-y: auto;
	}


	/* Room Reserve Cards */
	#page2.pricing-table .plan-list ul li {
		line-height: 27px;
		font-size: 1.5rem; 
	}

	#page2.pricing-table .col-md-7 {
		padding: 0;	
	}

	#page2.pricing-table .plan {
		margin-bottom: 25px;
	}
	#faq-side, #close-portal{
		display:none;
	}
	#hex-pod, #included-row, .included_hr{
		display:none;
	}
	.comes_with_text {
		line-height:20px;
		font-size:1.3em;
		margin-top:8px;
	}
	.include_more_info{
		display:inline-block;
		margin-left:5px;
	}
	#mobile-faq-side{
		display:block;
		position:absolute;
		z-index:9999999;
		top: 7px;
		left: -3px;
		font-size: 20px;
		font-weight:700; 
	}
	#mobile-close-side{
		display:block;
		position:absolute;
		z-index:9999999;
		top:17px;
		right: -7px;
	}
	#mobile-faq-side i, #mobile-close-side i{
		font-size:32px;
	}
}