@import url(font-awesome.min.css);
@import url("http://fonts.googleapis.com/css?family=Raleway:300,700");


	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
	}


	body {
		line-height: 1;
	  flex-flow: column nowrap;
	}

	ol, ul {
		list-style: none;
	}

	blockquote, q {
		quotes: none;
	}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	body {
		-webkit-text-size-adjust: none;
	}


/* Containers */

	.container {
		margin-left: auto;
		margin-right: auto;
	}

	.container.\31 25\25 {
		width: 100%;
		max-width: 100em;
		min-width: 80em;
	}

	.container.\37 5\25 {
		width: 60em;
	}

	.container.\35 0\25 {
		width: 40em;
	}

	.container.\32 5\25 {
		width: 20em;
	}

	.container {
		width: 80em;
	}

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

		.container.\31 25\25 {
			width: 100%;
			max-width: 100em;
			min-width: 80em;
		}

		.container.\37 5\25 {
			width: 60em;
		}

		.container.\35 0\25 {
			width: 40em;
		}

		.container.\32 5\25 {
			width: 20em;
		}

		.container {
			width: 80em;
		}

	}

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

		.container.\31 25\25 {
			width: 100%;
			max-width: 81.25em;
			min-width: 65em;
		}

		.container.\37 5\25 {
			width: 48.75em;
		}

		.container.\35 0\25 {
			width: 32.5em;
		}

		.container.\32 5\25 {
			width: 16.25em;
		}

		.container {
			width: 65em;
		}

	}

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

		.container.\31 25\25 {
			width: 100%;
			max-width: 112.5%;
			min-width: 90%;
		}

		.container.\37 5\25 {
			width: 67.5%;
		}

		.container.\35 0\25 {
			width: 45%;
		}

		.container.\32 5\25 {
			width: 22.5%;
		}

		.container {
			width: 90%;
		}

	}

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

		.container.\31 25\25 {
			width: 100%;
			max-width: 112.5%;
			min-width: 90%;
		}

		.container.\37 5\25 {
			width: 67.5%;
		}

		.container.\35 0\25 {
			width: 45%;
		}

		.container.\32 5\25 {
			width: 22.5%;
		}

		.container {
			width: 90%;
		}

	}

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

		.container.\31 25\25 {
			width: 100%;
			max-width: 112.5%;
			min-width: 90%;
		}

		.container.\37 5\25 {
			width: 67.5%;
		}

		.container.\35 0\25 {
			width: 45%;
		}

		.container.\32 5\25 {
			width: 22.5%;
		}

		.container {
			width: 90%;
		}

	}


	@-ms-viewport {
		width: device-width;
	}

	body {
		-ms-overflow-style: scrollbar;
	}

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

		html, body {
			min-width: 320px;
		}

	}

	body {
		background: #fff;
	}

		body.is-loading *, body.is-loading *:before, body.is-loading *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

	body {
		background-color: #fff;
		color: #444;
	}

	body, input, select, textarea {
		font-family: "Raleway", Arial, Helvetica, sans-serif;
		font-size: 14pt;
		font-weight: 300;
		letter-spacing: 0.09em;
		line-height: 1.65em;
	}

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

			body, input, select, textarea {
				font-size: 12pt;
			}

		}

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

			body, input, select, textarea {
				font-size: 12pt;
			}

		}

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

			body, input, select, textarea {
				font-size: 12pt;
			}

		}

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

			body, input, select, textarea {
				font-size: 11pt;
			}

		}

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

			body, input, select, textarea {
				font-size: 11pt;
			}

		}

	a {
		color:#000;
	}

		a:hover {
			text-decoration: none;
		}

	strong, b {
		font-weight: 700;
	}

	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 2em 0;
	}

	h1, h2, h3, h4, h5, h6 {
		font-weight: 300;
		line-height: 1em;
		margin: 0 0 1em 0;
		text-transform: uppercase;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

	h2 {
		font-size: 1.6em;
		line-height: 1.5em;
	}

	h3 {
		font-size: 1.2em;
		line-height: 1.5em;
	}

	h4 {
		font-size: 1em;
		line-height: 1.5em;
	}

	h5 {
		font-size: 0.9em;
		line-height: 1.5em;
	}

	h6 {
		font-size: 0.7em;
		line-height: 1.5em;
	}


	hr {
		border: 0;
		border-bottom: solid 1px;
		margin: 2em 0;
	}

		hr.major {
			margin: 3em 0;
		}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

	.align-right {
		text-align: right;
	}

	input, select, textarea {
		color: #555;
	}

	a {
		
	}

	strong, b {
		color: #555;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #555;
	}

	blockquote {
		border-left-color: #e3e3e3;
	}

	.mid_content {
		
		background:url(../images/bg.png);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;  
		color: #ffffff;
		padding: 8em 0 8em 0;
	}

		.mid_content input, .mid_content select, .mid_content textarea {
			color: #ffffff;
		}

		.mid_content a {
			color:#000;
			
		}
		.mid_content a:hover {
			
		}

		.mid_content strong, .mid_content b {
			color: #ffffff;
		}

		.mid_content h1, .mid_content h2, .mid_content h3, .mid_content h4, .mid_content h5, .mid_content h6 {
			color: #ffffff;
		}

		.mid_content blockquote {
			border-left-color: rgba(255, 255, 255, 0.25);
		}

		.mid_content code {
			background: rgba(255, 255, 255, 0.075);
			border-color: rgba(255, 255, 255, 0.25);
		}

		.mid_content hr {
			border-bottom-color: rgba(255, 255, 255, 0.25);
		}

		.mid_content input[type="submit"],
		.mid_content input[type="reset"],
		.mid_content input[type="button"],
		.mid_content button,
		.mid_content .button {
			background-color: #f7f7f7;
			color: #555 !important;
		}

			.mid_content input[type="submit"]:hover,
			.mid_content input[type="reset"]:hover,
			.mid_content input[type="button"]:hover,
			.mid_content button:hover,
			.mid_content .button:hover {
				background-color: white;
			}

			.mid_content input[type="submit"]:active,
			.mid_content input[type="reset"]:active,
			.mid_content input[type="button"]:active,
			.mid_content button:active,
			.mid_content .button:active {
				background-color: #eaeaea;
			}

			.mid_content input[type="submit"].alt,
			.mid_content input[type="reset"].alt,
			.mid_content input[type="button"].alt,
			.mid_content button.alt,
			.mid_content .button.alt {
				background-color: transparent;
				box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
				color: #ffffff !important;
			}

				.mid_content input[type="submit"].alt:hover,
				.mid_content input[type="reset"].alt:hover,
				.mid_content input[type="button"].alt:hover,
				.mid_content button.alt:hover,
				.mid_content .button.alt:hover {
					background-color: rgba(255, 255, 255, 0.075);
				}

				.mid_content input[type="submit"].alt:active,
				.mid_content input[type="reset"].alt:active,
				.mid_content input[type="button"].alt:active,
				.mid_content button.alt:active,
				.mid_content .button.alt:active {
					background-color: rgba(255, 255, 255, 0.2);
				}

				.mid_content input[type="submit"].alt.icon:before,
				.mid_content input[type="reset"].alt.icon:before,
				.mid_content input[type="button"].alt.icon:before,
				.mid_content button.alt.icon:before,
				.mid_content .button.alt.icon:before {
					color: #99ebeb;
				}

			.mid_content input[type="submit"].special,
			.mid_content input[type="reset"].special,
			.mid_content input[type="button"].special,
			.mid_content button.special,
			.mid_content .button.special {
				background-color: #009a9c;
				color: #fff !important;
			}

				.mid_content input[type="submit"].special:hover,
				.mid_content input[type="reset"].special:hover,
				.mid_content input[type="button"].special:hover,
				.mid_content button.special:hover,
				.mid_content .button.special:hover {
					background-color: #00b4b5;
				}

				.mid_content input[type="submit"].special:active,
				.mid_content input[type="reset"].special:active,
				.mid_content input[type="button"].special:active,
				.mid_content button.special:active,
				.mid_content .button.special:active {
					background-color: #008183;
				}

		.mid_content h2 {
			border-style: double solid;
			border-width: 4px 1px;
			font-size: 2.4em;
			line-height: 1.35em;
			margin: 0 auto 1em;
			padding: 1.1em;
			position: relative;
			width: 40%;
		}

		.mid_content p {
			font-size: 1.5em;
			text-transform: uppercase;
		}

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

			.mid_content {
				padding: 8em 0 6em 0;
			}

		}

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

			.mid_content {
				padding: 6em 0 4em 0;
			}

				.mid_content h2 {
					width: 50%;
				}

		}

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

			.mid_content {
				padding: 4em 2em 2em 2em;
			}

				.mid_content h2 {
					width: 75%;
				}

		}

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

			.mid_content {
				padding: 3em 1.5em 1em 1.5em;
			}

				.mid_content h2 {
					font-size: 2em;
				}

				.mid_content p {
					font-size: 1.25em;
				}

		}

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

			.mid_content {
				padding: 3em 1em 1em 1em;
			}

				.mid_content h2 {
					font-size: 1.65em;
					width: 100%;
				}

		}

