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

* Filename:             layout.css
*
* Description           SBV basic layout styles
*
* Version               1.2.0 (24-11-2011)
* Author                Valtech
*
* Comments:             Remove body class "stickyfooter" 
*                       to disable stickyfooter

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

/* ============================================ */
/* Document properties                          */
/* ============================================ */
html {
	height: 100%;
	min-height: 100%;
	overflow: auto;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
	/*! background-color: #e0e0e0; */
	-webkit-overflow-scrolling: touch;
}

/* ============================================ */
/* Main frame layout                            */
/* ============================================ */
form {
	position: relative;
	width: 100%;
}
#container {
	width: auto;
	z-index: 3;
}
#main {
	position: relative;
    top: 67px;
	width: 100%;
	min-height: 100px;
	transition: top 0.5s ease;
}
#content {
	height: 100%;
	min-height: 100%;
	max-width: 1280px;
	margin: auto;
    background-color: #fff;
}

#content #leftMenu {
    display: table-cell;
    vertical-align: top;
}
#content #leftMenu .side-navigation-container {
    margin: 29px 27px 84px 38px;
}

#content #rightContent {
    display: table-cell;
    vertical-align: top;
    width: 100%;
}
@media only screen and (min-width: 1025px) {
    #top-ribbon ~ #main {
        top: 105px;
    }
    #content #rightContent > .last-visible-child {
        margin-bottom: 84px;
    }
}
@media only screen and (max-width: 1024px) {
    #content #rightContent > .last-visible-child-mobile {
        margin-bottom: 42px;
    }
    #content #leftMenu {
        display: none;
    }
    #content #rightContent {
        display: block;
    }
    #main .image-module {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    #main .image-module.two-images .content-scaler,
    #main .image-module.three-images .content-scaler{
        padding-top: 93.44978165938865%;
    }
}

.content-section{
    max-width: 1170px;
    margin: auto;
}

#content .owl-stage img {
    max-width: 100%;
    height: auto;
    max-height: 198px;
    width: auto;
    margin: auto;
}
#content .productImageCarousel .owl-stage img,
#content .blogentryslider .owl-stage img {
    max-height: none;
}
#content .flexslider img {
    max-height: none;
}

/* ============================================ */
/* position-wrap                                */
/* ============================================ */
/* 
* This is for, if you need to position your 
* content whilst keeping your backgrounds 100% wide 
*/
.position-wrap {
	max-width: 1280px;
    height: 65px;
	overflow: visible;
	margin: auto;
	text-align: center;
}

.position-wrap .logo img{
    width: 120px;
    height: 35px;
}

/* ============================================ */
/* Header layout                                */
/* ============================================ */
header {
	z-index: 1000;
	position: fixed;
	width: 100%;
	background-color: #000; /*overflow: hidden;*/
}
@media only screen and (min-width: 1025px) {
    #top-ribbon ~ header {
        margin-top: 40px;
    }
}
header.white {
	background-color: #fff;
	border-bottom: solid 1px #ededed;
}
header.white .cancelCheckOut {
	float: right;
	padding: 20px;
	color: #9a9a9a;
}
header .logo {
	float: left;
	padding: 17px 0 4px 30px;
	text-align: left;
}
#bagAnimation {
	display: none;
	position: fixed;
	top: 60px;
	right: 110px;
	z-index: 50;
	overflow: hidden;
	width: 240px;
	height: 80px;
	border: solid 1px #d6d6d6;
	background-color: #fff;
	box-shadow: 0 0 5px #d6d6d6;
}
#bagAnimation .bagAniImage {
	padding: 5px;
	width: 100px;
	float: left;
}
#bagAnimation .bagAniContent {
	padding: 10px 5px;
	width: 120px;
	float: right;
}
#bagAnimation .bagAniContent .name {
	font-size: 12px;
	line-height: 1.5em;
	padding-bottom: 5px;
}
#bagAnimation .bagAniContent .price {
	font-size: 14px;
	color: #000;
}

/* ============================================ */
/* Top Search                                   */
/* ============================================ */
#topsearch {
	display: none;
	position: absolute;
	top: 60px;
	right: 70px;
	z-index: 100;
	padding: 10px;
	background: #fff;
	border: #d6d6d6 solid 1px;
	border-top: none;
}
#topsearch legend {
	display: none;
}
#topsearch label {
	display: none;
}
#topsearch .linkbutton {
	padding: 2px 15px 4px;
	background-color: #000;
	color: #fff;
	font-size: 14px;
	border: none;
}
#topsearch .top-search-field {
	padding: 3px;
	width: 175px;
	border: #d6d6d6 solid 1px;
}

/* ============================================ */
/* Page-bar                                     */
/* ============================================ */
#page-bar {
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 5px 0;
}

/* ============================================ */
/* Footer                                       */
/* ============================================ */
#footerpanel {
	background-color: #000;
}
footer{
	max-width: 1076px;
	margin: auto;
	font-size: 14px;
	color: #fff;
	padding: 50px 22px 50px 22px;
	position: relative;
}
footer a {
    color: #fff;
    display: block;
}
footer h4 {
	margin: 0 0 5px;
	color: #808080;
	text-transform: uppercase;
	font-size: 16px;
	padding-right: 20px;
}
footer .footercolllinks {
	width: 30%;
	display: inline-block;
	margin-right: -4px;
	vertical-align: top;
}
footer .footerlinkgroup {
	padding: 0 20px 50px 0;
}
footer .footercollcontact {
	width: 40%;
	display: inline-block;
	margin-right: -4px;
	vertical-align: top;
	padding-bottom: 50px;
}
.footerSpots {
	margin-bottom: 30px;
}
.footerSpots ul {
	margin: 20px auto 0;
	overflow: hidden;
	padding: 0;
	text-align: center;
	width: 555px;
}
.footerSpots li {
	margin: 0;
	padding: 0 10px;
	list-style: none;
	float: left;
}
.footerSpots img {
	display: block;
}
.footerSpots span {
	display: block;
	padding-top: 10px;
}
.footerLinks {
	margin-bottom: 40px;
}
footer a,
footer a:-webkit-any-link {
	text-decoration: underline;
	color: #ffffff;
	display: block;
}
footer > .footercollcontact h4 + a {
	text-decoration: none;
	cursor: default;
}
.copyright > a {
	display: inline;
}

