@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/ 
*/

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

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		6;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	15;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

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

.gridContainer {
	width: 100%;
	padding: 0;
	display:block;
	clear:both;
	margin-left: 0%;
	margin-right: 0%;
	-webkit-overflow-scrolling: touch;
	overflow:hidden;
	position:relative;
}
#logo {
	height: 125px !important;
	width: 90%;
}

header {
	top: -110px;
	height: 0;
}
#desknav {
	display:none;
}
#phonenav {
	display:block;
}
.hkc-md-3 {
	width:100%;
}.hkc-md-4 {
	 width:100%;
 }
.mainheading-wrapper .header_text h1 {
	font-size:2em !important;
}
.hikashop_product_left_part {
	width:100%;
}
.hikashop_product_right_part{
	width:100%;
}
#footmods div.moduletable {width: calc(100% - 40px);}

#copyright {
	text-align:center;
	width:100%;
}
#lbs {
	text-align:center;
	width:100%;
}
#home #contentarea {
	width:100% !important
}
#home #right {
	float:left;
	width:100% !important;
}
#home #main-bottom {
	float:left;
	width: 100%;
	margin: 0;
}
#main-bottom div.moduletablesquare {
	width: 100%;
	max-width: calc(100% - 0px) !important;
	margin: 0 0px 0 0;
}
#main-bottom div.moduletablewide {
	width: 100%;
	max-width: calc(100% - 0px) !important;
	margin: 0 0px 0px 0;
}

#main-bottom h2 {
	font-size:2em;
}
#right h2 {
	font-size:2em;
}
#contentarea div.main_des_container h3 {
	font-size: 2em;
}
#contentarea div.main_des_container {
	font-size:1em;
}
.splitdiv {
	width:100%;
}
.splitdiv:nth-of-type(even){
	width:calc(100% - 0px);
	margin:0;
}
#logo img {
	display:none;
}
#logo::before {
	content: url("../images/DP-logo-sq.svg");
	max-width: 150px;
	display: block;
	margin: 0 auto;
}
#ovcontent h2 {
	font-size:2em !important;
}
#closeova {
	font-size:2em;
}
div.moduletabletall {margin-bottom: 0;}
.moduletabletall .main_image_overlay_wrapper {max-height: 100% !important;}

/* Landscape Phone Layout: 481px to 600px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
	.gridContainer {
		width: 100%;
		padding: 0;
		display:block;
		clear:both;
		margin-left: 0%;
		margin-right: 0%;
		-webkit-overflow-scrolling: touch;
		overflow:hidden;
		position:relative;
	}

	#desknav {
		display:none;
	}
	#phonenav {
		display:block;
	}

	.hkc-md-3 {
		width:100%;
	}.hkc-md-4 {
		 width:100%;
	 }
	.mainheading-wrapper .header_text h1 {
		font-size:2em !important;
	}
	#footmods div.moduletable {
		width: calc(50% - 40px);
		min-height: 17vh;
	}

	#copyright {
		text-align:center;
		width:100%;
	}
	#lbs {
		text-align:center;
		width:100%;
	}
	#home #right {
		float:right;
		width: 46% !important;
		margin: 0;
	}
	#home #main-bottom {
		float:left;
		width: 54%;
		margin: 0;
	}
	#main-bottom div.moduletablesquare {
		width: 100%;
		max-width: calc(100% - 10px) !important;
		margin: 0 10px 0 0;
	}
	#main-bottom div.moduletablewide {
		width: 100%;
		max-width: calc(100% - 10px) !important;
		margin: 0 0px 0px 0;
	}
	#main-bottom h2 {
		font-size:1.2em;
	}
	#right h2 {
		font-size:1.2em;
	}
	#contentarea div.main_des_container h3 {
		font-size: 3em;
	}
	#contentarea div.main_des_container {
		font-size:1em;
	}
	.splitdiv {
		width:100%;
	}
	.splitdiv:nth-of-type(even){
		width:calc(100% - 0px);
		margin:0;
	}
	#logo img {
		display:none;
	}
	#logo::before {
		content: url("../images/DP-logo-sq.svg");
		max-width: 150px;
	}
	#ovcontent h2 {
		font-size:3em !important;
	}
	#closeova {
		font-size:2em;
	}
	div.moduletabletall {margin-bottom: 0px;}
	.moduletabletall .main_image_overlay_wrapper {max-height: 65vw !important;}

}
/* Tablet Layout: 600px to 768px. Inherits styles from: Mobile Layout. */


