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


/* 
Sobre a Softfocus
--------------------------------------------
*/


section.sobre-a-softfocus { display: flex; padding: 435px 0 360px; background-color: #4bd3d2; background-position: top center; clip-path:  polygon(0 0, 100% var(--altura-corte), 100% 100%, 0 calc(100% - var(--altura-corte))); }

section.sobre-a-softfocus .foguete { display: flex; align-items: flex-start; justify-content: flex-end; width: calc(50% - (var(--espaco) * 1.5)); }
section.sobre-a-softfocus .foguete img { left: 150px; max-width: none; }
section.sobre-a-softfocus .foguete img + .lazy-carregando { width: 500px; height: 460px; }
section.sobre-a-softfocus .foguete img + .lazy-carregando:before { opacity: .8; filter: invert(1); }
section.sobre-a-softfocus .anos { position: absolute; z-index: 2; top: 130px; right: 290px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 90px; height: 90px; border-radius: 100%; padding-bottom: 4px; background-color: var(--cor-primaria); font-size: 14px; line-height: 1em; font-weight: var(--fw-light); text-transform: uppercase; color: var(--cor-000); }
section.sobre-a-softfocus .anos strong { width: 100%; font-size: 2.8em; line-height: 1em; text-align: center; }
section.sobre-a-softfocus .foco { position: absolute; z-index: 1; top: 155px; right: 175px; width: 150px; height: 150px; border-radius: 100%; border: 7px solid var(--cor-000); }
section.sobre-a-softfocus .foco:before { position: absolute; top: -35px; left: calc(100% + 50px); width: 65px; height: 1px; background-color: var(--cor-000); content: ""; }
section.sobre-a-softfocus .foco:after { position: absolute; top: -35px; left: calc(100% + 50px); width: 85px; height: 1px; transform: rotate(135deg); transform-origin: top left; background-color: var(--cor-000); content: ""; }

section.sobre-a-softfocus .somos-um-foguete { width: calc(50% + (var(--espaco) * 1.5)); }
section.sobre-a-softfocus h2 { font-size: var(--fs-800); font-weight: var(--fw-thin); line-height: 1em; }
section.sobre-a-softfocus h4 { font-size: var(--fs-750); margin: .7em 0; }
section.sobre-a-softfocus p { width: 420px; font-size: var(--fs-300); }
section.sobre-a-softfocus a.botao { margin-top: 1.5em; }


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

	section.sobre-a-softfocus .foco:before { top: -45px; }
	section.sobre-a-softfocus .foco:after { top: -45px; width: 95px; }

}


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

	section.sobre-a-softfocus { padding: 300px 0 250px; background-position: 50% -100px; }

	section.sobre-a-softfocus .foguete img { left: 180px; }
	section.sobre-a-softfocus .anos { right: 260px; }
	section.sobre-a-softfocus .foco { right: 145px; }
	section.sobre-a-softfocus .foco:before { top: -56px; left: calc(100% + 60px); width: 45px; }
	section.sobre-a-softfocus .foco:after { top: -55px; left: calc(100% + 60px); width: 110px; }

}


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

	section.sobre-a-softfocus { flex-direction: column; padding: 150px 0 250px; background-size: 800px; background-position: top left; background-repeat: no-repeat; }

	section.sobre-a-softfocus .foguete { width: auto; justify-content: center; }
	section.sobre-a-softfocus .foguete img { left: auto; width: auto; height: 412px; }
	section.sobre-a-softfocus .foguete img + .lazy-carregando { width: 100%; height: 342px; margin-bottom: 70px; }
	section.sobre-a-softfocus .anos { top: 70px; right: 50%; margin-right: 30px; }
	section.sobre-a-softfocus .foco { top: 95px; right: 50%; margin-right: -75px; }
	section.sobre-a-softfocus .foco:before,
	section.sobre-a-softfocus .foco:after { display: none; }

	section.sobre-a-softfocus .somos-um-foguete { width: auto; padding: 0 var(--espaco); text-align: center; }
	section.sobre-a-softfocus h2 { --fs-800: 28px; }
	section.sobre-a-softfocus h4 { --fs-750: 26px; }
	section.sobre-a-softfocus p { width: auto; }
	section.sobre-a-softfocus a.botao { margin: 0 auto; }

}