* {
    margin: 0;
    padding: 0;
    font-family: "Klein-Regular";
}

@font-face {
    font-family: 'Klein-Bold';
    src: url('/assets/Fonts/Klein-Bold.otf');
    font-weight: normal;
    font-style: normal;
    font-display: swap; 
}

@font-face {
    font-family: 'Natural Mono';
    src: url('/assets/Fonts/Natural Mono.otf');
    font-weight: normal;
    font-style: normal;
    font-display: swap; 
}

@font-face {
    font-family: 'Klein-Regular';
    src: url('/assets/Fonts/Klein-Regular.otf');
    font-weight: normal;
    font-style: normal;
    font-display: swap; 
}

h1, h2, h3, a, button {
    font-family: "Klein-Bold";
}


a, input, select, option, p {
    text-decoration: none;
    font-size: 20px;
}

a {
    font-family: 'Natural Mono';
    color: #2e7d3c;;
}

image{
    border: none;
}

span, ul, li {
    font-size: 18px;
}

tr, td {
    width: 15%;
    border: 1px solid #349045;
    font-size: 18px;
}

table{
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #349045;
}

td {
    padding: 1%;
}

textarea {
    padding: 1%;
    font-size: 16px;
}

.error{
    color: #5e241a;
    font-size: 20px;
    font-weight: 600;
}

/* шапка сайта */

.header {
    width: 80%;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;  
    font-family: "Klein-Bold";
    height: 10%;
}

.header_buttons{
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 80%;
}

.logo {
    display: flex;
    position:relative;
    margin: 1% auto auto auto;
    justify-content: center;
    z-index: 5;
    cursor: pointer;
    width: 20%;
    height: 100%;
}

@media screen and (max-width: 900px) {
    .header_buttons {
        margin-bottom: 0px;
        margin: 1% 0;
        width: 100%;
    }
}

.header_button, .header_button_appointment {
    background-color: white;
    color: #266933;
    font-size: 22px;
    width: 8em;
    height: 7em;
    border: none;
    border-right: 1.5px solid #349045;
    border-left: 1.5px solid #349045;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    font-family: "Natural Mono";
}


.header_button_appointment{
    background-color: #349045;
    width: 10em;
    text-align: center;
}

@media screen and (max-width: 500px) {
    .header{
        flex-wrap: wrap;
    }
    }
    
@media screen and (max-width: 800px) {
    .header, .services {
        width: 100%;
        margin: auto;
        display: flex;
        justify-content: center;
        flex-direction: row;
    }

    .header_button{
        width: 6em;
    }
    }

.header_button:hover{
    background-color: rgba(52, 144, 69, 0.112);
    transition: 1s;
}

.active-page {
    background-color: rgba(52, 144, 69, 0.112);
    transition: 1s;
}

@media screen and (max-width: 700px) {
    .logo {
    visibility: hidden;
    display: none;
    }
    }

/* тело сайта */

h2 {
    color: #349045;
}

.container{
    width: 100%;
    margin: 0.1% auto;
}


/* главная страница */

.main_promo {
    height: auto;
    margin: 0%;
    width: 100%;
    display: flex;
    position: relative;
    justify-content: center;
    z-index: 1;
}

.main, .about_clinic_first_div, .about_clinic_second_div, .about_clinic_third_div {
    margin: 1% auto;
    padding: 1%;
    width: 80%;
    display: flex;
    flex-direction: column;
}

.main {
    justify-content: center;
    align-items: center;
}

.about_clinic_first_div .about_clinic_second_div, .about_clinic_third_div{
    justify-content:space-between;
    text-align: justify;
}

.main_table{
        table-layout: fixed;
        width: 100%;
}
@media screen and (max-width: 1100px) {
    .main{
        width: 95%;
        font-size: 14px;
    }
    }


.td_main_table{
    width: 2%;
    vertical-align: top;
    text-align: center;
}

.img_main{
    margin: 1%;
    width: 30%;
}

.img_main_2{
    width: 95%;
}

@media screen and (max-width: 700px) {
    .img_main{
        width: 95%;
    }
}

