.slides {
  position: relative;
}
.slides .slide {
  position: absolute;
  top: 0;
  width: calc(33% - 1em);
  max-height: 3.5em;
  margin: 0.5em;
  padding: 1em;
  background: #ad1f36;
  color: white;
  float: left;
  overflow: hidden;
  transition: max-height 0.25s ease-in-out, width 0.25s 0.25s ease-in-out, left 0.25s 0.5s ease-in-out, top 0.25s 0.75s ease-in-out;
    background-image: url('/img/global/pattern-dark.png');
    background-repeat: initial;
    background-position: 50% 0;
}

.slides .slide-2-col {
  width: calc(50% - 1em);
}

.slides .slide .content {
    background-color: #f00;
    height:600px;
}
.slides .slide .content img {
    height:inherit;
}

.slides .slide:nth-child(1) {
  left: 0%;
}
.slides .slide:nth-child(2) {
  left: 33.3333%;
}
.slides .slide:nth-child(3) {
  left: 66.6666%;
}
.slides .slide-2-col:nth-child(1) {
  left: 0%;
}
.slides .slide-2-col:nth-child(2) {
  left: 50%;
}

.slides .slide > a {
  display: block;
  padding-bottom: 1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ec93a2;
  transition: color 2s;
}
.slides .slide.active {
  position: aabsolute;
  top: 4.5em;
  left: 0;
  width: 100%;
  max-height: 100em;
  float: none;
  transition: opacity 0.25s 1s ease_in-out, top 0.25s 1s ease-in-out, left 0.25s 1.25s ease-in-out, width 0.25s 1.5s ease-in-out, max-height 0.25s 1.75s ease-in-out;
}
.slides .slide.active a {
  color: white;
}

/** PAGE STYLES **/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Lato", sans-serif;
  font-size: 2em;
  line-height: 1.5;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}


/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before, .slides:before,
.cf:after,
.slides:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after, .slides:after {
  clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf, .slides {
  *zoom: 1;
}ain floats.
 */
.cf, .slides {
  *zoom: 1;
}