:root {
    --main-text-color: rgba(51,51,51,1);
   --highlight-color: #00c67d;
}
a.bio_btn{
   font-size: 14px;
   padding: 12px 23px; 
   border: 1px solid var(--main-text-color);
   border-radius: 8px;
   display: inline-block; 
   margin: 0 10px 15px 0;
   color: var(--main-text-color);
   transition-duration: 0.25s;
}

a.bio_btn:hover, 	a.bio_btn.active{
   color: white; 
   background: var(--highlight-color);
   border: 1px solid var(--highlight-color);
}

#wrapper section .centered .content{
   width:100% !important;
}

#wrapper section .block-products .content ul{grid-template-columns: 1fr; padding-bottom: 30px;}

#wrapper section .block-products .content ul.nav_cat li{
   min-height:unset !important;
}


ul.nav_cat{
   /*background:#000D9D; */
   color: #ffffff;
   margin-bottom: 0px;
   overflow: unset!important;
   width: 100% !important;
   display: inline-block;
}

ul.nav_cat ul{
   /*width:100% !important; */

}

ul.nav_cat > li{
   /*//display:inline; */
   margin: 0px !important;
   width: calc(100% / 5)!important;
}
.centered.nav_cat_large_wrap{
   z-index:1000;
}

ul.nav_cat>li li{
   width:100% !important;
   float: none !important;
   margin:0 !important;
   width:100% !important;
}
ul.nav_cat>li:nth-child(3n + 1){
   clear:none !important;
}

.dropbtn {
   padding:0;
   min-height:56px;
   height:56px;
   position: relative;
   font-size:1.3rem !important;
   display: block !important;
   justify-content: center !important;
   cursor: pointer !important;

}
.dropbtn span {
   background:none !important;
   /* color:#fff !important; */
   display:block;

   /* //width: min-content; */
   position: relative !important;
   top: 50%;
   transform: translate(0,-50%);



   padding:0!important;
   text-align: center;
   font-size: 1.1rem !important;
   position: relative!important;
   margin: auto;

}

.dropdown{border-top: 1px solid rgba(51,51,51,0.3); padding-top: 10px; transition-duration: 0.25s;}
.dropdown.active{}

.dropdown .dropbtn .widget{
   position: absolute;
   top: -50%;
   right: 0;
   width: 10px; height: 10px; 
   transition-duration: 0.25s;
}

.dropdown.active .dropbtn .widget{
   transform: rotate(45deg);
}

.dropdown .dropbtn .widget::before{
   content: "";
   width: 100%;
   border-top: 1px solid #151515;
   position: absolute;
   top: 7px;
   left: 0;
}

.dropdown .dropbtn .widget::after{
   content: "";
   width: 100%;
   border-top: 1px solid #151515;
   position: absolute;
   transform: rotate(90deg);
   top: 7px;
   left: 0;
}



/* The container <div> - needed to position the dropdown content */
.dropdown {
   position: relative !important;

   //display: inline-block !important;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
   display: none ;
   position: relative ;

   min-width: calc(100% - 12px) ;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 999 ;
   overflow: hidden;
   height: 256px;
}

.dropdown-content .scroll_wrapper{
   width: calc(100%);
   height: 100%;
   overflow: hidden;
}

.dropdown-content .scroll_wrapper .scroll_content{
   width: calc(100% + 20px);
   padding-right: 20px;
   height: 100%;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   padding-bottom: 12px;
}


.dropbtn{
   min-height: initial;
   height: initial;
}
/* Links inside the dropdown */
.dropdown-content a {
   color: #222 !important;
   padding: 12px 16px;
   text-decoration: none !important;
   display: block !important;
}


.dropdown:hover a.dropbtn span, .dropdown a.dropbtn span:hover{
   color:#00C67D !important;
   
}

.dropdown-content .scroll_wrapper .scroll_content > ul > li a{
   font-size: 12px;
   padding: 3px 16px;
}

.dropdown-content .scroll_wrapper .scroll_content > ul > li a.active{
    color: #00c67d!important;;
    font-family: Compasse-Bold,sans-serif;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {

   color:#00C67D !important;

}

/* Show the dropdown menu on hover */
.dropdown.active .dropdown-content {
   display: block ;
   width: calc(100% - 12px);
   box-shadow: none;


   border-top-width: 0px;
   margin-left: 6px;
   margin-top: -6px;
}
.dropbtn_wrap {
   /* background: #000D9D; */
   text-align:center;
   /* outline: solid 3px #010855; */
   margin: 6px 6px 0 6px!important;
}

.dropdown-content ul{
   width:100% !important;
}
.dropdown-content a{
   transition:unset !important;

}
.dropdown-content a:hover{
   color:#00C67D !important;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
   /* background-color: #fff !important;
   color:#222; */
}

#wrapper section .block-products .content ul > li.nav_cat_item:nth-child(2n + 1){
   clear:none;
}
.nav_cat_small_wrap{
   display:none;
}

