@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
* {
  box-sizing: border-box;
}

img, object, embed, video {
	max-width: 100%;h
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/* HTML BODY Height 100% important for full page backgrounds */

html, body {
	width:100%;
	height: 100%;
/*	font-size: 15px;  */
/*	font-family:"Calibri"; */
	color:#CCC; /* font color white*/
}

html {
  scroll-behavior: smooth;
}

/* ============ ELEMENTS STYLING SECTION ================= */
/* ---extra padding for the heading so as to display under fixed menu*/

/* Typography */
/* ==========google fonts -============*/
h1 {
  font-size: 3rem; /* 4*/
  font-stretch: expanded;
  color: #F00;
}

h2 {
  font-size: 1.3rem; /* 3*/
}

h1, h2 {
  font-family: 'Raleway', cursive;
/*  font-family: 'Lobster', cursive;*/
}

p {
  font-size: 1.0rem;
  line-height: 1.6;  /* 1.6*/
  word-spacing: 0.2rem; /* 0.6 */
 /* letter-spacing: 0.1rem;*/
  font-family: 'Raleway', Josefin Sans, sans-serif;
  font-stretch: normal;  /* semi-expanded*/
}
/*=========== end of google fonts =========*/

a {
color:red;
text-decoration:none;	
}

/* image Borders */
.img-border {
	border: 2px solid #252424;}



/* ---------table styling options ------------ */
table {
	border: 2px solid #e1e1e1;
	/*max-width:100%;*/
}
td {
	/*background-color: #333;*/
	font-size:1.1em;
	color:#CCC;
}
table.services { 
	border: 1px solid #e1e1e1;
	width:100%;

}
table.services tr{ 
	border: 3px solid #000;

}
/* css overrides source code options*/
table.services tr td.prices {
	width: 35%;
	background-color: #e1e1e1;
	color: #000;
	text-align:center;
	line-height:20px;
	
}
/* css overrides source code options*/
table.services tr td.desc {
	width: 65%;
	background-color: #333;
	line-height:20px;

}
/* -- contact table -- */
table.contact {
	color: #e1e1e1;
	width: 100%;
	border: 1px solid #333;
}
table.contact tr {
	border: 3px solid #000;
	line-height: 20px;
}

/* css overrides source code options*/
table.contact tr td.icons {
	width: 19%;
	background-color: #FFFFFF;
	text-align:center;
	vertical-align:middle;
	line-height:20px;
	
}

table.contact tr td.desc {
	width: 79%;
	background-color:#333;
	line-height:20px;
}

#subtable {
	border: 0px;
}

#subtable tr {
	border: 0px
	
}

#subtable td {
	border: 1px solid #333;
	width: 60%;
}
/*------ end of table styling-------- */

/* ---underlines and dividers */
hr {
	/*display:block;
	/*margin-top:0.5em;
	margin-bottom:0.5em;
	margin-left:auto;
	margin-right:auto;*/
	border-style: inset;
	border-width: 0.7px;
}

.redline {
	border-color:red;
	padding:0;
	margin:0;

}
.halfline {
	width:50%
}

/* end of underlines and dividsers */

/* ============  END OF ELEMENTS STYLING SECTION ========= */

a:visited {
	color:white;
}

/* padding mini logo boxes*/
.minilogobox {
	padding:15px;	
}
.gifslide {
	width:100%;
	}

/*++++++++++++++ NEW MENU ++++++++++++++++
/*First of all, some basic styling to the ul and li elements to 
remove bullet points and other list styles. 
The "inline-block" and "float:left" attributes make the list
 display horizontally.

/*Strip the ul of padding and list styling*************Larger devices************/
 ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
	/*position: absolute;*/
	display:none;   /* turn off for small devices */
}

/*Create a horizontal list with spacing*************larger devices *****************/
ul li {
	display:inline-block;
	float: none; /* centre the menu items in the menu*/
	margin-right: 0px;
	text-align: center;
}

