@charset utf-8;
/*===============================*/
/* CSS by elever.ee */
/* GENERAL */
/*===============================*/
@font-face {
  font-family:'Ubuntu';
  font-style:normal;
  font-weight:300;
  src:url(https://fonts.gstatic.com/s/ubuntu/v7/d7UcEnGHOeZ1eW8X4gtq5g.woff2) format('woff2'), url(https://fonts.gstatic.com/s/ubuntu/v7/e7URzK__gdJcp1hLJYAEag.woff) format('woff')}
@font-face {
  font-family:'Ubuntu';
  font-style:normal;
  font-weight:400;
  src:url(https://fonts.gstatic.com/s/ubuntu/v7/GMuVYPs2qfSvo2zvGXIEVg.woff2) format('woff2'), url(https://fonts.gstatic.com/s/ubuntu/v7/mZSs29ggGoaqrCNB3kDfZQ.woff) format('woff')}
@font-face {
  font-family:'Ubuntu';
  font-style:normal;
  font-weight:500;
  src:url(https://fonts.gstatic.com/s/ubuntu/v7/vAWtAYyWUJsoAuJWFt58mg.woff2) format('woff2'), url(https://fonts.gstatic.com/s/ubuntu/v7/I5PmmDkYShUQg-ah7wh25w.woff) format('woff')}
@font-face {
  font-family:'Ubuntu';
  font-style:normal;
  font-weight:700;
  src:url(https://fonts.gstatic.com/s/ubuntu/v7/1oQ0YSnzWBxeyxAWblfEqg.woff2) format('woff2'), url(https://fonts.gstatic.com/s/ubuntu/v7/trnbTfqisuuhRVI3i45C5w.woff) format('woff')}/* fonts */
*{font-family:"Ubuntu", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size:100%; line-height:100%}

/* styles */
*,:active,:focus{outline:none; outline:none}
form,fieldset{margin:0; padding:0; background:none; border:none}
body{margin:0; padding:0; background:url(../images/bg.jpg) no-repeat fixed 55% 55px #fff}
body,p,li,div,td,th,dl,input,textarea,option,button,form,label{font-size:14px; color:#333}
hr{border:none; height:1px; background:#000}
a img{border:0}
a{color:#000; text-decoration:underline}
a:hover{text-decoration:none}
button,input[type="button"],input[type="submit"],a{cursor:pointer;  margin:0}
fieldset,dd,dl,dt{border:0; margin:0; padding:0}
h1,.content-wrapper form legend{font-size:44px; font-weight:300; margin:0; padding:0; color:red}
h2{font-size:30px; margin:12px 0 0; padding:0; font-weight:300; color:#000}
h2 a {display:block; text-decoration:none; color:#008AD1}
h2 a:hover {text-decoration:underline}
h3{font-size:16px; margin:12px 0 0; padding:0}
:focus{outline:0}

/*===============================*/
/* LAYOUT */
/*===============================*/
/* grid */
div.row, div.column, .djc_subcategory_row, [class*='opg-width'] {box-sizing:border-box}
div.row::before, div.row::after, .djc_subcategory_row::before, .djc_subcategory_row::after {content:" "; display:table}
div.row::after, .djc_subcategory_row::after {clear:both}
div.row div.column, .vm-col-4, .vm-col-5, .width25, .width33, .vm-col-3, .djc_subcategory_row .pull_left {position:relative; float:left}

div.column-1 {width:8.33333333330%}
div.column-2 {width:16.66666666660%}
div.column-3, .vm-col-4, .width25 {width:24.99999999990%}
div.column-4, .width33, .vm-col-3 {width:33.33333333330%}
div.column-5 {width:41.33333333330%}
div.column-6 {width:49.99999999990%}
div.column-7 {width:58.33333333330%}
div.column-8 {width:66.66666666660%}
div.column-9 {width:74.99999999990%}
div.column-10 {width:83.33333333330%}
div.column-11 {width:91.66666666660%}
div.column-12 {width:100%}

.opg-width-large-1-1 {width:100%}
.opg-width-large-1-2, .opg-width-large-2-4, .opg-width-large-3-6, .opg-width-large-5-10 {width:50%}
.opg-width-large-1-3, .opg-width-large-2-6 {width:33.333%}
.opg-width-large-2-3, .opg-width-large-4-6 {width:66.666%}
.opg-width-large-1-4 {width:25%}
.opg-width-large-3-4 {width:75%}
.opg-width-large-1-5, .opg-width-large-2-10, .vm-col-5 {width:20%}
.opg-width-large-2-5, .opg-width-large-4-10 {width:40%}
.opg-width-large-3-5, .opg-width-large-6-10 {width:60%}
.opg-width-large-4-5, .opg-width-large-8-10 {width:80%}
.opg-width-large-1-6 {width:16.666%}
.opg-width-large-5-6 {width:83.333%}
.opg-width-large-1-10 {width:10%}
.opg-width-large-3-10 {width:30%}
.opg-width-large-7-10 {width:70%}
.opg-width-large-9-10 {width:90%}


.main-width{width:80%; max-width:1300px; margin:auto}
.middle-wrapper{width:100%; clear:both; padding:46px 0 0; overflow:hidden}
body.index .middle-wrapper {padding:16px 0 0}
/* top wrapper */
.top-wrapper{width:100%; overflow:hidden; clear:both}
.top-wrapper .main-width {height:210px; position:relative}

/* logo  */
.top-wrapper a.logo{display:block; text-decoration:none; position:absolute; top:25px; left:0; width:306px; height:65px; background:url(../images/logo.png) no-repeat}
.top-wrapper .slogan p {position:absolute; top:71px; font-size:22px; color:#000; font-weight:300}
.top-wrapper .contact p {position:absolute; top:71px; right:0; font-size:22px; color:#000; font-weight:300}
.top-wrapper .contact p strong {color:#0F91D4; font-weight:700}

/* menu */
.top-wrapper div.menu {position:absolute; bottom:0; left:0; background:#333; height:65px; z-index:1000; width:100%; box-sizing:border-box}
.top-wrapper div.menu ul{margin:0; padding:0; width:100%; box-sizing:border-box; float:left}
.top-wrapper div.menu li{list-style:none; display:inline; margin:0 2px}
.top-wrapper div.menu li a{height:15px; padding:25px 27px 23px 25px; text-decoration:none; color:#fff; display:block; float:left; font-size:15px; text-transform:uppercase; background:url(../images/menu-sep.jpg) no-repeat 100% 2px; letter-spacing:1px}
@media only screen and (min-width:980px) {
.top-wrapper.hidden div.menu {position:fixed; bottom:inherit; top:0; width:100%; height:40px}
.top-wrapper.hidden div.menu ul {border:none; width:940px; margin:auto; float:none}
.top-wrapper.hidden div.menu li a {height:12px; font-size:12px; padding:14px}
.top-wrapper.hidden div.menu ul li.active a {padding:12px 14px 14px}
}
.top-wrapper div.menu li.active a,div.top-wrapper div.menu li a:hover{background:url(../images/menu-sep.jpg) no-repeat 100% 2px #4d4d4d; border-bottom:2px solid red}

/* promo wrapper */
.promo-wrapper {position:relative; float:left; width:100%; clear:both}
/* ... arguments */
.promo-wrapper .arguments {float:left; white-space:nowrap; padding:10px 0 0}
.promo-wrapper .arguments ul {margin:0; padding:0; list-style:none}
.promo-wrapper .arguments ul li {display:block; padding:10px; background:url(../images/bg-white-90.png); float:left; clear:both; margin:1px 0; font-size:20px; color:#000}
.promo-wrapper .arguments ul li strong {display:inline-block; overflow:hidden; background:url(../images/ruukki-s.png) no-repeat 50% 50%; width:90px; height:20px; text-indent:-9999px}
.promo-wrapper .arguments a {display:block; float:left; clear:both; margin:10px 0 0; padding:20px; background:red; color:#fff; font-size:20px; text-decoration:none}

/* ... awards */
.promo-wrapper .awards {float:right; background:url(../images/bg-white-90.png); width:280px; min-height:350px; border-top:3px solid red}
.promo-wrapper .awards .partner {background:url(../images/ruukki-partner.png) no-repeat 50% 50%; height:64px; width:100%; overflow:hidden; clear:both; text-indent:-9999px; margin:15px 0 10px}
.promo-wrapper .awards .rating p {text-align:center; padding:0 10px 120px; background:url(../images/reiting3860.png?v=1) no-repeat 50% 100%; font-size:14px; color:#666; margin:10px 0}
.promo-wrapper .awards .rating p.est {background:url(../images/reiting-2016.png) no-repeat 50% 100%}
.promo-wrapper .awards .rating p.aaa-2018 {background:url(../images/reiting-2018.png) no-repeat 50% 100%}

/* left wrapper */
.left-wrapper{width:180px; float:left; background:#f5f5f5; overflow:hidden; padding:10px; min-height:300px; overflow:hidden}
.left-wrapper h3{margin:0; padding:0}
.left-wrapper .menu ul,.left-wrapper .categories ul{margin:0; padding:0; list-style:none}

/* ... categories */
.left-wrapper .categories a{display:block; padding:3px; text-decoration:none}
.left-wrapper .categories li#current a.level1{}
.left-wrapper .categories ul ul{display:none}
.left-wrapper .categories ul li.active ul{display:block}
.left-wrapper .categories ul ul a{padding:3px 3px 3px 10px}

/* content wrapper */
.content-wrapper{width:730px; float:left; min-height:300px; padding:0 0 10px 10px; background:#fff}
.content-wrapper *{line-height:130%}
.content-wrapper.single-col{padding:30px; width:100%; clear:both; box-sizing:border-box}
body.index .content-wrapper.single-col {padding:10px 0}
.content-wrapper.three-col{padding:0 10px 10px; width:570px}
.content-wrapper .location{background:#fff; clear:both; padding:5px; background:#f5f5f5; margin:0 0 10px}
.content-wrapper table{width:100%; border-collapse:collapse; border-spacing:0}
.content-wrapper th{padding:5px; background:url(../images/th-bg.jpg) repeat-x #cdcdcd; padding:5px 10px; font-size:12px}
.content-wrapper p{margin:0; padding:0 0 12px}
.content-wrapper .spearheadfacebooklike{float:right}
.content-wrapper textarea,.content-wrapper input[type="text"],.content-wrapper input[type="password"],.content-wrapper input[type="email"],.content-wrapper select,.content-wrapper button,.checkout-bottom .vm-button-correct{background:#fff; border:1px solid #ccc; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075); -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075); box-shadow:inset 0 1px 1px rgba(0,0,0,0.075); -webkit-transition:border linear .2s box-shadow linear .2s; -moz-transition:border linear .2s box-shadow linear .2s; -ms-transition:border linear .2s box-shadow linear .2s; -o-transition:border linear .2s box-shadow linear .2s; transition:border linear .2s box-shadow linear .2s; line-height:140%; padding:3px}
.content-wrapper textarea:focus,.content-wrapper input[type="text"]:focus,.content-wrapper input[type="password"]:focus,.content-wrapper select:focus{border-color:#666; outline:0; outline:thin dotted \9; -webkit-box-shadow:inset 0 1px 1px #999, 0 0 8px #ccc; -moz-box-shadow:inset 0 1px 1px #999, 0 0 8px #ccc; box-shadow:inset 0 1px 1px #999, 0 0 8px #ccc}
.content-wrapper input[type="submit"],.content-wrapper input[type="button"],.content-wrapper button[type="submit"],.content-wrapper button[type="reset"],.checkout-bottom .vm-button-correct{background:red; color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,0.25); padding:15px 40px; border:none}
.content-wrapper textarea{width:300px; height:120px}
.content-wrapper img{max-width:100%}
.content-wrapper ul {margin:0; padding:0; list-style:none}
.content-wrapper ul li {display:block; padding:4px 0 4px 20px; background:url(../images/li-bullet.jpg) no-repeat 0 7px}

/* contact form */
@media only screen and (min-width:980px) {
.rsform.feedback {padding-left:15px}
}
.rsform.feedback .formControls input.rsform-input-box, .rsform.feedback textarea {box-sizing:border-box; width:90%; padding:5px}

/* right wrapper */
.right-wrapper{width:180px; float:right; background:#f5f5f5; overflow:hidden; padding:10px; min-height:300px}
.right-wrapper .login label{display:block}
.right-wrapper .login #form-login-remember label{display:inline}
.right-wrapper .login ul{margin:0; padding:10px 0 0; list-style:none}

/* footer wrapper */
.footer-wrapper{width:100%; height:60px; clear:both; position:relative; background:#eee; margin:4px 0 70px; overflow:hidden}
.footer-wrapper p {text-align:center; padding:24px 0; font-size:12px; margin:0}

/* COMPONENTS */

/* com - content - featured/blog */
.blog-featured ul.actions{margin:0; padding:0; list-style:none; text-align:right}
.blog-featured ul.actions li{display:inline}
.category-desc img {margin:0 20px 10px 0; float:left}
.category-desc .txt {overflow:hidden}
.category-desc p, .category-desc div {overflow:hidden}
.items-row{width:100%; float:left; clear:both}
.items-row .img-intro-right{float:right; margin:0 0 10px 10px}
.items-row .img-intro-left{margin:0 auto 10px}
.items-row.cols-2 .item{width:48%}
.items-row.cols-2 .column-1{float:left; padding:0 2% 0 0}
.items-row.cols-2 .column-2{float:right; padding:0 0 0 2%}

.items-row.cols-4 .item{width:23%; text-align:center}
.items-row.cols-4 .column-1{float:left; padding:0 2% 0 0}
.items-row.cols-4 .column-2{float:left; padding:0 1%}
.items-row.cols-4 .column-3{float:left; padding:0 1%}
.items-row.cols-4 .column-4{float:right; padding:0 0 0 2%}
.items-row.cols-4 .item h2 {font-size:16px}
.items-row.cols-4 .item p {margin:0; padding:0}
.items-row.cols-4 .item p.readmore a {display:inline-block; padding:5px; background:red; color:#fff; margin:10px 0 0; text-decoration:none}

.row-separator{width:100%; float:left; clear:both}
.blog-featured .items-leading h3 {display:none}
.blog-featured .items-leading .leading-0 {width:60%; float:left}
.blog-featured .items-leading .leading-1 {width:40%; float:right}
.blog-featured .items-leading h2 {padding:0 0 10px}
.blog-featured .items-leading h2 strong {display:inline-block; background:url(../images/ruukki-m.png) no-repeat; width:120px; height:30px; overflow:hidden; text-indent:-9999px}
.blog-featured .items-leading .leading-0 h2 {color:#666}
.blog-featured .items-leading .leading-1 h2 {color:#008AD1}
.blog-featured .items-leading ul {margin:0; padding:10px 0; list-style:none}
.blog-featured .items-leading ul li {display:block; background:url(../images/li-bullet.jpg) no-repeat 0 50%; padding:4px 0 4px 15px}
.blog-featured .items-leading p {font-size:13px}

/* com - content - article */
.item-page ul.actions{margin:0; padding:0; list-style:none; text-align:right}
.item-page ul.actions li{display:inline}
.item-page .img-fulltext-right{float:right; margin:0 0 10px 10px}
.item-page .img-fulltext-left{float:left; margin:0 10px 10px 0}
.item-page .txt {overflow:hidden}

/* ... categories */
.categories-bottom {width:100%; clear:both; overflow:hidden; border-top:2px solid red; margin:15px 0 0; float:left}
.categories-bottom div {width:33%; float:left; padding:20px 0; background:url(../images/line-red-arrow.jpg) no-repeat 50% -2px}
.categories-bottom div .img {float:left; padding-right:10px}
.categories-bottom div h3 {font-weight:normal; margin:0; padding:0; font-size:16px; overflow:hidden}
.categories-bottom div h3 a {display:block; text-decoration:none; padding:20px 0 0}
.categories-bottom div h3 a:hover {text-decoration:underline}

/* ... pagination */
div.pagenav {width:100%; clear:both; overflow:hidden; display:none}
ul.pagenav {display:block; list-style:none; clear:both; overflow:hidden; margin:0; padding:0; float:left; width:100%; height:30px}
ul.pagenav li {display:inline; padding:0; margin:0; background:none}
ul.pagenav li.pagenav-next {float:right}
ul.pagenav li a {display:inline-block; background:#333; color:#fff; padding:5px; text-decoration:none}
ul.pagenav li a:hover {background:red}

body.products-page div.pagenav {display:block}

/* com - search */
.search-results .result-title{font-size:16px; margin:16px 0 0}
.search-results .result-category{display:none}
.search-results .highlight{background:#FF0}

/* SYSTEM */
.invalid{border-color:red!important; background:#ffd}
label.invalid{background:#fff; color:red}
span.star,strong.red,.formRequired span{color:red; font-size:18px}
span.spacer span.text,.searchintro{display:block; padding:5px; border:1px solid #eee; background:#f5f5f5; margin:5px 0}
#system-message-container *,.formRed{list-style:none; margin:0; padding:0; color:#000; background:#FFc; overflow:hidden; clear:both}
#system-message dt{display:block; padding:5px; font-weight:700; display:none}
#system-message .message ul,.formRed{display:block; padding:5px; margin:0}
a[href="http://www.faboba.com"]{display:none!important}
#userForm ol{margin:0; padding:0; list-style:none}
.formNoError{display:none}
.formError{color:#900; font-size:12px; font-weight:700; display:block}
.formFieldset legend{display:none}
.clear,.clr{width:100%; clear:both; overflow:hidden}

/* Tooltips */
.tip{float:left; background:#ffc; border:1px solid #D4D5AA; padding:5px; max-width:200px}
.tip *{font-size:12px}
.tip-title{font-weight:700; margin:-15px 0 0; padding:15px 0}
.tip-text{margin:0}

/* slider core */
div.anythingSlider{display:block; float:left; overflow:visible!important; margin:0}
div.anythingSlider .anythingWindow{overflow:hidden; position:relative; width:100%; height:100%}
.anythingBase{background:transparent; list-style:none; position:absolute; overflow:visible!important; top:0; left:0; margin:0; padding:0}
.anythingBase .panel{background:transparent; display:block; overflow:hidden; float:left; margin:0; padding:0}
.anythingBase .panel.vertical{float:none}
div.anythingSlider .arrow{position:absolute; display:block}
div.anythingSlider .arrow a span{display:block; visibility:hidden}
div.anythingSlider .back{left:0}
div.anythingSlider .forward{right:0}
div.anythingSlider.rtl .anythingWindow{direction:ltr; unicode-bidi:bidi-override}
div.anythingSlider,div.anythingSlider .anythingWindow,div.anythingSlider .anythingControls ul a,div.anythingSlider .arrow a,div.anythingSlider .start-stop{transition-duration:0; -o-transition-duration:0; -moz-transition-duration:0; -webkit-transition-duration:0}
div.anythingSlider .back.disabled,div.anythingSlider .forward.disabled{display:none}

/* fancybox */
.fancybox-tmp iframe,.fancybox-tmp object{vertical-align:top; padding:0; margin:0}
.fancybox-wrap{position:absolute; top:0; left:0; z-index:8020}
.fancybox-skin{position:relative; padding:0; margin:0; background:#f9f9f9; color:#444; text-shadow:none}
.fancybox-opened{z-index:8030}
.fancybox-opened .fancybox-skin{-webkit-box-shadow:0 10px 25px rgba(0,0,0,0.5); -moz-box-shadow:0 10px 25px rgba(0,0,0,0.5); box-shadow:0 10px 25px rgba(0,0,0,0.5)}
.fancybox-outer,.fancybox-inner{padding:0; margin:0; position:relative; outline:none}
.fancybox-inner{overflow:hidden}
.fancybox-type-iframe .fancybox-inner{-webkit-overflow-scrolling:touch}
.fancybox-error{color:#444; margin:0; padding:10px}
.fancybox-image,.fancybox-iframe{display:block; width:100%; height:100%; border:0; padding:0; margin:0; vertical-align:top}
.fancybox-image{max-width:100%; max-height:100%}
#fancybox-loading,.fancybox-close,.fancybox-prev span,.fancybox-next span{background-image:url(../js/fancybox/fancybox_sprite.png)}
#fancybox-loading{position:fixed; top:50%; left:50%; margin-top:-22px; margin-left:-22px; background-position:0 -108px; opacity:0.8; cursor:pointer; z-index:8020}
#fancybox-loading div{width:44px; height:44px; background:url(../js/fancybox/fancybox_loading.gif) center center no-repeat}
.fancybox-close{position:absolute; top:-18px; right:-18px; width:36px; height:36px; cursor:pointer; z-index:8040}
.fancybox-nav{position:absolute; top:0; width:40%; height:100%; cursor:pointer; background:transparent url(../js/fancybox/blank.gif); -webkit-tap-highlight-color:rgba(0,0,0,0); z-index:8040}
.fancybox-prev{left:0}
.fancybox-next{right:0}
.fancybox-nav span{position:absolute; top:50%; width:36px; height:34px; margin-top:-18px; cursor:pointer; z-index:8040; visibility:hidden}
.fancybox-prev span{left:20px; background-position:0 -36px}
.fancybox-next span{right:20px; background-position:0 -72px}
.fancybox-nav:hover span{visibility:visible}
.fancybox-tmp{position:absolute; top:-9999px; left:-9999px; padding:0; overflow:visible; visibility:hidden}
#fancybox-overlay{position:absolute; top:0; left:0; overflow:hidden; display:none; z-index:8010; background:#000}
#fancybox-overlay.overlay-fixed{position:fixed; bottom:0; right:0}
.fancybox-title{visibility:hidden; position:relative; text-shadow:none; z-index:8050}
.fancybox-opened .fancybox-title{visibility:visible}
.fancybox-title-float-wrap{position:absolute; bottom:0; right:50%; margin-bottom:-35px; z-index:8030; text-align:center}
.fancybox-title-float-wrap .child{display:inline-block; margin-right:-100%; padding:2px 20px; background:transparent; background:rgba(0,0,0,0.8); text-shadow:0 1px 2px #222; color:#fff; font-weight:700; line-height:24px; white-space:nowrap}
.fancybox-title-outside-wrap{position:relative; margin-top:10px; color:#fff}
.fancybox-title-inside-wrap{margin-top:10px}
.fancybox-title-over-wrap{position:absolute; bottom:0; left:0; color:#fff; padding:10px; background:#000; background:rgba(0,0,0,.8)}
#fancybox-thumbs{position:fixed; left:0; width:100%; overflow:hidden; z-index:8050}
#fancybox-thumbs.bottom{bottom:2px}
#fancybox-thumbs.top{top:2px}
#fancybox-thumbs ul{position:relative; list-style:none; margin:0; padding:0}
#fancybox-thumbs ul li{float:left; opacity:0.5; padding:1px}
#fancybox-thumbs ul li.active{opacity:0.75; border:1px solid #fff; padding:0}
#fancybox-thumbs ul li:hover{opacity:1}
#fancybox-thumbs ul li a{display:block; position:relative; overflow:hidden; border:1px solid #222; background:#111; outline:none}
#fancybox-thumbs ul li img{display:block; position:relative; border:0; padding:0}

#fancybox-buttons{left:0;position:fixed;width:100%;z-index:8050}#fancybox-buttons.top{top:10px}#fancybox-buttons.bottom{bottom:10px}#fancybox-buttons ul{-moz-box-shadow:0 1px 3px #000,0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.05);-webkit-box-shadow:0 1px 3px #000,0 0 0 1px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.05);border-radius:3px;display:block;height:30px;list-style:none;margin:0 auto;padding:0;width:170px}#fancybox-buttons ul li{float:left;margin:0;padding:0}#fancybox-buttons a{background-image:url(fancybox_buttons.html) ;display:block;height:30px;outline:none;text-indent:-9999px;width:30px}#fancybox-buttons a.btnPrev{background-position:6px 0;width:32px}#fancybox-buttons a.btnNext{background-position:-33px 0;border-right:1px solid #3e3e3e}#fancybox-buttons a.btnPlay{background-position:0 -30px}#fancybox-buttons a.btnPlayOn{background:-30px -30px}#fancybox-buttons a.btnToggle{background-position:3px -60px;border-left:1px solid #111;border-right:1px solid #3e3e3e;width:35px}#fancybox-buttons a.btnToggleOn{background:-27px -60px}#fancybox-buttons a.btnClose{background-position:-57px 0;border-left:1px solid #111;width:38px}#fancybox-buttons a.btnDisabled{cursor:default;opacity:0.5}