@fluidGridColumnWidth: 6.382978723%; @fluidGridGutterWidth: 2.127659574%; @radius-standard: 1.5em; @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800&subset=latin-ext); /* Colors */ .blue {color: #1c5aa7; } @blue: #1c5aa7; @blue-dark: #113765; @blue-azure: #27a8df; @orange: #ff7925; @orange-dark: #e55820; @dark: #000000; @grey-light: #f6f6f6; @grey: #d5dbe5; @grey-soft: darken(@grey-light, 5%); @grey-dark: #333333; @boxcolor-blue-light: #d9f4ff; @boxcolor-blue-dark: #00b7ff; @boxcolor-orange-light: #fff0d9; @boxcolor-orange-dark: #ffa800; @boxcolor-green-light: #e6ffd9; @boxcolor-green-dark: #3ebf00; .top_header { padding-top: 0; } /*font-size*/ .font-size-xs { font-size: 0.75em } /*font-size*/ .font-size-xs { font-size: 0.8em; } .font-size-1 { font-size: 1em; } .font-size-2 { font-size: 1.3em; } .font-size-3 { font-size: 1.66em; } .font-size-4 { font-size: 2.75em; } .font-style-standard { font-family: 'Open Sans', sans-serif; font-weight: 400; color: @blue; } .font-style-paragraph { font-family: 'Open Sans', sans-serif; color: @grey-dark; font-weight: 400; .font-size-1; margin-bottom: 1.3em; } .border-radius { border-radius: @radius-standard 0px @radius-standard 0px; -moz-border-radius: @radius-standard 0px @radius-standard 0px; -webkit-border-radius: @radius-standard 0px @radius-standard 0px; } body { font-size: 21px; .font-style-standard; padding-bottom: 0; padding-top: 5.5em; width: 100%; } .semi-bold { font-weight: 700; } .font-bold { font-weight: 800; } .font-light { font-weight: 400; } .font-thin { font-weight: 300; } .no-border { border: 0; img { border: 0 !important; } } h1 { .font-style-standard; .font-size-4; .font-thin; margin: 0.7em 0 0.6em; line-height: 1.2; width: 100%; text-align: center; } h2 { .font-style-standard; .font-size-4; .font-thin; text-align: center; margin: 1.18em 0 0.5em; line-height: 1.2; } h3 { .font-style-standard; .font-size-3; .font-thin; margin: 1.5em 0 0.5em; line-height: 1.2; width: 100%; } h4 { .font-style-standard; .font-size-2; margin: 0 0 0.5em; line-height: 1.2; } h4.title { color: @orange; text-align: left; .semi-bold; } p, li, td, th { .font-style-paragraph; } li { margin-bottom: 0.5em; list-style-image: none !important; } ul { margin-bottom: 0.6em; li { list-style-image: url('../img/dott.svg'); margin-bottom: 0; } } a { color: @blue-azure; } a[name] { margin-top: -3.6em; float: left; width: 100%; } a:hover { text-decoration: none; } img { &.ico { margin-top: -0.3em; } } p strong { .semi-bold; } .navbar { border-bottom: 3px solid @blue; background-color: white; .navbar-header { float: right; height: 5.5em; button { width: 3.5em; height: 3.5em; background-image: url('../img/ico-menu-close.svg'); border-radius: 0; background-size: 3.5em; background-repeat: no-repeat; background-position: center; margin: 1em 0 0 1em; padding: 0; float: left; &.collapsed { background-image: url('../img/ico-menu.svg'); } } .navbar-brand { padding: 0 0 0 0; img { height: 5em; float: right; } } } #navbar { padding: 1.35em 0 1em 0; float: left; .nav-pills { li { margin: 0; background-image: url('../images/menu-separator.png'); background-repeat: no-repeat; background-position: right center; a { font-size: 1.18em; color: @blue; border-radius: 0px; border-right: 1px solid #d5dbe5; &:hover { background-color: @grey-light; color: @blue; } &:active { background-color: @grey-light; color: @blue; } &:focus { background-color: @grey-light; } } &:last-child { background-image: none; a { border: none; } } } } } } .sidebar-right1 { padding-top: 0 !important; } .main-footer-top { border: 0 !important; } .basket-container { position: fixed; width: 100%; z-index: 1000; #window-basket-add { width: 16em; background-color: @orange; padding: 0.5em 1em; float: right; margin-top: -9em; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); p { color: white; a { color: white; span { text-decoration: underline; } } } #basket-count { .font-bold; font-size: 3em; padding: 0 0.2em 0 0; margin: 0; width: 45%; float: left; text-align: right; } #basket-statement { .semi-bold; font-size: 1em; padding: 0; margin: 0; width: 55%; float: left; } #basket-link { background-image: url('../img/basket-ico.png'); background-size: 2.1em; background-position: 2.3em; background-repeat: no-repeat; width: 100%; float: left; margin: 0; padding: 0.5em 0 0.5em 5em; } } } .slider-container { background-color: @grey-light; /*background-color: #b04244;*/ padding: 0 0 19px 0; margin-bottom: 20px; background-image: url('../images/slider-bg.gif'); background-repeat: repeat-x; background-position: bottom; .cycloneslider-template-standard { .cycloneslider-pager { display: none; } .cycloneslider-slide { background-color: transparent; } margin: auto; .cycloneslider-slide-image { img { float: right; width: 100%; padding-left: 352px; } } .cycloneslider-caption { /*background-color: @grey-light;*/ background-color: transparent; background-image: url('../images/slider-trampolina-logo.png'); background-repeat: no-repeat; background-position: top center; /*background-size: 75%;*/ background-size: 100%; width: 352px; top: 0; opacity: 1; .cycloneslider-caption-title { color: white; /*display: none;*/ height:5em; width: 5em; color: #fb0000; font-size: 1.8em; text-align: center; margin: 3.5em auto 0.3em auto; padding: 2em 0 0 0; /*padding: 0.5em 0 0 0;*/ background-color: @orange; line-height: 100%; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; big { font-weight: bold; color: white; font-size: 2em; } small { padding-top: 0.13em; line-height: 90%; font-size: 0.8em; } } .cycloneslider-caption-description { color: @orange; /*color: white;*/ .font-size-3; text-align: center; padding: 1.8em 0 0.7em 0; margin-top: -1.8em; strong { display: block; line-height: 105%; font-size: 1em; } small { display: block; /*color: @grey-dark;*/ color: white; font-size: 0.5em; } } a.button { font-size: 0.6em; .border-radius; width: auto; padding: 1.1em 0.8em; margin-bottom: 0.4em; text-transform: uppercase; .semi-bold; /*background-color: @orange;*/ background-color: transparent; border: none; color: white; &:hover { /*background-color: @orange-dark;*/ background-color: #3758b1; } } } } } .advantages-list { margin: 0; padding: 0; list-style-type: none; li { list-style-image: none; color: @orange; border-right: 1px solid @orange; width: 20%; height: 5em; float: left; text-align: center; .font-size-2; list-style-type: none; margin: 0; padding: 0 0.5em; strong { /*.font-size-2;*/ font-size: 1.5em; } } li:last-child { border-right: 0; } } .box-link-category { display: block; background-color: @boxcolor-blue-light; height: 10.1em; margin-bottom: 1em; border: 2px solid @boxcolor-blue-dark; .border-radius; text-align: center; font-weight: bold; padding-top: 6.5em; background-repeat: no-repeat; background-position: center 0.4em; } .wrap-link-category:nth-child(1) .box-link-category { background-image: url('../images/box-cat-6-lat.png'); } .wrap-link-category:nth-child(2) .box-link-category { background-image: url('../images/box-cat-5-lat.png'); } .wrap-link-category:nth-child(3) .box-link-category { background-image: url('../images/box-cat-4-lat.png'); } .wrap-link-category:nth-child(4) .box-link-category { background-image: url('../images/box-cat-3-lat.png'); } .wrap-link-category:nth-child(1) .box-link-category:hover, .wrap-link-category:nth-child(2) .box-link-category:hover, .wrap-link-category:nth-child(3) .box-link-category:hover,.wrap-link-category:nth-child(4) .box-link-category:hover { color: #0096ff; border-color: #0096ff; } .wrap-link-category:nth-child(5) .box-link-category { background-image: url('../images/box-cat-czyt.png'); border-color: @boxcolor-orange-dark; background-color: @boxcolor-orange-light; color: @boxcolor-orange-dark; } .wrap-link-category:nth-child(6) .box-link-category { background-image: url('../images/box-cat-graf.png'); border-color: @boxcolor-orange-dark; background-color: @boxcolor-orange-light; color: @boxcolor-orange-dark; } .wrap-link-category:nth-child(7) .box-link-category { background-image: url('../images/box-cat-tworcze.png'); border-color: @boxcolor-orange-dark; background-color: @boxcolor-orange-light; color: @boxcolor-orange-dark; } .wrap-link-category:nth-child(8) .box-link-category { background-image: url('../images/box-cat-mowa.png'); border-color: @boxcolor-orange-dark; background-color: @boxcolor-orange-light; color: @boxcolor-orange-dark; } .wrap-link-category:nth-child(9) .box-link-category { background-image: url('../images/box-cat-emocje.png'); border-color: @boxcolor-orange-dark; background-color: @boxcolor-orange-light; color: @boxcolor-orange-dark; } .wrap-link-category:nth-child(10) .box-link-category { background-image: url('../images/box-cat-matem.png'); border-color: @boxcolor-orange-dark; background-color: @boxcolor-orange-light; color: @boxcolor-orange-dark; } .wrap-link-category:nth-child(5) .box-link-category:hover, .wrap-link-category:nth-child(6) .box-link-category:hover, .wrap-link-category:nth-child(7) .box-link-category:hover, .wrap-link-category:nth-child(8) .box-link-category:hover, .wrap-link-category:nth-child(9) .box-link-category:hover, .wrap-link-category:nth-child(10) .box-link-category:hover { color: #ff8800; border-color: #ff8800; } .wrap-link-category:nth-child(11) .box-link-category { background-image: url('../images/box-cat-zestawy.png'); border-color: @boxcolor-green-dark; background-color: @boxcolor-green-light; color: @boxcolor-green-dark; } .wrap-link-category:nth-child(11) .box-link-category:hover { color: #2a8400; border-color: #2a8400; } .nav-tabs.category-tabs { border-bottom: 2px solid @orange; .font-style-standard; .font-size-2; li { margin-bottom: -2px; a { color: @orange; border-radius: @radius-standard 0px 0px 0px; -moz-border-radius: @radius-standard 0px 0px 0px; -webkit-border-radius: @radius-standard 0px 0px 0px; padding: 1.1em 1.8em; border: 2px solid transparent; border-bottom-color: @orange; } &.active { a { border: 2px solid @orange; border-color: @orange; border-bottom-color: white; &:hover { border-bottom-color: white; } } } &.open { a:focus { border-color: #eeeeee !important; } ul.dropdown-menu { border: 0; padding: 0; width: 100%; li { a { border: 0; color: @grey-dark; border-radius: 0px; white-space: normal; &:hover { color: @orange; } } } } } &.open.active { a:focus { border-color: @orange !important; border-bottom-color: white !important; } } } } ul.products { .btn-default { } .dropdown-menu { width: 100%; } .btn-group { border-radius: 0px; width: 100%; margin-bottom: 1em; margin-top: 1em; button { border-radius: 0px; width: 100%; } ul.dropdown-menu { li { padding: 0.5em; } } } } .btn-products-add { .font-size-2; .border-radius; width: 100%; padding: 1em; text-transform: uppercase; .semi-bold; background-color: @orange; border: none; color: white; &:hover { background-color: @orange-dark; } } .woocommerce { .woocommerce-ordering { display: none; } ul.products { li.product { width: 100%; &:hover { box-shadow: none; } .left-col { width: 18%; float: left; p { width: 100%; text-align: center; padding-top: 0.5em; } } .center-col { width: 65%; float: left; padding-right: 1em; li { list-style-type: disc; } ul { margin-left: 1.4em; } } .right-col { width: 17%; float: right; } strong { display: inline; } .btn-products-add { width: 100%; } .price { color: @orange; font-size: 3em; margin-bottom: 0.3em; .semi-bold; line-height: 0.9em; .regular-price { color: #b7b6b6; font-size: 0.6em; text-decoration: line-through; font-weight: normal; } } } p, ul { font-size: 0.8em; padding: 0px; margin-bottom: 0.6em; text-align: left; } } } .checkbox label:after, .radio label:after { content: ''; display: table; clear: both; } .checkbox .cr, .radio .cr { position: relative; display: inline-block; border: 1px solid #a9a9a9; border-radius: .25em; width: 1.3em; height: 1.3em; float: left; margin-right: .5em; } .radio .cr { border-radius: 50%; } .checkbox .cr .cr-icon, .radio .cr .cr-icon { position: absolute; font-size: .8em; line-height: 0; top: 50%; left: 20%; } .radio .cr .cr-icon { margin-left: 0.04em; } .checkbox label input[type="checkbox"], .radio label input[type="radio"] { display: none; } .checkbox label input[type="checkbox"] + .cr > .cr-icon, .radio label input[type="radio"] + .cr > .cr-icon { transform: scale(3) rotateZ(-20deg); opacity: 0; transition: all .3s ease-in; } .checkbox label input[type="checkbox"]:checked + .cr > .cr-icon, .radio label input[type="radio"]:checked + .cr > .cr-icon { transform: scale(1) rotateZ(0deg); opacity: 1; } .checkbox label input[type="checkbox"]:disabled + .cr, .radio label input[type="radio"]:disabled + .cr { opacity: .5; } .checkbox-product-list { margin: 0; padding: 0; .checkbox { height: 9em; margin: 0 auto; text-align: center; span { position: absolute; top: 50%; left: 0%; transform: translateY(-50%); } p { width: 55%; left: 7.3em; text-align: left; .font-size-xs; position: absolute; top: 50%; transform: translateY(-50%); } img { width: 4em; height: 4em; position: absolute; top: 50%; left: 12%; transform: translateY(-50%); } label { padding: 0; font-size: 1.5em; } } } #main-contact { border-top: 3px solid @blue; padding-bottom: 0; margin-bottom: 0; background: none; h4 { margin: 0; } .phone { background-image: url('../img/contact-ico-phone.png'); } .bok { background-image: url('../img/contact-ico-bok.png'); } .reprezent { background-image: url('../img/contact-ico-reprezent.png'); } .address { text-align: center; padding-bottom: 1em; .font-size-xs; } .footer { text-align: center; font-size: 0.6em; background-color: @blue-dark; } .cont { background-size: 3.5em; padding: 2em 0; vertical-align: middle; height: 6em; width: 100%; background-repeat: no-repeat; background-position: left center; padding-left: 3.6em; } .title { padding-left: 0; text-align: right; } img { float: left; margin-top: -0.2em; } p { .font-style-standard; .font-size-2; color: @blue; margin: 0; } } #main-footer { padding-bottom: 0; margin-bottom: 0; background: none; background-color: @blue-dark; padding: 0.3em 0; p { .font-style-standard; text-align: center; color: white; font-size: 0.8em; padding: 0.5em 0 0 0; } } /* Large desktops and laptops */ @media (min-width: 1200px) { } /* Landscape tablets and medium desktops */ @media (min-width: 992px) and (max-width: 1199px) { body { font-size: 15px !important; .slider-container { .cycloneslider-template-standard { .cycloneslider-caption { background-size: 13em; .cycloneslider-caption-title { margin-top: 2em; line-height: 110%; } } } } .navbar .navbar-header .navbar-brand img { height: 4.5em; float: right; } .nav-tabs.category-tabs { li { a { padding: 1em 0.9em; } } } #main-contact { .title { margin-top: -0.7em; } } } } /* Portrait tablets and small desktops */ @media (min-width: 768px) and (max-width: 991px) { body { font-size: 14px !important; .navbar .navbar-header .navbar-brand img { height: 4.5em; float: right; } .navbar .navbar-header .navbar-brand img { height: 4.5em; float: right; } .slider-container { .cycloneslider-template-standard { .cycloneslider-slide-image { img { padding-left: 22em; } } .cycloneslider-caption { width: 22em; background-size: 13em; .cycloneslider-caption-title { margin-top: 2.4em; margin-bottom: 0.1em; font-size: 1.6em; } .cycloneslider-caption-description { a.button { font-size: 0.5em; margin-bottom: 0.2em; } } } } } .advantages-list { li { .font-size-1; padding-bottom: 0.8em; } } .checkbox-product-list { .checkbox { p { left: 8em; } } } .nav-tabs.category-tabs { li { ul { a { .font-size-1; } } a { .font-size-xs; padding: 1em 0.8em; } } } .box-link-category { height: 11em; padding-top: 7.5em; } #main-contact { .title { margin-top: 0em; padding: 1.5em 0 1em 0; height: auto; text-align: center; } } } } /* Landscape phones and portrait tablets */ @media (max-width: 767px) { body { font-size: 14px !important; overflow: hidden !important; padding-top: 4.5em; .navbar { #navbar { padding: 0; width: 100%; .nav-pills { li { background-image: none; a { border: 0; } } } } .nav-pills { li { width: 100%; padding-left: 1em; } } .navbar-header { height: 4.5em; margin-right: 0; button { margin-top: 0.5em; margin-left: 0.8em; background-size: 2.7em; } .navbar-brand img { height: 3.6em; float: right; } } } .cycloneslider-template-standard { float: left; .cycloneslider-slides { height: auto !important; position: unset !important; float: left; .cycloneslider-slide { position: unset !important; float: left; img { margin: 0; padding: 0; } .cycloneslider-caption { position: unset; float: left; width: 100%; background-size: 17em; .cycloneslider-caption-title { margin-top: 3em; } .cycloneslider-caption-description { small { display: block; } } } } } } .advantages-list { li { width: 100%; border: 0; height: auto; padding-bottom: 0.8em; } } .navbar-header { width: 100%; .navbar-brand { float: right; } } ul.products.products-sets { .btn-products-add { margin-bottom: 2em; } h4 { font-size: 1.5em; text-align: center; } li { img { width: 75%; } } } .checkbox-product-list { .checkbox { span { left: 1.2em; } img { left: 2.5em; } p { left: 8em; } } } .nav-tabs.category-tabs { padding: 0.8em; border-bottom: none; li { margin-bottom: 0.2em; width: 100%; ul { li { background-color: white; a { .font-size-1; background-color: white; } } } a { border: 0; border-radius: @radius-standard 0px 0px 0px; -moz-border-radius: @radius-standard 0px 0px 0px; -webkit-border-radius: @radius-standard 0px 0px 0px; background-color: #ffe7d9; width: 100%; .font-size-xs; padding: 1em 0.8em; } &.active { a { background-color: #ffc8a6; border: 0; } ul { a { background-color: white; } } } } } .box-link-category { height: auto; padding-top: 7.5em; padding-bottom: 1em; } #main-contact { .title { display: block; text-align: center; width: 100%; padding: 1em 0 3em 0; height: auto; } .cont { display: block; padding-left: 0; padding-bottom: 1em; background-position: top center; text-align: center; p { padding-top: 2em; .font-size-1; } } } } .woocommerce ul.products { padding: 0.8em; li.product { .left-col { width: 24%; } .center-col { width: 50%; } .right-col { width: 24%; } } } } /* Portrait phones and smaller */ @media (max-width: 480px) { body { font-size: 14px !important; .advantages-list { li { width: 100%; border: 0; height: auto; padding-bottom: 0.8em; } } ul.products { li { img { width: 75%; } } } .navbar-header { height: 4.5em; margin-right: 0; button { margin-top: 0.5em; margin-left: 0.8em; background-size: 2.7em; } .navbar-brand img { height: 3.6em; float: right; } } .box-link-category { height: auto; padding-top: 7.5em; padding-bottom: 1em; } #main-contact { .cont { p { .font-size-xs; } } } } .woocommerce ul.products li.product { .left-col { width: 100%; padding: 0 1em 1em 1em; } .center-col { width: 100%; } .right-col { width: 100%; } } }