@import "./reset.css";
/* Основной контейнер слайдера */
        .slider {
            width: 100%; /* Занимает всю доступную ширину */
            max-width: auto; /* Ограничиваем максимальную ширину */
            overflow: hidden; /* Скрываем выходящие за границы элементы */
            position: relative; /* Позволяет позиционировать кнопки поверх */
            margin: auto; /* Центрируем слайдер на странице */
            text-align: center; /* Центрируем подписи под слайдами */
            display: inline-block;
        }

        /* Контейнер, который содержит все слайды */
        .slides {
            display: flex; /* Располагаем слайды в одну линию */
            transition: transform 0.5s ease-in-out; /* Плавное перелистывание */
        }

        /* Каждый отдельный слайд */
        .slide {
            flex-shrink: 0; /* Запрещаем уменьшение слайдов */
            width: 100%; /* Каждый слайд занимает всю ширину контейнера */
            position: relative; /* Для позиционирования подписей */
        }

        /* Изображения слайдов */
        .slide img {
            width: 100%; /* Картинка заполняет всю ширину контейнера */
            height: auto; /* Сохраняет пропорции */
            display: inline; /* Убираем отступы снизу */
            margin-bottom:20px;

        }

        /* Подписи к слайдам */
        .caption {
            position: absolute; /* Размещаем поверх изображения */
            bottom: 50%; /* Отступ от нижнего края */
            left: 20%; /* Центрируем по горизонтали */
            transform: translateX(-50%); /* Корректируем смещение влево на 50% ширины */
            background: rgba(0, 0, 0, 0.6); /* Полупрозрачный черный фон */
            color: white; /* Белый текст */
            padding: 5px 10px; /* Отступы */
            font-size: 14px; /* Размер шрифта */
            border-radius: 10px; /* Скругляем углы */
        }
        .cap1{
            left: 80%; /* Центрируем по горизонтали */
            bottom: 25%; /* Отступ от нижнего края */
        }
        .cap2{
            left: 50%; /* Центрируем по горизонтали */
            bottom: 40%; /* Отступ от нижнего края */
        }

        /* Кнопки "Назад" и "Вперед" */
        .prev, .next {
            position: absolute; /* Размещаем поверх слайдов */
            top: 50%; /* Выравниваем по вертикали */
            transform: translateY(-50%); /* Смещаем вверх для точного центрирования */
            background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
            color: white; /* Белый текст */
            border: none; /* Без границ */
            padding: 10px; /* Внутренние отступы */
            cursor: pointer; /* Курсор в виде указателя */
            font-size: 18px; /* Увеличиваем размер текста */
            font-weight: bold; /* Делаем текст жирным */
            z-index: 2; /* Размещаем поверх всех элементов */
        }

        /* Позиционируем кнопку "Назад" слева */
        .prev {
            left: 10px;
        }

        /* Позиционируем кнопку "Вперед" справа */
        .next {
            right: 10px;
        }

        /* Адаптивные стили для мобильных устройств */
        @media (max-width: 480px) {
            .slider {
                max-width: 100%; /* Растягиваем слайдер на всю ширину экрана */
            }

            .prev, .next {
                padding: 5px; /* Уменьшаем размер кнопок */
                font-size: 14px; /* Делаем шрифт поменьше */
            }

            .caption {
                font-size: 12px; /* Уменьшаем текст подписи */
                padding: 3px 6px; /* Уменьшаем отступы */
            }
        }

        .logo {
    position: relative;
    padding: 35px 0px 10px 45px;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
    color: #000;
}

.logo::after {
    position: absolute;
    display: grid;
    left: 4px;
    bottom: 3px;
    align-items: center;
    content: "";
    width: 200px;
    height: 47px;
    background-image: url(../pic/Oren.png);
    background-size: cover;
    /* border-radius: 50%; */
}
.header-content{
    display: flex;
    /*height: 100px;*/
    justify-content: center;
    margin-bottom: 10px;
}
/*.header-center{
    display: flex;
}*/
.header-left{
    flex-grow: 1;
    background: linear-gradient(to left,  rgb(117, 129, 251) 0%, rgba(0, 0, 0, 0) 100%);
}

