@charset "utf-8";
/* CSS created by A Light in the Rain ltd. www.alightintherain.com */

/* ----- The following affects all pages ----- */
html {
	height:100%; /* Needed for Sticky Footer */
}

body {
	background-color: #fff;
	background-image: url(../images/bg4.png);
	background-repeat: repeat;
	color: #000;
	text-align: center; /* Used to align page in centre along with margin:0 auto; in the id or class */
	margin: 0;
	padding: 0;
	height: 100%;
}

a:active  {outline: none; /* Removes border when you are clicking an img link */}
a:focus {outline: none; /* Removes img border when you return to a page with a clicked img link */}
img {border: 0; /* Removes img border for links in IE */}
button {border: 0; /* Removes border from buttons in IE */}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
}

.floatclear { /* used to clear floats and move to a new line */
	clear: both;
	line-height: 0px;
}

#holder {
	min-height: 100%;
	height: auto !important; /* needed for ie */
	height: 100%; /* needed for ie */
	margin: 0 auto -85px; /* match this to footer height and .footeroffset height */
}

@media all and (max-width: 740px) {
	#holder {min-height:calc(100% - 63px)} /* this takes the height of the mobile nav header and main margin-top into account */
}
/* ----- The above affects all pages ----- */

/* ----- The following loads fonts ----- */
@font-face {
  font-family: 'socialmedia';
  src: url('../fonts/socialmedia.eot');
  src: url('../fonts/socialmedia.eot') format('embedded-opentype'),
       url('../fonts/socialmedia.woff2') format('woff2'),
       url('../fonts/socialmedia.woff') format('woff'),
       url('../fonts/socialmedia.ttf') format('truetype'),
       url('../fonts/socialmedia.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* ----- The above loads fonts ----- */

/* ----- The following affects the header ----- */
#mainheader {
	width: 100%;
	height: 50px;
	background-color: #556a7d;
}

.headerholder{
	margin: 0 auto;
	max-width: 1000px;
	height: 50px;
	line-height: 50px;
	padding-left: 30px;
	padding-right: 30px;
}

.logolink {
	font-family: 'Quicksand', sans-serif;
	font-size: 18px;
	text-decoration: none;
	color: #fff;
	letter-spacing: 3px;
	float: left;
    -webkit-transition: all .75s ease;
       -moz-transition: all .75s ease;
        -ms-transition: all .75s ease;
         -o-transition: all .75s ease;
            transition: all .75s ease;
}

a.logolink:hover {
	text-shadow: 0 0 0.8em #fff, 0 0 0.8em #81e2f8;
}

.socialmediaholder {
	width: 150px;
	height: 50px;
	float: right;
	text-align: right;
}

.socialmediatext {
	font-family: 'socialmedia';
	padding-bottom:10px;
	font-size: 20px;
	color: #fff;
	text-decoration: none;
	margin-left: 20px;
    -webkit-transition: all .75s ease;
       -moz-transition: all .75s ease;
        -ms-transition: all .75s ease;
         -o-transition: all .75s ease;
            transition: all .75s ease;
}

a.fb:hover{
	color: #3b5998;
	text-shadow: 0 0 0.3em #fff, 0 0 0.4em #fff, 0 0 0.5em #fff, 0 0 0.8em #fff, 0 0 0.8em #fff, 0 0 0.8em #fff, 0 0 0.8em #fff, 0 0 0.8em #fff, 0 0 1em #fff !important; /* !important required for use in mobile menu */
	z-index: 1;
}

a.twt:hover {
	color: #1da1f2;
	text-shadow: 0 0 0.3em #fff, 0 0 0.4em #fff, 0 0 0.5em #fff, 0 0 0.8em #fff, 0 0 0.8em #fff, 0 0 0.8em #fff, 0 0 0.8em #fff, 0 0 0.8em #fff, 0 0 1em #fff !important; /* !important required for use in mobile menu */
	z-index: 1;
}

a.gp:hover { /* -- for google plus, no longer relevent --*/
	color: #db4437;
	text-shadow: 0 0 0.3em #fff, 0 0 0.4em #fff, 0 0 0.5em #fff, 0 0 0.8em #fff, 0 0 0.8em #fff, 0 0 0.8em #fff, 0 0 0.8em #fff, 0 0 0.8em #fff, 0 0 1em #fff !important; /* !important required for use in mobile menu */
	z-index: 1;
}

a.lin:hover {
	color: #2767c5;
	text-shadow: 0 0 0.3em #fff, 0 0 0.4em #fff, 0 0 0.5em #fff, 0 0 0.8em #fff, 0 0 0.8em #fff, 0 0 0.8em #fff, 0 0 0.8em #fff, 0 0 0.8em #fff, 0 0 1em #fff !important; /* !important required for use in mobile menu */
	z-index: 1;
}
/* ----- The above affects the header ----- */

/* ----- The following affects the navigation ----- */
#mainnav {
	height: 50px;
	width: 100%;
	background-color: #fff;
	box-shadow: 0px 5px 5px grey; /* for shadow effect */
	position:absolute;
	z-index:1; /* for shadow effect */
}

