/*//////////////////////////////////
////////   bsmijlpaal.be     ////////
//////// custom build v2.04 ////////
////////   rogez.design™    ////////
////////    2018/09/15      ////////
///  last-edit: 2026-09-14  ////////
//////////////////////////////////*/

/* FONTS - @import moet de eerste regel zijn (na eventuele comments), anders
   negeert de browser hem stil. Stond voorheen na :root{} en laadde daardoor
   nooit - BenchNine/Raleway vielen terug op een systeemfont. */
@import url('https://fonts.googleapis.com/css?family=BenchNine|Raleway:300,300i');

/* geel: #FFB921 */
/* turquoise: #39ACA3 */
/* oranje: #F78118 */
/* wit: #F5F0EB */
/* groen: #1E7566 */

/* COLOURS */
:root {
  --yellow: #FFB921;
  --turquoise: #39ACA3;
  --orange: #F78118;
  --white: #F5F0EB;
  --green: #1E7566;
}

*{ margin:0; padding:0; box-sizing:border-box;}
html{font-family:"Raleway", sans-serif; font-style:normal; font-weight: 300; }
body{ overflow-x:hidden; font-size:16px; background-attachment:fixed; background-image:url(includes/rotator.php); background-position:center; background-size:cover; min-height:100vh;}

header{ display:flex; width:100%; background-color:rgba(255,255,255,0.8); mix-blend-mode: normal; justify-content:space-around; height:12vh; }
header.editor{ background-color:rgba(255,100,100,0.3); }
header div{ margin:3vh 0 1.5vh 0; width:20vw; transition:filter 3s ease; }
header div:hover{ filter: drop-shadow( 0px 0px 30px rgba(255,255,255,0.8) ); }
header div img{ height:100%;  }
header div.smaller{ display:flex; flex-flow: column nowrap; justify-content:flex-end; }
header div.smaller img{ height:80%; } 

nav{ display:flex; background-color:var(--yellow); justify-content: center; font-family: BenchNine;}
nav a{ color:black; font-size:1.4rem; text-transform:uppercase; text-decoration:none; padding:0.7vh 2vw 0.4vh 2vw; text-align:center; font-size:1.5rem; transition:background-color 0.5s;}
nav a:hover{background-color:var(--white); }
nav a.active{background-color:var(--white); }
nav#sub{ background-color:var(--turquoise);  }
nav#sub a{ padding:0.4vh 2vw 0.1vh 2vw; font-size:1.2rem; color:var(--white); transition:color 0.5s;}
nav#sub a:hover{ color:black; }
nav#sub a.active{ color:black; }
nav#albums{ background-color:var(--orange); }
nav#albums a{ padding:0.4vh 2vw 0.1vh 2vw; font-size:1.2rem; color:var(--white); transition:color 0.5s;}
nav#albums a:hover{ color:black; }
nav#albums a.active{ color:black; }

main { display:block; margin:50px auto; width:calc(100% - 6vh); overflow:hidden;}

footer{ display:flex; justify-content:space-around; position:fixed; bottom:0; background-color:rgba(255,255,255,0.8); width:100%; }
footer div{ font-size:1.2rem; font-family: BenchNine; text-transform:uppercase; padding:0.2vh;}
footer a{ color:black; text-decoration: none; }

/* TEXT FORMATS */
h1,h2,h3,h4,h5,h6{ font-weight: normal; }
h1{ font-size:3rem; font-weight:normal; text-transform: uppercase; background-color: var(--white); padding:2vh;  column-span: all; }
h2{ font-size:2rem; font-weight:bold; margin-bottom:1vh; color:var(--turquoise);}
h3{ font-size:1.5rem; font-weight:bold; margin-bottom:1vh; color:var(--turquoise);}
h4{ font-size:1.2rem; font-weight:bold; color:var(--orange); margin-bottom:0.5vh;}
h5{ font-size:1rem; font-weight:bold; color:var(--orange);}
h6{ font-size:1rem; font-weight:normal; color:var(--orange);}
p{ padding-bottom:1vh; line-height: 1.8rem; }
ul,ol{ list-style-position: inside; padding-bottom:1vh; }
ul{ list-style-type: square;}
li{ padding:0.2vh 0; line-height: 1.8rem; }
mark{ background-color: var(--yellow); font-style: italic;}
code{ background-color: lightgrey; }
code span{ color:var(--green); }
b{ font-weight: bold;}
u{ font-family:Arial; display: inline;}

