/*
Theme Name:     Mind's Eye
Description:    Child theme for the Mind's Eye blog
Author:         Office of Web Strategy and Development
Author URI:     http: //www.missouristate.edu/web
Template:       basic-theme
Version:        1.3.3
*/

/* --------------------------------------------------------------
WordPress Elements
-------------------------------------------------------------- */

.wp-caption {
  text-align: left;
  color: #cc4a05;
  font-size: 14px;
  max-width: 100%;
}

.wp-caption img {
  margin-top: 0;
  max-width: 100%;
  height: auto;
}

.wp-caption .wp-caption-text {
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}

.aligncenter {
  display: block;
  margin: 0 auto 20px;
}

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

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

.floatleft {
  float: left;
}

.floatright {
  float: right;
}

img.aligncenter,
img.alignright,
img.alignleft {
  text-align: center;
}

.textcenter {
  text-align: center;
}

.textright {
  text-align: right;
}

.textleft {
  text-align: left;
}

.screen-reader-text {
  position: absolute;
  left: -9000px;
}

/* --------------------------------------------------------------
Grid
-------------------------------------------------------------- */

.column,
.columns {
  float: left;
  padding: 0 30px;
  margin-bottom: 30px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
}

.eight.columns {
  width: 100%;
}

.seven.columns {
  width: 87.5%;
}

.six.columns {
  width: 75%;
}

.five.columns {
  width: 62.5%;
}

.four.columns {
  width: 50%;
}

.three.columns {
  width: 37.5%;
}

.two.columns {
  width: 25%;
}

.one.column {
  width: 12.5%;
}

.one-third.column {
  width: 33.33%;
}

.two-thirds.column {
  width: 66.66%;
}

@media only screen and (max-width: 479px) {
  .eight.columns,
  .seven.columns,
  .six.columns,
  .five.columns,
  .four.columns,
  .three.columns,
  .two.columns,
  .one.column,
  .one-third.column,
  .two-thirds.column {
    width: 100%;
    margin-bottom: 20px;
  }
}

/* Clearing */

/* Self Clearing Goodness */

.slate:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: "\0020";
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.row:after,
.clearfix:after {
  clear: both;
}

.row,
.clearfix {
  zoom: 1;
}

/* You can also use a <br class="clear" /> to clear columns */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* --------------------------------------------------------------
Helper Classes
-------------------------------------------------------------- */

.float_left {
  float: left;
}

.float_right {
  float: right;
}

/* --------------------------------------------------------------
Typography
-------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #cc4a05;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  font-weight: inherit;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

.small {
  font-size: 80%;
}

.center {
  text-align: center;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

sub {
  vertical-align: sub;
  font-size: smaller;
}

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

section {
  display: block;
  position: relative;
  background: #fff;
  padding: 4rem;
  width: auto;
  max-width: 940px;
  margin: 0 auto;
  margin-bottom: 4rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 -1px 3px #f6f4ee;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
}

section.sticky {
  border-right: 1px solid #ff6644;
  border-bottom: 1px solid #ff6644;
}

section.sticky .sticky-icon > i {
  position: absolute;
  top: 2px;
  right: 80px;
  font-size: 42px;
  color: #ff6644;
}

section .post_date {
  position: absolute;
  top: 80px;
  right: 80px;
  text-align: right;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  -webkit-transition: color 0.25s ease-in-out;
  -moz-transition: color 0.25s ease-in-out;
  -o-transition: color 0.25s ease-in-out;
  transition: color 0.25s ease-in-out;
}

section .post_date a {
  color: #d7d7d7;
}

section .post_date a:hover {
  color: #ff6644;
}

section .post_title {
  margin-bottom: 30px;
}

section .post_intro {
  color: #aaa;
  font-size: 20px;
  letter-spacing: 1px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

section .more-link {
  display: block;
  margin: 40px 0 0;
}

section button,
section .btn {
  margin: 0;
}

/* Image, Gallery, Video and Audio Post Types */

