.container_morfo_cup {
		display: flex;
                flex-wrap: wrap;
	}

    .morfometrie {
		background-color: rgb(238, 238, 238);
		font-size: 16px;
		flex: 4;
                min-width: 400px;
	}
	
	.cuprins {
		flex: 1;
                min-width: 140px;
	}

	.tocc {
		float: right;
		background-color: #b1892214;
		
		border: 1px solid #aaa;
		font-size: 95%;
	}

	#toc_container {
		display: none;
	}
	
	ul.toc_list {
		margin: 0 3.5em 0 -05em;
	}



	/* dezactivare meniu site fix - care nu se deruleaza la scroll */
	.pen_header {
		position: unset !important;
	}

	.site-header {
		position: unset !important;
	}

	body {
		padding-top: unset !important;
	}
	/* sf dezactivare */
	
	/* div# */
	.cave_model_scene_1 {
				
				/*position: relative;*/
				/* width: auto;*/
				
				
				/* height: 800px;*/			
				/* width: 650px; */
				/* width: 350px; */
				/* height: 80%;  */
				height: calc(80vh);
				font-size: x-large;
			}
	
	.columncontent {
		/* column-count: 2; */
		display: flex;
		flex-wrap: nowrap;	
	}
	
	.cave_scene_content1_row_column1 {
	  float: left;
	  width: 40%;	  
	  /* 40%; */	  
	  break-inside: avoid-column;
	  /* display: table; */
	  flex: 1;
	  display: block;
	}
	
	.cave_scene_content1_row_column2 {
	  float: right;
	  /*float: none;*/
	  /*float: left;*/
	  width: 60%;
	  break-inside: avoid-column;
	  /* display: table; */
	  flex: 1;
	}
	
	/* Clear floats after the columns */
	.cave_scene_content_row:after {
	  content: "";
	  display: table;
	  clear: both;
	}


	/* -------- */
	/* implicit */

	.cave_scene_content1_row_column1
	{		
		/* width: calc(25vw); */
		
		/* max-width: 310px; */
		width: 20%;

		/* strica layout-ul - sare modelul peste in stanga */
		min-width: 310px;

		max-width: 310px !important;
		/* width: calc(100vw - 520px); */
	}

	.cave_scene_content1_row_column2 {
		/* width: calc(85vw); */
		/* width: calc(85vw); */
		/* width: 80%; */
		/* width: calc(50%); */
		width: 50%;
	}

	.cave_model_scene_1 {
		/* width: 95%; */
		width: 105% !important;
		height: calc(80vh) !important;
	}
	
	.xcontent1_row_column1 {
		/* background-color: purple; */
	}

	.cave_scene_content1_row_column2 {
    	/* width: calc(100% - 350px); */
	}

	#content .wp-block-group:not(.alignwide):not(.alignfull) * {
		/*max-width: unset;*/
		margin-left: 0;
	}
	/* .cave_model_scene_1 {
			width: 350px;
	} */


	/* @media screen and (min-width: 1280px) {
	
		.cave_model_scene_1 {
			/* width: 400px; *
			width: calc(100vw - 720px);
			/* calc(100vw - 900px); *

		}

		.xcontent1_row_column1 {
			background-color: pink;
		}

	} */
	
	
	.xcontent1_row_column1 {
			/* background-color: mediumvioletred; */
		}

	/* 
	  //or, modern way of creating two columns, is to use CSS Flexbox
	
	.row {
	  display: flex;
	}
	
	.column {
	  flex: 50%;
	}
	*/
	
	.reset_style {
		all: unset; 
	}
	
	.puncte_aven {
		
	}
	
	.puncte_aven a:link {
		/* font-size: smaller; */
		/*color: #fff;*/
	}
	
	.xcolumncontent {
		column-count: 2;
	}
	
	.xcontent1_row_column1 {
	   /* float: left; */
	  /* width: 80%; */
	  /* break-inside: avoid-column; */
	  /* display: table; */
	  /* display: flex; */
	}
	
	.xcontent1_row_column2 {
	  float: none;
	  /*float: left;*/
	  width: 20%;
	  break-inside: avoid-column;
	  display: table;
	}
	
	.puncte_vertical_scroll {
		overflow-y: scroll;
		height: calc(55vh);
		/* height: calc(62vh); */
		min-width: 250px;
		/* width: calc(20vw); */
		/* height: calc(42vh); */
		/* height: calc(100vw - 80px); */
	}
	
	.remove_all_styles { 
				all: unset; 
			} 
	
	.cv2_button {
	  border-radius: 10px !important;
	  background: linear-gradient(0deg, #7097ce 0%, #0090ffdb 100%);
	  padding: 0.25rem 0.5rem !important;
	}
	
	.cv2_button:hover {
		background-color: lightcoral !important;
	}

	.cave_point_container {
		/* background-color: #; */
		
		/* display: flex; */
		display: table-row-group;
		/* align-items: unset; */
		
	}
	
	.cave_point_container:hover {
		background-color: rgb(247, 133, 99) !important;
	}
	
	.cave_point_container:nth-child(odd) {
		background-color: #e0dbdb;
	}
	.cave_point_container:nth-child(even) {
		background-color: #ebebeb;
	}
	
	.cave_point_depth {
		/* background-color: rgb(230, 180, 230); */
		float: left;
		flex: 1;
		width: 100px;
	}
	
	.cave_point_model_href {
		/* background-color: rgb(216, 140, 140); */
		font-size: larger;
		flex: 1;
		width: 100px;
	}
	
	.point_pictures_link {
		/* background-color: rgb(167, 167, 240); */
		float: right;
		flex: 1;
	}
	
	.point_pictures_link:hover {
	  text-decoration: underline;
	  background-color: lightcoral;  
	  color: mediumblue;
	  font-weight: bold;
	  cursor: zoom-in;
	}
	
	
	.point_pictures {
		display: none;
	}
	
	
	.radio_on_line_fieldset {
		  overflow: hidden
		}
	
	.one_line_radio_boxes {
		  float: left;
		  clear: none;
		}
		
	.horizontal_aligned_labels {
		  float: left;
		  clear: none;
		  display: block;
		  padding: 0px 1em 0px 8px;
		}
	
	input[type=radio],
	input.radio {
		  float: left;
		  clear: none;
		  margin: 2px 0 0 2px;
		}
	
		.cv_picture_box {
			position: absolute;
			/* top: 0px; */		
			z-index: 200;
			transform: none;
			transition: transform 0.25s ease-in;
			bottom: 0;
	
			/* width: 80px; */
			/* height: 200px; */
			width: 210px;
		}
	
		.point_thumbnail_picture_big {
			height: 200px;
			width: 200px;
			margin-right: 1em;
		}
	
		.point_thumbnail_picture_small {
			height: 100px;
			width: 100px;
		}

		/* from https://stackoverflow.com/a/1964871 */
		/* Start by setting display:none to make this hidden.
		Then we position it in relation to the viewport window
		with position:fixed. Width, height, top and left speak
		for themselves. Background we set to 80% white with
		our animation centered, and no-repeating */
		.cv_loading_progress_overlay_modal {
			display:    none;
			/* position:   fixed; */
			position: relative;
			z-index:    1000;
			top:        0;
			left:       0;
			height:     100%;
			width:      100%;
			background: rgba( 255, 255, 255, .8 ) 
						url('/grind/caveview/build/CaveView/images/progress_loading.gif') 
						50% 50% 
						no-repeat;
		}

		/* When the body has the loading class, we turn
		the scrollbar off with overflow:hidden */
		.cv_loading_overflow {
			overflow: hidden;
		}

		/* Anytime the body has the loading class, our
		modal element will be visible */
		.cv_loading_visible {
			display: block;
		}


		div#cave_model_scene_1_caption {
			position: absolute;
			top: 8px;
			left: 100px;
			color: white;
			background-color: black;
		}

		/* div#info {
			box-sizing: border-box;
			width: 33.333%;
			padding: 0 20px;
			float: left;
		} */

		.point_thumbnail_pictures {
			display: inline-flex;
			margin-right: 1em;
		}

		.gonextColumn {
			/* background:#000; */
			margin-bottom:200px; /* a big value here */
		}
		.gonextColumn + * {
			margin-top:-179px; /* the opposite of the big value minus the real margin*/
		}
	


    .cv_2_columncontent {
        /* column-count: 2; */
        display: flex;
        flex-wrap: nowrap;	
    }
    
    .cv_2_cave_scene_content1_row_column1 {
      float: left;
	  width: 20%;	  
	  /* 40%; */	  
	  break-inside: avoid-column;
	  /* display: table; */
	  flex: 1;
	  display: block;

      min-width: 120px;
      max-width: 180px !important;
    }
    
    .cv_2_cave_scene_content1_row_column2 {
        float: right;
	  /*float: none;*/
	  /*float: left;*/
	  width: 80%;
	  break-inside: avoid-column;
	  /* display: table; */
	  flex: 1;
    }
    

	.cave_model_scene_2 {
		/* width: 95%; */
		width: 105% !important;
		height: calc(80vh) !important;
	}


    .terrain_opacity_control {
        display: flex;
    }
    
    .one_line {
        display: flex;
    }

    
    div#cave_model_scene_2_caption {
			position: absolute;
			top: 8px;
			left: 100px;
			color: white;
			background-color: black;
            font-size: 2em;
		}

		/* from https://stackoverflow.com/a/1964871 */
		/* Start by setting display:none to make this hidden.
		Then we position it in relation to the viewport window
		with position:fixed. Width, height, top and left speak
		for themselves. Background we set to 80% white with
		our animation centered, and no-repeating */
		.cv_scene2_loading_progress_overlay_modal {
			display:    none;
			/* position:   fixed; */
			position: relative;
			z-index:    1000;
			top:        0;
			left:       0;
			height:     100%;
			width:      100%;
			background: rgba( 255, 255, 255, .8 ) 
						url('/grind/caveview/build/CaveView/images/progress_loading.gif') 
						50% 50% 
						no-repeat;
		}

		/* When the body has the loading class, we turn
		the scrollbar off with overflow:hidden */
		.cv_scene2_loading_overflow {
			overflow: hidden;
		}

		/* Anytime the body has the loading class, our
		modal element will be visible */
		.cv_scene2_loading_visible {
			display: block;
		}

    


.surface_map_1 {
	/* width: 100%; */
	width: calc(99vw);
	height: calc(99vh);
}

/* body, html {
    height: 100%;
    margin: 0;
} */
.fullScreen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}



.bwg_slideshow_description_text_2 {
  font-size: unset !important;
}



table iframe.youtube-player {
    height: unset !important;
    border: unset !important;
}

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { /*border: 1px solid #ccc;*/ }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		/*border-bottom: 1px solid #eee; */
		position: relative;	 
	}
}

/* ==========================================================================
 * Responsive layout for the 3D scenes, their controls and the surface map.
 *
 * The page used to answer a phone by deleting both models and offering a link
 * to a standalone page instead. They are shown to everyone now, so the layouts
 * they sit in — two fixed-width columns side by side, a scene 105% as wide as
 * its own column, a map iframe sized 99vw by 99vh — have to survive a narrow
 * screen. Everything below is an override; none of the desktop rules moved.
 *
 * This is the last stylesheet on the page, which is what lets these win over
 * the equally-specific !important widths declared further up.
 * ========================================================================== */

/* Nothing here may push the document wider than the screen: a horizontal
   scrollbar on the whole article is the one defect that makes every other
   thing on the page harder to use. */
.entry-content img,
.entry-content iframe,
.entry-content video {
	max-width: 100%;
}

