/*--------------------- General ---------------------*/ a {font-weight:normal; color:#000; text-decoration:underline;} a:hover {text-decoration:none;} h1, h2, h3 { font: bold 14px 'Poppins', Sans-serif; color: #000; } h1 {font-size:68px; margin:0 0 10px 0; font-weight:bold;} h2 {font-size:42px; margin:25px 0 5px 0;} h3 {font-size:24px; margin:25px 0 5px 0;} h4 {margin:25px 0 5px 0; font-weight:bold; line-height:1.5;} p {margin:0 0 10px 0;} ::selection {background:#d0e8ff;} ::-moz-selection {background:#d0e8ff;} img, table {border:0;} html {margin:0; padding:0;} body { margin: 0; padding: 0; COLOR: #000; font-size: 18px; font-family: 'Poppins', Arial, Sans-serif; font-weight:lighter; line-height: 1.5; background-color: #353535; } /*--------------------- Body layout ---------------------*/ #wrapper {margin:0 auto;} .inner {width: 1100px; max-width: 95%; margin:0 auto;} .inner.big {width: 1640px; } .header { background-color: #fff; display: flex; justify-content: space-between; padding: 25px 40px; flex-wrap:nowrap;} .header .rightHeader {display:flex; align-items:center;} #logo {font-size: 18px; font-weight:bold; text-decoration:none; line-height: 1em; display:flex; align-items:center;} .header #responsive-menu-btn { display: none; } .topmenu {} .topmenu ul {margin:0; padding:0;} .topmenu ul li {display:inline-block; position:relative; } .topmenu ul li a {font-size: 16px; color: #000; text-decoration: none; padding: 10px 20px; display: block;} .topmenu ul li.on a {font-weight:bold;} .topmenu ul li a:hover {text-decoration:none;} .topmenu ul li a.haschild {display:none;} .topmenu ul li ul {display:none;} .topmenu ul li.li-childs > a:after { content: "\f107"; font-family: FontAwesome; right: 0px; position: absolute; top: 8px; font-size: 17px; font-weight:bold; } .topmenu ul li.li-childs > a.on:after { content: "\f106"; font-family: FontAwesome; right: 0px; position: absolute; top: 8px; font-size: 17px; font-weight:bold; } .topmenu ul li ul { display: block; position: absolute; width: 150%; top: 0; left: 0; z-index: 99999 !important; margin: 0; padding: 10px 10px; list-style-type: none; margin-top: 34px; background-color: #000000; box-sizing: border-box; text-align: left; display: none; } .topmenu ul li ul.show { left: 0; z-index: 99; display: block; } .topmenu ul li ul.show li { float: none; margin-left: 0; display: block; } .topmenu ul li ul.show li a { color: #ffffff; text-decoration: none; border-bottom: 0; font-size: 14px; } .topmenu ul li ul.show li:hover { border: 0; } .topmenu ul li ul.show li:hover a { color: #EFEFEF; } .header #nav ul#responsive {display:none;} .header .contactPuffs { position: absolute; right: 0; } .header .webshopLink {font-size: 15px; border: 2px solid #000; text-decoration:none; border-radius: 100px; padding: 10px 15px; margin: 0 20px 0 0; font-weight:bold;} /*--------------------- Page layout ---------------------*/ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } * html .clearfix {height: 1%;} .topContent { position: relative; min-height: 300px; background: #EFEFEF; display: flex; justify-content: center; align-items: center; overflow: hidden; } .topContent.black {background:#000;} .topContent img {} .topContentText {display:flex; justify-content:center; align-items:center; flex-direction:column; height:100%; z-index:3; position:absolute; top: 0; left:0;right:0; max-width: 1100px; margin: auto; text-align:center;} .topContentText h1 {margin: 20px 0; line-height:1em;} .topContent.light .topContentText h1, .topContent.light .topContentText p { color: #fff; } .topContent.dark .topContentText h1, .topContent.dark .topContentText p { color: #000; } .topContent .filter {position:absolute; top: 0; background:rgba(0, 0, 0, 0.5); width: 100%; height:100%; z-index:2;} .content { background-color:#fff; } .content .inner {min-height:150px; overflow:hidden; padding:65px 0;} .content .inner.big { padding: 50px 0; } .contentright {width:75%; margin:0; padding:0; float:right; overflow:hidden;} /*--------------------- Start page ---------------------*/ #start-slideshow {width:100%; margin:0 auto;} .flexslider {overflow:hidden; width:100%; margin:0 auto !important;} .flexslider .slides li {background-size:cover; background-position:center;} .flexslider .slides li a {display:block; height:100%; width:100%;position:relative; z-index: 4;} #start-content {margin:0 auto; background:#333;} #start-puffs {overflow:hidden; display:flex; justify-content:space-between;} #start-puffs .puffitem {width:20%; height:100%;padding:0; text-align:left; overflow:hidden; position:relative;} #start-puffs .puffitem.last {margin-right:0;} #start-puffs .puffitem a {display:block; width:100%; height:100%; text-decoration:none; position:relative;} #start-puffs .puffitem .rub, #start-puffs .puffitem a .rub { transition-duration: 0.2s; -webkit-transition-duration: 0.2s; width: 100%; display: block; margin: 0 0 20px 0; padding: 0; color: #fff; font-size: 32px; font-weight: bold; text-align: center; } #start-puffs .puffitem .image, #start-puffs .puffitem a .image {width:100%; height:100%; display:block; text-align:center; overflow:hidden;} #start-puffs .puffitem .image img, #start-puffs .puffitem a .image img {transition-duration:0.2s; -webkit-transition-duration:0.2s; width:100%; display:block; opacity:1.0; filter:alpha(opacity=100);} #start-puffs .puffitem .content, #start-puffs .puffitem a .content {transition-duration:0.2s; position:absolute; bottom: 20px; left:0; right:0; background:none; z-index:3; -webkit-transition-duration:0.2s; width:75%; margin: auto; text-align:center; box-sizing:border-box;} #start-puffs .puffitem .content p, #start-puffs .puffitem a .content p { transition-duration: 0.2s; -webkit-transition-duration: 0.2s; /*padding:0; margin:0;*/ line-height: 16px; color: #fff; font-size: 16px; font-weight: lighter; } #start-puffs .puffitem .content .link { display:inline-block; transition-duration: 0.2s; -webkit-transition-duration: 0.2s; /*padding:0; margin:0;*/ line-height: 16px; color: #fff; font-size: 16px; font-weight: lighter; border: 2px solid #fff; border-radius: 100px; margin: 20px 0 0 0; padding:13px 28px; } #start-puffs .puffitem:hover .rub {transition-duration:0.2s; -webkit-transition-duration:0.2s; } #start-puffs .puffitem:hover .content, #start-puffs .puffitem:hover .content p {transition-duration:0.2s; -webkit-transition-duration:0.2s; } #start-puffs .puffitem:hover img, #start-puffs .puffitem a:hover img {transition-duration:0.2s; -webkit-transition-duration:0.2s; opacity:0.8; filter:alpha(opacity=80);} #start-puffs .puffitem .filter { height: 100%; width: 100%; position: absolute; top: 0; background: rgba(0, 1, 30, 0.40); } #start-news {width:32.5%; height:225px; margin:0; padding:0; float:right; overflow:hidden;} #start-news h3 {padding:0 0 2.6% 0; margin:0; display:block; font-size:16px; line-height:18px;} #start-news ul {list-style:none; margin:0; padding:0; width:100%; overflow:hidden;} #start-news ul li {width:100%; padding:0; margin:0 0 3% 0;} #start-news ul li a {transition-duration:0.2s; -webkit-transition-duration:0.2s; display:block; text-decoration:none; padding:1.5% 1.5% 1.5% 3%; margin:0; border-left:2px solid #ccc;} #start-news ul li a .date {display:block; font-size:10px; color:#888;} #start-news ul li a .title {display:block; color:#444; width:100%; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} #start-news ul li a:hover {transition-duration:0.2s; -webkit-transition-duration:0.2s; border-left:2px solid #2980b9; background-color:#f5f5f5;} #start-news ul li a:hover .date {color:#666;} #start-news ul li a:hover .title {color:#000;} .breadcrumbs { font-size: 16px;} .breadcrumbs a {text-decoration:none;} .topContent.dark .breadcrumbs {color:#000;} .topContent.light .breadcrumbs {color:#fff;} .breadcrumbs a, .breadcrumbs span { margin: 0 3.5px; } .topContent.dark .breadcrumbs a, .topContent.dark .breadcrumbs span { color:#000; } .topContent.light .breadcrumbs a, .topContent.light .breadcrumbs span { color: #fff; } .pageProductList {margin: 100px 0 0 0;} .pageProductList .product-item { border-top: 1px solid #C7C7C7; display: flex; justify-content: space-between; align-items:center; padding: 30px 40px; } .pageProductList .product-item:last-child { border-bottom: 1px solid #C7C7C7;; } .pageProductList .image {width: 10%;} .pageProductList .image img {max-width: 100%;} .pageProductList .product-info {width: 60%;} .pageProductList .product-info h4 {font-size: 20px; margin: 0 0 15px 0;} .pageProductList .product-info p {font-size: 16px;} .pageProductList .product-info .product-price {font-weight:bold;} .pageProductList .product-info .product-price .campaign {color:#c80000;} .pageProductList .product-info .product-price .original-price { text-decoration:line-through; font-size: 14px; margin: 0 0 0 15px;} .pageProductList .product-buttons {width: 20%;} .pageProductList .product-buttons a {display:block; border: 2px solid #000; border-radius: 100px; text-align:center; text-decoration:none; padding: 13px 0; font-size: 14px; font-weight:bold;} .pageProductList .product-buttons a:first-child {margin: 0 0 10px 0;} .pageProductList .product-buttons a:first-child:hover { background: #000; color: #fff; } .pageProductList .product-buttons a:last-child {background:#000; color:#fff;} .pageProductList .product-buttons a:last-child:hover { background: #0e0e0e; color: #fff; } /*--------------------- Submenu horizontal ---------------------*/ .fullmenu { margin: 20px 0 0 0; width: 100%; } .fullmenu ul { display: flex; justify-content:center; text-align: center; margin: 0; padding: 0; list-style: none; overflow: hidden; flex-wrap:wrap; } .fullmenu ul li {display:inline-block; margin:0 10px 10px 10px; padding:0; } .fullmenu ul li:last-child {background:none; border:0;} .fullmenu ul li a { margin: 0; padding: 13px 21px; font: normal 21px/1em 'Poppins'; border-radius:100px; text-decoration: none; display: block; } .topContent.light .fullmenu ul li a { color: #fff; border: 2px solid #fff; } .topContent.dark .fullmenu ul li a { color: #000; border: 2px solid #000; } .topContent.light .fullmenu ul li a:hover, .topContent.light .fullmenu ul li.on a, .topContent.light .fullmenu ul li.on-childs a { background: #fff; color: #000; } .topContent.dark .fullmenu ul li a:hover, .topContent.dark .fullmenu ul li.on a, .topContent.dark .fullmenu ul li.on-childs a { background: #000; color: #fff; } /*--------------------- Footer layout ---------------------*/ #footer { padding: 80px 30px; position: relative; font-size: 16px; line-height: 16px; background: #000000; color:#fff; display: flex; justify-content: space-between; } #footer a {font-weight:normal; color:#989898; text-decoration:none; font-size:14px;} #footer a:hover {text-decoration:underline;} #footer .left {float:left; padding:0; margin:0; text-align:left;} #footer .right {float:right; padding:0; margin:0; text-align:right; display:none;} #footer .right .rss img, #footer .right .facebook img, #footer .right .twitter img {margin:0 0 3px 2px; padding:0; border:0;} #footer .links {margin-bottom:10px; } #footer .links .left {float:left; width:16%; display:block; overflow:hidden; margin:0 0.6% 1% 0; text-align:left; clear:right;} #footer .links .left li {list-style-type:none; margin-left:0; padding-left:0;} #footer .links .left.first {padding-left:0px;} #footer .links .left p a {color:#fff; display:block; line-height:20px; font-size:10px; } #footer .links .left p a strong {color:#fff; font-size:12px;} @media screen and (max-width: 1100px) { h1 {font-size:52px;} h2 {font-size:32px;} h3 {font-size:20px;} body {font-size: 16px;} .header {width:auto; height:auto; height:50px; margin:0; padding:0 20px; position:relative;} .header .inner {height:auto; z-index:999;} .header #nav {position:static; top:0; left:0; height:auto; min-height:50px; width:100%; padding:0; margin:0; z-index:9; display:none;} .header .topmenu {display:none;} .header .webshopLink { font-size: 15px; border: 2px solid #000; padding: 5px 10px; } .breadcrumbs {font-size: 14px;} .header #responsive-menu-btn {display:block; height:50px; padding:0 0 0 14px; z-index:999; color:#000; font-size:30px; font-weight:bold; text-transform:uppercase; line-height:50px; text-decoration:none; cursor:pointer;} .topContent {max-height: 200px; } .content {width:auto; height:auto; min-height:100px; margin:0; padding:0;} .content .inner { width: auto; height: auto; margin: auto; min-height: 100px; padding: 20px 0; } .content .inner.big {padding: 20px 0;} .contentright {float:none; width:100%;} .fullmenu {margin: 0;} .fullmenu ul li a { padding: 7px 11px; font-size: 16px; } .flexslider .slides li {height:400px !important;} .pageProductList .product-item { padding: 10px 20px; } .pageProductList .product-info { width: 70%; } .pageProductList .product-buttons { width: 15%; } .pageProductList .product-buttons a { padding: 8px 0; font-size: 12px; } .pageProductList .product-info h4 { font-size: 16px; } .pageProductList .product-info p { font-size: 14px; } #start-puffs .puffitem .rub, #start-puffs .puffitem a .rub {font-size: 22px; margin: 0 0 5px 0;} #start-puffs .puffitem .content p, #start-puffs .puffitem a .content p { font-size: 12px; } #start-puffs .puffitem .content .link {font-size: 12px; padding: 7px 10px; margin: 5px 0 0 0; } table.responsive-table, table.responsive-table thead, table.responsive-table tbody, table.responsive-table th, table.responsive-table td, table.responsive-table tr {display:block; border:0;} table.responsive-table thead tr {position:absolute; top:-9999px; left:-9999px;} table.responsive-table tr {border:1px solid #ccc;} table.responsive-table td {padding:4px 6px;} table.responsive-table td {border:none; border-bottom:1px solid #ddd; position:relative; padding-left:50%; white-space:normal; text-align:left !important;} table.responsive-table td:before {position:absolute; top:6px; left:6px; width:45%; padding-right:10px; white-space:nowrap; text-align:left; font-weight: bold;} table.responsive-table td:before {content:attr(data-title);} } @media screen and (max-width: 850px) { #start-puffs {flex-wrap:wrap; } #start-puffs .puffitem { width: 50%; } #footer { padding: 40px 30px; font-size: 14px; } #footer a { font-size: 12px; } } @media screen and (max-width: 600px) { h1 { font-size: 42px; } h2 { font-size: 26px; } h3 { font-size: 16px; } body { font-size: 14px; } .pageProductList .product-item {flex-wrap:wrap; padding: 20px 0; } .pageProductList .image { width: 100%; text-align:center; margin: 0 0 20px 0;} .pageProductList .image img { max-height:200px; } .pageProductList .product-info { width: 100%; } .pageProductList .product-buttons { width: 100%; margin: 20px 0 0 0; font-size: 18px; } #footer { display:block; padding: 40px 30px; font-size: 14px; } #footer a { font-size: 12px; } } @media screen and (max-width: 480px) { h1 { font-size: 32px; } h2 { font-size: 24px; } #logo { font-size: 14px; } .header .webshopLink { font-size: 12px; padding: 5px 5px; margin: 0 10px 0 0; } .fullmenu ul li a { font-size: 14px; } #start-puffs .puffitem { width: 100%; } #start-puffs .puffitem .image, #start-puffs .puffitem a .image { height: 350px; } #start-puffs .puffitem .rub, #start-puffs .puffitem a .rub { font-size: 28px; margin: 0 0 10px 0; } #start-puffs .puffitem .content p, #start-puffs .puffitem a .content p { font-size: 14px; } #start-puffs .puffitem .content .link { font-size: 14px; padding: 7px 10px; margin: 5px 0 0 0; } #footer {font-size: 12px; } #footer a { font-size: 10px; } }