@charset "UTF-8"; /* CSS Document */ @import url('https://fonts.googleapis.com/css?family=Archivo+Narrow:400,500,600,,700'); @import url('https://use.fontawesome.com/releases/v5.2.0/css/all.css'); body { font-family: 'Archivo Narrow', sans-serif; font-size: 12px; font-weight: 200; color: #000000; margin: 0; padding: 0; letter-spacing: 0.6px; } a { color: #222222; } a:hover { color: #000000; } a:active, a:hover, a:link, a:visited { text-decoration: none; } .container { width: 100%; float: left; position: relative; } .container-full { width: 100%; float: left; position: relative; background-color: #FFF; } .row { width: 1200px; margin: 0 auto; } .extended { width: 80%; } .clear { clear: both; max-width: 100%; height: 14px; margin: 0 auto; } #modal-overlay { position:fixed; top:0px; left:0; width:100%; height:100%; z-index:98; background: rgba(0,0,0,.5); visibility:hidden; } #modal-loading { top:30%; left:50%; width:260px; height:72px; z-index:999; position:fixed; visibility:hidden; margin-top:-100px; margin-left:-80px; } #modal-background { left:0; bottom:0; width:100%; height:100%; display:none; z-index:99; position:fixed; animation:.5s ease 0 normal none 1 vex-fadein; /*background:none repeat scroll 0 0 rgba(255, 255, 255, 0.4);*/ } #upBtn { display: none; position: fixed; bottom: 15px; right: 0; z-index: 99; border: none; outline: none; background-color: #FF0000; color: #FFFFFF; cursor: pointer; padding: 15px; border-radius: 0; } #upBtn:hover { background-color: #555; } /* Custom Sweet Alert */ .swal-modal { border-radius: 0; } .swal-title { font-size: 18px; } .swal-button { background-color: #FF0000; border-radius: 0; } .cd-breadcrumb.custom-separator li::after, .cd-multi-steps.custom-separator li::after { content: '/'; height: 16px; width: 16px; text-align: center; background: none; vertical-align: middle; } .header { height: 110px; padding: 0; top: 0; } .logo { /*width: 140px;*/ width:18%; height: 80px; float: left; text-align: center; margin:7px auto; } .TopNavBar { width: 850px; float: left; height: 22px; line-height: 22px; padding: 0; text-transform: uppercase; } .TopNavBar span { float: right; font-size: 13px; padding: 4px 14px; } .TopNavBar a { font-size: 13px; } .TopNavBar a:hover { font-size: 13px; /*color: #FF290B !important;*/ } .TopNavBar > span > a:link { color: #000; } .NavBarWidgets { /*width: 840px;*/ width:57%; float:left; margin-top:7px; height: 66px; /* float: left; margin-top: 7px;*/ } .navBarIcons{ width:25%;float:left;padding:20px 0 0 0; } .SearchBox { width: 586px; max-width: 730px; height: 50px; float: left; text-align: center; } .SearchBox form { height:40px; padding:5px; } .SearchBox form > input[type=text] { width: 405px; height: 32px; padding: 5px 5px 5px 45px; font-size: 14px; background-color: #fff; border: 1px solid #000; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: rgba(255, 255, 255, .4) 0 1px 0, inset rgba(000, 000, 000, .7) 0 0 0; -moz-box-shadow: rgba(255, 255, 255, .4) 0 1px 0, inset rgba(000, 000, 000, .7) 0 0 0; box-shadow: rgba(255, 255, 255, .4) 0 1px 0, inset rgba(000, 000, 000, .7) 0 0 0; background: url('https://ferreteriavidri.com/public/images/search.png?xass') no-repeat; } .SearchBox form > input[type=text] : focus { border: 1px solid red; outline: none; } .header-ico { width:auto; float:right; padding: 0 10px; text-align: center; font-weight: 700; color: #676767; font-size: 14px; } .header-ico a { font-family: 'Archivo Narrow', sans-serif; line-height: normal; font-weight: 600; } .header-ico img { width: 32px; display: block; margin: 0 auto; padding-bottom: 12px; } .ShopByDepartmentContainer { width:auto; height:290px; position:absolute; z-index:100; top:140px; display:none; } .ShopByDepartmentList { width:240px; height:auto; float:left; position:relative; display:none; background-color:#FFF; top:2px; z-index:101; } .ShopByDepartmentList ul { width: 240px; float: left; display: inline; list-style: none; padding: 0; } .ShopByDepartmentList li { margin: 0 18px; padding: 2.5px 0; line-height: 20px; } .ShopByDepartmentList li:last-child { border-bottom: none; } .ShopByDepartmentList li:hover { color: #FF0000 !important; } .ShopByDepartmentList li > a { margin: 10px 4px; color: #333 !important; font-weight: 600; font-size: 13px; text-transform: uppercase; } .ShopByDepartmentList li > a:hover { font-size: 13px; color: #000000 !important; } .SecondNav { width: 100%; float: left; background: #FFF; text-align: center; border-top: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; } .options { padding: 0; margin: 0; list-style-type: none; } .options li { width: 33%; display: block; float: left; padding: 2px 0; } /* Deprecated .options img { display: block; float: left; width: 15%; padding-bottom: 25%; padding-right: 5%; } */ .options h3 { width: 90%; margin: 0; text-align: center; font-size: 18px; padding: 5px 0; line-height: 20px; font-weight: 500; } .options h3 > i { padding-right: 10px; } .slick-next, .slick-next:hover, .slick-prev, .slick-prev:hover { width: 29px; height: 44px; } .slick-prev { background: url(https://ferreteriavidri.com/public/images/arrow-prev.png); } .slick-prev:hover { background: url(https://ferreteriavidri.com/public/images/arrow-prev-inverse.png); } .slick-next { background: url(https://ferreteriavidri.com/public/images/arrow-next.png); } .slick-next:hover { background: url(https://ferreteriavidri.com/public/images/arrow-next-inverse.png); } .slick-prev, .slick-prev:hover, .slick-prev, .slick-prev:hover { left: -40px; z-index: 2; } .slick-next, .slick-next:hover, .slick-prev, .slick-prev:hover { right: -40px; z-index: 2; } .slick-dots li button:before { font-size: 32px; } /* .slick > div { padding: 10px; background: #FFF; } */ h2.strikethrough-style { display: block; font-size: 36px; line-height: 36px; text-align: center; position: relative; margin: 0 0 .5em; } h2.strikethrough-style:before { border-top: 1px solid #e2e2e2; content: ""; margin: 0 auto; position: absolute; top: 50%; left: 0; right: 0; bottom: 0; width: 100%; z-index: -1; } h2.strikethrough-style span { background: #f6f6f6; font-weight: 100 !important; display: inline-block; width: auto; padding: 0 20px; max-width: 860px; font-weight: normal; } #footer { width: 100%; padding-bottom: 40px; height: auto; background: #f0f0f0; } #footer ul { width:100%; float:left; padding:0; margin:0; list-style-type:none; } #footer li { height:24px; line-height:24px; padding:0 2px; } #footer h4 { font-size:18px; font-weight: 700; text-align: left; } #footer p { font-size:12px; text-align:center; } #footer strong { font-size:18px; } #footer i { padding-right:10px; } #footer i:hover { color:#000; } .col { width:23%; min-height:100px; float:left; position:relative; padding:1%; } #search_results { background: #FFFFFF; } .zebra li{ border-bottom: 1px solid #ccc; } .BackGray{ background-color:#f6f6f6; } .catalog_element_container{ display: flex; flex-wrap: wrap; } .catalog_element_new{ padding: 10px; width: calc(50% - 7px); border:#ccc 1px solid; background-color: #fff; box-sizing: border-box; margin-right: 7px; margin-bottom: 10px; box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.2); } .catalog_element_new:nth-child(even){ margin-right: 0px; margin-left: 7px; } .catalog_element_new .header_element{ display: flex; position: relative; border-bottom: #ccc solid 1px; height: 250px; margin-bottom: 10px; } .catalog_element_new .header_element .img_element{ text-align: left; } .catalog_element_new .header_element .img_element .compareArticles{ border-bottom: 1px #ccc solid; border-top: 1px #ccc solid; padding-top: 1px; padding-bottom:3px; margin-right: 10px; height: 20px; } .catalog_element_new .header_element .desc_element{ width: 100%; display: flex; flex-direction: column; text-align: left; margin-right: 65px; margin-top: 15px; color: #000; } .catalog_element_new .header_element .desc_element .title{ font-size: 1.3em; font-weight: 700; height: 54px; overflow: hidden; line-height: 1.2em; text-transform: uppercase; margin-bottom: 5px; } .catalog_element_new .header_element .desc_element .rating{ box-sizing: border-box; padding-top: 5px; margin-bottom: 5px; height: 25px; } .catalog_element_new .header_element .desc_element .description{ height: 105px; overflow: hidden; } .catalog_element_new .header_element .desc_element .gitf{ position: absolute; bottom: 10px; right: 0px; background-color: #ED1B35; padding: 3px 25px; color: #FEE505; font-weight: 700; } .catalog_element_new .header_element .desc_element .gitf small{ color: #FFFFFF; } .catalog_element_new .header_element .desc_element .seal{ position: absolute; width: 60px; height: 60px; top: 0px; right: 0px; } .catalog_element_new .header_element .desc_element{ width: 100%; display: flex; flex-direction: column; text-align: left; margin-right: 0px; margin-top: 15px; color: #000; } .catalog_element_new form.footer_element{ display: flex; flex-direction: column; color: #000; } .catalog_element_new form.footer_element .priceAndQty_element{ display: flex; justify-content: space-between; margin-bottom: 10px; } .catalog_element_new form.footer_element .priceAndQty_element .qty{ display: flex; } .catalog_element_new form.footer_element .priceAndQty_element .qty input{ width: 50px; height: 25px; text-align: center; font-size: 1.5em; } .catalog_element_new form.footer_element .priceAndQty_element .price{ font-size: 2em; font-weight: 700; } .catalog_element_new form.footer_element .btns_element{ overflow: auto; } .catalog_element_new form.footer_element .btns_element button{ float: left; width: calc(50% - 2px); border-radius: 5px; padding: 5px; font-weight: 700; height: 50px; border: 1px #aaa solid; color: #000; cursor: pointer; background: #fafafa; background: -moz-linear-gradient(top, #fafafa 0%, #fafafa 50%, #efefef 51%, #efefef 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, #fafafa), color-stop(50%, #fafafa), color-stop(51%, #efefef), color-stop(100%, #efefef)); background: -webkit-linear-gradient(top, #fafafa 0%, #fafafa 50%, #efefef 51%, #efefef 100%); background: -o-linear-gradient(top, #fafafa 0%, #fafafa 50%, #efefef 51%, #efefef 100%); background: -ms-linear-gradient(top, #fafafa 0%, #fafafa 50%, #efefef 51%, #efefef 100%); background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), color-stop(50%, #fafafa), color-stop(51%, #efefef), to(#efefef)); background: linear-gradient(to bottom, #fafafa 0%, #fafafa 50%, #efefef 51%, #efefef 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#efefef', GradientType=0 ); } .catalog_element_new form.footer_element .btns_element button:first-child{ margin-right: 4px; } .availavilityOverlay { background-color: rgba(0, 0, 0, 0.7); position: fixed; width: 100%; height: 100%; top: 0; left: 0; display: none; z-index: 100; overflow: auto; } .availavilityOverlay.showOverlay { display: block; } .availavilityOverlay .availavilityModal { position: relative; width: 600px; margin-left:auto; margin-right:auto; background-color: #FFF; top: 10%; margin-bottom: 10%; z-index: 101; transform: scale(0, 0); transition: transform .3s; } .availavilityOverlay .availavilityModal.showAvailavility { transform: scale(1, 1); } .availavilityOverlay .availavilityModal button { background-color: #fff; border: 0px; font-size: 1.5em; margin-left: 10px; } /******** menu **************/ .menuContainer{-webkit-box-sizing:border-box;box-sizing:border-box;width:1075px;margin:auto;background-color:#fff;z-index:99}.menuContainer ul{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0px;margin:0px;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.menuContainer ul .delay-container:hover .delay{height:0px;-webkit-transition:height 0s 0.1s;-o-transition:height 0s 0.1s;transition:height 0s 0.1s}.menuContainer ul .delay-container .delay{position:absolute;background-color:transparent;height:48px;z-index:99;-webkit-transition:height .0s 0s;-o-transition:height .0s 0s;transition:height .0s 0s;cursor:pointer}.menuContainer ul li{width:auto;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex}.menuContainer ul li a{padding:5px 10px;text-decoration:none;color:#676767;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;font-size:1.25em;font-weight:700}.menuContainer ul li a:hover{color:#000}.menuContainer ul li ul._subMenu{background-color:#fff;opacity:0;visibility:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;top:48px;left:0px;width:100%;font-weight:bolder;-webkit-box-shadow:0 4px 6px -2px rgba(0, 0, 0, 0.2);box-shadow:0 4px 6px -2px rgba(0, 0, 0, 0.2);height:450px;-webkit-transition:opacity .3s .3s ease;-o-transition:opacity .3s .3s ease;transition:opacity .3s .3s ease}.menuContainer ul li ul._subMenu>div{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;width:1075px;padding:0px}.menuContainer ul li ul._subMenu>div>li>a{height:48px;border-bottom:1px solid #ccc;padding-bottom:0px}.menuContainer ul li ul._subMenu li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-right:5px solid #fff;border-left:5px solid #fff;overflow:hidden}.menuContainer ul li ul._subMenu li a{text-align:left}.menuContainer ul li ul._subMenu li ul._subMenu3Level{margin-top:5px;border:0px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;height:calc(100% - 57px)}.menuContainer ul li ul._subMenu li ul._subMenu3Level li{margin-bottom:3px;overflow:hidden}.menuContainer ul li ul._subMenu li ul._subMenu3Level li:hover span{opacity:0}.menuContainer ul li ul._subMenu li ul._subMenu3Level li a{font-weight:normal;line-height:1em}.menuContainer ul li ul._subMenu li ul._subMenu3Level li span{position:absolute;background-color:#fff;-webkit-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;opacity:0;margin-left:-6px;margin-top:0px;padding:5px;border:1px dashed #ccc;border-radius:5px;font-size:1em}.menuContainer ul li ul._subMenu li ul._subMenu3Level li div{height:20px;overflow:hidden}.menuContainer ul li._openSub>div{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.menuContainer ul li._openSub>div:after{content:"";position:absolute;left:0px;bottom:0px;width:100%;height:0px;background-color:#f00;-webkit-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s}.menuContainer ul li._openSub:hover ul._subMenu{border-top:1px solid #ccc;opacity:1;visibility:visible}.menuContainer ul li._openSub:hover>div:after{height:3px}.menuContainer ul li._openSub a{-webkit-box-sizing:border-box;box-sizing:border-box}.menuContainer ul li ul._subMenu>div>li>a{height:48px;border-bottom:1px solid #ccc;padding-bottom:0px}.menuContainer ul li ul._subMenu li a{text-align:left}.menuContainer ul li ul._subMenu li ul._subMenu3Level{margin-top:5px;border:0px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;height:calc(100% - 57px)}.menuContainer ul li ul._subMenu li ul._subMenu3Level li{margin-bottom:3px;overflow:hidden}.menuContainer ul li ul._subMenu li ul._subMenu3Level li span{position:absolute;background-color:#fff;-webkit-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;opacity:0;margin-left:-6px;margin-top:0px;padding:5px;border:1px dashed #ccc;border-radius:5px;font-size:1em}.menuContainer ul li ul._subMenu li ul._subMenu3Level li div{height:20px;overflow:hidden}.menuContainer ul li ul._subMenu li ul._subMenu3Level li:hover span{opacity:0}.menuContainer ul li ul._subMenu li ul._subMenu3Level li a{font-weight:normal;line-height:1em}.delay{position:absolute;background-color:transparent;height:48px;z-index:99;-webkit-transition:height .0s 0s;-o-transition:height .0s 0s;transition:height .0s 0s;cursor:pointer}.delay-container:hover .delay{height:0px;-webkit-transition:height 0s 0.1s;-o-transition:height 0s 0.1s;transition:height 0s 0.1s} /****************************/ /******* Loader *************/ .animateLoader_v{display:block;position:relative;width:100px;height:100px;margin:0 auto;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.animateLoader_v.message:after{content:"Cargando datos";position:absolute;bottom:-25px;font-size:2em;width:154px;color:#FFF;left:-27px}.animateLoader_v div{-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;position:absolute;width:20px;background:#f00;border:2px solid #fFF;-webkit-animation:animateLoader_v 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;animation:animateLoader_v 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite}.animateLoader_v div:first-child{left:10px;-webkit-animation-delay:-0.24s;animation-delay:-0.24s}.animateLoader_v div:nth-child(2){left:40px;-webkit-animation-delay:-0.12s;animation-delay:-0.12s}.animateLoader_v div:nth-child(3){left:70px;-webkit-animation-delay:0;animation-delay:0}@-webkit-keyframes animateLoader_v{0%{top:0px;height:100px}50%,to{top:25px;height:50px}}@keyframes animateLoader_v{0%{top:0px;height:100px}50%,to{top:25px;height:50px}} /****************************/ @media only screen and (min-width: 1280px){#search_term{width: 460px;}} #search_term{width:405px;height:32px;padding: 5px 5px 5px 45px;font-size:14px;background-color:#fff;border: 1px solid #000;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow: rgba(255,255,255,.4) 0 1px 0, inset rgba(0,0,0,.7) 0 0 0;-moz-box-shadow: rgba(255,255,255,.4) 0 1px 0,inset rgba(0,0,0,.7) 0 0 0;box-shadow: rgba(255,255,255,.4) 0 1px 0, inset rgba(0,0,0,.7) 0 0 0;background: url(https://ferreteriavidri.com/public/images/search.png?xass) no-repeat;} #input-loader{display:none;} .show-input{display:block!important;} /****************** buscador ***********************/ .flexwrap{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.search-filters__row{height:34px;padding:10px;background:#eee;margin-bottom:15px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.search-filters__row label{margin:0 10px}.search-filters__row select{padding:8px 10px}.search-filters__row .pages{font-weight:900;font-size:16px}.search-filters__row .paginator-container{margin-left:15px}.search-filters__row .paginator-button{margin:0 5px;padding:8px 12px;background:#ededed;color:#636363;border:1px solid #ababab;outline:0;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f9f9f9),color-stop(50%,#ededed),color-stop(50%,#e2e2e2),to(#d1d1d1));background-image:linear-gradient(to bottom,#f9f9f9 0,#ededed 50%,#e2e2e2 50%,#d1d1d1 100%);display:inline-block}.search-filters__left{width:25%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.search-filters__right{width:75%;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}.search-filters__column{width:30%;background-color:#fff;padding:10px;-ms-flex-item-align:start;align-self:flex-start;-webkit-box-sizing:border-box;box-sizing:border-box}.search-filters__column h4{margin:6px;color:#000;font-size:1.3em;border-bottom:3px solid red}.search-filters__column h4.expand{cursor:pointer}.search-filters__column h3{margin:15px 6px}.search-filters__column ul{padding-left:0;list-style:none;overflow:hidden;max-height:180px;margin-top:0}.search-filters__column ul li{font-size:1.2em;padding:5px;margin:5px 5px 0 5px;border-bottom:1px dashed #ccc}.search-filters__column input[type=checkbox]:before{display:block;width:14px;height:14px;border:1px solid #999;content:"";background:#fff}.search-filters__column input[type=checkbox]:checked:before{background-image:url(https://ferreteriavidri.com/themes/default/img/check-1.jpg);background-size:14px 14px;border:0}.search-filters__column .expand-container{overflow:hidden}.search-filters__brands,.search-filters__categories{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.search-filters__brands .show-more,.search-filters__categories .show-more{text-align:right}.search-filters__brands .show-more button,.search-filters__categories .show-more button{color:#000;background:#fafafa;background:-webkit-gradient(left top,left bottom,color-stop(0,#fafafa),color-stop(50%,#fafafa),color-stop(51%,#efefef),color-stop(100%,#efefef));background:-webkit-gradient(linear,left top,left bottom,from(#fafafa),color-stop(50%,#fafafa),color-stop(51%,#efefef),to(#efefef));background:linear-gradient(to bottom,#fafafa 0,#fafafa 50%,#efefef 51%,#efefef 100%);cursor:pointer;border:1px solid #ccc;border-radius:3px;padding:5px 7px}.search-filters__brands .show-more button:hover,.search-filters__categories .show-more button:hover{border:#999 1px solid}.search-filters__count{font-size:2.5em;margin-right:10px;margin-left:10px}.search-results__container{display:-webkit-box;display:-ms-flexbox;display:flex}.search-articles{width:70%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:start;align-content:flex-start;margin:0 auto}.search-articles img{opacity:1;-webkit-transition:opacity .25s;transition:opacity .25s}.search-articles img.preload{opacity:0}.search-article{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;margin:5px;padding:5px;width:calc(50% - 10px);position:relative;border:1px #ccc solid}.search-article__img-container{width:170px;height:170px;padding:5px;-webkit-box-sizing:border-box;box-sizing:border-box}.search-article__img-container img{width:100%}.search-article__details{text-align:center}.search-article__title{width:calc(100% - 60px);text-transform:uppercase;font-weight:700;font-size:14px;margin-top:10px;height:36px}.search-article__title a:hover{color:red}.search-article__breadcrumb{color:#008c22;font-size:15px;padding-top:5px}.search-article__breadcrumb a{color:#008c22}.search-article__breadcrumb a:hover{color:red}.search-article__description{padding:5px 0;font-size:12px;text-transform:lowercase;height:42px}.search-article__description:first-letter{text-transform:uppercase}.search-article__price{font-size:20px;color:#000;font-weight:700}.search-article__price sup{font-size:14px}.search-article__brand{position:absolute;top:2px;left:2px;max-width:60px}.search-article__brand img{width:100%;height:auto}.search-article__seal{position:absolute;top:2px;right:2px;width:50px}.search-article__seal img{width:100%;height:auto}.search-paginator{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:10px;margin-top:15px}.search-paginator__container a{border:1px solid #dbdbdb;padding:8px 12px;margin:3px;background:#eee;display:inline-block}.search-paginator__container a.curr_page{color:#ff290b}.only-one{width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;height:182px}.only-one .search-article__details{width:calc(100% - 170px);text-align:left}.sliderRange .ui-widget-header{background:#333!important}.sponsored{-webkit-box-shadow: 10px 10px 16px -16px rgba(0,0,0,0.75);-moz-box-shadow: 10px 10px 16px -16px rgba(0,0,0,0.75);box-shadow: 10px 10px 16px -16px rgba(0,0,0,0.75);border:solid 2px #ed1b35 !important;} .rating_bar { /*this class creats 5 stars bar with empty stars */ /*each star is 16 px, it means 5 stars will make 80px together */ width: 120px; /*height of empty star*/ height: 27px; /*background image with stars */ background: url(https://ferreteriavidri.com/public/images/stars.png); /*which will be repeated horizontally */ background-repeat: repeat-x; /* as we are using sprite image, we need to position it to use right star, //0 0 is for empty */ background-position: 0 0; /* align inner div to the left */ text-align: left; /*display: block;*/ float: left; } .rating { /* height of full star is the same, we won't specify width here */ height: 27px; /* background image with stars */ background: url(https://ferreteriavidri.com/public/images/stars.png); /* now we will position background image to use 16px from top, //which means use full stars */ background-position: 0 -28px; /* and repeat them horizontally */ background-repeat: repeat-x; } @media only screen and (max-width: 1368px) { .row { /*width: 1140px;*/ } /* .TopNavBar { width: 100%; } */ /* .NavBarWidgets { width: 100%; } */ .SearchBox { width: 730px; max-width: 730px; } .SearchBox form > input[type=text] { width: 460px; } } @media screen and (min-width: 1680px) { .row { width: 1280px; } .TopNavBar { width: 1140px; } .NavBarWidgets { width: 62%; } .navBarIcons{ width: 20%; } .menuContainer { width: 1140px; } .overlayDelay { width: 1280px !important; } ._openSub a { font-size: 18px; color: #000; } .menuContainer ul li ul._subMenu>div{ width: 1200px !important; } .menuContainer ul li a{ font-weight: 500; color:#666; } } @media screen and (min-width: 1920px) { .row { width: 1408px; } .TopNavBar { width: 100%; } .NavBarWidgets { width: 62%; } .navBarIcons{ width: 20%; } .menuContainer { width: 1140px; } .overlayDelay { width: 1408px !important; } ._openSub a { font-size: 18px; color: #000; } .menuContainer ul li ul._subMenu>div{ width: 1200px !important; } .menuContainer ul li a{ font-weight: 500; color:#666; } }