@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 20%;
    text-align: right;

    h1 {
        margin: 0;
        padding: 0;
        padding-left: 84px;
        .author {
            font-size: 1rem;
            font-weight: normal;
        }
    }
    img {
        float: left;
        width: 74px;
        height: 74px;
    }
}

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

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

    a {
        display: block;
        padding: .7em 20%;
        color: black;
        &:hover {
            background: white;
            text-decoration: none;
        }
        .author {
            display: block;
            font-size: 1rem;
        }
    }
}

section.main {
    padding: 0 20%;

    div.roza {
        position: relative;
        
        a {
            position: absolute;
            &#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 20%;
}


footer {
    border-top: 1px solid #edede6;
    padding: 1em 20%;
    margin-top: 3em;
}

.ocena img {
    vertical-align: middle;
}

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;
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    column-break-inside: avoid;

    p {
        margin: 0 0 1em;
    }
}