﻿div.used-models { border: 1px solid #ccc; display: inline-block; width: 100%; }
    div.used-models table { width: 100%; padding: 0; margin: 0; border-bottom: 1px solid #ccc; }

        div.used-models table thead tr td,
        div.used-models table thead tr th { font-size: 1.4em; text-align: center; font-weight: 200; border-bottom: 1px solid #ccc; padding-bottom: 10px; }
            div.used-models table thead tr td.object,
            div.used-models table thead tr th.object { font-size: 2.2em; line-height: 1em; padding-right: 20px; text-align: left; }
            div.used-models table thead tr td.name,
            div.used-models table thead tr th.name { padding-right: 20px; padding-left: 10px; text-align: left; }

        div.used-models table tbody tr.single-item { background-color: #f5f5f5; }
            div.used-models table tbody tr.single-item .item-image { border-right: 2px solid #fff; }
                div.used-models table tbody tr.single-item .item-image img { width: 180px; height: auto; display: block; margin: 0 auto; border: 0; }
            div.used-models table tbody tr.single-item .item-name { font-size: 1.2em; font-weight: 700; padding: 10px; }
            div.used-models table tbody tr.single-item .item-year { font-size: 1.2em; font-weight: 700; text-align: center; padding: 0 0 0 10px; width: 10px; }
            div.used-models table tbody tr.single-item .item-price { font-size: 1.4em; font-style: italic; font-weight: 700; text-align: center; width: 240px; text-align: right; padding: 0 10px 0 0; }
            div.used-models table tbody tr.single-item .item-description { padding: 10px; border-top: 1px solid #fff; font-size: 14px; }
            div.used-models table tbody tr.single-item .item-hidden-price { display: none; }

            div.used-models table tbody tr.single-item .item-name a { font-weight: 700; text-decoration: none; color: inherit; }

        div.used-models table tbody tr.separator-item { overflow: hidden; height: 10px; min-height: 10px; }

    div.used-models .used-models-categories { background-color: #789abf; color: #fff; margin: 30px 0 0 0;}
.used-models .used-models-categories .row { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 10px 1%; }
div.used-models .used-models-categories span { white-space: nowrap; font-size: 15px; display: block; text-align: left; width: 24%; box-sizing:border-box; }
div.used-models .no-used-items { margin: 10em 0; text-align: center; }

#buttons { width: auto; display: flex; justify-content: center; align-items: center; gap:10px; margin: 40px 0; }
.btnPreviousPage,
.btnNextPage { padding: 10px 25px; width: 250px; height:58px; box-sizing:border-box; border: 0; background-color: var(--darkBlue); border-radius:5px; color: #fff; font-size: 1.2em; line-height: 2em; font-weight: bold; cursor: pointer; outline-width: 0; -webkit-appearance: none; text-align: center; }

#usedItems .puffs { padding: 0px 5% 25px 5%; }

#model-price #price-from { position: absolute; top: 0; left: 0; z-index: 2; }
#model-price #price-month { position: relative; z-index: 4; }
#model-price #price-month-text { position: relative; z-index: 4; }
#model-price #price-total { position: relative; z-index: 4; display: block; color: #ff3838 !important; }

#model-finance-cost { width: 100%; margin-top: 20px; }
#model-finance-cost-price { width: 100%; height: 40px; line-height: 40px; background-color: #c7d0dc; overflow: hidden; font-weight: bold; }
    #model-finance-cost-price .left { float: left; padding-left: 10px; color: #666; }
    #model-finance-cost-price .right { float: right; padding-right: 10px; color: #444; font-size: 30px; font-style: italic; }

#model-contacts { padding-bottom: 15px; }
.model-contact { border-bottom: 1px solid #ccc; display: inline-block; width: 100%; padding-bottom: 5px; margin-bottom: 15px; }
    .model-contact:last-child { border-bottom: 0; margin-bottom: -5px; }
.model-contact-info { width: 68%; float: left; margin-bottom: 5px; }
.model-contact:last-child .model-contact-info { margin-bottom: 0; }
.model-contact-info h3 { font-weight: bold; font-size: 1.1em; padding: 0 0 0.4em 0; margin: 0 3px; }
.model-contact-info ul { width: 100%; margin: 0 3px; padding: 0; list-style: none; }
    .model-contact-info ul li { display: block; width: 100%; margin-bottom: 5px; line-height: 1.4em; }
        .model-contact-info ul li:last-child { margin-bottom: 0; }
        .model-contact-info ul li span { display: block; width: 100%; }
            .model-contact-info ul li span.left { font-weight: bold; }
.model-contact-image { width: 30%; /*height:230px; line-height:250px;*/ overflow: hidden; text-align: center; /*margin-bottom:10px;*/ float: right; clear: right; margin-bottom: 10px; }
    .model-contact-image img { max-width: 100%; height: auto; display: block; /*position:relative; top:50%; transform:translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);*/ }

.no-used-items p {text-align:center;}

@media screen and (max-width: 1600px) { 
}

@media screen and (max-width: 1000px) {
    div.used-models { }
        div.used-models table tbody tr.single-item .item-image { width: auto; margin: 0; padding: 0; }
            div.used-models table tbody tr.single-item .item-image img { width: 100%; margin: 0 auto; padding: 0; }
        div.used-models table tbody tr.single-item .item-price { display: none; }
        div.used-models table thead tr th.price { display: none; }
        div.used-models table tbody tr.separator-item .price { display: none; }
        div.used-models table tbody tr.single-item .item-hidden-price { display: block; margin-top: 4%; font-size: 1.4em; font-style: italic; font-weight: 700; }

    #model-left { width: 100%; float: left; }
    #model-right { width: 100%; float: left; }
    div.used-models .used-models-categories { font-size: 16px; }

    #model-right .frame { width: 95.5%; padding: 2%; float: left; }

    #model-slideshow-main div ul li a { background-size: 100%; width: 100%; }
    /*#model-slideshow-main, 
    #model-slideshow-main ul            {height:200px;}
    #model-slideshow-main div ul li a   {background-size:100%; width:100%;}
    #model-slideshow-thumbs div ul li   {background-size:100% !important;}*/

    #model-selection .info { display: none; }

    #model-left #model-data-equipment { width: 95.5%; padding: 2%; margin-top: 4%; }
    #model-left #model-data { width: 100%; clear: both; padding: 0; }
        #model-left #model-data ul { width: 100%; float: left; }
    #model-left #model-data-image { display: none; }
    #model-left #model-equipment { width: 100%; }
    #model-left .model-data-tab { width: 40%; margin: -2% 0 2% -2%; padding: 0 0 0 2%; font-size: 1.3em; font-weight: bold; }
    #model-left .model-equipment-tab { width: 60%; margin: -2% -2% 2% 0; padding: 0 0 0 2%; font-size: 1.3em; font-weight: bold; }

    #model-left #model-accessory-packages { width: 100%; }
        #model-left #model-accessory-packages h4 { font-size: 1.1em; line-height: 16px; }
        #model-left #model-accessory-packages ul li { margin: 0 0 2% 0; }
            #model-left #model-accessory-packages ul li .left { width: 68%; padding: 2% 0 2% 2%; }
                #model-left #model-accessory-packages ul li .left p { padding: 1% 0 0 0; }
                #model-left #model-accessory-packages ul li .left img { float: left; width: 16px; height: 16px; border: 0; margin: 0 3px 0 0; }
            #model-left #model-accessory-packages ul li .right { width: 28%; padding: 2% 2% 2% 0; font-size: 1.6em; line-height: 1em; }

    #model-left #model-accessories { margin-bottom: 4%; }
        #model-left #model-accessories ul li .middle { width: 20%; }
        #model-left #model-accessories ul li .right { width: 20%; }

    #model-right h2 { font-size: 2.2em; }
}


@media screen and (max-width: 600px) {
    #buttons { margin: 20px 0; }
    .btnPreviousPage,
    .btnNextPage { padding: 5px 15px; width: auto; height: auto; font-size:1em;}

    div.used-models .used-models-categories {margin:0;}
    div.used-models .used-models-categories span { font-size: 12px; width: 49.5%; margin: 0; white-space:nowrap; text-overflow:ellipsis; overflow :hidden; }
}

@media screen and (max-width: 400px) {
    div.used-models .used-models-categories span { font-size: 10px; }
}
