/* 

1.ROOT
2.HEADINGS
3.TYPOGRAPHY
4.LINKS
5.FIGURES & IMAGES
6.TABLES
7.FORMS
8.BANNER header[role="banner"]
9.NAVIGATION nav[role="navigation"]
10.CONTENT
11.MAIN div[role="main"]
12.COMPLIMENTARY div[role="complementary"]
13.CONTENTINFO footer[role="contentinfo"]
14.GLOBAL OBJECTS
15.VENDOR-SPECIFIC 
16.TEMPLATE SPECIFICS
17.MODERNIZR

COLOURS 

Grey: Hex rgb(200,200,200)
Blue: Hex rgb(52,158,219) 

*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin : 0;
padding : 0;
border : 0;
font-size : 100%;
font : inherit;
vertical-align : baseline; }

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display : block; }

abbr[title] { 
border-bottom : 1px dotted; 
cursor : help; }

/* 1.ROOT */

html {
overflow-y : scroll;
background-color : rgb(45,53,62); }

body { 
font : 100%/1.5 "Helvetica Neue", Helvetica, Arial;
color : rgb(165,168,171);
text-shadow : 0 1px 0 rgb(0,0,0);
background : transparent; }

/* 2.HEADINGS */

h1, h2, h3 {
font-weight : normal; 
color : rgb(255,255,255); }

h1 { 
font-size : 3em;
letter-spacing : -1px; }

h2 { 
margin-bottom : .75em;
font-size : 1.5em; /* 24 / 16 = 1.5 */ }

h3 { 
margin-bottom : .75em;
font-size : 1.25em; /* 18 / 16 = 1.25 */ }

/* 3.TYPOGRAPHY */

p, 
ol, 
ul,  
small { 
margin-bottom : 1.5em; 
font-size : .875em; /* 14 / 16 = .875 */ }

small {
display : block; }

li {
list-style-type : none; }

.content em {
font-style: italic;}


/* 4.LINKS */

a, a:visited {
outline : none;
color : rgb(255,255,255);
text-decoration : none; }
 
a:hover { 
color : rgb(255,255,255); 
text-decoration : none; 
outline : none; }
 
a:active, a:focus { 
position : relative; 
top : 1px; 
color : rgb(255,255,255);
outline : none; }

h2 a {
display : inline-block;
whitespace : no-wrap;
padding : .25em .75em; 
background-color : rgb(75,81,87); }

