/*  
Styling for buy button, hidden hides buy button when out of stock, it is based on ecwid putting "disabled" in their code when out of stock, 
I think it may be based on the CSS psudo-class "empty"
 */

 html#ecwid_html body#ecwid_body .ecsp.ecsp-SingleProduct-v2 .ecwid-SingleProduct-powered-by {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ecwid-btn {
all: inherit !important;
  background-color: #EA4C89 !important;
  border-radius: 8px !important;
   box-sizing: border-box !important;
  color: #FFFFFF !important;
  display: inline-block !important;
  font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
   padding: 5px 11px !important;
    }
    *:disabled {
    visibility: hidden !important;
}
  /*  hides prices for cakes and Viennoiseries and sandiwches by targeting ecwids item prop on price div in cards files */

  #Custom_Cakes.row.justify-content-center div[itemprop="price"] div,
  #Viennoiseries.row.justify-content-center div[itemprop="price"] div,
  #Sandwiches.row.justify-content-center div[itemprop="price"] div {
      display: none !important;
  }
  


 /*  very important trick for page flicker upon load*/

  .wow {
    visibility: hidden;
  } 



  /* this class changes carousl arr4ow color  */


.carousel-control-next  {
        filter: invert(100%);
    }
    .carousel-control-prev {
        filter: invert(100%);
    }

      /* I thiink this is line going through cards title  */

.linee {
  width: 70%; 
  text-align: center; 
  border-bottom: 2px solid #000; 
  line-height: 0.1em;
  margin: 10px 0 20px; 
} 

.linee span { 
   background: #f7f7f7; 
   padding:0 10px; 
 }
  
  
  
  
  
  
  
  /*  picture overlay with text on hover effect  */

  
  .title {
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 10px
  }

  .content {
    position: relative;
    margin: auto;
  }

  .content .content-overlay {
    pointer-events: none;                /*  <----- very important trick  */
    background: rgba(0, 0, 0, 0.7); 
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s
  }

  .content:hover .content-overlay {
    opacity: 1
  }




  .content-details {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s
  }

  .content:hover .content-details {
    top: 50%;
    left: 50%;
    opacity: 1
  }

  .content-details h3 {
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.15em;
    margin-bottom: 0.5em;
    text-transform: uppercase
  }

  .content-details p {
    color: #fff;
    font-size: 0.8em
  }



   /* Forces facebook and insta logos down on sidebar */

 .force-to-bottom {
    position: absolute;
    bottom: 3%;
    width: 100%;
}  

/*  picture modals  */
.modal-body {
  padding: 0px; 
 } 

     /*  Trick: to enable scrolling when checking out, when you click on bag it closes background modals  */

 .modal {
  z-index: 1491;
}

    

.pointer {cursor: pointer;}


    /*  Enlarges Social Icons on hover  */

    .grow:hover {
      transition: all .2s ease-in-out; 
        transform: scale(1.5); }





 /*  Homepage masonry  */

.masonry {
            /* Masonry container */
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
            -webkit-column-gap: 0em;
            -moz-column-gap: 0em;
            column-gap: 0em;
            margin: 0em;
            padding: 0;
            -moz-column-gap: 0em;
            -webkit-column-gap: 0em;
            column-gap: 0em;
          /*  font-size: 0em; */
        }

        .item {
            display: inline-block;
            background: #fff;
            padding: 0em;
            margin: 0 0 0 em;
            width: 100%;
            -webkit-transition: 1s ease all;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        .item img {
            max-width: 100%;
        }

        

        @media only screen  and (min-width: 1px) {
            .masonry {
                -moz-column-count: 3;
                -webkit-column-count: 3;
                column-count: 3;
            } 

           
        }
                /* masonry is for homepage colums and h-100 is for menu columns cards   */

        @media only screen and (min-width: 1000px)   {
            .masonry {
                -moz-column-count: 5;
                -webkit-column-count: 5;
                column-count: 5;
            } 

           
        }

        @media only screen and (min-width: 2000px)   {
          .masonry {
              -moz-column-count: 7;
              -webkit-column-count: 7;
              column-count: 7;
          } 

        
      }

        

                /* transition for hamburger opacity   */

        body {
            transition: background-color .5s;
            background-color: #f7f7f7 ;
           overflow-x: hidden;
           max-width: 100% ;
        }
 
         /*   side nav bar, also raised Z-index to go over contact modal */

        .sidenav {
            height: 100%;
            width: 0;
            position: fixed;
            z-index: 1498;
            top: 0;
            left: 0;
            background-color: white;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
        }

                 /*    nav bar, also raised Z-index to go over contact modal */

                 .navbar {
                  z-index:1499;             
                }

             /*  Opacity hamburger and what gets pushed  */

        #opaq {
            transition: opacity 0.6s;
        }


        #main {
            transition: margin-left 0.5s;
            padding: 0px;
        }

        .container {
            display: inline-block;
            cursor: pointer;
        }
        /*   Hamburger animation */

        .bar1,
        .bar2,
        .bar3 {
            width: 26px;
            height: 2px;
            background-color: #333;
            margin: 6px 0;
            transition: 0.3s;
        }

        .change .bar1 {
            -webkit-transform: rotate(-45deg)translate(-6px, 4px);
            transform: rotate(-45deg)translate(-6px, 4px);
        }

        .change .bar2 {
            opacity: 0;
        }

        .change .bar3 {
            -webkit-transform: rotate(45deg) translate(-7px, -7px);
            transform: rotate(45deg) translate(-7px, -7px);
        } 


        /* width scrollbar */
::-webkit-scrollbar {
    width: 8px; 
   }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #e5e5e5; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #cdcdcd; 
  }
  
   
  ::-webkit-scrollbar-track { 
      box-shadow: inset 0px 0px 2px rgba(200,200,200,1);
  }
  
  

  /*  strikethrough for sidenav items  (not currently used since the header/nav has been made into their own file

.strike {
  position: relative;
  cursor: pointer;
} 


.strike:before, .strike:after {
  content: '';
  position: absolute;
  width: 0%;
  height: 1px;
  top: 50%;
  margin-top: -0.5px;
  background:black;
}

.strike:before {
  left: -2.5px;
}
.strike:after {
  right: 2.5px;
  background:black;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.strike:hover:before {
  background: black;
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.strike:hover:after {
  background: transparent;
  width: 100%;
  transition: 0s;
}