@font-face {
	font-family: 'title';
	src: url('../fonts/KonTikiEnchantedJF.eot');
	src: local('☺'), 
	url('../fonts/KonTikiEnchantedJF.woff') format('woff'), 
	url('../fonts/KonTikiEnchantedJF.ttf') format('truetype'), 
	url('../fonts/KonTikiEnchantedJF.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'subtitle';
	src: url('../fonts/MateSC-Regular.eot');
	src: local('☺'), 
	url('../fonts/MateSC-Regular.woff') format('woff'), 
	url('../fonts/MateSC-Regular.ttf') format('truetype'), 
	url('../fonts/MateSC-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Palatino';
	src: url('../fonts/Palatino.eot');
	src: local('☺'), 
	url('../fonts/Palatino.woff') format('woff'), 
	url('../fonts/Palatino.ttf') format('truetype'), 
	url('../fonts/Palatino.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}



@font-face {
	font-family: 'Rochester-Regular';
	src: url('../fonts/Rochester-Regular.eot');
	src: local('☺'), 
	url('../fonts/Rochester-Regular.woff') format('woff'), 
	url('../fonts/Rochester-Regular.ttf') format('truetype'), 
	url('../fonts/Rochester-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}




/* -------------------------------------------------------------------------------- */

body {
	margin: 0;
	padding: 0;
	border: none;
	font-family: sans-serif;
	background: #FFF0E4;
	font-weight: normal;
	color: #333;
}

.site {
	font-family: 'Palatino';
	display: grid;
	height: 100vh;
	grid-template-rows: auto auto 1fr auto;
}

header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 140px;
	background: url(../imgs/left.png) left top no-repeat, url(../imgs/right.png) right top no-repeat;
	background-size: 180px;
}


header h1, 
header h2 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	text-align: center;
}

header h1 a {
	font-family: 'title';
	color: #686A43;
	opacity: .72;
	font-size: 58px;
	text-decoration: none;
}

header h2 a {
	font-family: 'subtitle';
	color: #686A43;
	font-size: 21px;
	text-decoration: none;
}

/* -------------------------------------------------------------------------------- */

nav {
	background: #FFFDFB;
	display: flex;
	justify-content: space-around;
}

nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    }
    
nav a {
	color: #B4B5A1;
	font-size: 18px;
    text-decoration: none;
    padding: 8px 0;
    transition-property: color;
	transition-timing-function: ease-out;
	transition-duration: 250ms;
    }
    
nav a.current {
	font-weight: bold;
	color: #686A43;
}    
    
.nav-content {
}    
    
    
    
.nav-content .menu-btn {
    display: none;
}	
	
.nav-content .menu {
	clear: none;
	max-height: none;
}
    
.nav-content .menu-icon {
	display: none;
}

/* -------------------------------------------------------------------------------- */

footer {
	color: #333;
	font-size: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 32px;
	background: #DBE6DF;
	border-top: 16px solid #FFFDFB;
}
    
/* -------------------------------------------------------------------------------- */
    
/*480px*/
@media (max-width: 480px) {
	/*
	.nav-content {
	    width: 100%;
	    z-index: 3;
	}*/
	.nav-content nav {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		justify-content: space-around;
		align-items: center;
		flex-wrap: nowrap;
	}
	
	.nav-content nav a  {
		padding: 20px 0;
	}
	
	.nav-content .menu {
		clear: both;
		max-height: 0;
		transition: max-height 800ms ease-out;
	}
	
	.nav-content .menu-icon {
		border-radius: 4px;
		cursor: pointer;
		display: block;
		padding: 32px 8px 16px;
		/*padding: 16px 8px;*/
		position: absolute;
		top: 10px;
		left: 8px;
		user-select: none;
	}
	
	.nav-content .menu-icon .navicon {
		background: #7E8549;
		display: block;
		height: 4px;/*2px*/
		border-radius: 4px;
		position: relative;
		transition: background 250ms ease-out;
		width: 24px;
	}
	
	.nav-content .menu-icon .navicon:before,
	.nav-content .menu-icon .navicon:after {
		background: #7E8549;
		content: "";
		display: block;
		height: 100%;
		position: absolute;
		transition: all 250ms ease-out;
		width: 100%;
		border-radius: 4px;
	}
	
	.nav-content .menu-icon .navicon:before {
		top: 8px;
	}
	
	.nav-content .menu-icon .navicon:after {
		top: -8px;
	}
	
	.nav-content .menu-btn:checked ~ .menu {
		max-height: 600px;
	}
	
	.nav-content .menu-btn:checked ~ .menu-icon .navicon {
		background: transparent;
	}
	
	.nav-content .menu-btn:checked ~ .menu-icon .navicon:before {
		transform: rotate(-45deg);
	}
	
	.nav-content .menu-btn:checked ~ .menu-icon .navicon:after {
		transform: rotate(45deg);
	}
	
	.nav-content .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
	.nav-content .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
		top: 0;
	}
}

/* -------------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
	header {
		height: 110px;
		background-size: 140px;
	}
	header h1 a {
		font-size: 46px;
	}
	header h2 a {
		font-size: 16px;
	}
}

/* -------------------------------------------------------------------------------- */

@media screen and (max-width: 600px) {
	header {
		height: 90px;
		background-size: 110px;
	}
}

/* -------------------------------------------------------------------------------- */

@media screen and (max-width: 500px) {
	header {
		height: 90px;
		background-size: 100px;
	}
}

/* -------------------------------------------------------------------------------- */

@media screen and (max-width: 480px) {
	header {
		background: url(../imgs/right.png) right top no-repeat;
		background-size: 180px;
		height: 80px;
		background-size: 80px;
	}
	header h1 a {
		font-size: 40px;
	}
	header h2 a {
		font-size: 14px;
	}
}

/* -------------------------------------------------------------------------------- */

@media screen and (max-width: 400px) {
	header {
		background-image: none;
		height: 80px;
	}
	header h1 a {
		font-size: 40px;
	}
	header h2 a {
		font-size: 14px;
	}
}


/* --------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------------------------- */


.section {
	display: flex;
	flex-direction: row;
	padding: 24px 48px;
	background-color: #FFE5D1;
}

.text-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}


.section1 {
	background: url(../imgs/pattern-bg-repeat.png) repeat;
	border-bottom: 16px solid #FFFDFB;
}

.section1 .text  {
	border-top: 4px solid #859880;
	border-bottom: 4px solid #859880;
}

.section1 img.home-img {
	margin-right: 24px;
}

/* -------------------------------------------------------------------------------- */

.text {
	font-family: 'Palatino';
	line-height: 1.8em;
	font-size: 16px;
	background-color: rgba(255,255,255,0.6);
	padding: 32px 48px;
	text-align: left;
	text-align: justify;
}

.text p {
	padding: 12px 0;
	margin: 0;
}

.img-container {
	align-items: center;
	display: flex;
}

.img-container img {
	width: 500px;
	height: auto;
}

.section2,
.section3 {
	padding-top: 84px;
	padding-bottom: 84px;
}

.section2 .text {
	border-top: 4px solid #ECC0B7;
	border-bottom: 4px solid #ECC0B7;
}

.section3 .text {
	border-top: 4px solid #A2C0C3;
	border-bottom: 4px solid #A2C0C3;
}

.section1 .img-container {
	margin-right: 24px;
}

.section2 .img-container {
	margin-left: 24px;
}

.section3 {
	background: url(../imgs/footer-pattern-repeat.png) repeat;
	border-top: 16px solid #FFFDFB;
}

.section3 .img-container {
	margin-right: 24px;
}

.section1 .img-container img,
.section3 .img-container img {
	border: 4px solid rgba(255,255,255,0.6);
}

.section4 {
	background: url(../imgs/leaf-bg.png) center center no-repeat;
	background-size: cover;
}

.section4 .img-container {
	margin-right: 24px;
}

.section4 .text {
	color: #fff;
	background: rgba(0,0,0,0.5);
	border-top: 4px solid #000;
	border-bottom: 4px solid #000;
}

/* -------------------------------------------------------------------------------- */

@media screen and (max-width: 1100px) {
	.img-container img {
		width: 350px;
		height: auto;
	}
}

/* -------------------------------------------------------------------------------- */

/*768px*/
@media screen and (max-width: 900px) {
	.img-container img {
		width: 300px;
		height: auto;
	}
}

/* -------------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
	.section {
		display: flex;
		flex-direction: column;
		padding: 24px 48px;
		justify-content: center;
		align-content:  center;
		background-color: #FFE5D1;
	}
	

	.section1 .img-container {
		height: 600px;
		margin-right: 0;
		margin-bottom: 8px;
		background: url(../imgs/2026/011c.jpg) center center no-repeat; /*.      home-page.png            imgs/2026/011c.jpg */
		background-size: cover;
		order: 2;
	}
	.section1 .img-container img {
		opacity: 0;
	}
	.section1 .text-container {
		order: 1;
		margin-bottom: 8px;
	}
	
	.section2 .img-container {
		margin-left: 0;
		margin-top: 8px;
		background: url(../imgs/section2-img.png) center center no-repeat;
		background-size: cover;
		order: 2;
	}
	.section2 .text-container {
		order: 1;
	}
	.section2 .img-container img {
		opacity: 0;
	}
	
	.section3 .img-container {
		margin-right: 0;
		margin-top: 8px;
		background: url(../imgs/2026/005c.jpeg) center center no-repeat; /*   sect3-img.png        imgs/2026/005c.jpeg*/
		background-size: cover;
		order: 2;
	}
	.section3 .img-container img {
		opacity: 0;
	}
	
	.section3 .text-container {
		border-color: #DBE6DF;
	}
	
	.section4 .img-container {
		margin-right: 0;
		margin-bottom: 8px;
		background: url(../imgs/green-interior.png) center bottom no-repeat;
		background-size: cover;
		height: 500px;
	}
	.section4 .img-container img {
		opacity: 0;
	}
	
	.img-container {
		text-align: center;
		padding-left: 64px;
		padding-right: 64px;
	}
	.img-container img {
		width: 300px;
		height: auto;
	}
}

