html {
		font-size: 80%; /*12.8px*/
}

body {
	font-family: "brandon-grotesque-n4", "brandon-grotesque", arial, sans-serif;
	line-height: 1.6;
	font-weight: 400;
	font-size: 1.00em;
	color: #333333;
	margin: 0;
	background-color: #f4f5f0;
	background: url(../images/T_bg_beige.jpg);
}

/* Ikoner från icomoon */
@font-face {
	font-family: 'Tamkin';
	src:url('../fonts/Tamkin.eot');
	src:url('../fonts/Tamkin.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Tamkin.woff') format('woff'),
		url('../fonts/Tamkin.ttf') format('truetype'),
		url('../fonts/Tamkin.svg#Tamkin') format('svg');
	font-weight: normal;
	font-style: normal;
}
[data-icon]:before {
	font-family: 'Tamkin';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-tamkin_strategi, .icon-tamkin_utveckling, .icon-tamkin_logga, .icon-pil_right, .icon-pil_left, .icon-tamkin_design, .icon-tamkin_projekt {
	font-family: 'Tamkin';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-tamkin_strategi:before {
	content: "\22";
}
.icon-tamkin_utveckling:before {
	content: "\25";
}
.icon-tamkin_logga:before {
	content: "\26";
}
.icon-pil_right:before {
	content: "\27";
}
.icon-pil_left:before {
	content: "\28";
}
.icon-tamkin_design:before {
	content: "\24";
}
.icon-tamkin_projekt:before {
	content: "\21";
}



/*Layout*/
.area {
	width: 92%;
	padding-left: 4%;
	padding-right: 4%;
	max-width: 980px;
	margin: auto;
}
#portfolio .area {
	max-width: 1000px;
}


/* ------------- Typografi -------------- */
h1 {
	margin-bottom: 0px;
	font-style: normal;
	font-weight: 900;
	font-family: "brandon-grotesque-n9", "brandon-grotesque", arial, sans-serif;
	font-size: 3.875em;
	line-height: 1.2em;
	text-transform: uppercase;
	margin-bottom: 1em;
}
h2 {
	font-weight: 900;
	font-family: "brandon-grotesque-n9", "brandon-grotesque", arial, sans-serif;
	font-size: 2.8em;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 0px;
	margin-bottom: 1em;
	line-height: 1.2;
}
h3 {
	font-style: black;
	font-weight: 900;
	font-family: "brandon-grotesque-n9", "brandon-grotesque", arial, sans-serif;
	font-size: 1.7em;
	line-height: 1.15em;
	text-transform: uppercase;
}

p {
	font-style: normal;
	font-weight: 400;
	font-family: "brandon-grotesque-n4", "brandon-grotesque", arial, sans-serif;
	font-size: 1.375em;
	margin-top: 1em;
	margin-bottom: 1em;
}
a {
	text-decoration: underline;
	color: #333333; /*brödtext*/
	transition: all 0.3s;
}
a:hover,
a:active,
a:focus {
	color: #f4628f; /*dark pink*/
}
.ie7 a { /*?*/
	color: #ed8e92;
}
@media all and (min-width: 281px) {
	h1 {
		font-size: 2.2em;
	}
}
@media all and (min-width: 321px) {
	html {
		font-size: 90%; /*14.4px*/
	}
	h4 {
		font-size: 1.250em;
	}
}
@media all and (min-width: 500px) {
	h3 {
		font-size: 2.125em;
	}
}
@media all and (min-width: 601px) {
	html {
		font-size: 100%; /*16px*/
	}
	h1 {
		font-size: 3.875em; /*62px*/
	}
	h2 {
		font-size: 4.625em; /*74px*/
	}
	h4 {
		font-size: 1.125em;
	}
	#linje {
		margin-bottom: 6em;
	}
}

