@charset "utf-8";
/* CSS Document */
/*----------------------*/

/* .banner-wrapper {
    background:url( "../images/wallpaper/wall-bg.svg") repeat-x #f3796f;
} */

.banner-wrapper {background:url( "../images/banner/wallpaper-banner.jpg") #f7e2c9 no-repeat center;}

.text-wrapper{ 
    /* margin:0 auto; text-align: center; position:absolute; z-index:5; top:56%; transform: translateY(-56%); left: 0; right:0; */
    display: flex;
    height: 630px;
    align-items: center;
    justify-content: center;
    margin-top:2%;
}
.quotes {display: none;   margin: 0 auto; }
.quotes h1{  color: #3b647f; font-size: calc(3vw + 3vh + 1vmin); line-height:20px;   /*border-radius: 50% 20%/10% 40%; background: #fbcbcc; padding:5px 50px;*/}

.object-left{position: absolute; left: 0; bottom: 0;}
.object-left img{width:100%; animation: 4s qodef-float infinite ease-in-out;  }

.object-right{position: absolute; right:-5%; top:20%;}
.object-right img{width:65%; animation: 4s qodef-float infinite ease-in-out;  }


@keyframes qodef-float {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(16px)
    }

    100% {
        transform: translateY(0)
    }
}  

.anim{ position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height:70px;
    background:  #BE403C;
    border-radius: 50%;
    margin: 5px auto;
    -webkit-animation: pop 0.8s  infinite linear;
    animation: pop 0.8s  infinite linear;
 
   }

.ener{ position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-animation: pop 0.8s  infinite linear;
    animation: pop 0.8s  infinite linear;}

.ener img{width:75px;}   

.anim img{width:30px; vertical-align: middle;}

@keyframes pop {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.15, 1.15);
    }
    100% {
      transform: scale(1, 1);
    }
  }







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


    
.box {
    background: url("../images/wallpaper/wall-thumb-bg.svg") no-repeat;
    border-radius: 15px;
    height: 367px;
    width: 550px;
    margin: 0px auto 60px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15px;
    position: relative;
}
.wall-item:nth-of-type(4n+1) .box {
    /* background-color: #ea8f9b; */
    background: url("../images/wallpaper/wall-thumb-bg-1.svg") no-repeat;
}
.wall-item:nth-of-type(4n+2) .box {
    /* background-color: #89bb5f; */
    background: url("../images/wallpaper/wall-thumb-bg-2.svg") no-repeat;
}
.wall-item:nth-of-type(4n+3) .box {
    /* background-color: #cf8c44; */
    background: url("../images/wallpaper/wall-thumb-bg-3.svg") no-repeat;
}
.wall-item:nth-of-type(4n+4) .box {
    /* background-color: #6ba2ad; */
    background: url("../images/wallpaper/wall-thumb-bg-4.svg") no-repeat;
}
.box img {
    border-radius: 15px;
    margin-top: 55px;
    width: 75%;
}


/* ----------------option---------------- */
.wall-item-wrapper{position: relative; cursor: pointer;}
.option{position: absolute; bottom:85px; left: 50%; transform: translateX(-50%); }
.option li{ list-style: none; display: inline-block; margin-right: 5px;}
.option li a{border-radius:50%; background: #a97aac; width:54px; height:54px; display: flex; align-items: center; justify-content: center;}
.option li a img{width:30px; border-radius: 0; margin: 0 !important;}


.wall-item{display:flex; justify-content: center;}

.wall-item:nth-of-type(4n+1) .option li a { background-color: #e16273;}
.wall-item:nth-of-type(4n+2) .option li a { background-color: #62913a;}
.wall-item:nth-of-type(4n+3) .option li a { background-color: #a97236;}
.wall-item:nth-of-type(4n+4) .option li a {background-color: #4e818b;}




.lg-on {overflow: hidden;}


/*------------light gallery--------------*/
.lg-show-in .lg-toolbar, .lg-show-in .lg-prev, .lg-show-in .lg-next, .lg-show-in .lg-pager-outer {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}
/* -----------------responsive---------------------- */

/*@media only screen and (max-width: 1399px) and (min-width: 1200px){.box{height: calc-size(auto, size - -81px);}}*/
/*@media only screen and (max-width: 1199px) and (min-width: 992px){.box{height: calc-size(auto, size - -57px);} }*/

@media only screen and (max-width: 1199px) and (min-width: 992px){
.box{ width: 450px; height: 300px;}
.box img{margin-top: 45px;}   
}


@media only screen and (max-width: 1399px){.quotes h1{font-size: calc(2.5vw + 2.5vh + 1vmin);}
.anim{width: 60px; height: 60px;}
.ener img{width:65px;}
.text-wrapper{margin-top: 0;}
}

@media only screen and (max-width:767px) {
 .box{margin-bottom:30px;}   
.option{bottom:55px;} 

.object-right{top:14%; right: calc(-15% - 80px);}
.object-left{bottom: 5%;}
.object-left img{width: 50%;}
.object-right img{width:40%;}

.quotes h1{font-size: calc(3vw + 3vh + 2vmin);}

} 

@media only screen and (max-width:550px) {
.box{ width: 450px; height: 300px;}
.box img{margin-top: 42px;}   
.option{bottom:45px;} 
}



@media only screen and (max-width:448px) {
 .box{ width: 350px; height: 234px;}
.box img{margin-top:30px;}    
.option{bottom:40px;}    
.option li a{width:45px; height: 45px;} .option li a img{width: 22px;}}


@media only screen and (max-width:351px) {
.box{ width:290px; height: 194px;}
.box img{margin-top:22px;}    
.option{bottom:35px;}    
    
.option li a{width:40px; height: 40px;} .option li a img{width:18px;}
}