/* light-blue: #03AAE1 */
/* dark-blue: #181E8C */

/* -- Hyperlinks -- */
a, a:visited {
    text-decoration: none;
    color: #585858;
}

/* -- Header -- */
header {
    width: 100%; 
    float: left; 
    margin-top: -5px;
} 

header nav {
    width: 100%; 
    float: left;
    margin: 0; 
    background: #fff;
    border-color: #fff; 
    position: relative; 
    z-index: 1;
}

/* custom primary button colour to match our style */
header nav .button-primary {
	background-color: #181E8C !important;
	border-color: #181E8C !important;
	line-height: 38px;
}

header nav .button-primary:hover {
	background-color: #03AAE1 !important;
	border-color: #03AAE1 !important;
}

header nav .facebook {
    height: 38px;
    float: right;
    cursor: pointer;
    border-radius: 4px;
		padding-left: 5px;
}

/* -- render phone numbers with a different font to the default due to numerals hanging below the baseline -- */
.phoneNumber {
	font-family: "Lato", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* -- Company Logo -- */
.logo a {
    color: #444;
    text-decoration: none;
    line-height: 20px;
    text-transform: uppercase;
}
.logo a:hover {
    color: #FF6A00;
}

.callBtn {
	text-align: right;
}

.button img.value-svg, button img.value-svg  {
	position: relative;
	top: 5px;
	left: -15px;
}

/* -- General formatting for lists -- */
ul {
    font-size: 14px;
    text-transform: uppercase;
    margin: 7px 0;
    padding-left: 10px;
}
ul li {
    margin-bottom: 5px;
}

ul.mainNavMenu .currentPage {
	font-weight: bold;
	color: #03AAE1;
	font-size: 14px;
}

/* -- Top level navigation menu -- */
ul.mainNavMenu {
    margin: 0;
    padding: 0;
    float: right;
}
ul.mainNavMenu li {
    display: inline; 
    float: left;
    margin: 2px 10px;
}
ul.mainNavMenu li a {
    font-size: 13px; 
    color: #444; 
    text-decoration: none;
}
ul.mainNavMenu li a:hover {
    color: #FF6A00;
	-webkit-transition: color .12s ease-in-out;
    -moz-transition: color .12s ease-in-out;
    -ms-transition: color .12s ease-in-out;
    -o-transition: color .12s ease-in-out;
    transition: color .12s ease-in-out;
}

/* -- Top section with blue background and summary info -- */
.section1 {
	margin-top: 25px;
	color: white;
    background: #181E8C;
}

/* -- main image (of ute) -- */
.mainImageContainer {
}
.mainImage {
	vertical-align: middle;
	width: 100%;
	height: 100%;
}

@media (max-width: 678px) {
	.callBtn {
		text-align: center;
	}
}
/* Smaller than phablet (before also point when grid becomes active) */
@media (max-width: 549px) {
	.logo {
		text-align: center;
	}

	.mainImage {
		width: 100%;
		height: 66.67%;
	}
	.mainImageContainer {
		display: block;
		width: 100%;
		height: auto;
		position: relative;
		overflow: hidden;
		padding: 96.67% 0 0px 0;
		margin-bottom: -28% ;
	}
	.mainImageContainer img {
		display: block;
		max-width: 100%;
		max-height: 100%;
		position: absolute;
		top: 20px;
		bottom: 0px;
		left: 0;
		right: 0;
	}

	/* -- Sub heading list items with waterdrop marker -- */
	ul.subHeading {
		margin: 0;
		padding: 0;
		float: left;
	}
	ul.subHeading li {
		display: inline;
		float: left;
		margin: 2px 0px;
		padding-right: 20px;
	}
	ul.subHeading li:before {
		content: "";
		background: url('../res/tinydrop.png') no-repeat left center;
		padding-left: 20px;
	}
}

/* Larger than phablet but smaller than full screen on a laptop (after the point when grid becomes active) */
@media (min-width: 550px) and (max-width: 1165px) {
	.mainImage {
		width: 100%;
		height: 66.67%;
	}
	.mainImageContainer {
		display: block;
		width: 100%;
		height: auto;
		position: relative;
		overflow: hidden;
		padding: 96.67% 0 0 0;
		margin-bottom: -28% ;
	}
	.mainImageContainer img {
		display: block;
		max-width: 100%;
		max-height: 100%;
		position: absolute;
		top: 20px;
		bottom: 0;
		left: 0;
		right: 0;
	}

	/* -- Sub heading list items with waterdrop marker -- */
	ul.subHeading li {
		list-style-image: url("../res/tinydrop.png");
		list-style-position: outside;
		margin-left: 1em;
	}
}

/* Full screen on a laptop */
@media (min-width: 800px) {
	/* -- Sub heading list items with waterdrop marker -- */
	ul.subHeading {
		margin: 0;
		padding: 0;
		float: left;
	}
	ul.subHeading li {
		display: inline;
		float: left;
		margin: 2px 0px;
		padding-right: 20px;
	}
	ul.subHeading li:before {
		content: "";
		background: url('../res/tinydrop.png') no-repeat left center;
		padding-left: 20px;
	}
}

.container .clear, body .clear {
    width: 100%; 
    float: left; 
    clear: both; 
    margin: 20px 0;
}

/* -- Section containing descriptions of tasks that can be performed. -- */
body .section2 h2 {
    text-transform: uppercase;
    font-weight: bold;
	margin-top: 30px;
	color: #03AAE1;
}

body .section2 .subSectionHeader {
	text-align: center;
}

body .section2 .subSectionHeader img {
	width: 25%;
}

/* -- Detailed list of services which can be performed -- */
ul.detailLists li {
	list-style-image: url("../res/tinydrop.png");
	list-style-position: outside;
	text-transform: none;
	margin-left: 1em;
}

.humour .humourlink {
	font-weight: bold;
	color: #03AAE1;
}

.contactus form {
	margin-top: 20px;
}

.contactus textarea {
	width: 100%;
}

/* when a field is considered invalid by the browser */
.contactusform input:focus:invalid, .contactusform textarea:focus:invalid {
    background: #fff;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}
/* when a field is considered valid by the browser */
.contactusform input:required:valid, .contactusform textarea:required:valid { 
    background: #fff;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

.sending {
  padding: 0.5em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: darkgray;
  background-color: transparent;
  border: 1px solid #d6e9c6;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.success {
  padding: 0.5em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

.error {
  padding: 0.5em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #b94a48;
  background-color: #f2dede;
  border: 1px solid rgba(185, 74, 72, 0.3);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

body .partners {
	margin-top: -20px;
	margin-bottom: 30px;
}

body .partners h3 {
	margin-bottom: 0px;
	text-decoration: none;
	color: #000;
	font-weight: bold;
}

body .partnerLogo {
	width: 150px;
	min-width: 150px;
}

body .partnerLogo img {
	width: 150px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

body .humourContent img {
	margin-bottom: 1rem;
	overflow: hidden;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.pic {
	text-align: center;
	min-width: 250px;
}

.pic img {
/* 	margin-left: 20px;
	margin-right: 20px;
	vertical-align: top; */
	width: 250px;
/* 	min-width: 250px; */
}

.borderPost {
  padding: 1em;
  margin-bottom: 1rem;
  background-color: transparent;
  border: 1px solid #03AAE1;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}


footer {
	background: #181E8C;
	color: white;
	font-size: 1.5rem;
	line-height: 1.6;
	letter-spacing: 0;
	text-align: center;
}

footer a, footer a:visited {
	text-decoration: underline;
	color: white;	
}

footer .facebook {
	height: 20px;
	float: right;
	margin-top: 10px;
	margin-bottom: 5px;
	margin-right: 50px;
	background-color: white;
	cursor: pointer;
	padding: 5px 10px 5px 10px;
	border-radius: 4px;
}

@media (max-width:750px) {
	footer .facebook {
		float: none;
		margin-right: 0px;
	}
}