@font-face {
  font-family: Merriweather;
  src: url(../assets/fonts/Merriweather-Regular.ttf); }

@font-face {
  font-family: MerriweatherLight;
  src: url(../assets/fonts/Merriweather-Light.ttf); }

@font-face {
  font-family: MerriweatherBold;
  src: url(../assets/fonts/Merriweather-Bold.ttf); }

@font-face {
  font-family: DinProLight;
  src: url(../assets/fonts/DINPro-Light.ttf); }

@font-face {
  font-family: DinPro;
  src: url(../assets/fonts/DINPro-Regular.ttf); }

@font-face {
  font-family: DinProMedium;
  src: url(../assets/fonts/DINPro-Medium.ttf); }

@font-face {
  font-family: DinProBold;
  src: url(../assets/fonts/DINPro-Bold.ttf); }

/* ULTRAPINK */
/*rgb(120, 220, 58);*/
/*
Animations
*/
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -10%, 0); }
  to {
    opacity: 1;
    transform: translate3d(0, 0%, 0); } }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 10%, 0); }
  to {
    opacity: 1;
    transform: translate3d(0, 0%, 0); } }

@keyframes dashHero {
  from {
    stroke-dashoffset: 1050; }
  to {
    stroke-dashoffset: 0; } }

@keyframes dashLogo {
  from {
    stroke-dashoffset: 700; }
  to {
    stroke-dashoffset: 0; } }

@keyframes dashLogoLoop {
  from {
    stroke-dashoffset: -450; }
  to {
    stroke-dashoffset: 950; } }

.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.fadeIn {
  animation-name: fadeIn; }

.fadeInDelayed {
  animation-name: fadeIn;
  animation-delay: .75s;
  -webkit-animation-delay: .75s; }

.fadeInDown {
  animation-name: fadeInDown; }

.fadeInUp {
  animation-name: fadeInUp; }

.butterfly {
  display: inline-block; }
  .butterfly .wing {
    position: relative;
    width: 20px;
    height: 20px;
    transition: transform .8s, -webkit-transform .8s, opacity .8s; }
  .butterfly .wing.wing1 {
    opacity: 0;
    background: rgba(0, 82, 204, 0.8);
    transform: skew(0, 30deg) translate(40px, 20px);
    -webkit-transform: skew(0, 30deg) translate(40px, 20px); }
  .butterfly .wing.wing2 {
    opacity: 0;
    background: rgba(36, 216, 205, 0.8);
    transform: skew(0deg, -30deg) translate(30px, 10px);
    -webkit-transform: skew(0deg, -30deg) translate(30px, 10px); }

