/* =============================================================================
  	Required styling
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
}

html, body {
	font-size: 13px; /* use http://pxtoem.com/ to convert text size */
	font-family: 'Montserrat', sans-serif;
	line-height:1.7;
	color: #333;
	font-weight: 400;
	width:100%;
}


/* responsive google map */
.google-maps {
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
img { max-width:100%;}
.content article img {
	max-width: 97.7%;
	margin-bottom: 2.3%;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
- See more at: http://avexdesigns.com/responsive-youtube-embed/#sthash.uhbfuvl8.dpuf
.extra-padding{padding-left: 35px;}
/* =============================================================================
  	Responsive Grid
   ========================================================================== */

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12, .span-spec-4,.span-spec-8, .span-spec-top-8, .span-slider-8,footer{
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;

}

/* ===========================================================================================
   Responsive Design
   =========================================================================================== */


.col{
  margin-left: 2.3%;
 /* might need to delete this as it might not work? */
}

.col:first-child {
  margin-left:0;
}
.spacer {
	margin-top: 2.3%;
}
.small-spacer {
	margin-top: 1.15%;
}
.large-spacer{
	margin-top: 3.5%;
}
.push-right{
	float: right;
	text-align: right;
}
.pos-right{
	float: right;
}
.pad-right{
	padding-right:5.3%;
}
.pad-left{padding-left:35px;}
.pos-rel{
	position: relative;
}
.pos-ab{
	position: absolute;
}
.pad-all-30{
	padding: 30px;
}

.span1{
  width: 6.225%;

}
.span2{
  width: 14.75%;

}
.span3{
  width: 23.275%;

}
.span4,.span-spec-4{
  width: 31.8%;

}
.span5{
  width: 40.325%;

}
.span6{
  width: 48.85%;

}
.span7{
  width: 57.375%;

}
.span8, .span-spec-top-8{
  width: 65.9%;

}
.span9{
  width: 74.425%;

}
.span10{
  width: 82.95%;

}
.span11{
  width: 91.475%;

}
.span12{
  width: 100%;
  margin-left: 0;
}
.span-spec-8{
  width: 65.9%;
}
.span-spec-9{
  width: 75.425%;
}

.flex-span5{
  width: 40.325%;

}
.span-slider-8{
  width: 62.9%;
  margin-right:3%;
}	
.span-facebook-4{
  width: 32.6%;
}
.centred{text-align: center;}


/* ===========================================================================================
   Place Grid @media below
   =========================================================================================== */

@media screen and (min-width: 996px){
	footer nav ul {
	width:36%;}
}

@media screen and (min-width: 768px) and (max-width: 995px){

	.span9{
		width: 63%;

  	}
  	.span3{
	  	width: 34%;
  	}
  	.pad-right,.pad-left {
    	padding-right: 0;
	}
	footer nav ul {
	width:55%;}

}
@media screen and (max-width: 767px){
	.span8, aside.span4,.span3,.span9,.span-facebook-4,.span-slider-8 {width:100%;}
	.logo {width: 65.9%;}
	.col,.col-left-spec {margin-left:0;}
	.pad-right,.spacer-pd,.content{padding-right: 0;}
	.span-spec-4{width:40%;}
	.span-spec-top-8{width:60%;}
	.span-spec-8{width: 100%;}
	.push-right{float: left;}
		.pad-all-30{padding: 10px;}
		.map{display: none;}
		
		footer nav ul {
	width:65%;}
		
	.span6.video {
 width:100%; 
    margin-top: 15px;
	}

	
}

@media screen and (max-width: 767px) and (min-width: 481px){
	footer nav ul {
	width:65%;}
	}

@media screen and (max-width: 480px){
	.flex-span5{
		width: 70.325%;
	}
	.span-spec-4{width:50%;}
	.span-spec-top-8{width:50%;}
	.pad-all-30{padding: 10px;}
	footer nav ul {
	width:97%;}

}


/* ===========================================================================================
   Clear spacing
   =========================================================================================== */

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}


/* =============================================================================
   Font-Face
   ========================================================================== */
/* This is the proper syntax for an @font-face file */

	@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(http://themes.googleusercontent.com/static/fonts/montserrat/v4/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat-Bold'), url(http://themes.googleusercontent.com/static/fonts/montserrat/v4/IQHow_FEYlDC4Gzy_m8fcnbFhgvWbfSbdVg11QabG8w.woff) format('woff');
}