citywebshop_cms/static/css/960w.less

// 960w

@media screen and (max-width: 980px) {

// top

#detailer {
    display: block;
    position: fixed;
    bottom: 20px;
    width: 95%;
    z-index: 999;
}

.sy-box.sy-loading { margin-top: 150px; }

.prod > .left > .prod-main-pic {
    max-height: 200px;
    min-height: 200px;
}

.prod > .left > .prod-main-pic > a,
.prod > .left > .prod-main-pic > a > img {
    width: 100%;
    max-height: 200px;
    height: auto;
    display: block;
}

#showmebigone {
    height: 200px;
    min-height: 200px;
    max-height: 200px;
}

.nav-mobile,
.search-mobile,
.login-mobile,
.cart-mobile {
    display: block;
    position: absolute;
    width: 45px;
    height: 45px;
    color: @mobile-nav-color;
    background: @mobile-nav-bg;
    font-size: 20px;
    text-align: center;
    padding: 8px 0 0 0;
    z-index: 9999;
}

#mobile-nav {
    z-index: 999;
}

.nav-mobile {
    top: 0;
    left: 0;
    border-right: 1px solid @mobile-nav-border-color;
}

.search-mobile {
    top: 0;
    left: 45px;
    border-right: 1px solid @mobile-nav-border-color;
}

.login-mobile {
    top: 0;
    right: 45px;
    border-left: 1px solid @mobile-nav-border-color;
}

.cart-mobile {
    top: 0;
    right: 0;
    border-left: 1px solid @mobile-nav-border-color;
}

.dd-nav .nav-mobile,
.dd-search .search-mobile,
.dd-login .login-mobile,
.dd-cart .cart-mobile {
    color: @mobile-nav-color-hover;
    background: @mobile-nav-bg-hover;
}



.top {
    height: 45px;
}

.top-links {
    display: block;
    height: 0;
    border: none;
}

.top-links a {
}

.top-links a:hover {
}

.top-links a > i {
}

.top-links > .inner {
    width: 100%;
}

.top-links .c-service {
    display: none;
}

.top-links .c-service > a {
}

.top-links .links {
    display: none;
    margin-top: 48px;
    margin-left: -90px;
}

.top-links .links > ul {
}

.top-links .links > ul li {
}

.top-links .links > ul li:before {
}

.top-links .links > ul li:first-child:before {
    content:"";
    display: none;
}

.top-links .links > ul li > a {
    font-size: 11px;
    display: inline-block;
    margin: 7px 0 0 0;
    vertical-align: middle;
}

.login-reg {
    height: 0;
}

.login-reg-btn {
    display: none;
    border: none;
}

.login-reg-btn {
    display: none;
}

.login-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 45px;
    background: @top-links-border-bottom;
    width: 100%;
    padding: 0 15px 15px 15px;
    color: @login-dropdown-font-color;
    z-index: 9999;
}

.dd-login .login-dropdown {
    display: block;
}

// top-middle - logo, searc, cart
.top-middle {
    background: @top-middle-bg;
    height: 0;
    position: relative;
    border: none;
}

.top-middle > .inner {
    width: 100%;
    position: relative;
}

.logo {
    display: block;
    border: none;
    width: 130px;
    height: 20px;
    background: url('../img/logo_web.png') center no-repeat;
    background-size: contain;
    float: none;
    margin: 13px auto 0 auto;
    position: absolute;
    left: 0;
    right: 0;
}

.search {
    display: none;
    width: 100%;
    height: 70px;
    overflow: hidden;
    position: absolute;
    top: 45px;
    margin: 0 auto;
    background: @top-links-border-bottom;
    padding: 15px;
}

.dd-search .search {
    display: block;
}

.search-btn {
    right: 15px;
    top: 15px;
}

#sbtnmobile {
    right: 5px;
    top: 5px;
}

#detailed_search {
    position: fixed;
    width: 300px;
}

.cart {
    display: none;
    padding: 15px;
    position: absolute;
    top: 45px;
    width: 100%;
    float: none;
    text-align: center;
    margin: 0 0 0 0;
    background: @top-links-border-bottom;
}