/* ------------ Elements -------------- */
.linje {
	width: 120px;
	display: block;
	text-align: center;
	margin: 4em auto 5em auto;
	border-bottom: 0.7em solid #333333; /*brödtext*/
}
#portfolio .linje {
	border-color: #f4f5f0; /*vit brödtext*/
	margin-bottom: 6em;
}


/* ------------ Header ------------ */

header {
	position: relative;
	margin-bottom: 0em;
	padding: 3em 0 5em;
	background: #000 url(../images/T_bg_gron_mork.jpg) 0 0 repeat;
	background-position: bottom;
	text-align: center;
}
.backgroundsize header {
	background: #000 url(../images/T_toppbild.jpg) 0 0 no-repeat;
	background-size: cover;
}
header p {
	font-family: "brandon-grotesque-n4","brandon-grotesque", arial, sans-serif;
	color: #f4f5f0; /*vit brödtext*/
	margin: 2em auto 2em auto;
	font-size: 1.625em; /*26px*/
	line-height: 1.5;
	max-width: 840px;
}
header a.button {
	font-style: black;
	font-weight: 900;
	font-family: "brandon-grotesque-n9", "brandon-grotesque", arial, sans-serif;
	text-transform: uppercase;
	color: #1a1a1a; /*button text*/
	padding: 1em 1em 0.8em 1em;
	text-align: center;
	font-size: 1em;
	margin: 0 0 1em 0;
	clear: both;
	display: block;
	text-decoration: none;
	background-color: #FF6E94; /*light pink*/
	border-bottom: 4px solid #DD547F; /*border pink*/
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-0-transition: all .3s linear;
	transition: all .3s linear;
}
header a.button:hover,
header a.button:active,
header a.button:focus {
	text-decoration: none;
	background-color: #f4628f; /*dark pink*/
	color: #1a1a1a; /*button text*/
}
header .logo {
	width: 80%;
	height: auto;
	max-width: 446px;
	margin: 0 auto;
}
header .logo img {
	width: 100%;
	height: auto;
}
header .logo .logo_big,
header .logo .logo_print {
	display: none;
}
.backgroundsize .bar1 {
	background: url(../images/T_bg_kant1_stor.png) repeat-x;
	height: 60px;
	background-size: auto 100%;
	z-index: 10;
	position: relative;
	top: -30px;
}
.backgroundsize .bar2 {
	background: url(../images/T_bg_kant2_stor.png) repeat-x;
	height: 60px;
	background-size: auto 100%;
	z-index: 10;
	position: relative;
	top: 30px;
}
.no-backgroundsize .bar1 {
	background: url(../images/T_bg_kant1.png) repeat-x;
	height: 60px;
	z-index: 10;
	position: relative;
	top: -30px;
}
.no-backgroundsize .bar2 {
	background: url(../images/T_bg_kant2.png) repeat-x;
	height: 60px;
	z-index: 10;
	position: relative;
	top: 30px;
}

@media all and (min-width: 601px) {
	header {
		padding-top: 4em;
		padding-bottom: 6em;
	}
	header a.button {
		width: 180px;
		clear: none;
		display: inline-block;
	}
	header a.button.first {
		margin-right: 1em;
	}
	header .logo .logo_small {
		display: none;
	}
	header .logo .logo_big {
		display: block;
	}
	header .logo {
		margin-bottom: 5em;
	}
}
@media all and (min-width: 741px) {
	header {
		padding-top: 4em;
		padding-bottom: 7em;
	}
	header a.button {
		width: 220px;
	}
}
@media all and (min-width: 881px) {
	header {
		padding-top: 6em;
		padding-bottom: 8em;
	}
}
@media all and (min-width: 940px) {
	header {
		padding-top: 8em;
		padding-bottom: 8em;
	}
}

/* ------------ Våra tjänser ------------ */

#tjanster {
	text-align: center;
}
#tjanster .tjanst {
	clear: both;
	height: 100%;
	overflow: hidden;
	margin: auto;
	margin-bottom: 3em;
}
#tjanster .tjanst.projekt {
	margin-bottom: 2em;
}
#tjanster .info {
	float: left;
	width: 100%;
	display: inline-block;
}

