#square-list{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    justify-content: center;
}
li.square {
    width: 25%;
    text-align: center;
    overflow: hidden;
    padding: 5px;
    display:none;
 

}
li.square.show{
  display:block;
}
li.square:nth-child(even) {
margin-top: 30px;
}
li.square:nth-child(odd) {
margin-top: 0px;
}
.section.active li.square:nth-child(even) {
    animation: marginEffect 2s;
}

.section.active li.square:nth-child(odd) {
    animation: noMarginEffect 2s;
}
  
@-webkit-keyframes marginEffect {
  from {margin-top:0;}
  to {margin-top: 30px;}
}
@-webkit-keyframes noMarginEffect {
  from {margin-top:30px;}
  to {margin-top: 0px;}
}
.square-portrait {
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    margin-bottom: 10px;
}
.square-portrait:hover {
    opacity: 0.5;
}


.square-portrait:hover{
}

.square-portrait:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

@media screen and (max-width:1000px) {
li.square {
    width: 50%;
}
}

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

}