{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f9f9f9 0%, #e6f0ff 100%);
            color: #333;
            line-height: 1.6;
            padding-bottom: 40px;
        }
        
        .city-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .city-header {
            background: linear-gradient(to right, #1a3a6c, #2a5298);
            color: white;
            padding: 30px 0;
            text-align: center;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
            margin-bottom: 30px;
        }
        
        .city-header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="rgba(255,255,255,0.1)"/></svg>');
            background-size: cover;
            opacity: 0.3;
        }
        
        .city-title {
            font-size: 2.8rem;
            margin-bottom: 15px;
            position: relative;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }
        
        .city-subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .city-main-content {
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            padding: 30px;
            margin-bottom: 30px;
        }
        
        .city-toc-container {
            background: #f8faff;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.03);
            padding: 25px;
            margin-bottom: 30px;
            border: 1px solid #e0e7ff;
        }
        
        .city-toc-container h2 {
            text-align: center;
            color: #1a3a6c;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #eaeefc;
            font-size: 1.8rem;
        }
        
        .city-toc-columns {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
        }
        
        .city-toc ul {
            list-style: none;
        }
        
        .city-toc li {
            margin-bottom: 12px;
        }
        
        .city-toc a {
            text-decoration: none;
            color: #2a5298;
            display: block;
            padding: 12px 18px;
            border-radius: 8px;
            transition: all 0.3s ease;
            background: white;
            border-left: 3px solid #4a6fc5;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        }
        
        .city-toc a:hover {
            background: #eef2ff;
            transform: translateX(5px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        }
        
        .city-section {
            margin-bottom: 40px;
            padding-bottom: 30px;
            border-bottom: 1px solid #eee;
        }
        
        .city-section:last-child {
            border-bottom: none;
        }
        
        .city-section h2 {
            color: #1a3a6c;
            font-size: 1.8rem;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eaeaea;
            position: relative;
        }
        
        .city-section h2::after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100px;
            height: 3px;
            background: #4a6fc5;
            border-radius: 3px;
        }
        
        .city-section h3 {
            color: #2a5298;
            margin: 25px 0 15px;
            font-size: 1.4rem;
        }
        
        .city-section p {
            margin-bottom: 15px;
            text-align: justify;
        }
        
        .city-highlight {
            background: linear-gradient(to right, rgba(74, 111, 197, 0.1), rgba(74, 111, 197, 0.05));
            border-left: 4px solid #4a6fc5;
            padding: 20px;
            border-radius: 0 8px 8px 0;
            margin: 20px 0;
        }
        
        .city-section ul, .city-section ol {
            margin: 15px 0 15px 30px;
        }
        
        .city-section li {
            margin-bottom: 10px;
            line-height: 1.5;
        }
        
        .city-sources {
            background: #f8faff;
            border-radius: 8px;
            padding: 25px;
            margin-top: 20px;
        }
        
        .city-sources h3 {
            color: #1a3a6c;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e0e7ff;
        }
        
        .city-sources ul {
            list-style-type: none;
            margin-left: 0;
        }
        
        .city-sources li {
            margin-bottom: 12px;
            padding-left: 25px;
            position: relative;
        }
        
        .city-sources li:before {
            content: "•";
            color: #4a6fc5;
            font-weight: bold;
            position: absolute;
            left: 10px;
        }
        
        .city-sources a {
            color: #2a5298;
            text-decoration: none;
            transition: all 0.2s ease;
        }
        
        .city-sources a:hover {
            color: #1a3a6c;
            text-decoration: underline;
        }
        
        .city-restaurants-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }

        .city-restaurant-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            transition: transform 0.3s ease;
            border-left: 4px solid #ff6b6b;
        }

        .city-restaurant-card:nth-child(2) {
            border-left-color: #4ecdc4;
        }

        .city-restaurant-card:nth-child(3) {
            border-left-color: #ffd166;
        }

        .city-restaurant-card:nth-child(4) {
            border-left-color: #6a0572;
        }

        .city-restaurant-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        }

        .city-restaurant-card .city-card-content {
            padding: 20px;
        }

        .city-restaurant-card h4 {
            color: #1a3a6c;
            margin-bottom: 15px;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .city-restaurant-card p {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .city-restaurant-card ul {
            margin: 10px 0 0 20px;
        }

        .city-restaurant-card li {
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .city-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin: 25px 0;
        }
        
        .city-gallery-item {
            border-radius: 8px;
            overflow: hidden;
            height: 200px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            text-align: center;
            padding: 15px;
            background: linear-gradient(45deg, #4a6fc5, #2a5298);
        }
        
        .city-gallery-item:hover {
            transform: translateY(-5px);
        }
        
        .city-bottom-blocks {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 30px;
            margin-top: 20px;
        }
        
        .city-bottom-block {
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            padding: 25px;
            overflow: hidden;
        }
        
        .city-weather-widget {
            background: linear-gradient(to bottom right, #4a6fc5, #2a5298);
            color: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .city-weather-header {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .city-weather-info {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }
        
        .city-weather-item {
            background: rgba(255,255,255,0.15);
            padding: 15px;
            border-radius: 10px;
            text-align: center;
        }
        
        .city-map-container {
            /* Стили контейнера для карты */
        }
        
        .city-map-frame {
            height: 350px;
            background: #eaeaea;
            border-radius: 8px;
            overflow: hidden;
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        
        .city-map-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(26, 58, 108, 0.8), rgba(42, 82, 152, 0.6));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            text-align: center;
            padding: 20px;
            font-weight: bold;
        }
        
        .city-attractions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 20px;
        }
        
        .city-attraction-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            transition: transform 0.3s ease;
        }
        
        .city-attraction-card:hover {
            transform: translateY(-10px);
        }
        
        .city-card-img {
            height: 180px;
            width: 100%;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            background: linear-gradient(45deg, #4a6fc5, #2a5298);
        }
        
        .city-card-content {
            padding: 20px;
        }
        
        .city-card-content h4 {
            color: #1a3a6c;
            margin-bottom: 10px;
            font-size: 1.2rem;
        }
        
        .city-footer {
            text-align: center;
            margin-top: 50px;
            padding-top: 20px;
            color: #666;
            font-size: 0.9rem;
        }
        
        .city-btn {
            background: #4a6fc5;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .city-btn:hover {
            background: #3a5caa;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .city-icon {
            margin-right: 8px;
            font-size: 1.2em;
        }
        
        .transport-icons {
            display: flex;
            gap: 15px;
            margin-top: 10px;
            font-size: 2.5rem;
        }
        
        .transport-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .transport-label {
            font-size: 0.9rem;
            margin-top: 5px;
        }
        
        .category-icons {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin: 20px 0;
            justify-content: center;
        }
        
        .category-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 80px;
        }
        
        .category-icon {
            font-size: 2rem;
            margin-bottom: 5px;
        }
        
        @media (max-width: 900px) {
            .city-title {
                font-size: 2.2rem;
            }
            
            .city-toc-columns {
                grid-template-columns: 1fr;
            }
            
            .city-bottom-blocks {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .city-toc-columns {
                grid-template-columns: 1fr;
            }
            
            .transport-icons {
                font-size: 2rem;
            }
        }
        
        @media (max-width: 480px) {
            .city-title {
                font-size: 1.8rem;
            }
            
            .city-section h2 {
                font-size: 1.5rem;
            }
            
            .city-gallery {
                grid-template-columns: 1fr;
            }
            
            .city-attractions-grid {
                grid-template-columns: 1fr;
            }
            
            .city-main-content {
                padding: 20px;
            }
            
            .transport-icons {
                font-size: 1.5rem;
            }
        }
        
        .city-toc a {
            animation: fadeIn 0.5s ease-out;
            animation-fill-mode: both;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .city-toc li:nth-child(1) a { animation-delay: 0.1s; }
        .city-toc li:nth-child(2) a { animation-delay: 0.2s; }
        .city-toc li:nth-child(3) a { animation-delay: 0.3s; }
        .city-toc li:nth-child(4) a { animation-delay: 0.4s; }
        .city-toc li:nth-child(5) a { animation-delay: 0.5s; }
        .city-toc li:nth-child(6) a { animation-delay: 0.6s; }
        .city-toc li:nth-child(7) a { animation-delay: 0.7s; }
        .city-toc li:nth-child(8) a { animation-delay: 0.8s; }
        .city-toc li:nth-child(9) a { animation-delay: 0.9s; }
        
        .city-section {
            opacity: 0;
            transform: translateY(20px);
            animation: slideUp 0.6s ease forwards;
        }
        
        @keyframes slideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }





 








/*изображения адрес,координаты, сайты,часы работы
.tr_site {width:75%; padding:10px 15px 15px 15px;border-bottom:1px solid #d2dadb;}
.tr_site img {width:17px;height:17px;display:block;float:left;margin: 0 10px 0 0;}
.tr_site span {float: left;margin:0 10px 0 0;color:#abc;text-transform:uppercase;letter-spacing:2px;}
.tr_site a {color:#d2dadb;}
.tr_site a:hover {text-decoration:underline;}
*/

div.tr_site,p.tr_site,
div.tr_phone,p.tr_phone,
div.tr_clock,p.tr_clock,
div.tr_money,p.tr_money, 
div.tr_adress,p.tr_adress, 
div.tr_markmap,p.tr_markmap,
div.tr_icon,p.tr_icon 
{padding: .6em 1em 0.6em 3.4em;border: 1px solid #f2f2f2;margin-bottom: 0.5em;}


.tr_site span,.tr_near span
{float: left;margin:0 10px 0 0;color:#99A5C2;text-transform:uppercase;letter-spacing:2px;}
.tr_phone span 
{float: left;margin:0 10px 0 0;color:#99A5C2;text-transform:uppercase;letter-spacing:2px;}
.tr_clock span {float: left;margin:0 10px 0 0;color:#99A5C2;text-transform:uppercase;letter-spacing:2px;}
.tr_money span {float: left;margin:0 10px 0 0;color:#99A5C2;text-transform:uppercase;letter-spacing:2px;}
.tr_adress span {float: left;margin:0 10px 0 0;color:#99A5C2;text-transform:uppercase;letter-spacing:2px;}
.tr_markmap span {float: left;margin:0 10px 0 0;color:#99A5C2;text-transform:uppercase;letter-spacing:2px;}
.tr_icon span {float: left;margin:0 10px 0 0;color:#99A5C2;text-transform:uppercase;letter-spacing:2px;}



div.tr_site, p.tr_site 
{background:#f9f9f9 url(../images/website.jpg) no-repeat 10px center;}
div.tr_phone, p.tr_phone 
{background:#f9f9f9 url(../images/phone.jpg) no-repeat 10px center;}
div.tr_clock, p.tr_clock 
{background:#f9f9f9 url(../images/clock.jpg) no-repeat 10px center;}
div.tr_money,p.tr_money
{background: #f9f9f9 url(../images/money.jpg) no-repeat 10px center;}
div.tr_adress, p.tr_adress 
{background: #f9f9f9 url(../images/adress.jpg) no-repeat 10px center;}
div.tr_markmap, p.tr_markmap 
{background: #f9f9f9 url(../images/markmap.jpg) no-repeat 10px center;}	
div.tr_icon, p.tr_icon 
{background: #f9f9f9  url(../images/typo_success.png) no-repeat 10px center;}
div.tr_near,p.tr_near
{background: #f9f9f9  url(../images/typo_near.jpg) no-repeat 10px center;}




/*Блок: выделение Заголовков серым цветом в статьях*/
.travel-block1{padding:7px;background:#f8f8f8;border:1px solid #fff;color: #45B3A3;text-transform:uppercase;letter-spacing:2px;
    
}

div.travel-attraction,p.travel-attraction {
padding: .6em 1em 0.6em 3.4em;
background: #f9f9f9 url(../images/attraction.jpg)no-repeat 10px center;
border:1px solid #fff;
color: #45B3A3;
text-transform:uppercase;
letter-spacing:2px;
}
  



/*Блок: Достопримечательности
.travel-block {padding: 15px 30px 30px;
}.travel-at (текст) img:hover{
transform: scale(1.05,1.05);
transition: all 1s ease;
}*/

.travel-at{
display:inline-block;
vertical-align:top;
width:190px;
margin:10px 10px 10px 0;
text-align:left;
}
.travel-at img {
display:block;
width:180px;
height:120px;
margin-bottom:16px;
border-radius: 3px;
box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}



/*Блок: Что находится рядом*/
.tr-block {
padding: 15px 30px 30px;
        padding-top: 15px;
        padding-right: 30px;
        padding-bottom: 30px;
        padding-left: 30px;
border-top: 15px solid #f8f8f8;
        border-top-width: 15px;
        border-top-style: solid;
        border-top-color: #f8f8f8;
background-color: #fff;
text-align: left;
}
.tr-near {
display:inline-block;
vertical-align:top;
width:240px;
margin:30px 10px 30px 0;
text-align:left
}
.tr-near,.travel-near-in {
position:relative
}
.tr-near:nth-of-type(4n) {
margin-right:0
}
.tr-near-default {
position:relative;
width:240px;
height:175px;
margin-bottom:16px;
background-color:#f2f2f2
}
.tr-near-default-ico {
 position:absolute;
 width:104px;
 height:91px;
 margin:auto;
 top:0;
 bottom:0;
 left:0;
 right:0
}
.tr-near__image {
 display:block;
 width:230px;
 height:170px;
 margin-bottom:16px
}
.tr-near__name,.travel-near__title {
 font-weight:400;
 display:block;
 color:#1a1a1a
}
.tr-near__title {
 font-size:21px;
 line-height:29px
}
.tr-near__title-see-also {
 padding-bottom:5px
}
.tr-near__name {
 font-size:16px;
 line-height:26px
}
.tr-near-categories-item__title:hover,.travel-near__name:hover {
 color:#ff531a
}
.tr-near__click {
 position:absolute;
 top:0;
 right:0;
 bottom:0;
 left:0;
 cursor:pointer
}
.tr-near__title {
 margin-left:20px
}
.tr-near__description {
 font-size:13px;
 line-height:19px;
 display:block;
 padding-top:9px;
 }

/*Веб камеры*/
.entry-content img {
border-radius:25px;
padding:15px;
border:1px solid #ddd;
background:#f9f9f9;
box-shadow:0 10px 4px rgba(0,0,0,.2);
max-width:100%;
transform: scale(1.05,1.05);
transition: all 1s ease;
}

.thumbnail-web {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  width: 150px;
  height: 150px;
}

.web-cam {
  width: 80%;
  height: 500px;
  vertical-align: top;
  border:1px solid #ddd;
  border-radius:25px;
  padding:15px;
  background:#f9f9f9;
}




/*карты API*/

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

.travel-map-api img{
height: 250px;
width: 40%; 

}

/*Блок: Выбор и заказ билетов
.tr-block-bilet{padding:10px;background:#f8f8f8;border:1px solid #fff;color:#99A5C2;text-transform:uppercase;letter-spacing:2px;}
*/

.tr-bilet,p.tr-bilet {
padding: .6em 1em 0.6em 3.4em;
color: #514721;
background: #f9f9f9 url(../images/select.jpg)no-repeat 10px center;
border:1px solid #fff;
}
.tr-bilet span {float: left;margin:0 10px 0 0;color:#99A5C2;text-transform:uppercase;letter-spacing:2px;}


.tr-time,p.tr-time {
padding: .6em 1em 0.6em 3.4em;
color: #514721;
background: #f9f9f9 url(../images/date.jpg)no-repeat 10px center;
border:1px solid #fff;
}
.tr-time span {float: left;margin:0 10px 0 0;color:#99A5C2;text-transform:uppercase;letter-spacing:2px;}


/*таблицы.tr-table th {
background: #AFCDE7;
color: white;
padding: 10px 20px;
text-align: left;*/

.tr-table {

border-collapse: collapse;
text-align: center;
}
.tr-table th {
background: #AFCDE7;
color: white;
padding: 10px 8px;
}
.tr-table th, .tr-table td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
.tr-table td {
background: #D8E6F3;
padding: 1px 4px;
}


/*Похожие места - карусель*/

.tagssimilar ul
{
list-style-type: none;
padding: 0px;
text-align: center;
}
.tagssimilar ul li
{
border-bottom: 1px solid #d2d2d2;
margin-bottom: 5px;
}
.tagssimilar ul li a
{
text-decoration: none;
color: #202020;
}
.tagssimilar img{
height: 125px;
width: 80%; 

}

/*текст.......#4B6B94  #8b9bb3......................... */

.button.FuncButton {
background-color: #CBDBEA;
margin-left: 0px;
width: 50px;
padding: 4px 0px;
border-color: #4B6B94;
border-radius: 8px;
color: #FFF;
text-align: center;
text-shadow: 0px -1px 0px #4B6B94;

}


/*typography */

.ice-headline {
	font-size: 3em;
	text-align: center;}

.ice-subheadline {
	font-size: 1.1em;
	text-align: center;
	margin-top: -3px;
	margin-bottom: 18px;
	color: #888;}	

span.notice-typo {
	color: #888;}
	
	


ul.ice-check li, 
ul.ice-arrow li, 
ul.ice-cross li,
ul.ice-light li, 
ul.ice-star li, 
ul.ice-note li,
ul.ice-check2 li,
ul.ice-help li,
ul.ice-info li {
	list-style-type:none;
	background-repeat: no-repeat; 
	padding: 4px 0 3px 28px}
	
	ul.ice-check li {
		background-image:url(../images/typo_check.png);}
	ul.ice-arrow li { 
		background-image:url(../images/typo_arrow.png);}
	ul.ice-cross li { 
		background-image:url(../images/typo_cross.png);}
	ul.ice-light li { 
		background-image:url(../images/typo_light.png);}
	ul.ice-star li { 
		background-image:url(../images/typo_star.png);}
	ul.ice-note li { 
		background-image:url(../images/typo_note.png);}	
	ul.ice-check2 li { 
		background-image:url(../images/typo_check2.png);}
	ul.ice-help li { 
		background-image:url(../images/typo_help.png);}
	ul.ice-info li { 
		background-image:url(../images/typo_info.png);}


ul.circle li,
ul.circle li { 
display: inline-block;
  height: 20px;
  width: 20px;
  color: #fff;
  background-color: #3399ff;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 700;
  line-height: 21px;
  text-align: center;
 } 



/*Цифры в кружке */
.krug {
  
  display: inline-block;
}
.krug_text {
  display: inline-block;
  height: 20px;
  width: 20px;
  color: #fff;
  background-color: #3399ff;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 700;
  line-height: 21px;
  text-align: center;
 }