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

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


/*--------header-----------*/
header{padding:5px;width:100%;overflow:hidden; border-bottom: 4px dashed #0a4079; background: #fff; position: relative; z-index: 4;}
header span{display:inline-block}
header .four-in,header .pond-logo{width:200px;display:inline-block}
header img{width:100%}
header span {margin-right: 20px;}
header .story,header .the{vertical-align:middle;font-size:50px;color:#0b407a;font-family:main;position:relative}
header .story:after,header .the:after{content:"The";position:absolute;font-size:50px;-webkit-text-fill-color:transparent;-webkit-text-stroke:2px #0b407a;top:3px;left:3px}
header .story{vertical-align:middle}
header .story:after{content:"Story"}
header .corner{background:#6cf0d3;border-top:6px dashed #0a4079;position:absolute;height:350px;width:350px;top:0;right:0;transform:rotate(-53deg) translate(25%,30%);z-index:2}
/*-------------------*/

/*--------- wrapper main ----------*/
.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}


/*-------- side bar detail-----------*/
/* .video-details{position:absolute;top:90px;right:20px;width:330px;z-index:3} */

/*-------------------*/

/*-------- home section -----------*/
.main-title{font-size:35px;color:#0b407a;font-family:main;position:relative}
.main-title:after{content:"There are many different plumbing problems that can occur in the average home.";position:absolute;font-size:35px;-webkit-text-fill-color:transparent;-webkit-text-stroke:2px #0b407a;top:2px;left:2px}

.home-main{margin:30px auto 0;max-width:400px; position: relative; z-index: 3;}
.home-main .row{display:flex;flex:3;align-items:baseline;justify-content:center}

.home-main .row>.grill{background:url(../img/grill.png) no-repeat;height:110px;flex:.94;background-size:contain}
.home-main .row>.grill-left{background-position:right bottom;margin-right:-20px}
.home-main .row>.grill-right{background-position:right bottom;transform:scaleX(-1);margin-left:-20px}

.room {flex:1;height:130px;border:12px solid #620b00; position:relative;z-index:1; background-size:cover !important; }

.room-1{background:url(../img/room-1.png) no-repeat;flex:1.8;height:167px;background-size:contain; border:0;}
.room-2{flex:1;background:url(../img/room-2.png) no-repeat;transition:.3s}
.room-3{flex:2;background:url(../img/room-3.png) no-repeat;border-right:0;border-left:0}
.room-4{flex:1;background:url(../img/room-4.png) no-repeat}
.room-5{flex:1;background:url(../img/room-5.png) no-repeat}
.room-6{flex:2;background:url(../img/room-6.png) no-repeat;border-right:0;border-left:0}
.room-7{flex:1;background:url(../img/room-7.png) no-repeat}
.room-8{flex:.47;background:url(../img/room-8.png) no-repeat;border-top:0}

.room-5,.room-6,.room-7{border-top:0}

.room.active {z-index: 2;}
.room-overlay {position: fixed; top: 0;left: 0;background: rgba(255,255,255,0.7); height: 100%; width: 100%; z-index: 10; display: none}
.room-overlay .close, .prev, .next {
    color: #2964af;
    font-size: 20px;
    font-weight: 900;
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 100%;
    border: 2px solid #2964af;
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: footer-text;
}
.prev,.next{
    top:40%;
    left: 10px;
    width: 20px;
    z-index: 5;
    background:rgba(255,255,255,0.8);
    text-align: center;
}
.next{left: auto; right: 10px;}
.wrapper[data-screen='screen-1'] .prev, .wrapper[data-screen='screen-3'] .next {display: none;}

.popup{height:250px;width:250px;border:8px solid #24aae0;border-radius:100%;position:absolute;overflow:hidden;box-shadow:0 0 30px 10px #000 inset,0 0 0 15px #2964af;visibility:hidden;transition:all .4s; z-index: 3; animation-duration: 0.5s; left:0%; right:0; margin: 0 auto; top:50%; transform: translateY(-50%); }
.popup::after{position:absolute;content:'';background:url(../img/shine.png);background-size:contain;height:100%;width:100%;opacity:.6}

.video-details{position: absolute; display:block;padding:10px 10px 10px 50px;background:#fff;
    border-radius:25px;
    border:10px solid #2964af;
    color:#2964af;
    font-family:footer-text;
    font-size:15px;
    line-height:18px;
    width: 300px;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s 0.3s;
    transform: translateY(-50%);
    top:50%;
    left: 0;
    right: 0;
    margin: 0 auto
}
.done .popup {transform: translateX(-55%) translateY(-50%)}

.video-details a{position:absolute;height:40px;width:40px;background-color:#2964af;background-image:url(../img/white-play-icon-png.png);display:block;border-radius:100%;background-size:60%;background-repeat:no-repeat;background-position:center;left:0;transform:translate(-50%,-50%);top:50%;box-shadow:0 0 0 7px #ffffffab}
.done .video-details {z-index: 2; transform: translateX(60%) translateY(-50%); opacity: 1; visibility: visible;}

/*--------- boo aniamtion --------*/
.boo{position:absolute;background:url(../img/boo.png) no-repeat;background-position:bottom center;animation:boo 3s infinite;height:100px;width:70px;background-size:contain;margin-top:40px}
@keyframes boo{
0%{opacity:0;transform:translateY(0);margin-left:0}
10%{opacity:1;margin-left:0}
60%{opacity:1}
100%{opacity:0;transform:translateY(-30%);margin-left:0}
}
/*--------------------------------*/

#room-2-popup .popup{background:url(../img/room-2.png) no-repeat;background-position:bottom center;background-size:100%; }
#room-2-popup .popup .boo{margin-top:40px}

#room-5-popup .popup{background:url(../img/room-5.png) no-repeat;background-position:bottom center;background-size:100%;}
#room-5-popup .popup .boo{top:0;right:50px}

#room-6-popup .popup{background:url(../img/room-6-popup.png) no-repeat;background-position:0 bottom;background-size:contain;}
#room-6-popup .popup .boo{top:0;left:90px}

.room-2 .line{height:0;width:7px;background:#2964af;position:absolute;bottom:300px;left:30px;transition:.5s;opacity:0;visibility:hidden}

.home-main .active .popup{visibility:visible;opacity:1;transition-delay:.4s;overflow:hidden}
.home-main .room-2.active .line{height:160px;visibility:visible;opacity:1}

/*----------- soil --------------*/
.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:before{height:230px;width:100%;background-image:url(../img/tree.png);position:absolute;content:"";bottom:100%;background-repeat-y:no-repeat;background-size:23%}
.soil:after{height:62px;width:100%;background:#00a99d;position:absolute;content:"";bottom:calc(100% + 10px)}
.water.popup{background-image:url(../img/water.png);background-position:center;transition:.4s;float:left;height:250px;width:250px;border:8px solid #24aae0;border-radius:100%;overflow:hidden;background-repeat:no-repeat;background-color:#f2f2f2;position:relative;box-shadow:0 0 0 15px #2964af;opacity:0;visibility:hidden;transition:all .4s}
.water.popup.active{opacity:1;visibility:visible}
.water.popup .boo:first-child{left:18%;top:10%}
.water.popup .boo:last-child{right:18%;top:10%;animation-delay:.4s}
.soil .container{ max-width: 780px;}
.soil .tank{    float: right;
    background: url(../img/water.png);
    height: 92px;
    width: 109px;
    background-size: contain;
    margin: 35px 0 0 18px;
    position: relative;
    z-index: 3;
    transition: 0.4s;
}
.soil .tank.one{background-image:url(../img/gutter.png);}

#drain-popup .popup{background-image:url(../img/water.png); background-position :center; background-size:80%;}
#drain-popup .popup .boo{top:0;left:90px}
#drain-popup .popup .boo:first-child{left:18%;top:10%}
#drain-popup .popup .boo:last-child{right:18%; left: auto; top:10%;animation-delay:.4s}

.soil .tank p{    font-family: main;
    line-height: 25px;
    color: #fff;
    text-align: center;
    background: #00000094;
    margin: 15px 5px 0 5px;
    font-size: 11px;}

.soil.s-2 {    
    height: 600px;
    margin-top: -700px;
    transition-delay: 1s;
}
.soil.s-2 .tank{
    opacity: 0;
    visibility: hidden;
}
/*-------------------------------*/

/*-------------- screen-2 and screen-3 ----------------*/
.screen-2,.screen-3 {position: absolute;height: 100%; width: 100%; visibility: hidden; top: 0;left: 0; z-index: 3; padding-top: 100px;}
.screen-2 .title, .screen-3 .title {
    font-family: footer;
    font-size: 30px;
    text-align: center;
    color: #fff;
    margin-bottom: 80px;
    position: relative;
    font-family:main;
    text-shadow: 0 2px 2px #fc0;
}
.screen-3 .title .yellow{text-shadow: 0 2px 2px #fff;}
/* .screen-2 .title:after{content:"Here is what happens when commonly used chemical drain cleaners are used.";position:absolute;font-size:35px;-webkit-text-fill-color:transparent;-webkit-text-stroke:2px #fc0;top:2px;left:2px; font-family:main;} */
.common {width: 100%; text-align: center;}
.common .circle-main {display: inline-block; margin: 0 30px}

#common-pipe-1 .popup, #common-pipe-2 .popup, #common-pipe-3 .popup, #common-pipe-4 .popup,#common-pipe-5 .popup  {
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
}
#common-pipe-1 .popup {background-image: url('../img/pipe-1.png');}
#common-pipe-2 .popup {background-image: url('../img/pipe-2.png');}
#common-pipe-3 .popup {background-image: url('../img/pipe-5.png');}

#common-pipe-4 .popup {background-image: url('../img/pipe-4.png');}
#common-pipe-5 .popup {background-image: url('../img/pipe-3.png');}



/*-------------- footer -----------------*/
footer{background:#000;border-top:6px dashed #fc0;padding-top:12px;padding-bottom:12px}
footer .conitainer{max-width:1600px;margin:0 auto;width:100%;display:flex}
.cf::before,.cf:after{content:"";display:block;clear:both}
footer .left{color:#fff;font-family:footer;text-align:center;font-size:33px;text-transform:uppercase;width:18.5%;float:left;line-height:40px}
.title.blue,span.blue{color:#54d4fc}
.title.yellow,span.yellow{color:#fc0}
footer .middle{float:left;align-items:center;justify-content:center;display:flex}
/* .circle-main{display:flex;align-items:center;justify-content:center;float:left;position:relative} */
footer .middle .circle-main:before{content:'';position:absolute;bottom:94%;left:45%;height:0;width:0;border:4px dashed #fff;border-bottom:0;border-right:0;transition:height .3s 0s,width .3s .3s}
footer .middle .circle-main.done:before{height:60px;width:180px}
footer .middle .circle-main:after{content:'';position:absolute;top:94%;left:45%;height:0;width:0;border:4px dashed #fff;border-top:0;border-right:0;transition:height .3s 3s,width .3s 3.5s}
footer .middle .circle-main.done:after{height:60px;width:180px}
.circle{height:150px;width:150px;background-color:#fff;border:5px solid #fc0;border-radius:100%;position:relative;background-size:contain;background-repeat:no-repeat;background-position:center;float:left; cursor: pointer;}
.circle::after{content:"";position:absolute;top:-20px;left:-20px;border:5px dashed #54d4fc;border-radius:100%;height:180px;width:180px; animation: rotate 20s infinite linear; transform: rotate(0deg)}
@keyframes rotate {
    to{transform: rotate(360deg);}
}
.circle.pipe-1{background-image:url(../img/pipe-1.png)}
.circle.pipe-2{background-image:url(../img/pipe-2.png)}
.circle.pipe-3{background-image:url(../img/pipe-3.png)}
.circle.pipe-4{background-image:url(../img/pipe-4.png)}
.circle.pipe-5{background-image:url(../img/pipe-5.png)}
.circle-main .details{color:#fff;font-family:footer-text;float:left;width:147px;padding-left:21px;height:180px;display:flex;align-items:center;justify-content:center;line-height:20px}
footer .right{float:left}
footer .right .circle-main{height:auto;padding:20px 20px}
footer .title{font-family:bold-cn;font-size:20px;text-align:center}
footer .right .circle-main .details{width:185px}