/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 
useful info
Globe yellow #edb33e;
 
*/
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
  

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

body {
	font-family: trade-gothic-next, sans-serif;
font-weight: 400;
font-style: normal;
	}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
  Typography
   ========================================================================== */


h1 {
	font-size:36px;
}

h2 {
	font-size:30px;
	font-weight:300;
}

h3 {
	font-size:18px;
}

p.large-text {
	font-size:24px;
}

p {
	font-size:16px;
	line-height:24px;
}

.text-link {
	color:#edb33e;
	text-decoration: none;
	padding-bottom:6px;
}

.text-link:hover {
	border-bottom:solid 1px #f9b335;
}

.center {
text-align:center;
}

.intro-text .center {
max-width:75%;
margin-right:auto;
margin-left:auto;
}

.thick-border {
border:solid 20px #fff;
}

.icon-wrapper {
padding:24px 0px;
}

a.logo {
z-index:500;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
  	padding: 0px 15px 15px 0px;
	margin: 0;
    box-sizing: border-box;
}
   
 .flex-box {
	 display:flex;
	 flex-wrap: wrap;
	 }
	 
 .container {
	max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    position: relative;
	 }  
	 
 .header {
	background: #4a4a49;
	box-shadow: 0px 7px 8px rgba(0, 0, 0, 0.25);
    width: 100%;
    display: flex;
	flex-wrap: wrap;
    animation-duration: 0.5s;
	transition: 0.5s;
	height:84px; 
	 }  

.main-navigation ul {
	display:flex;
	list-style:none;
	}
	
.hero {
	position:relative;
	}

.main-navigation {
margin-left:auto;
}

.main-navigation ul li a {
	cursor:pointer;
	text-decoration:none;
}

.main-navigation ul li a:hover {
	border-bottom:solid #fff 5px;
	padding-bottom:24px;
}

.image-cluster img{
max-width:100%;
min-height: 260px;	
}

.arrw-link {
text-transform:uppercase;
text-decoration:none;
font-family: trade-gothic-next-compressed, sans-serif;	
color:#000;	
margin-top:48px;
}

table .arrw-link {
	margin-top:0px;
	}

.center-content .arrw-link {
display:block;	
text-align:center;	
}

.arrw-link img {
margin-left:20px;
display:inline-block;	
}

.image-cluster [class*="col-"] {
overflow:hidden;
}

.available {
background-color:#f8b200!important;
}

.grey-bg {
background-color: #4d4d4f;
}

.bg-wrap {
background-image: url('../img/globe-bg.png');
background-repeat:no-repeat;
background-position:center center;
background-attachment: fixed;
padding: 0px 0px 96px 0px;	
}

.avail-bg {
background-position:center bottom;
background-blend-mode: exclusion;
}

.hero-slider{
	width: 100%;
  	overflow: hidden;
  	margin: auto;
  	position: relative;
	height:100%;
	}
	
.slick-list {
    order: 2;
    width: 500px;
    overflow: hidden;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 80%;
    z-index: -1;
	height:90%;
}
	
.main-navigation ul li {
	margin-right:24px;
	}   
	
.main-navigation ul li a {
	color:#fff;
	height:30px;
	text-transform:uppercase;
	text-decoration:none;
	font-family: trade-gothic-next-compressed, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size:30px;
	}

.banner {
    width: 100vw;
    height: 65vh;
	background-size: cover;
	background-position:center bottom;
	background-repeat:no-repeat;
}

.slider-text {
background:#aeadad;
padding:24px 0px;	
}

.slider-text h2 {
font-size:32px;
color:#fff;	
}

.yellow {
color:#ffd213;
}

.black-weight {
	font-weight:700;
}

.slick-dots {
	display: flex;
	justify-content: flex-end;
	margin: 0;
	padding: 1rem 0;
	list-style-type: none;
	margin-top:50px;
	margin-right:50px;
}

.slick-dots	li {
			margin: 0 0.25rem;
	}
	
.slick-dots	button {
			display: block;
			width: 12px;
			height: 12px;
			padding: 0;
			border: none;
			border-radius: 12px;
			background-color: #b2b2b2;
			text-indent: -9999px;
}
	
.slick-dots	li.slick-active button {
			background-color: #f9b335;
		}

.slick-list,
  .slick-track,
  .slick-slide {
    height: 70vh;
    width: 100vw;
    display: flex;
  }
  
 .description-overhead .slick-list,
  .slick-track,
  .slick-slide {
	  height:75vh;
  }

.slick-list {
	height:90%;
}

.menu.is-fixed {
        position: fixed;
        z-index: 100;
        animation-name: stickySlideDown;
        padding: 0;
 		transition:none;
    }

.menu.is-fixed .logo  {
	animation: scale 500ms ease-out  forwards;
	animation-name: scale-logo;
	transform-origin: top left;
}

.centre {
	text-align:center;
}

