@charset "UTF-8";

body
{
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    line-height: 25px;
    
    min-width: 1000px;
}

h1, h2
{
    margin: 0;
}

h2
{
    font-weight: normal;
    font-size: 48px;
    line-height: 48px;
    
    margin-bottom: 48px;
}

h3
{
	font-weight: normal;
    font-size: 40px;
    line-height: 40px;
    
    margin-bottom: 20px;

}

h3.fundamentals
{
	font-weight: normal;
    font-size: 40px;
    line-height: 40px;
    
    margin-bottom: 20px;
    margin-left: 180px;

}

a
{
    color: #fefefe;
    text-decoration: none;
    outline:none;
}

a:hover
{
    text-decoration: underline;
	color:#333;
}

hr
{
    height: 0;
    line-height: 0;
    border-top: 1px #19091a solid;
    border-right: none;
    border-bottom: 1px #6a546a solid;
    border-bottom: 1px rgba(255, 255, 255, 0.3) solid;
    border-left: none;
    margin: 20px 0;
}

section
{
    display: block;
}

.slide
{
    position: relative;
    
    height: 1100px;
    
    overflow: hidden;
}

.slide-about
{
    position: relative;
    
    //min-height: 1500px;
    height: auto;
    overflow: hidden;
}

.slide-people
{
    position: relative;
    
    height: auto;
    
    overflow: hidden;
}

.slide-bg
{
    height: 100%;
}

.slide-body
{
    z-index: 99;
    
    width: 25%;
    
    position: absolute;
    left: 12.5%;
    top: 128px;
}

.slide-body-introtitel
{
    z-index: 99;
    
    width: 100%;
    
    position: absolute;
    left: 12.5%;
    top: 230px;
}

.slide-body-intro
{
    z-index: 99;
    
    width: 25%;
    
    position: absolute;
    left: 12.5%;
    top: 300px;
}

.slide-body-services
{
    z-index: 99;
    
    width: 25%;
    
    position: relative;
    height: auto;
    left: 62%;
    top: 128px;
    margin-bottom: 250px;
    color: #fefefe;
}

.slide-body-people
{
    z-index: 99;
    
    width: 25%;
    
    position: relative;
    left: 62%;
    top: 128px;
    height: auto;
    //padding-bottom: 300px;
}

.slide-body-right-strategie
{
    z-index: 100;
    
    width: 55%;
    
    position: absolute;
    left: 42%;
    top: 225px;
}

.slide-body-right-planning
{
    z-index: 100;
    
    width: 55%;
    
    position: absolute;
    left: 42%;
    top: 540px;
}

.slide-body-right-activatie
{
    z-index: 100;
    
    width: 55%;
    
    position: absolute;
    left: 42%;
    top: 820px;
}

.slide-body-right-checkup
{
    z-index: 100;
    
    width: 55%;
    
    position: absolute;
    left: 42%;
    top: 1350px;
}

.slide-body-right-financials
{
    z-index: 111;
    
    width: 55%;
    
    position: absolute;
    left: 42%;
    top: 1080px;
}

.slide-body-people-strategie
{
    z-index: 99;
    
    width: 25%;
    
    position: absolute;
    right: 12.5%;
    top: 880px;
}

.slide-body-people-implementatie
{
    z-index: 99;
    
    width: 25%;
    
    position: absolute;
    right: 12.5%;
    top: 1300px;
}

.slide-body-people-activatie
{
    z-index: 99;
    
    width: 25%;
    
    position: absolute;
    right: 12.5%;
    top: 1815px;
}

.slide-body-people-personal
{
    z-index: 99;
    
    width: 25%;
    
    position: absolute;
    right: 12.5%;
    top: 2170px;
}

.slide-body-about
{
    z-index: 99;
    
    width: 30%;
    min-width: 250px;
    
    position: relative;
    height: auto;
    left: 12.5%;
    top: 128px;
    margin-bottom: 250px;
    hyphens: auto;
}

.kaart-body
{
    z-index: 99;
    
    width: 25%;
    
    position: absolute;
    left: 12.5%;
    top: 250px;
}

.element
{
    width: 100%;
    height: 100%;
    
    position: absolute;
    top: 0;
    left: 0;
}

.button
{
    margin-top: 30px;
}

