/*  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
*/
/* ========================================================= */
/* 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: underline;
	outline: none;
}
a:hover {
	color: #c38501;
	text-decoration: underline;
	font-weight: normal;
	outline: none;
}
h1 {
	font: 36px '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;
}
/* 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;
}
.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);
}

/* 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;}

/* 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 0 0;}

.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;
}

/* 9. ======== FONT ICON STYLES ======== */
.icon-shadow {text-shadow: 1px 2px 3px rgba(0,0,0,0.3);}

/* ============================== */
/* 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;
}
#address {
	float: right;
	width: 20%;
	text-align: right;
	margin-bottom: 5px;
}
#address p {
	font: 16px 'Poiret One', cursive, Verdana, Helvetica, sans-serif;
	font-weight: bold;
	color: #ffffff;
	letter-spacing: 1px;
	margin: .3em 0 0 0;
}
/* 12. ======== LOGO/SITE NAME AREA ======== */
#logo {
	width: 98%;
	padding: 0 0 10px 0;
}
.brand, .brand a, .brand a:hover  {
	font: 40px 'Poiret One', Verdana, Helvetica, sans-serif;
	color: #785340;
	letter-spacing: -1px;
	text-decoration: none;
	margin: 0; 
	padding: 0;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);	
}
.slogan {
	font-size: 20px;
	font-family: 'Poiret One', cursive, Verdana, Helvetica, sans-serif;
	color: #cf6e21;
	padding: 0;
	margin: 0 0 0 80px;
	text-shadow: 1px 2px 2px rgba(0,0,0,0.5);
}	

/* 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 ======== */
.topcontentBox2 {float: left; width: 48%; padding: 0; margin: 0 1% 10px 1%;}
.contentBox2 {float: left; width: 48%; padding: 0; margin: 0 1% 10px 1%;}
.contentBox3 {float: left; width: 31.33333%; padding: 0; margin: 0 1% 10px 1%;}
.contentBox4 {float: left; width: 23%; padding: 0; margin: 0 1% 10px 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;}

/* ============================= */
/* 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;
}
.fBox4 {
	float: left; 
	width: 23%; 
	padding: 0; 
	margin: 0 1% 0 1%;
}
footer a {color: #eee6ed; text-decoration: underline;}
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;}

/* 18. ======= ACCORDION CONTENT ======== */
/* 19. ======= TICKER ======== */

/* 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;}
.topcontentBox2 {width: 96%; margin: 1%; padding: 0 0 10px 0;}
.contentBox2 {width: 96%; margin: 1%; padding: 0 0 10px 0;}
.contentBox3 {width: 96%; margin: 1%; padding: 1%;}
.contentBox4 {width: 94%; margin: 1%; padding: 2%;}
.fBox4 {float: none; width: 94%; padding: 5px; margin: 0 2%;}
/* === 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;}
.topcontentBox2 {width: 96%; margin: 1%; padding: 0 0 10px 0;}
.contentBox2 {width: 96%; margin: 1%; padding: 1%;}
.contentBox3 {width: 96%; margin: 1%; padding: 1%;}
.contentBox4 {width: 92%; margin: 1%; padding: 3%; float: none;}
.fBox4 {float: none; width: 94%; padding: 5px; margin: 0 2%;}
/* === 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;}
.topcontentBox2 {width: 98%; margin: 1%; padding: 0;}
.contentBox2 {width: 98%; margin: 1%; padding: 0;}
.contentBox3 {width: 96%; margin: 1%; padding: 0;}
.contentBox4 {width: 44%; padding: 0 1%; margin: 1%;}
.fBox4 {width: 44%;	padding: 0; margin: 0 0 0 2%;}
.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;}
.topcontentBox2 {width: 98%; margin: 1%; padding: 0;}
.contentBox2 {width: 98%; margin: 1%; padding: 0;}
.contentBox3 {width: 98%; margin: 1%; padding: 0;}
.contentBox4 {width: 43%;	padding: 0 2%; margin: 1%;}
.fBox4 {width: 44%; padding: 0; margin: 0 0 0 2%;}
/* === 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;}
.topcontentBox2 {width: 98%; margin: 1%; padding: 0;}
.contentBox2 {width: 46%; margin: 1%; padding: 0;}
.contentBox3 {width: 98%; margin: 1%; padding: 0;}
.contentBox4 {width: 43%;	padding: 0 2%; margin: 1%;}
.fBox4 {width: 44%; padding: 0; margin: 0 0 0 2%;}
/* === 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 ==== */
.topcontentBox2 {width: 98%; margin: 1%; padding: 0;}
.contentBox2 {width: 46%; margin: 1%; padding: 0;}
.contentBox3 {width: 31%; margin: 1%; padding: 0;}
.contentBox4 {width: 43%;	padding: 0 2%; margin: 1%;}
.fBox4 {width: 44%; padding: 0; margin: 0 0 0 2%;}
/* === 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;}
/* === content box coding ==== */
.sidebarLeft, .sidebarRight {width: 30%; margin: 1%; padding: 0;}
.contentRight, .contentLeft {width: 65%; margin: 1%; padding: 0;}
.contentBox4 {width: 22%;	padding: 0; margin: 1%;}
.fBox4 {width: 44%; padding: 0; margin: 0 0 0 2%;}
/* === 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;}
}