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

@font-face {
    font-family: 'roboto-light';
    src: url('https://afspraak.theweddingdj.nl/fonts/Roboto-Light-webfont.eot'); /* IE9 Compat Modes */
    src: url('https://afspraak.theweddingdj.nl/fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('https://afspraak.theweddingdj.nl/fonts/Roboto-Light-webfont.woff"') format('woff'), /* Modern Browsers */
			url('https://afspraak.theweddingdj.nl/fonts/Roboto-Light-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
            url('https://afspraak.theweddingdj.nl/fonts/Roboto-Light-webfont.svg#roboto-regular') format('svg'); /* Legacy iOS */ 
    font-weight: normal; font-style: normal; font-display: swap;
}

@font-face {
    font-family: 'roboto';
    src: url('https://afspraak.theweddingdj.nl/fonts/Roboto-Regular-webfont.eot'); /* IE9 Compat Modes */
    src: url('https://afspraak.theweddingdj.nl/fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('https://afspraak.theweddingdj.nl/fonts/Roboto-Regular-webfont.woff') format('woff'), /* Modern Browsers */
            url('https://afspraak.theweddingdj.nl/fonts/Roboto-Regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
            url('https://afspraak.theweddingdj.nl/fonts/Roboto-Regular-webfont.svg#roboto-regular') format('svg'); /* Legacy iOS */ 
    font-weight: normal; font-style: normal; font-display: swap;
}

@font-face {
    font-family: 'roboto-bold';
    src: url('https://afspraak.theweddingdj.nl/fonts/Roboto-Bold-webfont.eot');
    src: url('https://afspraak.theweddingdj.nl/fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://afspraak.theweddingdj.nl/fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('https://afspraak.theweddingdj.nl/fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('https://afspraak.theweddingdj.nl/fonts/Roboto-Bold-webfont.svg#roboto-bold') format('svg');
    font-weight: normal; font-style: normal; font-display: swap;
}

@font-face {
    font-family: 'roboto-black';
    src: url('https://afspraak.theweddingdj.nl/fonts/Roboto-Black-webfont.eot');
    src: url('https://afspraak.theweddingdj.nl/fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://afspraak.theweddingdj.nl/fonts/Roboto-Black-webfont.woff') format('woff'),
         url('https://afspraak.theweddingdj.nl/fonts/Roboto-Black-webfont.ttf') format('truetype'),
         url('https://afspraak.theweddingdj.nl/fonts/Roboto-Black-webfont.svg#roboto-black') format('svg');
    font-weight: normal; font-style: normal; font-display: swap;
}

@font-face {
    font-family: 'roboto-blackitalic';
    src: url('https://afspraak.theweddingdj.nl/fonts/Roboto-BlackItalic-webfont.eot');
    src: url('https://afspraak.theweddingdj.nl/fonts/Roboto-BlackItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://afspraak.theweddingdj.nl/fonts/Roboto-BlackItalic-webfont.woff') format('woff'),
         url('https://afspraak.theweddingdj.nl/fonts/Roboto-BlackItalic-webfont.ttf') format('truetype'),
         url('https://afspraak.theweddingdj.nl/fonts/Roboto-BlackItalic-webfont.svg#roboto-black') format('svg');
    font-weight: normal; font-style: normal; font-display: swap;
}

body { font-family: "Montserrat", sans-serif; font-weight:300; font-size:16px; margin:0px; padding:0px; color:#161616; scroll-behavior: smooth; background-color:#f2f2f2; } /*background-color:#c2c2c2;*/
html, body, form { height:100%; padding:0px; margin:0px; }
h1, h2, h3, h4, h5 { padding:0px; margin:0px; }
p { line-height:150%; }
img { max-width:100%; height:auto; }
section { padding:20px 0px; overflow:hidden; }
ol, ul { padding:10px; }
li { padding:0px 0px 10px 0px;}
ul li div {  }
hr { border-top:1px solid rgba(242,242,242,1); border-bottom:none; border-left:none; border-right:none; margin:30px;}

h1 { font-size:50px; font-family: "Montserrat", sans-serif; text-transform:unset; text-transform:uppercase; font-weight:800; margin-bottom:20px; }
h2 { font-size:50px; font-family: "Montserrat", sans-serif; text-transform:unset; text-transform:uppercase; }
h3 { font-size:30px; font-family: "Montserrat", sans-serif; text-transform:unset; text-transform:uppercase; margin:0px; padding:0px; line-height:100%; font-weight:800; }
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.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.btn2 { padding:10px 20px; background-color:#fff; display:inline-block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-weight:bold; cursor:pointer;}
a.btn2:hover { background-color:rgba(254,196,56,1); }

textarea, input { outline:none; -webkit-appearance: none; font-family:'Open Sans'; font-size: 14px; border:1px solid #cccccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width:100%; padding:10px; box-sizing:border-box; }
input[type=checkbox] { -webkit-appearance:checkbox; }
input, textarea, select { -webkit-appearance: none; border:1px solid #cccccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
label { padding-bottom:5px; display:block; }

.hide { display:none; }
.handje { cursor:pointer; }
.fotos { margin-top:20px; }
.midkol { width:800px; max-width:95%; margin:10px auto 50px auto; background-color:#fff; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; padding:50px; overflow:hidden; box-sizing:border-box; }
.regelbtn { overflow:hidden; margin-top:20px; }
.regel { overflow:hidden; margin:10px 0px; }
.regel span { vertical-align:middle; margin-right:15px; }
.legenda { overflow:hidden; margin-bottom:20px; }
.kol25 { width:25%; float:left; }
.kol50 { width:50%; float:left; }
.kol75 { width:75%; float:left; }
.onderschrift { font-size:80%; }
.txtgeel { color:var(--bruingoud); } 
.profielfoto { height:100px; width:100px; 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); }
.profiel { width:100px; float:left; text-align:center; margin-right:20px; }
.profiel .profielfoto { margin:30px 0px 20px 0px; }

.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); }
.txtc { text-align:center; }
.txtl { text-align:left; }
.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; }
.extra { display:none; }
.right { float:right; }
.foutmelding { background-color:#d03737; color:#fff; -webkit-border-radius:5px 5px 5px 5px; -moz-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; padding:20px; text-align:center; }
.goedmelding { background-color:#00a14b; color:#fff; -webkit-border-radius:5px 5px 5px 5px; -moz-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; padding:20px; text-align:center; }
.goedicon { vertical-align:middle; margin-right:10px; }

table { width: 100%; }
th { text-align: center; }
td { width: 120px; text-align: center; }
.kal_tijden { position:relative; min-height:300px; }
.table { position:relative; }
.geenopties { position:absolute; top:0px; bottom:0px; left:0px; right:0px; background-color:rgba(255,255,255,0.7); display:flex; justify-content:center; align-items:center; font-weight:bold; text-align:center; }

.kal_container { width:300px; max-width:100%; }
.kal_round { background-color:rgba(242,242,242,0.5); -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; text-align:center; } 
.kal_round:hover { background-color:rgba(182,155,86,0.6); color:#fff; cursor:pointer; }
.day div { width:40px; height:40px; line-height:40px; }
.kal_kop { font-size:20px; font-weight:bold; display:inline-block; margin:0px auto 30px auto; }
.kal_kop_container { overflow:hidden; position:relative; }
.row { font-size:14px; }
.kal_nav { position:absolute; right:0px; top:0px; }
.kal_nav_round { -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; } 
.kal_nav_round:hover { background-color:rgba(182,155,86,0.8); color:#fff; cursor:pointer; } 	
.kal_tijd, .kal_item { padding:10px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background-color:#fff; width:100%; margin:5px 0px; background-color:rgba(242,242,242,0.5); box-sizing:border-box; font-size:14px; }
.kal_tijd:hover, .kal_item:hover { background-color:rgba(182,155,86,0.8); color:#fff; cursor:pointer; }
.kal_select { background-color:var(--bruingoud); color:#fff; font-weight:bold; }

.dota_radio { display:inline-flex; background:#fff; align-items: center; justify-content:space-evenly; -webkit-border-radius:5px 5px 5px 5px; -moz-border-radius:5px 5px 5px 5px; border-radius:5px 5px 5px 5px; position:relative; width:350px; max-width:100%; height:38px; overflow:hidden; }
.dota_radio input[type="radio"]{ display:none; }
.dota_radio table { width:100%; height:100%; position:absolute; left:0px; border-collapse:collapse; }
.dota_radio tr { display:table-cell; position:relative; }
.dota_radio label { position:absolute; top:0px; bottom:0px; left:0px; right:0px; display:flex; justify-content:center; align-items:center; transition:all 0.3s ease; cursor:pointer; background-color: rgba(242,242,242,0.5); padding:0px; }
.dota_radio input:checked ~ label { background-color:#55D069; }
.dota_radio input ~ label:hover { background-color:rgba(254,196,56,0.6); cursor:pointer; }
.dota_radio .rad_soort input:checked ~ label { background-color: rgba(254,196,56,1); }

/* START WAITING */
.opa { position:fixed; background-color:rgba(41,41,41,0.7); z-index:500; left: 0px; top: 0px; width:100%; height:100%; text-align:center; display:none; }
.wait_logo { width:200px; height:200px; position: fixed; left: 50%; top: 50%; margin-left:-100px; margin-top:-100px; display:none; }
.logo-img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.8); transform-origin: center; animation: heartbeat 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(.8); } }
@keyframes heartbeat{0%{transform:translate(-50%,-50%) scale(.8)}10%{transform:translate(-50%,-50%) scale(1)}17%{transform:translate(-50%,-50%) scale(.9)}25%{transform:translate(-50%,-50%) scale(1)}40%{transform:translate(-50%,-50%) scale(.8)}100%{transform:translate(-50%,-50%) scale(.8)}}
/* STOP WAITING */

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

h1 { font-size:30px }
h2 { font-size:20px; }
.kol50 { width:100%; float:none; }
.midkol { padding:20px; } 
.kal_tijden { margin-top:20px; }
.kal_container { width:100%; }

}