.button a
{
    height: 40px;
    line-height: 40px;
    
    display: inline-block;
    
    font-size: 20px;
    
    padding: 0 35px;
    
    background: #999;
    background: rgba(0, 0, 0, 0.3);
    
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button a:hover
{
    background: #888;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    text-decoration: none;
}

#welcome,
body.work
{
    background: #FFF;
    //background: rgb(33, 7, 34) -moz-radial-gradient(center top, circle farthest-side, rgb(64, 38, 65) 0%, rgb(33, 7, 34) 100%) no-repeat;
    //background: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 1000, from(rgb(64, 38, 65)), to(rgb(33, 7, 34)));
    
    color: #fefefe;
    
    overflow: visible;
    z-index:10;
}

#welcome,
#contact
{
    overflow: hidden;
    z-index: 14;
}

#welcome #welcome-bg,
.work article
{
	background-attachment: scroll;
	background-repeat: repeat;
	z-index:18;
}

#welcome #welcome-bg
{
	position: absolute;
	width: 500px;
	top: 295px;
	left: 50%;
	background:url(../images/woordenwolk.jpg);
	background-repeat:no-repeat;
	//background-position: 0% 0%;
	padding-top: 300px;
	padding-left: 60px;
	z-index:300;
}

#welcome #welcome-bg p
{
	font-family: "Droid Sans", sans-serif;
	font-size: 40px;
	color: #999;
	//text-shadow: 0px 2px 1px #525252;	
	
}

#welcome #welcome-body
{
	font-size: 36px;
    line-height: 36px;
	width: 25%;
	z-index: 19;
}

#welcome h2
{
	font-size: 48px;
	color:#999;
	font-weight:400;
	//text-shadow: 1px 1px white, -1px -1px #525252;
}

#welcome h2 .word1
{
	font-size: 48px;
	color:#6a6a6a;
	font-weight:600;
	//text-shadow: 1px 1px white, -1px -1px #525252;
}

.work header
{
    padding-bottom: 50px;
    
    font-size: 18px;
}

#welcome p
{
	margin: 20px 0;
	color:#999;
}

#welcome .slide-body
{
    z-index: 99;
    
    width: 25%;
    
    position: absolute;
    left: 12.5%;
    top: 225px;
}

#welcome #woordenwolk
{
    display:inline;
	position:absolute;
	top: 80px;
	left: 450px;
	float:right;
	width: 75%;
	z-index:1;
}

#welcome #welcome-instructions
{
    text-align: center;
    text-transform: uppercase;
    color: grey;
    position: absolute;
    bottom: 70px;
    
    width: 100%;
    
    margin: 0;
}

#welcome #scrollpijl
{
    text-align: center;
    text-transform: uppercase;
    color: grey;
    position: absolute;
    bottom: 40px;
    height:35px;
    width: 100%; 
    margin: 0;
    
   -webkit-animation-name: bounce;
   -webkit-animation-duration: 0.45s;
   -webkit-animation-iteration-count: 10;
   -webkit-animation-direction:alternate;
   
   -moz-animation-name: bounce;
   -moz-animation-duration: 0.45s;
   -moz-animation-iteration-count: 10;
   -moz-animation-direction:alternate;
   
}


@-webkit-keyframes bounce {
   from {
      margin-bottom: 0px;
   }
   to {
      margin-bottom: 30px;
   }
}

@-moz-keyframes bounce {
   from {
      margin-bottom: 0px;
   }
   to {
      margin-bottom: 30px;
   }
}

nav
{
	position: fixed;
	top: 20px;
	right: 100px;
	color: #CCC;
	z-index: 100;
}

nav ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li
{
    display: inline-block;
}

nav ul li a
{
    text-decoration: none;
    
    padding: 0 25px;
    
    display: block;
}

#welcome-bottom
{
    height: 9px;
    top: 0;
    left: 0;
    position: absolute;
    
    width: 100%;
    
    background: url("images/patterns/welcome-bottom.png") repeat-x -46px 0px;
    
    z-index: 99;
}

#fundamentals
{
    color: #dce0df;
    
    background: #CCCCCC;
    background: -moz-radial-gradient(50% 100%, circle farthest-side, rgba(48, 135, 166, 0.4) 0%, rgba(255, 255, 255, 0) 100%), -moz-radial-gradient(center 45deg, circle closest-side, rgb(48, 135, 166) 0%, rgb(32, 55, 94) 100%) 0 0 no-repeat;
    background: -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 1250, from(rgba(204, 204, 204, 0.4)), to(rgba(255, 255, 255, 0))), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(255, 255, 255)), to(rgb(204, 204, 204))) 0 0 no-repeat;
    z-index: 6;
}

#fundamentals h2
{
	color: #666;
	text-shadow: 0px 1px 1px #FFF;
	width: 400px;;
}


#fundamentals h2 .word1
{
	color: #333;
	text-shadow: 0px 1px 1px #FFF;
	font-weight:600;
}	

#fundamentals h3
{
	color: #666;
	text-shadow: 0px 1px 1px #FFF;
}

