/*
Theme Name: Smoke n' Oak
Theme URI: woodrepublic.ca
Description: DESCRIPTION
Version: 0.1
Author: Matthew G
Author URI: woodrepublic.ca
*/
img.pic {
            transform-origin: top left;
            object-fit: cover;
            width: 100%;
            height: 30vh;
            object-fit: cover;
            object-position: 50% 30%;
            border-radius: 5vh;
        }

        body {
            margin: 0;
            padding: 0;
        }

        li.bar>img {
            padding: 6px;
            height: 40px;
            filter: invert(1);
        }

        ul.bar {
            position: sticky;
            top: 0;
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: #734327;
            display: flow-root;
            z-index: 999
        }

        li.bar>a,
        li.drop>a {
            padding: 20px;
            display: inline-block;
            font-family: 'chivo', sans-serif;
            text-align: center;
            text-decoration: none;
            color: white;
            background-color: #734327;
        }

        li.bar a:hover,
        li.drop>a:hover {
            animation-name: bar1;
            animation-duration: 0.2s;
            animation-fill-mode: forwards;
        }

        li.bar,
        li.drop {
            float: left;
        }

        article.left {
            width: 65%;
            box-sizing: border-box;
            padding-left: 5vw;
            padding-right: 5vw;
            padding-top: 1vh;
        }

        article.right {
            width: 35%;
            background-color: #fff7f2;
            box-sizing: border-box;
            padding-left: 1vw;
            padding-right: 1vw;
            padding-top: 1vh;
        }

        .dropcon {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        .dropcon a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }

        .dropcon a:hover {
            background-color: aliceblue;
            font-weight: bold;
        }

        li.drop {
            position: relative;
        }

        li.drop:hover .dropcon {
            display: block;
        }

        section.main {
            display: flex;
            flex-direction: row;
        }

        section.frame {
            height: 95vh;
            position: relative;
            overflow: hidden;
            padding: 0;
            margin: 0;
            justify-content: center;
            align-items: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        img.ani {
            animation-name: ani1;
            animation-duration: 4s;
            animation-fill-mode: forwards;
            filter: invert(1);
            width: 90vw;
        }

        section.frame>img {
            position: absolute;
        }

        div.gallery {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            margin: 4px
        }

        div.con {
            position: relative;
            text-align: center;
            color: #ffffff;
            padding: 5px;
        }

        div.dis {
            position: absolute;
            bottom: 5%;
            left: 5%;
            display: none;
            text-shadow: 2px 2px 4px #000000;
        }

        div.con:hover {
            filter: saturate(80%);
            animation-name: ani2;
            animation-duration: 0.2s;
            animation-fill-mode: forwards;

            div.dis {
                display: block;
                animation-name: ani1;
                animation-duration: 0.2s;
                animation-fill-mode: forwards;
            }

        }

        img.pic {
            border-radius: 5vh;
        }

        h1 {
            text-align: center;
            font-size: 50px;
        }

        @keyframes bar1 {
            from {
                background-color: #734327;
            }

            to {
                background-color: #5d3118;
            }
        }

        @keyframes ani1 {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes ani2 {
            from {
                filter: saturate(80%);
            }

            to {
                filter: saturate(140%);
            }
        }

        @media only screen and (max-width: 2200px) {

            div.dis,
            div.con {
                width: calc(20% - 10px);
            }
        }

        @media only screen and (max-width: 1800px) {

            div.dis,
            div.con {
                width: calc(25% - 10px);
            }
        }

        @media only screen and (max-width: 1400px) {

            div.dis,
            div.con {
                width: calc(33% - 10px);
            }
        }

        @media only screen and (max-width: 1000px) {

            div.dis,
            div.con {
                width: calc(50% - 10px);
            }
        }

        @media only screen and (max-width: 600px) {

            div.dis,
            div.con {
                width: calc(100% - 10px);
            }
        }