/*
* Company: Trucks.nl
* Author: Michel Cuppen
*/

body    {background-image: url(../img/bg.gif);}

/*.bg     {position:absolute;z-index:-1;width:100%;height:80%;top:0;left:0;background:url(../img/bg1.jpg) no-repeat;background-size:cover;}*/
.bg {position:fixed;z-index:-1;width:100%;height:100%;top:0;left:0;background-image:url(../img/bg-static-wix.png);}

header  {background-color:#FFF;margin-top:40px;}

header  .logo   {padding:30px 0 0 0;text-align:center;}
header  .logo   img {width:80%;max-width:700px;display:inline-block;}

header  .langs  {text-align:center;padding-bottom: 20px;}
header  .langs:after{display:block;content:'';clear:both;}
header  .flag   {display:inline-block;height:30px;width:30px;margin:0 8px;background:url(../img/icons_flags.png) no-repeat;font-size:0;opacity:.6;}
header  .flag.activ {opacity:1;}
header  .flag.nl{background-position:-10px -10px;}
header  .flag.en{background-position:-60px -10px;}
header  .flag.de{background-position:-110px -10px;}
header  .flag.fr{background-position:-10px -60px;}

.iconsm {display:inline-block;height:30px;width:30px;margin:0 8px;font-size:0;}
.iconsm.fb {background:url(../img/icon-facebook.png) no-repeat;}
.iconsm.in {background:url(../img/icon-instagram.png) no-repeat;}

nav {background:#000;padding:0px 0;}
nav ul  {margin:0;list-style:none;text-align:center;font-size:2rem;}
nav ul  li  {display:inline-block;line-height:54px;margin:0 10px;height:100%;}
nav ul  li  a   {color:#FFF;text-decoration:none;padding:15px; font-weight:bold;}
nav ul  li:hover    a,
nav ul  li.activ    a   {color:red;font-weight:bold;}

.tel {color: white;
font-size:20px;
font-weight:bold;}

.rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; margin-bottom:20px;}
.rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0;}
.rslides li:first-child { position: relative; display: block; float: left;}
.rslides img { display: block; height: auto; float: left; width: 100%; border: 0; border-bottom: red 6px solid; margin-top: 20px;}

.cnav   {padding:15px;background:#000;margin:20px 0;text-align:center;}
.cnav   h1  {margin:0;color:red;font-weight:bold;}

.content{background-color:#575656;height:100%;}

.card   {overflow:hidden;}
.card   a   {text-decoration:none;display:block;}
.card   figure {margin:0;overflow:hidden;text-align:center;}
.card   figure img {width:100%;display:block;}
.card   .txtbox {background:#575656;text-align:center;padding:20px 0;}
.card   .txtbox h5  {color:#0074ba;font-size:2.4rem;font-weight:bold;margin-bottom:10px;}
.card   .txtbox p   {margin:0;}

.slider {overflow:hidden;max-height:400px;margin-bottom:40px;}
.slider img {width:100%;}

footer  {background:#575656;padding:15px 0;margin-top:40px;}
footer  img {width:90%;margin:0 5%;max-width:301px;}
footer  p   {margin:0 5%;}
footer  span{margin-left:5%;}

/*footer  {background:#1c3766;color:#D4DFE3;}
footer  h3  {color:#D4DFE3;}
footer  span{color:#87AEBF;}*/


span.icon.mail  {padding:5px 21px;background:url(../img/icon_mail.png) no-repeat;}
span.icon.call  {padding:5px 16px;background:url(../img/icon_call.png) no-repeat;}
.button:hover > span.icon   {background-position:0px -30px;}

.photocanvas{overflow:hidden;}
.photocanvas    img {display:block;width:100%;}

.wblock {padding:15px;background:#575656;}

.stock  {text-align:center;}
.stock:after{display:block;content:'';clear:both;}
.stock  .veh    {display:inline-block;color:#8892a1;background:#fff;box-shadow: 0px 1px 1px #333;box-sizing:border-box;width:180px;margin:10px;text-align:left;}
.stock  .veh    a   {display:block;height:216px;overflow:hidden;}
.stock  .veh    .txt{padding:10px;}
.stock  .veh    h6  {font-size:1.5rem;line-height:2.4rem;font-weight:bold;margin:0;height:50px;overflow:hidden;text-align:center;}
.stock  .veh    h6  span{font-weight:bold;}
.stock  .veh    img {display:block;width:100%;}
.stock  .veh    .button {width:100%;border:none;color:#fff;margin:1px 0 0 0;height:30px;line-height:30px;border-radius:0;padding:0 15px;}

h1.sml  {font-size:2.5rem;margin:0;}
.backstock  {display:block;text-align:left;}

.tbl{}
.tbl .tr {clear:both;border-bottom:1px solid #ddd;}
.tbl .tr:last-child {border-bottom:none;}
.tbl .tr:after  {display:block;content:'';clear:both;}
.tbl .tr .th, .tbl .tr .td  {float:left;width:50%;box-sizing:border-box;padding:7px 0;}
.tbl .tr .th{font-weight:bold;}
.tbl .tr .td{}

#viewer {position:relative;}
#viewer .border {position:relative;margin-bottom:2%;}
#viewer .main   {position:relative;}
#viewer .main   img {max-width:100%;}
#viewer .slider {}
#viewer .slider ul  {min-height:113px;list-style:none;}
#viewer .slider ul:after{display:block;content:'';clear:both;}
#viewer .slider ul  li  {float:left;width:32%;margin:0 2% 2% 0;box-sizing:border-box;background-color:#fff;}
#viewer .slider ul  li:nth-child(3n){margin-right:0;}
#viewer .slider ul  li  img {display:block;width:100%;cursor:pointer;}

/*===================================pricetag=====================================*/
.yith-wcbm-css-badge-1251-72 {color: #FFFFFF;font-family: "Open Sans",sans-serif;position: relative;box-sizing: border-box;position: absolute;background-color: transparent;width: 105px;height: 105px;overflow: hidden;top: -4px;bottom: auto;left: auto;right: -4px;opacity: 1;}
.yith-wcbm-css-badge-1251-72 div.yith-wcbm-css-s1 {position: absolute;z-index: 99;top: 0;left: 2px;border-bottom: 4px solid #221f1f;border-left: 3px solid transparent;width: 10px;}
.yith-wcbm-css-badge-1251-72 div.yith-wcbm-css-s2 {position: absolute;z-index: 99;bottom: 2px;right: 0px;border-left: 4px solid #221f1f;border-bottom: 3px solid transparent;height: 10px;}
.yith-wcbm-css-badge-1251-72 div.yith-wcbm-css-text {background: #0074ba;font-size: 16px;font-weight: bold;line-height: 26px;position: absolute;text-align: center;z-index: 100;transform: rotate(45deg);top: 28px;left: -5px;width: 140px;text-align: center;}
/*====================================pricetag====================================*/



#picture1   {display:block;position:absolute;}
#picture2   {display:none;position:absolute;}
#forsize    {display:block;visibility:hidden;}

.hform  {}
.hform  input   {float:left;width:30%;margin-right:5%;}
.hform  input:last-child{margin-right:0;}
.hform  textarea{width:100%;max-width:100%;height:144px;}


#searchbox  {margin:-35px 0 20px 0;background:#fff;padding:15px;}
#searchbox input, #searchbox select, #searchbox radio, #searchbox textarea, #searchbox .button {width:100%;margin-bottom:0;border-color:#bbb;}
#searchbox  .row:first-child    .columns    {margin-bottom:1.2rem;}
#searchbox  .reset  {border-color:#ddd;color:#999;}
#searchbox  .reset:hover{border-color:#aaa;color:#555;}

.nav    {text-align:center;position:relative;margin:10px 0;}
.nav    span.current{border:1px solid #fff;background:#000;cursor:default;}
.nav    .button {background:#000;margin:0;}
.nav    .button.left {/*position:absolute;left:10px;*/margin-right:10px;}
.nav    .button.right{/*position:absolute;right:10px;*/margin-left:10px;}

.gmap   {pointer-events:none;margin:20px 0;}

/* alert paragrafs */
p.warning   {padding:5px 8px;background-color:#f9f2f4;color:#c7254e;border-radius:3px;border-left:3px solid #c7254e;}
p.success   {padding:5px 8px;background-color:#dff0d8;color:#3c763d;border-radius:3px;border-left:3px solid #3c763d;}



/*
* 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
*/
/* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */
.container { position: relative;width: 100%;max-width: 1020px;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: 80%; }
    .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: 600;
    font-family: Helvetica, Arial, sans-serif;
    color: #FFF; }


/* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {margin-top: 0;margin-bottom: 2rem;font-weight: 500; }
h1 { font-size: 3.5rem; line-height: 1.2;  letter-spacing: -.1rem;color:#000;}
h2 { font-size: 3.0rem; line-height: 1.25; letter-spacing: -.1rem; color:#FFF;}
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; color:#000;}
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; color:#000;}
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; color:#000;}
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; color:#000;}

p { margin-top: 0; }

/* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */
a { color: #fff; }
a:hover { color: #fff; }

/* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] { display: inline-block;height: 38px;padding: 0 30px;color: #FFF;text-align: center;font-size: 11px;font-weight: 600;line-height: 38px;letter-spacing: .1rem;text-transform: uppercase;text-decoration: none;white-space: nowrap;background-color: black;border-radius: 4px;border: 1px solid #FFF;cursor: pointer;box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus { color: #FFF;border-color: #888;outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary { color: #FFF;background-color: #000;border-color: white; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus { color: #FFF;background-color: #2e4763;border-color: #253a51; }

/* Forms –––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {height: 38px;padding: 6px 10px;background-color: #000;border: 1px solid #D1D1D1;border-radius: 3px;box-shadow: none;box-sizing: border-box; }
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {-webkit-appearance: none;-moz-appearance: none;appearance: none; }
textarea { min-height: 65px;padding-top: 6px;padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {border: 1px solid #33C3F0;outline: 0; }
label,
legend {display: block;margin-bottom: .5rem;font-weight: 600; }
fieldset {padding: 0;border-width: 0; }
input[type="checkbox"],
input[type="radio"] {display: inline; }
label > .label-body {display: inline-block;margin-left: .5rem;font-weight: normal; }

/* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {list-style: circle inside; }
ol {list-style: decimal inside; }
ol, ul {padding-left: 0;margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {margin: 1.5rem 0 1.5rem 3rem;font-size: 90%; }
li {margin-bottom: 1rem; }

/* Code –––––––––––––––––––––––––––––––––––––––––––––––––– */
code {padding: .2rem .5rem;margin: 0 .2rem;font-size: 90%;white-space: nowrap;background: #F1F1F1;border: 1px solid #E1E1E1;border-radius: 4px; }
pre > code {display: block;padding: 1rem 1.5rem;white-space: pre; }

/* Tables –––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {padding: 12px 15px;text-align: left;border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {padding-left: 0; }
th:last-child,
td:last-child {padding-right: 0; }

/* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {margin-bottom: 2.5rem; }

/* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {width: 100%;box-sizing: border-box; }
.u-max-full-width {max-width: 100%;box-sizing: border-box; }
.u-pull-right {float: right; }
.u-pull-left {float: left; }

/* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */
hr { margin-top: 3rem;margin-bottom: 3.5rem;border-width: 0;border-top: 1px solid #E1E1E1; }

/* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */
.container:after,
.row:after,
.u-cf {content: "";display: table;clear: both; }


/* Media Queries –––––––––––––––––––––––––––––––––––––––––––––––––– */

@media (max-width: 500px) {
    .stock  .veh{width:44%;margin:10px 2%;}
    .stock  .veh    .button{padding:0 5px;}
}

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

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

/* Larger than tablet */
@media (min-width: 750px) {
    header  .logo   {}
    header  .langs  {position:absolute;right:0;top:104px;}
    header  .flag   {display:block;float:left;margin:10px 15px 0 0;}
    .iconsm {display:block;float:left;margin:10px 15px 0 0;}
}

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

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




/*======================lightbox======================*/
.triggerbox {display:block;width:100%;height:100%;position:absolute;z-index:99;top:0;left:0;}
.lghtbx     {display:none;}


/* Preload images */
body:after {content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);display: none;}
body.lb-disable-scrolling {overflow: hidden;}

.lightboxOverlay {position: absolute;top: 0;left: 0;z-index: 9999;background-color: black;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);opacity: 0.8;display: none;}
.lightbox {position: absolute;left: 0;width: 100%;z-index: 10000;text-align: center;line-height: 0;font-weight: normal;}
.lightbox .lb-image {display: block;height: auto;max-width: inherit;border-radius: 3px;}
.lightbox a img {border: none;}

.lb-outerContainer {position: relative;background-color: white;*zoom: 1;width: 250px;height: 250px;margin: 0 auto;border-radius: 4px;}
.lb-outerContainer:after {content: "";display: table;clear: both;}
.lb-container {padding: 4px;}

.lb-loader {position: absolute;top: 43%;left: 0;height: 25%;width: 100%;text-align: center;line-height: 0;}
.lb-cancel {display: block;width: 32px;height: 32px;margin: 0 auto;background: url(../img/loading.gif) no-repeat;}
.lb-nav {position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index: 10;}
.lb-container > .nav {left: 0;}

.lb-nav a {outline: none;background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');}
.lb-prev, .lb-next {height: 100%;cursor: pointer;display: block;}
.lb-nav a.lb-prev {width: 34%;left: 0;float: left;background: url(../img/prev.png) left 48% no-repeat;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;-webkit-transition: opacity 0.6s;-moz-transition: opacity 0.6s;-o-transition: opacity 0.6s;transition: opacity 0.6s;}
.lb-nav a.lb-prev:hover {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity: 1;}
.lb-nav a.lb-next {width: 64%;right: 0;float: right;background: url(../img/next.png) right 48% no-repeat;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;-webkit-transition: opacity 0.6s;-moz-transition: opacity 0.6s;-o-transition: opacity 0.6s;transition: opacity 0.6s;}
.lb-nav a.lb-next:hover {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity: 1;}

.lb-dataContainer {margin: 0 auto;padding-top: 5px;*zoom: 1;width: 100%;-moz-border-radius-bottomleft: 4px;-webkit-border-bottom-left-radius: 4px;border-bottom-left-radius: 4px;-moz-border-radius-bottomright: 4px;-webkit-border-bottom-right-radius: 4px;border-bottom-right-radius: 4px;}
.lb-dataContainer:after {content: "";display: table;clear: both;}

.lb-data {padding: 0 4px;color: #ccc;}
.lb-data .lb-details {width: 85%;float: left;text-align: left;line-height: 1.1em;}
.lb-data .lb-caption {font-size: 13px;font-weight: bold;line-height: 1em;}
.lb-data .lb-number {display: block;clear: left;padding-bottom: 1em;font-size: 12px;color: #999999;}

.lb-data .lb-close {display: block;float: right;width: 30px;height: 30px;background: url(../img/close.png) top right no-repeat;text-align: right;outline: none;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);opacity: 0.7;-webkit-transition: opacity 0.2s;-moz-transition: opacity 0.2s;-o-transition: opacity 0.2s;transition: opacity 0.2s;}
.lb-data .lb-close:hover {cursor: pointer;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity: 1;}