.header { 
overflow:hidden;
}

.logo {
	float:left;
	position:relative;
	padding-top:2%;
	padding-left:1.5%;
}

.book_right {
	float:right;
	position:relative;
	padding-right:5%;
}

ul.top_navigation li{
	display:inline-block;
	background:#201e1e;
	color:#FFF;
	padding-right:1.5%;
	padding-left:1.5%;
	padding-top:3%;
	padding-bottom:3%;
	margin-left:4%;
}

ul.top_navigation li:hover{
	background:#666;
	color:#FFF;
}
/* Main */

	#main {
		padding: 4em 0 2em 0;
	}

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

			#main {
				padding: 3em 0 1em 0;
			}

		}


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

			  {
				padding: 4em 2em 3em 2em;
			}

		}

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

			  {
				padding: 3em 2em 2em 2em;
			}

				 {
					width: 75%;
					left: 12.5%;
				}

		}

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

			  {
				padding: 3em 2em 1em 2em;
			}

				 :before {
					width: 85%;
					left: 7.5%;
				}

				  .copyright li {
					display: block;
					border-left: 0;
					margin-left: 0;
					padding-left: 0;
				}

		}

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

			  {
				padding: 2em 1em 0.1em 1em;
			}

		}



h1.booking {
	color:#000;
	text-align:center;
	vertical-align: middle;
    line-height:60px;
	font-size:25px; 

}