.header-right{
    flex-grow: 1;
    background: linear-gradient(to right, rgb(117, 129, 251) 0%, rgba(0, 0, 0, 0) 100%);
}
.header-nav {
    display:flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 45px; */
    /* background-color: #6ebafa; */
    /* padding: 8px 8px 0px 0px; */
    padding: 16px 8px 8px 10px;
    border-radius: 6px 6px 0 0;
    position: relative;
    /* max-width: 1230px; */
}

.header-static{
    background-color: #F1F1F1;
    position: sticky;
    top: 0px;
    /*max-width: 1930px;*/
    padding: 0px 5px 0px 30px;
    /* margin: 0 auto; */
    z-index: 3;
}

.nav-url{
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
    /*margin-bottom: 3px;*/
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #7581fb;
    padding-bottom: 10px;
}

.nav-url ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.nav-url li{
    display: inline-block;
    /*border-bottom: 1px solid #fff;*/
    margin-right: 20px;
    position: relative;
}

.nav-url li:after {
    content: '➔';
    font-family: icon2;
    position: absolute;
    top: 1px;
    right: -17px;
    font-size: 10px;
}

.nav-url li:last-child::after {
    content: ""; /* или content: none; */
    display: none; /* скрывает элемент */
}

hr {
  border: none;
  background-color: #333;
  height: 2px; 
  width: 80%; 
  margin: 0px auto; 
}

body {
    min-width: 400px;
    color: #000;
    font-family: Verdana, sans-serif;
    font-size: 14px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), 
                        url('/penetron/pic/1_5.jpg');
    background-repeat: repeat; 
    min-height: 100vh;
}

.about{
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    max-width: 1600px;
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.5);
}




/* Nav */

.nav{
    padding-right: 15px;
}

.nav-list {
    display: flex;
    column-gap: 25px;
    font-weight: 500;
    font-size: 20px;
    
}

.nav-button {
    display: none;
    top: 22px;
}

.nav-link {
    color: #000;
    transition: all 0.1s ease; /* Плавное изменение */
}

.nav-link:hover {
    color: #f7a82d; /* Смена цвета */
    transition: all 0.3s ease; /* Плавное изменение */
    font-weight: bold; /* Жирный шрифт */
    text-decoration: underline;
}

.link {
    color: #000;
    transition: all 0.1s ease; /* Плавное изменение */
}

.caption__tit {
    padding: 20px 30px 20px 30px;
    font-weight: 700;
    font-size: 25px;
    line-height: 1;
    color: #f7a82d;
    text-decoration: underline;
}

.caption__disc {
    padding: 0px 30px 20px 30px;
    font-size: 20px;
    line-height: 1;
    color: #ffffff;
}
.title-1 {
    position: relative;
    font-size: clamp(15px, 5vw, 40px);
    font-weight: 600;
    /*background: linear-gradient(to top, #949bff 0%, transparent 100%);*/
    border-radius: 5px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    padding: 10px 0 10px 0 ;
}

.opa1{
    opacity: 0.7;
}


/* Service */

.services {
    padding: 10px;
    display: flex;
  justify-content: center;
}

.services-row,
.About-row.grid {
    display: flex;
    column-gap: 30px;
    row-gap: 60px;
    flex-wrap: wrap;
    padding: 30px 0 0 44px;
    justify-content: center;
    /*margin-left: 30px;
    margin-right: 30px;*/
    
}
.About-row.grid {
    flex-wrap: wrap;
}
.About-row.grid img {
    width: 150px;
}
.service-card{
    flex: 1 1 0;
    min-width: 315px;
    box-shadow: 0 0 15px rgba(0,0,0,.5);
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
    position: relative;
    max-width: 400px;
    margin: auto;
}

.teh{
    height: 100%;
    margin: 0;
        box-shadow: none;
}

.var1{
    border-bottom-style: inset;
    box-shadow: none;
}

.var1 img{
    box-shadow: 0 0 15px rgba(0,0,0,.5);
}
.service-card-img:hover + .label{
    box-shadow: none;
    transform: translateY(4px); /* Смещение вниз на 2px при нажатии */
    color: #000;
    opacity: 1;
}

