/******************************************************\
*
*  1. Main containers (carousel size, background)
*
\******************************************************/

.touchcarousel {
	position: relative;
	width: 600px;
	height: 400px;		
	
	/* style is removed after carousel is inited, use !important if you want to keep it*/
	overflow: hidden; 
}
.touchcarousel .touchcarousel-container {
	position: relative;    
    margin: 0;
    padding: 0;
    list-style: none;    
	left: 0;
}
.touchcarousel .touchcarousel-wrapper {
	position: relative;
	overflow:hidden;
	width: 100%;
	height: 150px; /* 100% */
	font-size: 0.9em;
}

.dt .touchcarousel .touchcarousel-wrapper a {
	color: var(--tt)
}
.touchcarousel-wrapper a:hover {color:var(--color-blue-light); text-decoration:none;}





/******************************************************\
*
*  2. Carousel items (item styling, spacing between items)
*
\******************************************************/

.touchcarousel .touchcarousel-item {
	/* use margin-right for spacing between items */
	margin: 0 0 0 0;
	padding: 0;	
	float: left;	
	text-align: center;
}

/* Last carousel item  */
.touchcarousel .touchcarousel-item.last {
	margin-right: 0 !important;		
}





/******************************************************\
*
*  3. Arrows(direction) navigation
*
\******************************************************/

/* arrow hitstate and icon holder */
/*.touchcarousel .arrow-holder {
	height: 100%;
	width: 45px;
	position: absolute;
	top: 0;
	display: block;
	cursor: pointer;	
	z-index: 25;	
}
.touchcarousel .arrow-holder.left {	
	left: 0;	
}
.touchcarousel .arrow-holder.right {	
	right: 0;
}*/

/* arrow icons */
/*
.touchcarousel .arrow-icon{		
	width: 45px;
	height: 90px;
	top:50%;
	margin-top:-45px;	
	position: absolute;	
	cursor: pointer;	
}*/
.touchcarousel .arrow-icon.left { }
.touchcarousel .arrow-icon.right { }
.touchcarousel .arrow-holder:hover .arrow-icon { }
.touchcarousel .arrow-holder.disabled { cursor: default; }
.touchcarousel .arrow-holder.disabled .arrow-icon { cursor: default; }





/******************************************************\
*
*  4. Paging navigation
*
\******************************************************/

.touchcarousel .tc-paging-container {
	width:100%;
	overflow:hidden;
	position:absolute;
	margin-top:-20px;
	z-index:25;
}
.touchcarousel .tc-paging-centerer {	
	float: left;
	position: relative;
	left: 50%;		
}
.touchcarousel .tc-paging-centerer-inside {
	float: left;
	position: relative;
	left: -50%;
}

/* Paging items */
.touchcarousel .tc-paging-item {			
	float:left;	
	cursor:pointer;		
	position:relative;
	display:block;	
	text-indent: -9999px;	
}
.touchcarousel .tc-paging-item.current { }
.touchcarousel .tc-paging-item:hover { }





/******************************************************\
*
*  5. Scrollbar
*
\******************************************************/
.touchcarousel .scrollbar-holder {
	position: absolute;
	z-index: 30;
	left: 6px;
	right: 6px;	
	bottom: 5px;
	height:4px;
	overflow: hidden;
}
.touchcarousel .scrollbar {
	position: absolute;
	left:0;	
	height:4px;
	bottom: 0px;
}
.touchcarousel .scrollbar.dark {
	background-color: rgb(130, 130, 130);	
	background-color: rgba(0, 0, 0, 0.5);
}
.touchcarousel .scrollbar.light {
	background-color: rgb(210, 210, 210);	
	background-color: rgba(255, 255, 255, 0.5);	
}





/******************************************************\
*
*  6. Cursors
*
\******************************************************/

/* IE and Opera use "move", FF uses -moz-grab */
/*
.touchcarousel .grab-cursor{ cursor:url(grab.png?0) 8 8, move; }
.touchcarousel .grabbing-cursor{ cursor:url(grabbing.png?0) 8 8, move; }
*/

/* Cursor that used when mouse drag is disabled */
.touchcarousel .auto-cursor{ cursor:auto; }




