@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css") layer(bootstrap);
@font-face {
  font-family: ghostbusters;
  src: url(../fonts/GHOSTBUS.TTF);
}
@layer bootstrap,sass,fredriks,annas,ingelas;
@layer sass {
  h1 {
    font-family: ghostbusters, Helvetica, sans-serif;
  }
  h2 {
    font-family: Helvetica, sans-serif;
  }
  p {
    font-family: Helvetica, sans-serif;
  }
  .btn-primary {
    background-color: hsl(161deg, 12%, 56%);
    border: hsl(163deg, 100%, 5%);
    color: black;
  }
  .btn-primary:hover {
    background-color: hsl(163deg, 100%, 5%);
    color: white;
  }
  .btn-primary:hover {
    background-color: hsl(163deg, 100%, 5%);
    color: white;
  }
  input[type=checkbox] {
    background-color: rgb(255, 255, 255);
    border-color: hsl(161deg, 12%, 56%);
  }
  input[type=checkbox]:checked {
    background-color: hsl(163deg, 100%, 5%);
  }
  .heading-img {
    width: 100%;
    height: auto;
  }
  header #headerLogo {
    height: 40px;
    margin: auto 0px;
    align-self: baseline;
    transform: translateY(-5px);
  }
  header a.navbar-brand {
    font-family: ghostbusters;
    font-size: 35px;
    margin: auto;
  }
  header nav {
    background: hsl(161deg, 12%, 76%);
    color: white;
    margin: 0px;
    padding: 0px;
  }
  header nav .logoDiv {
    margin: auto;
  }
  header nav .navbar-collapse {
    margin: 0px 0px 0px 200px;
    width: 100vw;
  }
  header nav .navbar-collapse ul {
    width: 100vw;
  }
  header nav .navbar-collapse ul li {
    width: 100vw;
    text-align: center;
    background: hsl(161deg, 12%, 76%);
  }
  header nav .navbar-collapse ul a {
    color: rgb(0, 1, 2);
    border: 0px;
    border-bottom: 2px;
    border-color: hsl(161deg, 12%, 76%);
  }
  header nav .navbar-collapse ul a.active {
    color: rgb(47, 47, 47);
    font-weight: 500;
    border-bottom: 2px;
    border-color: black;
    border-style: solid;
  }
  header nav .navbar-collapse ul a:hover {
    color: hsl(163deg, 100%, 5%);
    background: hsl(161deg, 12%, 85%);
    transition: 0.3s ease-in;
    border-bottom: 2px;
    border-color: black;
    border-style: solid;
  }
  header .container-fluid {
    background: hsl(163deg, 100%, 5%);
    z-index: 2;
    margin: 0px;
    padding: 0px;
  }
  main.main-index .index-img-top {
    width: 100%;
    height: auto;
  }
  main.main-index .index-div {
    height: auto;
    padding: 30px;
    font-size: 16px;
  }
  main.main-index .index-img {
    height: auto;
    width: 80%;
  }
  main.main-index .index-img:hover {
    opacity: 80%;
  }
  main.main-index .CTA-text {
    font-size: small;
  }
  main.main-index .CTA-text :hover {
    color: gray;
  }
  main.main-index .CTA-link {
    text-decoration: none;
    color: gray;
  }
  footer .navbar {
    padding: 0%;
  }
  footer .navbar .container-fluid {
    background-color: #809C94;
  }
  footer .navbar .container-fluid a {
    font-size: 16px;
    font-family: Helvetica, sans-serif;
    text-decoration: underline;
  }
  footer .navbar .container-fluid .copyrighttext {
    font-size: 10px;
  }
  footer .navbar .container-fluid .logo {
    font-family: ghostbusters;
    color: black;
    font-size: 20px;
    text-decoration: none;
  }
  @media (width >= 992px) {
    header #headerLogo.spinn {
      transition: 0.7s ease-in-out;
      transform: rotateY(180deg) translateY(-5px);
    }
    header nav .container-fluid {
      flex-direction: column;
      background: hsl(163deg, 100%, 5%);
    }
  }
  @media (width <= 359px) {
    header nav .logoDiv a {
      font-size: 18px;
    }
  }
  .img-references {
    filter: hue-rotate(-13deg) saturate(80%);
  }
  .refMain .card-body img {
    width: 150px;
    height: 150px;
  }
  .refMain section.opinion h2 {
    font-family: ghostbusters;
  }
  .refMain section p a {
    color: hsl(210deg, 4%, 20%);
    text-decoration: none;
  }
  .refMain section p a svg {
    fill: gray;
  }
  .refMain section p a:hover {
    color: hsl(210deg, 4%, 28%);
    text-decoration: none;
  }
  .refMain section p a:hover svg {
    fill: black;
    height: 20px;
    width: 20px;
    box-shadow: 1px;
    transform: translateX(2px);
  }
  .refMain .opinion {
    background: hsl(161deg, 12%, 76%);
  }
  .refMain .card-header {
    background: hsl(161deg, 12%, 76%);
  }
  .refMain .ghostGrade img {
    width: 18px;
  }
  .refMain .ghostGrade .badGrade {
    opacity: 50%;
  }
  main.services .card-body {
    background-color: hsl(161deg, 12%, 76%);
    border-radius: 4px;
    height: auto;
  }
  main.services .top-products a {
    color: black;
    text-decoration: none;
  }
  main.services .top-products a:hover {
    color: gray;
    opacity: 80%;
  }
  main.services .top-product {
    width: 90%;
  }
  main.services #link-to-form {
    color: hsl(163deg, 100%, 5%);
    text-decoration: underline;
  }
  main.services #link-to-form :hover {
    color: lightgray;
  }
  main.services .product {
    background-color: hsl(161deg, 12%, 76%);
    border-color: darkgrey;
  }
  main.services .main-product-picture {
    width: 60%;
    height: auto;
  }
  .img-contact {
    filter: hue-rotate(-13deg) saturate(80%);
  }
  main.contact .rubrik {
    font-family: ghostbusters;
  }
  main.contact .formular-div {
    display: flex;
    justify-content: center;
  }
  main.contact .forms {
    border-style: none;
    background-color: hsl(161deg, 12%, 76%);
    box-shadow: 0 5px 5px hsl(161deg, 12%, 56%);
    border-spacing: 50px;
    width: 80%;
    padding: 10px;
  }
  main.contact .forms .form-label {
    font-family: ghostbusters;
  }
  main.contact .form-control:focus {
    border-color: hsl(161deg, 12%, 56%);
    box-shadow: inset 0 1px 1px hsl(161deg, 12%, 56%);
  }
  main.contact select:focus {
    border-color: hsl(161deg, 12%, 56%);
    box-shadow: inset 0 1px 1px hsl(161deg, 12%, 56%);
  }
  main.contact .input-group span {
    background-color: hsl(161deg, 12%, 56%);
  }
  main.main-about-us img {
    width: 70%;
  }
  main.main-about-us .all-employees {
    gap: 20px;
  }
  aside.history-aside {
    background-color: hsl(161deg, 12%, 76%);
  }
  .radar .map-container {
    width: 100%;
    position: relative;
    height: 0;
    box-shadow: 5px 5px 12px grey;
  }
  .radar .map-container iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
  }
  .radar .ghost {
    opacity: 0%;
    height: 55px;
    position: relative;
    top: 40%;
    left: 50%;
    list-style: none;
    margin: 0;
    width: 10px;
    transition: 1s ease-in-out;
  }
  .radar .containerAll {
    margin: auto;
    position: relative;
    height: 530px;
    width: 600px;
  }
  .radar .ghostContainer {
    position: absolute;
    height: 480px;
    width: 590px;
    z-index: 1;
    top: 0%;
    left: 0%;
  }
  .radar .mapContainer {
    position: relative;
    top: 0%;
    left: 0%;
  }
  .radar .btncontainer {
    position: relative;
    margin: auto;
  }
  * {
    font-size: 18px;
  }
  * h1 {
    font-size: 23px;
  }
}
@layer fredriks {}
@layer annas {}
@layer ingelas {}/*# sourceMappingURL=style.css.map */