.service-card-img:hover{
    box-shadow: none;
    transform: translateY(4px); /* Смещение вниз на 2px при нажатии */
    opacity: 1;
    filter: none;
}
.service-card:hover{
    /*box-shadow: 0px 10px 20px rgba(56, 0, 255, 0.3);*/
  box-shadow: none;
  border-radius: 5px;
  transform: translateY(4px); /* Смещение вниз на 2px при нажатии */
}

.service-card h2{
    text-transform:uppercase;
} 
.label{
    display: inline-block;
    position: absolute;
    top: 15px;
    right: 7px;
    background-color: #f7a82d;
    font-size: 22px;
    padding: 2px 10px;
    font-family: Oswaldregular;
    border-radius: 5px;
}

.About-card{
    flex: 1 1 0;
    min-width: 250px;
    text-align: center;
}
.About-card.cer{
    display: flex;
    flex-direction: column;
    align-items: center;
  justify-content: center;
}
.service-card-img {
    margin-bottom: 20px;
    border-radius: 10px;
    border-bottom: 1px solid #e3e4e6;
    opacity: 0.8;
    filter: saturate(40%);

}

.service-card-title,
.About-card-title {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 24px;
    text-transform: uppercase;
    color: #000;
    padding-left: 5px;
    padding-right: 5px;
}

.tech{
    font-size: 18px;

}

.type{
    text-transform: none;
    font-weight:10;
    text-align: center;
}

.about-text{
    text-transform: none;
    font-weight:10;
}

.service-card p,
.About-card p {
    line-height: 2;
}

.About-row h2 {
    margin: 26px 0;
    text-align: center;
}
.About-title h2,
.services-title h2 {
    margin-top: 30px;
}

.services-title,
.product-title{
    width: 99%;
}

.pdf{
  padding: 15px;
  background-color: white;
  width: 100%;
  text-align: center;
  border-radius: 8px;
  opacity: 0.8;
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.2);
  background: radial-gradient(circle, rgb(255, 255, 255) 50%, rgba(255, 0, 0, 0) 90%);
  font-size: medium;
}

.pdf:hover{
  background-color: white;
  opacity: 1;
  box-shadow: none;
  transform: translateY(4px); 
    color: #f7a82d;
    font-weight: bold;
}

.btn{
  /*position: absolute;*/
  font-size: 30px;
  font-weight: 600;
  background: #f7a82d ;
  border-radius: 5px;
  text-align: center;
  padding: 10px 10px 15px 10px;
  margin: 20px 0px 20px 0;
  box-shadow: 0 0 15px rgba(0,0,0,.5);
  opacity: 0.5;
}

.btn:hover{
  box-shadow: none;
  cursor: pointer;
  opacity: 1;
}

.btn:active{
  box-shadow: none;
  transform: translateY(4px); 
}

.container {
  justify-content: center;
  display: grid;
  place-items: center;
  max-width: 1500px;
}

.row-product{
    display: flex;
    justify-content: left;
}

.left-bloc{
    box-shadow: #333;
    border-radius: 6px;
    height: 100%;
}

.right-bloc{
  margin: 10px;
  background-color: rgba(0, 0, 0, 0.2); 
  /*width: 100%;*/
  height: 100%;
  padding: 20px 0px 0px 15px;
  border-radius: 6px;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.5);
}

.wrap {
  width: max-content;
  text-align: left;
  font-size: large;
  font: titling-caps;
  font-family: Oswaldregular;
  background-color: #00487c;
  border-radius: 6px;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.5);
  margin-right: 10px;
  display: block;
}

.item-center{
    text-align: center;
}

.wrap a{
    display: block;
    padding: 10px 25px;
    color: #fff
}
.wrap ul li{
    background-color: #00487c;
    transition: background-color 0.2s linear;
}

.wrap ul li:hover{
    background-color:#6584c0;
}

.image-cont{
    width: 50%;
    box-shadow: 10px 10px 10px 3px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
}

