@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,900,900i&subset=cyrillic');
html {
  font-family: 'Roboto', Arial, sans-serif;
  background: url(bg.jpg);
  background-size: 33.333333%;
  background-color: #c5c5c5;
}
body {
  width: 750px;
  margin: 0 auto;
  padding: 40px;
  padding-top: 20px;
//  background-color: rgb(0,230,230);
  background-color: rgb(130,210,210);
  box-shadow: 0 0 30px rgba(0,0,0,.3);
}

.tdphoto{
// border: 1px solid black;
 position: relative;
// padding: 0px;
}

.photo2{
// border: 1px solid black;
//box-shadow: 3px 3px 3px gray;
 position: relative;
display: block;
// padding: 0px;
}


.photo {
// border: 1px solid black;
//box-shadow: 3px 3px 3px gray;
display: block;
}

.photo:hover::after {
 content: attr(data-title);
 position: absolute; /* Абсолютное позиционирование */
 left: 0; right: 0; bottom: 5px; /* Положение подсказки */
 z-index: 1; /* Отображаем подсказку поверх других элементов */
 background: rgba(0,42,167,0.6); /* Полупрозрачный цвет фона */
 color: #fff; /* Цвет текста */
 text-align: center; /* Выравнивание текста по центру */
 font-family: Arial, sans-serif; /* Гарнитура шрифта */
 font-size: 11px; /* Размер текста подсказки */
 padding: 5px 10px; /* Поля */
// border: 1px solid #333; /* Параметры рамки */
}


td {
     padding: 10px;
   }

h1, h2 {
  text-align: center;
  font-weight: 700;
}
h2 {
  margin-bottom: 50px;
  padding-bottom: 30px;
  border-bottom: 3px solid rgb(255,196,37);
}
input:not([type="submit"]), textarea, select {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid rgb(210,210,210);
  border-radius: 10px;
  outline: 0;
}
input:not([type="submit"]):focus, textarea:focus {
  border: 1px solid rgb(180,180,180);
  box-shadow: 0 0 3px rgba(180,180,180,.5);
}
input[type="radio"]:focus, input[type="checkbox"]:focus {
  border: none;
  box-shadow: none;
}
input[type="submit"] {
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  background-color: rgb(196,196,100);
  border: none;
  outline: 0;
}
.subm {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  background-color: rgb(196,196,124);
}
select {
  border: none;
  background-color: rgba(0,177,89,.5);
  font-weight: 900;
}
select option {
  color: black;
  font-weight: 400;
}
/*select option:nth-last-child(2) {
  font-weight: 900;
}
select option:nth-child(odd) {
  background-color: rgb(209,17,65);
}
select option:nth-child(even) {
  background-color: rgb(0,174,219);
}*/
.green {
  color: rgb(0,177,89);
  font-weight: 900;
}
.blue {
  margin: 50px auto;
  padding: 5px 20px;
  border: 4px solid rgb(0,174,219);
}
.yellow {
  margin: 50px auto;
  padding: 5px 20px;
  border: 3px solid rgb(0,0,0);
  background-color: rgba(255,196,37,.4);
}

.img_tr {
  display: block;
  transition: 1s;
}

.img_tr:hover {
  opacity: 0.0;
}

.img_d {
  display: inline-block;
  border: 1px solid gray;
  box-shadow: 5px 5px 5px gray;
  background-repeat: no-repeat;
  background-position: center;
}