html {
	image-rendering:optimizeQuality;
	-ms-interpolation-mode:bicubic;
	-webkit-font-smoothing:antialiased
}

@font-face {
	font-family:'AllerRegular';
	src:url(fonts/Aller_Rg.ttf);
	src:local(AllerRegular),url(fonts/Aller_Rg.ttf) format("truetype")
}

/* CUSTOMISATIONS */

.logo {
	margin-top:16px;
}

span.logo {
	display:none;
}

h1.title {
	font-family: 'Roboto',"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-style: normal;
	text-rendering: optimizeLegibility;
	color:#fb4848;
	font-size: 2.1em;
	font-weight: 300;
	text-transform: uppercase;
}

.pushdown64 {
	padding-bottom:64px;
}

.pushbot64 {
	margin-bottom:64px;
}

.skew-lines-cust {
	position:relative;
	font-size:18px;
	padding-left:32px;	
	background-image:url(images/ampisand.png);
	background-repeat: no-repeat;
	background-position: top 5px left 8px;
}

.skew-lines-cust:before {
	position:absolute;
	left:20px;
	top:5px;
	width:20px;
	height:20px;
}

.gappanel {
	padding-top:24px;
	padding-bottom:24px;
}

/* EXPANDING BAR */

.bar {
	height:32px;
	background:transparent;
    text-align:center;
	display: inline-block;
    position:relative;
	-moz-transform: rotate(-2deg);
	-webkit-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);    
}

.bar p {
    padding:0px 20px 0px 20px;
    font-size:20px;
    text-transform:uppercase;
    vertical-align:20px;
    
}

.level {
    position:absolute;
	height:32px;
    width:0%;
	font-style: normal;
	font-weight: 500;
	text-rendering: optimizeLegibility;
	text-transform: uppercase;
	border-left: 2px solid #4a4a4a;
	border-right: 2px solid #4a4a4a;
	border-top: 0px;
	border-bottom: 0px;
	padding: 0px 10px 0px 10px;
	color: #4a4a4a;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
	background-color: rgba(250,0,0,0.1);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-top:10px;
	margin-bottom:10px;
   	text-shadow: 0 0 0 #4a4a4a;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
   	padding: 0px 8px 0px 8px;
}

.expand.start {
	width: 0px;
	-webkit-animation: expand 2s ease-out forwards;
	   -moz-animation: expand 2s ease-out forwards;
	    -ms-animation: expand 2s ease-out forwards;
	     -o-animation: expand 2s ease-out forwards;
	        animation: expand 2s ease-out forwards;
}

@-moz-keyframes expand {
    0% {
        width: 0px;
        margin-left:50%;
    }

    100% {
        width: 100%;
        margin-left:0%;
    }
}

@-webkit-keyframes expand {
	0% {
	    width: 0px;
        margin-left:50%;
	}

	100% {
	    width: 100%;
        margin-left:0%;
    }
}


/* RIBBON APARAGRAPH TEXT */

#blurbBox span {
	font-family: 'Roboto',"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 500;
	text-rendering: optimizeLegibility;
	display: inline-block;
	text-transform: uppercase;
	border-left: 2px solid #4a4a4a;
	border-right: 2px solid #4a4a4a;
	border-top: 0px;
	border-bottom: 0px;
	padding: 0px 10px 0px 10px;
	color: #4a4a4a;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
	background-color: rgba(250,0,0,0.1);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-top:10px;
	margin-bottom:10px;
}

#blurbBox p {
	margin-top:32px;
	font-family: 'Roboto',"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	text-rendering: optimizeLegibility;
	display: inline-block;
	font-size: 2em;
	margin-bottom: 1px;
	color: #4a4a4a;
	line-height:150%;
}

#blurbBox strong {
	color:#fb4848;
}

#blurbBox img {
	vertical-align: -11px;
}

#blurbBox .stampBox {
	display: inline-block;
	padding: 0px 8px 0px 8px;
/*	background-color: #fb4848; */
/*	color: transparent; */
/*	font-size: 0.9em; */
/*	font-weight: 900; */
	text-shadow: 0 0 0 #4a4a4a;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#blurbBox .stampBox {
	-moz-transform: rotate(-2deg);
	-webkit-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
}

#blurbBox .stampBox:nth-child(2n) {
	-moz-transform: rotate(.3deg);
	-webkit-transform: rotate(.3deg);
	-o-transform: rotate(.3deg);
	-ms-transform: rotate(.3deg);
	transform: rotate(.3deg);
}

#blurbBox .stampBox:nth-child(3n) {
	-moz-transform: rotate(-1.15deg);
	-webkit-transform: rotate(-1.15deg);
	-o-transform: rotate(-1.15deg);
	-ms-transform: rotate(-1.15deg);
	transform: rotate(-1.15deg);
}

#blurbBox .stampBox:nth-child(4n) {
	-moz-transform: rotate(.6deg);
	-webkit-transform: rotate(.6deg);
	-o-transform: rotate(.6deg);
	-ms-transform: rotate(.6deg);
	transform: rotate(.6deg);
}

#blurbBox .tossing {
	animation-name: tossing;
	-webkit-animation-name: tossing;
	animation-duration: 5s;
	-webkit-animation-duration: 5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

#blurbBox .tossing:nth-child(2n) {
	animation-name: tossing;
	-webkit-animation-name: tossing;
	animation-duration: 8s;
	-webkit-animation-duration: 8s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

/* KEN BURNS STYLE ZOOM/FADE SLIDER */

/**
 * Styling the container (the wrapper)
 * 
 * position is used to make this box a containing block (it becomes a reference for its absolutely positioned children). overflow will hide part of the images moving outside of the box.
 */

#slideshow {
    position:relative;
    width:100%;
    height:400px;
    overflow:hidden;
    border:0px;
}

/**
 * Styling the images
 *
 * position:absolute is to put all images in a stack. Dimensions are set to increase the size of these images so their edges do not appear in the parent box when we move them inside the said box.
 * Because the images are now larger than their parent container, we use top, left and margin values to align them in the center of the box.
 * Finally, we set the transition (property and duration). Note that duration values are different for opacity and transform as we want the "fade-in" effect to be faster than the "panning" effect.
 */

#slideshow img {
    position:absolute;
    width:100%;
    height:auto;
    opacity:0;
    -webkit-transition-property: opacity, -webkit-transform;
    -webkit-transition-duration: 7s, 30s;
       -moz-transition-property: opacity, -moz-transform;
       -moz-transition-duration: 7s, 30s;
        -ms-transition-property: opacity, -ms-transform;
        -ms-transition-duration: 7s, 30s;
         -o-transition-property: opacity, -o-transform;
         -o-transition-duration: 7s, 30s;
            transition-property: opacity, transform;
            transition-duration: 7s, 30s;
}

/**
 * We change the point of origin using four corners so images do not move in the same direction. 
 * This technique allows us to create various paths while applying the same translate() values to all images (see the 'fx' class further below).
 */

#slideshow img  {
    -webkit-transform-origin: bottom left;
       -moz-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
         -o-transform-origin: bottom left;
            transform-origin: bottom left;
}

#slideshow :nth-child(2n+1) {
    -webkit-transform-origin: top right;
       -moz-transform-origin: top right;
        -ms-transform-origin: top right;
         -o-transform-origin: top right;
            transform-origin: top right;
}

#slideshow :nth-child(3n+1) {
    -webkit-transform-origin: top left;
       -moz-transform-origin: top left;
        -ms-transform-origin: top left;
         -o-transform-origin: top left;
            transform-origin: top left;
}
#slideshow :nth-child(4n+1) {
  -webkit-transform-origin: bottom right;
     -moz-transform-origin: bottom right;
      -ms-transform-origin: bottom right;
       -o-transform-origin: bottom right;
          transform-origin: bottom right;
}

/**
 * Because of the stacking context, we need to make sure that the first image (in source) is not hidden by the last one. 
 * The rule below moves all images past the second one down the stack. 
 * This is because the second image needs to show on top of the first one when it transitions in.
 */

#slideshow .fx:first-child + img ~ img  {
    z-index:-1;
}

/**
 * Because images are styled with a different point of origin, the following rule will create different panning effects.
 */

#slideshow .fx {
    opacity:1;
    -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
         -o-transform: scale(1.1);
            transform: scale(1.1);
}


/* ENQUIRY BOX */

