/* Basin Barbers, concept "before": a 2016 one-page template. System fonts only, no JS. */
* { box-sizing: content-box; }
body {
  margin: 0;
  background: #2b2b2b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6L6 0' stroke='%23353535' stroke-width='1'/%3E%3C/svg%3E");
  font: 12px/1.5 Verdana, Geneva, sans-serif;
  color: #777;
}
.ck { position: absolute; opacity: 0; pointer-events: none; }
.ck:checked ~ .cookie { display: none; }
.page { width: 960px; margin: 0 auto; padding-bottom: 30px; }
a { color: #c0392b; }

.social { text-align: right; padding: 6px 10px; font-size: 10px; color: #888; }
.social a { color: #aaa; text-decoration: none; }

.header { background: #111; padding: 26px 30px 18px; border-bottom: 4px solid #c0392b; }
.logo { font: 44px/1 Impact, "Arial Black", sans-serif; color: #fff; letter-spacing: 3px; }
.logo span { color: #c0392b; }
.tag { margin-top: 6px; font: italic 13px Georgia, serif; color: #999; }

.nav { margin: 0; padding: 0; list-style: none; background: #c0392b; overflow: hidden; }
.nav li { float: left; }
.nav a { display: block; padding: 11px 17px; color: #fff; text-decoration: none; font: bold 11px Verdana, sans-serif; border-right: 1px solid #a5301f; }

main { display: block; background: #fff; }
.slider { position: relative; height: 380px; overflow: hidden; background: #000; }
.slider img { width: 960px; height: 380px; display: block; filter: blur(2px) brightness(0.62); }
.slider__text { position: absolute; left: 0; right: 0; top: 96px; text-align: center; color: #fff; }
h1 { margin: 0; font: 40px/1.1 Impact, "Arial Black", sans-serif; letter-spacing: 2px; text-shadow: 2px 2px 4px #000; }
.slider__text p { margin: 8px 0 22px; font: italic 18px Georgia, serif; text-shadow: 1px 1px 3px #000; }
.fb { display: inline-block; padding: 12px 22px; background: #3b5998; color: #fff; font: bold 13px Verdana, sans-serif; text-decoration: none; border: 2px solid #fff; }
.arrow { position: absolute; top: 160px; font: 60px/1 Arial, sans-serif; color: #fff; opacity: 0.7; }
.arrow--l { left: 14px; } .arrow--r { right: 14px; }
.dots { position: absolute; bottom: 10px; width: 100%; text-align: center; }
.dots i { display: inline-block; width: 10px; height: 10px; margin: 0 3px; border-radius: 50%; background: #aaa; }
.dots i.on { background: #fff; }

.cols { overflow: hidden; padding: 20px 20px 10px; }
.col--main { float: left; width: 600px; }
.col--side { float: right; width: 280px; }
h2 { margin: 18px 0 8px; font: bold 16px Georgia, serif; color: #c0392b; border-bottom: 1px dotted #ccc; padding-bottom: 4px; text-transform: uppercase; }
.just { text-align: justify; color: #999; font-size: 11px; line-height: 1.6; }
.small { font-size: 10px; color: #aaa; }
.board { display: block; width: 380px; height: 465px; border: 4px solid #ddd; }

.insta { overflow: hidden; }
.insta div { float: left; width: 90px; height: 90px; margin: 0 6px 6px 0; background: #e8e8e8; color: #bbb; font-size: 9px; text-align: center; line-height: 90px; }

.fbbox { border: 1px solid #ccc; margin-bottom: 14px; }
.fbbox__head { background: #3b5998; color: #fff; padding: 8px; font: bold 12px Tahoma, sans-serif; }
.fbbox__body { height: 190px; background: #f2f2f2; color: #aaa; text-align: center; padding-top: 80px; box-sizing: border-box; font-size: 11px; }
.widget { background: #f5f5f5; border: 1px solid #e5e5e5; padding: 10px; margin-bottom: 14px; }
.widget h3 { margin: 0 0 6px; font: bold 12px Verdana, sans-serif; color: #444; }
.widget p { margin: 0 0 4px; }

.footer { background: #111; color: #777; text-align: center; padding: 14px; font-size: 10px; }
.footer p { margin: 3px 0; }
.counter { display: inline-block; background: #000; color: #0f0; font: 12px "Courier New", monospace; padding: 1px 5px; letter-spacing: 2px; }

.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 26px 30px 30px; background: rgba(20, 20, 20, 0.96); color: #fff; font: 20px/1.4 Arial, sans-serif; text-align: center; }
.cookie p { margin: 0 0 16px; }
.cookie__btn { display: inline-block; padding: 14px 40px; background: #27ae60; color: #fff; font: bold 18px Arial, sans-serif; cursor: pointer; }
.cookie__more { margin-left: 16px; color: #ddd; font-size: 16px; }