@media (max-width: 1080px){
   .dropbtn span {
       font-size:1rem !important;
   }
}

.product-slide:first-child{
   opacity:1;
}
.product-slide{
   opacity:0;
}

ul.nav_cat.medium{
   display:none;
}

nav_cat_medium_wrap, .breadcrumb_medium{ 
   
   
   display:none;
}

.content select{
	padding: 12px 23px; 
	border-radius: 8px; 
	
}

#select_sub_categories{position: absolute; top: 11px; left: 0; z-index: 5;}

@media (max-width: 600px){
   .left_nav{
       position: fixed;
       z-index: 100;
       top: 0; left: calc(-100%);
       width: calc(100% - 0px); height: calc(100vh - 0px);;
       background: white; 
       padding: 10px;
       transition-duration: 0.5s;
   }
	.left_nav.active{
		left: 0;
	}
}
	
	@media(min-width: 601px){
		.close_nav_mobile{display: none;}
	}
   
   body{overflow-x: hidden;}
   /*
   .nav_cat_large_wrap,.block-slider{
       display:none !important;
   }
   .nav_cat_small_wrap{
       display:block;
   }

   .nav_cat_medium_wrap{
       display:none;
   }
   .all_products_wrap{
       margin:inherit !important;
       padding:0 25px !important;
       padding-top: 40px !important;
       padding-bottom: 40px !important;

       width: unset;
       float: none;
   }
   #wrapper section .block-products .all_products_wrap .content ul > li{
       width:inherit!important;
       margin-right: inherit !important;
   }
*/
   
   
}
.topPage_btn_wrapper{
   width:49%;
   display:inline-block;
   text-align:center;
   margin-bottom:50px;
}

.page_grid{
   display: grid;
   grid-template-columns: 252px 1fr;
   grid-gap: 1em;
}
#wrapper section .block-products .content ul>li:nth-child(4n+1){clear: initial;}
#wrapper section .centered{padding: 1em 2em 2em 0em;}

#wrapper section .block-products .content ul.to-filter{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-gap: 25px;
   width: 100%;
   padding-top: 55px;

}

@media(max-width: 1130px){
   #wrapper section .block-products .content ul.to-filter{
       grid-template-columns: 1fr 1fr 1fr;
   }
}



@media(max-width: 880px){
   #wrapper section .block-products .content ul.to-filter{
       grid-template-columns: 1fr 1fr ;
   }
}

#wrapper section .block-products.inline-view .content ul.to-filter{
   grid-template-columns: 1fr;
}



#wrapper section .block-products .content ul>li h3 {
   height: 60px;
}
.toggle_filter{position: absolute; top: 20px; left: 10px; z-index: 10; cursor: pointer;
border: 1px solid #151515;
border-radius: 3px;
padding: 5px 15px;
transform: translateY(-6px);
}
.toggle_filter i.fa-filter{margin-right: 5px;}

@media(min-width: 601px){
   .toggle_filter, .mobile_filter_close{
       display: none;
   }
}
@media(max-width: 600px){
   #wrapper section .block-products .content ul.to-filter{
       grid-template-columns: 1fr;
	   background: red;

}

   .mobile_scroll_wrapper{
       height: 100%; width: 100%;
       overflow: hidden;
   }

   .mobile_scroll_wrapper .mobile_scroll_content{
       height: 100%; width: calc(100% + 20px);
       padding-right: 20px;
       overflow-y: scroll;
   }
   
   .page_grid{grid-template-columns: 1fr; padding: 0 10px;}
   #wrapper section .centered{padding: 10px;}
   #wrapper section .block-products .content .centered .toggle--view{display: none;}
   
   .mobile_filter_close{
       position: absolute;
       top: 30px; right: 10px;
       width: 30px; height: 30px;

       cursor: pointer;
       
   }
   
   .mobile_filter_close::before{
       content: "";
       width: 100%;
       top: 50%; left: 0;
       position: absolute;
       transform: rotate(-45deg);
       border-top: 1px solid var(--main-text-color);
   }
   
   .mobile_filter_close::after{
       content: "";
       width: 100%;
       top: 50%; left: 0;
       position: absolute;
       border-top: 1px solid var(--main-text-color);
                   transform: rotate(45deg);
   }
}


