@charset "UTF-8";
/* CSS Document */

body {padding: 0; margin: 0; font-size: 16px; font-family: 'Arial', sans-serif; line-height: 1;}
header {padding: 1em; display: inline-table; width:100%; box-sizing: border-box;}
#logo {position: relative; max-width: 70%; display: block; left: 1em;}

nav#desktop  {margin: 0 auto; display: none; float: right; position: relative; top: 1px;}
nav#desktop ul li {list-style-type: none; float:left; margin: 0; padding: 0 0 0 1em; font-size: .9em; line-height: 1em;}

nav#mobile {background-color: #333333; width: 100%; max-width: 100%; text-align: center; color: #666666; display: none; padding: 0; margin: 0;}
nav#mobile ul {list-style-type: none; margin: 0; padding: 0;}
nav#mobile ul li {list-style-type: none; padding: 1em; border-bottom: 1px solid #444444; cursor: pointer;}
nav#mobile ul li:hover {background-color: #444444;}

#mobicon {position: absolute; top: 0; right: 0; background-color: #FF0; cursor: pointer; display: block;}

section {padding: 2em; display: inline-table; width: 100%; box-sizing: border-box;}
footer {padding: 2em; text-align: center; background-color: #333; font-size: .8em; color: #666;}

h1, h2, h3 {font-family: 'Arial Black', arial; margin: 0 0 .5em; padding: 0;}
h1 {font-size: 2.4em; color: #FFF; letter-spacing: -.08em; line-height: 1.4em;}
h2 {font-size: 2.4em; color: #AD005D; letter-spacing: -.05em; line-height: 1.4em;}
h3 {font-size: 2.4em; color: #FFF; letter-spacing: -.05em; line-height: 1.4em;}
h4 {font-size: 1em; color: #AD005D; letter-spacing: -.05em; line-height: 1em; margin: 0; padding: 0; font-weight: bold;}

p {padding: 0; line-height: 1.6;}
p.display {font-size: 1.4em; max-width: 20em;}
p.grey {color: #666; font-weight: bold; float: left; text-align:left; clear: both; width: 100%;}

table {line-height: 1.6em;}

a.nav:link {line-height: 1em; color: #ad005d; text-decoration: none; font-weight: bold; text-align: right; cursor: pointer;}
a.nav:visited {line-height: 1em; color: #ad005d; text-decoration: none; font-weight: bold; cursor: pointer;}
a.nav:hover {line-height: 1em; color: #ad005d; text-decoration: none; font-weight: bold; border-bottom: 2px solid #ad005d; cursor: pointer;}
a.nav:active {line-height: 1em; color: #ad005d; text-decoration: none; font-weight: bold; cursor: pointer;}

a:link {line-height: 1em; color: #666666; text-decoration: none; font-weight: bold;}
a:visited {line-height: 1em; color: #666666; text-decoration: none; font-weight: bold;}
a:hover {line-height: 1em; color: #666666; text-decoration: none; font-weight: bold;}
a:active {line-height: 1em; color: #666666; text-decoration: none; font-weight: bold;}

a.contact:link {line-height: 1em; color: #FFFFFF; text-decoration: none; font-weight: bold;}
a.contact:visited {line-height: 1em; color: #FFFFFF; text-decoration: none; font-weight: bold;}
a.contact:hover {line-height: 1em; color: #FFFFFF; text-decoration: none; font-weight: bold; border-bottom: 2px solid #FFFFFF;}
a.contact:active {line-height: 1em; color: #FFFFFF; text-decoration: none; font-weight: bold;}

#enquirenow ul.navigation {list-style-type: none; margin: 0; padding: 1em;}
#enquirenow {background-color: #bd337d; border: none !important; cursor: pointer; border-radius: 10px; font-size: 1.4em; color: #FFFFFF; border: none; font-weight: bold; text-align: center; max-width: 200px;}
#enquirenow:hover {color: #bd337d; background-color: #FFFFFF;}

.container {max-width: 60.000em; margin: 0 auto; position: relative;}
#half {width: 100%; margin: 1em 0;}

#mascot {position: absolute; bottom: -150px; right: -80px; display: none;}

#display {color: #FFFFFF; background-image:url(../images/services.jpg);}
#services {color: #FFFFFF; background-image:url(../images/services.jpg);}
#socials {background-color: #F1F1F1;}
#contact {background-color: #AD005D; color: #FFFFFF; overflow: hidden;}

#options {display: none;}
.option {float: left; width: 100%; position: relative; text-align: center; padding: 0 0 2em;}

/*SERVICES*/

#service {width: 100%; box-sizing: border-box; display: inline-block;}
#serviceheading {width: 100%; display: inline-block; padding: 1em; box-sizing: border-box;}
#servicetop {width: 100%; float: left; position: relative;}
#servicetopl {width: 100%; float: left; position: relative;}
#servicetopr {width: 100%; float: left; position: relative;}
#servicetitle {font-weight: bold; line-height: 1em; padding: .5em 0;}
#size {padding: .5em; float: left; text-align: center;}
#sizes {float: left; font-weight: bold;}
.sml {background-color: #FFF; color: #000000;}
.med {background-color: #f93333;}
.lrg {background-color: #59b2d1;}
.xlrg {background-color: #198d36;}
#details {padding: 1em; width: 100%; float: left; position: relative; display: inline-block; box-sizing: border-box; line-height: 1.8em;}

/*SOCIALS*/

#facebook {float: left; position: relative; clear:both;}
#twitter {max-height: 20em; position: relative; max-width: 21.250em;}
#twitter-widget-0 {margin-bottom: 2em; float: left; position: relative;}
#instagram {position: relative; float: left; clear: both; max-width:21.250em;}
.powered_by {display: none!important;}

/*FORM*/

#myForm {box-sizing: border-box; color: #FFFFFF; max-width: 25em; margin: 2em 0 0;}
label {float: left; font-weight: bold; color: #FFFFFF; font-size:1em;}
input[type=text] {padding: .5em; width: 100%; box-sizing: border-box; float: left; margin: 0; border: 1px solid #CCCCCC; margin: 1em 0; font-size: 1em;}
#servicesselect {float: left; padding: .5em; width: 100%; margin: 1em 0; font-size: 1em; box-sizing: border-box; -webkit-appearance: none; border: none; background-color: #BD337D; color: #FFFFFF; background-image: url(../images/select.jpg); background-position: right 15px center; background-repeat: no-repeat;}
option {padding: 1em; width: 100%; font-size: 1em; box-sizing: border-box; -webkit-appearance: none;}
input[type=text]:focus {border-color: #AD005D;}
textarea {border: 1px solid #CCCCCC; float: left; width: 100%; padding: 1em; box-sizing: border-box; margin: 1em 0; font-size: 1em; line-height: 1.4em;}
.section {float: left; margin: 2em 0; position: relative; width: 100%;}
input[type=radio] {margin: 0 1em;}
.g-recaptcha {margin: 0 auto; display: table; margin-top: 2em; margin-bottom: 1em;}
.rc-anchor-checkbox-label {color: #FF0;}
.rc-anchor-normal {width: 100%;}
input[type=submit] {padding: 1em; float: left; background: #BD337D; border: 0 none; cursor: pointer; -webkit-border-radius: 5px; border-radius: 5px; width: 100%; text-align: center; color: #FFFFFF; font-size: 1.4em; float: right; -webkit-appearance: none; font-weight: bold;}
input[type=submit]:hover {background-color:#BD337D;}

@media screen and (min-width: 480px) {
	header {padding: 3em;}
	#logo {max-width: 481px; left: 0;}
	nav#desktop {display: block;}
	nav#mobnav {display: none;}
	#mobicon {display: none;}
	h1, h2, h3 {font-family: 'Arial Black', arial; margin: 0 0 .5em; padding: 0;}
	h1 {font-size: 4.4em; color: #FFF; letter-spacing: -.08em; line-height: 1.2em;}
	h2 {font-size: 3.6em; color: #AD005D; letter-spacing: -.05em; line-height: 1.2em;}
	h3 {font-size: 2.6em; color: #FFF; letter-spacing: -.05em; line-height: 1.2em;}
	h4 {font-size: 1.4em; color: #AD005D; letter-spacing: -.05em; line-height: 1em; margin: 0; padding: 0; font-weight: bold;}
	section {padding: 6em 0;}
	h1, h2, h3 {margin: 0 0 1em;}
	#mascot {display: block;}
    #half {width: 45%; margin: 0;}	
	.left {float: left; position: relative;}
    .right {float: right; position: relative;}
	#servicetopl {width: 50%; float: left; position: relative;}
	#servicetopr {width: 50%; float: left; position: relative;}
	#sizes {float: right; clear: left;}
    #myForm {margin: 0;}
	input[type=text] {padding: 1em;}
	#servicesselect {padding: 1em;}
	textarea {padding: 1em;}
    footer {padding: 6em;}
    #options {padding: 0 6em 6em; display: inline-table;}
    .option {width: 33.33%;}
}

/* SPRITEBAKER.COM */

input:required:invalid, input:focus:invalid {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC);
background-position: right center;
background-repeat: no-repeat;
-moz-box-shadow: none;
}
input:required:valid {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=);
background-position: right center;
background-repeat: no-repeat;
}