#fundamentals h3 .word3
{
	color: #333;
	text-shadow: 0px 1px 1px #FFF;
	font-weight: 600;
}

#fundamentals p
{
	color: #FFF;
	//text-shadow: 0px 1px 1px #FFF;
}

#fundamentals p.right
{
	color: #808080;
	text-shadow: 0px 1px 1px #FFF;
	margin-left: 180px;
}

#fundamentals #fundamentals-bg
{
    background: url(../images/dots.png) repeat fixed;
}

#fundamentals #fundamentals-element-strategie
{
    background: url(../images/button-strategie.png) no-repeat;
    background-position-y: 35px;
    display: block;
}

#fundamentals #fundamentals-element-planning
{
    background: url(../images/button-p5.png) no-repeat;
    background-position-y: 35px;
    display: block;
}

#fundamentals #fundamentals-element-activatie
{
    background: url(../images/button-activatie.png) no-repeat;
    background-position-y: 35px;
    display: block;
}

#fundamentals #fundamentals-element-checkup
{
    background: url(../images/button-checkup.png) no-repeat;
    background-position-y: 35px;
    display: block;
}

#fundamentals #fundamentals-element-financials
{
    background: url(../images/button-financials.png) no-repeat;
    background-position-y: 35px;
    display: block;
    min-height: 200px;
}

#fundamentals #fundamentals-element-phone
{
    background: url("images/layers/deals-phone.png") no-repeat scroll 62% 110px transparent;
}

#fundamentals #fundamentals-element-pins-front1
{
    background: url("images/layers/deals-pins-front1.png") no-repeat scroll 62% 570px transparent;
}

#fundamentals #fundamentals-element-pins-front2
{
    background: url("images/layers/deals-pins-front2.png") no-repeat scroll 62% 570px transparent;
}

#fundamentals #fundamentals-element-pins-back
{
    background: url("images/layers/deals-pins-back.png") no-repeat scroll 62% 364px transparent;
}

#fundamentals .element
{
    left: 8%;
    margin-left: 230px;
}

.slide-border
{
    -moz-box-shadow: 0 8px 8px #000;
    
    height: 1px;
    width: 100%;
    
    position: absolute;
    left: 0;
    top: -8px;
    
    z-index: 99;
}

#works
{
    background: #4f4f4f;
    //background: #4f4f4f -moz-radial-gradient(center 45deg, circle closest-side, rgba(241, 211, 211, 0.58) 0%, rgba(244, 166, 169, 0.58) 100%);
    //background: #4f4f4f -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgba(241, 211, 211, 0.58)), to(rgba(244, 166, 169, 0.58)));
    //color: #fefefe;
}

#works #works-body
{
	position: fixed;
	z-index: 0;
}

#works h2
{
	color: #e5e5e5;
	text-shadow: 0px 3px 5px #292929;
	font-weight: 600;
}

#works p
{
	color: #e5e5e5;
	text-shadow: 0px 3px 5px #292929;
}

#works #works-bg
{
    background: url(../images/stof1.png) repeat fixed;
    -webkit-mask-image: -webkit-gradient(radial, 50% 30%, 30, 50% 70%, 900, from(#fff), to(rgba(0,0,0,0)));
    z-index:;
}

#works #works-element-hand-wrapper
{
    height: 738px;
    top: 175px;
    
    background: url("images/layers/things-hole.png") no-repeat scroll 88% bottom transparent;
}

#works #works-element-hand
{
    top: auto;
    margin-bottom: 34px;
    bottom: 0;
    height: 738px;
    background: url("images/layers/things-hand.png") no-repeat scroll 88% 0  transparent;
}

#works #works-element-shadow
{
    background: url("images/layers/things-shadow.png") no-repeat scroll 88% bottom transparent;
    bottom: 3px;
    top: auto;
}

#works #works-element-card1
{
    background: url("images/layers/things-card1.png") no-repeat scroll 88% 130px transparent;
}

#works #works-element-card2
{
    background: url("images/layers/things-card2.png") no-repeat scroll 88% 224px transparent;
}

#services
{
    background: #981b0f;
    background: -moz-radial-gradient(center 45deg, circle closest-side, rgb(189, 82, 82) 0%, rgb(152, 27, 15) 100%);
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(189, 82, 82)), to(rgb(152, 27, 15)));
    z-index: 17;
    height: auto;
    //position: relative;
}

#services h2
{
	color: #e5e5e5;
	text-shadow: 0px 3px 5px #292929;
	font-weight: 400;
}

#services h3
{
	font-size: 30px;
	color: #e5e5e5;
	text-shadow: 0px 2px 2px #292929;
	font-weight: 600;
}