/* -------------------------------------------------------------------------------- */

@media screen and (max-width: 560px) {
	.img-container {
		padding-left: 16px;
		padding-right: 16px;
		}
	.section { 
		padding: 24px 16px;
	}
}

/* -------------------------------------------------------------------------------- */

@media screen and (max-width: 380px) {
	.img-container img {
		width: 250px;
		height: auto;
	}
}

/* -------------------------------------------------------------------------------- */

.service-packages {
	padding: 48px 16px 8px;
	display: flex;
	flex-direction: row;
	/*
	border-bottom: 16px solid #CC6658;
	border-top: 16px solid #CC6658;*/
}

.service-packages .pack-list {
	margin: 8px 8px 24px 8px;
	padding: 16px 16px;
	border: 1px solid #686A43;
	flex: 1;
	border-radius: 8px;
	background: #FFF7F1;
}

.service-packages .pack-list h3 {
	color: #686A43;
	margin: 0 0 12px 0;
	padding: 0 0 4px 0;
	font-weight: normal;
	font-size: 24px;
	/*border-bottom: 1px solid #D9DAD0;*/ 
}

.service-packages .pack-list ul {
	margin: 0 0 0 0;
	padding: 0;
	list-style: none;
}

.service-packages .pack-list ul li {
	font-size: 18px;
	color: #000;
	opacity: 0.7;
	margin: 0;
	padding: 8px 0;
}

/* -------------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
	.service-packages {
		flex-direction: column;
	}
}

/* -------------------------------------------------------------------------------- */

/*
.showrooms {
	background: url(../imgs/services-bg.png) no-repeat;
	background-size: cover;
	padding: 24px;
}

.showrooms-txt {
	background: rgba(255,255,255,0.6);
}*/

.showrooms-txt {
	background: #fff;
	margin: 24px;
	border-radius: 8px;
	padding: 16px 16px 0px;
}

.showrooms-txt h3 {
	font-weight: normal;
	font-size: 20px;
	padding: 0 0 12px 0;
	margin: 0;
	text-align: center;
}

.list-of-designers {
	margin: 16px;
	background: #fff;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

/* -------------------------------------------------------------------------------- */

@media screen and (max-width: 960px) {
	.list-of-designers {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

/* -------------------------------------------------------------------------------- */

@media screen and (max-width: 600px) {
	.list-of-designers {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/* -------------------------------------------------------------------------------- */

@media screen and (max-width: 480px) {
	.list-of-designers {
		grid-template-columns: 1fr 1fr;
	}
}

/* -------------------------------------------------------------------------------- */

.colour-band img {
	width: 100%;
	height: auto;
}

.list-of-designers div {
	margin: 16px;
	display: flex;
	align-items: center;
}

.list-of-designers .img-smaller {
	padding: 0 24px;
}

/* -------------------------------------------------------------------------------- */

@media screen and (max-width:900px) {
	.list-of-designers .img-smaller {
		padding: 0 12px;
	}
}

/* -------------------------------------------------------------------------------- */

.list-of-designers div a img {
}
.list-of-designers div a:hover img {
	transition: opacity 400ms;
	opacity: 0.5;
}

.list-of-designers img {
	width: 100%;
	height: auto;
}

.asterisk {
	/*color: #F66;*/
	color: #686A43;
	font-size: 12px;
}

.asterisk-meaning {
	font-size: 14px;
	display: grid;
	grid-template-columns: auto 1fr;
	margin: 0 0 48px 24px;
	grid-gap: 4px;
}

.pack-list .asterisk {
	display: none;
}


h3.inspire-txt {
	font-family: 'Rochester-Regular';
	font-weight: normal;
	margin: 24px 0 24px 0;
	padding: 0;
	font-size: 40px;
	text-align: center;
	color: #686A43;
}

/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- */

.content-contact {
	display: flex;
}



.contact-img {
	flex: 1;
	padding: 24px 0 24px 24px;
}

.contact-img img {
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.content-contact {
		flex-direction: column;
	}
	.attachment-form-container {
		order: 1;
		width: 100%;
		box-sizing: border-box;
	}
	.contact-img {
		order: 2;
		padding: 0 24px 24px 24px;
	}
}

.attachment-form-container {
	/*flex: 0 1 auto;*/
	flex:1;
	background: rgba(255,240,228,0.7);/*FFF0E4 255,240,228             rgba(255,255,255,0.85)*/
    padding: 24px 24px 24px 24px;
    border-radius: 8px;
    margin: 0 auto;
}

.attachment-form-container label {
	display: block;
	margin-bottom: 2px;
}

.attachment-form-container textarea {
	height: 200px;
}

.attachment-form-container input,
.attachment-form-container textarea {
	font-family: 'Palatino';
	font-size: 14px;
	transition: background 500ms, border-color 200ms;
    width: 100%;
    border-radius: 8px;
    padding: 10px;
    border: 1px solid #DDA87E;
    box-sizing: border-box;
    background: rgba(255,255,255,0.5);
    margin-bottom: 24px;
}

.attachment-form-container input:focus,
.attachment-form-container textarea:focus {
	width: 100%;
	transition: background 500ms, border-color 200ms;
	border-color: #7B4318;
	background: #fff;
	outline: none;
}

.btn-submit {
    padding: 10px 20px;
    background: #333;
    border: none;
    color: #f0f0f0;
    border-radius: 6px;
    cursor: pointer;
}
.btn-submit:hover {
	background: ;
}


.content-contact {
	display: flex;
}

/* -------------------------------------------------------------------------------- */

@media screen and (min-width: 1280px) {
	.attachment-form-container form {
		max-width: 600px;
		}
	.attachment-form-container input {
		max-width: 400px;
		}
}

/* -------------------------------------------------------------------------------- */

.attachment-form-container iframe {
	max-width: 600px;
	width: 100%;
	height: 500px;
	border: none;
}

.hiddendiv {
	font-size: 0;
	display: none;
}

/* -------------------------------------------------------------------------------- */

/* border-bottom: 1px solid #686A43; */

.projects {
	color: #686A43;
}

.projects-imgs {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 16px; 
	padding: 0 16px 16px;
}

.projects-title h4 {
	margin: 0;
	padding: 16px 16px 8px;
	font-size: 20px;
	text-align: center;
}

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

@media screen and (max-width: 768px) {
	.projects-imgs {
	grid-template-columns: 1fr;
}