/*  Theme Name: Bespoke 
	Description: 1.1
	Author: Addedlovely
*/


/* ==========================================================================
	Fonts
   ========================================================================== */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 5, 2015 */

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

}

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

}

@font-face {
  font-family: 'logobook';
  src: url('fonts/logobook.eot?86660005');
  src: url('fonts/logobook.eot?86660005#iefix') format('embedded-opentype'),
       url('fonts/logobook.woff2?86660005') format('woff2'),
       url('fonts/logobook.woff?86660005') format('woff'),
       url('fonts/logobook.ttf?86660005') format('truetype'),
       url('fonts/logobook.svg?86660005#logobook') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Default Fontello */
[class^="icon-"]:before, [class*=" icon-"]:before {font-family: "logobook"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; text-align: center; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-close:before { content: '\e802'; } /* '' */
.icon-search:before { content: '\e803'; } /* '' */
.icon-burger:before { content: '\e808'; } /* '' */
.icon-email:before { content: '\f0e0'; } /* '' */
.icon-twitter:before { content: '\f30a'; } /* '' */
.icon-facebook:before { content: '\f30d'; } /* '' */
.icon-pinterest:before { content: '\f313'; } /* '' */
.icon-tumblr:before { content: '\f316'; } /* '' */

/* ==========================================================================
	Helpers
   ========================================================================== */
.clear:after {content: ""; visibility: hidden; display: block; height: 0; clear: both;}
.v-center {position: absolute; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}
.v-container {display:table; height: 100%;}
.v-content {display:table-cell; vertical-align:middle; height: 100%;}
.center {display:block; margin-left: auto; margin-right:auto;} 
.cover {-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; background-repeat: no-repeat; }
.lazy {display: none;}
.browsehappy {position: fixed; bottom: 0; left: 0; right: 0; text-align: center; background: #000; color: #fff;}


/* ==========================================================================
	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: #FFF; color: #1D1D1B;}
img {border: 0; display: block; outline: none; -ms-interpolation-mode: bicubic; max-width: 100%; height: auto;}

/* ==========================================================================
	Typography
   ========================================================================== */
h1, h2, h3, h4, h5 {font-weight: normal;}
h1 {}
h2 {font-size: 36px; line-height: normal; font-weight:bold; letter-spacing: normal;}
h3 {font-size: 21px; line-height: 24px;}
h4 {font-size: 14px; line-height: 20px; color: #9C9B9B; text-transform: uppercase; letter-spacing: 0.01em;}
.keyline {font-size: 12px; background-position: center bottom; height: auto; padding-bottom: 32px; text-transform: uppercase; color: #000; text-align: center; background: url('images/keyline.svg') no-repeat center bottom; letter-spacing: 0.1em; line-height: 1.5}
p {font-size: 12px; line-height: 14px;}

body {font-family: 'kamerik_105book'; font-size: 12px; line-height: 1.16666666666667; letter-spacing: 0.05em;}
li {list-style-type: none;}
a {text-decoration: none; outline: none; color: #000;}
cite {font-style: normal;}

.bold {font-weight: bold;}
.ucase {text-transform: uppercase;}

.f-12 {font-size: 12px;}
.f-14 {font-size: 14px;}
.f-16 {font-size: 16px;}
.f-18 {font-size: 18px;}
.f-20 {font-size: 20px;}
.f-21 {font-size: 21px;}
.f-24 {font-size: 24px;}

/* ==========================================================================
	Forms
   ========================================================================== */ 
button, input, optgroup, select, textarea {color: inherit; font: inherit; outline: none; border: none; background: transparent;}
input[type=text], input[type=submit], input[type=email], input[type=password] {-webkit-appearance: none; border-radius:0;}
button, input[type="button"], input[type="submit"] {cursor: pointer;}
textarea {resize: none; overflow: auto; -webkit-appearance: none;}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none; line-height: normal;}

::-webkit-input-placeholder {color: #FFF;}
:-moz-placeholder {color: #FFF;}
::-moz-placeholder {color: #FFF;}
:-ms-input-placeholder {color: #FFF;}

label {font-weight: bold; display: block; line-height: 40px; }
input {height: 40px; border: 1px solid #C1C1C1; text-indent: 10px; margin-bottom: 12px; width: 100%;}
input.button {background: #000; color: #FFF; text-indent: 0; display: block; text-align: center; max-width: 230px; border-radius: 3px; border: 0; margin-top: 12px;}
form p {font-size: inherit; margin-bottom: 40px;}

/* ==========================================================================
	Structure
   ========================================================================== */
.wrapper {padding-top: 120px; padding-bottom: 50px;}
.container {padding: 0 20px; max-width: 1000px; margin: 0 auto; position: relative;}   
.main {margin-top: 30px;}

/* ==========================================================================
	Header
   ========================================================================== */
.header { color: #fff; position: fixed; top:0; left:0; right:0; background-color: #000; text-align: left; z-index: 2;}
.logobook { display: inline-block;}
.logobook:hover img {-webkit-transform: scale(1.05); transform: scale(1.05); -webkit-transform-origin: center center; transform-origin: center center; }
.logo-container {height: 70px; line-height: 82px;}

/* Secondary menu */
.secondary-menu {position: absolute; top:0; right: 20px; line-height: 75px;}
.secondary-menu a {display: inline-block; margin-left: 30px; color: #FFF;}
.secondary-menu a:hover {opacity: 0.75;}
.secondary-menu a.active {color: #8BD2FA;}

/* Burger Icon */
.toggle-menu {position: absolute;  line-height: normal; font-size: 17px; color: #FFF; top:0; bottom: 0; margin: auto; right: 16px; height: 18px;}

/* Search */
.search  {background: #4A4A4A; line-height: 50px;  overflow: hidden; height: 0; -webkit-transition: height 0.3s ease-out; transition: height 0.3s ease-out; }
.search-form {font-size: 20px; position: relative; height: 50px; }
.search-form input {width: 100%; text-indent: 44px; color: #FFF; border: 0;}
.search-form button {position: absolute; left:20px; top:0; width: 25px; font-size: 25px; color: #FFF;}

/* Search : Open */
.show-search .search {height: 50px;}
.show-search .toggle-search {color: #8BD2FA;}

/* Main Menu */
.menu {background: #8BD2FA; line-height: 50px; position: relative;}
.menu:after {position: absolute; width: 45px; height: 22px; content: ''; display: block; background: url('images/menu-border.svg') no-repeat center center; left:0; right:0; bottom: -22px; margin: auto; }
.menu h2 {text-align: center; font-weight: normal; color: #000; padding: 13px 0; line-height: 1.5;}

.menu a { padding-right: 38px; display: inline-block; position: relative; letter-spacing: 0.042em;}
.menu a.menu-item:after {content: ''; width: 0; position: absolute; right: 20px; top: 0; bottom: 0; margin: auto; height: 0; border-style: solid; border-width: 8px 5px 0 5px; border-color: #ffffff transparent transparent transparent; display: inline-block; }
.menu a.active {color: #FFF;}
.menu a.open {color: #FFF;}

.menu-item-twitter {float: right; text-transform: uppercase; padding-right: 30px; position: relative;}
.menu-item-twitter:before, .menu-item-twitter:after, .menu-item-newsletter:before, .menu-item-newsletter:after {position: absolute; right: 0; top:0; bottom: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%; font-size: 22px; line-height: 22px; z-index: 1;}
.menu-item-twitter:after {content:''; background-color: #FFF; z-index: 0;  border: 2px solid #8BD2FA;}
.menu-item-newsletter:before {font-size: 11px; color: #FFF;}
.menu-item-newsletter:after {content: ''; background-color: #000; z-index: 0;}

/* Mobile Menu */
.mobile-menu {opacity: 0; visibility: hidden; position: fixed; top:70px; left:0; right:0; bottom: 0; background: #E8E8E8;  overflow: scroll; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; z-index: 1;}
.mobile-menu li {line-height: 50px; border-bottom: 1px solid #FFF;}
.mobile-menu li > a {padding: 0 38px; display: block; position: relative;}
.mobile-menu .menu-item > a {background: #8BD2FA;}
.mobile-menu .menu-item > a:before {width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 10px; border-color: transparent transparent transparent #ffffff; content: ''; position: absolute; top:0; bottom: 0; margin: auto; left:20px;}  
.mobile-menu .menu-item > a.open:before {border-color: transparent transparent transparent #000; -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.mobile-menu .tags {background: #FFF; line-height: normal;}
.mobile-menu .tags a {width: 25%;}
.mobile-menu .tags a:nth-of-type(4n+1) {clear: both; }
.mobile-menu .tags.open  {padding: 10px; height: auto !important; }

/*  Mobile Mene : Mailing / Twitter */
.mobile-menu-item {background: #FFF;}
.mobile-menu-item .menu-item-twitter, .mobile-menu-item .menu-item-newsletter {padding-left: 58px; float: none; border-bottom: 1px solid #EFEFEF; text-transform: uppercase;} 
.mobile-menu-item .menu-item-twitter:before, .mobile-menu-item .menu-item-twitter:after, .mobile-menu-item .menu-item-newsletter:before, .mobile-menu-item .menu-item-newsletter:after {right: auto; left:20px;}

/* Mobile Menu : Search */
.mobile-menu .search {height: auto;}
.mobile-menu .search-form input {font-size: 18px;}
.mobile-menu .search-form button {color: #FFF;}


/* Tags */
.tags {height: 0; background: #ECECEC; overflow: hidden; -webkit-transition: height 0.3s ease-out; transition: height 0.3s ease-out; text-align: center; position: fixed; top:120px; left:0; right: 0; z-index: 2;}
.tags.open { height: auto;}
.tags .container {padding: 16px 0; clear: both; overflow: auto;}
.tags a {font-size: 11px; position: relative; display: inline-block; width: 10%; float: left; }
.tags .logo:nth-of-type(10n+1) {clear: both; }
.tags .logo-svg {margin-bottom: 0;}

.logo {margin-bottom: 16px; text-align: center; display: block;}
.logo-svg {position: relative; /* margin-bottom: 16px; */}
.logo-svg:before {padding-top: 85%; display: block; content: '';}
.logo-svg img {position: absolute; top:0; bottom: 0; left:0; right:0; padding: 15%; width: 100%; margin: auto; max-height: 100%;}

/* ==========================================================================
	Listing
   ========================================================================== */
.logo-block {margin-bottom: 10px; display: inline-block; text-align: center;  margin-bottom: 20px; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}
.logo-block h2 {font-weight:bold;}
.logo-block h2, .logo-block h3 {font-size: 12px; line-height: 14px;}
.logo-block h3 {margin-bottom: 10px;}

.pagination {clear: both; overflow: auto; text-align: center; padding-top: 20px;}
.pagination a, .pagination span {display: inline-block; padding: 0 5px;}
.pagination span {color: #8BD2FA;}
.pagination .dots {color: #000;}
.pagination .previous, .pagination .next {font-size: 26px;}

/* Next Button - Inline with Listing */
.next-block { padding: 20px;}
.next-block div {border: 2px solid #000; position: relative; }
.next-block div:before {content: ''; display: block; padding-top: 100%;}
.next-block span {left:0; right: 0; margin: auto;}

/* Scroll Reveal */
.sr .logo-block { visibility: hidden; }

/* ==========================================================================
	Advertising
   ========================================================================== */
.advertising-block {border: 1px solid #EAEAEA; text-align: center; padding: 10px; font-size: 16px; }
.advertising-block img {margin: 10px auto;}
.carbon-poweredby {display: block; font-size: 12px; }
.carbon-text {display: block; padding: 5px 10px;}
#carbonads {clear: both; overflow: auto; display: block;}

/* Advertising : Homepage */
.homepage-intro-logos .advertising-block {border: 0;}

/* Advertising : Page */
.page .advertising-block { text-align: left; clear: both;}
.page .advertising-block .carbon-img {float: left;}
.page .advertising-block img {margin: 0 20px 0 0;}
.page .advertising-block .advert-square { display: none; }
.page .advertising-block .advert-horizontal { display: block; }

/* Advertisging : Two Column */
.page-two-column .advertising-block {max-width: none;}

/* Horizontal Banner Ad */
.advert-horizontal { display: none; }

/* ==========================================================================
	Page : Two Column 
   ========================================================================== */
.page-two-column > article {width: 48%; float: left;}
.page-two-column > article:last-of-type {float: right;}
.page-two-column .keyline {margin-bottom: 20px;}

.page-title  { font-size: 24px; font-weight: normal; margin: auto auto 20px auto; text-align: center;}

/* ==========================================================================
	Page : Resources
   ========================================================================== */
.page-resources ol, .page-resources ul {margin-bottom: 40px;}
.page-resources ol li {list-style-type: none;}
.page-resources li > span {display: inline-block; width: 36px;}
.page-resources li a span {border-bottom: 1px solid #000;}
.page-resources ol a, .page-resources ul a {margin-bottom: 3px; display: inline-block;}


/* ==========================================================================
	Homepage
   ========================================================================== */
.homepage-categories {margin-bottom: 40px;}

.homepage-logos h2 {font-weight: normal;}
.homepage-logos > a {width: 12.5%; float: left; text-align: center;}
.homepage-logos .logo:nth-of-type(8n+1) {clear: both; }

.homepage-intro {width: 39.791666666667%; float: left; padding: 0 3%;}
.homepage-intro h2 {text-transform: none; font-weight: normal; letter-spacing: 0.008em; }
.homepage-intro-logos {width: 60.208333333333%; float: left; position: relative; border-left: 1px solid #9B9B9B;}
.homepage-intro-logos > a, .homepage-intro-logos > div {width: 33.333333%; float: left;}
.homepage-intro-logos:before, .homepage-intro-logos:after {content: ''; position: absolute; top:0; bottom: 0; display: block; width: 1px; background: #9B9B9B; }
.homepage-intro-logos:before {left:33.33333%}
.homepage-intro-logos:after {left:66.66666%}

.all-logos {position: relative;}
.all-logos:before {content: ''; padding-top: 100%; display: block;}
.all-logos span {position: absolute; top:50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding-bottom: 20px; background-image: url('images/all.svg'); background-position: center bottom; background-repeat: no-repeat; text-transform: uppercase;  letter-spacing: 0.05em; left:0; right:0;}


/* ==========================================================================
	Single
   ========================================================================== */
.single-logo {position: relative; padding: 20px 0;}
.single-logo:before {content: ''; display: block; position: absolute; top:20px; bottom: 20px; left:50%; width: 1px; background-color: #9B9B9B;}
.single-logo figure { margin-bottom: 0; }

.single-logo-details h3 {margin-bottom: 30px;}
.single-logo-details h3 a {position: relative;}
.single-logo-details h3 a:after {content: ''; width: 100%; height: 1px; display: block; position: absolute; left: 0; bottom: 3px; background: rgba(0,0,0,0.5);}

/* Single tags */
.single-tags {font-size: 14px; line-height: 24px; margin-bottom: 10px;}
.single-tags a {text-decoration: underline; color: #808080; margin-right: 10px;}

/* Share icons */
.share { margin-top: 32px; }
.share a { font-size: 35px; margin-right: 12px; display: inline-block; color: #7F7F7F; }

/* ==========================================================================
	Page
   ========================================================================== */
.wysiwyg {line-height: 1.3125;}
.wysiwyg .keyline {margin-bottom: 20px;}
.wysiwyg h1 {font-size: 21px; font-weight: bold; margin: auto auto 20px auto; }
.wysiwyg h2 {font-size: 24px; font-weight: normal; margin: auto auto 20px auto; text-align: center;}
.wysiwyg p {margin-bottom: 20px; line-height: 1.3125; font-size: 16px;} 
.wysiwyg a {text-decoration: underline;}

/* ==========================================================================
	Page : Directory
   ========================================================================== */
.directory {line-height: 1.31;}
.directory strong {display: block; margin-top:20px;}
.directory-heading {position: relative; z-index: 1;}
.directory-taxonomy h3 { padding-top: 30px; margin-top: -22px; background-color: #FFF;}
.directory a:hover {opacity: 0.5;}

/* ==========================================================================
	Footer
   ========================================================================== */
.footer {background: #ECECEC; text-align: center; padding: 30px 0; line-height: 30px;  position: relative; color: #9C9B9B; z-index: 0; } 
.footer:before {content: ''; background: url('images/border-white-down.svg') no-repeat center center; display: block; width: 45px; height: 23px; position: absolute; left: 0; right: 0; margin: auto; top: 0; z-index: 1;}
.footer a {color: #6F6F6E; padding: 0 26px;}
.footer .logomark {display: block; margin: 20px auto 0 auto;}
.footer h3 {color: #000; line-height: 40px; margin-top: -10px; letter-spacing: 0.13em; }

/* Sticky */
/*
html, body { height: 100%;}
.wrapper { min-height: 100%; margin-bottom: -164px; }
.wrapper:after { content: ""; display: block;}
.footer, .wrapper:after { height: 164px; }
*/

/* Footer : Mailing List */
.footer-mailinglist {max-width: 330px; width: 100%; margin: auto auto 26px auto; position: relative;}
.footer-mailinglist p {margin: 0; display: none;}
.footer-mailinglist input {background: #FFF; border: 0; margin: 0; height: 30px;}
.footer-mailinglist input.button {position: absolute; top:0; right:0; width: 110px; background: #7F7F7F; border-radius: 0; text-transform: uppercase; letter-spacing: 0.15em;}
.footer-mailinglist .message.active {display: block; margin-top: 10px;}
.footer-mailinglist.subscribed .message {display: block;}
.footer-mailinglist.subscribed input {display: none;}

/* ==========================================================================
	Transitions
   ========================================================================== */
.logobook img {-webkit-transition: all 0.2s cubic-bezier(.77,0,.175,1); transition: all 0.2s cubic-bezier(.77,0,.175,1);}
.directory a {-webkit-transition: opacity 0.3s cubic-bezier(.77,0,.175,1); transition: opacity 0.3s cubic-bezier(.77,0,.175,1);}

/* ==========================================================================
	Animations
   ========================================================================== */
@-webkit-keyframes pulse {
  0% { opacity: 0;}
  40% {opacity: 1;}
  60% {opacity: 1;}
  100% { opacity: 0; }
}

@keyframes pulse {
  0% { opacity: 0;}
  40% {opacity: 1;}
  60% {opacity: 1;}
  100% { opacity: 0; }
}

/* ==========================================================================
	Media Queries
   ========================================================================== */
@media only screen and (max-width : 820px) {
	
	/* Homepage */
	.homepage-logos > a {width: 20%;}
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width : 820px) {
	
	/* Structure */
	.main {margin-top: 40px;}
	.wrapper {padding-top: 70px;}
	
	/* Typography */
	h2 { font-size: 30px; }
	h3 { font-size: 18px; }
	h4 { font-size: 12px; }
	
	/* Menu */
	.menu a {display: none;}

	/* Mobile Menu : State */
	.show-mobile-menu .mobile-menu  {opacity: 1; visibility: visible;}
	.show-mobile-menu .toggle-menu:before {content: '\e802'; font-size: 24px; height: 24px;}

	/* Tags */
	.mobile-menu .tags {position: static;}
	.mobile-menu .tags .logo:nth-of-type(10n+1) {clear: none; }
	.mobile-menu .tags .logo:nth-of-type(4n+1) {clear: both; }
	
	/* Header */
	.logobook img {width: 156px; height: auto;}
	.header .menu:after {display: none;}
	
	/* Search Results */
	.page-search .keyline {display: none;}
	
	/* Logo Page */
	.page-logo .menu:after {display: none;}
	.single-logo:before {display: none;}
	.single-logo-details h3 {margin-bottom: 20px;}
	.single-logo {padding-top: 0;}
	
	/* Archive */
	.page-archive .keyline {display: none;}
	
	/* Footer */
	.footer.f-14 {font-size: 12px;}
	.footer .logomark {width: 70px; height: auto;}
	.footer a {padding: 0 0 0 12px;}	
	
	/* Homepage */
	.homepage-intro-logos {width: 100%; border-left: 0;}
	.homepage-intro-logos > a {width: 50%; font-size: 12px;}
	.homepage-intro-logos > a:nth-child(odd) {clear: both;}
	.homepage-intro-logos:before {left:50%;}
	.homepage-intro-logos:after {display: none;}
	
	/* Advertising */
	.page .advertising-block {max-width: none; margin: 0 -10px;}
	.logos .advertising-block {font-size: 12px;}
	.logos .advertising-block img {margin: auto auto 10px auto;}
	.logos .carbon-poweredby {font-size: 10px;}
	.logos .carbon-text {padding: 0 0 5px 0;}
	.homepage-intro-logos .advertising-block {width: 100%; border: 1px solid #EFEFEF; background: #FFF; position: relative; z-index: 1; text-align: left; padding-left: 20px; }
	.homepage-intro-logos .advertising-block .advert-square { display: none; }
	.homepage-intro-logos .advertising-block .advert-horizontal { display: block; }
	.homepage-intro-logos .carbon-img {float: left; margin-right: 20px;}
	
	/* Page : Two Column */
	.page-two-column > article {width: 100%;}
	
	/* Page : Newsletter */
	.page-newsletter h3 {display: none;}
	
	/* Page : Resources */
	.page-resources > h3 {display: none;}
}

/* ==========================================================================
	Cross Browser
   ========================================================================== */
.browserupgrade {padding: 10px; position: fixed; bottom: 0; left:0; right:0; font-size: 13px; text-align: center; color: #000; background-color: #FFF;}
.browserupgrade a {color: #000; text-decoration: underline;}