.old{
display:none;
//display:grid;
}
.old{
background-color: #0f0;
}




.red{
background-color: #d3ff00;
color: #003399;
display:none;
font-weight: bold;
}

.ellipsis
{
	margin-left: -0.2em;
}

a[href^="tel:"] {
    /* hier z.B. Grafik vor Telefonnr einblenden */
	color: #003399;
}
	
body
{
	font-family: 'Arial', sans-serif; 
	font-size: 20px;
	line-height: 120%;
	font-size: calc(2vw + 1em);
	font-size: 2vmin;
	font-size: calc(2vw /2.5 + 0.5em);

	font-size: calc(2vmax /4.5 + 0.5em);
/*	font-size: calc(2vmax /9 + 0.5em);*/
	font-size: calc((2vmax / 8.5 + 0.8em) );
	font-size: calc((2vmax / 4.5 + 0.5em) * 1.0);
	line-height: 1.4em;

	display: block;
   margin: 0px;
}	

.photo
{
	width: 25%; 
	min-width:200px;
	max-width: 550px;
}

.header
{
	width:100%;
	margin-left: auto;
	margin-right: auto;
/*!  background-color: rgba(55, 55, 55, 0.8); !*/
}	
	
.banner
{
	width:100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}

.banner_grid
{
	display: grid;
/*!	height: auto; !*/
	
	width:100%;
	margin-left: auto;
	margin-right: auto;

  /***						4 images ***/
  grid-template-columns: 	repeat(auto-fill, minmax(600px, 1fr));
  gap: 0px;
/*!  background-color: #2196F3; !*/
  padding: 5px;
  
}

.grid-item
{
}

@media screen and (max-width: 300px)
{
.banner
{
	width:100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}


.banner_grid
{
	display: grid;
	height: auto;
	
	width:100%;
	margin-left: auto;
	margin-right: auto;

  /***						4 images ***/
  grid-template-columns: 	1fr;
  gap: 0px;
/*!  background-color: #2196F3; !*/
  padding: 5px;
  
}
}
	

@media screen and (min-width: 300px)
{
.banner
{
	width:100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}
	
.banner_grid
{
	display: grid;
	height: auto;
	
	width:100%;
	margin-left: auto;
	margin-right: auto;

  /***						4 images ***/
  grid-template-columns: 	1fr	1fr;
  gap: 0px;
/*!  background-color: #2196F3; !*/
  padding: 5px;
  padding-left: 	21px;
  padding-right: 	21px;
  
}
}
	
@media screen and (min-width: 350px)
{
.banner
{
	width:100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}

.banner_grid
{
	display: grid;
	height: auto;
	
	width:100%;
	margin-left: auto;
	margin-right: auto;

  /***						4 images ***/
  grid-template-columns: 	auto auto auto auto;
  gap: 0px;
/*!  background-color: #2196F3; !*/
  padding: 5px;
  
}

}
	
@media screen and (min-width: 800px)
{
	
.banner
{
	width:100%;
	height: auto;
height: 100%;
	margin-left: auto;
	margin-right: auto;
}

.banner_grid
{
	display: grid;
	height: auto;
	
	width:100%;
	margin-left: auto;
	margin-right: auto;

  /***						4 images ***/
  grid-template-columns: 	auto auto auto auto;
  gap: 0px;
/*!  background-color: #2196F3; !*/
  padding: 5px;
  
}

}	
.content
{
/*!	background: gray;  !*/
	width:77%;
	margin-left: auto;
	margin-right: auto;
/*!	min-width: 290px; !*/
}

.div-cloud
{
	width: 85%;
	margin-left: auto;
	margin-right: auto;
}

	
.footer
{
	width:100%;
	margin-left: auto;
	margin-right: auto;
	background-color: #9c9c9a;
}	

.blue
{
	color: #003399;
//	display:none;
}

span { display: inline-block;  }
span::first-letter {
	color: #003399;
}

.heading::first-letter {
	color: #003399;
}

.heading {
    color: #7F7F7F;
	font-variant:small-caps;	
}

