/* Сброс стилей */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Подключение шрифтов */
@font-face {
    font-family: "PT Sans";
	src: url(../fonts/PTSans-Regular.ttf); 
}
/* Убираем подчеркивание со всех ссылок */
a {
    text-decoration: none;
}
/* Делаем цвет ссылок при наведении красным цветов */
a:hover {
    color: rgba(196, 39, 46, 1) !important;
}
/* Глобальные настройки */
body {
    font-family: "PT Sans";
    font-size: 18px;
    background-color: rgba(246, 196, 129, 1);
    /* На ПК фон с паттерном */
    @media (min-width: 901px){
        background-image: url(../img/pattern.svg);
        background-size: 300px;
    }
}
h1 {
    text-align: left;
    color: rgba(122, 147, 29, 1);
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: 100;
    font-size: 30px;
}
/* Максимальная ширина центральной области, все что сбоку будет просто паттерн */
.main-container {
    max-width: 1000px;
    margin: 0 auto;
    /* На ПК фон белый, а на телефонах оранжевый */
    @media (min-width: 901px) {
        background-color: white;
        min-height: 100vh;
    }
}

/* Хеддер */
header {
    display: grid;
    @media (min-width: 901px) {
        /* В ПК делаем 3 колонки, где лого посередине*/
        grid-template-columns: 24% 48% 24%;
        grid-template-rows: 150px;
        column-gap: 1%;
        padding: 10px 0;
    }
    /* На телефоне размещаем все на отдельной строки */
    @media (max-width: 900px) {
        grid-template-columns: 100%;
    }
}
header>.logo {
    /* Лого располагаем по центру */
    text-align: center;
    /* На телефоне перемещаем лого выше */
    @media (max-width: 900px){
        grid-row-start: 1;
    }
}
header>.logo>a>img {
    @media (max-width: 900px){
        /* На телефоне растягиваем лого на всю ширину с отступами в 20px */
        width: 100%;
        padding: 5px 20px;
    }
    @media (min-width: 901px) {
        /* А на ПК растягиваем по высоте */
        height: 150px;
    }
}

/* Блок с контактами, который слева от лого на ПК и снизу от лого на телефоне */
header>.contact-info {
    text-align: center;
    @media (min-width: 901px) {
        padding: 20px 0;
    }
    @media (max-width: 900px) {
        padding: 5px 0;
        grid-row-start: 2;
        background-color: white;
        position: relative;
        margin-bottom: 10px;
    }
}
/* Подбиваем блок слева и от справа от лого по высоте */
header>.contact-info>.contact-info-grid>.contacts>p {
    line-height: 22px;
}
header>.contact-info>.contact-info-grid>.contacts {
    margin-top: 1px;
}

header>.contact-info>.contact-info-grid{
    @media (max-width: 900px){
        display: grid;
        grid-template-columns: 1fr 1fr 100px;
        place-self: center;
    }
}
header>.contact-info>.contact-info-grid>.phones a {
    color: rgba(122, 147, 29, 1);
    @media (max-width: 900px){
        font-size: 15px;
    }
    @media (min-width: 901px){
        font-size: 18px;
    }
}
header>.contact-info>.contact-info-grid>.contacts {
    @media (min-width: 901px){
        margin-top: 12px;
        font-size: 16px;
    }
    @media (max-width: 900px){
        font-size: 18px;
    }
}
header>.contact-info>.contact-info-grid>.contacts p {
    @media (max-width: 900px){
        font-size: 15px;
    }
    @media (min-width: 901px){
        font-size: 18px;
    }
}
header>.contact-info>.contact-info-grid>.contacts a {
    color: black;
}


