* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Regular.ttf");
}

@font-face {
  font-family: "Montserrat-Bold";
  src: url("../assets/fonts/Montserrat-Bold.ttf");
}

@font-face {
  font-family: "Montserrat-SemiBold";
  src: url("../assets/fonts/Montserrat-SemiBold.ttf");
}

.estrutura {
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: calc(100% - 86px);
  max-height: calc(100% - 86px);
}

.estrutura > div:first-child {
  background: #d80010;
}

.estrutura div.row {
  width: 100%;
}

.estrutura div.row-top {
  height: 45%;
  display: flex;
  flex-direction: row;
}

.estrutura div.row-bottom {
  height: 55%;
  display: flex;
  flex-direction: row;
}

.estrutura div.row div.description {
  width: 50%;
  padding: 5px;
  font-family: 'Montserrat', sans-serif;
}

.estrutura div.row div#img-1, 
.estrutura div.row div#img-2 {
  width: 25%;
}

.estrutura div.row div#img-3 {
  width: 50%;
}

div.description p {
  font-size: 15px;
  line-height: 16px;
  cursor: default;
  text-align: center;
  margin-top: 8px;

  color: white;
}

.estrutura div p:first-child {
  margin-top: 20px;
}

#img-1 {
  background: url("../assets/images/03_r.jpg") no-repeat;
}

#img-1:hover {
  background: url("../assets/images/03_cor.jpg") no-repeat;
  background-size: 100% 100%;
}

#img-2 {
  background: url("../assets/images/01_r.jpg") no-repeat;
}

#img-2:hover {
  background: url("../assets/images/01_cor.jpg") no-repeat;
  background-size: 100% 100%;
}

#img-3 {
  background: url("../assets/images/00_cor.jpg") no-repeat;
  width: 50%;
}

#img-4 {
  background: url("../assets/images/02_r.jpg") no-repeat;
  width: 30%;
}

#img-4:hover {
  background: url("../assets/images/02_cor.jpg") no-repeat;
  background-size: 100% 100%;
}


#img-1,
#img-2,
#img-3,
#img-4,
#img-5 {
  background-size: 100% 100%;
  height: 100%;
}

#img-5 {
  background: url("../assets/images/04_cor.jpg") no-repeat;
  width: 26%;
  position: absolute;
  right: 0;
  height: 51%;
  bottom: 0;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.8);
  background-size: 120% 100%
}

#img-1,
#img-2,
#img-4 {
  transition: background 0.3s;
}

@media (max-width: 1035px) {
  .estrutura div.row-top {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: initial;
  }

  .estrutura div.row-top div.description {
    width: 100%;
  }

  .estrutura div.row div#img-1,
  .estrutura div.row div#img-2 {
    width: 470px;
    height: 350px;
    margin-bottom: 15px;
  }

  .estrutura div.row-bottom {
    height: initial;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #d80010;
  }

  #img-3, #img-4 {
    width: 470px !important;
    height: 350px;
    margin-bottom: 15px;
  }

  #img-5 {
    width: 470px;
    height: 350px;
    position: relative;
    box-shadow: none;
    background-size: 100% 100%;
    margin-bottom: 12px;
  }
}