.post_image,
.post_gallery,
.post_video,
.post_audio {
  max-width: 940px;
  margin: 0 auto;
  margin-bottom: -3px;
  position: relative;
  z-index: 2;
  display: block;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.post_image {
  margin-bottom: -10px;
}

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

.post_audio {
  margin-bottom: -12px;
}

.full-frame {
  height: 940px;
  width: 228px;
}

/* Quote Post Type */

section.format-quote {
  background: #f6f4ee;
  padding: 80px 80px 60px 200px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

section.format-quote p {
  font-size: 24px;
  line-height: 48px;
  margin-bottom: 0;
  text-align: right;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

section.format-quote .author {
  display: block;
  text-align: right;
  font-size: 16px;
  text-transform: uppercase;
  color: #bbb;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

section.format-quote:hover {
  background: #ff6644;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 -1px 3px #d83e1c;
}

section.format-quote:hover p {
  color: #fff;
}

section.format-quote:hover .author {
  color: #c93c1d;
}

/* Link Post Type */

.icon-link {
  color: #999;
  margin-left: 10px;
}

.link-icon {
  border-bottom: 0;
}

/* Blockquotes */
blockquote {
  border-left: 10px solid #c93c1d;
  padding: 0 0 0 20px;
  margin: 10px 0 24px 0;
}
blockquote p {
  line-height: 1.2;
}
blockquote.left {
  width: 220px;
  margin-right: 20px;
}

cite {
  display: block;
  font-style: normal;
  font-size: 13px;
}

/* Archive page */
section.archive-title {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
section.archive-title .eight.columns {
  padding: 0;
}
.archives ol,
.archives ul {
  margin-left: 0;
  margin-bottom: 0;
}

.archives ul li {
  list-style-type: none;
}

/* --------------------------------------------------------------
Metadata
-------------------------------------------------------------- */

.metadata {
  padding: 20px 0;
}

.metadata span {
  display: block;
  color: #888;
}

.metadata a:not(:hover) {
  color: #888;
}

.metadata i {
  margin-right: 20px;
}

/* --------------------------------------------------------------
Comments
-------------------------------------------------------------- */

.comments ul {
  margin-left: 0;
  margin-bottom: 0;
}

.comments ul li {
  list-style-type: none;
}

.comment ul {
  margin-left: 2em;
  margin-bottom: 30px;
}

.comment ul li {
  list-style-type: disc;
}

#comments h3 {
  font-size: 18px;
}

.comments h5 {
  margin: 60px 0 30px 0;
}

.comment .avatar {
  float: left;
  margin: 0 20px 20px 0;
  border-radius: 3px;
}

.comment .fn {
  margin-bottom: 0;
  font-weight: bold;
  position: relative;
  line-height: 1;
}

.comment .comment-meta {
  display: block;
  font-size: 14px;
  line-height: 1;
  margin-bottom: 10px;
}

.comment .overflow {
  position: relative;
}

.comment .overflow p {
  margin-left: 70px;
}

.commentlist {
  margin-bottom: 50px;
}

.commentlist ul {
  margin-left: 70px;
}

/* Comment form */

#commentform .required {
  text-transform: uppercase;
  color: #ff0000;
  font-size: 12px;
  margin-bottom: 15px;
  font-weight: bold;
  line-height: 1;
}

#commentform label {
  display: block;
}

#commentform textarea {
  width: 100%;
  min-height: 140px;
}

.comment-form-comment {
  margin-bottom: 10px;
}

.comment-notes,
.form-allowed-tags,
.closed-comments {
  font-size: 12px;
  line-height: 24px;
  font-weight: bold;
}
.closed-comments {
  display: block;
  margin-top: 1rem;
}
.form-submit input {
  float: right;
}

#cancel-comment-reply-link,
.comment-reply-link {
  float: right;
  font-size: 14px;
  font-weight: bold;
}

.reply {
  position: absolute;
  top: 0;
  right: 0;
}

#respond input {
  max-width: 100%;
}

/* --------------------------------------------------------------
Pagination
-------------------------------------------------------------- */
#PageInnerWrapper .MainContent > div.pagination {
  background-color: transparent;
}

.pagination {
  width: 100%;
  text-align: center;
}

.pagination button,
.pagination .btn {
  margin-bottom: 5px;
  margin-right: 10px;
}

/* --------------------------------------------------------------
Archive
-------------------------------------------------------------- */

.archives ul {
  padding-left: 0;
  margin-bottom: 50px;
}

/* --------------------------------------------------------------
Contact form
-------------------------------------------------------------- */

.wpcf7-text {
  width: 100%;
  margin-bottom: 10px;
}

.wpcf7-textarea {
  width: 100%;
  min-height: 140px;
  margin-bottom: 10px;
}

.wpcf7 .btn {
  float: right;
}

span.wpcf7-not-valid-tip,
span.wpcf7-not-valid-tip-no-ajax {
  border: 0 !important;
  padding-left: 10px;
  background: #eba9a9;
  color: #e44d4d;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  display: block;
}