@media (min-width: 901px){
    header>.additional #booking, header>.additional #vk  {
        display: block;
        width: 230px;
        height: 46px;
        padding: 10px;
        font-size: 22px;
        color: white;
        text-align: center;
        border-radius: 25px;
        line-height: 25px;
    }
    header>.additional #booking-mobile {
        display: none;
    }
    header>.additional #booking {
        background-color: rgba(122, 147, 29, 1);
        margin-top: 27px;
    }
    header>.additional #vk {
        background-color: rgba(122, 147, 29, 1);
        margin-top: 20px;
    }
    header>.additional img {
        display: none;
    }
}
@media (max-width: 900px){
    header>.additional {
        position: relative;
    }
    header>.additional #booking {
        display: none;
    }
    header>.additional img {
        width: 100%;
        padding: 10px 20px;
    }
    header>.additional #vk {
        display: none;
    }
    header>.additional #booking  {
        /* bottom: 10px; */
        text-align: center;
    }
    header>.additional #booking-div {
        position: relative;
    }
    header>.additional #booking-mobile, main #read-history {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 25px;
        font-weight: bold;
        background-color: rgba(224, 78, 24, 1);
        border-radius: 30px;
        padding: 10px 30px;
    }
}


@media (min-width: 901px){
    nav {
        margin: 0 10px;
    }
    nav>ul {
        display: flex;
        list-style-type: none;
        background-color: rgba(224, 78, 24, 1);
        border-radius: 20px;
        width: 100%;
    }
    nav>ul>li {
        padding: 7px 30px;
        position: relative;
    }
    nav>ul>li:nth-last-child(2) {
        width: inherit;
    }
    nav>ul>li:not(:nth-last-child(2)) {
        border-right: 2px white solid;
    }
    nav>ul>li>a {
        color: white;
        text-transform: uppercase;
        font-size: 18px;
    }
    nav>ul>li:hover {
        background-color: rgba(196, 39, 46, 1);
    }
    nav>ul>li:first-child:hover {
        background-color: rgba(196, 39, 46, 1);
        border-radius: 20px 0 0 20px;
    }
    nav>ul>li:nth-last-child(2):hover {
        background-color: rgba(196, 39, 46, 1);
        border-radius: 0 20px 20px 0;
    }
    nav>ul>li>a:hover {
        color: white !important;
    }
    nav>ul>li>ul {
        background-color: rgba(250, 223, 180, 1);
        color: black;
        position: absolute;
        left: 0;
        visibility: hidden;
        opacity: 0;
        z-index: 5;
        width: 250px;
        transition: .1s ease-in-out;
        top: 37px;
        list-style-type: none;
    }
    nav>ul>li>ul>li {
        padding: 10px 20px;
    }
    nav>ul>li>ul>li>a {
        color: black;
    }
    nav>ul>li:hover>ul{
        visibility: visible;
        opacity: 1;
    }
    nav>ul>li:last-child{
        display: none;
    }
}
@media (max-width: 900px){
    nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 90vw;
        background-color: white;
        min-height: 100vh;
        z-index: 1000000;
    }
    #sidenav-open {
        visibility: hidden;
    }
    nav>ul {
        background-image: url(../img/mini-logo.svg);
        background-size: 40px;
        background-repeat: no-repeat;
        background-position-x: center;
        list-style-type: none;
        margin-top: 10px;
        padding-top: 50px;
    }
    nav>ul>li{
        padding: 20px;
    }
    nav>ul>li:first-child{
        display: none;
    }
    nav>ul>li>a {
        font-size: xx-large;
        color: rgba(122, 147, 29, 1);
    }
    nav>ul>li>ul{
        margin-left: 30px;
        padding-top: 10px;
        list-style-type: disc;
    }
    nav>ul>li>ul>li{
        padding: 5px 0;
    }
    nav>ul>li>ul>li>a{
        color: black;
    }
    nav>ul>li:last-child>a{
        color: rgba(224, 78, 24, 1);
    }
    #sidenav-close-button, .back{
        right: 10px;
        top: 45vh;
        background-image: url("../img/triangle.svg");
        width: 40px;
        height: 66px;
        cursor: pointer;
    }
    #sidenav-close-button{
        position: absolute;
    }
    .back{
        position: fixed;
    }
    #sidenav-close-button {
        right: 10px;
    }
    .back{
        left: 10px;
    }
    #sidenav-open-button{
        position: absolute;
        right: 23px;
        top: 8px;
        background-image: url("../img/humburger.svg");
        width: 43px;
        height: 38px;
        cursor: pointer;
    }
    .hide-mobile {
        display: none;
    }
}
main {
    @media (min-width: 901px) {
        padding: 10px;
    }
}

