/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

.btn-ita{
	display:inline-block;
}
.btn-ita::first-letter{
	font-style:italic;
	padding-right:2px;
}

.btn-ita svg{
	transition:all .3s ease;
	margin-left:15px;
}
.btn-ita:hover svg{
	opacity:.75;
}

.btn-ita.bricks-button.sm::first-letter{
	padding-right:1px;
}

.btn-ita.bricks-button.sm svg{
	width: 14px;
    height: 14px;
	margin-left:10px;
}

#logo-bp-hero{
	filter:blur(10px);
	opacity:0;
	transition:all 1s ease;
	transform:scale(.4);
	transform-origin:75% center;
}

#logo-bp-hero[animation="unblur"]{
	filter:blur(0);
	opacity:1;
	transition:all 1s ease;
	transform:scale(1);
	transition-delay:.5s;
	transform-origin:center center;
}


.collapsable {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: height 0.4s ease-in-out;
}

.content {
    max-height: 360px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.4s ease-in-out;
    
    /* Apply fading mask */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
}

.collapsable.small .content {
    max-height: 240px;
}

.read-less-divider {
    display: none;
}

/* Expanded state */
.collapsable.expanded .content {
    max-height: 1000px;
    -webkit-mask-image: none;
    mask-image: none;
}

.collapsable.expanded .read-more-divider {
    display: none;
}

.collapsable.expanded .read-less-divider {
    display: flex;
}

.best-seller-icon{
	filter:blur(10px);
	opacity:0.5;
	transition:all .3s ease;
	mix-blend-mode:screen;
}

.best-seller-icon[animation="unblur"]{
	filter:blur(0);
	opacity:1;
	transition:all .3s ease;
}

.other-product:hover .icon-other-prod{
	fill:white!important;
}

.other-product.img-other-prod{
	filter:grayscale(1);
	transition:all .3s ease;
}

.other-product:hover .img-other-prod{
	transform:translate(-50%, -50%) scale(1.1)!important;
	filter:grayscale(0);
}

.other-product .other-prod-overlay{
    background :  #031430!important;
    opacity :1!important;
    mix-blend-mode:color;
    transition: all. 3s ease;
} 

.other-product:hover .other-prod-overlay{ 
    opacity :0!important;
}