/* ========= Webdesign CSS and HTML by Mirella Kersten 2016 ========= */

/* Optimised for >IE10; pages do work in IE8/9 (tested in VirtualBox) in mobile style 
(because <IE10 no support for media queries), but are not optimised in formatting. 
Microsoft dropped support for <IE10 since 12 januari 2016. 
Tested in Windows 7 on IE11 and in Windows 10 on Edge, both in VirtualBox.
Tested in OS 10 on Chrome 51, Safari 9.1, Firefox 46 and Opera 37. 
Tested in Android on Chrome.
Also tested with disabling JavaScript. 
*/

/* ================= CSS Reset ================= */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ================= GENERAL TAGS ================= */
/* ============ SMALL(header centered, nav stacked, 1 column) ============ */

/* Note: areas with text are sized in rem, areas without text in px (for the sake
of picture content that should not exceed a certain size */

html {
  height: 100%;
  -webkit-box-sizing: border-box; /* vendor prefix for box-style gebruik */
  -moz-box-sizing: border-box; /* vendor prefix for box-style gebruik */
  box-sizing: border-box; /* for box-style gebruik */
}

*, *:before, *:after { /* vendor prefix for box-style gebruik */
  -webkit-box-sizing: inherit; /* vendor prefix for box-style gebruik */
  -moz-box-sizing: inherit; /* vendor prefix for box-style gebruik */
  box-sizing: inherit; /* for box-style gebruik */
}

body {
  width: 100%;
  min-height: 100vh; /* for flexbox to fill vertically on small width long height screens */
  font-family: 'Raleway', Arial, sans-serif;
  font-weight: 400; font-weight: normal;
  /* rem > respect by user/browser predefined size > not supported in IE8 */
  /* browsers do often not take body font sizes into account in media queries(it uses 
  the browser settings, i.o.w. rem) which can result in layout breaks */
  color: #808080;
  text-align: center; /* for older browsers */
  background-color: #F0F0F0; /* at the sides of big screens and below the text */
  /* flexbox + prefixes to fill up vertical space on small width long height screens */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-box-direction: normal;
  -webkit-box-direction: normal;
  -moz-flex-direction: column; 
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* fallbacks for font-height in px for <IE11 */
h1 { font-size: 36px; font-size: 2.25rem;} 
h2 { font-size: 30px; font-size: 1.875rem;}
h3 { font-size: 24px; font-size: 1.5rem;}
h4 { font-size: 16px; font-size: 1.0rem;}
h5 { font-size: 14px; font-size: 0.875rem;}
h6 { font-size: 12px; font-size: 0.75rem;}

header{
  text-align: center;
}

header a{
  text-decoration: none; /* removes the underlining from the logotext to homepage */
}

.widthwrap{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

#logopicture{
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 0 0 0;
  /* to delete the blue link border: */
  border: 0;
}

#logotext{
  margin: 10px 0 40px 5px; /* margin right is for visual tweaking */
  color: #808080;
}

.widthwrap a{
  text-decoration: none; /* removes underlining from the logotext to homepage in IE */
}

nav{
	width: 100%;
	overflow: visible;
}

.hamburger{
  display: block;
  margin-top: 20px;
  margin-bottom: 0;
}

/* for IE8 hamburgerlines to center */
nav img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#lastline{ /* This is the second hamburgerline, under menu */
  display: block;
  margin-top: 20px;
  margin-bottom: 40px;
  overflow: visible;
}

nav ul{
  display: none;
  text-align: center;
  padding-top: 16px; padding-top: 1rem; 
  padding-bottom: 16px; padding-bottom: 1rem; 
}

nav ul li{
  display: block;
} 

nav ul li a{
  display: block;
  text-align: center;
  line-height: 32px; line-height: 2rem;
  /* line-height -> centers text vertically + whole height will be clickable */ 
  text-decoration: none; /* removes the underlining from the links */
  font-size: 20px; font-size:1.25rem;
  color: #808080;
}

nav ul li a:hover{ 
  color: #303030;
}

.active_page{
  color: #303030;
}

#bannerarea{
  /* above and on sides of photo */
  background-color: #303030 ;
  padding: 20px; 
  overflow: hidden;
}

.rslides{
  position: relative;
  list-style: none;
  overflow: visible;
}

.rslides li {
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}

.rslides li:first-child{
  position: relative;
  display: block;
}

.rslides img{
  display: block;
  width: 100%;
  max-width: 1920px;
  border: 1px solid #606060;
  /* for IE8 to center the images */
  margin-left: auto;
  margin-right: auto;
  /* box-shadow: offset-x offset-y blur-radius spread-radius color */
  -moz-box-shadow: 0 0 10px 5px black;
  -webkit-box-shadow: 0 0 10px 5px black;
  box-shadow: 0 0 10px 5px black;
}

