.btn {
  padding-right: 50px;
  padding-left: 50px; }
  .btn-primary {
    background: #21FFFE;
    border-color: #21FFFE;
    color: #210050; }
    .btn-primary:hover {
      color: #210050;
      background-color: #08fffe;
      border-color: #08fffe; }
  .btn-secondary {
    background: #210050;
    border-color: #210050;
    color: white; }
    .btn-secondary:hover {
      color: white;
      background-color: #160037;
      border-color: #160037; }

.wrapper {
  overflow-x: hidden; }
  .wrapper p {
    font-size: 18px; }

.header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  background: #210050 url("../img/bg_header.jpg") center;
  -webkit-background-size: cover;
  background-size: cover;
  background-blend-mode: multiply;
  min-height: 90vh;
  padding-bottom: 20vh; }
  .header:after {
    content: "";
    position: absolute;
    bottom: -20vh;
    left: 0;
    width: 100%;
    height: 20vh;
    background: white;
    transform-origin: bottom left;
    transform: skew(0deg, -5deg);
    z-index: 0; }

.header-logo {
  margin-bottom: 24px; }
  .header-logo img {
    max-width: 80%;
    height: auto; }

.header-content h1 {
  font-weight: 400;
  margin-bottom: 24px; }

.main {
  position: relative; }

.section {
  padding-left: 25px;
  padding-right: 25px;
  color: #210050; }
  @media only screen and (min-width: 62em) {
    .section {
      padding-left: 0;
      padding-right: 0; } }
  .section-intro {
    margin-top: -20vh;
    margin-bottom: 50px;
    position: relative;
    z-index: 1; }
    .section-intro img {
      max-width: 100%;
      height: auto; }
  .section-watch {
    padding-top: 50px;
    padding-bottom: 50px;
    background: #2c2c2c url("../img/bg_watch.jpg") center;
    -webkit-background-size: cover;
    background-size: cover;
    background-blend-mode: color-burn;
    color: white; }
    @media only screen and (min-width: 62em) {
      .section-watch {
        padding: 125px 0; } }
    .section-watch img {
      margin: 0 0 50px; }
  .section-topics {
    padding-top: 25px;
    padding-bottom: 25px;
    color: #210050; }
    @media only screen and (min-width: 62em) {
      .section-topics {
        padding-bottom: 50px; } }
    .section-topics img {
      max-width: 100%;
      height: auto; }
  .section-subscription {
    padding-top: 50px;
    background: #21FFFE;
    color: #210050; }
    @media only screen and (min-width: 62em) {
      .section-subscription {
        padding: 100px 0 25px; } }

.section-title {
  margin-bottom: 50px; }
  .section-title.with-underline {
    display: inline-block;
    padding: 25px 50px;
    border-bottom: 1px solid currentColor; }

.topics-cover {
  margin-bottom: 50px; }
  @media only screen and (min-width: 62em) {
    .topics-cover {
      margin-bottom: 0; } }

.topics-content .category {
  color: #21FFFE; }
  @media only screen and (min-width: 62em) {
    .topics-content .category {
      margin-bottom: 50px; } }
.topics-content .subsection-title {
  margin-bottom: 25px; }
  @media only screen and (min-width: 62em) {
    .topics-content .subsection-title {
      margin-bottom: 75px; } }
  .topics-content .subsection-title span {
    font-size: .675em;
    display: block;
    margin-bottom: 15px; }

.footer {
  padding: 50px 25px 0;
  background: #210050;
  color: white; }
  @media only screen and (min-width: 62em) {
    .footer {
      padding: 50px 0 0; } }
  .footer h4 {
    font-size: 20px;
    margin-bottom: 25px;
    opacity: 0.5; }
  .footer a {
    display: block;
    color: currentColor;
    text-decoration: none;
    opacity: 0.5; }
    .footer a:hover {
      opacity: 1; }
  .footer .social-links a {
    padding: 0 10px; }
  .footer .footer-meta {
    margin-top: 25px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center; }
    @media only screen and (min-width: 62em) {
      .footer .footer-meta {
        justify-content: flex-end; } }

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