@import url("../fonts/bebas_neue/bebas_neue.css");
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
@import url("../fonts/icons/style.css");
/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */
	/* fix box-sizing */
	* {
	  -webkit-box-sizing: border-box; /* Android ≤ 2.3, iOS ≤ 4 */
		 -moz-box-sizing: border-box; /* Firefox 1+ */
			  box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */

		*behavior: url(/scripts/boxsizing.htc);
		
	}

	.navigation,
	.mobile_navigation{
		background: black;
		color: white;
		font-weight: bold;
		background: url(../img/noise.png);
		font-family: "Open Sans", helvetica, arial, sans;
		font-size: 0px;
	}
	.navigation a,
	.mobile_navigation a{
		font-size: 20px;
		height: 46px;
		line-height: 33px;
		display: inline-block;
		padding: 10px;
		color: white;
		text-transform: capitalize;
		text-decoration: none;
		font-family: "BebasNeueRegular", helvetica, arial, sans;
		font-weight: normal;
	}
	.navigation a:hover,
	.mobile_navigation a:hover,
	.navigation a.active{
		display: inline-block;
		padding: 10px;
		background: #ffff00;
		color: black;
	}
	.mobile_navigation{
		display: none;
	}
	.backstretch.overlay img{
		
		background: url(../img/dots.png);
	}
	.backstretch.overlay{
		
		background: url(../img/shade.png);
		background-repeat: repeat-x;
		background-position: 50% bottom;
		
	}
	header{
		background: black;
	}
	body {
		background: url(../img/gradient_squares.png);
		font: 1em "Open Sans", helvetica, arial, sans;
	}
	/*
	* slider styles
	*/
	#slider *{
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	#slider{
		position: relative;
		overflow: hidden;
		font-family: "BebasNeueRegular", helvetica, arial, sans;
	}
	#slider .slide>div img{
		height: auto;
		max-width: 90%;
		position: relative;
		display: none;
	}
	#slider .title{
		z-index: 99;
		/* IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

		/* IE 5-7 */
		filter: alpha(opacity=0);

		/* Netscape */
		-moz-opacity: 0;

		/* Safari 1.x */
		-khtml-opacity: 0;

		/* Good browsers */
		opacity: 0;
			
		margin-left: -50px;
		white-space: no-wrap;
	}
	#slider .title h1{
		color: white;
		text-shadow: 0px 2px 5px #000000; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
		-webkit-font-smoothing: antialiased;
		font-weight: bold;
		display: block;
		line-height: 0.8em;
	}
	/*
	* content
	*/
	#ribbles_top{
		height: 5px;
		background: black url(../img/triangle.png);
	}
	.content *{
		-webkit-font-smoothing: antialiased;
	}
	.content .wrapper{
		padding: 10px;
		/*margin-bottom: 40px;*/
		margin-top: 40px;
	}
	.content p{
		margin-bottom: 2em;
		font-family: "Open Sans", helvetica, arial, sans;
	}
	.seperator{
		min-height:1px;
		margin-bottom: 2em;
		padding-bottom: 2em;
		border-bottom: 1px solid #E8E8E8;
	}
	.content h2,h1{
		display:-moz-inline-stack;
		display:inline-block;
		zoom:1;
		*display:inline;
		margin-bottom: 15px;

	}
	.content h2:first-letter,h1:first-letter{
		text-transform: uppercase;
	}
	.content h1{
		font: 3em "BebasNeueRegular", helvetica, arial, sans;
		/*text-align: center;*/
		padding: 10px 10px 10px 0;
		border-bottom: 5px solid #222;
		margin-bottom: 1em;
		word-wrap: break-word;
		word-wrap: hyphenate;
		max-width: 100%;
	}
	.content h2, .bigtext{
		font: 1.5em "BebasNeueRegular", helvetica, arial, sans;
		text-align: left;
		padding: 10px 10px 10px 0;
		margin-bottom: 0.7em;
	}
	
	.content .box{
		/*background: whiteSmoke;*/

		background: #ffffff;
		color: #222;
		/*width: 100%;*/
		font-size: 16pt;
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		-webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .20);
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .20);
		padding-bottom: 10px;

		margin-top: 50px;
	}
	.content .box .wrapper .first{
		padding-left: 3.8%;
	}
	.content .box .wrapper .first.last{
		padding-left: 3.8%;
		padding-right: 3.8%;
	}

	#referenties a img{
		border-radius: 50px;
	}
	#referenties a:hover img{
		border-radius: 0px;
		        transition: all 0.3s linear;
		   -moz-transition: all 0.3s linear; /* Firefox 4 */
		-webkit-transition: all 0.3s linear; /* Safari and Chrome */
		     -o-transition: all 0.3s linear; /* Opera */
	}
	/*
	* footer
	*/
		/*
		* SVG ICONS
		*/
		.icon{
			position: relative;
			top: 6px;
			margin-right: 10px;
			width: 20px;
			display: -moz-inline-stack;
			display: inline-block;
			text-align: center;
			font-size: 1.3em;
		}
	/*
	* CONTACT INFO
	*/
	footer{
		background: url(../img/noise.png);
		color: white;
	}
	footer .ribbles{
		height:5px;
		background: white url(../img/trianglenoise.png) 0 -2px;
	}
	footer a{
		color: white;
		text-decoration: none;
	}
	footer ul,
	.contact-info ul{
		width: 100%;
		margin: 0 auto;
		list-style: none!important;
		text-align: left;
	}
	footer ul li,
	.contact-info ul li{
		padding: 10px;
		line-height: 25px;
		
	}
	footer ul li{
		width: 210px;
	}

	footer ul li i{
		-webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
	     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
	       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
	          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
	}
	footer ul li:hover i{
		color: red;
	}
	footer ul li:hover i.icon-mail{
		color: #ffff00;
	}
	footer ul li:hover i.icon-twitter{
		color: #4099FF;
	}footer ul li:hover i.icon-facebook{
		color: #335795;
	}

	footer a,
	.contact-infoa{
		text-decoration: none;
	}
	footer a:hover,
	.contact-info a:hover{
		text-decoration: underline;
	}
	footer .icon{
		font-size: 1.9em;
	}
	/*
	* mail form
	*/
	.mail-form input,
	.mail-form textarea,
	.mail-form select{
		width: 100%;
		max-width: 100%;
		display: block;
		border: 0;
		padding: 5px;
		color: black;
		border: 1px solid #e8e8e8;
		background: white;
		outline: none;
		resize: none;
		border-radius: 6px;
		height: 47px;
		/* apply a natural box layout model to all elements */
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;*behavior: url(/boxsizing.htc);
	}
	.mail-form textarea{
		height: 200px;
	}
	.mail-form input{
		line-height: 35px;
	}
	img.email_send{
		cursor: pointer;
	}
	.mail-form {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.mail-form li{
		padding: 5px!important;
		list-style: none;
	}
	.mail-form  .result-wrapper{
		display:none;
		text-align: center;
		width: 100%;
	}
	.mail-form .try-again{
		color: black;
		padding-left: 40px;
		text-decoration: none;
		display: none;
	}
	.mail-form .try-again:hover{
		
		text-decoration: underlined;
	}
	
	#footnote{
		margin: 20px auto;
		font-size: 0.8em;
	}
	footer{
		margin-top: 50px;
	}
	footer .wrapper{
		padding: 20px;
	}
	
	.nodesktop{
		display:none;
	}
	/*
	* twitter feed
	*/ 
	#twitter-last-tweet-wrapper{
		margin: 10px 0;
	}
	.box{
		position: relative;
	}
	.imagebox{
		float: right;
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		background-size: cover;
		background-position: center;
		padding: 10px;
		padding-top: 40px;
	}
	.imagebox.office{
		background: url(../img/webelite_office.png);
	}
	.imagebox.map{
		background: url(../img/map.png);
	}
	.imagebox.mail{
		background: #eeeeee url(../img/mail.png) center no-repeat;
	}
	.imagebox.map .content,
	.imagebox.office .content{
		background: rgba(0, 0, 0, .5);
		padding: 10px;
		color: white;
		line-height: 1.2em;
	}
	.imagebox section{
		position: absolute;
		bottom: 0;
		width: 100%;
		padding-right: 20px;
		margin-bottom: 20px;
	}
	.imagebox .button{
		width: 100%;
		background: #ffff00;
		text-align: center;
	}
	.imagebox .button:hover{

		border: 0;
		
	}
	.imagebox .tech-icons{
		font-size: 3.9em;
		text-align: center;
		margin-bottom: 0;
	}
	.imagebox .tech-icons i{
		-webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
	     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
	       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
	          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
	}
	.imagebox .tech-icons i:hover{
		color: #1e8cbe;

	}
	.imagebox .tech-icons i:hover.icon-html5{
		color: #e44d26;
	}
	.imagebox .tech-icons i:hover.icon-css3{
		color: #0070BA;
	}
	.imagebox .tech-icons i:hover.icon-drupal{
		color: #0070BA;
	}
	.content .row{
		padding-bottom: 20px;
	}
