/*
Theme Name: Sabai 2019
Author: Alan McDonald @ Made By Plumbers
Author URI: http://madebyplumbers.co.uk
*/

/* Font face 
-------------------------------------------------------------- */

/*
        This font software is the property of Commercial Type.

        You may not modify the font software, use it on another website, or install it on a computer.

        License information is available at http://commercialtype.com/eula
        For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com

        Copyright (C) 2013 Schwartzco Inc.
        License: 1408-WGNCQP     
*/
@font-face {
  font-family: 'Dala Floda Web';
  src: url('css/fonts/DalaFloda-RomanNo2-Web.eot');
  src: url('css/fonts/DalaFloda-RomanNo2-Web.eot?#iefix') format('embedded-opentype'),
     url('css/fonts/DalaFloda-RomanNo2-Web.woff') format('woff'),
     url('css/fonts/DalaFloda-RomanNo2-Web.ttf') format('truetype'),
     url('css/fonts/DalaFloda-RomanNo2-Web.svg#Dala Floda Web') format('svg');
  font-weight:  500;
  font-style:   normal;
  font-stretch: normal;
}

/* Reset
-------------------------------------------------------------- */
a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,iframe,img,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,table,tbody,td,tfoot,th,thead,tr,tt,ul,var{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline}h1,h2,h3,h4,h5{font-weight:400}article,aside,footer,header,hgroup,nav,section{display:block}:focus{outline:0}body{line-height:1;color:#000;background:#fff;height:100%}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,td,th{text-align:left;font-weight:400}blockquote:after,blockquote:before,q:after,q:before{content:""}blockquote,q{quotes:"" ""}html{height:100%;padding-bottom:1px}a{text-decoration:none}.hidden{display:none}.clear{clear:both}img{-ms-interpolation-mode:bicubic;image-rendering:optimizeQuality;width:100%;height:auto;display:block}.left{float:left}.right{float:right}b{font-weight:400}i{font-style:normal}
a:active{ background-color: transparent;} /*remove the active colour from ie10+*/
/*Custom reset ------------------------------------------------*/
body{ -webkit-text-size-adjust:none; font-weight:normal;}
input[type="submit"], select, input[type="text"],input[type="password"], textarea{ -webkit-appearance:none; border-radius:0; font-size:inherit; }
div,article,section,header,footer,nav,li{ position:relative;}
input,select,button, textarea{ font-family:inherit;	}
em{ font-style:normal;	}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;  }
.left { float:left; } .right { float:right; }
.mobile-only { display:none; }


