/*  Style sheet - TimDeibel.nl - Rev. 2016/07/15 */

/* ==================================  CUSTOM FONTS  ====================================== */

/* Generated by Font Squirrel (https://www.fontsquirrel.com) on April 27, 2016 */
@font-face {
    font-family: 'open_sanslight';
    src: url('fonts/opensans-light-webfont.eot');
    src: url('fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-light-webfont.woff2') format('woff2'),
         url('fonts/opensans-light-webfont.woff') format('woff'),
         url('fonts/opensans-light-webfont.ttf') format('truetype'),
         url('fonts/opensans-light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ==================================  CUSTOM STYLES  ====================================== */

html { position:relative; height:auto !important; min-height:100%; }
body {
 font-family: "open_sanslight", Verdana, Geneva, sans-serif;
 font-size: 14px;
 color:#ddd;
 background: #141414 url(../img/bg-wrapper.jpg) repeat;
}

h1,h2,h3 { padding:0; font-weight:normal; }
h1,h2 { margin:1em 0; }
h3    { margin:1em 0 0 0; }
h1 { font-size:1.5em; }
h2 { font-size:1.35em; }
h3 { font-size:1.1em; font-weight:bold; }

p  { margin:0 0 1em 0; padding:0; }
blockquote { font-size:1.0em; font-style:italic; }

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


/* =============================  HOME & MAIN PAGE STYLES  ================================= */

#wrapper { /* size */
 position:relative;
 min-height:300px;
 max-width:1200px;
 margin:0 auto;
}

header {
 position:relative;
 margin:1em 3%;
 padding-bottom:1em;
 border-bottom:1px ridge #ccc;
}
header>h1 {
 margin:0; padding:0;
}

header>h1>a>img {
 display:block;
 height:5em;
 width:auto !important;
}

footer { }


#textblock { /* nav=22% + textblock/portfolio=78% */
 position:absolute;
 left:26%; width:68%;
 top:11em; height:auto;
 box-sizing:border-box;
 padding:4% 3%;
 background-color: rgba(20,20,20, 0.75);
}

.textCol1, .textCol2 {
 float:left;
 text-align:left;
 width: 44%;
 line-height:150%;
}
.textCol1 { margin-left:3%; }
.textCol2 { margin-left:9%; }


/* =================  NAVIGATION  ===================== */

a#navToggle {
 position:absolute;
 top:3%; right:4%;
 width:auto; height:auto;
 border-radius:0.15em;
 padding:0.5rem;
 font-size:3em;
 line-height:1em;
 text-decoration:none;
 display:none;
 z-index:9998;
}
a#navToggle { color:#ccc; background-color:rgba(20,20,20,0.9); }
a#navToggle:hover { color:#fff; text-decoration:none; }

nav { /* nav=22% + textblock/portfolio=78% */
 float: left;
 width:17%;
 margin-top:1.5em;
 margin-left:5%;
 box-sizing:border-box;
 padding:1em;
 background-color:rgba(20,20,20, 0.75);
 border:2px ridge #999;
 border-radius:0.5em;
}

/* ==========  MAIN NAV - LARGE  ========== */

ul#navLarge {
 position:relative;
 padding:0;
 margin:0;
}
ul#navLarge>li {
 display:block;
 list-style:none;
 font-size:1rem;
 margin:0; padding:0;
 color:#999;
}
ul#navLarge>li>a, ul#navLarge>li>span { display:inline-block; padding:0.1rem; }
ul#navLarge>li>a:link, ul#navLarge>li>a:visited { text-decoration:none; color: #999; }

ul#navLarge>li>a:hover, ul#navLarge>li>a:active  { text-decoration:none; color: #fff; }
ul#navLarge>li>a>span.actPfItem { text-decoration:none; color:#fff; }

