/**
 * Main stylesheet
 * 
 */

/** Header */
	
	/** General */
		header {
			width: 100%;
			background-color: #FFF;
			height: 100px;
		}
		body.fixed {
			padding-top: 80px;
		}
		body.no-scroll #top-bar {
			position: fixed;
			top: 0;
			z-index: 50;
		}
		body.no-scroll header {
			position: fixed;
			z-index: 50;
		}

			header > .container {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100%;
			}

				header #logo a.logo {
					width: 280px;
					height: 72px;
					display: block;
					background: url('/images/logo.svg') no-repeat;
					background-size: contain;
					text-indent: -9999px;
				}

	/** Icons */
		header .icons {
			display: flex;
			min-width: 20%;
			max-height: 100%;
			justify-content: flex-end;
		}
			
			header .icons a.icon {
				position: relative;
				display: block;
				margin: 0 3px;
				text-indent: -9999px;
				padding: 2em 1.75em;
				max-height: 100%;
				transition: all .25s;
				z-index: 250;
			}
			header .icons a.icon:hover {
				opacity: .5;
			}
			
			header #search-toggle {
				background: url('../images/icons/search.svg') 50% 50% no-repeat;
				background-size: auto 25px;
				display: none;
			}
			header #search-toggle.active {
				background: url('../images/icons/menu-close.svg') 50% 50% no-repeat;
				background-size: auto 25px;
				z-index: 250;
			}
			
			header a.basket {
				background: url('../images/icons/basket.svg') 50% 50% no-repeat;
				background-size: auto 25px;
			}
			
			header a.phone {
				background: url('../images/icons/phone-header.svg') 50% 50% no-repeat;
				background-size: auto 25px;
			}
						
			header a.wishlist {
				background: url('../images/icons/wish-green.svg') 50% 50% no-repeat;
				background-size: auto 25px;
			}

				header a.basket .dot {
					position: absolute;
					width: 10px;
					height: 10px;
					top: 42%;
					transform: translateY(-50%);
					left: 13px;
					background: #345c41;
					border: 1px solid #000000;
					border-radius: 50px;
				}
			
			header a.my-account {
				background: url('../images/icons/avatar.svg') 50% 50% no-repeat;
				background-size: auto 25px;
			}

		#site-search {
			display: flex;
			min-width: 55%;
			max-height: 100%;
			justify-content: flex-end;
		}

			#site-search .widget {
				margin: 0;
			}

				#site-search .widget_product_search form {
					position: relative;
					margin: 0;
					width: 340px;
					border-bottom: 1px solid #8c988d;
				}
				#site-search .widget_product_search form:before {
					display: none;
				}

					#site-search .widget_product_search form input[type="search"] {
						width: 100%;
						box-shadow: none;
						background-color: #fff;
						font-size: 14px;
						padding: 0.8em calc(1.2em + 50px) 0.8em 1.2em;
						font-weight: 400;
						box-sizing: border-box;
					}

					#site-search .widget_product_search form button {
						position: absolute;
						clip: auto;
						clip-path: initial;
						left: auto;
						top: 1px;
						right: 1px;
						width: 50px;
						height: 100%;
						padding: 0;
						text-indent: -999em;
						background: url(/images/icons/search.svg) #FFF 50% 50% no-repeat;
						background-size: auto 20px;
						border-radius: 0;
					}
	
	/** Navigation */

		/** General */

			#site-navigation{
				background-color: #c1cac3;
			}

			header #mobile-menu {
				display: none;
			}
	
				nav > .container .nav-surround > ul {
					margin: 0;
					padding: 0;
					display: flex;
					height: 60px;
					align-items: center;
					list-style: none;
				}

					nav > .container .nav-surround > ul > li {
						height: 100%;
						margin-right: 40px;
					}
					nav > .container .nav-surround > ul > li:last-child {
						margin-right: 0;
					}

						nav > .container .nav-surround > ul > li > a {
							font-family: ff-ernestine-pro, serif;
							color: #345c41;
							text-decoration: none;
							letter-spacing: 0.02em;
							text-transform: uppercase;
							font-weight: 700;
							display: flex;
							align-items: center;
							height: 100%;
							box-sizing: border-box;
							border-top: 5px solid #c1cac3;
							border-bottom: 5px solid #c1cac3;
							transition: all 0.3s;
						}
						nav > .container .nav-surround > ul > li:hover > a {
							border-bottom: 5px solid #fff;
						}

				nav > .container .nav-surround > ul.sub-site-header-menu-items > li {
					margin-right: 20px;
				}	
				nav > .container .nav-surround > ul.sub-site-header-menu-items > li:last-child {
					margin-right: 0;
				}	
					nav > .container .nav-surround > ul.sub-site-header-menu-items > li > a{
						font-weight: 600;
    					text-transform: none;
					}
		
		  /* Child Menu - Desktop */
		  
			@media (min-width: 1200px) {

				nav > .container .nav-surround {
					display: flex;
					justify-content: space-between;
				}

				nav .children-container {
					visibility: hidden;
					opacity: 0;
					transition: all 0.5s;
					position: absolute;
					left: 0;
					top: 160px;
					width: 100%;
					background-color: rgb(234 230 223 / 90%);
					z-index: 50;
				}
				body.fixed header.sticky nav .children-container {
					position: fixed;
					top: 120px;
				}
				
				nav .children-container .container {
					padding-top: 3em;
					padding-bottom: 1em;
				}

					nav li:hover .children-container {
						visibility: visible;
						opacity: 1;
					}

					nav .children-container ul {
						padding: 0;
						list-style-type: none;
						margin: 0;
					}

					nav .children-container .children-content ul.children-root {
						display: flex;
						flex-flow: row wrap;
						justify-content: start;
						align-items: stretch;
					}

						nav .children-container .children-content ul.children-root > li {
						margin-bottom: 2em;
						width: 12.5%;
						margin-right: 2%;
						}
						nav .children-container .children-content ul.children-root > li:nth-child(7n+7) {
							margin-right: 0;
						}

						nav .children-container .children-content ul.children-root a {
							display: inline-block;
							margin: 0.5em 0;
							text-decoration: none;
							color: #444;
							font-size: 14px;
						}
						nav .children-container .children-content ul.children-root a.child-title {
							font-weight: 600;
							letter-spacing: 0.04em;
							margin: 0;
							padding: 0 0 10px;
							width: 100%;
						}

						nav .children-container .children-content ul.children-root .child-links-container a {
							display: block;
							letter-spacing: 0.02em;
							position: relative;
						}
						nav .children-container .children-content ul.children-root .child-links-container a:hover {
							text-decoration: underline;
						}

			}


		/* Child Menu - Responsive */
			@media (max-width: 1200px) {

				nav > .container .nav-surround .partners {
					display: flex;
					margin: 2em 0 0;
					flex-flow: row wrap;
					justify-content: space-around;
				}

					nav > .container .nav-surround .partners img {
						height: 26px;
					}

				#menu-overlay {
					width: 100vw;
					height: calc(100vh - 80px);
					background: rgba(8, 19, 25, 0.85);
					z-index: 10;
					position: fixed;
					top: 80px;
					left: 0;
					display: none;
				}
				header #mobile-menu {
					position: relative;
					display: block;
					margin: 0 3px;
					text-indent: -9999px;
					padding: 0 1.75em;
					max-height: 100%;
					transition: all .25s;
					z-index: 250;
					background: url('/images/icons/menu.svg') 50% 50% no-repeat;
					background-size: auto 25px;
				}

				header #mobile-menu.active {
					background: url('/images/icons/menu-close.svg') 50% 50% no-repeat;
					background-size: auto 25px;
					z-index: 250;
				}

				nav {
					display: none;
					position: fixed;
					background-color: #EEEEEE;
					box-sizing: border-box;
					padding: 0;
					width: calc(100% - 80px - 2em);
					max-width: 900px;
					overflow: auto;
					z-index: 1002;
					left: 0;
					top: 160px;
					height: calc(100vh - 160px);
					overflow-y: scroll;
				}
				body.fixed nav {
				}

					nav > .container .nav-surround > ul > li {
						margin: 0;
					}

						nav > .container .nav-surround > ul > li > a {
							display: flex;
							padding: 1.5em;
							border-top: none;
							border-bottom: 1px solid #fff;
							justify-content: space-between;
						}
						nav > .container .nav-surround > ul > li:hover > a {
							color: #345c41;
							border-color: #fff;
						}
						nav > .container .nav-surround > ul > li.hover > a {
							color: #000000;
						}

							nav > .container .nav-surround > ul > li > a span.arrow{
								background: url(/images/icons/arrow-down.svg) 50% 50% no-repeat;
								background-size: 20px;
								width: 0;
								padding: .7em;
								display: flex;
								transition: all .3s;
							}
							nav > .container .nav-surround > ul > li.hover > a span.arrow {
								transform: rotate(180deg);
							}

								nav > .container .nav-surround > ul > li .children-container .container {
									padding: 0;
									margin: 0;
								}

							nav > .container .nav-surround > ul {
								padding: 0;
								display: block;
								height: auto;
							}

								nav > .container .nav-surround > ul ul {
									list-style-type: none;
									padding: 0;
									margin: 0;
								}
								#site-navigation {
									background-color: #eee;
								}
								nav > .container .nav-surround > ul ul.children-root {
									background-color: #eee;
									padding: 1.5em;
								}

									nav > .container .nav-surround > ul ul.child-links-container a {
										text-transform: none;
										color: #523e39;
										letter-spacing: 0;
										text-decoration: none
									}

									nav > .container .nav-surround > ul ul.children-root .child-title {
										letter-spacing: 0;
										text-transform: none;
									}

										nav > .container .nav-surround > ul ul.child-links-container {
											margin-top: 0.7em;
										}

										nav > .container .nav-surround > ul ul.children-root li {
											padding: 0.9em 0;
										}
										nav > .container .nav-surround > ul ul.children-root > li:first-of-type {
											padding-top: 0;
										}
										nav > .container .nav-surround > ul ul.child-links-container li:last-of-type {
											padding-bottom: 0;
										}

											nav  .site-header-menu-items li .children-container {
												display: none;
											}
											nav  .site-header-menu-items li.hover .children-container {
												display: block;
											}


			}

	/** Notification */
		.notification {
			background: #e74c3c;
			color: #FFF;
			padding: .5em 0;
			text-align: center;
		}

			.notification p {
				margin: 0;
			}



