/* navigatie
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.topnav {
    background-color: #47669e;
    padding: 1rem 2rem;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1;
    text-align: center;
}

#nav {
  margin: 13px 0 0 0;
}

#nav ul li {
  display: inline;
  margin: 0 20px 0 0;
  margin-bottom: 130px;
}

#nav a {
  text-decoration: none;
  color: #f2f2f2;
}

#nav a:hover {
  text-decoration: underline;
}









/* Hero image en video
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.section {
  padding: 150px 0 5rem;
  
  text-align: center;

}
.section-heading,
.section-description {
  margin: 10rem;
  background opacity: 20%;

}

.hero {
background-image: url("../images/collages/TheCitynight15c.jpg");

padding: 250px 0 10rem;
}




h1 {	
	font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 4rem;
	color: #f2f2f2;
}

h1::before {	
	background: #37343D;
	opacity: .4;
	z-index: 1;
}

h2 {  
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 3rem;
  color: #f2f2f2;
}



.video {
  position: fixed;
  top: 50%; left: 50%;
  z-index: -100;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}




/* Positie en kleur van About tekst en quote
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#about {
  background: #c7cbd0;
  padding: 1rem 1rem;
  }


blockquote{
  display:block;
  background: #c7cbd0;
  padding: 15px 20px 15px 45px;
  margin-top: 10%;
  position: relative;
  
  /*Font*/
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2.0rem; 
  line-height: 1.3;
  color: #2c2c2c;
  text-align: center;
}

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/
  
  /*Font*/
  font-family: 'Raleway';
  font-size: 60px;
  font-weight: bold;
  color: #666;
  
  /*Positioning*/
  position: absolute;
  left: 10px;
  top:5px;
}

blockquote::after{
  /*Reset to make sure*/
  content: "\201D";
}

blockquote a{
  text-decoration: none;
  background: #eee;
  cursor: pointer;
  padding: 0 3px;
  color: #c7cbd0;
}

blockquote a:hover{
 color: #666;
}

blockquote em{
  font-style: italic;
}s



/* Projects
–––––––––––––––––––––––––––––––––––––––––––––––––– */


#projects {
  background: #000;
  
}

#contact {
  background: #c7cbd0;
  padding: 5rem;
  }





/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer {
  background: #c7cbd0;
}