@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;900&display=swap');

* {margin:0px; padding:0px; box-sizing:border-box;}

:root {
  --bruingoud: rgba(182, 155, 86, 1);
  --wit: #fff;
  --zwart1: rgba(22,22,22,1);
  --rood1: #f8696b;
  --oranje1: #fa9d75;
  --oranje2: #fdd17f;
  --groen1: #e0e383;
  --groen2: #a2d07f;
  --groen3: #63be7b;
}

body { font-family: "Montserrat", sans-serif; font-weight:300; font-size:16px; margin:0px; padding:0px; color:#161616; scroll-behavior: smooth; } /*background-color:#c2c2c2;*/
body::-webkit-scrollbar { display:none; }
html, body, form { height:100%; -ms-overflow-style:none; scrollbar-width:none; scroll-behavior: smooth; }
p, ol, ul { line-height:180%; }
a { cursor:pointer; }
p { margin:10px 0px; }
strong { font-weight:900; }
section { min-height:100%; width:100%; padding:0px; position:relative; } /* height:100%; */

textarea, input { outline:none; -webkit-appearance: none; font-family: "Montserrat", sans-serif; font-size:16px; border:0px solid #cccccc; padding:15px; background-color:#f2f2f2; }
input, textarea, select { -webkit-appearance: none; border:0px solid #cccccc; padding:15px; width:100%; box-sizing:border-box; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#cccccc;}
input::-moz-placeholder, textarea::-webkit-input-placeholder { color:#cccccc; }
input[type="date"] { font-size: 18px; }
input[type=checkbox] { -webkit-appearance:checkbox; width:unset; }
label { margin-bottom:10px; display:inline-block; }

h1 { font-size:75px; font-family: "Montserrat", sans-serif; text-transform:unset; text-transform:uppercase; }
h2 { font-size:50px; font-family: "Montserrat", sans-serif; text-transform:unset; text-transform:uppercase; }
h3 { font-size:40px; font-family: "Montserrat", sans-serif; text-transform:unset; text-transform:uppercase; margin:0px; padding:0px; line-height:100%; }
h4 { font-size:50px; font-family:"wendy-lp", sans-serif; font-weight:500; font-style:normal; text-transform:unset; }
h5 { font-size:20px; font-family: "Montserrat", sans-serif; text-transform:unset; text-transform:uppercase; }

a:link {color: #161616; text-decoration:underline; }
a:visited {color: #161616; text-decoration: none; }
a:hover {color: #161616; text-decoration: none; }

a.no:link {color: #161616; text-decoration:none; }
a.no:visited {color: #161616; text-decoration:none; }
a.no:hover {color: #161616; text-decoration:none; }

a.wit:link {color: #fff; text-decoration:underline; }
a.wit:visited {color: #fff; text-decoration: none; }
a.wit:hover {color: #fff; text-decoration: none; }

a.gold:link {color: #685131; text-decoration:none; font-weight:bold; border-bottom:solid 2px #685131; }
a.gold:visited {color: #685131; text-decoration: none; font-weight:bold; border-bottom:solid 2px #685131; }
a.gold:hover { color:#fff; background-color:#685131; }

a.btn_small { transition:background-color .2s; text-align:center; padding:12px 24px; min-width:125px; font-weight: bold; text-transform:uppercase; display:inline-grid; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; font-size:80%; margin-left:50px; }
a.btn_small:link {color: #fff; text-decoration:none; font-weight:bold; background-color:rgba(159,143,95,1); }
a.btn_small:visited {color: #fff; text-decoration:none; font-weight:bold; background-color:rgba(159,143,95,1); text-align:center; }
a.btn_small:hover { color:#fff; text-decoration:none; background-color:rgba(22,22,22,1); -webkit-box-shadow:0px 0px 0px 2px var(--bruingoud) inset; -moz-box-shadow:0px 0px 0px 2px var(--bruingoud) inset; box-shadow:0px 0px 0px 2px var(--bruingoud) inset; }

a.btn { transition:background-color .2s; text-align:center; padding:20px 0px; width:250px; font-weight: bold; text-transform:uppercase; display:inline-grid; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; }
a.btn:link {color: #fff; text-decoration:none; font-weight:bold; background-color:var(--bruingoud); }
a.btn:visited {color: #fff; text-decoration:none; font-weight:bold; background-color:var(--bruingoud); text-align:center; }
a.btn:hover { color:#fff; background-color:rgba(22,22,22,1); }

a.btn_datum { transition:background-color .2s; text-align:center; padding:20px 0px; width:250px; font-weight: bold; text-transform:uppercase; display:inline-grid; -webkit-border-radius:0px 50px 50px 0px; -moz-border-radius:0px 50px 50px 0px; border-radius:0px 50px 50px 0px; }
a.btn_datum:link {color: #fff; text-decoration:none; font-weight:bold; background-color:var(--bruingoud); }
a.btn_datum:visited {color: #fff; text-decoration:none; font-weight:bold; background-color:var(--bruingoud); text-align:center; }
a.btn_datum:hover { color:#fff; background-color:var(--zwart1); -webkit-box-shadow:0px 0px 0px 2px var(--bruingoud) inset; -moz-box-shadow:0px 0px 0px 2px var(--bruingoud) inset; box-shadow:0px 0px 0px 2px var(--bruingoud) inset; }

.btn { background-color:var(--bruingoud); color:#fff; transition:background-color .2s; text-transform:uppercase; text-align:center; padding:20px 0px; width:250px; display:inline-grid; cursor:pointer; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; }
.btn:hover { color:#fff; background-color:var(--zwart1); }
.btn_datum { background-color:rgba(159,143,95,1); color:#fff; transition:background-color .2s; text-transform:uppercase; text-align:center; padding:20px 0px; width:250px; display:inline-grid; cursor:pointer; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; }
.btn_datum:hover { color:#fff; background-color:rgba(222,173,0,0.5); }

a.terug { transition:background-color .2s; text-align:center; padding:20px 0px; width:250px; display:inline-grid; }
a.terug:link {color: #fff; text-decoration:none; font-weight:bold; background-color:#dead00; }
a.terug:visited {color: #fff; text-decoration:none; font-weight:bold; background-color:#dead00; text-align:center; }
a.terug:hover { color:#fff; background-color:#685131; }

a.btnoranjeg { text-decoration:none; background-color:#dead00; padding:10px; color:#fff; transition: width 3s; color:#fff; }
/*a.btnoranjeg:hover:after { content: " de weg naar je huwelijksfeest!" }*/

.fw500 { font-weight:500; }
.bruingoud { color: var(--bruingoud); }
.nocursor { cursor:none; }
.trouwdatum { display:contents; }
.flex { display:flex; } 
.center_h { justify-content:center; }
.center_v { align-items:center; }
.pre-kop { margin:0px; padding:0px; font-weight:300; }
.post-kop { margin-top:3vh; }
.txtm { text-align:center; }
.txtgoud { background: -webkit-linear-gradient(41deg, #e5b53c, #bb9539, #cfa239, #dcb13f, #e6c87b, #e0b74f, #dbb13b, #e3c36f, #cc9f31 80%); -webkit-background-clip:text; -webkit-text-fill-color: transparent; }
.bggoud { background: -webkit-linear-gradient(41deg, #e5b53c, #bb9539, #cfa239, #dcb13f, #e6c87b, #e0b74f, #dbb13b, #e3c36f, #cc9f31 80%); }
.bggrijs1 { background-color:#f2f2f2; }
.onderschrift { font-size:80%; }
.onderschrift_wit { font-size:80%; color:#fff; }
.hobson { margin-top:15px; font-size:80%; }
.fleft { float:left; }
.fright { float:right; }
.overlay { position:fixed; z-index:99; background-color: rgba(18,18,18,0.9); top:0px; bottom:0px; left:0px; right:0px; display:none; justify-content:center; align-items:center; }
.overlay-close { position:absolute; top:20px; right:20px; width:30px; height:30px; }
.videothumb { display:none; }
.mid {margin: 0px auto 0px auto; }
.absolute { position:absolute; }
.relatieve { position:relative; }
.header_cl { width:60%; position:absolute; bottom:100px; left:20%; right:20%; }
.kolmid { margin:0px auto; width:1200px; max-width:100%; position:relative; }
.hide { display:none; }
.int_regel { overflow:hidden; height:100%; }
.borderfout { -webkit-box-shadow:0px 0px 0px 2px #d03737 inset; -moz-box-shadow:0px 0px 0px 2px #d03737 inset; box-shadow:0px 0px 0px 2px #d03737 inset; }
.fontzwart { color:#161616; }
.fontrood { color:#d03737; }
.desktop { display:block; }
.mobile { display:none; }
.feestl_icon { width:20px; vertical-align:sub; }
.kol80 { width:80%; float:left; height:100%; }
.kol75 { width:75%; float:left; height:100%; }
.kol60 { width:60%; float:left; height:100%; }
.kol50 { width:50%; float:left; height:100%; }
.kol40 { width:40%; float:left; height:100%; }
.kol33 { width:33.3333%; float:left; height:100%; }
.kol25 { width:25%; float:left; }
.kol20 { width:20%; float:left; height:100%; }

.regelitem { line-height:200%; }
.w300 { width:300px; }
.bg_zwart_hartjes { color:#fff; background-image: url('https://idee.twdj.nl/image/zwart-hartjes.webp'); height:100%; background-size:cover; background-position:center center; }
.floatr { float:right; }
.over { background-color:rgba(0,0,0,0.6); position:absolute; top:0px; left:0px; bottom:0px; right:0px; color:#fff; }
.static { position:static; }
.regel { padding:10px 0px; }
.handje { cursor:pointer; }
.z9 { z-index:9; } 
.actie { width:400px; height:400px; position:absolute; right:10px; bottom:0px; transition:transform .2s; z-index:10; }
.actie:hover { transform: scale(1.2); }

.container { display:flex; justify-content:center; align-items:center; }
.kol { padding:50px; margin-top:75px; box-sizing:border-box; position:relative; }
.btn_regel { margin-top:75px }
.img_blur { position:absolute; top:0px; bottom:0px; left:0px; right:0px; }
.img_blur:hover { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color:rgba(41,41,41,0.4); } 
.rond_r_o { -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; } 
.over_hid { overflow:hidden; }
.img_cover { object-fit:contain; }
.img_video_button { position:absolute; bottom:0px; left:0px; padding:10px; color:#fff; }
.img_video_button .material-icons { font-size:40px; color:#fff; vertical-align: bottom; }
.img_video_txt { margin-left:10px; vertical-align:super; font-weight:bold; font-size:80%; }
.dis_flex { display:flex; }
.dis_checks { list-style-type:none; }
.dis_checks img { width:25px; margin-right:3px; vertical-align:middle; }
.dis_checks li { position:relative; padding:10px 0px; }
.kol_head { margin:-111px 0px 50px 0px; }
.top_intro h1 { font-weight:400; }

/* START CUSTOM */
.custom-control { position:relative; display: block; min-height: 1.5rem; padding-left: 1.5rem; }
.custom-control-input { position: absolute; z-index: -1; opacity: 0; }
.custom-control input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0; }
.custom-control label { display: inline-block; margin-bottom: .5rem; }
.custom-control-label { position: relative; margin-bottom:0; }
.custom-control-input:active~.custom-control-label::before { color:#fff; background-color:var(--bruingoud); }
.custom-checkbox .custom-control-label::before { border-radius: .25rem; }
.custom-control-label::before { position:absolute; top:.1rem; left:-1.5rem; display:block; width:1rem; height:1rem; pointer-events:none; content:""; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; background-color:#ccc; }
.custom-control-label::after { position:absolute; top:.1rem; left:-1.5rem; display:block; width:1rem; height:1rem; content:""; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; }
.custom-control-label::before, .custom-file-label, .custom-select { transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.custom-checkbox .custom-control-input:checked~.custom-control-label::before { background-color:var(--bruingoud); }
.custom-checkbox .custom-control-input:checked~.custom-control-label::after { background-image: url('/image/check.svg'); }
.chk_verplicht::before { background-color:var(--bruingoud); }
/* STOP CUSTOM */

 /* START BREADCRUMB */
.breadcrumb { position:absolute; bottom:15px; left:65px; font-size:13px; }
.breadimg { padding-top:3px; }
.breadcrumb a { text-decoration:none; }
ol.breadcrumb { list-style-type: none; margin:10px 0px 0px 0px; padding:0px; }
ol.breadcrumb li { display: inline-block; padding:0px 3px; float:left; }
.bcactief { font-weight:bold; }
/* EIND BREADCRUMB */

/* START VIDEO */

/* STOP VIDEO */
.top { padding:135px 65px 0px 65px; box-sizing:border-box; display:flex; align-items:center; position:relative; justify-content: center; text-align:center; }
.top h1 { padding:0px; margin:0px; white-space: nowrap; }
.top h2 { font-family: "Montserrat", sans-serif; font-size:16px; font-weight:300; line-height:150%; }
.top input.inp_datum { background-color:#f2f2f2; width:45%; position:absolute; top:0px; bottom:0px; left:0px; font-weight:300; }
.top a.btn_datum { position:absolute; right:0px; }
.topbottom { padding:135px 65px 65px 65px; }
.topsub { height:70%; padding:0px 65px; box-sizing:border-box; display:flex; align-items:center; margin-top:35px; position:relative; }
.topbedankt { height:70%; padding:0px 65px; box-sizing:border-box; display:flex; align-items:center; position:relative; }

.datumcheck { height:65px; margin:30px auto 0px auto; width:80%; position:relative; }
.datumcheck input[type="date"] { border:none; box-sizing:border-box; outline:0; position:relative; width:calc(100% - 250px); position:absolute; top:0px; bottom:0px; left:0px; right:0px; opacity:0.0001;}
.datumcheck input[type="date"]::-webkit-calendar-picker-indicator { background:transparent; bottom:0; color:transparent; cursor:pointer; height:auto; left:0; position:absolute; right:0; top:0; width:auto; }
.datumcheck_over { padding:20px; background-color:#fff; color:#ccc; width:calc(100% - 250px); display:inline-block; float:left; -webkit-border-radius:50px 0px 0px 50px; -moz-border-radius:50px 0px 0px 50px; border-radius:50px 0px 0px 50px;}
.datumcheck_over.fontzwart { color:#161616; }
.datumcheck30 { margin:30px auto; }

.top_button { height:65px; margin-top:30px; width:100%; position:relative; }
.full-width-image__image { width:100vw; height:100vh; -o-object-fit:cover; object-fit:cover; -o-object-position:50% 50%; object-position:50% 50%; }
.top_intro { width:min-content; }

.grad_top { background-image: linear-gradient(rgba(22,22,22, 1), rgba(22,22,22,0)); height:50%; width:100%; position:absolute; top:0px; }
.grad_bottom { background-image: linear-gradient(rgba(22,22,22,0), rgba(22,22,22,1)); height:50%; width:100%; position:absolute; bottom:0px; }


.scroll-down { position:absolute; right:-10px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); color:#161616; }
.side_photo { overflow:hidden; position:absolute; right:0px; top:100px; bottom:100px; display:flex; }
.side_photo img { height:100%; -o-object-fit:cover; object-fit:cover; -o-object-position:center; object-position:center; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.side_photo img.port { width:100%; -o-object-fit:cover; object-fit:cover; -o-object-position:center; object-position:center; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }

.menu { padding:15px 65px; position:fixed; background-color:#fff; z-index:99; width:100%; box-sizing:border-box; top:0px; font-size:15px; display:flex; align-items:center; justify-content:space-between; transition:opacity .25s ease-in-out, background-color .25s ease-in-out; z-index:100; }
.menu:hover { opacity:1; }
.menu-zwart { color:#fff; animation: WitZwart 0.5s forwards; animation-delay: 0s; font-weight:500;}
.menu-zwart a.menuitem25:link {color:#fff; text-decoration:none; }
.menu-zwart a.menuitem25:visited {color:#fff; text-decoration: none; }
.menu-zwart a.menuitem25:hover {color:#fff; text-decoration: underline; }

.menu-wit { color:#161616; animation: ZwartWit 0.5s forwards; animation-delay: 0s;}
.menu-wit .menuitem a:link {color:#161616; text-decoration:none; }
.menu-wit .menuitem a:visited {color:#161616; text-decoration: none; }
.menu-wit .menuitem a:hover {color:#161616; text-decoration: none; }

.menu-grijs { color:#f2f2f2; animation: ZwartWit 0.5s forwards; animation-delay: 0s;}
.menu-unset { animation: BgTransparant 0.5s forwards; animation-delay: 0s;}

@keyframes WitZwart { from {background-color:#fff;} to {background-color:#161616;} }
@-moz-keyframes WitZwart { from {background-color:#fff;} to {background-color:#161616;} }
@-webkit-keyframes WitZwart { from {background-color:#fff;} to {background-color:#161616;} }

@keyframes ZwartWit { from {background-color:#161616;} to {background-color:#fff;} }
@-moz-keyframes ZwartWit { from {background-color:#161616;} to {background-color:#fff;} }
@-webkit-keyframes ZwartWit { from {background-color:#161616;} to {background-color:#fff;} }

@keyframes BgTransparant { from {opacity:1;} to {opacity:0;} }
@-moz-keyframes BgTransparant { from {opacity:1;} to {opacity:0;} }
@-webkit-keyframes BgTransparant { from {opacity:1;} to {opacity:0;} }

.logo { float:left; display:flex; }
.menuitems {  }
.menu_svg { fill:#161616; }
.menuitem { float:left; padding:10px 30px; transition: background-color .3s; font-weight:800; }
.menuitem:hover { text-decoration: underline; }

/*.menu-zwart .menuitem:hover a { color:#161616; }*/
.menu-zwart .menuitem:hover a { font-weight:800; }
.menu-zwart .menu_svg { fill:#fff; }
.menubot { width:100%; height:0.001px; background-color:#fff; position:absolute; bottom:0px; left:0px; right:0px; }
.menuitemoranje { float:left; padding:10px 30px; transition: background-color .3s; background-color:#dead00; color:#fff; }
.hamburger { position:absolute; top:0px; right:0px; padding:20px; display:none; }
.hamburger_close { position:absolute; top:0px; right:0px; padding:20px; display:none; }
.menu_exd { display:none; }

.top_video { position:relative; min-height:100vh; overflow:hidden; padding:50px 0px; } /*width:100vw;*/
.top_video video { margin:0; padding: 0; position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; transform: translate(-50%,-50%); }
.top_video_over { position:absolute; background-color:rgba(18,18,18,0.5); top:0px; bottom:0px; width:100%; }
.top_image_over { position:absolute; background-color:rgba(18,18,18,0.5); top:0px; bottom:0px; width:100%; backdrop-filter: blur(9px);}

.full { width:100vw; height:100vh; overflow:hidden; position:relative; }
.min-full { width:100vw; min-height:100vh; overflow:hidden; position:relative; }
.bg_zwart { background-color:#161616; }
.txt_wit { color:#fff; }
.bg_wit { background-color:#fff; }
.bg_grijs { background-color:#f2f2f2; }
.container-65 { padding:100px 65px; }
.max800 { max-width:800px; }
.w30 { max-width:30rem; }
.w35 { max-width:35rem; }
.w40 { max-width:40rem; }
.w50 { max-width:50rem; }
.p40 { width:40%; }
.p50 { width:50%; }
.p50_txt { width:50%; height:100%; position:absolute; top:0px; }

.grid2 { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr; column-gap:30px; row-gap:30px; }
.grid3 { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr; column-gap:30px; row-gap:0; }
.grid5 { display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 1fr; column-gap:30px; row-gap:30px; }
.deelnemer { position:relative; }


.content img { object-fit:cover; }

.stappenplan { display:grid; grid-template-columns: repeat(6, calc(50% - 40px)); grid-template-rows: 1fr; column-gap:30px; row-gap:0; overflow-x:scroll; cursor:grab; scrollbar-width: none; -ms-overflow-style: none; }
.stappenplan::-webkit-scrollbar { display: none; }
.stappenplan img { width:100%; transition:transform .2s; }
.stappenplan img:hover { transform: scale(1.2); }
.stappenplan h3 { font-size:4vw; }
.stap_img { overflow:hidden; }
.stap_img a { display:flex; }

.stap_con { background-color:#fff; width:90%; max-width:1200px; height:90%; padding:50px; display:flex; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; margin:60px; z-index:1; }
.txt_col { width:60%; margin:0px auto; text-align:center; max-width:1200px; }
.stap_gridfoto { background-color:#161616; height:300px; overflow:hidden; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; position:relative; text-align:center; }
.stop_txt { margin-top:30px; overflow:hidden; }
.wave_l_o { background-image: url('https://theweddingdj.nl/image/wave_l_o.svg'); background-size:20%; background-position:left bottom; background-repeat:no-repeat; position:absolute; top:0px; bottom:0px; left:0px; right:0px; }
.wave_r_b { background-image: url('https://theweddingdj.nl/image/wave_r_b_g.svg'); background-size:20%; background-position:right top; background-repeat:no-repeat; position:absolute; top:0px; bottom:0px; left:0px; right:0px; }
.wave_r_o { background-image: url('https://idee.twdj.nl/image/wave_r_o_gray.svg'); background-size:60%; background-position:right bottom; background-repeat:no-repeat; position:absolute; top:0px; bottom:0px; left:0px; right:0px; }

.stap_gridfoto:hover img { transform: scale(1.2); }

.stap_gridfoto img { -o-object-fit:cover; object-fit:cover; -o-object-position:center center; object-position:center center; width:100%; height:100%; transition:transform .2s; }
.stap_gridfoto img:hover { transform: scale(1.2); }
.stap_gridfoto span { margin-left:10px; }
.stap_griffoto_txt { text-transform:uppercase; position:absolute; bottom:20px; left:0px; right:0px; font-size:20px; z-index:1; }
.stap_grid3 { display:grid; grid-template-columns: 4fr 1fr 4fr 1fr 4fr; column-gap:0px; row-gap:0; margin-top:60px; }
.stap_icons { color:var(--bruingoud); font-size:32px; }
.stap_icon_col { display:flex; justify-content:center; align-items:center; font-size:40px; }

.img_arrow { width:40px; height:40px; float:left; opacity:0.3; }
.img_arrow:hover { opacity:1; }
.img_arrow img { width:100%; height:100%; }

/* START REVIEWS */
.rev_intro { margin: 0px auto 100px auto; }
.rev_grid { display:grid; grid-template-columns: repeat(3, 300px); grid-template-rows: 1fr; column-gap:30px; row-gap:0; overflow:hidden; text-align:center; }
.rev_grid h5 { margin:0px; padding:0px;}
.rev_date { font-size:80%; }
.rev_sterren { width:150px; margin:0px auto; }
.rev_btn { margin:0px auto; }
.rev_img { width:250px; }

.rev_regel { overflow:hidden; padding:5px 0px 5px 15px; }
.rev_regel:hover { background-color:#f2f2f2; cursor:pointer; }
.rev_tekst { float:left; width:100px; }
.rev_tekst_r { float:left; width:35px; }
.rev_bar_container { width:calc(100% - 225px); overflow:hidden; height:10px; float:left; margin:8px 20px 0px 20px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; background-color:#ccc; position:relative; }
.rev_bar { opacity:0; height:10px; min-width:0px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; background-color:#00A14B; position:absolute; top:0; left:0; }
.rev_bar_g { opacity:0; height:10px; min-width:0px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; background-color:#00A14B; position:absolute; top:0; left:0; animation-name: AniBar; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.8s;}
@keyframes AniBar { from { opacity:0; margin-left:-200px; } to { opacity:1; margin-left:0px; } }
@-moz-keyframes AniBar { from { opacity:0; margin-left:-200px; } to { opacity:1; margin-left:0px; } }
@-webkit-keyframes AniBar { from { opacity:0; margin-left:-200px; } to { opacity:1; margin-left:0px; } }

.rev_item { width:100%; padding:65px; }
.refregelkopsub { padding-bottom:20px; }
.rev_onderschrift { font-size:80%; }
.rev_onderschrift img { margin-right:5px; }
.rev_onderschrift .rev_info { margin-right:5px; }
.rev_item_icon { width:16px; vertical-align:bottom; }
.rev_stars { padding:20px; width:200px; margin:0px auto; }
.rev_mid { width:70%; margin:0px auto; }

.ster35 {fill: #CCCCCC;}
.ster35g path.stergold1 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; }
.ster35g path.stergold2 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; }
.ster35g path.stergold3 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.2s; }
.ster35g path.stergold4 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.2s; }
.ster35g path.stergold5 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.4s; }
.ster35g path.stergold6 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.4s; }
.ster35g path.stergold7 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.6s; }
.ster35g path.stergold8.ster { animation:none; fill:#ccc; }
.ster35g path.stergold9.ster { animation:none; fill:#ccc; }
.ster35g path.stergold10.ster { animation:none; fill:#ccc; }

.ster40 {fill: #CCCCCC;}
.ster40g path.stergold1 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; }
.ster40g path.stergold2 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; }
.ster40g path.stergold3 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.2s; }
.ster40g path.stergold4 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.2s; }
.ster40g path.stergold5 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.4s; }
.ster40g path.stergold6 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.4s; }
.ster40g path.stergold7 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.6s; }
.ster40g path.stergold8 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.6s; }
.ster40g path.stergold9.ster { animation:none; fill:#ccc; }
.ster40g path.stergold10.ster { animation:none; fill:#ccc; }

.ster45 {fill: #CCCCCC;}
.ster45g path.stergold1 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; }
.ster45g path.stergold2 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; }
.ster45g path.stergold3 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.2s; }
.ster45g path.stergold4 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.2s; }
.ster45g path.stergold5 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.4s; }
.ster45g path.stergold6 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.4s; }
.ster45g path.stergold7 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.6s; }
.ster45g path.stergold8 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.6s; }
.ster45g path.stergold9 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.8s; }
.ster45g path.stergold10.ster { animation:none; fill:#ccc; }

.ster50 { fill: #CCCCCC;}
.ster50g path.stergold1 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; }
.ster50g path.stergold2 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; }
.ster50g path.stergold3 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.2s; }
.ster50g path.stergold4 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.2s; }
.ster50g path.stergold5 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.4s; }
.ster50g path.stergold6 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.4s; }
.ster50g path.stergold7 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.6s; }
.ster50g path.stergold8 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.6s; }
.ster50g path.stergold9 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.8s; }
.ster50g path.stergold10 { animation-name: AniStar3; animation-duration: 0.5s; animation-timing-function: cubic-bezier(0, 0, 0.4, 1); animation-fill-mode: forwards; animation-delay: 0.8s; }
@keyframes AniStar3 { from { fill:#CCC; } to { fill:#161616; } }
@-moz-keyframes AniStar3 { from { fill:#CCC; } to { fill:#161616; } }
@-webkit-keyframes AniStar3 { from { fill:#CCC; } to { fill:#161616; } }
/* STOP REVIEWS */

.fadedAway { opacity:0.001; }
.fotoinfo { position:absolute; bottom:15px; left:20px;}

/* START PARTNER */
.partner_grid { display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 1fr; column-gap:30px; row-gap:50px; overflow:hidden; text-align:center; max-width:1200px; }
.partner_grid div { display:flex; justify-content:center;}
.partner_grid img { width:70%; -o-object-position:50% 50%; object-position:50% 50%; object-fit: contain; }
.partner_100 { max-width:100px; }
.partner_item { scale:0.3; }
.partner_item.go { animation-name:item_scale; animation-duration:500ms; animation-timing-function:ease-in; animation-fill-mode:forwards; animation-delay:500ms; }
@keyframes item_scale {0%{scale:0.3;} 100%{scale:1;}}
@-moz-keyframes item_scale {0%{scale:0.3;} 100%{scale:1;}}
@-webkit-keyframes item_scale {0%{scale:0.3;} 100%{scale:1;}}
.partner_section { margin: 50px auto; }
.partner_maps { width:100%; height:400px; border:none; }

/* STOP PARTNER */

.offerte_bg { background-image: url('https://idee.twdj.nl/image/dj-niels-tilburg.webp'); background-size:cover; background-position:center center; padding:100px 0px; position:relative; }
.offerte_txt { z-index:1; }
.gallerij {z-index:100; }

.headerbg { background-image: url('https://idee.twdj.nl/image/header.webp'); height:100%; background-size:cover; background-position:center center; }
.header_over { background-color:rgba(0,0,0,0.6); position:absolute; top:0px; left:0px; bottom:0px; right:0px; display:flex; justify-content:center; align-items:center; color:#fff; }
.header_over p { text-transform:unset; color:#fff; }
.header_over h4 { font-size:30px; font-family: "Montserrat", sans-serif; text-transform:uppercase; color:#fff; }
.header_over .logo { width:400px; }
.header_over .celebrate { width:400px; }
.header_play { position:absolute; bottom:20px; right:20px; color:#fff; cursor:pointer; }
.header_play img { margin-right:10px; vertical-align:middle; }
.header_play span { vertical-align:middle; }

.play_over { background-color:rgba(0,0,0,0.6); position:absolute; top:0px; left:0px; bottom:0px; right:0px; display:flex; justify-content:center; align-items:center; color:#fff; transition: all 150ms; z-index:1; }
.play_over:hover { background-color:rgba(0,0,0,0.1); cursor:pointer; }
.center_center { position:absolute; top:0px; left:0px; bottom:0px; right:0px; display:flex; justify-content:center; align-items:center; }

.pad200 { padding:200px; }
.pad100 { padding:100px; }
.pad50 { padding:50px; }

.visie { width:90%; height:70%; margin:0px auto; background-image: url('https://idee.twdj.nl/image/visie.svg'); background-size:contain; background-position:center center; background-repeat:no-repeat; }

.bol_container { width:400px; height:400px; position:absolute; right:100px; bottom:100px; }

.nav_con { position:fixed; top:0px; bottom:0px; left:10px; width:56px; z-index:10; }
.nav_con:hover { opacity:1; }
.nav_line { margin:0px auto; width:0px; height:100%; border-right:3px dashed rgba(255,255,255,0.5); }
.nav_items { width:56px; height:100%; position:absolute; left:0px; top:0px;  }
.nav_item { -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; border:3px solid #fff; background-color:#fff; width:50px; height:50px; overflow:hidden; position:relative; opacity:0.5; }
.nav_item:hover { -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; width:250px; height:50px; cursor:pointer; opacity:1; }
.nav_item_txt { white-space:nowrap; padding:12.5px; font-family: "Montserrat", sans-serif; }
.nav_active { opacity:1; }

.nav_item video { margin:0; padding: 0; position:absolute; top:-5px; left:-44px; max-width:140px; width:auto; height:auto; }
.nav_tline { width:27px; height:30px; border-right:3px dashed rgba(255,255,255,0.5); }
.nav_icon { margin:11px 10px 0px 10px; font-size:30px; }

/* START GALLERIJ */
.gallerij_container { padding:0px 65px 100px 65px; }
.gallerij_grid2 { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr; column-gap:30px; row-gap:30px; width:100%; color:#fff; }
.gallerij_foto { background-color:#f2f2f2; width:100%; overflow:hidden; position:relative; min-height:100px; display:flex; }
.gallerij_foto img { -o-object-fit:cover; object-fit:cover; -o-object-position:center center; object-position:center center; width:100%; transition:transform .2s; }
.gallerij_foto img:hover { transform: scale(1.2); }
.gallerij_foto a { display:flex; }

.gallerij_video { background-color:#f2f2f2; width:100%; overflow:hidden; position:relative; min-height:225px; display:flex; }
.gallerij_video .top_video_over { display:none; }
.gallerij_video:hover .top_video_over { display:flex; cursor:pointer; }
.gallerij_video a { color:#fff; }
.gallerij_play { width:60px; height:60px; }
.gallerij_hover { display:flex; align-items:center; justify-content:center; }
.gallerij_center { text-align:center; }
.gallerij_center p { padding:0px; margin:0px; }
.gallerij_video_container { width:80%; }
.gallerij_image { width:100%; height:100%; -o-object-fit:cover; object-fit:cover; -o-object-position:50% 50%; object-position:50% 50%; }
/* STOP GALLERIJ */

/* START STAPPENPLAN */
.stappen_con { position:relative; overflow:hidden; height:100%; }
.stappen_bol { background-color:#181818; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; height:150px; width:150px; margin:50px auto 50px auto; color:#fff; z-index:2; position:relative; display:flex; align-items:center; justify-content:center; }
.stappen_bol span { margin-top:-25px; padding:0px; line-height:0px; }
.stappen_memo { background-color:#fff; z-index:2; position:relative; padding:30px 0px; margin:0px auto; width:400px; }
.stappen_lijn { width:5px; background-color:#181818; position:absolute; top:200px; bottom:220px; left:calc(50% - 2.5px); z-index:1; }
/* STOP STAPPENPLAN */

/* START PIJLERS */
.pijlers_grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr; column-gap:30px; row-gap:50px; overflow:hidden; text-align:center; max-width:1200px; }
/* STOP PIJLERS */

/* START DRIVE-iN SHOW */ 
.show_container {}
/* STOP DRIVE-IN SHOW */

/* START OFFERTE */
.off_kop { width:100%; padding:10px 0px; overflow:hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.off_kop_typea { width:100%; padding:10px 0px; position:relative; }
.off_item { overflow:hidden; padding:5px 0px 5px 0px; text-align:left; }
.off_item_typea { padding:5px 0px 5px 0px; text-align:left; }
.off_extra_item { position:relative; box-sizing:border-box; cursor:pointer; min-height:200px; margin:5px; -webkit-appearance: none; text-align:center; background-color:#fff; }
.off_extra_item:hover { background-color:#ccc; }

.off_extra_pad { padding:10px; text-align:center; width:100%; }
.off_bg { width:100%; aspect-ratio:1/1; }

.off_lijn { height:10px; border-bottom: 1px solid #cccccc; margin-bottom:10px; }

.off_ster { font-size:26px; }
.off_dj { position:relative; box-sizing:border-box; cursor:pointer; min-height:20px; margin:5px; -webkit-appearance: none; text-align:center; padding:10px 0px; background-color:#fff; }
.off_dj:hover { background-color:#ccc; }
.off_sel { background-color:#00a14b; color:#fff; }
.off_selected { background-color:var(--bruingoud); color:#fff; font-weight:bold; }

.contextdrop { padding: 8px; width:100%; font-size:18px; font-family:'roboto-light'; background-color:#fff; }

.off_plus { font-size:28px; font-weight:800; }
.off_grid4 { display: grid; grid-template-columns:repeat(4, minmax(0, 1fr)); grid-template-rows:1fr; column-gap:10px; row-gap:0; }
.off_grid5 { display: grid; grid-template-columns:repeat(5, minmax(0, 1fr)); grid-template-rows:1fr; column-gap:10px; row-gap:0; }

.typeahead,
.tt-query,
.tt-hint { width:100%; outline: none; }
.typeahead { background-color:#fff; position:absolute; }
.typeahead a { text-decoration:none; }

.typea_grijs .typeahead { background-color:#f2f2f2; position:absolute; }

.dropdown-menu {  }
.dropdown-menu li { display:inline-block; zoom: 1; overflow:hidden; width:100%; padding:10px 15px; }
.dropdown-menu li:hover { background-color:#00a14b; color:#fff; cursor:pointer; }
.dropdown-menu li:hover a { color:#fff; }

.bg_dj_fun { background: url('https://idee.twdj.nl/image/offerte_dj.webp') no-repeat; background-size: cover; background-position:top center; }

.bg_bronze { background: url('https://idee.twdj.nl/image/offerte_bronze.webp') no-repeat; background-size: cover; background-position:center center }
.bg_silver { background: url('https://idee.twdj.nl/image/offerte_silver.webp') no-repeat; background-size: cover; background-position:center center }
.bg_gold { background: url('https://idee.twdj.nl/image/offerte_gold.webp') no-repeat; background-size: cover; background-position:center center }
.bg_sparkular_offerte { background: url('https://idee.twdj.nl/image/offerte_sparkular.webp') no-repeat; background-size: cover; background-position:center center }
.bg_floorspot_offerte { background: url('https://idee.twdj.nl/image/offerte_floorspots.webp') no-repeat; background-size: cover; background-position:center center }
.bg_confetti_offerte { background: url('https://idee.twdj.nl/image/offerte_confetti.webp') no-repeat; background-size: cover; background-position:center center }
/* STOP OFFERTE */

/* FOOTER START */
.footer_grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr; column-gap:30px; row-gap:50px; overflow:hidden; text-align:center; max-width:1200px; }
.footer_grid div { text-align:left; }
.footer_grid a { color:#fff; text-decoration:none; }
.footer_grid a:hover { color:#fff; text-decoration:underline; }
.footer_grid img { width:60%; }
.footer_rev_container { margin:50px auto 0px auto; }
.footer_rev { width:140px; }
.footer-exd-logo { width:300px; }
.footer_exd_container { padding:65px 0px; }
.wa_container { position:fixed;bottom:15px;right:15px;height:60px;width:60px; z-index:10; }
/* FOOTER STOP */

/* START START */
.start h1 { font-size:100px; }
.start h2 { font-size:24px; color:rgba(255,255,255,0.8); padding-top:15px; }
.pag1 h3 { font-size:40px; color:rgba(255,255,255,0.8); }
.start h4 { font-size:75px; }
.start textarea, .start input { resize:none; } /*  width:80%; */
.startopa { opacity:0.5; }
.start_bedankt_top { top:0px; }
.start_bedankt { margin-left:-130%; }
.start_bedankt.go { animation-name:slide_bedankt; animation-duration:500ms; animation-timing-function:ease-in; animation-fill-mode:forwards; animation-delay:500ms; }
@keyframes slide_bedankt {0%{margin-left:-130%;} 100%{margin-left:0px;}}
@-moz-keyframes slide_bedankt {0%{margin-left:-130%;} 100%{margin-left:0px;}}
@-webkit-keyframes slide_bedankt {0%{margin-left:-130%;} 100%{margin-left:0px;}}
.profielfoto {height:140px; width:140px; margin:10px; background-color: #bbb; border-radius: 50%; display: inline-block; background-size:cover; -moz-box-shadow: 0 10px 25px rgba(0,0,0,.1); -webkit-box-shadow: 0 10px 25px rgba(0,0,0,.1); box-shadow: 0 10px 25px rgba(0,0,0,.1);}

.start_over { position:absolute; background-color:rgba(18,18,18,0.7); top:0px; bottom:0px; width:100%; backdrop-filter: blur(11px);}
.start [contenteditable] { display:inline-block; outline:0px solid transparent; }
.start [contenteditable]:focus { background-color:rgba(0,0,0,0.5); }
.start input[type="date"] { border:none; box-sizing:border-box; outline:0; position:relative; width:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px; opacity:0.0001;}
.start input[type="date"]::-webkit-calendar-picker-indicator { background:transparent; bottom:0; color:transparent; cursor:pointer; height:auto; left:0; position:absolute; right:0; top:0; width:auto; }
.start .trouwdatum { position:relative; display:inline-block; }
.startinfo { position:absolute; bottom:25px; left:65px; }

.start_btnregel { padding:12px 0px; }
.start_btnregel_intro { padding:24px 0px 0px 0px; }
.start_btnregel_48 { padding:48px 0px 0px 0px; }
.start_btnregel_48 .material-icons { vertical-align:middle; margin-right:10px; font-size:27px; }

.btn_video { border:1px solid #fff; padding:10px; color:#fff; text-decoration:none; font-weight:bold; opacity:0.5; }
.btn_video:hover { border:1px solid #fff; padding:10px; color:#161616; text-decoration:none; background-color:#fff; cursor:pointer; opacity:1; }

.btn_video_full { border:1px solid #fff; padding:10px; text-decoration:none; font-weight:bold; background-color:#fff; color:#161616; opacity:0.5; }
.btn_video_full:hover { border:1px solid #fff; padding:10px; text-decoration:none; background-color:#fff; cursor:pointer; opacity:1; }

a.btn_video { border:1px solid #fff; padding:10px; color:#fff; text-decoration:none; font-weight:bold; }
a.btn_video:hover { border:1px solid #fff; padding:10px; color:#161616; text-decoration:none; background-color:#fff; }
.btn_video .material-icons, .btn_video_full .material-icons { vertical-align:middle; margin-left:5px; }

.start_nav { position:absolute; top:25px; left:65px; }
.start_nav div { background-color:#fff; color:#161616; padding:10px; opacity:0.5; }
.start_nav div span { display:block; }

.start_nr { position:absolute; top:25px; right:65px; }
.start_nr div { background-color:#fff; color:#161616; padding:12.5px; opacity:0.5; }

.start_intro { max-width:800px; font-size:16px; }
.start_intro_txt { padding:0px 0px 30px 0px; }
.start_w80 { width:80%; margin:0px auto; position:relative; }

.bg_muzikant { background-image: url('https://idee.twdj.nl/image/muzikant.jpg'); height:100%; background-size:cover; background-position:center center; color:#fff; }
.start_regel { width:50%; margin:50px auto 0px auto; }
.start_btn_regel { margin-top:20px; }

/* START STOP */

.dj_select_item { background-color:#fff; opacity:0.5; color:#292929; padding: 10px 15px; margin-right: 10px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 2px; font-weight:bold; -webkit-transition: background 0.3s; transition: background 0.3s; display:inline-block; }
.dj_select_item:hover { background-color:#dead00; color:#fff; opacity:1;} /* d2aa6a */
.dj_top { margin-top:25px; }
.dj_button_regel { padding:10px; }
.duration { width:0px; height:4px; background-color:#cc0000; position:absolute; top:0px; left:0px; z-index:2; }
.show_top { position:absolute; top:0px; left:0px; right:0px; height:100px; background-image: linear-gradient(to bottom, #161616, rgba(0,0,0,0)); z-index:1; }

/* START MUZIEK */
.p_select_item { background-color:#ccc; padding: 10px 15px; margin-right: 10px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 2px; font-weight:bold; -webkit-transition: background 0.3s; transition: background 0.3s; display:inline-block; }
.p_select_item:hover { background-color:#dead00; opacity:1; } /* d2aa6a */
.p_select_item_nohover { background-color:#ccc; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; padding:10px 15px; float:left; margin-right:10px; margin-bottom: 10px; text-transform: uppercase; letter-spacing:2px; font-weight:800; -webkit-transition: background 0.3s; transition: background 0.3s; }
.item_selected { background-color:#dead00; color:#fff; opacity:1; }
.icon_selected { font-size:17px; }
.p_onbekend_item { background-color:#fff; color:#ccc; }
.p_onbekend_item:hover { background-color:#dead00; color:#000; }
.p_rood_item { background-color:#d03737; color:#fff; }
.p_rood_item:hover { background-color:#dead00; color:#000; }
.p_groen_item { background-color:#00a14b; color:#fff; }
.p_groen_item:hover { background-color:#dead00; color:#000; }
.p_onderschrift { font-size:8px; }
/* STOP MUZIEK */

.video-container { position:relative; padding-bottom:56.25%; padding-top:0px; height:0; overflow:hidden; }
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0;left:0; width:100%; height:100%; border:none; }
.video-container-bg { position:absolute; top:0; bottom:0; width:100%; height:100%; overflow:hidden; }
.video-container-bg video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.video_image { position:absolute; top:0px; bottom:0px; left:0px; right:0px; display:none; } 

.fadein { opacity:0.01; }
.fadein.go { animation-name:slide_fadein; animation-duration:500ms; animation-timing-function:ease-in; animation-fill-mode:forwards; animation-delay:500ms; opacity:0; }
@keyframes slide_fadein {0%{opacity:0.01;} 100%{opacity:1;}}
@-moz-keyframes slide_fadein {0%{opacity:0.01;} 100%{opacity:1;}}
@-webkit-keyframes slide_fadein {0%{opacity:0.01;} 100%{opacity:1;}}

.leftin { margin-left:-60px; }
.leftin.go { animation-name:slide_leftin; animation-duration:500ms; animation-timing-function:ease-in; animation-fill-mode:forwards; animation-delay:500ms; }
@keyframes slide_leftin {0%{margin-left:-60px;} 100%{margin-left:0px;}}
@-moz-keyframes slide_leftin {0%{margin-left:-60px;} 100%{margin-left:0px;}}
@-webkit-keyframes slide_leftin {0%{margin-left:-60px;} 100%{margin-left:0px;}}


/* START OVERZICHT */
.relative { position:relative; }
.midkol { width: 80%; margin: 0px auto 0px auto; overflow: hidden; position: relative; }
.regel2023 { width:calc(100% - 50px); padding:10px; margin:5px 0px 5px 0px; cursor:pointer; font-weight:normal; color:#292929; overflow:hidden; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.regel2023:hover { background-color:#eeeeee; cursor:pointer; }

.rep_icon_boeker { font-size:20px !important; padding:10px; position:absolute; right:0px; top:0px; font-weight:bold; color:#b3b3b3; }
.rep_icon_boeker:hover { color:#161616; cursor:pointer; }
.leadregel2023 { width:calc(100% - 80px); padding:10px; margin:5px 0px 5px 0px; cursor:pointer; font-weight:normal; color:#292929; overflow:hidden; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.leadregel2023:hover { background-color:#eeeeee; cursor:pointer; }

.twe_kop { overflow:hidden; padding-top:50px; }
.twe_kop h2 { font-size:30px; }

.conregelhead { width:calc(100% - 20px); height:20px; padding:10px; margin:15px 0px 0px 0px; font-weight:bold; }
.conregelnr { float:left; width:40px; min-height:10px; }
.kol5p { float:left; width:5%; min-height:10px; }
.kol10p { float:left; width:10%; min-height:10px; }
.kol15p { float:left; width:15%; min-height:10px; }
.kol20 { float:left; width:20px; min-height:10px; }
.kol20p { float:left; width:20%; min-height:10px; }
.kol25 { float:left; width:25px; min-height:10px; }
.kol25p { float:left; width:25%; min-height:10px; }
.kol35 { float:left; width:35px; min-height:5px; }
.kol50 { float:left; width:50px; min-height:5px; }
.kol50r { float:right; width:50px; min-height:5px; }
.kol50p { float:left; width:50%; min-height:5px; }
.kol90 { float:left; width:90px; min-height:5px; }
.kol100 { float:left; width:100px; min-height:5px; }
.kol100fin { float:left; width:100px; min-height:5px; border-top:1px solid #292929; padding-top:3px; }
.kol120 { float:left; width:120px; white-space:nowrap; min-height:5px; }
.kol125 { float:left; width:125px; white-space:nowrap; min-height:5px; }
.kol150 { float:left; width:150px; white-space:nowrap; min-height:5px; }
.kol200 { float:left; width:200px; white-space:nowrap; min-height:5px; }
.kol250 { float:left; width:250px; min-height:5px; }
.kol300 { float:left; width:300px; min-height:5px; }
.kol400 { float:left; width:400px; white-space:nowrap; overflow:hidden; min-height:5px; }
.kol450 { float:left; width:450px; min-height:5px; }
.kol030r { float:right; width:30px; min-height:5px; }
.kol050r { float:right; width:50px; min-height:5px; }
.kol100r { float:right; width:100px; min-height:5px; }
.kol110r { float:right; width:110px; min-height:5px; }
.kol125r { float:right; width:125px; min-height:5px; }
.kol150r { float:right; width:150px; min-height:5px; }
.kol200r { float:right; width:200px; min-height:5px; }
.kol100_30 { float:left; width:calc(100% - 30px); min-height:5px; }
.kol_lead_opm { float:left; width:calc(100% - 150px); min-height:5px; padding-top:15px; padding-left:35px; }
.kol_opmerking { float:left; width:calc(100% - 700px); min-height:5px; }
.kol_opmerking2 { float:left; width:calc(100% - 1000px); min-height:5px; }
.nowrap { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.leg_ { background-color:var(--wit); } 
.leg_0 { background-color:var(--rood1); } 
.leg_1 { background-color:var(--oranje1); } 
.leg_2 { background-color:var(--oranje2); } 
.leg_3 { background-color:var(--groen1); } 
.leg_4 { background-color:var(--groen2); } 
.leg_5 { background-color:var(--groen3); }
/* STOP OVERZICHT */

/* START MENU */
.me_hide { display:none !important; }
.me_logo { width:100%; padding:15px; }
.me_menu { margin-top:20px; overflow:hidden; }
.me_taken { width:50px; float:left; height:25px; margin-left:2px; }
.me_icon { width:50px; float:left; height:23px; font-size:23px; }
.me_icon_sub { width:40px; float:left; height:23px; font-size:23px; }
.me_icon_drop { width:50px; float:right; margin-right:10px; height:23px; font-size:23px; }
.me_txt { float:left; font-size:16px; position:relative; }
.me_main { overflow:hidden; }
.me_sub { display:none; margin:15px 0px 0px 20px; width:100%; box-sizing:border-box; }
.me_sub_item { padding:15px 20px; color:rgba(0,0,0,0.5); overflow:hidden; position:relative; }
.me_sub_item:hover { color:rgba(0,0,0,1); background-color:#fff; }

.me_sub_sub { display:none; margin:30px 0px 0px 40px; }
.me_sub_sub_item { padding:15px 0px; font-weight:700; color:rgba(0,0,0,0.5); overflow:hidden; }
.me_sub_sub_item:hover { color:rgba(0,0,0,1); background-color:#fff; }
 
.me_container { background-color:#fff; height:100%; width:65px; position:fixed; z-index:1; overflow:scroll; } /* -webkit-animation:MeWidthOut 0.1s ease; -moz-animation:MeWidthOut 0.1s ease; animation:MeWidthOut 0.1s ease; */
/* .me_container:hover { width:300px; cursor:pointer; -webkit-animation:MeWidth 0.3s ease; -moz-animation:MeWidth 0.3s ease; animation:MeWidth 0.3s ease; } */

.me_container::-webkit-scrollbar { display:none; }
.me_container {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.me_container.closed { width:65px; -webkit-transition-duration:.5s, .5s, .2s; transition-duration:.5s, .5s, .2s; -webkit-transition-delay:.2s, .2s, 0s; transition-delay:.2s, .2s, 0s; -webkit-transition-property: box-shadow, background-color, width; transition-property: box-shadow, background-color, width; }
.me_container.opened { width:300px; -webkit-transition-duration:0.2s; transition-duration:0.2s; -webkit-transition-delay:0; transition-delay:0; -webkit-transition-property:width; transition-property:width; box-shadow:1px 1px 250px rgba(0,0,0,0.5); }

.me_item_no { padding:15px 20px; font-weight:600; color:rgba(0,0,0,0.5); overflow:hidden; width:300px; }
.me_item { padding:15px 20px; font-weight:600; color:rgba(0,0,0,0.5); overflow:hidden; width:300px; cursor:pointer; }
.me_item:hover { color:rgba(0,0,0,1); background-color:#fff; }
/*.me_item:hover .me_sub { display:block; } */

.me_new { position:absolute; right:-50px; top:4px; background-color:red; color:#fff; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; font-size:10px; line-height:13px; padding:1px 5px; } 

.me_copy { transform:rotate(270deg); color:rgba(255,255,255,0.5); position:fixed; bottom:60px; left:-20px; z-index:2; font-weight:600; }
.dark  input, .dark  select, .dark  textarea { background-color:#35363a; color:#fff; }
.dark .lijngrijs1px { border-bottom: solid 1px #35363a; }

.dark .grijs  { background-color:#202124; color:#fff; }
.dark .tekstcontainer  { background-color:#202124; color:#fff; }
.dark .conregelhead { color:#fff; }
.dark .fatop { color:#fff; }
.dark .me_container { background-color:#35363a; }
.dark .me_item_no { color:rgba(255,255,255,0.5); }
.dark .me_item { color:rgba(255,255,255,0.5); }
.dark .me_item:hover { color:rgba(255,255,255,1); background-color:#202124; }
.dark .me_sub_item { color:rgba(255,255,255,0.5); }
.dark .me_sub_item:hover { color:rgba(255,255,255,1); background-color:#202124; }

.dark .conregelext { background-color:#35363a; color:#fff; }
.dark .conregelext:hover { color:#35363a; }

.bg_celebration { background-image:url(/image/bg_sterren_wit.svg); background-size:120%; background-repeat:repeat; }
.dark .bg_celebration { background-image:url(/image/bg_sterren.svg); background-size:120%; background-repeat:repeat; }

@-webkit-keyframes MeWidth {
	0% { width:65px; }
	50% { width:65px; }
	100% { width:300px; }
}

@-moz-keyframes MeWidth {
	0% { width:65px; }
	50% { width:65px; }
	100% { width:300px; }
}

@keyframes MeWidth {
	0% { width:65px; }
	50% { width:65px; }
	100% { width:300px; }
}

-webkit-keyframes MeWidthOut {
	0% { width:300px; }
	100% { width:65px; }
}

@-moz-keyframes MeWidthOut {
	0% { width:300px; }
	100% { width:65px; }
}

@keyframes MeWidthOut {
	0% { width:300px; }
	100% { width:65px; }
}

/* STOP MENU */


@media screen and (max-width:1200px) {

.menuitem { padding:10px 15px; }
a.btn_small { margin-left:25px; }

}

@media screen and (max-width:1024px) {

h1 { font-size:55px; }
h2 { font-size:55px; }
h3 { font-size:55px; }
.w35 { max-width:25rem; }

.menuitem { padding:10px 15px; }
a.btn_small { margin-left:25px; }

}

@media screen and (max-width:1000px) {

.desktop { display:none; }
.mobile { display:unset; }

}

@media screen and (max-width:600px) { /*iphone 6 en kleiner*/

h1, h2, h3 { line-height:100%; }
h1 { font-size:47px; }
h2 { font-size:30px; }
h3 { font-size:40px; }
h4 { line-height:80%; }
video { display:none; }
section { height:unset; }
input[type="date"] { height:50px; }
input { border-radius:0; color:#161616; }

a.btn_small { margin-left:0px; margin-top:25px; }

.desktop { display:none; }
.mobile { display:unset; }
.videothumb { display:block; }
.video_image { display:block; }
.top { }
.top h1 { white-space:unset; }
.top_intro { width:100%; }
.video_bg { background: url('https://theweddingevent26.nl/image/twe24.webp') no-repeat; background-size: cover; background-position:center center; }
.fullmobiel { height:unset; }
.mob_250 { margin-top:250px; }
.p50_txt { width:100%; height:unset; position:unset; }
.grid5 { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr; column-gap:30px; row-gap:30px; }

.actie { width:150px; height:150px; position:absolute; right:unset; bottom:-230px; transition:transform .2s; z-index:10; }
.datumcheck .btn { max-width:49%; }
.datumcheck input.inp_datum { height:100%; width:49%; }
.trouwdatum { display:none; }
.menu { padding:0px; min-height:65px; font-size:125%; }
.menuitems { width:100%; margin-top:90px; display:none; }
.menuitem { width:100%; padding:25px 30px; }
.menuitemoranje { margin:20px 20px 50px 20px; }
.logo { float:none; display:block; position:absolute; top:15px; left:15px; }
.logo img { height:38px; }
.hamburger { display:block; }
.menu_exd { width:100%; overflow:hidden; background-color:#f2f2f2; padding:30px; font-weight:300; color:#161616; display:block; }
.menu-exd-logo { width:150px; }
.bordergoed { -webkit-box-shadow:0px 0px 0px 2px #00a14b inset; -moz-box-shadow:0px 0px 0px 2px #00a14b inset; box-shadow:0px 0px 0px 2px #00a14b inset; }
.borderfout { -webkit-box-shadow:0px 0px 0px 2px #d03737 inset; -moz-box-shadow:0px 0px 0px 2px #d03737 inset; box-shadow:0px 0px 0px 2px #d03737 inset; }

.menuitems25 { background-color:rgba(22,22,22,0.9); position:fixed; top:65px; bottom:0px; left:0px; right:0px; padding:40px; text-align:center; display:none; z-index:900; }
.datumcheck { height:118px; width:100%; }
.datumcheck input[type="date"] { width:100%; height:50px; }
.datumcheck_over { width:100%; box-sizing: border-box; -webkit-border-radius:25px 25px 0px 0px; -moz-border-radius:25px 25px 0px 0px; border-radius:25px 25px 0px 0px; }
.top a.btn_datum { -webkit-border-radius:0px 0px 25px 25px; -moz-border-radius:0px 0px 25px 25px; border-radius:0px 0px 25px 25px; position:unset; right:unset; width:100%; }

.start h1 { font-size:50px; }
.start h4 { font-size:50px; }
.start .btn { margin-top:10px; }
.start h1 div { width:100%; }
.start_intro, .missie { width:90%; }
.start_regel { width:100%; }
.pag1 h1 { margin:20px 0px; }
.pag1 h2 { padding:20px 30px; }
.scroll-down { display:none; }
.kolmid { width:90%; }

.w50 { max-width:95%; }
.container-65 { padding:50px 30px; }
.fotoinfo { left:15px; }
.kol { padding:50px 0px; }
.offerte_bg .w50 { max-width:100%; }

.stop_txt { margin:30px 0px; }
.stap_con { padding:50px; }
.txt_col { width:100%; }
.txt_col h3 { font-size:36px; margin-bottom:30px; }
.stap_grid3 { display:unset; margin-top:50px; }
.stap_icon_col { padding:20px; }
.stap_griffoto_txt strong { width:100%; display:block; }
.wave_l_o { background-size:95%; }
.wave_r_b { background-size:95%; }

/* START BRUILOFT DJ */
.dj_container .p50 { width:100%; position:absolute; top:0px; left:0px; right:0px; }
.dj_info { /*position:absolute; top:265px; left:15px; right:15px;*/ margin-top:215px; }

/* STOP BRUILOFT DJ */

/* START STAPPENPLAN */
.stappen .p50 { width:100%; }
.stappen_bol img { width:100%; height:100%; }
.stappen_memo { width:100%; }
/* STOP STAPPENPLAN */

/* START GALLERIE */
.gallerij_grid2 { grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-rows: 1fr; column-gap:30px; row-gap:30px; }
.gallerij_container { padding:0px 15px; }
.gallerij_video .top_video_over { display:flex; }

/* STOP GALLERIE */

/* START DRIVE-IN SHOW */
.show_container .p50 { width:100%; position:absolute; top:0px; left:0px; right:0px; }
.side_photo { position:relative; height:250px; }
.side_photo img { width:100%; }
.show_container .w40 { margin-top:200px;  }
.di_info { position:absolute; top:265px; left:15px; right:15px; }
/* STOP DRIVE-IN SHOW */

/* START PIJLERS */
.pijlers_grid { display:grid; grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-rows: 1fr; column-gap:30px; row-gap:15px; }

/* STOP PIJLERS */

/* START PARTNER */
.partner_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width:90%; margin:0px auto; }

/* STOP PARTNER */

/* START OFFERTE */
.off_grid4 { grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:10px; row-gap:0; }
.off_grid5 { grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:10px; row-gap:0; }
.off_dj:hover { background-color:#00a14b; }
.off_extra_item:hover { background-color:#00a14b; }
/* STOP OFFERTE */


/* START REVIEWS */
.rev_intro { margin:0px auto 50px auto; }
.rev_grid { display:grid; grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-rows: 1fr; column-gap:30px; row-gap:0; }
.rev_item { padding:35px; }
.rev_item .p50 { width:100%; }
.rev_locatie { float:none; display:block; padding-top:5px; }
.rev_mid { width:100%; }
/* STOP REVIEWS */

/* START FOOTER */
.footer h3 { font-size:50px; }
.footer_grid { grid-template-columns: repeat(1, minmax(0, 1fr)); row-gap:0px; }
.footer_grid div { text-align:center; }
.footer .p50 { width:100%; }
/* STOP FOOTER */
}