/** Footer */
	
	/** General */
		footer {
			background-color: #8c988d;
			padding: 1.5em 0;
		}

			footer .container {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

				footer p,
				footer li {
					color: #FFF;
					font-size: 14px;
				}

					footer p a,
					footer p a:hover {
						color: #FFF;
					}

					footer p a::after {
						background: #FFF;
					}
				footer #footer-logo a.logo {
					width: 180px;
					height: 150px;
					display: block;
					background: url('/images/footer-logo-white.svg') no-repeat;
					background-size: contain;
					text-indent: -9999px;
				}
				footer li.email,
				footer li.tel {
					font-weight: 700;
				}
					footer .top-bar .block li.email a,
					footer .top-bar .block li.tel a {
						padding: 2.5px 0;
					}

		/** Top Bar */
			footer .top-bar .container {
				align-items: stretch;
				padding-bottom: 2em;
				margin-top: 2em;
				margin-bottom: 3em;
				border-bottom: 5px solid #c1cac3;
			}

				footer .top-bar .block {
					flex: 0 15%;
				}
				footer .top-bar .block.mailing-list {
					flex: 0 25%;
				}
				footer .top-bar .block.information {
					flex: 0 25%;
				}
					footer .top-bar .block h5 {
						color: #FFF;
						margin: 0 0 1.5em;
					}

					footer .top-bar .block ul {
						list-style: none;
						height: auto;
						padding: 0;
						margin: 1em 0;
					}

						footer .top-bar .block li a {
							display: block;
							color: #FFF;
							line-height: 1.5em;
							padding: 9.5px 0;
							text-decoration: none;
						}
						footer .top-bar .block .social-media li a {
							padding: 0;
							height: 40px;
						}
						footer .top-bar .block li a:hover {
							text-decoration: underline;
						}

						footer #subForm{
							display: flex;
							max-width: 550px;
							margin: 1.5em auto;
							flex-wrap: wrap;
						}
							footer #subForm input{
								margin: 0;
								height: auto;
								flex: 0 70%;
								padding: 1em 1.4em;
								font-size: 16px;
							}
							footer #subForm button{
								width: auto;
								flex: 0 30%;
								text-align: center;
								margin: 0;
								padding: 0.4em 1em;
								box-sizing: border-box;
								font-size: 15px;
								border-radius: 0;
								background-color: #345c41;
								color: #fff;
								border: 0;
								font-weight: 500;
							}

						ul.social-media {
							display: flex;
							height: 100%;
							margin: 0;
							padding: 0;
							list-style: none;
						}
		
							ul.social-media li {
								width: 40px;
								height: 100%;
							}
		
								ul.social-media li a {
									display: block;
									text-indent: -999em;
									width: 100%;
									height: 100%;
									background-repeat: no-repeat;
									background-size: auto 25px;
									background-position: center;
									-webkit-transition: all .25s;
									   -moz-transition: all .25s;
										-ms-transition: all .25s;
										 -o-transition: all .25s;
											transition: all .25s;
								}
								ul.social-media li.facebook a {
									background-image: url('/images/icons/fb-white.svg');
								}
								ul.social-media li.twitter a {
									background-image: url('/images/icons/tw-white.svg');							
								}
								ul.social-media li.instagram a {
									background-image: url('/images/icons/insta-white.svg');							
								}
								ul.social-media li.pinterst a {
									background-image: url('/images/icons/pin-white.svg');							
								}
								ul.social-media li a:hover {
									opacity: .7;
								}

		/** Bttm Bar */
			footer .bttm-bar p {
				color: #FFF;
				flex: 0 50%;
				margin: 0;
				font-weight: 300;
			}
			footer .bttm-bar p.designed-by {
				text-align: right;
			}