/* Copyright 2011, Dmitry Semenov, http://dimsemenov.com */
		/**
		* Carousel with image and text, custom skinned scrollbar
		**/
		#carousel-image-and-text {
			width: 100%;
			height: 150px;
			margin: 0 auto;	
margin-top:15px;
		}	
		#carousel-image-and-text .arrow-holder {
			height: 250px;
		}		
		#carousel-image-and-text .touchcarousel-item {
			margin-right: 1px;	
			width: 80px;
			height: 110px;
			font-size: 0.9em;		
		}
		#carousel-image-and-text .item-block {
			width: 74px;
			height: 110px;
			display: block;
		}
		#carousel-image-and-text .item-block img,
		#carousel-image-and-text .item-block h4, 
		#carousel-image-and-text .item-block p {
			float: left;
			position: relative;
			display: block;
			margin: 0;			
		}
		#carousel-image-and-text .item-block img {
			width: 74px;
			height: 106px;		
			border: 0;
			padding: 0;		
		}
		#carousel-image-and-text .item-block {			
			text-decoration: none;
			color: inherit;			
		}					
		#carousel-image-and-text .item-block h4 {
			font: bold 13px/20px Helvetica, Arial, sans-serif;
			color: #000;
			width: 158px;
			height: auto;		
			padding: 2px 0 0 6px;
			-webkit-transition: color 0.2s ease-out; 
			-moz-transition: color 0.2s ease-out;
			transition: color 0.2s ease-out;  	
		}
		#carousel-image-and-text .item-block:hover h4 {	
			color: #1873c9;		
		}
		#carousel-image-and-text .item-block p {			
			font: normal 13px/20px Helvetica, Arial, sans-serif;
			color: #555;		
			width: 158px;
			padding: 0 0 0 6px;
		}
		#carousel-image-and-text .scrollbar-holder {
			background: #CED7DB;
			bottom: 0;
			height: 1px;
			left: 0;
			right: 0;
		}
		#carousel-image-and-text .scrollbar {
			background-color: #45a8ce !important;
			bottom: 0;
		}
