body {
   display: block;
}

main {
   padding-bottom: 30px;
}

.div-wrapper .div-container p {
   height: auto;
   width: 100%;
   margin: 20px 0px;
   font-size: 17px;
   text-align: center;
   color: #273B7B;
   letter-spacing: 0px;
   line-height: 25px;
}

.div-imagetext {
   position: relative;
   text-align: center;
}

.div-imagetext img {
   height: auto;
   width: 100%;
   margin-top: 20px;
   border-radius: 20px;
}

.div-imagetext h1 {
   width: 100%;
   margin: 0px;
   font-size: 400%;
   color: #3E56A4;
   text-shadow: #000 -10px 0px 150px, #000 10px 0px 150px, #000 0px -10px 150px, #000 0px 10px 150px;
   filter: brightness(1.3);
   -webkit-filter: brightness(1.3);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   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 {
   display: flex;
   -ms-display: flex;
   -moz-display: flex;
   -webkit-display: flex;
   flex-direction: row;
   -ms-flex-direction: row;
   -moz-flex-direction: row;
   -webkit-flex-direction: row;
   flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   -moz-flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
}

.div-box {
   width: calc((100% / 4) - 20px);
   height: auto;
   padding: 20px 5px;
   margin: 0px 10px;
   text-align: center;
   border-radius: 10px;
   transition: all 0.25s ease-in-out;
   -moz-transition: all 0.25s ease-in-out;
   -webkit-transition: all 0.25s ease-in-out;
}

.img-certif {
   height: auto;
   width: 95%;
   margin: 0px;
}

.button {
   filter: saturate(1);
   -webkit-filter: saturate(1);
}

.div-box h4 {
   height: auto;
   width: 100%;
   font-size: 16px;
   font-weight: bold;
   color: #FFF;
   text-align: center;
   text-shadow: 0px 5px 5px #0006;
}

.div-box p {
   width: 100%;
   height: 120px !important;
   font-size: 15px !important;
   color: #FFF !important;
}

.lbox {
   cursor: zoom-in;
}

#color1 {
   background-image: linear-gradient(#FFF 30%, #7D8AAD 90%);
}

#color2 {
   background-image: linear-gradient(#FFF 30%, #79C696 90%);
}

#color3 {
   background-image: linear-gradient(#FFF 30%, #86B8DB 90%);
}

@media screen and (max-width: 990px) {
   .div-wrapper {
      width: 90%;
   }
}

@media screen and (max-width: 888px) {
   .div-box {
      width: calc((100% / 2) - 10px);
      height: auto;
      padding: 20px 0px;
      margin: 5px auto;
      text-align: center;
   }

   .div-box {
      filter: saturate(1);
      -webkit-filter: saturate(1);
   }

   .div-imagetext h1 {
      font-size: 250%;
      transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
   }
}