@charset "UTF-8";

/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
/* ------------------ SLIDER (element positioning) ----------------- */
/* ----------------------------------------------------------------- */
/* ----------------------------------------------------------------- */
.button_slider{background-color: var(--color_mode_02);} /* -- has a special background color definition for the case that it might be positioned over an image -- */

:root {
	--slider__info_circle_size:    			  16px;	
	--slider__info_circle_opacity:    		     0;
	
	--menu_dropdown_box_top: 				  30px; 
	--slider_flex_basis_top: 				   6vh;
	--slider_flex_basis_bottom: 			   8vh;
	--slider_flex_grow: 						 1;	
	
	
	--slider__dot_size: 					   9px;
	--slider__dots_rotate: 		    	      0deg;
	--slider__dots_top:	    		    	  auto;
	--slider__dots_bottom: 					  33px;
	--slider__dots_left: 					   50%;
	--slider__dots_translateX:    translateX(-50%);	
	--slider__dots_transformation_origin:    0% 0%;

	--slider__back_button_top: 		    	   5px;
	--slider__back_button_bottom:             auto;	
	--slider__back_button_left: 	       	   0px;	
	--slider__back_button_display:    	    inline;
	
	--slider__image_description_border_left:  30px;
	--slider__image_description_bottom: 	  30px;
	--slider__image_description_display: 	inline;	

	--slider__navigation_right: 			  15px;
	--slider__navigation_bottom: 			  30px;
	--slider__navigation_translate: translateY(0%);

	--slider__dark_mode_toggle_top:  	      24px;
	--slider__dark_mode_toggle_left:     	 135px;}



/*----------------------*/
/*-- dark mode toggle --*/
/*----------------------*/
@media screen and (orientation: portrait)   and (max-width:  414px)						    { :root {--slider__dark_mode_toggle_left: 	      45px; }}
@media screen and (orientation: portrait)   and (min-width:  415px)						    { :root {--slider__dark_mode_toggle_left: 	      60px; }}
@media screen                               and (min-width:  957px)						    { :root {--slider__dark_mode_toggle_left: 	     135px; }}
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: portrait)   and (max-height: 956px)                         { :root {--slider__dark_mode_toggle_top:          18px; }} 
@media screen and (orientation: portrait)   and (min-height: 957px)                         { :root {--slider__dark_mode_toggle_top:          33px; }} 
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape)  and (max-width:  956px)                         { :root {--slider__dark_mode_toggle_left: 	     120px; }}
@media screen and (orientation: landscape)  and (min-width:  957px)                         { :root {--slider__dark_mode_toggle_left: 	     135px; }}
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape)  and (max-height: 956px)                         { :root {--slider__dark_mode_toggle_top:          18px; }} 
@media screen and (orientation: landscape)  and (min-height: 957px)                         { :root {--slider__dark_mode_toggle_top:          33px; }} 



/*------------*/
/*-- "BACK" --*/
/*------------*/
@media screen and (orientation: portrait)   and (max-width:  414px)                         { :root {--slider__back_button_left:               0px; }} 
@media screen and (orientation: portrait)   and (min-width:  415px)                         { :root {--slider__back_button_left:              15px; }} 




@media screen and (orientation: portrait)   and (min-width:  957px)						    { :root {--slider__back_button_left:              30px; }}	
/*
@media screen and (orientation: portrait)   and (max-width:  956px)						    { :root {--slider__back_button_display:           none; }}	
@media screen and (orientation: portrait)   and (min-width:  957px)						    { :root {--slider__back_button_display:         inline;
																									 --slider__back_button_left:              30px; }}	*/



/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: portrait)   and (max-height: 956px)                         { :root {--slider__back_button_top:                0px; }} 
@media screen and (orientation: portrait)   and (min-height: 957px)                         { :root {--slider__back_button_top:               15px; }} 
/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape)  and (max-width:  956px)						    { :root {--slider__back_button_left:              15px; }}	
@media screen and (orientation: landscape)  and (min-width:  957px)						    { :root {--slider__back_button_left:              30px; }}	
/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape)  and (max-height: 956px)                         { :root {--slider__back_button_top:       	       0px; }} 
@media screen and (orientation: landscape)  and (min-height: 957px)                         { :root {--slider__back_button_top:       	      15px; }} 