#wrapper section .block-products .content ul>li{float: initial; width: 100%!important; min-height: initial;}
#wrapper section .block-products .content ul.to-filter li .img{height: 140px; position: relative; border-radius: 8px;}	
#wrapper section .block-products.inline-view .content ul.to-filter li .img{width: 250px;}
#wrapper section .block-products .content ul.to-filter li .img img{position: absolute; top: 50%; transform: translateY(-50%);}
#wrapper section .block-products .content ul.to-filter > li a:hover .img img{transform: translateY(-50%) scale(1.05); }
.nav_cat.large{display: grid; grid-template-columns: 1fr;}

#wrapper section .block-products .content ul.nav_cat>li{width: 100%!important;}
#wrapper section .block-products .content .centered{position: relative;}	
#wrapper section .block-products .content .centered .toggle--view{
   position: absolute;
   top: 25px; left: 0;
   width: calc(100% - 240px);
   z-index: 2;
}

#wrapper section .block-products .content .centered .toggle--view span.tiny-font{margin: 0 15px 0 5px; display: inline-block; font-size: 14px; transform: translateY(-6px);}

.fa-2, .fa-2x{font-size: 1.5em; transform: translateY(-3px);}

.breadcrumb_head nav{text-align: left; font-size: 22px; color: #7f9bca;}
.breadcrumb_head nav a{color: white; text-decoration: underline;}

.dropbtn_wrap, .dropbtn_wrap:hover{background: none!important; color: #00c67d;}
.dropdown.active .dropbtn_wrap a{color: #00c67d;}
.dropdown:hover a.dropbtn span, .dropdown.active a.dropbtn span{color: #00c67d!important;}

#wrapper section .block-products .content ul>li span{text-align: left; text-transform: initial;}
.nav_cat_item .dropdown:hover .dropbtn_wrap a{background: none;}

.left_nav{padding-top: 22px; padding-left: 10px;}
#wrapper section .centered .content .left_nav > h4{padding-bottom: 12px;}

.grid_nav{
   display: block;
   height: 16px; margin-bottom: 30px;
}

.block-products .monolith_grid{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-gap: 25px;
}

@media(max-width: 1130px){
.block-products .monolith_grid{
    grid-template-columns: 1fr 1fr 1fr;
}
}

@media(max-width: 880px){
.block-products .monolith_grid{
    grid-template-columns: 1fr;
}
}

@media(min-width: 920px){
    .block-products.inline-view .monolith_grid{
        grid-template-columns: 1fr;
        

    }

    .block-products.inline-view .monolith_grid .grid_item{
        display: grid;
        grid-template-columns: 200px 1fr;
        width: 660px!important;
        margin: 0 auto;
        align-items: center;
    }

    .block-products.inline-view .monolith_grid .grid_item a.item_cta{
        position: absolute; 
        bottom: 55px; 
        left: 250px;
    }

    .block-products.inline-view .monolith_grid .grid_item .text_wrapper{padding-left: 55px;}
}


.monolith_grid .grid_item{
   position: relative;
   opacity: 0; 
   transform: translateY(100px);
   transition-duration: 0.5s;
   transition-delay: 0.2s;
}

.monolith_grid.loaded .grid_item{
   opacity: 1;
   transform: translateY(0px);
}



.monolith_grid .grid_item .img_wrapper{
   width: 100%; height: 145px;
   position: relative;
   border-radius: 8px;
   border: 1px solid rgba(25,25,25,0.2);
}

.monolith_grid .grid_item .img_wrapper a{
   display: block;
   position: absolute; top: 0; left: 0; 
   width: 100%; height: 100%; 
}

.monolith_grid .grid_item .img_wrapper img{
   position: absolute;
   top: 50%; left: 50%;
   transform: translateX(-50%) translateY(-50%);
   width: 80px;
   height: 80px;
}

.monolith_grid .grid_item .text_wrapper{
   padding: 20px 0 90px 0;
   min-height: 180px;
   position: relative;
}

.monolith_grid .grid_item .text_wrapper h3{
    max-height: 80px;
    height: 48px;
    overflow: hidden;
    color: #333;
    font-size: 20px!important;
    line-height: 1.2em;
    text-transform: uppercase;
    font-family: Compasse-Bold,sans-serif!important;

}

.monolith_grid .grid_item .text_wrapper p{
   color: #777;
}

.monolith_grid .grid_item .text_wrapper h3 a{
   color: #333;
   font-weight: 400;
   font-size: 20px;
   font-family: Compasse-Bold,sans-serif!important;
   word-break: break-all;
}

.monolith_grid .grid_item  a.item_cta{
position: absolute; 
left: 0; bottom: 50px; 
padding-left: 40px; 
color:#00c67d;
text-transform: capitalize;
font-size: 14px;
}

.monolith_grid .grid_item  a.item_cta::before{
   content: "";
   position: absolute; 
   top: 0; left: 0;
   transform: translateX(0);
   width: 20px; height: 20px;
   background: url(../svgs/icon_arrow.svg) no-repeat 0 center;
   background-size: 80%; background-position: center;
   transition-duration: 0.45s;
}

.monolith_grid .grid_item  a.item_cta:hover::before{
   transform: translateX(15px);
}

.woocommerce-result-count{
   position: absolute;
   top: 25px; right: 25px;
}

#wrapper .pagination span{padding: 0;}
#wrapper .pagination span.active_page{padding: 5px 10px; color: #00c67d; display: inline-block;}
#wrapper .pagination span a{display: inline-block; padding: 5px 10px;}

.woocommerce .woocommerce-ordering, .woocommerce .woocommerce-result-count {
top: 0;
}

@media(max-width: 990px){
	#wrapper section .block-products .content .centered .toggle--view{
		position: relative; 
		display: block; 
		top: initial; left: initial; 
		width: 100%; 
		text-align: left;
	    margin-top: 50px;
	}
	
	.woocommerce .woocommerce-ordering, .woocommerce .woocommerce-result-count{text-align: left; width: calc(100% - 25px);}
}

@media(max-width: 600px){
body.show_nav #wrapper header, body.show_nav #wrapper footer{display: none;}
	#select_sub_categories{top: 51px; }
	
	#wrapper section .block-products .content .centered .toggle--view{
		margin-top: 100px; 
	}
	
	.woocommerce .woocommerce-ordering, .woocommerce .woocommerce-result-count{ 
		margin-top: 10px;
		padding-left: 5px;
		z-index: 2;
	}
}


@media(min-width: 1200px){
	#wrapper section .block-products .content .content_grid{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-gap: 25px;
   width: 100%;
   padding-top: 55px;

}
}


#wrapper section .block-products .content .content_grid .content_item{
    position: relative; padding-bottom: 32px;
    height: 100%;
}

