/* -------------------------------------------------------------- 
   ATOMISED SITE CSS
    * Filename:        style.css
    * Version:         1.0 (12-10-2010) 
    * Website:         http://www.atomised.coop/
	
  Created by:
    * Morgan Faichney
    * Al Macmillan
	* Neil ALbrock
	Copyright 2011 Atomised Co-operative Ltd
-------------------------------------------------------------- */
/*****************************************************
* ReSet
*****************************************************/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, code,del, dfn, em, img, q, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;  padding: 0;  border: 0;  font-weight: inherit;  font-style: inherit;  font-size: 100%;  font-family: inherit;  vertical-align: baseline;}
body{line-height:1.5em;}
/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
/* Remove annoying border on linked images. */
a img { border: none; }
a { outline: none;	cursor:pointer;	text-decoration:none;}
ul {	list-style:none;}
/* Safari blue outline removal. */
input:focus, textarea:focus {outline:none;}
:focus {outline: 0;}
/* tables may still need 'cellspacing="0"' in the markup */
table {	border-collapse: collapse;	border-spacing: 0;}
/*****************************************************
* MySet
*****************************************************/
body{
	font:16px/24px "proxima-nova-1","proxima-nova-2", sans-serif;
	background:#DDDDDD;
	color:#333
}
/* heading font sizes */
h1, h2, h3, h4, h5{color:#fff; line-height:1em}
.info h1, .info h2, .info h3, .info h4, .info h5,.work-gallery h3{color:#333}
h1 {
	font-size: 2.5714em;	/* px */
	margin-bottom: 0.5833em;/* px */
}
h2 {
	font-size: 2.375em;	/*38px*/
	line-height:1em;
	margin-bottom: 1em;		/* px */
}
h3 {
	font-size: 1em;	/* 16px */
	line-height:1em;
	margin-bottom: 1em;
}
/* basic font sizes & margins */
p, ul, ol, dl, table, address, pre{
	font-size:0.875em;
	line-height:1.5em;
	margin-bottom: 1.5em;
}
.work-gallery p{
	font-size:0.875em;
	line-height:1.3em;
	margin-bottom: 1.3em;
}
/* inherited font sizes */
ul p, ol p, table p, dl p, ul ul, ol ol, ul ol, ol ul, address p, blockquote p, table form div {
	font-size: 1em;
}
/* Inherited Margins */
ul ul, ol ol, ol ul, ul ol {
	margin-bottom: 0;
}
a {
	font-weight: bold;
	text-decoration: underline;
}
a:link,
a:visited {}
a:hover,
a:focus,
a:active {}
/*generic classes*/
.clear {
	clear: both;
}
img {max-width:100%}
em{color:#9FBF44}
/* form resets */
form {	width: 100%; text-align: left;}
fieldset {margin: 0; border: 0; padding: 0; text-indent:0; clear: left; border: 0 solid; position: relative;}
form label {display: block;}
form input {display: block;}
form select {float: left; display: block;}
textarea {display: block;}
/*****************************************************
* Headings
*****************************************************/
h1#logo{float:left; margin-bottom:0;margin-left: 0.728%}
h1#logo a {
	background:url("../images/logo.png") no-repeat;
	float:left;
	height:39px;
	overflow:hidden;
	text-indent:-9999px;
	width:170px;
}
body#home .gallery h2{
	margin:1.5em 0;
	font-size: 2.25em;	/*36px*/
}
body#contact-us .gallery h2{
	margin:1.5em 0 0.5em 0;
	font-size: 2.25em;	/*36px*/
}
.gallery h2{
	margin:0.5em 0 1.5em 0;
	font-size: 2.25em;	/*36px*/
}
.gallery h3{
   font-size: 2.25em;    /*32px*/
   line-height:1em;
   margin-bottom: 0.5em;
}
.overlap-section h3{
	font-size: 1.25em;	/*32px*/
	line-height:1.25em;
	margin-bottom: 0.5em;
	color:#333
}
.overlap-section h3.vcard{margin:1.25em 0}
.info h3{
	font-weight:600; 
	margin-bottom: 0.5em;
	margin-top: 1.125em;
}
.work-gallery h3{
	font-weight:600; 
	padding:0.25em 0 0.25em 2.6em;
	margin-bottom: 0.5em;
	margin-top: 0;
	margin-left:70%
}
.work-gallery h3.alt{
	margin-right:70%;
	margin-left:0;
}
.work-gallery .old h3{
	font-weight:600; 
	padding:0.25em 0 0.25em 2.6em;
	margin-bottom: 0.5em;
	margin-top: 0;
	margin-left:37%
}
.work-gallery .older h3{
	font-weight:600; 
	padding:0.75em 0 0.75em 2.6em;
	margin-bottom: 0.5em;
	margin-top: 0;
	margin-left:0;
	clear:both;
}
.work-gallery .old h3.appSite, .work-gallery .older h3.appSite{
	padding:0.75em 0 0.75em 4.5em;
}
form#contact-form h3{
	font-size:1em;
	font-weight:600; 
	padding:0.25em 0 0.25em 0;
	margin-bottom: 0.5em;
	margin-top: 0;
	background:url(../images/icons/icon_mail.png) no-repeat right;
	color:#fff
}
h3.apps{background:url(../images/icons/icon_apps.png) no-repeat left; 
	padding:0.25em 0 0.25em 2.6em;}
