#main-content {
    height: 100%;
    -webkit-scroll-snap-type: mandatory;
}

#main-content.scroll-grid {
    -webkit-scroll-snap-points-x: repeat(114px);
}

#main-content.scroll-line {
    -webkit-scroll-snap-points-x: repeat(241px);
}

#main-content.scroll-full {
    -webkit-scroll-snap-points-x: repeat(360px);
}

#main-container {
    height: 100%;
    position: relative;
}

#main .picture-wrapper,  #main .picture {
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

#main .picture-wrapper {
    position: absolute;
}

#main .picture {
    border-radius: 50%;
    background: transparent;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#main .picture-wrapper-grid {
    width: 114px;
    height: 116px;
}

#main .picture-grid {
    width: 112px;
    height: 112px;
}

#main .picture-wrapper-line {
    width: 241px;
    height: 266px;
}

#main .picture-line {
    width: 216px;
    height: 216px;
}

#main .picture-wrapper-full {
    width: 360px;
    height: 360px;
}

#main .picture-full {
    width: 360px;
    height: 360px;
}
