@charset "utf-8";
/* CSS Document */	
@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot?v=4.0.3');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}


@font-face {
	font-family: 'GothamBold';
	src: url('fonts/gothambold0.eot');
	src: url('fonts/gothambold0.eot?#iefix') format('embedded-opentype'),
				url('fonts/gothambold0.woff') format('woff'),
				url('fonts/gothambold0.ttf') format('truetype'),
				url('fonts/gothambold0.svg#gothambold0') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
				font-family: 'Gotham-Book';
				src: url('fonts/gothambook.eot');
				src: url('fonts/gothambook.eot?#iefix') format('embedded-opentype'),
						 url('fonts/gothambook.woff') format('woff'),
						 url('fonts/gothambook.ttf') format('truetype'),
						 url('fonts/gothambook.svg#gothambook') format('svg');
				font-weight: normal;
				font-style: normal;
		}
		
@font-face {
	font-family: 'GothamMedium';
	src: url('fonts/gothammedium0.eot');
	src: url('fonts/gothammedium0.eot?#iefix') format('embedded-opentype'),
				url('fonts/gothammedium0.woff') format('woff'),
				url('fonts/gothammedium0.ttf') format('truetype'),
				url('fonts/gothammedium0.svg#gothammedium0') format('svg');
	font-weight: normal;
	font-style: normal;
}


body {
	background-color:#262932;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	min-width:1000px;
}

#topwrapper {
	width:100%;
	position:fixed;
	z-index:100;
	left:0px;
	top: 0px;
	background-color:#FFFFFF;
}

#top {
	width:1000px;
	margin:0 auto;
	padding:25px 0px;
}

#top .logo {
	width:18%;
	float:left;
}

a.menu {
	text-align:right;
	float:right;
	display:none;
	color:#000;
	width:20%;
	min-height:25px;
	margin:5px auto;
	background-image:url(images/menu-home.png);
	background-repeat:no-repeat;
	background-position:left;
}

#top #nav {
	float:right;
	font-family:'Gotham-Book';
	margin:30px 0px 10px 0px;
	text-align:right;
	width:80%;
}

#top #nav li {
	display:inline;
	text-transform:uppercase;
}

#top #nav li a {
	padding:20px 28px;
	color:#484848;
	text-decoration:none;
}

#top #nav li.last a {
	padding:20px 14px 20px 14px;
}

#top #nav li a:hover {
	color:#FFFFFF;
	background-color:#06a8f0;
	border-radius:1px;
} 

h1, h2 {
	font-size:38px;
	padding:0px 0px 40px 0px;
	color:#FFFFFF;
	text-align:center;
	font-family:'Gotham-Book';
}

.inner {
	width:1000px;
	margin:0 auto;
}

.clear{
	clear:both;
}

#one{
	background: url(images/top_bg.jpg) no-repeat fixed #06a8f0;
	position:relative;
	padding:150px 0 200px 0;
	background-size:100%;
	margin:100px 0 0 0;
}

#first{
	text-align:center;
	color:#06a8f0;
	font-size:40px;
	text-transform:uppercase;
	font-family: 'GothamMedium';
	line-height:50px;
	padding:0px;
}

/* About */

#about {
	width:100%;
	color:#FFFFFF;
	margin:0px 0px 0px 0px;
	padding:100px 0px 100px 0px;
	background-color:#06a8f0;
}

#about .text{
	font-family: 'Gotham-Book';
	font-size:15px;
	line-height:25px;
}

#about .text a{
	color:#FFFFFF;
}

#about .text .col1 {
	text-align:right;
	line-height:25px;
	width:34%;
	float:left;
	margin:0 0 0 120px;
}

#about .text .col2 {
	text-align:left;
	line-height:25px;
	width:42%;
	float:right;
	margin:0 40px 0 0;
}

/*Staff*/

#staff {
	width:100%;
	padding:100px 0px;
	background-color:#262932;
}

#staff #mycarousel{
	margin:20px 0 0 0;
}


#staff .bx-wrapper img {
	display: inline;
}

