/*  Designed by  
 *	           

Main Colors used in this template
#002e5f-dark color
#004288-medium color
#005fc4-light color
#b7d4f3-lightest color
#a38fc4-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 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: #002e5f; 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: #004288;
	font-weight: normal;
	text-decoration: none;
	outline: none;
}
a:hover {
	color: #005fc4;
	text-decoration: underline;
	font-weight: normal;
	outline: none;
}
h1 {
	font: 48px 'Poiret One', Verdana, Helvetica, sans-serif;
	color: #002e5f;
	margin: .3em 0 .3em 0;
	letter-spacing: -1px;
}
h2 {
	font: 34px 'Poiret One', Arial, Verdana, Helvetica, sans-serif;
	color: #004288;
	margin: .3em 0;
	letter-spacing: 1px;
	text-align: center;
   	overflow: hidden;}
h2:before,
h2:after {
    border-bottom: 1px solid #004288;
    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: #004288;
	padding: 0;
	text-transform: uppercase;
	letter-spacing: -1px;
	margin: 30px 0 25px 0;
	padding: 5px 0;
	border-bottom: 1px solid #004288;
}
h4 {
	font: normal 28px 'Jura', Verdana, Helvetica, sans-serif;
	color: #404040;
	margin: .3em 0;
}
h5 {
	font: normal 24px 'Raleway', Verdana, Helvetica, sans-serif;
	color: #005fc4;
	margin: .3em 0;
}
h6 {
	font: normal 20px 'Raleway',Verdana, Helvetica, sans-serif;
	color: #004288;
	margin: .3em 0;
}
/* Classes of Heading Fonts */
.h1 {
	font: 52px 'Poiret One', Verdana, Helvetica, sans-serif;
	color: #002e5f;
	margin: 0 0 .3em 0;
	letter-spacing: -1px;
	text-align: center;
}
.h2 {
	font: 34px 'Poiret One', Arial, Verdana, Helvetica, sans-serif;
	color: #004288;
	margin: .3em 0;
	letter-spacing: 1px;
	text-align: center;
   	overflow: hidden;}