#wrapper section .block-products .content .content_grid h3{
    height: 60px;
    max-height: 80px;
    overflow: hidden;
    font-family: Compasse-Bold,sans-serif;
    color: #333;
    font-size: 20px;
    padding: 10px 0;
}

#wrapper section .block-products .content .content_grid p{
    padding: 0; margin: 0;
    color: #777;
    min-height: 89px;
    font-size: 14px;
    line-height: 1.4em;
    padding-bottom: 32px;
}

#wrapper section .block-products .content .content_grid .img{
    width: 100%; 
    height: 140px; 
    position: relative; 
    border-radius: 8px; 
    overflow: hidden;
}

#wrapper section .block-products .content .content_grid .img img{
    position: absolute; 
    width: 100%; 
    top: 50%; left: 50%; 
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
    transition-duration: .45s;
    transition-property: transform,opacity;
    transition-delay: 0s;
    transition-timing-function: ease-in-out;
}

#wrapper section .block-products .content .content_grid .img:hover img{
    opacity: 0.8;
    transform: translateX(-50%) translateY(-50%) scale(1.05);
}

#wrapper section .block-products .content .content_grid a span.link{
    transition-duration: .45s;
    transition-property: background-position;
    transition-delay: 0s;
    transition-timing-function: ease-in-out;
    font-family: Compasse-Bold,sans-serif;
    display: block;
    padding-top: 2px;
    color: #00c67d;
    font-size: 14px;
    padding-left: 35px;
    background: url(svgs/icon_arrow.svg) no-repeat 0 center;
    position: absolute;
    bottom: 10px; left: 0px;
}


#wrapper section .block-products .content .content_grid a span.link::before{
    content: "";
   position: absolute; 
   top: 0; left: 0;
   transform: translateX(0);
   width: 20px; height: 20px;
   background: url(../svgs/icon_arrow.svg) no-repeat 0 center;
   background-size: 80%; background-position: center;
   transition-duration: 0.45s;
}

#wrapper section .block-products .content .content_grid a span.link:hover::before{
    transform: translateX(15px);
}