main.cols-4-1_2_1 {
    display: grid;
    @media (max-width: 900px){
        /* grid-template-columns: 1fr; */
    }
    @media (min-width: 901px){
        grid-template-columns: 230px 1fr 230px;
    }
}
main.cols-3-2_1 {
    display: grid;
    @media (max-width: 900px){
        background-color: white;
        /* grid-template-columns: 1fr; */
    }
    @media (min-width: 901px){
        grid-template-columns: 1fr 302px;
    }
}
main.cols-4-1_1_1_1 {
    display: grid;
    @media (max-width: 900px){
        /* grid-template-columns: 1fr; */
        background-color: white;
    }
    @media (min-width: 901px){
        grid-template-columns: 25% 25% 25% 25%;
    }
}
main.cols-2-1_1 {
    display: grid;
    @media (max-width: 900px){
        /* grid-template-columns: 1fr; */
        background-color: white;
    }
    @media (min-width: 901px){
        grid-template-columns: 50% 50%;
    }
}
main.cols-4-3_1 {
    display: grid;
    @media (max-width: 900px){
        /* grid-template-columns: 1fr; */
        background-color: white;
    }
    @media (min-width: 901px){
        grid-template-columns: 1fr 230px;
    }
}

main>.center-section, main>.left-section {
    padding: 10px;
}
main>.center-section h1, main>.left-section h1{
    color: rgba(122, 147, 29, 1);
    font-weight: 100;
    font-size: 22px;
}
main>.center-section h1 {
    text-align: center;
}
main>.left-section h1 {
    text-align: left;
}
main>.center-section p{
    font-size: 18px;
    text-align: justify;
    margin: 10px 0;
}

@media (min-width: 901px) {
    #photo_clinic, .doctors h2 {
        display: none;
    }
}


@media (max-width: 900px){
    #photo_clinic {
        position: relative;
        font-size: 18pt;
    }
    #photo_clinic * {
        padding: 5px 10px;
    }
    #photo_clinic h2, .doctors h2 {
        margin-top: 30px;
        font-size: xx-large;
        color: rgba(122, 147, 29, 1);
        text-transform: uppercase;
        text-align: left;
    }
    #photo_clinic>img {
        width: 100%;
    }
    #history-clinic {
        visibility: hidden;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: white;
        min-height: 100%;
        padding: 20px 20px 20px 60px;
        height: 100%;
        overflow-y: scroll;
    }
}

.doctors {
    text-align: center;
    padding: 10px;
    background-color: white;
    margin: 10px;
}
.doctors img {
    @media (max-width: 900px){
        width: 60%;
    }
    @media (min-width: 901px) {
        width: 100%;
    }
    border-radius: 124px;
}
.doctors .fio {
    font-size: 22px;
}
.doctors .post {
    color: rgba(131, 130, 129, 1);
    font-size: 16px;
}


@media (max-width: 900px){
    .doctor-card {
        position: relative;
    }
    #right-doctor{
        position: absolute;
        right: 20px;
        top: 40%;
        background-image: url("../img/right.svg");
        width: 40px;
        height: 66px;
        cursor: pointer;
    }
    #left-doctor{
        position: absolute;
        left: 20px;
        top: 40%;
        background-image: url("../img/left.svg");
        width: 40px;
        height: 66px;
        cursor: pointer;
    }
    #other-doctor {
        display: none;
    }
}

#price_non_offert {
    @media (max-width: 900px) {
        margin: 10px;
    }
    @media (min-width: 901px) {
        margin: 20px;
    }
}
.attorney, .after-work {
    border-radius: 10px;
    text-align: center;
    padding: 10px;
    @media (max-width: 900px) {
        margin: 30px 10px 0 10px;
    }
    @media (min-width: 901px) {
        margin: 60px 10px 10px 10px;
    }
}
.attorney{
    background-color: rgba(122, 147, 29, 1);
}
.after-work {
    background-color: rgba(224, 78, 24, 1);
}
.attorney>h3 , .after-work>h3{
    color: white;
    font-weight: 100;
}
.attorney p, .after-work p {
    padding: 5px 0;
}
.attorney a{
    background-color: rgba(224, 78, 24, 1);
    color: white;
    padding: 5px 20px;
    border-radius: 20px;
}


