/* Open Hospitality Teaser */
#teaserWrapper {border: 1px solid #107798; position: relative; width: 198px;width:100%;}
.teaser-dates {position: relative; z-index: 30;}
.outdate {z-index: 20;}
#inDateContainer,
#outDateContainer {position: absolute; z-index: 20; top: 52px; left: 0; width: 99.7%;}
.teaser-button {
	background: black;
	color: #88D2DC;
	font: bold 14px Arial;
	padding: 10px 35px;
	border: 2px solid black;
	margin: 0;
	cursor: pointer;

	-webkit-transition: all 400ms;
	-moz-transition: all 400ms;
	-ms-transition: all 400ms;
}
.teaser-button:hover{
	background: #89D2DC !important;
	color: black !important;
}
#teaser-close {background-color: #000; color: #fff; text-align: center; cursor: pointer; padding: 7px 0; text-transform: lowercase;}
.teaser-link {display: block; text-align: center; margin-top: 10px; color: #333; font-size: .9em;}

/* Teaser Header */
#teaserHeader {background-color: #222; color: #fff; height: 38px; text-align: center; width: 100%; position: relative;}
.pdarrows {background-repeat: no-repeat; width: 15%; height: 38px; float: left; cursor: pointer; background-position: center center;}
.pdarrows.disabled {opacity: .5; filter: alpha(opacity=50); cursor: default;}
.pdarrows.left {background-image: url('arrow-left.png');}
.pdarrows.right {background-image: url('arrow-right.png');}
.headerMonth {width: 70%; float: left; text-transform: uppercase; font-size: 14px; height: 38px; line-height: 38px; font-weight: bold;}
.headerMonth a {color: #fff; text-decoration: none;}

/* Calendar*/
#teaserboxCalendar {background-color: #fff; width: 100%; text-align: center; border-collapse: collapse; border-spacing: 0;}
#teaserboxCalendar th,
#teaserboxCalendar td {padding: 8px 0; font-size: 12px; line-height: 12px; text-align: center; width: 14%;}
#teaserboxCalendar .col {color: #000; cursor: pointer;}
#teaserboxCalendar .col:hover {background-color: #000; color: #fff;}
#teaserboxCalendar .disabled,
#teaserboxCalendar .disabled:hover {background-color: #ddd; color: #bbb; cursor: default;}
#teaserboxCalendar .dateCol {background-color: #000; color: #fff; text-transform: uppercase; font-weight: bold;}
#teaserboxCalendar .disableMonth {display: none;}
#teaserboxCalendar .selected {background-color: #222; color: #fff;}
#teaserboxCalendar .prevSelected {background-color: #107798; color: #fff; cursor: default;}

/* Layout */
.ohteaser,
.ohteaser fieldset {border: none;}
.clear {clear: both;}
.hidden {display: none;}

.teaser-dates input,
.teaser-dropdown,
.teaser-promo {border: 1px solid #ccc; margin-bottom: 10px; font-size: 12px;}

.teaser-dates input,
.teaser-promo {padding: 3px 2px;}

.teaser-dropdown {
	padding: 8px 5px;
	background: white;
	color: black;
	border: 2px solid black;
	outline: none;
	font: bold 14px Arial;
	margin: 0 0 10px;
	width: 100%;
}
.teaser-dates input {cursor: pointer;}

.ohteaser {}

.teaser-dates input,
.teaser-promo {width: 210px;}

.children-wrap, .adults-wrap, .rooms-wrap {
	display: inline-block; 
	width: 32%; 
	box-sizing:border-box;
	text-align: center;
}

.booking-form {

	padding: 25px;
	font: bold 14px Arial;

}

.booking-form .col2 {

	float: left;

	margin-top: 10px;

	margin-right: 20px;

	margin-bottom: 20px;

}

.booking-form label {

	display: block;

}

.booking-form input {

	border: 2px solid black;

	font-size: 14px;

	font-weight: bold;

	background: white url(../../images/booking-input-bg.png) no-repeat right;

	padding: 7px 10px;
	padding-right: 40px;

	width: 100%;

	box-sizing: border-box;

}

fieldset, body, html { padding: 0; margin: 0;} 

@media screen and (max-width: 1300px){

	.teaser-button{
		padding: 10px 32px;
	}

}

@media screen and (max-width: 220px){

	.teaser-dropdown {
		padding: 8px 2px;
		/*font-size: 12px;*/
	}

	.children-wrap, .adults-wrap, .rooms-wrap{
		width: 31%;
	}

	.booking-form label{
		font-size: 12px; 
	}

	.booking-form{
		padding-top: 0;
	}

}