/*
# Site Elements
*/

.lazyload {
	opacity: 0;
	-webkit-transition: opacity 500ms ease-in-out;
	-moz-transition: opacity 500ms ease-in-out;
	-o-transition: opacity 500ms ease-in-out;
	transition: opacity 500ms ease-in-out;
}

.lazyloaded {
	opacity: 1;
}

.slides {
	padding: 0;
	margin: 0;
	list-style: none;
}

.list-item-container {
	margin-bottom: -20px;
}

.list-item-container__footer {
	padding-top: 15px;
}

/*
## List Item

```
	<div class="list-item">
		<div class="list-item__header">
			<a href="#" class="list-item__header-image">
				<img src="http://placehold.it/285x200" />
			</a>
			<a href="#" class="list-item__wishlist-link">
				<span class="icon icon-heart-empty"></span>
			</a>
		</div>
		<div class="list-item__body">
			<p class="list-item__type">Activity Type</p>
			<h3 class="list-item__title">
				<a href="#">
					Bacon Ipsum dolor amet fatback hamburger pork belly
				</a>
			</h3>
		</div>
		<div class="list-item__footer">
			<a href="#">
				Read More
				<span class="icon icon-arrow-right"></span>
			</a>
		</div>
	</div>
```
*/

.codedemo .list-item {
	width: 280px;
}

.list-item {
	/*display: inline-block;*/
	position: relative;
	letter-spacing: 0.6px;
	overflow: hidden;
	background-color: #fff;
	margin-bottom: 20px;
	opacity: 1;
	transition: all .2s ease;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
}

	.list-item:hover {
	}

.list-item--featured {
	overflow: visible;
}

.list-item__flag {
	position: absolute;
	top: 15px;
	left: -10px;
	z-index: 3;
}

.list-item__header {
	position: relative;
	background-color: #eeeeee;
}

.list-item__header-image {
	overflow: hidden;
	height: 0;
	position: relative;
	display: block;
	padding-bottom: 70%;
	background-color: #eee;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

	.list-item__header-image img,
	.list-item__header-image-loader {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		min-height: 100%;
		opacity: 0;
		-webkit-transition: opacity 200ms ease-in-out;
		-moz-transition: opacity 200ms ease-in-out;
		-o-transition: opacity 200ms ease-in-out;
		transition: opacity 200ms ease-in-out;
		display: block;
		background: #eee;
	}

		.list-item__header-image img.lazyloaded {
			opacity: 1;
		}

	.list-item__header-image .list-item__header-image-loader {
		opacity: 1;
	}

	.list-item__header-image.lazyloaded .list-item__header-image-loader {
		opacity: 0;
	}

	/*.list-item__header-image:after {
	content: '';
	width: 0;
	height: 0;
	border-left: 75px solid transparent;
	border-right: 75px solid transparent;
	border-top: 75px solid #009999;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
	transform: translateX(50%);
	-webkit-transform: translateX(50%);
	-ms-transform: translateX(50%);
	transition: all .2s ease;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
}*/

	.list-item__header-image img {
		display: block;
		width: 100%;
	}


/*.list-item:hover .list-item__header-image:after {
    opacity: 0.7;
	transition: all .2s ease;
    -webkit-transition: all .4s ease;
	   -moz-transition: all .4s ease;
	     -o-transition: all .4s ease;
}*/

.list-item--no-wishlink .list-item__header-image:after {
	display: none;
}

.list-item__wishlist-link {
	position: absolute;
	top: 12px;
	right: 10px;
	font-size: 25px;
	text-decoration: none;
	color: #fff;
}

	.list-item__wishlist-link:before {
		position: relative;
		z-index: 1000;
	}

    .list-item .list-item__wishlist-link.icon-heartfull::after {
        border-left: 80px solid #099;
        border-right: 80px solid #099;
        border-top: 80px solid #099;
        -webkit-transform: rotate(45deg)translate(20%,-85%);
		-ms-transform: rotate(45deg)translate(20%,-85%);
        transform: rotate(45deg)translate(20%,-85%);
    }

	.list-item__wishlist-link:after {
		content: '';
		width: 0;
		height: 0;
		/*border-left: 80px solid transparent;
		border-right: 80px solid transparent;
		border-top: 80px solid #009999;*/
		opacity: 0;
		position: absolute;
		right: -10px;
		top: -15px;
		z-index:2;
		/*-webkit-transform: translateX(50%);
		-ms-transform: translateX(50%);
		transform: translateX(50%);*/
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		-o-transition: all .2s ease;
		transition: all .2s ease;

        border-left: 80px solid #099;
        border-right: 80px solid #099;
        border-top: 80px solid #099;
        -webkit-transform: rotate(45deg)translate(20%,-85%);
		-ms-transform: rotate(45deg)translate(20%,-85%);
        transform: rotate(45deg)translate(20%,-85%);
	}

.list-item .icon-heartfull:before{
    opacity: 1;
    content: '\f004';
    font: normal normal normal 20px/1 FontAwesome;
    width: 1.2em;
}
.list-item .icon-heartfull:after{
    content: '';
    width: 0;
    height: 0;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-top: 80px solid #099;
    opacity: 1;
    position: absolute;
    right: -10px;
    top: -15px;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
}
.list-item__wishlist-link:before {
    content: '\f08a';
    font: normal normal normal 20px/1 FontAwesome;
    width: 1.2em;
    opacity: 0;
}
.list-item__wishlist-link:hover:before{
    content: '\f004';
}

.list-item__wishlist-link--visible:before {
	opacity: 1;
}

.list-item__wishlist-link--visible:after {
	opacity: 0.7;
}


.list-item .list-item__header:hover .list-item__wishlist-link:after {
	opacity: 0.7;
}

.list-item .list-item__header:hover .list-item__wishlist-link:before {
    opacity: 1 !important;
}

.list-item:hover .list-item__wishlist-link::before,
.list-item__body:hover .list-item__wishlist-link::before, 
.list-item__footer:hover .list-item__wishlist-link::before {
    opacity: 0;
}

.list-item__floating-detail {
	position: absolute;
	bottom: -12px;
	left: 23px;
	background-color: #00cccc;
	width: 118px;
	height: 68px;
	border-radius: 6px;
	padding: 13px 20px;
	color: #fff;
}

	.list-item__floating-detail.with-bookit {
		background-color: #BCA640;
		height: 75px;
		padding: 10px;
	}

	.list-item__floating-detail.with-bookit-secondary {
		background-color: #BCA640;
		height: 50px;
		padding: 10px;
		width: 90px;
	}

	.list-item__floating-detail h4,
	.list-item__floating-detail h3 {
		font-size: 12px;
		text-transform: uppercase;
		font-family: "Lato";
		margin-bottom: 0px;
		font-weight: normal;
		letter-spacing: 0.6px;
	}

	.list-item__floating-detail h3 {
		font-size: 26px;
	}

		.list-item__floating-detail h3.book-online {
			font-size: 13px;
		}

	.list-item__floating-detail span {
		font-family: "Lato";
		font-weight: bold;
		font-size: 14px;
		text-transform: uppercase;
	}

	.list-item__floating-detail p {
		font-family: "Lato";
		font-size: 14px;
		text-transform: uppercase;
		line-height: 20px;
		font-weight: bold;
	}

	.list-item__floating-detail.with-bookit-secondary p {
		line-height: 16px;
	}

.list-item__floating-detail--small {
	height: 35px;
	width: 85%;
	padding: 9px 15px;
	left: 19px;
	bottom: -10px;
	white-space: nowrap;
}

.list-item__body {
	position: relative;
	padding-right: 25px;
	padding-left: 25px;
	padding-top: 25px;
	padding-bottom: 15px;
	border-bottom: 1px solid #eee;
}

.list-item__icon {
	position: absolute;
	top: 16px;
	right: 15px;
	color: #999;
	font-size: 24px;
}

.list-item__type,
.list-item__additional-detail {
	font-size: 12px;
	text-transform: uppercase;
	color: #999;
	font-weight: bold;
	line-height: 1;
	margin: 0px 0px 11px;
	font-family: "Lato";
	letter-spacing: 0.8px;
}

.list-item__title {
	margin-bottom: 3px;
	font-size: 1em;
	font-family: inherit;
	line-height: 1.13;
	height: 33px;
	overflow: hidden;
}

	.list-item__title a {
		text-decoration: none;
		text-transform: uppercase;
		color: #009999;
		font-weight: 900;
	}

.list-item__description {
	margin-top: 15px;
	margin-bottom: 18px;
}

	.list-item__description span {
		font-family: "Lato";
		font-size: 15px;
	}

.list-item__additional-detail {
	margin: 8px 0px 0px;
	letter-spacing: 0.6px;
	font-weight: normal;
}

.list-item__footer {
	line-height: 1;
}

	.list-item__footer a {
		/*padding: 20px 30px;*/
		padding: 22px 37px 22px 26px;
	}

		.list-item__footer a,
		.list-item__footer a .icon {
			/*font-size: 0.787em;*/
			font-size: 13px;
			letter-spacing: 0.6px;
			display: block;
			text-transform: uppercase;
			color: #999;
			font-weight: 800;
			text-decoration: none;
			transition: all .2s ease;
			-webkit-transition: all .2s ease;
			-moz-transition: all .2s ease;
			-o-transition: all .2s ease;
		}

			.list-item__footer a .icon {
				font-size: 1em;
				float: right;
				/*margin-top: -8px;*/
				margin-right: -4px;
			}

.list-item:hover .list-item__footer a,
.list-item:hover .list-item__footer a .icon {
	color: #009999;
	transition: all .2s ease;
	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
}

@media screen and (max-width: 800px) {
	.list-item__floating-detail--small {
		bottom: -25px;
	}
}

@media screen and (max-width: 480px) {
	.list-item__floating-detail--small {
		bottom: -13px;
	}

	.list-item__floating-detail--small {
		height: 30px;
	}
}


/*
## List Item - Landscape

```
	<div class="list-item--landscape">
		<div class="list-item__header list-item__header--landscape">
			<a href="#" class="list-item__header-image">
				<img src="http://placehold.it/285x200" />
			</a>
			<a href="#" class="list-item__wishlist-link">
				<span class="icon icon-heart-empty"></span>
			</a>
		</div>
		<div class="list-item__body">
			<p class="list-item__type">Activity Type</p>
			<h3 class="list-item__title">
				<a href="#">
					Bacon Ipsum dolor amet fatback hamburger pork belly
				</a>
			</h3>
		</div>
		<div class="list-item__footer">
			<a href="#">
				Read More
				<span class="icon icon-arrow-right"></span>
			</a>
		</div>
	</div>
```
*/

.list-item__header-image--landscape {
	padding-bottom: 43%;
}


/*
## List Item - Bordered

```
	<div class="list-item list-item--bordered">
		<div class="list-item__header">
			<a href="#" class="list-item__header-image">
				<img src="http://placehold.it/285x200" />
			</a>
			<a href="#" class="list-item__wishlist-link">
				<span class="icon icon-heart-empty"></span>
			</a>
		</div>
		<div class="list-item__body">
			<p class="list-item__type">Activity Type</p>
			<h3 class="list-item__title">
				<a href="#">
					Bacon Ipsum dolor amet fatback hamburger pork belly
				</a>
			</h3>
		</div>
		<div class="list-item__footer">
			<a href="#">
				Read More
				<span class="icon icon-arrow-right"></span>
			</a>
		</div>
	</div>
```
*/

.list-item--bordered {
	border: 1px solid #eee;
}

/*
## List Item - Stacked

```
	<div class="list-item--stacked">
		<div class="list-item__left--stacked">
			<a href="#" class="list-item__image--stacked">
				<img src="http://placehold.it/285x200" />
			</a>
			<a href="#" class="list-item__wishlist-link--stacked">
				<span class="icon icon-heart-empty"></span>
			</a>
		</div>
		<div class="list-item__body--stacked">
			<p class="list-item__type">Activity Type</p>
			<h3 class="list-item__title">
				<a href="#">
					Bacon Ipsum dolor amet fatback hamburger pork belly
				</a>
			</h3>
		</div>
		<div class="list-item__right--stacked">
			<p>Select Day</p>
		</div>
	</div>
```
*/

.list-item--stacked {
	height: 125px;
	margin: 15px 20px 15px 0px;
	background: #fff;
	border-color: transparent;
	border-style: solid;
	border-width: 2px;
	cursor: pointer;
	background-clip: padding-box;
	position: relative;
	overflow: hidden;
}

	.list-item--stacked:after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 100%;
		background: #ddd;
		transition: all .2s ease;
		opacity: 0.7;
	}

