section.head {
    padding-top: 45vw;
    position: relative;
}
section.content > blockquote,
section.content > p {
    position: relative;
    z-index: 5;
}
section.content > div {
    z-index: 3;
}

div.ig {
    position: relative;
    width: 69.8vw;
    height: 54.0vw;
    margin-left: -11vw;
    margin-top: 4vw;
}
div.ig .cols {
    display: block;
    position: absolute;
    top: 1vw;
    left: 8vw;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    width: 48.7vw;
    height: 27.1vw;
    z-index: 2;
}
div.ig .cols > i {
    display: block;
    position: absolute;
    bottom: 0;
    left: 2.4vw;
    width: 5.6vw;
    height: 21.1vw;
    background: linear-gradient(90deg, #9CF473 0%, #51CE74 100%);
    transform-origin: bottom;
}
div.ig .cols > i > b {
    display: block;
    position: absolute;
    font-style: normal;
    font-weight: 700;
    top: -2.2vw;
    text-align: center;
    width: 5.6vw;
    font-size: 1.4vw;
}

div.ig .cols > i:nth-child(2) {
    left: 10.0vw;
    height: 9.8vw;
    background: linear-gradient(90deg, #9CF473 0%, #51CE74 100%);
}
div.ig .cols > i:nth-child(3) {
    left: 17.7vw;
    height: 8.5vw;
    background: linear-gradient(90deg, #9CF473 0%, #51CE74 100%);
}
div.ig .cols > i:nth-child(4) {
    left: 25.4vw;
    height: 11.9vw;
    background: linear-gradient(90deg, #F47944 0%, #D73019 100%);
}
div.ig .cols > i:nth-child(5) {
    left: 33.0vw;
    height: 8.6vw;
    background: linear-gradient(90deg, #F47944 0%, #D73019 100%);
}
div.ig .cols > i:nth-child(6) {
    left: 40.7vw;
    height: 5.4vw;
    background: linear-gradient(90deg, #F47944 0%, #D73019 100%);
}
div.ig .digits {
    display: block;
    position: absolute;
    top: 1vw;
    left: 4vw;
    width: 4vw;
    height: 27.1vw;
    z-index: 1;
}
div.ig .digits > i {
    display: block;
    position: absolute;
    font-style: normal;
    font-weight: 400;
    font-size: 1.4vw;
    text-align: right;
    width: 3vw;
}
div.ig .digits > i:nth-child(1) {
    top: -1vw;
}
div.ig .digits > i:nth-child(2):after {
    content: "";
    display: block;
    border-top: 1px solid #000;
    width: 48.7vw;
    height: 0;
    position: absolute;
    left: 1vw;
    top: 0;
}
div.ig .digits > i:nth-child(2) {
    top: 4.45vw;
}
div.ig .digits > i:nth-child(3) {
    top: 9.9vw;
}
div.ig .digits > i:nth-child(4) {
    top: 15.35vw;
}
div.ig .digits > i:nth-child(5) {
    top: 20.8vw;
}
div.ig .digits > i:nth-child(6) {
    top: 26.2vw;
}
div.ig .digits > i:nth-child(2):after,
div.ig .digits > i:nth-child(3):after,
div.ig .digits > i:nth-child(4):after,
div.ig .digits > i:nth-child(5):after {
    content: "";
    display: block;
    border-top: 1px solid #000;
    width: 48.7vw;
    height: 0;
    position: absolute;
    left: 4vw;
    top: 0.9vw;
}
div.ig .legend {
    display: flex;
    position: absolute;
    top: 32vw;
    left: 12vw;
    width: 46vw;
    flex-direction: row;
}
div.ig .legend > div {
    display: block;
    width: 50%;
}
div.ig .legend > div > p {
    display: block;
    margin: 0 0 2vw 0;
    padding: 0 0 0 2.4vw;
    position: relative;
}
div.ig .legend > div > p:before {
    display: block;
    position: absolute;
    content: "";
    width: 1.4vw;
    height: 1.4vw;
    background: linear-gradient(90deg, #9CF473 0%, #51CE74 100%);
    top: 0.3vw;
    left: 0;
}
div.ig .legend > div:last-child > p:before {
    background: linear-gradient(90deg, #F47944 0%, #D73019 100%);
}

div.top-top {
    position: absolute;
    top: 3vw;
    left: 8vw;
    width: 82vw;
    height: 42.9vw;
}
div.top-top > i {
    position: absolute;
    display: block;
    top: -6vw;
    left: 18vw;
    width: 47.6vw;
    height: 53.2vw;
    background: url(../img/remotely/top.png) no-repeat;
    background-size: contain;
}

div.bicycle {
    position: relative;
    width: 69.8vw;
    height: 46.0vw;
    margin-left: -11vw;
    background: url(../img/remotely/bicycle-back.png) no-repeat;
    background-size: contain;
    margin-bottom: 6vw;
}
div.bicycle > i {
    display: block;
    position: absolute;
    width: 69.8vw;
    height: 44.1vw;
    background: url(../img/remotely/bicycle-man.png) no-repeat;
    background-size: contain;
    left: 0;
    top: 5vw;
}

div.poses {
    position: relative;
    width: 69.8vw;
    height: 46.0vw;
    margin-left: -11vw;
}
div.poses > i.man-1 {
    display: block;
    position: absolute;
    width: 30.0vw;
    height: 20.3vw;
    background: url(../img/remotely/poses-1.png) no-repeat;
    background-size: contain;
    left: 2vw;
    top: 1vw;
}
div.poses > i.man-2 {
    display: block;
    position: absolute;
    width: 32.1vw;
    height: 20.3vw;
    background: url(../img/remotely/poses-2.png) no-repeat;
    background-size: contain;
    left: 34vw;
    top: 1vw;
}
div.poses > i.man-3 {
    display: block;
    position: absolute;
    width: 30.4vw;
    height: 21.6vw;
    background: url(../img/remotely/poses-3.png) no-repeat;
    background-size: contain;
    left: 6vw;
    top: 22vw;
}
div.poses > i.man-4 {
    display: block;
    position: absolute;
    width: 31.5vw;
    height: 22.4vw;
    background: url(../img/remotely/poses-4.png) no-repeat;
    background-size: contain;
    left: 32vw;
    top: 20vw;
}

div.fire {
    position: relative;
    width: 69.8vw;
    height: 46.0vw;
    margin-left: -11vw;
    margin-bottom: 4vw;
}
div.fire > i.girl {
    display: block;
    position: absolute;
    width: 67.9vw;
    height: 48.5vw;
    background: url(../img/remotely/fire-girl.png) no-repeat;
    background-size: contain;
    left: 0;
    top: 0;
    z-index: 3;
}
div.fire:before {
    display: block;
    position: absolute;
    content: "";
    width: 67.9vw;
    height: 48.5vw;
    background: #fff;
    left: 0;
    top: 40vw;
    z-index: 2;
}
div.fire > i.fire {
    display: block;
    position: absolute;
    width: 67.9vw;
    height: 48.5vw;
    background: url(../img/remotely/fire.png) no-repeat;
    background-size: contain;
    left: 0;
    top: 0;
    z-index: 1;
}

div.conf {
    position: relative;
    width: 69.8vw;
    height: 52.0vw;
    margin-left: -11vw;
}
div.conf > i {
    display: block;
    position: absolute;
    width: 63.5vw;
    height: 53.1vw;
    background: url(../img/remotely/conf.png) no-repeat;
    background-size: contain;
    left: 3vw;
    top: -4vw;
}

section.content > ol {
    position: relative;
}
section.content > ol:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4vw;
    width: 1px;
    background: #000;
}
section.content > ol > li:last-child {
    display: block;
    position: absolute;
    color: transparent;
    content: "";
    width: 2.9vw;
    height: 2.9vw;
    border-radius: 50%;
    background: linear-gradient(90deg, #FD9A59 0%, #F8D59A 100%);
    top: 0%;
    left: -5.4vw;

}

@media only screen and (max-width: 480px) {
    section.head {
        padding-top: 55vw;
    }
    div.top-top {
        top: 12vw;
    }
    
    div.ig {
        width: 94vw;
        height: 80vw;
        margin-left: 0vw;
    }
    div.ig .cols {
        top: 1.5vw;
        left: 12vw;
        width: 73vw;
        height: 40.7vw;
    }
    div.ig .cols > i {
        bottom: 0;
        left: 3.6vw;
        width: 8.4vw;
        height: 31.7vw;
    }
    div.ig .cols > i > b {
        top: -3.3vw;
        width: 8.4vw;
        font-size: 2.1vw;
    }
    
    div.ig .cols > i:nth-child(2) {
        left: 15.0vw;
        height: 14.7vw;
    }
    div.ig .cols > i:nth-child(3) {
        left: 26.6vw;
        height: 12.8vw;
    }
    div.ig .cols > i:nth-child(4) {
        left: 38.1vw;
        height: 17.9vw;
    }
    div.ig .cols > i:nth-child(5) {
        left: 49.5vw;
        height: 12.9vw;
    }
    div.ig .cols > i:nth-child(6) {
        left: 61vw;
        height: 8.1vw;
    }
    div.ig .digits {
        top: 1.5vw;
        left: 6vw;
        width: 6vw;
        height: 40.7vw;
    }
    div.ig .digits > i {
        font-size: 2.1vw;
        width: 4.5vw;
    }
    div.ig .digits > i:nth-child(1) {
        top: -1.5vw;
    }
    div.ig .digits > i:nth-child(2) {
        top: 6.68vw;
    }
    div.ig .digits > i:nth-child(3) {
        top: 14.85vw;
    }
    div.ig .digits > i:nth-child(4) {
        top: 23vw;
    }
    div.ig .digits > i:nth-child(5) {
        top: 31.2vw;
    }
    div.ig .digits > i:nth-child(6) {
        top: 39.8vw;
    }
    div.ig .digits > i:nth-child(2):after,
    div.ig .digits > i:nth-child(3):after,
    div.ig .digits > i:nth-child(4):after,
    div.ig .digits > i:nth-child(5):after {
        width: 73vw;
        left: 6vw;
        top: 1.4vw;
    }
    div.ig .legend {
        top: 46vw;
        left: 2vw;
        width: 88vw;
    }
    div.ig .legend > div > p {
        margin: 0 0 2vw 0;
        padding: 0 0 0 2.8vw;
        font-size: 2.8vw;
    }
    div.ig .legend > div > p:before {
        width: 2.1vw;
        height: 2.1vw;
        top: 1vw;
    }
    div.bicycle {
        margin-left: 10vw;
    }
    div.poses {
        margin-left: 10vw;
    }
    div.fire {
        margin-left: 10vw;
    }
    div.conf {
        margin-left: 10vw;
    }
    section.content > ol:before {
        left: 0;
    }
    section.content > ol > li:last-child {
        width: 5vw;
        height: 5vw;
        left: -2.5vw;
    }
}