/*

	template: Artificial Intelligence
	author: luka cvrk (www.solucija.com)
	
*/
@import url(http://fonts.googleapis.com/css?family=Oxygen);
@font-face{
	font-family:bookman;
	src:url(BOOKOS.ttf)
}



body { 
	margin: 0; 
	/* padding: 20px 0; */ 
	/*background: #fff url(../images/bg.gif) repeat-x; */
	font: normal .8em oxygen, Sans-Serif; 
	line-height: 1.6em; 
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	text-align:justify;
	background:#B7DCFB;
}
/* LINKS AND HEADINGS STYLING */

a { color: #546F92; background: inherit; }
a:hover { color: #808080; background: inherit; }
h1  { font: bold 2em "Trebuchet MS", Helvetica, Sans-Serif; margin: 0; color: #fff; background-color:transparent; }
h2  { font:  1.3em "Trebuchet MS", Helvetica, Sans-Serif; }
h3 { clear: both; font-size: 1.1em; color: #000; background: #fff url(../images/h3bg.gif) no-repeat center left; padding: 0 14px; margin: 0;}
.blue { color: #546F92; background: inherit; }
.image { float: left; border: 2px solid #e2e2e2; padding: 3px; margin: 0 10px 8px 0; }
.fl_right{float:right}
.fl_left{float:left}

.btn{
	background:#FDB100;
	color:black;
	font-size:12px;
	border-radius:6px;
	padding:10px 45px;
	margin-left:7px;
	text-decoration:none;
	transition:0.2s all ease;
}

.btn:hover{
	background:#006663 ;
	color:white;
}
/* CONTENT WRAPPER */

#main { 
	width: 1010px; 
	padding:0 10px;
	overflow:hidden;
	margin:0 auto; 
	background:#FFF;
	box-shadow:0px 1px 8px #333333;
	border-radius:12px;
}

.clear{clear:both}
/* TOP LEFT LOGO */

#logo { 
	float: left; 
}
	#logo h1 { color: #000; background: #fff; }


.sidebar{
	width:250px;
	float:left;
}

.main-content{
	width:735px;;
	float:right;
	overflow:hidden;
	padding-top:10px;
}
/* TOP RIGHT HORIZONTAL MENU */

/* LEFT INTRO SIDE */	

#intro_left {
	clear: left;
	float: left;
	width: 250px;
	background: #D7FFD3;
	color: #000;
	margin: 0 0 1px 0;
}
	#intro_left a { color: #000;}
	#intro_left p { padding: 14px 15px; margin: 0; }

	/* LEFT VERTICAL MENU */
	
	.menu_left { 
		float: left;  
		margin: 0px 0 6px 0; 
		padding: 0 0 1px 0; 
		border-bottom: 2px solid #e2e2e2; 
	}
		.menu_left li { list-style: none; }
		.menu_left li a { 
			display: block; 
			color: #eee; 
	/*text-shadow:2px 0px 1px #333;*/
			/*background: #006663 url(../images/arrow.gif) no-repeat center left; */
			background:#079B51;
			width: 204px;  
			padding: 7px 23px 7px 23px; 
			margin: 0 0 1px 0; 
			font-weight: bold; 
			text-decoration: none;
			transition:all ease 0.15s;
			transition:text-shadow 0.5s ease;
		}	
		.menu_left li a:hover { background: #000 url(../images/arrow.gif) no-repeat center left; color: #fff; margin-left:10px; width:194px;	text-shadow:100px 0px 1px #201d1d;
  }

/* RIGHT INTRO SIDE */
	
#intro_right {
	float: right;
	width: 340px;
	padding: 25px 280px 0 20px;
	background: #BCCEDA url(../images/intro.jpg) no-repeat;
	color: #547592;
	margin: 0 0 6px 0;
	height: 174px;
	border: 2px solid #e2e2e2;
}
	#intro_right h1 { margin: 0 0 20px 0; }
	#intro_right .white { color: #FFF; background-color:transparent; }
	
/* LEFT SIDE */
	
#left {
	float: left;
	width: 250px;
}
	.box {
		padding: 4px 15px;
		border: 1px solid #ccc;
		margin: 0 0 10px 0;
	}
	.note {
		padding: 15px 15px 20px 100px;
		border: 1px solid #CFCB66;
        background:#FFFFAD url(../images/package.gif) no-repeat;
		margin: 0 0 5px 0;
		color: #585616;
	    height:100px;
		width: 237px;
		margin-top: 10px;
}

/* RIGHT SIDE */

#right {
	/* float: right; */
	width: 725px;
}

	.wrap{
		height:auto;
		width: 355px;
		overflow:hidden; 
	}
	.leftcol { 
		float: left; 
		padding: 12px 15px;
		width: 323px; 
		border:#ccc 1px solid;
		text-align: justify;
	}
	.rightcol { 
		float: right; 
		padding: 10px 15px;
		width: 285px; 
		border:#ccc 1px solid;
		}
	.special {
		clear: both;
		margin:10px 0 0px 0;	
		padding: 5px 20px;
		
		background: #fff;
		color: #444;
		
		padding-right: 5px;	}

	.special img{
		height:110px;
		width:200px;
		margin-top:12px;
		float:left;
	}

/* FOOTER */

#footer { clear: both; padding: 5px; border-top: 1px solid #ccc; }




.ticker {
	width: 100%;
	height: 100px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: 5px;
	font-size: 12px;
}

#ticker_02 {
	height: 94px;
}

