html,
body{height:100%;margin:0;}
.crosscover{position:relative;height:100%;overflow:hidden;background-color:rgba(0,0,0,1);}
.crosscover-list{position:relative;top:0;left:0;width:100%;height:100%;margin:0;padding:0;list-style:none;}
.crosscover-item{position:absolute;display:block;top:0;left:0;float:left;width:100%;height:100%;opacity:0;background-position:center center;background-size:cover;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.crosscover-item > img{display:none;}
.crosscover-item.is-wait{opacity:0;z-index:0;}
.crosscover-item.is-active{opacity:1;z-index:1;}
.crosscover-controller{position:absolute;z-index:3;bottom:30px;left:0;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.crosscover-player,
.crosscover-next,
.crosscover-prev{position:absolute;bottom:0;width:64px;height:64px;padding:0;cursor:pointer;border:none;outline:none;background-color:transparent;}
.crosscover-player{left:50%;margin-left:-32px;}
.crosscover-prev{left:0;}
.crosscover-next{right:0;}
.crosscover-player > .crosscover-icon-player:before,
.crosscover-player > .crosscover-icon-player:after{position:absolute;top:50%;left:50%;display:block;width:0;height:0;margin:-8px 0 0 -6px;content:'';transition:all .4s ease-out;border:10px solid transparent;border-top:10px solid transparent;border-left:15px solid rgba(255,255,255,1);}
.crosscover-player:hover > .crosscover-icon-player:before,
.crosscover-player:hover > .crosscover-icon-player:after{border-left-color:rgba(255,255,255,.4);}
.crosscover-player.is-playing > .crosscover-icon-player:before,
.crosscover-player.is-playing > .crosscover-icon-player:after{margin:-8px 0 0 -2px;content:'';border:2px solid rgba(255,255,255,1);border-top-width:20px;}
.crosscover-player.is-playing > .crosscover-icon-player:before{left:42%;-webkit-transform:rotate(-180deg);transform:rotate(-180deg);}
.crosscover-player.is-playing > .crosscover-icon-player:after{left:58%;-webkit-transform:rotate(180deg);transform:rotate(180deg);}
.crosscover-player.is-playing:hover > .crosscover-icon-player:before,
.crosscover-player.is-playing:hover > .crosscover-icon-player:after{border:2px solid rgba(255,255,255,.4);border-top-width:20px;}
.crosscover-icon-next:after,
.crosscover-icon-prev:after{position:absolute;top:50%;left:50%;width:10px;height:10px;margin-top:-5px;margin-left:-5px;content:'';transition:all .4s ease-out;border-top:4px solid rgba(255,255,255,1);border-right:4px solid rgba(255,255,255,1);border-radius:2px;}
.crosscover-icon-next:after{margin-left:-10px;-webkit-transform:rotate(45deg);transform:rotate(45deg);}
.crosscover-icon-prev:after{-webkit-transform:rotate(-135deg);transform:rotate(-135deg);}
.crosscover-next:hover .crosscover-icon-next:after,
.crosscover-prev:hover .crosscover-icon-prev:after{border-top:4px solid rgba(255,255,255,.4);border-right:4px solid rgba(255,255,255,.4);}
.crosscover-overlay{position:absolute;z-index:2;display:table;width:100%;height:100%;background:rgba(0,0,0,.1);}
.crosscover-island{display:table-cell;width:100%;height:100%;color:rgba(255,255,255,1);text-align:center;vertical-align:middle;}
.crosscover-title{font-size:48px;font-size:3rem;color:rgba(255,255,255,1);margin:0;}
.crosscover-description{font-size:18px;font-size:1.15rem;margin-top:0;margin-bottom:16px;margin-bottom:1rem;color:rgba(255,255,255,1);}
.crosscover-dots{position:absolute;z-index:3;bottom:0;left:0;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;text-align:center;margin:0;padding:0;box-sizing:border-box;list-style-type:none;}
[class^="crosscover-dots-nav-"]{display:inline-block;bottom:0;padding:16px 6px;padding:1rem .375rem;}
[class^="crosscover-dots-nav-"] button{width:14px;height:14px;cursor:pointer;background-color:rgba(255, 255, 255, .3);border-radius:50%;border:none;outline:none;padding:0;}
[class^="crosscover-dots-nav-"] button:hover{background-color:rgba(255,255,255,.6);}
[class^="crosscover-dots-nav-"].is-active button,
[class^="crosscover-dots-nav-"].is-active button:hover{background-color:rgba(255,255,255,1);}
@-webkit-keyframes fade-in{0%{opacity:0;}
100%{opacity:1;}
}
@keyframes fade-in{0%{opacity:0;}
100%{opacity:1;}
}
.fade-in{-webkit-animation-name:fade-in;animation-name:fade-in;}
@-webkit-keyframes fade-out{0%{opacity:1;}
100%{opacity:0;}
}
@keyframes fade-out{0%{opacity:1;}
100%{opacity:0;}
}
.fade-out{-webkit-animation-name:fade-out;animation-name:fade-out;}