.control .container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
}

.c--controlText {
  width: 800px;
  margin-bottom: 50px;

  font: 700 normal 4rem/1.25em "Roboto", sans-serif;
  color: #fff;
}

.c--accessText {
  width: 700px;
  margin-bottom: 50px;

  font: 700 normal 1.7rem/1.66em "Roboto", sans-serif;
  color: #fff;
}

.wrapperBoxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  width: 100%;
  max-width: 100%;
}

.boxControls {
  width: 365px;
  padding: 50px 30px 50px 25px;

  border: 3px solid #303e48;
  border-radius: 20px;
}

.boxControls:hover {
  background-color: #4e6380;
}

.c--boxImage {
  margin-bottom: 15px;
}

.c--boxText {
  display: block;

  font: 700 normal 2.7rem/1.57em "Roboto", sans-serif;
  color: #fff;
}

@media screen and (max-width: 1200px) {
  .boxControls:hover,
  .boxControls:active,
  .boxControls:focus {
    background-color: #111821;
  }

  .c--controlText,
  .c--accessText {
    width: 100%;
  }
}

@media screen and (max-width: 1124px) {
  .boxControls {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 560px) {
  .c--boxText {
    font-size: 2.3rem;
  }

  .c--controlText {
    font-size: 2.6rem;
  }

  .c--accessText {
    font-size: 1.5rem;
  }
}