#staff .staffmember {
	color:#FFFFFF;
	float:left;
	width:300px;
	text-align:center;
	margin:0px 22px 0px 0px;
}

#staff .slide.bx-clone, #staff .slide{
	width:2.68%!important;
}

#staff .slide .pix img{
	width:100%;
	height:auto;
}

#staff .staffmember{
	width:100%!important;
}

#staff .staffmember .pix {
	margin:0px auto 20px auto;
}

#staff .staffmember .title {
	font-family:'Gotham-Book';
}

#staff .staffmember .social img {
	margin:8px;
}
/* Work */
#work {
	background-color:#e1e7e3;
	clear:both;
	padding:100px 0px 0px 0px;
}

#work h2 {
	color:#07a8f0;
	padding:0 0 60px 0;
}

#work a.more {
	display:block;
	color:#07a8f0;
	font-family:'GothamMedium';
	text-decoration:none;
	padding:0px 0px 25px 0px;
	text-align:center;
}

#work .col{
	float:left;
	width:30.5%;
}

#work .col.middle{
	margin:0 35px;
}

#work .col .project{
	margin: 0 0 50px 0;
}

#work .col .project .info{
	background:#FFFFFF;
	padding:10px 20px 10px 20px;
}

#work .col .project .info .title{
	text-align:center;
	color:#48b6f1;
	font-size:15px;
}

#work .col .project .info p{
	text-align:justify;
	line-height:20px;
}

#work .col .project .info p{
	color:#000000;
}

/*Projects*/
#work #columns {
	-webkit-column-count: 3;
	-webkit-column-gap: 15px;
	-webkit-column-fill: auto;
	-moz-column-count: 3;
	-moz-column-gap: 15px;
	-moz-column-fill: auto;
	column-count: 2;
	column-gap: 15px;
	column-fill: auto;
}

#work .project {
	display: inline-block;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
	opacity: 1;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;;
	margin:0px 0px 80px 0px;
}

#work .project .image {
	width: 100%;
}

#work .project .info {
	text-align: justify;
}

#work .project .noborder {
	border: 0px;
}

#work .recentwork {
	clear:both;
	overflow:hidden;
}

#work .recentwork .image { 
	position: relative;
	float: left;
	width: 25%
}

#work .recentwork .clear {
	clear: both;
}

#work .recentwork .mainimage {
	width:100%;
}

#work .recentwork .image:hover {
	opacity:0.6;
	filter:alpha(opacity=60);
}

#work .recentwork .hoverimage  { 
	position: absolute; 
	top: 35%; 
	left: 35%; 
	display: none; 
}

#work .recentwork .image:hover .hoverimage { 
	display: block; 
}

.img:hover .hoverimage {
	display:block;
}

/*Client Detail*/
#client_detail .screenshot{
	float:left;
	width:80%;
}

#client_detail .info{
	float:right;
	width:20%;
	background: rgba(0,0,0,0.6);
	padding:50px 70px 0 70px;
	color:#FFFFFF;
}

#client_detail .info .title{
	font-size:15px;
	border-bottom:1px solid #FFFFFF;
	padding:0 0 10px 0;
	margin:0 0 20px 0;
}

#client_detail .info .text{
	line-height:25px;
}

#client_detail .info .link{
	margin:100px 0 0 0;
}

#client_detail .info .link a{
	color:#3fc1f3;
	text-decoration:none;
	font-size:15px;
}
	
/* Social Media */
#social {
	background-color:#0498d6;
	text-align:center;
	padding:50px 0;
}

#social img {
	margin:55px 38px;
}

/*Services*/
#services {
	background-color:#06a8f0;
	overflow:hidden;
	padding: 100px 0px;
	color:#FFFFFF;
	font-family:'Gotham-Book';
}

#services h2 {
	color:#FFFFFF;
}

#services .col1 {
	float:left;
	width:48%;
}

#services .col2 {
	float:right;
	width:48%;
}

#services .service {
	clear:both;
	overflow: hidden;
	padding:42px 0px;
}

