Your IP : 216.73.216.5

Current Path : /home/theafprt/conviviality360.com/wp-content/themes/salient/css/elements/
Upload File :
Current File : /home/theafprt/conviviality360.com/wp-content/themes/salient/css/elements/element-category-grid.css

/*
Theme Name:  Salient
Description: Styles for the "Category Grid" page builder element.
*/


.nectar-category-grid  {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.nectar-category-grid[data-columns="4"][data-grid-spacing="none"] .nectar-category-grid-item {
  width: 25%;
  padding-bottom: 25%;
} 
.nectar-category-grid[data-columns="3"][data-grid-spacing="none"] .nectar-category-grid-item {
 width: 33.32%;
 padding-bottom: 33.32%;
}
.nectar-category-grid[data-columns="2"][data-grid-spacing="none"] .nectar-category-grid-item {
 width: 50%;
 padding-bottom: 50%;
}

.nectar-category-grid[data-columns="1"] .nectar-category-grid-item {
  width: 100%; padding-bottom: 100%;
} 

.nectar-category-grid[data-grid-spacing="5px"] {
  margin-left: -5px;
  margin-right: -5px;
}

.nectar-category-grid[data-grid-spacing="5px"] .nectar-category-grid-item {
 margin: 5px;
}
.wpb_row.full-width-content .vc_col-sm-12 .nectar-category-grid[data-grid-spacing="5px"]{ 
  margin: 5px; 
}
.wpb_row.full-width-content .vc_col-sm-12 .nectar-category-grid[data-grid-spacing="10px"]{ 
  margin: 10px; 
}
.wpb_row.full-width-content .vc_col-sm-12 .nectar-category-grid[data-grid-spacing="15px"]{ 
  margin: 15px; 
}
.wpb_row.full-width-content .vc_col-sm-12 .nectar-category-grid[data-grid-spacing="25px"]{ 
  margin: 25px; 
}

@media only screen and (min-width: 1001px) {
 body[data-body-border="1"] .wpb_row.full-width-content .vc_col-sm-12 .nectar-category-grid[data-grid-spacing="5px"]{ 
   margin: 5px -4px; 
 }
 body[data-body-border="1"] .wpb_row.full-width-content .vc_col-sm-12 .nectar-category-grid[data-grid-spacing="10px"]{ 
   margin: 10px -9px; 
 }
 body[data-body-border="1"] .wpb_row.full-width-content .vc_col-sm-12 .nectar-category-grid[data-grid-spacing="15px"]{ 
   margin: 15px -14px; 
 }
 body[data-body-border="1"] .wpb_row.full-width-content .vc_col-sm-12 .nectar-category-grid[data-grid-spacing="25px"]{ 
   margin: 25px -24px; 
 }
}

.nectar-category-grid[data-columns="4"][data-grid-spacing="5px"] .nectar-category-grid-item {
  width: calc(25% - 10px);
  padding-bottom: calc(25% - 10px);
} 
.nectar-category-grid[data-columns="3"][data-grid-spacing="5px"] .nectar-category-grid-item {
  width: calc(33.32% - 10px);
  padding-bottom: calc(33.32% - 10px);
} 
.nectar-category-grid[data-columns="2"][data-grid-spacing="5px"] .nectar-category-grid-item {
  width: calc(50% - 10px);
  padding-bottom: calc(50% - 10px);
} 



.nectar-category-grid[data-grid-spacing="10px"] {
  margin-left: -10px;
  margin-right: -10px;
}

.nectar-category-grid[data-grid-spacing="10px"] .nectar-category-grid-item {
 margin: 10px;
}

.nectar-category-grid[data-columns="4"][data-grid-spacing="10px"] .nectar-category-grid-item {
  width: calc(25% - 20px);
  padding-bottom: calc(25% - 20px);
} 
.nectar-category-grid[data-columns="3"][data-grid-spacing="10px"] .nectar-category-grid-item {
  width: calc(33.32% - 20px);
  padding-bottom: calc(33.32% - 20px);
} 
.nectar-category-grid[data-columns="2"][data-grid-spacing="10px"] .nectar-category-grid-item {
  width: calc(50% - 20px);
  padding-bottom: calc(50% - 20px);
} 


.nectar-category-grid[data-grid-spacing="15px"] {
  margin-left: -15px;
  margin-right: -15px;
}

.nectar-category-grid[data-grid-spacing="15px"] .nectar-category-grid-item {
 margin: 15px;
}

.nectar-category-grid[data-columns="4"][data-grid-spacing="15px"] .nectar-category-grid-item {
  width: calc(25% - 30px);
  padding-bottom: calc(25% - 30px);
} 
.nectar-category-grid[data-columns="3"][data-grid-spacing="15px"] .nectar-category-grid-item {
  width: calc(33.32% - 30px);
  padding-bottom: calc(33.32% - 30px);
} 
.nectar-category-grid[data-columns="2"][data-grid-spacing="15px"] .nectar-category-grid-item {
  width: calc(50% - 30px);
  padding-bottom: calc(50% - 30px);
} 


.nectar-category-grid[data-grid-spacing="25px"] {
 margin-left: -25px;
 margin-right: -25px;
}

.nectar-category-grid[data-grid-spacing="25px"] .nectar-category-grid-item {
margin: 25px;
}

.nectar-category-grid[data-columns="4"][data-grid-spacing="25px"] .nectar-category-grid-item {
 width: calc(25% - 50px);
 padding-bottom: calc(25% - 50px);
} 
.nectar-category-grid[data-columns="3"][data-grid-spacing="25px"] .nectar-category-grid-item {
 width: calc(33.32% - 50px);
 padding-bottom: calc(33.32% - 50px);
} 
.nectar-category-grid[data-columns="2"][data-grid-spacing="25px"] .nectar-category-grid-item {
 width: calc(50% - 50px);
 padding-bottom: calc(50% - 50px);
} 


@media only screen and (max-width: 999px) and (min-width: 690px) {
 
 .nectar-category-grid[data-columns="4"][data-grid-spacing="none"]:not([data-masonry="yes"]) .nectar-category-grid-item {
   width: 50%;
   padding-bottom: 50%;
 }
 
 body .nectar-category-grid[data-columns][data-grid-spacing="25px"] .nectar-category-grid-item {
   width: calc(50% - 50px);
   padding-bottom: calc(50% - 50px);
 } 
 
 body .nectar-category-grid[data-columns][data-grid-spacing="15px"] .nectar-category-grid-item {
   width: calc(50% - 30px);
   padding-bottom: calc(50% - 30px);
 } 
 
 body .nectar-category-grid[data-columns][data-grid-spacing="10px"] .nectar-category-grid-item {
   width: calc(50% - 20px);
   padding-bottom: calc(50% - 20px);
 } 
 
 body .nectar-category-grid[data-columns][data-grid-spacing="5px"] .nectar-category-grid-item {
   width: calc(50% - 10px);
   padding-bottom: calc(50% - 10px);
 } 
 
}


@media only screen and (max-width: 690px) {
 
 body .nectar-category-grid[data-columns][data-grid-spacing] .nectar-category-grid-item {
   width: 100%;
   padding-bottom: 75%;
 } 
 
 
}


.nectar-category-grid .nectar-category-grid-item {
  position: relative;
}

.nectar-category-grid .nectar-category-grid-item .inner { overflow: hidden;    
  position: relative;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0; left: 0; 
   background-color: rgba(0,0,0,0.1);
}


body.material .nectar-category-grid .nectar-category-grid-item .inner,
body.material .nectar-category-grid .bg-overlay {
   border-radius: 5px;
}

body.material .nectar-category-grid[data-grid-spacing="none"] .nectar-category-grid-item .inner,
body.material .nectar-category-grid[data-grid-spacing="none"] .bg-overlay {
   border-radius: 0px;
}

.nectar-category-grid .nectar-category-grid-item .content {
 position: absolute;
 width: calc(100% - 60px);
 z-index: 5;
}

.nectar-category-grid[data-shadow-hover="yes"] .nectar-category-grid-item:after {
 box-shadow: 0px 30px 70px rgba(0,0,0,0.25);
 opacity: 0;
 display: block;
 position: absolute;
 content: '';
 z-index: -1;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 transition: opacity 0.35s cubic-bezier(.15,.75,.5,1) 0s;
}

.nectar-category-grid[data-shadow-hover="yes"] .nectar-category-grid-item:hover:after {
 opacity: 1;
}


.nectar-category-grid[data-alignment="top_left"] .content,
.nectar-category-grid[data-alignment="top_middle"] .content,
.nectar-category-grid[data-alignment="top_right"] .content {
 top: 30px;
 left: 30px;
}

.nectar-category-grid[data-alignment="bottom_left"] .content,
.nectar-category-grid[data-alignment="bottom_middle"] .content,
.nectar-category-grid[data-alignment="bottom_right"] .content {
 bottom: 30px;
 left: 30px;
}

.nectar-category-grid[data-alignment="middle"] .content {
 top: 50%;
 left: 30px;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
}

.nectar-category-grid[data-alignment*="middle"] .content {
 text-align: center;
}
.nectar-category-grid[data-alignment*="_right"] .content {
 text-align: right;
}

.nectar-category-grid .nectar-category-grid-item .content h3 {
 margin: 0;
 transition: all 0.45s cubic-bezier(.15,.75,.5,1) 0s;
 line-height: 1.2em;
 max-width: 70%;
}
.nectar-category-grid[data-alignment*="right"]  .nectar-category-grid-item  .content h3 { 
  max-width: 100%; 
  padding-left: 30%
}
.nectar-category-grid[data-alignment*="middle"]  .nectar-category-grid-item  .content h3 { 
  margin: 0 auto; 
}


.nectar-category-grid .nectar-category-grid-item .content .subtext {
 font-size: 14px;
 line-height: 1em;
 transition: opacity 0.25s cubic-bezier(.15,.75,.5,1) 0s;
 position: relative;
}

.nectar-category-grid .nectar-category-grid-item:hover .content .subtext {
 transition: opacity 0.5s cubic-bezier(.15,.75,.5,1) 0s;
}

.nectar-category-grid .nectar-category-grid-item .content[data-subtext-vis="always"] .subtext {
   transition: all 0.45s cubic-bezier(.15,.75,.5,1) 0s;
}

.nectar-category-grid .nectar-category-grid-item .content[data-subtext-vis="on_hover"] .subtext {
 opacity: 0;
}
.nectar-category-grid .nectar-category-grid-item:hover .content[data-subtext-vis="on_hover"] .subtext {
 opacity: 1;
}

.nectar-category-grid[data-alignment*="bottom"] .nectar-category-grid-item .content[data-subtext="cat_item_count"][data-subtext-vis="on_hover"] h3,
.nectar-category-grid[data-alignment*="bottom"] .nectar-category-grid-item .content[data-subtext="custom"][data-subtext-vis="on_hover"] h3 {
 transform: translateY(30px);
}

.nectar-category-grid[data-alignment*="middle"] .nectar-category-grid-item .content[data-subtext="cat_item_count"][data-subtext-vis="on_hover"] h3,
.nectar-category-grid[data-alignment*="middle"] .nectar-category-grid-item .content[data-subtext="custom"][data-subtext-vis="on_hover"] h3 {
 transform: translateY(15px);
}

.nectar-category-grid .nectar-category-grid-item:hover .content[data-subtext="cat_item_count"][data-subtext-vis="on_hover"] h3,
.nectar-category-grid .nectar-category-grid-item:hover .content[data-subtext="custom"][data-subtext-vis="on_hover"] h3 {
 transform: translateY(0px);
}


.nectar-category-grid[data-text-color="dark"] .nectar-category-grid-item:hover .content[data-subtext="custom"][data-subtext-vis="always"] .subtext:after { 
  background-color: #000; 
}
.nectar-category-grid[data-text-color="light"] .nectar-category-grid-item:hover .content[data-subtext="custom"][data-subtext-vis="always"] .subtext:after { 
  background-color: #fff; 
}

.nectar-category-grid[data-text-hover-color="dark"] .nectar-category-grid-item:hover .content *,
.full-width-section > .col.span_12.dark .nectar-category-grid[data-text-hover-color="dark"] .nectar-category-grid-item:hover .content * { 
  color: #000; 
}

.nectar-category-grid[data-text-hover-color="dark"]  .nectar-category-grid-item:hover .content[data-subtext="custom"][data-subtext-vis="always"] .subtext:after {
  background-color:#000;
}

.nectar-category-grid[data-text-hover-color="light"] .nectar-category-grid-item:hover .content * { color: #fff; }

.nectar-category-grid .bg-overlay {
  z-index: 2;
}

.nectar-category-grid-item .bg-overlay[data-opacity="0"] { opacity: 0; }
.nectar-category-grid-item .bg-overlay[data-opacity="0.1"] { opacity: 0.1; }
.nectar-category-grid-item .bg-overlay[data-opacity="0.2"] { opacity: 0.2; }
.nectar-category-grid-item .bg-overlay[data-opacity="0.3"] { opacity: 0.3; }
.nectar-category-grid-item .bg-overlay[data-opacity="0.4"] { opacity: 0.4; }
.nectar-category-grid-item .bg-overlay[data-opacity="0.5"] { opacity: 0.5; }
.nectar-category-grid-item .bg-overlay[data-opacity="0.6"] { opacity: 0.6; }
.nectar-category-grid-item .bg-overlay[data-opacity="0.7"] { opacity: 0.7; }
.nectar-category-grid-item .bg-overlay[data-opacity="0.8"] { opacity: 0.8; }
.nectar-category-grid-item .bg-overlay[data-opacity="0.9"] { opacity: 0.9; }
.nectar-category-grid-item .bg-overlay[data-opacity="1"] { opacity: 1; }

.nectar-category-grid-item:hover .bg-overlay[data-hover-opacity="0"] { opacity: 0; }
.nectar-category-grid-item:hover .bg-overlay[data-hover-opacity="0.1"] { opacity: 0.1; }
.nectar-category-grid-item:hover .bg-overlay[data-hover-opacity="0.2"] { opacity: 0.2; }
.nectar-category-grid-item:hover .bg-overlay[data-hover-opacity="0.3"] { opacity: 0.3; }
.nectar-category-grid-item:hover .bg-overlay[data-hover-opacity="0.4"] { opacity: 0.4; }
.nectar-category-grid-item:hover .bg-overlay[data-hover-opacity="0.5"] { opacity: 0.5; }
.nectar-category-grid-item:hover .bg-overlay[data-hover-opacity="0.6"] { opacity: 0.6; }
.nectar-category-grid-item:hover .bg-overlay[data-hover-opacity="0.7"] { opacity: 0.7; }
.nectar-category-grid-item:hover .bg-overlay[data-hover-opacity="0.8"] { opacity: 0.8; }
.nectar-category-grid-item:hover .bg-overlay[data-hover-opacity="0.9"] { opacity: 0.9; }
.nectar-category-grid-item:hover .bg-overlay[data-hover-opacity="1"] { opacity: 1; }

.nectar-category-grid-item .nectar-category-grid-item-bg, .nectar-category-grid .bg-overlay {
  transition: opacity 0.45s cubic-bezier(.15,.75,.5,1) 0s, transform 0.45s cubic-bezier(.15,.75,.5,1) 0s;
  backface-visibility: hidden;
}

.nectar-category-grid-item:hover .nectar-category-grid-item-bg {
  transform: scale(1.1);
}

.nectar-category-grid .nectar-category-grid-item-bg, 
.nectar-category-grid .nectar-category-grid-link,
.nectar-category-grid .bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.nectar-category-grid  .nectar-category-grid-link {
  z-index: 10;
}

.nectar-category-grid .nectar-category-grid-item-bg[data-nectar-img-src] {
  opacity: 0;
}
.nectar-category-grid .nectar-category-grid-item-bg {
  -webkit-transition: opacity 0.55s cubic-bezier(.15,.75,.5,1) 0.25s, transform 0.45s cubic-bezier(.15,.75,.5,1) 0s;
  transition: transform 0.45s cubic-bezier(.15,.75,.5,1) 0s, opacity 0.55s cubic-bezier(.15,.75,.5,1) 0.25s;
  opacity: 1;
}



/* grid style */
@supports (display: grid) {
  
  .nectar-category-grid[data-masonry="yes"] {
      display: grid;
  }
  body .nectar-category-grid[data-columns][data-grid-spacing][data-masonry="yes"] .nectar-category-grid-item {
    width: auto;
  }

  /* 4 cols */
  .full-width-content .vc_col-sm-12 .nectar-category-grid[data-columns="4"][data-masonry="yes"] {
      grid-auto-rows: minmax(33vh, auto);
  }
  .nectar-category-grid[data-columns="4"][data-masonry="yes"] {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-auto-rows: minmax(30vh, auto);
  }

  .nectar-category-grid[data-columns="4"][data-masonry="yes"] > div:nth-of-type(1),
  .nectar-category-grid[data-columns="4"][data-masonry="yes"] > div:nth-of-type(8),
  .nectar-category-grid[data-columns="4"][data-masonry="yes"] > div:nth-of-type(15) {
    grid-column-end: span 2;
    grid-row-end: span 2;
  }
  
  .nectar-category-grid[data-columns="4"][data-masonry="yes"] > div:nth-child(2),
  .nectar-category-grid[data-columns="4"][data-masonry="yes"] > div:nth-child(7),
  .nectar-category-grid[data-columns="4"][data-masonry="yes"] > div:nth-child(9),
  .nectar-category-grid[data-columns="4"][data-masonry="yes"] > div:nth-child(14),
  .nectar-category-grid[data-columns="4"][data-masonry="yes"] > div:nth-child(16) {
    grid-column-end: span 2;
  }
  

  /* 3 cols */
  .full-width-content .vc_col-sm-12 .nectar-category-grid[data-columns="3"][data-masonry="yes"] {
      grid-auto-rows: minmax(35vh, auto);
  }
  .nectar-category-grid[data-columns="3"][data-masonry="yes"] {
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-rows: minmax(30vh, auto);
  }
  
  
  .nectar-category-grid[data-columns="3"][data-masonry="yes"] > div:nth-of-type(1),
  .nectar-category-grid[data-columns="3"][data-masonry="yes"] > div:nth-of-type(5),
  .nectar-category-grid[data-columns="3"][data-masonry="yes"] > div:nth-of-type(7),
  .nectar-category-grid[data-columns="3"][data-masonry="yes"] > div:nth-of-type(11),
  .nectar-category-grid[data-columns="3"][data-masonry="yes"] > div:nth-of-type(13),
  .nectar-category-grid[data-columns="3"][data-masonry="yes"] > div:nth-of-type(17) {
    grid-column-end: span 2;
    grid-row-end: span 2;
  }
  
  /* 2 cols */
  .full-width-content .vc_col-sm-12 .nectar-category-grid[data-columns="2"][data-masonry="yes"] {
      grid-auto-rows: minmax(35vh, auto);
  }
  .nectar-category-grid[data-columns="2"][data-masonry="yes"] {
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: minmax(30vh, auto);
  }
  
  .nectar-category-grid[data-columns="2"][data-masonry="yes"] > div:nth-of-type(1),
  .nectar-category-grid[data-columns="2"][data-masonry="yes"] > div:nth-of-type(5),
  .nectar-category-grid[data-columns="2"][data-masonry="yes"] > div:nth-of-type(7),
  .nectar-category-grid[data-columns="2"][data-masonry="yes"] > div:nth-of-type(11),
  .nectar-category-grid[data-columns="2"][data-masonry="yes"] > div:nth-of-type(13) {
    grid-row-end: span 2;
  }
  
}  
  
@media only screen and (max-width: 999px) and (min-width: 690px) {
    .nectar-category-grid[data-columns][data-masonry="yes"] {
        grid-template-columns: 1fr 1fr;
    }
    body .wpb_row .nectar-category-grid[data-columns][data-masonry="yes"] > div {
      grid-row-end: span 1;
      grid-column-end: span 1;
    }
    body .wpb_row .nectar-category-grid[data-columns][data-masonry="yes"] > div:nth-child(3n+1){
      grid-column-end: span 2;
    }
}
  
@media only screen and (max-width: 690px)  {
  
    .nectar-category-grid[data-shadow-hover="yes"] .nectar-category-grid-item:after { display: none; }
    
    body .nectar-category-grid[data-columns][data-masonry="yes"] {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        grid-template-columns: none;
        grid-auto-rows: auto;
    }
    body .wpb_row .nectar-category-grid[data-columns][data-masonry="yes"] > div {
      grid-row-end: auto;
      width: 100%!important;
      grid-column-end: auto;
    }
    
    .nectar-category-grid .nectar-category-grid-item .nectar-category-grid-item-bg {
        -webkit-transform: none;
        transform: none;
    }
    body.material .main-content .nectar-category-grid .nectar-category-grid-item .inner {
      overflow: visible;
      border-radius: 0;
    }
    body.material .main-content .nectar-category-grid[data-grid-spacing*="px"] .nectar-category-grid-item .nectar-category-grid-item-bg {
      border-radius: 5px;
    }
    
    
}