@import "../../main";

@include oOverlay();
@import '@financial-times/o-fonts/main';
@include oFonts();
@import '@financial-times/o-buttons/main';
@include oButtons();
@import '@financial-times/o-normalise/main';
@include oNormalise();
@import '@financial-times/o-spacing/main';

body {
  padding: oSpacingByName('s3');
  min-height: 500px;
}

.content {
  margin: auto;
  max-width: 1200px;

  .left {
    float: left;
    width: 60%;
    padding: 1em;
    max-width: 900px;
  }

  .right-rail {
    min-width: 200px;
    width: 30%;
    float: right;
    height: 600px;
  }
}

.hide {
  visibility: hidden;
}

.o-overlay--demo-overlay {
  position: relative;
  // Other custom styles for animating can hang on this class
  text-align: center;
}

.demo-overlay-content {
  padding: 0px 10px;

  .small {
    font-size: 12px;
  }

  .title {
    font-weight: 500;
  }
}