h3.heading {
    color: #7F7F7F;
font-variant:initial;	
}

    .fil0 {fill:#7F7F7F}
    .fil1 {fill:#999999}


h1 {
   color: #7F7F7F;
	font-size: 190%;
	line-height: 150%;
   font-size: calc((2vmax / 4.5 + 0.5em) * 2.4);
	margin-bottom: 0.5em;
}	
h2 {
   color: #7F7F7F;
	font-size: 160%;
	line-height: 140%;
	font-size: calc((2vmax / 4.5 + 0.5em) * 2);
	margin-bottom: 0.3em;
}
h3 {
   color: #7F7F7F;
	font-size: 130%;
	line-height: 130%;
	font-size: calc((2vmax / 4.5 + 0.5em) * 1.5);
	margin-bottom: 0.15em;
}	


p.txt {
	color: #999999; 
	margin-top: 0.3em;
}	

p {
/*!	color: #999999; /*/
	margin-top: 0.3em;
}	

ul {
	color: #999999;
	margin-top: 0.3em;
}

li::marker {
	color: #003399;
}

.question {
	padding-top: 	0em;
	padding-bottom: 0em;
}	

.question a{
	font-variant:small-caps;
	color: #7F7F7F;

/* text-decoration: none;	 */
}

.question a:link{
	color: #7F7F7F;
}

.question a:visited {
	color: #7F0000;
}

.question a:hover
 {
	background-color: #003399;
}


.questionText {
	color: #7F7F7F;
}	

.answerText {
	color: #7F7F7F;
}


/**** accordion ***/
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 9px;
  width:min-content;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;

border-radius: 10px;
/*! display:none; !*/


}

.buttonLink {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 9px;
  width:min-content;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;

border-radius: 10px;
/*! display:none; !*/
  color: #003399;
  text-decoration: none;


}
.buttonLink:hover {
  background-color: #003399;
  color: #ffffff;
}
a.active {
  background-color: #ffffff;/*#7F7F7F;*/
}
.buttonLink:before {
  content: '\002B';
  color: #003399;
  font-weight: bold;
/**  float: right; **/
/**  margin-left: 5px; **/
}

button.active {
  background-color: #003399;/*#7F7F7F;*/
}

.accordion:hover {
  background-color: #003399;
}

.active:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
/**  float: right; **/
/**  margin-left: 5px; **/
}

button.focus::after {
  content: "\2212";
  color: white;
  font-weight: bold;
/**  float: right; **/
/**  margin-left: 5px; **/
}


.active:after {
  content: "\2212";
  color: white;
}

.panel {
  padding: 0 0.3em;
  background-color: white;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.52s ease-in;
border-radius: 15px;
}


.panelShort {
/*  padding: 0 18px;*/
  padding: 0 3em;
/*! background-color: green; !*/
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.52s ease-out;
}
/**** accordion ***/




	

.zitat
{
	margin-top: 1em;
	font-size: 111%;
	font-weight: bold;
	margin-bottom: 0.5em;
	font-size: calc((2vmax / 4.5 + 0.5em) * 1.11);
	
}

.zitatQuelle
{
	margin-top: 0em;
	font-size: 90%;
	font-size: calc((2vmax / 4.5 + 0.5em) * 0.9);
}





/*** ~~~~~~~~~~~ NAVI  **/
/** topnav **/


/***** style Header ***/

#divHeader {
  height: auto;
  display: grid;
  /***						empty	logo		empty	navi	empty	icon ***/
  grid-template-columns: 	3.5%	15.5% 		2%		auto	2%		4em;
  gap: 1px;
/*!  background-color: #2196F3; !*/
  padding: 10px;
  
  grid-template-areas: 'header1 headerLogo header3 headerNavi header5	headerIco';
}




#divHeader {
/*!  background-color: rgba(255, 255, 255, 0.8); !*/
  text-align: center;
  padding: 20px 0;
font-size: 140%;
font-size: calc(2vmax /1 - 0.61em);
}


@media screen and (max-width: 800px)
{
	
#divHeader {
/*!  background-color: rgba(255, 255, 255, 0.8); !*/
  text-align: left;
  padding: 20px 0;
/**	font-size: 115%;**/
font-size: 140%;

	
	
/***					empty	Logo/navi	empty	ICON	empty				**/
grid-template-columns: 	3.5% 	150px 		auto 	4.5em 	4%;
    grid-template-rows: auto auto;
    gap: 1px;
    padding: 10px;
    grid-template-areas:
        'header1 headerLogo header3 headerIco header7'
        'header5 headerNavi headerNavi headerNavi header7';
    text-align: left;
    padding: 20px 0;	
}

	
	
}

