.bg-b{
	background-image: url(../img/u138.png);
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: none;
}
.sect-main-b {
    position: relative;
	height: 70vh;
    max-height: 650px;
}
.bg-left {
    height: 100%;
    position: absolute;
    top: 0;
    background: url(../img/3-02.svg);
    width: 50%;
    background-size: cover;
    background-position-x: right;
	background-repeat: no-repeat;
	transition: all .4s ease;
	left: -999px;
    bottom: -999px;
}
.bg-right {
    height: 100%;
    position: absolute;
    top: 0;
    background: url(../img/3-03.svg);
    width: 50%;
    background-size: cover;
    background-position-x: left;
	background-repeat: no-repeat;
	transition: all .4s ease;
	right: -999px;
    bottom: -999px;
}
.bg-shadow h2 {
    font-weight: 700;
    letter-spacing: 1px;
    max-width: 500px;
    margin: 0 auto;
    color: #fff;
    margin-top: 15%;
	transition: all .4s ease;
	z-index: 1;
}
.bg-shadow-d-none {
	margin-top: -100% !important;
	z-index: -1;
}
.left-show {
	left: 0px;
    top: 0px;
}
.right-show {
	right: 0px;
    top: 0px;
}
.bg-shadow {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.4)));
    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
#newseller-b {
	padding-top: 45px;
	padding-bottom: calc(45px - 1rem);
}
.left-name {
    max-width: 500px;
    display: flex;
    margin-left: 10%;
    margin-top: 15%;
}
.left-name h3 {
    height: 100px;
    font-size: 25px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    text-align: left;
}
img.left-logo {
    width: 100px;
    height: 100px;
}
.right-name {
    position: absolute;
    bottom: 5%;
    right: 23%;
    font-size: 18px;
}
.right-name p {
    margin-bottom: 5px;
}
p.r-soc {
    margin-top: 13px;
}
p.r-soc img {
    width: 54px;
}
.card.card-mis {
    padding: 20px;
}