.h2:before,
.h2:after {
    border-bottom: 1px solid #004288;
    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: #004288;
	padding: 0;
	text-transform: uppercase;
	letter-spacing: -1px;
	margin: 30px 0 25px 0;
	padding: 5px 0;
	border-bottom: 1px solid #004288;
}
.alternate {
	font: 28px 'Poiret One', Arial, Verdana, Helvetica, sans-serif;
	color: #005fc4;
	margin: .3em 0;
	text-align: center;
}
.alternate:before {
	content: "\2724";
  	display: inline;
  	font-size: 28px;
  	margin-right: 5px;
  	padding-bottom: 10px;
  	color: #005fc4;
  	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	border-bottom: none;
}
.alternate:after {
	content: "\2724";
  	display: inline;
  	font-size: 28px;
  	color: #005fc4;
  	padding-bottom: 10px;
  	margin-left: 5px;
  	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	border-bottom: none;
}
.alternate2 {
	font: 24px 'Poiret One', Arial, Verdana, Helvetica, sans-serif;
	color: #004288;
	margin: .3em 0;
	text-align: center;
	text-transform:uppercase;
}
.alternate2:before {
	font-family: 'FontAwesome'; 
	content: "\f006";
  	display: inline;
  	font-size: 16px;
  	margin-right: 5px;
  	padding-bottom: 10px;
  	color: #004288;
  	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	border-bottom: none;
}
.alternate2:after {
	font-family: 'FontAwesome'; 
	content: "\f006";
  	display: inline;
  	font-size: 16px;
  	color: #004288;
  	margin-left: 5px;
  	padding-bottom: 10px;
  	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	border-bottom: 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: #004288; 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: #002e5f; height: 1px; clear: both;}
hr.fancy {padding: 0; border: none; border-top: 1px solid #002e5f; color: #002e5f; text-align: center; margin: 30px 0; clear: both;}
hr.fancy:after {
	font-family: 'FontAwesome'; 
	content: "\f006  \f006  \f006"; 
	display: inline-block; position: relative; top: -0.8em; font-size: 1.0em; padding: 0 0.50em;	color: #004288; 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;}
.clear {clear: both;}

/* 7. =========== MISCELLANEOUS =========== */
.color1 {color: #002e5f;}
.color2 {color: #004288;}
.color3 {color: #005fc4;}
.color4 {color: #a38fc4;}

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

.socialmedia {text-align: left; letter-spacing: 4px;}

.breadcrumbs {color: #000; text-transform: uppercase; margin: 0; padding: 0; border-bottom: 1px dashed #aaa; font-size: 0.85em; position: relative;}
.breadcrumbs a, .breadcrumbs a:hover {font-weight: normal; text-decoration: none;}
.breadcrumbs a, .breadcrumbs a:hover {font-weight: bold; text-decoration: none;}

.dropcap {overflow: hidden;}
.dropcap:first-letter {color: #002e5f;	display: block; float: left; font: 60px/50px Georgia, Garamond, serif;	padding: 6px 4px 0 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: #002e5f;
	margin: 5px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.showcode {
	font-family: "Courier New", Courier, monospace;
	font-size: 0.9em;
	background-color: #f5f5f5;
	border-radius: 3px;
	border: 1px dotted #bbb;
	color: #0000c0;
	vertical-align: middle;
	padding: 1px 4px;
}
.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: #004288;
	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: #005fc4;
	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;}

.googlemaps {position: relative; padding-bottom: 50%; height: 0; overflow: hidden; background-color: #ccc; border: 1px solid #c0c0c0;}
.googlemaps iframe {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}

.bookmark {
	font: normal 1.6em Verdana, Helvetica, sans-serif;
	color: #fff;
	background-color: #404040;
	text-decoration: none;
	padding: 0 8px 2px 10px;
	margin: 10px 0 0 0;
	border-radius: 50%;
	border: 1px solid #ffffff;
}
.bookmark:hover {color: #ffffff; background-color: #004288; 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;
}
.highlight {
	background-color: #ffff00;
	color: #000000;
}
/* ========== Team ========== */
.team {
   margin: 65px 5px 25px 5px;
   background-color: #b7d4f3;
   border: 1px solid #b7d4f3;
   padding: 70px 5px 5px 5px;
   border-radius: 5px;
   position: relative;
}
.team p {
   margin: 0;
   text-align: center;
}
.team p.name {
   text-transform: uppercase;
   letter-spacing: 2px;
   padding: 0;
}
.team p.title {
   font-variant: small-caps;
   padding: 0 0 10px 0;
}
.team-photo {
   height: 120px;
   width: 120px;
   top: -60px;
   left: 50%;
   margin-left: -60px;
   position: absolute;
}
.team-photo img {
   border-radius: 50%;
   border: 1px solid #cad9da;
   padding: 3px;
   background-color: #fff;
}
.wow {opacity: inherit;}
/* 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: #002e5f;
	text-decoration: none;
	font-weight: normal;
	background-color: #666;
	background: linear-gradient(#002e5f, #005fc4); 
	border: solid 1px #002e5f;
	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(#666, #222); 
	border: solid 1px #222;
	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: #a38fc4; 
	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: #005fc4;
	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;
}
.btn-cart {
	position: relative;
	background-color: #002e5f;
	background: linear-gradient(#002e5f, #005fc4); 
	border-color: #005fc4;
	color: #fff;
	font-weight: normal;
	text-decoration: none;
	padding: 5px 8px 5px 30px;
	border-radius: 5px;
}
.btn-cart:before {
	position: absolute;
	font-family: 'FontAwesome';
	content: "\f07a";
	top: 5px;
	left: 10px;
}
.btn-cart:hover {
	background-color: #222;
	background: linear-gradient(#555, #222);
	border-color: #222;
	color: #fff;
	font-weight: normal;
	text-decoration: none;
}

/* 9. ======== FONT ICON STYLES ======== */
.icon-shadow {text-shadow: 1px 2px 3px rgba(0,0,0,0.3);}
.icon-large {font-size: 120%;}
.icon-xlarge {font-size: 180%;}
.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: #005fc4; border-radius: 50%; line-height: 120px; box-shadow: 0 0 0 4px #a38fc4 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 {}

/* ======== Row 1 is the colored area used as the header and footer backgrounds ======== */
.row1 {
	background-color: #002e5f;
	background: linear-gradient(#002e5f, #005fc4); 
	color: #ffffff;
	border-bottom: 1px solid #fff;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.topsection {
	position: relative;
	width: 98%;
	height: auto;
	margin: 30px auto 30px auto;
	padding:20px 30px 10px 30px;
	text-align:center;
	background: #b7d4f3 url('../images/background.png');
	box-sizing: border-box;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	border-radius: 10px;
}
.topsection:before, .topsection:after {
   z-index: -1; 
   position: absolute; 
   content: "";
   bottom: 15px;
   left: 10px;
   width: 50%; 
   top: 80%;
   max-width: 40%;
   background: rgba(0, 0, 0, 0.1); 
   box-shadow: 0 20px 10px rgba(0, 0, 0, 0.5);
   transform: rotate(-3deg);
}
.topsection:after {
   transform: rotate(3deg);
   right: 10px;
   left: auto;
}
.topsection h2 {
	font: 34px 'Poiret One', Arial, Verdana, Helvetica, sans-serif;
	color: #004288;
	margin: .3em 0;
	letter-spacing: 1px;
	text-align: center;
   	overflow: hidden;}
.topsection h2:before,
.topsection h2:after {
    border-bottom: 1px solid #004288;
    content: "";
    display: inline-block;
    height: .1em;
    position: relative;
    vertical-align: middle;
    width: 50%;
    margin-bottom: .15em;
}
.topsection h2:before {right: 0.2em; margin-left: -50%;}
.topsection h2:after {left: 0.2em; margin-right: -50%;}

.stack {
    float: right;
    width: 43%;
    margin: 2% 2% 2% 10%;
    position: relative;
    z-index: 10;
}
.stack img {
    max-width: 100%; 
    height: auto; 
    vertical-align: bottom; 
    box-sizing: border-box;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    border-radius: 50%
}
.stack:after {
    position: absolute;
    content: "";
    height: 50%;
    left: 20%;
    right: 20%;
    bottom: -26%;
    box-shadow: 0 0 10px 10px rgba(0,0,0,0.2), 0 0 40px 20px rgba(0,0,0,0.3), inset 0 0 50px 150px rgba(0,0,0,0.5);
    border-radius: 50%;
    transform: rotateX(86deg);
    z-index: -10;
}
/* ======== Parallax ======== */
section.module {
	padding-bottom: 10px;
	padding-top: 10px;
}
section.module p {
	font-family: "Playfair Display", serif;
	font-size: 36px;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
	color: #fff;
	text-align:center;
}
section.module p:first-child {
	font-size: 62px;
	letter-spacing: 3px;
}
section.module p:last-child {
  	font-size: 16px;
	letter-spacing: 1px;
}
section.module.parallax {
	height: 600px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	margin: 0 0 0 0;
	box-sizing: border-box;
}
section.module.parallax-1 {background-image: url("../images/mainimage1.jpg");}
section.module.parallax-2 {background-image: url("../images/mainimage2.jpg");}
section.module.parallax-3 {background-image: url("../images/mainimage3.jpg");}

/* ======== SLICK CAROUSEL ======== */
.slick-slider {position: relative; display: block; width: 98%; margin: 0 auto; box-sizing: border-box;}
.slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus {outline: none;}
.slick-list.dragging {cursor: pointer; cursor: hand;}
.slick-slider .slick-track, .slick-slider .slick-list {transform: translate3d(0, 0, 0);}
.slick-track {position: relative; top: 0; left: 0; display: block;}
.slick-track:before, .slick-track:after {display: table; content: '';}
.slick-track:after {clear: both;}
.slick-loading .slick-track {visibility: hidden;}
.slick-slide {display: none; float: left; height: 100%; min-height: 1px;}
[dir=rtl] .slick-slide {float: right;}
.slick-slide img {display: block;}
.slick-slide.slick-loading img {display: none;}
.slick-slide.dragging img {pointer-events: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent;}
.slick-arrow.slick-hidden {display: none;}
/* =============TNT STYLE============ */
.slick-slide img {margin: 6px; padding: 5px; background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); border-radius: 5px;}
/* Arrows */
.slick-prev, .slick-next {font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; margin-top: -10px;
    cursor: pointer; color: transparent; border: none; outline: none; background: transparent;}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {color: transparent; outline: none; background: transparent;}
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {opacity: 1;}
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {opacity: .25;}
.slick-prev:before, .slick-next:before {font-family: 'FontAwesome'; font-size: 20px; line-height: 1; opacity: .75; color: #004288;}
.slick-prev {left: -25px;}
[dir=rtl] .slick-prev {right: -25px; left: auto;}
.slick-prev:before {content: '\f0a8';}
[dir=rtl] .slick-prev:before {content: '\f0a9';}
.slick-next {right: -25px;}
[dir=rtl] .slick-next {right: auto; left: -25px;}
.slick-next:before {content: '\f0a9';}
[dir=rtl] .slick-next:before {content: '\f0a8';}
/* Dots */
.slick-slider {margin-bottom: 30px;}
.slick-dots {position: absolute; bottom: -45px; display: block; width: 100%; padding: 0; list-style: none; text-align: center;}
.slick-dots li {position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer;}
.slick-dots li button {font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent;}
.slick-dots li button:hover, .slick-dots li button:focus {outline: none;}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {opacity: 1;}
.slick-dots li button:before {font-family: 'FontAwesome'; font-size: 12px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '\f005'; text-align: center; opacity: 1.0; color: #fff;}
.slick-dots li.slick-active button:before {opacity: 1.0;  color: #005fc4;}

/* ======== Jumbobox ======== */
.jumbobox {padding-top: 10px; padding-bottom: 10px; color: #ffffff;}
.jumbobox * {color: #ffffff; border-color: #ffffff;}
.jumbobox h1 {font-size: 60px;}
.jumbobox p {padding-left: 10%; padding-right: 10%;}

/* 11. ======== HEADER AREA ======== */
header {
	margin: 0;
	padding: 0;
}
.infoline {
	color: #ffffff;
	width: 70%;
	float: left;
}
.infoline p {
	font: 30px 'Poiret One', Verdana, Helvetica, sans-serif;
	color: #ffffff;
	margin: .3em 0 0 0;
	letter-spacing: -1px;
}
#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: #ffffff;
	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: #ffffff;
	padding: 0;
	margin: 0 0 0 80px;
	text-shadow: 1px 2px 2px rgba(0,0,0,0.5);
}	

/* 13. ======== MAIN NAVIGATION AREA ======== */
nav {
	margin: 20px 20px 0 0; 
	padding: 0;
   list-style: none;
   height: 42px;
   color: #ffffff;
   box-sizing: border-box;
   float:right;
   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: #ffffff;}
ul.slimmenu li a:hover {color: #fff; background: #002e5f; border-radius: 5px 5px 0 0;}
ul.slimmenu li .sub-collapser > i {color: #fff; /* 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: #004288; /* arrow color */}
ul.slimmenu li ul li {width: 140px; background-color: #002e5f; text-align: center;}
ul.slimmenu li ul li a {color: #fff;}
ul.slimmenu li ul li a:hover {color: #fff; background-color: #004288;}
ul.slimmenu li ul li ul li{background-color: #005fc4; text-align: center;}

/* === FOR MOBILE === */
.menu-collapser {border-radius: 0; color: #fff;}
.collapse-button {background-color: #002e5f; box-shadow: 0 0 8px #000 inset; border: 1px solid rgba(255, 255, 255, 0.2);}
.collapse-button:hover, .collapse-button:focus {background-color: #004288; box-shadow: 0 0 8px #002e5f inset;}

/* === MOBILE TOP LEVEL === */
ul.slimmenu.collapsed li {background: #002e5f;}
ul.slimmenu.collapsed li a {color: #fff;}
ul.slimmenu.collapsed li a:hover {color: #fff; background: #004288;}
ul.slimmenu.collapsed li .sub-collapser > i {color: #fff; /* arrow color */}

/* === MOBILE SUB LEVELS === */
ul.slimmenu.collapsed li ul li {background: #004288;}
ul.slimmenu.collapsed li ul li a {color: #fff;}
ul.slimmenu.collapsed li ul li a:hover {color: #fff; background: #005fc4;}
ul.slimmenu.collapsed li ul li ul li {background-color: #005fc4;}
ul.slimmenu.collapsed li ul li ul li a {color: #fff;}
ul.slimmenu.collapsed li ul li ul li a:hover {color: #fff; background-color: #002e5f;}

/* === 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: 10px 0; clear: both;}

.colorbox {width: 90%; min-height: 225px; text-align: left; color: #ffffff; padding: 20px 3%; margin: 20px; background-color: #004288;
	box-shadow: 0 0 0 5px #004288 inset, 0 0 0 6px rgba(255, 255, 255, 0.6) inset, 0 0 40px #002e5f inset, 0 10px 15px -10px rgba(0,0,0,0.6);
	border-radius: 8px;}
.colorbox * {font: normal 20px 'Raleway',Verdana, Helvetica, sans-serif; color: #ffffff; margin: .3em 0;}

.callbox1 {text-align: center; padding: 2px 10px; margin: 12px 0; background-color: #005fc4; border-radius: 10px;
	box-shadow: 0 0 0 5px #005fc4 inset, 0 0 0 6px rgba(255, 255, 255, 0.6) inset, 0 0 40px #002e5f inset, 0 10px 15px -10px rgba(0,0,0,0.6);}

.callbox2 {text-align: center; padding: 10px 3%; margin: 12px 0; background-color: #999; border-radius: 10px;
	box-shadow: 0 0 0 5px #555 inset, 0 0 0 6px rgba(255, 255, 255, 0.6) inset, 0 0 40px #000000 inset, 0 10px 15px -10px rgba(0,0,0,0.6);}
.callbox1 p:first-of-type, .callbox2 p:first-of-type {font: 28px 'Poiret One', Verdana, Helvetica, sans-serif;}
.callbox2 p {font: normal 18px 'Raleway',Verdana, Helvetica, sans-serif; margin: .3em 0;}
.callbox1 * {color: #ffffff;}
.callbox2 * {color: #ffffff;}

/* ======= PHOTO GALLERY ========= */
.photogallery {
  background-color: #f2f2f2;
  border: 15px #ffffff solid;
  padding: 20px;
  margin: 0 1% 40px 1%;
  text-align: center;
  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;
}

/* ============================= */
/* 15. ======== FOOTER AREA ======== */
footer {
	clear: both;
	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: #005fc4;}

/* 16. ======== CONTACT FORM ======== */
form.contactform {width: 99%; text-align: left;}
.contactform label {
	width: 99%; 
	text-align: left; 
	font-style: italic; 
	display: block; 
	margin-bottom: 4px;
}
.contactform input {
	width: 99%; 
	border: 1px #c0c0c0 solid; 
	background-color: #efefef; 
	padding: 5px; 
	margin-bottom: 10px; color: #000000;
}
.contactform textarea {
	width: 99%; 
	border: 1px #c0c0c0 solid; 
	background-color: #efefef; 
	padding: 5px; 
	resize:none; 
	color: #000000;
}
.contactform .submit {
	width: 100px; 
	margin: 10px 0 20px 0; 
	cursor: pointer; 
	color: #444;
	font: 16px 'Poiret One', Verdana, Helvetica, sans-serif;
	font-weight: normal;
	padding: 1px 14px;
	text-decoration: none;
	background-color: #eee;
	background: linear-gradient(#eee, #ccc); 
	border: solid 1px #ccc;	
	border-radius: 5px;
	box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.8), 0 1px 1px rgba(0, 0, 0, 0.3);
}
.contactform .submit:hover {
	text-decoration: none;
	color: #eee;
	background-color: #005fc4;
	background: linear-gradient(#005fc4, #002e5f); 
	border: solid 1px #002e5f;
	border-radius: 5px;
	box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* 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-frame {background: #ffffff; border: 1px #aaa solid; padding: 3px; margin: 4px 1px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);}
.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-gallery {border: 1px #d0d0d0 solid; padding: 1%; margin: 1% 2%;}
.img-shadow {margin: 5px 0; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-round {border-radius: 50%; border: 1px #444 solid; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-small {max-width: 150px; height: auto;}

.img-right {margin: 5px 0 0 10px; float: right;}
.img-right {margin: 5px 0 0 10px; float: right;}
.img-right-shadow {margin: 5px 0 0 10px; float: right; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-rotate-right {margin: 20px; transform: rotate(4deg);}.img-right-border {margin: 5px 0 0 10px; float: right; border: 1px #777 solid;}

.img-left {margin: 5px 10px 0 0; float: left;}
.img-left-shadow {margin: 5px 10px 0 0; float: left; box-shadow: 0 10px 15px -9px rgba(0, 0, 0, 0.5);}
.img-rotate-left {margin: 20px; transform: rotate(-4deg);}

/* 18. ======= ACCORDION CONTENT ======== */
#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: #000;
	cursor: pointer;
	background: #d7d7d7;
	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: #ffffff;
	background: #005fc4;
	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;
}

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

/* ================================ MEDIA QUERIES =============================== */
/* ========================================================== */
/* ====================== SMALL DEVICE 01 ==================== */
/* ========================================================== */
@media screen and (max-width: 320px) {
	.container {width: 90%; margin: 0 auto;}
	.infoline {width: 98%; margin-bottom: 10px;}
	#address {float: none; margin: 0 auto; width: 98%; text-align:left;}
	#logo {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;}
	/* === parallax box coding ==== */
	section.module p {font-size: 24px;}
	section.module p:first-child {font-size: 50px;}
	section.module p:last-child {font-size: 18px;}
	.btn-lg {font-size: 18px; padding: 10px 30px;}
	.btn-lg:hover {font-size: 18px; padding: 10px 30px;}
	.responsive img {
	max-width: 190px;
	height: auto;
}

	/* === content box coding ==== */
	.stack {float: none; width: 90%; margin: 2% 5%;}
	.topcontentBox2a, .topcontentBox2b  {width: 98%; margin: 1%; padding: 0;}
	.contentBox2a, .contentBox2b, 
   .contentBox3a, .contentBox3b, .contentBox3c, 
   .contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 98%; 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;}
	.callbox1 p:first-of-type, 
	.callbox2 p:first-of-type {font-size: 18px;}
	/* === 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;}
	#logo {float: none; width: 98%; margin: 0 auto; text-align: center; padding: 10px 0 10px 0;}
	nav {float: none; margin: 0;}
	/* === parallax box coding ==== */
	section.module p {font-size: 24px;}
	section.module p:first-child {font-size: 50px;}
	section.module p:last-child {font-size: 18px;}
	.btn-lg {font-size: 18px; padding: 10px 30px;}
	.btn-lg:hover {font-size: 18px; padding: 10px 30px;}
	/* === content box coding ==== */
   .stack {float: none; width: 60%; margin: 2% 20%;}
   blockquote.leftside, blockquote.rightside {visibility: hidden; display: none;}
	.topcontentBox2a, .topcontentBox2b  {width: 98%; margin: 1%; padding: 0;}
   .contentBox2a, .contentBox2b, 
   .contentBox3a, .contentBox3b, .contentBox3c, 
   .contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 98%; 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;}
	.callbox1 p:first-of-type, 
	.callbox2 p:first-of-type {font-size: 18px;}
	/* === miscellaneous coding ==== */
	.bigletters {font: 2.2em 'Raleway', Arial, Verdana, Helvetica, sans-serif; font-weight: bold; text-transform:uppercase; text-align: center; color: #002e5f; margin: 5px; text-shadow: 1px 1px 1px rgba(0,0,0,0.5);}
	.lgproduct-image {width: 75%; margin: 1%; padding: 0;}
	.lgproduct-text {width: 98%; margin: 1%; padding: 0;}
	.img-catalog { width: 96%;}
}
/* ========================================================== */
/* ================== 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;}
	#logo {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%;}
	/* === parallax box coding ==== */
	section.module p {font-size: 24px;}
	section.module p:first-child {font-size: 50px;}
	section.module p:last-child {font-size: 18px;}
	section.module.parallax {height: auto;}
	.btn-lg {font-size: 18px; padding: 10px 30px;}
	.btn-lg:hover {font-size: 18px; padding: 10px 30px;}

	/* === content box coding ==== */
	blockquote.leftside, blockquote.rightside {visibility: hidden; display: none;}
	.topcontentBox2a, .topcontentBox2b  {width: 98%; margin: 1%; padding: 0;}
   .contentBox2a, .contentBox2b, 
   .contentBox3a, .contentBox3b, .contentBox3c, 
   .contentBox4a, .contentBox4b, .contentBox4c, .contentBox4d {width: 98%; 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 ==== */
	.lgproduct-image {width: 60%; margin: 1%; padding: 0; text-align: center;}
	img {max-width: 98%;}
	.lgproduct-text {width: 98%; margin: 1%; padding: 0;}
}
/* ========================================================== */
/* ================== 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;}
	#logo {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%;}
	/* === parallax box coding ==== */
	section.module p {font-size: 24px;}
	section.module p:first-child {font-size: 50px;}
	section.module p:last-child {font-size: 18px;}
	section.module.parallax {height: auto;}
	.btn-lg {font-size: 18px; padding: 10px 30px;}
	.btn-lg:hover {font-size: 18px; padding: 10px 30px;}
	/* === content box coding ==== */
	blockquote.leftside, blockquote.rightside {visibility: hidden; display: none;}
	.topcontentBox2a, .topcontentBox2b  {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;}
   .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 ==== */
	.lgproduct-image {width: 60%;	margin: 1%;	padding: 0;	text-align: center;}
	.lgproduct-text {width: 98%; margin: 1%;	padding: 0;}
	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%;}
	#logo {float: none; width: 96%; margin: 0 auto; text-align: center; padding: 20px 0 10px 0;}
	nav {float: none; margin: 0;}
	.menu-collapser {width: 60%; margin: 0 20%;}
	ul.slimmenu.collapsed {width: 60%; margin: 0 10%;}
	ul.slimmenu {text-align: center;}
	/* === parallax box coding ==== */
	section.module p {font-size: 24px;}
	section.module p:first-child {font-size: 50px;}
	section.module p:last-child {font-size: 18px;}
	section.module.parallax {height: auto;}
	.btn-lg {font-size: 18px; padding: 10px 30px;}
	.btn-lg:hover {font-size: 18px; padding: 10px 30px;}

	/* === content box coding ==== */
   blockquote.leftside, blockquote.rightside {visibility: hidden; display: none;}
	.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 ==== */
	.lgproduct-image {width: 60%; margin: 1%; padding: 0; text-align: center;}
	.lgproduct-text {width: 98%; margin: 1%; padding: 0;}
}
/* ========================================================== */
/* ================== 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%;}
	#logo {float: none; width: 96%; margin: 0 auto; text-align: center; padding: 20px 0 10px 0;}
	nav {float: none; margin: 1% 15%; }
	/* === parallax box coding ==== */
	section.module p {font-size: 24px;}
	section.module p:first-child {font-size: 50px;}
	section.module p:last-child {font-size: 18px;}
	section.module.parallax {height: auto;}
	.btn-lg {font-size: 18px; padding: 10px 30px;}
	.btn-lg:hover {font-size: 18px; padding: 10px 30px;}

	/* === content box coding ==== */
	blockquote.leftside, blockquote.rightside {visibility: hidden; display: none;}
	.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 ==== */
	.lgproduct-image {width: 60%;	margin: 1%;	padding: 0;	text-align: center;}
	.lgproduct-text {width: 98%; margin: 1%; padding: 0;}
}
/* ========================================================== */
/* ================== LG DEVICE 01 ================= */
/* ========================================================== */
@media screen and (min-width: 801px) and (max-width: 1024px) {
  .container {width: 98%;	margin: 0 auto;}
  nav {float: none; margin: 0;}
	ul.slimmenu {text-align: left;}
	/* === miscellaneous coding ==== */
	.lgproduct-image {width: 60%;	margin: 1%;	padding: 0;	text-align: center;}
	.lgproduct-text {width: 98%; margin: 1%; padding: 0;}
}
/* ========================================================== */
/* ================== LG DEVICE 02 ================= */
/* ========================================================== */
@media screen and (min-width: 1025px) and (max-width: 1199px) {
	.container {width: 98%; margin: 0 auto;}
	ul.slimmenu {text-align: left;}
}