/*
Theme Name: Manari
Version: 1.0
Description: A child theme of Hello Elementor
Template: hello-elementor
Author: Administrator
*/


@import url("../hello-elementor/style.css");
/* Your awesome customization starts here */


@keyframes manariBlink {
  0%   { transform: scale(1);    opacity: 1; }
  50%  { transform: scale(1.06); opacity: 0.45; }
  100% { transform: scale(1);    opacity: 1; }
}

@font-face {
    font-family: 'Amalfi Coast';
    src: url('/wp-content/themes/manari/fonts/Amalfi%20Coast.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@media (min-width: 0px){
	

	/* GLOBAL */
	/* Hs dentro de Text Editor */
	.elementor-widget-text-editor h1,
	.elementor-widget-text-editor h2,
	.elementor-widget-text-editor h3,
	.elementor-widget-text-editor h4,
	.elementor-widget-text-editor h5,
	.elementor-widget-text-editor h6 {
	font-family: "Gotham-XLight", Sans-serif;
	}
	
	/* Todo lo demás dentro del Text Editor */
	.elementor-widget-text-editor,
	.elementor-widget-text-editor p,
	.elementor-widget-text-editor span,
	.elementor-widget-text-editor a,
	.elementor-widget-text-editor li,
	.elementor-widget-text-editor strong,
	.elementor-widget-text-editor em,
	.elementor-widget-text-editor ul,
	.elementor-widget-text-editor ol,
	.elementor-widget-text-editor blockquote {
	font-family: "Acumin Variable Concept", Sans-serif;
	}
	
	span.amalfi{
    	font-family: 'Amalfi Coast', cursive;
		font-weight: 400;
	}
	/* GLOBAL */
	
	html.is-scroll-locked,
	body.is-scroll-locked{
	  overflow: hidden !important;
	  height: 100%;
	}
	
	/*HEADER*/
	/* Solo FRONTEND (no admin / no editor Elementor) */
	/* body */:not(.wp-admin):not(.elementor-editor-active) {
	  /*HEADER*/
	}

	body:not(.wp-admin):not(.elementor-editor-active) #header{
	  position: relative;
	  top: -40px;
	  transition: top .3s;
	}

	body:not(.wp-admin):not(.elementor-editor-active) #header.is-animating{
	  top: 0px;
	}

	body:not(.wp-admin):not(.elementor-editor-active)  #header .header-bottom{
	  height: calc(72px + 100vh);
	  transition: height .5s;
	}

	body:not(.wp-admin):not(.elementor-editor-active) #header.is-ready .header-bottom{
	  height: calc(72px + 0vh);
	}

	body:not(.wp-admin):not(.elementor-editor-active) #header .header-bottom > .e-con-inner{
	  position:relative;
	}

	body:not(.wp-admin):not(.elementor-editor-active) #header .header-bottom-left{
	  position: absolute;
	  width: 100%;
	  max-width: calc(50vw + 100px);
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	  transition: all .5s;
	          display: flex;
        flex-direction: column;
	}

	body:not(.wp-admin):not(.elementor-editor-active) #header.is-ready .header-bottom-left{
	  max-width: calc(0vw + 100px);
	  left: 0%;
	  top: 0%;
	  transform: translate(0%, 0%);
	}

	body:not(.home):not(.wp-admin):not(.elementor-editor-active) #header .header-bottom-left a img{
		opacity: 0;	
		width:0%;
	}

	body:not(.home):not(.wp-admin):not(.elementor-editor-active) #header.is-ready .header-bottom-left a img{
	  opacity: 1;
	  width:100%;
	}

	body:not(.wp-admin):not(.elementor-editor-active) #header.is-animating  .header-bottom-left{
	  position: relative;
	}

	/* Mientras NO esté is-ready => parpadea */
	body:not(.wp-admin):not(.elementor-editor-active) #header:not(.is-ready)  .header-bottom-left a{
	  transform-origin: center;
	  animation: manariBlink 1s ease-in-out infinite;
	}

	/* Cuando ya esté is-ready => se detiene y queda normal */
	body:not(.wp-admin):not(.elementor-editor-active) #header.is-ready .header-bottom-left a{
	  animation: none;
	  transform: scale(1);
	  opacity: 1;
	}

	body:not(.wp-admin):not(.elementor-editor-active)
	#header:not(.is-ready) .header-bottom-left a{
		display: flex;
		width: max-content;
		margin: auto;		
	}
	
	body.home:not(.wp-admin):not(.elementor-editor-active) .header-bottom-left .logo-icon{
		display: none;
	}
	body:not(.home):not(.wp-admin):not(.elementor-editor-active) .header-bottom-left .logo-icon{
		display: block;
		width:40px;
		aspect-ratio: 9/16;
		inset: 0;
		z-index: 2;
		pointer-events: none;
		animation: manariBlink 1s ease-in-out infinite;
		margin:auto;
		transition: all .5s;
	    filter: invert(1);
	}

	/* Cuando ya esté is-ready => se detiene y queda normal */
	body:not(.wp-admin):not(.elementor-editor-active) #header.is-ready .header-bottom-left .logo-icon{
	  	width:0px;	
	  	margin-right:0px;	
		display:none;
	}

	body:not(.wp-admin):not(.elementor-editor-active) #header .header-bottom-center nav,
	body:not(.wp-admin):not(.elementor-editor-active) #header .header-bottom-right > .e-con-inner{
	  position: relative;
	  top: -40px;
	  opacity: 0;
	  pointer-events: none;
	  transition: all .7s;
	}

	body:not(.wp-admin):not(.elementor-editor-active) #header.is-animating .header-bottom-center nav,
	body:not(.wp-admin):not(.elementor-editor-active) #header.is-animating .header-bottom-right > .e-con-inner{
	  top: 0px;
	  opacity: 1;
	  pointer-events: auto;
	}

	body:not(.wp-admin):not(.elementor-editor-active) #header .header-bottom-right{
	  width: max-content;
	}
	
	#header .header-bottom-right path{
	  fill:#fff;
	}
	#header .header-bottom-right #wishlist path{
		stroke:#fff;
		fill:transparent;
	}

	.elementor-menu-cart__main .elementor-menu-cart__footer-buttons{
	   display: flex;
       flex-direction: column;
	}
	
	/*HEADER*/

	p strong{
		display: inline !important;
	}
	


	/*home*/
	#hero-home .swiper-slide-inner{
		width: 100%;
		max-width: 1340px;
		margin: auto;
	}

	.masonry-grid {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(12, minmax(0, 1fr));
		gap: 0px;
		grid-auto-rows: 10px;
		aspect-ratio: 8 / 9;
	}

	.masonry-item{
		height: auto;
		display: block;
		width:100%;
	}

	.masonry-item-large,
	.masonry-item-small{
		grid-row: span 3;

	}

	.masonry-item > .elementor-widget-image{
		height: 100%;
		width: 100%;
	}

	.masonry-item img{
		width: 100%;
		height: 100%;
		object-fit:cover;
	}

	.masonry-item .botom-float{
		position: absolute;
		right: 20px;
		bottom: 20px;
	}
	
	#instagram-feed  .elementor-widget-image{
		width: calc(100% / 6);
	}
	#instagram-feed img{
		aspect-ratio: 9 / 16;
    	object-fit: cover;
	}
}
@media (min-width: 767px){

	body:not(.wp-admin):not(.elementor-editor-active) #header .header-bottom-left{
	  max-width: calc(50vw + 200px);	  
	}
	body:not(.wp-admin):not(.elementor-editor-active) #header.is-ready .header-bottom-left{
	  max-width: calc(0vw + 200px);
	}
	
	.masonry-grid {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(12, minmax(0, 1fr));
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0px;
		grid-auto-rows: 10px;
		aspect-ratio: 8 / 9;
	}

	.masonry-item-large{
		grid-row: span 7;	
	}

	.masonry-item-small{
		grid-row: span 5;

	}
}
@media (min-width: 1025px){
	body:not(.wp-admin):not(.elementor-editor-active) #header .header-bottom-left{
	  max-width: calc(50vw + 250px);	  
	}
	body:not(.wp-admin):not(.elementor-editor-active) #header.is-ready .header-bottom-left{
	  max-width: calc(0vw + 250px);
	}
}