@media all and (max-width: 640px) {



/*-----------------------------------------------------
	BODY
-----------------------------------------------------*/

.index-bk {background: #000}
.about-bk {background: #000}
.services-bk {background: #000}
.portfolio-bk {background: #000}
.blog-bk {background: #000}
.clients-bk {background: #000}

img {
	max-width: 100%;
	height: auto;
}

.img-right, img-left {
	width: 50%;
}

/*-----------------------------------------------------
	TYPOGRAPHY
-----------------------------------------------------*/

blockquote {margin: 0 1em 1em 0;
}

#doublelist li  { float:none;} /* 2 col */
#triplelist li  { float:left; width: 50%} /* 2 col */

/*-----------------------------------------------------
	GRID
-----------------------------------------------------*/

#container {
	width: 100%;
	}
 
#header {
	width: 100%; 
	padding:5px 0px;
	}

#content {
	width: 94%;
	margin: 0 auto;
	}

#content-area {
	margin: 20px auto;
	width: 90%;
	}

#footer {
	width: 94%;
	}

/*-----------------------------------------------------
	INTERFACE ELEMENTS
-----------------------------------------------------*/

/* HEADER */

.contact-btn a{
	display: block;
	float:right;
	margin-left: 10px;
	text-indent: -2000px; 
	height:42px; 
	width:42px; 
	background-image:url(../images/main/icons-active.png);
	background-position:-126px 0px;
	}

/* Logo */

#logo {
	width: 50%; 
	height: auto;
}

#logo a{
	width: 100%;
	max-width: 185px;
	height: 150px; 
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position:left;
	}
	
#logo a:hover{
	background-image:url(../images/main/logo.png);
	}

/* Contact area */

#contact {
	display:none;
	}

/* Navigation*/

#nav {
	display: none;
}

#dl-menu {
	display:block;
}

/* FOOTER */

#info {
	clear: both;
}

#info p {
	text-align:center;
	float: none;
	line-height: 1.25em;
	}

#icons {
	text-align:center;
}

#icons ul {
	display: inline-block;
}

#icons  li {
	margin-right: 10px; 
	}
	
#icons li a{
	background-image:url(../images/main/icons-active.png);
	height:37px; 
	width:37px;
	background-size:cover;
	}

.facebook a, .facebook a:hover {background-position:0px 0px}
.linkedin a, .linkedin a:hover {background-position:-37px 0px}
	
.matchgame {display:none;}



/*-----------------------------------------------------
	SPECIFIC PAGES
-----------------------------------------------------*/


/* HOMEPAGE */ 
	
#slider {
	display:none;
}

#slider .pagination {
    list-style:none;
    padding:0 30px 0 0 !important;
}
#slider .pagination li {
    cursor:pointer;
    background-color:#888;
    border-radius:10px 10px 10px 10px;
    height:8px;
    text-indent:10000px;
    width:8px;
}
#slider .pagination li.current {
    background-color:#000;
}

.introbox {
padding: 0px;
font-size: 1.15em;
margin-top:25px;
}

/* Navigation Content Boxes */
.navboxes {
	float:none;
	margin: 25px 0 25px 0;
	padding: 0px;
	border-right: none;
	text-align:center;
	width: 100% !important;

}

.navboxes img {
	float:none;
	margin-right: 0px;
	width: 60px;
	height: 60px;
}

.navboxes h1 {
	margin: 5px 0 0 0;
}

.navboxes p {
	margin: 15px 0px 10px 0px;
}

.navboxes-bars {
	margin: 0px auto;
}

.navboxes-bars h3{
	margin: 7px 0 0 0;
	font-size:.95em;
}



/* PORTFOLIO */

/* Filter */
#filter-header {
	padding: 7px 18px ;
	border: 1px solid #cccccc;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.filter li {
	float: none;
	text-align:center;
	padding: 2px 0px;
	}
	
.filter li:after { content: ""; }
.filter a {
	padding: 0px; 
	}
	

/* Gallery Items */

#gallery {
	width: 90%;
	margin: 0 auto;
}

.gallery li {
	float: left; 
	margin: 15px 3%;
	width: 200px; 
	height: 140px;
	}
	
/* Doesnt work in IE 8 and below
.gallery li:nth-child(4n) { margin-right: 0; }
*/

.gallery a {
	display: block; 
	}

.gallery img {
	width: 200px; 
	height: 140px;
	display: block;
	}

/* CLIENTS */ 

#clientlist	p {
	float:left;
	width:50%;
	margin:0;
	}
			


}


@media all and (max-width: 480px) {
	
.gallery li {
	float: none; 
	margin: 25px auto;
	}

#triplelist li  { float:none;} /* 2 col */

}