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

/* ==========================================================================
	Addedlovely.com
   ========================================================================== */

/* ==========================================================================
	Fonts
   ========================================================================== */
@font-face {
    font-family: 'FuturaMedium';
    src: url('fonts/medium.eot');
    src: url('fonts/medium.eot?iefix') format('eot'),
         url('fonts/medium.woff') format('woff'),
         url('fonts/medium.ttf') format('truetype'),
         url('fonts/medium.svg#webfont1JSKNU0V') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* ==========================================================================
	General
   ========================================================================== */
* {margin: 0; padding: 0;}
html {-webkit-text-size-adjust: none; /* stops text resizing on iphone */} 
body {background: #ffffff;  font-family: 'FuturaMedium';}
img {border: 0; display: block; outline: none;}
.clear:after {content: ""; visibility: hidden; display: block; height: 0; clear: both;}
a {text-decoration: none; color: #000;}
.last {margin-right: 0 !important;}
li {list-style-type: none;}

.vertical-container {display: table; height: 621px;}
.vertical-center {display: table-cell; vertical-align: middle;}

/* ==========================================================================
	Forms
   ========================================================================== */
input, select, textarea {outline: none; border: none; font-family: inherit;}
input[type=text] {-webkit-appearance: none; border-radius:0;}
textarea {resize: none;}
::-webkit-input-placeholder {color: #000;}
:-moz-placeholder {color: #000;}
::-moz-placeholder {color: #000;}
:-ms-input-placeholder {color: #000;}


/* ==========================================================================
	Media Queries
   ========================================================================== */   

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	/* Styles */

	html, body {width: 320px; font-family: 'FuturaMedium';}
	header {padding: 40px 0 40px 0; position: fixed; top: 0; left: 0; background: #fff; width: 100%; z-index: 1000;}
	header img {width: 270px; height: auto; margin: 0 auto;}
	.container {width: 320px; margin: 0 auto 0 auto; padding-bottom: 34px; display: block;}
	.vertical-container {height: 360px;}

	/* slideshow */
	.home .slideshow {}
	.slideshow {width: 320px; top: 117px; position: absolute;}
	.slideshow .scroller a {width: 320px;}
	.slideshow img {width: 100%; height: auto;}
	
	/* menu */
	.menu {width: 100%; position: absolute; top: 117px; max-height: 416px; text-align: center; padding-bottom: 34px;}
	.menu li {font-size: 22px; line-height: 27px;}
	.menu li a img {display: none; top: 117px; left: 0; right: 0; position: fixed; z-index: -1; margin: 0 auto;}
	.menu li:hover a img {display: block;}
	
	/* project-single */
	.back-to-home {position:fixed; top: 104px; width: 100%; text-align: center; font-size: 22px; line-height: 30px;}
	.image-container {width: 320px; float: left; display: inline-block;}
	.slideshow img {width: 320px; height: auto;}
	.portrait img {width: 272px; margin: 0 auto; height: auto;}
	.image-container.landscape {margin: 0 24px;}
	.project-single .slideshow {overflow-x: scroll; -webkit-overflow-scrolling: touch; /* momentum scrolling */}
	.project-single .slideshow .scroller {width: 10000px; position: relative;}
	.project-single .slideshow .scroller a {width: 320px; display: inline-block; float: left;}
	.project-single .slideshow .scroller p {width: 300px; padding-left: 20px;}
	.slideshow p.vertical-center a {display: inline;}

	
	/* contact */
	.contact .slideshow {top: 0;}
	.contact .vertical-container {height: 362px; width: 320px;}
	.contact p {width: 270px; margin: 0 auto; text-align: center;}
	.vertical-center a {display: block;}
	
	/* footer */
	footer {background: #fff; width: 100%; height: 34px; display: block; position: fixed; bottom: 0; left: 0; z-index: 1000;}
}


/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
	/* Styles */

	html, body {font-family: 'FuturaMedium'; width: 768px;}
	.container {width: 768px; margin: 0 auto 0 auto;}
	header {width: 100%; position: fixed; top: 0; left: 0; background: #fff; z-index: 1000; padding: 50px 0 60px 0;}
	header img {margin: 0 auto;}
	a.logo {display: block;}
	.back-to-home {position: fixed; top: 166px; left: 0; width: 100%; text-align: center; font-size: 28px; line-height: 34px;}


	/* slideshow */
	.home .slideshow {position: fixed; top: 182px; left: 50%; margin-left: -384px;}
	.slideshow {width: 768px;  height: auto; position: absolute; top: 182px; left: 50%; margin-left: -384px;}
	.slideshow a {display: block;}
	.slideshow img {width: 100%; height: auto;}
	.portrait img {width: 652px; margin: 0 auto;}
	.image-container {width: 768px; float: left; display: inline-block; margin: 0 52px 0 0; }
	.image-container.landscape {margin-left: 58px;}
	
	/* menu */
	.menu {position: absolute; top: 182px; text-align: center; width: 652px; z-index: 999; padding-bottom: 582px; left: 50%; margin-left: -326px;}
	.menu li {line-height: 52px; font-size: 42px; z-index: 999;}
	.menu li a img {display: none; top: 182px; left: 0; right: 0; position: fixed; margin: 0 auto; z-index: -1;}
	.menu li:hover a img {display: block;}
	
	/* project-single */
	.project-single .slideshow {overflow-x: scroll; -webkit-overflow-scrolling: touch; /* momentum scrolling */}
	.project-single .slideshow .scroller {width: 10000px; position: relative;}
	.project-single .slideshow .scroller  a {width: 768px; display: inline-block; float: left;}
	p.vertical-center {padding-left: 120px; font-size: 26px;}
	.slideshow p.vertical-center a {display: inline;}

	/* contact */ 
	.contact {text-align: center;} 
	.contact .vertical-container {width: 636px; margin: 0 auto;}
	.contact p {min-width: 521px; padding-left: 0;}  
	.contact p a {line-height: 32px;}
	
	/* footer */
	footer {display: none;}
}