/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

	body {
		font-size: 12px;
	}
	.nomobile{
		display: none;
	}
	.nodesktop{
		display: block;
	}
	.contact-info a{
		line-height: 30px;
	}
	.portfolio img{
		width: 50px;
	}
	.content .wrapper{
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.content .box{
		margin-top: 20px;
		margin-left: 10px;
		margin-right: 10px;
	}
	.row>.box{
		padding: 0;
	}

	.imagebox,
	.imagebox section{
		position: relative;
	}
	
}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

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

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/
	body{
		background: url(../img/gradient_squares_@2X.png);
	}
}
/* ==========================================================================
   Helper classes
   ========================================================================== */
.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
.box_shadow {
  -webkit-box-shadow: 0px 3px 17px -5px #000; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
          box-shadow: 0px 3px 17px -5px #000; /* Opera 10.5, IE9+, Firefox 4+, Chrome 6+, iOS 5 */
}
 .absolute>*{
	position: absolute;
	width: 100%;
}
.center{
	text-align: center;
}

.ie_only{
	display: none;
}
.inline-blocks>*,
.inline-block{
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: top;
	zoom: 1;
	*display: inline;
}
.button{
	padding: 15px;
	background: #EEE;
	color: black;
	text-decoration: none;
}
.button:hover{
	border-left: 2px solid #323232;
}
.right{
	text-align: right!important;
}
.button-transparent {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background-color:transparent;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}.button-transparent:active {
	position:relative;
	top:1px;
}
.word-break{
	font-size: 0em;
}

/* Smaller screens */

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

	.content .box{
		/*background: whiteSmoke;*/

		background: #ffffff;
		color: #222;
		/*width: 100%;*/
		font-size: 12pt;
	}
	
}