body {
 background-image:url('images/bg_cg_trans.png');
 background-color: grey;
 text-align:center;
width: 100%;
margin: 0;
  padding: 0;
  position: relative;
  min-height: 100vh;
  padding-bottom: 90px;

}


/*--------------------PC SCREEN---------------------*/

@media screen and (min-width: 750px){
.main-grid-container {
  display: grid;
  grid-template-columns: 30% 30% 30% ;
  gap: 30px;
  padding: 10px;
  max-width: 100%;
  text-align: center;
  } 

.main-grid-container > div {
  text-align: center;
  padding: 10px 10px 10px 10px;
  font-family:Arial, Helvetica, sans-serif;
  margin: auto;
  vertical-align:top;
  height: auto;
}


  .item1 {
  grid-column-start: 1;
  grid-column-end:4;
  width: 100%;

}

  .item2 {
  grid-column-start: 1;
  grid-column-end:2;
	text-align: left; 
	width: 100%;
	  border-color:blueviolet;
  border-bottom-style:dotted;
  border-top-style:dotted;
  background-image: linear-gradient(to left,  rgba(255,0,0,0),rgba(255,255,255,.5) );



}



.item3 {
  grid-column-start: 2;
   grid-column-end:4;
 color: beige;
	font-size: 16px;
	text-align: center;
		opacity: 0.5;	 
	width: 100%;
	text-align: left; 
	background-color:black;
	opacity: .5;

}


.item4 {
	grid-column-start: 1;
	grid-column-end:2;
	  border-color:blueviolet;
  border-top-style:dotted;
  width: 100%;

}
.item5 {
	grid-column-start: 2;
	grid-column-end:3;

  color: black;
  font-size: 24px;
  font-weight:bold
    padding: 5px 5px 5px 5px; 
  border-color:blueviolet;
  border-bottom-style:dotted;
  border-top-style:dotted;
  background-image: linear-gradient(to right,  rgba(255,0,0,0),rgba(255,255,255,.5),rgba(255,0,0,0) );

}

.item6 {
	grid-column-start: 3;
	grid-column-end:4;
	  border-color:blueviolet;
  border-top-style:dotted;
  width: 100%;

}

.item7 {
	grid-column-start: 1;
	grid-column-end:2;
color: black;
  font-size: 16px;
  padding: 10px;
   background-image: linear-gradient(to top,  rgba(255,0,0,0),rgba(255,255,255,.5) );

}

.item8 {
	grid-column-start: 2;
	grid-column-end:3;
color: black;
  font-size: 16px;
  padding: 10px;
   background-image: linear-gradient(to top,  rgba(255,0,0,0),rgba(255,255,255,.5) );

}

.item9 {
	grid-column-start: 3;
	grid-column-end:4;
color: black;
  font-size: 16px;
  padding: 10px;
   background-image: linear-gradient(to top,  rgba(255,0,0,0),rgba(255,255,255,.5) );

}

.item10 {
  grid-column-start: 1;
   grid-column-end:4;
 color: beige;
	font-size: 16px;
	text-align: center; 
	width: 100%;
	background-color:black;
	opacity: .5;

}



.miframecontainer {
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
   padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */

}
.miframecontainer2 {
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
  padding-top: 40%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */

}

/* Then style the iframe to fit in the container div with full height and width */
.mresponsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
  }

.mresponsive {
height:120px;
}

.mimg {
	 width: 100%;
	max-width: 400px;
	border-width: 0px;
	border: 0;
}

}

/*--------------------PC SCREEN---------------------*/

@media screen and (max-width: 749px){
.main-grid-container {
  display: grid;
  grid-template-columns: 100%;
  gap: 10px;
  padding: 10px;
  max-width: 100%;
  text-align: center;
  } 

.main-grid-container > div {
  text-align: center;
  padding: 10px 10px 10px 10px;
  font-family:Arial, Helvetica, sans-serif;
  margin: auto;
  vertical-align:top;
  height: auto;

}


  .item1 {
  grid-column-start: 1;
  grid-column-end:2;
  height:120px;

}

  .item2 {
	text-align: left; 
	width: 100%;
	  border-color:#ff4dd2;
  border-bottom-style:dotted;
  border-top-style:dotted;
  background-image: linear-gradient(to top,  rgba(255,0,0,0),rgba(255,255,255,.5) );
  

}


.item3 {
color: beige;
	font-size: 16px;
	text-align: center;
		opacity: 0.5;	 
	width: 100%;
	text-align: left; 
	background-color:black;
	opacity: .5;
	}

.item4 {
  width: 100%;
	   

}

.item5 {

  color: black;
  font-size: 24px;
  font-weight:bold
    padding: 5px 5px 5px 5px; 
    width:100%;
  border-color:#ff4dd2;
  border-bottom-style:dotted;
  border-top-style:dotted;
  background-image: linear-gradient(to right,  rgba(255,0,0,0),rgba(255,255,255,.5),rgba(255,0,0,0) );

}
.item6 {
  width: 100%;
	   }



.item7 {
color: black;
  font-size: 16px;
  padding: 10px;
   background-image: linear-gradient(to top,  rgba(255,0,0,0),rgba(255,255,255,.5) );

}

.item8 {
color: black;
  font-size: 16px;
  padding: 10px;
   background-image: linear-gradient(to top,  rgba(255,0,0,0),rgba(255,255,255,.5) );

}

.item9 {
color: black;
  font-size: 16px;
  padding: 10px;
   background-image: linear-gradient(to top,  rgba(255,0,0,0),rgba(255,255,255,.5) );

}

.item10 {
 color: beige;
	font-size: 16px;
	text-align: center; 
	width: 100%;
	background-color:black;
	opacity: .5;

}


.miframecontainer {
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
   padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */

}

.miframecontainer2 {
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
   padding-top: 35%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */

}

/* Then style the iframe to fit in the container div with full height and width */
.mresponsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
  }

.mresponsive {
	height: 50px;
}

.mimg {
	 width: 100%;
	max-width: 400px;
	border-width: 0px;
	border: 0;
}



}