/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
:focus {/* remember to define focus styles! */
	outline: 0; }
body { background: #fff; line-height: 1; }
ol, ul { list-style: none; }
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: 0; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }

strong { font-weight: bold }
em { font-style: italic }
a { outline:none; }
img { display:block; }


/* Colors

Portfolio Red = #d2222a
Clients Green = #74a070
Current Projects Blue = #00adee
Principals / Group M Gallery / Contact Yellow = #ffd356

*/



/* Common
----------------------------------------------- */

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);

body {
	background:#000;
	color:#000;
	font: 9px/16px "Arial", sans-serif;
}

a {
	color:#bfd3bd;
	text-decoration:none;
}

a:hover { color:#ffd356; }

.clear { clear:both; }
.image { display:block; text-indent:-9999px; }
#wrapper { height:612px; width:792px; margin:50px auto 50px; background:#000; overflow:hidden; }
.custom-video #wrapper {  padding-bottom:56.25%; width:90%; max-width:1280px; }
.ie7 #wrapper { position:relative; }
.bg #wrapper { background:#000 url(../imgs/bg-group_m.jpg); }
.left { float:left; }
.right { float:right; }
.hide { display:none; }
.mobile { display:none; }

/* Sprites
----------------------------------------------- */

#primary-nav a, header, h2.icon, .dot { background-image: url(../imgs/sprite.png); background-repeat:no-repeat; }

/* Structure
----------------------------------------------- */

#secondary-nav {
	position:relative;
	height:167px;
	width:792px;
}

#content {
	height:338px;
	width:338px;
	margin-left:227px;
	overflow:visible;
}

.home #content, .mobile-home #content {
	height:338px;
	width:338px;
}

header {
	height:75px;
	width:207px;
	background-position:0 -58px;
}

#primary-nav {
	width:792px;
	padding:32px 0 0 0;
}

/* Navs & Lists
----------------------------------------------- */

#primary-nav ul {
	position:relative;
	height:56px;
}

#primary-nav li {
	position:absolute;
	height:56px;
	width:56px;
}

#primary-nav .last { margin:0; }

#primary-nav a {
	height:56px;
	width:56px;
}

#portfolio-obj { left:137px; }
#clients-obj { left:234px; }
#current-projects-obj { left:325px; }
#principals-obj { left:417px; }
#group-m-gallery-obj { left:506px; }
#contact-obj { left:597px; }

#primary-nav a:hover, 
.portfolio #portfolio-btn, 
.clients #clients-btn, 
.current-projects #currentprojects-btn,
.group-m-gallery #group-m-gallery-btn,
.contact #contact-btn { background-color:#f2d360; }
#portfolio-btn, .portfolio h2 { background-position:0 0; }
#clients-btn, .clients h2 { background-position:-56px 0; }
#current-projects-btn, .current-projects h2 { background-position:-112px 0; }
#principals-btn, .principals h2 { background-position:-168px 0; }
#group-m-gallery-btn, .group-m-gallery h2 { background-position:-224px 0; }
#contact-btn, .contact h2 { background-position:-280px 0; }

#secondary-nav ul {
	position:absolute;
	top:30px;
	color:#fff;
	font-size:11px;
	line-height:15px;
}

#portfolio-nav { left:137px; }
#clients-nav { left:234px; }
#current-projects-nav { left:325px; }
#principals-nav { left:417px; }
#group-m-gallery-nav { left:506px; }
#contact-nav { left:597px; }

#portfolio-nav .hdr { color:#d2222a; }
#clients-nav .hdr { color:#74a070; }
#current-projects-nav .hdr { color:#00adee; }
#principals-nav .hdr { color:#ffd356; }
#group-m-gallery-nav .hdr { color:#ffd356; }
#contact-nav .hdr { color:#ffd356; }

.branding #branding-btn,
.corporate-communications #corporate-communications-btn,
.educational-collateral #educational-collateral-btn,
.museums-and-non-profit #museums-and-non-profit-btn,
.packaging #packaging-btn,
.portfolio.retail #retail-btn,
.web #web-btn,
.corporate #corporate-btn,
.higher-education #higher-education-btn,
.hospitality #hospitality-btn,
.museums #museums-btn,
.non-profit #non-profit-btn,
.clients.retail #retail-clients-btn,
.anita-bassie #anita-bassie-btn,
.tomas-sokol #tomas-sokol-btn { color:#ffd356; }

#gallery-nav {
	width:180px;
	margin:86px 0 0 0;
}

#gallery-nav li { 
	float:left;
	margin:0 12px 12px 0;
	text-align:left;
}

#clients-list { 
	margin:25px 25px;
	font-size:11px;
}

/* Headers
----------------------------------------------- */

.contact h1 {
	margin:25px 0 0 0;
	font-size:25px;
}

.contact h1 a {
	color:#f2d360;
}

h2 {
	height:56px;
	width:56px;
	margin:132px auto 0;
	background-color:#f2d360;
}

.principals h2, .contact h2 { background-color:transparent; }

/* Paragraphs
----------------------------------------------- */

.home .right p, .mobile-home .right p {
	width:200px;
	padding:12px 0 0 0;
	color:#fff;
	font-size:13px;
	line-height:19px;
	letter-spacing:.1em;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:200;
}

.contact .right header p {
	margin:15px 0 0 0;
	color:#fff;
	font-size:11px;
	letter-spacing:.3em;
}

/* Links
----------------------------------------------- */

header a {
	display:block;
	height:75px;
	width:223px;
}

.contact header a {
	height:auto;
	width:auto;
}

.home #content a, .mobile-home #content a, .about #content a { 
	display:block;
	padding:1px;
}
.home #content a:hover, .mobile-home #content a:hover, .about #content .active { background-color:#f2d360; }

#gallery-nav a { color:#f2d360; }
#gallery-nav .active { font-weight:bold; }

.dot {
	height:10px;
	width:10px; 
	/* background-position:-229px -58px; */
	background-position:-263px -58px;
}

.dot.active, .dot:hover { /* background-position: -244px -58px; */ background-position: -277px -58px; }


/* Forms
----------------------------------------------- */

.contact p {
	padding-top:10px;
	color:#fff;
	font-size:12px;
}

#message-form {
	width:207px;
	padding-top:10px;
	color:#fff;
	font-size:12px;
}

#message-form p {
	padding:10px 0;
}

#email {
	height:20px;
	width:207px;
	margin-bottom:10px;
}

textarea {
	height:70px;
	width:207px;
}



/* Page Styles
----------------------------------------------- */

.portfolio.index #content { background-color:#d2222a; }
.clients #content { background-color:#74a070; }
.current-projects #content { background-color:#00adee; }
.principals.index #content { background-color:#eaaf0f; }
.group-m-gallery.index #content { background-color:#535249; }
.contact #content { background:transparent url(../imgs/pic-group_m.jpg) 0 0 no-repeat; }

/* Video
----------------------------------------------- */

.custom-video #wrapper { height:100%; position:relative; }
.video-content { position:absolute; }

.custom-video img { margin:0 auto; }

@media only screen and (max-width: 760px) {

	.desktop {
		display:none;
	}

	.mobile {
		display:block;
	}

	body {
		/* background:#fff; */
		color:#000;
		font: 9px/16px "Arial", sans-serif;
	}

	#wrapper { height:auto; width:100%; /* max-width:338px;*/ margin:0 auto; /*background:#fff;*/ }
	/*.bg #wrapper { background:#fff; } */

	#content {
		float:none;
		height:auto;
		width:100%;
		max-width:338px;
		padding:0;
		margin:0;
	}

	.mobile-home #content {
		height:auto;
		width:100%;
	}

	#content img {
		width:100%;
	}

	#mobile-nav {
		margin-top:30px;
	}

	#mobile-nav ul {
		width:100%;
		max-width:338px;
	}

	#mobile-nav ul li {
		font-size:16px;
		padding:10px 0;
	}

	#mobile-nav > ul > li {
		border-top:1px solid #000;
	}

	#mobile-nav > ul > li:last-child {
		border-bottom:1px solid #000;
	}

	#mobile-nav ul li div {
		margin-top:10px;
		border-top:1px solid #000;
	}

	#mobile-nav ul li div p {
		margin:10px 0;
		font-size:16px;
		line-height:30px;
	}

	#mobile-nav ul li a {
		color:#000;
	}

	#mobile-nav ul li a span {
		float:right;
	}

	.mobile-home #content #mobile-nav ul li a:hover {
		color:#000;
		background:#fff;
	}

	.mobile-home #content a:hover { background-color:transparent; }


	.swipe {
	  	overflow: hidden;
	  	visibility: hidden;
	  	position: relative;
	}
	.swipe-wrap {
	  	overflow: hidden;
	  	position: relative;
	}
	.swipe-wrap > div {
	  	float:left;
	  	width:100%;
	  	position: relative;
	}
	#content .left-arrow {
		position:absolute;
		top:0;
		left:0;
		width:54px;
	}
	#content .right-arrow {
		position:absolute;
		top:0;
		right:0;
		width:30px;
	}


	.custom-video img { margin:50px auto; width:90%; }

}