.ticker li {
	height: 80px;
	border-bottom: 1px dotted #DDD;
	padding: 5px;
	margin: 0px 5px;
}

#ticker_04 {
	height: 150px;
}
#ticker_04 li {
	height: 40px;
	overflow: hidden;
} 
#ticker_02 img {
	float: left;
	height: 80px;
	width: 80px;
	margin-right: 10px;
} 


h2.headline{
	/*border-bottom:2px solid #024A72;*/
	background: #0266b2;
/* url(../images/ticke.jpg) repeat-x;*/
	
	color:#FFF;
	border-radius: 6px 6px 0px 0px;
	-webkit-border-radius: 6px 6px 0px 0px;
	-moz-border-radius: 6px 6px 0px 0px;
	-ms-border-radius: 6px 6px 0px 0px;
	-o-border-radius: 6px 6px 0px 0px;
	padding-top:3px;
	height:30px;
	margin:10px 0 -1px 0;
}


h2.headline span{
	color:#fff;
	font-size: 13px;
text-transform: uppercase;
	border-radius: 6px 6px 0px 0px;
	-webkit-border-radius: 6px 6px 0px 0px;
	-moz-border-radius: 6px 6px 0px 0px;
	-ms-border-radius: 6px 6px 0px 0px;
	-o-border-radius: 6px 6px 0px 0px;
	/*border-bottom:20px solid #024A72;
	border-right:20px solid;
	display:inline-block;*/
	height:0;
	padding:0 10px;
}




/*
 * jQuery FlexSlider v1.8
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {width: 100%; margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 1010px !important; height: 400px !important; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {background: #fff;position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative;}

/* Caption style */
/* IE rgba() hack */
.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
.flex-caption 
{
	width: 96%; padding: 2%; 
	margin: 0; position: absolute; 
	left: 0; bottom: 0; 
/*	background: rgba(0,0,0,.3); 
*/	color: #fff; 
	text-shadow: 0 -1px 0 rgba(0,0,0,.3); 
	font-size: 18px; 
	line-height: 18px;
	}

/* Direction Nav */
.flex-direction-nav { height: 0; }
.flex-direction-nav li a {width: 45px; height: 45px; margin: -13px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat; position: absolute; top: 50%; cursor: pointer; text-indent: -999em;}
.flex-direction-nav li .next {background-position: -45px 0; right:25px;}
.flex-direction-nav li .prev {left: 25px;}
.flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
.flex-control-nav {position: absolute; bottom: 15px; right:15px; text-align: center;}
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 27px; height: 20px; display: block; background: url(../images/bg_control_nav.png) no-repeat; cursor: pointer; text-indent: -999em;}
.flex-control-nav li a:hover {background-position: 0 -30px;}
.flex-control-nav li a.active {background-position: 0 -60px; cursor: default;}





.recentwork{
	margin-top:-10px;
}

.recentwork h2{
	margin-bottom: 0 !important;
}

