/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
 /*

 * Custom code goes here.

 * A template should always ship with an empty custom.css

  */


/* change background color/image place picture in assets/img folder */  

 #wrapper {background-image: url(https://quillingcanada.ca/themes/classic/assets/img/quilledorchids.jpg); background-position: center center; background-size: cover;}

/*#wrapper {background-color: #ffffff;}*/



/*change color of content wrapper on product page pages*/

#content-wrapper {background-color: #ffffff;}

#content-wrapper.js-content-wrapper {padding: 15px;}



/*change color of entire content category page area*/

#wrapper .container {background-color: #ffffff;}



/*change color of navigation menu on product pages*/

#wrapper .breadcrumb {background-color: #ffffff; padding: 10px;}



/*change color of search bar*/

#search_widget form input {background-color: #e9d6da;}



.block-category.card.card-block {min-height: 5.75rem;}



/* change background color of footer */

    #footer {background-color: #e8b2bf;}

    

/* change background color of header */

   #header {background-color: #e8b2bf;}

    

/* change header top color */    

    #header .header-top {background-color: #e8b2bf;}

    

/* change button color */

.btn-primary {background-color: #e8b2bf;}

.btn-primary {color: #424242;}

.btn-primary:hover {background-color: #e74169;}

.btn-primary.add-to-cart:hover {background-color: #e74169;}



/*change button color of email alert on product page */

.btn.btn-primary.js-mailalert-add.mt-1 {background-color: #E8B2BF;}





/* change link color: #E9D6DA-LIGHT PINK(cart and search backgrounds), #E8B2BF-MEDIUM PINK(header/footer background), #e74169-DARK PINK (pink hover colors) #202326-DARK BLUE(links), #424242-DARK GREY */

   #header a:hover {color: #3178c0; text-decoration: underline;} /*header links-contact us...*/

   #header .header-top a[data-depth="0"]:hover{color:#3178C0;	text-decoration: underline solid #3178C0;} /*change the color of header nav (category names) on hover*/

   #header .header-top a[data-depth="0"]{color: #202326;} /*change the color of the header nav (category names)*/

   #header .header-nav .currency-selector{color: #202326;} /*change the color of the currency word on top menu*/

   #body a:hover {color: #202326;}

   #footer a:hover {color: #202326; text-decoration: underline;} /*footer menu links*/    

   .thumb-container.js-thumb-container img.thumb.js-thumb {border-color: #202326;} /*product page images under main image*/

   .product-price.h5 {color: #e74169;} /* product price */

   .nav.nav-tabs .nav-item .nav-link {color: #202326;} /* words...product details/description */

   .tabs .nav-tabs .nav-link.active {color: #202326; border: none; border-bottom: #3178C0 3px solid;} /* active product navigation tab (product details...) */

   .block-contact a {color:#424242;} /* change color of email address in footer */

   #footer a {color: #424242;} /* change color of copywrite in footer */

   /*.product-flags li.product-flag {background-color: #3178C0;}  change color of product flags */

   .product-flags li.product-flag.new {background-color: #3178C0;}

   .product-flags li.product-flag.out_of_stock {background-color: #AE008E;}

   .product-flags li.product-flag.on-sale {background-color: #ff224a;}

   .product-flags li.product-flag.discount {background-color: #00a901;}

   .product-flags li.product-flag.pack {display: none;}

#footer .block-social li.facebook {background-color: #424242;}
#footer .block-social li.facebook:hover {background-color: #e74169;}
#footer .block-social li.instagram {background-color: #424242;}   
#footer .block-social li.instagram:hover {background-color: #e74169;}

   

   .has-discount .discount {

    display: inline-block;

    padding: 0.3125rem 0.625rem;

    margin-left: 0.625rem;

    font-size: 1rem;

    font-weight: 600;

    color: #fff;

    text-transform: uppercase;

    background: #00a901;

}

   

   .product-miniature .highlighted-informations .quick-view:hover {color: #3178C0;} /* change color of category page quick view hover color */

   .pagination .current a {color: #3178C0;} /* change color of category page numbers */

   #header .header-nav .cart-preview.active {background: #e9d6da;} /* change color of cart icon background */

   #header .header-nav .blockcart {background-color: #e9d6da;}

   #cms a {color: #424242;} /*cms page links*/

   #cms a:hover {color: #3178C0; text-decoration: underline;} /*cms links cont*/

   #cms .btn:active {color: #3178C0; text-decoration: underline;}

   /*change color of email subscription box in footer*/

   #footer .block_newsletter {

    float: inherit;

    width: 100%;

    max-width: 50rem;

    margin: auto;

    margin-bottom: 0.625rem;

    clear: both;

    font-size: .875rem;

    background: #e8b2bf;}



/* Auto height on home page carousel*/

.carousel .carousel-inner {

    height: auto;

}



/* Product description background color*/

#content-wrapper { background-color: #ffffff;}



/*widen content wrapper */

    #content-wrapper.js-content-wrapper {padding: 20px;}

    

/*hide subcategories*/

#subcategories {display: none;}







.gallery {

  float: left;

  width: 33.33%;

}



.gallery2 {

  float: left;

  width: 50%;

}





.row:after {

  content: "";

  display: table;

  clear: both;

}	


.galleryContainer {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    
}

.leftgallery {
    width: 33.33%;
    text-align: center;
    clear: both;
}

.middlegallery {
    width: 33.33%;
    text-align: center;
    clear: both;
}

.rightgallery {
    width: 33.33%;
    text-align: center;
    clear: both;
}


/* Media Query */
@media (min-width: 320px) and (max-width: 900px) {
  /* Column Stacking Here */

  .galleryContainer {
      flex-direction: column;
  }

  .leftgallery {
      order: 1;
  }

  .middlegallery {
      order: 2;
  }

  .rightgallery {
      order: 3;
  }

}

/* flip box, show back and front images*/
.flip-box {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: transparent;
}

.flip-box-back {
  background-color: transparent;
  transform: rotateY(180deg);
}

/*flipbox html:

<div class="flip-box">
      <div class="flip-box-inner">
        <div class="flip-box-front">
          <img src="https://dogtowndogtraining.com/wp-content/uploads/2012/06/300x300-061-e1340955308953.jpg" style="max-width: 100%">
        </div>
        <div class="flip-box-back">
          <img src="http://www.deepdiveintel.com/wp-content/uploads/2013/09/Owl-Eye-art-300x300.jpg" style="max-width: 100%">
        </div>
      </div>
    </div>
    
    */

.ets_plp_pagination a.load_more {

    display: inline-block;

    border: 1px solid #ccc;

    padding: 10px 15px;

    color: #424242;

    background: #e8b2bf;

    border-radius: 5px;

    border-color: #424242;

    margin-top: 20px;

}



/*hide payment card/paypal option, change container number if needed*/

#payment-option-4-container {display: none;}


/*#product-id-category-13 .product-quantities {display:none;}*/



/* 

after update changes:





move qty available to above qty on product-variants.tpl add to top of file after each update

     {block name='product_quantities'}

    {if $product.show_quantities}

      <div class="product-quantities" style="color: #3178C0">

        <label class="label">{l s='In stock:' d='Shop.Theme.Catalog'}</label>

        <span data-stock="{$product.quantity}" data-allow-oosp="{$product.allow_oosp}">{$product.quantity} {$product.quantity_label}</span>

      </div>

    {/if}

  {/block}

  

----LEAVE THIS OUT  product availability: Custom order, requires production time

  {block name='product_availability_date'}

    {if $product.availability_date}

      <div class="product-availability-date">

        <label>{l s='Availability date:' d='Shop.Theme.Catalog'} </label>

        <span>{$product.availability_date}</span>

      </div>

    {/if}

    {/block}

 

 

 change the default review rating from 3 to 5

 modules/productcomments/views/templates/hook/post-comment-modal.tpl

 -change number from 3 to 5 line 78

 

 move hook displayafterproductthumbs outside of navigation arrows:

 delete from themes/classic/templates/catalog/_partials/product-cover-thumbnails.tpl

 add to themes/classic/templates/catalog/product.tpl line 72 after </section>

 

 #custom-text {

    padding: 0;----change in themes.css

 

 */