/*
Theme Name: Bespoke
Description: Bespoke Theme
Version: 1.3
Author: Anna Needham, Ian Atkins
Author URI: http://www.addedlovely.com
*/

@font-face {
    font-family: 'SlateStd-Light';
    src: url('fonts/SlateStd-Light.eot');
    src: url('fonts/SlateStd-Light.eot?#iefix') format('embedded-opentype'),
         url('fonts/SlateStd-Light.woff') format('woff'),
         url('fonts/SlateStd-Light.ttf') format('truetype'),
         url('fonts/SlateStd-Light.svg#SlateStd-Light') format('svg');
    font-weight: normal;  
}

@font-face {
    font-family: 'Apercu';
    src: url('fonts/apercu/apercu_light.eot');
    src: url('fonts/apercu/apercu_light.eot?#iefix') format('embedded-opentype'),
         url('fonts/apercu/apercu_light.woff') format('woff'),
         url('fonts/apercu/apercu_light.ttf') format('truetype'),
         url('fonts/apercu/apercu_light.svg#aperculight') format('svg');
    font-weight: normal;  
}

@font-face {
    font-family: 'Apercu';
    src: url('fonts/apercu/apercu_bold.eot');
    src: url('fonts/apercu/apercu_bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/apercu/apercu_bold.woff') format('woff'),
         url('fonts/apercu/apercu_bold.ttf') format('truetype'),
         url('fonts/apercu/apercu_bold.svg#apercubold') format('svg');
    font-weight: bold;  
}

html {
	height:100%;
}
body{
	min-height: 100%;
}
.container {
	min-height: 100%;
}
* {margin: 0; padding: 0;}
html { -webkit-text-size-adjust: none }
body {background-color: #fff; width: 100%; font-family: 'Apercu'; font-size: 12px; color: #231F20;}
body.home {
	background-color:black;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
}

b {
	font-weight: normal;
	text-decoration: underline;
}
/* typography */
a {color: #231F20; text-decoration: none; text-transform: uppercase; outline: none; border: 0;}
h1 {color: #939598; font-size: 18px; line-height: 21px; letter-spacing: 0.2em; padding-bottom: 16px;}
h2 {color: #231F20; font-size: 12px; text-transform: uppercase;}
p {font-size: 14px; color: #231F20; line-height: 23px; letter-spacing: 0.1em;}

/* general */
header {height: 137px; width: 100%;}
#logo {display: block; width: 380px; margin: 0 auto 0 auto; padding: 33px 0 33px 0; max-width:100%;}
.container {width: 990px; margin: 0 auto 0 auto; clear: both; overflow: auto; max-width:100%;
	
	    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}
#content {clear: both; overflow: auto; width: 904px; margin: 0 auto 0 auto; padding-bottom: 238px; max-width:100%;}
img {border: none; max-width:100%; height:auto;}

/* home - page */
#slideshow {position: fixed; top:0; left:0; bottom: 0; right: 0; z-index: -1;}
#slideshow div {-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; background-repeat: no-repeat; position: absolute; width: 100%; height: 100%; display: block;}

/* search - page */
.search a.block {display: inline-block; padding: 0 15px 15px 0; text-align: center; color: #939598; line-height: 20px; letter-spacing: 0.2em;  vertical-align: top; box-sizing:border-box;
	margin-bottom:20px;
		width:100%;

}


.search a.block.last {margin-right: 0;}


@media only screen and (min-width : 650px) {
	.search a.block {
width: 50%;
	}
	}

@media only screen and (min-width : 941px) {
	.search a.block {
width: 33.33333%;
}

}

/* product - page */
.product #thumbnail {display: block; float: left; width: 141px;}
.product #thumbnail img {display: block; margin: 0 15px 10px 0; width: 126px; height: auto; cursor: pointer;}
.product #product {display: block; float:right; margin-right: 15px; width: 467px; height: 467px; position: relative; overflow: hidden; max-width:100%;}
.product #product img {width: 467px; max-width:100%; height:auto;}
.product #info {float: right; width: 279px;}
.product a {letter-spacing: 0.2em; }
.product p {margin-bottom: 20px;     font-size: 14px;
    line-height: 28px;}
    .product h1 {
	    letter-spacing: 0.1em;
	    color:black;
	    	line-height: 30px;
font-weight: normal;
    }
    .product-images {
	    float:left;
    }
    
    @media only screen and (max-width : 940px) {
.product-images, .product #product, .product #info {
	float:none;
}
.product #info {
	width:100%;
}
.product #product {
	margin:0 auto;
	height:auto;
}
.product #product:before {
	display:block;
	content:'';
	padding-top:100%;
} 
.product #thumbnail {
	width:100%;
	text-align: center;
}
.product #thumbnail img {
	display:inline-block;
}
}
    

