i.ball.orange::before {
    background: #feb75c;
    background: linear-gradient(45deg, #feb75c, #f8e265);
}
i.ball.blue::before {
    background: #3075fa;
    background: linear-gradient(45deg, #3075fa, #82aefc);
}
i.ball.kpi::before {
    width: 3.922vw;
    height: 3.922vw;
    top: 4.314vw;
    left: 50%;
    margin-left: 2.353vw;
}
i.ball.kpi.small::before {
    width: 1.353vw;
    height: 1.353vw;
    top: 6.46vw;
    left: 50%;
    margin-left: 8.235vw;
    animation: 10s tictac linear infinite;
}
section.content div.kpi.right {
    margin: -4vw -4.412vw -2vw auto;
}
i.sofa {
    display: block;
    width: 46.373vw;
    height: 37.353vw;
    background: center center url(../img/binge-watching-sofa.png) no-repeat;
    background-size: contain;
    position: relative;
}
i.sofa::before {
    content: "";
    display: block;
    width: 8.2%;
    height: 8%;
    background: center center url(/user/themes/homo/img/binge-watching-ma.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 11.2%;
    left: 60%;
}
i.sofa::after {
    content: "";
    display: block;
    width: 17%;
    height: 16%;
    background: center center url(/user/themes/homo/img/binge-watching-ha.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 8.9%;
    left: 53.3%;
    animation: 10s animation_7 linear infinite;
}
@keyframes animation_7 {
    0% {transform: translate3d(0px,0px,0) rotate(0deg) scale(1); opacity: 1; animation-timing-function: linear}
    100% {transform: translate3d(0px,0px,0) rotate(360deg) scale(1); opacity: 1; }
}

div.watches {
    position: relative;
    height: 0;
}
div.watches > i.glass {
    position: absolute;
    right: -24vw;
    top: -9vw;
    width: 23.1vw;
    height: 22.3vw;
    background: url(../img/lazybones/watches-glass.png) no-repeat;
    background-size: contain;
    z-index: 1;
}
div.watches > i.arrow {
    position: absolute;
    right: -21.2vw;
    top: -6.5vw;
    width: 18.1vw;
    height: 18.3vw;
    background: url(../img/lazybones/watches-arrow-h.png) no-repeat;
    background-size: contain;
    z-index: 2;
    animation: arrows-rotation 27s linear infinite;
}
div.watches > i.arrow-m {
    position: absolute;
    right: -21.2vw;
    top: -6.5vw;
    width: 18.1vw;
    height: 18.3vw;
    background: url(../img/lazybones/watches-arrow-m.png) no-repeat;
    background-size: contain;
    z-index: 2;
    animation: arrows-rotation 9s linear infinite;
}

.bar-graphic {
    padding: 3.922vw 0;
}
.bar-graphic>.caption {
    text-align: center;
    font: bold 1.569vw title, serif;
    margin-bottom: 2.451vw;
}
.bar-graphic>.bars {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}
.bar-graphic>.bars>div {
    width: 5.196vw;
    font: 1.471vw title, serif;
    text-align: center;
    margin: 0 2.451vw;
}
.bar-graphic>.legend {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}
.bar-graphic>.legend>div {
    width: 7.157vw;
    margin: 0 1.471vw;
    text-align: center;
    font: 1.078vw main_sans, sans-serif;
    padding-top: 0.49vw;
}
.bar-graphic>.bars .bar-1 {
    background-color: #f1640d;
    color: #fff;
    height: 18.431vw;
    line-height: 18.431vw;
}
.bar-graphic>.bars .bar-2 {
    background-color: #f38c11;
    color: #fff;
    height: 10.294vw;
    line-height: 10.294vw;
}
.bar-graphic>.bars .bar-3 {
    background-color: #fbc415;
    color: #fff;
    height: 4.118vw;
    line-height: 4.118vw;
}


.circle-graphic {
    display: flex;
    flex-direction: row;
    width: 86.275vw;
    position: relative;
    left: 50%;
    margin-left: -43.137vw;
    padding: 3.922vw 0;
}
.circle-graphic>.group {
    display: block;
    flex: 1 1 auto;
}
.circle-graphic>.group>.caption {
    text-align: center;
    font: bold 1.569vw title, serif;
    margin-bottom: 2.451vw;
}
.circle-graphic>.group>.circles>div {
    text-align: center;
    width: 50%;
    flex: 1 1 auto;
}
.circle-graphic>.group>.circles {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.circle-graphic>.group>.circles>div>span {
    display: block;
    width: 11.765vw;
    height: 11.765vw;
    border-radius: 50%;
    background: #ccc;
    color: #fff;
    font: 3.039vw/11.765vw title, serif;
    overflow: hidden;
    text-align: center;
    margin: 0 auto 0.98vw auto;
}
.circle-graphic>.group>.circles>div.circle-1 {
    margin-top: 3.431vw;
    margin-bottom: 2.451vw;
}
.circle-graphic>.group>.circles>div.circle-2 {
    margin-right: 6.863vw;
    margin-left: -6.863vw;
    margin-bottom: 3.922vw;
    margin-top: 1.471vw;
}
.circle-graphic>.group>.circles>div.circle-3 {
    margin-right: -6.863vw;
    margin-left: 6.863vw;
}
.circle-graphic>.group>.circles>div.circle-4 {
    margin-top: -3.431vw;
}
.circle-graphic>.group>.circles>div.circle-1>span {
    background: #3f94bd;
}
.circle-graphic>.group>.circles>div.circle-2>span {
    background: #f38c11;
    width: 8.824vw;
    height: 8.824vw;
    line-height: 8.824vw;
    font-size: 2.353vw;
}
.circle-graphic>.group>.circles>div.circle-3>span {
    background: #fbc415;
    width: 7.353vw;
    height: 7.353vw;
    line-height: 7.353vw;
    font-size: 1.765vw;
}
.circle-graphic>.group>.circles>div.circle-4>span {
    background: #feb75d;
    width: 5.882vw;
    height: 5.882vw;
    line-height: 5.882vw;
    font-size: 1.373vw;
}
.thermometer-2sided {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 3.2vw;
    position: relative;
    margin: 2.353vw 0;
}
.thermometer-2sided i.ball {
    position: absolute;
    top: 50%;
}
.thermometer-2sided i.ball::before {
    background: #d42503;
    background: linear-gradient(45deg, #d42503, #feb65b);
}
.thermometer-2sided div.caption {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    text-align: center;
    font: bold 1.569vw title, serif;
}
.thermometer-2sided .side-1,
.thermometer-2sided .side-2 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
}
.thermometer-2sided .side-1 {
    text-align: right;
    padding-right: 1.961vw;
    font-size: 2.647vw;
    font-family: title, sans-serif;
    font-weight: bold;
    line-height: 5.5vw;
    border-right: 2px solid #000;
}
.thermometer-2sided .side-2 {
    text-align: left;
    padding-left: 1.961vw;
    line-height: 5.5vw;
    font-size: 1.275vw;
}
div.kpi i.ball.orange::before {
    left: 50%;
    width: 3.922vw;
    height: 3.922vw;
    margin-left: 2.941vw;
    animation: alternate 3s animation_2 linear infinite;
}
@keyframes animation_2 {
    0% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); opacity: 1; animation-timing-function: linear}
    100% {transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,23,10,0,1); opacity: 1; }
}
div.kpi i.ball.blue::before {
    left: 50%;
    width: 2.451vw;
    height: 2.451vw;
    margin-left: 9.843vw;
    top: 3.641vw;
    animation: alternate 4s animation_3 linear infinite;
}
@keyframes animation_3 {
    0% {transform: translate3d(0px,0px,0) rotate(0deg) scale(1); opacity: 1; animation-timing-function: linear}
    100% {transform: translate3d(-6px,2px,0) rotate(120deg) scale(1); opacity: 1; }
}
i.ball.h2::before {
    top: 7.059vw;
    margin-left: 0.196vw;
}
.infographic-series {
    padding: 2.353vw 0;
}
.infographic-series .item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.infographic-series .item:nth-child(even) {
    flex-direction: row-reverse;
}
.infographic-series img {
    width: 17.549vw;
    height: 25.882vw;
}
.infographic-series span {
    text-align: center;
    display: block;
    font: 1.176vw quotes, serif;
    width: 17.647vw;
}
.infographic-series span>strong {
    text-align: center;
    display: block;
    font: bold 6.961vw title, serif;
    z-index: 2;
    position: relative;
}
.infographic-series i.ball {
    left: 50%;
    top: 4.118vw;
    margin-left: 0.784vw;
    z-index: 1;
}
.infographic-series i.ball::before {
    width: 2.353vw;
    height: 2.353vw;
}

@media only screen and (max-width: 480px) {
    section.head {
        padding-bottom: 18.444vw;
    }
    .thermometer-2sided {
        padding-top: 11.667vw;
    }
    .thermometer-2sided i.ball {
        display: none;
    }
    .thermometer-2sided div.caption {
        font-size: 4.444vw;
    }
    .thermometer-2sided .side-1 {
        font-size: 6.944vw;
        line-height: 12.5vw;
        border-right: none;
    }
    .thermometer-2sided .side-2 {
        line-height: 12.5vw;
        font-size: 3.611vw;
    }
    i.ball.kpi::before {
        width: 11.111vw;
        height: 11.111vw;
        top: 12.222vw;
        left: 50%;
        margin-left: 6.667vw;
    }
    i.ball.kpi.small::before {
        width: 6.667vw;
        height: 6.667vw;
        top: 13.333vw;
        left: 50%;
        margin-left: 23.333vw;
    }
    i.sofa {
        width: 91.667vw;
        height: 75vw;
    }
    .circle-graphic {
        width: auto;
        display: block;
        margin-left: 0;
        padding: 8.333vw 0 0 0;
        left: auto;
        font-size: 2.778vw;
    }
    .circle-graphic>.group {
        padding-bottom: 11.111vw;
    }
    .circle-graphic>.group>.caption {
        font-size: 4.444vw;
        margin-bottom: 3.333vw;
    }
    .circle-graphic>.group>.circles>div>span {
        width: 33.333vw;
        height: 33.333vw;
        font: 8.333vw/33.333vw title, serif;
        margin: 0 auto 2.778vw auto;
    }
    .circle-graphic>.group>.circles>div.circle-1 {
        margin-top: 9.722vw;
        margin-bottom: 6.944vw;
    }
    .circle-graphic>.group>.circles>div.circle-2 {
        margin-right: 8.333vw;
        margin-left: -8.333vw;
        margin-bottom: 11.111vw;
        margin-top: 4.167vw;
    }
    .circle-graphic>.group>.circles>div.circle-3 {
        margin-right: -19.444vw;
        margin-left: 19.444vw;
    }
    .circle-graphic>.group>.circles>div.circle-4 {
        margin-top: -9.722vw;
        margin-right: -5.556vw;
        margin-left: 5.556vw;
    }
    .circle-graphic>.group>.circles>div.circle-1>span {
    }
    .circle-graphic>.group>.circles>div.circle-2>span {
        width: 25vw;
        height: 25vw;
        line-height: 25vw;
        font-size: 6.667vw;
    }
    .circle-graphic>.group>.circles>div.circle-3>span {
        width: 20.833vw;
        height: 20.833vw;
        line-height: 20.833vw;
        font-size: 5vw;
    }
    .circle-graphic>.group>.circles>div.circle-4>span {
        width: 16.667vw;
        height: 16.667vw;
        line-height: 16.667vw;
        font-size: 3.889vw;
    }
    .bar-graphic {
        padding: 8.333vw 0;
    }
    .bar-graphic>.caption {
        font-size: 4.444vw;
        margin-bottom: 6.667vw;
    }
    .bar-graphic>.bars>div {
        width: 14.722vw;
        font-size: 3.889vw;
        margin: 0 6.944vw;
    }
    .bar-graphic>.legend>div {
        width: 20.278vw;
        margin: 0 4.167vw;
        font-size: 3.333vw;
        padding-top: 1.389vw;
    }
    .bar-graphic>.bars .bar-1 {
        height: 52.222vw;
        line-height: 52.222vw;
    }
    .bar-graphic>.bars .bar-2 {
        height: 29.167vw;
        line-height: 29.167vw;
    }
    .bar-graphic>.bars .bar-3 {
        height: 12.222vw;
        line-height: 12.222vw;
    }
    div.kpi i.ball.orange::before {
        width: 11.111vw;
        height: 11.111vw;
        margin-left: 8.333vw;
    }
    div.kpi i.ball.blue::before {
        width: 6.944vw;
        height: 6.944vw;
        margin-left: 22.222vw;
        top: 8.333vw;
    }
    i.ball.h2::before {
        top: 13.333vw;
        margin-left: 0.556vw;
    }
    .infographic-series {
        padding: 8.333vw 0;
    }
    .infographic-series>.item {
        padding-bottom: 8.333vw;
    }
    .infographic-series img {
        width: 37.5vw;
        height: 55.556vw;
    }
    .infographic-series span {
        font-size: 3.333vw;
        width: 37.5vw;
    }
    .infographic-series span>strong {
        font-size: 20vw;
    }
    .infographic-series i.ball {
        top: 11.667vw;
        margin-left: 2.222vw;
    }
    .infographic-series i.ball::before {
        width: 6.667vw;
        height: 6.667vw;
    }
}

ol.ig-series {
	list-style-type: none; 
	counter-reset: num;
	margin: 0 0 0 6vw;
	padding: 1.5vw 0 0.5vw 0;
}
ol.ig-series li {
	position: relative;	
	margin: 0 0 0 0;
	padding: 0 0 3.5vw 0;
    font-size: 1.75vw;
}
ol.ig-series li:before {
	content: counter(num); 
	counter-increment: num;
	display: inline-block;
	position: absolute;
    top: -0.35vw;
    left: -6.5vw;
    width: 6.5vw;
    text-align: center;
    font: bold 4.5vw title,sans-serif;
}
ol.ig-series li span {
	font-size: 1.275vw;
    position: absolute;
    top: 2vw;
}
@media only screen and (max-width: 480px) {
    ol.ig-series {
        margin: 0 0 0 12vw;
        padding: 3vw 0 1vw 0;
    }
    ol.ig-series li {
        padding: 0 0 7vw 0;
        font-size: 3.5vw;
    }
    ol.ig-series li:before {
        top: -0.7vw;
        left: -13vw;
        width: 13vw;
        font: bold 9vw title,sans-serif;
    }
    ol.ig-series li span {
        font-size: 2.55vw;
        top: 4vw;
    }
}