.navholder {
	margin: 0 auto;
	height: 50px;
	max-width: 1000px;
	padding-left: 30px;
	padding-right: 30px;
}

.navlinks {
	float: left;
	max-width: 900px;
	text-align: left;
	margin-top: 11px;
	line-height: 30px;
	text-decoration: none;
}

nav ul {
	position: relative;
	list-style: none; 
	margin: 0px;
	padding: 0px;
}

nav ul li {
	float:left;
}

nav ul li a {
	position: relative;
	font-size: 16px;
    text-decoration: none;
	font-family: 'Inconsolata', monospace;
    color: #556a7d;
	margin-right: 20px;
	margin-left: 20px;
	letter-spacing: 2px;
}

nav ul li a:hover {
	color: #556a7d;
}

.firstlink {
	margin-left: 0px;
}

.dropeffect a::before,
.dropeffect a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.5s, opacity 0.2s;
	-moz-transition: -moz-transform 0.5s, opacity 0.2s;
	transition: transform 0.5s, opacity 0.2s;
}

.dropeffect a::after {
	margin-left: 10px;
	font-family: 'socialmedia';
	content: '\e800'; /* get codes from demo.html font file. copy-paste icon if code fails */
	-webkit-transform: translateY(-20px);
	-moz-transform: translateY(-20px);
	transform: translateY(-20px);
}

.dropeffect a:hover::before,
.dropeffect a:hover::after,
.dropeffect a:focus::before,
.dropeffect a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}

.slicknav_menu {
	display: none;
}

.mlogoholder {
	float:left;
	line-height: 50px;
	margin-left:30px;
}

.mlogolink {
	font-family: 'Quicksand', sans-serif;
	font-size: 18px;
	text-decoration: none;
	color: #fff;
	letter-spacing: 3px;
    -webkit-transition: all .75s ease;
       -moz-transition: all .75s ease;
        -ms-transition: all .75s ease;
         -o-transition: all .75s ease;
            transition: all .75s ease;
}

a.mlogolink:hover {
	text-shadow: 0 0 0.8em #fff, 0 0 0.8em #81e2f8;
}

.msocialmediaholder {
	display: none;
}

@media all and (max-width: 950px) {
	nav ul li a {
		margin-right: 10px;
		margin-left: 10px;
	}
}

@media all and (max-width: 850px) {
	#mainnav {
		display: none;
	}
	
	.slicknav_menu {
		display: block;
	}
	
	#mainheader {
		display: none;
	}
	
	.msocialmediaholder {
		display: inline-block;
		width: 150px;
		height: 50px;
		text-align: left;
	}
	
	.msocialmediafloat {
		float: left;
	}
}

@media all and (max-width: 390px) {
	.mlogolink {
		font-size: 15px;
	}
}

@media all and (max-width: 340px) {
	.mlogolink {
		font-size: 12px;
	}
}

/* ----- The above affects the navigation ----- */

/* ----- The below affects all main sections ----- */
#mainholder {
	margin: 0 auto;
	max-width: 1000px;
	padding-left: 30px;
	padding-right: 30px;
	margin-top: 10px;
	text-align: center;
}