h3.sites{background:url(../images/icons/icon_sites.png) no-repeat left;
	padding:0.25em 0 0.25em 2.6em;}
h3.mobile{background:url(../images/icons/icon_mobile.png) no-repeat left; 
	padding:0.25em 0 0.25em 2.6em;padding-left:2em}
h3.appSite{background:url(../images/icons/appsite.png) no-repeat left; 
	padding:0.25em 0 0.25em 4.5em;}
	
/*#about-us .info h3{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
    background-color:#9FBF44; background-color:rgb(158,191,68); 
	color:#fff;
    padding: 0.1em 0.3em;
}*/

/*****************************************************
* Typography
*****************************************************/
a {text-decoration:none; color:#222222}
.overlap-section a, .info p a, .info dl a, .info blockquote a{
	color:#222222; 
	text-decoration:none;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 0.1em 0.3em;
	font-weight:normal;
}
.overlap-section a:hover, .info a:hover, .info a:focus{background-color:#9FBF44; background-color:rgb(158,191,68); color:#fff}

#our-work p em, .footer p em {
   text-decoration:none;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   border-radius: 6px;
background-color:#9FBF44; background-color:rgb(158,191,68);
   color:#fff;
   padding: 0.1em 0.3em;
   font-weight:normal;
}
p.success {
    bottom: -57px;
    left: 120px;
    position: absolute;
}
.overlap-section a, .info p a, .info dl a, .info blockquote a, em.blackie{
   color:#222222; 
   text-decoration:none;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   border-radius: 6px;
   background-color: rgba(0, 0, 0, 0.1);
   padding: 0.1em 0.3em;
   font-weight:normal;
}

p.about{ color:#fff; position:absolute; top: 128px; left: 28%; width: 29%;
   line-height: 1.2em;
}
blockquote, p.meta{
   font-size:0.875em;
   line-height:1.45em;
   margin-bottom: 1.45em;
   font-style:italic;
}
p.meta {margin-bottom:1em}
#blog h3 {
   margin-bottom: 0.22em;
   font-size: 1.4em;
}

#blog .sidebar h3 {
   margin-bottom: 0.5em;
   font-size: 1em;
}
/*****************************************************
* Atomised 12 column grids, common styles
*****************************************************/
.wrapper {
	width: 100%;
	font-size:100%;
}
.overlap{clear:both}
.section {
	width: 100%;
	min-width: 480px;
	max-width: 60em;
	text-align: left;
	margin: 0 auto;
	overflow:auto;
}