.product #email-interest {background-color: #D1D3D4; width: 142px; height: 27px; display: block; line-height: 30px; text-indent: 10px; margin-bottom: 20px; white-space: nowrap; padding-right: 5px;}
.product #back {color: #939598;}
.product #back span {background: url(images/back.png) no-repeat; width: 7px; height: 9px; display: inline-block; padding-right: 10px;}

/* footer */
footer {width: 100%; height: auto; position: fixed; bottom: 0; overflow: visible; z-index: 1000;}
footer .container {height: 100px;padding-top:30px; position: relative; overflow: visible;}
    @media only screen and (max-width : 850px) {
	    footer .container {
	    padding-top:5px;
	    }
}
footer h2 {display: inline-block; float: left; line-height: 44px; padding-right: 14px;}

/* footer - searchbar */
#search-bar {background: rgb(241, 242, 242); background: rgba(241, 242, 242, 0.98); width: 100%; height: 100px; margin-bottom: 10px;}
#search-bar #left, #search-bar #right {
	height: 40px;letter-spacing: 0.2em; width: 100%;display:block;position:relative; 
	margin:0 auto;
	}
.home #search-bar {
	background: rgb(35, 31, 32); background: rgba(35, 31, 32, 0); color: #F1F2F2;
}
.home #menu {
	background: rgb(35, 31, 32); background: #939598; color: #F1F2F2;
}
.home #menu a {
	color: #F1F2F2;
}
body.home #menu, body.home #menu p {
	color: #F1F2F2;	
}

    @media only screen and (min-width : 850px) {
#search-bar #left, #search-bar #right {
width:50%;
display: inline-block;
}

}

#search-bar #left {left: 0;}
    @media only screen and (max-width : 850px) {
#search-bar #left {
margin-bottom:10px;
}
}

#search-bar h2 {padding: 0;}
#left h2 {width: 110px;}
#search-bar #right {}
#right h2 {width: 42px;} 
#search-bar #right ul {left:107px;}
#search-bar #left ul {left:107px;}
#search-bar ul {height: 0; bottom: 40px; overflow: hidden; position: absolute; display: inline-block; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
#search-bar ul.open {height: auto;}
#search-bar li {height: 40px; width: 257px; border-bottom: 1px solid #E6E7E8; text-indent: 20px; background-color: #fff; line-height: 44px; list-style-type: none;}
#search-bar li.active, #search-bar li:hover {background-color: #E6E7E8;}
#search-bar #left a span, #search-bar #right a span {background: url(images/more.png) no-repeat; width: 7px; height: 9px; display: block; position: absolute;}
#search-bar .fixed {height: 40px; width: 257px; background-color: #fff; line-height: 44px; /* position: absolute; z-index: 1000;*/ text-indent: 20px; }
#search-bar #left a {left: 107px;}
#search-bar #right a {left: 42px;} 
#search-bar #left a span {top:15px; right: 10px;}
#search-bar #right a span {top:15px; right: 10px;}
#search-bar li a {color: #939598;}
#search-bar a {color: #939598; display: block;}
.fixed {position: absolute; bottom: 0; left: 0;}
#search-bar a.fixed li:hover {background-color: #fff;}
    @media only screen and (max-width : 850px) {


#search-bar #right a {
	left:107px;
}
}

/* footer - menu */
#menu {background: rgb(241, 242, 242); background: rgba(241, 242, 242, 0.98); width: 100%; position: relative;}
#menu ul {text-align: center;position:relative;
}
#menu li {display: inline; padding: 0 15px 0 15px; line-height: 77px; letter-spacing: 0.2em;}
#menu li a:hover, #menu a.active {text-decoration: underline;}
#social-media {
	position: absolute;
    right: 10px;
    top: 26px;
}
#social-media a {display: inline-block;}
.twitter, .fb, .instagram { margin-right: 10px; }