/* FORMAT CLASSES */
.bold{ font-weight: bold; }
.italic{ font-style: italic;}
.center{ text-align: center; }
.right{ text-align: right; }
.turquoise{ color:var(--turquoise); }
.orange{ color:var(--orange); }
.blue{ color:var(--turquoise); } /* alias, oude naam - kan nog in bestaande RCMS-content staan */
.red{ color:var(--orange); } /* alias, oude naam - kan nog in bestaande RCMS-content staan */
::-moz-selection{ background: var(--yellow); }
::selection{ background: var(--yellow); }

/* CONTENT */
article{ position:relative; text-align:left; display: inline-block; background-color: rgba(255,255,255,0.9); padding:2vh; margin:2vh; transition:background-color 500ms;}
article.block{display:block;}
article:hover{ background-color: rgba(255,255,255,1); }
article a{text-decoration: none; color:var(--orange); }
article a:hover{ text-decoration: underline !important; }
article a.arrow{ display:block; padding-bottom:1rem; }
article a.arrow::before{ content: "> " }
article figure.icon{ height:5vh; margin:1vh 0; position: absolute; padding:3px; right:6px; top:0; opacity: 0.7}
article figure img{ height:100%; }
iframe{ border:0; width:100%; height:70vh; }
iframe.map{ border:0; width:50vw; height:50vh; }

/* RCMS */
div.rcms{ background-color: var(--white); padding:1vh;}
div.rcms table{width:100%;}
div.rcms table td{ padding:1vh; }
div.rcms table td p{ padding-bottom:0;}
div.rcms table tr:nth-child(even){ background-color: rgba(255,255,255,0.9);}
div.rcms figure.td{ width:10vw; height:100px; overflow:hidden;  }
div.rcms figure.td img{ width:100%; }
div.rcms section{ width:80vw; margin:5vh auto; border:3px dashed black; padding:20px 35px 15px 35px; background-color: rgba(255,255,255,0.6); }
div.rcms section form{ width:80%; margin:5vh auto; }
div.rcms section.dialog{ display:none; width:60vw; margin:5vh auto; border:3px dashed black; padding:20px 35px 15px 35px; background-color: rgba(255,255,255,0.6); }
div.rcms section#editcontent{ display:none; }
div.rcms a.delart{ color: var(--orange); text-decoration: none; }
div.rcms a.editart{ color: var(--green); text-decoration: none; }
div.rcms a.delart:hover, a.editart:hover{ border-bottom:2px dashed var(--turquoise); cursor:pointer;}
h2.orange{ color:var(--orange); text-align: center; }
h2.red{ color:var(--orange); text-align: center; } /* alias, oude naam - kan nog in bestaande RCMS-content staan */
h2.green{ color:var(--green); text-align: center; }


/* QUOTE */
q{ font-size:2rem; font-style: italic; line-height: 3rem; color:var(--turquoise);}
q::before{content:open-quote; font-weight:bold; color:var(--orange); text-shadow:none; font-size:3rem;}
q::after{content:close-quote; font-weight:bold; color:var(--orange); text-shadow:none; font-size:3rem;}
blockquote{ display:inline-block; font-size:3rem; font-style:italic; line-height:4rem; color:black; }
blockquote::before{content:open-quote; font-weight:bold; color:var(--orange); text-shadow:none; font-size:5rem;}
blockquote::after{content:close-quote; font-weight:bold; color:var(--orange); text-shadow:none; font-size:5rem;}


