/* -----------------------------------------------
Mat Smith Style Sheet
author:   mat@matsmith.co.uk
----------------------------------------------- */


html,body,div,p {font-family: 'Open Sans', sans-serif; color: #666; font-size:16px;margin:0;padding:0;border:0;}
body {
	margin: 0;
	padding: 0;
	background-color: #666;
	background: url(../img/expo.png) no-repeat center center fixed; 
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	 	-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		-ms-text-size-adjust: none;
	
}

h1 {color:#36BEBA; font-size:6em;}
h2 {color:white;font-size:3em;}
h3 {color:white;font-size:1.5em;}
p {color:white;font-size:1.2em;}


/* Generic Rules
----------------------------------------------- */
a:link,a:active {
	color: #36BEBA;
	text-decoration: none;
	border-bottom: 1px dotted #36BEBA;
}
a:visited {
	color: #36BEBA;
	text-decoration: none;
	border-bottom: 1px dotted #36BEBA;
}	
a:hover {
	color: #36BEBA;
	border-bottom: 1px solid #36BEBA;
}
a:link,a:active,a:hover,a:visited img {border-width: 0; border-style: none;}
#logo a, #home a {border: 0;}


/* Fonts
----------------------------------------------- */ 

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.svg#icomoon') format('svg'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

[data-icon]:before {
	font-family: 'icomoon';
	content: attr(data-icon);
	speak: none;
	font-size:18px;
	margin-right:10px;
	line-height:20px;
	margin-top:10px;
}

.di {
	font-family: 'icomoon';
	content: attr(data-icon);
	speak: none;
	font-size:18px;
	margin-right:10px;
	margin-top:0px;
	/*line-height:30px;*/
	/*display:block;*/
	/*float:left;*/
}

.wrap {width:100%;}
.center {margin:0 auto;}

.header {max-width:960px; height:8em; margin:0 auto;}
.centre_col {
	width:100%;
	max-width:960px; 
	/*background:#fff; */
	margin:0 auto;
	padding:0;
	
}

.main-image {
	width: 100%;
	height: 25em;
    background-image: url("../img/expo.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
	padding-top: 1px;
}

.main-heading {
	width: 100%;
    text-align: center;
	margin-top:2em;
	padding: 1.5em 0;
}

.main-heading-2 {
	width: 100%;
    text-align: center;
	margin-top:0em;
	padding: 1.5em 0;
}

.vid {width:600px;}

.striped_bg {background-image: url("../img/stripes.svg"); background-size: cover;}


.p1{padding:1em}
.p2{padding:2em}
.p3{padding:3em}
.pl1{padding-left:1em}
.pl2{padding-left:2em}
.pl3{padding-left:3em}
.pl4{padding-left:4em}
.pl5{padding-left:5em}


#content {
	width: 290px;
	float: left;
	padding: 5px 15px;
}

#middle {
	width: 294px; /* Account for margins + border values */
	float: left;
	padding: 5px 15px;
	margin: 0px 5px 5px 5px;
}

#sidebar {
	width: 270px;
	padding: 5px 15px;
	float: left;
}
footer {
	clear: both;
	padding: 0 15px;
}


.icon-container {width:300px; display:inline-block; height:200px; margin-bottom:10em; }

.service-icon {width:10em;} 


.logo {padding:2em 0 1.5em 2em; width:15em;}
.logo-wrap {background:#36BEBA;}
.call-us {display:inline; float:right; text-align:right; padding:1em 0.5em;}

.button a:link, .button a:active, .button a:hover, .button a:visited {background:red; padding:1em; font-size:300%; color:white; width:80%; margin:0 auto; -webkit-border-radius: 15px;
border-radius: 15px;}
.button-wrap {display:none;}
.foot-logo {width:20em;}
.sub-heading {padding:0 1em; margin:0 auto; font-size:250%}

footer a:link, footer a:active, footer a:hover, footer a:visited {color:white;}
.logo-wrap a:link, .logo-wrap a:active, .logo-wrap a:hover, .logo-wrap a:visited {color:white;}











/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 41%;
		padding: 1% 4%;
	}
	#middle {
		width: 41%;
		padding: 1% 4%;
		margin: 0px 0px 5px 5px;
		float: right;
	}
	
	#sidebar {
		clear: both;
		padding: 1% 4%;
		width: auto;
		float: none;
	}

	header, footer {
		padding: 1% 4%;
	}
	
	h1 {
		font-size: 550%;
	}
	
	h3 {
		font-size: 200%;
	}
	
	p {font-size: 230%;}
	
	.foot-logo {width:14em;}
	.contact-details {font-size:300%;}
	.sub-heading {padding:0 1em; margin:0 auto; font-size:400%}
}


