/*!
 Theme Name:   Twenty Seventeen Child Category Excerpts
 Theme URI:    http://coertvonk.com/twenty-fifteen-child/
 Description:  Show excerpts in category overview. As cards or thumbnails. 
 Author:       Coert Vonk
 Author URI:   http://coertvonk.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         excerpt, thumbnail, summary, category, twenty-seventeen child, light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready, category excerpts, category thumbnail grid
 Text Domain:  twenty-seventeen-child
*/

@import url("https://fonts.googleapis.com/css?family=Montserrat|Roboto");

body,
button,
input,
select,
textarea {!
  color: #333;
  font-family: "Segoe UI", "Roboto", "Libre Franklin", "Helvetica Neue",
    helvetica, arial, sans-serif;
  font-size: 15px;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.66;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  line-height: 1.4;
  font-family: "Montserrat", sans-serif;
  color: #993300;
}

/* header numbering */

body, h1 {
  counter-reset: h2;
}

h2 {
  counter-reset: h3;
}
h2:before {
  content: counter(h2) ".\0000a0\0000a0";
  counter-increment: h2;
}
h2.entry-title:before,
h2.nocount:before {
  content: none;
  counter-increment: none;
}

h3 {
  counter-reset: h4;
}
h3:before {
  content: counter(h2) "." counter(h3) ".\0000a0\0000a0";
  counter-increment: h3;
}
h3.comment-reply-title:before,
h3.nocount:before {
  content: none;
  counter-increment: none;
}

h4:before {
  content: counter(h2) "." counter(h3) "." counter(h4) ".\0000a0\0000a0";
  counter-increment: h4;
}
h4.nocount:before {
  content: none;
  counter-increment: none;
}


/*****/

h1,
.page .panel-content .recent-posts .entry-title {
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
  padding: 1.25em 0 0;
  margin: 0 0 0.75em;
}

h2 {
  font-size: 1.2rem;
  font-weight: 600;
  padding: 1em 0 0 0;
  overflow: hidden;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-top: 3.5rem;
  margin-bottom: 2.5rem;
}

h3 {
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0;
  margin: 0 0 0.5em;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  letter-spacing: 2px;
}

h4 {
  font-size: 1rem;
  font-weight: 500;
  padding: 0.2em 0 0;
  margin: 1em 0 0.3em;
}

h5 {
  font-size: 1rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.15em;
  text-transform: none;
  padding: 0.3em 0 0;
  margin: 1em 0 0.2em;
}

h6 {
  font-size: 1rem;
  font-weight: 500;
  font-style: italic;
  padding: 0.5em 0 0;
  margin: 0 0 0.1em;
}

p {
  margin: 0.5rem 0;
  padding: 0;
}