.dd-cart .cart {
    display: block;
}

.cart > .desc {
    float: none;
}

.cart:hover > .desc {
    text-decoration: underline;
}

.cart:hover {
    text-decoration: none;
}

input[type="checkbox"] + label {
    font-size: 0.8rem;
}

// main nav
.nav {
    display: none;
    width: 100%;
    height: auto !important;
    border:none;
    position: absolute;
    top: 45px;
    background: @top-links-border-bottom;
}

.dd-nav .nav {
    display: block;
}

.nav > .inner {
    width: 100%;
    height: auto !important;
}

.nav > .inner > ul {
    display:block;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    width:100%;
    height: auto !importnat;
}

.nav > .inner > ul li {
    box-sizing: border-box;
    height: 38px;
   -ms-flex:1 1 auto;
    -webkit-box-flex:1;
    -webkit-flex:1 1 auto;
    flex:1 1 auto;
    position:relative;
    border-bottom: 1px solid @top-bg;
    background: @top-links-border-bottom;
}

.nav > .inner > ul li:last-child {
    border-right: none;
}

.nav > .inner > ul li > a {
    
}

.nav > .inner > ul li > a:hover {
    color: @nav-hover-color;
    text-decoration: none;
}








// main
.main {
    padding-top: 65px;
}





// footer
.footer {
}

.footer > .social {
    height: 45px;
}

