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

  body {
    font-family: sans-serif;
    width: 100%;
    min-height: 100vh;
  }
/* Добавляем оформление grid-контейнеру: */
  .container {
    display: grid;
    border: 2px solid rgb(80, 145, 27); /* Обводим зелёной линией */
    border-radius: 2px; /* Скругляем углы на 2 пикселя */
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap:  50px;
    grid-template-rows: 
      [header] max-content
      [logo] minmax(40px, max-content)
      [control-panel] max-content
      [raspisanie] max-content 
      [abonement] max-content
      [safety] max-content
      [contacts] max-content;
      row-gap:  10px;
      grid-template-areas: "header header header header"
                         "cplogo cplogo cplogo cplogo"
                         "cpreco cpotzy cpcert cpabou"
                         "welcome welcome welcome welcome"
                         "raspis raspis raspis raspis"
                         "abonem abonem abonem abonem"
                         "safety safety safety safety"
                         "contac contac contac contac";
  }

.header { 
  grid-area: header; 
  text-align: center; /* Контент размещаем в центре по горизонтали */
}

#headimg {
	max-width:100%;
}

.cplogo { grid-area: cplogo; 
  border: 1px solid white; /* Обводим чёрным пунктиром */
  border-radius: 6px; /* Скругляем углы на 6 пикселей */
  background-color: white;
  text-align: center; /* Контент размещаем в центре по горизонтали */
  position: relative;
  top: -5px;
  font-size: 21px;
}

#logo { /* логотип круглый слева */ 
  border-radius: 60px; /* Скругляем углы - делаем круг */
	width:100;
  position: absolute;
  top: -50px;
  left: 20px;
  float: left; /* Обтекание картинки по левому краю */
  border: 4px solid white;
}
#linkok {/* ярлычки вк, ок, тм и вп справа */
  border: 0px;
  position: absolute;
  right:  110px; 
  top: 5px; 
}

#linkwp {/* ярлычки вк, ок, тм и вп справа */
  border: 0px;
  position: absolute;
  right:  75px; 
  top: 5px; 
}

#linktm {/* ярлычки вк, ок, тм и вп справа */
  border: 0px;
  position: absolute;
  right:  40px; 
  top: 5px; 
}

#linkvk { /* ярлычки вк, ок, тм и вп справа */
  border: 0px;
  position: absolute;
  right:  5px; 
  top: 5px; 
}

.linkimg { /* размер ярлычков вк, ок, тм и вп справа */
  width: 32px;
}

.cpreco { grid-area: cpreco; 
/*  border: 1px dashed; /* Обводим чёрным пунктиром */
/*  border-radius: 5px; /* Скругляем углы на 5 пикселей */
/*  background-color: rgba(82, 29, 179, 0.5); /* Фон красим фиолетовым */
  text-align: center; /* Контент размещаем в центре по горизонтали */
}

.cpabon { grid-area: cpabon; 
/*  border: 1px dashed; /* Обводим чёрным пунктиром */
/*  border-radius: 5px; /* Скругляем углы на 5 пикселей */
/*  background-color: rgba(82, 29, 179, 0.5); /* Фон красим фиолетовым */
  text-align: center; /* Контент размещаем в центре по горизонтали */

}
.cpofrt { grid-area: cpofrt; 
/*  border: 1px dashed; /* Обводим чёрным пунктиром */
/*  border-radius: 5px; /* Скругляем углы на 5 пикселей */
/*  background-color: rgba(82, 29, 179, 0.5); /* Фон красим фиолетовым */
  text-align: center; /* Контент размещаем в центре по горизонтали */

}
.cpotzy { grid-area: cpotzy; 
/*  border: 1px dashed; /* Обводим чёрным пунктиром */
/*  border-radius: 5px; /* Скругляем углы на 5 пикселей */
/*  background-color: rgba(82, 29, 179, 0.5); /* Фон красим фиолетовым */
  text-align: center; /* Контент размещаем в центре по горизонтали */

}
.cprasp { grid-area: cprasp; 
/*  border: 1px dashed; /* Обводим чёрным пунктиром */
/*  border-radius: 5px; /* Скругляем углы на 5 пикселей */
/*  background-color: rgba(82, 29, 179, 0.5); /* Фон красим фиолетовым */
  text-align: center; /* Контент размещаем в центре по горизонтали */

}
.cpofer { grid-area: cpofer; 
/*  border: 1px dashed; /* Обводим чёрным пунктиром */
/*  border-radius: 5px; /* Скругляем углы на 5 пикселей */
/*  background-color: rgba(82, 29, 179, 0.5); /* Фон красим фиолетовым */
  text-align: center; /* Контент размещаем в центре по горизонтали */

}
.cpcont { grid-area: cpcont;
/*  border: 1px dashed; /* Обводим чёрным пунктиром */
/*  border-radius: 5px; /* Скругляем углы на 5 пикселей */
/*  background-color: rgba(82, 29, 179, 0.5); /* Фон красим фиолетовым */
  text-align: center; /* Контент размещаем в центре по горизонтали */

}

.cpimg { /* картинки на кнопках на панели управления */
	width:60;
	height:43;
  border-radius: 6px; /* Скругляем углы на 6 пикселей */
}

h1 {
  font-weight: bold;
  text-align: center; /* Контент размещаем в центре по горизонтали */
}
.welcome { grid-area: welcome; 
  border: 1px dashed; /* Обводим чёрным пунктиром */
  border-radius: 5px; /* Скругляем углы на 5 пикселей */
  background-color: rgba(82, 29, 179, 0.5); /* Фон красим фиолетовым */
}
.raspis { grid-area: raspis; 
  border: 1px dashed; /* Обводим чёрным пунктиром */
  border-radius: 5px; /* Скругляем углы на 5 пикселей */
  background-color: rgba(82, 29, 179, 0.5); /* Фон красим фиолетовым */
}

.tb_raspis { 
	margin-left: 15px;
}
.tb_raspis * { 
  border: 1px solid black;
	padding: 2px;
}
.caption {
	height:60;
}

.abonem { grid-area: abonem; 
  border: 1px dashed; /* Обводим чёрным пунктиром */
  border-radius: 5px; /* Скругляем углы на 5 пикселей */
  background-color: rgba(82, 29, 179, 0.5); /* Фон красим фиолетовым */

}
.safety { grid-area: safety; 
  border: 1px dashed; /* Обводим чёрным пунктиром */
  border-radius: 5px; /* Скругляем углы на 5 пикселей */
  background-color: rgba(82, 29, 179, 0.5); /* Фон красим фиолетовым */

}
.contac { grid-area: contac; 
  border: 1px dashed; /* Обводим чёрным пунктиром */
  border-radius: 5px; /* Скругляем углы на 5 пикселей */
  background-color: rgba(82, 29, 179, 0.5); /* Фон красим фиолетовым */

}