body.page-toilet section.nav {
    background: #faf4f4;
}
body.page-toilet {
    background: #faf4f4 center bottom url(../img/toilet-footer.png) no-repeat;
    background-size: contain;
    overflow-x: hidden;
}
body.page-toilet section.content {
    padding-bottom: 12.843vw;
}
i.ball.ball1 {
    margin-left: -1.961vw;
    top: -1.463vw;
    z-index: 1;
}
i.ball.ball2 {
    top: -0.784vw;
    margin-left: -0.588vw;
    animation: 8s v-tictac linear infinite;
}
i.ball.ball3 {
    top: -0.784vw;
    margin-left: -0.588vw;
    animation: 8s v-tictac linear infinite;
}
div.bath {
    background: center center url(../img/toilet-bath-wall.png) no-repeat;
    background-size: contain;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    height: 25.49vw;
    width: 100vw;
    margin-top: -2.353vw;
    margin-bottom: -10.784vw;
}
div.infographic {
    width: 81.373vw;
    position: relative;
    left: 50%;
    margin-left: -40.686vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 11.765vw;
    background: center bottom url(../img/toilet-infographic-plate.png) no-repeat;
    background-size: contain;
}
div.infographic>.col.image {
    margin: 0 -5.882vw;
    background: center 4.118vw url(../img/wave-black.png) no-repeat;
    background-size: 3.922vw 2.451vw;
    z-index: 1;
    position: relative;
}
div.infographic>.col.image::after {
    content: "";
    display: block;
    background: center center url(../img/toilet-infographic-towel.png) no-repeat;
    background-size: contain;
    width: 4.02vw;
    height: 10.98vw;
    z-index: 2;    
    position: absolute;
    left: 50%;
    margin-left: -2.157vw;
    top: 4.314vw;
    animation: animation_towel 6s infinite both;
    animation-direction: alternate;
}
i.ball.center.peach.t0h::before {
    top: .28vw;
}
@keyframes animation_towel {
	0% {transform: translate3d(0vw,0vw,0) rotate(0deg) scale(1); opacity: 1; animation-timing-function: linear}
	50% {transform: translate3d(0.686vw,-0.098vw,0) rotate(-6deg) scale(1); opacity: 1; animation-timing-function: linear}
	100% {transform: translate3d(-0.49vw,-0.098vw,0) rotate(6deg) scale(1); opacity: 1; }
}
div.infographic>.col {
    width: 20.588vw;
    flex: 0 0 auto;
    text-align: center;
    font-family: quotes, serif;
    font-size: 1.176vw;
    margin: 3.137vw 3.137vw 0 3.137vw;
}
div.infographic>.col:nth-child(2) {
    margin-top: 7.843vw;
}
div.infographic>.col>strong {
    display: block;
    text-align: center;
    font-family: title, serif;
    font-weight: bold;
    font-size: 4.118vw;
    padding-bottom: 1.961vw;
}