.main_second_div{
    display:flex; 
    flex-direction:row;
    width:100%;
    justify-content:space-around;
    align-items: center;
}

.main_third_div{
    display:flex; 
    flex-direction:row;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    width:100%;
    margin: 1%;
    padding: 1%;
}

.main_third_div img{
    margin: 1%;
    width: 35%;
}

.main_fourth_div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 1000px) {
    h3{
        font-size: 16px;
    }
    p, td{
        font-size: 15px;
    }
    }

@media screen and (max-width: 860px) {
        .main_second_div{    
            display:flex; 
            flex-direction:column;
        }
        }
@media screen and (max-width: 750px) {
    .main_third_div{    
        display:flex; 
        flex-direction:column;
    }
    }
    

/* авторизция, регистрация, страница комментариев, страница записи на прием */

.forms {
    width: 70%;
    display: flex;
    flex-direction: column;
    margin: 10% auto 5%;
}


.forms_submit, .admin_button, .page_buttons{
    width: 10em;
    height: 2em;
    margin: 1% 0;
    padding: 1%;
    font-size: 16px;
    background-color: #349045;
    color: white;
    border-radius: 25px;
    border: 3px solid #349045;
    display: flex;
    justify-content: center;
    align-items: center;
}

.admin_button{
    margin: 1%;
}


.forms_submit:hover{
    background-color: #349045;
    color: white;
    border: 3px solid #349045;
}

@media screen and (max-width: 600px) {
    .forms_submit {
        width: 50%;
    }
    }

.forms_input{
    width: 30%;
    height: 3em;
}

@media screen and (max-width: 800px) {
    .forms_input {
        width: 100%;
    }
    }


@font-face{
    font-family: "Caviar_Dreams";
    src: url(../Fonts/Caviar_Dreams.ttf);
}

/* подвал сайта */

.footer {
    background-color: #1e5428;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: 14em;
    margin: 10% 0 0 0;
}

.footer_text {
    display: flex;
    justify-content:space-between;
    margin: 2% 10% 2% 5%;
    flex-direction: column;
    padding: 1%;
    line-height: 1.5;
}

.footer_text p{
    font-size: 16px;
}

.footer_map{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1% 0 0;
}

/* admin */

.admin{
    display: flex;
    width: 70%;
    flex-direction: column;
    margin: 10% auto 1%;
}

@media screen and (max-width: 800px) {
    .admin {
        width: 100%;
        font-size: 15px;
    }
    }


