.fluidWContainer{width:86%; margin:auto;}

.uiuxDesignSection{padding:60px 0 180px; background:url(../images/Ellipse17.png)no-repeat right -96px top 15px, url(../images/lightdot01.png)no-repeat top 40px left -100px, url(../images/lightdot.png)no-repeat bottom -83px right 65px; background-size:auto;}

.designBoxWrap{float:left; width:100%; display:block; position:relative; cursor:pointer; padding:15px;}
.designBoxWrap a{float:left; width:100%; display:block; position:relative; cursor:pointer; border-radius:20px; overflow:hidden; border:1px solid #f1f1f1;}

.designBoxWrap .designImg:after,
.designBoxWrap .designImg:before{content:""; position:absolute; left:50px; top:50px; right:50px; bottom:50px; z-index:99; opacity:0; -webkit-transition:opacity .6s ease-in-out, -webkit-transform .6s ease-in-out; transition:opacity .6s ease-in-out, transform .6s ease-in-out;}
.designBoxWrap .designImg:before{border-top:2px solid #fff; border-bottom:2px solid #fff; -webkit-transform:scale(0,1); transform:scale(0,1);}
.designBoxWrap .designImg:after{border-left:2px solid #fff; border-right:2px solid #fff; -webkit-transform:scale(1,0); transform:scale(1,0);}

.designBoxWrap:hover .designImg::after, 
.designBoxWrap:hover .designImg::before {opacity:1; -webkit-transform:scale(1); transform:scale(1);}

.designBoxWrap .designImg{float:left; width:100%; min-height:auto; display:block; position:relative;}
.designBoxWrap .caption{position:absolute; bottom:0; left:0; width:100%; z-index:100; text-align:right; padding:20px 30px; transition:all 0.4s ease-in-out;}

.designBoxWrap a:before{content:""; position:absolute; left:0; bottom:0; right:0; top:calc(100% - 125px); background-color:rgb(41 55 63 / 0.70); z-index:40; transition:all 0.4s ease-in-out;}

.page-id-3478 .designBoxWrap .inner:before, 
.page-id-5110 .designBoxWrap .inner:before{content:""; position:absolute; left:0; bottom:0; right:0; top:calc(100% - 125px) !important; background-color:rgb(41 55 63 / 0.70); z-index:40; transition:all 0.4s ease-in-out;}

.designBoxWrap .caption h2{font-size:30px; padding-right:80px; color:#fff; margin:0 0 0; font-weight:800; line-height:45px; font-family:'Muli', sans-serif; letter-spacing:1.1px; position:relative;}
.designBoxWrap .caption h2 img{position:absolute; right:0; top:calc(50% - 11.2px); margin-left:10px;}
.designBoxWrap .caption h2:hover img{margin-left:15px;}
.designBoxWrap:hover a:before{top:0; background-color:rgb(41 55 63 / 0.40);}
.designBoxWrap:hover .caption{padding:0 80px 70px 50px;}


.page-id-3478 .designBoxWrap:hover .inner:before, 
.page-id-5110 .designBoxWrap:hover .inner:before {
    top: 0 !important;
    background-color: rgb(41 55 63 / 0.40);
}


@media(max-width:1024px){
.uiuxDesignSection{padding:30px 0 70px;}
.designBoxWrap .caption h2{font-size:20px; line-height:30px; padding-right:70px;}
.designBoxWrap a:before{top:calc(100% - 70px);}
.designBoxWrap .designImg:after, 
.designBoxWrap .designImg:before{top:30px; right:30px; bottom:30px; left:30px;}
.designBoxWrap:hover .caption{padding:0 50px 45px 50px;}
}

@media(min-width:768px) and (max-width:1023px){
.designBoxWrap .caption h2{font-size:20px; line-height:30px; padding-right:70px;}
.designBoxWrap a:before{top:calc(100% - 70px);}
.designBoxWrap .designImg:after, 
.designBoxWrap .designImg:before{top:20px; right:20px; bottom:20px; left:20px;}
.designBoxWrap:hover .caption{padding:0 40px 35px 40px;}
}

@media(max-width:767px){
.designBoxWrap .caption{padding:10px 20px}
.designBoxWrap .caption h2{font-size:18px; line-height:30px; padding-right:55px;}
.designBoxWrap .caption h2 img{width:40px; top:calc(50% - 8.6px);}
.designBoxWrap a:before{top:calc(100% - 50px);}
.designBoxWrap .designImg:after, 
.designBoxWrap .designImg:before{top:20px; right:20px; bottom:20px; left:20px;}
.designBoxWrap:hover .caption{padding:0 40px 35px 40px;}

.fluidWContainer{width:100%;}
.designBoxWrap{padding:10px 15px;}
.designBoxWrap a{border-radius:15px;}
}