@charset "UTF-8";
/* CSS Document */


/* COLORS

Mörkblå: #54758c
Ljusblå: #b8c3cc
Rost: #b25936
Rosa: #d06678
Tonad svart: #565652

*/



*	{
	margin: 0; 
	padding: 0;
}

html, body {
	height: 100%;
	background: url(../Images/bg_light.jpg) repeat;
	font-family: 'MuseoSlab500', Helvetica, Arial, sans-serif;
	font-weight: normal;
}


/* DIV's MAIN STRUCTURE*/

#wrap {
	min-height: 100%;
}

#header	{
	width: 100%;
	border-top: solid 5px #54758c;
	background: url(../Images/bg_medium.jpg) repeat;
}

#header_content	{
	width: 950px;
	height: 100px;
	margin-left: auto;
	margin-right: auto;
	padding: 12px 0 0 0;
}

#main {
	width: 950px;
	margin: 0 auto 0 auto;
	overflow: visible;
	padding-bottom: 300px;	/* must be same height as the footer */
}

#content	{
	width: 670px;
	float: left;
}

#sidebar	{
	width: 280px;
	float: right;
}

#footer {
	position: relative;
	margin-top: -300px; /* negative value of footer height */
	height: 300px;
	clear: both;
	background: url(../Images/bg_dark.jpg) repeat;
} 

/*Opera Fix*/
body: before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/
}


/* DIV's */

#clients	{
	width: 940px;
	padding: 40px 0 40px 0;
	float: right;
	padding: 20px 0px 70px 0px;
	border-top: solid 2px #b8c3cc;
}


.kern-1	{
	letter-spacing: -0.1em;
}

#rubbe1	{
	width: 670px;
	float: left;
	font-family: 'BevanRegular';
	font-size: 94px;
	line-height: 98px;
	color: #54758c;
	font-weight: normal;
	padding-top: 50px;
	margin-left: -12px;
}
#rubbe2 {
	padding-left: 16px;
}


#nedryckare	{
	width: 660px;
	padding: 12px 0 0 10px;
	float: left;
	font-family: 'BevanRegular';
	font-size: 23px;
	font-weight: normal;
	line-height: 28px;
	color: #d06678;
}

.content	{
	width: 520px;
	padding: 30px 30px 60px 30px;
	margin: 50px 0px 60px 10px;
	background-color: #FFF;
}

.mainC	{
	width: 580px;
	float: left;
}

#more_examples	{	
	float: right;
	font-size: 12px;
	padding-bottom: 40px;
}

.lang	{
	width: 800px;
	height: 30px;
	float: right;
	text-align: right;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}


/* Slider div's*/
#slider	{
	width: 580px;
	height: 279px;
	float: left;
	margin-bottom: 30px;
	background: url(../Images/bg_shadow.png) no-repeat bottom right;
}

#slider_bg	{
	width: 580px;
	height: 270px;
	background-color: #FFF;
}

#slider_content	{
	width: 570px;
	height: 260px;
	padding-top: 10px;
	padding-left: 10px;
}



/* Showcase div's */

#showcase_container	{
	width: 600px;
	padding: 30px 0 0 10px;
	float: left;
}

#showcase_container_under	{
	width: 600px;
	padding: 50px 0 60px 10px;
	float: left;
}

.showcase_wrap	{
	width: 280px;
	height: 289px;
	padding-right: 20px;
	padding-bottom: 11px;
	float: left;
}

.showcase	{
	width: 280px;
	height: 289px;
	background: url(../Images/bg_shadow.png) no-repeat bottom right;
}

.showcase_bg	{
	width: 280px;
	height: 280px;
	background-color: #FFF;
}

.showcase_content	{
	width: 270px;
	height: 270px;
	padding-top: 10px;
	padding-left: 10px;
}

.showcase_content:hover	{
	opacity: 0.5;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}


.backToSC	{
	width: 100%;
	margin-top: 40px;
	border-top: solid 2px #b8c3cc;
	clear: both;
	padding: 20px 0px 0px 0px;
}

	

/* Footer div's */

#footer_content	{
	width: 950px;
	height: 215px;
	margin-left: auto;
	margin-right: auto;
	padding: 40px 0 40px 0;
	color: #FFF;
}

#logo_container	{
	float: left;
	height: 215px;
}

.footercont	{
	float: left;
	padding-left: 100px;
	height: 215px;
}

#contact_bot	{
	float: left;
	padding-left: 100px;
	height: 215px;
}

/* Sidebar div's */

