@import url(https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:400,100,300,400italic,700|EB+Garamond);

@charset "utf-8";

@-webkit-viewport {
  width: device-width;
}

@-moz-viewport {
  width: device-width;
}

@-ms-viewport {
  width: device-width;
}

@-o-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}


/* INTRO TITLE H1 */

h1#title-1 {
  text-align: center;
  color: rgba(250, 250, 250, 0.9);
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 50px;
  font-style: normal;
  font-weight: 100;
}

#title-1 em {
  font-family: 'EB Garamond', serif;
  font-size: 100px;
  text-transform: uppercase;
  letter-spacing: 5px;
  display: block;
  font-style: normal;
  padding-top: 15px;
  text-shadow: 0.07em 0.07em 0 rgba(0, 0, 0, 0.2);
  -webkit-perspective: 1000;
  perspective: 1000;
}

#title-1 em::before,
#title-1 em::after {
  content: "§";
  display: inline-block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  opacity: 0.2;
  margin: 0 16px;
  font-size: 40px;
}

#title-1 em span {
  display: inline-block;
  -webkit-animation: flip 8s cubic-bezier(0.0, 0.0, 0.58, 1.0) infinite;
  animation: flip 8s cubic-bezier(0.0, 0.0, 0.58, 1.0) infinite;
}