* { box-sizing : border-box; }
body { background-color: #fafafa; margin: 0; }

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/raleway-v22-latin-600.woff2') format('woff2'),
        url('fonts/raleway-v22-latin-600.woff') format('woff'),
        url('fonts/raleway-v22-latin-600.ttf') format('truetype');
}
@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/raleway-v22-latin-700.woff2') format('woff2'),
        url('fonts/raleway-v22-latin-700.woff') format('woff'),
        url('fonts/raleway-v22-latin-700.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/lato-v23-latin-regular.woff2') format('woff2'),
         url('fonts/lato-v23-latin-regular.woff') format('woff'),
         url('fonts/lato-v23-latin-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/lato-v23-latin-700.woff2') format('woff2'),
         url('fonts/lato-v23-latin-700.woff') format('woff'),
         url('fonts/lato-v23-latin-700.ttf') format('truetype');
}

.bg { margin: 0 auto; text-align: center; height: 0; width: 1000px; }
.bg img { width: 100%; opacity: 0; }

#animation-helper { margin: 0 auto; max-width: calc(100% - 30px); }
#animation-container {
    display: block;
    padding-bottom: 37%;
    position: relative;
    width: 100%;
}
#animation-container canvas {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
@media (max-width: 575px) {
    #animation-helper { max-width: calc(100% - 10px); }
    #animation-container { padding-bottom: 50%; overflow: hidden; }
    #animation-container canvas { width: 130%; left: auto; right: 0; }
}

#mobile-tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    margin-bottom: 20px;
}

#mobile-tabs li {
    writing-mode: vertical-rl;
    transform: rotateZ(180deg);
    height: 170px;
    font-family: 'Raleway';
    border: solid 1px transparent;
    border-right-color:#ccc;
    display: flex;
    align-items: center;
    padding: 10px 0;
    font-weight: 700;
    font-size: 14px;
    color: #d2d2d2;
    letter-spacing: 0.2px;
    cursor: pointer;
    width: 54px;
    line-height: 1.2;
}

#mobile-tabs li:first-child {
    border-right: none;
}

#mobile-tabs li.active {
    background: #fff;
    color: #CF4520;
}
@media (min-width: 576px) {
    #mobile-tabs { display: none; }
}