@charset "utf-8";
/* Main Structure */
* {
    box-sizing: border-box;
}

html, body {
	background-color: #666;
	width: 100%;
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Geneva, sans-serif;
	text-align: center;
        z-index: 0;
}

@media only screen and (min-width: 600px) {
	html, body {
		width: 100%;
		margin: 0px;
		padding: 0px;
		font-family: Verdana, Geneva, sans-serif;
		text-align: center;
                font-size: 18px;
		/*background-image: url(../images/structure/tile.gif);
		background-repeat: repeat;*/
	}
}
/* Delete when published*/
.placeholder { margin: auto; padding: 100px 0px 0px 0px; color: #FFF; }
/* Delete to here*/
p {
	
}
a {
	
}
h1 { text-align: center; }
h2 { text-align: center; }
h3 { text-align: center; }
h4 {
	
}
h5 {
    text-align: center;
    text-decoration: underline;
    font-size: 24px;
}
.clear {
	clear: both;
}
.clearl {
	clear: left;
}
.clearr {
	clear: right;
}
.g-recaptcha {
	display: inline-block;
	
}
.textc { text-align: center; }
.textl { text-align: left; }
.formr {
	text-align: left;
}
.formc {
	text-align: left;
}
.forml {
	text-align: left;
}
@media only screen and (min-width: 600px) {
	.formr {
		text-align: right;
	}
	.formc {
		text-align: center;
	}
}
.invis {
	display: none;
}
.floatl {
	float: left;
	padding: 0px 5px 0px 0px;
}
.floatr {
	float: right;
	padding: 0px 0px 0px 5px;
}
.textfield { color: #FFF; background-color: #1761a0; font-size: 12px; font-weight: bold; padding: 3px 5px; font-family: Verdana, Geneva, sans-serif; }
.submit {
	color: #FFF;
	background-color: #1761a0;
	font-size: 14px;
	font-weight: bold;
	padding: 3px 5px;
}
.paypal {
	width: 100%;
	max-width: 150px
}
.block {
	display: block;
}
.bold {
	font-weight: bolder;
}
.tinytext {
	font-size: xx-small;
}


/* Device Support */
[class*="col-"] {
    float: left;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;

}

/* For tablets: */
@media only screen and (min-width: 600px) {
    [class*="col-"] {
        padding: 10px;
}
    
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
    
}

/* For desktop: */
@media only screen and (min-width: 768px) {
    [class*="col-"] {
        padding: 10px;
}
    
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

/* Responsive Grid */
.row::after {
    content: "";
    clear: left;
    display: table;
}

/* Navigation */

#navigationholder {
	text-align: center;
	width: 100%;
	/*background-color: #00F;*/
	color: #000;
	position: absolute;
	top: 0px;
        z-index: 10;
}

@media only screen and (min-width: 620px) {
	#navigationholder {
		text-align: center;
		width: 100%;
		/*background-color: #00F;*/
		position: relative;
		color: #00F;
		top: auto;
	}
}

.navwidth {
    width: 16.66%;
}

#navigation { margin: auto; padding: 0px; text-align: center; width: 100%; max-width: 900px; position: relative; }

#navigation ul { list-style: none; background-color: #FFF; position: relative; margin: 0px; padding: 0px;}
#navigation > ul > li { float: left;}

#navigation ul::after { content: ''; display: block; clear: both;}
#navigation ul li:hover { background-color: rgba(255,0,0,.8);}
#navigation ul li:hover > ul { display: block;}

#navigation ul li a { display: inline-block; color: #1761a0; padding: 10px; text-decoration: none; width: 150px; font-weight: bold; }
#navigation ul li a:hover { background-color: rgba(255,0,0,.8); color: #FFF; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}

#navigation ul ul { display: none; position: absolute; top: 100%; background-color: rgba(255,255,255,.8);}
#navigation ul ul li { position: relative;}
#navigation ul ul ul { left: 90%; top: 10px;}

/* Top Level Overide */
#navigation > ul > li { float: none; width: 16.66%; display: inline-block; }
#navigation > ul > li > a { padding: 14px 16px; width: 100%; }

/* Hide the link that should open and close the topnav on small screens */
#myTopNav .icon {
    display: none;
}

