@charset "UTF-8";
body {
  text-rendering: optimizeLegibility; }

a {
  color: #08c;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0);
  transition: 1s; }
  a:hover {
    transition: 0.42s;
    border-bottom: 1px dotted #08c; }

#af:after {
  content: ".se";
  margin-right: 3px;
  font-size: 90%; }

.add-se:after {
  content: ".se";
  font-size: 90%; }

@keyframes slideDown {
  0% {
    margin-top: -100vh; }
  30% {
    margin-top: -13vh; }
  100% {
    margin-top: 0vh; } }
@keyframes slideUp {
  0% {
    margin-top: 0; }
  100% {
    margin-top: -100vh; } }
@keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1.2em;
  margin-right: 0.2em;
  text-align: center;
  /* For safety - reset parent styles, that can break glyph codes */
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3) */ }
  p [class^="icon-"]:before, p [class*=" icon-"]:before {
    margin-left: 0.1em;
    margin-right: 0.4em;
    font-size: 1rem; }

p [class*=" icon-only"] {
  font-size: 0; }

.icon-code:before {
  content: ""; }

.icon-beaker:before {
  content: ""; }

.icon-clock:before {
  content: ""; }

.icon-feather:before {
  content: ""; }

.icon-camera:before {
  content: ""; }

.icon-github:before {
  content: ""; }

.icon-flag:before {
  content: ""; }

.icon-location:before {
  content: ""; }

.icon-megaphone:before {
  content: ""; }

.icon-cloud:before {
  content: ""; }

.icon-gplus:before {
  content: ""; }

.icon-bucket:before {
  content: ""; }

.icon-twitter:before {
  content: ""; }

.icon-globe:before {
  content: ""; }

.icon-stackoverflow:before {
  content: ""; }

.icon-emo-coffee:before {
  content: ""; }

.icon-camera-alt:before {
  content: ""; }

.icon-camera-1:before {
  content: ""; }

.icon-motorcycle:before {
  content: ""; }

.icon-anon:before {
  content: ""; }

.icon-locus:before {
  content: ""; }

.icon-ruby:before {
  content: ""; }

.icon-tree:before {
  content: ""; }

.icon-food:before {
  content: ""; }

.icon-shop:before {
  content: ""; }

.icon-tint:before {
  content: ""; }

.icon-book:before {
  content: ""; }

.icon-barcode:before {
  content: ""; }

.icon-movie-historic:before {
  content: ""; }

.icon-earth-globe:before {
  content: ""; }

.icon-road-pointer:before {
  content: ""; }

.icon-cocktail-with-straw:before {
  content: ""; }

.icon-hot-soup:before {
  content: ""; }

body {
  background: #fff; }

header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: column;
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
  z-index: 20; }
  header img {
    margin: 0 0 4rem; }
  header p {
    margin: 0 auto 1rem;
    max-width: 36rem; }
    header p:first-child {
      padding-right: 3rem; }
  header a {
    text-decoration: none; }

section {
  background: #fff;
  z-index: 20;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
  max-width: 540px; }

article {
  margin-bottom: 4.2rem; }

#top-lists ul li, #links ul li {
  font-size: 0.9rem;
  padding-left: 5px; }

footer {
  text-align: center;
  margin: 3rem auto; }

#projekt, #currently {
  font-weight: 100; }
  #projekt h2, #currently h2 {
    font-size: 1rem; }

#currently {
  margin: 0 auto; }
  #currently ul {
    margin: 0;
    padding: 0;
    list-style: none; }
  #currently li {
    font-size: 1rem;
    margin-bottom: 1rem; }

#important-terms ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: fixed;
  left: 0;
  top: 0;
  text-align: center;
  width: 100vw;
  box-sizing: border-box; }
#important-terms li {
  display: none;
  text-align: left; }
  #important-terms li:target {
    display: inline-block;
    border: 13px solid #ddd;
    border-top: 0;
    max-width: 30rem;
    background: #fff;
    padding: 0 2rem 1rem;
    position: relative;
    min-height: 60vh; }
    #important-terms li:target .definition {
      font-family: italic; }
    #important-terms li:target .example {
      color: #666;
      font-size: 1rem; }
      #important-terms li:target .example:before {
        content: "Exempel: "; }
    #important-terms li:target .close {
      position: absolute;
      top: 1rem;
      right: 1rem;
      width: 20px;
      height: 20px;
      display: block; }
      #important-terms li:target .close:before, #important-terms li:target .close:after {
        width: 20px;
        height: 20px;
        border-bottom: 4px solid gray;
        display: block;
        content: "";
        position: absolute; }
      #important-terms li:target .close:before {
        transform: rotate(45deg);
        top: -8px;
        left: 7px; }
      #important-terms li:target .close:after {
        transform: rotate(-45deg);
        top: -8px;
        left: -7px; }

#kontakt {
  padding-top: 10vh; }
  #kontakt:target {
    padding: 30vh 0 60vh; }