#enquiryBox {
	margin: 48px 0px 48px 0px;
}

#enquiryBox .noshow {
	display: none;
}

#enquiryBox h4, 
#enquiryBox h5 {
	font-family: 'Roboto',"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-style: normal;
	text-rendering: optimizeLegibility;
	color:#fb4848;
}

#enquiryBox h4 {
	font-size: 2.1em;
	font-weight: 300;
	text-transform: uppercase;
	margin-top:80px;
}

#enquiryBox h5 {
	font-size:2.4em;
	text-transform: uppercase;
	font-weight: 300;
}

#enquiryBox .top {
	margin-top:18px;
}

input#enquiryButton {
	width:auto;
	background: #12be12;
	padding: 3px 11px 3px;
	border:1px solid #12be12;
	cursor:pointer;
	text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); /*give the text a shadow - doesn't appear in Opera 12.02 or earlier*/
	color: #fff;
	-webkit-box-shadow: inset 0px 1px 0px #12be12, 0px 5px 0px 0px #109810, 0px 5px 5px #999;
	-moz-box-shadow: inset 0px 1px 0px #12be12, 0px 5px 0px 0px #109810, 0px 5px 5px #999;
	box-shadow: inset 0px 1px 0px #12be12, 0px 5px 0px 0px #109810, 0px 5px 5px #999;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin-bottom:5px;
	margin-top:12px;
}

input#enquiryButton:hover, 
input#enquiryButton:focus {
	margin-top:5px;
	margin-bottom:0px;
	color:#dfe7ea;
	-webkit-box-shadow: inset 0px 1px 0px #12be12, 0px 2px 0px 0px #109810, 0px 2px 5px #999;
	-moz-box-shadow: inset 0px 1px 0px #12be12, 0px 2px 0px 0px #109810, 0px 2px 5px #999;
	box-shadow: inset 0px 1px 0px #12be12, 0px 2px 0px 0px #109810, 0px 2px 5px #999;
	margin-top:17px;
}

#enquiryBox input[type="text"], 
#enquiryBox input[type="password"], 
#enquiryBox input[type="date"], 
#enquiryBox input[type="datetime"], 
#enquiryBox input[type="datetime-local"], 
#enquiryBox input[type="month"], 
#enquiryBox input[type="week"], 
#enquiryBox input[type="email"], 
#enquiryBox input[type="number"], 
#enquiryBox input[type="search"], 
#enquiryBox input[type="tel"], 
#enquiryBox input[type="time"], 
#enquiryBox input[type="url"], 
#enquiryBox textarea {
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	border-radius: 0;
	background-color: white;
	font-family: inherit;
	border: 1px solid #cccccc;
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
	color: rgba(0, 0, 0, 0.75);
	display: block;
	font-size: 0.675em;
	margin: 0 0 1em 0;
	padding: 8px 10px 5px 10px;
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: -webkit-box-shadow 0.45s, border-color 0.45s ease-in-out;
	-moz-transition: -moz-box-shadow 0.45s, border-color 0.45s ease-in-out;
	transition: box-shadow 0.45s, border-color 0.45s ease-in-out;
}
.inpEnquiry {
	-webkit-appearance: none;
	-webkit-border-radius: 0;
	border-radius: 0;
	background-color: white;
	font-family: inherit;
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
	color: rgba(0, 0, 0, 0.75) !important;
	display: block !important;
	font-size: 0.675em !important;
	margin: 0 0 1em 0 !important;
	padding: 8px 10px 5px 10px !important;
	width: 100% !important;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: -webkit-box-shadow 0.45s, border-color 0.45s ease-in-out;
	-moz-transition: -moz-box-shadow 0.45s, border-color 0.45s ease-in-out;
	transition: box-shadow 0.45s, border-color 0.45s ease-in-out;
	border:1px solid #c0c0c0 !important;
}

#enquiryBox .right {
	text-align:right;
}

#enquiryBox label {
	font-family: 'Roboto',"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-style: normal;
	text-rendering: optimizeLegibility;
	color:#5a5a5a;
	text-transform: uppercase;
	font-size:0.7em;
	font-weight:500;
	line-height:0.7em;
}

#enquiryBox select {
	padding: 6px;
	font-size: 0.7em;
	width:100%;
}