/* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i");
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block; }

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

audio:not([controls]) {
  display: none; }

[hidden] {
  display: none; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

html, button, input, select, textarea {
  font-family: sans-serif;
  color: #222; }

body {
  margin: 0;
  font-size: 1em;
  line-height: 1.4; }

::-moz-selection {
  background: #fe57a1;
  color: #fff;
  text-shadow: none; }

::selection {
  background: #fe57a1;
  color: #fff;
  text-shadow: none; }

a {
  color: #00e; }

a:visited {
  color: #551a8b; }

a:hover {
  color: #06e; }

a:focus {
  outline: thin dotted; }

a:hover, a:active {
  outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b, strong {
  font-weight: bold; }

blockquote {
  margin: 0; }

dfn {
  font-style: italic; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 0;
  padding: 0; }

ins {
  background: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-weight: bold; }

pre, code, kbd, samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

q {
  quotes: none; }

q:before, q:after {
  content: "";
  content: none; }

small {
  font-size: 85%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

p {
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0; }

ul, ol {
  margin: 0;
  padding: 0; }

dd {
  margin: 0; }

nav ul, nav ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0; }

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 0; }

form {
  margin: 0; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

label {
  cursor: pointer; }

legend {
  border: 0;
  *margin-left: -7px;
  padding: 0;
  white-space: normal; }

button, input, select, textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  *vertical-align: middle; }

button, input {
  line-height: normal; }

button, input[type="button"], input[type="reset"], input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
  *overflow: visible; }

button[disabled], input[disabled] {
  cursor: default; }

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  *width: 13px;
  *height: 13px; }

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical; }

input:invalid, textarea:invalid {
  background-color: #f0dddd; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td {
  vertical-align: top; }

.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: black;
  padding: 0.2em 0; }

@-webkit-keyframes swing-in {
  0% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg); }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }

@keyframes swing-in {
  0% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg); }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); } }

@-webkit-keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fade-in-down {
  0% {
    -webkit-transform: translateY(-3em);
            transform: translateY(-3em);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1; } }

@keyframes fade-in-down {
  0% {
    -webkit-transform: translateY(-3em);
            transform: translateY(-3em);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1; } }

@-webkit-keyframes fade-in-up {
  0% {
    -webkit-transform: translateY(3em);
            transform: translateY(3em);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1; } }

@keyframes fade-in-up {
  0% {
    -webkit-transform: translateY(3em);
            transform: translateY(3em);
    opacity: 0; }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1; } }

@-webkit-keyframes fade-in-grow {
  0% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    opacity: 0; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }

@keyframes fade-in-grow {
  0% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    opacity: 0; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }

body {
  font-family: "Roboto Condensed", sans-serif;
  color: #0074D9;
  font-size: 100%;
  font-weight: 300; }
  @media only screen and (min-width: 44.375em) and (max-width: 49em) {
    body {
      font-size: 1em; } }
  @media only screen and (min-width: 50em) and (max-width: 92.75em) {
    body {
      font-size: 1.0625em; } }
  @media only screen and (min-width: 93.75em) and (max-width: 1699px) {
    body {
      font-size: 1.125em; } }
  @media only screen and (min-width: 1700px) {
    body {
      font-size: 1.25em; } }

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto Condensed", sans-serif;
  color: #F012BE;
  font-weight: 300; }

h1, h2, h3 {
  font-weight: 400; }

.hero h2 {
  font-family: "Roboto Condensed", sans-serif; }

.jp {
  font-family: "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
  font-size: 0.9em; }
  .jp .en {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 1.1em; }

.mainContent {
  line-height: 1.2; }
  .mainContent h1 {
    font-size: 1.802em; }
    @media only screen and (min-width: 44.375em) {
      .mainContent h1 {
        font-size: 2.488em; } }
  .mainContent h2 {
    font-size: 1.602em; }
    @media only screen and (min-width: 44.375em) {
      .mainContent h2 {
        font-size: 2.074em; } }
  .mainContent h3 {
    font-size: 1.424em; }
    @media only screen and (min-width: 44.375em) {
      .mainContent h3 {
        font-size: 1.728em; } }
  .mainContent h4 {
    font-size: 1.266em; }
    @media only screen and (min-width: 44.375em) {
      .mainContent h4 {
        font-size: 1.44em; } }
  .mainContent h5 {
    font-size: 1.125em; }
    @media only screen and (min-width: 44.375em) {
      .mainContent h5 {
        font-size: 1.2em; } }
  .mainContent h6 {
    font-size: 1em; }
    @media only screen and (min-width: 44.375em) {
      .mainContent h6 {
        font-size: 1em; } }
  .mainContent a {
    text-decoration: none;
    color: #39CCCC; }
    .mainContent a:visited {
      color: #39CCCC; }
    .mainContent a:hover {
      color: #F012BE; }
  .mainContent ol {
    list-style: inside decimal; }
  .mainContent blockquote {
    font-size: 2em;
    font-family: "Roboto Condensed", sans-serif;
    font-style: italic;
    border-left: 0.25em #ddd solid;
    padding: 0 0.25em 0 0.5em; }
    .mainContent blockquote > blockquote {
      font-size: 1em; }
  .mainContent .block {
    margin-bottom: 2em; }

blockquote > blockquote > blockquote {
  margin: 0; }
  blockquote > blockquote > blockquote p {
    padding: 15px;
    display: block;
    font-size: 1rem;
    margin-top: 0rem;
    margin-bottom: 0rem; }
  blockquote > blockquote > blockquote > p {
    margin-left: -71px;
    border-left: 10px solid #F0AD4E;
    background: #FCF8F2;
    color: #df8a13; }
  blockquote > blockquote > blockquote > blockquote > p {
    margin-left: -94px;
    border-left: 10px solid #D9534F;
    background: #FDF7F7;
    color: #b52b27; }
  blockquote > blockquote > blockquote > blockquote > blockquote > p {
    margin-left: -118px;
    border-left: 10px solid #5BC0DE;
    background: #F4F8FA;
    color: #28a1c5; }
  blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p {
    margin-left: -142px;
    border-left: 10px solid #5CB85C;
    background: #F1F9F1;
    color: #3d8b3d; }

body {
  background: linear-gradient(to top, #1d7686, #001F3F);
  background-color: #1d7686;
  background-image: url("../img/bgA.png"), radial-gradient(at center top, white 20%, #39CCCC 30%, #001F3F 85%, black);
  background-size: cover;
  background-attachment: fixed; }

.wrap {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative; }
  @media only screen and (min-width: 76.25em) {
    .wrap {
      justify-content: center; } }

.mainContent {
  -webkit-animation: fade-in 600ms both 300ms;
          animation: fade-in 600ms both 300ms;
  max-width: 45em;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2), 0 3px 10px rgba(0, 31, 63, 0.5);
  position: relative;
  z-index: 10;
  margin: 1em 0.5em 0.5em 0.5em; }
  .mainContent * + * {
    margin-top: 1em; }
  .mainContent > header {
    padding: 1em;
    background: rgba(0, 31, 63, 0.8); }
    .mainContent > header h1 {
      text-transform: uppercase;
      font-weight: 100;
      letter-spacing: 0.1em;
      color: white; }
  .mainContent .core {
    margin-top: 0;
    background: white;
    padding: 1em; }
  .mainContent img {
    max-width: 100%;
    height: auto; }
  @media only screen and (min-width: 44.375em) {
    .mainContent {
      margin: 1em; } }
  @media only screen and (min-width: 76.25em) {
    .mainContent {
      max-width: 38em;
      margin: 3em 1em 3em 1em; } }
  @media only screen and (min-width: 81.25em) {
    .mainContent {
      max-width: 40em; } }
  @media only screen and (min-width: 93.75em) {
    .mainContent {
      max-width: 45em; } }

.mainHeader {
  width: 100%;
  padding: 0;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
  -webkit-animation: fade-in-down 600ms both;
          animation: fade-in-down 600ms both;
  overflow: hidden; }
  .mainHeader h1 {
    box-sizing: border-box;
    height: 4.55em;
    background: linear-gradient(to top, rgba(240, 18, 190, 0.7), rgba(127, 219, 255, 0.5));
    font-size: 1em;
    color: white;
    position: relative;
    z-index: 2;
    margin: 0; }
    .mainHeader h1 a {
      display: block;
      width: 10em;
      position: relative;
      z-index: 3;
      min-height: 4.5em; }
  .mainHeader a {
    color: white;
    display: block;
    text-decoration: none; }
  .mainHeader svg {
    color: #001F3F;
    position: absolute;
    top: 0.25em;
    left: 0em;
    width: 10em; }
    .mainHeader svg path {
      fill: white;
      fill: currentColor; }
  .mainHeader button {
    position: absolute;
    top: 1em;
    right: 1em; }
  .mainHeader nav {
    clear: both;
    text-align: center;
    margin: 0 -1em 0 -1em;
    position: relative;
    z-index: 5;
    text-transform: uppercase;
    font-weight: 100;
    letter-spacing: 0.1em; }
    .mainHeader nav ul {
      background: rgba(0, 31, 63, 0.9);
      padding: 0 0.5em; }
    .mainHeader nav li {
      display: inline-block;
      margin: 0 0.5em; }
    .mainHeader nav a {
      padding: 0.5em 0.25em; }
  @media only screen and (min-width: 44.375em) {
    .mainHeader {
      padding: 0.5em 1em 0.5em 0.5em;
      background: linear-gradient(to top, rgba(240, 18, 190, 0.7), rgba(127, 219, 255, 0.5));
      height: 4.75em; }
      .mainHeader h1 {
        width: 10em;
        float: left;
        background: none; }
      .mainHeader button {
        display: none; }
      .mainHeader svg {
        left: 0; }
      .mainHeader nav {
        float: right;
        margin: 1.5em 0 0 0;
        clear: right; }
        .mainHeader nav ul {
          background: none; } }
  @media only screen and (min-width: 76.25em) {
    .mainHeader {
      width: 12em;
      position: fixed;
      top: 0;
      left: 1em;
      border: none;
      -webkit-backdrop-filter: none;
              backdrop-filter: none;
      background: none;
      padding: 0 1em;
      overflow: visible; }
      .mainHeader h1 {
        margin-top: 0;
        float: none;
        background: linear-gradient(to top, rgba(240, 18, 190, 0.7), rgba(127, 219, 255, 0.5));
        width: 14.5em;
        height: 5.75em; }
      .mainHeader h1 a {
        display: block;
        padding: 0em;
        width: 14em;
        height: 5em;
        z-index: 4; }
      .mainHeader svg {
        color: #001F3F;
        position: absolute;
        top: 0.5em;
        left: 0.25em;
        width: 14em;
        z-index: 3; }
      .mainHeader nav {
        float: none;
        margin: 0.5em 0 0 0;
        position: static; }
        .mainHeader nav a {
          padding: 0.5em 3em;
          display: block;
          border-radius: 0 2em 2em 0;
          background: rgba(240, 18, 190, 0.9);
          transition: all 300ms;
          -webkit-transform-origin: left center;
                  transform-origin: left center; }
          .mainHeader nav a:hover, .mainHeader nav a:active {
            background: rgba(127, 219, 255, 0.9); }
        .mainHeader nav li:nth-child(1) a {
          -webkit-animation: swing-in 1s cubic-bezier(0.73, 0.25, 0, 1.17) 0s both, fade-in 0.5s 0s both;
                  animation: swing-in 1s cubic-bezier(0.73, 0.25, 0, 1.17) 0s both, fade-in 0.5s 0s both; }
        .mainHeader nav li:nth-child(2) a {
          -webkit-animation: swing-in 1s cubic-bezier(0.73, 0.25, 0, 1.17) 0.2s both, fade-in 0.5s 0.2s both;
                  animation: swing-in 1s cubic-bezier(0.73, 0.25, 0, 1.17) 0.2s both, fade-in 0.5s 0.2s both; }
        .mainHeader nav li:nth-child(3) a {
          -webkit-animation: swing-in 1s cubic-bezier(0.73, 0.25, 0, 1.17) 0.4s both, fade-in 0.5s 0.4s both;
                  animation: swing-in 1s cubic-bezier(0.73, 0.25, 0, 1.17) 0.4s both, fade-in 0.5s 0.4s both; }
        .mainHeader nav li:nth-child(4) a {
          -webkit-animation: swing-in 1s cubic-bezier(0.73, 0.25, 0, 1.17) 0.6s both, fade-in 0.5s 0.6s both;
                  animation: swing-in 1s cubic-bezier(0.73, 0.25, 0, 1.17) 0.6s both, fade-in 0.5s 0.6s both; }
        .mainHeader nav .current a {
          background: rgba(177, 13, 201, 0.9); }
          .mainHeader nav .current a:hover, .mainHeader nav .current a:active {
            background: rgba(127, 219, 255, 0.9); }
        .mainHeader nav li {
          float: left;
          margin: 0;
          display: block;
          margin-left: 0; }
        .mainHeader nav ul {
          box-sizing: border-box;
          padding: 4em 0 0 0;
          margin: 0;
          height: 15em;
          display: flex;
          width: 15em;
          flex-direction: column-reverse;
          justify-content: space-between;
          align-items: flex-start;
          -webkit-transform: rotateZ(90deg);
                  transform: rotateZ(90deg); } }
  @media only screen and (min-width: 93.75em) {
    .mainHeader {
      left: calc((((100% - 45em) / 2) / 2) - 8.5em); } }

.mainFooter {
  -webkit-animation: fade-in-up 800ms both;
          animation: fade-in-up 800ms both;
  width: 100%;
  background: rgba(0, 0, 0, 0.9);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
  border-top: 1px solid white;
  box-sizing: border-box;
  padding: 1em;
  color: white;
  position: relative;
  z-index: 10;
  text-align: center;
  text-transform: uppercase;
  color: #0074D9;
  letter-spacing: 0.1em; }
  .mainFooter .social {
    list-style: none; }
    .mainFooter .social a {
      color: #f889df;
      text-decoration: none; }
      .mainFooter .social a:hover, .mainFooter .social a:active {
        color: white; }
    .mainFooter .social li {
      display: inline-block;
      padding: 0 0.5em; }
  @media only screen and (min-width: 76.25em) {
    .mainFooter {
      width: 12em;
      position: fixed;
      bottom: 0;
      right: 1em;
      border: none;
      text-align: left;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)); }
      .mainFooter .social {
        text-align: right; }
        .mainFooter .social li {
          display: block; } }
  @media only screen and (min-width: 93.75em) {
    .mainFooter {
      right: calc((((100% - 45em) / 2) / 2) - 6em); } }

.bubbles {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  right: 0;
  display: flex;
  z-index: 1;
  overflow: hidden; }

@-webkit-keyframes bubble-y {
  0% {
    opacity: 1;
    -webkit-transform: translateY(200vh) scale(0.5);
            transform: translateY(200vh) scale(0.5); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(-100vh) scale(1.5);
            transform: translateY(-100vh) scale(1.5); } }

@keyframes bubble-y {
  0% {
    opacity: 1;
    -webkit-transform: translateY(200vh) scale(0.5);
            transform: translateY(200vh) scale(0.5); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(-100vh) scale(1.5);
            transform: translateY(-100vh) scale(1.5); } }

@-webkit-keyframes bubble-x {
  0% {
    -webkit-transform: translateX(10em);
            transform: translateX(10em); }
  100% {
    -webkit-transform: translateX(-10em);
            transform: translateX(-10em); } }

@keyframes bubble-x {
  0% {
    -webkit-transform: translateX(10em);
            transform: translateX(10em); }
  100% {
    -webkit-transform: translateX(-10em);
            transform: translateX(-10em); } }

@-webkit-keyframes bubble-opacity {
  0% {
    opacity: 0.5; }
  100% {
    opacity: 0.2; } }

@keyframes bubble-opacity {
  0% {
    opacity: 0.5; }
  100% {
    opacity: 0.2; } }

.bubble {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0; }
  .bubble .inner {
    position: absolute;
    top: 0;
    left: 50%;
    box-sizing: border-box;
    box-shadow: 0 0 50px rgba(0, 31, 63, 0.2);
    border-radius: 50%;
    background: radial-gradient(at center, rgba(127, 219, 255, 0), rgba(127, 219, 255, 0) 30%, rgba(127, 219, 255, 0.25)), radial-gradient(at center, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 99%, rgba(255, 255, 255, 0.9) 100%), radial-gradient(at top right, white, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0) 70%); }
    .bubble .inner::after {
      content: "";
      position: absolute;
      top: 15%;
      right: 17%;
      height: 1em;
      width: 1em;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.8); }
    .bubble .inner::before {
      content: "";
      position: absolute;
      top: 32%;
      right: 11%;
      height: 0.5em;
      width: 0.5em;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.6); }

.bubble-a {
  -webkit-animation: bubble-y 20s infinite 5s both;
          animation: bubble-y 20s infinite 5s both; }
  .bubble-a .inner {
    height: 4em;
    width: 4em;
    margin: -2em 0 0 -2em;
    -webkit-animation: bubble-x 7s infinite 0s alternate, bubble-opacity 2s infinite 0 alternate;
            animation: bubble-x 7s infinite 0s alternate, bubble-opacity 2s infinite 0 alternate;
    left: 10%; }

.bubble-b {
  -webkit-animation: bubble-y 40s infinite 5s both;
          animation: bubble-y 40s infinite 5s both; }
  .bubble-b .inner {
    height: 8.5em;
    width: 8.5em;
    margin: -4.25em 0 0 -4.25em;
    -webkit-animation: bubble-x 6s infinite 0s alternate, bubble-opacity 4s infinite 0 alternate;
            animation: bubble-x 6s infinite 0s alternate, bubble-opacity 4s infinite 0 alternate;
    left: 90%; }

.bubble-c {
  -webkit-animation: bubble-y 20s infinite 15s both;
          animation: bubble-y 20s infinite 15s both; }
  .bubble-c .inner {
    height: 4em;
    width: 4em;
    margin: -2em 0 0 -2em;
    -webkit-animation: bubble-x 5s infinite 0s alternate, bubble-opacity 6s infinite 0 alternate;
            animation: bubble-x 5s infinite 0s alternate, bubble-opacity 6s infinite 0 alternate;
    left: 50%; }

.bubble-d {
  -webkit-animation: bubble-y 30s infinite 1s both;
          animation: bubble-y 30s infinite 1s both; }
  .bubble-d .inner {
    height: 8em;
    width: 8em;
    margin: -4em 0 0 -4em;
    -webkit-animation: bubble-x 4s infinite 0s alternate, bubble-opacity 5s infinite 0 alternate;
            animation: bubble-x 4s infinite 0s alternate, bubble-opacity 5s infinite 0 alternate;
    left: 30%; }

.bubble-e {
  -webkit-animation: bubble-y 20s infinite 7s both;
          animation: bubble-y 20s infinite 7s both; }
  .bubble-e .inner {
    height: 7em;
    width: 7em;
    margin: -3.5em 0 0 -3.5em;
    -webkit-animation: bubble-x 2s infinite 0s alternate, bubble-opacity 7s infinite 0 alternate;
            animation: bubble-x 2s infinite 0s alternate, bubble-opacity 7s infinite 0 alternate;
    left: 70%; }

.previewLink {
  display: block; }
  .previewLink img {
    display: block; }
  .previewLink span {
    text-align: right;
    display: block;
    display: flex;
    justify-content: flex-end;
    line-height: 2; }
    .previewLink span::after {
      content: "";
      height: 2em;
      width: 1em;
      background-image: url('data:image/svg+xml;utf8,		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 20">			<polyline fill="none" stroke="#39CCCC" stroke-width="2" points="1 1 14 10 1 19" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></polyline>		</svg>');
      background-repeat: no-repeat;
      background-position: center;
      display: inline-block;
      margin-left: 0.5em; }
  .previewLink:hover span::after, .previewLink:active span::after {
    background-image: url('data:image/svg+xml;utf8,		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 20">			<polyline fill="none" stroke="#F012BE" stroke-width="2" points="1 1 14 10 1 19" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></polyline>		</svg>'); }

.intro {
  font-size: 1.125em;
  font-weight: 400;
  color: #7FDBFF;
  font-style: italic; }
  @media only screen and (min-width: 44.375em) {
    .intro {
      font-size: 1.2em; } }
  .intro a {
    color: #0074D9; }
    .intro a:visited {
      color: #0074D9; }
    .intro a:hover, .intro a:active {
      color: #F012BE; }

.music .musicList {
  list-style: none; }

.music .albumList {
  flex-wrap: wrap;
  justify-content: space-between; }
  .music .albumList li {
    margin: 0.5em;
    flex: 1 1 40%; }
  .music .albumList li:first-child {
    flex: 1 1 100%; }

@media only screen and (min-width: 44.375em) {
  .music .mainContent {
    width: 100%; } }

.servicesList {
  list-style: none; }
  .servicesList ul {
    list-style: outside disc;
    padding-left: 1em;
    margin-top: 0; }
    .servicesList ul li {
      margin-top: 0; }
  @media only screen and (min-width: 44.375em) {
    .servicesList {
      display: flex; }
      .servicesList > li {
        margin-top: 0;
        flex: 1 1 30%;
        padding: 0 1em; }
      .servicesList ul {
        margin-top: 0.5em; }
      .servicesList h3 {
        text-align: center; } }

.contact .core {
  font-size: 1.424em;
  font-weight: 100; }
  @media only screen and (min-width: 44.375em) {
    .contact .core {
      font-size: 1.728em; } }

.mainContent .people {
  list-style: none; }

.people {
  list-style: none;
  margin: 1em auto 0 auto;
  flex-wrap: wrap;
  margin-top: 2em;
  justify-content: space-around; }
  .people li {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; }
  .people li + li {
    margin-top: 2em;
    padding-top: 2em;
    border-top: 1px solid #bfedff; }
  .people img {
    width: 11em;
    height: 11em;
    border: 5px solid #7FDBFF;
    box-sizing: border-box;
    border-radius: 50%;
    margin-top: 0.5em; }
  .people h3 {
    margin: 0.25em 0 0 0; }
  .people p {
    margin: 0; }
  .people .what {
    display: block;
    margin-bottom: 0; }
  .people .role {
    color: #7FDBFF;
    line-height: 1; }
  .people .what {
    color: #fbb8ec; }
  .people dl {
    color: #339de8; }
  .people dt {
    font-weight: 700; }
  .people dd {
    margin-top: 0;
    line-height: 1; }
  .people a {
    margin-top: auto;
    color: #F012BE; }
    .people a:hover, .people a:active {
      color: #7FDBFF; }
  @media only screen and (min-width: 44.375em) {
    .people {
      display: flex; }
      .people li {
        margin: 0;
        padding-bottom: 2em;
        flex: 0 0 11em; }
      .people li + li {
        margin: 0;
        border-top: none;
        padding-top: 0; } }

/* =============================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */ }

/* =============================================================================
   Non-Semantic Helper Classes
   ========================================================================== */
.ir {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
  *line-height: 0; }

.ir br {
  display: none; }

.hidden {
  display: none !important;
  visibility: hidden; }

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

.invisible {
  visibility: hidden; }

.clearfix:before, .clearfix:after {
  content: "";
  display: table; }

.clearfix:after {
  clear: both; }

.clearfix {
  *zoom: 1; }

/* =============================================================================
   Print Styles
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-filter: none !important;
            filter: none !important;
    -ms-filter: none !important; }
  /* Black prints faster: h5bp.com/s */
  a, a:visited {
    text-decoration: underline; }
  a[href]:after {
    content: " (" attr(href) ")"; }
  abbr[title]:after {
    content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
    content: ""; }
  /* Don't show links for images, or javascript/internal links */
  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }
  thead {
    display: table-header-group; }
  /* h5bp.com/t */
  tr, img {
    page-break-inside: avoid; }
  img {
    max-width: 100% !important; }
  @page {
    margin: 0.5cm; }
  p, h2, h3 {
    orphans: 3;
    widows: 3; }
  h2, h3 {
    page-break-after: avoid; } }
/*# sourceMappingURL=main.css.map */