#services #services-bg
{
    background: url(../images/papier_ruis.png) repeat;
}

#services .slide-body
{
    left: auto;
    right: 12.5%;
    top: 240px;
    height: auto;
    
    color: #fefefe;
}

#services #services-front
{
	background: url(../images/services-front.png) no-repeat;
	z-index: 200;
    width: 55%;
    height: 1700px;
    position: absolute;
    left: 12.5%;
    top: 13400px;
}

#services #services-middle
{
	background: url(../images/services-middle.png) no-repeat;
	z-index: 199;
    width: 55%;
    height: 1700px;
    position: absolute;
    left: 12.5%;
    top: 10000px;
}

#services #services-back
{
	background: url(../images/services-back.png) no-repeat;
	z-index: 198;
    width: 55%;
    height: 1700px;
	position: absolute;
    left: 12.5%;
    top: 8000px;
}

#services #services-element-slice1
{
    
    background: url("images/layers/nomics-slice1.png") no-repeat scroll 26% 210px transparent;
}

#services #services-element-slice2
{
    background: url("images/layers/nomics-slice2.png") no-repeat scroll 26% 210px transparent;
}

#services #services-element-slice3
{
    background: url("images/layers/nomics-slice3.png") no-repeat scroll 26% 210px transparent;
}

#services #services-element-shadow
{
    background: url("images/layers/nomics-shadow.png") no-repeat scroll 26% 210px transparent;
    -moz-transform-origin: 35% 50%;
}

#people
{
    background: #981b0f;
    background: -moz-radial-gradient(center 45deg, circle closest-side, rgb(189, 82, 82) 0%, rgb(152, 27, 15) 100%);
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(189, 82, 82)), to(rgb(152, 27, 15)));
    z-index: 5;
}

#people #people-image
{
	background: url(../images/people_plaatje.png) no-repeat;
	z-index: 200;
    width: 55%;
    height: 2700px;
    position: absolute;
    left: 12.5%;
    top: 0px;
}

#people #poppetjes
{
	background: url(../images/poppetjes.png) no-repeat;
	z-index: 201;
    width:55%;
    height: 126px;
    position: absolute;
    left: 12.5%;
    top: 250px;
}


#people #people-body h2
{
	color: #4f0c06;
	text-shadow: 0px 1px 1px #d3564a;
}		


#people #people-body h2 .word3
{
	color: #3d0a05;
	text-shadow: 0px 1px 1px #d3564a;
	font-weight:600;
}

#people #people-body h3
{
	color: #4f0c06;
	text-shadow: 0px 1px 1px #d3564a;
}	

#people #people-bg
{
    background: url(../images/streep_diagonaal.png) repeat fixed;
}

#people .slide-body
{
    left: auto;
    right: 12.5%;
    top: 240px;
}	

#people p
{
	color: #3d0a05;
	//text-shadow: 0px 1px 0px #d3564a;
}

#people p.people
{
	color: #4f0c06;
	//text-shadow: 0px 0px 1px #d3564a;
}

#people .button
{
    text-shadow: none;
}

#people .button a:hover
{
    background: rgba(0, 0, 0, 0.5);
}

#people #people-element-ipad-v,
#people #people-element-ipad-h
{
    width: 725px;
    left: 30%;
    margin-left: -400px;
}

#people #people-element-ipad-v
{
    height: 726px;
    top: 120px;
    background: url("images/layers/standard-ipad-v.png") no-repeat scroll 0 0 transparent;
}

#people #people-element-ipad-h
{
    height: 572px;
    top: 196px;
    background: url("images/layers/standard-ipad-h.png") no-repeat scroll 0 0 transparent;
    
    display: none;
}


#about
{
    background: #FFF;
    //background: -moz-radial-gradient(center center, circle farthest-side, #3c3c3c 0%, #181818 100%);
    //background: -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 1000, from(#3c3c3c), to(#181818));
    
    //color: #fefefe;
    
    overflow: hidden;
    height: auto;
    //min-height: 2550px;;
    z-index: 201;
}

#about-patricia-foto
{
    background: url(../images/patricia.jpg) fixed 100% 100% no-repeat;
    margin-left: 100px;
}

#about #about-body h2
{
	color: #000;
	font-weight: 600;
	//text-shadow: 0px 1px 1px #d3564a;
}

#about #about-body h3
{
	color: #000;
	font-size: 30px;
	font-weight: 400;
	//text-shadow: 0px 1px 1px #d3564a;
}		

#about #about-body p
{
	color: #5e5e5e;
	//text-shadow: 0px 1px 1px #d3564a;
	margin-bottom: 30px;
}