.recent_works_left {
	float:left;
}
.recent_works_left h2 {
	margin-bottom:10px;
}
.recent_works_left h2 strong {
	font-weight:700;
}
.recent_works_arrows {
	float:right;
}
.recent_works_arrows a.prev_item {
	position:absolute;
	margin-left: -35px;
	margin-top: -30px;
	width:15px;
	height:15px;
	margin-right:8px;
	background:url("../images/portfolio_prev.png") no-repeat top;
}
.recent_works_arrows a.prev_item:hover {
	background:url("../images/portfolio_prev.png") no-repeat bottom;
}
.recent_works_arrows a.next_item {
	position:absolute;
	margin-top: -30px;
	margin-left: -18px;
	width:15px;
	height:15px;
	background:url("../images/portfolio_next.png") no-repeat top;
}
.recent_works_arrows a.next_item:hover {
	background:url("../images/portfolio_next.png") no-repeat bottom;
}
.recent_works {
	padding:0 0 0 0;
	margin:0 0 0 0;
}
.recent_works ul:after {
	content: "";
	display: block;
	height:0;
	overflow:hidden;
	clear:both;
}
.recent_works ul li {
	margin:0 12px 60px 12px;
	width:160px;
	height:110px;
	float:left;
	background:#FFF;
}
.recent_works ul li .recent_image {
	width:140px;
	height:70px;
	padding:5px;
	border:1px solid #cccccc;
	display:block;
	overflow:hidden;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
	position:relative;
}

.recent_works ul li .recent_image .portfolio_image {
	width:140px;
	height:70px;
	text-align:center;
	vertical-align:middle;
}
.recent_works ul li .title {
	text-align:left;
	display:block;
	font-size:18px;
	color:#262626;
}
.recent_works ul li .title a {
	font-size:12px;
	color:#262626;
	font-weight:bold;
}
.recent_works ul li .title a:hover {
	color:#d93e39;
}
.recent_works ul li .clear {
	display:block;
	clear:both;
	padding:5px 0 0 0;
}

.recent_post_slider .slides_container {
	width:120px;
	display:none;
}
.recent_post_slider .slides_container div.slide {
	width:120px;
	display:block;
}


ul#work{
	list-style: none;
	margin-left:-20px !important;
}

.caroufredsel_wrapper{
	width: 765px !important;
	height:85px !important;
}



#cssmenu {
  position: relative;
  height: 40px;
  background: #079b51;
/* url(../images/ticke.jpg) repeat-x;*/
  border-radius: 6px 6px 0px 0px;
-webkit-border-radius: 6px 6px 0px 0px;
-moz-border-radius: 6px 6px 0px 0px;
-ms-border-radius: 6px 6px 0px 0px;
-o-border-radius: 6px 6px 0px 0px;
  width: auto;
}
#cssmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}
#cssmenu > ul {
  position: relative;
  display: block;
  height: 32px;
  width: 100%;
  z-index: 500;
}
#cssmenu > ul > li {
  display: block;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}
#cssmenu > ul > #menu-button {
  display: none;
}
#cssmenu ul li a {
  display: block;
  font-family: Helvetica, sans-serif;
  text-decoration: none;
} 
#cssmenu > ul > li > a {
	
  font-size: 12px;
  padding: 14px 20px;
  color: #fff;
  text-transform: uppercase;
  -webkit-transition: color 0.25s ease-out;
  -moz-transition: color 0.25s ease-out;
  -ms-transition: color 0.25s ease-out;
  -o-transition: color 0.25s ease-out;
  transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
  color: #ffffff;
}
#cssmenu li.has-sub::after {
  display: block;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}
