*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}


/* Endre på height vh til ønsket slider høyde */ 

.karusell {
    width: 100%;
    height: 60vh;
    position: relative;
    
}

.karusell > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Alt under her er til text i slider */
@media screen and (min-width: 850px){
    .slide-bilde-text  {
        display: block;
        transform: translateY(-200%);
        text-align: left;
        padding-left: 23%;
        
    
    }
    
    .slide-text-1  {
        font-size: 4rem;
        color: white;
        padding-bottom: 1%;
    }
    .slide-text-2  {
        font-size: 2rem;
        color: white;
        padding-left: 4px;
    }
    .slide-text-3  {
        font-size: 2rem;
        color: white;
        padding-bottom: 3%;
        padding-left: 4px;
    }
    
}
 .tekst-button {
     background: none;

    cursor: pointer;
    color: white;
    border-color: white;  
    border-style:solid;
    background-color: rgba(0, 0, 0, 0.63) ;
}

.tekst-button {
  appearance: none;
  background-color: transparent;
  border: 2px solid #1A1A1A;
  border-radius: 15px;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-family: Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  min-height: 60px;
  min-width: 0;
  outline: none;
  padding: 16px 24px;
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 30%;
  will-change: transform;
  background-color:#1a1a1a75;
}

.tekst-button:disabled {
  pointer-events: none;
}

.tekst-button:hover {
  color: #fff;
  background-color: #1A1A1A;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

.tekst-button:active {
  box-shadow: none;
  transform: translateY(0);
}
    
.slide-bilde-text  {
    display: block;
    margin-top: 6.9%;

    text-align: left;
    padding-left: 23%;

}

.slide-text-1  {
    font-size: 4rem;
    color: white;
    padding-bottom: 1%;
}
.slide-text-2  {
    font-size: 2rem;
    color: white;
    padding-left: 4px;
}
.slide-text-3  {
    font-size: 2rem;
    color: white;
    padding-bottom: 3%;
    padding-left: 4px;
}



/* Alt over her er til tekst i slider */ 

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: 200ms opacity ease-in-out;
    transition-delay: 200ms;
}

.slide > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.slide[data-active] {
    opacity: 1;
    z-index: 1;
    transition-delay: 0ms;
}

.karusell-button {
    position: absolute;
    z-index: 2;
    background: none;
    border: none;
    font-size: 2rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .5);
    cursor: pointer;
    border-radius: .25rem;
    padding: 0 .5rem;
    background-color: rgba(0, 0, 0, .1);
}

.karusell-button:hover,
.karusell-button:focus {
    color: white;
    background-color: rgba(0, 0, 0, .2);
}

.karusell-button:focus {
    outline: 1px solid black;
}

.karusell-button.prev {
    left: 1rem;
}

.karusell-button.next {
    right: 1rem;
}

/* Slider elementet på index. */



@media screen and (min-width:100px) and (max-width:1919px){
    .slide-bilde-text{
        display: block;
        transform: translateY(-200%);
        text-align: center;
        padding-left: 0%;    
    }
    .slide-text-1  {
        font-size: 2rem;
        color: white;
        padding-bottom: 1%;
    }
    .slide-text-2  {
        font-size: 1rem;
        color: white;
        padding-left: 4px;
    }
    .slide-text-3  {
        font-size: 1rem;
        color: white;
        padding-bottom: 3%;
        padding-left: 4px;
    }
    
    
}

#bg-godjul-class{
background-color: rgba(0, 0, 0, .35);;
}

@media screen and (min-width:1920px){
    #bg-godjul-class{
        width: 28%;
        margin-left: 20%;
        padding-left: 0%;
    }
    #bg-godjul-class div{
        margin-left: 4%;
    }
    #bg-godjul-class button{
        width: 100%;
        color: rgb(255, 255, 255);

    }
    #SmallSkrift{
        font-size: 28px;
    }
}

@media screen and (min-width:2000px){
    #bg-godjul-class{
margin-top: 20%
}
}