.campaign-header-animated{position:relative;overflow:hidden;opacity:0}
.campaign-header-animated .scene-first{position:relative;z-index:2}
.campaign-header-animated .scene-first img{width:100vw;max-height:calc(100vh - 72px);transition:opacity .8s ease-in-out}
@media only screen and (min-width:768px){.campaign-header-animated .scene-first img{height:calc(100vh - 88px)}
}
.campaign-header-animated .scene-first img.mask{position:absolute;top:0;left:0}
.campaign-header-animated .scene-first img.desktop{display:none}
@media only screen and (min-width:768px){.campaign-header-animated .scene-first img.desktop{display:block}
}
.campaign-header-animated .scene-first img.mobile{display:block}
@media only screen and (min-width:768px){.campaign-header-animated .scene-first img.mobile{display:none}
}
.campaign-header-animated .scene-first--text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:"MetricSemibold";letter-spacing:0;color:#fff;width:100%;height:15vh;text-align:center;transition:all .5s ease-out}
.campaign-header-animated .scene-first--text .letter{display:inline-block;line-height:1;height:16vh;overflow:visible;position:relative;width:8.5vh}
.campaign-header-animated .scene-first--text .letter .slider{top:0;position:absolute;width:100%;transition:top 1s ease-out}
.campaign-header-animated .scene-first--text .letter span{display:block;margin:0;padding:0;font-size:14vh;text-align:center;height:14vh;line-height:1}
.campaign-header-animated .scene-first--text .letter.last{width:10.5vh}
.campaign-header-animated .scene-first--text .letter.separator{width:3.5vh;overflow:hidden}
.campaign-header-animated .scene-first--text .letter.separator span{position:absolute;top:0}
.campaign-header-animated .scene-first--text.animate-text .slider{top:-14vh}
.campaign-header-animated .scene-first--text.animate-text .item-0 .slider{transition-delay:.5s;top:-42vh}
.campaign-header-animated .scene-first--text.animate-text .item-1 .slider{transition-delay:.7s}
.campaign-header-animated .scene-first--text.animate-text .item-2 .slider{transition-delay:.9s}
.campaign-header-animated .scene-first--text.animate-text .item-3 .slider{transition-delay:1.6s}
.campaign-header-animated .scene-first--text.finished .item-3{opacity:0}
.campaign-header-animated .scene-first--text.finished .slider{transition:none}
.campaign-header-animated .scene-first--text.finished .slider span{opacity:0}
.campaign-header-animated .scene-first--text.finished .slider span:last-child{opacity:1}
.campaign-header-animated .scene-first--text.text-out{top:45%;opacity:0;pointer-events:none}
.campaign-header-animated .scene-first.disable{pointer-events:none;visibility:hidden}
.campaign-header-animated .scene-second{position:absolute;display:none;top:0;left:0;width:100%;overflow-x:hidden}
.campaign-header-animated .scene-second.active{display:block}
.campaign-header-animated .scene-second img{width:100vw;max-height:calc(100vh - 72px)}
@media only screen and (min-width:768px){.campaign-header-animated .scene-second img{height:calc(100vh - 88px)}
}
.campaign-header-animated .scene-second img.desktop{display:none}
@media only screen and (min-width:768px){.campaign-header-animated .scene-second img.desktop{display:block}
}
.campaign-header-animated .scene-second img.mobile{display:block}
@media only screen and (min-width:768px){.campaign-header-animated .scene-second img.mobile{display:none}
}
.campaign-header-animated .scene-second--text{font-family:"Diodrum Semibold";color:#fff;position:absolute;top:53%;transform:translate(-50%,-50%);width:100%;left:50%;opacity:0;padding-left:calc(48px  - ( 15  * (1px - ((100vw -  320px ) / 703))));padding-right:calc(48px  - ( 15  * (1px - ((100vw -  320px ) / 703))));transition:all .5s ease-out .3s;pointer-events:none}
@media only screen and (min-width:1024px){.campaign-header-animated .scene-second--text{padding:0 94px;max-width:1440px}
}
.campaign-header-animated .scene-second--text span{font-size:22px}
@media only screen and (min-width:1024px){.campaign-header-animated .scene-second--text span{font-size:36px}
}
.campaign-header-animated .scene-second--text h2{font-family:"Diodrum Semibold";font-size:40px;color:#fff;line-height:1.1;padding:15px 0 20px;width:100%}
@media only screen and (min-width:1024px){.campaign-header-animated .scene-second--text h2{font-size:82px;width:60%}
}
.campaign-header-animated .scene-second--text a{font-family:"Diodrum Semibold";font-size:16px;display:inline-block;text-decoration:none;position:relative;padding-bottom:3px;color:#fff}
@media only screen and (min-width:1024px){.campaign-header-animated .scene-second--text a{font-size:20px}
}
.campaign-header-animated .scene-second--text a:hover{color:#e4001c}
.campaign-header-animated .scene-second--text a span{position:absolute;background-color:#e4001c;width:100%;height:1px;bottom:0;left:0}
.campaign-header-animated .scene-second--text.text-active{top:50%;opacity:1;pointer-events:all}
body.isauthor .campaign-header-animated{position:relative;overflow:hidden;opacity:0}
body.isauthor .campaign-header-animated img{width:100vw;height:auto}
body.isauthor .campaign-header-animated .letter{display:none !important}