/* Layout

=============== */

.push-down {

margin-top: 60px;

}

.main {

position: relative;

}

.home-header, .post-header {

background-color: darken($primary-color, 20%);
position: relative;
z-index: 2;
color: $background !important;

}

.post-header {

background-size: cover;
background-position: center;
background-repeat: no-repeat;
align-items: flex-end;
height: 420px;

}

.home-header {

background-image: url("/assets/pattern.svg");
background-repeat: repeat;
background-size: 40%;
z-index: 1;
position: relative;

}

.home-header::after {

content: "";
z-index: 3;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.15;
background-color: darken($primary-color, 20%);
opacity: 0.9;

}

.post-header::before {

content: "";
z-index: 2;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

}

.home-header .small-container {

padding: 180px $padding;
z-index: 4;

}

.post-header .small-container {

width: 100%;
margin-bottom: $margins * 2;

}

.post-header .small-container h2, .post-header .small-container p {

display: inline-block;
margin: 0;
padding: $padding / 2 $padding;
background-color: $background;
box-shadow: 0 2px 5px rgba(0,0,0,.1);
color: $font-color;
float: left;
clear: both;

}

.post-header .small-container p {

margin-top: $margins / 3;
display: flex;
flex-direction: row;
align-items: center;
font-size: $code-size;

}

.post-header .small-container p .icon {

margin-right: $margins / 3;

}

.post-header .small-container p .icon:nth-of-type(2) {

margin-left: $margins;

}

.home-header h2, .home-header p {

color: $background !important;
width: 80%;
margin-left: auto;
margin-right: auto;

}

.mailchimp-form {

padding: 0 $padding;
display: flex;
flex-direction: row;
justify-content: center;
font-size: 1.1rem;

}

.mailchimp-form .input {

height: $large-buttons;

}

.mailchimp-form .input {

width: 80%;

}

.posts >.container {

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;

}

.cell {

width: 100%;
margin-bottom: $margins * 2;
box-shadow: 0 2px 5px rgba(0,0,0,.1);
display: flex;
flex-direction: column;

}

@include large-breakpoint {

.cell {
  width: 45%
}

}

.cell .container {

padding: $padding $padding * 2;
background-color: $background;
flex: 1;
width: 100%;

}

.cell:hover, .cell:focus {

box-shadow: 0 4px 10px rgba(0,0,0,.2);

}

.main-footer {

background-color: $alternate-color;

}

.main-footer .small-container {

padding: 60px $padding;
color: $accent-color;
display: flex;
flex-direction: column;
font-size: 1rem;

}

@include large-breakpoint {

.main-footer .small-container {
  flex-direction: row;
  justify-content: space-between;
}

}

.footer-social, .footer-disclaimer {

@extend %column-padding;
margin-bottom: $margin-bottom;
flex: 1;

}

.social-icons {

margin-bottom: $margins;

}

.social-icon {

fill: $background;
width: 40px;
height: 40px;
margin-right: $margins / 1.5;

}

.post-content {

padding: 60px $padding * 2;
background-color: $background;
box-shadow: 0 2px 5px rgba(0,0,0,.1);

}

.after-post {

padding-top: 60px;
padding-bottom: 60px;
margin: $margins * 2 auto 0;

}

@include large-breakpoint {

.after-post .cell {
  width: calc(90% / 3);
}

}

.after-post h3 {

margin-bottom: $margins * 2;

}

.form-box {

background-color: $alternate-background;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
text-shadow:
  -2px -2px 0 $background,
  2px -2px 0 $background,
  -2px 2px 0 $background,
  2px 2px 0 $background;

}

.form-box p {

max-width: 80%;
margin-left: auto;
margin-right: auto;

}

p img {

max-width: 100%;
width: 100%;
margin: auto;

}

@include large-breakpoint {

p img {
  width: 50%;
  float: right;
}

}