@charset "utf-8";

/* ================================= =/
	ANIMAR TRANSFORMAR
/= ================================= */

.anipe-horizontal-direita {
	transition-timing-function: ease;
	transform: translateX(-50%)
}
.anipe-horizontal-esquerda {
	transition-timing-function: ease;
	transform: translateX(50%)
}
.anipe-diagonal-direita {
	transition-timing-function: ease;
	transform: translate(-50%,-50%)
}
.anipe-diagonal-esquerda {
	transition-timing-function: ease;
	transform: translate(50%,-50%)
}
.anipe-vertical-subir {
	transition-timing-function: ease;
	transform: translateY(50%)
}
.anipe-vertical-descer {
	transition-timing-function: ease;
	transform: translateY(-50%)
}
.anipe-crescer {
	transition-timing-function: ease-in-out;
	transform: scale(0.6,0.6)
}
.anipe-encolher {
	transition-timing-function: ease;
	transform: scale(1.8,1.8)
}
.anipe-abrir-horizontal {
	transition-timing-function: ease;
	transform: scale(0.1,1)
}
.anipe-abrir-vertical {
	transition-timing-function: ease;
	transform: scale(1,0.1)
}
.anipe-rodar-horario {
	transition-timing-function: ease-in-out;
	transform: rotate(-720deg)
}
.anipe-rodar-antihor {
	transition-timing-function: ease-in-out;
	transform: rotate(720deg)
}
.anipe-rodar-horario, .anipe-rodar-antihor {
	transition-property: transform, opacity;
	transition-duration: 2s;
	width: fit-content;
	opacity: 0.2
}
.anipe-iluminar, .anipe-aparecer {
	transition-timing-function: ease-in-out;
	transition-property: opacity;
	transition-duration: 2s
}
.anipe-iluminar
	{ opacity: 0.1 }
.anipe-aparecer
	{ opacity: 0 }

[class*="anipe-diagonal-"],	[class*="anipe-horizontal-"],
[class*="anipe-vertical-"],	[class*="anipe-abrir-"],
.anipe-crescer,				.anipe-encolher {
	transition-property: transform, opacity;
	transition-duration: 2s;
	opacity: 0
}
.ipe-animar .atraso-03
	{ transition-delay: 0.3s }
.ipe-animar .atraso-06
	{ transition-delay: 0.6s }
.ipe-animar .atraso-2s
	{ transition-delay: 2.0s }
.ipe-animar .atraso-4s
	{ transition-delay: 4.0s }
.ipe-animar .atraso-6s
	{ transition-delay: 6.0s }

.ipe-animar.ativo [class*="anipe-"],
[class*="anipe-"].ativo
	{ transform: none; opacity: 1 }

.ipe-animar:not(.overvis)
	{ overflow: hidden }

/* ================================= =/
	FILTROS E CLIP
/= ================================= */

.anipe-revelar {
	filter: hue-rotate(360deg); opacity: 0;
	transition-property: opacity, filter;
	transition-timing-function: ease;
	transition-duration: 2s
}
.anipe-hue-1080 {
	filter: hue-rotate(1080deg);
	transition-timing-function: ease;
	transition-property: filter;
	transition-duration: 4s;
}
.anipe-hue-360 {
	filter: hue-rotate(360deg);
	transition-timing-function: ease;
	transition-property: filter;
	transition-duration: 4s
}
.anipe-hue {
	filter: hue-rotate(260deg) /*saturate(400%)*/;
	transition-timing-function: ease;
	transition-property: filter;
	transition-duration: 4s
}
.anipe-sepia {
	filter: sepia(100%) hue-rotate(240deg);
	transition-timing-function: ease;
	transition-property: filter;
	transition-duration: 4s;
}
.ipe-animar.ativo .anipe-hue-1080,	.anipe-hue-1080.ativo,
.ipe-animar.ativo .anipe-hue-360,	.anipe-hue-360.ativo,
.ipe-animar.ativo .anipe-revelar,	.anipe-revelar.ativo,
.ipe-animar.ativo .anipe-sepia,		.anipe-sepia.ativo,
.ipe-animar.ativo .anipe-hue,		.anipe-hue.ativo
	{ filter: none }