/* The following attributes are almost exclusively for aesthetic appeal. 
If you intend to style this menu to your liking then this is the section of code to fiddle about with.

/*Style for menu links*/
ul li a {
	display: block;
	min-width: 100px;
	/*min-width:15%;*/
	max-width: 100%;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-family: "PG Text", Neue, Helvetica, Arial, sans-serif;
	/*  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
	color: red;  /*white text */
	/*background: #2f3036; /* DARK background colour of static menu items on opening*/
	/*background: rgba(54, 25, 25, .5);*/
	text-decoration: none;
	font-size: 1.5em;
}

/*Hover state for top level links*/
 li:hover a {
	background-color: #FF0000;
	color: #FFF;
}

/*Style for dropdown links*/
 li:hover ul a {
	background: #f3f3f3;
	color: #2f3036
	height: 40px;
	line-height: 40px;
}

/*Hover state for dropdown links*/
 li:hover ul a:hover {
	background: #19c589;
	color: #fff;

}

/*Next up, some styling for the dropdown links. 
The first class defines that the dropdown will not be visible by default. 
And the final class says that the dropdown element will become visible on top level link hover.

/*Hide dropdown links until they are needed*/
 li ul {
	display: none;
}

/*Make dropdown links vertical*/
 li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*****in line links width of item  larger devices ******************/
 li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}
	/*Make all menu links full width for vertical listing ********/
/*	ul li, li a {
		width: 100%;
	}


/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

/* +++++++++++++++++ end of new menu default+++++++++++++++++ */

/*Space is limited on mobile devices, so it would be cool 
if we also had a button prompting mobile users to click a 
button before displaying the whole menu. To do this a couple 
of lines of code to the HTML where you want the button to appear.

<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">

**** Add the following code into the CSS anywhere outside the media query: ****

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "PG Text","Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff; /*white */
	background-color: #f00; /* red*/
	background-color: rgba(250, 0, 0, 0.7);
	text-align: center;
	padding: 10px 0;
	display: none;
}

/*Hide checkbox when using large devices*/
input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menulist{
    display: block;
}
/*The navigation menu is ready for desktop use now, however 
we should also include some love for mobile users. 
Using a media query I target devices with a 
max width of 760px and make a few changes to the code.

/*Responsive Styles*/

/* *@media screen and (max-width : 760px){  /* Mobile phones vertical menu items*/

	
	/*Make dropdown links appear inline*/
/*	ul {
		position: static;
		display: none;
	}
	/*Create vertical spacing for vertical menu items*/
/*	li {
		margin-bottom: 1px;

	}
	/*Make all menu links full width*/
/*	ul li, li a {
		width: 100%;
	}

/* And the following code within the media query
	
	/*Display 'show menu' link for small devices*/
.show-menu {
		display:block;
}

/*========== Mobile Layout: 480px and below.====== */

#nav {
	clear: both;
	float: none; /* allows menu items to be centred or otherwise*/
	margin-left: 0;
	width: 100%;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.7); /*black */
	/*	color: #fff; /* white*/
	color: #F00; /* red*/
	text-align: center;
	z-index: 99;
} 
#home {
	clear: both;
	float:none;
	height: 100%;
	margin-left: 0;
	width: 100%;
	display: block;
	background-size: cover;
	background-image: url(../images/homepage-shopfront-1000w-mono-new.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}

/* CTA (Call to Action) button ------------------------------------*/
/* Container to center the button */
.cta-container {
  display: flex;
  flex-direction: column;             /* stack items vertically */
  justify-content: flex-end;          /* push content to bottom */
  align-items: center;                /* center horizontally */
  height: 100dvh;                     /* dynamic viewport height */
  width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  /*padding-bottom: 6rem;*/
}

