/*---------------------
Google Web Fonts
---------------------*/
/*@import url("http://fonts.googleapis.com/css?family=Trocchi");*/


/*---------------------
General
---------------------*/
A						{font-weight:normal; color:#007bbc; text-decoration:none;}
A:hover					{text-decoration:underline;}

h1, h2, h3 { font: bold 15px/1.3 acumin-pro, Verdana, Arial, Helvetica, sans-serif; color: #000; letter-spacing: 0.02em; }
h1						{font-size:38px; padding:0; margin:0 0 10px 0; color:#000; font-weight:bold;}
h2						{font-size:26px; padding:0; margin:10px 0 2px 0;}
h3						{font-size:20px; padding:0; margin:10px 0 2px 0;}
h4						{padding:0; margin:25px 0 5px 0; font-weight:bold; line-height:1.5;}
p						{margin:0 0 10px 0;}

::selection             {background:#d0e8ff;}
::-moz-selection        {background:#d0e8ff;}

table,
table tr,
table tr td				{font:normal 12px/1.5 Arial, Verdana, Sans-serif;}

img, table				{border:0;}
html 					{margin:0; padding:0;FONT-SIZE:small;}
body { margin: 0; padding: 0; COLOR: #4c4c4c; font: normal 16px/1.5 acumin-pro, Verdana, Arial, Helvetica, sans-serif; text-align: center; /*background-color:#999;*/ background: #fff; }

/*---------------------
Body layout
---------------------*/
#wrapper 					{width:100%; margin:0 auto; text-align:left;}

#head { width: 100%; margin: 0; padding: 22.5px 10px; background: #000; overflow:hidden; box-sizing:border-box;}
#head #logo                 {float:left;}
#head #logo img             {height:45px; width:229px; border:0;}
#head #contact				{position:absolute; right:20px; top:10px;}

#head #responsive-menu-btn  {display:none; position: relative; top: 10px;}
#head #nav ul#menu				{margin:15px auto 0 auto; padding:0; list-style:none; overflow:hidden; float:left; position:absolute; left:0; right: 0; text-align:center; max-width: 1150px; width: auto;}
#head #nav ul#menu li			{display:inline; }
#head #nav ul#menu li a			{font-size: 15px; font-weight:bold; text-decoration:none; color:#fff; padding: 0 15px;}
#head #nav ul#menu li a:hover	{}
#head #nav ul#menu li.on a,
#head #nav ul#menu li.on a:hover	{cursor:pointer; color:#ffffff !important; text-decoration:none; display:inline-block;}
           
#head #nav ul#responsive            {display:none;}
#head #nav .childs            {display:none;}

#phone { display: block; position: absolute; top: 37px; right: 10px; color: #fff; font-weight: bold; }



#overlay-search                         {height:100%; width:60%; overflow:auto; overflow-x:hidden; position:fixed; left:0; top:0; z-index:999 !important; padding:0 20%; text-align:left; background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BBFFFFFF,endColorstr=#BBFFFFFF); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BBFFFFFF,endColorstr=#BBFFFFFF); zoom:1; background:rgba(255,255,255,.90); display:none;}
.overlay-search-close                   {text-decoration:none; font-size:40px; line-height:40px; position:fixed; top:4%; right:2%; color:#999; padding:0 5px; margin:0; cursor:pointer; display:block;}
.overlay-search-close:hover             {color:#000;}
.overlay-search-title                   {font:bold 60px/60px Arial, Sans-serif; color:#000; margin:0; padding:5% 0 2% 0; display:block; width:100%; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.overlay-search-tbx                     {font-size:40px; padding:1% 2%; margin:0; border:2px solid #ccc; width:100%; outline-style:none; outline-width:0pt; background-color:#f7f7f7; color:#bbb; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none;}
.overlay-search-tbx:focus               {background-color:#fff; color:#000; border:2px solid #2980b9;}
.overlay-search-result                  {padding:3% 0 5% 0; margin:0; list-style:none; width:100%;}
.overlay-search-result li               {padding:0 0 2% 0; margin:0 0 2% 0; border-bottom:1px solid #ccc;}
.overlay-search-result li:last-child    {padding:0; margin:0; border:0;}
.overlay-search-result li p.title       {padding:0; margin:0; font-size:20px; font-weight:bold; color:#000;}
.overlay-search-result li p.hits        {padding:2px 0 0 0; margin:0; font-size:10px;}
.overlay-search-result li a             {font-size:14px; text-decoration:none;}
.overlay-search-result li a:hover       {text-decoration:underline;}
.overlay-search-info                    {font:normal 20px/20px Arial, Sans-serif; color:#60add0; margin:2% 0 0 0; padding:1% 2%; border:2px solid #8ccfef; background-color:#cbeeff;}
.overlay-search-alert                   {font:normal 20px/20px Arial, Sans-serif; color:#c3454a; margin:2% 0 0 0; padding:1% 2%; border:2px solid #df6c70; background-color:#fbcfd1;}
.overlay-search-preloader               {width:100px; height:100px; position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px;}

/*---------------------
Page layout
---------------------*/
.clearfix:after 			{content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html .clearfix 			{height: 1%;}

#content					{width:100%; margin:0; padding:0; }
#content .inner             {width:1200px; margin:20px auto 20px auto; padding:0; min-height:600px; overflow:hidden;}
.contentleft				{width:20%; margin:0; padding:0; float:left; overflow:hidden; /*background:url(/gfx/left-menu-bg.gif) top left repeat-x;*/}
.contentright				{width:100%; margin:0; padding: 0 20px; float:right; overflow:hidden; box-sizing:border-box;}

/*---------------------
Start page
---------------------*/
#start-slideshow { width: 100%; margin: 0 auto; position:relative;}
.flexslider { overflow: hidden; width: 100%; margin: 0 auto !important; }
	.flexslider .slides li { background-size: cover; background-position: center; }
		.flexslider .slides li a { display: block; height: 100%; width: 100%; }

		.start-text {position:absolute; top: 40%; left: 0; right:0; margin: auto;  width: 710px; z-index:5;}
			.start-text h1 { color: #fff; text-align: center; font-size: 44px; font-weight: bold; }
			.start-text p { color: #fff; text-align: center; font-size: 18px; }

.startcontent { background: #F2F2F2; }


#start-content { width: 1200px;  height:auto; margin: 10px auto 0 auto; padding: 0; }

#startPuffs {clear:both; padding: 60px 0; overflow:hidden;}
	#startPuffs .puffItem { min-height: 450px; margin: 0 0 30px 0; overflow: hidden; background: #fff; text-align: center; position: relative; }
#startPuffs .puffItem .image {width: 50%; display:flex; align-items:center; justify-content:center; height: 450px;}
#startPuffs .puffItem .image img {width: 100%;}
	#startPuffs .puffItem:nth-child(odd) .image { float: left; }
	#startPuffs .puffItem:nth-child(even) .image { float: right; }
		#startPuffs .puffItem .puffContent { padding: 40px; width: 50%; box-sizing: border-box; }
	#startPuffs .puffItem:nth-child(odd) .puffContent { float: right; }
		#startPuffs .puffItem:nth-child(even) .puffContent:nth-child(even) { float: left; }
	#startPuffs .puffItem h3 { font-size: 28px; margin: 0 0 20px 0; }
#startPuffs .puffItem p {color:#4c4c4c; font-size: 16px; margin: 0;}
#startPuffs .links {position: absolute; bottom:0; width:46%;}
#startPuffs .puffItem:nth-child(odd) .links {right:2%;}
#startPuffs .puffItem:nth-child(even) .links {left:2%;}
	#startPuffs .links a { display: block; background: #F2F2F2; color: #000; font-size: 14px; padding: 20px; margin: 0 0 15px 0; font-weight:bold; }
	#startPuffs .links a:hover { background: #000; color: #fff;text-decoration:none;}

	#startPuffs .startPuffItem {float: left; width: 32%; margin: 0 1.33% 0 0; }
	#startPuffs .startPuffItem a {color:#000; text-decoration:none;}
	#startPuffs .startPuffItem:last-child {margin: 0;}
		#startPuffs .startPuffItem .image { width: 100%; display: flex; align-items: center; justify-content: center; height: 250px; overflow:hidden; }
			#startPuffs .startPuffItem .image img { width: 100%; }

#leftmenu { width: 220px; margin: 0; padding: 0 28px 0 0; overflow: hidden; }
#leftmenu .rub					{font-size:13px; line-height:34px; color:#FFF; font-weight:bold; padding:0 0 0 10px; margin:0; background:url(/gfx/leftmenu-rub-bg.gif) left center repeat-x;}
 
#leftmenu ul.menu				{width:220px; margin:0 0 20px 0; padding:0; list-style:none; float:left; overflow:hidden;}
#leftmenu ul.menu li			{margin:1px 0; padding:0;}
#leftmenu ul.menu li			{margin:1px 0; padding:0;}
#leftmenu ul.menu li a			{width:195px; padding:8px 0 8px 25px; margin:0; font:normal 12px Arial; color:#929292; text-decoration:none; background:url(/gfx/leftmenu-arrow.gif) center left no-repeat #1e1e1e; display:block;}
#leftmenu ul.menu li a:hover	{text-decoration:underline;}	
#leftmenu ul.menu li.on a,
#leftmenu ul.menu li.on-childs a		{text-decoration:none; background:url(/gfx/leftmenu-arrow-on.gif) center left no-repeat #4d5651; color:#FFF;}
 
#leftmenu ul.submenu				{margin:0; padding:0 0 5px 0; list-style:none; background-color:#4d5651;}
#leftmenu ul.submenu li				{margin:0; padding:0;}
#leftmenu ul.submenu li a			{font:normal 11px Arial !important; color:#fff !important; padding:5px 5px 5px 35px; background:none !important;}
#leftmenu ul.submenu li li a		{font:normal 11px Arial !important; color:#fff !important; padding:5px 5px 5px 45px; background:none !important;}
#leftmenu ul.submenu li a:hover		{text-decoration:underline;}
#leftmenu ul.submenu li.on a		{background-color:#303834 !important;}
#leftmenu ul.submenu li.on li.on a	{background-color:#303834 !important;}
#leftmenu ul.submenu li.on a:hover	{text-decoration:none;}

#leftmenu ul.submenu li.on-childs,
#leftmenu ul.submenu li.on-childs .submenu   {background-color:#3a433e;}
#leftmenu ul.submenu li.on-childs .submenu li.on-childs,
#leftmenu ul.submenu li.on-childs .submenu li.on-childs .submenu   {background-color:#303834;}


/*---------------------
Footer layout
---------------------*/
#footer					{width:100%; margin:0; padding:40px 0; clear:left; position:relative; font-size:15px; color:#fff; background:#000; overflow:hidden; }
#footer .inner          {width:1200px; margin:20px auto; padding:8px 0 20px 0; }
#footer a				{font-weight:normal; color:#fff; text-decoration:none;}
#footer a:hover         {text-decoration:underline;}
#footer .left				{float:left; padding:0; margin:0; width: 465px;}
#footer .right				{float:right; padding:0; margin:0;}
	#footer .right .footerExtraInfo {margin: 30px 0 0 0;}
	#footer .right p { color: #fff; font-size: 17px; font-weight: bold; }
#footer .right p.small {color:#b2b2b2; font-size: 13px; font-weight:normal;}
#footer h3 {color:#fff; font-size: 24px; margin: 0 0 15px 0;}
	#footer .left p { font-size: 15px; line-height: 26px; color: #b2b2b2; }
	#footer .left p a { font-weight: normal; color: #b2b2b2; }


/*table.responsive-table, 
	table.responsive-table thead, 
	table.responsive-table tbody, 
	table.responsive-table th, 
	table.responsive-table td, 
	table.responsive-table tr           {display:block; border:0;}
	table.responsive-table thead tr     {position:absolute; top:-9999px; left:-9999px;}
	table.responsive-table tr           {}
	table.responsive-table td           {padding:4px 6px !important; width: auto; max-width: 40%; float: left;}
	table.responsive-table td           {border:none; position:relative; white-space:normal; text-align:left !important;}
 	table.responsive-table td:before    {position:absolute; top:6px; left:6px; width:45%; padding-right:10px; white-space:nowrap; text-align:left; font-weight: bold;}
	table.responsive-table td:before    {content:attr(data-title);}*/
@media screen and (max-width: 1500px) {
	#head #nav ul#menu li a { padding: 0 5px; }

}
	@media screen and (max-width: 1250px) {
		h1 { font-size: 32px; }
		h2 { font-size: 24px; }
		h3 { font-size: 18px; }

		body { background: #000 !important; }
		#wrapper { width: auto; height: auto; margin: 0; text-align: left; }

		#head { width: auto; height: auto; height: 50px; margin: 0; padding: 0; position: relative; }
			#head .inner { width: auto; height: auto; z-index: 999; }
			#head #logo { position: absolute; left: 10px; top: 10px; }
				#head #logo img { display: block; height: 30px; width: auto; border: 0; }


		#phone { display: block; position: absolute; top: 15px; right: 100px; color: #fff; font-weight: bold; }

		#overlay-search { width: 90%; overflow: auto; overflow-x: hidden; padding: 0 5%; }
		.overlay-search-close { font-size: 25px; line-height: 25px; top: 4%; right: 5%; position: absolute; }
		.overlay-search-title { font: bold 24px/24px Arial, Sans-serif; margin: 0 0 1.5% 0; }
		.overlay-search-tbx,
		.overlay-search-tbx:focus { font-size: 18px; line-height: 18px; padding: 1% 2%; margin: 0 0 1.5% 0; border-width: 1px; }
		.overlay-search-result li p.title { font-size: 14px; }
		.overlay-search-result li p.hits { font-size: 10px; padding: 0; }
		.overlay-search-result li a { font-size: 12px; }
		.overlay-search-info,
		.overlay-search-alert { font: normal 14px/14px Arial, Sans-serif; border-width: 1px; padding: 2%; }

		#head .inner #shopping-cart { display: none; }

		#head #responsive-menu-btn { position: absolute; right: 0; top: 15px; display: block; height: 30px; padding: 0 14px; z-index: 999; color: #fff; font-size: 30px; font-weight: bold; text-transform: uppercase; line-height: 50px; text-decoration: none; cursor: pointer; }
		#head #search { position: absolute; right: 55px; top: 0px; display: block; height: 20px; padding: 15px; z-index: 999; color: #fff; font-size: 30px; font-weight: bold; text-transform: uppercase; line-height: 50px; text-decoration: none; }
			#head #search img { height: 20px; width: 20px; }

		#nav { display: none; }

		#content { width: auto; height: auto; min-height: 100px; margin: 0; padding: 0; }
			#content .inner { width: auto; height: auto; min-height: 100px; background: #fff; padding: 0 2% 2% 2%; margin: 0 auto; }
		.contentleft { display: none; }
		.contentright { width: 95%; width: -moz-calc(100% - 20px) !important; width: -webkit-calc(100% - 20px) !important; width: calc(100% - 20px) !important; height: auto; margin: 0; padding: 10px; float: left; }

		.flexslider .slides li { height: 400px !important; }


		#footer { width: auto; margin: 0; padding: 2% 0 0 0; clear: left; position: relative; font-size: 11px; line-height: 16px; }
			#footer .inner { width: auto; height: auto; }
			#footer .left { margin: 0 0 0 20px; }
			#footer .right { margin: 0 20px 0 0; }

		#start-content { width: 97%; height: auto; margin: 0; padding: 0 1.5% 0 1.5%; }
	}

	@media screen and (max-width: 850px) {
		#footer { padding: 0 20px; }
			#footer .left { float: none; padding: 0; margin: 0 0 20px 0; width: 100%; }
			#footer .right { float: none; padding: 0; margin: 0; }
	}


	@media screen and (max-width: 730px) {
		.start-text { width: 90%; }
			.start-text h1 { font-size: 32px; }
		#startPuffs .puffItem { height: auto; }
			#startPuffs .puffItem .image { width: 100%; overflow: hidden; }
			#startPuffs .puffItem:nth-child(odd) .image { float: none; }
			#startPuffs .puffItem:nth-child(even) .image { float: none; }
			#startPuffs .puffItem .puffContent { width: 100%; padding: 20px 20px 0 20px; }
			#startPuffs .puffItem:nth-child(odd) .puffContent { float: none; }
			#startPuffs .puffItem:nth-child(even) .puffContent:nth-child(even) { float: none; }
		#startPuffs .links { position: relative; bottom: 0; width: 100%; padding: 0 40px; box-sizing: border-box; }
		#startPuffs .puffItem:nth-child(odd) .links { right: 0%; }
		#startPuffs .puffItem:nth-child(even) .links { left: 0%; }
	}

	@media screen and (max-width: 600px) {
		body { font-size: 14px; }
		h1 { font-size: 26px; }
		h2 { font-size: 20px; }
		h3 { font-size: 16px; }
		#start-news { width: 100%; margin-top: 2%; }
			#start-news h3 { padding: 0 0 1.5% 0; line-height: 1em; }
			#start-news ul li { margin: 0 0 1.5% 0; }
				#start-news ul li a { background-color: #f7f7f7; padding: 1.2% 1.2% 1.2% 2%; }

		.overlay-search-preloader { width: 80px; height: 80px; margin-left: -40px; margin-top: -20px; }
		#startPuffs .startPuffItem { float: none; width: 100%; margin: 0 0 20px 0; }

		#phone { right: 50px; }

		.start-text { top: 20%;}
			.start-text h1 { font-size: 32px; }
			.start-text p { font-size: 14px; }

	}

	@media screen and (max-width: 480px) {
		#startPuffs { padding: 20px 0; }
			#startPuffs .puffItem .image { height: 300px; }

		.start-text { top: 10%; }
		.overlay-search-preloader { width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; }
	}

	/* Andra tips och trix */
	/* Sätter en max-gräns för text och lägger till ... när det behövs */
	/*max-width:50px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;*/