/* General */

body {
    background: #d7c69d;
    font-family: Verdana, Geneva, sans-serif;
    margin: 0;
    padding: 0;
}

    a {
        text-decoration: none; 
        color:#694d2d;
    }

    a:hover,
    a:focus {
        text-decoration: underline; 
        color:#000;
    }

    p { 
        font-size: 10pt; 
    }

    h2 { 
        font-size: 16pt; 
    }

.largetext { 
    font-size: 13pt; 
}

.mediumtext { 
    font-size: 12pt; 
}

.text { 
    font-size: 10pt; 
}

.smalltext { 
    font-size: 8pt; 
}


/* Header */

#header {
    border-bottom: 7px solid #694d2d;
    padding: 0  6px;
}

    #header form {
        float: right;
        overflow: hidden;
        position: relative;
        right: 8px;
        top: 42px;
    }

        #header form svg {
            color: #694E2D;
            font-size: 24px;
            position: relative;
            top: 3px;
        }

        #header input[type="text"] {
            background: #fff;
            border: none;
            border-radius: 2px;
            box-sizing: border-box;
            font-size: 17px;
            height: 40px;
            opacity: 0.6;
            padding: 10px 50px 10px 15px;
            transition: .2s all;
            width: 270px;
        }

        #header input[type="text"]:focus {
            border: none;
            opacity: 0.8;
            outline: 0;
        }

        #header input[type="submit"] {
            -webkit-appearance: none;
            background: #694E2D;
            border: 0;
            border-radius: 0;
            color: #EFE8D7;
            cursor: pointer;
            height: 40px;
            font-weight: bold;
            padding: 0 10px;
            position: absolute;
            right: -60px;
            text-transform: uppercase;
            top: 0;
            transition: .2s ease-in-out all;
        }

        #header input[type="text"]:focus + input[type="submit"] {
            right: -1px;
        }

    #mobile-buttons {
        display: none;
    }


/* Main Content Area */

#main-content-wrap {
    display: flex;
}


    /* Left Column - Main Nav */

    #menu-title {
        background: #694E2D;
        color: #EFE8D7;
        font-weight: bold;
        margin: 0 -4px;
        padding: 4px 16px 11px;
        text-transform: uppercase;
    }

    #main-nav {
        background: #E4D2A6;
        flex: 0 1 315px;
        padding: 0;
        margin: 0;
    }

        #main-nav ul {
            margin: 0;
            padding: 0;
        }

            #main-nav ul li {
                display: block;
                border-bottom: 1px solid rgb(105 78 45 / 25%);
            }

                #main-nav ul li a {
                    align-items: center;
                    background: #E4D2A6;
                    color: #000;
                    display: flex;
                    font-family: Arial, sans-serif;
                    font-weight: bold;
                    font-size: 13px;
                    padding: 10px 10px;
                    position: relative;
                    text-decoration: none;
                    transition: background .3s ease-in-out;
                }

                #main-nav ul li a:hover,
                #main-nav ul li a:focus,
                #main-nav ul li.active > a {
                    background: #A79069;
                }

                #main-nav ul li.active > a {
                    border-bottom: 1px solid rgb(105 78 45 / 25%);
                }

                    #main-nav ul li a svg {
                        color: #B5946B;
                        font-size: 20px;
                        transition: color .3s;
                        width: 30px;
                    }

                    #main-nav ul li a svg.fa-sort-up {
                        font-size: 16px;
                        height: 10px;
                        margin-top: -5px;
                        position: absolute;
                        right: 10px;
                        top: 50%;
                        transition: transform .3s ease-in-out;
                        transform: rotate(90deg);
                        width: auto;
                    }

                    #main-nav ul li.active a svg.fa-sort-up {
                        transform: rotate(180deg);
                    }

                    #main-nav ul li a:hover svg,
                    #main-nav ul li a:focus svg,
                    #main-nav ul li.active > a svg {
                        color: #694F2D;
                    }

            /* Sub Menu */

            #main-nav ul ul {
                background: #CCB98E;
                display: none;
            }

                #main-nav ul ul li {
                    border: none;
                }

                #main-nav ul ul li a {
                    background: transparent;
                    font-size: 12px;
                    padding: 7px 8px 7px 40px;
                }

                #main-nav ul ul li a:hover,
                #main-nav ul ul li a:focus {
                    background: #bba37b;
                }


    /* Main Content Section */

    #main-content {
        border-left: 3px dotted #694d2d;
        flex: 0 1 100%;
        padding: 15px 10px 15px 11px;
    }

        /* Homepage - Alert */

        .alert {
            border: 2px solid #694d2d;
            background-color: #EFE8D7;
            font-size: 14px;
            margin: 10px auto 20px;
            padding: 11px;
            width: 80%;
        }

            .alert span {
                display: block;
                font-weight: bold;
                margin-bottom: 3px;
            }

        /* Homepage - Random Rumph Item */

        #random-rumph {
            float: right; 
            margin: 0 0 10px 10px;
        }

            #random-rumph > p + div {
                border: 2px solid #694d2d !important;
                background-color: #EFE8D7 !important;
            }

        /* Item Gallery */

        #rumph-item {
            display: flex;
        }

            #rumph-gallery {
                flex-shrink: 0;
                margin: 0 30px 20px 10px;
                max-width: 500px;
                width: 60%;
            }

                #rumph-gallery-container {
                    background: #EFE8D7;
                    border: 4px solid #694E2D;
                    display: flex;
                    height: 410px;
                    text-align: center;
                }

                    #main-pic {
                        display: block;
                        text-align: center;
                        width: 100%;
                    }

                        #main-pic img {
                            max-height: 300px !important;
                            max-width: 300px !important;
                            /* width: 100%; */
                        }

                        #main-pic #master-span,
                        #main-pic .smalltext,
                        #main-pic #master-span a {
                         /*   display: inline-block; */
                            margin: 4px 0;
                        }

                            #main-pic #master-span br {

                            }

                    #thumbs {
                        flex-shrink: 0;
                        height: 410px !important;
                        order: 1;
                        overflow-x: hidden !important;
                        width: 134px !important;
                    }

                        .thumb-container {
                            border-width: 2px !important;
                            border-color: #694E2D !important;
                            padding: 7px !important;
                            background: none !important;
                        }

                            .thumb-container a {
                                display: block;
                            }

                                .thumb-container img {
                                    display: block;
                                    margin: 0 auto;
                                }

                            .thumb-container span {
                                display: none;
                            }

                #ebay-frame {
                    border: none;
                    margin: 10px 0;
                    max-width: 100%;
                    overflow: hidden;
                    width: 100%;
                }

                #add-info {
                    text-align: center;
                }

                    #add-info a,
                    #add-info img {
                        display: inline-block;
                        vertical-align: middle;
                    }