.cta-button {
  z-index:10;
  display: inline-block;
  background: linear-gradient(180deg, red, #bd5c72);
  color: #fff;
  padding: 14px 28px;
  font-size: 1.1rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  margin-top: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 20px rgba(255, 51, 102, 0.3);
 /* position: relative;*/
  overflow: hidden;
  width: fit-content;
  white-space: nowrap;
  text-align: center;
  /*barber pole effect*/
   /* existing styles... */
   background: repeating-linear-gradient(
    45deg,
    #007bff 0,
    #007bff 40px,
    #ffffff 40px,
    #ffffff 80px,
    #ff0000 80px,
    #ff0000 120px,
    #ffffff 120px,
    #ffffff 160px
  );
  background-size: 226px 226px; /* Match total length of stripe*/
  animation: barberPoleMove 6s linear infinite;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  /*position: relative;*/
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  /*Add a soft inner shadow for a subtle inset vibe:*/
  position: relative;
  /* Existing background, animation, etc. */
  box-shadow:
    inset 0 2px
}

/*AI Suggestions
.cta-button {
  -webkit-appearance: none;
  appearance: none;
  transform: translateZ(0);
}

.cta-button {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}*/


.cta-button:hover {
  transform: scale(1.05) rotate(1deg);
  box-shadow:
    0 12px 25px rgba(255, 0, 0, 0.4),
    0 0 15px rgba(0, 123, 255, 0.5);
  filter: brightness(1.1);
}

.cta-button:hover span {
  color: #ffd700; /* Golden yellow */
  text-shadow:
    0 0 5px rgba(255, 215, 0, 0.7),
    0 0 10px rgba(255, 215, 0, 0.5);
  background: rgba(0, 0, 0, 0.2); /* Soft dark overlay */
  padding: 0.2em 0.6em;
  border-radius: 10px;
}

/*create a soft top sheen—like a polished capsule light catching the sun.*/
.cta-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
  border-radius: 30px;
  z-index: 1;
  pointer-events: none;
}

.cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Adjust opacity as needed */
  z-index: 0;
  border-radius: 30px;
}

.cta-button span {
  position: relative;
  z-index: 1;
}


/* barber pole animation*/
@keyframes barberPoleMove {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 226px 0; /* Horizontal only for diagonal motion same size as button stripe*/
  }
}

/* Responsive Tweak for CTA 
@media (max-width: 600px) {
  .cta-button {
    font-size: 1rem;
    padding: 12px 24px;
    width: 100%;
    max-width: 300px;
  }

  .cta-container {
    padding: 1rem;
    padding-bottom: 6rem;
  }
}*/

/*mobile phones*/
@media (max-width: 600px) {
  .cta-container {
    padding-bottom: 3rem; /* Reduce bottom spacing */
    height: auto; /* Let it shrink as needed */
    min-height: 100dvh; /* Still fills the screen */
  }

  .cta-button {
    max-width: 90%;
    font-size: 1rem;
    padding: 12px 24px;
    text-align: center;
  }
}
/*For Tablets (Landscape & Small Laptops*/
@media (max-width: 992px) {
  .cta-container {
    padding-bottom: 1rem;
  }

  .cta-button {
    font-size: 1.05rem;
    padding: 14px 28px;
  }
}

/* END OF CTA -------------------------------------------------------*/

.gridcontainer {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding:2%;
	padding-top:80px; /* adjust content view for fixed menu */
}

/* round images */
.rounding {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 50%; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 50%; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 50%; 
}

.img-round {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 8px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 8px; 
  
  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 8px; 

}

.img-logo {

	padding: 10px;


}
#aboutus {
	clear: both;
	float: none;
	width: 100%;
	display: block;
	background-color: rgba(0,0,0, 1.0);
	color: #CCC;
	background-size: cover;
	background-image: url(../images/JoeMicaleCutting31-overlay3.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}

/*.overlay-colour {
	width:100%;
	height:100%;
	background-color:#000;
	opacity:.7;
	top:0;
	left:0;
	/*position:absolute;
}*/
/*.overlay-img {
   object-fit: cover;
   opacity: 0.5;
}*/
#aboutus01 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;

}
#aboutus02 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#aboutus03 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	text-align:center;
	padding-top: 2%;
}
#aboutus04 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#aboutus05 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#aboutus06 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#services {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #000;
	background-image: url(../images/shop-interior30-700x400-overlay.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
#services01 {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}
#services02 {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: block;
}
#services03 {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: block;
	margin-bottom:10px;
	
}
#services03 img {
	border: 2px solid #333;
	padding:3px;
}
#services04 {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: block;
	
}
#services04 img {
	border: 2px solid #333;
	padding:3px;
}

