html, body{
min-height:100%;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

body{
min-height:100%;
color:#5A5A5A;
margin:0;
font-size:16px;

background-image: -webkit-gradient(linear, left top, left bottom, from(#0095CC), to(#6FCDEF));
background-image: -webkit-linear-gradient(left, #0095CC, #6FCDEF);

background-image:    -moz-linear-gradient(left,  #0095CC, #6FCDEF);
background-image:      -o-linear-gradient(left,  #0095CC, #6FCDEF);
background-image:         linear-gradient(left,  #0095CC, #6FCDEF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095CC', endColorstr='#6FCDEF');
background-image: -ms-linear-gradient(left, #0095CC 0%, #6FCDEF 300%);

}

 
 
#toolbar{
padding-top:0.5em;
padding-left:4em;
/*background-color:#0990C1;*/

/*box-shadow: 1px 1px 5px #5A5A5A;*/

}

#logo{
height:4em;
 }
 
 
#billboard{


padding:7em;
padding-bottom:12em;
padding-top:9em;
color:#FFFFFF;

text-align:center;
margin:auto;

 background: url('../images/diagram.png');
 background-position:center;
}


#billboard h1{
font-size:6em;
margin-bottom:-0.4em;
font-weight:700;
/*text-shadow: 0.035em 0.035em #0045CC;*/
}

 
#billboard h2{
font-size:2em;
}

#splitter_icons{
text-align:center;
/*
background-color:#FFFFFF;
opacity:0.75;
filter:alpha(opacity=75);*/ /* For IE8 and earlier */
 }

.icons{

padding:0.5em;
max-width:4em;
margin:auto;


 }

#splitter{
width:100%;
display:table;
background-color:#F5F5F5;
border-top:0.09em solid #FFFFFF;
border-bottom:0.09em solid #DDDDDD;
text-align:center;
min-height:4em;
}

#splitter h1{
font-size:2.5em;
font-weight:200;
 }
 
#focus{
padding-top:5em;
padding-bottom:5em;
width:100%;
max-width:100%;
background-color:#FFFFFF;
display:table;
border-bottom:0.09em solid #DDDDDD;
}

.focus_text{
padding-left:4em;
padding-right:4em;
}

#cola{
width:50%;
/*background-color:red;*/
padding-left:2em;
display:table-cell;
text-align:center;
vertical-align:top;

}

#cola h2{
padding-right:2em;
padding-left:2em;
 }
 
#responsive{
max-height:10em;
max-width:48%;
 } 

#fanta{
width:50%;
display:table-cell;
padding-right:2em;
/*background-color:green;*/
text-align:center;
vertical-align:top;

}


#fanta h2{
padding-right:2em;
padding-left:2em;
 }

#technology{
max-height:10em;
max-width:48%;
 } 

#employees{
max-width:90%;
margin:auto;
}

#carsten{
background-color:#FFFFFF;
padding:0.5em;
max-width:18%;
margin:auto;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.1);
box-shadow: 1px 1px 5px #5A5A5A;
margin-right:2%;
-moz-border-radius-:3px;
border-radius:3px;

}

#martin{
background-color:#FFFFFF;
padding:0.5em;
max-width:18%;
margin:auto;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-0.1);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.1);
box-shadow: 1px 1px 5px #5A5A5A;
margin-right:2%;
-moz-border-radius-:3px;
border-radius:3px;
 }
 
#christian{
background-color:#FFFFFF;
padding:0.5em;
max-width:18%;
margin:auto;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.1);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.1);
box-shadow: 1px 1px 5px #5A5A5A;
margin-right:2%;
-moz-border-radius-:3px;
border-radius:3px;
 }
 
#lyudmila{
background-color:#FFFFFF;
padding:0.5em;
max-width:18%;
margin:auto;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-0.1);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.1);
box-shadow: 1px 1px 5px #5A5A5A;
-moz-border-radius-:3px;
border-radius:3px;
 }



#introduction{
width:50%;
display:table-cell;
padding-right:2em;
/*background-color:green;*/
text-align:center;
 }


#woopcamp{
background-color:#FFFFFF;
padding:0.5em;
max-width:50%;
margin:auto;
box-shadow: 1px 1px 5px #5A5A5A;
-moz-border-radius-:3px;
border-radius:3px;
}


#fotofeud{
 background-color:#FFFFFF;
padding:0.5em;
max-width:50%;
margin:auto;
box-shadow: 1px 1px 5px #5A5A5A;
-moz-border-radius-:3px;
border-radius:3px;
 }
 
#need4eat{
 background-color:#FFFFFF;
padding:0.5em;
max-width:50%;
margin:auto;
box-shadow: 1px 1px 5px #5A5A5A;
-moz-border-radius-:3px;
border-radius:3px;
}

#ttdo{
 background-color:#FFFFFF;
