/**********************************************************************
  __      __ _                   _____
  \ \    / /(_)                 / ____|
   \ \  / /  _   ___ __      __| (___    ___   _   _  _ __  ___  ___
    \ \/ /  | | / _ \\ \ /\ / / \___ \  / _ \ | | | || '__|/ __|/ _ \
     \  /   | ||  __/ \ V  V /  ____) || (_) || |_| || |  | (__|  __/
      \/    |_| \___|  \_/\_/  |_____/  \___/  \__,_||_|   \___|\___|
          web: www.viewsource.biz  email: office@viewsource.biz
                    Copyright (c) 2005-2009 ViewSource
                    
***********************************************************************/


/* C O M M O N ********************************************************/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic);
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700);
@font-face {
	font-family: 'ecoicon';
	src: url('/design/fonts/ecoicons/ecoicon.eot');
	src: url('/design/fonts/ecoicons/ecoicon.eot?#iefix') format('embedded-opentype'),
		 url('/design/fonts/ecoicons/ecoicon.woff') format('woff'),
		 url('/design/fonts/ecoicons/ecoicon.ttf') format('truetype'),
		 url('/design/fonts/ecoicons/ecoicon.svg#ecoicon') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {margin: 0px; padding: 0px; background: #f4f2f0; font: 10px Verdana, Arial, sans-serif;}

h1 {margin: 0px 0px 10px 0px; font-size: 16px;}
h2 {margin: 0px 0px 10px 0px; font-size: 14px;}
h3 {margin: 0px 0px 2px 0px; font-size: 12px;}

ul {margin: 2px 0px 2px 0px; padding: 0px 0px 0px 15px;list-style-type:none;}
li {margin: 1px 0 1px 0px;	padding: 0px;}

hr {border: 0px; border-top: 1px solid #ddd; }

a, a:visited {color:#009; text-decoration:none;outline:none;}
a:hover {text-decoration:none;}
a img, a:visited img, a:hover img {border: 0px;}

img {border: 0px; }
form {margin: 0px;	padding: 0px;}

.clear{clear:both;}
header				{}
footer				{}
section				{}
aside				{float:left;}

.SiteWidth			{width:1000px;margin:0 auto 0 auto;}

#box { border: 1px solid #ccc; margin: 2px 0 2px 0px; }


/* M A I N   C O N T A I N E R S **************************************/

#Header        { font-size: 10px;}
#Body          {}
#Footer        {}

#ColContainer	{}
#LeftCol       {width: 200px;float:left;}
#CenterCol     {}
#RightCol      {width: 200px;float:left;}
.Table {display:table;}
.TableCell {display:table-cell;}
.TableRow {display:table-row;}
.AlignRight{text-align:right;}
/* C O N T A I N E R S   E L E M E N T S ******************************/

#HeaderWrapper			{}
#HeaderTopWrapper		{}
#HeaderTop				{width: 100%;}
#HeaderBottom			{}
#HeaderLeft             {}
#HeaderRight            {}
#HeaderLogo             {}
#HeaderLang             {margin: 0px 0px 5px 0px;}
#HeaderLang a           {color:#000; text-decoration:none;}
#HeaderLang a:visited   {color:#000; text-decoration:none;}
#HeaderLang a:hover     {color:#000; text-decoration:underline;}
#HeaderSearch           {}
#HeaderSearch input     {border: 1px solid #ccc; background: #f9f9f9;}
#HeaderSearchButon      {color:#444; font-size: 10px; height: 20px;}
#HeaderOpcije           {margin: 5px 0 0 0px; }
#HeaderOpcije a 		{color:#000; text-decoration:none;}
#HeaderOpcije a:visited {color:#000; text-decoration:none;}
#HeaderOpcije a:hover 	{color:#000; text-decoration:underline;}

#LeftColContent         {background: #fff; padding:0px 5px 0px 5px;}

#CenterColContent       { padding:0px;}

#RightColContent        {background: #fff; padding:0px 5px 0px 5px;}

#FooterContent          {}
#Footer a, #Footer a:visited 		{color:#000;text-decoration:none;}
#Footer a:hover 		{text-decoration:underline;}
#FooterBottom           {width: 790px; height: 4px;}

.ArticleBox				{display:none;z-index:950;position:absolute;width:100%;}

.ArticleContent			{background: transparent url("/design/images/curtains.png") repeat scroll left top;position: fixed;height: 100%;width: 100%;left:0px;top:0px;}

.ArticleContentColor	{background: transparent url("/design/images/pozadina.png") repeat scroll 0% 0%;position: fixed;width: auto;height: auto; margin: 0px;padding: 0px;top: 0px;right: 0px;bottom: 0px;left: 0px;}
.ArticleOut				{width:20px; height:20px;padding-top:15px;transition: all 0.4s ease-in-out 0s;cursor:pointer;margin:0 auto 0 auto;}
.ArticleOut img:hover		{opacity:0.6;transition: all 0.4s ease-in-out 0s;}

.Articlecenter			{text-align:center;color:#fff;overflow-x: hidden;}
.ArticleTitle			{font-family: 'Oswald', sans-serif;font-size:60px;padding:115px 0px 15px 0;text-transform:uppercase;color: #fff;text-shadow: 1px 1px 2px #000;text-align:center;}
.ArticleText			{font-family: 'Open Sans', sans-serif;font-size: 13px;line-height: 1.5;font-style: normal;font-weight: normal;padding:20px 15px 20px 15px;text-align:center;color:#fff;}
#Background				{display:none;z-index:949;}

.section 				{display: block;}
.ArticleContact			{float:left;width:300px;margin:0px 10px 0 10px;text-align:center;}
.ArticleForm			{width: 545px;margin: 0px auto;padding: 0px;text-align:left;}


.ArticleLabel {
    width: 225px;
    display: block;
    font-size: 10px;
    line-height: 11px;
    margin: 0px 0px 4px;
    color: #FFF;
}
.ArticleInput {
    font-family:"Open Sans",sans-serif;
    font-size: 12px;
    color: #000;
    width: 225px;
    margin: 0px 0px 10px;
    padding: 10px 5px;
    background-color: #FFF;
    border: 1px solid #FFF;
}

.ArticleTextarea  {  
	font-family:"Open Sans",sans-serif;
    font-size: 12px;
    color: #000;
    width: 280px;
    height: 145px;
    margin: 0px 0px 10px;
    padding: 10px 5px;
    background-color: #FFF;
    border: 1px solid #FFF;
}
.ArticleLeft{float:left;}
.ArticleRight{float:right;}
.Buttom{
    font-family: "Oswald";
    font-size: 15px;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    width: 80px;
    height: 30px;
    line-height: 30px;
    float: right;
    margin-top: 13px;
    
    padding: 0px;
    color: #000;
    background: #FFF none repeat scroll 0% 0%;
    border: 1px solid #FFF;
    cursor: pointer;
}




/* C L A S S   B O X **************************************************/

.box-left-cel {margin: 5px 0 5px 0px; width: 190px;}
.box-header-left-cel {background:#ccc; padding-left:5px; height: 25px;}

.box-right-cel {margin: 5px 0 5px 0px; widh: 190px;}
.box-wrap-right-cel {}

.box-footer-right-cel {border-bottom: 2px solid #cccccc; font-size: 0px; padding: 0px; margin: 0px;}


.box-banner {margin: 5px 0 0 0; width: 190px;}
.box-banner-content {}

.box-content {border:2px solid #ccc;padding: 3px;}


/* C L A S S   C A T A L O G ******************************************/

.one-item {margin: 0 0 30px 0px;}
.one-item-picture {border: 1px solid #cccccc; margin: 3px;}
.one-item-parameter {width: 230px;}
.one-item-group-filter {width: 395px;}
.one-item-group-items {margin: 0 0 30px 30px;}
.one-item-group-items-parameter {width: 200px;}
.one-item-group-items-picture {border: 1px solid #cccccc;}
.category-items {margin: 0 0 30px 0px;}
.category-items-parameter {width: 230px;}
.category-items-picture {border: 1px solid #cccccc;}
.category-items-group-items-filter {width: 395px;}
.category-items-group-items {margin: 0 0 30px 30px;}
.category-items-group-items-parameter {width: 200px;}
.category-items-group-items-picture {border: 1px solid #cccccc;}


/***************************** C U S T O M ******************************/

.galleryThumbs { margin: 3px;}

.galleryThumbs img {padding:0px;margin:0px;border: 0px;}

.info {background: #f9f9f9; border: 1px solid #eeeeee; padding: 5px; margin: 5px;}

.menu {
    position: absolute;
    font-family: 'Oswald', sans-serif;
    font-style: normal;
    font-weight: normal;
    top: 37px;
    right: 45px;
    width:autopx;
    height: auto;
    text-align: right;
    z-index: 1000;
}

.menu ul {
    height: auto;
    display: inline-block;
}

.menu ul li {
    position: relative;
    float: left;
    margin: 0px;
    padding: 0px;
    width:90px;
}

.menu a.active {
    color: #ed2024;
    background: transparent none repeat scroll 0% 0%;
}

.menu ul li a {
    font-size: 20px;
    color: #FFF;
    text-shadow: 1px 1px 2px #000;
    display: block;
    height: auto;
    margin: 0px;
    padding: 0px;
    outline: medium none;
    transition: all 0.4s ease-in-out 0s;
}

.menu a {
    color: #FFF;
    font-weight: normal;
    text-decoration: none;
}
.menu a:hover {
    color: #ed2024;
}

.menu ul li a span {
    font-size: 17px;
    color: #FFF;
    text-shadow: 1px 1px 2px #000;
    float: left;
    width: 100%;
    overflow: hidden;
    clear: both;
}
.navmain{}
.navmain td{padding:0 0 0 10px;}

.social-icons-wrapper {
    position: absolute;
    width: auto;
    top: 39px;
    left: 40px;
    margin: 0px;
    padding: 0px;
    color: #000;
    z-index: 1;
}
.social-icons-wrapper ul {
    float: left;
    margin: 0px;
    padding: 0px;
    list-style-type: none;}

  .social-icons-wrapper ul li {
    display: inline;
    padding: 0px 0px 5px;
}



ul.social-icons a img {
    width: 20px;
    height: 20px;
    padding: 5px;
    opacity: 1;
    transition: all 0.4s linear 0s;
}

ul.social-icons a:hover {
    
    color: #FFF;
    opacity: 0.3;
    transition: all 0.5s linear 0s;}


.container {
    width: 1000px;
    margin: 0px auto 0px auto;
    padding: 0px;
    position: relative;
}

.center {
    margin: 0px auto 0px auto;
    position: relative;
    z-index: 2;
}
.container .eight.columns {
    width:480px;
}

.column, .columns {
    margin-left: 10px;
    margin-right: 10px;
    float: left;
    display: inline;
}

#intro-top-line {
    background: transparent url("../images/intro-top-line.png") no-repeat scroll right center;
    width: auto;
    height: 40px;
}

#intro-top {
    font-family: "Oswald",sans-serif;
    font-size: 25px;
    line-height: 1;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    color: #FFF;
    margin: 0px auto;
    padding: 7px 0px 0px;
	text-shadow: 2px 2px #000;
	font-size: 20px;
	font-weight: 600;
}

#intro-title {
    font-family: "Oswald",sans-serif;
    font-size: 160px;
    line-height: 160px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: none;
    text-align: center;
    margin: 29px auto 29px;
    padding: 0px;
    text-shadow: 1px 1px 2px #000;
}

#intro-bottom-line {
    background: transparent url("/design/images/intro-bottom-line.png") no-repeat scroll left center;
    width: auto;
    height: 40px;
    margin: 5px 0px 0px;
}

.TextRight	{text-align: right;
			text-shadow: 2px 2px #000;
			font-size: 20px;
			font-weight: 600;
			font-family: "Oswald",sans-serif;}
			
			
.container .sixteen.columns {
    width: 1000px;
}

.SlideContainer{top:25%;position:absolute;width:100%;}


.IndexContent	{bottom:30px;text-align:center;width:100%;position:fixed;}
.IndexContent img		{opacity:1.0;transition: all 0.4s linear 0s;}
.IndexContent img:hover{opacity: 0.60;}
#curtains {
    position: fixed;
    height: 100%;
    width: 100%;
    background: transparent url("/design/images/curtains.png") repeat scroll left top;
    z-index: -1;
    left:0px;
    top:0px;
}

ul.social-icons a img:hover {
    padding: 5px;
    opacity: 0.85;
}
.borders {
    position: fixed;
    width: 100%;
    height: 100%;
    border: 20px solid rgba(0, 0, 0, 0.5);
    z-index: 0;}
   .borders, .borders::after, .borders::before {
    box-sizing: border-box;
}
    
    .upper-page {
    min-height: 100%;
    margin: 0px;
    padding: 0px;
    background: transparent none repeat scroll 0% 0%;
}


.divider-left-top {
  
    background: transparent url("/design/images/left-top.png") no-repeat scroll 0% 0%;
}

.divider-right-top {
 
    background: transparent url("/design/images/right-top.png") no-repeat scroll 100% 0%;
}

.divider-left-bottom {
   
    background: transparent url("/design/images/left-bottom.png") no-repeat scroll 0% 100%;
}

.divider-right-bottom {
  
    background: transparent url("/design/images/right-bottom.png") no-repeat scroll 100% 100%;
    
    padiing-top:20px;
}
.ArticleOptions{width:300px;float: left;display: inline;margin-left: 10px;margin-right: 10px;color:#fff;text-align:center;}
.ArticleOptionsTitle{font-family: "Oswald";font-size:30px;line-height: 35px;font-style: normal;font-weight: normal;letter-spacing: normal;text-transform: none;text-align: center;color: #FFF;text-shadow: 1px 1px 2px #555;margin: 0px;padding: 20px 0px 10px;}




.hi-icon-wrap {
text-align: center;
margin: 0 auto;
padding: 0;
}

.hi-icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 15px 30px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
color: #555;
z-index: 1;
}

.hi-icon:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
-webkit-box-sizing: content-box; 
   -moz-box-sizing: content-box; 
        box-sizing: content-box;
}

.hi-icon:before {
font-family: 'ecoicon';
speak: none;
font-size: 48px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}

.hi-icon-mobile:before {
	content: "\e009";
}

.hi-icon-screen:before {
	content: "\e00a";
}

.hi-icon-earth:before {
	content: "\e002";
}

.hi-icon-support:before {
	content: "\e000";
}

.hi-icon-locked:before {
	content: "\e001";
}

.hi-icon-cog:before {
	content: "\e003";
}

.hi-icon-clock:before {
	content: "\e004";
}

.hi-icon-videos:before {
	content: "\e005";
}

.hi-icon-list:before {
	content: "\e006";
}

.hi-icon-refresh:before {
	content: "\e007";
}

.hi-icon-images:before {
	content: "\e008";
}

.hi-icon-pencil:before {
	content: "\e00b";
}

.hi-icon-link:before {
	content: "\e00c";
}

.hi-icon-mail:before {
	content: "\e00d";
}

.hi-icon-location:before {
	content: "\e00e";
}

.hi-icon-archive:before {
	content: "\e00f";
}

.hi-icon-chat:before {
	content: "\e010";
}

.hi-icon-bookmark:before {
	content: "\e011";
}

.hi-icon-user:before {
	content: "\e012";
}

.hi-icon-contract:before {
	content: "\e013";
}

.hi-icon-star:before {
	content: "\e014";
}


/* effect 8 */
.set-8 {
background: none;
margin: 20px 0 20px 0;
}

.hi-icon-effect-8 .hi-icon {
background: rgba(255, 255, 255, 0.1);
-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
   -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
        transition: transform ease-out 0.1s, background 0.2s;
color: #fff;
}

.hi-icon-effect-8 .hi-icon:after {
top: 0;
left: 0;
padding: 0;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
        opacity: 0;
   -moz-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: scale(0.9);
   -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
        transform: scale(0.9);
z-index: -1;
}

.no-touch .hi-icon-effect-8 .hi-icon:hover {
background: rgba(255, 255, 255, 0.05);
-webkit-transform: scale(0.93);
   -moz-transform: scale(0.93);
    -ms-transform: scale(0.93);
        transform: scale(0.93);
color: #fff;
text-decoration:none;
}

.hi-icon-effect-8 .hi-icon:hover:after {
-webkit-animation: sonarEffect 1.3s ease-out 75ms;
   -moz-animation: sonarEffect 1.3s ease-out 75ms;
        animation: sonarEffect 1.3s ease-out 75ms;
}


@-webkit-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 0.5);
		-webkit-transform: scale(1.5);
		opacity: 0;
	}
}


@-moz-keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 0.5);
		-moz-transform: scale(1.5);
		opacity: 0;
	}
}


@keyframes sonarEffect {
	0% {
		opacity: 0.3;
	}
	40% {
		opacity: 0.5;
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 0.5);
	}
	100% {
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 0.5);
		transform: scale(1.5);
		opacity: 0;
	}
}

/* screen loader */
.screen-loader {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
z-index: 10000;
}


/* preload */
#preload {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
right: 0;
bottom: 0;
background: #000;
display: none;
z-index: 10000;
}

#preload-status {
position: absolute;
width: 25px;
height: 25px;
margin: auto;
padding: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
background: #000 url('/design/images/preload.gif') no-repeat center center;
}

#preload-status {
        opacity: 1;
   -moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
	
	
/* preload content */
.preload-content {
position: fixed;
width: auto;
height: auto;
margin: 0;
padding: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
        opacity: 0.4;
   -moz-opacity: 0.4;
-webkit-opacity: 0.4;
filter: alpha(opacity=40);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}

.menu-mobile a.menu-mobile-trigger {
    background: transparent url("/design/images/menu-mobile-trigger.png") repeat scroll 0px 0px;
    width: 50px;
    height: 25px;
    margin: 0px;
    padding: 0px;
    transition: background-position 0.4s ease 0s;
    text-indent: -10000px;
   
}

.menu-mobile a:hover {
    color: #900;
}

.menu-mobile a.menu-mobile-trigger:hover {
    cursor: pointer;
    background-position: 50px 0px;}
    
    .menu-mobile li a {
    padding: 0px 0px 9px 7px;
    text-decoration: none;
    float: right;
    text-transform: uppercase;
    height: 20px;
    transition: all 0.4s ease-in-out 0s;}
    
    .menu-mobile li {
    position: relative;
    margin: 7px 0px 0px;
    padding: 0px 0px 10px;
    background: transparent none repeat scroll 0% 0%;
    float: right;
    text-transform: uppercase;
    height: 20px;
}