.footer > .social > .inner {
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.footer > .social > .inner > a {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin: 0 3px;
    text-align: center;
}

.footer > .social > .inner > a:hover {
     color: @top-links-link-color-hover;
    background: none;
}

.footer > .social > .inner > a > i {
    font-size: 14px;
    padding: 15px 0 0 0;
}

.copyright {
    padding: 15px;
    font-size: 11px;
    border-top: none;
}

.bottom-boxes {
    background: @copyright-bg;
    color: @top-links-link-color;
}

.bottom-boxes > .inner {
    width: 100%;
    margin: 0 auto;
    display: block;
}

.bottom-boxes > .inner > .box {
    width: 100%;
    display: block;
    border-top: none;
    padding: 0 0;
}

.bottom-boxes > .inner > .last {
    border: none;
}

.bottom-boxes > .inner > .box > .footer-title {
    font-size: 16px;
    color: @bottom-box-title;
    font-family: 'geomanist_regularregular';
    text-transform: uppercase;
    margin: 0 0 0 0;
    height: 45px;
    padding: 13px 15px 0 15px;
    border-bottom: 1px solid @top-links-border-bottom;
    float: none;
    .user-select(none);
    cursor: pointer;
}

.bottom-boxes > .inner > .box > .footer-title > i {
    display: block;
    float: right;
    font-size: 12px;
    position: relative;
    top: 3px;
}

.bottom-boxes > .inner > .dd-footer  > .footer-title {
    border: none;
}

.bottom-boxes > .inner > .dd-footer > .footer-title > i {
    .rotation(180deg);
}

.bottom-boxes > .inner > .box > .footer-dropdown {
    display: none;
}

.bottom-boxes > .inner > .dd-footer > .footer-dropdown {
    display: block;
    padding: 0 15px 15px 15px;
    border-bottom: 1px solid @top-links-border-bottom;
}


.bottom-boxes > .inner > .box > ul {
    list-style: none;
    font-size: 12px;
}

.bottom-boxes > .inner > .box > ul li {
    display: block;
    padding: 0 0 1px 13px;
    position: relative;
}

.bottom-boxes > .inner > .box > ul li:before {
    display: inline-block;
    content: "\f111";
    font-size: 5px;
    font-family: 'FontAwesome';
    color: @top-links-link-color;
    padding: 0 10px 0 0;
    position: absolute;
    top: 9px;
    left: 0px;
}

.bottom-boxes > .inner > .box > ul li a,
.bottom-boxes > .inner > .box > p > a {
    color: @bottom-box-color;
    font-size: 12px;
}

.bottom-boxes > .inner > .box > ul li a:hover,
.bottom-boxes > .inner > .box > p > a:hover {
    color: @bottom-box-color-hover;
}

.bottom-boxes > .inner > .box > p {
    font-size: 12px;
    margin: 0 0 10px 0;
}

.bottom-boxes > .inner > .box > p > strong {
    color: @bottom-box-title;
}

.bottom-boxes > .inner > .box .input-container {
    position: relative;
    height: 36px;
    overflow: hidden;
}

.bottom-boxes > .inner > .box .txt {
    margin: 0 0 10px 0;
}

.bottom-boxes > .inner > .box .search-btn {
    width: 36px;
    height: 36px;
    background: @button-2-color url('../img/newsletter-btn-bg.png') no-repeat center;
    top: 0;
    right: 0;
}

//main

.wrap {
    width: 100%;
    padding: 0 15px;
}

//prod-categories
.prod-categories {
    background: @prod-categories-bg;
    width: 100%;
    padding: 0 0 0 0;
}

.cat,
.cat:hover {
    float: left;
    padding: 0 15px;
    width: 50%;
    display: block;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    margin: 0 0 30px 0;
}

.cat > .img-container {
    position: relative;
    border: 1px solid @img-count-border-color;
    cursor: pointer;
}

.cat > .img-container > img {
    width: 100%;
    height: auto;
    display: block;
}

.prod-count {
    display: none;
}

.cat:hover > .img-container > .prod-count {
    display: none;
}

.cat > .title {
    height: 36px;
    background: @prod-cat-title-bg;
    color: @prod-cat-title-color;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 0 0 0;
    overflow: hidden;
}

.cat:hover > .title {
    background: @prod-cat-title-bg-hover;
    color: @prod-cat-title-color-hover;
}

.cat > .title > i {
    padding: 0 5px 0 0;
}

h2 {
    font-size: 19px;
    padding: 5px 15px 0 15px;
    background: @heading-mobile-bg;
    width: 100%;
    box-sizing: border-box;
    height: 36px;
}

h2 > .more {
    right: 0;
    bottom: 0;
    height: 35px;
    width: 35px;
    display: block;
    text-align: center;
    background: @heading-more-mobile-bg;
    font-size: 20px;
    padding: 5px 0 0 0;
    box-sizing: border-box;
}

h2 > .more > span {
    display: none;
}





// category-list-1
.category-list-1 {
    margin: 0 0 20px 0;
}

.category-list-1 > .left,
.static-1 > .left {
    margin:  0 0 20px 0;
    width: 100%;
    padding: 0;
}

.category-list-1 > .right,
.static-1 > .right {
    margin: 0;
    width: 100%;
    padding: 0;
}

.cat-banner {
    margin: 0 0 20px 0;
    width: 100%;
    padding: 0;
}

.category-list-1 > .right > h1 {
    font-size: 20px;
    padding: 0 ;
}

.category-list-1 > .right > .category-desc {
    padding: 0;
}

.sort {
    margin: 0px;
    margin-bottom: 15px;
}

.view {
    display: none;
}

//prod-list-1
.product-list-1 {
    padding: 10px  0;
}

.product {
    display: table;
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
    width: 100%;
    text-align: center;
    float: none;
    box-sizing: border-box;
    border-bottom: 1px solid @prod-img-border;
}

.product:hover {
    text-decoration: none;
}

.product > .img-container {
    display: table-cell;
    width: 120px;
    position: relative;
    border: 1px solid @prod-img-border;
    margin: 0;
    vertical-align: top;
}

.product > .big-container {
    min-height: auto;
    height: auto;
}

.product > .small-container {
    min-height: auto;
    height: auto;
}

.product > .prod-desc {
    display: table-cell;
    text-align: left;
    padding: 0 15px;
    vertical-align: middle;
}

.product > .prod-desc > .name {
    height: auto;
}

.product > i {
    display: block;
    position: absolute;
    right: 0;
    top: 50px;
    font-size: 18px;
    color: @prod-img-border;
}

.quick-view,
.product > .img-container:hover > .quick-view {
    display: none;
}

// category list 2

.large > .desc {
    display: none;
}

// reg-login
.reg-form {
}

.reg-form > .left {
    width: 100%;
    padding: 0 0 0 0;
}

.reg-form > .right {
    width: 100%;
    padding: 0 0 0 0;
}

//login-reg split

.login-reg-split > .left {
    padding: 0;
}

.login-reg-split > .right {
    padding: 0;
}

//mian page prod sugg list
.prod-suggest {
    width: 100%;
}

.prod-suggest > .product-list {
    width: 100%;
    height: auto;
    padding: 0 15px;
}

.prod-suggest > .product-list > .product {
    width: 100%;
}

.prod-suggest > .left-arrow {
    display: none;
}

.prod-suggest > .right-arrow {
    display: none;
}


// cat suggest
.cat-suggest {
    width: 100%;
    margin: 0 auto 30px auto;
}

.cat-item {
    width: 50%;
    padding: 0 15px;
    float: left;
    margin: 0 0 20px 0;
}

.cat-item > table,
.cat-item > table tr td {
    border-collapse: collapse;
    border: 1px solid @prod-img-border;
}

.td-large {
    width: 280px;
    height:280px;
}

.td-small {
    width: 99px;
    height: 99px;
}

// static-2
.static-2 {
    width: 100%;
    margin: 0 auto 30px auto;
}

.static-2 > .content {
    padding: 0;
}

// product
.prod {
    width: 100%;
    margin: 0 auto 30px auto;
}

.prod > .left{
    width: 70%;
    padding: 0 15px;
    float: none;
    margin: 0 auto 20px auto;
}

.main .prod > .right {
    width: 100%;
    padding: 0 15px;
    float: none;
    text-align: center;
    height: auto;
}

.prod > .left > .prod-main-pic {
    border: 1px solid @prod-img-border;
    position: relative;
}


.tab-container {
    position: static;
    bottom: 0;
    height: 200px;
    width: 100%;
    background: @prod-categories-bg;
    padding: 0 0 20px 0;
    margin: 30px 0 0 0;
}

.tabs {
    height: 36px;
    width: 100%;
}



.prod > .right > h1 {
    display: block;
    font-size: 28px;
    text-transform: uppercase;
    margin: 0 0 5px 0;
    color: @heading-color;
    border-bottom: 1px solid @heading-border-color;
}

.prod > .right > .subtitle {
    font-size: 18px;
    font-family: 'geomanistbook';
    text-transform: uppercase;
    margin: 0 0 15px 0;
}

.prod > .right > .price {
    font-size: 18px;
    font-family: 'geomanistbook';
    text-transform: uppercase;
    margin: 0 0 25px 0;
    color: @prod-price;
}

.prod > .right > .price > .old-price {
    padding: 0 15px 0 0;
    color: @prod-price-old;
    text-decoration: line-through;
}

.prod > .right > .option-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.prod > .right > .select-style {
    border: 2px solid #b7c0c7;
    float: none;
    padding: 2px 15px 0 15px;
    width: 100%;
    margin: 0 0 25px 0;
}

.prod > .right > .select-style > select {
    font-size: 16px;
    font-family: 'geomanistbook';
    color: #909ba4;
}

.prod > .right > .select-style:after {
    position: absolute;
    content: "\f0d7";
    right: 10px;
    top: 10px;
    font-family: 'FontAwesome';
    font-size: 14px;
    color: #909ba4;
}

.add-to-cart {
    display: block;
    width: 100%;
    padding: 11px 0 0 0;
}

.add-to-cart > i {
    padding: 0 10px 0 0;
}

.add-to-cart:hover {
    text-decoration: none;
}






.top {
    position: fixed;
}

.sy-pager {
    display: none;
}

.cart-table {
    width: 600px;
}

.cart-checkout {
    width: 100%;
    overflow-x: auto;
}

#category_select {
    font-size: 12px;
}

