/* 
RGB Color Codes ( Vodeg CP Logo Colors (from Logo 2018)) 
Blue :   RGB(32,66,112);
Orange:  var(--vcp_color_main);
White:   RGB(255,255,255);
Black:   RGB(0,0,0);
*/

/* Font */
@import url('https://fonts.googleapis.com/css?family=PT+Sans'); @import url('https://fonts.googleapis.com/css?family=Anton|Lobster|Neucha|Roboto|Comfortaa'); /* Optional-Fonts */

/* Color Variables */
@import 'vodeg_colors.css';


body{
    overflow-x: hidden;
    background-color: RGB(240,124,49);
}
/* Removing Padding/Margin on Bootstrap 3 Columns  */

/*                                  */

.BhrInput[type="text"], .BhrInput[type="password"], .BhrInput[type="date"], .BhrInput[type="time"]{
    outline: none;
    color: black;
    color: var(--vcp_color_text1);
    background-color: white;
    background-color: var(--vcp_color_background);
    width: 100%;
    min-height: 30px;
}
.BhrInput[type="file"]{
    outline: none;
    color: black;
    color: var(--vcp_color_text1);
    width: auto;
}

.BhrInput[type="submit"], .BhrInput[type="button"]{
	border: 1px solid RGB(240,124,49);
    outline: none;
    color: RGB(240,124,49);
    color: var(--vcp_color_main);
    background-color: white;
    background-color: var(--vcp_color_background);
    width: auto;
}
.BhrInput[type="submit"]:hover, .BhrInput[type="button"]:hover{
    color: white;
    color: var(--vcp_color_text2);
    background-color: var(--vcp_color_main);
    background-color: RGB(240,124,49);
    border: 1px solid var(--bhr_accent);
    cursor: pointer;
    width: auto;
}
.BhrInputDisabled{
    background-color: #555555;
    color: #999999;
    width: auto;
}
.BhrInputDisabled:hover{
    outline: none;
    cursor: default;
    background-color: #555555;
    color: #888888;
    width: auto;
}
.BhrSelect{
    width: 100%;
    max-width: 100%;
    min-width: 100px;
    min-height: 30px;
    color: black;
    border: 1px solid gray;
    border-radius: 3px;
}
.BhrSubmitbtn{
    padding: 10px;
    margin: 2px;
    background-color: #00e500;
    color: white;
    border: 2px solid #00b200;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    width: auto;
}
.BhrSubmitbtn:hover{
    background-color: #00b200;
    color: #f4f4f4;
}
/*              */

    

.no-padding{
    padding: 0 !important;
   margin: 0 !important;

}
.pr_details_header{
    font-family: 'PT Sans', sans-serif !important;
    margin-top: 10px;
}
.pr_list{
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0;
}
.pr_title{
    box-sizing: border-box;
    word-wrap: break-word;
    position: relative;
    clear: left;
    flex: 0 0 auto;
    min-height: 0;
    min-width: 0;
    padding-bottom: .25em;
    padding-right: 1em;
    width: 50%;
    margin-bottom: 0.4em;
}
.pr_specs{
    flex: 0 0 auto;
    min-height: 0;
    min-width: 0;
    word-wrap: break-word;
    color: #62615f;
    box-sizing: border-box;
    margin: 0;
    padding-bottom: .5em;
    float: left;
    width: 50%;
    margin-bottom: 0.4em;
}
/* Login Page CSS */
.login_txt{
    width: 100%;
    min-width: 30px;
    max-width: 300px;
    outline: none;
    border: 1px solid RGB(240,124,49);
    border: 1px solid var(--vcp_color_main);
    color: black;
    color: var(--vcp_color_text1);
    padding: 6px;
    border-radius: 4px;
    font-family: 'PT Sans', sans-serif !important;
}
input:focus{
    -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.57);
-moz-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.57);
box-shadow: inset 0px 0px 2px 0px rgba(0,0,0,0.57);
}
.login_table{
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

/* Scrolltop Function - Button Style */
.scrollup{
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    border: none;
    background: none;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    display: none;
}
.scrollup i{
    
    width: 47px;
    height: 47px;
    line-height: 47px;
    text-align: center;
    font-size: 20px;
    background-color: RGB(240,124,49);
    background-color: var(--vcp_color_main);
    color: white;
    color: var(--vcp_color_text2);
    border-radius: 60px;
}
.scrollup i:hover{
    background-color: darkorange;
    color: whitesmoke;
}
html 
{
	height: 100%;
	font-family: Verdana;
}

body 
{
	height: 100%;
	margin: 0;
	padding: 0;
}

.container 
{
	min-width: 100%;
    max-width: 100%;
}

#header_div
{
	z-index: 500;
	width: 100%;
	height: 32px;
    margin: 0px;
    padding: 0px;
	background-color: white;
	background-color: var(--vcp_color_background);
    color:  RGB(240,124,49);
    color:  var(--vcp_color_main);
    border-bottom: 2px solid RGB(240,124,49);
    border-bottom: 2px solid var(--vcp_color_main);
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.75);
}

