article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block}
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
:hover, :focus, :active { outline: none; }


html, button, input, select, textarea {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 400; /* normal */
	color: #555;
	font-smooth:always;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);}

	body { margin: 0; font-size: 13px; line-height: 1.6; }

	a { color: #97d2a4; font-weight: normal;
		cursor: pointer;  text-decoration: none;
		transition:color 0.2s ease; -moz-transition:color 0.2s ease; -webkit-transition:color 0.2s ease; -o-transition:color 0.2s ease;}

		a:hover { color: #000; text-decoration: underline; background: rgba(0, 0, 0, .025);}

		::-moz-selection { background: #0078CF; color: #fff; text-shadow: none; }
		::selection { background: #0078CF; color: #fff; text-shadow: none; }

		p{margin: 0 0 1em;}
		p:last-child {margin-bottom: 0;}

		a:visited{opacity:0.9;}
		a:active, a:focus{position:relative;top:1px;}

		dfn{font-style:italic}
		hr{display:block; height:1px; border:0; border-top:1px solid #ddd; margin:1em 0; padding:0}
		pre, code, kbd, samp{font-family:monospace,monospace; _font-family:'courier new',monospace; font-size:1em}
		q{quotes:none}
		q:before, q:after{content:""; content:none}

		blockquote { margin: 1em 1em 1em 0; padding: 1em; border-left: 1px solid #DDD; font-style: italic; color: #999;}
		blockquote p {font-size: 1.1em;line-height: 2em;margin-bottom: 0;}
		blockquote small {display: block;font-size: 1em;line-height: 1.6em;color: #bfbfbf; text-align: right;}
		blockquote small:before {content: '\2014 \00A0';}

		b, strong{font-weight:700}
		small{font-size:85%; color: #999;}
		sub, sup{font-size:75%; line-height:0; position:relative; vertical-align:baseline}
		sup{top:-0.5em}
		sub{bottom:-0.25em}
		dd{margin:0 0 0 40px} dt{font-weight: 700;}
		ul, ol{list-style:none; list-style-image:none; margin:0; padding:0;}
		img{border:0; -ms-interpolation-mode:bicubic; vertical-align:middle; display: block; margin-left: auto; margin-right: auto;}
		#issuu {display: block; margin-left: auto; margin-right: auto;}
		#calendar {margin-top: -4em;}
		figure{margin:0}
		form{margin:0}
		fieldset{border:0; margin:0; padding:0}
		label{cursor:pointer}
		legend{border:0; *margin-left:-7px; padding:0;white-space: normal;}
		button, input, select, textarea{font-size:100%; margin:0; vertical-align:baseline; *vertical-align:middle}
		button, input{line-height:normal; *overflow:visible}
		button, input[type="button"], input[type="reset"], input[type="submit"]{cursor:pointer; -webkit-appearance:button}
		input[type="checkbox"], input[type="radio"]{box-sizing:border-box}
		input[type="search"]{-webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box}
		input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
		button::-moz-focus-inner, input::-moz-focus-inner{border:0; padding:0}
		textarea{overflow:auto; vertical-align:top; resize:vertical}
		table{border-collapse:collapse; border-spacing:0}
		td{vertical-align:top}
		.chromeframe { margin: 1em 0; background: red; color: black; padding: 1em; }


/* -- TYPO
------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{margin:0 0 1em; font-weight: normal;}

h1 {font-size: 4.1em;
	letter-spacing: -0.075em;
	text-transform: uppercase;
	line-height: 0.9;
	color: #555;
	margin: 0 0 0.5em;
	font-weight: normal; }
	h2 { font-size: 2.5em; margin: 0 0 20px; letter-spacing: -0.05em; color: #555; line-height: 1; }
	h3 { font-size: 1.75em; }
	h4 { font-size: 1.5em; }
	h5 { font-size: 1.17em; text-transform: uppercase; margin: 0; color: #555; }
	h6 { font-size: 1em; margin-bottom: 2px; font-weight: 700; }


/* -- GRID  https://github.com/mattberridge/Proportional-Grids/
------------------------------------------------------------- */
body{width:100%;}
.container {width: 90%; margin: 2em auto; max-width: 1100px; min-width: 300px;}

.grid-wrap {
	margin-left: -3em; /* the same as your gutter */
	overflow: hidden;
	*zoom:1;}
	.grid-wrap:before, .grid-wrap:after{content:""; display:table}
	.grid-wrap:after{clear:both}

	.grid {
		float: left;
		padding-left: 3em; /* this is your gutter between columns */
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		*behavior: url(/js/boxsizing.htc); }


		.col-full {width: 100%; }

		.col-one-third {width: 33.333%; }

		.col-one-quarter {width: 25%; }
		.col-three-quarters {width: 75%; }

		.divide-top{border-top: 1px solid #ccc;padding-top: 2em;margin-top: 1.5em; }

		.mbottom{ margin-bottom: 3em;}
		.halfmtop{ margin-top: 1.5em;}
		.halfmbottom{ margin-bottom: 1.5em;}

		.fright, .fleft{display:block; overflow:hidden}
		.fright{float:right}
		.fleft{float:left}

/* -- MISC
------------------------------------------------------------- */
figure { max-height: 100%; overflow: hidden;}
figure figcaption { }
img { max-width: 100%; height: auto; width: auto; }
a img {
	-webkit-transition: opacity 1s ease;
	-moz-transition: opacity 1s ease;
	-o-transition: opacity 1s ease;
	-ms-transition: opacity 1s ease;
	transition: opacity 1s ease; }
	a img:hover {
		*zoom: 1;
		opacity: 0.7;
		-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 70);
		filter: alpha(opacity = 70);}

		.img-circle {

			-webkit-border-radius: 500px;
			-moz-border-radius: 500px;
			border-radius: 500px;

		}
		dd {
			margin-left: 10px;
		}

/* -- HEADER
------------------------------------------------------------- */
header#navtop { clear: both; overflow: hidden; }
header nav ul { float: left; overflow: hidden; padding: 1em 3em 1em 2em; border-left: 1px solid #ddd; line-height: 2em;}
nav a, menu a { text-decoration: none; color: #555; }
.navactive { color: #97d2a4 }
.titulo {float: left; padding: 0.5em 3em 0 2em;}
.subTitulos {font-size: 2.5em; margin:0; text-transform: none;}
.subTitulos2 {font-size: 1.5em; margin:0;}

/* -- GENERAL
------------------------------------------------------------- */
.main > section { margin-bottom: 7em; }
.main header{ color: #555; margin-bottom: 3em; }
.main header hr{border-top-color:#999;}
.arrow:after {content:" \27F6"; /* html unicode: ⟶ */ }
header .arrow {color: #999; font-style: italic;}
.arrow:hover {color: #97d2a4; }


/* -- FOOTER
------------------------------------------------------------- */
footer  { color: #555; margin-bottom: 7em; }
footer nav ul { float: right; overflow: hidden; }
footer a {color: #999;}
footer li { float: left; margin-right: 1em; padding-right: 1em; border-right: 1px solid #DDD; font-size: 0.8em; }
footer li:last-child { margin-right: 0; padding-right: 0; border-right: none; }
.up a { display: block; text-align: center; margin: 0 auto; }

/* -- WORKS / Home-page and Works-page
------------------------------------------------------------- */
.works figure > a{
	display: block;
	height: 100%; width: 100%;
	overflow: hidden;
	position: relative;
	border-top: 1px solid #DDD; padding-top: 1em; }

	.works figure .zoom{
		display: block;
		position: absolute; top: 10px; left: 0;
		background: url(../img/zoom.png) no-repeat center;
		width: 100%; height: 100%;
		*zoom: 1;
		opacity: 0;
		-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 0);
		filter: alpha(opacity = 0); }

		.works figure figcaption{ margin-top: 1em; padding: 0 0.5em; white-space: nowrap; }
		.works figure figcaption a{line-height:2em; color: #555; font-weight: 700; }
		.works figure figcaption p{ margin: 0; }

		.works-page .works figure { margin-bottom: 3em;}

		.main aside{margin-bottom: 3em}
		.main aside menu{padding: 0 0 0 1em; line-height: 2em;}
		.main aside menu a{color: #999;}
		.main aside menu .buttonactive {color: #97d2a4 }


/* -- SUBPAGES
------------------------------------------------------------- */
/*Separations*/
/*.main:not(.home-page) > section article h2 { margin-top: 1em; padding-top: 1em; border-top: 1px solid #DDD; }
.main:not(.home-page) > section article:first-child h2 { margin-top: 0;}

/* Work-page (single) */
.work-page figure {margin-bottom: 3em;}
.work-page figcaption {text-align: center; margin-top: 1em;}

.tactive { background: #FFF }
.tactive:after {
	content: "\25BC";
	color: #555;}
	.tabs {
		display: block;
		margin: 0;
		padding: 0;
		border-bottom: solid 1px #ddd; }
		.tabs li {
			display: inline-block; margin-bottom: -1px; }
			.tabs li a {
				display: block;
				text-decoration: none;
				line-height: 3em;
				color: #555;
				padding: 0 2em;
				margin: 0;
				background: #f5f5f5;
				font-size: 1.1em;}
				.tabs li a:hover{color: #000;}
				.tabs li.active a{
					background: #fff;
					position: relative;
					border: 1px solid #DDD;
					border-bottom-color: #FFF;
					color: #111;
					-moz-border-radius-topleft: 2px;
					-webkit-border-top-left-radius: 2px;
					border-top-left-radius: 2px;
					-moz-border-radius-topright: 2px;
					-webkit-border-top-right-radius: 2px;
					border-top-right-radius: 2px; }

					.tab_container { margin-bottom: 1em; display: block; border-left: 1px solid #ddd; padding: 15px 15px 0;}
					.tab_container > article { display:none; }
					.tab_container > article:first-child { display: block; }

/* -------------------------------------------------------------
======	IE Fix
------------------------------------------------------------- */
.lt-ie9 .works figure a, .lt-ie9 .works figure a img { filter:inherit}
/* jquery filter opacity issue IE8 */

.lt-ie9 .container {min-width: 780px;}
.lt-ie8 .container {width: 960px;}
.lt-ie8 .grid-wrap {margin-left: 0; }
.lt-ie8 .grid {padding: 0;margin-left: 5%; }
.lt-ie8 .grid:first-child {margin-left: 0; }

.lt-ie8 .col-full {width: 99.95%; }
.lt-ie8 .col-full + .grid {margin-left: 0; }
.lt-ie8 .col-one-half {width: 47.45%; }
.lt-ie8 .col-one-third {width: 29.55%; }
.lt-ie8 .col-two-thirds {width: 64.95%; }
.lt-ie8 .col-one-quarter {width: 19.95%; }
.lt-ie8 .col-three-quarters {width: 74.95%; }



/* -------------------------------------------------------------
======	MEDIA QUERIES
------------------------------------------------------------- */

/* -- Media query 1 (mq1)
------------------------------------------------------------- */
@media only screen and (max-width: 60em) { /* 13 / 780 */
	.mq1-col-full {width: 100%; }
	.mq1-col-one-half {width: 50%; }
	.mq1-col-one-third {width: 33.333%; }
	.mq1-col-two-thirds {width: 66.666%; }
	.mq1-col-one-quarter {width: 25%; }
	.mq1-col-three-quarters {width: 75%; }
	/**/
	h1{font-size: 3.1em;}
	.slide figcaption{ width: 80%;}
	footer li { float: left; margin-right: 0.5em; padding-right: 0.5em; border-right: 1px solid #DDD;}
}

/* -- Media query 2 (mq2)
------------------------------------------------------------- */
@media only screen and (max-width: 48em) { /* 13 / 624 */
	.mq2-col-full {width: 100%;}
	.mq2-col-one-half {width: 50%; }
	.mq2-col-one-third { width: 33.333%; }
	.mq2-col-two-thirds {width: 66.666%; }
	.mq2-col-one-quarter {width: 25%; }
	.mq2-col-three-quarters {width: 75%; }
	/**/
	header nav { width: 100%; }
	header nav ul {  padding: 0 ; border-left:none; line-height: 2em; }
	header nav ul li { float: left;  padding: 0 1em ; border-left:1px solid #ddd; }
	.slider { margin-top: 3em; }
}

/* -- Media query 3 (mq3)
------------------------------------------------------------- */
@media only screen and (max-width: 30em) { /* 13 / 390 */
	.mq3-col-full { width: 100%; }
	.mq3-col-one-half { width: 50%; }
	.mq3-col-one-third { width: 33.333%; }
	.mq3-col-two-thirds { width: 66.666%; }
	.mq3-col-one-quarter { width: 25%; }
	.mq3-col-three-quarters { width: 75%; }
	.mq3-none {display: none;}
	/**/
	header nav ul li { padding: 0 0.5em ; }
	footer li { float: none; margin-right: 0em; padding-right: 0em; border-right: none; line-height: 2em;}
	.services article {	margin-top: 3em;} .services article:first-of-type {	margin-top: 0;}
}

/* -- PRINT STYLES
------------------------------------------------------------- */
@media print{
	*{background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important; -ms-filter:none !important}
	abbr[title]:after{content:"("attr(title) ")"}
	pre, blockquote{page-break-inside:avoid}
	thead{display:table-header-group}
	tr, img{page-break-inside:avoid}
	img{max-width:100% !important}
	p, h2, h3{orphans:3; widows:3}
	h2, h3{page-break-after:avoid}
}



/* -------------------------------------------------------------
======	END
------------------------------------------------------------- */

#logo {
	width: 71px;
	height: 71px;
	background:url(../img/sgmlogo.png) no-repeat 0 0;
}

#logo:hover {
	width:71px;
	height: 71px;
	background: url(../img/sgmlogo2.png) no-repeat 0 0;
}

header a:hover {
	background: none;
}

.uxwork p {
  font-size: 16px;
}

.uxwork figcaption p {
  font-size: 13px;
}

.video-responsive {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
}
.video-responsive iframe, .video-responsive object, .video-responsive embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}