html,body {
	margin:0;
	padding:0;
	height:100%;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	background-color: #CCC;
	color: #666;
}
img { border: none; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}
header {
	background-color: #3f4953;
	height: 50px;
	line-height: 50px;
	position: fixed;
	width: 100%;
	z-index: 1;
}
header .wrapper { width: 1000px; height: 50px; margin: auto; }
a.logo { float: left; color: #FFF; text-decoration: none; margin-left: 20px; padding-left: 28px; font-size: 14px; background: url(../images/logo.jpg) no-repeat left 11px;line-height: 3em; }
#main { float: right; }
#main ul { list-style: none; padding: 0; margin: 0; }
#main ul li { float: left; margin: 0 20px; }
#main ul li a { color: #FFF; text-decoration: none; font-size: 16px; }
section { padding-top: 50px; }
section .wrapper { width: 944px; margin: auto; background-color: #FFF; padding: 0 18px; }
.text-wrapper { width: 880px; margin: auto; padding-top: 37px; }
h1 { margin: 0; color: #000; }
p { margin: 5px 0; }
#pf { padding-top: 10px; }
.portfolio-item { height: 164px; margin-bottom: 20px; position: relative; overflow: hidden; }
.f-left { float: left; }
.f-right { float: right; }
.clear { clear: both; }
.item-hover { width: 100%; height: 0px; padding: 0 20px; color: #FFF; position: absolute; bottom: 5px; left: 5px; background: url(../images/overlay.png) repeat; overflow: hidden; }
.item-hover h2 { float: left; margin: 20px 0 0; font-size: 19px; font-weight: normal; }
.item-hover span { float: right; margin: 20px 0 0; }
.item-hover p { margin-top: 15px; font-size: 17px; }
.portfolio-item a { width: 462px; height: 164px; position: absolute; left: 0; top: 0; outline: none; }
.tool-skills-table { padding-top: 25px; }
.tool-skills-table .col { float: left; margin-left: 39px; }
.tool-skills-table .col span { font-size: 16px; color: #9ebd91; }
.tool-skills-table ul { list-style: none; padding: 0; margin: 15px 0 0;}
.tool-skills-table ul li { line-height: 22px; }
.contact-us-btn { width: 280px; margin: 50px auto 0; padding-bottom: 30px;}
a.big-blue-btn {
	font-family: "Myriad Pro","Lucida Grande",sans-serif;
	color: #FFF;
	text-align: center;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
	max-width: 280px;
	font-size: 20px;
	height: auto;
	line-height: normal;
	padding: 15px 0;
	background-color: #4376de;
	border: 1px solid #4376de;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	line-height: 25px;
	cursor:pointer;
	outline: none;
	display: block;
	text-decoration: none;
}
.contact-us { color: #333; padding: 25px 30px 10px; }
.contact-us label { line-height: 30px; }
.contact-us input[type='text'], .contact-us textarea {
	margin-bottom: 10px;
}
.contact-us textarea {
	resize: none;
	height: 100px;
}
.w-350 {
	width: 350px;
}
.btn-183 {
	display: block;
}
.error-field { border: 1px solid #F00 !important; }
input[type='text'],
textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color:#666666;
	border: 1px solid #999;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 5px 10px;
	outline: none;
}
input[type='text']{
	height: 17px;
}
textarea { resize: none; }
#cboxClose{
	font-family: "Myriad Pro","Lucida Grande",sans-serif;
	font-size: 14px;
	color: #FFF;
	text-align: center;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
	padding: 0 13px;
	min-width: 46px;
	height: 32px;
	background-color: #999999;
	border: 1px solid #999999;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	line-height: 25px;
	cursor:pointer;
	outline: none;
}
#cboxClose:hover {
	background-color: #adadad;
	border-color: #adadad;
	text-decoration: none;
}
#cboxClose:active {
	background-color: #666666;
	border-color: #666666;
}
input[type="submit"] {
	font-family: "Myriad Pro","Lucida Grande",sans-serif;
	font-size: 14px;
	color: #FFF;
	text-align: center;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
	padding: 0 13px;
	min-width: 46px;
	height: 32px;
	background-color: #4376de;
	border: 1px solid #4376de;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	line-height: 25px;
	cursor:pointer;
	outline: none;
}
input[type="submit"]:hover {
	background-color: #4c86ff;
	border-color: #4c86ff;
	text-decoration: none;
}
input[type="submit"]:active {
	background-color: #345bad;
	border-color: #345bad;
}
@media screen and (min-width: 479px) and (max-width: 768px) {
	header .wrapper { width: 750px; }
	section .wrapper { width: auto; }
	.text-wrapper { width: 720px; }
	.portfolio-item { height: 126px; }
	.portfolio-item a { width: 350px; height: 124px; }
	.portfolio-item img { max-width: 350px; }
	.item-hover { left: 4px; width: 322px; padding: 0 10px; }
	.item-hover h2 { margin: 5px 0 0; }
	.item-hover span { margin: 5px 0 0; }
	.item-hover p { margin-top: 5px; font-size: 16px; }
	.tool-skills-table .col { margin-left: 14px; font-size: 14px; }
}
/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height: 100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
    Example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{
	background: url(../images/overlay.png);
}
#colorbox{ outline: none; }
    #cboxTopLeft{width:12px; height:20px; background:url(../images/corners.png) 0px 0 no-repeat;}
    #cboxTopRight{width:12px; height:20px; background:url(../images/corners.png) no-repeat top right;}
    #cboxBottomLeft{width:12px; height:20px; background:url(../images/corners.png) 0px -20px no-repeat;}
    #cboxBottomRight{width:12px; height:20px; background:url(../images/corners.png) no-repeat bottom right;}
    #cboxMiddleLeft{width:12px; background:url(../images/lr.png) 0 0 repeat-y;}
    #cboxMiddleRight{width:12px; background:url(../images/lr.png) right top repeat-y;}
    #cboxTopCenter{height:20px; background:url(../images/tb.png) 0 top repeat-x;}
    #cboxBottomCenter{height:20px; background:url(../images/tb.png) 0 bottom repeat-x;}
    #cboxContent{background:#fff;}
        #cboxLoadedContent{margin-bottom:10px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0px; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext.hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{ background: #FFF; }
        #cboxLoadingGraphic{ background: url(../images/loading.gif) no-repeat center center; }
        #cboxClose{
			position:absolute;
			top:0;
			right:8px;
			text-transform: capitalize;
		}

		
		
.top-bar-section li:not(.has-form) a:not(.button)	,.top-bar-section ul li,.top-bar.expanded .title-area{ background-color:rgb(63, 73, 83) !important}	
.top-bar-section ul li > a{font-size:16px !important}

@media screen and ( max-width: 983px ) {
    
    .wrapper {
    	width: 100% !important;
    	box-sizing: border-box;
    }

}

@media screen and ( max-width: 768px ) {

	.logo {
		float: none !important;
	    margin: 0 auto !important;
	    width: 80px;
	    display: block;
	}

	header {
		position: relative;
	}

	header, header .wrapper {
		height: auto;
	}

	#main {
	    float: none;
	    text-align: center;
	    display: block;
	}

	#main ul li {
	    display: inline-block;
	    float: none;
	}

	section {
		padding-top: 0;
	}

	.f-left,  .f-right {
	    float: none;
	    width: 100%;
	}

	.text-wrapper {
		width: 100%;
	}

}


@media screen and ( max-width: 400px ) {

	.f-left,  .f-right {
	    float: none;
	    width: 100%;
	}

	.f-left img,  .f-right img {
		width: 100%;
	}

	.tool-skills-table .col {
	    float: none;
	    margin: 20px 0 0;
	}

}