@media screen and (max-width: 980px) {
	.icon-wrap {width:100%;}
	h3 {font-size:3.5em; width:80%;margin:0 auto; }
	.icon-container {width:100%; margin:0 auto; height:auto; margin-bottom:5em;}
	.service-icon {width:30em;}
	.logo-wrap {text-align:center;}
	.logo {padding:2em; width:30em; }
	.call-us {display:none;}
	.button-wrap {display:block; margin-top:10em; margin-bottom:15em;}
	
}


/* for 700px or less */
@media only screen and (max-width: 750px) {

	#content {
		width: auto;
		float: none;
	}
	
	h1 {
		font-size: 550%;
	}
	
	h2 {
		font-size: 2em;
	}
	
	p {font-size: 180%;}
	
	
	#middle {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	
	#sidebar {
		width: auto;
		float: none;
	}
	
	.vid {
		width: 95%;
	}

.centre_col {
	width:100%; 
	margin:0 auto;
	}
	

	
	
}






/* for 700px or less */
@media only screen and (max-width: 640px) {

	#content {
		width: auto;
		float: none;
	}
	
	h1 {
		font-size: 400%;
	}
	
	h2 {
		font-size: 2em;
	}
	
	p {font-size: 180%;}
	
	
	#middle {
		width: auto;
		float: none;
		margin-left: 0px;
	}
	
	#sidebar {
		width: auto;
		float: none;
	}
	
	.vid {
		width: 95%;
	}
	.centre_col {
	width:100%; 
	margin:0 auto;
	}
	
	.button {display:block;}


}



/* for 480px or less */
@media only screen and (max-width: 480px) {

	header {
		height: auto;
	}
	h1 {
		font-size: 300%;
	}
	
	h2 {
		font-size: 2em;
	}
	

	
	p {font-size: 180%;}
	
	#sidebar {
		display: none;
	}
	
	.vid {
		width: 95%;
	}
	.centre_col {
	width:100%; 
	margin:0 auto;
	}
	
	
.button {display:block;}

}






















