/*
Theme Name: Residence La Perla
Theme URI: 
Author: Marcello Valia
Author URI: 
Template: twentytwentythree
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
a {
	 transition: .3s;
} 
a:hover {
	 text-decoration: none;
}  
/* IMG CAPTION STYLE */
.wp-block-image figcaption {
    background: #E8E8E8;
    color: #000;
    padding: 10px;
    position: absolute;
	top: 50%;
    width: 100%;
    opacity:1;
	z-index: 999;
}
figure.aligncenter {
    position: relative;
}
figure.aligncenter:hover figcaption{
}
/* IMG HOVER EFFECT */
/*Zoom In*/
.zoomIn img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.zoomIn:hover img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
/*Zoom Out*/
.zoomOut img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.zoomOut:hover img {
	-webkit-transform: scale(1);
	transform: scale(1);
}

/* NAV LINK HOVER */
.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
	color: var(--wp--preset--color--accent) !important
}

/* LIST COLOR .block-editor-block-list__layout .block-editor-block-list__block*/
ul li::before {
	color: var(--wp--preset--color--accent) !important
}
/* IMAGE OVERLAP */
/*Set Row block for container */
/* translate declaration for item */

/* OUTLINE TEXT */
.outline-text {
	-webkit-text-stroke: 1px var(--wp--preset--color--medium-gray);
    -webkit-text-fill-color: transparent;
    word-wrap: break-word;
}

/* LOTTIE ANIMATIONS */
.background-lottie {
	width: inherit;
	height: 100%;
	z-index: -1000;
	position: absolute;
}
.container-lottie {
   display: inline-block;
   position: relative;
}

/* FLEX */
.flex-display-horizontal {
	display: flex;
	flex-direction: row;
	align-items: center;
    justify-content: center;
    z-index: 0;
}
.translate-left-10 {
    transform: translate(-10%, 0);
    z-index:2;
}
.translate-right-10 {
    transform: translate(10%, 0);
    z-index:2;
}
.translate-left-20 {
    transform: translate(-20%, 0);
    z-index:2;
}
.translate-right-20 {
    transform: translate(20%, 0);
    z-index:2;
}
.flex-display-vertical {
	display: flex;
	flex-direction: column;
    z-index: 0;
}
/* OUTLINE BUTTON */
.wp-block-button .wp-block-button__link.is-style-outline:hover, .wp-block-button.is-style-outline>.wp-block-button__link:hover {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	transition: .3s;
}
/* ANIMATED BUTTON */
.animated-button,
.comment-form .form-submit button,
.comment-form .form-submit .edit-link .post-edit-link,
.edit-link .comment-form .form-submit .post-edit-link {
    position: relative;
    background: 0 0;
    color: inherit;
    margin-left: 25px;
    padding-left: 2.5em;
    transition: padding-left .3s
}
.animated-button:hover,
.comment-form .form-submit button:hover,
.comment-form .form-submit .edit-link .post-edit-link:hover,
.edit-link .comment-form .form-submit .post-edit-link:hover {
    color: var(--wp--preset--color--accent);
	padding-left: 3em
}

.animated-button:active,
.comment-form .form-submit button:active,
.comment-form .form-submit .edit-link .post-edit-link:active,
.edit-link .comment-form .form-submit .post-edit-link:active {
    outline: none
}

.animated-button:focus,
.comment-form .form-submit button:focus,
.comment-form .form-submit .edit-link .post-edit-link:focus,
.edit-link .comment-form .form-submit .post-edit-link:focus {
    outline: none;
    padding-left: 3em
}

.animated-button:focus:after,
.comment-form .form-submit button:focus:after,
.comment-form .form-submit .edit-link .post-edit-link:focus:after,
.edit-link .comment-form .form-submit .post-edit-link:focus:after,
.animated-button:focus:before,
.comment-form .form-submit button:focus:before,
.comment-form .form-submit .edit-link .post-edit-link:focus:before,
.edit-link .comment-form .form-submit .post-edit-link:focus:before,
.animated-button:hover:after,
.comment-form .form-submit button:hover:after,
.comment-form .form-submit .edit-link .post-edit-link:hover:after,
.edit-link .comment-form .form-submit .post-edit-link:hover:after,
.animated-button:hover:before,
.comment-form .form-submit button:hover:before,
.comment-form .form-submit .edit-link .post-edit-link:hover:before,
.edit-link .comment-form .form-submit .post-edit-link:hover:before {
	background: var(--wp--preset--color--accent);
    transform: rotate(-45deg) scale(1.2)
}