#about .button
{
    text-shadow: none;
}

#about .button a:hover
{
    background: rgba(0, 0, 0, 0.5);
}

#about .slide-bg
{
    background: url("images/patterns/other.png") repeat;
}

#about-element-sparkles
{
    background: url("images/patterns/other-sparkles.png") fixed 50% 456.3px repeat;
}

#about-element-o
{
    background: url("images/layers/other-o.png") scroll 75% 22% no-repeat;
}

#about-element-o-sparkle1
{
    background: url("images/layers/other-o-sparkle1.png") scroll 75% 22% no-repeat;
    opacity: 0.29;
}

#about-element-o-sparkle2
{
    background: url("images/layers/other-o-sparkle2.png") scroll 75% 22% no-repeat;
    opacity: 0.29;
}

#about-element-o-highlight
{
    background: url("images/layers/other-o-highlight.png") scroll 75% 22% no-repeat;
    opacity: 0.29;
}


#contact
{
    background: #d9d9d9;
    //background: -moz-radial-gradient(center 45deg, circle closest-side, rgb(189, 82, 82) 0%, rgb(152, 27, 15) 100%);
    //background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(189, 82, 82)), to(rgb(152, 27, 15)));
}

#contact #details
{
	z-index: 100
    width: 55%;
    position: absolute;
    left: 42%;
    top: 250px;
    display: inline;
}

#contact #details ul
{
	position: relative;
}

#contact #details ul li
{
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
	height: 43px;
	width: 43px;
	padding-left: 70px;
	overflow: visible;
	display: block;
}

#contact #details ul li a
{
	height: 43px;
}

.icoon_emaila{background: url(../images/contact-sprite.png) 0 0;}
.icoon_tela{left: 3px; top: 60px; width: 43px;}
.icoon_mobiela{left: 3px; top: 120px; width: 43px;}
.icoon_huisa{left: 3px; top: 180px; width: 43px;}
.icoon_linkedina{left: 3px; top: 240px; width: 43px;}

.icoon_emaila{}
.icoon_tela{}
.icoon_mobiela{}
.icoon_huisa{}
.icoon_linkedina{}

#contact #details a
{
	color: #b4b4b4;
	text-decoration: underline;
}

#contact #details a:hover
{
	color: #000;
	text-decoration: underline;
}

#contact #details p
{
	color: #b4b4b4;
	margin-left: 120px;
}


#contact #details #item-adres
{
	height: 100px;
	margin-left: 120px;
	padding-top: 0px;
	margin-top: -40px;
	background: url(../images/huis.png) no-repeat;
	background-position-y: 2px;
}

#contact #details #item-telefoon
{
	height: 100px;
	margin-left: 120px;
	padding-top: 1px;
	margin-top: -30px;
	background: url(../images/telefoon.png) no-repeat;
	background-position-y: 5px;
}

#contact #details #item-mobiel
{
	height: 100px;
	margin-left: 120px;
	padding-top: 1px;
	margin-top: -30px;
	background: url(../images/mobiel.png) no-repeat;
	background-position-y: 10px;
}

#contact #details #item-email
{
	height: 100px;
	margin-left: 120px;
	padding-top: 1px;
	background: url(../images/email.png) no-repeat;
	background-position-y: 5px;
}

#contact #details #item-linkedin
{
	height: 100px;
	margin-left: 120px;
	padding-top: 1px;
	margin-top: -30px;
	background: url(../images/linkedin.png) no-repeat;
	background-position-y: 10px;
}

#contact #details #item-facebook
{
	height: 100px;
	margin-left: 120px;
	padding-top: 1px;
	margin-top: -30px;
	background: url(../images/facebook.png) no-repeat;
	background-position-y: 5px;
}

#contact .button
{
    text-shadow: none;
}

#contact .button a:hover
{
    background: rgba(0, 0, 0, 0.5);
    text-decoration: none;
}

#contact #contact-body h2
{
	color: #b4b4b4;
	text-shadow: 0px 2px 1px #fff;
}		


#contact #contact-body h2 .word1
{
	color: #525252;
	text-shadow: 0px 2px 1px #fff;
	font-weight:600;
}

#contact #contact-body h3
{
	font-size: 35px;
	color: #b4b4b4;
	text-shadow: 0px 2px 1px #fff;
	margin-top: -30px;
}	

#contact #kaart-bg
{;
    //background:url(../images/kaart.png) no-repeat;
    //background-position: 20% 35%;
}

#contact #contact-bg
{;
    background: url(../images/beigepapier.png)repeat;
}

#contact p
{
	color: #fbdbdb;
	//text-shadow: 0px 1px 0px #d3564a;
}