/** Blog Category page */

	/** General */
		section.news-feeds {
			padding-bottom: 0;
		}
		section.blog-empty {
			text-align: center;
		}

			.blog-post-single {
				margin-bottom: 3em;
			}
			.blog-post-single.col-50 {
				width: 49%;
				float: left;
				margin-bottom: 5em;
			}
			.blog-post-single.col-50:nth-child(even) {
				margin-left: 2%;
			}
			.blog-post-single.col-33 {
				width: 31.3%;
				float: left;
			}
			.blog-post-single.col-33:nth-child(3n+1) {
				margin: 0 3% 1em;
			}

				.blog-post-single a.img {
					position: relative;
					width: 100%;
					padding-bottom: 60%;
					background-position: center;
					background-size: cover;
					display: block;
					border: none;
				}

				.blog-post-single h3 {
					color: #345c41;
				}

					.blog-post-single a.img .date {
						position: absolute;
						top: 10%;
						left: 0;
						padding: 0 20px;
						color: #FFF;
						background: #8c988d;
						height: 45px;
						line-height: 45px;
					}

	/** Pagination */
		.pagination-link {
			width: 100%;
			margin: 1em 0 3em;
			text-align: center;
		}

			.pagination-link span,
			.pagination-link a {
				display: inline-block;
				background: #345c41;
				color: #FFF;
				line-height: 40px;
				padding: 0 1em;
				text-align: center;
				text-decoration: none;
				font-weight: 600;
				transition: all .5s;
			}

			.pagination-link span {
				background: #333;
				color: #FFF;
			}

				.pagination-link a:hover {
					background: #333;
				}

	/** Categories */
		.categories {
			background: #f7f6f5;
			text-align: center;
		}

			.categories h2 {
				color: #345c41;
				margin-top: 0;
			}

			.categories ul {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-flow: row wrap;
				margin: 1em 0 0;
				padding: 0;
				list-style: none;
			}

				.categories li {
					margin: 0 .5em;
				}


