.zoom-in-out-box {
  margin: 24px;
  width: 50px;
  height: 50px;
  background: #f50057;
  animation: zoom-in-zoom-out 3s ease infinite;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}


.fade7 {  
  animation: fade7 3s ease infinite;
}

@keyframes fade7 {
  0% {opacity: 0.5};
  
  50% 
    {opacity: 1} ;
  
  100% 
    {opacity: 0} ;
  
}


.pisca {
  
  animation: blink 1.5s ease infinite;
}

@keyframes blink{

  from{
    text-shadow: 0 0 3px #ffffff0c; 
  }
  to{
    text-shadow: 0 0 5px #ffffff9d;
}
}


.zoom{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  animation: zoom 3s ease;

}

@keyframes zoom {
  from{
      font-size: 1px;
  }
  to{
      font-size: 40px;
  }
}

.animadesc{
  animation: desc 2s;
}

@keyframes desc {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(0);
  }
} 

.animadir{
  animation: dir 2s;
}

@keyframes dir {
  from {
    transform: translateX(-100px);
  }
  to {
    transform: translateX(0);
  }
} 





.animaesq{
  animation: esq 2s;
}

@keyframes esq {
  from {
    transform: translateX(300px);
  }
  to {
    transform: translateX(0);
  }
} 

.animadir2{
  animation: dir2 2s;
  animation: blink 1.5s ease infinite;
}

@keyframes dir2 {
  from {
    transform: translateX(-300px);
   
  }
  to {
    transform: translateX(0);
   
  }
} 

@keyframes blink{

  from{
    text-shadow: 0 0 3px #ffffff0c; 
  }
  to{
    text-shadow: 0 0 12px #ffffff;
}
}


.fade5 {
animation-duration: 10s;
animation-name: fadein;
}


@keyframes fadein {
from {opacity: 0}
to {opacity: 1}
}


.fade6{
 
  animation: blink1 2s infinite;
  
}


@keyframes blink1 {
  
  0% {text-shadow: 0 0 5px #ffffff00;}     
  
  100% 
    {text-shadow: 0 0 5px #ffffff;} 
  
}
  

  @keyframes brilho {
    from {text-shadow: 0 0 5px rgba(255, 255, 255, 0)}
    to {text-shadow: 0 0 5px rgb(255, 255, 255)}
    }

/* por demanda */



.aparece {
  animation: fadeIn ease 3s;
  -webkit-animation: fadeIn ease 3s;
  -moz-animation: fadeIn ease 3s;
  -o-animation: fadeIn ease 3s;
  -ms-animation: fadeIn ease 3s;
}
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
  
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
}
}

.some {
  transition-delay: 4s;
  animation: fadeOut ease 4s;
  -webkit-animation: fadeOut ease 4s;
  -moz-animation: fadeOut ease 4s;
  -o-animation: fadeOut ease 4s;
  -ms-animation: fadeOut ease 4s;
}
@keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-ms-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
}
}

.home-intro {
  width: 100%;
  margin-top: 500px;
  position: absolute;
  color: white;
  text-align: center;
}

.nav-scrolled {
--text: #333;
--text-inverse: #f4f4f4;
--background: #f4f4f4;
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
}

.fade-in {
opacity: 0;
transition: opacity 250ms ease-in;
}

.fade-in.appear {
opacity: 1;
}

.more-stuff-grid {
  background: #f4f4f4;
  padding: 4em 0;
  display: grid;
  grid-gap: 2em;
  align-items: center;
  grid-template-columns: minmax(1em, 1fr) repeat(2, minmax(200px, 400px)) minmax(
      1em,
      1fr
    );
}


.nav__link {
--spacing: 1em;
text-decoration: none;
color: inherit;
display: inline-block;
padding: calc(var(--spacing) / 2) var(--spacing);
position: relative;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.9rem;
}

.nav__link:after {
content: "";
position: absolute;
bottom: 0;
left: var(--spacing);
right: var(--spacing);
height: 2px;
background: currentColor;
-webkit-transform: scaleX(0);
transform: scaleX(0);
transition: -webkit-transform 150ms ease-in-out;
transition: transform 150ms ease-in-out;
transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
}

.nav__link:hover::after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

.nav__link--btn {
border: 1.5px solid currentColor;
border-radius: 2em;
margin-left: 1em;
transition: background 250ms ease-in-out;
letter-spacing: 1px;
padding: 0.75em 1.5em;
}

.nav__link--btn:hover {
background: var(--text);
color: var(--text-inverse);
border-color: var(--text);
}

.nav__link--btn::after {
display: none;
}

.nav__link--btn--highlight {
background: limegreen;
border-color: limegreen;
color: #333;
}

.nav__link--btn--highlight:hover {
background: var(--text);
border-color: var(--text);
}

.nav-scrolled {
--text: #333;
--text-inverse: #f4f4f4;
--background: #f4f4f4;

}


/* fim por demanda */