.list-item__left--stacked {
	position: relative;
	width: 150px;
}

.list-item__image--stacked {
	height: 100%;
	overflow: hidden;
	display: block;
}

	.list-item__image--stacked img {
		width: 165px;
		height: 121px;
	}

.list-item__wishlist-link--stacked {
	position: absolute;
	left: 13px;
	top: 13px;
	color: #fff;
	font-size: 20px;
	text-decoration: none;
	z-index: 1;
}

.list-item__remove-wishlink {
	font-size: 8px;
	text-transform: uppercase;
	margin-left: -7px;
	display: block;
	opacity: 0;
}

.list-item__body--stacked {
	height: 100%;
	vertical-align: top;
	padding: 20px;
	border-right: 2px solid #ccc;
	width: 300px;
	margin-left: -3px;
}

	.list-item__body--stacked .list-item__title {
		height: 55px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

.list-item__right--stacked {
	vertical-align: top;
	padding: 30px 25px 25px 25px;
	width: 92px;
	text-align: center;
	height: 100%;
}

.list-item--stacked:hover .list-item__body--stacked,
.list-item--stacked:hover .list-item__left--stacked {
	background: rgba(0, 153, 153, 0.6);
}

.list-item--stacked:hover .list-item__remove-wishlink {
	opacity: 1;
}

.list-item--stacked:hover .list-item__image--stacked img {
	opacity: 0.5;
}

.list-item--stacked:hover .list-item__body--stacked .list-item__type,
.list-item--stacked:hover .list-item__body--stacked .list-item__title a {
	color: #fff;
}

@media screen and (max-width: 800px) {
	.list-item__right--stacked {
		width: auto;
	}

	.list-item__body--stacked {
		width: calc(100% - 45%);
	}

	.list-item--stacked {
		margin: 0 0 10px 0;
		white-space: nowrap;
	}
}

@media screen and (max-width: 480px) {
	.list-item__right--stacked,
	.list-item__left--stacked,
	.list-item--stacked {
		display: block;
	}

	.list-item--stacked {
		height: auto;
	}

	.list-item__left--stacked,
	.list-item__body--stacked {
		border: none;
		margin-bottom: 0 !important;
		margin-left: 0;
		white-space: normal;
	}

	.list-item__left--stacked,
	.list-item__image--stacked img,
	.list-item__body--stacked {
		width: 100%;
		height: auto;
	}

	.list-item__body--stacked,
	.list-item__right--stacked {
		padding: 10px;
	}

	.list-item__right--stacked {
		height: 65px;
	}
}

/*
## List Item - Stacked - Disabled

```
	<div class="list-item--stacked list-item--stacked-disabled">
		<div class="list-item__left--stacked">
			<a href="#" class="list-item__image--stacked">
				<img src="http://placehold.it/285x200" />
			</a>
			<a href="#" class="list-item__wishlist-link--stacked">
				<span class="icon icon-heart-empty"></span>
			</a>
		</div>
		<div class="list-item__body--stacked">
			<p class="list-item__type">Activity Type</p>
			<h3 class="list-item__title">
				<a href="#">
					Bacon Ipsum dolor amet fatback hamburger pork belly
				</a>
			</h3>
		</div>
		<div class="list-item__right--stacked">
			<p>Select Day</p>
		</div>
	</div>
```
*/

.list-item--stacked-disabled {
	position: relative;
	cursor: default;
}

	.list-item--stacked-disabled:after {
		-moz-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		-o-transform: translateY(-100%);
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	.list-item--stacked-disabled:hover .list-item__body--stacked,
	.list-item--stacked-disabled:hover .list-item__left--stacked {
		background: white;
	}

		.list-item--stacked-disabled:hover .list-item__body--stacked .list-item__type {
			color: #999999;
		}

		.list-item--stacked-disabled:hover .list-item__body--stacked .list-item__title a {
			color: #009999;
		}


/* List Item Responsive */
@media all and (max-width: 1040px) {
	.list-item__floating-detail span {
		font-size: 12px;
	}
}

@media all and (max-width: 480px) {
	.list-item__title {
		font-size: 14px;
	}

	.list-item__footer a,
	.list-item__footer a .icon,
	.list-item__type {
		font-size: 12px;
	}

	.list-item__footer a {
		padding: 10px 37px 10px 26px;
	}
}


/* Item Spinner */

.item-spinner {
	background: #f5f5f5;
	border-radius: 4px;
	margin-left: -5px;
	width: 55px;
}

	.item-spinner .icon {
		font-size: 23px;
		padding: 10px;
		display: block;
	}

	.item-spinner input {
		border: none;
		width: 100%;
		background: transparent;
		color: #099;
		font-size: 23px;
		text-align: center;
	}

.ui-spinner-input:focus {
	outline: none;
}


.ui-spinner,
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	background: #f5f5f5;
	border: none;
}

.ui-spinner-button {
	width: 13px;
}

.ui-icon {
	font-size: 10px;
	text-indent: 0px;
	color: #099;
	width: 11px;
}

/*.ui-spinner-button {
	visibility: hidden;
}

.item-spinner input:hover .ui-spinner-button {
	visibility: visible;
}*/

@media screen and (max-width: 800px) {
	.item-spinner {
		width: 100%;
		margin-left: 0px;
	}

		.item-spinner input {
			width: 60px;
		}
}

@media screen and (max-width: 480px) {
	p.list-item__type,
	.item-spinner {
		display: inline-block;
		vertical-align: middle;
	}

	.ui-spinner {
		overflow: visible;
	}

	.item-spinner {
		width: 100px;
	}

	.ui-spinner-button,
	.ui-icon {
		width: 35px;
		height: 15px;
		font-size: 29px;
		overflow: visible;
	}

	.item-spinner input {
		font-size: 30px;
		text-align: left;
		padding-left: 20px;
	}

	.ui-spinner .ui-icon {
		margin-top: -16px;
	}
}



/*
## Iconed Text

```
	<div class="iconed-text">
		<span class="iconed-text__icon icon icon-mapmarker-empty"></span>
		<div class="iconed-text__content">
			<h6 class="fixie"></h6>
			<p class="fixie"></p>
		</div>
	</div>
```
*/

.codedemo .iconed-text {
	width: auto;
}

.iconed-text {
	overflow: hidden;
	padding: 10px 10px 0 10px;
	margin-bottom: 5px;
	width: 295px;
}

.iconed-text__icon {
	float: left;
	color: #009999;
	font-size: 45px;
	margin-right: 18px;
	min-height: 80px;
}

.iconed-text__image {
	float: left;
	margin-right: 10px;
	min-height: 80px;
}

.iconed-text__content {
	color: #999;
	padding-left: 63px;
}

	.iconed-text__content h6 {
		margin-bottom: 7px;
		font-size: 12px;
	}

	.iconed-text__content p a {
		margin-top: 7px;
		color: #009999;
		text-decoration: none;
		font-weight: bold;
	}


/*
## Iconed Text - Small

```
	<div class="iconed-text iconed-text--small">
		<span class="iconed-text__icon icon icon-mapmarker-empty"></span>
		<div class="iconed-text__content">
			<h6 class="fixie"></h6>
			<p class="fixie"></p>
		</div>
	</div>
```
*/

.iconed-text--small {
	padding: 0;
}

	.iconed-text--small .iconed-text__icon {
		font-size: 25px;
		margin-right: 0;
		min-height: 0;
	}

	.iconed-text--small .iconed-text__content {
		padding-left: 30px;
	}


/*
## Listing Card

```
	<div class="listing-card">
		<a href="#" class="listing-card__image">
			<div class="pace-progress">
				<div class="pace-progress-inner"></div>
			</div>
			<img src="http://placehold.it/180x120" />
		</a>

		<div class="iconed-text listing-card__section">
			<span class="iconed-text__icon icon icon-mapmarker-empty"></span>
			<div class="iconed-text__content">
				<h6 class="fixie"></h6>
				<p class="fixie"></p>
			</div>
		</div>
	</div>
```
*/

.listing-card {
	background: white;
	padding: 10px;
	box-shadow: 1px 2px 2px 0px rgba(0,0,0,0.2);
	position: relative;
	margin-bottom: 10px;
}

	.listing-card:after {
		content: "";
		width: 0;
		height: 0;
		border: 15px solid transparent;
		border-top-color: white;
		position: absolute;
		bottom: -30px;
		left: 50%;
		margin-left: -17px;
	}

.listing-card__image {
	display: block;
	position: relative;
	background: #eeeeee;
}

.listing-card__section {
	margin-top: 15px;
	margin-bottom: 0;
	width: 100%;
}


/*
## Main Title

```
	<h1 class="main-title fixie"></h1>
```
*/

.main-title {
	display: inline-block;
	padding: 5px 45px;
	position: relative;
	color: white;
	margin: 0;
	font-size: 3.75em;
	z-index: 1;
	text-decoration: none;
	font-family: "Rokkitt", "serif";
	font-weight: bold;
}

	.main-title:after {
		content: "";
		background: #13a89e;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		-moz-transform: skewX(-20deg);
		-ms-transform: skewX(-20deg);
		-o-transform: skewX(-20deg);
		-webkit-transform: skewX(-20deg);
		transform: skewX(-20deg);
	}

	.main-title:visited,
	.main-title:hover,
	.main-title:active {
		color: white;
		text-decoration: none;
	}

@media screen and (max-width: 480px) {
	.main-title {
		text-align: center;
	}
}

/*
## Main Title - Translucent

```
	<h1 class="main-title main-title--translucent fixie"></h1>
```
*/

.main-title--translucent:after {
	opacity: 0.7;
}



/*
## Main Title - Megatron

```
	<h1 class="main-title main-title--megatron">
		What's on offer
		<span>while you're here!</span>
	</h1>
```
*/

.main-title--megatron {
	font-size: 92px;
	line-height: 1;
	color: white;
	font-family: Norican, serif;
	font-weight: normal;
}

	.main-title--megatron span {
		display: block;
		font-size: 35px;
		font-family: "Rokkitt", "serif";
		margin-top: -5px;
		text-align: left;
	}

@media screen and (max-width: 480px) {
	.main-title--megatron span {
		font-size: 25px;
		text-align: center;
	}
}
/*
## Main Title - Large

```
	<h1 class="main-title main-title--large fixie"></h1>
```
*/

.main-title--large {
	font-size: 58px;
	padding: 7px 30px 0px;
}

@media all and (max-width: 480px) {
	.main-title--large {
		font-size: 24px;
		width: 95%;
		padding: 5px 25px;
		line-height: 1;
	}
}

/*
## Main Title - Medium

```
	<h1 class="main-title main-title--medium fixie"></h1>
```
*/

.main-title--medium {
	font-size: 40px;
	padding: 5px 25px;
}

@media all and (max-width: 550px) {
	.main-title--medium {
		font-size: 25px;
	}
}

@media all and (max-width: 480px) {
	.main-title--medium {
		margin-bottom: 10px;
		width: 100%;
	}
}


/*
## Listing Title

```
	<div class="listing-title">
		<h1 class="main-title main-title--medium fixie"></h1>
	</div>
```
*/

.listing-title {
	padding: 0 20px;
	position: relative;
	z-index: 3;
	/*margin-top: -30px;*/
	margin-top: -35px;
}


/*
## Banner

```
	<div class="banner">
		<div class="banner__image js-lazyimage lazyimage" data-src="http://placehold.it/1000x424" data-src-medium="http://placehold.it/768x424" data-src-small="http://placehold.it/420x424">
			<div class="banner__loader">
				<div class="pace-progress">
					<div class="pace-progress-inner"></div>
				</div>
			</div>
		</div>
		<h1 class="banner__title main-title">Stay</h1>
	</div>
```
*/

.banner {
	position: relative;
	overflow: hidden;
	height: 425px;
	background-color: #000;
	text-align: center;
}

	.banner:after {
		content: "";
		display: inline-block;
		position: relative;
		height: 100%;
		vertical-align: middle;
	}

.banner__image {
	position: absolute;
	height: 100%;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	-webkit-backface-visibility: hidden;
	opacity: 0.8;
}

.banner__loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #252525;
	opacity: 1;
	-moz-transition: .2s opacity ease-out;
	-o-transition: .2s opacity ease-out;
	-webkit-transition: .2s opacity ease-out;
	transition: .2s opacity ease-out;
}