.headerItem1 {
/*!  background-color: rgba(255, 0, 0, 0.8); !*/
  grid-area: header1;
}


.headerItem2 {
/*!  background-color: rgba(255, 255, 0, 0.8); !*/
  grid-area: headerLogo;
}

.headerItem3 {
/*!  background-color: rgba(255, 255, 255, 0.8); !*/
  grid-area: header3;
}

.headerItem4 {
/*!  background-color: rgba(0,   255, 255, 0.8); !*/
  grid-area: headerNavi;
  
}


.headerItem4.mobile {
  background-color: rgba(255, 255, 255, 0.5); 
  text-align: center;
  padding: 20px 0;
/* font-size: 105%; */
font-size: calc((2vmax / 4.5 + 0.5em) * 1.25);


  height: auto;
  display: grid;
  /***						navi		icon ***/
/**  grid-template-columns: 	auto		2em;**/
  grid-template-rows: 		auto	auto   ;
  gap: 1px;
/*!  background-color: #2196F3; !*/
  padding: 0px;
  margin: 0;
 margin-top: 2em; 
/**  
 grid-template-areas: 'header1 headerLogo header3 headerNavi header5	headerIco';
 grid-template-areas: 'headerNavi headerIco' 'headerNavi headerNavi' 'headerNavi headerNavi'
**/
}

.headerItem4.mobile .icon{
	text-align: right;
	display: none;
}
@media screen and (max-width: 800px	)
{
	
.headerItem4.mobile {
 margin-top: -1em; 
 margin-top: 0em; 
}
	
.headerItem4.mobile .icon{

	display: block;
	color: #003399;
}	
.headerItem4xxx.mobile {
  /***						empty	Logo/navi		**/
  grid-template-columns: 	3.5%	150px	auto 3.5%;
  grid-template-rows: 		auto	auto   ;
  gap: 1px;
/*!  background-color: #2196F3; !*/
  padding: 10px;
  
  grid-template-areas: 'header1 headerLogo header3 header3'
						'header5 headerNavi headerNavi	headerIco';	
	
/*!  background-color: rgba(255, 255, 255, 0.8); !*/
  text-align: left;
  padding: 20px 0;
	font-size: 115%;
}

}



.headerItem5 {
/*!  background-color: rgba(0, 	0, 255,	0.8); !*/
  grid-area: header5;
}

.headerItem6 {
/*!  background-color: rgba(0, 0, 0, 0.8); !*/
  grid-area: headerIco;
	text-align: right;
}



/**** style nav-top ***/

ul.navi {	
padding-left: 0;
list-style: disc;
list-style-position: inside; 
/** background: gray; **/

display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;

}

ul.navi li{
padding-left: 1em;
/** background: green; **/
	
}

ul.navi li::before {
  content: "\2022";
  color: red;
  font-weight: bold;
/*!  display: inline-block;  !*/
/*!  width: 1em; !*/
  margin-left: -1em;
}

ul.navi a{
	font-variant:small-caps;
	color: #7F7F7F;

/** text-decoration: none;	**/
}




/**** style nav-top ***/























.topnav {
  overflow: hidden;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.5); 
	font-variant:small-caps;	
width:auto;
width:max-content;
padding:0;
margin: auto;

}

.topnav a {
  float: left;
  display: block;
display: inline list-item;  
  color: #7F7F7F;
  text-align: center;
  padding: 0px 10px;
  text-decoration: none;

}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