.benefits-grid {
	display:flex;
	flex-wrap:wrap;
	list-style:none;
	justify-content: space-between;
	margin-top:90px;
}

.benefits-grid .item {
	display:block;
	text-align:center;
	font-size:30px;
	margin-top:48px;
}

#full-map {
height: 450px;
}

.center-content {
	margin-left:auto;
	margin-right:auto;
}

.panel {
	padding:90px 0px;
}

.vert-line {
border-right:solid 1px #fff;
}

.sunburst-bg {
background-color: #edb33e;
}

.content-page .scroll-down-arrow {
bottom:0px;
}

footer h2 {
	flex-basis:100%;
	font-size:18px;
}

.footer-logos {
	padding-top:24px;
	align-items: center;
	justify-content: space-between;
}

.footer-ttl {
	align-items: center;
	padding-top:24px;
	padding-bottom:24px;
}

.black-bg {
	background:#000;
	color:#fff;
}

.contact-details {
	list-style:none;
	margin-left:0px;
	padding-left:0px;
	font-size:14px;
	margin-top:0px;
}

.contact-details li {
height:30px;
}

.name {
	font-weight:bold;
	margin-bottom:0px;
}

.image-grid {
	justify-content: space-between;
}

.lrg-image {
	margin-top:80px;
}

.small {
	font-size:8px; 
	color:#fff; 
	line-height:12px;
}

#nav-icon {
  margin: 24px;
  width: 40px;
  display: none; 
  justify-content: flex-end;
  cursor: pointer;
}

#nav-icon:after, 
#nav-icon:before, 
#nav-icon div {
  background-color: #fff;
  content: '';
  display: block;
  height: 5px;
  margin: 7px 0;
  transition: all .2s ease-in-out;
}

#nav-icon:hover:before {
  transform: translateY(12px) rotate(135deg);
}

#nav-icon:hover:after {
  transform: translateY(-12px) rotate(-135deg);
}

#nav-icon:hover div {
  transform: scale(0);
}

.col-1.separator {
display:flex;	
}

.scroll-down-arrow {
	background-image: url("../img/scroll-down.png");
	background-repeat: no-repeat;
	position:absolute;
	bottom: 200px;
	left:50%;
	margin-left:-21px;
	animation: bounce 1s infinite alternate;
	-webkit-animation: bounce 1s infinite alternate;
	-moz-animation: bounce 1s infinite alternate;
	-o-animation: bounce 1s infinite alternate;
}

.mobile-navigation {display:none;}

.small-address {
position: absolute;
    font-size: 10px;
    text-transform: uppercase;
    top: 120px;
    left: 46px;
    text-align: center;
    width: 130px;
    color: #4a4a49;
}

.footer-padding {
	padding: 30px 0;
}

@keyframes scale-logo {
	from{
		 transform: scale(1);
	}
   to {
    transform: scale(0.75);
}
}

@keyframes stickySlideDown {
    0% {
        opacity: 0.7;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}

.map-key {
   background:#fff;
	padding:24px;
	position:absolute;
	top:480px;
	left:0px;
}

.key-row {
font-size:14px;
display:flex;
}

.location-intro {
color:#aeadad;
font-weight: 200;
}

.distances-tbl {
border-spacing:0px;
}

.distances-tbl th {
font-weight:bold;
text-align:center;
background-color:#01ada4;
padding: 10px;
color:#fff;	
}

.distances-tbl td {
border-collapse: collapse;	
text-align:center;	
border: none;
padding: 10px;
}

#availability .distances-tbl tr {
background:#fff;
}

#availability .distances-tbl tr:nth-child(even) {
	background-color: #eaeaeb
}
.distances-tbl tr:nth-child(even) {
	background-color: #eaeaeb
}

.slick-arrow {
	background-image: url('../img/prev-arrw.png');
	background-repeat: no-repeat;
	text-indent:-4000px;
	background-color: transparent;
	position:absolute;
	bottom:20px;
	right:20px;
	border:0px;
	height:42px;
	width:45px;
	cursor:pointer;
	outline:none;
	}
	
.slick-prev {
	right:70px;
	}	

.slick-next {
	background-image: url('../img/next-arrw.png');
}

.overlay-sticker {
	position:absolute;
	top:40px;
	right:40px;
	}

.overlay-sticker img {
	width: 300px;
}


/* ==========================================================================
   Responsive Nav
   ========================================================================== */

.mobile-navigation{
	background:#4a4a49;
	width:100%;
	z-index:900;
}

.mobile-navigation ul {
	list-style:none;
	width:100%;
	margin:0px;
	padding:0px;
}

.mobile-navigation ul li {
	width:100%;
	border-bottom:solid 1px #fff;
}

