@media(max-width: 1440px){
   #intro .btn{
      font-size: 1em;
      width: 200px;
      height: 50px;
   }

   #intro img{
      width: 60%;
   }

   #morrinho #intro-citacao .texto p{
      font-size: 1.5em;
      padding-right: 30px;
   }
}

@media(max-width: 1024px) {
   #morrinho #historia {
      height: 100%;
   }
   #morrinho #historia .texto{
      padding-left: 30px;
   }

   #morrinho #morrinho-hoje .texto{
      padding-right: 30px;
   }
}

@media(max-width: 768px){
   #morrinho #historia,
   #morrinho #morrinho-hoje,
   #morrinho #intro-citacao{
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 80px 50px;
   }

   #morrinho #intro-citacao .texto p{
      padding-right: 0;
      padding-bottom: 30px;
   }

   #morrinho #historia .texto,
   #morrinho #morrinho-hoje .texto{
      padding-left: 0;
      padding-right: 0;
   }


   #morrinho img{
      width: 50%;
      padding: 30px
   }

   #morrinho #morrinho-hoje{
      flex-direction: column-reverse;
   }

   #morrinho #morrinho-hoje img{
      padding-top: 20px;
   }
}





@media(max-width:600px){
   #intro .img-bg{
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
   }

   #intro .img-bg img{
      width: 80%;
      margin-bottom: 40px;
   }

   #intro .img-bg a.btn{background-color: rgba(0, 0, 0, .2);}

   h4{
      margin: 0;
   }

   #intro .img-bg{
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-evenly;
   }

   #intro .img-bg #slogan{
      width: 60%;

      order: 2;
   }
}