padding:0.5em;
max-width:50%;
margin:auto;
box-shadow: 1px 1px 5px #5A5A5A;
-moz-border-radius-:3px;
border-radius:3px;
}

#contact{
max-height:10em;
max-width:48%;
 } 
 
#call_wrapper{
margin:auto;
font-size:1.6em;
padding:0.4em;
width:10em;
background-color:#DDDDDD;
border:#CCCCCC solid 0.05em;
border-radius:0.3em;

background-image: -webkit-gradient(linear, top, bottom, from(#FFFFFF), to(#DDDDDD));
background-image: -webkit-linear-gradient(top, #FFFFFF, #DDDDDD);
background-image:    -moz-linear-gradient(top,  #FFFFFF, #DDDDDD);
background-image:      -o-linear-gradient(top,  #FFFFFF, #DDDDDD);
background-image:         linear-gradient(top,  #FFFFFF, #DDDDDD);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDDDDD');
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #DDDDDD 300%);
}

#call_wrapper a{ /*for iphone, that makes the number into a link*/
color:#36B0DD;
text-decoration:none;
color:#5A5A5A;
} 

#call_img{
max-height:2em;
height:1.5em;
vertical-align:bottom;
}

#call_link{
display:inline-block;
padding-left:0.5em;
line-height:1.5em;

}


#mail_wrapper{
height:2em;
}

#mail_img{
max-height:2em;
height:2em;
vertical-align:bottom;
}

#mail_link{
display:inline-block;
padding-left:0.5em;
line-height:2em;
width:10.5em;
}

#skype_wrapper{
height:2em;
}

#skype_img{
max-height:2em;
height:2em;
vertical-align:bottom;
}

#skype_link{
display:inline-block;
padding-left:0.5em;
line-height:2em;
width:10.5em;
}


#footer{
padding-top:2em;
color:#FFFFFF;
width:100%;
display:table;
border-top:0.09em solid #FFFFFF;
border-bottom:0.09em solid #DDDDDD;
text-align:center;
min-height:14em;
}

#footer h3{

 }
 
 #footer_col1{
    
    width:50%;
    display:table-cell;
    padding-right:2em;
    /*background-color:green;*/
    text-align:center;
    vertical-align:top;
    /*background-color:red;*/
 }
 
 
 #footer_col2{
    width:50%;
    display:table-cell;
    padding-right:2em;
    /*background-color:green;*/
    text-align:center;
    vertical-align:top;
    /*background-color:green;*/
 }

#footer a{ /*for iphone, that makes the number into a link*/
text-decoration:none;
color:#FFFFFF;
} 

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */
  body {
  
  }


}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

  
  body {
  font-size:28px;
  }
  
  #logo{
height:5em;
 }
  
#billboard{
  padding:3.5em;
  padding-bottom:4em;
  padding-top:1em;
  color:#FFFFFF;
  text-align:center;
  margin:auto;}
  
#billboard h1{
 font-size:4em;
 margin-bottom:-0.4em;
 font-weight:500;
 }

 
#billboard h2{
font-size:2em;
}


  #focus{
padding-top:2em;
width:100%;
max-width:100%;
background-color:#FFFFFF;
border:0;
}

.focus_text{
padding-left:2em;
padding-right:2em;

}
  
#cola{
display:inline;
width:100%;
min-width:25em;
/*background-color:red;*/
/*padding-left:2em;*/
text-align:center;
padding-right:2em;
padding-left:2em;
}

#responsive{
max-height:12em;
max-width:50%;
margin-left:20%;
 } 

 
#fanta{
 display:inline;
width:100%;
min-width:25em;
/*background-color:red;*/
/*padding-left:2em;*/
text-align:center;
padding-right:2em;
padding-left:2em;

}
 
 #technology{
max-height:12em;
max-width:50%;
margin-left:14%;
 } 
 
 
#carsten{
margin-left:-0.5em;
}

#woopcamp{
/*max-height:12em;*/
max-width:85%;
width:85%;
/*margin-left:7.5%;*/
}


#fotofeud{
max-width:85%;
width:85%;
/*margin-left:7.5%;*/
 }
 
#need4eat{
max-width:85%;
width:85%;
/*margin-left:7.5%;*/
}

#ttdo{
max-width:85%;
width:85%;

}


#contact{
max-height:12em;
max-width:50%;
margin-left:20%;
 } 
 
#cola h2{
padding-right:1em;
padding-left:1em;
 }
 
 #fanta h2{
padding-right:1em;
padding-left:1em;
 }

  #footer_col1{
    
    width:85%;
    display:inline;
    padding-right:2em;
    /*background-color:green;*/
    text-align:center;
    vertical-align:top;
    /*background-color:red;*/
 }
 
 
 #footer_col2{
    width:85%;
    display:inline;
    padding-right:2em;
    /*background-color:green;*/
    text-align:center;
    vertical-align:top;
    /*background-color:green;*/
 }
 
}