.image-cont{
    width: 50%;
    box-shadow: 10px 10px 10px 3px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    min-width: 350px;
}
.image-product img{
    border-radius: 6px 6px 0 0;
    width: 100%;
}

.plus{
  text-align: center;
  font-size: large;

}

.plus p{
  font-style: bold;
  background-color: steelblue;
  padding: 10px 0 10px 0;
  border-radius: 0 0 6px 6px;
}

.price{
    font-size: 50px;
    line-height: 1.2;
    margin-bottom: 50px;
    font-weight: bold;
    text-align: center;
    background-color: #f7a82d;
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.5);
    border-radius: 6px;

}

.price-cont{
    font-family: Oswaldregular;
    min-width: 350px;
}

.items{
  row-gap: 60px;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 24px;
}

/*.radio-group{
    display: flex;
    justify-content: space-between;
    position: relative;
    line-height: 1.2;
    margin-bottom: 14px;
    font-size: 18px;
}*/

.price-item{
  display: flex;
  justify-content: space-between;
  position: relative;
  line-height: 1.2;
  margin-bottom: 14px;
  font-size: 20px;
  background-color: steelblue;
  padding: 5px 10px 5px 5px;
  border-radius: 5px;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.price-group .activ{
background-color: rgb(247, 168, 45);
  border-color: black;
  border-width: 2px;
  border-style: solid;
  cursor: context-menu;
}

.price-item .left {
    /*background-color: #fff;*/
    padding-right: 10px;
}

.price-item .right{
    /*color: #878887;
    background-color: #fff;*/
    padding-left: 10px;
}

.price-item:after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    border-bottom: 1px dotted #878887;
    z-index: -1;
}


input[type=radio]{
    box-sizing: border-box;
    padding: 0;
}

body input, body textarea {
    border: #666 1px solid;
}

input {
    overflow: visible;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.radio {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 10px 0 0 7px;
}

/*.radio+label{
    display: inline-block;
    margin-bottom: .5rem;
    position: relative;
    padding: 0 0 0 25px;
    cursor: pointer;
}*/

.left span{
    display: inline-block;
    margin-bottom: .5rem;
    position: relative;
    padding: 0 0 0 25px;
}

.tabs-bloc{
    margin-top: 100px;
    margin-bottom: 50px;
    margin-right: 15px;
}

#tab-content p{
    margin: 10px;
}

.tabs-bloc .tabs {
    display: flex;
    border-bottom: 2px solid #e3e4e6;
}

.tabs-bloc .tab_item {
    padding: 50px 0;
    background-color: aliceblue;
    font-size: calc(7px + 10 * (100vw / 1280));
    font-family: Oswaldregular;
    text-align: center;
}
.tabs-bloc .tabs .tab {
    font-size: calc(7px + 10 * (100vw / 1280));
    font-family: Oswaldregular;
    flex-basis: 100%;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3.8px;
    color: #000;
    transition: all .3s;
    border-bottom: 2px solid transparent;
    padding: 10px 0 20px;
    cursor: pointer;
    border-radius: 10px 10px 0 0;
    background-color: aliceblue;
}

.tabs-bloc .tabs .tab.active {
    border-bottom: 2px solid #f7a82d;
    color: #000;
    background-color: #f7a82d;
    border-radius: 10px 10px 0 0;
    font-weight: bold;
}

.tabs-bloc .tabs .tab:hover {
    color: #000;
}

.product-page .tabs-block .tab_item {
    padding: 50px 0;
}

/*.wrap ul{
    background-color: #00487c;
}
.wrap li{
    margin: 15px 0 15px 0;
}*/

.btn-menu-mobile{
    display: none;
    border-bottom: 2px dotted black;
}

hr {
  border: none;
  background-color: #333; /* Цвет полосы */
  height: 2px; /* Толщина полосы */
  width: 90%; /* Ширина */
  /*margin: 0px auto; /* Центрирование */
  opacity: 0.1;
}

/* классы для контейнера почему пенетрон*/
.container-why,
.container-tech{
    display: flex;
    gap: 30px;
    /*margin-left: 70px;*/
    flex-wrap: wrap;
    /*margin-right: 45px;*/
    margin-bottom: 15px;
    width: 100%;
}
.container-why{
    padding-left: 60px;
    padding-right: 5px;
}

