/* CSS Document */

html,body {font-family: 'Open Sans', sans-serif;}
a, a:hover {color: #007AC2;}
h2 {font-size: 1.75rem;}
h2.blue {color: #007AC2;}
h3 {font-size: 1.5rem;}
h4 {font-size: 1.25rem;}
h5 {font-size: 1.1rem;}
.h6 {font-weight: 700;}
.anchor{display: block; height: 100px; margin-top: -100px; visibility: hidden;}

.btn-intersell {background-color: #007AC2; color: #FFF;}
.btn-intersell:hover, .btn-intersell:active {background-color: #525149; color: #FFF;}
.btn-intersell-outline {background-color: #FFF; color: #007AC2; border-color:  #007AC2; border-radius: 0px;}
.btn-intersell-outline:hover, .btn-intersell-outline:active {background-color: #007AC2; color: #FFF;}

.border-intersell {border-color: #525149!important; background-color: #f4f8fc!important;}
.border-intersell h1, .border-intersell h2, .border-intersell h3, .border-intersell h4, .border-intersell h5 {color: #007AC2;}

h3.lees-verder {color: #D0043C;}

/*** Loader ***/
.page-loader {top: 0; left: 0; z-index: 2000; background-color: #FFF;}
.page-loader .loader-inner {top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.page-loader .loader-inner .cel {width: 400px;}
#loader-intersell .c-loader {fill:#D0043C; animation-name: heartbeat; animation-duration: 2s; animation-delay: 1s; animation-iteration-count: infinite; opacity: 0;}
#loader-intersell .logo25 {animation-name: heartbeat; animation-duration: 2s; animation-iteration-count: infinite; opacity: 0;}
@keyframes heartbeat {
	0%,20%,40%{transform: scale(.75); opacity: 1;}
	10%,30%{transform: scale(1);}
	50%{transform: scale(.75); opacity: 0;}
}

/*** Logo ***/
.logo-animated {fill-opacity: 0; line-height: 1; margin-top: 0px;}
*::-ms-backdrop, .logo-animated {fill-opacity: 1;}
.logo-animated svg {overflow: visible;}

.logo-animated .st0, .logo-intersell .st0  {fill:#525149;}
.logo-animated .st1, .logo-intersell .st1, #loader-intersell .logo25 .st1 {fill:#007AC2;}
.logo-animated .st2, .logo-intersell .st2 {fill:#D0043C;}
.logo-animated .st3, .logo-intersell .st3 {fill:#1D1D1B;}
.logo-animated .st4, .logo-intersell .st4, #loader-intersell .logo25 .st4 {fill:#FFFFFF;}
.logo-animated .st5, .logo-intersell .st5{fill:#058137;}
.logo-animated .st6, .logo-intersell .st6, #loader-intersell .logo25 .st6{fill:#CF043C;}
.logo-animated .st7, .logo-intersell .st7, #loader-intersell .logo25 .st7{fill:#85D0F4;}

.logo-animated .cel {animation-name: FillIn, ScaleUp; animation-duration: 0.1s, 0.5s; animation-fill-mode: forwards; animation-delay: 1s, 1s; -webkit-transform-origin: 50% 50%; transform-origin: 50%,50%;}
.logo-animated .st3 {animation-name: FillIn; animation-duration: 0.5s; animation-fill-mode: forwards;}
.logo-animated .st3.bv {animation-delay: 1.5s;}
.logo-animated .st3.i {animation-delay: 1.55s;}
.logo-animated .st3.n {animation-delay: 1.6s;}
.logo-animated .st3.t {animation-delay: 1.65s;}
.logo-animated .st3.e1 {animation-delay: 1.7s;}
.logo-animated .st3.r {animation-delay: 1.75s;}
.logo-animated .st3.s {animation-delay: 1.8s;}
.logo-animated .st3.e2 {animation-delay: 1.85s;}
.logo-animated .st3.l1 {animation-delay: 1.9s;}
.logo-animated .st3.l2 {animation-delay: 1.95s;}

.logo-animated .st1.line {animation-name: FillIn, FillUp; animation-duration: 0.1s, 1.5s; animation-delay: 2s; animation-fill-mode: forwards; -webkit-transform-origin: 43% 50%; transform-origin: 43% 50%;}

.logo-animated .st0 {animation-name: BigUp1, FillIn; animation-duration: 1.5s, 0.2s; animation-fill-mode: forwards; -webkit-transform-origin: 43% 80%; transform-origin: 43% 80%;}
.logo-animated .st0.o1 {animation-delay: 2s, 2s;}
.logo-animated .st0.n1 {animation-delay: 2s, 2.05s;}
.logo-animated .st0.d1 {animation-delay: 2s, 2.1s;}
.logo-animated .st0.e1 {animation-delay: 2s, 2.15s;}
.logo-animated .st0.r {animation-delay: 2s, 2.2s;}
.logo-animated .st0.d2 {animation-delay: 2s, 2.25s;}
.logo-animated .st0.e2 {animation-delay: 2s, 2.3s;}
.logo-animated .st0.e3 {animation-delay: 2s, 2.35s;}
.logo-animated .st0.l {animation-delay: 2s, 2.4s;}
.logo-animated .st0.v1 {animation-delay: 2s, 2.45s;}
.logo-animated .st0.a {animation-delay: 2s, 2.5s;}
.logo-animated .st0.n2 {animation-delay: 2s, 2.55s;}
.logo-animated .st0.v2 {animation-delay: 2s, 2.6s;}
.logo-animated .st0.i {animation-delay: 2s, 2.65s;}
.logo-animated .st0.n3 {animation-delay: 2s, 2.7s;}
.logo-animated .st0.k {animation-delay: 2s, 2.75s;}
.logo-animated .st0.b {animation-delay: 2s, 2.8s;}
.logo-animated .st0.o2 {animation-delay: 2s, 2.85s;}
.logo-animated .st0.u {animation-delay: 2s, 2.9s;}
.logo-animated .st0.w {animation-delay: 2s, 2.95s;}

.logo-animated .st1.b1, .logo-animated .st1.b2, .logo-animated .st2.r1, .logo-animated .st2.r2, .logo-animated .st4 {animation-name: BigUp2, FillIn; animation-duration: 0.5s, 0.2s; animation-fill-mode: forwards; -webkit-transform-origin: 43% 80%; transform-origin: 43% 80%;}
.st1.b1, .st4.b1 {animation-delay: 3s, 3s;}
.st1.b2, .st4.b2 {animation-delay: 3s, 3.1s;}
.st2.r1, .st4.r1 {animation-delay: 3s, 3.2s;}
.st2.r2, .st4.r2 {animation-delay: 3s, 3.3s;}

.logo-animated .logo25 {animation-name: vlieg2; animation-duration: 1s; animation-delay: 2s; animation-fill-mode: forwards; transform: translateY(-125px); fill-opacity: 1;}
.logo-animated .zwaanlogo {animation-name: vlieg2, vliegweg; animation-duration: 1s, 1s; animation-delay: 2s, 3.5s; animation-fill-mode: forwards; transform: translateY(-125px); fill-opacity: 1;}

.logo-animated svg {box-sizing: border-box;}
@keyframes paddUp {0% {width: 216px; padding-right: 1rem;} 65%,85% {width: 316px; padding-right: calc(1rem + 100px);} 100%{width: 216px; padding-right: 1rem;}}

@keyframes FillIn {from {fill-opacity: 0;} to {fill-opacity: 1;}}
@keyframes ScaleUp {0% {transform: scale(4,4);} 100% {transform: scale(1,1);}}
@keyframes FillUp {0% {transform: scaleX(0);} 65%,83% {transform: scaleX(1.6);} 100%{transform: scaleX(1);}}
@keyframes BigUp1 {0%,83% {transform: scale(2,2);} 100% {transform: scale(1,1);}}
@keyframes BigUp2 {0%,50% {transform: scale(2,2);} 100% {transform: scale(1,1);}}
@keyframes LogoUp {0% {margin-top: 0px;} 100% {margin-top: -12px;}}

@keyframes mRight {0% {margin-right: 32px;} 100% {margin-right: 64px;}}
@keyframes vlieg {0% {transform: matrix(1, -0.2, 0, 1, 0, -35);} 50% {transform: matrix(1, -0.1, 0, 0.75, 0, 35);} 100% {transform: matrix(1, 0, 0, 1, 0, 20);}}
@keyframes vlieg2 {0% {transform: matrix(1, 0, 0, 1, 0, -125);} 50% {transform: matrix(1, 0, 0, 1, 0, 35);} 100% {transform: matrix(1, 0, 0, 1, 0, 0);}}
@keyframes vliegweg {0% {transform: matrix(1, 0, 0, 1, 0, 0);} 50% {transform: matrix(1, 0, 0, 1, 0, 5);} 100% {transform: matrix(1, 0, 0, 1, 50, -50);}}

@keyframes togVisible {from {opacity: 0;} to {opacity: 1;}}

/*** Navbar ***/
.logo-animated, .logo-intersell {width: 216px; box-sizing: border-box; height: auto; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; padding: 0px 1rem 0px; margin-right: 32px; background-color: #FFF; z-index: 1050;}
.navbar-light {background-color: rgba(255,255,255,0.9); border-bottom: 5px solid #008332; height: 75px; align-items: flex-start; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;}
.navbar-light.scrolled {background-color: rgba(255,255,255,1); box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);}
.navbar-light .container {position: relative; align-items: flex-start; min-height: 140px;}
.navbar-light .container svg#intersellPath {position: absolute; z-index: 10;}
.navbar-light .navbar-brand {position: relative; z-index: 11;}
.navbar-light .navbar-nav {z-index: 11;}
.navbar-light .navbar-nav .nav-item {padding-bottom: 14px; position: relative; z-index: 1050;}
.navbar-light .navbar-nav .nav-link {color: #525149; padding: 0 0.5rem;}
.navbar-light .navbar-nav .active>.nav-link {color: #D0043C;}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {color: #007AC2;}
.navbar-light .navbar-nav .dropdown:hover>.dropdown-menu {display: block;}
.navbar-light .navbar-nav .dropdown .dropdown-menu {border-radius: 0px; margin: 0px; border: none; background-color: rgba(255,255,255,0.9);}
.navbar-light.scrolled .navbar-nav .dropdown .dropdown-menu {background-color: #FFF; background-image: none; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);}
.navbar-light .navbar-nav .dropdown .dropdown-menu .dropdown-item {color: #525149;}
.navbar-light .navbar-nav .dropdown .dropdown-menu .dropdown-item:focus, .navbar-light .navbar-nav .dropdown .dropdown-menu .dropdown-item:hover, .navbar-light .navbar-nav .dropdown .dropdown-menu .dropdown-item.active:hover {background-color: transparent; color: #007AC2;}
.navbar-light .navbar-nav .dropdown .dropdown-menu .dropdown-item.active, .navbar-light .navbar-nav .dropdown .dropdown-menu .dropdown-item:active {background-color: transparent; color: #D0043C;}

.navbar-light .zwaan-c {width: 100%; z-index: 1050;}
.navbar-light .zwaan-c #zwaan {width: 54px; height: auto; margin-left: 221px; transform: translateY(-35px); animation-name: vlieg; animation-duration: 2.5s; animation-fill-mode: forwards;}
.navbar-light.not-animated .zwaan-c #zwaan {animation-delay: 2s;}
.navbar-light.not-animated .logo-intersell svg {overflow: visible;}
.navbar-light.not-animated .zwaanlogo {animation-name: vliegweg; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; transform: translateY(0px); overflow: visible;}

@media (max-width: 767px) {
    .logo-animated.scrolled, .logo-intersell.scrolled {width: 175px;}
	.navbar-light.not-animated .logo-intersell {animation: LogoUp 1s 2s forwards;}
    .navbar-light.scrolled {height: 65px;}
    .navbar-light .container svg#intersellPath {
        padding-top: 55px; background: rgb(255,255,255); 
        background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 55px, rgba(255,255,255,0) 55px, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 55px, rgba(255,255,255,0) 55px, rgba(255,255,255,0) 100%);
        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 55px, rgba(255,255,255,0) 55px, rgba(255,255,255,0) 100%);}
    .navbar-light.scrolled .container svg#intersellPath {
        padding-top: 45px; 
        background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 45px, rgba(255,255,255,0) 45px, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 45px, rgba(255,255,255,0) 45px, rgba(255,255,255,0) 100%);
        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 45px, rgba(255,255,255,0) 45px, rgba(255,255,255,0) 100%);}
    .navbar-light .container svg#intersellPath #outerLijn {fill: #FFF;}
    .navbar-light .navbar-toggler {z-index: 11; margin: 20px 10px 0 0; opacity: 0; animation-name: togVisible; animation-duration: 1s; animation-fill-mode: forwards;}
    .navbar-light.animated .navbar-toggler {animation-delay: 5s;}
    .navbar-light.not-animated .navbar-toggler {animation-delay: 2.5s;}
    .navbar-light.scrolled .navbar-toggler {margin-top: 10px;}
    .navbar-light .zwaan-c #zwaan {margin-left: 210px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;}
    .navbar-light.scrolled .zwaan-c #zwaan {margin-left: 190px; margin-top: -10px;}
    .navbar-light.animated .zwaan-c #zwaan {animation-delay: 4s;}
	.logo-animated {animation: LogoUp 1s 3.5s forwards;} 
    .logo-animated .zwaanlogo {animation-name: vlieg2, vliegweg; animation-duration: 1s, 1s; animation-delay: 2s, 3s; animation-fill-mode: forwards; transform: translateY(-125px); fill-opacity: 1;}
	
    .navbar-light .navbar-nav {padding-top: 30px; background-color: #FFF; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);}
    .navbar-light .navbar-nav .nav-link {padding: 0 1rem;}
}
@media (max-width: 767px) and (orientation: landscape) {
    .navbar-light .container svg#intersellPath {
        padding-top: 40px; background: rgb(255,255,255); 
        background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40px, rgba(255,255,255,0) 40px, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40px, rgba(255,255,255,0) 40px, rgba(255,255,255,0) 100%);
        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40px, rgba(255,255,255,0) 40px, rgba(255,255,255,0) 100%);}
    .navbar-light.scrolled .container svg#intersellPath {
        padding-top: 30px; 
        background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30px, rgba(255,255,255,0) 30px, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30px, rgba(255,255,255,0) 30px, rgba(255,255,255,0) 100%);
        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30px, rgba(255,255,255,0) 30px, rgba(255,255,255,0) 100%);}
}
@media (min-width: 768px) and (max-width: 991px) {   
	.navbar-light.not-animated .logo-intersell {animation: LogoUp 1s 2s forwards;}
    .navbar-light .container svg#intersellPath {
        padding-top: 30px; background: rgb(255,255,255); 
        background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30px, rgba(255,255,255,0) 30px, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30px, rgba(255,255,255,0) 30px, rgba(255,255,255,0) 100%);
        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30px, rgba(255,255,255,0) 30px, rgba(255,255,255,0) 100%);}
    .navbar-light .container svg#intersellPath #outerLijn {fill: #FFF;}
    .navbar-light .navbar-toggler {z-index: 11; margin: 20px 20px 0 0; opacity: 0; animation-name: togVisible; animation-duration: 1s; animation-fill-mode: forwards;}
    .navbar-light.animated .navbar-toggler {animation-delay: 5s;}
    .navbar-light.not-animated .navbar-toggler {animation-delay: 2.5s;}
    .navbar-light .zwaan-c #zwaan {margin-left: 210px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;}
    .navbar-light.animated .zwaan-c #zwaan {animation-delay: 4s;}    
	.logo-animated {animation: LogoUp 1s 3.5s forwards;} 
    .logo-animated .zwaanlogo {animation-name: vlieg2, vliegweg; animation-duration: 1s, 1s; animation-delay: 2s, 3s; animation-fill-mode: forwards; transform: translateY(-125px); fill-opacity: 1;}
    .navbar-light .navbar-nav {-webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; padding-top: 55px; background-color: #FFF; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);}
    .navbar-light.scrolled .navbar-nav {padding-top: 35px;}
    .navbar-light .navbar-nav .nav-link {padding: 0 1rem;}
}
@media (min-width: 992px) {
    .logo-animated {border-left: 2px solid #e6e5e5; border-right: 2px solid #e6e5e5; animation: paddUp 1.65s 2.1s forwards, mRight 0.5s 4s forwards, LogoUp 1s 4s forwards;} 
    .logo-intersell {border-left: 2px solid #e6e5e5; border-right: 2px solid #e6e5e5; animation: mRight 0.5s 1.5s forwards, LogoUp 1s 2s forwards;}
    .navbar-light.animated .zwaan-c #zwaan {animation-delay: 4.5s;}  
    .navbar-light .container svg#intersellPath {
        padding-top: 12px; background: rgb(255,255,255); 
        background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 12px, rgba(255,255,255,0) 12px, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 12px, rgba(255,255,255,0) 12px, rgba(255,255,255,0) 100%);
        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 12px, rgba(255,255,255,0) 12px, rgba(255,255,255,0) 100%);}    
    .navbar-light .navbar-nav .nav-item {border-left: 2px solid #e6e5e5; border-right: 2px solid #e6e5e5; padding-top: 30px;}
    .navbar-light .navbar-nav .nav-link {padding: 0 0.5rem; white-space: nowrap;}
}
@media (min-width: 1200px) {
    .navbar-light .navbar-nav .nav-link {padding: 0 1rem; white-space: normal;} 
    .navbar-light .container svg#intersellPath {padding-top: 0; background: none;}
    .navbar-nav {font-size: 1.1rem; margin-top: -2px;} 
    .navbar-nav .dropdown .dropdown-menu {font-size: 1.1rem;}
    .navbar-light .navbar-nav .nav-item {border-left: 2px solid #e6e5e5; border-right: 2px solid #e6e5e5; padding-top: 30px;}
}

/*** carousel ***/
#carousel {background-color: #EEEEEE; background-image: url('../pics_site/voortdurend-verbeteren.png'); background-repeat: no-repeat; background-position: 50% 50%;}
#carousel .carousel {background-color: #FFF;}
#carousel .carousel-item .img-fluid {height: 100vh; object-fit: cover; width: 100%;}
#carousel .carousel-indicators {margin-bottom: 3rem;}
#carousel .carousel-indicators li {background-color: #D0043C;}
#carousel .carousel-indicators li.active {background-color: #FFF;}
#carousel .carousel-caption {text-align: left; left: 0; right: 0; bottom: 0; top: 30%;}
#carousel .carousel-caption .bg-intersell {background-color: rgba(208,4,60,0.8);}
#carousel .carousel-caption .btn-type {color: #FFF;}
#carousel .carousel-caption .btn-type.type1:hover, #carousel .carousel-caption .btn-type.type2:hover, #carousel .carousel-caption .btn-type.type3:hover, #carousel .carousel-caption .btn-type.type4:hover  {background-color: #007AC2; color: #FFF;}
#carousel .carousel-caption .btn-type.type1 {background-color: #662483;}
#carousel .carousel-caption .btn-type.type2 {background-color: #9C1006;}
#carousel .carousel-caption .btn-type.type3 {background-color: #3AAA35;}
#carousel .carousel-caption .btn-type.type4 {background-color: #005681;}
#carousel .carousel-caption .btn-type.type5, #carousel .carousel-caption .btn-type.type6 {background-color: #007AC2; color: #FFF;}
#carousel .carousel-caption .btn-type.type5:hover, #carousel .carousel-caption .btn-type.type6:hover {background-color: #525149; color: #FFF;}

#carousel .carousel-caption h2 {font-size: 2.5rem;}
#carousel .carousel-caption h2.werken-bij-header {max-width: 400px;}
#carousel .carousel-caption p {font-size: 1.5rem;}

#carousel .verbeteren {background-image: url('../pics_site/voortdurend-verbeteren.png'); background-repeat: no-repeat; background-position: 50% 50%; background-color: rgba(0,0,0,0.25); color: #FFF; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; transition: opacity 0.5s; transition-timing-function: ease-out; z-index: 100;}
#carousel .verbeteren.act {visibility: visible; opacity: 1;}
@media (max-width: 1199px) {#carousel .verbeteren, #carousel {background-size: 75%; background-position: 50% 75%;}}
@media (max-width: 767px) {#carousel .verbeteren, #carousel {background-size: contain;}}

.news-ticker {color: #FFF; z-index: 50; bottom: 0; margin-bottom: 0; background-color: rgba(255,255,255,0.8); height: 35px; overflow: hidden; white-space: nowrap;}
.news-ticker .ticker {height: 35px; white-space: nowrap; 
                        -webkit-animation-name: ticker; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; 
                        animation-name: ticker; animation-timing-function: linear; animation-iteration-count: infinite;}
.news-ticker .ticker .verjaardag:hover {cursor: pointer;}
.news-ticker .ticker h6 {margin: 0; text-align: center; padding: 0.5rem; background-color: #85D1F5; color: #212529;}
.news-ticker .ticker .verjaardag h6 {background-color: #D0043C; color: #FFF; animation-name: attention; animation-duration: 1s; animation-iteration-count: infinite;}
.news-ticker .ticker .verjaardag .party {padding: 0.5rem; background-color: #D0043C; color: #FFF; animation-name: attention; animation-duration: 1s; animation-iteration-count: infinite;}
.news-ticker .ticker .verjaardag .party .far {color: #FFF; animation-name: attention-far; animation-duration: 1s; animation-iteration-count: infinite;}
@keyframes attention {0% {background-color: #D0043C; transform: scale(1);} 50% {background-color: #ff0348; transform: scale(1.25);} 100% {background-color: #D0043C; transform: scale(1);}}
@-webkit-keyframes attention {0% {background-color: #D0043C; transform: scale(1);} 50% {background-color: #ff0348; transform: scale(1.25);} 100% {background-color: #D0043C; transform: scale(1);}}
@keyframes attention-far {0% {transform: scale(1);} 50% {transform: scale(1.5);} 100% {transform: scale(1);}}
@-webkit-keyframes attention-far {0% {transform: scale(1);} 50% {transform: scale(1.5);} 100% {transform: scale(1);}}

.news-ticker .ticker p {color: #212529;}
.news-ticker .ticker p .far, .news-ticker .ticker p .fas {color: #028237;}

@-webkit-keyframes ticker {
    0% {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible;}
    100% {-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}
}
@keyframes ticker {
    0% {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible;}
    100% {-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}
}

.pheader .img-fluid {object-fit: cover; object-position: bottom; width: 100%; max-height: 540px; min-height: 250px;}
@media (min-width: 576px) {.pheader .img-fluid {min-height: 350px;}}
.pheader .caption {left: 15px; bottom: 20px; z-index: 10;}
.pheader .caption .bg-intersell {background-color: rgba(208,4,60,0.8);}
.pheader .caption h1 {font-size: 1.5rem; font-weight: 400;}
@media (max-width: 767px) {.pheader .caption h1 {font-size: 1rem;}}

.werken-bij {padding-top: 75px;}
.werken-bij .img-fluid {height: calc(100vh - 75px); max-height: calc(100vh - 75px); object-fit: cover; object-position: top;}
.werken-bij .carousel-caption {text-align: left; left: 0; right: 0; bottom: 0; top: calc(30% - 75px); color: #212529;}
#carousel .werken-bij .carousel-caption {top: calc(30% - 75px);}
.werken-bij .carousel-caption h1 {font-size: 2.5rem; max-width: 400px; margin-bottom: 0;}
.werken-bij .carousel-caption .bg-intersell-white {background-color: rgba(255,255,255,0.8); font-size: 1.2rem;}
.werken-bij .carousel-caption .bg-intersell-blue {background-color: rgba(0,122,194,0.8); font-size: 1.2rem; font-weight: 700;}

@media (max-width: 767px){
    .werken-bij .carousel-caption {text-align: left; left: 0; right: 0; bottom: 25px; top: auto;}
    .werken-bij .carousel-caption h1 {font-size: 1.2rem; max-width: none;} 
    .werken-bij .carousel-caption .bg-intersell-white {font-size: 1rem;}
    .werken-bij .carousel-caption .bg-intersell-blue {font-size: 1rem;}
}
@media (min-width: 768px) and (max-width: 991px) {
    .werken-bij .carousel-caption {text-align: left; left: 0; right: 0; bottom: 0;}
    #carousel .werken-bij .carousel-caption {top: calc(45% - 75px);}
}

.custom-file-input:lang(nl) ~ .custom-file-label::after {content: "Kies";}

.bg-intersell-grey {background-color: #d9d9d7;}
.bg-intersell-blue {background-color: #f4f8fc;}

.werken-bij-page h2 {color: rgb(0,122,194);}
.werken-bij-page .card {border: 1px solid #212529;}
.werken-bij-page .card a {text-decoration: none;}
.werken-bij-page .card a:hover {background-color: #f6cdd8;}

.breadcrumb {font-size: 0.9rem;}

/*** Circ. badkamer ***/
.circ-lblue {color: #009fe3;}
.circ-dblue {color: #0069b4;}
.circ-green {color: #95c11f;}

.zwaantjes {margin-top: 20px; left: 0; animation: drijf; animation-duration: 90s; animation-delay: 0s; animation-iteration-count: infinite; animation-timing-function:ease-in-out;}
.zwaantjes #zwaantjes {width: 54px; height: auto;}
.zwaantjes #zwaantjes .zwaantje1 {animation-name: zwem; animation-duration: 2.5s; animation-delay: 0s; animation-iteration-count: infinite; animation-timing-function:ease-in-out;}
.zwaantjes #zwaantjes .zwaantje2 {animation-name: zwem; animation-duration: 2.5s; animation-delay: 0.5s; animation-iteration-count: infinite; animation-timing-function:ease-in-out;}


 @keyframes drijf {0% {left: 0;} 
                 50% {left: calc(100% - 54px);} 
                 100% {left: 0;}}

 @keyframes zwem {0% {transform: matrix(1, 0, 0, 1, 0, 0);} 
                 50% {transform: matrix(0.95, 0, 0, 0.95, 0, 15);} 
                 100% {transform: matrix(1, 0, 0, 1, 0, 0);}}

@-webkit-keyframes zwem {0% {transform: matrix(1, 0, 0, 1, 0, 0);} 
                 50% {transform: matrix(0.95, 0, 0, 0.95, 0, 15);} 
                 100% {transform: matrix(1, 0, 0, 1, 0, 0);}}

/*** Projecten ***/
.projecten .label {top: 0; background-color: rgba(208,4,60,0.8); color: #FFF; max-width: 85%;} 
.projecten .label h4 {font-size: 1.1rem;}
.projecten .label p {font-size: 0.8rem;}
.projecten .type {bottom: 0; color: #FFF; font-size: 0.8rem;}
.projecten .type.type1 {background-color: #662483;}
.projecten .type.type2 {background-color: #9C1006;}
.projecten .type.type3 {background-color: #3AAA35;}
.projecten .type.type4 {background-color: #005681;}

.page-link, .page-link:hover {color: #007AC2;}
.page-item.active .page-link {background-color: #007AC2; border-color: #007AC2;}

.mt-project {margin-top: 100px;}
@media (min-width: 768px) {
    .mt-project {margin-top: 120px;}
}
@media (min-width: 992px) {
    .mt-project {margin-top: 130px;}
}

.project-details .bg-intersell {background-color: rgba(208,4,60,0.8);}
.project-details h1 {font-size: 1.5rem; font-weight: 400;}
@media (max-width: 767px) {.project-details h1 {font-size: 1rem;}}
.project-details .owl-carousel button:focus {outline: none;}
.project-details .labels a, .project-details .labels a:hover {color: #525149;}

/*** Nieuws ***/
.nieuws h2 {color: #007AC2;}
.nieuws a {color: #525149;}
.nieuws .label {bottom: 0; background-color: rgba(255,255,255,0.8); color: #007AC2; max-width: 85%;} 
.nieuws .label h4 {font-size: 1.1rem;}
.nieuws .label p {font-size: 0.8rem;}
.nieuws .typen {top: 0; right: 15px; color: #FFF; font-size: 0.8rem; background-color: #007AC2;}

.nieuws .label2 {background-color: #FFF; margin-top: -35px;} 
.nieuws .label2 h4, .nieuws .label2 h4 a, .nieuws .label2 h4 a:hover {font-size: 1.1rem; color: #007AC2; text-decoration: none;}
.nieuws .label2 p.datum {font-size: 0.8rem;}
.nieuws .label2 a {color: #FFF;}

/*** Testimonial ***/
#testimonial .carousel-item .img-fluid {max-width: 100px;}
#testimonial .carousel-item .blockquote {font-size: 1rem;}
#testimonial .carousel-item .blockquote p:before {content: "\f10d"; font-family: 'Font Awesome 5 Free'; display: inline-block; font-weight: 900; float: left; margin-right: 10px;}
#testimonial .carousel-item .blockquote footer.blockquote-footer {background-color: transparent; font-weight: 700;}
#testimonial .carousel-item .blockquote footer cite {font-style: normal; font-weight: 400;}
#testimonial .carousel-indicators li {background-color: #e2e2e2;}
#testimonial .carousel-indicators li.active {background-color: #525149;}
@media (max-width: 767px) {#testimonial .carousel-item .blockquote {min-height: 13rem;}}
@media (min-width: 768px) {#testimonial .carousel-item .blockquote {min-height: 11.5rem;}}
@media (min-width: 992px) {#testimonial .carousel-item .blockquote {min-height: 10rem;}}
@media (min-width: 1200px) {#testimonial .carousel-item .blockquote {min-height: 8.5rem;}}

.kaart {height: 400px;}

/**** Collapse accordion ****/
.acc_intersell .card {border-radius: 0;} 
.acc_intersell .card .card-header {padding: 0;}
.acc_intersell .card .card-header h2 {margin-bottom: 0;}
.acc_intersell .card .card-header h2 .btn-intersell {border-radius: 0; background-color: #007AC2; color: #FFF;}
.acc_intersell .card .card-header h2 .btn-intersell.collapsed {background-color: #FFF; color: #007AC2;}

/*** Kerst ***/
.kerst {position: relative; min-height: 100vh; overflow-x: hidden; background-image: url('../attachments/kerst_bg.jpg'); object-fit: contain;}
.kerst h1 {font-size: 2rem;}
.kerst video {position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 0; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); filter: hue-rotate(70deg);}

/*** Footer ***/
footer {background-color: #525149; font-size: 0.9rem;}
footer a, footer a:hover {color: #FFF;}
footer .btn-sm.btn-social {width: 2rem;}
footer .dropdown-menu {font-size: 14px;}
footer .dropdown-menu h6 {color: #D0043C;}

.vertical .carousel-item-next.carousel-item-left, .vertical .carousel-item-prev.carousel-item-right {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.vertical .carousel-item-next, .vertical .active.carousel-item-right {-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100% 0);}
.vertical .carousel-item-prev, .vertical .active.carousel-item-left {-webkit-transform: translate3d(0,-100%, 0); transform: translate3d(0,-100%, 0);}