/* ============================================ */
/* Black and White section                      */
/* ============================================ */

.blackcontent,
.whitecontent {
	padding: 40px 0 0;
}
.blackcontent .wysiwyg,
.whitecontent .wysiwyg {
	text-align: center;
	border-bottom: solid 1px #d6d6d6;
}
.blackcontent .rich-text-field,
.whitecontent .rich-text-field {
	max-width: 900px;
	margin: 0 auto;
}
.whitecontent .wysiwyg .rich-text-field {
    width: 100% !important;
}
.whitecontent .wysiwyg .rich-text-field table td{
    padding: 0;
}
.black h1,
.white h1 {
	text-transform: uppercase;
}
.black nav a,
.white nav a {
	padding: 5px 10px;
}
.black {
	background: #000;
}
.black .blackcontent,
.black h1,
.black nav a, .black a {
	color: #fff;
}
.black nav a:hover,
.black nav a.selected {
	color: #999;
}
.white {
	background: #fff;
}
section.white {
    padding-bottom: 40px;
}
.white .whitecontent,
.white h1,
.white nav a {
	color: #000;
}
.white nav a:hover,
.white nav a.selected {
	color: #999;
}

.shoppingbasket {
	background-color: #fff;
}

/*Blog*/
.wb {
	background-color: #fff;
}
.wb .wb-wrapper {
	margin: auto;
}
.wb .wb-wrapper .blogentry a {
    text-decoration: underline;
}
.wb .wb-wrapper .blogentry .entrymainimage,
.wb .wb-wrapper .blogentry .entrydetails {
	margin: auto;
	padding: 30px 10px 0px 10px;
}
.wb .wb-wrapper .blogentry .entrymainimage {
	max-width: 940px;
}
.wb .wb-wrapper .blogentry .entrydetails {
	max-width: 620px;
}
.wb .wb-wrapper .GallerySlider {
	max-width: 900px;
	margin: auto;
	padding: 0 60px;
}
.wb .wb-wrapper .GalleryGrid {
	max-width: 620px;
	margin: auto;
	padding: 0 10px;
}

/* ============================================ */
/*                                              */
/* ============================================ */
.ie-modern {
	behavior: url(../htc/pie.htc);
}
@media only screen and (max-width: 1024px) {
    header {
        margin-top: 0;
    }
}

@media only screen and (max-width: 768px) {
	#main {
	    top: 129px;/*130px;*/
	}
	#container {
		background-color: #fff;
	}
	.position-wrap {
		padding: 0;
	}
	.issuuembed.issuu-isrendered {
		max-width: 100%;
	}
}

@media only screen and (max-width: 640px) {
	footer {
		padding: 50px 30px 0 30px;
	}
	footer .footercolllinks {
		width: auto;
		display: block;
		margin-right: 0;
	}
	footer .footercollcontact {
		width: auto;
		display: block;
		margin-right: 0;
		padding-bottom: 0;
	}
	footer .copyright {
		margin: 0 -30px;
		background-color: #292929;
		padding: 30px;
		border-top: 1px solid #3d3d3d;
	}
	.whitecontent,
	.blackcontent {
		padding: 40px 20px 0 20px;
	}
	.blackcontent .wysiwyg,
	.whitecontent .wysiwyg {
		text-align: left;
	}
	.black h1,
	.white h1 {
		font-size: 38px;
	}
	.black nav a,
	.white nav a {
		padding: 5px 20px 5px 0;
	}
}

/* Spacedesign listing page styles 18-07-2024 */
.wb .spaceslist {
    padding: 0 16px;
}

.wb .spaceslistcontainer {
    padding: 0;
    margin: 0;
    background-color: white;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
    font-family: 'circular';
}

.wb .spaceslistcontainer li {
    list-style-type: none;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 20px;
}



.wb .spaceslistcontainer li a {
    text-decoration: none;
    color: #404040;
    word-break: break-word;
}

.wb .spaceslistcontainer li .canvas {
    overflow: hidden;
}

.wb .spaceslistcontainer li .canvas img {
    width: 100%;
}

.wb .spaceslistcontainer li .header {
    font-size: 15px;
    padding: 2px 0 8px;
    transform: translateX(0px);
    transition: all 0.1s ease;
}

.wb .spaceslistcontainer li:hover .header {
    transform: translateX(2px);
}

@media all and (max-width: 768px) {
    .wb .spaceslist {
    padding: 0 12px;
}
    
    .wb .spaceslistcontainer {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
    
.wb .spaceslistcontainer li .header {
    font-size: 13px;
    padding: 0px 0 8px;
    }
}


#space-design-blogs-list.categories {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px 30px;
  list-style-type: none;
  margin: 40px 0;
  padding: 0 10px;
  font-size: 13px;
  flex-wrap: wrap;
  font-family: 'circular';
}

#space-design-blogs-list.categories li {
  position: relative;
  text-wrap: nowrap;
}

#space-design-blogs-list.categories li a {
  text-decoration: unset;
}

/* Spacedesign listing page styles 18-07-2024 */