/* Theme Name: Travel en more Theme URI: Description: A 2024 framework for WordPress. Author: Internetbureau Jun-E-Jay Version: 1.0 Tags: General comments (optional). @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap'); */ /* #Font-Face ================================================== */ /* #Site Styles ================================================== */ :root { --width-base: 1316px; --font-base: 16px; --font-base-small: 14px; --line-height: 1.6; --font-family-heading: 'Archivo', sans-serif; --font-family-base: 'Open Sans', sans-serif; --font-family-icon: 'icomoon', sans-serif; --black: #000; --white: #fff; --grey: #f9f9f9; --font-black: #212121; --font-green: #353633; --yellow: #c3a516; --blue: #587d8f; --green: #6d9658; --width: 100%; --height: 100%; --font-size-h1: 60px; --font-size-h2: 24px; --font-size-h3: 20px; --font-size-h4: 18px; --font-weight-300: 300; --font-weight-400: 400; --font-weight-500: 500; --font-weight-600: 600; --font-weight-700: 700; --text-decoration: none; --transition: all 0.25s ease-in-out; } /* ### general ### */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { font-family: var(--font-family-base); font-size: var(--font-base); font-weight: var(--font-weight-500); line-height: var(--line-height); color: var(--font-green); } body { background: var(--white); } input, select, textarea { padding: 8px; width: var(--width); min-height: 50px; font-family: var(--font-family-base); color: var(--font-black); border: solid 1px rgba(64, 64, 65, 0.2); border-radius: 10px; background-color: var(--white); } input::placeholder, textarea::placeholder { opacity: 0.6; font-size: 16px; color: var(--font-black); } textarea { padding: 15px 10px; height: 101px; resize: none; } select { appearance: none; cursor: pointer; } .form-select { background: var(--white) url('images/select-arrow.png') no-repeat center right 10px; -webkit-appearance: none; } img { display: block; max-width: var(--width); outline: 0; height: auto; } ul, li { margin: 0; padding: 0; list-style: none; } :focus { outline: none; } p { margin-bottom: 10px; } a { display: inline-block; transition: var(--transition); color: var(--font-green);} a:hover{ text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin-bottom: 20px; font-family: var(--font-family-heading); font-style: normal; line-height: 1; color: var(--font-black); } h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); } h4 { font-size: var(--font-size-h4); } h1 strong, h2 strong, h3 strong, h4 strong, h5 strong { color: var(--yellow); } input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-results-button, input[type='search']::-webkit-search-results-decoration { -webkit-appearance: none; } /* ### global classes ### */ .clear { visibility: hidden; clear: both; height: 0; line-height: 0; } .check { padding: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; min-height: auto; color: var(--font-green); -webkit-appearance: none; cursor: pointer; } .check:checked:before { top: 0; left: 0; display: block; font-family: var(--font-family-icon); font-size: 8px; color: var(--font-green); content: '\e903'; } .center { margin: 0 auto; position: relative; max-width: var(--width-base); } .centered { padding-right: calc((100% - var(--width-base)) / 2); padding-left: calc((100% - var(--width-base)) / 2); } .button { padding: 10px 32px; font-size: var(--font-base); font-weight: var(--font-weight-500); text-align: center; text-decoration: var(--text-decoration); color: var(--blue); border: 2px solid var(--white); border-radius: 10px; background-color: var(--white); transition: var(--transition); cursor: pointer; } .button:hover { background-color: #f1ecec; border: 2px solid #f1ecec; } .button.green { color: var(--white); border: 2px solid var(--green); background-color: var(--green); } .button.green:hover { background-color: #64884f; border: 2px solid #64884f; } .button.yellow { color: var(--white); border: 2px solid var(--yellow); background-color: var(--yellow); } .button.yellow:hover { background-color: #ab9013; border: 2px solid #ab9013; } .button.blue { color: var(--white); border: 2px solid var(--blue); background-color: var(--blue); } .button.blue:hover { background-color: #466b79; border: 2px solid #466b79; } .button.outline { padding: 10px 68px; font-weight: var(--font-weight-400); border: 2px solid var(--blue); background-color: transparent; } .button.outline:hover { color: var(--white); background-color: var(--blue); } .link { color: var(--font-green); } .link:hover { text-decoration: none; } #gform_wrapper_1{ width: 100%; } #gform_fields_1{ display: flex; justify-content: space-between; align-items: center; width: 100%; } #gform_fields_1 .gfield{ flex-grow: 1; } .gform_required_legend, .gfield_validation_message{ display: none!important; } #gform_wrapper_1 .ginput_container input[type=text], #gform_wrapper_1 .ginput_container input[type=email]{ padding: 8px; width: var(--width); min-height: 50px!important; font-family: var(--font-family-base); color: var(--font-black); border: solid 1px rgba(64, 64, 65, 0.2); border-radius: 10px; background-color: var(--white); } #gform_wrapper_1 .gfield_error .ginput_container input[type=text], #gform_wrapper_1 .gfield_error .ginput_container input[type=email]{ border:1px solid rgb(192, 43, 10); } #gform_wrapper_1 .gform-button {min-height: 50px; padding: 10px 32px; font-size: var(--font-base); font-weight: var(--font-weight-500); text-align: center; text-decoration: var(--text-decoration); color: var(--blue); border: 2px solid var(--blue); border-radius: 10px; background-color: var(--white); transition: var(--transition); cursor: pointer; } #gform_wrapper_1 .gform-button:hover { color: var(--white); background-color: var(--blue); } .grayedout{ opacity: 0.5; pointer-events: none; } .custom-select{ position: relative; } .custom-select { background-image: url('images/select-arrow.png'); background-position: 96% center; background-repeat: no-repeat; -webkit-appearance: none; } .mobile_menu_item{ display: none; } .ginput_container_consent{ position: relative; padding-left: 30px; } /* ### wrapper ### */ #wrapper { padding-top: 120px; position: relative; display: block; width: var(--width); min-height: var(--height); overflow-x: clip; } /* ### main container ### */ #mainCntr { width: var(--width); } /* ### header container ### */ #headerCntr { position: fixed; top: 0; left: 0; z-index: 5000; width: var(--width); background-color: var(--blue); transition: var(--transition); } #headerCntr.sticky { background-color: var(--white); box-shadow: 0 0 20px rgba(0, 0, 0, 0.16); } /* ### header box ### */ .headerBox { padding-top: 10px; padding-bottom: 10px; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; width: var(--width); transition: var(--transition); } .headerBox .logo-image { position: relative; display: flex; align-items: center; width: 21.5%; } .headerBox .logo img { width: var(--width); transition: var(--transition); max-width: 100px; height: auto;} #zoek_veld_holder{ position: relative;padding-right: calc((100% - var(--width-base)) / 2); padding-left: calc((100% - var(--width-base)) / 2); } #zoek_veld{ width: 100%; display: flex; justify-content: flex-end;position: relative; overflow: hidden;} #zoek_veld.show{ overflow: visible; } #zoek_veld input{ width: 100%; max-width: 280px; position: absolute; border-radius: 10px 0 0 10px; right: 50px; border-right:none; } #zoek_btn{ width: 50px; height: 50px; background-color: #ffffff; border-radius: 0 10px 10px 0; border:none; position: absolute; font-size: 14px;border: solid 1px rgba(64, 64, 65, 0.2); border-left: none; cursor: pointer; } #pagina_holder{ display: flex; justify-content: flex-start; flex-wrap: wrap; gap:20px; } #pagina_holder .column{ width: calc(33.33% - 20px); } #acco_holder{ display: flex; justify-content: flex-start; flex-wrap: wrap; gap:20px; } #acco_holder a{ width: calc(33.33% - 20px); } #reis_holder{ display: flex; justify-content: flex-start; flex-wrap: wrap; gap:20px; margin-bottom: 40px; } #reis_holder .column{ width: calc(33.33% - 20px); } #blog_holder{ display: flex; justify-content: flex-start; flex-wrap: wrap; gap:20px; margin-bottom: 40px; } #blog_holder .column{ width: calc(33.33% - 20px); } /* ### menu box ### */ .menuBox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 78.5%; } .menuBox ul { margin-right: 10px; margin-left: 60px; display: flex; flex-wrap: wrap; list-style: none; } .menuBox ul > li { margin-right: 40px; padding: 24px 0; position: relative; transition: var(--transition); } .menuBox ul > li > a { font-weight: var(--font-weight-500); text-decoration: var(--text-decoration); color: var(--white); text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); transition: var(--transition); } .menuBox ul > li > a:hover { text-decoration: underline; } .menuBox ul > li:last-child { margin-right: 0; } .menuBox ul > li.menu-item-has-children > a:after { margin-left: 5px; display: inline-block; font-family: var(--font-family-icon); font-size: 5px; color: var(--white); vertical-align: middle; content: '\e900'; } .menuBox ul > li > ul { margin: 0; padding: 10px 0; position: absolute; top: 100%; left: 0; display: block; opacity: 0; visibility: hidden; width: max-content; border-radius: 0 0 5px 5px; background-color: var(--white); transition: var(--transition); box-shadow: 0 10px 10px rgba(0, 0, 0, 0.16); } .menuBox ul > li > ul > li { margin: 0; padding: 0; } .menuBox ul > li > ul > li > a { padding: 3px 30px; display: block; color: var(--font-black); } .menuBox ul > li > ul > li > ul { top: 0; left: 100%; } .menuBox ul > li:hover ul { opacity: 1; visibility: visible; } .menuBox ul > li:hover ul > li > ul { opacity: 0; visibility: hidden; } .menuBox ul > li:hover ul > li:hover ul { opacity: 1; visibility: visible; } .menuBox ul > li:hover ul > li:hover ul > li > ul { opacity: 0; visibility: hidden; } .menuBox ul > li:hover ul > li > ul > li:hover ul { opacity: 1; visibility: visible; } #desktop_search_btn{ width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 28px; color: #ffffff; cursor: pointer; margin-left: auto; } #mobile_search_btn{ width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; font-size: 18px; color: #ffffff; cursor: pointer; } /* ### mobile menu ### */ .mobile-menu { position: absolute; top: 30px; right: 5px; display: none; border-radius: 50%; gap:10px; } .mobile-menu .hamburger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer; } .m-menu__checkbox { display: none; } .m-menu__toggle { margin-left: -8px; padding-top: 5px; cursor: pointer; color: var(--black); } .m-menu { position: fixed; top: 0; right: -768px; z-index: 2; opacity: 0; visibility: hidden; width: calc(100vw - 30px); max-width: 768px; height: 100vh; background-color: var(--white); transform: translate3d(768px, 0, 0); transition: transform 0.35s; overflow: hidden; } .m-menu__overlay { position: absolute; top: 0; bottom: 0; z-index: 1; display: none; width: 100%; background-color: rgba(103, 103, 103, 0.5); } .m-menu__header { padding: 0 16px; display: flex; align-items: center; justify-content: space-around; height: 50px; border-bottom: 1px solid var(--black); } .m-menu__header span { width: 100%; font-size: 20px; text-align: center; color: var(--black); } .m-menu .m-menu { transform: translate3d(768px, 0, 0); } .m-menu ul { height: 100%; overflow-y: auto; } .m-menu ul li { margin-right: 0 !important; position: relative; display: block !important; } .m-menu ul li ul { display: block !important; } .m-menu ul li a { padding: 0 15px !important; color: var(--font-black); } .m-menu ul li a:hover { text-decoration: none !important; } .m-menu ul li a, nav .m-menu ul li label { padding: 0 15px; position: relative; display: block; line-height: 47px; text-align: left; text-decoration: var(--text-decoration); color: var(--font-black); border-bottom: 1px solid var(--black); cursor: pointer; } nav .m-menu ul li label { border-bottom: 0; } .m-menu ul li label.a-label__chevron { padding: 15px 25px; position: absolute; top: 0; right: 0; display: inline-block; height: 48px; border-left: solid 1px var(--black); } .m-menu ul li label.a-label__chevron:after { padding: 5px; position: absolute; top: 19px; right: 20px; display: inline-block; width: 0; height: 0; border-color: var(--black); border-style: solid; border-width: 1px 1px 0 0; transform: rotate(45deg); content: ''; } .m-menu ul li .-invisible { border-bottom: 0; } .m-menu .m-menu label.m-menu__toggle { margin: 0 !important; padding: 0 0 0 10px; display: flex; border-bottom: 0; } .m-menu__checkbox:checked ~ .m-menu__overlay { display: block; } .m-menu__checkbox:checked ~ .m-menu { right: 0; opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); } .m-menu ul li.btn { padding: 20px 10px 10px; border: 0; } .m-menu ul li.btn .button { width: var(--width); max-width: unset; text-align: center; color: var(--white); border: 0; background-color: var(--blue); } /* ### content container ### */ #contentCntr { width: var(--width); } /* ### hero box ### */ .heroBox { padding-top: 70px; padding-bottom: 75px; position: relative; width: var(--width); min-height: 600px; display: flex; flex-direction: column; justify-content: center; } .heroBox h1 { margin-bottom: 12px; display: inline-block; color: var(--white); text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .heroBox .intro { margin: 0 auto; position: relative; z-index: 1; width: var(--width); max-width: 1090px; text-align: center; } .heroBox .paragraph { margin: 0 auto; max-width: 940px; } .heroBox .intro p { margin-bottom: 18px; font-size: 18px; color: var(--white); } .heroBox .wrap { margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; } .heroBox .wrap .column { padding: 0 10px; } .heroBox .bg-image { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); } .heroBox .bg-image:before { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); background-color: rgba(0, 0, 0, 0.2); content: ''; } .heroBox .bg-image img { width: var(--width); height: var(--height); object-fit: cover; } .heroBox .bg-image.inner { height: var(--height); } .heroBox .bg-image.inner img { height: var(--height); min-height: 320px; } /* ### banner box ### */ .bannerBox { padding-top: 65px; padding-bottom: 60px; position: relative; width: var(--width); } .bannerBox.inner { padding-top: 147px; padding-bottom: 127px; } .bannerBox h1 { margin-bottom: 12px; display: inline-block; color: var(--white); text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .bannerBox .intro { margin: 0 auto; position: relative; z-index: 1; width: var(--width); max-width: 1090px; text-align: center; } .bannerBox.inner .intro { max-width: 66%; text-align: left; margin: 0; } .bannerBox .paragraph { margin: 0 auto; max-width: 871px; } .bannerBox .intro p { margin-bottom: 18px; font-size: 18px; color: var(--white); } .bannerBox .bg-image { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); } .bannerBox .bg-image:before { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); background-color: rgba(0, 0, 0, 0.2); content: ''; } .bannerBox .bg-image img { width: var(--width); height: var(--height); object-fit: cover; } /* ### usp box ### */ .uspBox { padding-top: 60px; padding-bottom: 20px; background-color: var(--white); } .uspBox h2 { margin: 0 auto 35px; max-width: 550px; text-align: center; } .uspBox .holder { margin: 0 -8px 10px; display: flex; flex-wrap: wrap; } .uspBox .holder .column { margin-bottom: 15px; padding: 0 8px; width: 25%; } .uspBox.inner { padding-bottom: 50px; } .uspBox.inner .column { width: 33.33%; } .uspBox.inner .card-usp { padding: 25px 30px 15px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 10px; } .uspBox.inner h2 { max-width: 400px; } .uspBox .wrap { display: flex; justify-content: center; } /* ### card-usp ### */ .card-usp { text-align: center; } .card-usp .image { margin-bottom: 15px; display: flex; align-items: center; justify-content: center; min-height: 55px; } .card-usp .title { margin-bottom: 5px; font-family: var(--font-family-heading); } .card-usp p { line-height: 1.8; } /* ### holiday box ### */ .holidayBox { padding-top: 60px; padding-bottom: 50px; position: relative; } .holidayBox h2 { margin-bottom: 25px; text-align: center; } .holidayBox .holder { margin-bottom: 25px; display: grid; grid-template-columns: 33.33% 33.33% 33.33%; column-gap: 15px; row-gap: 15px; } .holidayBox .wrap { display: flex; justify-content: center; } .holidayBox .button.outline { color: var(--green); border: 2px solid var(--green); } .holidayBox .button.outline:hover { color: var(--white); background-color: var(--green); } .holidayBox .bg-image { position: absolute; top: 0; left: 0; z-index: -1; width: var(--width); height: var(--height); pointer-events: none; } .holidayBox .bg-image:before { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); background-color: rgba(88, 125, 143, 0.05); content: ''; } .holidayBox .bg-image img { opacity: 0.05; width: var(--width); height: var(--height); object-fit: cover; } /* ### card-holiday ### */ .card-holiday { width: var(--width); text-decoration: var(--text-decoration); } .card-holiday .image { position: relative; width: var(--width); overflow: hidden; border-radius: 10px 10px 0 0; } .card-holiday .image img { width: var(--width); height: 240px; object-fit: cover; transition: var(--transition); } .card-holiday .tag { position: absolute; bottom: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: center; width: var(--width); } .card-holiday .tag span { margin-right: 10px; margin-left: 1px; padding: 4px 0; width: var(--width); font-size: 14px; text-align: center; color: var(--font-green); border-radius: 10px 10px 0 0; background-color: var(--white); display: block; width: auto; padding-left: 10px; padding-right: 10px; } .card-holiday .info { padding: 32px 40px 40px; width: var(--width); border-radius: 0 0 10px 10px; background-color: var(--white); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } .card-holiday .title { padding-bottom: 28px; display: block; min-height: 42px; font-family: var(--font-family-heading); font-size: 18px; line-height: 1.3; text-decoration: none; color: var(--font-green); border-bottom: 1px solid rgba(112, 112, 112, 0.3); } .card-holiday ul { padding-top: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(112, 112, 112, 0.3); } .card-holiday ul > li { margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; color: var(--font-green); } .card-holiday .price { padding-top: 8px; padding-bottom: 15px; font-family: var(--font-family-heading); font-size: 20px; text-align: center; color: var(--font-green); } .card-holiday ul > li img { margin-right: 8px; } .card-holiday .price em { font-family: var(--font-family-base); font-size: 12px; font-style: normal; } .card-holiday:hover .image img { transform: scale(1.05); } .card-holiday:hover .button.green { color: var(--green); background-color: transparent; } /* ### eBook Box ### */ .eBookBox { padding-top: 50px; padding-bottom: 50px; background-color: var(--white); } .eBookBox .box { position: relative; display: flex; flex-wrap: wrap; border-radius: 10px; background-color: var(--yellow); } .eBookBox .left { padding: 38px 20px 36px 40px; position: relative; z-index: 1; width: 58%; } .eBookBox .right { margin-top: -30px; margin-bottom: -30px; padding-left: 20px; position: relative; z-index: 1; display: flex; justify-content: center; width: 42%; } .eBookBox .right img { border-radius: 3px; } .eBookBox h2 { margin-bottom: 21px; color: var(--white); } .eBookBox ul { margin-bottom: 23px; color: var(--white); } .eBookBox ul > li { margin-bottom: 4px; padding-left: 20px; position: relative; } .eBookBox ul > li:before { position: absolute; top: 5px; left: 0; font-family: var(--font-family-icon); font-size: 10px; content: '\e903'; } .eBookBox .holder { margin: 0 -8px 8px; display: flex; flex-wrap: wrap; } .eBookBox .form-field { padding: 0 8px; width: 33.33%; } .eBookBox .button { width: 100%; height: 50px; } .eBookBox .form-select, .eBookBox .form-input { width: 100%; height: 50px; min-height: auto; font-size: 16px; color: rgba(33, 33, 33, 0.6); border-radius: 10px; background-color: var(--white); } .eBookBox input::placeholder { color: rgba(33, 33, 33, 0.6); } .eBookBox .form-select { background-position: center right 10px; } .eBookBox label { position: relative; display: block; color: #ffffff!important;} .eBookBox label input[type='checkbox'] { padding: 0; position: absolute; top: 2px; left: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; min-height: auto; border: 0; border-radius: 0; background-color: var(--white); -webkit-appearance: none; } .eBookBox label input[type='checkbox']:checked:before { display: block; font-family: var(--font-family-icon); font-size: 10px; color: var(--green); content: '\e903'; } .eBookBox label span { font-size: 12px; color: var(--white); } .eBookBox .bg { position: absolute; top: 0; left: 0; opacity: 0.05; width: 100%; height: 100%; } .eBookBox .bg img { width: 100%; height: 100%; border-radius: 3px; object-fit: cover; } #gform_fields_2{ display: flex!important; flex-wrap: wrap!important; position: relative!important; padding-bottom: 40px;} #field_2_1{ width: 100%!important; min-width: 100%!important; position: absolute; bottom:0px; } #field_2_1 .ginput_container, #input_2_1_1{ display: flex!important; } #input_2_3, #input_2_4 { width: 100%; height: 50px; min-height: 50px; font-size: 16px; color: rgba(33, 33, 33, 0.6); border-radius: 10px; background-color: var(--white); } #gform_submit_button_2 { padding: 10px 32px!important; font-size: var(--font-base)!important; font-weight: var(--font-weight-500)!important; text-align: center!important; text-decoration: var(--text-decoration)!important; color: var(--white)!important; border: 2px solid var(--blue)!important; background-color: var(--blue)!important; border-radius: 10px!important; cursor: pointer!important; height: 50px!important; min-height: 50px!important; } #gform_submit_button_2:hover { background-color: #466b79!important; border: 2px solid #466b79!important; } /* ### destination box ### */ .destinationBox { padding-top: 60px; padding-bottom: 50px; position: relative; } .destinationBox.inner { padding-top: 78px; padding-bottom: 77px; } .destinationBox h2 { margin-bottom: 25px; text-align: center; } .destinationBox .holder { margin-bottom: 25px; display: grid; grid-template-columns: 33% 33% 33%; column-gap: 15px; row-gap: 30px; } .destinationBox .holder { margin-bottom: 25px; display: grid; grid-template-columns: 33% 33% 33%; column-gap: 15px; row-gap: 15px; } .destinationBox.inner .holder { margin-bottom: 25px; display: grid; grid-template-columns: 33% 33% 33%; column-gap: 15px; row-gap: 40px; } .destinationBox h2 { margin-bottom: 25px; text-align: center; } .destinationBox .holder { margin-bottom: 25px; display: grid; grid-template-columns: 33% 33% 33%; column-gap: 15px; row-gap: 15px; } .destinationBox.inner .holder { margin-bottom: 25px; display: grid; grid-template-columns: 33% 33% 33%; column-gap: 15px; row-gap: 40px; } .destinationBox .wrap { display: flex; justify-content: center; } .destinationBox .button.outline { color: var(--green); border: 2px solid var(--green); } .destinationBox .button.outline:hover { color: var(--white); background-color: var(--green); } .destinationBox .bg-image { position: absolute; top: 0; left: 0; z-index: -1; width: var(--width); height: var(--height); pointer-events: none; } .destinationBox .bg-image:before { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); background-color: rgba(88, 125, 143, 0.05); content: ''; } .destinationBox .bg-image img { opacity: 0.05; width: var(--width); height: var(--height); object-fit: cover; } /* ### card-destination ### */ .card-destination { width: var(--width); text-decoration: var(--text-decoration); } .card-destination .image { position: relative; width: var(--width); overflow: hidden; border-radius: 10px 10px 0 0; } .card-destination .image img { width: var(--width); height: 240px; object-fit: cover; transition: var(--transition); } .card-destination .tag { position: absolute; bottom: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: center; width: var(--width); } .card-destination .tag span { margin-right: 10px; margin-left: 1px; padding: 4px 0; width: var(--width); font-size: 14px; text-align: center; color: var(--font-green); border-radius: 10px 10px 0 0; background-color: var(--white); display: block; width: auto; padding-left: 10px; padding-right: 10px;} .card-destination .info { padding: 32px 40px 40px; width: var(--width); border-radius: 0 0 10px 10px; background-color: var(--white); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } .card-destination .title { padding-bottom: 28px; display: block; min-height: 42px; font-family: var(--font-family-heading); font-size: 18px; line-height: 1.3; text-decoration: none; color: var(--font-green); border-bottom: 1px solid rgba(112, 112, 112, 0.3); } .card-destination ul { padding-top: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(112, 112, 112, 0.3); } .card-destination.inner ul { border-bottom: none; } .card-destination ul > li { margin-bottom: 12px; padding-left: 30px; position: relative; display: flex; flex-wrap: wrap; align-items: center; color: var(--font-green); } .card-destination ul > li:before { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-family: var(--font-family-icon); font-size: 10px; color: var(--blue); border: 2px solid var(--blue); border-radius: 50%; content: '\e903'; } .card-destination .price { padding-top: 8px; padding-bottom: 15px; font-family: var(--font-family-heading); font-size: 20px; text-align: center; color: var(--font-green); } .card-destination .price em { font-family: var(--font-family-base); font-size: 12px; font-style: normal; } .card-destination:hover .image img { transform: scale(1.05); } .card-destination:hover .button.yellow { color: var(--yellow); background-color: transparent; } /* ### breadcrumb box ### */ .breadcrumbBox { width: var(--width); } .breadcrumbBox nav { padding-top: 5px; padding-bottom: 10px; display: flex; flex-wrap: wrap; } .breadcrumbBox span { position: relative; color: var(--black); } .breadcrumbBox a { color: var(--font-green); } .breadcrumbBox p{ padding: 0; margin: 0; } /* ### text image box ### */ .text-imageBox { padding-top: 80px; padding-bottom: 80px; width: var(--width); background-color: var(--white); } .text-imageBox { padding-top: 80px; padding-bottom: 80px; width: var(--width); } .text-imageBox .holder { display: grid; grid-template-columns: 50% 50%; column-gap: 33px; row-gap: 20px; } .text-imageBox .content { padding-top: 31px; } .text-imageBox .content p { margin-bottom: 49px; } .text-imageBox .content p:last-of-type { margin-bottom: 35px; } .text-imageBox .block { margin: 0 -5px; display: flex; flex-wrap: wrap; } .text-imageBox .column { padding: 0 5px; width: 50%; display: flex; flex-direction: column; justify-content: space-between; } .text-imageBox .block .image { width: var(--width); height: 48.5%; } .text-imageBox .block .image img { width: var(--width); object-fit: cover; border-radius: 10px 0 0; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); height: 100%; } .text-imageBox .block .image1 { width: var(--width); height: 48.5%; display: flex; flex-direction: column; justify-content: flex-end; } .text-imageBox .block .image1 img { width: var(--width); object-fit: cover; border-radius: 0 0 0 10px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); height: 100%; } .text-imageBox .block .image2 { width: var(--width); height: 100%; } .text-imageBox .block .image2 img { width: var(--width); object-fit: cover; border-radius: 0 10px 10px 0; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); height: 100%; } .text-imageBox .single_img img{ object-fit:cover; } .text-imageBox.inner .content { order:2; } .text-imageBox.inner .block { order:1; } .text-imageBox .content a{ color: var(--font-green);line-height: var(--line-height); } /* ### full width text box ### */ .full-textBox { padding-top: 78px; padding-bottom: 82px; position: relative; width: var(--width); } .full-textBox .content { padding: 0 110px; position: relative; z-index: 1; } .full-textBox .content p { margin-bottom: 35px; } .full-textBox .bg-image { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); pointer-events: none; } .full-textBox .bg-image:before { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); background-color: rgba(88, 125, 143, 0.05); content: ''; } .full-textBox .bg-image img { opacity: 0.05; width: var(--width); height: var(--height); object-fit: cover; } /* ### team box ### */ .teamBox { padding-top: 79px; padding-bottom: 82px; position: relative; width: var(--width); background-color: #eeeff1; } .teamBox h2 { margin-bottom: 26px; position: relative; z-index: 1; font-weight: var(--font-weight-400); } .teamBox .holder { display: grid; grid-template-columns: auto auto auto auto; column-gap: 16px; row-gap: 20px; } .teamBox .bg-image { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); pointer-events: none; } .teamBox .bg-image:before { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); background-color: rgba(88, 125, 143, 0.05); content: ''; } .teamBox .bg-image img { opacity: 1; width: var(--width); height: var(--height); object-fit: cover; } .teamBox .column { position: relative; z-index: 1; } /* ### card team ### */ .card-team { width: var(--width); transition: var(--transition); } .card-team .image { width: var(--width); overflow: hidden; border-radius: 10px 10px 0 0; } .card-team .image img { width: var(--width); height: var(--height); border-radius: 10px 10px 0 0; transition: var(--transition); object-fit: cover; } .card-team .info { padding: 24px 40px; width: var(--width); border-radius: 0 0 10px 10px; background-color: var(--white); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } .card-team .info h4 { margin-bottom: 24px; font-weight: var(--font-weight-400); } .card-team .info a { margin-bottom: 4px; display: block; color: var(--blue); } .card-team .info a:hover { text-decoration: none; } .card-team .info a:nth-child(3) { margin-bottom: 35px; } /* ### seo box ### */ .seoBox { padding-top: 82px; padding-bottom: 80px; width: var(--width); } .seoBox .holder { display: grid; grid-template-columns: auto auto; column-gap: 56px; row-gap: 20px; } .seoBox .content { width: var(--width); } .seoBox .content h2 { font-weight: var(--font-weight-400); } .seoBox .content p { margin-bottom: 34px; line-height: 1.8; } .seoBox .content p:last-of-type { margin-bottom: 37px; } /* ### intro center box ### */ .intro-centerBox {padding-top: 40px; padding-bottom: 40px; width: var(--width); } .intro-centerBox .content { margin: 0 auto; max-width: 880px; text-align: center; } .intro-centerBox .content h2 { margin-bottom: 24px; line-height: 1.1; } .intro-centerBox .content p { margin-bottom: 28px; } /* ### social box ### */ .socialBox { margin-bottom: 80px; width: var(--width); } .socialBox.inner { margin-bottom: 59px; } .socialBox .wrap { padding: 36px 40px 34px; display: flex; align-items: center; justify-content: space-between; border-radius: 10px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } .socialBox .heading { width: 10%; } .socialBox.inner .heading { width: 20%; } .socialBox .heading h2 { margin-bottom: 0; } .socialBox .links { width: 80%; } .socialBox.inner .links { width: 80%; } .socialBox .links ul { margin: 0 -15px; display: flex; flex-wrap: wrap; justify-content: end; } .socialBox .links ul > li { padding: 0 15px; } .socialBox .links ul > li > a { padding: 10px 21px; } .socialBox.inner .links ul > li > a { padding: 10px 27px; } /* ### contact box ### */ .contactBox { margin-bottom: 200px; display: flex; flex-wrap: wrap; justify-content: space-between; width: var(--width); } .contactBox input[type=text], .contactBox input[type=email], .contactBox input[type=tel], .contactBox textarea, .contactBox select { padding: 8px!important; width: var(--width)!important; min-height: 50px!important; font-family: var(--font-family-base)!important; color: var(--font-black)!important; border: solid 1px rgba(64, 64, 65, 0.2)!important; border-radius: 10px!important; background-color: var(--white)!important; } .contactBox input[type=checkbox] { border: solid 1px rgba(64, 64, 65, 0.2)!important; border-radius: 3px!important; background-color: var(--white)!important; } .contactBox .gform-button { padding: 10px 30px!important; min-height: 50px!important; font-weight: var(--font-weight-400)!important; border: 2px solid var(--blue)!important; background-color: transparent!important; font-size: var(--font-base)!important; font-weight: var(--font-weight-500)!important; text-align: center!important; text-decoration: var(--text-decoration)!important; color: var(--blue)!important; border-radius: 10px!important; transition: var(--transition)!important; cursor: pointer!important; } .contactBox .gform_button { padding: 10px 30px!important; min-height: 50px!important; font-weight: var(--font-weight-400)!important; border: 2px solid var(--blue)!important; background-color: transparent!important; font-size: var(--font-base)!important; font-weight: var(--font-weight-500)!important; text-align: center!important; text-decoration: var(--text-decoration)!important; color: var(--blue)!important; border-radius: 10px!important; transition: var(--transition)!important; cursor: pointer!important; } #field_3_7{ display: flex; align-items: center; } /* ### card form ### */ .card-form { padding: 40px; width: 66.2%; height: var(--height); border-radius: 10px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } .card-form p { margin-bottom: 40px; } .card-form .form-group { margin: 0 -7px; display: flex; flex-wrap: wrap; } .card-form .form-item { margin-bottom: 20px; padding: 0 7px; width: 50%; } .card-form .form-item.large { margin-bottom: 13px; width: var(--width); } .card-form .form-item.large textarea { height: 260px; } .card-form .column.submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .card-form .label-text { margin-bottom: 1px; display: block; font-size: 16px; font-weight: var(--font-weight-700); } .card-form .button { padding: 16px; max-width: 316px; } .card-form .btn-item { padding: 0 7px; display: flex; align-items: center; justify-content: space-between; width: var(--width); } .card-form label.checkbox { padding-left: 25px; position: relative; display: block; } .card-form label.checkbox span { font-size: 14px; font-weight: var(--font-weight-400); } .card-form .check { position: absolute; top: 3px; left: 0; border-radius: 5px; } /* ### card side ### */ .card-side { width: 32.5%; height: var(--height); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 10px; } .card-side .image { width: var(--width); } .card-side .image img { width: var(--width); object-fit: cover; border-radius: 10px 10px 0 0; } .card-side .content { padding: 25px 40px; } .card-side .info { margin-bottom: 39px; } .card-side .info h4 { margin-bottom: 15px; padding-bottom: 29px; border-bottom: 1px #ccc solid; } .card-side .contact { margin-bottom: 34px; } .card-side .contact span { display: block; } .card-side .contact span a { margin-bottom: 5px; } .card-side .support { margin-bottom: 48px; } .card-side .support h4 { margin-bottom: 9px; font-size: 16px; } .card-side .support:last-of-type { margin-bottom: 0; } /* ### blog content box ### */ .blog-contentBox { margin-bottom: 80px; padding-top: 60px; padding-bottom: 80px; position: relative; width: var(--width); } .blog-contentBox .block { margin: 0 auto; padding: 30px 112px 80px; position: relative; z-index: 1; max-width: 1096px; border-radius: 10px; background-color: var(--white); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } .blog-contentBox .block p { margin-bottom: 33px; line-height: 1.8; } .blog-contentBox .block h3 { margin-bottom: 10px; } .blog-contentBox .block h4 { margin-bottom: 10px; } .blog-contentBox .image-block { margin: 0 -10px 16px; display: flex; flex-wrap: wrap;} .blog-contentBox .image-block .image { margin-bottom: 16px; padding: 0 10px; display: block; width: var(--width); text-decoration: none; } .blog-contentBox .image-block .image.w-50 { width: 50%; } .blog-contentBox .image-block .image.w-33 { width: 33.33%; } .blog-contentBox .image-block .overflow { overflow: hidden; } .blog-contentBox .image-block .image img { width: var(--width); height: var(--height); transition: var(--transition); object-fit: cover; } .blog-contentBox .image-block .image:hover img { transform: scale(1.05); } .blog-contentBox .bg-image { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); pointer-events: none; } .blog-contentBox .bg-image:before { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); background-color: rgba(88, 125, 143, 0.05); content: ''; } .blog-contentBox .bg-image img { opacity: 0.05; width: var(--width); height: var(--height); object-fit: cover; } .blog-contentBox .foto_caption{ font-size: 12px; display:block; text-align:center;} /* ### news box ### */ .newsBox { padding-top: 60px; padding-bottom: 60px; position: relative; width: var(--width); } .newsBox.inner { padding-top: 0; } .newsBox h2 { margin-bottom: 30px; line-height: 1.1; text-align: center; } .newsBox .holder { margin-bottom: 32px; display: grid; grid-template-columns: auto auto auto; column-gap: 16px; row-gap: 20px; } .newsBox .link { display: flex; justify-content: center; } .newsBox .bg-image { position: absolute; top: 0; left: 0; z-index: -1; width: var(--width); height: var(--height); pointer-events: none; } .newsBox .bg-image:before { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); background-color: rgba(88, 125, 143, 0.05); content: ''; } .newsBox .bg-image img { opacity: 0.05; width: var(--width); height: var(--height); object-fit: cover; } /* ### card news ### */ .card-news { width: var(--width); text-decoration: none; transition: var(--transition); height: 100%; } .card-news .image { position: relative; width: var(--width); border-radius: 10px 10px 0 0; overflow: hidden; } .card-news .image img { width: var(--width); height: 240px; border-radius: 10px 10px 0 0; transition: var(--transition); object-fit: cover; } .card-news .content { padding: 32px 40px; border-radius: 0 0 10px 10px; background-color: var(--white); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); height: calc(100% - 240px);} .card-news .content.inner { padding: 32px 40px; position: relative; z-index: 1; border-radius: 0 0 10px 10px; background-color: var(--white); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } .card-news .content h4 { margin-bottom: 20px; line-height: 1.3; } .card-news .content p { margin-bottom: 36px; line-height: 1.8; color: var(--font-green); } .card-news .content span { text-decoration: underline; color: var(--blue); } .card-news:hover .content span { text-decoration: none; } .card-news:hover .image img { transform: scale(1.05); } .card-news .image .tag { position: absolute; bottom: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: center; width: var(--width); } .card-news .image .tag span { margin-right: 10px; margin-left: 1px; padding: 4px 0; width: var(--width); font-size: 14px; text-align: center; color: var(--font-green); border-radius: 10px 10px 0 0; background-color: var(--white); display: block; width: auto; padding-left: 10px; padding-right: 10px; } /* ### author box ### */ .authorBox { margin-bottom: 102px; position: relative; width: var(--width); height: 276px; } .authorBox .holder { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; } .authorBox .image { position: relative; top: -22px; left: -1px; width: 24.6%; } .authorBox .image img { object-fit: cover; } .authorBox .text { padding-top: 60px; padding-left: 34px; width: 75%; } .authorBox .bg-image { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); min-height: 276px; pointer-events: none; } .authorBox .bg-image:before { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); background-color: rgba(88, 125, 143, 0.05); content: ''; } .authorBox .bg-image img { opacity: 0.05; width: var(--width); height: var(--height); object-fit: cover; } /* ### review single box ### */ .review-singleBox { margin-bottom: 80px; padding-top: 60px; padding-bottom: 60px; position: relative; width: var(--width); } .review-singleBox .column { margin: 0 auto 40px; padding: 35px 42px; position: relative; z-index: 1; max-width: 1094px; border-radius: 10px; background-color: var(--white); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } .review-singleBox .column h1 { margin-bottom: 23px; font-size: 18px; } .review-singleBox .column p { margin-bottom: 38px; line-height: 1.8; } .review-singleBox .column p:last-of-type { margin-bottom: 31px; padding-bottom: 21px; border-bottom: 1px rgba(112, 112, 112, 0.36) solid; } .review-singleBox .item { display: flex; align-items: center; } .review-singleBox .item ul { padding-top: 4px; padding-left: 11px; display: flex; } .review-singleBox .item ul > li { position: relative; font-size: 14px; } .review-singleBox .item ul > li:after { margin: 0 14px; display: inline-block; width: 1px; height: 14px; vertical-align: middle; background-color: var(--black); content: ''; } .review-singleBox .item ul > li:last-of-type:after { display: none; } .review-singleBox .item ul > li > a { font-size: 14px; } .review-singleBox .item ul > li > a span { padding-left: 4px; } .review-singleBox .bg-image { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); pointer-events: none; } .review-singleBox .bg-image:before { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); background-color: rgba(88, 125, 143, 0.05); content: ''; } .review-singleBox .bg-image img { opacity: 0.05; width: var(--width); height: var(--height); object-fit: cover; } .review-singleBox .btn { display: flex; justify-content: center; } /* ### review box ### */ .reviewBox { margin-bottom: 15px; padding-top: 33px; padding-bottom: 85px; position: relative; width: var(--width); } .reviewBox .holder { position: relative; z-index: 1; } .reviewBox .bg-image { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); pointer-events: none; } .reviewBox .bg-image:before { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); background-color: rgba(88, 125, 143, 0.05); content: ''; } .reviewBox .bg-image img { opacity: 0.05; width: var(--width); height: var(--height); object-fit: cover; } .reviewBox .btn { display: flex; justify-content: center; } /* ### reviews Box ### */ .reviewsBox { padding-top: 58px; padding-bottom: 56px; position: relative; } .reviewsBox .holder { position: relative; z-index: 1; } .reviewsBox h2 { margin-bottom: 14px; color: var(--white); } .reviewsBox:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--blue); content: ''; } .reviewsBox .button-wrap { text-align: center; } .reviewsBox .button-wrap .button { color: var(--white); border: 2px solid var(--white); } .reviewsBox .button-wrap .button:hover { color: var(--blue); background-color: var(--white); } .reviewsBox .bg-image { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); } .reviewsBox .bg-image img { opacity: 0.1; width: var(--width); height: var(--height); object-fit: cover; object-position: center center; } .reviewsBox .column { padding: 0 8px; opacity: 0.3; width: 820px; } .reviewsBox .wrap { margin-bottom: 11px; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .reviewsBox .swiper { overflow: unset; margin: 0 -360px; } .reviewsBox .swiper-button-next { top: auto; margin-top: 0; width: 50px; height: 50px; color: var(--white); border: 2px solid var(--white); border-radius: 50%; right: 34%; transform: rotate(180deg); } .reviewsBox .swiper-button-prev { top: auto; margin-top: 0; width: 50px; height: 50px; font-size: 12px; color: var(--white); border: 2px solid var(--white); border-radius: 50%; left: 34%; } .reviewsBox .card-review { margin-bottom: 25px; } .reviewsBox .swiper-button-next:after, .reviewsBox .swiper-button-prev:after{ font-family: var(--font-family-icon); font-size: 12px; content: '\e901'; } .reviewsBox .swiper-slide { opacity: 0.3; } .reviewsBox .swiper-slide h3{font-size: 18px;margin-bottom: 23px;} .reviewsBox .swiper-slide-active { opacity: 1; } .reviewBox .wrap{ text-align: center; } .reviewBox .wrap .laad_meer_reviews_btn{ display: inline-block; } .review_slide{ cursor: pointer; } .reviewsBox .card-review p a{ text-decoration: underline; } .reviewsBox .card-review p a:hover{ text-decoration: none; } /* ### card-review ### */ .card-review { margin: 0 auto 38px; padding: 35px 42px; position: relative; z-index: 1; max-width: 1094px; border-radius: 10px; background-color: var(--white); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } .card-review h1 { margin-bottom: 23px; font-size: 18px; } .card-review p { margin-bottom: 31px; padding-bottom: 21px; line-height: 1.8; border-bottom: 1px rgba(112, 112, 112, 0.36) solid; } .card-review .item { display: flex; align-items: center; } .card-review .item ul { padding-top: 4px; padding-left: 11px; display: flex; } .card-review .item ul > li { position: relative; font-size: 14px; } .card-review .item ul > li:after { margin: 0 14px; display: inline-block; width: 1px; height: 14px; vertical-align: middle; background-color: var(--black); content: ''; } .card-review .item ul > li:last-of-type:after { display: none; } .card-review .item ul > li > a { font-size: 14px; } .card-review .item ul > li > a span { padding-left: 4px; } .card-review .btn { display: flex; justify-content: center; } /* ### card filter ### */ .card-filter { margin: 0 auto 32px; padding: 8px; position: relative; z-index: 1; width: var(--width); max-width: 760px; } .card-filter .column { margin: 0 -8px; display: flex; flex-wrap: wrap; justify-content: space-between; } .card-filter.inner .column { margin: 0 -8px; display: flex; flex-wrap: wrap; justify-content: center; } .card-filter .form-group { width: 32%; } .card-filter.inner .form-group { margin-right: 10px; width: 32%; } .card-filter .form-select { padding: 10px; font-size: 16px; color: var(--font-black); border: 0; background-color: var(--white); } .card-filter .button { width: var(--width); height: 50px; font-family: var(--font-family-base); } /* ### accommodations box ### */ .accommodationsBox { padding-top: 33px; padding-bottom: 85px; position: relative; width: var(--width); } .accommodationsBox .block { margin-bottom: 38px; position: relative; z-index: 1; display: flex; flex-wrap: wrap; flex-direction: column; width: var(--width); border-radius: 10px; overflow: hidden; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); text-decoration: none; width: 49%; } .accommodationsBox .block:hover .button { background-color: #ab9013; border: 2px solid #ab9013; } .accommodationsBox .block:hover .image img { transform: scale(1.05); } .accommodationsBox .block .image { position: relative; overflow: hidden; } .accommodationsBox .block .image img { object-fit: cover; transition: var(--transition); width: 100%; height: 240px; } .accommodationsBox .block .image .tag { position: absolute; bottom: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: center; width: var(--width); } .accommodationsBox .block .image .tag span { margin-left: 1px; padding: 4px 0; width: var(--width); font-size: 14px; text-align: center; color: var(--font-green); border-radius: 10px 10px 0 0; background-color: var(--white); display: block; width: auto; padding-left: 10px; padding-right: 10px; } .accommodationsBox .block .info { padding: 34px 40px 34px 39px; border-radius: 0 10px 10px 0; background-color: var(--white); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;height: calc(100% - 240px);} .accommodationsBox .block .info h4 { margin-bottom: 23px; } .accommodationsBox .block .info p { margin-bottom: 32px; color: var(--font-green); flex: auto; } .accommodationsBox .bg-image { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); pointer-events: none; } .accommodationsBox .bg-image:before { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); background-color: rgba(88, 125, 143, 0.05); content: ''; } .accommodationsBox .bg-image img { opacity: 0.05; width: var(--width); height: var(--height); object-fit: cover; } .accommodationsBox .wrap { display: flex; justify-content: center; } #accommodatie_holder{ display: flex; justify-content: space-between; flex-wrap: wrap; } .favo_hartje{ color: rgba(255,255,255,0.8); cursor: pointer; font-size: 34px; position: absolute; right:0px; top:0px; padding: 10px; z-index: 1000; display: flex; justify-content: center; align-items: center; } .favo_hartje.is_favo{ color: rgba(182,40,40,0.8); } /* ### blog box ### */ .blogBox { padding-top: 60px; padding-bottom: 50px; position: relative; } .blogBox .holder { margin-bottom: 32px; position: relative; z-index: 1; display: grid; grid-template-columns: 33% 33% 33%; column-gap: 16px; row-gap: 38px; } .blogBox .wrap { display: flex; justify-content: center; } .blogBox .bg-image { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); pointer-events: none; } .blogBox .bg-image:before { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); background-color: rgba(88, 125, 143, 0.05); content: ''; } .blogBox .bg-image img { opacity: 0.05; width: var(--width); height: var(--height); object-fit: cover; } /* ### cta box ### */ .ctaBox { position: relative; width: var(--width); background-color: var(--green); } .ctaBox .image { position: absolute; top: 0; left: 0; } .ctaBox .image img { opacity: 0.4; } .ctaBox .image.right { right: 0; left: unset; } .ctaBox .content { margin: 0 auto; padding-top: 58px; padding-bottom: 58px; max-width: 871px; text-align: center; } .ctaBox .content h2 { margin-bottom: 28px; color: var(--white); } .ctaBox .content p { margin-bottom: 32px; color: var(--white); } .ctaBox .btn a { margin-right: 15px; padding: 10px 57px; } /* ### social profile box ### */ .social-profileBox { margin-bottom: 33px; padding-top: 13px; width: var(--width); } .social-profileBox .block { margin-bottom: 30px; padding-bottom: 10px; display: flex; justify-content: center; border-bottom: 1px solid rgba(112, 112, 112, 0.3); } .social-profileBox .block ul { margin-left: 12px; display: flex; } .social-profileBox .block ul li { font-weight:bold;} .social-profileBox .block ul > li:after { margin: 0 16px; display: inline-block; width: 1px; height: 16px; vertical-align: middle; background-color: var(--green); content: ''; } .social-profileBox .block ul > li:last-of-type:after { display: none; } .social-profileBox .block ul > li > a { color: var(--green); } .social-profileBox .contact { margin: 0 -8px; display: flex; flex-wrap: wrap; align-items: center; } .social-profileBox .contact .form-group { padding: 0 8px; width: 25%; } .social-profileBox .contact .form-group button { padding: 10px; width: var(--width); height: 50px; } .social-profileBox .contact .form-group label.checkbox { padding-left: 25px; position: relative; display: block; } .social-profileBox .contact .form-group label.checkbox span { font-size: 14px; font-weight: var(--font-weight-400); } .social-profileBox .contact .form-group .check { position: absolute; top: 3px; left: 0; border-radius: 5px; } /* ### social profile box ### */ .tab-blockBox { padding-bottom: 40px; position: relative; } .tab-blockBox .right { width: 23.5%; } .tab-blockBox.inner .right { width: var(--width); position: sticky; top: 185px; } .tab-blockBox .left { width: 76.5%; } .tab-blockBox.inner .left { width: var(--width); } .tab-blockBox .holder { display: flex; flex-wrap: wrap; position: relative; } .tab-blockBox.inner .tab-content-right { position: absolute; right: 0; width: 23.5%; top: 90px; } .tab-blockBox .bg-image { position: absolute; top: 0; left: 0; z-index: -1; width: var(--width); height: var(--height); pointer-events: none; } .tab-blockBox .btn { margin-bottom: 34px; padding-left: 3px; display: flex; justify-content: center; } .tab-blockBox .bg-image { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); pointer-events: none; } .tab-blockBox .bg-image { position: absolute; top: 0; left: 0; z-index: -1; width: var(--width); height: var(--height); pointer-events: none; } .tab-blockBox .bg-image:before { position: absolute; top: 0; left: 0; width: var(--width); height: var(--height); background-color: rgba(88, 125, 143, 0.05); content: ''; } .tab-blockBox .bg-image img { opacity: 0.05; width: var(--width); height: var(--height); object-fit: cover; } .tab-blockBox .right .card-right.inner { position: sticky; top: 182px; transition: top 0.3s; } .tab-blockBox .right .card-right.inner.scrolled{ top: 220px; } /* ### text Box ### */ .textBox { margin-bottom: 40px; width: var(--width); } .textBox p { margin-bottom: 42px; } .textBox .text-bg { position: relative; z-index: 1; width: var(--width); } .textBox .text-bg img { border-radius: 10px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } /* ### image Box ### */ .imageBox { margin-top: 40px; margin-bottom: 40px; width: var(--width); } .imageBox .wrap { margin: 0 -10px 40px; display: flex; } .imageBox .wrap .image-block { padding: 0 10px; width: 33.8%; } .imageBox .wrap .image-block img { width: var(--width); height: var(--height); border-radius: 10px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); object-fit: cover; } .imageBox .wrap .info { padding: 24px 20px; width: 66.2%; } .imageBox .wrap .info h4 { margin-bottom: 22px; padding-top: 6px; } .imageBox .wrap .info p { margin-bottom: 30px; } .imageBox.tab-panel{ margin-top: 0px; margin-bottom: 80px;} /* ### block-title Box ### */ .block-titleBox { margin-bottom: 40px; width: var(--width); } .block-titleBox .image-block { margin-bottom: 40px; display: grid; grid-template-columns: 32.33% 32.33% 32.33%; column-gap: 1%; row-gap: 15px; } .block-titleBox .image-block.block2 { margin-bottom: 40px; display: grid; grid-template-columns: 24% 24% 24% 24%; column-gap: 1%; row-gap: 15px; } .block-titleBox .image-block.block3 { margin-bottom: 40px; display: grid; grid-template-columns: 49% 49%; column-gap: 1%; row-gap: 15px; } .image-block .image { width: var(--width); overflow: hidden; border-radius: 10px; } .image-block .image img { width: var(--width); height: 220px; transition: var(--transition); object-fit: cover; } .image-block .image:hover img { border-radius: 10px 10px 0 0; transform: scale(1.05); } .block-titleBox .image-block a { text-decoration: var(--text-decoration); width: 100%; position: relative;} .image-block .title { padding: 16px 17px 11px; width: var(--width); font-family: var(--font-family-heading); font-size: 14px; text-align: center; color: var(--white); border-radius: 0 0 10px 10px; background-color: var(--blue); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); position: absolute; bottom: 0; left:0; width: 100%; } /* ### holiday-homes Box ### */ .holiday-homesBox { margin-bottom: 40px; width: var(--width); } .holiday-homesBox .column { margin-bottom: 40px; padding: 30px; position: relative; z-index: 1; display: flex; justify-content: space-between; border-radius: 10px; background-color: var(--white); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } .holiday-homesBox .column .column-image { width: 34.5%; } .holiday-homesBox .column .column-image img { width: var(--width); height: var(--height); border-radius: 10px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); object-fit: cover; } .holiday-homesBox .column .column-text { padding-top: 29px; padding-left: 7px; width: 63%; } .holiday-homesBox .column .column-text h4 { margin-bottom: 23px; } .holiday-homesBox .column .column-text p { margin-bottom: 28px; } .holiday-homesBox .block { margin-bottom: 36px; position: relative; z-index: 1; display: flex; flex-wrap: wrap; width: var(--width); border-radius: 10px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); text-decoration: none; } .holiday-homesBox .block:hover .image img { transform: scale(1.05); } .holiday-homesBox .block:hover .button { background-color: #ab9013; border: 2px solid #ab9013; } .holiday-homesBox .block .image { position: relative; width: 32.5%; overflow: hidden; border-radius: 10px 0 0 10px; } .holiday-homesBox .block .image img { height: var(--height); border-radius: 10px 0 0 10px; object-fit: cover; transition: var(--transition); } .holiday-homesBox .block .image .tag { position: absolute; bottom: 0; left: 0; display: flex; justify-content: center; width: var(--width); } .holiday-homesBox .block .image .tag span { margin-left: 6px; padding-top: 4px; padding-bottom:1px; width: var(--width); font-size: 12px; font-weight:600; text-align: center; color: var(--font-green); border-radius: 10px 10px 0 0; background-color: var(--white); width: auto; padding-left: 12px; padding-right: 12px; } .holiday-homesBox .block .info { padding: 25px 30px 29px; width: 67.5%; border-radius: 0 10px 10px 0; background-color: var(--white); } .holiday-homesBox .block .info h4 { margin-bottom: 23px; } .holiday-homesBox .block .info p { margin-bottom: 32px; } .holiday-homesBox .block .info ul { padding-top: 14px; padding-bottom: 7px; border-top: 1px solid rgba(112, 112, 112, 0.3); } .holiday-homesBox .block .info ul > li { margin-bottom: 5px; padding-left: 30px; position: relative; display: flex; flex-wrap: wrap; align-items: center; color: var(--font-green); } .holiday-homesBox .block .info ul > li:before { position: absolute; top: 3px; left: 0; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-family: var(--font-family-icon); font-size: 8px; color: var(--blue); border: 1px solid var(--blue); border-radius: 50%; content: '\e903'; } .holiday-homesBox .block .price-box { display: flex; justify-content: space-between; } .holiday-homesBox .block .price { padding-top: 8px; padding-bottom: 11px; font-family: var(--font-family-heading); font-size: 20px; text-align: center; color: var(--font-green); } .holiday-homesBox .block .price em { font-family: var(--font-family-base); font-size: 12px; font-style: normal; } .tabs { display: flex; flex-wrap: wrap; margin: 0 auto 60px; } .radiotab { position: absolute; opacity: 0; width: auto; } .label { position: relative; z-index: 2; cursor: pointer; font-family: var(--font-family-heading); font-size: 18px; transition: var(--transition); border-radius: 0; border-top: 1px solid rgba(112, 112, 112, 0.3); border-bottom: 1px solid rgba(112, 112, 112, 0.3); text-align: center; padding: 10px 0; } .tab-blockBox.inner .panel { width: 76.5%; padding-right: 18px; min-height: 510px;} .radiotab + .label > strong { position: relative; transition: var(--transition); font-size: 18px; } .radiotab:checked + .label > strong:hover:before, .radiotab:checked + .label > strong.active:before { width: var(--width); } .radiotab:checked + .label > strong:after { position: absolute; bottom: -14px; left: 0; width: 0; height: 4px; background-color: var(--blue); transition: all 0.25s; content: ''; } .panel { display: none; padding-top: 40px; width: 100%; } .radiotab:checked + .label + .panel { display: block; } .radiotab:checked + .label:hover strong, .radiotab:checked + .label strong { color: var(--blue); } .radiotab:checked + .label strong:after { background-color: var(--blue); width: 100%; } #sticky_bar { display: none; flex-wrap: wrap; margin: 0 auto 60px; justify-content: space-between; border-top: 1px solid rgba(112, 112, 112, 0.3); border-bottom: 1px solid rgba(112, 112, 112, 0.3); position: fixed; width: 100%; top:118px; left: 0; z-index: 100; background-color: rgba(255,255,255,1); } .sticky_tab { position: relative; z-index: 2; cursor: pointer; font-family: var(--font-family-heading); font-size: 18px; transition: var(--transition); border-radius: 0; text-align: center; padding: 10px 0;width: 16.66%;flex-grow: 1; } #sticky_bar.scrolled{ display: flex; } .sticky_tab{ display: flex; justify-content: center; } .sticky_tab .sticky_tab_label{ position: relative; } .sticky_tab.actief .sticky_tab_label{color: var(--blue); font-weight: 700;} .sticky_tab.actief .sticky_tab_label:after { position: absolute; bottom: -11px; left: 0; width: 0; height: 4px; background-color: var(--blue); transition: all 0.25s; content: ''; width: 100%; } /* ### card right ## */ .card-right { margin-bottom: 30px; width: var(--width); } .card-right .card-image { position: relative; width: var(--width); } .card-right .card-image img { width: var(--width); height: var(--height); object-fit: cover; border-radius: 10px 10px 0 0; } .card-right .card-content { padding: 14px 30px 22px; position: relative; z-index: 1; border-radius: 0 0 10px 10px; background-color: var(--white); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } .card-right .card-content.inner { padding: 14px 20px 10px 22px; margin-top: -400px; border-radius: 10px; } .card-right.inner .card-content ul { padding-top: 0; } .card-right .card-image .tag { position: absolute; bottom: 0; left: 0; display: flex; justify-content: center; width: var(--width); } .card-right .card-image .tag span { margin-left: 6px; padding: 4px 0; width: var(--width); font-size: 12px; font-weight:600; text-align: center; color: var(--font-green); border-radius: 10px 10px 0 0; background-color: var(--white); width: auto; padding-left: 12px; padding-right: 12px; } .card-right .card-content h4 { margin-bottom: 15px; } .card-right .card-content p { margin-bottom: 21px; } .card-right .card-content ul { padding-top: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(112, 112, 112, 0.3); } .card-right .card-content ul > li { font-size:14px; margin-bottom: 12px; padding-left: 30px; position: relative; display: flex; flex-wrap: wrap; align-items: center; color: var(--font-green); } .card-right .card-content ul > li:before { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-family: var(--font-family-icon); font-size: 10px; color: var(--blue); border: 2px solid var(--blue); border-radius: 50%; content: '\e903'; } .card-right .card-content .price { padding-top: 8px; padding-bottom: 15px; font-family: var(--font-family-heading); font-size: 20px; text-align: center; color: var(--font-green); } .card-right .card-content .price em { font-family: var(--font-family-base); font-size: 12px; font-style: normal; } .card-right .card-content .btn { margin-bottom: 0; display: block; } .card-right .card-content .btn a { margin-bottom: 10px; width: var(--width); } /* ### card-faq ### */ .card-faq { margin-bottom: 40px; width: var(--width); } .card-faq .accordion-item { margin-bottom: 10px; padding: 12px 40px 12px 20px; position: relative; border-radius: 10px; background-color: var(--white); cursor: pointer; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); } .card-faq .accordion-list { list-style: none; } .card-faq .accordion-item:before, .card-faq .accordion-item:after { position: absolute; top: 10px; right: 20px; font-family: var(--font-family-heading); content: '+'; } .card-faq .accordion-item.active:after { display: none; } .card-faq .accordion-item.active:before { content: '-'; } .card-faq .accordion-title { font-family: var(--font-family-heading); } .card-faq .accordion-content { padding-top: 10px; } .card-faq .accordion-content p { margin-bottom: 15px; } .card-faq .wrap .item { width: 50%; } .card-faq .wrap .item .image { overflow: hidden; } .card-faq .tipBox { margin-bottom: 15px; padding-top: 20px; padding-right:20px; padding-bottom:14px; padding-left: 20px; border-radius: 10px; background-color: rgba(109, 150, 88, 0.6); } .card-faq .tipBox p { margin-bottom: 5px; color: var(--white); } .card-faq .images { display: flex; justify-content: flex-start; width: calc(100% + 16px ); margin-left: -8px; } .card-faq .images .item{ padding: 8px; max-width: 33.33%;} .card-faq .images img { width: var(--width); height: var(--height); border-radius: 10px; } /* ### card exclusive ### */ .card-exclusive { margin-bottom: 30px; width: var(--width); } .card-exclusive .wrap { margin-bottom: 0; margin-left: 0; display: flex; flex-wrap: wrap; justify-content: space-between; width: var(--width); } .card-exclusive .text { width: 50%; } .card-exclusive .text .title { margin-bottom: 15px; font-family: var(--font-family-heading); font-size: 18px; font-weight: var(--font-weight-700); } .card-exclusive .text ul > li { margin-bottom: 5px; padding-left: 30px; position: relative; } .card-exclusive .text ul > li:before { position: absolute; top: 3px; left: 0; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-family: var(--font-family-icon); font-size: 8px; line-height: 1; color: var(--blue); border: 2px solid var(--blue); border-radius: 50%; content: '\e903'; } .card-exclusive .link { padding-left: 9px; width: 50%; } .card-exclusive .link .title { margin-bottom: 15px; font-family: var(--font-family-heading); font-size: 18px; font-weight: var(--font-weight-700); } .card-exclusive .link ul > li { margin-bottom: 5px; padding-left: 30px; position: relative; font-size: var(--font-base); color: var(--font-black); } .card-exclusive .link ul > li:before { position: absolute; top: 3px; left: 0; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-family: var(--font-family-icon); font-size: 8px; line-height: 1; color: var(--font-black); border: 2px solid var(--font-black); border-radius: 50%; content: '\e904'; } /* ### fixed Box ### */ .fixedBox { padding-top: 5px; padding-bottom: 5px; position: fixed; bottom: 0; left: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: var(--width); border-top: 1px solid rgba(112, 112, 122, 0.1); border-bottom: 1px solid rgba(112, 112, 122, 0.1); background-color: var(--white); } .fixedBox h4 { margin-bottom: 0; } .fixedBox span { margin-right: 15px; font-family: var(--font-family-heading); } .fixedBox .button { min-width: 300px; } /* ### footer container ### */ #footerCntr { overflow: hidden; width: var(--width); } /* ### footer box ### */ .footerBox { padding-top: 70px; padding-bottom: 40px; position: relative; background-color: var(--font-black); } .footerBox .partner-logo { margin-bottom: 5px; display: flex; flex-wrap: wrap; align-items: center; } .footerBox .partner-logo > li { margin-right: 7px; } .footerBox .partner-logo > li:last-child { margin-right: 0; } .footerBox .partner-logo > li:after { display: none; } .footerBox .holder { position: relative; z-index: 1; display: flex; flex-wrap: wrap; } .footerBox .column { padding-right: 15px; width: 16.66%; } .footerBox .title { margin-bottom: 10px; position: relative; font-family: var(--font-family-heading); font-size: 18px; color: var(--white); } .footerBox .title:after { position: absolute; top: 50%; right: 0; display: none; font-family: var(--font-family-icon); font-size: 6px; transform: translateY(-50%); transition: var(--transition); content: '\e900'; } .footerBox .title.active:after { transform: translateY(-50%) rotate(-180deg); } .footerBox .item { margin-bottom: 25px; } .footerBox .item.large { margin-bottom: 40px; } .footerBox .item ul > li { margin-bottom: 11px; line-height: 1.3; color: var(--white); } .footerBox .item ul > li:last-child { margin-bottom: 0; } .footerBox .item ul > li > a { font-size: var(--font-base); font-weight: var(--font-weight-500); color: var(--white); transition: var(--transition); } .footerBox address { margin-top: 40px; margin-bottom: 40px; font-style: normal; line-height: 2; color: var(--white); } .footerBox ul > li.d-block { display: none; } .footerBox .item ul > li > a:hover { text-decoration: var(--text-decoration); } .footerBox .column_dubbel{ width: 33.33%;} .footerBox .column_dubbel ul{ column-count:2; } /* ### copyright box ### */ .copyrightBox { padding-top: 2px; padding-bottom: 2px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; background-color: var(--white); } .copyrightBox ul.left { display: flex; flex-wrap: wrap; align-items: center; } .copyrightBox ul.left > li { font-size: var(--font-base); color: var(--font-black); } .copyrightBox ul.left > li:after { margin: -3px 15px 0; display: inline-block; width: 2px; height: 14px; vertical-align: middle; background-color: var(--font-black); content: ''; } .copyrightBox ul.left > li:last-child:after { display: none; } .copyrightBox ul.left > li > a { color: var(--font-black); transition: var(--transition); } .copyrightBox ul.left > li > a:hover { text-decoration: var(--text-decoration); } .copyrightBox .social-media { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; } .copyrightBox .social-media > li { margin-right: 15px; } .copyrightBox .social-media > li:last-child { margin-right: 0; } /* ### LINKTREE ### */ #linktree_wrapper{ position: relative; background-position: center center; background-size: cover; background-repeat: no-repeat; min-height: 100vh!important; width: 100vw!important; overflow-y: hidden; overflow-x: auto; } #linktree_wrapper:before{ position: absolute; width: 100%; height: 100%; top:0; left:0; content: ''; background-color: rgba(0,0,0,0.3); z-index: 0 } #linktree_header_top{ width: 100%; background-color: var(--yellow); position: relative; z-index: 10; } #linktree_header_top ul{ display: flex; justify-content: center; } #linktree_header_top ul li:first-child{ border-right: 1px solid #68811e; } #linktree_header_top ul li a{ color: var(--white); text-decoration: none; padding-left: 60px; padding-right: 60px; display: block; min-height: 40px; display: flex; justify-content: center; align-items: center;} #linktree_header_bottom{ background-color: var(--blue); display: flex; justify-content: center; align-items: center; padding-top: 10px; padding-bottom: 10px; position: relative; z-index: 10; } #linktree_intro{ width: 100%; max-width: 520px; margin: 40px auto; text-align: center; color:var(--white); text-shadow: 0 0 3px rgba(0,0,0,0.35); padding-left: 20px; padding-right: 20px; position: relative; z-index: 10; } #linktree_knoppen{ width: 100%; max-width: 420px; margin: 0px auto; padding-left: 20px; padding-right: 20px; position: relative; z-index: 10; } #linktree_knoppen ul{ display: flex; flex-direction: column; justify-content: center; align-items: center; } #linktree_knoppen ul li { min-width: 100%; } #linktree_knoppen ul li a{ transition: all 0.3s; min-width: 100%; text-decoration: none; padding: 12px; display: flex; justify-content: center; align-items: center; color: #272d37; background-color: #f2f4ea; cursor: pointer; margin-bottom: 10px; } #linktree_knoppen ul li a:hover{ background-color: #cccccc; } /* ### LINKTREE ### */ .iframe_box{ height: auto; min-height: 500px; overflow: hidden; } .iframe_box iframe{ height: auto; min-height: 500px; overflow: hidden; } .footer_pusher{ height: 65px; } .single_right{ padding-left: 14px; } .swiper-wrapper{ display: flex; align-items: center; } .accommodatieBox{ padding-top: 40px; padding-bottom: 40px; } .accommodatieBox h1{ font-size: 36px; color: #212121; max-width: 680px; margin: 0 auto 34px auto; line-height: 40px;text-align: center; } .accommodatieBox .accommodatie_breadcrumb{ text-align: center; border-top:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0; padding: 4px; margin-bottom: 24px; } .accommodatieBox .accommodatie_breadcrumb p{ margin-bottom: 0px; color: #212121;} .accommodatieBox .accommodatie_breadcrumb a{ color: #212121;} .accommodatieBox .accommodatie_header{ display: flex; justify-content: space-between; } .accommodatieBox .accommodatie_header .accommodatie_specificaties{ width: 100px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .accommodatieBox .accommodatie_header .accommodatie_specificaties ul{ height: 100%; } .accommodatieBox .accommodatie_header .accommodatie_specificaties li{ width: 100px; height: 25%; padding: 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 14px; line-height: 16px; } .accommodatieBox .accommodatie_header .accommodatie_specificaties img{ width: 32px; height: 32px; object-fit:cover; margin-bottom: 8px;} .accommodatieBox .accommodatie_header .accommodatie_slideshow{ width: calc(50% - 66px); position: relative; } .accommodatieBox .accommodatie_header .meer_fotos_tag{ color: #353633; background-color: #ffffff; padding: 5px; padding-left: 34px; background-image: url('images/icon_img.jpg'); background-position: 5px center; background-repeat: no-repeat; background-size: 26px 26px; border-radius: 5px; position: absolute; left:10px; bottom:10px; z-index: 10; font-size: 16px; line-height: 30px; } .accommodatieBox .accommodatie_header .accommodatie_slide{ display: none; height: 520px; } .accommodatieBox .accommodatie_header .accommodatie_slide:first-child{ display: block; } .accommodatieBox .accommodatie_header .accommodatie_slide a{ display: block; } .accommodatieBox .accommodatie_header .accommodatie_slide img{ width: 100%; height: 520px; object-fit:cover; border-radius: 5px; } .accommodatieBox .accommodatie_header .accommodatie_mozaiek{ width: calc(50% - 66px); height: 520px; display: flex; flex-direction: column; justify-content: space-between; } .accommodatieBox .accommodatie_header .accommodatie_mozaiek_top{ width: 100%; height: 339px; } .accommodatieBox .accommodatie_header .accommodatie_mozaiek_top img{ width: 100%; height: 339px; object-fit:cover; border-radius: 5px; } .accommodatieBox .accommodatie_header .accommodatie_mozaiek_bottom{ width: 100%; height: 165px; display: flex; justify-content: space-between; } .accommodatieBox .accommodatie_header .accommodatie_mozaiek_bottom_left { width: calc(50% - 8px); height: 165px; } .accommodatieBox .accommodatie_header .accommodatie_mozaiek_bottom_left a{ display: block; } .accommodatieBox .accommodatie_header .accommodatie_mozaiek_bottom_left img{ width: 100%; height: 165px; object-fit:cover; border-radius: 5px; } .accommodatieBox .accommodatie_header .accommodatie_mozaiek_bottom_right { width: calc(50% - 8px); height: 165px; } .accommodatieBox .accommodatie_header .accommodatie_mozaiek_bottom_right a{ display: block; } .accommodatieBox .accommodatie_header .accommodatie_mozaiek_bottom_right img{ width: 100%; height: 165px; object-fit:cover; border-radius: 5px; } .accommodatieBox .accommodatie_body{ padding-top: 60px; padding-bottom: 60px; display: flex; justify-content: space-between; } .accommodatieBox .accommodatie_body .accommodatie_body_content{ width: calc(100% - 373px); } .accommodatieBox .accommodatie_body .accommodatie_body_content iframe{ width: 100%; } .accommodatieBox .accommodatie_body .accommodatie_body_content img{ width: 100%; } .accommodatieBox .accommodatie_body .accommodatie_body_content p{ margin-bottom: 40px; } .accommodatieBox .accommodatie_body .accommodatie_body_sidebar{ width: 317px; } .accommodatieBox .accommodatie_body .accommodatie_body_sidebar .accommodatie_body_sb_block_top{ display: flex; flex-direction: column; margin-bottom: 20px; padding: 20px; box-shadow: 0px 3px 6px rgba(0,0,0,0.26); border-radius: 10px; } .accommodatieBox .accommodatie_body .accommodatie_body_sidebar .accommodatie_body_sb_prijs{ text-align: center; font-size: 12px;} .accommodatieBox .accommodatie_body .accommodatie_body_sidebar .accommodatie_body_sb_prijs strong{ font-size: 20px; font-weight: 900; font-family: var(--font-family-heading); } .accommodatieBox .accommodatie_body .accommodatie_body_sidebar .accommodatie_body_sb_block_top a{ width: 100%; margin-bottom: 10px; } .accommodatieBox .accommodatie_body .accommodatie_body_sidebar .accommodatie_body_sb_block{ position: sticky; top: 160px; } .accommodatieBox .accommodatie_body .accommodatie_body_sidebar .accommodatie_body_sb_block_bottom{ background-color: #ecf0ea; border-radius: 5px; padding: 16px; } .accommodatieBox .accommodatie_body .accommodatie_body_sidebar .extras_titel{ text-align: center; color: #212121; font-size: 18px; font-weight: 900; font-family: var(--font-family-heading); } .accommodatieBox .accommodatie_body .accommodatie_body_sidebar .extras_content{ display: flex; justify-content: space-between; flex-wrap: wrap; } .accommodatieBox .accommodatie_body .accommodatie_body_sidebar .extras_item{ width: 33.33%; padding: 4px; text-align: center; font-size: 14px; } .accommodatieBox .accommodatie_body .accommodatie_body_sidebar .extras_item img{ width: 32px; height: 32px; object-fit:cover; display: inline-block; } .accommodatieBox .accommodatie_body .margin_bottom{ margin-bottom: 40px; } /* #Media Queries ================================================== */ @media only screen and (max-width: 1550px) { .reviewsBox .swiper { overflow: unset; margin: 0 -700px; } } @media only screen and (max-width: 1440px) { .centered { padding-right: 15px; padding-left: 15px; } .headerBox .logo-image { width: 10%; } .menuBox { width: 80%; } .menuBox ul { margin-right: 20px; margin-left: 20px; } .menuBox ul > li { margin-right: 22px; } .socialBox .heading { width: 20%; } .socialBox .links { width: 80%; } .text-imageBox .block { flex-wrap: unset; } .authorBox { width: var(--width); height: var(--height); } .authorBox .image { top: 0; } .authorBox .image img { height: var(--height); } .accommodationsBox .block .image img { width: var(--width);} .footerBox .column { width: 33.33%; } .eBookBox .left { width: 65%; } .eBookBox .right { width: 35%; } .tab-blockBox .imageBox .wrap { flex-wrap: wrap; justify-content: space-between; } .card-right .card-content { padding: 14px 23px 22px; } } @media only screen and (max-width: 1329px) { .tab-blockBox.inner .label strong{ font-size: 16px; } } @media only screen and (min-width: 1200px) { .footerBox .hidden-menu { display: block !important; height: auto !important; } .label { } .tab-blockBox.inner .label { flex-grow: 1; font-size: 14px;} .panel { order: 99; } } @media only screen and (max-width: 1199px) { .button { padding: 10px 16px; } .menuBox { width: 88%; } .uspBox .holder .column { margin-bottom: 25px; width: 50%; } .text-imageBox .holder { display: flex; } .text-imageBox .content { padding-top: 0; width: 50%; } .text-imageBox .content p { margin-bottom: 25px; } .text-imageBox .content p:last-of-type { margin-bottom: 25px; } .text-imageBox .content p br { display: none; } .teamBox .holder { grid-template-columns: auto auto auto; } .socialBox .wrap { display: block; } .socialBox .heading { margin-bottom: 15px; width: var(--width); } .socialBox .links { width: var(--width); } .socialBox .links ul { margin: 0 -10px; justify-content: unset; } .socialBox .links ul > li { margin-bottom: 10px; padding: 0 15px; } .socialBox.inner .wrap { display: block; } .socialBox.inner .heading { margin-bottom: 15px; width: var(--width); } .socialBox.inner .links { width: var(--width); } .card-news .image .tag { left: unset; } .card-news .image .tag ul { justify-content: center; } .card-news .image .tag ul > li { margin-right: 5px; max-width: 90px; } .card-news .content { padding: 20px; } .authorBox .image { display: flex; width: var(--width); } .authorBox .text { width: 70%; } .accommodationsBox .block .info { padding: 34px 40px 34px 39px; } .accommodationsBox .block .image img { width: var(--width); } .ctaBox .image { display: none; } .social-profileBox .contact .form-group { margin-bottom: 15px; padding: 0 8px; width: 50%; } .copyrightBox { padding-top: 8px; } .copyrightBox ul.left { margin-bottom: 10px; justify-content: center; width: var(--width); } .copyrightBox ul.social-media { justify-content: center; width: var(--width); } .tab-blockBox .holder { display: block; } .tab-blockBox .left { padding-right: 0; width: var(--width); } .tab-blockBox .right { width: var(--width); } .tab-blockBox .block-titleBox .image-block a { width: var(--width); } .imageBox .wrap { flex-wrap: wrap; justify-content: space-between; } .textBox .text-bg img { width: var(--width); height: var(--height); object-fit: cover; } .tab-blockBox .block .image img { width: var(--width); } .list-box ul { padding: 13px 0 8px; flex-wrap: wrap; justify-content: unset; border-top: 0; } .list-box ul > li { margin-bottom: 15px; padding: 0; width: var(--width); } .tab-blockBox .right .card-right { position: unset; } .card-right .card-content .btn { display: flex; } .card-right .card-content .btn a { margin-right: 15px; } .card-right .card-content.inner { margin-top: 0; } .card-exclusive { margin-bottom: 80px; } .tab-blockBox .tab-content-left { width: var(--width); padding-right: 0; } .tab-blockBox .tab-content-right { width: var(--width); } .tab-blockBox.inner .panel { width: var(--width); min-height: 0px; } .tab-blockBox.inner .tab-content-right { position: unset; width: var(--width); } .bannerBox.inner .intro { max-width: 100%; text-align: left; margin: 0; } .tab-blockBox.inner .panel{ padding-right: 0px; } .tabs .label{ text-align: left; position: relative; width: 100%;} .tabs .label:before{ position: absolute; top: 10px; right: 20px; font-family: var(--font-family-heading); content: '+'; width: 14px; text-align: center;} .tabs .label.active:before { content: '-'; } .single_right{ display: none } #sticky_bar { display: none!important;} } @media only screen and (max-width: 1024px) { .headerBox .logo-image { width: 50%; } .headerBox .logo img { max-width: 80px; } .menuBox:not(.mm-menu) { display: none; } .mobile-menu { display: flex; } #wrapper { padding-top: 100px; } .eBookBox .left { padding: 35px 20px; order: 2; width: var(--width); } .eBookBox .right { order: 1; width: var(--width); } .eBookBox .form-field { margin-bottom: 15px; } .tab-blockBox .tab-list { top: 100px; } .tab-blockBox.inner .right { position: unset; } .heroBox { min-height: unset; } .mobile_menu_item{ display: list-item; } } @media only screen and (max-width: 991px) { h1 { font-size: 30px; } .fixedBox .title { margin-bottom: 5px; text-align: center; } .fixedBox span { margin-bottom: 5px; display: block; } .fixedBox div { width: var(--width); text-align: center; } .fixedBox .button { width: var(--width); } .fixedBox h4 { text-align: center; } .breadcrumbBox ul > li:before { margin: 0 8px; } .holidayBox { padding-top: 40px; padding-bottom: 40px; } .holidayBox .holder { grid-template-columns: auto auto; } .destinationBox { padding-top: 40px; padding-bottom: 40px; } .destinationBox .holder { grid-template-columns: auto auto; } .card-destination .info { padding: 20px; } .newsBox { padding-top: 40px; padding-bottom: 40px; } .text-imageBox .holder { display: unset; grid-template-columns: auto; } .text-imageBox .content { margin-bottom: 30px; padding-top: 0; width: var(--width); } .text-imageBox .content p { margin-bottom: 30px; } .text-imageBox .content p br { display: none; } .full-textBox .content { padding: 0; } .card-review .item ul > li:after { margin: 0 8px; } .teamBox .holder { grid-template-columns: auto auto; } .card-team .info { padding: 20px; } .card-team .info a:nth-child(3) { margin-bottom: 4px; } .seoBox { padding-top: 40px; padding-bottom: 30px; } .seoBox .holder { grid-template-columns: auto; } .seoBox .content p { margin-bottom: 20px; } .seoBox .content p:last-of-type { margin-bottom: 20px; } .seoBox .content { margin-bottom: 30px; } .socialBox .wrap { padding: 30px; display: block; } .socialBox .heading { margin-bottom: 15px; width: var(--width); } .socialBox .links { width: var(--width); } .socialBox .links ul { display: block; } .socialBox .links ul > li > a { width: var(--width); } .card-form { margin-bottom: 20px; padding: 30px 20px; width: var(--width); } .card-side { width: var(--width); } .card-side .content { padding: 20px; } .blog-contentBox .block { padding: 30px; } .blog-contentBox .image2 { grid-template-columns: auto auto; } .newsBox .holder { grid-template-columns: auto auto; } .authorBox { margin-bottom: 40px; padding: 30px 20px; } .authorBox .text { padding-top: 20px; padding-left: 0; width: var(--width); } .review-singleBox .column { padding: 20px; } .card-review { margin: 0 auto 25px; padding: 20px; } .accommodationsBox .block { display: block; } .accommodationsBox .block .image { width: var(--width); } .accommodationsBox .block .image img { width: var(--width); } .accommodationsBox .block .info { padding: 20px; width: var(--width); } .blogBox .holder { grid-template-columns: 50% 50%; } .destinationBox.inner .holder { grid-template-columns: 50% 50%; } .ctaBox .content { padding: 30px; } .social-profileBox .contact .form-group { margin-bottom: 15px; padding: 0 8px; width: 50%; } .footerBox .title:after { display: block; } .footerBox .hidden-menu { display: none; } .footerBox { padding-top: 40px; padding-bottom: 30px; } .footerBox .column { padding-right: 0; width: var(--width); } .footerBox .column.d-none { display: none; } .footerBox ul > li.d-block { display: block; } .footerBox .item { margin-bottom: 10px; padding: 10px 15px; border: 1px solid var(--white); } .footerBox .item.large { margin-bottom: 10px; } .footerBox .item ul { margin: 10px 0; } .footerBox .title { margin-bottom: 0; padding-right: 30px; } .imageBox .wrap { margin-bottom: 20px; display: block; } .imageBox .wrap .image-block { width: var(--width); } .imageBox .wrap.inner { display: flex; flex-direction: column-reverse; } .imageBox .wrap .image-block img { width: var(--width); } .imageBox .wrap .info { width: var(--width); } .imageBox .wrap .info p { margin-bottom: 10px; } .block-titleBox .image-block a { width: var(--width); } .block-titleBox .image-block.block2 { grid-template-columns: auto auto auto; } .tab-blockBox .column .column-text { padding-top: 15px; padding-bottom: 15px; } .holiday-homesBox .column { padding: 20px; display: block; } .tab-blockBox .column .column-image { width: var(--width); } .tab-blockBox .column .column-text { width: var(--width); } .holiday-homesBox .block { display: block; } .tab-blockBox .block .image { width: var(--width); } .tab-blockBox .block .image img { width: var(--width); border-radius: 10px 10px 0 0; } .tab-blockBox .block .info { padding: 20px; width: var(--width); border-radius: 10px; } .tab-blockBox .right { padding-bottom: 60px; width: var(--width); } .footer_pusher{ height: 120px; } } @media only screen and (max-width: 767px) { .reviewsBox .swiper { overflow: unset; margin: 0 -390px; } .fixedBox { justify-content: center; text-align: center; } .fixedBox h4 { display: none; } .fixedBox span { margin-right: 0; margin-bottom: 10px; display: block; width: var(--width); } .button.outline { padding: 10px 45px; } .heroBox { padding-bottom: 40px; } .heroBox .wrap { display: block; } .heroBox .wrap .column { margin-bottom: 15px; } .bannerBox.inner { padding-top: 70px; padding-bottom: 70px; } .uspBox .holder .column { width: var(--width); } .destinationBox .holder { grid-template-columns: auto; } .holidayBox .holder { grid-template-columns: auto; } .text-imageBox { padding-top: 30px; padding-bottom: 50px; } .full-textBox { padding-top: 38px; padding-bottom: 40px; } .full-textBox .content { padding: 0 15px; } .eBookBox .form-field { width: var(--width); } .teamBox { padding-top: 40px; padding-bottom: 40px; } .teamBox .holder { grid-template-columns: auto; } .intro-centerBox { margin-bottom: 50px; } .intro-centerBox .content h2 br { display: none; } .socialBox { margin-bottom: 50px; } .contactBox { margin-bottom: 50px; } .card-form .form-item { width: var(--width); } .card-form .btn-item { display: block; } .card-form .btn-item .form-check { margin-bottom: 10px; } .card-side .info { margin-bottom: 25px; } .card-side .support { margin-bottom: 35px; } .blog-contentBox { margin-bottom: 40px; padding-top: 40px; padding-bottom: 40px; } .blog-contentBox .block { padding: 20px; } .blog-contentBox .image-block .image.w-50, .blog-contentBox .image-block .image.w-33 { width: var(--width); } .newsBox h2 br { display: none; } .newsBox .holder { grid-template-columns: auto; } .card-news .content { padding: 20px; } .card-news .content.inner { padding: 20px; } .card-news .content h4 { margin-bottom: 15px; } .card-news .content p { margin-bottom: 10px; } .review-singleBox { margin-bottom: 40px; padding-top: 40px; padding-bottom: 40px; } .review-singleBox .column h1 { margin-bottom: 18px; } .review-singleBox .column p { margin-bottom: 18px; } .review-singleBox .item { display: block; } .review-singleBox .item .image { width: var(--white); } .review-singleBox .item ul { padding-left: 0; display: block; } .review-singleBox .item ul > li { font-size: 12px; } .review-singleBox .item ul > li > a { font-size: 12px; } .reviewBox { margin-bottom: 0; padding-bottom: 40px; } .reviewsBox .swiper-slide h3 {font-size: 16px;} .card-review h1 { margin-bottom: 18px; } .card-review h3 { margin-bottom: 18px; font-size: 16px;} .card-review p { margin-bottom: 18px; font-size:14px; } .card-review .item { display: block; } .card-review .item .image { width: var(--white); } .card-review .item ul { padding-left: 0; display: block; } .card-review .item ul > li { font-size: 12px; } .card-review .item ul > li > a { font-size: 12px; } .card-filter .column { display: block; } .card-filter.inner .column { display: block; } .card-filter .form-group { margin-bottom: 10px; width: var(--white); } .card-filter.inner .form-group { margin-right: 0; width: var(--white); } .accommodationsBox { margin-top: 40px; margin-bottom: 40px; padding-top: 33px; padding-bottom: 40px; } .blogBox { padding-top: 40px; } .blogBox .holder { grid-template-columns: 100%; row-gap: 20px; } .destinationBox.inner { padding-top: 40px; padding-bottom: 40px; } .destinationBox.inner .holder { grid-template-columns: 100%; } .ctaBox .content { padding: 40px 20px; } .ctaBox .content h2 br { display: none; } .ctaBox .btn a { margin-right: 0; margin-bottom: 15px; padding: 10px 40px; width: var(--width); } .social-profileBox .block { padding-bottom: 20px; } .social-profileBox .block p { margin-bottom: 0; font-size: 14px; } .social-profileBox .block ul > li:after { margin: 0 14px; } .social-profileBox .block ul > li{ font-size: 14px; } .social-profileBox .block ul > li > a { font-size: 14px; } .social-profileBox .contact .form-group { margin-bottom: 15px; padding: 0 8px; width: var(--width); } .imageBox .wrap { display: block; } .imageBox .wrap .image-block { width: var(--width); } .imageBox .wrap.inner { display: flex; flex-direction: column-reverse; } .imageBox .wrap .image-block img { width: var(--width); } .imageBox .wrap .info { width: var(--width); } .block-titleBox .image-block { grid-template-columns: auto; } .block-titleBox .image-block.block2 { grid-template-columns: auto; } .block-titleBox .image-block.block3 { grid-template-columns: auto; } .holiday-homesBox .column { padding: 20px; display: block; } .tab-blockBox .column .column-image { width: var(--width); } .tab-blockBox .column .column-text { padding-bottom: 0; width: var(--width); } .holiday-homesBox .block { display: block; } .tab-blockBox .block .image { width: var(--width); } .tab-blockBox .block .image img { width: var(--width); border-radius: 10px 10px 0 0; } .tab-blockBox .block .info { padding: 20px 20px 30px 20px; width: var(--width); border-radius: 10px; } .tab-blockBox .block .price { padding-bottom: 20px; } .card-faq .accordion-item { padding: 12px 30px 12px 20px; } .card-faq .images { grid-template-columns: auto auto; } .tab-blockBox .column .column-text p { margin-bottom: 8px; } .tab-blockBox .block .info p { margin-bottom: 15px; } .list-box ul > li { margin-bottom: 10px; } .card-exclusive .wrap { display: block; } .card-exclusive .text { margin-bottom: 20px; width: var(--width); } .card-exclusive .link ul > li, .card-exclusive .text ul > li { padding-left: 25px; } .card-exclusive .link { width: var(--width); } .card-exclusive .link .title { margin-bottom: 5px; } .card-exclusive .link { padding-left: 0; } .list-box ul > li { margin-bottom: 10px; } .card-right .card-content .btn { display: block; } .radiotab:checked + .label > strong:after { bottom: -15px; } #gform_fields_1{ flex-direction: column; padding: 10px;} #field_1_1, #field_1_3, #field_2_3, #field_2_4, #gform_submit_button_2, #field_submit{ width: 100%!important; } .accommodationsBox .block { width: 100%; } .accommodatieBox .accommodatie_header .accommodatie_mozaiek{ display: none; } .accommodatieBox .accommodatie_header .accommodatie_slideshow{ width: calc(100% - 116px); } .accommodatieBox .accommodatie_header .accommodatie_slide{ height: 320px; } .accommodatieBox .accommodatie_header .accommodatie_slide img{ height: 320px; } .accommodatieBox .accommodatie_body .accommodatie_body_sidebar{ width: 100%; margin-bottom: 40px; } .accommodatieBox .accommodatie_body .accommodatie_body_content{ width: 100%; } .accommodatieBox .accommodatie_body{ flex-direction: column-reverse; padding-top: 40px;} #pagina_holder .column{ width: calc(50% - 20px); } #acco_holder a{ width: calc(50% - 20px); } #reis_holder .column{ width: calc(50% - 20px); } #blog_holder .column{ width: calc(50% - 20px); } } @media only screen and (max-width: 479px) { .menuBox:not(.mm-menu) { display: none; } #headerCntr .mobileMenu { display: block; } .reviewsBox { padding-bottom: 100px; } .card-review .item ul > li { display: block; width: var(--width); } .social-profileBox .block { align-items: center; } .social-profileBox .block p { margin-bottom: 0; font-size: 12px; } .social-profileBox .block ul { margin-left: 6px; } .social-profileBox .block ul > li > a { font-size: 12px; } .social-profileBox .block ul > li:after { margin: 0 5px; } .list-box ul { padding: 13px 0 8px; } .tab-blockBox .block .price-box { display: block; } .tab-blockBox .block .price { text-align: left; } .list-box ul { padding: 13px 0 8px; } .card-faq .images { grid-template-columns: auto; } .reviewsBox .swiper { overflow: unset; margin: 0 -280px; } .reviewsBox .swiper-button-prev, .reviewsBox .swiper-button-next { bottom: -120px; } .footerBox .column_dubbel{ width: 100%;} .footerBox .column_dubbel ul{ column-count:1; } #gform_fields_2{ padding-bottom: 80px;} .social-profileBox .block ul > li:first-child{ display:none; } .card-faq .images{ display: block; } .card-faq .images .item{ padding: 8px; max-width: 100%;} #pagina_holder .column{ width: 100%; } #acco_holder a{ width: 100%;} #reis_holder .column{ width: 100%; } #blog_holder .column{ width: 100%; } } .reviewBox .card-filter { display:none!important; }