/* Grid
   Grid settings through Bourbon Neat.
   https://github.com/thoughtbot/neat#using-neat

   Color variables are stored in _color.scss.

   Typography variables are stored in _typography.scss.
*/
html {
  box-sizing: border-box; }

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

/* Color

   Grid/breakpoints variables are stored in _grid_settings.scss.

   Typography variables are stored in _typography.scss.
*/
/* Typography

   Grid/breakpoints variables are stored in _grid_settings.scss.

   Color variables are stored in _color.scss.
*/
/* Sizes

*/
.underline {
  text-decoration: underline; }

.post:hover .title:after {
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
  animation-name: grow;
  animation-timing-function: cubic-bezier(0.415, 0.61, 0.855, 1);
  background-color: #2d2d2d;
  content: "";
  display: block;
  float: right;
  height: 1px;
  margin-top: -8px;
  transform-origin: left;
  width: 100%; }

.post:hover .post-image {
  border: 1px solid #D8D8D8; }

.blog-posts {
  list-style-type: none;
  padding: 0 10%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

.outside-link .post-image {
  position: relative; }

.outside-link .post-image::before {
  -webkit-animation: fade-out-half 0.25s ease;
  -moz-animation: fade-out-half 0.25s ease;
  animation: fade-out-half 0.25s ease;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  background: url("/images/outside-link-white.png");
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  display: block;
  height: 24px;
  margin-left: calc(50% - 17.5px);
  margin-top: calc(100px - 17.5px);
  opacity: 0;
  position: absolute;
  width: 25px;
  z-index: 1; }

.outside-link .post-image::after {
  -webkit-animation: fade-out 0.25s ease;
  -moz-animation: fade-out 0.25s ease;
  animation: fade-out 0.25s ease;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  background-color: #240eba;
  border-radius: 3px;
  content: '';
  display: block;
  height: 200px;
  opacity: 0;
  width: 100%;
  z-index: 0; }

.outside-link:hover .post-image::before {
  -webkit-animation: fade-in 0.25s ease;
  -moz-animation: fade-in 0.25s ease;
  animation: fade-in 0.25s ease;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.outside-link:hover .post-image::after {
  -webkit-animation: fade-in-half 0.25s ease;
  -moz-animation: fade-in-half 0.25s ease;
  animation: fade-in-half 0.25s ease;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards; }

.post {
  background-image: linear-gradient(transparent, transparent);
  color: #2d2d2d;
  flex: 0 1 100%;
  margin: 0 auto 7% auto; }

@media screen and (min-width: 850px) {
  .post {
    flex: 0 1 30%; } }

.post:visited {
  color: #2d2d2d; }

.post:first-of-type {
  flex: 0 1 100%;
  margin: 7% 0 7% 0; }

@media screen and (min-width: 850px) {
  .post:first-of-type {
    flex: 0 1 85%; } }

.post:first-of-type p {
  width: 100%; }

@media screen and (min-width: 850px) {
  .post:first-of-type p {
    width: 30%; } }

.post:nth-of-type(2), .post:nth-of-type(3) {
  flex: 0 1 100%; }

@media screen and (min-width: 850px) {
  .post:nth-of-type(2), .post:nth-of-type(3) {
    flex: 0 1 44%;
    margin-right: 6%; } }

.post:nth-of-type(4) {
  margin-left: 0; }

.upcoming-engagements {
  flex: 1 1 100%;
  padding: 0px; }

.upcoming-engagements:last-of-type {
  margin-bottom: 10%; }

.upcoming-engagements a {
  background-image: linear-gradient(transparent, transparent); }

.upcoming-engagements li {
  border-bottom: 2px solid #959595;
  clear: both;
  color: #959595;
  cursor: pointer;
  display: inline-block;
  flex: 1 1 100%;
  line-height: 2;
  list-style-type: none;
  outline-offset: 15px;
  padding-bottom: 3px;
  position: relative;
  width: 80%; }

.upcoming-engagements li::before {
  bottom: 0;
  content: '';
  display: block;
  height: 3px;
  left: 0;
  position: absolute;
  transition: width 0s ease, background .5s ease;
  width: 0; }

.upcoming-engagements li::after {
  background: #959595;
  bottom: 0;
  content: '';
  display: block;
  height: 3px;
  position: absolute;
  right: 0;
  transition: width .5s ease;
  width: 0; }

.upcoming-engagements li:hover {
  border-bottom: 2px solid indianred;
  color: indianred; }

.upcoming-engagements li:hover .outside-link {
  opacity: 1; }

.upcoming-engagements li:hover::before {
  background: indianred;
  transition: width .5s ease;
  width: 100%; }

.upcoming-engagements li:hover::after {
  background: transparent;
  transition: all 0s ease;
  width: 100%; }

.upcoming-engagements .outside-link {
  opacity: 0;
  float: right;
  margin-top: 8px;
  margin-right: 2%;
  width: 16px;
  transition: opacity 0.15s ease-in-out; }

.upcoming-engagements .date {
  color: #959595;
  float: right;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.9em;
  font-weight: bold;
  margin-right: 5%;
  margin-top: 15px; }

.engagement {
  float: left;
  font-size: 1.8em; }

.title-and-date {
  align-items: center;
  display: flex;
  flex-wrap: wrap; }

.title {
  font-size: 3.5em;
  line-height: 1.25;
  margin: 3% 0 0 0; }

.date {
  color: #D8D8D8;
  font-family: AvenirNext, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.75em;
  font-weight: bold;
  margin-top: 10px; }

@media screen and (min-width: 850px) {
  .date {
    margin-left: 3%;
    margin-top: 40px; } }

.post-description {
  align-items: center;
  display: flex; }

.tag {
  background-color: #240eba;
  border-radius: 3px;
  color: white;
  padding: 3px 10px 1px 8px;
  margin-left: 5%; }

/* 3D renders 
   Wow so cool much fance

*/
.post-image {
  background-size: auto 100%;
  border-radius: 3px;
  border: 1px solid #F2F2F2;
  height: 200px;
  transition: all 0.25s ease;
  width: 100%; }

.baas {
  background-image: url("/images/partials/writing/baas.jpg"); }

.goya {
  background-image: url("/images/partials/writing/goya.jpg");
  background-size: auto 500%;
  background-position: center 30%; }

.jungle-gym {
  background-size: auto 150%;
  background-image: url("/images/partials/writing/jungle-gym.jpg"); }

.lightbulb {
  background-image: url("/images/partials/writing/lightbulb.jpg");
  background-size: auto 300%;
  background-position: center 15%; }

.orb {
  background-image: url("/images/partials/writing/orb.jpg");
  background-size: auto 220%; }

.printing-press {
  background-size: auto 200%;
  background-position: center 50%;
  background-image: url("/images/partials/writing/printing-press.jpg"); }

.splash {
  background-image: url("/images/partials/writing/splash.jpg"); }

.spiral {
  background-size: auto 125%;
  background-position: center 100%;
  background-image: url("/images/partials/writing/spiral.jpg"); }

.words {
  background-image: url("/images/partials/writing/words.jpg"); }