/*
    Theme Name: Perefoto
    Author: Valju Aloel
    Author URI: http://aloel.ee/
 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-family: 'Slabo 27px', serif; word-wrap: break-word; height: 100%; width: 100%; }
body { font-size: 16px; line-height: 28px; color: #583B29; margin: .62em;}
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 1.1em; padding-top: .4em; padding-bottom: .2em; color: #583B29; }
p { padding-top: .4em; padding-bottom: .4em; }
.home h2 { padding-top: .4em; padding-bottom: .4em; font-weight: normal; }
a, a:link, a:visited { color: #000; text-decoration: none; }

#header {
    background: url(images/vasakul.jpg) no-repeat center 55%;
    padding-top: 30vh;
}
#branding {background: #583B29; color: #fff; }
#site-title { padding-bottom: 0em; text-align: center; text-transform: uppercase; }
    #site-title h1 { margin: 0; padding: 0; border: 0; font-size: 1em; }
    #site-title a { font-size: 2em; color: #fff; width: 100%; display: block; padding: .4em; }
#site-description { text-align: center; margin-top: -10px;}

        #menu ul { list-style: none; display: table;  width: 100%;}
.menu-item { background: rgba(231, 82, 54, 1); padding: 4px 1em; display: table-cell; border-left: 1px solid #B8AE93; text-align: center;}
    .menu-item:first-child { border-left: none; }
            .menu-item a { color: #fff; font-weight: normal; }
.entry-title { text-align: left; padding-top: 1em; }
#content .entry-title { font-size: 1.4em; font-weight: 700; }
#content ol, #content ul { list-style-position: inside; }
#content li { padding-top: .4em; padding-bottom: .4em; border-bottom: 0px solid #C7C7C7; }
    #content li:first-child { border-top: 0px solid #C7C7C7; }
    #content li ul { list-style-position: outside; margin-left: 2.2em; }
    #content li li, #content li li:first-child { border: none; }
table { border-collapse: collapse; text-align: right; width: 100%; }
th, td { padding: .4em; }
tr { border-bottom: 1px solid #C7C7C7; }

    #sidebar { width: 100%; color: #fff; text-align: center; font-size: 1em; background: #583B29; padding-top: 1rem; padding-bottom: 1rem;}
.widget-area h2 {
    color: rgba(231, 82, 54, 1);
    text-transform: uppercase;
    padding: 4px 2em;
}
.widget-area a, .widget-area a:visited {
    color: #fff;
}
#sidebar ol, #sidebar ul {
    list-style: none;
}
iframe {
    border: 0;
    width: 100%;
    filter: saturate(5%);
}
input, textarea, button { padding: 1em;  border-radius: 4px; border: 1px solid #B8AE93;}
/*-------------------------WORDPRESSI-ASJAD--------------------*/
.entry-meta { display: none; }
#login { display: none; }
#login a { color: rgba(110, 120, 57, .2); }

@media (max-width: 1080px) and (orientation: landscape) {

    #primary {display: none;}


}


    @media screen and (min-width: 700px) {
        body {
            height: 100%;
            margin: 0;
            background: #583B29;
        }

        #wrapper {
            display: flex;
            height: 100%;
        }

        #header, #content, #sidebar, #footer {
            display: block;
        }

        #header {
            background: url(images/vasakul.jpg) repeat center;
        }

        #container {
            padding: 0;
            display: flex;
            background: #fff;
            max-height: 100%;
        }

        #content {
            width: 49vw;
            padding: 1em 1em;
            overflow-y: auto;
        }

        #sidebar {
            width: 20vw;
            padding: 10vh 0 0 1em;
            color: #fff;
            text-align: center;
            font-size: 1em;
            background: #583B29;
        }

        .widget_text {
            padding-bottom: 1em;
        }

        #branding {
            height: 85%;
            width: 30vw;
            background: transparent;
            color: initial;
            position: relative;
        }

        #site-title {
            background: #583B29;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
        }

            #site-title a {
                color: #fff;
                letter-spacing: .1em;
                text-shadow: 0 0 2px #000;
                text-align: left;
                text-align: right;
            }

        #site-description {
            color: #C5C5C5;
            text-indent: -9999px;
        }

        #menu ul {
            display: block;
            margin-top: .5em;
        }


        .menu-item {
            background: rgba(231, 82, 54, 1);
            padding: 4px 2em;
            margin: .5em 0em .5em auto;
            text-align: right;
            max-width: 200px;
            display: table-cell;
        }

        #login {
            position: absolute;
            bottom: 0;
            right: 0;
        }

        #footer {
            position: absolute;
            bottom: 0;
            right: 300px;
            z-index: -10;
        }

        iframe {
            height: 300px;
            border-radius: 4px;
        }

        .page #content {
            width: auto;
        }

        .page #sidebar {
            display: none;
        }

        #post-30 {
            width: 36vw;
        }




        #content {
            animation: round 2s ease-in;
        }

        @keyframes round {
            from {
                height: 0%;
                overflow: hidden;
                margin-top: 500px;
            }

            to {
                height: 90%;
                margin-top: 0;
                overflow: hidden;
            }
        }
    }

    @media screen and (min-width: 1000px) {
        #content {
            width: 43vw;
            padding: 1em 3em;
        }

        #branding {
            width: 36vw;
        }

        #site-title a {
            font-size: 2.2em;
        }

        #login {
            display: block;
        }
    }

    @media screen and (min-width: 1300px) {
        #branding {
            width: 36vw;
        }

        #content {
            width: 43vw;
        }

        #site-title a {
            font-size: 2.4em;
        }
    }

    @media screen and (min-width: 700px) and (max-height:650px) {
        #branding {
            height: 80%;
        }
    }