/* Inserts the styles required by various options
on the services page of the dashboard */
{{{appCSS}}}
{{{body_font.styles}}}
{{{syntax_highlighter.styles}}}

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
  {{#body_font}}
  font-family: {{{stack}}};
  font-size: {{{font_size}}}px;
  line-height: {{{line_height}}};
  {{/body_font}}
  -webkit-font-smoothing: antialiased;
  color: {{text_color}};
  background: {{background_color}};
}


.bio-container {
 display:flex;
 padding: calc({{spacing}}em*3);
}

.bio-container .picture {
flex-basis:25%;
flex-grow:0;
}

.bio-container .picture img {
width:auto;
height:auto;
max-width:100%;
max-height:100%
}

.bio-container .text {
flex-basis:33.333%;
margin-left: calc({{spacing}}*3em);
flex-grow: 0
}

.bio-container .text h1, .bio-container .text h1 + p {
font-size: 2.5em;
line-height:1.2;
font-weight:400;
margin: 0;
padding:0}

.bio-container .text h1 + p {
opacity:0.5}

.navigation {
margin: calc({{spacing}}*3em);
margin-top:0;
display:flex;
border-bottom: 1px solid rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.15);
}
.navigation a {
text-decoration:none;
color: inherit;
padding: {{spacing}}em;
}

.navigation a.active {
border-bottom: 1px solid {{text_color}};
}




.painting-container {
 display:flex;
 padding: calc({{spacing}}em*3);
}

.painting-container .image {
flex-basis:66.666%;
flex-grow:0;
padding-right: {{spacing}}em;
box-sizing:border-box;
}

.painting-container .image img {
width:auto;
height:auto;
max-width:100%;
max-height:100%
}

.painting-container .metadata {
flex-basis:33.333%;
flex-grow:0;
padding-left: {{spacing}}em;
box-sizing:border-box;
}


.painting-container .metadata h1, .painting-container .metadata h1 + p {
font-size: 2em;
line-height:1.2;
font-weight:400;
margin: 0;
padding:0}

.painting-container .metadata h1 a {
color:inherit;
text-decoration:none}

.painting-container .metadata h1 + p {
opacity:0.5;}



a.full-row-back {
text-decoration:none;
color:inherit;
display:block;
padding:{{spacing}}em;
border-bottom: 1px solid rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.1);
}

a.full-row-back:hover {
background: rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.05);
}
/* ---- grid ---- */

.masonry-grid {
margin: calc({{spacing}}*2em);
margin-top:0
}

/* clearfix */
.masonry-grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-sizer,
.grid-item {
  width: 25%;
}

.grid-item {
  padding: {{spacing}}em;
  box-sizing: border-box;
  text-decoration:none;
  color:rgba({{#rgb}}{{text_color}}{{/rgb}}, 0.7);
}


.grid-item img {
width:auto;
height:auto;
max-width:100%}