.wide {
   width: 90%;
   margin: 0px;
   padding-bottom: 10px;
}

.masterPost {
   height: calc(33.75vw - 100%);
   width: 100%;
   background-color: #F8F8F8;
   padding: 15px;
   padding-bottom: 30px;
   margin: 0px 0px 15px;
   border: solid 1px #CCC;
   border-radius: 5px;
   text-align: center;
   justify-content: space-around;
   cursor: pointer;
   transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -webkit-transition: all 0.5s ease-in-out;
}

.post {
   height: 100%;
   width: calc((90vw / 3) - 30px);
   background-color: #F8F8F8;
   padding: 15px;
   margin: 0px 0px 15px;
   border: solid 1px #CCC;
   border-radius: 5px;
   justify-content: space-around;
   cursor: pointer;
   transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -webkit-transition: all 0.5s ease-in-out;
}

.image-container {
   height: calc(56.25vw / 3);
   width: 100%;
   overflow: hidden;
   user-select: none;
   -ms-user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
   transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -webkit-transition: all 0.5s ease-in-out;
}

.masterPost img, .post img {
   width: 100%;
   height: 100%;
   margin: 0px;
   object-fit: cover;
   -o-object-fit: cover;
   transform: scale(1.2);
   -o-transform: scale(1.2);
   -ms-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   filter: grayscale(0.8);
   -webkit-filter: grayscale(0.8);
   transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -webkit-transition: all 0.5s ease-in-out;
}

.masterPost img:hover, .post img:hover {
   transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   -moz-transform: scale(1);
   -webkit-transform: scale(1);
   filter: grayscale(0);
   -webkit-filter: grayscale(0);
   transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -webkit-transition: all 0.5s ease-in-out;
}

.masterPost #titulo, .post #titulo {
   height: 3em;
   margin: 5px 0px 0px 0px;
   font-size: 14px;
   color: #273B7B;
}

.masterPost h4, .post h4 {
   margin: 5px 0px 0px;
   font-size: 13px;
   color: #576BAA;
}

.div-load {
   height: 90px;
   width: 100%;
   position: relative;
}

.div-load .botao {
   position: absolute;
   top: 25%;
   left: 50%;
   transform: translate(-50%, -75%);
   cursor: pointer;
}

.div-load .botao p {
   margin: 0px;
   user-select: none;
}

.div-load .botao img {
   height: 50px;
   width: auto;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

.btn-visible {
   display: block;
}

.btn-hidden {
   display: none;
}

.div-header {
   padding-top: 30px;
   padding-bottom: 30px;
}

.div-header>* {
   margin: 0px;
}

.div-header p {
   font-size: 14px;
   color: #7E7E7E;
}

#titulo {
   font-size: 2.29em;
}

#imagemHeader {
   width: 70%;
   height: auto;
   margin: auto;
   text-align: center;
   vertical-align: middle;
   display: table-cell;
}

@media screen and (max-width: 888px) {
   #titulo {
      font-size: 1.17em;
   }

   .masterPost img, .post img {
      transform: scale(1);
      filter: grayscale(0);
      -webkit-filter: grayscale(0);
      transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
   }
}
@media screen and (max-width: 820px) {
   .masterPost, .post {
      width: 90vw;
      height: 56.25vw;
      transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
   }

   .masterPost {
      width: 100%;
   }

   .image-container {
      height: calc(100% - 13px - 3em);
      width: 100%;
      transition: all 0.5s ease-in-out;
      -moz-transition: all 0.5s ease-in-out;
      -webkit-transition: all 0.5s ease-in-out;
   }
}