@charset "UTF-8"; /* ==================================================
 * Snapic Plus for grid.moderate Main Stylesheet by Lopwon.
 * www.Lopwon.com
 * 2023-10-18
 * ------------------------------------------------------------------- */

.grid .grid__item, .grid .grid__sizer, .grid .grid__cover { width: calc((100% / 4) - 10px); margin: 5px; } 
.masonry .grid-cover, .masonry .grid-item a, .album .grid-item a {
	display: block;
	position: relative;
	
}
#logo {
		display: flex;
	}
.snapic-grid-description, .snapic-grid-poster { padding: 0 1.25em; } 
.snapic-exif-info { padding: 0.5em 1em; width: calc(100% - 2em + 2px); height: calc(100% - 1em + 2px); font-size: var(--font-size-m); }
.snapic-exif-info span { margin: 0.15em 0; } 
.snapic-grid-meta { font-size: var(--font-size-m); } 
.snapic-grid-by { margin-right: 1em; width: 3em; height: 3em; } 
.snapic-grid-avatar { width: 2.5em; height: 2.5em; } 
.snapic-grid-avatar img { width: 2.5em; height: 2.5em; } 
.snapic-grid-title { font-size: var(--font-size-xl); line-height: 1.6; } 
.snapic-grid-excerpt, .snapic-grid-about, .snapic-grid-keyword, .snapic-grid-poster { font-size: var(--font-size-l); line-height: 1.4; }
.snapic-grid-about, .snapic-grid-keyword { padding: 0 1.25em; width: calc(100% - 2.5em); } .grid__item:hover .snapic-grid-about-avatar img @charset "UTF-8"; /* ==================================================
 * Snapic Plus for grid.moderate Main Stylesheet by Lopwon.
 * www.Lopwon.com
 * 2023-10-18
 * ------------------------------------------------------------------- */
.grid .grid__item, .grid .grid__sizer {
    width: calc((100% / 4) - 10px);
    margin: 5px;
}

.snapic-grid-description, .snapic-grid-poster {
    padding: 0 1.25em;
    
}

.snapic-exif-info {
    padding: 0.5em 1em;
    width: calc(100% - 2em + 2px);
    height: calc(100% - 1em + 2px);
    font-size: var(--font-size-m);
}

.snapic-exif-info span {
    margin: 0.15em 0;
}

.snapic-grid-meta {
    font-size: var(--font-size-m);
}

.snapic-grid-by {
    margin-right: 1em;
    width: 3em;
    height: 3em;
}

.snapic-grid-avatar {
    width: 2.5em;
    height: 2.5em;
}

.snapic-grid-avatar img {
    width: 2.5em;
    height: 2.5em;
}

.snapic-grid-title {
    font-size: var(--font-size-xl);
    line-height: 1.6;
}

.snapic-grid-excerpt, .snapic-grid-about, .snapic-grid-keyword, .snapic-grid-poster {
    font-size: var(--font-size-l);
    line-height: 1.4;
}

.snapic-grid-about, .snapic-grid-keyword {
    padding: 0 1.25em;
    width: calc(100% - 2.5em);
}

.grid__item:hover .snapic-grid-about-avatar img {
    top: -1em;
    right: 1.25em;
    width: 64px;
    height: 64px;
}

.grid__item:hover .snapic-grid-keyword-avatar a, .grid__item:hover .snapic-grid-keyword-icon {
    left: 0.25em;
    width: 56px;
    height: 56px;
    background-size: 56px;
}

.grid__item:hover .snapic-grid-keyword-meta {
    left: calc(56px + 2.5em);
}

.page-navigator li {
    margin: 0 0.25em;
}

.page-navigator a {
    padding: 0.25em;
    min-width: 2em;
    height: 2em;
}

@media screen and (max-width: 960px) {
    .grid .grid__item, .grid .grid__sizer {
        width: calc((100% / 3) - 10px);
        margin: 5px;
    }

    .page-navigator li {
        margin: 0 0.5em;
    }

    .page-navigator a {
        padding: 0.5em;
    }
}

@media screen and (max-width: 768px) {
    .page-navigator li {
        margin: 0 0.25em;
    }

    .page-navigator a {
        padding: 0.25em;
    }
}

@media screen and (max-width: 640px) {
    .grid .grid__item, .grid .grid__sizer {
        width: calc((100% / 2) - 10px);
        margin: 5px;
    }

    .page-navigator li {
        margin: 0 0.5em;
    }

    .page-navigator a {
        padding: 0.5em;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --font-size-s: 0.8em;
        --font-size-m: 1.0em;
        --font-size-l: 1.2em;
        --font-size-xl: 1.4em;
        --font-size-xxl: 1.6em;
        --font-size-xxxl: 1.8em;
    }

    .snapic-grid-description, .snapic-grid-poster {
        padding: 0 1em;
    }

    .snapic-grid-top-left {
        top: calc(1em - 0.15em);
    }

    .page-navigator li {
        margin: 0 0.25em;
    }

    .page-navigator a {
        padding: 0.25em;
    }
}

@media screen and (max-width: 400px) {
    .snapic-grid-description, .snapic-grid-poster {
        padding: 0 0.75em;
    }

    .snapic-exif-info {
        padding: 0.25em 1em;
        height: calc(100% - 0.5em + 2px);
    }

    .snapic-grid-by {
        margin-right: 0.5em;
    }

    .page-navigator li {
        margin: 0 0.15em;
    }

    .page-navigator a {
        padding: 0.15em;
    }
}
{ top: -1em; right: 1.25em; width: 64px; height: 64px; } .grid__item:hover .snapic-grid-keyword-avatar a, .grid__item:hover .snapic-grid-keyword-icon { left: 0.25em; width: 56px; height: 56px; background-size: 56px; } .grid__item:hover .snapic-grid-keyword-meta { left: calc(56px + 2.5em); } .page-navigator li { margin: 0 0.25em; } .page-navigator a { padding: 0.25em; min-width: 2em; height: 2em; } @media screen and (max-width: 960px) { .grid .grid__item, .grid .grid__sizer { width: calc((100% / 3) - 10px); margin: 5px; } .page-navigator li { margin: 0 0.5em; } .page-navigator a { padding: 0.5em; } } @media screen and (max-width: 768px) { .page-navigator li { margin: 0 0.25em; } .page-navigator a { padding: 0.25em; } } @media screen and (max-width: 640px) { .grid .grid__item, .grid .grid__sizer { width: calc((100% / 2) - 10px); margin: 5px; } .page-navigator li { margin: 0 0.5em; } .page-navigator a { padding: 0.5em; } } @media screen and (max-width: 480px) { :root { --font-size-s: 0.8em; --font-size-m: 1.0em; --font-size-l: 1.2em; --font-size-xl: 1.4em; --font-size-xxl: 1.6em; --font-size-xxxl: 1.8em; } .snapic-grid-description, .snapic-grid-poster { padding: 0 1em; } .snapic-grid-top-left { top: calc(1em - 0.15em); } .page-navigator li { margin: 0 0.25em; } .page-navigator a { padding: 0.25em; } } @media screen and (max-width: 400px) { .snapic-grid-description, .snapic-grid-poster { padding: 0 0.75em; } .snapic-exif-info { padding: 0.25em 1em; height: calc(100% - 0.5em + 2px); } .snapic-grid-by { margin-right: 0.5em; } .page-navigator li { margin: 0 0.15em; } .page-navigator a { padding: 0.15em; } }