.cardred {
  background-color: #fff;
  border: 2px solid #e11b22;
  padding: 1rem;
  height: auto;
}

.cardblue {
  background-color: #fff;
  border: 2px solid #0083a9;
  padding: 1rem;
  height: auto;
}

.cardnoborder {
  background-color: #fff;
  border: 0px;
  padding: 1rem;
  height: auto;
}

.cards2 {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
}

.cards3 {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
}

/* Hexagons begin here*/

* {
  box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

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

.centerhexa {
  margin: auto;
  width: 90%;
  padding: 10px;
}


/* hexagons */
.hb{
	display:inline-block;
	position:relative;
	text-align:center;
	z-index:0}

.hb:after,.hb:before{
	position:absolute;
	content:"";
	left:-1px;
	top:0;
	z-index:-1}

.hb:before{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);-ms-transform:rotate(60deg);-o-transform:rotate(60deg);transform:rotate(60deg)}

.hb:after{-webkit-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-ms-transform:rotate(-60deg);-o-transform:rotate(-60deg);transform:rotate(-60deg)}

.hb,.hb:after,.hb:before{box-sizing:border-box;transition:all .25s ease;background-color:#2c3e50;border-left:1px solid #2c3e50;border-right:1px solid #2c3e50;color:#2ecc71}

.hb-lg{line-height:15px;font-size:15px;margin:54px 0; padding:15px}

.hb-lg,.hb-lg:after,.hb-lg:before{height:107px;width:185px}


.hb-custom,.hb-custom:after,.hb-custom:before{background:#d3d3d3!important;color:#000!important;border-left:1px solid #d3d3d3!important;border-right:1px solid #d3d3d3!important}

.hb-custom:hover,.hb-custom:hover:after,.hb-custom:hover:before{background:#0083a9!important;border-left:1px solid #0083a9!important;border-right:1px solid #0083a9!important;color:#fff!important}

/* Hexagons end here*/

.redbordercard {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
  background-color: #fff;
  border: 2px solid #e11b22;
  padding: 1rem;
  height: auto;
}

.bluebordercard {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-gap: 1rem;
  background-color: #e2e2e2;
  border: 2px solid #0083a9;
  padding: 1rem;
  height: auto;
}

.newspaper3 {
  column-count: 3;
}

.newspaper2 {
  column-count: 2;
}





@media (min-width: 600px) {
	.cards2 { grid-template-columns: repeat(2, 1fr); }
	.cards3 { grid-template-columns: repeat(3, 1fr); }

}

@media (min-width: 900px) {
	.cards2 { grid-template-columns: repeat(2, 1fr); }
	.cards3 { grid-template-columns: repeat(3, 1fr); }
}

/* Hexagons - Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 860px) {
	
  .column {
    width: 100%;
  }
  
  .centerhexa {
  margin: auto;
  width: 50%;
  padding: 10px;
}
  
}

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

  
  .newspaper3 {
  column-count: 1;
}

.newspaper2 {
  column-count: 1;
}
  
}