#contact_succes_popup
{
	display: none;
	font-size: 20px;
	text-align: center;
	color: grey;
	width: 400px;
	height: 100px;
	padding: 30px 20px 20px 30px;
	background-color: white;
	
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#contact_succes_popup a
{
	color: grey;
	text-decoration: none;
}

#contact_succes_popup p
{
	
}

.bClose {
cursor: pointer;
font-weight: bold;
position: absolute;
right: 15px;
text-decoration: none;
top: 10px;
}

.error
{
	font-size: 14px;
	color: red;
	
}

input
{
	//-webkit-appearance: none;
	font-family: "Open Sans", sans-serif;
	margin-top: 15px;
	font-size: 16px;
	padding: 10px;
	outline: none;
	
	
	background: rgb(242,242,242); /* Old browsers */
background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(255,255,255,1) 25%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,1)), color-stop(25%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 25%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 25%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 25%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 25%); /* W3C */
	 
    -webkit-border-radius: 5px;  
    -moz-border-radius: 5px;  
    border-radius: 5px;  
    //border: 1px solid #717171;  
    -webkit-box-shadow: 0px 2px 0px #fff;  
    -moz-box-shadow: 1px 1px 0px #fff;  
    box-shadow:  0px 1px 0px #fff;
}

input.text
{
font-weight: bold;
color: #d9d9d9;
width: 100%;
}

input.button
{
	height: 40px;
    line-height: 40px;
    
    display: inline-block;
    border: none;
    font-size: 20px;
    color: white;
    padding: 0 35px;
    
    background: #999;
    background: rgba(0, 0, 0, 0.3);
    
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    
    -moz-box-shadow: 0 2px 0 #888;
    -webkit-box-shadow: 0 2px 0 #888;
    box-shadow: 0 2px 0 #888;
}

input.button:hover
{
	background: #909090;
    background: rgba(0, 0, 0, 0.4);
    text-decoration: none;
    
    -moz-box-shadow: 0 2px 0 #888;
    -webkit-box-shadow: 0 2px 0 #888;
    box-shadow: 0 2px 0 #888;
}

input.button:active
{
	margin-top: 32px;
	background: #888;
    background: rgba(0, 0, 0, 0.6);
    text-decoration: none;
    
    -moz-box-shadow: 0 -2px 0 #999;
    -webkit-box-shadow: 0 -2px 0 #999;
    box-shadow: 0 -2px 0 #999;
}

input:focus
{
	-webkit-box-shadow: 0px 0px 5px #007eff;  
    -moz-box-shadow: 0px 0px 5px #007eff;  
    box-shadow: 0px 0px 5px #007eff;  
    /* transition */
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
}

textarea
{
	-webkit-appearance: textfield;
	font-family: "Open Sans", sans-serif;
	font-weight: bold;
	color: #d9d9d9;
	margin-top: 5px;
	width: 100%;
	font-size: 16px;
	padding: 10px;
	outline: none;
	background: rgb(242,242,242); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(255,255,255,1) 25%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,1)), color-stop(25%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 25%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 25%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 25%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(242,242,242,1) 0%,rgba(255,255,255,1) 25%); /* W3C */
	 
    -webkit-border-radius: 5px;  
    -moz-border-radius: 5px;  
    border-radius: 5px;  
    //border: 2px solid #a8a8a8;  
    -webkit-box-shadow: 0px 1px 0px #fff;  
    -moz-box-shadow: 0px 1px 0px #fff;  
    box-shadow:  0px 1px 0px #fff;
}

textarea:focus
{
	-webkit-box-shadow: 0px 0px 6px #007eff;  
    -moz-box-shadow: 0px 0px 6px #007eff;  
    box-shadow: 0px 0px 6px #007eff;  
    
    /* transition */
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    	
}

#contact .button
{
    text-shadow: none;
}

#contact .button a:hover
{
    background: rgba(0, 0, 0, 0.5);
}


#solutions .slide-body
{
    left: auto;
    right: 12.5%;
    top: 240px;
    
    color: #fefefe;
}