.menu-mobile li ul {
    display: none;
    right: 0px;
    position: absolute;
    top: 100%;
    background: transparent none repeat scroll 0% 0%;
}

.menu-mobile .lifting {
    margin: 8px 0px 0px;
    height: 20px;
}

.menu-mobile li a {
    padding: 0px 0px 9px 7px;
    text-decoration: none;
    float: right;
    text-transform: uppercase;
    height: 20px;
    transition: all 0.4s ease-in-out 0s;
}
.menu-mobile a {
    color: #FFF;
    font-weight: normal;
    text-decoration: none;
}
.menu-mobile {
    position: absolute;
    font-family: "Oswald",sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    text-shadow: 1px 1px 2px #000;
    width: auto;
    top: 38px;
    right: 46px;
    padding: 0px;
    display: none;
    visibility: visible;
    z-index: 1000;
}
.menu-mobile li:hover ul {
    display: block;
    width: auto;
}
.menu-mobile li ul a:hover {
    color: #900;
    background: transparent none repeat scroll 0% 0%;
}

.menu-mobile li ul a {
    white-space: nowrap;
    background: transparent none repeat scroll 0% 0%;
}

.menu-mobile li ul {
    display: none;
    right: 0px;
    position: absolute;
    top: 100%;
    background: transparent none repeat scroll 0% 0%;
}
.menu-mobile ul, li {
    margin: 0px;
    padding: 0px;
}

#intro-title img {max-width: 100%;}
.IndexPortfolio a{padding:8px 5px 0 5px;display:inline-block;}
.IndexPortfolio a img{display:block;}
.IndexPortfolio.SiteWidth{width:1030px;}