@charset "UTF-8";
/* FONTS */
@font-face {
font-family: "Sansa_bold";
src: url("fonts/Sansa-Bold.eot");
src: url("fonts/Sansa-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/Sansa-Bold.woff2") format("woff2"), url("fonts/Sansa-Bold.woff") format("woff"), url("fonts/Sansa-Bold.ttf") format("truetype"), url("fonts/Sansa-Bold.svg#Sansa-Bold") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Sansa_light";
src: url("fonts/Sansa-Light.eot");
src: url("fonts/Sansa-Light.eot?#iefix") format("embedded-opentype"), url("fonts/Sansa-Light.woff2") format("woff2"), url("fonts/Sansa-Light.woff") format("woff"), url("fonts/Sansa-Light.ttf") format("truetype"), url("fonts/Sansa-Light.svg#Sansa-Light") format("svg");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Sansa";
src: url("fonts/Sansa-Normal.eot");
src: url("fonts/Sansa-Normal.eot?#iefix") format("embedded-opentype"), url("fonts/Sansa-Normal.woff2") format("woff2"), url("fonts/Sansa-Normal.woff") format("woff"), url("fonts/Sansa-Normal.ttf") format("truetype"), url("fonts/Sansa-Normal.svg#Sansa-Normal") format("svg");
font-weight: normal;
font-style: normal;
}
/* MARGINS */
/* COLORS */
/* MISC */
.font, .formulier form textarea {
font-family: "Open Sans", "Arial", sans-serif;
font-weight: 400;
font-style: normal;
}
.font_semibold {
font-family: "Open Sans", "Arial", sans-serif;
font-weight: 600;
font-style: normal;
}
.font_bold, .txt b, .txt em, .txt strong, b, em, strong, .pager_nav a, .pager_nav .active, .visual_container .visual_wrapper .left .voorbeelden, .visual_banner a h1, .visual_banner a span, .visual_banner .scrollto h1, .visual_banner .scrollto span, .latest_news_wrapper .latest_news a.more {
font-family: "Open Sans", "Arial", sans-serif;
font-weight: 700;
font-style: normal;
}
.font_light {
font-family: "Open Sans", "Arial", sans-serif;
font-weight: 300;
font-style: normal;
}
.font_thin {
font-family: "Open Sans", "Arial", sans-serif;
font-weight: 300;
font-style: normal;
}
.font_italic, .txt u i, .txt i, h4, .h4 {
font-family: "Open Sans", "Arial", sans-serif;
font-weight: 400;
font-style: italic;
}
.font_semibold_italic {
font-family: "Open Sans", "Arial", sans-serif;
font-weight: 600;
font-style: italic;
}
.font_bold_italic {
font-family: "Open Sans", "Arial", sans-serif;
font-weight: 700;
font-style: italic;
}
.font_light_italic {
font-family: "Open Sans", "Arial", sans-serif;
font-weight: 300;
font-style: italic;
}
.font_thin_italic {
font-family: "Open Sans", "Arial", sans-serif;
font-weight: 300;
font-style: italic;
}
.font2, h3 b, .h3 b, h3, .h3, .formulier form input, .chatbot a.contact, .chatbot .text, .banner_personal .text span, #personal .person .text, #personal .person .info .functie, .detail_page_article .detail_page_right .belons form input, .detail_page_article .detail_page_right .belons form .title, .detail_page .detail_page_content .subtitle, .blog_preview .info a, .news_archive .news_item a, .latest_news_wrapper .latest_news .news_item a, #main_nav .hide_large, #main_nav #nav_items .link {
font-family: "Sansa", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: normal;
}
.font2_semibold, .txt h3, .formulier form .form_title {
font-family: "Sansa_bold", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: normal;
}
.font2_bold, .txt .table .table_row .table_cell .column_title, .txt .txt_button a, .txt h2, a.form_button, a.button, .contact_bedankt, .chatbot .contactinfo {
font-weight: normal;
font-family: "Sansa_bold", "Open Sans", "Arial", sans-serif;
font-style: normal;
}
.font2_light, html, body, .txt b font, .txt font b, .txt em font, .txt font em, .txt strong font, .txt font strong, h2, .h2, .visual_container .visual_wrapper .right .list_preview .list_preview_content a, h1, .h1, #personal .person .info .name, .list_previews .list_preview .list_preview_content a, .list_previews .list_preview .list_preview_content h2, .logotype, .banner, #diensten_teasers .diensten_teaser_item .text, #diensten_teasers .diensten_teaser_item a, .call {
font-family: "Sansa_light", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: normal;
}
.font2_thin {
font-family: "Sansa_light", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: normal;
}
.font2_italic, .txt .txt_quote, .txt i font, .txt font i, .chatbot .title, .detail_page_article .detail_page_right .belons .desc, #diensten .intro.group_intro {
font-family: "Sansa", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: italic;
}
.font2_semibold_italic {
font-family: "Sansa_bold", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: italic;
}
.font2_bold_italic, .txt b font i, .txt font b i, .txt em font i, .txt font em i, .txt strong font i, .txt font strong i, .txt b i font, .txt font i b, .txt em i font, .txt font i em, .txt strong i font, .txt font i strong, .txt i b font, .txt i font b, .txt i em font, .txt i font em, .txt i strong font, .txt i font strong, .detail_page_article .detail_page_right .tip a, .detail_page_article .detail_page_right .belons form a.form_button, .detail_page_article .detail_page_right .belons .desc a, .video_header .text, .visual_detail_page .right h1 {
font-family: "Sansa_bold", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: italic;
}
.font2_light_italic {
font-family: "Sansa_light", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: italic;
}
.font2_thin_italic {
font-family: "Sansa_light", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: italic;
}
.font3, .txt b i, .txt i b, .txt em i, .txt i em, .txt strong i, .txt i strong {
font-family: "Sansa", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: normal;
}
.font3_semibold {
font-family: "Sansa_bold", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: normal;
}
.font3_bold {
font-family: "Sansa_bold", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: normal;
}
.font3_light {
font-family: "Sansa_light", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: normal;
}
.font3_thin {
font-family: "Sansa_light", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: normal;
}
.font3_italic {
font-family: "Sansa", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: italic;
}
.font3_semibold_italic {
font-family: "Sansa_bold", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: italic;
}
.font3_bold_italic {
font-family: "Sansa_bold", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: italic;
}
.font3_light_italic {
font-family: "Sansa_light", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: italic;
}
.font3_thin_italic {
font-family: "Sansa_light", "Open Sans", "Arial", sans-serif;
font-weight: normal;
font-style: italic;
}
* {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.thin_font {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.hidden {
display: none;
}
#container {
position: relative;
top: 0px;
left: 0px;
width: 100%;
margin: 0px auto;
height: 100%;
min-height: 100%;
height: auto !important;
}
#container.dark {
background: #404040;
}
#container.dark .pager_nav a {
color: #ffffff;
}
#container.dark #contact, #container.dark #opruimpakket {
color: #ffffff;
}
#container.dark #contact h1, #container.dark #opruimpakket h1 {
color: #ffffff;
}
#frame {
min-height: 100%;
height: 100%;
min-height: 85vh;
}
* {
position: relative;
outline: none;
border: none;
-webkit-text-size-adjust: none;
-webkit-appearance: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 0;
}
.wrapper {
position: relative;
margin: 0px auto;
max-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 880px;
}
@media screen and (min-width: 1226px) {
.wrapper {
width: 1105px;
}
}
@media screen and (min-width: 1351px) {
.wrapper {
width: 1230px;
}
}
@media screen and (max-width: 1000px) {
.wrapper {
width: 630px;
}
}
@media screen and (max-width: 750px) {
.wrapper {
width: 90%;
}
}
#cookiemelding {
position: fixed;
width: 100%;
left: 0px;
bottom: 0px;
padding: 15px 40px 15px 15px;
background: #444444;
color: #ffffff;
vertical-align: middle;
opacity: 0.9;
z-index: 9999;
}
#cookiemelding a {
color: #ffffff;
text-decoration: underline;
}
#cookiemelding a.accept {
position: absolute;
right: -25px;
top: -2px;
color: #ffffff;
padding: 5px;
font-size: 20px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
text-decoration: none;
}
.grid {
position: relative;
float: left;
margin-right: 50px;
max-width: 100%;
min-height: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.grid img {
max-width: 100%;
height: auto;
}
.valign_wrapper {
position: relative;
height: 100%;
}
.valign_wrapper .valign_helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.valign_wrapper .valign_content {
display: inline-block;
vertical-align: middle;
}
#main_nav {
position: relative;
top: 0px;
left: 0px;
width: 100%;
background: #f5f5f5;
height: 100px;
z-index: 999;
}
#main_nav .overlay {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
}
@media screen and (min-width: 1001px) {
#main_nav .overlay {
display: none !important;
}
}
#main_nav #nav_items {
display: inline-block;
padding: 23px 0px 0px 0px;
text-align: center;
}
@media screen and (min-width: 1001px) {
#main_nav #nav_items {
display: block !important;
}
}
#main_nav #nav_items .link {
display: inline-block;
line-height: 20px;
height: 20px;
margin: 0px 15px 0px 15px;
color: #555555;
padding: 15px 2px 20px 2px;
text-align: center;
font-size: 1.3em;
}
#main_nav #nav_items .link:hover a, #main_nav #nav_items .link.active a, #main_nav #nav_items .link.active .icon, #main_nav #nav_items .link.active {
color: #e4004b !important;
text-decoration: none;
-webkit-transition: 0.2s;
transition: 0.2s;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}
#main_nav #nav_items .link .dropdown {
position: absolute;
display: none;
top: 100%;
padding: 10px 20px;
margin-left: -50px;
background: #f5f5f5;
text-align: center;
width: 150px;
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
}
#main_nav #nav_items .link .dropdown .border {
height: 1px;
background: #bbbbbb;
margin: 0px 10px 10px 10px;
display: none;
}
#main_nav #nav_items .link .dropdown a {
display: block;
font-size: 0.9em;
color: #555555 !important;
white-space: nowrap;
padding-top: 3px;
margin: 3px 5px 8px 5px;
border-top: 1px solid #dddddd;
}
#main_nav #nav_items .link .dropdown a:hover {
color: #e4004b !important;
}
#main_nav #nav_items .link .dropdown a:first-of-type {
border: none;
}
#main_nav #nav_items .link.dd_archive a {
font-size: 0.85em;
}
@media screen and (max-width: 1225px) {
#main_nav #nav_items .link {
margin: 0px 0px 0px 15px !important;
}
}
#main_nav #nav_items .main_nav_subs {
display: none;
}
#main_nav .mainnav_subs {
display: none !important;
}
#main_nav #hamburger {
position: absolute;
display: none;
font-size: 30px;
padding: 10px;
height: 40px;
width: 42px;
color: #e4004b;
cursor: pointer;
text-align: center;
top: 15px;
right: 17px;
line-height: 30px;
z-index: 999;
text-align: center;
}
#main_nav #hamburger.fa-times {
position: fixed;
background: none;
color: #ffffff;
}
#main_nav #hamburger_close {
position: fixed;
display: none !important;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0);
z-index: -1;
}
#main_nav .hide_large {
position: absolute;
bottom: 0px;
right: 23px;
color: #ffffff;
font-size: 1.3em;
}
#main_nav .hide_large a {
color: #ffffff !important;
}
#main_nav .hide_large .fa {
font-size: 1.2em;
margin-right: 15px;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
@media screen and (max-width: 1000px) {
#main_nav {
height: 80px;
top: 0px !important;
padding: 0px;
line-height: 0px;
border: none;
}
#main_nav .wrapper {
width: 100% !important;
}
#main_nav .nav_line_top {
display: block;
}
#main_nav div.social {
position: relative;
opacity: 1;
margin-bottom: 20px;
padding-top: 20px;
}
#main_nav #nav_items {
position: fixed;
float: none !important;
width: 100%;
background: #e4004b;
left: 0px;
top: 0px;
width: 100%;
padding: 30px 0px 15px 0px !important;
display: inline-block;
z-index: 3;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
max-width: 100% !important;
text-align: center;
}
#main_nav #nav_items .link {
float: none !important;
display: block !important;
text-align: left !important;
padding: 0px 0px 0px 20px !important;
margin: 0px 0px 10px 0px !important;
color: #ffffff !important;
font-size: 1.5em !important;
line-height: 1.2em !important;
}
#main_nav #nav_items .link:hover, #main_nav #nav_items .link.active {
color: #ffffff !important;
background: none !important;
text-decoration: underline !important;
}
#main_nav #nav_items .link span {
display: none;
}
#main_nav #nav_items .link {
margin-left: 0px !important;
margin-right: 0px !important;
}
#main_nav #nav_items .main_nav_subs {
display: block !important;
clear: both;
left: 0px;
margin-top: -10px;
margin-bottom: 20px;
text-align: left;
}
#main_nav #nav_items .main_nav_subs a {
display: block;
color: #ffffff;
padding: 2px 0px;
font-size: 1.1em;
}
#main_nav #nav_items .main_nav_subs a:hover, #main_nav #nav_items .main_nav_subs a.active {
text-decoration: none;
}
}
@media screen and (max-width: 1000px) and (min-width: 451px) {
#main_nav #nav_items .main_nav_subs a {
font-size: 1.2em;
}
}
@media screen and (max-width: 1000px) {
#main_nav #nav_items div.link {
display: block !important;
color: #ffffff !important;
margin-top: 0px !important;
padding: 0px 20px 0px 20px !important;
}
#main_nav #nav_items div.link:hover, #main_nav #nav_items div.link.active {
color: #ffffff !important;
}
#main_nav #nav_items div.link .dropdown {
position: absolute;
margin: 0px;
top: -10px;
left: 70px;
text-align: left;
background: none;
display: block !important;
box-shadow: none;
width: auto !important;
}
#main_nav #nav_items div.link .dropdown a {
display: inline-block !important;
float: left !important;
border: none;
margin: 0px 5px !important;
font-size: 0.9em;
color: #ffffff !important;
}
#main_nav #nav_items div.link .dropdown a:hover, #main_nav #nav_items div.link .dropdown a.active {
color: #ffffff !important;
background: none !important;
}
#main_nav #nav_items div.link .dropdown.hide_small {
display: none !important;
}
#main_nav #nav_items div.link.dd_archive .dropdown a {
display: inline-block;
}
}
@media screen and (max-width: 1000px) {
#main_nav #hamburger {
display: block !important;
}
}
.fade_overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: url(img/layout/loading.gif) center center no-repeat #000000;
background-size: 64px auto;
z-index: 2;
}
#logo {
position: absolute;
display: inline-block;
top: 20px;
left: 30px;
width: 275px;
z-index: 9999;
}
#logo img {
width: 100%;
max-width: 250px;
}
@media screen and (min-width: 1001px) {
#logo {
display: inline-block !important;
}
}
@media screen and (max-width: 1350px) {
#logo {
margin-top: 7px;
max-width: 200px;
}
}
@media screen and (max-width: 1000px) {
#logo {
top: auto;
left: auto;
margin-top: 18px;
padding-left: 20px;
}
#logo img {
max-width: 180px;
}
}
.call {
position: absolute;
top: 35px;
right: 30px;
font-size: 1.5em;
z-index: 9999;
}
.call .fa {
top: 3px;
font-size: 1.2em;
margin-right: 15px;
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
@media screen and (max-width: 1000px) {
.call {
display: none;
}
}
.breadcrumb {
background: #f5f5f5;
border-top: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding: 0px 15px;
white-space: nowrap;
overflow: hidden;
height: 45px;
}
.breadcrumb a {
display: inline-block;
padding: 10px 40px 10px 20px;
background: url(img/layout/breadcrumb_bg.png) right center no-repeat;
background-size: auto 100%;
}
#diensten .list_preview .list_preview_content .text {
margin-top: 5px;
height: auto;
overflow: auto;
}
#diensten .intro.group_intro {
margin: 30px auto 0px auto;
width: 80% !important;
max-width: 700px !important;
color: #A3A3A3;
font-size: 1em;
line-height: 1.6em;
margin-bottom: -30px;
}
#diensten .intro.group_intro h1 {
color: #e4004b;
font-size: 2em;
margin-bottom: 20px;
}
#diensten .intro.group_intro img {
height: 100px;
margin-bottom: -10px;
}
#diensten_teasers {
text-align: center;
}
#diensten_teasers .diensten_teaser_item {
padding-top: 0px;
display: inline-block;
width: 30%;
margin: 0px 4% 180px 4%;
vertical-align: top;
cursor: pointer;
}
#diensten_teasers .diensten_teaser_item img {
max-width: 70px;
}
@media screen and (max-width: 450px) {
#diensten_teasers .diensten_teaser_item img {
max-width: 60px;
}
}
#diensten_teasers .diensten_teaser_item a {
display: block;
color: #e4004b;
font-size: 2.5em;
margin: 30px 0px 15px 0px;
-webkit-transition: 0.2s;
transition: 0.2s;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}
#diensten_teasers .diensten_teaser_item a .fa {
font-size: 0.5em;
top: -3px;
margin-left: 10px;
display: none;
}
@media screen and (max-width: 1000px) {
#diensten_teasers .diensten_teaser_item a {
margin: 20px 0px 0px 0px;
}
}
#diensten_teasers .diensten_teaser_item .text {
display: block;
font-size: 1.2em;
line-height: 1.8em;
padding: 20px;
-webkit-transition: 0.1s;
transition: 0.1s;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}
#diensten_teasers .diensten_teaser_item .leesmeer {
color: #e4004b;
font-size: 1.2em;
text-decoration: underline;
}
@media screen and (max-width: 1225px) {
#diensten_teasers .diensten_teaser_item {
width: 40%;
margin: 0px 5% 60px 5%;
}
}
@media screen and (max-width: 1000px) {
#diensten_teasers .diensten_teaser_item {
width: 90%;
}
}
#diensten_teasers .diensten_teaser_item:hover {
/*.text { background: $red; color: $white;}*/
}
#diensten_teasers .diensten_teaser_item:hover a {
text-decoration: underline;
}
@media screen and (max-width: 1000px) {
#diensten_teasers {
margin-bottom: 30px;
}
}
#logo_slider {
position: relative;
clear: both;
margin-bottom: 90px;
margin-top: -100px;
overflow: hidden;
border-bottom: 1px solid #eeeeee;
}
#logo_slider .carousel {
position: relative;
width: 100%;
margin: 0px auto;
line-height: 0px;
text-align: center;
}
#logo_slider .carousel div {
position: relative;
margin: 0px 0px;
padding: 0px 25px;
box-sizing: border-box;
text-align: center;
}
#logo_slider .carousel div img {
position: relative;
width: 100%;
height: auto;
max-width: 200px;
filter: gray;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
@media screen and (max-width: 450px) {
#logo_slider .carousel div {
padding: 0px 10px;
}
}
@media screen and (max-width: 1000px) {
#logo_slider {
margin-top: 0px;
margin-bottom: 50px;
}
}
.shade {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: url(img/layout/shade.png) bottom center repeat-x;
background-size: 50% auto;
opacity: 0.8;
}
.latest_news_wrapper {
margin-top: 60px;
background: url(img/layout/social_bg.jpg) center center no-repeat;
background-size: cover;
padding: 4% 2%;
}
.latest_news_wrapper .latest_news {
max-width: 1600px;
margin: 0px auto;
text-align: center;
}
.latest_news_wrapper .latest_news a.more {
position: absolute;
bottom: -4vw;
margin-bottom: -20px;
left: 50%;
margin-left: -80px;
width: 160px;
padding: 10px 15px;
background: #e4004b;
color: #ffffff;
}
@media screen and (max-width: 1000px) {
.latest_news_wrapper .latest_news a.more {
display: none;
}
}
.latest_news_wrapper .latest_news .news_item {
width: 23.5%;
float: left;
line-height: 0px;
cursor: pointer;
}
.latest_news_wrapper .latest_news .news_item .image {
width: 100%;
padding-top: 64%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.latest_news_wrapper .latest_news .news_item .image:after {
position: absolute;
display: block;
content: "";
bottom: 0px;
left: 0px;
width: 100%;
height: 5px;
background: #ffffff;
z-index: 1;
}
.latest_news_wrapper .latest_news .news_item img {
width: 100%;
}
.latest_news_wrapper .latest_news .news_item a {
position: absolute;
bottom: 0px;
left: 0px;
padding: 20px 20px 25px 20px;
color: #ffffff;
line-height: 1.2em;
text-align: left;
}
.latest_news_wrapper .latest_news .news_item a .date {
display: block;
color: #A3A3A3;
margin-bottom: 5px;
font-size: 0.9em;
}
.latest_news_wrapper .latest_news .news_item .leesmeer {
position: absolute;
bottom: 20px;
left: 20px;
color: #A3A3A3;
text-decoration: underline;
line-height: 1.2em;
}
.latest_news_wrapper .latest_news .news_item:nth-of-type(1) {
width: 49%;
}
.latest_news_wrapper .latest_news .news_item:nth-of-type(1) .image {
padding-top: 65%;
}
.latest_news_wrapper .latest_news .news_item:nth-of-type(1) a {
font-size: 1.5em;
line-height: 1.2em;
}
.latest_news_wrapper .latest_news .news_item:nth-of-type(1) a .date {
font-size: 0.8em;
}
.latest_news_wrapper .latest_news .news_item:nth-of-type(2) {
position: absolute;
top: 0px;
left: 51%;
}
.latest_news_wrapper .latest_news .news_item:nth-of-type(3) {
position: absolute;
top: 0px;
left: 76.5%;
}
.latest_news_wrapper .latest_news .news_item:nth-of-type(4) {
position: absolute;
bottom: 0px;
left: 51%;
}
.latest_news_wrapper .latest_news .news_item:nth-of-type(5) {
position: absolute;
bottom: 0px;
left: 76.5%;
}
@media screen and (max-width: 1000px) {
.latest_news_wrapper .latest_news .news_item:nth-of-type(1) {
width: 100%;
}
.latest_news_wrapper .latest_news .news_item:nth-of-type(2) {
clear: both;
}
.latest_news_wrapper .latest_news .news_item:nth-of-type(2), .latest_news_wrapper .latest_news .news_item:nth-of-type(4) {
position: relative;
float: none;
width: auto;
top: auto;
left: auto;
float: left;
width: 47.5%;
margin-top: 5%;
margin-right: 5%;
}
.latest_news_wrapper .latest_news .news_item:nth-of-type(3), .latest_news_wrapper .latest_news .news_item:nth-of-type(5) {
position: relative;
float: none;
width: auto;
top: auto;
left: auto;
float: left;
width: 47.5%;
margin-top: 5%;
}
}
@media screen and (max-width: 450px) {
.latest_news_wrapper .latest_news .news_item:nth-of-type(1) {
margin-bottom: 20px;
}
.latest_news_wrapper .latest_news .news_item:nth-of-type(2), .latest_news_wrapper .latest_news .news_item:nth-of-type(3), .latest_news_wrapper .latest_news .news_item:nth-of-type(4), .latest_news_wrapper .latest_news .news_item:nth-of-type(5) {
float: none;
width: 100%;
text-align: left;
margin: 10px 0px 0px 0px;
}
.latest_news_wrapper .latest_news .news_item:nth-of-type(2) .shade, .latest_news_wrapper .latest_news .news_item:nth-of-type(2) .image, .latest_news_wrapper .latest_news .news_item:nth-of-type(3) .shade, .latest_news_wrapper .latest_news .news_item:nth-of-type(3) .image, .latest_news_wrapper .latest_news .news_item:nth-of-type(4) .shade, .latest_news_wrapper .latest_news .news_item:nth-of-type(4) .image, .latest_news_wrapper .latest_news .news_item:nth-of-type(5) .shade, .latest_news_wrapper .latest_news .news_item:nth-of-type(5) .image {
display: none;
}
.latest_news_wrapper .latest_news .news_item:nth-of-type(2) a, .latest_news_wrapper .latest_news .news_item:nth-of-type(3) a, .latest_news_wrapper .latest_news .news_item:nth-of-type(4) a, .latest_news_wrapper .latest_news .news_item:nth-of-type(5) a {
position: relative;
bottom: auto;
display: block;
left: auto;
text-align: left;
padding: 0px;
font-size: 1.2em;
padding-left: 15px;
}
.latest_news_wrapper .latest_news .news_item:nth-of-type(2) a .date, .latest_news_wrapper .latest_news .news_item:nth-of-type(3) a .date, .latest_news_wrapper .latest_news .news_item:nth-of-type(4) a .date, .latest_news_wrapper .latest_news .news_item:nth-of-type(5) a .date {
display: none;
}
.latest_news_wrapper .latest_news .news_item:nth-of-type(2) a:before, .latest_news_wrapper .latest_news .news_item:nth-of-type(3) a:before, .latest_news_wrapper .latest_news .news_item:nth-of-type(4) a:before, .latest_news_wrapper .latest_news .news_item:nth-of-type(5) a:before {
position: absolute;
top: 0px;
left: 0px;
content: "ยป ";
}
}
@media screen and (max-width: 1000px) {
.latest_news_wrapper .latest_news {
padding: 30px 20px;
}
}
@media screen and (max-width: 1000px) {
.latest_news_wrapper {
padding: 0%;
}
}
@media screen and (max-width: 750px) {
.latest_news_wrapper {
margin-top: 10px;
}
}
.news_archive {
max-width: 1600px;
margin: 30px auto;
text-align: center;
text-align: center;
}
.news_archive .news_item {
display: inline-block;
width: calc(25% - 20px);
margin: 10px;
line-height: 0px;
cursor: pointer;
}
@media screen and (max-width: 1225px) {
.news_archive .news_item {
width: calc(33% - 20px);
}
}
@media screen and (max-width: 1000px) {
.news_archive .news_item {
width: calc(50% - 20px);
}
}
@media screen and (max-width: 750px) {
.news_archive .news_item {
width: 100%;
margin: 10px 0px;
}
}
.news_archive .news_item .image {
width: 100%;
padding-top: 64%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.news_archive .news_item img {
width: 100%;
}
.news_archive .news_item a {
position: absolute;
bottom: 0px;
left: 0px;
padding: 20px 20px 25px 20px;
color: #ffffff;
line-height: 1.2em;
text-align: left;
}
.news_archive .news_item a .date {
display: block;
color: #A3A3A3;
margin-bottom: 5px;
font-size: 0.9em;
}
.news_archive .news_item .leesmeer {
position: absolute;
bottom: 20px;
left: 20px;
color: #A3A3A3;
text-decoration: underline;
line-height: 1.2em;
}
@media screen and (max-width: 1000px) {
.news_archive {
padding: 30px 20px;
}
}
#posts {
max-width: 1800px;
margin: 20px auto;
}
#posts .pinned_previews {
float: right;
width: 69%;
margin: 60px;
margin-left: 0px;
}
#posts .pinned_previews .pinned_preview {
margin-bottom: 50px;
cursor: pointer;
}
#posts .pinned_previews .pinned_preview .image {
width: 70%;
float: left;
line-height: 0px;
}
#posts .pinned_previews .pinned_preview .image img {
width: 100%;
}
@media screen and (max-width: 700px) {
#posts .pinned_previews .pinned_preview .image {
width: 100%;
margin-bottom: 25px;
}
}
#posts .pinned_previews .pinned_preview .content_wrapper {
width: 25%;
margin-left: 5%;
float: left;
}
#posts .pinned_previews .pinned_preview .content_wrapper a {
display: block;
font-size: 2em;
color: #e4004b;
margin-bottom: 20px;
}
@media screen and (max-width: 1350px) {
#posts .pinned_previews .pinned_preview .content_wrapper a {
font-size: 1.7em;
}
}
#posts .pinned_previews .pinned_preview .content_wrapper .text {
max-height: 178px;
overflow: hidden;
}
@media screen and (max-width: 1225px) {
#posts .pinned_previews .pinned_preview .content_wrapper .text {
width: 100%;
margin-left: 0%;
float: none;
}
}
@media screen and (max-width: 1350px) {
#posts .pinned_previews .pinned_preview .content_wrapper .text {
max-height: 185px;
}
}
@media screen and (max-width: 700px) {
#posts .pinned_previews .pinned_preview .content_wrapper .text {
max-height: 53px;
margin-bottom: -10px;
}
}
#posts .pinned_previews .pinned_preview .content_wrapper .leesmeer {
display: block;
margin-top: 20px;
color: #e4004b;
text-decoration: underline;
}
@media screen and (max-width: 700px) {
#posts .pinned_previews .pinned_preview .content_wrapper {
width: 100%;
margin-left: 0%;
margin-bottom: 10px;
}
}
@media screen and (max-width: 700px) {
#posts .pinned_previews .pinned_preview {
margin-bottom: 20px;
}
}
@media screen and (max-width: 1500px) {
#posts .pinned_previews {
width: 63%;
}
}
@media screen and (max-width: 1000px) {
#posts .pinned_previews {
width: 100%;
padding: 50px;
margin: 0px;
}
}
@media screen and (max-width: 750px) {
#posts .pinned_previews {
padding: 20px 20px 0px 20px;
}
}
#posts .tutorial_previews {
float: left;
width: 20%;
margin: 60px;
margin-right: 0px;
}
#posts .tutorial_previews .h1 {
font-size: 2.5em;
}
#posts .tutorial_previews .tutorial_preview {
margin-bottom: 50px;
cursor: pointer;
}
#posts .tutorial_previews .tutorial_preview .image {
width: 100%;
line-height: 0px;
}
#posts .tutorial_previews .tutorial_preview .image img {
width: 100%;
}
#posts .tutorial_previews .tutorial_preview a {
display: block;
font-size: 1.5em;
color: #e4004b;
margin-top: 10px;
}
#posts .tutorial_previews .tutorial_preview .leesmeer {
display: block;
margin-top: 5px;
color: #A3A3A3;
text-decoration: underline;
}
@media screen and (max-width: 1500px) {
#posts .tutorial_previews {
width: 22%;
}
}
@media screen and (max-width: 1000px) {
#posts .tutorial_previews {
display: none;
}
}
.blog_preview {
text-align: center;
}
.blog_preview .image {
display: inline-block;
width: 40%;
padding-top: 20%;
max-width: 500px;
margin-right: 40px;
vertical-align: top;
line-height: 0px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-color: #d21f3d;
background-blend-mode: luminosity;
}
.blog_preview .image span {
display: block;
width: 100%;
padding-top: 56%;
background: #eeeeee;
border: 5px solid #e4004b;
}
.blog_preview .image a, .blog_preview .image .image_img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.blog_preview .image img {
width: 100%;
-webkit-transition: 0.1s;
transition: 0.1s;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}
@media screen and (max-width: 1225px) {
.blog_preview .image {
width: 50%;
}
}
@media screen and (max-width: 1000px) {
.blog_preview .image {
width: 45%;
margin-right: 30px;
}
}
@media screen and (max-width: 750px) {
.blog_preview .image {
width: 90%;
max-width: 500px;
margin-right: 0px;
}
}
.blog_preview .info {
display: inline-block;
width: 35%;
text-align: left;
vertical-align: bottom;
padding-bottom: 60px;
}
.blog_preview .info a {
font-size: 1.5em;
color: #e4004b;
}
.blog_preview .info .date {
display: block;
color: #A3A3A3;
margin-bottom: 20px;
}
.blog_preview .info .text {
height: 88px;
overflow: hidden;
margin-bottom: 10px;
}
@media screen and (max-width: 1000px) {
.blog_preview .info .text {
height: 60px;
}
}
.blog_preview .info .leesmeer {
color: #e4004b;
text-decoration: underline;
}
.blog_preview .info .leesmeer .fa {
margin-left: 5px;
}
@media screen and (max-width: 1350px) {
.blog_preview .info {
width: 40%;
}
}
@media screen and (max-width: 1000px) {
.blog_preview .info {
width: 45%;
padding-bottom: 40px;
}
}
@media screen and (max-width: 750px) {
.blog_preview .info {
width: 90%;
max-width: 500px;
margin-top: 20px;
}
}
.blog_preview:hover {
cursor: pointer;
}
.blog_preview:hover .image img, .blog_preview:hover .image .image_img {
opacity: 0;
}
.blog_preview.blog_preview_right .image {
margin-right: 0px;
margin-left: 40px;
}
@media screen and (max-width: 1000px) {
.blog_preview.blog_preview_right .image {
margin-left: 30px;
}
}
@media screen and (max-width: 750px) {
.blog_preview.blog_preview_right .image {
margin-left: 0px;
}
}
.blog_preview.blog_preview_right .info {
vertical-align: top;
padding-bottom: 0px;
padding-top: 60px;
}
@media screen and (max-width: 1000px) {
.blog_preview.blog_preview_right .info {
padding-top: 40px;
}
}
@media screen and (max-width: 750px) {
.blog_preview.blog_preview_right .info {
margin-top: 0px;
margin-bottom: 20px;
}
}
.visual_detail_page {
width: 100%;
max-width: 1500px;
margin: 0px auto;
padding: 40px 75px 60px 75px;
}
@media screen and (max-width: 1225px) {
.visual_detail_page {
padding: 40px 45px 60px 45px;
}
}
@media screen and (max-width: 750px) {
.visual_detail_page {
padding: 20px 0px;
width: 90%;
margin-top: 0px;
}
}
.visual_detail_page .left {
display: inline-block;
width: 55%;
margin-right: 5%;
vertical-align: top;
}
@media screen and (max-width: 750px) {
.visual_detail_page .left {
display: block;
width: 100%;
margin-right: 0px;
margin-bottom: 30px;
}
}
.visual_detail_page .right {
display: inline-block;
width: 40%;
vertical-align: top;
}
.visual_detail_page .right h1 {
text-align: left;
padding-top: 20px;
margin-bottom: 30px;
}
@media screen and (max-width: 750px) {
.visual_detail_page .right h1 {
text-align: center;
}
}
.visual_detail_page .right .txt {
font-size: 1.1em;
line-height: 1.6em;
}
@media screen and (max-width: 750px) {
.visual_detail_page .right {
display: block;
width: 100%;
margin-right: 0px;
margin-bottom: 30px;
text-align: center;
}
}
@media screen and (max-width: 750px) {
.list_previews_detail {
display: none;
}
}
.video_header {
width: 100%;
height: 30vw;
max-height: 400px;
overflow: hidden;
}
.video_header .text {
display: block;
position: absolute;
top: 38%;
font-size: 3em;
line-height: 1.2em;
width: 100%;
text-align: center;
color: #ffffff;
z-index: 2;
}
@media screen and (max-width: 1000px) {
.video_header .text {
font-size: 2.5em;
line-height: 1.2em;
}
}
@media screen and (max-width: 750px) {
.video_header .text {
display: none;
}
}
.video_header .vimeo_wrapper {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.video_header .vimeo_wrapper iframe {
width: 100vw;
height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: 100vh;
min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.video_header .video_contain {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.video_header .video_contain iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
@media screen and (max-width: 750px) {
.video_header .video_contain {
width: 150%;
height: 100%;
min-height: auto;
min-width: auto;
top: 0px;
left: -25%;
}
}
.video_header video {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
}
@media screen and (max-width: 750px) {
.video_header video {
width: 100%;
height: auto;
min-height: auto;
min-width: auto;
}
}
@media screen and (max-width: 750px) {
.video_header {
height: 50vw;
}
}
#home #fullscreen_video {
width: 100%;
height: 100vh;
top: -100px;
line-height: 0px;
background: #171717;
overflow: hidden;
}
#home #fullscreen_video #video-background {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
right: 0px;
bottom: 0px;
}
@media screen and (max-width: 1000px) {
#home #fullscreen_video #video-background {
min-height: auto;
min-width: auto;
height: auto;
width: 100%;
}
}
#home #fullscreen_video .text {
position: absolute;
bottom: 25%;
left: 5%;
color: #ffffff;
}
#home #fullscreen_video .text .title {
font-size: 100px;
line-height: 1.1em;
}
@media screen and (max-width: 1225px) {
#home #fullscreen_video .text .title {
font-size: 80px;
}
}
@media screen and (max-width: 1000px) {
#home #fullscreen_video .text .title {
font-size: 60px;
}
}
@media screen and (max-width: 750px) {
#home #fullscreen_video .text .title {
font-size: 40px;
}
}
#home #fullscreen_video .text .leesmeer {
margin-top: 40px;
font-size: 2em;
text-decoration: underline;
cursor: pointer;
}
@media screen and (max-width: 1000px) {
#home #fullscreen_video .text .leesmeer {
font-size: 1.5em;
}
}
#home #fullscreen_video .text .fa {
position: absolute;
top: 100%;
left: 0px;
display: inline-block;
color: #ffffff;
font-size: 50px;
margin-top: 30px;
cursor: pointer;
}
@media screen and (max-width: 1225px) {
#home #fullscreen_video .text .fa {
top: 80%;
}
}
@media screen and (max-width: 750px) {
#home #fullscreen_video .text .fa {
top: 70%;
}
}
@media screen and (max-width: 450px) {
#home #fullscreen_video .text {
display: none;
}
}
@media screen and (max-width: 1000px) {
#home #fullscreen_video {
top: 0px;
height: auto;
}
}
#home .blog_preview {
margin-bottom: -30px;
margin-left: 10%;
z-index: 2;
text-align: left;
}
@media screen and (max-width: 1225px) {
#home .blog_preview {
margin-left: 2%;
}
}
@media screen and (max-width: 1000px) {
#home .blog_preview {
margin-bottom: -15px;
}
}
@media screen and (max-width: 750px) {
#home .blog_preview {
margin-left: 0%;
text-align: center;
}
}
#home .blog_preview.blog_preview_right {
margin-bottom: 0px;
margin-top: -30px;
margin-left: 0%;
margin-right: 10%;
text-align: right;
}
@media screen and (max-width: 1225px) {
#home .blog_preview.blog_preview_right {
margin-right: 2%;
}
}
@media screen and (max-width: 1000px) {
#home .blog_preview.blog_preview_right {
margin-top: -15px;
}
}
@media screen and (max-width: 750px) {
#home .blog_preview.blog_preview_right {
margin-right: 0%;
text-align: center;
}
#home .blog_preview.blog_preview_right img {
display: none;
}
}
.banner {
width: 100%;
padding: 70px 0px;
text-align: center;
background: #e4004b;
color: #ffffff;
font-size: 2.3em;
line-height: 1.2em;
}
@media screen and (max-width: 1000px) {
.banner {
padding: 40px 0px;
}
}
.intro {
margin-top: 60px;
width: 500px !important;
max-width: 100% !important;
padding: 20px;
text-align: center;
font-size: 1.1em;
line-height: 1.8em;
}
.intro h2 {
margin-bottom: 30px;
}
@media screen and (max-width: 1000px) {
.intro h2 {
margin-bottom: 20px;
}
}
.intro .swiper-container .swiper-wrapper .swiper-slide {
padding: 0px 20px;
height: 250px;
}
.intro .swiper-container .swiper-wrapper .swiper-slide .quote {
font-family: "Georgia", serif;
font-size: 1.7em;
font-weight: bold;
line-height: 10px;
top: 6px;
color: #e4004b;
}
.intro .swiper-container .swiper-wrapper .swiper-slide .quote .quote_left {
left: -10px;
}
.intro .swiper-container .swiper-wrapper .swiper-slide .afzender {
margin-top: 10px;
color: #A3A3A3;
}
@media screen and (max-width: 1000px) {
.intro .swiper-container .swiper-wrapper .swiper-slide {
font-size: 1.1em;
padding: 0px;
}
}
.intro .gif {
display: inline-block;
top: 15px;
margin-right: 15px;
max-width: 50px;
}
@media screen and (max-width: 1350px) {
.intro {
margin-left: 2%;
}
}
@media screen and (max-width: 1000px) {
.intro {
margin-left: 0%;
width: 100% !important;
text-align: left;
line-height: 1.6em;
padding: 20px 0px;
}
}
@media screen and (max-width: 750px) {
.intro {
text-align: left;
}
}
.logotype {
position: absolute;
top: 40%;
right: 100px;
}
@media screen and (max-width: 1000px) {
.logotype {
top: -30px;
right: 0px;
}
}
.list_banner {
margin-top: 60px;
margin-bottom: -110px;
padding-bottom: 85px;
padding-top: 40px;
font-size: 3em;
}
@media screen and (max-width: 1225px) {
.list_banner {
padding-top: 30px;
padding-bottom: 70px;
}
}
@media screen and (max-width: 1000px) {
.list_banner {
padding-bottom: 60px;
margin-top: 30px;
margin-bottom: -80px;
}
}
@media screen and (max-width: 750px) {
.list_banner {
margin-top: 0px;
margin-bottom: -50px;
}
}
.logotype {
border-left: 1px solid #e4004b;
height: 35px;
line-height: 30px;
padding-left: 20px;
color: #e4004b;
font-size: 2em;
}
.logotype span {
color: #A3A3A3;
}
.detail_page .detail_page_content {
margin: 60px auto 120px auto;
max-width: 900px;
}
.detail_page .detail_page_content h1 {
padding: 0px 10%;
margin-bottom: 40px;
color: #e4004b;
}
@media screen and (max-width: 1000px) {
.detail_page .detail_page_content h1 {
padding: 0px;
margin-bottom: 20px;
}
}
.detail_page .detail_page_content .date {
display: block;
font-size: 1.3em;
margin: 0px 0px 20px 0px;
text-align: center;
color: #A3A3A3;
}
@media screen and (max-width: 1000px) {
.detail_page .detail_page_content .date {
margin: -10px 0px 30px 0px;
font-size: 1.2em;
}
}
.detail_page .detail_page_content .subtitle {
display: block;
font-size: 1.8em;
line-height: 1.2em;
color: #e4004b;
text-transform: uppercase;
margin: -20px 0px 30px 0px;
text-align: center;
}
@media screen and (max-width: 1000px) {
.detail_page .detail_page_content .subtitle {
margin: -20px 0px 20px 0px;
font-size: 1.6em;
line-height: 1.1em;
}
}
.detail_page .detail_page_content .youtube_container {
margin-top: 30px;
margin-bottom: 30px;
}
.detail_page .detail_page_content .image {
margin-top: 30px;
margin-bottom: 20px;
text-align: center;
}
.detail_page .detail_page_content .image img {
width: 100%;
max-width: 100%;
max-height: 600px;
}
@media screen and (max-width: 1225px) {
.detail_page .detail_page_content .image {
margin-bottom: 30px;
}
}
@media screen and (max-width: 1000px) {
.detail_page .detail_page_content .image {
margin-top: -10px;
}
}
@media screen and (max-width: 750px) {
.detail_page .detail_page_content .image {
margin-bottom: 20px;
}
}
.detail_page .detail_page_content .txt {
font-size: 1.1em;
line-height: 1.4em;
}
.detail_page .detail_page_content .txt img {
width: auto;
max-width: 100%;
}
@media screen and (max-width: 1000px) {
.detail_page .detail_page_content {
margin: 25px 0px 60px 0px;
}
}
@media screen and (max-width: 750px) {
.detail_page .detail_page_content {
margin: 25px 0px 30px 0px;
}
}
.detail_page .pager_nav {
margin-top: 60px;
}
.detail_page_article {
max-width: 1500px;
margin: 0px auto;
padding: 0px 60px;
}
@media screen and (max-width: 1225px) {
.detail_page_article {
padding: 0px 30px;
}
}
@media screen and (max-width: 1000px) {
.detail_page_article {
max-width: 100%;
}
}
@media screen and (max-width: 750px) {
.detail_page_article {
padding: 0px 10px;
}
}
.detail_page_article .detail_page_content {
display: inline-block;
width: calc(100% - 400px);
max-width: auto;
margin-left: 0px;
margin-right: 100px;
vertical-align: top;
margin-bottom: 60px;
}
@media screen and (max-width: 1000px) {
.detail_page_article .detail_page_content {
display: block;
width: 100%;
margin: 30px auto;
}
}
.detail_page_article .detail_page_content h1 {
text-align: left;
padding: 0px;
margin-bottom: 15px;
}
.detail_page_article .detail_page_content .date {
text-align: left;
}
.detail_page_article .detail_page_right {
display: inline-block;
width: 300px;
vertical-align: top;
margin-top: 60px;
padding-bottom: 60px;
}
@media screen and (max-width: 1000px) {
.detail_page_article .detail_page_right {
display: none;
width: 100%;
}
}
.detail_page_article .detail_page_right .h2, .detail_page_article .detail_page_right .visual_container .visual_wrapper .right .list_preview .list_preview_content a, .visual_container .visual_wrapper .right .list_preview .list_preview_content .detail_page_article .detail_page_right a {
font-size: 2.5em;
line-height: 1.2em;
margin-top: 5px;
margin-bottom: 20px;
}
.detail_page_article .detail_page_right .belons {
background: url(img/layout/belons_bg.png) left bottom no-repeat;
background-size: 100% 100%;
width: 120%;
left: -10%;
padding-left: 10%;
}
@media screen and (max-width: 1550px) {
.detail_page_article .detail_page_right .belons {
width: calc(100% + 80px);
left: -20px;
background-size: 80% 100%;
overflow-x: hidden;
overflow-y: hidden;
}
}
@media screen and (max-width: 1425px) {
.detail_page_article .detail_page_right .belons {
background-size: 100% 100%;
}
}
@media screen and (max-width: 1225px) {
.detail_page_article .detail_page_right .belons {
width: calc(100% + 50px);
}
}
.detail_page_article .detail_page_right .belons .belons_phone {
position: absolute;
top: -10px;
right: -120px;
width: 210px;
height: 340px;
background: url(img/layout/belons.png) left top no-repeat;
background-size: contain;
}
.detail_page_article .detail_page_right .belons .belons_phone .overlay {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.detail_page_article .detail_page_right .belons .belons_phone .overlay img {
width: 100%;
display: none;
}
@media screen and (max-width: 1550px) {
.detail_page_article .detail_page_right .belons .belons_phone {
top: 70px;
right: -10px;
}
}
@media screen and (max-width: 1225px) {
.detail_page_article .detail_page_right .belons .belons_phone {
right: -20px;
}
}
.detail_page_article .detail_page_right .belons:hover .overlay img {
display: block;
}
.detail_page_article .detail_page_right .belons .desc {
color: #171717;
line-height: 1.2em;
}
.detail_page_article .detail_page_right .belons .desc a {
color: #171717;
}
.detail_page_article .detail_page_right .belons form {
margin-top: 20px;
margin-bottom: 30px;
max-width: 250px;
}
.detail_page_article .detail_page_right .belons form .title {
font-size: 1.2em;
line-height: 1.2em;
display: inline-block;
float: left;
width: 100px;
vertical-align: top;
clear: both;
padding-top: 3px;
}
@media screen and (max-width: 1550px) {
.detail_page_article .detail_page_right .belons form .title {
display: block;
float: none;
width: auto;
margin-bottom: 5px;
}
}
.detail_page_article .detail_page_right .belons form input {
display: inline-block;
float: left;
width: calc(100% - 100px);
background: #ffffff;
border: 1px solid #ffffff;
font-size: 1.2em;
margin: 0px 0px 10px 0px;
padding: 5px;
line-height: 1.3em;
color: #555555;
}
@media screen and (max-width: 1350px) {
.detail_page_article .detail_page_right .belons form input {
display: block;
float: none;
width: 150px;
}
}
.detail_page_article .detail_page_right .belons form a.form_button {
display: inline-block;
clear: both;
font-size: 1.5em;
width: auto;
margin: 20px 0px 0px 0px;
background: #e4004b;
padding: 10px 25px;
text-transform: none;
color: #ffffff !important;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
.detail_page_article .detail_page_right .h1 {
text-align: left;
padding: 0px;
margin-bottom: 35px;
padding-top: 30px;
}
.detail_page_article .detail_page_right .tip {
margin-bottom: 20px;
border-bottom: 2px dotted #A3A3A3;
padding-bottom: 20px;
}
.detail_page_article .detail_page_right .tip a {
color: #555555;
font-size: 1.2em;
line-height: 1.2em;
}
.detail_page_article .detail_page_right .tip .image {
line-height: 0px;
margin-bottom: 10px;
width: 100%;
padding-top: 56%;
overflow: hidden;
}
.detail_page_article .detail_page_right .tip .image .image_img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.detail_page_article .detail_page_right .tip .image img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
-webkit-transition: 0.2s;
transition: 0.2s;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}
.detail_page_article .detail_page_right .tip .image .bg {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
padding-top: 56%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-color: #d21f3d;
background-blend-mode: luminosity;
-webkit-transition: 0.2s;
transition: 0.2s;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}
.detail_page_article .detail_page_right .tip:hover .image img, .detail_page_article .detail_page_right .tip:hover .image .image_img {
opacity: 0;
}
.meervideos {
background: url(img/layout/meervideos_bg.jpg) center center no-repeat #111111;
background-size: cover;
padding: 60px 0px;
margin-bottom: -60px;
}
@media screen and (max-width: 1225px) {
.meervideos {
display: none;
}
}
.meervideos .meervideos_wrapper {
max-width: 1500px;
margin: 0px auto 20px auto;
padding: 0px 60px;
}
.meervideos .meervideos_wrapper .list_previews {
padding: 0px;
text-align: center;
}
.meervideos .meervideos_wrapper .list_previews .button {
background: #ffffff;
color: #555555 !important;
display: inline-block;
margin: 50px auto 0px auto;
font-size: 1.3em;
line-height: 1.2em;
}
.meervideos .meervideos_wrapper .list_previews .list_preview_content .image {
margin: 0px;
}
@media screen and (max-width: 1225px) {
.meervideos .meervideos_wrapper {
padding: 0px 30px;
}
}
@media screen and (max-width: 1000px) {
.meervideos .meervideos_wrapper {
max-width: 100%;
}
}
@media screen and (max-width: 750px) {
.meervideos .meervideos_wrapper {
padding: 0px 10px;
}
}
.meervideos .meervideos_wrapper .h1 {
color: #ffffff;
}
.visual_banner {
background: #e4004b;
padding: 0px 0px 0px 0px;
margin-top: 0px;
text-align: center;
}
.visual_banner a, .visual_banner .scrollto {
text-align: center;
cursor: pointer;
padding: 20px 0px 25px 0px;
}
@media screen and (min-width: 1351px) {
.visual_banner a, .visual_banner .scrollto {
position: relative;
display: inline-block;
width: 25%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(4n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.visual_banner a.masonry-item-double, .visual_banner .scrollto.masonry-item-double {
width: 50% !important;
}
.visual_banner a.masonry-item-double .content_container, .visual_banner .scrollto.masonry-item-double .content_container {
width: 100%;
padding-top: 47.92%;
}
}
@media screen and (min-width: 1226px) and (max-width: 1350px) {
.visual_banner a, .visual_banner .scrollto {
position: relative;
display: inline-block;
width: 25%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(4n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.visual_banner a.masonry-item-double, .visual_banner .scrollto.masonry-item-double {
width: 50% !important;
}
.visual_banner a.masonry-item-double .content_container, .visual_banner .scrollto.masonry-item-double .content_container {
width: 100%;
padding-top: 47.92%;
}
}
@media screen and (min-width: 1001px) and (max-width: 1225px) {
.visual_banner a, .visual_banner .scrollto {
position: relative;
display: inline-block;
width: 25%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(4n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.visual_banner a.masonry-item-double, .visual_banner .scrollto.masonry-item-double {
width: 50% !important;
}
.visual_banner a.masonry-item-double .content_container, .visual_banner .scrollto.masonry-item-double .content_container {
width: 100%;
padding-top: 47.92%;
}
}
@media screen and (min-width: 751px) and (max-width: 1000px) {
.visual_banner a, .visual_banner .scrollto {
position: relative;
display: inline-block;
width: 25%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(4n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.visual_banner a.masonry-item-double, .visual_banner .scrollto.masonry-item-double {
width: 50% !important;
}
.visual_banner a.masonry-item-double .content_container, .visual_banner .scrollto.masonry-item-double .content_container {
width: 100%;
padding-top: 47.92%;
}
}
@media screen and (min-width: 451px) and (max-width: 750px) {
.visual_banner a, .visual_banner .scrollto {
position: relative;
display: inline-block;
width: 50%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(2n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.visual_banner a.masonry-item-double, .visual_banner .scrollto.masonry-item-double {
width: 100% !important;
}
.visual_banner a.masonry-item-double .content_container, .visual_banner .scrollto.masonry-item-double .content_container {
width: 100%;
padding-top: 47.96%;
}
}
@media screen and (max-width: 450px) {
.visual_banner a, .visual_banner .scrollto {
position: relative;
display: inline-block;
width: 50%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(2n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.visual_banner a.masonry-item-double, .visual_banner .scrollto.masonry-item-double {
width: 100% !important;
}
.visual_banner a.masonry-item-double .content_container, .visual_banner .scrollto.masonry-item-double .content_container {
width: 100%;
padding-top: 47.96%;
}
}
.visual_banner a.link, .visual_banner .scrollto.link {
margin-bottom: 0px !important;
-webkit-transition: 0.2s;
transition: 0.2s;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}
.visual_banner a img, .visual_banner .scrollto img {
display: inline-block;
max-height: 100px;
}
.visual_banner a h1, .visual_banner a span, .visual_banner .scrollto h1, .visual_banner .scrollto span {
display: block;
color: #ffffff;
font-size: 1em;
line-height: 1.6em;
margin: 0px;
padding: 0px;
}
.visual_banner a.active, .visual_banner a:hover, .visual_banner .scrollto.active, .visual_banner .scrollto:hover {
background: rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 750px) {
.visual_banner {
display: none;
}
}
.visual_container {
width: 90%;
max-width: 1500px;
margin: 0px auto;
margin-top: 100px;
}
.visual_container .visual_wrapper .left {
float: left;
width: 40%;
margin-right: 5%;
vertical-align: top;
padding-top: 30px;
text-align: right;
}
.visual_container .visual_wrapper .left img {
height: 100px;
}
.visual_container .visual_wrapper .left .voorbeelden {
display: block;
margin-top: 15px;
color: #aaaaaa;
}
.visual_container .visual_wrapper .left .fa {
float: right;
top: 6px;
margin-left: 5px;
font-size: 12px;
}
.visual_container .visual_wrapper .left h2 {
color: #e4004b;
margin-bottom: 15px;
}
@media screen and (max-width: 750px) {
.visual_container .visual_wrapper .left h2 {
background: #e4004b;
color: #ffffff;
padding: 15px 0px;
}
}
.visual_container .visual_wrapper .left.switch {
float: right;
margin-right: 0%;
margin-left: 5%;
text-align: left;
}
.visual_container .visual_wrapper .left.switch .fa {
float: left;
top: 4px;
margin-left: 0px;
margin-right: 5px;
}
@media screen and (max-width: 1000px) {
.visual_container .visual_wrapper .left.switch {
text-align: center;
}
}
@media screen and (max-width: 1000px) {
.visual_container .visual_wrapper .left {
float: none;
width: 100%;
padding-right: 0px;
text-align: center;
}
}
.visual_container .visual_wrapper .right {
position: relative;
float: right;
width: 55%;
margin-top: -30px;
background: #eeeeee;
padding: 15px;
z-index: 1;
}
.visual_container .visual_wrapper .right.switch {
float: left;
background: #dddddd;
}
.visual_container .visual_wrapper .right.switch .list_preview .list_preview_content a {
text-align: center;
}
.visual_container .visual_wrapper .right .list_preview {
cursor: pointer !important;
}
.visual_container .visual_wrapper .right .list_preview .list_preview_content {
border: none;
}
.visual_container .visual_wrapper .right .list_preview .list_preview_content a {
color: #555555;
text-align: center;
padding: 0px 2px;
margin-top: 3px;
font-size: 1em;
}
.visual_container .visual_wrapper .right .list_preview .list_preview_content .text {
padding: 0px 2px;
}
@media screen and (max-width: 750px) {
.visual_container .visual_wrapper .right .list_preview .list_preview_content {
border: none;
}
}
@media screen and (max-width: 1225px) {
.visual_container .visual_wrapper .right {
margin-top: 20px;
}
}
@media screen and (max-width: 1000px) {
.visual_container .visual_wrapper .right {
float: none;
width: 100%;
margin-top: 20px;
}
}
@media screen and (max-width: 1000px) {
.visual_container {
margin-top: 0px;
}
}
.list_previews {
max-width: 1500px;
margin: 0px auto;
padding: 60px;
/*
.list_wrapper { padding: $grid_padding; max-width: 1800px; margin: 0px auto; text-align: center;
.list_preview { @include grid_auto(4,3,3,2,2,1);
&.list_preview_12 {
@media screen and (max-width: $responsive_xl){ &:nth-of-type(10), &:nth-of-type(11), &:nth-of-type(12){ display: none;}}
@media screen and (max-width: $responsive_l){ &:nth-of-type(7), &:nth-of-type(8), &:nth-of-type(9){ display: none;}}
@media screen and (max-width: $responsive_m){ &:nth-of-type(7), &:nth-of-type(8){ display: none;}}
}
}
@media screen and (max-width: $responsive_xl){ padding: $grid_padding;}
@media screen and (max-width: $responsive_m){ padding: 20px 0px;}
}
*/
/*
.list_wrapper_slide { width: 100%; margin-top: 50px; padding-bottom: 20px;
.list_preview { width: 600px; max-width: 80%; margin: 0px 20px;
@media screen and (max-width: $responsive_m){ margin: 0px 5px;
.list_preview_content { border-width: 5px;}
}
}
@media screen and (max-width: $responsive_m){ margin-top: 20px;}
}
*/
}
@media screen and (max-width: 1225px) {
.list_previews {
padding: 60px 30px;
}
}
@media screen and (max-width: 750px) {
.list_previews {
padding: 10px;
}
}
@media screen and (min-width: 1351px) {
.list_previews .list_wrapper {
width: 102%;
left: -1%;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(4n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
}
@media screen and (min-width: 1226px) and (max-width: 1350px) {
.list_previews .list_wrapper {
width: 102%;
left: -1%;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(4n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
}
@media screen and (min-width: 1001px) and (max-width: 1225px) {
.list_previews .list_wrapper {
width: 102%;
left: -1%;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(4n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
}
@media screen and (min-width: 751px) and (max-width: 1000px) {
.list_previews .list_wrapper {
width: 102%;
left: -1%;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(2n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
}
@media screen and (min-width: 451px) and (max-width: 750px) {
.list_previews .list_wrapper {
width: 102%;
left: -1%;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(2n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
}
@media screen and (max-width: 450px) {
.list_previews .list_wrapper {
width: 102%;
left: -1%;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(1n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
}
@media screen and (min-width: 1351px) {
.list_previews .list_wrapper .list_preview {
position: relative;
display: inline-block;
width: 25%;
padding: 0px 1% 0px 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(4n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.list_previews .list_wrapper .list_preview.masonry-item-double {
width: 50% !important;
}
.list_previews .list_wrapper .list_preview.masonry-item-double .content_container {
width: 100%;
padding-top: 47.92%;
}
}
@media screen and (min-width: 1226px) and (max-width: 1350px) {
.list_previews .list_wrapper .list_preview {
position: relative;
display: inline-block;
width: 25%;
padding: 0px 1% 0px 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(4n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.list_previews .list_wrapper .list_preview.masonry-item-double {
width: 50% !important;
}
.list_previews .list_wrapper .list_preview.masonry-item-double .content_container {
width: 100%;
padding-top: 47.92%;
}
}
@media screen and (min-width: 1001px) and (max-width: 1225px) {
.list_previews .list_wrapper .list_preview {
position: relative;
display: inline-block;
width: 25%;
padding: 0px 1% 0px 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(4n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.list_previews .list_wrapper .list_preview.masonry-item-double {
width: 50% !important;
}
.list_previews .list_wrapper .list_preview.masonry-item-double .content_container {
width: 100%;
padding-top: 47.92%;
}
}
@media screen and (min-width: 751px) and (max-width: 1000px) {
.list_previews .list_wrapper .list_preview {
position: relative;
display: inline-block;
width: 50%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(2n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.list_previews .list_wrapper .list_preview.masonry-item-double {
width: 100% !important;
}
.list_previews .list_wrapper .list_preview.masonry-item-double .content_container {
width: 100%;
padding-top: 47.96%;
}
}
@media screen and (min-width: 451px) and (max-width: 750px) {
.list_previews .list_wrapper .list_preview {
position: relative;
display: inline-block;
width: 50%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(2n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.list_previews .list_wrapper .list_preview.masonry-item-double {
width: 100% !important;
}
.list_previews .list_wrapper .list_preview.masonry-item-double .content_container {
width: 100%;
padding-top: 47.96%;
}
}
@media screen and (max-width: 450px) {
.list_previews .list_wrapper .list_preview {
position: relative;
display: inline-block;
width: 100%;
margin-left: 0% !important;
margin-right: 0% !important;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(1n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.list_previews .list_wrapper .list_preview.masonry-item-double {
width: 200% !important;
}
.list_previews .list_wrapper .list_preview.masonry-item-double .content_container {
width: 100%;
padding-top: 47.98%;
}
}
@media screen and (max-width: 1225px) {
.list_previews .list_wrapper .list_preview.list_preview_12:nth-of-type(10), .list_previews .list_wrapper .list_preview.list_preview_12:nth-of-type(11), .list_previews .list_wrapper .list_preview.list_preview_12:nth-of-type(12) {
display: none;
}
}
@media screen and (max-width: 1000px) {
.list_previews .list_wrapper .list_preview.list_preview_12:nth-of-type(7), .list_previews .list_wrapper .list_preview.list_preview_12:nth-of-type(8), .list_previews .list_wrapper .list_preview.list_preview_12:nth-of-type(9) {
display: none;
}
}
@media screen and (max-width: 750px) {
.list_previews .list_wrapper .list_preview.list_preview_12:nth-of-type(7), .list_previews .list_wrapper .list_preview.list_preview_12:nth-of-type(8) {
display: none;
}
}
.list_previews .list_wrapper_slide .list_preview {
width: 100%;
max-width: 100%;
border: none;
}
.list_previews .list_preview {
vertical-align: top;
text-align: left;
}
.list_previews .list_preview .list_preview_content {
border: 15px solid #ffffff;
}
.list_previews .list_preview .list_preview_content .image {
line-height: 0px;
margin-bottom: 10px;
width: 100%;
padding-top: 56%;
overflow: hidden;
}
.list_previews .list_preview .list_preview_content .image .image_img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.list_previews .list_preview .list_preview_content .image img {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
-webkit-transition: 0.2s;
transition: 0.2s;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}
.list_previews .list_preview .list_preview_content .image .bg {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
padding-top: 56%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-color: #d21f3d;
background-blend-mode: luminosity;
-webkit-transition: 0.2s;
transition: 0.2s;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}
.list_previews .list_preview .list_preview_content .image .fa {
position: absolute;
top: 50%;
margin-top: -25px;
left: 0px;
width: 100%;
line-height: 50px;
font-size: 50px;
color: #ffffff;
display: block;
text-align: center;
z-index: 88;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.list_previews .list_preview .list_preview_content .image:hover {
background-size: cover;
cursor: pointer;
}
.list_previews .list_preview .list_preview_content .image:hover img, .list_previews .list_preview .list_preview_content .image:hover .image_img {
opacity: 0;
}
.list_previews .list_preview .list_preview_content .image:hover .fa {
color: #ffffff;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
font-size: 70px;
}
.list_previews .list_preview .list_preview_content a, .list_previews .list_preview .list_preview_content h2 {
font-size: 1.5em;
line-height: 1.2em;
display: block;
color: #e4004b;
}
.list_previews .list_preview .list_preview_content a a, .list_previews .list_preview .list_preview_content h2 a {
font-size: 1em;
}
.list_previews .list_preview .list_preview_content .date {
color: #A3A3A3;
display: block;
margin-bottom: 15px;
}
.list_previews .list_preview .list_preview_content .text {
height: 68px;
overflow: hidden;
}
@media screen and (max-width: 1000px) {
.list_previews .list_preview .list_preview_content .text {
height: 60px;
}
}
.list_previews .list_preview .list_preview_content .leesmeer {
display: block;
color: #e4004b;
text-decoration: underline;
margin-top: 5px;
}
/*
#personal { text-align: center; max-width: 1500px; margin: 0px auto; padding: 30px 50px;
.person { @include grid_auto(3,3,3,3,2,1); vertical-align: top; text-align: center;
.image { line-height: 0px;
img { max-width: 100%;}
.video { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: none;
video { width: 100%; height: 100%;}
}
}
.info { top: -10px; background: $red; color: $white; padding: 20px;
.name { display: block; @extend .font2_light; font-size: 2em; text-align: center;
@media screen and (max-width: $responsive_xl){ font-size: 1.8em;}
@media screen and (max-width: $responsive_l){
span {display: block;}
}
@media screen and (max-width: $responsive_m){ font-size: 1.5em;}
}
.functie { display: block; @extend .font2; text-align: center; margin-top: 5px; line-height: 1.2em;}
@media screen and (max-width: $responsive_m){ padding: 10px;}
}
.text { display: block; padding: 10px; @extend .font2;}
&:hover .video { display: block;}
}
.divider { display: none;
@media screen and (max-width: $responsive_m){ display: block;}
}
@media screen and (max-width: $responsive_l){ padding: 0px;}
}
*/
#personal {
text-align: center;
margin: 0px auto 60px auto;
max-width: 1500px;
padding: 30px 0px;
width: 100%;
}
#personal .person {
position: relative;
display: inline-block;
width: 30%;
vertical-align: top;
text-align: center;
}
@media screen and (max-width: 1225px) {
#personal .person {
width: 33%;
}
}
@media screen and (max-width: 1000px) {
#personal .person {
width: 40%;
}
}
@media screen and (max-width: 750px) {
#personal .person {
width: 50%;
}
}
@media screen and (max-width: 450px) {
#personal .person {
width: 90%;
}
}
#personal .person .image {
line-height: 0px;
}
#personal .person .image img {
max-width: 100%;
}
#personal .person .image .video {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: 0;
}
#personal .person .image .video video {
width: 100%;
height: 100%;
}
#personal .person .info {
top: -10px;
background: #e4004b;
color: #ffffff;
padding: 20px;
}
#personal .person .info .name {
display: block;
font-size: 2em;
text-align: center;
}
@media screen and (max-width: 1225px) {
#personal .person .info .name {
font-size: 1.8em;
}
}
@media screen and (max-width: 1000px) {
#personal .person .info .name span {
display: block;
}
}
@media screen and (max-width: 750px) {
#personal .person .info .name {
font-size: 1.5em;
}
}
#personal .person .info .functie {
display: block;
text-align: center;
margin-top: 5px;
line-height: 1.2em;
}
@media screen and (max-width: 750px) {
#personal .person .info {
padding: 10px;
}
}
#personal .person .text {
display: block;
padding: 10px;
}
#personal .person:hover .video {
opacity: 1;
}
#personal .divider {
display: none;
}
@media screen and (max-width: 750px) {
#personal .divider {
display: block;
}
}
@media screen and (max-width: 1000px) {
#personal {
padding: 0px;
}
}
.banner_personal .text a {
color: #ffffff !important;
}
.banner_personal .text span {
display: block;
font-size: 0.45em;
padding: 15px 20px 0px 20px;
line-height: 1.2em;
max-width: 800px;
margin: 0px auto;
}
@media screen and (max-width: 1000px) {
.banner_personal .text span {
font-size: 0.5em;
}
}
#personal_next, #personal_prev {
color: #e4004b;
background: #ffffff;
width: 60px;
height: 60px;
font-size: 40px;
line-height: 55px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
z-index: 2;
cursor: pointer;
}
#personal_next#personal_next, #personal_prev#personal_next {
right: 0px;
}
#personal_next#personal_prev, #personal_prev#personal_prev {
left: 0px;
}
#footer {
background: #f5f5f5;
padding: 60px 0px;
margin-top: 60px;
text-align: center;
}
#footer .footer_item {
vertical-align: top;
text-align: left;
}
@media screen and (min-width: 1351px) {
#footer .footer_item {
position: relative;
display: inline-block;
width: 33.3333333333%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(3n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
#footer .footer_item.masonry-item-double {
width: 66.6666666667% !important;
}
#footer .footer_item.masonry-item-double .content_container {
width: 100%;
padding-top: 47.94%;
}
}
@media screen and (min-width: 1226px) and (max-width: 1350px) {
#footer .footer_item {
position: relative;
display: inline-block;
width: 33.3333333333%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(3n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
#footer .footer_item.masonry-item-double {
width: 66.6666666667% !important;
}
#footer .footer_item.masonry-item-double .content_container {
width: 100%;
padding-top: 47.94%;
}
}
@media screen and (min-width: 1001px) and (max-width: 1225px) {
#footer .footer_item {
position: relative;
display: inline-block;
width: 33.3333333333%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(3n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
#footer .footer_item.masonry-item-double {
width: 66.6666666667% !important;
}
#footer .footer_item.masonry-item-double .content_container {
width: 100%;
padding-top: 47.94%;
}
}
@media screen and (min-width: 751px) and (max-width: 1000px) {
#footer .footer_item {
position: relative;
display: inline-block;
width: 50%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(2n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
#footer .footer_item.masonry-item-double {
width: 100% !important;
}
#footer .footer_item.masonry-item-double .content_container {
width: 100%;
padding-top: 47.96%;
}
}
@media screen and (min-width: 451px) and (max-width: 750px) {
#footer .footer_item {
position: relative;
display: inline-block;
width: 100%;
margin-left: 0% !important;
margin-right: 0% !important;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(1n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
#footer .footer_item.masonry-item-double {
width: 200% !important;
}
#footer .footer_item.masonry-item-double .content_container {
width: 100%;
padding-top: 47.98%;
}
}
@media screen and (max-width: 450px) {
#footer .footer_item {
position: relative;
display: inline-block;
width: 100%;
margin-left: 0% !important;
margin-right: 0% !important;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(1n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
#footer .footer_item.masonry-item-double {
width: 200% !important;
}
#footer .footer_item.masonry-item-double .content_container {
width: 100%;
padding-top: 47.98%;
}
}
#footer .footer_item .h2, #footer .footer_item .visual_container .visual_wrapper .right .list_preview .list_preview_content a, .visual_container .visual_wrapper .right .list_preview .list_preview_content #footer .footer_item a {
font-size: 1.5em;
margin-bottom: 10px;
color: #e4004b;
}
#footer .footer_item a {
display: block;
font-size: 1em;
line-height: 1.1em;
margin-bottom: 7px;
}
#footer .footer_item a:hover {
color: #e4004b;
}
@media screen and (max-width: 1000px) {
#footer .footer_item {
font-size: 1.1em;
}
#footer .footer_item:nth-of-type(2) {
display: none;
}
}
@media screen and (max-width: 750px) {
#footer .footer_item {
text-align: center;
margin-bottom: 15px !important;
}
#footer .footer_item .h2, #footer .footer_item .visual_container .visual_wrapper .right .list_preview .list_preview_content a, .visual_container .visual_wrapper .right .list_preview .list_preview_content #footer .footer_item a {
display: none;
}
#footer .footer_item:nth-of-type(1), #footer .footer_item:nth-of-type(2) {
display: none;
}
}
#footer a.fab {
display: inline-block;
margin: 0px 3px;
font-size: 2em;
color: #555555;
}
#footer a.fab:hover {
color: #e4004b;
}
@media screen and (max-width: 1000px) {
#footer {
margin-top: 0px;
padding: 2.4em 0px 1.6em 0px;
}
}
.chatbot {
position: fixed;
bottom: 0px;
right: 5%;
width: 400px;
max-width: 90%;
background: #ffffff;
box-shadow: 2px -2px 8px rgba(0, 0, 0, 0.2);
z-index: 999;
display: none;
}
.chatbot .title {
background: #f2f2f2;
padding: 20px 30px;
font-size: 1.7em;
line-height: 1.2em;
color: #636363;
}
.chatbot .title a.fa {
position: absolute;
top: 25px;
right: 25px;
color: #e4004b;
}
.chatbot .geenchatbot {
position: absolute;
width: 200px;
height: 320px;
background: url(img/layout/geenchatbot.png) center bottom no-repeat;
background-size: 100% auto;
bottom: 0px;
left: -175px;
}
.chatbot .text {
padding: 20px 30px 0px 30px;
color: #777777;
font-size: 14px;
line-height: 20px;
}
.chatbot .contactinfo {
color: #e4004b;
padding: 20px 30px;
font-size: 1.25em;
line-height: 1.5em;
}
.chatbot .contactinfo a {
color: #e4004b !important;
}
.chatbot a.contact {
display: inline-block;
padding: 10px 20px;
background: #e4004b;
color: #ffffff;
margin: 0px 30px 30px 30px;
font-size: 1.2em;
}
@media screen and (max-width: 750px) {
.chatbot {
display: none;
}
}
.contact_bedankt {
display: block;
width: 100%;
text-align: center;
color: #e4004b;
font-size: 1.2em;
line-height: 1.2em;
}
.pager_nav {
text-align: center;
margin: 1.6em auto;
}
.pager_nav .h2, .pager_nav .visual_container .visual_wrapper .right .list_preview .list_preview_content a, .visual_container .visual_wrapper .right .list_preview .list_preview_content .pager_nav a {
display: inline-block;
}
.pager_nav a, .pager_nav .active {
display: inline-block;
font-size: 1.5em;
text-transform: uppercase;
background: none;
margin: 0px 20px 0px 20px;
text-align: center;
color: #171717;
}
.pager_nav a:hover, .pager_nav .active:hover {
color: #e4004b;
}
.pager_nav a.active, .pager_nav .active.active {
background: #e4004b;
color: #ffffff;
}
.pager_nav a span, .pager_nav .active span {
font-size: 18px;
margin: 0px 5px;
}
.pager_nav a.pager_next, .pager_nav .active.pager_next {
margin-right: 0px;
}
.pager_nav a.pager_prev, .pager_nav .active.pager_prev {
margin-left: 0px;
}
@media screen and (max-width: 750px) {
.pager_nav a, .pager_nav .active {
font-size: 1.2em;
}
.pager_nav a span, .pager_nav .active span {
top: 0px;
font-size: 14px;
}
}
.pager_nav .desc {
display: inline-block;
margin-right: 25px;
line-height: 30px;
top: -2px;
display: none;
}
.youtube_container {
width: 100%;
padding-top: 56%;
margin: 15px 0px 0px 0px;
}
.youtube_container .youtube {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.soundcloud_container {
width: 100%;
margin: 15px 0px 0px 0px;
}
.soundcloud_container .soundcloud {
position: relative;
display: block;
width: 240px;
margin: 0px auto;
border: 1px solid #dddddd;
height: 45px;
padding: 10px;
box-sizing: border-box;
background: #eeeeee;
}
#popup_melding {
position: relative;
text-align: center;
padding: 40px 20px 20px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#popup_melding .h2, #popup_melding .visual_container .visual_wrapper .right .list_preview .list_preview_content a, .visual_container .visual_wrapper .right .list_preview .list_preview_content #popup_melding a {
position: relative;
display: inline-block;
font-size: 2em;
line-height: 1.2em;
margin-bottom: 20px;
}
#popup_melding .h2 .fa, #popup_melding .visual_container .visual_wrapper .right .list_preview .list_preview_content a .fa, .visual_container .visual_wrapper .right .list_preview .list_preview_content #popup_melding a .fa {
display: block;
color: #e4004b;
font-size: 50px;
text-align: center;
margin-bottom: 10px;
}
.popup_content {
position: relative;
width: 90%;
max-width: 850px;
padding: 30px;
}
.popup_content .h2, .popup_content .visual_container .visual_wrapper .right .list_preview .list_preview_content a, .visual_container .visual_wrapper .right .list_preview .list_preview_content .popup_content a {
font-size: 2em;
line-height: 1em;
margin-bottom: 20px;
}
@media screen and (max-width: 750px) {
.popup_content {
padding: 5%;
}
}
.button_container {
margin-top: 1.6em;
text-align: center;
}
a.button {
position: relative;
display: inline-block;
margin: 0px auto;
margin-top: 30px;
padding: 15px 25px;
background: #e4004b;
border: none;
text-transform: uppercase;
color: #ffffff !important;
font-size: 2em;
cursor: pointer;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
@media screen and (max-width: 1000px) {
a.button {
font-size: 1.7em;
margin-bottom: 20px;
}
}
.formulier {
text-align: center;
width: 90%;
margin: 60px auto 0px auto;
display: block;
clear: both;
}
.formulier form {
max-width: 900px;
margin: 0px auto 0px auto;
font-size: 14px;
}
.formulier form .desc {
color: #ffffff;
}
.formulier form .title {
display: none;
}
.formulier form .form_title {
clear: both;
display: block;
margin-bottom: 10px;
padding: 15px 10px 0px 0px;
}
.formulier form input {
width: 48%;
padding: 10px 15px;
float: left;
border: 1px solid #ffffff;
background: #f0f0f0;
font-size: 1em;
margin: 0% 1% 2% 1%;
line-height: 1.3em;
color: #555555;
display: block;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
@media screen and (min-width: 1351px) {
.formulier form input.field_day, .formulier form input.field_month, .formulier form input.field_year {
position: relative;
display: inline-block;
width: 33.3333333333%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(3n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.formulier form input.field_day.masonry-item-double, .formulier form input.field_month.masonry-item-double, .formulier form input.field_year.masonry-item-double {
width: 66.6666666667% !important;
}
.formulier form input.field_day.masonry-item-double .content_container, .formulier form input.field_month.masonry-item-double .content_container, .formulier form input.field_year.masonry-item-double .content_container {
width: 100%;
padding-top: 47.94%;
}
}
@media screen and (min-width: 1226px) and (max-width: 1350px) {
.formulier form input.field_day, .formulier form input.field_month, .formulier form input.field_year {
position: relative;
display: inline-block;
width: 33.3333333333%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(3n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.formulier form input.field_day.masonry-item-double, .formulier form input.field_month.masonry-item-double, .formulier form input.field_year.masonry-item-double {
width: 66.6666666667% !important;
}
.formulier form input.field_day.masonry-item-double .content_container, .formulier form input.field_month.masonry-item-double .content_container, .formulier form input.field_year.masonry-item-double .content_container {
width: 100%;
padding-top: 47.94%;
}
}
@media screen and (min-width: 1001px) and (max-width: 1225px) {
.formulier form input.field_day, .formulier form input.field_month, .formulier form input.field_year {
position: relative;
display: inline-block;
width: 33.3333333333%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(3n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.formulier form input.field_day.masonry-item-double, .formulier form input.field_month.masonry-item-double, .formulier form input.field_year.masonry-item-double {
width: 66.6666666667% !important;
}
.formulier form input.field_day.masonry-item-double .content_container, .formulier form input.field_month.masonry-item-double .content_container, .formulier form input.field_year.masonry-item-double .content_container {
width: 100%;
padding-top: 47.94%;
}
}
@media screen and (min-width: 751px) and (max-width: 1000px) {
.formulier form input.field_day, .formulier form input.field_month, .formulier form input.field_year {
position: relative;
display: inline-block;
width: 33.3333333333%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(3n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.formulier form input.field_day.masonry-item-double, .formulier form input.field_month.masonry-item-double, .formulier form input.field_year.masonry-item-double {
width: 66.6666666667% !important;
}
.formulier form input.field_day.masonry-item-double .content_container, .formulier form input.field_month.masonry-item-double .content_container, .formulier form input.field_year.masonry-item-double .content_container {
width: 100%;
padding-top: 47.94%;
}
}
@media screen and (min-width: 451px) and (max-width: 750px) {
.formulier form input.field_day, .formulier form input.field_month, .formulier form input.field_year {
position: relative;
display: inline-block;
width: 33.3333333333%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(3n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.formulier form input.field_day.masonry-item-double, .formulier form input.field_month.masonry-item-double, .formulier form input.field_year.masonry-item-double {
width: 66.6666666667% !important;
}
.formulier form input.field_day.masonry-item-double .content_container, .formulier form input.field_month.masonry-item-double .content_container, .formulier form input.field_year.masonry-item-double .content_container {
width: 100%;
padding-top: 47.94%;
}
}
@media screen and (max-width: 450px) {
.formulier form input.field_day, .formulier form input.field_month, .formulier form input.field_year {
position: relative;
display: inline-block;
width: 33.3333333333%;
padding: 0px 1% 2% 1% !important;
/*
position: relative;
display: inline-block;
//float: left;
//width: (($grid_org * (100 - (($grid - 1) * $margin))) / 12) * 1%;
//width: ((100 - (($grid - 1) * $margin)) / $grid) * 1%;
@if($padding > 0){
width: floor(((((100 / $grid) - $margin)) + ($margin / $grid))) * 0.99%;
} @else {
//width: ((((100 / $grid) - $margin)) + ($margin / $grid)) * 1%;
width: ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 1%;
}
//margin: 0px $margin * 1% $margin * 1% 0px !important;
margin: 0px $margin * 0.5% $margin * 1% $margin * 0.5% !important;
&:nth-of-type(3n+1){
//clear: both;
}
@if($grid == 1){
margin-left: 0% !important;
margin-right: 0% !important;
}
&.masonry-item-double { width: ((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin)) * 1% !important;
.content_container { width: 100%; padding-top: (50 - (((((----- * 2) + ($margin))) * $margin) / -----)) * 1%;}
//.content_container { width: 100%; padding-top: (50 - (((((((((100 / $grid) - ($margin * 2))) + ($margin / $grid)) * 2) + ($margin))) * ($margin * 0.5)) / ((((100 / $grid) - ($margin * 2))) + ($margin / $grid)))) * 1.014%;}
}
*/
}
.formulier form input.field_day.masonry-item-double, .formulier form input.field_month.masonry-item-double, .formulier form input.field_year.masonry-item-double {
width: 66.6666666667% !important;
}
.formulier form input.field_day.masonry-item-double .content_container, .formulier form input.field_month.masonry-item-double .content_container, .formulier form input.field_year.masonry-item-double .content_container {
width: 100%;
padding-top: 47.94%;
}
}
.formulier form input.full {
width: 98%;
margin: 1%;
margin-bottom: 50px;
}
@media screen and (max-width: 750px) {
.formulier form input {
width: 100%;
margin: 5px 0px;
}
}
.formulier form .fa {
margin-right: 10px;
}
.formulier form textarea {
display: block;
width: 98%;
clear: both;
height: 170px;
margin: 1%;
box-sizing: border-box;
padding: 10px 10px;
border: 1px solid #ffffff;
background: #f0f0f0;
font-size: 1em;
line-height: 1.2em;
color: #555555;
resize: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
@media screen and (max-width: 750px) {
.formulier form textarea {
position: relative;
width: 100%;
margin: 10px 0px;
top: 5px;
}
}
.formulier h1 {
margin-bottom: 20px;
}
.formulier .dark {
color: #ffffff !important;
}
.formulier .dark h1 {
color: #ffffff;
}
@media screen and (max-width: 750px) {
.formulier {
margin-top: 1.6em;
}
}
.hidden {
display: none;
}
#formwrapper_1_1, #formwrapper_2_1 {
display: none;
}
a.form_button {
display: inline-block;
clear: both;
font-size: 1.3em;
width: 98%;
margin: 1%;
background: #e4004b;
padding: 15px 20px;
text-transform: uppercase;
color: #ffffff !important;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
a.form_button span {
font-size: 0.9em;
top: -1px;
}
@media screen and (max-width: 750px) {
a.form_button {
width: 100%;
margin: 5px 0px;
}
}
span.check_n {
display: block;
float: left;
cursor: pointer;
padding: 1px 10px 0px 35px;
height: 23px;
margin: 25px 2px 10px 181px;
width: 320px;
}
span.check_y {
display: block;
float: left;
cursor: pointer;
padding: 1px 10px 0px 35px;
height: 23px;
margin: 25px 2px 10px 181px;
width: 320px;
}
span.radio_bg {
display: inline-block;
top: 5px;
width: 20px;
height: 20px;
border: 5px solid #ffffff;
background: #ffffff;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
box-shadow: 0px 0px 1px 1px #666666;
margin-right: 10px;
}
span.radio_n {
display: inline-block;
cursor: pointer;
padding: 0px 7px 0px 5px;
height: 32px;
border: 1px solid #ededed;
margin: 0px 15px 0px -5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #171717;
}
span.radio_y {
display: inline-block;
cursor: pointer;
padding: 0px 7px 0px 5px;
height: 32px;
border: 1px solid #ededed;
margin: 0px 15px 0px -5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #171717;
}
span.radio_y .radio_bg {
background-color: #171717;
}
span.radio_title {
position: relative;
display: none;
float: left;
color: #ffffff;
padding: 3px 0px 0px 0px;
}
div.radio_container {
position: relative;
float: none;
width: 100%;
margin: 0px 0px 10px 0px;
text-align: center;
}
@media screen and (max-width: 750px) {
div.radio_container {
text-align: left;
padding-left: 0px;
}
div.radio_container span.radio_n, div.radio_container span.radio_y {
display: block;
}
}
ul {
padding: 0px;
margin: 0px 0px 0px 0px;
margin-left: 14px;
}
li {
padding: 0px;
margin: 0px 0px;
}
h1, .h1 {
position: relative;
display: block;
clear: both;
font-size: 3em;
line-height: 1em;
margin: 3px 0px 50px 0px;
color: #555555;
text-align: center;
}
@media screen and (max-width: 1225px) {
h1, .h1 {
font-size: 2.5em;
margin-bottom: 30px;
}
}
@media screen and (max-width: 750px) {
h1, .h1 {
font-size: 2em;
margin-bottom: 20px;
}
}
h1 span, .h1 span {
color: #555555;
}
h1.right, .h1.right {
font-size: 10em;
text-align: right;
}
h1.line, .h1.line {
text-align: center;
margin-bottom: 80px;
}
@media screen and (max-width: 750px) {
h1.line, .h1.line {
margin-bottom: 60px;
}
}
h1.line:before, .h1.line:before {
content: "";
position: absolute;
width: 100px;
height: 1px;
bottom: -30px;
left: 50%;
margin-left: -50px;
border-bottom: 1px solid #171717;
}
@media screen and (max-width: 750px) {
h1.line:before, .h1.line:before {
bottom: -30px;
}
}
h2, .h2, .visual_container .visual_wrapper .right .list_preview .list_preview_content a {
position: relative;
display: block;
clear: both;
font-size: 1.8em;
line-height: 1.1em;
margin: 0px 0px 0px 0px;
color: #555555;
}
@media screen and (max-width: 750px) {
h2, .h2, .visual_container .visual_wrapper .right .list_preview .list_preview_content a {
font-size: 1.8em;
line-height: 1.3em;
}
}
h3, .h3 {
position: relative;
display: block;
clear: both;
font-size: 2em;
text-transform: uppercase;
line-height: 1em;
margin: 0px 0px 0px 0px;
color: #555555;
}
@media screen and (max-width: 750px) {
h3, .h3 {
font-size: 1.7em;
line-height: 1.6em;
}
}
h3 b, .h3 b {
color: #171717;
}
h4, .h4 {
position: relative;
display: block;
font-size: 15px;
line-height: 1.6em;
margin: 0px 0px 0px 0px;
color: #171717;
}
.txt a {
color: #e4004b !important;
text-decoration: underline !important;
}
.txt a:hover {
color: #555555;
}
.txt b i, .txt i b, .txt em i, .txt i em, .txt strong i, .txt i strong {
text-align: center;
display: block;
padding: 10px 15% 0px 15%;
font-size: 2.2em;
line-height: 1.2em;
color: #555555;
margin-bottom: -10px;
}
@media screen and (max-width: 750px) {
.txt b i, .txt i b, .txt em i, .txt i em, .txt strong i, .txt i strong {
font-size: 2em;
padding: 10px 0% 0px 0%;
}
}
.txt h2 {
position: relative;
display: block;
clear: both;
font-size: 1.8em;
text-transform: none;
line-height: 1.1em;
margin: 0px 0px 10px 0px;
color: #e4004b;
}
@media screen and (max-width: 750px) {
.txt h2 {
font-size: 1.8em;
line-height: 1.3em;
}
}
.txt h3 {
position: relative;
display: block;
clear: both;
font-size: 1.3em;
text-transform: none;
line-height: 1.1em;
margin: 0px 0px 10px 0px;
color: #e4004b;
}
@media screen and (max-width: 750px) {
.txt h3 {
font-size: 1.7em;
line-height: 1.6em;
}
}
.txt b font, .txt font b, .txt em font, .txt font em, .txt strong font, .txt font strong {
position: relative;
display: block;
font-size: 1.5em;
margin: 10px 0px -5px 0px;
}
.txt b font i, .txt font b i, .txt em font i, .txt font em i, .txt strong font i, .txt font strong i, .txt b i font, .txt font i b, .txt em i font, .txt font i em, .txt strong i font, .txt font i strong, .txt i b font, .txt i font b, .txt i em font, .txt i font em, .txt i strong font, .txt i font strong {
position: relative;
line-height: 2em;
}
.txt i font, .txt font i {
position: relative;
display: block;
text-align: center;
color: #e4004b !important;
font-size: 1.3em;
line-height: 1.2em;
}
.txt i font a, .txt font i a {
color: #e4004b !important;
}
@media screen and (max-width: 750px) {
.txt i font, .txt font i {
text-align: left;
font-size: 1.1em;
line-height: 1.3em;
}
}
.txt u i, .txt u i {
position: relative;
font-size: 30px;
line-height: 2.4em;
color: #555555 !important;
text-align: center;
display: inline-block;
width: 100%;
padding: 35px 15%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none !important;
}
@media screen and (max-width: 750px) {
.txt u i, .txt u i {
font-size: 24px !important;
line-height: 2em;
padding-left: 5%;
padding-right: 5%;
}
}
.txt u i:before, .txt u i:before {
content: "";
position: absolute;
width: 10%;
height: 1px;
top: 10px;
left: 45%;
border-bottom: 1px solid #A3A3A3;
}
.txt u i:after, .txt u i:after {
content: "";
position: absolute;
width: 10%;
height: 1px;
bottom: 10px;
left: 45%;
border-bottom: 1px solid #A3A3A3;
}
.txt ul {
padding: 10px 20px 0px 0px;
margin: 0px;
}
.txt li {
list-style: none;
padding-left: 25px;
}
.txt li::before {
position: absolute;
top: -1px;
left: 0px;
content: "\f00c";
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
font-size: 1em;
margin-right: 10px;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
.txt img {
max-width: 100%;
}
.txt .txt_image {
position: relative;
display: block;
margin: 0.8em 0px -0.8em 0px;
line-height: 0px;
max-width: 100%;
width: 100%;
height: auto;
text-align: center;
}
.txt .txt_image.left {
float: left;
margin: 0px 2.4em 1.6em 0px;
}
.txt .txt_image.right {
float: right;
margin: 0px 0px 1.6em 2.4em;
}
@media screen and (min-width: 1001px) {
.txt .txt_image {
margin: 1.6em 0px 0px 0px;
}
.txt .txt_image.small {
width: 30% !important;
max-width: 30% !important;
}
.txt .txt_image.small.center {
margin: 0.8em auto -0.8em auto !important;
width: 70% !important;
max-width: 70% !important;
}
}
@media screen and (min-width: 751px) {
.txt .txt_image {
margin: 1.6em 0px 0px 0px;
}
.txt .txt_image.left, .txt .txt_image.right {
width: 50%;
max-width: 50%;
}
.txt .txt_image.small {
margin-top: 0.4em;
width: 50%;
max-width: 50%;
}
.txt .txt_image.small.center {
margin: 0.8em auto -0.8em auto;
width: 100%;
max-width: 100%;
}
}
.txt .txt_image img {
position: relative;
width: 100%;
height: auto;
}
.txt .txt_quote {
float: right;
display: inline-block;
padding: 20px 0px 20px 30px;
font-size: 1.5em;
line-height: 1.1em;
max-width: 50%;
}
@media screen and (max-width: 450px) {
.txt .txt_quote {
display: block;
float: none;
padding: 20px 0px 20px 0px;
max-width: 100%;
}
}
.txt .txt_button {
text-align: center;
}
.txt .txt_button a {
display: inline-block;
background: #e4004b;
color: #ffffff !important;
font-size: 1.5em;
line-break: 1em;
padding: 15px 25px;
text-decoration: none !important;
}
.txt .table {
position: relative;
display: table;
margin: 0.8em 0px;
border-collapse: collapse;
border-top: 1px solid #dddddd;
}
.txt .table:after {
content: "";
display: table;
clear: both;
}
.txt .table .table_row {
position: relative;
display: table-row;
background: rgba(255, 255, 255, 0.1);
border-bottom: 1px solid #dddddd;
}
.txt .table .table_row:nth-of-type(even) {
background: rgba(255, 255, 255, 0.15);
}
.txt .table .table_row:after {
content: "";
display: table;
clear: both;
}
.txt .table .table_row .table_cell {
position: relative;
padding: 5px 15px;
display: table-cell;
}
.txt .table .table_row .table_cell .column_title {
color: #171717;
display: none;
}
@media screen and (max-width: 750px) {
.txt .table {
display: block;
}
.txt .table .table_row {
display: block;
padding: 10px 0px;
}
.txt .table .table_row.table_row_titles {
display: none;
}
.txt .table .table_row .table_cell {
display: block;
}
.txt .table .table_row .table_cell .column_title {
display: block;
}
}
.txt_padding .txt {
padding: 0px 10%;
}
@media screen and (max-width: 1000px) {
.txt_padding .txt {
padding: 0px;
}
}
.txt_padding_left .txt {
padding: 0px 0px 0px 10%;
}
@media screen and (max-width: 1000px) {
.txt_padding_left .txt {
padding: 0px;
}
}
@media screen and (min-width: 1001px) {
.txt_padding .txt .txt_image {
margin: 0.8em 0px -0.8em -10%;
max-width: 120%;
width: 120%;
}
.txt_padding .txt .txt_image.left {
margin: 10px 2.4em 1.6em -10%;
width: 60%;
max-width: 60%;
}
.txt_padding .txt .txt_image.right {
margin: 10px -10% 1.6em 2.4em;
width: 60%;
max-width: 60%;
}
}
@media screen and (min-width: 1001px) {
.txt_padding_left .txt .txt_image {
margin: 0.8em 0px -0.8em -10%;
max-width: 110%;
width: 110%;
}
.txt_padding_left .txt .txt_image.left {
margin: 10px 2.4em 1.6em -10%;
width: 60%;
max-width: 60%;
}
.txt_padding_left .txt .txt_image.right {
margin: 10px 0px 1.6em 2.4em;
width: 55%;
max-width: 55%;
}
}
::-webkit-input-placeholder {
color: #555555;
opacity: 0.5;
font-family: "Open Sans", "Arial", sans-serif;
font-size: 1em;
}
:-moz-placeholder {
color: #555555;
opacity: 0.5;
font-family: "Open Sans", "Arial", sans-serif;
font-size: 1em;
}
::-moz-placeholder {
color: #555555;
opacity: 0.5;
font-family: "Open Sans", "Arial", sans-serif;
font-size: 1em;
}
:-ms-input-placeholder {
color: #555555;
opacity: 0.5;
font-family: "Open Sans", "Arial", sans-serif;
font-size: 1em;
}
html, body {
background: #ffffff;
font-size: 14px;
line-height: 1.6em;
color: #555555;
margin: 0px;
padding: 0px;
width: 100%;
min-width: 1350px;
height: 100%;
min-height: 100%;
}
@media screen and (max-width: 1350px) {
html, body {
min-width: 1225px;
font-size: 0.9em;
}
}
@media screen and (max-width: 1225px) {
html, body {
min-width: 1000px;
}
}
@media screen and (max-width: 1000px) {
html, body {
min-width: 750px;
}
}
@media screen and (max-width: 750px) {
html, body {
min-width: 450px;
}
}
@media screen and (max-width: 450px) {
html, body {
min-width: 280px;
}
}
html {
height: 100%;
}
p {
margin: 0px;
}
.clearboth {
clear: both;
}
.pointer {
cursor: pointer;
}
.placeholder {
display: none;
z-index: -1;
}
.appear_fade {
opacity: 0;
}
.hide_small {
display: block !important;
}
@media screen and (max-width: 1000px) {
.hide_small {
display: none !important;
}
}
@media screen and (min-width: 1001px) {
.hide_large {
display: none !important;
}
}
a:link, a:hover, a:active, a:visited {
color: #555555;
outline: none;
text-decoration: none;
}
/*# sourceMappingURL=style.css.map */