@font-face {
  font-family: 'Product Sans';
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2) format("woff2"); }
* {
  font-family: 'Roboto', 'Verdana', sans-serif; }

body {
  margin: 0;
  text-align: center; }

h1 {
  color: #263248;
  margin: 2em 0 0 0;
  font-family: 'Product Sans'; }

h1:first-child {
  margin: 1em 0 0 0; }

h2 {
  color: #263248;
  font-size: 1.3em;
  margin: 10px 0 .2em 0;
  font-weight: normal;
  font-family: 'Product Sans'; }
  h2 svg {
    width: 16px;
    height: 16px; }

h3 {
  font-size: 1em;
  margin: 0;
  color: #263248;
  font-weight: normal; }

h4 {
  margin: 0;
  font-size: 1.5em;
  font-family: 'Product Sans';
  color: #263248;
  font-weight: normal; }

p {
  margin-top: 10px; }

header {
  padding: 2em;
  color: white;
  background: #263248;
  text-align: center;
  position: relative;
  margin-bottom: 3em; }
  header #M {
    transition: color .2s ease-in;
    transition: background-color .2s ease-in;
    padding: 0 15px;
    border: 2px solid white;
    font-size: 3em;
    display: block;
    width: 1em;
    margin: 0 auto .4em auto;
    cursor: default; }
    @media (max-width: 1024px) {
      header #M {
        display: inline-block; } }
  header #M:hover {
    color: #263248;
    background-color: white; }
  header ul#contact {
    list-style-type: none;
    display: inline-block;
    text-align: right;
    padding: 1.2em 2.4em 1.2em 0;
    border-right: 1px white solid;
    margin: 0 2em 0 0;
    width: 35%;
    vertical-align: top;
    box-sizing: border-box; }
    header ul#contact li {
      height: 1.5em;
      font-weight: 300; }
      header ul#contact li a {
        text-decoration: none;
        color: white; }
      @media (max-width: 600px) {
        header ul#contact li {
          font-size: 0.6em;
          height: 2.3em; } }
    @media (max-width: 1024px) {
      header ul#contact {
        display: inline-block;
        border-left: 1px solid white;
        border-right: none;
        padding: .2em 0 .2em 1em;
        margin-left: 1em;
        text-align: left; } }
    @media (max-width: 800px) {
      header ul#contact {
        width: 45%; } }
  header div {
    box-sizing: border-box;
    display: inline-block;
    width: 60%;
    text-align: left;
    padding-bottom: .5em;
    padding-top: .5em; }
    @media (max-width: 1024px) {
      header div {
        display: block;
        width: 100%;
        padding: .5em;
        text-align: center; } }
    header div #title {
      font-size: 3.5em;
      text-transform: uppercase;
      font-weight: bold;
      display: block;
      margin: 0 0 -.15em 0; }
      @media (max-width: 600px) {
        header div #title {
          font-size: 3em; } }
    header div #subtitle {
      color: #39C6BD;
      font-size: 1.3em;
      font-weight: 400;
      letter-spacing: -1px; }
  header ::after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-top-color: #263248;
    border-width: 25px;
    margin-left: -30px; }
  @media (max-width: 800px) {
    header {
      margin-bottom: 0;
      padding: 2em 1em; } }

section#main {
  padding: 0 2em; }
  section#main .aside {
    display: inline-block;
    padding: 0 2.4em 2.4em 0;
    border-right: 1px #ccc solid;
    margin: 0 2em 0 0;
    width: 35%;
    box-sizing: border-box; }
    section#main .aside * {
      text-align: right; }
    @media (max-width: 800px) {
      section#main .aside {
        display: block;
        width: 100%;
        border: none;
        padding: 1.5em 0 0 0; }
        section#main .aside * {
          text-align: center; } }
  section#main .content {
    vertical-align: top;
    display: inline-block;
    width: 60%;
    box-sizing: border-box;
    text-align: left;
    padding-right: 7%; }
    @media (max-width: 1024px) {
      section#main .content {
        padding-right: 2em; } }
    @media (max-width: 800px) {
      section#main .content {
        width: 100%;
        padding-right: 0;
        padding-top: 2em; } }
    section#main .content h4 {
      margin-top: 2em;
      text-transform: uppercase; }
    section#main .content h4:nth-of-type(1) {
      margin-top: .6em; }
    section#main .content ul {
      list-style-type: none;
      padding-left: .2em; }
      section#main .content ul li::before {
        content: '- ';
        padding-right: .5em; }
      section#main .content ul li {
        padding-top: .2em;
        padding-bottom: .2em;
        vertical-align: middle; }
    section#main .content a.playlink > img {
      width: 175px; }
    section#main .content .language {
      display: inline-block;
      margin-right: 2em;
      margin-top: .5em;
      min-width: 130px; }
      section#main .content .language h2 {
        margin-top: .17em; }
      section#main .content .language img {
        float: left;
        margin-right: .3em; }
    section#main .content form {
      margin-top: .5em;
      margin-right: 1em;
      text-align: left; }
      section#main .content form label {
        display: inline-block;
        vertical-align: baseline;
        width: 100px; }
      section#main .content form label.top {
        vertical-align: top;
        padding-top: .5em; }
      section#main .content form input, section#main .content form textarea {
        padding: .5em;
        margin: .5em;
        width: 350px;
        max-width: 100%; }
        @media (max-width: 800px) {
          section#main .content form input, section#main .content form textarea {
            margin-left: 0; } }
      section#main .content form textarea {
        min-height: 175px; }

.tagcloud {
  max-width: 400px;
  float: right;
  padding-left: 10%;
  line-height: 2em;
  margin-top: 10px; }
  .tagcloud span {
    transition: box-shadow .2s ease-in-out, background-color .2s ease-in-out;
    font-size: .9em;
    border: 1px solid #ddd;
    padding: .2em .7em;
    border-radius: 3px;
    background-color: #ededed;
    white-space: nowrap;
    cursor: default; }
  .tagcloud span:hover {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    background-color: #eee; }
  @media (max-width: 800px) {
    .tagcloud {
      max-width: 100%;
      float: none;
      padding: 0 2em; } }

footer {
  border-top: 1px solid #ccc;
  padding-top: 1em;
  margin: 4em 10% 2em 10%; }
  footer .social {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 0 .2em; }
    footer .social svg {
      transition: fill .2s ease-in-out;
      fill: #999;
      width: 32px;
      height: 32px; }
  footer .social:hover svg {
    fill: #777; }

/*# sourceMappingURL=style.css.map */