@media screen and (max-width: 620px) {
    #navigation li:not(:first-child) { display: none; }
    #navigation ul.responsive { display: block; position: relative; left: auto; top: auto;}
    #navigation ul.responsive .icon { position: absolute; right: 0; top: 0; }
    #navigation ul li { width: auto; }
    #navigation ul li:hover { background-color: transparent; }
    #navigation ul li a, #myTopNav > a { padding: 10px; text-decoration: none; }
    #myTopNav .icon { float: right; display: block; width: auto; color: #1761a0; }
    #navigation ul.responsive li { display: block; float: none; text-align: left; }
}


.navshadow {
	box-shadow: -3px 3px 5px #000000;
}


/* Title */

#titleholder { text-align: left; width: 100%; margin: 39px 0px 0px 0px; padding: 0px; clear: both; position: relative; }
#title { width: 100%; max-width: 900px; margin: auto; padding: 0px 0px 5px 0px; font-weight: bold; position: relative; color: #1761a0; background-color: #FFF; overflow: hidden; }
.titlelogo { width: 100%; max-width: 450px; margin: 0px; text-align: center; }
.titlephone { width: 100%; max-width: 450px; float: right; text-align: center; padding: 0px 10px; font-size: 12px; }
.titleemail { width: 100%; max-width: 450px; float: right; text-align: center; padding: 0px 10px; font-size: 12px; }
.titlesocial { width: 100%; max-width: 450px; float: right; text-align: center; padding: 0px 10px; font-size: 12px; }

@media only screen and (min-width: 600px) {
    #titleholder { text-align: left; width: 100%; margin: 0px; padding: 0px; clear: both; }
    #title { width: 100%; max-width: 900px; margin: auto; padding: 0px; font-weight: bold; position: relative; color: #1761a0; background-color: #FFF; overflow: hidden; }
    .titlelogo { width: 50%; max-width: 450px; margin: 0; float: left;  }
    .titlephone { width: 50%; max-width: 450px; float: right; text-align: right; padding: 0px 10px 0px 0px; font-size: 18px; }
    .titleemail { width: 50%; max-width: 450px; float: right; text-align: right; padding: 0px 10px 0px 0px; font-size: 18px; }
    .titlesocial { width: 50%; max-width: 450px; float: right; text-align: right; padding: 0px 10px 0px 0px; font-size: 18px; }
}

#title a:link {
	color: #1761a0;
	text-decoration: none;
}
#title a:visited {
	color: #1761a0;
	text-decoration: none;
}
#title a:hover {
	color: #1761a0;
	text-decoration: underline;
}
#title a:active {
	color: #1761a0;
	text-decoration: underline;
}


/* Content */
#contentcontainer {
	width: 100%;
	margin: 0px;
	padding: 0px;
}
#content {
	max-width: 900px;
	margin: auto;
	padding: 0px 0px 10px 0px;
	text-align: left;
	background-color: #FFF;
}
#content a:link {
	color: #000;
	text-decoration: none;
}
#content a:visited {
	color: #000;
	text-decoration: none;
}
#content a:hover {
	color: #000;
	text-decoration: underline;
}
#content a:active {
	color: #000;
	text-decoration: underline;
}
.contentbuffer {
	height: 60px;
	width: 100%;
	clear: both;
}

#imagebanner {
	width: 100%;
	padding: 5px;
	text-align: center;
}
.imagebanner {
	width: 100%;
	max-width: 600px;
	padding: 5px;
	text-align: center;
}
.imagepad {
	margin: 0px;
	padding: 5px 10px 5px 0px;
	height: auto;
}

/* Footer */
.footercontainer {
	text-align: center;
	width: 100%;
	color: #000;
	/*background-color: #00F;*/
}
.footer {
	width: 100%;
	max-width: 900px;
	margin: 0px auto;
	font-size: 8px;
	font-weight: bold;
	color: #FFF;
	background-color: #00F;
	text-align: left;
	font-size: 10px;
	clear: both;
	padding: 0px 0px 45px 0px;
}
.footer a {
	color: #FFF;
}
#dougaldesigns {
	color: #000;
	font-size: 10px;
	text-align: center;
	padding-bottom: 4px;
}

/* Pages */
#formcontainer {
	width: 100%;
	text-align: center;
}

/* Index Page */
.indexbanner, .indexbannertitle, .indexbannerbase {
    position: relative;
    margin: 0px;
    padding: 0px;
    color: #ffff00;
    text-align: center;
    width: 100%;
    font-size: 24px;
    font-weight: bold;
    z-index: 1;
}
@media only screen and (min-width: 600px) {
    .indexbanner, .indexbannertitle, .indexbannerbase {
        font-size: 24px;
    }
}