#tree	{
	width: inherit;
	height: 518px;
	overflow: visible;
	margin-left: -165px;
	margin-top: -4px;
}

#social_mini	{
	margin: 6px 0px 0px 38px;
}

#twitter	{
	width: 280px;
	float: left;
	border-top: solid 2px #b8c3cc;
	margin-top: 33px;
	padding-top: 20px;
}

#sheCreatives	{
	width: 280px;
	float: left;
	border-top: solid 2px #b8c3cc;
	padding: 20px 0 60px 0;
	margin-top: 33px;

}




/*  T E X T E R */


@font-face {
    font-family: 'MuseoSlab500';
    src: url('Museo_Slab_500-webfont.eot');
    src: url('Museo_Slab_500-webfont.eot?iefix') format('eot'),
         url('Museo_Slab_500-webfont.woff') format('woff'),
         url('Museo_Slab_500-webfont.ttf') format('truetype'),
         url('Museo_Slab_500-webfont.svg#webfontyumMOUTD') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MuseoSlab500Italic';
    src: url('Museo_Slab_500italic-webfont.eot');
    src: url('Museo_Slab_500italic-webfont.eot?iefix') format('eot'),
         url('Museo_Slab_500italic-webfont.woff') format('woff'),
         url('Museo_Slab_500italic-webfont.ttf') format('truetype'),
         url('Museo_Slab_500italic-webfont.svg#webfont3dFIImcj') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'BevanRegular';
    src: url('Bevan-webfont.eot');
    src: url('Bevan-webfont.eot?#iefix') format('embedded-opentype'),
         url('Bevan-webfont.woff') format('woff'),
         url('Bevan-webfont.ttf') format('truetype'),
         url('Bevan-webfont.svg#BevanRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


p	{
	color: #666;
	font-size: 14px;
	line-height: 26px;
	margin-bottom: 8px;
	font-weight: normal;
}

.showcase_desc	{
	color: #666;
	font-size: 14px;
	line-height: 26px;
	margin: 10px 0 8px 0;
	font-weight: normal;
}

#twitter p	{
	color: #666;
	font-size: 12px;
	line-height: 18px;
	margin-bottom: 5px;
	font-weight: normal;
}

a:link, a:visited 	{
	color: #54758c;
	text-decoration: none;
}

a:hover, a:active	{
	color: #d06678;
}

h1	{
	font-family: 'BevanRegular';
	font-weight: normal;
	font-size: 28px;
	line-height: 34px;
	color: #d06678;
	margin-bottom: 7px;
}

h2	{
	font-family: 'BevanRegular';
	font-weight: normal;
	font-size: 19px;
	line-height: 28px;
	color: #54758c;
}

#footer h2	{
	color: #FFF;
	font-weight: normal;
}


h3	{
	font-family: 'MuseoSlab500';
	font-weight: normal;
	font-size: 17px;
	line-height: 28px;
	color: #54758c;
}

h4	{
	font-family: 'MuseoSlab500';
	font-weight: normal;
	font-size: 14px;
	color: #54758c;
}

h5	{
	font-family: 'MuseoSlab500';
	font-weight: normal;
	font-size: 14px;
	color: #54758c;
	line-height: 24px;
	}


.caption	{
	font-family: 'MuseoSlab500Italic';
	font-size: 12px;
	margin: 8px 0 15px 0;
	text-align: right;
}

.cli_pro	{
	font-family: 'MuseoSlab500';
	font-size: 14px;
	color: #d06678;
}

blockquote	{
	background-color: #F3F3F3;
	padding: 20px;
	font-family: 'MuseoSlab500Italic';
	font-size: 20px;
	color: #54758c;
	margin: 20px 0 20px 0;
}

ul	{
	color: #666;
	font-size: 14px;
	line-height: 26px;
	margin: 0px 0px 0px 13px;
	font-weight: normal;
}



/* B I L D E R */

img	{  
	border-style: none;
}

.marg	{
	margin-bottom: 30px;
}

img.floatLeft { 
    float: left; 
	margin: 0 10px 0 0;
}

img.floatRight { 
    float: right;
	margin: 0 0 0 10px; 
}

img.SCleft { 
    float: left; 
	margin: 20px 20px 0 0;
}

img.SCright { 
    float: left; 
	margin: 20px 0px 0px 0px;
}

img.twitter	{
	float: right;
	margin-right: 30px;
	margin-top: -8px;
}

img.she_logo	{
	float: left;
	margin-right: 15px;
	margin-top: 5px;
}


