/* NORMAL TYPE */
.diashow
{
	--width_diashow_button: 2rem;
	--color_diashow_button_normal: var(--colr_back_prim);
	--color_diashow_button_hover: #78a210;
	--back_diashow_button: transparent;

	--diashow_font: var(--ff_p);

	--ff_diashow_h2: var(--ff_h2);
	--fs_diashow_h2: var(--fs_h2);
	--fw_diashow_h2: var(--fw_h2);

	--ff_diashow_p: var(--ff_p);
	--fs_diashow_p: var(--fs_p);
	--fw_diashow_p: var(--fw_p);
	--col_diashow: var(--colr_text_prim);

	--diashow_container_background: var(--colr_back_prim);


	margin: var(--std_margin);
}

.img-txt, .img, .img-txt-static
{
	z-index: 0;
	display: grid;
	position: relative;
	height: auto;
	grid-template-columns: 100%;
	grid-template-rows: 100%;

	background: var(--diashow_container_background);
}

.img-txt button, .img button, .img-txt-static button
{
	display: block;
	width: var(--width_diashow_button);
	height: var(--width_diashow_button);
	border-style: none;
	position: relative;

	margin: 0;
	white-space: nowrap;
	color: var(--color_diashow_button_normal);
	background: var(--back_diashow_button);
	grid-row: 1/2;
	grid-column: 1/2;
}

.img-txt button:hover, .img button:hover, .img-txt-static button:hover
{
	color: var(--color_diashow_button_hover);
}

.img-txt .dia_button_left, .img .dia_button_left, .img-txt-static .dia_button_left
{
	top: calc(50% - var(--width_diashow_button));
	left: 0%;
}

.img-txt .dia_button_right
{
	right: calc(-50% + var(--width_diashow_button));
	top: calc(50% - var(--width_diashow_button));
}

.img-txt-static .dia_button_right
{
	right: calc(-100% + var(--width_diashow_button));
	top: calc(50% - var(--width_diashow_button));
}

.img-txt .cnt
{
	top: 0;
	position: relative;
	z-index: -1;
	display: grid;
	width: 100%;
	height: auto;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto auto;
	grid-row: 1/2;
	grid-column: 1/2
}

.img-txt-static .cnt
{
	top: 0;
	position: relative;
	z-index: -1;
	display: grid;
	width: 100%;
	height: auto;
	grid-template-columns: 100%;
	grid-template-rows: auto auto;
	grid-row: 1/2;
	grid-column: 1/2
}

.img-txt .cnt img, .img .cnt img,  .img-txt-static .cnt img
{
	width:100%;
	grid-column: 1/2;
	grid-row: 1/2;
	border-radius: 1rem;
}

.img-txt .cnt .ind,  .img-txt-static .cnt .ind
{
	font-family: var(--ff_p);
	grid-row: 2/3;
	position: relative;
	bottom: 100%;
	background: linear-gradient(90deg, #d1dfad,transparent);
	color: #393d2d;
	padding: 0.5rem;
	font-weight: bolder;
	border-radius: 0 0 0 1rem;
}

.img-txt .cnt .txt
{
	margin-left: var(--std_margin);

	color: var(--col_diashow);
	width:100%;
	grid-column: 2/3;
	grid-row: 1/3;
}

.img-txt-static-wrapper
{
	display: grid;
	grid-template-columns: 50% 50%;
}

.img-txt-static-wrapper .static_txt
{
	margin-left: var(--std_margin);

	color: var(--col_diashow);
	width:100%;
	grid-column: 2/3;
	grid-row: 1/3;
}

.img-txt .cnt .txt p, .img-txt-static-wrapper .static_txt p
{
	font-family: var(--ff_diashow_p);
	font-size: var(--fs_diashow_p);
	font-weight: var(--fw_diashow_p);
	text-align: justify;
}

.img-txt .cnt .txt h2, .img-txt-static-wrapper .static_txt h2
{
	font-family: var(--ff_diashow_h2);
	font-size: var(--fs_diashow_h2);
	font-weight: var(--fw_diashow_h2)
}

/* IMG TYPE */

.img .cnt
{
	top: 0;
	position: relative;
	width: 100%;
	height: auto;
	grid-template-columns: 100%;
	grid-row: 1/2;
	grid-column: 1/2;
	grid-template-rows: auto auto;
}

.img .dia_button_right
{
	right: calc(-100% + var(--width_diashow_button));
	top: calc(50% - var(--width_diashow_button));
}