@media screen and (min-width: 30em) {
  h1,
  .content-area .site-main article.post header.entry-header h1.entry-title {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.75rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  h4 {
    font-size: 1.25rem;
  }
  h5 {
    font-size: 1rem;
  }
  h6 {
    font-size: 1rem;
  }
}

/*--------------------------------------------------------------
8.0 Lists
--------------------------------------------------------------*/


.entry-content ul,
.entry-content ol {
    vertical-align: middle;
}
.entry-content ul > li,
.entry-content ol > li {
  margin: 0.3em 0 0.3em 2em;
}

/*--------------------------------------------------------------
9.0 Tables
--------------------------------------------------------------*/

table {
  width: 0;
  margin-bottom: 0;
}
div.post table caption {
  width: auto;
  /*margin: 0 auto;*/
  /*background: white;*/
  font-size: 0.9em;
  line-height: 13px;
  padding: 2px 4px 5px;
  border: none;
  color: #999999 !important;
}

/*--------------------------------------------------------------
10.0 Links
--------------------------------------------------------------*/

article.post a {
  border-bottom: 2px solid rgb(180, 230, 250);
  color: inherit;
  -webkit-transition: background 0.15s cubic-bezier(0.33, 0.66, 0.66, 1);
  transition: background 0.15s cubic-bezier(0.33, 0.66, 0.66, 1);
}

article.post a:hover,
article.post a:active {
  outline: 0;
  color: inherit;
  background-color: rgba(180, 230, 250, 0.35);
}

article.post a.hide-anchor:hover *,
article.post a:active > img * {
  background-color: inherit;
}

/*.entry-content */
a > img * {
  box-shadow: none;
  transition: none;
  text-decoration: none;
}

.entry-content a img {
  -webkit-box-shadow: none;
  box-shadow: none;
}

article.post .credit,
article.post figcaption > a {
  color: rgb(160, 160, 160);
}

article.post figcaption,
article.post table > caption {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}

.credit,
figcaption > a,
article.post a.hide-anchor,
article.post a.hideAnchor,
article.post a[href$="jpg"],
article.post a[href$="jpeg"],
article.post a[href$="svg"],
article.post a[href$="png"],
article.post a[href$="gif"] {
  border-bottom: 0 !important;
  -webkit-transition-property: none !important;
  transition-property: none !important;
  box-shadow: none;
  transition: none;
  text-decoration: none;
}

.entry-content a,
.entry-title a,
.entry-meta a,
.page-links a,
.page-links a .page-number,
.site-footer .widget-area ul li a,
.site-footer .widget-area ul li a {
  box-shadow: none;
  transition: none;
  text-decoration: none;
}

.entry-content a:focus,
.entry-content a:hover,
.entry-summary a:focus,
.entry-summary a:hover,
.page-links a:focus .page-number,
.page-links a:hover .page-number,
.entry-footer a:focus,
.entry-footer a:hover,
.entry-footer .cat-links a:focus,
.entry-footer .cat-links a:hover,
.entry-footer .tags-links a:focus,
.entry-footer .tags-links a:hover {
  box-shadow: none;
  transition: none;
  text-decoration: none;
}

/*--------------------------------------------------------------
13.0 Layout
--------------------------------------------------------------*/

.wp-block {
    max-width: none; /* was 674px; /* Based on one-column post width; 644px + 30px to account for padding. */
}

.wrap {
  max-width: 3000px;
}

div.single-featured-image-header > img {
  max-height: 200px;
  width: auto;
}

/*--------------------------------------------------------------
13.1 Header
--------------------------------------------------------------*/

/*--------------------------------------------------------------
13.4 Posts
--------------------------------------------------------------*/

/* Post Landing Page */

/*--------------------------------------------------------------
13.6 Footer
--------------------------------------------------------------*/

@media screen and (min-width: 48em) {
  .site-info {
    width: 100%;
  }
}

/* hide web site field in comment form */
/*
.comment-form-url {
    display: none;
}
*/

figcaption.wp-caption-text {
  text-align: center;
}

/* http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/css.html */
div.syntaxhighlighter a,
div.syntaxhighlighter div,
div.syntaxhighlighter code,
div.syntaxhighlighter table,
div.syntaxhighlighter table td,
div.syntaxhighlighter table tr,
div.syntaxhighlighter table tbody,
div.syntaxhighlighter table thead,
div.syntaxhighlighter table caption,
div.syntaxhighlighter textarea {
  font-size: 0.8rem !important;
}

div.syntaxhighlighter {
  width: 80%;
  overflow: auto;
}

/*
 * figure / captions
 */
.gallery-item,
figure {
  display: inline-block;
  text-align: center;
  vertical-align: bottom;
}
.gallery,
figure {
  max-width: 80%;
  margin: 0 auto; /* center on page */
}
.wp-caption,
.gallery-caption,
.wp-caption .wp-caption-text {
  margin-bottom: 0.5em;
}
.align-center {
  text-align: center;
  display: block;
}

figcaption,
table > caption {
  text-align: center;
  font-style: italic;
  font-size: 0.8125rem;
  color: rgb(102, 102, 102);
  caption-side: bottom;
  background-color: #f8f8f8;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}

/*
 * tables
 */
.table-align-outside {
  float: right;
  position: relative;
  left: -50%;
  text-align: left;
}
.table-align-inside {
  position: relative;
  left: 50%;
}
.table-alignbottom-outside {
  position: relative;
}
.table-alignbottom-inside {
  position: absolute;
  bottom: 0;
}

table tr {
  border-bottom: none;
}

.cvonk-table th {
  font-style: italic;
  font-weight: normal;
  border-collapse: collapse;
  text-align: center;
}
.cvonk-table {
  margin: 0 auto;
}
.cvonk-table.small {
  font-size: 0.8em;
  margin: 0 auto;
  border-spacing: 0;
}
.cvonk-table.small td {
  border-collapse: collapse;
  padding: 0.1rem 0.5rem 0.1rem 0.5rem;
  text-align: right;
}
.cvonk-table .border-right {
  border-right: 1px solid #ddd;
}

.cvonk-table tr:nth-child(1) {
  border-bottom: 1px solid #ddd;
}
.cvonk-table.grey-background {
  background-color: #f8f8f8;
}
.cvonk-table.grey-background tr:nth-child(1) {
  border-bottom: 0.8em solid white;
}

/*
 * scale fonts proportional to container size (such as tables or LaTex) 
 */
.scale-font {
  font-size: 1.5vw;
}
@media screen and (min-width: 1000px) {
  .scale-font {
    font-size: 1rem;
  }
}

/* option not to print 
 */
@media print {
  .no-print,
  .no-print *,
  header.site-header,
  .single-featured-image-header,
  footer,
  .comments-area {
    display: none !important;
  }
}

/*
 * alignment helpers
 * elements need to be set along a baseline.
 * inline (e.g. span, img) or inline-block (display property)
 */
.align-vmiddle > * {
  vertical-align: middle;
}
.align-vtop > * {
  vertical-align: top;
}
.align-vbottom > * {
  vertical-align: bottom;
}

.article-container {
  max-width: 80%;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  flex-flow: row wrap;
  align-content: stretch;
  margin: 0 auto;
  /*border: 1px dotted red;*/
}
.article {
  float: left;
  position: relative;
  /*border: 1px dashed green;*/
}
.article:nth-child(1),
.article:nth-child(3) {
  /*margin-right: 2em;*/
}

/* mark external links */
a[href*="//"]:after {
  content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAALBAMAAAC5XnFsAAAACXBIWXMAAAuwAAALsAEaOBByAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAC1QTFRF////R0xVR0xVR0xVR0xVR0xVR0xVR0xVR0xVR0xVR0xVR0xVR0xVR0xVR0xV2q4FugAAAA50Uk5TABAgMEBQYICQoLDA0PBHuDL6AAAATElEQVQI12NgcnFxfveOoe7du8d57xiuMDAwAKkHDAxs7+aBqLxnrECK7V0CA5Dye+YNojgSgNRDoMpoBoZT5eXlJxgYNHfv3l3IAABlixtCRR+0mAAAAABJRU5ErkJggg==");
  margin: 0 0 0 5px;
}
a[href*="//coertvonk.com"]:after,
a.nomark[href*="//"]:after,
div.syntaxhighlighter a:after {
  content: "";
  margin: 0;
}

/************
 * Author box
 ************/

.authorbox {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: stretch;
  align-content: center;
  width: 80%;
  max-width: 600px;
  padding: 0;
  margin: 0;
  font-size: 0;
  border: 2px solid #ccc;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-radius: 120px 0 0 120px;
}
.authorbox > article {
  font-size: 1rem; /*2vw*/
}
@media screen and (max-width: 500px) {
  .authorbox > article {
    font-size: 0.7rem; /*2vw*/
  }
}
.authorbox > article.image {
  height: 100%;
  margin: auto 0;
  width: 30%;
  min-width: 50px;
}

.authorbox > article.about,
.authorbox > article.posts {
  padding-left: 1%;
  flex-basis: content;
  flex-grow: 1;
}
.authorbox > article.image > a {
  float: left;
  width: 90%;
  margin: 10%;
}
.authorbox > article.image > a > img {
  transform: scale(1);
  transition: all 0.3s ease-out;
  width: 100%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  border-radius: 50% 50% 50% 50%;
  vertical-align: middle;
}
.authorbox > article.image > a:hover > img {
  transform: scale(1.1); /* translateX(-20px)*/
}
.authorbox > article.about,
.authorbox > article.posts {
  margin: 10px 10px;
  display: none;
}
.authorbox > article.about > .title,
.authorbox > article.posts > .title {
  display: inline-block;
  padding: 0;
  margin: 0;
  clear: none;
  font-weight: bold;
  text-align: left;
  font-size: 120%;
  line-height: 1rem;
}
.authorbox > article.about > .title > a,
.authorbox > article.posts > .title > a {
  font-size: 100%;
  text-decoration: none;
}
.authorbox > article.about > .job {
  margin: -0.4rem 0 0 0;
  font-size: 100%;
}
.authorbox > article.about > .description {
  font-size: 80%;
  padding-top: 6px;
  padding: 0;
  line-height: 0.85rem;
}

.authorbox > article.posts > .description {
  padding-top: 0.5rem;
  font-size: 120%;
}
.authorbox > article.posts > .description > a {
  display: block;
  font-size: 100%;
  text-decoration: none;
  line-height: 1rem;
  color: black;
}
.authorbox > article.tabs-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: stretch;
  align-content: stretch;
  text-align: center;
  margin: 0;
  padding: 0;
  width: 1.5rem;
  background: #eee;
  border-left: 1px solid #ccc;
}
.authorbox > article.tabs-container > a {
  padding: 3px;
  font-size: 80%;
  color: black;
  margin: auto;
  margin-left: -0.55rem;
  transform: rotate(-90deg);
  text-decoration: none;
}
.authorbox > article.tabs-container > a:hover {
  background-color: #dddddd;
}
.authorbox > article.tabs-container > a.active {
  background-color: white;
  /*border-bottom: 1px solid #fff;*/
  border-bottom: none;
}
.authorbox > article.tabs-container > a.active:hover {
  background-color: #eeeeee;
}
/* hide all by default */
.author-box,
.article-author,
.author-info,
#entry-author-info,
#author-bio-box,
#cab-author,
#authorarea,
.author-wrap,
#post-author {
  display: none;
}