/* The links in the prose that fly the model to a place, or point one out on the
   surface map. They carry no href — their behaviour is bound from script — so the
   theme styles them as ordinary text and nothing says they can be clicked. The
   dotted underline distinguishes them from the page's ordinary outbound links. */
a.cv_goto,
a.cv_map_feature,
a.cv_map_drainage {
	color: #1a6ebd;
	cursor: pointer;
	text-decoration: underline dotted;
	text-underline-offset: 2px;
}

a.cv_goto:hover,
a.cv_map_feature:hover,
a.cv_map_drainage:hover {
	text-decoration: underline solid;
	background-color: #e8f2fb;
}

/* Several references are written out as the bare URL they point at, which is one
   unbreakable word some 430px long — wider than a phone, and the widest thing on
   the page once the models fit. */
.entry-content p,
.entry-content li,
.entry-content a {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Below this the two-column arrangement (controls beside the model) stops
   fitting: the control column alone is pinned at 310px. */
@media (max-width: 1100px) {

	.columncontent,
	.cv_2_columncontent {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}

	/* The control columns are pinned to 310px/180px by a min-width and an
	   !important max-width, so all three have to be released together. */
	.cave_scene_content1_row_column1,
	.cv_2_cave_scene_content1_row_column1,
	.cave_scene_content1_row_column2,
	.cv_2_cave_scene_content1_row_column2 {
		float: none;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
	}

	/* 105% of the column was how the model was given a little more room than
	   its half of the row; stacked, that is simply an overflow. */
	.cave_model_scene_1,
	.cave_model_scene_2 {
		width: 100% !important;
		height: 65vh !important;
		min-height: 340px;
	}

	/* Two columns of controls in a full-width block leaves long thin strips. */
	.xcolumncontent {
		column-count: 1;
	}

	/* The point list no longer shares vertical space with anything beside it. */
	.puncte_vertical_scroll {
		height: 50vh;
		min-width: 0;
	}

	/* Captions are absolutely positioned 100px from the left edge of a scene
	   that used to be at least 600px wide. */
	div#cave_model_scene_1_caption,
	div#cave_model_scene_2_caption {
		left: 8px;
		right: 8px;
		font-size: 1.2em;
		line-height: 1.25;
		word-wrap: break-word;
	}

	/* 99vw inside a narrower column is an overflow, and 99vh leaves no room
	   for the controls that drive the map. */
	.surface_map_1 {
		width: 100% !important;
		height: 70vh !important;
		min-height: 340px;
	}
}

