<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing:border-box}
body {font-family: "Courier New", Courier, monospace;}
.mySlides {display:none}


.features-title {
	font-size:170%;
	font-style:normal;
	font-family:"Courier New", Courier, monospace;
	font-weight:bold;
    text-align:center;
    padding:1% 0% 1% 3%;
	color:#333;
	text-decoration:none;
	background-color:#fff;
	}


#wrapper {
	width: 100%;
	margin: auto;
	background: #ffffff;
	}
	
	
/*top logo banner*/	

#logo img{
	margin-top:1%;
	margin:auto;
	display:block;
	background-color:#ffffff;
	text-align:center;
	}

/*strapline*/

#strapline {
	font-family:"Courier New", Courier, monospace;
	font-size:120%;
	font-weight:bolder;
	background-color:#ffffff;
	padding-top:1%;
	color:#333333;
	text-align:center;
	}
	
/*horizontal navigation bar*/

#navbar {
	background-color: #333333;
	width: 100%;
	padding: 0.1%;
	margin: auto;
	display: block;
	text-align:center;
	}
	
	/*dropdown button*/	
		.dropbtn {
		    background-color:#333; /*dropdown button colour*/
		    color:#fff; /*dropdown button font colour*/
		    border-radius: 8px;
		    font-family:"Courier New", Courier, monospace;
		    font-weight:bold;
		    padding: 12px 16px;
		    font-size:175%;
		    padding: 10px 30px;
		    border: none;
		    cursor: pointer;
			}
		
		.dropdown {
		    position: relative;
		    display: inline-block;
			}
		
		.dropdown-content {
		    display: none;
		    position: absolute;
		    background-color:#fff; /*dropdown main background colour*/
		    min-width: 150px;
		    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		    z-index: 1;
			}
		
		.dropdown-content a {/*dropdown main font colour*/
			font-family:"Courier New", Courier, monospace;
		    color:#333; 
		    font-weight:bold;
		    font-size:50%;
		    padding: 12px 16px;
		    text-decoration: none;
		    display: block;
			}
		
		.dropdown-content a:hover {/*dropdown hover colour*/
			background-color:#333;
			border-radius: 8px;
			color:#fff;
			} 
		
		.dropdown:hover .dropdown-content {
		    display: block;
			}
		
		.dropdown:hover .dropbtn { /*main button hover color*/
		    background-color:#fff;
		    color:#333
			}
	
#navbar li {display:inline;}

.button1 a:link {
	font-family:"Courier New", Courier, monospace;
    background-color: #333333;
    border: none;
    font-weight:bold;
    color: #ffffff;
    padding: 10px 30px;
    text-align: center;
    text-decoration: none;
    font-size: 170%;
	}
	
.button1 a:visited {
	font-family:"Courier New", Courier, monospace;
    background-color: #333333;
    border: none;
    font-weight:bold;
	color: #ffffff;
    padding: 10px 30px;
    text-align: center;
    text-decoration: none;
    font-size: 170%;
	}
	
.button1 a:visited:hover {
	font-family:"Courier New", Courier, monospace;
    background-color: #ffffff;
    border: none;	
    font-weight:bold;
	color: #333333;
    padding: 10px 30px;
    text-align: center;
    text-decoration: none;
    text-weight: bold;
    font-size: 170%;
    border-radius: 8px;
	}
	
.button1 a:hover {
    font-family:"Courier New", Courier, monospace;
    background-color: #ffffff;
    border: none;
    font-weight:bold;
	color: #333333;
    padding: 10px 30px;
    text-align: center;
    text-weight: bold;
    text-decoration: none;
    font-size: 170%;
    border-radius: 8px;
	}
	
.button1 a:active {
	font-family:"Courier New", Courier, monospace;
    background-color: #333333;
    border: none;
    font-weight:bold;
	color: #ffffff;
    padding: 10px 30px;
    text-align: center;
    text-decoration: none;
    font-size: 170%;
	}


#sidebar {
	font-size:140%;
	font-weight:bold;
	width:17.5%;
	color:#ffffff;
	float:left;
	font-family:"Courier New", Courier, monospace;
	background-color:#808080;
	}
	
.button2 ul {
	list-style: none;
	margin-left:0%;
	padding-top:1%;
	}
	
/*sidebar buttons*/

#sidebar li {
	padding-top:23px;
	}
		
.button2 a:link {
	font-family:"Courier New", Courier, monospace;
    background-color: #808080;
    border: none;
    font-weight:bold;
    color: #ffffff;
    padding:1%;
    margin:0%;
    text-align: center;
    text-decoration: none;
	}
	
.button2 a:visited {
	font-family:"Courier New", Courier, monospace;
    background-color: #808080;
    border: none;
    font-weight:bold;
	padding:1%;
	margin:0%;
	color: #ffffff;
    text-align: center;
    text-decoration: none;
	}
	