.topnav li {
	float: left;
	display: contents;
	color: #f2f2f2;
	text-align: center;
	/*!  padding: 14px 16px; !*/
	/*!  padding-left: 10px; !*/
	text-decoration: none;



	position: relative;
	/*!    float: none; !*/
	display: block;
/*!	text-align: left; !*/
	/*!margin-bottom: 1em;!*/
	padding-top:0.5em;
	padding-bottom:0.5em;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav li.active {
  background-color: #04AA6D;
  color: white;
}

ul.topnav li::before {
  content: "\2022";
  color: red;
  color: #003399;
  font-weight: bold;
/*!  display: inline-block; !*/
/*!width: 0.4em;!*/
/*!margin-left: -0.4em;!*/
margin-left: 0.0em;
/*! background-color: gainsboro; !*/
}

ul.topnav li:first-child:before {
  display: none; 
}

  .topnav a {
    float: none;
    display: inline flow-root list-item;
    display: inline;
    text-align: left;
  }

  .topnav li {
	position: relative;
  
    display: block;
    text-align: left;
	
  }
  
ul.topnav {
	list-style-type: none;
  }

@media screen and (max-width: 800px) {
/**
  .topnav a:not(:first-child) {display: none;}

  .topnav a.icon {
    float: left;
    display: block;
  }
  **/
  
ul.topnav li::before {
	display: none;
}  

.topnav li
{
	padding-left:0px;
}
  .topnav li:not(:first-child) {display: none;}
ul.topnav li:first-child:before {
/*	  display: inline-block; */
}

  .topnav a {
    float: none;
    display: inline flow-root list-item;
	display: inline;
    text-align: left;
  }

  .topnav li {
	position: relative;
    float: none;
    display: block;
    text-align: center;
/*!	background-color: red; !*/
	
	
  }
}

@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive a {
    float: none;
    display: inline flow-root list-item;
    display: inline;
    text-align: left;
  }

  .topnav.responsive li {
	position: relative;
    float: none;
    display: block;
    text-align: center;
  }
}






/***** style footer ***/

#divFooter {
  height: auto;
  display: grid;
  /***						empty	navi	empty ***/
  grid-template-columns: 	3.5%	auto 	3.5%;
  gap: 1px;
/*!  background-color: #2196F3; !*/
  padding: 10px;
  
  grid-template-areas: 'footer1 footerNavi footer3';
}




#divFooter {
/*!  background-color: rgba(255, 255, 255, 0.8); !*/
	text-align: center;
	padding: 0px 0;
	font-size: 150%;
	
	font-variant:small-caps;
}

/***
@media screen and (max-width: 800px)
{
	
#divFooter {
  /-***						empty	navi		**-/
  grid-template-columns: 	3.5%	auto 3.5%;
  grid-template-rows: 		auto	auto   ;
  gap: 1px;
  padding: 10px;
  
  grid-template-areas: 'footer1 footer2 footer3';	
	
  text-align: left;
  padding: 20px 0;
}

}
****/
@media screen and (max-width: 800px)
{
#divFooter {
    grid-template-columns: auto max-content auto;
  text-align: center;
}
}


.footerItem1 {
/*!  background-color: rgba(255, 0, 0, 0.8); !*/
  grid-area: footer1;
}

.footerItem2 {
/*!  background-color: rgba(0,   255, 255, 0.8); !*/
  grid-area: footerNavi;
/*!  background-color: yellow;!*/

}

.footerItem3 {
/*!  background-color: rgba(255, 255, 255, 0.8); !*/
  grid-area: footer3;
}





.bottomnav {
  overflow: hidden;
  background-color: #9c9c9a;
	font-variant:small-caps;	
width:auto;
padding:0;
margin: 0;
}

.bottomnav a {
  float: left;
  display: block;
display: inline list-item;  
  color: #dbdbd9;
  text-align: center;
  padding: 0px 10px;
  text-decoration: none;

}

.bottomnav a:hover {
  background-color: #ddd;
  color: black;
}

.bottomnav a.active {
  background-color: #04AA6D;
  color: white;
}

.bottomnav .icon {
  display: none;
}

.bottomnav li {
  float: left;
  display: contents;
  color: #dbdbd9;
  text-align: center;
/*!  padding: 14px 16px; !*/
	padding-left: 0em;
  text-decoration: none;



	position: relative;
/*!    float: none; !*/
    display: block;
    text-align: left;
/*!margin-bottom: 1em;!*/
/*! padding-top:0.5em; !*/
padding-bottom:	1em;
}

.bottomnav a:hover {
  background-color: #ddd;
  color: black;
}

.bottomnav li.active {
  background-color: #04AA6D;
  color: white;
}

ul.bottomnav li::before {
  content: "\2022";
  color: red;
  color: #003399;
  font-weight: bold;
/*!  display: inline-block; !*/
/*!width: 0.4em;!*/
/*!margin-left: -1em;!*/
/*! background-color: gainsboro; !*/
}

ul.bottomnav li:first-child:before {
  display: none; 
}

