/*----------------------------------------------------------------------
						  	CSS Reset
----------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
:focus { outline: 0; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }/*------------------------------------------------------------------------------
						  		MAIN
------------------------------------------------------------------------------*/
/* Tell the browser to render HTML 5 elements as block */
header, footer, content, section, nav, main, article {
	display: block;
}
body {
	width: 100%;
	font: .75em/1.417 "Arial", "Helvetica", sans-serif;
	background: url("/templates/default/images/gears.png") no-repeat;
}

h1, h2 {
	font-size: 28px;
	line-height: 44px;
	padding: 22px 0;
}

h3 {
	font-size: 18px;
	line-height: 22px;
	padding: 11px 0;
}

p {
	padding-bottom: 22px;
}
img
{
	vertical-align:middle;
}
/*------------------------------------------------------------------------------
						  		HEADER
------------------------------------------------------------------------------*/
header
{
	width:100%;
	height:140px;
	background:#f3f3f3;
}
	header #container
	{
		width:870px;
		margin:0px auto 0px auto;
		height:120px;
	}
		header #container #logo
		{
			width:250px;
			height:120px;
			float:left;
		}

		header #webshop 
		{
			display: inline-block;
			vertical-align: top;
			zoom: 1; /* Fix for IE7 */
			*display: inline; /* Fix for IE7 */
		}
		header #webshop img 
		{
			width: 90px;
		}

		.webshop img 
		{
			position: absolute;
			right: 10px;
		}
		
/*------------------------------------------------------------------------------
						  TOP NAVIGATION
------------------------------------------------------------------------------*/
		header #container #topnav
		{
			width:250px;
			height:100px;
			float:right;
			margin:20px 0px 0px 0px;
			font-size: 0.917em;
			text-align:right;
		}
		header #container #topnav ul
		{
			display:inline-block;
		}
		header #container #topnav ul li
		{
			height:17px;
			padding:0px 5px 0px 5px;
			display:inline-block;
			border-right:1px solid #ccc;
		}
			header #container #topnav ul li a
			{
				text-decoration:none;
				color:#000;
			}
		
				header #container #topnav ul li:last-child
				{
					border:none;
				}
		
			header #container #topnav #language
			{
				width:105px;
				height:46px;
				margin:0px 0px 0px 20px;
				border:1px solid transparent;
				position:relative;
				z-index:2;
				text-align:left;

			}
			header #container #topnav #language:hover
			{
				background:#F1F1F1;
				border:1px solid #CCC;
			}
			header #container #topnav #language li
			{
				display:block;
				height:22px;
				border:none;
				background:url(/templates/default/images/down_arrow.png) right no-repeat;
			}

			header #container #topnav #language li a
			{
				text-decoration:none;
				color:inherit;
			}
			header #container #topnav #language li a:hover
			{
				text-decoration: underline;
			}			
			header #container #topnav #language li:last-child
			{
				position:absolute;
				border:none;
				display:none;
				background:none;
			}
			
			header #container #topnav #language:hover li:last-child
			{
				display:block;
			}
		
		header #container #topnav #searchbox
		{
			width:238px;
			padding:1px;
			height:25px;
			margin:15px 0px 0px 0px;
			background:url(/templates/default/images/searchbox.png);
			background-repeat:no-repeat;
			position:relative;
			z-index:1;
		}
			header #container #topnav #searchbox #search
			{
				width:200px;
				height:18px;
				border:none;
				color: #777;
				line-height: 23px;
				font-size: 0.917em;
				vertical-align: top;
				background:transparent;
				padding: 5px 0px 0px 10px;
			}
			header #container #topnav #searchbox #submit
			{
				height:23px;
				width:25px;
				border:none;
				background:transparent;
				cursor:pointer;
			}
/*------------------------------------------------------------------------------
						  	NAVIGATION
------------------------------------------------------------------------------*/
@-moz-document url-prefix()
{
	nav > ul
	{
		float:left;
		margin:-15px 0px 0px 0px;
	}
}
nav
{
	width:870px;
	/*height:25px;*/
	margin:-40px auto 0px auto;
	padding:5px 0px 10px 0px;
	background:#990100;
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
	position:relative;
	z-index:2;
}
	nav > ul
	{
		list-style:none;
		display: inline-block;
		vertical-align: top;
		zoom: 1; /* Fix for IE7 */
		*display: inline; /* Fix for IE7 */
	}
	nav > ul li
	{
		display:inline-block;
		margin:0px -4px;
	}
	nav ul > li:first-child
	{
		margin:0px 0px 0px 40px;
	}
		nav ul > li a
		{
			position:relative;
			z-index:2;
			display: block;
			color:#F9FFFD;
			font-family:Arial, Helvetica, sans-serif;
			font-size:12px;
			font-weight: bold;
			text-decoration:none;
			height:28px;
			padding: 5px 10px 0px 10px;
			-webkit-transition: all 0.15s linear;
		}
		nav ul > li:hover
		{
			background:#fff;
		}
			nav ul > li:hover a
			{
					color:#990100;
			}
