/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> COLORS and SIZES (import)  - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* END _uscap-sass-variables import */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> RESET (import) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* BASED on Meyer/HTML5DR/OTHERS, MOD by JB */
@import url("https://fonts.googleapis.com/css?family=Just+Another+Hand");
@import url("https://fonts.googleapis.com/css?family=Passion+One:400,700,900");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, svg, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

abbr[title], dfn[title] { border-bottom: 1px #555 dotted; cursor: help; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }

del { text-decoration: line-through; }

table { border-collapse: collapse; border-spacing: 0; }

col { display: table-column; }

colgroup { display: table-column-group; }

html { box-sizing: border-box; }

*, *:before, *:after { box-sizing: inherit; position: relative; }

/* END _reset import */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> FONTS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
body { font-weight: 400; font-style: normal; font-family: 'Just Another Hand', cursive, sans-serif; color: #666; font-size: 20px; line-height: 1.35; letter-spacing: .07em; }

h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .hx, .caption, .dateline, nav, .cp-access, .read-more a, blockquote { font-weight: 400; font-style: normal; font-family: 'Passion One', 'Arial Black', 'Arial Bold', sans-serif; color: black; letter-spacing: normal; }

b, .b, strong, .strong { font-weight: 700; }

/* Primary Content and Structure CSS */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> GLOBAL ELEMENTS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
p { margin-bottom: .65em; }

a { color: inherit; /* border-bottom: 1px dotted $red; */ text-decoration: none; transition: color 0.3s ease-out; }

a:hover { color: #900; }

a:active { color: #f00; }

.nowrap { white-space: nowrap; }

.attn { color: #f69; }

.centered { text-align: center; }

.gotele { white-space: nowrap; }

.img-circle { border-radius: 50%; }

.photo-left { float: left; margin: 0 1em 0.5em 0; }

.photo-right { float: right; margin: 0 0 0.5em 1em; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> COMMON CONTAINERS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.banner { background: url(http://bondi.obdcreative.com/site/themes/bondi/bimg/bg-header.png) center top no-repeat; }

.wrap { width: 1040px; margin: 0 auto; min-height: 99vh; }

nav { height: 160px; }

footer { text-align: center; color: #ccc; padding-top: 100px; }

/* ---  inline block adjustments for tabbing simple content  --- */
.w10p { display: inline-block; width: 10%; }

.w20p { display: inline-block; width: 20%; }

.w30p { display: inline-block; width: 30%; }

.w40p { display: inline-block; width: 40%; }

.w45p { display: inline-block; width: 45%; }

.w50p { display: inline-block; width: 50%; }

.w60p { display: inline-block; width: 60%; }

.w70p { display: inline-block; width: 70%; }

.w80p { display: inline-block; width: 80%; }

.w90p { display: inline-block; width: 90%; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> CONTENT COMMONS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
h1, .h1 { font-size: 3.00em; margin: 1em 0 0.25em 0; line-height: .95; color: black; }

h2, .h2 { font-size: 1.75em; margin: 1em 0 0.25em 0; line-height: 1.0; color: #333; }

h3, .h3 { font-size: 1.15em; margin: 1em 0 0.25em 0; line-height: 1.0; color: #333; font-weight: 700; }

h4, .h4 { font-size: 1.05em; margin: 1em 0 0.25em 0; line-height: 1.0; color: #333; font-weight: 700; }

h5, .h5 { font-size: 1.05em; margin: 1em 0 0.25em 0; line-height: 1.0; color: #333; font-weight: 700; }

h6, .h6 { font-size: 1.00em; margin: 1em 0 0.25em 0; line-height: 1.0; color: #333; font-weight: 700; }

h1:first-child, .h1:first-child, h2:first-child, .h2:first-child, h3:first-child, .h3:first-child, h4:first-child, .h4:first-child, h5:first-child, .h5:first-child, h6:first-child, .h6:first-child, .hx:first-child { margin-top: 0; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> NAV  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.logo { position: absolute; bottom: 35px; left: 18px; opacity: .3; font-size: 0; transform: rotate(-2.8deg); transform-origin: bottom left; transition: opacity 0.3s ease-out; }

.logo:hover { opacity: .5; }

nav ul { position: absolute; bottom: 15px; right: 0; color: #555; transform: rotate(-1.2deg); }

nav ul li { padding: 0; display: inline-block; margin: 0; }

nav ul li a { padding: 10px 15px; display: block; }

footer .cp-access { margin-top: 1em; }

footer .cp-access li { display: inline-block; }

footer .cp-access a { display: block; color: #ccc; font-size: .7em; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> PAGE ELEMENTS  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.read-more a { color: #c00; font-size: .7em; }

/* --- about me --- */
.about article { display: flex; margin-top: 150px; }

.about article .abouttext { width: 50%; }

.about article figure { width: 50%; text-align: center; }

.about article figure img { width: 60%; box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.35); }

.about article figure figcaption { font-size: 80%; }

.about h1 + h2 { font-size: 1em; margin-top: 0; color: #333; }

.about article li { list-style: outside; width: 80%; margin-left: 1em; }

/* --- blog main list --- */
.blog-list { margin: 150px 0 50px 300px; }

.intro { font-size: 1.5em; line-height: 1.0; }

.bmini { margin: 1.5em 0; }

.bmini a { padding: .5em; display: block; padding-left: 8em; }

.bmini a:hover { background: rgba(51, 51, 51, 0.04); }

.bmini a:hover p { color: #333; }

.bmini h1 { font-size: 2.0em; margin-bottom: .5em; /*  outline: 1px dotted blue; position: relative; z-index: 200;  */ }

.bmini h1 span { font-size: 40%; color: #c00; display: block; line-height: 50%; position: absolute; z-index: -100; }

.bmini h1 span:before { font-size: 80%; color: #c00; content: '... '; }

.bmini h1 span:after { font-size: 80%; color: #c00; content: ' ............'; }

.bmini img.intro-img { position: absolute; left: .5em; top: .5em; width: 7em; box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.35); }

.bmini:nth-of-type(1n) img.intro-img { transform: rotate(-1.8deg); }

.bmini:nth-of-type(2n) img.intro-img { transform: rotate(1.8deg); }

.bmini:nth-of-type(3n) img.intro-img { transform: rotate(0.8deg); }

.bmini:nth-of-type(4n) img.intro-img { transform: rotate(-0.8deg); }

.bmini:nth-of-type(5n) img.intro-img { transform: rotate(2.8deg); }

.blog .common { padding-top: 150px; }

.bpost { display: flex; margin-top: 50px; }

.bpost .author { width: 30%; text-align: center; }

.bpost .post { width: 70%; }

.bpost figure { width: 35%; text-align: center; }

.bpost figure img { width: 100%; box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.35); }

.bpost figure figcaption { font-size: 80%; }

.bpost blockquote { margin: 2.5em auto; width: 80%; padding: 1em 3em; border: 5px dotted rgba(153, 153, 153, 0.5); border-width: 5px 0; color: #c00; }

.bpost .tags { display: flex; align-content: flex-start; flex-wrap: wrap; justify-content: flex-start; }

.bpost .tags span { margin: 0.5em 0.15em; padding: 0.15em 0.25em; line-height: 1; }

.bpost .tags a { margin: 0.5em 0.15em; padding: 0.15em 0.25em; background: rgba(51, 51, 51, 0.15); border-radius: .25em; line-height: 1; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> HOMEPAGE - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
body.home { background: url(http://bondi.obdcreative.com/site/themes/bondi/bimg/bg-home-james.jpg) calc(100% - 670px) 141px no-repeat; }

.home #main { display: flex; }

.homeimgs, .homecont { width: 50%; }

.homeimgs { padding: 530px 0 150px 0; }

.homeimgs img { width: 52%; position: absolute; transform: rotate(-2.8deg); box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.35); z-index: 50; }

.homeimgs img + img { transform: rotate(2.8deg); right: 0; margin-top: .5em; z-index: 40; }

.homecont { padding: 130px 20px 50px 20px; }

.home h1 span { font-size: 40%; color: #c00; display: block; line-height: 30%; }

.home h1 span:before { font-size: 80%; color: #c00; content: '... '; }

.home h1 span:after { font-size: 80%; color: #c00; content: ' ............'; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* !>>> RESPONSIVE ADJUSTMENTS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */