@charset "iso-8859-1";

		html {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
		}
		
		body {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			min-width: 320px;
			background: rgba(173,216,230,1);
			transition: all ease 0.35s;
		}
			
		h1, h2, h3, h4, h5, p {
			margin: 0 5px;
			padding: 0;
		}

		h1 {
			font-family: 'eras_bold_itcregular';
			font-size: 20pt;
		}
				
        h2 {
            font-family: "monotype_corsivaregular";
            font-size:30px;
            color:#433d3d;
        }

        h3 {
            font-family: eras_demi_itcregular;
            font-size:22px;
            color:#433d3d;
            text-align: left;
        }
        
        h3.portfolio {
            padding-top:25px;
            margin-bottom: 10px;
            clear: both;
            color: white;
        }

        h4 {
            font-family: "monotype_corsivaregular",  Tahoma;
            font-size:20px;
            color: white;
            margin: auto;
        }

        h5 {
            font-family: "eras_demi_itcregular", Tahoma, Verdana;
            font-size:19px;
            color:#433d3d;
            margin: auto;
        }	

        p {
            font-family: "eras_light_itcregular";
            font-size: 15pt;
            font-weight: bolder;
			margin: 10px 5px;
			color: #433d3d;
        }
        
        span {
            font-family: "eras_light_itcregular";
            font-size: 15pt;
            font-weight: bolder;
        }
        
        a {
        	outline: none;
        	-webkit-backface-visibility: hidden;
        	backface-visibility: hidden; 
        }
        
		.pagina {
			margin: 0;
			padding: 0;
			height: auto;
			min-height: 100%;
			width: 100%;
			border: 0;
			display: block;
		}
		
		#home {
			background: skyblue;
		}
		
		#portfolio {
			background: skyblue url("/images/min/wallpaper-mallorca-min.jpg") no-repeat center top scroll;
			background-size: cover;
		}
		
		#skills {
			background: rgba(173,216,230,1) /*url("/images/wallpaper-designer.png") no-repeat left center scroll;
			background-size: cover;*/
		}
		
		#contact {
			background: rgba(173,216,230,1) url("/images/min/wallpaper-barcelona-min.jpg") no-repeat center top scroll;
			background-size: cover;
		}
		
		.page-transition {
			position: relative; 
			margin-bottom:0; 
			overflow: hidden; 
			height: 65px; 
			white-space: nowrap;
			background-size: cover;
		}

		.driehoek {
			display: inline-block; 
			width: 0; 
			height: 0; 
			border-style: solid; 
			border-width: 35px 35px 0 35px;
		}
		
		.lightblue {
			border-color: rgba(173,216,230,1) transparent transparent transparent;
		}
		
		.skyblue {
			border-color: skyblue transparent transparent transparent;
		}
		
		.container {
			margin: 0 auto;
			padding: 0;
			display: block;
			width: 80%;
			overflow: hidden;
		}
		
		.content {
			position: relative;
			margin: 15px 25px 25px 150px;
			display: block;
			min-height: 400px;
			padding: 10px 0 15px 0;
			transition: all ease 0.35s;
		}
		
		.content * {
			margin: 0 10px;
		}
		
		.content h1 {
			transition: all ease 0.5s;
		}
		
		.content p {
            margin: 15px;
        }
        
        .content p span {
        	margin: 0;
        }
		
		.content p a {
            font-family: "eras_demi_itcregular", "Gabriola", "Trebuchet MS", Helvetica, sans-serif;
            font-weight: bolder;
            color: rgba(0,0,0,0.7);
            transition: all ease 0.25s;
            outlines: none;
            margin: 0;
        }
        
        .content p a:hover {
            font-family: "eras_demi_itcregular", "Gabriola", "Trebuchet MS", Helvetica, sans-serif;
            font-weight: bolder;
            color: rgba(255,255,255,0.8);
        }
        
        span.s1{display:inline-block;width:45px;height:22px;background:url(/images/min/h2-arrow-left-min.png)0 8px no-repeat}
        span.s2{display:inline-block;width:45px;height:22px;background:url(/images/min/h2-arrow-right-min.png)right 8px no-repeat}
        span.s1-white{display:inline-block;width:45px;height:22px;background:url(/images/min/h2-arrow-left-white-min.png)0 8px no-repeat}
        span.s2-white{display:inline-block;width:45px;height:22px;background:url(/images/min/h2-arrow-right-white-min.png)right 8px no-repeat}
		
		.special {
			background: rgba(204,204,204,0.2);
			color: aliceblue;
		}
		
		.hole {
			float: left;
			height: 100px;
			width: 100px;
			margin: 20px 0 20px 20px;
			border-radius: 50%;
			background: rgba(0,0,0,0.15);
			box-shadow: 5px 5px 15px rgba(0,0,0,0.25) inset;
			text-align: center;
			transition: all ease 0.35s;
		}
		
		.hole img  {
			height: 60px;
			margin: 19px;
			transition: all ease 0.5s;
		}

		/* yellow animation */
		#falling {
			height:200px;
			width: 15%;
			max-width: 200px;
			min-width: 110px;
			background: yellow;
			border: 1px solid gold;
			border-top: none;
			border-bottom: 5px solid gold;
			margin: 0 0 0 5%;
			top: 0;
			position: fixed;
			float: left;
			overflow: hidden;
			display:none;
			visibility: visible;
		}
			
		/* animatie {
            -webkit-animation: mymove 2s ease forwards; 
            -webkit-animation-delay: 2s; 
            animation: mymove 2s ease forwards;
            animation-delay: 2s;
        }
        
        @-webkit-keyframes mymove {
            from {top: -200px;}
            to {top: 0px;}
        }

        @keyframes mymove {
            from {top: -200px;}
            to {top: 0px;}
        }
         --------- */		
        
        #falling p {
        	font-weight: bolder;
        	margin: 55px 15px 20px 15px;
        	font-size: 14px;
        	position: absolute;
        }

        .exit {
        	border: 2px solid gold;
        	float: right;
        	display: block;
        	margin: 170px 10px 10px 95%;
        	color: gold;
        	display: block;
        	overflow: hidden;
        	font-family: Verdana;
        	font-weight: bolder;
        	text-decoration: none;
			transition: all ease 0.25s;
			cursor: pointer;
        }
        
        .exit:hover {
        	background-color: gold;
        	color: yellow;
        }
        
        .pijl {
        	position:relative;
        	margin: 40px auto;
        	padding: 0;
        	bottom: 0;
        	color: gold;
        	height: auto;
        	width: 15px;
        	display: none;
			cursor: pointer;
			overflow: hidden;
        }
        
        .pijl img {
        	width: 100%;
        	height: auto;
        	margin: -5px 0 5px 0;
        	padding: 0;
        }
        
        a.homebutton {
            background-color: transparent;
            display:inline-block;
            opacity:0.9;
            padding: 8px 16px;
            margin: 20px 10px;
            width: 220px;
            border: 1px solid black;
            transition: all ease 0.3s forwards;
            -webkit-transition: all 0.3s;	
            color: #433d3d;
            font-family: sans-serif;
            font-size: 13pt;
            font-weight: normal;
            text-align: center;
            text-decoration: none;
            text-transform: uppercase;
        }
        
        a.homebutton:hover {
            background-color: #0099CC;
            border: 1px solid #0099CC;
            color: white;
            opacity: 1;
        }
        
 		/* menu */       
		.menu {
			position:fixed;
			text-align: center;
			top:-200;
			margin: 0;
			left:0;
			display:block;
			width:100%;
			height: 35px;
			background-color: rgba(251,251,251,0.9);
			font-size: 18px;
			border-bottom: 3px solid #433d3d;
			overflow: hidden;
			white-space: nowrap;
			z-index: 3;
			-webkit-animation: mymove 1s ease forwards; 
            -webkit-animation-delay: 0.4s; 
            animation: mymove 1s ease forwards;
            animation-delay: 0.4s;
        }
		        
        @-webkit-keyframes mymove {
            from {top: -200px;}
            to {top: 0px;}
        }

        @keyframes mymove {
            from {top: -200px;}
            to {top: 0px;}
        }
		
		.menu ul {
			margin: auto;
			display: inline-block;
			height: 45px;
			width: 100%;
			max-width: 968px;
			min-width: 320px;
			white-space:nowrap;
			overflow: hidden;
			border-top: 0;
			border-bottom: 0;
			list-style-type: none;
			-webkit-margin-before: 0;
			-webkit-margin-after: 0;
			-webkit-margin-start: 0;
			-webkit-margin-end: 0;
			-webkit-padding-start: 0;
		}
		
		.menu ul li {
			display: inline-block;
			vertical-align: middle;
			height: 45px;
			background-color: transparent;
			transition: all ease 0.5s;
			width: 24%;
			float: left;
			border-right: 1px solid rgba(0,0,0,0.2);
			text-align: center;
		}
		
		.menu ul li:first-of-type {
			border-left: 1px solid rgba(0,0,0,0.2);
		}
		
		.menu ul li a {
			display: block;
			padding: 5px 0;
			color: #433d3d;
			height: 45px;
			font-family: 'monotype_corsivaregular';
			font-weight: lighter;
			white-space: nowrap;
		}
		
		.menu ul li:hover {
			background-color: rgba(0, 45, 96, 0.15);
			text-decoration: underline;
		}
		
		.menu ul li:active {
			background-color: rgba(0, 45, 96, 0.15);	
			text-decoration: none;
		}
		
		/* contact */

        .phone {
            display:block;
            height:46px;
            width:150px;
            margin-top:10px;
            /*background-color: skyblue;
            border-radius: 20px;
            border: 2px dashed #FFFFFF;
            box-shadow: 0 0 0 8px #0099CC; */
            overflow: hidden;
            outlines: none;
        }

        .mail {
            display:block;
            height:46px;
            width:150px;
            margin-bottom:10px;
            /*background-color: skyblue;
            border-radius: 20px;
            border: 2px dashed #FFFFFF;
            box-shadow: 0 0 0 8px #0099CC; */
            overflow:hidden;
        }

        .slidebar {
            float: right;
            height: 46px;
            width: 240px;
            right: 100;
            position: relative;
        }

        .slidebar:hover {
            cursor:pointer;
        }

        .slidebar table {
            display:block;
            height: 45px;
            width: 100;
        }

        .slidebar table tr td {
            background-color:transparent;
        }

        .slidebar table tr td span {
            display:inline-block;
            font-family: "eras_demi_itcregular", Tahoma, Verdana;
            font-size:11px;
            color:white;
            margin: 0;
        }

        .slidebar table tr td span a {
            color:white;
            text-decoration: underline;
        }

        .slidebar img {
            display:block;
            height: 40px;
            width: 40px;
            margin: auto;
        }
        
        /* portfolio */
        .project {
        	width: 35%;
        	max-width: 300px;
        	min-width: 185px;
        	min-height: 200px;
        	background-color: rgba(240,248,255,0.8);
        	padding: 5px;
        	margin: 5px 5px 5px 15px;
        	display: inline-block;
        	
        }
        
        .hoverslide {
        	float: left;
        	background: rgba(0,0,0,0.4) url('../images/portfolio/more.png') center center no-repeat;
        	margin: 0 0 0 0;
        	display: block;       	
        	height: 200px;
        	width: 100%;
        	display: none;
        	text-decoration: none;
        	cursor: pointer;
        }
        
        .hoverslide span {
        	margin: 10px 5px;
        	text-transform: uppercase;
        	color: white;
        	text-decoration: none;
        	font-weight: normal;
        }
        
        .een {
            background: white url('/images/portfolio/eneco_thumb.png') no-repeat center top scroll;
			background-size: cover;
        }

        .twee {
            background: white url('/images/portfolio/lapiazza_thumb.png') no-repeat center top scroll;
			background-size: cover;
        }

        .drie {
            background: white url('/images/portfolio/crossfit_thumb.png') top center repeat;
        }

        .vier {
            background: white url('/images/portfolio/mijnspeldjes_thumb.png') no-repeat center top scroll;
			background-size: cover;
        }

        .vijf {
            background: white url('/images/portfolio/menukaart_thumb.png') no-repeat center top scroll;
			background-size: cover;
        }

        .zes {
            background: white url('/images/portfolio/feedback_thumb.png') no-repeat center top scroll;
			background-size: cover;
        }

        .zeven {
            background: white url('/images/portfolio/infographic_thumb.png') no-repeat center top scroll;
			background-size: cover;
        }

        .acht {
            background: white url('/images/portfolio/icons_thumb.png') no-repeat center top scroll;
			background-size: cover;
        }

        .negen {
            background: white url('/images/portfolio/shadowcatcher_thumb.png') no-repeat center top scroll;
			background-size: cover;
        }

        .tien {
            background: white url('/images/portfolio/philipshue_thumb.png') no-repeat center top scroll;
			background-size: cover;
        }

        .elf {
            background: white url('/images/portfolio/overheid_thumb.png') no-repeat center top scroll;
			background-size: cover;
        }

        .twaalf {
            background: #fdfdfd url('/images/portfolio/ictbanen_thumb.png') no-repeat center top scroll;
			background-size: cover;
        }
        
        .dertien {
            background: #fdfdfd url('/images/portfolio/lightvibes_thumb.png') no-repeat center top scroll;
			background-size: cover;
        }

        .veertien {
            background: white url('/images/portfolio/aftermovie_thumb.png') top right repeat;
        }

        .vijftien {
            background: black url('/images/portfolio/adidas_thumb.png') center center no-repeat;
        }

        .zestien {
            background: white url('/images/portfolio/netwerkevent_thumb.png') center center repeat;
        }
        
        .zeventien {
            background: white url('/images/portfolio/gofish_thumb.png') center center repeat;
        }
        
        .achttien {
            background: white url('/images/portfolio/fitatyourlevel_thumb.jpg') center center repeat;
        }        
		        
        /*cv

        .cvfoto {
            float: left;
            width: auto;
            height: auto;
            max-height: 150px;
            margin: 10px;
            display: block;
            position: relative;
            border-radius: 10px;
            border: 8px solid #0099CC;
            overflow:hidden;
        }

        .cvfoto img {
            height: auto;
            margin: -1px;
        }

        table.person {
            font-family: eras_light_itcregular;
            font-size: 15pt;
            color:black;
            display:inline-block;
            padding-top: 10px;
        }

        table.person tr td {
            padding-bottom: 5px;
        }

        table.person tr td:last-of-type {
            font-weight:bolder;
            padding-left:10px;
        }


        ul.school {
        	margin-left: 0;
            font-family: eras_light_itcregular;
            font-size: 15pt;
            font-weight:bolder;
            overflow:hidden;
            display: inline block;
            float: left;
            clear: both;
            width: 270px;
            transition: all ease 0.5s;
        }
        
        ul.school:last-of-type {
        	margin-bottom: 30px;
        }

        ul.school li {
        	margin-left: 25px;
        	list-style-type: none;
        }
        
        ul.school li:first-of-type {
        	margin-left: 0;
            font-family: eras_demi_itcregular;
        }

        .tekstcv img {
            overflow:hidden;
            width: 150px;
            padding: 0 25px 15px 5px;
            display:inline block;
            float:left;
        }

        .tekstcv {
            margin:25px 20px 0 0;
            overflow: hidden;
            word-wrap: break-word;
        }*/

        .image img:nth-of-type(even) {
        	width: 60%;
        }
        
        .hexagon {
			position: relative;
			display: inline-block;
			width: 205px;
			height: 233px;
			overflow: hidden;
			-webkit-mask-image: url('/images/skills/hexagon.jpg');
			background-color: #58ACFA;
        	background-position: center center;
        	background-repeat: no-repeat;
			text-align: center;
		}
		
		ul.innerhexagon {
			height: 186px;
			width: 186px;
			margin: auto;
			margin-top: 16px;
		    opacity: 0;
			transition: opacity 0.2s;
			display: block;
            position: absolute;
            top: 57%;
            left: 23%;	
            transform: translate(-50%, -50%);
			font-family: sans-serif;
			color: white;
		}
		
        .hexagon:hover .innerhexagon, .innerhexagin:hover, .hexagon:focus .innerhexagon, .innerhexagin:focus {
			transition: opacity 0.8s;
            opacity: 1;
        }
        
        .hexagon:hover {
        	background-image: none;
        }
		
		ul.skills {
            position: relative;
            display: block;
            margin: 20px auto;
            padding: 20px auto;
            max-width: 1045px;
        }
        
        ul.skills li {
            display: inline;
        	position: relative;
        	float: left;
        	list-style-type: none;
            width: 240px;
        }
        
        ul.skills li span {
        	margin: 15px auto;
        	font-family: sans-serif;
        	padding-right: 9px;
			color: #58ACFA;
            text-transform: uppercase;
            display: block;
            text-align: center;
        }
        
        ul.skills li span:before {
            content: '';
            position: absolute;
            background: #58ACFA;
            width: 205px;
            height: 8px;
            right: 50%;
            margin: -12px -98px 0 0;
        }
        
        .webdesign {
        	background-image: url('/images/skills/min/webdesign-min.png');
        }
        
        .code {
        	background-image: url('/images/skills/min/code-min.png');
        }
        
        .mobile {
        	background-image: url('/images/skills/min/mobile-design-min.png');
        }
        
        .marketing {
        	background-image: url('/images/skills/min/communication-min.png');
        }
        
        .interaction {
        	background-image: url('/images/skills/min/interaction-design-min.png');
        }
        
        .visual {
        	background-image: url('/images/skills/min/graphic-design-min.png');
        }
        
        .responsive {
        	background-image: url('/images/skills/min/responsive-min.png');
        }
        
        .branding {
        	background-image: url('/images/skills/min/branding-min.png');
        }
        
        img.autograph {
        	position: absolute;
        	margin-top: 50px;
        	bottom: 50px;
        	right: 15px;
        	-ms-transform: rotate(-22deg); /* IE 9 */
        	-webkit-transform: rotate(-22deg); /* Chrome, Safari, Opera */
        	transform: rotate(-22deg);
        }
        
        /*contactform*/
        
form {
	width:459px;
	margin:0 auto;
}

input, textarea, select {
	width:439px;
	min-height:27px;
	background:#efefef;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:1px solid #dedede;
	padding:10px;
	margin-top:3px;
	margin-bottom: 10px;
	font-size:0.9em;
	color:#3a3a3a;
	text-transform: capitalize;
}

	input:focus, textarea:focus, select:focus {
		border:1px solid #97d6eb;
	}

label {
	width: 70%;
	display:inline;
	float: left;
	padding-top: 4px;
	letter-spacing:2px;
}

input#terms {
	width: 30px;
	display: inline;
	float: left;
}
	
textarea {
	height:213px;
	font-family:Arial, Helvetica, sans-serif;
	background: #efefef;
	text-transform: initial;
}

.submit {
	background:url(/images/submit.jpg);
	width:127px;
	height:38px;
	text-indent:-9999px;
	border:none;
	margin-top:20px;
	cursor:pointer;
	border-radius: 6px;
}

.submit:hover {
	opacity:0.9;
}

.nocapitalize {
	text-transform: initial;
}