/** Blog Post */
	
	/** Header */
		.page-title-banner.blog-post .item {
			background-color: #345c41;
			height: auto;
			padding: 5em 0 6em;
		}
			.page-title-banner.blog-post .caption {
				position: relative;
			}

			.page-title-banner.blog-post h4 {
				display: flex;
				flex-wrap: wrap;
				text-transform: none;
				padding-bottom: 4em;
				font-size: 18px;
				font-weight: 400;
			}
				
				.page-title-banner.blog-post h4 .post-meta {
					display: flex;
					line-height: 1.6;
				}

					.page-title-banner.blog-post h4 img {
						display: block;
						width: 1em;
						height: 1em;
						margin: .2em .5em 0 0;
					}
					
					.page-title-banner.blog-post h4 span.by,
					.page-title-banner.blog-post h4 span.time {
						margin: 0 1.5em 0 0;
					}

			.page-title-banner h4 ul {
				display: inline-block;
				list-style: none;
				text-align: left;
				margin: 0;
				padding: 0;
			}

				.page-title-banner h4 ul a,
				.page-title-banner h4 ul a:hover {
					color: #FFF;
				}
				.page-title-banner h4 ul a:hover {
					text-decoration: none;
				}

				.page-title-banner h4 ul li {
					display: inline-block;
					margin-right: .5em;
				}
				.page-title-banner h4 ul li:last-child {
					margin-right: 0;
				}

	/** Content */
		.featured-image img {
			margin: -10em auto 0;
			position: relative;
		}

		main.post .container.content {
			max-width: 1000px;
		}

			main.post .post-wrapper {
				position: relative;
				padding: 2em 3em 0;
				min-height: 150px;
				background: #FFF;
			}
			main.post.no-thumbnail .post-wrapper {
				margin-top: -10em;
			}


