/* Main CSS Document - TimDeibel.nl - Rev. 2020/11/18 */
/* Based on HTML5 Boilerplate v8.0.0 */


/* ======================  BASE STYLES  ====================== */

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on July 6, 2014 */
@font-face {
    font-family: 'ralewaylight';
    src: url('fonts/ralewaylight-webfont.eot');
    src: url('fonts/ralewaylight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ralewaylight-webfont.woff') format('woff'),
         url('fonts/ralewaylight-webfont.ttf') format('truetype'),
         url('fonts/ralewaylight-webfont.svg#ralewaylight') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body { width:100%; height:100%; }
body {
 font-family: ralewaylight, Verdana, Geneva, sans-serif;
 font-size: 15px;
 line-height: 1.4;
 color: #ccc;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/* Remove the gap between audio, canvas, iframes, images, videos and the bottom of their containers */
audio,canvas,iframe,img,svg,video { vertical-align: middle; }

/* Remove default fieldset styles */
fieldset { border: 0; margin: 0; padding: 0; }

/* Allow only vertical resizing of textareas */
textarea { resize: vertical; }

.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;
}
.quote:before {
 display: block;
 content: "\201C";
 font-size: 4.5em;
 position: absolute;
 left:-0.1em;
 top: -0.15em;
}

/* ====================  MAIN PAGE STYLES  ==================== */

#wrapper {
 position:relative;
 height: 100%;
 min-height:300px;
 max-width:2000px;
 margin:0 auto;
}

header {
 position: relative;
 float:left;
 box-sizing: border-box;
 text-align: center;
 margin: 5% 0 0 5%;
 width:25%; height: auto;
 background: rgba(0,0,0, 0.65);
 border:1px solid #333;
 border-radius: 1em;
}
header>h1 {
 margin:0;
 padding: 0;
}
header>h1>a>img {
 display: block;
 width:70%;
 height:auto;
 margin:0 auto;
 padding: 1.5rem 0 0.5rem 0;
}

nav {
 display: inline-block;
 text-align: left;
}

section#mainContent {
 position: relative;
 float:left;
 box-sizing: border-box;
 margin: 5% 5% 3% 5%;
 padding:1em 2em;
 width:60%; height: auto;
 background: rgba(0,0,0, 0.65);
 border:1px solid #333;
 border-radius: 1em;
}
section#mainPortf {
 position: absolute;
 box-sizing: border-box;
 top:1rem; bottom:1rem;
 left:1rem; right:1rem;
 padding:1em 2em;
 background: rgba(0,0,0, 0.85);
 border:1px solid #333;
 border-radius: 1em;
}
div.pfHead {
 position: relative;
 display: inline-block;
 width:100%; height: 4rem;
}
a.pfLink {
 position: absolute;
 right:0;width:auto;
 height: 100%;
}
a.pfLink>img {
 display: block;
 width: auto;
 height:100%;
}
div.pfHead>h2 {
 display: inline-block;
 vertical-align: middle;
 padding:0;
}
div.pfHead>h2>a {
 color:#ccc; text-decoration:none; outline:none;
}

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

li.socialBox { text-align: center; }
a.socialIcon { font-size: 1.1em; margin-right:0.2em; }
a.socialIcon:link, a.socialIcon:visited { color:#ccc; text-decoration:none; }
a.socialIcon:hover, a.socialIcon:active { color:#fff; text-decoration:none; }


/* ====================  PORTFOLIO PAGE  ==================== */

ul#contentPF {
 position:absolute;
 top:6rem;  bottom:1rem;
 left:2rem; right:2rem;
 text-align:center;
 overflow:auto;
 margin:0; padding:0;
 white-space: nowrap;
 line-height: 0;
 -webkit-overflow-scrolling:touch;
 overflow-y: hidden;
}

li.objWrap {
 display:inline;
 position:relative;
 height:100%;
 width:auto !important;
}

li.objWrap img {
 height:100%; /* Old browsers */
 width:auto !important;
 -webkit-touch-callout:none;
 -webkit-user-select:none;
 -khtml-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
}

.objCellInit { margin:0; }
.objCell     { margin-left:0.5rem; }
.objCell0    { margin-left:0.5rem; }

.infoBox {
 position:absolute;
 left:0; width:100%;
 bottom:0; height:auto;
}
.infoBox p { /* aparte <p> ivm safari white-space bug */
 white-space:normal;
 padding:0.5em 1em;
 margin:0;
 line-height:1.25em;
 min-height:1.25em;
 background: rgba(0,0,0, 0.85);
 color:#ccc;
}

/* ====================  NAVIGATION (LARGE)  ==================== */

ul#mainNav {
 margin:0; padding:0 2rem 1rem 2rem;
 list-style-type:none;
 color: #999;
 z-index: 1;
}
ul#mainNav>li {
 margin:0.25em 0;
 padding: 0;
}
/*Style for menu links*/
ul#mainNav>li>a {
 text-decoration: none;
 color: #999;
}
ul#mainNav>li>a:hover, ul#mainNav>li>a.actNav {
 color:#fff;
}
ul#mainNav>li>a:hover + ul.subNav, ul.subNav:hover { /*Display dropdown on hover*/
 display: block;
}

