.abril-fatface-regular {
  font-family: "Abril Fatface", serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-slab {
  font-family: "Roboto Slab", serif;
  font-optical-sizing: auto;
  font-style: thin;
}
.contain {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  overflow-x: auto;
  overflow-y: hidden;
}
.contain .wrap {
  width: 100%;
  height: 100%;
  display: grid;
  grid-auto-flow: column;
  gap: 2vw;
}

::-webkit-scrollbar {
  display: none;
  scroll-behavior: smooth;
}

.container {
  font-family: "Roboto";
  text-align: center;
  padding: 10px;
  margin-top: 2vh;
  text-align: justify;
}
.contain .container {
  width: 24vh;
  height: 5vw;

  margin: auto;
  margin-top: 2vh;
  text-align: center;
}

.roboto {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.navi {
  visibility: hidden;
  display: none;
}
h1 {
  line-height: 110%;
  margin-bottom: 10vh;
  margin-left: 8vw;
  font-size: 10vw;
  font-family: "Abril Fatface", serif;
  text-wrap-style: pretty;
}
.smaller {
  font-size: 1vw;
}
.ul1 {
  display: flex;
  margin-block-start: 0;
  list-style-type: none;
  padding-inline-start: 0;
}
ul {
  list-style-type: none;
}
li {
  padding-top: 2vh;
  margin: auto;
}

.navbar {
  position: sticky;
  overflow: hidden;
  top: 0;
  background-color: #fff8f0;
}
a {
  color: black;
  text-decoration: none;
  font-size: 2.5vh;
  font-weight: 200;
  font-family: "Roboto Slab", serif;
  text-wrap-style: pretty;
  transition-timing-function: ease;
  transition-duration: 400ms;
  transition-delay: 50ms;
}

a:visited {
  color: black;
}
a:hover {
  transition-timing-function: ease;
  transition-duration: 200ms;
  transition-delay: 50ms;
}

.phone {
  display: none;
}
.konkuter {
  max-width: 100vw;
  display: block;
}
.touchapad {
  max-width: 100vw;
  display: block;
}
.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h3 {
  margin-left: 25vw;
  margin-right: 20vw;
  font-size: 4vh;
  font-weight: 200;
  font-family: "Roboto Slab", serif;
  text-wrap-style: pretty;
}
pre {
  font-family: "Roboto", sans-serif;
  font-size: 2.5vh;

  text-wrap-style: pretty;
}
p {
  font-family: "Roboto", sans-serif;
  font-size: 2.5vh;

  text-wrap-style: pretty;
}
.marginp {
  margin-left: 25vw;
  margin-right: 25vw;
}
.justify {
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
}
body {
  margin: 0;
  overflow-x: hidden;
  text-decoration: none;
  background-color: #fff8f0;
}

footer {
  padding: 20px;
  justify-content: center;
  display: flex;
  align-items: flex-start;
}
#foot {
  margin-left: 20vw;
}

@media screen and (max-width: 1081px) and (orientation: portrait) {
  .navbar {
    display: none;
  }

  .phone {
    max-width: 100vw;
    display: block;
  }

  .video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .konkuter {
    display: none;
  }
  .touchapad {
    display: none;
  }
  button {
    border: #fff8f0;
    background-color: #fff8f0;
  }

  .dropdownBtn {
    margin: auto;
    padding-bottom: 0.5vh;
    padding-top: 0.5vh;
    font-size: 3vh;
    font-weight: 200;
    font-family: "Roboto Slab", serif;
    /*border:#FFF8F0;*/
    background-color: #fff8f0;
  }
  li {
    padding-top: 0.5vh;
  }
  .content {
    text-align: center;
    display: none;
    position: absolute;
    background-color: #fff8f0;
    min-width: 2vw;
    max-width: 10vw;
  }
  .navi:hover .content {
    display: contents;

    transition-timing-function: ease;
    transition-duration: 400ms;
    transition-delay: 500ms;
  }
  .navi {
    text-align: center;
    display: block;
    visibility: visible;
    position: sticky;
    overflow: hidden;
    top: 0;
    transition-timing-function: ease;
    transition-duration: 400ms;
    transition-delay: 50ms;
    background-color: #fff8f0;
  }
  a {
    text-decoration: none;
    font-size: 3vh;
    font-weight: 200;
    font-family: "Roboto Slab", serif;
    text-wrap-style: pretty;
  }
  ul {
    padding: 0;
    margin: 0;
  }
  .smaller {
    font-size: 2.5vw;
  }
  h1 {
    margin: 4vw;
    font-size: 17vw;
    font-family: "Abril Fatface", serif;
    text-wrap-style: pretty;
  }
  h3 {
    margin-left: 4vw;
    margin-right: 20vw;
    font-size: 4vh;
    font-weight: 200;
    font-family: "Roboto Slab", serif;
    text-wrap-style: pretty;
  }
  pre {
    font-family: "Roboto", sans-serif;
    font-size: 2vh;

    text-wrap-style: pretty;
  }
  p {
    font-family: "Roboto", sans-serif;
    font-size: 2vh;

    text-wrap-style: pretty;
  }
  .marginp {
    margin-left: 4vw;
    margin-right: 4vw;
  }
  .justify {
    text-align: center;
    display: block;
    text-wrap-mode: wrap;
    text-wrap-style: pretty;
    justify-content: center;
    align-content: center;
    margin: 4vw;
  }
  footer {
    padding: 20px;
    display: block;
    margin-top: 2vw;
  }
  #foot {
    margin-left: 0vw;
  }
  body {
    margin: 0;
    overflow-x: hidden;
    text-decoration: none;
  }
  .contain {
    display: flex;
    flex-wrap: wrap;
    margin-left: 2vw;
    margin-right: 2vw;
  }

  .container {
    font-size: 3vh;

    font-family: "Roboto";
    text-align: center;
    padding: 4vw;
    padding-top: 7vh;
    margin-top: 2vh;
    text-align: justify;
  }
  .contain .container {
    width: 95vw;
    height: 15vh;

    margin: auto;
    margin-top: 2vh;
    text-align: center;
  }
}
@media screen and (max-width: 1080px) and (orientation: landscape) {
  .navbar {
    display: none;
  }
  .phone {
    display: none;
  }
  .contain {
    display: flex;
    flex-wrap: wrap;
    margin-left: 5vw;
    margin-right: 5vw;
  }

  .container {
    font-size: 4vh;
    font-family: "Roboto";
    text-align: center;
    padding: 10px;
    padding-top: 20px;
    margin-top: 2vh;
    text-align: justify;
  }
  .contain .container {
    width: 30vw;
    height: 30vh;

    margin: auto;
    margin-top: 2vh;
    text-align: center;
  }

  .konkuter {
    max-width: 100vw;
    display: block;
  }
  .touchapad {
    display: none;
  }
  .video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body {
    margin: 0;
    overflow-x: hidden;
    text-decoration: none;
  }
  button {
    border: #fff8f0;
    background-color: #fff8f0;
  }
  .dropdownBtn {
    margin: auto;

    font-size: 3vw;
    font-weight: 200;
    font-family: "Roboto Slab", serif;
    border: #fff8f0;
    background-color: #fff8f0;
  }
  li {
    padding-top: 0.5vw;
  }
  body {
    margin: 0;
    overflow-x: hidden;
    text-decoration: none;
  }
  .content {
    text-align: center;
    display: none;
    position: absolute;
    background-color: #fff8f0;
    min-width: 2vw;
    max-width: 10vw;
    transition-timing-function: ease;
    transition-duration: 400ms;
    transition-delay: 50ms;
  }
  .navi:hover .content {
    transition-timing-function: ease;
    transition-duration: 400ms;
    transition-delay: 50ms;
    display: contents;
  }
  .navi {
    text-align: center;
    display: block;
    visibility: visible;
    position: sticky;
    overflow: hidden;
    top: 0;

    background-color: #fff8f0;
  }
  a {
    text-decoration: none;
    font-size: 3vw;
    font-weight: 200;
    font-family: "Roboto Slab", serif;
    text-wrap-style: pretty;
  }
  ul {
    padding: 0;
    margin: 0;
  }
  .smaller {
    font-size: 1.5vw;
  }

  h1 {
    margin: 4vw;
    font-size: 17vw;
    font-family: "Abril Fatface", serif;
    text-wrap-style: pretty;
  }
  h3 {
    margin-left: 4vw;
    margin-right: 20vw;
    font-size: 4vw;
    font-weight: 200;
    font-family: "Roboto Slab", serif;
    text-wrap-style: pretty;
  }
  pre {
    font-family: "Roboto", sans-serif;
    font-size: 2vw;

    text-wrap-style: pretty;
  }
  p {
    font-family: "Roboto", sans-serif;
    font-size: 2.5vw;

    text-wrap-style: pretty;
  }
  .marginp {
    margin-left: 4vw;
    margin-right: 4vw;
  }
  .justify {
    text-align: center;
    display: block;
    text-wrap-mode: wrap;
    text-wrap-style: pretty;
    justify-content: center;
    align-content: center;
    margin: 4vw;
  }
  footer {
    padding: 20px;
    display: block;
    margin-top: 2vw;
    display: block;
  }
  #foot {
    margin-left: 0vw;
  }
}