﻿

/****************************************************************************
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl,
dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio,
video {	margin: 0; 	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table {	border-collapse: collapse; border-spacing: 0; }



/****************************************************************************
FONTS
****************************************************************************/

@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal;
}



/****************************************************************************
BASIC STYLES
****************************************************************************/

body { background: #fff; color: #000; font: 14px Arial, Helvetica, sans-serif; }
/* 
a { color: #00e; text-decoration: none; }
a:visited { color: #551a8b; }
a:hover { color: #06e; text-decoration: underline; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; } */

h1, h2, h3, h4, h5, h6 { font: bold 14px Arial, Helvetica, sans-serif; color: #000; }
h1 { font-size: 30px; }
h1 a { color: #000; }
h2 {  font: 400 24px 'Open Sans', sans-serif, Times, serif !important; color:#fff !important; }
h2 a { color: #000; }
h3 { font-size: 18px; }
h3 a { color: #000; }
h4 { font: 300 16px 'Open Sans', sans-serif, Times, serif !important; color:#fff !important;  }
h4 a { color: #000; }
h5 { font: 600 16px 'Open Sans', sans-serif, Times, serif !important; color:#e74d2e; }
h5 span {  font: 300 13px 'Open Sans', sans-serif, Times, serif !important;  font-style:italic !important; color: #9c9c9c; font-style:italic; display:block; }
h6 {  font: 300 15px 'Open Sans', sans-serif, Times, serif !important;  color:#4ecca1;}
h6 a { color: #000; }
h4.heading {  padding-bottom:12px; background:url(images/heading-bg.png) repeat-x bottom; margin-bottom:19px;   }

ul {}
ul li []
ul li a {}
ol {}
ol li {}
ol li a {}

p strong { font-weight: bold; }
p em { font-style: italic; }

blockquote {}
blockquote p {}

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.last { margin-right:0px !important; }
p { font: 300 14px 'Open Sans', sans-serif, Times, serif; color:#fff;  }
p a { color: #e74d2e; }
p a:hover { color: #d83828;}

html, body {
	
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -48px;
}
.footer, .push {
	height: 48px;
}

/****************************************************************************
					HOME
****************************************************************************/
.header-wrapper { width:100%;/*  background:url(images/Navigation-bg.png) repeat; */  background: url(images/footer-bg.png) repeat; line-height:60px; margin-bottom:33px; height:60px;  }
.header-wrapper .logo { margin:0px !important; }

.mobile-nav { display:none; }
nav .active {  background:#808080; border-radius: 10px; padding:5px 10px; } 
nav .active:hover { color:#FFF; }
nav { margin-top: 2px; }
nav ul {  margin:0px !important; }
nav ul  li { display:inline-block; margin-right:31px; padding-bottom:30px; }
nav ul li > a { font: 300 18px 'Open Sans', sans-serif, Times, serif; color:#333333;  
      transition: color 0.5s linear;
      -moz-transition: color 0.5s linear;    /* FF3.7+ */
      -o-transition: color 0.5s 1inear;      /* Opera 10.5 */
      -webkit-transition: color 0.5s linear; /* Saf3.2+, Chrome */
     }
nav ul li > a:hover  { color:#e74d2e ;  }

.sub-menu { display:none; }
nav ul li ul { display:block; position:absolute; top:88px;  z-index:99999; background:url(images/Navigation-bg.png) repeat; min-width:300px; border-top:1px solid #FF0000; }
nav ul li ul li { display: block; padding-bottom: 0px; margin-right: 0px; }
nav ul li ul li a {  display:block; padding:8px 0px 7px 17px;/*  width:150px !important; */  border-bottom:1px solid #000; margin-right:0px;      
  		transition: background-color 0.5s linear;
      -moz-transition: background-color 0.5s linear;    /* FF3.7+ */
      -o-transition: background-color 0.5s 1inear;      /* Opera 10.5 */
      -webkit-transition: background-color 0.5s linear; /* Saf3.2+, Chrome */
       }
nav ul li ul li a:hover { background: url(images/li-bg-icon.png) no-repeat 18px 16px #fff; width: 300px !important; margin-left:-2px; margin-right:-2px; color:#e74d2e ; padding-left: 33px; }
nav ul li ul li a { font: 300 15px 'Open Sans', sans-serif, Times, serif; color:#fff; display:block;  }


.remove { display:none !important; }
.search_form { position:relative;}
.search_form input[type=submit] { position:absolute; top:25px; right:0px;  width:14px !important; height:14px; border:none !important; /* font-size:0px; */ display:inline-block !important; background:url(images/search.png) no-repeat; margin:0px !important; }
.search-bar {  display:none; }
.search-bar input { font: 300 18px 'Open Sans', sans-serif, Times, serif; color:#fff !important; background:none;  position:absolute; top:8px; right:15px;  display:block; width: 545px; height:35px !important;  padding-bottom:7px !important; border:none !important; border-radius:0px !important;  border-bottom:1px solid #fff !important;  }

.slider-wrapper { width:100%; height: position:relative; }
.slider-wrapper a { width:51px; height:51px; display:inline-block; }
.slider-wrapper a.prev { background:url(images/Prev-icon.png) no-repeat; position:absolute; top:360px; left:32px; }
.slider-wrapper a.prev:hover { background:url(images/Prev-icon-hover.png) no-repeat; }
.slider-wrapper a.next { background:url(images/Next-icon.png) no-repeat; position:absolute; top:360px; right:32px;}
.slider-wrapper a.next:hover { background:url(images/Next-icon-hover.png) no-repeat; }
.slider-wrapper .slides .slide { width:100%; }

.overlay-wrapper { position:absolute; bottom:108px; left:305px; }

ul#slide-list{  margin-left: 0px !important; overflow: hidden;  }
.overlay-wrapper #slide-list { margin-bottom: 10px; }

.slider-overlay { padding:16px 14px; width:414px;  background:url(images/Navigation-bg.png) repeat;  }
.slider-overlay h2 a { background: url(images/icon.png) no-repeat left center; padding-left:18px; margin:0px !important; color:#FFF;  }
.slider-overlay span { font: 400 14px 'Open Sans', sans-serif, Times, serif; color:#bdbdbd; margin-left:24px; }
.slider-overlay P { margin-left:24px; display:none;  padding-top:15px; background:url(images/heading-bg.png) repeat-x top; margin-top:15px; }
.slider-overlay .plus { background:url(images/plus.png) no-repeat; width:40px; height:40px; display:block; position:absolute; top:17px; right:0px; }
.slider-overlay .minus { background:url(images/close.png) no-repeat; width:40px; height:40px; display:block; position:absolute; top:17px; right:0px; }


#footer { height:48px; }
.footer-wrapper { width:100%;  background: url(images/footer-bg.png) repeat; }
footer p { font: 400 14px 'Open Sans', sans-serif, Times, serif; color:#333333; line-height:48px; margin:0px !important;  }
.home-footer { position:absolute; bottom:0px;  }

.social-nav { text-align:right; padding-top:8px; }
.social-nav a { width:130px; height:34px; display:inline-block;  }
.social-nav a.vimeo { background-image: url(images/viemo.png); background-repeat: no-repeat; background-position: 0 0; }
.social-nav a.tw { background:url(images/twitter.png) no-repeat; background-position: 0 0; }
.social-nav a.db { background:url(images/db.png) no-repeat; background-position: 0 0; }



.contant { width:100%; background: url(images/Navigation-bg.png) repeat; padding:36px 0px 47px 0px;/*  margin-bottom:40px; */ }

.main-side { margin-left:0px !important; }
.main-side p { line-height:22px; margin-bottom:33px; }

.who-we { width:310px; text-align:center; margin:0px 0px 38px 0px; float:left; }
.who-we figure { margin-bottom:20px; }

#accordion .title { background:url(images/acordian-title-bg.png) repeat;  cursor:pointer; width:275px; margin:0px 0px 14px 27px; outline:none; }	
.second { background:none !important; }
#accordion .title figure { width:50px; height:50px; border-radius:50%; float:left; margin:0px 16px 0px -27px; }
#accordion .title h3 { margin:5px 0px 5px 40px; font: 300 15px 'Open Sans', sans-serif, Times, serif; color:#fff; background:url(images/close-btn.png) no-repeat 95%; }
#accordion .title h3:hover { background-image:url(images/close-btn-hover.png); }
#accordion .ui-accordion-header-active h3 { background-image:url(images/close-btn-active.png); }
#accordion .title h3 span{ font: 300 15px 'Open Sans', sans-serif, Times, serif; color:#4ecca1; display:block;  }

#accordion p { color:#d1d1d1; line-height:22px; margin-bottom:25px; }
#accordion ul { margin-bottom:25px; }
#accordion li { padding-left:30px; background:url(images/cup.png) no-repeat left; }
#accordion li p { margin-bottom:10px }

.ui-accordion-content { margin-bottom:10px !important;  }

.slide-pagination #slide-list { bottom:0px !important; left:0px !important; }

/****************************************************************************
					Contact
****************************************************************************/

.contact { margin-top:-5px;}
/* .contact-form  {  margin-left:0px !important;  } */
.contact-form form input[type=text] { width:284px; margin-right:20px; height:30px;  border-radius:0px;  background:url(images/form-bg.png) repeat; outline-color: #e74d2e !important; border:1px solid #8a8a8a; font: 300 15px 'Open Sans', sans-serif, Times, serif; color:#999999;  }
.contact-form form input[type=text]:hover { border-color:#e74d2e; }
.contact-form form textarea { width:606px; height:170px; resize:none; border-radius:0px; background:url(images/form-bg.png) repeat; border-color:#8a8a8a ; border:1px solid #8a8a8a; font: 300 15px 'Open Sans', sans-serif, Times, serif; color:#999999; }
.contact-form form textarea:hover { border-color:#e74d2e; }
.contact-form form input[type=submit] { padding:10px 20px; width:135px; background:#e74d2e; border:none; border-radius:20px; font: 300 15px 'Open Sans', sans-serif, Times, serif; color:#fff; }
.contact-form form input[type=submit]:hover { background: #dF3F2F; }
.contact-info h6 { background:url(images/bullets.png) no-repeat left; padding-left:17px; }
.contact-info ul { margin:0px 0px 30px 17px; }
.contact-info ul li { font: 300 15px 'Open Sans', sans-serif, Times, serif; color:#fff; }
.contact-info ul li span { font: 300 15px 'Open Sans', sans-serif, Times, serif; color:#909090; }
.contact-info ul li a { color:#e74d2e; }

input[type=text]:focus, textarea:focus { 
  -webkit-box-shadow:inset 0 1px 1px rgba(231,77,46,.6), 0 0 8px rgba(231,77,46,.6) !important; 
  moz-box-shadow: inset 0 1px 1px rgba(231,77,46,.6), 0 0 8px rgba(231,77,46,.6) !important; 
  box-shadow: inset 0 1px 1px rgba(231,77,46,.6), 0 0 8px rgba(231,77,46,.6) !important;
  }

/****************************************************************************
					Blog
****************************************************************************/

.blog-post figure { width:540px; height:auto; position:relative; margin-bottom:22px; }
.blog-post figure img { width:100%; height:auto; }

.date {  font: 700 16px 'Open Sans', sans-serif, Times, serif; color:#e74d2e; background:url(images/date.png) no-repeat; width:60px; height:47px; padding-top:5px; text-align:center;  display:block; position:absolute; top:0px; right:-80px; }
.comment { font: 700 16px 'Open Sans', sans-serif, Times, serif; color:#e74d2e; background:url(images/comment.png) no-repeat; width:59px; height:35px; display:block; text-align:center; padding-top:12px; position:absolute; bottom:0px; right:-80px;  }

.blog-post { margin-bottom: 15px; }
.blog-post h4 a {  color:#e74d2e; float:right; background:url(images/back-arrow.png) no-repeat left; padding-left:20px; }
.blog-post p span { color:#40a885; }
.tages { background:url(images/tages-bg.png) repeat; height:33px; line-height:33px; }
.tages a{ font: 300 14px 'Open Sans', sans-serif, Times, serif; color:#e74d2e;  }
.tag  { background:url(images/tags.png) no-repeat 22px; padding-left:43px;  float:left;}
.author { float:right; background:url(images/author-icon.png) no-repeat left;  padding-left:25px; margin-right:12px; }

.widget { margin-bottom:30px; }
.widget ul li {     background:url(images/bullets.png) no-repeat left; }
.widget ul li a {  margin-left:16px; font: 300 15px 'Open Sans', sans-serif, Times, serif; color:#fff;background:url(images/tages-bg.png) repeat; display:block;height:27px; line-height:27px; padding:0px 8px; }
.widget ul li a.second { background:none; }
.widget ul li :hover { color:#e74d2e; }
.widget ul li a span { color:#e74d2e; float:right; }

.catagories .heading span { float:right; }
.catagories .heading span a.ar-left { width:15px; height:15px; background:url(images/ar-left.png) no-repeat; display:inline-block; margin-right:15px; }
.catagories .heading span a.ar-left:hover { background:url(images/ar-left-hover.png) no-repeat; }
.catagories .heading span a.ar-right { width:15px; height:15px; background:url(images/ar-right.png) no-repeat; display:inline-block; margin-left:15px; }
.catagories .heading span a.ar-right:hover { background:url(images/ar-right-hover.png) no-repeat; }

.footer-top { width:960px; margin:0 auto; padding: 15px 0px; }
.wid-pagination { float: right;  /* margin-top:-35px; */ }
.bolg-pagi { margin-top:8px; }
.wid-pagination li { display:inline-block; }
.wid-pagination li:hover { position: relative; top: -8px; }
.wid-pagination a { font: 300 15px 'Open Sans', sans-serif, Times, serif; color:#fff; height:23px; width:23px;  line-height:23px; text-align:center; display:inline-block; background:url(images/Navigation-bg.png) repeat; 
	 transition: color 0.5s linear;
      -moz-transition: color 0.5s linear;    /* FF3.7+ */
      -o-transition: color 0.5s 1inear;      /* Opera 10.5 */
      -webkit-transition: color 0.5s linear; /* Saf3.2+, Chrome */
    
 }
.wid-pagination a:hover {  color:#e74d2e; }
/****************************************************************************
					Blog_Post
****************************************************************************/

.blog-comment { padding-bottom:23px;  margin-bottom:22px; background:url(images/heading-bg.png) repeat-x bottom; }
.blog-comment ul li { margin-bottom:20px; width:605px; }
.blog-comment ul li figure { width:55px; height:50px; border-radius:50%; float:left; }
.blog-comment ul li .post-comment { width:535px; float:right; }

.ab-author  { margin-bottom:5px; }
.ab-author  a {  font: 300 14px 'Open Sans', sans-serif, Times, serif;  }
.ab-author .ath {  background:url(images/comment-authore.png) no-repeat left;  color:#4ecca1; padding-left:15px; display:inline-block; margin-right:15px; }
.dat {  background:url(images/date-icon.png) no-repeat left; color:#b7b7b7; padding-left:15px;  }
.ab-author .reply { color:#e74d2e; float:right; }

.post-comment article { background:url(images/tages-bg.png) repeat; padding:10px; }
.post-comment article p { margin-bottom:0px;  }
.post-comment article span { background:url(images/comment-p.png) no-repeat; height:9px; width:9px; display:block;  margin-left:-19px; }

.blog-comment .replay  { margin-left:50px; }
.blog-comment .replay li { margin-bottom:20px; width:555px; }
.blog-comment .replay li figure { width:55px; height:50px; border-radius:50%; float:left; }
.blog-comment .replay li .post-comment { width:488px; float:right; }

/****************************************************************************
					Services
****************************************************************************/

.service { width:300px; float:left; text-align:center; height:300px; vertical-align:middle; margin-left:0px !important; position:relative; }
.service img { margin-top:100px; margin-bottom:30px; }
.service h5 {  font: 700 16px 'Open Sans', sans-serif, Times, serif; color:#e74d2e; }
.service p { font: 300 13px 'Open Sans', sans-serif, Times, serif; color:#9c9c9c; font-style:italic; }

.overlay { display:none; background:url(images/overlay-bg.png) no-repeat; height:300px; width:300px; text-align:center; position:absolute; top:3px; left:0px; }
.overlay h5 { color:#fff; padding-top:42px; margin-bottom:33px;s }
.overlay img { margin-top:0px !important; margin-bottom:10px; }
.overlay a { display:block; font: 400 16px 'Open Sans', sans-serif, Times, serif; color:#fff; margin-left:70px; padding:8px 18px; width:114px; border:2px solid #FFF; margin-bottom:10px; border-radius:20px; }
.overlay a:hover { color:#e74d2e; background:#fff; }

/****************************************************************************
					Services 2
****************************************************************************/

.service-two .span4 { margin-left:0px; }

.service-two .overlay {  display:block; position:static; }

#tabs .fliter li { display:inline-block; background:url(images/tabs-li-bg.png) repeat; position:relative;
		 transition: background 0.5s linear;
      -moz-transition: background 0.5s linear;    /* FF3.7+ */
      -o-transition: background 0.5s 1inear;      /* Opera 10.5 */
      -webkit-transition: background 0.5s linear; /* Saf3.2+, Chrome */
      }

#tabs .fliter li:hover { background: #4ecca1; }
#tabs .fliter li:hover .tabs-bg { display:block; }
#tabs .fliter li a {  font: 300 16px 'Open Sans', sans-serif, Times, serif; color:#fff !important; outline:none; }
#tabs div { margin-top: 20px; }
#tabs div h2 { margin-bottom:17px; }
#tabs div p { margin-bottom:20px; line-height:20px;  }
#tabs div p span { color:#e74d2e; }

#tabs div ul { width:153px; float:left;text-align:center; border:1px solid #2d2d2d;  }
#tabs div ul li { display:block; font: 400 14px 'Open Sans', sans-serif, Times, serif; color:#fff;  background:url(images/tabs-li-bg.png) repeat;  padding:15px 0px; height:12px; }
#tabs div ul li.second { background:none; }
#tabs div ul li.last { color:#4ecca1; }
#tabs div ul li .wrong { width:12px; height:12px; background:url(images/wrong.png) no-repeat; display:block; margin: 0 auto; }
#tabs div ul li .right { width:16px; height:12px; background:url(images/right.png) no-repeat; display:block; margin: 0 auto; }

/****************************************************************************
					PROTFOLIO
****************************************************************************/

.protfolio .container { position: relative; }
.protfolio a.next { background:url(images/port-next.png) no-repeat; width:13px; height:20px; display: block; position: absolute; top: 0px; right: 0px; }
.protfolio a.next:hover { background:url(images/port-next-h.png) no-repeat; }
.protfolio a.back { background:url(images/port-back.png) no-repeat; width:13px; height:20px; display: block; position: absolute; top: 0px; right: 30px; }
.protfolio a.back:hover { background:url(images/port-back-h.png) no-repeat; }
.my-selector { margin-bottom: 40px;  }
.my-selector a { cursor: pointer; display: inline; font: 300 16px 'Open Sans', sans-serif, Times, serif; color:#fff !important; outline:none; display:inline-block; padding:8px 17px; background:url(images/tabs-li-bg.png) repeat; position:relative;
		transition: background 0.5s linear;
      -moz-transition: background 0.5s linear;    /* FF3.7+ */
      -o-transition: background 0.5s 1inear;      /* Opera 10.5 */
      -webkit-transition: background 0.5s linear; /* Saf3.2+, Chrome */
}
/*.my-selector a span { background:url(images/tabs-li-bg-hiver.png) no-repeat; width:7px; height:7px; position: absolute; bottom:-6px; left:25px; display:none; }
.my-selector a:hover { background: #4ecca1;}
.my-selector a:hover span { display: block; }

.my-selector a.selected { background: #4ecca1;}*/
#tabs .fliter li {  margin-bottom: 10px; } 
.my-selector a span {
	position: relative;
	background: #88b7d5;
	
}
.my-selector a:hover , .my-selector a.selected { background: #4ecca1;}
.my-selector a.selected:after, .my-selector a:hover:after {
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #4ecca1;
	border-width: 6px;
	left: 50%;
	margin-left: -0.3em;
	}



#project-eliment li { display: block; width:220px; height:160px; overflow: hidden; margin: 10px;  }
#project-eliment li .port-overlay { display: none; width:184px; height:124px; background:url(images/red-screen.png) repeat; position: absolute; top: 0px; left: 0px; padding: 18px;} 
#project-eliment li .port-overlay p {  margin-bottom: 30px; position:relative;  }
#project-eliment li .port-overlay span { background: url(images/portfolio-date.png) no-repeat left;  font: 300 14px 'Open Sans', sans-serif, Times, serif; color:#fff; padding-left:25px; }

 
#project-eliment li .port-overlay .zoom { background:url(images/zoom-defalt.png) no-repeat; width: 61px; height: 61px; display: inline-block;  margin: 0px 0px 0px 20px; */ }
#project-eliment li .port-overlay .zoom:hover { background:url(images/zoom-h.png) no-repeat; }
#project-eliment li .port-overlay .info { background:url(images/info.png) no-repeat; width: 61px; height: 61px; display: inline-block;  left: 118px;  }
#project-eliment li .port-overlay .info:hover { background:url(images/info-h.png) no-repeat;  }



/****** 	Two Column  ******/

#two-column #project-eliment li { width:450px; height:320px; } 
#two-column #project-eliment li a img { height: 100%; width: 100%; }
#two-column #project-eliment li .port-overlay { width:414px; height:284px; } 
#two-column #project-eliment li .port-overlay .zoom  {  margin: 0px 0px 0px 144px; }


/****** 	Three Column  ******/

#three-column #project-eliment li { width:300px; height:215px; } 
#three-column #project-eliment li a img { height: 100%; width: 100%; }
#three-column #project-eliment li .port-overlay { width:264px; height:179px; } 
#three-column #project-eliment li .port-overlay .zoom  {  margin: 0px 0px 0px 55px; }

/****** Single Page ******/

.protfolio #tabs { min-height:455px !important;  }
.protfolio #tabs div figure { width:620px; float:left; height:393px; }
.protfolio #tabs div figure img{ width: 100%; height: 100%; }
.protfolio #tabs div .detail { width:300px; float:right; margin-top:0px; }

.detail h2 { margin-bottom:0px; }
.detail h2 a { background: url(images/icon.png) no-repeat left center; padding-left:18px; margin:0px !important; color:#FFF;  }
.detail> span { font: 400 14px 'Open Sans', sans-serif, Times, serif; color:#bdbdbd; padding:0px 0px 20px 24px; margin-bottom:12px;  background:url(images/heading-bg.png) repeat-x bottom; display:block; }
.detail .dat { margin:0px 0px 12px 0px;  display:block;  }
.detail p { padding-top:22px; background:url(images/heading-bg.png) repeat-x top;   }
.detail h4 {  font: 300 14px 'Open Sans', sans-serif, Times, serif !important; color:#909090 !important;  }
.detail h4 span { color:#4ecca1; }
.detail div { margin-top:85px !important; }

#flip { margin: 60px auto 0px; outline:none !important; width: 1600px; overflow: auto; }
#flip ul { width: 3900px; }
#flip li { float: left; margin: 20px; }
#flip li a { width:220px; height:141px; display:block; }
#flip li a img { height: 100%; width: 100%; }

.ie8 .jspDrag { top: -2px !important; }
.ie9 .jspDrag { top: -2px !important; }
.ie10 .jspDrag { top: -2px !important; }


/****************************************************************************
					Timeline ON About page 
****************************************************************************/
.ie8 .jspDrag { top: -2px !important; }
.ie9 .jspDrag { top: -2px !important; }
.ie10 .jspDrag { top: -2px !important; }

#timeline {
		width: 620px;
		height: 350px;
		overflow: hidden;
		/* margin: 100px auto; */
		position: relative;
		/* background:url(images/heading-bg.png) repeat-x 0px 30px; */
	}

	#scrrol-bg { background:url(images/heading-bg.png) repeat-x; width:590px; height:10px; display:block; position:absolute;top:30px; left:17px; }
		#dates {
			/* width: 620px !important; */
			height: 60px;
			overflow: hidden;
			/* margin-left:0px !important;  */
			
			
		}
			#dates li {
				list-style: none;
				float: left;
				width: 100px;
				height: 33px;
				font-size: 24px;
				text-align: center;
				background: url(images/yes-marks.png) no-repeat bottom;
				
			}
				#dates a {
					line-height: 38px;
					padding-bottom: 10px;
					font: 400 12px 'Open Sans', sans-serif, Times, serif !important; 
					color:#4ecca1 !important;
				}
				#dates .selected {
			        font-size: 38px; 
				}
		
		#issues {
			width: 800px;
			height: 350px;
			overflow: hidden;
		}	
			#issues li {
				width: 620px;
				height: 350px;
				list-style: none;
				float: left;
			}
				/* #issues li.selected img {
					-webkit-transform: scale(1.1,1.1);
					-moz-transform: scale(1.1,1.1);
				    -o-transform: scale(1.1,1.1);
				    -ms-transform: scale(1.1,1.1);
				    transform: scale(1.1,1.1);
				} */
				#issues li img {
					float: left;
					width: 256px; 
					/* height: 256px; */
					/* margin: 10px 30px 10px 50px;
					background: transparent;
					-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; IE 8   
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);IE 6 & 7      
					zoom: 1;
					-webkit-transition: all 2s ease-in-out;
					-moz-transition: all 2s ease-in-out;
					-o-transition: all 2s ease-in-out;
					-ms-transition: all 2s ease-in-out; 
					transition: all 2s ease-in-out;
					-webkit-transform: scale(0.7,0.7);
					-moz-transform: scale(0.7,0.7);
				    -o-transform: scale(0.7,0.7);
				    -ms-transform: scale(0.7,0.7);
				    transform: scale(0.7,0.7); */
				}
				/* #issues li h1 {
					color: #ffcc00;
					font-size: 48px;
					margin: 20px 0;
					text-shadow: #000 1px 1px 2px;
				} */
				#issues li p {
					/* font-size: 14px;
					margin-right: 70px;
					font-weight: normal;
					line-height: 22px;
					text-shadow: #000 1px 1px 2px; */
					font: 400 14px 'Open Sans', sans-serif, Times, serif !important; color: #fff; 
					margin-bottom:30px;
					width:330px; 
					float:right;
				}
				
				#issues li p span { color:#e74d2e; }
		
		#grad_left,
		#grad_right {
			width: 100px;
			height: 350px;
			position: absolute;
			top: 0;
		}
			#grad_left {
		        left: 0;
		        background: url('../images/grad_left.png') repeat-y;
			}
			#grad_right {
		        right: 0;
		        background: url('../images/grad_right.png') repeat-y;
			}
		
		#next,
		#prev {
			/* position: absolute;
			top: 0;
			font-size: 70px;
			top: 170px; */
			width: 22px;
			height: 38px;
			/* background-position: 0 0;
			background-repeat: no-repeat; */
			text-indent: -9999px;
			overflow: hidden;
		}
			/* #next:hover,
			#prev:hover {
				background-position: 0 -76px; */
			
			#next {
				position:absolute  !important; top:25px  !important; right:-13px  !important;
				display:block  !important;
				background: url(images/scrol-next.png) no-repeat ;
			}
			#prev {
				position:absolute; top:25px; left:0px;
				display:block !important;
				background: url(images/scrol-prev.png) no-repeat;
			}
				/* #next.disabled,
				#prev.disabled {
					opacity: 0.2;
				} */

/****************************************************************************
					Isotops ON Portfolio page 
****************************************************************************/
/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

/* Dropdown control */
.selectBox-dropdown {
	float:right;
	min-width: 130px;
	width: 100% !important;
	position: relative;
	border: solid 1px #dddcdc;
	line-height: 1.5;
	text-decoration: none;
	text-align: left;
	color: #000;
	outline: none;
	vertical-align: middle;
	background: url(images/footer-bg.png) repeat;
	border-radius: 4px;
	display: inline-block;
	cursor: default;
}

.selectBox-dropdown:focus,
.selectBox-dropdown:focus .selectBox-arrow {
	border-color: #dddcdc;
}

.selectBox-dropdown.selectBox-menuShowing {
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-bottomright: 0;
	-webkit-border-bottom-left-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.selectBox-dropdown .selectBox-label {
	padding: 2px 8px;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	color:#b2b2b2;
}

.selectBox-dropdown .selectBox-arrow {
	position: absolute;
	top: 0;
	right: 0;
	width: 23px;
	height: 100%;
	background:url(images/dropdown-arrow.png) 50% center no-repeat;
	
}


/* Dropdown menu */
.selectBox-dropdown-menu {
	position: absolute;
	z-index: 99999;
	max-height: 200px;
	min-height: 1em;
	border: solid 1px #BBB; /* should be the same border width as .selectBox-dropdown */
	background: url(images/footer-bg.png) repeat;
	color:#b2b2b2;
	-moz-box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	overflow: auto;
}


/* Inline control */
.selectBox-inline {
	min-width: 150px;
	outline: none;
	border: solid 1px #BBB;
	background: #FFF;
	display: inline-block;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	overflow: auto;
}

.selectBox-inline:focus {
	border-color: #666;
}


/* Options */
.selectBox-options,
.selectBox-options LI,
.selectBox-options LI A {
	list-style: none;
	display: block;
	cursor: default;
	padding: 0;
	margin: 0;
}

.selectBox-options LI A {
	line-height: 1.5;
	padding: 0 .5em;
	white-space: nowrap;
	overflow: hidden;
	color:#b2b2b2;
	background: 6px center no-repeat;
}

.selectBox-options LI.selectBox-hover A {
	background-color: #000;
}

.selectBox-options LI.selectBox-disabled A {
	color: #888;
	background-color: transparent;
}

.selectBox-options LI.selectBox-selected A {
	background-color: #000;
}

.selectBox-options .selectBox-optgroup {
	color:#b2b2b2;
	background: #EEE;
	font-weight: bold;
	line-height: 1.5;
	padding: 0 .3em;
	white-space: nowrap;
}


/* Disabled state */
.selectBox.selectBox-disabled {
	color: #888 !important;
}

.selectBox-dropdown.selectBox-disabled .selectBox-arrow {
	opacity: .5;
	filter: alpha(opacity=50);
	border-color: #666;
}

.selectBox-inline.selectBox-disabled {
	color: #888 !important;
}

.selectBox-inline.selectBox-disabled .selectBox-options A {
	background-color: transparent !important;
}