.lazyloaded .banner__loader {
	opacity: 0;
}

.banner__loader .pace-progress {
	top: auto;
	bottom: 0;
	z-index: auto;
}

.banner__title {
	vertical-align: middle;
	margin-top: 135px;
}

@media all and (max-width: 800px) {
	.banner {
		height: 45%;
	}

	.banner__title {
		font-size: 50px;
	}
}

@media all and (max-width: 480px) {
	.banner__title {
		font-size: 34px;
	}

	img.banner__title {
		margin-top: 155px;
	}

	img.main-title {
		padding: 5px 10px;
	}
}

@media screen and (max-width: 320px) and (orientation: landscape), screen and (max-height: 568px) and (orientation: landscape) {
	.banner {
		height: 60%;
	}
}


/*
## Banner - Vertical Aligned Title

add ```banner__title--vertical-aligned``` modifier to ```banner__title```

```
	<div class="banner">
		<div class="banner__image js-lazyimage lazyimage" data-src="http://placehold.it/1000x424" data-src-medium="http://placehold.it/768x424" data-src-small="http://placehold.it/420x424">
			<div class="banner__loader">
				<div class="pace-progress">
					<div class="pace-progress-inner"></div>
				</div>
			</div>
		</div>
		<h1 class="banner__title main-title">Stay</h1>
	</div>
```
*/

.banner__title--vertical-aligned {
	margin-top: 0;
	vertical-align: middle;
}


/*
## Banner - Large

```
	<div class="banner banner--large">
		<div class="banner__image js-lazyimage lazyimage" data-src="http://placehold.it/1000x424" data-src-medium="http://placehold.it/768x424" data-src-small="http://placehold.it/420x424">
			<div class="banner__loader">
				<div class="pace-progress">
					<div class="pace-progress-inner"></div>
				</div>
			</div>
		</div>
		<h1 class="banner__title main-title">Stay</h1>
	</div>
```
*/


.banner--large {
	height: 600px;
}

@media screen and (max-width: 480px) {
	.banner--large {
		height: 190px;
	}
}

/*
## Banner - Medium

```
	<div class="banner banner--medium">
		<div class="banner__image js-lazyimage lazyimage" data-src="http://placehold.it/1000x424" data-src-medium="http://placehold.it/768x424" data-src-small="http://placehold.it/420x424">
			<div class="banner__loader">
				<div class="pace-progress">
					<div class="pace-progress-inner"></div>
				</div>
			</div>
		</div>
		<h1 class="banner__title main-title">Stay</h1>
	</div>
```
*/


.banner--medium {
	height: 290px;
}

@media all and (max-width: 800px) {
	.banner--medium {
		height: 190px;
	}
}

@media all and (max-width: 480px) {
	.banner--medium {
		height: 140px;
	}
}


/*
## Banner - Small

```
	<div class="banner banner--small">
		<div class="banner__image js-lazyimage lazyimage" data-src="http://placehold.it/1000x424" data-src-medium="http://placehold.it/768x424" data-src-small="http://placehold.it/420x424">
			<div class="banner__loader">
				<div class="pace-progress">
					<div class="pace-progress-inner"></div>
				</div>
			</div>
		</div>
		<h1 class="banner__title main-title">Stay</h1>
	</div>
```
*/

.banner--small {
	height: 150px;
}

/*
## Banner - Extra Small

```
	<div class="banner banner--extra-small">
		<div class="banner__image js-lazyimage lazyimage" data-src="http://placehold.it/1000x424" data-src-medium="http://placehold.it/768x424" data-src-small="http://placehold.it/420x424">
			<div class="banner__loader">
				<div class="pace-progress">
					<div class="pace-progress-inner"></div>
				</div>
			</div>
		</div>
		<h1 class="banner__title main-title">Stay</h1>
	</div>
```
*/

.banner--extra-small {
	height: 120px;
}



/*
## Filter

```
	<div class="filter">
		<h3 class="filter__title fixie"></h3>
		<div class="filter__control">
			<select>
				<option value="1">Option 1</option>
				<option value="2">Option 2</option>
				<option value="3">Option 3</option>
				<option value="4">Option 4</option>
			</select>
		</div>
		<div class="filter__control">
			<input type="text" />
		</div>
		<div class="filter__control">
			<button class="button">Go</button>
		</div>
	</div>
```
*/

.filter {
	text-align: center;
}

.filter__title {
	color: #009999;
	font-weight: normal;
	margin-bottom: 25px;
}

	.filter__title .icon {
		display: inline-block;
		font-size: 25px;
		color: #009999;
		vertical-align: middle;
		margin-right: 15px;
	}

.filter__control {
	display: inline-block;
	position: relative;
	padding: 0;
	/*margin-right: 12px;*/
	vertical-align: top;
	text-align: left;
}

.filter .button {
	/*margin-left: 15px;*/
}

@media screen and (max-width: 640px) {
	.filter__control {
		width: 100%;
		text-align: center;
	}
}

/*
## Filter Modifier

```
	<div class="filter-modifier clearfix">
		<p class="filter-modifier__meta">
			Showing all <span>999 results</span>
		</p>

		<div class="fitler-modifier__controls">
			<div class="filter-modifier__control">
				<p class="filter-modifier__control-title">Filter results by price</p>
				<select>
					<option value="1">Option 1</option>
					<option value="2">Option 2</option>
					<option value="3">Option 3</option>
					<option value="4">Option 4</option>
				</select>
			</div>
		</div>
	</div>
```
*/

.filter-modifier {
	position: relative;
	margin-bottom: 25px;
	letter-spacing: 0.6px;
}

.filter-modifier__meta {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
	color: #999;
}

	.filter-modifier__meta span {
		display: block;
		color: #009999;
	}

.filter-modifier p {
	margin: 0;
	display: inline-block;
}

.filter-modifier__controls {
	float: right;
	/*margin-top: 5px;*/
}

.filter-modifier__control {
	position: relative;
	display: inline-block;
	vertical-align: top;
}

p.filter-modifier__control-title {
	display: inline-block;
	margin: 13px;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
	color: #999;
	/* letter-spacing: 1px; */
}

@media screen and (max-width: 480px) {
	.filter-modifier {
		text-align: center;
	}

	.filter-modifier__meta,
	.filter-modifier__controls,
	.filter-modifier__control {
		display: block;
		width: 100%;
	}

	p.filter-modifier__control-title {
		margin: 13px 0 0 0;
	}
}

/*
## Box

simple box with consistent spacing and a title, with consistent margin bottom

```
	<div class="box">
		<h4 class="box__title fixie"></h4>
	</div>
```
*/

.box {
	background: white;
	padding: 25px 40px;
	margin-bottom: 10px;
}

.box__title {
	color: #009999;
	font-family: "Lato", "sans-serif", sans-serif, arial;
	text-transform: uppercase;
	font-size: 16px;
	margin-bottom: 20px;
}

.study-sub .box__title {
	font-weight: 800;
}

.box .button,
.box .button-outlined {
	padding: 11px 25px;
	font-weight: bold;
}

.box p {
	margin-bottom: 12px;
}

.box--small {
	padding: 25px;
}

@media screen and (max-width: 480px) {
	.box {
		padding: 5px;
		text-align: center;
	}
}

/*
## Cost

```
	<div class="box">
		<div class="cost-container">
			<div class="cost">$9999</div>
			<div class="cost-description__primary">Per Night</div>
			<div class="cost-description__secondary">(Price for 31 March 2015)</div>
		</div>
	</div>
```
*/

.cost-container {
	position: relative;
	/*padding-left: 130px;*/
}

.cost {
	color: #009999;
	font-weight: 100;
	font-size: 40px;
	/*position: absolute;*/
	top: -4px;
	left: 0;
	display: inline-block;
}

.cost-description__primary,
.cost-description__secondary {
	text-transform: uppercase;
	font-weight: 400;
}

.cost-description__primary {
	font-size: 16px;
	color: #009999;
	display: inline-block;
	margin-top: 4px;
}

.cost-description__secondary {
	font-size: 13px;
	color: #999999;
	margin-top: 5px;
	text-transform: none;
}

@media screen and (max-width: 480px) {
	.cost {
		font-size: 30px;
	}
}

/*
## Ticket

```
	<div class="box">
		<div class="ticket-wrapper">
			<div class="price-container"
				<div class="cost">$9999</div>
				<div class="cost-description__secondary">Per Night</div>
			</div>
			<div class="venue-container">

			</div>
		</div>
	</div>
```
*/
.ticket-wrapper {
	position: relative;
}

.price-container {
	height: 100%;
	margin-bottom: 20px;
}

	.price-container:after {
		content: "";
		width: 10px;
		display: inline-block;
		height: 100%;
		vertical-align: top;
	}

	.price-container div {
		display: inline-block;
		vertical-align: top;
		height: 50px;
	}

.price {
	color: #009999;
	font-weight: 100;
	font-size: 40px;
	line-height: 0.7;
	margin-right: 7px;
}

.price-description__primary,
.price-description__secondary {
	text-transform: uppercase;
	font-weight: 400;
}

.price-description__primary {
	font-size: 16px;
	color: #009999;
}

.price-description__secondary {
	font-size: 12px;
	color: #999999;
	width: 200px;
}

.price-container {
	border-bottom: 1px solid #ccc;
}

	.price-container:last-child {
		border-bottom: none;
	}

.venue-container h3 {
	color: #009999;
	font-size: 25px;
	margin: 10px 0 0;
}

.venue-container h4 {
	color: #999;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 0px;
}


/*
## Featured Text

```
	<div class="featured-text">
		<p class="fixie"></p>
	</div>
```
*/

.featured-text p {
	font-size: 24px;
	line-height: 1.2;
	color: #009999;
	font-family: "Rokkitt","serif";
}


/*
## Section Text

section text with left aligned title

```
	<div class="section-text">
		<h4 class="section-text__header fixie"></h4>
		<div class="section-text__body">
			<p class="fixie"></p>
		</div>
	</div>
```
*/

.section-text {
	overflow: hidden;
	/*margin-top: 20px;*/
	border-top: 3px solid #e3e3e3;
	padding-top: 25px;
	padding-bottom: 25px;
}

	.section-text.section-text--block h3 {
		color: #009999;
		font-size: 22px;
		line-height: 0.5;
	}

.section-text__header {
	font-size: 12px;
	text-transform: uppercase;
	color: #999;
	font-family: "Lato", "sans-serif", sans-serif, arial;
	float: left;
	max-width: 160px;
	letter-spacing: 1px;
}

.section-text__body {
	margin-left: 180px;
}

@media all and (max-width: 480px) {
	.section-text.section-text--block h3 {
		line-height: 1;
	}
}

/*
## Section Text - Block

```
	<div class="section-text section-text--block">
		<h4 class="section-text__header fixie"></h4>
		<div class="section-text__body">
			<p class="fixie"></p>
		</div>
	</div>
```
*/

.section-text--block .section-text__header {
	float: none;
	max-width: none;
	margin-bottom: 20px;
}

.section-text--block .section-text__body {
	margin-left: 0;
}


@media all and (max-width: 800px) {
	.section-text p {
		font-weight: bold;
	}
}


@media all and (max-width: 480px) {
	.section-text--block .section-text__header,
	.section-text__header {
		float: none;
		width: 100%;
		margin-bottom: 15px;
	}

	.section-text__body {
		width: 100%;
		margin-left: 0;
	}
}

/*
## Details Page Blocks
*/

.block-longdesc {
	padding-bottom: 40px;
}

.block-contact .section-text__body {
	margin-left: 168px;
	margin-top: -5px;
}

.block-location {
	padding-top: 18px;
	padding-bottom: 32px;
}

.block-booking {
	padding-top: 28px;
	padding-bottom: 55px;
}

	.block-booking .section-text__header {
		margin-bottom: 10px;
	}

	.block-booking .section-text__body {
		margin-top: 40px;
	}

@media screen and (max-width: 480px) {
	.iconed-text,
	.block-contact .section-text__body {
		width: 100%;
		margin-left: 0;
	}

	.block-booking .section-text__body {
		margin-top: 0;
	}

	.section-text {
		padding: 15px 0;
	}
}


/*
## Fullscreen Slider

```
```
*/

.fullscreen-slider,
.fullscreen-slider .slides {
	height: 100%;
	background: #000;
}

.fullscreen-slide {
	position: relative;
	height: 100%;
}

.fullscreen-slide__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-color: #000;
}

	.fullscreen-slide__image.banner-poster {
		display: none;
	}

.fullscreen-slide__loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 1;
	-webkit-transition: .2s opacity ease-out;
	-moz-transition: .2s opacity ease-out;
	-o-transition: .2s opacity ease-out;
	transition: .2s opacity ease-out;
}

.lazyloaded .fullscreen-slide__loader {
	opacity: 0;
}

.fullscreen-slide__loader .pace-progress {
	top: auto;
	bottom: 0;
	z-index: auto;
}

.fullscreen-slide__preloader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 235px;
	margin-left: -123px;
	margin-top: -60px;
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.6s ease-in-out;
	-moz-transition: opacity 0.6s ease-in-out;
	-ms-transition: opacity 0.6s ease-in-out;
	-o-transition: opacity 0.6s ease-in-out;
	transition: opacity 0.6s ease-in-out;
}

.lazyloaded .fullscreen-slide__preloader {
	opacity: 0;
	visibility: hidden;
}

@media all and (max-width: 800px) {
	.fullscreen-slide__preloader {
		width: 160px;
		height: 60px;
		margin-left: -80px;
		margin-top: -6%;
	}

	.uil-ellipsis-css {
		width: 35px;
		height: 35px;
		margin-top: -15px;
		margin-left: 45px;
		transform: scale(0.17);
		-webkit-transform: scale(0.17);
		-moz-transform: scale(0.17);
		-ms-transform: scale(0.17);
		-o-transform: scale(0.17);
		transform: scale(0.17);
	}
}

@media screen and (max-width: 360px), screen and (max-height: 640px) {
	.fullscreen-slide__preloader {
		margin-top: -35px;
	}
}

@media screen and (max-width: 320px), screen and (max-height: 480px) {
	.fullscreen-slide__preloader {
		width: 120px;
		height: 60px;
		margin-left: -60px;
		margin-top: -40px;
	}

	.uil-ellipsis-css {
		width: 35px;
		height: 35px;
		margin-top: -15px;
		margin-left: 25px;
	}
}



.fullscreen-slide__video {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.6s ease-in-out;
	-moz-transition: opacity 0.6s ease-in-out;
	-ms-transition: opacity 0.6s ease-in-out;
	-o-transition: opacity 0.6s ease-in-out;
	transition: opacity 0.6s ease-in-out;
}

