@media screen and (min-width: 1921px) {
    body {
        font-size: 30px;
    }
    
    h2 {
        padding: 15px 20px;
    }
    
    h3,h4 {
        margin: 30px 0 50px;
    }
    
    input[type='text'],
    select {
        height: 50px;
    }
    
    input[type='radio'] {
        height: 24px;
        width: 24px;
    }
    
    input[type='checkbox'] {
        height: 24px;
        width: 24px;
        margin-right: 5px;
    }
    
    #content {
        margin-top: 90px;
    }
    
    .btn {
        height: 55px;
        border-width: 4px;
        padding: 4px 12px;
    }
    
    .form-group {
        margin-bottom: 50px;
    }
    
    .form-group textarea {
        margin-bottom: 50px;
    }
    
    .btn-group {
        height: 58px;
    }
    
    .btn-group .btn {
        font-size: 1em;
    }
    
    .btn-group-icon {
        margin-right: 10px;
    }
    
    #login-box {
        padding: 50px;
    }
    
    #main-nav li a {
        padding: 0 10px 0;
    }
    
    .cat-icon {
        margin-right: 12px;
    }

    .form-group input[type='text'],
    .form-group input[type='file'],
    .form-group input[type='password'],
    .form-group input[type='email'],
    .form-group select,
    .form-group textarea {
        padding: 2px 10px 5px;
    }
    
    #display-items-box h2 {
        margin-bottom: 50px;
    }
    
    #display-items-box .cat-desc {
        margin-top: -50px;
    }
    
    .item {
        margin-bottom: 50px;
        padding: 30px 50px 0;
    }
    
    .item-title {
        padding-bottom: 30px;
    }
    
    .item-btn {
        margin-right: 50px;
    }
    
    .item-contact {
        padding: 30px 0;
    }
    
    .item-contact .contact-btn {
/*        margin-bottom: 30px;*/
    }

    #add-item-modal .modal-interior hr,
    .edit-item-modal .modal-interior hr {
        margin-bottom: 40px;
    }

    #customize-container label {
        margin: 20px 0 22px;
    }
    
    .sticky-btn-bar {
        height: 95px;
    }

    #customize-container .form-group input[type='color'] {
        width: 80px;
        height: 50px;
        margin: 16px 25px 30px 0;
    }

    #customize-container .radio-label {
        margin: -3px 10px 15px;
    }
    
    .modal-interior {
        padding: 0 50px 50px;
    }

    #del-uncat-modal .modal-interior,
    #del-cat-modal .modal-interior,
    .sold-item-modal .modal-interior,
    .del-item-modal .modal-interior,
    .undo-item-modal .modal-interior,
    #del-status-modal .modal-interior,
    #sold-status-modal .modal-interior,
    #create-link-modal .modal-interior,
    #del-user-modal .modal-interior {
        max-width: 40%;
    }
    
    #basket img {
        height: 80px;
    }
}

@media screen and (max-width: 1279px) {
    body {
        font-size: 18px;
    }
    
    label {
        font-size: 1em;
    }
    
    h1,h2 {
        margin-bottom: 15px;
    }
    
    a.btn {
        padding: 3px 9px 5px;
    }
    
    #main-nav {
        margin-top: -20px;
    }
    
    #content {
/*        margin-top: 35px;*/
    }
    
    #left-nav {
        top: 25px;
        width: 26%;
    }
    
    #cat-menu {
        padding: 15px;
        width: 26%;
    }
    
    #display {
        width: 67%;
        padding-left: 20px;
    }
    
    #display-items-box h2 {
        margin-bottom: 30px;
    }
    
    #display-items-box .cat-desc {
        margin-top: -30px;
    }
    
    .item-btn {
        margin-right: 10px;
    }

    #add-item-modal .modal-interior,
    .edit-item-modal .modal-interior {
        padding: 0 40px 0;
    }
    
    .sticky-btn-bar {
        margin-left: -40px;
        width: calc(100% + 80px);
    }
    
    .img-left-pane {
        padding-left: 0;
    }
    
    .img-left-pane img {
        margin: 0;
        width: 50%;
    }

    #customize-container .radio-label {
        margin: 1px 10px 5px;
    }
}

@media screen and (max-width: 1023px) {
    
    body {
        font-size: 16px;
    }
    
    #logo-box {
        width: 40%;
    }
    
    #left-nav {
        width: 27%;
    }
    
    #cat-menu {
        padding: 10px;
        width: 27%;
    }
    
    #display {
        padding-left: 0;
        width: 65%;
    }
    
    #item-desc p {
        padding-left: 0;
        padding-right: 0;
    }
    
    .img-left-pane {
        padding: 7px 0;
    }
    
    .img-left-pane img {
        width: 95%;
    }
    
    #page-container {
        width: 80%;
    }
    
    #contact-container {
        width: 100%;
    }
    
    .contact-modal .modal-interior {
        width: 80%;
    }
    
    .item-contact {
        padding: 10px 0;
    }
    
    .item-contact .contact-btn {
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 767px) {
    
    #topbar {
        height: 70px;
        position: fixed;
        top: 0;
        left: 0;
        padding: 0;
        z-index: 1;
    }
    
    #menu-toggle-btn {
        display: block;
    }
    
    #logo-box {
        width: 50%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #logo-img {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
    
    #main-nav {
    }
    
    #cat-menu {
        display: none;
    }
    
    #left-nav {
        display: none !important;
    }
    
    #topbar-mobile,
    #cat-menu-mobile {
        display: block;
    }
    
    h1,h2 {
        margin-bottom: 10px;
    }
    
    #content {
        top: 0;
        width: 90%;
    }
    
    #display {
        top: 60px;
        width: 100%;
    }
    
    #display-items-box {
        padding-left: 0;
    }
    
    .img-left-pane {
        width: 29%;
    }
    
    .img-left-pane img,
    .thumb-border {
        border-width: 5px !important;
    }
    
    .img-right-pane {
        width: 62%;
        padding-left: 20px;
        padding-right: 0;
    }
    
    #page-container {
        width: 100%;
        padding: 10px 20px;
    }
}