#nav_bar_div
{
    z-index: 500;
	width: 100%;
	height: auto;
    margin: 0px;
    padding: 0px;
}

.divider-vertical {
    height: 39px;
    max-height: 39px;
    min-height: 27px;
    border-right: 1px solid white;
    border-right: 1px solid var(--vcp_color_border2);
    border-left: 1px solid #f2f2f2;
    box-shadow: inset 0px 0px 2px 0px rgba(0,0,0,1);
}

.divider-vertical-footer {
    height: auto;
    min-height: 50px;
    
    border-right: 1px solid darkgray;
    border-left: 1px solid darkgray;
    box-shadow: inset 0px 0px 2px 0px rgba(0,0,0,1);
}

#banner_div
{
margin: 0px auto 0px auto;
width: 990px;
height: 89px;
background: white url("../_images/bg_toptitel.jpg");
background: var(--vcp_color_background) url("../_images/bg_toptitel.jpg");
}

#body_div
{
	width: 100%;
    clear: both;
}

#linker_menu_div
{
    font-family: 'Roboto', sans-serif;
	width: 100%;
    min-height: 600px;
	height: 100%;
	background-color: white;
	background-color: var(--vcp_color_background);
    z-index: 400;
    transition-duration: 2s;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.75);
}

#content_div
{
    background-color: white;
    background-color: var(--vcp_color_background);
	font-size: 14px;
	padding: 13px;
    margin: 0 !important;
	width: 100%;
	height: 100%;
    z-index: 300;
    -webkit-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 12px -1px rgba(0,0,0,0.75);
}

#rechter_menu_div
{
    width: 100%;
	height: 100%;
	background-color: white;
	background-color: var(--vcp_color_background);
    z-index: 400;
    border-left: 1px solid #999999;
    transition-duration: 2s;
    overflow: hidden;
}
section {
    padding: 2px 0px 2px 0px;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 100 !important;
}

section .section-title {
    text-align: center;
    color: #fff;
    margin-bottom: 5px;
    text-transform: uppercase;
}
 footer{
        margin: 0px;
        padding: 0px;
          background-color: RGB(240,124,49);
    }
footer hr{
    background-color: RGB(240,124,49);
}
.paper {
  background: #fff;
  box-shadow:
    /* The top layer shadow */
    2px 2px 5px 3px rgba(0,0,0,0.15),
    /* The second layer */
    0 -10px 0 -5px #f4f4f4,
    /* The second layer shadow */
    0 -10px 1px -4px rgba(0,0,0,0.15),
     /* The third layer */
    0 -20px 0 -10px #eee,
    /* The third layer shadow */
    0 -20px 1px -9px rgba(0,0,0,0.15);
    /* Padding for demo purposes */
    padding: 10px;
    margin: 0px;
}
.paper ul a{
    border-bottom: 2px solid white;
    color: #333333;
    width: 100%;
    display: block;
}
.paper ul{
    display: inline-block;
}
.paper ul a:hover{
    border-bottom: 2px solid RGB(240,124,49);
    color: black;
    text-decoration: none !important;
}
/* Demo-specific styles */
footer section p{
    margin: 0px;
    padding: 0px;
}

#product_picture_div
{
	width: 300px;
	float: left;
	padding: 10px 0px 0px 20px;
}

#product_kenmerken_div
{
	width: auto;
	height: auto;
	float: left;
	padding: 20px 10px 0px 10px;
    margin-bottom: 10px;
}

#product_specs_div
{
	margin-top: 10px;
	width: 100%;
	clear: both;
	padding: 15px 20px 0px 20px;
}
/* Add to cart button */
#product_specs_atc{
    outline: none;
    width: 100%;
    height: 32px;
    color: white;
    color: var(--vcp_color_text2);
    background-color: #006600;
    border: none !important;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
    transition-duration: .3s;
}
#product_specs_atc:hover{
    cursor: pointer;
    border-radius: 6px;
    transition-duration: .3s;
    background-color: #007f00;
}
#extra_afb_div
{
	margin-top: 10px;
	margin-bottom: -30px;
	width:200px;
	height: 95px;
	overflow-x: scroll;
	overflow-y: hidden;
	clear: both;
}