#social-media a img {
	height:20px; width:auto;
}
footer .scroll {width: 100%; margin: 0 auto; padding-left:20px;padding-right:20px;box-sizing:border-box;}

/* Navigation */
.navigation {clear: both; overflow: auto; padding-top: 40px; letter-spacing: 0.2em;}

/* open */
#menu section {height: 0; overflow: hidden; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
/* #menu .open:target { padding-bottom: 20px; height: 394px;}  */
#menu section img {display: block; margin: 0 auto 20px auto;}
#menu section p { margin: 0 auto 0 auto; padding: 0 0 20px 0; text-align: left; font-size: 14px; line-height: 23px; letter-spacing: 0.1em; width:55%;}
a.close {text-align: center; display: block; text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px;
	position: fixed;
    bottom: 10px;
    width: 100%;
	
}
a.close span {background: url(images/close.png) no-repeat; width: 15px; height: 15px; display: inline-block; margin: 0 0 0 10px; vertical-align: middle;}

/* browser testing */
.lt-ie8 footer {display:inline;}

/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */
.jspContainer { overflow:hidden; position:relative; outline: none; }
.jspPane { position:absolute;  outline: none}
.jspVerticalBar { position:absolute; top:0; right:0; width:6px; height:100%; background:transparent; }
.jspVerticalBar *,.jspHorizontalBar * { margin:0; padding:0; }
.jspCap { display:none; }
.jspHorizontalBar .jspCap { float:left; }
.jspTrack { background:#FFF; position:relative; }
.jspDrag { background:#c5c5c5; position:relative; top:0; left:0; cursor:pointer; -webkit-border-radius: 3px; border-radius: 3px;}
.jspHorizontalBar .jspTrack,.jspHorizontalBar .jspDrag { float:left; height:100%; }
.jspVerticalBar .jspArrow { height:16px; }
.jspHorizontalBar .jspArrow { width:6px; float:left; height:100%; }
.jspVerticalBar .jspArrow:focus { outline:none; }

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	footer {position: fixed;}
}

/* Internet Exporer */
.oldie body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}


.section-inner {
	box-sizing:border-box;
	padding-left:20px;
	padding-right:20px;
}

    @media only screen and (max-width : 400px) {
#search-bar #left a, #search-bar #right a {
    width: auto;
    padding-right: 25px;
    
    }
    
    #search-bar li {
width:auto;
height:auto;
text-indent:0;
padding-left:20px;
    }
    }
    
    
    @media only screen and (max-width : 650px) {

	#menu li {
		display:inline-block;
		line-height:30px;
	}

	#logo { padding: 10px 0 10px 0; max-width:100%;}
	
	
	}
	header {
		height:100px;
	}
	.container {
		margin-top:50px;
	}
	
		    @media only screen and (max-width : 490px) {
	#social-media {
		top:34px;
	}
	#social-media a img {
height:20px; width:auto;
	}


}
	    @media only screen and (min-width:491px) and (max-width : 825px) {

	#social-media {
		top:-55px;
	}
		}
	
	
	@-webkit-keyframes uil-default-anim { 0% { opacity: 1} 100% {opacity: 0} }@keyframes uil-default-anim { 0% { opacity: 1} 100% {opacity: 0} }.uil-default-css > div:nth-of-type(1){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.5s;animation-delay: -0.5s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(2){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.4166666666666667s;animation-delay: -0.4166666666666667s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(3){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.33333333333333337s;animation-delay: -0.33333333333333337s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(4){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.25s;animation-delay: -0.25s;}.uil-default-css { margin:0 auto;position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(5){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.16666666666666669s;animation-delay: -0.16666666666666669s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(6){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.08333333333333331s;animation-delay: -0.08333333333333331s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(7){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0s;animation-delay: 0s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(8){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.08333333333333337s;animation-delay: 0.08333333333333337s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(9){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.16666666666666663s;animation-delay: 0.16666666666666663s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(10){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.25s;animation-delay: 0.25s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(11){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.33333333333333337s;animation-delay: 0.33333333333333337s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(12){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.41666666666666663s;animation-delay: 0.41666666666666663s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}