/*
Theme Name: Bespoke
Description: Bespoke Theme
Version: 1.7
Author: Ian Atkins
Author URI: http://www.addedlovely.com
*/

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

/* ==========================================================================
	Fonts
   ========================================================================== */

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

}

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

}


/* ==========================================================================
	General
   ========================================================================== */
* {margin: 0; padding: 0;}
html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; box-sizing: border-box;} 
*, *:before, *:after  {box-sizing: inherit;}
body {background: #ffffff; color: #000; font-family: 'itc_avant_garde_gothicbook';}
.container {width: 90%; margin: 0 auto; padding: 65px; min-width: 800px; position: relative;}

img {border: 0; display: block; outline: none;}
.clear:after {content: ""; visibility: hidden; display: block; height: 0; clear: both;}
a {text-decoration: none;}
.last {margin-right: 0 !important;}
li {list-style-type: none;}

/* ==========================================================================
	Typography
   ========================================================================== */
h1, h2, h3, h4 {font-weight: normal;}
strong {font-family: 'itc_avant_garde_gothicbold'; font-weight: normal;}

/* ==========================================================================
	Forms
   ========================================================================== */
input, select, textarea {outline: none; border: none; font-family: inherit;}
input[type=text], input[type=submit] {-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;}

/* ==========================================================================
	Structure
   ========================================================================== */
.header {display: block; padding: 0px 0 20px 0; }
.burger {display: none; -webkit-appearance: none; appearance: none; border: 0; outline: none; border-radius: 0;}

main {width: 80%; float: left; position: relative; padding-right: 20px; z-index: 0;} 


figure {position: absolute; margin-bottom: 20px; width: 100%;}

aside {width: 20%; float: left; background: #fff; position: relative; display: block; z-index: 1000; }
aside.menu {float: right;}

.accordion {text-transform: uppercase; display: block; width: 100%;}
.accordion a {font-size: 9px; /*   font-size: 0.563em; */line-height: 15px; font-family: 'itc_avant_garde_gothicbold'; letter-spacing: 0.040em; color: #808080; display: block;}
.accordion h4.active > a, .accordion h4 a:hover {color: #0093ad;}
.accordion a:hover,  .accordion a.active  {color: #000;}
.accordion a span {text-transform: none; display: block; font-size: 9px; /* font-size: 0.563em; */ line-height: 12px;}
.accordion h4 a {color: #000; font-size: 12px; /* font-size: 0.750em; */ line-height: 19px;}
.accordion > div {display: block; height: 19px; overflow: hidden; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
.accordion > div:target h4, .accordion div.active h4 {color: #0093ad;}
.accordion div h4 a {display: block; color: inherit; outline: 0 none;}

.slideshow-container {position: relative;}
.slideshow {position: relative;}
.slide {position: relative;}
.slide img {width: 100%; height: auto;}
.slide.portrait:after {content: ''; padding-top: 70.714285714285714%; display: block;} 
.slide.portrait img {position: absolute; top:0; left: 0; bottom: 0; height: 100%; width: auto;}

.slideshow-caption {position: absolute; font-size: 9px; line-height: 12px; letter-spacing: 0.04em; width: 140px; right: 10px; z-index: 100; bottom: 10px; padding: 10px; background-color: #FFF; margin: 0; visibility: hidden; opacity: 0;  -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;  z-index: 2;}
.slideshow-caption.active {display: block;}
.slideshow-caption h2 {text-transform: uppercase; font-family: 'itc_avant_garde_gothicbold'; font-weight: normal; font-size: 9px;}
.slide:hover .slideshow-caption, .touchevents .slideshow-caption {opacity: 1; visibility: visible;}

.pager {position: relative; margin-bottom: 65px; margin-top: 20px;}
.pager img {padding-right: 10px; position: relative;}
.pager .slick-slide {position: relative;}
.pager .slick-current:after {content:''; height: 7px; background: #0093ad; display: block; position: absolute; bottom: 0; left: 0; right: 10px;}

.slick-arrow {width: 50px; position: absolute; top: 0; bottom: 0;  z-index: 1; outline: none; cursor: pointer; font-size: 0; border-radius: 0; appearance: none; background: transparent; border: 0;}
.slick-arrow:after {content: ''; position: absolute; top:50%; left: 0; right: 0; margin: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 0; border-style: solid; }
/* .slick-arrow:hover:after {opacity: 1;} */
.slick-prev  {left: 0; }
.slick-prev:after { border-width: 20px 20px 20px 0; border-color: transparent #0093ae transparent transparent;}
.slick-next {right: 0; }
.slick-next:after {border-width: 20px 0 20px 20px; border-color: transparent transparent transparent #0093ae;}
.slick-disabled {opacity: 0;}

/* ==========================================================================
	About
   ========================================================================== */
.text {width: 46.060606060606%; color: #0093ad; font-size: 10px; line-height: 25px; letter-spacing: 0.040em; padding-top: 40px; float: left; margin-right: 7.93893129771%;}
.text a:hover {color: #0093ad;}
.client-list { font-size: 0.563em; line-height: 15px; letter-spacing: 0.040em; font-family: 'itc_avant_garde_gothicbold'; padding-top: 40px;}
.client-list, .client-list a {color: #999999; text-transform: uppercase;}
.client-list a span {text-transform: none;}
.about p {padding-bottom: 10px;}

/* ==========================================================================
	Contact
   ========================================================================== */
.contact .text p, .contact .text a  {font-size: 10px; /* font-size: 0.625em; */ line-height: 35px; color: #000000; letter-spacing: 0.080em;}
.contact .text p {border-bottom: 3px solid #cccccc;}


/* ==========================================================================
	Slick Slider
   ========================================================================== */
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:none}.slick-list.dragging{cursor:pointer;cursor:hand}.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir='rtl'] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{pointer-events:none}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none}

/* ==========================================================================
	Layout : Cookie
   ========================================================================== */
.layout-cookie-warning {position: fixed; bottom: 0; left: 0; right: 0; display: none; background: #FFF;  text-align: left; z-index: 2;}
.layout-cookie-warning .container {padding: 20px; width: 100%;}
.layout-cookie-warning.active {display: block;}
.layout-cookie-warning p {font-size: 12px; margin-right: 140px; }
.layout-cookie-warning .button {height: 25px; line-height: 25px; padding: 0 20px; background: #0093ad; border:0; appearance: none; -webkit-apperance:none; color: #FFF; position: absolute; top:0; bottom: 0; margin: auto; right: 20px;}


/* ==========================================================================
	Media Queries
   ========================================================================== */
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 768px) {
	body { padding-top: 54px; }
	main {width: auto; float: none; padding-right: 0;}
	.container {width: 90%; padding: 0; min-width: 0; }
	
	/* Header */
	.header {position: fixed; top:0; left:0; right:0; padding: 20px 5% 20px 5%; background: #FFF; z-index: 3;}
	.logo img {width: 260px; height: auto;}
	.burger {display: block; position: absolute; right: 0; top:0; bottom: 0; margin: auto; width: 44px; height: 44px; cursor: pointer; background: transparent;}
	.burger:before, .burger:after {content: ''; width: 18px; position: absolute; margin: auto; left: 0; right: 0; top:0; bottom: 0; display: block;}
	.burger:before { height: 11px; border-top: 1px solid #000; border-bottom: 1px solid #000; }
	.burger:after {  border-bottom: 1px solid #000; height: 0;} 
	
	/* Menu */
	.menu {width: 100%; position: fixed; left:0; right:0; bottom: 0; padding:54px 20px; top:0; visibility: hidden; opacity: 0; overflow: auto; -webkit-overflow-scrolling: touch; z-index: 2;}
	.menu.active {opacity: 1; visibility: visible;}
	.accordion {text-transform: uppercase; display: block; width: 100%; margin: 0 auto; padding-bottom: 20px;}
	.accordion div:after {content: ""; visibility: hidden; display: block; height: 0; clear: both;}
	.accordion div {height: auto !important;}
	.accordion div a { width: auto; display: inline-block; padding-right: 30px; padding-bottom: 10px;}
	.accordion #productions.active h4 {padding-bottom: 6px;}
	
	/* Page */
	.text {width: auto; margin:auto; float:none;}
	
	/* Slideshow */
	.pager {display: none;}	
	.slide img {margin-bottom: 20px;}
	.slide.portrait:after {display: none}
	.slide.portrait img {position: static; height: auto; width: 100%;}
	.slideshow-caption { position: static; visibility: visible; opacity: 1; padding-left: 0; margin-top: -20px;}
	
	/* Cookie Warning */
	.layout-cookie-warning { text-align: center; }
	.layout-cookie-warning .container {padding-top: 10px; padding-bottom: 10px;}
	.layout-cookie-warning p { margin-right: 0; font-size: 11px; }
	.layout-cookie-warning .button { margin-top: 10px; position: static;}

	
}

/* iPads (landscape) ----------- */
@media only screen  and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.container {width: 90%; padding: 20px 0 20px 0;}
}