span.wpcf7-not-valid-tip-no-ajax {
  background: 0;
  padding: 0;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ok {
  border: 0 !important;
  background: #f6e087;
  color: #ad8f18;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

div.wpcf7-mail-sent-ok {
  color: #3f9724;
  background: #aad39d;
}

.wpcf7-response-output {
  margin: 20px 0 0 0 !important;
}

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

#PageFooter {
  position: relative;
}

footer .widget {
  margin: 0 0 20px;
}

/* Social buttons */

.social-icons .btn,
.social-icons button {
  height: 40px;
  width: 40px;
  padding: 13px;
  margin-bottom: 5px;
  margin-right: 5px;
}

button.facebook,
.btn.facebook {
  background: #3b5998;
}

button.facebook:hover,
.btn.facebook:hover {
  background: #2d4577;
}

button.twitter,
.btn.twitter {
  background: #33ccff;
}

button.twitter:hover,
.btn.twitter:hover {
  background: #53d3fd;
}

button.linkedin,
.btn.linkedin {
  background: #4875b4;
}

button.linkedin:hover,
.btn.linkedin:hover {
  background: #5081c5;
}

button.google-plus,
.btn.google-plus {
  background: #444;
}

button.google-plus:hover,
.btn.google_-lus:hover {
  background: #373737;
}

button.pinterest,
.btn.pinterest {
  background: #d01c2c;
}

button.pinterest:hover,
.btn.pinterest:hover {
  background: #e33948;
}

button.play,
.btn.play {
  background: #ff0202;
}

button.play:hover,
.btn.play:hover {
  background: #fb3e3e;
}

button.rss,
.btn.rss {
  background: #ff511e;
}

button.rss:hover,
.btn.rss:hover {
  background: #fe7047;
}

button.envelope-alt,
.btn.envelope-alt {
  background: #333;
}

button.envelope-alt:hover,
.btn.envelope-alt:hover {
  background: #444;
}

button.instagram,
.btn.instagram {
  background: #517fa4;
}

button.instagram:hover,
.btn.instagram:hover {
  background: #6392b7;
}

button.github,
.btn.github {
  background: #000;
}

button.github:hover,
.btn.github:hover {
  background: #222;
}

button.stackoverflow,
.btn.stackoverflow {
  background: #fe7a15;
}

button.stackoverflow:hover,
.btn.stackoverflow:hover {
  background: #ff9443;
}

/* --------------------------------------------------------------
Twitter
-------------------------------------------------------------- */

.tweet_list {
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}

.tweet_list li {
  overflow-y: auto;
  overflow-x: hidden;
  list-style-type: none;
  margin-bottom: 20px;
}

.tweet_list .tweet_avatar {
  padding-right: 0.5em;
  float: left;
}

.tweet_list .tweet_avatar img {
  vertical-align: middle;
}

.tweet_time {
  font-size: 14px;
  font-style: italic;
  display: block;
}

/* --------------------------------------------------------------
Search form widget
-------------------------------------------------------------- */
#searchform {
  display: flex;
}
#searchform input {
  margin-right: 1rem;
}

#searchform-widget input#s {
  background: #fafafa;
  width: 80%;
}

/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */

/* Browser Resets */

.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {
  outline: none;
}

.slides,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* FlexSlider Necessary Styles
*********************************/

.flexslider {
  margin: 0;
  padding: 0;
}

.flexslider .slides > li {
  display: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider .slides img {
  width: 100%;
  display: block;
}

.flex-pauseplay span {
  text-transform: capitalize;
}

/* Clearfix for the .slides element */

.slides:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

html[xmlns] .slides {
  display: block;
}

* html .slides {
  height: 1%;
}

/* No JavaScript Fallback */

/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */

.no-js .slides > li:first-child {
  display: block;
}

/* FlexSlider Default Theme
*********************************/

.flexslider {
  margin: 0;
  background: #fff;
  position: relative;
  zoom: 1;
}

.flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
}

.loading .flex-viewport {
  max-height: 300px;
}

.flexslider .slides {
  zoom: 1;
}

.carousel li {
  margin-right: 5px;
}

/* Direction Nav */

