ol.breadcrumb { display: block; list-style: none; margin: 20px 0 0 0; padding: 5px 0; border: 1px solid #aaa; border-left: none; border-right: none; } @media (max-width: 992px) { ol.breadcrumb { font-size: 14px; } } .breadcrumb li { display: inline-block; } .breadcrumb li.active { padding: 6px 0; } .breadcrumb a { padding: 6px 0; display: inline-block; } .breadcrumb li::after { display: inline-block; padding: 0 6px; color: #868e96; content: "/"; } .breadcrumb li:last-of-type::after { content: ""; } a, button { color: #f63c3c; text-decoration: none; -webkit-transition: all .5s; transition: all .5s; } a:hover, a:focus, button:hover, button:focus { color: #f63c3c !important; -webkit-transition: all .2s; transition: all .2s; } .btn { padding: 15px 20px; display: inline-block; border: 1px solid #999; color: #252525; } .btn-primary { border: none; color: #fff; background: #f63c3c; } .btn-primary:hover, .btn-primary:focus { background: #d03030; color: #fff !important; } .btn-order { text-transform: uppercase; } .btn-sm { padding: 8px 14px; font-size: 12px; } .label-toggled { display: none; }#imagelightbox { position: fixed; z-index: 9999; -ms-touch-action: none; touch-action: none; } .hiding-layer { z-index: 100; background: rgba(0,0,0,.5); width: 100%; height: 100%; position:fixed; left: 0; top: 0; display: none; } p { line-height: 1.6; } #swipebox-overlay { background: rgba(0,0,0,.7) !important; } .alert { position: relative; padding: .75rem 1.25rem; border: 1px solid transparent; border-radius: .25rem; max-width: 600px; margin: 2rem auto; } .alert-info { color: #155724; background-color: #b0dfbb; border-color: #96c2a0; } .container { /*width: 1360px;*/ max-width: 1400px; width: 93%; margin: 0 auto; } .container:after { display: block; content: ""; clear: both; } .row { margin: 0 -10px; } .row:after { display: block; content: ""; clear: both; } .col { float: left; padding: 0 10px; position: relative; } .col-30 { width: 30%; } .col-40 { width: 40%; } .col-50 { width: 50%; } .col-60 { width: 60%; } .col-70 { width: 70%; } input, textarea { border: 1px solid rgba(0,0,0,.2); padding: 5px 12px; } label span { vertical-align: top; } [type="checkbox"], [type="radio"] { margin-right: 10px; position: relative; top: -2px; } ul.pagination { float: right; display: inline; list-style: none; margin: 20px 0 40px 0; padding: 0; clear: both; } @media (max-width: 992px) { ul.pagination { font-size: 12px; } } ul.pagination li { display: inline; } ul.pagination li a { color: #252525; border: 1px solid #999; text-transform: uppercase; font-weight: bold; padding: 8px 12px; display: inline-block; margin-bottom: 5px; } ul.pagination li.active a { border: 1px solid #f63c3c; background: #f63c3c; color: #fff; cursor: default; } *, ::after, ::before { box-sizing: border-box; } html { background: #252525; } body { font-family: 'Exo 2', sans-serif; background: #252525; font-size: 18px; line-height: 1.2; } body.preload * { animation-duration: 0s !important; -webkit-animation-duration: 0s !important; transition: background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important; } #preloader { font-size: 46px; z-index: 9; background: #252525; height: 100%; width: 100%; position: fixed; color: #f63c3c; text-align: center; top: 0; } #preloader .inner { position: absolute; top: 45%; width: 100%; } #preloader .inner p { font-size: 24px; } table { width: 100% !important; margin-bottom: 1rem; background-color: transparent; border-collapse: collapse; } tr { display: table-row; vertical-align: inherit; border-color: inherit; } table td, table th { padding: .75rem; vertical-align: top; border-top: 1px solid #dee2e6; } table th { vertical-align: bottom; border-bottom: 2px solid #dee2e6; } .table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } #order-panel ul.tabs { text-align: center; } #order-panel ul.tabs a { padding: 20px 40px; font-size: 22px; border: 2px solid rgba(0,0,0,0); background: rgba(0,0,0,.1); color: #000; } #order-panel ul.tabs a.active { border: 2px solid rgba(0,0,0,.1); background: none; } @media (max-width: 992px) { #order-panel ul.tabs a { padding: 10px 20px; font-size: 18px; } } @media (max-width: 600px) { #order-panel ul.tabs a { padding: 5px 10px; font-size: 18px; } } #order-panel ul.tabs a:hover { color: #fff !important; background: #f63c3c; } #order-panel .tab-pane { padding: 60px 30px; } @media (max-width: 992px) { #order-panel .tab-pane { padding: 20px 0; } } #order-panel #step-2 label { display: block; width: 100%; clear: both; } #order-panel #step-2 label div.label { display: inline-block; width: 40%; text-align: right; float: left; padding: 20px 10px 0 10px; font-size: 15px; } #order-panel #step-2 label div.form-element { display: inline-block; width: 60%; float: left; padding: 10px; } @media (max-width: 600px) { #order-panel #step-2 label div.label, #order-panel #step-2 label div.form-element { width: 100%; padding: 5px; text-align: left; } } #order-panel #step-2 label div.form-element [type="text"], #order-panel #step-2 label div.form-element textarea { width: 100%; } #order-panel #step-2 label input { padding: 10px; } #order-panel #step-2 fieldset { border: 1px solid rgba(0,0,0,.1); } @media (max-width: 992px) { #order-panel #step-2 .fieldset-container { width: 100%; } } .order-table, .summary-table { vertical-align: middle; background: #fff; } .order-table .price, .order-table .value, .summary-table .price, .summary-table .value { text-align: center; vertical-align: middle; } .order-table .amount, .summary-table .amount { vertical-align: middle; min-width: 200px; } .order-table .amount input, .summary-table .amount input { width: 60%; float: left; height: 30px; background: #fff; border: 1px solid #e5e5e5; margin-right: -3px; padding: 5px 12px; } .order-table .amount select, .summary-table .amount select { width: 40%; float: left; height: 30px; background: #e5e5e5; border: 1px solid #e5e5e5; padding: 5px 12px; min-width: 60px; } .order-table .amount span, .summary-table .amount span { width: 40%; float: left; height: 30px; padding: 4px 8px; } .order-table .description, .summary-table .description { vertical-align: middle; position: relative; } .order-table .description .inner, .summary-table .description .inner { display: flex; align-items: center; } .order-table .description .icon, .summary-table .description .icon { display: inline-block; width: 25%; text-align: center; } .order-table .description .icon img, .summary-table .description .icon img { width: 80%; height: auto; } .order-table .description .name, .summary-table .description .name { display: inline-block; width: 75%; } .order-table .description .label, .summary-table .description .label { float: right; background: #f00; color: #fff; position: absolute; right: 0; top: 0; padding: 2px 5px; text-transform: uppercase; font-size: 10px; font-weight: bold; } ul.tabs { display: block; list-style: none; margin: 0; padding: 0; } .tabs:after { display: block; content: ""; clear: both; } .tabs li { display: inline; } .tabs a { padding: 10px 20px; background: #252525; color: #fff; display: inline-block; margin-top: 3px; } .tabs a:hover, .tabs a:focus { background: #555; color: #fff !important; } .tabs a.active { background: #fff; color: #252525 !important; } .tab-pane { background: #fff; padding: 30px; display: none; overflow-y: scroll; } .tab-pane.active { display: block; } .tab-pane h2 { margin-top: 0; } hr { border: none; border-top: 1px solid rgba(0,0,0,.2); } td, th { padding: 5px; border: 1px solid #bbb; } h1 { margin: 35px 0 20px 0; border-bottom: 1px solid rgba(0,0,0,.2); padding: 0 0 20px; font-weight: 100; font-size: 42px; } @media (max-width: 992px) { h1 { font-size: 28px; } } .lead { font-size: 1.2em; } .advantages { width: 100%; background: #252525; text-align: center; padding: 60px 0; margin-bottom: 2px; } .advantages:after { display: block; content: ""; clear: both; } .advantages .container { position: relative; } .advantages ul { display: inline-block; list-style: none; margin: 0; padding: 0; } .advantages li { display: inline; } .advantages li a { position: relative; display: inline-block; float: left; width: 20%; color: #252525; font-size: 16px; font-weight: bold; overflow: hidden; widows: 4; orphans: 4; } @media (max-width: 992px) { .advantages li a { width: 50%; } } @media (max-width: 550px) { .advantages li a { width: 100%; } } .advantages li a > div { padding: 30px 10px; height: 190px; background: #e9e9e9; margin: 1px; } .advantages li a .icon { font-size: 74px; width: 100%; margin-bottom: 25px; } .advantages .btn { margin-top: 30px; border: rgba(233,233,233,.5) 1px solid; color: #e9e9e9; } .subpage_advantages_wrapper .advantages .btn { display: none; } .subpage_advantages_wrapper .advantages { background: rgba(0,0,0,.1); padding: 2px; } .subpage_advantages_wrapper .advantages li a .icon { font-size: 50px; width: 100%; margin-bottom: 10px; } .subpage_advantages_wrapper .advantages li a > div { height: 135px; padding: 20px 10px; } .contact-page-content { background: #fff; overflow: hidden; width: 34%; float: left; padding: 30px 20px 50px 20px; line-height: 1.8; font-size: 18px; margin-bottom: 2px; } .contact-page-content hr { border-color: rgba(0,0,0,.2); } .contact-page-content h2 { margin: 0 0 10px 0; } .contact-page-content address { font-style: normal; } .contact-page-map { border:0; width: 66%; float: right; margin-bottom: 30px; height: 433px; } @media (max-width: 992px) { .contact-page-content { width: 100%; float: none; } .contact-page-map { width: 100%; float: none; } } #hp-content { width: 100%; padding: 10px 0 50px 0; background: #e9e9e9; } #hp-content h2 { margin: 30px 0; } #main-footer { width: 100%; background: #252525; color: #e9e9e9; overflow: hidden; } @media (max-width: 992px) { #main-footer .container { width: 100%; max-width: 100%; } } #main-footer .contact { background: #b13434; overflow: hidden; width: 34%; float: right; padding: 30px 20px 50px 20px; line-height: 1.8; font-size: 18px; } @media (max-width: 992px) { #main-footer .contact { width: 100%; text-align: center; padding: 10px 0; } } #main-footer .contact hr { border-color: rgba(255,255,255,.5); } #main-footer .contact h2 { margin: 0 0 10px 0; } #main-footer .contact address { font-style: normal; } #main-footer .contact a, #main-footer .contact a:hover, #main-footer .contact a:focus { color: #fff !important; } #main-footer .menu { float: left; width: 66%; margin: 20px 0 30px 0; } @media (max-width: 992px) { #main-footer .menu { display: none; } } #main-footer .menu a { display: block; padding: 5px 0; color: #fff; } #main-footer .menu hr { border-color: rgba(255,255,255,.2); } #main-footer .copyright { float: left; width: 66%; padding: 0 10px 40px 10px; } @media (max-width: 992px) { #main-footer .copyright { width: 100%; text-align: center; } } #main-footer .copyright>div { font-size: 14px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2); }#main-header { background: #e9e9e9; } #main-header .brand-info { background: #252525; padding: 30px 0; } @media (max-width: 992px) { #main-header .brand-info { padding: 0; } #main-header .brand-info .container { width: 100%; } } #main-header .brand-info:after { display: block; content: ""; clear: both; } #main-header #site-brand { display: inline-block; padding: 10px; color: #fff; font-size: 30px; float: left; background: #252525; } @media (max-width: 992px) { #main-header #site-brand { font-size: 38px; float: none; width: 100%; text-align: center; padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,.2); } } #main-header #site-brand:hover, #main-header #site-brand:focus { text-decoration: none; color: #f63c3c; } #main-header .brand-info .contact { float: right; font-size: 16px; padding: 5px; } @media (max-width: 992px) { #main-header .brand-info .contact { float: none; width: 100%; font-size: 14px; padding: 12px 10px; } } #main-header .brand-info .contact a { display: inline-block; padding: 10px; list-style-type: none; color: #fff; } @media (max-width: 992px) { #main-header .brand-info .contact a { width: 100%; text-align: center; padding: 5px; } } #main-header .brand-info .contact a svg { display: inline-block; color: #f63c3c; margin-right: 12px; } #main-menu { background: rgba(240,240,240,.8); font-size: 14px; position: relative; z-index: 2; border-bottom: 1px solid rgba(0,0,0,.3); } #main-menu:after { display: block; content: ""; clear: both; } #main-menu .offer { float: left; font-size: 18px; } #main-menu .pages { float: right; } @media (max-width: 992px) { #main-menu .offer, #main-menu .pages { float: none; width: 100%; clear: both; } } #main-menu ul { display: inline; list-style: none; margin: 0; padding: 0; } #main-menu li { display: inline-block; position: relative; -webkit-transition: all .5s; transition: all .5s; } #main-menu a { color: #252525; text-transform: uppercase; font-weight: bold; padding: 20px 10px; display: inline-block; } @media (max-width: 992px) { #main-menu li { display: block; float: none; width: 100%; clear: both; } } #main-menu a:hover, #main-menu a:focus { color: #f63c3c; background: none; } #main-menu .menu-headline { display: none; } @media (max-width: 992px) { #main-menu .offer>ul, #main-menu .pages>ul { display: none; } #main-menu .offer>ul.toggled, #main-menu .pages>ul.toggled { display: block; } #main-menu .menu-headline { display: block; width: 100%; border-top: 1px solid rgba(0,0,0,.1); } } #main-menu .pages a { padding: 22px 10px; } #main-menu a.btn-toggle, #main-menu .pages a.btn-toggle { padding: 20px 10px 20px 0; } #main-menu a.primary { color: #f63c3c; } #main-menu li ul { display: none; } #main-menu li:hover { background: #fff; -webkit-transition: all .2s; transition: all .2s; } #main-menu li ul.toggled { display: inline-block; position: absolute; background: rgba(255,255,255,.9); top: 61px; left: -2px; z-index: 10; padding: 20px 0; border: 1px solid rgba(0,0,0,.2); } @media (max-width: 992px) { #main-menu li ul.toggled { position: static; width: 100%; } } #main-menu li ul li { display: block float: none !important; clear: both; width: 100%; } #main-menu li ul a { display: block; white-space: nowrap; float: none; padding: 10px 30px !important; } #main-menu li ul li:hover, #main-menu li ul li:focus { background: none !important; } .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; outline: 0; overflow-x: hidden; overflow-y: auto; background: rgba(0,0,0,.5); display: none; } .fade.show { opacity: 1; } .modal-dialog { position: relative; width: auto; margin: .5rem; pointer-events: none; } .modal-dialog-centered { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: calc(100% - (.5rem * 2)); } .modal-title { margin: 0; line-height: 1.5; text-transform: uppercase; font-size: 20px; } .close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; cursor: pointer; } button.close { padding: 0; background-color: transparent; border: 0; -webkit-appearance: none; } .modal-header .close { padding: 1rem; margin: -1rem -1rem -1rem auto; } @media (min-width: 576px) { .modal-dialog { max-width: 1400px; margin: 1.75rem auto; } } .modal.fade .modal-dialog { transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out,-webkit-transform .3s ease-out; -webkit-transform: translate(0,-25%); transform: translate(0,-25%); } .modal.show .modal-dialog { -webkit-transform: translate(0,0); transform: translate(0,0); } .modal-content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0,0,0,.2); outline: 0; } .modal-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 1rem; border-bottom: 1px solid #e9ecef; border-top-left-radius: .3rem; border-top-right-radius: .3rem; } .modal-body { position: relative; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1rem; } .modal-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 1rem; border-top: 1px solid #e9ecef; } body.modal-open { overflow: hidden; } .news { padding: 10px 0; width: 100%; float: left; } .news .items { margin: 0 -1px; clear: both; } .news .item-body:after { display: block; content: ""; clear: both; } #hp-content .news { width: 34%; } @media (max-width: 992px) { #hp-content .news { width: 100%; } } .news .item { display: inline-block; float: left; overflow: hidden; color: #fff; width: 33.33%; } #hp-content .news .item { width: 100%; } @media (max-width: 992px) { #hp-content .news .item, .news .item { width: 50%; } } @media (max-width: 768px) { #hp-content .news .item, .news .item { width: 100%; } } .news .item-body { margin: 4px 1px; position: relative; border: 1px solid rgba(0,0,0,.2); background: #252525; overflow: hidden; height: 150px; -webkit-transition: all .5s; transition: all .5s; } .news .item:hover .item-body, .news .item:focus .item-body { background: #f63c3c; -webkit-transition: all .2s; transition: all .2s; color: #fff !important; } .news .item:hover, .news .item:focus { background: none; } .news .item:after { display: block; content: ""; clear: both; } .news .item img { width: 100%; position: absolute; bottom: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: 0.5; } .news .item .caption { position: absolute; top: 0; left: 0; padding: 20px; } .news .item .caption h3 { margin: 0 0 8px 0; text-transform: uppercase; font-size: 24px; } .news .item .caption p { margin: 0; font-size: 16px; } .page-content { width: 70%; float: right; padding: 10px 30px 60px 30px; background: #fff; line-height: 1.6; } .page-content-container { background: #e9e9e9; overflow: hidden; } .page-content-container:after { display: block; content: ""; clear: both; } .sidebar { float: left; width: 30%; margin: 50px 0; } @media (max-width: 992px) { .page-content { width: 100%; padding: 10px 20px 20px 20px; } .sidebar { display: none; } .page-content-container { width: 100%; } } .sidebar .nav a { display: block; padding: 20px; background: rgba(255,255,255,0); margin-bottom: 1px; color: #252525; } .sidebar .nav a:hover, .sidebar .nav a:focus { background:rgba(255,255,255,1); } .sidebar .nav a.active { background:rgba(255,255,255,.5); } .product-details-img { margin-top: 30px; width: 50%; float: left; margin-bottom: 30px; } @media (max-width: 992px) { .product-details-img { width: 100%; } } .product-details-img>div { margin: 0 10px; } .product-details-img img { width: 100%; } .product-details-img .indicators { margin-top: 10px; } .product-details-img .indicators a { display: inline-block; float: left; width: 16.66%; overflow: hidden; padding: 1px; } .product-details-img .indicators a img { width: 100%; } .product-details-primary { width: 100%; margin-top: 30px; float: right; } @media (max-width: 992px) { .product-details-primary { width: 100%; margin-top: 0; } } .product-details-primary>div { margin: 0 10px; background: #fff; overflow: hidden; padding: 0 30px 10px 30px; border: 1px solid #aaa; } .product-details-secondary { width: 100%; clear: both; margin: 10px 0 50px 0; } .filters { padding: 30px 0 20px 0; text-align: right; float: right; clear: right; } .category-img { width: 34%; float: left; margin-bottom: 30px; } @media (max-width: 992px) { .category-img { width: 100%; } } .category-img img { width: 100%; } .category-description { background: #fff; padding: 40px 30px; margin-bottom: 30px; line-height: 1.4; max-width: 66%; margin: 0 auto; float: right; overflow: hidden; } @media (max-width: 992px) { .category-description { width: 100%; max-width: 100%; } } #category-description-body { height: 77px; border-bottom: 1px solid #aaa; overflow: hidden; -webkit-transition: all .5s; transition: all .5s; margin-bottom: 20px; text-overflow: ellipsis ellipsis; } #category-description-body p:first-of-type { margin-top: 0; } #category-description-body p:last-of-type { margin-bottom: 0; } #category-description-body.toggled { height: auto; border-bottom: none; -webkit-transition: all .5s; transition: all .5s; } #hp-content .offer { padding: 10px 0; width: 66%; float: left; } @media (max-width: 992px) { #hp-content .offer { width: 100%; } } #hp-content .offer > div, #hp-content .news > div { padding: 0 10px; } .offer .items { margin: 0 -10px; clear: both; } .items:after { display: block; content: ""; clear: both; } .offer .item { width: 33.33%; float: left; position: relative; } #hp-content .offer .item { width: 50%; } @media (max-width: 992px) { .offer .item, #hp-content .offer .item { width: 50%; } } @media (max-width: 768px) { .offer .item, #hp-content .offer .item { width: 100%; } } .offer .item-body { margin: 4px 10px; background: #fff; border: 1px solid rgba(0,0,0,.2); } .offer .item-body:after { display: block; content: ""; clear: both; } .offer .item .img { display: block; float: left; width: 50%; overflow: hidden; height: 148px; text-align: center; } .offer .item img { height: 100%; width: 100%; object-fit: cover; } .offer .item h3 { text-transform: uppercase; margin: 20px 12px 10px 12px; font-size: 18px; } .offer .item .price { margin: 0 12px 10px 12px; font-weight: bold; font-size: 14px; position: absolute; bottom: 15px; } .offer .item .caption a { display: inline-block; } .offer .item .caption { width: 50%; float: left; font-size: 12px; } .offer .item .caption .categories { margin: 12px; position: absolute; bottom: 12px; } .offer .item .caption .categories h4 { margin: 0; color: rgba(0,0,0,.4); font-weight: normal; font-size: 14px; } .offer .item a { color: #252525; } #main-slider { position: relative; margin-top: -60px; width: 100%; } @media (max-width: 768px) { #main-slider { display: none; } } #main-slider .slide { position: relative; } #main-slider .slide > img { width: 100%; } .product-swiper { height: auto !important; overflow: hidden; } .swiper-button-prev, .swiper-button-next { position: absolute; bottom: 24% !important; top: auto !important; width: auto; height: auto; margin-top: 0; z-index: 10; cursor: pointer; background: none !important; font-size: 46px; transform: translate(0, -50%); color: #f63c3c; } .swiper-pagination-bullet-active { background: #f63c3c !important; } #main-slider .slide .caption { position: absolute; bottom: 20%; background: rgba(30,30,30,.8); color: #fff; padding: 10px 0; width: 100%; overflow: hidden; } #main-slider .slide .caption .img { display: inline-block; float: left; width: 40%; height: 130px; overflow: hidden; } #main-slider .slide .caption .img img { min-width: 100%; min-height: 100%; float: left; display: inline-block; } #main-slider .slide .caption .text { display: inline-block; font-size: 35px; color: #fff; font-weight: bold; width: 60%; left: 40%; position: absolute; height: 130px; overflow: hidden; } #main-slider .slide .caption .text p { margin: 0 100px 0 20px; text-transform: uppercase; line-height: 1.2; } #main-slider .control { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: 0.5; position: absolute; bottom: 20%; font-size: 48px; height: 130px; padding: 10px 40px; display: flex; align-items: center; right: 0; display: none; } #main-slider .control a { display: block; color: #fff; margin: 0 10px; } .swiper-slide { width: 100% !important; } #product-swiper .swiper-slide, #product-versions-swiper .swiper-slide { height: 380px !important; } .product-details-img-100 #product-swiper .swiper-slide, .product-details-img-100 #product-versions-swiper .swiper-slide { height: auto !important; max-height: 500px !important; } @media (max-width: 768px) { #product-swiper .swiper-slide, #product-versions-swiper .swiper-slide { height: auto !important; max-height: auto !important; } } .product-details-img-100 { width: 100% !important; } #product-swiper, #product-versions-swiper { margin-bottom: 10px !important; } .product-swiper .swiper-slide .caption { position: absolute; top: 5px; left: 5px; color: #252525; text-align: left; text-transform: uppercase; font-weight: bold; background: rgba(255,255,255,.7); padding: 4px 8px; } .thumbs-swiper { box-sizing: border-box; overflow: hidden; } .thumbs-swiper .swiper-slide { width: 15% !important; height: 100%; opacity: 1; margin-top: 10px; } .thumbs-swiper .swiper-slide-active { opacity: 1; margin-top: 0; border-bottom: #f63c3c 6px solid; } .product-details-img-100 .thumbs-swiper .swiper-slide { width: 10% !important; } .thumbs-swiper .caption { color: #252525; text-transform: uppercase; font-size: 11px; text-align: center; width: 100%; margin-bottom: 5px; font-weight: bold; position: absolute; background: rgba(255,255,255,.7); padding: 3px 6px; }