#services05 {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: block;

}
#services06 {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: block;
}
#products {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: block;
	background-image: url(../images/products-bg-overlay2.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-color:#000;
}
#products01 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
}
#products02 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#products03 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;

}

#products04 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;

}
#products05 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#products06 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}

#photos {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: block;
	background-color: #000;
	padding-top:80px;

}
#photos01 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 50%;
	display: none;
}
#photos02 {
	clear:none;
	float: left;
	margin-left: 0;
	width:100%;
	display: block;
}
#photos03 {
/* to reset for a second row in the div*/
/*clear: none; /* not reset for a 2nd row*/		
	clear:both; 
	float: left;
	margin-left: 0;
	width:100%;
	display: block;
}
#photos04 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
}
#photos05 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#photos06 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contact {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: block;
	background-color: #000;
	background-image: url(../images/shopfoto-11-1000x500-overlay.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;

}
#contact01 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
}
#contact02 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contact03 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	
}
#contact04 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contact05 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
}
#contact06 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
}
#footer {
	clear: both;
	float: left;
	width: 100%;
	display: block;
	background-color: #333;
	color:#999;
}
#footerbox {
	clear: both;
	float: left;
	width: 100%;
	padding: 2%;
	display: block;
}
#footer01 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 50%;
	display: block;
}
#footer02 {
	clear: none;
	float: left;
	width: 50%;
	display: block;
}
#footer03 {
	clear: both;
	float: left;
	width: 50%;
	display: block;
}
#footer04 {
	clear: none;
	float: left;
	width: 50%;
	display: block;
}
#footer02 li {  
	list-style: none;
	margin:0;
	padding:0;
	display:block;
}
.footermenu ul {  
	list-style: none;
	margin:0;
	padding:0;
	/*display:inline-block; WM*/ 
	display:block;
}

.footermenu li a {
	text-align: left;
	line-height: 20px;
	height:20px;
	text-decoration: none;
	font-size:1.1em;
	padding: 1px;
}

#footer01 li {  
	list-style: none;
	font-style: italic;
	margin:0;
	padding:0;
	display:block;
}

	
/* ======================= New Gallery CSS ====================== */
/* ======================= photo gallery ======================== */

/* Responsive layout - makes a two column-layout instead of four columns */

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

/* ----WM ---*/
.photocolumn {
    
	-webkit-flex:50%;
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  } 

@media screen and (max-width: 600px) {
/*  .photocolumn {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }  */
}

@media screen and (max-width: 800px) {
 /* .phoocolumn {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }*/
}

.photorow {
  display: -moz-box;
  display: -moz-flex;
  display: -webkit-flexbox;
  display: -webkit-flex;
  display: -webkit-box; /* IOS 6 safari */
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -webkit-flex-wrap: wrap; /*safari*/
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0px 3px;
}

/* Create four equal columns that sits next to each other */
/*.photocolumn {
  -ms-flex: 25%; /* IE10 */
/*  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
} */

.photocolumn img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* ================= end of photo gallery ========================*/

/* ================ MODAL for Gallery ============================== */

.images {
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.images:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    max-width: 100%;
   }
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 80%;
 /* max-width: 700px;*/
 /* width: auto; /* WM */
  /*height: 85%; /* WM make pic height no more than one page*/
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
  font-size:1.3em; /* WM  make caption font bigger*/
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 80px;
  right: 35px;
 /* color: #f1f1f1;*/
  color:#F00; /* WM change to red X*/
  font-size: 80px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color:#F9F; 
  text-decoration: none;
  cursor: pointer;
}

/*  ====================== end of modal ========================= */




/*=================================================*/
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

#home {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #039;
/*	background-size: cover;
/*	background-image: 	url(../images/homepage-shopfront-1000w-mono.jpg);
	background-repeat: no-repeat;
	background-position: center center;*/
}
/*-- WM ---*/
.photocolumn {
    -webkit-flexbox:31%;
	-ms-flex: 31%;
    flex: 31%;
    max-width: 31%;
  }

