@import url("font/vdplas.css");

/* defaults */

body {font-family: 'Branding-Medium'!important; color: #505a64; background: #ffffff; } //line-height: 1.5;//
h1, h2, h3, h4, h5, h6 {font-family: 'Branding-Medium'!important; line-height: 1;}
.container h2 {font-size: 48px!important; font-weight: 400!important;}
h2 strong {color: #aedbe2;}

html, body { background: #fff !important; color: #023671;  }
header.header-logo { border-color: transparent!important; }
h1, h2, h3, h4, h5, h6 { font-family: 'Trenda'; color: #023671; letter-spacing: normal; }
#master-container .block .wrapper h2 {color: #023671; font-size: 1.65rem;}
pre {display: none;}
button:focus {outline: none;}

::-moz-selection { background: #d6005a; }
::selection { background: #d6005a; }

.clear { clear: both; }
.flex-wrap {display: flex; flex-wrap: wrap;}
.flex {display: flex;}
.templateblocks {width: 100%;}

.cms-main *, .footer * { box-sizing: border-box; }
.cms-main .text-left { text-align: left; }
.cms-main .text-right { text-align: right; }
.cms-main .text-center, .cms-main .center { text-align: center; }
.cms-main {padding: 1rem;} 

.cms-main .welcome { width: 100%; }
.cms-main .welcome .block-text {  }
.cms-main .welcome .welcome-bar { margin-top: 20px; background: #fff; padding: 15px; border-radius: 20px; }
.cms-main .welcome .welcome-bar a { display: table; width: calc(50% - 20px); text-align: center; float: left; color: #0f356d; text-decoration: none; margin: 10px; position: relative; background: #f2f5f8; border-radius: 20px; padding: 15px 0 15px 15px; font-size: 16px; }
.cms-main .welcome .welcome-bar a:hover { background: #e5e8eb; }
.cms-main .welcome .welcome-bar .image { width: 50px; height: 50px; text-align: center; display: table-cell; vertical-align: middle; }
.cms-main .welcome .welcome-bar .image img { display: inline-block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.cms-main .welcome .welcome-bar span { display: table-cell; text-align: left; vertical-align: middle; padding-left: 15px; }

.cms-main .sidebar .head { width: 205px; height: 205px; border-radius: 205px; display: inline-block; background-size: cover; background-repeat: no-repeat; background-position: center; }
.cms-main .sidebar .message { position: relative; background: #fff; padding: 20px; margin-top: 2rem; border-radius: 20px; filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.20) ); margin-bottom: 2rem; }
.cms-main .sidebar .message:before { content: ''; position: absolute; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #fff; left: 50%; transform: translateX(-50%); top: -20px; }
.cms-main .sidebar .message h3 { color: #d5005a; padding-bottom: 0; }
.cms-main .sidebar .message .date { color: #7b7b7b; font-size: 0.7rem; display: block; margin-bottom: 20px; }
.cms-main .sidebar .message p { margin-bottom: 0; }

.cms-main .sidebar .contact-info { background: #fff; padding: 20px; border-radius: 20px; }
.cms-main .sidebar .contact-info h3 { padding: 0; }
.cms-main .sidebar .contact-info table { }
.cms-main .sidebar .contact-info td:first-child { font-weight: bold; padding-right: 10px; }
.cms-main .sidebar .contact-info td:last-child { color: #7b7b7b; }

.cms-main .sidebar .tabs { background: #fff; padding: 20px; margin-bottom: 30px; margin-top: 30px; border-radius: 20px;}
.cms-main .sidebar .tabs a { background: #f2f5f8; display: block; padding: 10px; border-radius: 20px; margin-bottom: 15px; text-decoration: none; color: #023671; }
.cms-main .sidebar .tabs a:hover { background: #e5e8eb; }
.cms-main .sidebar .tabs a img { height: 30px; }
.cms-main .sidebar .tabs a span.icon { width: 55px; text-align: center; display: inline-block; }
.cms-main .sidebar .tabs a .notification { background: #dae2ea; float: right; color: #fff; height: 24px; width: 24px; line-height: 24px; text-align: center; border-radius: 24px; }
.cms-main .sidebar .tabs a .notification.active { background: #d6005a; }

/* plas defaults */
.cms-main a { color: #d6005a; text-decoration: underline; transition: .25s all ease-in-out; }
.cms-main a:hover { text-decoration: none; }
.cms-main .btn { display: inline-block; border-radius: 30px; background: #ffffff; color: #023671; font-weight: bold; border: none; padding: 10px 30px; vertical-align: middle; font-size: 18px; transition: .25s all ease-in-out; text-decoration: none; }
.cms-main .btn:hover { background-color: #8da5c3; color: #ffffff; }
.cms-main .btn.btn-primary { background: #d5005a; color: #fff; }
.cms-main .btn.btn-primary:hover { background-color: #c30354; }
.cms-main .btn.btn-pink { background: #d6005a; color: #fff; }
.cms-main .btn.btn-pink:hover { background: #b7004d; }
.cms-main .btn-green { background: #55a046; color: #fff; display: inline-block; border-radius: 30px; font-weight: bold; border: none; padding: 10px 30px; vertical-align: middle; transtion: .25s all ease-in-out; text-decoration: none; cursor: pointer; }
.cms-main .btn-green:hover { background: #4a8b3d; }

/* blocks */
.cms-main .block { float: left; width: 50%; box-sizing: padding-box; position: relative; }
.cms-main .block .wrapper { float: left; margin: 15px; width: calc(100% - 30px); overflow: auto; border-radius: 20px; background: rgba(0,78,155,.1);}
.cms-main .block.text .wrapper { background: none; }

.cms-main .block.small, .cms-main .block.deal { width: 25%; }
.cms-main .block.small-medium { width: 33.33%; }
.cms-main .block.small-medium .small-medium { width: 100%; }
.cms-main .block.medium { width: 50% }
.cms-main .block.medium-big { width: 66.66%; }
.cms-main .block.big { width: 75%; }
.cms-main .block.full, .cms-main .block.text { width: 100%; }

.cms-main .block.deal a.image {height: 200px; display: block; background-size: cover; position: relative;}
.cms-main .block .image .hover {background: rgba(230, 30, 99, 0.4); position: absolute; width: 100%; height: 100%; opacity: 0; transition: 0.25s all ease-in-out;}
.cms-main .block .image:hover .hover {opacity: 1;}
.cms-main .block .image .hover span {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    text-decoration: underline;
    font-weight: normal;
    font-size: 13pt;
    padding: 0 10%;
    left: 0;
}
.cms-main .block.deal .block-text {padding: 20px 25px;}
.cms-main .block.deal h3 {text-align: center;}

.cms-main .block.specials .wrapper {padding: 2em;}
.cms-main .block.specials .button-wrapper {margin-top: 1rem; display: flex; flex-direction: column;}
.cms-main .block.specials .demo .button-wrapper {justify-content: center; display: block;}
.cms-main .block.specials button {margin-bottom: 1rem; display: flex; padding: 15px 30px; justify-content: center;}
.cms-main .block.specials .demo button {margin-right: 0;}
.cms-main .block.specials button em {font-size: 1.3em; margin-right: 0.5em; color: #8da5c3; transition: color 0.5s ease;}

.cms-main .block .block-text {padding: 25px; font-size: 16px; line-height: 24px; position: relative;}
.product-wrap .wrapper {padding: 2em;}

.block .wrapper .searchbar {float: none; min-height: 130px; margin-right: 0; height: auto; padding: 25px;}
.block .wrapper .searchbar .search-title {padding-top: 0.5em;}
.block .wrapper .searchbar .search-title h2 {margin-bottom: 0.6em;}
.block .wrapper .searchbar .searcharea-wrapper {display: flex; justify-content: center;}
.block .wrapper .searchbar .searcharea-wrapper #searcharea {height: 3.2rem; width: 100%!important;}
.block .wrapper .searchbar .searcharea .searchfield {background: #fff; padding-left: 1.5em; height: 2.8em; width: 100%; color: #023671; border-radius: 20px;}
.block .wrapper .searchbar .populaire-zoekopdrachten {margin-top: 2rem;}
.block .wrapper .searchbar .populaire-zoekopdrachten .zoekopdracht {margin-right: 1rem;}

.specials .flex {display: flex; justify-content: left;}
.specials .fotoWrapper {width: 280px; height: 280px; background-size: cover; border-radius: 20px; margin-right: 2rem;}

.product-nav {display: block;}
.product-flex-wrap {display: inline-flex; flex-wrap: wrap;}
.product-wrap .wrapper {padding: 2em;}
.product-wrap h3 {display: flex; align-items: center; font-size: 1.4rem!important;}
.product-wrap h3 em {font-size: 1.5em; margin-right: 0.4em;}
.product-wrap .wrapper{height: auto!important;}
.product-wrap.pink .wrapper {background: #f1d5e1;}
.product-wrap.green .wrapper {background: #c0e4b8;}
.product-wrap.blue .wrapper {background: #dbeafb;}
.button-wrap button.btn {background: #ffffff; margin-bottom: 0.8em; width: 100%; text-align: left; display: inline-flex; padding: 15px 30px;}
.button-wrap button.btn:hover {background: #ffffff; color: #023671; -webkit-box-shadow: 0px 7px 14px -2px rgba(0,0,0,0.35); -moz-box-shadow: 0px 7px 14px -2px rgba(0,0,0,0.35); box-shadow: 0px 7px 14px -2px rgba(0,0,0,0.35);}
.button-wrap button:after {
  	content: "";
    position: absolute;
    right: 12px;
    width: 31px;
    height: 22px;
    background: url(/themes/vdPlas/icons/arrow-right-blue.png) no-repeat center center;
    background-size: 33%;
    transition: right 0.5s ease;
}
.product-wrap .button-wrap {margin-top: 1em;}
.product-wrap .button-wrap button em {font-size: 1.3em; margin-right: 0.5em; color: #8da5c3; transition: color 0.5s ease;}
.product-wrap .button-wrap button:hover em {color: #023671;}
.product-wrap.pink .button-wrap button em {color: #f6bed7; transition: color 0.5s ease;}
.product-wrap.pink .button-wrap button:hover em {color: #d60058;}
.product-wrap.green .button-wrap button em {color: #d3e7ce; transition: color 0.5s ease;}
.product-wrap.green .button-wrap button:hover em {color: #87bd7d;}
.product-wrap.blue .button-wrap button em {color: #dbeafb; transition: color 0.5s ease;}
.product-wrap.blue .button-wrap button:hover em {color: #013671;}

.button-wrap button:nth-child(4) {margin-bottom: 0;}
.HideButton-2-3 .button-wrap button:nth-child(2), .HideButton-2-3 .button-wrap button:nth-child(3) {display: none;}
.HideButton-3 .button-wrap button:nth-child(3) {display: none;}
.HideButton-4 .button-wrap button:nth-child(4) {display: none;}
.OpacityButton-2 .button-wrap button:nth-child(2) {opacity: 0;}
.OpacityButton-3 .button-wrap button:nth-child(3) {opacity: 0;}
.OpacityButton-4 .button-wrap button:nth-child(4) {opacity: 0;}
.red-button button.btn {background: #d5005a; color: #ffffff;}
.red-button button.btn em {color: #ffffff;}
.red-button button.btn:hover {background: #cb1754; color: #ffffff;}
.red-button button.btn:hover em {color: #ffffff;}
.red-button h3 {color: #d5005a!important;}
.red-button .button-wrap button:after {background: url(/themes/vdPlas/icons/arrow-right-white.png) no-repeat center center; background-size: 33%;}


/* footer */
.footer { padding: 0 30px 30px; font-size: 15px; line-height: 24px; }
.footer .left, .footer .right { width: 50%; }
.footer .wrapper { background: rgba(0,78,155,.1); padding-bottom: 25px; border-radius: 20px;}

.footer .wrapper .about .logo { float: left; width: 30%; height: 140px; margin-top: 5px; }
.footer .wrapper .about .logo img { padding-right: 10px; }
.footer .wrapper .about span { display: block; width: 70%; float: right; }

.footer .wrapper ul, .footer .wrapper p { float: left; margin: 15px 40px 0 40px; }
.footer .wrapper ul li { list-style: none; padding: 0; margin: 0; }
.footer .wrapper ul li:first-child { font-weight: bold; }
.footer .wrapper ul li a { color: #7b7b7b; }
.footer .wrapper ul li a:hover { text-decoration: underline; }
.footer .wrapper ul.social { clear: both; }
.footer .wrapper ul.social li:not(:first-child) { float: left; }
.footer .wrapper ul.social li a img { height: 40px; margin: 7px 10px 2px 0; filter: grayscale(1); opacity: 0.5; transition: 0.4s; }
.footer .wrapper ul.social li a img:hover { filter: grayscale(0); opacity: 1; }

/* -- Responsive -- */

@media (max-width: 1700px) {

    .cms-main .welcome .block-text { height: auto; }

    .cms-main .block.small-1700 { width: 25%; }
    .cms-main .block.small-medium-1700 { width: 33.33%; }
    .cms-main .block.medium-1700 { width: 50%; }
    .cms-main .block.medium-big-1700 { width: 66.66%; }
  	.cms-main .block.big-1700 { width: 75%; }
  	.cms-main .block.full-1700 { width: 100%; }
}

@media (max-width: 1550px) {

    .cms-main .welcome .welcome-bar a { width: calc(50% - 20px); }

    .cms-main .block.small-1550 { width: 25%; }
    .cms-main .block.small-medium-1550 { width: 33.33%; }
    .cms-main .block.medium-1550 { width: 50%; }
    .cms-main .block.medium-big-1550 { width: 66.66%; }
    .cms-main .block.big-1550 { width: 75%; }
    .cms-main .block.full-1550 { width: 100%; }
}

@media (max-width: 1450px) {

    .cms-main .block.small-1450 { width: 25%; }
    .cms-main .block.small-medium-1450 { width: 33.33%; }
    .cms-main .block.medium-1450 { width: 50%; }
    .cms-main .block.medium-big-1450 { width: 66.66%; }
    .cms-main .block.big-1450 { width: 75%; }
    .cms-main .block.full-1450 { width: 100%; }
}

@media (max-width: 1200px) {

    .cms-main .block.small-1200 { width: 25%; }
    .cms-main .block.small-medium-1200 { width: 33.33%; }
    .cms-main .block.medium-1200 { width: 50%; }
    .cms-main .block.medium-big-1200 { width: 66.66%; }
    .cms-main .block.big-1200 { width: 75%; }
    .cms-main .block.full-1200 { width: 100%; }
}

@media (max-width: 1100px) {

    .cms-main .sidebar .tabs { background: transparent; padding: 0; }
    .cms-main .sidebar .tabs a { background: #fff; padding: 10px; font-size: 15px; }
    .cms-main .sidebar .tabs a img { height: 20px; padding-right: 7px; }

    .cms-main .block.small, .cms-main.logged-in .block .block.small{ width: 50%; }
    .cms-main .block.small-medium{ width: 100%;}
    .cms-main .block.medium-big-1200, .cms-main .block.small-medium-1200{ width: 100%; }
    .cms-main .block.big-medium { width: 100%; }
}

@media (max-width: 991px) {

    .cms-main .sidebar .head { width: 160px; height: 160px; }
    .cms-main .sidebar .contact-info table { font-size: 16px; line-height: 29px;}
    .cms-main .sidebar .contact-info td:first-child { display: block; }
    .cms-main .sidebar .contact-info td:last-child { display: block; }

    .footer .left, .footer .right { width: 100%; }
    .footer .wrapper .about .logo { width: 100%; }
    .footer .wrapper .about span { width: 100%; }

    .cms-main .block.small-991 { width: 25%; }
    .cms-main .block.small-medium-991 { width: 33.33%; }
    .cms-main .block.medium-991 { width: 50%; }
    .cms-main .block.medium-big-991 { width: 66.66%; }
    .cms-main .block.big-991 { width: 75%; }
    .cms-main .block.full-991 { width: 100%; }

    .cms-main .block.deal {width: 50%;}
}

@media (max-width: 768px) {
  
  .cms-main .block.specials .button-wrapper {flex-direction: column;}
  .cms-main .block.specials .button-wrapper button {margin-right: 0; margin-bottom: 1rem;}
    
}

@media (max-width: 767px) {

  	
    .cms-main .welcome .welcome-bar a { width: calc(100% - 20px); }

    .cms-main .block { width: 100% !important; }
  
  	.block .wrapper .searchbar {min-height: 184px; padding: 1em;}

}

@media (max-width: 450px) {
  
  	.specials .flex {flex-direction: column;}
  	.specials .fotoWrapper {width: 100%; height: 250px; margin-bottom: 1rem; margin-right: 0;}
  	.cms-main .welcome .welcome-bar {padding: 0px;}
    .cms-main .welcome .welcome-bar a { width: calc(100% - 20px); font-size: 13px; }
    .cms-main .welcome .welcome-bar .image { width: 25px; height: 25px; line-height: 25px; }
    .cms-main .welcome .welcome-bar span { margin-left: 5px; line-height: 25px; }
	.button-wrap button.btn {font-size: 94%;}
  	.cms-main .block.specials .wrapper, .cms-main .block .block-text {padding: 1rem;}
  	.product-wrap h3 {justify-content: center;}
  	.cms-main .block.specials .button-wrapper button {justify-content: center;}
}