/*-----------------------------------------------------------------------------*/
.fram_smallbuttons
{
  margin-left:6%;
  margin-bottom:1%;
  margin-top:2%;
  display: flex;
  flex-direction: row;
  gap:0.5%;
}
/*-----------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------*/
/*CANVAS PACKER 20 (changing height)*/
.canvas_pack
{
  height:55vh;
  width: 100%;
}

/*-----------------------------------------------------------------------------*/
/*CANVAS PACKER 20 (changing height)*/
.canvas_pack2
{
  height:50vh;
  width: 100%;
}

/*-----------------------------------------------------------------------------*/
/*UNIVERSAL WRAPPER FLEX WRAP*/
.packer
{
  margin: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

/*-----------------------------------------------------------------------------*/
/*MENUBAR FRAME*/
.menubar
{
  margin: auto;
  width: 99%;
  padding: 0.5%;
  height: 1.8vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: clamp(10px, 1.1vw, 15px);
}

/*-----------------------------------------------------------------------------*/
/*UNIVERSAL FRAME FLEX WRAP*/
.fram_univer /*(parent flex)*/
{
  margin: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

/*UNIVERSAL FRAME FLEX NOWRAP*/
.fram_univer2 /*(parent flex)*/
{
  margin: auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
}

/*UNIVERSAL FRAME FLEX WRAP*/
.fram_univer3 /*(parent flex)*/
{
  margin: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: 1%;
}

/* Container 50% universal (No item ordering)*/
.fram_univer_item0 /*(item flex)*/
{
  height: auto;
  width: 30%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

/* Container 50% universal (No item ordering)*/
.fram_univer_item50 /*(item flex)*/
{
  height: auto;
  width: 50%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

/* Container 3.33% universal (No item ordering)*/
.fram_univer_item33 /*(item flex)*/
{
  height: auto;
  width: 33.33333%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

/* Container 25% universal (No item ordering)*/
.fram_univer_item25 /*(item flex)*/
{
  height: auto;
  width: 25%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

/* Container 70% universal (No item ordering)*/
.fram_univer_item70 /*(item flex)*/
{
  height: auto;
  width: 70%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
  text-align: center;  
}

/* Container 75% universal (No item ordering)*/
.fram_univer_item75 /*(item flex)*/
{
  height: auto;
  width: 75%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
  text-align: center;  
}

/* Container 30% universal (No item ordering)*/
.fram_univer_item30 /*(item flex)*/
{
  height: auto;
  width: 30%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
  text-align: center;
}
/*-----------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------*/
/*UNIVERSAL FRAME FLEX ROW ("Bigdata frame")*/
.fram_bigdata  /*(parent flex)*/
{
  margin: auto;
  width: 14vw;
  height: 2vw;
  padding: 1%;
  border-radius: 1vw;
  text-align:right;
  color: white;
  background-color: #00497f;
  display: flex;
  flex-direction: row;
  /*justify-content: space-between; */
  justify-content: space-evenly;
}

.fram_bigdata_item  /*(item of bigdata frame)*/
{
  font-size: 1.3vw;
  height: 2vw;
  display:flex;
  align-items:center;
}

.fram_bigdata_icon  /*(item of bigdata frame)*/
{
  height:4.5vh;
}

/*-----------------------------------------------------------------------------*/

.fram_smalldata  /*(parent flex)*/
{
  margin: auto;
  min-width: 14vw;
  padding: 1.8%;
  border-radius: 1vw;
  color: white;
  background-color: #00497f;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/*-----------------------------------------------------------------------------*/
/*FRAME FLEX ROW ("logos frame")*/
.fram_logos  /*(parent flex)*/
{
  display: flex;
  width: 100%;
  background-color: #e8e8e8;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  height: 4vw;
}

.fram_logos_item1  /*(item of logos frame)*/
{
  display: flex;
  width: 50%;
  justify-content: flex-start;
  box-sizing: border-box;
}

.logopict1
{
  height: 4vw;
  margin-left: 1vw;
}

.fram_logos_item2  /*(item of logos frame)*/
{
  display:flex;
  width: 50%;
  justify-content: space-around;
  box-sizing: border-box;
}

.logopict2
{
  height: 3vw;
}

/*-----------------------------------------------------------------------------*/


/*-----------------------------------------------------------------------------*/
/*FRAM33 (GRID 3columns, 2rows, 6 items ordered) */
.fram33 /* (parent grid) */
{
  margin: auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 33.3333%);
}

.fram33_item1 /* (item1 of grid fram3) */
{
  grid-row: 1;
  grid-column: 1;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.fram33_item2 /* (item2 of grid fram3) */
{
  grid-row: 1;
  grid-column: 2;  
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.fram33_item3 /* (item3 of grid fram3) */
{
  grid-row: 1;
  grid-column: 3;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.fram33_item4 /* (item4 of grid fram3) */
{
  grid-row: 2;
  grid-column: 1;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.fram33_item5 /* (item5 of grid fram3) */
{
  grid-row: 2;
  grid-column: 2;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.fram33_item6 /* (item6 of grid fram3) */
{
  grid-row: 2;
  grid-column: 3;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}
/*-----------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------*/
/*FRAM25 (GRID 4columns, 2rows, 8 items ordered) */
.fram25 /* (parent grid) */
{
  margin: auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 25%);
}

.fram25_item1 /* (item1 of grid fram25) */
{
  grid-row: 1;
  grid-column: 1;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.fram25_item2 /* (item2 of grid fram25) */
{
  grid-row: 1;
  grid-column: 2;  
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.fram25_item3 /* (item3 of grid fram25) */
{
  grid-row: 1;
  grid-column: 3;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.fram25_item4 /* (item4 of grid fram25) */
{
  grid-row: 1;
  grid-column: 4;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.fram25_item5 /* (item5 of grid fram25) */
{
  grid-row: 2;
  grid-column: 1;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.fram25_item6 /* (item6 of grid fram25) */
{
  grid-row: 2;
  grid-column: 2;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.fram25_item7 /* (item7 of grid fram25) */
{
  grid-row: 2;
  grid-column: 3;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.fram25_item8 /* (item8 of grid fram25) */
{
  grid-row: 2;
  grid-column: 4;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}
/*-----------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------*/
/*FRAM_inquires (ordered grid, spanned 2columns [item5]) */
.inquires_container
{
  display: grid;
  margin: auto;
  width: 100%;
  grid-template-columns: repeat(3, 33.3333%);  
}

.inquires_item1
{
  grid-row: 1;
  grid-column: 1;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.inquires_item2
{
  grid-row: 1;
  grid-column: 2;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.inquires_item3
{
  grid-row: 1;
  grid-column: 3;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.inquires_item4
{
  grid-row: 2;
  grid-column: 1;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.inquires_item5
{
  grid-row: 2;
  grid-column: 2 / span 2; /* !!! span 2 columns !!! */
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex; 
  box-sizing: border-box;
  flex-wrap:wrap;          /* !!! wrap the content !!! */
  align-items:center;
}

.inquires_item6
{
  grid-row: 3;
  grid-column: 1;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.inquires_item7
{
  grid-row: 3;
  grid-column: 2;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}

.inquires_item8
{
  grid-row: 3;
  grid-column: 3;
  height: auto;
  width: 100%;
  padding: 0.5%;
  display:flex;
  box-sizing: border-box;
  align-items:center;
}