/*  ======== SUBMENU DROPDOWN  ======== */
ul.subNav {
 position: absolute;
 left:40%;
 margin:-0.5em 0 0 0; padding:0;
 list-style-type:none;
 background: rgba(0,0,0, 0.9);
 border:1px solid #333;
 border-radius: 0.5em;
 display: none; /* Hide until needed */
 z-index: 10;
}
ul.subNav>li {
 display: block;
 margin:0; padding:0;
 float: none;
}
ul.subNav>li>a {
 padding: 0 0.5em;
 color: #999;
 text-decoration: none;
}
ul.subNav>li:hover, ul.subNav>li>a:hover {
 color:#fff;
}

/* ====================  NAVIGATION (SMALL)  ==================== */

.smallNavBar {
 position: absolute;
 top:1.5em; right: 1.5em;
 cursor: pointer;
 display: none; /* Hide until needed */
}
input#smallNavButton[type=checkbox] { /*Hide checkbox*/
 display: none;
 color: #ccc;
}
input#smallNavButton[type=checkbox]:checked ~ ul#mainNav { /*Show menu when invisible checkbox is checked*/
 display: block;
}

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

form.contactform>fieldset {
 font-size: 1.5em;
 box-sizing: border-box;
 border: 1px solid #ccc;
 border-radius: 0.5rem;
 padding:1rem 2rem 2rem 2rem;
 margin:1rem auto;
 width:100%; max-width: 600px;
 text-align: center;
}
form.contactform>fieldset>label {
 display: block;
 text-align: left;
 font-size: 1rem;
 margin-top:0.5rem;
}
form.contactform>fieldset>input, form.contactform>fieldset>textarea {
 display: block;
 font-weight: normal;
 font-size: 1rem;
 width:100%;
}
form.contactform>fieldset>textarea { margin-top:2rem; margin-bottom: 2rem; }
form.contactform button.formbutton {
 font-weight: bold;
 font-size: 1.0rem;
 padding: 0.33rem 2rem;
 margin:0 auto;
 border:1px solid #555;
 border-radius:0.5rem;
 background-color: #ddd;
}
form.contactform button.formbutton:hover { background-color: #fff; }


/* ======================  MEDIA QUERIES  ====================== */

@media screen and (max-width : 649px) { /* Same as other query ! */

 header, section#mainContent {
  position: relative;
  float:none;
  text-align: left;
  margin:0;
  width:100%;
  border: none;
  border-radius: 0;
 }
 header { padding:0; border-bottom: 1px solid #333; }
 header>h1>a>img { width:33%; height:auto; margin:0; padding:0.75rem 0 0 1rem; border:none; border-radius:0; }

 section#mainContent { padding:1rem 2rem; }
 section#mainPortf { top:0; bottom:0; left:0; right:0; padding:0.5em 1em; }
 ul#contentPF { top:4.5rem; left:0; right:0; }
 div.pfHead { height: 3rem; }
 div.pfHead>h2 { font-size:1.1rem; max-width:60%; }

 .smallNavBar { display:block; color:#999; } /* Hamburger */
 .smallNavBar:hover { color:#fff; }

 ul#mainNav { display: none; width:auto; }
 ul#mainNav li { width:auto; }

 ul.subNav { left:15%; }
 ul.subNav>li { border: none; }


 ul#mainNav li.socialBox { border:none; }

}


/* =============================================  HELPER CLASSES  ======================================================= */

/* Hide visually and from screen readers */
.hidden,
[hidden] { display: none !important; }

/* Hide visually and from screen readers, but maintain layout */
.invisible { visibility: hidden; }

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix::before,
.clearfix::after { content: " "; display: table; }
.clearfix::after { clear: both; }

/* ======================  PRINT STYLES  ====================== */
@media print {
  *,
  *::before, *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    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) ")"; }

  /* Don't show links that are fragment identifiers, or use the `javascript:` pseudo protocol */
  a[href^="#"]::after,
  a[href^="javascript:"]::after { content: ""; }

  pre { white-space: pre-wrap !important; }
  pre, blockquote { 
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /* Printing Tables */
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}