/* SUB LEVEL (hidden) */
ul#navLarge>li>ul {
 position:absolute;
 padding:0.5em 1em;
 margin:0;
 top:1.2em; left: -9999px;
 list-style:none;
 background-color:rgba(255,255,255, 0.95);
 box-shadow:0.1rem 0.1rem 0.2rem rgba(0,0,0, 0.3);
 opacity:0;
 z-index:9999;
}
ul#navLarge>li>ul>li {
 display:block;
 clear:left;
 padding:0;
 margin:0;
 text-align:left;
}
ul#navLarge>li>ul>li>a { font-size:0.85em; text-decoration:none; white-space:nowrap; color:#999; }

/* SUB LEVEL HOVER (visible) */
ul#navLarge>li:hover>ul { left:0; opacity:1; }
ul#navLarge>li>ul>li>a:link,  ul#navLarge>li>ul>li>a:visited { color:#555; }   /* Sub level - link state */
ul#navLarge>li>ul>li>a:hover, ul#navLarge>li>ul>li>a:active  { color:#111; font-weight:bold; }/* Sub level - hover */
ul#navLarge>li>ul>li>a>span.actPfItem { color:#111; font-weight:bold; }  /* Sub level - active sub item */

/* ==========  MAIN NAV - SMALL (MOBILE)  ========== */

ul#navSmall {
 position:absolute;
 top:3rem; height:auto;
 right:3rem; width:auto;
 margin:0; padding:0;
 text-align:left;
 display:none;
 z-index:9999;
 box-shadow:0 0 0.25em #ccc;
}

ul#navSmall>li {
 display:block;
 list-style:none;
 font-size:1.1em;
 margin:0;
 padding:0 2em 0.25em 2em;
 background-color:rgba(255,255,255, 0.95);
 box-shadow:0.1em 0.1em 0.25em #ccc;
 color:#999;
}

ul#navSmall>li>a:link, ul#navSmall>li>a:visited { text-decoration:none; color:#999; }
ul#navSmall>li>a:hover,ul#navSmall>li>a:active { text-decoration:none; color:#000; }
ul#navSmall>li>a>span.actPfItem { text-decoration:none; color: #000; }

/* SMALL - SUB LEVEL */
ul#navSmall>li>ul {
 margin:0 0.25em;
 padding:0;
 text-align:left;
}
ul#navSmall>li>ul>li {
 display:block;
 list-style:none;
 margin:0; padding:0;
}
ul#navSmall>li>ul>li>a { font-size:0.85em; text-decoration:none; white-space: nowrap; color:#555; }

/* SMALL - SUB LEVEL HOVER (visible) */
ul#navSmall>li>ul>li>a:link, ul#navSmall>li>ul>li>a:visited { color:#555; }   /* Sub level - link state */
ul#navSmall>li>ul>li>a:hover,ul#navSmall>li>ul>li>a:active  { color:#111; }/* Sub level - hover */
ul#navSmall>li>ul>li>a>span.actPfItem { color:#111; }  /* Sub level - active sub item */


/* ==========  PORTFOLIO / LIGHTBOX (+lightbox.css)  =========== */

.portfolio, .flexslider { /* nav=22% + textblock/portfolio=78% */
 position:absolute;
 left:26%; width:68%;
 top:11em; height:auto;
 max-width:1200px; /* max. ECP4 width & height */
 max-height:800px;
}
.portfolio {
 padding-bottom:2.5em;
}

.pfCell {
 float: left;
 width:24%;
 margin: 1% 0 0 1%;
}
.pfImg {
 display:block;
 width:100%;
 height:auto !important;
}

/* ==========  FLEX SLIDER HOME PAGE  =========== */

/* Browser Resets */
.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline: none; }
.slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; }

.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus,
.flexslider_act a:active, .flexslider_act a:focus {outline:none;}
.slides,.flex-control-nav, .flex-direction-nav {margin:0; padding:0; list-style:none;}

