@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

body  { background-image: url(../img/texture.jpg);
}
/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	8;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

#section {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	}
#modtext { clear: both; float: left; margin-left:10%; margin-bottom:5%; margin-top: 5%; width:79%; display: block;
}

#logo { clear: both;
 float: left;
 margin-left: 15%;
 width: 70%;
 display: block;
}

#col1 { clear: both;
 float: left;
 margin-left: 0;
 width: 100%;
 display: block;
}

#col2 { clear: both;
 float: left;
 margin-left: 0;
 width: 100%;
 display: block;
}
#col3 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 70%;
    display: block;
    padding: 20% 15%;
}
#col4 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 70%;
    display: block;
    text-align: center;
    background: #fff;
    padding: 20% 15%;
}
#col4 #icon {
    width: 90%;
    margin: 14% 5%;
}
#icon { clear: both;
 float: left;
 margin-left: 30%;
 width: 40%;
 display: block;
 text-align:center;
}
#section.dig {
    padding: 15% 0 18%;
    width: 100%;
}
#concept { clear: both;
 float: left;
 margin-left: 0;
 width: 100%;
 display: block;
  text-align:center;
  margin-bottom:5%;
}

#modright { clear: both;
 float: left;
 margin-left: 0;
 width: 100%;
 display: block;
}

#modleft { clear: both;
 float: left;
 margin-left: 10%;
 width: 80%;
 display: block;
 margin-top:10%;
}

#h1 { clear: both;
 float: left;
 margin-left: 0;
 width: 100%;
 display: block;
 text-align:center;
 margin-top:5%;
}
#footer {
    background: #000;
    width: 70%;
    clear: both;
	float: left;
	display: block;
    padding: 18% 15%;
    text-align: center;
}
#logofoot {
    clear: both;
    float: left;
    width: 50%;
    display: block;
    margin: 0 25% 8%;
}
#mail, #tel  {
    clear: both;
    float: left;
    width: 100%;
    display: block;
    margin-bottom: 6%;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
	width: 100%;
}
#section {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#section.dig {
    padding: 10%;
    width: 80%;
}
#modtext { clear: both; float: left; margin-left: 10%; 
margin-bottom:0%;width:80%; display: block;
}

#logo { clear: both;
 float: left;
 margin-left: 30%;
 width: 40%;
 display: block;
}

#col1 { clear: both;
 float: left;
 margin-left: 0;
 width: 100%;
 display: block;
}

#col2 { clear: both;
 float: left;
 margin-left: 0;
 width: 100%;
 display: block;
}
    
#col3 { clear: both;
    float: left;
    margin-left: 0;
    width: 76%;
    display: block;
    padding: 10% 12%;
}
#col4 { clear: both;
    float: left;
    margin-left: 0;
    width: 76%;
    display: block;
    padding: 10% 12%;
    text-align: left;
}
#col4 #icon {
    width: 30%;
    display: block;
    margin: 5% 5% 0 0;
}
#icon { clear: both;
 float: left;
 margin-left: 0;
 width: 20%;
 display: block;
}

#concept { clear: none;
 float: left;
 margin-left: 5%;
 width: 75%;
 display: block;
 text-align: left;
}

#modright { clear: both;
 float: left;
 margin-left: 0;
 width: 100%;
 display: block;
}

#modleft { clear: both;
 float: left;
 margin-left: 0;
 width: 100%;
 display: block;
}

#h1 { clear: both;
 float: left;
 margin-left: 0;
 width: 100%;
 display: block;
}

#logofoot { clear: both;
    float: left;
    width: 30%;
    display: block;
    margin: 0 20% 6% 0;
}

#mail {
    float: left;
    clear: none;
    width: 50%;
    display: block;
    margin-bottom: 4%;
}
#tel  {
    float: left;
    clear: none;
    width: 50%;
    display: block;
    margin-bottom: 0;
}
#footer {
    width: 80%;
    padding: 10%;
    text-align: left;
}

}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */


@media only screen and (min-width: 820px) {
.gridContainer {
	width: 100%;
	max-width: 1800px;
	margin: auto;
}

#section {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
}
#section.dig {
    padding: 2% 5%;
    width: 90%;
}
#modtext { clear: both; float: left; margin-left: 10%; margin-top:5%; margin-bottom:5%;
width:80%; display: block;
}

#logo { clear: both;
 float: left;
 margin-left: 0%;
 width: 100%;
 display: block;
}

#col1 { clear: both;
 float: left;
 margin-left: 0;
 width: 50%;
 display: block;
}

#col2 { clear: none;
 float: left;
 margin-left: 0;
 width: 50%;
 display: block;
}

#col3 { clear: both;
    float: left;
    margin-left: 0;
    width: 30%;
    display: block;
    padding: 8% 10% 0;
}
    
#col4 { clear: none;
    float: left;
    margin-left: 0;
    width: 30%;
    display: block;
    padding: 8% 10%;
    text-align: center;
}
#col4 #icon {
    width: 70%;
    display: block;
    margin: 8% 15%;
}
    
#icon { clear: both;
 float: left;
 margin-left: 0;
 width: 20%;
 display: block;
}

#concept { clear: none;
 float: left;
 margin-left: 5%;
 width: 75%;
 display: block;
}

#modleft { clear: none;
 float: left;
 margin-left: 5%;
 width: 35%;
 display: block;
}

#modright  { clear: none;
 float: left;
 margin-left: 0;
 width: 60%;
 display: block;
}

#h1  { clear: both;
 float: left;
 margin-left: 0;
 margin-top:40%;
 width: 100%;
 display: block;
 text-align:left;
}

#logofoot  { clear: none;
 float: left;
 width: 20%;
 display: block;
    margin-right: 20%;
}

#mail  { clear: none;
 float: left;
 width: 20%;
 display: block;
    margin-right: 10%;
}

#tel  { clear: none;
 float: left;
 width: 30%;
 display: block;
}
#footer {
    width: 80%;
    padding: 7% 10%;
}
}