/*#aboutus {
	clear: both;
	float: left;
	width: 100%;
	margin-left:0;
	display: block;
}*/
#aboutus01 {
	clear: both;
	float: left;
	width: 45%;
	margin-left: 0;
	display: block;
}
#aboutus02 {
	clear: none;
	float: left;
	width: 50%;
	margin-left: 2%;
	display: block;
}
#aboutus03 {
	clear: both;
	float: left;
	width: 45%;
	margin-left: 0;
	display: block;
	text-align:center;
}

#aboutus04 {
	clear: none;
	float: left;
	width: 50%;
	margin-left: 2%;
	display: block;
}

#aboutus05 {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: none;
}
#aboutus06 {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: block;
}


/* menu display items */
ul {
      display: block;

}
	
/**Display ' menu' bar for small devices*/
.show-menu {
		display:none;
	}

#services {
	clear: both;
	float: none;
	width: 100%;
	margin-left: 0;
	display: block;
}

#services01 {
	clear: both;
	float: left;
	width: 45%;
	margin-left: 0;
	display: block;
}
#services02 {
	clear: none;
	float: left;
	width: 50%;
	margin-left:2%;
	display: block;
}
#services03 {
	clear: none;
	float: left;
	width: 50%;
	margin-left:0;
	display: block;
	
}
#services04 {
	clear: none;
	float: left;
	width: 50%;
	margin-left:2%;
	display: block;
	
}
#services05 {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: block;
}
#services06 {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: block;
}
#products {
	clear: both;
	float: none;
	width: 100%;
	margin-left: 0;
	display: block;
}
#products01 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 47%;
	display: block;
}
#products02 {
	clear: none;
	float: left;
	margin-left: 2%;
	width:47%;
	display: block;
}
#products03 {
	clear: both;
	float: left;
	margin-left: 2%;
	width: 46%;
	display: block;
}
#products04 {
	clear: none;
	float: left;
	margin-left: 2%;
	width: 46%;
	display: block;
}
#products05 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#products06 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#photos {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: block;
}
#photos01 {
	clear: both;
	float: left;
	margin-left: 0;
	width:20%;
	display: block;
}
#photos02 {
	clear: none;
	float: left;
	margin-left:2%;
	width:75%;
	display: block;
}
#photos03 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#photos04 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
}
#photos05 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#photos06 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contact {
	clear: both;
	float: none;
	width: 100%;
	margin-left: 0;
	display: block;
}

#contact01 {
	clear: both;
	float: left;
	width: 40%;
	margin-left: 0;
	display: block;
}
#contact02 {
	clear: none;
	float: left;
	width: 56%;
	margin-left: 2%;
	display: block;
}
#contact03 {
	clear: none;
	float: left;
	width: 56%;
	margin-left: 2%;
	display: block;
}
#contact04 {
	clear: none;
	float: left;
	margin-left:2%;
	width: 56%;
	display: block;
	
}
#contact05 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contact06 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#footer {
	clear: both;
	float: left;
	width: 100%;
	display: block;
	background-color:#333;
	color:#CCC;
}
#footerbox {
	clear: both;
	float: left;
	padding: 1.0082%;
	background-color:#333;
	display: block;
	
}
#footer01 {
	clear: both;
	float: left;
	margin-left:0;
	width: 21.0769%;
	display: block;
}
#footer02 {
	clear: none;
	float: left;
	margin-left: 2.5641%;
	width: 21.0769%;
	display: block;
}
#footer03 {
	clear: none;
	float: left;
	margin-left: 2.5641%;
	width: 21.0769%;
	display: block;
}
#footer04 {
	clear: none;
	float: left;
	margin-left: 2.5641%;
	width: 21.0769%;
	display: block;
}
}

/*=================================================*/
/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

/*.photocolumn {
/*  -ms-flex: 25%; /* IE10 */
/*  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
} */

.photocolumn {
  -ms-flex: 20%; /* IE10 */
  flex: 20%;
  max-width: 20%;
  padding: 0 4px;
} 