#tjanster h3 {
	margin-top: 0.4em;
	margin-bottom: 0;
}

#tjanster .ikon {
	font-size: 10em;
	line-height: 1em;
	float: left;
	width: 100%;
	display: inline-block;
}
#tjanster .webbutveckling .ikon {
	font-size: 8em;
	line-height: 1.1;
}

.no-fontface #tjanster .kommunikation .ikon {
	background: url(../images/tamkin_icon_strategi.png) 50% 0 no-repeat;
}
.no-fontface #tjanster .design .ikon {
	background: url(../images/tamkin_icon_design.png) 50% 0 no-repeat;
}
.no-fontface #tjanster .projekt .ikon {
	background: url(../images/tamkin_icon_projekt.png) 50% 0 no-repeat;
}
.no-fontface #tjanster .webbutveckling .ikon {
	background: url(../images/tamkin_icon_webbutveckling.png) 50% 0 no-repeat;
}
@media all and (min-width: 741px) {
	#tjanster {
		text-align: left;
	}
	#tjanster .ikon {
		float: left;
		width: 20%;
		text-align: center;
	}
	#tjanster .info {
		float: right;
		width: 75%;
		text-align: left;
	}
}


/* ------------ Projekt ------------ */

#portfolio .wrapper {
	border-bottom: 1px solid #494F51; /*linje portfolio*/
}
#portfolio .wrapper.first {
	border-top: 1px solid #494F51; /*linje portfolio*/
}
#portfolio .wrapper .intro {
	padding: 2em 0;
	text-align: center;
}
#portfolio .wrapper .intro .inner img {
	transition: all 1s;
	-webkit-transition: all 1s;
}

#portfolio .wrapper .intro .inner {
	max-width: 590px;
	margin: 0 auto;
}
#portfolio .wrapper .intro a {
	height: 100%;
	overflow: hidden;
	display:block;
	position: relative;
	text-decoration: none;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

#portfolio .intro .rubrik {
	font-family: "brandon-grotesque-n9", "brandon-grotesque", arial, sans-serif;
	font-size: 2.125em; /*34px*/
	font-weight: 900;
	margin: 0 auto 0.3em auto;
	clear: right;
	display: block;
	line-height: 1.15;
}
#portfolio .intro span {
	display: block;
	font-size: 1.125em;/*18px*/
}
#portfolio .portfolio_image {
	width: 98px;
	height: 98px;
	margin: 0 auto 2em auto;
	position: relative;
}
.portfolio_image img {
	width: 90px;
	height: 90px;
	position: absolute;
	top: 0;
	left: 0;
	border-top-left-radius: 150px;
	border-top-right-radius: 150px;
	border-bottom-left-radius: 150px;
	border-bottom-right-radius: 150px;
	-moz-border-top-left-radius: 150px;
	-moz-border-top-right-radius: 150px;
	-moz-border-bottom-left-radius: 150px;
	-moz-border-bottom-right-radius: 150px;
	-webkit-border-top-left-radius: 150px;
	-webkit-border-top-right-radius: 150px;
	-webkit-border-bottom-left-radius: 150px;
	-webkit-border-bottom-right-radius: 150px;
	-khtml-border-top-left-radius: 150px;
	-khtml-border-top-right-radius: 150px;
	-khtml-border-bottom-left-radius: 150px;
	-khtml-border-bottom-right-radius: 150px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

#portfolio .wrapper .expanded a,
#portfolio .wrapper .expanded span,
#portfolio .wrapper .intro:hover,
#portfolio .wrapper .intro:focus,
#portfolio .wrapper .intro:active {
	color: #f4628f; /*dark pink*/
}
#portfolio .wrapper .intro a:focus {
	outline: 0;
}

#portfolio .image img {
	width: 100%;
	height: auto;
	margin-bottom: 1em;
}
#portfolio .content {
	clear: both;
	display: block;
	text-align: center;
	padding: 3em 0 2em;
	text-align: left;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
