@charset "utf-8";
/* CSS Document */

/***** Import Reset File *****/

@import url("reset.css");

 
/***** General *****/

html, body {margin:0px; padding:0px;font-family: Trebuchet MS,Arial,Helvetica,sans-serif; color:#394c5e; text-align:left; height: 100%; background:#e5e9ea /* url(../images/bg.png); */}
.wrappage { width:100%; height: 100%;margin:0 auto; padding:0; position:relative;}
.container{width:830px; margin:-225px auto auto -415px; position:fixed; top:50%; left:50%;}
.left { float:left;}
.right {float:right;}
.center{ text-align:center;}
.divider{ width:100%; min-height:1px; margin:0; background: url(../images/divider.png) 170px 70% no-repeat; display:inline-block;}
.divider-s{ width:100%; min-height:1px; margin:0; background: url(../images/divider.png) 130px 60% no-repeat; display:inline-block;}
.no-float{ float:none;}
a, img , button { outline: none; }
ul{overflow:hidden;}
/* http://sonspring.com/journal/clearing-floats */
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {clear: both;content: ' ';display: block;font-size: 0;line-height: 0;visibility: hidden;width: 0;height: 0;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
border: 0;
}
button:focus,
input[type="reset"]:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
border: 0;
}

/***** Typography & Element *****/

h1 {font-size:36px;}
h2 {font-size:30px;}
h3 {font-size:24px;}
h4 {font-size:18px;}
h5 {font-size:16px;}
h6 {font-size:14px;}
h1, h2, h3, h4, h5, h6 {margin:0; padding:0;}
p {font-size:15px; height:auto;line-height: 1.4em; padding:0; margin:0;}
.image-left {float: left;margin: 5px 20px 10px 0;}
.image-right {float: right;margin: 5px  0 10px 20px;}

/***** Header *****/

header {width:830px; height:60px; margin:0 auto 30px 0;}
header h1{ color:#657089; font-size:33px; text-shadow:#b0b2b1 2px 2px 0; margin:0;font-family: 'QlassikBoldRegular';}
header h1 span{ color:#ffffff;font-family: 'QlassikBoldRegular';}
header h5{ color:#657089;margin:0;text-shadow:#ffffff 2px 2px 0;font-family: 'QlassikBoldRegular';}
a.vcard{ width:48px; height:48px; margin:0; padding:0; background:url(../images/vcard.png) 0 0 no-repeat; display:block;}
a.vcard:hover{ background-position:0 -48px;}

/***** Section *****/

section {width:790px; height:350px; margin:0 auto; padding:20px 20px 34px 20px; background: url(../images/bg-section.png);border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; position:relative;}
section#about ,section#folio ,section#solutions , section#contact{ display:none;}
section#about a{ color:#d15600;}
section#solutions a{ color:#73880a;}
section#folio a{ color:#3f4c6b;}
section#contact a{ color:#d01f3c;}
section.menu{width:830px; height:230px; margin:0 auto; padding:0; background:none;}
a.close{ width:32px; height:64px; position:absolute; top:16px; right:-32px; z-index:999; display:block; background:url(../images/bg-close.png) right top no-repeat;}

/***** Menu  *****/

.menu-cont{ width:830px; height:230px; position:relative; overflow: hidden;}
.menu-cont a{ width:230px; height:140px; padding:90px 0 0 0; position:absolute; top:0; left:0; z-index:4;  font-weight:normal; font-size:32px; color:#efeff1; text-align:center;text-shadow:#657089 1px 1px 0;}
.menu-cont a span{width:230px; height:230px;position:absolute; top:0; left:0; z-index:5; display:block;}
*:first-child+html .menu-cont a span{  left:-58px;  }
.menu-cont a.about{ left:0; z-index:4; background:url(../images/a-orange.png) 0 0 no-repeat;}
.menu-cont a.resume{ left:200px; z-index:3;background: url(../images/a-olive.png) 0 0 no-repeat ;}
.menu-cont a.portfolio{ left:400px; z-index:2; background: url(../images/a-blue.png) 0 0 no-repeat ;}
.menu-cont a.contact{ left:600px; z-index:1;background: url(../images/a-crimson.png) 0 0 no-repeat ;}
.menu-cont a:hover{ z-index:100;}

/***** Section page*****/

.block{width:760px; height:350px; padding:0 20px 0 10px; margin:0 auto; overflow: auto;}
.block-12{width:362px; margin:0 30px 0 0;}
.block-12.last{ margin:0;}
.block h1{text-shadow:#d1d1d1 1px 1px 0; margin:0 0 20px 0; line-height:35px; text-transform: capitalize;}
.block h1.about{ color:#d15600;}
.block h1.resume{ color:#73880a;}
.block h1.portfolio{ color:#3f4c6b;}

.sectionCaption{ width:742px;  text-transform: capitalize;    font-size: 26px; padding: 0 10px;   font-weight: normal; }
.portfolio.divider{  background-position: 152px 76%;  color:#73880a;}
.about.divider{ background-position: 91px 76%; color:#d15600;}
.resume.divider{background-position: 125px 76%; color:#3f4c6b;}
.contact.divider{ background-position: 128px 76%; color:#d01f3c;}
.block h1.contact{ color:#d01f3c;}
.block h3{text-shadow:#d1d1d1 1px 1px 0; margin:0 0 10px 0;color:#394c5e;/* font-family: 'YanoneKaffeesatzLight';  */font-weight:normal;}
.block p{ margin:0 0 15px 0;/* font-family: 'YanoneKaffeesatzLight';  */}
.jspVerticalBar{width: 10px;background: none;}
.jspTrack{width: 1px; background:#e5e9ea;}
.jspDrag{width: 10px; background:#e5e9ea;left:-4px;border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px;}

/***** About *****/

ul.info{ width:362px; margin:5px 0 0 0;}
ul.info li{font-size:15px; margin:0 0 7px 0; line-height:15px;font-family: 'YanoneKaffeesatzLight';}
ul.info li.where{font-size:15px; width:247px; padding:0; margin:0 0 8px 0;}
ul.info li.where span{color:#d15600; text-shadow:#ffffff 1px 1px 0;}
ul.info li.where.progress{width:100px; padding:0; margin:0 0 3px 0;}
ul.info li.where.progress span{font-size:13px; display:block;margin:0; text-align: center; border:1px #d9dce1 solid; padding:1px 0;font-family: 'QlassikBoldRegular';border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}

/***** Resume *****/

ul.info li.check{ padding:0 0 0 25px; width:337px; background:transparent url(../images/check.png) no-repeat 0 1px; }
ul.info li.check span{color:#73880a; text-shadow:#ffffff 1px 1px 0;}
ul.info li.skills{font-size:15px; width:182px; padding:0; margin:0 0 7px 0;}
ul.info li.skills span{color:#73880a; text-shadow:#ffffff 1px 1px 0;}
ul.info li.skills.progress{width:165px; padding:0; margin:0 0 7px 0;}
ul.info li.skills.progress span{ height:15px; display:block; background: url(../images/skills.png) repeat-x; padding:0; margin:0;}
ul.info li.skills.progress span.p-100{ width:165px;}/*Progress stars - max width 165px */
ul.info li.skills.progress span.p-70{width:135px;}/*Progress stars - plus or minus 15px */
ul.info li.skills.progress span.p-50{width:105px;}
ul.info li.skills.progress span.p-30{width:75px;}

/***** Portfolio *****/

ul.portfolio{ width:755px; margin:10px 0 20px 0; padding:0;}
ul.portfolio li{  width:249px; height:150px;   margin:0 3px 20px 0; float:left;}
ul.portfolio li a{  width:249px; height:150px;   padding:0;display:block; position:relative; overflow:hidden;}
ul.portfolio li a span{ width:229px; padding:10px; background: url(../images/tr-png.png); font-size:14px; color:#f8f8f8; position: absolute; bottom:0; left:0; line-height:1.2em;/* font-family: 'YanoneKaffeesatzLight'; */}
ul.portfolio li.last { margin-right:0;}

.folioLi{width:756px; height:326px;}
.folioLi a{width:756px; height:326px;}
.folioLi span{ font-size: 26px !important;}

/***** Contact Form *****/

#style-form{ margin:0; padding:0; position:relative;}	
.wrapper-block label{ padding:0; display:block;text-align:left; width:70px; float:left; font-size:15px; /* font-family: 'YanoneKaffeesatzLight';  */color:#d01f3c;}
.small-label{ display:block; font-size:11px; font-weight:normal; text-align:left; width:70px; line-height:10px;color:#394c5e;}
.wrapper-block [type="text"]{ font-size:12px; padding:8px 4px; border:solid 1px #d9dce1; width:272px; margin:2px 0 20px 10px;border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; }
.wrapper-block textarea{ padding:8px 4px; border:solid 1px #d9dce1; width:272px; margin:2px 0 20px 10px; font-size:12px; overflow:hidden;border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}
input:focus, textarea:focus {-moz-box-shadow:0px 0px 5px #cadce4; -webkit-box-shadow:0px 0px 5px #cadce4; box-shadow:0px 0px 5px #cadce4;}
a.btn-form, input.btn-form{ width:136px; margin:0 0 5px 80px; padding:6px 20px 6px 20px; display:inline-block; font-size:14px; color:#fff; border:1px solid #657089; background:#657089; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; cursor:pointer;}
#form .error-input {border-color: #d01f3c;}
.sending{margin:0; padding:3px;font-size:12px; display:none; position:absolute; bottom:30px; right:10px;}
.mess {display: none; padding:40px 0 40px 0;}
.mess h5{ font-weight:400; padding:10px;}

/***** Contact info*****/

ul.contact{ margin:0;}
ul.contact li{ font-size: 16px; margin:0 0 5px 0; padding:0;  line-height:19px;}
ul.contact li span{ font-size:16px;}
ul.contact li span a{color:#657089;font-weight: normal;}
ul.contact li a.vcard{ width:200px; height:36px; padding:12px 0 0 57px; margin:0 0 13px 0; background:url(../images/vcard.png) left top no-repeat;}
ul.contact li a.vcard:hover{ background-position:0 -48px;}

/***** Footer *****/

footer{width:830px; height:50px; margin:40px auto 0 auto; padding:10px 0 0 0; background:url(../images/footer-bg.png) top center no-repeat;}
.copyR{margin-left: 127px;height:44px; padding:5px 0 0 20px;   font-size:12px; line-height:16px;color:#657089; overflow:hidden;}
.tweets a{color:#657089; font-style:italic; font-weight:bold;}
/***** Social link*****/

ul.socicon {    margin: 0 140px 0 0;}
ul.socicon li{ display:block; padding:0; margin:0 5px 0 0; float:left;}
ul.socicon li a{ width:32px; height:32px; display:block; padding:0; margin:0;}
ul.socicon li a.dribbble { background:url(../images/dribbble.png) 0 0 no-repeat;}
ul.socicon li a.facebook { background:url(../images/facebook.png) 0 0 no-repeat;}
ul.socicon li a.twitter { background:url(../images/twitter.png) 0 0 no-repeat;}
ul.socicon li a.flickr { background:url(../images/flickr.png) 0 0 no-repeat;}
ul.socicon li a.linkedin { background:url(../images/linkedin.png) 0 0 no-repeat;}
ul.socicon li a.vimeo{ background:url(../images/vimeo.png) 0 0 no-repeat;}
ul.socicon li a.google{ background:url(../images/google.png) 0 0 no-repeat;}
ul.socicon li a:hover { background-position:0 -32px;}
ul.socicon li.last{ margin-right:0;}

/***** Tipsy plugin *****/

.tipsy { padding: 5px; background-repeat: no-repeat;opacity: 0.8; filter: alpha(opacity=80);  background-image: url(../images/tipsy.gif);}
.tipsy-inner { padding: 5px; background-color: #3f4c6b; font-size: 13px; color: #f8f8f8; max-width: 170px; text-align: center; line-height:1.3em;}
.tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px;border-radius: 3px; }
.tipsy-north { background-position: top center; }
.tipsy-south { background-position: bottom center; }
.tipsy-east { background-position: right center; }
.tipsy-west { background-position: left center; }



#about .block p:first-child{margin-top:30px}

.solTabs{}
.resumeUlHolder {z-index: 1000;}
.resumeUlHolder ul{ list-style: disc outside none!important;padding:0 20px 0 0; margin-top:30px; border-right:1px solid #b3b3b2;    float: left;}
.resumeUlHolder ul li{ list-style: disc outside none!important; background: url("../images/listIm2.png") no-repeat scroll 0 3px transparent;    padding: 3px 0 0 28px; cursor:pointer;}
.resumeUlHolder ul li:hover{ color:#ff8400;}
.resumeUlHolder ul li.active{ color:#587bbc; font-weight:bold}

.solCont{ float: left;    width: 448px;margin:30px 20px 0; float: right; }
.solCont .solContItem{ display:none }
.solCont .solContItem:first-child{ display:block }



.resumeUlHolder{position:relative}
.resumeUlHolder ul{position:absolute}

.block-12 {width: 420px;}
.block-12.last {width:300px;}
.block-12 input.btn-form {margin: 0 0 5px 133px; margin-top /*\**/: 25px\9}
.wrapper-block label{width: 122px; font-size: 14px;   margin-top: 12px;}

.theme-default #nivo {height: 326px;}

section#folio, #folio .block{height:500px}

ul.portfolio li.size50, ul.portfolio li.size50 a{width:374px;height:258px}
ul.portfolio li.size50 a span {width:348px;}

#about ul, #solutions .solContItem ul{ list-style: disc outside none;    }
#about ul li, #solutions  .solContItem ul li{  float: none;    list-style: disc outside none;    margin-left: 18px;    padding-left: 10px;margin-bottom: 10px;}


/* 
Recaptcha Style Captcha 
=======================
 re-Captcha Style Captcha with php and jQuery 
 
 Created By: Zeeshan Rasool 
 URL : http://www.99Points.info 
 
 Get JQuery, PHP, AJAX, Codeigniter and MYSQL Tutorials and Demos on Blog
 */
 
#captcha-wrap{
	border:solid #870500 1px;
	width:270px;
	-webkit-border-radius: 10px;
	float:left;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background:#870500;
	text-align:left;
	padding:3px;
	margin-top:3px;
	height:107px;
	margin-left:133px;
}
#captcha-wrap .captcha-box{
	-webkit-border-radius: 7px;
	background:#fff;
	-moz-border-radius: 7px;
	border-radius: 7px;
	text-align:center;
	border:solid #fff 1px;
}
#captcha-wrap .text-box{
	-webkit-border-radius: 7px;
	background:#ffdc73;
	-moz-border-radius: 7px;
	width:140px;
	height:43px;
	float:left;
	margin:4px;
	border-radius: 7px;
	text-align:center;
	border:solid #ffdc73 1px;
}

#captcha-wrap .text-box input{ width:120px;}
#captcha-wrap .text-box label{
	 color:#000000;
	 font-family: helvetica,sans-serif;
	 font-size:12px;	
	 width:150px;
	 padding-top:3px; 
	 padding-bottom:3px; 
}
#captcha-wrap .captcha-action{
	float:right; width:117px; 
	background:url(../images/logos.jpg) top right no-repeat; 
	height:44px; margin-top:3px;
}
#captcha-wrap  img#captcha-refresh{
	margin-top:9px;
	border:solid #333333 1px;
	margin-right:6px;
	cursor:pointer;
}

.captchaImg{margin:0px 0 0 10px;float: left;  }
.capthaWr{}
.capthaWr input[type="text"]{  float: left;    width: 182px;}
.refreshCaptha{float: left;margin:10px 0 0 10px;cursor:pointer}



#folioWr{position:absolute; width: 1900px!important; height:835px !important;  top:-213px; left: -467px;}

section#folio .block{display:none}


.folioIsCome.container{margin:0 auto; position:relative; left:0; width:100%}

.imageflow .navigation {    margin-top: 81px; margin-left: -74px;}
.imageflow .caption { position: absolute;left: 50%;width: 1px !important;left: 50%;}


#folioDescr{display:none}
.caption{  padding-top: 25px!important}
.captionToInsert{    margin-left: -468px;    text-align: left;    width: 803px;}
.captionToInsert h2{color: gray;    font-size: 19px;}
.captionToInsert h3{   line-height: 17px;}
.captionToInsert h3 a{   line-height: 17px; font-size: 17px;    font-weight: normal;    text-decoration: underline !important;}
.captionToInsert h3 a:hover{  text-decoration: none !important;}
.captionToInsert p{  font-weight: normal;    margin-top: 5px;    text-align: left;}

section#folio {    height:567px;}


body.meetFolio{height:600px!important; overflow-x: hidden;max-width:100%}
.container.meetFolio{position:absolute!important}
.wrappage {}
*:first-child+html .wrappage.meetFolio{overflow:hidden;; height:900px}


.folioHolder{display:none}


.socialBig{margin-top: 27px;}
.socialBig a{margin-left:4px;}
.socialBig a:first-child{margin-left:0px;}
.socialBig a img{}


.order_Bt{background: url("../images/order_Bt.png") no-repeat scroll 0 0px transparent;     float: right;    height: 36px;    margin-bottom: 10px;    width: 106px;}
.order_Bt span{   color: white;    display: block;    margin: 6px 0 0 21px;}
.order_Bt span a{   color: white!important;    display: block;  text-decoration:none}
.order_Bt span a:hover{  text-decoration:underline!important}
*:first-child+html .contactsForm{/*  width:400px; float:left */}


.left img{  position: relative;    z-index: 1000;}