@charset "utf-8";
/* CSS Document */

/* -------------------- Algemeen -------------------- */

* {
	-webkit-box-sizing: border-box; /* Safari / Chrome, other Webkit */
	-moz-box-sizing: border-box; /* Firefox, other Gecko */
	box-sizing: border-box; /* Opera, Internet Explorer 8+ */
}

html {
	position: relative;
	min-height: 100%;
}

body {
	background:#07b3cc;
	margin:0;
	padding:0;
	font-family: 'Oswald', sans-serif;
	font-size:2.9em;
	font-weight:400;
	color:#ffffff;
}

h1 {
	font-family: 'Oswald', sans-serif;
	font-size:2.1em;
	font-weight:700;
	text-transform:uppercase;
	color:#1b1363;
	text-align:center;
	margin-top:0px!important;
	margin-bottom:70px!important;
}

.blue {
	color:#1b1363;
}

/* -------------------- Header -------------------- */

header{
	height:466px;
	margin:55px 0px 0px 0px;
}

header .container{
	padding-left:0px!important;
	padding-right:0px!important;
}

header .container .logo{
	background:url(../images/logo.png);
	width:127px;
	height:160px;
	margin:auto;
}

header .container .intro{
	margin:75px 0px 0px 0px;
}

header .container .intro .textIntro{
	text-align:center;
	text-transform:uppercase;
}

header .container .buttons{
	width:252px;
	height:114px;
	margin:auto;
	padding:50px 0px 0px 0px;
}

header .container .buttons img{
	display:block;
	margin:auto;
}

header .container .buttons .linkedin{
	width:64px;
	height:64px;
	background-color:#2cbed4;
	float:left;
	display:inline;
	margin:0px 20px 0px 0px;
	padding:14px 0px 0px 0px;
	opacity: 1;
  	transition: all ease 0.5s;
 	-webkit-transition: all ease 0.5s;
 	-moz-transition: all ease 0.5s;
}

header .container .buttons .linkedin:hover{
	background-color:#eb2c3c;
	opacity: 1;
}

header .container .buttons .mail{
	width:64px;
	height:64px;
	background-color:#2cbed4;
	float:left;
	display:inline;
	margin:0px 20px 0px 0px;
	padding:18px 0px 0px 0px;
	opacity: 1;
  	transition: all ease 0.5s;
 	-webkit-transition: all ease 0.5s;
 	-moz-transition: all ease 0.5s;
}

header .container .buttons .mail:hover{
	background-color:#eb2c3c;
	opacity: 1;
}

header .container .buttons .cv{
	width:64px;
	height:64px;
	background-color:#2cbed4;
	float:left;
	display:inline;
	padding:17px 0px 0px 0px;
	opacity: 1;
  	transition: all ease 0.5s;
 	-webkit-transition: all ease 0.5s;
 	-moz-transition: all ease 0.5s;
}

header .container .buttons .cv:hover{
	background-color:#eb2c3c;
	opacity: 1;
}

/* -------------------- Middle -------------------- */

.middle{
	margin-top:90px;
}

.middle .container .portfolio-item{
	margin:0px 0px 30px 0px;
}

.middle .container .portfolio-item .portfolio-link {
  display: block;
  position: relative;
  max-width: 400px;
  margin: 0 auto;
}
.middle .container .portfolio-item .portfolio-link .caption {
  background:#eb2c3c;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
}
.middle .container .portfolio-item .portfolio-link .caption:hover {
  opacity: 1;
}
.middle .container .portfolio-item .portfolio-link .caption .caption-content {
  position: absolute;
  width: 100%;
  height: 20px;
  font-size: 20px;
  text-align: center;
  top: 50%;
  margin-top: -12px;
  color: white;
}
.middle .container .portfolio-item .portfolio-link .caption .caption-content .vergrootglas{
	width: 32px;
	height: 32px;
	margin:auto;
}

