#mainContents {
   
    
}
@media print, screen and (min-width: 769px) {
   
    #gallery .items{
        padding-bottom: 100px;
    }
    #gallery .item{
        background-image: url(../gallery/img/film.png);
        -webkit-background-size: calc(2800px / 2) calc(368px / 2);
        background-size: calc(2800px / 2) calc(368px / 2);
        height: calc(368px / 2);
        background-repeat:repeat-x;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        margin-bottom: 40px;
        transform: rotate(3deg) scale(1.05);
    }
    #gallery .item ul{
        width: 920px;
        margin-left: auto;
        margin-right: auto;
        background-repeat:repeat-x;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
    }
    #gallery .item ul li{
        margin-right: 10px;
    }
    #gallery .item ul a{
        width: 220px;
        display: block;
    }
    #gallery .item ul a img{
        width: 100%;
        display: block;
    }
}



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


    #gallery .items{
        margin-top: 5vw;
        padding-bottom:50px;
    }
    #gallery .item{
        background-image: url(../gallery/img/film.png);
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        width: 160vw;
        height: calc(160vw / 2800 * 368);
        background-repeat:repeat-x;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        margin-bottom: 5vw;
        transform: rotate(3deg) scale(1.05);
    }
    #gallery .item ul{
        background-repeat:repeat-x;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
    }
    #gallery .item ul li{
        width: calc(25vw - 4px);
        margin-right: 2px;
        margin-left: 2px;
    }
    #gallery .item ul a{
        display: block;
    }
    #gallery .item ul a img{
        width: 100%;
        display: block;
    }
    
    


}