/* Theme Name: Version: 1.0 */ /* --- TOC 01. GENERAL TYPOGRAPHY 1. CSS Reset 2. General 02. LAYOUT 1. General 2. Header 3. Content 4. Footer 03. LAYOUT 1. Slider 04. MEDIA SCREENS 1. Tablets 2. Phones /* ______________________________________________________________________________________________________________________________________________________________________ 01. GENERAL TYPOGRAPHY ______________________________________________________________________________________________________________________________________________________________________ */ /* ------- 1. CSS Reset ------- */ @charset "UTF-8"; @-ms-viewport { width: device-width; } @viewport { width: device-width; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* ------- 2. General ------- */ body {background:#fff;color:#3f4a53;font: 0.75em 'Open Sans', sans-serif;line-height: 1.333;} h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color:#3f4a53;text-decoration:none;} h1 {font-size:2em;color:#3f4a53;border-bottom:1px solid #dfdfdf;text-align:center;font-weight:600;padding-bottom:1.2em;margin-bottom:1.75em; } h2 {font-size:1.45em;color:#3f4a53;font-weight:600;padding-top:1em;} h3 {font-size:1.45em;font-weight:bold;padding:1.2em 0 1em 0;} h4 {font-size:1.2em;font-weight:600;padding:0.6em 0 1em 0;} h5 {} h6 {} a {color:#128abc;text-decoration:underline;} a:hover {color:#16abe9;} a:active {outline:none;} p {line-height:2;padding-top:1em;} b {font-weight:bold;} i, {font-style:italic;} strong {font-weight:bold;} ul {list-style:disc inside;padding:1em 0 0 3em;} ul li {padding-bottom:0.8em;} ol {padding:1em 0 0 3em;list-style:decimal inside;} ol li {padding-bottom:0.8em;} blockquote {border-left:4px solid #128abc;padding-left:1.5em;margin:1em 0 1em 3em;line-height:2;font-style:italic;} /* ______________________________________________________________________________________________________________________________________________________________________ 02. LAYOUT ______________________________________________________________________________________________________________________________________________________________________ */ /* ------- 1. General ------- */ .wrap {margin:0 4%;padding:0;} .clear {clear:both;} .read-more, input[type="submit"] {font-size:1.1em;background:#51a9cd;color:#fff;display:inline-block;text-decoration:none;padding:0.5em 1.2em;margin-top:1.2em;} input[type="submit"] {border:none;cursor:pointer;padding: 0.5em 2.2em;} .read-more:hover, input[type="submit"]:hover {color:#fff;background:#55c1ed;} .go-back {font-size:14px;} /* ------- 2. Header ------- */ #header-top {background:#f3f6f8;height:30px;} #header-top .social ul, #header-top .langs ul {list-style:none;padding:0.42em 0 0 0;} #header-top .social li, #header-top .langs li {float:left;} #header-top .social {float:left;} #header-top .social a {background:url(../img/social-icons.png) 0 0 no-repeat;width:20px;height:20px;text-decoration:none;display:block;text-indent:-9999px;} #header-top .social {margin-left:-0.8em;} #header-top .social li {margin-left:0.8em;padding-bottom:0;} #header-top .social li.facebook a {background-position:0 0;} #header-top .social li.twitter a {background-position:-40px 0;} #header-top .social li.draugiem a {background-position:-20px 0;} #header-top .langs {float:right;} #header-top .langs ul {margin-right:-0.8em;padding:0.55em 0 0 0;} #header-top .langs li {background:url(../img/langs-sep.png) right no-repeat;margin-right:0.8em;padding-right:0.8em;padding-bottom:0;} #header-top .langs li:last-child {background:none;margin-right:0;} #header-top .langs li, #header-top .langs li a {font-size:11px;color:#7c8082;text-transform:uppercase;} #header-top .langs li a:hover {color:#ffcc00;} #header-main {padding-bottom:1.5em;} #header-main #logo {float:left;margin-top:1.2em;} #header-main #logo a {display:block;width:108px;height:110px;} #header-main #nav {float:right;} #header-main #nav ul {list-style:none;margin-right:-0.5em;padding:0;} #header-main #nav li {float:left;margin-right:0.4em;min-width:127px;position:relative;padding-bottom:0;} #header-main #nav li:hover {background:url(../img/nav-list-hover.png) top repeat-x;} #header-main #nav li:hover a, #header-main #nav li.active a {background:url(../img/nav-hover.png) center bottom no-repeat;} #header-main #nav li span {display:block;} #header-main #nav li a {display:block;text-decoration:none;padding:2.5em 0 3.5em;} #header-main #nav li .nav-cat {font-size:1.1em;color:#8e97a8;font-weight:600;text-align:center;padding-bottom:0.55em;} #header-main #nav li .nav-cat-desc {font-size:0.9em;color:#aaacc7;text-align:center;} #header-main #nav li a:hover .nav-cat, #header-main #nav li.active a .nav-cat {color:#3f4a53;} #header-main #nav li a:hover .nav-cat-desc {color:#3f4a53;} #header-main #nav ul ul {display:none;margin:0;position:absolute;z-index:9999;left:-40px;border-top:2px solid #ffcc00;-moz-box-shadow:0 0 5px rgba(45, 45, 45, 0.35);-webkit-box-shadow:0 0 5px rgba(45, 45, 45, 0.35);box-shadow:0 0 5px rgba(45, 45, 45, 0.35);} #header-main #nav ul ul li {float:none;width:210px;margin-right:0;} #header-main #nav ul ul li:hover {background:none;} #header-main #nav li:hover ul li a {background:#fff;} #header-main #nav ul ul li a {background:#fff;color:#8e97a8;padding:1em;border-bottom:1px solid #dfdfdf;} #header-main #nav ul ul li a:hover {background:#fff;color:#3f4a53;} #main-menu-slide {display:none;} /* ------- 4. Content ------- */ #content {min-height:300px;} #page-title {background:#128abc;margin-bottom:45px;text-align:center;border-top:4px solid #f3f6f8;} #page-title .page-title-container {display:inline-block;text-align:center;} #page-title h1 {font-size:2.5em;color:#fff;border:none;float:left;font-style:italic;padding:20px 25px 25px 0;margin-bottom:0;} #page-title span {background:url(../img/slider-nav-sep.png) left no-repeat;display:inline-block;color:#fff;font-size:1em;padding:35px 0 35px 25px;font-style:italic;float:left;} /* ------- 5. Content ------- */ h2.perfume, h2.perfume-equipment, h2.service, h2.consultations {padding:0.5em 0 0.5em 2.85em;} h2.perfume {background:url(../img/perfume.png) left top no-repeat;} h2.perfume-equipment {background:url(../img/gear.png) left no-repeat;} h2.service {background:url(../img/tech.png) left no-repeat;} h2.consultations {background:url(../img/support.png) left no-repeat;} .grid {list-style:none;margin-left:-3%;padding:0;} .grid li {width:22%;float:left;padding-left:3%;padding-bottom:0;} .category-grid {list-style:none;padding:0;margin-left:-5%;} .category-grid li {padding-bottom:4em;float:left;width:20%;margin-left:5%;} /* ------- 6. Footer ------- */ #footer {background:#3d3f42;height:70px;margin-top:60px;} #footer #copyright {float:left;padding-top:1.7em;} #footer #copyright #footer-logo {border-right:1px solid #6b7077;float:left;padding:0.6em 0 0.6em 0;padding-right:2em;margin-right:2em;} #footer span {color:#6b7077;display:block;float:left;padding-top:0.55em;} #footer #developer {float:right;padding-top:1.7em;} #footer a {color:#6b7077;} #footer a:hover {color:#ffcc00;} /* ______________________________________________________________________________________________________________________________________________________________________ 03. SPECIFIC ______________________________________________________________________________________________________________________________________________________________________ */ /* ------- 1. Slider ------- */ #slider {border-top:4px solid #f3f6f8;margin-bottom:125px;} #slider .slider-nav {background:#128abc;height:78px;width:100%;text-align:center;} #slider .slider-read-more {font-size:1.5em;background:#eabf00;color:#fff;display:inline-block;text-decoration:none;padding:0.6em 2em;float:right;margin-top:1em;} #slider .slider-read-more:hover {background:#c3a204;} #slider .ei-slider{position:relative;width:100%;max-width:1920px;height:450px;margin:0 auto;} #slider .ei-slider-loading{width:100%;height:100%;position:absolute;top:0px;left:0px;z-index:999;background:rgba(0,0,0,0.9);color:#fff;text-align:center;line-height:400px;} #slider .ei-slider-large{height:100%;width:100%;position:relative;overflow:hidden;padding:0;} #slider .ei-slider-large li{list-style:none;position:absolute;top:0px;left:0px;overflow:hidden;height:100%;width:100%;padding-bottom:0;} #slider .ei-slider-large li img{width:100%;} #slider .ei-title{position:absolute;margin-left:8%;top:40%;} #slider .ei-title h2, #slider .ei-title h3{text-align:left;} #slider .ei-title h2{font-size:3em;line-height: 50px;color:#fff;font-weight:600;padding:0 0 0.1em 0.7em;} #slider .ei-title h3{background:url(../img/slider-heading-bg.png);font-weight:normal;font-size:1.75em;line-height:1em;color:#dde7ed;padding:1.1em 1.5em 1.2em 1.5em;min-width:600px;} #slider .ei-slider-thumbs{height:13px;position: relative;display:inline-block;padding:0;} #slider .ei-slider-thumbs li {background:url(../img/slider-nav-sep.png) right center no-repeat;position:relative;float:left;height:78px;list-style:none;line-height:4.4;padding:0 3em;} #slider .ei-slider-thumbs li:last-child {background:none;} #slider .ei-slider-thumbs li.ei-slider-element{display:none;} #slider .ei-slider-thumbs li a {font-size:1.5em;color:#a1c1cb;text-decoration:none;display:block;} #slider .ei-slider-thumbs li a:hover{color:#fff;} #slider .ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;max-width:100%;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.3)));-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";} #slider .ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";} #slider #ei-slider:hover .slider-arrows span {display:block;} #slider .slider-arrows span {background:url(../img/slider-arrows.png) no-repeat;position:absolute;top:50%;z-index:999;cursor:pointer;width:23px;height:36px;text-indent:-9999px;display:none;} #slider .slider-arrows .left-arrow {background-position:0 0;left:3%;} #slider .slider-arrows .right-arrow {background-position:-24px 0;right:3%;} #slider .slider-arrows .left-arrow:hover {background-position:0 -38px;} #slider .slider-arrows .right-arrow:hover {background-position:-24px -38px;} @media screen and (max-width: 830px) { #slider .ei-title{position: absolute;right: 0px;margin-right:0px;width:100%;text-align:center;top:auto;bottom:10px;padding:5px 0;} #slider .slider-arrows span {display:none !important;} #slider .ei-title h2, #slider .ei-title h3{text-align:center;} #slider .ei-title h2{font-size:2em;line-height:2;} #slider .ei-title h3{font-size:1.4em;line-height:1;} #slider .slider-read-more {float:none;} } /* ------- 2. News & Perfume equipment ------- */ .news-posts, .perfume-equipment {list-style:none;margin-left:-5%;padding:0;} .news-posts img {float:left;margin-right:2em;} .news-posts li, .perfume-equipment li {width:45%;float:left;margin-left:5%;padding-bottom:3.5em;} .news-posts h2, .perfume-equipment h2 {padding-top:0;} .perfume-equipment img {float:left;margin:0 20px 20px 0;} .perfume-list {list-style:none;padding:0 0 0 0;} .perfume-list li {border-bottom:0px solid #dfdfdf;padding:0;} .perfume-list li:last-child {border-bottom:none;} .perfume-list h2 {padding-top:0;} .perfume-list h1 {margin-bottom:1.2em;text-align:left;padding-bottom:0.5em;} .news-read-more .post-title {padding-top:0;} .news-read-more .image-container {width:150px;float:left;height:150px;} .perfume-equipment p, .news-posts p {padding-top:0;} .news-posts h1, .news-post-title {margin-bottom:1.2em;text-align:left;padding-bottom:0.5em;} .image-container {width:100%;height:250px;overflow:hidden;margin-bottom:1.5em;text-align:center;position:relative} .news-read-more .image-container {margin-right:2em;float:none;width:100%;height:100%;margin-bottom:2em;text-align:left;} .news-read-more .image-container img {width:100%;} .meta {border-top:1px solid #dfdfdf;border-bottom:1px solid #dfdfdf;padding:0.75em 0;font-style:italic;margin-bottom:1em;} .image-side {float:left;} .image-side img {margin-right:0;} .description-side {margin-top:-1em;width:100%;padding-left:170px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;} .extra-list-space > li {border-bottom:none;} .perfume-types {font-weight:bold;padding:0 0 0 0;list-style:none;margin-right:-5%;} .perfume-types li {float:left;width:45%;margin-right:5%;border-top:1px solid #dfdfdf;border-bottom:none;padding:1.5em 0;margin-bottom:0;} .filter {width:19%;;float:left;} .filter-list {border:1px solid #dfdfdf;padding:2em;} .filter-list ul {padding:0;list-style:none;} .filter-list li {margin-bottom:1em;border-bottom:1px solid #dfdfdf;} .filter-list li label {padding-left:15px;} .perfume-list-side {width:78%;float:left;margin-left:1%} .filter h4 {text-align:center;} .contact-left {float:left;width:48%;} .contact-right {float:right;width:48%;} .contact-form input[type="text"] {border:1px solid #aeaeae;width:48%;margin-left:4%;padding:5px;float:left;margin-bottom:1em;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .contact-form input[type="text"]:first-child {margin-left:0;} .contact-form textarea {border:1px solid #aeaeae;padding:5px;text-align:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} .info-message { width: 100%; padding: 10px; font-size: 16px; border: 1px solid transparent; -moz-border-radius: 15px; border-radius: 5px; } .msg-success { color: #3c763d; border-color: #d6e9c6; background-color: #dff0d8; } .msg-error { color: #a94442; border-color: #ebccd1; background-color: #f2dede; } #air-client-list { list-style: none; } .air-client { float: left; position: relative; margin: 0 20px 20px 0; padding: 0; } .air-client:last-child { margin: 0; } .air-client:hover .air-client-title { display: block; } .air-client img { background: #f2f2f2; border: 1px solid #e0e0e0; height: 80px; width: 80px; padding: 29px; } .air-client-title { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 14px; text-align: center; background: #128abc; opacity: 0.9; color: white; } .air-client-title div { background: #116385; padding: 5px 0; margin-top: 94px; } .download-docs-links img, .download-docs-links a { float:none; } .download-docs-links a { display:inline-block; margin-left:5px; margin-bottom:5px; } .download-docs-links { float:none; text-align: center; } /* Pages */ .page-entry-container { border-top: 1px solid #e0e0e0; padding: 40px 0; position: relative; } .page-entry-container { margin-right: 0; } .page-entry-title { display: inline; float: left; margin-right: 20px; width: 220px; } .page-entry-text { color: #666; display: inline; float: left; font-size: 14px; marging-right: 20px; line-height: 30px; width: 380px; padding: 0 10px; } .page-entry-image { width: 300px; float:left; } .page-entry-image img { display: block; height: auto; max-width:100%; } .heading-1 { color: #333; font-size: 16px; font-weight: normal; line-height: 20px; margin-bottom: 20px; padding: 0 10px; } /* ------- 3. Pagination ------- */ .pagination {padding-top:3em;border-top:1px solid #dfdfdf;} .pagination .page-number {float:right;font-style:italic;margin-top:0.1em;} .pagination a, .pagination strong { background:#fff;color:#8e97a8;text-decoration:none;border:1px solid #c9c9c9;} .pagination a {cursor:pointer;} .pagination a, .pagination strong {color:#8e97a8; text-decoration:none;padding:0.5em 1em;} .pagination a:hover, .pagination strong {background:#fff;border-bottom:3px solid #ffcc00;} .pagination strong {background:#fff;color:#8e97a8;padding:0.5em 1em;text-decoration:none;border:1px solid #c9c9c9;border-bottom:3px solid #ffcc00;} /* ------- 4. Perfume equipment ------- */ /* ------- 5. Text pages ------- */ .heading-title { width: 380px; margin: 80px 0 0 80px; color: #333; font-size: 30px; } .heading-text { width: 380px; margin: -5px 20px 0 80px; color: #666; font-size: 20px; line-height: 30px; } /* ______________________________________________________________________________________________________________________________________________________________________ 04. MEDIA SCREENS ______________________________________________________________________________________________________________________________________________________________________ */ /* ------- 1. Tablets ------- */ @media screen and (max-width: 1190px) { #logo {width:100%;margin-bottom:1em;padding-bottom:2.5em;margin-top:2.5em !important;float:none !important;border-bottom:1px solid #f3f6f8;} #logo a {clear:both;margin:0 auto;} #main-menu {margin-left:-5%;} #main-menu li {min-width:0 !important;margin-left:5%;} #header-main #nav li:hover a, #header-main #nav li.active a {background:none;} #header-main #nav li a {padding:1em 0 1.5em;} #header-main #nav {float:none;padding-top:0.1em;} #slider {margin-bottom:100px;} #slider .ei-title h2{font-size:2em;line-height:2;} #slider .ei-title h3{font-size:1.5em;line-height:1;} #slider .slider-read-more {display:inline-block !important;} #slider #ei-slider {height:250px;} #slider .ei-title {top:30%;} #slider .slider-read-more {padding:0.5em 1.5em;font-size:1.25em;} #slider .slider-nav {height:60px;} #slider .slider-nav li {background:url(../img/slider-nav-sep-medium.png) right center no-repeat;height:60px;line-height:4.8em;} #slider .slider-nav li a {font-size:1.25em;} #header-main #nav ul {display:block;text-align:center;} #header-main #nav ul li {display:inline-block;float:none;} .news-posts {margin-left:0;} .news-posts li {width:100%;border-top:1px #dfdfdf solid;padding:2em 0;margin-left:0;} .news-posts li:first-child {padding-top:0;border-top:none;} .pagination {margin-top:0;} #page-title {margin-bottom:25px;} .contact-form input[type="text"] {width:100%;margin-left:0;} .google-maps {height:250px !important;} body:after { content:'tablet'; display:none; } } /* ------- 2. Phones ------- */ @media screen and (max-width: 830px) { #logo {width:100%;margin-bottom:0;float:none !important;border-bottom:1px solid #dfdfdf;} .nav-cat-desc {display:none !important;} #logo a {clear:both;margin:0 auto;} #main-menu-slide {display:block;border-bottom:1px solid #dfdfdf;text-align:center;cursor:pointer;height:30px;padding:1.2em 0;} #header-main #nav ul {margin-right:0;margin-left:0;display:none;} #header-main #nav {float:none;padding-top:0.1em;} #header-main #nav li {width:100%;margin-left:0;border-top:1px #dfdfdf solid;} #header-main #nav li:first-child {border-top:0;} #header-main #nav li a {padding:1.5em 0 1.5em;display:block;} .grid {margin-left:-10%;} .grid li {width:40%;padding-left:10%;margin-bottom:3em;} #slider .slider-read-more {display:inline-block !important;} #slider .ei-title h3{font-size:1.2em;line-height:1;} #header-main {padding-bottom:0;} .news-posts .image-container {height:200px;} .contact-left, .contact-right {float:none;width:100%;} #footer {margin-top:40px;} body:after { content:'mobile'; display:none; } }