/* -- sprites -- */

#contactPatch, #contactPatch a
{ background: url('../Images/iconSprite.png') no-repeat 0 0px; }


/* -- misc -- */

.left { float: left; }
.right { float: right; }

.tc { margin-top: 40px !important; text-align: center; }
.tc img { 
	display: inline-block;
	margin: 10px;
	vertical-align: middle;
	max-height: 50px; }


quote { 
	display: block;
	font: normal 14px/20px 'BotonLightItalic';
	clear: both; }

.quoteAuthor {
	font-size: 12px;
	float: right;
	display: block;
	margin: 2px 0 10px; }

#contactPatch {
	position: fixed;
	top: 50%;
	margin-top: -111px;
	right: 0;
	width: 33px;
	padding: 25px;
	height:172px;
	background-position: right top;
	text-align: center;
	z-index: 9; }

#contactPatch span {
	font: normal 12px/20px 'BotonLightItalic';
	color: #fff;
	display: block;
	margin-bottom: 10px;
	display: none; }

#contactPatch a {
	display: block;
	width: 36px;
	height: 36px;
	padding-bottom: 30px; }

#contactPatch a.callLink { background-position: left -354px; }
#contactPatch a.mailLink { background-position: left -272px; }
#contactPatch a.linkedin { background-position: left -426px; }

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.7); }

.hidden { display: none; }
	
#sent, #not-sent {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 40px;
	padding: 20px;
	margin:-30px 0 0 -220px;
	text-align: center;
	background: #333;
	color: #fff; }

/* -- navigation -- */

header {
	position: fixed;
	top:0;
	left: 0;
	width: 96%;
	padding: 10px 2%;
	z-index: 9;
	background: #fff; }

header nav[role="navigation"] { float: right; margin-top: 20px; }

header nav[role="navigation"] ul { margin: 0; padding: 0; }

header nav[role="navigation"] ul li { 
	float: left;
	margin: 10px; }
		
header nav[role="navigation"] ul li a { 
	display: block;
	padding: 5px;
	font: normal 22px/22px 'BotonRegular';
	letter-spacing: 1px;
	color: #444; }


/* -- header -- */

#logo { width: 240px; float: left; }
#logoDevice { display: none; }

/* -- content -- */

.stockholm {
	margin: 0 auto;
	display: block; }

.container {
	width: 100%;
	position: relative; }

.container .icon {
	width: 150px;
	display: block;
	position: fixed;
	bottom: 10%;
	left: 10px; }

.container section { padding-top: 60px; padding-bottom: 60px; }
.container section#introduction { padding-top: 120px; padding-bottom: 60px; }

hgroup { position: relative; }

hgroup h1 { 
	margin-top: 10%;
	margin-bottom: 15px;
	font-size: 52px; }
	
#introduction hgroup {
	position: absolute;
	top: 90px;
	left: 30px;
	width: 520px; }

#introduction p {
	font: normal 20px/20px "BotonRegular";
	margin-top: 30px; }

#introduction hgroup h1 { font-size: 65px; color: #fff; }
	
#services .quarter { height: 350px; }

hgroup h3 { 
	position: absolute;
	top: -25px;
 	margin: 0;	
	width: 100%;
	text-align: center;
	color: #8DA62A;
	font-size: 16px;
	letter-spacing: 1px; }

#introduction article p {
	font-size: 18	px;
	line-height: 30px;
}

/* -- footer -- */

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #333;
	padding: 5px 0; }

footer p { 
	font-size: 10px; 
	color: #ddd;
	margin:0 20px; }
	
footer p.right { margin-right: 36px; }

/* -- plugins -- */

/* -- animations -- */

a, col {
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-o-transition-duration: 0.4s;
	-ms-transition-duration: 0.4s;
	transition-duration: 0.4s; }



/* -- responsive & gridsystem -- */

/* 	prevents a common problem of ghost paddings/margins/widths that exceeds the
	width of window and causes a scroll-x visible in mobile devices. @uthor Gio */
html { overflow-y: scroll; }
body { position: relative; width: 100%; overflow: hidden; }

.wrapper {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	position: relative; }

.col {
	position: relative;
	float: left;
	margin: 10px 1.5%; }

.col.full { width: 97%; }
.col.half { width: 47%; }
.col.third { width: 30.33333%; }
.col.twoThirds { width: 63.66666%; }
.col.quarter { width: 22%; }
.col.threeQuarters { width: 72%; }
.col.quinary { width: 17%; }
.col.twoQuinaries { width: 37%; }
.col.threeQuinaries { width: 57%; }
.col.fourQuinaries { width: 77%; }

.col.max { margin: 0; }
.col.max.full { width: 100%; }
.col.max.half { width: 50%; }
.col.max.thirds { width: 33.33333%; }
.col.max.twoThirds { width: 66.66666%; }
.col.max.quarter { width: 25%; }
.col.max.threeQuarters { width: 75%; }
.col.max.quinary { width: 20%; }
.col.max.twoQuinaries { width: 40%; }
.col.max.threeQuinaries { width: 60%; }
.col.max.fourQuinaries { width: 80%; }