.contentheader {
	text-align: left;
}

.genh1 {
	margin:0px;
	padding-top:13px;
	font-family: 'Quicksand', sans-serif;
	font-size: 22px;
	text-decoration: none;
	letter-spacing: 1px;
	color: #556a7d;
}

.genh2 {
	margin:0px;
	padding-top:13px;
	padding-bottom:5px;
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	text-decoration: none;
	letter-spacing: 1px;
	color: #556a7d;
}

.maincontent {
	font-family: 'Nunito', sans-serif;
	font-size: 15px;
	color: #000;
	text-align: left;
}

.mainlink {
	font-size: 14px;
	text-decoration: underline;
	color: #000;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;
}

a.mainlink:hover {
	color: #556a7d;
	text-shadow: 0 0 0.8em #fff;
}

/* ----- The above affects all main sections ----- */

/* ----- The following affects the home page ----- */
.marginmakeup { /* allows shadow ontop of image for nav bar */
	margin-top:50px; /* match to the height of absolutely positioned nav bar */ 
}

#hpbanner {
	margin:0 auto;
	background-image: url(../images/banner.jpg);
	background-repeat: no-repeat;
	background-size:cover;
	background-position: left;
	max-width: 100%;
	height: 250px;
}

.hpbannertext {
	float: right;
	margin-top:205px;
	margin-right: 20px;
	font-family: 'Quicksand', sans-serif;
	letter-spacing: 3px;
	font-size: 23px;
	padding: 3px 10px 5px 10px; /* needed incase ever add a bg colour */
	text-decoration: none;
	color: #000;
	text-align: right;
}

/* this was used when there were less nav links to make banner smaller before mobile */
/* @media all and (max-width: 850px) {
	#hpbanner {height: 230px;}
	.hpbannertext {margin-top:190px; font-size:20px; padding: 0px;}
} */

#hpbannerend {
	width: 100%;
	height: 1px;
	background-color: #989898;
	box-shadow: 0px -2px 2px grey; /* for shadow effect */
	position: absolute; /* for shadow effect */
	z-index: 1; /* for shadow effect */
}

