﻿/* The expanding image container */
.row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 0 4px;
}
.container_1 {
	margin: 0 0 1% 0;
	position: relative;
	display: none;
}
/* Expanding image text */
.imgtext {
	position: absolute;
	bottom: 15px;
	left: 15px;
	color: white;
	font-size: 20px;
	}
/* Closable button inside the expanded image */
.closebtn {
	position: absolute;
	top: 10px;
	right: 15px;
	color: #ffd700;
	font-size: 35px;
	cursor: pointer;
	}
#expandedImg{
	border: 2px #99CCFF solid;
	margin-top: 1%;
}
/* Create ten (7 equal columns) that sit next to each other *******************************************/
.col_7 {
	-ms-flex: 14.28%;
	flex: 14.28%;
	max-width: 14.28%;
	padding: 0 4px;
}
.col_7 img {
	margin-top: 5px;
	vertical-align: middle;
	width: 100%;
}
.col_7 {
	-ms-flex: 14.28%;
	flex: 14.28%;
	max-width: 14.28%;
}
/* Create ten (8 equal columns) that sit next to each other *******************************************/
.col_8 {
  -ms-flex: 12.5%;
  flex: 12.5%;
  max-width: 12.5%;
  padding: 0 4px;
}
.col_8 img {
  margin-top: 5px;
  vertical-align: middle;
  width: 100%;
}
.col_8 {
  -ms-flex: 12.5%;
  flex: 12.5%;
  max-width: 12.5%;
  }
/* Create ten (9 equal columns) that sit next to each other *******************************************/
.col_9 {
  -ms-flex: 10%;
  flex: 10%;
  max-width: 10%;
  padding: 0 4px;
}
.col_9 img {
  margin-top: 5px;
  vertical-align: middle;
  width: 100%;
}
.col_9 {
    -ms-flex: 10%;
    flex: 10%;
    max-width: 10%;
  }
/* Create ten (10 equal columns) that sit next to each other *******************************************/
.col_10 {
  -ms-flex: 10%;
  flex: 10%;
  max-width: 10%;
  padding: 0 4px;
}
.col_10 img {
  margin-top: 5px;
  vertical-align: middle;
  width: 100%;
}
.col_10 {
    -ms-flex: 10%;
    flex: 10%;
    max-width: 10%;
  }
  
  
  
  
.col_11 {
  -ms-flex: 9%;
  flex: 9%;
  max-width: 9%;
  padding: 0 4px;
}
.col_11 img {
  margin-top: 5px;
  vertical-align: middle;
  width: 100%;
}
.col_11 {
    -ms-flex: 9%;
    flex: 9%;
    max-width: 9%;
  }
 .column_12 {
  -ms-flex: 8.33%;
  flex: 8.33%;
  max-width: 8.33%;
  padding: 0 4px;
}
.column_12 img {
  margin-top: 5px;
  vertical-align: middle;
  width: 100%;
}
.column_12 {
  -ms-flex: 8.33%;
  flex: 8.33%;
  max-width: 8.33%;
  }
@media screen and (max-width: 800px) {
/* Create ten (8 equal columns) that sit next to each other *******************************************/
.col_8 {
  -ms-flex: 12.5%;
  flex: 12.5%;
  max-width: 12.5%;
  padding: 0 4px;
}
.col_8 img {
  margin-top: 5px;
  vertical-align: middle;
  width: 100%;
}
.col_8 {
  -ms-flex: 12.5%;
  flex: 12.5%;
  max-width: 12.5%;
  }

.column_10 {
    -ms-flex: 10%;
    flex: 10%;
    max-width: 10%;
  }
  .column_11 {
    -ms-flex: 9%;
    flex: 9%;
    max-width: 9%;
  }
  .column_12 {
  -ms-flex: 8.33%;
  flex: 8.33%;
  max-width: 8.33%;
  }
}
@media screen and (max-width: 768px) {
/* Create ten (8 equal columns) that sit next to each other *******************************************/
.col_8 {
  -ms-flex: 12.5%;
  flex: 12.5%;
  max-width: 12.5%;
  padding: 0 4px;
}
.col_8 img {
  margin-top: 5px;
  vertical-align: middle;
  width: 100%;
}
.col_8 {
  -ms-flex: 12.5%;
  flex: 12.5%;
  max-width: 12.5%;
  }

.column_10 {
    -ms-flex: 10%;
    flex: 10%;
    max-width: 10%;
  }
  .column_11 {
    -ms-flex: 9%;
    flex: 9%;
    max-width: 9%;
  }
  .column_12 {
  -ms-flex: 8.33%;
  flex: 8.33%;
  max-width: 8.33%;
  }
}
@media screen and (max-width: 600px) {
/* Create ten (8 equal columns) that sit next to each other *******************************************/
.col_8 {
  -ms-flex: 12.5%;
  flex: 12.5%;
  max-width: 12.5%;
  padding: 0 4px;
}
.col_8 img {
  margin-top: 5px;
  vertical-align: middle;
  width: 100%;
}
.col_8 {
  -ms-flex: 12.5%;
  flex: 12.5%;
  max-width: 12.5%;
  }

.column_10 {
    -ms-flex: 10%;
    flex: 10%;
    max-width: 10%;
  }
  .column_11 {
    -ms-flex: 9%;
    flex: 9%;
    max-width: 9%;
  }
  .column_12 {
  -ms-flex: 8.33%;
  flex: 8.33%;
  max-width: 8.33%;
  }
}
/* Create ten (8 equal columns) that sit next to each other *******************************************/
.col_8 {
  -ms-flex: 12.5%;
  flex: 12.5%;
  max-width: 12.5%;
  padding: 0 4px;
}
.col_8 img {
  margin-top: 5px;
  vertical-align: middle;
  width: 100%;
}
.col_8 {
  -ms-flex: 12.5%;
  flex: 12.5%;
  max-width: 12.5%;
  }
