Notice: Undefined index: korting in /home/admin/domains/longlifebox.nl/public_html/dev/index.php on line 37
/* bodytextcolor is leeg */ /* bodytextcolor is leeg maar darkbackgroundcolor niet */ :root { --brandcolor-text: #fff; --brandcolor-textcolor: #fff; --primarycolor_textcolor: #fff; --lighttext: #9896b0; --primaryfont: GTWalsheim; --secondaryfont: GTWalsheim; --bodytextcolor: #22252d; --bodybackground: #fff; --btnpadding: 1.5rem 2rem; } :root {--fontsize: 62.5%} :root { --brandcolor: #208ba5; --secondarycolor: rgba(255, 173, 102, 1); --darkbackgroundcolor: #22252d; --darkbackgroundcolor-opacity-5: rgba(34, 37, 45, 0.05); --bodytextcolor-opacity-5: rgba(34, 37, 45, 0.05); --brandcolor-opacity-5: rgba(32, 139, 165, 0.05); --secondarycolor-opacity-5: rgba(255, 173, 102, 0.05); --darkbackgroundcolor-opacity-10: rgba(34, 37, 45, 0.1); --bodytextcolor-opacity-10: rgba(34, 37, 45, 0.1); --brandcolor-opacity-10: rgba(32, 139, 165, 0.1); --secondarycolor-opacity-10: rgba(255, 173, 102, 0.1); --darkbackgroundcolor-opacity-15: rgba(34, 37, 45, 0.15); --bodytextcolor-opacity-15: rgba(34, 37, 45, 0.15); --brandcolor-opacity-15: rgba(32, 139, 165, 0.15); --secondarycolor-opacity-15: rgba(255, 173, 102, 0.15); --darkbackgroundcolor-opacity-20: rgba(34, 37, 45, 0.2); --bodytextcolor-opacity-20: rgba(34, 37, 45, 0.2); --brandcolor-opacity-20: rgba(32, 139, 165, 0.2); --secondarycolor-opacity-20: rgba(255, 173, 102, 0.2); --darkbackgroundcolor-opacity-25: rgba(34, 37, 45, 0.25); --bodytextcolor-opacity-25: rgba(34, 37, 45, 0.25); --brandcolor-opacity-25: rgba(32, 139, 165, 0.25); --secondarycolor-opacity-25: rgba(255, 173, 102, 0.25); --darkbackgroundcolor-opacity-30: rgba(34, 37, 45, 0.3); --bodytextcolor-opacity-30: rgba(34, 37, 45, 0.3); --brandcolor-opacity-30: rgba(32, 139, 165, 0.3); --secondarycolor-opacity-30: rgba(255, 173, 102, 0.3); --darkbackgroundcolor-opacity-35: rgba(34, 37, 45, 0.35); --bodytextcolor-opacity-35: rgba(34, 37, 45, 0.35); --brandcolor-opacity-35: rgba(32, 139, 165, 0.35); --secondarycolor-opacity-35: rgba(255, 173, 102, 0.35); --darkbackgroundcolor-opacity-40: rgba(34, 37, 45, 0.4); --bodytextcolor-opacity-40: rgba(34, 37, 45, 0.4); --brandcolor-opacity-40: rgba(32, 139, 165, 0.4); --secondarycolor-opacity-40: rgba(255, 173, 102, 0.4); --darkbackgroundcolor-opacity-45: rgba(34, 37, 45, 0.45); --bodytextcolor-opacity-45: rgba(34, 37, 45, 0.45); --brandcolor-opacity-45: rgba(32, 139, 165, 0.45); --secondarycolor-opacity-45: rgba(255, 173, 102, 0.45); --darkbackgroundcolor-opacity-50: rgba(34, 37, 45, 0.5); --bodytextcolor-opacity-50: rgba(34, 37, 45, 0.5); --brandcolor-opacity-50: rgba(32, 139, 165, 0.5); --secondarycolor-opacity-50: rgba(255, 173, 102, 0.5); --darkbackgroundcolor-opacity-55: rgba(34, 37, 45, 0.55); --bodytextcolor-opacity-55: rgba(34, 37, 45, 0.55); --brandcolor-opacity-55: rgba(32, 139, 165, 0.55); --secondarycolor-opacity-55: rgba(255, 173, 102, 0.55); --darkbackgroundcolor-opacity-60: rgba(34, 37, 45, 0.6); --bodytextcolor-opacity-60: rgba(34, 37, 45, 0.6); --brandcolor-opacity-60: rgba(32, 139, 165, 0.6); --secondarycolor-opacity-60: rgba(255, 173, 102, 0.6); --darkbackgroundcolor-opacity-65: rgba(34, 37, 45, 0.65); --bodytextcolor-opacity-65: rgba(34, 37, 45, 0.65); --brandcolor-opacity-65: rgba(32, 139, 165, 0.65); --secondarycolor-opacity-65: rgba(255, 173, 102, 0.65); --darkbackgroundcolor-opacity-70: rgba(34, 37, 45, 0.7); --bodytextcolor-opacity-70: rgba(34, 37, 45, 0.7); --brandcolor-opacity-70: rgba(32, 139, 165, 0.7); --secondarycolor-opacity-70: rgba(255, 173, 102, 0.7); --darkbackgroundcolor-opacity-75: rgba(34, 37, 45, 0.75); --bodytextcolor-opacity-75: rgba(34, 37, 45, 0.75); --brandcolor-opacity-75: rgba(32, 139, 165, 0.75); --secondarycolor-opacity-75: rgba(255, 173, 102, 0.75); --darkbackgroundcolor-opacity-80: rgba(34, 37, 45, 0.8); --bodytextcolor-opacity-80: rgba(34, 37, 45, 0.8); --brandcolor-opacity-80: rgba(32, 139, 165, 0.8); --secondarycolor-opacity-80: rgba(255, 173, 102, 0.8); --darkbackgroundcolor-opacity-85: rgba(34, 37, 45, 0.85); --bodytextcolor-opacity-85: rgba(34, 37, 45, 0.85); --brandcolor-opacity-85: rgba(32, 139, 165, 0.85); --secondarycolor-opacity-85: rgba(255, 173, 102, 0.85); --darkbackgroundcolor-opacity-90: rgba(34, 37, 45, 0.9); --bodytextcolor-opacity-90: rgba(34, 37, 45, 0.9); --brandcolor-opacity-90: rgba(32, 139, 165, 0.9); --secondarycolor-opacity-90: rgba(255, 173, 102, 0.9); --darkbackgroundcolor-opacity-95: rgba(34, 37, 45, 0.95); --bodytextcolor-opacity-95: rgba(34, 37, 45, 0.95); --brandcolor-opacity-95: rgba(32, 139, 165, 0.95); --secondarycolor-opacity-95: rgba(255, 173, 102, 0.95); --darkbackgroundcolor-opacity-100: rgba(34, 37, 45, 1); --bodytextcolor-opacity-100: rgba(34, 37, 45, 1); --brandcolor-opacity-100: rgba(32, 139, 165, 1); --secondarycolor-opacity-100: rgba(255, 173, 102, 1); --brandcolor-lighten-5: #249dba; --brandcolor-darken-5: #1c7990; --secondarycolor-darken-5: rgba(255, 160, 77, 1); --secondarycolor-lighten-5: rgba(255, 187, 128, 1); --darkbackgroundcolor-lighten-5: #2d313c; --brandcolor-lighten-10: #28afd0; --brandcolor-darken-10: #18677a; --secondarycolor-darken-10: rgba(255, 146, 51, 1); --secondarycolor-lighten-10: rgba(255, 201, 153, 1); --darkbackgroundcolor-lighten-10: #383d4a; --brandcolor-lighten-15: #39b9d9; --brandcolor-darken-15: #145565; --secondarycolor-darken-15: rgba(255, 133, 26, 1); --secondarycolor-lighten-15: rgba(255, 214, 179, 1); --darkbackgroundcolor-lighten-15: #434959; --brandcolor-lighten-20: #4ec1dd; --brandcolor-darken-20: #0f4350; --secondarycolor-darken-20: rgba(255, 119, 0, 1); --secondarycolor-lighten-20: rgba(255, 228, 204, 1); --darkbackgroundcolor-lighten-20: #4e5567; --brandcolor-lighten-25: #64c8e1; --brandcolor-darken-25: #0b313a; --secondarycolor-darken-25: rgba(230, 107, 0, 1); --secondarycolor-lighten-25: rgba(255, 241, 230, 1); --darkbackgroundcolor-lighten-25: #596176; --brandcolor-lighten-30: #79d0e5; --brandcolor-darken-30: #071f25; --secondarycolor-darken-30: rgba(204, 95, 0, 1); --secondarycolor-lighten-30: rgba(255, 255, 255, 1); --darkbackgroundcolor-lighten-30: #646d84; --brandcolor-lighten-35: #8ed7e9; --brandcolor-darken-35: #030d0f; --secondarycolor-darken-35: rgba(179, 83, 0, 1); --secondarycolor-lighten-35: rgba(255, 255, 255, 1); --darkbackgroundcolor-lighten-35: #6f7992; --brandcolor-lighten-40: #a4dfed; --brandcolor-darken-40: #000; --secondarycolor-darken-40: rgba(153, 71, 0, 1); --secondarycolor-lighten-40: rgba(255, 255, 255, 1); --darkbackgroundcolor-lighten-40: #7e869d; --brandcolor-lighten-45: #b9e6f1; --brandcolor-darken-45: #000; --secondarycolor-darken-45: rgba(128, 60, 0, 1); --secondarycolor-lighten-45: rgba(255, 255, 255, 1); --darkbackgroundcolor-lighten-45: #8c94a8; --brandcolor-lighten-50: #ceeef6; --brandcolor-darken-50: #000; --secondarycolor-darken-50: rgba(102, 48, 0, 1); --secondarycolor-lighten-50: rgba(255, 255, 255, 1); --darkbackgroundcolor-lighten-50: #9ba1b3; --brandcolor-lighten-55: #e4f5fa; --brandcolor-darken-55: #000; --secondarycolor-darken-55: rgba(77, 36, 0, 1); --secondarycolor-lighten-55: rgba(255, 255, 255, 1); --darkbackgroundcolor-lighten-55: #a9afbe; --brandcolor-lighten-60: #f9fdfe; --brandcolor-darken-60: #000; --secondarycolor-darken-60: rgba(51, 24, 0, 1); --secondarycolor-lighten-60: rgba(255, 255, 255, 1); --darkbackgroundcolor-lighten-60: #b8bdc9; --brandcolor-lighten-65: #fff; --brandcolor-darken-65: #000; --secondarycolor-darken-65: rgba(26, 12, 0, 1); --secondarycolor-lighten-65: rgba(255, 255, 255, 1); --darkbackgroundcolor-lighten-65: #c6cad4; --brandcolor-lighten-70: #fff; --brandcolor-darken-70: #000; --secondarycolor-darken-70: rgba(0, 0, 0, 1); --secondarycolor-lighten-70: rgba(255, 255, 255, 1); --darkbackgroundcolor-lighten-70: #d5d8df; --brandcolor-lighten-75: #fff; --brandcolor-darken-75: #000; --secondarycolor-darken-75: rgba(0, 0, 0, 1); --secondarycolor-lighten-75: rgba(255, 255, 255, 1); --darkbackgroundcolor-lighten-75: #e3e5ea; --brandcolor-lighten-80: #fff; --brandcolor-darken-80: #000; --secondarycolor-darken-80: rgba(0, 0, 0, 1); --secondarycolor-lighten-80: rgba(255, 255, 255, 1); --darkbackgroundcolor-lighten-80: #f2f3f5; --brandcolor-lighten-85: #fff; --brandcolor-darken-85: #000; --secondarycolor-darken-85: rgba(0, 0, 0, 1); --secondarycolor-lighten-85: rgba(255, 255, 255, 1); --darkbackgroundcolor-lighten-85: #fff; --brandcolor-lighten-90: #fff; --brandcolor-darken-90: #000; --secondarycolor-darken-90: rgba(0, 0, 0, 1); --secondarycolor-lighten-90: rgba(255, 255, 255, 1); --darkbackgroundcolor-lighten-90: #fff; --brandcolor-lighten-95: #fff; --brandcolor-darken-95: #000; --secondarycolor-darken-95: rgba(0, 0, 0, 1); --secondarycolor-lighten-95: rgba(255, 255, 255, 1); --darkbackgroundcolor-lighten-95: #fff; --brandcolor-lighten-100: #fff; --brandcolor-darken-100: #000; --secondarycolor-darken-100: rgba(0, 0, 0, 1); --secondarycolor-lighten-100: rgba(255, 255, 255, 1); --darkbackgroundcolor-lighten-100: #fff; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/account_dashboard_menu.css */ .account_dashboard_menu a { display: block; padding: 5px 15px; font-weight: bold; } .account_dashboard_menu a:hover { background: #fff; text-decoration: underline; color: var(--brandcolor) !important; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/activeonclick.css */ .active[data-activeonclick]{ border-color: var(--brandcolor); } a[data-activeonclick]:hover { border-color: var(--brandcolor) } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/animate.css */ .animate__overlay_right { position: relative; overflow: hidden; visibility: hidden; z-index: 1; transition: visibility 1s; transition-delay: 1.1s !important; } .animate__overlay_right[data-emergence="visible"] { visibility: visible; } .animate__overlay_right:after { visibility: visible; content: ''; position: absolute; height: 100%; width: 100%; z-index: 2; top: 0; right: 0; background: var(--brandcolor); transform: translate3d(-100%,0,0); transition: transform 2s; transition-delay: .5s; transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } .animate__overlay_right[data-emergence="visible"]:after { -webkit-transform: translate3d(101%,0,0); transform: translate3d(101%,0,0); } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Firefox < 16 */ @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Internet Explorer */ @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Opera < 12.1 */ @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes floatGhost { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 50% { -webkit-transform: translateY(-5px); transform: translateY(-5px) } 100% { -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes floatGhost { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 50% { -webkit-transform: translateY(-5px); transform: translateY(-5px) } 100% { -webkit-transform: translateY(0); transform: translateY(0) } } .floatGhost { -webkit-animation-name: floatGhost; animation-name: floatGhost -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/arrows.css */ .borderedbox_bottom_arrow_center { position: relative; border: var(--darkbackgroundcolor-opacity-15) 1px solid; } .borderedbox_bottom_arrow_center:after, .borderedbox_bottom_arrow_center:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .borderedbox_bottom_arrow_center:after { border-color: rgba(255, 255, 255, 0); border-top-color: #fff; border-width: 10px; margin-left: -10px; } .borderedbox_bottom_arrow_center:before { border-color: rgba(194, 225, 245, 0); border-top-color: var(--darkbackgroundcolor-opacity-15); border-width: 11px; margin-left: -11px; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/base.css */ *{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } html, body { padding: 0; margin: 0; height: 100%; width: 100%; } html { font-size: var(--fontsize); } body { font-size: 1.6rem; line-height: 1.5; background: var(--bodybackground); color: var(--bodytextcolor); font-family: var(--primaryfont); } .inhoud a { transition: .1s cubic-bezier(.19,1,.22,1); text-decoration: none; color: var(--bodytextcolor); } .inhoud a:hover { color: var(--bodytextcolor); } .inhoud section { /* opacity: 0; */ background-size: cover; background-position: center; position: relative; overflow: hidden; /* transition: ease-in-out .1s opacity; */ } .inhoud section [data-container] { opacity: 0; } p, [data-inhoud] p { margin-bottom: 2rem; } h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem; font-family: var(--secondaryfont); line-height: 1.2; color: inherit; } .inhoud .secondaryfont { font-family: var(--secondaryfont); } table { border-spacing: 0px; border-collapse: collapse; margin: 12.5px 0; } [data-ajaxdiv="shop__website_topbar"] { height: 3.8rem; } [data-logo] a { display: block; } [src="/assets/images/logo.png"] { margin-top: 1rem; padding: 1rem 0; } .fal.fa-shopping-cart .quantity { position: absolute; top: -8px; right: -11px; font-size: 1.4rem; color: #fff; font-family: var(--primaryfont); height: 1.8rem; width: 1.8rem; border-radius: 100px; background: var(--secondarycolor); } .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } #log { position: fixed; left: 0; top: 0; width: 500px; height: 100vh; z-index: 999999; padding: 0; background: #fff; display: block; box-shadow: 0 0 2rem 0 hsla(0,0%,6%,.09); overflow-y: auto; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/bg.css */ .bg__brandcolor { background: var(--brandcolor); } .bg-white { background: #fff; } .bg-white-blurred { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, .6); } .bg__darkbackground { background: var(--darkbackgroundcolor); } .bg__thirdcolor { background: var(--thirdcolor); } [data-background="gradient__1"] { background: linear-gradient(to bottom right,var(--brandcolor-lighten-10),var(--brandcolor-darken-5)); } [data-background="gradient__2"] { background: linear-gradient(to bottom right,var(--brandcolor-lighten-10),var(--secondarycolor-darken-5)); } [data-background="gradient__3"] { background: linear-gradient(to bottom, var(--brandcolor-opacity-10) 0%, var(--brandcolor-opacity-5) 27%,#fff 50%); } [data-background="gradient__4"] { background: -moz-linear-gradient(180deg, var(--secondarycolor-opacity-15) 0%, rgba(255,255,255,1) 10%); background: -webkit-linear-gradient(180deg, var(--secondarycolor-opacity-15) 0%, rgba(255,255,255,1) 10%); background: linear-gradient(180deg, var(--secondarycolor-opacity-15) 0%, rgba(255,255,255,1) 10%); } [data-background="gradient__5"] { background: linear-gradient(to right, var(--brandcolor-opacity-40) 0%,rgba(0,0,0,0) 100%); } [data-background="gradient__6"] { background: linear-gradient(to right, var(--secondarycolor-opacity-40) 0%,rgba(0,0,0,0) 100%); } .background-left-center { background-position: left center !important; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/blogpost_sharebuttons.css */ [date-sharebutton="1"]{ display: flex !important; border-radius: 50%; width: 66px; height: 66px; font-size: 25px; line-height: 75px; margin-bottom: 20px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); text-decoration: none; color: #000; transition: .4s; align-items: center; justify-content: center; margin-bottom: 2rem; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/border-radius.css */ .br2 { border-radius: .2rem; } .br3 { border-radius: .3rem; } .br5 { border-radius: .5rem; } .br10 { border-radius: 1rem; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/borders.css */ .box-bordered-2px { border: 2px var(--bodytextcolor-opacity-10) solid; border-radius: .4rem; } .border_2px_solid_bodycolor { border: 2px var(--bodytextcolor) solid; } .border_top_2px_solid_bodycolor { border-top: 2px var(--bodytextcolor) solid; } .border_bottom_2px_solid_bodycolor { border-bottom: 2px var(--bodytextcolor) solid; } .border_bottom_2px_solid_brandcolor { border-bottom: 2px var(--brandcolor) solid; } .hover__border_2px_solid_bodycolor:hover { border: 2px var(--bodytextcolor) solid; } .border__bottom_1px_opacity_20 { border-bottom: 1px var(--bodytextcolor-opacity-20) solid; } .border__bottom_2px_opacity_20 { border-bottom: 2px var(--bodytextcolor-opacity-20) solid; } .border__bottom_1px_white_opacity_20 { border-bottom: 1px rgba(255,255,255,.2) solid; } .border__bottom_3px_opacity_20 { border-bottom: 3px var(--bodytextcolor-opacity-20) solid; } .border__2px_opacity_5 { border: 2px var(--bodytextcolor-opacity-5) solid; } .border__2px_opacity_10 { border: 2px var(--bodytextcolor-opacity-10) solid; } .light-border-left-1px { border-left: 1px solid #e6e8ef; } .border-light { border: 1px solid #e6e8ef; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/breadcrumb.css */ [data-breadcrumb] { padding: 2rem 1.5rem !important; background: var(--thirdcolor) !important; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/buttons.css */ .inhoud .whiteunderlinebtn { color: #fff; border-bottom: 2px solid #fff; display: inline-flex; align-items: center; flex-wrap: wrap; text-transform: lowercase; padding: 0 0 6px 0; } .inhoud .whiteunderlinebtn:hover { color: #fff; } .inhoud .whiteunderlinebtn i { font-size: 2rem; margin-right: 2rem; } .inhoud .underlinebtn { color: var(--brandcolor); border-bottom: 2px solid var(--brandcolor); display: inline-flex; align-items: center; flex-wrap: wrap; padding: 0 0 4px 0; text-transform: lowercase; } .inhoud .underlinebtn-thirdcolor { color: var(--thirdcolor); border-bottom: 2px solid var(--thirdcolor); display: inline-flex; align-items: center; flex-wrap: wrap; padding: 0 0 6px 0; text-transform: lowercase; } .inhoud .underlinebtn span, .inhoud .underlinebtn i { color: var(--brandcolor); } .inhoud .underlinebtn:hover > *, .inhoud .underlinebtn:hover { color: var(--bodytextcolor); border-bottom-color: var(--bodytextcolor); } .underlinebtn-thirdcolor:hover span, .underlinebtn-thirdcolor:hover i { color: var(--thirdcolor-opacity-90); } .underlinebtn:hover span, .underlinebtn:hover i { color: var(--brandcolor-opacity-90); } .underlinebtn-thirdcolor i, .underlinebtn i { font-size: 2rem; margin-right: 2rem; } body .btn, header.onepagemenu .menuitems a.btn { background-color: var(--brandcolor); color: #fff ; font-family: var(--primaryfont); font-size: var(--bodyfontsize); padding: var(--btnpadding); border: none; border-radius: 3px; font-weight: bold; text-shadow: none !important; line-height: 1; cursor: pointer; position: relative; display: inline-flex; align-items: center; /*overflow: hidden;*/ text-align: center; justify-content: center; vertical-align: middle; text-decoration: none; -webkit-transition: .5s cubic-bezier(.19,1,.22,1); transition: .5s cubic-bezier(.19,1,.22,1); } body .btn.btn-secondary { background-color: var(--secondarycolor); } body .btn.btn-secondary:hover { background-color: var(--secondarycolor-lighten-5); } body .linebtn { background: transparent; color: var(--brandcolor); box-shadow: inset 0 0 0 1px var(--brandcolor); } .btn.smallbtn { font-size: 14px; } body .btn.largebtn, .btn.btn-large { font-size: 1.8rem; line-height: 1em; padding: 1.5rem 3rem; } body .btn:hover { color: var(--brandcolor-textcolor); background: var(--brandcolor-darken-5); } body .btn.ghostbtnwhite { background: transparent; box-shadow: inset 0 0 0 1px #fff; color: #fff; } body .btn.darkghostbtn { background: transparent; box-shadow: inset 0 0 0 1px var(--darkbackgroundcolor); color: var(--darkbackgroundcolor); } body .btn.coloredghostbtn { background: transparent; box-shadow: inset 0 0 0 1px var(--brandcolor); color: var(--brandcolor); } body .btn.coloredghostbtn:hover { color: var(--brandcolor-textcolor); background: var(--brandcolor); } body .btn.ghostbtn { background: none; box-shadow: inset 0 0 0 2px #d5dce3; color: var(--bodytextcolor); outline: none !important; } body .btn.ghostbtn:hover { color: var(--brandcolor); } body .btn.ghostbtn:active { background: rgba(213, 220, 227, 0.18823529411764706); color: var(--brandcolor); } body .btn__left_line { flex-direction:row; display: inline-flex; justify-content:flex-start; align-items: center; width: auto; background: var(--brandcolor); padding: 10px 1em; color: var(--brandcolor-textcolor); font-weight: 700; text-transform: uppercase; font-size: 15px; line-height: 1em; /*letter-spacing: 2px; */ } body .btn__left_line:hover { background: var(--brandcolor-lighten-5); color: var(--brandcolor-textcolor); } body .btn__left_line:hover::after { width: 0; } body .btn__left_line:hover::before { width: 4em; } body .btn__left_line:before { display: block; width: 0em; height: 2px; background: var(--brandcolor-textcolor); content: ''; margin: 0 1em 0 0; position: relative; transition: width 150ms cubic-bezier(0.42, 0, 0, 0.96); } body .btn__left_line:after { display: block; width: 4em; height: 2px; background: var(--brandcolor-textcolor); content: ''; margin: 0 0 0 1em; position: relative; transition: width 150ms cubic-bezier(0.42, 0, 0, 0.96); } .btn.btnrounded { border-radius: 1000px; } .btnwhite { color: #fff; border-color: #fff; } .btnwhite:hover { color: #fff; border-color: #fff; } .gradientbtn { transition: 150ms cubic-bezier(0.42, 0, 0, 0.96); color: #fff; background-image: linear-gradient(45deg, var(--brandcolor-darken-10),var(--brandcolor)); } .btn.thirdcolortbtn { background: var(--thirdcolor); } .btn.thirdcolortbtn:hover { background: var(--thirdcolor-darken-5); } .btn.gradientbtn:hover { color: #fff; background-image: linear-gradient(45deg, var(--brandcolor-darken-5),var(--brandcolor)); } .secondarygradientbtn { color: #fff; background-image: linear-gradient(45deg, var(--secondarycolor-darken-10),var(--secondarycolor)); -webkit-box-shadow: 0 5px 18px 0 var(--secondarycolor-opacity-40); box-shadow: 0 5px 18px 0 var(--secondarycolor-opacity-40); } body .btn.secondarygradientbtn:hover { color: #fff; background-image: linear-gradient(45deg, var(--secondarycolor),var(--secondarycolor)); -webkit-box-shadow: 0 5px 18px 0 var(--secondarycolor-opacity-50); box-shadow: 0 5px 18px 0 var(--secondarycolor-opacity-50); } .thirdcolorgradientbtn { transition: 150ms cubic-bezier(0.42, 0, 0, 0.96); color: #fff; background-image: linear-gradient(45deg, var(--thirdcolor-darken-10),var(--thirdcolor)); } .btn.thirdcolorgradientbtn:hover { color: #fff; background-image: linear-gradient(45deg, var(--thirdcolor-darken-5),var(--thirdcolor)); } .inhoud .btn[data-buttonloading], .inhoud .btn[data-buttonloading] > *, .inhoud .btn[data-buttonloading]:hover { color: #A0A0A0; background: #eee; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/buttons.loader_bar.css */ .inhoud .btn.btn__loader_bar_active { background: #eaeaea; color: #a0a0a0; } .btn .btn__loader_bar { top: 0; left: 0; height: 3px; width: 100%; position: absolute; overflow: hidden; background-color: #eaeaea; border-top-left-radius: 2px; border-top-right-radius: 2px; } .btn .btn__loader_bar:before{ display: block; position: absolute; z-index: 2; content: ""; left: 0; top: 0; width: 100%; height: 3px; background-color: #a0a0a0; animation: btn__loader_bar 1.5s linear infinite; } @keyframes btn__loader_bar { from {left: -50%; width: 30%;} 50% {width: 30%;} 70% {width: 70%;} 80% { left: 50%;} 95% {left: 120%;} to {left: 100%;} } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/checkbox.css */ /* Customize the label (the container) */ .checkbox { display: block; position: relative; padding-left: 40px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .checkboxpaymentmethods { cursor: pointer; } .solidblackborder{ border-bottom: #208ba5 solid 2px; } /* Hide the browser's default radio button */ .checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom radio button */ .checkbox .checkmark { position: absolute; top: 1px; left: 0; height: 25px; width: 25px; background-color: white; border-radius: 25px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); border: 1px solid #dfe2e6; } /* On mouse-over, add a grey background color */ .checkbox:hover input ~ .checkmark { /* background-color: #f5f5f5; */ border: 1px solid var(--brandcolor); } /* When the radio button is checked, add a blue background */ .checkbox input:checked ~ .checkmark { /* background-color: var(--brandcolor); */ } /* Create the indicator (the dot/circle - hidden when not checked) */ .checkbox .checkmark:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .checkbox input:checked ~ .checkmark:after { display: block; } /* Style the indicator (dot/circle) */ .checkbox .checkmark:after { top: 4px; left: 4px; width: 15px; height: 15px; border-radius: 50%; background: #208ba5; transform: scale(.8); } .checkbox input:checked ~ .checkmark:before, .checkbox:hover input ~ .checkmark:before { /* font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f00c"; color: #fff; font-size: 13px; position: absolute; top: 4px; left: 6px; */ } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/checkbox_ios.css */ .ios label { -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: all .3s ease; box-shadow: inset 0px 0px 0px 1px #e6e6e6; border-radius: 100px; background-color: #fff; padding: 1px; display: inline-block; width: 46px; height: 26px; position: relative; cursor: pointer; margin: 0px; vertical-align: bottom; outline: none; border: none; } .ios input { position: absolute; left: -999999px; } .ios input:checked + label { box-shadow: inset 0px 0px 0px 20px #12ca83; } .ios label:after { transition: all .3s ease-in-out; box-shadow: inset 0 1px 0 #e6e6e6, 0px 2px 2px 1px rgba(0, 0, 0, 0.2); border-radius: 100px; left: 0; content: ''; position: absolute; width: 24px; height: 24px; cursor: pointer; background-color: #fff; } .ios input:checked + label:after { transition: all .3s ease-in-out; left: 20px; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/checkout.css */ [data-checkoutpage] .nextstepwrapper { display: none; } .checkoutimage{ display: block; margin-left: auto; margin-right: auto; width: 40%; } .checkoutimagecontainer{ position: relative; text-align: center; color: black; font-size: 30px; } .bottom-left { position: absolute; bottom: 39%; left: 20%; } @media only screen and (max-width: 500px) { .checkoutimage{ width: 100%; } .bottom-left { bottom: 0; left: 0; } } @media only screen and (min-width: 500px) { .checkoutimage{ width: 60%; } .bottom-left { bottom: 0; left: 20%; } } @media only screen and (min-width: 768px) { .checkoutimage{ width: 50%; } .bottom-left { bottom: 0; left: 20%; } } @media only screen and (min-width: 992px) { .checkoutimage{ width: 40%; } } @media only screen and (min-width: 1200px) { .checkoutimage{ width: 40%; } } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/circle.css */ .circle-container { position: relative; width: 800px; height: 800px; border-radius: 50%; padding: 0; list-style: none; margin: auto; border: 2px dashed var(--brandcolor-opacity-10); display: flex; justify-content: center; align-items: center; display: -webkit-flex; flex-wrap: wrap; } .circle-container > li { display: block; position: absolute; top: 50%; left: 50%; margin: -75px; width: 150px; height: 150px; text-align: center; } .circle-container img { display: block; width: 100%; } .circle-container > div { width: 50%; text-align: center; } .circle-container > li:nth-of-type(1) { -webkit-transform: rotate(0deg) translate(400px) rotate(0deg); transform: rotate(0deg) translate(400px) rotate(0deg); } .circle-container > li:nth-of-type(2) { -webkit-transform: rotate(17.14286deg) translate(400px) rotate(-17.14286deg); transform: rotate(17.14286deg) translate(400px) rotate(-17.14286deg); } .circle-container > li:nth-of-type(3) { -webkit-transform: rotate(34.28571deg) translate(400px) rotate(-34.28571deg); transform: rotate(34.28571deg) translate(400px) rotate(-34.28571deg); } .circle-container > li:nth-of-type(4) { -webkit-transform: rotate(51.42857deg) translate(400px) rotate(-51.42857deg); transform: rotate(51.42857deg) translate(400px) rotate(-51.42857deg); } .circle-container > li:nth-of-type(5) { -webkit-transform: rotate(68.57143deg) translate(400px) rotate(-68.57143deg); transform: rotate(68.57143deg) translate(400px) rotate(-68.57143deg); } .circle-container > li:nth-of-type(6) { -webkit-transform: rotate(85.71429deg) translate(400px) rotate(-85.71429deg); transform: rotate(85.71429deg) translate(400px) rotate(-85.71429deg); } .circle-container > li:nth-of-type(7) { -webkit-transform: rotate(102.85714deg) translate(400px) rotate(-102.85714deg); transform: rotate(102.85714deg) translate(400px) rotate(-102.85714deg); } .circle-container > li:nth-of-type(8) { -webkit-transform: rotate(120deg) translate(400px) rotate(-120deg); transform: rotate(120deg) translate(400px) rotate(-120deg); } .circle-container > li:nth-of-type(9) { -webkit-transform: rotate(137.14286deg) translate(400px) rotate(-137.14286deg); transform: rotate(137.14286deg) translate(400px) rotate(-137.14286deg); } .circle-container > li:nth-of-type(10) { -webkit-transform: rotate(154.28571deg) translate(400px) rotate(-154.28571deg); transform: rotate(154.28571deg) translate(400px) rotate(-154.28571deg); } .circle-container > li:nth-of-type(11) { -webkit-transform: rotate(171.42857deg) translate(400px) rotate(-171.42857deg); transform: rotate(171.42857deg) translate(400px) rotate(-171.42857deg); } .circle-container > li:nth-of-type(12) { -webkit-transform: rotate(188.57143deg) translate(400px) rotate(-188.57143deg); transform: rotate(188.57143deg) translate(400px) rotate(-188.57143deg); } .circle-container > li:nth-of-type(13) { -webkit-transform: rotate(205.71429deg) translate(400px) rotate(-205.71429deg); transform: rotate(205.71429deg) translate(400px) rotate(-205.71429deg); } .circle-container > li:nth-of-type(14) { -webkit-transform: rotate(222.85714deg) translate(400px) rotate(-222.85714deg); transform: rotate(222.85714deg) translate(400px) rotate(-222.85714deg); } .circle-container > li:nth-of-type(15) { -webkit-transform: rotate(240deg) translate(400px) rotate(-240deg); transform: rotate(240deg) translate(400px) rotate(-240deg); } .circle-container > li:nth-of-type(16) { -webkit-transform: rotate(257.14286deg) translate(400px) rotate(-257.14286deg); transform: rotate(257.14286deg) translate(400px) rotate(-257.14286deg); } .circle-container > li:nth-of-type(17) { -webkit-transform: rotate(274.28571deg) translate(400px) rotate(-274.28571deg); transform: rotate(274.28571deg) translate(400px) rotate(-274.28571deg); } .circle-container > li:nth-of-type(18) { -webkit-transform: rotate(291.42857deg) translate(400px) rotate(-291.42857deg); transform: rotate(291.42857deg) translate(400px) rotate(-291.42857deg); } .circle-container > li:nth-of-type(19) { -webkit-transform: rotate(308.57143deg) translate(400px) rotate(-308.57143deg); transform: rotate(308.57143deg) translate(400px) rotate(-308.57143deg); } .circle-container > li:nth-of-type(20) { -webkit-transform: rotate(325.71429deg) translate(400px) rotate(-325.71429deg); transform: rotate(325.71429deg) translate(400px) rotate(-325.71429deg); } .circle-container > li:nth-of-type(21) { -webkit-transform: rotate(342.85714deg) translate(400px) rotate(-342.85714deg); transform: rotate(342.85714deg) translate(400px) rotate(-342.85714deg); } .circle-container li { display: block; max-width: 100%; width: 150px; height: 150px; /* background: green; */ /* opacity: 0.3; */ display: flex; justify-content: center; align-items: center; display: -webkit-flex; flex-wrap: wrap; } .circle-container li span { display: block; background: #fff; padding: 1px 7px; /* border: 1px #f3f3f3 solid; */ border-radius: 3px; font-size: 16px; font-weight: bold; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/clientsite__submenu.css */ [data-clientsite__submenu] { position: absolute; background: #fff; min-height: 100px; font-family: var(--primaryfont); color: var(--bodytextcolor); text-align: left; font-size: 1.6rem; min-height: 50px; min-width: 100px; border-radius: 3px; z-index: 10; box-shadow: -2px 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07); border: 1px #e8e8e8 solid; transform: scale(.85) translateY(-10%); transition: all .15s cubic-bezier(.24,.22,.015,1.56),opacity .1s ease-in-out; opacity: 0; } [data-clientsite__submenu_visible] { opacity: 1; -webkit-transform: scale(1) translate(0); transform: scale(1) translate(0); z-index: 13; } [data-clientsite__submenu]:after, [data-clientsite__submenu]:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .no_arrow[data-clientsite__submenu]:after, .no_arrow[data-clientsite__submenu]:before { display: none; } .arrow_top_right[data-clientsite__submenu]:after, .arrow_top_right[data-clientsite__submenu]:before { left: calc(100% - 17px) !important; } [data-clientsite__submenu]:before { border-color: rgba(232, 232, 232, 0); border-bottom-color: #e8e8e8; border-width: 9px; margin-left: -9px; } [data-clientsite__submenu]:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 8px; margin-left: -8px; } [data-clientsite__submenu] .bold, [data-clientsite__submenu] b { font-weight: bold; } [data-clientsite__submenu] a { transition: .1s cubic-bezier(.19,1,.22,1); text-decoration: none; /* color: var(--bodytextcolor); */ } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/colors.css */ .text-bodytextcolor, a.bodytextcolor, .bodytextcolor, a.bodytextcolor:hover { color: var(--bodytextcolor); } .bg-brandcolor { background-color: var(--brandcolor) !important; } .bg__secondarycolor, .bg-secondary { background-color: var(--secondarycolor) !important; } .bg__thirdcolor { background-color: var(--thirdcolor) !important; } .inhoud .text__secondarycolor, .inhoud .text-secondarycolor { color: var(--secondarycolor); } .inhoud .text__thirdcolor { color: var(--thirdcolor); } .inhoud .text__white, .inhoud .text-white, .inhoud .text-white > * { color: #fff; } .inhoud .text-white a:hover { color: #fff; } a.text-white:hover { color: #fff; } .inhoud .text__btncolor, .text-brandcolor { color: var(--brandcolor); } a.text-brandcolor:hover { color: var(--brandcolor-lighten-20) !important; } .inhoud .text-brandcolor { color: var(--brandcolor); } a.brandcolor:hover { color: var(--brandcolor); } .text-warning { color: red; } .bg-white { background: #fff; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/columns.css */ .columnwrapper { display: flex; align-items: flex-start; justify-content: space-between; } .columnwrapper > div { flex: 1; width: 33.33333333%; } .column-split { -webkit-column-count: 2; column-count: 2; -webkit-column-gap: 60px; column-gap: 60px; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/container.css */ [data-container] { position: relative; z-index: 1; pointer-events: none; margin-left: auto; margin-right: auto; } [data-container] > * { pointer-events: auto; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/createsite.css */ [data-setcolor] { transition: .2s cubic-bezier(0.42, 0, 0, 0.96) !important; } [data-setcolor]:hover { -webkit-transform: translate(0px, -2px); -ms-transform: translate(0px, -2px); transform: translate(0px, -2px); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/css_animations.css */ @keyframes pulse_animation { 0% { transform: scale(1); } 30% { transform: scale(1.05); } 100% { transform: scale(1); } } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/cube.css */ .box-container { display: flex; align-items: center; justify-content: center; } #box { width: 300px; height: 300px; /*margin-left: 50px; margin-top: 150px;*/ } .box-container { position: relative; -webkit-perspective: 10000px; perspective: 10000px; -webkit-transform: scale(1.3); } #box { position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, -100px) rotateX(70deg) rotateY(0deg) rotateZ(-30deg) scale(1); transform: translate3d(0, 0, -100px) rotateX(70deg) rotateY(0deg) rotateZ(-30deg) scale(1); transition: -webkit-transform 1000ms ease-out; transition: transform 1000ms ease-out; transition: transform 1000ms ease-out, -webkit-transform 1000ms ease-out; } #box .side { display: block; position: absolute; border: 2px solid hsla(217, 40%, 91%, 1); background-color: #fff; text-align: center; font-size: 50px; -webkit-backface-visibility: hidden; box-sizing: border-box; } #box .front, #box .back { width: 200px; height: 200px; line-height: 200px; } #box .right, #box .left { width: 100px; height: 200px; left: 100px; line-height: 200px; } #box .top, #box .bottom, #box .flap { width: 200px; top: 50px; line-height: 100px; } #box .top, #box .bottom { height: 100px; } #box .flap { border: none; background-color: transparent; height: 86px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; box-sizing: border-box; } #box .flap .flap-inner { position: absolute; width: 100%; height: 77px; border: 2px solid black; border-top: 1px solid black; background-color: #fff; transition: -webkit-transform 400ms ease-out; transition: transform 400ms ease-out; transition: transform 400ms ease-out, -webkit-transform 400ms ease-out; -webkit-transform-origin: top center; transform-origin: top center; box-sizing: border-box; -webkit-transform: translateY(-1px); transform: translateY(-1px); } #box .flap .round-flap { position: absolute; width: 76px; height: 76px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; overflow: hidden; transition: -webkit-transform 400ms ease-out; transition: transform 400ms ease-out; transition: transform 400ms ease-out, -webkit-transform 400ms ease-out; box-sizing: border-box; } #box .flap .round-flap .inner { border-radius: 50%; width: 200%; height: 200%; position: absolute; top: -100%; border: 2px solid black; box-sizing: border-box; background-color: #fff; } #box .flap .round-flap.one { /* background-color: rgba(255, 0, 0, 0.2); */ -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateX(-1px) translateZ(-2px); transform: rotateY(-90deg) rotateZ(90deg) translateX(-1px) translateZ(-2px); } #box .flap .round-flap.one .inner { left: -100%; } #box .flap .round-flap.two { right: 0; /* background-color: rgba(0, 255, 0, 0.2); */ -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: rotateY(90deg) rotateZ(0deg) translateX(76px) translateZ(-2px); transform: rotateY(90deg) rotateZ(0deg) translateX(76px) translateZ(-2px); } #box .flap .round-flap.two .inner { left: -100%; } #box .front { -webkit-transform: rotateY(0deg) translateZ(49px); transform: rotateY(0deg) translateZ(49px); } #box .back { -webkit-transform: rotateX(180deg) translateZ(50px); transform: rotateX(180deg) translateZ(50px); } #box .right { -webkit-transform: rotateY(90deg) translateZ(50px); transform: rotateY(90deg) translateZ(50px); } #box .left { background: hsla(217, 40%, 97%, 1); border-right: 0; border-bottom: 0; -webkit-transform: rotateY(-90deg) translateZ(150px); transform: rotateY(-90deg) translateZ(150px); } #box .top { -webkit-transform: rotateX(90deg) translateZ(100px); transform: rotateX(90deg) translateZ(100px); } #box .bottom { background: hsla(220, 43%, 94%, 1); border-top-color: transparent; -webkit-transform: rotateX(-90deg) translateZ(100px); transform: rotateX(-90deg) translateZ(100px); } #box .flap { -webkit-transform: rotateX(-90deg) translateZ(107px) translateY(-6px); transform: rotateX(-90deg) translateZ(107px) translateY(-6px); } #box.open .flap .flap-inner { -webkit-transform: rotateX(45deg) translateY(-1px); transform: rotateX(45deg) translateY(-1px); } #box.open .flap .round-flap.one { -webkit-transform: rotateY(-90deg) rotateZ(45deg) translateX(-1px) translateZ(-1px); transform: rotateY(-90deg) rotateZ(45deg) translateX(-1px) translateZ(-1px); } #box.open .flap .round-flap.two { -webkit-transform: rotateY(90deg) rotateZ(45deg) translateX(76px) translateZ(-1px); transform: rotateY(90deg) rotateZ(45deg) translateX(76px) translateZ(-1px); } #buttons { position: absolute; bottom: 15%; left: 50%; -webkit-transform: translateX(-125px); transform: translateX(-125px); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/custom.css */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { display: inline-block; -webkit-animation: pulse 2s infinite; animation: pulse 2s infinite; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/datepicker.min.css */ .datepicker--cells{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.datepicker--cell{border-radius:4px;box-sizing:border-box;cursor:pointer;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:32px;z-index:1}.datepicker--cell.-focus-{background:#f0f0f0}.datepicker--cell.-current-{color:#4EB5E6}.datepicker--cell.-current-.-focus-{color:#4a4a4a}.datepicker--cell.-current-.-in-range-{color:#4EB5E6}.datepicker--cell.-in-range-{background:rgba(92,196,239,.1);color:#4a4a4a;border-radius:0}.datepicker--cell.-in-range-.-focus-{background-color:rgba(92,196,239,.2)}.datepicker--cell.-disabled-{cursor:default;color:#aeaeae}.datepicker--cell.-disabled-.-focus-{color:#aeaeae}.datepicker--cell.-disabled-.-in-range-{color:#a1a1a1}.datepicker--cell.-disabled-.-current-.-focus-{color:#aeaeae}.datepicker--cell.-range-from-{border:1px solid rgba(92,196,239,.5);background-color:rgba(92,196,239,.1);border-radius:4px 0 0 4px}.datepicker--cell.-range-to-{border:1px solid rgba(92,196,239,.5);background-color:rgba(92,196,239,.1);border-radius:0 4px 4px 0}.datepicker--cell.-selected-,.datepicker--cell.-selected-.-current-{color:#fff;background:#5cc4ef}.datepicker--cell.-range-from-.-range-to-{border-radius:4px}.datepicker--cell.-selected-{border:none}.datepicker--cell.-selected-.-focus-{background:#45bced}.datepicker--cell:empty{cursor:default}.datepicker--days-names{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:8px 0 3px}.datepicker--day-name{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex:1;-ms-flex:1;flex:1;text-align:center;text-transform:uppercase;font-size:.8em; font-weight: bold;}.-only-timepicker- .datepicker--content,.datepicker--body,.datepicker-inline .datepicker--pointer{display:none}.datepicker--cell-day{width:14.28571%}.datepicker--cells-months{height:170px}.datepicker--cell-month{width:33.33%;height:25%}.datepicker--cells-years,.datepicker--years{height:170px}.datepicker--cell-year{width:25%;height:33.33%}.datepickers-container{position:absolute;left:0;top:0}@media print{.datepickers-container{display:none}}.datepicker{background:#fff;border:1px solid #dbdbdb;box-shadow:0 4px 12px rgba(0,0,0,.15);border-radius:4px;box-sizing:content-box;width:250px;position:absolute;left:-100000px;opacity:0;transition:opacity .3s ease,left 0s .3s,-webkit-transform .3s ease;transition:opacity .3s ease,transform .3s ease,left 0s .3s;transition:opacity .3s ease,transform .3s ease,left 0s .3s,-webkit-transform .3s ease;z-index:100}.datepicker.-from-top-{-webkit-transform:translateY(-8px);transform:translateY(-8px)}.datepicker.-from-right-{-webkit-transform:translateX(8px);transform:translateX(8px)}.datepicker.-from-bottom-{-webkit-transform:translateY(8px);transform:translateY(8px)}.datepicker.-from-left-{-webkit-transform:translateX(-8px);transform:translateX(-8px)}.datepicker.active{opacity:1;-webkit-transform:translate(0);transform:translate(0);transition:opacity .3s ease,left 0s 0s,-webkit-transform .3s ease;transition:opacity .3s ease,transform .3s ease,left 0s 0s;transition:opacity .3s ease,transform .3s ease,left 0s 0s,-webkit-transform .3s ease}.datepicker-inline .datepicker{border-color:#d7d7d7;box-shadow:none;position:static;left:auto;right:auto;opacity:1;-webkit-transform:none;transform:none}.datepicker--content{box-sizing:content-box;padding:4px}.datepicker--pointer{position:absolute;background:#fff;border-top:1px solid #dbdbdb;border-right:1px solid #dbdbdb;width:10px;height:10px;z-index:-1}.datepicker--nav-action:hover,.datepicker--nav-title:hover{background:#f0f0f0}.-top-center- .datepicker--pointer,.-top-left- .datepicker--pointer,.-top-right- .datepicker--pointer{top:calc(100% - 4px);-webkit-transform:rotate(135deg);transform:rotate(135deg)}.-right-bottom- .datepicker--pointer,.-right-center- .datepicker--pointer,.-right-top- .datepicker--pointer{right:calc(100% - 4px);-webkit-transform:rotate(225deg);transform:rotate(225deg)}.-bottom-center- .datepicker--pointer,.-bottom-left- .datepicker--pointer,.-bottom-right- .datepicker--pointer{bottom:calc(100% - 4px);-webkit-transform:rotate(315deg);transform:rotate(315deg)}.-left-bottom- .datepicker--pointer,.-left-center- .datepicker--pointer,.-left-top- .datepicker--pointer{left:calc(100% - 4px);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.-bottom-left- .datepicker--pointer,.-top-left- .datepicker--pointer{left:10px}.-bottom-right- .datepicker--pointer,.-top-right- .datepicker--pointer{right:10px}.-bottom-center- .datepicker--pointer,.-top-center- .datepicker--pointer{left:calc(50% - 10px / 2)}.-left-top- .datepicker--pointer,.-right-top- .datepicker--pointer{top:10px}.-left-bottom- .datepicker--pointer,.-right-bottom- .datepicker--pointer{bottom:10px}.-left-center- .datepicker--pointer,.-right-center- .datepicker--pointer{top:calc(50% - 10px / 2)}.datepicker--body.active{display:block}.datepicker--nav{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;border-bottom:1px solid #efefef;min-height:32px;padding:4px}.-only-timepicker- .datepicker--nav{display:none}.datepicker--nav-action,.datepicker--nav-title{display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.datepicker--nav-action{width:32px;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.datepicker--nav-action.-disabled-{visibility:hidden}.datepicker--nav-action svg{width:32px;height:32px}.datepicker--nav-action path{fill:none;stroke:#9c9c9c;stroke-width:2px}.datepicker--nav-title{border-radius:4px;padding:0 8px}.datepicker--buttons,.datepicker--time{border-top:1px solid #efefef;padding:4px}.datepicker--nav-title i{font-style:normal;color:#9c9c9c;margin-left:5px}.datepicker--nav-title.-disabled-{cursor:default;background:0 0}.datepicker--buttons{display:-webkit-flex;display:-ms-flexbox;display:flex}.datepicker--button{color:#4EB5E6;cursor:pointer;border-radius:4px;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:32px}.datepicker--button:hover{color:#4a4a4a;background:#f0f0f0}.datepicker--time{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;position:relative}.datepicker--time.-am-pm- .datepicker--time-sliders{-webkit-flex:0 1 138px;-ms-flex:0 1 138px;flex:0 1 138px;max-width:138px}.-only-timepicker- .datepicker--time{border-top:none}.datepicker--time-sliders{-webkit-flex:0 1 153px;-ms-flex:0 1 153px;flex:0 1 153px;margin-right:10px;max-width:153px}.datepicker--time-label{display:none;font-size:12px}.datepicker--time-current{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex:1;-ms-flex:1;flex:1;font-size:14px;text-align:center;margin:0 0 0 10px}.datepicker--time-current-colon{margin:0 2px 3px;line-height:1}.datepicker--time-current-hours,.datepicker--time-current-minutes{line-height:1;font-size:19px;font-family:"Century Gothic",CenturyGothic,AppleGothic,sans-serif;position:relative;z-index:1}.datepicker--time-current-hours:after,.datepicker--time-current-minutes:after{content:'';background:#f0f0f0;border-radius:4px;position:absolute;left:-2px;top:-3px;right:-2px;bottom:-2px;z-index:-1;opacity:0}.datepicker--time-current-hours.-focus-:after,.datepicker--time-current-minutes.-focus-:after{opacity:1}.datepicker--time-current-ampm{text-transform:uppercase;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;color:#9c9c9c;margin-left:6px;font-size:11px;margin-bottom:1px}.datepicker--time-row{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;font-size:11px;height:17px;background:linear-gradient(to right,#dedede,#dedede) left 50%/100% 1px no-repeat}.datepicker--time-row:first-child{margin-bottom:4px}.datepicker--time-row input[type=range]{background:0 0;cursor:pointer;-webkit-flex:1;-ms-flex:1;flex:1;height:100%;padding:0;margin:0;-webkit-appearance:none}.datepicker--time-row input[type=range]::-ms-tooltip{display:none}.datepicker--time-row input[type=range]:hover::-webkit-slider-thumb{border-color:#b8b8b8}.datepicker--time-row input[type=range]:hover::-moz-range-thumb{border-color:#b8b8b8}.datepicker--time-row input[type=range]:hover::-ms-thumb{border-color:#b8b8b8}.datepicker--time-row input[type=range]:focus{outline:0}.datepicker--time-row input[type=range]:focus::-webkit-slider-thumb{background:#5cc4ef;border-color:#5cc4ef}.datepicker--time-row input[type=range]:focus::-moz-range-thumb{background:#5cc4ef;border-color:#5cc4ef}.datepicker--time-row input[type=range]:focus::-ms-thumb{background:#5cc4ef;border-color:#5cc4ef}.datepicker--time-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid #dedede;background:#fff;cursor:pointer;transition:background .2s;margin-top:-6px}.datepicker--time-row input[type=range]::-moz-range-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid #dedede;background:#fff;cursor:pointer;transition:background .2s}.datepicker--time-row input[type=range]::-ms-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid #dedede;background:#fff;cursor:pointer;transition:background .2s}.datepicker--time-row input[type=range]::-webkit-slider-runnable-track{border:none;height:1px;cursor:pointer;color:transparent;background:0 0}.datepicker--time-row input[type=range]::-moz-range-track{border:none;height:1px;cursor:pointer;color:transparent;background:0 0}.datepicker--time-row input[type=range]::-ms-track{border:none;height:1px;cursor:pointer;color:transparent;background:0 0}.datepicker--time-row input[type=range]::-ms-fill-lower{background:0 0}.datepicker--time-row input[type=range]::-ms-fill-upper{background:0 0}.datepicker--time-row span{padding:0 12px}.datepicker--time-icon{color:#9c9c9c;border:1px solid;border-radius:50%;font-size:16px;position:relative;margin:0 5px -1px 0;width:1em;height:1em}.datepicker--time-icon:after,.datepicker--time-icon:before{content:'';background:currentColor;position:absolute}.datepicker--time-icon:after{height:.4em;width:1px;left:calc(50% - 1px);top:calc(50% + 1px);-webkit-transform:translateY(-100%);transform:translateY(-100%)}.datepicker--time-icon:before{width:.4em;height:1px;top:calc(50% + 1px);left:calc(50% - 1px)}.datepicker--cell-day.-other-month-,.datepicker--cell-year.-other-decade-{color:#dedede}.datepicker--cell-day.-other-month-:hover,.datepicker--cell-year.-other-decade-:hover{color:#c5c5c5}.-disabled-.-focus-.datepicker--cell-day.-other-month-,.-disabled-.-focus-.datepicker--cell-year.-other-decade-{color:#dedede}.-selected-.datepicker--cell-day.-other-month-,.-selected-.datepicker--cell-year.-other-decade-{color:#fff;background:#a2ddf6}.-selected-.-focus-.datepicker--cell-day.-other-month-,.-selected-.-focus-.datepicker--cell-year.-other-decade-{background:#8ad5f4}.-in-range-.datepicker--cell-day.-other-month-,.-in-range-.datepicker--cell-year.-other-decade-{background-color:rgba(92,196,239,.1);color:#ccc}.-in-range-.-focus-.datepicker--cell-day.-other-month-,.-in-range-.-focus-.datepicker--cell-year.-other-decade-{background-color:rgba(92,196,239,.2)}.datepicker--cell-day.-other-month-:empty,.datepicker--cell-year.-other-decade-:empty{background:0 0;border:none} /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/debug.css */ body.debug * { outline: 1px #d73a49 dotted; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/demo.css */ .returnmelding { /*opacity: 0;*/ transform: translateY(150%); box-shadow: -10px 0 54px 0 rgba(0,0,0,.15); transition: .5s cubic-bezier(.19,1,.22,1); z-index: 3; position: fixed; left: 0; width: 100%; bottom: 0; background: rgba(0,0,0,.6); } .returnmelding__visible { /*opacity: 1;*/ transform: translateY(0%); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/display.css */ .display-block, .block, .displayblock { display: block; } .display-none { display: none !important; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/divtoggler.css */ [data-divtoggler] [data-content__divtoggler]{ display: none; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/dragdrop_style.css */ ::selection { background: var(--brandcolor); text-shadow: none; color: var(--brandcolor-lighten-40); } html.debug * { outline: 1px red solid; } .offset75pleft { transform: translateX(-75%); } .mobilemenu_bar, .mobilemenu_sidebar { display: none; } .inhoud { min-height: 100vh; overflow: hidden; } .inhoud hr { background: #cecece; border: 0 none; color: var(--bodytextcolor); height: 1px; } .inhoud [data-promobar] a { text-decoration: underline; } b { font-weight: bold; } .wrapper { min-height: 100vh; height: auto; width: 100%; overflow: hidden; margin: 0 auto; } .inhoud .smallwrapper { position: relative; max-width: 1000px; z-index: 3; margin: 0 auto; height: auto; } .inhoud .header { overflow: hidden; width: 100%; text-align: center; height: 350px; position: relative; } .inhoud .product_price_large .cents { display: inline-block; margin-top: -.7rem; font-size: 1.4rem; line-height: 1; vertical-align: middle; } .inhoud .underlinedheader:after{ background: var(--brandcolor); bottom: 0; content: ""; display: block; height: 2px; left: 0; right: 0; margin: 20px auto; position: relative; width: 40px; } .inhoud .nomargin { margin: 0 !important; } .inhoud .nopadding { padding: 0 !important; } .columnwrapper { width: 100%; flex-wrap: wrap; display: flex; justify-content: flex-start; position: relative; } .column { position: relative; } .inhoud video { width: 100%; height: auto; } .inhoud .column img:not(.svgicon) { max-width: 100%; height: auto; } .vh50 { height:50vh; min-height: 400px; } .vh40 { height:40vh; min-height: 400px; } .h100 { height: 100%; } .vh100 { min-height:100vh; } .inhoud .line { position: absolute; left: 50%; background:#6a727c; height: 100%; top: 140px; margin-left: -1px; width: 2px; z-index: 9999; display: none; } .inhoud .themecolor { color: var(--brandcolor) !important; } .inhoud .themecolorborder { border-color: var(--brandcolor) !important; } .displayblock { display: block !important; } .displayinline { display: inline-block; } .valigncenter { vertical-align: middle; } .desktopinline{ display: inline-block; } .inhoud .btn.darkbtn { background: var(--brandcolor-lighten-10) !important; } .inhoud .circle { background: var(--brandcolor); color: var(--primarycolor_textcolor); } .fixedtransparenttopmenu { top: 0; left: 0; background: transparent; position: absolute; z-index: 3; } .scrolledfixedmenu ul.hoofdmenu li a:not(.active), .scrolledfixedmenu .headertekstblokje_stijl_1 > * { color: var(--bodytextcolor); text-shadow: none; } .scrolledfixedmenu .sub_menu { background: var(--bodybackground); z-index: 100; } .scrolledfixedmenu .sub_menu ul li a { color: var(--bodytextcolor); } .wrapper_content { position: relative; width: 100%; margin: 0 auto; } .inhoud ul, .inhoud ol { margin-left: 20px; padding-bottom: 20px; } .hidden{ opacity: 0; } .visible{ opacity: 1; } .rotate { transform: rotate(90deg) !important; -moz-transform: rotate(90deg) !important; -webkit-transform:rotate(90deg) !important; -ms-transform:rotate(90deg) !important; -o-transform:rotate(90deg) !important; } .absolute { position: absolute; } .relative { position: relative; } .required { background: rgb(255, 223, 223) !important; } .validated { background: #CFFFD6 !important; } .inhoud table td { padding: 6px 10px 6px 14px; } .buttonfacebook, .facebook { background: #3b5998; } .youtube { background-color: #e52d27; color: #fff; } .pinterest { background-color: #C92228; color: #fff; } .buttoninstagram, .instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); } .buttonlinkedin, .linkedin { background: #007bb5; } .buttongoogleplus { background: #dd4b39 } .buttonyoutube { background: #e52d27; } .buttontwitter, .twitter { background: #4099ff; } .borderradius3 { border-radius: 3px; } .scrolltop { cursor: pointer; z-index: 99999; position: absolute; background: #fff; width: 52px; height: 52px; border-radius: 50%; bottom: 30px; right: 20px; text-align: center; } .fullbackground { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: 100%; height: 100%; z-index: 1; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); background-size: cover; } .smallmap { display: block; width: 100%; height: 300px; } .fixed { position: fixed; } #tm { display: none; } .prelative { position: relative; } .translatecenter { position: absolute; left: 50%; width: 100%; padding-left: 20px; padding-right: 20px; top: 50%; -webkit-transform: translateX(-50%) translatey(-50%); -moz-transform: translateX(-50%) translatey(-50%); transform: translateX(-50%) translatey(-50%); } .mt20 { margin-top: 20px; } .mt40 { margin-top: 40px; } .mt10 { margin-top: 10px; } .mt20 { margin-top: 20px; } .mt40 { margin-top: 40px; } .eventdetails .fa { width: 20px; text-align: center; font-size: 20px; position: relative; margin-right: 4px; vertical-align: middle; line-height: 20px; top: -2px; } .eventslist label, .vacatureform label { display: block; padding: 0 10px 10px 10px; } .mobile { display: none; } .inhoud .successmessage { color: var(--bodytextcolor); border-radius: 2px; background: hsla(159, 52%, 82%, 1); padding: 15px; font-weight: normal; line-height: 19px; vertical-align: middle; border: 1px #0aa06d8c solid; } .textaligncenter { text-align: center; } .menuhtml { text-align: left; float: left; } .menuhtml h1 { padding-bottom: 0; } section .column { position: relative; } .headermenutitle img { margin: 0 !important; } .desktoptopbar .fa { font-size: 18px; display: inline-block; margin: 0 7px; vertical-align: middle; } .displaytable { display: table; } .displaytablecell { display: table-cell; } .rightcentercolumntext { display: table-cell; padding-right: 50px; } .valignmiddle { vertical-align: middle; } .displayflex { display: -ms-flex; display: -webkit-flex; display: flex; flex-shrink: 0; flex-grow: 0; } .flexwrap { flex-wrap: wrap; } .flexcenteraligncenter { display: flex; justify-content: center; align-items: center; display: -webkit-flex; flex-wrap: wrap; } .flexjustifyaligncenter { display: flex; justify-content: space-between; align-items: center; display: -webkit-flex; flex-wrap: wrap; } .flexjustifyalignleft { display: flex; justify-content: flex-start; align-items: center; display: -webkit-flex; flex-wrap: wrap; } .flexhorizontalcenter { justify-content: center; } .spacebetween { justify-content: space-between; } .alignitemsstart{ align-items: flex-start; } .alignitemscenter, .flexalignitemscenter { align-items: center; } .automargin { margin: auto; } .adminpageinfo { position: fixed; right: 10px; top: 50%; background: rgba(0,0,0,.7); padding: 5px; font-size: 12px; line-height: 12px; color: #fff; z-index: 9999; } .adminpageinfo > div { padding-bottom: 5px; } .largeicon { color: var(--brandcolor); } .largeicon i { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; font-size: 6rem; line-height: 1; border-radius: 1000px; margin: 0 auto 0 auto; } .centeredsmallcalltoaction { display: flex; justify-content: space-between; align-items: center; position: relative; background: var(--brandcolor); left: 50%; transform: translateX(-50%); max-width: 500px; padding: 30px; font-weight: bold; border-radius: 2px; } .inhoud .smallfont { font-size: 13px !important; line-height: 1.4em !important; } #quickcontactwrapper { position: fixed; bottom: 20px; right: 20px; z-index: 99; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .nopadding { padding: 0 !important; } input.transparent::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #fff; } input.transparent:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff; opacity: 1; } input.transparent::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #fff; opacity: 1; } input.transparent:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #fff; } input.transparent::-ms-input-placeholder { /* Microsoft Edge */ color: #fff; } .inhoud .shadow50px { box-shadow: 0 10px 50px rgba(0,0,0,0.11); -webkit-box-shadow: 0 10px 50px rgba(0,0,0,0.11); -moz-box-shadow: 0 10px 50px rgba(0,0,0,0.11); } .inhoud .xlargeshadow { box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07); } .inhoud .largeshadow { box-shadow: 0 1px 7px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 7px rgba(0,0,0,.1); -webkit-box-shadow: 0 1px 7px rgba(0,0,0,.1); } .inhoud .shadow25px { box-shadow: 0 0 25px rgba(40,47,60,.05), 0 20px 25px rgba(40,47,60,.05), 0 3px 4px rgba(40,47,60,.05); } .inhoud .tinywrapper { max-width: 600px; width: 100%; margin-left: auto; margin-right: auto; display: block; } .inhoud .bgwhite { background: #fff; } .inhoud [data-form] label span{ font-weight: bold; cursor: pointer; } .inhoud form textarea { min-height: 150px; } .inhoud .shadow1 { box-shadow: 0 14px 32px 0 rgba(0,0,0,.3); } .inhoud .borderradius3 { border-radius: 3px; } .inhoud .mt30{ margin-top: 30px; } .inhoud .mb30{ margin-bottom: 30px; } .inhoud .whitetext { color: #fff; } .inhoud .whitebtn { background: #fff; color: #000; border-color: #fff; } .inhoud .whitebtn:hover { cursor: pointer; background: #fff; color: #000; border-color: #fff; } .inhoud [src^="/svgicons"]{ position: relative; display: block; height: 50px; margin: auto; margin-bottom: 20px; } .inhoud .nopadding { padding: 0 !important; } .inhoud .footersocialicon, header.onepagemenu .footersocialicon, .socialicon { color: #fff; border-radius: 100%; display: flex; height: 25px !important; margin: 0 10px 0 0; position: relative; width: 25px !important; text-align: center; line-height: 25px; text-decoration: none; font-size: 15px !important; align-items: center; justify-content: center; } .inhoud .footersocialicon:hover { color: #fff; } .inhoud .itemimageasbackground { background-repeat: no-repeat; background-size: cover; background-position: center center; } .inhoud .date .fa-clock-o { margin-right: 2px; } .blurred { filter: blur(10px); } .inhoud iframe.googlemap { width: 100%; min-height: 60vh; } .inhoud .hero-title { font-size: 40px; margin-bottom: .375em; } .inhoud .h500 { height: 500px; } .inhoud .h400 { height: 400px; } .grayscale { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } .gradientfrombottom { background: linear-gradient(transparent, var(--darkbackgroundcolor) ); color: #fff; pointer-events: none; } .backgroundcover { background-size: cover; background-position: center; } .inhoud .backgroundcovercenter { background-size: cover; background-position: center center; } .inhoud .introdivpadding { min-height: 250px; padding: 25vh 0; } .inhoud .introdivpaddingsmall { padding: 10vh 0; } .inhoud .br3px { border-radius: 3px; } .inhoud .bg999 { background-color: #999; } .inhoud form { position: relative; z-index: 2; } .multiplebtnwrapper .btn:first-child { margin-right: 20px; } .inhoud .scrolltotop { position: fixed; bottom: 20px; right: 20px; opacity: 0; width: 40px; height: 40px; font-size: 18px; line-height: 1; text-align: center; background: rgba(0,0,0,.6); z-index: 120; color: #fff; border-radius: 50%; letter-spacing: 0; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 7px 15px rgba(0,0,0,.1); -webkit-transition: ease-in-out .15s all; -moz-transition: ease-in-out .15s all; -ms-transition: ease-in-out .15s all; -o-transition: ease-in-out .15s all; transition: ease-in-out .15s all; animation-duration: .15s; } .inhoud .scrolltotop:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); background: rgba(0,0,0,.8); } .inhoud .scrolltotop svg { width: 24px; height: 24px; fill: var(--primarycolor_textcolor); margin-left: 2px; } .ml15 { margin-left: 15px; } #modal h1 { margin-bottom: 20px; } body #modal { border-radius: 2px; display: none; margin: 48px 0 80px; overflow: hidden; position: relative; width: 768px; z-index: 14; box-shadow: 0 0 2rem 0 hsla(0,0%,6%,.12); background: #fff; } body #modaloverlay { align-items: flex-start; background-color: rgba(0,0,0,.6); display: flex; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); height: 100%; justify-content: center; left: 0; overflow-y: auto; position: fixed; top: 0; width: 100%; z-index: 13; } .inhoud #modal h3 { margin: 0; padding: 0; padding-bottom: 10px; } .inhoud #modal input { margin-bottom: 10px; } .inhoud .site_title_logo { max-height: 35px; margin-right: 15px; } .btnred { background-color: #ff5a5f !important; } .btnred:hover { background-color: #e45054 !important; } .inhoud .justify { text-align: justify; } #modal .client_websites a { display: block; padding: 15px; font-weight: normal; border-radius: 3px; margin-bottom: 15px; border: 1px #cecece solid; background-color: #fff; color: #323b40; } #modal .client_websites a:hover { border: 1px #323b40 solid; } #modal .client_websites .sitetitle { display: block; font-weight: bold; font-size: 20px; line-height: normal; } .inhoud .bold { font-weight: bold; } .inhoud .extrabold { font-weight: 900 !important; } .inhoud .leftcolumnfeatures img { margin-right: 10px; } .inhoud .leftcolumnfeatures { padding: 30% 0 0 20%; width: 100%; display: flex; align-items: flex-start; justify-content: center; } .inhoud .mh300 { min-height: 300px !important; } .inhoud .mh100 { min-height: 100px !important; } .inhoud .mh150 { min-height: 150px !important; } .inhoud .mh600 { min-height: 600px !important; } .inhoud .overlappingdivs { display: flex; justify-content: space-around; margin: 30px auto; } .inhoud .overlappingdivs > div { align-self:flex-start; } .inhoud .column [data-socialmedia] { min-width: 30px; } [data-socialmedia] { display: flex; min-height: 30px; } .inhoud .imagediv { position: relative; background-size: cover; background-position: center center; } .inhoud .imagediv.absolute_stretch { position: absolute; z-index: 0; } .inhoud .creatingwebsite { display: none; } .inhoud .uppercase { text-transform: uppercase; } header.onepagemenu .menuitems { min-height: 30px; } header.onepagemenu [data-socialmedia] { min-height: 30px; } .product_style_wrapper .btn { background: #43D6A7; color: #fff; font-family: circulair; font-size: 16px; padding: 10px 15px; border-radius: 3px; } .product_style_wrapper h2 { font-size: 1.7rem; text-transform: none; font-weight: 900; color: #323b40; font-family: circulair; } .product_style_wrapper p { color: #323b40; font-family: circulair; } .product_style_wrapper input { font-family: circulair !important; color: #323b40; font-size: 16px; line-height: 1; } .product_style_wrapper input:focus { border-color: #43D6A7 !important; } .product_style_wrapper .btn:hover { background: #37C597 !important; color: #fff !important; } .delay2s { -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */ animation-delay: 2s; } ul.checklist { padding: 0; margin: 0; list-style-type: none; } ul.checklist li:before { font-family: 'Font Awesome 5 Pro'; content: "\f00c"; position: absolute; left: 0; margin-left: 0; /* background: var(--brandcolor); */ background: #0BA06D; border-radius: 100px; width: 2.5rem; height: 2.5rem; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; color: #fff; } ul.checklist li { position: relative; padding-bottom: 1.7rem; padding-left: 5rem; } ul.checklist li:last-child { padding-bottom: 0; } .checklist p { position: relative; padding-bottom: 5px; padding-left: 35px; } .checklist p:before { font-family: 'FontAwesome'; content: '\f00c'; font-size: 2.5em; position: absolute; left: 0; margin-left: 0; color: var(--brandcolor); } .ml20 { margin-left: 20px; } .template { height: auto; display: block; overflow: hidden; position: relative; background: #fff; border-top-left-radius: 3px; border-top-right-radius: 3px; outline: none; display: block; background-size: 100% auto; background-position: center 25px; background-repeat: no-repeat; border: 1px solid #dce0e0; } .template .browsertoolbar { height: 25px; border-bottom: 1px solid #dce0e0; background: #fff; text-align: left; padding-left: 5px; display: flex; align-items: center; } .template .browserbutton{ display: inline-block; width: 10px; height: 10px; /* vertical-align: middle; */ line-height: normal; background: #eaeaea; border-radius: 100%; margin-left: 5px; position: relative; } .template .browserclose { background: rgba(255, 0, 0, 0.52) !important; } .template .browsermaximize { background: rgba(255, 195, 4, 0.53) !important; } .template .browserminimize { background: rgba(3, 206, 11, 0.6) !important; } .btnstyle { background: var(--brandcolor) !important; color: var(--btncolor) !important; } .btnbackgroundastextcolor { color: var(--brandcolor) !important; } .btnbackgroundcolor { background: var(--brandcolor) !important; } .w150h150 { width: 150px; height: 150px; } .ohidden { overflow: hidden; } .line_form label { display: none !important; } .line_form input, .line_form textarea { border-width: 0 0 2px 0 !important; background: transparent !important; border-radius: 0 !important; } .absolutebottomoverlaytitle { position: absolute; text-align: center; width: 100%; bottom: 0; color: #fff; left: 0; } .inhoud .favicon { width: 16px; height: 16px; display: inline-block; } a[data-templatecategory]{ display: block; padding: 10px 20px 5px 10px; font-size: 1.7rem; } .pt15 { padding-top: 15px; } .pt20 { padding-top: 20px; } .template .choosediv { opacity: 0; visibility: hidden; display: flex; align-items: center; justify-content: center; height: 225px; -webkit-transition: all .3s ease; transition: all .3s ease; } .template:hover > .choosediv { visibility: visible; opacity: 1; background: rgba(0,0,0,.5); } .template .choosediv .btn { -webkit-transition: all .3s ease; transition: all .3s ease; position: relative; -webkit-transform: translateY(20%); transform: translateY(20%); } .template:hover .choosediv .btn { -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.32); -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.32); box-shadow: 0 2px 3px 0 rgba(0,0,0,.32); -webkit-transform: translateY(0%); transform: translateY(0%); } .template .choosediv .btn:first-child { margin-right: 15px; } .inhoud .coloredsvgicon { opacity: 0; } .italic { font-style: italic; } .inhoud ol li { padding-bottom: 20px; } .inhoud .largewhiteicon { color: #fff; font-size: 5em; line-height: 1.1em; display: block; margin: auto; text-align: center; } .mr15 { margin-right: 15px; } .mr20 { margin-right: 20px; } [data-sitekeywords] { transition: opacity .1s ease-in-out; } .flexstart { justify-content: flex-start; } .heightvh30 { height: 30vh; } .starred { color: #ffe000 !important; } .starrssitem { margin-right: 10px; } .inhoud .socialmediaastext { position: relative; } .inhoud .socialmediaastext > a { background: transparent !important; } .inhoud .largesocialmedia > a { font-size: 1.4em !important; line-height: 1.4em !important; } .skewedbottom { -webkit-clip-path: polygon(0 0, 100% 0%, 100% 94%, 0% 100%); clip-path: polygon(0 0, 100% 0%, 100% 94%, 0% 100%); } .top_skewedbackground_style_1 { -webkit-clip-path: polygon(50% 30px, 100% 0, 100% 100%, 0 100%, 0 0); clip-path: polygon(50% 30px, 100% 0, 100% 100%, 0 100%, 0 0); margin-top: -30px; } .top_skewedbackground_style_2 { -webkit-clip-path: polygon(0 60px, 100% 0%, 100% 100%, 0 100%); clip-path: polygon(0 60px, 100% 0%, 100% 100%, 0 100%); top: -60px; } .inhoud .pagename_bg { position: fixed; height: 250px; width: 200%; bottom: 0; left: -100px; z-index: -2; } .inhoud .pagename_bg h1 { font-size: 250px; color: rgba(51, 51, 51, .05); font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; position: relative; width: auto; z-index: -10; padding: 0 !important; margin: 0 !important; } .checkiconvisited { width: 25px; height: 25px; display: flex !important; align-items: center; justify-content: center; font-size: 20px; line-height: 20px; margin-right: 10px; background: #43D6A7; color: #fff !important; border-radius: 100%; } .inhoud .itemurlwrapper { padding: 3px 0 0 0; display: flex; align-items: center; flex-wrap: wrap; } .adminmessage { background: #c4ece0; padding: 20px; word-break: break-word; font-size: 13px; line-height: 1.4em; font-weight: normal; font-family: 'circulair'; margin-bottom: 20px; } .adminmessage pre { white-space: pre-wrap; /* Since CSS 2.1 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-all; /* Internet Explorer 5.5+ */ } .greytext { color: #9fa8a9; } .smalltextshadow { text-shadow: rgba(0, 0, 0, 0.470588) 0px 1px 5px; } .rounded { border-radius: 1000px !important; } .inhoud form.transparentform input, .inhoud form.transparentform textarea { border: 2px rgba(255,255,255, .8) solid; background: transparent; color: #fff; border-radius: 3px; transition: all .1s ease; } .inhoud form.transparentform input:focus, .inhoud form.transparentform textarea:focus { border: 2px rgb(255,255,255) solid; } pre { font-size: 14px; line-height: 1.4em; padding: 10px; background: #fff; margin: 20px 0; color: #848d95; } #client_website_loginform_wrapper, #client_website_create_account_form_wrapper { padding-left: 40px; padding-right: 40px; } #client_website_loginform_wrapper form, #client_website_create_account_form_wrapper form { padding: 0px 70px ; } #modal .loginresponse { margin: 10px auto 0 auto; max-width: 300px; text-align: center; } @keyframes placeHolderShimmer{ 0%{ background-position: -468px 0 } 100%{ background-position: 468px 0 } } .linear-background { background: rgb(246, 249, 252); /*opacity: .7; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: placeHolderShimmer; animation-timing-function: linear; background: #f6f7f8; background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background-size: 1000px 104px; position: relative; overflow: hidden; background-size: 1000px !important;*/ } .feedrow { border-bottom: 1px #f3f3f3 solid; padding-bottom: 20px; margin-bottom: 20px; } .notice.orange { background: #ffa5004a; font-weight: normal; color: #ff9900; padding: 10px 10px 10px 20px; border-left: 3px #ff9900 solid; } #tm:checked ~ .onepagemenu { transform: translateX(0%); } #tm:checked ~ .wrapper { transform: translateX(-75%); } .inhoud .wrapper { transition: .2s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: .2s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: .2s cubic-bezier(0.4, 0, 0.2, 1); } .personeel__1.socialmediaicons { position: absolute; bottom: 0; right: 0; display: flex; justify-content: flex-end; } .personeel__1.socialmediaicons a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; width: 2.5em; height: 2.5em; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: var(--brandcolor); color: var(--primarycolor_textcolor); cursor: pointer; } .personeel__1.socialmediaicons a:hover { background: var(--brandcolor-lighten-10); } .largesquaremenubtn { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; width: 3.5em; height: 3.5em; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: var(--brandcolor); color: var(--primarycolor_textcolor); cursor: pointer; position: fixed; top: 0; right: 0; z-index: 123123; } .absolute_stretch { position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; z-index: 1; } .rowbackground { position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; z-index: -1; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1); opacity: 0; transition: opacity 5s cubic-bezier(.3,0,.7,1); } .rowbackground.visible { opacity: 1; } .rowbackground.black50 { /* transform: scale(1.05); */ background-color: rgba(0,0,0,.5); background-blend-mode: multiply; } .skewedhorizontal { -webkit-clip-path: polygon(0 9%, 100% 0, 100% 91%, 0% 100%); clip-path: polygon(0 9%, 100% 0, 100% 91%, 0% 100%); } [data-itemfield]:empty::before { color: #adadad; content: attr(data-itemfield); } .menusocialmedia a{ display: inline-block; margin: 0 7px; position: relative; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; background: rgb(238, 238, 238); cursor: pointer; text-align: center; padding: 4px; font-size: 15px; line-height: 1; width: 26px; height: 26px; color: #888; } .bottomarrowcenter { position: relative; } .bottomarrowcenter:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-top-color: var(--brandcolor); border-width: 15px; margin-left: -15px; } .toparrowcenter:after, .toparrowcenter:before { bottom: 100%; left: 90%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .toparrowcenter:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 10px; margin-left: -10px; } .toparrowcenter:before { border-color: rgba(217, 217, 217, 0); border-bottom-color: #f3f3f3; border-width: 11px; margin-left: -11px; } [data-flex] { flex-wrap: wrap; display: flex; } [data-flex="spacebetweenalign"] { justify-content: space-between; } [data-flex="flexend"] { justify-content: flex-end; } [data-flex="justifycenter"] { justify-content: center; } [data-alignitems="center"] { align-items: center; } .fa-exclamation-triangle.roundedcheck{ background: #ffa6a6; color: #da0202; width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 100%; font-size: 1.7rem; } i.roundedcheck{ background: var(--brandcolor); color: #fff; width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 100%; font-size: 1.7rem; margin-right: 1rem; } /*.fal.roundedcheck { width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 100%; font-size: 1.7rem; }*/ .scrolledbackground { background-position: bottom center !important; } [data-list] > * { position: relative; } [data-mouseovereffect] { -webkit-transition: 1s cubic-bezier(.19,1,.22,1); transition: 1s cubic-bezier(.19,1,.22,1); } [data-mouseovereffect="1"]:hover { transform: translateY(-10px) scale(1.02); } .absolutetopbgcenter { position: absolute !important; top: 0px; left: 0px; width: 100%; height: 100%; background-size: cover; background-position: center center; } .w60h60 { width: 60px; } .desktop__padding_bottom_6em { padding-bottom: 6em; } .white-line-left { position: relative; display: inline-flex; align-items: center; } .inhoud .brandcolor { color: var(--brandcolor); } .inhoud .brandcolor-line-left { display: inline-flex; position: relative; align-items: center; } .brandcolor-line-left:before { position: relative; display: block; width: 15px; height: 1px; content: ""; margin-right: 15px; background-color: var(--brandcolor); } .white-line-left:before { position: relative; display: block; width: 15px; height: 1px; content: ""; margin-right: 15px; background-color: #fff; } .template_wrapper { overflow: hidden; border-radius: 4px; border: none; background-size: 100% auto; box-shadow: 0 5px 15px -2px rgba(10, 16, 34, 0); position: relative; /*border: 1px rgba(80, 80, 80, 0.06) solid;*/ display: block; height: auto; } .template_thumbnail { background-size: 100% auto; background-repeat: no-repeat; background-position: top center; -webkit-transition:background-position 7s ease; -moz-transition:background-position 7s ease; -o-transition:background-position 7s ease; transition:background-position 7s ease; height: 200px; width: 100%; display: block; } .template_wrapper .template_actionwrapper { position: absolute; top: 0; left: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; opacity: 0; z-index: 3; -webkit-transition: ease-in-out .15s all; -moz-transition: ease-in-out .15s all; -ms-transition: ease-in-out .15s all; -o-transition: ease-in-out .15s all; transition: ease-in-out .15s all; } .template_wrapper .template_actionwrapper a { color: #fff; transform: translateY(20px); transition: 150ms cubic-bezier(0.42, 0, 0, 0.96); } .template_wrapper .template_actionwrapper a:hover { transform: translateY(-3px); } .template_wrapper:hover img { filter: blur(10px); } .template_wrapper:hover .template_actionwrapper a { transform: translateY(0px); } .template_wrapper:hover .template_actionwrapper { opacity: 1; } .browsertoolbar { height: 25px; width: 100%; position: relative; border-top-left-radius: .6rem; border-top-right-radius: .6rem; background: #f3f3f3; text-align: left; padding-left: 5px; display: flex; align-items: center; justify-content: flex-start; } .browsertoolbar .browserbutton{ display: inline-block; width: 10px; height: 10px; /* vertical-align: middle; */ line-height: normal; background: #eaeaea; border-radius: 100%; margin-left: 5px; position: relative; } .browsertoolbar .browserclose { background: rgba(255, 0, 0, 1) !important; } .browsertoolbar .browsermaximize { background: rgba(255, 195, 4, 1) !important; } .browsertoolbar .browserminimize { background: rgb(0, 207, 124) !important; } .label-success { display: inline-flex; font-size: 0.8em; padding: 6px 10px; line-height: 1; color: #fff; background: var(--brandcolor); border-radius: 3px; text-transform: uppercase; font-weight: bold; font-size: 1.1rem; letter-spacing: 1px; } .bg__muted { background: #c9c9c9; } .btn-disabled { opacity: .8; pointer-events: none; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } [data-form] label { display: block; /*font-size: 1.2em;*/ } [data-form] label span { display: block; /*padding-bottom: 5px;*/ } .largequote { opacity: .6; font-size: 100px; line-height: 100px; font-family: helvetica neue, arial; } .preview_large_template { border-radius: 5px; height: 60vh; background-repeat: no-repeat; background-size: 100% auto; background-position: top; } .br4 { border-radius: 4px; } .gu-transit { background: #f5f5f5; } .gu-transit > * { opacity: 0; } .gu-mirror { background: rgba(0,0,0,.0) !important; /*width: 100px !important;*/ /*height: 100px !important;*/ opacity: .7 !important; /*border: none !important;*/ border: 2px #999 dashed !important; /*-webkit-box-shadow: 0 30px 54px 0 rgba(0,0,0,.35); -moz-box-shadow: 0 30px 54px 0 rgba(0,0,0,.35); box-shadow: 0 30px 54px 0 rgba(0,0,0,.35);*/ } .gu-mirror > * { visibility: hidden; opacity: 0; } .img-whiteborder { padding: .5rem; background-color: #fff; /*border: 1px solid #dee2e6;*/ border-radius: .25rem; max-width: 100%; height: auto; -webkit-box-shadow: 0 20px 34px 0 rgba(0,0,0,.35); -moz-box-shadow: 0 20px 34px 0 rgba(0,0,0,.35); box-shadow: 0 20px 34px 0 rgba(0,0,0,.35); } .serif { font-family: 'Rasa'; } .pt10{ padding-top: 1rem; } .largepadding { padding: 8rem; } .wrapper_buttons { display: flex; justify-content: space-between; align-items: center; display: -webkit-flex; flex-wrap: wrap; } .wrapper_mouse_scrolldown { transform: translateY(-10rem); } [data-block] img { max-width: 100%; height: auto; } [data-block] iframe { width: 100%; height: auto; } .hover__style_1 { height: 25vh; min-height: 200px; max-height: 200px; } .inhoud .underline { text-decoration: underline; } [data-websitecreatedmessage] { display: none; } .showoncreatewebsite, .showoncreatedwebsite { display: none; } [data-sitefield] { min-width: 2rem; } span[data-sitefield] { display: inline-flex; } [data-intro] { position: relative; } [data-inhoud][data-cke] a { text-decoration: underline; } [data-hidelastitem] *:last-child { display: none; } .shop__sterkepunten { font-size: 1.5rem; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/dropdown__list.css */ .dropdown__list { padding: 1rem 0; } .dropdown__list > a { display: flex; padding: 1rem 2rem; font-size: 1.5rem; opacity: .9; -webkit-transition: .5s cubic-bezier(.19,1,.22,1); transition: .5s cubic-bezier(.19,1,.22,1); background-color: transparent; } .dropdown__list > a:hover, .dropdown__list > a.active { opacity: 1; background: #ECF0F7; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/fixedheaderscroll.css */ section[data-header] { box-shadow: -2px 15px 35px rgba(50,50,93,.01), 0 5px 15px rgba(0,0,0,.07); z-index: 2; } section[data-headercopy]{ position: fixed; top: 0; left: 0; width: 100%; z-index: 12; border-bottom: none; transform: translateY(-150px); transition: .4s ease-in-out; /* box-shadow: 0.125rem 0 2.5rem rgba(0,0,0,.15); */ will-change: transform; box-shadow: -2px 15px 35px rgba(50,50,93,.01), 0 5px 15px rgba(0,0,0,.07); } section.visible[data-headercopy]{ transform: translateY(0); z-index: 12; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/fixedhelpmenu.css */ [data-fixedhelpmenu] { width: 250px; /* background: rgba(255,255,255,.8); */ background: #fff; position: fixed; right: 0; z-index: 12; top: 50vh; transform: translate(300px, -50%); /* links, top */ padding: 2rem; -webkit-transition: .3s cubic-bezier(.19,1,.22,1); transition: .3s cubic-bezier(.19,1,.22,1); } .visible[data-fixedhelpmenu] { transform: translate(0, -50%); /* links, top */ transform-origin: center right; } [data-fixedhelpmenu]:hover { background: #fff; transform: translate(0, -50%); } .minimized[data-fixedhelpmenu] .title { display: none; } .minimized[data-fixedhelpmenu] { width: auto; padding: 1.5rem; transform: translate(0, -50%); /* links, top */ } [data-fixedhelpmenu] .navdot { background: #ECF0F7; width: 1.3rem; height: 1.3rem; border-radius: 1.3rem; } [data-fixedhelpmenu] a.link { opacity: .8; -webkit-transition: .5s cubic-bezier(.19,1,.22,1); transition: .5s cubic-bezier(.19,1,.22,1); } .minimized[data-fixedhelpmenu] .navdot_small { display: block; background: #ECF0F7; width: 1.6rem; height: 1.6rem; border-radius: 2rem; margin: auto; } .minimized[data-fixedhelpmenu] .navdot { display: none; } .visible[data-fixedhelpmenu] .maximize { display: none; } .minimized[data-fixedhelpmenu] a.maximize { display: block; } .minimized[data-fixedhelpmenu] .help_header { display: none; } .visible[data-fixedhelpmenu] .navdot_small { display: none; } [data-fixedhelpmenu] a.link:hover, [data-fixedhelpmenu] a.link.activehelpmenulink { color: var(--brandcolor); opacity: 1; font-weight: bold; } [data-fixedhelpmenu] a.link:hover .navdot, [data-fixedhelpmenu] a.link.activehelpmenulink .navdot { background: var(--brandcolor); -webkit-transition: .5s cubic-bezier(.19,1,.22,1); transition: .5s cubic-bezier(.19,1,.22,1); } [data-fixedhelpmenu] a.link:hover .navdot_small, [data-fixedhelpmenu] a.link.activehelpmenulink .navdot_small { background: var(--brandcolor); -webkit-transition: .5s cubic-bezier(.19,1,.22,1); transition: .5s cubic-bezier(.19,1,.22,1); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/flex.css */ .flex { display: flex; } a.inlineflex, .inlineflex, .btn.inlineflex, .inline-flex { display: inline-flex; align-items: center; } /* .flex__horizontaal_verticaal */ .flex__start_end { display: flex; justify-content: flex-start; align-items: flex-end; display: -webkit-flex; flex-wrap: wrap; } .flex__start_center { display: flex; justify-content: flex-start; align-items: center; display: -webkit-flex; flex-wrap: wrap; } .checkout_flex_start_center{ display: flex; justify-content: flex-start; align-items: center; display: -webkit-flex; } .flex__spacearound_start { display: flex; justify-content: space-around; align-items: flex-start; display: -webkit-flex; flex-wrap: wrap; } .flex__between_start { display: flex; justify-content: space-between; align-items: flex-start; display: -webkit-flex; flex-wrap: wrap; } .flex__center_start { display: flex; justify-content: center; display: -webkit-flex; flex-wrap: wrap; align-items: flex-start; } .flex__center_center { display: flex; justify-content: center; align-items: center; display: -webkit-flex; flex-wrap: wrap; } .inlineflex__center_center { display: inline-flex; justify-content: center; align-items: center; display: -webkit-inline-flex; flex-wrap: wrap; } .flex__start_spacebetween { display: flex; justify-content: flex-start; align-content: space-between; display: -webkit-flex; flex-wrap: wrap; } .flex__end_center { display: flex; justify-content: flex-end; align-items: center; display: -webkit-flex; flex-wrap: wrap; } .flex__end_baseline { display: flex; justify-content: flex-end; align-items: baseline; display: -webkit-flex; flex-wrap: wrap; } .flex__start_start { display: flex; justify-content: flex-start; align-items: flex-start; display: -webkit-flex; flex-wrap: wrap; } .flex__spacearound_center, .flex__around_center { display: flex; justify-content: space-around; align-items: center; display: -webkit-flex; flex-wrap: wrap; } .flex__spacebetween_start { display: flex; justify-content: space-between; display: -webkit-flex; align-items: flex-start; flex-wrap: wrap; } .flex__spacebetween_center { display: flex; justify-content: space-between; align-items: center; display: -webkit-flex; flex-wrap: wrap; } .flexend { justify-content: flex-end; } .flex__equal_width > * { flex: 1; flex-basis: auto; } .mobile__flex__center_center { display: none; } @media only screen and (max-width : 959px) { .mobile__flex__center_center { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/flip.css */ .flip { -moz-transform: scaleX(-1); /* Gecko */ -o-transform: scaleX(-1); /* Opera */ -webkit-transform: scaleX(-1); /* Webkit */ transform: scaleX(-1); /* Standard */ } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/fontsizes.css */ h1, .h1 { font-size: 4rem; font-weight: bold; } h2 { font-size: 2.5rem; } h3 { font-size: 1.75rem; } .lead, .inhoud .largebodytext { font-size: 2rem; } .lead_large { font-size: 2.5rem; } .inhoud .largefont { font-size: 3em; } .inhoud .extralargefont { font-size: 3.5em; } .inhoud .extraextralargefont { font-size: 4.5em; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/fontsizes.mobile.css */ @media only screen and (max-width : 959px) { .mobile-font-size-16 { font-size: 1.6rem; } .mobile-font-size-17 { font-size: 1.6rem; } .mobile-font-size-20 { font-size: 2rem; } } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/footer.css */ /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/form.css */ [data-form]{ position: relative; } .formoverlay[data-form]:after { content: ''; background: rgba(255,255,255,.6); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } [data-formmessagewrapper] { width: 100%; margin-bottom: 20px; text-align: left; padding: 20px; display: block; } [data-formmessagewrapper="errormessage"] { background: rgba(255, 0, 0, 0.22); color: red; } [data-formmessagewrapper="errormessage"] a, [data-formmessagewrapper="errormessage"] a:hover { color: red; } [data-formmessagewrapper="successmessage"] { color: #10ad70; background: rgba(19, 202, 131, 0.12); } .question-hidden { display: none; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/form__tooltip.css */ .form__tooltip { position: absolute; bottom: calc(100% + 1rem); background: rgba(0,0,0,.85); color: #fff; text-shadow: none; padding: .8rem 1.5rem; font-size: 1.5rem; left: 50%; min-width: 200px; max-width: 400px; display: block; /*transform: translateX(-50%);*/ text-shadow: none; border-radius: 3px; box-shadow: 0 5px 15px -2px rgba(10, 16, 34, .4); text-align: center; transform: scale(.85) translate(-60%, -10%); transition: all .25s cubic-bezier(.24,.22,.015,1.56),opacity .1s ease-in-out; opacity: 0; } .form__tooltip__visible { opacity: 1; -webkit-transform: scale(1) translate(0); transform: scale(1) translate(-50%, 0); backdrop-filter: blur(3px); } .form__tooltip:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 247, 247, 0); border-top-color: rgba(0,0,0,.7); border-width: 7px; margin-left: -7px; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/frontpage_redenen.css */ .frontpage_redenen svg { width: auto; height: 6rem; } .frontpage_redenen .makkelijk svg { height: 4.5rem; } .frontpage_redenen svg g { fill: var(--brandcolor); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/gradient.css */ /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/grid.css */ .w23 { width: 23%; } .w25 { width: 25%; } .w20 { width: 20%; } .w27 { width: 27%; } .w15 { width: 15%; } .w30 { width: 30%; } .w100 { width: 100%; } .w1000 { width: 1000px; } .mt60 { margin-top: 6rem; } .mb10 { margin-bottom: 1rem; } .mb30 { margin-bottom: 3rem; } .mb40 { margin-bottom: 4rem; } .mb50 { margin-bottom: 5rem; } .mr20 { margin-right: 2rem; } .fs30 { font-size: 3rem; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/hamburger_menu_icon.css */ /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/header.css */ .header_fixed[data-header] { position: fixed; top: 0; left: 0; width: 100%; z-index: 5; box-shadow: 0 0 30px rgba(0,0,0,.1); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/height.css */ .vh25 { min-height: 150px; height: 25vh; } .vh20 { min-height: 100px; height: 20vh; } .vh15 { min-height: 15vh; } .vh33 { min-height: 150px; height: 33vh; } .vh60 { min-height: 550px; height: 60vh; } .vh70 { min-height: 500px; height: 70vh; } .vh75 { min-height: 550px; height: 75vh; } .vh80 { min-height: 550px; height: 80vh; } .vh90 { min-height: 550px; height: 90vh; } .vh100 { min-height: 700px; height: 100vh; } .mediumheight { height: 400px; } .h600px { height: 600px;; } .w5rem_h5rem { width: 5rem; height: 5rem; } .h450px { min-height: 450px; } .w6rem_h6rem { width: 6rem; height: 6rem; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/hero.css */ .hero { height: 80vh; max-height: 400px; } @media only screen and (max-width : 959px) { .hero { max-height: 250px; } } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/hoewerkthet.css */ .hoewerkthet .number { position: relative; z-index: 15; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; font-size: 1.7rem; width: 40px; height: 40px; font-weight: 700; color: var(--brandcolor); /* border: solid 2px var(--brandcolor); */ border-radius: 50%; width: 48px; height: 48px; margin-bottom: 2rem; } .hoewerkthet .number-shadow { position: absolute; top: 0; left: 0; z-index: 5; background-color: var(--brandcolor-lighten-50); border: none; width: 48px; height: 48px; border-radius: 50%; } .hoewerkthet .timeline { position: absolute; top: 4.5rem; left: 2rem; width: 75%; border: none; border-top: 2px dashed var(--brandcolor-opacity-10); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/home.css */ img.box-home { width: 231px; } .homepage_header_div { height: 600px; } .voordelen_checklist_wrapper { transform: translateX(-6rem); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/hoverstyles.css */ .hover__style_1 { overflow: hidden; /*border: 2px solid transparent;*/ transition: 300ms cubic-bezier(0.42, 0, 0, 0.96); } .inhoud .hover__style_1 > *:first-child { opacity: 0; padding: 0; transform: translateY(20%); transition: 350ms cubic-bezier(0.42, 0, 0, 0.96); color: #fff; text-align: center; font-weight: bold; } .inhoud .hover__style_1:hover > *:first-child { opacity: 1; transform: translateY(0); } .hover__style_1 .imagediv { position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; transition: 200ms cubic-bezier(0.42, 0, 0, 0.96); opacity: 1; } .hover__style_1:hover .imagediv { opacity: 0; transform: translateY(-20%); } .hover__style_1:hover { /*border: 2px var(--bodytextcolor) solid;*/ transform: scale(1.05); box-shadow: 0 3px 5px rgba(0,0,0,.1); } .hover__style_1 .bottomright { opacity: 1; z-index: 1; transform: translateY(0%); background: var(--brandcolor); height: 3.5rem; width: 3.5rem; transition: .2s cubic-bezier(0.42, 0, 0, 0.96); transition-delay: .06s; } .hover__style_1 .bottomright i { color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .hover__style_1 .bottomright i.fa-ellipsis-h { opacity: 0; } .hover__style_1:hover .bottomright i.fa-long-arrow-right { opacity: 0; } .hover__style_1:hover .bottomright i.fa-ellipsis-h { color: var(--secondarycolor); opacity: 1; } .hover__style_1:hover .bottomright { background: #fff; opacity: 1; transform: translateY(0); } .inhoud .hover__style_2 { /* box-shadow: 0 5px 15px -2px rgba(10, 16, 34, .4); */ -webkit-transition: ease-in-out .15s all; -moz-transition: ease-in-out .15s all; -ms-transition: ease-in-out .15s all; -o-transition: ease-in-out .15s all; transition: ease-in-out .15s all; } .inhoud .hover__style_2:hover { box-shadow: 0 15px 35px -5px rgba(10, 16, 34, .2); /* -webkit-filter: brightness(110%); */ /* filter: brightness(110%); */ -webkit-transform: translate(0px, -2px); -ms-transform: translate(0px, -2px); transform: translate(0px, -2px); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/iconstyle.css */ .largechecklisticons .fal { font-size: 2.6rem; display: flex; align-items: center; justify-content: center; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/imagediv.css */ .imagediv { position: relative; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/ingredienten.css */ .ingredienten_lijst .rij_links .lijn { position: relative; } .ingredienten_lijst .rij_links .lijn:after { top: 100%; left: 8px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-top-color: var(--brandcolor); border-width: 8px; margin-left: -8px; } .ingredienten_lijst .rij_rechts .lijn { position: relative; } .ingredienten_lijst .rij_rechts .lijn:after { top: 100%; left: 8px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-top-color: var(--bodytextcolor); border-width: 8px; margin-left: -8px; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/inhoud.css */ body .inhoud { -webkit-transition: .2s cubic-bezier(.19,1,.22,1); transition: .2s cubic-bezier(.19,1,.22,1); transform-origin: center center; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/input_select.css */ .select-style { border: 1px solid #dad7d4; font-family: var(--secondaryfont); /*padding: 10px 17px;*/ display: block; align-items: center; justify-content: center; } .select-style.large-select { padding: 14px 17px; border-radius: 3px; } .select-style select { width: 100%; font-size: 1.6rem; border: none; box-shadow: none; background-color: transparent; background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 12px 17px; } .select-style select:focus { outline: none; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/inputs.css */ ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, :-moz-placeholder { /*color: #c6c8ca !important;*/ color: #c9c9c9 !important; opacity: .7; } input { -webkit-appearance: none; } body input[type="text"], body input[type="email"], body input[type="password"], body textarea { border: 1px solid #DFE2E6; font-family: var(--secondaryfont); padding: 9px 13px; font-size: 1.6rem; display: block; width: 100%; /* margin-bottom: 20px; */ border-radius: .2rem; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); } body textarea { height: 150px; resize: none; } .inhoud textarea:hover, .inhoud input[type="text"]:hover, input[type="password"]:focus, input[type="email"]:focus, [type="email"]:hover, [type="password"]:hover, .inhoud input[type="text"]:focus, .inhoud textarea:focus { outline: none !important; border: 1px solid var(--brandcolor); transition: .3s ease; } input[type="checkbox"] { display: inline-block; margin-right: 5px; vertical-align: middle; } input[type="radio"] { display: inline-block; margin-top: -1px; margin-right: 5px; vertical-align: baseline; } input[type="text"].underlineinput { padding: 10px 10px; border-radius: 0; border: none; outline: none; border-bottom: 2px solid var(--bodytextcolor); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/instantclick.css */ #instantclick-bar { background: var(--brandcolor); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/jarallax.css */ .jarallax { position: relative; z-index: 0; } .jarallax > .jarallax-img { position: absolute; object-fit: cover; /* support for plugin https://github.com/bfred-it/object-fit-images */ font-family: 'object-fit: cover;'; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/kenburns.css */ .kenburns { transform: scale(1); transition: transform 5s cubic-bezier(.3,0,.7,1) } .kenburns_enable { transform: scale(1.1); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/largemenuitems.css */ .largemenuitems a { padding: 3rem; background-color: var(--brandcolor); color: #fff; display: block; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/latestblogpost.css */ .latestblogpost { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) scale(1); z-index: 4; width: calc(100% - 2rem); max-width: 500px; background-color: var(--brandcolor); overflow: hidden; transition: .2s cubic-bezier(.19,1,.22,1); -moz-transition: .2s cubic-bezier(.19,1,.22,1); -webkit-transition: .2s cubic-bezier(.19,1,.22,1); } .latestblogpost:hover { transform: translateX(-50%) scale(1.02); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/line.css */ .line__opacity_30 { height: 1px; background: rgba(255,255,255,.3); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/line__description.css */ .line__description { position: relative; font-weight: 300; font-size: 24px; line-height: 24px; line-height: 39px; width: 80%; padding-left: 20%; } .line__description:before { content: ''; position: absolute; height: 2px; left: 0; top: 20px; width: 20%; animation-fill-mode: both; background: #000; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/manual.css */ /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/map.css */ [data-map] { display: flex; position: relative; padding: 0; } [data-map] iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; outline: none; border: none; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/margin.css */ .automargin { margin-left: auto; margin-right: auto; } .inhoud .mb0 { margin-bottom: 0; } .m30 { margin-top: 3rem; margin-bottom: 3rem; } .nomargin, .no-margin { margin: 0 !important; } .mb15 { margin-bottom: 1.5rem; } .mt5 { margin-top: .5rem; } .mr10 { margin-right: 1rem; } .mt25 { margin-top: 2.5rem; } .mt120 { margin-top: 12rem; } .mt300 { margin-top: 30rem; } .mt200 { margin-top: 20rem; } .mr13 { margin-right: 1.3rem; } .mr-3 { margin-right: .3rem; } .mr20 { margin-right: 2rem; } .mr5 { margin-right: .5rem; } .mr30 { margin-right: 3rem; } .mr40 { margin-right: 4rem; } .ml5 { margin-left: .5rem; } .ml20 { margin-left: 2rem; } .ml30 { margin-left: 3rem; } .ml40 { margin-left: 4rem; } .mb5 { margin-bottom: .5rem; } .mb20 { margin-bottom: 2rem; } .mb25 { margin-bottom: 2.5rem; } .mb30 { margin-bottom: 3rem; } .mb40 { margin-bottom: 4rem; } .mb60 { margin-bottom: 6rem; } .mb70 { margin-bottom: 7rem; } .mb80 { margin-bottom: 8rem; } .mb100 { margin-bottom: 10rem; } .mb150 { margin-bottom: 15rem; } .mb200 { margin-bottom: 20rem; } .mt150 { margin-top: 15rem; } .mt200 { margin-top: 20rem; } .mt40 { margin-top: 4rem; } .mt80 { margin-top: 8rem; } .mt100 { margin-top: 10rem; } .mtm85 { margin-top: -8.5rem; } .children-mr10 > *:not(:last-child) { margin-right: 1rem; } .children-mr20 > *:not(:last-child) { margin-right: 2rem; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/margin.mobile.css */ @media only screen and (max-width : 959px) { .mobile-mt15 { margin-top: 1.5rem; } .mobile-mb15 { margin-bottom: 1.5rem; } .mobile-mb0 { margin-bottom: 0; } .mobile-mb20 { margin-bottom: 2rem; } .mobile-mb40 { margin-bottom: 4rem; } .mobile-mt0 { margin-top: 0rem; } .mobile-mt20 { margin-top: 2rem; } .mobile-mt30 { margin-top: 3rem; } .mobile-mt100 { margin-top: 10rem; } .mobile-mr0 { margin-right: 0; } .mobile-mt150 { margin-top: 15rem; } } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/menuitems.css */ [data-horizontalmenu5] { display: flex; align-items: center; justify-content: flex-start; } [data-horizontalmenu5] a { color: var(--bodytextcolor); display: block; padding: 10px 15px; line-height: 1; margin: 0 .6rem; font-size: 1.6rem; transition: .15s cubic-bezier(.25,.46,.45,.94); position: relative; } [data-horizontalmenu5] a:hover, [data-horizontalmenu5] a.active { color: var(--brandcolor); /* background: var(--brandcolor-opacity-10); */ /* background: rgb(248, 249, 252); */ /* border-radius: .3rem; */ font-weight: bold; } [data-horizontalmenu5] a:hover:after, [data-horizontalmenu5] a.active:after{ -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); opacity: 1; width: 100%; width: 6px; height: 6px; border-radius: 100px; left: 50%; transform: translateX(-50%); bottom: -8px; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/messages.css */ .message { } .message-warning { display: inline-flex; background-color: #ff000026; border: 1px solid red; padding: 2rem 4rem; align-items: center; justify-content: center; } .message-warning-withoutinline { background-color: #ff000026; border: 1px solid red; padding: 2rem 4rem; align-items: center; justify-content: center; } .message-info { background: rgba(3, 169, 244, .2); color: hsla(199, 98%, 45%, 1); padding: 10px; border: #03a9f463 1px solid; /* font-weight: bold; */ } .message-success { display: inline-flex; background-color: hsla(130, 78%, 41%, 0.12); border: 1px solid rgb(20, 212, 152); padding: 2rem 4rem; /*border-radius: 3px;*/ align-items: center; justify-content: center; } .message-warning.message-small { padding: 1rem 2rem; margin-bottom: 1rem; } .tag-success { font-size: 1.4rem; /* background: #12ca83; */ /* background: #4cd964; */ background: rgba(18, 202, 131, .21); color: hsla(157, 84%, 39%, 1); border-radius: 4px; padding: 3px 6px; margin-top: 6px; display: inline-flex; font-weight: bold; /* box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); */ } .tag-warning { font-size: 13px; background: orange; color: #fff; border-radius: 4px; padding: 3px 6px; margin-top: 6px; display: inline-flex; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); } .tag-error { font-size: 13px; background: red; color: #fff; border-radius: 4px; padding: 3px 6px; margin-top: 6px; display: inline-flex; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/mobilemenu.css */ .mobile.mobile-menu { position: fixed; z-index: 11; height: calc(100vh - 93px); width: 75vw; top: 96px; left: 0; transition: transform .2s,opacity .2s; transform: translateX(-85vw); opacity: 0; } .mobile.mobile-menu.visible { transform: translateX(0); opacity: 1; } .mobile.mobile-menu .menuitems a, .mobile.mobile-menu .menuitemstyle { display: block; border-bottom: 1px #E9EFF1 solid; padding: 15px 25px; color: var(--bodytextcolor); /* font-weight: bold; */ } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/mouse_scrolldown.css */ @keyframes scroll { 0% { transform: translateY(0); } 30% { transform: translateY(6px); } } @keyframes scrollhorizontal { 0% { transform: translateX(0); } 30% { transform: translateX(6px); } } @keyframes mouse-scroll { 0% { transform: translateY(-50%); opacity: 0; } 50% { transform: translateY(0%); opacity: 1; } 100% { transform: translateY(50%); opacity: 0; } } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/mouseover.css */ [data-mouseover__scale_imagediv] { overflow: hidden; position: relative; } [data-mouseover__scale_imagediv] > .imagediv { transition: .3s cubic-bezier(.19,1,.22,1); transform: scale(1); } [data-mouseover__scale_imagediv]:hover > .imagediv { -webkit-filter: brightness(120%); filter: brightness(120%); opacity: 1; transform: scale(1.05); } [data-mouseover__scale_imagediv] [data-expandonhover] { transition: .3s cubic-bezier(.19,1,.22,1); } [data-mouseover__scale_imagediv]:hover [data-expandonhover] { transform: translateY(-10px); } [data-mouseoverchildeffect] > * { transition: .5s cubic-bezier(.19,1,.22,1); } [data-mouseoverchildeffect="1"] > * { opacity: 0; transform: translateY(-50px) scale(1.1); filter: blur(10px); } [data-mouseoverchildeffect="1"]:hover > * { opacity: 1; transform: translateY(0px) scale(1); filter: blur(0px); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/nanobar.css */ .nanobar { height: 3px; } .nanobar .bar { background: linear-gradient(-180deg,#00d775,#00bd68) !important; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/notification.css */ .notificationwrapper { position: fixed; z-index: 99999; bottom: 30px; right: 30px; } .notificationwrapper > div { opacity: 0; width: 300px; font-family: var(--bodytextfont); color: rgb(51, 51, 51); background: #fff; color: var(--bodytextcolor); font-size: 16px; padding: 15px 20px; box-shadow: -2px 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07); /*border: 1px #e8e8e8 solid;*/ margin-top: 30px; border-radius: 5px; transform: scale(.9); } .notificationwrapper > div.visible { transform: scale(1); opacity: 1; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/overlays.css */ [data-overlay="1"] { background-color: rgba(0,0,0,.6); background-blend-mode: multiply; } [data-overlay="2"] { background-color: var(--brandcolor-opacity-50); background-blend-mode: soft-light; } [data-overlay="3"] { background-color: rgba(0,0,0,.3); background-blend-mode: multiply; } [data-overlay="4"] { /* transform: scale(1.05); */ background-color: rgba(0,0,0,.3); background-blend-mode: multiply; } [data-overlay="5"] { background: linear-gradient(to bottom, transparent 20%, #212121 100%); } [data-overlay="6"]{ /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */ background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */ } [data-overlay="7"]:after { display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 1; bottom: 0; background: -webkit-linear-gradient(bottom,#000,rgba(0,0,0,.4) 20%,transparent); background: linear-gradient(0deg,#000,rgba(0,0,0,.4) 20%,transparent); opacity: .95; content: ""; } [data-overlay="8"] { background-color: rgba(0,0,0,.8); background-blend-mode: multiply; } [data-overlay="9"] { background-color: rgba(0,0,0,.5); background-blend-mode: multiply; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/padding.css */ .p5 { padding: 5px; } .pb7 { padding-bottom: .7rem; } .pt7 { padding-top: .7rem; } .p10 { padding: 10px; } .p15 { padding: 15px; } .pl25 { padding-left: 2.5rem; } .p25 { padding: 25px; } .p30 { padding: 30px; } .p20{ padding: 20px; } .p30 { padding: 30px; } .p40 { padding: 40px; } .p60 { padding: 6rem; } .pt8 { padding-top: .8rem; } .pt20 { padding-top: 2rem; } .pt30 { padding-top: 3rem; } .pt40 { padding-top: 4rem; } .pt60 { padding-top: 6rem; } .pt80 { padding-top: 8rem; } .pt100, .pt-100 { padding-top: 10rem; } .pt150 { padding-top: 15rem; } .pb150 { padding-bottom: 15rem; } .pb300 { padding-bottom: 30rem; } .pt200 { padding-top: 20rem; } .pt250 { padding-top: 25rem; } .pt300 { padding-top: 30rem; } .pt5 { padding-top: .5rem; } .pb0, .pb-0 { padding-bottom: 0; } .pb5 { padding-bottom: .5rem; } .pb8 { padding-bottom: .8rem; } .pb10 { padding-bottom: 1rem; } .pb15 { padding-bottom: 1.5rem; } .pb20 { padding-bottom: 2rem; } .pb25 { padding-bottom: 2.5rem; } .pb30 { padding-bottom: 3rem; } .pb40 { padding-bottom: 4rem; } .pb50 { padding-bottom: 5rem; } .pb60 { padding-bottom: 6rem; } .pb80 { padding-bottom: 8rem; } .pl5 { padding-left: .5rem; } .pl10 { padding-left: 1rem; } .pl20 { padding-left: 2rem; } .pl30 { padding-left: 3rem; } .pr20 { padding-right: 2rem; } .p80 { padding: 8rem; } .pb100, .pb-100 { padding-bottom: 10rem; } .pr30 { padding-right: 3rem; } .pr10 { padding-right: 1rem; } .pr40 { padding-right: 4rem; } .pr60 { padding-right: 6rem; } .pl40 { padding-left: 4rem; } .pr5 { padding-right: .5rem; } .pl35 { padding-left: 3.5rem; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/padding.mobile.css */ @media only screen and (max-width : 959px) { .mobile-p0 { padding: 0; } .mobile-p15 { padding: 1.5rem; } .mobile-p20 { padding: 2rem; } .mobile-p10 { padding: 1rem; } .mobile-pb0 { padding-bottom: 0; } .mobile-pl20 { padding-left: 2rem; } .mobile-pr20 { padding-right: 2rem; } .mobile-pl30 { padding-left: 3rem; } .mobile-pt20 { padding-top: 2rem; } .mobile-pb20 { padding-bottom: 2rem; } .mobile-pr10 { padding-right: 1rem; } .mobile-pl10 { padding-left: 1rem; } .mobile-p30 { padding: 3rem; } .mobile-pt0 { padding-top: 0; } .mobile-pb40 { padding-bottom: 4rem; } .mobile-pt30 { padding-top: 3rem; } .mobile-pt40 { padding-top: 4rem } .mobile-pt50 { padding-top: 5rem; } .mobile-pt60 { padding-top: 6rem; } .mobile-pt80 { padding-top: 8rem; } .mobile-pb50 { padding-bottom: 5rem; } .mobile-pt50 { padding-top: 5rem; } } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/page_layouts.css */ [data-layout="frontpage__layout_1"] .thumbnail { border-radius: 1rem; background-size: cover; background-position: center; background-color: #f5f5f5; -webkit-box-shadow: 0px 13px 25px -10px rgba(133,133,133,1); -moz-box-shadow: 0px 13px 25px -10px rgba(133,133,133,1); box-shadow: 0px 13px 15px -10px rgba(133,133,133); overflow: hidden; filter: saturate(1.3); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/pagination.css */ .pagination { margin: auto; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; } .pagination > a { color: var(--brandcolor); } .pagination > * { margin: 0 1rem; } .pagination b { border-bottom: 2px solid var(--secondarycolor); padding: 0 5px; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/popup.css */ body #modaloverlay { padding: 1.5rem; } body.popup-active .inhoud { opacity: .7;; } body.popup-active .wrapper { background: var(--darkbackgroundcolor); filter: blur(5px); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/positions.css */ .bottomcenteroffset7rem { z-index: 3; transform: translateX(-50%); position: absolute; bottom: 7rem; left: 50%; } .inhoud .position__stick_right { position: absolute; z-index: 2; right: 0; top: 0; bottom: 0; } .absolute { position: absolute; } .top0 { top: 0; } .left0 { left: 0; } .bottom_rotated_90deg { transform: translateX(-50%) translateY(-20%) rotate(-90deg); position: absolute; bottom: 0; left: 50%; z-index: 2; } .translatex_min_40percent { transform: translateX(-40%); } .fixed { position: fixed; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/pre.css */ pre { display: block; font-size: 12px; border: 1px red solid; padding: 20px; width: 80%; margin: 2rem auto; overflow: hidden; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/progressbar.css */ [data-progressbar] { background: #f5f5f5; border-radius: 4px; height: 1.4rem; width: 100%; display: block; overflow: hidden; } [data-progressbar] > div { height: 1.4rem; background: var(--brandcolor); border-radius: 4px; transition: ease-in-out 1s all; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/pulsing.css */ @-webkit-keyframes pulse-ring { 0% { -webkit-transform: scale(0.33); transform: scale(0.33); } 80%, 100% { opacity: 0; } } @keyframes pulse-ring { 0% { -webkit-transform: scale(0.33); transform: scale(0.33); } 80%, 100% { opacity: 0; } } .pulsating-circle > i { position: relative; z-index: 1; background: #fff; height: 2rem; width: 2rem; border-radius: 100%; } .pulsating-circle:after { content: ' '; position: absolute; z-index: 0; top: 50%; left: 50%; display: block; width: 5rem; height: 5rem; margin-left: -2.5rem; margin-top: -2.5rem; border-radius: 5rem; background-color: var(--brandcolor); background-color: rgb(169, 172, 179); /* background-color: red; */ -webkit-animation: pulse-ring 1.55s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; animation: pulse-ring 1.55s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/quote.css */ .quote { quotes: "“" "”" "‘" "’"; } .quote:before { content: open-quote; } .quote:after { content: close-quote; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/rateyo.css */ .jq-ry-container{position:relative;padding:0 5px;line-height:0;display:block;cursor:pointer;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;direction:ltr}.jq-ry-container[readonly=readonly]{cursor:default}.jq-ry-container>.jq-ry-group-wrapper{position:relative;width:100%}.jq-ry-container>.jq-ry-group-wrapper>.jq-ry-group{position:relative;line-height:0;z-index:10;white-space:nowrap}.jq-ry-container>.jq-ry-group-wrapper>.jq-ry-group>svg{display:inline-block}.jq-ry-container>.jq-ry-group-wrapper>.jq-ry-group.jq-ry-normal-group{width:100%}.jq-ry-container>.jq-ry-group-wrapper>.jq-ry-group.jq-ry-rated-group{width:0;z-index:11;position:absolute;top:0;left:0;overflow:hidden} /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/rating.css */ .jq-ry-container { padding: 0 !important; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/referral_notice_bar.css */ [data-ajaxdiv="shop__header_referral_notice"] { background: #12ca83; } [data-ajaxdiv="shop__header_referral_notice"]:hover { background: #12ca83; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/referral_notification.css */ .referral_notification { -webkit-transition: .3s cubic-bezier(.19,1,.22,1); transition: .3s cubic-bezier(.19,1,.22,1); } .referral_notification:hover { transform: scale(1.04); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/ribbon.css */ .ribbon { position: absolute; top: 10px; right: -11px; z-index: 999; display: inline-block; border-top-left-radius: 4px; border-bottom-left-radius: 4px; font-size: 1.4rem; text-transform: uppercase; padding: 3px 15px; color: #fff; text-align: center; background: #10b777; font-weight: bold; letter-spacing: .1rem; } .ribbon::before { content: ''; border-left: 0 solid transparent; border-right: 11px solid transparent; border-top: 14px solid hsla(157, 84%, 30%, 1); position: absolute; bottom: -14px; right: 0; } .ribbon.ribbon_thirdcolor { background: var(--thirdcolor); } .ribbon.ribbon_thirdcolor:before { border-top: 14px solid var(--thirdcolor-darken-10); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/scrollbar.css */ body::-webkit-scrollbar-thumb { border-radius: 10px; background-image: linear-gradient(90deg,var(--brandcolor),var(--brandcolor-darken-10)); } body::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); border-radius: 0; background-color: #efefef; } body::-webkit-scrollbar { width: 10px; background-color: #efefef; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/scrollprogressbar.css */ .scrollprogressbar { background: var(--brandcolor); height: .3rem; width: 0; position: fixed; top: 0; left: 0; z-index: 14; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/scrolltotop__new.css */ .scrolltotop__new { position: fixed; bottom: 2rem; right: 2rem; z-index: 10; width: 3.5rem; height: 3.5rem; /*display: flex; background: var(--brandcolor); align-items: center; justify-content: center; text-decoration: none; font-size: 2.5rem; border-radius: 100px; transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.05s, opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.05s, background 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.05s;*/ } .scrolltotop__new i { color: #fff; font-size: 2rem; } .scrolltotop__new div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 100px; transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.05s, opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.05s, background 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.05s; } .scrolltotop__new div:first-child { z-index: 1; opacity: 1; transform: scale(1); } .scrolltotop__new div:last-child { z-index: 2; opacity: 0; transform: scale(.7); } .scrolltotop__new:hover div:first-child { opacity: 0; transform: scale(.7); } .scrolltotop__new:hover div:last-child { opacity: 1; transform: scale(1.2); } .scrolltotop__new div:first-child { background: var(--brandcolor); } .scrolltotop__new div:last-child { background: var(--brandcolor-lighten-10); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/shadows.css */ [data-shadow="11"] { box-shadow: 0 0 2rem 0 hsla(0,0%,6%,.12); border-radius: .3rem; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/sharebuttons.css */ [data-view="site__blog__sharebuttons"] [data-sharebutton] { border-radius: 50%; width: 66px; height: 66px; font-size: 25px; line-height: 75px; margin-bottom: 20px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); text-decoration: none; color: #000; margin: auto; transition: .4s; margin-bottom: 3rem; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/shared.css */ body .verylargetext { font-size: 45px; line-height: 65px; } body .largetext { font-size: 30px; line-height: 45px; } .mh250 { min-height: 250px; } #menuhtml a.socialmediaimage { display: inline-block; color: #000; vertical-align: middle; text-align: center; margin: 0 5px; border-radius: 100px; width: 16px; height: 16px; } #menuhtml a.facebook { background: #3F51B5; color: #fff; padding-top: 8px; } #menuhtml a.twitter { background: #4099ff; color: #fff; } #menuhtml a.linkedin { background: #007bb5; color: #fff; } #menuhtml h1:only-child, #menuhtml p:only-child { padding: 0 !important; } .defaultblog .blogimage { margin-bottom: 10px; } .defaultblog .date { font-size: 14px; opacity: .6; } .largebuttonpadding { padding: 16px 28px !important; } .fixeddragdroptopmenu { position:fixed; z-index: 1; background: transparent; z-index: 100; width: 100%; } .headertekstblokje_stijl_1 { font-size: 30px; line-height: 30px; padding: 10px; display: inline-block; vertical-align: middle; margin-left: 20px; margin-right: 50px; } .fixeddragdroptopmenu .menubackground { box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } .fixeddragdroptopmenu ul.hoofdmenu li a, .fixeddragdroptopmenu .headertekstblokje_stijl_1 > * { color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.17); } .fixeddragdroptopmenu .sub_menu { background: #fff; } .fixeddragdroptopmenu .sub_menu ul li a { color: #000; } .mr10 { margin-right: 10px; } .ml10 { margin-left: 10px; } body .largeintrofont { margin-bottom: 0; padding-bottom: 0px; font-size: 50px; line-height: 60px; } body .largeintrobtn1 { margin-top: 20px; font-size: 20px; line-height: 20px; border-radius: 100px; padding: 15px 30px; } body .fs60 { font-size: 60px; line-height: 1.2; } body .largefont h1 { font-size: 6rem; line-height: 1.2; } body .largefont h2 { font-size: 4rem; line-height: 1.2; } .largefont h2:only-child { padding: 0; } .largefont p { font-size: 2.5rem; line-height: 1.2; } input.transparent { background: transparent !important; color: #fff !important; border: 2px #fff solid !important; } body .mt10 { margin-top: 10px; } .greyscale { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } body .link--kukuri { position: relative; display: inline-block; overflow: hidden; line-height: 1.2; color: transparent; } body .link--kukuri[data-emergence="visible"] { color: transparent; } .link--kukuri::before { content: attr(data-letters); position: absolute; z-index: 2; pointer-events: none; overflow: hidden; color: var(--bodytextcolor); white-space: nowrap; width: 0%; -webkit-transition: 0.4s 0.3s; transition: 0.4s 0.3s; opacity: 0; } .link--kukuri[data-emergence="visible"]:before { width: 100%; opacity: 1; } .link--kukuri:after { content: ''; position: absolute; height: 10px; width: 100%; top: 50%; margin-top: -8px; right: 0; background: var(--brandcolor); -webkit-transform: translate3d(-101%,0,0); transform: translate3d(-101%,0,0); -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); } .link--kukuri[data-emergence="visible"]:after { -webkit-transform: translate3d(101%,0,0); transform: translate3d(101%,0,0); } body .title__left_line { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; display: flex; justify-content: flex-start; align-items: center; font-weight: 700; } body .title__left_line span { font-size: 14px; line-height: 14px; letter-spacing: inherit; } body .title__left_line:before { display: inline-block; width: 5em; height: 2px; margin-right: 1em; background: var(--bodytextcolor); content: ''; } body .animate__fadeindown[data-emergence="hidden"] { opacity: 0; -webkit-transform: translate(0,-2em); -ms-transform: translate(0,-2em); transform: translate(0,-2em); } body .animate__fadeinright[data-emergence="hidden"] { opacity: 0; -webkit-transform: translate(-2rem, 0); -ms-transform: translate(-2rem, 0); transform: translate(-2rem, 0); } body .animate__fadeinleft[data-emergence="hidden"] { opacity: 0; -webkit-transform: translate(2rem, 0); -ms-transform: translate(2rem, 0); transform: translate(2rem, 0); } body .animate__fadeinup[data-emergence="hidden"] { opacity: 0; transform: translate(0,2rem) scale(.95); } body .animate__fadeinup[data-emergence="visible"], body .animate__fadeindown[data-emergence="visible"], .animate__fadeinright[data-emergence="visible"], body .animate__fadeinleft[data-emergence="visible"] { opacity: 1; transform: translateX(0px) translateY(0px) translateZ(0px); transition: opacity .2s cubic-bezier(0.455, 0.03, 0.515, 0.955), transform .3s cubic-bezier(0.455, 0.03, 0.515, 0.955); } .function_profile_background .image_background_wrapper { background-size: cover; background-position: center; } body h3.name { font-weight: bold; font-size: 25px; line-height: 1em; margin: 0 0 5px 0; padding: 0; } body h4.function { margin-top: 5px; letter-spacing: 1.6px; font-size: 12px; text-transform: uppercase; color: #7c8b99; opacity: .7; line-height: 1.5; } body input[type="text"].w50 { width: 50%; } body input[type="text"].dark-footer-text-field { font-size: 15px; line-height: 1em; margin-bottom: 0; border-style: none; border-radius: 0; color: var(--btncolor); background: #272b33; } .fixed__right_bottom { position: fixed; bottom: 0; right: 0; } body input.input__transparent_white, body textarea.input__transparent_white { background: rgba(255,255,255,.05); color: var(--primarycolor_textcolor); border: none; } body input.input__transparent_white:focus, body textarea.input__transparent_white:focus { background: rgba(255,255,255,.09); } body .button-loading { position: relative; } body .button-loading:after, body .button-loading:before { opacity: 0; } body .button-loading span, body .button-loading i { opacity: 0; } body .loader{ -webkit-animation: loading 400ms infinite linear; animation: loading 400ms infinite linear; border: 3px solid var(--primarycolor_textcolor); border-radius: 100%; border-right-color: rgba(0, 0, 0, 0)!important; border-top-color: rgba(0, 0, 0, 0)!important; content: ""; display: block; height: 20px; width: 20px; left: 50%; margin-left: -10px; margin-top: -10px; position: absolute; top: 50%; } @keyframes loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } body [data-duplicatedivasbackground]:after { content: ' '; position: absolute; top: 10px; left: -10px; background: var(--brandcolor); width: 100%; height: 100%; z-index: -1; } .rotate90 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } /* lijn met pijltje */ .line-arrow { background-color: var(--brandcolor); display: block; width: 5em; height: 2px; margin-right: 1em; position: relative; } .line-arrow-bottom, .line-arrow-line-top { width: 10px; height: 2px; background-color: var(--brandcolor); right:0; position: absolute; } .line-arrow-wrapper { right:-3px; position: relative; top: -4px; } .line-arrow-bottom { top: 8px; -webkit-transform: translate(0,-1px) rotate(-45deg); -ms-transform: translate(0,-1px) rotate(-45deg); transform: translate(0,-1px) rotate(-45deg); } .line-arrow-line-top { top: 0px; -webkit-transform: translate(0,1px) rotate(45deg); -ms-transform: translate(0,1px) rotate(45deg); transform: translate(0,1px) rotate(45deg); } a.largetoggle { background: var(--brandcolor); /*background: rgb(39, 43, 51);*/ position: fixed; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; right: 0; top: 0; z-index: 9999; } .hamburger-lines { position: relative; display: flex; width: 35px; height: 21px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .hamburger-line { width: 100%; height: 2px; background: var(--primarycolor_textcolor); } .menu_slidein_fullscreen { position: fixed; z-index: 9999; width: 100%; min-height: 100vh; right: 0; top: 0; background: rgb(34, 37, 45); color: #fff; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; transform: rotate(0deg) translateY(-120%); transition: transform 350ms cubic-bezier(0.42, 0, 0, 0.96); } .menu_slidein_fullscreen:before { background: var(--brandcolor); content: ''; position: fixed; top: 0; left: -10%; transform: rotate(0) translateY(-100%); height: 100vh; width: 150%; transition: transform 500ms cubic-bezier(0.42, 0, 0, 0.96); } .menu_slidein_fullscreen.menu_slidein_fullscreen_visible:before { transform: rotate(0deg) translateY(100%); } .menu_slidein_fullscreen_visible:after { position: absolute; right: 0; bottom: 0; z-index: 1; left: 0; height: 100%; background: linear-gradient(to bottom, #000 0%, transparent 80%); content: ''; opacity: .3; display: none; } .menu_slidein_fullscreen_visible { opacity: 1; transform: rotate(0deg) translateY(0%); } .menu_slidein_fullscreen .menuitems a { display: block; font-family: var(--primaryfont); font-size: 60px; padding: 7px 0; line-height: 60px; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--brandcolor); font-weight: 900; opacity: 1; transition: color 250ms cubic-bezier(0.42, 0, 0, 0.96), text-shadow 550ms cubic-bezier(0.42, 0, 0, 0.96); display: flex; align-items: center; flex-wrap: wrap; } .menu_slidein_fullscreen .menuitems a.active, .menu_slidein_fullscreen .menuitems a:hover { opacity: 1; color: var(--primarycolor_textcolor); -webkit-text-stroke-color: var(--primarycolor_textcolor); } .menu_slidein_fullscreen .menuitems a:before { width: 0em; transition: all 250ms cubic-bezier(0.42, 0, 0, 0.96); display: block; opacity: 0; height: 3px; margin-right: 0; background: var(--brandcolor); content: ''; } .menu_slidein_fullscreen .menuitems a.active:before, .menu_slidein_fullscreen .menuitems a:hover::before { opacity: 1; width: 3em; margin-right: 1em; } .menu_slidein_fullscreen .menuitems { width: 80%; max-width: 900px; margin: 40px auto; z-index: 2; } .spotify_green { background-color: #000; } .spotify_green > * { -webkit-filter: grayscale(100%); filter: grayscale(100%); mix-blend-mode: lighten; } .spotify_green:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; mix-blend-mode: screen; background: var(--btnbackground); } .blur { filter: blur(10px); } body.noscrolling { overflow: hidden !important; } .enlarged { transform: scale(1.2); opacity: .6; } .largetoggle.toggled { background: transparent; } .largetoggle.toggled .hamburger-lines .hamburger-line:first-child { transform: rotate(-45deg); top: 10px; position: relative; } .largetoggle.toggled .hamburger-lines .hamburger-line:nth-child(2) { opacity: 0; } .largetoggle.toggled .hamburger-lines .hamburger-line:last-child { transform: rotate(45deg); bottom: 10px; position: relative; } .backgroundcover { background-size: cover; background-position: center; } [data-horizontalmenu1] { display: flex; align-items: center; } .inhoud [data-horizontalmenu1] a { color: var(--bodytextcolor); display: block; padding: 7px 3px; line-height: 1; font-weight: bold; margin-right: 20px; border-bottom: 2px transparent solid; transition: all .3s ease; } .inhoud [data-horizontalmenu1] a:hover, .inhoud [data-horizontalmenu1] a.active { color: var(--brandcolor); border-color: var(--brandcolor); } [data-borderedcolumns] .columnwrapper .column:not(:last-child) { border-right: 1px solid rgba(216, 220, 232, 0.5); } .blurimageonhover .buttonwrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%) scale(.95); -webkit-transform: translate(-50%, -40%) scale(.95); opacity: 0; -webkit-transition: .7s cubic-bezier(.19,1,.22,1); transition: .7s cubic-bezier(.19,1,.22,1); filter: blur(4px); } .blurimageonhover:hover .buttonwrapper { filter: blur(0px); opacity: 1; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); } .blurimageonhover .image { pointer-events: none; position: relative; -webkit-transition: transform 1s cubic-bezier(.19,1,.22,1), background-position 10s ease-in-out; transition: transform 1s cubic-bezier(.19,1,.22,1), background-position 10s ease-in-out; } .blurimageonhover:hover .image { opacity: .7; filter: blur(4px); -webkit-transform: translateY(5px) scale(.95); transform: translateY(5px) scale(.95); } .website_zzper_hero_bg { position: absolute; top: 50%; right: 0; width: 50%; /*max-width: 900px;*/ z-index: 1; transform: translate(0%,-50%); overflow: hidden; } .underline-2px-brand { border-bottom: 2px solid var(--brandcolor); } .underline-2px-secondary { border-bottom: 2px solid var(--secondarycolor); } .brandcolor { color: var(--brandcolor); } .thirdcolor_bg { background: var(--thirdcolor); } .thirdcolor { color: var(--thirdcolor); } .secondarycolor, a.secondarycolor { color: var(--secondarycolor); } a.secondarycolor:hover { color: var(--secondarycolor-lighten-5); } .pb20 { padding-bottom: 2rem; } .uppercase { text-transform: uppercase; } .nomargin { margin: 0 !important; } .smalltext { font-size: 1.3rem; } .bottomright { position: absolute; bottom: 0; right: 0; } .roundedbordericon:last-child { margin-left: 2rem; } .roundedbordericon { width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px var(--bodytextcolor) solid; color: var(--bodytextcolor); background: transparent; text-decoration: none; border-radius: 3.5rem; } .input__wrapper { position: relative; } .input__wrapper i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 2rem; line-height: 1; } .linebackground { position: relative; } .linebackground:before { border-top: 2px var(--bodytextcolor) solid; content: " "; margin: 0 auto; position: absolute; top: 50%; left: 0; right: 0; opacity: .3; width: 100%; z-index: 1; } .linebackground > span { background: #fff; padding: 0 25px; z-index: 2; position: relative; } .lightborder { border: 1px var(--bodytextcolor-opacity-20) solid; } .linebackground > div { background: #fff; padding: 0 25px; z-index: 2; position: relative; display: inline-block; } .mouse_2px { width: 2.6rem; height: 4rem; display: inline-flex; align-items: center; justify-content: center; line-height: 1; border: 2px var(--brandcolor) solid; color: var(--brandcolor); border-radius: 100px; position: relative; } .mouse_2px i { /*animation: mouse-scroll 1.5s infinite;*/ animation: scroll ease 1.5s infinite; } .underlinebtn-thirdcolor:hover i, .whiteunderlinebtn:hover > i, .underlinebtn:hover > i { animation: scrollhorizontal ease 1.5s infinite; } .cmsinfo { font-family: 'circulair'; display: inline-flex; background: #4285f4; color: #fff; font-size: 12px; line-height: 1; padding: 3px 5px; border-radius: 3px; } .underline { text-decoration: underline; } .children-block > * { display: block; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/shop__base.css */ [data-form] input[name="proceed"] { display: none; } [data-remember__shop_user_wrapper] { display: none; } .discount { background: red; display: inline-flex; border-radius: 2px; padding: 3px 9px; color: #fff; font-weight: bold; font-size: 1.3rem; } [data-clientsite__submenu] [data-show_clientsite__submenu="shop/edit_quantity"] { display: none; } [data-checkoutpage] [data-view="shop__cart_small"] [href="/shop-checkout/"] { display: none; } [data-show_clientsite__submenu="shop__shoppingcart_dropdown_product_options"] .fa-angle-down { display: none; } .sidebar[data-view="shop__cart_small"] { padding: 3rem; } .c-test-mode-notice { transform: translateX(-50%); z-index: 4; background: #ffefcc; border: 1px solid #ffb100; border-radius: 5px; bottom: 20px; color: #8c6100; font-size: 15px; left: 50%; line-height: 1; padding: 6px 12px; position: fixed; transform: translateX(-50%); white-space: nowrap; } .c-live-mode-notice { transform: translateX(-50%); z-index: 24; background: hsla(161, 64%, 91%, 1); border: 1px solid #43d6a7; border-radius: 5px; bottom: 20px; color: hsla(161, 64%, 37%, 1); font-size: 15px; left: 50%; line-height: 1; padding: 6px 12px; position: fixed; transform: translateX(-50%); white-space: nowrap; } [data-ajaxdiv="shop__topbar_container"] { height: 8rem; } .staticpage_content a { color: var(--brandcolor); text-decoration: underline; } .speech-bubble { position: relative; background: #fff; border-radius: .8rem; display: block; } .speech-bubble:after { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 0; border: 20px solid transparent; border-bottom-color: #ffffff; border-top: 0; border-left: 0; margin-left: -10px; margin-top: -20px; } [data-ajaxdiv="shop__checkout_page_address"] { position: relative; } [data-checkoutpage] [data-show_clientsite__submenu="shop__address_delete_confirmation"] { display: none; } .pika-single { font-family: 'GTWalsheim' !important; border: none !important; } #mobile_accountmenuitems { display: none; } .mobile-topbar-wrapper { opacity: 0; } [data-show_clientsite__submenu="shop/edit_quantity"] { margin-top: .5rem; font-size: 15px; background: #ecf0f7; padding: .3rem; border-radius: 100px; padding-left: 1rem; } [data-show_clientsite__submenu="shop/edit_quantity"]:hover { background: hsla(218, 41%, 96%, 1); } [data-ajaxdiv="shop__reviews_list"] { -webkit-transition: .2s cubic-bezier(.19,1,.22,1); transition: .2s cubic-bezier(.19,1,.22,1); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/shop__checkout_progressbar.css */ .step { height: 40px; width: 40px; border-radius: 100px; background-color: var(--brandcolor-lighten-50); text-align: center; z-index: 3; position: relative; color: var(--brandcolor-opacity-50); } .step.active { width: 48px; height: 48px; color: var(--brandcolor); background-color: var(--brandcolor-lighten-50); font-size: 1.8rem; } .shop__checkout_progressbar_line_bg { z-index: 1; position: absolute; top: calc(50% - 1px); left: 0; border-top: 2px dashed var(--brandcolor-opacity-10); } .shop__checkout_progressbar_line { z-index: 2; position: absolute; top: calc(50% - 1px); left: 0; height: 2px; /* background-color: var(--brandcolor); */ -webkit-transition: ease-in-out .15s all; -moz-transition: ease-in-out .15s all; -ms-transition: ease-in-out .15s all; -o-transition: ease-in-out .15s all; transition: ease-in-out .15s all; border-top: 2px dashed var(--brandcolor-opacity-80); background: #fff; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/shop__reviews.css */ .shop__review_uitgelicht { position: relative; /*font-style: italic;*/ font-weight: normal; line-height: 1.6; padding: 4rem; border-radius: .6rem; background: #fff; box-shadow: 0 5px 35px 0px rgba(0,0,0,.12); max-width: 700px; margin: auto; margin-bottom: 4rem; } .shop__review_uitgelicht:after, .shop__review_uitgelicht:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .shop__review_uitgelicht:before { border-color: rgba(234, 234, 234, 0); border-top-color: #fff; border-width: 13px; margin-left: -13px; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/shop__topbar.css */ .inhoud [data-shop__placeholder_account] .fa-angle-down { position: relative; top: 1px; margin-left: .4rem; } [data-view="shop__website_topbar"] { min-height: 31px; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/shopping_cart.css */ .shopping_cart_header_submenu { z-index: 3; width: 40rem; min-height: 20rem; position: absolute; right: -2rem; top: calc(100% + 1rem); border: 1px #eaeaea solid; box-shadow: 0 5px 15px 0 rgba(0,0,0,.1); background: #fff; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/shopping_cart_small.css */ [data-checkoutpage] [data-ajaxdiv="shop__cart_small"] .checkout_notice { display: block; } [data-checkoutpage] [data-ajaxdiv="shop__cart_small"] .dropdown_notice { display: none; } [data-clientsite__submenu] .dropdown_notice { display: block; } [data-clientsite__submenu] .checkout_notice { display: none; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/sidebar.css */ .sidebar__overlay { position: fixed; background: rgba(0,0,0,.5); z-index:6; width: 100vw; height: 100vh; top:0; right: 0; transition: opacity .2s ease; opacity: 0; pointer-events: none; } body.sidebar__visible { overflow: hidden; } /*body.sidebar__visible section *:not(.btn) { filter: blur(5px); }*/ body.sidebar__visible .sidebar__overlay { opacity: 0; pointer-events: auto; } .sidebar { overflow-x: hidden; overflow-y: auto; position: fixed; top:0; right: 0; z-index:7; background:#fff; width: 33vw; max-width: 60rem; padding: 2rem; height: 100vh; transform: translateX(100%); transition: all 0.2s cubic-bezier(0.1, 0.9, 0.2, 1); } body.sidebar__visible .sidebar { transform: translateX(0); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/skeleton.css */ [data-skeleton] { background: #eee; border-radius: .3rem; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/socialicons.css */ .socialicon { border-radius: 100%; display: inline-flex; height: 29px !important; margin: 0 10px 0 0; position: relative; width: 29px !important; text-align: center; text-decoration: none; font-size: 14px !important; align-items: center; justify-content: center; } .socialicon i { color: #fff; } .socialicon.facebook { background-color: } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/socialmedia.css */ [data-view="site__social_media"] { min-width: 30px; min-height: 30px; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/style_variants.css */ /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/svgbackground.css */ [data-svgbackground="1"]{ background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%234FE'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E"); background-size: cover; } [data-svgbackground="2"]{ background-color: #ffff00; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff8000'/%3E%3Cstop offset='1' stop-color='%23ff8000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2300ff19'/%3E%3Cstop offset='1' stop-color='%2300ff19' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239900ff'/%3E%3Cstop offset='1' stop-color='%239900ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffff00'/%3E%3Cstop offset='1' stop-color='%23ffff00' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FF0000'/%3E%3Cstop offset='1' stop-color='%23FF0000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230CF'/%3E%3Cstop offset='1' stop-color='%230CF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E"); background-size: cover; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/tabs.css */ [data-tabs] [data-tab] { display: none; } [data-tabs] [data-tab]:first-child { display: block; } [data-tabtheme="default"] [data-tabnavigation] { margin: auto; text-align: center; margin-bottom: 6rem; } [data-tabtheme="default"] [data-tabnavigation] a { color: var(--bodytextcolor); border-radius: 100px; display: inline-flex; padding: 7px 22px; margin-right: 2rem; transition: .3s cubic-bezier(.19,1,.22,1); border: 2px rgba(0,0,0,.07) solid; } [data-tabtheme="default"] [data-tabnavigation] a:last-child { margin-right: 0; } [data-tabtheme="default"] [data-tabnavigation] a:active { background: var(--brandcolor-opacity-10); } [data-tabtheme="default"] [data-tabnavigation] a.active, [data-tabtheme="default"] [data-tabnavigation] a:hover { color: var(--brandcolor); /*box-shadow: 0 0 10px rgba(0,0,0,.2);*/ border: 2px var(--brandcolor) solid; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/tags.css */ .tag { font-size: 12px; line-height: 18px; font-weight: 400; background-color: #cce1ff; color: #003580; padding: 2px 8px; display: inline-block; border-radius: 4px; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/text-align.css */ .text-center { text-align: center; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/text-align.mobile.css */ @media only screen and (max-width : 959px) { .mobile-text-center { text-align: center; } .mobile-text-left { text-align: left; } } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/textshadows.css */ [data-textshadow="1"]{ text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.36); } [data-textshadow="2"] { text-shadow: 0px 2px 40px rgba(0, 0, 0, 0.16); } [data-textshadow="3"] { text-shadow: 0px 1px 10px var(--secondarycolor-opacity-40); } [data-textshadow="4"] { text-shadow: 0 0 65px rgba(0,0,0,.4); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/textstyles.css */ .bg-text { /*position: absolute;*/ /*left: -20px;*/ /*top: -36px;*/ color: rgba(0,0,0,.03); font-size: 10rem; line-height: 1; font-weight: 700; /*text-transform: uppercase;*/ } .muted { color: var(--lighttext) !important; } .inhoud .text-justify { text-align: justify; } .inhoud .text-small { font-size: 1.3rem; } .textalignright, .text-right { text-align: right; } .boldpressed { font-weight: 900 !important; letter-spacing: -0.03em !important; } .inhoud .text-underline { text-decoration: underline; } .inhoud .text-italic { font-style: italic; } .text-bold { font-weight: bold; } .hover-underline:hover { text-decoration: underline; } .text-uppercase { text-transform: uppercase; } .word-break { word-break: break-all; } h1 { position: relative; /* color: var(--brandcolor-darken-20); */ } /* h1:after { content: ''; position: absolute; background: var(--secondarycolor); width: 38px; height: 4px; border-radius: 4px; bottom: -10px; left: 50%; margin-left: -18px; } */ .text-hover-underline:hover { /* text-decoration: underline; */ } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/timeline.css */ [data-timeline] > div:before { display: block; height: 100%; border: 1px solid #ccc; content: ""; top: 0px; left: 25%; width: 0px; bottom: 0; position: absolute; } [data-timeline] > div { position: relative; /*padding-left: 3rem;*/ padding: 1.5rem 2rem 1.5rem 3rem; } [data-timeline] > div.place:after { background-color: #fff; content: ""; display: block; height: 13px; width: 13px; border-radius: 20px; border: 2px solid #ccc; /*margin-left: -6px;*/ position: absolute; left: 25%; top: 50%; transform: translate(-50%,-50%); } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/tinymce.css */ .mce-content-body { line-height: 1.8 !important; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/tippy-light.css */ .tippy-popper[x-placement^=top] .tippy-tooltip.light-theme .tippy-arrow{border-top:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme .tippy-arrow{border-bottom:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme .tippy-arrow{border-left:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme .tippy-arrow{border-right:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-tooltip.light-theme{color:#26323d;box-shadow:0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15);background-color:#fff}.tippy-tooltip.light-theme .tippy-backdrop{background-color:#fff}.tippy-tooltip.light-theme .tippy-roundarrow{fill:#fff}.tippy-tooltip.light-theme[data-animatefill]{background-color:transparent} /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/tippy.css */ .tippy-touch{ cursor:pointer!important; } .tippy-notransition{ transition:none!important } .tippy-popper{ /* font-family: 'circulair' !important; */ max-width:350px; -webkit-perspective:700px; perspective:700px; z-index:9999; outline:0; transition-timing-function:cubic-bezier(.165,.84,.44,1); pointer-events:none; line-height:1.4 } .tippy-popper[data-html]{ max-width:96%; max-width:calc(100% - 20px) } .tippy-popper[x-placement^=top] .tippy-backdrop{ border-radius:40% 40% 0 0 } .tippy-popper[x-placement^=top] .tippy-roundarrow{ bottom:-8px; -webkit-transform-origin:50% 0; transform-origin:50% 0 } .tippy-popper[x-placement^=top] .tippy-roundarrow svg{ position:absolute; left:0; -webkit-transform:rotate(180deg); transform:rotate(180deg) } .tippy-popper[x-placement^=top] .tippy-arrow{ border-top:7px solid #333; border-right:7px solid transparent; border-left:7px solid transparent; bottom:-7px; margin:0 6px; -webkit-transform-origin:50% 0; transform-origin:50% 0 } .tippy-popper[x-placement^=top] .tippy-backdrop{ -webkit-transform-origin:0 90%; transform-origin:0 90% } .tippy-popper[x-placement^=top] .tippy-backdrop[data-state=visible]{ -webkit-transform:scale(6) translate(-50%,25%); transform:scale(6) translate(-50%,25%); opacity:1 } .tippy-popper[x-placement^=top] .tippy-backdrop[data-state=hidden]{ -webkit-transform:scale(1) translate(-50%,25%); transform:scale(1) translate(-50%,25%); opacity:0 } .tippy-popper[x-placement^=top] [data-animation=shift-toward][data-state=visible]{ opacity:1; -webkit-transform:translateY(-10px); transform:translateY(-10px) } .tippy-popper[x-placement^=top] [data-animation=shift-toward][data-state=hidden]{ opacity:0; -webkit-transform:translateY(-20px); transform:translateY(-20px) } .tippy-popper[x-placement^=top] [data-animation=perspective]{ -webkit-transform-origin:bottom; transform-origin:bottom } .tippy-popper[x-placement^=top] [data-animation=perspective][data-state=visible]{ opacity:1; -webkit-transform:translateY(-10px) rotateX(0); transform:translateY(-10px) rotateX(0) } .tippy-popper[x-placement^=top] [data-animation=perspective][data-state=hidden]{ opacity:0; -webkit-transform:translateY(0) rotateX(90deg); transform:translateY(0) rotateX(90deg) } .tippy-popper[x-placement^=top] [data-animation=fade][data-state=visible]{ opacity:1; -webkit-transform:translateY(-10px); transform:translateY(-10px) } .tippy-popper[x-placement^=top] [data-animation=fade][data-state=hidden]{ opacity:0; -webkit-transform:translateY(-10px); transform:translateY(-10px) } .tippy-popper[x-placement^=top] [data-animation=shift-away][data-state=visible]{ opacity:1; -webkit-transform:translateY(-10px); transform:translateY(-10px) } .tippy-popper[x-placement^=top] [data-animation=shift-away][data-state=hidden]{ opacity:0; -webkit-transform:translateY(0); transform:translateY(0) } .tippy-popper[x-placement^=top] [data-animation=scale][data-state=visible]{ opacity:1; -webkit-transform:translateY(-10px) scale(1); transform:translateY(-10px) scale(1) } .tippy-popper[x-placement^=top] [data-animation=scale][data-state=hidden]{ opacity:0; -webkit-transform:translateY(0) scale(0); transform:translateY(0) scale(0) } .tippy-popper[x-placement^=bottom] .tippy-backdrop{ border-radius:0 0 30% 30% } .tippy-popper[x-placement^=bottom] .tippy-roundarrow{ top:-8px; -webkit-transform-origin:50% 100%; transform-origin:50% 100% } .tippy-popper[x-placement^=bottom] .tippy-roundarrow svg{ position:absolute; left:0; -webkit-transform:rotate(0); transform:rotate(0) } .tippy-popper[x-placement^=bottom] .tippy-arrow{ border-bottom:7px solid #333; border-right:7px solid transparent; border-left:7px solid transparent; top:-7px; margin:0 6px; -webkit-transform-origin:50% 100%; transform-origin:50% 100% } .tippy-popper[x-placement^=bottom] .tippy-backdrop{ -webkit-transform-origin:0 -90%; transform-origin:0 -90% } .tippy-popper[x-placement^=bottom] .tippy-backdrop[data-state=visible]{ -webkit-transform:scale(6) translate(-50%,-125%); transform:scale(6) translate(-50%,-125%); opacity:1 } .tippy-popper[x-placement^=bottom] .tippy-backdrop[data-state=hidden]{ -webkit-transform:scale(1) translate(-50%,-125%); transform:scale(1) translate(-50%,-125%); opacity:0 } .tippy-popper[x-placement^=bottom] [data-animation=shift-toward][data-state=visible]{ opacity:1; -webkit-transform:translateY(10px); transform:translateY(10px) } .tippy-popper[x-placement^=bottom] [data-animation=shift-toward][data-state=hidden]{ opacity:0; -webkit-transform:translateY(20px); transform:translateY(20px) } .tippy-popper[x-placement^=bottom] [data-animation=perspective]{ -webkit-transform-origin:top; transform-origin:top } .tippy-popper[x-placement^=bottom] [data-animation=perspective][data-state=visible]{ opacity:1; -webkit-transform:translateY(10px) rotateX(0); transform:translateY(10px) rotateX(0) } .tippy-popper[x-placement^=bottom] [data-animation=perspective][data-state=hidden]{ opacity:0; -webkit-transform:translateY(0) rotateX(-90deg); transform:translateY(0) rotateX(-90deg) } .tippy-popper[x-placement^=bottom] [data-animation=fade][data-state=visible]{ opacity:1; -webkit-transform:translateY(10px); transform:translateY(10px) } .tippy-popper[x-placement^=bottom] [data-animation=fade][data-state=hidden]{ opacity:0; -webkit-transform:translateY(10px); transform:translateY(10px) } .tippy-popper[x-placement^=bottom] [data-animation=shift-away][data-state=visible]{ opacity:1; -webkit-transform:translateY(10px); transform:translateY(10px) } .tippy-popper[x-placement^=bottom] [data-animation=shift-away][data-state=hidden]{ opacity:0; -webkit-transform:translateY(0); transform:translateY(0) } .tippy-popper[x-placement^=bottom] [data-animation=scale][data-state=visible]{ opacity:1; -webkit-transform:translateY(10px) scale(1); transform:translateY(10px) scale(1) } .tippy-popper[x-placement^=bottom] [data-animation=scale][data-state=hidden]{ opacity:0; -webkit-transform:translateY(0) scale(0); transform:translateY(0) scale(0) } .tippy-popper[x-placement^=left] .tippy-backdrop{ border-radius:50% 0 0 50% } .tippy-popper[x-placement^=left] .tippy-roundarrow{ right:-16px; -webkit-transform-origin:33.33333333% 50%; transform-origin:33.33333333% 50% } .tippy-popper[x-placement^=left] .tippy-roundarrow svg{ position:absolute; left:0; -webkit-transform:rotate(90deg); transform:rotate(90deg) } .tippy-popper[x-placement^=left] .tippy-arrow{ border-left:7px solid #333; border-top:7px solid transparent; border-bottom:7px solid transparent; right:-7px; margin:3px 0; -webkit-transform-origin:0 50%; transform-origin:0 50% } .tippy-popper[x-placement^=left] .tippy-backdrop{ -webkit-transform-origin:100% 0; transform-origin:100% 0 } .tippy-popper[x-placement^=left] .tippy-backdrop[data-state=visible]{ -webkit-transform:scale(6) translate(40%,-50%); transform:scale(6) translate(40%,-50%); opacity:1 } .tippy-popper[x-placement^=left] .tippy-backdrop[data-state=hidden]{ -webkit-transform:scale(1.5) translate(40%,-50%); transform:scale(1.5) translate(40%,-50%); opacity:0 } .tippy-popper[x-placement^=left] [data-animation=shift-toward][data-state=visible]{ opacity:1; -webkit-transform:translateX(-10px); transform:translateX(-10px) } .tippy-popper[x-placement^=left] [data-animation=shift-toward][data-state=hidden]{ opacity:0; -webkit-transform:translateX(-20px); transform:translateX(-20px) } .tippy-popper[x-placement^=left] [data-animation=perspective]{ -webkit-transform-origin:right; transform-origin:right } .tippy-popper[x-placement^=left] [data-animation=perspective][data-state=visible]{ opacity:1; -webkit-transform:translateX(-10px) rotateY(0); transform:translateX(-10px) rotateY(0) } .tippy-popper[x-placement^=left] [data-animation=perspective][data-state=hidden]{ opacity:0; -webkit-transform:translateX(0) rotateY(-90deg); transform:translateX(0) rotateY(-90deg) } .tippy-popper[x-placement^=left] [data-animation=fade][data-state=visible]{ opacity:1; -webkit-transform:translateX(-10px); transform:translateX(-10px) } .tippy-popper[x-placement^=left] [data-animation=fade][data-state=hidden]{ opacity:0; -webkit-transform:translateX(-10px); transform:translateX(-10px) } .tippy-popper[x-placement^=left] [data-animation=shift-away][data-state=visible]{ opacity:1; -webkit-transform:translateX(-10px); transform:translateX(-10px) } .tippy-popper[x-placement^=left] [data-animation=shift-away][data-state=hidden]{ opacity:0; -webkit-transform:translateX(0); transform:translateX(0) } .tippy-popper[x-placement^=left] [data-animation=scale][data-state=visible]{ opacity:1; -webkit-transform:translateX(-10px) scale(1); transform:translateX(-10px) scale(1) } .tippy-popper[x-placement^=left] [data-animation=scale][data-state=hidden]{ opacity:0; -webkit-transform:translateX(0) scale(0); transform:translateX(0) scale(0) } .tippy-popper[x-placement^=right] .tippy-backdrop{ border-radius:0 50% 50% 0 } .tippy-popper[x-placement^=right] .tippy-roundarrow{ left:-16px; -webkit-transform-origin:66.66666666% 50%; transform-origin:66.66666666% 50% } .tippy-popper[x-placement^=right] .tippy-roundarrow svg{ position:absolute; left:0; -webkit-transform:rotate(-90deg); transform:rotate(-90deg) } .tippy-popper[x-placement^=right] .tippy-arrow{ border-right:7px solid #333; border-top:7px solid transparent; border-bottom:7px solid transparent; left:-7px; margin:3px 0; -webkit-transform-origin:100% 50%; transform-origin:100% 50% } .tippy-popper[x-placement^=right] .tippy-backdrop{ -webkit-transform-origin:-100% 0; transform-origin:-100% 0 } .tippy-popper[x-placement^=right] .tippy-backdrop[data-state=visible]{ -webkit-transform:scale(6) translate(-140%,-50%); transform:scale(6) translate(-140%,-50%); opacity:1 } .tippy-popper[x-placement^=right] .tippy-backdrop[data-state=hidden]{ -webkit-transform:scale(1.5) translate(-140%,-50%); transform:scale(1.5) translate(-140%,-50%); opacity:0 } .tippy-popper[x-placement^=right] [data-animation=shift-toward][data-state=visible]{ opacity:1; -webkit-transform:translateX(10px); transform:translateX(10px) } .tippy-popper[x-placement^=right] [data-animation=shift-toward][data-state=hidden]{ opacity:0; -webkit-transform:translateX(20px); transform:translateX(20px) } .tippy-popper[x-placement^=right] [data-animation=perspective]{ -webkit-transform-origin:left; transform-origin:left } .tippy-popper[x-placement^=right] [data-animation=perspective][data-state=visible]{ opacity:1; -webkit-transform:translateX(10px) rotateY(0); transform:translateX(10px) rotateY(0) } .tippy-popper[x-placement^=right] [data-animation=perspective][data-state=hidden]{ opacity:0; -webkit-transform:translateX(0) rotateY(90deg); transform:translateX(0) rotateY(90deg) } .tippy-popper[x-placement^=right] [data-animation=fade][data-state=visible]{ opacity:1; -webkit-transform:translateX(10px); transform:translateX(10px) } .tippy-popper[x-placement^=right] [data-animation=fade][data-state=hidden]{ opacity:0; -webkit-transform:translateX(10px); transform:translateX(10px) } .tippy-popper[x-placement^=right] [data-animation=shift-away][data-state=visible]{ opacity:1; -webkit-transform:translateX(10px); transform:translateX(10px) } .tippy-popper[x-placement^=right] [data-animation=shift-away][data-state=hidden]{ opacity:0; -webkit-transform:translateX(0); transform:translateX(0) } .tippy-popper[x-placement^=right] [data-animation=scale][data-state=visible]{ opacity:1; -webkit-transform:translateX(10px) scale(1); transform:translateX(10px) scale(1) } .tippy-popper[x-placement^=right] [data-animation=scale][data-state=hidden]{ opacity:0; -webkit-transform:translateX(0) scale(0); transform:translateX(0) scale(0) } .tippy-tooltip{ position:relative; color:#fff; border-radius:4px; font-size:.9rem; padding:.3rem .6rem; text-align:center; will-change:transform; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; background-color:#333 } .tippy-tooltip[data-size=small]{ padding:.2rem .4rem; font-size:.75rem } .tippy-tooltip[data-size=large]{ padding: .7rem 1rem; font-size:1.4rem; } .tippy-tooltip[data-animatefill]{ overflow:hidden; background-color:transparent } .tippy-tooltip[data-animatefill] .tippy-content{ transition:-webkit-clip-path cubic-bezier(.46,.1,.52,.98); transition:clip-path cubic-bezier(.46,.1,.52,.98); transition:clip-path cubic-bezier(.46,.1,.52,.98),-webkit-clip-path cubic-bezier(.46,.1,.52,.98) } .tippy-tooltip[data-interactive],.tippy-tooltip[data-interactive] path{ pointer-events:auto } .tippy-tooltip[data-inertia][data-state=visible]{ transition-timing-function:cubic-bezier(.53,2,.36,.85) } .tippy-tooltip[data-inertia][data-state=hidden]{ transition-timing-function:ease } .tippy-arrow,.tippy-roundarrow{ position:absolute; width:0; height:0 } .tippy-roundarrow{ width:24px; height:8px; fill:#333; pointer-events:none } .tippy-backdrop{ position:absolute; will-change:transform; background-color:#333; border-radius:50%; width:26%; left:50%; top:50%; z-index:-1; transition:all cubic-bezier(.46,.1,.52,.98); -webkit-backface-visibility:hidden; backface-visibility:hidden } .tippy-backdrop:after{ content:""; float:left; padding-top:100% } body:not(.tippy-touch) .tippy-tooltip[data-animatefill][data-state=visible] .tippy-content{ -webkit-clip-path:ellipse(100% 100% at 50% 50%); clip-path:ellipse(100% 100% at 50% 50%) } body:not(.tippy-touch) .tippy-tooltip[data-animatefill][data-state=hidden] .tippy-content{ -webkit-clip-path:ellipse(5% 50% at 50% 50%); clip-path:ellipse(5% 50% at 50% 50%) } body:not(.tippy-touch) .tippy-popper[x-placement=right] .tippy-tooltip[data-animatefill][data-state=visible] .tippy-content{ -webkit-clip-path:ellipse(135% 100% at 0 50%); clip-path:ellipse(135% 100% at 0 50%) } body:not(.tippy-touch) .tippy-popper[x-placement=right] .tippy-tooltip[data-animatefill][data-state=hidden] .tippy-content{ -webkit-clip-path:ellipse(40% 100% at 0 50%); clip-path:ellipse(40% 100% at 0 50%) } body:not(.tippy-touch) .tippy-popper[x-placement=left] .tippy-tooltip[data-animatefill][data-state=visible] .tippy-content{ -webkit-clip-path:ellipse(135% 100% at 100% 50%); clip-path:ellipse(135% 100% at 100% 50%) } body:not(.tippy-touch) .tippy-popper[x-placement=left] .tippy-tooltip[data-animatefill][data-state=hidden] .tippy-content{ -webkit-clip-path:ellipse(40% 100% at 100% 50%); clip-path:ellipse(40% 100% at 100% 50%) } @media (max-width:360px){ .tippy-popper{ max-width:96%; max-width:calc(100% - 20px) } } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/toggle.css */ [data-toggle] > *:last-child { display: none; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/typography.css */ .lowercase { text-transform: lowercase; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/website_card.css */ .website_card { border-radius: 4px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px; border-radius: 4px; margin-bottom: 4rem; } .website_card > div:first-child { position: relative; background-color: rgb(217, 217, 217); width: 100%; height: 163px; border-bottom: 1px solid rgb(242, 242, 242); text-align: center; text-transform: uppercase; opacity: .4; font-size: 14px; letter-spacing: 2px; display: flex; align-items: center; justify-content: center; } .website_card > div:nth-child(2){ background-color: rgb(255, 255, 255); position: relative; padding: 11px 22px; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/websites.css */ /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/width.css */ .mw400 { max-width: 400px; } .mw600 { max-width: 600px; } .mw700 { max-width: 700px; } .mw1200 { max-width: 1200px; } .mw900 { max-width: 900px; } .w125 { width: 12.5%; } .w116, .w16 { width: 16.6666666666666666666667%; } .w10 { width: 10%; } .w90 { width: 90%; } .w25 { width: 25%; } .w22 { width: 22%; } .w35 { width: 35%; } .w20 { width: 20%; } .w40 { width: 40%; } .w33 { width: 33.3333333333333333333333333333333333333333333333333333333%; } .w31 { width: 31%; } .w32 { width: 32% } .w60 { width: 60%; } .w70 { width: 70%; } .w55 { width: 55%; } .w66 { width: 66.666666666666666666666666666666666666%; } .w75 { width: 75%; } .w47 { width: 47%; } .w48 { width: 48%; } .w45 { width: 45%; } .w50 { width: 50%; } .w90 { width: 90%; } .w80 { width: 80%; } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/width.mobile.css */ @media only screen and (max-width : 959px) { .mobile-w50 { width: 50% !important; } .mobile-w80 { width: 80%; } .mobile-w100 { width: 100%; } .mobile-w90 { width: 90%; } } /* include css /home/admin/domains/longlifebox.nl/public_html/dev/css/files/z_mobile.css */ @media (min-width:321px) and (max-width:960px) { .w25 { width: 50%; } } @media only screen and (min-width : 960px) { .desktop-pr-4 { padding-right: 4rem; } } @media only screen and (max-width : 959px) { .mobile-scale-85 { transform: scale(.85); } .admin__siteinfo { display: none; } .voordelen_checklist_wrapper { transform: translate(0px, 0); width: 90% !important; margin: auto; } .hoewerkthet .timeline { display: none; } [data-headercopy] { display: none; } img.box-home { width: 70%; margin-top: 6rem; } .mobile-mb-0 { margin-bottom: 0; } .homepage_header_div { height: auto; } .mobile-mb-1 { margin-bottom: 1rem; } .pt-4-mobile { padding-top: 4rem; } .text-center-mobile { text-align: center; } .mobile-mb-40 { margin-bottom: 4rem; } .mobile-pl20 { padding-left: 2rem; } .mobile-mb-2 { margin-bottom: 2rem; } .mobile__flex__start_center { justify-content: flex-start !important; align-items: center !important; } .mobile-mb-3 { margin-bottom: 3rem; } body .link--kukuri::before { position: relative; white-space: normal; display: block; } .mobile-stack { display: block !important; } .website_zzper_hero_bg { display: none; } [data-footer] img.footer__logo { margin-bottom: 3rem; } .desktop__padding_bottom_6em { padding-bottom: 2em; } .inhoud .footer__sitemap { width: 100%; margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .inhoud .footer__sitemap a { width: 50%; margin-right: 0 !important; margin-bottom: .6rem; display: block; } [data-header], [data-promobar] { display: none; } .mobile-reverse { flex-direction: column-reverse; } .mobile-reverse > *:nth-child(2) { margin-bottom: 2rem; } .wrapper_mouse_scrolldown { transform: none; } .wrapper_buttons { justify-content: center; align-items: flex-start; text-align: center; } .wrapper_buttons > *:first-child { margin-bottom: 2rem; } .largepadding { padding: 4rem 1.5rem; } .w100_mobile { width: 100%; margin-bottom: 40px; } /* .p60 { padding: 4rem; } */ header.onepagemenu.araxes [data-socialmedia] { width: 100%; justify-content: flex-start; } body .leftcolumnfeatures { padding: 0px; text-align: center; } .bookmarkcategorieen { margin-top: 40px; font-size: 14px; } .inhoud.mobilemenuvisible { transform: translateX(-75%); } .debug_admin__info__bar { display: none !important; } body .link--kukuri { font-size: 4rem; } .inhoud section { padding-top: 4rem; padding-bottom: 4rem; } .inhoud .largefont { font-size: 2em; } .inhoud .extralargefont { font-size: 2.4em; } .inhoud h1 { font-size: 1.7em; } .example_website { margin-top: 40px; } [data-dropdown] { width: 100%; margin-top: 20px; } .wrapper_bookmarksearch { z-index: 123123123 !important; position: fixed !important; top: 0; left: 0; padding: 10px; background: #fff; width: 100%; height: auto; } .adminpageinfo { display: none; } body .leftcolumnfeatures .smallunderlineleft:after { display: none; } .new_demoframe { right: inherit; left: 15px; bottom: 15px; padding: 9px; font-size: 12px; } .columnwrapper { display: block; } .new_demoframe .new_demoframe_logo { height: 30px; margin-right: 10px; } .new_demoframe .smalltext { font-size: 11px; line-height: 1.4em; } body .scrolltotop { right: calc(50% - 25px); } header.onepagemenu .menuitems a:not(.btn) { margin: 15px 0 15px 0; font-size: 18px; line-height: 18px; display: block; } header.onepagemenu [data-socialmedia] { margin-top: 60px; } header.onepagemenu .menuitems a.btn { margin: 0; } header.onepagemenu { display: block; width: 75%; height: 100%; padding: 30px; right: 0; top: 0; left: inherit; position: fixed !important; transform: translateX(100%); z-index: 121; transition: .3s cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: .3s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: .3s cubic-bezier(0.4, 0, 0.2, 1); } header.onepagemenu.araxes .title_header { width: 100%; display: block; margin: inherit; margin-bottom: 40px; } header.onepagemenu .menuitems { display: block; width: 100%; } .centeredsmallcalltoaction { display: block; width: 100%; min-width: 100%; } body .introdivpadding { padding: 30px 0; } body .multiplebtnwrapper .btn { margin: 10px 0; display: block; width: 100%; } body .tinywrapper { max-width: 100%; width: 100%; } body .smallwrapper { max-width: 100%; } body .dlblog > div { margin-bottom: 20px; width: 100%; } .centeredsmallcalltoaction .leftside { border: none; border-bottom: 2px rgba(255,255,255,.4) solid; margin-bottom: 20px; } .column { width: 100%; } #menuhtml { display: none; } .alternaterow .thumbnail { border-radius: 300px; overflow: hidden; width: 150px; height: 150px; display: inline-block; background-size: cover; background-position: center center; background-repeat: no-repeat; float: none; margin-bottom: 18px; } .alternaterow .over { width: 100% !important; padding: 0 !important; } .instaimagewrapper { width: 100% !important; height: auto !important; margin: 0 0 20px 0 !important; border: none !important; } .instaimage { margin: 0; } .contentsubmenu a { display: block; padding: 0 0 10px 0; } .mobile { display: block; } .fr-view img { height: auto !important; width: 100% !important; } #footer .row, .smallwrapper, .w1000 { width: 100%; } .sectionpadding { padding: 30px 10px; } img, iframe { max-width: 100%; height: auto; } .hamburger-menu { position: fixed; z-index: 122; bottom: 15px; right: 15px; width: 50px; height: 50px; border-radius: 100%; cursor: pointer; transition: all 0.23s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); } #tm:checked ~ .responsivesidebar a { opacity: 1; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); } #tm:checked ~ .responsivesidebar li:nth-child(1) a { padding-top: 0px; } .bar.animator { background: rgba(255, 255, 255, 0); } .bar.animator:after { top: 0; transform: rotate(45deg); transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); } .bar.animator:before { bottom: 0; transform: rotate(-45deg); transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); } .responsivemenu { z-index: 9999; position: fixed; height: 50px; width: 100%; top: 0; background: #000; left: 0; display: block; } #bgvid, .pausebutton{ display: none; } .desktopinline { display: none; } .desktop { display: none !important; } .portfolioitems { display: none; } .portfolioitems li { position: relative; float: left; width: 100%; height: 300px; overflow: hidden; text-align: left; color: #fff; text-decoration: none; } .ajaxsidebar { display: none; } .ajaxsubmenu { width: 100%; } .fullwidthrows .thumbnail { border-radius: 300px; overflow: hidden; width: 150px; height: 150px; display: inline-block; background-size: cover; background-position: center center; background-repeat: no-repeat; /* float: left; */ display: block; float: none; margin: 20px auto; } .personslider .thumbnail { display: none; } .fullwidthrows .item .inhoud h2 { text-align: center; } .fullwidthrows .inhoud { width: 100%; padding: 0; } .fullwidthrows .item { padding: 30px; } h1.pagetitle { padding-left: 30px; } section .inhoud { padding: 0 30px 30px 30px; } .instaimage { margin: 0; height: auto; } #contactform .row { padding: 30px; } .verplicht { display: none; } .flexjustifyaligncenter { display: block; } .w20, .w33, .w25, .w27, .w55, .w23, .w35, .w48, .w50, .w60, .w66, .w70, .w75, .w80, .w90, .w40, .w45, .w1000, .w30 { width: 100%; } .w80-mobile { width: 80%; } .w90-mobile { width: 90%; } .mediumheight { height: 250px; } .automargin-mobile { margin: auto; } .rowcontent p:last-child { padding-bottom: 0; } .slide { padding: 54px; } .menu { display: none; } .footerlogo { display: none; } .totop { z-index: 9; position: fixed; display: none; bottom: 30px; right: 30px; margin: 0; } .mobile-notranslate { transform: translate(0, 0) !important; } .footer { padding: 20px; min-height: 200px; } body #modal { top: 0; left: 0; /*left: 50%;*/ width: 100% !important; /* height: 100% !important; */ height: auto; max-height: 100%; overflow-y: auto !important; margin: 0; } [data-ajaxdiv="shop__topbar_container"] { display: none; } }