div.animation-gradus {
    position: relative;
}
div.animation-gradus ul {
    position: relative;
    border-left: 2px solid #004a7e;
    padding: 0.98vw 0 0.98vw 3.922vw;
    list-style: none;
}
div.animation-gradus ul li {
    font-family: main_serif, serif;
    font-size: 1.275vw;
}
div.animation-gradus ul li+li {
    padding-top: 2.353vw;
}
div.animation-gradus i.ball {
    position: absolute;
    top: 10%;
    z-index: 5;
}
div.animation-gradus i.ball::before {
    width: 1.667vw;
    height: 1.667vw;
    background: #ffd4c9;
    background-image: linear-gradient(135deg, #ffd4c9, #ffbaaa);
}
div.books-stack {
    position: relative;
}
div.books-stack>i {
    position: absolute;
    display: block;
    right: -10.196vw;
}
div.books-stack>i.book1 {
    background: center center url(../img/toilet-books-1.png) no-repeat;
    background-size: contain;
    width: 5.784vw;
    height: 1.667vw;
    top: -2.451vw;
    right: -12.353vw;
}
div.books-stack>i.book2 {
    background: center center url(../img/toilet-books-2.png) no-repeat;
    background-size: contain;
    width: 7.549vw;
    height: 1.471vw;
    top: -1.176vw;
    right: -10.098vw;
}
div.books-stack>i.book3 {
    background: center center url(../img/toilet-books-3.png) no-repeat;
    background-size: contain;
    width: 6.275vw;
    height: 2.745vw;
    top: -0.784vw;
}
div.books-stack>i.phone {
    width: 5.294vw;
    height: 5.196vw;
    background: center center url(../img/toilet-smartphone.png) no-repeat;
    background-size: contain;
    top: -14.706vw;
    right: -16.667vw;
}
i.flasks {
    display: block;
    width: 16.078vw;
    height: 6.176vw;
    background: center center url(../img/toilet-flasks.png) no-repeat;
    background-size: contain;
    position: absolute;
    right: -19.216vw;
    top: 0.98vw;
}
i.rolling-phone-1 {
    display: block;
    width: 3.725vw;
    height: 6.765vw;
    background: center center url(../img/toilet-smartphone-2.png) no-repeat;
    background-size: contain;
    position: absolute;
    right: -14.118vw;
    top: -1.961vw;
    transform: rotateZ(-21deg);
    animation: animation_rolling 9s linear infinite both;
    animation-direction: alternate;
}
@keyframes animation_rolling {
	0% { transform: translate3d(0vw,0vw,0) rotate(0deg); }
	100% { transform: translate3d(-4.314vw,3.627vw,0) rotate(77deg); }
}
i.rolling-book-1 {
    display: block;
    width: 5.294vw;
    height: 7.157vw;
    background: center center url(../img/toilet-book.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: -17.647vw;
    top: 0vw;
    animation: animation_rolling_book 9s linear infinite both;
    animation-direction: alternate;
}
@keyframes animation_rolling_book {
	0% { transform: translate3d(0vw,0vw,0) rotate(0deg); }
	100% { transform: translate3d(0.588vw,5.588vw,0) rotate(77deg); }
}
i.rolling-book-2 {
    display: block;
    width: 4.706vw;
    height: 5.98vw;
    background: center center url(../img/toilet-book-2.png) no-repeat;
    background-size: contain;
    position: absolute;
    left: -17.647vw;
    top: -3.922vw;
    animation: animation_rolling_book 9s linear infinite both;
    animation-direction: alternate;
}

@media only screen and (max-width: 480px) {
    div.books-stack {
        display: none;
    }
    i.flasks {
        display: none;
    }
    i.rolling-phone-1 {
        display: none;
    }
    i.rolling-book-1 {
        display: none;
    }
    i.rolling-book-2 {
        display: none;
    }
    .mobile-only.m-phone-1 {
        display: block;
        width: 15vw;
        height: 14.722vw;
        position: relative;
        animation: animation-rotate 4s linear infinite both;
        animation-direction: alternate;
        float: right;
        background: center center url(../img/toilet-smartphone.png) no-repeat;
        background-size: contain;
    }
    .mobile-only.m-book-1 {
        display: block;
        width: 11.944vw;
        height: 16.111vw;
        position: relative;
        animation: animation-rotate 4s linear infinite both;
        animation-direction: alternate;
        float: right;
        background: center center url(../img/toilet-book.png) no-repeat;
        background-size: contain;
    }
    @keyframes animation-rotate {
        0% { transform: rotate(-30deg); }
        100% { transform: rotate(30deg); }
    } 
    i.ball.ball1::before {
        margin-left: -6.111vw;
        top: -3.278vw;
        background: linear-gradient(-90deg, #a9fafb, #05d3fb);
    }
    i.ball.ball2::before {
        top: -2.222vw;
        margin-left: -2.222vw;
        background: linear-gradient(-90deg, #a9fafb, #05d3fb);
    }
    i.ball.ball3::before {
        top: -2.222vw;
        margin-left: -2.222vw;
        background: linear-gradient(135deg, #ff9e88, #ffd7ce);
    }
    section.content p.photo {
        font-size: 2.778vw;
        padding: 4.444vw 0;
    }
    section.content p.photo img {
        margin-bottom: 4.444vw;
    }
    div.bath {
        background-image: url(../img/toilet-bath-wall-m.png);
        background-size: cover;
        height: 55.556vw;
        margin-top: -5.556vw;
        margin-bottom: -20vw;
    }
    div.infographic {
        width: auto;
        left: auto;
        margin-left: 0;
        display: block;
        padding-bottom: 7.778vw;
        background-position: left bottom;
        background-size: auto 26.667vw;
    }
    div.infographic>.col {
        width: auto;
        position: relative;
        font-size: 3.889vw;
        margin: 8.889vw 0 8.889vw 0;
        padding: 0 8.889vw 8.889vw 8.889vw;
    }
    div.infographic>.col::before {
        background: center center url(../img/wave-black.png) no-repeat;
        background-size: contain;
        width: 11.111vw;
        height: 6.944vw;
        content: "";
        position: absolute;
        left: 50%;
        margin-left: -5.556vw;
        top: -8.333vw;
        display: block;
    }
    div.infographic>.col:nth-child(2) {
        margin-top: inherit;
    }
    div.infographic>.col>strong {
        font-size: 10vw;
        padding-bottom: 4.444vw;
    }
    div.infographic>.col.image {
        position: relative;
        background: center center url(../img/toilet-smartphone-2.png) no-repeat;
        background-size: contain;
        width: 10.556vw;
        height: 19.167vw;
        margin: -8.889vw 3.333vw -19.167vw auto;
        padding: 0;
        animation: animation-rotate 4s linear infinite both;
        animation-direction: alternate;
    }
    div.infographic>.col.image::before {
        display: none;
    }
    div.infographic>.col.image::after {
        display: none;
    }
    div.animation-gradus ul {
        padding: 2.778vw 0 2.778vw 11.111vw;
    }
    div.animation-gradus ul li {
        font-size: 3.611vw;
    }
    div.animation-gradus ul li+li {
        padding-top: 5.556vw;
    }
    div.animation-gradus i.ball {
        top: 10%;
        animation: gradusnik 8s linear infinite;
    }
    div.animation-gradus i.ball::before {
        width: 4.722vw;
        height: 4.722vw;
        left: -1.5vw;
        margin-top: -2.5vw;
    }
    body.page-toilet {
        background-image: url(../img/toilet-footer-m.png);
        background-position: center bottom -52.778vw;
    }
    body.page-toilet section.content {
        padding-bottom: 54vw;
    }
    i.ball.center.peach.t0h::before {
        top: -2.2vw;
    }
}