@media screen and (max-width: 800px) {
/* Create ten (8 equal columns) that sit next to each other *******************************************/
.col_8 {
  -ms-flex: 12.5%;
  flex: 12.5%;
  max-width: 12.5%;
  padding: 0 4px;
}
.col_8 img {
  margin-top: 5px;
  vertical-align: middle;
  width: 100%;
}
.col_8 {
  -ms-flex: 12.5%;
  flex: 12.5%;
  max-width: 12.5%;
  }
}
@media screen and (max-width: 768px) {
/* Create ten (8 equal columns) that sit next to each other *******************************************/
.col_8 {
  -ms-flex: 12.5%;
  flex: 12.5%;
  max-width: 12.5%;
  padding: 0 4px;
}
.col_8 img {
  margin-top: 5px;
  vertical-align: middle;
  width: 100%;
}
.col_8 {
  -ms-flex: 12.5%;
  flex: 12.5%;
  max-width: 12.5%;
  }
}
@media screen and (max-width: 600px) {
/* Create ten (8 equal columns) that sit next to each other *******************************************/
.col_8 {
  -ms-flex: 12.5%;
  flex: 12.5%;
  max-width: 12.5%;
  padding: 0 4px;
}
.col_8 img {
  margin-top: 5px;
  vertical-align: middle;
  width: 100%;
}
.col_8 {
  -ms-flex: 12.5%;
  flex: 12.5%;
  max-width: 12.5%;
  }
}
/* Create nine (9 equal columns) that sit next to each other *****************************************/
.column_9 {
  -ms-flex: 11.11%;
  flex: 11.11%;
  max-width: 11.11%;
  padding: 0 4px;
}
.column_9 img {
  margin-top: 5px;
  vertical-align: middle;
  width: 100%;
}
@media screen and (max-width: 900px) {
  .column_9 {
    -ms-flex: 11.11%;
    flex: 11.11%;
    max-width: 11.11%;
  }
}
@media screen and (max-width: 768px) {
  .column_9 {
    -ms-flex: 11.11%;
    flex: 11.11%;
    max-width: 11.11%;
  }
}
@media screen and (max-width: 600px) {
  .column_9 {
    -ms-flex: 11.11%;
    flex: 11.11%;
    max-width: 11.11%;
  }
}
/* Create six (7 equal columns) that sit next to each other *************************************************/
.column_7 {
	-ms-flex: 14.28%;
	flex: 14.28%;
	max-width: 14.28%;
	padding: 0 4px;
}
.column_7 img {
	margin-top: 5px;
	vertical-align: middle;
	width: 100%;
}
@media screen and (max-width: 800px) {
  .column_7 {
	-ms-flex: 14.28%;
	flex: 14.28%;
        max-width: 14.28%;
  }
}
@media screen and (max-width: 768px) {
  .column_7 {
	-ms-flex: 14.28%;
	flex: 14.28%;
	max-width: 14.28%;
  }
}
@media screen and (max-width: 600px) {
  .column_7 {
	-ms-flex: 14.28%;
	flex: 14.28%;
	max-width: 14.28%;
  }
}
/* Create six (6 equal columns) that sit next to each other *************************************************/
.column_6 {
  -ms-flex: 16.66%;
  flex: 16.66%;
  max-width: 16.66%;
  padding: 0 4px;
}
.column_6 img {
  margin-top: 5px;
  vertical-align: middle;
  width: 100%;
}
@media screen and (max-width: 800px) {
  .column_6 {
    -ms-flex: 16.66%;
    flex: 16.66%;
    max-width: 16.66%;
  }
}
@media screen and (max-width: 768px) {
  .column_6 {
    -ms-flex: 16.66%;
    flex: 16.66%;
    max-width: 16.66%;
  }
}
@media screen and (max-width: 600px) {
  .column_6 {
    -ms-flex: 16.66%;
    flex: 16.66%;
    max-width: 16.66%;
  }
}



