body{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
}


main{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  max-width: 1200px;
  margin-top: 5vw;
}

#article-container{ 
	width: 930px;
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 400px 15% 400px;
	grid-template-columns: 400px 400px; 
  grid-row-gap: 70px;
  grid-column-gap: 15%; 
  -webkit-box-align: center; 
      -ms-flex-align: center; 
          align-items: center; 
  margin-bottom: 50px;
}

.article{
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	height: 320px;
	border: 2px solid #e7d9b9;
  font-family: 'Lora', 'Futura Md BT', Arial, Helvetica, sans-serif; 
}
 
.picture{
	width: 100%;
	height: 230px;
	background: lightslategray;
	background-position: top center;
	background-size: cover;
}

.hover-field{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 230px;
	-webkit-transform: background-color 0.2s;
	    -ms-transform: background-color 0.2s;
	        transform: background-color 0.2s;
}

.hover-field:hover{
	background-color: rgba(255, 255, 255, 0.2);
}

.title{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 90%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	height: 85px;
	text-align: center;
	color: black;
	text-decoration: none;
	-webkit-transition: color 0.2s;
	-o-transition: color 0.2s;
	transition: color 0.2s;	
  font-family: 'Brandon Grotesque Medium', Arial, Helvetica, sans-serif;
}

.title:hover{
	color: gray;
}


.loading-panel{
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}



@media only screen and (max-width: 600px) {
	#article-container{
    width: 100vw;
		-ms-grid-columns: 100%;
		grid-template-columns: 100%;
		padding: 0 5px;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
  } 
}