* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   border: none;
   font-family: "Poppins", Arial, Helvetica, sans-serif;
}

html {
   font-size: 62.5%;
}

body {
   background-color: #d6d6d6;
   font-size: 1.6rem;
}

#container {
   display: block;

   width: 90%;
   max-width: 600px;
   min-width: 300px;

   margin: 80px auto 80px auto;

   background-color: #f6f6f6;
   text-align: center;
   border-radius: 10px;
   box-shadow: 10px 10px 1px #00000022;
   padding: 20px;
   border: 1px solid #00000066;
}

#container h1 {
   letter-spacing: 0.2px;
}

#container p {
   margin-top: 30px;
   margin-bottom: 40px;
   line-height: 32px;
   letter-spacing: 0.2px;
}

form {
   margin: 0 auto;
   width: 100%;
   text-align: left;
}

.option-lists {
   margin: 30px;
}

label,
select {
   display: block;
}

select {
   margin-top: 10px;
   padding-left: 10px;

   height: 40px;
   width: 100%;

   outline: none;

   font-style: italic;
   font-size: 16px;
   color: #565656;
   font-weight: 600;
   letter-spacing: 0.3px;

   border-radius: 4px;
   border: solid 1px #a6a6a6;
   border: none;
   border-bottom: solid 2.5px #a6a6a6;

   box-shadow: 0px 0px 5px #00000033;
}

#pesquisar {
   margin: 20px 0;
   border-radius: 4px;

   /* background-color: #00aa00cc;
   color: #ffffff;
   border: solid 1px #00aa00; */

   background-color: #f6f6f6;
   color: #000;
   border: solid 1px #000;

   width: 70%;
   height: 45px;

   font-weight: 600;
   letter-spacing: 1px;
   text-transform: uppercase;

   cursor: pointer;
   
   transition: background-color 0.3s;
}

#pesquisar:hover {
   background-color: #00aa00;
   color: white;
   border: 1px solid #006600;
}

.popup-screen.popup-mostrar {
   display: flex;
}

.popup-screen {
   position: fixed;
   width: 100vw;
   height: 100vh;
   top: 0;
   left: 0;
   background-color: #000000aa;
   display: none;
   justify-content: center;
   align-items: center;
   z-index: 2000;
}

.popup-container {
   width: 90%;
   max-width: 700px;
   min-width: 310px;

   background-color: white;
   padding: 20px 50px;

   border-radius: 10px;

   border: 1px solid #000000dd;
   box-shadow: 0 0 800px 1px #ffffff11;

   position: relative;
}

@media (max-width: 500px) {
   html {
      font-size: 50%;
   }

   #container h1 {
      font-size: 3.6rem;
   }

   #container p,
   #container label {
      font-size: 1.9rem;
   }

   .popup-container {
      padding: 20px;
   }
}

.btn-fechar-popup {
   position: absolute;
   top: -50px;
   right: 0px;

   cursor: pointer;
   width: 40px;
   height: 40px;
   border-radius: 100%;

   font-family: "Poppins", Arial, Helvetica, sans-serif;
   font-weight: 600;

   background-color: #ff0000bb;
   border: 1px solid #fff;
   color: white;
   
   transition: background-color 0.25s;
}

#popup-model {
   font-size: 2.8rem;
   font-weight: bold;
}

#popup-brand {
   font-size: 2.2rem;
   font-weight: bold;
}

#popup-valor {
   font-size: 3.3rem;
   font-weight: bold;
}

.btn-fechar-popup:hover {
   background-color: #ffffff;
   border: 1px solid #000;
   color: black;
}

.popup-container footer {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
}

.popup-container main {
   width: 100%;
   display: flex;
   justify-content: space-between;
   margin-top: 20px;
   margin-bottom: 20px;
}

.popup-container p,
.popup-label {
   margin: 0px;
   padding: 0px;
}

.popup-container p {
   font-size: 1.8rem;
}
.popup-label {
   color: #595959;
   font-style: italic;
}

div .atualizacao {
   text-align: end;
}

@keyframes popup {
   from {
      opacity: 0;
      transform: translate3d(0, -100px, 0);
   }
   to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
   }
}

.popup-mostrar .popup-container {
   animation: popup 0.8s;
}

#footer-mainpage {
   padding: 30px 0;

   width: 100%;
   background-color: #a5a5a5;
   text-align: center;
   border-top: 1px solid #565656;

   box-shadow: inset 0 3px 5px #00000050;
}

.footer-social-media {
   max-height: 48px;
}

.footer-social-media i {
   margin: 0 20px;
}

.footer-social-media a {
   color: #000;
   text-decoration: none;
}

.icons {
   font-size: 47px;
   cursor: pointer;
}

.icons:hover {
   color: #000000cc;
   font-size: 49px;
   transition: 0.2s;
}

.footer-p {
   margin-top: 20px;
}