.materials{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.materials h1{
  position: relative;
  text-align: center;
  color: white;
  text-shadow: 3px 3px 2px black;
  font-size: calc(1.8em + 1.8vw);
  font-weight: 200;
  margin: 0 0 3vh 0;
  padding: 0px;


}
.materials p{
  position: relative;
  color: white;
  font-size: 1.25em;
  font-weight: 300;
  margin: 0 0 3vw 0;
  width: 90%;
  max-width: 785px;
  text-align: justify;
}
.closeMaterial{
  position: absolute;
  height: calc(.7em + 1vw);
  width: calc(.7em + 1vw);

  right: 30px;
  top: 30px;
  z-index: 10;
  cursor: pointer;
}
.closeMaterial img{
  position: relative;
  height: 100%;
}
.containerMaterials{
  position: relative;
  width: 85%;
  padding: 10px;
  min-width: 300px;

  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.containerTextMaterials{
  position: absolute;
  height: 50%;
  width: 70%;
  min-width: 280px;
  min-height: 200px;
  padding: calc(.5em + .5vw);

  max-width: 600px;
  max-height: 350px;
  top: 15%;
  background: linear-gradient(90deg, rgba(29,61,97,1) 0%, rgba(16,36,57,.8) 100%);
  z-index: 2;
  box-shadow: 5px 5px 10px black;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;

}
.buttonMaterialsBox{
  position: relative;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.buttonMaterialsBox button{
  padding: calc(0.1vw + 0.1em) calc(3.3vw + 0.3em);
  z-index: 10;
  max-height: 50px;
  font-size: calc(1vw + 1em);
  font-weight: 300;
  border-radius: 5px;
  cursor: pointer;
  background-color: rgba(141, 67, 68, .9);
  color: white;
  font-size: calc(0.8em + 0.8vw);
}

.containerTextMaterialsBox{
  position: relative;
  height: 70%;
  width: 45%;

  display: flex;
  align-items: center;
  justify-content: center;
}
.containerTextMaterialsBox:nth-child(1){
  background-color: rgba(255,255,255,.0 );
}
.containerTextMaterialsBox h3{
  position: relative;
  font-size: calc(1.3em + 1.3vw);
  color: white;
  font-weight: 400;
  text-align: center;
}
.containerTextMaterialsBox img{
  position: absolute;
  width: 60%;
  margin-left: calc(.5em + .5vw);
}

.itemMaterial{
  position: relative;
  width: 15%;
  margin: 0 1%;
  cursor: pointer;
  transition: .4s;
}
.itemMaterial img{
  opacity: 0.8;
  filter: drop-shadow(7px 7px 3px rgba(50, 50, 50, .7));
}
.itemMaterial:hover{
  transform: rotateZ(1deg);
}
.itemMaterial:active{
  transform: rotateZ(-1deg);
}
.itemMaterial h3{
  position: absolute;
  top: 50%;
  left: 0%;
  width: 400px;
  background-color: rgba(0,0,0, .3);
  color: white;
  font-size: 3em;
  z-index: 3;
  transform: rotateZ(-90deg) translate(-50%, -50%);
}