.mobilebanner {
	width: 100%;
	height: 150px;
	background-image: url(../images/banner.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	display: none;
	position: absolute;
	margin-top:-7px;
	z-index:-1;
}

.mobilemarginmakeup {
	height: 150px;
	margin-top: 10px; /* needed to keep sticky footer working on mobile */
	display: none;
}

.mobilebannerend {
	display: none;
	width: 100%;
	height: 1px;
	background-color: #989898;
	box-shadow: 0px -2px 2px grey; /* for shadow effect */
	position: absolute; /* for shadow effect */
	z-index: 1; /* for shadow effect */
	margin-top:-7px;
}

.mobilebannertext {
	float: right;
	margin-top:110px;
	margin-right: 20px;
	font-family: 'Quicksand', sans-serif;
	letter-spacing: 3px;
	font-size: 23px;
	padding: 3px 10px 5px 10px; /* needed incase ever add a bg colour */
	text-decoration: none;
	color: #000;
	text-align: right;
}

@media all and (max-width: 850px) { /* match this to width where nav switches to mobile */
	.marginmakeup {display: none;}
	#hpbanner {display: none;}
	#hpbannerend {display: none;}
	.mobilebanner {display: block;}
	.mobilemarginmakeup {display: block;}
	.mobilebannerend {display: block;}
}

.hpintropic {
	width: 180px;
	height: 246px;
	float: right;
	padding-top: 0px;
	margin-left: 10px;
}

.homeh1 {
	padding-top: 0px;
}

.hpmaintext {
    font-size: 15px !important;
    margin-left: 3px;
}

.hpanimtext {
    margin: auto;
    display: inline-block;
    color: #556a7d;
    font-family: 'Quicksand', sans-serif;
    font-size: 22px;
}

@media all and (max-width: 850px) {
    .hpanimtext {display: block; height: 20px}
}

@media all and (max-width: 630px) {
    .mobilebannertext {font-size: 16px}
}

@media all and (max-width: 580px) {
	.hpintropic {margin: 0 auto; float: none; display: none;}
    .mobilebannertext {margin-top: 60px;}
}

@media all and (max-width: 430px) {
    .mobilebannertext {margin-top: 20px; text-shadow: 0px 0px 8px #fff; font-weight: bold;}
}

.homeh2 {
	text-align: left;
	padding-top: 0px;
}

.homeh3 {
	text-align: center;
	padding-top: 0px;
}

.hservicesboxholder {
	margin: 0 auto;
	text-align: justify;
	width:100%;
	margin-top:5px;
}

.hservicesbox {
	width: 252px;
	height: 147px;
	vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
	text-align: center;
	margin-bottom: 30px;
}

.hservicesboximg {
	width: 250px;
	height: 100px;
	border: 1px solid #556a7d;
	display: block;
	opacity: 0.7;
    -webkit-transition: all .75s ease;
       -moz-transition: all .75s ease;
        -ms-transition: all .75s ease;
         -o-transition: all .75s ease;
            transition: all .75s ease;
}

a.hservicesboximg:hover {
	opacity: 1;
}

.servicesimg {
	width: 250px;
	height: 100px;
}

.hservicesboxtext {
	width:250px;
	height: 35px;
	display: block;
	line-height: 35px;
	margin-top:8px;
	border: 1px solid #556a7d;
	color: #556a7d;
	background-color: #fff;
	font-family: 'Quicksand', sans-serif;
	text-decoration: none;
	letter-spacing: 3px;
	font-size: 16px;
	background-image:url(../images/button.png);
	
    /*Sets the background image to be 'below' the button*/
    /*Background images are set using the classes below*/
    background-position: 0 24%;
    background-repeat: repeat-x;
	transition: background-position 2.5s ease;
}

.hservicesboxtext:hover {
 	background-position: 160% 60%;
}

.hservicesstretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

@media all and (max-width: 880px) {
	.hservicesbox {width: 212px; height: 123px;}
	.hservicesboximg {width: 210px; height: 84px;}
	.servicesimg {width: 210px; height: 84px;}
	.hservicesboxtext {width: 210px; height: 29px; line-height: 28px; font-size: 14px;}	
}

@media all and (max-width: 750px) {
	.hservicesbox {width: 251px; height: 147px;}
	.hservicesboximg {width: 250px; height: 100px;}
	.servicesimg {width: 250px; height: 100px;}
	.hservicesboxtext {width: 250px; height: 35px; line-height: 35px; font-size: 16px;}	
}

@media all and (max-width: 585px) {
	.hservicesbox {width: 212px; height: 123px;}
	.hservicesboximg {width: 210px; height: 84px;}
	.servicesimg {width: 210px; height: 84px;}
	.hservicesboxtext {width: 210px; height: 29px; line-height: 28px; font-size: 14px;}	
}


@media all and (max-width: 520px) {
	.hservicesbox {width: 100%; height: auto; margin-bottom:5px;}
	.hservicesboximg {display: none;}
	.servicesimg {display: none;}
	.hservicesboxtext {width: 100%; height: 35px; line-height: 35px; font-size: 16px;}	
}

.hcontactbtn {
	display: block;
	margin: 0 auto;
	margin-top: -5px;
	height: 50px;
	line-height: 50px;
	width: 350px;
	border: 1px #000 solid;
	background-color: #FFF;
	color: #556a7d;
	font-family: 'Quicksand', sans-serif;
	text-decoration: none;
	letter-spacing: 3px;
	font-size: 18px;
    -webkit-transition: all 1.95s ease;
       -moz-transition: all 1.95s ease;
        -ms-transition: all 1.95s ease;
         -o-transition: all 1.95s ease;
            transition: all 1.95s ease;
}

a.hcontactbtn:hover {
	background-color: #556a7d;
	color: #fff;
	text-shadow: 0 0 0.8em #fff, 0 0 0.8em #81e2f8;
}

@media all and (max-width: 520px) {
    .homeh3 {font-size: 18px;}
	.hcontactbtn {width: 80%;}
}


/* ----- The above affects the home page ----- */

/* ----- The following affects the about page ----- */

.apintropic {
	width: 300px;
	height: 300px;
	float: right;
	padding-top: 20px;
	margin-left: 20px;
}

@media all and (max-width: 580px) {
	.apintropic {margin: 0 auto; float: none; display: none;}
}


/* ----- The above affects the about page ----- */

/* ----- The following affects the nonprofit page ----- */

.nppintropic {
	width: 250px;
	height: 250px;
	float: right;
	padding-top: 20px;
	margin-left: 20px;
	margin-right:5px;
}

@media all and (max-width: 580px) {
	.nppintropic {margin: 0 auto; float: none; display: none;}
}


/* ----- The above affects the nonprofit page ----- */

/* ----- The following affects the marketing and web pages ----- */

.aservicesboxholder { /* aservices are for advantages and knowledge sections */
	margin: 0 auto;
	text-align: justify;
	width:100%;
	margin-top:5px;
}

.aservicesbox {
	width: 252px;
	height: 147px;
	vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
	text-align: center;
	margin-bottom: 0px;
}

.aservicesboximg {
	width: 250px;
	height: 100px;
	border: 1px solid #556a7d;
	display: block;
	opacity: 0.7;
    -webkit-transition: all .75s ease;
       -moz-transition: all .75s ease;
        -ms-transition: all .75s ease;
         -o-transition: all .75s ease;
            transition: all .75s ease;
}

a.aservicesboximg:hover {
	opacity: 1;
}

.aservicesimg {
	width: 250px;
	height: 100px;
}

.aservicesboxtext {
	width:250px;
	height: 35px;
	display: block;
	line-height: 35px;
	margin-top:8px;
	border: 1px solid #556a7d;
	color: #556a7d;
	background-color: #fff;
	font-family: 'Quicksand', sans-serif;
	text-decoration: none;
	letter-spacing: 1px;
	font-size: 14px;
	background-image:url(../images/button.png);
	
    /*Sets the background image to be 'below' the button*/
    /*Background images are set using the classes below*/
    background-position: 0 24%;
    background-repeat: repeat-x;
	transition: background-position 2.5s ease;
}

.aservicesboxtext:hover {
 	background-position: 160% 60%;
}

.aservicesstretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

@media all and (max-width: 880px) {
	.aservicesbox {width: 212px; height: 123px;}
	.aservicesboximg {width: 210px; height: 84px;}
	.aservicesimg {width: 210px; height: 84px;}
	.aservicesboxtext {width: 210px; height: 29px; line-height: 28px; font-size: 14px;}	
}

@media all and (max-width: 750px) {
	.aservicesboxholder {margin-top: 0px; width:310px; margin-left:0px;}
	.aservicesbox {width: 300px; height: 29px; margin-bottom:10px;}
	.aservicesboximg {display:none;}
	.aservicesimg {display:none;}
	.aservicesboxtext {width: 300px; height: 29px; line-height: 28px; font-size: 14px;}
	.aservicesstretch {display: none;}
	.amargintop {margin-top:15px;} /* adds space above mid h2 subtitle */
}

@media all and (max-width: 520px) {
	.aservicesboxholder {width:100%;}
	.aservicesbox {width: 100%;}
	.aservicesboxtext {width: 100%; height: 29px; line-height: 28px; font-size: 14px;}
}

.xservicesboxholder {
	margin: 0 auto;
	text-align: justify;
	width:100%;
	margin-top:5px;
}

.xservicesbox {
	width: 252px;
	height: 35px;
	vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
	text-align: center;
	margin-bottom: 15px;
}

.xservicesboximg {
	width: 250px;
	height: 100px;
	border: 1px solid #556a7d;
	display: block;
	display: none;
	opacity: 0.7;
    -webkit-transition: all .75s ease;
       -moz-transition: all .75s ease;
        -ms-transition: all .75s ease;
         -o-transition: all .75s ease;
            transition: all .75s ease;
}

a.xservicesboximg:hover {
	opacity: 1;
}

.xservicesimg {
	width: 250px;
	height: 100px;
}

.xservicesboxtext {
	width:250px;
	height: 35px;
	display: block;
	line-height: 35px;
	margin-top:8px;
	border: 1px solid #556a7d;
	color: #556a7d;
	background-color: #fff;
	font-family: 'Quicksand', sans-serif;
	text-decoration: none;
	letter-spacing: 3px;
	font-size: 12px;
	background-image:url(../images/button.png);
	
    /*Sets the background image to be 'below' the button*/
    /*Background images are set using the classes below*/
    background-position: 0 24%;
    background-repeat: repeat-x;
	transition: background-position 2.5s ease;
}

.xservicesboxtext:hover {
 	background-position: 160% 60%;
}

.xservicesstretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

@media all and (max-width: 880px) {
	.xservicesbox {width: 212px; height: 29px;}
	.xservicesboxtext {width: 210px; height: 29px; line-height: 28px; letter-spacing: 1px;}	
}

@media all and (max-width: 750px) {
	.xservicesbox {width: 251px; height: 35px; float: left; margin-right:30px;}
	.xservicesboxtext {width: 250px; height: 35px; line-height: 35px; letter-spacing: 1px;}	
}

@media all and (max-width: 650px) {
	.xservicesbox {width: 212px; height: 29px; margin-right:10px;}
	.xservicesboxtext {width: 210px; height: 29px; line-height: 28px;}	
}


@media all and (max-width: 520px) {
	.xservicesbox {width: 100%; height: auto; margin-bottom:5px;}
	.xservicesboxtext {width: 100%; height: 35px; line-height: 35px;}	
}

/* ----- The above affects the marketing and web pages --> ----- */

/* ----- The following affects the services content pages ----- */
.spholder {
	max-width:100%;
	height: auto;
}


.spcontentbox {
	float: left;
	margin-left:200px;
	padding-left:20px;
}

.splinkbox {
	width: 200px;
	height: auto;
	float: left;
	margin-left:-100%;
	border-right:1px solid #556a7d;
}

.spheader1 {
	margin: 0;
	padding-top: 0px;
	font-family: 'Quicksand', sans-serif;
	font-size: 18px;
	text-decoration: none;
	letter-spacing: 1px;
	color: #556a7d;
}

.spheader2 {
	margin: 0;
	padding-top: 0px;
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	text-decoration: none;
	letter-spacing: 1px;
	color: #556a7d;
}

.spheader3 {
	margin: 0;
	padding-top: 0px;
	font-size: 18px;
    text-decoration: none;
	font-family: 'Inconsolata', monospace;
    color: #556a7d;
	margin-top:5px;
	margin-left:1px;
    -webkit-transition: all .75s ease;
       -moz-transition: all .75s ease;
        -ms-transition: all .75s ease;
         -o-transition: all .75s ease;
            transition: all .75s ease;
}

a.spheader3:hover {}

.spfirstsublink {
	margin-top: -10px;
}

.splink {
	margin: 0;
	padding-top: 0px;
	font-size: 14px;
    text-decoration: none;
	font-family: 'Inconsolata', monospace;
    color: #556a7d;
	margin-top:5px;
	margin-left:1px;
    -webkit-transition: all .75s ease;
       -moz-transition: all .75s ease;
        -ms-transition: all .75s ease;
         -o-transition: all .75s ease;
            transition: all .75s ease;
}

a.splink:hover {margin-left:10px;}

@media all and (max-width: 750px) {
	.splinkbox {display: none;}
	.spcontentbox {margin-left: 0px; padding-left: 0px; margin-top:-15px;}
}

.spblogboxholder { 
	margin: 0 auto;
	text-align: justify;
	width:100%;
	margin-top:5px;
}

.spblogbox {
	width: 212px;
	height: 123px;
	vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
	text-align: center;
	margin-bottom: 0px;
}

.spblogboximg {
	width: 210px;
	height: 84px;
	border: 1px solid #556a7d;
	display: block;
	opacity: 0.7;
    -webkit-transition: all .75s ease;
       -moz-transition: all .75s ease;
        -ms-transition: all .75s ease;
         -o-transition: all .75s ease;
            transition: all .75s ease;
}

a.spblogboximg:hover {
	opacity: 1;
}

.spblogimg {
	width: 210px;
	height: 84px;
}

.spblogboxtext {
	width:210px;
	height: 29px;
	display: block;
	line-height: 28px;
	margin-top:8px;
	border: 1px solid #556a7d;
	color: #556a7d;
	background-color: #fff;
	font-family: 'Quicksand', sans-serif;
	text-decoration: none;
	letter-spacing: 1px;
	font-size: 12px;
	background-image:url(../images/button.png);
	
    /*Sets the background image to be 'below' the button*/
    /*Background images are set using the classes below*/
    background-position: 0 24%;
    background-repeat: repeat-x;
	transition: background-position 2.5s ease;
}

.spblogboxtext:hover {
 	background-position: 160% 60%;
}

.spblogstretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}


@media all and (max-width: 930px) {
	.spblogboxholder {margin-top: 0px; width:310px; margin-left:0px;}
	.spblogbox {width: 300px; height: 29px; margin-bottom:10px;}
	.spblogboximg {display:none;}
	.spblogimg {display:none;}
	.spblogboxtext {width: 300px; height: 29px; line-height: 28px; font-size: 12px; text-align:left; padding-left:10px;}
	.spblogstretch {display: none;}
}

@media all and (max-width: 510px) {
	.spblogboxholder {width: 100%;}
	.spblogbox {width: 100%; height: auto; margin-bottom:5px;}
	.spblogboxtext {width: 100%; height: 35px; line-height: 35px; font-size: 12px;}	
}

.spbacklink {
	width:200px; /* combine with padding to match spblogboxtext */
	height: 29px;
	display: block;
	line-height: 28px;
	margin-top:8px;
	border: 1px solid #556a7d;
	color: #556a7d;
	background-color: #fff;
	font-family: 'Quicksand', sans-serif;
	text-decoration: none;
	letter-spacing: 1px;
	font-size: 12px;
	text-align: left;
	padding-left: 10px;
    -webkit-transition: all .95s ease;
       -moz-transition: all .95s ease;
        -ms-transition: all .95s ease;
         -o-transition: all .95s ease;
            transition: all .95s ease;
	
}

a.spbacklink:hover {
	background-color: #556a7d;
	color: #fff;
}

@media all and (max-width: 930px) {
	.spbacklink {width: 300px;}
}

@media all and (max-width: 510px) {
	.spbacklink {width: 100%;}
}

/* ----- The above affects the services content pages ----- */

/* ----- The following affects the knowledge pages ----- */
.knowledgemainheader { 
	margin: 0;
	padding-top: 0px;
	font-family: 'Quicksand', sans-serif;
	font-size: 18px;
	text-decoration: none;
	letter-spacing: 1px;
	color: #556a7d;
    font-weight: bold;
}

.knowledgeupdated {
    font-size: 10px;
    color: #556a7d;
}

.knowledgeheader {
	margin: 0;
	padding-top: 0px;
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	text-decoration: none;
	letter-spacing: 1px;
	color: #556a7d;
    font-weight: bold;
}

.knowledgesubheader {
	margin: 0;
	padding-top: 0px;
	font-family: 'Quicksand', sans-serif;
	font-size: 16px;
	text-decoration: none;
	letter-spacing: 1px;
	color: #556a7d;
}

.knowledgeilink {
    color: #556a7d;
    font-weight: bold;
    text-decoration: none;
    -webkit-transition: all .75s ease;
       -moz-transition: all .75s ease;
        -ms-transition: all .75s ease;
         -o-transition: all .75s ease;
            transition: all .75s ease;
}

a.knowledgeilink:hover {
    color: blue;
}

.knowledgecitedlink {
    color: blue;
    text-decoration: none;
    -webkit-transition: all .75s ease;
       -moz-transition: all .75s ease;
        -ms-transition: all .75s ease;
         -o-transition: all .75s ease;
            transition: all .75s ease;
}
a.knowledgecitedlink:hover {
    text-decoration: underline;
}
/* ----- The below affects the knowledge pages ----- */

/* ----- The below affects the contact page ----- */
.cpintropic {
	width: 450px;
	height: 300px;
	float: right;
	padding-top: 20px;
	margin-left: 20px;
}

@media all and (max-width: 920px) {
	.cpintropic {width: 300px; height: 200px;}
}

@media all and (max-width: 680px) {
	.cpintropic {margin: 0 auto; float: none; display: none;}
}

.frminputbox {
	width: 300px;
	height: 24px;
	padding-left: 10px;
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
}

.frmtextbox {
	width: 500px;
	padding-left: 10px;
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
}

.frmspacing {
	display: block;
	height: 6px;
}

.frmsubmit {
	width:80px; /* combine with padding to match spblogboxtext */
	height: 35px;
	display: block;
	line-height: 35px;
	border: 1px solid #556a7d;
	color: #556a7d;
	background-color: #fff;
	font-family: 'Quicksand', sans-serif;
	text-decoration: none;
	letter-spacing: 1px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
    -webkit-transition: all .95s ease;
       -moz-transition: all .95s ease;
        -ms-transition: all .95s ease;
         -o-transition: all .95s ease;
            transition: all .95s ease;
	
}

.frmsubmit:hover {
	background-color: #556a7d;
	color: #fff;
}

@media all and (max-width: 750px) {
	.frminputbox {width:96%;}
	.frmtextbox {width:96%;}
	.frmsubmit {width:100%;}
}
/* ----- The above affects the contact page ----- */

/* ----- The below affects the site map page ----- */
.smapholder {
	width:100%;
}

.smapcolumn {
	height: 100%;
	float: left;
	padding-right:20px;
}

@media all and (max-width: 750px) {
	.smapcolumn {float:none; margin-top:15px;}
}
/* ----- The above affects the site map page ----- */

/* ----- The following affects the footer ----- */
.footeroffset { /* place at very end of #holder */
	height: 85px; /* match to footer height and #holder margin */
}


footer {
	margin: 0 auto;
	height: 85px;
	width: 100%;
	font-size: 12px;
}

.wave {
	animation:  wave 10s cubic-bezier(0.85, 0.85, 0.85, 0.85) infinite; /* edit cubic-bezier to change speed at diff points */
  	-webkit-transform: translate3d(0, 0, 0);
  	transform: translate3d(0, 0, 0);
	background-image:url("../images/footer.png");
	image-rendering: pixelated; /* used to remove grey lines from android */
	background-repeat: repeat-x;
	/* position: absolute 812px; */  /* number should be double width of image */
	height: 50px;
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -406px; /* negative image width */
  }
}