/*-----------------------*/
/*-- image description --*/
/*-----------------------*/
@media screen and (orientation: portrait)   and (max-width:  414px)						    { :root {--slider__image_description_border_left: 15px; }}
@media screen and (orientation: portrait)   and (min-width:  415px)						    { :root {--slider__image_description_border_left: 30px; }}
@media screen and (orientation: portrait)   and (min-width:  957px)						    { :root {--slider__image_description_border_left: 45px; }}
/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: portrait)   and (max-height: 956px)                         { :root {--slider__image_description_bottom:      15px; }} 
@media screen and (orientation: portrait)   and (min-height: 957px)                         { :root {--slider__image_description_bottom:      30px; }} 
/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape)  and (min-width:  957px)						    { :root {--slider__image_description_border_left: 45px; }}
/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape)  and (max-height: 956px)						    { :root {--slider__image_description_bottom:      15px; }}
@media screen and (orientation: landscape)  and (min-height: 957px)						    { :root {--slider__image_description_bottom:      30px; }}



/*----------------*/
/*-- navigation --*/
/*----------------*/
@media screen and (orientation: portrait)   and (max-width:  414px)   					    { :root {--slider__navigation_right: 	  	       0px; }}
@media screen and (orientation: portrait)   and (min-width:  415px)   					    { :root {--slider__navigation_right: 	  	      15px; }}
@media screen and (orientation: portrait)   and (min-width:  957px)   					    { :root {--slider__navigation_right: 	  	      30px; }}
/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: portrait)   and (max-height: 956px)                         { :root {--slider__navigation_bottom:              0px; }} 
@media screen and (orientation: portrait)   and (min-height: 957px)                         { :root {--slider__navigation_bottom:    	      15px; }} 
/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape)  and (max-width:  956px) 				 	    { :root {--slider__navigation_right: 	  	      15px; }}
@media screen and (orientation: landscape)  and (min-width:  957px) 				 	    { :root {--slider__navigation_right: 	  	      30px; }}
/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape)  and (max-height: 440px)						    { :root {--slider__navigation_bottom: 		       0px; }}
@media screen and (orientation: landscape)  and (min-height: 441px)						    { :root {--slider__navigation_bottom: 		      15px; }}



/*---------------------*/
/*-- (i) info circle --*/
/*---------------------*/
@media screen and (orientation: portrait)   and (max-width:  414px) 						{ :root {--slider__info_circle_left: 			  15px; }}
@media screen and (orientation: portrait)   and (min-width:  415px)                         { :root {--slider__info_circle_left: 			  30px; }}
@media screen and (orientation: portrait)   and (min-width:  957px)   					    { :root {--slider__info_circle_left: 	  	      45px; }}
/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: portrait)   and (max-height: 956px)							{ :root {--slider__info_circle_bottom: 			  15px; }}
@media screen and (orientation: portrait)   and (min-height: 957px)							{ :root {--slider__info_circle_bottom: 			  30px; }}
/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape)  and (max-width:  414px)     					{ :root {--slider__info_circle_left: 			  15px; }}
@media screen and (orientation: landscape)  and (min-width:  415px)     					{ :root {--slider__info_circle_left: 			  30px; }}
@media screen and (orientation: landscape)  and (min-width:  957px)     					{ :root {--slider__info_circle_left: 			  45px; }}
/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape)  and (max-height: 956px)						    { :root {--slider__info_circle_bottom: 		      15px; }}
@media screen and (orientation: landscape)  and (min-height: 957px)						    { :root {--slider__info_circle_bottom: 		      30px; }}
/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape) and (max-width:   956px) and (max-height: 440px) { :root {--slider__info_circle_left: 			  15px;
																									 --slider__info_circle_bottom:            15px; }}


/*-----------------*/
/*-- slider dots --*/
/*-----------------*/
@media screen and (orientation: portrait)   and (max-width:  956px)						  	{ :root {--slider__dots_top:      			      18px;
																								     --slider__dots_bottom:     	   	      auto; }}
@media screen and (orientation: portrait)   and (min-width:  957px)						  	{ :root {--slider__dots_top:      			      auto;
																									 --slider__dots_bottom:     	   	      18px; }}
@media screen and (orientation: portrait)   and (max-height: 956px)						  	{ :root {--slider__dots_top:      			      18px;
																									 --slider__dots_bottom:     	   	      auto; }}