#portfolio .content .inner {
	text-align: left;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
#portfolio .content .linje {
	border-width: 0.375em;
	margin-bottom: 3em;
}
#portfolio .content .cross {
	width: 20px;
	height: 20px;
	margin-bottom: 0;
	cursor: pointer;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-0-transition: all .5s;
	transition: all .5s;
}
#portfolio p {
	font-family: "brandon-grotesque-n4", "brandon-grotesque", arial, sans-serif;
	font-size: 1.375em;
}
#portfolio .content .inner p a {
	display: inline-block;
	margin-bottom: 3em;
}

#portfolio {
	clear: both;
	padding: 4em 0 8em;
	margin-top: 0em;
	background-color: #38474e;
	background: url(../images/T_bg_gron_mork.jpg);
	height: 100%;
	overflow: hidden;
	color: #f4f5f0;
}
#portfolio a {
 	color: #f4f5f0; /*vit brödtext*/
}
#portfolio .inner a {
	color: #FF6E94; /*light pink*/
}
#portfolio a:hover,
#portfolio a:active,
#portfolio a:focus {
	color: #f4628f; /*dark pink*/
}
.linje_bottom {
	margin: 4em auto 2em;
	display: block;
	text-align: center;
}

.cross.inline {
	float: left;
	margin-right: 0.5em;
}
.close {
	line-height: 20px;
	cursor: pointer;
	display: inline-block;
	color: #808080; /*egen färg*/
	font-size: 1.250em;
}
.close:hover {
	text-decoration: none;
	color: #ffffff;
}
.close:hover img {
behavior:url(-ms-transform.htc);
    /* Firefox */
    -moz-transform:rotate(90deg);
    /* Safari and Chrome */
    -webkit-transform:rotate(90deg);
    /* Opera */
    -o-transform:rotate(90deg);
    /* IE9 */
    -ms-transform:rotate(90deg);
}

@media all and (max-width: 600px) {
	#portfolio .intro span {
		display: block;
		font-size: 1.3em;
	}
}
@media all and (min-width: 500px) {
	#portfolio h3 {
	font-size: 3em;
	margin: 1em 0 0.2em 0;
	}
}
@media all and (min-width: 600px) {
	.portfolio_image img {
		border: 4px solid transparent;
	}
	#portfolio .wrapper .expanded img,
	#portfolio .wrapper .intro:hover img,
	#portfolio .wrapper .intro:focus img,
	#portfolio .wrapper .intro:active img {
		/*	opacity: 0.5;*/
		border: 4px solid #DD547F;
	}
	#portfolio .portfolio_image {
		float: left;
		margin: 0 2em 0 0;
	}
	#portfolio .wrapper .intro {
		text-align: left;
	}
	#portfolio .intro span {
	/*	font-size: 1.125em;/*18px*/
		font-size: 1.375em;
	}
	#portfolio h3 {
/*		font-size: 4.375em;*/
		font-size: 2.125em;
		margin: 2em 0 0.2em 0;
	}
	.linje.inline {
		width: 190px;
	}
	#portfolio .intro .rubrik {
		margin-bottom: 0;
		padding-top: 0.3em;
	}
}


/* -------------- Hör av dig ------------ */
#horavdig {
	margin-bottom: 3em;
	margin-top: 1em;
}
#horavdig img {
	width: 100%;
}
#horavdig h2 {
	margin: -0.8em 0 0.5em 0;
}
@media(min-width: 601px) {
	margin-top: -0.8em;
}
#horavdig a {
	text-decoration: none;
	border-bottom: 2px solid #f4628f;
}
#horavdig .inner {
	text-align: center;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* ----------_-- Footer -------------- */

#footer {
	height: 60px;
	background-color: #1c2125;
}


/*Accessibility and SEO*/

