/* CSS Document */
h1 { font-size:36px; }
h2 { font-size:30px; }
h3 { font-size:24px; }
h4 { font-size:18px; }
h5 { font-size:14px; }
h6 { font-size:12px; }

body, section {
	margin:0;
	padding:0;
	color: white;
	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
	font-weight: 100;
}

li {
	text-decoration: none;
	list-style: none;
}

a {
	color: white;
	font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
	font-weight: 300;
	text-decoration: none;
}
textarea, input, button { outline: none; }


ul.p-sideNav li, .addAnimation, .p-sideSubNav, ul.p-sideNav > li > img, .p-active {
	-webkit-transition:all ease-in-out 0.2s;
	-moz-transition:all ease-in-out 0.2;
	-o-transition:all ease-in-out 0.2;
}
.p-smallScreen {
	margin: 0 auto;
	position: absolute;
	width: 100%;
	background-color: #083F66;
	height: 100%;
	display: none;
	padding: 20px;
}
.p-smallScreen h1 {
	font-size: 20px;
	position: relative;
	margin: 50px auto;
	display: block;
	width: 500px;
	text-align: center;
	margin-top: 300px;
}
.p-main-container {
	margin: 0 auto;
	position: absolute;
	width: 100%;
	background-color: #083F66;
	height: 100%;
	display: inline-table;
}

.p-main-color2 {
	margin: 0 auto;
	width: 100%;
	min-width: 1000px;
	display: inherit;
	height: 100%;
	background: rgba(255,255,255,0.57);
	background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.57) 0%, rgba(255,255,255,0.48) 16%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,0.57)), color-stop(16%, rgba(255,255,255,0.48)), color-stop(100%, rgba(255,255,255,0)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.57) 0%, rgba(255,255,255,0.48) 16%, rgba(255,255,255,0) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.57) 0%, rgba(255,255,255,0.48) 16%, rgba(255,255,255,0) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.57) 0%, rgba(255,255,255,0.48) 16%, rgba(255,255,255,0) 100%);
	background: radial-gradient(ellipse at center, rgba(255,255,255,0.57) 0%, rgba(255,255,255,0.48) 16%, rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );

}


.p-h-title-container {
	width: 100%;
	position: relative;
	margin-top: 61px;
	margin-bottom: 0px;
	margin-left: auto;
	margin-right: auto;
}

.p-h-title-container h4 {
	color: white;
	position:relative;
	font-weight: 100;
	text-align: center;
	margin-top: 100px;
}

.p-container {
}

/* side nav */
.p-s-nav-container {
	width: 20%;
	float: left;
	position: relative;
}


ul.p-sideNav {
	margin-top: 50px;
	width: 100px;
	padding: 15px;
	
}

ul.p-sideNav > li {
	text-decoration: none;
	margin-bottom: 20px;
	width: 60px;
	height: 60px;
	position: relative;
	cursor: pointer;
	letter-spacing:1px;
	padding:10px 20px;
	font-size: 8px;
	
}
ul.p-sideNav > li > img {
	opacity:0.5;
}
ul.p-sideNav > li > img:hover {
	opacity:1;
}


ul.p-sideNav > li:first-child {
	margin-bottom: 10px;
	height: 80px;
}

ul.p-sideNav > li:first-child > span {
	top: 50px;
}
ul.p-sideNav > li:first-child > img {
	width: 40px;
	left: 7px;
}


ul.p-sideNav li > img{
	width: 50px;
    position: absolute;
    top: 0px;
    left: 5px;
	display: block;
}
ul.p-sideNav > li:last-child {
	height: 85px;
	margin-top: -10px;
}

ul.p-sideNav li:last-child > span {
	top: 60px;
}

ul.p-sideNav li:last-child > img {
    width: 25px;
    left: 16px;
}
ul.p-sideNav > li:nth-child(3) > span {
	top: 28px;
}
ul.p-sideNav > li:nth-child(4) {
	margin-top: -10px;
}
ul.p-sideNav > li:nth-child(4) > span {
	top: 28px;
}

ul.p-sideNav > li:nth-child(5) {
	margin-top: -10px;
}

ul.p-sideNav > li > span {
    font-size: 10px;
    position: absolute;
    left: 0px;
    top: 37px;
    width: 100%;
    text-align: center;
}



/* side menu active - submenu */

