/* =============== GENERAL CODE =============== */
 body { 
	font-family: Verdana, sans-serif;
	font-size: 13px;
	color: #000000;
	height: 100%;
	height: auto;
	width: 100%;
	width: auto;
}

 * {
   	bottom-margin: 0;
}

 IMG.displayed {
	display: block;
	margin-left: auto;
	margin-right: auto; 
	width: 350px;
	height: 140px;
}

 h1, p {
	margin: 0;
	padding: 0 0 .5em;
	font-family: Verdana, sans-serif;
	text-align: center;
}

 h2 {
	font-family: Verdana, sans-serif;
	text-align: center;
}

 h3 {
	font-family: Verdana, sans-serif;
	text-decoration: underline;
	text-align: center;
}

 .indexcontainer {
	text-align: center:
	background-color: black;
	border: black 5 px solid;
}

 .container {
	text-align: center;
}

 .clearfix:after {
	content: "";
	display: table;
	clear: both;
}

 a:link, a:visited {
	background-color: black;
	color: white;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
}

 a:hover, a:active {
	background-color: #2D7BAE;
}

 .wrap {
  	min-height: 100%;
   	margin-bottom: -25px; /* equal to footer height */
}

 .wrap:after {
 	content: " ";
  	display: block;
}

 .site-footer {
 	width: 100%;
	position: relative;
	margin-top: -25px; /* negative value of footer height */
	height: 25px;
	clear: both;
}

 .site-footer, .push {
	height: 25px; /* .push must be the same height as .footer */
}

 #navbar ul { 
	margin: 0 auto;
	padding: 7px;
	list-style-type: none;
	text-align: center;
	position: relative;
	background-color: #000;
	clear: both;
} 
 
 #navbar ul li { 
 	display: inline-block;
 	font-family: Verdana, sans-serif;
 	font-size: 12px;
 	text-decoration: bold;
 	clear: both;
} 
 
 #navbar ul li a {
 	text-decoration: none;
 	padding: .3em 1em;
 	color: #fff;
 	background-color: #000;
 	clear: both;
} 
 
 #navbar ul li a:hover {
 	color: #000; background-color: #fff;
 	clear: both;
} 

/* =============== PRODUCT IMAGE LIST CODE =============== */
.nd-wrap {
	overflow: hidden;
	text-align: center;
	margin: 0 auto;
	position: relative;
	display: inline-block;
}

.nd-wrap img {
	width: 285px;
	height: 190px;
	display: block;
	border: 5px solid black;
	text-align: center;
}

.nd-title {
	position: relative;     
	top: -150px;
	opacity: 0;
	margin: 0 0 30px;
	font-family: Verdana, sans-serif;
	font-weight: 400;
    -webkit-transition: all 1s ease 0.01s;
            transition: all 1s ease 0.01s;
}

.nd-title span {
	color: #fff;    
	padding: 0 20px 15px;
	border-bottom: 10px double #2D7BAE;
	display: inline-block;
}

.nd-icon {
	color: #000;
	display: inline-block;
	font-size: 14px;
	text-decoration: bold;
	margin: 0 5px;
	opacity: 0;
	position: relative;
	cursor: pointer;
    -webkit-transition-duration: 0.6s;
            transition-duration: 0.6s;
    -webkit-transition-timing-function: cubic-bezier(1.000, -0.530, 0.405, 1.425);
            transition-timing-function: cubic-bezier(1.000, -0.530, 0.405, 1.425);
}

.nd-icon span {
	background: rgba(255, 255, 255, 0.7);
	border-radius: 5px;
	padding: 15px;
    -webkit-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
}

.nd-icon:hover span {
	background: #fff;
    -webkit-transform: scale(1.1,1.1);
            transform: scale(1.1,1.1);
}

.nd-content {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
    -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
}

.nd-content_inner {
	display: table;
	width: 100%;
	height: 100%;
}

.nd-content_inner1 {
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
}

/* =============== PRODUCT IMAGE HOVER AREA =============== */
.nd-wrap:hover .nd-icon,
.nd-wrap:hover .nd-content,
.nd-wrap:hover .nd-title {
	opacity: 1;
	top: 0;
}
.nd-wrap:hover .nd-title {
    -webkit-transition: all 0.5s cubic-bezier(1.000, -0.530, 0.405, 1.425) 0.01s;
            transition: all 0.5s cubic-bezier(1.000, -0.530, 0.405, 1.425) 0.01s;
}

