| etc. Move the basic styles here.
* And move blue theme specific styles to .table--blue
* .table{}
* Base class for simple html table with column headings on the top
* Contains default styles such as padding, bold headings etc
**/
.table td {
padding: 0px;
border-color: transparent !important; }
.table__label-cel {
font-weight: 700; }
/**
*
* .table--blue{}
* Modifier class for blue thememed class
**/
/**
* .table--row-heading{}
* Modifier class for tables with heading on the left of every row.
**/
.table--row-headings tr {
border-bottom: 9px solid #fff; }
@media only screen and (min-width: 481px) {
.table--row-headings tr {
border: none; } }
.table--row-headings td {
width: 100%;
float: left;
border: none !important;
padding-top: 1px;
padding-bottom: 1px;
vertical-align: top; }
@media only screen and (min-width: 481px) {
.table--row-headings td {
width: 50%;
float: none;
padding: 4px 8px; } }
.table--row-headings td:first-child {
font-weight: 600; }
/*-----------------------*\
#TEXTAREA
\*-----------------------*/
/**
* BLOCK textarea
* ELEMENT textarea__label
*
*/
.textarea {
display: inline-block !important;
width: 100%;
height: 9.3125rem;
margin-bottom: 1.25rem;
padding: 0.625rem;
background-color: #ffffff;
border: 0.0625rem solid #9b9b9b;
font-size: 1.125rem;
line-height: 1.375rem;
color: #545454; }
.textarea:focus, .textarea:active {
border-color: #545454; }
.textarea.error {
border-color: #ff3333; }
.flag {
padding: 0.125rem 0.375rem;
background: #002c5e;
color: #ffffff;
font-size: 0.875rem !important;
font-weight: 400;
display: inline-block;
text-decoration: none;
cursor: pointer;
border-radius: 0.25rem; }
.flag:hover {
background-color: #065ca9;
color: #ffffff; }
.flag + .flag {
margin-left: 0.9375rem; }
.flag--variant-1 {
background-color: #97C8AB; }
.flag--variant-1:hover {
background-color: #79a089; }
.flag--variant-2 {
background-color: #91A7D0; }
.flag--variant-2:hover {
background-color: #7486a6; }
.flag--variant-3 {
background-color: #BA6E68; }
.flag--variant-3:hover {
background-color: #955853; }
.flag--variant-4 {
background-color: #B29EB7; }
.flag--variant-4:hover {
background-color: #8e7e92; }
.flag--variant-5 {
background-color: #769B9F; }
.flag--variant-5:hover {
background-color: #5e7c7f; }
.flag--variant-6 {
background-color: #D0B86A; }
.flag--variant-6:hover {
background-color: #a69355; }
.flag--variant-7 {
background-color: #AA9793; }
.flag--variant-7:hover {
background-color: #887976; }
.pagination {
list-style: none;
padding: 0;
background-color: #ffffff;
padding: 0 1.25rem 1rem;
margin-bottom: 2.5rem; }
.pagination li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.pagination li {
display: inline-block;
height: 1.9375rem;
line-height: 1.9375rem; }
.pagination li.active a {
background-color: #00526E;
color: #fff; }
.pagination a {
color: #00526E;
display: block;
padding: 0 0.5rem;
text-decoration: none; }
.pagination a:hover {
background-color: #00526E;
color: #fff; }
.pagination .vorige {
background: #ffffff url(/includes/img/button-disc-prev.png) no-repeat;
padding-left: 2.5rem;
padding-right: 0.5rem; }
.pagination .vorige a {
margin-left: -2.5rem;
margin-right: -0.5rem;
padding-left: 2.5rem; }
.pagination .vorige a:hover {
background-color: transparent;
color: #00526E; }
.pagination .vorige:hover {
background-position: left 100%; }
.pagination .vorige.not-active {
opacity: 0.3; }
.pagination .vorige.not-active:hover {
background-position: left top; }
.pagination .volgende {
background: #ffffff url(/includes/img/button-disc-next.png) right top no-repeat;
padding-left: 0.5rem;
padding-right: 2.375rem; }
.pagination .volgende a {
margin-left: -0.5rem;
margin-right: -2.375rem;
padding-right: 2.375rem; }
.pagination .volgende a:hover {
background-color: transparent;
color: #00526E; }
.pagination .volgende:hover {
background-position: right 100%; }
.pagination .volgende.not-active {
opacity: 0.3; }
.pagination .volgende.not-active:hover {
background-position: right top; }
/**
* Margin
*/
.spacer-small {
margin-bottom: 1.25rem; }
.spacer-medium {
margin-bottom: 1.875rem; }
.spacer-large {
margin-bottom: 2.5rem; }
/**
* Horizontally center content within element
* #TODO transform to layout class
*/
.centered {
display: table;
text-align: center;
margin: 0 auto; }
.clear {
clear: both; }
.clearboth {
clear: both;
height: 0;
margin-bottom: 0 !important;
overflow: hidden; }
.text-center {
text-align: center; }
.pull-left {
float: left; }
.pull-right {
float: right; }
.hide {
display: none; }
.link-arrow-dark-blue {
display: inline-block;
font-weight: 400;
text-decoration: none; }
.link-arrow-dark-blue:before {
background-image: url(/includes/img/icon-arrow-right-dark-blue.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 0.75rem;
margin-right: 0.5rem;
width: 0.5625rem; }
.link-arrow-dark-blue:hover {
text-decoration: underline; }
.link-arrow-blue {
color: #065ca9;
display: inline-block;
font-weight: 400;
text-decoration: none; }
.link-arrow-blue:before {
background-image: url(/includes/img/icon-arrow-right-blue.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 0.75rem;
margin-right: 0.5rem;
width: 0.5625rem; }
.link-arrow-blue:hover {
text-decoration: underline; }
.link-arrow-yellow {
display: inline-block;
font-weight: 400;
text-decoration: none; }
.link-arrow-yellow:before {
background-image: url(/includes/img/icon-arrow-right-yellow.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 0.75rem;
margin-right: 0.5rem;
width: 0.5625rem; }
.link-arrow-yellow:hover {
text-decoration: underline; }
.link-arrow-white {
display: inline-block;
font-weight: 400;
text-decoration: none; }
.link-arrow-white:before {
background-image: url(/includes/img/icon-arrow-right-white.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 0.75rem;
margin-right: 0.5rem;
width: 0.5625rem; }
.link-arrow-white:hover {
text-decoration: underline; }
.arrow-left:before {
background-image: url(/includes/img/icon-arrow-right-black.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 0.75rem;
margin-right: 0.5rem;
width: 0.5625rem; }
.arrow-left-blue:before {
background-image: url(/includes/img/icon-arrow-right-blue.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 0.75rem;
margin-right: 0.5rem;
width: 0.5625rem; }
.arrow-left-darkblue:before {
background-image: url(/includes/img/icon-arrow-right-dark-blue.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 0.75rem;
margin-right: 0.5rem;
width: 0.5625rem; }
.arrow-left-yellow:before {
background-image: url(/includes/img/icon-arrow-right-yellow.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 0.75rem;
margin-right: 0.5rem;
width: 0.5625rem; }
.arrow-right:after {
background-image: url(/includes/img/icon-arrow-right-black.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 0.75rem;
margin-left: 0.5rem;
width: 0.5625rem; }
.arrow-right-blue:after {
background-image: url(/includes/img/icon-arrow-right-blue.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 0.75rem;
margin-left: 0.5rem;
width: 0.5625rem; }
.arrow-right-darkblue:after {
background-image: url(/includes/img/icon-arrow-right-dark-blue.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 0.75rem;
margin-left: 0.5rem;
width: 0.5625rem; }
.arrow-right-yellow:after {
background-image: url(/includes/img/icon-arrow-right-yellow.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 0.75rem;
margin-left: 0.5rem;
width: 0.5625rem; }
/*---------------------------*\
#LISTS
\*---------------------------*/
/**
* Base list class
*/
.list {
list-style: none;
padding: 0; }
.list li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.list--ordered__item {
counter-reset: li;
margin-top: 1.875rem;
margin-left: 0;
padding-left: 0; }
@media only screen and (min-width: 481px) {
.list--ordered__item {
margin-left: 5.125rem !important; } }
.list--ordered__item li {
counter-increment: li; }
/**
* Decimal Icons list base class
*
* Used in: Content pages
*
* Places decimal numbers icons on the list as 1 2 3 etc using CSS counters.
* CSS counters are variables which are incremented using CSS rules.
*
* [1] resets the counter at parent
* [2] Increment the counter by 1
* [3] Use the counter as content
*
* #TODO Merge with below .list--decimal-icons, use this class as base class!
*
* For more information see: http://codeitdown.com/ordered-list-css-styles/
*/
.list--decimals {
margin-top: 1.25rem;
margin-left: 2.5rem;
counter-reset: li;
/* [1] */ }
.list--decimals__item {
position: relative;
margin-bottom: 1.5625rem;
counter-increment: li;
/* [2] */ }
.list--decimals__item:before {
position: absolute;
top: -0.3125rem;
left: -2.5rem;
display: inline-block;
width: 1.875rem;
height: 1.875rem;
margin-right: 10px;
background-color: #E9F1FA;
padding: 0.125rem;
border-radius: 50%;
font-size: 1.125rem;
font-weight: bold;
line-height: 1.5em;
text-align: center;
color: #002c5e;
content: counter(li);
/* [3] */ }
/**
* Decimal Icons list used in combination with sub-list with border
* Used in: Kansenscan
*
* Places decimal numbers icons on the list as 1 2 3 etc using CSS counters.
* CSS counters are variables which are incremented using CSS rules.
* For more information see: http://codeitdown.com/ordered-list-css-styles/
*
* #TODO Merge with below .list--decimals, use that class as base class!
*
*/
.list--decimal-icons {
counter-reset: li;
/* resets the counter at parent */ }
.list--decimal-icons__item {
position: relative;
min-height: 3em;
margin-bottom: 1.25rem;
list-style: none;
counter-increment: li;
/* Increment the counter by 1 */ }
.list--decimal-icons__item:before {
position: absolute;
top: -0.4375rem;
left: -1.5625rem;
width: 3rem;
height: 3rem;
background-color: #E9F1FA;
padding: 0.375rem 0 0 0;
border: 0.5rem solid #fff;
border-radius: 50%;
font-size: 1.125rem;
font-weight: bold;
text-align: center;
color: #002c5e;
content: counter(li);
/* Use the counter as content */ }
.list--decimal-icons__item h3 {
line-height: 2.125rem; }
/**
* Places icons next to list items
*/
.list--icons__item {
margin-top: 1.875rem;
list-style: none;
padding-left: 3.4375rem; }
@media only screen and (min-width: 481px) {
.list--icons__item {
padding-left: 0; } }
.list--icons__item:before {
position: absolute;
left: 0;
width: 1.875rem;
height: 3.375rem;
margin-top: -0.1875rem;
margin-left: 0.9375rem;
content: "";
background-size: 1.875rem 1.875rem; }
@media only screen and (min-width: 481px) {
.list--icons__item:before {
background-size: auto;
content: " "; } }
.block h3.list--icons__item {
margin-bottom: 2.1875rem; }
@media only screen and (min-width: 481px) {
.block h3.list--icons__item {
margin-bottom: 0.5rem; } }
.list--icons__item--check-blue-small {
margin-top: 0; }
.list--icons__item--check-blue-small:before {
margin-top: 0;
margin-left: 1.3125rem;
width: 1.25rem;
height: 1.25rem;
background: url(/includes/img/icon-check-dark-blue.png) 0 5px no-repeat;
background-size: 1rem; }
.list--decimal-generic-icons__item {
position: relative;
list-style: none; }
.list--decimal-generic-icons__item:before {
position: absolute;
left: 0;
min-width: 2.5rem;
margin-top: -0.1875rem;
margin-left: 0.9375rem;
content: "";
background-size: 2.1875rem 2.1875rem; }
@media only screen and (min-width: 481px) {
.list--decimal-generic-icons__item:before {
left: -4.375rem;
background-size: 3rem 3rem;
min-width: 4.6875rem; } }
.list--decimal-generic-icons__item:after {
content: counter(li);
/* Use the counter as content */
position: absolute;
top: 1.5625rem;
left: -2px;
width: 1.25rem;
height: 1.25rem;
padding: 1px 0 0 0;
border-radius: 50%;
background-color: #00526E;
font-size: 0.875rem;
font-weight: bold;
text-align: center;
color: #ffffff; }
@media only screen and (min-width: 481px) {
.list--decimal-generic-icons__item:after {
top: 1.375rem;
width: 1.5625rem;
height: 1.5625rem;
font-size: 1.125rem;
left: -4.875rem;
padding: 3px 0 0 0; } }
.list--decimal-generic-icons__item--newstyle {
margin-bottom: 2.5rem !important; }
@media only screen and (min-width: 481px) {
.list--decimal-generic-icons__item--newstyle {
margin-bottom: 1.25rem !important; } }
.list--decimal-generic-icons__item--newstyle:after {
padding: 0 0 0 0; }
.list--icons__item--print:before {
margin: 0.125rem 0 0 0;
background-image: url(/includes/img/icons-svg/icon-print-2.svg);
background-repeat: no-repeat;
background-size: 2.5rem 2.1875rem; }
@media only screen and (min-width: 481px) {
.list--icons__item--print:before {
background-size: auto; } }
.list--icons__item--print:after {
top: 27px; }
@media only screen and (min-width: 481px) {
.list--icons__item--print:after {
top: 34px; } }
.list--icons__item--signature:before {
margin: 3px 0 0 2px;
background-image: url(/includes/img/icons-svg/icon-pen.svg);
background-repeat: no-repeat;
background-size: 1.875rem 2.1875rem; }
@media only screen and (min-width: 481px) {
.list--icons__item--signature:before {
background-size: auto; } }
.list--icons__item--signature:after {
top: 1.75rem; }
@media only screen and (min-width: 481px) {
.list--icons__item--signature:after {
top: 2.3125rem; } }
.list--icons__item--attachments:before {
margin: 0 0 0 0;
background-image: url(/includes/img/icons-svg/icon-attachment.svg);
background-repeat: no-repeat;
background-size: 2.1875rem 2.5rem; }
@media only screen and (min-width: 481px) {
.list--icons__item--attachments:before {
margin: 3px 0 0 0;
background-size: auto; } }
.list--icons__item--attachments:after {
top: 1.3125rem; }
.list--icons__item--send:before {
margin: 0.3125rem 0 0 0;
background-image: url(/includes/img/icons-svg/icon-envelope.svg);
background-repeat: no-repeat;
background-size: 2.5rem 1.75rem; }
@media only screen and (min-width: 481px) {
.list--icons__item--send:before {
background-size: auto;
margin: 4px 0 0 0; } }
.list--icons__item--documentschecked:before {
margin: 3px 0 0 0;
background-image: url(/includes/img/icon_exportdoc_signed.png);
background-repeat: no-repeat; }
.list--icons__item--documents:before {
margin: 3px 0 0 0;
background-image: url(/includes/img/icon_exportdoc.png);
background-repeat: no-repeat; }
.list--icons__item--monitor:before {
margin: 0.3125rem 0 0 0;
background-image: url(/includes/img/icon_monitor.png);
background-repeat: no-repeat; }
.list--icons__item--application:before {
margin: 0.3125rem 0 0 0;
background-image: url(/includes/img/icon_software.png);
background-repeat: no-repeat; }
.list--icons__item--business:before {
margin: 0;
background-image: url(/includes/img/icon_business.png);
background-repeat: no-repeat;
background-size: 2.8125rem 1.875rem; }
@media only screen and (min-width: 481px) {
.list--icons__item--business:before {
background-size: auto; } }
.list--icons__item--idcard:before {
margin: 0.3125rem 0 0 0;
background-image: url(/includes/img/icon_idcard.png);
background-repeat: no-repeat; }
.list--icons__item--key:before {
margin: 0.3125rem 0 0 0;
background-image: url(/includes/img/icon_key.png);
background-repeat: no-repeat; }
/**
* Creates padded background to the icons next to list items
*/
.list--icons__item--block {
padding-left: 3.5625rem; }
.list--icons__item--block:before {
height: 3.875rem;
width: 3.875rem;
margin-left: 1.25rem;
margin-top: 0;
background-color: #CCDEF4;
background-position: 0.9375rem 1rem;
background-repeat: no-repeat; }
.scan-result__opportunities:before {
background-image: url(/includes/img/icon-kansen.png); }
.scan-result__urgency:before {
background-image: url(/includes/img/icon-urgent.png); }
.scan-result__obstacles:before {
background-image: url(/includes/img/icon-wall.png); }
.scan-result__tech:before {
background-image: url(/includes/img/icon-tech.png); }
/**
* ???
*/
.list--features__item {
margin-left: 1.125rem;
padding-left: 0.5rem; }
/**
* Action arrow for list
*/
.list__action {
display: block;
padding-left: 2.5rem;
background: transparent url(/includes/img/action-arrow.png) 0 0.5625rem no-repeat; }
.list__action a {
text-decoration: none; }
.list__item {
margin-left: 2rem; }
.list__item--action {
display: block;
padding-left: 2.5rem;
background: transparent url(/includes/img/action-arrow.png) 0 0.1875rem no-repeat; }
.list__item--action__item {
display: block;
margin-top: 0.75rem; }
.list__item--child {
margin-left: 2.625rem; }
/**
* list__item--border
* Places border to the left of the content.
*/
.list__item--border {
border-left: 0.125rem solid #ccc;
padding-left: 2rem; }
.list__item--border--is-last {
border: none; }
.removenumberlist {
list-style-type: none; }
.list-reset {
padding: 0; }
.list-reset li {
margin-left: 0;
background-image: none;
padding-left: 0;
list-style: none; }
/**
* List with arrow
*/
.list-arrow {
list-style: none;
padding: 0;
/** to compensate margin-left created by :before (see below)*/
margin-left: 1.25rem; }
.list-arrow li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.list-arrow li a {
display: inline-block;
font-weight: 400;
text-decoration: none; }
.list-arrow li a:before {
display: inline-block;
height: 0.75rem;
margin-right: 0.5rem;
margin-left: -1.25rem;
/** push text to the right in the list item in alignment with the right side of the icon*/
width: 0.5625rem;
background-image: url(/includes/img/icon-arrow-right-black.png);
background-repeat: no-repeat;
background-size: contain;
content: ''; }
.list-arrow li a:hover {
text-decoration: underline; }
/**
* List with blue arrows
*/
.list-arrow--dark-blue,
.list-arrow-dark-blue {
list-style: none;
padding: 0; }
.list-arrow--dark-blue li,
.list-arrow-dark-blue li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.list-arrow--dark-blue li a,
.list-arrow-dark-blue li a {
display: inline-block;
font-weight: 400;
text-decoration: none; }
.list-arrow--dark-blue li a:before,
.list-arrow-dark-blue li a:before {
background-image: url(/includes/img/icon-arrow-right-dark-blue.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 0.75rem;
margin-right: 0.5rem;
width: 0.5625rem; }
.list-arrow--dark-blue li a:hover,
.list-arrow-dark-blue li a:hover {
text-decoration: underline; }
.block .list-arrow--dark-blue li a,
.block .list-arrow-dark-blue li a {
color: #002c5e; }
/**
* List with yellow arrows
*/
.list-arrow--yellow li,
.list-arrow-yellow li {
margin: 0.625rem 0; }
.list-arrow--yellow li a,
.list-arrow-yellow li a {
font-weight: 600;
color: #065ca9; }
.list-arrow--yellow li a:before,
.list-arrow-yellow li a:before {
background-image: url(/includes/img/icon-arrow-right-yellow.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 0.75rem;
margin-right: 0.5rem;
width: 0.5625rem; }
/**
* List with orange arrows
*/
.list-arrow--orange li {
font-size: 1.125rem;
line-height: 1.5rem;
margin-bottom: 1.25rem; }
.list-arrow--orange li a:before {
content: '';
width: 0.6875rem;
height: 1.0625rem;
position: relative;
top: 2px;
background-image: url(/includes/img/svg/compressed/icon-arrow-right-orange.svg); }
.block .list-arrow--orange li a {
color: #000000; }
/**
* List with yellow checkmarks
*/
.list-check--yellow,
.list-check-yellow {
list-style: none;
padding: 0; }
.list-check--yellow li,
.list-check-yellow li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.list-check--yellow li,
.list-check-yellow li {
background: url(/includes/img/icon-check-yellow.png) no-repeat;
background-size: 1rem;
background-position-y: 0.1875rem;
margin-bottom: 1rem !important;
padding-left: 1.875rem; }
/**
* List of payment methods
*/
.list-payments {
margin-bottom: 1rem; }
.list-payments li {
display: inline;
display: inline-block;
margin-right: 1.125rem; }
.list-legend {
position: relative;
display: none;
top: 8px; }
.list-legend li {
list-style: none;
margin-bottom: 0.3125rem;
position: relative;
margin-right: 0.625rem; }
.list-legend li:before {
content: '';
position: absolute;
background-image: url(/includes/img/icons-svg/icon-yellow-dot.svg);
background-size: 30px 30px;
background-color: transparent;
background-repeat: no-repeat;
width: 1.875rem;
height: 1.875rem;
left: -1.875rem;
top: -3px; }
.list-legend li:first-child:before {
background-image: url(/includes/img/icons-svg/icon-blue-dot.svg); }
@media only screen and (min-width: 721px) {
.list-legend li {
margin-bottom: 0.3125rem; } }
@media only screen and (min-width: 961px) {
.list-legend li {
float: left;
margin-bottom: 0; } }
@media only screen and (min-width: 721px) {
.list-legend {
display: inline-block;
left: 4.375rem; } }
@media only screen and (min-width: 961px) {
.list-legend {
top: 1.25rem;
left: 11.25rem; } }
/**
* ???
*/
.list-table {
width: 100%;
margin-bottom: 1.25rem;
border-collapse: collapse; }
/**
* blue list
*/
.list-blue {
color: #065ca9; }
/**
* New styling for 'vragencontainer'
*/
.list-questions__item {
padding-top: 2.5rem;
padding-bottom: 1.25rem;
border-bottom: #dcdcdc;
border-bottom-style: solid;
border-width: 1px; }
@media only screen and (min-width: 481px) {
.list-questions__item {
padding-bottom: 0.3125rem; } }
.list-questions__parent {
cursor: pointer;
padding-top: 0;
padding-bottom: 1.5625rem;
padding-right: 5rem;
margin-top: 0;
margin-bottom: 0; }
@media only screen and (min-width: 481px) {
.list-questions__parent {
margin-top: -0.625rem; } }
.list-questions__parent.inactive {
padding-bottom: 1.25rem;
border: none;
max-height: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
transition: width 500ms ease-out;
padding: 0 1.25rem 0; }
.list-new {
list-style: none;
padding: 0; }
.list-new .list-new__item {
list-style: none;
margin-left: 0;
padding-left: 0; }
.list-new .list-new__item--bullet {
list-style: disc;
list-style-position: inside; }
.list-new .list-new__icon {
width: 40px;
height: 35px;
display: block;
float: left;
margin-right: 1.25rem; }
.list-new .list-new__label {
display: inline; }
.list-new--highligths {
margin-top: 1.25rem;
margin-bottom: 1.25rem; }
.list-new--highligths .list-new__item {
margin-bottom: 35px; }
.list-new--checkmarks {
margin-left: 1.5rem !important;
margin-bottom: 1.25rem !important; }
.list-new--checkmarks .list-new__item {
padding-left: 0.9375rem;
list-style-image: url(/includes/img/svg/icon-check-yellow.svg); }
.content-list-new {
border: 1px solid #bebebe;
border-radius: 0.3125rem;
background-clip: padding-box;
font-size: 1rem; }
.content-list-new p, .content-list-new a, .content-list-new li {
font-size: 16px; }
@media only screen and (min-width: 481px) {
.content-list-new p, .content-list-new a, .content-list-new li {
font-size: 1.125rem; } }
.row .content-list-new p,
.row .content-list-new a,
.row .content-list-new li {
font-size: 16px; }
@media only screen and (min-width: 481px) {
.row .content-list-new p,
.row .content-list-new a,
.row .content-list-new li {
font-size: 1.125rem; } }
.content-list-new li {
position: relative;
margin: 0;
padding: 1.25rem; }
.content-list-new__item {
display: block;
border-top: 1px solid #bebebe;
margin-bottom: 0 !important; }
.content-list-new__item:hover {
cursor: pointer;
background-color: #e9f1fb; }
.content-list-new__item.active {
background-color: #00526E;
color: #ffffff; }
@media only screen and (min-width: 641px) {
.content-list-new__item {
background-color: inherit;
color: inherit; } }
.content-list-new__item:first-child {
border-top: none;
border-radius: 0.3125rem 0.3125rem 0 0; }
.content-list-new__item:last-child {
border-radius: 0 0 0.3125rem 0.3125rem; }
.content-list-new__item .emphasize {
font-weight: 600; }
.content-list-new__item.is-heading {
background-color: #f8f8f8;
font-weight: 500; }
.content-list-block .content-list-block__item {
margin-bottom: 0; }
@media only screen and (min-width: 481px) {
.content-list-block .content-list-block__item {
margin-bottom: 0.625rem; } }
.content-list-block .content-list-block__item .is-inline-medium-up {
margin-top: 0.625rem; }
.content-list-block a.content-list-block__item {
margin-bottom: 3px; }
@media only screen and (min-width: 481px) {
.content-list-block a.content-list-block__item {
margin-bottom: 0.3125rem; } }
.list-block-table .list-block-table__col1 {
float: left; }
.list-block-table .list-block-table__col2 {
float: right; }
.list-block-table .list-block-table__col2 p {
text-align: right; }
.flex {
display: flex; }
.flex-child {
flex: 1; }
.flex-child:last-child {
flex: 0; }
.flex-child:last-child span {
float: right; }
.no-flexbox .flex-child {
display: inline-block; }
.no-flexbox .flex-child:first-child + div {
float: right; }
@media only screen and (min-width: 641px) {
.radio-list-new li {
padding: 1.25rem 1.25rem 1.25rem 3.4375rem; } }
.radio-list-new li:before {
width: 0;
height: 0; }
@media only screen and (min-width: 641px) {
.radio-list-new li:before {
content: "";
width: 1.25rem;
height: 1.25rem;
position: absolute;
top: 1.25rem;
left: 1.25rem;
background-size: contain;
background-repeat: no-repeat;
float: left;
background-image: url("/includes/img/svg/compressed/icon-radio-button.svg"); } }
.radio-list-new li.active:before {
background-image: url("/includes/img/svg/compressed/icon-radio-button-active.svg"); }
.aside {
margin-bottom: 1.875rem; }
.aside h2 {
margin-bottom: 1rem;
color: #002c5e;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.5625rem; }
/**
* External link
* Mark external links with a pop out icon
*/
.externallink {
background: url(/includes/img/icon-external-mid-blue.png) 100% center no-repeat;
padding-right: 1rem; }
.externallink:hover {
background: url(/includes/img/icon-external-dark-blue.png) 100% center no-repeat; }
.externallink--question {
background: url(/includes/img/icon-external-dark-blue.png) 100% center no-repeat; }
.channelme-chat-btn.enabled {
background-color: #00838A !important;
background-image: none;
border-radius: 0.3125rem 0 0 0.3125rem !important;
bottom: 2.8125rem !important;
box-shadow: 0 0 0.375rem 0 rgba(0, 0, 0, 0.35);
color: #f8f8f8;
cursor: pointer;
font-size: 1.125rem;
height: 2.6875rem;
line-height: 2.0625rem;
padding: 0.3125rem 1.3125rem;
position: fixed;
right: 0;
text-align: center;
text-decoration: none;
z-index: 2147483646; }
.channelme-chat-btn.disabled .is-hidden-small-up, .channelme-chat-btn.disabled .is-hidden-extra-small-dn {
display: none; }
.chat-enabled .site-footer__links .l-column-medium-5 {
width: 70%; }
.chat-enabled .site-footer__links .l-column-medium-5 .site-footer__releasenotes {
float: none; }
.chat-enabled .site-footer__links .l-column-medium-7 {
width: 100%; }
.co-browser-code {
color: #333333;
font-weight: 600;
font-size: 0.875rem;
float: right; }
.site-footer .co-browser-code a:hover {
text-decoration: none; }
.accordion__panel {
padding-bottom: 1.5625rem;
margin-bottom: 1.5625rem;
border-bottom: #dcdcdc;
border-bottom-style: solid;
border-width: 1px;
position: relative; }
.accordion__heading {
cursor: pointer;
padding-top: 5px;
padding-right: 3.125rem;
margin-bottom: 0;
height: auto;
line-height: 3.125rem;
font-size: 1.25rem;
font-weight: 600; }
.accordion__heading-button {
position: absolute;
right: 0;
top: 0.625rem; }
.accordion__panel-content {
max-height: 0px;
visibility: hidden;
transition: max-height 0.5s linear, opacity 0.4s linear, visibility 0.5s linear;
width: 80%;
opacity: 0; }
.accordion__panel-content li {
list-style-type: disc;
list-style-position: inside; }
@media only screen and (min-width: 721px) {
.accordion__panel-content {
width: 80%; } }
.accordion__panel-content.is-collapsed {
visibility: visible;
height: auto;
max-height: 25rem;
opacity: 1; }
.accordion-container__search-bar {
position: absolute;
width: 98%; }
.breadcrumb {
display: none;
margin: 0 0 1.25rem;
list-style: none;
padding: 0;
padding-top: 1.25rem; }
.breadcrumb:before, .breadcrumb:after {
content: ' ';
display: table; }
.breadcrumb:after {
clear: both; }
.breadcrumb li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
@media only screen and (min-width: 641px) {
.breadcrumb {
display: block; } }
.breadcrumb li {
float: left;
margin-right: 0.875rem;
color: #9b9b9b;
font-weight: 300;
line-height: 1.25rem; }
.breadcrumb li:before {
color: #9b9b9b;
content: '>';
display: inline-block;
margin-right: 0.875rem;
position: relative;
top: 0.0625rem; }
.breadcrumb li:first-child:before {
display: none; }
.breadcrumb a {
color: #26a9df;
text-decoration: none; }
.breadcrumb a:hover {
text-decoration: underline; }
.notification {
background-color: #ffffff;
background-position: 1.25rem 1.25rem;
background-repeat: no-repeat;
border: 1px solid #FF8800;
border-radius: 0.3125rem;
clear: both;
display: block;
margin-bottom: 2.1875rem;
opacity: 1;
padding: 1.25rem 3.75rem 0 3.75rem;
position: relative;
transition: opacity 250ms linear; }
.notification + .notification {
margin-bottom: 1.25rem; }
.notification--success {
border-color: #5BA470; }
.notification--success .notification__icon {
fill: #5BA470; }
.notification--info {
border-color: #333333; }
.notification--info .notification__icon {
fill: #333333; }
.notification--error {
border-color: #cc0000; }
.notification--error .notification__icon {
fill: #cc0000; }
.notification--warning .notification__icon {
fill: #FF8800; }
.notification--is-faded {
opacity: 0 !important; }
.notification--is-collapsed {
height: 0 !important; }
.notification--is-not-closable {
padding-right: 1.25rem; }
.notification--header {
margin-bottom: 2.1875rem;
margin-top: 1.25rem; }
.has-breadcrumb .notification--header {
margin-bottom: 2.1875rem;
margin-top: 0.625rem; }
@media only screen and (min-width: 721px) {
.notification--billboard {
margin-bottom: -6.25rem; } }
.notification__message {
color: #333333;
text-align: left;
margin-bottom: 1.25rem; }
.notification__close {
background: transparent;
border: none;
color: #bebebe;
cursor: pointer;
height: 4.0625rem;
line-height: 0;
position: absolute;
top: 0;
right: 0;
width: 4.0625rem; }
.notification__close:hover .icons--icon-close, .notification__close:active .icons--icon-close {
stroke: #00526E; }
.notification__icon {
left: 1.25rem;
position: absolute; }
.share-buttons {
margin-top: 2.5rem;
padding: 0 1rem; }
.share-buttons:before, .share-buttons:after {
content: ' ';
display: table; }
.share-buttons:after {
clear: both; }
.share-buttons.l-column-medium-6 {
margin-top: 0; }
.share-buttons.l-column-medium-6 a {
margin-top: 0; }
.share-buttons:first-child {
margin-top: 0; }
.block .share-buttons {
padding: 0; }
.share-buttons h2 {
color: #002c5e;
font-size: 1.25rem;
font-weight: 700; }
.share-buttons a {
float: left;
margin: 1rem 1.25rem 0 0;
height: 2.5rem;
width: 2.5rem; }
.share-buttons a:hover {
background-position: left 100%; }
.share-buttons .share-buttons-facebook {
background-image: url("/includes/img/share-buttons-facebook.png"); }
.share-buttons .share-buttons-twitter {
background-image: url("/includes/img/share-buttons-twitter.png"); }
.share-buttons .share-buttons-linkedin {
background-image: url("/includes/img/share-buttons-linkedin.png"); }
/**
* The new social share buttons component which is a part of feedback form
* The old code above needs to be removed once all the pages use this new html/styling
**/
.social-share__mobile {
border-radius: 5px;
border: 1px solid #9b9b9b;
padding: 0 11px !important;
vertical-align: middle;
line-height: 51px;
height: 49px;
display: inline-block;
float: left; }
.form-feedback .social-share__mobile {
float: right; }
@media only screen and (min-width: 641px) {
.social-share__mobile {
display: none; } }
.social-share__mobile:hover, .social-share__mobile:active {
background-color: #dbe8f7;
cursor: pointer; }
.social-buttons-list {
float: left; }
.form-feedback .social-buttons-list {
float: right; }
.social-buttons-list li {
border: 1px solid #9b9b9b;
border-right: 0;
border-radius: 0;
color: #002c5e;
font-weight: 600;
padding: 0 11px;
vertical-align: middle;
line-height: 49px;
height: 49px;
margin-left: -5px;
display: none; }
@media only screen and (min-width: 641px) {
.social-buttons-list li {
display: inline-block; } }
.social-buttons-list li:first-child {
border-radius: 5px 0 0 5px;
margin-left: 0; }
.social-buttons-list li:first-child:hover, .social-buttons-list li:first-child:active {
background-color: #f8f8f8;
cursor: default; }
.social-buttons-list li:last-child {
border-radius: 0 5px 5px 0;
border-right: 1px solid #9b9b9b; }
.social-buttons-list li:hover, .social-buttons-list li:active {
background-color: #dbe8f7;
cursor: pointer; }
.social-buttons-list--toggle {
position: absolute;
top: -49px;
left: 10px;
width: 204px; }
.form-feedback .social-buttons-list--toggle {
right: 0;
left: auto; }
@media only screen and (min-width: 641px) {
.social-buttons-list--toggle {
position: relative;
top: auto;
left: auto;
width: auto; } }
.social-buttons-list--toggle li {
display: inline-block;
background-color: #f8f8f8; }
.social-button:before {
content: '';
display: inline-block;
position: relative;
top: 5px;
width: 22px;
height: 22px;
background-repeat: no-repeat; }
.social-button--facebook:before {
background-image: url(/includes/img/icons-svg/icon-facebook-grey.svg); }
.social-button--twitter:before {
background-image: url(/includes/img/icons-svg/icon-twitter-grey.svg); }
.social-button--linkedin:before {
background-image: url(/includes/img/icons-svg/icon-linkedin-grey.svg); }
.social-button--mobile:before {
width: 23px;
height: 24px;
top: 7px;
background-image: url(/includes/img/icons-svg/icon-share.svg); }
.social-buttons-list li:hover .social-button--facebook:before {
background-image: url(/includes/img/icons-svg/icon-facebook-blue.svg); }
.social-buttons-list li:hover .social-button--twitter:before {
background-image: url(/includes/img/icons-svg/icon-twitter-blue.svg); }
.social-buttons-list li:hover .social-button--linkedin:before {
background-image: url(/includes/img/icons-svg/icon-linkedin-blue.svg); }
.switch {
display: inline;
display: inline-block;
position: relative;
height: 1.875rem;
width: 4.5625rem;
background-color: #ffffff;
border: 1px solid #00526E;
border-radius: 0.3125rem;
/**
* View switch for shop product list view (detailed/compact)
*/
/**
* Switch for search
* #TODO documentation plz
*/ }
.switch label,
.switch input {
display: inline-block; }
.switch--productlistview {
float: left;
margin-bottom: 1.25rem; }
@media only screen and (min-width: 481px) {
.switch--productlistview {
float: right; } }
.switch--search {
width: 12.0625rem;
height: 2.6875rem;
margin-bottom: 1.25rem;
float: left; }
@media only screen and (min-width: 481px) {
.switch--search {
float: right; } }
.switch--search .switch__label {
width: auto;
height: auto;
padding: 12px;
color: #9b9b9b; }
.switch--search .switch__radio:checked + .switch__label {
width: auto;
height: auto;
color: white;
top: -1px; }
/**
* The single radio buttons in the switch
*/
.switch__radio {
position: relative;
left: -9999px;
width: 0; }
.switch__radio:checked + .switch__label {
top: -0.1875rem;
height: 2.1875rem;
width: 2.5rem;
z-index: +1;
background-color: #00526E;
border-radius: 0.3125rem;
box-shadow: 0.0625rem 0 0.125rem 0 rgba(0, 0, 0, 0.3); }
.switch__radio:checked + .switch__label--first {
left: -0.1875rem; }
.switch__radio:checked + .switch__label--last {
right: -0.1875rem; }
.switch__radio:checked + .switch__label--detailedlist {
background-position-y: 0.6875rem;
background-image: url(/includes/img/icons-svg/icon-list-white.svg) !important; }
.switch__radio:checked + .switch__label--compactlist {
background-image: url(/includes/img/icons-svg/icon-list-compact-white.svg) !important; }
/**
* Label containg text and/or icon
*/
.switch__label {
position: absolute;
float: left;
margin: 0;
width: 2.1875rem;
height: 1.875rem;
overflow: hidden;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background-size: 1.3125rem;
padding: 0.3125rem;
transition: background-color 0.15s ease-in-out; }
.switch__label--first {
left: 0; }
.switch__label--last {
right: 0; }
.switch__label--detailedlist {
background-position-y: 0.5rem;
background-image: url(/includes/img/icons-svg/icon-list-grey.svg); }
.switch__label--compactlist {
background-image: url(/includes/img/icons-svg/icon-list-compact-grey.svg); }
.melding {
border: 1px solid #00526E;
border-radius: 0.3125rem;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
margin-top: -1.25rem;
overflow: hidden; }
.melding--alert {
border: 1px solid #cc0000; }
.melding--general {
border: 1px solid #5BA470; }
.melding__header {
background-color: #00526E;
padding-bottom: 0.625rem;
padding-left: 1.875rem;
padding-right: 3.75rem;
padding-top: 0.625rem; }
.melding--alert .melding__header {
background-color: #cc0000; }
.melding--general .melding__header {
background-color: #5BA470; }
.melding__title {
color: #ffffff;
font-weight: 400 !important;
font-size: 1.75rem;
margin-bottom: 0; }
.melding__close {
background: transparent;
border: none;
color: #bebebe;
cursor: pointer;
height: 4.0625rem;
line-height: 0;
position: absolute;
right: 0.625rem;
top: -1.25rem;
width: 4.0625rem; }
.melding__message {
background-color: #ffffff;
padding: 1.25rem 1.875rem 0.625rem; }
.site-header {
position: relative;
z-index: 100;
margin-bottom: 1.25rem;
background: #ffffff;
box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.2);
text-align: right; }
.site-header a {
text-decoration: none;
transition: all 0.15s ease-in-out; }
/**
* Specific logo styling exclusive to site header
*/
.site-header__logo {
float: left;
margin-bottom: 0;
padding: 1.25rem 0;
font-size: 1.5em;
font-weight: 600;
text-align: left;
line-height: 1em; }
@media only screen and (min-width: 961px) {
.site-header__logo {
font-size: 1.9em; } }
.site-header__logo a {
position: relative;
top: 0.15em; }
.site-header__logo a:hover {
color: #002c5e; }
.site-header__logo img {
position: relative;
top: 0.17em;
vertical-align: middle;
height: 2rem;
margin-right: 10px; }
@media only screen and (min-width: 721px) {
.site-header__logo img {
top: 0em;
height: 3.125rem; } }
/**
* Rectifies margin-bottom
*/
.has-site-header-correction {
display: block;
margin-top: -1.25rem; }
/**
* #TODO Documentation plz
*/
.is-first-block {
padding-top: 1.25rem !important; }
@media only screen and (min-width: 641px) {
.is-first-block {
padding-top: 0 !important; } }
/*-----------------*\
#NAVIGATION
\*-----------------*/
/**
* Separate navigational modules in header module
*/
.nav {
display: inline;
display: inline-block;
padding-left: 0;
padding-right: 0;
line-height: 0; }
.nav a:hover,
.nav a:focus {
color: #002c5e; }
@media only screen and (min-width: 721px) {
.nav {
padding-right: 10px;
padding-left: 10px; }
.nav li {
position: relative;
line-height: inherit; } }
/**
* Primary navigation level
*/
@media only screen and (min-width: 721px) {
.nav--primary a {
margin: 0 2.5rem 0 0;
padding: 0.625rem 0;
border-bottom: 0.1875rem solid transparent;
font-size: 1.0625rem;
font-weight: 600; }
.nav--primary a:hover, .nav--primary a:focus, .nav--primary a:active, .nav--primary a.is-active {
border-bottom: 0.1875rem solid #002c5e; }
.nav--primary a:after {
display: none; }
.nav--primary li:first-child a {
margin-left: 0; }
.nav--primary li:last-child a {
margin-right: 0; } }
/**
* Secondary navigation level
* with content (Contact) and account modules.
*/
.nav--secondary {
line-height: 0rem; }
@media only screen and (min-width: 721px) {
.nav--secondary {
top: 0.20em; } }
@media only screen and (min-width: 961px) {
.nav--secondary {
float: right;
clear: right;
line-height: 5.65rem; }
.nav--secondary ul {
position: relative; } }
/**
* Styling for search navigation
*/
@media only screen and (min-width: 721px) {
.nav--search a {
margin: 0;
margin-right: 0.875rem; } }
/**
* Account management sub navigation
*/
@media only screen and (min-width: 721px) {
.nav__account-manager a {
padding: 0.625rem 1.25rem !important; } }
/**
* Default behavior for buttons in navigational elements
*/
.nav__button {
display: inline-block;
margin-right: 0;
padding: 1.25rem 0.625rem;
background: transparent;
border: none;
font-size: 0.8em;
font-weight: 600;
color: #002c5e;
text-align: center;
line-height: 1em; }
.nav__button:before {
content: '';
display: block;
position: relative;
top: 0.2em;
height: 1em;
width: 100%;
margin-right: 0.625rem;
margin-bottom: 0.625rem;
background-position: center;
background-repeat: no-repeat;
background-size: 1em;
background-size: contain;
background-position-x: center;
font-size: 1.5em;
line-height: 1em; }
@media only screen and (min-width: 641px) {
.nav__button {
font-size: 1em; }
.nav__button:before {
display: inline-block;
width: 1em;
margin-bottom: 0; } }
@media only screen and (min-width: 721px) {
.nav__button {
padding: 0;
font-size: 0.8em;
font-weight: 400; } }
/**
* Account nav button
*/
.nav__button--account:before {
background-image: url(/includes/img/icons-svg/icon-person.svg); }
.nav__button--account.is-active:before {
background-image: url(/includes/img/icons-svg/icon-person-active.svg); }
/**
* Burger button (content)
*/
.nav__button--burger:before {
background-image: url(/includes/img/icons-svg/icon-hamburger.svg); }
/**
* Close button for navigation elements like submenus
*/
.nav-button-close {
float: right;
height: auto;
width: 1.5rem;
margin-right: 0;
background: transparent;
border: none;
padding: 0; }
.nav-button-close:hover .icons--icon-close {
stroke: #00526E; }
@media only screen and (min-width: 721px) {
.nav-button-close {
display: none; } }
/**
* Contact button
*/
.nav__button--contact:before {
background-image: url(/includes/img/icons-svg/icon-phone.svg); }
/**
* Search button
*/
.nav__button--search {
position: relative;
display: inline-block; }
.nav__button--search:before {
top: 0.3em;
height: 1.4375rem;
background-image: url(/includes/img/svg/compressed/search.svg); }
@media only screen and (min-width: 721px) {
.nav__button--search {
padding: 0.75rem 0 0.75rem 2em !important;
line-height: 1em; }
.nav__button--search:before {
position: absolute;
left: 0; } }
/**
* Exceptions for buttons in secondary navigation
*/
@media only screen and (min-width: 721px) {
.nav__button--secondary {
padding: 1rem; } }
/**
* Submenu behaving as full screen popup on mobile devices
*/
.nav__sub {
position: fixed;
height: 100%;
width: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
overflow-y: scroll;
background: #ffffff;
font-weight: 300;
color: #002c5e;
line-height: 1em;
text-align: left; }
@media only screen and (min-width: 721px) {
.nav__sub {
overflow: hidden; } }
/**
* .nav__sub > header
*/
.nav__sub-header {
margin-bottom: 1.25rem;
padding: 1.25rem;
box-shadow: rgba(0, 0, 0, 0.15) 0 0.125rem 0.25rem 0; }
.nav__sub-header h1 {
display: inline;
margin: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.5em; }
@media only screen and (min-width: 721px) {
.nav__sub-header {
margin-bottom: 0;
box-shadow: none; }
.nav__sub-header h1 {
font-size: 1.5rem;
font-weight: 300; } }
/**
* A submenu which also pops up on larger screens, but in
* smaller state (modal/dropdown)
*/
@media only screen and (min-width: 721px) {
.nav__sub--large {
position: absolute;
display: table;
top: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
height: auto;
min-width: 15.625rem;
overflow: hidden;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
border-top: 0.125rem solid #002c5e;
box-shadow: 0.1875rem 0.1875rem 0.3125rem 0 rgba(0, 0, 0, 0.2); }
.nav__sub--large a {
padding: 1.25rem; } }
/**
* Account & Contact (parts of secondary nav)
*/
.nav__account,
.nav__contact {
display: inline-block; }
/**
* Link to contact page is only shown on bigger screens
* On smaller screens it's shown in secondary content menu
*/
.nav__contact {
display: none; }
@media only screen and (min-width: 721px) {
.nav__contact {
display: inline-block; } }
/**
* Main content navigation
* Contains the three main content sections for the site
*/
@media only screen and (min-width: 721px) {
.nav__content {
float: left;
display: inline-block !important;
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: 99;
padding: 0;
line-height: 0; }
.nav__content h1 {
display: none; }
.nav__content .nav__close {
display: none; }
.nav__content li {
float: left; } }
/**
* Dotted lines in nav block
*/
.nav__dots {
margin-right: 1.25rem;
margin-left: 1.25rem; }
/**
* List with primary navigation links
* Used for: main content items & login links
*/
.nav__primary-list {
display: block;
margin-bottom: 1.25rem;
font-size: 1.5rem;
line-height: 1em; }
.nav__primary-list a {
display: block;
padding: 1.25rem 1.25rem;
font-size: 1.5rem; }
@media only screen and (min-width: 721px) {
.nav__primary-list a {
font-size: 1.0625rem; } }
.nav__primary-list a:before {
top: 0; }
.nav__primary-list > li > a:after {
content: '';
float: right;
position: relative;
top: 0.15em;
height: 1rem;
width: 1rem;
background: url(/includes/img/icons-svg/icon-arrow_right_yellow.svg) no-repeat center;
background-size: contain; }
@media only screen and (min-width: 721px) {
.nav__primary-list > li > a:after {
top: 0; } }
.nav__primary-list > li.is-logged-in > a:after {
display: none; }
@media only screen and (min-width: 721px) {
.nav__primary-list {
margin-bottom: 0;
font-size: 1.125rem; }
.nav__primary-list a {
padding: 0.75rem 0;
line-height: 1em; } }
/* end nav__primary-list */
/**
* Secondary list with links (meta nav)
*/
.nav__secondary-list {
font-size: 1rem;
line-height: 1.5em; }
.nav__secondary-list a {
display: block;
padding: 0.4375rem 1.25rem;
font-size: 1rem; }
.nav__secondary-list a:hover, .nav__secondary-list a:focus {
text-decoration: underline; }
/**
* Primary content navigation
* Holds exceptions for primary content i.r.t. nav__primary-list
*/
@media only screen and (min-width: 721px) {
.nav__primary-content {
display: inline-block; }
.nav__primary-content a:before {
height: 0;
width: 0;
top: auto;
margin: 0;
background-image: none; } }
/**
* Styling for account manager (module in site-header)
*/
.account-manager__sub {
margin-bottom: 10px;
font-size: 1rem; }
.account-manager__sub a {
padding: 0.625rem 1.25rem;
font-weight: 600;
font-size: 1rem; }
.account-manager__sub a:hover, .account-manager__sub a:focus {
text-decoration: underline; }
.account-manager__logo-eherkenning,
.account-manager__user {
padding: 10px 20px !important; }
.account-manager__user {
font-weight: 700; }
.account-manager__logout {
margin-bottom: 0.625rem;
font-size: 0.875rem;
text-align: right; }
.account-manager__logout:before {
display: none !important; }
.cookie-melding {
background: #1e2c41;
/* Old browsers */
background: linear-gradient(to bottom, #1e2c41 0%, #263853 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
padding-bottom: 1.875rem;
padding-top: 1.875rem; }
@media only screen and (min-width: 641px) {
.cookie-melding {
padding-bottom: 0.625rem; } }
.cookie-melding__text {
color: #ffffff;
font-size: 1rem;
font-weight: 400;
margin-bottom: 1.25rem; }
.cookie-melding__button {
margin-bottom: 0.9375rem;
width: 100%; }
@media only screen and (min-width: 481px) {
.cookie-melding__button {
width: auto; } }
.cookie-melding__button:hover {
background-color: #3578c6;
color: #ffffff !important; }
.cookie-melding__link {
color: #ffffff;
display: block;
float: left;
font-size: 1rem;
text-align: center;
width: 100%; }
@media only screen and (min-width: 481px) {
.cookie-melding__link {
text-align: left; } }
@media only screen and (min-width: 721px) {
.cookie-melding__link {
margin-bottom: 1.25rem;
text-align: right; } }
.cookie-melding__link:hover {
color: #ffffff; }
.u-padding-horizontal {
padding-left: 1.25rem !important;
padding-right: 1.25rem !important; }
@media only screen and (min-width: 721px) {
.u-align-right-medium-up {
text-align: right !important; } }
.u-color-white {
color: #ffffff; }
.site-footer {
width: 100%;
background-color: #f8f8f8;
margin-top: 60px;
color: #333;
font-weight: 300;
font-size: 0.875rem;
/**
* Position footer absolute on bottom on larger screens. To
* prevent footer from sticking on top when a page has no or
* not much content (like global search page)
*/ }
@media only screen and (min-width: 721px) {
.site-footer {
position: absolute;
bottom: 0; } }
.site-footer ul {
list-style: none;
padding: 0;
margin-bottom: 1.25rem; }
.site-footer ul li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.site-footer li {
display: inline;
display: inline-block;
margin-right: 1.25rem;
line-height: 0em;
vertical-align: middle; }
.site-footer a {
color: #333333;
text-decoration: none; }
.site-footer a:hover {
text-decoration: underline; }
/**
* Bar containing links / navigation
*/
.site-footer__bar {
margin-bottom: 1.25rem;
position: relative;
padding-top: 1.25rem;
background-color: #ffffff;
font-size: 1.125rem; }
.site-footer__bar ul {
display: inline-block; }
/**
* Social media links
*/
@media only screen and (min-width: 320px) {
.site-footer__social {
margin-right: 1.25rem; } }
.site-footer__social li {
width: 2.5rem;
margin-right: 0.3125rem; }
.site-footer__social li:first-child {
display: block;
width: auto;
margin-bottom: 0.625rem;
line-height: 1.5em; }
.site-footer__social li a {
opacity: 0.75;
transition: all 0.5s linear 0; }
.site-footer__social li a:hover {
text-decoration: underline;
opacity: 1; }
@media only screen and (min-width: 641px) {
.site-footer__social li {
margin-right: 0.625rem; }
.site-footer__social li:first-child {
display: inline;
line-height: 3.5rem; } }
.site-footer__icon {
position: relative;
display: inline-block;
margin-right: 0.3125rem;
vertical-align: middle; }
.site-footer__icon--releasenotes {
top: -0.1875rem; }
/**
* Partner links (Ondernemersplein)
*/
@media only screen and (min-width: 481px) {
.site-footer__partners {
float: right; } }
.site-footer__partners li {
width: 7.5rem;
height: 2.5rem;
clear: both;
margin-right: 0.625rem; }
.site-footer__partners li:first-child {
display: block;
height: auto;
width: auto;
margin-bottom: 0.625rem;
line-height: 1.5em; }
.site-footer__partners li a {
opacity: 0.75;
transition: all 0.5s linear 0; }
.site-footer__partners li a:hover {
text-decoration: underline;
opacity: 1; }
@media only screen and (min-width: 641px) {
.site-footer__partners li:first-child {
display: inline;
line-height: 3.5rem; }
.site-footer__partners li:last-child {
margin-right: 0; } }
/**
* Practical links, like privacy statement etc.
*/
.site-footer__links {
display: block; }
.site-footer__links ul {
-webkit-column-count: 3;
column-count: 3;
width: 100%;
display: block; }
@media only screen and (min-width: 641px) {
.site-footer__links ul {
-webkit-column-count: 1;
column-count: 1; } }
.site-footer__links li {
display: block;
line-height: 1.6875rem; }
@media only screen and (min-width: 641px) {
.site-footer__links li {
display: inline; } }
/**
* Releasenotes link
*/
.site-footer__releasenotes {
display: block;
margin-bottom: 1.25rem;
line-height: 1.6875rem; }
/*-----------------------*\
#ROW
\*-----------------------*/
/**
* Base row
* a.k.a. "Block / block" in Tridion / JSON
*/
.row {
padding-top: 1.875rem;
padding-bottom: 1.875rem;
border-bottom: 1px solid #bebebe;
/**
* Mobile style
* On mobile it is smaller than the regular h1 mobile font size
*/
/**
* Row with no border-bottom styling
*/
/**
* Block with campaign blue background
*/
/**
* Row with no border-bottom styling
*/
/**
* Specific row styling for contact block
*/
/**
* Row used as header
*/
/**
* Give row--sticky a light opacity for fadeIn jquery to work properly
*/
/**
* Block with color theme "Orange"
*/
/**
* Row containing a notification
*/
/**
* Specific row styling for seminars block
*/
/**
* Specific row styling for removal border-bottom
*/
/**
* Compact row
* Without extra padding
*/
/**
* Row with sticky element
*/
/**
* Row with a full width background visual
*/
/**
* #FIXME
* - no proper BEM structure: added as child class while it's not
* a child, but a modifier.
* - Needs better naming.
*/
/*
* Used in conjunction with the new question container.
* This class is used to create space for the search bar
*
*/
/*
* This would be the newest styling for the input fields
*
*
*/
/* !text__input shouldn't be removed, but first it should be removed from the code **/ }
@media only screen and (min-width: 641px) {
.row {
padding-top: 3.75rem;
padding-bottom: 3.75rem; } }
.row h1,
.row .h1 {
margin-bottom: 1.25rem;
font-size: 2.25rem;
font-weight: 300;
line-height: 2.6875rem; }
@media only screen and (min-width: 641px) {
.row h1,
.row .h1 {
font-size: 2.625rem;
line-height: 3.125rem; } }
.row .h1--mobile-smaller {
font-size: 2rem;
line-height: 3.125rem; }
@media only screen and (min-width: 641px) {
.row .h1--mobile-smaller {
font-size: 2.625rem;
line-height: 3.125rem; } }
.row h2,
.row .h2 {
font-size: 1.75rem;
font-weight: 300;
line-height: 2.1875rem; }
@media only screen and (min-width: 641px) {
.row h2,
.row .h2 {
font-size: 2rem;
line-height: 2.5rem; } }
.row h3,
.row .h3 {
margin-bottom: 0.625rem;
font-size: 1.375rem;
font-weight: 400;
line-height: 1.75rem;
color: #002c5e; }
@media only screen and (min-width: 641px) {
.row h3,
.row .h3 {
font-size: 1.375rem;
line-height: 1.75rem; } }
.row h4,
.row .h4 {
font-size: 1.125rem;
font-weight: 400;
line-height: 1.5rem;
color: #9b9b9b; }
.row p,
.row .p {
font-size: 1.125rem;
font-weight: 300;
line-height: 1.625rem;
color: #333333;
margin-bottom: 1.25rem; }
.row p a,
.row .p a {
color: #00526E;
text-decoration: underline; }
.row a {
font-size: 1.125rem; }
.row li,
.row .li {
margin-bottom: 0.625rem;
font-size: 1.125rem;
font-weight: 300;
line-height: 1.5625rem;
color: #333333; }
.row td {
width: 50%;
vertical-align: top;
font-size: 1.25rem;
font-weight: 300;
line-height: 1.875rem; }
.row td:first-child {
font-weight: 600; }
.row--article-content {
padding-top: 5rem;
padding-bottom: 5rem;
background-color: #f8f8f8;
border-bottom: none; }
.row--article-content h1,
.row--article-content h2,
.row--article-content h3,
.row--article-content p,
.row--article-content a,
.row--article-content ul,
.row--article-content li,
.row--article-content label {
color: #ffffff; }
.row--blue {
background-color: #00526E; }
.row--blue h1,
.row--blue h2,
.row--blue h3,
.row--blue p {
color: #ffffff; }
.row--cards {
background-color: #ffffff; }
.row--contact {
background-image: url("/includes/img/online-seminar-background-2.jpg") !important;
background-position: 10% 0%; }
@media only screen and (min-width: 641px) {
.row--contact {
margin-bottom: 0;
background-position: 20% 5%; } }
@media only screen and (min-width: 721px) {
.row--contact {
background-position: 10% 5%; } }
@media only screen and (min-width: 961px) {
.row--contact {
background-position: 0% 5%; } }
.row--dark {
background-color: #002c5e;
color: #ffffff; }
.row--dark h1,
.row--dark h2,
.row--dark h3,
.row--dark p,
.row--dark a {
color: #ffffff; }
.row--header {
margin-bottom: 3.125rem; }
.row--light {
background-color: #ffffff; }
.row--lightest-grey {
background-color: #f8f8f8; }
.row--opacity {
opacity: 0.2; }
.row--orange h1 {
color: #FF8800; }
.row--notification {
padding-top: 2.5rem;
padding-bottom: 0;
border-bottom: none; }
.row--seminars {
background-image: url("/html/campaigns/img/online-seminar-background.jpg"); }
.row--no-border {
border: none; }
.row--compact {
padding-top: 0;
padding-bottom: 0;
border-bottom: none; }
.row--compact h1 {
padding-top: 1.25rem; }
@media only screen and (min-width: 961px) {
.row--compact h1 {
padding-top: 0; } }
.row--no-padding-bottom {
padding-bottom: 0; }
.row--no-padding-top {
padding-top: 0; }
.row--no-border-bottom {
border-bottom: none; }
.row--sticky {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 0.0625rem solid #dcdcdc;
box-shadow: 0.0625rem 0.0625rem 0.625rem 0 #dcdcdc;
color: #9b9b9b;
background-color: #ffffff;
text-decoration: none; }
.row--visual, .billboard {
padding-top: 5rem;
padding-bottom: 5.625rem;
background-repeat: no-repeat;
background-position: 25% 80%;
background-size: 100% auto;
background-size: cover; }
@media only screen and (min-width: 641px) {
.row--visual, .billboard {
background-position: 25% 50%; } }
@media only screen and (min-width: 721px) {
.row--visual, .billboard {
background-position: 25% 40%; } }
.row--visual--match-companies {
margin-top: 0;
background-image: url(/includes/img/background--match-companies.jpg);
padding-bottom: 0;
padding-top: 2.25rem; }
.row--visual--match-companies .intro-text {
margin-top: 1.25rem;
color: #ffffff;
font-size: 1.25rem;
font-weight: 300;
line-height: 1.875rem;
display: none; }
@media only screen and (min-width: 481px) {
.row--visual--match-companies .intro-text {
display: block; } }
.row--visual__content-bottom {
padding-top: 17.5rem;
margin-top: 0rem;
padding-bottom: 0; }
@media only screen and (min-width: 961px) {
.row--visual__content-bottom {
padding-top: 23.75rem; } }
.row--has-search-bar {
padding-bottom: 14.6875rem; }
.row .input,
.row .text__input {
border: 0.0625rem solid #bebebe;
border-radius: 0.125rem;
margin-right: 1.25rem; }
.row .input:focus,
.row .text__input:focus {
border-color: #00526E; }
.row .input.error:focus,
.row .text__input.error:focus {
border-color: #ff3333; }
.row .error {
line-height: 1.625rem; }
.row .select {
border: 0.0625rem solid #bebebe;
border-radius: 0.125rem; }
.row label {
margin-bottom: 0.3125rem;
font-size: 1.125rem;
font-weight: 400;
color: #333333;
line-height: 1.625rem; }
.row .radio__label {
margin-bottom: 0.625rem;
font-weight: 300;
font-size: 1.125rem;
color: #333333;
padding-left: 1.875rem; }
.row b {
font-weight: 400; }
.teaser {
margin-top: 0;
margin-bottom: 0; }
.teaser a {
text-decoration: none; }
.teaser p {
font-size: 1.3125rem;
line-height: 1.875rem;
font-weight: 300;
color: #333333; }
.teaser .h1 {
margin-bottom: 1.25rem; }
.teaser__cta-row {
margin-top: 1.875rem; }
.teaser__content--title {
margin-bottom: 0.625rem;
font-size: 1.125em;
font-weight: 600; }
@media only screen and (min-width: 641px) {
.teaser__content--title {
font-size: 1.5em;
margin-bottom: 0.3125rem; } }
.teaser__h2 {
display: inline-block;
margin-bottom: 0.625rem;
font-size: 3.25rem;
font-weight: 300;
line-height: 3.75rem; }
@media only screen and (min-width: 641px) {
.teaser__h2 {
margin-bottom: 1.25rem; } }
.billboard {
margin-top: 0;
padding-top: 8.125rem;
padding-bottom: 8.125rem;
border-bottom: none;
background-color: #002c5e;
position: relative; }
.billboard h1,
.billboard h2,
.billboard h3,
.billboard p,
.billboard a,
.billboard ul,
.billboard li,
.billboard label {
color: #ffffff; }
.billboard p {
font-weight: 400; }
.billboard--body {
max-height: 415px;
padding-top: 5rem;
padding-bottom: 5rem; }
.billboard--overlay:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: -3.125rem;
left: 0;
background: rgba(0, 0, 0, 0.5); }
.billboard--center-img {
background-position: center center; }
/**
* A way to group the two heading in a billboard
*/
.billboard__header {
margin-bottom: 0.3125rem;
font-weight: 300; }
.billboard__header h1 {
margin-bottom: 0; }
/**
* Label (categories)
* #TODO remove !important statements when base styling is moved to _base
* instead of .row class
*/
.billboard__label {
display: inline-block;
margin-bottom: 0 !important;
font-size: 1.125rem !important;
font-weight: 600 !important;
line-height: 1.625rem !important; }
@media only screen and (min-width: 641px) {
.billboard__video-box {
margin-top: 1rem; } }
/**
* Small billboard with the possibility to include Title, Progress steps, etc.
*/
.billboard-small {
height: 300px;
padding-top: 2.5rem;
padding-bottom: 2.5rem; }
.billboard-small__content {
position: absolute;
bottom: -228px;
width: 100%; }
@media only screen and (min-width: 721px) {
.billboard-small__content {
width: auto; } }
.billboard-small__content h1 {
color: #ffffff;
margin: 0 0 2.1875rem 0.625rem; }
@media only screen and (min-width: 721px) {
.billboard-small__content h1 {
margin: 0 0 1.25rem 0; } }
/**
* Billboard for Bijeenkomsten
*/
.billboard-bijeenkomsten {
margin-top: 0;
border-bottom: none;
background-color: #002c5e;
position: relative;
margin-bottom: 1.25rem;
padding-top: 1.25rem;
padding-bottom: 2.1875rem;
/**
* Billboard for Bijeenkomsten with blue theme
*/
/**
* Billboard for Bijeenkomsten with pictures
*/ }
.billboard-bijeenkomsten * {
color: #ffffff; }
.billboard-bijeenkomsten h1 {
margin-bottom: 0.625rem; }
.billboard-bijeenkomsten h2 {
margin-bottom: 0.625rem;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.625rem; }
.billboard-bijeenkomsten p {
color: #ffffff;
margin-bottom: 2.5rem; }
.billboard-bijeenkomsten p span {
margin-top: 1.25rem;
margin-left: 0;
display: block;
width: 100%; }
@media only screen and (min-width: 481px) {
.billboard-bijeenkomsten p span {
margin-left: 1.25rem;
display: inline; } }
.billboard-bijeenkomsten footer p {
font-weight: 400;
color: #ffcc33; }
@media only screen and (min-width: 641px) {
.billboard-bijeenkomsten {
padding-top: 3.125rem;
padding-bottom: 3.125rem; } }
.billboard-bijeenkomsten--blue {
background-color: #002c5e; }
.billboard-bijeenkomsten--blue:before {
content: '';
background-image: url("/includes/img/svg/calender-45-degree.svg");
width: 30rem;
height: 16.875rem;
position: absolute;
right: 0;
background-repeat: no-repeat;
bottom: 0px; }
@media only screen and (min-width: 641px) {
.billboard-bijeenkomsten--blue:before {
left: 55%; } }
.billboard-bijeenkomsten--visual {
background-color: #002c5e;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.gradient GradientType=0, startColorstr=rgba(0, 0, 0, 0.333), endColorstr=transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=rgba($black, 0.333), endColorstr=transparent)";
position: relative;
height: auto;
border-width: 0; }
.billboard-bijeenkomsten--visual * {
z-index: 1;
color: #ffffff; }
.box {
display: block;
position: relative;
min-height: 60px;
padding: 1.25rem 1.25rem 0 1.25rem;
border: 1px solid #bebebe;
border-radius: 0.3125rem;
margin-bottom: 1.25rem; }
.box--white {
background-color: #ffffff; }
.box--no-border {
padding-left: 20px;
padding-right: 20px;
border: none; }
@media only screen and (min-width: 641px) {
.box--no-border {
padding-left: 0;
padding-right: 0; } }
.box--collapse {
border-radius: 0.3125rem 0.3125rem 0 0; }
.box--collapse .box__header--border-bottom {
transition: margin 1s ease;
border-bottom: none;
margin: -1.25rem -1.25rem -2.5rem;
cursor: pointer;
min-height: 3.75rem; }
.box--collapse .box__header--border-bottom:before {
content: "";
position: absolute;
background-repeat: no-repeat;
right: 1.25rem;
top: 1.6875rem; }
@media only screen and (min-width: 721px) {
.box--collapse .box__header--border-bottom:before {
background: none; } }
.box--collapse .box__header--border-bottom h3 {
margin-top: 5px;
margin-bottom: 0; }
.box--collapse .box__header--border-bottom.is-toggled {
border-bottom: 1px solid #bebebe;
margin: -1.25rem -1.25rem 1.25rem;
min-height: 60px; }
.box--collapse .box__header--border-bottom.is-toggled:before {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
top: 1.25rem;
right: 0.9375rem; }
@media only screen and (min-width: 721px) {
.box--collapse .box__header--border-bottom {
border-bottom: 1px solid #bebebe;
margin: -1.25rem -1.25rem 1.25rem;
cursor: default; } }
.box--collapse .box__content {
max-height: 0px;
visibility: hidden;
transition: max-height 0.5s linear, opacity 0.4s linear, visibility 0.5s linear;
opacity: 0; }
.box--collapse .box__content.is-collapsed {
transition: max-height 0.5s linear, opacity 1s linear, visibility 1s linear;
visibility: visible;
height: auto;
max-height: 400px;
opacity: 1; }
@media only screen and (min-width: 721px) {
.box--collapse .box__content {
visibility: visible;
height: auto;
max-height: 400px;
opacity: 1; } }
@media only screen and (min-width: 721px) {
.box--collapse {
border-radius: 0.3125rem; } }
.box__header {
position: relative;
background: transparent;
z-index: 99;
min-height: 5.9375rem;
border-bottom: 1px solid #bebebe;
border-radius: 0.3125rem 0.3125rem 0 0;
margin: -1.25rem -1.25rem 1.25rem;
padding: 1.25rem 1.25rem 0 1.25rem; }
.box__header h2 {
margin-bottom: 0.625rem; }
.box__header--blue {
background: #e9f1fb; }
.box__header--blue h2 {
margin-bottom: 0;
position: absolute;
bottom: 0.625rem; }
.box__header--grey {
background-color: #f8f8f8; }
.box__header--grey h3 {
margin-bottom: 0;
position: absolute;
bottom: 0.625rem;
color: #333333; }
.box__header--no-border-bottom {
border-bottom: none;
margin-left: 0;
margin-right: 0;
margin-bottom: 0.625rem;
padding-left: 0;
padding-right: 0; }
.box__header--small {
min-height: 4.6875rem; }
.box__header--margin-top {
margin-top: 0.625rem; }
.box__header--background-image {
margin: -1.25rem -1.25rem 1.25rem -1.25rem; }
.box__header--background-image img {
border-radius: 0.3125rem 0.3125rem 0 0; }
.box__header--background-image h3 {
margin-bottom: 0;
color: #ffffff;
position: absolute;
bottom: 0;
left: 0;
width: 100%; }
.box__header--background-image h3 span {
position: relative;
display: block;
margin: 1.25rem;
z-index: 0; }
.box__header--background-image h3 img {
position: absolute;
bottom: 0;
left: 0;
width: 100%; }
.box__content iframe {
width: 100%; }
.box__content iframe {
margin-bottom: 1.25rem; }
/**
* This class is needed for the use of box without the new styling (.row)
*/
.box__content--margin-bottom {
margin-bottom: 0.625rem; }
.box__footer {
border-top: 1px solid #bebebe;
margin: 0 -1.25rem;
padding: 1.25rem 1.25rem 0 1.25rem;
font-size: 0.875rem; }
.box__footer--no-border {
border: none; }
.box__footer--padded {
padding-bottom: 1.25rem; }
/**
* Styling for contentset placed as an article at a product page
*/
.article-content__primary {
margin-bottom: 3.125rem; }
.article-content__secondary {
margin-bottom: 0; }
.article-content__image {
height: 23.75rem;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-width: 0;
border-radius: 0.3125rem 0.3125rem 0 0; }
.article-content__imagequote {
margin-bottom: 3.125rem;
color: #9b9b9b;
background-color: #ffffff;
height: 5rem;
border-style: solid;
border-width: 1px;
border-color: #dcdcdc;
border-top: none;
border-radius: 0 0 0.3125rem 0.3125rem; }
.article-content__imagequote h4 {
position: absolute;
top: 1.25rem; }
@media only screen and (min-width: 721px) {
.article-content__imagequote {
height: 3.125rem; }
.article-content__imagequote h4 {
position: absolute;
right: 0.9375rem;
top: 0.9375rem; } }
.article-content__quote {
margin-right: 0.625rem;
margin-top: 0.4375rem;
margin-left: 1.25rem; }
@media only screen and (min-width: 641px) {
.article-content__quote {
margin-left: 0; } }
.article-content__quote p {
padding-top: 1.25rem;
margin-bottom: 1.875rem;
border-top-color: #002c5e;
border-top-style: solid;
border-top-width: 0.0625rem;
color: #002c5e;
font-size: 1.3125rem;
font-weight: 400;
line-height: 1.875rem; }
.content-body {
padding-top: 3.75rem; }
.content-body h2 {
padding-top: 1.25rem; }
.content-body h3 {
padding-top: 0.625rem; }
.content-body p {
margin-bottom: 1.25rem; }
.content-body iframe {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
padding: 0;
width: 100%;
border-width: 0;
border-radius: 0.3125rem; }
.content-body ul {
margin-bottom: 1.25rem;
margin-left: -1rem; }
.content-body ul li {
color: #9b9b9b; }
.content-body ul li span {
padding-left: 0.9375rem;
display: block;
color: #333333; }
.content-body ol {
margin-bottom: 1.25rem;
margin-left: -0.25rem; }
.content-body ol li {
color: #26a9df; }
.content-body ol li span {
padding-left: 0.9375rem;
display: block;
color: #333333; }
.content-body label {
color: #00526E; }
.content-body label p {
padding-top: 0.3125rem;
padding-left: 1.5625rem; }
.content-body figure {
margin-bottom: 1.25rem; }
.content-body blockquote {
margin-top: -1.25rem;
margin-bottom: 1.25rem;
position: relative; }
.content-body blockquote p {
position: relative;
padding-left: 2.1875rem;
padding-right: 1.25rem;
margin-bottom: 0.625rem;
color: #002c5e !important;
font-size: 1.5rem !important;
line-height: 2.125rem !important;
font-weight: 600 !important;
font-style: italic; }
.content-body blockquote footer {
padding-left: 2.1875rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5rem;
font-style: italic;
color: #9b9b9b; }
.content-body blockquote:before {
content: '';
position: relative;
left: 0;
display: inline-block;
height: 1.25rem;
top: 1.875rem;
width: 1.25rem;
background-repeat: no-repeat;
background-image: url(/includes/img/svg/compressed/icon-quote-sblue.svg); }
.content-body blockquote span:after {
content: '';
position: absolute;
margin-bottom: 0.3125rem;
margin-left: 0.9375rem;
display: inline-block;
height: 1.25rem;
bottom: 0.625rem;
width: 1.25rem;
background-repeat: no-repeat;
background-image: url(/includes/img/svg/compressed/icon-quote-sblue.svg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
/* W3C compliant browsers */ }
/**
* Gives a column-8 more padding-right for visual separation
*/
.content-body__billboard {
padding-right: 2.5rem; }
.content-body__billboard h1:first-child,
.content-body__billboard h2:first-child,
.content-body__billboard h3:first-child {
padding-top: 0; }
.content-body__billboard h2 {
padding-top: 1.25rem; }
.content-body__billboard h1 + h2,
.content-body__billboard h2 + h3 {
padding-top: 1.25rem; }
/**
* Widgets for content pages
*/
.contentwidget {
display: block;
margin-bottom: 2.5rem;
/**
* Meetup widget
* modifier for .contentwidget
*/ }
.contentwidget--meetup {
/**
* Image list with faces of RSVP's
*/
/**
* Action arrow
*/ }
.contentwidget--meetup h1 {
margin-bottom: 0.625rem;
font-size: 1rem;
font-weight: 400; }
.contentwidget--meetup a {
text-decoration: none; }
.contentwidget--meetup a:hover {
text-decoration: underline; }
.contentwidget--meetup__list {
display: block;
margin-bottom: 10px;
line-height: 1em; }
.contentwidget--meetup__list li {
display: inline-block;
line-height: 1em; }
.contentwidget--meetup__list li img {
max-height: 1.875rem;
max-width: 1.875rem; }
.contentwidget--meetup__action {
width: 1.875rem;
height: 1.875rem;
line-height: 1.875rem; }
.contentwidget--meetup__action:before {
margin-top: 0.5rem;
margin-bottom: 0.5rem; }
/**
* Cards container
*/
.cards {
margin-bottom: 1.25rem;
font-size: 1.125rem;
/**
* Header for cards container
* Contains a h1 with an optional small header above it
*/
/**
* Footer for cards container
* Contains an optional text link
*/ }
.cards__header {
display: block;
margin-bottom: 2.5rem;
text-align: center; }
.cards__header h1 {
margin-bottom: 0;
font-size: 2.25em; }
.cards__header h2,
.cards__header h3 {
margin-bottom: 0; }
.cards__footer {
text-align: center;
padding-bottom: 20px; }
.cards__footer-link {
color: #9b9b9b; }
.card {
display: block;
position: relative;
margin-bottom: 1.25rem;
overflow: hidden;
height: 23.75rem;
box-sizing: border-box;
padding: 1.25rem;
border-radius: 0.3125rem;
border: 0.0625rem solid #002c5e;
font-size: 1.125rem;
line-height: 1.5em !important;
text-decoration: none;
transition: background 0.15s linear 0s;
/**
* Special height for small cards (height)
*/
/**
* Card color themes
*/
/**
* Yellow uses two different colors, because the regular KVK yellow $yellow-40
* is not readable on white background
*/ }
.card * {
color: #002c5e; }
.card:hover, .card:active {
cursor: pointer;
background-color: #002c5e; }
.card:hover *, .card:active * {
color: #ffffff; }
.card--small {
height: 11.25rem; }
.card--blue {
border-color: #00526E; }
.card--blue:hover, .card--blue:active {
background-color: #00526E; }
.card--blue * {
color: #00526E; }
.card--blue.card--visual {
background-color: #00526E; }
.card--yellow {
border-color: #BE8800; }
.card--yellow:hover, .card--yellow:active {
border-color: #ffcc33;
background-color: #ffcc33; }
.card--yellow * {
color: #BE8800; }
.card--yellow.card--visual {
background-color: #ffcc33; }
.card--green {
border-color: #5BA470; }
.card--green:hover, .card--green:active {
background-color: #5BA470; }
.card--green * {
color: #5BA470; }
.card--green.card--visual {
background-color: #5BA470; }
.card--purple {
border-color: #593394; }
.card--purple:hover, .card--purple:active {
background-color: #593394; }
.card--purple * {
color: #593394; }
.card--purple.card--visual {
background-color: #593394; }
.card--orange {
border-color: #FF8800; }
.card--orange:hover, .card--orange:active {
background-color: #FF8800; }
.card--orange * {
color: #FF8800; }
.card--orange.card--visual {
background-color: #FF8800; }
.card--visual {
background-color: #002c5e;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-width: 0; }
.card--visual * {
position: relative;
z-index: 1;
color: #ffffff; }
.card--visual:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
opacity: 0.5;
background-color: rgba(0, 0, 0, 0.333);
transition: opacity 0.15s linear 0s;
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.333));
filter: progid:DXImageTransform.Microsoft.gradient GradientType=0, startColorstr=rgba(0, 0, 0, 0.333), endColorstr=transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=rgba($black, 0.333), endColorstr=transparent)"; }
.card--visual:hover:after, .card--visual:active:after {
opacity: 1; }
/**
* Special height for slider cards (height)
*/
.card--slider {
height: 15rem;
background-color: #002c5e;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-width: 0; }
.card--slider * {
position: relative;
z-index: 1;
color: #ffffff; }
.card--slider:hover, .card--slider:active {
cursor: default; }
.card--slider:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
opacity: 0.5;
background-color: rgba(0, 0, 0, 0.333);
transition: opacity 0.15s linear 0s;
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.333));
filter: progid:DXImageTransform.Microsoft.gradient GradientType=0, startColorstr=rgba(0, 0, 0, 0.333), endColorstr=transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=rgba($black, 0.333), endColorstr=transparent)"; }
.card__content {
position: absolute;
bottom: 1.25rem;
left: 1.25rem;
right: 1.25rem;
max-width: 100%; }
.card__content h1 {
margin-bottom: 0;
font-size: 1.6875rem;
line-height: 1.25em; }
.card__label {
font-size: 1em !important;
font-weight: 600; }
/**
* Event cards
* #TODO rename class to card-event (for clearer hierarchy in file names)
*/
.card-event,
.event-card {
display: block;
overflow: hidden;
background-color: #ffffff;
padding: 1.125rem;
border: 0.0625rem solid #dcdcdc;
border-radius: 0.1875rem;
text-align: center; }
.card-event h1,
.event-card h1 {
margin-bottom: 1.875rem !important;
font-size: 2rem !important;
font-weight: 300; }
.card-event p,
.event-card p {
margin-bottom: 1.875rem;
text-align: center; }
.card-event__labels,
.event-card__labels {
display: block;
overflow: auto;
margin-bottom: 1.25rem;
text-align: left; }
.card-event__type,
.event-card__type {
display: inline-block;
padding: 0.1875rem 0;
font-weight: 600;
color: #002c5e; }
.card-event__time,
.event-card__time {
display: inline-block;
float: right;
background-color: #ffffff;
padding: 0.1875rem 1.25rem;
border: 0.0625rem solid #065ca9;
border-radius: 0.3125rem;
color: #065ca9; }
.card-event__time--now,
.event-card__time--now {
background-color: #065ca9;
color: #ffffff; }
.card-event__icon,
.event-card__icon {
height: 5.3125rem;
max-height: 5.3125rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.25rem; }
.card-event__button,
.event-card__button {
margin-bottom: 1.25rem; }
.content-card {
display: block;
overflow: hidden;
box-sizing: border-box;
border-radius: 0.3125rem;
border: 0.0625rem solid #bebebe;
text-decoration: none;
margin-bottom: 1.25rem;
/**
* Visual child class
*/
/**
* Clarification for rich content card variation
*/
/**
* Clarification for rich content card variation
*/ }
@media only screen and (min-width: 721px) {
.content-card {
margin-bottom: 0rem; } }
.content-card h2 {
margin-bottom: 0;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 9.0625rem;
font-size: 1.75rem;
font-weight: 400;
line-height: 2.25rem; }
.content-card:hover, .content-card:active {
border: 0.0625rem solid #7a7a7a; }
.content-card:hover .content-card__link, .content-card:active .content-card__link {
color: #002c5e; }
.content-card:hover .content-card__visual:after, .content-card:active .content-card__visual:after {
opacity: 1; }
.content-card__visual {
height: 12.5rem;
position: relative;
background-color: #002c5e;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-width: 0;
text-decoration: none;
/**
* Dark background gradient on bottom
* to ensure readability of titles on top of images
*/ }
.content-card__visual * {
position: relative;
z-index: 1;
color: #ffffff; }
.content-card__visual:after {
content: '';
height: 12.5rem;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
opacity: 0.5;
background-color: rgba(0, 0, 0, 0.333);
transition: opacity 0.15s linear 0s;
/**
* Gradient settings
*/
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.333));
/* "Invalid", but works in 6-8 */
filter: progid:DXImageTransform.Microsoft.gradient GradientType=0, startColorstr=rgba(0, 0, 0, 0.333), endColorstr=transparent;
/* Valid, works in 8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=rgba($black, 0.333), endColorstr=transparent)"; }
.content-card__visual:hover:after, .content-card__visual:active:after {
opacity: 1; }
.content-card__clarification {
display: block;
padding: 1.25rem;
position: relative;
color: #002c5e;
text-decoration: none; }
.content-card__clarification p {
margin-bottom: 2.5rem;
color: #545454; }
.content-card__link {
position: absolute;
display: block;
bottom: 2.1875rem;
left: 1.75rem;
color: #545454;
font-size: 1.2em;
font-weight: 600; }
@media only screen and (min-width: 721px) {
.content-card__link {
bottom: 1.25rem; } }
.content-card__link:before {
position: relative;
display: inline-block;
content: '';
top: 0.15em;
height: 1em;
width: 1em;
margin-right: 10px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
line-height: 1em;
background-image: url(/includes/img/svg/compressed/arrow-thin-right-yellow.svg);
background-size: contain; }
.card-icon {
margin-bottom: 1.25rem;
padding: 1.25rem 0.625rem;
border: 0.0625rem solid #bebebe;
border-radius: 0.3125rem;
display: block;
overflow: hidden;
text-decoration: none; }
.card-icon:hover {
border-color: #545454; }
@media only screen and (min-width: 481px) {
.card-icon {
padding: 1.25rem; } }
@media only screen and (min-width: 721px) {
.card-icon {
padding: 1.875rem; } }
.card-icon .icon, .card-icon .link--action, .card-icon .link--add, .card-icon .link--delete, .card-icon .link--remove, .card-icon .link--payment-preference, .card-icon .account-manager__sub a, .account-manager__sub .card-icon a {
font-size: 2em; }
.card-icon .shape--cardicon {
position: absolute;
left: 1.875rem;
right: 0; }
@media only screen and (min-width: 641px) {
.card-icon .shape--cardicon {
left: 2.5rem; } }
.card-icon h3 {
color: #002c5e;
padding-left: 3.4375rem;
margin-bottom: 0.3125rem; }
.card-icon p {
padding-left: 3.4375rem; }
.card-icon--light-blue:hover {
border-color: #2AA9E0; }
.card-icon--green:hover {
border-color: #5BA470; }
.card-icon__link span {
color: #00526E;
text-decoration: underline; }
/*
* #Card Features (Contactblock)
* Three items on the left and card with visual, description & button on the right
*/
.card-features {
float: left;
width: 100%;
padding: 0 0.625rem; }
.card-features__items {
position: relative;
float: left;
width: 100%;
border-radius: 0 0 0.25rem 0.25rem;
border-color: #bebebe;
border-style: solid;
border-width: 0 0.0625rem 0.0625rem 0.0625rem; }
.card-features__items li {
display: table;
height: 6.25rem;
overflow: hidden;
margin: 0;
padding: 0 1.25rem;
border-bottom: 0.0625rem solid #bebebe;
list-style: none;
width: 100%; }
.card-features__items li:last-child {
border-bottom: 0; }
.card-features__items li p {
display: table-cell;
height: 50px;
line-height: 1.5625rem;
vertical-align: middle; }
.card-features__items li .shape--featureicon {
position: absolute;
left: 0.75rem;
margin-top: 1.3125rem;
right: 0; }
@media only screen and (min-width: 641px) {
.card-features__items {
float: left;
right: 50%;
max-height: 18.75rem;
width: 50%;
border-radius: 0.25rem 0 0 0.25rem;
border-width: 0.0625rem 0 0.0625rem 0.0625rem; } }
.card-features__icon {
height: 100%;
display: table-cell;
vertical-align: middle;
margin-right: 1.25rem; }
.card-features__cta {
float: left;
position: relative;
height: 18.75rem;
width: 100%;
padding: 1.25rem;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: #8BC792;
border-radius: 0.3125rem 0.3125rem 0 0;
border-color: #bebebe;
border-style: solid;
border-width: 0.0625rem 0.0625rem 0px 0.0625rem; }
@media only screen and (min-width: 641px) {
.card-features__cta {
left: 50%;
width: 50%;
border-radius: 0 0.25rem 0.25rem 0;
border-width: 0.0625rem 0.0625rem 0.0625rem 0px; } }
.card-features__cta p {
position: absolute;
bottom: 0;
color: #ffffff; }
.card-features__cta:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
border-radius: 0.3125rem 0.3125rem 0 0;
content: '';
opacity: 0.5;
z-index: 0;
background-color: rgba(0, 0, 0, 0.333);
transition: opacity 0.15s linear 0s;
/**
* Gradient settings
*/
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.333));
/* "Invalid", but works in 6-8 */
filter: progid:DXImageTransform.Microsoft.gradient GradientType=0, startColorstr=rgba(0, 0, 0, 0.333), endColorstr=transparent;
/* Valid, works in 8-9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=rgba($black, 0.333), endColorstr=transparent)"; }
@media only screen and (min-width: 641px) {
.card-features__cta:after {
border-radius: 0 0.25rem 0.25rem 0; } }
.card-features__cta * {
position: relative;
z-index: 1;
color: #ffffff; }
.card-features__cta:hover:after, .card-features__cta:active:after {
opacity: 1; }
.card-features__summary {
position: relative;
height: 8.75rem;
bottom: 0;
margin: 0 0 1.875rem;
overflow: hidden; }
.link-card {
display: block;
position: relative;
margin-bottom: 1.25rem;
padding: 1.25rem;
width: 100%;
height: auto;
min-height: 7.5rem;
background-color: #ffffff;
border: 1px solid #bebebe;
border-radius: 0.3125rem;
overflow: hidden;
text-decoration: none; }
.link-card h3 {
margin-bottom: 0;
padding-right: 1.25rem;
line-height: 1.625rem; }
.link-card p, .link-card ul {
padding-top: 0.625rem;
padding-right: 1.25rem; }
.link-card p, .link-card li {
font-size: 1.125rem;
line-height: 1.5rem; }
.link-card:hover {
border: 1px solid #545454;
cursor: pointer; }
.link-card:after {
content: '';
display: block;
position: absolute;
background-image: url("/includes/img/svg/compressed/arrow-thin-right-yellow.svg");
background-position: right bottom;
background-repeat: no-repeat;
width: 1.25rem;
bottom: 1.25rem;
right: 1.25rem;
top: 0; }
@media only screen and (min-width: 961px) {
.link-card {
height: 7.5rem;
min-height: 7.5rem; } }
.link-card--bullets {
height: auto;
min-height: 10.3125rem; }
.link-card--bullets ul li {
margin-left: 1.25rem;
color: #9b9b9b; }
.link-card--bullets ul li span {
color: #333333; }
@media only screen and (min-width: 961px) {
.link-card--bullets {
height: 10.3125rem;
min-height: 10.3125rem; } }
.link-card--secondair {
min-height: 6.25rem;
height: 6.25rem; }
.link-card--stretched {
height: auto;
min-height: 3.75rem; }
.link-card--stretched h3 {
margin: 0;
padding: 0;
line-height: 1.25rem;
font-size: 1.125rem;
font-weight: 600; }
.link-card--stretched p, .link-card--stretched ul {
padding-top: 0.625rem;
margin: 0;
font-size: 1.125rem;
line-height: 1.25rem; }
@media only screen and (min-width: 721px) {
.link-card--stretched h3, .link-card--stretched p, .link-card--stretched ul {
padding: 0;
margin: 0;
font-size: 1.125rem;
line-height: 1.25rem; } }
/**
* Stack items for the stack block
*/
.stack {
width: 100%;
margin-top: 2.5rem;
margin-bottom: 3.75rem; }
.stack__footer {
bottom: 0;
position: absolute; }
.stack__footer a {
margin: 0 auto; }
.stack__footer .link, .stack__footer .link-list a, .link-list .stack__footer a {
bottom: 0.625rem; }
.stack__header {
text-align: center; }
.stack__header img {
margin-bottom: 0.625rem;
position: relative; }
@media only screen and (min-width: 641px) {
.stack__header img {
margin-bottom: 2.5rem; } }
.stack h3 {
position: relative;
margin-bottom: 0.625rem; }
@media only screen and (min-width: 641px) {
.stack h3 {
min-height: 3.125rem; } }
.stack p {
margin-bottom: 0; }
.text-center .stack__footer {
width: 100%;
bottom: 0;
position: absolute;
vertical-align: middle;
align: center; }
.text-center .stack__footer a {
margin: 0 auto; }
.text-center .stack__footer .link, .text-center .stack__footer .link-list a, .link-list .text-center .stack__footer a {
text-align: center; }
.text-center .stack__header {
text-align: center; }
.progress-steps {
position: absolute;
top: -120px;
width: 100%; }
@media only screen and (min-width: 721px) {
.progress-steps {
position: relative;
bottom: 0;
top: 0; } }
.progress-steps:nth-last-child(1) :nth-last-child(2) {
display: block;
position: relative;
top: -48px; }
@media only screen and (min-width: 721px) {
.progress-steps:nth-last-child(1) :nth-last-child(2) {
top: 0; } }
.progress-steps:nth-last-child(1) :nth-last-child(2):before {
position: relative;
display: inline-block;
content: '';
top: 0;
height: 0.75rem;
width: 0.4375rem;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
line-height: 1em;
background-image: url(/includes/img/svg/compressed/arrow-white-left-small.svg); }
@media only screen and (min-width: 721px) {
.progress-steps:nth-last-child(1) :nth-last-child(2):before {
content: none;
top: 0;
width: 0;
height: 0; } }
.progress-steps li {
display: none;
line-height: 1.5625rem; }
@media only screen and (min-width: 721px) {
.progress-steps li {
list-style: none;
float: left;
display: block;
margin: 0 10px 10px 10px; } }
.progress-steps li a {
padding-left: 10px;
text-decoration: none; }
.progress-steps li a:hover {
color: #ffffff;
text-decoration: underline; }
@media only screen and (min-width: 721px) {
.progress-steps li a:hover {
background-color: #00526E;
background-image: none;
text-decoration: none; } }
.progress-steps li:first-child {
margin-left: 0px; }
.progress-steps__step {
color: #ffffff;
font-size: 1rem;
cursor: pointer; }
@media only screen and (min-width: 721px) {
.progress-steps__step {
text-decoration: none;
display: inline-block;
font-size: 1.125rem;
position: relative;
background: rgba(0, 0, 0, 0.5);
padding: 0.5rem 0.75rem 0.4375rem; } }
@media only screen and (min-width: 721px) {
.progress-steps__step:after {
content: '';
display: block;
position: absolute;
right: -10px;
top: 0;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 0px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid rgba(0, 0, 0, 0.5); } }
@media only screen and (min-width: 721px) {
.progress-steps__step:before {
content: '';
display: block;
position: absolute;
left: -10px;
top: 0;
width: 0;
height: 0;
border-top: 20px solid rgba(0, 0, 0, 0.5);
border-right: 0px solid rgba(0, 0, 0, 0.5);
border-bottom: 20px solid rgba(0, 0, 0, 0.5);
border-left: 10px solid transparent; } }
@media only screen and (min-width: 721px) {
.progress-steps__step--base:before, .progress-steps__step--base-selected:before {
border-top: 0px solid transparent;
border-right: 0px solid transparent;
border-bottom: 0px solid transparent; }
.progress-steps__step--base:hover:after, .progress-steps__step--base-selected:hover:after {
border-left: 10px solid #00526E; } }
@media only screen and (min-width: 721px) {
.progress-steps__step--prev:hover:after {
border-left: 10px solid #00526E; }
.progress-steps__step--prev:hover:before {
border-top: 20px solid #00526E;
border-right: 0px solid #00526E;
border-bottom: 20px solid #00526E; } }
@media only screen and (min-width: 721px) {
.progress-steps__step--base-selected {
background-color: #00526E;
font-weight: 500;
cursor: default; }
.progress-steps__step--base-selected:after {
border-left: 10px solid #00526E; } }
@media only screen and (min-width: 721px) {
.progress-steps__step--current {
background-color: #00526E;
background-image: none;
font-weight: 500;
cursor: default; }
.progress-steps__step--current:after {
border-left: 10px solid #00526E; }
.progress-steps__step--current:before {
border-top: 20px solid #00526E;
border-right: 0px solid #00526E;
border-bottom: 20px solid #00526E; } }
.row .event-program__intro {
font-size: 1.3125rem; }
.row .event-program-item {
background-color: #f8f8f8;
padding: 1.25rem 0; }
.row .event-program-item--special {
background-color: #ffffff; }
.row .event-program-item--special p {
color: #333333;
font-weight: 400; }
.row .event-program-item__time {
display: inline-block;
width: 100%;
color: #00526E;
font-weight: 400;
font-size: 1.125rem;
text-align: center; }
.row .event-program-item h3 {
font-size: 1.125rem; }
.row .event-program-item p {
margin: 0; }
.row .event-program-item span {
display: inline-block;
line-height: 1.625rem;
width: 100%;
text-align: center; }
.list-table-new__heading {
padding: 0.375rem 0;
color: #ffffff; }
.list-table-new__sub-heading {
margin-left: 0.625rem;
color: #bebebe; }
.list-table-new__cell {
margin: 0;
overflow: hidden; }
@media only screen and (min-width: 721px) {
.list-table-new__cell {
margin: 1.5625rem 0 0; } }
.list-table-new__cell--small {
margin: 0; }
@media only screen and (min-width: 721px) {
.list-table-new__cell--small {
margin: 1.25rem 0 0; } }
@media only screen and (min-width: 721px) {
.list-table-new__cell--medium {
margin: 2.5rem 0 1.25rem; } }
.logo-container {
max-width: 50rem;
min-width: 17.5rem;
margin: 0 auto;
text-align: center; }
.logo-container__item {
height: 6.25rem;
width: 8.4375rem;
display: inline-block;
margin: 0 0.3125rem 0.625rem;
padding: 0.9375rem;
text-align: center;
border: 0.0625rem solid #bebebe;
border-radius: 0.3125rem; }
.logo-container__item:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }
.logo-container__item img {
display: inline-block;
max-height: 4.375rem;
max-width: 5.9375rem;
position: relative;
left: -2px;
vertical-align: middle; }
.l-table-border--column-heading--payments .l-table-border__cell:nth-of-type(1):before {
content: "Ten name van"; }
@media only screen and (min-width: 641px) {
.l-table-border--column-heading--payments .l-table-border__cell:nth-of-type(1):before {
content: ""; } }
.l-table-border--column-heading--payments .l-table-border__cell:nth-of-type(2):before {
content: "Soort"; }
@media only screen and (min-width: 641px) {
.l-table-border--column-heading--payments .l-table-border__cell:nth-of-type(2):before {
content: ""; } }
.l-table-border--column-heading--payments .l-table-border__cell:nth-of-type(3):before {
content: "Rekeningnr"; }
@media only screen and (min-width: 481px) {
.l-table-border--column-heading--payments .l-table-border__cell:nth-of-type(3):before {
content: "Rekeningnummer"; } }
@media only screen and (min-width: 641px) {
.l-table-border--column-heading--payments .l-table-border__cell:nth-of-type(3):before {
content: ""; } }
.flex-container {
display: flex;
flex-direction: column; }
@media only screen and (min-width: 641px) {
.flex-container {
flex-direction: row; } }
.flex-item {
flex: 1; }
.flex-item:last-child a {
float: left !important; }
@media only screen and (min-width: 641px) {
.flex-item:last-child a {
float: right !important; } }
.payments .auto-payment:before {
width: 0;
height: 0; }
@media only screen and (min-width: 641px) {
.payments .auto-payment:before {
content: "";
width: 1.25rem;
height: 1.25rem;
position: relative;
top: 0.125rem;
float: left;
margin-right: 0.625rem;
background-image: url("/includes/img/svg/compressed/icon-automatisch-betalen.svg");
background-size: contain;
background-repeat: no-repeat; } }
.payments .preferred-payment:before {
width: 0;
height: 0; }
@media only screen and (min-width: 641px) {
.payments .preferred-payment:before {
content: "";
width: 1.25rem;
height: 1.25rem;
position: relative;
top: 0.125rem;
float: left;
margin-right: 0.625rem;
background-image: url("/includes/img/svg/compressed/icon-voorkeursbetaalmethode.svg");
background-size: contain;
background-repeat: no-repeat; } }
.details-header__title {
display: inline-block; }
h3.details-header__title {
margin-bottom: 1.25rem; }
.details-header__link {
margin-bottom: 10px; }
@media only screen and (min-width: 481px) {
.details-header__link {
float: right;
position: relative;
top: -8px; } }
/**
* Position button right
**/
.product__search-form {
margin-top: 1rem; }
/**
* Position button top
**/
.product__print-button {
margin-bottom: 0.625rem; }
/**
* Position button bottom
**/
.product__print-button-bottom {
margin-bottom: 1.875rem; }
.product__print-pdf {
display: none; }
@media only screen and (min-width: 961px) {
.product__print-pdf {
display: inherit;
float: right; } }
.product-creation-date {
float: left;
margin-top: 0.25rem; }
.product-timestamp {
display: block;
margin-top: 0.25rem; }
@media only screen and (min-width: 481px) {
.product-timestamp {
display: inline; } }
.product_link-cross-sell-company-list {
margin-left: 1.25rem;
text-decoration: none; }
.product_link-icon {
margin-right: 0.4375rem;
position: relative;
top: 2px; }
/**
* Stupid layout fix for page-product-variant-1
*/
.product-checklist {
padding-left: 0.3125rem; }
.page-iframe,
.diensten-iframe {
position: relative;
margin: auto;
margin-bottom: 1.25rem;
z-index: 0; }
.page-iframe.no-postmessage,
.diensten-iframe.no-postmessage {
height: 75rem; }
.page-iframe iframe,
.diensten-iframe iframe {
height: 100%;
width: 100%; }
.page-iframe iframe::-webkit-scrollbar,
.diensten-iframe iframe::-webkit-scrollbar {
-webkit-appearance: none;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 0.25rem;
width: 0.4375rem; }
.page-iframe iframe::-webkit-scrollbar-thumb,
.diensten-iframe iframe::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 0.25rem;
-webkit-box-shadow: 0 0 0.0625rem rgba(255, 255, 255, 0.5); }
.touch .page-iframe,
.touch .diensten-iframe {
-webkit-overflow-scrolling: touch;
overflow: auto; }
.loadingmessage {
display: inline-block;
margin-left: 0.625rem;
font-size: 0.8em;
color: #002c5e; }
.loadingmessage img {
position: relative;
top: 0.2em; }
.loading {
display: none;
height: 12.5rem;
padding: 6.25rem 0;
text-align: center;
color: #002c5e; }
.loading-indicator {
display: block;
position: relative;
min-height: 2.25rem; }
.loading-indicator img {
position: absolute;
left: 50%; }
.loading-indicator--centered {
text-align: center; }
.loading-indicator--centered .loading-indicator__icon {
position: static; }
.steps {
list-style: none;
padding: 0;
margin-bottom: 1rem; }
.steps:before, .steps:after {
content: ' ';
display: table; }
.steps:after {
clear: both; }
.steps li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.steps li {
box-sizing: border-box;
background-color: #EFEFEF;
border: 0.0625rem solid #ffffff;
color: #343434;
float: left;
font-weight: 300;
height: 5rem;
position: relative;
width: 33.3%; }
.steps li + li {
border-left: 0; }
.steps li.active {
background-color: #00526E;
border-color: #00526E;
color: #fff; }
.steps li.done {
color: #343434;
position: relative; }
.steps li.done:after {
background-image: url(/includes/img/form-radio-selected-dark-blue.png);
content: '';
height: 1.5rem;
position: absolute;
right: 0.9375rem;
top: 1.75rem;
width: 1.5rem;
background-repeat: no-repeat; }
.steps li.done > a {
color: #343434; }
.steps li.automatic p {
color: #9b9b9b; }
.steps li.automatic .automatic-payment {
display: block; }
.steps li > a {
color: #fff; }
.steps li > a span {
font-size: 2.25rem; }
.steps li > a,
.steps li > p {
display: block;
font-size: 1.125rem;
height: 100%;
line-height: 5rem;
padding-left: 1.5rem;
text-decoration: none; }
.steps li > a span,
.steps li > p span {
font-size: 2.25rem; }
.steps .automatic-payment {
bottom: 0;
display: none;
left: 1.5rem;
position: absolute;
right: 0;
z-index: 2; }
.steps .automatic-payment .link, .steps .automatic-payment .link-list a, .link-list .steps .automatic-payment a {
color: #26a9df;
font-size: 0.75rem;
font-weight: 400;
line-height: 1.5rem;
text-decoration: none; }
.steps .automatic-payment .link:hover, .steps .automatic-payment .link-list a:hover, .link-list .steps .automatic-payment a:hover {
color: #000000; }
.steps .automatic-payment .notice {
background-color: #ffffff;
box-shadow: 0 0 0.1875rem 0 rgba(0, 0, 0, 0.2);
display: none;
margin-top: 0.3125rem;
padding: 1rem 1.25rem 0.875rem;
position: absolute;
top: 100%;
right: -0.0625rem;
width: 138.88889%; }
.steps .automatic-payment .notice:before {
border-style: solid;
border-width: 0 0.625rem 0.625rem 0.625rem;
border-color: transparent transparent #ffffff transparent;
bottom: 100%;
content: '';
height: 0;
position: absolute;
right: 68%;
width: 0; }
.steps .automatic-payment .notice .disabled {
display: none; }
.steps .automatic-payment .notice h4 {
color: #002c5e;
font-weight: 600;
margin-bottom: 0.5rem; }
.steps .automatic-payment .notice p {
color: #002c5e;
font-weight: 400; }
.steps .automatic-payment .notice .off {
color: #26a9df;
display: block;
font-size: 0.875rem;
font-weight: 400;
margin-top: 0.5rem;
text-decoration: none; }
.steps .automatic-payment .notice .off:hover {
color: #000000; }
.steps .automatic-payment .notice .close {
background-image: url(/includes/img/icon-close-dark-blue.png);
background-size: 100%;
height: 1.6875rem;
position: absolute;
right: 0.75rem;
top: 0.75rem;
width: 1.6875rem; }
.steps .automatic-payment .notice .close:before {
content: url(/includes/img/icon-close-black.png);
display: none; }
.steps .automatic-payment .notice .close:hover {
background-image: url(/includes/img/icon-close-black.png);
background-size: 100%; }
/*------------------------------*\
#PAGE-NAV #SIDEBAR #ASIDE
\*------------------------------*/
/**
* At the moment this module is called page-nav, because it's
* primarily used as navigation.
* #TODO This should become a .block--grey of blok__header--grey
* besides the current .block > h2 to be used for general use.
* Besides the navigational element (list of links to pages) should
* get a separate class
*/
.page--nav, .page-nav {
margin-bottom: 0 !important;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.5625rem; }
.page--nav ul, .page-nav ul {
margin-left: 0; }
.page--nav ul li, .page-nav ul li {
margin-left: 0;
list-style: none; }
.page--nav a, .page-nav a {
background-color: #ffffff;
color: #002c5e !important;
display: block;
padding: 0.875rem 1.25rem;
text-decoration: none; }
.page--nav a:hover, .page--nav a.active, .page-nav a:hover, .page-nav a.active {
background-color: #ffeaa1; }
/*----------------------------------*\
#LANDING-PAGES #OLD-SCHOOL
\*----------------------------------*/
/**
* These classes are used specifically for "landing pages" like "Advies en
* Informatie" and "Financiering". These pages contain:
* - Background images (sometimes)
* - A different header (thick, white)
* - ...
*/
.landing {
margin-top: 18.125rem;
padding-top: 1.5rem;
z-index: 2;
position: relative;
width: 100%;
background: #f2f2f2; }
.page-landing-intro {
width: 65.95745%;
clear: both;
position: relative;
margin-top: 1.75rem !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important; }
.page-landing-intro .header-on-image {
position: absolute;
right: auto;
left: 0;
top: -5.625rem;
bottom: auto;
color: #ffffff;
font-size: 2.625rem; }
.page-landing-content {
position: relative;
clear: both;
float: left;
width: 65.95745%; }
.page-landing-content.no-padding {
padding-top: 0 !important; }
.page-landing-content ~ .page-landing-content {
padding-top: 2.5rem; }
.page-landing-content > .block.l-twothird {
width: 100%; }
.page-landing-content .position {
position: absolute;
right: 0;
left: auto;
top: 0.625rem;
bottom: auto; }
/**
* Landing page with background visual
*/
.page-landing-visual {
position: relative; }
.page-landing-visual h1 {
font-size: 4.5rem;
font-weight: 600;
margin: 0 auto 2.5rem;
text-align: center; }
.page-landing-visual > h2 {
clear: both;
font-weight: 600; }
.page-landing-aside {
float: right;
width: 29.78723%; }
.page-landing-aside ~ .page-landing-aside {
padding-top: 2.5rem; }
/**
* This element is a specific to landing pages
*/
.page-landing .description {
font-weight: 600;
color: #002c5e; }
.phone-number {
display: block;
padding-top: 16px;
font-size: 3em;
font-weight: 600;
color: #002c5e; }
.phone-number--medium {
font-size: 2.0625rem; }
@media only screen and (min-width: 641px) {
.phone-number--medium {
font-size: 1.2em; } }
@media only screen and (min-width: 961px) {
.phone-number--medium {
font-size: 1.9em; } }
.phone-number-icon {
padding: 7px 0 11px 38px;
background: url(/includes/img/icon-phone-dark-blue.png) 0 0 no-repeat;
background-size: 26px; }
.site-search {
position: relative;
margin-bottom: 2.5rem; }
.site-search .input {
background-color: #ffffff;
border: 0;
box-shadow: 0 0 0.1875rem 0 rgba(40, 169, 226, 0.35);
font-size: 3rem;
font-weight: 600;
height: 4rem;
line-height: 4rem;
margin-bottom: 1rem;
padding: 0 1.25rem;
width: 100%; }
.site-search .input.placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.site-search .input::-webkit-input-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.site-search .input:-moz-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.site-search .input::-moz-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.site-search .input:-ms-input-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.site-search .submit-button {
background: transparent url(/includes/img/icon-zoeken-dark-blue.png) no-repeat;
background-size: 1.5rem;
border: 0;
height: 1.5rem;
overflow: hidden;
position: absolute;
right: 1.125rem;
text-indent: 100%;
top: 1.125rem;
width: 1.5rem; }
.site-search .link, .site-search .link-list a, .link-list .site-search a {
margin-bottom: 1.25rem;
padding-left: 0; }
.site-search .advanced {
position: relative;
margin-bottom: 2rem; }
.site-search .advanced input[type='text'] {
background-color: #ffffff;
border: 0;
box-shadow: 0 0 0.125rem 0 rgba(40, 169, 226, 0.35);
font-weight: 600;
height: 2rem;
line-height: 2rem;
margin-bottom: 0.5rem;
padding: 0 0.5rem;
width: 100%; }
.site-search .advanced input[type='text'].placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.site-search .advanced input[type='text']::-webkit-input-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.site-search .advanced input[type='text']:-moz-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.site-search .advanced input[type='text']::-moz-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.site-search .advanced input[type='text']:-ms-input-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.site-search .advanced input[type='text'].straatnaam {
float: left;
margin-right: 3%;
width: 67%; }
.site-search .advanced input[type='text'].huisnummer {
float: left;
width: 30%; }
.site-search .advanced input[type='text'].postcode {
clear: both;
float: left;
margin-right: 3%;
width: 30%; }
.site-search .advanced input[type='text'].plaatsnaam {
float: left;
width: 67%; }
.site-search .advanced input[type='text'].error-field {
box-shadow: 0 0 0.125rem 0 red; }
.site-search .advanced .details {
float: left;
margin-bottom: 0.5rem;
width: 60%; }
.site-search .advanced .seperator {
float: left;
font-weight: 600;
line-height: 2rem;
text-align: center;
width: 5%; }
.site-search .advanced .kvknummer {
float: left;
width: 35%; }
.site-search .advanced .options {
clear: both; }
.site-search .advanced .options input[type='checkbox'] {
margin-right: 0.3125rem; }
.site-search .advanced .options > label {
margin-bottom: 0.25rem; }
.site-search .advanced .options fieldset {
clear: both;
float: left;
margin-bottom: 1rem; }
.site-search .advanced .options fieldset.error-field {
box-shadow: 0 0 0.125rem 0 red;
margin: -0.125rem 0 0.875rem -0.5rem;
padding: 0.125rem 0.5rem; }
.site-search .advanced .options fieldset.error-field .error-message {
margin-bottom: 0; }
.site-search .advanced .options fieldset label {
float: left;
margin-right: 1rem; }
.site-search .advanced .options abbr {
border-bottom: 0.0625rem dotted; }
.site-search .advanced .zoekvervallen,
.site-search .advanced .zoekuitgeschreven {
clear: both;
float: left; }
.site-search .advanced .archive {
margin-bottom: 0; }
@media only screen and (min-width: 721px) {
.site-search .advanced .archive {
float: right; } }
.site-search .advanced .error-message {
clear: both;
color: #ff3333;
display: none;
margin: 0.5rem 0 1rem; }
.site-search .feedback,
.site-search .no-results {
padding: 1rem 1.25rem 0.5rem;
background-color: #ffffff;
text-align: center; }
.site-search .feedback .headline,
.site-search .no-results .headline {
text-align: left;
margin-bottom: 1rem; }
.site-search .feedback .suggestions,
.site-search .no-results .suggestions {
text-align: left;
padding-bottom: 0.5rem; }
.site-search .feedback .suggestions a,
.site-search .no-results .suggestions a {
color: #26a9df;
text-decoration: none; }
.site-search .feedback .header, .site-search .feedback h3,
.site-search .no-results .header,
.site-search .no-results h3 {
font-weight: 600;
font-size: 1rem;
margin-bottom: 0.5rem; }
.site-search .feedback ul + div,
.site-search .feedback ul + h3,
.site-search .no-results ul + div,
.site-search .no-results ul + h3 {
margin-top: 1rem; }
.site-search .no-results {
display: none;
margin-top: 0; }
.site-search .filters {
display: none;
overflow: hidden;
margin: 0 0 0.625rem;
background-color: #f2f2f2; }
.site-search .filters button {
height: 2.5rem;
padding: 0 1.5rem;
border: 0;
border-radius: 0.3125rem;
font-weight: 600;
line-height: 2.5rem;
text-decoration: none;
cursor: pointer;
display: block;
float: left;
vertical-align: middle;
height: auto;
min-height: 3.75rem;
line-height: 1.25rem;
background-color: #ccdef4;
color: #002c5e;
margin: 0.3125rem 1.25rem 0 0;
width: 13.75rem;
border-bottom: transparent;
border-left: transparent;
border-top: 0px #f2f2f2 solid;
/* Fix for IE9. See KWO-280 */ }
.site-search .filters button[class^='type'] {
background-position: 0.8125rem center;
background-repeat: no-repeat;
background-size: 1.5rem;
padding-left: 2.75rem; }
.site-search .filters button.type1 {
background-image: url(/includes/img/icon-search-type1.png); }
.site-search .filters button.type2 {
background-image: url(/includes/img/icon-search-type2.png); }
.site-search .filters button.type3 {
background-image: url(/includes/img/icon-search-type3.png); }
.site-search .filters button.type4 {
background-image: url(/includes/img/icon-search-type4.png); }
.site-search .filters button.type5 {
background-image: url(/includes/img/icon-search-type5.png); }
.site-search .filters button:hover, .site-search .filters button.active {
background-color: #ffcc33;
color: #000000; }
.site-search .filters button.not-active:hover {
background-color: #ccdef4;
color: #002c5e; }
.site-search .filters button:last-child {
margin-right: 0; }
.site-search ul.results {
list-style: none;
padding: 0;
background-color: #ffffff;
padding: 0.25rem 0 1.5rem; }
.site-search ul.results li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.site-search ul.results ul {
list-style: none;
padding: 0; }
.site-search ul.results ul li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.site-search ul.results > li {
background-position: 0 0.75rem;
background-repeat: no-repeat;
background-size: 1.5rem;
border-bottom: 0.0625rem solid #9b9b9b;
margin: 0 1.25rem;
padding: 1rem 0 1rem 2.25rem;
position: relative; }
.site-search ul.results > li:first-child {
border-top: 0.0625rem solid #9b9b9b; }
.site-search ul.results > li.type1 {
background-image: url(/includes/img/icon-search-type1.png); }
.site-search ul.results > li.type2 {
background-image: url(/includes/img/icon-search-type2.png); }
.site-search ul.results > li.type3 {
background-image: url(/includes/img/icon-search-type3.png); }
.site-search ul.results > li.type4 {
background-image: url(/includes/img/icon-search-type4.png); }
.site-search ul.results > li.type5 {
background-image: url(/includes/img/icon-search-type5.png); }
.site-search ul.results .handelsnaamHeaderWrapper {
padding-right: 6.25rem; }
.site-search ul.results .handelsnaamHeaderWrapper:before, .site-search ul.results .handelsnaamHeaderWrapper:after {
content: ' ';
display: table; }
.site-search ul.results .handelsnaamHeaderWrapper:after {
clear: both; }
.site-search ul.results h3 {
float: left;
font-size: 1.25rem;
font-weight: 600;
margin: 0 1rem 0.5rem 0; }
.site-search ul.results h3 a {
color: #065ca9;
text-decoration: none; }
.site-search ul.results h3 a:hover {
text-decoration: underline; }
.site-search ul.results .veelgesteldevraag,
.site-search ul.results .hoofdvestigingTag {
background-color: #065ca9;
color: #ffffff;
float: left;
font-size: 0.75rem;
font-weight: 600;
height: 1.25rem;
margin: 0 1rem 0.5rem 0;
padding: 0 0.375rem;
text-decoration: none; }
.site-search ul.results .veelgesteldevraag:hover,
.site-search ul.results .hoofdvestigingTag:hover {
background-color: #002c5e; }
.site-search ul.results .ShowMoreSearchInfo {
background-image: url(/includes/img/icon-zoeken-dark-grey.png);
background-size: 100%;
cursor: pointer;
float: left;
height: 1.25rem;
margin-bottom: 0.5rem;
width: 1.25rem; }
.site-search ul.results .ShowMoreSearchInfo:before {
content: url(/includes/img/icon-zoeken-dark-blue.png);
display: none; }
.site-search ul.results .ShowMoreSearchInfo:hover {
background-image: url(/includes/img/icon-zoeken-dark-blue.png); }
.site-search ul.results .more-search-info {
background-color: #dbe8f7;
display: none;
margin-bottom: 0.5rem;
padding: 0.5rem; }
.site-search ul.results .more-search-info h4 {
font-weight: 600; }
.site-search ul.results .more-search-info p {
font-weight: 300; }
.site-search ul.results .more-search-info p + h4 {
margin-top: 0.5rem; }
.site-search ul.results .HideMoreSearchInfo {
display: none; }
.site-search ul.results .content {
clear: both;
font-weight: 300; }
.site-search ul.results .kvk-meta li {
float: left;
font-weight: 300;
margin-bottom: 0.25rem;
padding-right: 1rem; }
.site-search ul.results .snippet-result {
clear: both;
font-weight: 300; }
.site-search ul.results .status {
color: #ff3333;
font-weight: 300;
padding-top: 0.25rem; }
.site-search ul.results .section {
clear: both;
font-weight: 300; }
.site-search ul.results .cta > a {
height: 2.5rem;
padding: 0 1.5rem;
border: 0;
border-radius: 0.3125rem;
font-weight: 600;
line-height: 2.5rem;
text-decoration: none;
cursor: pointer;
background-color: #AA418C;
color: #fff !important;
display: block;
font-size: 0.8125rem;
height: 1.25rem;
line-height: 1.25rem;
position: absolute;
right: 0;
top: 1rem; }
.site-search ul.results .cta > a.arrow-left:before {
background-image: url(/includes/img/icon-arrow-right-black.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 0.75rem;
margin-right: 0.5rem;
width: 0.5625rem; }
.site-search ul.results .cta > a.plus {
width: 0.875rem;
background-image: url(/includes/img/icon-plus-black.png);
background-position: center center;
background-repeat: no-repeat; }
.site-search ul.results .cta > a:hover, .site-search ul.results .cta > a:focus, .site-search ul.results .cta > a.active {
background-color: #883370; }
.site-search ul.results .cta > span img {
position: absolute;
right: 0;
top: 1rem; }
.site-search .paging {
list-style: none;
padding: 0;
background-color: #ffffff;
padding: 0 1.25rem 1rem;
margin-bottom: 2.5rem;
margin-top: -0.5rem; }
.site-search .paging li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.site-search .paging li {
display: inline-block;
height: 1.9375rem;
line-height: 1.9375rem; }
.site-search .paging li.active a {
background-color: #00526E;
color: #fff; }
.site-search .paging a {
color: #00526E;
display: block;
padding: 0 0.5rem;
text-decoration: none; }
.site-search .paging a:hover {
background-color: #00526E;
color: #fff; }
.site-search .paging .vorige {
background: #ffffff url(/includes/img/button-disc-prev.png) no-repeat;
padding-left: 2.5rem;
padding-right: 0.5rem; }
.site-search .paging .vorige a {
margin-left: -2.5rem;
margin-right: -0.5rem;
padding-left: 2.5rem; }
.site-search .paging .vorige a:hover {
background-color: transparent;
color: #00526E; }
.site-search .paging .vorige:hover {
background-position: left 100%; }
.site-search .paging .vorige.not-active {
opacity: 0.3; }
.site-search .paging .vorige.not-active:hover {
background-position: left top; }
.site-search .paging .volgende {
background: #ffffff url(/includes/img/button-disc-next.png) right top no-repeat;
padding-left: 0.5rem;
padding-right: 2.375rem; }
.site-search .paging .volgende a {
margin-left: -0.5rem;
margin-right: -2.375rem;
padding-right: 2.375rem; }
.site-search .paging .volgende a:hover {
background-color: transparent;
color: #00526E; }
.site-search .paging .volgende:hover {
background-position: right 100%; }
.site-search .paging .volgende.not-active {
opacity: 0.3; }
.site-search .paging .volgende.not-active:hover {
background-position: right top; }
/**
* Small info blocks linking to pages
*/
.more-info-blocks {
margin-bottom: 1.875rem;
clear: both; }
.more-info-blocks:first-child {
border-top: 0; }
.more-info-blocks h2 {
clear: both;
color: #002c5e;
font-weight: 300;
font-size: 2.25rem;
margin-bottom: 1rem; }
.more-info-blocks hr {
margin-bottom: 1rem; }
.more-info-blocks ul:before, .more-info-blocks ul:after {
content: ' ';
display: table; }
.more-info-blocks ul:after {
clear: both; }
.more-info-blocks li {
float: left;
overflow: hidden;
margin-left: 2.12766%;
margin-bottom: 2.12766%;
width: 31.91489%; }
.more-info-blocks li.nth-child-1, .more-info-blocks li.nth-child-4, .more-info-blocks li.nth-child-7, .more-info-blocks li.nth-child-10 {
clear: both;
margin-left: 0; }
.more-info-blocks a {
display: block;
height: 10.3125rem;
background-image: url("/includes/img/icon-arrow-big-right-yellow.png");
background-repeat: no-repeat;
background-color: #ffffff;
background-position: right center;
padding: 1.5rem 3rem 1.5rem 1.5rem;
color: #002c5e;
border-right: 1.25rem solid #ffffff;
text-decoration: none; }
.more-info-blocks a:hover {
background-color: #ffcc33;
background-image: url("/includes/img/icon-arrow-big-right-white.png");
border-right-color: #ffcc33;
color: #002c5e;
background-repeat: no-repeat;
background-position: right center; }
.more-info-blocks h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem; }
.more-info-blocks img {
float: left;
padding-right: 1rem; }
.image-zoom .preview {
border: 0.0625rem solid #ccdef4;
display: block;
margin-bottom: 0.5rem;
padding: 0.5rem;
text-align: center; }
.image-zoom .preview img {
max-width: 50%; }
/**
* Add / remove fieldsets
*/
.fieldset-clonable .button-remove {
display: none; }
.fieldset-removable input[type=text],
.fieldset-removable label {
display: inline;
display: inline-block; }
.fieldset-removable .input,
.fieldset-clonable .input {
margin-bottom: 0.625rem; }
.fieldset-removable .error {
margin-top: -0.4375rem; }
/**
* The above rule also applies to the single fieldsets hence override
*/
fieldset:first-child .input {
margin-bottom: 1.25rem; }
/**
* Override for the fieldset in horizontal tabs
*/
fieldset.horizontal-tabs__tab:last-child .input {
margin-bottom: 1.25rem; }
.wrapper-fieldset {
margin-top: -0.9375rem;
margin-bottom: 1.25rem; }
.wrapper-fieldset > .input:last-child {
margin-bottom: 0; }
.youtube-replacement {
background-color: #000000;
display: block;
height: 0;
margin-bottom: 1.375rem;
overflow: hidden;
padding-bottom: 55%;
position: relative; }
.youtube-replacement:hover .play {
opacity: 1; }
.youtube-replacement .still {
left: 0;
margin-top: -10%;
position: absolute;
top: 0;
width: 100%;
z-index: 0; }
.youtube-replacement .background {
background-color: rgba(0, 0, 0, 0.3);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1; }
.youtube-replacement .play {
left: 50%;
margin: -1.875rem 0 0 -2.6875rem;
opacity: 0.8;
position: absolute;
top: 50%;
z-index: 2; }
.youtube-replacement iframe,
.youtube-replacement object,
.youtube-replacement embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.youtube--playlist {
margin-bottom: 25px; }
.youtube--playlist:before {
position: absolute;
background: url(/includes/img/icon-arrow-down-yellow.png) no-repeat;
height: 0.9375rem;
min-width: 0.9375rem;
margin-top: 1.875rem;
margin-left: 1.375rem;
content: ""; }
.filter__panel {
position: relative;
overflow: auto;
margin-top: 1.25rem;
margin-bottom: 1.25rem; }
.filter__item {
display: block;
margin: 0;
list-style: none; }
.row li.filter__item {
margin-bottom: 0; }
@media only screen and (min-width: 481px) {
.filter__item {
width: 50%;
padding-left: 0.625rem;
padding-right: 0.625rem;
float: left; }
.filter__item:nth-child(odd) {
padding-left: 0; }
.filter__item:nth-child(even) {
clear: right;
padding-right: 0; } }
/*
* Filter module
* General filters functionality
* Used at: Orderstaraat filters but can be used in other filters in future with
* redesign
*
* #TODO Rename to .filter (it's one filter module not multiple)
* #TODO Remove superfluous layer in BEM structure (move __list up to .filter
* class). This results in a ul.filter with styling on the list items
*/
.filters__list li {
width: 100%;
height: 2.5rem;
margin: 0 0 0.625rem 0;
list-style: none;
border: 1px solid #ccdef4;
border-radius: 0.3125rem;
color: #002c5e;
padding: 0 1.25rem 0 0;
line-height: 2.5rem;
cursor: pointer;
background-color: #ffffff;
transition: background 0.15s linear 0s;
/*
* Workaround for click through element on iphone4
*/ }
.filters__list li:before {
width: 1rem;
height: 0.875rem;
display: inline-block;
position: relative;
left: 98%;
content: "";
background-repeat: no-repeat;
background-position: 0 0;
background-color: transparent;
background-image: url(/includes/img/icons-svg/icon-plus-light-blue.svg); }
.filters__list li:hover {
background-color: #ccdef4;
border-color: #002c5e; }
.filters__list li:hover:before {
background-image: url(/includes/img/icons-svg/icon-plus-dark-blue.svg); }
.touch .filters__list li:hover {
background-color: transparent;
border-color: #ccdef4; }
.touch .filters__list li:hover:before {
background-image: url(/includes/img/icons-svg/icon-plus-light-blue.svg); }
.touch .filters__list li.is-active {
background-color: #ccdef4; }
.touch .filters__list li.is-active:before {
background-image: url(/includes/img/icons-svg/icon-check-dark-blue-small.svg); }
.filters__list li.is-active {
background-color: #ccdef4;
font-weight: 600; }
.filters__list li.is-active:before {
background-image: url(/includes/img/icons-svg/icon-check-dark-blue-small.svg); }
.filters__invoker {
width: 100%;
height: 2.5rem;
margin-bottom: 20px;
color: #002c5e;
background-color: #ccdef4;
text-align: center;
font-weight: 600;
line-height: 2.5rem;
cursor: pointer; }
.filters__invoker:after {
width: 1rem;
height: 0.6875rem;
left: 4px;
display: inline-block;
position: relative;
content: "";
background-position: 0 0;
background-repeat: no-repeat;
background-image: url(/includes/img/icons-svg/icon-arrow-down-dark-blue.svg); }
.filters__invoker.is-opened:after {
background-image: url(/includes/img//icons-svg/icon-arrow-up-dark-blue.svg); }
.filters-list__remove {
margin-top: -10px; }
.filters-list__remove span {
line-height: 1.875rem;
color: #FF8800;
text-decoration: underline;
cursor: pointer; }
.filters-list__remove span:hover {
color: #000000; }
.search-filter {
display: inline-block;
position: relative;
margin: 0 1.25rem 1.25rem 0;
border: 1px solid #002c5e;
padding: 2px 1.6875rem 2px 0.8125rem;
color: #000000;
font-weight: 400;
line-height: 1.4375rem;
cursor: pointer; }
.search-filter:after {
content: '';
display: inline-block;
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 0.75rem;
height: 0.75rem;
margin-left: 1.25rem;
cursor: pointer;
background-repeat: no-repeat;
background-image: url(/includes/img/svg/compressed/icon-x-black.svg); }
.search-filter:hover:after {
background-image: url(/includes/img/svg/compressed/icon-x-orange-small.svg); }
.search-filter--orange {
border: 1px solid #FF8800; }
/**
* Animation classes
*/
.fade-in {
-webkit-animation: fade-in .8s alternate ease forwards 1;
animation: fade-in .8s alternate ease forwards 1; }
@-webkit-keyframes fade-in {
from {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(60deg);
transform: scale(0.9) rotateX(60deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
max-height: 0; }
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
max-height: 31.25rem; } }
@keyframes fade-in {
from {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(60deg);
transform: scale(0.9) rotateX(60deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
max-height: 0; }
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
max-height: 31.25rem; } }
/*
* TODO:
* Opsplitsen:
* - paginering
* - pre-shop onderdelen
* - search en search-advanced
* binnen de class .shop staan een aantal onderdelen die op zichzelf kunnen staan, bijvoorbeeld product-filters
*/
.pre-shop-products-filters {
overflow: hidden; }
.pre-shop-products-filters .filters, .pre-shop-products-filters .help-text {
display: block; }
.pre-shop-products-list {
list-style: none;
padding: 0; }
.pre-shop-products-list li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.pre-shop-products-list.no-products:before {
color: #002c5e;
content: attr(data-no-products-selected);
display: block;
padding: 0.625rem 1.25rem;
text-align: center; }
.pre-shop-product-price {
position: relative;
margin-bottom: 1.25rem; }
.pre-shop-product-price:before, .pre-shop-product-price:after {
content: ' ';
display: table; }
.pre-shop-product-price:after {
clear: both; }
.pre-shop-product-price .payment-methods {
bottom: 0;
left: 0;
margin-bottom: 0;
position: absolute;
width: 78%; }
.pre-shop-product-price .payment-methods img {
margin-right: 0.625rem; }
.pre-shop-product-price .payment-methods p {
color: #333333;
display: inline-block;
font-size: 0.875rem;
line-height: 1rem;
margin-bottom: 0; }
.pre-shop-product-price .price-order {
clear: right;
float: right;
margin-bottom: 0; }
.pre-shop-product-price .price-order .price {
color: #002c5e;
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0;
text-align: right; }
.pre-shop-product-price .price-order .btw {
color: #002c5e;
font-weight: 300;
margin-bottom: 0;
text-align: right; }
.pre-shop-product-price .price-order .button-yellow {
float: right;
margin-top: 1rem; }
.pre-shop-product-price .price-order .phone {
float: right;
margin-bottom: 0; }
.pre-shop-product-price .price-order .phone p {
color: #002c5e;
margin-bottom: 0; }
.pre-shop-product-price .price-order .number {
background: url(/includes/img/icon-phone-dark-blue.png) left center no-repeat;
background-size: 1.625rem 1.875rem;
float: right;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.875rem;
margin-top: 0.25rem;
padding-left: 2rem; }
.shop {
margin-bottom: 3.125rem; }
.shop h2 {
margin: 0 0 0.5rem 1rem;
padding-top: 2rem;
color: #002c5e;
font-weight: 300;
font-size: 1.375rem; }
.shop .search {
margin-bottom: 1rem;
position: relative; }
.shop .search:before, .shop .search:after {
content: ' ';
display: table; }
.shop .search:after {
clear: both; }
.shop .search > input[type='text'] {
border: 0.0625rem solid color(gray, 50);
border-top-left-radius: 0.3125rem;
border-top-right-radius: 0.3125rem;
border-bottom-right-radius: 0.3125rem;
border-bottom-left-radius: 0.3125rem;
height: 3.75rem;
font-size: 1.375rem;
line-height: 3.75rem;
margin-bottom: 0.75rem;
padding: 0 1.375rem;
width: 100%; }
.shop .search > input[type='text'].placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.shop .search > input[type='text']::-webkit-input-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.shop .search > input[type='text']:-moz-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.shop .search > input[type='text']::-moz-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.shop .search > input[type='text']:-ms-input-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.shop .search button {
background: transparent url(/includes/img/icon-zoeken-dark-blue.png) no-repeat;
background-size: 1.5rem;
border: 0;
height: 1.5rem;
overflow: hidden;
position: absolute;
right: 1.125rem;
text-indent: 100%;
top: 1.125rem;
width: 1.5rem; }
.shop .search .advanced {
background: url(/includes/img/icon-arrow-right-dark-blue.png) left 0.25rem no-repeat;
color: #00526E;
float: right;
padding-left: 1rem;
text-decoration: none; }
.shop .search .advanced:hover {
text-decoration: underline; }
.shop .search-advanced {
display: none;
position: relative;
margin-bottom: 2rem; }
.shop .search-advanced input[type='text'] {
background-color: #ffffff;
border: 0.0625rem solid color(gray, 50);
border-top-left-radius: 0.3125rem;
border-top-right-radius: 0.3125rem;
border-bottom-right-radius: 0.3125rem;
border-bottom-left-radius: 0.3125rem;
font-weight: 600;
height: 3.125rem;
line-height: 2rem;
margin-bottom: 0.5rem;
padding: 0 0.5rem;
width: 100%; }
.shop .search-advanced input[type='text'].placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.shop .search-advanced input[type='text']::-webkit-input-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.shop .search-advanced input[type='text']:-moz-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.shop .search-advanced input[type='text']::-moz-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.shop .search-advanced input[type='text']:-ms-input-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.shop .search-advanced input[type='text'].straatnaam {
float: left;
margin-right: 3%;
width: 67%; }
.shop .search-advanced input[type='text'].huisnummer {
float: left;
width: 30%; }
.shop .search-advanced input[type='text'].postcode {
clear: both;
float: left;
margin-right: 3%;
width: 30%; }
.shop .search-advanced input[type='text'].plaatsnaam {
float: left;
width: 67%; }
.shop .search-advanced input[type='text'].error-field {
box-shadow: 0 0 0.125rem 0 red; }
.shop .search-advanced .details {
float: left;
margin-bottom: 0.5rem;
width: 60%; }
.shop .search-advanced .seperator {
float: left;
font-weight: 600;
line-height: 3rem;
text-align: center;
width: 5%; }
.shop .search-advanced .kvknummer {
float: left;
width: 35%; }
.shop .search-advanced .options {
clear: both; }
.shop .search-advanced .options input[type='checkbox'] {
margin-right: 0.3125rem; }
.shop .search-advanced .options > label {
margin-bottom: 0.5rem; }
.shop .search-advanced .options fieldset {
clear: both;
float: left;
margin-bottom: 1rem; }
.shop .search-advanced .options fieldset.error-field {
box-shadow: 0 0 0.125rem 0 red;
margin: -0.125rem 0 0.875rem -0.5rem;
padding: 0.125rem 0.5rem; }
.shop .search-advanced .options fieldset.error-field .error-message {
margin-bottom: 0; }
.shop .search-advanced .options fieldset label {
float: left;
margin-right: 1rem; }
.shop .search-advanced .zoekvervallen,
.shop .search-advanced .zoekuitgeschreven {
clear: both;
float: left; }
.shop .search-advanced .button--yellow {
clear: both;
display: block; }
.shop .search-advanced .archive {
bottom: 0.5rem;
position: absolute;
right: 0; }
.shop .search-advanced .error-message {
clear: both;
color: #ff3333;
display: none;
margin: 0.5rem 0 1rem; }
.shop .products-filters {
display: none;
margin-top: 2rem; }
.shop .products-filters:before, .shop .products-filters:after {
content: ' ';
display: table; }
.shop .products-filters:after {
clear: both; }
.shop .products-filters.no-notification {
margin-bottom: 1rem; }
.shop .products-filters h2 {
float: left;
padding-top: 0;
margin-bottom: 0.25rem; }
.shop .products-filters p {
float: left;
line-height: 1.75rem;
margin-left: 0.25rem; }
.shop .products-filters .help {
color: #007CC1;
text-decoration: underline; }
.shop .products-filters .help:hover {
color: #388099; }
.shop .products-filters .help-text {
color: #002c5e;
display: none; }
.shop .products-filters .filters {
clear: both;
display: none;
padding: 0 2.5rem;
text-align: center; }
.shop .products-filters button {
height: 2.5rem;
padding: 0 1.5rem;
border: 0;
border-radius: 0.3125rem;
font-weight: 600;
line-height: 2.5rem;
text-decoration: none;
cursor: pointer;
background-color: #ffffff;
border: 1px solid #00526E;
color: #00526E;
border-radius: 4px;
margin: 0.75rem 0.25rem 0; }
.shop .products-filters button.plus {
background-image: url(/includes/img/icon-plus-black.png);
background-position: center center;
background-repeat: no-repeat;
width: 0.875rem; }
.shop .products-filters button:hover, .shop .products-filters button.active {
background-color: #00526E;
color: #ffffff; }
.shop .products-filters button.not-active, .shop .products-filters button.not-active:hover {
background-color: #00526E; }
.shop .list-header {
color: #00526E;
display: none;
font-size: 0.875rem;
height: 2.5rem;
line-height: 2.5rem;
position: relative;
text-align: center;
z-index: 1; }
.shop .list-header:before, .shop .list-header:after {
content: ' ';
display: table; }
.shop .list-header:after {
clear: both; }
.shop .list-header .about {
display: none; }
.shop .no-results {
background-color: #EFEFEF;
display: none;
margin-top: 1rem;
padding: 1rem 1.25rem 1px; }
.shop .no-results .basic,
.shop .no-results .advanced {
display: none; }
.shop .no-results .query {
font-weight: 600; }
.shop .no-results ul, .shop .no-results p {
margin-bottom: 1rem; }
.shop .no-results ul + ul, .shop .no-results ul p, .shop .no-results p + ul, .shop .no-results p p {
margin-bottom: 0.5rem; }
.shop .no-results h3 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem; }
.shop .list-simple {
list-style: none;
padding: 0;
background-color: #ffffff;
display: none; }
.shop .list-simple li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.shop .list-simple > li {
border-top: 0.0625rem solid #f2f2f2;
position: relative;
overflow: hidden; }
.shop .list-simple > li:first-child {
border-top: 0; }
.shop .list-simple > li a {
display: block;
padding: 1.375rem;
text-decoration: none; }
.shop .list-simple > li a:hover {
background-color: #efefef; }
.shop .list-simple > li a:hover h3 {
color: #000000; }
.shop .list-simple > li h3 {
color: #065ca9;
font-size: 1rem;
font-weight: 600; }
.shop .pagination {
list-style: none;
padding: 0;
background-color: #ffffff;
padding: 0 1.25rem 1rem;
margin-bottom: 2.5rem;
display: none; }
.shop .pagination li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.shop .pagination li {
display: inline-block;
height: 1.9375rem;
line-height: 1.9375rem; }
.shop .pagination li.active a {
background-color: #00526E;
color: #fff; }
.shop .pagination a {
color: #00526E;
display: block;
padding: 0 0.5rem;
text-decoration: none; }
.shop .pagination a:hover {
background-color: #00526E;
color: #fff; }
.shop .pagination .vorige {
background: #ffffff url(/includes/img/button-disc-prev.png) no-repeat;
padding-left: 2.5rem;
padding-right: 0.5rem; }
.shop .pagination .vorige a {
margin-left: -2.5rem;
margin-right: -0.5rem;
padding-left: 2.5rem; }
.shop .pagination .vorige a:hover {
background-color: transparent;
color: #00526E; }
.shop .pagination .vorige:hover {
background-position: left 100%; }
.shop .pagination .vorige.not-active {
opacity: 0.3; }
.shop .pagination .vorige.not-active:hover {
background-position: left top; }
.shop .pagination .volgende {
background: #ffffff url(/includes/img/button-disc-next.png) right top no-repeat;
padding-left: 0.5rem;
padding-right: 2.375rem; }
.shop .pagination .volgende a {
margin-left: -0.5rem;
margin-right: -2.375rem;
padding-right: 2.375rem; }
.shop .pagination .volgende a:hover {
background-color: transparent;
color: #00526E; }
.shop .pagination .volgende:hover {
background-position: right 100%; }
.shop .pagination .volgende.not-active {
opacity: 0.3; }
.shop .pagination .volgende.not-active:hover {
background-position: right top; }
.shop .pagination li {
margin-top: 1rem; }
.shop .search-error {
color: #ff3333;
display: none;
padding-top: 1rem;
text-align: center; }
.shop .order {
list-style: none;
padding: 0; }
.shop .order li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.shop .order ~ .search,
.shop .order ~ .search-advanced {
margin-top: 1rem; }
.shop .order li {
border: 1px solid #757575;
color: #343434;
padding: 1.375rem 7.5rem 1.375rem 2rem;
position: relative; }
.shop .order li h3 {
display: inline;
font-weight: 600;
font-size: 1.125rem;
line-height: 1.25rem;
margin-right: 0.5rem;
/*------------------------------------*\
# PINNED PRODUCT START
# TODO: delete this selection when we switch to the new shop, pinned product is in _product-specific.scss
\*------------------------------------*/
/*------------------------------------*\
# END OF PINNED PRODUCT START
\*------------------------------------*/ }
.shop .order li h3 span:after {
content: 'Vergeten';
position: absolute;
width: 110px;
height: 25px;
background-position: 10px 4px;
background-repeat: no-repeat;
background-size: 14px 14px;
font-size: 0.75rem;
border-top-left-radius: 0.3125rem;
border-top-right-radius: 0.3125rem;
border-bottom-right-radius: 0.3125rem;
border-bottom-left-radius: 0.3125rem;
text-align: right;
padding-right: 15px;
padding-top: 1px;
margin-left: 10px;
margin-top: -2px;
cursor: pointer; }
.shop .order li h3 span.pinned:after {
background-color: #2F6B80;
background-image: url("/includes/img/icons-svg/icon-pin-white.svg");
border: 1px solid #2F6B80;
color: #ffffff; }
.shop .order li h3 span.pinned:hover:after {
background-color: #ffffff;
background-image: url("/includes/img/icons-svg/icon-pin-blue.svg");
color: #002c5e; }
.shop .order li h3 span.unpinned:after {
content: 'Onthouden';
background-color: #ffffff;
background-image: url("/includes/img/icons-svg/icon-pin-blue.svg");
border: 1px solid #2F6B80;
color: #2F6B80; }
.shop .order li h3 span.unpinned:hover:after {
background-color: #2F6B80;
background-image: url("/includes/img/icons-svg/icon-pin-white.svg");
border: 1px solid #2F6B80;
color: #ffffff; }
.shop .order li > p {
display: inline;
font-weight: 300;
line-height: 1.5rem;
margin-right: 0.5rem; }
.shop .order li > img {
position: relative;
top: -0.125rem;
vertical-align: middle; }
.shop .order li .type {
background-color: #fff;
border: 1px solid #343434;
color: #343434;
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.375rem;
padding: 0 0.5625rem;
position: relative;
top: -0.125rem; }
.shop .order li .info.show .url,
.shop .order li .info.show .status,
.shop .order li .info.show .kenmerk,
.shop .order li .info.show .nmi,
.shop .order li .info.show .hoofdvestiging {
display: block; }
.shop .order li .info > div:before, .shop .order li .info > div:after {
content: ' ';
display: table; }
.shop .order li .info > div:after {
clear: both; }
.shop .order li .info p {
font-size: 0.9375rem; }
.shop .order li .info .url {
color: #007CC1;
display: none;
font-size: 0.875rem; }
.shop .order li .info .url:hover {
color: #388099; }
.shop .order li .info .status {
display: none;
margin-top: 0.5rem; }
.shop .order li .info .status .details {
color: #ff3333; }
.shop .order li .info .kenmerk {
display: none; }
.shop .order li .info .label {
clear: both;
float: left;
width: 15%; }
.shop .order li .info .details {
font-weight: 300;
float: left;
width: 85%; }
.shop .order li .info .details a {
color: #007CC1;
font-size: 0.875rem;
font-weight: 400; }
.shop .order li .info .details a:hover {
color: #388099; }
.shop .order li .info .hoofdvestiging {
display: none; }
.shop .order li .cancel {
background: url(/includes/img/icon-close-dark-blue.png);
background-repeat: no-repeat;
height: 1.6875rem;
position: absolute;
right: 1.5rem;
top: 1.1875rem;
width: 1.6875rem; }
.shop .order li .cancel:before {
content: url(/includes/img/icon-close-white.png);
display: none; }
.shop .order li .cancel:hover {
background-image: url(/includes/img/icon-close-dark-blue-hover.png); }
.shop .order li + li {
margin-top: 0.3125rem; }
.shop .order .product:before, .shop .order .product:after,
.shop .order .payment-type:before,
.shop .order .payment-type:after {
content: ' ';
display: table; }
.shop .order .product:after,
.shop .order .payment-type:after {
clear: both; }
.shop .order .product.voorkeur .description h3,
.shop .order .payment-type.voorkeur .description h3 {
display: block; }
.shop .order .product.voorkeur,
.shop .order .payment-type.voorkeur {
display: none; }
.shop .order .product.not-available h3, .shop .order .product.not-available p,
.shop .order .payment-type.not-available h3,
.shop .order .payment-type.not-available p {
color: #ff3333; }
.shop .order .product .description,
.shop .order .payment-type .description {
float: left; }
.shop .order .product .description .text,
.shop .order .payment-type .description .text {
font-weight: 400; }
.shop .order .product .description .type + p,
.shop .order .payment-type .description .type + p {
display: block; }
.shop .order .product .price,
.shop .order .payment-type .price {
float: right;
text-align: right;
width: 25%; }
.shop .order .product .price p,
.shop .order .payment-type .price p {
margin-right: 0; }
.shop .order .product p,
.shop .order .payment-type p {
color: #002c5e;
display: inline;
font-weight: 300;
line-height: 1.25rem;
margin-right: 0.5rem; }
.shop .order .product .type,
.shop .order .payment-type .type {
background-color: #065ca9;
color: #ffffff;
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.375rem;
padding: 0 0.5625rem;
position: relative;
top: -0.125rem; }
.shop .order .product.not-available {
display: none; }
.shop .order .product .description {
width: 70%; }
.shop .order .payment-type .description {
width: 90%; }
.shop .order .animated {
opacity: 1;
position: relative;
right: -5rem;
visibility: hidden; }
.shop .finalize-title {
display: none; }
.shop .finalize-title.show {
display: block; }
.shop .finalize {
background-color: #EFEFEF;
display: none;
margin-top: 1rem;
padding: 1.5rem 1.5rem 1px; }
.shop .finalize.show {
display: block; }
.shop .finalize.toegangscode p {
color: #002c5e;
margin-bottom: 1.5rem; }
.shop .finalize.toegangscode .button-yellow {
display: inline-block;
margin-bottom: 1.5rem; }
.shop .finalize hr {
border: 0;
border-top: 0.0625rem solid #f2f2f2;
height: 0;
margin: 0 -1.5rem 1.5rem; }
.shop .finalize .form .button-yellow + .checkbox {
margin-left: 1.5rem;
display: inline-block; }
.shop .finalize .form p {
margin-bottom: 1.5rem; }
.shop .list-payment {
margin-bottom: 20px; }
.shop .list-payment li {
cursor: pointer; }
.shop .list-payment li:hover.active {
cursor: default; }
.shop .payment-data__name {
display: inline;
position: relative; }
.shop .payment-data__type {
display: inline;
position: absolute;
right: 22.25rem; }
.shop .payment-data__type.preferred-payment:before {
width: 0;
height: 0; }
@media only screen and (min-width: 641px) {
.shop .payment-data__type.preferred-payment:before {
content: "";
width: 1.25rem;
height: 1.25rem;
position: relative;
top: 0rem;
float: left;
margin-right: 1.125rem;
background-image: url("/includes/img/svg/compressed/icon-voorkeursbetaalmethode.svg");
background-size: contain;
background-repeat: no-repeat; } }
.shop .payment-data__account-no {
display: inline;
position: absolute;
right: 8rem; }
.shop .message-payments {
padding-top: 1rem;
padding-bottom: 0.6875rem;
font-size: 1.125rem;
color: #002c5e; }
.shop .payment-method {
padding: 1.375rem 1rem 1.375rem 6.875rem; }
.shop .pay-confirm p {
color: #002c5e;
margin-bottom: 1.5rem; }
.list-shop {
list-style: none;
padding: 0;
background-color: #ffffff;
display: none; }
.list-shop li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.list-shop.no-products:before {
background-color: #f2f2f2;
color: #002c5e;
content: attr(data-no-products-selected);
display: block;
padding: 1.25rem 0;
text-align: center; }
.list-shop.products {
display: none; }
.list-shop.variants {
display: block; }
.list-shop.animated {
margin-top: 3.75rem;
opacity: 0;
visibility: hidden; }
.list-shop.no-info .product .price {
right: 1.5rem; }
.list-shop.payment {
display: block; }
.list-shop.concernrelaties .product h3 {
margin-right: 0.5rem; }
.list-shop.concernrelaties .product h3 + p {
font-weight: 600;
font-size: 1.125rem; }
.list-shop.concernrelaties-hoogste-niveaus {
margin-top: 2rem; }
.list-shop > li {
background: url(/includes/img/icon-arrow-black.png) 2.75rem 1.25rem no-repeat;
border: 0.0625rem solid #979797;
margin-bottom: 16px;
position: relative;
/*overflow: hidden;*/ }
.list-shop > li:before, .list-shop > li:after {
content: ' ';
display: table; }
.list-shop > li:after {
clear: both; }
.list-shop > li.disabled {
background-image: none; }
.list-shop > li.disabled:hover .hover {
display: none; }
.list-shop > li.disabled:hover .show-more-info {
display: none; }
.list-shop > li.disabled .product {
cursor: default; }
.list-shop > li.disabled .product h3, .list-shop > li.disabled .product p {
color: #343434; }
.list-shop > li.disabled .product .not-available {
color: #BC3F38;
display: block;
padding-top: 0.25rem; }
.list-shop > li.disabled .product .price {
display: none; }
.list-shop > li.disabled .product--document .price {
display: inline; }
.list-shop > li.disabled .show-more-info {
display: none; }
.list-shop > li:hover h3,
.list-shop > li:hover p,
.list-shop > li:hover .more-info,
.list-shop > li:hover .snippet, .list-shop > li.active h3,
.list-shop > li.active p,
.list-shop > li.active .more-info,
.list-shop > li.active .snippet {
color: #343434; }
.list-shop > li:hover .hover, .list-shop > li.active .hover {
display: block; }
.list-shop > li:hover .more-info, .list-shop > li.active .more-info {
background-color: #fff;
margin-right: -1rem;
padding-right: 1rem; }
.list-shop > li:hover .more-info:after, .list-shop > li.active .more-info:after {
background-color: #fff;
bottom: 100%;
content: '';
height: 3.25rem;
position: absolute;
right: 0;
width: 11.25rem; }
.list-shop > li:hover .show-more-info, .list-shop > li.active .show-more-info {
display: block; }
.list-shop .hover {
background: #EFEFEF url(/includes/img/icon-arrow-hover.png) 2.75rem 1.25rem no-repeat;
bottom: 0;
color: #343434;
display: none;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 0; }
.list-shop .result {
box-sizing: border-box;
display: block;
padding: 1.375rem 1rem 1.375rem 6.875rem;
position: relative;
text-decoration: none;
width: 100%;
z-index: 1; }
.list-shop .result .top {
padding: 0 10.625rem 0.25rem 0; }
.list-shop .result h3 {
display: inline-block;
font-weight: 600;
font-size: 1.125rem;
line-height: 1.375rem;
margin: 0 0.625rem 0.25rem 0; }
.list-shop .result .type {
background-color: #fff;
color: #343434;
border: 1px solid #343434;
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.375rem;
margin: 0 0.625rem 0.25rem 0;
padding: 0 0.5625rem;
position: relative;
top: -0.125rem; }
.list-shop .result .more-info {
background-color: #EFEFEF;
color: #002c5e;
display: none;
margin: 0 0 0.5rem 0;
padding: 0.5rem;
position: relative; }
.list-shop .result .more-info.show {
display: block; }
.list-shop .result .more-info h4 {
font-weight: 600;
font-size: 1rem; }
.list-shop .result .more-info p {
font-weight: 300; }
.list-shop .result .more-info p + h4 {
margin-top: 0.5rem; }
.list-shop .result .meta {
margin-bottom: 0.5rem; }
.list-shop .result .meta:before, .list-shop .result .meta:after {
content: ' ';
display: table; }
.list-shop .result .meta:after {
clear: both; }
.list-shop .result .meta p {
float: left;
font-weight: 300;
margin-right: 1rem; }
.list-shop .result .snippet {
font-weight: 300; }
.list-shop .result .status {
color: #ff3333;
font-weight: 300;
padding-top: 0.5rem; }
.list-shop .result + .show-more-info {
background: #fff url(/includes/img/icon-information-dark-blue.png) 1rem center no-repeat;
background-size: 1.5rem;
color: #343434;
cursor: pointer;
display: none;
padding-left: 3rem;
position: absolute;
right: 0;
top: 0;
width: 11.25rem;
z-index: 3;
cursor: pointer; }
.list-shop .result + .show-more-info.active {
background-image: url(/includes/img/icon-close-dark-blue.png); }
.list-shop .result + .show-more-info.active .show {
display: none; }
.list-shop .result + .show-more-info.active .close {
display: block; }
.list-shop .result + .show-more-info p {
line-height: 3rem; }
.list-shop .result + .show-more-info .close {
display: none;
padding-left: 0.1875rem; }
.list-shop .result + .show-more-info .close:before {
content: url(/includes/img/icon-close-dark-blue.png);
display: none; }
.list-shop .product {
box-sizing: border-box;
cursor: pointer;
display: block;
padding: 1.375rem 1rem 1.375rem 6.875rem;
position: relative;
text-decoration: none;
width: 100%;
z-index: 1; }
.list-shop .product:before, .list-shop .product:after {
content: ' ';
display: table; }
.list-shop .product:after {
clear: both; }
.list-shop .product:hover li span {
background-image: url(/includes/img/form-radio-selected-white.png);
background-size: 100%; }
.list-shop .product:hover + .show-more-info {
background-image: url(/includes/img/icon-information-petrol_hover.png); }
.list-shop .product.medium {
min-height: 5.3125rem; }
.list-shop .product.large {
min-height: 7.125rem; }
.list-shop .product.has-payment {
min-height: 6.25rem; }
.list-shop .product .top {
padding: 0 10rem 0.25rem 0; }
.list-shop .product .payment-info {
float: left;
width: 65%; }
.list-shop .product .payment-description {
margin-left: 20px; }
.list-shop .product .invoice-address {
margin-top: 20px; }
.list-shop .product .payment-type {
float: right;
width: 30%; }
.list-shop .product .payment-type img {
margin-right: 0.5rem; }
.list-shop .product h3 {
color: #002c5e;
display: inline;
font-weight: 600;
font-size: 1.125rem;
line-height: 1.25rem; }
.list-shop .product p {
color: #002c5e;
display: inline;
font-weight: 300;
line-height: 1.25rem;
margin-right: 0.5rem; }
.list-shop .product p + .type {
margin-left: 0; }
.list-shop .product dl {
color: #002c5e;
font-weight: 300;
font-size: 0.875rem;
line-height: 1.25rem; }
.list-shop .product dl:before, .list-shop .product dl:after {
content: ' ';
display: table; }
.list-shop .product dl:after {
clear: both; }
.list-shop .product dl dt {
clear: both;
float: left;
width: 25%; }
.list-shop .product dl dt:first-child {
margin-top: 0.5rem; }
.list-shop .product dl dt:first-child + dd {
margin-top: 0.5rem; }
.list-shop .product dl dd {
float: left; }
.list-shop .product .type {
background-color: #065ca9;
color: #ffffff;
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.375rem;
margin-left: 0.5rem;
padding: 0 0.5625rem;
position: relative;
top: -0.125rem; }
.list-shop .product .description {
display: block;
width: 80%; }
.list-shop .product .notice {
display: block;
margin-top: 0.375rem; }
.list-shop .product .notice span {
background-color: #ffeaa1;
display: inline-block;
font-size: 0.875rem;
font-weight: 400;
height: 1.5625rem;
line-height: 1.5625rem;
padding: 0 0.5rem; }
.list-shop .product .not-available {
display: none; }
.list-shop .product .price {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.5rem;
height: 1.5rem;
position: absolute;
right: 3.75rem;
top: 1.375rem; }
.list-shop .product .payment {
position: absolute;
right: 3.75rem;
top: 3.125rem; }
.list-shop .product li {
color: #002c5e;
margin-top: 0.3125rem;
padding-left: 1.6875rem;
position: relative; }
.list-shop .product li span {
background-image: url(/includes/img/form-radio-selected-dark-blue-24.png);
background-size: 100%;
height: 0.9375rem;
left: 0;
position: absolute;
top: 0.1875rem;
width: 0.9375rem; }
.list-shop .product li span:before {
content: url(form-radio-selected-white.png);
display: none; }
.list-shop .product + .show-more-info {
background: url(/includes/img/icon-information-dark-blue.png) center 1.375rem no-repeat;
background-size: 1.5rem;
bottom: 0;
position: absolute;
right: 0.75rem;
top: 0;
width: 3rem;
z-index: 3; }
.list-shop .product + .show-more-info:hover {
background-image: url(/includes/img/icon-information-dark-blue.png) !important; }
.list-shop--heading.is-first {
margin-top: -32px; }
/**
* Ajax loader image container
*/
.list-notification {
color: #002c5e;
overflow: hidden;
padding-bottom: 4rem;
margin: 2rem 0 -1rem;
text-align: center; }
.list-notification.error {
color: #BC3F38; }
.list-notification.error a {
color: #ff3333;
font-weight: 600; }
.list-notification.error:before {
content: url(/includes/img/icon-arrow-right-red2.png);
height: 0.75rem;
margin-right: 0.5rem;
position: relative;
top: 0.0625rem;
width: 0.5625rem; }
.spinner {
text-align: left; }
.spinner__img {
position: relative;
top: 2px;
margin-right: 5px; }
.shop .product--document .list-notification {
display: inline; }
.disabled .list-notification {
margin: 0;
display: inline; }
.disabled .list-notification p {
color: #002c5e !important;
font-weight: 600; }
.product--compact .list-notification p {
display: none; }
.product--compact .list-notification img {
margin-left: 0.5rem; }
.shop .list.products {
display: none; }
/**
* Semi new style orderstraat
* Compact view
*/
.shop .products--compact,
.products--compact {
background-color: transparent !important; }
.shop .products--compact > li,
.products--compact > li {
background: none;
border: none;
margin: 0;
padding-right: 0.625rem;
padding-left: 0.625rem; }
.product--compact {
margin-bottom: 1.25rem;
border: 1px solid #979797;
background: #ffffff url(/includes/img/icon-arrow-black.png) 2.75rem 1.25rem no-repeat; }
.products--compact > li:hover .product--compact {
background: #EFEFEF url(/includes/img/icon-arrow-hover.png) 2.75rem 1.25rem no-repeat; }
.product--compact h3 {
line-height: 1rem !important; }
.product--compact .top {
padding: 0 !important; }
.products--compact > li.disabled .product--compact,
.products--compact > li.disabled .product--compact:hover {
background-image: none;
background-color: #ffffff; }
.product--compact + .show-more-info {
right: 1.375rem !important; }
/**
* Module item
* used in shop
*/
.item {
margin-left: 0;
list-style: none;
display: block;
margin-bottom: 1.25rem;
background-color: #ffffff;
position: relative; }
.item a {
text-decoration: none;
display: block; }
.item .is-selected {
background-color: #ffcc33; }
/**
* Module item-content
* used in shop
*/
.item-content {
position: relative;
padding: 1.25rem 1.25rem; }
.row--light .item-content {
border: 1px solid #dcdcdc; }
.item-content--arrow:after {
content: '';
background-repeat: no-repeat;
position: absolute;
right: 1.25rem;
top: 50%;
margin-top: -0.4375rem;
width: 0.625rem;
height: 0.9375rem;
background-image: url(/includes/img/svg/compressed/arrow-thin-right-yellow.svg); }
.is-selected .item-content--arrow:after {
background-image: url(/includes/img/svg/compressed/arrow-thin-right-darkblue.svg); }
.item-content__header {
color: #002c5e;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.375rem; }
.item-content__body {
margin-top: 1.3125rem;
padding-right: 0.9375rem; }
.item-content__body:before, .item-content__body:after {
content: ' ';
display: table; }
.item-content__body:after {
clear: both; }
.item-content__body p {
float: left;
color: #002c5e;
font-weight: 300;
margin-right: 1rem; }
/**
* Module item--orange
* item with orange theame
* used in match companies
*/
.item--orange .item-content--arrow:after {
background-image: url(/includes/img/svg/compressed/icon-arrow-right-orange.svg); }
.item--orange .item-content__header:hover h3 {
color: #FF8800; }
.item--orange .item-more-info__body--is-open .item-more-info__body {
max-height: 50rem; }
/**
* Module item-more-info
* used in shop
*/
.item-more-info {
background-color: #F5F5F5;
color: #002c5e;
border: 1px solid #dcdcdc;
border-top-width: 2px; }
.row--light .item-more-info {
border-top: 1px; }
.item-more-info__body {
max-height: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
transition: all 500ms ease-out;
padding: 0 1.25rem 0; }
.item-more-info__body h4 {
font-weight: 600;
font-size: 1rem; }
.item-more-info__body p {
font-weight: 300; }
.item-more-info__body p + h4 {
margin-top: 0.5rem; }
.item-more-info__body .snippet {
margin-top: 0;
margin-bottom: 0;
color: #002c5e;
font-weight: 300; }
.item-more-info__body--is-open .item-more-info__body {
max-height: 37.5rem;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1000)";
padding-top: 1.25rem;
padding-bottom: 0.3125rem; }
.item-more-info__body--is-open .item-more-info__body .snippet {
margin-top: 0.9375rem; }
.item-more-info__link {
position: relative;
cursor: pointer;
padding: 1rem 1.25rem;
border-top: 1px solid #dcdcdc; }
.item-more-info__body--is-open .item-more-info__link {
display: block; }
.item-more-info__body--is-open .item-more-info__link .item-more-info__icon {
background-image: url("/includes/img/icons-svg/icon-arrow_up.svg"); }
.item-more-info__body--is-open .item-more-info__link .item-more-info__close {
display: none; }
.item-more-info__body--is-open .item-more-info__link .item-more-info__open {
display: block; }
.item-more-info__link .item-more-info__open {
display: none; }
.item-more-info__link .item-more-info__close {
display: block; }
.item-more-info__link .item-more-info__icon {
content: '';
background-repeat: no-repeat;
background-size: 12px 20px;
width: 1.1875rem;
height: 2rem;
display: inline-block;
position: absolute;
right: 0.625rem;
top: 1rem;
background-image: url("/includes/img/icons-svg/icon-arrow_down.svg"); }
.item-more-info__table {
display: none; }
.item-more-info__body--is-open .item-more-info__table {
display: block; }
.item-more-info__table-cell {
margin-bottom: 0.3125rem; }
.item-more-info__table-cell div:nth-child(2) {
padding-left: 1rem; }
/**
* Module itemlist
* used in shop
*/
.itemlist {
list-style: none;
padding: 0; }
.list-separater p {
padding: 0 0.5rem 0 0.5rem;
border-right: 1px solid;
margin-right: 0; }
.list-separater p:last-child {
padding-right: 0;
border: none; }
.item--company .item-content__header h3 {
display: inline;
margin-right: 0.625rem;
line-height: 1.75rem; }
.item--company__type {
display: inline;
background-color: #065ca9;
color: #ffffff;
font-size: 0.75rem;
font-weight: 600;
padding: 0.3125rem 0.625rem; }
.item--company__status {
color: #ff3333;
font-weight: 300;
padding-top: 0.75rem; }
.item--product .item-content__header {
position: relative; }
.item--product .item-content__header:before, .item--product .item-content__header:after {
content: ' ';
display: table; }
.item--product .item-content__header:after {
clear: both; }
.item--product .item-content__header h3 {
float: left;
width: calc(100% - 125px);
margin-right: 20px; }
.item--product .item-content__header .price {
float: right;
width: 105px;
text-align: right; }
.item--product .item-content__header .vanaf {
margin-right: 3px; }
.item--product .item-content__header .euro {
margin-right: 3px; }
.item--product .item-content__body {
margin-top: 2.1875rem; }
.item--cross-sell h3 {
font-size: 1.25rem;
font-weight: 400;
display: inline;
margin-right: 0.625rem;
line-height: 1.75rem; }
.item--cross-sell .item-content__body {
margin-top: 0.625rem; }
.item--cross-sell .item-content__body p {
font-size: 1.25rem; }
.item--cross-sell .item-content__body p.info {
font-size: 1rem; }
/*
* Module progressbar
* Used to display the progress of the order via steps in the shop
* Used in Orderstraat
*/
.progressbar {
list-style: none;
padding: 0;
margin-bottom: 1.25rem; }
.progressbar:before, .progressbar:after {
content: ' ';
display: table; }
.progressbar:after {
clear: both; }
.progressbar li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.progressbar__step {
box-sizing: border-box;
position: relative;
float: left;
height: 5rem;
width: 16.6666666667%;
border: 0.0625rem solid #ffffff;
color: #9b9b9b;
font-weight: 300; }
.progressbar__step.is-active {
width: 66.6666666667%;
background-color: #ffcc33;
border-color: #ffcc33; }
@media only screen and (min-width: 721px) {
.progressbar__step.is-active {
width: 33.3333333333%; } }
.progressbar__step.is-complete {
position: relative;
background-color: #ffffff;
color: #002c5e; }
@media only screen and (min-width: 721px) {
.progressbar__step.is-complete {
width: 33.3333333333%; }
.progressbar__step.is-complete:after {
position: absolute;
right: 0.9375rem;
top: 2.0625rem;
width: 1.5rem;
height: 1.5rem;
content: '';
background-image: url(/includes/img/form-radio-selected-yellow-24.png); } }
.progressbar__step.is-complete a {
cursor: pointer; }
.progressbar__step.is-complete + .progressbar__step.is-complete {
border-left: 0.0625rem solid #dcdcdc; }
.progressbar__step.is-active a, .progressbar__step.is-complete a {
color: #002c5e; }
.progressbar__step > a {
display: block;
height: 100%;
font-size: 2.25rem;
line-height: 5rem;
padding-left: 1.25rem;
text-decoration: none;
color: #9b9b9b;
cursor: default; }
@media only screen and (min-width: 721px) {
.progressbar__step {
width: 33.3333333333%; } }
.progressbar__stepname {
display: none;
font-size: 1.125rem;
padding-left: 0.375rem; }
.is-active .progressbar__stepname {
display: inline-block; }
@media only screen and (min-width: 721px) {
.progressbar__stepname {
display: inline-block; } }
.step-container-header {
padding: 1.25rem 0 0.625rem 1.25rem; }
.step-container-header:before, .step-container-header:after {
content: ' ';
display: table; }
.step-container-header:after {
clear: both; }
.step-container-header h2 {
margin-top: 0.25rem;
margin-bottom: 0; }
@media only screen and (min-width: 481px) {
.step-container-header h2 {
float: left;
margin-bottom: 1.25rem; } }
@media only screen and (min-width: 481px) {
.step-container-header {
padding: 2.5rem 0 0 0; } }
.shopcontainer {
margin-bottom: 3.125rem; }
.pinned-product {
color: #002c5e;
font-weight: 600;
font-size: 1.125rem;
line-height: 1.25rem;
margin-right: 0.5rem; }
.pinned-product span:after {
content: 'Vergeten';
display: inline-block;
width: 110px;
height: 25px;
background-position: 10px 4px;
background-repeat: no-repeat;
background-size: 14px 14px;
font-size: 0.75rem;
border-top-left-radius: 0.3125rem;
border-top-right-radius: 0.3125rem;
border-bottom-right-radius: 0.3125rem;
border-bottom-left-radius: 0.3125rem;
text-align: right;
padding-right: 15px;
padding-top: 1px;
cursor: pointer;
margin-top: -2px;
margin-bottom: 5px; }
@media only screen and (min-width: 320px) {
.pinned-product span:after {
margin-top: 0; } }
.pinned-product span.pinned:after {
background-color: #94aecb;
color: #ccdef4;
border: 1px solid #94aecb;
background-image: url("/includes/img/icons-svg/icon-pin-light-blue.svg"); }
.pinned-product span.unpinned:after {
content: 'Onthouden';
background-color: #ccdef4;
color: #9b9b9b;
border: 1px solid #9b9b9b;
background-image: url("/includes/img/icons-svg/icon-pin-grey.svg"); }
.no-touch .pinned-product span.pinned:hover:after {
background-color: #ccdef4;
color: #002c5e;
background-image: url("/includes/img/icons-svg/icon-pin-blue.svg"); }
.no-touch .pinned-product span.unpinned:hover:after {
color: #002c5e;
background-color: #ccdef4;
border: 1px solid #94aecb;
background-image: url("/includes/img/icons-svg/icon-pin-blue.svg"); }
.pay-method-logo {
margin-right: 22px; }
@media only screen and (min-width: 481px) {
.pay-method-logo {
margin-right: 80px; } }
@media only screen and (min-width: 320px) {
.pay-method-logo {
display: inline-block;
float: right; } }
.pay-method-logo span {
display: inline-block;
vertical-align: middle;
margin-right: 10px; }
.pay-method-logo--iDEAL {
width: 25px;
height: 22px;
background-image: url("/includes/img/icon-ideal-small.png");
background-repeat: no-repeat;
background-position-y: 2px; }
.pay-method-logo--american-express {
width: 31px;
height: 20px;
background-image: url("/includes/img/icon-american-express-small.png");
background-repeat: no-repeat; }
.pay-method-logo--master-card {
width: 36px;
height: 22px;
background-image: url("/includes/img/icon-mastercard-small.png");
background-repeat: no-repeat; }
.pay-method-logo--visa {
width: 44px;
height: 14px;
background-image: url("/includes/img/icon-visa-small.png");
background-repeat: no-repeat; }
.item--product .pay-method-logo {
position: absolute;
top: 30px;
right: -1px;
margin-right: 12px; }
.pay-method-title {
display: inline-block; }
.payment-form label + .search__company + .modal--select {
top: 5rem; }
.payment-form .validation-fix-block input {
height: 0; }
.payment-form .validation-fix-block label {
height: 0;
margin-bottom: 0; }
.payment-form .validation-fix-block .error {
position: relative;
top: -0.9375rem;
height: 100%; }
.payment-form--factuur .address-check {
margin-bottom: 0; }
.payment-form__heading {
padding-left: 1.25rem; }
.payment-form__instruction {
font-weight: 600; }
.form-confirm-order .button-new {
margin-right: 1.5rem; }
.form-confirm-order .button-new + .checkbox {
display: inline-block; }
.bijeenkomsten-filters {
margin-bottom: 1.5rem;
overflow: hidden; }
.bijeenkomsten-filters > p {
font-weight: 700; }
.bijeenkomsten-filters > p span, .bijeenkomsten-filters > p a {
font-weight: 400; }
.bijeenkomsten-filters .filters {
margin-top: 1rem; }
.bijeenkomst-summary:before, .bijeenkomst-summary:after {
content: ' ';
display: table; }
.bijeenkomst-summary:after {
clear: both; }
.bijeenkomst-summary .info {
float: left;
width: 60%; }
.bijeenkomst-summary .info p {
margin-bottom: 0; }
.bijeenkomst-summary .info .link-arrow-dark-blue {
float: left;
margin: 1.5625rem 1rem 0 0; }
.bijeenkomst-summary .button-yellow,
.bijeenkomst-summary .button-lightblue-yellow {
clear: both;
float: left;
margin-top: 1rem; }
.bijeenkomst-summary .details {
float: right;
margin-bottom: 0;
width: 35%; }
.bijeenkomst-summary .details a {
color: #9b9b9b;
text-decoration: none; }
.bijeenkomst-summary .details a:hover li {
color: #545454; }
.bijeenkomst-summary .details a:hover li.notice {
color: #cc0000; }
.bijeenkomst-summary .details ul {
list-style: none;
padding: 0;
background: url(/includes/img/icon-date-yellow.png) no-repeat;
background-size: 1.5625rem 1.875rem;
min-height: 1.875rem;
padding-left: 2.1875rem; }
.bijeenkomst-summary .details ul li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.bijeenkomst-summary .details li {
color: #9b9b9b;
font-weight: 700;
margin-bottom: 0;
padding-top: 0.25rem; }
.bijeenkomst-summary .details .notice {
color: #ff3333;
font-weight: 400; }
.bijeenkomst-summary .details .link-arrow-dark-blue {
color: #002c5e;
margin-top: 1rem; }
.bijeenkomst-summary .details .link-arrow-dark-blue:hover {
text-decoration: underline; }
.bijeenkomst-summary .details h3 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0; }
.bijeenkomst-summary .details p {
margin-bottom: 0.5rem; }
.bijeenkomsten-pagination {
background-color: transparent;
padding: 0; }
.bijeenkomsten-pagination .vorige,
.bijeenkomsten-pagination .volgende {
background-color: transparent; }
.bijeenkomsten-filters-location-active {
display: inline-block;
font-weight: 700;
margin-bottom: 0.5rem;
text-decoration: none; }
.bijeenkomsten-filters-location-active:after {
content: url(/includes/img/icon-x-red.png);
margin-left: 0.375rem; }
.bijeenkomsten-filters-location input[type='text'],
.bijeenkomsten-filters-location .form-select {
margin-bottom: 0.5rem; }
.bijeenkomsten-filters-location input[type='text'] {
float: left;
margin-right: 0.5rem;
width: 6.75rem; }
.bijeenkomsten-filters-location .form-select {
float: left;
width: 7.5rem; }
.bijeenkomsten-filters-location button {
clear: both; }
.bijeenkomsten-filters-when {
list-style: none;
padding: 0; }
.bijeenkomsten-filters-when li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.bijeenkomsten-filters-when .active {
font-weight: 700;
text-decoration: none; }
.bijeenkomsten-filters-when .active:after {
content: url(/includes/img/icon-x-red.png);
margin-left: 0.375rem; }
.bijeenkomsten-filters-side-list {
list-style: none;
padding: 0; }
.bijeenkomsten-filters-side-list li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.bijeenkomsten-filters-side-list li {
margin-bottom: 0.75rem; }
.bijeenkomsten-filters-side-list .active {
color: #000000;
font-weight: 700;
text-decoration: none; }
.bijeenkomsten-filters-side-list a span {
color: #000000; }
.bijeenkomsten-filters-side h3 {
font-weight: 700;
margin-bottom: 0.75rem; }
.bijeenkomsten-filters-side .more {
color: #065ca9;
cursor: pointer;
display: none;
margin-top: -0.25rem; }
.bijeenkomsten-filters-side .more:hover {
color: #002c5e; }
.bijeenkomsten-locations h2 {
background-color: #ccdef4;
color: #002c5e;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.5625rem;
margin-top: 2.5rem;
padding: 1rem; }
.bijeenkomsten-locations ul {
list-style: none;
padding: 0;
background-color: #ffffff; }
.bijeenkomsten-locations ul li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.bijeenkomsten-locations ul li {
line-height: 2.5rem;
min-height: 2.5rem;
padding: 0.5rem 1.25rem; }
.bijeenkomsten-locations ul li:before, .bijeenkomsten-locations ul li:after {
content: ' ';
display: table; }
.bijeenkomsten-locations ul li:after {
clear: both; }
.bijeenkomsten-locations ul li:hover .info,
.bijeenkomsten-locations ul li:hover .signup {
display: block; }
.bijeenkomsten-locations .date-notice {
clear: both;
float: left;
width: 27%; }
.bijeenkomsten-locations .date {
box-sizing: border-box;
background: url(/includes/img/icon-date-yellow.png) left 0.1875rem no-repeat;
background-size: 1.5625rem 1.875rem;
display: block;
font-weight: 600;
padding: 0 0.25rem 0 2.1875rem;
text-decoration: none; }
.bijeenkomsten-locations .notice {
color: #ff3333;
display: block;
line-height: 1.25rem;
margin-top: -0.5rem;
padding-left: 2.1875rem;
text-decoration: none; }
.bijeenkomsten-locations .notice:hover {
color: #cc0000; }
.bijeenkomsten-locations .location {
box-sizing: border-box;
float: left;
line-height: 1.25rem;
text-decoration: none;
padding: 0.625rem 0.25rem 0.625rem 0;
width: 27%; }
.bijeenkomsten-locations .info {
float: left;
width: 23%; }
.bijeenkomsten-locations .signup {
float: left;
text-align: right;
width: 23%; }
.bijeenkomsten-locations .signup .button-yellow {
display: inline-block; }
.bijeenkomsten-locations .signup .full {
font-size: 0.8125rem;
text-align: center; }
.bijeenkomst-capacity:before, .bijeenkomst-capacity:after {
content: ' ';
display: table; }
.bijeenkomst-capacity:after {
clear: both; }
.bijeenkomst-capacity a {
float: left; }
.bijeenkomst-capacity p {
color: #ff3333;
float: right;
line-height: 2.5rem;
margin-bottom: 0; }
.bijeenkomsten-program {
margin-bottom: 0 !important; }
.bijeenkomsten-program > div {
margin-bottom: 0;
padding-top: 0.5rem; }
.bijeenkomsten-program > div:before, .bijeenkomsten-program > div:after {
content: ' ';
display: table; }
.bijeenkomsten-program > div:after {
clear: both; }
.bijeenkomsten-program > div:first-child {
padding-top: 0; }
.bijeenkomsten-program .time {
box-sizing: border-box;
clear: both;
float: left;
padding-right: 0.5rem;
width: 20%; }
.bijeenkomsten-program .details {
float: left;
width: 80%; }
.bijeenkomsten-program .details p {
margin-bottom: 0.5rem; }
.bijeenkomsten-program .details .file {
background-position: left 0.125rem;
background-repeat: no-repeat;
padding-left: 1.75rem; }
.bijeenkomsten-program .details .file[href$='.doc'], .bijeenkomsten-program .details .file[href$='.docx'] {
background-image: url(/includes/img/icon-word.png); }
.bijeenkomsten-program .details .file[href$='.xls'], .bijeenkomsten-program .details .file[href$='.xlsx'] {
background-image: url(/includes/img/icon-excel.png); }
.bijeenkomsten-program .details .file[href$='.pdf'] {
background-image: url(/includes/img/icon-pdf.png); }
.bijeenkomsten-details {
margin-bottom: 2.5rem; }
.bijeenkomsten-details h3 {
color: #002c5e;
font-size: 1.125rem;
font-weight: 600; }
.bijeenkomsten-details p {
margin-bottom: 1rem; }
.bijeenkomsten-details .location {
background: url(/includes/img/icon-marker-dark-blue.png) right top no-repeat;
background-size: 1.6875rem 2.5rem;
display: block;
padding-right: 2.3125rem;
text-decoration: none; }
.bijeenkomsten-impressie .name {
font-weight: 600;
margin-top: -0.5rem; }
.bijeenkomsten-impressie .photos:before, .bijeenkomsten-impressie .photos:after {
content: ' ';
display: table; }
.bijeenkomsten-impressie .photos:after {
clear: both; }
.bijeenkomsten-impressie .photos img {
height: 4.375rem;
float: left;
margin: 0.5rem 0.5rem 0 0; }
.bijeenkomsten-logos div {
margin-top: -0.5rem; }
.bijeenkomsten-logos div:before, .bijeenkomsten-logos div:after {
content: ' ';
display: table; }
.bijeenkomsten-logos div:after {
clear: both; }
.bijeenkomsten-logos img {
float: left;
margin: 0.5rem 0.5rem 0 0;
max-height: 3.75rem; }
.bijeenkomst-location-select {
margin-bottom: 0.75rem !important; }
.bijeenkomst-location-select + p {
font-size: 1.125rem; }
.bijeenkomst-add-person {
display: inline-block;
line-height: 2.5rem;
margin-bottom: 1.5rem;
text-decoration: none; }
.bijeenkomst-add-person:before, .bijeenkomst-add-person:after {
content: ' ';
display: table; }
.bijeenkomst-add-person:after {
clear: both; }
.bijeenkomst-add-person:hover .button-yellow {
background-color: #ffab27; }
.bijeenkomst-add-person span {
float: left; }
.bijeenkomst-add-person .button-yellow {
margin: 0 0.75rem 0 0; }
.bijeenkomst-deelnemer {
margin-bottom: 0 !important;
overflow: hidden; }
.bijeenkomst-deelnemer .delete {
background: url(/includes/img/icon-x-red.png);
background-size: 100%;
border: 0;
cursor: pointer;
display: none;
height: 0.6875rem;
margin: 0 0 0 0.5rem;
vertical-align: super;
width: 0.6875rem; }
.bijeenkomst-deelnemer .extra .delete {
display: inline-block; }
.bijeenkomst-bedrijfsnaam {
display: none;
margin-bottom: 1.5rem !important; }
.bijeenkomst-bedrijfsnaam .radio {
clear: both;
float: left;
margin: 0 0 0.5rem 0 !important; }
.bijeenkomst-bedrijfsnaam p {
clear: both; }
.bijeenkomst-confirmation-list h3 {
clear: both;
padding-top: 1rem; }
.bijeenkomst-confirmation-list ul {
list-style: none;
padding: 0;
margin-bottom: 0.5rem; }
.bijeenkomst-confirmation-list ul li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.bijeenkomst-confirmation-list ul:before, .bijeenkomst-confirmation-list ul:after {
content: ' ';
display: table; }
.bijeenkomst-confirmation-list ul:after {
clear: both; }
.bijeenkomst-confirmation-list li {
float: right;
margin-bottom: 0;
width: 75%; }
.bijeenkomst-confirmation-list li:first-child {
float: left;
font-weight: 600;
width: 25%;
word-wrap: break-word; }
.bijeenkomst-confirmation-list ul {
margin-bottom: 0 !important; }
.bijeenkomst-confirmation-list .button-yellow {
margin-left: 1.5rem;
margin-top: 1.5rem; }
.bijeenkomst-confirmation-details .file {
background-position: left 0.125rem;
background-repeat: no-repeat;
padding-left: 1.75rem; }
.bijeenkomst-confirmation-details .file[href$='.doc'], .bijeenkomst-confirmation-details .file[href$='.docx'] {
background-image: url(/includes/img/icon-word.png); }
.bijeenkomst-confirmation-details .file[href$='.xls'], .bijeenkomst-confirmation-details .file[href$='.xlsx'] {
background-image: url(/includes/img/icon-excel.png); }
.bijeenkomst-confirmation-details .file[href$='.pdf'] {
background-image: url(/includes/img/icon-pdf.png); }
.bijeenkomst-confirmation-details .onderdelen {
list-style: none;
padding: 0; }
.bijeenkomst-confirmation-details .onderdelen li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.bijeenkomst-confirmation-details .onderdelen h4 {
margin-bottom: 0; }
.bijeenkomst-confirmation-details .link-arrow-dark-blue {
margin: 1rem 0 0; }
.bijeenkomst-opties .optie {
margin-bottom: 1.875rem; }
.bijeenkomst-opties .optie + .optie {
margin-bottom: 1.875rem; }
.bijeenkomst-opties .optie[data-filter-recommended="false"] {
display: none; }
.bijeenkomst-opties .optie.not-selectable, .bijeenkomst-opties .optie.not-selectable h3 {
color: #9b9b9b; }
.bijeenkomst-opties .radio,
.bijeenkomst-opties .checkbox {
float: left;
margin-left: 0 !important; }
.bijeenkomst-opties .checkbox-filter {
clear: both;
cursor: pointer; }
.bijeenkomst-opties .description {
margin-bottom: 0;
overflow: hidden; }
.bijeenkomst-opties .description h3 {
font-size: 1.25rem;
font-weight: normal;
margin-bottom: 0.9375rem; }
.bijeenkomst-opties .description p {
margin-bottom: 0; }
.bijeenkomst-opties hr {
clear: both;
border: 0;
border-top: 1px solid #f2f2f2;
height: 0;
margin: 0 -1.5rem 1.875rem; }
.bijeenkomst-opties .notification {
margin: -1.75rem -1.25rem 1.875rem; }
.bijeenkomst-opties .block h2 + .notification {
margin-bottom: 0.9375rem; }
.bijeenkomst-opties .button-yellow {
margin-bottom: 1.875rem; }
.bijeenkomst-opties .notice {
color: #ff3333; }
.bijeenkomst-opties span.notice {
margin-left: 0.9375rem; }
.bijeenkomst-opties p.notice {
margin-top: 0.9375rem; }
.max-checkbox-error {
display: none; }
.contact-block {
margin: 0 0 2rem; }
.contact-block:before, .contact-block:after {
content: ' ';
display: table; }
.contact-block:after {
clear: both; }
.contact-telephone {
background: url(/includes/img/icon-phone-dark-blue.png) 1.25rem center no-repeat;
min-height: 1.875rem;
text-indent: 2.5rem; }
.contact-telephone .number {
line-height: 1.875rem;
font-weight: bold;
color: #002c5e;
padding-left: 0.625rem;
font-size: 1.2em; }
.contact-email {
background: url(/includes/img/icon-email-dark-blue.png) 1.25rem center no-repeat;
min-height: 1.625rem;
text-indent: 3.125rem; }
.contact-telephone.item, .contact-email.item {
display: block;
margin: 0.9375rem 0;
background-position: 0 center; }
.contact-notice {
background-color: #ffeaa1;
color: #002c5e;
font-size: 0.875rem;
margin: 0.5rem 0 0.5rem !important;
padding: 0.25rem 0.5rem; }
.contact-notice + p {
clear: both; }
.contact-handelsregister .contact-telephone {
float: left;
padding-right: 0.5rem;
width: 50%; }
.contact-handelsregister .contact-handelsregister-list {
float: right;
padding-left: 0.5rem;
width: 50%; }
.contact-handelsregister .contact-handelsregister-list li, .contact-handelsregister .contact-handelsregister-list p {
margin-bottom: 0; }
.contact-kantoren .ontmoeting-list:before, .contact-kantoren .ontmoeting-list:after {
content: ' ';
display: table; }
.contact-kantoren .ontmoeting-list:after {
clear: both; }
.contact-kantoren .column {
float: left;
width: 33.3333%; }
.contact-kantoren .link-arrow-dark-blue {
clear: both;
float: left;
margin: 0.25rem 0 0; }
.contact-kantoren .link-arrow-dark-blue:first-child {
margin-top: 0; }
.telefoonnummer {
color: #002c5e;
font-size: 1.9em;
font-weight: 600;
margin-bottom: 0;
margin: 0.4375rem 0;
display: inline-block;
/**
* font-size becomes normal between breakpoint NORMAL and LARGE.
* in order to enable the phone number to be put in one line in small grids
* (example can be found in side bar of XBRL form)
*/ }
@media only screen and (min-width: 641px) {
.telefoonnummer--resizable {
font-size: 1.2em; } }
@media only screen and (min-width: 961px) {
.telefoonnummer--resizable {
font-size: 1.9em; } }
.contact-keuzemenu {
color: #002c5e; }
.contact-keuzemenu p {
margin-bottom: 0.25rem; }
.contact-keuzemenu ol {
list-style: none;
padding: 0; }
.contact-keuzemenu ol li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.contact-keuzemenu li {
margin-bottom: 0.5rem;
overflow: hidden; }
.contact-keuzemenu .number {
background-color: #002c5e;
border-radius: 0.5rem;
color: #ffffff;
float: left;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.75rem;
margin: 0 0.5rem 0 0.25rem;
text-align: center;
width: 1.75rem; }
.contact-keuzemenu .number + p {
overflow: hidden;
padding-top: 0.3125rem; }
.contact-form .order-notice {
background: url(/includes/img/icon-information-yellow.png) no-repeat;
background-size: 1.5rem;
font-style: italic;
min-height: 1.5rem;
padding-left: 2.25rem; }
.contact-form .provincie {
display: none; }
.contact-form .relatienummer {
display: none; }
.contact-form-faq-block {
display: none; }
.contact-card {
display: inline-block;
margin-bottom: 1.25rem;
overflow: hidden;
padding: 2.5rem;
background-color: #8BC792;
border-radius: 0.3125rem;
text-align: center;
/**
* Block quote
*/ }
.contact-card p {
margin-bottom: 0 !important; }
@media only screen and (min-width: 481px) {
.contact-card {
margin-bottom: 0; } }
.contact-card__block-quote {
margin-bottom: 1.25rem;
font-size: 1.5rem;
font-weight: 300; }
@media only screen and (min-width: 641px) {
.contact-card__block-quote {
font-size: 1.5em; } }
.toegangscode-aanvragen .company,
.toegangscode-aanvragen .person,
.toegangscode-aanvragen .company-foreign,
.toegangscode-aanvragen .person-melding,
.toegangscode-aanvragen .person-email,
.toegangscode-aanvragen .person-address,
.toegangscode-aanvragen .iban,
.toegangscode-opvragen .company,
.toegangscode-opvragen .person,
.toegangscode-opvragen .company-foreign,
.toegangscode-opvragen .person-melding,
.toegangscode-opvragen .person-email,
.toegangscode-opvragen .person-address,
.toegangscode-opvragen .iban {
display: none;
margin-bottom: 0; }
.toegangscode-aanvragen .person-street-city.show .address-fields,
.toegangscode-opvragen .person-street-city.show .address-fields {
display: block; }
.toegangscode-aanvragen .betaalmethode,
.toegangscode-opvragen .betaalmethode {
float: left;
width: 50%; }
.toegangscode-aanvragen .betaalmethode ul,
.toegangscode-opvragen .betaalmethode ul {
margin-left: 1.875rem; }
.toegangscode-aanvragen .nav,
.toegangscode-opvragen .nav {
margin-bottom: 0; }
.toegangscode-aanvragen .nav:before, .toegangscode-aanvragen .nav:after,
.toegangscode-opvragen .nav:before,
.toegangscode-opvragen .nav:after {
content: ' ';
display: table; }
.toegangscode-aanvragen .nav:after,
.toegangscode-opvragen .nav:after {
clear: both; }
.toegangscode-aanvragen .nav .button-lightblue,
.toegangscode-aanvragen .nav .button-yellow,
.toegangscode-opvragen .nav .button-lightblue,
.toegangscode-opvragen .nav .button-yellow {
margin-right: 1rem; }
#bedrijfsnaamCheckResults {
margin-top: 1.25rem; }
#bedrijfsnaamCheckResults .site-search {
margin-bottom: 0; }
#bedrijfsnaamCheckResults .resultsList {
list-style: none;
padding: 0; }
#bedrijfsnaamCheckResults .resultsList li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
#bedrijfsnaamCheckResults .resultsList li {
padding-bottom: 1.25rem;
border-bottom: 1px solid #ccdef4; }
#bedrijfsnaamCheckResults .resultsList li h3 {
margin-bottom: 0.625rem; }
#bedrijfsnaamCheckResults .resultsList li .status {
float: right;
color: #9b9b9b; }
#bedrijfsnaamCheckResults .paging {
margin-bottom: 0;
margin-top: 1.25rem;
padding-bottom: 0; }
.recaptcha_input_area {
padding-bottom: 0 !important; }
#recaptcha_response_field {
margin-bottom: 0.1875rem !important; }
.lei-payment-method {
margin-top: -0.75rem;
padding-left: 1.875rem; }
.lei-payment-method .explanation {
margin-bottom: 0.3125rem; }
.lei-payment-method div {
display: none; }
.lei-search {
position: relative; }
.lei-search .input {
background-color: #ffffff;
border: 0;
box-shadow: 0 0 0.1875rem 0 rgba(40, 169, 226, 0.35);
font-size: 3rem;
font-weight: 600;
height: 4rem;
line-height: 4rem;
margin-bottom: 1rem;
padding: 0 1.25rem;
width: 100%; }
.lei-search .input.placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.lei-search .input::-webkit-input-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.lei-search .input:-moz-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.lei-search .input::-moz-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.lei-search .input:-ms-input-placeholder {
color: #7a7a7a;
font-weight: 300;
opacity: 1; }
.lei-search .submit-button {
background: transparent url(/includes/img/icon-zoeken-dark-blue.png) no-repeat;
background-size: 1.5rem;
border: 0;
height: 1.5rem;
overflow: hidden;
position: absolute;
right: 1.125rem;
text-indent: 100%;
top: 1.125rem;
width: 1.5rem; }
.lei-search .block {
padding: 0; }
.lei-search th {
padding: 0 !important;
white-space: nowrap; }
.lei-search th a {
color: #ffffff;
display: block;
padding: 0.5rem 0.625rem;
text-decoration: none; }
.lei-search th a.sort-up:after, .lei-search th a.sort-down:after {
background-size: 0.75rem 0.5rem;
content: '';
display: inline-block;
margin-left: 0.375rem;
height: 0.5rem;
width: 0.75rem; }
.lei-search th a.sort-up:after {
background-image: url(/includes/img/icon-arrow-up-white.png);
margin-bottom: 0.125rem; }
.lei-search th a.sort-down:after {
background-image: url(/includes/img/icon-arrow-down-white.png);
margin-bottom: 0.0625rem; }
.lei-search th a:hover {
color: #ffcc33; }
.lei-search .paging {
list-style: none;
padding: 0;
background-color: #ffffff;
padding: 0 1.25rem 1rem;
margin-bottom: 2.5rem;
background-color: transparent;
padding: 0.5rem 0 0; }
.lei-search .paging li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.lei-search .paging li {
display: inline-block;
height: 1.9375rem;
line-height: 1.9375rem; }
.lei-search .paging li.active a {
background-color: #00526E;
color: #fff; }
.lei-search .paging a {
color: #00526E;
display: block;
padding: 0 0.5rem;
text-decoration: none; }
.lei-search .paging a:hover {
background-color: #00526E;
color: #fff; }
.lei-search .paging .vorige {
background: #ffffff url(/includes/img/button-disc-prev.png) no-repeat;
padding-left: 2.5rem;
padding-right: 0.5rem; }
.lei-search .paging .vorige a {
margin-left: -2.5rem;
margin-right: -0.5rem;
padding-left: 2.5rem; }
.lei-search .paging .vorige a:hover {
background-color: transparent;
color: #00526E; }
.lei-search .paging .vorige:hover {
background-position: left 100%; }
.lei-search .paging .vorige.not-active {
opacity: 0.3; }
.lei-search .paging .vorige.not-active:hover {
background-position: left top; }
.lei-search .paging .volgende {
background: #ffffff url(/includes/img/button-disc-next.png) right top no-repeat;
padding-left: 0.5rem;
padding-right: 2.375rem; }
.lei-search .paging .volgende a {
margin-left: -0.5rem;
margin-right: -2.375rem;
padding-right: 2.375rem; }
.lei-search .paging .volgende a:hover {
background-color: transparent;
color: #00526E; }
.lei-search .paging .volgende:hover {
background-position: right 100%; }
.lei-search .paging .volgende.not-active {
opacity: 0.3; }
.lei-search .paging .volgende.not-active:hover {
background-position: right top; }
.lei-search .paging .vorige,
.lei-search .paging .volgende {
background-color: transparent; }
.instructions__step {
margin-top: 30px; }
.instructions__step__step:before {
position: absolute;
left: 0;
width: 65px;
height: 65px;
margin-left: 20px;
content: ""; }
.instructions__step__step:after {
position: absolute;
left: 0;
width: 45px;
height: 55px;
margin-left: 7px;
content: ""; }
.instructions__step__step--print:before {
background: url(/includes/img/icon-print-2.png);
background-repeat: no-repeat; }
.instructions__step__step--print:after {
background: url(/includes/img/number1.png);
background-repeat: no-repeat;
margin-top: -70px; }
.instructions__step__step--signature:before {
background: url(/includes/img/icon-signature.png);
background-repeat: no-repeat; }
.instructions__step__step--signature:after {
background: url(/includes/img/number1.png);
background-repeat: no-repeat;
margin-top: -120px; }
.instructions__step__step--attachments:before {
background: url(/includes/img/icon-attachment.png);
background-repeat: no-repeat; }
.instructions__step__step--attachments:after {
background: url(/includes/img/number1.png);
background-repeat: no-repeat;
margin-top: -165px; }
.instructions__step__step--send:before {
background: url(/includes/img/icon-sendfile.png);
background-repeat: no-repeat; }
.instructions__step__step--send:after {
background: url(/includes/img/number1.png);
background-repeat: no-repeat;
margin-top: -45px; }
.instructions__step__list--ordered {
margin-top: 30px;
margin-left: 50px; }
/**
* _handelsregister-products.scss
*
* Original name _handelsregister-products-print.scss
* This file is used for media screen as well as for media print
*
*/
.concernrelaties-legend {
list-style: none;
padding: 0;
margin: 1rem 0; }
.concernrelaties-legend:before, .concernrelaties-legend:after {
content: ' ';
display: table; }
.concernrelaties-legend:after {
clear: both; }
.concernrelaties-legend li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.concernrelaties-legend li {
float: left;
margin-right: 3.125rem; }
.concernrelaties-legend p {
color: #002c5e;
font-weight: 300;
margin: 0; }
.handelsregister-concernrelaties-legend {
list-style: none;
padding: 0;
display: none;
margin: 1rem 0; }
.handelsregister-concernrelaties-legend:before, .handelsregister-concernrelaties-legend:after {
content: ' ';
display: table; }
.handelsregister-concernrelaties-legend:after {
clear: both; }
.handelsregister-concernrelaties-legend li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.handelsregister-concernrelaties-legend li {
float: left;
margin-right: 3.125rem; }
.handelsregister-concernrelaties-legend p {
color: #002c5e;
font-weight: 300;
margin: 0; }
#handelsregister-product em {
font-style: normal; }
#handelsregister-product .hrmain h1 {
display: none; }
#handelsregister-product .hrmain colgroup,
#handelsregister-product .hrmain .knpsml {
display: none; }
#handelsregister-product .hrmain table:first-child .paginatitel {
display: none; }
#handelsregister-product .hrmain table:first-child .paginatitel ~ td {
display: none; }
#handelsregister-product .hrmain table:first-child + table tr:first-child td:before {
border-top: 1px dotted #000000;
content: '';
display: block;
height: 1px;
margin-bottom: 1rem; }
#handelsregister-product .hrmain table:first-child + table tr:last-child td:after {
border-top: 1px dotted #000000;
content: '';
display: block;
height: 1px;
margin-top: 0.5rem; }
#handelsregister-product .hrmain .red {
color: #cc0000; }
#handelsregister-product .hrmain .rij {
border-right: 1.25rem solid transparent;
width: 15rem; }
#handelsregister-product .hrmain .rij + td {
width: 41.25rem; }
#handelsregister-product.handelsregister-jaarrekening b,
#handelsregister-product .handelsregister-jaarrekening b {
font-weight: 700; }
#handelsregister-product.handelsregister-jaarrekening table:first-child tr:first-child,
#handelsregister-product.handelsregister-jaarrekening table:first-child tr:nth-child(2),
#handelsregister-product.handelsregister-jaarrekening table:first-child tr:nth-child(3),
#handelsregister-product .handelsregister-jaarrekening table:first-child tr:first-child,
#handelsregister-product .handelsregister-jaarrekening table:first-child tr:nth-child(2),
#handelsregister-product .handelsregister-jaarrekening table:first-child tr:nth-child(3) {
display: none; }
#handelsregister-product.handelsregister-jaarrekening .currency-switcher,
#handelsregister-product .handelsregister-jaarrekening .currency-switcher {
margin-top: 1.5rem; }
#handelsregister-product.handelsregister-jaarrekening hr,
#handelsregister-product .handelsregister-jaarrekening hr {
border: 0;
border-top: 0.0625rem solid #dcdcdc;
height: 0;
overflow: hidden; }
#handelsregister-product.handelsregister-jaarrekening .seperator,
#handelsregister-product .handelsregister-jaarrekening .seperator {
border-top: 1px dotted #000000;
margin-top: 0.5rem;
width: 100%; }
#handelsregister-product.handelsregister-historie .tabelheader,
#handelsregister-product .handelsregister-historie .tabelheader, #handelsregister-product.handelsregister-deponeringen .tabelheader,
#handelsregister-product .handelsregister-deponeringen .tabelheader {
font-weight: 600;
padding: 0.625rem 0; }
#handelsregister-product.handelsregister-historie .tabelrij,
#handelsregister-product .handelsregister-historie .tabelrij, #handelsregister-product.handelsregister-deponeringen .tabelrij,
#handelsregister-product .handelsregister-deponeringen .tabelrij {
border-right: 1.25rem solid transparent;
width: 15rem; }
#handelsregister-product.handelsregister-historie .tabelrij + td,
#handelsregister-product .handelsregister-historie .tabelrij + td, #handelsregister-product.handelsregister-deponeringen .tabelrij + td,
#handelsregister-product .handelsregister-deponeringen .tabelrij + td {
width: 41.25rem; }
#handelsregister-product.handelsregister-historie hr,
#handelsregister-product .handelsregister-historie hr, #handelsregister-product.handelsregister-deponeringen hr,
#handelsregister-product .handelsregister-deponeringen hr {
border: 0;
border-top: 1px dotted #000000;
height: 0;
overflow: hidden;
margin: 0.5rem 0 1rem; }
#handelsregister-product.handelsregister-historie .buttons,
#handelsregister-product .handelsregister-historie .buttons, #handelsregister-product.handelsregister-deponeringen .buttons,
#handelsregister-product .handelsregister-deponeringen .buttons {
padding-top: 1rem;
text-align: right; }
#handelsregister-product.handelsregister-historie .next-page,
#handelsregister-product .handelsregister-historie .next-page, #handelsregister-product.handelsregister-deponeringen .next-page,
#handelsregister-product .handelsregister-deponeringen .next-page {
margin-left: 0.5rem; }
#handelsregister-product.handelsregister-historie td:first-child,
#handelsregister-product .handelsregister-historie td:first-child, #handelsregister-product.handelsregister-deponeringen td:first-child,
#handelsregister-product .handelsregister-deponeringen td:first-child {
border-right: 1.25rem solid transparent;
width: 15rem; }
#handelsregister-product.handelsregister-historie td:first-child + td,
#handelsregister-product .handelsregister-historie td:first-child + td, #handelsregister-product.handelsregister-deponeringen td:first-child + td,
#handelsregister-product .handelsregister-deponeringen td:first-child + td {
width: 41.25rem; }
#handelsregister-product.handelsregister-historie .dossier-link,
#handelsregister-product .handelsregister-historie .dossier-link, #handelsregister-product.handelsregister-deponeringen .dossier-link,
#handelsregister-product .handelsregister-deponeringen .dossier-link {
color: #065ca9;
font-weight: 600;
text-decoration: none; }
#handelsregister-product.handelsregister-historie .dossier-link:hover,
#handelsregister-product .handelsregister-historie .dossier-link:hover, #handelsregister-product.handelsregister-deponeringen .dossier-link:hover,
#handelsregister-product .handelsregister-deponeringen .dossier-link:hover {
text-decoration: underline; }
#handelsregister-product.handelsregister-concernrelaties .hrmain > hr,
#handelsregister-product.handelsregister-concernrelaties .hrmain > br,
#handelsregister-product.handelsregister-concernrelaties .hrmain .rpijl,
#handelsregister-product.handelsregister-concernrelaties .hrmain .rpijl + span.spacer,
#handelsregister-product.handelsregister-concernrelaties .hrmain > table[width="100%"] .knpsml,
#handelsregister-product.handelsregister-concernrelaties .hrmain > table[width="90%"],
#handelsregister-product.handelsregister-concernrelaties .hrmain .bijschrift,
#handelsregister-product .handelsregister-concernrelaties .hrmain > hr,
#handelsregister-product .handelsregister-concernrelaties .hrmain > br,
#handelsregister-product .handelsregister-concernrelaties .hrmain .rpijl,
#handelsregister-product .handelsregister-concernrelaties .hrmain .rpijl + span.spacer,
#handelsregister-product .handelsregister-concernrelaties .hrmain > table[width="100%"] .knpsml,
#handelsregister-product .handelsregister-concernrelaties .hrmain > table[width="90%"],
#handelsregister-product .handelsregister-concernrelaties .hrmain .bijschrift {
display: none; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .tabelkolom,
#handelsregister-product .handelsregister-concernrelaties .hrmain .tabelkolom {
font-weight: 600;
padding-bottom: 0.5rem; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .rpijl + a,
#handelsregister-product.handelsregister-concernrelaties .hrmain .rpijl + span.spacer + a,
#handelsregister-product .handelsregister-concernrelaties .hrmain .rpijl + a,
#handelsregister-product .handelsregister-concernrelaties .hrmain .rpijl + span.spacer + a {
font-weight: 600; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .rpijl + span.spacer + a,
#handelsregister-product .handelsregister-concernrelaties .hrmain .rpijl + span.spacer + a {
margin-left: 0.625rem; }
#handelsregister-product.handelsregister-concernrelaties .hrmain a,
#handelsregister-product .handelsregister-concernrelaties .hrmain a {
color: #065ca9;
text-decoration: none; }
#handelsregister-product.handelsregister-concernrelaties .hrmain a:hover,
#handelsregister-product .handelsregister-concernrelaties .hrmain a:hover {
text-decoration: underline; }
#handelsregister-product.handelsregister-concernrelaties .hrmain td,
#handelsregister-product .handelsregister-concernrelaties .hrmain td {
height: auto;
padding-top: 0.0625rem; }
#handelsregister-product.handelsregister-concernrelaties .hrmain td a,
#handelsregister-product .handelsregister-concernrelaties .hrmain td a {
height: 1.6875rem;
line-height: 1.6875rem; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .baseline td:before, #handelsregister-product.handelsregister-concernrelaties .hrmain .baseline td:after,
#handelsregister-product .handelsregister-concernrelaties .hrmain .baseline td:before,
#handelsregister-product .handelsregister-concernrelaties .hrmain .baseline td:after {
content: ' ';
display: table; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .baseline td:after,
#handelsregister-product .handelsregister-concernrelaties .hrmain .baseline td:after {
clear: both; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .spacer,
#handelsregister-product .handelsregister-concernrelaties .hrmain .spacer {
float: left;
height: 1.6875rem;
margin-right: 0.1875rem;
position: relative;
width: 1.3125rem; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .tstuk,
#handelsregister-product .handelsregister-concernrelaties .hrmain .tstuk {
float: left;
height: 1.6875rem;
margin-right: 0.75rem;
position: relative;
width: 1.3125rem; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .tstuk:before,
#handelsregister-product .handelsregister-concernrelaties .hrmain .tstuk:before {
border-left: 1px dotted #000000;
content: '';
float: left;
height: 100%;
margin-left: 0.8125rem;
width: 0; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .tstuk:after,
#handelsregister-product .handelsregister-concernrelaties .hrmain .tstuk:after {
border-top: 1px dotted #000000;
bottom: 0.875rem;
content: '';
position: absolute;
right: -0.5rem;
width: 0.625rem; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .vertical,
#handelsregister-product .handelsregister-concernrelaties .hrmain .vertical {
float: left;
height: 1.6875rem;
width: 1.3125rem; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .vertical:before,
#handelsregister-product .handelsregister-concernrelaties .hrmain .vertical:before {
border-left: 1px dotted #000000;
content: '';
float: left;
height: 100%;
margin-left: 0.8125rem;
width: 0; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .corner,
#handelsregister-product .handelsregister-concernrelaties .hrmain .corner {
float: left;
height: 1.6875rem;
margin-right: 0.75rem;
position: relative;
width: 1.3125rem; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .corner:before,
#handelsregister-product .handelsregister-concernrelaties .hrmain .corner:before {
border-left: 1px dotted #000000;
content: '';
float: left;
height: 0.75rem;
margin-left: 0.8125rem;
width: 0; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .corner:after,
#handelsregister-product .handelsregister-concernrelaties .hrmain .corner:after {
border-top: 1px dotted #000000;
bottom: 0.875rem;
content: '';
position: absolute;
right: -0.5rem;
width: 0.625rem; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .corner-top:before,
#handelsregister-product .handelsregister-concernrelaties .hrmain .corner-top:before {
border-left: 1px dotted #000000;
content: '';
float: left;
height: 0.75rem;
margin-top: 1rem;
margin-left: 0.8125rem;
width: 0; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .icon, #handelsregister-product.handelsregister-concernrelaties .hrmain .link--action, #handelsregister-product.handelsregister-concernrelaties .hrmain .link--add, #handelsregister-product.handelsregister-concernrelaties .hrmain .link--delete, #handelsregister-product.handelsregister-concernrelaties .hrmain .link--remove, #handelsregister-product.handelsregister-concernrelaties .hrmain .link--payment-preference, #handelsregister-product.handelsregister-concernrelaties .hrmain .account-manager__sub a, .account-manager__sub #handelsregister-product.handelsregister-concernrelaties .hrmain a,
#handelsregister-product .handelsregister-concernrelaties .hrmain .icon,
#handelsregister-product .handelsregister-concernrelaties .hrmain .link--action,
#handelsregister-product .handelsregister-concernrelaties .hrmain .link--add,
#handelsregister-product .handelsregister-concernrelaties .hrmain .link--delete,
#handelsregister-product .handelsregister-concernrelaties .hrmain .link--remove,
#handelsregister-product .handelsregister-concernrelaties .hrmain .link--payment-preference,
#handelsregister-product .handelsregister-concernrelaties .hrmain .account-manager__sub a,
.account-manager__sub #handelsregister-product .handelsregister-concernrelaties .hrmain a {
float: left;
height: 1.6875rem;
margin-right: 0.5rem; }
#handelsregister-product.handelsregister-concernrelaties .hrmain .icon img, #handelsregister-product.handelsregister-concernrelaties .hrmain .link--action img, #handelsregister-product.handelsregister-concernrelaties .hrmain .link--add img, #handelsregister-product.handelsregister-concernrelaties .hrmain .link--delete img, #handelsregister-product.handelsregister-concernrelaties .hrmain .link--remove img, #handelsregister-product.handelsregister-concernrelaties .hrmain .link--payment-preference img, #handelsregister-product.handelsregister-concernrelaties .hrmain .account-manager__sub a img, .account-manager__sub #handelsregister-product.handelsregister-concernrelaties .hrmain a img,
#handelsregister-product .handelsregister-concernrelaties .hrmain .icon img,
#handelsregister-product .handelsregister-concernrelaties .hrmain .link--action img,
#handelsregister-product .handelsregister-concernrelaties .hrmain .link--add img,
#handelsregister-product .handelsregister-concernrelaties .hrmain .link--delete img,
#handelsregister-product .handelsregister-concernrelaties .hrmain .link--remove img,
#handelsregister-product .handelsregister-concernrelaties .hrmain .link--payment-preference img,
#handelsregister-product .handelsregister-concernrelaties .hrmain .account-manager__sub a img,
.account-manager__sub #handelsregister-product .handelsregister-concernrelaties .hrmain a img {
position: relative;
top: 0.125rem; }
#handelsregister-product.handelsregister-bedrijfsprofiel h1 {
display: none; }
#handelsregister-product.handelsregister-bedrijfsprofiel .help {
display: none; }
#handelsregister-product.handelsregister-bedrijfsprofiel .rechts {
display: none; }
#uittrekselWrapper table tr:first-child {
display: none; }
#uittrekselWrapper table tr:first-child + tr {
display: none; }
#uittrekselWrapper table tr:first-child + tr + tr {
display: none; }
#uittrekselWrapper td > table > tbody > tr {
display: table-row !important; }
#uittrekselWrapper .label {
border-right: 1.25rem solid transparent; }
#uittrekselWrapper .label p b {
font-weight: 700; }
/**
* _handelsregister-products-screen.scss
*
* Original name _handelsregister-products.scss
* This file is only used for media screen
*
* #TODO: remove this file when the iframe is removed from product page in production. Other file _handelsregister-products-screen-no-iframe.scss will be used thereafter
*/
.handelsregister-product-title {
display: none;
padding: 0.5rem 0 1.25rem 0; }
.handelsregister-product-title:before, .handelsregister-product-title:after {
content: ' ';
display: table; }
.handelsregister-product-title:after {
clear: both; }
.handelsregister-product-title h1 {
font-size: 1.5rem;
font-weight: 400; }
.handelsregister-product-title .product-creation-date {
color: #002c5e; }
.handelsregister-product-title .help-toggle {
color: #065ca9;
cursor: pointer;
float: right;
font-weight: 400;
margin-right: -12.5rem; }
.handelsregister-product-title .help-toggle:hover {
color: #002c5e;
text-decoration: underline; }
.handelsregister-product-title .help-toggle.is-active span {
display: none; }
.handelsregister-product-title .help-toggle.is-active span + span {
display: block; }
.handelsregister-product-title .help-toggle span + span {
display: none; }
.handelsregister-product-help {
color: #002c5e;
display: none;
font-size: 0.875rem; }
#handelsregister-product {
background-color: #ffffff;
padding: 1.25rem; }
@media only screen and (min-width: 481px) {
#handelsregister-product {
border: 0.0625rem solid #dcdcdc; } }
.handelsregister-subproduct {
margin-bottom: 2.5rem; }
.handelsregister-product-cross-up-sell {
display: none;
margin-bottom: 2.5rem; }
.handelsregister-product-cross-up-sell h2 + .block {
margin-top: 1rem; }
.handelsregister-product-cross-up-sell .block + h2 {
margin-top: 2.5rem; }
.handelsregister-bedrijfsprofiel h2 {
margin-bottom: 1.25rem; }
#uittrekselWrapper .label {
border-right: 1.25rem solid transparent;
display: block;
width: 100%;
vertical-align: top; }
@media only screen and (min-width: 641px) {
#uittrekselWrapper .label {
width: 30%;
display: table-cell; } }
#uittrekselWrapper .waarde {
display: block;
width: 100%;
border-bottom: 0.625rem solid transparent;
font-weight: 300; }
@media only screen and (min-width: 641px) {
#uittrekselWrapper .waarde {
width: auto;
display: table-cell;
border-bottom: none;
font-weight: 400; } }
#uittrekselWrapper table {
border-collapse: collapse; }
#uittrekselWrapper .label.kop {
border-bottom: 0.9375rem solid transparent;
font-weight: 700; }
@media only screen and (min-width: 641px) {
#uittrekselWrapper .label.kop {
border-bottom: none; } }
@media only screen and (min-width: 641px) {
#uittrekselWrapper .waarde table td {
display: table-cell;
width: auto; } }
#uittrekselWrapper .label .lijn {
border: none; }
@media only screen and (min-width: 641px) {
#uittrekselWrapper .label .lijn {
border-bottom: 1px dotted #000000; } }
#uittrekselWrapper .lijn {
border-bottom: 1px dotted #000000;
height: 0.5rem;
margin: 0 0 0.625rem; }
@media only screen and (min-width: 641px) {
#uittrekselWrapper .lijn {
margin: 0.5rem 0 0.625rem;
height: 1rem; } }
#uittrekselWrapper .legeregel .legeregel {
display: block;
height: 5px; }
@media only screen and (min-width: 641px) {
#uittrekselWrapper .legeregel .legeregel {
display: table-cell; } }
#uittrekselWrapper .load-more {
position: relative;
padding: 1rem 0;
cursor: pointer; }
#uittrekselWrapper .load-more:before {
content: 'Minder tonen';
padding-left: 1.25rem;
color: #00526E;
text-decoration: underline;
font-weight: 600; }
#uittrekselWrapper .load-more:after {
content: '';
display: inline-block;
position: absolute;
right: 0.625rem;
top: 1rem;
background-repeat: no-repeat;
background-size: 0.75rem 1.25rem;
width: 1.1875rem;
height: 2rem;
background-image: url("/includes/img/icons-svg/icon-arrow_up-light-blue.svg"); }
#uittrekselWrapper .load-more--collapsed:before {
content: 'Meer tonen';
padding-left: 1.25rem; }
#uittrekselWrapper .load-more--collapsed:after {
content: '';
display: inline-block;
position: absolute;
right: 0.625rem;
top: 1rem;
background-repeat: no-repeat;
background-size: 0.75rem 1.25rem;
width: 1.1875rem;
height: 2rem;
background-image: url("/includes/img/icons-svg/icon-arrow_down-light-blue.svg"); }
#uittrekselWrapper .show-row {
-webkit-animation: fadeInColor 2s;
animation: fadeInColor 2s; }
@-webkit-keyframes fadeInColor {
from {
color: #f8f8f8; }
to {
color: #000000; } }
@keyframes fadeInColor {
from {
color: #f8f8f8; }
to {
color: #000000; } }
#uittrekselWrapper .more-item {
background-color: #f2f2f2; }
#uittrekselWrapper .load-more {
height: 3.25rem; }
#uittrekselWrapper .more-item td p {
padding-left: 1.25rem; }
#uittrekselWrapper .legeregel.more-item .load-more {
border-top: solid 1rem #ffffff; }
#uittrekselWrapper .last-content-item p {
padding-bottom: 1rem; }
/**
* _handelsregister-products-screen.scss
*
* Original name _handelsregister-products.scss
* This file is only used for media screen
*
*/
.handelsregister-product-title-no-iframe {
padding: 0.5rem 0 1.25rem 0; }
.handelsregister-product-title-no-iframe:before, .handelsregister-product-title-no-iframe:after {
content: ' ';
display: table; }
.handelsregister-product-title-no-iframe:after {
clear: both; }
.handelsregister-product-title-no-iframe h1 {
font-size: 1.5rem;
font-weight: 400; }
.handelsregister-product-title-no-iframe .product-creation-date {
color: #002c5e; }
.handelsregister-product-title-no-iframe .help-toggle {
color: #065ca9;
cursor: pointer;
float: right;
font-weight: 400;
margin-right: -12.5rem; }
.handelsregister-product-title-no-iframe .help-toggle:hover {
color: #002c5e;
text-decoration: underline; }
.handelsregister-product-title-no-iframe .help-toggle.is-active span {
display: none; }
.handelsregister-product-title-no-iframe .help-toggle.is-active span + span {
display: block; }
.handelsregister-product-title-no-iframe .help-toggle span + span {
display: none; }
.handelsregister-product-help {
color: #002c5e;
display: none;
font-size: 0.875rem; }
#handelsregister-product {
background-color: #ffffff;
padding: 1.25rem;
margin-bottom: 1.25rem; }
@media only screen and (min-width: 481px) {
#handelsregister-product {
border: 0.0625rem solid #dcdcdc; } }
.handelsregister-subproduct {
margin-bottom: 2.5rem; }
.handelsregister-product-cross-up-sell-no-iframe {
margin-bottom: 2.5rem; }
.handelsregister-product-cross-up-sell-no-iframe h2 + .block {
margin-top: 1rem; }
.handelsregister-product-cross-up-sell-no-iframe .block + h2 {
margin-top: 2.5rem; }
.handelsregister-bedrijfsprofiel h2 {
margin-bottom: 1.25rem; }
#uittrekselWrapper .label {
border-right: 1.25rem solid transparent;
display: block;
width: 100%;
vertical-align: top; }
@media only screen and (min-width: 641px) {
#uittrekselWrapper .label {
width: 30%;
display: table-cell; } }
#uittrekselWrapper .waarde {
display: block;
width: 100%;
border-bottom: 0.625rem solid transparent;
font-weight: 300; }
@media only screen and (min-width: 641px) {
#uittrekselWrapper .waarde {
width: auto;
display: table-cell;
border-bottom: none;
font-weight: 400; } }
#uittrekselWrapper table {
border-collapse: collapse; }
#uittrekselWrapper .label.kop {
border-bottom: 0.9375rem solid transparent;
font-weight: 700; }
@media only screen and (min-width: 641px) {
#uittrekselWrapper .label.kop {
border-bottom: none; } }
@media only screen and (min-width: 641px) {
#uittrekselWrapper .waarde table td {
display: table-cell;
width: auto; } }
#uittrekselWrapper .label .lijn {
border: none; }
@media only screen and (min-width: 641px) {
#uittrekselWrapper .label .lijn {
border-bottom: 1px dotted #000000; } }
#uittrekselWrapper .lijn {
border-bottom: 1px dotted #000000;
height: 0.5rem;
margin: 0 0 0.625rem; }
@media only screen and (min-width: 641px) {
#uittrekselWrapper .lijn {
margin: 0.5rem 0 0.625rem;
height: 1rem; } }
#uittrekselWrapper .legeregel .legeregel {
display: block;
height: 5px; }
@media only screen and (min-width: 641px) {
#uittrekselWrapper .legeregel .legeregel {
display: table-cell; } }
#uittrekselWrapper .load-more {
position: relative;
padding: 1rem 0;
cursor: pointer; }
#uittrekselWrapper .load-more:before {
content: 'Minder tonen';
padding-left: 1.25rem;
color: #00526E;
text-decoration: underline;
font-weight: 600; }
#uittrekselWrapper .load-more:after {
content: '';
display: inline-block;
position: absolute;
right: 0.625rem;
top: 1rem;
background-repeat: no-repeat;
background-size: 0.75rem 1.25rem;
width: 1.1875rem;
height: 2rem;
background-image: url("/includes/img/icons-svg/icon-arrow_up-light-blue.svg"); }
#uittrekselWrapper .load-more--collapsed:before {
content: 'Meer tonen';
padding-left: 1.25rem; }
#uittrekselWrapper .load-more--collapsed:after {
content: '';
display: inline-block;
position: absolute;
right: 0.625rem;
top: 1rem;
background-repeat: no-repeat;
background-size: 0.75rem 1.25rem;
width: 1.1875rem;
height: 2rem;
background-image: url("/includes/img/icons-svg/icon-arrow_down-light-blue.svg"); }
#uittrekselWrapper .show-row {
-webkit-animation: fadeInColor 2s;
animation: fadeInColor 2s; }
@keyframes fadeInColor {
from {
color: #f8f8f8; }
to {
color: #000000; } }
#uittrekselWrapper .more-item {
background-color: #f2f2f2; }
#uittrekselWrapper .load-more {
height: 3.25rem; }
#uittrekselWrapper .more-item td p {
padding-left: 1.25rem; }
#uittrekselWrapper .legeregel.more-item .load-more {
border-top: solid 1rem #ffffff; }
#uittrekselWrapper .last-content-item p {
padding-bottom: 1rem; }
/*-------------------*\
#SLIDER
\*-------------------*/
/*
* Base styling for the slider
* Using slick.js library
*/
.slider,
.container-slider {
position: relative; }
.slider__buttons {
display: block;
position: relative;
top: 0;
right: 5rem;
width: 100%;
height: 0.0625rem;
z-index: 99;
text-align: right;
margin-bottom: 0rem; }
@media only screen and (min-width: 721px) {
.slider__buttons {
right: 0rem; } }
@media only screen and (min-width: 961px) {
.slider__buttons {
right: -2.5rem; } }
/**
* Navigational arrow buttons (next / prev)
*/
.slider__action-button {
display: inline-block;
height: 2.5rem;
width: 2.5rem;
position: absolute;
padding: 1.25rem;
background: transparent;
border: 0.0625rem solid #002c5e;
border-radius: 0.3125rem;
transition: all 0.15s ease-in-out; }
.slider__action-button:before {
content: '';
display: inline-block;
height: 1.25rem;
width: 1.25rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain; }
.slider__action-button--previous {
right: 1.25rem; }
.slider__action-button--previous:before {
background-image: url(/includes/img/icons-svg/icon-arrow_left.svg); }
.slider__action-button--next {
right: -4.375rem; }
.slider__action-button--next:before {
background-image: url(/includes/img/icons-svg/icon-arrow_right.svg); }
.no-touch {
/* Fix so the hover state does work on no-touch, but doens't on touch enabled ones. See WWWKVKNL-1517 */ }
.no-touch .slider__action-button:hover {
background-color: #002c5e; }
.no-touch .slider__action-button--previous:hover:before {
background-image: url(/includes/img/icons-svg/icon-arrow_left_white.svg); }
.no-touch .slider__action-button--next:hover:before {
background-image: url(/includes/img/icons-svg/icon-arrow_right_white.svg); }
/**
* Slider button styling for $campaign-blue themed rows
*/
.slider__action-button-video {
border: 0.0625rem solid #ffffff; }
.slider__action-button-video:hover {
background-color: #ffffff; }
@media only screen and (min-width: 961px) {
.slider__action-button-video--previous {
left: -4.375rem; } }
.slider__action-button-video--previous:before {
background-image: url(/includes/img/icons-svg/icon-arrow_left_white.svg); }
.slider__action-button-video--previous:hover:before {
background-image: url(/includes/img/icons-svg/icon-arrow-left-custom-blue.svg); }
@media only screen and (min-width: 961px) {
.slider__action-button-video--next {
right: -4.375rem; } }
.slider__action-button-video--next:before {
background-image: url(/includes/img/icons-svg/icon-arrow_right_white.svg); }
.slider__action-button-video--next:hover:before {
background-image: url(/includes/img/icons-svg/icon-arrow-right-custom-blue.svg); }
.no-touch {
/* Fix so the hover state does work on no-touch, but doens't on touch enabled ones. See WWWKVKNL-1517 */ }
.no-touch .slider__action-button-video:hover {
background-color: #ffffff; }
.no-touch .slider__action-button-video--previous:hover:before {
background-image: url(/includes/img/icons-svg/icon-arrow-left-custom-blue.svg); }
.no-touch .slider__action-button-video--next:hover:before {
background-image: url(/includes/img/icons-svg/icon-arrow-right-custom-blue.svg); }
/*-------------------*
#SLICK.JS
\*-------------------*/
/**
* Custom styling for Slick.js slider
* Dot / numbered navigation
*/
.slick-dots {
display: block;
list-style: none;
margin-bottom: 0;
text-align: center; }
.slick-dots li {
display: inline-block;
margin: 0 !important; }
.slick-dots button {
display: block;
height: 2em;
width: 2em;
overflow: hidden;
background: #dcdcdc;
border: 0.75em solid #ffffff;
border-radius: 50%;
text-indent: -999999px;
transition: all 0.15s ease-in-out; }
.slick-dots button:active {
background: #002c5e; }
.slick-active button {
background: #065ca9; }
/**
* Video slide (in combination with .row--blue)
*/
.slide-video {
margin-bottom: 1.25rem;
font-size: 1.125rem; }
@media only screen and (min-width: 641px) {
.slide-video {
margin-bottom: 0; } }
.slide-video__info {
margin-top: 1.25rem; }
@media only screen and (min-width: 641px) {
.slide-video__info {
margin-top: 0; } }
.slide-video__title {
display: block;
margin-bottom: 3.125rem;
font-size: 1.9em; }
@media only screen and (min-width: 641px) {
.slide-video__title {
font-size: 2.8125rem; } }
.slide-video__sub-title {
margin-bottom: 0;
font-size: 1.125rem;
font-weight: 600; }
/**
* Module datepicker
*
* Based on classic.css and classic.date.css
*/
.picker {
font-size: 16px;
text-align: left;
line-height: 1.2;
color: #000000;
position: absolute;
z-index: 10000;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.picker:focus {
outline: none; }
.picker__input {
cursor: default; }
.picker__input--active {
border-color: #545454 !important; }
.picker__holder {
width: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch; }
.picker__holder:focus {
outline: none; }
.picker {
width: 130%; }
.picker__holder {
position: absolute;
background: #ffffff;
border: 1px solid #545454;
border-top-width: 0;
border-bottom-width: 0;
border-radius: 0;
min-width: 176px;
max-width: 22.5rem;
max-height: 0;
opacity: 0;
-webkit-transform: translateY(-1em) perspective(600px) rotateX(10deg);
transform: translateY(-1em) perspective(600px) rotateX(10deg);
transition: opacity 0.15s ease-out,
max-height 0s 0.15s,
border-width 0s 0.15s,
-webkit-transform 0.15s ease-out;
transition: transform 0.15s ease-out,
opacity 0.15s ease-out,
max-height 0s 0.15s,
border-width 0s 0.15s;
transition: transform 0.15s ease-out,
opacity 0.15s ease-out,
max-height 0s 0.15s,
border-width 0s 0.15s,
-webkit-transform 0.15s ease-out; }
/**
* The frame and wrap work together to ensure that
* clicks within the picker don’t reach the holder.
*/
.picker__frame {
padding: 1px; }
.picker__wrap {
margin: -1px; }
.picker--opened .picker__holder {
max-height: 25em;
opacity: 1;
border-top-width: 1px;
border-bottom-width: 1px;
-webkit-transform: translateY(0) perspective(600px) rotateX(0);
transform: translateY(0) perspective(600px) rotateX(0);
transition: opacity 0.15s ease-out,
max-height 0s,
border-width 0s,
-webkit-transform 0.15s ease-out;
transition: transform 0.15s ease-out,
opacity 0.15s ease-out,
max-height 0s,
border-width 0s;
transition: transform 0.15s ease-out,
opacity 0.15s ease-out,
max-height 0s,
border-width 0s,
-webkit-transform 0.15s ease-out;
box-shadow: 0 6px 18px 1px rgba(0, 0, 0, 0.12); }
.picker__input {
margin-bottom: 0; }
.picker__box {
padding: 0 0.625rem; }
.picker__header {
text-align: center;
position: relative;
margin-top: 0.625rem; }
.picker__month,
.picker__year {
font-weight: 500;
display: inline-block;
margin-left: .25em;
margin-right: .25em; }
.picker__year {
color: #999999;
font-size: .8em;
font-style: italic; }
.picker__select--month,
.picker__select--year {
padding: 0.625rem;
height: 3rem;
border: 1px solid #9b9b9b;
background: #ffffff;
vertical-align: middle; }
.picker__select--month:focus,
.picker__select--year:focus {
border-color: #0089ec; }
.picker__select--month {
margin-left: 0.625rem; }
.picker__nav--prev,
.picker__nav--next {
display: none;
position: absolute;
width: 0.625rem;
height: 0.9375rem;
top: 1rem;
cursor: pointer;
background-size: 0.625rem;
background-repeat: no-repeat;
background-position: center; }
@media only screen and (min-width: 320px) {
.picker__nav--prev,
.picker__nav--next {
display: inline-block; } }
.picker__nav--prev {
left: 0;
background-image: url(/includes/img/icons-svg/icon-arrow_left.svg); }
@media only screen and (min-width: 481px) {
.picker__nav--prev {
left: 0.3125rem; } }
.picker__nav--next {
right: 0;
background-image: url(/includes/img/icons-svg/icon-arrow_right.svg); }
@media only screen and (min-width: 481px) {
.picker__nav--next {
right: 0.3125rem; } }
.picker__nav--disabled:hover, .picker__nav--disabled:before, .picker__nav--disabled:before:hover {
cursor: default;
background: none;
border-right-color: #f5f5f5;
border-left-color: #f5f5f5; }
.picker__table {
text-align: center;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed;
font-size: inherit;
width: 100%;
margin-top: .75em;
margin-bottom: .5em; }
/* Override table styling inside .block (@see _base.scss) */
.picker__table[role="grid"] {
margin-bottom: 0.625rem; }
.picker__table tr:first-child td {
border: 0; }
.picker__table tr td:first-child {
border: 0; }
.picker__table th,
.picker__table td {
border: 0; }
.picker__table td {
margin: 0;
padding: 0; }
/**f
* The weekday labels
*/
.picker__weekday,
th.picker__weekday {
width: 14.285714286%;
font-size: 14px;
color: #333333;
font-weight: 800;
background: transparent;
text-align: center; }
th.picker__cell--weekend,
.picker__cell--weekend {
background: #dbe8f7; }
th.picker__cell--weekend .picker__day--outfocus,
.picker__cell--weekend .picker__day--outfocus {
color: #afbac6; }
th.picker__cell--weekend .picker__day--disabled,
.picker--focused th.picker__cell--weekend .picker__day--disabled,
.picker__cell--weekend .picker__day--disabled,
.picker--focused
.picker__cell--weekend .picker__day--disabled {
color: #afbac6; }
.picker__day {
padding: 0.375rem 0;
font-weight: 200;
border: 1px solid transparent;
border-bottom: 1px solid #dcdcdc; }
.picker__day--today {
position: relative; }
.picker__day--today:before {
content: " ";
position: absolute;
top: 2px;
right: 2px;
width: 0;
height: 0;
border-top: 0.5em solid #065ca9;
border-left: .5em solid transparent; }
.picker__day--disabled:before {
border-top-color: #aaaaaa; }
.picker__day--outfocus {
color: #dddddd; }
.picker__day--infocus:hover,
.picker__day--outfocus:hover {
cursor: pointer; }
.picker__day--selected, .picker__day--selected:hover,
.picker--focused .picker__day--selected {
background: #ffab27; }
.picker__day--disabled, .picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
background: #f5f5f5;
border-color: #f5f5f5;
color: #dddddd;
cursor: default; }
/**
* The footer containing the "today", "clear", and "close" buttons.
*/
.picker__footer {
text-align: center; }
.picker__button--today,
.picker__button--clear,
.picker__button--close {
border: 1px solid #ffffff;
background: #ffffff;
font-size: .8em;
padding: .66em 0;
font-weight: bold;
width: 33%;
display: inline-block;
vertical-align: bottom; }
.picker__button--today:hover,
.picker__button--clear:hover,
.picker__button--close:hover {
cursor: pointer;
color: #000000;
background: #b1dcfb;
border-bottom-color: #b1dcfb; }
.picker__button--today:focus,
.picker__button--clear:focus,
.picker__button--close:focus {
background: #b1dcfb;
border-color: #0089ec;
outline: none; }
.picker__button--today:before,
.picker__button--clear:before,
.picker__button--close:before {
position: relative;
display: inline-block;
height: 0; }
.picker__button--today:before,
.picker__button--clear:before {
content: " ";
margin-right: .45em; }
.picker__button--today:before {
top: -0.05em;
width: 0;
border-top: 0.66em solid #0059bc; }
.picker__button--today[disabled], .picker__button--today[disabled]:hover {
background: #f5f5f5;
border-color: #f5f5f5;
color: #dddddd;
cursor: default; }
.picker__button--today[disabled]:before {
border-top-color: #aaaaaa; }
.picker__button--clear:before {
top: -0.25em;
width: .66em;
border-top: 3px solid #ee2200; }
.picker__button--close:before {
content: "\D7";
top: -0.1em;
vertical-align: top;
font-size: 1.1em;
margin-right: .35em;
color: #777777; }
.picker__wrapper {
width: 12.5rem;
position: relative;
margin-left: 0;
padding: 0 0.625rem 0 0; }
.picker__wrapper .picker__input {
margin: 0 0 1.25rem 0;
border: 0.0625rem solid #bebebe;
border-radius: 0.125rem; }
.picker__wrapper--single {
width: 12.5rem; }
.picker__wrapper--single .calendar-icon {
bottom: 0; }
/**
* Calendar icon
*/
.calendar-icon {
position: absolute;
display: block;
right: 0.625rem;
bottom: 1.25rem;
top: 0;
height: 3.125rem;
width: 3.125rem;
background-position: center center;
background-repeat: no-repeat;
background-color: #00526E;
border-radius: 0 0.125rem 0.125rem 0;
cursor: pointer;
background-image: url("/includes/img/svg/compressed/icon-datepicker.svg"); }
.calendar-icon:hover {
background-color: #002c5e; }
/**
* Module popup
* general popup solution.
* contains:
* - popup heading
* - popup close
* - generic class popup body
*
*/
.popup {
position: absolute;
width: auto;
height: auto;
overflow-y: scroll;
overflow-x: hidden;
background-color: #ffffff;
padding: 1.25rem;
box-shadow: -3px -1px 7px -1px #ccc;
border: 1px solid #ccc;
display: none;
/**
* state class is-active
* takes care of the possible transitions on popup toggle
*/ }
.popup.is-active {
display: block; }
@media only screen and (min-height: 800px) {
.popup {
overflow-y: scroll; } }
/**
* Element popup__heading
* popup heading
*/
.popup__heading {
font-size: 1.2em;
font-weight: 600;
display: inline-block;
line-height: 27px !important; }
/**
* Element popup__close
* popup close button
*/
.popup__close {
float: right;
border: none;
background-color: transparent;
position: relative;
top: -1px;
left: 4px; }
.popup__close:hover .icons--icon-close {
stroke: #00526E; }
/**
* Element arrow-small
* small triangle to indicate the invoker
*/
.popup__arrow-small:before {
position: absolute;
content: '';
display: block;
top: -0.625rem;
right: 0.9375rem;
z-index: 101;
border-left: 0.625rem solid transparent;
border-right: 0.625rem solid transparent;
border-bottom: 0.625rem solid #ffffff; }
.popup__arrow-small:after {
position: absolute;
content: '';
display: block;
top: -0.6875rem;
right: 0.9375rem;
z-index: 99;
border-left: 0.625rem solid transparent;
border-right: 0.625rem solid transparent;
border-bottom: 0.625rem solid #9b9b9b; }
.popup__body .settings-link {
color: #4a90e2;
text-decoration: underline;
padding-left: 1.875rem;
margin-top: 0; }
.popup__body .settings-link:hover {
color: #002c5e; }
/**
* Modifier popup--topright
* positioned on the top right corner of the relatively positioned parent
*
*/
.popup--topright {
top: 0;
right: -20rem;
transition: right 0.5s ease;
height: 100%;
width: 16.25rem;
border: none;
display: block;
/**
* state class is-active
* takes care of the transitions on pupup toggle
*/ }
.popup--topright.is-active {
right: 0;
transition: right 0.5s ease; }
/**
* Modifier popup--small
* small popup with less padding fixed width
*/
.popup--small {
width: 5.9375rem;
top: 2.625rem;
left: -0.875rem;
padding: 0.625rem;
overflow: visible; }
/**
* Actions for action panel
*/
.action {
margin-top: 1.25rem;
margin-bottom: 2.5rem; }
@media only screen and (min-width: 641px) {
.action {
margin-bottom: 1.25rem; } }
@media only screen and (min-width: 961px) {
.action {
margin-bottom: 3.75rem; } }
.action--icon {
margin-bottom: 0.625rem;
position: relative; }
@media only screen and (min-width: 641px) {
.action--icon {
margin-bottom: 2.5rem; } }
.action--title {
position: relative;
margin-bottom: 0.625rem; }
@media only screen and (min-width: 641px) {
.action--title {
min-height: 3.125rem; } }
/*-------------------------*\
#CONTENT #BLOCK
\*-------------------------*/
/**
* The block element is the base content block
* used on the whole website.
*
* #TODO get rid of extreme nesting, practice BEM hierarchy instead
*
* Markup:
*
*
*
*/
.block {
position: relative;
display: inline-block;
width: 100%;
margin-bottom: 2.5rem;
padding: 1.25rem 1.25rem 0;
background-color: #ffffff;
/**
* ???
*/
/*
* To replace the equalheight JS solution.
* A footer is positioned inside the bottom-padding.
*/
/**
* Reduce margin to visually relate elements following the .block element
*/
/**
* LEGACY
*/
/**
* hr-like element used within and in between blocks
* #TODO replace with hr element
*/
/**
* ???
* #TODO document plz
*/
/**
* Hall of shame
*/ }
.block--aligned-footer {
padding: 1.25rem 1.25rem 6.25rem 1.25rem;
width: 100%; }
.block--has-footer {
padding-bottom: 6.25rem;
position: relative; }
.block--is-related {
margin-bottom: 20px !important; }
.block.block-small-margin {
margin-bottom: 1rem; }
.block.no-margin {
margin-bottom: 0;
padding-bottom: 0; }
h1 + .block {
margin-top: 0; }
.block h2 {
margin: 0 -1.25rem 1.25rem;
padding: 1rem 1.25rem;
background-color: #ccdef4;
border-top: 2.5rem solid #f2f2f2;
color: #002c5e;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.5625rem; }
.block h2[class*='icon'] {
background-position: 0.9375rem center;
width: auto;
height: auto;
padding-left: 3.125rem; }
.block h2.icon-star {
background-position: 0.625rem center; }
.block h2.large-icon {
background-position: center 1rem;
padding: 0;
text-align: center; }
.block h2.large-icon a {
display: block;
padding: 3.5rem 1rem 1rem; }
.block h2:first-child {
margin-top: -1.25rem;
border-top: 0; }
.block h2.highlight {
background-color: #ffcc33; }
.block h2.grey {
background-color: #9b9b9b;
color: #ffffff; }
.block h2 a {
text-decoration: none; }
.block h2.block__header--grey {
color: #fff;
background-color: #545454;
margin: 0; }
.block h3 {
font-size: 1.125rem; }
.block h3,
.block h4,
.block ul,
.block ol,
.block p,
.block table,
.block iframe {
margin-bottom: 1.25rem; }
.block h3,
.block h4 {
margin-bottom: 0.625rem;
padding-top: 0.625rem;
font-weight: 600;
color: #002c5e; }
.block h3.is-large,
.block h4.is-large {
font-size: 1.5rem;
margin-bottom: 1.25rem;
padding-top: 0.5rem !important; }
.block h2 + h3,
.block h3:first-child,
.block h2 + h4,
.block h4:first-child {
padding-top: 0; }
.block .dots-light-blue {
margin-bottom: 0; }
.block .hr {
border: 0;
border-top: 1px solid #dcdcdc;
height: 0;
margin: 1rem -1.25rem; }
.block li a,
.block p a,
.block td a {
color: #007CC1; }
.block li a:hover,
.block p a:hover,
.block td a:hover {
color: #388099; }
.block li ul,
.block li ol {
margin-top: 0.5rem; }
.block iframe {
width: 100%; }
.block form {
margin-bottom: 0; }
.block img {
max-width: 100%; }
.block .text-big {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.25rem;
margin-bottom: 1rem; }
.block .text-blue {
color: #002c5e; }
.block .space-top {
margin-top: 1rem; }
.block .space-left {
margin-left: 1rem; }
.block .space-right {
margin-right: 1rem; }
.block .space-bottom {
margin-bottom: 2rem; }
.block > .button-yellow {
display: inline-block; }
.block .buttons-row {
margin-bottom: 0; }
.block .buttons-row:before, .block .buttons-row:after {
content: ' ';
display: table; }
.block .buttons-row:after {
clear: both; }
.block .buttons-row .button-yellow,
.block .buttons-row .button-lightblue {
float: left;
margin-bottom: 1rem;
margin-right: 1rem; }
.block .contentSpecialBlock {
border-top: 2.5rem solid #f2f2f2;
margin-left: -1.25rem;
margin-right: -1.25rem;
padding: 1.25rem; }
.block .direct li {
padding-left: 1.25rem !important;
margin-left: 0 !important;
background: url(/includes/img/icon-arrow-right-yellow.png) left 0.25rem no-repeat;
list-style: none !important; }
.block .contentSpecialBlock {
overflow: hidden; }
.block .contentSpecialBlock:first-child {
border-top: 0;
margin-top: -1rem; }
.block .block-column-left {
float: left;
width: 48%; }
.block .block-column-right {
float: right;
width: 48%; }
.block .block-column-left,
.block .block-column-right {
margin-bottom: 0; }
.block .block-column-left {
clear: both; }
.block .block-three-columns {
margin-left: -0.625rem;
margin-right: -0.625rem; }
.block .block-three-columns:before, .block .block-three-columns:after {
content: ' ';
display: table; }
.block .block-three-columns:after {
clear: both; }
.block .block-three-columns > div {
float: left;
margin-bottom: 0;
padding: 0 0.625rem;
width: 33.3333%; }
.block .block-column-small {
clear: both;
float: left;
width: 30%; }
.block .block-column-small + .block-column-wide {
float: right;
width: 65%; }
.block .block-column-wide {
float: left;
width: 55%; }
.block .block-column-wide + .block-column-small {
clear: right;
float: right;
width: 40%; }
.block .messageLeftBlock,
.block .messageRightBlock {
margin-bottom: -1rem; }
.block .downloadList li {
background: none;
padding-left: 0; }
.block .downloadList a {
background-image: url(/includes/img/icon-txt.png);
background-position: left 0.125rem;
background-repeat: no-repeat;
padding-left: 1.75rem; }
.block .downloadList a[href$='.doc'],
.block .downloadList a[href$='.docx'] {
background-image: url(/includes/img/icon-word.png); }
.block .downloadList a[href$='.xls'],
.block .downloadList a[href$='.xlsx'] {
background-image: url(/includes/img/icon-excel.png); }
.block .downloadList a[href$='.pdf'] {
background-image: url(/includes/img/icon-pdf.png); }
.block .downloadList a[href$='.ppt'],
.block .downloadList a[href$='.pptx'] {
background-image: url(/includes/img/icon-ppt.png); }
.block .logo-partner {
padding: 0.625rem 0rem;
display: block; }
.block .half-space-bottom {
margin-bottom: 0.5rem; }
.block .no-space-bottom {
margin-bottom: 0; }
.block .block-attention {
box-shadow: 1px 1px 2px 0 #ccc;
background-color: #f2f2f2;
padding: 1.25rem; }
/**
* Block header
*/
.block__header {
margin: -1.25rem -1.25rem 1.25rem -1.25rem;
background-color: #ccdef4; }
.block__header h1,
.block__header h2 {
margin: 0;
padding: 1.25rem;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.5625rem;
word-wrap: break-word; }
.block__header--transparent {
background-color: transparent;
font-weight: 400; }
/**
* #FIXME no double child selectors please. Especially not nested
* within another class...
*/
.block__header__heading {
margin-bottom: 0;
font-size: 1.25rem;
font-weight: 700;
color: #002c5e;
line-height: 1.5625rem;
word-wrap: break-word; }
/**
* Buttons to use in combination with .block h2
*
* Markup:
*
*
*/
.block__header-buttons {
position: absolute;
top: 0;
right: 0;
width: auto !important;
height: 3.5rem;
margin: 0 !important;
padding: 0;
background: transparent;
font-weight: 400;
letter-spacing: 0; }
.block__header-buttons .button {
margin: 0 0 0 0.0625rem; }
.block__header-icon,
.block__header__icon {
float: right;
background-color: #dbe8f7;
height: 4.0625rem;
width: 3.5rem;
padding: 1rem;
cursor: pointer; }
.block__header-icon:before,
.block__header__icon:before {
background-position: 10px 5px;
background-repeat: no-repeat;
content: '';
color: #002c5e;
cursor: pointer;
display: inline-block;
height: 1.6875rem;
width: 1.25rem; }
/**
* Block footer
* Absolutely positioned on bottom of .block
*
* Dependency: needs a parent .block with position: relative;
*/
.block__footer {
position: absolute;
height: 5.625rem;
bottom: 0;
left: 1.25rem;
right: 1.25rem; }
/**
* LEGACY
*/
nav.block {
padding: 0; }
/**
* Tabbed content block in combination with
*/
.block--tabs,
.contact-questions {
background-color: #ffffff;
margin-bottom: 1.875rem;
padding: 0; }
.block--tabs:before, .block--tabs:after,
.contact-questions:before,
.contact-questions:after {
content: ' ';
display: table; }
.block--tabs:after,
.contact-questions:after {
clear: both; }
/**
* #FIXME document and prevent specificity
* #NOTE This is no state, this is styling of an incorrectly named class
*/
.contains-header-icon .block__header__heading {
width: 74%; }
.block-padded-light {
padding: 1.25rem 1.25rem 0;
background-color: #ffffff;
margin-bottom: 20px; }
.block-padded-light h3 {
margin-bottom: 0.625rem;
padding-top: 0;
font-weight: 600;
color: #002c5e;
font-size: 1.125rem; }
.block-padded-light p {
margin-bottom: 1.25rem; }
.block-bijeenkomsten {
background-color: #ffffff;
min-height: 23.8125rem;
margin-bottom: 2.5rem; }
.block-bijeenkomsten:first-child {
margin-top: 0; }
.block-bijeenkomsten .images {
height: 7.875rem;
overflow: hidden;
padding-bottom: 0;
position: relative;
background-color: #ededed; }
.block-bijeenkomsten .images a {
display: block; }
.block-bijeenkomsten .images img {
height: 100%;
position: absolute;
right: 0; }
.block-bijeenkomsten .nav {
display: none;
background-color: #ffcc33;
height: 2.5rem; }
.block-bijeenkomsten .nav .next,
.block-bijeenkomsten .nav .prev {
background-color: #febb28;
background-position: center center;
background-repeat: no-repeat;
background-size: 0.5625rem 0.75rem;
border: 0;
cursor: pointer;
float: right;
height: 100%;
margin-left: 0.125rem;
width: 2.5rem; }
.block-bijeenkomsten .nav .next:hover,
.block-bijeenkomsten .nav .prev:hover {
background-color: #ffab27; }
.block-bijeenkomsten .nav .next {
background-image: url(/includes/img/icon-arrow-right-white.png); }
.block-bijeenkomsten .nav .prev {
background-image: url(/includes/img/icon-arrow-left-white.png); }
.block-bijeenkomsten .bijeenkomsten > div {
display: none;
padding: 0 1.25rem 0.5rem; }
.block-bijeenkomsten .bijeenkomsten > div:first-child {
display: block; }
.block-bijeenkomsten .bijeenkomsten > div > a {
display: block;
text-decoration: none; }
.block-bijeenkomsten .bijeenkomsten h3 {
font-weight: 700;
font-size: 1rem;
line-height: 2.5rem;
padding-right: 4.25rem; }
.block-bijeenkomsten .bijeenkomsten h3 span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
display: block; }
.block-bijeenkomsten .bijeenkomsten .date,
.block-bijeenkomsten .bijeenkomsten .time {
color: #9b9b9b;
float: left;
font-weight: 700;
font-size: 0.9375rem;
line-height: 1.875rem;
text-decoration: none; }
.block-bijeenkomsten .bijeenkomsten .date:hover,
.block-bijeenkomsten .bijeenkomsten .time:hover {
text-decoration: underline; }
.block-bijeenkomsten .bijeenkomsten .date {
background: url(/includes/img/icon-date-yellow.png) no-repeat;
background-size: 1.5625rem 1.875rem;
padding-left: 2.0625rem;
margin-right: 0.75rem;
margin-bottom: 0.625rem; }
.block-bijeenkomsten .bijeenkomsten .time {
background: url(/includes/img/icon-time-yellow.png) no-repeat;
background-size: 1.875rem;
padding-left: 2.375rem; }
.block-bijeenkomsten .bijeenkomsten p {
color: #000000;
clear: both;
min-height: 6.5625rem;
padding: 1rem 0; }
.block-bijeenkomsten .bijeenkomsten .dots-light-blue {
margin-bottom: 0.5rem; }
.block-bijeenkomsten .block-widget__image {
height: 7.875rem; }
.bijeenkomsten-mini {
list-style: none;
padding: 0; }
.bijeenkomsten-mini li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.bijeenkomsten-mini li {
display: block;
height: 1.875rem;
margin-bottom: 0.3125rem;
line-height: 1.875rem;
color: black; }
.bijeenkomsten-mini .date {
background: url(/includes/img/icon-date-yellow.png) no-repeat 2px 0;
background-size: 1.5625rem 1.875rem;
padding-left: 2.375rem; }
.bijeenkomsten-mini .time {
background: url(/includes/img/icon-time-yellow.png) no-repeat;
background-size: 1.875rem;
padding-left: 2.375rem; }
.image-block {
display: block; }
.block-blue {
background-color: #ccdef4;
margin-bottom: 2.5rem;
padding: 1.25rem 1.5rem; }
.block-blue:first-child {
margin-top: 0; }
.block-blue--inline-block {
display: inline-block; }
.block-carousel {
overflow: hidden;
margin-bottom: 2.5rem; }
.block-carousel .block-carousel-header {
height: 3.5625rem;
background-color: #ffcc33; }
.block-carousel .block-carousel-header:before, .block-carousel .block-carousel-header:after {
content: ' ';
display: table; }
.block-carousel .block-carousel-header:after {
clear: both; }
.block-carousel .block-carousel-header h2 {
margin-bottom: 0; }
.block-carousel h2 {
float: left;
padding: 1rem;
font-size: 1.25rem;
font-weight: 700;
color: #002c5e;
line-height: 1.5625rem; }
.block-carousel h2 > span {
display: none;
margin-left: 0.375rem; }
.block-carousel .block-carousel-next,
.block-carousel .block-carousel-prev {
background-color: #febb28;
background-position: center center;
background-repeat: no-repeat;
background-size: 0.5625rem 0.75rem;
border: 0;
cursor: pointer;
display: none;
float: right;
height: 100%;
margin-left: 0.125rem;
width: 2.5rem; }
.block-carousel .block-carousel-next:hover,
.block-carousel .block-carousel-prev:hover {
background-color: #ffab27; }
.block-carousel .block-carousel-next {
background-image: url(/includes/img/icon-arrow-right-white.png); }
.block-carousel .block-carousel-prev {
background-image: url(/includes/img/icon-arrow-left-white.png); }
.block-carousel .block-carousel-container {
transition: all 0.5s;
height: 22.5rem;
left: 0;
position: relative;
width: 625rem; }
.block-carousel .block-carousel-panel {
float: left;
height: 100%;
margin-right: 0.625rem;
position: relative;
width: 28.75rem; }
.block-carousel .block-carousel-tile {
background-color: #ffffff;
height: 10.625rem;
left: 0;
padding: 1.25rem 1rem 0 1rem;
position: absolute;
text-decoration: none;
top: 0.625rem;
width: 13.75rem; }
.block-carousel .block-carousel-tile:hover {
background-color: #ffcc33; }
.block-carousel .block-carousel-tile:hover .block-carousel-tile-bijeenkomst .date:after {
background-image: url(/includes/img/icon-date-white-17.png); }
.block-carousel .block-carousel-tile:hover .block-carousel-tile-bijeenkomst .time:after {
background-image: url(/includes/img/icon-time-white-20.png); }
.block-carousel .block-carousel-tile:hover .button-yellow {
background-color: #ffffff; }
.block-carousel .block-carousel-tile:hover .label:before {
border-color: transparent transparent transparent #ffcc33; }
.block-carousel .block-carousel-tile + .block-carousel-tile {
bottom: 0;
top: auto; }
.block-carousel .block-carousel-tile + .block-carousel-tile + .block-carousel-tile {
left: auto;
right: 0;
top: 0.625rem; }
.block-carousel .block-carousel-tile + .block-carousel-tile + .block-carousel-tile + .block-carousel-tile {
bottom: 0;
left: auto;
right: 0;
top: auto; }
.block-carousel .block-carousel-tile h3, .block-carousel .block-carousel-tile h4, .block-carousel .block-carousel-tile p, .block-carousel .block-carousel-tile img {
margin-bottom: 0.625rem; }
.block-carousel .block-carousel-tile h3, .block-carousel .block-carousel-tile h4 {
font-size: 1.125rem; }
.block-carousel .block-carousel-tile h3 + h4 {
margin-top: -0.5rem; }
.block-carousel .block-carousel-tile h4 {
font-weight: 600; }
.block-carousel .block-carousel-tile p {
font-size: 0.875rem; }
.block-carousel .block-carousel-tile .label {
background-color: #dbe8f7;
bottom: 1.25rem;
color: #545454;
font-size: 0.8125rem;
font-weight: 700;
line-height: 1.5rem;
padding: 0 0.625rem 0 1.25rem;
position: absolute;
right: 1.25rem; }
.block-carousel .block-carousel-tile .label:before {
border-color: transparent transparent transparent #ffffff;
border-style: solid;
border-width: 0.75rem 0 0.75rem 0.75rem;
content: '';
left: 0;
height: 0;
position: absolute;
top: 0;
width: 0; }
.block-carousel .block-carousel-tile-bijeenkomst {
list-style: none;
padding: 0; }
.block-carousel .block-carousel-tile-bijeenkomst li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.block-carousel .block-carousel-tile-bijeenkomst li {
color: #000000;
line-height: 1.25rem;
position: relative; }
.block-carousel .block-carousel-tile-bijeenkomst li:first-child {
font-weight: 600; }
.block-carousel .block-carousel-tile-bijeenkomst li.date, .block-carousel .block-carousel-tile-bijeenkomst li.time {
margin-top: 0.25rem;
padding-left: 1.6875rem; }
.block-carousel .block-carousel-tile-bijeenkomst li.date:after, .block-carousel .block-carousel-tile-bijeenkomst li.time:after {
content: '';
height: 1.25rem;
position: absolute; }
.block-carousel .block-carousel-tile-bijeenkomst li.date:before {
content: url(/includes/img/icon-date-white-17.png);
display: none; }
.block-carousel .block-carousel-tile-bijeenkomst li.date:after {
background: url(/includes/img/icon-date-yellow-17.png) center center;
left: 0.125rem;
width: 1.0625rem; }
.block-carousel .block-carousel-tile-bijeenkomst li.time:before {
content: url(/includes/img/icon-time-white-20.png);
display: none; }
.block-carousel .block-carousel-tile-bijeenkomst li.time:after {
background: url(/includes/img/icon-time-yellow-20.png) center center;
left: 0;
width: 1.25rem; }
.block-cross-up-sell {
display: block;
margin-top: 1rem;
position: relative;
background-color: #ffffff;
padding: 1rem 1.25rem 1.25rem;
text-decoration: none; }
.block-cross-up-sell:hover {
color: #002c5e; }
.block-cross-up-sell h3 {
font-weight: 600;
width: 50%; }
.block-cross-up-sell .description {
margin-top: 1rem;
width: 56%; }
.block-cross-up-sell .button-order {
background-color: #febb28;
bottom: 1rem;
color: #000000;
font-weight: 600;
height: 2.5rem;
line-height: 2.5rem;
padding: 0 0.8125rem;
position: absolute;
right: 20px; }
.block-cross-up-sell .button-order:after {
background-image: url(/includes/img/icon-arrow-right-black.png);
background-repeat: no-repeat;
background-size: contain;
content: '';
display: inline-block;
height: 0.75rem;
margin-left: 0.5rem;
width: 0.5625rem; }
.block-cross-up-sell .button-order:hover {
background-color: #ffab27; }
.block-cross-up-sell .button-order span {
font-weight: 400;
margin-right: 0.5rem; }
.block-ervaringen {
min-height: 23.8125rem;
overflow: hidden; }
.block-ervaringen > a {
display: block;
text-decoration: none; }
.block-ervaringen img {
display: block;
width: 100%; }
.block-ervaringen .content {
height: 15.625rem;
position: relative; }
.block-ervaringen .content .media {
position: absolute;
right: 0;
bottom: 0.625rem; }
.block-ervaringen .content h2 {
background-color: #545454;
padding: 0.3125rem 0.625rem;
color: white;
display: inline-block;
float: right;
margin-bottom: 0.625rem; }
.block-ervaringen .content .partner {
padding: 0.3125rem 0.625rem;
background-color: white; }
.block-ervaringen .footer {
display: block;
height: 9.375rem;
color: white;
width: 100%;
background-color: #002c5e;
padding: 1.25rem;
text-decoration: none;
position: relative; }
.block-ervaringen .footer h3, .block-ervaringen .footer p {
font-weight: 600;
font-size: 1.375rem;
line-height: 1.625rem; }
.block-ervaringen .footer h3 + p {
font-weight: 400;
font-size: 1rem;
line-height: 1.25rem;
margin-top: 0.75rem; }
.block-ervaringen .footer .link-arrow-white {
color: #ffffff;
margin-top: 0.75rem; }
.block-list-expand,
.acc {
position: relative; }
.block-list-expand > li,
.acc > li {
background: none;
margin-bottom: 0;
list-style: none; }
.block-list-expand > li.active,
.acc > li.active {
padding-bottom: 1px; }
.block-list-expand > li.active h4,
.acc > li.active h4 {
margin-bottom: 0.5rem; }
.block-list-expand h4,
.acc h4 {
font-weight: 400;
font-size: 1.125rem;
line-height: 1.5rem;
margin: 0 -1.25rem 0 -1.125rem; }
@media only screen and (min-width: 481px) {
.block-list-expand h4,
.acc h4 {
margin: 0 -1.25rem 0 -2.1875rem; } }
.block-list-expand h4 a,
.acc h4 a {
background: url(/includes/img/icon-arrow-down-yellow.png) 0 1.0625rem no-repeat;
color: #002c5e;
display: block;
padding: 0.625rem 1.25rem 0.625rem 1.5625rem;
text-decoration: none; }
@media only screen and (min-width: 641px) {
.block-list-expand h4 a,
.acc h4 a {
padding: 0.3125rem 1.25rem 0.625rem 1.5625rem; } }
.block-list-expand h4 a:hover,
.acc h4 a:hover {
background-color: #ffeaa1; }
.block-list-expand h4 + div,
.block-list-expand h4 ~ p,
.block-list-expand h4 ~ ul,
.block-list-expand h4 ~ ol,
.acc h4 + div,
.acc h4 ~ p,
.acc h4 ~ ul,
.acc h4 ~ ol {
display: none; }
.block-list-expand .acc-header,
.acc .acc-header {
position: relative;
margin: -1.25rem -1.25rem -2rem;
cursor: pointer; }
.block-list-expand .acc-header:hover,
.acc .acc-header:hover {
background-color: #ffeaa1; }
.block-list-expand .acc-header h3,
.acc .acc-header h3 {
font-weight: 400;
font-size: 1.125rem;
line-height: 1.5rem;
margin: 0; }
.block-list-expand .acc-header h3 .header,
.acc .acc-header h3 .header {
background: url(/includes/img/icon-arrow-down-yellow.png) 1.125rem 1.0625rem no-repeat;
color: #002c5e;
display: block;
padding: 0.625rem 1.25rem 0.625rem 2.5rem;
text-decoration: none;
max-width: 70%; }
.block-list-expand .acc-header h3 .intro,
.acc .acc-header h3 .intro {
display: block;
padding: 0 2.5rem 0.3125rem;
font-size: 1rem; }
.block-list-expand .acc-body,
.acc .acc-body {
margin: 0;
padding: 3.125rem 1.25rem 0;
display: none; }
.block-list-expand .acc-body.acc-show,
.acc .acc-body.acc-show {
display: block; }
.block-list-expand + .block-list,
.block-list-expand + .block-list-expand,
.block-list-expand + .acc,
.acc + .block-list,
.acc + .block-list-expand,
.acc + .acc {
margin-top: -1rem; }
.block-project-widget {
display: block;
position: relative;
min-height: 23.8125rem;
margin-bottom: 2.5rem;
background-color: #ffffff;
text-decoration: none; }
.block-project-widget .image {
position: relative; }
.block-project-widget .image img {
display: block;
width: 100%; }
.block-project-widget .image p {
background-color: #333333;
bottom: 1.125rem;
color: #ffffff;
font-weight: 700;
font-size: 1.125rem;
line-height: 2rem;
padding: 0.0625rem 1.75rem 0 0.75rem;
position: absolute;
right: 0; }
.block-project-widget h2 {
background-color: #002c5e;
color: #ffffff;
font-weight: 700;
font-size: 1.125rem;
padding: 0.5rem 1.25rem; }
.block-project-widget .content {
padding: 1.25rem 1.25rem 5rem; }
.block-project-widget .regio {
color: #9b9b9b;
font-size: 0.9375rem;
margin-top: 0; }
.block-project-widget p {
color: #000000;
margin-top: 1rem; }
.block-project-widget .button-yellow {
bottom: 1.25rem;
left: 1.25rem;
margin-top: 0;
position: absolute; }
.block-widget {
margin-bottom: 2.5rem;
height: 400px;
width: 100%; }
.block-widget__image {
display: block;
height: 400px;
margin-bottom: 1.25rem;
border-radius: 18px 18px 0 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat; }
.block-rounded {
border-radius: 1.125rem;
overflow: hidden;
position: relative; }
.block-rounded-top {
border-radius: 1.125rem 1.125rem 0 0;
overflow: hidden;
position: relative; }
/**
* Powerd-by block which contains text= "Powered by" (or anything)
* and logo(s)
*/
.powered-by {
padding: 0 0 13px 0; }
.powered-by__text {
margin-right: 35px;
display: inline-block;
vertical-align: top;
padding: 1.25rem 0;
font-size: 1em;
color: #dcdcdc; }
.powered-by__logo-box {
display: inline-block;
width: 100px;
height: 100px;
margin-top: 17px;
margin-left: 7px;
margin-right: 10px;
padding: 0 4px;
border: 1px solid #dcdcdc;
line-height: 100px;
text-align: center; }
.powered-by__logo-img {
vertical-align: middle; }
.powered-by--bordered {
margin: 3.75rem -1.25rem 0 -1.25rem;
border-top: 1px solid #dcdcdc;
padding: 1.125rem 0 1.25rem 1.25rem; }
.powered-by--bordered .powered-by__logo-box {
margin-left: 0;
margin-right: 17px; }
/*-------------------------*\
#QUESTIONS / #LISTS
\*-------------------------*/
/**
* Questions are used for so called "vraagcontainers" in Tridion.
*
* #TODO It should be rebuilt to a .list-class for optimal general use,
* but at the moment there's a conflict with some exisiting
* classes. These should be combined to something like .list and
* .list--arrow (the icon used in this .questions list).
*/
.questions,
.block-list {
list-style: none;
padding: 0;
margin-left: -1.25rem;
margin-right: -1.25rem;
margin-bottom: 1.25rem;
/**
* START #TODO remove this part and use .question instead
*/
/* END #TODO remove this part and use .question instead */ }
.questions li,
.block-list li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.questions:last-child,
.block-list:last-child {
margin-bottom: 0; }
.questions.bottom-grey, .questions.bottom-blue,
.block-list.bottom-grey,
.block-list.bottom-blue {
margin-top: 1rem; }
.questions.bottom-grey li, .questions.bottom-blue li,
.block-list.bottom-grey li,
.block-list.bottom-blue li {
font-weight: 600; }
.questions.bottom-grey a,
.block-list.bottom-grey a {
color: #9b9b9b; }
.questions.bottom-blue a,
.block-list.bottom-blue a {
color: #002c5e; }
.questions li,
.block-list li {
margin-bottom: 0;
font-size: 1rem;
line-height: 1.5rem; }
.questions h4 a,
.questions > a,
.block-list h4 a,
.block-list > a {
display: block;
padding: 0.625rem 1.25rem 0.625rem 2.5rem;
background: url(/includes/img/icon-arrow-right-yellow.png) 1.25rem 1rem no-repeat;
background-size: 0.5625rem 0.75rem;
font-size: 1.125rem;
color: #002c5e !important;
text-decoration: none; }
.questions h4 a:hover,
.questions > a:hover,
.block-list h4 a:hover,
.block-list > a:hover {
background-color: #ffeaa1; }
.questions .title-blue,
.block-list .title-blue {
color: #065ca9;
font-weight: 600; }
.questions .small,
.block-list .small {
display: block;
font-size: 0.8125rem;
font-weight: 400; }
.questions .label,
.block-list .label {
display: inline-block;
position: relative;
top: -0.125rem;
margin: 0.25rem 0 0 0.25rem;
padding: 0 0.5625rem;
background-color: #065ca9;
color: #ffffff;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.375rem; }
.questions + .block-list,
.questions + .block-list-expand,
.questions + .acc,
.block-list + .block-list,
.block-list + .block-list-expand,
.block-list + .acc {
margin-top: -1rem; }
.questions .error-message,
.block-list .error-message {
padding-left: 1.25rem;
padding-right: 1.25rem; }
/**
* Single question
*/
.question {
font-weight: 400;
font-size: 1rem;
line-height: 1.5rem;
margin-bottom: 0; }
.question h4 a,
.question > a {
display: block;
padding: 0.625rem 1.25rem 0.625rem 2.5rem;
background: url(/includes/img/icon-arrow-right-yellow.png) 1.25rem 1rem no-repeat;
background-size: 0.5625rem 0.75rem;
font-size: 1.125rem;
color: #002c5e !important;
text-decoration: none; }
.question h4 a:hover,
.question > a:hover {
background-color: #ffeaa1; }
.question ul li {
list-style: disc;
margin-left: 2em; }
.question--feature {
margin-top: 1rem;
font-weight: 600; }
.question--expand {
background: none;
padding-left: 3.75rem; }
.question--expand.active {
padding-bottom: 1px; }
.question--expand.active h4 {
margin-bottom: 0.5rem; }
.question--expand h4 {
font-weight: 400;
font-size: 1.125rem;
line-height: 1.5rem;
margin: 0; }
.question--expand h4 a {
background: url(/includes/img/icon-arrow-down-yellow.png) 1.125rem 1.0625rem no-repeat;
color: #002c5e;
display: block;
padding: 0.625rem 1.25rem 0.625rem 2.5rem;
text-decoration: none; }
.question--expand h4 a:hover {
background-color: #ffeaa1; }
.question--expand h4 + div,
.question--expand h4 ~ p,
.question--expand h4 ~ ul,
.question--expand h4 ~ ol {
display: none; }
.question--expand a {
/* These rules style ALL a's inside a question block. */
display: inline; }
.question--expand a:hover {
background-color: transparent; }
.question--expand > div {
margin-right: 1.25rem;
margin-bottom: 0.75rem;
margin-left: 2.5rem; }
.questions--orange .question a {
background-size: 0.5625rem;
background-position-y: 0.875rem;
background-image: url(/includes/img/svg/compressed/icon-arrow-right-orange.svg); }
.questions--orange .question--expand a {
background-size: 0.9375rem;
background-position-y: 1rem;
background-image: url(/includes/img/svg/compressed/icon-arrow-down-orange.svg); }
/*
* Old stuff for backwards compatibility
*/
.block-list a {
display: block;
padding: 0.625rem 1.25rem 0.625rem 2.5rem;
background: url(/includes/img/icon-arrow-right-yellow.png) 1.25rem 1rem no-repeat;
background-size: 0.5625rem 0.75rem;
color: #002c5e !important;
text-decoration: none; }
.block-list a:hover {
background-color: #ffeaa1; }
/*-------------------------------------*\
#VRAAGCONTAINER #QUESTIONS #TABS
\*-------------------------------------*/
/**
* Tabbed presentation of .questions ('vraagcontainers')
*/
.tabs,
.contact-questions .categories,
.vertical-tabs__navigation {
box-sizing: border-box;
border-right: 0.0625rem solid #f2f2f2;
float: left;
position: relative;
width: 32%;
z-index: 1; }
.tabs h3,
.contact-questions .categories h3,
.vertical-tabs__navigation h3 {
margin-bottom: 0;
padding-top: 0;
font-weight: 600;
cursor: pointer; }
.tabs h3:hover, .tabs h3.active,
.contact-questions .categories h3:hover,
.contact-questions .categories h3.active,
.vertical-tabs__navigation h3:hover,
.vertical-tabs__navigation h3.active {
background-color: #ffcc33;
color: #000000;
margin-right: -0.0625rem; }
.tabs a,
.contact-questions .categories a,
.vertical-tabs__navigation a {
display: block;
padding: 1rem 1.25rem;
position: relative;
text-decoration: none; }
.tabs a:after,
.contact-questions .categories a:after,
.vertical-tabs__navigation a:after {
border: 0.9375rem solid transparent;
border-right-color: #ffffff;
content: '';
height: 0;
margin-top: -0.9375rem;
position: absolute;
right: 0;
top: 50%;
width: 0; }
/**
* Tabbed content for questions / 'vraagcontainers'
*/
.tabs-content,
.vertical-tabs__tabs {
float: right;
min-height: 100%;
position: relative;
width: 100%;
z-index: 0;
box-sizing: border-box;
padding: 0;
background-color: #ffffff; }
.tabs-content:after,
.vertical-tabs__tabs:after {
background-color: #f2f2f2;
bottom: 0;
content: '';
left: -0.0625rem;
position: absolute;
top: 0;
width: 0.0625rem; }
.tabs-content > .questions,
.vertical-tabs__tabs > .questions {
display: none; }
.tabs-content > .questions:first-child,
.vertical-tabs__tabs > .questions:first-child {
display: block; }
.tabs-content .block-list,
.vertical-tabs__tabs .block-list {
margin: 0; }
.tabs-content .block-list-expand,
.vertical-tabs__tabs .block-list-expand {
margin: 0; }
.tabs-content .block-list-expand li,
.vertical-tabs__tabs .block-list-expand li {
margin: 0 1.25rem; }
.tabs-content .result,
.vertical-tabs__tabs .result {
padding: 0 1.25rem; }
/*-----------------------------*\
#HORIZONTAL-TABS
\*-----------------------------*/
/**
* Horizontal tabs to use in content blocks (.block)
* these tabs responsive and transform
*/
.tabshorizontal {
margin-bottom: 1.25rem; }
/**
* The buttons to switch to a tab
*/
.tabshorizontal__navigation {
display: block;
margin-top: -0.625rem; }
@media only screen and (min-width: 641px) {
.tabshorizontal__navigation {
margin-bottom: -0.0625rem; } }
/**
* The button to select a tab
*/
.tabshorizontal__button {
display: block;
position: relative;
margin-bottom: 0 !important;
border-bottom: 1px solid #9b9b9b;
padding: 0.625rem 0;
font-weight: 600;
cursor: pointer;
transition: all 0.1s linear 0;
padding-left: 1.875rem; }
.tabshorizontal__button input[type="radio"] {
width: 0; }
.tabshorizontal__button:hover, .tabshorizontal__button:focus {
color: #002c5e; }
.tabshorizontal__button.is-active {
color: #002c5e; }
.tabshorizontal__button.is-active:after {
content: '';
position: absolute;
left: 0;
height: 1.5rem;
width: 1.5rem;
background: transparent url(/includes/img/form-radio-selected-white.png);
padding-right: 0.3125rem; }
@media only screen and (min-width: 641px) {
.tabshorizontal__button.is-active {
border-bottom: 0.3125rem solid #002c5e; }
.tabshorizontal__button.is-active:after {
display: none; } }
@media only screen and (min-width: 641px) {
.tabshorizontal__button {
display: inline-block !important;
margin-right: 0.625rem;
padding: 10px 0;
border: none;
border-bottom: 0.3125rem solid transparent;
line-height: 1em; } }
/**
* The actual tab (with content)
*/
.tabshorizontal__tab {
margin-left: -1.25rem;
margin-right: -1.25rem;
padding: 0 1.25rem;
/**
* Styling variation for tabs in forms
*/ }
@media only screen and (min-width: 641px) {
.tabshorizontal__tab {
padding-top: 20px;
border-top: 0.0625rem solid #f8f8f8; } }
.tabshorizontal__tab--form {
padding-top: 1.25rem;
background-color: #f0f5fc; }
/*-----------------------------*\
#HORIZONTAL-TABS-NEW
\*-----------------------------*/
.box .tabshorizontal-new .children-separator {
margin: 0.5625rem 0 0; }
@media only screen and (min-width: 641px) {
.box .tabshorizontal-new .children-separator {
margin: 0.625rem 0 0; } }
.box .tabshorizontal-new .children-separator:last-child {
margin: 0.5625rem 0 0; }
@media only screen and (min-width: 641px) {
.box .tabshorizontal-new .children-separator:last-child {
margin: 0.625rem 0 0; } }
/**
* The buttons to switch to a tab
*/
.tabshorizontal-new__navigation {
display: block;
margin-top: -0.9375rem; }
@media only screen and (min-width: 641px) {
.tabshorizontal-new__navigation {
margin-bottom: -0.0625rem; } }
/**
* The button to select a tab
*/
.tabshorizontal-new__button {
display: inline-block;
margin-bottom: -0.625rem !important;
padding: 0.625rem 0.9375rem 0.625rem 0.9375rem;
font-weight: 300;
color: #333333;
cursor: pointer;
transition: all 0.1s linear 0; }
@media only screen and (min-width: 641px) {
.tabshorizontal-new__button {
padding: 0.625rem; } }
.tabshorizontal-new__button input[type="radio"] {
visibility: hidden;
width: 0; }
.tabshorizontal-new__button:hover, .tabshorizontal-new__button:focus {
padding: 0.625rem 0.9375rem 0.625rem 0.9375rem;
color: #002c5e;
font-weight: 400; }
@media only screen and (min-width: 641px) {
.tabshorizontal-new__button:hover, .tabshorizontal-new__button:focus {
padding: 0.625rem 1.125rem 0.625rem 1.125rem; } }
.tabshorizontal-new__button.is-active {
background-color: #ffffff;
border-top: 0.0625rem solid #bebebe;
border-right: 0.0625rem solid #bebebe;
border-left: 0.0625rem solid #bebebe;
border-bottom: 0.0625rem solid #ffffff;
padding: 0.5625rem 1.125rem;
color: #002c5e;
font-weight: 400; }
@media only screen and (min-width: 641px) {
.tabshorizontal-new__button {
padding: 0.625rem 1.125rem; } }
/**
* The actual tab (with content)
*/
.tabshorizontal-new__tab {
margin-left: -1.25rem;
margin-right: -1.25rem;
padding: 0 1.25rem; }
@media only screen and (min-width: 641px) {
.tabshorizontal-new__tab {
padding-top: 20px;
border-top: 0.0625rem solid #f8f8f8; } }
/**
* Styling variation for tabs in forms
*/
.tabshorizontal-new__tab--form {
padding-top: 1.25rem;
background-color: #f0f5fc; }
/*-----------------------------*\
#VERTICAL-TABS
\*-----------------------------*/
/**
* vertical-tabs.scss is based on tabs.scss
* #TODO: get rid off .contact-questions .categories classes probably also as HTML in Tridion
* these tabs are responsive.
*/
.block--tabs .form-search--questions {
margin: 1.25rem !important; }
.vertical-tabs__navigation {
display: none; }
.vertical-tabs__tabs h3 {
display: block;
background: #ffcc33;
padding: 10px !important; }
.tab--content {
padding: 0 1.25rem;
float: none;
width: 100%; }
@media only screen and (min-width: 641px) {
.block--tabs .form-search--questions {
margin-left: 0 !important;
margin-right: 0 !important; }
.vertical-tabs__navigation {
display: block; }
.vertical-tabs__tabs {
width: 68%;
padding: 0.75rem 1.25rem 1.25rem; }
.vertical-tabs__tabs h3 {
display: none; } }
/*------------------------*\
#FORM #WIZARD
\*------------------------*/
/**
* form-wizard
*
* Wizard to guide user towards the right form (interactive or content page with
* pdf download)
*
* [1] .wizard__heading: Optional header asking a question inviting the user to take action
* [2] .wizard__list: The options the user has, displayed conditionally based on output
* of .companyselector
* [3] .wizard__item: Styling of a single choice in the wizard
*/
.wizard {
min-height: 18.75rem;
margin-bottom: 2.5rem; }
.wizard__heading {
margin-bottom: 0.625rem;
background-color: transparent; }
.wizard__list {
margin-bottom: 1.25rem; }
.wizard__item {
display: block;
margin-bottom: 0.625rem;
padding: 1.25rem 2.5rem 1.25rem 1.25rem;
background-image: url("/includes/img/svg/compressed/arrow-thin-right-yellow.svg");
background-repeat: no-repeat;
background-position: right 1.25rem center;
background-color: #ffffff;
text-decoration: none;
font-weight: 300;
transition: all 0.15s ease-in; }
.wizard__item h3 {
margin-bottom: 0.625rem;
font-weight: 600; }
.wizard__item:hover, .wizard__item:focus {
background-image: url("/includes/img/svg/compressed/arrow-thin-right-darkblue.svg");
background-color: #ffcc33;
color: #002c5e; }
.wizard__item:active {
background-color: #febb28;
color: #002c5e; }
/**
* Don't show arrow icon because of lack of support for alignment
*/
/**
* Old code
* #TODO refactorization!
* ideas: .statusbar or ?? how do designers call these bars?
*/
.form-wizard-steps {
list-style: none;
padding: 0;
margin-bottom: 1rem; }
.form-wizard-steps li {
list-style: none;
margin-left: 0;
background-image: none;
padding-left: 0; }
.form-wizard-steps li {
background-color: #dbe8f7;
padding: 1.375rem 7.5rem 1.375rem 2rem;
position: relative; }
.form-wizard-steps li h3 {
color: #002c5e;
display: inline;
font-weight: 600;
font-size: 1.125rem;
line-height: 1.25rem;
margin-right: 0.5rem; }
.form-wizard-steps li > p {
color: #002c5e;
display: inline;
font-weight: 300;
line-height: 1.5rem;
margin-right: 0.5rem; }
.form-wizard-steps li .cancel {
background: url(/includes/img/icon-close-dark-blue.png);
background-size: 100%;
height: 1.6875rem;
position: absolute;
right: 1.5rem;
top: 1.1875rem;
width: 1.6875rem; }
.form-wizard-steps li .cancel:before {
content: url(/includes/img/icon-close-white.png);
display: none; }
.form-wizard-steps li .cancel:hover {
background-image: url(/includes/img/icon-close-white.png); }
.form-wizard-steps li + li {
margin-top: 0.0625rem; }
.block-form-wizard {
margin-top: 0; }
.block-form-wizard .block-three-columns > div,
.block-form-wizard .block-column-left > div,
.block-form-wizard .block-column-right > div {
margin-top: 1.25rem; }
.block-form-wizard .block-three-columns ul,
.block-form-wizard .block-three-columns p,
.block-form-wizard .block-column-left ul,
.block-form-wizard .block-column-left p,
.block-form-wizard .block-column-right ul,
.block-form-wizard .block-column-right p {
margin: 1rem 1rem 0; }
.block-form-wizard .block-three-columns li,
.block-form-wizard .block-column-left li,
.block-form-wizard .block-column-right li {
margin-bottom: 0; }
.block-form-wizard .block-three-columns li + li,
.block-form-wizard .block-column-left li + li,
.block-form-wizard .block-column-right li + li {
margin-top: 0.5rem; }
.form-wizard-list {
margin-bottom: -1px !important;
margin-left: -1.25rem;
margin-right: -1.25rem; }
.form-wizard-list li {
list-style: none;
margin-left: 0;
background: url("/includes/img/form-radio-grey-27.png") 1.25rem center no-repeat;
background-size: 1.6875rem;
border-top: 0.0625rem solid #f2f2f2;
margin-bottom: 0;
padding-left: 0; }
.form-wizard-list li:hover {
background-color: #ffcc33;
background-image: url(/includes/img/form-radio-white.png); }
.form-wizard-list a {
color: red;
display: block;
padding: 1.25rem 1.25rem 1.25rem 4rem; }
.form-wizard-list h3, .form-wizard-list p {
margin: 0; }
.form-wizard-list p {
color: #002c5e;
font-weight: 300; }
.page-navigation {
margin: 1.25rem 0; }
.page-navigation__item {
margin-bottom: 0.625rem;
display: block;
position: relative;
padding-left: 1.25rem;
text-decoration: none;
color: #545454;
font-weight: normal;
font-size: 1.125rem; }
.page-navigation__item:before {
content: "";
position: absolute;
background-repeat: no-repeat;
top: 0.3125rem;
left: 0; }
.page-navigation__item:last-child {
margin-bottom: 0; }
.page-navigation__item:hover, .page-navigation__item:focus {
color: #00526E;
text-decoration: none; }
.page-navigation__item:hover:before, .page-navigation__item:focus:before {
top: 0.3125rem;
width: 0.9375rem;
height: 1.25rem; }
.page-navigation__item.active {
font-weight: 600;
color: #002c5e; }
.page-navigation__item.active:before {
top: 0.3125rem; }
/**
* Modal base class
*/
.modal {
position: absolute;
top: 4rem;
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
margin: 0;
z-index: 101;
background: #ffffff;
border: 1px solid #9b9b9b;
box-shadow: 0.1875rem 0.1875rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
font-weight: 400;
color: #000000;
/**
* Modal containing a list with selectable list items
*/
/**
* Modal having width 940px on large screen
*/
/**
* Modal having fixed padding and background color white
*/
/**
* Modal state: show above related element instead of below
*/
/**
* List inside modal
*/
/**
* Main subject in modal list item
*/
/**
* Metadata next to subject in modal list item
*/
/**
* modal close button
*/ }
.modal--fixed {
margin: auto !important;
position: absolute !important;
width: 95%;
max-width: 500px;
height: auto;
max-height: 37.5rem;
vertical-align: middle;
top: 0;
z-index: 1001;
display: none; }
@media only screen and (min-width: 641px) {
.modal--fixed {
width: 500px;
height: auto;
min-height: 0; } }
.modal--fixed__active {
position: fixed !important;
overflow: auto;
display: table-cell !important;
left: 0;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%; }
@media only screen and (min-width: 481px) {
.modal--fixed__active {
min-width: inherit;
min-height: inherit; } }
.modal--select {
position: absolute;
width: 100%;
max-height: 360px;
top: 100%; }
@media only screen and (min-width: 481px) {
.modal--select {
position: absolute;
min-width: 75%;
top: 100%;
max-height: 500px; } }
.modal--wide {
width: 95%;
max-width: 940px; }
@media only screen and (min-width: 961px) {
.modal--wide {
width: 940px; } }
.modal--light-padded {
padding: 1.25rem;
background-color: #ffffff; }
@media only screen and (min-width: 481px) {
.modal--light-padded {
padding: 2.5rem; } }
.modal--is-on-top {
top: auto !important;
bottom: 4.375rem; }
.modal__list {
margin-bottom: 0 !important;
overflow: auto; }
.modal__list li {
margin: 0 !important;
list-style: none;
font-size: 1rem; }
.modal__list li:last-child a {
border-bottom: 0 !important; }
.modal__list a {
display: block;
margin: 0;
overflow: auto;
padding: 1rem;
border-bottom: 1px solid #dcdcdc;
cursor: pointer;
color: #065ca9 !important; }
@media only screen and (min-width: 481px) {
.modal__list a {
margin: 0 1rem; } }
.modal__list a:hover, .modal__list a:focus {
margin: 0;
padding: 1rem;
border-bottom-color: #ffffff;
background: #dbe8f7;
color: #065ca9 !important; }
@media only screen and (min-width: 481px) {
.modal__list a:hover, .modal__list a:focus {
padding: 1rem 2rem; } }
.modal__list a:active, .modal__list a.is-active {
margin: 0;
padding: 1rem;
border-bottom-color: #ffffff;
background: #ccdef4; }
@media only screen and (min-width: 481px) {
.modal__list a:active, .modal__list a.is-active {
padding: 1rem 2rem; } }
.modal__list__subject {
float: none;
font-weight: 600;
display: block; }
@media only screen and (min-width: 481px) {
.modal__list__subject {
float: left;
width: 50%;
overflow: hidden; } }
.modal__list__meta {
float: none;
color: #545454;
display: block;
font-size: 0.9rem; }
@media only screen and (min-width: 481px) {
.modal__list__meta {
float: right;
width: 50%; } }
.modal__heading {
position: relative;
margin-bottom: 20px;
color: #002c5e; }
.modal__heading h2 {
display: inline;
font-size: 1.75rem;
font-weight: 300; }
@media only screen and (min-width: 481px) {
.modal__heading h2 {
font-size: 2rem; } }
.modal__heading h4 {
font-size: 1.25rem;
margin-top: 20px;
font-weight: 700; }
.modal__close {
position: absolute;
top: -1rem;
right: -1rem;
padding: 1rem; }
.modal__close:before {
content: '';
position: relative;
top: 4px;
display: inline-block;
width: 20px;
height: 20px;
cursor: pointer;
background-image: url(/includes/img/icon-x-dark-blue-2.png);
background-repeat: no-repeat; }
.modal__close--orange:before {
content: '';
background-repeat: no-repeat;
background-image: url(/includes/img/svg/compressed/icon-x-orange.svg); }
.is-active .modal__close--orange:before {
content: ' '; }
/**
* Modal with arrow
*/
.modal--arrow,
.modal-arrow {
position: absolute;
top: 4.25rem;
right: -0.625rem;
width: 20rem;
padding: 1rem 1rem 0;
overflow: visible; }
.modal--arrow:before, .modal--arrow:after,
.modal-arrow:before,
.modal-arrow:after {
position: absolute;
width: 0;
height: 0;
content: '';
display: none; }
@media only screen and (min-width: 641px) {
.modal--arrow:before, .modal--arrow:after,
.modal-arrow:before,
.modal-arrow:after {
display: block; } }
.modal--arrow:after,
.modal-arrow:after {
top: -1.0625rem;
right: 1.1875rem;
z-index: 99;
border-left: 1.0625rem solid transparent;
border-right: 1.0625rem solid transparent;
border-bottom: 1.0625rem solid #9b9b9b; }
.modal--arrow:before,
.modal-arrow:before {
top: -1rem;
right: 1.25rem;
z-index: 100;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-bottom: 1rem solid #ffffff; }
.modal--arrow p,
.modal--arrow p:last-child,
.modal-arrow p,
.modal-arrow p:last-child {
margin-bottom: 1rem !important; }
.modal--arrow-left {
top: 39px;
left: 0px; }
@media only screen and (min-width: 641px) {
.modal--arrow-left {
top: -1.5625rem;
left: 2.8125rem;
right: auto;
/* From medium, and larger nowrap. */ } }
.modal--arrow-left:before {
right: 107px; }
@media only screen and (min-width: 641px) {
.modal--arrow-left:before {
left: -1.9375rem;
top: 1.25rem;
z-index: 100;
border-top: 1rem solid transparent;
border-bottom: 1rem solid transparent;
border-right: 1rem solid #ffffff; } }
.modal--arrow-left:after {
right: 106px; }
@media only screen and (min-width: 641px) {
.modal--arrow-left:after {
left: -2.125rem;
top: 1.1875rem;
z-index: 99;
border-top: 1.0625rem solid transparent;
border-bottom: 1.0625rem solid transparent;
border-right: 1.0625rem solid #9b9b9b; } }
.modal--arrow-small {
position: absolute;
top: 2.8125rem;
right: -0.625rem;
width: 5.9375rem;
padding: 0.625rem;
overflow: visible;
z-index: 100; }
.modal--arrow-small:before, .modal--arrow-small:after {
position: absolute;
width: 0;
height: 0;
content: '';
display: block; }
.modal--arrow-small:after {
top: -0.6875rem;
right: 0.9375rem;
z-index: 99;
border-left: 0.625rem solid transparent;
border-right: 0.625rem solid transparent;
border-bottom: 0.625rem solid #9b9b9b; }
.modal--arrow-small:before {
top: -0.625rem;
right: 0.9375rem;
z-index: 101;
border-left: 0.625rem solid transparent;
border-right: 0.625rem solid transparent;
border-bottom: 0.625rem solid #ffffff; }
.modal--arrow-small p,
.modal--arrow-small p:last-child {
margin-bottom: 0.625rem !important; }
.modal--arrow-right {
min-height: 5rem;
top: 39px;
left: 0px; }
@media only screen and (min-width: 641px) {
.modal--arrow-right {
top: -0.3125rem;
left: -20.625rem;
right: auto;
/* From medium, and larger nowrap. */ } }
.modal--arrow-right:before {
left: 318px;
/* */ }
@media only screen and (min-width: 641px) {
.modal--arrow-right:before {
right: -1.9375rem;
top: 1.25rem;
z-index: 100;
border: 1rem solid transparent;
border-left: 1rem solid #ffffff; } }
.modal--arrow-right:after {
left: 319px; }
@media only screen and (min-width: 641px) {
.modal--arrow-right:after {
right: -2.125rem;
top: 1.1875rem;
z-index: 99;
border: 1.0625rem solid transparent;
border-left: 1.0625rem solid #9b9b9b; } }
.block--is-removable .modal--arrow:before {
right: 4.875rem; }
.block--is-removable .modal--arrow:after {
right: 4.8125rem; }
.modal--arrow-down {
top: 39px;
right: -114px; }
.modal--arrow-down:before {
right: 107px; }
.modal--arrow-down:after {
right: 106px; }
/**
* The cancel button in the modal has a margin
* so that on narrow devices the buttons don't touch
* this padding makes sure that there is
* no double whitespace
*
* #TODO move this styling to the button instead containing modal.
*/
.modal.modal--fixed {
padding-bottom: 0; }
/**
* Exceptions for #mijnkvk
*/
.mijn-kvk-zoek-bedrijf-search .modal--select {
top: 3.375rem; }
.mijn-kvk-zoek-bedrijf-search .modal--select {
margin-bottom: 0; }
/**
* Background overlay for modals, disables interaction with rest of website
*/
.modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
overflow: hidden;
background-color: transparent;
opacity: 0.5; }
@media only screen and (min-width: 481px) {
.modal-overlay {
background: transparent; } }
.modal-overlay-background {
background-color: #000;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
display: block;
width: 100%;
height: 100%;
z-index: 1000;
opacity: 0.3; }
/**
* Body state class when overlay modal is shown, to disable scrolling on body
*/
.body--contains-modal {
overflow: hidden; }
/**
* modal-new
* Used in combination with .modal-new__content .is-active
* The responsive modal which is always displayed in the middle of the viewport.
* [1] On small screen it covers the whole screen
* [2] This sets the container in the middle
*
*
*/
.modal-new {
position: fixed;
height: auto;
visibility: hidden;
min-width: 100%;
min-height: 100%;
max-height: 100%;
z-index: 1001;
top: 50%;
left: 50%;
background-color: #ffffff;
border: 1px solid #9b9b9b;
box-shadow: 0.1875rem 0.1875rem 0.3125rem 0 rgba(0, 0, 0, 0.2);
overflow-y: auto;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.7);
transform: translateX(-50%) translateY(-50%) scale(0.7);
opacity: 0.7; }
@media only screen and (min-width: 481px) {
.modal-new {
min-width: inherit;
min-height: inherit;
width: 80%;
max-width: 640px; } }
.modal-new--wide {
max-width: 940px; }
@media only screen and (min-width: 721px) {
.modal-new--tall {
height: 854px; } }
.modal-new--small {
max-width: 500px; }
.modal-new__heading {
position: relative;
margin-bottom: 20px;
color: #002c5e; }
.modal-new__heading h2 {
display: inline;
font-size: 1.75rem;
font-weight: 300;
margin-left: 0; }
@media only screen and (min-width: 481px) {
.modal-new__heading h2 {
font-size: 2rem; } }
.modal-new__close {
float: right;
height: auto;
width: 1.5rem;
margin-right: 0;
background: transparent;
border: none;
padding: 0;
top: 7px;
position: relative; }
.modal-new__close:hover .icons--icon-close, .modal-new__close:active .icons--icon-close {
stroke: #00526E; }
/**
* This class is used to show/ hide the modal
* Is set via the javascript overlay-modal.js/openModalCenter
*/
.is-active {
visibility: visible; }
.is-active.modal-new {
opacity: 1;
-webkit-transform: scale(1) translateX(-50%) translateY(-50%);
transform: scale(1) translateX(-50%) translateY(-50%);
transition: all 0.3s; }
/**
* modal__content
*
* This wraps the content of the modal
*/
.modal-new__content {
position: relative;
margin: 0 auto;
height: 100%;
visibility: inherit;
font-weight: 400;
color: #002c5e;
padding: 1.25rem;
background-color: #ffffff; }
@media only screen and (min-width: 481px) {
.modal-new__content {
height: auto;
padding: 2.5rem; } }
.modal-new__content p {
margin-bottom: 20px; }
.modal-new__content .checkbox-new__label {
font-size: 18px; }
/**
* modal-new__overlay
*
* The background overlay
* This element is always present in the html
*/
.modal-new__overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: #000000;
transition: all 0.3s; }
/**
* modal-new__overlay
*
* This is added to the overlay via javascript when the modal is opened.
*/
.is-active ~ .modal-new__overlay {
opacity: 0.3;
visibility: visible; }
/**
* Add a icon-speech-bubble
* FIXME: temporary because of not working svg solution
* */
.modal-new__icon {
margin-bottom: 0.625rem;
height: 2.6875rem;
background-repeat: no-repeat;
background-position: center;
background-image: url(/src/icons/svg/compressed/icon-speech-bubble.svg); }
/**
* Make a p containing a button and p align center
* */
@media only screen and (min-width: 721px) {
.modal-new__cta {
padding-left: 20%; } }
/**
* Posisiton text absolute
* */
.modal-new__text {
position: absolute;
margin-top: 0.625rem; }
/**
* Post module
*
* Used for post/articles in a timeline
*/
.post__datetime {
margin-right: 1.25rem;
color: #545454;
font-size: 0.875rem;
font-weight: 400; }
/*
* #FORM
*/
/**
* This is the old style form class
* For new style see _form-elements.scss
*
* #TODO get rid of this evil piece of specificity
*/
.form {
/**
* General styling radio buttons & checkboxes
*/
/**
* Vertical radio group
*/
/**
* Radio button styling
*/
/**
* Group input fields inline
*/
/**
* Address fields
*/
/**
* Add / remove fieldsets
*/
/*-----------------------*\
#FIELD-SIZES
\*-----------------------*/ }
.form .row {
display: block;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 0.625rem !important;
margin-left: 0 !important; }
.form label {
display: block;
font-weight: 600;
margin-bottom: 0.75rem; }
.form label:empty {
margin-bottom: 0; }
.form label .error {
color: #ff3333;
display: block; }
.form p.error,
.form div.error,
.form span.error {
color: #ff3333;
font-weight: 400; }
.form input[type="number"],
.form input[type="email"],
.form input[type="password"],
.form textarea,
.form .form-select, .form .form__select {
margin-bottom: 1rem;
padding: 0 0.625rem;
background-color: #ffffff;
border: 1px solid #9b9b9b;
font-size: 1.125rem;
color: #545454; }
.form input[type="number"]:focus, .form input[type="number"]:active,
.form input[type="email"]:focus,
.form input[type="email"]:active,
.form input[type="password"]:focus,
.form input[type="password"]:active,
.form textarea:focus,
.form textarea:active,
.form .form-select:focus,
.form .form-select:active, .form .form__select:focus, .form .form__select:active {
border-color: #545454; }
.form input[type="number"].error,
.form input[type="email"].error,
.form input[type="password"].error,
.form textarea.error,
.form .form-select.error, .form .form__select.error {
border-color: #ff3333; }
.form input[type="password"],
.form input[type="email"],
.form textarea {
display: block;
display: inline-block; }
.form input[type="number"],
.form input[type="password"],
.form .form-select, .form .form__select {
height: 3.125rem;
line-height: 1rem; }
.form input[type="number"] {
padding-right: 0; }
.form textarea {
height: 9.3125rem;
line-height: 1.375rem;
max-width: 41.25rem;
padding: 0.625rem;
width: 100%; }
.form .radio,
.form .checkbox {
margin-bottom: 1rem;
position: relative;
cursor: pointer; }
.form .radio.regular span,
.form .checkbox.regular span {
font-weight: 400; }
.form .radio input,
.form .checkbox input {
opacity: 0;
outline: 0;
position: absolute; }
.form .radio input:focus + span,
.form .checkbox input:focus + span {
outline: 1px dotted #000000; }
.form .radio span,
.form .checkbox span {
font-weight: 400;
padding-left: 1.875rem;
background-size: 1.125rem;
display: block; }
.form .radio .explanation,
.form .checkbox .explanation {
background: #ffffff !important;
display: none;
margin-bottom: 0;
margin-top: 0.5rem;
padding: 0.5rem 0.75rem;
margin-left: 1.875rem; }
.form .radio em,
.form .checkbox em {
color: #545454;
font-weight: normal;
padding-top: 0.25rem;
padding-left: 1.875rem; }
.form .radiogroup-vertical .radio,
.form .radiogroup-vertical .radio + .radio {
margin-left: 0;
display: block; }
.form .radio {
display: inline-block; }
.form .radio + .radio {
margin-left: 1rem; }
.form .radio.checked span {
background-image: url(/includes/img/form-radio-selected-grey-18.png); }
.form .radio.checked .explanation {
display: block; }
.form .radio input:checked + span {
background-image: url(/includes/img/form-radio-selected-grey-18.png); }
.form .radio input:checked ~ .explanation {
display: block; }
.form .radio span {
background: url(/includes/img/form-radio-grey-18.png) left 0px no-repeat; }
.form .radio span:before {
content: url(/includes/img/form-radio-selected-grey-18.png);
display: none; }
.form .radio.white.checked span {
background-image: url(/includes/img/form-radio-selected-white-18.png); }
.form .radio.white input:checked + span {
background-image: url(/includes/img/form-radio-selected-white-18.png); }
.form .radio.white span {
background: url(/includes/img/form-radio-white-18.png) left 0px no-repeat; }
.form .radio.white span:before {
content: url(/includes/img/form-radio-selected-white-18.png);
display: none; }
.form .checkbox.checked span {
background-image: url(/includes/img/icon-check-blue-checked.png); }
.form .checkbox input:checked + span {
background-image: url(/includes/img/icon-check-blue-checked.png); }
.form .checkbox span {
background: url(/includes/img/icon-check-blue-unchecked.png) left 0px no-repeat; }
.form .checkbox span:before {
content: url(/includes/img/icon-check-blue-unchecked.png);
display: none; }
.form .checkbox.white.checked span {
background-image: url(/includes/img/form-checkbox-checked-white-18.png); }
.form .checkbox.white input:checked + span {
background-image: url(/includes/img/form-checkbox-checked-white-18.png); }
.form .checkbox.white span {
background: url(/includes/img/form-checkbox-white-18.png) left 0px no-repeat; }
.form .checkbox.white span:before {
content: url(/includes/img/form-checkbox-checked-white-18.png);
display: none; }
.form .max-checkbox-error {
display: none; }
.form hr {
border: 0;
border-top: 1px solid #f2f2f2;
height: 0;
margin: 0 -1.5rem 1rem; }
.form .group {
margin-bottom: 0; }
.form .group-inline {
display: inline-block;
margin-bottom: 0; }
.form .group-inline + .group-inline {
margin-left: 1rem; }
.form .explanation {
color: #545454;
font-size: 0.875rem;
line-height: 1.125rem;
margin-bottom: 1rem; }
.form .explanation p, .form .explanation ul, .form .explanation li {
margin-bottom: 0.25rem; }
.form .address-prefill {
margin-bottom: 1rem; }
.form .address-prefill.error {
color: #ff3333; }
.form .address-fields {
display: none; }
.form .postcode {
width: 6.625rem;
text-transform: uppercase; }
.form .postcode.placeholder {
color: #9b9b9b;
font-weight: 300;
opacity: 1; }
.form .postcode::-webkit-input-placeholder {
color: #9b9b9b;
font-weight: 300;
opacity: 1; }
.form .postcode:-moz-placeholder {
color: #9b9b9b;
font-weight: 300;
opacity: 1; }
.form .postcode::-moz-placeholder {
color: #9b9b9b;
font-weight: 300;
opacity: 1; }
.form .postcode:-ms-input-placeholder {
color: #9b9b9b;
font-weight: 300;
opacity: 1; }
.form .huisnummer.placeholder {
color: #9b9b9b;
font-weight: 300;
opacity: 1; }
.form .huisnummer::-webkit-input-placeholder {
color: #9b9b9b;
font-weight: 300;
opacity: 1; }
.form .huisnummer:-moz-placeholder {
color: #9b9b9b;
font-weight: 300;
opacity: 1; }
.form .huisnummer::-moz-placeholder {
color: #9b9b9b;
font-weight: 300;
opacity: 1; }
.form .huisnummer:-ms-input-placeholder {
color: #9b9b9b;
font-weight: 300;
opacity: 1; }
.form .element-inline {
display: inline-block; }
.form .fieldset-clonable .button-remove {
display: none; }
.form .fieldset-removable input[type=text],
.form .fieldset-removable label {
display: inline;
display: inline-block; }
.form .tiny {
width: 4.125rem; }
.form .small {
width: 7.125rem; }
.form .medium {
width: 12.125rem; }
.form .large {
max-width: 100%;
min-width: 100%; }
@media only screen and (min-width: 641px) {
.form .large {
min-width: 26.25rem; } }
.form input[readonly] {
display: inline;
display: inline-block;
height: 3.125rem;
padding: 1rem;
background-color: #f2f2f2;
border: 1px solid #9b9b9b;
color: #9b9b9b; }
/**
* Base select element
*/
.form-select,
.form__select {
box-sizing: border-box;
position: relative; }
.form-select:before,
.form__select:before {
background: #545454 url(/includes/img/form-select-arrow.png) center center no-repeat;
background-size: 1rem 0.875rem;
bottom: 0;
content: '';
position: absolute;
right: 0;
top: 0;
width: 2.625rem; }
.form-select.focus,
.form__select.focus {
outline: 1px dotted #000000; }
.form-select p,
.form__select p {
height: 2.625rem;
line-height: 2.5rem;
margin-bottom: 0;
overflow: hidden; }
.form-select select,
.form__select select {
opacity: 0.01;
background: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%; }
/**
* Position add fieldset-button set to visually couple with block above
*/
.form__add-fieldset {
margin-top: -0.625rem;
margin-bottom: 2.5rem; }
/**
* Payment fieldset with field for euro's and cents
*/
.form__payment .group-inline + .group-inline {
margin-left: 0; }
.form__payment__separator {
font-weight: 600; }
/**
* If button is last then no margin-bottom
*/
.form__button--is-last:last-child {
margin-bottom: 0; }
/**
* comment plz
*/
.form-workshops-filter {
float: left;
width: 100%; }
/*
* #FORM NEW
* This is the new style for specific elements inside the new form
*/
.row {
/* This is just needed for the new styling, remove this when the remove class are removed */
/**
* Sets an indent to children answers in forms
*/
/**
* Sets an indent to children answers in forms
*/
/**
* Different Enumeration variations in forms example arrow/bullets
*/ }
.row .multiple-inputfields {
float: left;
width: 100%; }
.row .multiple-inputfields__input {
float: left; }
.row .answer-children {
margin-top: -0.625rem;
margin-left: 1.875rem;
margin-bottom: 0.625rem; }
.row .indent-child {
margin-left: 1.875rem; }
.row .enumeration--arrow:before {
content: '';
width: 0.625rem;
height: 0.9375rem;
top: 0.125rem;
display: block;
float: left;
position: relative;
background-image: url("/includes/img/svg/arrow-thin-right-blue50.svg"); }
.row .enumeration--arrow a {
color: #00526E;
padding-left: 0.9375rem; }
/**
* Sets an separator between the parent element and the children
*/
.children-separator {
margin: 0.3125rem 0 1.25rem 0;
padding: 1.25rem 0 0.9375rem 0;
border-top: 0.0625rem solid #bebebe;
border-bottom: 0.0625rem solid #bebebe; }
.children-separator .children-separator {
border-bottom: none;
margin: 1.25rem 0 0.9375rem;
padding: 1.25rem 0 0; }
.box .children-separator:last-child {
border-bottom: none;
margin: 1.25rem 0 0.9375rem;
padding: 1.25rem 0 0; }
.fieldset-indent {
margin-left: 2.25rem; }
/**
* Three options for the plus-element used inside the new forms
* 1. plus-element: One inputfield large variant
* 2. Plus-element--small: One inputfield small variant
* 3. Plus-element--multiplefield: One inputfield + datepicker on one row
*/
.plus-element {
padding-right: 2.5rem;
position: relative;
width: 100%; }
.plus-element input {
float: left;
max-width: 34.75rem;
width: 100%; }
.plus-element .icon--remove-new {
right: -0.25rem;
top: 0.625rem;
position: absolute; }
/*
* 2. Plus-element--small: One inputfield small variant
*/
.plus-element--small {
max-width: 23.125rem;
width: 100%; }
.plus-element--small input {
width: 100%; }
/*
* 3. Plus-element--multiplefield: One inputfield + datepicker on one row
*/
.plus-element--multiplefield {
margin-bottom: -0.3125rem; }
.plus-element--multiplefield input {
margin-bottom: 0.9375rem !important;
max-width: none;
width: 98%; }
.plus-element--multiplefield .picker__wrapper {
float: left;
margin-bottom: 0;
padding: 0;
width: 98%; }
.plus-element--multiplefield .picker__wrapper label {
margin-bottom: 0; }
.plus-element--multiplefield .picker__wrapper input {
float: none;
width: 100%; }
.plus-element--multiplefield .picker__wrapper .calendar-icon {
right: 0.0625rem; }
@media only screen and (min-width: 961px) {
.plus-element--multiplefield .picker__wrapper {
width: 34.7%; }
.plus-element--multiplefield input {
width: 61.5%; } }
.plus-element--multiplefield .icon--remove-new {
top: 2.8125rem !important; }
@media only screen and (min-width: 961px) {
.plus-element--multiplefield .icon--remove-new {
top: 0.9375rem !important; } }
.plus-element--multiplefield:last-child {
margin-bottom: 0.3125rem; }
.address-check {
position: relative;
margin-bottom: 1.25rem; }
.address-check .group-inline {
float: left;
margin-bottom: 0.625rem; }
.address-check .address-prefill {
height: auto;
background: transparent;
border-color: transparent;
padding: 0;
font-weight: 400; }
.address-check .address-prefill > div {
margin-top: -1.25rem;
height: 2.625rem; }
.address-check .address-prefill > div p {
position: relative;
top: 0.5rem; }
.address-prefill {
margin-bottom: 1rem; }
.address-check__button--search {
height: 3.125rem;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem; }
.address-check__search {
position: relative; }
.address-check__search .button {
margin-bottom: 27px;
margin-top: 10px; }
.address-check__results {
position: absolute;
top: 4.875rem;
left: 0.25rem;
overflow-y: auto;
max-height: 400px;
z-index: 101;
opacity: 0;
padding: 0 1rem;
background-color: #ffffff;
border: #9b9b9b 1px solid; }
.address-check__results li {
list-style: none !important;
margin: 0 -1rem;
cursor: pointer;
background: none;
border-bottom: #9b9b9b 1px solid;
padding: 1.5rem 1rem;
font-weight: 600;
color: #065ca9; }
.address-check__results li:last-child {
border-bottom: none; }
.address-check__results li:hover, .address-check__results li:focus {
background-color: #ccdef4; }
.address-check__results li.address-check__results-message {
padding: 0.375rem 1rem;
background-color: #dcdcdc;
border-bottom: 0;
font-size: 0.75rem;
font-weight: normal;
color: #000000;
cursor: default; }
.address-check__results li.address-check__results-message:hover, .address-check__results li.address-check__results-message:focus {
background-color: #dcdcdc; }
.address-check__results span.result-address {
margin-right: 2rem; }
/**
* Specific margin for implementation horizontal tabs for old orderstreet structure
*/
.address-check--orderstreet {
margin-left: -0.25rem;
margin-right: -0.25rem; }
.companyselector {
position: relative;
margin-bottom: 1.25rem;
/**
* Message bar atop the selection list
*/
/**
* Primary part of __message
*/
/**
* #FIXME specifity is bad, mmmkay!
*/ }
.companyselector p {
margin-bottom: 0.5rem; }
.companyselector__message {
padding: 0.375rem 1rem;
background-color: #dcdcdc;
border-bottom: 0;
font-size: 0.75rem;
font-weight: normal;
color: #000000;
cursor: default; }
.companyselector__message:hover, .companyselector__message:focus {
background-color: #dcdcdc; }
.companyselector__message-primary {
font-weight: 600; }
.companyselector .modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
overflow: hidden;
background-color: #ffffff; }
@media only screen and (min-width: 481px) {
.companyselector .modal-overlay {
background: transparent; } }
/*-------------------*\
#FORM-FEEDBACK
\*-------------------*/
.form-feedback,
.block-content-feedback {
clear: both;
padding-top: 0;
background-color: transparent !important;
/**
* rating with stars
*/
/**
*
*/
/**
*
*/
/**
*
*/ }
@media only screen and (min-width: 721px) {
.form-feedback,
.block-content-feedback {
margin-bottom: 2.5rem; } }
.form-feedback h2,
.block-content-feedback h2 {
margin: 0 0 1rem;
padding: 0;
background-color: transparent !important;
border-top: 0; }
.form-feedback h2 + p,
.block-content-feedback h2 + p {
margin-bottom: 0; }
.form-feedback .button.yes:hover,
.form-feedback .button.no:hover,
.block-content-feedback .button.yes:hover,
.block-content-feedback .button.no:hover {
background-color: #ccdef4; }
.form-feedback .button.yes:focus, .form-feedback .button.yes:active,
.form-feedback .button.no:focus,
.form-feedback .button.no:active,
.block-content-feedback .button.yes:focus,
.block-content-feedback .button.yes:active,
.block-content-feedback .button.no:focus,
.block-content-feedback .button.no:active {
background-color: #002c5e;
color: #ffffff; }
.form-feedback .button.yes.choice,
.form-feedback .button.no.choice,
.form-feedback .button-new.yes.choice,
.form-feedback .button-new.no.choice,
.block-content-feedback .button.yes.choice,
.block-content-feedback .button.no.choice,
.block-content-feedback .button-new.yes.choice,
.block-content-feedback .button-new.no.choice {
background-color: #002c5e;
color: #ffffff !important; }
.form-feedback .feedback,
.form-feedback .contact,
.form-feedback .thanks,
.block-content-feedback .feedback,
.block-content-feedback .contact,
.block-content-feedback .thanks {
display: none; }
.form-feedback .feedback,
.form-feedback .button-yellow,
.form-feedback .button--yellow,
.form-feedback .thanks,
.block-content-feedback .feedback,
.block-content-feedback .button-yellow,
.block-content-feedback .button--yellow,
.block-content-feedback .thanks {
margin-bottom: 0; }
.form-feedback .feedback,
.block-content-feedback .feedback {
margin-top: 1rem; }
.form-feedback textarea,
.block-content-feedback textarea {
border: 2px solid #9b9b9b;
display: block;
height: 6.5rem;
margin-bottom: 1rem;
max-width: 41.25rem;
padding: 1rem;
width: 100%; }
.form-feedback textarea.placeholder,
.block-content-feedback textarea.placeholder {
color: #7a7a7a;
font-weight: inherit;
opacity: 1; }
.form-feedback textarea::-webkit-input-placeholder,
.block-content-feedback textarea::-webkit-input-placeholder {
color: #7a7a7a;
font-weight: inherit;
opacity: 1; }
.form-feedback textarea:-moz-placeholder,
.block-content-feedback textarea:-moz-placeholder {
color: #7a7a7a;
font-weight: inherit;
opacity: 1; }
.form-feedback textarea::-moz-placeholder,
.block-content-feedback textarea::-moz-placeholder {
color: #7a7a7a;
font-weight: inherit;
opacity: 1; }
.form-feedback textarea:-ms-input-placeholder,
.block-content-feedback textarea:-ms-input-placeholder {
color: #7a7a7a;
font-weight: inherit;
opacity: 1; }
.form-feedback textarea:focus.placeholder,
.block-content-feedback textarea:focus.placeholder {
color: #9b9b9b;
font-weight: inherit;
opacity: 1; }
.form-feedback textarea:focus::-webkit-input-placeholder,
.block-content-feedback textarea:focus::-webkit-input-placeholder {
color: #9b9b9b;
font-weight: inherit;
opacity: 1; }
.form-feedback textarea:focus:-moz-placeholder,
.block-content-feedback textarea:focus:-moz-placeholder {
color: #9b9b9b;
font-weight: inherit;
opacity: 1; }
.form-feedback textarea:focus::-moz-placeholder,
.block-content-feedback textarea:focus::-moz-placeholder {
color: #9b9b9b;
font-weight: inherit;
opacity: 1; }
.form-feedback textarea:focus:-ms-input-placeholder,
.block-content-feedback textarea:focus:-ms-input-placeholder {
color: #9b9b9b;
font-weight: inherit;
opacity: 1; }
.form-feedback .rating-wrapper,
.block-content-feedback .rating-wrapper {
position: relative;
display: block;
width: 242px;
height: 39px;
text-align: center;
margin: 1.25rem 0; }
.form-feedback .rating-label,
.block-content-feedback .rating-label {
position: relative;
z-index: 1000;
margin: 0;
padding: 0;
display: inline-block;
text-align: center;
width: 45px;
height: 39px;
cursor: pointer;
text-indent: -300em; }
.form-feedback .stars,
.block-content-feedback .stars {
background-image: url(/includes/img/ratings.png);
position: absolute;
right: auto;
left: 0;
top: 0;
bottom: auto;
background-position: 0 0;
background-repeat: no-repeat;
width: 100%;
height: 39px;
z-index: 1; }
.form-feedback .rating-input:checked ~ .stars,
.block-content-feedback .rating-input:checked ~ .stars {
position: absolute;
right: auto;
left: 0;
top: 0;
bottom: auto; }
.form-feedback .st1,
.block-content-feedback .st1 {
background-position: 0 -40px; }
.form-feedback .st2,
.block-content-feedback .st2 {
background-position: 0 -80px; }
.form-feedback .st3,
.block-content-feedback .st3 {
background-position: 0 -120px; }
.form-feedback .st4,
.block-content-feedback .st4 {
background-position: 0 -160px; }
.form-feedback .st5,
.block-content-feedback .st5 {
background-position: 0 -200px; }
.form-feedback .rating-input,
.block-content-feedback .rating-input {
position: absolute;
right: 0;
left: -187.5rem;
top: 0;
bottom: 0; }
.form-feedback .button {
height: 51px;
line-height: 51px;
text-decoration: none; }
/*
* Everything related to a fieldset.
* Fieldsets are used in (o.a.) wijziginsformulieren to group questions.
*
*/
.fieldset {
/**
* #NOTE use new fieldset-levels.scss solution instead of zebra
* Sets a light-blue background color to a fieldset
*/ }
.fieldset__zebra {
margin-left: -1.25rem;
margin-right: -1.25rem;
padding: 0 1.25rem;
/**
* Light Styling variation for zebra in forms
*/
/**
* Dark Styling variation for zebra in forms
*/
/**
* Styling variation for zebra in forms if zebra is last element
*/ }
@media only screen and (min-width: 641px) {
.fieldset__zebra {
padding-top: 20px; } }
.fieldset__zebra h3,
.fieldset__zebra .h3 {
margin-bottom: 0.625rem;
padding-top: 0.625rem;
font-size: 1.2em;
font-weight: 600;
color: #002c5e; }
.fieldset__zebra--light {
background-color: #f0f5fc; }
.fieldset__zebra--dark {
background-color: #e1ecf9; }
.fieldset__zebra--last-child {
margin-bottom: -1.25rem; }
/**
* Fieldset separator
*
* This element creates a visual separation between two elements using a gradient.
* This creates a sort of depth to the page and the elements. Because the elements is used within a block class
* we must account for its padding.
*
*/
.fieldset-separator {
height: 7px;
margin-right: -1.25rem;
margin-bottom: 0.8125rem;
margin-left: -1.25rem;
padding-right: 1.25rem;
padding-left: 1.25rem;
background: linear-gradient(#dcdcdc, #ffffff); }
.fieldset-levels {
padding: 1.25rem 1.25rem 0 1.25rem;
margin-bottom: 1.25rem;
margin-left: -1.25rem;
margin-right: -1.25rem;
background-color: #f0f5fc; }
.fieldset-levels h3,
.fieldset-levels .h3 {
margin-bottom: 0.625rem;
padding-top: 0.625rem;
font-size: 1.2em;
font-weight: 600;
color: #002c5e; }
.fieldset-levels .fieldset-levels {
margin-bottom: -0.625rem;
background-color: #e1ecf9; }
.form-match-companies {
margin-bottom: 0px; }
.search-match-companies .form-search {
margin-bottom: 1.875rem;
margin-top: 0; }
@media only screen and (min-width: 481px) {
.search-match-companies .form-search {
margin-top: 1.875rem; } }
.filter-buttons .button-new {
margin-bottom: 1.25rem;
height: 3.5rem; }
@media only screen and (min-width: 641px) {
.filter-buttons .button-new {
margin-bottom: 2.625rem; } }
.filter-row {
margin-bottom: 1.25rem; }
.filter-row h4 {
margin-bottom: 1.25rem;
font-size: 1.25rem;
color: #002c5e;
font-weight: 700; }
.match-companies-result-count {
margin-bottom: 0.5rem;
text-align: center;
color: #002c5e;
font-weight: 600; }
.error-message {
text-align: center;
color: #ff3333;
margin-top: 1rem;
transition: all 0.5s ease; }
.ie8 input[type='text'].is-hidden {
display: none !important; }
.match-companies-logo {
width: auto;
margin-right: 1.25rem;
margin-top: 1.25rem; }
@media only screen and (min-width: 721px) {
.match-companies-logo {
float: right;
margin-top: 0; } }
.company-details-block {
margin-bottom: 0.75rem; }
.related-companies-logo {
width: auto;
display: none; }
@media only screen and (min-width: 481px) {
.related-companies-logo {
display: block !important; } }
.related-logos-block {
margin-bottom: 1rem; }
.related-logos-block a {
display: inline-block;
margin-top: 0.3125rem;
margin-right: 1.875rem; }
@media only screen and (min-width: 481px) {
.related-logos-block a {
margin-top: 1.25rem; } }
.related-logos-block span {
display: block; }
.related-company-name {
font-weight: 600;
text-decoration: underline;
display: block; }
@media only screen and (min-width: 481px) {
.related-company-name {
display: none !important; } }
.related-company-url {
text-decoration: underline;
font-weight: 600; }
.search-query-info {
margin: 1.875rem 0 1.875rem 0;
opacity: 0;
max-height: 0; }
.search-query-info.is-transitional {
max-height: 999px;
opacity: 1;
transition: opacity 3s, max-height 10s; }
.kvk-check {
margin-bottom: 0.75rem; }
.kvk-check:before {
display: inline-block;
height: 1.1875rem;
width: 1.1875rem;
margin-right: 0.5rem;
margin-bottom: -0.25rem;
background-repeat: no-repeat;
background-size: contain;
content: '';
background-image: url(/includes/img/svg/icon-check-orange.svg); }
.password-strength-meter {
width: 100%;
height: 4px;
margin: -19px 0 44px;
background-color: #dcdcdc; }
.password-strength-meter__bar {
width: 75%;
height: 4px;
background-color: #dcdcdc; }
.password-strength-meter__label {
float: right;
margin-top: 6px;
line-height: 16px;
font-size: 1em;
font-weight: 600;
color: #dcdcdc;
padding-left: 10px; }
.password-strength-meter__explain {
font-size: 0.875rem;
padding-top: 5px; }
/*
* Used in wijzigingsformulieren to create a small grey box which indicates a place to put an autograph.
*
*/
.signature-placeholder {
display: inline-block;
min-height: 50px;
padding: 1rem;
background-color: #f2f2f2;
border: 1px solid #9b9b9b;
font-size: 0.875rem;
font-weight: 600;
font-style: italic;
color: #9b9b9b;
text-align: center;
text-transform: uppercase; }
.form__signature-placeholder {
margin-bottom: 1.25rem; }
.scan-progress {
position: fixed;
width: 17.5rem; }
.scan-progress-bar {
background-color: #dcdcdc;
text-align: center;
position: relative; }
.scan-progress-bar div {
background-color: #ffcc33;
height: 100%;
left: 0;
position: absolute;
top: 0;
transition: all 0.5s;
width: 0;
z-index: 0; }
.scan-progress-bar p {
color: #002c5e;
font-weight: 600;
padding: 0.125rem 0;
position: relative; }
.scan-question,
.scan-form {
margin-top: 1.25rem;
padding-bottom: 0;
transition: all 0.3s;
padding-bottom: 0 !important; }
.scan-question h2,
.scan-form h2 {
margin-bottom: 0; }
.scan-question.is-open,
.scan-form.is-open {
padding-bottom: 1px; }
.scan-question.is-open h2,
.scan-form.is-open h2 {
background-color: #ffcc33;
margin-bottom: 1rem !important; }
.scan-question h2,
.scan-form h2 {
background-color: #dcdcdc;
margin-bottom: 0;
transition: all 0.3s; }
.scan-question h2:after,
.scan-form h2:after {
content: url(/includes/img/icon-check-dark-blue.png);
margin-left: 0.5rem;
position: relative;
top: 0.0625rem;
visibility: hidden; }
.scan-question .button-yellow,
.scan-form .button-yellow {
float: right; }
.scan-question-block,
.scan-form-block {
display: none;
margin-bottom: 0; }
.scan-question-block:before, .scan-question-block:after,
.scan-form-block:before,
.scan-form-block:after {
content: ' ';
display: table; }
.scan-question-block:after,
.scan-form-block:after {
clear: both; }
.scan-question-block.is-open,
.scan-form-block.is-open {
display: block; }
.scan-question-block .description,
.scan-form-block .description {
font-weight: 300;
font-size: 0.875rem; }
.scan-question-block ol > li,
.scan-form-block ol > li {
margin-bottom: 3.25rem; }
.scan-question-block ol > li:last-child,
.scan-form-block ol > li:last-child {
margin-bottom: inherit; }
.scan-question.is-done h2 {
background-color: #ccdef4;
cursor: pointer; }
.scan-question.is-done h2:after {
visibility: visible; }
.scan-question li {
margin-bottom: 1rem; }
.scan-question .error {
margin: -0.5rem 0 0.75rem; }
.scan-question .radio {
display: block;
margin: 0 0 1rem 0 !important; }
.scan-question .radio span {
font-weight: 400; }
.scan-question .scan-question-error {
color: #ff3333;
display: none;
margin-bottom: 0.5rem;
text-align: right; }
.scan-form-text {
margin-bottom: 0 !important;
padding-top: 1rem; }
.scan-form-contact {
display: none; }
/*
* Scan results
*/
.scan-result:before, .scan-result:after {
content: ' ';
display: table; }
.scan-result:after {
clear: both; }
.scan-result > div {
margin-bottom: 0; }
.scan-result .list-check-yellow li {
margin-bottom: 2.25rem !important; }
.scan-result .list-check-yellow li p a {
margin-left: 0; }
.scan-result__list-phases {
margin: 1.6875rem 0 1.5625rem 0;
padding-left: 0.8125rem; }
.scan-result__list-phases__item {
opacity: 0.7; }
.scan-result__list-phases__item--is-active {
opacity: 1; }
.scan-result__list-phases__item--is-active:before {
background-color: #ffcc33; }
.scan-result__list-phases__item--is-active .list--features {
margin-top: 0.25rem; }
.totalpointsscoring .scan-slider-block h3 {
font-weight: 700;
color: #002c5e;
font-size: 1rem; }
.scan-slider {
border: 0.25rem solid #dcdcdc;
border-radius: 1rem;
width: 100%;
height: 2.5rem; }
.scan-slider div {
height: 100%;
float: left; }
.scan-slider .slider-progress-bar-left,
.scan-slider .slider-progress-bar-right {
width: 50%;
height: 100%;
position: relative; }
.scan-slider .slider-progress-bar-left div,
.scan-slider .slider-progress-bar-right div {
background-color: #ffcc33;
height: 100%;
position: absolute;
top: 0;
width: 0;
z-index: 0; }
.scan-slider .slider-progress-bar-left p,
.scan-slider .slider-progress-bar-right p {
font-weight: 400;
line-height: 2rem;
margin: 0;
height: 100%;
color: #002c5e; }
.scan-slider .slider-progress-bar-left:before,
.scan-slider .slider-progress-bar-right:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0; }
.scan-slider .slider-progress-bar-left p.slider-text,
.scan-slider .slider-progress-bar-right p.slider-text {
display: inline-block;
vertical-align: middle; }
.scan-slider .slider-progress-bar-left {
border-right: 1px solid #dcdcdc; }
.scan-slider .slider-progress-bar-left div {
right: 0;
border-radius: 0.75em 0 0 0.75em; }
.scan-slider .slider-progress-bar-left p {
z-index: 2;
position: absolute;
right: 16px; }
.scan-slider .slider-progress-bar-right div {
left: 0;
border-radius: 0 0.75em 0.75em 0; }
.scan-slider .slider-progress-bar-right p {
z-index: 2;
position: absolute;
left: 16px; }
.eindoordeel .scan-slider {
border: 0.5rem solid #ccdef4;
height: 3.25rem; }
.eindoordeel .scan-slider .slider-progress-bar-left p,
.eindoordeel .scan-slider .slider-progress-bar-right p {
line-height: 2.25rem;
font-weight: 600;
font-size: 1.25rem; }
.eindoordeel .scan-slider .slider-progress-bar-left {
border-right: 1px solid #ccdef4; }
.eindoordeel .scan-slider .slider-progress-bar-left div {
border-radius: 0.5em 0 0 0.5em; }
.eindoordeel .scan-slider .slider-progress-bar-right div {
border-radius: 0 0.5em 0.5em 0; }
.scan-slider-block.eindoordeel h3 {
font-size: 1.25rem;
color: #002c5e; }
.scan-result-visual.categoryscoring {
float: left;
width: 9.375rem; }
.scan-result-visual.categoryscoring div {
height: 6.25rem;
background-color: #ffcc33;
color: #002c5e;
font-size: 2rem;
font-weight: 300;
line-height: 6.25rem;
text-align: center; }
/**
* two-side-bar-chart - similar to slider chart in reshoring scan
* Being used in Business Angels scan
*
*/
.two-side-bar-chart h3 {
font-weight: 700;
font-size: 1rem;
text-align: center;
margin-bottom: 10px; }
.two-side-bar-chart__bar {
border: 0.125rem solid #dcdcdc;
border-radius: 1rem;
width: 100%;
height: 2.5rem;
margin-bottom: 16px; }
.two-side-bar-chart__bar--left,
.two-side-bar-chart__bar--right {
float: left;
height: 100%;
width: 50%;
position: relative; }
.two-side-bar-chart__bar--left div,
.two-side-bar-chart__bar--right div {
background-color: #ffcc33;
height: 100%;
position: absolute;
top: 0;
width: 0;
z-index: 0; }
.two-side-bar-chart__bar--left {
border-right: 1px solid #dcdcdc; }
.two-side-bar-chart__bar--left div {
right: 0;
border-radius: 0.75em 0 0 0.75em; }
.two-side-bar-chart__bar--right div {
left: 0;
border-radius: 0 0.75em 0.75em 0; }
.section-desc {
margin-bottom: 15px; }
.section-desc:last-child {
margin-bottom: 0; }
.scan-result-text {
overflow: hidden; }
.scan-result-text img {
float: left;
vertical-align: middle; }
.scan-result-text img + p {
margin-left: 100px; }
.scan-result-text.categoryscoring {
padding: 1.625rem 0 0 1.25rem; }
.scan-result__list-result {
margin-top: 1.3125rem; }
.form hr.dots-light-blue {
border: 0;
height: 0.25rem;
margin: 0 0 1.25rem; }
.rel-options-list li {
list-style: none;
margin-left: 0;
margin-bottom: 0; }
.small-font {
font-weight: 300;
font-size: 0.8em; }
.relevance-table {
margin-top: 4.0625rem; }
.rel-col {
float: left;
display: inline;
padding: 0.625rem 0; }
.rel-options {
width: 33%;
float: right; }
.rel-question {
width: 63%; }
.rel-row {
clear: left;
margin-bottom: 0.9375rem;
overflow: auto;
list-style: none;
margin-left: -0.9375rem; }
.rel-row:nth-child(2n) {
background-color: #dbe8f7; }
.form .rel-options .radio span {
display: inline-block;
text-indent: -624999.9375rem; }
.scan-question .rel-options .radio, .scan-question .rel-options .heading {
display: inline-block;
margin: 0; }
.scan-question .rel-options .heading {
margin-right: 1rem;
margin-left: 2px; }
.scan-question .relevance-table li {
margin: 0; }
.scan-question li.rel-question {
margin-left: 1rem; }
.scan-question li.rel-question p {
margin-bottom: 0;
font-weight: 600;
line-height: 1.125rem; }
.block li.rel-row ul {
margin: 0; }
.block-list-expand li p {
margin-bottom: 0; }
/**
* Search field
* Used for general & handelsregister search
*/
.form-search,
.block-search-box {
display: block;
position: relative;
height: 3.625rem;
margin-bottom: 1.25rem !important;
border: 0.125rem solid #ffcc33;
background-color: #ffffff; }
.form-search.full-width,
.block-search-box.full-width {
margin-left: -1.25rem;
margin-right: -1.25rem;
margin-top: -1.25rem; }
.form-search.hidden,
.block-search-box.hidden {
display: none; }
.form-search.space-top,
.block-search-box.space-top {
margin-top: 1rem; }
.form-search .input,
.block-search-box .input {
height: 100%;
width: 100%;
padding: 0 3.4375rem 0 1.75rem;
background-color: transparent;
border: 0;
font-size: 1rem !important;
line-height: 1em;
cursor: pointer; }
.form-search .input.placeholder,
.block-search-box .input.placeholder {
color: #7a7a7a;
font-weight: inherit;
opacity: 1; }
.form-search .input::-webkit-input-placeholder,
.block-search-box .input::-webkit-input-placeholder {
color: #7a7a7a;
font-weight: inherit;
opacity: 1; }
.form-search .input:-moz-placeholder,
.block-search-box .input:-moz-placeholder {
color: #7a7a7a;
font-weight: inherit;
opacity: 1; }
.form-search .input::-moz-placeholder,
.block-search-box .input::-moz-placeholder {
color: #7a7a7a;
font-weight: inherit;
opacity: 1; }
.form-search .input:-ms-input-placeholder,
.block-search-box .input:-ms-input-placeholder {
color: #7a7a7a;
font-weight: inherit;
opacity: 1; }
.form-search .input:focus, .form-search .input.active,
.block-search-box .input:focus,
.block-search-box .input.active {
color: #000000;
cursor: text; }
.form-search .input:focus.placeholder, .form-search .input.active.placeholder,
.block-search-box .input:focus.placeholder,
.block-search-box .input.active.placeholder {
color: #9b9b9b;
font-weight: inherit;
opacity: 1; }
.form-search .input:focus::-webkit-input-placeholder, .form-search .input.active::-webkit-input-placeholder,
.block-search-box .input:focus::-webkit-input-placeholder,
.block-search-box .input.active::-webkit-input-placeholder {
color: #9b9b9b;
font-weight: inherit;
opacity: 1; }
.form-search .input:focus:-moz-placeholder, .form-search .input.active:-moz-placeholder,
.block-search-box .input:focus:-moz-placeholder,
.block-search-box .input.active:-moz-placeholder {
color: #9b9b9b;
font-weight: inherit;
opacity: 1; }
.form-search .input:focus::-moz-placeholder, .form-search .input.active::-moz-placeholder,
.block-search-box .input:focus::-moz-placeholder,
.block-search-box .input.active::-moz-placeholder {
color: #9b9b9b;
font-weight: inherit;
opacity: 1; }
.form-search .input:focus:-ms-input-placeholder, .form-search .input.active:-ms-input-placeholder,
.block-search-box .input:focus:-ms-input-placeholder,
.block-search-box .input.active:-ms-input-placeholder {
color: #9b9b9b;
font-weight: inherit;
opacity: 1; }
.form-search button,
.block-search-box button {
position: absolute;
height: 1.5rem;
width: 1.5rem;
overflow: hidden;
top: 1.0625rem;
right: 1rem;
background-image: url(/includes/img/svg/compressed/icon-search.svg);
background-size: 100%;
background-repeat: no-repeat;
background-color: transparent;
border: 0;
text-indent: 110%; }
.form-search button.has-searched,
.block-search-box button.has-searched {
background-image: url(/includes/img/svg/compressed/icon_close.svg); }
.form-search--questions,
.block-search-questions {
margin: 1.875rem 0 0; }
.form-search--questions h3,
.block-search-questions h3 {
font-size: 1.25rem;
font-weight: 700; }
.form-search--questions .result,
.block-search-questions .result {
display: none; }
.form-search--questions + .result,
.block-search-questions + .result {
margin-top: 1.25rem; }
.form-search--orange {
border: 0.125rem solid #FF8800;
border-radius: 0.3125rem; }
.form-search--orange button {
background-image: url(/includes/img/svg/compressed/icon-search-gray.svg); }
/**
* Form searchbox Yellow
*/
.form-search--yellow {
border: 0.125rem solid #ffcc33;
border-radius: 0.3125rem; }
.form-search--yellow button {
background-image: url(/includes/img/svg/compressed/icon-search-gray.svg); }
/**
* Hacks #FIXME
*/
.search .form-search,
.search .block-search-box,
.search .dots-light-blue {
margin-bottom: 0; }
/**
* Module search
* used in shop search
*/
.search {
padding: 0 1.25rem;
line-height: 1.5em;
/**
* Company search / select input field styling
*/ }
@media only screen and (min-width: 481px) {
.search {
padding: 0; } }
.search__company {
margin-bottom: 0 !important;
/**
* Status class used to display a checkmark to show a validated company
* has been selected in companyselector.
*/ }
.search__company--is-checked {
background: url(/includes/img/form-radio-selected-yellow-24.png) no-repeat;
padding: 0 2.5rem 0 0.625rem !important;
background-position: right 0.625rem center; }
.search__company .input {
margin-bottom: 0; }
/**
* Modifiers
*/
.search--advanced {
position: relative;
padding: 0 1.25rem 1.25rem; }
.search--advanced h2 {
font-weight: 400; }
@media only screen and (min-width: 481px) {
.search--advanced {
padding: 0; } }
.search--advanced__cancel {
background: url(/includes/img/icon-close-dark-blue.png);
background-size: 100%;
height: 1.6875rem;
position: absolute;
right: 1.5rem;
top: 1.1875rem;
width: 1.6875rem; }
.search--advanced__cancel:hover {
background-image: url(/includes/img/icon-close-white.png); }
/**
* Child classes
*/
.search__link-advanced-search {
background: url(/includes/img/icon-arrow-right-blue.png) left 0.25rem no-repeat;
color: #065ca9;
float: right;
padding-left: 1rem;
text-decoration: none; }
.search__link-advanced-search:hover {
text-decoration: underline; }
.search__options {
margin-top: 0.9375rem;
margin-bottom: 0.9375rem; }
.search__company-types {
margin-top: 1.5625rem; }
.search__archive {
background: url(/includes/img/icon-arrow-right-blue.png) left 0.25rem no-repeat;
color: #065ca9;
display: inline-block;
float: left;
margin-bottom: 0;
padding-left: 1rem;
text-decoration: none;
margin-top: 0.8125rem; }
.search__archive:hover {
text-decoration: underline; }
@media only screen and (min-width: 641px) {
.search__archive {
float: right; } }
/**
* Module searchinput
* search input with magnifier icon
*/
.searchinput {
position: relative;
padding: 0 1.25rem; }
.searchinput__input.text__input {
border: 1px solid #ffcc33;
padding-left: 1.25rem;
margin-bottom: 0.625rem; }
.searchinput__button-magnifier {
background-repeat: no-repeat;
background-size: 1.5rem;
border: 0;
height: 1.5rem;
overflow: hidden;
position: absolute;
right: 2.5rem;
text-indent: 100%;
top: 0.8125rem;
width: 1.5rem;
background: transparent url(/includes/img/icons-svg/icon-search.svg) no-repeat; }
@media only screen and (min-width: 481px) {
.searchinput__button-magnifier {
right: 1.25rem; } }
@media only screen and (min-width: 481px) {
.searchinput {
padding: 0; } }
/**
* Module search-result
* used in shop search
*/
.search-result__message {
color: #002c5e;
height: 2.5rem;
line-height: 2.5rem;
position: relative;
text-align: center;
z-index: 1; }
.search-result__message:before, .search-result__message:after {
content: ' ';
display: table; }
.search-result__message:after {
clear: both; }
.search-result__message .about {
display: none; }
/**
* Module no-results
* used in shop search
*/
.no-results {
background-color: #ffffff;
margin-top: 1rem;
padding: 1rem 1.25rem 1px; }
.no-results:before, .no-results:after {
content: ' ';
display: table; }
.no-results:after {
clear: both; }
.no-results .basic,
.no-results .advanced {
display: none; }
.no-results .query {
font-weight: 600; }
.no-results ul, .no-results p {
margin-bottom: 1rem; }
.no-results ul + ul, .no-results ul p, .no-results p + ul, .no-results p p {
margin-bottom: 0.5rem; }
.no-results h3 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem; }
input.error {
border: 1px solid red; }
.form--wijzigen__table {
/* gray border*/ }
.form--wijzigen__table .qr-code {
width: 7.8125rem;
height: 7.8125rem; }
.form--wijzigen__table .border-top--grey {
border-top: #dcdcdc solid 0.0625rem; }
.form--wijzigen__table .border-right--grey {
border-right: #dcdcdc solid 0.0625rem; }
.form--wijzigen__table .border-bottom--grey {
border-bottom: #dcdcdc solid 0.0625rem; }
.form--wijzigen__table .border-left--grey {
border-left: #dcdcdc solid 0.0625rem; }
/*----------------------*\
#STATE-CLASSES
\*----------------------*/
/**
* Add default margin to element
*/
.has-margin-bottom {
margin-bottom: 1.25rem !important; }
/**
* Add double default margin to element
*/
.has-margin-bottom-double {
margin-bottom: 2.5rem !important; }
.has-margin-bottom-negative {
margin-bottom: -0.625rem !important; }
.has-margin-top {
margin-top: 1.25rem !important; }
.has-margin-top-double {
margin-top: 2.5rem !important; }
.has-margin-top-negative {
margin-top: -1.25rem !important; }
.has-margin-left {
margin-left: 1.25rem !important; }
.has-margin-left-negative {
margin-left: -0.625rem !important; }
/**
* Element has a margin left(20px) on large viewport
*/
@media only screen and (min-width: 961px) {
.has-margin-left-large-up {
margin-left: 1.25rem; } }
/**
* Mobile has an margin bottom(20px)
*/
.has-margin-bottom-medium-down {
margin-bottom: 1.25rem; }
@media only screen and (min-width: 721px) {
.has-margin-bottom-medium-down {
margin-bottom: 0; } }
/**
* Add border radius
*/
.has-border-radius {
border-radius: 0.3125rem; }
/**
* Gives an element full width
*/
.has-full-width {
width: 100%; }
/**
*
*/
@media only screen and (min-width: 961px) {
.has-padding-left {
padding-left: 1.875rem; } }
.has-padding-bottom {
padding-bottom: 1.25rem; }
/**
*
*/
.has-padding-right {
padding-right: 1.875rem; }
.has-padding-mobile {
padding-bottom: 1.25rem; }
@media only screen and (min-width: 641px) {
.has-padding-mobile {
padding-bottom: 0; } }
.has-no-padding-top {
padding-top: 0 !important; }
.has-no-padding-top-medium-up {
padding-top: 1.25rem !important; }
@media only screen and (min-width: 721px) {
.has-no-padding-top-medium-up {
padding-top: 0 !important; } }
/**
* Mobile has an padding top double(40px)
*/
.has-padding-top-medium-down {
padding-top: 1.25rem; }
@media only screen and (min-width: 641px) {
.has-padding-top-medium-down {
padding-top: 0; } }
/**
* Styling for last element in a div
* Use for elements in forms and .block-classes
*/
.is-last-element {
margin-bottom: 0 !important; }
/**
* Show element
*/
.is-visible {
display: block !important; }
/**
* element block
*/
.is-block {
display: block; }
/**
* Default block
* from medium inline
* use in combination with .has-margin-left-large-up
*/
.is-inline-block-large-up {
display: block; }
@media only screen and (min-width: 961px) {
.is-inline-block-large-up {
display: inline-block; } }
/**
* Show element in table-cell state
*/
.is-visible-table-cell {
display: table-cell !important; }
/**
* Hide element
*/
.is-hidden {
display: none !important; }
@media only screen and (min-width: 721px) {
.is-hidden--mobile {
display: inline-block !important; } }
/**
* Deprecated!!!! Do not Use!!
* Use is-hidden-*-dn/ is-hidden-*-up classes instead
*/
.is-hidden-extra-small {
display: none !important; }
@media only screen and (min-width: 481px) {
.is-hidden-extra-small {
display: block !important; } }
.is-hidden-small {
display: none !important; }
@media only screen and (min-width: 641px) {
.is-hidden-small {
display: block !important; } }
.is-hidden-medium {
display: none !important; }
@media only screen and (min-width: 721px) {
.is-hidden-medium {
display: block !important; } }
@media only screen and (min-width: 721px) {
.is-hidden-large {
display: none !important; } }
/**
* The .is-hidden-*-dn classes hide the element when the viewport is at the
* given breakpoint or smaller. For example, .is-hidden-medium-dn hides an
* element on extra-small, small, normal and medium viewports.
*/
.is-hidden-extra-small-dn {
display: none; }
@media only screen and (min-width: 481px) {
.is-hidden-extra-small-dn {
display: block; } }
.is-hidden-small-dn {
display: none; }
@media only screen and (min-width: 641px) {
.is-hidden-small-dn {
display: block; } }
.is-hidden-normal-dn {
display: none; }
@media only screen and (min-width: 721px) {
.is-hidden-normal-dn {
display: block; } }
.is-hidden-medium-dn {
display: none; }
@media only screen and (min-width: 961px) {
.is-hidden-medium-dn {
display: block; } }
/**
* The .is-hidden-*-up classes hide the element when the viewport is at the
* given breakpoint or wider. For example, .is-hidden-medium-up hides an
* element on medium, large, and extra-large viewports.
*/
.is-hidden-extra-small-up {
display: block; }
@media only screen and (min-width: 320px) {
.is-hidden-extra-small-up {
display: none; } }
.is-hidden-small-up {
display: block; }
@media only screen and (min-width: 481px) {
.is-hidden-small-up {
display: none; } }
.is-hidden-normal-up {
display: block; }
@media only screen and (min-width: 641px) {
.is-hidden-normal-up {
display: none; } }
.is-hidden-medium-up {
display: block; }
@media only screen and (min-width: 721px) {
.is-hidden-medium-up {
display: none; } }
.is-hidden-large-up {
display: block; }
@media only screen and (min-width: 961px) {
.is-hidden-large-up {
display: none; } }
/**
* Invisible element: space allocated for the element
*/
.is-invisible {
visibility: hidden; }
/**
* Only display on prints
*/
.is-print-only {
display: none; }
@media print {
.is-print-only {
display: block !important; } }
/*
* This class positions an element absolute.
* We need the 100% width to make the element have a full width.
* The left is used to align it with the gutter of a container.
*
*/
.is-positioned-absolute {
position: absolute;
width: 100%;
left: 10px; }
.is-positioned-relative {
position: relative; }
/**
* Do not display on prints
*/
@media print {
.is-print-hidden {
display: none !important; } }
/**
* Only display on screen readers
*/
.is-sreader-only {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px); }
/**
* float element to the left
*/
.is-to-left {
float: left; }
/**
* float element to the right
*/
.is-to-right {
float: right; }
/**
* give text bold state
*/
.is-bold {
font-weight: 600 !important; }
/**
* give text normal state
* #TODO 'is-normal' is way to generic!
*/
.is-normal {
font-weight: normal !important; }
/**
* give text new base font size (18px)
*/
.is-font-size-base {
font-size: 1.125rem; }
/**
* Add default box shadow to element
*/
.has-shadow {
box-shadow: 0.1875rem 0.1875rem 0.3125rem 0 rgba(0, 0, 0, 0.2); }
/**
* set overflow-y to hidden
*/
.has-no-scroll {
overflow-y: hidden !important; }
@media only screen and (min-width: 481px) {
.has-no-scroll--small {
overflow-y: auto !important; } }
@media only screen and (min-width: 641px) {
.has-no-scroll--medium {
overflow-y: auto !important; } }
@media only screen and (min-width: 721px) {
.has-no-scroll--large {
overflow-y: auto !important; } }
/**
* sticky element to Top op page
*/
.is-sticky--top {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99; }
/**
* Sets background to grey if background is default white (like in Cards container)
*/
.has-background-grey {
background-color: #f8f8f8; }
/*-----------------------*\
#TEXT-FIELD-SIZES
\*-----------------------*/
.is-tiny {
width: 3.625rem !important; }
.is-small {
width: 6.125rem !important; }
.is-medium {
width: 12.125rem !important; }
.is-medium-medium {
width: 16.55rem !important; }
@media only screen and (min-width: 481px) {
.is-medium-medium {
width: 26.25rem !important; } }
@media only screen and (min-width: 641px) {
.is-medium-medium {
width: 23rem !important; } }
@media only screen and (min-width: 721px) {
.is-medium-medium {
width: 20.8125rem !important; } }
@media only screen and (min-width: 961px) {
.is-medium-medium {
width: 22.25rem !important; } }
.is-medium-large {
width: 16.55rem !important; }
@media only screen and (min-width: 1025px) {
.is-medium-large {
width: 29.25rem !important; } }
.is-large {
max-width: 100%;
min-width: 100%; }
@media only screen and (min-width: 961px) {
.is-large {
max-width: 36.25rem !important;
min-width: 36.25rem !important; } }
/*---------------------------------------------------------*\
#TEXT-FIELD-SIZES WITH THE FUNCTIONALITY OF A COLUMN
\*---------------------------------------------------------*/
.is-field-small-left {
width: 50%; }
@media only screen and (min-width: 721px) {
.is-field-small-left {
padding-right: 10px;
width: 33.333333%; } }
.is-field-small-right {
width: 50%; }
@media only screen and (min-width: 721px) {
.is-field-small-right {
padding-left: 10px;
width: 33.333333%; } }
.is-field-medium-left {
width: 100%; }
@media only screen and (min-width: 721px) {
.is-field-medium-left {
padding-right: 10px;
width: 66.666666%; } }
.is-field-medium-right {
width: 100%; }
@media only screen and (min-width: 721px) {
.is-field-medium-right {
padding-left: 10px;
width: 66.666666%; } }
.is-inline-percentage-large {
width: 100% !important; }
@media only screen and (min-width: 961px) {
.is-inline-percentage-large {
width: 80% !important;
margin-right: 0 !important; } }
.is-inline-percentage-small {
width: 20% !important;
margin-right: 0 !important; }
/*-----------------------*\
#TEXT INPUT WITH INLINE ICON (DELETE FIELD)
\*-----------------------*/
.has-icon-inline {
width: 90% !important; }
@media only screen and (min-width: 641px) {
.has-icon-inline {
width: 86% !important; } }
/*-----------------------*\
#WRAP INLINE
\*-----------------------*/
/*
* created for inline form elements but globally used
*/
.wrap-inline {
display: inline-block;
margin-right: 0.3125rem; }
.has-margin-right-wider {
margin-right: 1.875rem; }
/**
* italic element
*/
.is-italic {
font-style: italic; }
/*-----------------------*\
#LISTTABLE
\*-----------------------*/
.is-clarification {
margin-top: -0.625rem; }
.has-row-background-darkgrey {
background-color: #545454; }
.has-border-bottom {
border-bottom: 0.0625rem solid #bebebe;
margin-bottom: 1.25rem;
padding: 0; }
@media only screen and (min-width: 721px) {
.has-border-bottom {
margin-bottom: 0; } }
.has-border-bottom:last-child {
margin-bottom: 0; }
/*-----------------------------*\
#ANIMATE
\*-----------------------------*/
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn {
from {
opacity: 0; }
to {
opacity: 1; } }
@keyframes fadeIn {
from {
opacity: 0; }
to {
opacity: 1; } }
.fade-in-row {
opacity: 0;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
.fade-in-row:nth-child(1) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s; }
.fade-in-row:nth-child(1) .fade-in {
opacity: 0;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
.fade-in-row:nth-child(1) .fade-in:nth-child(1) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s; }
.fade-in-row:nth-child(1) .fade-in:nth-child(2) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s; }
.fade-in-row:nth-child(2) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s; }
.fade-in-row:nth-child(2) .fade-in {
opacity: 0;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
.fade-in-row:nth-child(2) .fade-in:nth-child(1) {
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s; }
.fade-in-row:nth-child(2) .fade-in:nth-child(2) {
-webkit-animation-delay: 1s;
animation-delay: 1s; }
.fade-in-row:nth-child(3) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s; }
.fade-in-row:nth-child(3) .fade-in {
opacity: 0;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
.fade-in-row:nth-child(3) .fade-in:nth-child(1) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s; }
.fade-in-row:nth-child(3) .fade-in:nth-child(2) {
-webkit-animation-delay: 1.4s;
animation-delay: 1.4s; }
.fade-in-row:nth-child(4) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s; }
.fade-in-row:nth-child(4) .fade-in {
opacity: 0;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
.fade-in-row:nth-child(4) .fade-in:nth-child(1) {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s; }
.fade-in-row:nth-child(4) .fade-in:nth-child(2) {
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s; }
.fade-in-row:nth-child(5) {
-webkit-animation-delay: 2s;
animation-delay: 2s; }
.fade-in-row:nth-child(5) .fade-in {
opacity: 0;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
.fade-in-row:nth-child(5) .fade-in:nth-child(1) {
-webkit-animation-delay: 2s;
animation-delay: 2s; }
.fade-in-row:nth-child(5) .fade-in:nth-child(2) {
-webkit-animation-delay: 2.2s;
animation-delay: 2.2s; }
.fade-in-row:nth-child(6) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s; }
.fade-in-row:nth-child(6) .fade-in {
opacity: 0;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
.fade-in-row:nth-child(6) .fade-in:nth-child(1) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s; }
.fade-in-row:nth-child(6) .fade-in:nth-child(2) {
-webkit-animation-delay: 2.6s;
animation-delay: 2.6s; }
.fade-in-row:nth-child(7) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s; }
.fade-in-row:nth-child(7) .fade-in {
opacity: 0;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
.fade-in-row:nth-child(7) .fade-in:nth-child(1) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s; }
.fade-in-row:nth-child(7) .fade-in:nth-child(2) {
-webkit-animation-delay: 3s;
animation-delay: 3s; }
.fade-in-row:nth-child(8) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s; }
.fade-in-row:nth-child(8) .fade-in {
opacity: 0;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
.fade-in-row:nth-child(8) .fade-in:nth-child(1) {
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s; }
.fade-in-row:nth-child(8) .fade-in:nth-child(2) {
-webkit-animation-delay: 3.4s;
animation-delay: 3.4s; }
.fade-in-row:nth-child(9) {
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s; }
.fade-in-row:nth-child(9) .fade-in {
opacity: 0;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
.fade-in-row:nth-child(9) .fade-in:nth-child(1) {
-webkit-animation-delay: 3.6s;
animation-delay: 3.6s; }
.fade-in-row:nth-child(9) .fade-in:nth-child(2) {
-webkit-animation-delay: 3.8s;
animation-delay: 3.8s; }
.fade-in-row:nth-child(10) {
-webkit-animation-delay: 4s;
animation-delay: 4s; }
.fade-in-row:nth-child(10) .fade-in {
opacity: 0;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
.fade-in-row:nth-child(10) .fade-in:nth-child(1) {
-webkit-animation-delay: 4s;
animation-delay: 4s; }
.fade-in-row:nth-child(10) .fade-in:nth-child(2) {
-webkit-animation-delay: 4.2s;
animation-delay: 4.2s; }
.fade-in-medium {
opacity: 0;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease;
animation-timing-function: ease; }
.fade-in-three-col {
opacity: 0;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in; }
.fade-in-three-col:nth-child(1) {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s; }
.fade-in-three-col:nth-child(2) {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s; }
.fade-in-three-col:nth-child(3) {
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s; }
.transition-opacity {
opacity: 0;
transition: all 0.3s; }
.transition-opacity.is-active {
opacity: 1; }
.touch .page-header-image,
.touch .page-header-image.fixed {
position: relative;
top: auto !important;
left: auto;
padding-top: 0; }
.touch .page-header-image {
height: 18.75rem; }
.touch .page-header-image.small {
height: 13.125rem; }
.touch .page {
margin-top: 2.5rem; }
.touch .page-center {
padding-top: 0 !important; }
.touch .home, .touch .landing {
margin-top: 0; }
.touch .home .label, .touch .landing .label {
display: none; }
/*-----------------------------*\
#SHAME FILE FOR QUICKFIXES
\*-----------------------------*/
/**
* Temporarily hide the spin buttons in the number input. Later we will style it in a separate story
*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none; }
/**
* This belongs in _lables.scss but lables needs another setup
*/
.type {
background-color: #065ca9;
color: #ffffff;
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.375rem;
padding: 0 0.625rem;
position: relative;
top: -0.125rem;
margin-left: 0.625rem;
margin-right: 0.625rem; }
*
* Title*Text * |