#derectory-list {}


#derectory-list ul:not(.slick-slider) { 
    display: flex;
    flex-flow: row wrap;
}
    #derectory-list ul.first-level:not(.slick-slider) .xList-item {
        display: block !important;
        width: calc((100% - 90px) / 2);
        margin: 0 15px 30px;
    }
    /*#derectory-list .unslick .xList-item:nth-of-type(3n+2){
        margin: 0 10px;
    }*/

#derectory-list .xList-item .image-wrapper {
    position: relative;
    height: auto;
    z-index: 1;
    padding: 35% 50%;
    box-sizing: border-box;
}

#derectory-list .xList-item img {
    position: absolute;
    z-index: 1;
    max-width: 90%;
    max-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#derectory-list .xList-item {align-items: stretch;position: relative;z-index: 1;}

#derectory-list .xList-item .link {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    white-space: nowrap;
}

#derectory-list .xList-item .r2g-xbox-list-component,
#derectory-list .xList-item .r2g-xbox-list-component .container,
#derectory-list .xList-item .r2g-xbox-list-component .container .xbox  {
    height: 100%;
}

#derectory-list .xList-item .r2g-xbox-list-component .container .xbox {
    padding-bottom: 20px;
    position: relative;
}
#derectory-list .xList-item h3 {
    text-align: center;
}


.two-col-strip.filter-wrapper .all-cats-selector .cats-menu nav ul{
    padding: 0;
}

.two-col-strip.filter-wrapper .all-cats-selector .cats-menu nav > ul li,
.two-col-strip.filter-wrapper .all-cats-selector .cats-menu nav > ul li{
    width: 100%;
    box-sizing: border-box;
    position: relative;
    background: #f0f0f0;
    border-bottom: #dbdbdb solid 1px; 
}

.two-col-strip.filter-wrapper .all-cats-selector .cats-menu nav > ul li:last-child{
    border:0
}

.two-col-strip.filter-wrapper .all-cats-selector .cats-menu nav > ul li > ul li{
    font-size: 0.9em;
   padding-left: 20px
}

.two-col-strip.filter-wrapper .all-cats-selector .cats-menu nav > ul li > ul li > ul{
    margin-left: -20px
}

.two-col-strip.filter-wrapper .all-cats-selector .cats-menu nav > ul li > ul li > ul > li{
    /*padding: 5px 0 5px 35px;*/
    padding: 0px 0 0px 35px;
    
}

.two-col-strip.filter-wrapper .all-cats-selector .cats-menu nav > ul li a{
    width: 100%;
     display: block;  
    position: relative;
    padding-right: 20px;
    padding: 10px 40px 10px 10px;
    background-color : rgba(213, 209, 209, 0);
    color: #8d8d8d;
    
    -webkit-transition : background 0.3s ease;
    -ms-transition : background 0.3s ease;
    transition : background 0.3s ease;
}

.two-col-strip.filter-wrapper .all-cats-selector .cats-menu nav > ul li a span,
.two-col-strip .col-one .cats-menu .menu .has-sub-menu > span::after{
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 1;
    background-color: #ddd;
    padding:10px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    height: calc(100% - 2px);
    box-sizing: border-box;
    width: 35px;
}
.two-col-strip .col-one .cats-menu .menu .has-sub-menu > span::after{
    content:"\eb24";
}
.two-col-strip.filter-wrapper .all-cats-selector .cats-menu nav > ul li a span.sublevel-loading{
    background-image: url(https://www.srilankabusiness.com/images/spinner-1s-118px.gif);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.two-col-strip.filter-wrapper .all-cats-selector .cats-menu nav > ul li a span.sublevel-loaded{
    background-image:none;
}
.two-col-strip.filter-wrapper .all-cats-selector .cats-menu nav > ul li a span:before{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transition : opacity 0.3s ease;
    -ms-transition : opacity 0.3s ease;
    transition : opacity 0.3s ease;
    
    opacity:1;
    pointer-events:auto
}
.two-col-strip.filter-wrapper .all-cats-selector .cats-menu nav > ul li a span.sublevel-loading:before{
    opacity:0;
    pointer-events:none
}
.two-col-strip.filter-wrapper .all-cats-selector .cats-menu nav > ul li a span.sublevel-open:before,
.two-col-strip .col-one .cats-menu .menu .has-sub-menu.open > span::after{
    content: '\eb25';
    opacity:1;
    pointer-events:auto
}


.two-col-strip.filter-wrapper .col-one .cats-menu .menu .level-0 > span,
.two-col-strip.filter-wrapper .col-one .cats-menu .menu .level-0 li{
	padding-bottom: 0;
}
.all-cats-selector {
	margin-bottom: 30px;
}
.two-col-strip .col-one .all-cats-selector .menu-wrapper-with-h3 h3 {
	margin-bottom: 0;
	/*margin-top: 30px;*/
}
.menu-wrapper-with-h3 {
	margin-top: 30px;
}
.two-col-strip .col-one .all-cats-selector .menu-wrapper-with-h3:first-child{
    margin-top:0;
}
.two-col-strip .col-one .all-cats-selector .cats-menu,
.no-js img.lazyload {
    	display: none;
    }
.two-col-strip .col-one .all-cats-selector .cats-menu.sub-cats-menu{
    	display: block;
    }
.two-col-strip .col-one .all-cats-selector .menu-wrapper-with-h3 h3.toggle-menu::after {
	content: "\eb27";
}

#derectory-list .r2g-flex-xlist-main-strip.flex-with-rotator.default-component{
    padding-bottom:0;
}
#derectory-list .r2g-flex-xlist-main-strip.flex-with-rotator.default-component > .container{
    padding:0;
}  
#derectory-list .r2g-flex-xlist-main-strip.flex-with-rotator.default-component .arrows-wrapper{
    top: calc((100% / 3) + 5px)
}
.two-col-strip .col-one .xmenu.cats-menu .menu li > span{
    padding-right: 0;
}
.strip-row.two-col-strip .xList-item.col-one .xmenu.cats-menu li ul{
    z-index: 2;
    position: relative;
}