.animated-button:focus svg,
.comment-form .form-submit button:focus svg,
.comment-form .form-submit .edit-link .post-edit-link:focus svg,
.edit-link .comment-form .form-submit .post-edit-link:focus svg,
.animated-button:hover svg,
.comment-form .form-submit button:hover svg,
.comment-form .form-submit .edit-link .post-edit-link:hover svg,
.edit-link .comment-form .form-submit .post-edit-link:hover svg {
    fill: var(--wp--preset--color--white);
    transform: translateX(5px)
}

.animated-button:focus svg rect,
.comment-form .form-submit button:focus svg rect,
.comment-form .form-submit .edit-link .post-edit-link:focus svg rect,
.edit-link .comment-form .form-submit .post-edit-link:focus svg rect,
.animated-button:hover svg rect,
.comment-form .form-submit button:hover svg rect,
.comment-form .form-submit .edit-link .post-edit-link:hover svg rect,
.edit-link .comment-form .form-submit .post-edit-link:hover svg rect {
    transform: scaleX(.5)
}

.animated-button:after,
.comment-form .form-submit button:after,
.comment-form .form-submit .edit-link .post-edit-link:after,
.edit-link .comment-form .form-submit .post-edit-link:after,
.animated-button:before,
.comment-form .form-submit button:before,
.comment-form .form-submit .edit-link .post-edit-link:before,
.edit-link .comment-form .form-submit .post-edit-link:before {
    left: 0;
    top: 8px;
    width: 38px;
    height: 38px;
    position: absolute;
    transform: rotate(45deg);
    transition: .3s;
	content: ''
}

.animated-button:before,
.comment-form .form-submit button:before,
.comment-form .form-submit .edit-link .post-edit-link:before,
.edit-link .comment-form .form-submit .post-edit-link:before {
    border: 2px solid var(--wp--preset--color--accent);
}

.animated-button:after,
.comment-form .form-submit button:after,
.comment-form .form-submit .edit-link .post-edit-link:after,
.edit-link .comment-form .form-submit .post-edit-link:after {
    background: var(--wp--preset--color--accent);
    transform: scale(.01) rotate(45deg)
}

.animated-button svg,
.comment-form .form-submit button svg,
.comment-form .form-submit .edit-link .post-edit-link svg,
.edit-link .comment-form .form-submit .post-edit-link svg {
    fill: var(--wp--preset--color--accent);
    top: 21px;
    left: -25px;
    width: 50px;
    height: 12px;
    z-index: 1;
    position: absolute;
    transition: .3s;
}

.animated-button svg rect,
.comment-form .form-submit button svg rect,
.comment-form .form-submit .edit-link .post-edit-link svg rect,
.edit-link .comment-form .form-submit .post-edit-link svg rect {
    will-change: transform;
    transform-origin: right center;
    transition: transform .3s
}


/* FLIPBOX */

.flipbox{	
  		height: 400px;
  		perspective: 1000px;
  		cursor: pointer;
	}

.flipbox_inner{
  		position: relative;
  		width: 100%;
  		height: 100%;
  		transition: transform 0.8s;
  		transform-style: preserve-3d;
	}

.front, .back{
 	  	position: absolute;
  		width: 100%;
  		height: 100%;
  		backface-visibility: hidden;
  		display: flex;
  		flex-direction: column;
  		padding: 15px;
	}

.front{
  		background-repeat: no-repeat;
  		background-position: center;
  		background-size: cover !important;
  		justify-content: flex-end;
	}

.back{
  		background-color: #2d4059;
  		align-items: center;
  		justify-content: center;
  		text-align: center;
	}

.left:hover .flipbox_inner{
 		 transform: rotateY(180deg);
	}

.right:hover .flipbox_inner{
		 transform: rotateY(-180deg);
	}

.up:hover .flipbox_inner{
 		 transform: rotateX(180deg);
	}

.down:hover .flipbox_inner{
  		transform: rotateX(-180deg);
	}

.left .flipbox_inner .back, .right .flipbox_inner .back{
  		transform: rotateY(180deg);
	}

.up .flipbox_inner .back, .down .flipbox_inner .back{
  		transform: rotateX(180deg);
	}

.wp-block-cover:first-child(){
		justify-content: end !important;
    	align-items: baseline !important;
	}

/* MEDIA QUERY */
@media only screen and (max-width: 600px) {

@media only screen and (max-width: 780px) {
	.wp-block-media-text.is-style-tw-overlap.has-media-on-the-right .wp-block-media-text__content {
		margin-right: 0px;
		margin-left: 0px
	}
	.wp-block-media-text .wp-block-media-text__content {
		padding: 0px
	}
	footer p {
		text-align: center
	}
	.flipbox{	
  		height: 300px;
	}
}
@media only screen and (min-width: 600px) and (max-width: 980px) {
 
}