.overlap-section{
	width: 100%;
	min-width: 480px;
	max-width: 60em;
	text-align: left;
	margin: 0 auto;
	overflow:visible;
	padding:1.75em 0;
}
.twelve-1, .twelve-2, .twelve-3, .twelve-4, .twelve-5, .twelve-6, .twelve-7, .twelve-8, .twelve-9, .twelve-10, .twelve-11, .twelve-12
{display:inline;float:left;margin:0 0.728%}
/* Use these classes to set the width of a column. */
.twelve-1 {width: 6.875%;}
.twelve-2 {width: 9.125%;}
.twelve-3 {width: 23.541%;}
.twelve-4 {width: 31.875%/*19.1250%*/;}
.twelve-5 {width: 40.208%;}
.twelve-6 {width: 48.541%;}
.twelve-7 {width: 56.875%;}
.twelve-8 {width: 65.208%;}
.twelve-9 {width: 73.541%;}
.twelve-10 {width: 81.875%;}
.twelve-11 {width: 90.208%;}
.twelve-12 {width: 98.54%;}
.gallery .twelve-4{width:32.6%}

.nomargin{margin:0}

.sidebar{float:right;text-align: right;}
.sidebar ul {width:80%; float:right}
.sidebar li.first {
    border-top: 1px dotted #9FBF44;
}
.sidebar li {
    border-bottom: 1px dotted #9FBF44;
    height: 34px;
    padding: 0;
}
.sidebar ul li a {
    height: 26px;
    padding: 8px 2.5% 0 0;
    width: 97.5%;
	display:block;
	margin-right:2.5%;
	color:#222222; 
	text-decoration:none;
	font-weight:normal;
}
.sidebar ul li a:hover, .sidebar ul li a:focus, .sidebar ul li.active a {color:#fff; background-color:#9FBF44; background-color:rgba(158,191,68,0.2);
text-decoration:none}
.alpha{margin-left:0} .omega{margin-right:0}

