@import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500'); @font-face { font-family: 'nieuw-getij-de-eilanden-secondary'; src: url('https://s3.k8s.shockmedia.nl/app-o7l40txv-shockapp-hw-public/css/skins/nieuw-getij-de-eilanden/fonts/nieuw-getij-de-eilanden-secondary.ttf') format('truetype'); font-weight: 400; font-display: swap; font-style: normal; } body { font-family: 'Roboto'; font-size: 1em; background-color: #ffffff } .font-primary { font-family: 'Roboto'; } .font-secondary { font-family: 'nieuw-getij-de-eilanden-secondary'; } h1, h2, h3, h4, h5, .btn, select, input { font-family: 'nieuw-getij-de-eilanden-secondary'; } textarea { font-family: 'nieuw-getij-de-eilanden-secondary' !important; } h1 { /* 1 times 5 = 5 */ font-size: 5em; } h2 { font-size: 3.1em; } h3 { font-size: 1em; } h4 { font-size: 1.25em; } h5 { font-size: 1.5em; } h6 { font-size: 1em; } /* Button styling */ .btn { border-radius: 20px; border: solid 1px; } .btn-primary { background-color: #496463; color: #ccd3b1; border-color: #496463; } .btn-primary:hover { color: #496463; background-color: transparent; } .btn-primary-border { background-color: transparent; border-color: #496463; color: #496463; } .btn-primary-border:hover { color: #ccd3b1; background-color: #496463; } .btn-primary-border.active { background-color: #496463; color: #ccd3b1; } .btn-secondary { background-color: #ccd3b1; border-color: #ccd3b1; color: #ccd3b1; } .btn-secondary:hover { background-color: transparent; color: #ccd3b1; } .btn-secondary-border { background-color: transparent; border-color: #ccd3b1; color: #ccd3b1; } .btn-secondary-border:hover { background-color: #ccd3b1; color: #ccd3b1; } .btn-tertiaire { background-color: #496463; border-color: #496463; color: #ccd3b1; } .btn-tertiaire:hover { background-color: transparent; color: #496463; } .btn-tertiaire-border { background-color: transparent; border-color: #496463; color: #496463; } .btn-tertiaire-border:hover { background-color: #496463; color: #ccd3b1; } .btn-white { background-color: #ccd3b1; border-color: #ccd3b1; color: #ccd3b1; } .btn-white:hover { background-color: transparent; color: #ccd3b1; } .btn-white-border { background-color:transparent: color: #ccd3b1; border-color: #ccd3b1; } .btn-white-border:hover { background-color: #ccd3b1; color: #ccd3b1; } .btn-select { border-color: #496463; color: #496463; background-color: transparent; } .btn-select.btn-select-selected { background-color:#496463; color: #ccd3b1; } .btn-select.btn-select-white { border-color:#ccd3b1; color: #ccd3b1; } .btn-select.btn-select-white.btn-select-selected { border-color: #496463; } .btn-reset { color: #496463; border-color:transparent; } .btn-progress { color: #ccd3b1; border-color:transparent; } .btn-progress.active { color: #496463; border-color: #496463; } .btn-progress.current-step { color:#496463; } .arrow_radius, .owl-next, .owl-prev, .carousel-arrow { border-radius: 4px !important; } /* Text Colors */ .white-text { color: #ccd3b1 !important; } .primary-color-text { color: #496463 !important; } .primary-color-link { color: #496463 !important; } .secondary-color-text { color: #ccd3b1 !important; } .tertiaire-color-text { color: #496463 !important; } .grey-color-text { color: #496463 !important; } /* Border Color */ .white-border { border-color:#ccd3b1 !important; } .primary-color-border { border-color:#496463 !important; } .secondary-color-border { border-color:#ccd3b1 !important; } .tertiaire-color-border { border-color:#496463 !important; } .grey-color-border { border-color: #496463 !important; } /* Background Color */ .white-background { background-color:#ccd3b1 !important; } .primary-color-background { background-color: #496463 !important; } .secondary-color-background { background-color: #ccd3b1 !important; } .tertiaire-color-background { background-color: #496463 !important; } .grey-color-background { background-color: #496463 !important; } /* SVG Styling */ .white-fill { fill:#ccd3b1 !important; } .primary-color-fill { fill: #496463 !important; } .secondary-color-fill { fill: #ccd3b1 !important; } .tertiaire-color-fill { fill: #496463 !important; } .grey-color-fill { fill: #496463 !important; } .white-stroke { stroke: #ccd3b1 !important; } .primary-color-stroke { stroke: #496463 !important; } .secondary-color-stroke { stroke: #ccd3b1 !important; } .tertiaire-color-stroke { stroke: #496463 !important; } .grey-color-stroke { stroke: !important; } /* Form Elementen */ .basic-label, .second-label { color: #496463 !important; } .radio-label { color: #ccd3b1 !important; } .radio-label:after { background-color: #496463 !important; } input[type=radio]:checked + label:before { border-color: #496463 !important; } .checkbox-label { color: #ccd3b1 !important; } .checkbox-label:after { background-color: #496463 !important; } input[type=checkbox]:checked + label:before { border-color: #496463 !important; } input { color: #ccd3b1 !important; } select { color: #ccd3b1 !important; } .upload-field label span { color: #ccd3b1 !important; } .rangeSlider .ui-slider-handle { background: #496463 !important; } .rangeSlider .ui-slider-range { background: #496463 !important; } /* Overige Styling */ .house-more-info-nav li span { color: #ccd3b1 !important; } .house-more-info-nav li:hover span, .house-more-info-nav li.active span { color: #496463 !important; border-color: #496463 !important; } .close-more-info span { background-color: #496463 !important; } .close-more-info:hover span { background-color: #496463 !important; } .owl-dots .owl-dot { background-color: #496463 !important; } .owl-dots .owl-dot.active { background-color: #496463 !important; } .irs-from, .irs-to { color:#ccd3b1 !important; } .irs-bar { background-color: #496463 !important; } .irs-slider:before { background-color: #ccd3b1 !important; } .house-point:hover svg.pointer-icon path, .house-point.visible svg.pointer-icon path { fill: #496463 !important; } .cb-propertyslider-nav ul li a:hover { color:#496463 !important; } .cb-propertyslider-nav ul li.active a { color:#496463 !important; } /* Newsticker */ .news-item a { color: #496463 !important; } /* Pagination */ .pagination-btn:hover, .pagination-btn.active { border-color: #496463 !important; color: #496463 !important; } /* Header / navigation */ .menu-background { background-color: #496463 !important; } @media (max-width: 1023px) { .mobile-menu-background { background-color: #496463 !important; } }