.gridcontainer {
	width:100%;
	max-width: 1232px;
/*	max-width: 1366px;	*/
	margin-left:auto;
	margin-right:auto;
	padding:1%;
	padding-top:80px;
	
} 

#home {
	clear: both;
	float: none;
	margin-left: 0;
	width: 100%;
	display: block;
/*	background-size: cover;
	background-image: url(../images/homepage-shopfront-1000w-mono.jpg);
	background-repeat: no-repeat;
	background-position: center center;*/
}

#aboutus {
	clear: both;
	float: none;
	width: 100%;
	background-color: rgba(0,0,0, 1.0);
	color: #CCC;
/*	background-size: cover;
	background-image: url(../images/JoeMicaleCutting31-overlay3.jpg);
	background-repeat: no-repeat;
	background-position: center center;*/
}

#aboutus01 {
	clear: both;
	float: left;
	width: 32%;
	display: block;
}
#aboutus02 {
	clear: none;
	float:left;
	width: 64%;
	margin-left: 2%;
	display: block;}

#aboutus03 {
	clear: both;
	float: left;
	width: 32%;
	margin-left: 0;
	display: block;
}
#aboutus04 {
	clear: none;
	float: left;
	width: 64%;
	margin-left: 2%;
	display: block;
}
	
#aboutus05 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
}
#aboutus06 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
}

#services {
	clear: both;
	float: none;
	margin-left: 0;
	width: 100%;
	display: block;
}
#services01 {
	clear: both;
	float: left;
	width: 30%;
	display: block;
}
#services02 {
	clear: none;
	float: left;
	margin-left: 2%;
	width: 60%;
	display: block;
}
#services03 {
	clear: none;
	float: left;
	margin-left: 2%;
	width: 60%;
	display: block;
}
#services04 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 30%;
	display: block;
}
#services05 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
}
#services06 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: none;
}
#products {
	clear: both;
	float: none;
	margin-left: 0;
	width: 100%;
	display: block;
}
#products01 {
	clear: both;
	float: left;
	width: 30%;
	display: block;
}
#products02 {
	clear: none;
	float: left;
	margin-left: 2%;
	width: 60%;
	display: block;
}
#products03 {
	clear: both;
	float: left;
	margin-left:0%;
	width: 46%;
	display: block;
}
#products04 {
	clear: none;
	float: left;
	margin-left: 2%;
	width: 46%;
	display: block;
}
#products05 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#products06 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#photos {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: block;
	background:#000;
}
#photos01 {
	clear: both;
	float: left;
	width: 20%;
	margin-left: 0;
	display: block;
}
#photos02 {
	clear: none;
	float: left;
	width: 75%;
	margin-left: 2%;
	display: block;
}
#photos03 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#photos04 {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: none;
}
#photos05 {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: none;
}
#photos06 {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: none;
}
#contact {
	clear: both;
	float: none;
	margin-left: 0;
	width: 100%;
	display: block;
}
#contact01 {
	clear: both;
	float: left;
	margin-left: 0;
	width: 30%;
	display: block;
}
#contact02 {
	clear: none;
	float: left;
	width: 67%;
	margin-left: 2%;
	display: block;
}
#contact03 {
	clear: none;
	float: left;
	width: 67%;
	margin-left: 2%;
	display: block;
}
#contact04 {
	clear: none;
	float: left;
	width:67%;
	margin-left: 2%;
	display: block;

}
#contact05 {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: none;
}
#contact06 {
	clear: both;
	float: left;
	width: 100%;
	margin-left: 0;
	display: block;
}
#footerbox {
	clear:both;
	float:none; /* allow to centre the div */
	width:100%;
	max-width: 1232px;
	margin-left:auto;
	margin-right:auto;
}

/*#footer01 {
	clear: both;
	float: left;
	width: 25%;
	display: block;
}
#footer02 {
	clear: none;
	float: left;
	width: 25%;
	display: block;
}
#footer03 {
	clear: none;
	float: left;
	width: 25%;
	display: block;
}
#footer04 {
	clear: none;
	float: left;
	width: 25%;
	display: block;
} */
}