.hide {
	display: none;
}
#skip a, #skip a:hover, #skip a:visited {
	position:absolute;
	left:0px;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;
}
#skip a:active, #skip a:focus {
	position:static;
	width:auto;
	height:auto;
}


/* ---------- Print ---------- */
@media print {

	body {
		font-size: 0.778em; /*12px*/
		line-height: 1.5;
	  -webkit-print-color-adjust:exact;
		color: #333333;
	}

  /* Links */
  a:link,
  a:visited {
/*    text-decoration: underline !important;*/
	}
  a[href]:after {
    content: " (" attr(href) ")";
    font-weight: normal;
  }
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
     content: "";
  }

  /* Turn off any background colors or images. */
  body,
	#header,
  #page,
  #main,
	#portfolio,
	#footer,
	#kontakt,
	#header p {
    color: #333333;
    background-color: transparent !important;
    background-image: none !important;
  }

	/* Align left */
	#header,
	#portfolio .content,
	h2,
	#horavdig p {
		text-align: left;
	}
	/* Full width*/
	#portfolio .wrapper .intro .inner,
	#portfolio .content .inner,
	.area,
	#portfolio .area {
		max-width: 100%;
	}
	#horavdig .inner,
	#portfolio .content {
		max-width: 100%;
	}

	h2 {
		margin-bottom: 1em;
	}

	/* header */
	#header {
		padding-bottom: 2em;
		padding-top: 2em;
	}
	.logo {
		margin: 0;
	}
	header .logo .logo_small {
		display: none;
	}
	header .logo .logo_big {
		display: none;
	}
	header .logo .logo_print {
		display: block;
	}

  /* Hide elements. */
  #skip-link,
	header a.button,
	.cross,
	.linje_bottom,
	.linje,
	#portfolio .intro,
	#contact-us,
	.bar1,
	.bar2 {
    visibility: hidden;
    display: none;
  }

	/* Tjänster*/
	#tjanster {
		text-align: left;
	}
	#tjanster .tjanst {
		margin: 0;
		text-align: left;
	}
	#tjanster .ikon {
		display: none;
	}
	#tjanster .info {
		float: none;
		width: 100%;
	}

	/* Portfolio */
	#portfolio {
		padding-top: 2em;
	}
	#portfolio .content.toggle {
		display: block!important;
		/*max-width: 100%!important;*/
		padding-top: 1em;
	}
	#portfolio .wrapper {
		height: 100%;
		overflow: hidden;
		border-bottom: 0;
		padding-bottom: 4em;
		clear: both;
	}
	#portfolio .image {
		width: 200px;
		margin-bottom: 1em;
	}
	#portfolio h3 {
		margin-top: 0;
		font-size: 2.125em;
	}
	#portfolio .wrapper.first {
		border-top: 0px;
	}
	#portfolio .intro a {
		font-size: 1.4em;
		color: #333333;
	}

	/* kontakt */
	#kontakt h2 {
		color: #333333;
	}
	#kontakt p {
		margin: 0;
		padding: 0;
	}
	#kontakt {
		width:92%;
		padding-left: 4%;
		padding-right: 4%;
	}
	#kontakt {
		background-image: none;
	}
	.footer {
		padding-top: 0;
	}

	/*Medarbetare */
/*	.medarbetare .inner {
		height: 100%;
		overflow: hidden;
		position: relative;
	}
	.medarbetare img{
		width: 30%;
		float: left;
		margin-left: 0;
		margin-right: 3%;
	}
	.medarbetare .info {
		width: 67%;
		float: left;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.medarbetare.zeinab .info {
		left: 0;
	}
	.medarbetare.zeinab img {
		float: right;
		margin-left: 3%;
		margin-right: 0;
	}
	.medarbetare p, .medarbetare h3 {
		text-align: left;
		float: left;
	}
	.medarbetare.zeinab p, .medarbetare.zeinab h3 {
		text-align: right;
		float: right;
	}
	.medarbetare h3 {
			margin-top: 0;
	}*/

}