/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Reset
- Grid
- Base Styles
- Typography
- Links
- Clearing
- Media Queries

pink color: FA1C5F

orange primary color: ca373d
*/

/* Reset
–––––––––––––––––––––––––––––––––––––––––––––––––– */

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;
	width: 100%;
}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 85%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
	font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
	line-height: 1.6;
	font-weight: 300;
	font-family: 'Roboto', sans-serif;
	color: #ddd;
	background: #000;
}

img {
	display: block;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 5px;
  font-weight: 300; }
h1 { font-size: 2.4rem; line-height: 1.35;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; font-weight: 700; font-style: italic; }

h2.mtb, h2.moto {
	font-size: 28px;
}

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 3.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 1.6rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a:link, a:visited{
	color: #fff; 
	text-decoration: none;
}
a:hover, a:active{
  color: #ca373d; }
  
  a {
	  outline: none;
  }
  
 /* text selection
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  ::selection {
  background: #000; /* WebKit/Blink Browsers */
  color: #ca373d;
}
::-moz-selection {
  background: #000; /* Gecko Browsers */
  color: #ca373d;
}


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }
  
.clear {
	clear: both;
}
.clear-right{
	clear: right;
}
  
/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
  
header {
	position: absolute;
	top: 0;
	width: 100%;
	max-width: 1680px;
 }
.logo {
	padding: 20px 0px;
	
}
.logo-link {
	display: inline;
	float: left;
	width: 100%;
	max-width: 135px;
}

@media (min-width: 550px) {
	.logo {
		padding: 20px 0px;
		width: 100%;
	}
	.logo-link {
		max-width: 265px;
	}
}

nav {
	float: left;
	font-size: 0.8em;
}
@media (min-width: 400px) {
	nav {
		font-size: 0.9em;
	}
}
@media (min-width: 700px) {
	nav {
		float: right;
	}
}
.lgbar {
	display: inline-block;
	text-align: right;
	padding-right: 8px;
	float: right;
}
.lgbar img {
	display: inline-block;
	padding-top: 20px;
}
@media (min-width: 450px) {
	.lgbar img {
		padding-top: 8px;
	}
}
nav ul {
	padding-top: 0px;
}
nav ul li {
	display: inline-block;
	font-weight: 700;
	font-style: italic;
	font-size: 1.2em;
}
nav ul li a {
	padding: 3px 6px;
}
@media (min-width: 400px) {
	nav ul li a {
		padding: 5px 8px;
	}
}
.coverwrapper {
	width: 100%;
	max-width: 1680px;
	margin: 0 auto;
}
.coverimage {
	position: relative;
	z-index: -10;
}
.coverimage img {
	padding-top: 100px;
	width: 100%;
}
@media (min-width: 700px) {
	.coverimage img {
		padding-top: 40px;
	}
}
h2.mtb {
	position: absolute; 
	bottom: 20px; 
	left: 40px;
	font-weight: 900;
	font-style: italic;
}
h2.moto {
	position: absolute; 
	bottom: 20px; 
	right: 40px;
	font-weight: 900;
	font-style: italic;
}

.maintitle {
	text-align: center;
	font-weight: 300;
	padding: 30px 0;
}

.cane {
	width: 100%;
}
.extraspacing {
	padding: 60px 0;
}
.extrabottom {
	padding-bottom: 40px;
}
.wrapperinverted {
	background: #fff;
	color: #000;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	margin-bottom: -8px;  /* skew bottom fix */
}
.wrapperinverted .skew {
	width: 100%;
	left: 0;
	right: 0;
	display: inline;
}
.ft {
	background: #000000;
	padding-top: 58px;
}
footer {
	background: #000;
	padding: 40px 0;
	color: #aaa;
	font-size: 0.9em;
	z-index: -10;
}
footer a:link, footer a:visited {
	color: #aaa;
}
footer a:hover, footer a:active {
	color: #ca373d;
}
footer  h6{
	color: #ca373d !important;
}
.flaticon-favorite:hover {
	color:  #ca373d;
}

.footerbottom {
	padding-top: 40px;
	
}
.footerbottom ul li {
	display: inline-block;
}

.footerbottom ul li a {
	padding: 0 8px;
}

.morelink {
	text-align: right;
}

.header {
	width: 100%;
	height: 250px;
	background: #000 url(../img/header.jpg)no-repeat center top;
}

h2.desctitle {
	font-size: 2.3em;
	font-weight: 900;
	font-style: italic;
	padding-top: 90px;
}
h4.text-center {
	text-align: center;
	padding: 20px 0;
}

.pbottom {
	padding-bottom: 40px;
}

.shopicons h3 {
	font-size: 2rem;
	font-style: italic;
	text-align: center;
	color: #6d6e71;
}
.shopicons .three{
	border: 1px solid #ccc;
}

.shopicons .three:hover h3 {
	color: #000;
}

/* Contact form
––––––––––––––––––––––––––––––––––––––––––––––––––*/

input[type="text"] {
	border: 1px solid #000;
	border-radius: 3px;
    color: #ca373d;
    padding: 8px 5%;
    width: 90%;
    background-color: #333;
}
input[type="text"]:focus {
	background-color: #fff;
	color: #000;
}
textarea {
	border: 1px solid #000;
	border-radius: 3px;
    color: #000;
    padding: 8px 5%;
    width: 90%;
    background-color: #333;
}
textarea:focus {
	background-color: #fff;
}
.control-label {
    font-weight: 400;
    margin: 10px 0;
    display: inline-block;
}
.contact-btn {
	padding: 8px 5%;
    width: 50%;
    margin-top: 10px;
    border: 1px solid #000;
	border-radius: 3px;
	background-color: #333;
	color: #ddd;
	font-weight: 400;
	font-size: 0.9em;
}
.contact-btn:hover {
	background-color: #ca373d;
	color: #000;
}
.contact-title {
	font-weight: 400;
    padding: 30px 0;
    text-align: center;
    font-size: 3.6rem;
}
.small-title {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 1px;
    margin: 10px 0;
    color: #ca373d;
}
.contact-text {
	font-size: 14px;
	font-weight: 400;
}
#map {
    width: 100%;
    height: 420px;
	margin-top: 30px;
}

input[type="text"].wrong {
	border: 1px solid #ca373d;
}


/* Webshop
––––––––––––––––––––––––––––––––––––––––––––––––––*/
.product {
	position: relative;
}
.product .product-link {
	width: 100%;
}
.product  img{
	width: 100%;
}
.product:hover {
	background: #eee;
}
.product img {
	width: 100%;
}
.product h5 {
	padding: 10px 10px 0px 10px;
	border-top: 1px solid #b7b8ba;
	margin-bottom: 0;
	height: 48px;
	max-height: 48px;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	font-style: italic;
	font-weight: bold;
	color: #666;
	hyphens: auto;
}
.product .code, .product .name {
	padding-left: 10px;
	padding-right: 10px;
}
.product .name {
	font-size: 1.6em;
	font-weight: 700;
	font-style: italic;
	color: #666;
}
.product .description {
	padding: 0px 10px;
	font-size: 13px;
	min-height: 83.2px;
}
.product .price {
	font-weight: 700;
	text-align: center;
	font-size: 1.6em;
	color: #666;
}
.product .price span span{
	font-size: 10px;
	
}
.product .product-icons {
	text-align: right;
}
.product .product-icons .addtocart, .product .product-icons .quickview {
	border: none;
	background: #fff;
	padding: 0;
}
.product .product-icons svg {
	width: 20px;
	height: 20px;
	margin: 5px;
}
.product .product-icons svg .svgbg {
	fill: #666;
}
.product:hover .product-icons .addtocart, .product:hover .product-icons .quickview {
	background: #eee;
}
.product:hover .product-icons .addtocart:hover, .product:hover .product-icons .quickview:hover {
	cursor: pointer;
}
.product:hover .product-icons svg .svgbg {
	fill: #666;
}
.product:hover .product-icons .addtocart:hover svg .svgbg, .product:hover .product-icons .quickview:hover svg .svgbg {
	fill: #000;
}

.product select {
	width: 100%;
	max-width: 280px;
}

@media (min-width: 550px) {
	.product .product-icons svg .svgbg {
		fill: #fff;
	}
}

/* Vertical accordio service page
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button.accordion {
    background-color: #000;
    color: #fff;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #000;
	color: #ca373d;
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

/* Custom CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
form.product-item {
	/*display: inline-block;*/
}
form.product-item select{
	max-width: 240px !important;
}
.ajaxcart {
	position: relative;
}
.ajaxcart .pos{
	float: right;
	padding: 10px 25px 10px;
	background: #000;
	color: #fff;
	white-space: nowrap;
}
.ajaxcart .pos a:link {
	padding: 0;
}

.cart-box {
	display: inline-block;
	width: 30px;
	background: #000;
	padding: 4px 8px 4px 8px;
	color: #fff;
	font-family: Arial;
	font-size: 16px;
	text-decoration: none;
	font-weight: bold;
}
.cart-box:hover{
	background: #000 url(../images/cart-icon.png) no-repeat 20px 5px;
	color: #ca373d;
}
#scrollingDiv {
	width: 100%;
	max-width: 450px;
	float: right;
}

