body {font-family: 'Roboto', sans-serif; font-size: 15px; margin:0; padding:0; background: white; color: #313131;} html, body {height: 100%;} .clear {clear: both;} img {border:none;} .side-menu-wrapper { /* style menu wrapper */overflow: hidden;background: rgba(0,0,0,.95);padding: 40px 0 0 40px;position: fixed; /* Fixed position */top: 0;right: -330px; /* Sidebar initial position. "right" for right positioned menu */height: 100%;z-index: 500;transition: 0.5s; /* CSS transition speed */width: 290px;font-family: 'Roboto Condensed', sans-serif;font-size: 19px;} .side-menu-wrapper > ul{ /* css ul list style */font-family: 'Roboto Condensed', sans-serif; list-style:none;padding:15px 0 0 0;margin:0;overflow-y: auto; /* enable scroll for menu items */width:500px; /* this width will hide scroll bar */height:95%;} .side-menu-wrapper > ul > li > a { /* links */display: block;padding: 9px 4px 9px 4px;color: #ffffff;transition: 0.3s;text-decoration: none; text-transform: uppercase;} .side-menu-wrapper > ul > li > a:hover {color: #009BDE;} .side-menu-wrapper > ul > li.act > a {color: #009BDE;} .side-menu-wrapper > a.menu-close { /* close button */padding: 8px 0 4px 23px;color: #6B6B6B;display: block;margin: -30px 0 -10px -20px;font-size: 35px;text-decoration: none;} .side-menu-overlay { /* overlay */height: 100%;width: 0;position: fixed;z-index: 480;top: 0;left: 0;background-color: rgba(255,255,255,.7);overflow-y: auto;overflow-x: hidden;text-align: center;opacity: 0;transition: opacity 1s;} .side-menu-wrapper ul li ul.submenu {list-style:none; margin: 0 0 0 20px; padding: 0;} .side-menu-wrapper ul li ul.submenu li a {text-decoration: none; color: #C5C5C5; text-transform: uppercase; font-size: 15px;} .side-menu-wrapper ul li ul.submenu li a:hover {color: #009BDE;} .side-menu-wrapper ul li ul.submenu li a.active {color: #009BDE;} #top-menu {width: 100%; height: 150px; transition: height 0.4s ease 0s; background: #ffffff; position:fixed; top:0; left:0; right:0; z-index:460;} #top-menu.scrooled {height: 95px;} #top-menu #logo {position: absolute; display: block; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 258px; height: 118px; margin: 0 auto; transition: all 0.4s ease 0s;} #top-menu #logo a {display: block;} #top-menu #logo.sticky {margin: 0 auto; width: 158px; height: 72px;} #top-menu #logo.sticky a {} #top-menu .left {display: none;} #top-menu .right {display: initial; position: absolute; right: calc(4em + -20px); top: 50%; transform: translateY(-20px);} #top-menu .right a img {width: 37px; margin-top:15px;} #top-menu .right .facebook-link {display: inline-block; width: 33px; height: 33px; margin: 0 20px 0 0; background: url(../img/facebook.png) top center no-repeat;} #top-menu-content {width: 100%; height: 95px; transition: height 0.4s ease 0s; background: #ffffff; position:fixed; top:0; left:0; right:0; z-index:460;} #top-menu-content #logo {position: absolute; display: block; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 158px; height: 72px; margin: 0 auto; transition: all 0.4s ease 0s;} #top-menu-content #logo a {display: block;} #top-menu-content .left {display: none;} #top-menu-content .right {display: initial; position: absolute; right: calc(4em + -20px); top: 50%; transform: translateY(-20px);} #top-menu-content .right a img {width: 34px;} #top-menu-content .right .facebook-link {display: inline-block; width: 33px; height: 33px; margin: 0 20px 0 0; background: url(../img/facebook.png) top center no-repeat;} .swiper-container{width:100%;height:70vh;margin-top: 150px;} .swiper-container .swiper-caption {margin-left:auto; margin-right:auto; position:relative; top:25%; color:#000; font-family: 'Roboto Condensed', sans-serif; text-align: center;} .swiper-container .swiper-caption .title {text-transform: uppercase; font-size: 46px; margin: 60px 0 0 0;} .swiper-container .swiper-caption .title span {color: #009BDE;} .swiper-container .swiper-caption .subtitle {text-transform: uppercase; font-size: 19px; font-weight: bold;} .swiper-container .swiper-caption .btn a {margin: 80px 0 0 0; background-color: transparent; text-decoration: none; display: inline-block; border: 2px solid #000; border-radius: 0; border-width: 2px; font-family: 'Roboto Condensed', sans-serif; font-size: 19px; letter-spacing: 2px; padding: 8px 23px 6px; width: -moz-fit-content; color: #000; text-transform: uppercase; transition: all 0.4s ease 0s;} .swiper-container .swiper-caption .btn a:hover {background-color: #000; border-color: #000; color: #fff;} #home-text {max-width: 960px; height: auto; margin: 0 auto; padding: 40px; text-align: center;} #home-text h1 {margin-top: 0; text-transform: uppercase; font-family: 'Roboto Condensed', sans-serif; color: #009BDE; font-size: 38px; font-weight: normal;} #home-text h2 {font-size: 18px;} #home-text p {font-size: 16px; line-height: 26px;} #home-text .btn {display: inline-block; background-color: black; color: white; transition: all 0.4s ease 0s; border-width: 2px; font-family: 'Roboto Condensed', sans-serif; font-size: 19px; text-decoration: none; letter-spacing: 2px; padding: 10px 25px 10px; width: -moz-fit-content; text-transform: uppercase;} #home-text .btn:hover {background-color: #6D6E71; border-color: #6D6E71;} .home-fashion-collection {width: 98%; margin: 25px auto 25px auto;} .home-fashion-collection .left {width: 50%; height: 50vw; float: left; background: #F5F6F9; overflow: hidden;} .home-fashion-collection .left img {transition: all 0.4s ease 0s; height: 100%; object-fit: cover; width: 100%;} .home-fashion-collection .left img:hover {transform: scale(1.1);} .home-fashion-collection .left .text {padding: 0 60px; position: relative; top: 50%; transform: translateY(-50%); text-align: center;} .home-fashion-collection .left .text h2 {text-transform: uppercase; font-family: 'Roboto Condensed', sans-serif; font-weight: normal; font-size: 38px;} .home-fashion-collection .left .text h2 a {color: #009BDE; text-decoration: none;} .home-fashion-collection .left .text h2.jackets a {color: #af9d7e; text-decoration: none;} .home-fashion-collection .left .text p {font-size: 16px; line-height: 30px; padding: 0 50px; margin-bottom: 70px;} .home-fashion-collection .left .text .btn2 {background-color: transparent; text-decoration: none; display: inline-block; border: 2px solid #000; border-radius: 0; border-width: 2px; font-family: 'Roboto Condensed', sans-serif; font-size: 21px; letter-spacing: 2px; padding: 10px 25px 8px; width: -moz-fit-content; color: #000; text-transform: uppercase; transition: all 0.4s ease 0s;} .home-fashion-collection .left .text .btn2:hover {background-color: #000; border-color: #000; color: #fff;} .home-fashion-collection .right {width: 50%; height: 50vw; float: left; background: #F5F6F9; overflow: hidden;} .home-fashion-collection .right img {transition: all 0.4s ease 0s; height: 100%; object-fit: cover; width: 100%;} .home-fashion-collection .right img:hover {transform: scale(1.1);} .home-fashion-collection .right .text {padding: 0 60px; position: relative; top: 50%; transform: translateY(-50%); text-align: center;} .home-fashion-collection .right .text h2 {text-transform: uppercase; font-family: 'Roboto Condensed', sans-serif; font-weight: normal; font-size: 38px;} .home-fashion-collection .right .text h2 a {color: #009BDE; text-decoration: none;} .home-fashion-collection .right .text h2.woman a {color: #d0aae4; text-decoration: none;} .home-fashion-collection .right .text p {font-size: 16px; line-height: 30px; padding: 0 50px; margin-bottom: 70px;} .home-fashion-collection .right .text .btn2 {background-color: transparent; text-decoration: none; display: inline-block; border: 2px solid #000; border-radius: 0; border-width: 2px; font-family: 'Roboto Condensed', sans-serif; font-size: 21px; letter-spacing: 2px; padding: 10px 25px 8px; width: -moz-fit-content; color: #000; text-transform: uppercase; transition: all 0.4s ease 0s;} .home-fashion-collection .right .text .btn2:hover {background-color: #000; border-color: #000; color: #fff;} #content-img-holder {margin-top: 95px; height: 45vh; max-height: 1080px; width: 100%;} #content-img-holder img {height: 100%; object-fit: cover; width: 100%;} #content-map-holder {margin: 0 0 40px 0; height: 55vh; max-height: 700px; width: 100%;} #content-map-holder-bottom {margin:0; height: 55vh; max-height: 700px; width: 100%;} #main-content {max-width: 960px; padding: 30px 20px 30px 20px; margin: 0 auto;} #main-content h1 {color: black; font-family: 'Roboto Condensed', sans-serif;} #main-content .breadcrumbs {font-family: 'Roboto Condensed', sans-serif; font-size: 13px; text-transform: uppercase; font-weight: bold;} #main-content .breadcrumbs a {color: #313131; text-decoration: none; } #main-content .breadcrumbs .blue a {color: #009BDE;} #main-content a {color: #313131;} #main-content a:hover {color: #009BDE;} #main-content #produktyList {} #main-content #produktyList .produktyItem {position:relative;float: left; width: 270px;height:457px; margin: 0 15px 25px 0;} #main-content #produktyList .produktyItem:nth-child(3n) {margin: 0 0 25px 0;} #main-content #produktyList .produktyItem iframe {width: 100%; height: auto;} #main-content #produktyList .produktyItem .image {position:relative;} #main-content #produktyList .produktyItem .image .labels {left: 0; position: absolute; top: 11px;} #main-content #produktyList .produktyItem .image .labels .new { background: #ff0000 none repeat scroll 0 0; color: white; font-size: 12px; font-weight: bold; margin: 0 0 11px; padding: 3px 0; text-align: center; width: 70px;} #main-content #produktyList .produktyItem .image img {width: 100%;} #main-content #produktyList .produktyItem .image h2 {text-align: center; font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; font-size: 17px;} #main-content #produktyList .produktyItem .image h2 a {text-decoration: none; color: #313131;} #main-content #produktyList .produktyItem .image h2 a:hover {color: #009BDE;} #main-content #produktyList .produktyItem .content-image {height: 45vh; width: 100%; overflow: hidden;} #main-content #produktyList .produktyItem .content-image img {height: 100%; object-fit: cover; width: 100%;} #main-content #produktyList .produktyItem.video-item {float: left; width: 32%; height: 280px; margin: 0 15px 25px 0;} #main-content #produktyList .produktyItem.video-item:nth-child(3n) {margin: 0 0 25px 0;} #main-content #produktyList .produktyItem .image .popup-video-image {max-height: 160px; width: 100%; overflow: hidden; display: inline-block;} #main-content #produktyList .produktyItem .image .popup-video-image img {height: 100%; object-fit: cover; width: 100%;} #main-content #produktyList .produktyItem:hover .image h2 a {color: #009BDE;} #main-content .contentImg2 {width: 100%; height: auto;} #main-content .prodejci .prodejce {float: left; text-align: center; width: 32%; min-height: 300px; margin: 0 15px 25px 0;} #main-content .prodejci .prodejce:nth-child(3n) {margin: 0 0 25px 0;} #main-content .prodejci .prodejce img {height: 60px; width: auto;} #main-content .google {position: relative; padding-bottom: 50%; height: 0; overflow: hidden;} #main-content .google iframe {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;} #main-content .contentImg {height: 45vh; max-height: 1080px; width: 100%;} #main-content .contentImg img {height: 100%; object-fit: cover; width: 100%;} #main-content #productDetail .text h2.main {color: #009BDE; font-family: 'Roboto Condensed', sans-serif; font-size: 28px; margin: 0;} #main-content #productDetail .section {font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; border-bottom: 1px solid black; font-weight: bold; font-size: 19px; padding: 0 0 10px 0; margin: 30px 0 25px 0;} #main-content #productDetail .symbols {} #main-content #productDetail .symbols img { /*width: 60px;*/ margin: 0 0 0 5px; } #main-content #productDetail .text {width: 480px; float: left;} #main-content #productDetail .text ul {margin: 10px 0 10px 15px; padding: 0;} #main-content #productDetail .text ul li {padding: 0; line-height: 25px;} #main-content #productDetail .text .rozmery {width: 100%; height: auto;} #main-content #productDetail .text h2 {color: #000; font-family: 'Roboto Condensed', sans-serif; font-size: 23px; margin: 0;} #main-content #productDetail .images {width: 470px; float: right;} #main-content #productDetail .images .main-img { position: relative; float: right; display: block; font-weight: normal; ; margin: 0 3px 0 0; text-align: center;} #main-content #productDetail .images .main-img a {text-decoration: none;} #main-content #productDetail .images .galerie {float: right; width: 450px; text-align: center; margin:20px 0 0 0;} #main-content #productDetail .images .galerie a {text-decoration: none;} #footer {width: 100%; background: #000000; color: #ffffff; text-align: center; font-size: 14px; padding: 50px 0 40px 0;} #footer #footer-menu {width: 60%; display: table; table-layout: fixed; margin: 0 auto; padding: 0 0 110px 0;} #footer #footer-menu .menu-item {text-align: center; display: table-cell;} #footer #footer-menu .menu-item a.heading {display: block; font-size: 17px; text-transform: uppercase; font-family: 'Roboto Condensed', sans-serif; margin: 0 0 25px 0;} #footer #footer-menu .menu-item a {display: block; font-size: 14px; text-transform: uppercase; font-family: 'Roboto Condensed', sans-serif;} #footer #footer-menu .menu-item a.active {color: #009BDE;} #footer a {text-decoration: none; color: white; font-size: 14px;} #footer a:hover {color: #009BDE;} @media (max-width:960px) { #slider {margin-top: 95px;} #top-menu {height: 95px;} #top-menu #logo {width: 112px; height: 51px;} #top-menu #logo.sticky {margin: 0 auto; width: 112px; height: 51px;} #home-text h1 {font-size: 33px;} #home-text h2 {font-size: 14px;} #home-text p {font-size: 13px;} #home-text .btn {font-size: 16px;} .home-fashion-collection .left {width: 100%; height: auto; float: none;} .home-fashion-collection .left .text {padding: 30px 20px 30px 20px; top: auto; transform: translateY(0);} .home-fashion-collection .left .text h2 {font-size: 34px;} .home-fashion-collection .left .text p {font-size: 14px; line-height: 25px; padding: 0 10px; margin-bottom: 40px;} .home-fashion-collection .left .text .btn2 {font-size: 16px;} .home-fashion-collection .right {width: 100%; height: auto; float: none;} .home-fashion-collection .right .text {padding: 30px 20px 30px 20px; top: auto; transform: translateY(0);} .home-fashion-collection .right .text h2 {font-size: 34px;} .home-fashion-collection .right .text p {font-size: 14px; line-height: 25px; padding: 0 10px; margin-bottom: 40px;} .home-fashion-collection .right .text .btn2 {font-size: 16px;} .swiper-container .swiper-caption {top:15%;} .swiper-container .swiper-caption .title {font-size: 36px; margin: 40px 0 0 0;} .swiper-container .swiper-caption .subtitle {font-size: 15px;} .swiper-container .swiper-caption .btn a {margin: 50px 0 0 0; font-size: 15px;} #main-content h1 {text-align: center;} #main-content h2 {text-align: center;} #main-content h3 {text-align: center;} #main-content p {text-align: center;} #main-content .breadcrumbs {text-align: center;} #main-content .prodejci .prodejce {width: 31%; min-height: 300px; margin: 0 15px 25px 0;} #main-content .prodejci .prodejce:nth-child(3n) {margin: 0 0 25px 0;} #main-content .prodejci .prodejce img {height: 40px; width: auto; max-width: 100%;} #main-content #produktyList .produktyItem {position: relative;width: 290px;height:inherit; margin: 0 15px 25px 0;} #main-content #produktyList .produktyItem:nth-child(3n) {margin: 0 0 25px 0;} #main-content #produktyList .produktyItem .image {position:relative;} #main-content #produktyList .produktyItem .image img {width: 100%;} #main-content #produktyList .produktyItem .image h2 {font-size: 15px;} #main-content #produktyList .produktyItem .content-image {height: 45vh; width: 100%; overflow: hidden;} #main-content #produktyList .produktyItem .content-image img {height: 100%; object-fit: cover; width: 100%;} #main-content #produktyList .produktyItem.video-item {float: left; width: 31%; min-height: 230px; height: auto; margin: 0 15px 25px 0;} #main-content #produktyList .produktyItem.video-item:nth-child(3n) {margin: 0 0 25px 0;} #main-content #produktyList .produktyItem .image .popup-video-image {max-height: 160px; width: 100%; overflow: hidden; display: inline-block;} #main-content #produktyList .produktyItem .image .popup-video-image img {height: 100%; object-fit: cover; width: 100%;} #main-content #productDetail .text h2.main {color: #009BDE; font-family: 'Roboto Condensed', sans-serif; font-size: 28px; margin: 0;} #main-content #productDetail .section {text-align: center;} #main-content #productDetail .symbols {text-align: center;} #main-content #productDetail .text {width: 100%; float: none;} #main-content #productDetail .text ul {text-align: center;} #main-content #productDetail .text .rozmery {width: 100%; height: auto;} #main-content #productDetail .images {width: 100%; float: none;} #main-content #productDetail .images .main-img {float: none; display: block; font-weight: normal; ; margin: 20px 3px 0 0; text-align: center; width: 100%;} #main-content #productDetail .images .main-img a.MagicZoom {border: 1px solid #D6D6D6;} #main-content #productDetail .images .galerie {float: none; width: 100%; text-align: center; margin:20px 0 0 0;} #main-content #productDetail .images .galerie a {text-decoration: none;} html body div#main-content div#productDetail div.images div.main-img a#Zoomer3.MagicZoom div.MagicZoomBigImageCont {display: none;} html body div#main-content div#productDetail div.images div.main-img a#Zoomer3.MagicZoom {width: 100% !important;} html body div#main-content div#productDetail div.images div.main-img a#Zoomer3.MagicZoom img {width: 100% !important;} #footer {font-size: 14px;} #footer #footer-menu {width: 95%;} } @media (max-width:600px) { #main-content #produktyList .produktyItem {float: none; text-align: center; width: 100%; height:inherit; min-height: auto; margin: 0 0 25px 0;} #main-content #produktyList .produktyItem.video-item {float: none; text-align: center; width: 100%; min-height: auto; margin: 0 0 25px 0;} #main-content .prodejci .prodejce {float: none; text-align: center; width: 100%; min-height: auto; margin: 0 0 25px 0;} #main-content .prodejci .prodejce:nth-child(3n) {margin: 0 0 25px 0;} #main-content .prodejci .prodejce img {height: 60px; width: auto; max-height: 100%;} #footer #footer-menu {width: 100%; display: block; table-layout: none; margin: 0 auto; padding: 0 0 50px 0;} #footer #footer-menu .menu-item {text-align: center; display: block; padding: 30px 0 0 0;} #footer #footer-menu .menu-item a.heading {margin: 0 0 5px 0;} } @media (max-width:500px) { #top-menu .left {display: initial; position: absolute; left: calc(4em + -20px); top: 50%; transform: translateY(-20px);} #top-menu .left .facebook-link {display: inline-block; width: 33px; height: 33px; margin: 0 0 0 0; background: url(../img/facebook.png) top center no-repeat;} #top-menu .right .facebook-link {display: none;} #top-menu-content .left {display: initial; position: absolute; left: calc(4em + -20px); top: 50%; transform: translateY(-20px);} #top-menu-content .left .facebook-link {display: inline-block; width: 33px; height: 33px; margin: 0 0 0 0; background: url(../img/facebook.png) top center no-repeat;} #top-menu-content .right .facebook-link {display: none;} } /* Style of the small image link */ .MagicZoom, .MagicZoom:hover { display: inline-block; outline: 0 !important; } /* Style of the main image */ .MagicZoom img { border: 0 !important; margin: 0 !important; outline: 0 !important; padding: 0 !important; } /* Style of the hint text and image */ .MagicZoomHint { background: url(/promojeans/modules/mod_magiczoom/core/graphics/hint.gif) no-repeat 2px 50%; color: #444; font-size: 8pt; font-family: sans-serif; line-height: 24px; margin: 0; min-height: 24px; padding: 2px 2px 2px 20px !important; text-align: left; text-decoration: none; } /* Style to hide external title on a page. Only needed for #id method */ .MagicZoomExternalTitle { display: none; } /* Style of the zoomed image */ .MagicZoomBigImageCont { background: #ffffff; border: 1px solid #999; } .MagicZoomBigImageCont img { max-width: none !important; max-height: none !important; height: auto !important; width: auto !important; } /* Style of text on the zoomed image */ .MagicZoomHeader { background: #666; color: #fff; font-size: 10pt !important; line-height: normal !important; text-align: center !important; } /* Style of square magnify area under the cursor */ .MagicZoomPup { background: #fff; border: 1px solid #aaa; cursor: move; } /* Style of loading message and icon shown during load */ .MagicZoomLoading { background: #fff url(/promojeans/modules/mod_magiczoom/core/graphics/loader.gif) no-repeat 2px 50%; border: 1px solid #ccc; color: #444; font-family: sans-serif; font-size: 8pt; line-height: 1.5em; margin: 0; padding: 4px 4px 4px 24px !important; text-align: left; text-decoration: none; } /* Style of shadow effect behind zoomed image */ .MagicBoxShadow { -moz-box-shadow: 3px 3px 4px #888888; -webkit-box-shadow: 3px 3px 4px #888888; box-shadow: 3px 3px 4px #888888; border-collapse: separate; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#888888') !important; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#888888')" !important; } /* Style of glow effect behind zoomed image */ .MagicBoxGlow { -moz-box-shadow: 0px 0px 4px 4px #888888; -webkit-box-shadow: 0px 0px 4px 4px #888888; box-shadow: 0px 0px 4px 4px #888888; border-collapse: separate; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Glow(Strength=4, Color='#888888') !important; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Glow(Strength=4, Color='#888888')" !important; } /* Contaner with main image and selectors container */ div.MagicToolboxContainer { text-align: center; } /* Main image styles */ div.MagicToolboxContainer a { margin: 0 auto; } /* Container with selectors*/ div.MagicToolboxSelectorsContainer { clear: both; } /* Selectors styles */ div.MagicToolboxSelectorsContainer a { display: inline-block; margin: 4px 1px; } div.MagicToolboxMessage { text-align: center; } /* selectors-left */ div.MagicToolboxContainer.selectorsLeft .MagicToolboxMainContainer { float: left; } div.MagicToolboxContainer.selectorsLeft .MagicToolboxSelectorsContainer { float: left; } /* selectors-right */ div.MagicToolboxContainer.selectorsRight .MagicToolboxMainContainer { float: right; } div.MagicToolboxContainer.selectorsRight .MagicToolboxSelectorsContainer { float: right; } .MagicScrollItem a { /* NOTE: magicscroll makes the image smaller if there is a margin */ margin: 0 !important; } a.MagicZoom { background: none !important; } h2.main { color: #009BDE; } .modra { color: #009BDE; font-weight: 700; } .logo_norma { position: absolute; top:0; left:0; z-index: 100; } .produktyItem .logo_norma{ height:75px; margin-left:3px; } .logo_ab { position: absolute; right: 0; top: 0; z-index: 100; }