ul.bottomnav li:first-child a {
  padding-left: 0em; 
}


  .bottomnav a {
    float: none;
    display: inline flow-root list-item;
    display: inline;
    text-align: left;
  }

  .bottomnav li {
	position: relative;
  
    display: block;
    text-align: left;
	
padding-bottom: 1em;
    padding-top: 1em;
}
  
ul.topnav {
	list-style-type: none;
  }


/*** ~~~~~~~~~~~ NAVI  **/





/**** style wolke ***/

ul.cloud {	
/**
/	First remove the dots and indents in front of the list
**/
list-style: none;
padding-left: 0;

/**
/	Then set it upulIt is displayed in flexbox with 
/	horizontal and vertical center to ensure that all label elements are displayed 
/	in one or more lines
**/
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;

}

/**
/ Add a certain vertical distance between the upper height and each other, and the final UL element style is as follows:	
**/
ul.cloud {
  list-style: none;
  padding-left: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  line-height: 200%;
}

/**
Colorize:

ul.cloud li:nth-child(2n+1) a { color: #181; }
ul.cloud li:nth-child(3n+1) a { color: #33a; }
ul.cloud li:nth-child(4n+1) a { color: #c38; }
**/

/**
/	Adjust the size of the label according to the weight
/
/	Let’s start with a few small changes to the label
**/
ul.cloud a {
  color: #4d628d;
  display: block;
  font-size: 150%;
  text-decoration: none;
  position: relative;
}

/**
One way of web standards is that CSS can attr()Method to read the data property value of HTML, so we can read it in the following waysdata-weight
attr([attribute-name] [attribute-unit]? [, default-value]?)
**/

/**
/	Unfortunately, no browser currently supports this representation and functionality. Instead, attr () will return only one string and can only be used in the content attribute.
/
/	If the web standard supports this approach, it’s easy to do. We can directly read the data of attribute weights, save them to CSS variables, and directly operate on them, as shown below:
***/
ul.cloud a {
  --size: attr(data-weight number, 2); 
  font-size: calc(var(--size) * 1rem);
}


ul.cloud li {
  padding: 1.2vh 0.5vh;
}

/**
a:after {content: " (" attr(href) ")";}
**/

ul.cloud a[data-weight="1"] { --size: 1; }
ul.cloud a[data-weight="2"] { --size: 2; }
ul.cloud a[data-weight="3"] { --size: 3; }
ul.cloud a[data-weight="4"] { --size: 4; }
ul.cloud a[data-weight="5"] { --size: 5; }
ul.cloud a[data-weight="6"] { --size: 6; }
ul.cloud a[data-weight="7"] { --size: 7; }
ul.cloud a[data-weight="8"] { --size: 8; }
ul.cloud a[data-weight="9"] { --size: 9; }

ul.cloud a {
  font-size: calc(var(--size) * 0.25vw + 0.25vw + 1em);;
  line-height: 120%;
  padding-left: 10px;
  padding-right: 10px;
  /* ... */
}


/*** Schulung ***/

p.workshop
{
	font-size:120%;
	font-size: calc((2vmax / 4.5 + 0.585em) * 1.2);
	font-size: calc((2vmax / 9.5 + 0.8em) * 1.2);
	margin: initial;
}


ul.workshop
{
  color: #003399;	
	font-size:120%;
	font-size: calc((2vmax / 4.5 + 0.5em) * 1.2);
	font-size: calc((2vmax / 9.5 + 0.8em) * 1.2);

	margin-left: 0em;
	padding-left: 1em;
}


/*** Formular ***/
* {
  box-sizing: border-box;
}

input[type=text], input[type=email],select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 10px;
  resize: vertical;
}
	
input:required
{
  border-color: #003399;	
}

.required
{
  background-color: #003399;	
  color: white;

  color: #003399;	
  background-color: transparent;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #003399;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  float: right;
  font-style: bold:
}

input[type=submit]:hover {
  background-color: #45a049;
}
 
.container {
  border-radius: 10px;
  background-color: #f2f2f2;
  padding: 20px;
	line-height:200%;
}


.col-5 {
  float: left;
  width: 5%;
  margin-top: 6px;
  margin-left: 6px;
}


.col-10 {
  float: left;
  width: 10%;
  margin-top: 6px;
  margin-left: 6px;
/*!  background-color: #007F0010;  !*/
}