.category-label {
    font-size: 10px;
}

.hide-for-mobile {
    display: none;
}

#category_selector {
    margin-left: 0px;
}

.check-select {
    margin-bottom: 10px;
}

#price-slider small {
    margin-left: 40px;
}

#price-slider {
    width: 220px;
}

#keyword-filter {
    margin-left: 0px;
    margin-bottom: 10px;
}

#keyword-filter input {
    width: 210px;
}

#szukites {
    margin-left: 0px;
    margin-bottom: 10px;
}

.filtering {
    padding-bottom: 10px;
}

.product_description {
    height: auto;
    max-height: none;
}

.number-box { width: auto; }
    
.cart-table tr td.cart-trash {padding-bottom: 0px; padding-top: 0px;}

.prod > .left > .prod-main-pic {
    max-height: none;
    min-height: none;
}

.prod > .left > .prod-main-pic > a,
.prod > .left > .prod-main-pic > a > img {
    width: 100%;
    max-height: none;
    height: auto;
    display: block;
}

}


// 768w

@media screen and (max-width: 768px) {

#detailer {
    display: block;
    position: fixed;
    bottom: 20px;
    width: 95%;
    z-index: 999;
}

.sy-box.sy-loading { margin-top: 150px; }

.prod > .left > .prod-main-pic {
    max-height: 200px;
    min-height: 200px;
}

