}

html, body {

margin: 0;
padding: 0;

}

html {

background: $header-bg;

}

body {

@extend %body-type;
background-color: $body-bg;
color: $text-color;
font-size: $body-font-size;
line-height: 1.5;
text-rendering: optimizeLegibility;

}

a {

color: $link-color;
text-decoration: none;
transition: $link-transition;

&:hover {
  color: $link-hover;
  text-decoration: underline;
  transition: $link-transition;
}

}

.img-center {

display: block;
margin: 0 auto;

}

%text-left {

text-align: left;

}

.text-right {

text-align: right;

}

.pull-right {

float: right;

}

.pull-left {

float: left;

}

video {

max-width: 100%;

}

picture, img {

display: block;
margin: 2em auto;

}

.img-polaroid {

background-color: $white;
border: 1px solid $dark-transparent02;
box-shadow: 0 1px 3px $dark-transparent01;
margin: 1em 0.25em 2em;
padding: 0.25em;

}

.img-full {

margin-left: auto;
margin-right: auto;
max-width: $container-width;

}

.img-half {

.post & {
  max-width: 500px;
}

@include breakpoint(medium) {
  width: 49.6%;
}

}

.img-thirds {

@include breakpoint(medium) {
  width: 32.89%;
}

}

.thirds {

float: left;
margin-bottom: 1em;

@include breakpoint(medium) {
  width: 31.8%;
}

}

.img-fourths {

@include breakpoint(medium) {
  width: 24.5%;
}

}

.post {

video + video {
  @include breakpoint(medium) {
    margin-left: 0.65%;
  }
}

}

.img-split-wide, .img-wide {

@include breakpoint(medium) {
  width: 62.7%;
}

}

.img-split-tall, .img-tall {

@include breakpoint(medium) {
  width: 35.25%;
}

}

.rotate-left {

transform: rotate(-90deg);

}

.img-half, .img-thirds, .img-fourths, .img-split-wide, .img-wide, .img-split-tall, .img-tall {

@include breakpoint(medium) {
  //display: inline-block;
}

}