#cssmenu > ul > li.has-sub::after {
  right: 15px;
  top: 18px;
  border: 5px solid transparent;
  border-top-color: #eee;
}
#cssmenu > ul > li:hover::after {
  border-top-color: #ffffff;
}
#indicatorContainer {
  position: absolute;
  height: 12px;
  width: 100%;
  bottom: 0px;
  overflow: hidden;
  z-index: -1;
}
#pIndicator {
  position: absolute;
  height: 0;
  width: 100%;
  border: 12px solid transparent;
  border-top-color: #2b2f3a;
  z-index: -2;
  -webkit-transition: left .25s ease;
  -moz-transition: left .25s ease;
  -ms-transition: left .25s ease;
  -o-transition: left .25s ease;


  transition: left .25s ease;
}
#cIndicator {
  position: absolute;
  height: 0;
  width: 100%;
  border: 12px solid transparent;
  border-top-color: #2b2f3a;
  top: -12px;
  right: 100%;
  z-index: -2;
}
#cssmenu ul ul {
  position: absolute;
  box-shadow: 2px 2px 2px 2px;
  -moz-box-shadow: 2px 2px 2px 2px;
  -ms-box-shadow: 2px 2px 2px 2px;
  -o-box-shadow: 2px 2px 2px 2px;
  -webkit-box-shadow: 2px 2px 2px 2px;
  left: -9999px;
  top: 70px;
  opacity: 0;
  -webkit-transition: opacity .3s ease, top .25s ease;
  -moz-transition: opacity .3s ease, top .25s ease;
  -ms-transition: opacity .3s ease, top .25s ease;
  -o-transition: opacity .3s ease, top .25s ease;
  transition: opacity .3s ease, top .25s ease;
  z-index: 1000;
}
#cssmenu ul ul ul {
  top: 37px;
  padding-left: 5px;
}
#cssmenu ul ul li {
  position: relative;
}
#cssmenu > ul > li:hover > ul {
  left: auto;
  top: 35px;
  opacity: 1;
}
#cssmenu ul ul li:hover > ul {
  left: 170px;
  top: 0;
  opacity: 1;
}
#cssmenu ul ul li a {
  width: 130px;
  border-bottom: 1px solid #376CA0;
  padding: 10px 20px;
  font-size: 12px;
  color: #fff;
  background: #4984BE;
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  -ms-transition: all .35s ease;
  -o-transition: all .35s ease;
  transition: all .35s ease;
}
#cssmenu ul ul li:hover > a {
  background: #376CA0;
  color: #fff;
}

#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
  border-bottom: 0;
}
.submenuArrow {
  border: 6px solid transparent;
  width: 0;
  height: 0;
  border-bottom-color: #4984BE;
  position: absolute;
  top: -12px;
}
#cssmenu ul ul li.has-sub::after {
  border: 4px solid transparent;
  border-left-color: #000;
  right: 10px;
  top: 12px;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu ul ul li.has-sub:hover::after {
  border-left-color: #fdb100;
  right: -5px;
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: auto;
  }
  #cssmenu ul {
    width: auto;
  }
  #cssmenu .submenuArrow,
  #cssmenu #indicatorContainer {
    display: none;
  }
  #cssmenu > ul {
    height: auto;
    display: block;
  }
  #cssmenu > ul > li {
    float: none;
  }
  #cssmenu li,
  #cssmenu > ul > li {
    display: none;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu ul > li:hover > ul,
  #cssmenu ul ul > li:hover > ul {
    position: relative;
    left: auto;
    top: auto;
    opacity: 1;
    padding-left: 0;
  }
  #cssmenu ul .has-sub::after {
    display: none;
  }
  #cssmenu ul li a {
    padding: 12px 20px;
  }
  #cssmenu ul ul li a {
    border: 0;
    background: none;
    width: auto;
    padding: 8px 35px;
  }
  #cssmenu ul ul li:hover > a {
    background: none;
    color: #8c9195;
  }
  #cssmenu ul ul ul a {
    padding: 8px 50px;
  }
  #cssmenu ul ul ul ul a {
    padding: 8px 65px;
  }
  #cssmenu ul ul ul ul ul a {
    padding: 8px 80px;
  }
  #cssmenu ul ul ul ul ul ul a {
    padding: 8px 95px;
  }
  #cssmenu > ul > #menu-button {
    display: block;
    cursor: pointer;
  }
  #cssmenu #menu-button > a {
    padding: 14px 20px;
  }
  #cssmenu ul.open li,
  #cssmenu > ul.open > li {
    display: block;
  }
  #cssmenu > ul.open > li#menu-button > a {
    color: #fff;
    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
  }
  #cssmenu #menu-button::after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #7a8189;
    border-bottom: 2px solid #7a8189;
    right: 20px;
    top: 15px;
  }
  #cssmenu #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #7a8189;
    right: 20px;
    top: 25px;
  }
  #cssmenu ul.open #menu-button::after,
  #cssmenu ul.open #menu-button::before {
    border-color: #fff;
  }
}