#singleimg{
  position: relative;
  overflow: hidden;
  border: 1px solid #606060;
  /* box-shadow: offset-x offset-y blur-radius spread-radius color */
  -moz-box-shadow: 0 0 10px 5px black;
  -webkit-box-shadow: 0 0 10px 5px black;
  box-shadow: 0 0 10px 5px black;
}

.columnarea{
  /* wrapper to fill background color over full width and heigth */
  width: 100%;
  background-color: #303030;
  display: block;
  /* center the images and thumbboxes in the middle on 3 colomn and 4 column screens */
  text-align: center;
  overflow: hidden; /* to get rid of scroll bar on screens <405px */
}

.reis_subtitles{
  padding: 40px 20px 0 20px; /* sides same as padding bannerarea img */
  width: 100%;
  display: block;
  line-height: 100%;
  font-family: 'Josefin Slab', serif;
  font-style: italic;
  font-weight: 900;
  color: #909090;
  text-align: center;
}

.columns{
  display: block;
  max-width: 87.5vw; /* creates 6,25% of view width sidepaddings on screens <405px */
  width: 405px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  overflow: visible;
  /* together with margin column creates 50 on top and bottom */
}

.thumbbox{
  display: inline-block;
  height: auto;
  max-width: 100%;
  width: 405px; /* set fixed width; for layout reasons on mobile */
  /* border-box needs height; dealing only with portrait > +max needed */
  max-height: 405px;
  margin: 0 50px 50px 0;
  text-align: center;
  /* relative makes it appear behind the .column images */
  position: relative;
  /* use boxshadow instead of border here, because border pushes away .column */
  box-shadow: 0 0 0 1px #202020 inset;
  -moz-box-shadow: 0 0 0 1px #202020 inset;
  -webkit-box-shadow: 0 0 0 1px #202020 inset;
  background-color: #282828;
  overflow: visible;
}

.column{
  border: 1px solid #606060;
  /* border-box needs width and height; dealing landscape and portrait > +max needed */
  max-width: 100%; /* creates padding on sides on screens smaller than 405px */
  max-height: auto;
  /* box-shadow: offset-x offset-y blur-radius spread-radius color */
  -moz-box-shadow: 0 0 10px 5px black;
  -webkit-box-shadow: 0 0 10px 5px black;
  box-shadow: 0 0 10px 5px black;
  overflow: visible;
}

/* if a column image is clicked on a full screen version will pop up */
#imagelightbox{
  position: fixed;
  z-index: 2; 
  -ms-touch-action: none;
}

#maintext{
  /* this is for a flexbox to fill up the vertical space, so footer is at bottom */
  /* the second and third values are for IE10 and IE11 to work */
  -webkit-box-flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  -moz-box-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  padding: 40px 20px 40px 20px; /* sides same as padding bannerarea img */
  line-height: 180%;
  background-color: #F0F0F0;
  color: #606060;
  text-align: center;
}

.otherlinks{
  color: #808080;
  text-decoration: none;  
}

#contactform{
  /* this is for a flexbox to fill up the vertical space, so footer is at bottom */
  /* the second and third values are for IE10 and IE11 to work */
  -webkit-box-flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  -moz-box-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  padding: 0 20px 40px 20px; /* sides same as padding bannerarea img */
  line-height: 180%;
  background-color: #F0F0F0;
  color: #606060;
  text-align: center;
}

.normal_field{
  width: 100%;
  max-width: 405px;
}

.big_field{
  width: 100%;
  text-align: left;
  max-width: 405px;
  height: 405px;
}

.errortext {
  color: #990000;
  font-style: italic;
}

#send {
  font-style: italic;
}

/* tegen spam */
#last_field {
  display: none;
}

footer{
  display: block; /* for IE8 to get markup */
  margin-bottom: 0; /* only bottom is not sufficient, this moves the element only */
  height: 96px; height: 6rem; 
  color: #606060;
  text-align: center;
  padding-top: 24px; padding-top: 1.5rem;
  line-height: 16px; line-height: 1rem;
  width: 100%;
  border-top: 1px solid #F8F8F8;
  background-color: #E0E0E0;
}

/* ===================================================================================== 
BIGGER MEDIA QUERIES 
====================================================================================== */
/* Ideology: design / content should guide where to make breaks */
/* Use 'major' and 'minor' breaks if necessary */
/* Choice for 'Mobile First & Progressive Enhancement' -> focus on essence */
/* Media queries are not supported in IE8 > mobile is seen on desktop > drop support */
/* Choice for pixel sized media queries see benfrain.com */