#services .service .icon {
	float:left;
	width:26.5%;
	margin:0px 25px 0px 0px;
}

#services .service .icon img{
	width:100%;
	height:auto;
}

#services  .text {
	float:right;
	width:67%;
}

#services .title {
	font-size:23px;
	font-family:'GothamBold';
	padding:0px 0px 24px 0px;
}

#services  .more a {
	display:block;
	color:#FFFFFF;
	font-family:'GothamMedium';
	text-decoration:none;
	text-align:right;
}
	
/*Contact*/
#contact {
	background-color:#262932;
	overflow:hidden;
	font-size:16px;
	font-family:'Gotham-Book';
}

#contact h2{
	padding:50px 0 60px 0;
}

#contact #form {
	float:left;
	width:48%;
}

#contact #form .textfield , #contact #form .textarea {
	width:89%;
	height:15px;
	padding:25px;
	margin:0px 0px 15px 0px;
}

#contact #form .textarea {
	height:96px;
}

#contact .button {
	width:100%;
	height:65px;
	background-color:#e34f43;
}

#contact #response {
	float:left;
	width:480px;
	color:#FFFFFF;
	font-weight:bold;
	font-size:150%;
}

#contact .info {
	float:right;
	color:#FFFFFF;
	width:40%;
}

#contact .info .subtitle {
	color:#05acd0;
	padding:0px 0px 5px 0px;
}

#contact .info .address, #contact .info .phone, #contact .info .fax {
	padding:0px 0px 0px 58px;
	line-height:18px;
	margin:0px 0px 30px 0px;
}

#contact .info .phone, #contact .info .fax {
	margin:0px 0px 50px 0px;
}


#contact .info .address {
	background:url(images/icon_address.gif) top left no-repeat;
}

#contact .info .phone {
	background:url(images/icon_phone.gif) top left no-repeat;
}


#contact .info .fax {
	background:url(images/icon_fax.gif) top left no-repeat;
}

#contact .info a.helpdesk {
	display:block;
	font-family:'GothamBold';
	width:100%;
	font-size:36px;
	text-decoration:none;
	color:#FFFFFF;
	border-radius:5px;
	background-color:#01b8e2;
	text-align:center;
	padding:48px 0px;
	margin:140px 0px 0px 0px;
}

/*Copyright*/

.copy {
	text-align:center;
	font-size:10px;
	color:#FFFFFF;
	padding:40px 0px 10px 0px;
}

.copy a{
	color:#FFF;
}

/*Portfolio*/
#portfolio{
	margin:150px 0px 0px;
}

.header{
	width:1000px;
	margin:0px auto 15px auto;
	padding:30px 10px 30px 10px;
	border-bottom:1px solid #e5e5e5;
}

#portfolio .header .button{
	float:right;
	
}

#portfolio .header h2{
	font-size:22px;
	padding-bottom:12px;
	font-family:'GothamBold';
	color:black;
	float:left;
}

.wrapper{
	margin:0 auto;
	width:1000px;
}

#portfolio .sites {
    width:1000px;
}


#portfolio .sites .box{
	float:left;
	width:45%;
	clear:both;
	margin:0 0 50px 0;
}

#portfolio .sites .box.right{
	float:right;
	clear:none;
}

#portfolio .sites .box img{
	width:97.5%;
	border:1px solid #f0efeb;
	border-radius:2px;
	padding:5px;
}

#portfolio .sites .box a{
	text-decoration:none;
	color:#000000;
	font-weight:bold;
}

#portfolio .sites .box p{
	text-decoration:none;
}

.like{
	float:right;
	margin-top:-30px;
}

/*Our Clients*/

#topwrapper{
	border-bottom:6px solid #06a8f0;
}

#clients{
	margin:150px auto 0 auto;
	width:1000px;
}

#clients .names{
	width:40%;
	float:left;
}

#clients h2{
	font-size:22px;
	padding-bottom:12px;
	font-family:'GothamBold';
	color:black;
}

.abcs{
	width:550px;
	margin:0 auto;
}

#clients a{
	color:black;
	text-decoration:none;
	text-weight:bold;
}