@media (max-width: 640px) {

	.cave_model_scene_1,
	.cave_model_scene_2 {
		height: 60vh !important;
		min-height: 300px;
	}

	.surface_map_1 {
		height: 60vh !important;
		min-height: 300px;
	}

	.puncte_vertical_scroll {
		height: 45vh;
	}

	/* Controls were laid out for a mouse: a 24px-high button is not a tap
	   target, and rows of them set with float need to wrap instead. */
	.cv2_button,
	.remove_all_styles.cv2_button {
		min-height: 40px;
		padding: 0.45rem 0.7rem !important;
		font-size: 15px;
	}

	.one_line,
	.terrain_opacity_control {
		flex-wrap: wrap;
		gap: 4px;
	}

	.cave_point_depth,
	.cave_point_model_href {
		width: auto;
	}

	/* "poze" sits at the right end of a point row; floated, it drops out of
	   the row on a narrow screen and lands on the next point. */
	.point_pictures_link {
		float: none;
	}

	.cave_point_container {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 8px;
		padding: 4px 2px;
	}

	div#cave_model_scene_1_caption,
	div#cave_model_scene_2_caption {
		font-size: 1em;
	}

	/* The hover thumbnail strips are a mouse affordance; on a touch screen they
	   are opened by tapping a point and must not cover the model. */
	.cv_picture_box {
		max-width: 100%;
	}

	.point_thumbnail_picture_big,
	.point_thumbnail_picture_small {
		max-width: 30vw;
		height: auto;
	}

	/* The morphometry table and the table of contents sit side by side, held
	   apart by a 400px minimum on the table. Left as a row they share a phone's
	   width between them and the table becomes a 176px column of wrapped words. */
	.container_morfo_cup {
		flex-direction: column;
	}

	.morfometrie,
	.cuprins {
		min-width: 0;
		width: 100%;
	}

	.tocc {
		float: none;
	}
}

/* --------------------------------------------------------------------------
 * The viewer's stylesheet assumes, below 768px, that it owns the page:
 *
 *   body div.cv-container:not( .toggle-fullscreen ) {
 *       position: fixed !important; top/bottom/left/right: 0 !important; z-index: 999 }
 *
 * That is right for the standalone model pages, where the viewer IS the page, and
 * wrong for two viewers embedded in an article — each one covers the whole screen
 * in black, permanently, and the article behind it cannot be reached. Both the
 * 2.0.2 build and the 2.9.0 fork carry the rule, so this override is needed either
 * way. The selector is deliberately narrower than the one it overrides: it names
 * these two scenes, so a viewer opened fullscreen on purpose is untouched.
 * -------------------------------------------------------------------------- */
@media (max-width: 767px) {

	body div.cave_model_scene_1.cv-container:not(.toggle-fullscreen),
	body div.cave_model_scene_2.cv-container:not(.toggle-fullscreen) {
		position: relative !important;
		top: auto !important;
		bottom: auto !important;
		left: auto !important;
		right: auto !important;
		width: 100% !important;
		height: 60vh !important;
		min-height: 300px;
		margin: 0 !important;
		z-index: auto;
	}

	/* With the default above no longer being fullscreen, the "Ecran complet" button
	   needs to mean something here too — the viewer only styles that state above
	   768px, because below it fullscreen was where every viewer already was. */
	body div.toggle-fullscreen {
		position: fixed !important;
		top: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		z-index: 999;
	}
}

/* A viewer in fullscreen has to clear the theme's own fixed chrome. The mobile
   navigation bar is z-index 50001 and the viewer's stylesheet stops at 999, so
   without this a "fullscreen" model wears that bar across its top — exactly over
   the strip the viewer puts its own tabs in. */
body div.cv-container.toggle-fullscreen {
	z-index: 50002 !important;
}

/* The surface map's own buttons are plain inline-styled buttons; these are the
   only rules they have, and they matter most where a finger has to hit them. */
.surface_map_button {
	cursor: pointer;
	min-height: 32px;
}

@media (max-width: 640px) {
	.surface_map_button {
		min-height: 40px;
		padding: 0.45rem 0.7rem !important;
		font-size: 15px;
		float: none !important;
		margin: 2px 0;
	}
}