/* ================= MEDIUM (header centered, nav wide, 2 columns) ================= */
@media only screen and (min-width: 960px){

  header{
    height: 184px; height: 11.5rem;
  }
  
  #logotext{
    margin: 10px 0 -10px 0;
  }
  
  nav{
    height: 80px; height: 5rem;
  }
  
  /* Hide the hamburger icon */
  .hamburger{
    display: none;
  }
  
    /* Hide the hamburger icon */
  #lastline{
    display: none;
  }
  
  /* to override the jQuery for the hiding menu on mobile screens only */
  nav ul{
    display: block !important;
    padding-top: 40px; padding-top: 2.5rem; 
  }

  nav ul li{
    display: inline; 
  }

  nav ul li a{
    display: inline;
    padding: 0 8px 0 8px; padding: 0 0.5rem 0 0.5rem;
  }
  
  #bannerarea{
    padding: 50px;
  }
  
  .rslides img{
    /* box-shadow: offset-x offset-y blur-radius spread-radius color */
    -moz-box-shadow: 0 0 40px 10px black;
    -webkit-box-shadow: 0 0 40px 10px black;
    box-shadow: 0 0 20px 7px black;
  }
  
  #singleimg{
    /* box-shadow: offset-x offset-y blur-radius spread-radius color */
    -moz-box-shadow: 0 0 40px 10px black;
    -webkit-box-shadow: 0 0 40px 10px black;
    box-shadow: 0 0 20px 7px black;
  }

  .columns{
    width: 960px;
    max-width: 100%; /* undo max-width of standard format (mobile) */
  }
  
  .thumbbox{
    height: 405px;
    margin: 0 25px 50px 25px;
  }

  .column{
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
  }
  
  #maintext{
    padding: 40px 50px 40px 50px; /* sides same as padding bannerarea */
  }
}
  
/* ================= MEDIUM 2 (header left, nav right wide, 3 columns) ================= */
@media only screen and (min-width: 1415px){

  header{
    text-align: left;
  }
  
  .widthwrap{
    /* width = 1415-2*50px padding */
    width: 1315px;
  } 
  
  #logopicture{
    margin: 0 0 0 40px;
  }
  
  /* Aligning to the right reverses the elements. If you want the menu aligned to the right, 
  then you need to make ul element align to the right but the li elements inside, must 
  be aligned left. */

  nav ul{
    text-align: right;
  }

  nav ul li{
    text-align: left; 
  }

  nav ul li a{
    /* padding only left for aligning nav on right side */
    padding: 0 0 0 32px; padding: 0 0 0 2rem;
  }
  
  #bannerarea{
    padding-left: 0; /* width set fixed by .rslides and widthwrap */
    padding-right: 0;
  }
  
  #maintext{
    padding: 50px 0px 50px 0px; /* sides already set by widthwrap */
  }
  
  .columns{
    /* width is 3x405px column +(50*2) column margin between +(2*50) sides = 1415 */
    width: 1415px;
  }
}

/* ========= BIG (header left, nav right wide, 4 columns, max photo size) ========= */
/* on moment of writing this CSS (july 2016) biggest size computerscreen available is
the 27-inch iMac with Retina with the size of 5120px x 2880px */

@media only screen and (min-width: 2120px){ 
  
  .widthwrap{
    /* width inside bannerarea = 2120-2*100 padding */
    width: 1920px;
  }
  
  #logopicture{
    margin: 0 0 0 40px; 
  }
  
  nav ul li a{
    /* padding only left for aligning nav on right side */
    padding: 0 0 0 64px; padding: 0 0 0 4rem;
  }

  /* area for photo becomes bigger; padding around and a border and boxshadow are added
  to the image */ 

  #bannerarea{
    padding-top: 100px; /* width set fixed by .rslides and widthwrap */
    padding-bottom: 100px;
  }
  
  .rslides img{
    /* box-shadow: offset-x offset-y blur-radius spread-radius color */
    -moz-box-shadow: 0 0 40px 10px black;
    -webkit-box-shadow: 0 0 40px 10px black;
    box-shadow: 0 0 40px 10px black;
  }
  
  #singleimg{
    /* box-shadow: offset-x offset-y blur-radius spread-radius color */
    -moz-box-shadow: 0 0 40px 10px black;
    -webkit-box-shadow: 0 0 40px 10px black;
    box-shadow: 0 0 40px 10px black;
  }
    
  .columns{
    /* column size is based on 1920/(4columns+3paddings)= 405px + paddings 100px */
    /* width is 4x405px column +(100*3) column margin between +(2*50) sides = 2020 */
    width: 2020px;
    /* together with margin column creates 100 on top and bottom */
    padding-top: 100px;
  }
  
  .thumbbox{
    margin: 0 50px 100px 50px;
  }
  
}