.prod > .left > .prod-main-pic > a,
.prod > .left > .prod-main-pic > a > img {
    width: 100%;
    max-height: 200px;
    height: auto;
    display: block;
}

#showmebigone {
    height: 200px;
    min-height: 200px;
    max-height: 200px;
}


.td-large {
    width: 280px;
    height:auto;
}

.td-small {
    display:none;
    width: 99px;
    height: 99px;
}

.td-large > a,
.td-large > a > img,
.td-small > a,
.td-small > a > img {
    width: 100%;
    height: auto;
    display: block;
}

.top {
    position: fixed;
}

.sy-pager {
    display: none;
}

.cart-table {
    width: 600px;
}

.cart-checkout {
    width: 100%;
    overflow-x: auto;
}

#category_select {
    font-size: 12px;
}

.category-label {
    font-size: 10px;
}

.hide-for-mobile {
    display: none;
}

#category_selector {
    margin-left: 0px;
}

.check-select {
    margin-bottom: 10px;
}

#price-slider small {
    margin-left: 40px;
}

#price-slider {
    width: 220px;
}

#keyword-filter {
    margin-left: 0px;
    margin-bottom: 10px;
}

#keyword-filter input {
    width: 150px;
}

#szukites {
    margin-left: 20px;
    margin-bottom: 10px;
}

.filtering {
    padding-bottom: 10px;
    min-height: 100px;
}

.detailed-search-btn { width: 100%; }

.product_description {
    height: auto;
    max-height: none;
}

.number-box { width: auto; }

.cart-table tr td.cart-trash {padding-bottom: 0px; padding-top: 0px;}

.prod > .left > .prod-main-pic {
    max-height: none;
    min-height: none;
}

.prod > .left > .prod-main-pic > a,
.prod > .left > .prod-main-pic > a > img {
    width: 100%;
    max-height: none;
    height: auto;
    display: block;
}

}



@media screen and (max-width: 690px) {

#detailer {
    display: block;
    position: fixed;
    bottom: 20px;
    width: 95%;
    z-index: 999;
}

.sy-box.sy-loading { margin-top: 50px; }
    
.prod > .left > .prod-main-pic {
    max-height: 200px;
    min-height: 200px;
}

#showmebigone {
    height: 200px;
    min-height: 200px;
    max-height: 200px;
}

.prod > .left > .prod-main-pic > a,
.prod > .left > .prod-main-pic > a > img {
    width: 100%;
    max-height: 200px;
    height: auto;
    display: block;
}
    
.cat-item {
    width: 100%;
}

.td-large {
    width: 280px;
    height: auto;
}

.td-small {
    display:none;
    width: 99px;
    height: 99px;
}

.td-large > a,
.td-large > a > img,
.td-small > a,
.td-small > a > img {
    width: 100%;
    height: auto;
    display: block;
}

.prod > .left{
    width: 100%;
    padding: 0 15px;
    float: none;
    margin: 0 auto 20px auto;
}

.top {
    position: fixed;
}

.sy-pager {
    display: none;
}

.cart-table {
    width: 600px;
}

.cart-checkout {
    width: 100%;
    overflow-x: auto;
}

#category_select {
    font-size: 12px;
    margin-top: 0px;
    width: 100px;
}

#category_select:after {
    margin-top: 10px;
    display: none;
}