.fullscreen-slide__caption-wrapper {
	position: relative;
	height: 100%;
	text-align: center;
	opacity: 1;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.20);
}

	.fullscreen-slide__caption-wrapper:after {
		content: "";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

.fullscreen-slide__caption {
	display: inline-block;
	position: relative;
	color: white;
	vertical-align: middle;
	max-width: 980px;
	-webkit-transition: opacity 0.6s ease-in-out;
	-moz-transition: opacity 0.6s ease-in-out;
	-ms-transition: opacity 0.6s ease-in-out;
	-o-transition: opacity 0.6s ease-in-out;
	transition: opacity 0.6s ease-in-out;
}

	.fullscreen-slide__caption h2 {
		font-weight: bold;
		font-size: 99px;
		line-height: 100px;
		font-family: Rokkitt, "Times New Roman", Times, serif;
		margin-bottom: 37px;
	}

	.fullscreen-slide__caption .button {
		font-size: 18px;
		padding: 12px 37px;
		letter-spacing: 1px;
		border-radius: 8px;
		white-space: nowrap;
		height: auto;
	}

.fullscreen-slide__caption--full-width {
	width: auto;
	max-width: none;
}

.lazyloading .fullscreen-slide__caption,
.lazyload .fullscreen-slide__caption {
	opacity: 0;
	-webkit-transition: opacity 0.6s ease-in-out;
	-moz-transition: opacity 0.6s ease-in-out;
	-ms-transition: opacity 0.6s ease-in-out;
	-o-transition: opacity 0.6s ease-in-out;
	transition: opacity 0.6s ease-in-out;
}

.lazyloaded .fullscreen-slide__caption {
	opacity: 1;
}


.fulscreen-slider__direction-nav {
	padding: 0;
	margin: 0;
	list-style: none;
}

	.fulscreen-slider__direction-nav a {
		position: absolute;
		top: 50%;
		text-decoration: none;
		z-index: 2;
		color: white;
		font-size: 36px;
		opacity: 0.8;
		text-shadow: 2px 8px 19px -5px rgba(0,0,0,0.44);
	}

		.fulscreen-slider__direction-nav a:hover {
			opacity: 1;
			color: #3cc;
		}

.fulscreen-slider__prev {
	left: 20px;
}

.fulscreen-slider__next {
	right: 20px;
}

.fulscreen-slider__direction-nav .fulscreen-slider__disabled {
	display: none;
}

@media all and (max-width: 980px) {
	.fullscreen-slide__caption {
		max-width: 760px;
	}

		.fullscreen-slide__caption h2 {
			font-size: 70px;
			line-height: 55px;
		}
}

@media (max-width: 800px) {
	.fullscreen-slide__caption {
		max-width: 560px;
	}

		.fullscreen-slide__caption h2 {
			font-size: 50px;
			line-height: 50px;
		}

	.fullscreen-slide__image.banner-poster {
		display: block;
	}

	.fullscreen-slide__image.banner-video {
		display: none;
	}
}

@media (max-width: 580px) {
	.fullscreen-slide__caption {
		max-width: 420px;
	}

		.fullscreen-slide__caption h2 {
			font-size: 30px;
			line-height: 30px;
		}
}

@media (max-width: 480px) {
	.fullscreen-slide__caption {
		max-width: 280px;
	}

	.splash-screen .fullscreen-slide__caption {
		margin-top: -90px;
	}

	.fulscreen-slider__direction-nav {
		display: none;
	}

	.fullscreen-slide__caption .button {
		font-size: 12px;
		width: 100%;
	}
}

@media screen and (max-width: 320px) and (orientation: landscape), screen and (max-height: 568px) and (orientation: landscape) {
	.fullscreen-slide__preloader {
		margin-top: 0px;
	}

	.fullscreen-slide__caption {
		margin-top: 80px;
	}
}

/*
## Whats on Offer

```
	<div class="row whatson-offer">
		<div class="span6 text-right">
			<h2 class="whatson-offer__title">Find out <em>what's on offer</em> while you're here!</h2>
		</div>
		<div class="span6">
			<p>Enter an arrival date in the box below to see a selection of things to see, do, eat, drink, places to stay and events to attend!</p>
			<div class="whatson-offer__form">
				<div class="whatson-offer__date-holder">
					<div class="form-control form-control-datepicker date js-datepicker">
						<input type="text" />
						<i class="add-on icon-calendar"></i>
					</div>
				</div>
				<a href="#" class="whatson-offer__form-button button">Search</a>
			</div>
		</div>
	</div>
```
*/

.whatson-offer {
	padding-top: 58px;
	padding-bottom: 58px;
}

.whatson-offer-title-wrapper {
	text-align: right;
}

.whatson-offer__title {
	color: #3cc;
	font: bold 43px/1 Rokkitt, "Times New Roman", Times, serif;
	text-align: left;
	display: inline-block;
}

	.whatson-offer__title em {
		display: block;
		color: #099;
		font: 92px/1 Norican, serif;
		margin: -10px 0;
	}

.whatson-offer__date-holder {
	display: inline-block;
	margin-right: 23px;
	width: 255px;
}

.whatson-offer__form-button {
	vertical-align: top;
}

@media all and (max-width: 800px) {
	.whatson-offer {
		padding: 20px 15px;
	}

		.whatson-offer div {
			text-align: center;
		}

	.whatson-offer__title {
		font-size: 32px;
	}

		.whatson-offer__title em {
			font-size: 74px;
		}

	.whatson-offer p {
		font-size: 14px;
	}

	.whatson-offer__date-holder {
		width: 100%;
	}
}

@media all and (max-width: 480px) {
	.whatson-offer__title {
		font-size: 28px;
	}

		.whatson-offer__title em {
			font-size: 62px;
		}

	.whatson-offer p {
		font-size: 12px;
	}
}


@media (max-width: 800px) {

	.whatson-offer-title-wrapper {
		text-align: left;
	}
}


/*
## Seee and do section
*/

.see-and-do-section__tablet-cta {
	text-align: center;
	display: none;
}

@media (max-width: 800px) {
	.see-and-do-section__description {
		margin-bottom: 20px;
	}

	.see-and-do-section__tags {
		display: none;
	}

	.see-and-do-section__tablet-cta {
		display: block;
	}
}


/*
## Whats On Section
*/

@media (max-width: 800px) {

	.whats-on-section {
		margin-bottom: 0;
	}
}


/*
## Stay Section
*/

@media (max-width: 800px) {

	.stay-section__content {
		margin-bottom: 20px;
	}
}


/*
## Eat and Drink Section
*/

@media (max-width: 800px) {

	.eat-and-drink-section__content {
		margin-bottom: 20px;
	}
}


/*
## Tag List

```
	<p class="tag-list">
		<a href="#" class="button-tag">Surf Highway 45 (8)</a>
		<a href="#" class="button-tag">Surf Highway 45 (8)</a>
		<a href="#" class="button-tag">Surf Highway 45 (8)</a>
	</p>
```
*/

.tag-list .button-tag {
	margin: 0 0 8px 6px;
}


/*
## Options Search

```
	<div class="options-search">
		<h3 class="options-search__title">
			<i class="icon-search"></i>
			Search for Accommodation options in Taranaki
		</h3>
		<div class="options-search__body">
			<select class="button-style location">
				<option class="title">Location </option>
				<option>Location 1</option>
				<option>Location 2</option>
				<option>Location 3</option>
			</select>
			<a href="/" class="options-search__filter-submit button">Search</a>
		</div>
	</div>
```
*/

.options-search__title {
	color: #099;
	font-size: 30px;
	line-height: 1;
	font-family: Rokkitt, "Times New Roman", Times, serif;
	margin-bottom: 33px;
	font-weight: normal;
}

	.options-search__title i {
		font-size: 24px;
		display: inline-block;
		vertical-align: top;
		margin: 3px 7px 0 0;
	}

.options-search__filter {
	display: inline-block;
	margin-right: 12px;
	margin-bottom: 12px;
	vertical-align: top;
}

@media screen and (max-width: 480px) {
	.options-search__filter {
		width: 100%;
	}
}
/*
## Operator Logo - Ribbon

```
	<a href="#" class="operator-logo-ribbon" title="Operator">
		<img src="http://placehold.it/100x100" alt="Operator" />
	</a>
```
*/

.operator-logo-ribbon {
	display: inline-block;
	width: 90px;
	height: 100px;
	background: url("/VT/images/logo-ribbon.png") no-repeat center center transparent;
	padding: 20px 25px 10px 10px;
}


.carousel-slider-with-logo {
	position: relative;
}

	.carousel-slider-with-logo .operator-logo-ribbon {
		position: absolute;
		right: 20px;
		top: -9px;
		z-index: 3;
	}

.carousel-slider {
	position: relative;
	overflow: hidden;
}

.carousel-slider__direction-nav {
	padding: 0;
	margin: 0;
	list-style: none;
}

.carousel-slider__prev,
.carousel-slider__next {
	transition: all 0.4s ease;
	position: absolute;
	text-decoration: none;
	color: white;
	top: 50%;
	margin-top: -30px;
	z-index: 2;
	font-size: 40px;
	opacity: 0.5;
	padding: 10px;
}

	.carousel-slider__prev:hover,
	.carousel-slider__next:hover {
		opacity: 1;
	}

.carousel-slider:hover .carousel-slider__prev,
.carousel-slider:hover .carousel-slider__next {
	background: #000;
	transition: all 0.4s ease;
}

.carousel-slider__prev {
	left: 0;
}

.carousel-slider__next {
	right: 0;
}

.carousel-slider__disabled {
	display: none;
}

.carousel-slider__control-paging {
	position: absolute;
	bottom: 25px;
	right: 10px;
	z-index: 10;
}

	.carousel-slider__control-paging li {
		display: inline-block;
		margin: 0 2px;
	}

		.carousel-slider__control-paging li a {
			width: 11px;
			height: 11px;
			display: block;
			background: #666;
			background: rgba(0, 0, 0, 0.5);
			cursor: pointer;
			text-indent: -9999px;
			-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
			-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
			-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
			box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
			-webkit-border-radius: 20px;
			-moz-border-radius: 20px;
			border-radius: 20px;
		}

			.carousel-slider__control-paging li a.carousel-slider__active {
				background: #000;
				background: rgba(0, 0, 0, 0.9);
				cursor: default;
			}

.carousel-item .mejs-controls {
	bottom: 35px;
	width: 350px;
	left: 28%;
}

.carousel-item .mejs-mediaelement .me-plugin embed {
	width: 780px;
	height: 390px;
}

/*
## Carousel Item

```
	<div class="carousel-item">
		<div class="pace-progress">
			<div class="pace-progress-inner"></div>
		</div>
		<img src="http://placehold.it/780x400" />
	</div>
```
*/

.carousel-item {
	position: relative;
	overflow: hidden;
	height: 0;
	padding-bottom: 50%;
	background-color: #eee;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

	.carousel-item img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background: #eee;
	}


.carousel-item--landscape {
	padding-bottom: 43%;
}


/*
## Carousel Item - With Background image

```
	<div class="carousel-item lazyload" data-bgset="">
		<div class="carousel-item__loader">
			<div class="pace-progress">
				<div class="pace-progress-inner"></div>
			</div>
		</div>
		<img class="hidden" src="http://placehold.it/780x400" />
	</div>
```
*/

.carousel-item__loader {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #eee;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-transition: opacity 200ms ease-in-out;
	-moz-transition: opacity 200ms ease-in-out;
	-o-transition: opacity 200ms ease-in-out;
	transition: opacity 200ms ease-in-out;
	opacity: 1;
}

.carousel-item.lazyloaded .carousel-item__loader {
	opacity: 0;
}


/*
## Breadcrumbs

```
	<p class="breadcrumbs">
		<a class="breadcrumb__link" href="/visit/home.aspx">Visit</a>
		<span class="breadcrumb__separator">></span>
		<a class="breadcrumb__link" href="/visit/stay.aspx">Stay</a>
		<span class="breadcrumb__separator">></span>
		<span class="breadcrumb__active"><%# Eval("Name") %></span>
	</p>
```
*/

p.breadcrumbs {
	margin-top: 10px;
	margin-bottom: 10px;
	color: #666;
}

.CMSBreadCrumbsLink,
.breadcrumb__link,
.breadcrumb__separator,
.breadcrumb__active,
.CMSBreadCrumbsLink,
.CMSBreadCrumbsCurrentItem {
	display: inline-block;
	text-decoration: none;
	color: #666;
}

	.CMSBreadCrumbsLink:visited,
	.CMSBreadCrumbsLink:active,
	.breadcrumb__link:visited,
	.breadcrumb__link:active,
	.CMSBreadCrumbsLink:visited,
	.CMSBreadCrumbsLink:active {
		color: #666;
	}

.breadcrumb__separator {
	margin: 0 5px;
}


.CMSBreadCrumbsCurrentItem,
.breadcrumb__active {
	color: #13a89e;
}


/*
## Map

```
	<div class="lazyload map">
		<div class="js-map map__view" data-latitude="<%# Eval("Latitude") %>" data-longitude="<%# Eval("Longitude") %>" data-address="<%# Eval("PhysicalAddress") %>"></div>
		<div class="map__loader">
			<div class="pace-progress">
				<div class="pace-progress-inner"></div>
			</div>
		</div>
	</div>
```
*/

.map {
	position: relative;
	height: 0;
	overflow: hidden;
	padding-bottom: 45%;
	background: #eee;
}

.map__loader,
.map__view {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.map__view {
	background: #eee;
}

.map__loader {
	opacity: 1;
	-moz-transition: .2s ease;
	-o-transition: .2s ease;
	-webkit-transition: .2s ease;
	transition: .2s ease;
	background: #eee;
}

.map--initialized .map__loader {
	opacity: 0;
	visibility: hidden;
}

.map img {
	max-width: none;
}

@media screen and (max-width: 480px) and (orientation: landscape), screen and (max-height: 568px) and (orientation: landscape) {
	.map {
		width: 80%;
		margin: 0 auto;
	}
}
/*
## Map - Fixed Height

```
	<div class="lazyload map map--fixed-height">
		<div class="js-map map__view" data-latitude="<%# Eval("Latitude") %>" data-longitude="<%# Eval("Longitude") %>" data-address="<%# Eval("PhysicalAddress") %>"></div>
		<div class="map__loader">
			<div class="pace-progress">
				<div class="pace-progress-inner"></div>
			</div>
		</div>
	</div>
```
*/

.map--fixed-height {
	padding-bottom: 750px;
}


/*
## Info Box

```
	<div class="listing-card info-box">
		<div class="listing-card__image">
			<img src="http://placehold.it/180x120" />
		</div>

		<div class="iconed-text iconed-text--small listing-card__section">
			<span class="iconed-text__icon icon icon-mapmarkerempty"></span>
			<div class="iconed-text__content">
				<h6>Address</h6>
				<p>1 Egmont Street, New Plymouth</p>
			</div>
		</div>

		<div class="iconed-text iconed-text--small listing-card__section">
			<span class="iconed-text__icon icon icon-Phone"></span>
			<div class="iconed-text__content">
				<h6>Phone</h6>
				<p>+64 9 386 9940</p>
			</div>
		</div>
	</div>
```
*/

.infoBox > img {
	z-index: 1;
	position: absolute !important;
	right: 15px;
	top: 15px;
	margin: 0 !important;
}

.info-box {
	width: 206px;
}

	.info-box .listing-card__image img {
		width: 100%;
		display: block;
	}


/*
## Booking Table

```
	<table class="booking-table" cellspacing="0" cellpadding="0">
		<thead>
			<tr>
				<td>Name</td>
				<td>Day 1</td>
				<td>Day 2</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Row 1</td>
				<td>Value 1</td>
				<td>Value 2</td>
			</tr>
			<tr>
				<td>Row 2</td>
				<td>Value 1</td>
				<td>Value 2</td>
			</tr>
		</tbody>
	</table>
```
*/
.booking-table {
	margin-top: 35px;
}

.booking-table-header {
	background: #1aa39d;
}

	.booking-table-header td {
		color: white;
		text-transform: uppercase;
		font-weight: 900;
		font-size: 12px;
		padding: 15px;
		letter-spacing: 1px;
		border-left: 2px solid #fff;
		border-right: 2px solid #fff;
		min-width: 90px;
	}

		.booking-table-header td:first-child {
			border-left: none;
		}

		.booking-table-header td:last-child {
			border-right: none;
		}

	.booking-table-header .booking-cell-shortday {
		display: block;
		text-transform: uppercase;
	}

	.booking-table-header .booking-cell-shortdate {
		font-weight: 100;
		text-transform: capitalize;
	}

.booking-table td {
	height: 55px;
}

.booking-table tbody td {
	border: 2px solid #ccc;
}

.booking-table tbody {
	border-left: 3px solid #ccc;
	border-right: 4px solid #ccc;
}

	.booking-table tbody tr:nth-child(even) {
		background: #fff;
	}

	.booking-table tbody tr:nth-child(odd) {
		background: #e7e7e8;
	}

.bookit-cell-name {
	cursor: pointer;
}

.booking-cell-inner {
	display: block;
	padding: 15px;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
}

.booking-cell-name .booking-cell-inner {
	text-align: left;
}

.booking-cell-inner.booking-cell-link {
	text-decoration: none;
	color: #009999;
}

.booking-cell {
	cursor: pointer;
}

	.booking-cell:hover {
		background: repeating-linear-gradient( -45deg, transparent, transparent 5px, rgba(88, 176, 172, 0.70) 0px, rgba(88, 176, 172, 0.70) 10px);
	}

	.booking-cell.booking-cell-soldout {
		color: #fff;
		background-color: #58b0ac;
		cursor: default;
	}

@media screen and (max-width: 800px) {
	.booking-table-wrapper {
		overflow: scroll;
	}
}

@media screen and (max-width: 480px) {
	.booking-table {
		margin-top: 0;
	}
}

/*
## Tooltips
jquery ui tooltip styles.
To implement, add ```.js-tooltip``` class to the link. Make sure link has a ```title``` attribute
```
	<p>This is a <a href="#" class="js-tooltip" title="Tooltip title">tooltip</a></p>
```
*/

.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 20;
	max-width: 300px;
	background: black;
	color: white;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	line-height: 1.3;
	text-align: center;
	opacity: 0.9;
}

	.ui-tooltip:after {
		content: "";
		width: 0;
		height: 0;
		border-width: 8px;
		border-style: solid;
		border-color: black transparent transparent transparent;
		position: absolute;
		bottom: -16px;
		left: 50%;
		margin-left: -4px;
	}

.ui-tooltip-bookit {
	padding: 10px;
	position: absolute;
	z-index: 20;
	max-width: 140px;
	background: black;
	color: white;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	line-height: 1.3;
	text-align: center;
	opacity: 0.9;
}

	.ui-tooltip-bookit:after {
		content: "";
		width: 0;
		height: 0;
		border-width: 15px;
		border-style: solid;
		border-color: black transparent transparent transparent;
		position: absolute;
		bottom: -30px;
		left: 20%;
		margin-left: -6px;
	}

		.ui-tooltip-bookit:after .booking-cell {
			background: repeating-linear-gradient( -45deg, transparent, transparent 5px, rgba(88, 176, 172, 0.70) 0px, rgba(88, 176, 172, 0.70) 10px);
		}

.ui-helper-hidden-accessible {
	display: none;
}


/*
## Related Listing

```
	<div class="related-listing">
		<h2 class="text-center related-listing__title">Other Listings you may like</h2>
		<p class="fixie"></p>
	</div>
```
*/

.related-listing {
	padding-top: 50px;
	padding-bottom: 50px;
}

.related-listing__title {
	font-family: "Lato", "sans-serif", sans-serif, arial;
	font-weight: 300;
	font-size: 30px;
	color: #009999;
	text-transform: uppercase;
	margin-bottom: 45px;
}


/*
## Signup form - Section

```
	<div class="signup-form-section">
		<div class="container clearfix">
			<p><strong class="mark">Sign up</strong> to our newsletter & recieve all the latest news & hot deals in Taranaki</p>
			<div class="signup-form-inline">
				<div class="form-control form-control-secondary name">
					<input type="text" class="name" placeholder="Name">
				</div>
				<div class="form-control form-control-secondary">
					<input type="email" placeholder="Email">
				</div>
				<div class="form-control form-control-submit">
					<input type="submit" value="Submit">
				</div>
			</div>
		</div>
	</div>
```
*/

.signup-form-section {
	background: #252525;
	padding: 20px 0;
	color: #fff;
}

	.signup-form-section .mark {
		color: #099;
	}

	.signup-form-section p {
		font-size: 17px;
		line-height: 40px;
		margin: 0 10px 0 0;
		float: left;
	}

	.signup-form-section .signup-form-inline {
		float: right;
	}

	.signup-form-section .ErrorLabel {
		display: none;
	}

	.signup-form-section .InfoLabel {
		background: none;
		color: #fff;
		margin: 0;
		padding: 0;
	}

		.signup-form-section .InfoLabel h2 {
			color: #099;
			display: inline-block;
			font-size: 34px;
			float: left;
			margin-right: 10px;
			margin-bottom: 0px;
		}

		.signup-form-section .InfoLabel p {
			display: inline-block;
		}

/*
## Signup form - Inline

```
	<div class="signup-form-inline">
		<div class="form-control form-control-secondary name">
			<input type="text" class="name" placeholder="Name">
		</div>
		<div class="form-control form-control-secondary">
			<input type="email" placeholder="Email">
		</div>
		<div class="form-control form-control-submit">
			<input type="submit" value="Submit">
		</div>
	</div>
```
*/
.signup-form-inline .form-control {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin-right: 8px;
	height: 42px;
}

.signup-form-inline .require-validators {
	position: absolute;
	top: -13px;
	z-index: 1;
	font-size: 12px;
}

.signup-form-inline .name {
	width: 152px;
}

.signup-form-inline input.form-control {
	margin-bottom: 0px;
}

.signup-form-inline input.FormButton {
	height: 100%;
}

.signup-form-inline .EditingFormErrorLabel {
	background: none;
	color: red;
	position: absolute;
	top: 45px;
	font-size: 11px;
	border: none;
	padding: 0;
}


/*
## Contact Form

```
	<div class="contact-form-inner">
		<h4 class="contact-form__title">Drop Us A Line!</h4>

		<div class="contact-form__field contact-form__first-name form-control">
			<input type="text" placeholder="First Name" />
		</div>
		<div class="contact-form__field contact-form__last-name form-control">
			<input type="text" placeholder="Last Name" />
		</div>
		<div class="contact-form__field contact-form__email form-control">
			<input type="email" placeholder="Email" />
		</div>
		<div class="contact-form__field contact-form__enquiry form-control">
			<textarea></textarea>
		</div>
		<div class="contact-form__field contact-form__submit form-control-submit">
			<input type="submit" />
		</div>
	</div>
```
*/

.contact-form__field {
	margin: 0 20px 15px 0;
	min-width: 200px;
}

.contact-form__title {
	color: #099;
	font-weight: normal;
	margin-bottom: 20px;
}

.contact-form__first-name,
.contact-form__last-name {
	display: inline-block;
}

.contact-form__enquiry textarea {
	min-height: 300px;
}

.contact-form-inner {
	margin-left: 50px;
}

@media (max-width: 800px) {

	.contact-form__first-name,
	.contact-form__last-name {
		display: block;
	}

	.contact-form__field {
		margin-right: 0;
	}

	.contact-form__enquiry textarea {
		min-height: 0;
	}

	.contact-form-inner {
		margin-left: 0px;
	}
}

@media (max-width: 320px) {
	.contact-form-and-map .map__view {
		height: 400px;
	}

	.map--fixed-height {
		padding-bottom: 400px;
	}
}


/*
## Editor Templates
*/

.editor-content {
	overflow: hidden;
	position: relative;
	margin-bottom: 20px;
}

.editor-content__text {
	padding: 0;
}

.editor-content__quote {
	position: absolute;
	top: 0;
	height: 100%;
	width: 400px;
}

	.editor-content__quote:after {
		content: "";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.editor-content__quote blockquote {
		font-family: "Rokkitt","Times New Roman",Times,serif;
		display: inline-block;
		vertical-align: middle;
		color: #099;
		font-size: 28px;
		line-height: 1.2;
		width: 390px;
	}

	.editor-content__quote > blockquote > div a {
		margin-top: 25px;
		background-color: transparent;
		border-color: #009999;
		border-style: solid;
		border-width: 2px;
		display: inline-block;
		padding: 9px 25px;
		border-radius: 6px;
		white-space: nowrap;
		vertical-align: middle;
		cursor: pointer;
		color: #009999;
		font-size: 12px;
		font-weight: normal;
		text-transform: uppercase;
		text-decoration: none;
		text-align: center;
	}

		.editor-content__quote > blockquote > div a:hover {
			background-color: #099;
			border-color: transparent;
			color: #fff;
		}

.editor-content--left-quote .editor-content__text {
	float: right;
	margin-left: 420px;
}

.editor-content--right-quote .editor-content__text {
	margin-right: 420px;
}

.editor-content--left-quote .editor-content__quote {
	left: 0;
}

.editor-content--right-quote .editor-content__quote {
	right: 0;
}

.editor-content--left-image .editor-content__image {
	float: left;
	margin: 6px 15px 15px 0;
	clear: right;
	width: 50%;
	max-width: 100%;
}

.editor-content--right-image .editor-content__image {
	float: right;
	margin: 6px 0 15px 15px;
	clear: left;
	width: 50%;
	max-width: 100%;
}

.editor-content--imagescript-primary div,
.editor-content--imagescript-secondary div,
.editor-content--imagescript-third div,
.editor-content--image--full,
.editor-content--image--half {
	margin-bottom: 15px;
}

.editor-content--image--full {
	padding: 0;
}

	.editor-content--image--full img {
		width: 100%;
		height: auto !important;
		padding: 0 !important;
	}

.editor-content--image--half img {
	width: 100%;
	height: auto !important;
}

.editor-content--image--half:first-child {
	padding-left: 0px;
}

.editor-content--image--half:last-child {
	padding-right: 0px;
}

.editor-content__image--big img {
	width: 100%;
	height: auto !important;
}

.editor-content__image--small img {
	width: 100%;
	height: auto !important;
}

@media screen and (max-width: 800px) {
	.editor-content--left-image .editor-content__image {
		width: 300px;
		height: 198px;
	}
}

@media screen and (max-width: 480px) {
	.editor-content__quote {
		position: static;
		width: 100%;
	}

	.editor-content--left-quote .editor-content__text {
		float: none;
		margin-left: 0px;
	}

	.editor-content--right-quote .editor-content__text {
		margin-right: 0px;
	}

	.editor-content__quote blockquote {
		width: 100%;
		text-align: center;
		line-height: 21px;
	}
}

@media screen and (max-width: 480px) and (orientation: landscape), screen and (max-height: 568px) and (orientation: landscape) {
	.editor-content__quote {
		position: static;
		width: 100%;
	}

	.editor-content--left-quote .editor-content__text {
		float: none;
		margin-left: 0px;
	}

	.editor-content--right-quote .editor-content__text {
		margin-right: 0px;
	}

	.editor-content__quote blockquote {
		width: 100%;
		text-align: center;
		line-height: 21px;
	}
}

/*
## Event Session

```
	<div class="event-session">
		<div class="event-session__content">
			<strong>Thu 14 May</strong><br />
			7:00 - 9:00pm
		</div>
		<a href="#" class="button button-outlined event-session__button">
			<span class="icon icon-heartempty"></span> Save
		</a>
	</div>
```
*/

.event-session {
	position: relative;
	overflow: hidden;
}

.event-session__content {
	padding-right: 120px;
	min-height: 40px;
}

.event-session__button {
	position: absolute;
	right: 0;
	top: 0;
}


@media screen and (max-width: 480px) {
	.event-session {
		text-align: center;
	}

	.event-session__content {
		padding-right: 0px;
	}

	.event-session__button {
		position: static;
	}
}

/*
## Stacked List

```
	<div class="stacked-list-wrapper">
		<ul class="stacked-list">
			<li class="fixie"></li>
			<li class="fixie"></li>
			<li class="fixie"></li>
		</ul>
	</div>
```
*/
.stacked-list-wrapper {
	margin-bottom: 25px;
	text-align: center;
}

.stacked-list {
	padding: 10px 20px;
	margin: 0;
	list-style: none;
	background: #f3f3f3;
}

	.stacked-list li {
		text-align: left;
		padding: 10px 0;
		border-top: 1px solid #e1e1e1;
	}

		.stacked-list li:first-child {
			border-top: none;
		}

.stacked-list__button {
	background: #f3f3f3;
	color: #999;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-top: 2px solid #e1e1e1;
}

	.stacked-list__button:hover {
		background: #009999;
		color: #fff;
	}

/*
## Stacked List - Primary

```
	<ul class="stacked-list-primary">
		<li class="fixie"></li>
		<li class="fixie"></li>
		<li class="fixie"></li>
	</ul>
```
*/

.stacked-list-primary {
	padding: 10px 20px;
	margin: 0;
	list-style: none;
	background: #f3f3f3;
}

.stacked-list-item {
	text-align: left;
	padding: 10px 0;
	border-top: 1px solid #e1e1e1;
}

.stacked-list li:first-child {
	border-top: none;
}

.stacked-list__button {
	background: #f3f3f3;
	color: #999;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-top: 2px solid #e1e1e1;
}

	.stacked-list__button:hover {
		background: #009999;
		color: #fff;
	}


/*
## Basic Table

```

```
*/

.basic-table {
	border: 1px solid #ddd;
	margin-bottom: 20px;
}

	.basic-table td {
		border: 1px solid #ddd;
		padding: 4px;
	}


/*
## Bar

```
	<div class="bar">
		<p>Showing Events, Things to See & Do, Accommodation, & Eating Options for <span>28 May 2015</span></p>
	</div>
```
*/

.bar {
	background: #e8e8e8;
	border-bottom: 2px solid #d8d8d8;
	text-align: center;
	padding: 15px 0;
}

	.bar p {
		margin: 0;
		color: #999999;
		text-transform: uppercase;
		font-weight: bold;
		font-size: 12px;
	}

	.bar span {
		color: #009999;
	}


/*
## Section Header

```
	<div class="container section-header text-center clearfix">
		<h3 class="main-title main-title--medium">Events</h3>
		<a class="section-header__link button button-outlined" href="/visit/whats-on.aspx">See All</a>
	</div>
```
*/

.section-header__link {
	float: right;
	display: block;
}


/*
## Page Not Found

```
	<div class="page-not-found">
		<h3 class="page-not-found__title main-title main-title--medium"><%# Eval("Title") %></h3>
		<h3 class="page-not-found__sub-title"><%# Eval("SubTitle") %></h3>
		<p class="page-not-found__back-link">
			<a href="/visit/home.aspx" class="button button-outlined-secondary button--less-rounded">Go Back</a>
		</p>
	</div>
```
*/

.page-not-found {
	max-width: 700px;
	line-height: 1;
}

.page-not-found__title,
.page-not-found__sub-title {
	margin-bottom: 20px;
}

.page-not-found__sub-title {
	color: white;
	font-weight: normal;
	font-size: 60px;
}

@media screen and (max-width: 480px) {
	.page-not-found {
		max-width: 280px;
	}

	.page-not-found__sub-title {
		font-size: 35px;
	}
}
/*
## Search Dialog

```
	<div class="search-dialog">
	</div>
```
*/

.search-dialog {
	padding: 20px 0;
	border-bottom: 1px solid #ddd;
}

	.search-dialog .inline-search,
	.search-dialog .inline-block {
		display: block;
	}

	.search-dialog .col-inner {
		padding: 0;
	}

	.search-dialog .form-horizontal,
	.search-dialog .inline-search {
		width: 300px;
	}

	.search-dialog .form-group,
	.search-dialog .field-container {
		margin-bottom: 20px;
	}

	.search-dialog .btn {
		padding: 10px 15px;
	}

	.search-dialog .form-group-submit {
		margin-bottom: 0;
	}


/*
## Search Results

```
	<div class="search-result-container">
	</div>
```
*/

.search-result-container {
	padding: 20px 0;
	min-height: 300px;
}


/*
## Search Result

```
	<div class="search-result">
		<img src="" class="search-result__image" />
		<div class="search-result__body">
			<p class="fixie"><a href="#">Search result title</a><span class="search-result__date">12 nov 2014</span></p>
			<div class="search-result__content">
				<p class="fixie"></p>
			</div>
		</div>
	</div>
```
*/

.search-result {
	overflow: hidden;
	position: relative;
	margin-bottom: 40px;
}

.search-result__image {
	float: left;
	max-width: 200px;
}

.search-result__body {
	margin-left: 220px;
}

.search-result__date {
	display: block;
}


@media (max-width: 480px) {

	.search-result__image {
		display: block;
		float: none;
		width: 100%;
		max-width: 100%;
		margin-bottom: 10px;
	}

	.search-result__body {
		margin-left: 0px;
	}

		.search-result__body p {
			margin-bottom: 0;
		}
}


/*
## Popup
	
```
	<div class="popup">
		<p class="fixie"></p>
	</div>
```
*/

.popup {
	width: 500px;
	max-width: 100%;
	margin: 0 auto;
	padding: 20px;
	position: relative;
	background: white;
}

.popup__success {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px;
	background: white;
	display: none;
}

.popup.success .popup__success {
	display: block;
}

.popup.success .popup__success.static {
	position: static;
}

.popup.success .popup__form {
	display: none;
}

.popup .popup__form .InfoLabel { display: none; }

/*
## Newsletter Popup

newsletter form control spacing
*/

.newsletter .InfoLabel {
	padding: 0;
	background: transparent;
}

.newsletter__control {
	margin-bottom: 20px;
}

.newsletter-archive-list ul {
	list-style: none;
	padding-left: 0;
	font-size: 10px;
	margin: 0;
}

	.newsletter-archive-list ul li {
		padding: 10px 0px;
		border-bottom: 1px solid #eee;
	}

	.newsletter-archive-list ul a {
		font-size: 14px;
		text-decoration: none;
	}

		.newsletter-archive-list ul a:hover {
			color: #33cccc;
		}

.newsletter .contact-form-inner {
	margin-left: 15px;
}

.newsletter .ErrorLabel {
	display: none;
}

.newsletter .EditingFormErrorLabel {
	font-size: 12px;
}

/*
## Wishlist Print Item

```
wishlist-print-item
```
*/

.wishlist-print-item {
	overflow: hidden;
	padding-left: 220px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #ddd;
}

.wishlist-print-item__image {
	float: left;
	margin-left: -220px;
	max-width: 200px;
	display: block;
}

.wishlist-print-item p {
	margin-bottom: 5px;
}

@media screen and (max-width: 480px) {
	.wishlist-print-item {
		padding-left: 0;
	}

	.wishlist-print-item__image {
		float: none;
		margin-left: 0;
		width: 100%;
		max-width: 100%;
		display: block;
		margin-bottom: 10px;
	}
}
/*
## Login Popup

login form control spacing
*/

.login-form {
	position: relative;
}

	.login-form table {
		width: 100%;
	}

	.login-form label {
		margin-bottom: 1em;
		display: block;
	}

	.login-form .trouble-link {
		display: block;
		margin-top: 10px;
		font-size: 12px;
		text-decoration: none;
		color: #099;
	}

	.login-form input[type="password"],
	.login-form input[type="text"] {
		display: block;
		width: 100%;
	}

	.login-form .ErrorLabel {
		background-color: transparent;
		color: red;
	}

	.login-form span.form-control-error {
		color: red;
		position: absolute;
		top: 78px;
		left: 0px;
		font-size: 12px;
	}

@media screen and (max-width: 480px) {
	.login-form span.form-control-error {
		top: 55px;
	}
}

/* Home Explore Button */
.explore-button a {
	width: 100px;
	height: 100px;
}

.explore-button .icon-wrap {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

	.explore-button a::before,
	.explore-button a::after,
	.explore-button .icon-wrap::before,
	.explore-button .icon-wrap::after {
		position: absolute;
		left: 50%;
		width: 3px;
		height: 50%;
		background: #fff;
		content: '';
		-webkit-transition: -webkit-transform 0.3s;
		transition: transform 0.3s;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-box-shadow: 2px 8px 19px -5px rgba(0,0,0,0.44);
		-moz-box-shadow: 2px 8px 19px -5px rgba(0,0,0,0.44);
		box-shadow: 2px 8px 19px -5px rgba(0,0,0,0.44);
	}

	.explore-button .icon-wrap::before,
	.explore-button .icon-wrap::after {
		z-index: 100;
		height: 0;
		background: #3cc;
		-webkit-transition: height 0.3s, -webkit-transform 0.3s;
		transition: height 0.3s, transform 0.3s;
		-webkit-box-shadow: 2px 8px 19px -5px rgba(0,0,0,0.44);
		-moz-box-shadow: 2px 8px 19px -5px rgba(0,0,0,0.44);
		box-shadow: 2px 8px 19px -5px rgba(0,0,0,0.44);
	}

	.explore-button a::before,
	.explore-button .icon-wrap::before {
		top: 50%;
		-webkit-transform: translateX(-50%) rotate(-231deg);
		-ms-transform: translateX(-50%) rotate(-231deg);
		transform: translateX(-50%) rotate(-231deg);
		-webkit-transform-origin: 45% 0%;
		-ms-transform-origin: 45% 0%;
		transform-origin: 45% 0%;
	}

	.explore-button a::after,
	.explore-button .icon-wrap::after {
		top: 50%;
		-webkit-transform: translateX(-25%) rotate(-127deg);
		-ms-transform: translateX(-25%) rotate(-127deg);
		transform: translateX(-25%) rotate(-127deg);
		-webkit-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		transform-origin: 0 0;
	}

.explore-button h3 {
	position: absolute;
	top: 50%;
	margin: 0;
	color: #3cc;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 16px;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	text-shadow: 2px 8px 19px -5px rgba(0,0,0,0.44);
}

.explore-button a.scroll-down-link h3 {
	left: 100%;
	-webkit-transform: translateY(-100%) translateX(-126%);
	-ms-transform: translateY(-100%) translateX(-126%);
	transform: translateY(-100%) translateX(-126%);
}

.explore-button a:hover .icon-wrap::before,
.explore-button a:hover .icon-wrap::after {
	height: 63%;
}

.explore-button a:hover::before,
.explore-button a:hover .icon-wrap::before {
	-webkit-transform: translateX(-50%) rotate(-215deg);
	-ms-transform: translateX(-50%) rotate(-215deg);
	transform: translateX(-50%) rotate(-215deg);
}


.explore-button a:hover::after,
.explore-button a:hover .icon-wrap::after {
	-webkit-transform: translateX(10%) rotate(-143deg);
	-ms-transform: translateX(10%) rotate(-143deg);
	transform: translateX(10%) rotate(-143deg);
}

.explore-button a:hover h3 {
	opacity: 1;
	-webkit-transform: translateY(-350%) translateX(-126%);
	-ms-transform: translateY(-350%) translateX(-126%);
	transform: translateY(-350%) translateX(-126%);
}

/* Carousel Grid */
.carousel-grid {
	position: relative;
}

	.carousel-grid .slides,
	.carousel-grid .flex-direction-nav {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.carousel-grid .flex-direction-nav {
		height: 0;
		overflow: hidden;
	}

	.carousel-grid .flex-prev,
	.carousel-grid .flex-next {
		position: absolute;
		display: block;
		top: 50%;
		margin-top: -30px;
		font-size: 42px;
		text-decoration: none;
	}

		.carousel-grid .flex-prev:hover,
		.carousel-grid .flex-next:hover {
			color: #33cccc;
		}

	.carousel-grid .flex-prev {
		left: -50px;
	}

	.carousel-grid .flex-next {
		right: -50px;
	}

@media screen and (max-width: 800px) {
	.carousel-grid .flex-direction-nav {
		display: none;
	}
}

/*
## PDF Widget
	
```
	<div class="pdf-widget-item">
		<div class="pdf-widget"><img class="pdf-widget__image" src="http://placehold.it/180x240" />
			<div class="pdf-widget__content">
				<h3>Brochure Title</h3>
				<div class="pdf-widget__description">
					Bacon ipsum dolor amet strip steak pancetta hamburger pastrami.
				</div>
				<a class="button button--small"><span>View Online</span></a>
				<a class="button  button--small">Download</a>
			</div>
		</div>
	</div>
```
*/

.pdf-widget-item {
	display: inline-block;
	vertical-align: top;
	width: 49%;
	float: none;
	margin-bottom: 25px;
}

.row .pdf-widget-item {
	width: 100%;
}

.pdf-widget-item + .pdf-widget-item {
	margin-left: 15px;
}

.pdf-widget {
	padding: 20px;
	background: #fff;
	overflow: hidden;
}

	.pdf-widget img {
		float: left;
		width: 180px;
		height: 240px;
	}

	.pdf-widget .pdf-widget__content {
		margin-left: 200px;
		max-height: 240px;
		overflow: hidden;
	}

	.pdf-widget .pdf-widget__description {
		line-height: 18px;
		margin-bottom: 15px;
		max-height: 180px;
		overflow: hidden;
		font-size: 15px;
	}

	.pdf-widget h3 {
		color: #099;
		font-weight: 400;
		line-height: 24px;
		font-size: 25px;
	}

	.pdf-widget .button {
		width: 100%;
		margin-bottom: 10px;
		padding: 10px 30px;
	}

@media screen and (max-width: 480px) {
	.pdf-widget-item {
		display: block;
		width: 100%;
		float: none;
	}

	.pdf-widget {
		padding: 0;
	}

		.pdf-widget img {
			width: 100%;
			height: auto;
			float: none;
		}

		.pdf-widget .pdf-widget__content {
			margin-left: 0px;
			max-height: none;
			display: block;
			margin-top: 10px;
		}
}

/*
## PDF Widget Secondary
	
```
	<div class="pdf-widget-secondary">
		<h3 class="pdf-widget__tittle">Title</h3>
		<div class="pdf-widget-overlay">
			<div class="pdf-item-links">
				<a href="#">View Online</a>
				<a href="#">Download</a>
			</div>
		</div>
		<img src="http://placehold.it/225x340" />
	</div>
```
*/
.pdf-widget-secondary {
	display: inline-block;
	vertical-align: top;
	width: 225px;
	margin-bottom: 20px;
	min-height: 340px;
	position: relative;
	margin: 5px 4px;
}

	.pdf-widget-secondary .pdf-widget__title {
		position: absolute;
		top: 15px;
		left: 15px;
		color: #009999;
		font-size: 26px;
		z-index: 2;
		transition: .3s ease;
	}

.pdf-widget-overlay {
	background: #3cc;
	background: rgba(51, 204, 204, 0.40);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	opacity: 0;
	transition: .3s ease;
	z-index: 1;
}

.pdf-widget-secondary:hover .pdf-widget-overlay {
	visibility: visible;
	opacity: 1;
}

.pdf-widget-secondary:hover .pdf-widget__title {
	color: #fff;
}

.pdf-item-links {
	position: absolute;
	width: 100%;
	bottom: 0;
}

	.pdf-item-links a {
		background: #009999;
		width: 100%;
		padding: 15px;
		display: block;
		text-decoration: none;
		color: #fff;
		font-size: 16px;
	}

		.pdf-item-links a:first-child {
			margin-bottom: 1px;
		}

		.pdf-item-links a:hover {
			background: #3cc;
		}

/*
## RSVP Form Widget
	
```
	<div class="rsvp-widget">
		<div class="rsvp-widget__title"><img src="/VT/images/announcement-icon.png" />
			<h1>Would you like to RSVP?</h1>
		</div>
		<div class="rsvp-widget__description">
			Bacon ipsum dolor amet strip steak pancetta hamburger 
		</div>
		<div class="rsvp-widget__form">
			--form code--
		</div>
	</div>
```
*/

.rsvp-widget {
	margin: 20px 0;
	padding: 20px;
	border: 5px solid #009999;
	background: #D1FFFF;
	max-width: 800px;
}

.rsvp-widget__description {
	margin-bottom: 20px;
}


.rsvp-widget h1 {
	color: #009999;
	display: inline-block;
	vertical-align: top;
	margin-left: 20px;
	max-width: 420px;
	line-height: 55px;
}

.rsvp-widget__form .contact-form-inner {
	margin-left: 0;
}

.rsvp-widget__form input[type=text].form-control,
.rsvp-widget__form .radio-list-vertical {
	margin-bottom: 15px;
}

.rsvp-widget__form .radio-list-vertical {
	display: block;
}

	.rsvp-widget__form .radio-list-vertical label {
		font-size: 15px;
	}

/*
## Tile Flag
	
```
	<div class="tile-flag">
        <span>Featured</span>
    </div>
```
*/


.tile-flag {
	height: 30px;
	background: #3cc;
	position: relative;
	padding: 8px 5px 8px 15px;
	box-sizing: border-box;
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
}

	.tile-flag:before {
		position: absolute;
		bottom: -8px;
		left: 0;
		content: "";
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 0 solid transparent;
		border-top: 8px solid #128A82;
	}

	.tile-flag:after {
		content: "";
		background: #3cc;
		position: absolute;
		top: 0;
		right: -10px;
		height: 30px;
		width: 100%;
		z-index: -1;
		-moz-transform: skewX(-20deg);
		-ms-transform: skewX(-20deg);
		-o-transform: skewX(-20deg);
		-webkit-transform: skewX(-20deg);
		transform: skewX(-20deg);
		-webkit-box-shadow: 3px 4px 5px -2px rgba(0,0,0,0.37);
		-moz-box-shadow: 3px 4px 5px -2px rgba(0,0,0,0.37);
		box-shadow: 3px 4px 5px -2px rgba(0,0,0,0.37);
	}


/*
## video-tile

```
	<a href="#" class="video-tile">
		<img src="http://placehold.it/560x315" />
	</a>
```
*/

.video-tile {
	display: inline-block;
	position: relative;
	max-width: 100%;
}

	.video-tile:after {
		color: white;
		font-size: 95px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -45px;
		margin-left: -55px;
	}

	.video-tile:before {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: black;
		opacity: 0;
		-moz-transition: opacity 0.1s ease-in-out;
		-o-transition: opacity 0.1s ease-in-out;
		-webkit-transition: opacity 0.1s ease-in-out;
		transition: opacity 0.1s ease-in-out;
	}

	.video-tile.icon-youtube:before {
		content: '';
		background-color: #fff;
		position: absolute;
		width: 65px;
		height: 60px;
		top: 35%;
		left: 35%;
		opacity: 1;
		z-index: 4;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.video-tile.icon-youtube:hover:before {
		background-color: #009999;
		opacity: 1;
	}

	.video-tile.icon-youtube:after {
		z-index: 5;
		color: #009999;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}

	.video-tile:hover:after {
		color: white;
	}

.list-item--featured .video-tile.icon-youtube:before {
	width: 45px;
	height: 45px;
	top: 45%;
	left: 45%;
}

@media (max-width: 480px) {
	.list-item--featured .video-tile.icon-youtube:before {
		width: 65px;
		height: 60px;
		top: 35%;
		left: 35%;
	}
}

/*
## image-tile

```
	<a href="#" class="image-tile">
		<img src="http://placehold.it/560x315" />
	</a>
```
*/

.image-tile {
	display: inline-block;
	position: relative;
	max-width: 100%;
	width: 480px;
}

	.image-tile:hover:before {
		opacity: 0.2;
	}

	.image-tile:after {
		color: white;
		font-size: 95px;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -45px;
		margin-left: -55px;
	}

	.image-tile:before {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: black;
		opacity: 0;
		-moz-transition: opacity 0.1s ease-in-out;
		-o-transition: opacity 0.1s ease-in-out;
		-webkit-transition: opacity 0.1s ease-in-out;
		transition: opacity 0.1s ease-in-out;
	}

/* Study Sub-Site Preloader */
.page-preloader {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-color: white;
}

.bookshelf_wrapper {
	position: relative;
	top: 50%;
	left: 48%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.books_list {
	margin: 0 auto;
	width: 300px;
	padding: 0;
}

.book_item {
	position: absolute;
	top: -120px;
	box-sizing: border-box;
	list-style: none;
	width: 40px;
	height: 120px;
	opacity: 0;
	background-color: #009999;
	border: 5px solid white;
	-webkit-transform-origin: bottom left;
	transform-origin: bottom left;
	-webkit-transform: translateX(300px);
	transform: translateX(300px);
	-webkit-animation: travel 2500ms linear infinite;
	animation: travel 2500ms linear infinite;
}

	.book_item.first {
		top: -140px;
		height: 140px;
	}

		.book_item.first:before, .book_item.first:after {
			content: '';
			position: absolute;
			top: 10px;
			left: 0;
			width: 100%;
			height: 5px;
			background-color: white;
		}

		.book_item.first:after {
			top: initial;
			bottom: 10px;
		}

	.book_item.second:before, .book_item.second:after, .book_item.fifth:before, .book_item.fifth:after {
		box-sizing: border-box;
		content: '';
		position: absolute;
		top: 10px;
		left: 0;
		width: 100%;
		height: 17.5px;
		border-top: 5px solid white;
		border-bottom: 5px solid white;
	}

	.book_item.second:after, .book_item.fifth:after {
		top: initial;
		bottom: 10px;
	}

	.book_item.third:before, .book_item.third:after {
		box-sizing: border-box;
		content: '';
		position: absolute;
		top: 10px;
		left: 9px;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		border: 5px solid white;
	}

	.book_item.third:after {
		top: initial;
		bottom: 10px;
	}

	.book_item.fourth {
		top: -130px;
		height: 130px;
	}

		.book_item.fourth:before {
			box-sizing: border-box;
			content: '';
			position: absolute;
			top: 46px;
			left: 0;
			width: 100%;
			height: 17.5px;
			border-top: 5px solid white;
			border-bottom: 5px solid white;
		}

	.book_item.fifth {
		top: -100px;
		height: 100px;
	}

	.book_item.sixth {
		top: -140px;
		height: 140px;
	}

		.book_item.sixth:before {
			box-sizing: border-box;
			content: '';
			position: absolute;
			bottom: 31px;
			left: 0px;
			width: 100%;
			height: 5px;
			background-color: white;
		}

		.book_item.sixth:after {
			box-sizing: border-box;
			content: '';
			position: absolute;
			bottom: 10px;
			left: 9px;
			width: 12px;
			height: 12px;
			border-radius: 50%;
			border: 5px solid white;
		}

	.book_item:nth-child(2) {
		-webkit-animation-delay: 416.66667ms;
		animation-delay: 416.66667ms;
	}

	.book_item:nth-child(3) {
		-webkit-animation-delay: 833.33333ms;
		animation-delay: 833.33333ms;
	}

	.book_item:nth-child(4) {
		-webkit-animation-delay: 1250ms;
		animation-delay: 1250ms;
	}

	.book_item:nth-child(5) {
		-webkit-animation-delay: 1666.66667ms;
		animation-delay: 1666.66667ms;
	}

	.book_item:nth-child(6) {
		-webkit-animation-delay: 2083.33333ms;
		animation-delay: 2083.33333ms;
	}

.shelf {
	width: 300px;
	height: 5px;
	margin: 0 auto;
	background-color: #009999;
	position: relative;
}

	.shelf:before, .shelf:after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		background: white;
		/* background-image: -webkit-radial-gradient(rgba(255, 255, 255, 0.5) 30%, rgba(0, 0, 0, 0) 0%); */
		background-image: radial-gradient(rgb(0, 153, 153) 30%, rgba(0, 0, 0, 0) 0%);
		background-size: 10px 10px;
		background-position: 0 -2.5px;
		top: 200%;
		left: 5%;
		-webkit-animation: move 250ms linear infinite;
		animation: move 250ms linear infinite;
	}

	.shelf:after {
		top: 400%;
		left: 7.5%;
	}

@-webkit-keyframes move {
	from {
		background-position-x: 0;
	}

	to {
		background-position-x: 10px;
	}
}

@keyframes move {
	from {
		background-position-x: 0;
	}

	to {
		background-position-x: 10px;
	}
}

@-webkit-keyframes travel {
	0% {
		opacity: 0;
		-webkit-transform: translateX(300px) rotateZ(0deg) scaleY(1);
		transform: translateX(300px) rotateZ(0deg) scaleY(1);
	}

	6.5% {
		-webkit-transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1);
		transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1);
	}

	8.8% {
		-webkit-transform: translateX(273.6px) rotateZ(0deg) scaleY(1);
		transform: translateX(273.6px) rotateZ(0deg) scaleY(1);
	}

	10% {
		opacity: 1;
		-webkit-transform: translateX(270px) rotateZ(0deg);
		transform: translateX(270px) rotateZ(0deg);
	}

	17.6% {
		-webkit-transform: translateX(247.2px) rotateZ(-30deg);
		transform: translateX(247.2px) rotateZ(-30deg);
	}

	45% {
		-webkit-transform: translateX(165px) rotateZ(-30deg);
		transform: translateX(165px) rotateZ(-30deg);
	}

	49.5% {
		-webkit-transform: translateX(151.5px) rotateZ(-45deg);
		transform: translateX(151.5px) rotateZ(-45deg);
	}

	61.5% {
		-webkit-transform: translateX(115.5px) rotateZ(-45deg);
		transform: translateX(115.5px) rotateZ(-45deg);
	}

	67% {
		-webkit-transform: translateX(99px) rotateZ(-60deg);
		transform: translateX(99px) rotateZ(-60deg);
	}

	76% {
		-webkit-transform: translateX(72px) rotateZ(-60deg);
		transform: translateX(72px) rotateZ(-60deg);
	}

	83.5% {
		opacity: 1;
		-webkit-transform: translateX(49.5px) rotateZ(-90deg);
		transform: translateX(49.5px) rotateZ(-90deg);
	}

	90% {
		opacity: 0;
	}

	100% {
		opacity: 0;
		-webkit-transform: translateX(0px) rotateZ(-90deg);
		transform: translateX(0px) rotateZ(-90deg);
	}
}

@keyframes travel {
	0% {
		opacity: 0;
		-webkit-transform: translateX(300px) rotateZ(0deg) scaleY(1);
		transform: translateX(300px) rotateZ(0deg) scaleY(1);
	}

	6.5% {
		-webkit-transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1);
		transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1);
	}

	8.8% {
		-webkit-transform: translateX(273.6px) rotateZ(0deg) scaleY(1);
		transform: translateX(273.6px) rotateZ(0deg) scaleY(1);
	}

	10% {
		opacity: 1;
		-webkit-transform: translateX(270px) rotateZ(0deg);
		transform: translateX(270px) rotateZ(0deg);
	}

	17.6% {
		-webkit-transform: translateX(247.2px) rotateZ(-30deg);
		transform: translateX(247.2px) rotateZ(-30deg);
	}

	45% {
		-webkit-transform: translateX(165px) rotateZ(-30deg);
		transform: translateX(165px) rotateZ(-30deg);
	}

	49.5% {
		-webkit-transform: translateX(151.5px) rotateZ(-45deg);
		transform: translateX(151.5px) rotateZ(-45deg);
	}

	61.5% {
		-webkit-transform: translateX(115.5px) rotateZ(-45deg);
		transform: translateX(115.5px) rotateZ(-45deg);
	}

	67% {
		-webkit-transform: translateX(99px) rotateZ(-60deg);
		transform: translateX(99px) rotateZ(-60deg);
	}

	76% {
		-webkit-transform: translateX(72px) rotateZ(-60deg);
		transform: translateX(72px) rotateZ(-60deg);
	}

	83.5% {
		opacity: 1;
		-webkit-transform: translateX(49.5px) rotateZ(-90deg);
		transform: translateX(49.5px) rotateZ(-90deg);
	}

	90% {
		opacity: 0;
	}

	100% {
		opacity: 0;
		-webkit-transform: translateX(0px) rotateZ(-90deg);
		transform: translateX(0px) rotateZ(-90deg);
	}
}

.tools .js-megamenu {
	padding: 5px;
	transition: all 0.3s ease-in-out;
}

	.tools .show .js-megamenu,
	.tools .js-megamenu:hover {
		background-color: #8bc34a;
		border-radius: 40%;
		color: white;
	}

.study-sub .main-nav a {
	font-weight: 600;
}

.study-sub .banner--extra-small {
	height: 130px;
}

.close {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	overflow: hidden;
	cursor: pointer;
}

	.close:hover::before, .close:hover::after {
		background: #000;
	}

	.close::before, .close::after {
		content: '';
		position: absolute;
		height: 2px;
		width: 100%;
		top: 50%;
		left: 0;
		margin-top: -1px;
		background: rgba(0, 0, 0, 0.35);
		;
	}

	.close::before {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.close::after {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.close.big {
		-webkit-transform: scale(3);
		-moz-transform: scale(3);
		-ms-transform: scale(3);
		-o-transform: scale(3);
		transform: scale(3);
	}

	.close.hairline::before, .close.hairline::after {
		height: 3px;
		margin-top: -2px;
	}

/*
## Search Panel

```
	<div class="relative">
		<div class="search-panel">
		</div>
	</div>
```
*/

.search-panel {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.7);
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

.show-search-panel .search-panel {
	visibility: visible;
	opacity: 1;
	z-index: 1005;
}

.search-panel-close {
	position: absolute;
	top: 4%;
	right: 3%;
	font-size: 30px;
	color: #099;
}

.search-panel-container {
	position: relative;
	background: #f5f5f5;
	max-height: 0;
	height: 465px;
	overflow: hidden;
	/*display: table;*/
	width: 100%;
	height: 100%;
	/*table-layout: fixed;*/
	-webkit-box-shadow: 0px 3px 25px -8px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 3px 25px -8px rgba(0,0,0,0.4);
	box-shadow: 0px 3px 25px -8px rgba(0,0,0,0.4);
}

.show-search-panel .search-panel-container {
	max-height: 465px;
}

.search-panel-inner {
	display: block;
	width: 100%;
	vertical-align: middle;
}


.show-search-panel #wrapper {
	-moz-filter: blur(5px);
	-ms-filter: blur(5px);
	-webkit-filter: blur(5px);
	filter: blur(5px);
}

.show-search-panel {
	height: 100%;
}

/*.show-search-panel > body,
	.show-search-panel > body > form {
		height: 100%;
		overflow: hidden;
	}*/