/* 00. FONT FACE ================================================== */
@import url(//fonts.googleapis.com/css?family=Open+Sans);
@font-face{ 
	font-family: 'Socialico';
	src: url('webfonts/Socialico.otf');
	   url('webfonts/Socialico.ttf') format('truetype'),
	   url('webfonts/Socialico.svg#Socialico') format('svg');
}

/* 01. KEY FRAMES FADE IN ================================================== */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in { -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; opacity: 0.7; filter: alpha(opacity=70); -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s;
}
.fade-in.one {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}
/* ISOTOP IS THERE FOR SOFT TRANSITIONS BETWEEN WORKS */
.isotope .isotope-item { /* change duration value to whatever you like */ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s;
}
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity;
}
/* 03. MAX WIDTH 1024px ================================================== */
@media screen and (max-width: 1024px) {
nav #logo {	float:left;	display:inline-block;	margin-left:0px;	letter-spacing:2px;	padding:0 0 0 10px;	line-height:20px;	vertical-align:middle;
}
}
/* 04. MAX WIDTH 960px ================================================== */
@media screen and (max-width: 960px) {
.roles { font-size: 20pt;
}
#twitterwrap {	padding:30px 50px 30px;}
#ticker ul.tweet_list {
height:19px;
font:12px 'Open Sans';
}
ticker .tweet_list li {
overflow:hidden;
vertical-align:middle;
font:12px 'Open Sans';
color:#666;
height:30px;
}
.lead {	padding:10px 30px 10px 30px;	font:15px/1.5 'Open Sans';}
.lead1 {	padding:8px 30px 8px 30px;	font:12px/1.2 'Open Sans';}
.lead2 {	padding:8px 30px 8px 0px;	font:12px/1.2 'Open Sans'; color:#FFF}
}
/* 05. MAX WIDTH 720px ================================================== */
@media screen and (max-width: 720px) {
.roles { font-size: 20pt;
}
nav {	width:100%;	height:90px;	background-color:#FFF;	margin:0px;	z-index:100;	text-align:center;
}
nav #logo {	padding:0 0 0 10px;	width:100%;	text-align:center;
}
.nav {	padding:0px;	text-align:center;	margin:0px auto;}
nav ul {	width:100%;	text-align:center;	margin-top:0px;}
nav ul li a {	margin:5px 8px 0px 8px;	padding:5px 0px;}
}
/* 06. MAX WIDTH 520px ================================================== */
@media screen and (max-width: 520px) {
header {	background-size:400%;}
header h1 img{ width:45%;}
nav {height:70px;}
nav ul {display: none;}
.lead {	padding:10px 30px 10px 30px;	font:15px/1.5 'Open Sans';}
.lead1 {	padding:8px 30px 8px 30px;	font:12px/1.2 'Open Sans';}
.lead2 {	padding:8px 30px 8px 0px;	font:12px/1.2 'Open Sans';color:#FFF}
.loadmore{	display: none;
}
#contact .row .col1 {	width:90%;}
#contact .row .col2 {	width:90%;	margin-top:30px;	text-align: center;}
#contact .inner blockquote p{	color:#fff;	text-transform:uppercase;	font:14px/1.3 'Open Sans';
}
#contact .inner form input[type="text"],
#contact .inner form input[type="email"],
#contact .inner form textarea {	width:95%;
}
#contact .inner form .submit {	width:100%;}
footer {	font-size:9px;}
.b_wrapper{ width:80%; margin:0 auto; float:none} 
}
/* 07. Smartphones (landscape) ================================================== */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
header {	height:180px;
}
header h1 img{ width:45%;}
#tab a{	position:absolute;	bottom:-40px;}
header h1 {	margin-top:50%;	font-size:30pt;}
#wrapper {	position:absolute;	top:180px;	width:100%;}
#about .inner h2,
#contact .inner h2,
#portfolio h2 {	font:20pt/1.5 'Open Sans';}
nav ul li a {	margin:5px 5px 0px 5px;	padding:5px 0px;}
nav ul li:last-child {	display:none;}
nav #logo {	margin-left:0px;	padding:0 0 0 5px;
}
nav ul li a {	font-size:5pt;}
nav {	height:60px;
}
.b_wrapper{ width:80%; margin:0 auto; float:none} 
}
/* 07. Smartphones (portraits) ================================================== */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) {
header {	height:417px;
}
header h1 img{ width:45%;}
#wrapper {	position:absolute;	top:417px;	width:100%;}
#tab a{	position:absolute;	bottom:-60px;}
header h1 {	margin-top:50%;	font-size:30pt;}
#about .inner h2,
#contact .inner h2,
#portfolio h2 {	font:20pt/1.5 'Open Sans';}
nav ul li a {	margin:5px 5px 0px 5px;	padding:5px 0px;}
nav ul li:last-child {	display:none;}
.b_wrapper{ width:80%; margin:0 auto; float:none} 
}
/* 07. iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
/* 07. iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
header h1 {	margin-top:50%;}
}
/* 07. iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
header h1 {	margin-top:50%;}
}
/* 08. PORTRAITS Media Queries ================================================== */
/* 3 COL */
@media (max-width: 800px){ #portraits li{ width: 31%; padding-top: 0%; margin-bottom: 3%; }
}
/* 2 COL */
@media (max-width: 600px){ #portraits li{ width: 46%; padding-top: 0%; margin-bottom: 4%; }
}
/* SINGLE COL */
@media (max-width: 400px){ #portraits li, #whatwedo #portraits li, #howwedo #portraits li{ width: 75%; padding-top: 0%; margin-bottom: 5%; }
}
/* 08. WORKS GRID Media Queries ================================================== */
@-webkit-keyframes loader {	0% { background: #ddd; }	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@-moz-keyframes loader {	0% { background: #ddd; }	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@keyframes loader {	0% { background: #ddd; }	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}
@media screen and (max-width: 830px) {	.og-expander h3 { font-size: 32px; }	.og-expander p { font-size: 13px; }	.og-expander a { font-size: 12px; }	.og-fullimg { margin-top:5%; }
}
@media screen and (max-width: 650px) {	.og-fullimg { display: none; }	.og-details { float: none; width: 100%; }