ul.p-sideSubNav1, ul.p-sideSubNav2, ul.p-sideSubNav3, ul.p-sideSubNav4, ul.p-sideSubNav5{
	width: 80px;
	height: auto;
	background-color: #051927;
	position: absolute;
	left: 90px;
	top: 70px;
	cursor:auto;
	border-radius: 8px;
	display: none;
	opacity: 0;
	z-index: 100;


}

ul.p-sideSubNav6  {
	width: 80px;
	height: auto;
	background-color: #051927;
	position: absolute;
	left: 90px;
	top: 150px;
	cursor:auto;
	border-radius: 8px;
	display: none;
}

ul.p-sideSubNav1 li, ul.p-sideSubNav2 li, ul.p-sideSubNav3 li, ul.p-sideSubNav4 li, ul.p-sideSubNav5 li, ul.p-sideSubNav6 li {
	width: 100%;
	height: 40px;
	margin: 5px 0px;
	cursor: pointer;
	position: relative;
	-webkit-transition:all ease-in-out 0.2s;
	-moz-transition:all ease-in-out 0.2;
	-o-transition:all ease-in-out 0.2;
}

ul.p-sideSubNav1 li:hover, 
ul.p-sideSubNav2 li:hover,
ul.p-sideSubNav3 li:hover,
ul.p-sideSubNav4 li:hover,
ul.p-sideSubNav5 li:hover,
ul.p-sideSubNav6 li:hover{
	background-color:rgba(192,226,248,0.64);
}

.color-active {
	background-color:rgba(192,226,248,0.64);
}

.p-main-arrow1, .p-main-arrow2, .p-main-arrow3, .p-main-arrow4, .p-main-arrow5, .p-main-arrow6 {
    position: absolute;
    left: -10px;
    width: 10px;
	z-index: 99;
}
.p-main-arrow1 {
	top: 15px;
}
.p-main-arrow2 {
    top: 95px;
}
.p-main-arrow3 {
    top: 166px;
}
.p-main-arrow4 {
    top: 235px;
}
.p-main-arrow5 {
    top: 304px;
}
.p-main-arrow6 {
    top: 315px;
}