@media screen and (orientation: portrait)   and (min-height: 957px)						  	{ :root {--slider__dots_top:      			      30px;
																									 --slider__dots_bottom:     	   	      auto; }}
/*---------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape) and (max-height:  956px)						    { :root {--slider__dots_top:      			      auto;
																									 --slider__dots_bottom:     	   	      18px; }}
/*-- i_Phone 16 Pro Max -- (landscape) -- dots are turned 90deg and positioned to upper left --------------------------------------------------------*/ 
@media screen and (orientation: landscape) and (max-width:   956px) and (max-height: 440px) { :root {--slider__dots_rotate:    			     90deg;
																								     --slider__dots_top:      			      60px;
																								     --slider__dots_bottom:     	   	      auto; 
																								     --slider__dots_left: 	     	   	      24px;
																								     --slider__dots_translateX:     translateX(0%); 
																									 --slider__info_circle_opacity: 		     1; 
																									 --slider__dark_mode_toggle_top:          15px;
																								     --slider__dark_mode_toggle_left: 	      45px;
																								     --slider__image_description_display:     none;
																							 	  /* --slider__back_button_top: 		      auto; */
																								 	 --slider__back_button_top: 		      -2px;

																									 --slider__back_button_left:               0px;	
																								  /* --slider__back_button_bottom:    	      25px; */	
																								     --slider__back_button_bottom:    	      auto;
	
																								     --slider__back_button_display:           none; 
																									 --slider__navigation_right: 	  	       0px;
																									 --slider__navigation_bottom: 		      15px; 
																									 --menu_button_y_offset_from_top: 		   5px; }}



@media screen and (orientation: landscape) and (max-width:  956px) and (max-height: 956px)  { :root {--slider__dark_mode_toggle_left:         60px; }}


@media screen and (orientation: landscape) and (max-height: 440px) 						    { :root {--slider_flex_basis_top: 			      15px;
																								     --slider_flex_basis_bottom: 	          15px;
																								     --slider_flex_grow: 					     0; }}

/*-------------------------------*/
/*-- menu (flys in from right) --*/
/*-------------------------------*/
@media screen and (orientation: landscape) and (max-height: 440px)							{ :root {--menu_dropdown_box_top: 			      -5px; }}
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/* ------------- end of SLIDER (element positioning) -------------- */
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */















	
	
	
	

	
	
/*-----------------------------------*/	
/*-----------------------------------*/		
/*-----------------------------------*/	
/*-- SLIDER (flexbox construction) --*/		
/*-----------------------------------*/	
/*-----------------------------------*/	
/*-----------------------------------*/	
.slider_container___browser_window_size {
    border: 			var(--layout_line) solid orange; box-sizing: border-box;
	background: 		var(--color_mode_02); 
	transition: 		background var(--transition_time_color_mode) ease-in-out;	
    display: 			flex;
    flex-direction: 	column;
    position: 			fixed;
    top: 				0px;
    z-index: 			-1; /* positions the slider / images behind all navigation elements */
    height: 			100vh;    
    height: 			100dvh; 
    width: 				100vw;}	

/*----------------------------------------------------*/		
/*----------------------------------------------------*/		
/*----------------------------------------------------*/		
	
.slider_container_head{
	border: 			var(--layout_line) solid blue; box-sizing: border-box;
	background: 		var(--color_mode_02); 
	transition: 		background var(--transition_time_color_mode) ease-in-out;
	flex-basis: 		var(--slider_flex_basis_top);
    flex-grow: 			var(--slider_flex_grow);
	flex-shrink: 		1;	
    min-height: 		15px;}	
	
