/*Если фото не отображаются на сервере github, изменить расширение фоток с капса на обычное: .JPG -> .jpg*/
body { 
	margin: 0; 
	height: 100%;
	background: #333; 
	font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  
}
header {
    height: 30px;
    margin-top: 2%;
    margin-bottom: 5%;
    padding-left: 20px;
    color: #bebebe;
}
.flex-container { 
  padding: .5vw;
  font-size: 0;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: flex;
  min-height: 100%;
  padding: 20px;
  padding-bottom: 30px;
}

.flex-container .flex-element { 
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
  width: 200px; 
  margin: .5vw; 
}

.flex-container .flex-element img { 
  width: 100%; 
  height: auto; 
}

@media screen and (max-width: 400px) {
 .flex-container .flex-element { margin: 0; }
 .flex-container { padding: 0; }
}

.flex-element:hover {
  -webkit-transform: scale(1.7);
  -ms-transform: scale(1.7);
  transform: scale(1.7);
/*  плавное увеличение, но на сервере картинки дергаются o_O */
/*  -moz-transition: all 0.7s ease-out;
  -o-transition: all 0.7s ease-out;
  -webkit-transition: all 0.7s ease-out;*/
 
}

footer {
	height: 30px;
  margin-top: -30px;
  padding-left: 20px;
  color: #bebebe;
  text-align: center;
}

a {
  text-decoration: none;
  color: #FFCE73;
  font-size: 14px;
}
a:hover {
  color: #FFA500;
}