/************
 * blockquote
 ************/

blockquote {
  position: relative;
  width: 90%;
  /*padding-top: 1rem;
  padding-bottom: 1rem;*/
  padding-left:10% !important;
  margin: 0 auto;
  color: #333;
  font-style: italic;
  font-size: 15px;
  font-size: 0.9375rem;
  text-shadow: 0 1px white;
  font-weight: normal;
  line-height: 1.4;
  z-index: 600;
  overflow: visible;
  /*background-color: #f6f6f6;*/
}
blockquote:before {
  position: absolute;
  top: -0.25em;
  left: 0;
  z-index: -300;
  font-family: Georgia, serif;
  content: "\201C";
  color: #999;
  opacity: 0.3;
  font-size: 2.3rem;
  font-weight: 600;
  text-shadow: none;
}
blockquote cite {
  color: #bbb !important;
  display: block;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 400;
  text-align: right;
  line-height: 1;
}

/*
 * MathJax
 */

embed, iframe, object {
    margin-bottom: 0;
}

/* drop cap */

.dropcap {
    font-size: 5.25em;
    line-height: .857em;
    color: #606060;
    font: 3em/1em Georgia,serif;
    float: left;
    margin: 0 10px 0 0;
}

/*
 * bread crumbs
 */

.entry-content ul.breadcrumb {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin-left: 0;
}
.entry-content ul.breadcrumb .icon {
  font-size: 14px;
}
.entry-content ul.breadcrumb li {
    float: left;
    margin: 0;
}
.entry-content ul.breadcrumb li a {
  color: black;
  display: block;
  background: #D6E5FF;
  text-decoration: none;
  position: relative;
  height: 20px;
  line-height: 20px;
  padding: 0 4px 0 0px;
  text-align: center;
  margin-right: 23px;
  border-bottom: 0 !important;
  -webkit-transition-property: none !important;
  transition-property: none !important;
  box-shadow: none;
  transition: none;
  text-decoration: none;
}
.entry-content ul.breadcrumb li a svg {
  vertical-align: middle;
  height: 70%;
}
.entry-content ul.breadcrumb li a span {
  vertical-align: middle;
}
.entry-content ul.breadcrumb li:nth-child(even) a {
  background-color: #E6EFFF;
}
.entry-content ul.breadcrumb li:nth-child(even) a:before {
  border-color: #E6EFFF;
  border-left-color: transparent;
}
.entry-content ul.breadcrumb li:nth-child(even) a:after {
  border-left-color: #E6EFFF;
}
.entry-content ul.breadcrumb li:first-child a {
  padding-left: 5px;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px 0 0 4px;
}
.entry-content ul.breadcrumb li:first-child a:before {
  border: none;
}
.entry-content ul.breadcrumb li:last-child a {
  padding-right: 8px;
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0;
  border-radius: 0 4px 4px 0;
}
.entry-content ul.breadcrumb li:last-child a:after {
  border: none;
}
.entry-content ul.breadcrumb li a:before,
.entry-content ul.breadcrumb li a:after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #D6E5FF;
  border-width: 10px 10px;
  width: 0;
  height: 0;
}
.entry-content ul.breadcrumb li a:before {
  left: -20px;
  border-left-color: transparent;
}
.entry-content ul.breadcrumb li a:after {
  left: 100%;
  border-color: transparent;
  border-left-color: #D6E5FF /*#3498db*/;
}
.entry-content ul.breadcrumb li a:not([href="#"]):hover {
  background-color: rgb(51, 153, 255);
}
.entry-content ul.breadcrumb li a:not([href="#"]):hover:before {
  border-color: rgb(51, 153, 255);
  border-left-color: transparent;
}
.entry-content ul.breadcrumb li a:not([href="#"]):hover:after {
  border-left-color: rgb(51, 153, 255);
}
.entry-content ul.breadcrumb li a:not([href="#"]):active {
  background-color: rgb(76, 200, 255);
}
.entry-content ul.breadcrumb li a:not([href="#"]):active:before {
  border-color: rgb(76, 200, 255);
  border-left-color: transparent;
}
.entry-content ul.breadcrumb li a:not([href="#"]):active:after {
  border-left-color: rgb(76, 200, 255);
}

