/* =========================
   FULLSCREEN SLIDESHOW
========================= */

.cb-slideshow,
.cb-slideshow:after{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:0;
}

.cb-slideshow{
    list-style:none;
    margin:0;
    padding:0;
}

/* overlay-mönster */

.cb-slideshow:after{
    content:"";
    background:url(../img/pattern.png) repeat;
}

/* mörk overlay */

.cb-slideshow:before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    background:linear-gradient(
        rgba(0,0,0,0.2),
        rgba(0,0,0,0.55)
    );
    z-index:1;
}

/* =========================
   BAKGRUNDSBILDER
========================= */

.cb-slideshow li span{

    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    opacity:0;

    animation:imageAnimation 36s linear 1 forwards;
}

/* =========================
   TEXT I SLIDES
========================= */

.cb-slideshow li div{

    position:absolute;
    bottom:10%;
    width:100%;
    text-align:center;

    opacity:0;

    z-index:5;

    animation:titleAnimation 36s linear 1 forwards;
}

.cb-slideshow li div h3{

    font-family:Arial, Helvetica, sans-serif;

    font-size:clamp(32px,8vw,120px);

    line-height:1.05;

    padding:0 20px;

    color:rgba(255,255,255,0.95);

    letter-spacing:2px;

    text-shadow:0 4px 20px rgba(0,0,0,0.7);
}

/* =========================
   BILDER
========================= */

.cb-slideshow li:nth-child(1) span{
background-image:url(../img/1.jpg);
}

.cb-slideshow li:nth-child(2) span{
background-image:url(../img/2.jpg);
animation-delay:6s;
}

.cb-slideshow li:nth-child(3) span{
background-image:url(../img/3.jpg);
animation-delay:12s;
}

.cb-slideshow li:nth-child(4) span{
background-image:url(../img/4.jpg);
animation-delay:18s;
}

.cb-slideshow li:nth-child(5) span{
background-image:url(../img/5.jpg);
animation-delay:24s;
}

.cb-slideshow li:nth-child(6) span{
background-image:url(../img/6.jpg);
animation-delay:30s;
}

/* TEXT TIMING */

.cb-slideshow li:nth-child(2) div{animation-delay:6s;}
.cb-slideshow li:nth-child(3) div{animation-delay:12s;}
.cb-slideshow li:nth-child(4) div{animation-delay:18s;}
.cb-slideshow li:nth-child(5) div{animation-delay:24s;}
.cb-slideshow li:nth-child(6) div{animation-delay:30s;}

/* =========================
   BILDANIMATION
========================= */

@keyframes imageAnimation{

0%{
opacity:0;
transform:scale(1);
}

8%{
opacity:1;
}

17%{
opacity:1;
transform:scale(1.08);
}

22%{
opacity:0;
}

100%{
opacity:0;
}

}

/* =========================
   TEXTANIMATION
========================= */

@keyframes titleAnimation{

0%{
opacity:0;
transform:translateY(-80px);
}

8%{
opacity:1;
transform:translateY(0);
}

17%{
opacity:1;
}

19%{
opacity:0;
transform:translateY(60px);
}

100%{
opacity:0;
}

}

/* =========================
   STANNA PÅ BILD 1
========================= */

.cb-slideshow li:first-child span{
opacity:1 !important;
animation:none !important;
}

/* =========================
   KONTAKTINFO / HEADER
========================= */

.container{
position:relative;
z-index:20;
}

header{

position:absolute;

top:40px;
left:40px;

max-width:420px;

color:white;

font-family:Arial, Helvetica, sans-serif;

font-size:18px;
font-style:italic;
font-weight:normal;

line-height:1.4;

text-shadow:0 2px 15px rgba(0,0,0,0.8);

z-index:20;
}

header h2{
font-size:18px;
font-style:italic;
font-weight:normal;
margin:0;
}

/* =========================
   MOBIL
========================= */

@media screen and (max-width:900px){

header{
left:20px;
right:20px;
top:30px;
max-width:none;
}

.cb-slideshow li div h3{

font-size:clamp(26px,10vw,60px);

line-height:1.1;

}

}

/* =========================
   SMÅ MOBILER
========================= */

@media screen and (max-width:500px){

.cb-slideshow li div h3{

font-size:28px;

line-height:1.15;

}

}

/* fallback om animation saknas */

.no-cssanimations .cb-slideshow li span{
opacity:1;
}