.col-20 {
  float: left;
  width: 20%;
  margin-top: 6px;
  margin-left: 6px;
/*!  background-color: #7F000010;  !*/
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
  margin-left: 6px;
}

.col-plz {
  float: left;
  width: max-content;
  margin-top: 6px;
  margin-left: 36px;
}


.col-anrede {
  float: left;
  width: max-content;
  margin-top: 6px;
  margin-left: 36px;
}

.col-60 {
  float: left;
  width: 60%;
  margin-top: 6px;
  margin-left: 6px;
/*!  background-color: #00007F10; !*/
}

.col-70 {
  float: left;
  width: 70%;
  margin-top: 6px;
  margin-left: 36px;
/*!  background-color: #007f7F10; !*/
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
  margin-left: 6px;
/*!   background-color: #ff000010; !*/
}


.col-80 {
  float: left;
  width: 70%;
  margin-top: 6px;
  margin-left: 6px;
/*!  background-color: #7f007F10; !*/
}

.col-100 {
  float: left;
  width: 75%;
  margin-top: 3px;
}

.col-first {
	grid-area: myFirst;
	margin-left: 0px;
	padding-left: 0.3em;
	background-color: #003399;
	border-radius: 10px;
	color:#ffffff;
	margin: 0.3em 0;
}

.col-second {
	grid-area: mySecond;
	background-color: #7F7F7F;
	border-radius: 10px;
	color:#ffffff;
	text-align: end;
	padding-right: 0.3em;
	margin: 0.3em 0;
}

.col-empty
{
	background-color: #7F7F7F00;
	padding: 0;
	margin: 0;
}

.col-third {
	grid-area: myThird;
	background-color: #f2f2f2;
	border-radius: 10px;
	color:#003399;
	padding-left: 0.3em;
	margin: 0.3em 0;
}

.col-third-short {
	grid-area: myThird;
	background-color: #f2f2f2;
	border-radius: 10px;
	color:#003399;
	padding-left: 0.3em;
	margin: 0.3em 0;
/*!	width: 10%;!*/
}



.col-third-full {
	grid-area: myThirdFull;
	background-color: #f2f2f2;
	border-radius: 10px;
	color:#003399;
	padding-left: 0.3em;
	margin: 0.3em 0;
}


.col-empty
{
	background-color: #7F7F7F00;
	padding: 0;
	margin: 0;
}

.row
{
	display: grid;
	grid-template-columns: 	15% 7% auto;
	grid-template-areas: 'myFirst mySecond myThird' 'myFirst mySecond myThirdFull';
	grid-gap: 0.3em;
}

/* Clear floats after the columns */
.rowTitle:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1150px) {
	.col-25, .col-75, input[type=submit] 
	{
   	width: 100%;
   	margin-top: 0;
	}


	.row
	{
		display: grid;
		grid-template-columns: 70px auto;
		grid-template-rows: auto;
		grid-template-areas: 'myFirst myFirst ' 'mySecond myThird' 'myThirdFull myThirdFull';
		grid-gap: 0.3em;
		margin: 1em;
	}


.col-first {
	grid-area: myFirst;
	margin-left: 0px;
	padding-left: 0.3em;
	background-color: #003399;
	border-radius: 10px;
	color:#ffffff;
	margin: 0.3em 0;
}

.col-second {
	grid-area: mySecond;
	background-color: #7F7F7F;
	border-radius: 10px;
	color:#ffffff;
	text-align: end;
	padding-right: 0.3em;
	margin: 0.3em 0;
}

.col-third {
	grid-area: myThird;
	background-color: #f2f2f2;
	border-radius: 10px;
	color:#003399;
	padding-left: 0.3em;
	margin: 0.3em 0;
}

.col-third-short {
	grid-area: myThird;
	background-color: #f2f2f2;
	border-radius: 10px;
	color:#003399;
	padding-left: 0.3em;
	margin: 0.3em 0;
/*!	width: 10%;!*/
}


.col-third-full {
	grid-area: myThirdFull;
	background-color: #f2f2f2;
	border-radius: 10px;
	color:#003399;
	padding-left: 0.3em;
	margin: 0.3em 0;
}

.col-empty
{
	background-color: #7F7F7F00;
	padding: 0;
	margin: 0;
}

}