.container-sert{
    display: grid;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 15px;
    width: 100%;   
    flex: 1 1 0; 
    max-width: 470px;
    margin-left: 20px;
  margin-right: 10px;
}

.sert_cont{
    row-gap: 20px;
}

.why_element,
.tech_element
{
    background-color: #fff;
    border-radius: 10px;
    padding: 13px 19px 21px 21px;
    position: relative;
    width: calc(100% / 4 - 46px);
    width: 100%;
    background-color: aliceblue;;
    /*margin-bottom: 70px;*/
    box-shadow: 0 0 15px rgba(0,0,0,.5);
    min-width: 300px;
}

.sert_element{
    padding: 10px 10px 21px 41px;
    min-width: 250px;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.sert_element p{
    font-size: larger;
    font-variant: petite-caps;
    color: #000;
}

.why_element-img,
.tech_element-img,
.sert_element-img{
    position: absolute;
    width: 176px;
    height: 104px;
    border-radius: 10px 10px 0 10px;
    top: -42px;
    left: -39px;
    margin-top: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,.5);
}
.sert_element-img{
    width: 58px;
    height: 62px;
    top: -30px;
    left: -17px;
    background-image: url("pdf.png");
    background-size: 100%;
    background-repeat: no-repeat;
}

.sert_link{
    cursor: pointer;
    text-decoration: none;
    background-color: aliceblue;
    box-shadow: 0 0 15px rgba(0,0,0,.5);
    border-radius: 6px;
}

.why_element-img img,
.tech_element-img img,
.sertelement-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px 10px 0 10px;
}

.why_element,
.why_element-title,
.sert_element-title{
    display: block;
    align-items: center;
    margin-bottom: 16px;
    min-height: 48px;

} 

.tech_element
.tech_element-title{
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    min-height: 48px;
}

.why_element-title span,
.tech_element-title span
{
    color: var(--dark-blue);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: auto;
    margin-left: max(126px, 4.7vw);
}

.tech-button{
  position: fixed;
  bottom: 5px;
  right: 7px;
  color: #0010ff;
  z-index: 5;
  cursor: pointer;
}

.why_element p,
.tech_element p
{
    color: var(--black);
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.l_view{
  float: left;
  margin: 6px 10px 0px 0;
  position: initial;
  transition: display 4s;
  width: 40%;
  height: auto;
  min-width: 300px;
  border-radius: 10px;
}

.l_view img{
    border-radius: 10px;
}

.desc{
    display: none;
}

.desc p{
    margin: 5px 0 0 0;
}

.tech_element strong{
    margin: 5px 0 0 0;
}


.prob, 
.sert{
  float: left;
  width: 127px;
  height: 50px;
}
.sert_element .prob{
    width: 27px;
    height: 30px;
}

.why{ /* класс для контейнера почему пенетрон*/
    max-width: 90%;
    background-color: oldlace;
}
.why img{ /* класс для контейнера почему пенетрон*/
    width: 211px;
    position: absolute;

}
.why h2{ /* класс для контейнера почему пенетрон*/
    margin-left: 100px;
margin-right: 100px;
}
.col-1{
    display: flex;
    flex-direction: column; /* Элементы в столбец */
    gap: 10%; /* Расстояние между элементами */
}

.left_img{
  top: -35px;
  left: -36px;
}
.right_img{
top: -30px;
  right: -50px;
}
/* Service */


.prod-box {
    -webkit-flex-basis: -webkit-calc(25% - 40px);
    -ms-flex-preferred-size: calc(25% - 40px);
    flex-basis: calc(25% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 40px;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,.5);
    box-shadow: 0 0 15px rgba(0,0,0,.5);
    padding-bottom: 20px;
    background-color: #fff;
    position: relative
}

.prod-box .image {
    position: relative;
    margin: 0 15px;
    padding: 15px 0;
    min-height: 215px;
    border-bottom: 1px solid #e3e4e6;
    margin-bottom: 15px
}

.prod-box .image img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    max-height: 90%
}