.flex-direction-nav a {
  width: 30px;
  height: 30px;
  margin: -20px 0 0;
  display: block;
  background: url(https://www.missouristate.info/img/bg_direction_nav.png)
    no-repeat 0 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  cursor: pointer;
  text-indent: -9999px;
  opacity: 0;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}

.flex-direction-nav .flex-next {
  background-position: 100% 0;
  right: -36px;
}

.flex-direction-nav .flex-prev {
  left: -36px;
}

.flexslider:hover .flex-next {
  opacity: 0.8;
  right: 30px;
}

.flexslider:hover .flex-prev {
  opacity: 0.8;
  left: 30px;
}

.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover {
  opacity: 1;
}

.flex-direction-nav .flex-disabled {
  opacity: 0.3 !important;
  filter: alpha(opacity=30);
  cursor: default;
}

/* Control Nav */

.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: 20px;
  text-align: center;
}

.flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
}

.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}

.flex-control-paging li a:hover {
  background: #333;
  background: rgba(0, 0, 0, 0.7);
}

.flex-control-paging li a.flex-active {
  background: #000;
  background: rgba(0, 0, 0, 0.9);
  cursor: default;
}

.flex-control-thumbs {
  margin: 5px 0 0;
  position: static;
  overflow: hidden;
}

.flex-control-thumbs li {
  width: 25%;
  float: left;
  margin: 0;
}

.flex-control-thumbs img {
  width: 100%;
  display: block;
  opacity: 0.7;
  cursor: pointer;
}

.flex-control-thumbs img:hover {
  opacity: 1;
}

.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}

@media screen and (max-width: 940px) {
  .flex-direction-nav .flex-prev {
    opacity: 1;
    left: 0;
  }
  .flex-direction-nav .flex-next {
    opacity: 1;
    right: 0;
  }
}

/* --------------------------------------------------------------
Mind's Eye styles (Main)
-------------------------------------------------------------- */

html,
body {
  font-size: 16px;
  line-height: 28px;
}

#logo .logo img {
  height: 40px;
}

#UnitMastheadWrapper {
  background-color: #ffffff;
  padding: 0;
  width: 100%;
}

.UnitMasthead a:hover {
  border-bottom: none;
}
#UnitMasthead #logo {
  margin: 0;
}

#UnitMasthead .logo + div {
  padding-left: 10px;
  position: relative;
  top: 20px;
}

#UnitMastheadNavWrapper {
  padding: 12px;
  border-top: 1px solid #c2c2c2;
}

#UnitMastheadNavWrapper #primary-nav {
  margin: 0 auto 0 auto;
  width: 940px;
}

#UnitMastheadNavWrapper #primary-nav #menu-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

#UnitMastheadNavWrapper #primary-nav #menu-menu li {
  margin: 0 0 0 15px;
}
#UnitMastheadNavWrapper #primary-nav #menu-menu li:first-of-type {
  margin-left: 0;
}

#UnitMastheadNavWrapper #primary-nav #menu-menu li a {
  text-decoration: none;
}

#UnitMastheadNavWrapper .icon-search:before,
#UnitMastheadNavWrapper .icon-remove:before {
  color: #5e0009;
}

#UnitMastheadNavWrapper .icon-remove {
  display: none;
}

#UnitMastheadNavWrapper .icon-search.active {
  display: none;
}

#UnitMastheadNavWrapper .icon-remove.active {
  display: block;
  margin-left: 2px;
  margin-top: 3px;
}

#UnitMastheadNavWrapper .search_popup {
  display: none;
  z-index: 1000;
}

#PageInnerWrapper {
  background-color: #f0f0f0;
}

.MainContent > div {
  background-color: #ffffff;
}

.MainContent h2 {
  margin-bottom: 20px;
}

.wp-caption .wp-caption-text {
  font-size: 14px;
  line-height: 21px;
  margin: 0;
}

.post_title a {
  color: #0a0a0a;
  text-decoration: none;
}

.first_paragraph {
  color: #cc4a05;
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 24px;
}

div .hr {
  margin-bottom: 24px;
}

h3#reply-title,
#comments h5 {
  color: #0a0a0a;
  font-size: 24px;
  line-height: 28px;
}

label .required {
  color: #ff0000;
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
}

/* homepage styles */

#PageInnerWrapper .MainContent > div#FeatureContentOuter {
  background-color: #c2c2c2;
  width: 100%;
  position: relative;
  padding: 4rem 0;
}

.home .MainContent {
  max-width: none;
  padding: 0;
}

.MainContent #FeatureContentInner,
.MainContent #OtherStories {
  display: flex;
  flex-wrap: wrap;
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.MainContent #FeatureContentInner > h2 a,
.MainContent #OtherStories > h2 a {
  display: block;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.MainContent #FeatureContentInner > h2 a,
