@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500&display=swap');

*{box-sizing: border-box;}
 div{position: absolute;}
img{width: 100%; }
body, html{padding: 0;margin: 0;font-family: 'Outfit', sans-serif; color: white; font-weight: 300;}
#ad{width: 50vh;height: 100vh; background: #116f89; left: 0;top: 0;z-index:0;  overflow: hidden;}

.hover{position: absolute;
opacity: 0;left: 0;top: 0;
}

.full{left: 0;top: 0;width: 100%;height: 100%; position: absolute;}
.loader{background:#116f89 ;}
.grow:hover .btn{opacity:0;}
.grow:hover .hover{opacity:1;}

.grow,.sub,.more{cursor: pointer; }
.grow img,.sub img,.more{transition: filter .4s;user-select: none;}
.sub img,.more{filter: invert(0);}
.sub img:hover,.more img:hover{filter: invert(1);}
.tree{left: 0;top: 0;width: 100%;height: 100%;position: absolute;}
.tree img{position: absolute; width: 100%;}


@media(max-aspect-ratio:1/2){
#ad{width: 100vw; height: 200vw;}

}

.link{display: flex;justify-content: center;}


.flcenter{display: flex;justify-content: center;}
.txt img{width: 76%;}
.txt{top:30%;width:100%}

.btns img{width: 100%; transition: all .4s;}
.btn{top: 65%; cursor: pointer; width: 100%;}
.btns{position: relative; width: 60%;}

.btn:hover .hover{opacity:1;}
.clicktag:hover .hover{opacity:1;}

.bg img{width: 100%;}