<style>

.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> a.image-popup,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> a.video-popup,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> a.shrcode-popup,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> a.fancyfilter_port_link{

    color: <?php echo esc_attr($el_zoom_color) ?>;
    fill: <?php echo esc_attr($el_zoom_color) ?>;
    background-color:<?php echo esc_attr($el_zoom_bgcolor) ?>;
    border: 1px solid <?php echo esc_attr($el_zoom_bgcolor) ?>
}
.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> a.image-popup:hover,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> a.video-popup:hover,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> a.shrcode-popup:hover,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> a.fancyfilter_port_link:hover,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .portfolio_wrap_six .portfolio_content .icon li a:after{

    color: <?php echo esc_attr($el_link_color) ?>;
    fill: <?php echo esc_attr($el_link_color) ?>;
    background-color:<?php echo esc_attr($el_link_bgcolor) ?>;
    border: 1px solid <?php echo esc_attr($el_link_bgcolor) ?>;

}
    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .fancyfilter_readmore{
        text-align: <?php echo esc_attr($fancyfilter_pro_readmore_align); ?>;
    }
    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .fancyfilter_readmore a{

            background: <?php echo esc_attr($el_readmore_bgcolor); ?>;
            color: <?php echo esc_attr($el_readmore_color); ?>;;
            border: 1px solid <?php echo esc_attr($el_readmore_bgcolor); ?>;
        }
        

        .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .fancyfilter_readmore a:hover{
            color: <?php echo esc_attr($el_readmore_bgcolor); ?>;;
        }
    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .fancyfilter_pro_pagination a.next.page-numbers,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?>  .fancyfilter_pro_pagination a.page-numbers{
        color:  <?php echo esc_attr($el_pagination_color); ?>;
        background-color:  <?php echo esc_attr($el_pagination_bg_color); ?>;
        border: 2px solid  <?php echo esc_attr($el_pagination_bg_color); ?>;

    }
    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .fancyfilter_pro_pagination span.page-numbers.current{
        color:  <?php echo esc_attr($el_pagination_ac_color); ?>;


    }
    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .fancyfilter_pro_pagination{

    text-align: <?php echo esc_attr($fancyfilter_pro_pg_align); ?>;
    margin-top: <?php echo esc_attr($el_pagination_top_space);?>px;

}



        
    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .fancyfilter_pagination a.next.page-numbers,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?>  .fancyfilter_pagination a.page-numbers{
        color:  <?php echo esc_attr($el_pagination_color); ?>;
        background-color:  <?php echo esc_attr($el_pagination_bg_color); ?>;
        border: 2px solid  <?php echo esc_attr($el_pagination_bg_color); ?>;

    }
    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .fancyfilter_pagination span.page-numbers.current{
        color:  <?php echo esc_attr($el_pagination_ac_color); ?>;


    }
    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .fancyfilter_pagination{

    text-align: <?php echo esc_attr($fancyfilter_pro_pg_align); ?>;
    margin-top: <?php echo esc_attr($el_pagination_top_space)?>px;

}
.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type) ?> li.hover_eight.hover_button,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type) ?> li.hover_eight.hover_button:before,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type) ?> li.hover_eight.hover_button:after,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> li.hover_three::before{
        background: <?php echo esc_attr($btnbg) ?>;
    }



    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .hover_six.active,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .hover_seven svg.button-stroke,.hover_two rect{
        border-top-color: <?php echo esc_attr($btn_act) ?>;
        stroke: <?php echo esc_attr($btn_act) ?>;
    }
    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .hover_twelve.from-right:before,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .hover_univer:hover:after,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .active.hover_univer:after,.hover_four:after{

      background: <?php echo esc_attr($btnbg) ?>;  
    }




    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .portfolio_content:before,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?>  .fancyfilter_imageclass:before,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?>  .fancyfilter-free-item__info{

    background:<?php echo esc_attr($col_2) ?> ;
    background: linear-gradient(151deg, <?php echo esc_attr($col_1) ?> 36%, <?php echo esc_attr($col_2) ?> 100%)
       
    }


    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .portfolio_content small{
    color:<?php echo esc_attr($el_cat_color)?>     
    }
    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .portfolio_content h2{
        color:<?php echo esc_attr($el_title_color);?> 

    }
 .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?>  .fancyfilter-filter-nav ul li{

    color: <?php echo esc_attr($btnclr) ?>;
    
  }
  .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .fancyfilter-filter-nav ul li.active{
   color: <?php echo esc_attr($btn_act) ?>; 
  }
  .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .fancyfilter-free-item__link{
    fill: <?php echo esc_attr($el_zoom_color) ?>; 
    background:<?php echo esc_attr($el_zoom_bgcolor) ?>;
  }
  .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type)?> .fancyfilter-free-item__link:hover{
  fill: <?php echo esc_attr($el_link_color) ?>; 
  background:<?php echo esc_attr($el_link_bgcolor) ?>;  
  }
  .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type) ?> #fancyfilter-filter-nav-shrcode  ul li{
    font-weight: <?php echo esc_attr($el_btn_f_weight) ?>; 
    font-size:<?php echo esc_attr($el_btn_f_size) ?>px;

  }
  .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type) ?> .portfolio_content h2{

  font-weight: <?php echo esc_attr($el_ti_font_w) ?>; 
  font-size:<?php echo esc_attr($el_ti_font) ?>px;  
  }

  @media (max-width:768px){
  .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type) ?>   .fancyfilter-filter-nav ul{
        text-align: center;
    }
    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type) ?>     .fancyfilter-filter-nav ul li {
        text-align: center;
        display: block;
        margin:20px 0;
    }
    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type) ?>    .active.hover_one::before, .active.hover_one::after {
        width: 20%;
        left: 41%;
        right: 0;
    }

    }
    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type) ?> .portfolio_content .icon li a{
       background-color: <?php echo esc_attr($el_zoom_bgcolor) ?>;
       border: 1px solid <?php echo esc_attr($el_zoom_bgcolor) ?>; 
    }
    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type) ?> .portfolio_content .icon li a svg{
            fill: <?php echo esc_attr($el_zoom_color) ?>;
    }
    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type) ?> .portfolio_content .icon li a:hover svg,.fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type) ?> a.fancyfilter_port_link:hover svg#fancyLinkOIconTwoss{
            fill: <?php echo esc_attr($el_link_color) ?>;
    }

    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type) ?> a.fancyfilter_port_link:hover svg#fancyLinkOIconThree, a.fancyfilter_port_link:hover svg#fancyLinkOIconThree path {
     stroke: <?php echo esc_attr($el_link_color) ?>;
    }

     .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type) ?> .portfolio_content .icon li a:hover{
            background-color: <?php echo esc_attr($el_link_bgcolor) ?>;
            border-color:<?php echo esc_attr($el_link_bgcolor) ?>;
    }

    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type) ?> a.fancyfilter_port_link svg#fancyLinkOIconThree, a.fancyfilter_port_link svg#fancyLinkOIconThree path {
        stroke: <?php echo esc_attr($el_zoom_color) ?>;
        fill: none;
    }
    .fancyfilter-filter-wrapper-<?php echo esc_attr($rand_type) ?> a.fancyfilter_port_link svg#fancyLinkOIconTwoss{

        fill:  <?php echo esc_attr($el_zoom_color) ?>;
        stroke: none;
    }

</style>