#solutions #solutions-bg
{
    background: #2acaff;
    background: url("/images/patterns/solutions.png"), -moz-radial-gradient(center center, circle farthest-side, #7edaf7 0%, #2acaff 100%);
    background: url("/images/patterns/solutions.png"), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 1000, from(#7edaf7), to(#2acaff));
}

#solutions-element-pad
{
    background: url("/images/layers/solutions-pad.png") scroll 0 0 no-repeat;
    width: 476px;
    height: 552px;
    left: 25%;
    top: 50%;
    margin-top: -276px;
    margin-left: -230px;
}

#solutions-element-pencil
{
    background: url("/images/layers/solutions-pencil.png") scroll 0 0 no-repeat;
    left: -91px;
}

#solutions-element-line
{
    width: 213px;
    height: 29px;
    left: 85px;
    top: 270px;
    
    overflow: hidden;
}

#solutions-element-highlight
{
    top: 1px;
    width: 0px;
    height: 28px;
    background: #ffa800;
    overflow: visible;
}

#solutions-element-end
{
    width: 15px;
    height: 29px;
    background: url("/images/layers/solutions-highlight.png") 0px 0 no-repeat;
    top: 0px;
    right: -15px;
    left: auto;
}

#ocean
{
    color: white;
}

#ocean #ocean-bg
{
    background: #182242;
    background: url("/images/patterns/ocean.png") fixed, -moz-radial-gradient(center center, circle farthest-side, #178b6b 0%, #182242 100%) fixed;
    background: url("/images/patterns/ocean.png") fixed, -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 1000, from(#178b6b), to(#182242)) fixed;
}

#ocean-element-logo
{
    background: url("/images/layers/ocean-logo.png") 75% 25% no-repeat;
    margin-left: 100px;
}

#ocean-element-bubbles1
{
    background: url("/images/layers/ocean-bubbles1.png") 50% 0 repeat-y scroll;
}

#ocean-element-bubbles2
{
    background: url("/images/layers/ocean-bubbles2.png") right 0 repeat-y scroll;
}

.work
{
    font-size: 14px;
    
    min-width: 1000px;
}

.work #logo
{
    margin: 19px 0 0 0;
}

.work h1
{
    font-size: 48px;
    line-height: 48px;
    font-weight: normal;
    
    margin-top: 6px;
}

.work h1
{
    margin-top: 30px;
    margin-bottom: 30px;
}

.work h2
{
    font-size: 21px;
    line-height: 24px;
    
    text-transform: uppercase;
    font-weight: normal;
    
    font-family: "DIN Bold";
    
    margin-bottom: 0;
}

.work h2,
.work p
{
    margin-top: 20px;
}

.work h1,
.work article > hr,
.work section,
.work header,
.work footer,
#welcome header,
#welcome #welcome-body,
#contact #contact-body
{
    width: 90%;
    min-width: 980px;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    z-index:16;
}

#welcome header
{
    background: none;
    top: 30px;
}

#welcome #logo
{
    float: left;
    margin-top: 15px;
}

#welcome header,
#welcome #welcome-body
{
    position: relative;
    left: auto;
}

#welcome #welcome-body
{
    top: 50px;
    z-index: 14;
}

.work section,
.work header,
.work footer
{
    margin: 50px auto 100px;
    
    display: block;
    overflow: hidden;
}

.work header
{
    background: none;
    margin: 75px auto 0;
    padding-bottom: 0;
}

.work header div
{
    width: auto;
}

.work footer section
{
    width: auto;
    min-width: 0;
    margin: 0;
}

.work article
{
    overflow: hidden;
    display: block;
    
    padding: 0px 1%;
}

.work section
{
    position: relative;
}

.work section .work-brief
{
    width: 25%;
    min-width: 254px;
    float: left;
}

.work section .work-showcase
{
    width: 68%;
    min-width: 708px;
    float: right;
}

.work-showcase p
{
    text-align: right;
    margin: 20px 0 40px auto;
}

.work-showcase p:last-child
{
    margin-bottom: 0;
}

.image-tall,
.image-grande
{
    background: #251027;
    background: rgba(0, 0, 0, 0.2);
    
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

.image-tall img,
.image-grande img,
.image-venti img
{
    display: block;
}

.image-tall,
.image-grande
{
    padding: 23px;
    width: 662px;
}

.image-tall img,
.image-grande img
{
    width: 662px;
}

.image-venti img
{
    width: 708px;
    
    margin: 0;
}

#standard-mobile-tablet
{
    /* correct for table glow effect */
    margin-left: -17px;
    margin-bottom: -28px;
    margin-right: -33px;
}

#standard-mobile-phone
{
    margin-right: 205px;
}

#about header
{
    background-image: url("images/patterns/welcome-fine.png"), url("images/patterns/welcome.png");
    background-position: 1px top;
    background-color: #210722;
    height: 72px;
}

#about #welcome-bottom
{
    background-position: -45px top;
}

#about .slide
{
    height: auto;
    min-height: 1100px;
    color: white;
}

#nice
{
    background: url("images/backgrounds/office.jpg") center center scroll repeat;
    background-size: cover;
}

#nice #nice-body
{
    position: absolute;
    left: 20%;
    margin: 0 0 0 -101px;
    bottom: 30%;
    
    background: rgba(0, 0, 0, 0.3);
    padding: 25px;
    width: 564px;
}

#nice #nice-body h1
{
    font-size: 85px;
    font-family: "DIN Bold";
    line-height: 75px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

#team
{
    min-height: 700px !important;
    background: #6e1b0e;

    background: #851818;
    background: url("images/patterns/team.png"), #851818 -moz-radial-gradient(center 45deg, circle closest-side, #d1560d 0%, #851818 100%);
    background: url("images/patterns/team.png"), #851818 -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#d1560d), to(#851818));
}


#team #team-body,
#other #other-body
{
    padding: 50px 5%;
    margin: 0 -51px;
}

.blurb
{
    width: 630px;
    margin: 17px;
}

.thumb-list
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.thumb-list li
{
    /*border: 9px rgba(0, 0, 0, 0.3) solid;*/
    padding: 9px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    margin: 17px;
    display: inline-block;
    float: left;
    text-align: left;
}

.thumb-list li a
{
    display: block;
    width: 282px;
    height: 155px;
    border-radius: 2px;
    background-position: -20px 0px;
    background-repeat: no-repeat;
    -moz-transition-property: background-position;
    -moz-transition-duration: 0s;
    -moz-transition-timing-function: linear;
    -webkit-transition-property: background-position;
    -webkit-transition-duration: 0s;
    -webkit-transition-timing-function: linear;
    
    position: relative;
    overflow: hidden;
}

.thumb-list h2
{
    margin: -15px 0 10px 0;
}

.thumb-list p
{
    margin: 0;
}

.thumb-list li a:hover
{
    -moz-transition-property: background-position;
    -moz-transition-duration: 1s;
    -moz-transition-timing-function: ease-out;
    -webkit-transition-property: background-position;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: ease-out;
    background-position: 0px -20px;
    text-decoration: none;
}

.thumb-list li#team-maciej a
{
    background-position: 0 0;
}

.thumb-list li#team-maciej a:hover
{
    background-position: 0px -90px;
    -moz-transition-duration: 4s;
    -webkit-transition-duration: 4s;
}

#other-list li a:hover
{
    background-position: -20px 0;
}

#other-list li a
{
    background-position: 0 -20px;
}

.thumb-list li a .overlay
{
    display: none;
    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    
    padding: 5px;
}

.thumb-list li a .overlay span
{
    display: block;
}

.thumb-list li a:hover .overlay
{
    display: block;
}

.thumb-list li a .overlay .content
{
    position: absolute;
    bottom: 15px;
    left: 10px;
    
    font-size: 16px;
    line-height: 22px;
}

.thumb-list .name
{
    font-weight: bold;
    font-size: 18px;
}

#team-brian a
{
    background-image: url("/images/people/brian.jpg");
}

#team-sami a
{
    background-image: url("/images/people/sami.jpg");
}

#team-scott a
{
    background-image: url("/images/people/scott.jpg");
}

#team-ryan-b a
{
    background-image: url("/images/people/ryan-b.jpg");
}

#team-david-s a
{
    background-image: url("/images/people/david-s.jpg");
}

#team-ryan-t a
{
    background-image: url("/images/people/ryan-t.jpg");
}

#team-mark a
{
    background-image: url("/images/people/mark.jpg");
}

#team-adam a
{
    background-image: url("/images/people/adam.jpg");
}

#team-maciej a
{
    background-image: url("/images/people/maciej.jpg");
}

#team-david-n a
{
    background-image: url("/images/people/david-n.jpg");
}

#team-david-b a
{
    background-image: url("/images/people/david-b.jpg");
}

#other-vidyard a
{
    background-image: url("/images/works/vidyard.jpg");
}

#other-sevenl a
{
    background-image: url("/images/works/sevenl.jpg");
}

#other-adbuzz a
{
    background-image: url("/images/works/adbuzz.jpg");
}

#other-digiprop a
{
    background-image: url("/images/works/digprop.jpg");
}

#other-avema a
{
    background-image: url("/images/works/avema.jpg");
}

#other-teambuy a
{
    background-image: url("/images/works/teambuy.jpg");
}

#other-supermarket a
{
    background-image: url("/images/works/supermarket.jpg");
}

#other-dinner a
{
    background-image: url("/images/works/dinner.jpg");
}

#other-collective a
{
    background-image: url("/images/works/urban.jpg");
}

#other-aisle a
{
    background-image: url("/images/works/aisle.jpg");
}

#other-android a
{
    background-image: url("/images/works/android.jpg");
}

#other-notesolution a
{
    background-image: url("/images/works/notesolution.jpg");
}