.bold{
    font-weight: bold;
}
@media (max-width: 900px) {
    .contacts {
        background-color: white;
    }
    #contacts-timetable {
        grid-row-start: 1;
        position: relative;
    }

    .timetable {
        display: grid;
        margin: 0 20px 0 20px;
        text-align: center;
        position: sticky;
    }
    .timetable .title{
        font-size: 22px;
        font-weight: bold;
        padding: 5px;
    }
    .timetable .after-work-timetable {
        font-size: 18px;
        padding: 10px;
        margin-top: 10px;
        background-color: rgba(224, 78, 24, 1);
    }
    .timetable .after-work-timetable .bold {
        color: white;
    }
    .timetable .contacts {
        grid-row-start: 3;
        padding: 5px 10px 0 10px;
        font-size: 18px;
    }
    .timetable .contacts .bold {
        padding: 0 0 5px 0;
    }
    .timetable .contacts a {
        color: black;
    }
    .timetable .week {
        margin: 0 auto;
        border: 5px rgba(224, 78, 24, 1) solid;
        border-radius: 60px;
        padding: 10px 25px;
        background: white;
    }
    .timetable .days {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 3px 10px;
    }
    .timetable .days .day {
        text-align: right;
        padding-right: 60px;
        text-transform: uppercase;
    }
    .timetable .days .time {
        text-align: right;
    }
    .timetable  .weekend {
        color: rgba(224, 78, 24, 1);
    }
    .background {
        width: 100%;
        height: 20px;
        background: rgba(224, 78, 24, 1);
        position: absolute;
        top: 148px;
    }
}
@media (min-width: 901px) {
    .left-section iframe{
        margin: 10px 0;
    }
    .timetable {
        background-color: rgba(250, 223, 180, 1);
        margin: 43px 20px 0 20px;
        text-align: center;
    }
    .timetable .title{
        background-color: rgba(246, 196, 129, 1);
        font-size: 22px;
        font-weight: bold;
        padding: 5px;
    }
    .timetable .after-work-timetable {
        background-color: rgba(246, 196, 129, 1);
        font-size: 16px;
        padding: 10px;
        margin-top: 10px;
    }
    .timetable .contacts {
        padding: 5px 10px 10px 10px;
        font-size: 16px;
    }
    .timetable .contacts .bold{
        padding: 0 0 5px 0;
    }
    .timetable .contacts a {
        color: black;
    }
    .timetable .days {
        display: grid;
        grid-template-columns: 100px 1fr;
        padding: 3px 10px;
    }
    .timetable .days .day{
        text-align: right;
        padding-right: 30px;
    }
    .timetable .days .time{
        text-align: left;
    }
}

@media (max-width: 900px) {
    .no-doctors {
        display: none;
    }
}

.error-title {
    text-align: center;
    font-size: 72px;
}
.error-content {
    text-align: center;
    font-size: 36px;
}
.error-content a {
    color: black
}

.tb-content {
    padding: 20px;
}

.uppercase {
    text-transform: uppercase;
}

.service {
    padding: 0 10px;
    display: grid;
    grid-template-columns: 1fr 150px;
}
.service .price {
    color: rgba(224, 78, 24, 1);
}

.faqs {
    margin: 0 15px;
}
.faqs summary {
    list-style: inside;
    cursor: pointer;
    margin: 5px 0;
}

.faqs summary::marker {
    color: rgba(122, 147, 29, 1);
}

.faqs details[open] > summary, .faqs details[open] > summary::marker{
    color: rgba(224, 78, 24, 1);
}
.faqs details .content {
    border: 2px rgba(224, 78, 24, 1) solid;
    padding: 10px;
}

.send-faq{
    text-align: center;
}
.send-faq a {
    color: black;
}


footer{
    padding: 20px;
    margin-top: 20px;
    @media (min-width: 901px) {
        border-top: 2px rgba(224, 78, 24, 1) solid;
    }
}


.container li, .faqs li {
    margin-left: 20px;
}