/*----------------------------------------------------*/		
	
		.slider-container {
			border: 			var(--layout_line) solid cyan; box-sizing: border-box;			
			background: 		var(--color_mode_02); 
    		transition: 		background var(--transition_time_color_mode) ease-in-out;		
			position: 			relative;
			overflow: 			hidden;	
			object-fit: 		contain;
			flex-shrink: 		1;
			flex-grow: 			1;	
			flex-basis: 		86vh;			
			max-height: 		1100px;}
		.slider {
			border: 			var(--layout_line) solid black; box-sizing: border-box;	
			background: 		var(--color_mode_02); 
			transition: 		background var(--transition_time_color_mode) ease-in-out;			
			height: 			100%;
			display:     		flex;
			transition: 		transform 0.5s ease-in-out;}
		.slide {			
			border: 			var(--layout_line) solid orange; box-sizing: border-box;
			background: 		var(--color_mode_02); 
			transition: 		background var(--transition_time_color_mode) ease-in-out;				
			flex: 				0 0 100%; /*-- flex-grow -- flex-shrink -- flex-basis --*/}
		.slide img {
			background: 		var(--color_mode_02);
			transition: 		background var(--transition_time_color_mode) ease-in-out;				
			width: 				100%;
			height: 			100%;
			padding: 			0px 15px 0px 15px; /*-- space between slider images --*/
			object-fit: 		contain;}
	
/*----------------------------------------------------*/	
	
.slider_container_bottom{	
	border: 			var(--layout_line) solid yellow; box-sizing: border-box;	
	background: 		var(--color_mode_02); 
	transition: 		background var(--transition_time_color_mode) ease-in-out;	
	flex-basis: 		var(--slider_flex_basis_bottom);	
    flex-grow: 			var(--slider_flex_grow);
	flex-shrink: 		1;		
	min-height: 		15px;}
/*------------------------------------------*/
/*------------------------------------------*/		
/*------------------------------------------*/	
/*-- end of SLIDER (flexbox construction) --*/		
/*------------------------------------------*/	
/*------------------------------------------*/	
/*------------------------------------------*/	
	




/*---------------------*/
/*---------------------*/	
/*---- BACK BUTTON ----*/
/*---------------------*/	
/*---------------------*/
:root{   				--slider__back_button_opacity_delay: 175ms;
						--slider__back_button_opacity:           1;
						--back_arrows_size_of_slider: 		   9px;}
	
.back_arrow_left_of_slider, .back_arrow_right_of_slider{	
	background-color: 	transparent;
	position: 			relative;
	left: 				4px;
	top: 				4px;
	width: 				var(--back_arrows_size_of_slider);
	height: 			var(--back_arrows_size_of_slider);
	transform:   		rotate(-45deg);
	border-top: 		2px solid var(--color_mode_01);
	border-left: 		2px solid var(--color_mode_01);	
	box-sizing: 		border-box;
	transition:  		border var(--transition_time_color_mode) ease-in-out;}
	
.back_arrow_right_of_slider{
	left: 				11px;
	top:  				-5px;}	

.container_back_button_slider {
	border: 			var(--layout_line) solid lightgray; box-sizing: border-box;
	cursor: 			pointer;
	position: 			fixed;
	top: 				var(--slider__back_button_top);
	bottom: 			var(--slider__back_button_bottom);
	left: 				var(--slider__back_button_left);
	padding: 			15px 15px 5px 15px; 
	display: 			flex;
	flex-direction: 	row;
	align-items: 		baseline;
	gap: 				10px;
	background: 		transparent;
	transition: 		color 	   var(--transition_time_color_mode) ease-in-out,
						background var(--transition_time_color_mode) ease-in-out,
   				    	left       var(--transition_time_padding)    ease-in-out,
						top        var(--transition_time_padding)    ease-in-out;}
.slider_back_button {
	position: 			relative;
	top: 				-4px;
	left: 				7px;
	opacity: 			var(--slider__back_button_opacity);
	border: 			var(--layout_line) solid lightgreen; box-sizing: border-box;	
	transition: 		color var(--transition_time_color_mode) ease-in-out,
						opacity 175ms ease-in-out var(--slider__back_button_opacity_delay);		
	font-family: 		var(--font_light);
	font-size: 			15px;
	letter-spacing: 	var(--letter_spacing_font_body);
	color: 				var(--color_mode_01);}	
@media screen and (max-width:  956px)	{ :root {--slider__back_button_opacity_delay: 250ms;
												 --slider__back_button_opacity:           0; }}	
@media screen and (min-width:  957px)	{ :root {--slider__back_button_opacity_delay: 450ms;
												 --slider__back_button_opacity:           1; }}
/*----------------------------*/
/*----------------------------*/	
/*---- end of BACK BUTTON ----*/
/*----------------------------*/	
/*----------------------------*/






/*--------------------------*/
/*--------------------------*/	
/*---- DARK MODE TOGGLE ----*/
/*--------------------------*/	
/*--------------------------*/
.slider_dark_mode_toggle {
	position: 			fixed;
    z-index: 			2;	
	border: 			var(--layout_line) solid red; box-sizing: border-box;
    background: 		transparent;	
	transition: 		left var(--transition_time_padding)    ease-in-out,
						top  var(--transition_time_padding)    ease-in-out;		
	top: 				calc(var(--slider__dark_mode_toggle_top) - 15px);
	left: 				var(--slider__dark_mode_toggle_left);
    padding: 			15px 15px 15px 0px;
	width: 				50px;	
/*	height: 			41px; */
    cursor: 			pointer;}
	
.symbol_dark_mode_toggle {
    display: 			flex;
    align-items: 		stretch;
/*  position: 	 		fixed; */
/*  z-index: 	 		2; */
/*  top: 				var(--slider__dark_mode_toggle_top);
    left: 				var(--slider__dark_mode_toggle_left); */
    color: 				var(--color_mode_01);
    border: 			0.1rem solid var(--color_mode_01);
/*  background: 		transparent; */
/*  cursor: 			pointer; */
    width: 				1.8rem;
    height: 			12px;
	transition: 		color 		var(--transition_time_color_mode) ease-in-out,
				 		background 	var(--transition_time_color_mode) ease-in-out,
						border 		var(--transition_time_color_mode) ease-in-out,
						left 		var(--transition_time_padding)    ease-in-out,
						top 		var(--transition_time_padding)    ease-in-out;
    padding: 			0;
    margin: 			0;}
/*---------------------------------*/
/*---------------------------------*/	
/*---- end of DARK MODE TOGGLE ----*/
/*---------------------------------*/	
/*---------------------------------*/ 






/*---------------------------------------*/
/*---------------------------------------*/
/*-- IMAGE DESCRIPTION (of the slider) --*/	
/*---------------------------------------*/
/*---------------------------------------*/ 
.slider_text_white_marker_background {
	background: 		rgba(255,255,255,1.0);
	padding: 			0.12em 0.0em 0.3em 0.0em;}
.separator { 
	white-space: 		nowrap; } 
.responsive-break { 
	display: 			inline; }
.text_image_description_bold {
	text-transform: 	uppercase;
	font-family: 		var(--font_bold);}	
.text_image_description {
	line-height: 		16px;
	border: 			var(--layout_line) solid orange;
	border-left: 		var(--slider__image_description_border_left) solid var(--color_mode_02);
	position: 			fixed;
	left: 				0px;
    bottom: 			var(--slider__image_description_bottom);
    font-family: 		var(--font_light);
    font-size:      	1.1rem;  
	letter-spacing: 	var(--letter_spacing_font_body);
    color:          	var(--color_mode_01);
	background: 		var(--color_mode_02);
	opacity: 			var(--layout_opacity);	
	display: 			var(--slider__image_description_display);	
    transition:     	background   var(--transition_time_color_mode) ease-in-out,
						color        var(--transition_time_color_mode) ease-in-out,
						border-left  var(--transition_time_padding)    ease-in-out,
						border-color var(--transition_time_color_mode) ease-in-out,
						bottom       var(--transition_time_padding)    ease-in-out;}
/*----------------------------------------------*/
/*----------------------------------------------*/
/*-- end of IMAGE DESCRIPTION (of the slider) --*/	
/*----------------------------------------------*/
/*----------------------------------------------*/




/*------------------------------------*/
/*------------------------------------*/
/*---- NAVIGATION (of the slider) ----*/		
/*------------------------------------*/	
/*------------------------------------*/
.arrow {
	font-family: 		"music";
	border: 			var(--layout_line) solid orange; box-sizing: border-box;
	position: 			relative;
	transition: 		var(--transition_time_color_mode) ease-in-out;	
	color: 				var(--color_mode_01);
	font-size: 			var(--font_size_music_buttons);
	cursor: 			pointer;}
/* .arrow.left    {padding: 0px 15px 0px 15px;} */
/* .arrow.right   {padding: 0px 15px 0px 15px;} */
 .arrow.left  {padding: 15px 15px 15px 15px;}
 .arrow.right {padding: 15px 15px 15px 15px;}
	
