.scroll_images_wrapper { position: relative; } .scroll_images { width: 100%; height: auto; display: -webkit-box; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; gap: 0 2px; } .scroll_images [data-custom-scroll]::-webkit-scrollbar-track { background: #fff !important; visibility: hidden; } .scroll_images [data-custom-scroll]::-webkit-scrollbar-thumb { background: #fff; border-radius: 0px !important; visibility: hidden; } @media all and (max-width: 767px) { .scroll_images { margin: 2px -16px; width: calc(100% + 32px); padding: 0 2px; } .model_container .col .scroll_images img, .scroll_images img { margin: 0; min-width: 100%; min-height: 100%; height: inherit; width: 100%; min-height: 0; } } @media all and (min-width: 768px) and (max-width: 1024px) { .scroll_images { width: 100%; display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; margin-bottom: 15px; gap: 0; } } .thumb { display: flex; width: 33.333%; margin: 2px 0px 4px 0px; margin-right: 0; overflow: hidden; cursor: pointer; border: 2px solid #fff; transition: border 175ms ease; height: 120px; max-width: 160px; min-width: 160px; } @media all and (min-width: 768px) and (max-width: 1024px) { .thumb { width: 33.333%; height: auto; margin-bottom: 0px; min-width: 0; max-width: unset; } } @media all and (max-width: 767px) { .thumb { width: auto; min-width: 90px; height: 75px; } } .thumb img { object-fit: cover; object-position: center; } .thumb.active { border: 2px solid var(--blue); } .thumb_image { width: 100%; height: auto; } #photo_480 { cursor: pointer; width: 100%; height: auto; } .photo_480 { position: absolute; left: 0px; top: 0px; cursor: pointer; } #photo_480_wrapper { width: 100%; height: auto; position: relative; } @media all and (max-width: 767px) { #photo_480_wrapper { margin: 0 -16px; width: calc(100% + 32px); overflow: hidden; } .photo_480 { max-width: 100% !important; margin: 0 !important; } } #fullscreen { position: fixed; width: 100vw; height: 100vh; display: none; left: 0px; top: 0px; z-index: 1000; flex-direction: column; justify-content: center; align-items: center; } #overlay { opacity: 0.9; background-color: black; width: 100vw; height: 100vh; position: absolute; left: 0px; top: 0px; } #overlay_image { height: auto; z-index: 1001; touch-action:pan-x; } @media screen and (orientation:portrait) { #overlay_image { width: 100%; height: auto; } } @media screen and (orientation:landscape) { #overlay_image { height: 100%; } } #overlay_close { width: 50px; height: 50px; border-radius: 25px; background-color: #1c01a9; position: absolute; top: 25px; right: 25px; z-index: 1002; cursor: pointer; display: flex; justify-content: center; align-items: center; } #overlay_close_icon { width: 25px; height: 25px; background-image: url("/images/icons/close-white.svg"); background-size: contain; } #overlay_left { width: 50px; height: 100px; background-color: #1c01a9; z-index: 1001; position: absolute; left: 0px; display: none; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; } #overlay_left_icon { background-image: url("/images/icons/slider_arrow.svg"); width: 25px; height: 16px; transform: rotate(180deg); } #overlay_right { width: 50px; height: 100px; background-color: #1c01a9; z-index: 1001; position: absolute; right: 0px; display: none; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; } #overlay_right_icon { background-image: url("/images/icons/slider_arrow.svg"); width: 25px; height: 16px; } #pdf_download { display: flex; flex-direction: row; width: 100%; align-items: center; justify-content: flex-start; cursor: pointer; margin-top: 30px; } @media all and (max-width: 768px) { .model_desc { position: relative; } #pdf_download { /*position: absolute;*/ top: 0px; right: 0px; width: min-content; margin: 15px 0; } } @media all and (min-width: 768px) and (max-width: 1280px) { #pdf_download { margin-bottom: 30px; } } #pdf_download p { width: 60%; margin: 0px; padding: 0px; line-height: 16px; margin-left: 10px; color: #a8026b; text-decoration: underline; } #pdf_icon { background-image: url("/images/icons/icon-pdf.svg"); width: 56px; height: 56px; } .used_item_tags { display: flow-root; margin-bottom: 10px; margin-top: 10px; } .used_item_tag { font-size: 10px; color: white; width: fit-content; margin-right: 4px; margin-bottom: 4px; padding-left: 5px; padding-right: 5px; float: left; } .used_item_special_offer { background-color: #a8026b; } .used_item_reserve { background-color: #000; } .used_item_discount { background-color: #04a8a4; } .used_item_leasing { background-color: #1c01a9; } .used_item_accident { background-color: #9e9e9e; } .scroll_images_button { width: 36px; height: 36px; border-radius: 25px; background-color: #1c01a9; position: absolute; display: block; top: 50%; margin-top: -9px; transform: translateY(-18px); bottom: 0; cursor: pointer; } @media all and (min-width: 768px) and (max-width: 1024px) { .scroll_images_button { display: none; } } @media all and (max-width: 1024px) { .scroll_images_button_left { display: none !important; } .scroll_images_button_right { display: none !important; } } .scroll_images_button_left { left: 0px; background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27 16H5' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 7L5 16L14 25' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: 19px; background-position: center; border-radius: 0px; display: none; } .scroll_images_button_right { right:0px; background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 16H27' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 7L27 16L18 25' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: 19px; background-position: center; border-radius: 0px; } .car_container_used { margin-top: 30px!important; }