@import 'https://fonts.googleapis.com/css?family=Roboto+Slab:400,100';
@import 'https://fonts.googleapis.com/css?family=Roboto:400,700';

* {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	text-decoration:none;
	font-size:100%;
	-webkit-text-size-adjust:none;
	vertical-align:baseline;
	background:transparent;
	position:relative;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

html,body {
	margin:0;
	width:100%;
	height:100%;
}

body {
	background:#eee url(i/bg.png);
}

body,button,input,select,textarea {
font:16px/1.4 'Roboto',sans-serif;
	color:#888;
	font-weight:400;
	-webkit-font-smoothing:antialiased;
}

img {
	border:none;
	max-width:100%;
	vertical-align:top;
}

a,:focus {
	outline:0;
}

a:link,a:visited {
	text-decoration:none;
	color:#ccc;
}

a:hover {
	color:#8ec2dd;
}

.button {
	display:inline-block;
	padding:6px 16px;
	background:#8ec2dd;
	color:#fff!important;
	font-weight:700;
	text-align:center;
	font-size:.875em;
	cursor:pointer;
	border-radius: 200px;
}

.button:hover {
	background:#555;
}

/* navigation  ---------------------------------------- */
nav {
	display:block;
	background:#333;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:99;
}

.nav-menu {
	list-style:none;
	overflow:hidden;
	clear:both;
	max-height:0;
	transition:max-height .4s ease-out;
	margin:0;
	padding:0;
	background:#555;
}

.nav-menu li a {
	font-size:1.0625em;
	padding-bottom:8px;
	text-transform:uppercase;
	display:block;
	padding:12px 20px;
	font-family: 'Roboto Slab', serif;
}

.nav-menu li a:link,.nav-menu li a:visited {
	color:#ccc;
}

.nav-menu li.selected a, .about .nav-menu li.about a, .brands .nav-menu li.brands a, .resources .nav-menu li.resources a, .contact .nav-menu li.contact a  {
	color:#fff;
	background:#8ec2dd;
}

.nav-ico {
	cursor:pointer;
	display:inline-block;
	float:right;
	padding:21px 16px;
	position:relative;
	user-select:none;
	width:auto;
}

.nav-ico span {
	background:#fff;
	display:block;
	height:2px;
	position:relative;
	transition:background .2s ease;
	width:18px;
}

.nav-ico span:before,.nav-ico span:after {
	background:#fff;
	content:'';
	display:block;
	height:100%;
	position:absolute;
	transition:all .2s ease;
	width:100%;
}

.nav-ico span:before {
	top:6px;
}

.nav-ico span:after {
	top:-6px;
}

#nav-btn {
	display:none;
}

#nav-btn:checked ~ .nav-menu {
	max-height:400px;
}

#nav-btn:checked ~ .nav-ico span {
	background:transparent;
}

#nav-btn:checked ~ .nav-ico span:before {
	transform:rotate(-45deg);
}

#nav-btn:checked ~ .nav-ico span:after {
	transform:rotate(45deg);
}

#nav-btn:checked ~ .nav-ico span:before,#nav-btn:checked ~ .nav-ico span:after {
	top:0;
}

/* Typography ---------------------------------------- */
h2,h3,h4,h5,h6 {
	font-weight:400;
	font-family: 'Roboto Slab', serif;
}

h1 {
	font-size:3.375em;
	font-weight:100;
	letter-spacing:-5px;
	margin-bottom:.625em;
}

h2 {
	font-size:1.5em;
	color:#8ec2dd;
	letter-spacing:-1px;
	line-height: 1.2;
	margin-bottom:.875em;
}

h3 {
	font-size:1.125em;
	color:#aaa;
	margin-bottom:.625em;
}

h4 {
	font-size:.9375em;
	color:#444;
	margin-bottom:.3125em;
}

.sidebar h4 {
	color:#bbb;
}

h5 {
	font-size:.8125em;
	font-family: Georgia, serif;
	margin-bottom:.625em;
}

h6 {
	font-size:.75em;
	font-style:italic;
	margin-bottom:1.25em;
}

p {
	font-size:.875em;
	hyphens:auto;
	margin-bottom:1.5em;
}

strong {
	color:#555;
}

.content ul {
	list-style:disc;
	margin:0 0 1.25em 1.25em;
}

.content li{
	font-size: .875em;
	padding-bottom: 2px;
}

