body,
 html {
     height: 100%;
     font-family: "Inconsolata", sans-serif;
 }

 .bgimg {
     background-position: center;
     background-size: cover;
     background-image: url("img/baner.jpg");
     min-height: 75%;
 }

 .menu {
     display: none;
 }

 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: "Playfair Display";
     letter-spacing: 5px;
 }

 h1 {
     font-size: min(120px, 23vw);
     font-family: "Inconsolata", sans-serif;
     text-shadow: 0 0 21px black, 0 0 37px black;
 }

 .side-img {
     float: left;
     margin-right: 50px;
     margin-bottom: 200px;
     width: 400px;
     margin-top: 34px;
 }

 .flex-gallery {
     display: flex;
     flex-wrap: wrap;

     padding: 0 4px;
 }

 .flex-gallery>img {
     flex: 25%;
     max-width: 25%;
     padding: 0 4px;
     margin-top: 8px;
     vertical-align: middle;

     object-fit: cover;

 }
  .salon-gallery>img {

     flex: 33.3%;
     max-width: 33.3%;
 }

 div.modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.8);
     z-index: 4;


 }

 div.modal.modal-enabled {
     display: block;
 }


 div.modal img {
     position: absolute;

     top: 0;
     left: 0;
     /* padding: 5em; */
     width: 100vw;
     height: 100vh;
     box-sizing: border-box;
     box-shadow: 0 0 21px black, 0 0 37px black;

     object-fit: contain;


 }

 div.modal>div {
     position: absolute;
     display: flex;
     align-items: center;

     color: white;
     font-size: 5em;
     z-index: 5;

     text-shadow: 0 0 21px black;

     cursor: pointer;
 }

 .prev-image {
     top: 0;
     left: 0;
     width: 2em;
     height: 100vh;
     justify-content: left;
     padding-left: .3em;
 }

 .next-image {
     top: 0;
     right: 0;
     width: 2em;
     height: 100vh;
     justify-content: right;
     padding-right: .3em;
 }

 .exit-image {
     top: 0;
     right: 0;
     width: 1em;
     height: 1em;
     justify-content: center;

 }

 div.modal>div:hover {
     text-shadow: 0 0 21px black, 0 0 37px black;
 }

 /* Responsive layout - makes a two column-layout instead of four columns */
 @media (max-width: 800px) {
     .flex-gallery>img {
         flex: 50%;
         max-width: 50%;
     }
 }

 /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
 @media (max-width: 500px) {
     .flex-gallery>img {
         flex: 100%;
         max-width: 100%;
     }
 }

 table {
     border-spacing: 10px 30px;
     width: 100%;
 }

 td {
     width: auto;
 }

 td:nth-last-child(1) {
     text-align: right;
     width: 65px;
 }

 td:nth-last-child(2) {
     text-align: center;
     width: 100px;
 }

 .action {
     font-size: 1.15em;
     text-align: center;
 }

 @media screen and (max-width: 1000px) {
     .flex {
         flex-direction: column-reverse;
     }

     .side-img {
         float: none;
         margin: auto;
         display: block;
     }
 }