﻿/*  Designed by Templates in Time 
 *	 templatesintime.com           

Main Colors used in this template
#785340-dark color
#cf6e21-medium color
#c38501-light color
#827376-accent color
*
  1. General Rules
  2. Typography
  3. Classes using Font Awesome
  4. Lists
  5. Paragraphs
  6. Horizontal Rules and Clears
  7. Miscellaneous Classes
  8. Buttons
  9. Font Icon Styles
 10. Layout Rules
 11. Header Area
 12. Site Name Area
 13. Main Navigation
 14. Section Blocks
 15. Footer Area
 16. Contact Form
 17. Image Styles
 18. Accordion Block
 19. Ticker Block
 20. Media Queries
 21. Photogallery 
 22. ColorBox
 23. Accordion
*/
/* ========================================================= */
/* 1. ==================== GENERAL RULES =================== */
html {height: 101%;}
header, figure, figcaption, footer, nav, article, section, aside {display: block;}
body {
	background: #ffffff;
	font-family: 'Open Sans', Verdana, Helvetica, sans-serif;
	font-size: 100%;
	color: #000000;
	margin: 0;
	padding: 0;
	height: 100%;
}
blockquote {
    background: url("../images/quote.png") no-repeat scroll 5px 12px;
    color: #777;
    border-top: none;
    border-bottom: none;
    font-size: 0.95em;
    line-height: 1.4em;
    margin: 2px 40px;
    padding: 12px 12px 12px 40px;
    text-align: left;
}
blockquote p {
	padding: 0; margin: 0;
}
blockquote strong {
	color: #000000; 
	font-size:1.4em; 
	font-weight:normal; 
	letter-spacing:-1px;
}
blockquote.leftside {
	float: left; 
	display: block; 
	width: 30%; 
    border-width: 3px;	
    border-style: double;
	border-left: none;
	border-top: none;
	border-bottom: none;
	margin: 5px 2% 10px 0.5%;
}
blockquote.rightside {
	float: right; 
	display: block; 
	width: 30%; 
   border-style: double;
	border-right: none;
	border-top: none;
	border-bottom: none;
	margin: 5px 0.5% 10px 2%;
}
fieldset {width: 90%; border: 1px dashed #c0c0c0; padding: 20px 3%; margin: 20px 2%;}
legend {color: #785340; font: 30px 'Poiret One', Verdana, Helvetica, sans-serif; background-color: #ffffff; padding: 0 10px;}
table {padding: 0; border-collapse: collapse; font-size: 100%; width: 100%;}

/* 2. ====================== TYPOGRAPHY ========================= */
a {
	color: #cf6e21;
	font-weight: normal;
	text-decoration: none;
	outline: none;
}
a:hover {
	color: #c38501;
	text-decoration: underline;
	font-weight: normal;
	outline: none;
}
h1 {
	font: 48px 'Poiret One', Verdana, Helvetica, sans-serif;
	color: #785340;
	margin: .3em 0 .3em 0;
	letter-spacing: -1px;
}
h2 {
	font: 34px 'Poiret One', Arial, Verdana, Helvetica, sans-serif;
	color: #cf6e21;
	margin: .3em 0;
	letter-spacing: 1px;
	text-align: center;
   	overflow: hidden;}
h2:before,
h2:after {
    border-bottom: 1px solid #cf6e21;
    content: "";
    display: inline-block;
    height: .1em;
    position: relative;
    vertical-align: middle;
    width: 50%;
    margin-bottom: .15em;
}
h2:before {right: 0.2em; margin-left: -50%;}
h2:after {left: 0.2em; margin-right: -50%;}

h3 {
	font: 32px 'Jura', Verdana, Helvetica, sans-serif;
	color: #cf6e21;
	padding: 0;
	text-transform: uppercase;
	letter-spacing: -1px;
	margin: 30px 0 25px 0;
	padding: 5px 0;
	border-bottom: 1px solid #cf6e21;
}
h4 {
	font: normal 28px 'Jura', Verdana, Helvetica, sans-serif;
	color: #404040;
	margin: .3em 0;
}
h5 {
	font: normal 24px 'Raleway', Verdana, Helvetica, sans-serif;
	color: #c38501;
	margin: .3em 0;
}
h6 {
	font: normal 20px 'Raleway',Verdana, Helvetica, sans-serif;
	color: #cf6e21;
	margin: .3em 0;
}
.pagename {
	font: 36px 'Poiret One', Verdana, Helvetica, sans-serif;
	color: #d04245;
	margin: .3em 0 .5em 0;
	letter-spacing: -1px;
	text-align:center;
}

/* Classes of Heading Fonts */
.h1 {
	font: 52px 'Poiret One', Verdana, Helvetica, sans-serif;
	color: #785340;
	margin: 0 0 .3em 0;
	letter-spacing: -1px;
	text-align: center;
}
.h2 {
	font: 34px 'Poiret One', Arial, Verdana, Helvetica, sans-serif;
	color: #cf6e21;
	margin: .3em 0;
	letter-spacing: 1px;
	text-align: center;
   	overflow: hidden;}
.h2:before,
.h2:after {
    border-bottom: 1px solid #cf6e21;
    content: "";
    display: inline-block;
    height: .1em;
    position: relative;
    vertical-align: middle;
    width: 50%;
    margin-bottom: .15em;
}
.h2:before {
    right: 0.2em;
    margin-left: -50%;
}
.h2:after {
    left: 0.2em;
    margin-right: -50%;
}
.h3 {
	font: 32px 'Jura', Verdana, Helvetica, sans-serif;
	color: #cf6e21;
	padding: 0;
	text-transform: uppercase;
	letter-spacing: -1px;
	margin: 30px 0 25px 0;
	padding: 5px 0;
	border-bottom: 1px solid #cf6e21;
}
.alternate {
	font: 24px 'Poiret One', Arial, Verdana, Helvetica, sans-serif;
	color: #c38501;
	margin: .3em 0;
	text-align: center;
}
.alternate:before {
	content: "\2724";
  	display: inline;
  	font-size: 22px;
  	margin-right: 5px;
  	color: #c38501;
  	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.alternate:after {
	content: "\2724";
  	display: inline;
  	font-size: 22px;
  	color: #c38501;
  	margin-left: 5px;
  	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.alternate2 {
	font: 24px 'Poiret One', Arial, Verdana, Helvetica, sans-serif;
	color: #cf6e21;
	margin: .3em 0;
	text-align: center;
	text-transform:uppercase;
	font-weight:bold;
}
.alternate2:before {
	content: "\2726 \2726 \2726";
  	display: inline;
  	font-size: 22px;
  	margin-right: 5px;
  	color: #cf6e21;
  	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.alternate2:after {
	content: "\2726 \2726 \2726";
  	display: inline;
  	font-size: 22px;
  	color: #cf6e21;
  	margin-left: 5px;
  	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.breadcrumbs {
	color: #000; 
	text-transform: uppercase; 
	letter-spacing: 2px; 
	margin: 0 0 20px 0; 
	padding: 5px 0 5px 0; 
	border-bottom: 1px dashed #aaa; 
	font-size: 0.95em;
	text-align: right;
}
.breadcrumbs a,
.breadcrumbs a:hover {
	font-weight: bold; 
	text-decoration: none;
}

/* 3. ===== CLASSES USING FONT AWESOME ICONS ===== */
.home {position: relative; padding: 0 0 5px 25px;}
.home:before {position: absolute; font-family: 'FontAwesome'; content: "\f015"; top: 0; left: 0; font-size: 20px; color: #888;}

.call {position: relative; padding: 0 0 5px 25px;}
.call:before {position: absolute; font-family: 'FontAwesome'; content: "\f095"; top: 0; left: 0; font-size: 20px; color: #888;}

.email {position: relative; padding: 0 0 5px 25px;}
.email:before {position: absolute; font-family: 'FontAwesome'; content: "\f003"; top: 0; left: 0; font-size: 20px; color: #888;}

.hours {position: relative; padding: 0 0 5px 25px;}
.hours:before {position: absolute; font-family: 'FontAwesome'; content: "\f017"; top: 0; left: 0; font-size: 20px; color: #888;}

.comment {position: relative; padding: 0 0 5px 25px;}
.comment:before {position: absolute; font-family: 'FontAwesome'; content: "\f27b"; top: 0; left: 0; font-size: 20px; color: #888;}

/* 4. ============== LISTS ============ */
ul {margin: 10px 0 20px 0;	padding: 0 0 0 15px;}
ul li a {color: #cf6e21; font-weight: normal; padding: 0;}
ul li a:hover {color: #404040; font-weight: normal; text-decoration: underline;}
ul.list1 li {list-style-type: none; position: relative; margin-left: -10px; padding-left: 20px;}
ul.list1 li:before {position: absolute; font-family: 'FontAwesome'; font-size: 14px; top: 3px; left: 0; content: "\f0a9";color: #888;}
ol.leadingzero {background: none; list-style-position: outside; list-style-type: decimal-leading-zero;}
ul.list2 li {list-style-type: none; position: relative; margin-left: -10px; padding-left: 20px; font-size: 85%}
ul.list2 li:before {}

/* 5. ============== PARAGRAPHS ============ */
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.tiny {font-size: 65%; text-align: center; padding-bottom: 10px;}
.small {font-size: 85%;}
.medium {font-size: 90%;}
.large {font-size: 120%;}
.xlarge {font-size: 180%;}
.wide {letter-spacing: 3px;}
.lead {font-size: 1.4em; line-height: 1.5em; font-variant: small-caps; padding-top: 20px; padding-bottom: 20px; }

/* 6. ========== HORIZONTAL RULES AND CLEAR FLOATS ========== */
hr {background-color: #fff; border: none; color: #785340; height: 1px; clear: both;}
hr.fancy {padding: 0; border: none; border-top: 1px solid #785340; color: #785340; text-align: center; margin: 30px 0; clear: both;}
hr.fancy:after {
	content: "\2666  \2666  \2666"; 
	display: inline-block; position: relative; top: -0.6em; font-size: 1.5em; padding: 0 0.50em;	color: #cf6e21; background: white;}
hr.noshow {background-color: transparent; border: none; color: #fff; height: 0; clear: both; visibility: hidden;}
.clearfix:before, .clearfix:after, .breadcrumbs:before, .breadcrumbs:after, .group:before, .group:after,
.container:before, .container:after {display: table; content: "";}
.clearfix:after, .container:after, .breadcrumbs:after, .group:after {clear: both;}.white * {color: #ffffff;}


/* 7. =========== MISCELLANEOUS =========== */
.color1 {color: #785340;}
.color2 {color: #cf6e21;}
.color3 {color: #c38501;}
.color4 {color: #827376;}

.shadow {text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);}

.alignleft {float: left; padding: 0; margin: 0;}
.alignright {float: right; padding: 0; margin: 0;}

.dropcap {overflow: hidden;}
.dropcap:first-letter {color: #785340;	display: block; float: left; font: 60px/50px Georgia, Garamond, serif;	padding: 6px 4px 8px 0;}

.bignumber {
	border-radius: 50%;
	color: #505050;
	display: block;
	float: left;
	font: normal 30px/50px 'Raleway', Garamond, Georgia, serif;
	margin: -10px 10px 5px 0;
	text-align: center;
	text-transform: uppercase;
	height: 50px;
	width: 50px;
	border: 1px #505050 solid;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.bigletters {
	font: 2.0em 'Raleway', Arial, Verdana, Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	color: #827046;
	margin: 5px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.scroll-to-top {
  	display: none;
  	position: fixed; bottom: 20px; right: 10px;
  	z-index: 5;
  	width: 30px;
  	height: 30px;
  	padding: 8px;
  	text-align:center;
  	color: #ffffff;
	text-decoration: none;
	background-color: #cf6e21;
	box-shadow: inset 0 0 10px #202020, 0 1px 1px rgba(0, 0, 0, 0.5);
	border-radius: 5px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
	border-radius: 50%;
}
.scroll-to-top:hover {
   text-decoration: none;
	background-color: #c38501;
	box-shadow: inset 0 0 15px #000000, 0 1px 1px rgba(0, 0, 0, 0.5);
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
.scroll-to-top a, 
.scroll-to-top a:hover {text-decoration: none;}

.authorDate {
	color: #333; 
	font-size: 0.95em; 
	text-transform: uppercase;
	border-bottom: 1px #333 solid; 
	font-weight: lighter; 
	letter-spacing: 2px;
	margin: 0 0 15px 0; 
	padding: 0;
}
.author {
	color: #333; 
	font-size: 0.90em; 
	letter-spacing: 1px;
	margin: 0 0 15px 0; 
	padding: 0;
	font-style:italic;
}

/* 8. ========== BUTTONS ========== */
.btn {
	border: 1px solid transparent;
	border-radius: 4px;
	display: inline-block;
	font-size: 14px;
	font-weight: normal;
	margin-bottom: 0;
	padding: 4px 12px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}
.btn-main {
	font-size: 14px;
	color: #ffffff;
	padding: 5px;
	border-radius: 5px;
	background: #785340;
	text-decoration: none;
	font-weight: normal;
	background-color: #666;
	background: linear-gradient(#666, #222); 
	border: solid 1px #222;
	border-radius: 5px;
	box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.5);
}
.btn-main:hover {
	color: #fff;
	text-decoration: none;
	padding: 5px;
	font-weight: normal;
	background: linear-gradient(#785340, #c38501); 
	border: solid 1px #785340;
	box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.5);
}
.btn-main a {
	color: #ffffff;
	text-decoration: none;
	font-weight: bold;
	outline: none;
}
.btn-main a:hover {
	color: #000;
	text-decoration: none;
	font-weight: bold;
	outline: none;
}
.btn-lg {
	font-size: 24px;
	color: #ffffff;
	line-height:50px;
	padding: 20px 60px;
	border-radius: 5px;
	background: #9e5219; 
	text-decoration: none;
	font-weight: normal;
	border: solid 1px #ffffff;
	border-radius: 5px;
	box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.5);
}
.btn-lg:hover {
	color: #ffffff;
	background: #b5a275;
	text-decoration: none;
	padding: 20px 60px;
	font-weight: normal;
	border: solid 1px #ffffff;
	box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.5);
}
.btn-lg a {
	color: #ffffff;
	text-decoration: none;
	font-weight: normal;
	outline: none;
}
.btn-lg a:hover {
	color: #ffffff;
	text-decoration: none;
	font-weight: normal;
	outline: none;
}

/* 9. ======== FONT ICON STYLES ======== */
.icon-shadow {text-shadow: 1px 2px 3px rgba(0,0,0,0.3);}
.icon-logo {font-size: 140%; display: inline-block;}
.icon-left {margin: 5px 10px 0 0; float: left;}
.icon-right {margin: 5px 0 0 10px; float: right;}
.icon-circle {width: 120px; height: 120px; color: #ffffff; background-color: #b5a275; border-radius: 50%; line-height: 120px; box-shadow: 0 0 0 4px #9e5219 inset, 0 0 0 5px rgba(255, 255, 255, 0.5) inset;}

/* ============================== */
/* 10. ======== LAYOUT RULES ======== */
.container {
	width: 1200px;
	margin: 0 auto;
	padding: 10px;
	text-align: left;
}
.inside {width: 96%;	padding: 0 2%;}
.row1, .row2, .row3 {width: 100%;}

/* ======== Row 1 is the dark area used as the header and footer backgrounds ======== */
.row1 {
	width: 100%;
	background: #202020 url('../images/background.jpg');
	color: #ffffff;
	border-top: 5px solid #cf6e21;
	border-bottom: 1px solid #cf6e21;
}
/* ======== Top Section Boxes ======== */
#topsection {
    width: 90%;
    padding: 50px 0;
    margin: 0 auto 20px auto;
    text-align: center;
}
#mainimage1block, #mainimage2block, #mainimage3block {
	float: left;
  	width: 33.3%;
  	max-height: 300px;
  	text-align: center;
}
#mainimage1block img  {
	border: 6px #f0f0f0 solid;
  	width: 95%;
  	height: auto;
	transform: rotate(-9deg);
	box-shadow: 0 0 10px #333;
}
#mainimage2block img {
	border: 6px #f0f0f0 solid;
  	width: 95%;
  	height: auto;
	box-shadow: 0 0 10px #333;
}
#mainimage3block img {
  	border: 6px #f0f0f0 solid;
  	width: 95%;
  	height: auto;
	transform: rotate(9deg);
	box-shadow: 0 0 10px #333;
}

/* 11. ======== HEADER AREA ======== */
header {
	width: 100%;	
	margin: 0;
	padding: 0;
}
/* 12. ======== LOGO/SITE NAME & ADDRESS AREA ======== */
#nameplate {
	float: left;
	width: 68%;
	text-align: left;
	padding: 5px 0 13px 0;
}
.brand, 
.brand a, 
.brand a:hover  {
	font: 42px 'Poiret One', Verdana, Helvetica, sans-serif;
	color: #fff;
	letter-spacing: -1px;
	text-decoration: none;
	margin: 0; 
	padding: 0;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.slogan {
	font-size: 18px;
	font-family: 'Poiret One', cursive, Verdana, Helvetica, sans-serif;
	color: #fff;
	padding: 0 0 10px 0;
	margin: 0;
	text-align: left;
	text-shadow: 1px 2px 2px rgba(0,0,0,0.5);
}
.address {
	float: right;
	width: 28%;
	text-align: right;
	font-size: 18px;
	font-family: 'Poiret One', cursive, Verdana, Helvetica, sans-serif;
	color: #fff;
}
/* 13. ======== MAIN NAVIGATION AREA ======== */
nav {
	margin: 0 auto; 
	padding: 0 0 0 40px;
   list-style: none;
   height: 42px;
   color: #777;
   box-sizing: border-box;
   text-transform: uppercase;
}
/* === NON-MOBILE TOP LEVEL === */
ul.slimmenu {text-align: center;}
ul.slimmenu li {}
ul.slimmenu > li {margin-right: -4px; border-left: 1px solid rgba(0, 0, 0, 0.05);}
ul.slimmenu li a {color: #777;}
ul.slimmenu li a:hover {color: #555; background: #e0e0e0;}
ul.slimmenu li .sub-collapser > i {color: #785340; /* arrow color */  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);}

/* === NON-MOBILE SUB LEVELS === */
ul.slimmenu li ul li .sub-collapser > i {color: #cf6e21; /* arrow color */}
ul.slimmenu li ul li {width: 140px; background-color: #e0e0e0; text-align: center;}
ul.slimmenu li ul li a {color: #555;}
ul.slimmenu li ul li a:hover {color: #fff; background-color: #c2c2c2;}
ul.slimmenu li ul li ul li{background-color: #c2c2c2; text-align: center;}

/* === FOR MOBILE === */
.menu-collapser {border-radius: 0; color: #777;}
.collapse-button {background-color: #555; box-shadow: 0 0 8px #000 inset; border: 1px solid rgba(255, 255, 255, 0.2);}
.collapse-button:hover, .collapse-button:focus {background-color: #cf6e21; box-shadow: 0 0 8px #785340 inset;}

/* === MOBILE TOP LEVEL === */
ul.slimmenu.collapsed li {background: #c0c0c0;}
ul.slimmenu.collapsed li a {color: #000;}
ul.slimmenu.collapsed li a:hover {color: #fff; background: #555;}
ul.slimmenu.collapsed li .sub-collapser > i {color: #cf6e21; /* arrow color */}

/* === MOBILE SUB LEVELS === */
ul.slimmenu.collapsed li ul li {background: #b1b1b1;}
ul.slimmenu.collapsed li ul li a {color: #000;}
ul.slimmenu.collapsed li ul li a:hover {color: #fff; background: #555;}
ul.slimmenu.collapsed li ul li ul li {background-color: #404040;}
ul.slimmenu.collapsed li ul li ul li a {color: #fff;}
ul.slimmenu.collapsed li ul li ul li a:hover {color: #fff;}

/* === edit with caution === */
ul.slimmenu {list-style-type: none; margin: 0; padding: 0; width: 100%; text-align: left; font-size: 0.90em;}
ul.slimmenu li {position: relative; display: inline-block; text-align: left;}
ul.slimmenu > li:first-child {border-left: 0;}
ul.slimmenu > li:last-child {margin-right: 0;}
ul.slimmenu li ul li:last-of-type {border-bottom: none;}
ul.slimmenu li ul {margin: 0; list-style-type: none; text-transform: none;}
ul.slimmenu li .sub-collapser {position: absolute; right: 0; top: 0; width: 30px; height: 100%; text-align: left; z-index: 999; cursor: pointer;}
ul.slimmenu li .sub-collapser:before {content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: 0;}
ul.slimmenu li .sub-collapser > i,
ul.slimmenu li ul li .sub-collapser > i {font-size: 14px; display: inline-block; vertical-align: middle;}
ul.slimmenu li > ul {display: none; position: absolute; left: 0; top: 100%; z-index: 999; padding-left: 0; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);}
ul.slimmenu li > ul > li ul {display: none; position: absolute; left: 100%; top: 0; z-index: 999; width: 100%; white-space: normal; padding-left: 0;}
ul.slimmenu li a {font-size: 14px; font-weight: normal; display: block; padding: 12px 30px 12px 15px; font-family: 'Open Sans', sans-serif; transition: background-color 0.2s ease-out;}
ul.slimmenu li a:hover,
ul.slimmenu li ul li a:hover {text-decoration: none;}
.menu-collapser {width: 96%; margin: 0 2%; position: relative; text-align: left; height: 42px; line-height: 42px; font-size: 18px; padding: 0 8px; box-sizing: border-box;}
.collapse-button {position: absolute; right: 8px; top: 50%; width: 40px; background-repeat: repeat-x; border-radius: 4px; color: #ffffff; padding: 7px 10px; cursor: pointer; 
            font-size: 14px; text-align: center; transform: translate(0, -50%); box-sizing: border-box;}
.collapse-button .icon-bar {background-color: #ffffff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); border-radius: 1px 1px 1px 1px; display: block; height: 2px; width: 18px; margin: 2px 0;}
ul.slimmenu.collapsed {list-style-type: none; margin: 0 1%; padding: 0; width: 98%; text-align: left;}
ul.slimmenu.collapsed li {border-left: none; display: block; width: 100%; box-sizing: border-box; z-index: 999; text-align: left;}
ul.slimmenu.collapsed li .sub-collapser {position: absolute; right: 0; top: 0; width: 40px; height: 48px; text-align: center; z-index: 999; cursor: pointer;}
ul.slimmenu.collapsed li .sub-collapser > i {font-size: 18px; display: inline-block; vertical-align: middle;}
ul.slimmenu.collapsed li ul li ul {display: none; position: relative; left: 0; top: 0; z-index: 999; width: 100%; white-space: normal; padding-left: 0;}
ul.slimmenu.collapsed li > ul {display: none; position: relative; width: 100%; box-shadow: none;}
ul.slimmenu.collapsed li a {display: block; box-sizing: border-box;}
ul.slimmenu.collapsed li ul li {display: block; width: 100%; box-sizing: border-box; z-index: 999; text-align: left; border-bottom: 0;}
ul.slimmenu.collapsed li ul li a {padding-left: 30px; display: block; box-sizing: border-box;}
ul.slimmenu.collapsed li ul li ul li {display: block; width: 100%; box-sizing: border-box; z-index: 999; text-align: left;}
ul.slimmenu.collapsed li ul li ul li a {padding-left: 30px;}
/* hides arrows on non-mobile menu */
ul.slimmenu li .sub-collapser {visibility: hidden; position: absolute; right: 0; top: 0; width: 0; height: 100%; text-align: center; z-index: 999; cursor: pointer;}
ul.slimmenu li a {font-size: 14px; font-weight: normal; display: block; padding: 12px 15px 12px 15px; font-family: 'Open Sans', sans-serif; transition: background-color 0.2s ease-out;}
ul.slimmenu.collapsed li .sub-collapser {visibility: visible;}

/* 14. ======== SECTION BLOCKS ======== */
.topcontentBox2a {float: left; width: 48%; padding: 0; margin: 0 2% 0 0;}
.topcontentBox2b {float: left; width: 48%; padding: 0; margin: 0 0 0 2%;}

.contentBox2a {float: left; width: 48%; padding: 0; margin: 0 2% 0 0;}
.contentBox2b {float: left; width: 48%; padding: 0; margin: 0 0 0 2%;}

.contentBox3a {float: left; width: 31.33333%; padding: 0; margin: 0 2% 5px 0;}
.contentBox3b {float: left; width: 31.33333%; padding: 0; margin: 0 1% 5px 1%;}
.contentBox3c {float: left; width: 31.33333%; padding: 0; margin: 0 0 5px 2%;}

.contentBox4a {float: left; width: 23.5%; padding: 0; margin: 0 1% 0 0;}
.contentBox4b, .contentBox4c {float: left; width: 23.5%; padding: 0; margin: 0 1% 0 1%;}
.contentBox4d {float: left; width: 23.5%; padding: 0; margin: 0 0 0 1%;}

.sidebarLeft {float: left; width: 31.3333%; padding: 0; margin: 0 2% 0 0;}
.contentRight {float: right; width: 64.666%; padding: 0; margin: 0 0 0 2%;}

.sidebarRight {float: right; width: 31.3333%; padding: 0; margin: 0 0 0 2%;}
.contentLeft {float: left; width: 64.666%; padding: 0; margin: 0 2% 0 0;}

.contentBox75left  {float: left; width: 73%; padding: 0; margin: 0 2% 0 0;}
.contentBox75right {float: left; width: 73%; padding: 0; margin: 0 0 0 2%;}

.group {padding: 0; margin-bottom: 10px; clear: both;}

.googlemaps {
    position: relative;
    padding-bottom: 50%; 
    height: 0;
    overflow: hidden;
    background-color: #ccc;
}
.googlemaps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* ============================= */
/* 15. ======== FOOTER AREA ======== */
footer {
	clear: both;
	width: 100%;
	margin: 0 auto;
	color: #ffffff;
	line-height: 1.4em;
	padding: 10px 0 0 0;
}
footer h3 {
	font: 26px 'Jura', Verdana, Helvetica, sans-serif;
	text-align:center;
	border-top: none;
	border-bottom: 1px solid #fff;
}
footer a {color: #eee6ed;}
footer a:hover {color: #ccc;}
footer ul {
	list-style-type: none; 
	line-height: normal; 
	margin: 0 0 10px 0; 
	padding: 0;
}
footer ul li {
	margin: 0 20px 0 0; 
	background: url(../images/bullet03.png) no-repeat 0 7px; 
	padding: 4px 0 2px 20px;
}
footer ul li a {
	color: #eee6ed; 
	text-decoration: none; 
	font-weight: normal; 
	letter-spacing: 2px;
}
footer ul li a:hover {color: #ccc; }
footer hr {
	background-color: rgba(0, 0, 0, 0.3); 
	border: none; 
	color: #fff; 
	height: 1px; 
	display: block; margin: 20px 0;
}
.copyright {
	letter-spacing: 3px; 
	text-align: center; 
	color: #fff; 
	font-size: 0.85em; 
	margin: 0; 
	padding:0;
}
footer .comment:before, footer .home:before, footer .hours:before, footer .email:before, footer .phone:before {color: #c38501;}

/* 16. ======== CONTACT FORM ======== */

/* 17. ======== IMAGE STYLES ======== */
img {border: none; max-width: 100%; box-sizing: border-box;}
.img-border {margin: 5px 10px 0 0; float: left; border: 1px #777 solid;}
.img-catalog {border: 1px #d0d0d0 solid; padding: 1%; margin: 1% 2%;	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);}
.img-curved {border-radius: 10px; margin: 4px 2px; border: 1px #444 solid;	box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-right {margin: 5px 0 0 10px; float: right;}
.img-right {margin: 5px 0 0 10px; float: right;}
.img-left {margin: 5px 10px 0 0; float: left;}
.img-round {border-radius: 50%; border: 1px #ffffff solid; background-color: #ffffff; padding: 3px; border: 1px #c0c0c0 solid;}
/* 18. ======= ACCORDION CONTENT ======== */
/* 19. ======= TICKER ======== */
#ticker {	
	list-style: none outside none; 
	margin: 0; 
}
#ticker li {
	margin: 0; 
	background: none; 
	padding: 0;
}
#ticker p {
	color: #404040;
	padding-left: 20px;
	margin-top: 0; 
	padding-top: 0;
}
#ticker .tcontent {
	color: #404040; 
	padding: 15px; 
}
#ticker .author {
	color: #777; 
	text-align: right; 
	font-size: 0.90em; 
	font-style: italic; 
	letter-spacing: 2px;
	padding: 10px 10px 20px 0;
}
.testimonial {
	position: relative;
	color: #404040;
}
.testimonial::before {
	position: absolute;
	color: #777;
	font-family: 'FontAwesome';
	font-size: 24px; 
	content: "\f073"; top: 20px; left: 0;
	text-shadow: 1px 2px 3px rgba(0,0,0,0.3);
}

/* 20================================ MEDIA QUERIES =============================== */
/* ========================================================== */
/* ====================== SMALL DEVICE 01 ==================== */
/* ========================================================== */
@media screen and (max-width: 320px) {
.container {width: 90%; margin: 0 auto;}
.row1 {width: 100%;}
.infoline {width: 98%; margin-bottom: 10px;}
#address {float: none; margin: 0 auto; width: 98%; text-align:left;}
#nameplate {float: none; width: 98%; margin: 0 auto; text-align: center; padding: 10px 0 10px 0;}
.brand, .brand a, .brand a:hover  {font: 28px 'Poiret One', Verdana, Helvetica, sans-serif; margin-top: 0;}
.slogan {font-size: 14px; padding: 0 0 20px 0;}
nav {float: none; margin: 0;}

/* === content box coding ==== */
.sidebarLeft, .sidebarRight, .contentRight, .contentLeft, .contentMiddle {width: 98%; margin: 1%; padding: 0;}
.topcontentBox2a, .topcontentBox2b  {width: 98%; margin: 1%; padding: 0;}
.contentBox2a, .contentBox2b, 
.contentBox3a, .contentBox3b, .contentBox3c, 
.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 98%; margin: 1%; padding: 0;}
/* === miscellaneous coding ==== */
h1 {font-size: 1.9em; margin-top: 0;}
h2 {font-size: 1.5em;}
}
/* ========================================================== */
/* ===================== SMALL DEVICE 02 ==================== */
/* ========================================================== */
@media screen and (min-width: 321px) and (max-width: 480px) {
.container {width: 95%; margin: 0 auto;}
.row1 {width: 100%;}
.infoline {width: 98%; margin-bottom: 10px;}
#address {float: none; margin: 0 auto; width: 98%; text-align:left;}
#nameplate {float: none; width: 98%; margin: 0 auto; text-align: center; padding: 10px 0 10px 0;}
nav {float: none; margin: 0;}
/* === content box coding ==== */
.sidebarLeft, .sidebarRight, .contentRight, .contentLeft {width: 98%; margin: 1%; padding: 0;}
.topcontentBox2a, .topcontentBox2b  {width: 98%; margin: 1%; padding: 0;}
.contentBox2a, .contentBox2b, 
.contentBox3a, .contentBox3b, .contentBox3c, 
.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 98%; margin: 1%; padding: 0;}
/* === miscellaneous coding ==== */
}
/* ========================================================== */
/* ================== SMALL DEVICE 03 ================= */
/* ========================================================== */
@media screen and (min-width: 481px) and (max-width: 623px) {
.container {width: 96%; margin: 0 auto;}
.infoline {width: 98%; margin-bottom: 10px;}
#address {float: none; margin: 0 auto; width: 98%; text-align:left;}
#nameplate {float: none; width: 98%; margin: 0 auto; text-align: center; padding: 10px 0 10px 0;}
nav {float: none; margin: 0;}
.menu-collapser {width: 80%; margin: 0 10%;}
ul.slimmenu.collapsed {width: 80%; margin: 0 10%;}
/* === content box coding ==== */
.sidebarLeft, .sidebarRight, .contentRight, .contentLeft {width: 98%; margin: 1%; padding: 0;}
.topcontentBox2a, .topcontentBox2b  {width: 98%; margin: 1%; padding: 0;}
.contentBox2a, .contentBox2b, 
.contentBox3a, .contentBox3b, .contentBox3c, 
.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 98%; margin: 1%; padding: 0;}/* === miscellaneous coding ==== */
.contentBox75left {float: none; width: 90%; margin: 0 auto;}
.contentBox75right {float: none; width: 90%; margin: 0 auto;}
/* === miscellaneous coding ==== */
}
/* ========================================================== */
/* ================== MID DEVICE 01 ================= */
/* ========================================================== */
@media screen and (min-width: 624px) and (max-width: 669px) {
.container {width: 97%; margin: 0 auto;}
.infoline {width: 98%; margin-bottom: 10px;}
#address {float: none; margin: 0 auto; width: 98%; text-align:left;}
#nameplate {float: none; width: 98%; margin: 0 auto; text-align: center; padding: 10px 0 10px 0;}
nav {float: none; margin: 0;}
.menu-collapser {width: 80%; margin: 0 10%;}
ul.slimmenu.collapsed {width: 80%; margin: 0 10%;}
/* === content box coding ==== */
.sidebarLeft, .sidebarRight, .contentRight, .contentLeft {width: 98%; margin: 1%; padding: 0;}
.topcontentBox2a, .topcontentBox2b  {width: 98%; margin: 1%; padding: 0;}
.contentBox2a, .contentBox2b, 
.contentBox3a, .contentBox3b, .contentBox3c, 
.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 98%; margin: 1%; padding: 0;}/* === miscellaneous coding ==== */
img {max-width: 98%;}
}
/* ========================================================== */
/* ================== MID DEVICE 02 ================ */
/* ========================================================== */
@media screen and (min-width: 670px) and (max-width: 768px) {
.container {width: 97%; margin: 0 auto;}
.infoline {width: 60%;}
#address {width: 35%;}
#nameplate {float: none; width: 96%; margin: 0 auto; text-align: center; padding: 20px 0 10px 0;}
nav {float: none; margin: 0;}
ul.slimmenu {text-align: center;}

/* === content box coding ==== */
.sidebarLeft, .sidebarRight, .contentRight, .contentLeft {width: 98%; margin: 1%; padding: 0;}
.contentBox2a, .contentBox2b, 
.contentBox3a, .contentBox3b, .contentBox3c {width: 98%; margin: 1%; padding: 0;}
.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 48%; margin: 1%; padding: 0;}
/* === miscellaneous coding ==== */
}
/* ========================================================== */
/* ================== MID DEVICE 03 ================= */
/* ========================================================== */
@media screen and (min-width: 769px) and (max-width: 800px) {
.container {width: 97%; margin: 0 auto;}
.infoline {width: 60%;}
#address {width: 35%;}
#nameplate {float: none; width: 96%; margin: 0 auto; text-align: center; padding: 20px 0 10px 0;}
nav {float: none; margin: 1%; }
ul.slimmenu {text-align: center;}

/* === content box coding ==== */
.topcontentBox2a, .topcontentBox2b  {width: 98%; margin: 1%; padding: 0;}
.contentBox3a, .contentBox3b, .contentBox3c {width: 98%; margin: 1%; padding: 0;}
.contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 48%; margin: 1%; padding: 0;}
.sidebarLeft, .sidebarRight {width: 98%; margin: 1%; padding: 0;}
.contentRight, .contentLeft {width: 98%; margin: 1%; padding: 0;}
.contentBox75left {float: none; width: 90%; margin: 0 auto;}
.contentBox75right {float: none; width: 90%; margin: 0 auto;}
/* === miscellaneous coding ==== */
}
/* ========================================================== */
/* ================== LG DEVICE 01 ================= */
/* ========================================================== */
@media screen and (min-width: 801px) and (max-width: 1024px) {
.container {width: 97%; margin: 0 auto;}
nav {float: none; margin: 0;}
ul.slimmenu {text-align: left;}
/* === miscellaneous coding ==== */
}
/* ========================================================== */
/* ================== LG DEVICE 02 ================= */
/* ========================================================== */
@media screen and (min-width: 1025px) and (max-width: 1199px) {
.container {width: 97%; margin: 0 auto;}
ul.slimmenu {text-align: left;}
}
/*21.======== PHOTO GALLERY ========= */
.photogallery {  
  background-color: #f2f2f2;
  border: 15px #ffffff solid;
  padding: 20px;
  margin: 0 1% 40px 1%;
  box-shadow: 0 5px 15px -4px rgba(0, 0, 0, 0.8);  
}
.photogallery img {
  background-color: #ffffff;
  padding: 7px;
  border: 1px #c0c0c0 solid;
  margin: 3px 3px 12px 3px;  
  box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.8);
}
.photogallery p {
  text-align: center;
}
.photogallery-alt {  
  background-color: #f2f2f2;
  border: 15px #ffffff solid;
  padding: 20px;
  margin: 0 1% 40px 1%;
  box-shadow: 0 5px 15px -4px rgba(0, 0, 0, 0.8);  
}
.photogallery-alt img {
  background-color: #ffffff;
  padding: 7px;
  border: 1px #c0c0c0 solid;
  margin: 3px 3px 12px 3px;  
  box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.8);
}
/*22.======== ColorBox ========= */
.colorbox {
    width: 94%;
    padding: 20px 3%;
    margin: 20px 0;
	background-color: #cf6e21;
	color: #ffffff;
	box-shadow: 0 0 0 5px #cf6e21 inset, 0 0 0 6px rgba(255, 255, 255, 0.6) inset, 0 0 40px #785340 inset, 0 10px 15px -10px rgba(0,0,0,0.6);
	border-radius: 8px;
	text-align: center;
}
.colorbox h3 {
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
    border-top: transparent;
}
.colorbox a {
	color: #ffffff;
	font-weight: normal;
	text-decoration: underline;
	outline: none;
}
.colorbox a:hover {
	color: #ffffff;
	text-decoration: underline;
	font-weight: normal;
	outline: none;
}

/* 23. ================================================= ACCORDION CONTENT ==========================================================18. */
#acc dl {
	position: relative;
	width: 100%;
	color: #000;
	padding: 0;
	margin: 0 auto;
}
#acc dt {
	margin: 0 0 1px 0;
	padding: 4px 4px 4px 20px;
	text-align: left;
	font: 26px 'Poiret One', Verdana, Helvetica, sans-serif;
	letter-spacing: 1px;
	color: #fff;
	cursor: pointer;
	background: #cf6e21;
	border-radius: 4px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}
#acc dt:hover {
	color: #000;
	background: #d6a47c;
	box-shadow: 0 0 15px #222 inset;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
	transition: all 0.4s ease 0.0s;
	-webkit-transition: all 0.4s ease 0.0s;
}
#acc dd {
	width: 94%;
	padding: 5px 2%;
	margin: 0 auto;
	border-top: none;
}