.shopping-cart-box{ 
	position: absolute;
    right:0;
	top: 52px;
    margin-left:auto;
    margin-right:auto;
	width: 100%;
	color: #fff;
	background: #000;
	border-radius: 4px;
	padding: 10px;
	font: small Verdana, Geneva, sans-serif;  
	margin-top: 10px;
	display:none;
	z-index: 999;
}
.shopping-cart-box a{
	color: #fff;
	text-decoration:none;
}
.shopping-cart-box:after {
	content: '';
	position: absolute;
	bottom: 100%;
	right: 38px;
	width: 0; height: 0;
	border-bottom: 8px solid rgba(0, 0, 0, 1);
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
}
.shopping-cart-box ul.cart-products-loaded{
	margin: 0;
	padding: 0;
	list-style: none;
}
.shopping-cart-box .close-shopping-cart-box{
  float: right;
}
#shopping-cart-results {
	padding-top: 17px;
}
#shopping-cart-results table {
    border-collapse: collapse;
}
#shopping-cart-results table th {
	color: #ca373d;
	font-weight: 700;
	font-style: italic;
	border-bottom: 1px solid #707173;
}
#shopping-cart-results table td.bor {
	border-top: 1px solid #707173;
}
#shopping-cart-results table th, #shopping-cart-results table td{
	padding-right: 5px;
}
#shopping-cart-results .checkout-button {
	padding: 5px 15px;
	border: 1px solid #ca373d;
	color: #ca373d;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#shopping-cart-results .checkout-button:hover {
	border: 1px solid #fff;
	color: #fff;
}


h3.pricetitle {
	font-size: 1.6em;
	padding: 10px 0;
}
.pdf {
	width: 90px;
	height: 80px;
}
.pricesubtitle {
	font-weight: 700;
	font-style: italic;
	font-size: 0.8em;
}
.service a {
	display: inline-block;
}
td,th {
	text-align: left;
	padding: 8px 0;
}
.zeromargin {
	margin-left: 0 !important;
}
.toolbar a:link, .toolbar a:visited{
	color: #666;
}
.toolbar a:hover,  .toolbar a:active{
	color: #ca373d;
}
.toolbar ul {
	padding-bottom: 15px;
}
.btop {
	border-top: 1px solid #fff;
}
.bbottom {
	border-bottom: 1px solid #fff;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}
table.productstable th {
	font-style: italic;
	color: #ca373d;
}
.paypalbuy button {
	background: #000;
	border: none;
	padding-right: 0px;
}
.paypalbuy button:hover {
	cursor: pointer;
}
.img-responsive {
	width: 100%;
	display: block;
}
.single-image {
	max-width: 350px;
	margin: 0 auto;
	display: block;
}

.category-title {
	color: #ca373d;
	font-weight: 700;
	font-style: italic;
	border-bottom: 1px solid #b7b8ba;
}
.bold {
	font-weight: 900;
	font-style: italic;
	margin-top: 10px;
	color: #ca373d;
}
.text-contact-us {
	color: #ca373d;
}
.mini-title {
	text-transform: uppercase;
	color: #ca373d;
}
.setting-suspension {
	color: #ca373d;
	font-style: italic;
	padding: 10px 0;
}
.price {
	padding: 20px 0 10px 0;
	color: #ca373d;
	font-weight: 700;
	font-style: italic;
	font-size: 1.4em;
	border-bottom: 1px solid #b7b8ba;
}
.description {
	padding-top: 20px;
}
.code {
	padding-top: 20px;
}
.product-item svg{
	width: 20px;
	height: 20px;
	margin: 5px;
}
.product-item button {
	background: none;
	border: none;
	margin-top: 10px;
}
.product-item button:hover {
	cursor: pointer;
}
.strike {
	text-decoration: line-through;
	font-size: 0.6em;
}
.from {
	font-size: 0.6em;
}
.postotak {
	font-size: 0.5em;
	color: #ca373d;
}
.popust {
	color:  #ca373d;
}
.message {
	color:#ca373d;
	font-weight:400;
	padding: 20px 0;
}
.pricetitle {
	color:  #ca373d;
	font-style: italic;
}
.model {
	font-size: 1.4em;
	color: #ca373d;
	padding-top: 10px;
	font-style: italic;
}
.servicetype {
	padding-top: 10px;
}
.text-right {
	text-align: right;
	/*color: #ca373d;*/
}
.product-icons {
	min-height: 70.8px;
}
ul.social-icons li {
	display: inline-block;
}

.pull-right {
	float: right;
}

.spacer {
	padding-top: 50px;
}
.ship-active, .pay-active {
	color: #ca373d;
}

.availability {
	text-align: center;
	font-size: 13px;
	height: 20.8px;
}
.availability.in-stock {
	color: #11CD11;
}
.availability.not-in-stock {
	color: #ca373d;
}

.availability.not-available {
	color: #cd1111;
}

/*Tabs */
.tabcontent {
    display: none;
}

.tabcontent {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

.service-price {
	color: #ca373d;
}
.discount-price {
	color: #ca373d;
}

.cookie-notification {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 10px 0;
	background: black;
	border-top: 1px solid #ca373d;
}
.cookie-notification svg #close {
	fill: #fff;
}
.cookie-notification svg:hover #close {
	fill: #ca373d;
	cursor: pointer;
}
.cookie-notification .cookie-right {
	float: right;
	padding-right: 10px;
 }
 .cookie-notification .cookie-left {
	 padding: 0 10px;
	float: left;
 }
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 553px) {
}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}