//@base-url: '/wp-content/themes/ter-steege/html';
@base-url: '../html';
@grey-bg: #F1F1F1;
@yellow-color: #F9EB54;
@blue-color: #00425E;
@paragraph: #00425e;
@import 'fonts.less';
.referentieproject-filter {
background: #00425E;
padding: 0 12px;
position: relative;
z-index: 1;
display: flex;
> div {
padding: 12px;
display: flex;
align-items: center;
h4 {
color: #FFF;
margin: 0;
width: 80px;
}
}
> p {
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
color: white !important;
font-size: 12px;
text-transform: uppercase;
display: inline-flex;
align-items: center;
margin-right: 24px;
flex-shrink: 0;
svg {
margin-left: 16px;
height: 13px;
}
}
select {
width: 100%;
height: 48px;
border-radius: 0px;
border: 0px;
background-color: #002a47;
outline: none;
padding: 0 42px 0 16px;
text-shadow: none;
box-shadow: none;
font-size: 15px;
color: white;
font-weight: 500;
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
appearance: none;
background-image: url('../html/images/icons/arrow-down-white.svg');
background-size: 10px;
background-repeat: no-repeat;
background-position: right 16px center;
width: 240px;
}
}
.aanbod-filter {
background: #00425E;
margin-top: -36px;
padding: 0 12px;
position: relative;
z-index: 1;
display: flex;
> div {
padding: 12px;
display: flex;
align-items: center;
h4 {
color: white;
margin: 0;
width: 80px;
}
}
> p {
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
color: white !important;
font-size: 12px;
text-transform: uppercase;
display: inline-flex;
align-items: center;
margin-right: 24px;
flex-shrink: 0;
svg {
margin-left: 16px;
height: 13px;
}
}
select {
width: 100%;
height: 48px;
border-radius: 0px;
border: 0px;
background-color: #002a47;
outline: none;
padding: 0 42px 0 16px;
text-shadow: none;
box-shadow: none;
font-size: 15px;
color: white;
font-weight: 500;
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
appearance: none;
background-image: url('../html/images/icons/arrow-down-white.svg');
background-size: 10px;
background-repeat: no-repeat;
background-position: right 16px center;
width: 240px;
}
}
.mixitup-page-list {
width: 100%;
display: flex;
justify-content: center;
button {
width: 40px;
height: 40px;
margin: 0 4px;
background: #002a47;
color: white;
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
padding-bottom: 4px;
&.mixitup-control-active,
&.mixitup-control-disabled {
opacity: .3;
cursor: default;
}
}
}
#googleMap {
height: 685px;
}
.gm-style {
.gm-style-iw-c {
box-shadow: none;
border-radius: 0;
box-sizing: border-box;
width: 220px;
padding: 30px !important;
}
.gm-style-iw-t::after {
display: none;
}
.gm-ui-hover-effect {
background-image: url(../images/icons/close.svg) !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 12px !important;
opacity: 1;
top: 10px !important;
right: 10px !important;
img {
display: none !important;
}
}
.button {
background: @yellow-color;
color: @blue-color;
padding: 5px 20px 6px;
border-radius: 2px;
font-size: 12px;
margin-top: 16px;
height: 35px;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
text-transform: uppercase;
}
.gm-style-iw-d {
padding: 0 !important;
overflow: hidden !important;
}
.plaatsnaam {
margin-bottom: 4px !important;
font-size: 14px;
}
.titel {
font-size: 18px !important;
line-height: 18px !important;
font-weight: bold;
}
}
@media (max-width: 992px) {
.aanbod-filter,
.referentieproject-filter {
margin: 0 -15px !important;
padding: 0;
> div {
width: 50%;
select {
width: 100%;
height: 40px;
}
&:first-child {
display: none;
}
}
> p {
display: none;
}
}
#googleMap {
height: 385px;
}
}
body {
font-family: "DINPro-Light", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
color: @paragraph;
&.post-type-archive-ons-aanbod,
&.page-template-template-woningaanbod,
&.page-id-37 {
background: @grey-bg;
}
}
p {
color: @paragraph !important;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "DINPro-Bold", Helvetica, Arial, sans-serif;
color: @paragraph;
}
h3 {
font-size: 18px;
}
.page-template-detail-bouwnummer #typePrijslijst .tablesorter,
.page-template-detail-php #typePrijslijst .tablesorter,
.btn-question {
font-size: 14px;
}
#banner {
position: relative;
width: 100%;
max-width: 100%; // height: 600px;
body.home & {
&:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 1;
}
}
&:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 1;
}
// .banner-wrapper { max-height: 600px; }
.banner-content {
text-align: left;
max-width: 1400px;
margin: 0 auto;
padding: 0px 15px;
body.home & {
h2 {
margin: 0px;
margin-bottom: 30px;
font-size: 54px;
line-height: 62px;
font-weight: 800;
max-width: 100%;
}
}
h2 {
margin: 0px;
margin-bottom: 30px;
font-size: 44px;
max-width: 100%;
@media (max-width: 1024px) {
font-size: 50px;
line-height: 58px;
}
@media (max-width: 991px) {
font-size: 42px;
line-height: 48px;
}
}
.btn-list {
margin: 0px;
li {
margin-bottom: 0px;
}
@media (max-width: 991px) {
width: 100%;
li {
&:first-child {
margin-bottom: 10px;
}
a {
width: 100% !important;
}
}
}
}
}
.banner-overlay {
display: none;
}
}
@media (max-width: 1024px) {
#banner {
.banner-wrapper {
max-height: 100%;
height: 100%;
.video-frame-holder {
height: 100%;
}
}
}
}
@media (max-width: 640px) {
#banner {
height: auto;
body.home & {
height: 430px;
}
.banner-content {
h2 {
padding: 16px 0;
margin: 0;
font-size: 34px;
line-height: 40px;
}
}
}
}
#siteHeader {
position: relative;
background: @grey-bg;
width: 100%;
max-width: 100%;
padding: 0px;
z-index: 9999;
&.navigation-active {
padding-bottom: 0px;
#siteNavigation {
margin-top: 0px;
float: none;
.menu {
.menu-item {
&:last-child {
border-bottom: 0px;
}
&.active {
> a {
font-weight: 600 !important;
}
}
.sub-menu {
position: relative;
background: white;
padding: 14px 0px;
margin-top: 10px;
&:before {
position: absolute;
content: "";
width: 7px;
height: 7px;
background: white;
left: 10px;
top: 0;
}
.menu-item {
border-bottom: 0px;
a {
display: block;
padding: 6px 20px;
border-bottom: 0px;
font-size: 14px !important;
}
}
}
}
}
}
.site-header-grid {
flex-direction: column;
align-items: flex-start;
}
}
.site-header-grid {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
max-width: 1400px;
position: relative;
height: auto;
margin: 0 auto;
padding: 0px 15px;
height: 100%;
&:before {
position: absolute;
content: "";
width: 1270px;
height: 100%;
background: white;
top: 0;
left: -1000px;
@media (max-width: 1024px) {
width: 1220px;
}
@media (max-width: 991px) {
display: none;
}
}
@media (max-width: 991px) {
align-items: flex-start;
.site-branding {
padding: 12px 0px;
}
}
}
.menu-toggle {
position: absolute;
right: 15px;
float: none;
top: 19px;
transform: none;
.fa {
position: relative;
}
}
#searchToggle {
float: none;
border: 0px;
}
#siteNavigation {
border-top: 0px;
float: none;
margin-right: 0px;
margin-left: auto;
.menu {
margin-bottom: 0px;
a {
font-family: 'DINPro-Medium';
text-transform: uppercase;
font-weight: 600;
font-size: 15px;
color: #00425E;
padding: 37px 0px;
span {
display: none;
}
@media (max-width: 991px) {
padding: 0px;
}
}
> .menu-item {
padding: 0px 12px;
a {
&:before {
display: none;
}
}
@media (max-width: 1023px) {
padding: 0px 6px;
}
}
.menu-item-has-children {
padding-right: 40px;
&:after {
content: "\f078";
font-size: 11px;
top: 50%;
right: 10px;
@media (max-width: 991px) {
content: "\f077";
top: 13px !important;
}
}
&:hover {
&:after {
content: "\f077";
font-size: 11px;
top: 50%;
right: 10px;
}
}
.sub-menu {
padding-bottom: 0px;
li {
padding: 0px;
a {
padding: 26px 20px;
border-bottom: 1px solid @grey-bg;
text-transform: none;
font-size: 15px !important;
font-weight: 500 !important;
&:hover {
background: @grey-bg;
color: #333 !important;
}
}
&:last-child {
a {
border-bottom: 0px;
}
}
}
}
}
}
}
#contactTrigger {
position: relative;
margin-top: 0px;
width: auto;
border: 2px solid #00425E;
background: transparent;
text-transform: uppercase;
font-weight: 600;
padding: 15px 21px;
line-height: 100%;
border-radius: 0px;
margin-left: 16px;
margin-right: 16px;
@media (max-width: 991px) {
margin: 0px;
width: 100% !important;
}
}
@media (max-width: 991px) {
position: fixed;
}
}
.site-header {
&--sticky {
position: fixed !important;
top: 0;
}
}
#siteContent {
padding-top: 91px;
}
@media (max-width: 991px) {
#siteContent {
padding-top: 60px;
}
}
/* New searchbar */
#headerSearch {
position: fixed;
top: 91px;
width: 100%;
background: #003961;
z-index: 9998;
height: 50px;
display: flex;
align-items: center;
#search-form-input {
background: transparent;
border: 0px;
outline: none !important;
color: white;
&::placeholder {
color: rgba(255, 255, 255, 0.5);
font-weight: 500;
font-style: italic;
}
}
#searchSubmit {
background: transparent;
border: 0px;
.fa-search {
color: white;
}
}
#siteSearch {
position: relative;
.search-close {
cursor: pointer;
position: absolute;
right: 0;
top: 0;
.fa-times {
color: white;
}
}
}
@media (max-width: 991px) {
top: 0px;
}
}
.headerSearch {
transform: translateY(-50px);
transition: all .2s ease-in-out;
@media (max-width: 991px) {
transform: translateY(0px);
}
&.active {
transform: translateY(0px);
}
}
/* Location selector */
.bootstrap-select {
> .dropdown-toggle {
border-radius: 0px;
color: @blue-color;
font-weight: 600;
padding: 15px 20px;
line-height: 100%;
width: 240px;
}
}
.contactinfo {
.type-location {
h3 {
background-image: none;
padding: 0px;
}
.address {
padding-left: 0px;
}
}
}
/* Referentieprojecten */
#referentieProjecten {
background: transparent;
padding-bottom: 0px;
.referentieprojecten_content {
text-align: center;
h2 {
font-size: 22px;
margin-bottom: 15px;
line-height: 26px;
}
p {
margin-bottom: 0px;
width: 100%;
max-width: 628px;
margin: 0 auto;
line-height: 26px;
}
}
.nav-tabs {
margin-top: 60px;
margin-bottom: 0px;
justify-content: center;
&.nav {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-Y: scroll;
}
li {
margin-bottom: 0px;
margin-right: 0px;
a {
border: 0px;
padding: 18px 30px;
line-height: 100%;
border-radius: 0px;
text-transform: none;
font-size: 15px;
font-weight: 500;
@media (max-width: 991px) {
padding: 18px 22px;
}
}
&.active {
a {
background: @grey-bg;
color: #00425E;
font-weight: 800;
}
}
}
}
.tab-content-wrapper {
background: @grey-bg;
padding: 70px 0px;
.tab-content {
width: 100% !important;
max-width: 1400px !important;
margin: 0 auto;
padding: 0px 15px;
.entries .hentry {
margin-bottom: 0px;
@media (max-width: 991px) {
width: 100%;
padding: 10px 15px;
}
}
.referentieprojecten-all {
text-align: center;
margin-top: 40px;
@media (max-width: 991px) {
margin-top: 20px;
.btn-primary {
width: 100% !important;
}
}
}
}
@media (max-width: 991px) {
padding: 40px 0px;
}
}
.entries {
.hentry {
a {
display: block;
transform: translateY(0px);
transition: all .2s ease-in-out;
&:hover {
transform: translateY(-3px);
-webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.05);
box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.05);
}
}
}
}
}
/* Laatste nieuws */
#laatsteNieuws {
background: @grey-bg;
padding: 70px 0px 60px 0px;
.container {
.row {
.col-md-15 {
> h2 {
font-size: 22px;
margin-bottom: 38px;
@media (max-width: 991px) {
margin-bottom: 20px;
}
}
}
}
}
.entries {
.hentry {
a {
display: flex;
flex-direction: column;
text-decoration: none;
height: 100%;
.entry-tile {
position: relative;
background: white;
padding: 40px 30px;
overflow: hidden;
display: flex;
flex-direction: column;
flex: 1;
.entry-date {
font-size: 14px;
font-weight: 500;
opacity: 0.5;
margin-bottom: 10px;
line-height: 14px;
}
.entry-title {
font-size: 18px;
line-height: 26px;
margin: 0px;
margin-bottom: 15px;
}
.entry-content {
color: #1D1D1D;
font-size: 14px;
line-height: 26px;
}
.read-more {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
right: -50px;
bottom: 0px;
background: @yellow-color;
width: 50px;
height: 50px;
border-radius: 4px 0px 0px 0px;
transition: all .2s ease-in-out;
}
}
&:hover {
.entry-tile {
.read-more {
transform: translateX(-50px);
}
}
}
}
}
.row {
display: flex;
flex-wrap: wrap;
&.ac {
justify-content: center;
}
}
}
@media (max-width: 991px) {
padding: 40px 0px;
}
}
.section-white {
background-color: white;
padding: 72px 0;
@media (max-width: 767px) {
padding: 0 0 32px;
}
}
.isotope-grid {
//.isotope-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; }
article { /* position: relative !important; display: flex; flex: 1; float: none; flex-basis: 33.33333%; max-width: 33.33333%; */
a {
text-decoration: none;
height: 100%;
.entry-tile {
position: relative;
background: @grey-bg;
padding: 40px 30px;
overflow: hidden;
display: flex;
flex-direction: column;
flex: 1;
.entry-date {
font-size: 14px;
font-weight: 500;
opacity: 0.5;
margin-bottom: 10px;
line-height: 14px;
}
.entry-title {
font-size: 18px;
line-height: 26px;
margin: 0px;
margin-bottom: 15px;
}
.entry-content {
color: #1D1D1D;
font-size: 14px;
line-height: 26px;
}
.read-more {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
right: -50px;
bottom: 0px;
background: @yellow-color;
width: 50px;
height: 50px;
border-radius: 4px 0px 0px 0px;
transition: all .2s ease-in-out;
}
}
&:hover {
.entry-tile {
.read-more {
transform: translateX(-50px);
}
}
}
}
}
}
.isotope-filters {
ul {
text-align: right;
li {
padding: 0 0.3rem;
&:after {
display: none;
}
a {
padding: 0.6rem 1.3rem;
background: transparent;
border: 2px solid fade(@blue-color, 15%);
border-radius: 25px;
font-weight: 500;
transition: all .2s ease-in-out;
color: fade(@blue-color, 50%);
&:hover {
background: fade(@blue-color, 10%);
}
&.active {
background: @blue-color !important;
color: white;
font-weight: 500 !important;
}
}
}
}
}
/* Cards */
.entries {
.hentry-box {
text-align: left;
.inner {
border: 0px;
border-radius: 0px; /* background: white; */
}
.entry-image {
border-radius: 0px;
img {
border-radius: 0px;
}
}
}
article {
&.hentry-box {
&.referentie-box {
.entry-image-holder {
height: 195px;
padding-top: 0px;
}
}
}
}
&.aanbod {
.row {
flex-wrap: wrap;
}
.hentry-box {
.entry-content {
padding: 30px;
background: white;
display: flex;
flex-direction: column;
flex: 1;
.entry-location {
color: #00425E;
font-size: 15px;
font-weight: 500;
margin-bottom: 7px;
}
.entry-title {
margin: 0px;
margin-bottom: 15px;
font-size: 18px;
line-height: 26px;
}
.price {
font-size: 15px;
margin-bottom: 30px;
padding-bottom: 0px;
}
.entry-footer {
background: transparent;
padding: 0px;
text-transform: lowercase;
margin-top: auto;
.surface {
background: @yellow-color;
color: @blue-color;
padding: 5px 20px 6px;
border-radius: 2px;
font-size: 14px;
text-transform: uppercase;
strong {
font-size: 14px;
}
}
.rooms {
float: left;
padding-left: 15px;
color: @blue-color;
line-height: 30px;
font-size: 14px;
strong {
font-size: 14px;
}
}
}
}
}
}
}
@media (min-width: 992px) {
.hentry {
.entry-image {
max-height: 100%;
}
}
}
.yellow-container {
background: #F9EB54;
padding: 40px 0;
h4 {
font-size: 18px;
margin: 0;
}
h3 {
font-size: 28px;
margin: 0;
}
}
@media (max-width: 992px) {
.yellow-container {
padding: 40px;
h4 {
font-size: 16px;
}
h3 {
font-size: 24px;
}
}
}
@media (max-width: 767px) {
.yellow-container {
padding: 24px;
}
}
.gray-container {
background: #F1F1F1;
padding: 80px 0 72px;
&__content {
display: flex;
align-items: center;
.content {
padding-right: 64px;
font-size: 28px;
line-height: 34px;
}
.btn-secondary {
flex-shrink: 0;
}
}
.rows {
margin-bottom: 40px;
> div {
padding: 32px 56px;
display: flex;
background: white;
margin-bottom: 16px;
span {
&:first-child {
width: 160px;
}
}
}
}
}
@media (max-width: 992px) {
.gray-container {
padding: 40px;
}
}
@media (max-width: 767px) {
.gray-container {
padding: 24px;
&__content {
display: block;
}
.content {
padding-right: 0;
}
.rows {
margin-bottom: 24px;
> div {
span {
display: block;
}
padding: 16px;
display: block;
}
}
}
}
.project-website {
display: flex;
border-bottom: 1px solid #00425E;
padding-bottom: 24px;
padding-top: 24px;
@media (max-width: 767px) {
display: block;
}
p {
margin-bottom: 0;
color: #00425E !important;
margin-right: 16px;
}
a {
text-decoration: none;
display: inline-flex;
align-items: center;
svg {
width: 13px;
margin-left: 8px;
}
}
}
/* Site footer */
#siteFooter {
background: transparent;
padding: 0px;
min-height: 100%;
.footer-top {
background: @blue-color;
padding: 100px 0px;
h2 {
font-size: 18px;
margin-top: 0px;
margin-bottom: 10px;
line-height: 26px;
}
#menu-locatiemenu {
column-count: 2;
column-gap: 20px;
li {
padding: 3px 0px;
a {
opacity: 0.7;
transition: all .2s ease-in-out;
&:hover {
opacity: 1;
text-decoration: none;
}
}
}
@media (max-width: 991px) {
column-count: 1;
}
}
@media (max-width: 991px) {
padding: 60px 0px;
}
}
.footer-bottom {
background: darken(@blue-color, 5%);
.container {
.row {
position: relative;
}
}
.footer-privacy {
font-size: 12px;
padding: 28px 0px;
ul {
padding-left: 5px;
margin-bottom: 0px;
li {
display: inline-block;
padding: 0px 10px;
a {
opacity: 0.8;
transition: all .2s ease-in-out;
text-decoration: none;
&:hover {
opacity: 1;
}
}
}
}
@media (max-width: 1024px) {
padding: 18px 0px 48px 0px;
}
}
}
#strepen {
position: absolute;
right: 15px;
bottom: 0;
width: 300px;
height: 30px;
background-size: contain;
@media (max-width: 991px) {
left: 0px;
right: inherit;
width: 100%;
background-position: bottom left;
}
}
.col-md-3 {
> a {
display: block;
padding-top: 20px;
#footerBrand {
position: relative;
right: 0;
top: 0;
max-width: 100%;
@media (max-width: 991px) {
max-width: 240px;
}
}
@media (max-width: 991px) {
text-align: right;
}
}
.social-navigation {
.social-nav {
display: flex;
flex-wrap: wrap;
margin: 0px;
margin-top: 85px !important;
justify-content: flex-end;
li {
float: none;
margin-right: 0px;
padding: 5px;
background: transparent;
width: auto;
height: auto;
a {
display: flex;
justify-content: center;
align-items: center;
color: rgba(255, 255, 255, 0.8);
padding-top: 0px;
border: 1px solid rgba(255, 255, 255, 0.3);
width: 40px;
height: 40px;
font-size: 1.3rem;
transition: all .2s ease-in-out;
&:hover {
color: @blue-color;
border-color: @yellow-color;
background: @yellow-color;
}
}
}
@media (max-width: 1024px) {
justify-content: flex-end;
margin-top: 35px !important;
}
}
}
}
}
#locationSelectorFooter {
outline: none !important;
.btn-primary {
position: relative;
background: darken(@blue-color, 5%) !important;
padding: 11px 100px 11px 20px !important;
color: rgba(255, 255, 255, 0.7) !important;
outline: none !important;
&:hover {
border-color: darken(@blue-color, 5%) !important;
}
.bs-caret {
position: absolute;
right: 20px;
top: 50%;
transform: translate(0, -50%);
}
}
.location-holder {
.location {
h3 {
background-image: none;
padding-left: 0px;
}
.entry-content {
.address {
padding-left: 0px;
}
}
}
}
}
#locationSelector {
.bootstrap-select {
> .dropdown-toggle {
background: transparent !important;
outline: none !important;
}
}
}
/* General elements */
p {
color: #333333;
}
.btn-primary,
.btn-secondary,
.btn-outline {
font-family: "DINPro-Bold";
padding: 15px 40px !important;
border-radius: 0px !important;
line-height: 100% !important;
width: auto !important;
font-weight: 500 !important;
font-size: 14px !important;
text-transform: uppercase !important;
&:hover {
background: #002a47 !important;
color: white !important;
border-color: #002a47 !important;
}
}
#nextResultButton.btn-alt {
padding: 15px 26px !important;
font-family: "DINPro-Bold";
color: white;
background-color: #00425E;
}
.btn-outline {
background: transparent !important;
}
.breadcrumbs-wrapper {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
background: rgba(0, 57, 94, 0.1);
color: @blue-color;
padding: 4px 16px;
border-radius: 2px;
.arrowlink {
margin-right: 1.8rem;
&:before {
background: transparent;
color: @blue-color;
width: auto;
height: auto;
margin-right: 0px;
}
}
.divider {
padding: 0 1rem;
}
}
.arrowlink,
.readmore,
.social-share {
font-size: 14px;
}
.section-divider {
position: relative;
text-align: center;
&:before {
position: absolute;
content: "";
height: 1px;
width: 100%;
background: #D8D8D8;
top: 25px;
left: 0px;
z-index: -1;
}
a {
display: block;
svg {
g {
path {
transition: all .2s ease-in-out;
}
}
}
&:hover {
svg {
g {
#hover-bg {
fill: @blue-color;
}
#hover-white {
fill: #fff;
}
}
}
}
}
}
.container {
width: 100% !important;
max-width: 1400px !important;
}
/* Ons aanbod pagina */
#housingListContainer {
margin-bottom: 104px;
> h2 {
font-size: 22px;
margin-bottom: 15px;
line-height: 26px;
}
}
#housingListContainer {
@media (max-width: 767px) {
margin-bottom: 32px;
}
}
#lijst-zoekresultaten {
margin-top: 4rem;
width: ~"calc(100% + 30px)";
.entries {
li {
.format-standard {
transition: all .2s ease-in-out;
&:hover {
transform: translateY(-3px);
-webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.05);
box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.05);
}
}
}
}
#listview {
width: 100%;
}
}
#googleMapHeader {
background: transparent;
h3 {
font-size: 32px;
line-height: 32px;
font-family: "DINPro-Bold";
}
}
#zoekerHolder {
.col-md-11 {
width: 100%;
float: none;
margin-left: 0px;
#type_toggle_button_holder {
span {
border-bottom: 0px;
background: darken(@blue-color, 5%);
opacity: 0.4;
text-align: left;
padding: 1rem 2rem;
font-size: 14px;
&.selected {
background: @blue-color;
opacity: 1;
}
&:after {
display: none !important;
}
}
}
}
}
.aanbodFilters {
margin-top: -48px;
.col-md-13 {
width: 100%;
}
.col-md-push-1 {
left: 0;
}
}
#breadcrumbs {
margin-top: 3.5rem;
a,
.breadcrumb_last {
font-size: 13px;
}
}
body.page-template-template-woningaanbod {
// #breadcrumbs { margin-top: 3.5rem; }
#zoekfilters-holder {
padding: 2rem;
border-radius: 0px;
#zoekfilters-holder-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: 0;
background: transparent;
width: ~"calc(100% + 1.2rem)";
margin-left: -0.6rem;
.filter-column {
flex-basis: 25%;
max-width: 25%;
padding: 0rem 0.6rem !important;
.bootstrap-select {
margin: 0px;
.btn {
width: 100%;
height: 48px;
border-radius: 0px;
border: 0px;
background: #002a47 !important;
outline: none;
padding-left: 20px;
text-shadow: none;
box-shadow: none;
.filter-option {
color: rgba(255, 255, 255, 0.5);
font-weight: 500;
text-transform: uppercase;
}
.caret {
color: rgba(255, 255, 255, 0.5) !important;
right: 10px !important;
}
}
}
#searchbox {
margin: 0px;
height: 48px;
border-radius: 0px;
border: 0px;
background: #002a47 !important;
outline: none;
padding-left: 20px;
color: white;
&::placeholder {
color: rgba(255, 255, 255, 0.5);
font-weight: 500;
text-transform: uppercase;
}
}
}
}
}
}
@media (max-width: 991px) {
body.page-template-template-woningaanbod {
#zoekfilters-holder {
#zoekfilters-holder-row {
flex-wrap: wrap;
.filter-column {
flex-basis: 50%;
max-width: 50%;
&:nth-child(1),
&:nth-child(2) {
margin-bottom: 10px;
}
}
}
}
}
}
@media (max-width: 767px) {
body.page-template-template-woningaanbod {
#zoekfilters-holder {
#zoekfilters-holder-row {
.filter-column {
flex-basis: 100%;
max-width: 100%;
margin-bottom: 10px;
}
}
}
}
}
/* Referentie projecten */
.referentie-aanbod {
.col-md-15 {
h2 {
margin-bottom: 10px;
}
p {
max-width: 800px;
width: 100%;
margin-bottom: 40px;
}
}
}
.reference-search-results {
.hentry {
.entry-header {
position: relative;
overflow: hidden;
.entry-image-holder {
.entry-image {
transition: all .4s ease-in-out;
}
}
}
/*
.view-project { position: absolute; bottom: -48px; background: @yellow-color; color: @blue-color; border-color: @yellow-color; left: 50%; transform: translate(-50%,0%); transition: all .2s ease-in-out;
&:hover { background: @yellow-color !important; color: @blue-color !important; border-color: @yellow-color !important; }
}
*/
a {
&:hover {
transform: translateY(-3px);
-webkit-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.05);
box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.05);
}
}
}
}
/* Contact */
.location-wrapper {
background: @grey-bg;
padding: 3rem 0rem;
.contact-title {
font-size: 22px;
margin-bottom: 2rem;
}
.entries {
display: flex;
flex-direction: row;
flex-wrap: wrap;
article {
display: flex;
flex-basis: 33.333333%;
max-width: 33.333333%;
.article-inner {
background: white;
padding: 2.4rem;
width: 100%;
.entry-header {
h3 {
margin-top: 0px;
background-image: none;
padding: 0px;
}
}
.entry-content {
.address {
padding: 0px;
}
}
.entry-footer {
padding: 0px;
.readmore {
color: white;
background: @yellow-color;
color: @blue-color;
border-color: @yellow-color;
&:hover {
text-decoration: none;
}
&:before {
display: none;
}
}
}
}
}
}
}
@media (max-width: 1023px) {
.location-wrapper {
.entries {
article {
display: flex;
flex-basis: 50%;
max-width: 50%;
.article-inner {
.entry-content {
display: block !important;
}
}
}
}
}
}
@media (max-width: 767px) {
.location-wrapper {
.entries {
article {
display: flex;
flex-basis: 100%;
max-width: 100%;
.article-inner {
.entry-footer {
border-bottom: 0px;
}
}
}
}
}
}
body.page-id-270 & {
.entry-aside {
.btn-list {
li {
a {
width: 100% !important;
max-width: 280px;
}
}
}
}
}
#locationInformation {
background: @grey-bg;
.locatie-content-wrapper {
padding: 2.4rem;
h3 {
margin-top: 0px;
background-image: none;
padding: 0px;
margin-bottom: 1rem;
}
.address {
padding: 0px;
}
}
}
#contactPersonenHolder {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: ~"calc(100% + 20px)";
margin-left: -10px;
.contactpersoon {
display: flex;
flex-basis: 25%;
max-width: 25%;
margin-right: 0px !important;
padding: 0px 10px;
ul {
width: 100%;
background: @grey-bg;
.thumbnail-wrapper {
border-radius: 0px;
}
.profile-wrapper {
padding: 1.4rem;
.profile {
h3 {
margin: 0px;
}
}
.contactinfo {
a,
span {
font-size: 13px;
font-weight: 500;
color: @blue-color;
}
}
}
}
}
}
.social-share {
margin-top: 20px;
.social-share-list {
margin-top: 10px;
li {
border-radius: 0px;
width: 40px;
height: 40px;
margin-right: 10px;
}
}
}
/* Project detail */
body.page-template-detail &,
body.single-referentie_project &,
body.search & {
.entry-aside {
&.entries {
background: @grey-bg;
padding: 2.4rem;
.btn-list {
li {
margin-bottom: 12px;
&:last-child {
margin-bottom: 0px;
}
a {
width: 100% !important;
border-radius: 0px;
}
}
}
#sitemap-menu {
margin-bottom: 0px;
#menu-footermenu {
margin-bottom: 0px;
li {
line-height: 28px;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
}
}
}
}
body.page-template-default,
body.page-template-page-concepten {
.entry-aside {
&.entries {
article {
background: @grey-bg;
.entry-title {
padding: 2.4rem 2.4rem 0rem 2.4rem;
margin: 0px;
}
.entry-footer {
padding: 1rem 2.4rem 2.4rem 2.4rem;
margin: 0px;
}
}
}
}
}
body.search & {
.site-content {
.container {
margin-bottom: 3rem;
}
}
#breadcrumbs {
.container {
margin-bottom: 0px;
}
}
}
.detail-form-wrapper {
background: @grey-bg;
padding: 3rem 0rem;
#interestform {
.input {
margin-bottom: 1.2rem;
&.radiobutton {
input {
height: auto;
margin-right: 10px;
}
label {
&:first-child {
margin-right: 20px;
}
}
}
input {
height: 50px;
border: 0px;
padding: 0rem 2rem;
outline: none;
}
}
}
}
/* Nieuwsbrief */
.nieuwsbrief-new {
position: relative;
background: @blue-color;
color: white;
padding: 10rem 0rem;
overflow: hidden;
&__background {
position: absolute;
left: 0;
top: 0;
z-index: 0;
opacity: 0.3;
&:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(0, 66, 94, 0) 0%, rgba(0, 66, 94, 1) 100%);
}
}
&__inner {
position: relative;
display: flex;
flex-direction: row;
z-index: 10;
@media (max-width: 1200px) {
flex-direction: column;
}
}
&__column {
flex-basis: 50%;
max-width: 50%;
@media (max-width: 1200px) {
flex-basis: 100%;
max-width: 100%;
}
.gform_confirmation_message {
background: rgba(255, 255, 255, 0.1);
font-size: 12px;
padding: 8px 15px;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
border-radius: 4px;
}
}
&__left-column {
max-width: 30rem;
h3 {
margin-top: 0rem;
color: white;
font-size: 2rem;
line-height: 3.4rem;
margin-bottom: 1rem;
}
p {
color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 1200px) {
max-width: 100%;
}
}
.gform_wrapper {
@media (max-width: 1200px) {
margin-top: 1rem;
}
form {
.validation_error {
margin-bottom: 1rem;
background: rgba(255, 255, 255, 0.1);
font-size: 12px;
padding: 8px 15px;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
border-radius: 4px;
}
.gform_body {
.gform_fields {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
flex-wrap: wrap;
.gfield {
display: flex;
margin-bottom: 0px;
&.hide-label {
.gfield_label {
display: none;
}
}
.gfield_description.validation_message {
font-size: 12px;
font-weight: 500;
margin-top: 0.6rem;
opacity: 0.8;
color: white;
}
&.flex-1-1 {
display: flex;
flex-direction: column;
flex-basis: 100%;
max-width: 100%;
padding: 0.8rem 0rem;
.gfield_radio,
.gfield_checkbox {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 0;
list-style: none;
margin-left: -1rem;
li {
padding: 0 1rem;
label {
margin-left: 0.4rem;
font-size: 12px;
opacity: 0.7;
}
}
}
.gfield_radio {
li {
label {
position: relative;
padding-left: 12px;
&:before {
position: absolute;
content: "";
top: 0;
left: -10px;
width: 15px;
height: 15px;
background: transparent;
border: 2px solid #002A47;
border-radius: 100%;
}
&:after {
position: absolute;
content: "";
top: 4px;
left: -6px;
width: 7px;
height: 7px;
background: #002A47;
opacity: 0;
border-radius: 100%;
}
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked {
+ label {
&:after {
opacity: 1;
}
}
}
}
}
.gfield_checkbox {
li {
label {
position: relative;
padding-left: 12px;
&:before {
position: absolute;
content: "";
top: 0;
left: -10px;
width: 15px;
height: 15px;
background: transparent;
border: 2px solid #002A47;
}
&:after {
position: absolute;
content: "";
top: 4px;
left: -6px;
width: 7px;
height: 7px;
background: #002A47;
opacity: 0;
}
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked {
+ label {
&:after {
opacity: 1;
}
}
}
}
}
.gfield_label {
margin-bottom: 0;
font-weight: 500;
margin-bottom: 0.2rem;
text-transform: none;
color: white;
letter-spacing: 0px;
font-size: 14px;
}
}
&.flex-1-2 {
display: flex;
flex-direction: column;
flex-basis: 50%;
max-width: 50%;
margin-bottom: 1rem;
padding: 0 0.8rem;
margin-left: -0.8rem;
.ginput_container {
width: 100%;
}
input[type="text"] {
width: 100%;
background-color: #002A47;
border: 0;
padding: 12px 20px;
outline: none;
&::placeholder {
text-transform: uppercase;
font-weight: 500;
color: rgba(255, 255, 255, 0.4);
font-size: 12px;
}
}
@media (max-width: 768px) {
flex-basis: ~"calc(100% + 1.6rem)";
max-width: ~"calc(100% + 1.6rem)";
}
}
}
}
}
.gform_footer {
margin-top: 1rem;
.gform_button {
border: 0;
background: @yellow-color;
color: @blue-color;
text-transform: uppercase;
font-weight: 600;
padding: 1rem 4rem;
font-size: 12px;
outline: none;
cursor: pointer;
}
}
}
}
@media (max-width: 768px) {
padding: 6rem 0rem;
}
}
/* CSS TO LESS */
@color_1: #333333;
@color_2: #003960;
@color_3: white;
/* Wenskaarten styling */
/* .wenskaart .wenskaart-form .gform_wrapper form { text-align: center; } */
#lijst-zoekresultaten.reference-search-results {
.reference-marker {
display: flex;
}
}
.entries.aanbod {
.hentry-box {
a {
width: 100%;
height: 100%;
article {
height: 100%;
}
}
.entry-footer {
margin-top: auto;
}
}
.hentry-box.referentie-box {
.entry-footer {
margin-top: auto;
}
}
}
.entries {
.hentry-box {
.inner {
height: 100%;
display: flex;
flex-direction: column;
}
}
}
body.home {
.entries.aanbod {
.row {
display: flex;
}
}
}
body.blog {
.entries.aanbod {
.row {
display: flex;
}
}
#pagination-holder {
text-align: center;
}
}
.wenskaart {
.wenskaart-form {
background: #efefef;
padding: 50px 60px;
margin-top: 40px;
.gform_wrapper {
form {
.gform_body {
.gform_fields {
list-style: none;
padding-left: 0px;
.gfield {
.ginput_container {
.gfield_radio {
list-style: none;
padding-left: 0px;
display: flex;
flex-direction: row;
margin-left: -5px;
width: calc(100% + 10px);
li {
label {
display: block;
position: relative;
padding: 8px 50px;
border: 2px solid #00395e;
margin: 0px 5px;
color: @color_2;
font-weight: 500;
font-size: 15px;
border-radius: 2px;
transition: all .2s ease-in-out;
overflow: hidden;
&:before {
position: absolute;
content: "";
background-image: url(../images/icons/checkmark--white.svg);
background-repeat: no-repeat;
background-position: right center;
width: 15px;
height: 12px;
left: 20px;
top: -10px;
transform: translate(0, -50%);
transition: all .2s ease-in-out;
}
}
input[type="radio"] {
opacity: 0;
visibility: hidden;
width: 1px;
}
input {
&:checked {
& + label {
background: #00395e;
color: @color_3;
&:before {
position: absolute;
content: "";
background-image: url(../images/icons/checkmark--white.svg);
background-repeat: no-repeat;
background-position: right center;
width: 15px;
height: 12px;
left: 20px;
top: 50%;
transform: translate(0, -50%);
}
}
}
}
}
li.checked {
background: grey;
}
}
}
.gfield_label {
display: block;
font-size: 20px;
color: @color_1;
font-weight: 500;
margin-bottom: 15px;
}
.ginput_container_radio {
margin-bottom: 15px;
margin-top: -20px;
}
.ginput_container_text {
input[type="text"] {
max-width: 493px;
width: 100%;
height: 47px;
padding-left: 20px;
outline: none;
}
}
}
.gfield.gfield_contains_required {
.gfield_label {
font-size: 16px;
margin-bottom: 5px;
margin-top: 30px;
.gfield_required {
margin-left: 5px;
color: @color_2;
opacity: 0.5;
}
}
}
.doel-beschrijving {
width: 100%;
max-width: 700px;
font-size: 13px;
line-height: 26px;
font-style: italic;
margin-top: 20px;
}
}
}
.gform_footer {
input[type="submit"] {
border: 0px;
background: #00395e;
color: @color_3;
border-radius: 4px;
padding: 12px 20px;
width: 300px;
font-weight: 400;
text-transform: uppercase;
outline: none;
margin-top: 10px;
}
}
}
}
}
}
@media only screen and (max-width: 991px) {
.wenskaart {
padding-bottom: 3.75rem;
}
}
@media only screen and (max-width: 768px) {
.wenskaart {
.wenskaart-form {
padding: 2rem;
.gform_wrapper {
form {
.gform_footer {
input[type="submit"] {
width: 100%;
}
}
.gform_body {
.gform_fields {
.gfield {
.ginput_container_text {
input[type="text"] {
max-width: 100%;
}
}
.ginput_container {
.gfield_radio {
li {
flex: 0 1 50%;
flex: 0 1 100%;
}
flex-direction: column;
margin-left: 0px;
width: 100%;
}
}
}
}
}
}
}
}
}
}
/* Algemene styling fomulieren */
.gform_wrapper {
.validation_error {
background: rgba(212, 0, 0, 0.1);
color: #d40000;
font-size: 12px;
font-weight: 500;
padding: 5px 15px;
border-radius: 2px;
margin-bottom: 20px;
}
.gform_body {
.gform_fields {
list-style: none;
padding-left: 0px;
.gfield {
display: block;
margin-bottom: 20px;
input[type="text"] {
max-width: 500px;
width: 100%;
height: 47px;
padding-left: 20px;
outline: none;
}
.gfield_label {
display: block;
margin-bottom: 5px;
text-transform: uppercase;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.5px;
color: #333333;
.gfield_required {
display: none;
}
}
.instruction {
font-size: 12px;
opacity: 0.8;
margin-top: 5px;
font-style: italic;
strong {
font-weight: 100;
}
}
&:last-child {
margin-bottom: 0px;
}
.ginput_container_radio {
ul {
padding-left: 0px;
li {
display: block;
margin-bottom: 5px;
input[type="radio"] {
margin-right: 10px;
}
&:last-child {
margin-bottom: 0px;
}
}
}
}
.gfield_description {
&.validation_message {
color: #d40000;
font-size: 12px;
font-weight: 500;
margin-top: 5px;
}
}
}
}
}
.gform_footer {
input[type="submit"] {
border: 0px;
background: #00395e;
color: @color_3;
border-radius: 4px;
padding: 12px 20px;
width: 300px;
font-weight: 400;
text-transform: uppercase;
outline: none;
margin-top: 10px;
}
}
}
/* styling content blocks */
.content-blocks {
display: flex;
justify-content: space-between;
margin: 0 -1rem -100px -1rem;
transform: translateY(-100px);
position: relative;
z-index: 1;
@media (max-width: 900px) {
flex-flow: column nowrap;
}
&__block {
flex: 0 1 50%;
background: #e6ebee;
margin: 0 1rem;
@media (max-width: 900px) {
margin: 1rem;
}
.buttons {
margin-top: 3rem;
}
.dropdown-toggle {
background: white;
@media (max-width: 1200px) {
width: 100% !important;
}
&:focus {
outline: none !important;
}
}
.bootstrap-select {
position: relative;
}
.btn-group.bootstrap-select.show-menu-arrow {
@media (max-width: 1200px) {
width: 100% !important;
}
}
.image {
background: #e6ebee;
background-size: cover;
height: 300px;
}
.content {
padding: 3rem;
@media (max-width: 480px) {
padding: 1.5rem;
}
}
.submit-btn {
margin-left: 30px;
@media (max-width: 1200px) {
margin-left: 0;
width: 100% !important;
}
}
}
}
.banner-logo {
position: absolute;
width: 200px !important;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1 !important;
}
.page-template-page-mijn-huis {
.banner-content {
h2 {
display: none;
}
}
.entry-header {
display: none;
}
.alert-text {
background: rgba(173, 13, 13, 0.1);
color: #ad0d0d;
padding: 8px 16px;
font-size: 12px;
margin-top: 8px;
font-weight: 500;
display: inline-flex;
}
}
@media (max-width: 1250px) {
#siteHeader #siteNavigation .menu > .menu-item {
padding: 0px 6px;
}
#siteHeader #siteNavigation .menu > .menu-item:first-child {
padding-left: 0;
padding-right: 30px;
}
#siteHeader #siteNavigation .menu a {
font-size: 12px;
}
#siteHeader a.btn-outline {
@media (min-width: 992px) {
padding: 15px !important;
font-size: 12px !important;
margin: 0 10px !important;
}
}
}
.my-home-btn {
margin-right: 10px !important;
@media (max-width: 992px) {
display: none;
}
}
#siteHeader.navigation-active {
.my-home-btn {
@media (max-width: 992px) {
display: block;
margin-top: 50px;
width: 100% !important;
}
}
}
/******************
=Medewerker-wrapper
******************/
.medewerker-wrapper {
background: #f1f1f1;
padding: 3rem 0rem;
.contact-title {
font-size: 22px;
margin-bottom: 2rem;
}
.entries {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
}
/******************
=Tile
******************/
.tile {
&__image {
position: relative;
width: 80px;
height: 80px;
border-radius: 100%;
overflow: hidden;
img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
}
&__mail {
display: inline-flex;
margin-top: 24px;
background-image: url('../html/images/icons/icon-email.svg');
background-size: 15px 15px;
background-repeat: no-repeat;
display: block;
background-position: center left;
padding-left: 1.75rem;
}
&--employee {
flex-basis: 25%;
max-width: 25%;
width: 25%;
margin-bottom: 1.5rem;
padding-left: 15px;
padding-right: 15px;
.tile__inner {
background: white;
padding: 40px;
}
}
}
@media only screen and (max-width: 1023px) {
.tile {
&--employee {
flex-basis: 50%;
max-width: 50%;
width: 50%;
}
}
}
@media only screen and (max-width: 767px) {
.tile {
&--employee {
flex-basis: 100%;
max-width: 100%;
width: 100%;
}
}
}
// Flexible content
.flexible-sections {
#primary-content {
padding-bottom: 0;
.entry-header {
margin-bottom: -22px;
margin-top: 82px;
}
h1 {
margin-bottom: 0;
font-size: 32px;
line-height: 41px;
}
}
.flexible-section {
padding: 36px 0;
&--overflow-hidden {
overflow: hidden;
}
.entry-content {
p {
&:last-of-type {
margin-bottom: 0;
}
}
h3 {
font-size: 28px;
line-height: 36px;
margin-bottom: 8px;
margin-top: 0
}
}
.text-image {
&.row {
&--reverse {
flex-direction: row-reverse;
}
}
&__image {
align-self: center;
}
@media only screen and (max-width: 768px) {
display: flex;
&.row {
flex-direction: column;
&--reverse {
flex-direction: column-reverse !important;
}
}
&__image {
margin: 40px 0;
}
}
}
.info-blocks {
display: flex;
margin: 0 -15px;
&__block {
flex: 1 1 210px;
background: #00425E;
margin: 0 15px;
display: flex;
align-items: center;
flex-flow: column;
.icon {
height: 55px;
width: 75px;
display: flex;
align-items: flex-start;
justify-content: center;
background: white;
}
.subtitle {
color: white;
font-size: 14px;
line-height: 16px;
margin-top: 20px;
}
h3 {
color: white;
font-size: 16px;
line-height: 20px;
margin-top: 16px;
max-width: 130px;
text-align: center;
margin-bottom: 42px;
}
}
}
.work-company {
margin-top: 56px;
display: flex;
font-size: 16px;
line-height: 16px;
border-bottom: 1px solid #00425E;
padding-bottom: 24px;
a {
margin-left: 40px;
text-decoration: none;
font-family: "DINPro-Bold";
}
}
.image-gallery {
margin: 0 -15px;
overflow: visible;
&:hover {
.swiper-arrows {
opacity: 1;
}
}
&--bottom {
margin-left: 120px;
z-index: 0;
}
.swiper-wrapper {
flex-direction: row;
}
&__image {
background: #fff;
height: 400px;
padding: 0 15px 30px 15px;
.image-wrap {
height: 100%;
width: 100%;
position: relative;
display: flex;
.expand-icon {
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
bottom: 0;
background: #00425E;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.swiper-pagination {
display: flex;
justify-content: center;
align-items: center;
bottom: 0;
margin-top: 10px;
.swiper-pagination-bullet {
width: 135px;
height: 3px;
border-radius: 0;
margin: 0 !important;
background: #003952;
}
}
.swiper-arrows {
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 352px;
z-index: 1;
display: flex;
justify-content: space-between;
opacity: 0;
transition: .2s ease;
&.hover {
opacity: 1;
}
.swiper-arrow {
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
background: #F9EB54;
border-top-left-radius: 6px;
cursor: pointer;
&.swiper-button-disabled {
opacity: 0;
}
&--prev {
margin-left: 14px;
svg {
transform: rotate(180deg);
}
}
&--next {
border-top-left-radius: 0;
border-top-right-radius: 6px;
margin-right: 14px;
}
}
}
}
.video-container {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
max-width: 100%;
height: auto;
iframe,
object,
embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
}
// Reference single
.reference-project-single {
#primary-content {
padding-right: 0;
}
.justify-content-center {
justify-content: center;
display: flex;
}
.entry-aside {
&--bottom {
margin-bottom: 50px;
}
}
}
.footer-cta-section {
padding-top: 36px;
position: relative;
&::after {
content: '';
height: 100px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background: #F1F1F1;
z-index: -1;
}
.justify-content-center {
justify-content: center;
display: flex;
}
.footer-cta {
width: 100%;
height: 100%;
position: relative;
padding: 160px 120px 140px 80px;
z-index: 1;
&__image {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
&::before {
content: '';
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(270deg, rgba(0, 66, 94, 1) 0%, rgba(0, 66, 94, 1) 30%, rgba(0, 66, 94, 0.47) 100%);
}
img {
object-fit: cover;
height: 100%;
width: 100%;
}
}
&__content {
display: flex;
justify-content: space-between;
align-items: flex-start;
.content {
color: white;
max-width: 350px;
h1, h2, h3, h4, h5 {
color: white;
font-size: 32px;
line-height: 44px;
margin-top: 0;
margin-bottom: 17px;
}
p {
color: white !important;
line-height: 24px;
font-size: 16px;
}
}
}
}
}
.related-pages-section {
background: #F1F1F1;
padding: 115px 0 42px 0;
&--white {
background: white;
padding-bottom: 0;
.related-pages__item .content {
background: #F1F1F1 !important;
}
}
.main-title {
font-size: 32px;
line-height: 44px;
margin: 0;
}
.related-pages {
padding-left: 30px;
&__item {
display: flex;
flex-direction: column;
text-decoration: none;
padding: 0;
margin-bottom: 30px;
min-height: 500px;
&:hover {
.image {
img {
transform: scale(1.05);
}
}
}
.image {
width: 100%;
height: 280px;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
transform-origin: center;
transition: .2s ease;
}
}
.content {
padding: 40px 32px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: flex-end;
flex-grow: 1;
.subtitle {
font-size: 16px;
color: #1D1D1D;
}
.title {
font-size: 20px;
margin-bottom: 30px;
margin-top: 0;
}
.link {
display: flex;
align-items: center;
justify-self: flex-end;
font-size: 16px;
font-family: "DINPro-Bold", Helvetica, Arial, sans-serif;
margin-top: auto;
svg {
margin-left: 16px;
margin-left: 16px;
}
}
}
}
.swiper-arrows {
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 212px;
z-index: 1;
display: flex;
justify-content: space-between;
.swiper-arrow {
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
background: #F9EB54;
border-top-left-radius: 6px;
cursor: pointer;
&.swiper-button-disabled {
opacity: 0;
}
&--prev {
svg {
transform: rotate(180deg);
}
}
&--next {
border-top-left-radius: 0;
border-top-right-radius: 6px;
}
}
}
}
}
@media (max-width: 992px) {
.flexible-sections {
div[class*="col"] {
width: 100%;
}
.flexible-section {
div[class*="col"] {
width: 100%;
}
.image-gallery {
&--bottom {
margin-left: 0;
}
.swiper-pagination {
.swiper-pagination-bullet {
width: 60px;
}
}
}
}
}
.related-pages-section {
.main-title {
margin-bottom: 20px;
}
}
.footer-cta-section {
div[class*="col"] {
width: 100%;
}
.footer-cta {
padding: 50px;
}
}
}
@media (max-width: 767px) {
.flexible-sections {
#primary-content .entry-header {
margin-bottom: 0;
margin-top: 0;
}
.flexible-section {
padding: 20px 0;
.info-blocks {
display: flex;
flex-flow: column;
&__block {
margin-bottom: 30px;
&:last-of-type {
margin-bottom: 0;
}
}
}
.image-gallery {
&__image {
height: 220px;
}
}
}
}
.footer-cta-section {
.footer-cta {
padding: 20px;
&__content {
flex-flow: column;
.content {
margin-bottom: 20px;
max-width: 100%;
}
}
}
}
.related-pages-section {
padding-top: 40px;
padding-bottom: 0;
.related-pages {
&__item {
max-width: 100%;
}
.swiper-arrows {
display: none;
}
}
}
}
.page-scroller {
width: 100%;
height: 5px;
position: absolute;
progress {
position: absolute;
left: 0;
bottom: 0;
width: 107%;
height: 5px;
border: none;
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
progress::-webkit-progress-bar {
background-color: transparent;
}
progress::-webkit-progress-value {
position: relative;
background-color: #00425e;
}
progress::-moz-progress-bar {
background-color: transparent;
}
}
.page-button {
padding-top: 50px;
.center-button {
display: flex;
justify-content: center;
}
}
body .google-marker-popup-holder {
box-shadow: none !important;
width: 204px !important;
border-radius: 0 !important;
padding: 32px;
.google-marker-popup {
width: 100%;
#infolist {
ul {
li {
margin-bottom: 0;
.li-list-col {
width: 100%;
}
+ li {
margin-top: 16px;
}
}
}
}
}
.li-list-col {
p {
margin-bottom: 4px !important;
font-size: 14px;
}
h2 {
font-size: 18px !important;
line-height: 18px !important;
}
}
.view-project {
background: @yellow-color;
color: @blue-color;
padding: 5px 20px 6px;
border-radius: 2px;
font-size: 12px;
margin-top: 24px;
height: 35px;
display: flex;
align-items: center;
text-transform: uppercase;
}
.close {
background-image: url(../images/icons/close.svg);
background-repeat: no-repeat;
background-position: right center;
background-size: 12px;
width: 16px;
opacity: 1;
height: 16px;
top: 16px;
right: 16px;
}
}
/*===============================
* HOMEPAGE V2 *
===============================*/
.notification {
text-align: center;
padding: 8px 0;
background-color: #002A47;
position: relative;
&--hide {
margin-top: -40px;
transition: margin-top 0.2s ease-in-out;
}
.wrapper {
max-width: 1400px;
padding: 0 15px;
margin: 0 auto;
display: flex;
flex-direction: row;
}
a {
text-align: center;
width: 100%;
color: #FFF;
text-decoration: none;
svg {
margin-left: 16px;
}
}
span {
display: inline-block;
text-align: right;
&:hover {
cursor: pointer;
}
}
}
.projecten {
background-color: #EAEDF0;
padding: 120px;
max-width: 1400px;
margin: 90px auto;
&__title {
width: 50% !important;
h2 {
font-size: 32px;
margin: 0;
}
}
&__link {
text-align: right;
width: 50%;
}
.entries.aanbod {
margin-top: 48px;
.entry-content {
max-height: 200px;
}
}
}
@media only screen and (min-width: 992px) {
.projecten {
&__title,
&__link {
width: 50%;
}
}
}
@media only screen and (max-width: 991px) {
.projecten {
padding: 0 16px;
&__title {
width: 100% !important;
h2 {
font-size: 28px;
line-height: 32px;
}
}
&__link {
margin-top: 32px;
text-align: left;
}
}
.entries {
.hentry-box {
width: 100%;
}
}
}
.page-template-page-homepage-v2 {
.video-background {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
max-height: 500px;
iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
@media (min-aspect-ratio: 16/9) {
height: 56.25vw
}
@media (max-aspect-ratio: 16/9) {
width: 177.78vh
}
}
}
.banner-hero {
display: flex;
flex-direction: column;
overflow: unset;
&:after {
content: "";
background-image: url('../images/backgrounds/banner-overlay.svg');
position: absolute;
top: 0;
left: 0;
width: 100%;
background-position: center;
height: 100%;
min-height: 460px;
background-size: cover;
bottom: 0;
background-repeat: no-repeat;
}
.banner-hero-content {
height: 100%;
display: flex;
flex-direction: column;
&--title {
justify-content: center;
h2 {
font-size: 56px !important;
line-height: 64px;
text-align: right;
max-width: 50% !important;
margin-left: 64px !important;
}
}
&--btns {
justify-content: flex-end;
margin-bottom: -24px !important;
.btn-primary {
background-color: #FFF;
color: #00395E;
border: 2px solid #00395E;
}
}
}
}
.intro {
background-color: @grey-bg;
padding: 110px 0 80px 0;
&__title {
h2 {
font-size: 48px;
line-height: 64px;
}
}
&__text {
p {
font-family: 'DINPro-Regular', sans-serif;
font-size: 20px;
line-height: 32px;
color: #1D1D1D;
}
}
}
.section-divider {
margin-top: -25px;
}
.pijlers {
margin: 80px 0 90px 0;
.row {
display: flex;
justify-content: center;
}
&__title {
text-align: center;
h2 {
font-size: 32px;
font-family: 'DINPro-Regular', sans-serif;
}
}
&__item {
position: relative;
display: flex;
flex-direction: column;
min-height: 525px;
margin: 15px;
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
&:before {
content: "";
background: rgb(0, 66, 94);
background: linear-gradient(180deg, rgba(0, 66, 94, 0) 0%, rgba(0, 66, 94, 1) 60%, rgba(0, 66, 94, 1) 100%);
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: -1;
}
&--content {
padding-bottom: 32px;
display: flex;
flex-direction: column;
margin-top: auto;
align-items: flex-start;
h3 {
font-size: 24px;
color: #F9EB54;
font-family: 'DINPro-Bold', sans-serif;
}
p {
margin: 35px 0 44px 0;
color: #FFF !important;
font-size: 16px;
line-height: 26px;
font-family: 'DINPro-Light', sans-serif;
}
a {
border: 2px solid #F9EB54;
padding: 13.5px 20px;
}
}
}
}
.projecten {
background-color: #EAEDF0;
padding: 120px;
max-width: 1400px;
margin: 90px auto;
&__title {
h2 {
font-size: 32px;
margin: 0;
}
}
&__link {
text-align: right;
width: 50%;
}
.entries.aanbod {
margin-top: 48px;
.entry-content {
max-height: 200px;
}
}
}
.leefwel {
margin-bottom: 90px;
.row {
display: flex;
justify-content: center;
}
&__content {
margin-right: 60px;
margin-top: 24px;
h2 {
font-size: 48px;
line-height: 56px;
margin: 0;
}
p {
margin: 16px 0 40px 0;
}
}
&__image {
img {
height: 469px;
object-fit: cover;
border-top-left-radius: 24px;
}
&:before {
content: "";
background-image: url('../images/backgrounds/banner-overlay.svg');
position: absolute;
top: 0;
left: 15px;
width: ~"calc(100% - 30px)";
background-position: center;
height: 100%;
min-height: 460px;
background-size: cover;
bottom: 0;
background-repeat: no-repeat;
border-top-left-radius: 24px;
}
}
}
.nieuwsbrief {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
margin-bottom: -110px;
padding-left: 100px;
padding-right: 100px;
.nieuwsbrief-new__left-column {
p {
font-size: 18px;
line-height: 32px;
color: #FFF !important;
opacity: 0.6;
}
}
.gform_wrapper form .gform_body .gform_fields .gfield.flex-1-1 .gfield_checkbox li label:before {
border-radius: 15px !important;
content: "";
}
.gform_button {
font-family: 'DINPro-Bold', sans-serif;
font-size: 16px !important;
}
}
.blog {
padding-top: 200px;
padding-bottom: 140px;
background-color: #EAEDF0;
&__title {
text-align: center;
margin-bottom: 60px;
h2 {
font-size: 32px;
margin: 0 0 16px 0;
}
p {
margin: 0 auto;
max-width: 40%;
}
}
article {
background-color: #FFF;
height: 500px;
max-height: 500px;
a {
text-decoration: none;
}
.entry-tile {
padding: 30px 30px 0 30px;
.read-more {
position: absolute;
right: 0;
background: #F9EB54;
padding: 18px 20px;
bottom: 0;
}
}
}
}
@media only screen and (min-width: 992px) {
.intro {
.row {
display: flex;
justify-content: center;
}
&__title {
h2 {
width: 70%;
}
}
}
.projecten {
&__title,
&__link {
width: 50%;
}
}
}
@media only screen and (max-width: 991px) {
#siteHeader {
height: auto;
}
.banner-hero {
height: 430px !important;
.banner-hero-content {
&--title {
h2 {
font-size: 32px !important;
max-width: 100% !important;
margin-right: 0 !important;
text-align: center !important;
margin-left: 0 !important;
}
}
}
}
.intro {
&__title {
h2 {
font-size: 28px;
line-height: 32px;
}
}
}
.projecten {
padding: 0 16px;
&__title {
h2 {
font-size: 28px;
line-height: 32px;
}
}
&__link {
margin-top: 32px;
text-align: left;
}
}
.pijlers {
.row {
flex-direction: column;
}
}
.leefwel {
.row {
flex-direction: column;
}
&__content {
h2 {
font-size: 28px;
line-height: 32px;
}
a {
padding: 15px !important;
}
}
&__image {
margin-top: 48px;
}
}
.nieuwsbrief-new {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}
.blog {
padding: 80px 16px 0;
&__title {
p {
max-width: 80%;
}
}
article {
height: auto;
max-height: 100%;
.entry-tile {
padding: 30px;
}
}
}
}
}
.home {
.projecten {
&__link {
width: auto !important;
margin: 0 auto !important;
}
}
.gform {
&_button {
border-radius: 0 !important;
}
}
}
@media only screen and (max-width: 991px) {
.home {
.banner-hero {
height: auto !important;
.video-background {
#home-video {
background-size: cover;
height: 100%;
background-repeat: no-repeat;
}
}
.banner-hero-content {
&--title {
h2 {
line-height: 112% !important;
}
}
&--btns {
margin-bottom: 0 !important;
.btn-list {
margin-bottom: 15px !important;
}
}
}
}
.intro {
padding: 24px 0;
}
.pijlers {
margin: 16px 0 24px 0;
&__wrapper {
flex-direction: row !important;
align-items: flex-start !important;
justify-content: flex-start !important;
overflow-x: scroll !important;
}
&__item {
min-width: 80% !important;
max-width: 80% !important;
}
}
.projecten {
margin: 32px 0 !important;
padding: 0 !important;
}
.aanbod {
margin-top: 32px;
&__wrapper {
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
overflow-x: scroll;
flex-wrap: nowrap !important;
margin-bottom: 24px;
article {
min-width: 80% !important;
max-width: 80% !important;
}
}
.hentry-box {
.entry-title {
margin-bottom: 0 !important;
}
}
}
.leefwel {
margin-bottom: 48px !important;
}
.blog {
padding: 48px 16px !important;
}
}
}
@media only screen and (max-width: 640px) {
.home {
.leefwel {
&__content {
margin-right: 0 !important;
}
}
.banner.footer {
.banner-wrapper {
height: 200px !important;
}
}
}
#cookie-alert {
max-height: 100%;
}
.site-header-grid {
padding-bottom: 15px !important;
}
}