/* colors
    #151C47    dark blue
    #283687    medium blue
    #
    #ffffff    white
    

*/

html, body
{ padding:0; margin:0; height:100%;
  /*font-family: 'Quicksand', sans-serif;*/
  /*font-family: "Playfair Display", serif;*/
  font-family: "Libre Baskerville", serif;
  font-size: 100%;
}

body {
    color: #666666;
}
img{ margin:0; padding:0; border:0; display:block;}
a {color: #666666; }
ul {margin:0;}
h1 {text-align:center; font-size:2.0rem;}
h2 {font-size:1.2rem; font-weight:bold;}
h3 {font-size:1.2rem; font-weight:bold; color:#283687; }
/*h4 {font-size:2rem; margin:0; font-weight:bold; color:#ffffff; text-decoration:overline; }
*/
.header-logo { height:150px; margin-top:-50px; transition: all 0.5s; }
.header-logo.scroll-adjusted { height:80px; margin-top:-28px; transition: all 0.5s;}

.link {color:#ffffff; text-decoration:none;}
.link:hover { text-decoration: underline; }
.link2 {color:#333333; text-decoration:none;}
.link2:hover { text-decoration: underline; }


.mainmenu {
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
}
.mainmenu * {
    box-sizing: border-box;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}
.mainmenu li {
    display: inline-block;
    list-style: outside none none;
    margin: 0 1.0em;
    overflow: hidden;
}
.mainmenu a {
    padding: 0.3em 0;
    position: relative;
    display: inline-block;
    letter-spacing: 1px;
    margin: 0;
    text-decoration: none;
}
.mainmenu a:before,
.mainmenu a:after {
    position: absolute;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}
.mainmenu a:before {
    top: 100%;
    display: block;
    height: 3px;
    width: 100%;
    content: "";
    background-color: #151C47;
}

.mainmenu a:after {
    padding: 0.3em 0;
    position: absolute;
    top: 100%;
    left: 0;
    content: attr(data-hover);
    white-space: nowrap;
}
.mainmenu li:hover a,
.mainmenu .mainmenu-current a {
    transform: translateY(-100%);
}

.mainmenu-mobile { padding:0; }
.mainmenu-mobile li { display:block; text-align:center; text-transform:uppercase; margin:20px; font-size:1.5rem;}
.mainmenu-mobile a { color:#ffffff;  text-decoration:none; display:block; }
.mainmenu-mobile a:hover { color:#151C47; background-color:#ffffff; transition:all 0.1s; }



.slide-hidden {
    opacity: 0;
}

.page-header-full { height:calc(100vh - 150px); text-align:center; position:relative; overflow:hidden;}
.page-header-img { position:absolute; top:0; left:0; width:100%; height:100%; background-repeat: no-repeat; background-size: cover; background-position: top;}
.page-header-full-contentwrapper { display:flex; justify-content:center; align-content:center; height:100%; }
.page-header-full-content { display:flex; flex-direction:column; justify-content:center; }
.page-header-full-content-title { background-color: RGBA(0,0,0,0.3); color:#ffffff; font-size: 2.3rem; font-weight:600; padding: 50px; z-index:1000; max-width:60%; margin:auto; text-align:left;}

.page-header-small { height:400px; position:relative; overflow:hidden; }
.page-header-small-contentwrapper { display:flex; justify-content:flex-start; align-content:center; height:100%; background-color:RGBA(0,0,0,0.2); }
.page-header-small-content { display:flex; flex-direction:column; justify-content:center; }
.page-header-small-content-title { background-color: RGBA(0,0,0,0); color:#ffffff; font-size: 2.3rem; font-weight:600; padding: 50px; z-index:1000; margin:0 0 0 50px; text-align:left;}

.page-header-2 { width:100%; display:flex; flex-direction:row; flex-wrap:nowrap; min-height:500px; background-color:#ffffff;}
.page-header-2>div { flex-grow:1; width:50%; }
.page-header-2-content { margin:100px 0 100px -200px; min-height:300px; padding:40px; background-color:#ffffff; display:flex; flex-direction:column; }
.page-header-2-content>div:first-child { font-size:2rem; color: #151C47; margin-bottom: 20px;}
.page-header-2-content>div:last-child { color: #333333; }

.content-areas {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items: center;}
.content-areas>div { width:25%; max-width: 400px; min-width:200px; height:250px; margin:20px; background-repeat: no-repeat; background-size: cover; background-position: top; }
.content-area-link { display:block; width:100%; height:100%; }
.content-area-link:hover { background-color:RGBA(0,0,0,0.5); }
.content-area-title { background-color:RGBA(0,0,0,0.5); color:white; text-align:center; font-size:1.2rem; padding: 10px 5px; }

.content-vacatures { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; padding: 10px; }
.content-vacatures>div { width:500px; margin:20px;  }

.content-projecten {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items: center;}
.content-projecten>div { max-width:100%; width:500px; height:500px; display:flex; flex-direction:column; padding:30px; }
/*.content-projecten>div:hover { opacity:0.8; }
*/
.content-projecten-project-overlay { width:100%; height:100%; padding: 20px; box-sizing: border-box; background-color:RGBA(0,0,0,0.1); color:#ffffff; display:flex; flex-direction:column; transition: all 0.5s ease; }
.content-projecten-project-overlay:hover { background-color:RGBA(0,0,0,0.4); transition: all 0.5s ease; }
.content-projecten-project-overlay>div:first-child {  }
.content-projecten-project-overlay>div:last-child { opacity:0; transition:all 0.5s ease; flex-grow:1; }
.content-projecten-project-overlay>div:last-child:hover { opacity:1; transition:all 0.5s ease; }

/*.content-projecten-project-summary { display:flex; flex-direction:row; flex-wrap:nowrap; }
.content-projecten-project-summary>div {  }
.content-projecten-project-summary>div:first-child { width:450px; height:450px; margin-right:15px; background-size: cover; background-position: center center; background-repeat: no-repeat;}
.content-projecten-project-summary>div:last-child { width:200px; }
*/
.content-project-panel {}

.content-project-update {  }
.content-project-update-images { display:flex; flex-direction:row; gap:20px; flex-wrap:wrap; }
.content-project-update-images>div { width:300px; height:300px; background-repeat: no-repeat; background-size: cover; background-position: center; }


.content-block-t1 { width:100%; max-width:1000px; min-height:550px; margin:0 auto; display:flex; flex-direction:row; background-image: url(/images/img_ron.jpg); background-repeat: no-repeat; background-size: initial; background-position: center;  }
.content-block-t1-l { flex-grow:1; }
.content-block-t1-r { background-color:RGBA(0,0,0,0.3); color:#ffffff; max-width:50%; padding:0 2em 0 2em; }

.content-block-t2 { width:100%; max-width:1000px; margin:0 auto; display:flex; flex-direction:row; }
.content-block-t2>div { flex: 1 1 0px; text-align:justify; padding:20px; }
.content-block-t2-l {  }
.content-block-t2-r {  }

.content-block-t3 { width:100%; max-width:1000px; margin:0 auto; display:flex; flex-direction:row; }
.content-block-t3>div { flex: 1 1 0px; text-align:justify; padding:20px; }
.content-block-t3-l { margin-left: -100px; }
.content-block-t3-r { margin-top:-150px; background-color:#151C47; color:#ffffff; background: linear-gradient(180deg, rgba(24,29,68,0.3046393557422969) 0%, rgba(24,29,68,1) 21%);  padding:40px 50px !important; }

.content-block-t4 { width:100%; max-width:1000px; margin:0 auto; display:flex; flex-direction:row; }
.content-block-t4>div { flex: 1 1 0px; text-align:justify; padding:20px; }
.content-block-t4-l { margin-top:-150px; background-color:#151C47; color:#ffffff; background: linear-gradient(180deg, rgba(24,29,68,0.3046393557422969) 0%, rgba(24,29,68,1) 21%);  padding:40px 50px !important; }
.content-block-t4-r {  }

.content-vacatures { display:flex; flex-direction:row; flex-wrap:wrap; }
.content-vacatures>div { margin:20px; padding:20px; background-color: #eeeeee; display:flex; flex-direction:column; text-align:left; }
.content-vacatures>div>div:first-child { font-size:1.5rem; font-weight:bold; color:#151C47; border-bottom:1px solid; margin-bottom:30px; }
.content-vacatures>div>div:last-child { height:300px; margin:40px -20px -20px -20px; }

.content-vacature { }

.content-h4 { font-size:2rem; margin:0; font-weight:bold; color:#ffffff; border-top: 3px solid #ffffff; text-align:left; display:inline-block; }


.nd-c { display:flex; flex-direction:row; flex-wrap:nowrap; margin: 10px 0; align-items:center;}
.nd-mr20 { margin-right: 20px; }

.panel-closebutton { position:sticky; top:10px; display:flex; flex-direction:row; flex-wrap:nowrap;}
.panel-closebutton>div:first-child { flex-grow:1; }
.panel-closebutton>div:last-child { margin-right:10px;  }
.panel-closebutton>div:last-child>img { cursor:pointer; }


.panel-project { width:calc(80% - 40px); height:80%; position:fixed; top:10%; left:10%; padding:20px; background-color: RGBA(30,30,30,0.95); 
                 transition: all 0.3s ease-out; z-index:10000; border-radius:50px; transform:rotate(360deg); box-shadow: 0 0 100px 40px #000000; }
.panel-project-hidden { top:-100% !important; opacity:0 !important; transition: all 0.3s ease-out; transform: rotate(180deg);}
.panel-project-layout { position:relative; height:100%; overflow-y:auto; }
.panel-project-content-outer { display:flex; flex-direction:column; }
.panel-project-content-inner { }

.panel-offerte {  width:calc(80% - 40px); height:80%; position:fixed; top:10%; left:10%; padding:20px; background-color: #dddddd; 
                 transition: all 0.3s ease-out; z-index:10000; border-radius:10px; box-shadow: 0 0 50px 20px #555555; overflow-x:hidden; }
.panel-offerte-hidden { top:-100% !important; opacity:0 !important; transition: all 0.3s ease-out; }
.panel-offerte-layout { position:relative; height:100%; overflow-y:auto; }
.panel-offerte-content-outer { display:flex; flex-direction:column; }
.panel-offerte-content-inner { color: #333333; }

.hb-input-container { margin: 10px; padding:0; }
.hb-textbox { width: calc(100% - 40px); border:none; background-color: #ffffff; height: 60px; padding:10px; margin: 0; font-family: 'Quicksand', sans-serif;}
.hb-textarea { width: calc(100% - 40px); height:100px; border:none; background-color: #ffffff; padding:10px; margin: 0; font-family: 'Quicksand', sans-serif; }
.form-submit-error-section { font-weight:bold; color:red; margin-left:10px; margin-top:10px; }
.field-validation-error {color: red;}

@media all and (max-width:1300px) {
    .page-header-full-content-title { font-size: 2rem; max-width:70%; }

    .content-block-t3 { flex-direction:column; }
    .content-block-t3>div {  }
    .content-block-t3-l { margin-top:-150px; margin-left:0; background-color:#ffffff; background: linear-gradient(180deg, rgba(255,255,255,0.5046393557422969) 0%, rgba(255,255,255,1) 21%);  padding:40px;  }
    .content-block-t3-r { margin-top:0; background-color:#151C47; color:#ffffff; padding:40px; }

    .content-block-t4 { flex-direction:column-reverse; }
    .content-block-t4-l { margin-top:0; background:initial; background-color:#151C47; padding:40px; }
    .content-block-t4-r { margin-top:-150px; background-color:#ffffff; background: linear-gradient(180deg, rgba(255,255,255,0.5046393557422969) 0%, rgba(255,255,255,1) 21%);  padding:40px 50px !important; }

}

@media all and (max-width:900px) {
    .header-logo { height:80px; margin-top:-28px; }
    .content-block-t2 { flex-direction:column; }
    .content-block-t2>div { padding:10px; }
    .content-block-t3-r {padding: 0; }
    .content-block-t4-l {padding: 0; }

    .content-areas { flex-direction:column; }
    .content-areas>div { width:100%; margin:20px 0; }
    .content-block-t1-r { max-width:100%; flex-grow:2; }
    .page-header-full-content-title {  max-width:80%; font-size:1.4rem; }
    .layout-contentwrapper-content-style-2 { margin:-150px 0% -100px 0%; }

    .panel-project, .panel-offerte { width:calc(100% - 40px); left:0; top:5%; }

}