* {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    text-decoration: none;
}
button, button:active, button:focus {
    outline: none;
}
body {
    display: grid;
    grid-template-areas:
        "header_left header header_right"
        "left_navi center_navi right_navi"
        "left_field main right_field"
        "footer_left footer footer_right";
    grid-template-rows: 120px 40px 1fr 100px;
    grid-template-columns: 1fr 1100px 1fr;
    grid-row-gap: 0px;
    min-height: 100vh;
}
#header {
    grid-area: header;
    display: flex;
    justify-content: end;
    align-items: center;
}
#header_left{
    grid-area: header_left;
}
#header_right{
    grid-area: header_right;
}
#logo {
    position: relative;
    height: 100px;
    width: 180px;
    margin-right: auto;
    margin-left: 10px;
    background-image: url(images/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}
#logo a {
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    text-decoration: none;  
    z-index: 1;
}
#footer_right {
    grid-area: footer_right;
    background: gray;
}
#footer_left {
    grid-area: footer_left;
    background: gray;
}
#footer {
    grid-area: footer;
    background: gray;
    color: white;
    display: flex;    
}
#footer a {
    color: white;
    font-family: 'Oswald';
}
#footer a:hover {
    color: #d9b36c;
}
#footer .container_social span {
    font-family: 'Oswald';
}
.container_social {
    margin: 0 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.about {
    margin: 0 30px;
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.glass {
    margin: 0 30px;
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
#footer p {
    color: #d9b36c;
    font-family: 'Oswald';
}
.social_media {
    display: flex;
    align-items: center;
    margin-top: 8px;
}
@keyframes big {
from {width: 32px;}
to {width: 40px; margin-top: -8px; margin-right: -8px;}
}
.social {
    width: 32px;
}
.social:hover {
    animation: big .3s forwards;
}
.autor {
    margin-left: auto;
    padding-top: 60px;
}
.salon_contact {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    padding: 0 10px;
    font-size: 0.8rem;
    border-radius: 7px;
    margin: 0 5px;
    background: rgba(255, 255, 255, 0.8);
    height: auto;
}
.border {
    height: 60%;
    border-right: solid #7f64f5 1px;
}
.salon_contact p:first-child {
    font-weight: 800;
}
.salon_contact p {
font-size: 0.9rem;
}

#nav {
    grid-area: center_navi;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #627af5;
}
#left_navi {
    grid-area: left_navi;
    background: linear-gradient(to left, #627af5 0%, #fff 95%);
}
#right_navi {
    grid-area: right_navi;
    background: linear-gradient(to right, #627af5 0%, #fff 95%);
}
nav ul li {
padding:0;
margin:0;
list-style: none;
position: relative;
flex-grow: 1;
text-align: center;
}
nav ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 40px;
text-decoration:none;
font-family: 'Lobster';
}
nav a:not([class="selected"]):hover {
    background: #6faaf4;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
list-style: none;
background: #627af5;
z-index: 10;
}
nav ul li:hover > ul {
display:inherit;
}
nav ul ul li {
min-width:170px;
float:none;
display:list-item;
position: relative;
background-color: #627af5;
}
.open {
    display: none;
}
.selected {
    font-size: 1.5rem;
    background: #984aff;
}



#main {
    grid-area: main;
    margin-top: 20px;
}
.date_link {
    float: left;
    display: flex;
    margin: 20px auto;
}
#buttons {
    float: right;
    margin: 20px 60px;
}
.button {
    padding: 3px;
    border-radius: 5px;
    outline: none;
}
.push {
    background: #984aff;
    color: #fff;
}
.current_date {
    font-size: 1.3em;
    padding: 0 20px;
    background: #984aff;
    margin-right: 5px;
    color: #fff;
}
table {
    border-spacing: 0;
    text-align: center;
}
.staff td {
    padding: 3px 5px;
}
tr {
    height: 30px;
}
td {
    border: 1px solid gray;
    min-width: 28px;
}
td:first-child {
    width: 140px;
}