.body-text {font-size:16px; color:white}
.green-text {
  color: #36BEBA; }
  
.light-green-text {
  color: #98dc4f; }

.red-text {
  color: #F00; }

.pink-text {
  color: #ec008c; }

.orange-text {
  color: #F90; }

.black-text {
  color: #000; }

.white-text {
  color: #FFFFFF; }

.dark-brown-text {
  color: #683C11; }

.gold-text {
  color: gold; }

.mid-blue-text {
  color: #5f9ecc; }

.bold {
  font-family: 'neo_sansbold'; }

.light-grey-text {
  color: #CCC; }

.mid-grey-text {
  color: #999; }

.mid-dark-grey-text {
  color: #686868; }

.dark-grey-text {
  color: #666; }

.blue-text {
  color: #A0C1E2; }

.dark-blue-text {
  color: #222965; }

.dark-brown-text {
  color: #453401; }

.p0 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px; }

.p5 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 5px;
  margin-left: 0px; }

.p10 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 0px; }

.p20 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 20px;
  margin-left: 0px; }

.p30 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 30px;
  margin-left: 0px; }

.p40 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 40px;
  margin-left: 0px; }

.p50 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 50px;
  margin-left: 0px; }

.p60 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 60px;
  margin-left: 0px; }

.p70 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 70px;
  margin-left: 0px; }

.p80 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 80px;
  margin-left: 0px; }

.p90 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 90px;
  margin-left: 0px; }

.p100 {
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 100px;
  margin-left: 0px; }

.pt5 {
  margin-top: 5px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px; }

.pt10 {
  margin-top: 10px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px; }

.pt20 {
  margin-top: 20px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px; }

.pt30 {
  margin-top: 30px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px; }

.pt40 {
  margin-top: 40px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px; }

.pt50 {
  margin-top: 50px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px; }

.pt60 {
  margin-top: 60px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px; }

.pt70 {
  margin-top: 70px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px; }

.pt80 {
  margin-top: 80px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px; }

.pt90 {
  margin-top: 90px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px; }

.pt100 {
  margin-top: 100px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px; }

.line-height-10 {
  line-height: 10px; }

.line-height-20 {
  line-height: 20px; }

.line-height-30 {
  line-height: 30px; }

.line-height-40 {
  line-height: 40px; }

.image-link a:link, .image-link a:visited {
  border-bottom: 0px; }

.image-link a:hover {
  border-bottom: 0px; }

.hr-light-grey {
  color: #fff;
  background-color: #fff;
  border: 1px dashed #CCC;
  border-style: none none dashed; }

.hr-solid-white {
  color: #fff;
  border: 1px solid #fff;
  border-style: none none solid; }

.light-blue {
  color: #66CCFF; }

.light-blue-text {
  color: #A0C1E2; }

.green {
  color: #690; }

.red {
  color: #F00; }

.red-bold {
  color: #F00;
  font-weight: bold; }

.bold {
  font-weight: 700; }

.light-grey {
  color: #CCC; }

.dark-blue {
  color: #003366; }

.indent-20 {
  text-indent: 20px; }

.hr {
  color: #fff;
  background-color: #fff;
  border: 1px dotted #CCC;
  border-style: none none dotted; }

.fs8 {
  font-size: 8px; }

.fs9 {
  font-size: 9px; }

.fs10 {
  font-size: 10px; }

.fs11 {
  font-size: 11px; }

.fs12 {
  font-size: 12px; }

.fs13 {
  font-size: 13px; }

.fs14 {
  font-size: 14px; }

.fs15 {
  font-size: 15px; }

.fs16 {
  font-size: 16px; }

.fs17 {
  font-size: 17px; }

.fs18 {
  font-size: 18px; }

.fs19 {
  font-size: 19px; }

.fs20 {
  font-size: 20px; }

.fs21 {
  font-size: 21px; }

.fs22 {
  font-size: 22px; }

.fs23 {
  font-size: 23px; }

.fs24 {
  font-size: 24px; }

.fs25 {
  font-size: 25px; }

.fs26 {
  font-size: 26px; }

.fs27 {
  font-size: 27px; }

.fs28 {
  font-size: 28px; }

.fs29 {
  font-size: 29px; }

.fs30 {
  font-size: 30px; }

.fs31 {
  font-size: 31px; }

.fs32 {
  font-size: 32px; }

.fs33 {
  font-size: 33px; }

.fs34 {
  font-size: 34px; }

.fs35 {
  font-size: 35px; }

.fs36 {
  font-size: 36px; }

.fs37 {
  font-size: 37px; }

.fs38 {
  font-size: 38px; }

.fs39 {
  font-size: 39px; }

.fs40 {
  font-size: 40px; }

.fs45 {
  font-size: 45px; }
  
.fs50 {
  font-size: 50px; }  

.fs60 {
  font-size: 60px; }  
  
.fs70 {
  font-size: 70px; }  
  
.fs80 {
  font-size: 80px; }  
  
.fs90 {
  font-size: 90px; }  
  
.fs100 {
  font-size: 100px; }  
  
          
.serif {
  font-family: "EB Garamond", Times New Roman, Times, serif; }

.sans {
  font-family: 'Open Sans', sans-serif;
  color: #999; }

.handwriting {
  font-family: "Bilbo Swash Caps", sans-serif; }

.grey-embossed-text {
  color: #565656;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); }

.text-shadow {
  text-shadow: 1px 1px 2px #4a4a4a;
  filter: dropshadow(color=#4a4a4a, offx=1, offy=1); }

.pictogram {
  font-family: 'Pictos Custom';
  -webkit-font-smoothing: antialiased; }

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

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

.lh14 {
  line-height: 14px; }

.lh15 {
  line-height: 15px; }

.lh16 {
  line-height: 16px; }

.lh17 {
  line-height: 17px; }

.lh18 {
  line-height: 18px; }

.lh19 {
  line-height: 19px; }

.lh20 {
  line-height: 20px; }

.lh21 {
  line-height: 21px; }

.lh22 {
  line-height: 22px; }

.lh23 {
  line-height: 23px; }

.lh24 {
  line-height: 24px; }

.lh25 {
  line-height: 25px; }
  
.lh26 {
  line-height: 26px; }
  
.lh27 {
  line-height: 27px; }
  
.lh28 {
  line-height: 28px; }
  
.lh29 {
  line-height: 29px; }
  
.lh30 {
  line-height: 30px; }
  
.lh31 {
  line-height: 31px; }
  
.lh32 {
  line-height: 32px; }

.lh33 {
  line-height: 33px; }

.lh34 {
  line-height: 34px; }

.lh35 {
  line-height: 35px; }

.lh36 {
  line-height: 36px; }

.lh37 {
  line-height: 37px; }

.lh38 {
  line-height: 38px; }

.lh39 {
  line-height: 39px; }

.lh40 {
  line-height: 40px; }
.pad5 {
  padding: 5px; }
.pad10 {
  padding: 10px; }
.pad15 {
  padding: 15px; }
.pad20 {
  padding: 20px; }