/*
Theme Name: Jawbone 2020
Theme URI: http://www.jawbonepress.com/
Author: Tom Seabrook
Author URI: http://www.tomseabrook.co.uk/
Version: 1.0
Tags: n/a
License:
License URI:

General comments (optional).
*/
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,600);
body {margin: 0; padding: 0; border: 0; font-family: Lato, sans-serif;}
.top {width: 100%; min-height: 90px; border-bottom: 1px solid black; padding: 5px 0 0 0;}
.jawbone {font-weight: 300; letter-spacing: 16px; font-size: 48px; margin: 0; padding: 0; line-height: 48px;}
.jawbone a, .jawbone a:visited {text-decoration: none; color: black}
.header {margin: 10px auto; width: 70%; text-align: center;}
.logo {height: 78px; width: auto; float: left; position: absolute; top: 10px; left: 10px;}
.bar {width: 100%; height: 6px; background-color: black;}
.social {position: absolute; top: 10px; right: 10px; width: 32px;}
.social img {width: 30px; height: auto; margin: 4px;}
.social img:hover {background: cadetblue; border-radius: 16px;}
.menu {font-size: 14px; font-weight: 600; letter-spacing: 1px;}
.menu div {display: inline-block; padding: 0; margin: 5px 5px 0 5px; color: cadetblue;}
.menu div a {color: cadetblue; text-decoration: none;}
.menu div a:hover {color: black;}
.footer {clear: both; width: 100%; height: 50px;}
hr {border-top: 1px solid cadetblue; border-bottom: 0px;}

.content {width: 90%; max-width: 900px; margin: 0 auto; padding: 0;}
.headline {width: 90%; margin: 0 auto; padding: 20px 0 10px 0; text-align: center; max-width: 800px;}
.headline .title {padding: 0; font-size: 24px; line-height: 24px; font-weight: 400; letter-spacing: 5px; text-transform: uppercase;}
.headline .subtitle {padding: 10px 0 0 0; font-size: 18px; font-weight: 300; text-transform: uppercase; letter-spacing: 2px;}
.headline .author {padding: 10px 0 0 0; font-size: 18px; font-weight: 400; text-transform: uppercase; letter-spacing: 2px;}

.content .wrapper {margin-left: 300px;}
.content .wrapper .left {width: 280px; float: left; margin-left: -300px;}
.content .wrapper .left img {width: 100%; height: auto; padding: 15px 0 10px 0;}
.content .wrapper .right {font-size: 14px; line-height: 20px; width: 100%; float: right; text-align: left;}

.right a, .right a:visited {font-weight: 600; text-decoration: none; color: black;}
.right a:hover {text-decoration: underline;}
.right img {max-width: 100%; max-height: auto; height: auto;}
.half {display: inline-block; width: 48%; margin: 0; padding: 0; border: 0;}

.central {width: 90%; max-width: 600px; margin: 0 auto; padding: 0; font-size: 14px; line-height: 20px; text-align: justify;}
.central a, .central a:visited {font-weight: 600; text-decoration: none; color: black;}
.central a:hover {text-decoration: underline;}

.info_box {font-size: 12px; line-height: 16px; text-align: left;}
.buy_link {width: 100%; background: cadetblue; margin: 5px 0 15px 0; padding: 10px 0 10px 0; text-align: center; text-transform: uppercase; font-size: 14px; line-height: 14px; font-weight: 400;}
.buy_link a, .buy_link a:visited {color: black; text-decoration: none;}
.buy_link a:hover {color: white;}

.blocks {width: 100%; margin: 0 auto; overflow-y: hidden; font-size: 0;}
.book_block {display: inline-block; width: 20%; border: 0; padding: 0; margin: 0;}
.special_block {display: inline-block; width: 50%; border: 0; padding: 0; margin: 0;}

.item {margin: 0; padding: 0; border: 0; position: relative; text-align: center; display: flex; align-items: center; justify-content: center;}
.item img {width: 100%; height: auto; overflow: hidden;}
.item .info {position: absolute; background: whitesmoke; padding: 10px; opacity: 0; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center;}
.item:hover .info {opacity: 1; -webkit-transition: all 1s ease;}
.item .info .title {font-size: 20px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase;}
.item .info .subtitle {padding: 10px 0 0 0; font-size: 14px; font-weight: 300; text-transform: uppercase;}
.item .info .author {padding: 10px 0 0 0; font-size: 14px; font-weight: 400; text-transform: uppercase;}
.item .info .blurb {padding: 20px 20px 0 20px; font-size: 14px; font-weight: 300;}
.item .info .notice {position: absolute; bottom: 20px; left: 0; right: 0; padding: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; color: darkred;}
.item .info a, .item .info a:visited {text-decoration: none; color: black;}
.item .info a:hover {}

@media only screen and (max-width: 960px){
.book_block {width: 25%}
}
@media only screen and (max-width: 840px){
.jawbone {font-size: 24px; line-height: 24px; letter-spacing: 6px;}
}
@media only screen and (max-width: 720px){
.book_block {width: 50%}
.special_block {width: 100%;}
.content .wrapper, .content .wrapper .left {width: 100%; margin-left: 0;}
}