@-webkit-keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -406px; /* negative image width */
  }
}

.water {
	height: 35px;
	width: 100%;
	background-color: #556a7d;
}

.footerboxholder {
	margin: 0 auto;
	text-align: justify;
	max-width: 1000px;
	padding-left: 30px;
	padding-right: 30px;
}

@media all and (max-width: 750px) {.footerboxholder {margin-top:-1px;}}
/* above used to get rid of grey line from android. 
   it creates 1px line at bottom of browser (both desktop and mobile)
   so it's limited it to mobile mode only */

.footerbox {
	width:150px;
	vertical-align:top;
    display: inline-block;
    *display: inline;
    zoom: 1;
	text-align: center;
	margin-top:5px; /* centers text vertically */
	margin-bottom:-5px; /* counters the margin top | required for sticky footer to work */
}

.footertext {
	position: relative;
	font-size: 14px;
    text-decoration: none;
	font-family: 'Inconsolata', monospace;
    color: #fff;
	letter-spacing: 2px;
    -webkit-transition: all .75s ease;
       -moz-transition: all .75s ease;
        -ms-transition: all .75s ease;
         -o-transition: all .75s ease;
            transition: all .75s ease;
}

a.footertext:hover {
	text-shadow: 0 0 0.8em #fff, 0 0 0.8em #81e2f8;
}


.footerstretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

@media all and (max-width: 580px) {
	.footertext {
		font-size: 12px;
	}
	
	.footerbox {
		width: 120px;
	}
	
	.footersitemap {
		display:none;
	}
}

@media all and (max-width: 320px) {
	.footertext {
		font-size: 10px;
	}
}

/* ----- The above affects the footer ----- */