@import url('https://fonts.googleapis.com/css?family=Manjari:100,400,700|Oleo+Script+Swash+Caps:400,700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
} 

html { height: 100%; }

body {
  font: normal 400 14px 'manjari', sans-serif;
  line-height: 1.35em;
  letter-spacing: 0.02em;
  color: #555;
  background: #fbfbfb;
  cursor: default;
  height: 100%;
}

h1 { font: normal 400 2.8em 'Oleo Script Swash Caps', cursive; color: #333; }
h2 { font: normal 400 1.5em 'Oleo Script Swash Caps', cursive; color: black; }
h3 { color: #c5c5c5; margin-bottom: 10px; }
p  { font-weight: 400; margin-bottom: 15px;}

p span { font-size: 1.4em; color: #92a900; }

a           { color: #bcce4d; }
a:hover     { color: #c5c5c5; }
a.fotoSmall { max-width: 150px; margin-bottom: 8px; }

a.active { color: #c5c5c5; text-decoration: none;}

.head .far.fa-arrow-alt-circle-left:hover {color: #c5c5c5; }
.fa { color: #92a900; }

/*=============================NAVIGATIER=============================*/

.kader { 
  border: thin solid #666; 
  border-radius: 3px; 
  box-shadow: 0px 4px 6px #c5c5c5; 
}

.space {margin-bottom: 45px; }

.navigatie {
  width: 100px;
  height: 100%;
  box-shadow: 5px 0 5px -5px #333;  
  border-right: thin solid #92a900;
  background: #bcce4d;
  position: fixed;
  left: 0; /* voor chrome */
  top: 0;  /* voor chrome */
  z-index: 10;
}

.navigatie>ul {
	background: #bcce4d;
	padding-top: 160px;
	padding-bottom: calc(100vh - 440px);
}

.navigatie ul li {
  height: 70px;
}

.navigatie ul li a {
  height: 70px;
  color: black;
  text-decoration: none;
  padding: 28px 0 0 10px;
  display: block;
  position: relative; /* voor submenu */
}

.navigatie ul li a:hover {
  color: white;
  background: black;
  box-shadow: 5px 0 5px -5px #333;
  transition: all 600ms ease-in; /* mooi vloeiend */
}

.wrapper .navigatie ul li a:hover.current { color: white; }

.navigatie ul li a.current, .current , .navigatie ul li a:hover.current {
  color: #bcce4d;
  background: black;
}

ul.submenu {
  width: 100px;
  height: 100%;
  background: #c5c5c5;
  border-left: thin solid #92a900;
  border-right: thin solid #888;
  box-shadow: 5px 0 5px -5px #333;
  transition: left 200ms ease-in-out;
  position: absolute;
  top: 0;
  left: -98px;
  z-index: -10;
}

.dropdown:hover .submenu {
  left: 99px;
  transition: left 900ms ease-in 0s;
}

.dropdown ul.submenu { padding-top: 84px; }  /* 125px schuift menu naar beneden */

.dropdown:nth-last-of-type(2) ul.submenu {   /* 2e submenu breder */
  padding-top: 273px;
  min-width: 165px;
}

.dropdown ul.submenu li {
  height: 40px;
}

.dropdown ul.submenu li a {
  /*color: black;*/ /* uitgezet submenu active txt anders niet zichtbaar */
  height: 40px;
  padding: 15px 0 0 10px;
}

.dropdown ul.submenu li a:hover {
  height: 40px;
  color: #bcce4d;
  box-shadow: 5px 0 5px -5px #333;
}
/*===========================END NAVIGATIER===========================*/

.wrapper { 
  width: 1000px;
  min-height: 100vh;
}

.main { 
  width: 1000px;
  margin-left: 250px;
  min-height: 100vh; 
}

section {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  min-height: 100vh;
  }

.head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: 'Oleo Script Swash Caps', cursive;
  width: 1251px;
  height: 200px;
  border-bottom: thin solid black;
  animation: fadeIn 2s ease-in;
}

.head h1  { margin-left: 250px; }

.head img { 
  width: 300px; 
  margin-right: 30px;
  padding-bottom: 45px;
}

.head .far.fa-arrow-alt-circle-left {
  font-size: .6em;
  font-weight: 400;
  color: #bcce4d;
  padding-left: 10px;
}

.leftSide {
  width: 500px;
  padding: 20px 25px 25px 25px;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
}

.leftSideTop {
  display: flex;
  flex-flow: column nowrap;
  align-self: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  margin-bottom: 20px;
  min-height: 71px;
}

.leftSideTop h2:nth-of-type(3) { margin-top: 5px; }

.leftSideTop .socialmedia ul li {
  display: inline-flex;
  font-size: 1.1em;
  color: #ececec; /* uitgeschakelde iconen */
}

.leftSideTop .socialmedia ul li a {
  color: #bcce4d;
  padding: 5px 1px 5px 1px;
}

.leftSideTop .socialmedia ul li a:hover { color: #ccc; }

.leftSideTop h2 { 
  font-family: 'Manjari', sans-serif;
  font-size: 1em; 
  padding-top: 3px;
}

.leftSideTop span {
  color: #666;
  font-size: .9em;
}

.leftSideTop img { 
  width: 150px;
  border-radius: 50%;
}

img.noRadius { display:block;  border-radius: 0; }

.leftSideBottom {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around; /*voor project pagina overzicht*/
  align-content: flex-start;
  width: 100%;
}

.rightSide {
  width: 500px;
  padding: 100px 70px 25px 25px;
  border-left: thin solid gray;
}

.rightSide h2 { padding-bottom: 3px; }
.rightSide .otherProjects li { font-size: .95em; }

.otherProjects { margin-top: 50px; color: #555;}
.otherProjects ul li .fas.fa-external-link-alt { font-size: 0.65em; vertical-align: middle; } /*new window*/

section .rightSide h3 {
    margin-bottom: -15px;
    font-style: italic;
    color: #555;
}
/*--------------------HOME PAGINA STUDENTEN-------------------*/
.studentFotoRond {
  width: 75px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 0 25px 25px;
  filter: grayscale(1);
  transition: all 600ms ease;
}

.studentFotoRond:hover {
  filter: grayscale(0);
  transform: scale(1.4);
  cursor: pointer;
}

.test { 
  width: 350px; 
  justify-content: flex-end;
}

.logoHome { 
  width: 50%;
  margin-bottom: 30px;
}

.logoHome:last-child { 
  width: 20%; 
  margin-top: 20px;
}

/*-------------- STUDENTEN OVERZICHT PAGINA ----------------*/
.studentFotoRondProfiel {
  flex: 0 0 75px;
  object-fit: cover;
  transition: all 600ms ease-in;
}

.studentFotoRondProfiel:hover {
  filter: grayscale(1);
  transform: scale(1.05);
  border-radius: 3px;
}
/*--------------------PROJECT OVERZICHT PAGINA------------------*/
.studentGallery h4 { font-size: 2.7em;}
.studentGallery h4 span { font-size: 0.35em; color: #dbdbdb; }

.studentGallery h4, .studentGallery h4 span {
  text-align: right; 
  padding: 20px 5px 0 0;
}

a .studentGallery h4 {
  color: #555;
  text-decoration: none; }

/*--------------------STUDENTEN PAGINA FOTOS------------------*/
.studentGallery {
  width: 140px; /* flex: 0 0 140px; */
  height: 140px;
  margin-right: 3px;
  margin-bottom: 13px;
  position: relative;
}

.studentGallery:nth-of-type(3n+0) {margin-right: 0px;}

.studentFoto { width: 100%; object-fit: cover; }

.overlay { 
  width: 100%;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
  background: rgb(188, 206, 77, 0.8);
  overflow: hidden;
  transition: all 0.4s ease-in;
}


.nameStudentFoto {
  font-family: 'Oleo Script Swash Caps', cursive;
  font-size: 2em;
  color: black;
  position: absolute;
  top: 110px;
  left: 5px;
  transform: translate(0, 3px);
  text-align: center;
  }

.studentGallery:hover .overlay {
  bottom: 0;
  height: 140px;
}

  /* voor project.html */
.overlay2 { 
  width: 100%;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
  background: rgb(188, 206, 77, 0.8);
  overflow: hidden;
  transition: all 0.4s ease-in;
}
  /* voor project.html */
.nameStudentFoto2 {
  font-size: .95em;
  line-height: 1.7;
  color: black;
  position: absolute;
  top: 51px;
  right: 5px;
  transform: translate(0, -50px);
  text-align: right;
  }

  /* voor project.html */
.studentGallery:hover .overlay2 {
  top: 45px;
  height: 67px;
}

/*---------------------CONCEPTBOEK FOTOS----------------------*/
.projectExtra {
  flex: 0 0 100px; /*--test voor he2 een mm2 pagina--*/
}

.projectGallery {
  flex: 0 0 200px; /*--zo laten ivm subtext omschrijving--*/
}

.projectItem {
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}

.conceptboeken {
  display: block;
  width: 100%;
  object-fit: contain; /* of COVER */
 /* border: thin solid #555; DEZE MOET AAN IVM IMAGE DIE GROTER WORD*/
  /*border-radius: 3px; */
}

.projectItem .conceptboeken {
 transition: all 1s ease-in; /* voor mooi terug zoom effect*/
}

.overlayConceptboek {
  width: 100%;
  height: 70px;
  text-align: center;
  background: rgba(0, 0, 0, 1); /*zwart*/
  position: absolute;
  bottom: 40%;
  transition: all 1s ease-in;
  opacity: 0;
}

.projectItem:hover .conceptboeken {
  transform: scale(2);
  filter: grayscale(100%);
  transition: all 1s ease-in;
}

.projectItem:hover .overlayConceptboek {
  height: 30px;
  opacity: 1;
  /* transition: all 1s ease-in; /* zwarte balk langzamer kleiner worden */
}

.nameConceptboek {
  font-family:'Oleo Script Swash Caps', cursive;
  font-size: 1.5em;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/*---------------TRANSFORM FOTO - GROWS OUTSIDE THE BOX_---------------*/
.transform       { margin-bottom: 65px; }   /* he2 en mm2 juliko, nina en sanna */
.transformSmall  { margin-bottom: 75px; }   /* daisy, juliko, manuela, nina */
.transformMedium { margin-bottom: 105px; }  /* sanna */
.transformLarge  { margin-bottom: 140px; }  /* timothy */
.transformLarge2 { margin-bottom: 170px; }  /* manuela dreamweaver */
.transformBig    { margin-bottom: 220px; }  /* frederique, jesse, pavine, alle covers */
.transformBig2   { margin-bottom: 245px; }  /* daisy dreamweaver */
.transformXl     { margin-bottom: 270px; }   /* mm2 sanna */

.fotoTransformGallery {
  width: 200px;
  padding-top: 100px;
  position: relative;
}

.fotoTransform {
  width: 200px;
  margin-bottom: 50px;
  position: absolute;
  top: 0;
  right: 0;
  transition: width 2s ease-in,height 3s ease-in,z-index 3s ease-in;
  z-index:1;
}

.fotoTransform h3 { /*zodat vergroting mooi over onderliggende text komt*/
  background: #fbfbfb;
  padding: 3px 0 10px 5px;
} 

.fotoTransform:hover .conceptboeken {
  transition: all 3s ease-in;
}

div.fotoTransformGallery:nth-child(1) div:nth-child(1),
div.fotoTransformGallery:nth-child(3) div:nth-child(1),
div.fotoTransformGallery:nth-child(5) div:nth-child(1) {
  position: absolute;
  top: 0;
  left: 0;
/* transition: width 2s ease-in,height 3s ease-in; */
}


.fotoTransform:hover {
  width: 425px; /*hoe groot het plaatje vergroot*/
  height: 100%;
  transition: width 2s ease-in,height 3s ease-in;
  z-index: 2;
}

/*-------------------FLOAT ONDERDELEN-------------------------*/
.wrapperFloat { 
  height: 100%;
  min-height: 100vh;
}

.mainFloat {
  width: 1000px; 
  margin-left: 251px; 
  min-height: 100vh;
}

#leftRightFloat { width: 1000px; }

.headFloat {
  font-family: 'Oleo Script Swash Caps', cursive;
  width: 1251px;
  height: 200px;
  padding-top: 48px;
  border-bottom: thin solid black;
  animation: fadeIn 2s ease-in;
}

.headFloat h1 { 
  float: left; 
  margin-top: 97px;
  padding-left: 250px;
}

.headFloat img { 
  float: left; 
  width: 301px; 
  margin-left: 378px;
  margin-top: 7px;
}

.headFloat, #leftRightFloat {
  content: "";
  display: table;
  clear: both;
}

.leftSideFloat {
  float: left;
  width: 497px;
  padding: 20px 25px 25px 25px;
}

.leftSideTopFloat {
  margin-bottom: 20px;
  min-height: 71px;
}

.leftSideTopFloat h3 {
  font-style: italic;
  color: #555;
}

.rightSideFloat {
  float: right;
  width: 501px;
  min-height: 100vh;
  border-left: thin solid gray;
  padding: 100px 68px 25px 25px;
}

.studentFotoRondFloat {
  width: 75px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 0 25px 25px;
  filter: grayscale(1);
  transition: all 600ms ease;
}

.studentFotoRondFloat:hover {
  filter: grayscale(0);
  transform: scale(1.4);
  cursor: pointer;
}
/*------------------END FLOAT ONDERDELEN-----------------------*/

.copyRight {
  width: 100px;
  font-size:.7em;
  color: #819500;
  text-align: left;
  z-index: 99;
  text-decoration: none;
  position: fixed;
  bottom: 21px;
  left: 0px;
  padding: 3px;
  opacity: .7;
}

.copyRight span {
    font-size: 1.8em;
    font-weight: 100;
}

a.copyRight:hover { color: #bcce4d; 
  background: black; 
  cursor: default; 
  opacity: 1;
}

/*-------------------CONTACT FORMULIER-------------------------*/
#contactFormulier { width: 424px; float: right;}

#naam, #achternaam, #straatnaam, 
#telefoon, #emailAdres { width: 330px;  }

/*--text invoer veld--*/
div input { 
  font-family: manjari, sans-serif;
  font-weight: 100;
  color: #555; 
  vertical-align: middle;
  border: thin solid #aaa;
  border-radius: 3px;
  padding: 7px 5px 3px 5px;
  box-shadow: 2px 2px 4px #c5c5c5;
}

div label {
  color: #333;
  width: 89px;
  display: inline-block;
}

input[type=radio] {
  vertical-align: middle;
}

/* inputveld word donkerder na click voor invoeren */
input[type=text]:focus, input[type=tel]:focus,
input[type=email]:focus, #typeBerichtVenster:focus  {
  color: #658b00;
  background: #f9f9f9;
  border: thin solid #aaa;
  border-radius: 3px;
}

.titel {
  width: 300px;
  color: #333;
  overflow: hidden;
}

.titel label, .titelMan { width: 98px; float: left; }
.titelVrouw             { width: 100px; float: right; }

#extraInfo    { width: 280px; margin-left: 1px;}
.extraInfoTxt { width: 300px; }

/* straatnaam, huisnummer en toevoeging */
.adresGegevens                    { width: 423px; }
.adresGegevens .huisnr-toev       { width: auto; float: right; }
.adresGegevens .huisnr-toev label { width: 80px; }

/* ruimte tussen formulier onderdelen */
.straatnaam, .telefoon, .extraInfo, .typeBericht { margin-top: 20px; }

/* ruimte tussen invoer odnerdelen */
.straatnaam, .adresGegevens, .titel, .naam, .achternaam, 
.telefoon, .emailAdres, .extraInfo { padding: 5px 0; }

.adresGegevens .huisnr {
  width: 225px;
  float: left;
}

/* clear floats na de div */
.adresGegevens, .verzenden {
  content: "";
  display: table;
  clear: both;
} 

#typeBerichtVenster { 
  font: normal 100 1em 'manjari', sans-serif; 
  color: #333;
  width: 422px; 
  padding: 8px;
  border: thin solid #aaa;
  border-radius: 3px;
  box-shadow: 2px 2px 4px #c5c5c5;
}

#huisnr      { width: 82px; }
#huisnr-toev { width: 82px; }

/* verzenden en wissen buttons */
.wisBtn, .verzendBtn { 
  font-weight: 400;
  color: grey;
  letter-spacing: 0.025em;
  background: #bcce4d;
  height: 28px;
  padding: 7px 8px;
  margin-top: 10px;
  float: right;
 }

.wisBtn:hover, .verzendBtn:hover {
  color: #bcce4d;
  background: black;
  cursor: pointer;
}

.verzenden  { width: 423px; height: 45px;}
.verzendBtn { margin-right: 10px; }
.wisBtn     { margin-right: 3px; }



/*------------------404-----------------------*/
.errorLeft {
  width: 300px;
  height: 184px;
  margin-top: 150px;
  display: flex;
  justify-content: flex-end;
}

.errorRight {
  width: 300px;
  height: 320px;
  padding-left: 20px;
  margin-top: 150px;
}

.errorRight h1 {
  font-size: 6em;
  font-weight: 700;
}

.errorRight h1, .errorRight h2 {
  font-family: 'manjari', sans-serif;
  width: 230px;
}

.errorRight h2 span {
  color: #bcce4d;
  display: block;
  padding: 20px 0 20px 0;  
}

.errorNav ul li a:hover {
  color: #bcce4d;
}

.errorNav ul li a {
  color: #333;
  text-decoration: none;
}

.kopje {
  color: #888;
  font-size: 1.35em;
  font-weight: 100;
  padding-bottom: 3px;
}

.errorLeft .fas.fa-bug {
  font-size: 13em;
  color: #bcce4d;
  width: 185px;
  text-align: right;
}

.fas.fa-bug:hover {
color: #333;
}


/*------------------Animation Keyframes-----------------------*/
.fade-in {
  animation: fadeIn 2s ease-in ;
  -webkit-animation: fadeIn 2s ease-in ;
} 

@keyframes fadeIn {
  0% { opacity: 0; }
  100% {  opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% {  opacity: 1; }
}


.rightSide, .rightSideFloat {animation: fadeInTop 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}

@-webkit-keyframes fadeInTop {
  0% {
    -webkit-transform: translateX(-9px);
            transform: translateX(-9px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

.leftSide, .leftSideFloat {animation: fadeInTop2 3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}

@-webkit-keyframes fadeInTop2 {
  0% {
    -webkit-transform: translateX(7px);
            transform: translateX(7px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

/*
@keyframes fadeInTop {
  0% {
    -webkit-transform: translateX(-90px);
            transform: translateX(-90px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}*/

.borderLeft { border-left: 1px solid black; width: 500px; height: 100vh; }
.border-bottom { border-bottom: 1px solid black; width: 1251px; height: 200px; }