.middle .container .portfolio-item .portfolio-link .caption .caption-content h3,
.middle .container .portfolio-item .portfolio-link .caption .caption-content h4 {
  margin: 0;
}
.middle .container * {
  z-index: 2;
}

.middle .container .vacature{
	width:180px;
	height:407px;
	margin:auto;
}
.middle .container .vacature .vacatureWrapper{
	margin:50px 0px 0px 0px;
}

/* -------------------- Footer -------------------- */
footer{
	height:90px;
	background-color:#14b7cf;
	margin:100px 0px 0px 0px;
}

footer .footText {
	line-height:90px;
	font-size:0.7em;
	margin:auto;
	width:225px;
}

/* -------------------- Portfolio Modals -------------------- */

.portfolio-modal .modal-content {
  border-radius: 0;
  background-clip: border-box;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  min-height: 100%;
  padding: 100px 0;
  text-align: center;
}
.portfolio-modal .modal-content h2 {
	margin: 0px 0px 40px 0px;
	font-family: 'Oswald', sans-serif;
	font-size:1.5em;
	font-weight:700;
	text-transform:uppercase;
	color:#eb2c3c;
}
.portfolio-modal .modal-content img {
	margin:auto;
	border:1px solid #1b1363;
}

.portfolio-modal .modal-content .noborder{
	border:none;
}

.portfolio-modal .modal-content .btn{
	border-radius:0px;
}

.portfolio-modal .modal-content .btn-default:hover{
	background-color:#fde9eb;
}

.portfolio-modal .modal-content .item-details {
  margin: 30px 0;
}

.portfolio-modal .modal-content .modalTitel{
	font-size:1em;
	font-weight:700;
	text-transform:uppercase;
	color:#eb2c3c;
	margin:30px 0px 30px 0px;
}

.portfolio-modal .modal-content .modalText{
	font-size:0.7em;
	font-weight:300;
	color:#1b1363;
	margin:30px 0px 30px 0px;
}

.portfolio-modal .modal-content .textHighlight{
	color:#07b3cc;
}

.portfolio-modal .modal-content .extra{
	margin:50px 0px 30px 0px;
}

.portfolio-modal .modal-content .extra .extra-item{
	margin:0px 0px 30px 0px;
}

.portfolio-modal .modal-content a{
	color:#eb2c3c;
	text-decoration:none;
}

.portfolio-modal .modal-content a:hover{
	color:#eb2c3c;
	text-decoration:underline;
}

.portfolio-modal .modal-content .btn-default{
	color:#eb2c3c;
	font-family: 'Oswald', sans-serif;
	text-transform:uppercase;
	border-color:#eb2c3c;
}

.portfolio-modal .close-modal {
  position: absolute;
  width: 75px;
  height: 75px;
  background-color: transparent;
  top: 25px;
  right: 25px;
  cursor: pointer;
}
.portfolio-modal .close-modal:hover {
  opacity: 0.3;
}
.portfolio-modal .close-modal .lr {
  height: 75px;
  width: 1px;
  margin-left: 35px;
  background-color: #2C3E50;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Safari and Chrome */
  z-index: 1051;
}
.portfolio-modal .close-modal .lr .rl {
  height: 75px;
  width: 1px;
  background-color: #2C3E50;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  /* IE 9 */
  -webkit-transform: rotate(90deg);
  /* Safari and Chrome */
  z-index: 1052;
}
.portfolio-modal .modal-backdrop {
  opacity: 0;
  display: none;
}



@media screen and (max-width: 480px){
	body{
		font-size:28px;
	}
	
	h1{
		font-size:50px;
	}
	
	header{
		height:555px;
		margin:55px 0px 0px 0px;
	}
	
	header .container{
	padding-left:15px!important;
	padding-right:15px!important;
}
	
	header .container .intro{
		margin:55px 0px 0px 0px;
	}
	.middle{
		margin-top:70px;
	}
}

@media (min-width: 767px) {
  .middle .container .portfolio-item {
    margin: 0 0 30px;
  }
}