/* 2 colums Portfolly layout */

#masthead a, #menu-footer a {color:inherit;text-decoration:none}
#menu-main, #menu-footer {list-style-type:none}
#menu-main {display:inline-block;margin:0;padding:0}
#menu-footer {text-align:center;margin:2em 0;padding:0}
#menu-main li {border-bottom:1px solid #fff}

main {padding:1em 2em;color:#222}

.content h3 {font-size:1.6em;line-height:1.8em;margin:1em 0}
article.post {padding-top:1.5em}
article.post.pf-featured {padding-top:0}
article.post:last-child {padding-bottom:1.5em}
h2.entry-title {padding:.5em 0}
.entry-title a {text-decoration:none}
.post-meta-item {position:relative;padding-left:.85em}
.post-meta-item::before {position:absolute;top:0;left:.3em;border-bottom:.4em solid transparent;border-left:.4em solid #fff;border-top:.4em solid transparent;content: ''}

#grid li {width:33%}

@media screen and (max-width:500px) {
	#grid li {width:50%}
}

@media screen and (min-width:783px) {
	.admin-bar #masthead {margin-top:0}
	#masthead {position:fixed;box-sizing:border-box;height:100%;width:35%}
	main {margin-left:35%}
	.scrollitem {height:30vw}
}

@media screen and (min-width:1201px) {
	#masthead {width:25em}
	main {margin-left:25em}
	#grid li {width:12em}
}

@media screen and (min-width:1380px) {
    .flexcontainer {display:flex;flex-wrap: wrap;justify-content: space-around;}
    .flexcontainer > * {flex-basis:30em}
}

@media screen and (orientation: landscape) and (max-height:400px) {
	#site-navigation {font-size:4vh}
}

h1, h2, h3, h4, h5 {margin:0;font-weight:400}

.post-meta {padding:0;margin:0;list-style-type:none}

figure {
    margin:1em 0;
    font-size:0;
    text-align:center
}

figcaption {
    font-size:1.1rem;
    line-height:1.4;
    max-width: 50rem;
    margin:auto;
    padding:1em
}

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

pre {overflow:auto}

/* =WordPress Core */

.alignnone {
    width:100%;
    height:auto
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}
a img.alignnone {
    margin:0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 1em;
    color:#666;
    line-height: 17px;
    margin: 0;
    padding: 5px 4px;
}

/* Grid Filter */

#filter, #grid {list-style-type:none;padding:0}
#filter {margin:1em 0 0 0}
#filter li {display:inline-block;margin:0 .2em .2em 0}
#filter li a {position:relative;display:inline-block;font-size:1em;text-transform:uppercase;line-height:2em;height:2em;padding:0 1.5em 0 2em;margin-right:.2em;font-weight:300;color:#676767;text-decoration:none;background-color:#d2d4d7}
#filter li a.active {background-color:#e95420;color:#fff}
#filter li a::before {position:absolute;top:.63em;left:.9em;border-radius:50%;box-shadow: inset 0 .1em rgba(0, 0, 0, 0.25);content:'';height:.6em;width:.5em;background-color:#fff}
#filter li a::after {position:absolute;top:0;right:0;border-bottom:1em solid transparent;border-left:.8em solid #d2d4d7;border-top:1em solid transparent;content:'';background-color:#fff}
#filter li a.active::after {border-left-color:#e95420}

/* Portfolio Grid */
#grid {margin:.8em 0 0 0}
#grid li {box-sizing:border-box;background-color:#e3e5e7;background:linear-gradient(135deg, #fff 40%, #e9e9e9)}
#grid .caption {position:absolute;box-sizing:border-box;width:100%;text-align:center;bottom:0;left:0;padding:.5em;color:transparent;font-size:.8vw;line-height:1.3em;font-weight:400;transition: all .2s}
#grid .attachment-post-thumbnail {position:relative;height:60%;padding:20% 0;width:auto;opacity:1;transition: opacity .2s}
#grid li:before {content: "";display:block;padding-top:100%}
#grid li a {position:absolute;display:block;top:0;left:0;bottom:0;right:0;text-align:center}
#grid li a:hover .attachment-post-thumbnail {opacity:.4}
#grid li a:hover .caption {font-size:1.5vw;color:#fff;background:#999}

/* Scroller */
#scroller {background:#e9eff5;padding:1em 0;white-space:nowrap}
.scrollitem {position:relative;display:inline-block;height:40vh;max-height:50vw;margin-right:1em}
.scrollitem img {height:100%;width:auto;max-width:initial}
.scrollitem .caption {position:absolute;bottom:0;right:0;box-sizing:border-box;padding:0 1em;width:100%;height:0;background-color:rgba(247,247,247,.7);transition:height .2s}
.scrollitem .caption:after {position:absolute;bottom:.5em;right:.5em;content:"?";font-size:1.5em;font-weight:700;text-align:center;border-radius:50%;line-height:1.5em;width:1.5em;color:#999;;background-color:rgba(240,240,240,.5)}
.scrollitem .caption.hover:after, .scrollitem .caption:hover:after {visibility:hidden}
.scrollitem .caption.hover, .scrollitem .caption:hover {height:auto;padding:1em}
.scrollitem .caption span {white-space:normal;color:#666;font-weight:400;font-size:1.3em}

/* Portfolio */

/* Isotope */

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.isotope, .isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}