/* Kundloggor A */


.kundloggor_a ul {
	height: 28px;
	margin-bottom: 10px;
	padding-top: 20px;
}

.kundloggor_a li {
	overflow: hidden;
	height: 28px;
	display: block;
	float: left;
	margin-right: 3px;
}

.kundloggor_a li img:hover {
	margin-top: -28px;
}


/* Kundloggor B */

.kundloggor_b ul {
	height: 41px;
	padding-top: 20px;
}
.kundloggor_b li {
	overflow: hidden;
	height: 41px;
	display: block;
	float: left;
	margin-right: 3px;
}

.kundloggor_b li img:hover {
	margin-top: -41px;
}


/* N A V   B A R */

#nav_bar	{
	float: right;
	padding-top: 34px;
}

#nav_bar ul	{
	list-style-type: none;
	font-weight: normal;
	font-size: 18px;
}

#nav_bar li 	{
	font-family: 'MuseoSlab500';
	display: inline;
	padding-left: 20px;
}

#nav_bar a:link , a:visited		{
	text-align: center;
	text-decoration: none;
}


/* N A V   B A R   B O T T O M   */

#footer ul	{
	font-weight: normal;
	color: #FFF;
	line-height: 18px;
	margin: 0px;
}

#footer li 	{
	font-family: 'MuseoSlab500';
	font-size: 12px;
	list-style-type: none;
	display: block;
	padding-top: 7px;
}

a.bot:link, a.bot:visited 	{
	color: #FFF;
	text-decoration: none;
}

a.bot:hover, a.bot:active	{
	color: #b8c3cc;
}


/* MISC */

.line-separator	{
	height: 2px;
	width: 100%;
	background: #b8c3cc;
	margin: 25px 0 25px 0;
}


#clients ul	{
	margin: 0;
}

/*CLEARFIX*/

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}
 
.clearfix {
   display: inline-block;
}
 
html[xmlns] .clearfix {
   display: block;
}
 
* html .clearfix {
   height: 1%;
   overflow: visible;
}





/* HOVEREFFEKTTEST */


/*
.view .mask, .view .content {
    width: 260px;
    height: 260px;
    position: absolute;
    overflow: hidden;
    top: 0px;
    left: 0px;
}
.view img {
    display: block;
    position: relative;
}
.view h2 {
    text-transform: uppercase;
	letter-spacing: 0.1em;
    color: #565652;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0;
}
.view p {
    font-family: 'MuseoSlab500', Helvetica, Arial, sans-serif;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center;
}
.view a.info {
    display: inline-block;
	font-size: 12px;
	letter-spacing: 0.1em;
    text-decoration: none;
    padding: 7px 14px;
    background: #565652;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000;
}
.view a.info:hover {
    box-shadow: 0 0 5px #000;
}
*/



.view {
   width: 260px;
   height: 260px;
   margin: 10px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
   width: 260px;
   height: 260px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
	letter-spacing: 0.1em;
   text-transform: uppercase;
   color: #565652;
   text-align: center;
   position: relative;
   font-size: 17px;
   line-height: 20px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.view p {
   font-family: 'MuseoSlab500', Helvetica, Arial, sans-serif;
   font-size: 12px;
   	line-height: 16px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   letter-spacing: 0.1em;
	font-size: 10px;
   padding: 5px 10px;
   background: #565652;
   color: #fff;
   text-transform: uppercase;
	-webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info:hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}








.view-tenth img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
   background-color: rgba(208, 102, 120, 0.1);
   -webkit-transition: all 0.4s linear;
   -moz-transition: all 0.4s linear;
   -o-transition: all 0.4s linear;
   -ms-transition: all 0.4s linear;
   transition: all 0.4s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth h2 {
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 40px 20px 0px 20px;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   color: #565652;
   -webkit-transition: all 0.4s linear;
   -moz-transition: all 0.4s linear;
   -o-transition: all 0.4s linear;
   -ms-transition: all 0.4s linear;
   transition: all 0.4s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth p {
   color: #565652;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.4s linear;
   -moz-transition: all 0.4s linear;
   -o-transition: all 0.4s linear;
   -ms-transition: all 0.4s linear;
   transition: all 0.4s linear;
}
.view-tenth a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.4s linear;
   -moz-transition: all 0.4s linear;
   -o-transition: all 0.4s linear;
   -ms-transition: all 0.4s linear;
   transition: all 0.4s linear;
}
.view-tenth:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.view-tenth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}