@charset "UTF-8";

html {
    overflow-y: scroll;
}

* {
    box-sizing: border-box;
}


/* ---- grid ---- */

.masonryrow {
    position: relative; padding-top: 0;
}


.masonrycontainer {
    width: 100%;
    position: relative;
    float: left;
}


.image-div {
    float: left;
}

.image-div img {
    width: 100%;
    
}

.info {clear: both;}

.grid {
    /* center
    margin: 0 auto; */
    position: relative;
    /* padding: 0 20px 2em;
    max-width: none;*/
}

/* clearfix */
.grid:after {
    content: '';
    display: block;
    clear: both;
}

/* ---- grid-item ---- */
.grid-sizer,
.grid-item {
    width: 18%;
    height: auto;
    min-height: 1px;
    float: left;
    margin-bottom: 25px;
    display: block;
 
}
.gutter-sizer { width: 2%; }

.grid-item--width2 {
    width: 38%
}

.grid-item--width3 {
    width: 58%;
}

.grid-item--width4 {
    width: 78%;
}

.grid-item--width5 {
    width: 98%;
}




@media screen and (max-width:120em) {
 
}
@media screen and (max-width:100em) {
 
}
@media screen and (max-width:80em) {
    
}
@media screen and (max-width:64em) { 
    .grid-sizer,
.grid-item {width: 28%;}
.grid-item--width2 {
    width: 58%}
.grid-item--width3 {
    width: 98%;}
}@media screen and (max-width:52em) { 
    .grid-sizer,
.grid-item {width: 48%;}
.grid-item--width2 {
    width: 48%}
.grid-item--width3 {
    width: 98%;}
}
@media screen and (max-width:40em) {
  .grid-sizer,
.grid-item {width: 100%;}
.grid-item--width2 {
    width: 100%}
.grid-item--width3 {
    width: 100%;}

}