tr:first-child {
    background: #DFDFDF;
}
.fired input, .fired {
    background: rgb(91%, 90%, 100%, 1);;
}
.weekend {
    background: #FFCEDB;
}
.back, .further {
    margin-right: 5px;
    padding: 3px;
    text-decoration: none;
    display: inline-block;
    color: #000;
    background: #ededed;
    border: 1px solid gray;
}
.fired {
    display: none;
}
.hidden {
    display: none;
}
#information {
    margin-top: 20px;
    margin-left: 20px;
}
.adress {
    display: inline-block;
    margin-bottom: 5px;
    padding: 4px;
    border: 1px solid gray;
}
.bright {
    display: inline-block;
    background: #e6e1b8;
    padding: 2px 5px;
}
#call_block {
    grid-area: main;
}
#call_form {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.call_content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 50%; /* Could be more or less, depending on screen size */
}
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.container {
    padding: 26px;
}
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}
.avatar {
    width: 200px;
}
.call_msg {
    text-align: center;
    padding: 20px 30px 10px 30px;
}
button[type=submit] {
    background-color: #415FF5;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}
button.call_button {
    height: 170px;
    display: block;
    width: 170px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    margin-left: auto;
    margin-right: 10%;
    margin-bottom: 10%;
    margin-top: -90px;
    background: #415FF5;
    border: 2px solid #415FF5;
    color: #fff;
    font-size: 1.0rem;
    padding: 10px;
    animation: float 2s infinite;
}
@keyframes float {
    from {transform: scale(0.9)}
    50% {transform: scale(1)}
    to {transform: scale(0.9)}
}
.animate {
    animation: animatezoom 0.6s;
}
@keyframes animatezoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}
button.call_button:hover {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #415FF5;
    animation: none;
}
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}
#flash_successfully {
    position: fixed;
    top: 40%;
    left: 40%;
    z-index: 1;
    width: auto; /* Full width */
    height: auto; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #04B404; /* Fallback color */
    border-radius: 5px;
    padding: 20px 60px;
    color: #fff;
    font-size: 1.3rem;
}
#flash_fail {
    position: fixed;
    top: 40%;
    left: 30%;
    z-index: 1;
    width: auto; /* Full width */
    height: auto; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #B40404; /* Fallback color */
    border-radius: 5px;
    padding: 30px 70px;
    color: #fff;
    font-size: 1.5rem;
}
.ok {
    background-color: #c00707;
}
@media all and (max-width: 1000px) {
body {
    display: grid;
    grid-template-areas:
        "header"
        "center_navi"
        "main"
        "footer";
    grid-template-rows: 150px 100px 1fr 100px;
    grid-template-columns: 1fr;
    grid-row-gap: 0px;
    min-height: 100vh;
}
.salon_contact p {
    font-size: 1.0rem;
    font-weight: 600;
}
#logo {
    height: 150px;
}
#nav {
    grid-area: center_navi;
    position: relative;
    justify-content: center;
    align-items: center;
    background: #627af5;
}
#left_navi {
    grid-area: left_navi;
    background: linear-gradient(to left, #627af5 0%, #fff 95%);
}
#right_navi {
    grid-area: right_navi;
    background: linear-gradient(to right, #627af5 0%, #fff 95%);
}
nav ul {
    width: 100%;
    position: absolute;
    z-index: 11;
    top: 100%;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: #627af5;
}
#nav:hover .first{
    display: block;
}
nav ul li {
padding:0;
margin:0;
list-style: none;
width: 100%;
flex-grow: 1;
text-align: center;
}
nav a {
display:block;
padding:25px 10px;
color:#FFF;
font-size:40px;
line-height: 40px;
text-decoration:none;
font-family: 'Lobster';
}
nav a:not([class="selected"]):hover {
    background: #6faaf4;
}
nav ul ul.submenu {
    display: inline-block;
    position: relative;
}
.open {
    display: block;
    width: 100%;
    cursor: pointer;
    text-align: center;
}
.selected {
    font-size: 45px;
    background: #984aff;
}
.call_content {
    width: 80%; /* Could be more or less, depending on screen size */
}
.call_msg {
    font-size: 1.3rem;
}
button.call_button {
    margin-right: auto;
    margin-top: 80px;
}
}