.button2 a:visited:hover {
	font-family:"Courier New", Courier, monospace;
    background-color: #ffffff;
    border: none;	
    font-weight:bold;
	color: #333333;
    padding:1%;
    margin:0%;
    text-align: center;
    text-decoration: none;
    text-weight: bold;
    border-radius: 8px;
	}
	
.button2 a:hover {
    font-family:"Courier New", Courier, monospace;
    background-color: #ffffff;
    border: none;
    font-weight:bold;
	color: #333333;
    padding:1%;
    margin:0%;
    text-align: center;
    text-weight: bold;
    text-decoration: none;
    border-radius: 8px;
	}
	
.button2 a:active {
	font-family:"Courier New", Courier, monospace;
    background-color: #808080;
    border: none;
    font-weight:bold;
	color: #ffffff;
    padding:1%;
    margin:0%;
    text-align: center;
    text-decoration: none;
	}

.social-media {
	margin:1% auto;
	width:100%;
	text-align:center;
	background-color:#808080;
	text-decoration: none;
	}

/*gallery*/

#divMainImage {
	width:18.5%;
	margin-left:1%;
	}
#divMainImage img {
	width:100%;
	}
	
      
#thumbnails {
	margin-left:21%;
	width:20%;
	float:left;
	}
		
#thumbs img, #divMainImage {
   border: 1px solid gray;
   padding: 4px;
   background-color: white;
   cursor: pointer;
   float:left;
	}
#thumbs img {
	margin:1%;
	padding-left:1%;
		}
	

.description {
	float:right;
	margin:0%,5%,0%,0%;
	width:53%;
}

.price {
	font-size:150%;
}

.form {
	align: right;
	width:60%;
	font-family:"Courier New", Courier, monospace;
	font-size:120%;
	}

.snipcart-overwrite button.snipcart-add-item {
    background: #fff;
    border: none;
    text-shadow: none;
	}	

/*bottom banner */
	

#bottom-banner {
	background-color:#666;
	width:100%;
	text-align:center;
	style:block;
	clear:both;
	overflow-y:hidden;
	}
.bottom-banner {
	background-colour:#666
	}
		
	
.bottom-banner a:link {color: #ffffff; background-color:#666;text-decoration:none;}
.bottom-banner a:hover {color:#ffffff; font-weight:bold; background-color:#666;text-decoration:none;}
.bottom-banner a:hover:visited {color: #ffffff; font-weight:bold; background-color:#666;text-decoration:none;}
.bottom-banner a:visited {color: #ffffff; background-color:#666;text-decoration:none;}
.bottom-banner a:active {color: #ffffff; background-color:#666;text-decoration:none;}
	
#bottom-banner ul {list-style: none;}

.heading {
	font-family:Arial, Helvetica, sans-serif;
	font-size:200%;
	color:black;
	background-color:#fffffff;
	width: 88%;
	margin:auto;
	font-weight:bold;
	text-align:center;	
	margin:auto;		
	}

#quick-links {
	font-size:120%;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	width: 50%;
	background-color:#666666;
	text-align:right;
	float:left;
	}
	
#categories {
	font-size:120%;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	width:50%;
	background-color:#666666;
	text-align:left;
	display:inline-block;
	form:wrapper;
	}
	
.quick-links-title {
	font-size:125%;
	font-style:normal;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#FFFFFF;
	text-decoration:none;
	text-align:right;
	background-color:#666;
	}
	
.categories-title {
	font-size:125%;
	font-style:normal;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#FFFFFF;
	text-decoration:none;
	background-color:#666;
	}

.categories-title  a:link {color: #ffffff; background-color:#666;text-decoration:none;}
.categories-title  a:hover {color:#ffffff; font-weight:bolder; background-color:#666;text-decoration:none;}
.categories-title  a:hover:visited {color: #ffffff; font-weight:bolder; background-color:#666;text-decoration:none;}
.categories-title  a:visited {color: #ffffff; background-color:#666;text-decoration:none;}
.categories-title  a:active {color: #ffffff; background-color:#666;text-decoration:none;}

/*footer*/

#footer {
	color:#FFFFFF;
	background-color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:75%;
	width:100%;
	text-align:center;
	padding:0.5% 0%;
	text-decoration:none;
	
	}
	
/*sitemap properties*/

.sitemap {
  background-color: #fff;
  color: #333;
  font-size: 120%;
  font-family:"Courier New", Courier, monospace;
  float:right;
  padding-right:50%;
}

.sitemap dl {
  padding-left:10%;
}

.sitemap a:link {
	text-decoration:none;
	font-family:"Courier New", Courier, monospace;
    background-color: #fff;
    font-weight:bolder;
	color: #333;
	}	
	
.sitemap a:visited {
	text-decoration:none;
    background-color: #fff;
    font-weight:bolder;
	color: #333;
	}
	
.sitemap a:visited:hover {
	text-decoration:underline;
    background-color: #fff;
	color: #333;
	}
	
.sitemap a:hover {
    text-decoration:underline;
    background-color: #fff;
	color: #333;
	}
	
.sitemap a:active {
	text-decoration:none;
    background-color: #fff;
    font-weight:bolder;
	color: #333;
    	}
	
/*impressum*/

.impressum {
	padding-top:2%;
	font-size:120%;
	width:70%;
	text-align:justify;
	float:right;
	margin-right:7%;
	}
.impressum-centered {
	padding-top:2%;
	font-size:120%;
	width:70%;
	text-align:center;
	float:right;
	margin-right:7%;
	}

.impressum-list li {
	list-style:none;
	font-size:100%;
	text-align:center;
	}

.impressum-list a:link {
	text-decoration:none;
	font-family:"Courier New", Courier, monospace;
    background-color: #fff;
    font-weight:bolder;
	color: #333;
	}	
	
.impressum-list a:visited {
	text-decoration:none;
    background-color: #fff;
    font-weight:bolder;
	color: #333;
	}
	
.impressum-list a:visited:hover {
	text-decoration:underline;
	background-color: #fff;
	color: #333;
	}
	
.impressum-list a:hover {
    text-decoration:underline;
	background-color: #fff;
	color: #333;
	}
	
.impressum-list a:active {
	text-decoration:none;
	background-color: #fff;
    font-weight:bolder;
	color: #333;
    }

/*contact form*/

.contact-title {
	font-size:170%;
	font-style:normal;
	font-family:"Courier New", Courier, monospace;
	font-weight:bolder;
    text-align:center;
    padding:2% 15% 1% 3%;
	color:#333;
	text-decoration:none;
	background-color:#fff;
	}


.contact-form{
	font-weight:bolder;
	font-size:120%;
	text-align:center;
	padding-right: 15%;	
	}
.error-message {
	padding-top:2%;
	font-size:120%;
	width:55%;
	text-align:center;
	float:right;
	margin-right:20%;
	}

/*Terms & Conditions*/

.terms-title {
	font-size:100%;
	font-style:normal;
	font-family:"Courier New", Courier, monospace;
	font-weight:bold;
	color:#333;
	text-align: left;
	text-decoration:none;
	}
/*suggested products*/

.suggested {
	width:60%;
	float:right;
	font-size:150%;
	font-weight:bold;
	margin:auto;
	}
	
.suggested-product {
	display:inline;
	float:left;
    width: 15%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
    padding: 1%;
    margin:1%;
    text-align: center;
    list-style:none;
	}
	

.fader {
    position: relative;
    width: 100%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.fader:hover .image {
  opacity: 0.3;
}

.fader:hover .middle {
  opacity: 1;
}

.text {
  background-color: #333;
  link-style:none;
  color: white;
  font-size: 16px;
  font-weight:bold;
  border-radius:8px;
  font-family:"Courier New", Courier, monospace;
  padding: 1em;
  margin-bottom:50px;
}

.middle a:link {
	text-decoration:none;
    background-color: #333;
    font-weight:bolder;
	color: #fff;
	}
	
.middle a:visited {
	text-decoration:none;
    background-color: #333;
    font-weight:bolder;
	color: #fff;
	}
	
.middle a:visited:hover {
	text-decoration:none;
    background-color: #333;
    font-size:110%;
	color: #fff;
	}
	
.middle a:hover {
    text-decoration:none;
    background-color: #333;
    font-size:110%;
	color: #fff;
	}
	
.middle a:active {
	text-decoration:none;
    background-color: #333;
    font-weight:bolder;
	color: #fff;
    	}
.container a:link {
	text-decoration:none;
	font-family:"Courier New", Courier, monospace;
    background-color: #fff;
    font-weight:bolder;
	color: #333;
	}
	
.container a:visited {
	text-decoration:none;
    font-family:"Courier New", Courier, monospace;
	background-color: #fff;
    font-weight:bolder;
	color: #333;
	}
	
.container a:visited:hover {
	text-decoration:none;
    font-family:"Courier New", Courier, monospace;
	background-color: #fff;
    font-size:110%;
	color: #333;
	}
	
.container a:hover {
    text-decoration:none;
    font-family:"Courier New", Courier, monospace;
	background-color: #fff;
    font-size:110%;
	color: #333;
	}
	
.container a:active {
	text-decoration:none;
    font-family:"Courier New", Courier, monospace;
	background-color: #fff;
    font-weight:bolder;
	color: #333;
    	}

