/*
####################################################
M E N Y
####################################################
*/

/* Hamburger Icon 1 */
.animated-icon1, .animated-icon2, .animated-icon3 {
  width: 30px;
  height: 20px;
  margin: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  text-decoration: none;
}
.animated-icon1 span, .animated-icon2 span, .animated-icon3 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.animated-icon1 span {
  background: #e65100; /*anger linjefärg på hamburgermenyn*/
}
.animated-icon2 span {
  background: #e3f2fd;
}
.animated-icon3 span {
  background: #f3e5f5;
}
.animated-icon1 span:nth-child(1) {
  top: 0px;
}
.animated-icon1 span:nth-child(2) {
  top: 10px;
}
.animated-icon1 span:nth-child(3) {
  top: 20px;
}
.animated-icon1.open span:nth-child(1) {
  top: 11px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.animated-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}
.animated-icon1.open span:nth-child(3) {
  top: 11px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
/* End of style Hamburger Icon 1 */
/* Typsnitt i menyn */
.navbar-nav a {
  font-family: rift, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.5em
}
.active {
  border-radius: 5px;
  padding-left: 0px; /* Tidigare 10 px vilket skapade problem med padding i karusellen */
  padding-right: 0px /* Tidigare 10 px vilket skapade problem med padding i karusellen */
}
.aktivmeny {
  background: #8EB800;
  border-radius: 5px;
  padding-left: 10px;
  padding-right: 10px;
  color: white;
  z-index: 3;
}

.aktivmeny a {
  color: white;
}
/* Slut på Typsnitt i menyn */
.navbar-brand 
{
  position: absolute;
  padding: 0px;
  top: -8px;
  z-index: 1 !important;
} /*Positioner logotypen och låter den flyta ovanpå menyraden i laptop-läge*/
.navbar-toggler {
  border: 0px !important; /*tar bort ramen(linjen) runt hamburgermenyn*/
}
.navbar-light a .navbar-nav a .nav-link {
  color: red;
}
.dropdown-item a { /*textfärg och inga understrukna länkar i dropdownläge*/
  color: white;
  text-decoration: none;
}
a {
  outline: none
} /*tar bort ramen runt länkar i Safari och Chrome*/
.dropdown-menu {
  background-color: black;
  border: medium;
  border-color: #9D9898
}
.dropdown-item:hover {
  background-color: #ffb03b; /*tidigare grön #8EB800*/
}

/*
####################################################
FOOTER
####################################################
*/
.bg-grey2 {
  background: #454954;
}
#footercontainer {
  color: #9b9d9e;
}
.footersmallscreen {
  color: #FFFFFF;
}
.footerbigscreen {
  display: none;
}
.footersmallscreen {
  display: block;
  text-align: center;
  background: #454954;
  width: 100%;
}
.dltloggafooter {
  padding-top: 30px;
}
.uptext {
  font-family: rift;
  font-size: 1.3em;
  margin-bottom: 0.05em
}
.uptext2 {
  font-family: rift;
  font-size: 1.3em;
  margin-bottom: 0.3
}
.footerbrodtext {
  font-family: itc-avant-garde-gothic-pro, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 0.8em;
}
a[href^="tel"] {
  color: inherit;
  text-decoration: none; /*fixar så att telefon-nummer inte visas som blåa och understrukna i Safari*/
}
/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/
/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width:576px) {}
 body {
    padding-top: 0px;
    padding-bottom: 50px;/*fixar så att sista delen av respektive sida inte döljs av footern*/
  } 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
 body {
    padding-top: 0px;
    padding-bottom: 50px;/*fixar så att sista delen av respektive sida inte döljs av footern*/
  } 

  .paddingleft {
    padding-left: 140px /*fixar så menylänkarna hamnar till höger om clownens fot*/
  }
  .footerbigscreen {
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: gray;
    font-family: rift;
    font-size: 1.3em
  }
  .footersmallscreen {
    display: none
  }
  .footer {
    min-height: 40px;
    margin-top: 10px;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .footerbigscreen {
    font-size: 1.3em
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/
/* Set width to make card deck cards 100% width */
@media (max-width: 950px) {}