.anipe-circulo {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	transition-duration: 2s;
	clip-path: circle(0% at 50% 50%)
}
.ipe-animar.ativo .anipe-circulo,
.anipe-circulo.ativo
	{ clip-path: circle(80% at 50% 50%) }

.anipe-lanterna-01 {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	transition-duration: 1.6s;
	clip-path: circle(10% at 110% 80%)
}
.ipe-animar.ativo:not(.pronto) .anipe-lanterna-01,
.anipe-lanterna-01.ativo:not(.pronto)
	{ clip-path: circle(16% at 20% 30%) }

.anipe-lanterna-02 {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	transition-duration: 1.6s;
	clip-path: circle(10% at -10% 80%)
}
.ipe-animar.ativo:not(.pronto) .anipe-lanterna-02,
.anipe-lanterna-02.ativo:not(.pronto)
	{ clip-path: circle(16% at 80% 30%) }

.anipe-lanterna-03 {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	transition-duration: 1.6s;
	clip-path: circle(10% at 50% -20%)
}
.ipe-animar.ativo:not(.pronto) .anipe-lanterna-03,
.anipe-lanterna-03.ativo:not(.pronto)
	{ clip-path: circle(16% at 50% 70%) }

.anipe-lanterna-04 {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	transition-duration: 1.6s;
	clip-path: circle(10% at 50% 120%)
}
.ipe-animar.ativo:not(.pronto) .anipe-lanterna-04,
.anipe-lanterna-04.ativo:not(.pronto)
	{ clip-path: circle(16% at 50% 30%) }

.anipe-lanterna-05 {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	transition-duration: 1.6s;
	clip-path: circle(10% at 110% 10%)
}
.ipe-animar.ativo:not(.pronto) .anipe-lanterna-05,
.anipe-lanterna-05.ativo:not(.pronto)
	{ clip-path: circle(16% at 20% 60%) }

.anipe-lanterna-06 {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	transition-duration: 1.6s;
	clip-path: circle(10% at -10% 10%)
}
.ipe-animar.ativo:not(.pronto) .anipe-lanterna-06,
.anipe-lanterna-06.ativo:not(.pronto)
	{ clip-path: circle(16% at 80% 60%) }