h1.booking:hover {
}

.book_me {
	width:8%;
	background-color:#FFF;
	padding-right:2.5%;
	padding-left:2.5%;
}
.book_me:hover {
}
@media screen and (max-width:1280px) {
	
	h1.booking {
	color:#000;
	text-align:center;
	vertical-align: middle;
    line-height:50px;
	font-size:22px; 
	}
	
}

@media screen and (max-width:980px) {
	
	h1.booking {
	color:#000;
	text-align:center;
	vertical-align: middle;
    line-height:40px;
	font-size:12px; 
	}
	
}

@media screen and (max-width:736px) {
	
	h1.booking {
	color:#000;
	text-align:center;
	vertical-align: middle;
    line-height:30px;
	font-size:10px; 
	}
	
}

@media screen and (max-width:480px) {
	
	h1.booking {
	color:#000;
	text-align:center;
	vertical-align: middle;
    line-height:20px;
	font-size:5px; 
	}
	
}


.copyright {
    bottom : 0;
    height : 40px;
    margin-top : 40px;
	margin-top:1%;
	background-color:#000;
	width:100%;
}

url('https://subtlepatterns.com/images/transp_bg.png');
}
h2{
		font-weight: 300;
		font-size: 3vw;
		padding: 20px 0;
	}
	p{
		font-size: 1.2vw;
		line-height: 1.7em;
	}
	.slider{
		position: relative;
		width: 100%;
		overflow: hidden;
		transition: all .3s;
		perspective: 900px;
		transform-style: preserve-3d;
	}
	.slider .previous, .slider .next{
		font-family: "FontAwesome";
		font-size: 20px;
		position: absolute;
		top: 50%;
		color: #000;
		padding: 20px;
		text-decoration: none;
		left: -100px;
		margin-top: -34px;
		transition: all .3s;
		opacity: 0;
		z-index: 10000;
	}
	.slider .next{
		right: -100px;
		content: "\f054";
		left: auto;
	}
	.slider:hover .previous, .slider:hover .next{
		opacity: 1;
	}
	.slider:hover .previous{
		left: 0;
	}
	.slider:hover .next{
		right: 0;
	}
	.slider .slides{
		height: 100%;
	}
	.slide{
		padding: 10%;
		width: 100%;
		text-align: center;
		position: absolute;
		transform: scale(0.5,0.5);
		opacity: 0;
		transition: all .3s;
	}


	.slide.first{
		background: #CCC;
		color: #333;
	}
	.slide.second{
		background:url(../images/sopranoice2.png);
		background-size:     cover;                    
        background-repeat:   no-repeat;
        background-position: center center;  
		color: #444444;
	}
	.slide.third{
		background: #666;
		color: white;
	}
	.slide.active{
		z-index: 10;
		left: 0;
		opacity: 1;
		transform: scale(1,1);
	}

	.slide.inactiveLeft{
		left: -100vw;
		z-index: 11;
	}
	.slide.inactiveRight{
		left: 100vw;
		z-index: 11;
	}
  .slide:after{
    content: attr(data-icon);
    font-family: "FontAwesome";
    font-size: 15vw;
    position: absolute;
    bottom: -8vw;
    left: 0;
    opacity: 0.3;
  }
	.slide a{
		color: inherit;
		border: 2px solid;
		padding: 10px;
		font-size: 1.3vw;
		margin-top: 20px;
		display: inline-block;
		transition: all .3s;
		text-transform: uppercase;
		letter-spacing: 1px;
		position: relative;
	}
	.slide a:hover{
		background: rgba(255, 255, 255, 0.2);
		border: 2px solid transparent;
		text-decoration: none;
		letter-spacing: 2px;
		padding-right: 30px;
	}
	.slide a:after{
		content: " \f105";
		font-family: "FontAwesome";
		position: absolute;
		margin-left: -10px;
		transition: all .3s;
		opacity: 0;
	}
	.slide a:hover:after{
		margin-left: 10px;
		opacity: 1;
	}
	.slider .bullets{
		text-align: center;
		position: absolute;
		bottom: 10px;
		width: 100%;
	}
	.slider .bullets .bullet{
		position: relative;
		display: inline-block;
		background: rgba(255,255,255,.8);
		border-radius: 50%;
		width: 8px;
		height: 8px;
		z-index: 14;
		margin: 0 5px;
		cursor: pointer;
		border: 2px solid transparent;
		transition: all .3s;
	}
	.slider .bullets .bullet.active{
		background: rgba(255,255,255,.4);
	}
	.slider .bullets .bullet:hover{
		border: 2px solid rgba(255,255,255,.8);
		background: transparent;
	}
	