.prod-box .title {
    font-family: Oswaldregular;
    font-size: 27px;
    padding: 15px;
    line-height: 1.3
}

.prod-box .title a {
    border-bottom: 2px solid #00487c;
    color: #00487c
}

.prod-box .title a:hover {
    border-bottom: 2px solid transparent;
    color: #f7a82d
}

.prod-box .label {
    display: inline-block;
    position: absolute;
    top: 15px;
    right: -35px;
    background-color: #f7a82d;
    font-size: 19px;
    padding: 2px 10px;
    font-family: Oswaldregular
}

.top-button {
  position: fixed; /* Фиксация на экране */
  bottom: 20px;    /* Отступ снизу */
  right: 20px;     /* Отступ справа */
  display: block;
  opacity: 0;
  visibility: hidden;
    transition: all 1s ease; /* Плавное изменение */
  padding: 10px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  z-index: 5;
}


html {
  scroll-behavior: smooth; /* Плавный переход к верху */
}

/* Footer */

.footer{
    padding-top: 31px;
    padding-bottom: 10px;
    background-position: 50% 100%;
    line-height: 1.3;
    font-size: var(--font-size, .875em);
    position: relative;
    z-index: 1;
    background-color: #f1f1f1;
    color: var(--color-txt);
}
.container_footer{
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: 10px;
    margin-left: 10px;  
}

.footer_contacts{
  display: flex;
  flex-wrap: wrap;
  padding-left: 48px;
  top: 14px;
  position: absolute;
  left: 200px;;
}

.footer_contacts>div {
    position: relative;
    margin-bottom: 3px;
    padding-left: 18px;
}

.footer_contacts>div svg {
    height: 1em;
    margin-right: 7px;
    position: absolute;
    left: 0;
    top: 3px;
}
.footer_tels {
    margin-right: 30px;
}

.footer_addrs {
    width: 100%;
}

.copyright_f{
   margin-top: 13px;
   margin-left: 73px; 
}

.contacts {
    padding: 90px 0 30px 0;

    text-align: center;
}

.contacts-title {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
}
.contacts-adress{
    max-width: 500px;
    margin-left: 30px;
    background: #ececec;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px;
}

.contacts-adress-page{
  background: #ececec;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 10px;
  padding-bottom: 20px;
  box-shadow: 0 0 15px rgba(0,0,0,.5); 
}

.Adress-title{
    margin-top: 15px;
    font-weight: bold;
    text-align: left;
}
.contacts-adress p {
    text-align: initial;
    font-size: initial;
    display: block;
}
.contacts-content {
    display: flex;
    justify-content: space-between;
    column-gap: 30px;
    margin: 0 auto 40px;
    /* max-width: 700px; */
    font-size: 18px;
    align-items: center;
    background: #ececec;
    border-radius: 5px;
}
.map{
    width: 100%;
    height: 400px;
    border-radius: 10px;
    margin: 10px;
}
.contacts-content p + p {
    margin-top: 1em;
}

.contacts-button {
    margin-bottom: 80px;
}

.contacts-social {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 60px;
    margin-bottom: 40px;
}

.contacts-footer {
    color: #828282;
}

.map{
  width: auto;
  margin-top: 10px;
  box-shadow: 0 0 15px rgba(0,0,0,.5);
}
.contact{
    padding: 10px 0;
    display: flex;
    justify-content: center;

    height: 100%;
}

.contact-info{
  width: 1500px;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: auto;
}

.contacts-adress-page p, 
.contacts-adress-page h3{
    text-align: center;
}


/*вопрос ответ*/

.acord{
  display: grid;
  max-width: 1500px;
  margin: auto;
}