hr {
display: block;
position: relative;
padding: 0;
margin-bottom:20px;
width: 100%;
clear: both;
border: none;
border-top: 1px solid #eee;
font-size: 1px;
line-height: 0;
overflow: visible;
}

.sidebar hr{
	border-color: #555;
}

/* Tables
---------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: .875em;
	margin-bottom: 3.125em;
max-width: 100%;
}

th {
	text-align: left;
	vertical-align: middle;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	background: #888;
	padding: .5em 1.5em;
}

td, td img {
	vertical-align: top;
}

td {
	padding: 1em 1.5em;
}

tr {
  background-color: #e2e2e2;
}

tr:nth-child(odd) {
  background-color: #f0f0f0;
}

/* layout  ---------------------------------------- */
.container {
	width:100%;
	max-width:1140px;
	margin:0 auto;
	background:#fff;
}

.logo {
	display:block;
	text-align:center;
	letter-spacing:8px;
	font-size:.813em;
	margin-bottom:2.5em;
	cursor:pointer;
	color:#aaa!important;
	text-transform: uppercase;
}

.logo img {
	width:100%;
	max-width:210px;
	margin:0 auto 10px;
	display:block;
}

.main {
	width:100%;
	padding-top:42px;
}

.content {
	margin-top: 44.4444%;
	padding: 1.25em;
}

.brand-logo{
	max-width: 250px;
	display: block;
	margin: 0 auto;
}

.no-logo{
	font-size: 2em;
	letter-spacing: -2px;
	color: #ccc;
	margin: 25px;
}

.inline-block{
	display: inline-block;
}

.no-border{
	border: none;
}
.no-shadow{
	box-shadow: none !important;
}

.aside {
	padding: 1.25em;
	background: #f0f0f0;
}

.aside a:link,.aside a:visited, .content a:link,.content a:visited {
	color:#555;
	border-bottom: 1px dotted #aaa;
}

.aside li.selected a{
	border: none;
	color:#8ec2dd;
}

.brands-index{
	text-align: center;
	margin-bottom: 2.5em;
}

.brands-index img{
	max-width: 130px;
	display: inline-block;
	margin:1em;
	text-decoration: none;
	vertical-align: middle;
}

.brands-index a:link,.brands-index  a:visited {
	border-bottom: none;
}

p.title{
	border-bottom: 1px solid #ddd;
	padding-bottom: .25em;
	margin-bottom: 1em;
}

.sidebar {
	padding:1.25em;
	background-color:#444;
}

.sidebar ul,.aside ul {
	list-style:none;
	margin-bottom:1.875em;
}

.sidebar li,.aside li {
	font:.875em/1 Georgia,serif;
	font-style:italic;
	padding-bottom:1.25em;
}

.sidebar li.selected a, 
.ck .ck a,
.adc .adc a,
.hyp .hyp a,
.mm .mm a,
.nb .nb a,
.somi .somi a,
.kiff .kiff a,
.kas .kas a,
.dpm .dpm a,
.dorelan .dorelan a,
.sanderson .sanderson a,
.valeron .valeron a,
.bossa .bossa a,
.kinu .kinu a,
.hugo .hugo a,
.vispring .vispring a,
.vranjes .vranjes a,
.olivier .olivier a,
.iosis .iosis a,
.at .at a,
.kenzo .kenzo a,
.laperla .laperla a,
.lacoste .lacoste a,
.roberto .roberto a,
.yves .yves a,
.somma .somma a,
.brignoli .brignoli a,
.aram .aram a,
.baobab .baobab a,
.serta .serta a,
.lotus .lotus a,
.abyss .abyss a,
.move .move a,
.essix .essix a,
.assouline .assouline a,
.eichholtz .eichholtz a,
.paradies .paradies a,
.versace .versace a,
.others .others a
{
	color:#8ec2dd;
}

.cyc a {
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	transition:opacity 2s;
	opacity:0;
	display:block;
	cursor: default;
}

.cyc a:first-child {
	z-index:2;
	opacity:1;
}

.cyc a:last-child {
	z-index:1;
	opacity:1;
}

.cyc a img{
	max-width: 100%;
	background: #ccc;
}

.tagline {
	display:none;
}

.footer {
	clear:both;
	text-align:center;
	width:100%;
	max-width:1140px;
	padding:1.25em;
	background:#222;
	margin:0 auto;
	font-family: 'Roboto Slab', serif;
}

p.credit {
	font-size:.75em;
}

p.credit a {
	color:#888;
}

p.country span {
	display:block;
}

.singapore p.country a:first-child, .malaysia p.country a:nth-child(2), .indonesia p.country a:nth-child(3), .philippines p.country a:nth-child(4) {
	color:#8ec2dd;
}

.social img {
	display:inline-block;
	width:35px;
	height:35px;
	margin:0 5px;
}

iframe {
	width: 100%;
	height: 400px;
	border: none;
	margin: 1.25em 0;
	background: #ccc;
}

img.thumb{
	box-shadow: 3px 5px 16px rgba(0,0,0,.15);
	margin-bottom: 1em;
	background: #ccc;
}

a.folder{
	width: 80px;
	height: 100px;
    padding: 30px 5px;
    background: #8ec2dd;
    color: #fff !important;
    display: inline-block;
    font-size: .75em;
    line-height: 1.1;
    text-align: center;
    font-weight: 700;
    overflow: hidden;
    margin-right: 10px;
    margin-top: 10px;
    text-transform: uppercase;
    vertical-align: bottom;
}

a.folder:after{
  content: "";
  position: absolute;
  top: 0%;
  left: 65px;
  width: 0;
  height: 0;
  border-bottom: 15px solid #729db3; 
  border-right: 15px solid #fff;
}

@media screen and (min-width:48em) {
	a {
		transition:1s color;
	}
	
	nav {
		background:transparent;
	}
	
	.nav-menu {
		max-height:none;
		overflow:auto;
		display:-ms-flexbox;
		display:-webkit-flex;
		display:flex;
		background:rgba(0,0,0,0.8);
	}
	
	.nav-menu li {
		-ms-flex: 1 0 auto;
		flex-grow:1;
	}
	
	.nav-menu li a {
		padding:16px 25px;
		text-align:center;
		color:#fff;
		text-transform:uppercase;
		font-size:.875em;
		background:none;
	}
	
	.nav-menu li a:hover {
		color:#8ec2dd;
	}
	
	.nav-ico {
		display:none;
	}
	
	.container {
		display:-ms-flexbox;
		display:-webkit-flex;
		display:flex;
	}
	
	.logo {
		margin-bottom:6em;
	}
	
	.main {
		width:75%;
		padding-top:0;
		-ms-flex-order: 2;
		order:2;
		background: #fff;
		background: linear-gradient(to right, #ffffff 0%,#ffffff 70%,#f0f0f0 70%,#f0f0f0 100%);
	}
	
	.content {
		width:70%;
		float:left;
		margin-top: 44.4444%;
		padding: 2em;
	}	
	
	.main.full-width{
		background: #fff;
	}
	
	.full-width .content{
		width: 100%;
	}
	
	.brand-logo{
	margin: 0;
	}
	
	.brands-index{
	text-align: center;
	}
	
	.brands-index img{
	max-width: 162px;
	}
	
	.sidebar {
		width:25%;
		padding:1.875em;
		background:#444 url(i/logo-pat.png) -200% bottom no-repeat;
		background-size:110% auto;
	}
	
	.aside {
		width:30%;
		float:left;
		padding:48% 1.875em 1.875em;
	}
	
	p.country a {
		margin:0 15px;
	}
	
	p.country span {
		display:inline;
	}
	
	.social img:hover {
		opacity:.5;
	}
	
	tr:hover{ 
		background: #fefefe;
	}
	a.folder:hover{
	background: #9ccee8;
	}
	
	img.goR{
		width: 40%;
		float: right;
		margin: 0 0 10px 20px;
	}
}

@media screen and (min-width:53em) {
	.tagline {
		position:absolute;
		top:80px;
		right:0;
		text-align:right;
		z-index:9999;
		padding:0 .5em;
		background-color:rgba(142,194,221,0.8);
		color:#fff;
		font-weight:100;
		letter-spacing:-5px;
		font-size:3.375em;
		display:block;
		line-height:1.4;
		font-family: 'Roboto Slab', serif;
	}
}
.malaysia .non-malaysia, .singapore .non-singapore, .philippines .non-philippines, .indonesia .non-indonesia{ display: none !important;}

.gallery a{ border: none !important;
	display: inline-block;
	margin: 0 12px 12px 0;
	}
.gallery img{
	max-height: 100px;
	float: left;
	box-shadow: 2px 2px 3px rgba(0,0,0,.2);
}