/* Footer */

#footer {
    border-top: 7px solid #694d2d;
    padding: 30px 0;
}

    #footer > div {
        display: flex;
        justify-content: center;
    }

        #footer ul {
            margin: 0;
            padding: 0 2%;
            position: relative;
        }

        #footer ul:last-child:after {
            display: none;
        }

        #footer ul:after {
            background: #694d2d;
            content: "";
            height: 130px;
            position: absolute;
            right: 0;
            top: 0;
            width: 2px;
        }
        
            #footer li {
                list-style: none;
            }

                #footer .title {
                    display: block;
                    font-size: 13px;
                    font-weight: bold;
                    margin: 0 0 5px;
                }

                #footer li ul {
                    padding: 0 2%;
                }

                #footer li ul:after {
                    display: none;
                }

                    #footer li a {
                        display: block;
                        font-size: 13px;
                        padding: 3px 0;
                        }

    #footer cite {
        display: block;
        font-size: 12px;
        margin-top: 20px;
        text-align: center;
    }



/* Media Queries */

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

    /* Header */

    #header {
        background: #d7c69d;
        box-sizing: border-box;
        height: 78px;
        padding: 4px 10px;
        position: relative;
        z-index: 20;
    }

        #header > a {
            display: inline-block;
            width: 210px;
        }

            #header > a img {
                display: block;
                height: auto;
                max-width: 100%;
            }

        #header > a + img {
            display: inline-block;
            height: auto;
            left: -13px;
            position: relative;
            width: 40px;
        }

        #header form {
            display: none;
        }

        #mobile-buttons {
            display: flex;
            float: right;
            position: relative;
            right: -10px;
            top: -4px;
        }

            .item-search {
                background-color: #836C4B;
                color: #EFE8D7;
                cursor: pointer;
                font-size: 13px;
                text-align: center;
                font-weight: bold;
                padding: 22px 17px 0;
                text-transform: uppercase;        
            }

                .item-search svg {
                    font-size: 28px;
                }

            .main-nav-toggle{
                background-color: #694E2D;
                box-sizing: border-box;
                color: #EFE8D7;
                cursor: pointer;
                display: inline-block;
                font-size: 13px;
                height: 72px;
                text-align: center;
                font-weight: bold;
                padding: 13px 30px 0;
                text-transform: uppercase;
            }
        
                .mnt-text{
                    display: block;
                    margin-bottom: 10px;
                }
        
                /* Hamburg Icon */
            
                .mnt-icon{
                    display: inline-block;
                    width: 31px;
                    height: 17px;
                    position: relative;
                    transform: rotate(0deg);
                    transition: .5s ease-in-out;
                    cursor: pointer; 
                }
            
                    .mnt-icon span{
                        display: block;
                        position: absolute;
                        height: 2px;
                        width: 100%;
                        background: #EFE8D7;
                        opacity: 1;
                        left: 0;
                        transform: rotate(0deg);
                        transition: .25s ease-in-out;
                    }
                
                    .mnt-icon span:nth-child(1){
                        top: 0px;
                        transform-origin: left center;
                    }
                
                    .mnt-icon span:nth-child(2){
                        top: 8px;
                        transform-origin: left center;
                    }
                
                    .mnt-icon span:nth-child(3){
                        top: 16px;
                        transform-origin: left center;
                    }
                
                    .mobile-menu-open .main-nav-toggle .mnt-icon span:nth-child(1){
                        transform: translate(5px,-4px) rotate(45deg);
                    }
                
                    .mobile-menu-open .main-nav-toggle .mnt-icon span:nth-child(2){
                        width: 0%;
                        opacity: 0;
                    }
                
                    .mobile-menu-open .main-nav-toggle .mnt-icon span:nth-child(3){
                        transform: translate(5px,2px) rotate(-45deg);
                    }

    /* Main Content */

    #main-content-wrap {
        display: block;
    }

        #main-content {
            border-left: 0;
            padding: 15px;
        }

            /* Homepage - Alert */

            .alert {
                box-sizing: border-box;
                padding: 15px;
                width: 100%;
            }

            /* Homepage - Random Rumph Item */

            #random-rumph {
                float: none;
                margin: 0 auto 30px;
                max-width: 500px;
            }

            /* Item Page & Rumph Gallery */

            #rumph-item {
                display: block;
            }
        
                #rumph-gallery {
                    margin: 0 auto !important;
                    max-width: 650px;
                    width: 100%;
                }
        
                    #rumph-gallery-container {
                        height: auto;
                        display: block;
                    }

                        #mainpic{
                            display: block;
                            height: 300px;
                        }
        
                        #thumbs {
                            align-items: center;
                            border-top: 4px solid #694E2D;
                            display: flex;
                            height: 104px !important;
                            /* justify-content: center; */
                            margin: 10px 0 0;
                            overflow-x: scroll !important;
                            overflow-y: hidden !important;
                            width: 100% !important;
                        }

                            .thumb-container {
                                border-width: 2px !important;
                                border-color: #694E2D !important;
                                border: 0 !important;
                                /* border-right: 2px solid #694E2D !important; */
                                padding: 4px !important;
                                background: none !important;
                            }


    /* Mobile Menu Open */

    #main-nav {
        left: 0;
        position: absolute;
        top: -5000px;
        transition: top .3s ease-in-out;
        width: 100%;
        z-index: 10;
    }
                
    .mobile-menu-open #main-nav {
        top: 77px;
    }


    /* Mobile Search Open */

    .search-open #mobile-buttons {
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
    }

        .search-open .item-search {
            float: left;
            height: 50px;
            width: 69px;
        }

        .search-open .main-nav-toggle {
            padding: 13px 30px 0;
            float: right;
        }

    .search-open #header form {
        background: #d7c69d;
        box-sizing: border-box;
        display: block;
        padding-left: 104px;
        padding-right: 103px;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
    }

        .search-open #header form svg {
            display: none;
        }

        .search-open #header input[type="text"] {
            padding: 10px 50px 10px 15px;
            height: 71px;
            font-size: 30px;
            position: relative;
            width: 100%;
            z-index: 1;
        }

        .search-open #header input[type="text"] + input[type="submit"] {
            opacity: 0.6;
            right: 118px;
            top: 15px;
            transition: right .3s ease-in-out;
            z-index: 1;
        }
        

    /* Footer */

    #footer > div {
        flex-wrap: wrap;
    }

        #footer div > ul {
            box-sizing: border-box;
            margin-bottom: 40px;
            text-align: center;
            width: 33.33333%;
        }

        #footer ul:nth-child(3):after {
            display: none;
        }

    #footer cite {
        margin-top: -10px;
    }

} /* 900px */



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

    .alert {
        font-size: 12px;
    }

    #footer div > ul {
        width: 50%;
    }

    #footer div > ul:last-child {
        width: 100%;
    }

    #footer ul:after {
        display: none;
    }

} /* 600px */


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

    /* Header */
    
    #header {
        height: 59px;
    }

        #header > a {
            width: 150px;
        }

        #header > a + img {
            width: 30px;
        }

        .item-search {
            padding: 17px 11px 0;
        }

            .item-search svg {
                font-size: 22px;
            }

    .mobile-menu-open #main-nav {
        top: 57px;
    }

        .main-nav-toggle {
            font-size: 10px;
            height: 53px;
            padding: 10px 13px 0;
        }

            .mnt-text {
                margin-bottom: 6px;
            }

    /* Search Open */

    .search-open .item-search {
        float: left;
        height: 37px;
        width: 50px;
    }

    .search-open #header form {
        padding-left: 72px;
        padding-right: 73px;
    }

        .search-open #header input[type="text"] {
            padding: 10px 65px 10px 15px;
            height: 53px;
            font-size: 20px;
        }

        .search-open #header input[type="text"] + input[type="submit"] {
            right: 80px;
            top: 7px;
        }

    .search-open .main-nav-toggle {
        padding: 10px 20px 0;
    }

}