.ipe-animar.ativo.pronto [class*="anipe-lanterna"],
[class*="anipe-lanterna"].ativo.pronto {
	transition-timing-function: ease-in;
	clip-path: circle(80% at 50% 50%);
	transition-duration: 0.4s
}
.anipe-roda-cor {
	transition-property: transform, filter;
	transition-timing-function: ease-out;
	filter: hue-rotate(720deg);
	transform: rotate(-720deg);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-roda-cor,
.anipe-roda-cor.ativo
	{ filter: none; transform: none }

:root {
--colunas-01: polygon(
	000% 000%,020% 000%,020% 100%,040% 100%,040% 000%,060% 000%,060% 100%,080% 100%,
	080% 000%,100% 000%,100% 100%,100% 000%,080% 000%,080% 100%,060% 100%,
	060% 000%,040% 000%,040% 100%,020% 100%,020% 000%,000% 000%,000% 100%
);
--colunas-02: polygon(
	000% 000%,020% 000%,020% 000%,040% 000%,040% 000%,060% 000%,060% 000%,080% 000%,
	080% 000%,100% 000%,100% 100%,100% 100%,080% 100%,080% 100%,060% 100%,
	060% 100%,040% 100%,040% 100%,020% 100%,020% 100%,000% 100%,000% 100%
);
--colunas-03: polygon(
	000% 000%,000% 020%,100% 020%,100% 040%,000% 040%,000% 060%,100% 060%,100% 080%,
	000% 080%,000% 100%,100% 100%,000% 100%,000% 080%,100% 080%,100% 060%,
	000% 060%,000% 040%,100% 040%,100% 020%,000% 020%,000% 000%,100% 000%
);
--colunas-04: polygon(
	000% 000%,000% 020%,000% 020%,000% 040%,000% 040%,000% 060%,000% 060%,000% 080%,
	000% 080%,000% 100%,100% 100%,100% 100%,100% 080%,100% 080%,100% 060%,
	100% 060%,100% 040%,100% 040%,100% 020%,100% 020%,100% 000%,100% 000%
);
--estrela-41: polygon(050% 050%,050% 025%,050% 050%,075% 050%,050% 050%,050% 075%,050% 050%,025% 050%);
--estrela-42: polygon(000% 000%,050% 000%,100% 000%,100% 050%,100% 100%,050% 100%,000% 100%,000% 050%);

--estrela-61: polygon(
	020% 030%,050% 050%,050% 010%,050% 050%,080% 030%,050% 050%,
	080% 070%,050% 050%,050% 090%,050% 050%,020% 070%,050% 050%
);
--estrela-62: polygon(
	000% 000%,025% 000%,050% 000%,075% 000%,100% 000%,100% 050%,
	100% 100%,075% 100%,050% 100%,025% 100%,000% 100%,000% 050%
);
--persianas-01: polygon(
	010% 000%,010% 000%,010% 100%,030% 100%,030% 000%,030% 000%,030% 100%,050% 100%,050% 000%,050% 000%,
	050% 100%,070% 100%,070% 000%,070% 000%,070% 100%,090% 100%,090% 000%,090% 000%,090% 100%,010% 100%
);
--persianas-02: polygon(
	000% 000%,020% 000%,020% 100%,020% 100%,020% 000%,040% 000%,040% 100%,040% 100%,040% 000%,060% 000%,
	060% 100%,060% 100%,060% 000%,080% 000%,080% 100%,080% 100%,080% 000%,100% 000%,100% 100%,000% 100%
);
--persianas-03: polygon(
	000% 010%,000% 010%,100% 010%,100% 030%,000% 030%,000% 030%,100% 030%,100% 050%,000% 050%,000% 050%,
	100% 050%,100% 070%,000% 070%,000% 070%,100% 070%,100% 090%,000% 090%,000% 090%,100% 090%,100% 010%
);
--persianas-04: polygon(
	000% 000%,000% 020%,100% 020%,100% 020%,000% 020%,000% 040%,100% 040%,100% 040%,000% 040%,000% 060%,
	100% 060%,100% 060%,000% 060%,000% 080%,100% 080%,100% 080%,000% 080%,000% 100%,100% 100%,100% 000%
);
--janela-01: polygon(000% 000%,100% 000%,050% 000%,050% 100%,100% 100%,000% 100%,050% 100%,050% 000%);
--janela-02: polygon(000% 000%,100% 000%,100% 020%,100% 080%,100% 100%,000% 100%,000% 080%,000% 020%);

--garagem-01: polygon(000% 100%,100% 100%,100% 000%,100% 100%,000% 100%,000% 000%);
--garagem-02: polygon(020% 000%,080% 000%,100% 000%,100% 100%,000% 100%,000% 000%);

--porta-11: polygon(000% 000%,100% 000%,100% 100%,000% 100%,100% 100%,100% 000%);
--porta-12: polygon(000% 000%,100% 000%,100% 100%,000% 100%,000% 080%,000% 020%);

--porta-21: polygon(000% 000%,100% 000%,000% 000%,000% 100%,100% 100%,000% 100%);
--porta-22: polygon(000% 000%,100% 000%,100% 020%,100% 080%,100% 100%,000% 100%);

--iris-41: polygon(
	100% 000%,100% 000%,050% 050%,100% 100%,100% 100%,050% 050%,
	000% 100%,000% 100%,050% 050%,000% 000%,000% 000%,050% 050%
);
--iris-42: polygon(
	000% 000%,100% 000%,100% 000%,100% 000%,100% 100%,100% 100%,
	100% 100%,000% 100%,000% 100%,000% 100%,000% 000%,000% 000%
);
--iris-06: polygon(
	000% 084%,050% 050%,000% 016%,050% 050%,050% 000%,050% 050%,
	100% 016%,050% 050%,100% 084%,050% 050%,050% 100%,050% 050%
);
--inclinado-11: polygon(000% 000%,100% 000%,000% 000%,100% 100%,100% 100%,000% 100%,100% 100%,000% 000%);
--inclinado-12: polygon(000% 000%,100% 000%,100% 000%,100% 000%,100% 100%,000% 100%,000% 100%,000% 100%);

--inclinado-21: polygon(000% 000%,100% 000%,100% 000%,000% 100%,100% 100%,000% 100%,000% 100%,100% 000%);
--inclinado-22: polygon(000% 000%,100% 000%,100% 100%,100% 100%,100% 100%,000% 100%,000% 000%,000% 000%);

--abertura-01: polygon(000% 050%,100% 050%,100% 000%,100% 100%,100% 050%,000% 050%,000% 100%,000% 000%);
--abertura-02: polygon(000% 000%,100% 000%,100% 000%,100% 100%,100% 100%,000% 100%,000% 100%,000% 000%);

--cortina-01: polygon(000% 000%,100% 000%,050% 000%,050% 100%,100% 100%,000% 100%,050% 100%,050% 000%);
--cortina-02: polygon(000% 000%,100% 000%,100% 000%,100% 100%,100% 100%,000% 100%,000% 100%,000% 000%);
}
.anipe-persianas-5v {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--persianas-01);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-persianas-5v,
.anipe-persianas-5v.ativo
	{ clip-path: var(--persianas-02) }

.anipe-persianas-5h {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--persianas-03);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-persianas-5h,
.anipe-persianas-5h.ativo
	{ clip-path: var(--persianas-04) }

.anipe-colunas-5v {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--colunas-01);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-colunas-5v,
.anipe-colunas-5v.ativo
	{ clip-path: var(--colunas-02) }

.anipe-colunas-5h {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--colunas-03);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-colunas-5h,
.anipe-colunas-5h.ativo
	{ clip-path: var(--colunas-04) }

.anipe-inclinado-01 {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--inclinado-11);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-inclinado-01,
.anipe-inclinado-01.ativo
	{ clip-path: var(--inclinado-12) }

.anipe-inclinado-02 {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--inclinado-21);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-inclinado-02,
.anipe-inclinado-02.ativo
	{ clip-path: var(--inclinado-22) }

.anipe-abertura {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--abertura-01);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-abertura,
.anipe-abertura.ativo
	{ clip-path: var(--abertura-02) }

.anipe-cortina {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--cortina-01);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-cortina,
.anipe-cortina.ativo
	{ clip-path: var(--cortina-02) }

.anipe-estrela-04 {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--estrela-41);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-estrela-04,
.anipe-estrela-04.ativo
	{ clip-path: var(--estrela-42) }

.anipe-estrela-06 {
	transition-timing-function: linear;
	transition-property: clip-path;
	clip-path: var(--estrela-61);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-estrela-06,
.anipe-estrela-06.ativo
	{ clip-path: var(--estrela-62) }

.anipe-janela {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--janela-01);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-janela,
.anipe-janela.ativo
	{ clip-path: var(--janela-02) }

[class*="anipe-fundo-janela"]
	{ position: relative; width: 100% }

[class*="anipe-fundo-janela"]::before
	{ bottom: 0%; left:0 }

[class*="anipe-fundo-janela"]::after {
	background-position: 100% center;
	right: 0%; top: 0%
}
[class*="anipe-fundo-janela"]::before,
[class*="anipe-fundo-janela"]::after {
	background-repeat: no-repeat;
	background-size: 200% 100%;
	position: absolute;
	height: 100%;
	content: "";
	z-index: -1;
	width: 50%;
	transition-timing-function: ease-out;
	transition-property: width;
	transition-delay: inherit;
	transition-duration: 2s;
}
.ipe-animar.ativo [class*="anipe-fundo-janela"]::before,
.ipe-animar.ativo [class*="anipe-fundo-janela"]::after
	{ width: 0% }

.anipe-garagem {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--garagem-01);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-garagem,
.anipe-garagem.ativo
	{ clip-path: var(--garagem-02) }

[class*="anipe-fundo-garagem"]
	{ position: relative }

[class*="anipe-fundo-garagem"]::after {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: absolute;
	height: 100%;
	width: 100%;
	content: "";
	z-index: -1;
	bottom: 0%;
	right: 0%;
	top: 0;
	transition-timing-function: ease-out;
	transition-property: height;
	transition-delay: inherit;
	transition-duration: 2s
}
.ipe-animar.ativo [class*="anipe-fundo-garagem"]::after
	{ height: 0 }

.anipe-porta-01 {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--porta-11);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-porta-01,
.anipe-porta-01.ativo
	{ clip-path: var(--porta-12) }

.anipe-porta-02 {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--porta-21);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-porta-02,
.anipe-porta-02.ativo
	{ clip-path: var(--porta-22) }

[class*="anipe-fundo-porta"]
	{ position: relative }

[class*="anipe-fundo-porta"]::after {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: absolute;
	height: 100%;
	width: 100%;
	content: "";
	z-index: -1;
	top: 0;
	transition-timing-function: ease-out;
	transition-property: width;
	transition-delay: inherit;
	transition-duration: 2s
}
[class*="anipe-fundo-porta-01"]::after
	{ left: 0 }
[class*="anipe-fundo-porta-02"]::after
	{ right: 0 }

.ipe-animar.ativo [class*="anipe-fundo-porta"]::after
	{ width: 0 }

.anipe-iris-04 {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--iris-41);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-iris-04,
.anipe-iris-04.ativo
	{ clip-path: var(--iris-42) }

.anipe-iris-06 {
	transition-timing-function: ease-out;
	transition-property: clip-path;
	clip-path: var(--iris-06);
	transition-duration: 2s
}
.ipe-animar.ativo .anipe-iris-06,
.anipe-iris-06.ativo
	{ clip-path: var(--estrela-62) }

/* ================================= =/
	GIRAR
/= ================================= */

.ipe-animar.wp-block-columns, .ipe-girar-mouse
  { background-color: transparent; perspective: 2000px }

.ipe-girar-mouse:hover [class*="anipe-girar"]
	{ transform: none }

.ipe-frente
	{ position: relative; margin: 0 }
.ipe-verso
	{ position: absolute; margin: 0; right: 0; top: 0 }
.ipe-verso:not([class*="bordada-"])
	{ width: 100% }

.ipe-sepia-01
	{ position: absolute }
.ipe-sepia-01 img
	{ filter: invert(100%) sepia(100%) hue-rotate(240deg) }

[class*="anipe-girar"] {
	transform-style: preserve-3d;
	backface-visibility: hidden;
	transition: transform 0.8s;
	position: relative
}
.anipe-girar-horizontal
	{ transform: rotateX(180deg) }
.anipe-girar_horizontal
	{ transform: rotateX(-180deg) }

.anipe-girar-vertical
	{ transform: rotateY(180deg) }
.anipe-girar_vertical
	{ transform: rotateY(-180deg) }

.anipe-girar_horizontal [class*="ipe-verso"],
.anipe-girar-horizontal [class*="ipe-verso"]
	{ backface-visibility: hidden; transform: rotateX(180deg); bottom: 0 }

.anipe-girar_vertical [class*="ipe-verso"],
.anipe-girar-vertical [class*="ipe-verso"]
	{ backface-visibility: hidden; transform: rotateY(180deg) }

.ipe-nao-girar
	{ position: relative }

.ipe-frente-80 figcaption, .ipe-verso-80 figcaption,
.ipe-frente figcaption, .ipe-verso figcaption
	{ position: absolute; right: 2em; bottom: 0 }

/* ================================= =/
	PARALAXE
/= ================================= */
.ipe-paralaxe {
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	min-height: 68vh; 
}