.acor-container {
    margin: 20px 20px;
}
.acor-container .acor-body {
    width: calc(100% - 40px);
    margin: 0 auto;
    height: 0;
    color: rgba(0, 0, 0, 0);
    background-color: #DDE3E7;
    line-height: 18px;
    padding: 0 30px;
    box-sizing: border-box;
    transition: color 0.5s, padding 0.5s;
    overflow: hidden;
    font-family: Verdana, sans-serif; 
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 10px 16px rgba(0,0,0,0.2);
    border-radius: 0px 0px 15px 15px;
}
.acor-container .acor-body p {
    margin: 0 0 10px;
}
.acor-container label {
    cursor: pointer;
    background-color: #337AB7;
    display: block;
    padding: 20px 20px;
    width: 100%;
    color: #BFE2FF;
    font-weight: 300;
    box-sizing: border-box;
    z-index: 100;
    font-family: Verdana, sans-serif;   
    font-size: 18px;
    margin: 0 0 5px;
    transition: color .35s;
}
.acor-container label:hover {
    color: #FFF;
}
.acor-container input{
    display: none;
}
.acor-container label:before {
    content: '\276F';
    float: right;
}
.acor-container input:checked + label {
    background-color: #f7a82d;
    color: #FFF;
    box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 28px 30px rgba(0,0,0,0.3);
}
.acor-container input:checked + label:before {
    transition: transform .35s;
    transform: rotate(90deg);
}
.acor-container input:checked + label + .acor-body {
    height: auto;
    margin-top: -5px;
    color: #000;
    padding: 20px 30px 10px;
}


.big1{
    width: 100%;
  opacity: 1;
  height: 100%;
}

.gallery {
  position: relative; display: flex; flex-flow: row wrap;
  justify-content: space-evenly; align-items: center;
  height: 100%; width: 90%; margin: 0 auto;
  /*background-color: #fff;*/
}
.gallery img {
  height: auto; width: 200px; margin: 10px;
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px #919191;
  transition: .5s linear; cursor: pointer;
  box-shadow: 0 0 15px rgba(0,0,0,.5);
}
.show img { opacity: .25; pointer-events: none; }
.select1 img {
    width: 100%;
  opacity: 1;
  height: 100%;
  margin: auto;
}
.select1 {
  transition: box-shadow .5s linear .5s, top 1s ease-out, left 1s ease-out, transform 1s ease-out, width 1s ease-in, height 1s ease-in;
  /*box-shadow: 0 0 0 5px #7581fb;*/
  filter: drop-shadow(1px 2px 6px #000);
  pointer-events: none;
  margin-top: -150px;
  z-index: 100;
}
.close {
  position: absolute; left: 100%;
  height: 20px; width: 20px;
  transform: translate(0%, -100%);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 2px 2px #000;
  font: bold 20px/20px Arial; text-align: center;
  background-color: #000; color: #fff;
  pointer-events: auto; cursor: pointer;
  transition: 1s linear; opacity: 0; 
  top: 0px;
}
.select1 .close:hover { transform: translate(0%, -100%) rotate(.5turn); transition: 1s ease; }
.footer_mails{
    margin-left: 10px;
}

/*
body { margin: 0; height: 100vh; overflow: hidden; background: 0% 0% / auto no-repeat url('https://i.sstatic.net/m9NKc.png'), #58555c; }
.gallery {
  position: relative; display: flex; flex-flow: row wrap;
  justify-content: space-evenly; align-items: center;
  height: 100%; width: 90%; margin: 0 auto;
  background-color: #fff;
}
.gallery img {
  height: auto; width: 200px; margin: 10px;
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px #919191;
  transition: .5s linear; cursor: pointer;
}
.show img { opacity: .25; pointer-events: none; }
.active {
  transition: box-shadow .5s linear .5s, top 1s ease-out, left 1s ease-out, transform 1s ease-out, width 1s ease-in, height 1s ease-in;
  box-shadow: 0 0 0 10px #fff; filter: drop-shadow(1px 2px 6px #000);
  pointer-events: none;
}
.close {
  position: relative; left: 100%;
  height: 20px; width: 20px;
  transform: translate(0%, -100%);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 2px 2px #000;
  font: bold 20px/20px Arial; text-align: center;
  background-color: #000; color: #fff;
  pointer-events: auto; cursor: pointer;
  transition: 1s linear; opacity: 0;
}
.active .close:hover { transform: translate(0%, -100%) rotate(.5turn); transition: 1s ease; }*/