.category-label {
    font-size: 10px;
}

.hide-for-mobile {
    display: none;
}


#category_selector {
    margin-left: 0px;
}

.check-select {
    margin-bottom: 10px;
    margin-right: -10px;
    float: right;
}

#price-slider small {
    margin-left: 40px;
}

#price-slider {
    width: 220px;
    margin-left: -50px;
    margin-top: 3px;
}

#keyword-filter {
    width: 100%;
    margin-left: -10px;
    margin-bottom: 10px;
}

#keyword-filter input {
    width: 100%;
    margin-top: 0px;
}

#szukites {
    width: 100%;
    margin-left: -5px;
    margin-bottom: 10px;
}

.filtering {
    padding-bottom: 10px;
    border-bottom: none;
}

.detailed-search-btn { display: block; float: right; width: auto; }

.product_description {
    height: auto;
    max-height: none;
}

.number-box { width: auto; }

.cart-table tr td.cart-trash {padding-bottom: 0px; padding-top: 0px;}

#banner {
    margin-top: 10px;
}

#slideshow {
    margin-bottom: -40px;
}

#categories {
    background-color: white;
}

h2 {
    height: 42px;
    padding-top: 10px;
}

#text-page h2 {
    height: auto;
}

#banner_overlay img {
    display: block; position: absolute; left: 45%;
}

}


// 480w

@media screen and (max-width: 440px) {

#detailer {
    display: block;
    position: fixed;
    bottom: 20px;
    width: 95%;
    z-index: 999;
}

.sy-box.sy-loading { margin-top: 50px; }
    
.prod > .left > .prod-main-pic {
    max-height: 200px;
    min-height: 200px;
}

#showmebigone {
    height: 200px;
    min-height: 200px;
    max-height: 200px;
}

.prod > .left > .prod-main-pic > a,
.prod > .left > .prod-main-pic > a > img {
    width: 100%;
    max-height: 200px;
    height: auto;
    display: block;
}
    
.cat-item {
    width: 100%;
}

.td-large {
    width: 280px;
    height: auto;
}

.td-small {
    display:none;
    width: 99px;
    height: 99px;
}

.td-large > a,
.td-large > a > img,
.td-small > a,
.td-small > a > img {
    width: 100%;
    height: auto;
    display: block;
}

.prod > .left{
    width: 100%;
    padding: 0 15px;
    float: none;
    margin: 0 auto 20px auto;
}

.top {
    position: fixed;
}

.sy-pager {
    display: none;
}

.cart-table {
    width: 600px;
}

.cart-checkout {
    width: 100%;
    overflow-x: auto;
}

#category_select {
    font-size: 12px;
    margin-top: 0px;
    width: 100px;
}

#category_select:after {
    margin-top: 10px;
    display: none;
}

.category-label {
    font-size: 10px;
}

.hide-for-mobile {
    display: none;
}


#category_selector {
    margin-left: 0px;
}

.check-select {
    margin-bottom: 10px;
    margin-right: -10px;
    float: right;
}

#price-slider small {
    margin-left: 40px;
}

#price-slider {
    width: 220px;
    margin-left: -50px;
    margin-top: 3px;
}

#keyword-filter {
    margin-left: -10px;
    margin-bottom: 10px;
}

#keyword-filter input {
    width: 300px;
}

#szukites {
    margin-left: -10px;
    margin-bottom: 10px;
}

.filtering {
    padding-bottom: 10px;
    border-bottom: none;
}

.detailed-search-btn { display: block; float: right; width: auto; }

.product_description {
    height: auto;
    max-height: none;
}

.number-box { width: auto; }

.cart-table tr td.cart-trash {padding-bottom: 0px; padding-top: 0px;}

#banner {
    margin-top: 10px;
}

#slideshow {
    margin-bottom: -40px;
}

#categories {
    background-color: white;
}

h2 {
    height: 42px;
    padding-top: 10px;
}

#text-page h2 {
    height: auto;
}

#banner_overlay img {
    display: block; position: absolute; left: 45%;
}

}

.hide-for-mobile {
    display: none;
}

.check-select-list {
    left: -15px;
}