/*view for mobile links*/
.wrapper-re-link
{
	width:100%;
	height:100%;
	background-color:#FFFFFF;
	margin-left:1px;
	margin-right:20px;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .wrapper-re-link {
    width: 100%;
  }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .wrapper-re-link {
        width: 100%;
  }
}
/*grid for related links*/
.row-re-link{
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  column-gap: 130px;
}

/* Create four equal columns that sits next to each other */
.column-re-link {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  
}

.column-re-link img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column-re-link {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column-re-link {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
/*view for List in ICCC*/
.wrapper-re-linklist
{
	width:100%;
	height:100%;
	margin-left:10px;
	background-color:#FFFFFF;
	margin-right:20px;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .wrapper-re-linklist {
    width: 100%;
  }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .wrapper-re-linklist {
        width: 100%;
  }
}

descriptions
{
	width:13%;
	height:40px;
	background-color:#CCCCCC;
	margin-left: 90px;
	text-align:center;
	font-size:16px;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .descriptions
  {
		width: 100%;	 
  }
}
/* ICCC bullets */
ul.iccc {
  list-style-type: square;
  margin-left:90px;
}

/*grid for three pictures link*/
.grid-link {
  display: grid;
  width:100%;
  height: 80px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  column-gap: 200px;
}
.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}
.img -link{
  height: auto;
  width: 100%;
/* even more control with max-width */
  max-width: 720px;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .example-link,.grid-link,img-link
  {
		width: 100%;	 
  }
}
/*Space margin of ICCC*/
iccc-page
{
		margin-left:500px;
}
iccc-page-content
{
		margin-left:90px;
}

.wrapper-relatedlink
{
	max-height:var(--wrapper-height, 200px);
	margin-left:auto;
	margin-right:auto;
	padding-left:1rem;
	padding-right:1rem;
	background-color:#CCCCCC;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .wrapper-relatedlink {
    width: 100%;
  }
}
/*End of wrapper*/
.col-gap {
  column-count: 3;
  column-gap: 40px;
}
/* Create three equal columns that floats next to each other */
.column-relatedlink {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 100px; /* Should be removed. Only for demonstration */
}

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

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column-relatedlink {
    width: 100%;
  }
}

.wrapper-col-container-link {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 80px;
  background-color:#FFFFFF;
  padding: 30px;
  margin-left: 80px;
}

.wrapper-col-container-link > div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 0px solid black;
  text-align: center;
  font-size: 30px;
}