/* cyrillic-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(../fonts/Roboto-Regular.ttf); } /* cyrillic-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/Roboto-Medium.ttf); } /* cyrillic-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto Bold'), local('Roboto-Bold'), url(../fonts/Roboto-Bold.ttf); } body { font-family: Roboto; } header { padding-top: 20px; border-top: #CB1E17 solid 10px; .search { padding-left: 10px; padding-right: 30px; a, a:hover, a:focus { line-height: 56px; font-size: 21px; color: #fff; } } #search-box { display: none; position: absolute; right: 56px; padding: 0px; z-index: 3; width: 75%; .has-feedback { margin-bottom: 0px; padding-top: 10px; padding-bottom: 12px; background-color: #CB1E17; padding-right: 30px; } input { background-color: #CB1E17; border: 0; box-shadow: none; border-bottom: 1px solid #fff; border-radius: 0; color: #fff; padding-left: 0px; &::placeholder { color: #fff; font-size: 16px; } } span { color: #fff; font-size: 23px; top: 9px; right: 30px; cursor: pointer; z-index: 10; pointer-events: auto; } } .logo { display: table; padding: 0; margin-left: 27px; margin-top: -100px; img { z-index: 10; position: relative; } } .up { width: 100%; padding-left: 24px; display: table; .delivery { margin-left: 60px; } .block { width: 150px; .title { color: #CB1E17; font-size: 13px; font-weight: 700; line-height: 15px; text-transform: uppercase; margin-bottom: 4px; } .text { color: #7aa4d0; font-size: 11px; font-weight: 400; line-height: 13px; } img { margin-right: 10px; } } .up-menu { margin-right: 20px; ul { li { a, a:hover, a:focus { padding: 0px; opacity: 0.6; color: #CB1E17; font-size: 10px; font-weight: 700; line-height: 11px; padding-left: 8px; padding-right: 8px; text-transform: uppercase; background: none; } a:hover { text-decoration: underline; } } } } } .down { width: 100%; display: table; padding-left: 24px; .descriptor { padding-top: 23px; padding-bottom: 20px; color: #CB1E17; font-size: 18px; font-weight: 700; line-height: 21px; } .cart { border: 1px solid #b4c2d8; display: table; .text { color: #CB1E17; font-size: 12px; font-weight: 400; line-height: 14px; padding-left: 14px; padding-right: 14px; padding-top: 8px; padding-bottom: 8px; text-align: right; float: left; } .icon { float: left; font-size: 19px; padding-top: 9px; padding-bottom: 9px; padding-left: 15px; padding-right: 15px; color: #CB1E17; background-image: linear-gradient(180deg, rgba(73, 126, 196, 0.05) 0%, rgba(144, 184, 237, 0.15) 100%); border-left: 1px solid #b4c2d8; } } } nav.navbar { background-color: #CB1E17; border-radius: 0; margin-bottom: 0px; } .menu { margin-left: -15px; margin-right: -15px; background-color: #CB1E17; border-top: 3px solid #CB1E17; position: relative; .navbar-nav { float: right; &>li { div.line { display: inline-block; margin-top: 11px; div { width: 1px; height: 34px; background-color: rgba(255, 255, 255, 0.2); } } &>a, &>a:focus, &>a:hover { padding-left: 35px; padding-right: 35px; padding-top: 16px; padding-bottom: 19px; color: white; font-size: 18px; font-weight: 500; line-height: 21px; display: inline-block; float: right; } &:first-of-type { div.line { display: none; } } &>a:hover, &>a:focus, &.open>a, &.open>a:hover, &.open>a:focus { background-color: #fff; color: #CB1E17; } .dropdown-menu { td { vertical-align: top; padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:10px; } ul { float: left; padding-left: 0px; li { list-style: none; line-height: 29px; white-space: nowrap; &.title { color: #0f2d5f; font-size: 15px; font-weight: 700; } a, a:hover, a:focus { color: #0f2d5f; font-size: 13px; font-weight: 400; } } } } } } } } #safechem { &.tax-product_cat.woocommerce, .related.products, &.search-results { .sidebar { h3 { border: #CB1E17 1px solid; margin: 0px; background-color: #CB1E17; color: #fff; padding: 10px; margin-top:-10px; margin-left:-10px; margin-right:-10px; margin-bottom:10px; } &>div { border: #CB1E17 1px solid; padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; margin-bottom:15px; } } ul.products { li.product { &.last { margin-right: 0px; } width: 30%; margin-right: (10% / 2); display: inline-block; white-space: normal; padding-left:0px; padding-right: 0px; padding-top:15px; border: 1px solid #cedeee; height: auto; .woocommerce-LoopProduct-link { width: 100%; text-align: center; padding-top: 10px; &>img { height: 145px; width: auto; margin-left: auto; margin-right: auto; } } h3 { color: #CB1E17; font-size: 15px; font-weight: 700; line-height: 18px; margin-bottom: 10px; padding-left: 15px; padding-right: 15px; padding-top: 0px; padding-bottom: 0px; text-align: left; /*height: 36px;*/ } .description { color: #567aa9; font-size: 13px; font-weight: 400; line-height: 18px; margin-bottom: 9px; text-align: left; padding-left: 15px; padding-right: 15px; overflow: hidden; height: 69px; text-overflow: ellipsis; } .price { font-size: 16px; font-weight: 700; color: rgb(158, 58, 58); } .add_to_cart_button { margin-top: 5px; padding-top: 0px; padding-bottom: 0px; width: 100%; background-color: #CB1E17; color: #fff; font-size: 15px; font-weight: 900; line-height: 44px; text-transform: uppercase; text-align: center; display: block; border-radius: 0px; } .added_to_cart { display: none; } } } } .related.products{ ul.products { li.product { width:23%; margin-right: (8% / 3); } } } } @media(max-width:767px) { #safechem { &.tax-product_cat, .related.products, &.search-results { ul.products li.product { width: 100%; margin-right: 0; } } } } .woocommerce.single-product div.product { h1 { margin-bottom: 30px; } p.price { color: #ff0000; margin-bottom: 30px; } .sku_wrapper { margin-bottom: 30px; display: block; } .cart { .qty { float: left; margin-right: 10px; line-height: 32px; font-size: 20px; } .input-text { font-size: 20px; padding: 0px; line-height: 27px; } } .file { margin-bottom: 30px; img { width: 64px; margin-right: 15px; } } } #search-box { .input-group-addon { top: 0px; border: 0; background: 0 0; font-size: 22px; } .input-group-btn { button { text-transform: uppercase; padding-left: 10px; padding-right: 10px; border-radius: 0; color: #fff; background-color: #60bd5a; } } } section { background-color: #EFF6FF; &>div.container { background-color: #fff; padding-top: 20px; padding-bottom: 100px; } #slider { margin-bottom: 35px; .slides { padding-right: 0px; &>div { border: 1px solid #cedeee; border-right: 0; } } .list { padding-left: 0px; ul { width: 100%; list-style: none; padding-left: 0px; li { height: 76px; border-color: rgb(213, 223, 238); border-width: 1px; border-style: solid; border-bottom-width: 0; background-color: #f0f6ff; .title { color: #CB1E17; font-size: 16px; font-weight: 700; line-height: 19px; margin-bottom: 5px; } .text { color: #CB1E17; font-size: 12px; font-weight: 700; line-height: 14px; } &:last-of-type { border-bottom-width: 1px; } &.active { background-color: #CB1E17; border-color: #CB1E17; .title { color: white; } .text { color: #2ef38a; } } a { padding: 20px; display: block; } } } } .slide { height: 380px; background-size: cover; display: none; &.active { display: block; } } } .brands { display: table; width: 100%; border: 1px solid #cedeee; margin-bottom: 35px; padding-left: 0; li { display: table-cell; text-align: center; vertical-align: middle; img { display: inline-block; } } } .new-arrivals { .header { margin-left: 0px; margin-right: 0px; border-bottom: #cedeee 1px solid; .label { padding-left: 0px; text-align: left; label { color: #CB1E17; font-size: 26px; font-weight: 700; line-height: 26px; margin-bottom: 0px; text-transform: uppercase; } } .tabs { padding-right: 0px; } .nav-tabs { border-bottom-width: 0px; white-space: nowrap; overflow: hidden; text-align: right; &>li { display: inline-block; float: none; line-height: 34px; a { margin-right: 0px; border-radius: 0; color: #CB1E17; font-size: 13px; font-weight: 400; line-height: 15px; text-transform: uppercase; display: inline; &:hover, &:focus { border-bottom-width: 0px; background-color: #fff; } } &.active { border-top: 3px solid #CB1E17; margin-bottom: -3px; a { border-top: 0; font-weight: 700; padding-top: 8px; line-height: 16px; } } } } .buttons { text-align: right; padding-right: 0px; div { padding-left: 5px; padding-right: 5px; border: 1px solid #cedeee; } .left { margin-right: 3px; display: inline-block; } .right { display: inline-block; } span { line-height: 30px; font-size: 12px; } } } .body { .product-row { white-space: nowrap; overflow: auto; padding-top: 15px; .card { width: 210px; margin-right: 20px; display: inline-block; white-space: normal; padding: 15px; padding-bottom: 0px; border: 1px solid #cedeee; .img-wrapper { width: 100%; text-align: center; height: 145px; img { height: 100%; margin-left: auto; margin-right: auto; } } .title { color: #CB1E17; font-size: 15px; font-weight: 700; line-height: 18px; margin-bottom: 7px; } .price { color: #4abb5b; font-size: 15px; font-weight: 700; line-height: 18px; margin-bottom: 7px; min-height: 36px; } .description { color: #567aa9; font-size: 13px; font-weight: 400; line-height: 18px; margin-bottom: 9px; } .button { margin-left: -15px; margin-right: -15px; width: 208px; background-color: #CB1E17; color: white; font-size: 15px; font-weight: 900; line-height: 44px; text-transform: uppercase; text-align: center; display: block; } } } } } h2 { color: #CB1E17; font-size: 26px; font-weight: 700; line-height: 30px; width: 100%; border-bottom: 1px solid #cedeee; text-transform: uppercase; } .categories { .card { border: 1px solid #cedeee; padding-top: 20px; margin-bottom: 15px; .title { padding-left: 15px; padding-right: 15px; width: 100%; height: 60px; color: #CB1E17; font-size: 16px; font-weight: 700; line-height: 19px; } .image { height: 180px; width: 100%; background-repeat: no-repeat; background-size: cover; background-position: top center; } } } .description { p { color: #567aa9; font-size: 13px; font-weight: 400; line-height: 18px; } } } footer { background-color: #CB1E17; padding-top: 30px; padding-bottom: 30px; h3 { margin-top: 0px; margin-bottom: 10px; color: white; font-size: 15px; font-weight: 700; line-height: 18px; text-transform: uppercase; } ul { padding-left: 0px; list-style-type: none; li { font-size: 13px; font-weight: 400; line-height: 15px; margin-bottom: 15px; a, a:hover, a:focus { color: white; } } } P { color: #fff; a, a:hover, a:focus { color: #fff; } } } @media(max-width:1199px) { header { #search-box { right: 41px; } .search { padding-right: 15px; } .menu .navbar-nav>li { &>a, &>a:hover, &>a:focus { padding-left: 20px; padding-right: 20px; } } } } @media(max-width:991px) { header { .up { padding-left: 0px; .delivery { margin-left: 10px; } .up-menu { margin-right: 0px; .navbar-nav>li { a { padding-left: 5px; padding-right: 5px; } } } } .logo { margin-left: 0px; } .down { .descriptor { font-size: 13px; } .cart { .text { font-size: 10px; padding: 4px 10px; } .icon { padding: 7px 10px; font-size: 16px; } } } .menu { .navbar-nav { padding-left: 0px; padding-right: 0px; &>li { &>a, &>a:focus, &>a:hover { font-size: 17px; padding-left: 13px; padding-right: 13px; } } } } .search { padding-right: 0px; } #search-box { width: 75%; } } section { #slider { .list { ul { li { a { padding-left: 10px; padding-right: 10px; } .title { font-size: 13px; } .text { font-size: 11px; } } } } } .brands { padding-left: 0px; li { vertical-align: middle; padding-left: 5px; padding-right: 5px; } } .categories { .col-sm-2 { padding-left: 5px; padding-right: 5px; } } } } @media(max-width:767px) { header { .navbar-toggle { margin-right: 0px; margin-top: 0px; margin-bottom: 0px; span { font-size: 30px; color: #fff; } } .col-xs-4 { padding-right: 0px; } .up { .up-menu { display: none; } .phone { margin-bottom: 10px; } .delivery { margin-left: 0px; } } .down { padding-left: 0px; .cart-wrapper { margin-bottom: 20px; } } #search-box { display: block; } .search span { display: none; } .menu { height: 59px; .navbar-nav { margin-top: -8px; width: 100%; margin-left: 0px; margin-right: 0px; top: 0px; background-color: #CB1E17; &>li { width: 100%; height: auto; line-height: 50px; a { width: 100%; font-weight: 700; &.open { font-weight: 700; } } .dropdown-menu { td{ display: flex; padding: 5px 25px; } ul li { a { color: #fff; } &.title { color: #fff; } } } div.line { display: none; } } } } } section { #slider { .slides { padding-right: 15px; } .list { padding-left: 15px; ul li { height: auto; a { padding-top: 5px; padding-bottom: 5px; } } } } .brands { li { width: 50%; display: inline-block; text-align: center; margin-bottom: 10px; img { margin-left: auto; margin-right: auto; } } } } .new-arrivals { .header { .nav-tabs>li a { padding-left: 5px; padding-right: 5px; } .tabs { padding-left: 0px; .buttons { display: none; } } } } footer { &>div>div { margin-bottom: 20px; } } } @media(max-width:374px) { header { .down .cart-wrapper { margin-left: -50px; } .menu .navbar-nav>li .dropdown-menu td { padding-left: 5px; padding-right: 5px; } } section .new-arrivals { .label { margin-bottom: 20px; } .header .nav-tabs>li { margin-bottom: 0px; &.active { border: 0px; border-color: #CB1E17; border-width: 1px; margin-bottom: 0px; a { padding-top: 10px; border-top: 1px #CB1E17 solid; border-bottom: 1px #CB1E17 solid; line-height: 15px; } } a { font-size: 13px; border: 1px solid #5b82a5; margin-right: 10px; margin-bottom: 10px; } } } } .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { width: 30%!important; } .variations { label{ color: #000; font-size: 14px; } } .goback{ text-decoration: underline; color: #2D5383; cursor: pointer; font-size: 15px; text-transform: uppercase !important; font-weight: bold; } .product.has-default-attributes.has-children>.images{ opacity:1!important; } .copyright{ text-align: center; color: rgba(255, 255, 255, 0.84); padding-top: 15px; margin-bottom:-15px; margin-top: 15px; border-top: 1px solid #37649e }