html, body { font-family:open_sansregular, Arial, Helvetica, sans-serif; font-size:14px; color:#464646; margin:0; padding:0; }
@font-face{font-family: 'open_sansregular'; src: url('fonts/opensans-regular-webfont.eot');src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/opensans-regular-webfont.woff') format('woff'),url('fonts/opensans-regular-webfont.ttf') format('truetype'),url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;font-style: normal;}
@font-face {font-family: 'Rockwell';src: url('fonts/rock.eot');src: url('fonts/rock.eot?#iefix') format('embedded-opentype'),url('fonts/rock.woff') format('woff'),url('fonts/rock.ttf') format('truetype'),url('fonts/rock.svg#rock') format('svg');font-weight: normal;font-style: normal;}
@font-face {font-family: 'AspireDemiBold';src: url('fonts/aspire-demibold.eot');src: url('fonts/aspire-demibold.eot?#iefix') format('embedded-opentype'),url('fonts/aspire-demibold.woff') format('woff'),url('fonts/aspire-demibold.ttf') format('truetype'), url('fonts/aspire-demibold.svg#aspire-demibold') format('svg');font-weight: normal;font-style: normal;}
html { overflow-y: scroll; }
input, select { vertical-align:middle; }
textarea { resize:vertical; overflow-y:auto; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
.ie7 img { -ms-interpolation-mode: bicubic; }
::selection, ::-moz-selection {background: #333638; color:#fff; text-shadow: none;}
body, select, input, textarea {font-family:open_sansregular, Arial, Helvetica, sans-serif; font-size:14px; line-height:180%; color:#1f1f1f; }
select, input, textarea { font-family:open_sansregular, Arial, Helvetica, sans-serif;  line-height:180%; }
#wrapper{ margin:0 auto;}
.sprite{background: url(../images/sprite.png) no-repeat}
.cls{clear:both}
a,img{ border:none; outline:none}
img{ max-width:100%}
header{ position:fixed; top:0; z-index:99; width:100%; background:#fff; box-shadow: 0 1px 3px 0 #eee; -moz-box-shadow: 0 1px 2px 0 #eee; -webkit-box-shadow: 0 1px 2px 0 #eee;}
.logo{ float:left; margin-top:5px}
nav{ float:right;}
.top_nav{ list-style:none; margin:20px 0 0 0; float:right}
.top_nav li{ float:left; padding:5px 15px; font-size:14px;}
.top_nav li a{ color:#333; text-decoration:none;  padding:5px 10px}
.top_nav li a.active, .top_nav li a:hover { background:#eee; color:#333;}
.top_email{ float:right; width:180px; background:url(../images/seperator.gif) top left no-repeat; height:65px; margin-top:10px; padding:5px 0 0 20px; font-size:11px;}
.top_email span{color:#239fdb; line-height:20px;}
#main{ padding-top:0px}
.navbar-header{ float:none}
.text-center{ text-align:center}
.margin-top{ margin-top:10px;}
.margin-bottom{ margin-bottom:10px;}
.big-margin-top{ margin-top:20px;}
.big-margin-bottom{ margin-bottom:20px;}
.header_cont{ margin:10px 0 0px 0; padding:0; /*background:#c56f04; background-image: linear-gradient(to right, #c56f04 , #895719);*/}
.header_content{ text-align:center; color:#fff; font-size:18px; padding:80px 40px 0px;}
.header_content h1{ font-size:64px; padding:10px 0; color:#fff; margin:10px 0 20px; font-weight:normal; font-family:"Roboto", sans-serif;}
.header_content h1 span{ font-weight:bold}
.header_content p{ color:#fff; line-height:32px; margin-bottom:40px;}
.know-more-btn{ background:#fff; color:#171818; display:inline-block; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; font-size:14px; font-weight:bold; text-transform:uppercase; text-decoration:none; padding:10px 20px; white-space:nowrap}
.know-more-btn:hover { text-decoration:none; color:#000}
.webdesign,.socialmedia,.mobileapplication{ font-size:20px;padding:20px 0 10px}
.webdesign{ color:#608a00;}
.mypic-circle{ text-align:center}
.mypic-circle img{border-radius:50%; border:1px solid #eee;}
.socialmedia{color:#e50302;}
.mobileapplication{color:#464646;}
.column_left p{ margin:10px 0; line-height:22px}
.design_process{ margin:0px 0; background:url(../images/design_processbg.gif) top repeat-x; height:374px;}
.design_process_cont{ width:1200px; margin:0 auto; padding:20px 0}
.design_process_cont h2{ font-size:18px; padding-bottom:10px; padding-top:28px}
.aboutme{color:#fff}
.work_process {background: url(../images/workflowbg.png) no-repeat scroll 0 -30px transparent; height: 230px; margin: 0px auto 0; margin-top: 39px\9; /* IE 8 and below */ position: relative;width: 960px;}
.ie7 .work_process {margin-top: 2px;}
.ie8 .work_process, .ie9 #workplanning_step {margin-top: 16px;}
.work_process h4 {position: absolute;text-indent: -9999px;}
.idea {background-position: -42px -901px;height: 117px;left: 5px;top: 0px;width: 93px;}
.idea:hover {background-position: -42px -908px;}
.planning {background-position:-244px -901px;height: 129px; left: 166px;top: 0px;width: 107px;}
.planning:hover {background-position: -244px -908px;}
.layout {background-position: -37px -744px; height: 121px;left: 329px; top: 0px; width: 130px;}
.layout:hover {background-position: -37px -751px ;}
.development {background-position: -248px -753px;height: 103px;left: 521px;top: 10px; width: 108px;}
.development:hover {background-position: -248px -760px ;}
.completion {background-position:-244px -595px; height: 94px;left: 690px;top: 14px;width: 127px;}
.completion:hover {background-position:-244px -602px;}
.controlling {background-position: -37px -584px;height: 115px;left: 868px;top: 6px;width: 91px;}
.controlling:hover {background-position: -37px -593px ;}
.product-device {position: absolute; right: 10%;bottom: -30%;width: 300px;height: 540px; background-color: #333; border-radius: 21px;transform: rotate(30deg);}
.product-device::before {position: absolute;top: 10%; right: 10px; bottom: 10%; left: 10px; content: "";border-radius: 5px;}
.product-device-1{background:url(../images/mobile-app1.jpg) no-repeat;}
.product-device-2 {top: -25%; right: auto;  bottom: 0;  left: 5%;  background:url(../images/mobile-app2.jpg) no-repeat;}
.flex-equal > * {flex: 1;}
.workImg{width: 100%; border-radius: 21px 21px 0 0;}
.workImg img{ border-radius: 21px 21px 0 0;}
.lead{font-size:1.10rem}
.skills .py-5{ border-bottom:1px solid #eee;}
.icon-square{padding:10px; border-radius:5px; background:#fff}
.icon-square img{ width:40px}
@media (min-width: 768px) {
.flex-md-equal > * {flex: 1;}
}
.slider {float: left;height: 275px;margin-top: 30px;}
.slider .viewport {float: left;height: 275px;overflow: hidden;position: relative; width: 960px;}
.slider .buttons {display: block; height: 61px;margin-top: 75px;opacity: 1;position: absolute; text-indent: -9999px;width: 61px;}
.slider .buttons:hover {opacity: 1;}
.refList {float: left;position: absolute; width: 960px;}
.refList li {float: left; margin-right: 21px;position: relative;}
.refOverlay {background: none repeat scroll 0 0 transparent; height: 210px;left: 0;position: absolute; top: 0; width: 306px;}
a:hover {opacity:0.9;}
li.ProContainer {display: block; width: 306px;}
.Projects_brief {margin-top: 3px; }
.Projects_brief ul{padding:0}
.Projects_brief li {color: #656E72;float: left;line-height:20px;margin: 0 15px 0 0 !important; text-decoration: none;}
.Projects_brief span {background: url(../images/sprite.png) no-repeat scroll -82px -87px transparent;float: left; height: 15px; width: 14px;}

.contact {background:#323537;border-bottom: 1px solid #383B3D;border-top: 1px solid black; color: #C3CED4; padding: 20px 0 0; position: relative; text-shadow: 0 1px 1px #000000;}
.contact form:after { content:' '; position:absolute; height:172px; width:357px;  top: -63px; right: 0; display:block; }
.contact a { color:#c3ced4; text-decoration:none; border-bottom:1px solid #4f5456; }
.contact a:hover { color:#fff; }
.contact h3 { color:white; font-size:1.571em; font-weight:normal; margin-bottom:10px; }
.contact form { margin-top:20px; float:left; }
.ie7 .contact form { width:633px; }
.contact legend { display:none; }
.contact div { position:relative; /* important to display required infos */ }
.contact .error, .contact .requiredMark { color:#e24001; }
.contact label.error { position:absolute; top:0; right:0; text-align:right; }
.contact label, .contact input, .contact textarea { width:291px; float:left; }
.contact input[type=text], .contact input[type=email], .contact input[type="tel"], .contact textarea { color:#bdc8ce; border-radius:3px; border:1px solid #2b2e32; border-bottom:1px solid #4f5359; text-shadow:0 1px 0 rgba(0,0,0,0.6); padding:8px 5px 5px 10px; background: #3e4348; background: -moz-linear-gradient(top, #3e4348 0%, #43484e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e4348), color-stop(100%, #43484e)); background: -webkit-linear-gradient(top, #3e4348 0%, #43484e 100%); background: -o-linear-gradient(top, #3e4348 0%, #43484e 100%); background: -ms-linear-gradient(top, #3e4348 0%, #43484e 100%); background: linear-gradient(top, #3e4348 0%, #43484e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e4348', endColorstr='#43484e', GradientType=0 );
margin-bottom:20px; }
.ie7 .contact input[type=text], .ie7 .contact input[type=email], .ie7 .contact textarea, .ie8 .contact input[type=text], .ie8 .contact input[type=email], .ie8 .contact textarea, .ie9 .contact input[type=email], .ie9 .contact input[type=text], .ie9 .contact textarea { padding:11px 5px 11px 10px; }
.ie7 .contact label { margin-top:20px; }
.contact input[type=text]:focus, .contact input[type=email]:focus, .contact input[type=tel]:focus, .contact textarea:focus { background: #484d52; background: -moz-linear-gradient(top, #484d52 0%, #4c5156 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #484d52), color-stop(100%, #4c5156)); background: -webkit-linear-gradient(top, #484d52 0%, #4c5156 100%); background: -o-linear-gradient(top, #484d52 0%, #4c5156 100%); background: -ms-linear-gradient(top, #484d52 0%, #4c5156 100%); background: linear-gradient(top, #484d52 0%, #4c5156 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#484d52', endColorstr='#4c5156', GradientType=0 );
border-bottom:1px solid #575b61; color:white; }
.contact textarea { height:215px; }
.contact input[type=submit] { margin-top:0; width:auto; border:none; border-radius:2px; padding:3px 20px;}
.ie7 .contact input[type=submit] { margin-top:20px; }
.alignRight{ float:right !important; margin-right:18px;}
.contact .col2 {border-left: 1px solid #3E4348;margin-left: 64px;margin-top: 40px;padding-left: 64px;}
.contact div {position: relative;}
.clear:before, .clear:after, .Projects_brief ul:before, .Projects_brief ul:after { content: "\0020"; clear:both; display: block; height: 0; }
.clear { zoom: 1; }
.gapRight { margin-right:21px; }
.gapLeft { margin-left:21px; }
.col2, .col3, .col5, .col6{ float:left; }
.col2 { width:197px; }
.col3 { width:306px; }
.col5 { width:524px; }
.col6 { width:633px; }
.contact ul{ margin:0; padding:0; list-style:none}
.contact ul li {border-bottom: 1px solid #3E4348; padding: 8px 0 6px; line-height:20px;}
.contact ul li a {border-bottom: medium none !important;color: #C3CED4;display: block;height: 25px;padding: 4px 0 0 33px;text-decoration: none;}
.contact ul li a:hover {color: white;}
.contact ul li:last-child {border: medium none;}
.contact .facebook {background-position: -186px -398px;opacity: 0.8;}
.contact .googleplus {background-position: -186px -458px ;opacity: 0.8;}
.contact .twitter {background-position: -186px -520px ;opacity: 0.8;}
.contact .facebook:hover, .contact .googleplus:hover, .contact .twitter:hover {opacity: 1;}
footer {background: url(../images/footer_bbg.png) repeat scroll 0 0 #1D2023;border-top: 1px solid #111215;color: #535961;padding: 15px 0;height:50px;text-shadow: 0 1px 1px #000000;}
footer a {color: #535961;text-decoration: none;}
footer a:hover {color: #BDC8CE;}
footer .withSeperator { padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #282c30; }
.copyright{ text-align:center; color:#999}

/*portfolio */
#portfolio-content{ padding-top:0px;}
.ptab{ list-style:none; margin:20px 0 0 0; float:right; }
.ptab li{ display:inline-block; font-size:14px; margin-right:10px; }
.ptab li span{ color:#333; text-decoration:none; padding:8px 15px; cursor:pointer}
.ptab li.selected span{ background:#971f8e; color:#fff; border-radius:5px; -webkit-border-radius:5px; -webkit-border-radius:5px;text-shadow:0 -1px 1px rgba(0,0,0,0.7); cursor:pointer  }
.ptab li a:hover{ background:#971f8e; color:#fff; border-radius:5px; -webkit-border-radius:5px; -webkit-border-radius:5px;text-shadow:0 -1px 1px rgba(0,0,0,0.7);   }
.website_details{border-top:1px solid #ccc; margin:20px 0; padding:20px 0;}
.website_details h2{ background:url(../images/phbg.png) left no-repeat; padding-left:30px; margin:0; font-size:16px;}
.website_details p{padding:0px 0 0px 30px; line-height:20px;}
.website_details_left{ float:left; width:800px; padding-right:15px;}
.website_launch{float:left; width:750px; width:150px; padding:10px 0 0 20px;}
.pimg{ background:url(../images/portfolio/browser_header.png) top no-repeat; display:block !important; padding-top:35px; width:990px; margin:0 auto;}
.pimg img{ border:1px solid #e3e3e2;}
#siteHeader:after {background: url(../images/header-bg.png) no-repeat scroll center top transparent; bottom: 0; content: "";height: 252px; position: absolute; width: 100%; top:120px;}
.headerDescription {padding:20px 0 20px 0px; background:#0f71a0; margin-bottom:30px}
.headerDescription h2 {font-size: 42px;line-height:normal; margin:0 0 10px;}
.headerDescription span{font-size: 18px;font-weight: normal;}
.headerDescription.portfolio{ background:#fff; margin:50px 0}
.home #siteHeader {height: 415px;}
.home .headerDescription {width: 450px;}
.top_sect{ width:1200px; margin:0 auto}
.back-top{position: fixed;	bottom: 20px; right:20px; cursor:pointer }
.back-top span{ background-position:0 -18px; display:block; width:46px; height:56px;}
.back-top a:hover{background-position:-46 -18px; opacity:0.8;}
.logo-boxbg li{ float:left; width:297px; margin:35px 25px 0 0; background: url(../images/logo_boxbg.png) bottom center no-repeat; padding-bottom:5px; list-style:none}
.logo-boxbg li:first-child{ margin-left:25px;}
.logo-boxbg li:last-child{ margin-right:0;}
.logo-boxbg li img{ border:1px solid #d3d3d3}
.mobile-boxbg li{ float:left; width:292px; margin:35px 25px 0 0; list-style:none}
.mobile-boxbg li:first-child{ margin-left:25px;}
.mobile-boxbg li:last-child{ margin-right:0;}
.mobile-boxbg li img{ border:1px solid #fff}
.aboutme-content{ padding-top:0px;}
.aboutme-content h2, .aboutme-content h3, .aboutme-content h4{font-family: 'Rockwell';color:#525252;} 
.aboutme-content h2{ padding:25px 0px; font-size:60px; }
.aboutme-content h2 span{font-family: 'AspireDemiBold'; display:block; font-size:40px; padding:20px 5px}
.aboutme-content h3{padding:15px 0px; font-size:24px; text-align:center }
.aboutme-content p{ margin-bottom:20px; text-align:justify}
.skills{ margin:0; padding:0; list-style:none}
.skills li{ text-transform:uppercase;  color:#000; font-size:16px; margin:20px 0; padding:0; text-align:center;  width:24%; display:inline-block;}
.skill-label{margin-top:10px}
.out-of-ten{ font-size:12px; position:absolute; top:58%; width:100%; z-index:2; color:#999}
.experience{ margin:0 0 70px 0; padding:0; list-style:none}
.experience li{ border:1px solid #c9ff83; text-align: center; background:#fff; border-radius:20px; padding:10px 1% 20px; margin:1%; display:inline-block; width:28%; font-size:14px; position:relative}
.experience li:after{ content:"\f00c"; position:absolute; left:47%; width:25px; background:#c9ff83; line-height:25px;  bottom:-12px; height:25px; border-radius:70px; font-family:'FontAwesome'; color:#fff; font-size:12px}
.portfolio-thumbs{ margin:50px 0 0 40px}
.portfolio-thumbs ul li{ width:32%; position:relative; display:inline-block; padding-bottom:20px}
.portfolio-thumbs ul li a{ display:block}
.Projects_brief ul li{ list-style:none}
.navbar-toggle{ display:none; border:none}
.portfolio hgroup{ margin-bottom:30px}
@media (max-width:1024px)
{
.hide-for-mobile, .hideForMobile{ display:none;}
.showForMobile{ display:block}
.navbar-toggle .icon-bar {background-color: #563d7c;}
.navbar-header .navbar-toggle{ margin-top:15px; float:right; margin-right:20px; background:none}
.logo{ margin-top:0; margin-left:15px;}
#main{ padding-top:0px;}
.header_content h1{ font-size:36px;}
.headerDescription h2{ font-size:32px; margin-top:0;}
.header_content{ font-size:22px;}
.header_content p{ margin-bottom:20px;}
.know-more-btn{ padding:5px 20px; font-size:18px;}
.navbar-toggle{ display:block}
.navbar-toggle .fa-bars{ font-size:24px; line-height:30px;}
.navbar-toggle .icon-bar{ height:3px}
nav{ width:100%; position:relative; background:#eee}
nav:before{ content:""; position:absolute; top:-10px; right:25px; border-bottom:10px solid #eee; border-left:10px solid transparent; border-right:10px solid transparent;}
.top_nav, .top_nav li{ display:block; float:none; margin:0; padding:0;}
.top_nav li a{ display:block; border-bottom:1px solid #fff}
.top_nav li a.active{ color:#e50302}
.feat-spc{ margin-bottom:30px;}
.portfolio-thumbs, .portfolio-thumbs ul, .Projects_brief ul li{ margin:0; padding:0; list-style:none}
.portfolio-thumbs{ margin:20px 0}
li.ProContainer{ height:auto}
.portfolio-thumbs ul{ padding-left:0px;}
.experience li,.portfolio-thumbs ul li{ width:100%; margin:0 0 5%}
.portfolio-thumbs ul li{ padding:0}
.Projects_brief ul li{ width:44%}
.skill-label{ margin-bottom:20px}
.website_details_left{ width:auto}
.pimg{ background:none; width:auto; padding-top:0}
.ptab{ float:left; padding:0 0 0 30px;}
.ptab li{ margin-right:5px;}
.logo-boxbg, .mobile-boxbg{ padding:0;}
.logo-boxbg li:first-child, .mobile-boxbg li:first-child{ margin-left:0}
.logo-boxbg li, .mobile-boxbg li{ width:100%; background:none; margin:20px 0; text-align:center}
.product-device {position: relative; margin:20px auto; right:auto;bottom:0;width: 300px; height: 540px; background-color: #333; border-radius: 21px;transform: rotate(0deg);}
.product-device::before {position: relative;top:auto; right:auto; bottom:auto; left:auto; content: "";border-radius: 5px;}
.product-device-1{background:url(../images/mobile-app1.jpg) no-repeat;}
.product-device-2 {top:auto; right:auto; bottom:auto; left:auto;  background:url(../images/mobile-app2.jpg) no-repeat;}

}
@media (max-width:667px)
{
.workImg{height:196px}
}
@media (max-width:480px)
{
.Projects_brief ul li{ width:100%}
.workImg{height:186px}
.header_content p{ font-size:1.10rem; line-height:180%}
}