html, body {
  height: 100%; }

body {
  /*font-family: 'Roboto', sans-serif;*/
  line-height: 1.5; }

.text {
  max-width: 90%;
  margin-left: 5%;
  position: absolute;
  text-align: center;
  color: #fff;
  -webkit-text-shadow: 1px 1px 3px #000;
  -moz-text-shadow: 1px 1px 3px #000;
  -ms-text-shadow: 1px 1px 3px #000;
  -o-text-shadow: 1px 1px 3px #000;
  text-shadow: 1px 1px 3px #000; }
  .text h2 {
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase; }
  .text p {
    font-weight: 300;
    font-size: 1.2em; }

.separator {
  max-width: 960px;
  padding: 50px;
  font-size: 18px;
  margin: 0 auto;
  text-align: center; }

@media screen and (min-width: 768px) {
  .text {
    text-align: center;
    color: #fff;
    max-width: 50%;
    margin-left: 25%;
    -webkit-text-shadow: 1px 1px 3px #000;
    -moz-text-shadow: 1px 1px 3px #000;
    -ms-text-shadow: 1px 1px 3px #000;
    -o-text-shadow: 1px 1px 3px #000;
    text-shadow: 1px 1px 3px #000; }
    .text h2 {
      font-size: 2.5em; }
    .text p {
      font-size: 1.5em;
      font-weight: 300; }

  .csstransforms .text {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: auto;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); } }