/** 404 Page */

	/** General */
		#error-404 {
			text-align: center;
			background: #F2F2F2;

		}
			
			#error-404 label {
				display: block;
				margin: 1em 0 .5em;
			}

			#error-404 input[type="text"] {
				max-width: 500px;
				width: 100%;
				box-shadow: none;
				font-size: 1em;
				padding: 0.8em 1.6em;
				background-color: #fff;
				border: 2px solid #FFF;
			}
				

/** General Responsive */

	/** 1181 -> 1300 */
		@media only screen and (max-width: 1300px) { 

		}

	/** 1085 -> 1180 */
		@media only screen and (max-width: 1200px) {

			/** Header */
				header {
					height: auto;
				}

					header > .container {
						flex-flow: row wrap;
					}
						header .icons {
							display: flex;
							min-width: 100%;
							max-height: 100%;
							justify-content: space-between;
						}
							header .icons a.icon {
								padding: 1.25em 1.5em;
							}

						header #logo {
							display: flex;
							justify-content: space-between;
							order: 3;
							width: 100%;
							border-top: 2px solid #EEE;
							padding: 15px 0;
						}

						header .icons.right-icons {
							order: 2;
						}

			/** Search */
			#site-search{
				display: none;
				top: 62px;
				position: absolute;
				left: 0;
				z-index: 999;
				width: 100%;
				padding: 2em 0;
				background: rgb(51 91 64 / 90%);
			}
				#site-search .widget_product_search form {
					position: relative;
					margin: 0;
					width: calc(100% - 4em);
					margin-left: 2em;
					border-bottom: none;
				}
				#site-search .widget_product_search form input[type="search"] {
					width: 100%;
					box-shadow: none;
					border: 1px solid #f5f1ed;
					background-color: #fff;
					font-size: 16px;
					padding: 0.8em calc(1.2em + 50px) 0.8em 1.2em;
					font-family: futura-pt, sans-serif;
					font-weight: 400;
					box-sizing: border-box;
				}
			header #search-toggle{
				display: inline-block;
			}

			/** Nav */
				nav {
					top: 165px;
					height: calc(100vh - 165px);
				}



			/** Blog Post */
				.alignleft {
					margin-left: -5%;
				}
				.alignright {
					margin-right: -5%;
				}

		}

	/** 960 -> 1084 */
		@media only screen and (max-width: 1084px) {

			/** Blog Post */
				.alignleft {
					max-width: 40%;
					margin-left: 0;
				}
				.alignright {
					max-width: 40%;
					margin-right: 0;
				}

		}

	/** 769 -> 959 */
		@media only screen and (max-width: 959px) {

			/** General */
				.container {
					padding-left: 2em;
					padding-right: 2em;
				}

			/** Blog Category page */
				.blog-post-single.col-50,
				.blog-post-single.col-33,
				.blog-post-single.col-33:nth-child(3n+1) {
					width: 49%;
					margin: 0 0 3em;
				}
				.blog-post-single.col-33:nth-child(even) {
					margin-left: 2%;
				}

		}

	/** 561 -> 768 */
		@media only screen and (max-width: 768px) {

			/** Blog Category page */
				.blog-post-single.col-50,
				.blog-post-single.col-33,
				.blog-post-single.col-33:nth-child(3n+1),
				.blog-post-single.col-33:nth-child(even) {
					width: 100%;
					margin: 0 0 2em;
				}

			/** Blog posts */
				.page-title-banner.blog-post h4 .post-meta {
					margin: 0 0 .5em;
				}

				main.post .post-wrapper {
					padding: 1em 2em 0;
				}

					.alignleft,
					.alignright {
						max-width: 100%;
						display: block;
						margin: 1em auto;
					}

			footer .top-bar .container{
				flex-direction: column;
			}
				footer .top-bar .block{
					text-align: center;
				}
					footer #footer-logo a.logo{
						margin: 0 auto;
					}
					footer .top-bar .block h5{
						margin: 1.5em 0 1em;
					}
			footer .container{
				flex-direction: column;
			}
		}

	/** 480 -> 560 */
		@media only screen and (max-width: 560px) {

			nav {
				top: 158px;
				height: calc(100vh - 158px);
				width: calc(100% - 28px - 2em);
			}

			/** Blog posts */
				.page-title-banner.blog-post h4 {
					padding-bottom: 3em;
				}

				.featured-image img {
					margin: -9em auto 0;
				}

			/** Footer */
				footer .container {
					flex-flow: column nowrap;
				}

				header .icons a.icon {
					padding: 1em 1.25em;
				}
		}

	/** 0 -> 479 */
		@media only screen and (max-width: 479px) {

			/** General */
				.container {
					padding-left: 1em;
					padding-right: 1em;
				}

			/** Blog posts */
				.page-title-banner.blog-post h4 .post-meta {
					width: 100%;
					text-align: center;
					justify-content: center;
				}

					.page-title-banner.blog-post h4 span.by, 
					.page-title-banner.blog-post h4 span.time {
						margin: 0;
					}

				main.post .post-wrapper {
					padding: 1em 1em 0;
				}

					.page-title-banner h4 ul li,
					.page-title-banner h4 ul li:last-child {
						margin: 0 .25em;
					}

		}