/* nav */
.nav {padding:2.25em 0; background:#222222}


.scientist{
	background:url(../images/about_image90_alt.jpg) center top no-repeat;
	height:522px
}

.scientist .section{height:522px; position:relative;}


.scientist h1#logo a {
	background:url("../images/logo2.png") no-repeat;
	float:left;
	height:39px;
	overflow:hidden;
	text-indent:-9999px;
	width:170px;
}
.nav ol {
	margin: 1.5em 0.728% 0 0;
	padding: 0;
	list-style: none;
	float:right
}
.nav li {
	display: inline;/*
	border-right: 1px solid #777777;*/
	margin-right: 1em;
	padding-right: 1em;
	font-size: 1.125em /*0.875em*/;	/* 14px */
	line-height:120%;
}
.nav li:last-child {
	border-right: none;
	margin-right: 0;
	padding-right: 0;
}
.nav li a {
	text-decoration: none;
	color:#777777;
	font-weight:600
}
.nav li.admin a, .nav li.debug a{color:#5691C7;}
.nav li.active a, .nav li a:hover {
	color:#fff;
}
/* black area at top of page (e.g homepage gallery) */
.gallery {padding:0.5em 0; background:#222222}
.gallery img{margin-left:2.875em}
.gallery p{color:#9FBF44}

ul.gallery-images{margin-bottom:0;overflow:hidden;}
ul.gallery-images li {position:relative}
/*ul.gallery-nav {
	bottom:5.25em;
	float:right;
	margin-bottom:-5.25em;
	position:relative;
}*/
ul.gallery-nav {
    bottom: 2.75em;
    float: left;
    margin-bottom: -2.75em;
    position: relative;
    right: 2em;
}
ul.gallery-nav li{
	float:left;
	background:url(../images/icons/gallery-nav.png);
	display:block;
	height:15px;
	width:32px;
	text-indent:-9999px;
	cursor:pointer;
}
ul.gallery-nav li.active, ul.gallery-nav li:hover{background:url(../images/icons/gallery-nav-current.png) no-repeat;}
/* grey area(e.g 4 boxes on homepage) */
.info, .work-gallery {
	padding:1.75em 0;
}
.work-gallery .twelve-12, .post{
	padding:2em 0;
	background:url(../images/line.png) no-repeat bottom;
}
.post:first-of-type{
	padding-top:0;
}
.post:last-of-type{
	background:none;
}
.post img{margin-bottom:0.5em}

.post a.img{background:none}

.post a.img:hover, .post a.img:focus {
    -webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-o-transform: rotate(-1deg);
	transform: rotate(-1deg);
    opacity: 0.7;
}

.post h3 a{
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	border-radius: 11px;
	padding:3px 5px;
	margin-left:-3px
}
.post h3 a:hover, .post h3 a:focus{background:rgba(158,191,68,.7)}

.work-gallery .twelve-12:last-child{
	background:none;
}
.work-gallery img{
	width:66.6%;
	float:left;
	margin-right:3.4%
}
.work-gallery img.alt{
	float:right;
	margin-left:3.4%;
	margin-right:0
}
.work-gallery .old img{
	width:33.3%;
	float:left;
	margin-right:3.4%	
}
.work-gallery .older img{
	width:100%;
}
.work-gallery .twelve-3{padding:4em 0}
.work-gallery .twelve-3 img{width:100%}
	
/* footer */
.footer{background:url(../images/line.png) no-repeat top; padding:1.2em 0; margin-top:1.2em}
#contact-us .footer{clear:both}
.footer .twelve-12{
	background:	url(../images/windhand.gif) no-repeat right center;
	padding:0.75em 0 1em;
}
.footer p {
	text-align:right; font-size:0.6875em;line-height:1.7em; color:#999999; margin-bottom:0; padding-right:10.125em}

dt, dd { display: inline; float:left}
dt { font-weight: 700;  clear:both; margin-right:0.25em}


/* form styles */
/*formalize form styles*/
/* `Widths
----------------------------------------------------------------------------------------------------*/
.input_tiny {width: 50px;}
.input_small {width: 100px;}
.input_medium {	width: 150px;}
.input_large {width: 200px;}
.input_xlarge {	width: 250px;}
.input_xxlarge {width: 300px;}
.input_half{width:48%;margin-right:2%}
.input_full {width:100%;}
/*
	Added via JS to <textarea> and class="input_full".
	Applies only to IE7. Other browsers don't need it.
*/
.input_full_wrap {
	display: block;
	padding-right: 8px;
}
/* `UI Consistency
----------------------------------------------------------------------------------------------------*/
::-moz-focus-inner {border: 0;}

input[type="search"]::-webkit-search-decoration {
	display: none;
}

input,
button,
select,
textarea {
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
	margin: 0;
	vertical-align: middle;
}

button,
input[type="reset"],
input[type="submit"],
input[type="button"] {
	-webkit-appearance: none;
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	border-radius: 11px;
	background: #ddd url(../img/button.png/index.html) repeat-x;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ddd));
	background: -moz-linear-gradient(top center, #fff 0%, #ddd 100%);
	border: 1px solid;
	border-color: #ddd #bbb #999;
	cursor: pointer;
	color: #333;
	font: bold 12px/1.2 Arial, sans-serif;
	outline: 0;
	overflow: visible;
	padding: 3px 10px 4px;
	text-shadow: #fff 0 1px 1px;
	width: auto;
	/* IE7 */
	*padding-top: 2px;
	*padding-bottom: 0px;
}

button {
	/* IE7 */
	*padding-top: 1px;
	*padding-bottom: 1px;
}

button[disabled],
input[type="reset"][disabled],
input[type="submit"][disabled],
input[type="button"][disabled] {
	color: #888;
}

textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
	-webkit-appearance: none;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid;
	border-color: #848484 #c1c1c1 #e1e1e1;
	color: #333;
	outline: 0;
	padding: 2px 3px;
	font-size: 13px;
	font-family: Arial, sans-serif;
	height: 1.8em;
	/* IE7 */
	*padding-top: 2px;
	*padding-bottom: 1px;
	*height: auto;
}

/*
	Separate rule for Firefox.
	Cannot stack with WebKit's.
*/
input.placeholder_text,
textarea.placeholder_text {
	color: #888;
}

::-webkit-input-placeholder {
	color: #888;
}

textarea[disabled],
select[disabled],
input[type="date"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="email"][disabled],
input[type="month"][disabled],
input[type="number"][disabled],
input[type="password"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="text"][disabled],
input[type="time"][disabled],
input[type="url"][disabled],
input[type="week"][disabled] {
	background-color: #eee;
	color: #888;
}

button:focus,
button:active,
input:focus,
input:active,
select:focus,
select:active,
textarea:focus,
textarea:active {
	-moz-box-shadow: #06f 0 0 7px;
	-webkit-box-shadow: #06f 0 0 7px;
	box-shadow: #06f 0 0 7px;
	/* for Opera */
	z-index: 1;
}

input[type="file"]:focus,
input[type="file"]:active,
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.is_webkit select {
	/* Tweaks for Safari + Chrome. */
	background-image: url(../img/select_arrow.gif/index.html);
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 20px;
}

textarea,
select[multiple] {
	height: auto;
}

select[multiple],
.is_webkit select[multiple] {
	background-image: none;
	padding: 0;
}

textarea {
  min-height: 40px;
	overflow: auto;
	resize: vertical;
	width: 100%;
}

optgroup {
	color: #000;
	font-style: normal;
	font-weight: normal;
}
/* end of formalize styles
----------------------------------------------------------------------------------------------------*/

#contact-form {
	color:#fff;
	border-radius: 10px;
	-khtml-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	background:#9FBF44;
	padding:1.5em 5% 6em;
	margin:-10.5em 0.728% 1.5em	0.728%;
	width:90%
}
#contact-form label{color:#000; font-size:0.846em}
#contact-form input{
    height: 2.8em;
    width: 99%;
	border-radius: 2px;
	-khtml-border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	padding:0.5em 0.25em 0.75em 0.5em;
}
#contact-form textarea{
	height:10.5em;
	width:99%;
	padding:0.5em 0.25em 0.75em 0.5em;
	border-radius: 2px;
	-khtml-border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

#contact-form textarea,#contact-form input{ margin-bottom:0.5em;}
#contact-form input:focus, #contact-form textarea:focus{background:#}
#contact-form input.submit {
	border-radius: 4px;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background:#3c3c3c;
	border:medium none;
	color:#fff;
	cursor:pointer;
	position:absolute;
	font:0.875em/0.875em "proxima-nova-1","proxima-nova-2",sans-serif;
	height:2.25em;
	padding:0;
	width:6.5em;
	bottom:-3.55em;
	left:0;
	text-shadow:none
}
#contact-form input.submit:focus,#contact-form input.submit:hover {background:#DDDDDD; color:#444}

#page-not-found img{position:relative; margin:1em 0 0.5em 9% ;}

a.work:hover{
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	-moz-transform:scale(1.01);
	-webkit-transform:scale(1.01);	
}

@media screen and (max-width:960px){
	
	.section, .overlap-section{width:90%; margin:0 5%}
	.gallery h2{margin-bottom:1.5em}
	.gallery h2, .gallery h3{font-size:1.8em; line-height:1.2em}
	.gallery h2{margin-top:0.5em}
	.gallery img{margin-left:0}
	p.about { color: #FFFFFF; left: 25%; line-height: 1.2em; position: absolute; top: 128px; width: 35%;}
	#page-not-found img{margin:0.5em 0 ;}
	
}
@media screen and (max-width:760px){
	
	.section, .overlap-section{width:90%; margin:0 5%}
	.twelve-3{width: 48.541%;} div.mobile{clear:both}
	.gallery h2{margin-bottom:1em}
	.gallery img{margin-left:0}
	.nav li{margin-right:0.5em;padding-right:0.5em}
	p.about { color: #FFFFFF; left: 20%; line-height: 1.2em; position: absolute; top: 128px; width: 40%;}
	.sidebar{clear:both; width:88%; padding:0 }
	#blog .twelve-8{clear:both; width:88.541%; margin:0 }
	.sidebar h3{float:left; clear:both; width:90%; margin:0 5%}
	.sidebar ul{float:right; clear:both; width:40%; margin:0 5%}
	#blog .sidebar h3, #blog .sidebar ul {margin-bottom:1em}
	#page-not-found img{margin:0.5em 0 ;}

	
	
}
@media screen and (max-width:700px){
	.gallery{width:100%}
	.section, .overlap-section{width:90%; margin:0 5%}
	.twelve-3, .twelve-4, .gallery .twelve-4, .twelve-8, .twelve-12, h1#logo, .nav ol, .scientist h1#logo{width: 88.541%;padding:0 5%}
	.twelve-4{margin-bottom:2.5em}
	h1#logo a{width:100%; background-position:center}
	.scientist h1#logo a{width:100%; background:url("../images/logo.png") no-repeat center;}
	.nav ol, .gallery h2, .gallery h3{text-align:center;margin:0 0 0.5em 0}
	.gallery h3{margin-top:1em}
	.gallery p{margin-bottom:1em}
	.nav, .gallery{padding:1em 0}
	.nav ol{margin-top:1em}
	.gallery img{margin-left:0}
	.nav li{margin-right:0.5em;padding-right:0.5em}
	.twelve-4 img{float:left; margin-right:2.5%}
	
	.scientist{	background:#222; height:auto; }	
	.scientist .section{height:250px}
	em.blackie { background:none; border-radius: none; color: #9FBF44; padding:0; }
	
	.overlap-section h3{ font-size: 0.875em; line-height:1em;	margin-bottom: 0.5em;}
	p.about { color: #FFFFFF; line-height: 1.2em; position: relative; top: 3em; left:0; width: 100%;}
	
	.sidebar{clear:both; width:88%; padding:0 }
	#blog .twelve-8{clear:both; width:88.541%; margin:0}
	.sidebar h3{float:left; clear:both; width:90%; margin:0 5%}
	.sidebar ul{float:right; clear:both; width:40%; margin:0 5%}
	#blog .sidebar h3, #blog .sidebar ul {margin-bottom:1em}
	
	#contact-us .twelve-6{width: 88.541%; margin:0 5%; clear:both}
	#contact-form{margin-top:1em}
	#contact-us h3{ font-size: 1.25em; line-height:1.25em; margin-bottom: 0.5em;}
	
	body#contact-us .gallery h2, body#home .gallery h2 {margin: 0.5em 0 0.5em;}
	#page-not-found img{margin:0.5em 0 ;}
	
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {	
	.wrapper{width:100%;}
	.gallery{width:100%;padding:0;}
	.section, .overlap-section{width:100%; margin:0;min-width: 320px;}
	.twelve-3, .gallery .twelve-4, .twelve-8, .twelve-12, h1#logo, .nav ol, #our-work .twelve-12, .footer{width: 88.541%;padding:0 5%;}
	h1#logo a{width:100%; background-position:center}
	.nav ol, .gallery h2, .gallery h3{text-align:center;margin:0 0 0.5em 0}
	.nav ol {position:relative; z-index:9}
	.gallery h3{margin-top:1em}
	.gallery p{margin-bottom:1em}
	.nav{padding:1em 0}
	.nav ol{margin-top:1em}
	.gallery img{margin-left:0}
	.nav li{margin-right:0.4em;padding-right:0.4em; font-size:0.875em}
	ul.gallery-nav { bottom: 3.25em; }
	.overlap-section h3{ font-size: 0.875em; line-height:1em;	margin-bottom: 0.5em;}
	
	p.about { color: #FFFFFF; line-height: 1.2em; position: relative; top: 1.5em; left:0; width: 85%; padding:0 8% 0 7%}
	
	.sidebar{clear:both; width:88%; padding:0 }
	#blog .twelve-8{clear:both; width:88.541%; margin:0}
	.sidebar h3{float:left; clear:both; width:90%; margin:0 5%}
	.sidebar ul{float:right; clear:both; width:40%; margin:0 5%}
	#blog .sidebar h3, #blog .sidebar ul {margin-bottom:1em}
	
	#contact-us .twelve-6{width: 88.541%; margin:0 5%; clear:both}
	#contact-form{margin-top:1em; width:88.541%}
	#contact-us h3{ font-size: 1.25em; line-height:1.25em; margin-bottom: 0.5em;}
	
	#our-work .twelve-12 img {width:100%; margin-top:1em; margin-bottom:1em}
	#our-work h3{margin:1.5em 0 1em 0; width:100%; clear:both; }
	
	body#contact-us .gallery h2, body#home .gallery h2 {margin: 0.25em 0 0.5em;}
	#page-not-found img{margin:0.5em 0 ;}
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.twelve-3, .gallery .twelve-4, .twelve-8, .twelve-12, h1#logo, .nav ol, .scientist h1#logo{width: 88.541%;padding:0 5%}
	.scientist h1#logo a{width:100%; background:url("../images/logo.png") no-repeat center;}
	h1#logo a{width:100%; background-position:center}
	.nav ol, .gallery h2, .gallery h3{text-align:center;margin:1em 0}
	.nav, .gallery{padding:1em 0}
	.nav ol{margin-top:1em}
	#contact-form{width: 88.541%;padding:2.5% 5%; margin:5% 0}
	.gallery img{margin-left:0}
	.nav li{margin-right:0.5em;padding-right:0.5em}
	
	.sidebar{clear:both; width:88%; padding:0 }
	#blog .twelve-8{clear:both; width:88.541%; margin:0}
	.sidebar h3{float:left; clear:both; width:90%; margin:0 5%}
	.sidebar ul{float:right; clear:both; width:40%; margin:0 5%}
	#blog .sidebar h3, #blog .sidebar ul {margin-bottom:1em}
	
	#contact-us .twelve-6{width: 88.541%; margin:0 5%; clear:both}
	#contact-form{margin-top:1em; padding-bottom:4em}
	#contact-us h3{ font-size: 1.25em; line-height:1.25em; margin-bottom: 0.5em; text-align:center}
	
	body#contact-us .gallery h2, body#home .gallery h2 {margin: 0.25em 0 0.5em;}
	
	p.about { color: #FFFFFF; left: 19%; line-height: 1.2em; position: absolute; top: 144px; width: 43%;}
	#page-not-found img{margin:0.5em 0 ;}
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.gallery{width:100%}
	.section, .overlap-section{width:90%; margin:0 5%;}
	.twelve-3{width: 48.541%;} div.mobile{clear:both}
	.twelve-12{width: 88.541%;padding:0 5%}
	.gallery h3{margin-bottom:0.5em}
	.gallery p{margin-bottom:1em}
	.nav, .gallery{padding:1em 0}
	.gallery img{margin-left:0}
	
	p.about { color: #FFFFFF; left: 27%; line-height: 1.2em; position: absolute; top: 144px; width: 34%;}
	
	.sidebar{clear:none; width:20%; padding:0 }
	#blog .twelve-8{clear:none; width:72.541%; margin:0}
	.sidebar h3{float:right; clear:none; width:100%; margin:0 }
	.sidebar ul{float:right; clear:none; width:100%; margin:0}
	#blog .sidebar h3, #blog .sidebar ul {margin-bottom:1em}
	#page-not-found img{margin:0.5em 0 ;}
	
}
/* High Resolution (iPhone 4) */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	h1#logo a { background:url("../images/logoRet.png") no-repeat; background-size: 170px 39px; background-position:center}	
	
}