.nd-wrap:hover .nd-content {
	background: rgba(0, 0, 0, 0.7);
}

/* =============== SET DELAY FOR ICONS WHEN HOVER =============== */
.nd-content .nd-icon:nth-of-type(1) {   
    -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
}

.nd-content .nd-icon:nth-of-type(2) {
    -webkit-transition-delay: 0.15s;
            transition-delay: 0.15s;
}

.nd-content .nd-icon:nth-of-type(3) {
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
}

.nd-content .nd-icon:nth-of-type(4) {
    -webkit-transition-delay: 0.25s;
            transition-delay: 0.25s;
}

.nd-style-2 .nd-icon {
    -webkit-transform: scale(0,0);
            transform: scale(0,0);
}

.nd-wrap.nd-style-2:hover .nd-icon {
    -webkit-transform: scale(1,1);
            transform: scale(1,1);
}

/* =============== MAIN PRODUCT LIST CODE =============== */
 .responsive {
	padding: 5px;
	float: left;
	position: relative;
	left: 5%;
	text-align: right;
	width: 30%;
	height: auto;
}

 .responsive > .img {
	position: relative;
	right: 5%;
}

 div.img {
	padding: 5px;
	height: auto;
	width: 100%;
}

 div.img img {
	width: 100%;
	height: auto;
}

/* =============== INDIVIDUAL PRODUCT PAGES CODE =============== */
/*padding = top right bottom left*/

 table.central {
 	padding: 10px 0px 10px 105px;
 	text-align: center;
 	font-family: Verdana, sans-serif;
 	font-size: 13px;
 	float: left;
 	clear: left;
 	position: relative;
  	width: 40%;
}

 td img {
	opacity: 0.9;
	filter: alpha(opacity=90);
}

 td img:hover {
	opacity: 1.0;
	filter: alpha(opacity=100);
}

 .main img {
	padding: 30px 0px 10px 60px;
	float: left;
	clear: left;
	text-align: center;
  	position: relative;
  	width: 40%;
}

 .description {
 	padding: 20px 20px 40px 0px;
  	float: right;
  	clear: right;
  	margin-right: 45px;
 	text-align: center;
  	position: relative;
  	width: 40%;
}

 #aboutus {
	padding: 50px;
	text-align: center;
}

 #panel {
	padding: 30px 1px 1px 40px;
  	float: left;
	clear: left;
	margin: auto;
	text-align: center;
	position: relative;
	width: 40%;
	width: auto;
	-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

 #panel img {
	width: 400px;
	height: 266px;
	margin: auto;
}

 #thumbs {
	padding: 1px 1px 10px 50px;
	float: left;
	clear: left;
	text-align: center;
	padding-top: 10px;
	overflow: hidden;
	position: relative;
	width: auto;
	width: 40%;
 	display: inline;
}

 #thumbs img, #largeImage {
	padding: 4px;
	background-color: white;
	cursor: pointer;
	display:inline;
}

 #thumbs img {
	position: relative;
	margin: auto;
	width: 100px;
	border: 5px black solid;
	display:inline-block;
}


/* =============== MEDIA QUERY - 768 MIN =============== */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

 IMG.displayed {
	display: block;
	margin-left: auto;
	margin-right: auto; 
	width: 350px;
	height: 140px;
}
 div.img {
	padding: 5px;
}

 div.img img {
	width: 100%;
	height: auto;
}

 .responsive {
	padding: 5px;
	text-align: center;
	float: left;
	width: 30%;
}

 .clearfix:after {
	content: "";
	display: table;
	clear: both;
} }

