@charset "UTF-8";
/* CSS Document */

ul, ol, dl {
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
}
a img {
	border: none;
}
a:link {
	color: #333333;
	text-decoration: underline;
}
a:visited {
	color: #333333;
	text-decoration: underline;
}
a:hover {
	color: #FFD800;
	text-decoration: none;
}
a:active {
	color: #333333;
	text-decoration: underline;
}
body {
	background-color: #CCCCCC;
	margin: 0 auto;
	padding: 0;
	color: #333333;
	font-family: "Courier New", Courier, "American Typewriter", monospace;
	font-size: 100%;
	line-height: 1.6;
}
#container {
	width: 1150px;
	background-color: #EEEEEE;
	margin: 0 auto;
	border-right: #222222 solid 10px;
	border-left: #222222 solid 10px;
}
#header {
	color: #EEEEEE;
	background-color: #222222;
}
#header_headings {
	height: 80px;
}
#header h1 {
	font-size: 28px;
	margin-left: 40px;
	font-weight: lighter;
}
#header h2 {
	color: #FFD800;
	font-size: 15px;
	margin-top: -20px;
	margin-left: 40px;
	font-weight: lighter;
}
/* #flag {
	margin-top: -65px;

} */
#header a:link, a:visited, a:active {
	color: #EEEEEE;
	text-decoration: underline;
}
#header a:hover {
	color: #FFD800;
	text-decoration: none;
}

/* top navigation */

#top_nav {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 100%;
	text-align: center;
	clear: both;
}
#top_nav ul {
	list-style: none;
	margin: 0;
	padding: .5em 0 .5em 0;
}
#top_nav li {
	display: inline;
}
#top_nav li a {
	color: #222222;
	text-decoration: none;
	padding: 10px;
}
#top_nav a:hover, a:active {
	color: #222222;
	background-color: #FFD800;
}
#main_content {
	padding: 10px 0;
	margin: 0 60px;
}
#container #main_content ul {
	list-style-position: inside;
	list-style-type: none;
	padding-left: 15px;
	padding-bottom: 20px;
}
/* bottom navigation */

#bottom_nav {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 90%;
	margin-top: 10px;
	text-align: center;
	clear: both;
}
#bottom_nav ul {
	list-style: none;
	margin: 0;
	padding: .5em 0 .5em 0;
}
#bottom_nav li {
	display: inline;
}
#bottom_nav li a {
	color: #222222;
	padding-right: 3px;
	padding-left: 3px;
}
/* ~~ The footer ~~ */
#footer {
	padding-bottom: 10px;
	background-color: #222222;
	color: #EEEEEE;
	font-size: 120%;
	text-align: center;
}
#footer a:link, a:visited {
	color: #EEEEEE;
}
#footer a:hover, a:active {
	color: #FFD800;
}
#copyright {
	margin: 20px auto;
}
/* stripes */

/* stripes vertical */
#stripe_1 {
	height: 100%;
	border-left: #333333 solid 10px;
}
#stripe_2 {
	height: 100%;
	border-left: #666666 solid 10px;
}
#stripe_3 {
	height: 100%;
	border-left: #CCCCCC solid 10px;
}
/* stripes horizontal*/
.div_1 {
	background-color: #333333;
	height: 10px;
	width: 100%;
}
.div_2 {
	background-color: #666666;
	height: 10px;
	width: 100%;
}
.div_3 {
	background-color: #CCCCCC;
	height: 10px;
	width: 100%;
}
.fltrt {  /* The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear: both;
	height: 0;
	font-size: 1px;
	line-height: 0px;
}
.center {
	text-align: center;
}
#myBtn {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	font-size: 18px;
	border: none;
	outline: none;
	background-color: #FFD800;
	color: #333333;
	cursor: pointer;
	padding: 15px;
	border-radius: 4px;
}
#myBtn:hover {
	color: #F1F1F1;
	background-color: #666666;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1150px) {
#header {
	height: 110px;
}
#header h3 {
	font-size: 100%;
	margin-top: -25px;
    margin-left: 40px;	
	text-align: left;
}
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
#header {
	height: 110px;
}
#header h3 {
	font-size: 100%;
	margin-top: -15px;
    margin-left: 40px;	
	text-align: left;
}
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 465px) {
#header h3 {
	font-size: 70%;
	margin-top: -15px;
    margin-left: 40px;	
	text-align: left;
}
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#111;line-height:1.5;background:#fff}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.site-header{background:#111;color:#fff}
.site-header .logo{margin:0;font-size:1.4rem;line-height:1;padding:14px 0}
.site-header .logo a{color:#fff;text-decoration:none}
.site-nav{background:#222}
.site-nav .menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.site-nav .menu a{display:block;padding:12px 10px;color:#fff;text-decoration:none}
.site-nav .menu a:hover,.site-nav .menu a:focus{background:#111}
.site-footer{background:#f5f5f5;color:#333}
.site-footer .container{padding:16px}

.hero-slider{width:100%}
.slider{position:relative;width:100%;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.slide.is-active{opacity:1;position:absolute}
.slide img{width:100%;height:56vw;max-height:520px;object-fit:cover;display:block}
.arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);color:#fff;border:0;font-size:28px;line-height:1;width:44px;height:44px;cursor:pointer;z-index:3}
.arrow.prev{left:10px}.arrow.next{right:10px}
.arrow:focus{outline:2px solid #fff;outline-offset:2px}
.dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;justify-content:center;z-index:3}
.dot{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer}
.dot.is-active{background:#fff}

.section-title{margin:28px auto 12px;padding:0 16px;max-width:1200px}
.product-teasers .teasers{display:flex;gap:16px;padding:0 16px 32px;margin:0 auto;max-width:1200px;flex-wrap:wrap}
.card{flex:1 1 300px;border:1px solid #ddd;padding:12px;background:#fff}
.card img{width:100%;height:220px;object-fit:cover;display:block}
.card h3{margin:10px 0 6px;font-size:1.1rem}
.card p{font-size:.95rem}
.btn{display:inline-block;margin-top:8px;padding:8px 12px;background:#333;color:#fff;text-decoration:none}
.btn:hover,.btn:focus{background:#111}

.gallery-page header{max-width:1200px;margin:0 auto;padding:16px}
.gallery-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1200px;margin:0 auto 20px;padding:0 16px}
.gallery-cats .cat{display:grid;place-items:center;border:1px solid #ddd;padding:18px;text-decoration:none;color:#111;background:#fafafa}
.gallery-cats .cat:hover,.gallery-cats .cat:focus{background:#f0f0f0}
.gal-section{max-width:1200px;margin:16px auto 32px;padding:0 16px}
.gal-section .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gal-section figure{margin:0;border:1px solid #ddd;background:#fff}
.gal-section img{width:100%;height:200px;object-fit:cover;display:block}
.gal-section figcaption{padding:6px 8px;font-size:.9rem;color:#444}

@media (max-width:900px){
  .gallery-cats{grid-template-columns:repeat(2,1fr)}
  .gal-section .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .slide img{height:60vw;max-height:none}
  .product-teasers .teasers{flex-direction:column}
}