* {
     margin: 0;
     padding: 0;
     outline: 0;
     box-sizing: border-box;
     text-decoration: none !important;

}

.color {
     color: #2a9abd;
}

html,
body {
     width: 100%;
     height: 100vh;
}

.bg-color {
     padding: 18px 60px;
     background-color: #2a9abd;
     color: white;
}



.gira-gira {
     position: relative;
     margin: 10px auto;
     background-image: linear-gradient(to right, #3496ff, #2100da);
     width: 50px;
     height: 50px;
     border-radius: 100%;
     animation: girando 1.6s infinite;
     animation-timing-function: ease-in-out;

}

.gira-gira .gira-closed {
     position: absolute;
     top: 50%;
     left: 50%;
     z-index: 5;
     transform: translate(-50%, -50%);
     width: 40px;
     height: 40px;
     background-color: #fff;
     border-radius: 100%;

}

@keyframes girando {
     0% {
          transform: rotate(0deg);
     }

     100% {
          transform: rotate(360deg);

     }
}

.links a {
     color: white;
     margin: 0 10px;
}

/* divide a tela */
.half-screen {
     padding: 40px;
     display: flex;
     justify-content: space-around;
     flex-flow: row wrap;
     align-items: center;
}

/* tamanho as imagens */
.image,
#picture {
     width: 500px;
     height: auto;
     padding-top: 20px;
}

.image {
     box-shadow: 0 0 15px #160e5760;

}


.icones {
     width: 20px;
     height: 20px;
}

/* bordas do quiz */
.bordas {
     border-radius: 20px;
}


/* 3 imagens debaixo do quiz */
.bottom-quiz {
     background-color: #e9ecef;
     border-radius: 0 0 20px 20px;
     display: flex;
     flex-flow: nowrap row;
     justify-content: space-around;
     align-items: center;
     margin-top: 15px;
     padding: 10px;
}

.bottom-quiz img {
     width: 50px;
     height: 50px;
}

#respostas_id button,
#progressbar_id {
     width: 90%;
     margin: 5px auto;
}

footer {
     position: fixed;
     bottom: 0%;
     width: 100%;
}


.block-center {
     background-color: #fff;
     display: flex;
     flex-flow: column wrap;
     justify-content: center;
     align-items: center;
     text-align: center;
     margin: auto;
     width: 500px;
     height: auto;
     padding: 20px 50px;

}

.block-center input {
     margin: 5px 0;

}

.bd-placeholder-img {
     font-size: 1.125rem;
     text-anchor: middle;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
}

/* modal */
.modal-bg {
     position: fixed;
     z-index: 5;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     background-color: #00000050;
     display: flex;
     justify-content: center;
     align-items: center;
     animation-name: popup;
     animation-duration: 0.4s;
     animation-iteration-count: 1;
}



@keyframes popup {
     from {
          opacity: 0;
     }

     to {
          opacity: 1;
     }
}


/* responsividade */
@media (max-width: 1100px) {
     .bd-placeholder-img-lg {
          font-size: 3.5rem;
     }

     footer {
          display: block;
          position: initial;
     }
     footer *{
          margin: 0;
          padding: 0;
     }

     footer h6 {
          font-size: 0.8rem;
     }

     .links {
          display: inline-block;
          width: 95%;
          margin: 0 auto;
     }

     .links a {
          margin: 0 0.3rem;
          font-size: 0.7rem;
     }

     #picture {
          display: none;
     }

     .block-center .lead {
          font-size: 15px;
          font-weight: bold;
     }

     .block-center p, input, button, a {
          font-size: 9px;
      }

     #label_check a {
          padding: 10px 0;
          font-size: 10px;
     }

     .bg-color {
          background-color: #007bff;
          padding: 5px;
          text-align: center;
          display: flex;
          justify-content: center;
          flex-flow: column;
     }

     .half-screen {
          padding: 0px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-flow: column-reverse nowrap;
          margin-top: 10px;
     }

     .image {
          width: 85%;
          margin: 20px auto;
          padding-top: 20px;
     }

     .bottom-quiz img {
          display: none;
          width: 40px;
          height: 40px;
     }

     /* Título e subtítulo */
     .pb-3, .py-3 {
          padding-bottom: 0.3rem!important;
     }

     .pt-3, .py-3 {
          padding-top: 0.3rem!important;
     }

     .block-center {
          padding: 10px 20px;
          margin: 0 20px;
          width: 350px;

     }

     .block-center p,
     input,
     button,
     a {
          font-size: 14px;
     }

     .block-center img {
          width: 120px;
     }

     #titulo_id {
          line-height: 35px;
     }

     #subtitulo_id {
          line-height: 22px;
     }

     #go_id {
          margin-top: 0px;
     }
}