.map-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
			padding: 0;
        }

        .map-header {
            background: linear-gradient(135deg, #1e3b66, #315b9d);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .map-header h2 {
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 300;
        }

        .map-header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .interactive-map {
            position: relative;
            width: 100%;
            height: 600px;
            background: linear-gradient(45deg, #e2ebf4 0%, #d9eaf2 100%);
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(120, 200, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 50%);
            overflow: hidden;
        }

        /* Схема здания */
        /*.building-outline {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            height: 300px;
            background: rgba(255, 255, 255, 0.95);
            border: 4px solid #1e3b66;
            border-radius: 0;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }*/
		.building-outline {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 600px;
			height: 300px;
			/*background: rgba(255, 255, 255, 0.95);*/
			border-radius: 0;
			background-image: url(../img/shema1.jpg);
			background-size: contain;
			background-repeat: no-repeat;
		}
		
		.shema1 {			
			background-image: url(../img/shema1.jpg);
		}
		.shema0 {			
			background-image: url(../img/shema0.jpg);
		}
		.shema2 {			
			background-image: url(../img/shema2.jpg);
		}
		.shema16 {			
			background-image: url(../img/shema16.jpg);
		}
		.shema8 {			
			background-image: url(../img/shema8.jpg);
		}
		.shema11 {			
			background-image: url(../img/shema11.jpg);
		}
		.shema12 {			
			background-image: url(../img/shema12.jpg);
		}
		.shema13 {			
			background-image: url(../img/shema13.jpg);
		}

        /* Внутренние стены - разделяющие на 3 комнаты */
        .inner-wall-left {
            position: absolute;
            top: 0;
            left: 33.33%;
            width: 4px;
            height: 100%;
            background: #1e3b66;
            transform: translateX(-50%);
        }

        .inner-wall-right {
            position: absolute;
            top: 0;
            left: 66.66%;
            width: 4px;
            height: 100%;
            background: #1e3b66;
            transform: translateX(-50%);
        }

        /* Главный вход снизу по центру */
        .main-entrance {
            position: absolute;
            bottom: -4px;
            left: 50%;
            width: 40px;
            height: 8px;
            background: white;
            transform: translateX(-50%);
        }

        /* Вход в левую комнату (широкий) */
        .door-left {
            position: absolute;
            top: 50%;
            left: 33.33%;
            width: 8px;
            height: 60px;
            background: white;
            transform: translate(-50%, -50%);
        }

        /* Вход в правую комнату (узкий) */
        .door-right {
            position: absolute;
            top: 50%;
            left: 66.66%;
            width: 8px;
            height: 35px;
            background: white;
            transform: translate(-50%, -50%);
        }

        /* Элементы сверху (архитектурные детали) */
        .top-element-large-1 {
            position: absolute;
            top: -8px;
            left: 20%;
            width: 40px;
            height: 8px;
            background: #1e3b66;
        }

        .top-element-large-2 {
            position: absolute;
            top: -8px;
            right: 20%;
            width: 40px;
            height: 8px;
            background: #1e3b66;
        }

        /* Боковые элементы */
        .side-element-left {
            position: absolute;
            left: -8px;
            top: 20%;
            width: 8px;
            height: 20px;
            background: #1e3b66;
        }

        .side-element-left-2 {
            position: absolute;
            left: -8px;
            bottom: 30%;
            width: 8px;
            height: 15px;
            background: #1e3b66;
        }

        .side-element-right {
            position: absolute;
            right: -8px;
            top: 20%;
            width: 8px;
            height: 20px;
            background: #1e3b66;
        }

        /* Интерактивные точки */
        .map-point {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #3fc1f9;
            border: 3px solid white;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px rgba(63, 193, 249, 0.4);
            z-index: 10;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 3px 10px rgba(63, 193, 249, 0.4), 0 0 0 0 rgba(63, 193, 249, 0.7);
            }
            70% {
                box-shadow: 0 3px 10px rgba(63, 193, 249, 0.4), 0 0 0 10px rgba(63, 193, 249, 0);
            }
            100% {
                box-shadow: 0 3px 10px rgba(63, 193, 249, 0.4), 0 0 0 0 rgba(63, 193, 249, 0);
            }
        }

        .map-point:hover {
            transform: scale(1.3);
            background: #1e3b66;
            box-shadow: 0 5px 15px rgba(30, 59, 102, 0.6);
        }

        .map-point.active {
            background: #1e3b66;
            transform: scale(1.3);
        }

        /* Всплывающие окна */
        .popup {
            position: absolute;
            background: white;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
            padding: 20px;
            min-width: 280px;
            max-width: 350px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: all 0.3s ease;
            z-index: 1000;
            border: 2px solid #3fc1f9;
        }

        .popup.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .popup::before {
            /*content: '';*/
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #3fc1f9;
        }

        .popup.show-above::before {
            top: -10px;
            bottom: auto;
            border-top: none;
            border-bottom: 10px solid #3fc1f9;
        }

        .popup-image {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 15px;
        }

        .popup-title {
            font-size: 1.3em;
            font-weight: 600;
            color: #1e3b66;
            margin-bottom: 10px;
            text-align: center;
        }

        .popup-description {
            font-size: 0.95em;
            color: #666;
            line-height: 1.5;
            text-align: center;
        }

        .close-popup {
            position: absolute;
            top: -7px;
            right: 0px;
            background: none;
            border: none;
            font-size: 1.5em;
            color: #999;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .close-popup:hover {
            color: #1e3b66;
        }

        /* Позиционирование точек - в левой и правой комнатах (без прямого входа) */
        .point-1 { 
            top: 40%; 
            left: 17%; /* В левой комнате */
        }
        .point-2 { 
            top: 40%; 
            left: 83%; /* В правой комнате */
        }

        /* Адаптивность */
        @media (max-width: 768px) {
            .interactive-map {
                height: 400px;
            }
            
            .map-header h2 {
                font-size: 2em;
            }
            
            .map-header p {
                font-size: 1em;
            }
            
            .popup {
                min-width: 250px;
                max-width: 280px;
                padding: 15px;
            }
            
            .popup-image {
                height: 120px;
            }
            
            .map-point {
                width: 16px;
                height: 16px;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 10px;
            }
            
            .interactive-map {
                height: 300px;
            }
            
            .map-header {
                padding: 20px;
            }
            
            .map-header h2 {
                font-size: 1.8em;
            }
            
            .popup {
                min-width: 220px;
                max-width: 250px;
                padding: 12px;
            }
            
            .popup-image {
                height: 100px;
            }
            
            .popup-title {
                font-size: 1.1em;
            }
            
            .popup-description {
                font-size: 0.9em;
            }
        }

        /* Легенда */
        .map-legend {
            position: absolute;
            top: 20px;
            right: 20px;
            background: rgba(255, 255, 255, 0.95);
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            font-size: 0.9em;
            max-width: 200px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }

        .legend-color {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
            background: #3fc1f9;
        }

        @media (max-width: 768px) {
            .map-legend {
                position: static;
                margin: 15px;
                max-width: none;
            }
        }
		
		
		
		
.book-sli img {
    width: 100%;
}
.book-sli {
    height: 210px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.book-sli.video {
    position: relative;
}
.book-sli.video i {
    left: calc(50% - 16.5px);
	top: calc(50% - 22px);
    position: absolute;
    font-size: 44px;
    opacity: .75;
    color: #2c3e50;
	transition: all .4s ease;
}
.book-sli.video:hover i {
    opacity: 1;
}
img.st {
    width: 100%;
    border-radius: 50%;
}
.c-name {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 20px;
    margin-top: 10px;
	height: 60px;
}
.c-d {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 10px;
	margin-bottom: 15px;
	height: 75px;
}
.card-b {
	margin-bottom: 30px;
}