ul li > .line
{
	z-index:-1;
	width:1px;
	height:10px;
	position:absolute;
	background:#808080;
	margin:-23px 0px 0px 0px;
}
ul li:first-child > .line
{
	display:none;
}

/*------------------------------------------------------------------------------
						SUB	NAVIGATION
------------------------------------------------------------------------------*/
nav ul li > ul
{
	display:none;
}
	nav ul li:hover > ul
	{
		opacity:1;
		display:block;
	}
		nav ul > li > ul
		{
			left:50%;
			opacity:0;
			z-index:2;
			width:870px;
			height:35px;
			position:absolute;
			padding:5px 0px 0px 0px;
			margin:0px 0px 0px -50%;
			-webkit-transition: all 0.15s linear;
			background: -o-linear-gradient(#FFF,#F1F1F);
			background: -webkit-linear-gradient(#E2E2E2, #FFF);
			background: -moz-linear-gradient(100% 100% 90deg, #E2E2E2, #FFF);
			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#FAF2F2));
		}
		nav ul > li ul > li:hover
		{
			background:#990100;
		}
			nav ul > li > ul > li > a
			{
				color:#1a3459;
			}
			nav ul > li > ul > li:hover > a
			{
				color:#fff;
			}
/*------------------------------------------------------------------------------
						SUB-SUB	NAVIGATION
------------------------------------------------------------------------------*/
		nav ul > li > ul > li > ul
		{
			color:#fff;
			background:#1a3459;
			padding:0px 0px 5px 2px; 
		}
		nav ul > li > ul > li:hover > ul > li > a
		{
			color:#FFF;
		}
		nav ul > li > ul > li:hover > ul > li:hover
		{
			background:none;
		}
		nav ul > li:hover ul > li > ul > li > a:hover
		{
			background:none;
		}
/*------------------------------------------------------------------------------
						SLIDERS
------------------------------------------------------------------------------*/
.bx-wrapper .bx-pager {
    bottom: -95px;
  }
  
  .bx-wrapper .bx-pager a {
    border: solid #ccc 1px;
    display: block;
    margin: 0 5px;
    padding: 3px;
  }
  
  .bx-wrapper .bx-pager a:hover,
  .bx-wrapper .bx-pager a.active {
    border: solid #1d1d1d 1px;
  }
  
  .bx-wrapper {
    margin-bottom: 120px;
  }
/*------------------------------------------------------------------------------
						Content
------------------------------------------------------------------------------*/
#slider 
{
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: 0px 0px 5px 0px;
}
#content
{
	width:870px;
	min-height:750px;
	margin:0px auto 0px auto;
	background:rgba(255,255,255,0.5);
}

#boxes
{
	width:100%;
	/*height:280px;*/
	margin:5px 0px 10px 0px; 
}
	#boxes .box
	{
		width:32.3%;
		height:523px;
		vertical-align:top;
		display:inline-block;
		margin:0px 10px 0px 0px;
		background:#eeeeee;
		border-radius:5px;
	}
	#boxes .box ul#catalozi
	{
		width: 93%;
		margin: 10px;
		list-style: none;
	}
	#boxes .box ul#catalozi li
	{
		padding: 8px;
		font-weight: bold;
		margin-bottom: 2px;
		-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
		text-align: center;
	}
		#boxes .box ul#catalozi li:hover
		{
			cursor: pointer;
			background:#F7F7F7;
		}
		#boxes .box ul#catalozi > li a
		{
			display:block;
			text-decoration:none;
			color:#000;
		}
		#boxes .box ul#catalozi li ul 
		{
			display: none;
			border-top: 1px solid #e7e7e7; 
			margin-top: 5px;
			padding-top: 5px;
		}
		#boxes .box ul#catalozi li.open ul, #catalozi li.open ul li
		{
			display: block;
		} 
		#boxes .box .open
		{
			position: relative;
		}
		#boxes .box .open span 
		{
			top: 1px;
			left: 0px;
			font-size: 20px;
			padding: 1px 15px;
			position: absolute;
			color: #990100;
		}
			#boxes .box .open span:hover 
			{
				color: #fff;
				background: #990100;
			} 
			#boxes .box ul#catalozi li ul li 
			{
				font-weight: normal;
				padding: 2px 5px;
				box-shadow: none;
			} 
			#boxes .box ul#catalozi li ul li a:hover 
			{
				text-decoration: underline;
			}

	#boxes .box .up, .down
	{
		margin: 0 auto;
		cursor: pointer;
		font-size: 20px;
		text-align: center;
	}

	#boxes .box .down 
	{
		margin-top: -4px;
	}

	#boxes .box .up:hover, .down:hover
	{
		opacity: .8;
	}
	
	#boxes .box:last-child
	{
		margin:0px;
	}
		#boxes .box .box_header
		{
			width:100%;
			height:40px;
			padding:10px 0px 0px 20px;
			background:#990100;
			color:#fff;
			font-size:16px;
			font-weight:bold;
			text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
		}
		#boxes .box .box_content
		{
			width:255px;
			height:190px;
			padding:10px;
			position: relative;
			border-radius:5px;
		}
			#boxes .box .box_content #new_logo
			{
				display: block;
				margin-bottom: 5px;
			}
			#boxes .box #partners 
			{
				text-align: center;	
			} 
			#boxes .box #partners ul
			{
				padding: 0;
				list-style: none;
			}
			#boxes .box #partners ul li 
			{
				display: none;
				max-width: 100%;
				max-height: 210px;
				line-height: 170px;
				vertical-align: middle;
			}
			#boxes .box #partners ul li:hover 
			{
				background: none;
			}
			#boxes .box #partners ul li.show
			{
				display: block;
			} 
				#boxes .box #partners ul li img 
				{
					max-width: 100%;
					max-height: 200px;
				}
		#boxes .box .catalogue 
		{
			margin-top: -10px;
		}
		#content_holder #location
		{
			border-bottom:1px dotted #CCC;
			color: #777;
			font-size: 0.917em;
			padding:5px 20px;
		}
		#content_holder #title
		{
			padding: 0.619em 20px;
			font-size: 1.75em;
			font-weight: normal;
			text-transform: uppercase;
			color: #333;
		}
		#content_holder #data
		{
			padding:0px 20px;
		}
		#team_box span
		{
			color: #333;
			padding:20px 0px 0px 20px;
			font-size:1.4em;
			font-weight:bold;
		}
		#team_box p
		{
			margin:5px 0px -10px 40px;
		}
		#content_holder
		{
			width:870px;
		}
/*------------------------------------------------------------------------------
						Footer
------------------------------------------------------------------------------*/	
#footer
{
	background:#ebebeb;
	width:100%;
	height:105px;
	font-size: 0.917em;
	color: #333333;
}
	#footer #container
	{
		width:870px;
		margin:0px auto 0px auto;
	}
	#footer #container #news
	{
		width:600px;
		height:70px;
		padding:10px 0px 0px 0px;
		
	}
		#footer #container #news #new_header
		{
			font-size:18px;
			font-weight:bold;
		}
		
		#footer #container #news #new
		{
			width:560px;
			height:20px;
			background:#dfdfdf;
			border-radius:5px;
			padding:10px 10px 15px 0px;
		}
	#footer #container ul
	{
		float:left;
		margin:0px 0px 0px 10px;
	}
		#footer #container ul li
		{
			height:20px;
			width:150px;
			padding:5px 0px 0px 5px;
			display: inline-block;
		}
		#footer #container ul li:last-child
		{
			border:none;
		}
			#footer #container ul li a
			{
				text-decoration: none;
				color:#1A3359;
			}
	#footer #container #trademarks
	{
		height:20px;
		width:870px;
		margin:5px 0px 0px 0px;
		position: absolute;
	}
	#footer #container #trademarks a
	{
		text-decoration: none;
		color:#1A3359;
	}
		#footer #container #trademarks #dev_team
		{
			float:right;
		}
		#footer #container #trademarks #copyright
		{
			float:left;
		}.overlay-shell
{
	position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height:100%;
    display:table;
    z-index: 5000;
    background:rgba(0, 0, 0, 0.3);
}
.overlay 
{
    -moz-border-radius:5px;
    -khtml-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.overlay_back
{
	position:absolute;
	width:100%;
	height:100%;
}
.y-center-overlay
{
    display:table-cell; 
    vertical-align:middle;
}
.overlay, .overlay-pop 
{
    background:rgba(0, 0, 0, 0.5);
	padding: 10px;
}
.contain-overlay 
{
    position: relative;
    margin:0px auto  !important;
    display:none;
}
.overlay-int
{
    position: relative;
}
.overlay-close:hover 
{
	background-position: 0px -24px;
}
.overlay-close 
{
	top: -14px;
	right: -14px;
	position: absolute;
	width: 24px;
	height: 24px;
	cursor:pointer;
	text-indent: -9999px;
	background:url("/templates/default/images/btn_close.png");
}
.content
{
	overflow:hidden;
}/*
Skin Name: SlideDeck Website Skin
Skin URI: http://www.slidedeck.com/
Description: The skin used at slidedeck.com
Version: 1.5
Author: digital-telepathy
Author URI: http://www.dtelepathy.com/
Tags: flexible, white, black, multi-color
*/

/*
 * The frame surrounding the SlideDeck.
 * 
 * Customize the width, height, padding and background to customize the area 
 * surrounding your SlideDeck.
 */
.skin-slidedeck {
    position: relative;
	z-index:1;
	overflow:hidden;
	padding:0px 0px 5px 0px;
}

/*
 * The SlideDeck element itself.
 * 
 * Customize the width and height to increase or decrease the size of
 * your SlideDeck. 
 */
.skin-slidedeck dl.slidedeck {
    position: relative;
	width: 100%;
	height: 250px;
	margin: 0;
    padding: 0;
}

/*
 * The SlideDeck slide area.
 * 
 * You can specify a height for the slide area, but it is not required, width
 * will automatically be defined for the slide area and will vary depending on
 * how many slides you have in your SlideDeck.
 * 
 * To add space between a slide and the next slide's spine (slide title bar),
 * increase the border-right definition. To remove the space, just remove the
 * border definition.
 * 
 * SlideDeck slides are all given a unique class, so you can customize the
 * appearance of each slide individually by referencing a slide by its
 * numbered class name. For example:
 *    .slidedeck dd.slide_1
 *    .slidedeck dd.slide_2
 *    .slidedeck dd.slide_3
 *    etc...
 */
.skin-slidedeck dl.slidedeck > dd {
    position: relative;
	height: 294px;
    margin:0px;
	border-right: 5px solid #f3f3f3;
	background: url('/templates/default/images/slides.png') bottom left #f3f3f3;    /* Note: you should position the background with pixel measurements in IE7 as it improperly calculates the height of the DD element when containing vertical slides */
    overflow: hidden;
}

/*
 * The SlideDeck spine (slide title bar).
 * 
 * SlideDeck spines are rotated, so you will need to swap your directions. To
 * change the width of the spine, you will need to modify the spine height.
 * You will also need to make sure that any background imagery used is rotated
 * horizontally.
 * 
 * Like slides, spines are also given a unique class allowing for custom
 * appearance for each spine. This follows a similar naming convention:
 *     .slidedeck dt.slide_1
 *     .slidedeck dt.slide_2
 *     .slidedeck dt.slide_3
 *     etc...
 */
.skin-slidedeck dl.slidedeck > dt {
    position: relative;
	cursor: pointer;
	height: 43px;
	line-height: 38px;
	font-size: 12px;
	font-weight: bold;
	font-family: "Futura Bold", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	background: url('/templates/default/images/spines.png') top left #f3f3f3;
	color: #505050;
    margin: 0;
    padding: 0;
}

/*
 * The hovered state of a SlideDeck spine.
 */
.skin-slidedeck dl.slidedeck dt.spine:hover {
	color: #000;
	background-position: center left;
}

/*
 * The active state of a SlideDeck spine.
 */
.skin-slidedeck dl.slidedeck dt.spine.active,
.skin-slidedeck dl.slidedeck dt.spine.active:hover {
	cursor: default;
	color: #fff;
	background-position: bottom left;
}

/*
 * The SlideDeck spine index labels.
 * 
 * This is to style the numbers (or letters if you have customized it so)
 * that appear at the bottom of each SlideDeck spine.
 */
.skin-slidedeck dl.slidedeck dt.spine .index {
	margin-bottom: 2px;
    font-size: 24px;
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif;
	color: #505050;
}
.skin-slidedeck dl.slidedeck dt.spine.active .index { margin-bottom: 0; }

/*
 * The hovered state of a SlideDeck spine index label.
 */
.skin-slidedeck dl.slidedeck dt.spine:hover .index { color: #000000; }

/*
 * The active state of a SlideDeck spine index label.
 */
.skin-slidedeck dl.slidedeck dt.spine.active .index { color: #ffffff; }

/*
 * The SlideDeck "active corner".
 * 
 * This is the small triangle that appears in the upper left of the active
 * slide. This can be made any size and positioned differently by modifying
 * the margin values. By default the left margin is inset to prevent any
 * gap from appearing as the SlideDeck animates.
 */
.skin-slidedeck dl.slidedeck .activeCorner {
	margin-left: -6px;
	background-image: url('/templates/default/images/corner.png');
	width: 12px;
	height: 25px;
}

/*
 * The SlideDeck vertical slide style.
 * 
 * Veritcal slides will take over the entire content area of a horizontal slide
 * automatically. Padding will automatically be accommodated for. You can also
 * eliminate the padding definition to have your vertical slide content line
 * up flush against the containing slide content area edges.
 */
.skin-slidedeck dl.slidedeck dd.slide ul.slidesVertical > li {
    overflow: hidden;
    padding: 10px;
}

/*
 * The SlideDeck vertical slide navigation container.
 * 
 * This is the container for the vertical slide navigation. You can position
 * this anywhere you want within the containing slide's area. If you try to
 * position it outside of the slide area it will not appear.
 */
.skin-slidedeck dl.slidedeck ul.verticalSlideNav {
	height: 70px;
	width: 25px;
	background: none;
	position: relative;
	overflow: hidden;
	padding: 15px 0 0;
	margin: 0;
    top: 0;
	left: 125px;
	-webkit-transform: rotate(90deg);
	-webkit-transform-origin: -7px 0;
	-moz-transform: rotate(90deg);
	-moz-transform-origin: -7px 0;
	-o-transform: rotate(90deg);
	-o-transform-origin: -7px 0;
}

/*
 * The SlideDeck vertical slide navigation link containers.
 * 
 * This is the container for a navigation link in the vertical slide navigation
 * element. You can adjust the width and height of this element to accommodate
 * for a larger vertical navigation button.
 * 
 * To increase the space between vertical navigation links, increase the bottom
 * and/or top padding of this element.
 */
.skin-slidedeck dl.slidedeck ul.verticalSlideNav li {
	position: relative;
    width: 25px;
    height: 12px;
    line-height: 12px;
	padding: 0;
	margin: 0;
    overflow: hidden;
    float: left;
    clear: left;
}

/*
 * The SlideDeck vertical slide position indicator.
 * 
 * This is the element that slides behind the default navigation link list to
 * show which is the current vertical slide being viewed. This should be given
 * similar dimensions to the vertical slide navigation links.
 * 
 * NOTE: This element is not used in this skin, so it is hidden
 */
.skin-slidedeck dl.slidedeck dd.slide ul.verticalSlideNav li.arrow { display: none; }

/*
 * The SlideDeck veritcal slide navigation links.
 * 
 * These are the vertical slide navigation links. By default these are a small
 * square that uses a sprite background image replacement method to hide the
 * default text that is placed in the link ("Nav 1", "Nav 2", "Nav 3").
 * 
 * To change the appearance of the navigation elements, you will need to use a
 * background image replacement as the text for the links cannot be changed.
 * Each vertical slide navigation link is given a unique class so they can be
 * styled individually. For example:
 *     dl.slidedeck dd.slide ul.verticalSlideNav li a.nav_1
 *     dl.slidedeck dd.slide ul.verticalSlideNav li a.nav_2
 *     dl.slidedeck dd.slide ul.verticalSlideNav li a.nav_3
 *     etc....
 */
.skin-slidedeck dl.slidedeck ul.verticalSlideNav li a {
	position: relative;
	display: block;
	padding: 12px 0 0 0;
	margin: 0;
	width: 25px;
	height: 0;
	overflow: hidden;
    line-height: 12px;
	background: url('/templates/default/images/vertical-nav.png') 0 0 no-repeat;
}
/* Vertical slide navigation style for the currently active vertical slide navigation link */
.skin-slidedeck dl.slidedeck ul.verticalSlideNav li.active a {
    background-position: 0 -24px;
}
/* Vertical slide navigation link style when the parent horizontal slide is active */
.skin-slidedeck dl.slidedeck dt.active ul.verticalSlideNav li.active a {
	background-position: 0 -12px;
}

/*
 * The SlideDeck vertical slide navigation link hover state.
 */
dl.slidedeck dd.slide ul.verticalSlideNav li a:hover {
    opacity: 0.75;
    -moz-opacity: 0.75;
    -webkit-opacity: 0.75;
    -khtml-opacity: 0.75;
    -ms-filter: "Alpha(opacity=75)";
    filter: Alpha(opacity=75); 
}

.slidedeck
{
	display:none;
}