.two-col-strip.filter-wrapper .col-one .menu li.active a{
    pointer-events: auto
}

.two-col-strip.filter-wrapper .col-one .cats-menu .menu li.active a,
.two-col-strip.filter-wrapper .col-one .cats-menu.ajax-menu .menu li.active > a > span{
    pointer-events: auto
}
.two-col-strip.filter-wrapper .col-one .cats-menu.sub-cats-menu .menu li.active > span > a,
.two-col-strip.filter-wrapper .col-one .cats-menu.ajax-menu .menu li.active > a{
    pointer-events: none;
    color : #940029;
}
#derectory-list .slick-track{
    margin-left : 0;
}
.r2g-xbox-sub-component.option-one.default-component .content-wrapper > p {
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
#derectory-list .r2g-flex-xlist-main-strip.flex-with-rotator .rotatorElement .arrows-wrapper {
	position: absolute;
	z-index: 3;
	width: 100%;
	top: calc((100vw - 40px) * 35 / 100);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
	right: 0;
	margin: 0 auto;
}
#derectory-list .r2g-flex-xlist-main-strip.flex-with-rotator .rotatorElement .slick-arrow {
	background: #fff;
    box-shadow: 0px 0px 2px 0px #000;
}

/* auto complete */
.no-results-label {
	position: absolute;
	left: 0;
	top: 47px;
	font-size: 0.8em;
	color: #9a1135;
}
.filter-options-wrapper {
	position: relative;
	z-index: 3;
}
.cms-form-holder .cms-form .form-group.autocompelte-init {
	z-index: 2;
}
.autocompelte-init .ui-menu {
	position: absolute !important;
	top: 44px !important;
	padding: 10px 0;
	box-sizing: border-box;
	margin-bottom: 0px;
	background: #F5F5F5;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
	opacity:1;
	pointer-events: auto;
	border: 1px solid #e3e3e3;
	
	-webkit-transition: opacity 0.2s ease;
	-ms-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
}

