:root  {
      --tr-size: 2rem;
	--sub-size: 1rem;
}

.narrowScr  {
	display: none;
	visibility: hidden;
}

.normTxtL  {
      text-align: right;
}

.normTxtR  {
      text-align: left;
}

.joinedTxtL  {
      text-align: right;
}

.joinedTxtR  {
      text-align: left;
}
.grid-container {
      display: grid;
      grid-template-columns: 2% auto 6% auto 2%;
      grid-template-areas:
                'grd_hdr  grd_hdr       grd_hdr       grd_hdr       grd_hdr'
                'grd_gapL grd_baniBlock grd_baniBlock grd_baniBlock grd_gapR'
                'grd_back grd_showimg   grd_showimg   grd_showimg   grd_forwd'
                'grd_back grd_joinlt    grd_blnk      grd_joinrt    grd_forwd'
                'grd_back grd_txtlt     grd_blnk      grd_txtrt     grd_forwd';
      row-gap: 0.625rem;
      column-gap: 0px;
      background-color: #2196F3;
      padding: 0px;
}

.grid-container > div {
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding: 1rem;
      font-size: 1.16rem;
      /* font-family: ChatrikUni; */
}

.bottom_left {
      position: absolute;
      bottom: 2rem;
      left: 2rem;
      font-size: 0.9rem;
      font-weight: 800;
      color: blue;
}

.bottom_right {
      position: absolute;
      bottom: 2rem;
      right: 2rem;
      font-size: 0.9rem;
      font-weight: 800;
      color: blue;
}

@media only screen and (max-width: 900px) {

	.grid-container {
		display: grid;
		grid-template-columns: 1% auto 2% auto 1%;
		grid-template-areas:
			'grd_hdr  grd_hdr       grd_hdr       grd_hdr       grd_hdr'
	    		'grd_gapL grd_baniBlock grd_baniBlock grd_baniBlock grd_gapR'
		    	'grd_back grd_showimg   grd_showimg   grd_showimg   grd_forwd'
		    	'grd_back grd_joinlt    grd_blnk      grd_joinrt    grd_forwd'
	    		'grd_back grd_txtlt     grd_blnk      grd_txtrt     grd_forwd';
		row-gap: 0.937rem;
		column-gap: 0px;
	}

	.grid-container > div {
		padding: 0.6rem;
		font-size: 0.9rem;
	}

	.bottom_left {
		/* position: absolute; */
		bottom: 1.8rem;
		left: 1.6rem;
 		font-size: 0.8rem;
		/* font-weight: 800; */
		/* color: blue;  */
	}

	.bottom_right {
		/* position: absolute; */
		bottom: 1.8rem;
		right: 0.6rem;
		font-size: 0.8rem;
		/* font-weight: 800; */
		/* color: blue; */
	}



}

@media only screen and (max-width: 640px) {

	.grid-container {
		display: grid;
		grid-template-columns: 2% auto 3% auto 2%;
		grid-template-areas:
			'grd_hdr  grd_hdr       grd_hdr       grd_hdr       grd_hdr'
		    	'grd_gapL grd_baniBlock grd_baniBlock grd_baniBlock grd_gapR'
		    	'grd_back grd_showimg   grd_showimg   grd_showimg   grd_forwd'
		    	'grd_back grd_joinlt    grd_blnk      grd_joinrt    grd_forwd'
		    	'grd_back grd_txtlt     grd_blnk      grd_txtrt     grd_forwd';

		row-gap: 0.777rem;
		column-gap: 0px;
		/* background-color: #2196F3; */
		/* padding: 0px; */
	}

	.grid-container > div {
		/* background-color: rgba(255, 255, 255, 0.8); */
		/* text-align: center; */
		padding: 0.75rem;
		font-size: 0.8rem;
		/* font-family: ChatrikUni; */
	}

	.bottom_left {
		/* position: absolute; */
		bottom: 1.4rem;
		left: 1.6rem;
		font-size: 0.9rem;
		/* font-weight: 800; */
		/* color: blue; */
	}

	.bottom_right {
		/* position: absolute; */
		bottom: 1.4rem;
		right: 1.6rem;
		font-size: 1rem;
		/* font-weight: 800; */
		/* color: blue; */
	}

}

@media only screen and (max-width: 420px) {

	:root  {
		--tr-size: 1.2rem;
	}
	

	.wideScr {
		display: none;
		visibility: hidden;
	}

	.narrowScr  {
		display: block;
		visibility: visible !important;
	}

	.normTxtL  {
		text-align: left;
	}

	.normTxtR  {
		text-align: right;
	}

	.joinedTxtL  {
		text-align: left;
	}

	.joinedTxtR  {
		text-align: right;
	}


	.grid-container {
		display: grid;
		grid-template-columns: 2% auto 2%;
		grid-template-areas:
			'grd_hdr         grd_hdr           grd_hdr'
		    	'grd_baniBlock   grd_baniBlock     grd_baniBlock'
		    	'grd_showimg     grd_showimg       grd_showimg'
		    	'grd_back grd_joinlt               grd_forwd'
		    	'grd_back grd_txtlt                grd_forwd'
		    	'grd_back               grd_joinrt grd_forwd'
		    	'grd_back                grd_txtrt grd_forwd';

		row-gap: 0.4rem;
		column-gap: 0px;
		/* background-color: #2196F3; */
		/* padding: 0px; */
	}

	.grid-container > div {
		background-color: rgba(255, 255, 255, 0.8);
		text-align: center;
		padding: 0rem;
		font-size: 0.7rem;
	}

	.bottom_left {
		/* position: absolute; */
		bottom: 1.3rem;
		left: 1.6rem;
		font-size: 0.5rem;
	}

	.bottom_right {
		position: absolute;
		bottom: 1.3rem;
		right: 1.6rem;
		font-size: 0.5rem;

	}

}

.BaniDisplay  {
	text-align: center;
	font-size: 2rem;
	font-weight: 700;
}

.cls_h1 {
	 background-color: lightgoldenrodyellow;
	text-align: center;
	color: blueviolet;
	font-size: 3rem;
	text-shadow: 0.11rem 0.11rem red;
}


.cls_bani1  {
	font-weight: 800;
	word-spacing: 2.1rem;	
}


.fixedTextCls {
	text-align: right;
	font-size:  2.1rem;
	font-weight: 400;
	float: center;
}


.cls_blnk   { grid-area: grd_blnk; }
.cls_gapL   { grid-area: grd_gapL; }
.cls_gapR   { grid-area: grd_gapR; }
.cls_back   {
	grid-area: grd_back;
	cursor: pointer;
 }
.cls_forwd  {
	grid-area: grd_forwd;
	cursor: pointer;
}
.cls_hdr    {
	grid-area: grd_hdr;
}
.cls_img    { 
	position: relative;
	grid-area: grd_showimg;
	z-index: 0;
}
.cls_ljoin  { grid-area: grd_joinlt; }
.cls_rjoin  { grid-area: grd_joinrt; }
.cls_ltxt   { grid-area: grd_txtlt; }
.cls_rtxt   { grid-area: grd_txtrt; }
.cls_baniBlock {
	grid-area: grd_baniBlock;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}