main {
   margin: 0 25% 80px 25%;
   border: 3px solid #8c462f;
   background-color: rgba(255, 255, 255, 0.548);
   padding: 42px 32px 40px 32px;
}
main section h2 {
   font-family: "Fredericka the Great", serif; 
   font-size: 45px;
   color: #8c462f;
   font-weight: 500;
}
main section p {
   font-size: 16px;
   color:#8c462fbb;
   padding-bottom: 30px;
}
.text-colabore {
   line-height: 27px;
}
.container {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}
.cards {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
.card, .clique {
   width: 200px;
   height: 200px;
   border: 2px solid #8c462fbb;
   padding: 9px 25px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background-color: rgba(255, 255, 255, 0.548);
   border-radius: 20px;
   margin-bottom: 10px;
}
.cards div h3, .cards div p, .clique h3, .link a {
   font-family: "Fredericka the Great", serif;
}
.cards div h3 {
   display: flex;
   justify-content: space-around;
   color:#A9B709;
   font-weight: 500;
   font-size: 30px;
   margin-bottom: 15px;
}
.cards div p {
   color: #645844;
   font-size: 20px;
   text-align: center;
}
.cliques {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
.clique {
   position: relative;
}
.clique h3 {
   color: #018a3d;
   font-size: 30px;
   font-weight: 600;
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
}
#c1 {
   margin-top: 21px;
}
#c2 {
   margin-top: 40px;
}
#c3 {
   margin-top: 59px;
}
.link {
   width: 100%;
   height: 50px;
   background-color: #018a3d;
   position: absolute;
   bottom: 0;
   left: 0;
   border-bottom-left-radius: 18px;
   border-bottom-right-radius: 18px;
   transition-duration: .5s;
}
.link:hover {
   background-color: #005c28;
}
.link a {
   text-decoration: none;
   color: white;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   transition-duration: 500ms;
   border-bottom-left-radius: 18px;
   border-bottom-right-radius: 18px;
   cursor: pointer;
}

/* PopUp de doações */
#popup-doacao {
   display: none;
   position: fixed;
   width: 100vw;
   height: 100vh;
   background-color: rgba(31, 31, 31, 0.863);
   z-index: 1;
   color: #8C472F;
   transition-duration: .5s;
   animation: openPopup .5s;
   overflow: auto;
}
@keyframes openPopup {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}
#popup-doacao > div {
   position: relative;
   background-color: white;
   width: 40%;
   margin: 5% auto;
   border-radius: 30px;
   padding: 67px;
}
#popup-doacao > div > img {
   width: 30px;
   height: 30px;
   position: absolute;
   right: 30px;
   top: 30px;
   cursor: pointer;
   transition-duration: .5s;
}
#popup-doacao > div > img:hover {
   transform: scale(0.95);
}
#popup-doacao p {
   font-size: 20px;
}
#popup-doacao h2 {
   font-size: 40px;
   font-weight: 200;
   text-align: center;
   border-bottom: 1px solid #666666a6;
   width: 80%;
   margin: 0 auto;
   margin-bottom: 53px;
}
#popup-doacao > div > div {
   height: 400px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}
.content-bottom {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
}
.row {
   width: 1px;
   height: 100%;
   background-color: #333;
}
.pix div, .talk div {
   color: white;
   text-align: center;
   border-radius: 2px;
   padding: 12px;
   font-size: 17px;
   cursor: pointer;
   transition-duration: .3s;
   margin-top: 10px;
}
.pix div:hover, .talk div:hover {
   opacity: 0.8;
}
.pix div {
   background-color: #1A8B18;
}
.talk div {
   background-color: #18628B;
}
.content-bottom .pix, .content-bottom .talk {
   width: 40%;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}
.pix p, .talk p {
   text-align: center;
}
.pix input {
   text-align: center;
   width: 99%;
   color: #ff9d7d;
   font-size: 100%;
}
.pix input:focus {
   outline: none;
}

/* PopUp de Formulário */
.contact-form-popup {
   position: fixed;
   width: 100vw;
   height: 100vh;
   background-color: #dddddd;
   z-index: 2;
   display: none;
   animation: openPopup .5s;
   overflow: auto;
}
.contact-form-popup form {
   width: 30%;
   margin: 100px auto;
   border: 1px solid rgb(255, 255, 255);
   padding: 20px;
   border-radius: 10px;
   background-color: white;
}
.contact-form-popup form h3 {
   text-align: center;
   font-size: xx-large;
   margin-bottom: 20px;
}
input[type=text], select, textarea {
   width: 100%;
   padding: 12px;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box;
   margin-top: 6px;
   margin-bottom: 16px;
   resize: vertical;
}
 input[type=submit] {
   background-color: #005c28;
   color: white;
   padding: 12px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   transition-duration: .3s;
}
input[type=submit]:hover {
   background-color: #005c28e3;
}
.form-actions {
   display: flex;
   justify-content: space-between;
}
.close-button {
   padding: 12px 20px;
   background-color: rgb(255, 58, 58);
   color: white;
   text-align: center;
   cursor: pointer;
   transition-duration: .3s;
   border-radius: 4px;
   border: none;
}
.close-button:hover {
   opacity: 0.9;
}

