/* Basis */

html{
	height:100%;
}

body{
	margin:0;
	height:100%;
	background-image:url('/img/greenback--.png'); 
}

.container{
	margin: 0 auto;
	width:960px;
}

.fill{
	min-width:5px;
	min-height:5px;
}

.wrapper{
	background-image:url('/img/pattern-white.png');
	width:100%;
	padding-bottom:30px;
	-moz-box-shadow:0px 10px 10px 3px rgba(48, 48, 48, 0.4);
	-webkit-box-shadow:0px 10px 10px 3px rgba(48, 48, 48, 0.4);
	box-shadow:0px 10px 10px 3px rgba(48, 48, 48, 0.4);
	padding-top:10px;
}
.wrapper2{padding-bottom:0;}

/* Navigation */

.fonts{
	font-family: 'Roboto Slab', serif;
	font-size:16px;
}

.navLeft {width:310px; float:left; margin-top:20px; border-bottom:1px solid #1C1C1C; border-top:1px solid #1C1C1C; height:50px; font-size:16px; color:#1C1C1C;}

.logo {text-align:center; margin:7px 10px 5px; float:left; font-family: 'BebasNeueRegular'; font-size:68px; color:black; text-decoration:none; white-space: nowrap;}

.navRight {width:310px; float:left; margin-top:20px; margin-left:10px; border-bottom:1px solid #1C1C1C; border-top:1px solid #1C1C1C; height:50px; font-size:16px; color:#1C1C1C;}

.navLeft a {text-decoration:none;}
.navRight a {text-decoration:none;}


.dot {width:15px; height:60px; float:left; background-image:url(/img/dot-.png); background-repeat:no-repeat;}

.home {width:100px; height:45px; text-align:center; font-size:16px; color:#1C1C1C; padding-top:20px;margin-top:-6px; margin-left:27px;padding-bottom:3px; float:left; text-decoration:none;}
.home:hover {background-image:url(/img/rollover.png); background-repeat:no-repeat; background-position:bottom center; text-decoration:none;padding-bottom:3px;}
.homePressed {width:100px; height:45px; text-align:center; font-size:16px; color:#55ba00; padding-top:20px; margin-left:27px; margin-top:-6px;padding-bottom:3px;float:left; background-image:url(/img/rollover.png); background-repeat:no-repeat; background-position:bottom center; text-decoration:none;}

.portfolio {width:128px; height:45px; text-align:center; font-size:16px; color:#1C1C1C; padding-top:20px;margin-top:-6px;padding-bottom:3px; margin-right:26px; float:left; text-decoration:none;}
.portfolio:hover {background-image:url(/img/rollover.png); background-repeat:no-repeat; background-position:bottom center; text-decoration:none;padding-bottom:3px;}
.portfolioPressed {width:128px; height:45px; text-align:center; font-size:16px; color:#55ba00; padding-top:20px;margin-top:-6px; margin-right:26px;padding-bottom:3px; float:left; background-image:url(/img/rollover.png); background-repeat:no-repeat; background-position:bottom center; text-decoration:none;}

.aboutme {width:120px; height:45px; text-align:center; font-size:16px; color:#1C1C1C; padding-top:20px;margin-top:-6px;padding-bottom:3px; margin-left:31px; float:left; text-decoration:none;}
.aboutme:hover {background-image:url(/img/rollover.png); background-repeat:no-repeat; background-position:bottom center; text-decoration:none;padding-bottom:3px;}
.aboutmePressed {width:120px; height:45px; text-align:center; font-size:16px; color:#55ba00; padding-top:20px;margin-top:-6px;padding-bottom:3px; margin-left:31px; float:left; background-image:url(/img/rollover.png); background-repeat:no-repeat; background-position:bottom center; text-decoration:none;}

.contact {width:102px; height:45px; text-align:center; font-size:16px; color:#1C1C1C; padding-top:20px;margin-top:-6px;padding-bottom:3px; margin-right:32px; float:left; text-decoration:none;}
.contact:hover {background-image:url(/img/rollover.png); background-repeat:no-repeat; background-position:bottom center; text-decoration:none;padding-bottom:3px;}
.contactPressed {width:102px; height:45px; text-align:center; font-size:16px; color:#55ba00; padding-top:20px;margin-top:-6px;padding-bottom:3px; margin-right:32px; float:left; background-image:url(/img/rollover.png); background-repeat:no-repeat; background-position:bottom center; text-decoration:none;}

/* Ribbon */

.lint{
	background-image:url('/img/lint--.png'); 
	width:960px; 
	height:40px;
	margin-top:15px;
}

.lint p{
	color:white;
	text-align:center;
	font-family: 'Roboto Slab', serif;
	font-size:16px;
	vertical-align:middle;
	padding-top:9px;
}

/* Home-slider */

.grey{
	width:940px;
	height:410px;
	padding:10px;
	background-color:#cccccc;
	margin-top:30px;
}

.grey img{
	width:940px;
	height:410px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.6) inset, 0 0 6px rgba(0, 0, 0, 0.6);
}

/* Home-icons */

.home-icons{
	margin-top:30px;
}

.home-icons img{
	height:75px;
}

.home-icons h4{
	font-family: 'Roboto Slab', serif;
	font-size:25px;
	color:#55ba00;
	font-weight:100;
	margin-top:0;
	margin-bottom:20px;
}

.home-icons p{
	font-family: 'Average Sans', sans-serif;
	font-size:14px;
	color:black;
	max-width:320px;
	float:right;
	margin-top:0;
	line-height:16px;
}

.home-icons2{
	max-width:270px;
}

/* Projecten */

.greypro{
	padding:5px;
	background-color:#cccccc;
	width: 468px;
  	height:310px;
}

/* Aboutme */

.greyabout{
	width:100%;
	min-height:370px;
	background-color:#cccccc;
	margin-top:30px;
	padding-top:10px;
	padding-bottom:10px;
	
}

.aboutfull{
	width:100%;
	height:370px;
	background-image:url('/img/wrinkled-pattern.png');
	/* box-shadow: 0 0 4px 2px rgba(119, 119, 119, 0.7) inset;*/
	border-top:solid white;
	border-bottom:solid white;
	border-width:1px;
}

.aboutfull img{
	margin-top:18px;
}

.whosthat{background-image:url('/img/stripedback.png');padding:2px;margin-top:20px;width:197px;color:white;height:52px;}
.flying{background-image:url('/img/stripedback.png');padding:2px;margin-top:5px;width:130px;color:white;height:52px;margin-left:66px;float:left;}
.blonde{background-image:url('/img/stripedback.png');color: white;float: right;height: 52px;margin-right: 116px;margin-top: -56px;padding: 2px;width: 134px;}
.girl{background-image:url('/img/stripedback.png');color: white;float: right;height: 52px;margin-right: 138px;margin-top: 5px;padding: 2px;width: 112px;}

.whosthat p{text-align:center;font-family: 'BebasNeueRegular';font-size:48px;margin:0;}
.flying p{text-align:center;font-family: 'BebasNeueRegular';font-size:48px;margin:0;}
.blonde p{text-align:center;font-family: 'BebasNeueRegular';font-size:48px;margin:0;}
.girl p{text-align:center;font-family: 'BebasNeueRegular';font-size:48px;margin:0;}

.textfieldme{
	margin-top:20px;
}

.textfieldme p{
	font-family: 'Average Sans', sans-serif;
	font-size:12.5px;
	margin-top:20px;
}

.spaces{
	width:100%;
	height:60px;
}

.skills{
	margin-top:30px;
}

.skill1{background-image:url('/img/skills/skill1-.png');width:218px;height:218px;}
.skill2{background-image:url('/img/skills/skill2.png');width:218px;height:218px;}
.skill3{background-image:url('/img/skills/skill3.png');width:218px;height:218px;}
.skill4{background-image:url('/img/skills/skill4.png');width:218px;height:218px;}

.skill1:hover{background-image:url('/img/skills/skill1-hover.png');}
.skill2:hover{background-image:url('/img/skills/skill2-hover.png');}
.skill3:hover{background-image:url('/img/skills/skill3-hover.png');}
.skill4:hover{background-image:url('/img/skills/skill4-hover.png');}

.skill1:hover, .skill2:hover, .skill3:hover, .skill4:hover{
	animation: fadein 0.7s;
    -moz-animation: fadein 0.7s; /* Firefox */
    -webkit-animation: fadein 0.7s; /* Safari and Chrome */
    -o-animation: fadein 0.7s; /* Opera */
}

/*-webkit-transition: background 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;-webkit-transition: background 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;

	background-position: -218px 0;*/
	
/* Work */

.workgrey{
	width:940px;
	padding:10px;
	height:410px;
	background-color:#cccccc;
	margin-top:30px;
}

.workgrey img{
	width:940px;
	height:410px;
	border:solid white;
	border-width:1px;
}

.workicons{
	margin-top:40px;
	width:960px;
	margin-left:10px;
}

.workicons img{
	width:150px;
	height:150px;
	margin-left:75px;
}

.workicons h4{font-family: 'Roboto Slab', serif;font-size:25px;color:#55ba00;font-weight:100;margin-top:0;margin-bottom:10px;text-align:center;}
.workicons p{font-family: 'Average Sans', sans-serif;font-size:13px;color:black;margin-top:10px;padding-left:10px;padding-right:10px;}

.worklabel{
	width:150px;
	height:28px;
	background-image:url('/img/stripedback.png');
	margin-left:420px;
	padding-top:4px;
	margin-top:441px;
	z-index:100;
	position:absolute;
}

.worklabel2{margin-left:407px;}
.worklabel3{width:200px;margin-left:378px;}

.worklabel h4{margin:0;color:white;font-family: 'Roboto Slab', serif;font-weight:100;text-align:center;line-height:21px;}

.aboutwork{margin-top:30px; background-color:white;width:760px;padding-bottom:3px;padding-top:3px;border:dashed #ccc;border-width:1.2px;padding-left:100px;padding-right:100px;}

.aboutwork p{font-family: 'Average Sans', sans-serif;font-size:13px;text-align:center;margin-top:10px;}

.viewsite{
	background-color: #55BA00;
    border-radius: 4px 4px 4px 4px;
    color: white;
    font-family: 'Roboto Slab',serif;
    font-size: 14px;
    font-weight: 100;
    padding-top: 5px;
    width:120px;
    margin-left:812px;
    margin-top:438px;
    z-index:100;
    height:29px;
	position:absolute;
	text-align:center;
}

.viewsite a{color:white;text-decoration:none;font-size:16px;}
.viewsite a:hover{color:black;}

.mac-over-fsg{z-index:100;position:absolute;width:488px;height:274px;background-image:url('/img/werk/fsg-big.png');margin-left:237px;margin-top:78px;webkit-transition: background 0.4s ease-in-out;-moz-transition: background 0.4s ease-in-out;transition: background 0.4s ease-in-out;-webkit-transition: background 0.4s ease-in-out;-moz-transition: background 0.4s ease-in-out;transition: background 0.4s ease-in-out;}
.mac-over-fsg:hover{background-position: 0 -265px;}

.mac-over-witteduifjes{z-index:100;position:absolute;width:488px;height:274px;background-image:url('/img/werk/witteduifjes-big-hover.png');margin-left:404px;margin-top:78px;webkit-transition: background 0.5s ease-in-out;-moz-transition: background 0.5s ease-in-out;transition: background 0.5s ease-in-out;-webkit-transition: background 0.5s ease-in-out;-moz-transition: background 0.5s ease-in-out;transition: background 0.5s ease-in-out;}
.mac-over-witteduifjes:hover{background-position: 0 -376px;}

.mac-over-mustbeart{z-index:100;position:absolute;width:488px;height:274px;background-image:url('/img/werk/fsg-big-hover.png');margin-left:237px;margin-top:79px;webkit-transition: background 0.7s ease-in-out;-moz-transition: background 0.7s ease-in-out;transition: background 0.7s ease-in-out;-webkit-transition: background 0.7s ease-in-out;-moz-transition: background 0.7s ease-in-out;transition: background 0.7s ease-in-out;}
.mac-over-mustbeart:hover{background-position: 0 -1198px;}

.mac-over-waterstijl{z-index:100;position:absolute;width:488px;height:274px;background-image:url('/img/werk/waterstijl-big-hover.png');margin-left:237px;margin-top:78px;webkit-transition: background 0.5s ease-in-out;-moz-transition: background 0.5s ease-in-out;transition: background 0.5s ease-in-out;-webkit-transition: background 0.5s ease-in-out;-moz-transition: background 0.5s ease-in-out;transition: background 0.5s ease-in-out;}
.mac-over-waterstijl:hover{background-position: 0 -300px;}

/* Contact */

.contactphp{
	margin-top:170px;
	text-align:center;
}

.contactphp p{font-family: 'Average Sans', sans-serif;font-size:14px;text-align:center;}
.contactphp a{font-family: 'Average Sans', sans-serif;font-size:14px;text-align:center;color:#55ba00;}
.contactphp a:hover{color:black;}

.contacttekst{
	width:320px;
	float:right;
	margin-top:25px;
}

.contacttekst h4{color:#55BA00;font-family: 'Roboto Slab',serif;font-weight:100;margin:0;}
.contacttekst p{font-family:'Average Sans', sans-serif;font-size:14px;margin-top:5px;}

.contacticons{
	width:320px;
	float:right;
}

.contacticons img{
	width:30px;
	float:left;
}
.contacticons p{font-family:'Average Sans', sans-serif;font-size:14px; margin-top:6px;margin-left:40px;}
p.phone{padding-top:5px;}

/* Footer */

.footergrey{
	background-color:#cccccc;
	width:100%;
	height:10px;
}

#footer{
	width:100%;
	/*background-image:url('/img/greenback--.png'); 
	box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.3); */
	font-family: 'Average Sans', sans-serif;
	font-size:14px;
	color:black;
	padding-bottom:30px;
}

p.footertext{
	font-family: 'Average Sans', sans-serif;
	font-size:14px;
	color:black;
	padding-left:20px;
	margin-top:10px;
}

.leftflag{
	background-image:url('/img/lint3-.png'); 
	height:39px;
	width:380px;
	float:top;
}

.rightflag{
	background-image:url('/img/lint2-.png'); 
	height:39px;
	width:380px;
}

.rightflag p, .leftflag p{
	color:white;
	text-align:center;
	font-family: 'BebasNeueRegular';
	font-size:28px;
	padding-top:4px;
	margin:0;
}

.contactbut{
	background-color:black;
	padding:5px;
	max-width:150px;
	border-radius: 7px; 
	-moz-border-radius: 7px; 
	-webkit-border-radius: 7px; 
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3) inset, 0 0 16px rgba(0, 0, 0, 0.3);
	margin-left:110px;
	margin-top:20px;
}

.contactbut h4{
	font-family: 'Roboto Slab', serif;
	font-size:14px;
	color:white;
	margin:0;
	font-weight:100;
	text-align:center;
	text-decoration:none;
}

.contactbut h4:hover{
	color:#c3c3c3;
	text-decoration:none;
}

.jar img{
	width:103px;
	height:95px;
	margin-top:15px;
	float:left;
}

.jar p{ 
	padding-left:110px;
	padding-right:6px;
}


	webkit-transition: background 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;-webkit-transition: background 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;

	background-position: -218px 0;*/


.test{
	width:900px;
	height:900px;
	background-color:green;
}

.frames{
	width:350px;
	height:270px;
	background-color:red;
	background-image:url('/img/werk/bccblogo-big.png');
	webkit-transition: background 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;-webkit-transition: background 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}

.frames:hover{
	background-position: 0 -100px;

}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }