*{
  margin: 0;
padding: 0;
  box-sizing: border-box;
  /*  overflow: visible; */
}
body {
background-image: url(../image/4430193_large_t25.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
/*background-color:rgba(0,0,0, 0.5); #464646; */
}

footer {
background-color: #dfdfdf;
height: 50px;
font-size: 1em;
font-family: sans-serif;
font-style:italic;
}
p {
	font-family: sans-serif;
	color:#242424;
	font-size: 24px;
	font-weight:100;
	font-style:italic;
	line-height: 36px;
  text-align: center;
  margin-top: 40px;
}
.container-fluid {
  display:flex;
  height: calc(100vh - 54px);
  padding-top: 40px;
}
.row {
  justify-content: space-around;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding-top: 16px;
}
.photo_main {
        width: auto;
        height: 600px;
		border:5px solid #ddd;
		border-radius: 50%;
		box-shadow: 0 2px 5px #aaa;
		transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		}
.photo_main:hover {
        border-radius: 10%;
		}
.photo_thumbnails {
        border:3px #7f7f7f solid;
        border-radius: 20px;
        margin:5px;
        background-color: white;
        height: 200px;
}
.modal {
        display: none;
        position: fixed;
        left: 0;
        top: 24px;
        width: 100%;
        height: 94%;
        /*overflow: auto; */
        background-color: rgba(0,0,0,0.9);
        z-index: 1000;
}
.modal .modal_content {
        /*background-color: #fefefe; */
        margin: 50px auto 0 auto;
        padding: 10px;
        border: 1px solid #888;
        width: 80%;
        /*z-index: 99999;*/
        height: 90%;
}
.modal .modal_content #close_modal_window {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
}
.table{
        display:grid;
        grid-template-columns: repeat(5, 230px); /* 4 строки */
        max-width: 230px;/*calc(var(--dim-box)*0.7px)*/
        justify-content: center;
        margin: 60px auto 0 auto;
}
.patch{
      width:600px;
       height:100px;
       background:yellow;
       color:#0000ff;
       text-align:center;
       border:solid 2px black;
       box-shadow:0.4em 0.4em 10px rgba(122,122,122,0.5);
}
.fa-pencil{
        cursor:pointer;
        color:blue;
}
.fa-pencil:hover{
        color:navy;
}
.fa-check-circle-o{
        cursor:pointer;
        color:green;
        display:none;
}
.fa-check-circle-o:hover {
        color:lime;
}
.fa-ban{
      cursor:pointer;
        color:darkred;
        display:none;
}
.fa-ban:hover {
        color:red;
}
.letter{
        color:blue;
}
a.disabled {
    pointer-events: none;
    cursor: default;
    color: #888;
}
.form {
  width: 500px;
  padding: 32px;
  border-radius: 10px;
  font-family: sans-serif;
  letter-spacing: 1px;
	background-color:rgba(250,250,255, 0.90);
}
.form_title {
  text-align: center;
  margin: 0 0 32px 0;
  font-weight: normal;
}
.form_button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  margin-top: 30px;
  font-family: sans-serif;
  letter-spacing: 1px;
  font-size: 16px;
  color :#fff ;
  background-color: rgba(0, 113, 240);
  outline: none;
  cursor: pointer;
  transition: 0.3s;
}
.form_button:focus, .form_button:hover{
  background-color: rgba(0, 113, 240, 0.8);
 }

.form_group {
  position: relative;
  margin-bottom: 32px;
}
.form_input {
  width: 100%;
  height: 18px;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  background-color: transparent;
  outline: none;
  transition: 0.3s;
	cursor:pointer;
}
.form_label {
  position: absolute;
  top: 0px;
  left:-1px;
  z-index: -1;
  color: black; /* #9e9e9e; */
  transition: 0.3s;
}
.form_input:focus {
  border-bottom: 2px solid #1a73a8;
 }
.form_input:focus ~ .form_label {
	z-index: 1;
  top: -18px;
  font-size:12px;
  color: black; /* #e0e0e0; */
 }
.form_input:placeholder-shown {
  opacity: 1; 
  transition: opacity 0.3s ease;
}
.form_input:focus:placeholder-shown {
  opacity: 0; transition: opacity 0.3s ease;
}

/*.form_input:focus ~ .form_label, */
.form_input:not(:placeholder-shown) ~ .form_label {
	z-index: 1;
  top: -18px;
  font-size:12px;
  color: black; /* #e0e0e0; */
 }

.loading {
    position: absolute;
    display: none;
    background: #FFF url('/images/YCZH.gif') center center no-repeat;
    opacity: 0.7;
    width: 100%;
    height: 100%;
}

/*
@media screen and (min-width: 1600px) {
  img.photo_main {
    width: auto;
    height: 600px;
  }
}
*/

@media screen and (max-width: 1200px) {  /*mediapoint 1200 */
  img.photo_main {
    width: auto;
    height: 550px;
  }
  .table{
    grid-template-columns: repeat(4, 240px);
  }
}

@media screen and (max-width: 992px){ /*mediapoint 992 */
  img.photo_main {
    width: auto;
    height: 500px;
  }
  .table{
    grid-template-columns: repeat(3, 240px);
  }
@media screen and (max-width: 780px) { /*mediapoint 768 */
.row {
  padding-top: 300px;
}
}
@media screen and (max-width: 768px) { /*mediapoint 768 */
.row {
  padding-top: 300px;
}
.table{
    grid-template-columns: repeat(2, 240px);
  }
img.photo_main{
  width: auto;
  height: 450px;
}

}

@media screen and (max-width: 576px) {  /*mediapoint 576 */
.row {
  padding-top: 290px;
}
img.photo_main{
  width: auto;
  height: 450px;
}
.table{
  grid-template-columns: repeat(1, 240px);
}
}

@media screen and (max-width: 478px) { /*mediapoint 478 */
.row {
  padding-top: 250px;
}
img.photo_main{
  width: auto;
  height: 290px;
}
}

@media screen and (max-width: 375px) {  /*mediapoint 375 */
.row {
  padding-top: 290px;
}
}

@media screen and (orientation: landscape) and (max-height: 768px){
.modal .modal_content {
        margin: 42px auto 0 auto;
        height: 76%;
}
}
@media screen and (orientation: landscape) and (max-height: 576px){
.modal .modal_content {
        margin-top: 34px;
        height: 76%;
}
}
@media screen and (orientation: landscape) and (max-height: 375px){
.modal .modal_content {
        margin-top: 38px;
        height: 73%;
}
}