#extra_afb_div li
{
	margin-right: 5px;
	display: inline;
}

#extra_afb_div ul
{
	white-space: nowrap;
	margin: 0;
	padding: 0;
	float:left;
}

.blue /* Yes, this is blue  ... */
{
	background-color: green;/* <-- */
	color: white;
	color: var(--vcp_color_text2);
	padding: 10px;
	font-weight: bold;
}

.red
{
	background-color: red;
	color: white;
	color: var(--vcp_color_text2);
	padding: 10px;
	font-weight: bold;
}

/* Icon styling */
label{
    color: white;
    color: var(--vcp_color_text2);
}

.login_div_uit
{
	display: none;
}

.login_div
{
    width: 100%;
    justify-content: center;
	top: 5px;
}

#winkelm_div
{
	position: absolute;
	top: 10px;
	right: 0;
}

.login_control_div
{
	position: absolute;
	top: 47px;
    right: 0;
	font-family: Sans-serif;
}

.login_control_div_uit
{
	display: none;
}

.login_button, .login_button_its {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
	padding: 8px 11px;
	background: RGB(240,124,49);
	background: var(--vcp_color_main);
	color: white;
	color: var(--vcp_color_text2);
    font-size: 13px;
	font-weight: bold;
    border: none;
    border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.12);
    -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.12);
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.12);
    outline: none;
    transition-duration: .2s;

}

.winkelmandje_knop
{
    margin-right: 3px;
	padding: 8px 11px;
	background: RGB(240,124,49);
	background: var(--vcp_color_main);
	color: white;
	color: var(--vcp_color_text2);
    font-size: 13px;
	font-weight: bold;
    border: none;
    border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
    -webkit-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.22);
    -moz-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.22);
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.22);
    outline: none;

}
/* When hovered on */
.login_button:hover
{
	cursor: pointer;
    border: none;
    border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
    -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.42);
    -moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.42);
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.42);
    outline: none;
    transition-duration: 0.2s;
}
.login_button_its:hover{
	cursor: pointer;
    border: none;
    border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
    -webkit-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.42);
    -moz-box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.42);
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.42);
    outline: none;
    transition-duration: 0.2s;
}
/* When hovered on */
.winkelmandje_knop:hover
{
	cursor: pointer;
    border: none;
    border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
    -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.42);
    -moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.42);
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.42);
    outline: none;
    transition-duration: 0.2s;
}
/* When Pressed */
.login_button:active{
    -webkit-box-shadow: inset 0px 0px 4px 1px rgba(0,0,0,0.42);
    -moz-box-shadow: inset 0px 0px 4px 1px rgba(0,0,0,0.42);
    box-shadow: inset 0px 0px 4px 1px rgba(0,0,0,0.42);
}
/* When Pressed */
.winkelmandje_knop:active{
    -webkit-box-shadow: inset 0px 0px 4px 1px rgba(0,0,0,0.42);
    -moz-box-shadow: inset 0px 0px 4px 1px rgba(0,0,0,0.42);
    box-shadow: inset 0px 0px 4px 1px rgba(0,0,0,0.42);
}
/* Login Input Field */
.user-input-wrp {
	position: relative;
	width: 100%;
    box-shadow: none !important;
}
.user-input-wrp .inputText{
	width: 100%;
    -webkit-border-radius: 0px !important;
	outline: none !important;
	border: none;
	border-bottom: 2px solid #555;
    box-shadow: none !important;
}
.user-input-wrp{
    border-radius: 0px !important;
}
.user-input-wrp .inputText:invalid {
	box-shadow: none !important;
    box-shadow: none !important;
}
.user-input-wrp .inputText:focus{
	border-color: RGB(240,124,49);
	border-color: var(--vcp_color_main);
	border-width: medium medium 2px;
    box-shadow: none !important;
}
.user-input-wrp .floating-label {
	position: absolute;
	pointer-events: none;
    top: 0px;
    /*
        top: 18px;
        Zet deze code aan om leuke effect bij inlog formulier te zien. 
        Het werd uitgeschakkeld, want wanneer browser automatich gegevens invult, 
        staat de label boven de text. Het maak de label en gegevens onleesbaar.
    */
	left: 10px;
	transition: 0.2s ease all;
     color: dimgray!important;
    box-shadow: none !important;
}
.user-input-wrp input:focus ~ .floating-label,
.user-input-wrp input:not(:focus):valid ~ .floating-label{
	top: 0px;
	font-size: 13px;
	opacity: 1;
    color: black;
    color: var(--vcp_color_text1);
    box-shadow: none !important;
}
#aandachtsdiv
{
	clear:both;
	display: inline-block;
	width: 100%;
	padding: 0;
	border: 3px solid #f4f4f4;
	height: 360px;
	max-height: 360px;
}

