﻿
body {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
}

/* allshoes orange: #f39500 */
/* darker allshoes orange: #df7f03 */


.header-and-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 50;
    -webkit-transition: all .2s ease 0s;
    -moz-transition: all .2s ease 0s;
    -ms-transition: all .2s ease 0s;
    -o-transition: all .2s ease 0s;
    transition: all .2s ease 0s;
}

header {
    background: #fafafa;
}

header.desktop  { display: block; } 
header.mobile   { display: none; }

header .topbar                          { background: #f2f2f2; line-height: 30px; font-size: 12px; }

header .topbar a.login                  { color: #000; float: right; }
header .topbar a.login:hover            { color: #df7f03; text-decoration: none; }

header .topbar a.downloads                  { color: #000; float: right; }
header .topbar a.downloads:hover            { color: #df7f03; text-decoration: none; }

header .topbar .toggle-usermenu         { float: right; }

header .topbar .divider                 { float: right; padding: 0 5px; color: #aaa; }

header .topbar .languages               { float: right; line-height: 0; padding-top: 2px; }
header .topbar .languages a             { margin-right: 5px; display: inline-block; line-height: 0; }
header .topbar .languages a span.flag   {  }

header .languageswitch                      { display: none; }

header .logo-search-basket                              { padding: 18px 0 22px 0; }
header .logo-search-basket .logo                        { }
header .logo-search-basket .logo img { 
    height: 60px;   
    -webkit-transition: all .2s ease 0s;
    -moz-transition: all .2s ease 0s;
    -ms-transition: all .2s ease 0s;
    -o-transition: all .2s ease 0s;
    transition: all .2s ease 0s;
}

header .logo-search-basket .search                      { padding-top: 15px;  }
header .logo-search-basket .search form                 { margin: 0; }
header .logo-search-basket .search form button.btn      { border-radius: 0 4px 4px 0; border-left: unset;  }

header .logo-search-basket .cart                        { padding-top: 15px; }

header .logo-search-basket .cart a.btn-cart { 
    background: #fff;   
    border: 1px solid #eee; 
    color: #aaa; 
    font-weight: normal; 
    -webkit-transition: all .2s ease 0s;
    -moz-transition: all .2s ease 0s;
    -ms-transition: all .2s ease 0s;
    -o-transition: all .2s ease 0s;
    transition: all .2s ease 0s;
}

header .logo-search-basket .cart a.btn-cart span.cart-icon                      { position: relative; }
header .logo-search-basket .cart a.btn-cart span.cart-icon i.fa-shopping-cart   { font-size: 15px; margin-right: 5px; }
header .logo-search-basket .cart a.btn-cart span.cart-icon .badge               { font-size: 13px; border-radius: 10rem; background: #5cb85c; color: #fff; font-weight: normal; }

header .logo-search-basket .cart a.btn-cart.notify                              { background: #5cb85c; color: #fff; }
header .logo-search-basket .cart a.btn-cart.notify span.cart-icon .badge        { background: #fff; color: #5cb85c; }

header .logo-search-basket .cart a.btn-cart.cart-empty                          { cursor: auto; }
header .logo-search-basket .cart a.btn-cart.cart-empty span.cart-icon i         { color: #bbb; }
header .logo-search-basket .cart a.btn-cart span.amount                         { margin-left: 1px; color: #000; font-size: 0.9rem; line-height: 1.1rem; }

header button.toggle-usermenu                   { border: none; padding: 0; background: none; }
header button.toggle-usermenu .userfullname     { margin-right: 5px; }               
header button.toggle-usermenu .customer         { margin-right: 10px; }   
header button.toggle-usermenu .fa-user          { margin-right: 5px; }

header button.toggle-usermenu.open i.fa-caret-down  { transform: rotate(180deg);}

header .usermenu { 
    display: none;
    position: absolute;
    right: 15px; 
    top: 30px; 
    z-index: 201; 
    background-color: #fff;
    border: 1px solid rgba(27,31,35,.15);
    border-radius: 4px;
    box-shadow: 0 3px 12px rgba(27,31,35,.15);
    width: 300px;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.3rem;
}

header .usermenu::before, header .usermenu::after {
    position: absolute;
    display: inline-block;
    content: "";
}

header .usermenu::before {
    top: -16px;
    right: 79px;
    left: auto;
    border: 8px solid transparent;
    border-bottom-color: transparent;
    border-bottom-color: rgba(27,31,35,.15);
}

header .usermenu::after {
    top: -14px;
    right: 80px;
    left: auto;
    border: 7px solid transparent;
    border-bottom-color: #fff;
}

header .usermenu .customerdata                  { padding: 15px; }  
header .usermenu .sections                      { padding: 15px; border-top: 1px solid #ddd; background: #f5f5f5; }
header .usermenu .sections ul                   { list-style: none; margin: 0; padding: 0; line-height: normal; }
header .usermenu .sections ul li                { margin-bottom: 8px; }
header .usermenu .sections a                    { color: #000; font-size: 1rem; }
header .usermenu .sections a:hover              { text-decoration: none; color: #df7f03; }
header .usermenu .languages                     { padding: 15px; border-top: 3px solid #eee; }
header .usermenu .languages h6                  { font-size: 0.8rem; letter-spacing: .1em; text-transform: uppercase; color: #aaa; margin: 0 0 10px 0; }
header .usermenu .languages .flag               { margin-right: 10px; opacity: 0.5; }
header .usermenu .languages .flag:hover         { opacity: 0.8; }
header .usermenu .languages .flag#active        { opacity: 1; }


.flag               { display: inline-block; min-width: 24px; width: 24px; height: 24px; background: url(/images/flags/flags.png) no-repeat; background-position-x: 0%; background-position-y: 0%;}
.flag.flag-de       { background-position: -120px -72px; }
.flag.flag-nl       { background-position: 0 -240px; }
.flag.flag-en       { background-position: -240px -96px; }
.flag.flag-fr       { background-position: -192px -96px; }

/* NAV */

nav.navbar                                  { background: #333; border: none; border-radius: unset; margin-bottom: 0; padding: 0; }
nav ul.navbar-nav                           { }
nav ul.navbar-nav li.nav-item               { position: unset; margin-right: 10px; }
nav ul.navbar-nav li.nav-item a             { font-size: 0.95rem; color: #eee; text-transform: uppercase; letter-spacing: 0.1rem; line-height: 50px; padding-top: 0; padding-bottom: 0; }
nav ul.navbar-nav li.nav-item a:hover       { color: #fff; background: none; }
nav ul.navbar-nav li.nav-item a:focus       { background: none; }
nav ul.navbar-nav li#current a              { color: #fff; font-weight: bold; }

nav ul.navbar-nav li.nav-item a i.fa                            { margin-left: 5px; }
nav ul.navbar-nav li.nav-item a i.fa-caret-up                   { display: none; }
nav ul.navbar-nav li.nav-item a.megamenu-open i.fa-caret-up     { display: inline; }
nav ul.navbar-nav li.nav-item a.megamenu-open i.fa-caret-down   { display: none; }

/* MEGAMENU */

nav ul.navbar-nav li.nav-item .megamenu                { display: none; position: absolute; width: 100%; left: 0; right: 0; top: 51px; z-index: 200; padding-top: 30px; padding-bottom: 40px; background: #fff;  }
nav ul.navbar-nav li.nav-item .megamenu ul             { list-style: none; margin: 0 0 15px 0; padding: 0; }
nav ul.navbar-nav li.nav-item .megamenu ul li          { margin-bottom: 5px;  }
nav ul.navbar-nav li.nav-item .megamenu ul li a        { color: #444 !important; font-weight: normal !important; text-decoration: underline; text-transform: none !important; letter-spacing: unset; line-height: 1.5rem; }
nav ul.navbar-nav li.nav-item .megamenu ul li a:hover  { color: #999 !important;  }



nav ul.navbar-nav li.nav-item .megamenu .row            { width: 100%; }   


/* SCROLL MODE */

body.scrollmode-enabled                                                         { }
body.scrollmode-enabled .header-and-nav                                         { top: -30px; }
body.scrollmode-enabled .header-and-nav header .logo-search-basket .logo img    { height: 40px; margin-top: 5px; }
body.scrollmode-enabled .header-and-nav header .logo-search-basket .search      { padding-top: 8px; }
body.scrollmode-enabled .header-and-nav header .logo-search-basket .cart         { padding-top: 8px; }


/* FOOTER */

footer                          { font-size: 0.9rem; background: #222; color: #ccc; padding: 20px 0 30px 0;  }

footer .column-with-line        { position: relative; }
footer .column-with-line:before {
    content: '';
    position: absolute;
    width:  1px;
    height: 150px;
    top: -20px;
    left: -10px;
    background-color: #f39500;
}

footer h3           { font-size: 1.2rem; text-transform: uppercase; color: #f39500; font-weight: bold; }
footer a            { color: #999; text-decoration: underline; }
footer a:hover      { color: #ccc; }
footer ul           { margin: 10px 0 15px 0; list-style: none; padding: 0; }
footer ul li        {  }



/* BASICS */

.content-wrapper-lightgrey      { background: #f5f5f5; }
.content-wrapper-top-border     { border-top: 1px solid #ddd; }

.padding-top-and-bottom { padding-top: 30px; padding-bottom: 50px; }

.btn                            { }

.btn-default                   { border: 1px solid #ddd; background: #fff; }
        
.btn-primary                    { background: #df7f03; border-color: #df7f03; }
.btn-primary:hover              { background: #f39500; border-color: #f39500; }

a.btn-smaller                   { font-size: 0.9rem; padding-top: 2px; padding-bottom: 2px; }

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

p.nomargin { margin-bottom: 0; }

p { margin-bottom: 25px; }



/* H! H2 H3 */

h1 { 
    font-size: 2.3rem;
    margin-top: 20px;
    margin-bottom: 1.5rem; 
    font-weight: bold; 
}

h2 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-weight: bold;
    text-transform: uppercase;
    color: #aaa;
    letter-spacing: 0.1rem;
}

h2.extrabottommargin {
    margin-bottom: 30px;
}

h2.contentstyle {
    font-size: 1.4rem;
    text-transform: unset;
    color: #000;
    letter-spacing: unset;
}

h3 { font-weight: bold; color: #aaa; margin-top: 20px; }
h4 { font-size: 1rem; font-weight: bold; }
h5 { font-size: 1rem; font-weight: bold; }

/* breadcrumbs */

.breadcrumbs                    { font-size: 0.8rem; margin-top: 15px; margin-bottom: 25px; background: #fff; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.breadcrumbs .home-icon         { float: left; }
.breadcrumbs ul                 { list-style: none; }
.breadcrumbs ul li              { float: left; margin-left: 10px; line-height: 25px; }
.breadcrumbs ul li.with-divider { background: url("/images/interface/breadcrumb_divider.png") no-repeat top right; padding: 0px 20px 0px 10px; }

/* HOME PAGE */

#myCarousel                         { position: relative; }
#myCarousel .carousel-item img      { max-width: unset; height: unset; width: 100%; height: auto; }
#myCarousel .caption                { position: absolute; z-index: 10; top: 33%; right: 25%; color: #fff;  }
#myCarousel .caption h1             { text-transform: uppercase; font-weight:bold; margin: 0 0 10px 0; line-height: 0.9; }
#myCarousel .caption h3             { color: #aaa; margin: 0 0 15px 0; }
#myCarousel .caption p              { margin: 0; }
#myCarousel .caption a.btn          { background: #f39500; border: none; line-height: 35px; padding: 0;  }

#myCarousel .carousel-item.item-black-text           { background: #eee; }
#myCarousel .carousel-item.item-black-text h1        { color: #000; }
#myCarousel .carousel-item.item-black-text h2        { color: #999; }

#myCarousel .carousel-item.item-left-aligned .caption { left: 12%; right: unset; }

#myCarousel .vertical-line  { position: absolute; display: block; width: 1px; height: 300px; width: 1px; background: #f39500; margin-left: -15px; }

#myCarousel .caption a.btn span.text        { padding-right: 15px; padding-left: 15px; }
#myCarousel .caption a.btn span.icon        { background: #ea7725; line-height: 35px; width: 35px; display: inline-block; border-radius: 0 4px 4px 0; }

#myCarousel a.carousel-control          { position: absolute; left: 15px; top: 40%; width: 60px; color: rgba(255,255,255,0.5); font-size: 30px;  z-index: 5; display: inline-block; }
#myCarousel a.carousel-control.right    { left: unset; right: 15px; }

#myCarousel .carousel-indicators        { bottom: 0; opacity: 0.5; }
#myCarousel .carousel-indicators li     { margin-right: 5px; }


/* TILES */

.content-wrapper-tiles                  { }
.content-wrapper-tiles article          { background: #fff; margin-bottom: 15px; border: 1px solid #ddd; text-align: center; }

#brands article a                       { display: block; width: 100%;  text-align: center;  }
#brands article a img                   { margin: 0 auto; }

#brands .container .row-centered        { text-align: center; justify-content: center; }


/* CATALOGUS */

body.merken .merk-tekst                             { margin-bottom: 25px; text-align: center; }
body.merken .merk-tekst .content                    { margin-bottom: 15px; }
body.merken .merk-tekst .divider                    { border: 2px solid #aaa; width: 150px; display: inline-block; }

body.merken section.main-with-tiles                 { background: #fafafa; }
body.merken section .products                       { padding-bottom: 200px; margin-top: 15px;}

.product-summary                                    { }
.product-summary article                            { margin-bottom: 50px; position: relative; background: #fff; border: 1px solid #eee; padding: 15px; cursor: pointer;  }
.product-summary article:hover                      { border-color: #aaa; }
.product-summary article .image                     { background-size: contain; background-position: 50% bottom; background-repeat: no-repeat; position: relative;  }
.product-summary article .image img                 { width: 100%; height: auto; }
.product-summary article .text                      { min-height: 240px; }
.product-summary article .text h3                   { font-weight: bold; font-size: 1.3rem; }
.product-summary article .text h3 a                 { color: #000; text-decoration: none; }
.product-summary article .text .specifications      { color: #777;  margin-bottom: 15px; font-size: 0.9rem; }
.product-summary article .text .price               { }


body.merken section .products.products-accessoires article .text { min-height: 160px; }

.product-overlay { position: absolute; top: 0; right: 0; width: 125px; height: 125px; z-index: 10; }
.product-overlay span { 
	position: absolute;
	font-size: 12px; 
	text-transform: uppercase;
	font-weight: bold;
	color: #fff; 
	width: 110px;
	text-align: center;
	top: 38px;
	left: 25px; 
	/* Safari */ 
	-webkit-transform: rotate(45.5deg); 
	/* Firefox */ 
	-moz-transform: rotate(45.5deg); 
	/* IE */
	-ms-transform: rotate(45.5deg);
	/* Opera */
	-o-transform: rotate(45.5deg);
	/* Internet Explorer */
	/* filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); */
}

div.product-overlay											{ position: absolute; top: 0; right: 0; width: 125px; height: 125px; }
div.product-overlay-instock									{ background: url('/images/interface/overlay_green_ribbon.png') no-repeat top right; }
div.product-overlay-new										{ background: url('/images/interface/overlay_yellow_ribbon.png') no-repeat top right; }
div.product-overlay-outlet								    { background: url('/images/interface/overlay_blue_ribbon.png') no-repeat top right; }
div.product-overlay-aanbieding								{ background: url('/images/interface/overlay_orange_ribbon.png') no-repeat top right; }
div.product-overlay-other									{ background: url('/images/interface/overlay_green_ribbon.png') no-repeat top right; }
div.product-overlay-tijdelijkuitverkocht                    { background: url('/images/interface/overlay_grey_ribbon_bigger.png') no-repeat top right; }
div.product-overlay-limitededition                          { background: url('/images/interface/overlay_red_ribbon.png') no-repeat top right; }
div.product-overlay-uitlopend                               { background: url('/images/interface/overlay_red_ribbon.png') no-repeat top right; }

 .row a.toggle-filters                  { display:  none; }

.filters h4                             { font-weight: bold; margin-top: 15px; text-transform: uppercase; color: #aaa; font-size: 1.4rem; }
.filters ul                             { padding: 0; margin: 0 0 15px 0; list-style: none; }
.filters ul li                          { color: #aaa; margin-bottom: 3px; }
.filters ul li a                        { color: #444;  }
.filters ul li.active a                 { font-weight: bold; }

.filters ul li.active ul                { margin: 5px 0 20px 0; padding: 0;  }
.filters ul li.active ul li             { border-left: 1px solid #df7f03; margin: 0; padding-left: 15px;  }
.filters ul li.active ul li a           { font-weight: normal; color: #555; }
.filters ul li.active ul li a:hover     { color: #000; }

.filters ul li.active ul li.active a    { font-weight: bold; color: #df7f03; }

.sticky {
    position: fixed;
    top: 155px;
}

/* DETAILS */

#spec-circles img         { margin: 0 15px 0 0; height: 50px; width: auto; }

#image-and-orderform                            { }
#image-and-orderform #image .photoframe         { background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; }
#image-and-orderform #image .photoframe img     { width: 100%; height: auto; }

#orderform                      {  }
#orderform .row-tablehead       { font-size: 0.8rem; font-weight: bold; text-transform: uppercase; margin: 0; border-bottom: 1px solid #eee; padding-bottom: 10px; }

#orderform .row .maat           { float: left; width: 100px; }
#orderform .row .aantal         { float: left; width: 100px; }
#orderform .row .prijs          { float: left; width:  200px; }
#orderform .row .voorraad       { float: left; width: calc(100% - 400px); }

#orderform .row-size                        { font-size: 0.95rem; border-bottom: 1px solid #eee; padding: 4px 0 3px 0; margin: 0;  }
#orderform .row-size .maatbox               { background: #ED7E03; margin-top: 3px; display: inline-block; padding: 2px 5px 2px 5px; color: #fff; font-weight: bold; border-top: 1px solid #cd7b00; border-bottom: 1px solid #fff; }
#orderform .row-size .maat                  { padding-top: 2px; }
#orderform .row-size .aantal                { padding-top: 3px; }
#orderform .row-size .prijs                 { padding-top: 7px; }
#orderform .row-size .voorraad              { padding-top: 2px; }
#orderform .row-size .voorraad              { font-size: 0.75rem;  }
#orderform .row-size .voorraad .eancode     { color: #aaa;  }

#orderform input.quantity           { width: 35px; height: 30px; float: left; text-align: right; border: 1px solid #bbb; margin: 0; padding: 0 7px 0 0; }
#orderform .plusminus               { display: block; float: left; }
#orderform .plusminus div img       { display: block; margin: 0; }

#orderform .submitbutton            { margin-top: 15px; }

.direct-leverbaar                   { color: #00943a; }
.leverbaar-vanaf                    { color: #ed7e03; }
.niet-leverbaar                     { color: #000; }

#tabs                               { }
#tabs ul                            { list-style: none; margin: 0; padding: 0; }
#tabs ul li                         { float: left;  }
#tabs ul li a                       { display: block; float: left; padding: 15px 35px; color: #333; background: #f5f5f5; text-decoration: none; border-right: 1px solid #ddd; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
#tabs ul li:first-child a           { border-left: 1px solid #ddd;  }
#tabs ul li a.active                { font-weight: bold; background: #fafafa; color: #000; border-bottom-color: #fafafa; } 

.tab-content                        { padding: 35px 0; background: #fafafa; display:none; margin-top: -1px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.tab-content.active                 { display: block; }

.tab-content .feature-value                                     { margin-bottom: 15px; }
.tab-content .feature, h5                                       { color: #aaa; margin: 0; font-weight: normal; }
.tab-content .feature-comma-separated-list                      { margin-bottom: 7px; }
.tab-content .feature-comma-separated-list span:first-of-type   { display: none; }

.tab-content h4                         { text-transform: uppercase; margin: 0 0 20px 0; color: #aaa; letter-spacing: 0.01rem; }
.tab-content p                          { margin-bottom: 15px; }

#eigenschappen .row.row-data            { margin-bottom: 5px; }
#eigenschappen .row .col-data-label     { color: #999; }
#eigenschappen .row ul                  { list-style: none; margin: 0; padding: 0; }
#eigenschappen .row ul li               { margin-bottom: 5px; }

#alternatieven .product-summary article .text    { min-height: 100px; }

.zool-in-circle						{ width: 112px; position: absolute; top:100px; right: 20px; }
.zool-in-circle .image				{ width: 112px; height: 112px; }
.zool-in-circle .image img          { width: 100%; }
.zool-in-circle .text               { margin: 5px 0 0 0; text-align: center; }
.zool-in-circle .text a			    { color: #999; font-size: 1.3rem; font-weight: bold; text-decoration: none; }

img#fancy_img                       { height: auto !important; }



/* leverbare alternatieven */

button.show-alternatives                                        { font-size: 0.8rem; background: none; border: none; padding: 0; color: #aaa; text-decoration: underline; text-align: left; }
button.show-alternatives:hover, button.show-alternatives:focus  { background: none; border: none; color: #000; text-decoration: underline; }

.modal-alternatives                     { }
.modal-alternatives .modal-header       { background: #eee; }
.modal-alternatives h2                  { margin: 0 0 5px 0; }
.modal-alternatives h3                  { color: #000; font-size: 1.2rem; margin: 0 0 25px 0; }

.modal-alternatives .product-summary article .text   { min-height: unset; }

.modal-alternatives .toevoegformulier .inputbox             { float: left; }
.modal-alternatives .toevoegformulier .plusminus            { float: left; }
.modal-alternatives .toevoegformulier .submitbutton         { margin: 0 0 0 10px !important; float: left; }
.modal-alternatives .toevoegformulier .submitbutton input   { padding-top: 0; padding-bottom: 0; height: 30px; }

/* winkelwagen */

#aflevergegevens                        { font-size: 0.8rem; }
#aflevergegevens-wrapper                { background: #f5f5f5; border: 1px solid #eee; border-radius: 4px; padding: 15px; } 
#aflevergegevens select                 { margin-bottom: 20px; font-size: 0.8rem; }

#winkelwagen                            { margin-top: 25px; }
#winkelwagen  .row-tablehead            { font-weight: bold; font-size: 0.8rem; text-transform: uppercase; margin: 0; border-bottom: 1px solid #eee; padding-bottom: 10px; }
#winkelwagen  .row-data                 { margin: 0; border-bottom: 1px solid #eee; padding-bottom: 10px; padding-top: 10px; } 

#winkelwagen .row .image                { float: left; width: 220px; }
#winkelwagen .row .omschrijving         { float: left; width: calc(100% - 650px); }
#winkelwagen .row .omschrijving span    { color: #aaa; }
#winkelwagen .row .maat                 { float: left; width: 50px;  }
#winkelwagen .row .prijs                { float: left; width: 100px; text-align: right; }
#winkelwagen .row .exbtw                { font-size: 0.7rem; color: #aaa; }
#winkelwagen .row .aantal               { float: left; width: 130px; text-align: right; }

#winkelwagen .row .totaal               { float: left; width: 100px; text-align: right; }
#winkelwagen .row .verwijder            { float: left; width: 50px; }
#winkelwagen .row .verwijder a          { color: #aaa; }

#winkelwagen input.quantity             { width: 35px; height: 30px; float: left; text-align: right; border: 1px solid #bbb; margin: 0; padding: 0 7px 0 0; }
#winkelwagen .plusminus                 { display: block; float: left; }
#winkelwagen .plusminus div img         { display: block; margin: 0; }

#winkelwagen #totals-wrapper            { border-top: 2px solid #000; padding-top: 15px; padding-bottom: 15px;  font-weight: bold; }

/* my allshoes */

.table-wrapper                  { font-size: 0.9rem; }
.table-wrapper .row             { margin-left: 0; margin-right: 0; }
.table-wrapper .row-tablehead   { font-weight: bold; text-transform: uppercase; padding-top: 7px; padding-bottom: 7px; background: #eee; }

.table-wrapper .row-data        { border-bottom: 1px solid #ddd; padding-top: 7px; padding-bottom: 7px; background: #fafafa; }

/* actuele levertijden per mail */

#updatemailsettings                             { } 
#updatemailsettings .form-row                   { margin: 0 0 8px 0; }
#updatemailsettings .form-row-checkbox label    { float: none; width: auto; margin: 0 0 0 5px; }
#updatemailsettings #email                      { margin: 0 0 20px 0; line-height: 25px; }
#updatemailsettings #email input                { padding: 5px 8px; border-radius: 3px; border: 1px solid #ccc; width: 250px; }
#updatemailsettings #email input.invalidemail   { background: #f5d3d3; border-color: #cc0000; }

/* CSV upload */

.uploadbox                                                  { background: rgba(255,255,255,0.7); border: 1px solid #ddd; border-radius: 10px; padding: 25px; width: 50%; margin-bottom: 15px; }
.uploadbox p                                                { padding: 0; margin: 0 0 15px 0; }
.uploadbox p.error                                          { color: #cc0000; }
.uploadbox form#CSV_SAV_CustomerOrderFiles                  { margin: 0; }

form#CSV_SAV_CustomerOrderFiles .custom-upload-wrapper input[type=file] { position: fixed; left: 1000%; } 
form#CSV_SAV_CustomerOrderFiles .custom-upload-wrapper label            { background: #6eba24; border: 1px solid #57951a; display: inline-block; color: #fff; padding: 0 15px 0 15px; line-height: 35px; border-radius: 4px; font-size: 15px; cursor: pointer; }
form#CSV_SAV_CustomerOrderFiles .custom-upload-wrapper label.hasfile    { background: #eee; border: 1px solid #ddd; color: #aaa; border-radius: 4px 0 0 4px; }

form#CSV_SAV_CustomerOrderFiles button.submit               { display: none; background: #6eba24; border: 1px solid #57951a; border-radius: 0 4px 4px 0; padding: 0 25px 0 25px; color: #fff; line-height: 35px; font-size: 15px; cursor: pointer; }
form#CSV_SAV_CustomerOrderFiles button.submit:hover         { background: #7fc838; }

/* about */

.aboutpage-container .content-wrapper-about-section:first-child      { padding-top: 5px; }

/* downloads */

.downloadstoggle        { padding-top: 10px; padding-bottom: 10px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin-bottom: 15px; }

.downloads h2			{ margin: 0 0 5px 0; text-transform: uppercase; color: #777; font-weight: 100; }
.downloads ul 			{ margin: 0 0 25px 0; list-style: none; padding: 0; }
.downloads ul li		{ margin: 0 0 5px 0; } 
.downloads ul li a		{ color: #0066cc; font-size: 12px; padding: 0 0 0 20px; line-height: 24px; display: block; }

.downloads a.pdf        { background: url('/images/interface/icon_pdf_small.gif') no-repeat 0 50%; line-height: 24px; height: auto; }
.downloads a.doc		{ background: url('/images/interface/icon_doc.gif') no-repeat 0 50%; }
.downloads a.tif		{ background: url('/images/interface/icon_jpg.png') no-repeat 0 50%; }
.downloads a.jpg		{ background: url('/images/interface/icon_jpg.png') no-repeat 0 50%; }
.downloads a.eps		{ background: url('/images/interface/icon_eps.gif') no-repeat 0 50%; }
.downloads a.ppt		{ background: url('/images/interface/icon_ppt.png') no-repeat 0 50%; }
.downloads a.zip		{ background: url('/images/interface/icon_zip.gif') no-repeat 0 20%; }
.downloads a.avi		{ background: url('/images/interface/icon_avi.gif') no-repeat 0 50%; }
.downloads a.wmv		{ background: url('/images/interface/icon_avi.gif') no-repeat 0 50%; }
.downloads a.ai			{ background: url('/images/interface/icon_illustrator.jpg') no-repeat 0 50%; }
.downloads a.xls		{ background: url('/images/interface/icon_xls.gif') no-repeat 0 50%; }
.downloads a.xlsx		{ background: url('/images/interface/icon_xls.gif') no-repeat 0 50%; }
.downloads a.mov		{ background: url('/images/interface/icon_mov.png') no-repeat 0 50%; }


/* NEWS */

div.newsarticle             { }
div.newsarticle img         { width: calc(50% - 40px); height: auto; float: right; margin-left: 40px; }

ul.newslist                 { list-style: none; padding: 0; margin: 0 0 30px 0; }
ul.newslist li              { border-bottom: 1px solid #ddd; }
ul.newslist li a            { color: #555; display: block; padding: 15px 0 15px 0; }
ul.newslist li a .date      { color: #aaa; font-size: 1.4rem; font-style: italic; }
ul.newslist li a:hover      { text-decoration: none; color: #000;  }

img.news-detail-image       { float: right; margin-left: 30px;margin-bottom: 30px;margin-top: 5px; max-width: 500px; }

#morenews article               { margin-bottom: 40px; background: #fff; }
#morenews article .image        { background-size: cover; background-repeat: no-repeat; background-position: 50% 25%; }
#morenews article .text         { padding: 15px; min-height: 150px; }
#morenews article .text h3      { color: #000; font-size: 2rem; }
#morenews article .text .date   { font-size: 12px; color: #aaa; }


/* FORMS */

input.text              { border: 1px solid #ccc; border-radius: 4px; padding: 5px 10px; }

select                  { }

button.submit           { border: 1px solid #aaa; border-radius: 4px; background: #eee; padding: 5px 20px; }

div.custom-submit       { margin-top: 25px; }
button.custom-submit    { background-color: #5bc0de; border-color: #46b8da;color: #fff; }

.form-hint              { margin: 5px 0 0 0; color: #999; font-size: 0.7rem; }

form#zoeken button.btn  { border-radius: 0 4px 4px 0; border-left: unset; }



::-webkit-input-placeholder { /* Edge */
  color: #aaa;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #aaa;
}

::placeholder {
  color: #aaa;
}


/* Sweep To Right */
.hvr-sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #df7f03;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {
  color: white;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* PAGE ELEMENTS */

.page-element h3 {
    color: #000;
    font-size: 1.5rem;
    margin: 0 0 15px 0;
}

.page-element-banner {
    margin-bottom: 10px;
    position: relative;
}

    .page-element-banner .image img {
        width: 100%;
        height: auto;
    }

    .page-element-banner .text {
        position: absolute;
        z-index: 10;
        width: 100%;
        top: 0;
        left: 0;
        color: #fff;
        padding: 35px 0 0 0;
    }

        .page-element-banner .text .caption {
            max-width: 70%;
        }


.page-element-text {
    padding: 25px;
    background: #fff;
}

.page-element-text.grey-background {
    background: #eee;
}

    .page-element-text.centered {
        text-align: center;
    }

/* FIFTY FIFTY */

.page-element-fiftyfifty {
    background: #eee;
}

.page-element-fiftyfifty.white-background {
    background: #fff;
}

.page-element-fiftyfifty .image {
    float: left;
    width: 50%;
}

    .page-element-fiftyfifty .image img {
        width: 100%;
        height: auto;
    }

.page-element-fiftyfifty .text {
    float: left;
    width: 50%;
}

    .page-element-fiftyfifty .text .inner {
        padding: 45px;
      
    }

    .page-element-fiftyfifty .text.text-left .inner {
        padding-left: calc(100% - 820px); /* nb: there are repsonsive rules in responsive.css */
    }


/* button */

.page-element-button {
    padding: 40px;
}

.page-element-button.nopadding {
    padding: 0;
}

/* INLOGGEN */

#accountgegevens {
    padding: 0px 0 20px 0;
}


/* PAGINATOR */
.paginator-wrapper 									{ font-size: 0.9em; margin: 0 0 25px 0; }
.paginator-wrapper .info 							{ float: left; padding: 1em 2em 1em 0; }
.paginator-wrapper .rpp 							{ float: left; padding: 1em 0 0 2em; }

ul.paginator 										{ float: right; list-style-type: none; margin: 0; padding: 0; }
ul.paginator li 									{ float: right; color: #000; list-style-type: none; margin: 0 10px 0 0;  }
ul.paginator li a									{ font-size: 1.1em; float: left; display: block; width: 24px; height: 25px; line-height: 25px; text-decoration: none; font-weight: bold; color: #666; text-align: center; }
ul.paginator li#active a							{ color: #F7971D; }
ul.paginator li a.next img 							{ margin: 1px 0 0 0;  }
ul.paginator li a.previous img						{ margin: 1px 0 0 0;  }
ul.paginator li a:hover								{ color: #F7971D; }


/* MODAL */
#modal-overlay  { display: none; top: 1px; left: 1px; width: 100%; height: 100%; background: rgba(0,0,0,0.1); position: fixed; z-index: 49; }


/* BOOTSTRAP upgrade style fixes */

.visible-xs {
    display: none;
}

.img-responsive {
    width: 100%;
    height: auto;
}