/*
Theme Name: Claratti - Custom PWD Impreza Child
Template: Impreza
Version: 1.0
Author:	PWD
Theme URI: https://pwd.com.au/
Author URI: https://pwd.com.au/
*/
/*Add your own styles here:*/

#home-category-tiles{
    padding: 0;
	 -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.category-panels-wrapper{
    display: flex; 
    flex-direction: row;
	 -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#home-category-tiles {overflow:hidden;}

.category-panel{
    flex-grow: 1;
    min-height: 500px;
    width: 33%;
    -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.category-panel-heading-wrapper {
	width:100%;
    background: transparent;
    text-align: center;
    position: relative;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	transition: all 0.3s ease;
	top: 450px;
}

.category-panel-heading-wrapper h4 {
    color: #fff;
    font-size: 70px;
    font-weight: bold;
    margin-bottom: 0;
	margin-bottom:0;
	padding-bottom:0;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.category-panel-heading-wrapper p {
    color: #ffffff;
    padding: 10px 60px;
    opacity: 0;
    height: 0px;
    margin: 0 auto;
    margin-bottom: 35px;
   -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.category-panel-heading-wrapper a {
	opacity: 0;
	height:0;
	padding:15px 40px;
	border-radius:10px;
	border:1px solid #CADB29;
	color:#ffffff;
	text-transform:uppercase;
	margin-bottom:25px;
	font-size:14px;
	font-weight:600;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.category-panel-image{
    min-height: 600px;
/*     display: flex; */
    align-items: center;
    background-size: cover!important;
    background-position: 50% 50% !important;
    background-color: rgba(0,0,0,0.2) !important;
    background-blend-mode: multiply;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.category-panel-heading-wrapper p {
    color: #ffffff;
    padding: 10px 60px;
    opacity: 0;
    height: 0px;
	min-width:650px;
	max-width:650px;
}
.category-panel {
	cursor: pointer;
    -webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	transition: all 0.3s ease;
	
}
.category-panel:hover .category-panel-image{
    background-color: rgba(0,0,0,0.6) !important; 
}
.category-panel:hover .category-panel-heading-wrapper {
	top: 300px;
}
.category-panel:hover .category-panel-heading-wrapper p {
	opacity:1;
	height:auto;
}
.category-panel:hover .category-panel-heading-wrapper a {
	opacity:1;
	height:auto;
}
.category-panel-heading-wrapper a:hover {
	background:#CADB29;
	color:#001e2e;
}


@media screen and (max-width: 1300px){
    .category-panels-wrapper {
        display: block;
        flex-direction: column;
        height: auto;
    }
	#home-category-tiles {
		overflow: unset;
		position: relative;
	}

	.category-panel-image {min-height:300px;}
    .category-panel-heading-wrapper{
        writing-mode: initial;
        height: fit-content;
        padding: 20px 50px;
    }
	.category-panel-heading-wrapper p {
		min-width: 90%;
		max-width: 100%;
		min-height: 100px;
	}
	.category-panel-heading-wrapper {top:0px;}
    .category-panel-image{
        transition: 0.3s;
    }
	.category-panel-heading-wrapper p {opacity:1;}
	.category-panel-heading-wrapper a {opacity:1;}
    .category-panel:hover .category-panel-image{
        min-height: 350px;
        transition: 0.3s;
    }
	.category-panel:hover .category-panel-heading-wrapper {top:0px;}

    .category-panel{
        min-height:unset;
		flex-grow:unset;
        width:100%!important;
    }
}

@media screen and (max-width: 600px) {
	  .category-panel-heading-wrapper p {
		min-width: auto;
		max-width: unset;
		padding: 20px 0px;
	}

    .category-panel-image{
        min-height: 150px;
        transition: 0.3s;
    }

    .category-panel:hover .category-panel-image{
        min-height: 200px;
        transition: 0.3s;
    }

}