"Card view of offer"
Bootstrap 4.0.0 Snippet by rickclickbizz

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="short-info col-sm-12 notouch"> <div class="auction-block col-sm-12"> <a class="auction" href="/hotels/hotels-aan-zee/carlton_beach.html"> <div class="elements-wrapper"> <span class="auction-image-wrapper"> <img class="auction-image" src="https://cdn2.vakantieveilingen.nl/images/products/857/99857/300/200/picture_113.jpg" alt="Overnachten aan de boulevard van Scheveningen"> </span> <span class="auction-content"> <h2 class="auction-title">Overnachten aan de boulevard van Scheveningen</h2> </span> <span class="auction-time-bid"> <span class="auction-bid col-40"> <span>€ </span><span>53</span></span> <span class="col-60 auction-time"> <span class="timer jsDisplayedTimeValue"> <span class="time-value">00 <span class="time-title">:</span> </span> <span class="time-value">03 <span class="time-title">:</span> </span> <span class="time-value">52</span> </span> <span class="hidden">2018-02-25T23:38:00+01:00</span> <span class="auction24635587 lotId hidden">24635587</span> <span class="auction24635587 method hidden">SECOND_AUCTION</span> </span> <span class="btn btn-orange btn-outline-orange">Bekijk nu</span> </span> </div> </a> </div> </div> </div> </div>
.btn { height: 44px; line-height: 44px; font-size: 15px; color: #fff; background-color: #5a96ff; font-weight: 400; display: block; text-align: center; cursor: pointer; position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; outline: 0; -webkit-box-sizing: border-box; box-sizing: border-box } .btn.btn-radius { border-radius: 3px } .wrapper-btn { margin-top: 24px } .btn-iphone { background-color: #33485f } .btn-android { background-color: #475868 } .btn-android:before, .btn-iphone:before { content: ''; display: inline-block; height: 21px; position: absolute; top: 12px } .btn-android:after, .btn-iphone:after { content: ''; display: inline-block; border-right: 1px solid #fff; height: 44px; position: absolute; left: 44px; top: 0 } .btn-android span, .btn-iphone span { font-size: .856em; text-transform: none; display: block } .btn.btn-outline-orange { color: #fd7945; background: 0 0; border: 1px solid #fd7945 } .btn .btn-iphone .images-right, .btn-iphone .btn .images-right, .btn-iphone .images, .btn-iphone .npf-container .npf-steps ul li:after, .npf-container .npf-steps ul .btn-iphone li:after { position: absolute; top: 10px; left: 12px } .btn .btn-android .images-right, .btn-android .btn .images-right, .btn-android .images, .btn-android .npf-container .npf-steps ul li:after, .npf-container .npf-steps ul .btn-android li:after { position: absolute; top: .7em; left: .83em } .notouch .btn-orange:hover { background-color: #ff6100; border-top: 1px solid #e9440e; } .feedback-btn { position: fixed; right: 0; height: 100px; width: 30px; bottom: 100px; z-index: 1000; cursor: pointer } .loader_infinity-scroll { background-color: #fff; background-size: 25px; height: 25px } .notouch .btn:hover { background-color: #4489ff; border-top: 1px solid #306ffe; color: #fff } .notouch .btn.btn-yellow:hover { background-color: #fbae30; border-top: 1px solid #f4a729 } .notouch .btn-orange:hover { background-color: #ff6100; border-top: 1px solid #e9440e } .notouch .btn-outline-orange:hover { border-top-width: 2px } .notouch .btn-darkblue:hover { background-color: #3b74f6; border-top: 1px solid #2d66e8 } .notouch .btn-outline:hover { border-top: 2px solid #417afc; color: #417afc; background-color: #fff } .notouch .searchbar .btn:hover { background-color: #14ceb7; border-top: 1px solid #1bbcad } .notouch .btn-close { cursor: pointer } .col-10, .col-15, .col-20, .col-25, .col-30, .col-33, .col-35, .col-40, .col-45, .col-5, .col-50, .col-55, .col-60, .col-65, .col-67, .col-70, .col-75, .col-80, .col-85, .col-90, .col-95, .fieldset, .phone .login-wrapper.expand-login-form .login-form .btn-login-submit, .phone .login-wrapper.expand-login-form .login-form .checkbox-group { display: inline-block; vertical-align: top } .col-5 { width: 5% } .col-10 { width: 10% } .col-15 { width: 15% } .col-20 { width: 20% } .col-25 { width: 25% } .col-30 { width: 30% } .col-33 { width: 33.3% } .col-35 { width: 35% } .col-40 { width: 100% } .col-45 { width: 45% } .col-50, .phone .login-wrapper.expand-login-form .login-form .btn-login-submit, .phone .login-wrapper.expand-login-form .login-form .checkbox-group { width: 50% } .col-55 { width: 55% } .col-60 { width: 100% } .col-65 { width: 65% } .col-67 { width: 66.67% } .col-70 { width: 70% } .col-75 { width: 75% } .col-80 { width: 80% } .col-85 { width: 85% } .col-90 { width: 90% } .col-95 { width: 95% } .desktop .split-50, .tablet .split-50 { vertical-align: top; width: 50%; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box } .desktop .split-50.border, .tablet .split-50.border { border-right: 1px solid #c4cfd4; border-bottom: none } .desktop .split-wrap, .tablet .split-wrap { width: 90%; max-width: 275px } .accordion-description { position: relative } .accordion-description .checklist ul { margin: .75em 0; padding: 0 1em; list-style: none } .accordion-description .checklist ul:last-child { margin-bottom: 1.9em } .accordion-description .checklist ul li { list-style-type: none; padding-left: .9em } .display-msg-container { z-index: 5; margin: 10px 0; position: relative; -webkit-transition: all .5s ease-out; transition: all .5s ease-out; max-height: 400px; height: auto } .display-msg-container.slide-up { max-height: 0; overflow: hidden } .display-msg-container.no-space { margin: 0!important } .display-msg-container .btn-close { position: absolute; right: 0; top: 0; height: 44px; width: 44px; z-index: 1; vertical-align: middle } .display-msg-container .btn-close .i-close-circle { position: absolute; -webkit-transform: scale(.8); -ms-transform: scale(.8); transform: scale(.8); right: 5px; top: 5px } .display-msg-container .display-msg { background-color: #14ceb7; color: #fff; font-size: 16px; position: relative; border-radius: 10px; padding: 5px 10px } .display-msg-container .display-msg .msg-header { text-align: center; font-size: 18px; font-weight: 700; padding: 15px; color: #fff } .btn .display-msg-container .display-msg .msg-header .images-right, .display-msg-container .display-msg .msg-header .btn .images-right, .display-msg-container .display-msg .msg-header .images, .display-msg-container .display-msg .msg-header .npf-container .npf-steps ul li:after, .npf-container .npf-steps ul .display-msg-container .display-msg .msg-header li:after { vertical-align: middle; margin-right: 15px } .display-msg-container .display-msg .msg-text { padding: 15px; text-align: center; width: 97% } .display-msg-container .display-msg.invalid { color: #fff } .display-msg-container .display-msg.error { background-color: #fa7e9c; color: #fff } .display-msg-container .display-msg.error .link { color: #fff; text-decoration: underline } .display-msg-container .display-msg.explanation { padding: 5px; background-color: #ffb234; color: #283e51 } .display-msg-container .display-msg.explanation .msg-header { background-color: #ffb234 } .display-msg-container .display-msg.explanation .msg-text { background-color: #fff; font-size: 15px; border-radius: 10px; text-align: left; width: 100% } .display-msg-container .display-msg.explanation .msg-text .check-item { width: 100%; display: inline-block } .display-msg-container .display-msg .welcome-message { text-align: left } .display-msg-container .display-msg .welcome-message .i-user { position: relative; padding-right: 1em; vertical-align: top } .display-msg-container .display-msg .welcome-message .welcome-message-title { font-size: 17px; font-weight: 700; line-height: 110%; display: inline-block; overflow: hidden; max-width: 200px; text-overflow: ellipsis } .display-msg-container .display-msg .welcome-message .welcome-message-text { margin-bottom: 0; font-size: 15px; margin-left: 36px; margin-top: 5px } .desktop .display-msg.explanation .msg-text, .tablet .display-msg.explanation .msg-text { text-align: center } .desktop .display-msg.explanation .msg-text .check-item, .tablet .display-msg.explanation .msg-text .check-item { width: auto } .desktop .display-msg-container .btn-close .i-close-circle, .tablet .display-msg-container .btn-close .i-close-circle { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); right: 16px; top: 16px } .desktop .display-msg-container .display-msg .welcome-message, .tablet .display-msg-container .display-msg .welcome-message { text-align: center } .desktop .display-msg-container .display-msg .welcome-message .i-user, .tablet .display-msg-container .display-msg .welcome-message .i-user { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2) } .desktop .display-msg-container .display-msg .welcome-message .welcome-msg-block, .tablet .display-msg-container .display-msg .welcome-message .welcome-msg-block { display: inline-block; text-align: left } .desktop .display-msg-container .display-msg .welcome-message .welcome-message-title, .tablet .display-msg-container .display-msg .welcome-message .welcome-message-title { font-size: 21px; max-width: 500px } .desktop .display-msg-container .display-msg .welcome-message .welcome-message-text, .tablet .display-msg-container .display-msg .welcome-message .welcome-message-text { font-size: 17px; margin-left: 0 } .tablet .display-msg-container .display-msg .welcome-message .welcome-message-text { max-width: 450px } .display-msg-container+.category-image-holder { position: relative; top: 0 } .split-30.border { border-bottom: 0 } .desktop .split-30 { vertical-align: top; width: 30%; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: none } .tablet .split-30 { vertical-align: top; width: 45%; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box } .desktop .split-30.border, .tablet .split-30.border { border-left: 1px solid #c4cfd4; border-bottom: none } .desktop .split-30.split-wrap, .tablet .split-30.split-wrap { width: 90%; max-width: none } .opening-hours { white-space: nowrap } .large-column, .small-column, .xtra-large-column, .xtra-small-column { display: inline-block; vertical-align: top; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 10px } .tablet .small-column { width: 40% } .tablet .xtra-small-column { width: 35%; padding: 0 10px } .tablet .large-column { width: 60% } .tablet .xtra-large-column { width: 65%; padding: 0 } .desktop .small-column { width: 35% } .desktop .xtra-small-column { width: 25%; padding: 0 10px } .desktop .large-column { width: 65% } .desktop .xtra-large-column { width: 75%; padding: 0 } .fake-h1, h1 { font-size: 19px; font-weight: lighter; line-height: 110%; margin-bottom: .8em } .tablet .fake-h1, .tablet h1 { font-size: 20px } .desktop .fake-h1, .desktop h1 { font-size: 21px } .fake-h2, h2 { font-size: 16px; font-weight: 400; color: #283e51 } .fake-h2 { font-weight: lighter } .tablet .fake-h2, .tablet h2 { font-size: 18px } .desktop .fake-h2, .desktop h2 { font-size: 19px } h3 { font-size: 16px; font-weight: 700 } .desktop h3, .tablet h3 { font-size: 17px } h4 { font-size: 15px; font-weight: 700 } .small, small { font-size: 12px } .auction-time { position: relative } .auction-time .timer { font-weight: 700; font-family: Arial, sans-serif; position: absolute; left: 0; right: 0 } .time-value { padding: 0 1px } .time-title { padding-left: 2px } .link-row { border-top: 1px solid #c4cfd4; color: #506a70; height: 44px; line-height: 44px; display: block; position: relative } .link-row.active { font-weight: 700 } .link-row:first-child { border-top: 0 } .link-row:last-child { border-bottom: 1px solid #c4cfd4 } .btn .link-row .images-right, .link-row .btn .images-right, .link-row .images, .link-row .npf-container .npf-steps ul li:after, .npf-container .npf-steps ul .link-row li:after { margin-right: 10px } .link-row .i-arrow-gray-r { position: absolute; right: 2%; top: 15px } .link-row-text { display: inline-block; vertical-align: top; text-overflow: ellipsis; overflow: hidden; width: 60%; white-space: nowrap; padding-right: 5px; -webkit-box-sizing: border-box; box-sizing: border-box } .notouch .link-row:hover { color: #417afc } .bread-crumb { height: 40px; line-height: 40px; width: 100%; background-color: rgba(255, 255, 255, .8); position: relative; font-size: 14px } .bread-crumb+.display-msg { margin-top: 44px } .bread-crumb .btn .images-right, .bread-crumb .images, .bread-crumb .npf-container .npf-steps ul li:after, .btn .bread-crumb .images-right, .npf-container .npf-steps ul .bread-crumb li:after { margin-right: 5px; display: inline-block; vertical-align: middle } .btn .desktop .bread-crumb .images-right, .btn .tablet .bread-crumb .images-right, .desktop .bread-crumb .btn .images-right, .desktop .bread-crumb .images, .desktop .bread-crumb .npf-container .npf-steps ul li:after, .npf-container .npf-steps ul .desktop .bread-crumb li:after, .npf-container .npf-steps ul .tablet .bread-crumb li:after, .tablet .bread-crumb .btn .images-right, .tablet .bread-crumb .images, .tablet .bread-crumb .npf-container .npf-steps ul li:after { margin-left: 10px } .bread-crumb .title, .bread-crumb-title { font-size: .9em; line-height: 32px } .bread-crumb-title { color: #849ba6 } .legacy-browser-placeholder-container { position: absolute; width: 100%; height: 30px; top: 8px; line-height: 30px; text-indent: 10px; color: #283e51 } .searchbar .legacy-browser-placeholder-container { top: 26px; left: -60% } .legacy-browser-placeholder::before { content: ' '; position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-indent: 1em; color: #283e51; padding: 13px auto auto 1em } .accordion { color: #506a70; min-height: 20px; border-bottom: 1px solid #c4cfd4; display: block; position: relative; padding: 10px 10% 10px 2%; font-size: 15px } .accordion.border { border-top: 1px solid #c4cfd4 } .toogle-main.active { border-bottom: 1px solid #c4cfd4 } .active .accordion, .notouch .active .accordion:hover { border-bottom: 1px solid transparent } .notouch .accordion:hover { border-bottom: 1px solid #417afc; color: #417afc; cursor: pointer } .accordion .i-arrow-gray { -webkit-transition: -webkit-transform .2s linear; transition: -webkit-transform .2s linear; transition: transform .2s linear; transition: transform .2s linear, -webkit-transform .2s linear; position: absolute; right: 5%; top: 17px } .active .accordion .i-arrow-gray { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) } .active.toogle-main.sub-items { border-bottom: 0 solid #c4cfd4 } .accordion-description .history-accordion { margin: 0 auto; position: relative } .accordion-description .loader { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1 } .active .accordion-description { padding-top: 1em; margin: 0 auto } .active.toogle-main.sub-items .accordion-description { margin: 0; padding: 0 3% } .nav { font-size: 0; z-index: 10 } .nav .menu-container { z-index: 1000; overflow: hidden } .nav .dropdown-column { font-size: 14px; width: 18%; max-width: 233px; display: inline-block; vertical-align: top; padding: 0 1% } .desktop .nav .sub-items, .tablet .nav .sub-items { width: 18%; padding: 0 1% } .btn .nav .sub-items .images-right, .nav .sub-items .btn .images-right, .nav .sub-items .images, .nav .sub-items .npf-container .npf-steps ul li:after, .npf-container .npf-steps ul .nav .sub-items li:after { position: relative; left: 10px; top: 2px } .desktop .nav, .tablet .nav { white-space: nowrap; position: relative; border-bottom: 1px solid #edf4ff; height: 98px } .accordion-description .link-row { text-decoration: none; margin-bottom: 0 } .opened .accordion-description .link-row { border: 0 } .nav-items .link-row .i-arrow-gray-r { -webkit-transform: none; -ms-transform: none; transform: none } .btn .nav-items .link-row .images-right:first-child, .nav-items .link-row .btn .images-right:first-child, .nav-items .link-row .images:first-child, .nav-items .link-row .npf-container .npf-steps ul li:first-child:after, .npf-container .npf-steps ul .nav-items .link-row li:first-child:after { margin: 4px 14px 0 5px } .nav-items .link-row.hasNotification { height: auto; line-height: 20px } .btn .nav-items .link-row.hasNotification .images-right:first-child, .nav-items .link-row.hasNotification .btn .images-right:first-child, .nav-items .link-row.hasNotification .images:first-child, .nav-items .link-row.hasNotification .npf-container .npf-steps ul li:first-child:after, .npf-container .npf-steps ul .nav-items .link-row.hasNotification li:first-child:after { margin-top: 0 } .nav-items .link-row.hasNotification .badge { width: 12px; height: 12px; bottom: 0; right: 0 } .notification { display: block; color: #ff6100; font-family: Helvetica; font-size: 13px; margin: 0; padding: 0 } .link-cat { display: inline-block; height: 106px; text-transform: uppercase; text-align: center; font-size: 10px; line-height: 12px; border: 1px solid #edf4ff; border-top: 0; margin-left: -1px; width: 33.333%; background-color: #fff } .desktop .link-cat, .tablet .link-cat { width: 102px; height: 95px; vertical-align: top; border-bottom: 0 } .link-cat.active, .notouch .link-cat:hover { border-bottom: 3px solid #417afc; color: #417afc } .btn .desktop .i-cat.images-right, .btn .tablet .i-cat.images-right, .desktop .btn .i-cat.images-right, .desktop .images.i-cat, .desktop .npf-container .npf-steps ul li.i-cat:after, .npf-container .npf-steps ul .desktop li.i-cat:after, .npf-container .npf-steps ul .tablet li.i-cat:after, .tablet .btn .i-cat.images-right, .tablet .images.i-cat, .tablet .npf-container .npf-steps ul li.i-cat:after { -webkit-transform: scale(.65, .65); -ms-transform: scale(.65, .65); transform: scale(.65, .65) } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .navigation-dropdown { position: absolute; width: 100%; background-color: #fff; z-index: 50; padding: 20px 0; opacity: 1; -webkit-transition: -webkit-transform 750ms ease; transition: -webkit-transform 750ms ease; transition: transform 750ms ease; transition: transform 750ms ease, -webkit-transform 750ms ease } .navigation-dropdown.active { -webkit-transform: none!important; -ms-transform: none!important; transform: none!important; opacity: 1 } .dropdown-footer { position: absolute; bottom: 0; font-size: 14px; width: 100%; height: 40px; line-height: 40px; padding: 0 10px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; border: 0 } .active .dropdown-footer { border-width: 1px 0 2px; border-color: #eaf5f9 transparent #5a96ff; border-style: solid } .dropdown-row { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; height: 35px; line-height: 35px } .notouch .dropdown-row:hover { color: #417afc; text-decoration: underline } .category-title { font-weight: 700; margin-top: 10px; margin-bottom: -5px } .category-title:first-child { margin-top: 0 } .slide-container { display: inline-block; width: calc(100% - 50px); -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease } .slide-container.slide-right { -webkit-transform: translateX(-300px); -ms-transform: translateX(-300px); transform: translateX(-300px) } .slide-button { display: inline-block; width: 50px; height: 95px; line-height: 97px; vertical-align: top; border-left: 1px solid #eaf5f9; cursor: pointer; z-index: 1; position: relative; background-color: #fff; border-right: 1px solid #eaf5f9 } .category-upper .category-selection.active1 .selection-btn:nth-child(1) .nav .i-arrow-white, .category-upper .category-selection.active2 .selection-btn:nth-child(2) .nav .i-arrow-white, .category-upper .category-selection.active3 .selection-btn:nth-child(3) .nav .i-arrow-white, .nav .category-upper .category-selection.active1 .selection-btn:nth-child(1) .i-arrow-white, .nav .category-upper .category-selection.active2 .selection-btn:nth-child(2) .i-arrow-white, .nav .category-upper .category-selection.active3 .selection-btn:nth-child(3) .i-arrow-white, .nav .i-arrow-blue, .nav .notouch .accordion:hover .i-arrow-gray, .nav .notouch .filter-title:hover .i-arrow-gray, .notouch .accordion:hover .nav .i-arrow-gray, .notouch .filter-title:hover .nav .i-arrow-gray { -webkit-transform: rotate(-90deg) scale(2, 2); -ms-transform: rotate(-90deg) scale(2, 2); transform: rotate(-90deg) scale(2, 2); position: absolute; top: 47%; left: 40%; -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease } .category-upper .category-selection.active1 .selection-btn:nth-child(1) .nav .slide-button.rotate .i-arrow-white, .category-upper .category-selection.active2 .selection-btn:nth-child(2) .nav .slide-button.rotate .i-arrow-white, .category-upper .category-selection.active3 .selection-btn:nth-child(3) .nav .slide-button.rotate .i-arrow-white, .nav .slide-button.rotate .category-upper .category-selection.active1 .selection-btn:nth-child(1) .i-arrow-white, .nav .slide-button.rotate .category-upper .category-selection.active2 .selection-btn:nth-child(2) .i-arrow-white, .nav .slide-button.rotate .category-upper .category-selection.active3 .selection-btn:nth-child(3) .i-arrow-white, .nav .slide-button.rotate .i-arrow-blue, .nav .slide-button.rotate .notouch .accordion:hover .i-arrow-gray, .nav .slide-button.rotate .notouch .filter-title:hover .i-arrow-gray, .notouch .accordion:hover .nav .slide-button.rotate .i-arrow-gray, .notouch .filter-title:hover .nav .slide-button.rotate .i-arrow-gray { -webkit-transform: rotate(90deg) scale(2, 2); -ms-transform: rotate(90deg) scale(2, 2); transform: rotate(90deg) scale(2, 2) } .nav .i-cat { position: relative; top: 25% } .nav .i-cat.i-cat76 { top: 33% } .nav .i-cat.i-cat752 { top: 38% } .nav .menu-top { height: 75px } .dropDownContainer.wrapper, .notification-msg .notification-content .dropDownContainer.content-wrapper { z-index: 1; position: relative } .label { position: absolute; z-index: 1; top: 40px; height: 30px; line-height: 30px; left: 2.9948% } .desktop .label { left: 3.125% } .label-text { background: rgba(51, 72, 93, .5); padding: 0 10px; text-transform: uppercase } .btn .label .images-right, .label .btn .images-right, .label .images, .label .npf-container .npf-steps ul li:after, .npf-container .npf-steps ul .label li:after { margin-right: 3px } .label .small { display: inline-block; margin: 0; font-size: 13px } .alert, .error { color: #fa7e9c } .rotateLeft { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg) } .rotateRight { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg) } .arrow-top-center { position: absolute; top: -9px; left: 50%; width: 0; height: 0; border-style: solid; border-width: 0 9px 9px; border-color: transparent transparent #edf4ff } .arrow-bottom-left { position: absolute; bottom: -9px; left: 5%; width: 0; height: 0; border-style: solid; border-width: 9px 9px 0; border-color: #edf4ff transparent transparent } .disabled-image { -webkit-filter: grayscale(1); filter: grayscale(1); opacity: .5 } .favorite-toggle { position: absolute; right: 10px; top: 10px; z-index: 2 } .desktop .favorite-toggle, .tablet .favorite-toggle { cursor: pointer; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out } .notification-msg { position: fixed; bottom: 0; padding: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; font-size: 1.4em; text-align: center; z-index: 9999 } .notification-msg .notification-content { width: 100%; background-color: #fff; border-radius: 5px } .notification-msg .notification-content .content-wrapper { height: 0; opacity: 0; padding: 0; -webkit-transition: height .3s ease, padding .3s linear, opacity .2s; transition: height .3s ease, padding .3s linear, opacity .2s } .notification-msg .notification-title { cursor: pointer; padding-top: 5px; padding-bottom: 5px } .notification-msg .notification-title .show-more { float: right; margin-top: 8px } .btn .notification-msg .notification-title .i-arrow-gray.images-right, .notification-msg .notification-title .btn .i-arrow-gray.images-right, .notification-msg .notification-title .images.i-arrow-gray, .notification-msg .notification-title .npf-container .npf-steps ul li.i-arrow-gray:after, .npf-container .npf-steps ul .notification-msg .notification-title li.i-arrow-gray:after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: .2s; transition: .2s } .btn .notification-msg.active .i-arrow-gray.images-right, .notification-msg.active .btn .i-arrow-gray.images-right, .notification-msg.active .images.i-arrow-gray, .notification-msg.active .npf-container .npf-steps ul li.i-arrow-gray:after, .npf-container .npf-steps ul .notification-msg.active li.i-arrow-gray:after { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0) } .notification-msg.active .notification-content .content-wrapper { height: 100%; opacity: 1; padding-top: 10px; padding-bottom: 10px; min-width: 310px } .notification-msg.offline, .notification-msg.red { background: #ff002d } .notification-msg.offline .notification-title, .notification-msg.red .notification-title { color: #fff } .notification-msg.orange:before, .notification-msg.slow_conn:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #fbee9e; opacity: .95 } .notification-msg.offline .notification-title .i-arrow-gray { display: none } .notification-msg.unsupported-browser-message .content-wrapper { font-size: .8em } .staleMessage { display: none; width: 100%; background: #ffb234 } .staleMessage.show { position: fixed; display: block; top: 0; padding: 1em; -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; font-size: 1.4em; text-align: center; z-index: 9999 } .recent-viewed .fake-h1 { margin-bottom: 1em; padding: 1em 10px 0 } .desktop .related-lots .auction-block:nth-child(4), .tablet .recent-viewed .auction-block:nth-child(4), .tablet .related-lots .list-auctions.short-info .auction-block:nth-child(4), .tablet .top-5 .auction-block:nth-child(3) { display: none } .desktop .recent-viewed .list-auctions.short-info .auction-block { width: 25% } .tablet .recent-viewed .list-auctions.short-info .auction-block { width: 33.333% } .tablet .related-lots .list-auctions .auction-block { width: 50% } .desktop .related-lots .list-auctions .auction-block { width: 33.333% } .desktop .related-lots .list-auctions.short-info .auction-block { width: 25% } .tablet .related-lots .list-auctions.short-info .auction-block { width: 33.333% } .desktop .related-lots .list-auctions.short-info .auction-block:nth-child(4) { display: inline-block } .phone .offline-related-lots .related-lots .auction-block:nth-child(4) { display: none } .auction-block .auction { display: block; border: 1px solid #cfd8dc; margin-bottom: 14px; position: relative; background-color: #fff } .desktop .auction-block .auction { margin-bottom: 20px } .auction-block .auction-content { padding: 3% 3% 0; -webkit-box-sizing: border-box; box-sizing: border-box } .auction-block .auction-content, .auction-block .auction-time-bid { width: 64%; display: inline-block; vertical-align: top } .auction-block .auction-image { min-height: 100px; width: 100%; height: auto; color: #fff; display: block; background-color: #ececec } .desktop .extra-info .auction-image, .tablet .extra-info .auction-image { min-height: 147px } .auction-block .auction-image.loader { background-size: 25px } .auction-block .auction-title { display: block; font-size: inherit; line-height: 16px; color: #283e51; height: 50px; overflow: hidden; margin-bottom: 0 } .auction-block .auction-time-bid { position: absolute; bottom: 4px; right: 0; padding: 0 3%; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: left } .auction-block .auction-time .timer { color: #33485f; text-align: center; display: block } .auction-block .auction-bid { color: #607d8c; font-weight: 700; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: Arial, sans-serif } .auction-block .i-arrow-gray-r { position: absolute; top: 5px; right: 6px; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0) } .auction-block .btn-orange { margin: 15px 15px 0; width: auto } .auction-action.my-action .btn-orange { display: block; margin: 0; float: right } .auction-action.my-action.right .btn-orange { float: none } .auction-block .auction-image-wrapper { display: inline-block; vertical-align: top; position: relative; width: 100% } .auction-block .auction-short-description { color: #33485f } .auction-block .stars { line-height: 140% } .short-info .auction-block { max-width: inherit; min-width: 225px; font-size: 15px } .short-info .elements-wrapper { background-color: #fff } .short-info .auction .auction-image-wrapper, .short-info .auction-content, .short-info .auction-time-bid { width: 100% } .short-info .auction-image { max-width: inherit } .short-info .auction-content { margin: -2em auto 0; background-color: #fff; width: 90%; position: relative; display: table; padding: 1em 1em .6em } .short-info .auction-block .auction-title { max-width: 288px; margin: 0 auto .5em } .short-info .auction-time-bid { position: static; width: 88%; margin: 0 auto; display: table; padding: 0 15px 1.2em; text-align: center; font-size: 1.15em } .extra-info .auction-bid, .short-info .auction-bid { text-align: center; border-right: 1px solid #d3d7d8; -webkit-box-sizing: border-box; box-sizing: border-box } .short-info .btn-orange { margin: 15px auto 0; display: block; max-width: 288px; height: 37px; line-height: 37px } .extra-info .i-arrow-gray-r, .extra-info .stars, .short-info .i-arrow-gray-r, .short-info .stars { display: none } .extra-info .auction-content { padding: 2% 2% 0 0 } .hidden { display: none }

Related: See More


Questions / Comments: