/* 
Theme Name: PennaPowers Theme
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Child Theme for Elementor theme. Modified for P2 Wesite in 2024
Author: Alex
Author URI: https://penapowers.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: penna-theme
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

body{
    overscroll-behavior:none;
}


@media(min-width:768px){
	header.sticky-header {
	--header-height: 136px;
	--shrink-header-to: 0.5;
	--transition-timing: .45s cubic-bezier(.4, 0, .2, 1);
		will-change: min-height;
		min-height: var(--header-height);
		transition: all var(--transition-timing);
}

.penna-logo img{
	will-change: width;
	transition: width var(--transition-timing);
}
.elementor-nav-menu a{
	will-change: padding;
	transition: padding var(--transition-timing);
}

header.sticky-header.elementor-sticky--effects {
	min-height: calc (var(--header-height) * var(--shrink-header-to) );
	background-color:#0B0B0B !important;
}
	header.sticky-header.elementor-sticky--effects .penna-logo img{
	width: 40px;
}

header.sticky-header.elementor-sticky--effects .elementor-nav-menu a { padding-top:5px; padding-bottom:5px; }

header.sticky-header li.menu-item:nth-of-type(3) {
    margin-right: 116px;
}
}


p:last-of-type{
	margin-block-end:0;
}

input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], textarea {
	    transition: border-color 0.2s ease;
    border-radius: 0;
	background-color: rgba(0,0,0,0.035);
	border:none;
	padding: 16px;
	font-size:14px;
	border-bottom: 2px solid #e0e0e0;
}


body .is-layout-flex.is-nowrap{flex-wrap: nowrap; }
body .is-layout-flex.is-nowrap > * {
	flex-grow:1;
	flex-basis: 100%;
}
body .wp-block-group.width-1-2{
	flex-basis: 50%;
}
body .wp-block-group.width-1-3{
	flex-basis: 30%;
}
body .wp-block-group.width-2-3{
	flex-basis: 70%;
}
body hr.wp-block-separator{border:none; border-bottom:1px solid; opacity:.25; margin:1.5em 0}

.wp-block-image{ box-shadow: rgba(0,0,0,.04) 0 1px 0, rgba(0,0,0,.05) 0 2px 7px, rgba(0,0,0,.06) 0 12px 22px; }

:where(.is-layout-flex) {
    gap: 1.5em;
}

/* Single postfolio block */

.penna-portfolio{
	 transform-style: preserve-3d;
}
.penna-portfolio:after{
	position: absolute;
	content:"";
	inset: 0;
    background-color: rgba(51,51,51,0.5);
	transition: all 0.4s cubic-bezier(0.12, 0.65, 0.4, 1);
	z-index: 1;
	opacity: 0;
	visibility: hidden;
}
.penna-portfolio img {
	min-width: 100%;
	display: block;
	object-fit: cover;
    min-height: 100%;
    aspect-ratio: 1.7;
    object-position: center;
}
.penna-portfolio:hover:after{
	opacity: 1;
	visibility: visible;
}
.penna-portfolio .inner-portfolio-overlay{
	transition: border 0.24s cubic-bezier(0, 0, 0.6, 1), opacity 0s ease;
	position: absolute;
	top: 9%;
    left: 9%;
    bottom: 9%;
	right:9%;
	z-index: 5;
}
.penna-portfolio:not(:hover) .inner-portfolio-overlay{
	border-width: 0 !important;
}
.inner-portfolio-desc {
		padding: 17%;
		position: absolute;
		inset: 0;
		z-index: 100;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		transform: translateZ(70px);		

}


.inner-portfolio-desc .content {
	transition: all 0.4s cubic-bezier(0.12, 0.65, 0.4, 1);
	transform: scale(.8);
	opacity: 0;
}
.penna-portfolio:hover .inner-portfolio-desc * {
	transform: scale(1);
	opacity: 1;
}
.portfolio-heading-title{
	margin-bottom: 5px;
}

/* Blog post navigation */

