*{margin: 0; padding:0;}

/* ---------- START NATIVE HTML STUFF ---------- */

body{
  font-family: 'Arial', Helvetica, sans-serif;
  font-size:calc(12px + 0.45vw);	/*1vw = 1% of viewport width*/
  line-height: 1.5em;
  margin:0px;
  padding:0px;
}  
img{
  float: left;
  border: none;
}

p {
	margin-bottom:1em;
}
ul{
	margin-left:10px;
}
li{
	margin-left:30px;
}

.h50 {
   height: 50px;  
}   
a:link, a:visited {
	color: #FFFFFF;
	font-weight: bold;
}
a:hover {
	color: #500000;
	font-weight: bold;
}

/* ---------- END BASIC STYLES ---------- */

.start, .detachering, .entsenden, .hire, .inicio, .contratacion{
  background: url('/img/start.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
}
.tools, .utiles{
  background: url('/img/debugger.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
}
.skills, .habilidades{
  background: url('/img/skills.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
}
.project, .projekt, .proyecto{
  background: url('/img/projecten.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
}
.php{
  background: url('/img/php.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
}
.php-zzp-den-haag{
  background: url('/img/php-zzp-den-haag.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
}
.php-autonomo{
  background: url('/img/madrid.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
}
.bi , .etl{
  background: url('/img/bi.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
}
.php-nordrhein-westfalen-hessen, .php-spain-netherlands-germany{
  background: url('/img/frankfurt-am-main.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
}
.foot{
	font-size:calc(9px + 0.2vw);	/*1vw = 1% of viewport width*/
	letter-spacing: 1px;
	font-family: "courier new", monospace;
	font-weight:normal;
	color:#ffffff;
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	padding: 3px;
	background-color: #5d5f4a;
	text-align: center;
	width: 100%;
}
.foot table{
	width: 100%;
}
.foot tr{
	vertical-align:top;
}
.foot a {
	text-decoration: none;
	cursor: pointer;
	color: #ffffff;	
}


.clear{
	clear:both;
}
.topWrapper{
	width:100%;
	padding:0%;
	position: fixed;
	left:0;
	top:0;
	background-color:#ffffff;
	height:41px;
}
#logo{
	float:left;
	width:100px;
	padding-left:20px;
}
.startText{
   line-height:calc(30px + 0.5vw);
	letter-spacing: 1px;
	margin:20px;
	margin-top:100px;
	margin-left:50px;
	width:60%;
	text-align:left;
	font-size:calc(24px + 0.1vw);	/*1vw = 1% of viewport width*/
	color:#ffffff;	
}
.black{
	color: #000000;
}
.contact{
	text-align:right;
	position:absolute;
	right:20px;
	bottom:50px;		
	font-size:calc(16px + 0.2vw);	/*1vw = 1% of viewport width*/
	font-weight:bold;
	color:#ffffff;
}
.contactOnTop{
	position: fixed;
	top: 60px;
	right: 26px;
	border: 4px solid #9b273c;
	padding:calc(6px + 0.2vw);	/*1vw = 1% of viewport width*/
	background-color:#ffffff;
	font-size:calc(15px + 0.2vw);	/*1vw = 1% of viewport width*/
	font-weight:bold;
	z-index:10;
}
.pageHeadText {
	font-size:20px;
   line-height:1.6em;
	letter-spacing: 1px;
	margin:20px;
	margin-top:100px;
	margin-left:50px;
	width:auto;
	text-align:left;
}
.projectSpecialHead{
	font-size:calc(22px + 0.1vw);	/*1vw = 1% of viewport width*/
	color:#ffffff;
}
.extraLargeFont{
	font-size:260%;
	letter-spacing:5px;
	line-height:calc(40px + 0.5vw);	/*1vw = 1% of viewport width*/
}
.projectType{
	font-weight:bold;
	font-size:calc(14px + 0.3vw);	/*1vw = 1% of viewport width*/
	padding:10px;
	text-align:center;
	margin-bottom:1em;
}
.feature{
	font-size:calc(14px + 0.2vw);
	line-height:1.6em;
}
.benefit{
	font-weight:bold;
	font-size:calc(12px + 0.2vw);	/*1vw = 1% of viewport width*/
	padding:10px;
	text-align:center;
}
/****** menu *******/
.menu {
	float: right;
	font-size:calc(11px + 0.2vw);	/*1vw = 1% of viewport width*/
	letter-spacing: 4px;
	font-family: "courier new", monospace;
	font-weight:normal;
	margin-right:20px;
}
.menu ul {
    list-style-type: none;
    padding: 0;
	 margin: 0;
    overflow: hidden;	 
}
.menu li {
	float: left;
	margin-left: 5px;	
}
.menu li a {
   display: block;
   text-align: center;
	padding: 5px 10px 0px 10px;
   text-decoration:none;
	color:#000000;
}
.menuActive {
	border-bottom:5px solid #9b273c;
}
.flag {
	height:20px;
	margin-top:5px;
}
/****** ready menu *******/

.liBoxes {
	float: left;
}
.liBoxes ul {
   list-style-type: none;
   padding: 0;
	margin: 0;
	margin-bottom:100px;
}

.liBoxes li {
	margin: 40px;	 
	padding:calc(20px + 0.2vw);	/*1vw = 1% of viewport width*/
	background-color:#ffffff;
	width:calc(200px + 0.1vw);	/*1vw = 1% of viewport width*/
	text-align:left;
	display: inline-block;
	vertical-align:top;
}

.center	{text-align:center;}
.right	{text-align: right;}

/* logo reference page */
.refBoxes {
	float: left;
}
.refBoxes ul {
   list-style-type: none;
   padding: 0;
	margin: 0;
   margin-bottom: 100px;
   text-align: center;
}
.refBoxes li {
	margin: 3%;
	padding: 0px;
	width: 20%;
   max-width: 300px;
   min-width: 250px;
	text-align: center;
	display: inline-block;
	vertical-align:bottom;
   clear: both;

}
.refBoxes img {
   width:100%;
   max-width: 300px;
   height: auto;
   margin: 0px;
   margin-bottom: 20px;
   padding: 0px;
   display: block;
}  
.refBoxes p {
  font-family: 'Courier', monospace;
  font-size:1.8em;
  font-weight:bold;
  letter-spacing: 4px;
  color: #ffffff;
  margin: 0px;
  display: block;
  clear: both;
}   


.api{
	font-size:calc(10px + 0.3vw);	/*1vw = 1% of viewport width*/
	font-family: "courier new", monospace;
	font-weight:normal;
	color:#000000;
	width: 100%;
	padding: 1% 2% 1% 2%;
}
.api ul{
	display: flex;       /* Plaatst items naast elkaar */
	flex-wrap: wrap;     /* Springt naar de volgende regel als het vol is */
	gap: 10px;           /* Voegt gemakkelijk ruimte tussen de items toe */
	list-style: none;    /* Verwijdert de standaard opsommingstekens */
	padding: 0;          /* Verwijdert standaard padding */
	margin: 0;           /* Verwijdert standaard margin */
}
.api li {
	border: 2px solid #880000;
	width: 240px;
	margin:10px;
	padding: 10px;
	border-radius: 20px;
}
.api h3 {
	background-color: #dedede;
	font-weight: bold;
	font-size: 1.2 em;
	text-align: center;
	margin: 0px;
}
.explain{
	border: 2px solid #880000;
	width: 900px;
	margin:5px;
	padding: 10px;
	border-radius: 20px;
	font-size: 0.8em;
}

/*page-specific id's etc.*/

#f-1 {width:40%;}
#f-2 {width:12%;}
#f-3 {width:12%;}
#f-4 {width:12%;}
#f-5 {width:12%;}
#f-6 {width:12%;}

#bi-1 {border: 4px solid #2157d1; margin-top: 120px; margin-left: 100px;}
#bi-2 {border: 4px solid #d7a357; margin-top: 120px; margin-left: 100px; margin-bottom: 100px;}

#etlWrapper	{width:100%; margin-top: 60px;}
#etlLeft		{width:50%; float:left;}
#etlRight	{width:50%; float:right; margin-top: 100px;}
#etl-1		{border: 4px solid #2157d1;}
#etl-2		{border: 4px solid #d7a357; margin-bottom: 60px;}
#etl-3		{border: 4px solid #9a623f;}
#etl-10		{width: 86%; float:right; margin-right: 100px;}

#zzp-1		{width:auto;margin-top:120px;}
#zzp-2		{width:60%;margin-top:22%;margin-bottom: 60px;margin-right:60px;}
#zzp-2-de	{width:auto;margin-top:16%;margin-bottom: 60px;margin-right:60px;font-size:150%;}
#zzp-3		{position: fixed; bottom:50px;}

#php-1		{width: 100%;}
#php-2		{width: 40%;margin-top:12%;margin-bottom: 160px;margin-right:60px;}
#php-3		{position: fixed; bottom:50px;}

#detachering-1		{width:auto; margin-top:60px;}
#detachering-2		{line-height:2em; margin-top:30px;margin-bottom:100px;}
#detachering-3		{position: fixed; bottom:50px;}

/* colors-2016-2017-enchanted-boulevard */
.red		{color:#9b273c;}
.gray		{color:#5d5f4a;}
.brown	{color:#9a623f;}
.creme	{color:#d7a357;}
.blue		{color:#2157d1;}
.white	{color:#ffffff;}
.black	{color:#000000;}

.redBG	{background-color:#9b273c;}
.grayBG	{background-color:#5d5f4a;}
.brownBG	{background-color:#9a623f;}
.cremeBG	{background-color:#d7a357;}
.blueBG	{background-color:#2157d1;}
.whiteBG	{background-color:#ffffff;}
.blackBG	{background-color:#000000;}