.stop-button {
	border:      		var(--layout_line) solid red; box-sizing: border-box;
	position:    		relative;
	transition:  		var(--transition_time_color_mode) ease-in-out;
	margin:      		0;
    padding:     		15px 15px 15px 15px;
    color: 		 		var(--color_mode_01);
	font-family: 		"music";
	font-size: 	 		var(--font_size_music_buttons);
	cursor: 	 		pointer;}
	
.slider_navigation_container{
	border: 			var(--layout_line) solid cyan; box-sizing: border-box;
	position: 			fixed;
    bottom: 			var(--slider__navigation_bottom);	
	transform:  		var(--slider__navigation_translate);
    right: 				var(--slider__navigation_right);	
	display: 			flex;
    color: 				var(--color_mode_01);	
	background: 		var(--color_mode_02);
	opacity:			var(--layout_opacity);	
    transition: 		background var(--transition_time_color_mode) ease-in-out,
						color      var(--transition_time_color_mode) ease-in-out,
						right      var(--transition_time_padding)    ease-in-out,
						bottom     var(--transition_time_padding)    ease-in-out;}
/*-------------------------------------------*/
/*-------------------------------------------*/
/*---- end of NAVIGATION (of the slider) ----*/		
/*-------------------------------------------*/	
/*-------------------------------------------*/




/*------------------------------*/
/*------------------------------*/
/*---- DOTS (of the slider) ----*/	
/*------------------------------*/
/*------------------------------*/	
.dots-container {
	transform: 			var(--slider__dots_translateX);
	position: 			fixed;
	rotate: 			var(--slider__dots_rotate);
	top: 				var(--slider__dots_top);
	bottom: 			var(--slider__dots_bottom);
	left: 				var(--slider__dots_left);
	transform-origin: 	var(--slider__dots_transformation_origin);
	align-items: 		center;
	border: 			var(--layout_line) solid lightgray; box-sizing: border-box;
	display: 			flex;
	gap: 				10px;
	background: 		transparent;
	opacity: 			var(--layout_opacity);		
    transition: 		border     var(--transition_time_color_mode) ease-in-out,
						background var(--transition_time_color_mode) ease-in-out,
						rotate     0s	      						   ease-in-out,
						bottom     var(--transition_time_padding)    ease-in-out,
						top        var(--transition_time_padding)    ease-in-out;}
.dot {
	width: 				var(--slider__dot_size);
	height: 			var(--slider__dot_size);
	background: 		var(--color_mode_02);
	border: 			1px solid var(--color_mode_01);
	box-sizing: 		border-box;
	border-radius: 		50%;
	cursor: 			pointer;
	transition: 		background 350ms;}

.dot.active {
	background: 		var(--color_mode_01);}
/*---------------------*/
/*---------------------*/
/*---- end of DOTS ----*/	
/*---------------------*/
/*---------------------*/




/*-------------------------------------*/
/*-------------------------------------*/
/*---- (i) info circle (in slider) ----*/	
/*-------------------------------------*/
/*-------------------------------------*/
.container_info_circle_slider{
	z-index: 			100;
	position: 			absolute;
	left: 				0px;
	bottom: 			0px;
	width: 				50px;
	height: 			50px;
	border: 			0px solid red; box-sizing: border-box;
	background: 		transparent;
	display: 			inline-block;}

.info_circle_slider {
	display: 			none; 
	cursor: 			pointer;
	opacity: 			var(--slider__info_circle_opacity);
	position: 			absolute;	
	left: 				var(--slider__info_circle_left);
	bottom:  			var(--slider__info_circle_bottom);		
	width: 				var(--slider__info_circle_size);
	height: 			var(--slider__info_circle_size);
	border: 			1.5px solid var(--color_mode_01);
	border-radius: 		50%; 
	background-color: 	var(--color_mode_02);
	display: 			flex;
	align-items: 		center;    
	justify-content: 	center; 
	font-family: 		var(--font_regular);
	font-size: 			12px;         
	line-height: 		1;
	transition: 		opacity 175ms 							ease-in-out,
						left    var(--transition_time_padding)  ease-in-out,
						bottom  var(--transition_time_padding)  ease-in-out;}
/*--------------------------------------------*/
/*--------------------------------------------*/
/*---- end of (i) info circle (in slider) ----*/	
/*--------------------------------------------*/
/*--------------------------------------------*/