#adb2
{
    height: auto;
    width: 100%;
	background-color: #f4f4f4;
    margin-bottom: 10px;
}

#adb2 h2
{
    
}
/* SUBMIT BUTTON */
.Submitbtn{
    padding: 3px 5px 3px 5px;
    margin: 2px;
    background-color: #00b200;
    color: #f4f4f4;
    border: 2px solid #00b200;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
}
.Submitbtn:hover{
    background-color: #00e500;
    color: white;
}

.laandacht
{  
    font-family: 'Comfortaa', sans-serif;  
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    transition-duration: .3s;
}
#laandachtTitle{
    font-size: 30px;
    color: RGB(32,66,112);
}
.laandacht a:hover{
     text-decoration: none;
}
.laandacht:hover
{
   -webkit-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.68);
-moz-box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.68);
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.68);
    transition-duration: .3s;
}
.laandachtBtn{
    font-weight: 500;
    font-family: 'Comfortaa', sans-serif;
    display: block;
    border: 1px solid RGB(32,66,112);
    color: RGB(32,66,112);
    background-color: white;
    font-size: 16px;
    border-radius: 10px;
    padding: 5px 12px 5px 12px;
    transition-duration: .2s;
    width: 100%;
    max-width: 160px;
    margin-top: 10px;
}

.laandachtBtn:hover{
    color: #fff !important;
    background-color: RGB(32,66,112);
    transition-duration: .2s;
}

.registratie
{
	width: 250px;
	/*position: absolute;
	top: 200px;
	left: 500;*/
	font-family: Sans-serif;
}
.submenu-responsive{
  right: 0;
    height: 100%;
    font-size: 20px;
    background-color: RGB(240,124,49);
    background-color: var(--vcp_color_main);
    z-index: 100000;
    transition-duration: 2s;
}
.ShowSubMenu{
    height: 30px;
    width: 100%;
    background-color: RGB(240,124,49);
    background-color: var(--vcp_color_main);
    color: white;
    color: var(--vcp_color_text2);
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid RGB(240,124,49);
    border: 1px solid var(--vcp_color_main);
    outline: none;
    font-weight: bold;
}
.ShowSubMenu:hover{
    background-color: white;
    background-color: var(--vcp_color_background);
    color: RGB(240,124,49);
    color: var(--vcp_color_main);
    border: 1px solid RGB(240,124,49);
    border: 1px solid var(--vcp_color_main);
    cursor: pointer;
}
/* -- KNOWLEDGEBASE MAINPAGE CSS -- */
.zoeken_inpt
{
	font: 12px Verdana, Tahoma Arial;
	color: black;
	color: var(--vcp_color_text1);
    border:1px solid RGB(240,124,49);
    border:1px solid var(--vcp_color_main);
	vertical-align: top;
	width: 100%;
    height: 24px;
    padding: 5px;
    outline: none;
}.zoeken_inpt:focus{ outline: none;}
/* Carousel Styling */
.carousel{
    vertical-align: middle;
    height: auto;
    min-height: 140px;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    color: black;
    margin: 0px 0px 10px 0px
}
.carousel blockquote{
    margin: 0 60px;
}
.carousel .carousel-indicators li{
      background-color: #666666;
    height: 5px;
}
.carousel-indicators{
/*    position: static;*/
}
.carousel .carousel-indicators li:active, .carousel .carousel-indicators li:hover{
    background-color: black;
}
.carousel button{
    color: black;
    background-color: RGBA(0,0,0,0.2);
}
.carousel-inner{
    width: 100%;
    height: 100%;
}
.carousel-item{
    width: 100%;
    text-align: center;
    height: 100%;
}
.carousel .carousel-indicators .active{
      background-color: var(--vcp_color_main);
}
.carousel-control-next-icon, .carousel-control-prev-icon{
    color: black !important;
}

/* ----------- @ MEDIA ----- RESPONSIVE CHANGES ------- */
@media only screen and (max-width: 1030px) {
    .divider-vertical {
        display: none;
        visibility: hidden;
    }
    .nav div ul li{
        text-align: center !important;
        float: none;
        display: block;
        justify-content: center;
        align-content: center;
        padding-left: 1px;
        padding-right: 1px;
    }
    .dropdown-item{
    text-align: center !important;
    }
}
@media only screen and (max-width: 974px) {
    h2{
        font-size: 20px;
    }
}