.carBlock200 {
    background: #fff;
    padding: 2px;
}
.carBlock100 {
    background: #fff;
    padding: 4px;
}
.carRow10 {
  background: #fff;
  padding: 0px;
  margin: 0px;
}
.car-ihavenot {
    width: 40px;
    padding: 1px;
		background: #f00;
		color: #fff;
    font-size: 24px;
    display: inline-block;
}
.car-ihave {
    width: 40px;
    padding: 1px;
		background: #0f0;
		color: #000;
    font-size: 24px;
    display: inline-block;
}
.car-ihave-poor {
    width: 40px;
    padding: 1px;
		background: yellow;
		color: #000;
    font-size: 24px;
    display: inline-block;
}
#dleft, #dright {
    display: inline-block;
    width: auto;
    height: 100%;
}
.menuImg:hover {opacity: 0.7;} /* при наведении мыши высветляет ячейку */
.modal { /* old modal */
  position: fixed;
  z-index: 1;
  padding-top: 0;
  left: 0;
  top: 60px;
  width: 100%;
  height: 100%;
  display: none;
  overflow: auto;
  /* background-color: rgb(0, 0, 0); */
  background-color: rgba(0, 0, 0, 0.9);
  overflow-y: auto; /* возможность скроллинга по вертикали внутри попапа */
  overflow-x: hidden; /* невозможность скроллинга по горизонтали внутри попапа */
  transition: all 0.8s ease 0s; /* анимация 1*/
}
.popup { /* old popup */
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	top: 40px;
	left: 0;
	opacity: 0;
	visibility: hidden; /* попап изначально скрыт */
	overflow-y: auto; /* возможность скроллинга по вертикали внутри попапа */
	overflow-x: hidden; /* невозможность скроллинга по горизонтали внутри попапа */
	transition: all 0.8s ease 0s; /* анимация 1*/
}

.modal img{
	max-height: 50%;
	vertical-align: top;
  transition: 0.3s;
}
.modal:target {
	opacity: 1;
	visibility: visible;
}
.modal:target .popup__content {
	/* transform: translate(0 px, 0px); /* анимация 1*/
	transform: perspective(600px) translate(0px, 0%) rotate(0deg); /* анимация 2*/
}
	/*
.popup__content_image {
	padding: 0;
}
*/

.modal-content{
  margin: auto;
  display: block;
  /* width: 100%; */
  max-height: 800px;
  max-width: 600px;
}
#carNumber{
  font-size: 40px;
  color: #fff;
  max-width: 700px;
  text-align: left;
  padding: 10px 0;
  margin: 0;
  left: 0;

  /* margin: auto;
  display: block;
  width: 80%;

  color: #ccc;

  height: 150px;*/
}
/*.modal-content, #carNumber {
    -webkit-animation-name:zoom;
    -webkit-animation-duration:0.6s;
    animation-name:zoom;
    animation-duration:0.6s;
}
@-webkit-keyframes zoom{
  from{-webkit-transform:scale(0)}
  to{-webkit-transform:scale(1)}
}
@keyframes zoom{
  from{transform:scale(0)}
  to{transform:scale(1)}
}*/
.close{
  position: absolute;
  top: 15px;
  right:35px;
  color: #ff3333;
  font-size: 64px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover{
  color:#bbb;
  text-decoration: none;
  cursor: pointer;
}
@media only screen and (max-width:700px) {
  .modal-content{width: 100%;}
}
