main {
   padding-bottom: 30px;
}

.div-wrapper p {
   height: auto;
   width: 100%;
   margin: 20px 0px;
   margin-top: 30px;
   font-size: 20px;
   text-align: center;
   color: #063C73;
   letter-spacing: 0px;
   line-height: normal;
   transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -webkit-transition: all 0.5s ease-in-out;
}

.div-container {
   height: 100%;
   background-color: #EFF0FE;
}

.div-box {
   padding: 15px;
   position: relative;
   top: 0;
   left: 0;
   z-index: 0;
}

.div-box h3 {
   height: auto;
   width: 100%;
   font-size: 25px;
   font-weight: bold;
   color: #757BC9;
   text-align: center;
   letter-spacing: 0px;
   text-shadow: 0px 0px 10px #FFF;
   margin: 10px 0px;
}

.div-box p {
   height: auto;
   width: 100%;
   margin: 20px 0px;
   font-size: 16px;
   text-align: center;
   color: #757BC9;
   letter-spacing: 0px;
   line-height: normal;
}

.imgbuttons {
   padding: 20px 0px;
   justify-content: space-around;
   user-select: none;
   -ms-user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
}

.imgbuttons img {
   height: 100%;
   width: calc((55% / 3) - 30px);
   transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -webkit-transition: all 0.5s ease-in-out;
}

.selected {
   filter: opacity(1);
   -webkit-filter: opacity(1);
   transform: scale(1.2);
   -o-transform: scale(1.2);
   -ms-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   transition: all 0.25s ease-in-out;
   -moz-transition: all 0.25s ease-in-out;
   -webkit-transition: all 0.25s ease-in-out;
   animation-name: selecionado;
   animation-duration: 2s;
   animation-direction: alternate;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out;
}

@keyframes selecionado {
   0% {
     transform: scale(1);
   }

   100% {
      transform: scale(1.1);
   }
}

.normal {
   filter: opacity(0.75);
   -webkit-filter: opacity(0.75);
   transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   -moz-transform: scale(1);
   -webkit-transform: scale(1);
   transition: all 0.25s ease-in-out;
   -moz-transition: all 0.25s ease-in-out;
   -webkit-transition: all 0.25s ease-in-out;
}

.hidden {
   display: none;
   opacity: 0;
   animation-name: esconder;
   -webkit-animation-name: esconder;
   animation-duration: 1s;
   -webkit-animation-duration: 1s;
}

.shown {
   display: block;
   opacity: 1;
   animation-name: mostrar;
   -webkit-animation-name: mostrar;
   animation-duration: 1s;
   -webkit-animation-duration: 1s;
}

@-webkit-keyframes esconder {
   0% {
      display: block;
      opacity: 1;
   }

   99% {
      display: block;
      opacity: 0;
   }

   100% {
      display: none;
   }
}

@keyframes esconder {
   0% {
      display: block;
      opacity: 1;
   }

   99% {
      display: block;
      opacity: 0;
   }

   100% {
      display: none;
   }
}

@-webkit-keyframes mostrar {
   0% {
      display: block;
      opacity: 0;
   }

   100% {
      display: block;
      opacity: 1;
   }
}

@keyframes mostrar {
   0% {
      display: block;
      opacity: 0;
   }

   100% {
      display: block;
      opacity: 1;
   }
}

@media screen and (max-width: 888px) {
   #p-texto, .div-box p {
      font-size: 14px;
   }
}

@media screen and (max-width: 600px) {
   .div-wrapper p {
      font-size: 20px;
      transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
   }

   .div-box p {
      font-size: 14px;
   }

   .imgbuttons img {
      height: 100%;
      width: calc((80% / 3) - 30px);
      transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
   }
}