/* Global
--------------------------------------------------------------------*/
html { height: 100%; }
body { font-size: 62.5%; font-family:'Optima LT W01 Roman', Georgia, serif; font-weight:normal; font-style:normal; -webkit-text-size-adjust:none; background-color:#FAF8F5;color:#005551; }
a { color:#000; text-decoration: none; }
.row { width:100%; }
.page-wrap, .inner { max-width:1200px; width:94%; margin:0px auto; }
.page-wrap:before, .page-wrap:after, .inner:before, .inner:after { content: ""; display: table; }
.page-wrap:after, .inner:after { clear: both; }



body {
	background:#005551;
}

body.green-page {
	color:#AE9562;
}

body.green-page .page-wrap {
	background:#005551;
	color:#AE9562;
}



a {
	transition: all 300ms ease;
}

a.no-underline {
	text-decoration: none!important;
}

/* Type
--------------------------------------------------------------------*/

/*

font-family:'Optima LT W01 Roman';
font-family:'DalaFloda-RomanNo-2';

*/

.information h3, 
.information li strong, 
.price-list h3 { font-family:'Optima LT W01 Demi Bold'; font-weight:normal;}
.maptip p { font-family:'Optima LT W01 Roman'; }
.text-content h2, 
.text-content h3,
.button-link { /*font-family:'DalaFloda-RomanNo-2'; */font-family:'Dala Floda Web';}

.button-link { font-size:2.8em; padding:20px 30px; border:2px solid #000; display:inline-block; }


/* Text content
--------------------------------------------------------------------*/
.text-content p,
.text-content ul,
.text-content ol,
.text-content h1,
.team-member h2,
.maptip h2,
.text-content table { /*font-family:'DalaFloda-RomanNo-2'; */font-family:'Dala Floda Web'; font-size:3.6em; padding-bottom: 1.3em; line-height:130%; text-align:center; }


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

.text-content p a,
.text-content ul a,
.text-content ol a,
.text-content table a { color: #E70090; text-decoration:underline; }
.text-content table td { vertical-align: top }
.text-content ul { }
.text-content ol { list-style-type: decimal; padding-left: 1.5em; }
.text-content ul li { padding-left: 1.4em; text-indent: -.9em; }
.text-content ul li:before { content: '\2022   '; color: currentColor; }
.text-content ul li,
.text-content ol li { padding-bottom: 1.1em }
.text-content strong { font-weight:normal; }

.text-content h2 {  font-size:3.6em; padding-bottom:0.3em; }
.text-content h3 {  font-size:2.4em; padding-bottom:0.3em; }
.text-content a:hover { color: #000;}

.text-content ul ul { font-size:inherit; padding-top:0.8em; padding-bottom:0.3em;  }


.text-content.basic p,
.text-content.basic ul,
.text-content.basic ol,
.text-content.basic h1,
.team-member.basic h2,
.maptip.basic h2,
.text-content.basic table {
	font-size: 2.3em;
	font-family:'Optima LT W01 Roman', Georgia, serif; font-weight:normal; font-style:normal; 
	
}

.green-page .text-content a  {
	color:#fff;
}

/* Page structure
--------------------------------------------------------------------*/
.page-wrap { border:3px solid #AE9562; background:#FAF8F5; }
.page-wrap-inner { padding:10px; border:3px solid #005551; }
/*.page-wrap-inner { border:1px solid #AE9562;padding:10px; }*/


/* Top Bar
--------------------------------------------------------------------*/
.top-bar {
	
	padding:50px 0;
	font-size:1.8em;
	text-align: center;
	color:#AE9562;
}

/* Header
--------------------------------------------------------------------*/
header { height:156px;}
.logo { width:138px; height:50px; margin-top:50px; position:absolute; left:50%; margin-left:-69px; z-index:99; display: block;}

.logo span { background-size:cover; background-position: 50% 50%; background-repeat: no-repeat; font-size:0; background-image: url('images/global/sabai-logo-green.svg'); display: block; height:100%;}

.green-page .logo span { background-image: url('images/global/sabai-logo-white.svg'); }

header .contacts { width:50%; float:right;padding:72px 0 0 120px; font-size:1.8em; color:#AE9562;text-align:right;}
/*header .contacts a { color:#AE914F; display:inline-block; padding-right:40px; }*/
header p.contacts a { color:#AE9562; display:inline-block;  padding-right:40px; }


/* Menu
--------------------------------------------------------------------*/

.mobile-nav-toggle { display:none; }
nav.menu { width:50%; float:left;padding:72px 100px 0 0; }
nav.menu li {  padding-left:18px; display:inline-block; font-size:1.8em; }
nav.menu li:first-child { padding-left:0;}
nav.menu li a { display:block; color:#AE9562; padding-bottom:7px;}
nav.menu li.current-menu-item a { border-bottom:1px solid #AE9562; }

nav.menu li a:hover, 
header .contacts a:hover { color:#005551; }

.green-page header .contacts a:hover,
.green-page nav.menu li a:hover { color:#fff; }



/* Large image area
--------------------------------------------------------------------*/
.hero-image {  width:100%; height:0; padding-bottom:37.4%; } 
.hero-image .slide { width:100%; height:0;padding-bottom:37.4%; background-size:cover; background-position:50% 50%;  }
.graphic { width:28%; position:absolute; left:22%; bottom:0; margin-bottom:-5%; z-index:999;}
.hero-image.home { overflow:visible; padding-bottom:40%; }
.hero-image.home .slide { padding-bottom:40%; }



.lead-image {
	max-width: 600px;
	margin:0 auto 30px auto;
}

/* Content wrap 
--------------------------------------------------------------------*/
.content{ border-top:1px solid #AE914F; padding:40px 0; margin-top:10px; overflow:hidden; }
.content.no-title { padding-top:20px; }
.page-content-wrap  { overflow:hidden; border-right:1px solid #AE914F;  text-align:center; padding-right:10px; }
.page-content-wrap .text-content { padding:0 9%;  }

/* Opening / Contacts
--------------------------------------------------------------------*/
.information { float:right; width:320px; color:#AE9562;text-align:center; padding-top:20px; }
.information.secondary { display:none; }
.information .infoblock { padding:0 10px; font-size:1.8em; line-height:140%; }
.information h2 { color:#005551;  font-family: 'Dala Floda Web'; font-size:1.2em; padding-bottom: 0.2em;}
.information h2 + h2 { padding-top: 1em; }
.information h3 { padding-bottom:29px;color:#005551; }
.information li strong { display:block; } 
.information p { padding-bottom:1.8em; }
.information a { color:#AE9562; text-decoration:underline;}
.eqheight { padding-bottom:40px; }

.green-page .information h2,
.green-page .information h3 { color:#fff; }

.divider {
	height:1px; 
	background: #AE9562;
	display: block;
	margin-bottom: 35px;
}


.content {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
}

.information {
	float:none;
	flex:0 0 320px;
	position: relative;
}

.page-content-wrap {
	flex:1;
}

/* Team 
--------------------------------------------------------------------*/
.team-members { overflow:hidden; padding-top:40px; }
.team-member { float:left; width:50%; padding:0 30px 60px 30px; }
.team-member p { font-size:1.8em;color:#AE914F; line-height:133%; }
.team-member.odd { clear:both; }

/* Team Profile
--------------------------------------------------------------------*/
.team-profile {
	
	display: flex;
	flex-wrap: wrap;
}
.team-profile > div {
	width:50%;
	
}



.back-to-team {
	text-align: center;
	font-size: 1.5em;
	color: #AE9562;
}

.back-to-team a {
	color:#AE9562;
	text-decoration: underline;
}

.team-members .back-to-team  {
	padding-top:1.2em;
}
.team-members .back-to-team  a {
	color:#005551
}


@media(max-width:900px)
{
	.team-profile > div {
		
		flex:0 0 100%;

	}
	
	.team-profile > div:nth-child(2) {
		padding-top:2.5em;
	}
}

.no-border {
	border-right: none;
}

/* Promotions
--------------------------------------------------------------------*/
.promo.teal { color:#008aab; }
.promo.teal h3 span { border-color:#008aab; }

.promo.lightblue { color:#8dd4c8; }
.promo.lightblue h3 span { border-color:#8dd4c8; }

.promo.pink { color:#e70090; } 
.promo.pink h3 span { border-color:#e70090; }

.promo.gold { color:#AE914F; } 
.promo.gold h3 span { border-color:#AE914F; }

.promo.dark-green { color:#005551; } 
.promo.dark-green h3 span { border-color:#005551; }



.promo h3 { font-size:6em; padding:1em 0; line-height:125%; }
.promo h3 span { display:inline-block; border-bottom:1px solid #000; }
.promo p strong { border-bottom:1px solid currentColor; }
.promo { border-top: 1px solid #ae914f; }
.promo.first { border:none; }
.promo .promo-img { margin:0px auto; width:220px; margin-bottom:50px; }

/* Price List
--------------------------------------------------------------------*/
.price-list { text-align:left; width:94%; margin:0 auto; max-width:670px; }
.price-list h3 { border-top:1px solid #AE914F; padding:0.25em 0 1.3em 0; font-size:2em;} 
.price-row { padding-bottom:1.8em; }
.price-row p { padding-bottom:1.4em;font-size:1.8em; }
.option-headers { color:#AE914F; padding-left:37%; font-size:1.4em; overflow:hidden;  line-height:130%; margin-top:-10px;}
.option-headers span { width:33%; float:left; }

.product-option { overflow:hidden; padding:6px 0; font-size:1.8em; }
.product-option .title { width:37%; float:left; }
.product-option .price-column { width:21%; float:left; }
.product-option .free-text { width:63%; float:left; } 

.price-row h4 { font-size:1.8em; color:#AE914F; }

span.spacer { height:25px; display:block; }

/* Map 
--------------------------------------------------------------------*/
.mapwrap { padding-right:10px; }
#mapcanvas { height:auto; padding-bottom:80%; background:#E3D0B0; }
.maptip { padding:20px; max-width:300px; }
.maptip h2 { padding-bottom:0.2em; }
.maptip p { font-size:1.4em; }





/* Footer
--------------------------------------------------------------------*/

footer { font-size:1.6em; color:#fdf2d1; padding:40px 0;}

/* Media Queries
--------------------------------------------------------------------*/

@media (max-height: 900px) and (orientation: landscape)
{
	.page-wrap, 
	footer .inner, 
	header .inner { width:90%; }
	.hero-image, .hero-image .slide { padding-bottom:30%; }
	
	.home.hero-image, .home.hero-image .slide { padding-bottom:35%; }
}

/* ------ */

@media (min-width: 1500px )
{
	.page-wrap, 
	footer .inner, 
	header .inner { max-width:1370px; width:90%; }	
}

@media (max-width:1140px)
{
	.graphic { left:20%; }	
	
	.prices {
		display: block;
	}
	.prices .information.primary { display:none; }
	.prices .page-content-wrap { padding:0; border:none; }
	.prices .information.secondary { display:block; width:100%; float:none; font-size:90%; padding-top:50px; border-top:1px solid #ae914f; }
	.prices  .information .infoblock { width:50%; float:left; }
}

@media (max-width:1040px)
{
	.text-content { font-size:90%; }
	.information { flex:0 0 280px; }
}

@media (max-width:960px)
{
	.hero-image, .hero-image .slide { padding-bottom:45%; }	
	.hero-image .slide { background-size:cover; }
	.team-member { width:100%; float:none; padding:0 5% 10% 5%; }
	.team-member h2 { padding-bottom:0.4em; }
}


@media (max-width:980px)
{
	header { height:auto; padding-bottom:30px; }
	header a.logo { position:relative; left:auto; margin:30px auto 20px auto; }
	a.logo img { position:relative; max-width:138px; margin:30px auto 0 auto; }
	nav.menu { float:none; width:100%; padding:15px 0 0 0; text-align:center; }	
	nav.menu li, nav.menu li:first-child { padding:0 13px; }
	header p.contacts { display:none; }
	.content.no-title { padding-top:30px; }
	
}

@media (max-width: 870px)
{
	
	.information { flex:0 0 240px; font-size:90%; }
	.page-content-wrap .text-content { padding:0 6%; font-size:80%; }
	.graphic { left:18%; }
	.price-list { font-size:80%; }
	
	.top-bar {
		padding:35px 0;
		font-size:1.6em;
	}
}


@media (max-width: 750px)
{
	.page-content-wrap .text-content { padding:0 5%; font-size:70%; }
	.information { flex:0 0 200px; font-size:80%; }
	.graphic { left:17%; }
	.content.no-title { padding-top:30px; }
	
	.top-bar {
		font-size:1.5em;
	}
}


@media (min-width: 671px)
{
	.mobile-nav-buttons,
	.mobile-info {
		display: none;
	}
}


/* lose the 2 column */
@media (max-width: 670px)
{
	.content { display: block; }
	.information.primary { display:none; }
	.page-content-wrap { padding:0; border:none;  }
	.information.secondary { display:block; width:100%; float:none; font-size:90%; padding-top:50px; border-top:1px solid #ae914f; }
	.information .infoblock { width:50%; float:left; }
	
	.graphic { left:50%; margin-left:-14%; }
	
	.mapwrap { padding:0 0 30px 0; }
	
	
	.lead-image {
		max-width: 200px;
	}
	
	header > .inner {
		padding:0;
		width:100%;
	}
	
	.mobile-nav-buttons {
		margin:0 -5px;
		overflow: hidden;
		padding-top:15px;
		display:flex;
	}
	
	.mobile-nav-buttons > div {
		width:50%;
		//float:left;
		padding:0 5px;
	}
	
	.mobile-nav-buttons a {
		border:1px solid #AE9562;
		padding:10px;
		text-align: center;
		display: block;
		color:#AE9562;
		font-size: 1.7em;
	}
	
	.mobile-nav-buttons a span {
		position: relative;
	}
	.mobile-nav-buttons a span:after{
		content:'›';
		position: absolute;
		display: block;
		transform: rotate(90deg) scale(1.1);
		top:2px;
		left:10px;
	}
	
	
	.mobile-info,
	.menu {
		display: none;
	}
	
	.mobile-info.open,
	.menu.open {
		display: block;
	}
	
	header .information.secondary {
		border:none;
	}
	
	header .information.secondary .contacts {
		text-align: center;
	}
	
	
	header .information.secondary .promo-block {
		display: none;	
	}
	
	nav.menu {
		padding-top:50px;
		padding-bottom: 25px;
		text-align: center;
	}
	
	nav.menu li {
		font-size:2.6em;
	}
	
	
	nav.menu li,
	nav.menu li:first-child {
		display: block;
		padding:0 0 25px 0;
	}
	
	
	nav.menu li:last-child {
		padding-bottom: 0;
	}
	
	
	nav.menu li a {
		display: inline-block;
	}
	
	
}


@media (max-width: 610px)
{
	.price-list { font-size:70%; }
	.product-option .free-text { font-size:0.8em; }
	.page-content-wrap .text-content{ font-size:65%; }
	.team-member {font-size:80%;  }
	
	.text-content h1 { font-size:5em; }
	
	.text-content.basic {
		font-size: 70%;
	}
}


@media (max-width: 480px)
{
	.hero-image, .hero-image .slide, .hero-image.home .slide, .hero-image.home { padding-bottom:70%; }
	footer { padding:30px 0; }
	.price-list { width:100%; font-size:65%; }
	.information h3 { padding-bottom:20px; }
	.information .infoblock,
	.prices .information .infoblock { width:100%; float:none;  }
	nav.menu { font-size:85%; }
	.page-content-wrap .text-content { font-size:60%; }
	.graphic { width:40%; margin-left:-20%; margin-bottom:-12% }
	.promo .promo-img { width:150px; margin-bottom:30px; }
	.page-content-wrap .text-content { padding:0 3%; }
	
	.top-bar {
		font-size:1.4em;
		padding:25px 0;
	}
	
	
	header {
		padding-bottom: 15px;
	}
	
	.mobile-nav-buttons a {
		font-size: 1.5em;
	}
	
	.text-content.basic {
		font-size: 70%;
	}

}

@media (max-width: 400px)
{
	
	
	.top-bar {
		font-size:1.3em;
		padding:20px 0;
	}
	
	.mobile-nav-buttons a {
		font-size: 1.3em;
	}
	
	.lead-image {
		max-width: 170px;
	}
}

@media (max-width:370px)
{
	.text-content { font-size:60%; }
	a.logo img { position:relative; max-width:110px; margin:30px auto 0 auto; }	
	
	nav.menu { padding:30px 0 0 0;  }
	.page-content-wrap .text-content { font-size:50%; }
	.information.secondary, .prices .information.secondary { font-size:80%; }
	
	
	.text-content.basic {
		font-size: 65%;
	}
}


@media (max-width:335px)
{
	.page-wrap  { margin-top:1.5%; width:97%; }
	

	.top-bar {
		font-size:1.2em;
		padding:20px 0;
	}
	
}



.takeover {
	
	background: rgba(0,0,0,0.8);
	position:fixed;
	height:100%;
	width:100%;
	left:0;
	top:0;
	z-index: 100;
	overflow: scroll;
		
}

.takeover-contents {
	
	text-align: center;
	background: #FAF8F5;
	padding:55px 40px;
	width:100%;
	margin:40px auto;
	max-width: 800px;
	font-size: 2em;
	
}

.takeover-contents p {
	padding-bottom: 1.2em;
	line-height: 130%;
}

.takeover-contents p:first-child {
	font-size: 1.5em;
	font-family:'Dala Floda Web';
}


.takeover-contents .logo {
	
	position: relative;
	top:auto;
	left:auto;
	margin:0 auto 45px auto;
	
}

.takeover-contents .logo span {
	background-image: url('images/global/sabai-logo-green.svg')!important;
}

@media(max-width:800px)
{
	.takeover-contents { 
		font-size: 1.7em;
	}
}


@media(max-width:500px)
{
	
	
	.takeover-contents { 
		margin:25px auto;
		font-size: 1.5em;
		padding:30px 15px;
	}
	.takeover-contents .logo {
		margin-bottom: 25px;
	}
	
	.takeover-contents p:first-child {
		font-size: 1.3em;
	}

}




.alert-banner {
	
	padding:10px;
	margin-bottom:25px;
	background:#AE9562;
	color:#fff;
}

.alert-banner a {
	text-decoration: none;
	color:#fff;
}

.alert-banner h2 {
	
	font-size: 1.8em;
	font-family:'Dala Floda Web';
	padding:0 0 0.35em;
	line-height: 115%;
	color:#fff;
}

.alert-banner p {
	padding:0;
}

.alert-banner > a > div {
	padding:25px 15px;
	border:1px solid #fff;
	background:#AE9562;
	
}

.green-page .alert-banner{
	background:#fff;
}
.green-page .alert-banner h2,
.green-page .alert-banner a { 
	color:#AE9562;
}
.green-page .alert-banner a:hover {
	color:#AE9562!important;
}
.green-page .alert-banner div {
	border:1px solid #AE9562;
	background:#fff;

}

.mobile-nav-buttons {
	overflow:visible;
}

.mobile-nav-buttons > .mobile-alert-banner {
	width:100%;
	float:none;
	clear:both;
	display: block;
	margin-bottom: 10px;
	top:10px;
	backgroumd
}