html, body {
	// Overrides some weird inline styles applied by JIMG plugin
	width:100%!important;
	height:100%!important;
	margin:0;
	padding:0;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
body {
	min-width: 20em;
	font: $font;
	letter-spacing: .05em;
	background: $clr_1;
	position: relative;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
a {
	&:link, &:visited {
		color: $clr_1;
		text-decoration: none;
	}
	&:hover, &:focus {
		color: $clr_1;
		text-decoration: none;
	}
}
// Page load
.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('../img/loading.gif') 50% 50% no-repeat rgba(60,60,60,.8);
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.underlined {
	margin: 0;
	padding: 0;
	li {
		font-size: .825em;
		color: white;
		border-bottom: 1px dotted lighten($clr_3, 10%);
		padding: .25em 0;
		text-transform: uppercase;
	}
	li.icon {
		@include entypo-social ($clr_8, 4em);
	}
}
#inner-wrap {
	@include group;
	background-size: 170%;
	background-repeat: no-repeat;
	background-position: top center;
	@include breakpoint(bp-768) {
		background-size: 110%;
	};
	@include breakpoint(bp-1024) {
		background-size: 100%;
	};
}
.page #inner-wrap {
	background-color: white;
}

address {
	font-style: normal;
}
// Main
main[role="main"] {
	@include group;
	width: 100%;
	height: 100%;
	text-align: center;
	position: relative;
	float: left;
	background-color: #fff;
}
#big-background {
	width: 100%;
	height: 75vh;
	margin: $headerHeight 0 0;
	border: none;
	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  @include breakpoint(bp-768) {
    margin: $headerHeight-md 0 0;
  };
  @include breakpoint(bp-1024) {
    margin: $headerHeight-lg 0 0;
  };
	ul.slides {
		height: 100%;
		li {
  		height: 100%;
  		span {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-size: cover;
        background-position: center center;
      }
		}
  }
}
#article-container {
	@include group;
	width: 100%;
}
#the-filling {
	width: 100%;
	padding: 0 5%;
	max-width: 80em;
	@include breakpoint(bp-1024) {
	    margin: 0 auto;
	};
}
article.main-article {
	@include group;
	@extend .extend-full;
	padding-top: $gutter * 2;
	img {
  	max-width: 100%;
  	height: auto;
  }
}
#article-body {
	padding-bottom: $gutter * 2;
	a {
		&:link, &:visited {
			text-decoration: underline;
		}
		&:hover, &:active, &:focus {
			text-decoration: none;
		}
	}
	ul {
  	list-style: disc;
  	padding: $gutter 0 $gutter $gutter * 2;
  	&.address {
    	list-style: none;
    	padding: 0;
  	}
	}
}
section {
	@include wrapper;
	padding: 0;
	position: relative;
}
.centre {
	text-align: left;
	margin: 0 auto;
	width: 100%;
	max-width: $maxWidth;
}
.grid-set {
	.grid {
		@extend .col-xs-12 !optional;
		width: 47.5%;
		margin: 0 5% 5% 0;
		padding: 0;
		position: relative;
		font-family: 'Mate', serif;
		line-height: 1;
		@extend .animate-contract-image;
		@include breakpoint(bp-768){
			width: 23.5%;
			margin: 0 2% 0 0;
		}
		a {
			display: block;
			position: relative;
			div {
				position: absolute;
				@include center(xy);
				width: 100%;
				text-align: center;
				margin: 0;
				font-size: .825em;
				//padding: 2em 0;
				//bottom: 4em;
				//left: 0;
				@include breakpoint(bp-480) {
					font-size: 1.2em;
				}
				@include breakpoint(bp-640) {
					font-size: 1.5em;
				}
				@include breakpoint(bp-768) {
					font-size: .9375em;
				}
				@include breakpoint(bp-980) {
					font-size: 1.25em;
				}
				@include breakpoint(bp-1024) {
					font-size: 1.3rem;
				}
				/*@include breakpoint(bp-1280) {
					font-size: 1.6em;
				}*/
			}
			em {
				display: block;
				padding: 0 0 .25em;
				letter-spacing: .15em;
				line-height: 1;
			}
			span {
				display: block;
				border: 1px solid white;
				border-left: 0;
				border-right: 0;
				background: $clr_4;
				padding: .25em 0;
				text-transform: uppercase;
				font-size: 1.5em;
				letter-spacing: .05em;
			}
			&:hover {
				color: white;
				/*span {
					background: transparent;
				}*/
			}
		}
	}
	.last-x2 {
		margin: 0 0 4% 0;
		@include breakpoint(bp-768) {
			margin: 0 2% 0 0;
		};
	}
	.last-x4 {
		@include breakpoint(bp-768) {
			margin: 0;
		};
	}
	/*div.break {
		@include breakpoint(bp-768) {
		   margin: 0 0 0 2%;
		};
	}*/
}
#address {
	width: 100%;
	@include breakpoint(bp-600) {
		width: 50%;
		float: left;
	};
	@include breakpoint(bp-1024) {
		width: 70%;
	};
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			color: red;
			text-transform: uppercase;
			@include breakpoint(bp-1024) {
				font-size: 1.25em;
				line-height: 1.5em;
			};
		}
		li:last-child {
			text-transform: lowercase;
		}
		a {
			&:link, &:visited {
				color: red;
			}
			&:hover, &:active {
				color: $clr_5;
			}
		}
	}
}
.page, .single {
	.post-thumbnail {
		margin-top: 5%;
	}
}
.page-header {
  padding: $gutter 0 $gutter;
}
// Panels
.panel {
  width: 100%;
  padding-top: $gutter * 2;
  padding-bottom: $gutter * 2;
  @extend .extend-full;
  &.white {
    background: white;
  }
  &.blue {
    background: $clr_9;
    color: white;
    p {
    	color: white;
    }
    a {
    	color: white;
    }
  }
}