.MainContent #OtherStories > h2 a,
.MainContent #FeatureContentInner > h2 a span,
.MainContent #OtherStories > h2 a span {
  text-decoration: none;
  font-size: 16px;
}

.MainContent #FeatureContentInner > h2 a span,
.MainContent #OtherStories > h2 a span {
  margin: 12px 12px 24px;
  display: block;
}

.MainContent #FeatureContentInner > h2 {
  width: calc((100% / 4) - 20px);
  margin: 0;
}

.MainContent #OtherStories > h2 {
  width: calc((100% / 3) - 20px);
  margin-bottom: 20px;
  margin-top: 0;
}

.MainContent #FeatureContentInner > h2,
.MainContent #OtherStories > h2 {
  margin-left: 10px;
  margin-right: 10px;
  background-color: #ffffff;
  -moz-border-radius-bottomright: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(10, 10, 10, 0.47);
  -moz-box-shadow: 0px 1px 3px rgba(10, 10, 10, 0.47);
  box-shadow: 0px 1px 3px rgba(10, 10, 10, 0.47);
}

.MainContent #FeatureContentInner > h2:hover span,
.MainContent #OtherStories > h2:hover span {
  text-decoration: underline;
}

.home #OtherStories {
  background-color: transparent;
  padding: 4rem 0;
}
#FeatureContentInner h2 img,
#OtherStories h2 img {
  width: 100%;
  height: auto;
  display: block;
}

/* Featurette */

.featurette {
  display: table-cell;
  padding: 20px;
  background-color: #cc4a05;
}

.featurette p {
  color: #ffffff;
}

/* Border */

.border {
  border: solid 1px #c2c2c2;
}

/* Call to Action Block */

.ctaBlock {
  background-color: #cc4a05;
  padding: 20px;
  text-align: center;
}

.ctaBlock h2 {
  font-size: 16px;
  text-transform: uppercase;
  color: #ffffff;
  margin-top: 0;
  margin-bottom: 10px;
}

.ctaBlock p {
  margin-bottom: 10px;
  line-height: 1.2em;
}

.ctaBlock a,
.ctaBlock a:hover {
  color: #ffffff;
}

/* Byline */

.byline {
  margin-bottom: 48px;
  overflow: auto;
  text-align: center;
}

.byline ul {
  padding-left: 0;
  list-style-type: none;
  font-size: 0;
}

.byline li {
  display: inline;
  font-weight: bold;
  font-size: 13px;
  line-height: 1.2em;
  color: #cc4a05;
}

.byline li::before {
  content: "•";
  margin-left: 10px;
  margin-right: 10px;
}

.byline li:first-child::before {
  content: "";
  margin: 0;
}

/* Wraps */

.left {
  float: left;
  margin: 0 24px 24px 0;
}

.right {
  float: right;
  margin: 0 0 24px 24px;
}

/* Panel */

.panel {
  margin-bottom: 24px;
  border: solid 1px #d8d9da;
  padding: 20px;
  overflow: auto;
}

.panel .description.wp-caption {
  margin-bottom: 0;
}

.panel .byline {
  margin-bottom: 0;
  text-align: left;
}

.panel h2 {
  margin-top: 0;
  font-size: 1em;
}

.panel h3 {
  font-size: 1rem;
  font-weight: bold;
  margin: 0.9rem 0 0.3rem 0;
  color: #0a0a0a;
}

.panel .wp-caption {
  width: 100%;
  margin-bottom: 24px;
}

.panel img {
  width: 100%;
  height: auto;
}

.panel.alignleft,
.panel.alignright {
  width: 240px;
  clear: both;
}

/* Photo Grid */

.photo-grid .item {
  float: left;
  margin: 0 2.8% 20px 0;
}

.photo-grid .item img {
  width: 100%;
  height: auto;
  display: block;
}

.photo-grid .item .description {
  margin-top: 12px;
}

.photo-grid .col-1,
.photo-grid .col-2,
.photo-grid .col-3,
.photo-grid .col-4 {
  overflow: auto;
}

.photo-grid .col-1 .item {
  width: 100%;
}

.photo-grid .col-2 .item {
  width: 48.6%;
}

.photo-grid .col-3 .item {
  width: 31.4%;
}

.photo-grid .col-4 .item {
  width: 22.9%;
}

.photo-grid .col-1 .item,
.photo-grid .col-2 .item:nth-child(2n),
.photo-grid .col-3 .item:nth-child(3n),
.photo-grid .col-4 .item:nth-child(4n) {
  margin-right: 0;
}