h2 a:hover {
background-color : #BA6101; }

small a {
padding : .25em .55em .25em 0; }

/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS */
/* 8.BANNER */

header[role="banner"] {
margin : 0 auto 1.5em;
width : 80%; }

header[role="banner"] h1 {
text-align : center; }

header[role="banner"] p {
margin-bottom : 0; 
font-size : 1.25em; /* 18 / 16 = 1.25 */ }

/* 10.CONTENT */

.content {
margin : 0 auto 1.5em;
width : 80%; }

/* 11.MAIN */

*[role="main"] {
margin-bottom : 1.5em; }

.extvideo {
display : none; }

/* 12.COMPLEMENTARY */

/* 13.CONTENTINFO */

footer[role="contentinfo"] {
margin : 0 auto;
width : 80%; 
padding-top : 1.5em;
border-top : 3px dashed rgb(165,168,171); }

.ihatetimvandamme {
display : none; }

/* 14.GLOBAL OBJECTS */

.clearfix { 
zoom : 1; }

.clearfix:before, 
.clearfix:after { 
content : "\0020"; 
display : block; 
height : 0; 
overflow : hidden; }

.clearfix:after { 
clear : both; }

/* 15.VENDOR-SPECIFIC */

html {
-webkit-font-smoothing : antialiased;
text-rendering : optimizeLegibility; }

body {
-ms-text-size-adjust : none;
-webkit-text-size-adjust : none; }

a:link { 
-webkit-tap-highlight-color : rgb(23,119,175); }

::-webkit-selection { 
background : rgb(222,127,16); 
color : rgb(250,250,250); 
text-shadow : none; }

::-moz-selection { 
background : rgb(222,127,16); 
color : rgb(250,250,250); 
text-shadow : none; }

::selection { 
background : rgb(222,127,16); 
color : rgb(250,250,250); 
text-shadow : none; }

.ie7 img,
.iem7 img { 
-ms-interpolation-mode : bicubic; }

div  { 
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
-o-box-sizing : border-box;
box-sizing : border-box; }

/* 16.TEMPLATE SPECIFICS */

/* 17.MODERNIZR */

/* borderradius */

.borderradius h2 a {
-webkit-border-radius : 2em;
-moz-border-radius : 2em;
border-radius : 2em; }

/* csstransitions */

.csstransitions a,
.csstransitions h1 { 
-webkit-transition : all .15s linear;
-moz-transition : all .15s linear;
-o-transition : all .15s linear;
transition : all .15s linear; }

/* multiplebgs */

.multiplebgs {
background-image :  
url(../img/bg-topshadow.png), url(../img/bg-pattern.png); 
background-repeat : repeat-x, repeat;
background-position : 0 0, 0 0;
background-color : rgb(45,53,62); }

/* rgba */

.rgba h1 { 
text-shadow : 0 0 5px rgba(84,164,254,.85), 0 1px 2px rgba(0,0,0,1); }

.rgba h1:hover {
text-shadow : 0 0 5px rgba(84,164,254,1), 0 0 5px rgba(84,164,254,1); }

.rgba h2 a {
-webkit-box-shadow : 0 0 8px rgba(0,0,0,.1), inset 0 0 0 4px rgba(255,255,255,.04);
-moz-box-shadow : 0 0 8px rgba(0,0,0,.1), inset 0 0 0 4px rgba(255,255,255,.04);
box-shadow : 0 0 8px rgba(0,0,0,.1), inset 0 0 0 4px rgba(255,255,255,.04); }

.rgba h2 a:hover {
-webkit-box-shadow : 0 0 8px rgba(0,0,0,.3), inset 0 0 0 4px rgba(255,255,255,.1);
-moz-box-shadow : 0 0 8px rgba(0,0,0,.3), inset 0 0 0 4px rgba(255,255,255,.1);
box-shadow : 0 0 8px rgba(0,0,0,.3), inset 0 0 0 4px rgba(255,255,255,.1); }

.rgba h2 a:active {
-webkit-box-shadow : 0 0 4px rgba(0,0,0,.2), inset 0 0 0 4px rgba(255,255,255,.1);
-moz-box-shadow : 0 0 4px rgba(0,0,0,.2), inset 0 0 0 4px rgba(255,255,255,.1);
box-shadow : 0 0 4px rgba(0,0,0,.2), inset 0 0 0 4px rgba(255,255,255,.1); }

.rgba h3 a,
.rgba small a { 
text-shadow : 0 0 3px rgba(84,164,254,0), 0 1px 0 rgba(0,0,0,.3); }

.rgba h3 a:hover,
.rgba small a:hover {
text-shadow : 0 0 2px rgba(84,164,254,.6), 0 0 3px rgba(84,164,254,.8); }


/* MEDIA QUERIES */

/*480px ------------------------------------------------------------------ */
@media only screen and (min-width: 480px) {

/* 1.ROOT */
/* 2.HEADINGS */
/* 3.TYPOGRAPHY */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS */
/* 8.BANNER */
/* 9.NAVIGATION */
/* 10.CONTENT */
/* 11.MAIN */
/* 12.COMPLIMENTARY */
/* 13.CONTENTINFO */
/* 14.GLOBAL OBJECTS */
/* 15.VENDOR-SPECIFIC */
/* 16.TEMPLATE SPECIFICS */
/* 17.MODERNIZR */

}/*/mediaquery*/

/*768px ------------------------------------------------------------------ */
@media only screen and (min-width: 768px) {

/* 1.ROOT */
/* 2.HEADINGS */
/* 3.TYPOGRAPHY */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS */

/* 8.BANNER */

h1 { 
font-size : 5em; }

/* 9.NAVIGATION */
/* 10.CONTENT */
/* 11.MAIN */
/* 12.COMPLIMENTARY */
/* 13.CONTENTINFO */
/* 14.GLOBAL OBJECTS */
/* 15.VENDOR-SPECIFIC */
/* 16.TEMPLATE SPECIFICS */

.extvideo {
display : block; }

/* 17.MODERNIZR */

}/*/mediaquery*/

/*992px ------------------------------------------------------------------ */
@media only screen and (min-width: 992px) {

/* 1.ROOT */
/* 2.HEADINGS */
/* 3.TYPOGRAPHY */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS */
/* 8.BANNER */

header[role="banner"],
.content,
footer[role="contentinfo"] {
width : 640px; }

/* 9.NAVIGATION */
/* 10.CONTENT */
/* 11.MAIN */
/* 12.COMPLEMENTARY */

/* 13.CONTENTINFO */

.touch small a span {
visibility : visible;
opacity : 1; }

.ihatetimvandamme {
display : block;
margin-bottom : 0;
width : 100%;
height : 190px; 
background-image : url(../img/timeline-track.png);
background-repeat : repeat-x;
background-position : 0 100%; }

.timeline {
position : relative;
margin : 0 auto;
width : 640px; 
height : 190px; }

.timeline-marker,
.timeline-keyframe {
position : absolute;
display : block;
text-indent : -9999px; }

.timeline-marker {
z-index : 2;
bottom : 0;
left : 0;
width : 116px;
height : 171px;
background : transparent url(../img/timeline-marker.png) no-repeat 0 0; }

.timeline-keyframe {
z-index : 1;
bottom : 5px;
margin-left : -37px;
width : 74px;
height : 74px;
background : transparent url(../img/timeline-keyframe.png) no-repeat 0 0;
-webkit-transform : scale(0);
-moz-transform : scale(0);
-o-transform : scale(0);
transform : scale(0); }

.key1 { left : 25.6%; }
.key2 { left : 51.9%; }
.key3 { left : 78.2%; }

@-webkit-keyframes marker {
0% { -webkit-transform : translate3d(0,0,0); }
100% { -webkit-transform : translate3d(600px,0,0); }
}

@-moz-keyframes marker {
0% { -moz-transform : translate(0,0); }
100% { -moz-transform : translate(600px,0); }
}

@-webkit-keyframes keyframe {
0% { -webkit-transform : scale(0); opacity: .1; }
75% { -webkit-transform : scale(1.2); opacity: .8; }
100% { -webkit-transform : scale(1); opacity: 1; }
}

@-moz-keyframes keyframe {
0% { -moz-transform : scale(0); opacity: .1; }
75% { -moz-transform : scale(1.2); opacity: .8; }
100% { -moz-transform : scale(1); opacity: 1; }
}

.timeline-marker {
-webkit-animation-name : marker;
-webkit-animation-duration : 3s;
-webkit-animation-iteration-count : 1;
-webkit-animation-fill-mode : both;
-webkit-animation-play-state: paused;

-moz-animation-name : marker;
-moz-animation-duration : 3s;
-moz-animation-iteration-count : 1;
-moz-animation-fill-mode : both;
-moz-animation-play-state: paused; }

.timeline-keyframe {
-webkit-animation-name : keyframe;
-webkit-animation-duration : .2s;
-webkit-animation-iteration-count : 1;
-webkit-animation-fill-mode : both;
-webkit-animation-play-state: paused;

-moz-animation-name : keyframe;
-moz-animation-duration : .2s;
-moz-animation-iteration-count : 1;
-moz-animation-fill-mode : both;
-moz-animation-play-state: paused; }

.ihatetimvandamme:hover .timeline-marker,
.ihatetimvandamme:hover .timeline-keyframe {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
}

.ihatetimvandamme .key1 {
-webkit-animation-delay : .5s;
-moz-animation-delay : .5s; }

.ihatetimvandamme .key2 {
-webkit-animation-delay : .95s;
-moz-animation-delay : .95s; }

.ihatetimvandamme .key3 {
-webkit-animation-delay : 1.75s;
-moz-animation-delay : 1.75s; }


/* trigger animations automatically on touch devices */
.touch .ihatetimvandamme .timeline-marker {
-webkit-animation : marker 3s 3s 1 normal; 
-webkit-animation-fill-mode : both;
-moz-animation : marker 3s 3s 1 normal; 
-moz-animation-fill-mode : both; }

.touch .ihatetimvandamme .timeline-keyframe {
-webkit-animation-name : keyframe;
-webkit-animation-duration : .2s;
-webkit-animation-iteration-count : 1;
-webkit-animation-direction : normal;
-webkit-animation-fill-mode : both;
-moz-animation-name : keyframe;
-moz-animation-duration : .2s;
-moz-animation-iteration-count : 1;
-moz-animation-direction : normal;
-moz-animation-fill-mode : both; }

.touch .ihatetimvandamme .key1 {
-webkit-animation-delay : 3.5s;
-moz-animation-delay : 3.5s; }

.touch .ihatetimvandamme .key2 {
-webkit-animation-delay : 3.95s;
-moz-animation-delay : 3.95s; }

.touch .ihatetimvandamme .key3 {
-webkit-animation-delay : 4.75s;
-moz-animation-delay : 4.75s; }

/* 14.GLOBAL OBJECTS */
/* 15.VENDOR-SPECIFIC */
/* 16.TEMPLATE SPECIFICS */

/* 17.MODERNIZR */

.multiplebgs {
background-image :  
url(../img/bg-topshadow.png), url(../img/bg-pattern.png); 
background-repeat : repeat-x, repeat;
background-position : 0 0, 0 0; }

}/*/mediaquery*/

/*1382px ------------------------------------------------------------------ */
@media only screen and (min-width: 1382px) {

/* 1.ROOT */
/* 2.HEADINGS */
/* 3.TYPOGRAPHY */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS */
/* 8.BANNER */
/* 9.NAVIGATION */
/* 10.CONTENT */
/* 11.MAIN */
/* 12.COMPLIMENTARY */
/* 13.CONTENTINFO */
/* 14.GLOBAL OBJECTS */
/* 15.VENDOR-SPECIFIC */
/* 16.TEMPLATE SPECIFICS */
/* 17.MODERNIZR */

}/*/mediaquery*/

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

/* 1.ROOT */
/* 2.HEADINGS */
/* 3.TYPOGRAPHY */
/* 4.LINKS */
/* 5.FIGURES & IMAGES */
/* 6.TABLES */
/* 7.FORMS */
/* 8.BANNER */
/* 9.NAVIGATION */
/* 10.CONTENT */
/* 11.MAIN */
/* 12.COMPLIMENTARY */
/* 13.CONTENTINFO */
/* 14.GLOBAL OBJECTS */
/* 15.VENDOR-SPECIFIC */
/* 16.TEMPLATE SPECIFICS */
/* 17.MODERNIZR */

}/*/mediaquery*/