/* PopUp de Voluntários */
#popup-voluntario {
   display: none;
   position: fixed;
   width: 100vw;
   height: 100vh;
   background-color: rgba(31, 31, 31, 0.863);
   z-index: 1;
   overflow: auto;
   animation: openPopup .5s;
}
#popup-voluntario p {
   color: #8C472F;
   font-size: 100%;
   line-height: 27px;
}
#popup-voluntario > div {
   position: relative;
   width: 55%;
   margin: 5% auto;
   border-radius: 30px;
   padding: 67px;
   background-color: white;
}
#popup-voluntario > div div h2 {
   font-size: 40px;
   text-align: center;
   color: #018A3D;
   font-weight: 200;
   width: 60%;
   padding-bottom: 10px;
   margin: 0 auto;
   margin-bottom: 50px;
   border-bottom: 1px solid #018A3D;
}
#popup-voluntario > div > img {
   width: 30px;
   height: 30px;
   position: absolute;
   right: 30px;
   top: 30px;
   cursor: pointer;
   transition-duration: .5s;
}
#popup-voluntario > div > img:hover {
   transform: scale(0.95);
}
.seja-voluntario {
   margin-bottom: 50px;
}
.seja-voluntario > div {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   margin-bottom: 20px;
}
.seja-voluntario > div p {
   width: 50%;
   text-align: justify;
}
.seja-voluntario > div img {
   width: 45%;
   height: 100%;
   border: 1px solid #018a3cbd;
   border-radius: 2px;
}

/* Tipos de Voluntários */
.tipos-voluntarios {
   margin-bottom: 50px;
}
.tipos-voluntarios > div {
   display: flex;
   justify-content: space-around;
   align-items: center;
}
.itens-voluntarios {
   background-color: #8c462fd0;
   color: white;
   width: 30%;
   height: 150px;
   align-items: center;
   border-radius: 2px;
   padding: 20px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.itens-voluntarios h3 {
   text-align: center;
   margin-bottom: 20px;
   font-weight: 300;
}
.itens-voluntarios p {
   color: white !important;
   font-size: 15px !important;
   text-align: center;
   font-weight: lighter;
}

/* Seja Um de Nós */
.seja-um {
   display: flex;
   flex-direction: column;
   align-items: center;
}
.seja-um a {
   text-decoration: none;
   color: white;
   background-color: #8c462fda;
   font-size: 20px;
   padding: 15px 20px;
   border-radius: 2px;
   transition-duration: .3s;
   border: 1px solid #8c462fda;
}
.seja-um a:hover {
   background-color: transparent;
   color: #8c462fda;
}

@media (max-width: 1700px) {
   main {
      margin: 0 15% 80px 15%;
   }
}
@media (max-width: 1200px) {
   main {
      margin: 0 5% 80px 5%;
   }
}
@media (max-width: 950px) {
   main {
      margin: 0 1% 80px 1%;
   }
   .cards, .cliques {
      justify-content: space-around;
   }
}
@media (max-width: 334px) {
   .card, .clique {
      width: 80%;
   }
}

/* Reponsividade do PopUp Doações */
@media (max-width: 1300px) {
   .pix input {
      font-size: 80%;
   }
}
@media (max-width: 1000px) {
   .pix input {
      font-size: 60%;
   }
   #popup-doacao > div {
      width: 60%;
   }
}
@media (max-width: 640px) {
   #popup-doacao > div {
      padding: 40px;
      width: 80%;
   }
}
@media (max-width: 460px) {
   #popup-doacao > div {
      padding: 40px;
      width: 80%;
      margin-top: 20%;
      height: 600px;
   }
}
@media (max-width: 400px) {
   #popup-doacao > div {
      margin-top: 0;
   }
   #popup-doacao p {
      font-size: 15px !important;
   }
}

/* Reponsividade do PopUp Voluntários */
@media (max-width: 1600px) {
   #popup-voluntario p {
      font-size: 80%;
   }
}
@media (max-width: 1100px) {
   #popup-voluntario p {
      font-size: 60%;
      width: 100%;
   }
   .seja-voluntario > div {
      flex-direction: column;
   }
   #popup-voluntario > div p:first-child {
      margin-bottom: 10px;
   }
   .seja-voluntario > div img {
      width: 100%;
      height: 300px;
   }
   .contact-form-popup form {
      width: 50%;
   }
}
@media (max-width: 770px) {
   #popup-voluntario > div {
      padding: 40px;
      width: 70%;
   }
   .tipos-voluntarios > div {
      flex-direction: column;
   }
   .itens-voluntarios {
      margin-bottom: 10px;
      width: 100%;
   }
}
@media (max-width: 600px) {
   .contact-form-popup form {
      width: 80%;
   }
}
@media (max-width: 500px) {
   #popup-voluntario > div {
      padding: 25px;
      width: 85%;
   }
}