@media only screen and (min-width: 600px) {
	.gridContainer {
		width: 100%;
		padding: 0;
		display:block;
		clear:both;
		margin-left: 0%;
		margin-right: 0%;
		-webkit-overflow-scrolling: touch;
		overflow:hidden;
		position:relative;
	}

	#desknav {
		display:none;
	}
	#phonenav {
		display:block;
	}

	.hkc-md-3 {
		width: calc(50% - 5px);
	}
	.hkc-md-4 {
		width: calc(50% - 5px);
	}
	.mainheading-wrapper .header_text h1 {
		font-size: 3em !important;
	}
	#footmods div.moduletable {
		width: calc(50% - 40px);
		min-height: 17vh;
	}

	#copyright {
		text-align:left;
		width:50%;
	}
	#lbs {
		text-align:right;
		width:50%;
	}
	#home #contentarea {
		width:100% !important
	}
	#main-bottom div.moduletablesquare {
		width: 100%;
		max-width: calc(100% - 10px) !important;
		margin: 0 10px 0 0;
	}
	#main-bottom div.moduletablewide {
		width: 100%;
		max-width: calc(100% - 10px) !important;
		margin: 0 0px 0px 0;
	}
	#main-bottom h2 {
		font-size:1.4em;
	}
	#right h2 {
		font-size:1.4em;
	}
	#contentarea div.main_des_container h3 {
		font-size: 3em;
	}
	#contentarea div.main_des_container {
		font-size:1em;
	}
	#logo img {
		display:none;
	}
	#logo::before {
		content: url("../images/DP-logo.svg");
		max-width: 100%;
	}
	#closeova {
		font-size:3em;
	}
	#logo {
		height: 100% !important;
		width: 90%;
	}
	.splitdiv:nth-of-type(even){
		width:calc(50% - 10px);
		margin:0 0 0 10px;
	}
	div.moduletabletall {margin-bottom: 0px;}
	.moduletabletall .main_image_overlay_wrapper {max-height: 67vw !important;}

}
/* Tablet Layout: 768px to 1024px. Inherits styles from: Mobile Layout. */


@media only screen and (min-width: 768px) {
	.gridContainer {
		width: 100%;
		padding: 0;
		display:block;
		clear:both;
		margin-left: 0%;
		margin-right: 0%;
		-webkit-overflow-scrolling: touch;
		overflow:hidden;
		position:relative;
	}

	#desknav {
		display:none;
	}
	#phonenav {
		display:block;
	}
	#logo {
		height: 100% !important;
		width: 90%;
	}
	.hkc-md-3 {
		width: calc(33.33% - 5px);
	}
	.hkc-md-4 {
		width: calc(33.33% - 5px);
	}
	.mainheading-wrapper .header_text h1 {
		font-size: 4em !important;
	}
	.hikashop_product_left_part {
		width: 50%;
	}
	.hikashop_product_right_part {
		width:50%
	}
	#footmods div.moduletable {
		width: calc(33.33% - 40px);
	}
	.footmodgroup {width: calc(33% - 40px);display: inline-block;position: relative;float: left;margin: 40px 20px;}
	.footmodgroup div.moduletable {width:100% !important;margin: 0 !important;}

	#footmods div.moduletable:nth-of-type(1) {
		height:300px;
	}
	#footmods div.moduletable:nth-of-type(2) {
		width: 50%;
		min-height: 0vh;
		margin:40px 40px 0px 20px;
	}

	#footmods div.moduletable:nth-of-type(3) {
		width: 50%;
		min-height: 0vh;
	}
	#footmods div.moduletable:nth-of-type(4) {
		position:absolute;
		right:0;
	}
	#copyright {
		text-align:left;
		width:50%;
	}
	#lbs {
		text-align:right;
		width:50%;
	}
	#home #contentarea {
		width:100% !important
	}
	#home #right {
		float:right;
	}
	#home #right {
		float: right;
		width: 50% !important;
	}
	#home #main-bottom {
		float:left;
		width:50%;
	}
	#main-bottom div.moduletablesquare {
		width: 100%;
		max-width: calc(100% - 10px) !important;
		margin: 0 5px 5px 0;
	}
	#main-bottom div.moduletablewide {
		width: 100%;
		max-width: calc(100% - 10px)!important;
		margin: 0 5px 0px 0;
	}

	#main-bottom h2 {
		font-size:1.5em;
	}
	#right h2 {
		font-size:1.5em;
	}
	#contentarea div.main_des_container h3 {
		font-size: 3em;
	}
	#contentarea div.main_des_container {
		font-size:1em;
	}
	.splitdiv {
		width:calc(50% - 10px);
	}
	.splitdiv:nth-of-type(even){
		width:calc(50% - 10px);
		margin:0 0 0 10px;
	}
	#logo img {
		display: none;
	}
	#logo::before {
		content: url("../images/DP-logo.svg");
		max-width: 100%;
		display: block;
	}
	#ovcontent h2 {
		font-size:4em !important;
	}
	#closeova {
		font-size:4em;
	}
	div.moduletabletall {margin-bottom: 5px;}
	.moduletabletall .main_image_overlay_wrapper {max-height: 56vw !important;}

}

/* Desktop Layout: 1024px to a max of 1200px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1024px) {
	.gridContainer {
		width: 100%;
		padding: 0;
		display:block;
		clear:both;
		margin-left: 0%;
		margin-right: 0%;
		-webkit-overflow-scrolling: touch;
		overflow:hidden;
		position:relative;
	}
	#logo {
		/* max-width: 100%; */
		height: 100% !important;
		width: 80%;
	}

	header {
		top:0px;
		height: auto;
	}
	#desknav {
		display:block;
	}
	#phonenav {
		display:none;
	}
	.hkc-md-3 {
		width:25%;
	}
	.hikashop_product_left_part {
		width:50%;
	}
	#footmods div.moduletable {
		width: calc(25% - 40px);
	}

	#copyright {
		text-align:left;
		width:50%;
	}
	#lbs {
		text-align:right;
		width:50%;
	}
	#home #contentarea {
		width:75% !important;
	}
	#home #right {
		float:left;
		width: calc(25% - 10px) !important;
		margin: 0 0 0 10px;
	}
	#home #main-bottom {
		float:left;
		width: 100%;
		max-width: 100% !important;
	}

	#main-bottom div.moduletablesquare {
		width: calc(25% - 10px);
		max-width: 100% !important;
		margin: 0 0 0 10px;
	}
	#main-bottom div.moduletablewide {
		width: 100%;
		max-width: 50% !important;
		margin: 0;
	}
	.hkc-md-3 {
		width: calc(25% - 5px);
	}
	.hkc-md-4 {
		width: 25%;
	}
	.mainheading-wrapper .header_text h1 {
		font-size: 5em !important;
	}
	#footmods div.moduletable:nth-of-type(1) {
		height:100%;
	}
	#footmods div.moduletable:nth-of-type(2) {
		width: calc(25% - 50px);
		min-height: 0vh;
		margin:40px 40px 0px 20px;
	}

	#footmods div.moduletable:nth-of-type(3) {
		width: calc(25% - 50px);
		min-height: 0vh;
		font-size: 1em;
	}
	#footmods div.moduletable:nth-of-type(4) {
		position:relative;
		right:0;
	}

	#main-bottom h2 {
		font-size:1.3em;
	}
	#right h2 {
		font-size:1.3em;
	}
	#contentarea div.main_des_container h3 {
		font-size: 3em;
	}
	#contentarea div.main_des_container {
		font-size:1em;
	}
	.splitdiv {
		width: calc(50% - 10px);
	}
	.splitdiv:nth-of-type(even){
		width:calc(50% - 10px);
		margin:0 0 0 10px;
	}
	#logo img {
		display:none;
	}
	#logo::before {
		content: url("../images/DP-logo.svg");
	}
	div.moduletabletall {margin-bottom: 5px;}
	.moduletabletall .main_image_overlay_wrapper {max-height: 33.8vw !important;}

}

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

@media only screen and (min-width: 1200px) {
	.gridContainer {
		width: 100%;
		padding: 0;
		display:block;
		clear:both;
		margin-left: 0%;
		margin-right: 0%;
		-webkit-overflow-scrolling: touch;
		overflow:hidden;
		position:relative;
	}

	#desknav {
		display:block;
	}
	#phonenav {
		display:none;
	}
	.mainheading-wrapper .header_text h1 {
		font-size: 6em !important;
	}
	#footmods div.moduletable {
		width: calc(25% - 50px);
	}

	#copyright {
		text-align:left;
		width:50%;
	}
	#lbs {
		text-align:right;
		width:50%;
	}
	#main-bottom h2 {
		font-size:1.6em;
	}
	#right h2 {
		font-size:1.6em;
	}
	.splitdiv {
		width: calc(50% - 10px);
	}
	.splitdiv:nth-of-type(even){
		width:calc(50% - 10px);
		margin:0 0 0 10px;
	}
	#logo {
		/* max-width: 100%; */
		height: 100% !important;
		width: 70%;
	}
	#footmods div.moduletable:nth-of-type(3) {
		font-size: 1.2em;
	}
	#contentarea div.main_des_container h3 {
		font-size: 4em;
	}
	div.moduletabletall {margin-bottom: 5px;}
	.moduletabletall .main_image_overlay_wrapper {max-height: 34.1vw !important;}

}

/* LargeDesktop Layout: 1800px to a max of max.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 1800px) {
	.gridContainer {
		width: 100%;
		padding: 0;
		display:block;
		clear:both;
		margin-left: 0%;
		margin-right: 0%;
		-webkit-overflow-scrolling: touch;
		overflow:hidden;
		position:relative;
	}

	#desknav {
		display:block;
	}
	#phonenav {
		display:none;
	}
	#footmods div.moduletable {

	}

	#copyright {
		text-align:left;
		width:50%;
	}
	#lbs {
		text-align:right;
		width:50%;
	}
	#main-bottom h2 {
		font-size:2em;
	}
	#right h2 {
		font-size:2em;
	}
	.splitdiv {
		width: calc(50% - 10px);
	}
	.splitdiv:nth-of-type(even){
		width: calc(50% - 10px);
	}
	#logo {
		/* max-width: 100%; */
		height: 100% !important;
		width: 60%;
	}
	div.moduletabletall {margin-bottom: 5px;}
	.moduletabletall .main_image_overlay_wrapper {max-height: 34.6vw !important;}

}