/*
Theme Name: Softfocus
Theme URI:	https://softfocus.com.br/
Author: Rafael Forcadell
Version: 1.0
*/


/* 
Header
--------------------------------------------
*/


header.header { position: fixed; z-index: 9; top: 0; left: 50%; display: flex; align-items: center; justify-content: space-between; width: var(--limite); min-height: var(--altura-header); transform: translateX(-50%); pointer-events: none; }
header.header:before { position: absolute; top: var(--offset-corte); left: 50%; width: 100vw; height: var(--altura-corte); margin-left: -50vw; background-color: var(--cor-fundo); content: ""; clip-path: var(--corte); filter: brightness(0.95); transition: top 200ms ease-in-out; }
header.header.ocultar:before { top: calc(var(--altura-corte) * -1); transition-delay: 100ms; }
header.header.transparente:before { display: none; }

header.header a.logotipo { top: 0; padding: 12px 0; background-size: 0% 1px; background-image: linear-gradient(var(--cor-000), var(--cor-000)); pointer-events: all; transition-property: top, background-size; transition-duration: 100ms; transition-timing-function: ease-in-out; }
header.header a.logotipo:focus { background-size: 100% 1px; }
header.header.transparente a.logotipo img { filter: grayscale(1) brightness(2); }
header.header.transparente a.logotipo:hover img,
header.header.transparente a.logotipo:focus img {}
header.header.ocultar a.logotipo { top: calc(var(--altura-corte) * -1); transition-delay: 0ms; pointer-events: none; }

header.header nav { align-self: flex-start; display: flex; align-items: center; height: var(--altura-menu); }
header.header nav ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none;  color: var(--cor-400); transition: transform 300ms ease-in-out; }
header.header.alternar nav ul { transform: translateY(calc(var(--altura-menu) * -1)); }
header.header.min nav ul { display: none; }
header.header nav a { display: block; color: var(--cor-400); pointer-events: all; }
header.header.transparente nav a { color: var(--cor-000); }
header.header nav a:not(.botao):not(.abrir) { font-size: var(--fs-300); line-height: var(--espaco); background-position: 100% calc(50% + var(--fs-300)); margin-right: 1em; }
header.header nav a:not(.botao):not(.abrir):focus,
header.header nav a:not(.botao):not(.abrir):hover { background-position: 0 calc(50% + var(--fs-300));  }

header.header .abrir { width: var(--espaco); height: var(--espaco); margin-right: -20px; margin-left: calc(var(--espaco) * .25); cursor: pointer; pointer-events: all; }
/*header.header .abrir:before { position: absolute; z-index: -1; top: 50%; left: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%); border-radius: 100%; background-color: var(--cor-fundo-claro); content: ""; transition-property: width, height; transition-duration: 100ms; transition-timing-function: ease-in-out; }
header.header .abrir:hover:before,
header.header .abrir:focus:before { width: calc(var(--espaco) * 2); height: calc(var(--espaco) * 2); }*/
header.header .abrir:hover,
header.header .abrir:focus { background-size: 0; }
header.header .abrir div { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%); border-radius: 100%; background-color: var(--cor-900); content: ""; transition: background-color 100ms ease-in-out; pointer-events: none; }
header.header .abrir div:first-child { margin-top: -10px; }
header.header .abrir div:last-child { margin-top: 10px; }
header.header .abrir:hover div,
header.header .abrir:focus div { background-color: var(--cor-400); }
header.header.transparente .abrir div { background-color: var(--cor-000); }
header.header.transparente .abrir:hover div,
header.header.transparente .abrir:focus div { background-color: var(--cor-primaria-escura); }
header.header.alternar .abrir div { background-color: var(--cor-900); }
header.header.alternar .abrir:hover div,
header.header.alternar .abrir:focus div { background-color: var(--cor-400); }