.photo-grid .col-1 .item,
.photo-grid .col-2 .item:nth-child(2n + 1),
.photo-grid .col-3 .item:nth-child(3n + 1),
.photo-grid .col-4 .item:nth-child(4n + 1) {
  clear: left;
}

.photo-grid .multi {
  margin-bottom: 20px;
}

.photo-grid .multi .col-2 .item {
  margin-bottom: 12px;
}

.photo-grid .description {
  clear: both;
}

/* Pull Out Box */

.pull-out {
  padding: 20px;
  background-color: #cc4a05;
}

.pull-out * {
  color: #ffffff;
}

.pull-out h2 {
  font-family: "PT Sans", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.2em;
  margin-top: 0;
}

/* Responsive SVG support */

.svg-container {
  position: relative;
  height: 0;
  width: 100%;
  padding: 0;
  padding-bottom: 100%;
  /* override this inline for aspect ratio other than square */
}

.svg-container svg {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

/* --------------------------------------------------------------
Media queries
-------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
  section.format-quote {
    padding: 60px 20px 10px 60px;
  }
  section.sticky .sticky-icon > i {
    right: 20px;
  }

  section,
  .post_image,
  .post_gallery,
  .post_video,
  .post_audio {
    margin-left: 20px;
    margin-right: 20px;
  }
  section {
    padding: 30px 0;
  }
  .archive-title {
    padding: 30px 0 0 0;
  }
  section .post_date {
    position: relative;
    top: -25px;
    left: 0;
    text-align: left;
  }
  section.format-quote p {
    font-size: 20px;
    line-height: 32px;
  }
  section.format-quote p .author {
    margin-top: 10px;
  }
  .commentlist ul {
    margin-left: 20px;
  }

  .panel.alignleft,
  .panel.alignright {
    width: 100%;
    clear: both;
    box-sizing: border-box;
  }
  .MainContent #FeatureContentInner > h2,
  .MainContent #OtherStories > h2 {
    width: 90%;
    margin: 0 auto 20px;
  }
  .MainContent #FeatureContentInner > h2:last-of-type,
  .MainContent #OtherStories > h2:last-of-type {
    margin-bottom: 0;
  }
  .MainContent #FeatureContentInner > h2 a img,
  .MainContent #OtherStories > h2 a img {
    width: 100%;
  }
  .byline {
    text-align: left;
  }
  .byline li {
    display: block;
    margin-bottom: 1rem;
  }
  .byline li::before {
    content: none;
    margin: 0;
  }
}

@media only screen and (max-width: 960px) {
  header #logo .has-retina-logo {
    display: none !important;
  }
  img.size-full,
  img.size-large {
    width: 100% !important;
    height: 100% !important;
  }
  .container_12 .grid_12 {
    width: auto;
    max-width: 940px;
  }
  #UnitMasthead {
    max-width: 940px;
    min-width: 0px;
  }
  #UnitMastheadNavWrapper #primary-nav {
    width: auto;
    max-width: 940px;
    min-width: 0px;
  }
  #UnitMastheadNavWrapper #primary-nav #menu-menu {
    padding-right: 15px;
  }
  #Masthead .Search {
    margin-left: 205px;
  }
  #UnitMastHead {
    width: auto;
    max-width: 940px;
  }

  #UnitMastheadNavWrapper .search_popup {
    right: 0;
  }
  .MainContent #FeatureContentInner,
  .MainContent #OtherStories {
    width: auto;
  }
  .wp-caption {
    width: 100% !important;
  }
}

@media only screen and (max-width: 400px) {
  #logo .logo a {
    display: inline;
  }
  h1 {
    font-size: 24px;
  }
  blockquote.left {
    width: 100%;
    float: none;
    margin-right: 0;
  }
  .MainContent #FeatureContentInner > h2,
  .MainContent #OtherStories > h2 {
    margin-left: auto;
    margin-right: auto;
    float: none;
    height: auto;
    padding-bottom: 20px;
  }
  .MainContent #FeatureContentInner > h2,
  .MainContent #OtherStories > h2 {
    width: 90%;
  }
  .MainContent #FeatureContentInner > h2 a img,
  .MainContent #OtherStories > h2 a img {
    width: 100%;
  }

  .photo-grid .col-2 .item,
  .photo-grid .col-3 .item,
  .photo-grid .col-4 .item {
    width: 100%;
  }
  .photo-grid .item {
    float: none;
    margin: 0 0 24px 0;
  }
}