:root {
    --backing_orange:#c3171c;
    --backing_blue:#ffb816;
    --accent_orange:#fc9e4f;
}

@font-face {
    font-family: 'Chiller';
    src: url('../fonts/Art-nuvo.otf') format('opentype');
}

body {
    margin:0;
    padding:0;
    /*overflow:hidden;*/
    background:Var(--backing_blue);

    font-family:"Chiller";
    color:Var(--backing_orange);
}

.topbar {
    background:Var(--backing_orange);
    box-sizing:border-box;
    width:100%;
    height:50px;
    display:flex;
    justify-content: space-between;
    padding:10px;
}
.topbar a {
    cursor:pointer;
    text-decoration:none;
}
.topbar .left img {
    height:100%;
}
.topbar .left {
    font-size:20px;
}
.topbar .left, .topbar .right {
    display:flex;
    align-items:center;
    height:100%;
}

.topbar .tab {
    margin:10px;
    height:90%;
    width:120px;
    justify-content:center;
    text-align:center;
    display:flex;
    background:none;
    border:none;
    font-family:"Chiller";
    font-weight:bold;
    font-size:20px;
}
.topbar .tab:hover {
    cursor:pointer;
    background:Var(--accent_orange);
}
.topbar .tab.selected {
    background:Var(--accent_orange);
}
.topbar .tab img {
    float:left;
}
.topbar .tab .label {
    float:left;
    margin:auto;
}

.topbar .label {
    color:Var(--backing_blue);
    font-weight:bold;
}

.section   {
    width:100%;
    padding:10px;
    box-sizing:border-box;
}

.section .title {
    text-align:center;
}

.section .content {
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
    max-width:1500px;
    margin:auto;
}

.section .left, .section .right {
    width:48%;
    text-align:center;
    margin:10px;
    box-sizing:border-box;
    height:400px;
    font-size:13px;
}

.section .center {
    width:100%;
    text-align:center;
    margin:10px;
    box-sizing:border-box;
    height:400px;
}

.title {
    font-size:80px;
    /*text-shadow: 0px 0px 50px Var(--backing_orange);*/
    cursor:default;
}

.content img {
    height:100%;
    transition-duration:0.2s
}

.content .icon:hover {
    transform:translateY(-10px)scale(1.1);
    cursor:pointer;
    transition-duration:0.2s
}

.content .subtitle {
    font-size:60px;
    text-shadow: 0px 0px 60px Var(--backing_orange);
    cursor:default;
    margin-top:-20px;
}

.content video {
    height:100%;
    margin-bottom:100px;
}

.s1 video {
    width:100%;
}

.poster {
    height:100%;
    width:20%;
    float:left;
    box-sizing:border-box;
    padding:10px;

    transition-duration:0.2s;
}
.poster:hover {
    transform:translateY(-10px)scale(1.1);
    cursor:pointer;
    transition-duration:0.2s;
}
.poster img {
    width:100%;
    height:100%;
    object-fit:contain;
}

.bts {
    width:100%;
}
.frbts {
    height:1080px;
}