header.header + nav { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 0; overflow: overlay; overflow-x: hidden; transition: height 300ms ease-in-out; }
header.header + nav:before { position: absolute; z-index: -3; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--cor-fundo-escuro); content: ""; }
header.header + nav:after { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--cor-primaria); opacity: .5; content: ""; }
header.header.extenso + nav { height: 100%; }
header.header + nav::-webkit-scrollbar { width: 30px; }
header.header + nav::-webkit-scrollbar-track { background: var(--cor-transparente); }
header.header + nav::-webkit-scrollbar-thumb { background-color: var(--cor-transparente); border-left: 1px solid var(--cor-100a); }
header.header + nav a.logotipo { position: absolute; z-index: 1; top: calc(var(--altura-header) * .5); left: 50%; margin-left: calc(var(--limite) * -.5); transform: translateY(-50%); padding: 10px 0; background-size: 0% 1px; background-image: linear-gradient(var(--cor-000), var(--cor-000)); transition: top, background-size 100ms ease-in-out; }
header.header + nav a.logotipo:focus { background-size: 100% 1px; }
header.header + nav a.logotipo img { filter: grayscale(1) brightness(2); }
header.header + nav ul { top: var(--altura-inicio); display: flex; flex-direction: column; align-items: flex-end; width: var(--limite); margin: 0 auto; padding: 0; padding-bottom: var(--altura-inicio); list-style: none; }
/*header.header + nav li { display: table; }*/
header.header + nav ul a { display: table; font-size: var(--fs-800); font-weight: var(--fw-medium); line-height: 1em; color: var(--cor-000); transition-property: color; }
header.header + nav ul a:hover,
header.header + nav ul a:focus { background-size: 0; }
header.header + nav ul a.palido { color: var(--cor-primaria-escura); }
header.header + nav video { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; object-position: center; }
header.header + nav .imagem { position: absolute; z-index: -2; top: 0; left: 0; width: 100%; height: 100%; display: block; background-size: cover; background-position: center; background-attachment: fixed; }
header.header + nav .fechar { position: absolute; z-index: 1; top: calc(var(--espaco) * -1); left: 50%; width: var(--espaco); height: var(--espaco); margin-left: calc((var(--limite) * .5) - (var(--espaco) * .6)); transform: translateY(-50%); transition: top 300ms ease-in-out; cursor: pointer; }
header.header + nav .fechar:hover,
header.header + nav .fechar:focus { background-size: 0; }
header.header.extenso + nav .fechar { top: calc(var(--altura-menu) * .5); transition-delay: 50ms; }
header.header + nav .fechar div { position: absolute; top: 50%; left: 50%; width: 20px; height: 4px; border-radius: 4px; transform: translate(-50%, -50%) rotate(45deg); background-color: var(--cor-fundo-claro); cursor: pointer; }
header.header + nav .fechar div:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
header.header + nav .fechar:hover div,
header.header + nav .fechar:focus div { background-color: var(--cor-primaria-escura); }


@media screen and (min-width: 1024px) and (max-width: 1280px) {

	header.header + nav ul { top: calc(50vh - (var(--fs-800) * 2)); padding-bottom: calc(var(--altura-inicio) * .5); }

}


@media screen and (min-width: 1024px) and (max-height: 750px) {

	header.header + nav ul { top: calc(50vh - (var(--fs-800) * 2)); padding-bottom: calc(var(--altura-inicio) * .5); }

}


@media screen and (min-width: 768px) and (max-width: 1279px) {

	header.header a.logotipo,
	header.header + nav a.logotipo { width: 110px; }

}


@media screen and (max-width: 767px) {

	header.header a.logotipo,
	header.header + nav a.logotipo { width: 85px; }

	header.header nav ul { display: none; }

	header.header .abrir div { width: 6px; height: 6px; }
	header.header .abrir div:first-child { margin-top: -9px; }
	header.header .abrir div:last-child { margin-top: 9px; }

	header.header + nav ul { top: 50vh; align-items: center; transform: translateY(-50%); padding: 0; }


}