.mobile-navigation ul li a {
	color:#fff;
	text-decoration:none;
	padding:12px;
	display:block;
}


	
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
   
 @media only screen and (max-width: 1175px) {
	
	.main-navigation ul {
	display:none;
	}
	
	#nav-icon {
	display: block;
	margin-right:24px;
	z-index:999;
	}
	
	 	.thick-border img {
		max-width:100%;
		}	
	
	
} 
  
   
   

@media only screen and (max-width: 1024px) {
	
	.logo {
	width:17%;
	}
	
	.hero h1 {
		margin-left:12px;
	}
	
	.header.menu-active {
	height:auto;
		}
	

	.container {
		padding:0px 2%;
		width:96%;
	}
	
	.image-cluster .col-8 {
	width:66.66%;
	padding-right:15px;	
	}
	
	.image-cluster .col-4 {
	width: 33.33%;
	padding-right:15px;		
	}
	
	.overlay-sticker img {
	width:150px;
	height:auto;	
		}

}

@media only screen and (max-width: 968px) {
  /* Style adjustments for viewports that meet the condition */
	
	h1 {
		font-size:24px;
	}
	
.header {
	padding-top:0px;
	padding-bottom:0px;
	}
	
.header .container {
	padding:0px 0px;
	width:100%;
	}
	
.logo {
	animation: scale 500ms ease-out  forwards;
    animation-name: scale-logo;
	transform-origin: top left;
	}
	
.logo {
	width:40%;
	}
		
.main-navigation {
	display: flex;
	justify-content: flex-end;
	width:55%;
	}

	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 {
		width:100%;
		padding-right:0px;
	}
	
		.image-cluster .col-8 {
	width:66.66%!important;
	padding-right:15px;		
	}
	
	.image-cluster .col-4 {
	width: 33.33%!important;
	padding-right:15px;		
	}
	
.col-3 {
		width:50%;
	}
	
	.break {
		display:none;
	}
	
	.full-map {
		height:600px;
		position:relative;
	}
	
	.responsive-img {
		width:100%;
		display:block;
		height:auto;
	}
	
	.benefits .col-8 {
		padding-right:0px;
	}
	
	.benefits-grid {
		margin-top:0px;
		padding-left:0px;
		margin-left:0px;
		width:100%;
	}
	
	.benefits-grid .col-3 {
		padding-right:0px;
		width:100%;
	}
	
	.benefits-grid .col-3:nth-child(odd) {
		padding-right:6px;
	}
	
	.benefits-grid .col-3:nth-child(even) {
		padding-left:6px;	
	}
	
	.benefits-grid .col-3:nth-child(6) {
		padding-right:6px;
		padding-left:0px;
	}
	
	.benefits-grid .col-3:nth-child(7) {
		padding-left:6px;	
		padding-right:0px;
	}
	
	.benefits-grid .col-3:nth-child(8) {
		padding-right:6px;
		padding-left:0px;
	}
	
	.benefits-grid .col-3:nth-child(9) {
		padding-left:6px;	
		padding-right:0px;
	}
	
	.full-map .col-3 {
	width:100%;
	}
	
	.full-map .col-2 {
	width:16.66%;
	padding-right:15px;
	}
	
	.panel {
		padding:45px 0px;
		}
		
	.image-grid img {
		margin-left:auto;
		margin-right:auto;
		margin-bottom:12px;
		width:100%;
	}
	
	.thick-border {
		width:75%;
		padding:0px;
		}
		
	.scroll-down-arrow {
		bottom:auto;
		}	
		
	.benefits .col-3:nth-child(3) {
		width:100%;
		}
	
	.slider-text h2 {
	margin:0px;
	}
	
	.image-cluster img {
	min-height:100%;
	}
	
	.image-cluster .col-8 {
	min-height: 120px;
    overflow: hidden;
	}
	
	.image-cluster .col-4 {
	min-height: 120px;
    overflow: hidden;
	}
	
}

@media only screen and (max-width: 758px) {
	
	.full-map {
		height:700px;
		background-position:-200px center;
		}
	
	.footer-logos {
	flex-direction:column;
	padding-top:0px;
	}
	
	.footer-logos img {
	margin-bottom:10px;
	}
	
	.footer-ttl {
	text-align:center;
	}
	
	.col-3 {
	width:100%;	
		}
	
}

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

	.hero h1 {
	top:40px;
	}
	
	.panel {
	padding:20px 0px;
	}
	
	.container {
	padding:0px 5%;
	width:90%;	
	}
	
	.thick-border {
	width: 75%;
    padding: 0px;
	}
	
	.overlay {
	opacity:0.25;
	}
	
	.lrg-image {
	padding-right:0px;
	margin-top:0px;
	}
	
	#contact .col-3 {
	width:100%;
	}
	
	.distances-tbl td {
	padding:5px 0px;
	}
	
	#nav-icon:hover:before {
  transform: translateY(14px) rotate(135deg);
}

#nav-icon:hover:after {
  transform: translateY(-10px) rotate(-135deg);
}
	
}


@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}