@media only screen and (min-width: 768px) {
    .indexbanner, .indexbannertitle, .indexbannerbase {
        font-size: 36px;
    }
}

.affiliates { width: 100%; text-align: justify; position: relative; }
.affiliates .row img { max-height: 85px; }

.indexbannertitle {
    position: absolute;
    top: 0px;
    padding: 5px;
}

.indexbannerbase {
    position: absolute;
    bottom: 0px;
    padding: 5px;
}

h1.suburb { color: #03C; font-size: 24px; }
h2.suburb { color: #03C; font-size: 18px; }
h3.suburb { color: #03C; font-size: 12px; font-weight: bold; }

.suburb_contact { width: 80%; margin: auto; padding: 0px; text-align: center; border: solid #F00 medium; border-radius: 25px; }
.suburb_contact h1 { font-size: 18px; font-weight: bold; }

.suburbs { font-size: 12px; padding: 0px 0px 10px 0px; }
.suburbs ul { list-style-type: none;  margin: 0px; padding: 0px; }
.suburbs ul li { background-color: rgba(0,0,0,.2);  margin: 0px; padding: 5px 0px; }
.suburbs ul li:nth-child(even) { background-color: rgba(0,0,0,.1); }
.suburbs [class*="col-"] { padding: 0px 10px; }

@media only screen and (min-width: 600px) {
    h1.suburb { color: #03C; font-size: 36px; }
    h2.suburb { color: #03C; font-size: 24px; }
    h3.suburb { color: #03C; font-size: 18px; font-weight: bold; }
    
    .suburb_contact { width: 80%; margin: auto; padding: 0px; text-align: center; border: solid #F00 medium; border-radius: 25px; }
    .suburb_contact h1 { font-size: 18px; font-weight: bold; }

    .suburbs { font-size: 12px; padding: 0px 0px 10px 0px; }
    .suburbs ul { list-style-type: none;  margin: 0px; padding: 0px; }
    .suburbs ul li { background-color: rgba(0,0,0,.2);  margin: 0px; padding: 0px; }
    .suburbs ul li:nth-child(even) { background-color: rgba(0,0,0,.1); }
    .suburbs [class*="col-"] { padding: 0px 10px; }
}

/* Gallery Page */
#galleryview {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #666;
	background-image: url(../images/structure/shadow.png);
	background-repeat: repeat;
	z-index: 10;
        color: #FFF;
	text-align: center;
	left: 0px;
	top: 0px;
}
#gallerypos {
	max-width: 900px;
	width: 100%;
        color: #FFF;
	margin: auto;
}

#gallerypos a:link {
    color: #FFF;
}
#gallerypos a:visited {
    color: #FFF;
}
#gallerypos a:hover {
    color: #FFF;
}
#gallerypos a:active {
    color: #FFF;
}
.galleryvis {
    text-align: center;
}
.galleryhid {
    display: none;
    text-align: center;
}
@media only screen and (min-width: 420px) {
	.galleryvis {
            text-align: center;
        }
        .galleryhid {
            display: block;
            text-align: center;
        }
}

 /* Slideshow container */
.slideshow-container { position: relative;  background: #f1f1f1f1; }
/* Slides */
.mySlides { display: none; padding: 80px; text-align: center; }
/* Next & previous buttons */
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -30px; padding: 16px; color: #888; font-weight: bold; font-size: 20px; border-radius: 0 3px 3px 0; user-select: none; }
/* Position the "next button" to the right */
.next { position: absolute; right: 0;  border-radius: 3px 0 0 3px; }
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); color: white; }
/* The dot/bullet/indicator container */
.dot-container { text-align: center; padding: 20px; background: #ddd; }
/* The dots/bullets/indicators */
.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }
/* Add a background color to the active dot/circle */
.active, .dot:hover { background-color: #717171; }
/* Add an italic font style to all quotes */
q { font-style: italic; }
/* Add a blue color to the author */
.author { color: cornflowerblue; } 

#cookiejar {
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
    color: #FFF;
    z-index: 100;
    position: fixed;
    bottom: 0px;
}
#cookies {
    max-width: 900px;
    width: 100%;
    margin: auto;
    background: #F00;
}
#cookies a{
    color: #FFF;
}