#currently {
  max-width: 36rem;
  margin: 0 auto 5rem;
  opacity: 0;
  animation: fadein 2.6s;
  animation-fill-mode: forwards;
  animation-delay: 1.3s; }
  #newVisitor #currently {
    animation-delay: 4.4s; }

@media screen and (max-height: 600px) {
  header img {
    display: none; } }
#main-menu > ul {
  opacity: 0;
  animation: fadein 2s;
  animation-fill-mode: forwards; }
  #main-menu > ul:nth-child(2) {
    animation-delay: 0.2s; }
  #main-menu > ul:nth-child(2) {
    animation-delay: 0.5s; }
  #main-menu > ul:nth-child(3) {
    animation-delay: 0.8s; }
  #newVisitor #main-menu > ul {
    animation-delay: 1.6s; }
    #newVisitor #main-menu > ul:nth-child(2) {
      animation-delay: 2s; }
    #newVisitor #main-menu > ul:nth-child(3) {
      animation-delay: 2.3s; }

#projekt, #skriverier {
  padding-top: 3rem; }
  #projekt h2, #projekt h3, #skriverier h2, #skriverier h3 {
    text-align: center;
    color: #333; }
    #projekt h2:before, #projekt h3:before, #skriverier h2:before, #skriverier h3:before {
      display: block;
      margin: 0 auto 0.4rem;
      font-size: 2rem; }
  #projekt h3 a, #skriverier h3 a {
    color: #333; }
  #projekt ul, #skriverier ul {
    margin: 0;
    padding: 0;
    list-style: none; }

#projects h3 {
  margin-top: 4.2rem;
  margin-bottom: 9px; }
#projects li:first-child h3 {
  margin-top: 1.5rem; }

#skriverier h2 {
  margin: 6rem 0 2rem;
  font-style: italic;
  font-family: serif;
  color: #aaa;
  font-size: 1.3rem;
  font-weight: 100; }
#skriverier:target {
  padding-top: 10vh; }

body[id^="page-"] h1 {
  font-size: 3rem;
  margin-bottom: 3px; }
body[id^="page-"] h2 {
  margin-top: 4rem; }
body[id^="page-"] .date + h2 {
  margin-top: 0; }
body[id^="page-"] h2, body[id^="page-"] h3 {
  margin-bottom: 2px; }

#page-locus h1 {
  margin-bottom: -1rem; }
  #page-locus h1 + p {
    font-size: 1rem; }

#about {
  max-width: 30rem;
  margin: 8rem auto 3rem;
  border-top: 1px dotted #ddd;
  padding-top: 5rem; }

@font-face {
  font-family: "fontello";
  src: url("/fonts/fontello/fontello.eot");
  src: url("/fonts/fontello/fontello.eot?#iefix") format("embedded-opentype"), url("/fonts/fontello/fontello.woff") format("woff"), url("/fonts/fontello/fontello.ttf") format("truetype"), url("/fonts/fontello/fontello.svg#fontello") format("svg"); }
body {
  font: 300 22px/1.5 sans-serif; }

h2 {
  margin: 3rem 0 2px; }

p {
  margin-top: 2px; }

article {
  max-width: 36rem;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto; }
  article h2 {
    margin-top: 0; }
  article ul {
    margin-top: 0; }
  article p {
    box-sizing: border-box;
    line-height: 2rem;
    font-size: 1.2rem;
    text-rendering: optimizeLegibility;
    color: rgba(0, 0, 0, 0.8);
    font-family: Georgia, Cambria, "Times New Roman", Times, serif; }

.date {
  color: #aaa;
  margin-bottom: 0;
  font-size: 1rem; }

@media screen and (max-device-width: 480px), (min-device-width: 481px) and (max-width: 991px) {
  body {
    display: flex;
    flex-wrap: wrap;
    margin: 1rem 2rem; }

  #currently {
    order: 3; }

  section {
    order: 4;
    max-width: 100%;
    overflow: hidden; }

  footer, .at-bottom {
    order: 50; }

  #newVisitor header {
    margin-top: 10vh; }

  #returningVisitor nav {
    order: 1; }
  #returningVisitor header {
    order: 13; }

  body {
    padding-top: 5rem; }
    #returningVisitor body {
      padding-top: 30vh; }

  #main-menu {
    z-index: 9999;
    text-align: center;
    width: calc(100% + 4rem);
    box-sizing: border-box;
    padding: 0.4rem 0;
    background: #fff;
    margin: 2vh -2rem 0;
    position: fixed;
    top: 0;
    left: 0; }
    #main-menu > ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: inline-block; }
      #main-menu > ul li {
        padding: 1rem 5vw; }
      #main-menu > ul:nth-child(n+4) {
        display: none; }
      #main-menu > ul ul {
        display: none; }
    #main-menu li:before {
      font-family: "fontello";
      display: block;
      text-decoration: none;
      color: #08c;
      position: relative;
      margin-bottom: -2rem;
      pointer-events: none; }
    #main-menu li a {
      padding-top: 2rem;
      display: inline-block; }
    #main-menu > ul:first-child li:before {
      content: ""; }
    #main-menu > ul:nth-child(2) li:before {
      content: ""; }
    #main-menu > ul:nth-child(3) li:before {
      content: ""; }
    #main-menu.show, #main-menu.hide {
      animation-fill-mode: forwards !important;
      padding: 0; }
    #main-menu.show {
      margin-top: -100vh;
      animation: slideDown 0.8s;
      border-bottom: 1px solid #dedede; }
    #main-menu.hide {
      animation: slideUp 0.8s; } }
@media screen and (max-device-width: 480px) and (max-height: 400px), screen and (min-device-width: 481px) and (max-width: 991px) and (max-height: 400px) {
  #main-menu {
    position: absolute !important; }
    #main-menu.show {
      position: fixed !important; } }
@media screen and (min-device-width: 700px) and (min-width: 991px) {
  header p {
    max-width: 33rem; }
  #newVisitor header {
    height: 100vh; }
  #returningVisitor header {
    margin: 0;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    max-width: 24rem;
    opacity: 0;
    animation: fadein 0.4s;
    animation-delay: 2.4s;
    animation-fill-mode: forwards; }
    #returningVisitor header img {
      max-width: 9rem;
      margin: 0 9rem 1rem 0;
      transform: rotate(-13deg); }
    #returningVisitor header p {
      font-size: 1rem; }

  #currently {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 20;
    margin: 0;
    max-width: 20rem; }
    #currently li > a:first-child {
      display: block; }
      #currently li > a:first-child:hover {
        border-bottom: 1px solid rgba(255, 255, 255, 0);
        color: green;
        transition: 0.2s; }
    #currently:hover {
      background: #fff;
      z-index: 9999; }

  section {
    position: relative;
    border-left: 1rem solid #fff;
    border-right: 1rem solid #fff;
    min-width: 500px;
    max-width: 33rem; }
    #newVisitor section {
      left: 4rem; }
    #returningVisitor section {
      margin-top: 15vh; }

  #kontakt {
    display: none; }
    #kontakt:target {
      display: block; } }
@media screen and (min-device-width: 700px) and (min-width: 991px) and (max-height: 600px), screen and (min-device-width: 700px) and (min-width: 991px) and (min-device-width: 700px) and (max-width: 1300px) {
  #currently ul {
    opacity: 0;
    max-height: 0;
    transition: all 2s; }
  #currently:hover {
    padding-bottom: 3rem;
    bottom: 0; }
    #currently:hover ul {
      opacity: 1;
      max-height: 60vh; }

  #returningVisitor header {
    position: absolute;
    bottom: 4rem;
    left: 2rem; }

  section {
    left: 4.2rem; } }
@media screen and (min-device-width: 700px) and (min-width: 991px) and (min-device-width: 700px) and (min-width: 1400px) {
  section {
    max-width: 38rem; } }
@media screen and (min-device-width: 700px) and (min-width: 991px) {
  #main-menu {
    position: fixed;
    top: 0;
    left: 0;
    text-align: left;
    z-index: 200;
    transition: all 0.4s;
    padding: 2rem 2rem 0 3rem;
    border: 1px dotted rgba(255, 255, 255, 0);
    border-top: none;
    border-radius: 0 0 0 4px;
    max-height: 100vh;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden; }
    #main-menu:hover {
      overflow: auto;
      opacity: 1;
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      background: #fff;
      right: 0;
      padding-bottom: 20rem;
      width: 20rem;
      max-width: 100vw; }
      #main-menu:hover ul {
        margin-bottom: 2rem; }
        #main-menu:hover ul ul {
          font-size: 1.24rem;
          transition: 0.1s; }
      #main-menu:hover > ul:last-child, #main-menu:hover > ul#top-lists {
        display: block; }
      #main-menu:hover > ul > li, #main-menu:hover > ul > li > a {
        transition: 1s;
        font-size: 0.96rem;
        color: #222 !important; }
        #main-menu:hover > ul > li ul li, #main-menu:hover > ul > li > a ul li {
          font-size: 1.1rem; }
    #main-menu ul {
      margin: 0;
      padding: 0;
      list-style: none;
      transition: all 0.3s; }
      #main-menu ul:hover {
        opacity: 1; }
      #main-menu ul ul {
        font-size: 0;
        transition: 0.3s; }
    #main-menu > ul:last-child {
      display: none; }
    #main-menu > ul > li, #main-menu > ul > li > a {
      color: #666;
      font-size: 1.2rem;
      margin-bottom: 0;
      text-decoration: none; }
    #main-menu li {
      color: #666; }
      #main-menu li li {
        transition: all 1s;
        font-weight: 100; }
        #main-menu li li:hover {
          cursor: pointer;
          transition: all 0.2s; }
    #main-menu ul ul ul {
      margin-left: 1rem; } }