.col.center {
	margin: 10px auto; 
	clear: both; 
	float: none; }
	
.centerContent { text-align: center; }

.col .spacing { padding: 10px; }

.responsiveGrids .col {
	padding: 10px 0; /* REMOVE. Only used for example */
	background: #000; /* REMOVE. Only used for example */
	height: 40px;
	color: #fff;
	font-size: 16px;
	text-align: center; }
	
.responsiveGrids .col span { display: block; }

/* Desktop > 1024 */
@media only screen and (min-width: 1025px){

}

/* tablet landscape */
@media only screen and (max-width: 1024px){
	
	.col.tabFull { width: 97%; }
	.col.tabHalf { width: 47%; }
	.col.tabThird { width: 30.33333%; }
	.col.tabTwoThirds { width: 63.66666%; }
	.col.tabQuarter { width: 22%; }
	.col.tabThreeQuarters { width: 72%; }
	.col.tabQuinary { width: 17%; }
	.col.tabTwoQuinaries { width: 37%; }
	.col.tabThreeQuinaries { width: 57%; }
	.col.tabFourQuinaries { width: 77%; }

	.col.tabMax { margin: 0; }
	.col.tabMax.tabFull { width: 100%; }
	.col.tabMax.tabHalf { width: 50%; }
	.col.tabMax.tabThirds { width: 33.33333%; }
	.col.tabMax.tabTwoThirds { width: 66.66666%; }
	.col.tabMax.tabQuarter { width: 25%; }
	.col.tabMax.tabThreeQuarters { width: 75%; }
	.col.tabMax.tabQuinary { width: 20%; }
	.col.tabMax.tabTwoQuinaries { width: 40%; }
	.col.tabMax.tabThreeQuinaries { width: 60%; }
	.col.tabMax.tabFourQuinaries { width: 80%; }
	
	.col.tabCenter { 
		margin: 10px auto; 
		clear: both; 
		float: none; }
		
	.col.tabCenterReset {
		position: relative;
		float: left;
		margin: 10px 1.5%; }
}

@media only screen and (max-width: 820px) {
	header nav[role="navigation"] ul li a {
		font: normal 16px/18px 'BotonRegular';
	}
}

/* mobile portrait */
@media only screen and (max-width: 600px){
	
	.col.mobFull { width: 97%; }
	.col.mobHalf { width: 47%; }
	.col.mobThird { width: 30.33333%; }
	.col.mobTwoThirds { width: 63.66666%; }
	.col.mobQuarter { width: 22%; }
	.col.mobThreeQuarters { width: 72%; }
	.col.mobQuinary { width: 17%; }
	.col.mobTwoQuinaries { width: 37%; }
	.col.mobThreeQuinaries { width: 57%; }
	.col.mobFourQuinaries { width: 77%; }
	
	.col.mobMax { margin: 0; }
	.col.mobMax.mobFull { width: 100%; }
	.col.mobMax.mobHalf { width: 50%; }
	.col.mobMax.mobThirds { width: 33.33333%; }
	.col.mobMax.mobTwoThirds { width: 66.66666%; }
	.col.mobMax.mobQuarter { width: 25%; }
	.col.mobMax.mobThreeQuarters { width: 75%; }
	.col.mobMax.mobQuinary { width: 20%; }
	.col.mobMax.mobTwoQuinaries { width: 40%; }
	.col.mobMax.mobThreeQuinaries { width: 60%; }
	.col.mobMax.mobFourQuinaries { width: 80%; }
	
	.col.mobCenter { 
		margin: 10px auto; 
		clear: both; 
		float: none; }
		
	.col.mobCenterReset {
		position: relative;
		float: left;
		margin: 10px 1.5%;
		padding: 0 1.5%; }
	
	.topSpace { margin-top: 10px !important ;}
	header { background: #333; position: relative; padding-bottom: 90px;}
	#logo {display: none;}
	#logoDevice { display: block; width: 160px; margin: 0 auto; }
	header nav[role="navigation"] { float: none; }
	header nav[role="navigation"] ul { text-align: left; }
	header nav[role="navigation"] ul li { float: none; margin:20px; }
	header nav[role="navigation"] ul li a { color: #8DA62A; font-size: 20px; }
	#contactPatch { margin-top: 0; top: 90px; position: absolute; }
	.container section,
	.container section#introduction { padding-top: 20px; padding-bottom: 60px; }
	hgroup h1, #introduction hgroup h1 { font-size: 40px; color: #444; }
	footer { position: relative; text-align: center; }
	footer p { float: none !important; }
	input[type="text"], textarea { margin:10px auto; display: block; }
	#services .quarter {height: auto; margin-bottom: 20px;}
	.container .icon, .stockholm { display: none; }
	#introduction hgroup {
		position: relative;
		top: auto;
		left: auto;
		width: auto; }
}