/*
 * keys
 */

.key-press {
  font-family: Verdana, Arial, "Times new roman";
  font-size: 70%;
  white-space: nowrap;
  padding: 0px 2px;
  color: #000000;
  border: #000000 1px solid;
  border-radius: 3px;
  background-color: #f8f8f8;
}
.key-press-blue {
  font-family: Verdana, Arial, "Times new roman";
  font-size: 70%;
  min-width: 100px;
  white-space: nowrap;
  color: #3399ff;
  padding: 0px 2px;
  border: #3399ff 1px solid;
  border-radius: 3px;
  background-color: #f8f8f8;
}
.key-press-blue-inverted {
  font-family: Verdana, Arial, "Times new roman";
  font-size: 70%;
  min-width: 100px;
  white-space: nowrap;
  color: #ffffff;
  padding: 0px 2px;
  border: #3399ff 1px solid;
  border-radius: 3px;
  background-color: #3399ff;
}

/*
 * a little less bold
 */

cspan.hilight {
  font-weight:500;
}

.entry-content code {
    font-family: Monaco, "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
    font-size: 104%;
    background: #F4F4F4;
}

/*
 * move main menu to top of page
 */

@media (min-width: 760px) {
.navigation-top {
position: absolute;
top: 0px;
width: 100%;
height: 70px;
}
}

@media (min-width: 760px) {

.custom-header {
position: relative;
padding-top: 70px;
}
}

/*
@media screen and (max-width: 767px) {

.navigation-top,
#masthead .wrap {
position: static;
}

.site-branding,
.custom-header-media {
z-index: 0;
}

.main-navigation {
left: 15%; /* orig 10% */
position: absolute;
top: 0;
width: 80%;
z-index: 1;
}

.main-navigation ~ a {
display: inline-block;
margin-top: 10px;
}

html .colors-custom.navigation-top .menu-toggle,
html .navigation-top .menu-toggle {
background: white;
color: red;
float: right;
margin-top: 0.5em; /* orig 1em */
z-index: 1;
}

.menu-menu-1-container {
clear: both;
}

html .colors-custom .menu-toggle:focus,
html .menu-toggle:focus {
background: white;
outline-color: black;
}
}
*/