@charset "UTF-8";

html{
height:100%;
width:100%;
}

body {
color:#aaa;
height:100%;
width:100%;
background-color:#222;
margin:0;
padding:0;
color:#eee;
font-family:Verdana,Geneva,sans-serif;
font-size:13px;
line-height:20px;

}

.header{
background: #000 url('/images/simon-willems.jpg') no-repeat 100% 100%;
height:500px;
width:1000px;
margin:0 auto;
}

.body{
background-color:#ccc;
}

h1 {
font-family: "lobster-1","lobster-2",serif;
font-size:5em;
margin:30px 0 0 0;
color: #fff;
text-shadow: 0px 2px 3px #000;
}

h3{
font-family: "adelle-1","adelle-2",serif;
font-size:2em;
line-height:1.1em;
border-bottom:1px solid #ccc;
padding: 0 0 5px 0;
margin-bottom:5px;
}

h2{
font-family: "adelle-1","adelle-2",serif;
font-size:2em;
margin:20px 0 10px 70px;
color: #aaa;
text-shadow: 0px 2px 3px #000;
}

a:link {
-webkit-tap-highlight-color: #5ed0ff;
}

#right-arrow{
display:none;
color:#fff;
position:absolute;
top:290px;
right:20px;
z-index:9;
text-shadow: 0px 2px 3px #000;
text-align:center;
}

.rotate{
display:block;
position:relative;
font-family: "lobster-1","lobster-2",serif;
font-size:2em;
line-height:1.1em;
padding-right:5px;
z-index:99;
-webkit-transform: rotate(-30deg);
/* Firefox */
-moz-transform: rotate(-20deg);
/* IE */
-ms-transform: rotate(-30deg);
/* Opera */
-o-transform: rotate(-30deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.arrow_right_alt1{
display:block;
font-size:9em;
position:relative;
top:-70px;
z-index:1;
color:#00AAEE;
}

.content{	
width:100%;
height:525px;
overflow:auto;
clear:both;

}
		
.content .images_container{
overflow:hidden;
}
		
.content .images_container img {
padding:0;
margin:0 0 10px 0;
}
		
section article{
float:left;
width:300px;
height:500px;
padding:10px 50px;
}

aside{
float:right;
margin: 50px 50px 0 0 
}

.aside-text{
padding-right:10px;
}

#eyebrow{
float:left;
margin-left:50px;
}

.magnifying_glass{
position:relative;
top:30px;
margin-left:270px;
font-size:4em;
text-shadow:#000 2px 2px 2px;
}

#disclaimer{
float:left;
margin: 10px 0 0 50px; 
}

#contact{
float:right;
margin: 10px 50px 0 0 ;
}

footer{
height:75px;
}

a.fancybox-nav {
border-bottom:none;
}

::selection {
background: #2a90b9; /* Safari */
}

::-moz-selection {
background: #2a90b9; /* Firefox */
}

.stripes a{
color:#fff;
float:right;
border-bottom:0;
margin: 12px 50px 0 0;
font-size:1.2em;
text-shadow:#000 1px 1px 1px;
}

.stripes {
height: 50px;
width: 100%
max-width: 100%;
min-width: 100%;	
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px; /* Controls the size of the stripes */		
-moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;
}
		
.angled {
background-color: #00AAEE;
background-image: -webkit-gradient(linear, 0 100%, 100% 0,
									color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
									color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
									color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
			 						to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
								transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
								transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
								transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
								transparent 75%, transparent);
background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
								transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
								transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
								transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
								transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
								transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
								transparent 75%, transparent);
}

.angled {
background-color: #00AAEE;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}

.fat {
background-color: #4162a8;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}

a{
color: #00AAEE;
-webkit-transition: color 1000ms linear;
-moz-transition: color 1000ms linear;
-o-transition: color 1000ms linear;
-ms-transition: color 1000ms linear;
transition: color 1000ms linear;
}

.fat {
background: #4162a8;
border-top: 1px solid #38538c;
border-right: 1px solid #1f2d4d;
border-bottom: 1px solid #151e33;
border-left: 1px solid #1f2d4d;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
-moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
color: #fff;
line-height: 1;
margin-top: 54px;
margin-bottom: 10px;
padding: 10px 20px 12px;
text-align: center;
text-shadow: 0px -1px 1px #1e2d4d;
width: 150px;
-webkit-background-clip: padding-box;
}

.fat:hover {
color: #ddd;
-webkit-transition: color 250ms linear;
-moz-transition: color 250ms linear;
-o-transition: color 250ms linear;
-ms-transition: color 250ms linear;
transition: color 250ms linear;
-webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
-moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
cursor: pointer;
}
  
.fat:active {
color:#fff;
-webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
-moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
margin-top: 58px;
position:relative;
top:4px;
}

.resume, .colophon{
color:#333;
font-family:Georgia,Times,serif;
font-size:16px;
line-height:20px;
width:80%;
margin:0 auto;
}

.resume h1, .colophon h1{
text-align:center;
font-size:2em;
margin:30px 0 0 0;
font-family:Georgia,Times,serif;
color:#333;
text-shadow:none;
width:auto;
}

.resume h2{
font-size:1.5em;
font-family:Georgia,Times,serif;
color:#333;
text-shadow:none;
margin:0 0 10px;
width:auto;
text-align:left;
border:none;
}

.colophon h2{
font-size:1.5em;
font-family:Georgia,Times,serif;
color:#333;
text-shadow:none;
width:auto;
text-align:left;
margin:50px 0 10px;
padding-bottom:10px;
border-bottom:1px solid #333;
}

.resume a, .colophon a{
border-bottom:1px dotted #aaa;
}

.resume a:hover, .resume a:active, .resume a:focus{
text-decoration:none;
border-bottom:0;
}

.colophon a:hover, .colophon a:active, .colophon a:focus{
text-decoration:none;
border-bottom:0;
}

.centered{
text-align:center;
}

.screenshot{
text-align:center;
margin-top:40px;
}

.resume .job{
clear:both;
font-weight:bold;
}

.resume .left{
float:left;
}

.resume .right{
float:right;
}

.resume .title{
clear:both;
margin-left:5%;
}

.resume ul, .colophon ul{
margin-left:6%;
padding:0;
}

.resume li, .colophon li{
padding:0;
margin:0;
}

.colophon h3{
font-size:1.2em;
font-family:Georgia,Times,serif;
color:#333;
text-shadow:none;
margin:0 0 10px;
width:auto;
text-align:left;
border:none;
}

blockquote{
width:70%;
margin:0 auto 0;
padding:0;
border-left:1px solid #333;
padding-left:20px;
font-size:1.5em;
line-height:1.5em;
font-style:italic;
color:#666;
}

.author{
display:block;
float:right;
color:#aaa;
}

@media only screen and (max-width: 1023px) {

.resume .right, .resume .left{
float:none;
}

}

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*
.download {
background: url(../img/downarrow@2x.png) no-repeat;
background-size: 27px 28px;
}
*/

}