body {
	height: 100%;
}
#nav.affix {
	position: initial;
}
.topsocial {
    padding-left: 40px;
}
.fullBgDetail {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#wrapper-bgproduct {
    /* full bg */
    position: absolute;
  	top: 15%;
  	left: 0;
  	width: 100%;
    height:100%;
    margin: 0;
    padding: 0;
}
h1 {
	font-size: 1.5em;
	margin-top: 0;
	text-align: right;
	display: inline-block;
	float: right;
	line-height: auto;
}
ul {
	padding-left: 0;
}
.snapshot {
	display: inline-block;
	float: left;
	font-size: 1.5em;
}
.producttitle {
    margin-right: 20px;
    position: fixed;
    text-align: right;
    top: 105px;
    width: 78%;
}
.content {
	padding: 0;
	min-height: 800px;
}
/* product detail */
.boxmain {
    z-index: 4;
	position: absolute;
	top: 35%;
	width: 50%;
	margin-left: -120px;
	margin-top: -120px;
	left: 50%;
	padding: 15px;
	background: rgba(0, 0, 0, 0.5);
	color: #ffffff;
}
.boxmain a { color: #ffffff; }
body.swimwear .boxmain {
	background: rgba(255, 255, 255, 0.6);
}
.box {
    float: right;
    width: 100%;
}
.box .table { width: auto; margin: 20px 0 0 0; }
.box .table .row-first li, .box .table .row-last li { display: inline-block; width: 15%; padding: 3px 0; margin: 0 0; vertical-align: top; }
.box .table .row-first li span.header, .box .table .row-last li span.header { width: 100%; display: block; font-weight: bold; padding: 3px 0; text-align: center; background: rgba(0, 0, 0, 0.5); color: #ffffff; }
.box .table .row-first li span { width: 100%; display: block; padding: 3px 0; text-align: left; }

.box .table .row-first li.detail, .box .table .row-last li.detail { width: 35%; }
.box .table .row-first li.side, .box .table .row-last li.side { width: 35%; }
.box .table .row-first li.color, .box .table .row-last li.color { width: 30%; }

.box .table .row-first li.detail.css5cols, .box .table .row-last li.detail.css5cols { width: 30%; }
.box .table .row-first li.side.css5cols, .box .table .row-last li.side.css5cols { width: 10%; }
.box .table .row-first li.color.css5cols, .box .table .row-last li.color.css5cols { width: 26%; }

.box .table .row-first li.color-long, .box .table .row-last li.color-long { width: 32%; }
.box .table .row-last li span.header { display: none; }

.boxbutton { width: 100%; text-align: right; display: block; text-transform: uppercase; }

#boxload { min-height: 500px; }

/* nav_page */
#nav_page, #nav_page_mobile {
	width: 100%;
	z-index: 2;
    position: absolute;
    top: 50%;
    left: 0;
    height: 90%;
}
#nav_page_previous, #nav_page_previous_mobile {
    display: block;
    width: 45%;
    padding-left: 5%;
    padding-top: 15%;
    height: 100%;
    float: left;
    text-align: left;
}
#nav_page_next, #nav_page_next_mobile {
    display: block;
    width: 45%;
    padding-right: 5%;
    padding-top: 15%;
    height: 100%;
    float: right;
    text-align: right;
}
#nav_page.h, #nav_page_mobile.h {
	height:250%;
}

@media only screen and (min-width: 737px) and (max-width: 1024px) {
	.producttitle, .boxmain { width: 98%; }
	#nav_page { height: 60%; }
	#nav_page.h { height: 140%; }
}

@media only screen and (min-width: 0px) and (max-width: 736px) {
	h1, .snapshot { font-size: 1.15em; }
	h1 { color: #000000; }
	.boxmain { margin-left: -175px; width: 95%; margin-top: -120px; }
	.boxbutton { font-size: 1em; }	
	.boxmain {
		position: initial;
		margin-left: 0;
		width: 100%;
		margin-top: 0;
		padding: 0;
	}
	.box { float: initial; }
	.snapshot, .boxbutton { padding: 15px; }

	/* 2rows 5cols */
	.box .table .row-first li.css5cols, .box .table .row-last li.css5cols { width: 20% !important; font-size: 0.7em; }
	.box .table .row-first li.side.css5cols, .box .table .row-last li.side.css5cols { width: 10% !important; }
	.box .table .row-first li.detail.css5cols, .box .table .row-last li.detail.css5cols { width: 26% !important; }
	.box .table .row-first li.color.css5cols, .box .table .row-last li.color.css5cols { width: 17% !important; }
	.box .table .row-first li.color-long.css5cols, .box .table .row-last li.color-long.css5cols { width: 17% !important; }
	
	/* 1row 4cols */
	.box .table .row-first li { width: 22% !important; font-size: 0.7em; }
	.box .table .row-first li.detail { width: 35% !important; }
	.box .table .row-first li.color { width: 17% !important; }
	.box .table .row-first li.color-long { width: 17% !important; }

	#nav_page_mobile { height: 40%; top: 30%; }
	#nav_page_mobile.h { height: 90%; top: 30%; }
	#nav_page_mobile #nav_page_previous_mobile, #nav_page_mobile #nav_page_next_mobile {
		padding-top: 30%;
	}
	#nav_page_mobile.h #nav_page_previous_mobile, #nav_page_mobile.h #nav_page_next_mobile {
		padding-top: 70%;
	}
	#btnnext_mobile, #btnprvious_mobile { width: 30px; }
}

/* ipad - landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.boxmain {
		margin-left: -470px;
		width: 90%;
	}
}

/* ipad - portrail*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	body.athleisure .boxmain {
		width: 90%;
    	margin-top: -360px;
    	margin-left: -350px;
	}
	h1 { color: #000000; }
	.boxmain {
		position: initial;
		margin-left: 0;
		width: 100%;
		margin-top: 0;
	}
	.box { float: initial; }
	.visiblemobile { display: block; }
	.invisiblemobile { display: none; }
	#nav_page.h { height: 140%; }
}

@media only screen and (min-width: 1920px) {
	.boxmain {
	    top: 15%;
	  }
}

/* andriod 
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-min-device-pixel-ratio : 4) and (-webkit-device-pixel-ratio : 4) and (orientation: portrait) {
	.boxmain { margin-top: -500px; }
}*/