#teaser-progressbar{
background: linear-gradient(to right, rgba(255,255,255,.25) 0%,rgba(255,255,255,.95) 100%);
position:absolute;
bottom:0;
left:0;
width:0;
height:.25rem;
z-index:20;
opacity:1;
}

#teaser_wrapper{
grid-area:teaser;
position:relative;
}


/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

/* Tab icon */
#teaser_wrapper .tab{
float:left;
position:absolute;
width:100%;
bottom:1rem;
z-index:50;
}

}

/* Tablet View */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

/* Tab icon */
#teaser_wrapper .tab{
float:left;
position:absolute;
width:100%;
bottom:1rem;
z-index:50;
}

}

/* Desktop View */
@media screen and (min-width: 79.5rem){

/* Tab icon */
#teaser_wrapper .tab{
float:left;
position:absolute;
width:100%;
bottom:1rem;
z-index:50;
}

}

#teaser_wrapper .tab ul{
display:flex;
justify-content:center;
align-items:center;
list-style-type:none;
margin:0;
padding:0;
}

#teaser_wrapper .tab li{
display:flex;
align-items:center;
margin:0 .25rem;
padding:0 .15rem;
width:auto;
}

#teaser_wrapper .tab li:before{
display:none
}

#teaser_wrapper .tab button,
#teaser_wrapper .tab a{
display:inline-block;
text-align:center;
margin:0;
padding:0;
}

#teaser_wrapper .tab button span,
#teaser_wrapper .tab a span{
display:none;
}

#teaser_wrapper .tab button,
#teaser_wrapper .tab button.off,
#teaser_wrapper .tab a,
#teaser_wrapper .tab a.off{
color:#FFF;
font-weight:normal;
border:var(--clr-primary-100) 1px solid;
background:var(--bgr-gray-300);
transition:opacity 250ms ease-in;
border-radius:.15rem;
}

/* Desktop View */
@media screen and (min-width: 79.5rem){

#teaser_wrapper .tab button:hover,
#teaser_wrapper .tab a:hover{
border:1px solid transparent;
background:var(--bgr-primary-400);
}

}

#teaser_wrapper .tab button.on,
#teaser_wrapper .tab a.on{
color:#FFF;
font-weight:normal;
border:1px solid transparent;
background:var(--bgr-primary-300);
border-radius:.15rem;
}


/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

#teaser_wrapper .tab button,
#teaser_wrapper .tab button.off,
#teaser_wrapper .tab a,
#teaser_wrapper .tab a.off{
width:3.95rem;
height:.35rem;
}

#teaser_wrapper .tab button.on,
#teaser_wrapper .tab a.on{
width:3.95rem;
height:.35rem;
}

}

/* Tablet and above */
@media screen and (min-width: 45rem){

#teaser_wrapper .tab button,
#teaser_wrapper .tab button.off,
#teaser_wrapper .tab a,
#teaser_wrapper .tab a.off{
width:3.95rem;
height:.55rem;
}

#teaser_wrapper .tab button.on,
#teaser_wrapper .tab a.on{
width:3.95rem;
height:.55rem;
}

}



#teaser_wrapper .card{
opacity:0;
}

#teaser_wrapper .card:first-of-type{
opacity:1;
}


/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

#teaser_wrapper .card .foreground .title{
font-family:var(--teaser-font-family), sans-serif;
}

#teaser_wrapper .card .foreground .title .ol,
#teaser_wrapper .card .foreground .title .hl,
#teaser_wrapper .card .foreground .title .sl{
clear:both;
float:left;
width:100%;
text-align:center;
color:var(--clr-primary-100);
text-shadow: 1px 1px 1px #888;
margin:0;
padding:0;
}

#teaser_wrapper .card .foreground .title .ol{
font-size:var(--fs-l);
}

#teaser_wrapper .card .foreground .title .hl{
font-size:var(--fs-xxl);
}

#teaser_wrapper .card .foreground .title .sl{
font-size:var(--fs-xl);
}

#teaser_wrapper .card .foreground .title .text > *{
color:var(--clr-primary-100);
font-size:var(--fs-m);
line-height:1rem;
}

}

/* Tablet and above */
@media screen and (min-width:45rem){

#teaser_wrapper .card .foreground .title{
font-family:var(--teaser-font-family), sans-serif;
}

#teaser_wrapper .card .foreground .title .ol,
#teaser_wrapper .card .foreground .title .hl,
#teaser_wrapper .card .foreground .title .sl{
clear:both;
float:left;
width:100%;
text-align:center;
color:var(--clr-primary-100);
text-shadow: 1px 1px 1px #888;
margin:0;
padding:0;
}

#teaser_wrapper .card .foreground .title .ol{
font-size:var(--fs-l);
}

#teaser_wrapper .card .foreground .title .hl{
font-size:var(--fs-xxxl);
}

#teaser_wrapper .card .foreground .title .sl{
font-size:var(--fs-xl);
}

#teaser_wrapper .card .foreground .text > *{
color:var(--clr-primary-100);
font-size:var(--fs-m);
line-height:1rem;
}

}