.autocompelte-init.searching .ui-menu{
    opacity:0;
	pointer-events: none;
}
    .autocompelte-init .ui-menu .ui-menu-item {
    	font-size: 0.95em;
    	margin-bottom: 8px;
    }
    .autocompelte-init .ui-menu .ui-menu-item:last-child{
        margin-bottom: 0;
    }
    .autocompelte-init .ui-menu .ui-menu-item-wrapper{
        padding: 0 10px;
    }
    .autocompelte-init .ui-menu .ui-menu-item-wrapper.ui-state-active{
        background:#4983f2;
        color: #fff;
    }
    .autocompelte-init .search-icon::after {
    	content: "";
    	position: absolute;
    	top: calc(50% - 9px);
    	left: calc(50% - 11px);
    	width: 16px;
    	height: 16px;
    	border: 2px solid #4f4f4f;
    	border-radius: 100%;
    	border-top-color: transparent;
    	opacity:0;
    	pointer-events:none;
    	
    	-webkit-transition: opacity 0.2s ease;
    	-ms-transition: opacity 0.2s ease;
    	transition: opacity 0.2s ease;
    	
    	animation-name: searchloader;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    .autocompelte-init.searching .search-icon::after{
        opacity:1
    }
    .filter-options-wrapper .autocompelte-init.filter-option.search-text::after{
        opacity:1;
    	pointer-events:auto;
    	-webkit-transition: opacity 0.2s ease;
    	-ms-transition: opacity 0.2s ease;
    	transition: opacity 0.2s ease;
    }
    .filter-options-wrapper .autocompelte-init.searching.filter-option.search-text::after{
        opacity:0;
    	pointer-events:none;
    }
    
    
    
    @keyframes searchloader {
      0%   {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }
@media(min-width: 768px){
    .two-col-strip.filter-wrapper .col-one .col-one-wrapper > div.all-cats-selector {
    	max-width: 100%;
    	flex-basis: 100%;
    	display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }
    .all-cats-selector > div {
    	flex-basis: 48%;
    	max-width: 48%;
    	/* box-sizing: border-box; */
    	position: relative;
    	z-index: 2;
    	margin-top:0;
    }
    .all-cats-selector > div:nth-child(2n){
        order: 2;
    }
    .all-cats-selector > div:nth-child(3n){
        order: 1;
    }
    .all-cats-selector > div:nth-child(4n){
        order: 3;
    }
    .two-col-strip .col-one .all-cats-selector h3 {
    	height: auto;
    	margin-top: 0px;
    }
    #derectory-list .xList-item .image-wrapper {
        padding: 100% 0 0;
    }
    #derectory-list .r2g-flex-xlist-main-strip.flex-with-rotator .rotatorElement .arrows-wrapper {
    	top: calc((81vw - 30px) / 4)
    }
}

@media(min-width: 1024px){
    #derectory-list .cat-links-wrapper .link-as-button {
    	padding: 9px 10px 9px;
    }
    #derectory-list .r2g-flex-xlist-main-strip.flex-with-rotator .rotatorElement .arrows-wrapper {
    	top: calc((81vw - 60px) / 6);
    }
     #derectory-list ul.first-level:not(.slick-slider) .xList-item {
        display: block !important;
        width: calc((100% - 90px) / 3);
        margin: 0 15px 30px;
    }
}  
@media(min-width:1280px){
    #derectory-list .cat-links-wrapper .link-as-button {
    	padding: 9px 22px 9px;
    }
    .strip-row.two-col-strip.filter-wrapper .xList-item.col-two {
    	max-width: 70%;
    }
    .all-cats-selector > div {
    	flex-basis: 100%;
    	max-width: 100%;
    	/* box-sizing: border-box; */
    	position: relative;
    	z-index: 2;
    	margin-top: 0px;
    	margin-bottom: 30px;
    }
    .all-cats-selector > div:nth-child(2n){
        order: 1;
    }
    .all-cats-selector > div:nth-child(3n){
        order: 1;
    }
    .all-cats-selector > div:nth-child(4n){
        order: 1;
    }
        .two-col-strip .col-one .all-cats-selector .menu-wrapper-with-h3 h3 {
        	margin-bottom: 30px;
        	pointer-events:none;
        }
        .all-cats-selector .menu-wrapper-with-h3 h3:after{
            display:none;
        }
        .two-col-strip .col-one .all-cats-selector .cats-menu {
        	display: block;
        }
    
    .two-col-strip.filter-wrapper .all-cats-selector .cats-menu nav > ul li a:hover{
        background-color : rgba(213, 209, 209, 0.47);
        color: #9a1135;
    } 
    #derectory-list .xList-item .image-wrapper {
        padding: 100% 0 0;
    }
    .filter-results-section .r2g-xbox-sub-component.text-align-left.xbox-default.option-one.default-component .r2g-xbox {
    	margin: 10px 0;
    }
    #derectory-list .r2g-flex-xlist-main-strip.flex-with-rotator .rotatorElement .slick-arrow {
    	background: none;
    	box-shadow: none;
    }
    #derectory-list .r2g-flex-xlist-main-strip.flex-with-rotator .rotatorElement .arrows-wrapper {
    	top: calc((70vw - 60px) / 6);
    }
}


@media(min-width:1600px){
    #derectory-list .r2g-flex-xlist-main-strip.flex-with-rotator .rotatorElement .arrows-wrapper {
    	top: 165px;
    }
}