.map-responsive{
    overflow:hidden;
    padding-bottom:8%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}


.slide.faq {
	background:url(../images/bg_FAQ.jpg);
    background-size:cover;
    background-repeat:   no-repeat;
    background-position: center center; 
	padding-top:2%; 
	padding-bottom:1%;
}
.faq {
	text-align:center;
	width:100%;
	border-bottom:thin solid black;
}
.faq h1 {
	padding-top:1%;
	color:#000;
}
.faq.first {

}


/**************************************************************************/

.generic-anchor {
	color: $primary-light-blue;
	&:visited {
		color: $primary-light-blue
	}
	&:hover {
		color: $primary-line-color
	}
}
.flex-rw {
  margin-top:1.5%;
  display: flex;
  flex-flow: row wrap;
}

footer {
	text-align:center;
	vertical-align:middle;
  background: #FFF;
  margin-top: auto;
  width: 100%
}
.footer-list-top {
  width: 33.333%
}
.footer-list-top > li {
  text-align: center;
}
.footer-list-header {
  color: #000;
  font-size:28px;
}

.footer-bottom-section {
  width: 100%;
  border-top: 1px solid $primary-line-color;
}
.footer-bottom-section > div:first-child {
  margin-right: auto;
}
.footer-bottom-wrapper {
  font-size: 1.5em;
  color: #fff
}
.footer-address {
  display: inline;
  font-style: normal
}
@media only screen and (max-width: 768px) {
  .footer-list-header {
    font-size: 2em
  }
  .footer-list-anchor {
    font-size: 1.1em
  }
  .footer-social-connect {
    font-size: 2.5em
  }
  .footer-social-overlap > a {
    font-size: 2.24em
  }
  .footer-bottom-wrapper {
    font-size: 1.3em
  }
}
@media only screen and (max-width: 568px) {
  main {
    font-size: 5em
  }
  .footer-list-top {
    width: 100%
  }
  .footer-list-header {
    font-size: 3em;
  }
  .footer-list-anchor {
    font-size: 1.5em
  }
  .footer-bottom-section {
  }
  .footer-bottom-wrapper {
    text-align: center;
    width: 100%;
    margin-top: 10px
  }
}
@media only screen and (max-width: 480px) {
  .footer-bottom-rights {
    display: block
  }
}
@media only screen and (max-width: 320px) {
  .footer-list-header {
    font-size: 2.2em
  }
  .footer-list-anchor {
    font-size: 1.2em
  }
  .footer-bottom-wrapper {
    font-size: 1.3em
  }
}