.admin_buttons{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


.admin_button{
    background-color: #349045;
    color: white;
    border: 3px solid #349045;
    width: 10em;
}

.services_category_admin{
    display: flex;
    justify-content: center;
    margin: 1%;
    flex-wrap: wrap;
}


.admin_appointments{
    display: flex;
    flex-direction: column;
    margin: 10% auto 1%;
    width: 90%;
    font-size: 18px;
}

.admin_table_app{
    width: 100%;
    font-size: 10px;
}

.change_staff_img_container{
    width: 20em;
}

.change_staff_img{
    width: 100%;
}


/* страница услуг */
.services{
    display: flex;
    flex-direction: row;
    margin: auto;
    width: 80%;
    justify-content: center;
}

.services_category, .services_container {
    display: flex;
    flex-direction: column;
    margin: 1%;
    padding: 1%;
    align-items: center;
}

.services_category {
    width: 30%;
    text-align: center;
}

.services_container{
    width: 70%;
}

.services_category_button{
    padding: 4%;
    font-size: 23px;
    /* font-weight: 700; */
    transition: 0.5s;
    color: #2e7d3c;
}

.services_category_button:hover{
    text-decoration: underline;
    transform: scale(1.2); 
}


.services_table{
    width: 100%;
}

.services_td{
    width: 50%;
}

@media screen and (max-width: 650px) {
    .services {
        width: 100%;
        flex-direction: column;
        justify-content: center;
    }
    .services_category{
        width: 100%;
    }
    .services_container{
        width: 95%;
    }
    }


/* страница новостей */

.news, .one_page_new {
    margin-top: 2%;
    display: flex;
    flex-direction: column;
    margin: auto;
    width: 80%;
}

.one_page_new {
    margin-top: 2%;
}

.news_container{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.one_new{
    padding: 1%;
    transition: 0.2s;
    width: 40%;
    margin: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 10vh;
    font-size: 22px;
    color: #2e7d3c;
    box-shadow: 5px 5px 10px #349045;
}

.one_new:hover{
    transform: translateY(-10px);
}

@media screen and (max-width: 650px) {
    .news_container{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .one_new{
        width: 80%;
    }
}

@media screen and (max-width: 1200px) {
    .one_new{
        font-size: 20px;
    }
}

/* личный кабинет */

.personal_area {
    display: flex;
    flex-direction: column;
    margin: 10% auto 1%;
    width: 80%;
}

/* страница персонала */

.staff_page{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 1% auto 1%;
    width: 95%;
    justify-content: center;
}

.staff_container {
    display: flex;
    flex-direction: column;
    margin: 1% 3%;
    padding: 1%;
    width: 30%;
}

.staff_img{
    width: 80%;
    transition: 1s; /* Время эффекта */
    border: none;
}

.staff_img:hover{
    transform: scale(1.2); 
}

@media screen and (max-width: 800px) {
    .staff_container {
        width: 90%;
    }
    }

/* попап */

.popup__bg {
    position: fixed;
    top: 100;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    visibility: hidden;
    pointer-events: none; 
    transition: 0.5s all;
	z-index: 21;
}

.popup__bg.active { 
    visibility: visible;
    pointer-events: all; 
    transition: 0.5s all;
}

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); 
    background: #fff;
    width: 400px;
    padding: 25px;
    transition: 0.5s all;
}

.popup.active { 
    transform: translate(-50%, -50%) scale(1); 
    transition: 0.5s all;
}

.popup label {
    width: 100%;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column-reverse;
}

.popup .label__text {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    color: #787879;
    margin-bottom: 5px;
}

.popup input {
    height: 45px;
    font-size: 18px;
    border: none;
    outline: none;
    border-bottom: 1px solid #787879;
}

.popup input:focus {
    border-bottom: 1px solid #247233;
}

.popup input:focus + .label__text {
    color: #349045;
}

.popup textarea {
    resize: none;
    width: 100%;
    height: 150px;
    border: none;
    outline: none;
    border-bottom: 1px solid #787879;
    font-size: 18px;
    padding-top: 5px;
}

.popup textarea:focus {
    border-bottom: 1px solid #247233;
}

.popup textarea:focus + .label__text {
    color: #349045;
}

.popup_submit {
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    border: 2px solid #349045;
    background: #349045;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.7s;
}

.popup_submit:hover {
    background: #fff;
    color:#349045;
    transition: 0.5s all;
}

.cl-btn-6 {
    position: relative;
    width: 40px;
    cursor: pointer;
    left: 80%;
    margin-bottom: -10px;
}
.cl-btn-6-in {
    width: inherit;
    text-align: center;
}
.cl-btn-6-txt { 
    font-size: 8px; 
    line-height: 30px;
    font-weight: bold;
    text-transform: uppercase;
    color: #349045;
    transition: all .3s ease-in;
    opacity: 0;
    cursor: pointer;
    font-family: Verdana;
}
.cl-btn-6-in:before, .cl-btn-6-in:after {
    position: absolute;
    content: '';
    height: 4px;
    width: inherit;
    background: #349045;
    left: 0;
    transition: all .3s ease-in;
}
.cl-btn-6-in:before {
    top: calc(50% - 4px); 
    transform: rotate(45deg);  
}
.cl-btn-6-in:after {  
    bottom: 50%;
    transform: rotate(-45deg);  
}
.cl-btn-6:hover .cl-btn-6-txt {
    opacity: 1;
}
.cl-btn-6:hover .cl-btn-6-in:before,
.cl-btn-6:hover .cl-btn-6-in:after {
    transform: rotate(0);
}
.cl-btn-6:hover .cl-btn-6-in:before {
    top: 0;
}
.cl-btn-6:hover .cl-btn-6-in:after {
    bottom: 0;
}

.messages{
    color: #b30c0c;
    margin-bottom: 1em;
    font-size: 20px;
}