.flex-active-slide { text-align:center; }
.slides > li { display:none; position:relative; -webkit-backface-visibility:hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */
.slides li img {
 display:block;
 width:auto;
 height:auto;
 max-width:100%;
 max-height:100%;
 margin:0 auto;
 -webkit-touch-callout:none;
 -webkit-user-select:none;
 -khtml-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
}
.flex-caption {
 position:absolute;
 left:0; right:0;
 bottom:0;
 margin:0;
 padding:0.5em 1em;
 color:#333;
 background-color: rgba(255,255,255, 0.9);
 font-size:0.8em;
 line-height:1.5em;
 opacity:0.1;
 text-align:center;
}
.flex-active-slide:hover .flex-caption { opacity: 1; }

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display:block;}
ul.slides, ul.slides li {height: 100%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Custom Theme
*********************************/
.flex-viewport { height:100%; max-height: 800px; transition: all 0.1s ease; }
.loading .flex-viewport { max-height: 300px; }
.carousel li { margin-right: 5px; }


/* =================  CONTACT FORM  ===================== */

label {
 float:left;
 margin-top:0.1em;
 width:25%;
}
.frm_txt, .frm_area {
 font-family:inherit;
 font-weight:inherit;
 font-size:0.9em;
 line-height:1.5em;
 background:none;
 color:#ccc;
 margin:0.2em 0;
 padding:0.25em;
 border:1px solid #aaa;
}
.frm_txt  { width:40%; height:1em; }
.frm_area { width:70%; height:8em; }

.frm_submit {
 display:block;
 margin-top:1em;
 margin-bottom:1.5em;
 margin-left:50%;
 font-family:inherit;
 font-weight:inherit;
 font-size: 1em;
 line-height:1em;
 width:10em; height:1.9em;
 cursor:pointer;
 color:#111;
}

.cpr-link {
 clear:both;
 margin:1.5em 0;
 font-size:0.85em;
 font-style:italic;
 color:#999;
}
.cpr-link a { color:inherit; }
.cpr-link a:hover { color:#fff; }


/* =================  COMMON CLASSES  ===================== */

.clear {
 float:none;
 clear:both;
}
.clearRight {
 float:none;
 clear:right;
}
.noWrap {
 white-space:nowrap;
}
.floatL {
  float:left;
  width:auto;
}
.floatR {
  float:right;
  width:auto;
}
.textcenter {
 text-align:center;
}
.boxShadow {
 box-shadow:0.1em 0.1em 0.35em #999;
}
.maxWidth {
 display:block;
 width:100%;
 height:auto !important;
}
.quote {
 position: relative;
 font-family: Georgia, serif;
 font-size: 1.2em;
 font-style: italic;
 margin: 1em 0;
 padding: 0.5em 0 0 2.5em;
 line-height: 1.5;
 color: #baa388;
}
.quote:before {
 display: block;
 content: "\201C";
 font-size: 4.5em;
 position: absolute;
 left:-0.1em;
 top: -0.15em;
 color: #baa388;
}

.ieWarning {
  margin:0; padding: 0.5em;
  background: #111;
  color: #ccc;
 }
.ieWarning a, .ieWarning a:hover { color:#fff; }

.jsWarning {
 position:absolute;
 top:10%; height:auto;
 left:15%; right:15%;
 margin:0; padding:1em 2em;
 color:#900;
 font-family:"Courier New", Courier, monospace;
 font-size:1.1em;
 text-align:center;
 background:#ffc; opacity:0.9;
 box-shadow: 0.5em 0.5em 0.5em #000;
 border:#900 0.2em solid;
 z-index:9999;
}

/* ==================================  MEDIA QUERIES  ====================================== */
/* 320, 480, 640, 768, 1024, 1280, 1440, 1920 */

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


}

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

header>h1>a>img { height:4em; }

nav {
 position:absolute;
 top:0; width:100%;
 height:auto;
 margin:0;
 border:none;
 background-color:transparent;
}
ul#navLarge {
 display:none;
 visibility:hidden;
}
a#navToggle {
 display:inline;
 visibility:visible;
}

#textblock, .flexslider, .portfolio {
 position:relative;
 top:0; bottom:0;
 left:0; right:0;
 width:90%;
 margin:2em auto;
 padding:0;
}

.textCol1, .textCol2 {
 float:none;
 width:100%;
 margin:0;
}

}

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

.pfCell { width:32.3%; }

}


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

.pfCell { width:49%; }

}

/* ==========================================================================
   HTML5 Boilerplate v5.0 Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}