.penna-post-navigation{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.penna-post-navigation li {
	position: relative;
	overflow: hidden;
	width: 50%;
    line-height: 0;
    height: auto;
    padding: 6% 9%;
    min-height: 300px;
    justify-content: center;
    display: flex;
    align-items: center;
    background-color: #333;
}
.single-button.penna-post-navigation li{
	width: 100%;
}

.blog_next_prev_buttons ul .next-post,.blog_next_prev_buttons ul .previous-post {
    padding: 6% 9%
}

.blog_next_prev_buttons ul .next-post:after,.blog_next_prev_buttons ul .previous-post:after{
    background-color: #0d0d0d;
    position: absolute;
	inset: 0;
    content: '';
    display: block;
    z-index: 1;
    opacity: .35;
    transition: opacity .4s cubic-bezier(.05,.2,.1,1) 0s
}

.blog_next_prev_buttons ul .next-post:hover:after,.blog_next_prev_buttons ul .previous-post:hover:after {
    opacity: .9;
}

.blog_next_prev_buttons li a {
    position: absolute;
    inset: 0;
    z-index: 101;
    display: block;
}
.blog_next_prev_buttons .post-bg-img{
	inset: 0;
    position: absolute;
    background-size: cover;
    background-position: center;
    transition: transform .4s cubic-bezier(.05,.2,.1,1) 0s,opacity .3s ease;
}
.blog_next_prev_buttons li:hover .post-bg-img {
    transform: scale(1.1);
}
.blog_next_prev_buttons span {
    display: block;
    color: #fff;
    margin-bottom: 5px;
	text-align: right;
    position: relative;
}

.blog_next_prev_buttons h3{
	color: #fff;
    position: relative;
    z-index: 100;
	display: block;
	width: 100%;
	transition: transform .4s cubic-bezier(.05,.2,.1,1);
}

.blog_next_prev_buttons .previous-post:hover h3{
	transform: translateX(40px) translateZ(0);
    backface-visibility: hidden;
}
.blog_next_prev_buttons .next-post:hover h3{
    transform: translateX(-40px) translateZ(0);
    backface-visibility: hidden;
}

.blog_next_prev_buttons .line{
	height: 2px;
    width: 45px;
    background-color: #fff;
    position: absolute;
    content: '';
    right: -74px;
    display: block;
    backface-visibility: hidden;
    top: 50%;
    transform: translateY(-50%) translateX(28px) scaleX(0);
    transform-origin: right;
}

.blog_next_prev_buttons .arrow line{
	stroke: #fff;
	stroke-width: 2px;
    stroke-dasharray: 10px;
	stroke-dashoffset: 30px;
}

.blog_next_prev_buttons .previous-post:hover .arrow line{
	animation: rightArrowLineStart .3s cubic-bezier(.05,.2,.1,1) .1s forwards;
    stroke-dashoffset: 40px;
}

.blog_next_prev_buttons .arrow{
	position: absolute;
    backface-visibility: hidden;
    right: -43px;
    top: 50%;
    margin-top: -15px;
    height: 30px;
    width: 40px;
    display: block;	
}
.blog_next_prev_buttons .next-post h3 span{
	text-align: left;
}
.blog_next_prev_buttons .next-post h3 .arrow{
	animation: rightArrowEnd .7s cubic-bezier(0,.2,.1,1) forwards;
}
.blog_next_prev_buttons .next-post:hover h3 .arrow{
	transform: translateX(42px);
	animation: rightArrowStart .4s cubic-bezier(.05,.2,.1,1) forwards;
}
.blog_next_prev_buttons .next-post:hover .arrow line{
    animation: rightArrowLineEnd .4s cubic-bezier(.3,.2,.1,1) .25s forwards;
    stroke-dashoffset: 40px;
}
.blog_next_prev_buttons .next-post .arrow line{
    animation: rightArrowLineStart .3s cubic-bezier(.05,.2,.1,1) .1s forwards;
    stroke-dashoffset: 30px;
}

.blog_next_prev_buttons .next-post .line{
	animation: rightLineEnd .4s cubic-bezier(.05,.2,.1,1) forwards;
	right: -74px;
	transform: translateY(-50%) translateX(28px) scaleX(0);
    transform-origin: right;
}
.blog_next_prev_buttons .next-post:hover .line{
	transform: translateY(-50%) translateX(0) scaleX(1);
    transform-origin: left;
    animation: rightLineStart .4s cubic-bezier(.05,.2,.1,1) forwards;
}


.blog_next_prev_buttons .previous-post:hover h3 .arrow{
	transform: translateX(42px);
}
.blog_next_prev_buttons .previous-post h3 .arrow{
	animation: rightArrowEnd2 .7s cubic-bezier(0,.2,.1,1) forwards;
	transform: translateX(38px) rotate(180deg);
}
.blog_next_prev_buttons .previous-post:hover h3 .arrow{
	animation: rightArrowStart2 .4s cubic-bezier(.05,.2,.1,1) forwards;
}

.blog_next_prev_buttons .previous-post h3 .line{
    transform: translateY(-50%) translateX(-28px) scaleX(0);
	animation: rightLineEnd2 .4s cubic-bezier(.05,.2,.1,1) forwards;
    transform-origin: left;
    left: -74px;
    right: auto;
}
.blog_next_prev_buttons .previous-post:hover h3 .line{
	transform: translateY(-50%) translateX(0) scaleX(1);
    transform-origin: right;
    animation: rightLineStart2 .4s cubic-bezier(.05,.2,.1,1) forwards;
}

.blog_next_prev_buttons .previous-post .arrow{
	left: -43px;
    right: auto;
	animation: rightArrowEnd2 .7s cubic-bezier(0,.2,.1,1) forwards;
	transform: translateX(38px) rotate(180deg);
}



@keyframes rightArrowStart {
    0% {
        transform: translateX(-50px)
    }

    100% {
        transform: translateX(42px)
    }
}

@keyframes rightArrowEnd {
    0% {
        transform: translateX(42px)
    }

    100% {
        transform: translateX(75px)
    }
}

@keyframes rightArrowStart2 {
    0% {
        transform: translateX(50px) rotate(180deg)
    }

    100% {
        transform: translateX(-42px) rotate(180deg)
    }
}

@keyframes rightArrowEnd2 {
    0% {
        transform: translateX(-42px) rotate(180deg)
    }

    100% {
        transform: translateX(-75px) rotate(180deg)
    }
}

@keyframes rightLineStart {
    0% {
        transform: translateY(-50%) translateX(-88px) scaleX(0)
    }

    100% {
        transform: translateY(-50%) translateX(0) scaleX(1)
    }
}

@keyframes rightLineEnd {
    0% {
        transform: translateY(-50%) translateX(0) scaleX(1)
    }

    100% {
        transform: translateY(-50%) translateX(28px) scaleX(0)
    }
}

@keyframes rightLineStart2 {
    0% {
        transform: translateY(-50%) translateX(88px) scaleX(0)
    }

    100% {
        transform: translateY(-50%) translateX(0) scaleX(1)
    }
}

@keyframes rightLineEnd2 {
    0% {
        transform: translateY(-50%) translateX(0) scaleX(1)
    }

    100% {
        transform: translateY(-50%) translateX(-28px) scaleX(0)
    }
}