/*------------ 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) } 
/*-------------------*/

/*--------- common ----------*/
a { text-decoration:none } 
/*-------------------*/

/*--------- wrapper main ----------*/
.loader{
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 10;
    left: 0;
    top: 0;
}
.language {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000000a6;
    z-index: 9;
    display: none;
}
.language > div {width: 400px;height: 170px;position: absolute; top:50%;left: 0;right: 0;margin: 0 auto; transform: translateY(-50%);}
.language a {
    display: block;
    background: #fff;
    width: 45%;
    float: left;
    height: 100%;
    border-radius: 10px;
    line-height: 170px;
    text-align: center;
    font-size: 30px;
    font-family: regular;
    margin: 0 5px;
    color:#000
}


.wrapper { overflow:hidden; position:relative } 
.container { max-width:1200px; width:100%; margin:0 auto; position: relative; } 
main { background:linear-gradient(to bottom,#6cf0d3,#f3fea4); padding:18px; position:relative; overflow:hidden } 

.main-title { font-size:35px; color:#0b407a; font-family:main; position:relative } 
.main-title:after { content:"Nature's Pond Natural Dynamic Cleaning"; position:absolute; font-size:35px; -webkit-text-fill-color:transparent; -webkit-text-stroke:2px #0b407a; top:2px; left:2px } 

.logo1,.logo2 { position: absolute; top: 0; left: 1%; width: 11%; background: #fff; padding: 10px 10px 40px; border-bottom-left-radius: 30%; border-bottom-right-radius: 30%; z-index: 2; } 
.logo2 { left: auto; right: 1%; width: 8%; padding: 20px 25px 25px; } 

.logo1 img, .logo2 img { width: 100%; object-fit: fill; } 
main { padding: 0; overflow: visible; } 
.main-title { text-align: center; padding-top:30px; font-size: 3.3vw; margin-bottom: 35px; z-index: 4; } 
.fr .main-title { font-size: 2.7vw; } 
.main-title:after { width: 100%; padding-top:30px; font-size: 3.3vw; text-align: center; content : "Nature's Pond Natural Dynamic Cleaning"; } 
.fr .main-title:after { font-size: 2.7vw; content : "Nettoyage dynamique naturel avec Nature's Pond";}
.sub-title { font-size: 35px; color: #fff; font-family: regular; position: relative; background: #0b407a; width: 40%; margin: 0 auto 35px; padding: 10px; font-weight: 100; text-align: center; z-index: 4 } 
.title { font-size: 30px; color: #0b407a; font-family: regular; position: relative; width: 520px; margin: 0 auto; text-align: center; z-index: 4; border-radius: 10px; padding: 10px 0; background: #ffffffb3; } 
.fr .title {  width: 50%; } 
.container-box { height: 550px; width: 100%; position: relative; z-index: 1; background: url('../img/grill.png'); background-position: bottom; background-size: 200px; background-repeat: repeat-x; } 
.click-title {
    font-size: 20px;
    color: #0b407a;
    font-family: regular;
    position: relative;
    width: 330px;
    margin: 30px auto 0;
    text-align: center;
    z-index: 4;
}
.click-title {width :420px;}
.wrapper:after,
.wrapper:before { display: block; clear: both; content: ''; } 

.sun { height: 70px; width: 70px; left: 18%; top: 40%; } 

.sun:after,
.sun:before { height: 110px; width: 110px; top: -20px; left: -20px; } 

.sun:before { height: 180px; width: 180px; top: -55px; left: -55px; } 

.bird {transform: scale(0.5);}


.container-box img { object-fit: fill; width: 100%; } 
.office { position: absolute; left: 2%; bottom: 0; width: 16%; } 
.shoppingmall { position: absolute; left: 20%; bottom: 0; width: 17%; } 
.dustbin {
    position: absolute;
    left: 37%;
    bottom: 0;
    width: 5%;
    z-index: 1;
    transform: scale(1);
    transition: all 0.3s;
    z-index: 3;
    cursor: pointer;
}
.dustbin:hover {
    transform: scale(1.5);
    transform-origin: center bottom;
}

.school { position: absolute; left: 41%; bottom: 0; width: 17%; } 

.warehouse { display: none; position: absolute; left: 50%; bottom: 0; width: 15%; } 

.bank { position: absolute; left: 61%; bottom: 0; width: 17%; } 

.airport { position: absolute; left: 81%; bottom: 0; width: 17%; } 
.name-plate { position: absolute; color: #fff; font-family: medium-cn; text-align: center; text-transform: uppercase; bottom: auto; } 
.name-plate.office { font-size: 1vw; width: 46%; left: 36%; top: 2%; } 

.name-plate.shopping-mall { font-size: 1vw;
    width: 48%;
    left: 26%;
    top: 3.5%; } 
.name-plate.garbage-area {
    font-size: 0.8vw;
    width: 108%;
    left: -7%;
    top: -56.5%;
    color: #fff;
    background: #34495E;
    padding: 4px 0;
} 

.name-plate.conference { font-size: 0.6vw; width: 23%; left: 19%; top: 43.5%; } 

.name-plate.hotel { font-size: 0.8vw; width: 23%; left: 59%; top: 52%; } 

.name-plate.school { font-size: 1.3vw; width: 46%; left: 27%; top: 41%; } 

.name-plate.warehouse { font-size: 1.3vw; width: 52%; left: 37%; top: 3%; } 

.name-plate.bank { font-size: 1.3vw; width: 28%; left: 36%; top: 3%; } 

.name-plate.airport { font-size: 0.8vw; width: 19%; left: 38%; top: 24%; } 

.tree { position: absolute; left: 0; width: 1.5%; bottom: 0; z-index: 2; } 
.tree-2 {left: 17%;z-index: 2;} 
.tree-3 {left: 18.5%;} 
.tree-4 {left: 21%;} 
.tree-5 {left: 36%;z-index: 0;} 
.tree-6 {left: 42%;}   
.tree-7 {left: 57%;} 
.tree-8 {left: 60%;} 
.tree-9 {left: 77.5%;} 
.tree-10 {left: 59%;} 
.tree-11 {left: 79.5%;} 
.tree-12 { left: 95%; } 
.tree-13 { left: 96.5%; } 
.tree-14 { left: 98%; } 

.plan { width: 7%; height: 50px; background: url(../img/plan.png); background-size: contain; position: absolute; background-repeat: no-repeat; right: 0; bottom:0; animation: fly ease-in 30s infinite; } 
.plan2 { width: 5%; height: 50px; background: url(../img/plan-2.png); background-size: contain; position: absolute; background-repeat: no-repeat; left: 0; transform: translateX(-100%); top:40%; animation: fly2 ease-in 30s infinite 0s; } 

@keyframes fly { 
 0% { right: 0; bottom:0; } 40%, 100% { right: 100%; bottom:100%; } 
 }
@keyframes fly2 { 
 0% { left: 0; transform: translateX(-100%); } 20%, 100% { left: 100%; transform: translateX(0%); } 
 }

.road { height: 120px; width: 100%; background: rgb(77,77,77); background: linear-gradient(0deg, rgba(77,77,77,1) 5%, rgba(255,255,255,1) 5%, rgba(77,77,77,1) 6%, rgba(77,77,77,1) 46%, rgba(201,199,40,1) 48%, rgba(77,77,77,1) 50%, rgba(77,77,77,1) 55%, rgba(228,226,32,1) 56%, rgba(77,77,77,1) 58%, rgba(77,77,77,1) 93%, rgba(255,255,255,1) 94%, rgba(77,77,77,1) 95%); position: relative; z-index: 5; } 
.road img { object-fit: fill; width: 100%; } 
.road .car-1 { width: 8%; position: absolute; right: 0; top: -10%; animation: moveLeft 15s linear infinite; z-index: 2; } 
.road .tier { position: absolute; width: 20%; height: 45%; background: url(../img/tier.png) no-repeat; background-size: contain; bottom: 0; left: 9%; animation: rotate 1.2s linear infinite reverse; transform: rotate(0deg); } 
.road .car-1 .tier:last-child { bottom: 0; left: auto; right: 13%; animation: rotate 1.2s reverse linear infinite; } 
.road .car-2 { width: 9%; position: absolute; left: 0; top: 36%; animation: moveRight 15s linear infinite; z-index: 3; } 
.road .car-2 .tier { background-image: url('../img/tier-2.png'); animation: rotate 1.2s linear infinite; height: 50%; width: 18%; left: 11%; } 
.road .car-2 .tier:last-child { left: auto; right: 10%; } 

.road .truck { width: 12%; position: absolute; left: 0; top: -30%; transform: translateX(-100%); animation: moveRight 20s linear 5s infinite; top: 30%; z-index: 4; } 
.road .trash-truck { width: 7%; position: absolute; left: 0; top: -35%; transform: translateX(-100%); animation: trashcar 25s ease-out 0s infinite; z-index: 1; } 
@keyframes moveLeft { 
 0% { transform: translateX(100%); right: 0; } 100% { transform: translateX(0%); right: 100%; } 
 }
@keyframes moveRight { 
 0% { transform: translateX(-100%); left: 0; } 100% { transform: translateX(0%); left: 100%; } 
 }
@keyframes trashcar { 
 0% { transform: translateX(-100%); left: 0; } 25% { left: 40%; } 35% { left: 40%; } 100% { transform: translateX(0%); left: 100%; } 
 }
@keyframes rotate { to { transform: rotate(360deg); } 
 }

.soil { height:170px; margin-top:-171px; background:url(../img/soil-2.jpg); position:relative; border-top:10px solid #c0b800; background-size:cover; transition: all 0.5s; } 
.soil { height: auto; margin-top: 0; border-top: 15px solid #97b304; background-size: 100% 140%; clear: both; } 
.soil:before, .soil:after { display: none; } 

.soil .soil-title { text-align: center; color: #fff; font-size: 40px; font-family: bold-cn; padding: 40px 0; } 
.soil .blue-box { background: #151718; width: 100%; } 
.soil .blue-box p.title { color: #00aeef; padding: 20px 0 10px; font-size: 37px; font-family: bold-cn; background: transparent;} 

.soil .blue-box p.sub-title { color: #FFF200; font-size: 24px; background: transparent; font-family: bold-cn; width: auto; } 

.blue-box .boxes { display: flex; flex-wrap: wrap; justify-content: center; } 
.blue-box .boxes li { width: 16%; border: 3px solid #00aeef; background: #fff; color: #0B407A; padding: 10px; margin: 0 10px 20px; height: 100px; text-align: center; font-family: footer-text; display: flex; justify-content: center; align-items: center; position: relative; } 
.blue-box .boxes li i { background: #0b3d71; display: inline-block; position: absolute; left: 0; right: 0; margin: 0 auto; top: -14px; height: 25px; width: 25px; border-radius: 100%; }
.blue-box .boxes li i:after { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid #fff; position: absolute; content: ''; top: 8px; left: 8px; } 

.clickable {cursor: pointer;}

.popup {
    position: fixed;
    z-index: 9;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #fff;
    display: none;
}
.popup > .close {position: absolute; right: 10px;top: 10px;color: #0B407A; font-size: 25px; font-family: medium-cn; border-radius: 100%; border : 1px solid #0B407A; padding: 4px 12px; cursor: pointer; z-index: 2;}
.popup > a {float: left; width: calc(50% - 30px); height: calc(100% - 30px); margin:15px ; background: url('../img/janitorial-room.png') no-repeat; background-position: center; background-size: contain;}
.popup > .building {background-image: url('../img/hotel-img.png')}