.category-wrap {
  margin: 0px 12px 45px;
}

@media (max-width: 575px) {
  .category-wrap {
    width: 100%;
  }
  .col {
    padding: 0px 8px;
  }
}

@media (max-width: 767px) {
  .category-wrap {
    margin: 0px 0px 30px;
  }
}

@media (max-width: 990px) {
    .inner-section > .container > .row.mb-3 > .col-3, .col-6 {
        /*width: 100%;*/
    }

    .category-wrap {
        width: 100% !important;
    }
}

.box{
    background-color: #68b90b;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0.3s;
	width:100%;
	height: 250px;
	border-radius:15px;
}



.box:hover{ background-color: #44bd32; }
.box:before,
.box:after,
.box .box-content:before,
.box .box-content:after{
    content: '';
    background-color: #44bd32;
    width: 100%;
    height: 5px;
    position: absolute;
    top: 0;
    left: -100%;
    transition: all 0.4s ease-in;
}
.box:after{
    top: auto;
    bottom: 0;
    left: 100%;
}
.box .box-content:before{
    width: 5px;
    height: 100%;
    top: 100%;
    left: 0;
}
.box .box-content:after{
    width: 5px;
    height: 100%;
    top: -100%;
    left: auto;
    right: 0;
}
.box:hover:before,
.box:hover:after{
    opacity: 0.2;
    left: 0;
}
.box:hover .box-content:before,
.box:hover .box-content:after{
    opacity: 0.2;
    top: 0;
}
.box img{
    width: 100%;
    height: auto;
    transition: all 0.3s ease;
}
.box:hover img{ opacity: 0.35; }
.box .box-content{
    color: #fff;
    height: 100%;
    width: 100%;
    padding: 20px;
    opacity: 1;
    position: absolute;
    top: 0px;
    left: 0;
    transition: all 0.45s ease;
}
.box:hover .box-content{
    opacity: 1;
}


@keyframes animate{
    0%{ opacity: 0.3; }
    40%{
        opacity: 0.5;
        box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);
    }
    100%{
        box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #fff, 0 0 0 10px rgba(255,255,255,0.5);
        transform: scale(1.5);
        opacity: 0;
    }
}
@media only screen and (max-width:990px){
    .box { margin: 0 0 30px; }
}
/*cube */
.box-cube {
    background-color: #68b90b;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0.3s;
    width: 100%;
    border-radius: 15px;
}
.box-cube:hover{ background-color: #44bd32; }
.box-cube:before,
.box-cube:after,
.box-cube .box-content:before,
.box-cube .box-content:after{
    content: '';
    background-color: #44bd32;
    width: 100%;
    height: 5px;
    position: absolute;
    top: 0;
    left: -100%;
    transition: all 0.4s ease-in;
}
.box-cube:after{
    top: auto;
    bottom: 0;
    left: 100%;
}
.box-cube .box-content:before{
    width: 5px;
    height: 100%;
    top: 100%;
    left: 0;
}
.box-cube .box-content:after{
    width: 5px;
    height: 100%;
    top: -100%;
    left: auto;
    right: 0;
}
.box-cube:hover:before,
.box-cube:hover:after{
    opacity: 0.2;
    left: 0;
}
.box-cube:hover .box-content:before,
.box-cube:hover .box-content:after{
    opacity: 0.2;
    top: 0;
}

.box-cube img {
    width: 100%;
    height: 445px;
    transition: all 0.3s ease;
}
.box-cube:hover img{ opacity: 0.35; }
.box-cube .box-content{
    color: #fff;
    height: 100%;
    width: 100%;
    padding: 20px;
    opacity: 1;
    position: absolute;
    top: 0px;
    left: 0;
    transition: all 0.45s ease;
}
.box-cube:hover .box-content{
    opacity: 1;
}
/*wide */
.box-wide {
    background-color: #68b90b;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0.3s;
    width: 100%;
    border-radius: 15px;
	    /*height: 173px;*/
	    height: auto;
}
.box-wide img {
    width: 107% !important;
    height: auto;
    transition: all 0.3s ease;
}

@media (max-width: 1440px){
    .box-cube img {
        height: auto;
    }
}