/*
   bfl-1.0.css
   beate fleming 1.0
   
   Created by Willem Rabe on 2013-11-14.
   Copyright 2013 rabe.li. All rights reserved.

   TODO: breakpoints, transitions (scale)
   gif instead'a CSS3 cogwheel?

*/


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

html,
body {
  height: 100%;
}

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

b,
strong {
  font-weight: bold;
}

img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic;
}

ul,
ol {
  list-style: none;
}

li {
  display: list-item;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td,
caption {
  font-weight: normal;
  vertical-align: top;
  text-align: left;
}

q {
  quotes: none;
}

q:before,
q:after {
  content: "";
  content: none;
}

sub,
sup,
small {
  font-size: 75%;
}

sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

svg {
  overflow: hidden;
}

pre,
code {
  font-family: "DejaVu Sans Mono", Monaco, Consolas, monospace;
}

hr {
  border: 0 #cccccc solid;
  border-top-width: 1px;
  clear: both;
  height: 0;
}

h1 {
/*  font-size: 1.5625em*/
}

h2 {
/*  font-size: 1.4375em*/
}

h3 {
/*  font-size: 1.3125em;*/
}

h4 {
  font-size: 1.1875em;
}

h5 {
  font-size: 1em;
}

h6 {
  font-size: 0.875em;
}

ol {
  list-style: decimal;
}

ul {
  list-style: disc;
}

li {
  margin-left: 30px;
}

p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset,
figure {
  margin-bottom: 20px;
}

body {
  text-align: center;
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.grid-container {
  padding-bottom: 20px;
  text-align:left; 
}

.grid-container > hr {
  margin-left: 10px;
  margin-right: 10px;
}

div[class*="push-"] section {
  background: #ddeecc;
}

div[class*="pull-"] section {
  background: #ffccdd;
}

.dynamic-px-width {
  display: block;
}     
   
/* bfl */
        
@font-face {
    font-family: 'StaticRegular';
    src: url('../fonts/static.eot');
    src: url('../fonts/static.eot') format('embedded-opentype'),
         url('../fonts/static.woff') format('woff'),
         url('../fonts/static.ttf') format('truetype'),
         url('../fonts/static.svg#StaticRegular') format('svg');
}

a,
div#bfl_experience_a h1,
div#bfl_experience_b h1, 
dt,
div#bfl_contact h3{
	color: rgb(0,169,223);
}

    
body{
 /* 	background: rgb(57,72,109);*/
	color: rgb(255,255,255);
  	font-family:'StaticRegular', "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
	line-height:1.5em;
	cursor:default;
}
div.bfl_slide{
	height:100%;
}     

div#bfl_index div.grid-100{
	position:absolute; 
	top:50%; 
	height:20em; 
	margin-top:-10em; /* negative half of the height */
	z-index:3;       
}      

div#bfl_index div.grid-50{
	padding-top:5em;
}

div#bfl_index div.grid-20{
	text-align:right;
}

div#bfl_index div.grid-20,
div#bfl_index div.grid-50{
}

div#bfl_quote{
	background:rgb(183,182,185);  
	text-transform:uppercase;
}     
div#bfl_quote *{
	color:rgb(255,255,255);
}                   
div#bfl_quote div.grid-65{
	position:absolute; 
	top:150%; 
	height:20em; /*320px */ 
	margin-top:-10em; /* negative half of the height */	
}

div#bfl_quote h1{       
	line-height:1.7em;
	 text-indent: -0.5em ;
	letter-spacing:0.04em;
}    

div#bfl_experience_a,
div#bfl_experience_b{
	background:rgb(245,245,245);
	color:rgb(102,102,102);
}  
div#bfl_experience_a .grid-85,
div#bfl_experience_b .grid-85{
	padding-top:4.5em;
}          

div#bfl_experience_a li,
div#bfl_experience_b li{
	line-height:1.75em;
}       

div#bfl_experience_a ul,
div#bfl_experience_b ul {
    display: table;
	margin-bottom:3em;
}

div#bfl_experience_a li,
div#bfl_experience_b li {
    display: table-row;
}

div#bfl_experience_a li::before,
div#bfl_experience_b li::before {
    content: "›";
    display: table-cell; 
	padding-right:12px;
    text-align: right;
}
                
div#bfl_contact .grid-100.grid-parent{
	position:absolute; 
	top:450%; 
	height:30em; 
	margin-top:-15em; /* negative half of the height */   
/*	background:rgba(255,255,255,0.5);*/
}
div#bfl_contact h1{
	margin-bottom:2.5em;
}

div#bfl_contact .grid-20{
	text-align:right;  
	margin-bottom:6em;
}                   
div#bfl_contact .grid-40{
	font-size:1.25em;
	line-height:1.5em;
}
div#bfl_contact img{
	height:220px;
}
           

p{padding-left:1.5em}    

dt{
	float:left;
	width:1.5em;
}

                      
ul li{
	list-style:none;
	margin:0;
}
ul li:before
{
    content: '>';
    margin: 0 1em 0 0;    /* any design */
}

h1{          
	line-height:1em;
	margin:0 0 .25em 0;
}           

h2{                  
	line-height:1em;
	margin:0 0 1.25em 0;

	color: rgb(0,169,223);
}
     
h3{
	
}

img#arrow_up{
	position:fixed;
	top:24px; 
	opacity:0;
}

img#arrow_down{
	position:fixed;
	bottom:24px; 
	opacity:0;
}

.bfl_cogwheel{
	z-index:2;
	-webkit-animation:spin 10s linear infinite;
    -moz-animation:spin 10s linear infinite;
    animation:spin 10s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
    
.bfl_cogwheel_2{   
	z-index:2;
	position:relative;
	-webkit-animation:spintwo 10s linear infinite;
    -moz-animation:spintwo 10s linear infinite;
    animation:spintwo 10s linear infinite;
}
@-moz-keyframes spintwo { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spintwo { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spintwo { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }