*{
	box-sizing: border-box;
}

body{
	margin:0;
	font-family: Arial, Helvetica, sans-serif;
}

.header{
	overflow: hidden;
	background-color: #3C4E58;
	padding: 20px 10px;
}

.header a{
	float: left;
	color:#fff;
	text-align: center;
	padding: 12px;
	text-decoration: none;
	font-size: 18px;
	line-height: 25px;
	border-radius: 4px;

}

.header a.logo{
	font-size: 25px;
	font-weight: bold;
}

.header a:hover{
	background-color: #ddd;
	color:black;
}

.header a.active {
  background-color: green;
  color: white;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
}

@media screen and (max-width: 600px) {
  .slide_column{
    width: 100%;
  }
}
/*.slide_column{
	float: left;
	width: 33.33%;
	padding: 10px;
	height: 300px;
}

.slide_row:after{
	content: "";
	display: table;
	clear: both;
}*/
.slide_row{
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	padding: 20px 15px;
	justify-content: center;
}

.slide_column{
	-ms-flex: 25%;
	flex:25%;
	max-width: 25%;
	padding: 20px 15px;
}

.slide_column img{
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;
	overflow: hidden;
	border-radius: 10px;
	height: 100%;
	box-shadow:
    	rgba(black, 0.66) 0 30px 60px 0,
    	inset #333 0 0 0 5px,
    	inset rgba(white, 0.5) 0 0 0 6px;
}

@media screen and (max-width: 800px){
	.slide_column {
		-ms-flex:50%;
		flex:50%;
		max-width: 50%;
	}
}

@media screen and (max-width: 600px){
	.slide_column {
		-ms-flex:100%;
		flex:100%;
		max-width: 100%;
	}
}
/*@media only screen   and (min-device-width : 320px)   and (max-device-width : 480px)  {
	.slide_column{
   		float: left;
		width: 33.33%;
		padding: 0 6px 0 8px;
		height: 300px;
	
  	}
}

@media only screen   and (min-device-width : 360px)   and (max-device-width : 640px)  {
	.slide_column{
   		float: left;
		width: 33.33%;
		padding: 0 7px 0 8px;
		height: 300px;
  	}

}


@media only screen   and (min-device-width : 768px)   and (max-device-width : 1024px)  {
	.slide_column{
   		float: left;
		width: 33.33%;
		padding: 0 13px 0 8px;
		height: 300px;
  	}
}

@media only screen   and (min-width: 1030px)   and (max-width: 1366px)  { 
	.slide_column{
   		float: left;
		width: 33.33%;
		padding: 0 7px 0 8px;
		height: 300px;
  	}
}

@media only screen   and (min-width: 1370px)  and (max-width: 1605px)  {
	.slide_column{
   		float: left;
		width: 33.33%;
		padding: 0 10px 0 8px;
		height: 300px;
  	}
}


.slide_row{
	padding: 40px 80px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

}

.slide_column{
	margin:10px;
	cursor: pointer;
}
.slide_column img{
	position: relative;
	flex:0 0 240px;
	height: 720px;
	overflow: hidden;
	border-radius: 10px;
	box-shadow:
    	rgba(black, 0.66) 0 30px 60px 0,
    	inset #333 0 0 0 5px,
    	inset rgba(white, 0.5) 0 0 0 6px;
}