/*Footer*/
.footer{
	background:#262932;
}

/* Quote Page */
.quoteForm {
	padding:80px 0 0 0;
	text-align:center;
	background-color:#FFFFFF;
	background-image: url('//ssl.gstatic.com/docs/forms/themes/images/v1/1cec67c71dc4fdf750d4dc743d1cdc75523a825298d7c7e39ba9e4868458d965/stripes-bg.png');
	background-repeat: repeat;
	background-position: left top;
}

/* David Perkowski Page */
#davidPerkowski {
	padding:120px 0 0 0;
	background-color:#FFFFFF;
}

#davidPerkowski td {
	padding:10px;
}

#davidPerkowski h2{
	font-size:22px;
	padding-bottom:12px;
	font-family:'GothamBold';
	color:black;
	text-align:right;
}

#davidPerkowski .title{
	  color: #07a8f0;
	  font-size:24px;
	  font-family: 'Gotham-Book';
}

#davidPerkowski .service{
	line-height:20px;
	text-align:justify;
}

/* SPF Register */

#addPage{
	width: 1000px;
	margin:150px auto 0px auto;	
}

#addPage table{
}

#addPage h1{	
	color:#06a8f0;
}

#addPage h2{
	font-size:14px;
	font-weight: bold;
}

#addPage td {
	padding:10px 5px 5px 15px;
	text-align:left;
}

#addPage .head{
	color:#06a8f0;
	font-weight:bold;
	border-bottom:solid 1px #06a8f0;
	margin:10px 0 2px 0;
	padding:25px 0 5px 0;
	text-align:left;
}
#addPage .desc{
	color:#999999;
	font-weight:normal;
	font-size:12px;
}

#addPage input[type=text], #addPage input[type=password], #addPage input[type=select], #addPage select {
	width:50%;
	height:30px;
}

#addPage.order input[type=text], #addPage.order input[type=password], #addPage.order input[type=select], #addPage.order select {
	width:100%;
	height:30px;
}

#addPage.order #wording, #addPage.order #comments{
	width:100%!important;
}

#addPage.order td img{
	padding:4px 0 0 0;
}

#Username{
	width:28.7%!important;
}

#sitedesc, #comments{
	width:50%!important;
}

#addPage select{
	width:50.5%;
}

#addPage .submit, #davidPerkowski .submit{
	width:50%;
	background: #06a8f0;
	color:#FFF;
	text-transform:uppercase;
	padding:10px 0;
	border:none;
	font-size:15px;
	margin:20px 0 40px 0;
}

#davidPerkowski .submit{
	display:block;
	text-transform:none;
	text-align:center;
	padding:10px 20px;
	text-decoration:none;
	font-family: 'Gotham-Book';
}

#addPage.order .submit{
	width:100%;
}

/*Flash*/


/*  */
.logos{
	float:right;
	width:60%;
}

.logos img{
	padding:0 40px 20px 0;
	/*border:1px solid red;*/
}

.social a {
	text-decoration:none;
}

.fa {
 display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-size:45px;
  color:#FFFFFF;
 -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding:0px 10px 0px 0px;
}

.fa.nopadding {
	padding:0px;
}

.fa-twitter-square:before {
  content: "\f081";
}
.fa-twitter:before {
  content: "\f099";
}
.fa-facebook-square:before {
  content: "\f082";
}
.fa-facebook:before {
  content: "\f09a";
}
.fa-instagram:before {
  content: "\f16d";
}
.fa-linkedin-square:before {
  content: "\f08c";
}
.fa-linkedin:before {
  content: "\f0e1";
}
.fa-youtube-square:before {
  content: "\f166";
}
.fa-youtube:before {
  content: "\f167";
}
.fa-pinterest:before {
  content: "\f0d2";
}
.fa-pinterest-square:before {
  content: "\f0d3";
}
.fa-google-plus-square:before {
  content: "\f0d4";
}
.fa-google-plus:before {
  content: "\f0d5";
}
.fa-cloud:before {
  content: "\f0c2";
}