@keyframes preload-show-1 {
  from {
    transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-hide-1 {
  to {
    transform: rotateZ(60deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-cycle-1 {
  5% {
    transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #2800d7; }
  10%,
  75% {
    transform: rotateZ(60deg) rotateY(0) rotateX(0deg);
    border-left-color: #24d8cd; }
  80%,
  100% {
    transform: rotateZ(60deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-show-2 {
  from {
    transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-hide-2 {
  to {
    transform: rotateZ(120deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-cycle-2 {
  10% {
    transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #2800d7; }
  15%,
  70% {
    transform: rotateZ(120deg) rotateY(0) rotateX(0deg);
    border-left-color: #24d8cd; }
  75%,
  100% {
    transform: rotateZ(120deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-show-3 {
  from {
    transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-hide-3 {
  to {
    transform: rotateZ(180deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-cycle-3 {
  15% {
    transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #2800d7; }
  20%,
  65% {
    transform: rotateZ(180deg) rotateY(0) rotateX(0deg);
    border-left-color: #24d8cd; }
  70%,
  100% {
    transform: rotateZ(180deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-show-4 {
  from {
    transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-hide-4 {
  to {
    transform: rotateZ(240deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-cycle-4 {
  20% {
    transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #2800d7; }
  25%,
  60% {
    transform: rotateZ(240deg) rotateY(0) rotateX(0deg);
    border-left-color: #24d8cd; }
  65%,
  100% {
    transform: rotateZ(240deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-show-5 {
  from {
    transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-hide-5 {
  to {
    transform: rotateZ(300deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-cycle-5 {
  25% {
    transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #2800d7; }
  30%,
  55% {
    transform: rotateZ(300deg) rotateY(0) rotateX(0deg);
    border-left-color: #24d8cd; }
  60%,
  100% {
    transform: rotateZ(300deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-show-6 {
  from {
    transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-hide-6 {
  to {
    transform: rotateZ(360deg) rotateY(-90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-cycle-6 {
  30% {
    transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #2800d7; }
  35%,
  50% {
    transform: rotateZ(360deg) rotateY(0) rotateX(0deg);
    border-left-color: #24d8cd; }
  55%,
  100% {
    transform: rotateZ(360deg) rotateY(90deg) rotateX(0deg);
    border-left-color: #2800d7; } }

@keyframes preload-flip {
  0% {
    transform: rotateY(0deg) rotateZ(-60deg); }
  100% {
    transform: rotateY(360deg) rotateZ(-60deg); } }

.preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 10px;
  display: block;
  width: 3.75em;
  height: 4.25em;
  margin-left: -1.875em;
  margin-top: -2.125em;
  transform-origin: center center;
  transform: rotateY(180deg) rotateZ(-60deg); }
  .preloader .slice {
    border-top: 1.125em solid transparent;
    border-right: none;
    border-bottom: 1em solid transparent;
    border-left: 1.875em solid #f7484e;
    position: absolute;
    top: 0px;
    left: 50%;
    transform-origin: left bottom;
    border-radius: 3px 3px 0 0; }
  .preloader .slice:nth-child(1) {
    transform: rotateZ(60deg) rotateY(0deg) rotateX(0);
    animation: 0.15s linear 0.82s preload-hide-1 both 1; }
  .preloader .slice:nth-child(2) {
    transform: rotateZ(120deg) rotateY(0deg) rotateX(0);
    animation: 0.15s linear 0.74s preload-hide-2 both 1; }
  .preloader .slice:nth-child(3) {
    transform: rotateZ(180deg) rotateY(0deg) rotateX(0);
    animation: 0.15s linear 0.66s preload-hide-3 both 1; }
  .preloader .slice:nth-child(4) {
    transform: rotateZ(240deg) rotateY(0deg) rotateX(0);
    animation: 0.15s linear 0.58s preload-hide-4 both 1; }
  .preloader .slice:nth-child(5) {
    transform: rotateZ(300deg) rotateY(0deg) rotateX(0);
    animation: 0.15s linear 0.5s preload-hide-5 both 1; }
  .preloader .slice:nth-child(6) {
    transform: rotateZ(360deg) rotateY(0deg) rotateX(0);
    animation: 0.15s linear 0.42s preload-hide-6 both 1; }
  .preloader.loading {
    animation: 2s preload-flip steps(2) infinite both; }
    .preloader.loading .slice:nth-child(1) {
      transform: rotateZ(60deg) rotateY(90deg) rotateX(0);
      animation: 2s preload-cycle-1 linear infinite both; }
    .preloader.loading .slice:nth-child(2) {
      transform: rotateZ(120deg) rotateY(90deg) rotateX(0);
      animation: 2s preload-cycle-2 linear infinite both; }
    .preloader.loading .slice:nth-child(3) {
      transform: rotateZ(180deg) rotateY(90deg) rotateX(0);
      animation: 2s preload-cycle-3 linear infinite both; }
    .preloader.loading .slice:nth-child(4) {
      transform: rotateZ(240deg) rotateY(90deg) rotateX(0);
      animation: 2s preload-cycle-4 linear infinite both; }
    .preloader.loading .slice:nth-child(5) {
      transform: rotateZ(300deg) rotateY(90deg) rotateX(0);
      animation: 2s preload-cycle-5 linear infinite both; }
    .preloader.loading .slice:nth-child(6) {
      transform: rotateZ(360deg) rotateY(90deg) rotateX(0);
      animation: 2s preload-cycle-6 linear infinite both; }

/*
Sections
*/
.footer .logo svg {
  transform: none; }

.logo {
  width: 100%;
  height: 56px;
  display: inline-block;
  text-align: center; }
  .logo svg {
    transform: scale(0.6, 0.6) translate(0px, -45px);
    padding: 0;
    max-width: 110px;
    max-height: 110px; }
    .logo svg path {
      stroke-width: 2px;
      stroke: #2800d7;
      fill: none;
      stroke-dasharray: 700;
      stroke-dashoffset: 700;
      animation: dashLogo 4s linear forwards; }
    .logo svg:hover path {
      animation: dashLogoLoop 4s linear infinite; }
  .logo svg rect {
    fill: none; }
  .logo svg path {
    stroke: none;
    stroke-width: 2px;
    transition: fill .3s, stroke .3s; }
  .logo svg:hover rect {
    fill: none; }
  .logo svg:hover path {
    stroke: #2800d7;
    transition: fill .3s, stroke .3s; }

.hero {
  width: 100%;
  display: inline-block;
  height: 100%;
  text-align: center; }
  .hero a {
    position: absolute;
    top: 50%; }
  .hero svg {
    padding: 20px;
    transform: scale(0.75, 0.75) translate(-140px, -210px);
    transition: transform .5s;
    overflow: visible; }
    .hero svg path,
    .hero svg circle {
      stroke-width: 2px;
      stroke: white;
      fill: none;
      stroke-dasharray: 700;
      stroke-dashoffset: 700;
      animation: dashLogo 4s linear forwards; }
    .hero svg:hover path,
    .hero svg:hover circle {
      animation: dashLogo 4s linear infinite; }

.top-hello {
  background: linear-gradient(-30deg, #0052cc, #24d8cd);
  /*height: 100%;*/ }

.hello {
  width: 100%;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  display: flex;
  display: -webkit-box;
  justify-content: center;
  align-items: center; }
  .hello .hello-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
    .hello .hello-wrapper .navigation {
      text-align: center;
      width: 100%;
      position: absolute;
      bottom: 0;
      margin: 20px 0; }
      .hello .hello-wrapper .navigation a {
        font-family: 'DinProBold';
        font-weight: bold;
        font-size: 16px;
        letter-spacing: .1em;
        padding: 15px;
        text-decoration: none;
        color: white;
        background: none;
        transition: background 0.3s, color 0.3s; }
        .hello .hello-wrapper .navigation a:hover {
          color: #282c34;
          background: white;
          transition: background 0.3s, color 0.3s; }
    .hello .hello-wrapper .categories {
      text-align: center;
      width: 100%;
      position: absolute;
      top: 0%;
      margin: 0;
      z-index: 100;
      padding-top: 10px; }
      .hello .hello-wrapper .categories span {
        font-family: DinProMedium;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: .1em;
        text-transform: uppercase;
        padding: 5px;
        margin-top: 5px;
        color: white;
        display: block; }
      @media (min-width: 600px) {
        .hello .hello-wrapper .categories {
          top: 0%;
          padding-top: 0; }
          .hello .hello-wrapper .categories span {
            padding: 15px;
            margin-top: 5px;
            display: inline-block; } }
    .hello .hello-wrapper .this-is h2 {
      width: 100%;
      z-index: 100;
      text-align: center;
      top: 50%;
      transform: translate(0, 0px);
      position: absolute;
      color: white; }
  .hello .hello-copy h2 {
    font-family: 'Lato';
    color: #24d8cd; }
  .hello .hello-copy a {
    color: black;
    background: none;
    transition: background .3s, color .3s;
    text-decoration: none; }
    .hello .hello-copy a:hover {
      background: #282c34;
      color: white;
      transition: background .3s, color .3s; }

.side-menu-burg {
  display: block;
  position: fixed;
  right: 0;
  overflow: hidden;
  float: right;
  margin: 0;
  padding: 0;
  width: 48px;
  height: 48px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  background: none;
  z-index: 1000; }
  .side-menu-burg.hidden {
    display: none; }
  .side-menu-burg span {
    display: block;
    position: absolute;
    top: 22px;
    left: 10px;
    right: 10px;
    height: 4px;
    background: linear-gradient(-30deg, #0052cc, #24d8cd);
    border-radius: 4px; }
  .side-menu-burg span::before,
  .side-menu-burg span::after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(-30deg, #0052cc, #24d8cd);
    border-radius: 4px;
    content: "";
    transition-duration: 0.2s, 0.2s;
    transition-delay: 0.2s, 0s; }
  .side-menu-burg span::before {
    transition-property: top, transform;
    top: -8px; }
  .side-menu-burg span::after {
    transition-property: bottom, transform;
    bottom: -8px; }
  .side-menu-burg:hover span::before {
    top: -6px; }
  .side-menu-burg:hover span::after {
    bottom: -6px; }
  .side-menu-burg.is-active span {
    background: linear-gradient(-30deg, #0052cc, #24d8cd);
    transform: rotate(45deg);
    transition-delay: 0s, 0.2s; }
  .side-menu-burg.is-active span::before,
  .side-menu-burg.is-active span::after {
    background: white;
    transition-delay: 0s, 0.2s; }
  .side-menu-burg.is-active span::before {
    top: 0;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg); }
  .side-menu-burg.is-active span::after {
    bottom: 0;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg); }

.side-menu-burg:focus {
  outline: none; }

.side-menu {
  width: 100px;
  position: fixed;
  top: 0;
  right: -102px;
  border-left: 2px white solid;
  bottom: 0;
  transition: width .5s, background .25s;
  z-index: 10000;
  overflow-y: scroll; }
  .side-menu.open {
    width: 100%;
    right: 0;
    background: linear-gradient(-30deg, #0052cc, #24d8cd);
    transition: width .5s, background .25s; }
    .side-menu.open .menu {
      height: 100%;
      width: 100%;
      display: flex;
      display: -webkit-box;
      display: -webkit-flex;
      justify-content: center;
      align-items: center; }
      .side-menu.open .menu .options {
        width: 100%;
        text-align: center; }
        .side-menu.open .menu .options .menu-option {
          width: 100%;
          font-family: 'DinProBold';
          font-weight: bold;
          letter-spacing: .1em;
          text-transform: uppercase;
          font-size: 24px;
          margin: 0;
          padding-left: 0;
          cursor: pointer;
          background: none;
          transition: color .2s, background .2s; }
          .side-menu.open .menu .options .menu-option a {
            text-decoration: none;
            color: white;
            height: 70px;
            line-height: 70px;
            width: 100%;
            transition: color .2s; }
            .side-menu.open .menu .options .menu-option a span {
              display: inline-block; }
            .side-menu.open .menu .options .menu-option a .option-wrapper {
              display: inline-block;
              width: 100%;
              margin-left: 10px; }
          .side-menu.open .menu .options .menu-option:hover {
            background: white;
            transition: background .2s; }
            .side-menu.open .menu .options .menu-option:hover span {
              color: #282c34;
              transition: color .2s; }
            .side-menu.open .menu .options .menu-option:hover .wing1 {
              opacity: 1;
              transform: skew(0, 30deg) translate(20px, 20px); }
            .side-menu.open .menu .options .menu-option:hover .wing2 {
              opacity: 1;
              transform: skew(0deg, -30deg) translate(10px, 0px); }
        @media (min-width: 360px) and (max-width: 600px) {
          .side-menu.open .menu .options .menu-option {
            font-size: 16px; } }
        @media (min-width: 600px) and (max-width: 840px) {
          .side-menu.open .menu .options .menu-option {
            font-size: 24px; } }
  .side-menu.left {
    right: auto;
    left: 0; }
    .side-menu.left.open {
      background: #fefbf7; }
    .side-menu.left .side-menu-burg.is-active span {
      background: #fefbf7; }
    .side-menu.left .side-menu-burg.is-active span::before,
    .side-menu.left .side-menu-burg.is-active span::after {
      background: linear-gradient(-30deg, #0052cc, #24d8cd); }

.hero {
  transform: scale(0.6, 0.6); }

.contact {
  background: linear-gradient(-30deg, #0052cc, #24d8cd);
  min-height: 100%;
  position: absolute;
  width: 100%;
  padding-bottom: 60px;
  box-sizing: border-box; }
  .contact .copy {
    padding-top: 60px;
    padding-left: 0;
    width: 100%;
    max-width: none;
    color: white;
    text-align: left; }
    .contact .copy p {
      margin: 20px;
      text-align: center; }
      .contact .copy p.city {
        margin-top: 5px; }
    .contact .copy div, .contact .copy p {
      font-size: 24px;
      line-height: 32px;
      margin-bottom: 36px;
      font-family: 'DinProLight';
      color: white; }
      .contact .copy div .highlight, .contact .copy p .highlight {
        font-family: 'DinProMedium'; }
        .contact .copy div .highlight.inactive, .contact .copy p .highlight.inactive {
          color: #fefbf7;
          opacity: 0.5;
          text-decoration: line-through;
          font-family: 'DinProLight';
          margin-bottom: 0; }
      .contact .copy div a, .contact .copy p a {
        text-decoration: none;
        font-weight: bold;
        color: white;
        border-top: white 2px solid;
        border-left: white 2px solid;
        border-right: white 2px solid;
        padding: 4px 10px;
        margin-right: 10px;
        border-bottom: white 2px solid;
        transition: border 0.3s; }
        .contact .copy div a:hover, .contact .copy p a:hover {
          color: #2800d7;
          border-top: #2800d7 2px solid;
          border-left: #2800d7 2px solid;
          border-right: #2800d7 2px solid;
          border-bottom: #2800d7 2px solid;
          transition: border 0.3s, color .3s; }
        .contact .copy div a.mailto, .contact .copy p a.mailto {
          text-decoration: none;
          font-family: 'DinProLight';
          padding: 10px 0;
          margin: 10px auto;
          color: white;
          background: none;
          border: none;
          border-bottom: white 2px solid;
          transition: border 0.3s; }
          .contact .copy div a.mailto:hover, .contact .copy p a.mailto:hover {
            color: #2800d7;
            border: none;
            border-bottom: #2800d7 2px solid;
            transition: border 0.3s, color .3s; }
    @media (min-width: 600px) {
      .contact .copy p {
        font-size: 24px;
        line-height: 36px;
        text-align: left; }
        .contact .copy p.main, .contact .copy p.city {
          padding-left: 30px;
          padding-right: 30px; } }
    @media (min-width: 960px) {
      .contact .copy p.main,
      .contact .copy p.city {
        margin-left: 100px; } }
    .contact .copy .social-footer {
      width: 315px;
      height: 32px;
      clear: both;
      margin: 0 auto;
      padding-left: 65px; }
      .contact .copy .social-footer .social-icon {
        margin-top: 0px;
        margin-bottom: 0px;
        transform: scale(0.5, 0.5);
        display: inline;
        float: left;
        cursor: pointer; }
        .contact .copy .social-footer .social-icon:nth-child(1) {
          transform: scale(0.5, 0.5) translate(0px, 0); }
        .contact .copy .social-footer .social-icon:nth-child(2) {
          transform: scale(0.5, 0.5) translate(-35px, 0); }
        .contact .copy .social-footer .social-icon:nth-child(3) {
          transform: scale(0.5, 0.5) translate(-70px, 0); }
        .contact .copy .social-footer .social-icon:nth-child(4) {
          transform: scale(0.5, 0.5) translate(-105px, 0); }
        .contact .copy .social-footer .social-icon:nth-child(5) {
          transform: scale(0.5, 0.5) translate(-140px, 0); }
        .contact .copy .social-footer .social-icon path,
        .contact .copy .social-footer .social-icon circle {
          fill: white;
          transition: fill .3s; }
        .contact .copy .social-footer .social-icon:hover path {
          fill: #2800d7;
          transition: fill .3s; }
      @media (min-width: 960px) {
        .contact .copy .social-footer {
          margin-left: 110px;
          padding-left: 0; } }

.footer {
  background: radial-gradient(circle, #fefbf7, #d4d4d2);
  padding-bottom: 60px;
  margin-top: 60px; }
  .footer .logo {
    text-align: center;
    height: 100px;
    transform: scale(0.7, 0.7); }
  .footer .footer-mail {
    display: inline-block;
    font-size: 12px;
    font-family: DinProLight;
    text-align: center;
    width: 100%;
    text-decoration: none;
    color: #81898f;
    margin: 0; }
  .footer .footer-nav {
    text-align: center;
    width: 100%;
    margin: 0;
    margin-top: 20px; }
    .footer .footer-nav a {
      font-family: DinProBold;
      font-weight: bold;
      font-size: 12px;
      letter-spacing: .1em;
      padding: 10px 15px;
      text-decoration: none;
      color: #282c34;
      transition: background 0.3s, color 0.2s; }
      .footer .footer-nav a:hover {
        background: linear-gradient(-30deg, #0052cc, #24d8cd);
        color: white;
        transition: background 0.3s, color 0.2s; }
  .footer .social-footer {
    margin: 0 auto;
    text-align: center;
    width: 315px;
    height: 32px;
    clear: both; }
    .footer .social-footer .social-icon {
      margin-top: 0px;
      margin-bottom: 0px;
      transform: scale(0.5, 0.5);
      display: inline;
      float: left;
      cursor: pointer; }
      .footer .social-footer .social-icon:nth-child(1) {
        transform: scale(0.5, 0.5) translate(70px, 0); }
      .footer .social-footer .social-icon:nth-child(2) {
        transform: scale(0.5, 0.5) translate(35px, 0); }
      .footer .social-footer .social-icon:nth-child(4) {
        transform: scale(0.5, 0.5) translate(-35px, 0); }
      .footer .social-footer .social-icon:nth-child(5) {
        transform: scale(0.5, 0.5) translate(-70px, 0); }
      .footer .social-footer .social-icon path,
      .footer .social-footer .social-icon circle {
        fill: #0052cc;
        transition: fill .3s; }
      .footer .social-footer .social-icon:hover path {
        fill: #24d8cd;
        transition: fill .3s; }

.about {
  width: 80%;
  max-width: 1200px; }
  .about .copy img {
    border-radius: 10px;
    margin: 20px auto;
    display: block;
    max-width: 800px; }
  .about .copy p {
    margin: 20px auto; }

/*
Other components
*/
.projects-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto; }
  .projects-wrapper .one-project-thumbnail-wrapper {
    padding: 0;
    margin-bottom: 80px; }
    .projects-wrapper .one-project-thumbnail-wrapper .one-project-thumbnail {
      cursor: pointer;
      position: relative; }
      .projects-wrapper .one-project-thumbnail-wrapper .one-project-thumbnail .thumbnail {
        border: #efefef 1px solid;
        max-height: 300px;
        width: 100%;
        overflow: hidden;
        filter: none;
        background: rgba(40, 0, 215, 0.05);
        transition: filter .5s, background .3s; }
        .projects-wrapper .one-project-thumbnail-wrapper .one-project-thumbnail .thumbnail img {
          width: 100%; }
      .projects-wrapper .one-project-thumbnail-wrapper .one-project-thumbnail .butterfly {
        position: relative;
        top: 50px;
        opacity: 0; }
      .projects-wrapper .one-project-thumbnail-wrapper .one-project-thumbnail .title {
        padding: 10px 0;
        padding-left: 5%;
        padding-right: 5%;
        text-transform: uppercase;
        letter-spacing: .1em;
        font-family: DinProBold;
        font-size: 24px;
        color: #282c34;
        position: absolute;
        top: 50%;
        width: 90%;
        filter: blur(10px);
        text-align: center;
        opacity: 0;
        z-index: 10;
        transition: opacity .3s; }
      .projects-wrapper .one-project-thumbnail-wrapper .one-project-thumbnail .loading {
        opacity: 0; }
    .projects-wrapper .one-project-thumbnail-wrapper:hover .thumbnail {
      filter: blur(6px);
      transition: filter .3s; }
      .projects-wrapper .one-project-thumbnail-wrapper:hover .thumbnail img {
        opacity: .3;
        transition: opacity .3s; }
    .projects-wrapper .one-project-thumbnail-wrapper:hover .loading {
      opacity: 1;
      transition: opacity .3s; }
    .projects-wrapper .one-project-thumbnail-wrapper:hover .title {
      opacity: 1;
      filter: none;
      display: inline-block;
      transition: opacity .3s, filter .6s;
      transform: translateY(-50%); }
    @media (min-width: 360px) and (max-width: 840px) {
      .projects-wrapper .one-project-thumbnail-wrapper .one-project-thumbnail .thumbnail {
        filter: none; }
        .projects-wrapper .one-project-thumbnail-wrapper .one-project-thumbnail .thumbnail img {
          opacity: .3; }
      .projects-wrapper .one-project-thumbnail-wrapper .one-project-thumbnail .butterfly {
        opacity: 1; }
      .projects-wrapper .one-project-thumbnail-wrapper .one-project-thumbnail .title {
        opacity: 1;
        filter: none;
        display: inline-block;
        transform: translateY(-50%); } }

.next,
.prev {
  width: 48px;
  height: 48px;
  cursor: pointer; }
  .next span,
  .prev span {
    display: block;
    position: absolute;
    top: 22px;
    left: 10px;
    right: 10px;
    height: 0px;
    background: linear-gradient(-30deg, #0052cc, #24d8cd);
    border-radius: 4px;
    opacity: 0.8;
    transition: .3s; }
  .next span::before,
  .next span::after,
  .prev span::before,
  .prev span::after {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    width: 70%;
    height: 4px;
    background: linear-gradient(-30deg, #0052cc, #24d8cd);
    border-radius: 4px;
    content: "";
    transition-duration: 0.2s, 0.2s;
    transition-delay: 0.2s, 0s; }
  .next span::before,
  .prev span::before {
    transform: rotate(30deg) translate(2px, -6px); }
  .next span::after,
  .prev span::after {
    transform: rotate(-30deg) translate(2px, 6px); }
  .next:hover span::before,
  .next:hover span::after,
  .next:hover span,
  .prev:hover span::before,
  .prev:hover span::after,
  .prev:hover span {
    opacity: 1;
    transition: .3s; }

.prev span::before {
  transform: rotate(30deg) translate(0px, 5px); }

.prev span::after {
  transform: rotate(-30deg) translate(0px, -5px); }

.one-project-detail {
  padding: 40px;
  color: #282c34;
  max-width: 800px;
  width: 80%;
  margin: 0 auto;
  height: 100%;
  margin-top: 5%; }
  .one-project-detail .header {
    margin: 60px 0; }
  .one-project-detail h3.author {
    text-transform: capitalize;
    color: #81898f;
    font-family: 'MerriweatherLight';
    font-style: italic;
    font-size: 16px; }
  .one-project-detail h1, .one-project-detail h3 {
    margin: 0; }
  .one-project-detail img {
    width: 100%;
    margin: 20px 0; }
  .one-project-detail .tags {
    text-align: center; }
    .one-project-detail .tags span.project-tag {
      font-size: 12px;
      color: white;
      /*background: $linearBGgrad;*/
      color: black;
      font-style: italic;
      line-height: 12px;
      padding: 8px;
      margin-right: 3px;
      display: inline-block;
      margin-bottom: 10px; }
      .one-project-detail .tags span.project-tag::after {
        content: ','; }
      .one-project-detail .tags span.project-tag:last-child::after {
        content: ''; }
  .one-project-detail > p {
    margin-bottom: 180px; }
  .one-project-detail .next,
  .one-project-detail .prev {
    position: fixed;
    font-size: 36px;
    top: calc(50% - 48px); }
  .one-project-detail .next {
    right: 0; }
  .one-project-detail .prev {
    left: 0; }
  .one-project-detail pre {
    padding: 20px;
    background: #fefbf7;
    overflow-x: scroll;
    border: solid 1px #d4d4d2; }
  .one-project-detail .project-dots {
    text-align: center; }
    .one-project-detail .project-dots .project-dot {
      width: 10px;
      height: 10px;
      border-radius: 10px;
      background: linear-gradient(-30deg, #0052cc, #24d8cd);
      display: inline-block;
      margin: 0px 2px;
      opacity: .3;
      transition: opacity 0.4s; }
      .one-project-detail .project-dots .project-dot.active {
        opacity: 1;
        transition: opacity 0.4s; }

/*
Main styles
*/
html, body {
  height: 100%;
  width: 100%; }

::selection {
  background: #2800d7;
  color: white; }

body {
  background: #fefbf7;
  color: #282c34;
  margin: 0;
  font-family: Merriweather; }
  body.noscroll {
    overflow: hidden; }
  body section {
    min-height: 100%;
    margin: 0 auto;
    display: block;
    padding-left: 20px;
    padding-right: 20px; }
    @media (min-width: 600px) and (max-width: 840px) {
      body section {
        padding-left: 40px;
        padding-right: 40px; } }
    @media (min-width: 840px) {
      body section {
        padding-left: 100px;
        padding-right: 100px; } }
    body section.about, body section.work, body section.jokesart, body section.journal {
      padding-top: 50px; }
      @media (min-width: 600px) {
        body section.about, body section.work, body section.jokesart, body section.journal {
          padding-top: 50px; } }
    body section .horizontal-menu {
      text-align: center;
      margin-top: 20px; }
      body section .horizontal-menu a {
        text-decoration: none;
        font-size: 12px;
        color: #282c34;
        padding: 0 0 3px 0;
        margin: 0 10px;
        border-bottom: 0px #0052cc solid;
        transition: color 0.4s, border-bottom 0.4s; }
        body section .horizontal-menu a.selected {
          color: #0052cc;
          border-bottom: 2px #0052cc solid; }
        body section .horizontal-menu a:hover {
          color: #24d8cd;
          border-bottom: 2px #24d8cd solid;
          transition: color 0.4s, border-bottom 0.4s; }
  body h1 {
    font-size: 32px; }
  body h2 {
    font-size: 24px;
    line-height: 36px;
    font-family: 'DinProLight';
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: .2em;
    text-align: center; }
  body p {
    max-width: 800px;
    font-family: 'MerriweatherLight';
    line-height: 36px;
    font-size: 16px; }
  body p a {
    text-decoration: none;
    color: #0052cc;
    padding-bottom: 3px;
    border-bottom: 2px #0052cc solid; }
    body p a:hover {
      color: #24d8cd;
      border-bottom: 2px #24d8cd solid; }
  body .copy {
    padding: 0px 0 30px 0;
    margin: 0 auto;
    padding-left: 0;
    margin-left: 0;
    font-family: 'MerriweatherLight';
    line-height: 36px;
    font-size: 16px; }
    body .copy p {
      margin: 20px auto; }
  @media (min-width: 600px) {
    body h1 {
      font-size: 32px; }
    body h2 {
      font-size: 24px; } }
  @media (min-width: 840px) {
    body h1 {
      font-size: 32px; }
    body h2 {
      font-size: 24px; } }