.slide-actor ul li a.actumb img {
    width: 74px;
    height: 106px;
    margin: 0px auto 3px;
    display: block;
    padding: 2px;
    line-height: 20px;
    border: 1px solid #DDD;
    border-radius: 4px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.055);
    transition: all 0.2s ease-in-out 0s;
}

        .actor-profile-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .dt .actor-profile-container {
            background: var(--color-white)
        }

        .actor-profile-main {
            display: flex;
            flex-wrap: wrap;
            padding: 30px;
            gap: 30px;
        }

        .actor-profile-photo {
            flex: 0 0 300px;
        }

        .actor-profile-photo img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            display: block;
        }

        .actor-profile-details {
            flex: 1;
            min-width: 300px;
        }

        .actor-profile-name {
            margin-bottom: 20px;
        }

        .actor-profile-name h1 {
            font-size: 2.5em;
            /*color: #333;*/
            margin-bottom: 5px;
        }

        .actor-profile-name h2 {
            font-size: 1.8em;
            /*color: #666;*/
            font-weight: normal;
        }

        .actor-profile-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .actor-profile-item {
            display: flex;
            flex-direction: column;
        }

        .actor-profile-label {
            font-weight: bold;
            /*color: #333;*/
            margin-bottom: 5px;
            font-size: 0.9em;
        }

        .actor-profile-value {
            /*color: #666;*/
        }

        .actor-profile-aliases {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            margin-top: 20px;
        }
        .dt .actor-profile-aliases {
            background: #2a2f3d;   
        }

        .actor-profile-aliases .actor-profile-label {
            margin-bottom: 10px;
        }

        .actor-profile-alias-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .actor-profile-alias {
            background: white;
            padding: 5px 10px;
            border-radius: 4px;
            border: 1px solid #e1e5e9;
            font-size: 0.9em;
        }

        .actor-profile-biography {
            padding: 30px;
            border-top: 1px solid #e1e5e9;
            /*background: white;*/
        }
        
        .dt .actor-profile-biography {border-top: 1px solid #2a2f3d}
        
        .actor-profile-filmografia {
            padding: 15px 0 15px 0;
            /*border-top: 1px solid #e1e5e9;*/
            /*background: white;*/
        }

        .actor-profile-bio-title {
            font-size: 1.5em;
            /*color: #333;*/
            margin-bottom: 15px;
            font-weight: bold;
            text-align: center;
}
        

        .actor-profile-bio-text {
            /*color: #444;*/
            line-height: 1.7;
            text-align: justify;
        }

        /* Адаптивность */
        @media (max-width: 768px) {
            .actor-profile-main {
                padding: 20px;
                gap: 20px;
            }
            
            .actor-profile-photo {
                flex: 0 0 250px;
                margin: 0 auto;
            }
            
            .actor-profile-name h1 {
                font-size: 2em;
                text-align: center;
            }
            
            .actor-profile-name h2 {
                font-size: 1.5em;
                text-align: center;
            }
            
            .actor-profile-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 10px;
            }
            
            .actor-profile-main {
                padding: 15px;
            }
            
            .actor-profile-photo {
                flex: 0 0 200px;
            }
            
            .actor-profile-name h1 {
                font-size: 1.8em;
            }
            
            .actor-profile-name h2 {
                font-size: 1.3em;
            }
            
            .actor-profile-biography {
                padding: 20px;
            }
        }
        
        
    /* для фильмовграфии */
        .filmography-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .film-card {
            background: var(--color-white);
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 30px;
            overflow: hidden;
        }

        .film-card-header {
            background: /*#2c3e50*/ linear-gradient(to right, #2c3e50, #1e222d);;
            /*color: white;*/
            padding: 20px 30px;
        }
        
        .lt .film-card-header {background:#f8f9fa}

        .film-card-title {
            font-size: 1.8em;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .film-card-subtitle {
            font-size: 1.1em;
            opacity: 0.9;
            line-height: 1.5;
        }

        .film-card-content {
            padding: 30px;
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
        }

        .film-card-main {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .film-card-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 10px;
        }

        .film-card-detail {
            display: flex;
            flex-direction: column;
        }

        .film-card-detail-label {
            font-weight: bold;
            /*color: #333;*/
            margin-bottom: 5px;
            font-size: 0.9em;
        }

        .film-card-detail-value {
            color: #666;
            font-size: 1.1em;
        }

        .film-card-ratings {
            display: flex;
            gap: 30px;
            align-items: center;
            flex-wrap: wrap;
        }

        .film-card-rating {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .film-card-rating-label {
            font-weight: bold;
            /*color: #333;*/
        }

        .film-card-rating-value {
            background: #e74c3c;
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-weight: bold;
        }

        .film-card-plot {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            border-left: 4px solid #3498db;
        }

        .film-card-plot-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: #2c3e50;
        }

        .film-card-plot-text {
            color: #444;
            line-height: 1.6;
        }

        .film-card-sidebar {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .film-card-poster {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
        }

        .film-card-poster img {
            width: 100%;
            height: auto;
            display: block;
        }

        .film-card-thanks {
            background: #27ae60;
            color: white;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
        }

        .film-card-thanks-value {
            font-size: 2em;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .film-card-thanks-label {
            font-size: 0.9em;
            opacity: 0.9;
        }

        /* Адаптивность */
        @media (max-width: 768px) {
            .film-card-content {
                grid-template-columns: 1fr;
                padding: 20px;
                gap: 20px;
            }

            .film-card-header {
                padding: 15px 20px;
            }

            .film-card-title {
                font-size: 1.5em;
            }

            .film-card-details {
                grid-template-columns: 1fr;
            }

            .film-card-ratings {
                gap: 20px;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 10px;
            }

            .film-card-header {
                padding: 15px;
            }

            .film-card-content {
                padding: 15px;
            }

            .film-card-title {
                font-size: 1.3em;
            }

            .film-card-ratings {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
        }

        /* Дополнительные стили для нумерованных списков */
        .film-card-detail-numbered {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .film-card-number {
            background: #3498db;
            color: white;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8em;
            font-weight: bold;
            flex-shrink: 0;
        }