/*padding = top right bottom left*/

 .central {
	padding: 0px 0px 30px 70px;
 	left-margin: auto;
 	text-align: center;
 	font-family: Verdana, sans-serif;
 	font-size: 13px;
 	float: left;
 	clear: left;
 	position: relative;
  	width: 30%;
}

 .main {
	padding: 30px 0px 30px 70px;
	float: left;
	clear: left;
  	position: relative;
  	width: 30%;
}

 .description {
 	padding: 20px 40px 10px 0px;
 	text-align: center;
  	position: relative;
  	clear: right;
  	float: right;
  	width: 40%;
}

 .wrap {
  	min-height: 100%;
   	margin-bottom: -25px; /* equal to footer height */
}

 .wrap:after {
 	content: " ";
  	display: block;
}

 .site-footer {
	padding: 20px 0px 0px 0px;
 	width: auto;
	position: relative;
	margin-top: -25px; /* negative value of footer height */
	height: 25px;
	clear:both;
}

 .site-footer, .push {
	height: 25px; /* .push must be the same height as .footer */
}

 #panel {
  	float: left;
	clear: left;
 	left-margin: auto;
	text-align: center;
	position: relative;
	width: 40%;
	width: auto;
 	display: inline;
}

 #panel img {
	width: 400px;
	height: 266px;
}

 #thumbs {
	float: left;
	clear: left;
	text-align: center;
	padding-top: 10px;
	overflow: hidden;
	position: relative;
	width: auto;
	width: 40%;
 	display: inline;
}

 #thumbs img, #largeImage {
	padding: 4px;
	background-color: white;
	cursor: pointer;
	display:inline;
}

 #thumbs img {
	position: relative;
	margin-right: 5px;
	border: 5px black solid;
	display:inline-block;
}

 #navbar ul { 
	margin: 0 auto;
	padding: 7px;
	list-style-type: none;
	text-align: center;
	position: relative;
	background-color: #000;
	clear: both;
} 

 #navbar ul li { 
 	display: inline-block;
 	font-family: Verdana, sans-serif;
 	font-size: 12px;
 	text-decoration: bold;
 	clear: both;
} 

 #navbar ul li a {
 	text-decoration: none;
 	padding: .3em 1em;
 	color: #fff;
 	background-color: #000;
 	clear: both;
} 
 
 #navbar ul li a:hover {
 	color: #000; background-color: #fff;
 	clear: both;
} }

/* =============== MEDIA QUERY - 1200 MIN =============== */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 

/*padding = top right bottom left*/

 IMG.displayed {
	display: block;
	margin-left: auto;
	margin-right: auto; 
	width: 350px;
	height: 140px;
}

 .central {
 	padding: 10px 50px 10px 60px;
 	left-margin: auto;
 	text-align: center;
 	font-family: Verdana, sans-serif;
 	font-size: 13px;
 	float: left;
 	clear: left;
 	display: inline;
 	position: relative;
  	width: 40%;
}

 .main {
	padding: 30px 0px 30px 70px;
	float: left;
	clear: left;
	display: inline;
  	position: relative;
  	width: 40%;
}

 .description {
 	padding: 20px 40px 30px 0px;
 	text-align: center;
 	display: inline;
  	position: relative;
  	clear: right;
  	float: right;
  	width: 45%;
}

 .wrap {
  	min-height: 100%;
   	margin-bottom: -25px; /* equal to footer height */
}

 .wrap:after {
 	content: " ";
  	display: block;
}

 .site-footer {
 	width: 100%;
	position: relative;
	margin-top: -25px; /* negative value of footer height */
	height: 25px;
	clear:both;
}

 .site-footer, .push {
	height: 25px; /* .push must be the same height as .footer */
}

 #panel {
  	float: left;
	clear: left;
 	left-margin: auto;
	text-align: center;
	position: relative;
	width: 40%;
	width: auto;
 	display: inline;
}

 #panel img {
	width: 400px;
	height: 266px;
}

 #thumbs {
	float: left;
	clear: left;
	text-align: center;
	padding-top: 10px;
	overflow: hidden;
	position: relative;
	width: auto;
	width: 40%;
 	display: inline;
}

 #thumbs img, #largeImage {
	padding: 4px;
	background-color: white;
	cursor: pointer;
	display:inline;
}

 #thumbs img {
	position: relative;
	margin-right: 5px;
	border: 5px black solid;
	display:inline-block;
}

 #navbar ul { 
	margin: 0 auto;
	padding: 7px;
	list-style-type: none;
	text-align: center;
	position: relative;
	background-color: #000;
	clear: both;
} 
 
 #navbar ul li { 
 	display: inline-block;
 	font-family: Verdana, sans-serif;
 	font-size: 12px;
 	text-decoration: bold;
 	clear: both;
} 
 
 #navbar ul li a {
 	text-decoration: none;
 	padding: .3em 1em;
 	color: #fff;
 	background-color: #000;
 	clear: both;
} 
 
 #navbar ul li a:hover {
 	color: #000; background-color: #fff;
 	clear: both;
} }