/* FORM */
form{ }
label{display:inline-block; padding:0 1vw}
legend{ margin-left:3%; }
input, textarea, select, fieldset, button{ display:block; font-size: 1.5rem; padding:10px; border-radius:10px; text-align:center; margin:10px auto; transition: border-color 1s; background-color:rgba(255,255,255,0.8); border:1px solid grey; font-family:"Raleway";}
input:focus, textarea:focus, select:focus, button:focus{ border-color:var(--turquoise); }
select{width:150px; text-align:center;}
button{ display:inline-block;}
textarea{ height:35vh; resize:vertical; }
textarea, input, select, option{width:90%; margin-bottom: 3vh;}
input[type=radio],input[type=checkbox]{ display:inline-block; margin:10px 1vh; width:auto;}
input[type=number]{text-align:center; width:25%;}
input[type=file]{width:100%;}
input[type=submit],button{padding:0 10px; margin-top:3vh; background-color:var(--white); border:1px solid #333; height:5rem; font-size:2rem; transition:background-color 1s;}
input[type=submit]:hover{ background-color:var(--yellow); border-color:var(--turquoise); cursor:pointer;}
button:hover{ background-color:var(--yellow); border-color:var(--turquoise); cursor:pointer;}
::-moz-placeholder{text-align:center;}

/* COLLS */
div.colls{ }
div.colls figure.width{ width:100%;}
div.colls figure.width img{ width:100%; margin-top:2vh;}

/* VIDEO */
div.colls article.video{ display:inline-block; width:100%; }
div.colls article.video div{ position: relative; padding: 28.13% 0;}
div.colls article.video div iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* VIDEOPLAYER - eigen html5 video (geen iframe, dus geen aspect-ratio-hack nodig) */
div.videopage{ text-align:center; }
article.videoplayer{ display:inline-block; max-width:100%; text-align:left; }
article.videoplayer video{ display:block; height:50vh; width:auto; max-width:100%; background-color:black; }
article.videoplayer a.arrow{ display:block; margin-top:1.5vh; }

@media only screen and (orientation: portrait){
	article.videoplayer{ width:100%; max-width:100%; padding-left:8px; padding-right:8px; box-sizing:border-box; }
	article.videoplayer video{ width:100%; max-width:100%; height:auto; }
}

/* GALLERY */
div.gallery { display:flex; flex-flow:row wrap; justify-content: center; padding:1vh 0; }
div.gallery a{ display: inline-block; }
div.gallery a.delphoto:hover{ background-color: rgba(255,100,100,0.4); cursor:pointer; }
div.gallery figure { filter:grayscale(20%); height:25vh; margin:1vh; margin-bottom:5vh; }
div.gallery figure:hover { opacity:0.9; filter:grayscale(0%);}
div.gallery figure img { height:90%; }
div.gallery figure figcaption{ background-color:var(--white); padding:0.5vh 1vh;  }
div.gallery figure.editor{ background-color:var(--orange); }
div.gallery figure.editor img:hover { cursor:pointer; opacity:0.5; transition:opacity 300ms;}
div.gallery figure.editor figcaption{ font-size:0.6rem; text-align: center; transition:background-color 300ms;}
div.gallery figure.editor figcaption:hover{ background-color: rgba(100,255,100,0.4); cursor:pointer; }
div.sfeer{ background-color: rgba(0,0,0,0.1); }

/* DOCS */
div.filelist { width:80vw; margin:5vh auto; border:3px dashed black; padding:20px 35px 15px 35px; background-color: rgba(255,255,255,0.6); }
div.filelist table{ width: 100%;}
div.filelist table tr:hover{ background-color:rgba(255,255,255,0.9); }
div.filelist table td{ padding:0.5rem 0;}

/* MASONRY */
div.masonry { margin:1.5em 0; column-gap:2rem; font-size: 0.85em; }
div.masonry section{ display: inline-block; page-break-inside: avoid; break-inside: avoid-column; background-color:rgba(255,255,255,0.8); padding:0em; margin:0 0 2.5rem; width:100%; transition:filter 3s ease,background 3s ease; cursor:pointer;}
div.masonry section.hidden{ opacity:0.5; }
div.masonry section a{ text-decoration:none; color:black; }
div.masonry section h4{ position:relative; z-index:2; background-color:var(--yellow); opacity:1; color:white; text-align: center; margin-bottom:0; }
div.masonry section:hover{ filter: drop-shadow( 0px 0px 30px rgba(0,0,0,0.6) ); }
div.masonry section:hover h4{ background-color:var(--orange);  }
div.masonry img { width:100%;  display:block; }
div.masonry section article{ display:block; padding: 1.5rem; margin:0; }

/* MEDIA QUERIES */
@media only screen and (min-width: 400px) { div.masonry { column-count: 1; } div.colls{ column-count: 1; } }
@media only screen and (min-width: 800px) { div.masonry { column-count: 2; }  div.colls{ column-count: 1; } }
@media only screen and (min-width: 1000px) { div.masonry { column-count: 3; }  div.colls{ column-count: 2; } }
@media only screen and (min-width: 1600px) { div.masonry { column-count: 4; }  div.colls{ column-count: 3; } }
@media only screen and (min-width: 1800px) { div.masonry { column-count: 5; }  div.colls{ column-count: 4; } }

@media only screen and (orientation: landscape){
	nav{ flex-flow:row wrap;}
	footer{ flex-flow:row wrap; }
}

@media only screen and (orientation: portrait){
	nav{ flex-flow: column wrap;}
	footer{ flex-flow:column nowrap; text-align: center; position: absolute; bottom:0; display:none;}
	header div.smaller{display:none;}
	div.gallery { flex-flow:column wrap; }
	div.gallery figure{ height:auto; width:100%; }
	div.gallery figure img{ width:100%; }
}