ul.p-active {
	display: block;
	opacity: 1;
	
}
/* colors */
.c-bois-de-rose span,
.c-flame-red span, 
.c-geranium span, 
.c-bourgogne span,
.c-gris-paris span,
.c-meadow-natural span,
.c-celeste span,
.c-royal-blue span,
.c-shanghai-blue span,
.c-black span,
.c-cyan span,
.c-yellow span,
.c-blue span,
.c-burgundy span,
.c-fushcia span,
.c-pink span,
.c-blossom span
,.c-grey span{
	width: 60px;
    height: 30px;
    position: absolute;
    left: 10px;
    top: 5px;
	border-radius: 4px;
	z-index: 100;
}
.c-bois-de-rose span {background-color: #81443f;}
.c-flame-red span{background-color: #6e111b;}
.c-geranium span { background-color: #ab3831;}
.c-bourgogne span {background-color: #382423;}
.c-gris-paris span {background-color: #3f3d42;}
.c-meadow-natural span {background-color: #8e9d58;}
.c-celeste span {background-color: #526f97;}
.c-royal-blue span {background-color: #1d2146;}
.c-shanghai-blue span {background-color: #14111e;}
.c-black span {background-color: #100e11;}
.c-cyan span {background-color:#235262;}
.c-yellow span {background-color:#fff45f;}
.c-blue span {background-color:#19396c;}
.c-burgundy span {background-color:#9c2a2a;}
.c-fushcia span {background-color:#713247;}
.c-pink span {background-color:#9f7b7f;}
.c-blossom span {background-color:#a52543;}
.c-grey span {background-color:#7b7273;}

/* end colors */
.p-part-active {
	opacity: 1;
}
/* side menu active end*/


/* bag container and svg img */
.p-bag-main-container {
	width:60%;
	float: left;	
	display: block;
}


.p-bag-container, .bag-container-back {
	width: 80%;
	position: relative;
	margin: 10px auto;
	display: block;
}

.p-view-container {
	width: 80%;
	height: 100px;
	position: relative;
	
}

.p-view-container button {
	background-color: #042C48;
    border: none;
    color: white;
    padding: 8px 28px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
	margin: 0px;
	-webkit-transition:all ease-in-out 0.2s;
	-moz-transition:all ease-in-out 0.2;
	-o-transition:all ease-in-out 0.2;
	
}


.p-view-button-container {
	position: absolute;
	margin: 10px auto;
	display: inline-table;
	left:210px;
	top:30px;
}
.p-view-container button:first-child {
	border-top-left-radius: 35px;
	border-bottom-left-radius: 35px;
}

.p-view-container button:last-child{
	border-bottom-right-radius: 35px;
	border-top-right-radius: 35px;
}

.p-view-container button:hover {
	background-color: #005590;
}


.p-bag-img-f {
	width: 60%;
	margin: 88px auto 28px auto;
	display: block;
}

.p-bag-img-b{
	width: 60%;
	margin: 88px auto 28px auto;
	display: none;
}
.p-bag-img-m{
	width: 60%;
	margin: 88px auto 28px auto;
	display: none;
}
.viewChange {
	display: none;
}


/* end bag container */

.p-s-info-container {
	width: 20%;
    float: left;
    margin-top: 50px;
    padding: 10px 20px;
    border: 1px solid white;
    border-radius: 10px;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.p-s-info-container h4 {
	font-size: 14px;
}

.p-s-info-container p {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px
}
.p-s-info-container li{
	font-weight: 100;
	font-size: 14px;
}
span.p-line {
	border-bottom: 1px solid rgba(255,255,255,1.00);
	display: block;
	width: 100%;
	
}

/* bag color start*/
.p-btn-container{
	width: 100%;
	display: block;
	position: relative;
	height: 50px;
}
.p-btn-container input {
	background-color: rgba(96,159,52,1.00);
	text-decoration: none;
	border:none;
	width: 100%;
	margin: 0 auto;
	padding: 10px 20px;
	display: block;
	border-radius: 50px;
}

.p-btn-container input:hover {
	background-color: rgba(125,174,91,1.00);
}



.bag-container, .bag-container-back  {
	width: 400px;
	margin: 0px auto;
	display: block;
}

.leatherColor-pattern {
	fill:white;
	stroke: #0C1539;
	stroke-width: 0.25px;
}
.leatherColor-background {
	    fill: rgb(230, 230, 230);
}
.bag-handle-leather {
	fill: white;
}

.handle-background-color {
	fill:grey;
}
.bag-body-line, .bag-pocket-line, .bag-flap2-line, .bag-flap-line {
	stroke: #313231;
	fill: none;
	stroke-dasharray: 10 1;
}
.bag-flap2-color {
	    fill: rgb(230, 230, 230);
	stroke: black;
	stroke-width: 1px;
}
.bag-flap-color {
	    fill: rgb(230, 230, 230);
	stroke: black;
	stroke-width: 1px;
}
.bag-pocket {
	fill: white;
	
}
.bag-pocket-leather {
	fill: white;
}
.bag-side {
	fill: white;
}


	
  .cls-10 {
	stroke: #684c14;
  }

  .cls-11 {
	fill: #3d3859;
  }

  .cls-12, .cls-15 {
	fill: #fff;
  }

  .cls-12, .cls-13 {
	stroke-width: 0.5px;
  }

  .cls-13 {
	fill: #3b3d34;
  }

  .cls-14 {
	fill: #adbbb9;
  }

  .cls-15 {
	stroke-width: 0.15px;
  }
.stbrand {
	    fill: white;
    stroke: black;
    stroke-width: 0.3;
}
.porosus-container-full {
	width:100%;
	margin:0;
	position: absolute;
	bottom:0px;
}
.porosus-footer span{
	margin-left: 10px;
}
.brand-malaysia-logo img{
	width: 20px;
}

/* bag color end */
@media (max-width: 1199px){
	
	.p-view-button-container {
		position: absolute;
		margin: 10px auto;
		display: inline-table;
		left:150px;
		top:30px;
	}



}


@media (max-width: 992px){
	.navbar-header {
		width: 100%;
		position: relative;
	}
	.navbar-brand {
		margin: 0 auto;
		position: relative;
		float: none;
	}
	.navbar-brand > img {
		width: 140px;
		margin: 0 auto;
		position: relative;
	}
	
	.navbar-right {
		float: right;
		margin: 0 auto;

	}
	.p-view-button-container {
		left: 78px;
	}

}

@media (max-width: 767px){
	.navbar-header {
		width: auto;
		position: relative;
	}
	.navbar-brand {
		margin:auto;
		position: relative;
		float: left;
	}
	.navbar-brand > img {
		width: 140px;
		margin:auto;
		position: relative;
	}
	
	.navbar-right {
		float: left;
		margin: 0 auto;

	}
	.p-view-button-container {
		left: 150px;
	}
	.p-smallScreen {
		display: block;
	}
	.p-main-container{
		display: none;
	}
}