@charset "utf-8";

/* CSS Document */

@font-face {

  font-family: 'WebSymbolsRegular';

  src: url('/webfonts/websymbols-regular-webfont.eot');

  src: url('/webfonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/webfonts/websymbols-regular-webfont.woff') format('woff'), url('/webfonts/websymbols-regular-webfont.ttf') format('truetype'), url('/webfonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');

  font-weight: normal;

  font-style: normal;

}

#nav .nav-open-button, #nav2 .nav-open-button, #nav3 .nav-open-button, #nav-centered .nav-open-button{display: none;}

body{ font-size:0.9em; /* 16 * 0.0625 = 1px */ letter-spacing: 0.07em; font-family: 'Open Sans', sans-serif; line-height: 2em;  margin: 0; padding:0; color:#2B2B28; background:#092625; background-color: #ddd9ce; max-width: 1800px;}

img {max-width: 100%;}


/* main structures */

#wrap{margin:0em auto; width: 100%;  max-width: 1800px; position: relative;}
#wrap2{margin:0em; padding: 0; width: 100%;  max-width: 1800px; position: relative;}

/*header styles  ---------------*/
#header{ }
#header .logo{color: #666; width: 100%; padding: 2em 0 0em 0; text-align: center;}
#header .logo h1{padding: 0.6em 0 0.5em 0;}

#header2{ position: relative; }
#header2 .logo, #header3 .logo{width: 90%; margin: 0; text-align:center;color: #d3d3d3; position: absolute; top: 7%; left: 20%;}
#header2 .logo h1,#header3 .logo h1{letter-spacing: 0.2em; font-size:3.2em; margin: 0; padding: 0;}
#header2 .logo p,#header3 .logo p{letter-spacing: 0.2em; font-size:1em;margin: 0; padding: 1em 0 0 0;}

#thin-images{width: 100%; padding: 0 0 21% 0; position: relative;}
#thin-single-image{width: 100%; padding: 0 0 0 0; position: relative;}
.header-images{}

#header3{}
#header3 .logo{top: 10%;}

/*LIGHT first level nav styles  ---------------*/
#nav{width:100%; margin:-4em 0 0 0; padding:0 0 0 0; height:3em; z-index: 21; position: relative; font-size: 1em; text-transform: uppercase; }
#nav ul {padding:0 2% 0 0; margin: 0 0 0 0; list-style: none;float:right;  }
#nav a {display: block;	padding:1em; color:#d3d3d3; text-decoration:none; }
#nav li {float: left;  }  

/*first level nav hover styles---*/
#nav ul> li:hover > a {display: block; background-color:#7a7053; color:#fff; z-index:999;text-decoration:none;}

/*second level nav styles also requires javascript see template for .sfhover class in ie ---------------*/
#nav li ul {position: absolute;	width: 10em;left: -2000px; z-index:999; color:#d3d3d3;  padding:0 0 0 0;}
#nav li ul a {display: block; background-color:#aea58b; width: 150px; padding:1em; color: #fff;text-decoration:none; }
#nav li:hover ul, #nav li.sfhover ul {left: auto;  color:#d3d3d3;}



/*DARK first level nav styles  ---------------*/
#nav2{width:80%; margin:0 auto 0 auto; padding:0 0 0 0; height:3em; z-index: 21; position: relative; font-size: 1em; text-transform: uppercase;  }
#nav2 ul { padding:0 0 0 0; margin: 0 auto 0 auto; list-style: none;  }
#nav2 a {display: block;	padding:1em; color:#231e11; text-decoration:none; }
#nav2 li {float: left; }  

/*first level nav hover styles---*/
#nav2 ul> li:hover > a {display: block; background-color:#7a7053; color:#fff; z-index:999;text-decoration:none;}

/*second level nav styles also requires javascript see template for .sfhover class in ie ---------------*/
#nav2 li ul {position: absolute;	width: 10em;left: -2000px; z-index:999; color:#d3d3d3;  padding:0 0 0 0;}
#nav2 li ul a {display: block; background-color:#aea58b; width: 150px; padding:1em; color: #fff;text-decoration:none; }
#nav2 li:hover ul, #nav li.sfhover ul {left: auto;  color:#d3d3d3;}


/*DARK TOP first level nav styles  ---------------*/
#nav3{width:100%; margin:0 0 0 0; padding:0 0 0 0; height:3em; z-index: 21; position: relative; font-size: 1em; text-transform: uppercase; position: absolute; top: 2em; }
#nav3 ul {padding:0 2% 0 0; margin: 0 0 0 0; list-style: none;float:right;  }
#nav3 a {display: block;	padding:1em; color:#d3d3d3; text-decoration:none; }
#nav3 li {float: left; }  

/*first level nav hover styles---*/
#nav3 ul> li:hover > a {display: block; background-color:#7a7053; color:#fff; z-index:999;text-decoration:none;}

/*second level nav styles also requires javascript see template for .sfhover class in ie ---------------*/
#nav3 li ul {position: absolute;	width: 10em;left: -2000px; z-index:999; color:#d3d3d3;  padding:0 0 0 0;}
#nav3 li ul a {display: block; background-color:#aea58b; width: 150px; padding:1em; color: #fff;text-decoration:none; }
#nav3 li:hover ul, #nav li.sfhover ul {left: auto;  color:#d3d3d3;}


		
		

/*--------------Major content divs ---------------*/
#content{margin:0 auto 0 auto; padding:8% 2% 2% 2%;  width: 80%;}
#content-home{margin:0 auto 0 auto; padding:1% 2% 2% 2%;  width: 70%; }
.row{width: 80%;}
table.webform{
	border-collapse:collapse;
	border-spacing:0;
	padding: 2em;
	width: 50%;
}
table.webform td{
	
	padding: 0em 2em 0em 2em;
	}



/*content block styles  ---------------*/

.line{ border-top: 0.06em solid #aea58b; width: 50%; margin: 2em auto 1em auto; padding: 0;}
.line2{ border-top: 0.06em solid #aea58b; width: 80%; margin: 2em auto 1em auto; padding: 0;}
.testimonial{background-color:#f2efe3; padding: 2em;-webkit-box-shadow: 11px 11px 7px -9px rgba(67,84,66,1);
-moz-box-shadow: 11px 11px 7px -9px rgba(67,84,66,1); box-shadow: 11px 11px 7px -9px rgba(67,84,66,1); margin: 1em 0 2em 0;-webkit-border-radius: 5px;-moz-border-radius: 3px;border-radius: 5px; font-style:oblique;  font-family:Georgia, "Times New Roman", Times, serif; }
/*-------------image divs ---------------*/

.left-image{float:left; width: 33%;  margin: 0 5% 5% 0; -webkit-box-shadow: 11px 11px 7px -9px rgba(67,84,66,1);-moz-box-shadow: 11px 11px 7px -9px rgba(67,84,66,1); box-shadow: 11px 11px 7px -9px rgba(67,84,66,1);}

.left-image-wide{float:left; width: 40%;  margin: 0 5% 5% 0; -webkit-box-shadow: 11px 11px 7px -9px rgba(67,84,66,1);-moz-box-shadow: 11px 11px 7px -9px rgba(67,84,66,1); box-shadow: 11px 11px 7px -9px rgba(67,84,66,1);}

.product-image{display:inline-block; vertical-align: top; width: 30%; padding: 0 5% 0 0;}
.product-image2{float:left; padding: 0 5% 5% 0; width: 40%;}
.home-image{width: 20%;  display: block; margin: 0 auto 0 auto; }

.clear{clear:both;}

/*----------- product layouts -----------*/ 
li.productItem{list-style-type:none; margin-bottom: 2em;}
.product-image{display:inline-block; vertical-align: top; width: 30%; padding: 0 0 0 0; margin: 0 5% 0 0; -webkit-box-shadow: 11px 11px 7px -9px rgba(67,84,66,1);-moz-box-shadow: 11px 11px 7px -9px rgba(67,84,66,1); box-shadow: 11px 11px 7px -9px rgba(67,84,66,1);}
.product-desc{display:inline-block; vertical-align: bottom; width: 50%;padding: 0 0 0 0; margin: 0 0 0 0;}
.product-desc2{padding: 0 0 0 0; margin: 0 0 0 0;}
.productTextInput{width: 4em;}


/*----------- standard Text styles -----------*/ 
p {margin:0; padding:0.5em 0 1.5em 0; }
h1 {margin:0; padding:0em 0em 1em 0em;  font-size:3em;  line-height: 1.5em; font-weight:normal; font-variant:small-caps; font-family: 'Josefin Sans', sans-serif; text-transform: uppercase;}
h2 {margin:0; font-size:1.5em; font-variant:small-caps;font-family: 'Josefin Sans', sans-serif;text-transform: uppercase; padding: 0 0 1em 0;}
h3 {margin:0;  padding:1em 0em 0.5em 0em; font-size:1.1em;font-family: 'Josefin Sans', sans-serif;text-transform: uppercase; }
h4 {margin:0;  padding:1em 0em 0.5em 0em; font-size:1em; font-family: 'Josefin Sans', sans-serif;text-transform:capitalize; }
h5 {margin:0;  padding:1em 0em 0.5em 0em; font-size:0.9em; }
a:link, a:visited{color:#663; text-decoration:underline;}
a:hover{color:#000; text-decoration:underline;}


/*-------- list styles -------*/
ul.list{margin: 0em 0em 0em 2em; padding: 0em; }
ul.list li{margin: 0 0 0 2em; }

table.tracks{font-style:italic; padding: 1em; border-top: 1px solid #fff;  font-size: 0.8em;}
table.tracks td{padding:0; }

/*--------------subnav box ---------------*/

#subnav{padding: 2em 0em 2em 0em; margin:0 auto 0 auto; position: relative;  }
#subnav ul{ margin:0 auto 0 auto; padding: 1em;  text-align:center; font-size: 0.9em; }
#subnav li{list-style:none;  display:inline; padding:0 1em 0 0;}
#subnav a:link{ }
#subnav a:visited { }
#subnav a:hover{}
#subnav .bottomlogo{position: absolute; top: -8em; left: 40%; width: 30%; }



/*footer------------------*/
#footer{width:100%;   }
#footer ul {padding:1em 0 0 0;  margin:0em 0em 0em 0em; list-style:none; }
#footer li {padding:0; margin:0em 0em 2em 0em; display:inline-block; width: 40%; font-size:0.8em;}
#footer li.copyright { margin-left: 5%; }
#footer li.doodlefish {text-align:right; margin-right: 5%; }
#footer li a:link, #footer li a:visited{padding:0; margin:0; text-decoration:none; }
#footer li a:hover{}



/* ----------social media links----------------*/
.footer-social-icons {display:block;  margin: 0 auto;}
.social-icon {	color:#003;}
ul.social-icons {	margin-top: 10px;font-size: 1.5em;}
.social-icons li {	vertical-align: top;	display: inline;}
.social-icons a {	color:#003;	text-decoration: none;}


.sm-menu{width: 100%; background-color:#040504;}
.sm-menu ul.social-icons{margin: 0; font-size: 0.8em; text-align:right; color: #d3d3d3;}

.fa-facebook {
	padding:10px 14px 7px 14px;
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition: .5s;
  border: 1px solid #666;
	background-color: #453d2c; color:#d3d3d3;
}

.fa-facebook:hover {
	
	background-color:#7a7053;
	color:#d3d3d3;
}

.fa-google-plus {
	padding:10px 14px 7px 14px;
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition: .5s;
  border: 1px solid #666;
	background-color: #453d2c; color:#d3d3d3;
}

.fa-google-plus:hover {
	background-color:#7a7053;
	color:#d3d3d3;
}


.fa-twitter {
	padding:10px 10px 7px 10px;
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition: .5s;
  border: 1px solid #666;
	background-color: #453d2c; color:#d3d3d3;
}

.fa-twitter:hover {
	background-color:#7a7053;
	color:#d3d3d3;
}

.fa-rss {
	padding:10px 12px 7px 12px;
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition: .5s;
  border: 1px solid #666;
	background-color: #453d2c; color:#d3d3d3;
}

.fa-rss:hover {
	background-color:#7a7053;
	color:#d3d3d3;
}

.fa-youtube {
	padding:10px 12px 7px 11px;
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition: .5s;
  	border: 1px solid #666;
	background-color: #453d2c; color:#d3d3d3;
}

.fa-youtube:hover {
	background-color:#7a7053;
	color:#d3d3d3;
}

.fa-linkedin {
	padding:10px 11px 8px 11px;
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition: .5s;
  	border: 1px solid #666;
	background-color: #453d2c; color:#d3d3d3;
	
}

.fa-linkedin:hover {
	background-color:#7a7053;
	color:#d3d3d3;
}

.fa-tripadvisor {
	padding:10px 10px 7px 10px;
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition: .5s;
  	border: 1px solid #666;
	background-color: #453d2c; color:#d3d3d3;
}

.fa-tripadvisor:hover {
	background-color:#7a7053;
	color:#d3d3d3;
}


.fa-instagram {
	padding:10px 10px 7px 10px;
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition: .5s;
  	border: 1px solid #666;
	background-color: #453d2c; color:#d3d3d3;
}

.fa-instagram:hover {
	
	background-color:#7a7053;
	color:#d3d3d3;
	
}

.fa-apple {
	padding:10px 10px 7px 10px;
	-o-transition:.5s;
  	-ms-transition:.5s;
  	-moz-transition:.5s;
  	-webkit-transition:.5s;
  	transition: .5s;
  	border: 1px solid #666;
	background-color: #453d2c; color:#d3d3d3;
}

.fa-apple:hover {
	
	background-color:#7a7053;
	color:#d3d3d3;
	
}


.catalogueItemNotFound{display:none;}

.webform{ background-color:#EFEFDE; padding: 2em; -webkit-box-shadow: 11px 11px 7px -9px rgba(67,84,66,1);-moz-box-shadow: 11px 11px 7px -9px rgba(67,84,66,1); box-shadow: 11px 11px 7px -9px rgba(67,84,66,1); width: 40%; display:inline-block; vertical-align:top; margin-right: 20px;}

.video{ padding: 2em 0 2em 0;}
.btn{ background-color:#7E0114; border: 1px solid #663; color: #fff; padding: 20px; border-radius: 5px; text-decoration: none; }
.btn:hover{background-color:#000000;  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);}
a.btn{ background-color:#7E0114; border: 1px solid #663; color: #fff; padding: 20px; border-radius: 5px; text-decoration: none; }
a.btn:hover{background-color:#000000;  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);}

.highlight-box{ border:1px solid #666; margin: 20px 0 0 0; background-color:#666633; color: #fff; padding: 20px; text-align:center;box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);background-size: cover;}

.content2{ width 80%;}
.col5{ display: inline-block; width: 30%; vertical-align: top; margin-top:20px;}
.col7{display: inline-block; width: 60%; vertical-align: top; margin-top:20px;}
.col30{display: inline-block; width: 30%; vertical-align: top; margin-top:20px;}
.smallbox{ padding: 00px 20px 0px 20px; list-style-type:none; margin: 0; }

input.cat_textbox{padding: 5px;}
.webform label{font-size: 0.8em;}
.hidden{display:none;}


            .hide{
            display:none;
            }
            .hideform{
            display:none;
            }
            .total{
            color:red;
            font-size:36px;
            }
        
		

/*----------- media queries go at end of css -----------*/ 



@media only screen and (max-width: 580px) {

    /* phones */

#wrap{width: 100%;}
body{font-size: 0.8em;}
.logo{top: 3%; }

    /* navigation */

    .tablet-nav #nav .nav-open-button, .tablet-nav #nav2 .nav-open-button, .tablet-nav #nav3 .nav-open-button { /* styling and positioning of the nav toggle button */
        z-index: 200;
        width: 20px;
        height: 20px;
        padding-top: 10px;
        margin-left: 10px;
        display: block;
        cursor: pointer;
        font-family: 'WebSymbolsRegular';
        font-size: 20px;
        color: #ededed;
    }

    .tablet-nav #nav ul, .tablet-nav #nav2 ul, .tablet-nav #nav3 ul{display: none;}
    .tablet-nav #maincntent{float: left;}
    .tablet-nav #nav ul, .tablet-nav #nav2 ul, .tablet-nav #nav3 ul {float: left; width: 100%; z-index:20; }
    .tablet-nav #nav ul li, .tablet-nav #nav2 ul li, .tablet-nav #nav3 ul li{float: none;}
    .tablet-nav #nav li:hover ul, .tablet-nav #nav2 li:hover ul,  .tablet-nav #nav3 li:hover ul{left: 40%; width: 60%; margin-top: -39px;}
	.left-image{display:none;}
	.right-content{width: 100%; }
	
	.logo h1{letter-spacing: 0.2em; font-size:2em; padding: 0; margin: 0;}
.logo p{letter-spacing: 0.2em; font-size:0.8em;padding: 0; margin: 0;}
}





@media only screen and (min-width: 581px)and (max-width: 900px) {

    /* tablets */

	#nav a{font-size:0.7em;}
	#title-row{font-size:2em;}
p{font-size: 0.7em;}
.logo h1{letter-spacing: 0.2em; font-size:2em;padding: 0; margin: 0;}
.logo p{letter-spacing: 0.2em; font-size:0.8em;padding: 0; margin: 0;}
.logo{top: 3%; }

@media only screen and (min-width: 901px)and (max-width: 1200px) {

    /* desktops */

	.left-image{display:none;}
	.right-content{width: 100%; }
	.logo h1{letter-spacing: 0.2em; font-size:2em;padding: 0; margin: 0;}
.logo p{letter-spacing: 0.2em; font-size:0.8em;padding: 0; margin: 0;}
.logo{top: 3%; }
}





@media only screen and (max-width: 767px) and (orientation: portrait) {

    /* portrait phones */

    #bottombox{display:none;}
p{font-size: 0.7em;}
.left-image{display:none;}
	.right-content{width: 100%; }
}