/*------------ font family ----------*/
@font-face { font-family:main; src:url(../font/AvenirNextLTPro-Bold.otf) } 
@font-face { font-family:footer; src:url(../font/AvenirNextLTPro-BoldCn.otf) } 
@font-face { font-family:footer-text; src:url(../font/AvenirNextLTPro-Demi.otf) } 
@font-face { font-family:bold-cn; src:url(../font/AvenirNextLTPro-BoldCn.otf) } 
@font-face { font-family:medium-cn; src:url(../font/AvenirNextLTPro-MediumCn.otf) } 
@font-face { font-family:light; src:url(../font/AvenirLT35Light.ttf) } 
@font-face { font-family:regular; src:url(../font/AvenirNextLTPro-Regular.otf) } 
/*-------------------*/
.wow {visibility: hidden;}
body {
    background: #E3B56B;
}
.close {
    text-decoration: none;position: absolute; right: 10px;top: 10px;color: #fff; font-size: 25px; font-family: medium-cn; border-radius: 100%; border : 1px solid #fff; padding: 4px 12px; cursor: pointer; z-index: 2;
}
main{
    width: 1260px;
    background: url(../img/janitorial-room/bg.png) no-repeat;
    height: 600px;
    background-size: contain;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
main > div, main > a {position: absolute; background-size: contain; background-repeat: no-repeat;}
.back {
    position: absolute;
    left: 10px;
    top: 10px;
    background: #fff;
    color: #000;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    font-family: regular;
}
.mirror{
    width: 130px;
    height: 150px;
    background-image: url(../img/janitorial-room/mirror.png);
    top: 30px;
    left: 50px;
}
.wash-basin{
    width: 150px;
    height: 245px;
    background-image: url(../img/janitorial-room/wash-basin.png);
    top: 210px;
    left: 50px;
    z-index: 2;
}

.geyser{
    width: 74px;
    height: 115px;
    background-image: url(../img/janitorial-room/geyser.png);
    top: 144px;
    left: 220px;
    z-index: 2;
}
.pipe-1{
    width: 33px;
    height: 115px;
    background-image: url(../img/janitorial-room/pipe-1.png);
    top: 200px;
    left: 266px;
    z-index: 1;
}
.pipe-2{
    width: 160px;
    height: 115px;
    background-image: url(../img/janitorial-room/pipe-2.png);
    top: 190px;
    left: 176px;
    transform: rotate(-20deg);
    z-index: 1;
}
.tiles{
    width: 304px;
    height: 420px;
    background-image: url(../img/janitorial-room/tiles.png);
    top: -2px;
    left: 246px;
    z-index: 0;
}
.bucket {
    width: 95px;
    height: 125px;
    background-image: url(../img/janitorial-room/bucket.png);
    top: 330px;
    left: 230px;
    z-index: 2;
}
.pent {
    width: 85px;
    height: 182px;
    background-image: url(../img/janitorial-room/pent.png);
    top: 100px;
    left: 340px;
    z-index: 2;
}
.powder {
    width: 205px;
    height: 72px;
    background-image: url(../img/janitorial-room/powder.png);
    top: 20px;
    left: 300px;
    z-index: 2;
}
.broom {
    width: 195px;
    height: 242px;
    background-image: url(../img/janitorial-room/broom.png);
    top: 240px;
    left: 360px;
    z-index: 2;
}
.stand {
    width: 195px;
    height: 425px;
    background-image: url(../img/janitorial-room/stand.png);
    top: 40px;
    left: 640px;
    z-index: 2;
}
.sprey {
    width: 65px;
    height: 45px;
    background-image: url(../img/janitorial-room/sprey.png);
    top: 16px;
    left: 18px;
    z-index: 2;
    position: absolute;
    background-size: contain;
}
.sprey:nth-child(2) {left: 108px;}

.bottle {
    width: 56px;
    height: 57px;
    background-image: url(../img/janitorial-room/bottle-4.png);
    top: 76px;
    left: 23px;
    z-index: 2;
    position: absolute;
    background-size: contain;
}
.bottle-2 {background-image: url(../img/janitorial-room/bottle-2.png);}
.bottle-3 {background-image: url(../img/janitorial-room/bottle-3.png);}

.bottle:nth-child(odd) {
    left: 110px;
}
.bottle:nth-child(3),.bottle:nth-child(4) {
    background-image: url(../img/janitorial-room/bottle.png);
}

.bottle:nth-child(5),.bottle:nth-child(6) {
    top:158px;
}

.bottle:nth-child(7),.bottle:nth-child(8) {
    top:228px;
}
.stand .bucket{
    width: 72px;
    height: 47px;
    background-image: url(../img/janitorial-room/bucket.png);
    top: 303px;
    left: 17px;
    z-index: 2;
    position: absolute;
    background-size: contain;
}

.stand .bucket-2 {background-image: url(../img/janitorial-room/bucket-2.png);}
.stand .bucket-3 {background-image: url(../img/janitorial-room/bucket-3.png);}

.stand .bucket:nth-child(10){
    left: 106px;
}
.stand .bucket:nth-child(11){
    left: 17px;
    top: 363px;
    width: 43px;
    height: 53px;
}
.stand .bottle:nth-child(12){
    left: 51px;
    top: 360px;
    width: 43px;
    height: 60px;
}
.stand .bucket:nth-child(13){
    left: 109px;
    top: 362px;
    width: 46px;
    height: 57px;
}
.stand .bottle:nth-child(14){
    left: 141px;
    top: 360px;
    width: 43px;
    height: 65px;
}

.trolly{
    width: 222px;
    height: 287px;
    background-image: url(../img/janitorial-room/trolly.png);
    top: 183px;
    right: 167px;
    z-index: 2;
}

.certificate-1, .certificate-2{
    width: 114px;
    height: 150px;
    background-image: url(../img/janitorial-room/certificate-1.png);
    top: 20px;
    right: 167px;
    z-index: 2;
    transition: all 0.3s;
    transform: scale(1);
    transform-origin: top center;
}
.certificate-1:hover, .certificate-2:hover{
    transform: scale(1.1);
    z-index: 5;
    box-shadow: 7px 6px 6px 3px #00000061
}

.certificate-2{
    background-image: url(../img/janitorial-room/certificate-2.png);
    right: 37px;
}

footer {
    background: #000;
    font-family: medium-cn;
    overflow: auto;
    display: flex;
    margin-top: -2px;
    z-index: 2;
    position: relative;
}

footer .box {
    border: 2px solid blue;
    background: #fff;
    padding:20px 20px 20px 70px;
    max-width: 980px;
    width: 100%;
    margin:50px; 
    text-align: center;
}

footer .box h3 {
    background: #ff0;
    color: #000;
    text-transform: uppercase;
    border-radius: 50px;
    display: inline-block;
    padding: 10px 30px;
    font-size: 40px;
    transform: translateY(-50px);
}

footer .box ul {
    text-align: left;
    color: #0B407A;
    font-family: footer-text;
}

footer .box ul li {
    margin-bottom: 18px;
    position: relative;
    padding-left: 30px;
}
footer .box ul li:after {
    background: #0b3d71;
    display: inline-block;
    position: absolute;
    left: -5px;
    top: 0px;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    content: '';
}
footer .box ul li:before {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid #fff;
    position: absolute;
    content: '';
    top: 5px;
    left: 1px;
    z-index: 1;
}

footer .side-img {
    border-radius: 100%;
    border: 5px dashed #fff;
    background: url(../img/janitorial-room/basket.png) no-repeat;
    width: 250px;
    height: 250px;
    background-size: 80%;
    background-position: center;
    align-self: center;
}

a.numburing{
    position: absolute;
    background: #fff;
    font-size: 18px;
    border-radius: 100%;
    padding: 15px 20px;
    top: 0;
    left: 0;
    color:#000;
    z-index: 99;
    text-decoration: none;
}
a.numburing.one{
    left: 0;
    right: 0;
    width: 10px;
    margin: 0 auto;
}

.fr a.numburing.one{
    left: 230px;
}

a.numburing.two{
    top: 300px;
    left: 319px;
}
.fr a.numburing.two{
    display: none;
}

a.numburing.three{
    top: 360px;
    left: -41px;
}

a.numburing.four{
    bottom: 10px;
    top: auto;
    right: -40px;
    left: auto;
}