/* Fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800);
@import url(http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900);
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:200,300,400,600,700,900);

/* Fonts */

html { margin: 0; padding: 0; height:100%; min-height:100%;}
body{ margin:0; padding:0; font:Normal 13px/18px Open Sans; color:#151719; font-weight: 400; height:100%; min-height:100%; background:#fff;}

/*	--------------------------------------------------
Global Reset & Standards
-------------------------------------------------- */
div, p, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, select, nav, img {padding:0; margin:0;}
img{border:0;}
ol, ul { list-style: none; }

a {color:#e3121b; text-decoration:none;
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
-o-transition: background-color 1s;
-ms-transition: background-color 1s;
transition: background-color 1s;
}
a:hover {text-decoration:underline;
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
-o-transition: background-color 1s;
-ms-transition: background-color 1s;
transition: background-color 1s;
}


.left {float:left;}
.right {float:right;}

.aln-cntr, .aln-cntr2{text-align:center; margin:0 auto 20px; display:block;}

.clear {clear:both;font-size:0;line-height:0;}

.bordr-none{border:none!important;}


ul.bull{list-style-type:none; float:left; margin:0 0 15px 0; font-size:15px;}
ul.bull li{float:left; clear:both; background:url('../images/redbull.png') no-repeat 3px 6px; padding-left:25px; margin-bottom:20px; /*text-align:justify;*/}


ol{list-style-type:none; float:left; margin:0 0 15px 0;}
ol li{float:left; clear:both; background:url('../images/bull.png') no-repeat 3px 6px; padding-left:18px; margin-bottom:4px; text-align:justify;}


.txt2{font-size:16px; line-height:22px; margin-bottom:20px;}

.red{color:#d51616!important;}

.mrgn-top0{margin-top:0!important;}


/*	--------------------------------------------------
Global Reset & Standards
-------------------------------------------------- */

#outer-wrap-area{display:block; position:relative; min-height:100%; height:100%;}
.inner-wrap{margin:0 auto; width:1240px; position:relative;}

.header-icons-area{border-bottom:1px #eee solid; display:block; overflow:hidden; clear:both; padding:7px 0;}

ul.top-phone-no{float:left; font-size:12px; line-height:16px; margin:3px 0 0 7px;}
ul.top-phone-no li{float:left; color:#777777; background:transparent url('../images/phone-icon.png') no-repeat 0 3px; padding:0 10px 0 18px; margin-right:8px; border-right:1px #dedede solid;}
ul.top-phone-no li a{color:#777777;}
ul.top-phone-no li:nth-child(2){background-position:0 -21px; border-right:none;}
ul.top-phone-no li:nth-child(3){background-position:0 -42px;}


ul.headre-social-icons{float:right;}
ul.headre-social-icons li{float:left; width:24px; height:24px; padding:0 7px; border-right:1px #dedede solid;}
ul.headre-social-icons li:last-child{border:none;}
ul.headre-social-icons li a{text-indent:-9999px; background:transparent url('../images/24x24-icons.png') no-repeat 0 0; display:block; height:100%; filter: alpha(opacity=70); opacity: 0.7;}
ul.headre-social-icons li a:hover{filter: alpha(opacity=100); opacity: 1;}
ul.headre-social-icons li:nth-child(2) a{background-position:-24px 0;}
ul.headre-social-icons li:nth-child(3) a{background-position:-48px 0;}
ul.headre-social-icons li:nth-child(4) a{background-position:-72px 0;}
ul.headre-social-icons li:nth-child(5) a{background-position:-96px 0;}
ul.headre-social-icons li:nth-child(6) a{background-position:-120px 0;}


header{display:block; clear:both; width:100%; padding:0; float:left;}

.logo{float:left; width:168px; height:53px; margin:20px 0;}
.logo a{background:transparent url('../images/logo.png') no-repeat 0 0; width:100%; height:100%; text-indent:-9999px; display:block; overflow:hidden;}

.slide-area{display:block; overflow:hidden; clear:both; min-height:531px;}


h2.mid-haed{display:block; overflow:hidden; clear:both; text-align:center; font-family:'Titillium Web'; font-size:24px; line-height:30px; font-weight:700; color:#2192cc; text-transform:uppercase; margin:15px 0;}



.services-blue-area{display:block; overflow:hidden; clear:both; background:#2192cc url('../images/white-arrow.png') no-repeat center top; padding:15px 0; font-family:'Titillium Web'; font-weight:300; margin-bottom:25px;}

ul.index-services-list{margin: 0 auto; text-align:center;}
ul.index-services-list li{display:inline-block; text-align:left; width:16%; text-transform:uppercase; font-size:20px; line-height:24px; position:relative; padding:22px 0 22px 105px; margin:15px 0;}
ul.index-services-list li span{background:transparent url('../images/services-icons.png') no-repeat 0 0; width:89px; height:89px; margin-right:15px; position:absolute; top:0; left:0;
-webkit-transition: 0.6s; -webkit-transform-style: preserve-3d;
-moz-transition: 0.6s; -moz-transform-style: preserve-3d;
-o-transition: 0.6s; -o-transform-style: preserve-3d;
transition: 0.6s; transform-style: preserve-3d;
}
ul.index-services-list li:hover span{-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);transform: rotateY(-180deg);}
ul.index-services-list li a{color:#fff;}
ul.index-services-list li a:hover{text-decoration:none; color:#f3ea10;}
ul.index-services-list li span.serv2{background-position:0 -100px;}
ul.index-services-list li span.serv3{background-position:0 -200px;}
ul.index-services-list li span.serv4{background-position:0 -300px;}
ul.index-services-list li span.serv5{background-position:0 -400px;}
ul.index-services-list li span.serv6{background-position:0 -500px;}
ul.index-services-list li span.serv7{background-position:0 -600px;}
ul.index-services-list li span.serv8{background-position:0 -700px;}




.portfolio-head{float:left; font-family:'Titillium Web'; font-size:22px; font-weight:500; color:#898989; margin-bottom:15px;}
.portfolio-head strong{font-size:36px; color:#f62148; line-height:40px;}

.index-portfolio{display:block; overflow:hidden; clear:both; padding-top:15px;}
.index-portfolio ul{}
.index-portfolio ul li{float:left; width:283px; border:1px #e0e0e0 solid; margin:0 10px 40px;}
.index-portfolio ul li img{margin:0; padding:0; float:left; clear:both; width:100%}
.index-portfolio ul li div{display:block; overflow:hidden; padding:10px;}
.index-portfolio ul li div p{float:left; color:#a4a4a4; padding:5px 0;}
.index-portfolio ul li:hover div p{color:#000;}
.index-portfolio ul li div a{float:right; width:87px; height:28px; background:transparent url('../images/view-it.png') no-repeat 0 0; text-indent:-9999px; margin:0; padding:0;}

.portfolio-links{font-family:'Titillium Web'; float:right; width:60%; margin-top:10px;}
.portfolio-links ul{width:100%; float:right;}
.portfolio-links ul li{float:left; width:23%; margin-left:1%}
.portfolio-links ul li a{padding:5px 0; border:1px #e7e7e7 solid; text-transform:uppercase; color:#46494d;text-align:center; display:block; overflow:hidden;}
.portfolio-links ul li a:hover{color:#fff; text-decoration:none; background:#f62148; border:1px #f62148 solid;}


.more-bnt{display:block; overflow:hidden; text-align:center; /*border-top:1px #ccc dotted;*/ text-align:center; margin-bottom:10px; clear:both;}
.more-bnt a{
border:1px solid #f62148; padding:10px 40px; text-decoration:none; display:inline-block; /*text-shadow: -1px -1px 0 rgba(0,0,0,0.3);*/ font-size:20px; line-height:22px; color:#f62148; font-weight:600; text-transform:uppercase; text-transform:uppercase;
/*background-color: #7d7e7d;
background-image: -webkit-gradient(linear, left top, left bottom, from(#7d7e7d), to(#0e0e0e));
background-image: -webkit-linear-gradient(top, #7d7e7d, #0e0e0e);
background-image: -moz-linear-gradient(top, #7d7e7d, #0e0e0e);
background-image: -ms-linear-gradient(top, #7d7e7d, #0e0e0e);
background-image: -o-linear-gradient(top, #7d7e7d, #0e0e0e);
background-image: linear-gradient(to bottom, #7d7e7d, #0e0e0e);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#7d7e7d, endColorstr=#0e0e0e);*/
}

.more-bnt a:hover{
background:#f62148; color:#fff;
}



.purple-area{display:block; width:100%; background:#381643 url('../images/purple-area-bg.jpg') no-repeat center top; background-size:cover; color:#fff; padding:25px 0 0;  font-family:'Titillium Web'; margin-top:25px;}
.purple-area h3{display:block; overflow:hidden; text-align:center; font-size:30px; line-height:36px; color:#fff; font-weight:700; text-transform:uppercase; margin-bottom:10px;}
.purple-area p{font-size:20px; font-weight:300; line-height:30px; text-align:center; width:75%; margin:0 auto;}
a.purple-box-mid-link{clear:both; width:200px; border:1px #fff solid; margin:25px auto; display:block; padding:10px 0; text-align:center; font-size:20px; line-height:22px; color:#fff; font-weight:600; text-transform:uppercase;}
a:hover.purple-box-mid-link{text-decoration:none; color:#fff; background:#541b66;}



ul.yellow-icons-area{margin:0 auto 35px; text-align:center;}
ul.yellow-icons-area li{display:inline-block; text-align:left; font-size:34px; line-height:90px; position:relative; font-weight:200; margin:0 25px;}
ul.yellow-icons-area li strong{font-weight:600; color:#ffcd1f;}
ul.yellow-icons-area li span{float:left; width:94px; height:86px; background:transparent url('../images/yellow-icons.png') no-repeat 0 0; margin-right:15px;}
ul.yellow-icons-area li img{position:relative; top:35px; margin-top:-35px;}


.valuable-clients{display:block; overflow:hidden; clear:both; padding:10px 0 0; border-top:1px #7f528c solid; position:relative; bottom:-40px; margin-top:-40px;}
.valuable-clients h4{font-size:22px; line-height:30px; font-weight:400;}

.clients-logo-area{display:block; overflow:hidden; clear:both; background:#fff; padding:12px; margin-top:15px;}
/*.clients-logo-area div ul{text-align:center; margin:0 auto; padding:0;}
.clients-logo-area div ul li{margin:0 22px; padding:0; height:64px; cursor:pointer; float:left;}*/
.clients-logo-area img{ margin:0 22px;
grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: alpha(opacity=60); opacity: 0.6;
}

.clients-logo-area img:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: alpha(opacity=100); opacity: 1;
}















.footer-area{display:block; overflow:hidden; clear:both; background:#313439; padding:60px 0 15px;  font-family:'Titillium Web'; color:#fff;}

.footer-links{float:left; width:260px; margin-right:110px;}
.footer-links h5{font-size:18px; line-height:24px; font-weight:600; margin-bottom:10px; text-transform:uppercase;}
.footer-links ul{display:block; overflow:hidden; font-size:14px; text-transform:uppercase;}
.footer-links ul li{clear:both; border-bottom:1px #46494d solid;}
.footer-links ul li a{color:#d2d4d3; display:block; overflow:hidden; padding:7px; padding-left:28px; background:transparent url('../images/footer-link-arrow.png') no-repeat 7px center;}
.footer-links ul li a:hover{text-decoration:none; background-color:#25272b;}

.footer-contact-form-area{width:490px; margin-right:0;}
.footer-contact-form-area p{font-size:18px; font-weight:300; line-height:24px;}

form.footer-contact-form{display:block; overflow:hidden; padding:15px 0;}
form.footer-contact-form input[type="text"]{width:43.5%; border:none; background:#232529; padding:8px 10px; color:#fff; margin-right:2%; float:left; font-size:13px; margin-bottom:15px;}
form.footer-contact-form textarea{width:93%; border:none; background:#232529; padding:5px 10px; color:#fff; margin-right:2%; float:left; font-size:13px; height:80px;  font-family:'open sans';}
form.footer-contact-form input[type="submit"]{border:none; background:#f62148; padding:10px 20px; color:#fff; margin-top:15px; cursor:pointer; clear:both;}
form.footer-contact-form input[type="submit"]:hover{background:#02b0e8;}



.footer-end{display:block; overflow:hidden; clear:both; padding:15px 0; background:#27292d;}

ul.copyright-links{float:left;}
ul.copyright-links li{margin-right:10px; color:#fff; font-size:13px; float:left;}
ul.copyright-links li a{color:#d2d4d3;}







/* Inner page */

.inner-header-area{display:block; overflow:hidden; background:url('../images/inner-texture-bg.png') repeat-x 0 0; font-family:"Roboto", sans-serif; padding:30px 0; clear:both; text-transform:uppercase;}
.inner-header-area a{float:right; font-size:18px; padding:14px 20px; color:#fff;}
.inner-header-area a:hover{text-decoration:none;}
.redcolor-head{background-color:#f62148;}
.redcolor-head a{background:#f62148;}

.bluecolor-head{background-color:#196bb6;}
.bluecolor-head a{background:#196bb6;}

.orangecolor-head{background-color:#ff6900;}
.orangecolor-head a{background:#ff6900;}

.greencolor-head{background-color:#79bb17;}
.greencolor-head a{background:#79bb17;}

.violetcolor-head{background-color:#3c3586;}
.violetcolor-head a{background:#3c3586;}

.pinkcolor-head{background-color:#f91d83;}
.pinkcolor-head a{background:#f91d83;}



/* Outline Outward */
.outline-outward {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.outline-outward:before {
  content: '';
  position: absolute;
  border: #fff solid 1px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.outline-outward:hover:before, .outline-outward:focus:before, .outline-outward:active:before {
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  border: #fff solid 4px;
}


ul.page-path{float:left; font-size:24px; line-height:45px; color:#fff;}
ul.page-path li{float:left; margin-right:10px;}



.red-area h2, .blue-area h2, .orange-area h2, .green-area h2, .violet-area h2, .pink-area h2{font-size:24px; text-transform:uppercase; color:#000; line-height:35px; margin:40px 0; font-weight:normal; display:block; clear:both; padding-left:50px; background:transparent url('../images/header-arrow-red.png') no-repeat 0 0;}
.blue-area h2{background-image:url('../images/header-arrow-blue.png'); margin:40px 0 25px;}
.orange-area h2{background-image:url('../images/header-arrow-orange.png');}
.green-area h2{background-image:url('../images/header-arrow-green.png');}
.pink-area h2{background-image:url('../images/header-arrow-pink.png');}



.inner-content-area h3{font-size:20px; font-weight:600; margin:0 0 25px; clear:both;}
.inner-content-area p{font-size:15px; line-height:22px; clear:both; display:block; margin-bottom:24px; text-align:justify;}

.clr-red{color:#f62148;}
.line-header{display:block; overflow:hidden; line-height:62px; text-align:center; font-size:30px!important; font-weight:300!important; border-bottom:1px #e4e4e4 solid; border-top:1px #e4e4e4 solid;}

.inner-top-txt-63{width:63%;}
.inner-top-txt-30{width:30%; font-size:15px;}

.discount-area{display:block; overflow:hidden; clear:both; border:1px #000 solid; border-left:none; border-right:none; padding:7px 5px;}
.discount-area > div{float:left; font-size:14px; color:#6a6868; line-height:16px; text-transform:uppercase; font-weight:700;}

div.limited-discount{float:right; text-transform:uppercase; font-weight:700; color:#6a6868; background:transparent url('../images/discount-arrow.png') no-repeat 0 center; padding-left:55px;}
div.limited-discount span{font-size:32px; line-height:30px;}

.indigo-bunch{margin:0 auto; width:75%; margin-top:30px;}
.indigo-bunch h4{font-size:24px; line-height:26px; text-transform:uppercase; color:#000; margin-bottom:20px;}
.indigo-bunch li{color:#e3121b;}

ul.responsive-icons{text-align:center; margin:0 auto; clear:both;}
ul.responsive-icons li{display:inline-block; width:71px; height:110px; background:#1e8bc3 url('../images/responsive-icons.png') no-repeat center 0; padding:0 20px; margin:0 3px;}
ul.responsive-icons li:nth-child(2){background-color:#f86923; background-position:center -110px;}
ul.responsive-icons li:nth-child(3){background-color:#ff9f00; background-position:center -220px;}


.indigo-spunk-webdevelpment{display:block; overflow:hidden; background:#363636 url('../images/develop-bg.png') no-repeat 97% bottom; clear:both;}
.indigo-spunk-webdevelpment h5{display:block; margin:0 auto; background:transparent url('../images/gray-circle-bg.png') no-repeat 0 0; overflow:hidden; width:202px; height:88px; color:#fff; text-align:center; line-height:50px; font-weight:400; text-transform:uppercase; font-size:18px; margin-bottom:35px;}


ul.webdevelpment-spunk-box{text-align:center; margin:0 auto; display:inline-block;}
ul.webdevelpment-spunk-box > li{background:#fff; width:288px; min-height:312px; margin:30px 8px; position:relative; display:inline-block;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

ul.webdevelpment-spunk-box > li > h6{width:278px; height:67px; padding-top:55px; text-align:center; font-weight:600; text-transform:uppercase; font-size:16px; color:#fff; background:transparent url('../images/circle-head-bg.png') no-repeat 0 0; position:relative; top:-31px; margin-bottom:-20px;}
ul.webdevelpment-spunk-box > li > ol{display:block; overflow:hidden; text-align:left; width:100%;}
ul.webdevelpment-spunk-box > li > ol li{padding:8px 0; display:block; overflow:hidden; float:none; clear:both; border-bottom:1px #e6e7e7 solid; padding-left:50px; background:transparent url('../images/circle-arrow.png') no-repeat 25px 10px;}

ul.webdevelpment-spunk-box > li:nth-child(2) > h6{background-position:0 -160px;}
ul.webdevelpment-spunk-box > li:nth-child(3) > h6{background-position:0 -320px;}
ul.webdevelpment-spunk-box > li:nth-child(4) > h6{background-position:0 -480px;}
ul.webdevelpment-spunk-box > li:nth-child(5) > h6{background-position:0 -640px;}
ul.webdevelpment-spunk-box > li:nth-child(6) > h6{background-position:0 -800px;}
ul.webdevelpment-spunk-box > li:nth-child(7) > h6{background-position:0 -960px;}

ul.webdevelpment-spunk-box > li:nth-child(2) > ol li{background-position:25px -30px;}
ul.webdevelpment-spunk-box > li:nth-child(3) > ol li{background-position:25px -70px;}
ul.webdevelpment-spunk-box > li:nth-child(4) > ol li{background-position:25px -110px;}
ul.webdevelpment-spunk-box > li:nth-child(5) > ol li{background-position:25px -150px;}
ul.webdevelpment-spunk-box > li:nth-child(6) > ol li{background-position:25px -190px;}
ul.webdevelpment-spunk-box > li:nth-child(7) > ol li{background-position:25px -230px;}

.hide{visibility:hidden;}




ul.cone-box, ul.cone-box2{text-align:center; margin:0 auto; clear:both; margin:35px 0 0;}
ul.cone-box li, ul.cone-box2 li{display:inline-block; background:transparent url('../images/responsive-box.png') no-repeat 0 0; width:261px; height:336px; margin:0 10px 20px; overflow:hidden; color:#fff; font-size:18px; line-height:34px; font-weight:300;}
ul.cone-box li:nth-child(2), ul.cone-box2 li:nth-child(2){background-position:0 -336px;}
ul.cone-box li:nth-child(3), ul.cone-box2 li:nth-child(3){background-position:0 -672px;}
ul.cone-box li:nth-child(4), ul.cone-box2 li:nth-child(4){background-position:0 -1008px;}
ul.cone-box li h4, ul.cone-box2 li h4{margin-top:50px; padding-bottom:10px; margin-bottom:10px; border-bottom:1px #fff solid;}

.brands-cone{background:transparent url('../images/brand-cone-img.png') no-repeat 0 0!important;}

ul.cone-box2 li{background:transparent url('../images/portal-box.png') no-repeat 0 0;}
ul.cone-box2 li:nth-child(2){background-position:0 -336px;}
ul.cone-box2 li:nth-child(3){background-position:0 -672px;}



ul.cms-icons{display:block; overflow:hidden; clear:both; margin:30px 0; border:1px #efefef solid; border-bottom:none; border-right:none;}
ul.cms-icons li{width:50%; border-bottom:1px #efefef solid; float:left;}
ul.cms-icons li a{display:block; overflow:hidden; background:transparent url('../images/wordpress-icon.png') no-repeat center center; padding:10px; min-height:115px; border-right:1px #efefef solid;}
ul.cms-icons li:nth-child(2) a{background-image:url('../images/drupal-icon.png');}
ul.cms-icons li:nth-child(3) a{background-image:url('../images/joomla-icon.png');}
ul.cms-icons li:nth-child(4) a{background-image:url('../images/magento-icon.png');}
ul.cms-icons li.x-cart a{background-image:url('../images/x-cart-icon.png');}
ul.cms-icons li.zen-cart a{background-image:url('../images/zen-cart-icon.png');}
ul.cms-icons li.os a{background-image:url('../images/os-icon.png');}

ul.cms-icons li a:hover{background-color:#ececec;}


ul.color-box-spunk, ul.support-box-spunk{display:block; overflow:hidden; color:#fff; font-size:18px; line-height:34px; font-weight:300; margin:15px 0;}
ul.color-box-spunk li{width:23%; padding:0 1%; display:block; float:left; background:#e94c3d;}
ul.color-box-spunk li:nth-child(2){background:#fb8e30;}
ul.color-box-spunk li:nth-child(3){background:#3598dc;}
ul.color-box-spunk li:nth-child(4){background:#2fcc71;}
ul.color-box-spunk li.large{width:50%; padding:0!important;} ul.color-box-spunk li.large img{margin:0; padding:0; float:left; width:100%; /*height:100%; min-height:100%;*/}
ul.color-box-spunk li h4{margin-top:10px;}


ul.support-box-spunk li{width:50%; float:left; background:#a7a9ab url('../images/support-icon.png') no-repeat 30px 15px; min-height:140px;}
ul.support-box-spunk div{padding:15px 15px 15px 160px; display:block; overflow:hidden;}
ul.support-box-spunk li:nth-child(2){background-color:#c2b49b; background-position:30px -490px;}


ul.advantage-box{display:block; overflow:hidden; font-size:15px; line-height:34px; font-weight:400; margin:0 0 25px;}
ul.advantage-box li{width:43%; float:left; padding:1%; padding-left:35px; border:1px #d9d9d9 solid; border-left:3px #f68428 solid; margin:0.5%; background:transparent url('../images/orange-arrow.png') no-repeat 10px center;}


.php-spunk{display:block; overflow:hidden; background:#fbba07 url('../images/php-bg.jpg') no-repeat center bottom; background-size:100%; padding:25px 25px 280px; color:#fff;}
.php-spunk h4{margin-bottom:25px; font-size:30px; font-weight:300; line-height:32px;}
.php-spunk h5{margin-bottom:15px; font-size:18px;}
.php-spunk ul{margin-bottom:30px;}
.php-spunk ul li{clear:both; margin-bottom:15px; padding-left:20px; background:transparent url('../images/white-arrow2.png') no-repeat 0px 4px;}


.seo-down-box{display:block; overflow:hidden; clear:both; margin:20px 0; padding:15px; background:#6abbce; font-size:15px; border:1px #d7d7d7 solid; border-top:4px #f68428 solid; position:relative;

background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 75%, rgba(237,237,237,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(75%, rgba(255,255,255,1)), color-stop(100%, rgba(237,237,237,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 75%, rgba(237,237,237,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 75%, rgba(237,237,237,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 75%, rgba(237,237,237,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 75%, rgba(237,237,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );

}
.seo-down-box div{width:45%; float:left;}
.seo-down-box div h4{margin-bottom:25px; font-size:20px; line-height:24px; font-weight:400;}
.seo-down-box div ul li{clear:both; margin-bottom:10px; padding-left:20px; line-height:22px; background:transparent url('../images/orange-arrow2.png') no-repeat 0px 4px;}
.seo-down-box img{position:absolute; bottom:0; right:3%;}




.portfolio-bnt, .portfolio-bnt ul, .portfolio-page-box, .portfolio-page-box ul{display:block; overflow:hidden; clear:both;}
.portfolio-bnt ul li{width:23.5%; float:left; background:#ffb700; margin:.6%; color:#fff; text-align:center; font-family:'Titillium Web'; text-transform:uppercase; font-size:18px; line-height:60px;}
.portfolio-bnt ul li a span{background:transparent url('../images/portfolio-icons.png') no-repeat 0 -135px; width:54px; height:45px; margin:0 auto; display:block; overflow:hidden; margin-top:30px;
-webkit-transition: 0.6s; -webkit-transform-style: preserve-3d;
-moz-transition: 0.6s; -moz-transform-style: preserve-3d;
-o-transition: 0.6s; -o-transform-style: preserve-3d;
transition: 0.6s; transform-style: preserve-3d;
}
.portfolio-bnt ul li:hover a span{-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);transform: rotateY(-180deg);}
.portfolio-bnt ul li a{color:#fff; display:block; overflow:hidden; min-height:142px;}
.portfolio-bnt ul li a:hover{text-decoration:none;}
.portfolio-bnt ul li strong{font-weight:600;}
.portfolio-bnt ul li:nth-child(2){background:#01aca6;} .portfolio-bnt ul li:nth-child(2) span{background-position:0 -45px;}
.portfolio-bnt ul li:nth-child(3){background:#77b817;} .portfolio-bnt ul li:nth-child(3) span{background-position:0 0;}
.portfolio-bnt ul li:nth-child(4){background:#c06ac3;} .portfolio-bnt ul li:nth-child(4) span{background-position:0 -225px;}
.portfolio-bnt ul li:nth-child(5){background:#01aca6;} .portfolio-bnt ul li:nth-child(5) span{background-position:0 -180px;}
.portfolio-bnt ul li:nth-child(6){background:#c06ac3;} .portfolio-bnt ul li:nth-child(6) span{background-position:0 -225px;}

.portfolio-bnt ul li.active{
-moz-box-shadow:inset 0 -7px 0 0 rgba(0,0,0,0.3);
box-shadow:inset 0 -7px 0 0 rgba(0,0,0,0.3) ;
-webkit-box-shadow: inset 0 -7px 0 0 rgba(0,0,0,0.3;);
}


.portfolio-page-box{margin:25px 0;}
.portfolio-page-box ul li{width:31.8%; margin:1% .5%; float:left; border:1px #e0e0e0 solid;}
.portfolio-page-box ul li > div{display:block; clear:both; padding:15px 10px 10px; color:#000; overflow:hidden;}
.portfolio-page-box ul li h4{font-size:20px; line-height:24px; font-weight:300; display:block; margin-bottom:10px; float:left;}
.portfolio-page-box ul li p{font-size:13px; line-height:18px; font-weight:400; color:#3b3b3b; text-align:left; margin-bottom:15px; min-height:40px;}
.portfolio-page-box ul li > div > a{background:#ffb700; padding:3px 10px; color:#fff; font-size:11px; float:right;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.portfolio-page-box ul li > div > a:hover{text-decoration:none; background:#000;}

.portfolio-page-box ul li > div.img-box{padding:0; background:#e0e0e0; padding-top:20px;}
.img-box div{margin:0 auto; width:291px; height:240px; position:relative; top:40px; margin-top:-40px;}
.img-box div span{background:transparent url('../images/blank-monitor.png') no-repeat 0 0; width:291px; height:240px; display:block; position:absolute; top:0; left:0; z-index:2;}
.img-box div img{top:13px; left:12px; position:absolute; z-index:1;}



.portfolio-page-box ul li > a > img, .portfolio-page-box ul li > img{float:left; width:100%; border-bottom:1px #e0e0e0 solid;}

.portfolio-logo-box{margin:25px 0; display:block; overflow:hidden;}
.portfolio-logo-box ul li{width:23.5%; margin:0.5%; float:left; border:1px #e0e0e0 solid; text-align:center;}



.testimonials-top-box{width:100%; display:block; margin-bottom:35px; position:relative; color:#2b2b2b;}
.testimonials-top-box div{width:68%; float:left;}
.testimonials-top-box div strong{color:#ff6900; text-decoration:underline; font-weight:600;}
.testimonials-top-box div a{color:#ff6900;}
.testimonials-top-box img{position:absolute; right:0; bottom:0;}

.review-bnt-area{display:block; overflow:hidden; padding:25px 15px; width:80%!important; float:none!important; background:#f4f4f4; clear:both;}
.review-bnt-area span{float:left; font-size:15px; line-height:22px; font-style:italic; margin-right:75px;}

a.review-bnt{padding:5px 15px 5px 30px; border:5px #fff solid; background:transparent url('../images/review-icon.png') no-repeat 10px center;}
a:hover.review-bnt{text-decoration:none; border-color:#ccc; background-color:#fff;}



ul.testimonials-box{display:block; overflow:hidden; padding:15px 0 0; color:#2f2f2f;}
ul.testimonials-box li{float:left;width:29%; margin:1% 2%; float:left; margin-bottom:40px;}
ul.testimonials-box li p{font-size:14px; line-height:22px; padding-bottom:15px; margin-bottom:0;}
ul.testimonials-box li div{padding:10px 0 0; display:block; overflow:hidden; border-top:1px #e5e5e5 solid;}
ul.testimonials-box li div strong{color:#c75327; font-size:14px; line-height:24px;}


.footer-icons{display:block; overflow:hidden; border:1px #e9e9e9 solid; padding:5px 0; clear:both; margin:30px 0;}
.footer-icons ul{text-align:center; margin:0 auto;}
.footer-icons ul li{display:inline; width:87px; height:81px; margin:0 2px; padding:0; *display:inline; /*IE7*/ *zoom:1; /*IE7*/}




.contact-box-area{display:block; clear:both; margin-bottom:35px; position:relative; width:100%; float:left;}
.contact-box-area > img{position:absolute; bottom:0; right:0; z-index:100;}
.map-area{width:80%; border:7px #fff solid; background:#ccc; float:left; position:relative;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow:    0px 0px 3px 0px rgba(0, 0, 0, 0.3);
box-shadow:         0px 0px 3px 0px rgba(0, 0, 0, 0.3);
}

.map-area iframe{width:100%; height:500px;}
.phone-number-area{background:#fff; float:left; width:336px; padding:10px; position:absolute; z-index:101; top:160px; left:10px; font-size:16px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.3);
}
.phone-number-area h3{color:#f44f45; margin-bottom:20px;}
ul.contact-details{font-weight:300; color:#4c4c4c; margin-bottom:25px;}
ul.contact-details li{clear:both; display:block; overflow:hidden; background:transparent url('../images/contact-icons.png') no-repeat 0 2px; padding-left:45px; line-height:36px; margin-bottom:10px;}
ul.contact-details li:last-child{background-position:0 -58px;}
ul.contact-details li a{color:#4c4c4c;}

.phone-number-area h4{font-size:14px; font-weight:600; color:#bebebe; clear:both; margin-bottom:10px; text-transform:uppercase;}


ul.contact-social-icons{clear:both; margin-bottom:15px; display:block; overflow:hidden;}
ul.contact-social-icons li{float:left; margin-right:5px;}
ul.contact-social-icons li a{width:33px; height:33px; display:block; overflow:hidden; text-indent:-9999px; background:transparent url('../images/contact-social-icons.png') no-repeat 0 0;}
ul.contact-social-icons li:nth-child(2) a{background-position:-33px 0;}
ul.contact-social-icons li:nth-child(3) a{background-position:-66px 0;}
ul.contact-social-icons li:nth-child(4) a{background-position:-99px 0;}
ul.contact-social-icons li:nth-child(5) a{background-position:-132px 0;}
ul.contact-social-icons li:nth-child(6) a{background-position:-165px 0;}


.contact-form-area{display:block; overflow:hidden; clear:both; padding:0 15px; background:transparent url('../images/contact-form-bg.jpg') no-repeat 100% center;}
.contact-form-area div{width:50%;}
.contact-form-area div h3{font-size:20px; color:#6c6c6c; font-weight:400; margin-bottom:10px;}
.contact-form-area div p{color:#6c6c6c; font-size:13px; line-height:18px;}

.contact-form{display:block; overflow:hidden;}
.contact-form label:nth-of-type(odd){float:left;}
.contact-form label{width:48%; float:right; margin-bottom:12px; color:#484848; font-size:12px;}
.contact-form label input[type="text"], .contact-form label select, .contact-form label textarea{padding:5px 0; display:block; overflow:hidden; border:none; background:#f0f0f0; width:100%; margin-top:8px;}
.contact-form label textarea{height:65px;}
.contact-form label.big{width:100%!important; margin-bottom:15px;}
.contact-form input[type="submit"]{clear:both; float:left; padding:10px 30px; border:none; background:#77b718; color:#fff; font-size:16px; text-transform:uppercase; cursor:pointer;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.contact-form input[type="submit"]:hover{background:#424242;}




/*------------------------------------*\
    Media Queries
\*------------------------------------*/

@media all and (max-width: 1024px) {
.aln-cntr img{width:100%;}

.inner-wrap{margin:0 auto; width:auto; position:relative; display:block; padding:0 10px;}

ul.index-services-list li{width:14%; font-size:16px;}

.purple-area p{width:95%;}
ul.yellow-icons-area li{font-size:22px;}

.footer-links{margin-right:50px;}
.footer-contact-form-area{width:330px;}
.footer-contact-form-area p{font-size:15px; line-height:22px;}
form.footer-contact-form input[type="text"]{width:97%;}


.index-portfolio ul li{float:left; width:23%; border:1px #e0e0e0 solid; margin:0 .7% 20px;}


.inner-top-txt-63{width:60%;}
.inner-top-txt-30{width:35%;}


ul.advantage-box li{width:auto; display:block; overflow:hidden; float:none;}


.seo-down-box div{width:50%;}
.seo-down-box img{display:none;}


.testimonials-top-box div{width:62%; float:left;}

.portfolio-logo-box ul li img{width:100%; float:left;}

}

@media all and (max-width: 900px) {
ul.yellow-icons-area li{margin-bottom:25px; clear:both; width:90%; border-top:1px #7f528c dotted; padding-top:25px;}

.footer-links{margin-right:5%; width:45%;}
.footer-contact-form-area{width:97%; margin-top:25px;}
form.footer-contact-form input[type="text"]{width:45%; margin-right:1.5%}

.index-portfolio ul li{float:left; width:47%; border:1px #e0e0e0 solid; margin:0 1% 20px;}


.inner-top-txt-63{width:48%}
.inner-top-txt-30{width:46%;}


ul.color-box-spunk li{width:48%;}
ul.color-box-spunk li.large{width:100%;}


ul.support-box-spunk div{padding:140px 15px 15px 15px; display:block; overflow:hidden;}


.portfolio-page-box ul li{width:48.5%; margin:1% .5%; float:left; border:1px #e0e0e0 solid;}


.testimonials-top-box div, .review-bnt-area{width:auto!important; display:block; overflow:hidden; float:none!important;}
.testimonials-top-box img{display:none;}

ul.testimonials-box li{width:46%;}

.contact-box-area > img{display:none}
.map-area{width:auto; float:none; display:block; overflow:hidden;}

.portfolio-links{float:right; width:100%; margin-top:10px; clear:both;}
.portfolio-links ul li{float:left; width:48%; margin:0.5%;}

.portfolio-bnt ul li{width:49%; margin:.5%;}

}

@media all and (max-width: 640px) {
ul.index-services-list li{width:30%; font-size:20px;}
.inner-header-area a{float:left; clear:both; margin-top:10px;}


.inner-top-txt-63, .inner-top-txt-30{width:auto; display:block; overflow:hidden; margin-bottom:25px; float:none!important;}

ul.support-box-spunk li{width:100%;}
ul.support-box-spunk div{padding:15px 15px 15px 160px; display:block; overflow:hidden;}

.seo-down-box div{width:100%; margin-bottom:15px;}


.review-bnt-area span{display:block; overflow:hidden; float:none; margin:0; margin-bottom:25px;}


ul.testimonials-box li{width:auto; margin:0 0 40px; display:block; overflow:hidden; clear:both;}

.contact-form-area{background:none;}
.contact-form-area div{width:100%;}


.portfolio-logo-box ul li{width:48.5%;}

}


@media all and (max-width: 480px){
ul.index-services-list li{width:25%; font-size:15px;}


form.footer-contact-form input[type="text"]{width:97%;}

.footer-links{margin:0 0 20px; clear:both; display:block; overflow:hidden; float:none; width:auto;}

ul.color-box-spunk li{width:96%; padding:0 2%;}

ul.support-box-spunk div{padding:140px 15px 15px 15px; display:block; overflow:hidden;}

.aln-cntr2 img{width:100%;}


.portfolio-page-box ul li{width:auto; margin:3% .5%; float:none; border:1px #e0e0e0 solid; display:block; overflow:hidden;}

.map-area{height:auto;}
.map-area iframe{height:250px;}
.phone-number-area{position:static; width:100%; clear:none; left:0; top:0; display:block; overflow:hidden;}

}

@media all and (max-width: 360px){
ul.headre-social-icons{float:left; clear:both; margin-top:10px;}

ul.index-services-list li{width:50%; font-size:20px;}

ul.yellow-icons-area li{font-size:20px;}


.index-portfolio ul li{float:left; width:95%; border:1px #e0e0e0 solid; margin:0 2% 20px;}

.portfolio-bnt ul li{width:99%;}


.portfolio-logo-box ul li{width:98.5%;}
.portfolio-logo-box ul li img{width:auto; float:none;}

}













.nav-area{float:right;}


nav select {
display:none; /* this is just for the mobile display */
}


.navigation{float:right; font-family:'Titillium Web';}
.navigation > ul > li{float:left; padding:37px 0; font-weight:600; border-left:1px #eee solid;}
.navigation > ul > li:first-child{border-left:none;}
.navigation > ul > li > a{font-size:15px; text-transform:uppercase; padding:36px 35px; /*border:2px #5bb7e8 solid;*/ color:#222; position:relative;}
.navigation > ul > li > a:hover, .navigation > ul > li:hover > a{color:#fff; text-decoration:none; background:#5bb7e8;}
.navigation > ul > li > a > span.arrow{width:10px; height:6px; background:transparent url('../images/dropdown-arrow.png') no-repeat 0 0; position:absolute; top:80%; left:50%; margin:-6px 0 0 -10px;}
.navigation > ul > li > a:hover > span.arrow, .navigation > ul > li:hover > a > span.arrow{background-position:0 -6px;}
.navigation > ul > li ul{display:none;}
.navigation > ul > li ul span{display:none;}
.navigation > ul > li:hover > ul{display:block; position:absolute; top:93px; z-index:100; background:#5bb7e8; padding:0px; min-width:220px;}
.navigation > ul > li > ul li{position:relative;}
.navigation > ul > li > ul li a{display:block; overflow:hidden; padding:10px 15px; clear:both; font-size:15px; font-weight:normal; color:#fff; border-bottom:1px #fff dotted;}
.navigation > ul > li > ul li a:hover, .navigation > ul > li > ul li:hover{text-decoration:none; background:#2092ce;}

.navigation > ul > li > ul li:hover ul{display:block; position:absolute; left:233px; top:0; background:#2092ce; padding:0px; min-width:280px;}
.navigation > ul > li > ul li ul li a{border-bottom-color:#5bb7e8;}
.navigation > ul > li > ul li ul li a:hover{background:#1a74a4;}

@media only screen and (max-width: 1024px) {
.navigation > ul > li > a{padding:37px 25px;}
}



/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 900px) {

.nav-area{margin:25px 5px 0;}

/* nav menu ul & select */
nav ul {
display:none;
}
nav select {
width:100%;
display:block;
margin-bottom:10px;
cursor:pointer;
padding:6px;
background:#2092ce url('../images/select-bg.png') no-repeat 95% center;
/*border:1px solid #2092ce;*/
border:none;
color:#fff; margin-top:8px;
}
}

@media only screen and (max-width: 360px) {
.nav-area{float:none; display:block; overflow:hidden; margin:0 0 10px; clear:both;}
}










/* -------------- Chrome Only ------------------ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.navigation > ul > li > a > span.arrow{display:none;}
}