@charset "UTF-8";
@import url(//fonts.googleapis.com/css?family=Dosis:400,700&subset=latin,latin-ext);

html {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    font-family: Dosis;
    color: #363a3b;
    background-color: white;
}

a {
    text-decoration: none;
    color: #ea5b0b;
    &:hover {
        text-decoration: underline;
    }
}

header {
    padding: 2rem 0;
    max-width: 48rem;
    margin: 0 .5rem;
    @media screen and (min-width: 49em) {
        margin: 0 auto;
    }


    h1 {
        padding: 1em 0 0 0;
        margin: 0;

        @media screen and (min-width: 30em) {
            text-align: right;
            padding: 0;
        }
        .author {
            font-size: 1rem;
            font-weight: normal;
        }
    }
    img {
        margin: auto;
        @media screen and (min-width: 30em) {
            float: left;
        }
    }
}

section#lead {
    margin-left: 40%;
    margin-top: 3rem;
    text-align: right;
}

section.intro, section.outro {
    font-size: 1.3rem;
    background: #edede6;
    margin-top: 1em;

    a {
        display: block;
        padding: .7em 0;
        color: black;
        div {
            max-width: 48rem;
            margin: 0 .5rem;
            @media screen and (min-width: 49em) {
                margin: 0 auto;
            }
        }
        &:hover {
            background: white;
            text-decoration: none;
        }
        .author {
            display: block;
            font-size: 1rem;
        }
    }
}

section.main {
    padding: 0 0;
    max-width: 48rem;
    margin: 0 .5rem;
    @media screen and (min-width: 49em) {
        margin: 0 auto;
    }

    div.roza {
        position: relative;
        
        a {
            position: absolute;
            color: black;
            &#roza-1 {
                top: 0;
                left: 33%;
                right: 33%;
                bottom: 55%;
                &:hover {
                    background: url({{ media_url('images/roza-select-1.png') }});
                    background-size: 294%;
                    background-position: 50% 0;
                }
            }
            &#roza-2 {
                top: 33%;
                left: 55%;
                right: 0;
                bottom: 33%;
                &:hover {
                    background: url({{ media_url('images/roza-select-2.png') }});
                    background-size: 222%;
                    background-position: 100% 50%;
                }
            }
            &#roza-3 {
                top: 55%;
                left: 33%;
                right: 33%;
                bottom: 0;

                &:hover {
                    background: url({{ media_url('images/roza-select-3.png') }});
                    background-size: 294%;
                    background-position: 50% 100%;
                }
            }
            &#roza-4 {
                top: 33%;
                left: 0;
                right: 55%;
                bottom: 33%;

                &:hover {
                    background: url({{ media_url('images/roza-select-4.png') }});
                    background-size: 222%;
                    background-position: 0 50%;
                }
            }
        }
    }
}

a.download {
    padding: 0 0;
}


footer {
    border-top: 1px solid #edede6;
    padding: 1rem 0;
    font-size: .75rem;
    max-width: 48rem;
    margin: 3rem auto 0;

    .footer-item {
        padding: .5rem;

        @media screen and (min-width: 24em) {
            display: inline-block;
            vertical-align: top;
            width: 15rem;
        }
    }
}


}

blockquote {
    margin: 0;
    padding: 0;
    font-style: italic;
}

.twocol {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    -o-column-count: 2;
    -ms-column-count: 2;
    column-count: 2;

    p {
        margin: 0 0 1em;
        -webkit-column-break-inside: avoid;
        -o-column-break-inside: avoid;
        -ms-column-break-inside: avoid;
        column-break-inside: avoid;
        break-inside: avoid-column;
        page-break-inside:avoid;
    }
}

.pozycja {
    .ocena {
        display: inline-block;
        width: 8em;
        img {
            vertical-align: middle;
        }
    }
    .label {
        display: inline-block;
    }
}
.przypisy {
    font-size: .9em;
}

#b-author, #b-user, #b-inter {
    display: inline-block;
    width: 10em;
    padding: 1em 2em;
    margin: .5em;
    cursor: pointer;
    background: #edede6;
    border: .5em solid #edede6;
    border-radius: 1em;
    text-align: center;
    color: black;
    span {
        display: block;
        font-size: 2em;
        font-size
    }
    &.active {
        border-color: #ea5b0b;
    }
    &:hover {
        text-decoration: none;
        background: white;
    }
}
.p-author, .p-user, .p-inter {
    display: none;
    position: absolute;
    margin: auto;
    img {
        width: 1em;
        @media screen and (min-width: 24em) {
            width: 2em;
        }
    }
}
#roza-1 .p-author, #roza-1 .p-user, #roza-1 .p-inter {
    top: 40%;
    left: 30%;
}#roza-2 .p-author, #roza-2 .p-user, #roza-2 .p-inter {
    top: 40%;
    left: 40%;
}#roza-3 .p-author, #roza-3 .p-user, #roza-3 .p-inter {
    bottom: 40%;
    left: 30%;
}#roza-4 .p-author, #roza-4 .p-user, #roza-4 .p-inter {
    top: 40%;
    left: 30%;
}