/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.product-footer{
	background-image: url('assets/img/product-desc-back.png');
	background-size: 100% 100%;
	background-position: center center;
	height: 630px;	
	display: flex;
	align-items: center;
	.container{		
		.product-details-container{
			background-color: white;
			width: 925px;
			border-radius: 25px;
			padding: 45px 110px;	
			margin: 0 auto;		
			box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);

			.description-prod-tv{
				display: flex;
			}
		}
	}
}

.categories-rows{
	.col{
		height: 280px;
	}
	.left-img-ofta{
		position: relative;
		height: 250px;	
		border-radius: 20px;
		background: #A06D39;
		overflow: hidden;
		
		.col-inner{
			height: 250px;
			position: relative;	
			
			h2{
				font-family: "Majestic Banner";
				position: absolute;
				right: 40px;
				bottom: 30px;
				width: fit-content;
				font-size: 35px;
				color: white;
				transition: transform .3s ease;					
			}			
			
			p{
				opacity: 0.00;
				position: absolute;
				right: 23px;
				bottom: 55px;
				width: 175px;
				font-size: 12px;
				font-family: 'fira-sans';
				color: white;
				line-height: 15px;
				transition: .3s all ease-in-out;
				-moz-transition: .3s all ease-in-out;
				-webkit-transition: .3s all ease-in-out;				
			}
			button{
				opacity: 0.00;
				border-radius: 6px !important;
				background: #05394B;
				font-weight: 500;				
				font-size: 15px;
				position: absolute;
				right: 10px;
				bottom: 10px;
				color: white;
				width: 175px;
				transition: .3s all ease-in-out;
				-moz-transition: .3s all ease-in-out;
				-webkit-transition: .3s all ease-in-out;	
			}
			.img{
				.img-inner{
					height: 250px;
          			width: 285px;
					left: -15px;						
					transition: transform .3s ease;					
					transform: scale(1.45) translateY(0%);											
					transform-origin: 0 0;						
				}			
			}
		}
		.col-inner:hover{
			
			p,button{
				opacity: 1.00;
			}
			h2{
				transition: transform .3s ease;					
				transform: translateY(-125%);
			}
			.img{
				.img-inner{
				transition: transform .3s ease;					
				transform: scale(1.1) translateY(9%);											
				transform-origin: 0 0;					
				}				
			}

		}
	}

	.right-img-ofta{
		position: relative;
		height: 250px;	
		border-radius: 20px;
		background: #3F487E;
		overflow: hidden;
		float: right;	
		width: 100% !important;
		.col-inner{
			height: 250px;
			position: relative;	
			.img{
				.img-inner{
					height: 250px;
					width: 285px;
					left: 285px;						
					transition: transform .3s ease;					
					transform: scale(1.35) translateY(-2%);
					transform-origin: 0 0;						
				}			
			}
			h2{
				font-family: "Majestic Banner";
				position: absolute;			
				bottom: 30px;
				width: fit-content;
				font-size: 35px;
				color: white;
				transition: transform .3s ease;					
			}			
			
			p{
				opacity: 0.00;
				position: absolute;				
				bottom: 55px;
				width: 200px;
				font-size: 12px;
				font-family: 'fira-sans';
				color: white;
				line-height: 15px;
				transition: .3s all ease-in-out;
				-moz-transition: .3s all ease-in-out;
				-webkit-transition: .3s all ease-in-out;				
			}
			button{
				opacity: 0.00;
				border-radius: 6px !important;
				background: #05394B;
				font-weight: 500;				
				font-size: 15px;
				position: absolute;				
				bottom: 10px;
				color: white;
				width: 175px;
				transition: .3s all ease-in-out;
				-moz-transition: .3s all ease-in-out;
				-webkit-transition: .3s all ease-in-out;	
			}			
		}
		.col-inner:hover{
			.img{
				.img-inner{
				transition: transform .3s ease;					
				transform: scale(1.2) translateY(-2%) translateX(17%);
				transform-origin: 0 0;					
				}				
			}	
			p,button{
				opacity: 1.00;
			}
			h2{
				transition: transform .3s ease;					
				transform: translateY(-125%);
			}			
		}
	}
	.right-img-ofta.opo{
		float: left;	
		.col-inner{		
			p{
				width: 265px;				
			}
		}		
		.col-inner:hover{
			h2{
				transform: translateY(-155%);
			}			
		}		
	}
	.left-img-ofta.peques{
		background: #3F487E;
		.col-inner{
			height: 250px;
			position: relative;	
			
			h2{				
				right: 90px;
			}			
			
			p{
				width: 250px;				
			}
		}	
	}
	.left-img-ofta.opo{
		.col-inner:hover{
			
			p,button{
				opacity: 1.00;
			}
			h2{
				transition: transform .3s ease;					
				transform: translateY(-125%);
			}
			.img{
				.img-inner{
				transition: transform .3s ease;					
				transform: scale(1.2) translateY(0%);
				transform-origin: 0 0;					
				}				
			}

		}		
	}	
}

/*************** MENU STYLES   ***************/
.home > #header > .header-inner > .header-nav > li{
	color: #05394B;
	font-size: 16px;
	font-weight: 500;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}