/* Set variables */
/* Import CSS*/
/* Add Mixin for width */
/* Add Mixin for height */
/* Adapt width in Windows Modern UI */
@-ms-viewport {
  width: device-width !important; }

/* Make colors print in Chrome */
:root {
  -webkit-print-color-adjust: exact;
  -webkit-appearance: none; }

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

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

ul {
  list-style: none; }

img {
  max-width: 100%; }

/* Fix sizing */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

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

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px #fff inset;
  /* Change the color to your own background color */
  -webkit-text-fill-color: #333; }

input:-webkit-autofill:focus {
  -webkit-box-shadow: #000,0 0 0 50px #fff inset;
  -webkit-text-fill-color: #333; }

div.contact-me label a.email span {
  background-image: url(../layout/icons/icon-mail-white-128x128.svg); }

div.contact-me label a.linkedin span {
  background-image: url(../layout/icons/icon-linkedin-white-128x128.svg); }

div.contact-me label a.twitter span {
  background-image: url(../layout/icons/icon-twitter-white-128x128.svg); }

div.contact-me label a.dribbble span {
  background-image: url(../layout/icons/icon-dribbble-white-128x128.svg); }

div.image-award {
  background-size: cover;
  -webkit-box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
  width: 96px;
  height: 96px;
  border-radius: 48px;
  margin: -32px -12px 0 0;
  float: right; }
  @media (min-width: 480px) {
    div.image-award {
      width: 96px;
      height: 96px;
      border-radius: 48px;
      margin: -32px -12px 0 0; } }
  @media (min-width: 768px) {
    div.image-award {
      width: 96px;
      height: 96px;
      border-radius: 48px;
      margin: -32px -16px 0 0; } }
  @media (min-width: 1024px) {
    div.image-award {
      width: 128px;
      height: 128px;
      border-radius: 64px;
      margin: -24px -24px 0 0; } }
  @media (min-width: 1400px) {
    div.image-award {
      width: 192px;
      height: 192px;
      border-radius: 96px;
      margin: -64px -64px 0 0; } }
  div.image-award.inuse {
    background-image: url(../layout/awards/inuse_ux_award_2014.png); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-award.inuse {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/awards/inuse_ux_award_2014.png");
        background-size: cover cover; } }
  div.image-award.topp100-2011 {
    background-image: url(../layout/awards/topp100-2011.png); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-award.topp100-2011 {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/awards/topp100-2011.png");
        background-size: cover cover; } }
  div.image-award.topp100-2012 {
    background-image: url(../layout/awards/topp100-2012.png); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-award.topp100-2012 {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/awards/topp100-2012.png");
        background-size: cover cover; } }
  div.image-award.app-store-featured {
    background-image: url(../layout/awards/app-store-featured.png); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-award.app-store-featured {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/awards/app-store-featured.png");
        background-size: cover cover; } }

div.image-large {
  height: 280px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  align-self: center;
  border-radius: 14px;
  margin: 14px 0 14px 0; }
  @media (min-width: 480px) {
    div.image-large {
      height: 320px;
      border-radius: 18px; } }
  @media (min-width: 768px) {
    div.image-large {
      height: 480px;
      border-radius: 18px; } }
  @media (min-width: 1024px) {
    div.image-large {
      height: 580px;
      border-radius: 18px; } }
  @media (min-width: 1400px) {
    div.image-large {
      height: 680px;
      border-radius: 18px; } }
  div.image-large.template {
    background-image: url(../layout/highlite.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.template {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/highlite@2x.jpg");
        background-size: cover cover; } }
  div.image-large.zlantar-icons {
    background-image: url(../layout/zlantar/icons.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.zlantar-icons {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/zlantar/icons@2x.jpg");
        background-size: cover cover; } }
  div.image-large.bankbetyg-banklist {
    background-image: url(../layout/bankbetyg/banklist.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.bankbetyg-banklist {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/bankbetyg/banklist@2x.jpg");
        background-size: cover cover; } }
  div.image-large.bankbetyg-bankstats {
    background-image: url(../layout/bankbetyg/bankstats.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.bankbetyg-bankstats {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/bankbetyg/bankstats@2x.jpg");
        background-size: cover cover; } }
  div.image-large.bankbetyg-compare {
    background-image: url(../layout/bankbetyg/compare.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.bankbetyg-compare {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/bankbetyg/compare@2x.jpg");
        background-size: cover cover; } }
  div.image-large.bankbetyg-logo {
    background-image: url(../layout/bankbetyg/logo.png); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.bankbetyg-logo {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/bankbetyg/logo@2x.png");
        background-size: cover cover; } }
  div.image-large.zlantar-logo {
    background-image: url(../layout/zlantar/logo.png); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.zlantar-logo {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/zlantar/logo@2x.png");
        background-size: cover cover; } }
  div.image-large.zlantar-overview {
    background-image: url(../layout/zlantar/overview.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.zlantar-overview {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/zlantar/overview@2x.jpg");
        background-size: cover cover; } }
  div.image-large.zlantar-dark-mode {
    background-image: url(../layout/zlantar/dark-mode.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.zlantar-dark-mode {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/zlantar/dark-mode@2x.jpg");
        background-size: cover cover; } }
  div.image-large.zlantar-economy {
    background-image: url(../layout/zlantar/economy.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.zlantar-economy {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/zlantar/economy@2x.jpg");
        background-size: cover cover; } }
  div.image-large.kulforbarn-logo-field {
    background-image: url(../layout/kulforbarn/logo-field.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.kulforbarn-logo-field {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/kulforbarn/logo-field@2x.jpg");
        background-size: cover cover; } }
  div.image-large.skills-designsystem {
    background-image: url(../layout/skills/design-system@2x.gif); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.skills-designsystem {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/skills/design-system@2x.gif");
        background-size: cover cover; } }
  div.image-large.skills-scss {
    background-image: url(../layout/skills/scss.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.skills-scss {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/skills/scss@2x.jpg");
        background-size: cover cover; } }
  div.image-large.skills-ui {
    background-image: url(../layout/skills/ui.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.skills-ui {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/skills/ui@2x.jpg");
        background-size: cover cover; } }
  div.image-large.skills-animation {
    background-image: url(../layout/skills/animation.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.skills-animation {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/skills/animation@2x.jpg");
        background-size: cover cover; } }
  div.image-large.smartbudget-logo {
    background-image: url(../layout/smartbudget/logo.png); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.smartbudget-logo {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/smartbudget/logo@2x.png");
        background-size: cover cover; } }
  div.image-large.smartbudget-overview {
    background-image: url(../layout/smartbudget/overview.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.smartbudget-overview {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/smartbudget/overview@2x.jpg");
        background-size: cover cover; } }
  div.image-large.smartbudget-kassabok {
    background-image: url(../layout/smartbudget/kassabok.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.smartbudget-kassabok {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/smartbudget/kassabok@2x.jpg");
        background-size: cover cover; } }
  div.image-large.teknikveckan-logo {
    background-image: url(../layout/teknikveckan/logo.png); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.teknikveckan-logo {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/teknikveckan/logo@2x.png");
        background-size: cover cover; } }
  div.image-large.loan {
    background-image: url(../layout/illustrations/loan.png);
    background-color: #ffffff; }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.loan {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/illustrations/loan@2x.png");
        background-size: cover cover; } }
  div.image-large.dancing {
    background-image: url(../layout/illustrations/dancing.jpg);
    background-color: #ffffff; }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.dancing {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/illustrations/dancing@2x.jpg");
        background-size: cover cover; } }
  div.image-large.space-club {
    background-image: url(../layout/illustrations/space_club.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.space-club {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/illustrations/space_club.jpg");
        background-size: cover cover; } }
  div.image-large.ripley {
    background-image: url(../layout/illustrations/ripley.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-large.ripley {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/illustrations/ripley.jpg");
        background-size: cover cover; } }

div.animation-large {
  width: 100%;
  align-self: center;
  border-radius: 14px;
  margin: 14px 0 14px 0;
  padding: 28px 0 28px 0;
  text-align: center; }
  div.animation-large.zlantar-icon {
    background-color: #e5e3e6; }
    div.animation-large.zlantar-icon div.animation {
      margin: 21px auto;
      width: 256px;
      height: 256px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url(../animations/zlantar/z-icon-520x520.gif); }
      @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
        div.animation-large.zlantar-icon div.animation {
          /* on retina, use image that's scaled by 2 */
          background-image: url("../animations/zlantar/z-icon-520x520.gif");
          background-size: contain contain; } }
      @media (min-width: 480px) {
        div.animation-large.zlantar-icon div.animation {
          width: 320px;
          height: 320px; } }
      @media (min-width: 768px) {
        div.animation-large.zlantar-icon div.animation {
          width: 320px;
          height: 320px; } }
      @media (min-width: 1024px) {
        div.animation-large.zlantar-icon div.animation {
          width: 360px;
          height: 360px; } }
      @media (min-width: 1400px) {
        div.animation-large.zlantar-icon div.animation {
          width: 380px;
          height: 380px; } }
  div.animation-large.zlantar-zia {
    background-color: #ffffff; }
    div.animation-large.zlantar-zia div.animation {
      margin: 21px auto;
      width: 256px;
      height: 256px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url(../animations/zlantar/zia-overview-540x716.gif); }
      @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
        div.animation-large.zlantar-zia div.animation {
          /* on retina, use image that's scaled by 2 */
          background-image: url("../animations/zlantar/zia-overview-540x716.gif");
          background-size: contain contain; } }
      @media (min-width: 480px) {
        div.animation-large.zlantar-zia div.animation {
          width: 320px;
          height: 320px; } }
      @media (min-width: 768px) {
        div.animation-large.zlantar-zia div.animation {
          width: 320px;
          height: 320px; } }
      @media (min-width: 1024px) {
        div.animation-large.zlantar-zia div.animation {
          width: 360px;
          height: 360px; } }
      @media (min-width: 1400px) {
        div.animation-large.zlantar-zia div.animation {
          width: 380px;
          height: 380px; } }

div.iphone {
  margin: 14px 0 14px 0; }
  div.iphone.zlantar-graph {
    background-image: url(../animations/zlantar/graph.gif); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.iphone.zlantar-graph {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../animations/zlantar/graph.gif");
        background-size: cover cover; } }
  div.iphone.zlantar-accounts {
    background-image: url(../animations/zlantar/accounts.gif); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.iphone.zlantar-accounts {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../animations/zlantar/accounts.gif");
        background-size: cover cover; } }
  div.iphone.zlantar-creditscore {
    background-image: url(../animations/zlantar/creditscore.gif); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.iphone.zlantar-creditscore {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../animations/zlantar/creditscore.gif");
        background-size: cover cover; } }
  div.iphone.zlantar-receipt {
    background-image: url(../animations/zlantar/receipt.gif); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.iphone.zlantar-receipt {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../animations/zlantar/receipt.gif");
        background-size: cover cover; } }

div.app-icon {
  margin: 14px 0 14px 0; }
  div.app-icon.kfb-icon {
    background-image: url(../layout/kulforbarn/kfb-icon-512x512.png); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.app-icon.kfb-icon {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/kulforbarn/kfb-icon-512x512.png");
        background-size: cover cover; } }
  div.app-icon.kfb-vinter-icon {
    background-image: url(../layout/kulforbarn/kfb-vinter-icon-512x512.png); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.app-icon.kfb-vinter-icon {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/kulforbarn/kfb-vinter-icon-512x512.png");
        background-size: cover cover; } }
  div.app-icon.kfb-pussel-icon {
    background-image: url(../layout/kulforbarn/kfb-pusssel-icon-512x512.png); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.app-icon.kfb-pussel-icon {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/kulforbarn/kfb-pussel-icon-512x512.png");
        background-size: cover cover; } }

div.iphone-landscape {
  margin: 14px 0 14px 0; }
  div.iphone-landscape.kfb-menu {
    background-image: url(../layout/kulforbarn/menu.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.iphone-landscape.kfb-menu {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/kulforbarn/menu.jpg");
        background-size: cover cover; } }
  div.iphone-landscape.kfb-pussel-1 {
    background-image: url(../layout/kulforbarn/pussel-1.jpg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.iphone-landscape.kfb-pussel-1 {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/kulforbarn/pussel-1.jpg");
        background-size: cover cover; } }
  div.iphone-landscape.kfb-pussel-2 {
    background-image: url(../layout/kfb/pussel-2.jpg.png); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.iphone-landscape.kfb-pussel-2 {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/kulforbarn/pussel-2.jpg");
        background-size: cover cover; } }

div.motion {
  margin: 14px 0 14px 0; }
  div.motion.bankid-sign {
    background-image: url(../animations/zlantar/bankid-sign-500x500.gif); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.motion.bankid-sign {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../animations/zlantar/bankid-sign-500x500.gif");
        background-size: cover cover; } }
  div.motion.zia-connect {
    background-image: url(../animations/zlantar/zia-connect-500x500.gif); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.motion.zia-connect {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../animations/zlantar/zia-connect-500x500.gif");
        background-size: cover cover; } }
  div.motion.zia-remind {
    background-image: url(../animations/zlantar/zia-remind-500x500.gif); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.motion.zia-remind {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../animations/zlantar/zia-remind-500x500.gif");
        background-size: cover cover; } }
  div.motion.zia-shopping {
    background-image: url(../animations/zlantar/zia-shopping-500x500.gif); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.motion.zia-shopping {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../animations/zlantar/zia-shopping-500x500.gif");
        background-size: cover cover; } }

div.image-logo {
  background-size: contain;
  width: 183px;
  height: 32px;
  margin: 21px auto; }
  @media (min-width: 1400px) {
    div.image-logo {
      width: 732px;
      height: 126px; } }
  div.image-logo.nitzdesign {
    background-image: url(../layout/nitzdesign-white.svg); }
    @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
      div.image-logo.nitzdesign {
        /* on retina, use image that's scaled by 2 */
        background-image: url("../layout/nitzdesign-white.svg");
        background-size: cover cover; } }

html {
  height: 100%;
  /* background: -webkit-linear-gradient(#000000, #292929); */ }

body {
  font-family: "Source Sans Pro", sans-serif;
  color: #eaeaea;
  font-weight: 300;
  line-height: 1;
  -webkit-text-size-adjust: 100%;
  min-width: 320px;
  -webkit-touch-callout: none !important;
  background-color: #000; }

bold {
  font-weight: 600; }

/* Default text style */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  margin: 0;
  color: #eaeaea; }
  h1 a,
  h2 a,
  h3 a,
  h4 a,
  h5 a,
  h6 a {
    color: #eaeaea;
    text-decoration: none; }
    h1 a:link,
    h2 a:link,
    h3 a:link,
    h4 a:link,
    h5 a:link,
    h6 a:link {
      text-decoration: none; }
    h1 a:visited,
    h2 a:visited,
    h3 a:visited,
    h4 a:visited,
    h5 a:visited,
    h6 a:visited {
      text-decoration: none; }
    h1 a:hover,
    h2 a:hover,
    h3 a:hover,
    h4 a:hover,
    h5 a:hover,
    h6 a:hover {
      text-decoration: none; }

h1 {
  font-size: 38px;
  line-height: 43px;
  padding: 3px 0 14px 0; }
  @media (min-width: 1024px) {
    h1 {
      font-size: 48px;
      line-height: 53px;
      padding: 5px 0 21px 0; } }
  @media (min-width: 1400px) {
    h1 {
      font-size: 60px;
      line-height: 65px;
      padding: 5px 0 28px 0; } }

h2 {
  font-size: 24px;
  line-height: 27px;
  padding: 3px 0 7px 0; }
  @media (min-width: 1024px) {
    h2 {
      font-size: 25px;
      line-height: 29px;
      padding: 4px 0 7px 0; } }
  @media (min-width: 1400px) {
    h2 {
      font-size: 31px;
      line-height: 31px;
      padding: 5px 0 20px 0; } }

h3 {
  font-size: 21px;
  line-height: 25px;
  padding: 3px 0 7px 0; }
  @media (min-width: 1024px) {
    h3 {
      font-size: 23px;
      line-height: 27px;
      padding: 4px 0 7px 0; } }
  @media (min-width: 1400px) {
    h3 {
      font-size: 29px;
      line-height: 29px;
      padding: 5px 0 16px 0; } }

h4 {
  font-size: 19px;
  line-height: 23px;
  padding: 3px 0 7px 0; }
  @media (min-width: 1024px) {
    h4 {
      font-size: 21px;
      line-height: 25px;
      padding: 4px 0 7px 0; } }
  @media (min-width: 1400px) {
    h4 {
      font-size: 27px;
      line-height: 27px;
      padding: 5px 0 13px 0; } }

h5 {
  font-size: 17px;
  line-height: 21px;
  padding: 3px 0 7px 0; }
  @media (min-width: 1024px) {
    h5 {
      font-size: 19px;
      line-height: 23px;
      padding: 4px 0 7px 0; } }
  @media (min-width: 1400px) {
    h5 {
      font-size: 25px;
      line-height: 25px;
      padding: 5px 0 10px 0; } }

h6 {
  font-size: 15px;
  line-height: 19px;
  padding: 3px 0 7px 0; }
  @media (min-width: 1024px) {
    h6 {
      font-size: 17px;
      line-height: 21px;
      padding: 4px 0 7px 0; } }
  @media (min-width: 1400px) {
    h6 {
      font-size: 23px;
      line-height: 23px;
      padding: 5px 0 7px 0; } }

/* Default paragraph */
p {
  font-size: 17px;
  line-height: 22px;
  padding: 2px 0 14px 0;
  font-weight: 400;
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  color: #eaeaea; }
  @media (min-width: 1024px) {
    p {
      font-size: 20px;
      line-height: 25px;
      padding: 3px 0 21px 0; } }
  @media (min-width: 1400px) {
    p {
      font-size: 23px;
      line-height: 28px;
      padding: 4px 0 28px 0; } }
  p a {
    white-space: nowrap;
    color: #eaeaea; }

div.section {
  display: flex;
  justify-content: center;
  padding: 21px 0 21px; }
  @media (min-width: 1024px) {
    div.section {
      padding: 28px 0 28px; } }
  @media (min-width: 1400px) {
    div.section {
      padding: 35px 0 35px; } }
  div.section div.content {
    max-width: 1280px;
    display: flex;
    flex-direction: column; }
    div.section div.content .row {
      flex-direction: column;
      display: flex;
      justify-content: space-between; }
      @media (min-width: 768px) {
        div.section div.content .row {
          flex-direction: row; } }
      div.section div.content .row.more-images {
        padding: 0 14px 0 14px; }
        @media (min-width: 768px) {
          div.section div.content .row.more-images {
            padding: 0 21px 0 21px; } }
        @media (min-width: 1024px) {
          div.section div.content .row.more-images {
            padding: 0 35px 0 35px; } }
        div.section div.content .row.more-images .column {
          display: flex;
          justify-content: space-between;
          flex-grow: 0;
          flex-direction: column;
          padding: 0; }
      div.section div.content .row.more-images-temp {
        padding: 0 14px 0 14px; }
        @media (min-width: 768px) {
          div.section div.content .row.more-images-temp {
            padding: 0 21px 0 21px; } }
        @media (min-width: 1024px) {
          div.section div.content .row.more-images-temp {
            padding: 0 35px 0 35px; } }
        div.section div.content .row.more-images-temp .column {
          display: flex;
          justify-content: space-between;
          flex-grow: 0;
          flex-direction: column;
          padding: 0; }
      div.section div.content .row .column {
        display: flex;
        justify-content: space-between;
        flex-grow: 1;
        flex-direction: column;
        padding: 0 14px 0 14px; }
        @media (min-width: 768px) {
          div.section div.content .row .column {
            padding: 0 21px 0 21px; } }
        @media (min-width: 1024px) {
          div.section div.content .row .column {
            padding: 0 35px 0 35px; } }
        div.section div.content .row .column.description {
          flex: 1; }
          @media (min-width: 1024px) {
            div.section div.content .row .column.description {
              flex: 2; } }
        div.section div.content .row .column.tags {
          flex: 1;
          justify-content: flex-start; }
          @media (min-width: 1024px) {
            div.section div.content .row .column.tags {
              flex: 1.5; } }
        div.section div.content .row .column.contact {
          flex: 1;
          justify-content: flex-start; }
          @media (min-width: 1024px) {
            div.section div.content .row .column.contact {
              flex: 1.5; } }
    div.section div.content.more-padding {
      padding: 3px 14px 3px 14px; }
      @media (min-width: 1024px) {
        div.section div.content.more-padding {
          padding: 7px 21px 7px 21px; } }
      @media (min-width: 1400px) {
        div.section div.content.more-padding {
          padding: 14px 28px 14px 28px; } }

img {
  align-self: center; }

div.iphone {
  width: 204px;
  height: 442px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  align-self: center;
  border-radius: 18px; }
  @media (min-width: 768px) {
    div.iphone {
      width: 220px;
      height: 477px;
      border-radius: 12px; } }
  @media (min-width: 1024px) {
    div.iphone {
      width: 280px;
      height: 607px;
      border-radius: 18px; } }

div.motion {
  width: 256px;
  height: 256px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  align-self: center;
  border-radius: 18px; }
  @media (min-width: 768px) {
    div.motion {
      width: 103px;
      height: 103px;
      border-radius: 12px; } }
  @media (min-width: 1024px) {
    div.motion {
      width: 204px;
      height: 204px;
      border-radius: 18px; } }

div.iphone-landscape {
  width: 280px;
  height: 158px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  align-self: center;
  border-radius: 14px; }
  @media (min-width: 768px) {
    div.iphone-landscape {
      width: 250px;
      height: 141px;
      border-radius: 14px; } }
  @media (min-width: 1024px) {
    div.iphone-landscape {
      width: 300px;
      height: 169px;
      border-radius: 14px; } }
  @media (min-width: 1400px) {
    div.iphone-landscape {
      width: 380px;
      height: 214px;
      border-radius: 21px; } }

div.app-icon {
  width: 204px;
  height: 204px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  align-self: center;
  border-radius: 36px; }
  @media (min-width: 768px) {
    div.app-icon {
      width: 103px;
      height: 103px;
      border-radius: 24px; } }
  @media (min-width: 1024px) {
    div.app-icon {
      width: 204px;
      height: 204px;
      border-radius: 36px; } }

div.tag-cloude label {
  color: #ffffff;
  padding: 7px 14px 7px 14px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 30px;
  display: inline-block;
  margin: 0px 5px 8px 0;
  border: 2px solid #fff;
  background-color: #1a1d20; }
  @media (min-width: 1024px) {
    div.tag-cloude label {
      font-size: 20px; } }
  @media (min-width: 1400px) {
    div.tag-cloude label {
      font-size: 23px; } }

div.contact-me label {
  display: block;
  margin: 0px 5px 8px 0; }
  @media (min-width: 1024px) {
    div.contact-me label {
      font-size: 20px; } }
  @media (min-width: 1400px) {
    div.contact-me label {
      font-size: 23px; } }
  div.contact-me label a {
    border: 2px solid #fff;
    padding: 10px;
    display: inline-block;
    color: #ffffff;
    padding: 7px 14px 7px 14px;
    font-size: 17px;
    line-height: 24px;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    background-color: #1a1d20; }
    @media (min-width: 1024px) {
      div.contact-me label a {
        font-size: 20px;
        line-height: 28px; } }
    @media (min-width: 1400px) {
      div.contact-me label a {
        font-size: 23px;
        line-height: 30px; } }
    div.contact-me label a.linkedin {
      background-color: #3077b0;
      border-color: #3077b0; }
    div.contact-me label a.twitter {
      background-color: #51a8db;
      border-color: #51a8db; }
    div.contact-me label a.dribbble {
      background-color: #da5988;
      border-color: #b43561; }
    div.contact-me label a span {
      display: block;
      float: left;
      width: 24px;
      height: 24px;
      margin: 0px 7px 0 0; }
      @media (min-width: 1024px) {
        div.contact-me label a span {
          width: 28px;
          height: 28px;
          margin: 0px 7px 0 0; } }
      @media (min-width: 1400px) {
        div.contact-me label a span {
          width: 32px;
          height: 32px;
          margin: 0px 7px 0 0; } }

#zia-hi {
  width: 100px;
  align-self: center;
  margin: 0 auto; }

.text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  list-style: none;
  border-bottom: 0; }

.text.hidden {
  border-bottom: 1px solid #fff; }

.text li {
  display: inline-block;
  float: left;
  font-weight: 700;
  font-size: 2em;
  color: #fff;
  opacity: 1;
  transition: all 0.5s ease-in-out;
  max-width: 2em; }

.text.hidden li.spaced {
  padding-left: 0; }

.text li.spaced {
  padding-left: 0.5em; }

.text.hidden li.ghost {
  opacity: 0;
  max-width: 0; }

div.theme-kulforbarn h1, div.theme-kulforbarn h2, div.theme-kulforbarn h3, div.theme-kulforbarn h4, div.theme-kulforbarn h5, div.theme-kulforbarn h6 {
  background: -webkit-linear-gradient(#13ff80, #039a49);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

div.theme-zlantar h1, div.theme-zlantar h2, div.theme-zlantar h3, div.theme-zlantar h4, div.theme-zlantar h5, div.theme-zlantar h6 {
  background: -webkit-linear-gradient(#13e3e7, #1d7196);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }