@charset "UTF-8";
/* CSS Document */
html {
	height: 100% !important;
}
a {
	outline: 0;
}
body {
	position: relative !important;
	height: 100% !important;
	margin: 0;
	padding-top:;
	background-attachment: fixed !important;
	background-size: 100% !important;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bcbcbc+0,7c7c7c+100 */

	background: rgb(188,188,188); /* Old browsers */
	background: -moz-linear-gradient(-45deg, rgba(188,188,188,1) 0%, rgba(124,124,124,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, rgba(188,188,188,1) 0%, rgba(124,124,124,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, rgba(188,188,188,1) 0%, rgba(124,124,124,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bcbcbc', endColorstr='#7c7c7c', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
::-moz-selection { /* Code for Firefox */
 color: rgba(255,255,255,1);
 background: rgba(255,88,0,0.996);
 
}
::selection {
	color: rgba(255,255,255,1);
	background: rgba(255,88,0,0.996);
}
p::selection {
    color: rgba(255,255,255,1);
	background: rgba(255,88,0,0.996);
}
.anchor-offset{
	padding-top: 110px;
	margin-top: -110px;
}
.down-header {
}
.down-nav {
	color: rgba(24,144,214,1);
	padding-top: 35px;
}
h1.down-body {
	font-size: 34px;
	line-height: 44px;
}
.mneg5t {
	margin-top: -5px;
}
.m5t {
	margin-top: 5px;
}
.m5b {
	margin-bottom: 5px;
}
.m10t {
	margin-top: 10px;
}
.m10b {
	margin-bottom: 10px;
}
.m15t {
	margin-top: 15px;
}
.m15b {
	margin-bottom: 15px;
}
.m20t {
	margin-top: 20px;
}
.m20b {
	margin-bottom: 20px;
}
.m25t {
	margin-top: 25px;
}
.m25b {
	margin-bottom: 25px;
}
.m30t {
	margin-top: 30px;
}
.m30b {
	margin-bottom: 30px;
}
.m40t {
	margin-top: 40px;
}
.m40b {
	margin-bottom: 40px;
}
.m50t {
	margin-top: 50px;
}
.m50b {
	margin-bottom: 50px;
}
.m75t {
	margin-top: 75px;
}
.m75b {
	margin-bottom: 75px;
}
.m100t {
	margin-top: 100px;
}
.m100b {
	margin-bottom: 100px;
}
.p5t {
	padding-top: 5px;
}
.p5b {
	padding-bottom: 5px;
}
.p5l {
	padding-left: 5px;
}
.p5r {
	padding-right: 5px;
}
.p10t {
	padding-top: 10px;
}
.p10b {
	padding-bottom: 10px;
}
.p10r {
	padding-right: 10px;
}
.p15t {
	padding-top: 15px;
}
.p15b {
	padding-bottom: 15px;
}
.p15r {
	padding-right: 15px;
}
.p20t {
	padding-top: 20px;
}
.p20b {
	padding-bottom: 20px;
}
.p25t {
	padding-top: 25px;
}
.p25b {
	padding-bottom: 25px;
}
.p25r {
	padding-right: 25px;
}
.p30t {
	padding-top: 30px;
}
.p30b {
	padding-bottom: 30px;
}
.p40t {
	padding-top: 40px;
}
.p40b {
	padding-bottom: 40px;
}
.p50t {
	padding-top: 50px;
}
.p50b {
	padding-bottom: 50px;
}
.p60t {
	padding-top: 60px;
}
.p60b {
	padding-bottom: 60px;
}
.p75t {
	padding-top: 75px;
}
.p75b {
	padding-bottom: 75px;
}
.p80t {
	padding-top: 80px;
}
.p80b {
	padding-bottom: 80px;
}
.p100t {
	padding-top: 100px;
}
.p100b {
	padding-bottom: 100px;
}
.p150t {
	padding-top: 150px;
}
.p150b {
	padding-bottom: 150px;
}
.p200t {
	padding-top: 200px;
}
.p200b {
	padding-bottom: 200px;
}
.p250t {
	padding-top: 250px;
}
.p250b {
	padding-bottom: 250px;
}
.p300t {
	padding-top: 300px;
}
.p300b {
	padding-bottom: 300px;
}
.img-centered {
	margin: 0 auto
}
.blue-text {
	color: rgba(24,144,214,1);
}
/*==========  Nav  ==========*/
.cojo-nav-logo {
	height: 110px;
	padding: 24px; /* firefox bug fix */
	width: auto;
}
.navbar-brand>img {
	max-height: 100%;
	height: 50%;
	width: auto;
}
/*==========  Services  ==========*/
#services-box {
	background: rgba(255,255,255,1);
	background-image: url(../graphics/bg-halftone.png);
	background-attachment: fixed;
}
.service-icon-box{
	padding: 10px;
	margin-bottom: 20px;
	display:block;
}
/*==========  Get Started  ==========*/
#get-started {
	background-color: rgba(24,144,214,1);
	color: rgba(255,255,255,1);
}
h2.get-started {
	letter-spacing: 1px;
}
h3.get-started {
	letter-spacing: 1px;
}
.btn-get-started {
	margin-top: 20px;
	margin-bottom: 10px;
	background-color: rgba(24,144,214,1);
	border-color: rgba(255,255,255,1);
	color: rgba(255,255,255,1);
	letter-spacing: 1px;
}
.btn-get-started:hover, .btn-get-started:focus, .btn-get-started:active, .btn-get-started.active {
	background-color: rgba(1,53,84,1);
	border-color: rgba(255,255,255,1);
	color: rgba(255,255,255,1);
}
.btn-get-started.disabled:hover, .btn-get-started.disabled:focus, .btn-get-started.disabled:active, .btn-get-started.disabled.active, .btn-get-started[disabled]:hover, .btn-get-started[disabled]:focus, .btn-get-started[disabled]:active, .btn-get-started[disabled].active, fieldset[disabled] .btn-get-started:hover, fieldset[disabled] .btn-get-started:focus, fieldset[disabled] .btn-get-started:active, fieldset[disabled] .btn-get-started.active {
	background-color: #08c;
	border-color: #08c;
}

/*==========  Portfolio section  ==========*/
#portfolio-sample {
	background: rgba(146,146,146,1); /* Old browsers */
}
.btn-see-more {
	margin-top: 15px;
	margin-bottom: 10px;
	background-color: rgba(146,146,146,1);
	border-color: rgba(255,255,255,1);
	color: rgba(255,255,255,1);
	letter-spacing: 1px;
}
.btn-see-more:hover, .btn-see-more:focus, .btn-see-more:active, .btn-see-more.active {
	background-color: rgba(53,53,53,1);
	border-color: rgba(255,255,255,1);
	color: rgba(255,255,255,1);
}
.btn-see-more.disabled:hover, .btn-see-more.disabled:focus, .btn-see-more.disabled:active, .btn-see-more.disabled.active, .btn-see-more[disabled]:hover, .btn-see-more[disabled]:focus, .btn-see-more[disabled]:active, .btn-see-more[disabled].active, fieldset[disabled] .btn-see-more:hover, fieldset[disabled] .btn-see-more:focus, fieldset[disabled] .btn-see-more:active, fieldset[disabled] .btn-see-more.active {
	background-color: #08c;
	border-color: #08c;
}
/*==========  About  ==========*/
#about-box {
	background: rgba(255,255,255,1);
	background-image: url(../graphics/bg-halftone.png);
	background-attachment: fixed;
	font-size: 20px;
	letter-spacing: 1px;
}
hr.about-rule {
	display: block;
	border: solid 1px rgba(224,224,224,1);
	margin-top: 50px;
	margin-bottom: 50px;
}
h3.about-standout {
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 1px;
}
/*==========  Contact  ==========*/
#contact-box {
	background: rgba(24,144,214,1);
	background-attachment: fixed;
	color: rgba(255,255,255,1);
	font-size: 16px;
	letter-spacing: 1px;
}
/*==========  Contact Thank You  ==========*/
.ty-btn-block {
	margin-top: 20px;
	margin-bottom: 10px;
	background-color: rgba(24,144,214,1);
	border-color: rgba(255,255,255,1);
	color: rgba(255,255,255,1);
	letter-spacing: 1px;
}
.ty-btn-block:hover, ..ty-btn-block:focus, ..ty-btn-block:active, ..ty-btn-block.active {
	background-color: rgba(1,53,84,1);
	border-color: rgba(255,255,255,1);
	color: rgba(255,255,255,1);
}
.ty-btn-block.disabled:hover, .ty-btn-block.disabled:focus, .ty-btn-block.disabled:active, .ty-btn-block.disabled.active, .ty-btn-block[disabled]:hover, .ty-btn-block[disabled]:focus, .ty-btn-block[disabled]:active, .ty-btn-block[disabled].active, fieldset[disabled] .ty-btn-block:hover, fieldset[disabled] .ty-btn-block:focus, fieldset[disabled] .ty-btn-block:active, fieldset[disabled] .ty-btn-block.active {
	background-color: #08c;
	border-color: #08c;
}

/*==========  Footer  ==========*/
#footer-box {
	background: rgba(0,53,84,1);
	background-attachment: fixed;
	color: rgba(255,255,255,1);
	font-weight: 400;
	letter-spacing: 1px;
}
.footer-section ul.list-unstyled li {
	margin-bottom: 10px;
}
.footer-section a:link {
	color: rgba(255,255,255,1);
	text-decoration: none;
}
.footer-section a:hover {
	color: rgba(255,122,0,1);
}
.footer-section a:visited {
	color: rgba(88,88,88,1);
}
h4.footer-header {
	color: rgba(24,144,214,1);
	font-weight: 400;
	margin-bottom: 20px;
}
h5.footer-services {
	color: rgba(255,122,0,1);
	font-weight: 400;
}
.resume {
	padding-left: 10px;
	font-size:48px;
}
.resume a:visited {
}
/*==========  copyright Footer  ==========*/
#copyright-box {
	background: rgba(146,146,146,1);
	padding-top: 6px;
	padding-bottom: 6px;
	font-weight: 400;
}
.cojo-logo-footer{
	max-width: 50px;
	height:auto;
}

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/




    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
body {
	padding-top: 110px;
}
.navbar-default {
	background-color: rgba(24,144,214,1);
	box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
	font-weight: 400;
}
.down-nav {
	font-size: 9px;
}
.close-x {
	position: absolute !important;
	z-index: 99999999;
	top: 0;
	right: 10px;
	size: auto;
	margin-top: -20px;
}
.section-padding{
	padding-top: 50px;
	padding-bottom: 50px;
}
.section-padding-ty{
	padding-top: 50px;
	padding-bottom: 30px;
}
.jumbotron-cojo-header {
	padding-top: 85px;
	padding-bottom: 85px;
	color: inherit;
	background: url(../graphics/cojo-desk-header.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: rgba(255,255,255,1);
}
/*==========  Services XC  ==========*/
h1.services-section {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 2px;
	padding-bottom: 0px;
}
.services-margins{
	margin-top: 60px;
}
.service-icon{
	display: block;
	max-width: 160px;
	height: auto;
}
h3.service-title{
	font-size: 24px;
}
/*==========  Get Started XC  ==========*/
h2.get-started {
	font-size: 24px;
	line-height: 30px;
	letter-spacing: 1px;
}
h3.get-started {
	font-size: 16px;
	letter-spacing: 1px;
}
/*==========  Portfolio section XC  ==========*/
.recent-portfolio-box {
	position: relative;
	width: 100%;
	height: 100% !important;
	z-index: 2;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e0e0+0,e0e0e0+20,ffffff+60,ffffff+100 */

	background: #e0e0e0; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #e0e0e0 0%, #e0e0e0 20%, #ffffff 60%, #ffffff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #e0e0e0 0%, #e0e0e0 20%, #ffffff 60%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #e0e0e0 0%, #e0e0e0 20%, #ffffff 60%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#ffffff', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	padding: 0px;
	border: 0px;
	border-radius: 10px;
}
.recent-portfolio-hover {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 4;
}
.recent-portfolio-hover a {
	display: block;
 	background:;
	height: 100%;
	text-decoration: none;
	outline: none;
	border: 0px;
	border-radius: 10px;
}
.recent-portfolio-hover a:hover {
	background: rgba(24,144,214,1);
	opacity: .80;
	text-decoration: none;
}
.recent-portfolio-img-rounded {
	border: 0px;
	border-radius: 10px;
}
/*==========  About XC  ==========*/
h2.about-section {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 2px;
}
h3.about-section {
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 1px;
}
/*==========  Contact XC  ==========*/
h1.contact-section {
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 2px;
}
/*==========  Contact Thanks XC  ==========*/
#contact-thanks{
	padding-top: 60px;
	padding-bottom: 80px;
	background: rgba(255,255,255,1);
	background-image: url(../graphics/bg-halftone.png);
	background-attachment: fixed;
}
h2.contact-ty {
	font-size: 22px;
	line-height: 30px;
	letter-spacing: 1px;
	padding-bottom: 10px;
}
h3.contact-ty {
	font-size: 16px;
	letter-spacing: 1px;
	padding-bottom: 3px;
}
h4.contact-ty {
	font-size: 13px;
	letter-spacing: 1px;
}
.ty-btn-block {
	display: block !important;
	width: 100% !important;
}
/*==========  Google Map XC  ==========*/
#google-map {
	height: 275px;
	width: 100%;
}
/*==========  Footer XC  ==========*/
.cojo-social-icons {
	display: inline-block;
	max-width: 50px;
	height: auto;
	padding-left: 3px;
	padding-right: 3px;
	padding-bottom: 10px;
}
.jumbotron-google-map {
}
}

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
.jumbotron-cojo-header {
	padding-top: 130px;
	padding-bottom: 130px;
}
.down-nav {
	font-size: 10px;
	color: rgba(24,144,214,1);
}
h1.down-body {
	font-size: 24px !important;
	line-height: 30px !important;
}
/*==========  Services XS  ==========*/
h1.services-section {
	font-size: 40px;
}
/*==========  About XS  ==========*/
h2.about-section {
	font-size: 32px;
}
h3.about-section {
	font-size: 26px;
}
/*==========  Contact XS  ==========*/
h1.contact-section {
	font-size: 44px;
}
/*==========  Contact Thanks XS  ==========*/
h2.contact-ty {
	font-size: 36px;
	line-height: 30px;
	letter-spacing: 1px;
	padding-bottom: 20px;
}
h3.contact-ty {
	font-size: 24px;
	letter-spacing: 1px;
	padding-bottom: 10px;
}
h4.contact-ty {
	font-size: 19px;
	letter-spacing: 1px;
}

}

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
.close-x {
	position: fixed !important;
	z-index: 99999999;
	top: 0;
	right: 10px;
	margin-top: -20px;
}
.section-padding{
	padding-top: 80px;
	padding-bottom: 80px;
}
.section-padding{
	padding-top: 80px;
	padding-bottom: 60px;
}
.jumbotron-cojo-header {
	padding-top: 175px;
	padding-bottom: 175px;
}
.down-nav {
	font-size: 12px;
}

h1.down-body {
	font-size: 30px;
	line-height: 36px;
}
/*==========  Services SM  ==========*/
.services-margins{
	margin-bottom: 0px;
}
.service-icon{
	max-width: 88%;
}
h3.service-title{
	font-size: 14px;
}
/*==========  Get Started SM  ==========*/
h2.get-started {
	font-size: 30px;
}
h3.get-started {
	font-size: 24px;
}
/*==========  Portfolio section SM  ==========*/
.recent-portfolio-box {
	border-radius: 20px;
}
.recent-portfolio-hover {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 4;
}
.recent-portfolio-hover a {
	border-radius: 20px;
}
.recent-portfolio-img-rounded {
	border-radius: 20px;
}
.cojo-social-icons {
	display: inline-block;
	max-width: 35px;
}
/*==========  About SM  ==========*/
h2.about-section {
	font-size: 36px;
}
h3.about-section {
	font-size: 24px;
}
/*==========  Contact Thanks SM  ==========*/
#contact-thanks{
	padding-top: 200px;
	padding-bottom: 200px;
}
.ty-btn-block {
	display: inline-block !important;
	width: auto !important;
}
/*==========  Google Map SM  ==========*/
#google-map {
	height: 350px;
}
}
 /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
body {
	padding-top: 0px;
}
.navbar-default {
	background-color: rgba(255,255,255,0.5);
 border-color:;
}
.affix {
	position: fixed;
	top: 0px;
	-webkit-transition: all .2s ease-in-out;
	transition: all .5s ease-in-out;
	background-color: rgba(24,144,214,1);
	box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
	font-weight: 400;
}
.affix a {
	color: rgba(255,255,255,1) !important;
	font-weight: 400;
}
.affix a:hover, a:focus {
	color: rgba(255,122,0,1) !important;
	font-weight: 400;
}
.affix a:active{
	font-weight: 400;
}
.affix-top a {
}
.jumbotron-cojo-header {
	padding-top: 220px;
	padding-bottom: 220px;
}
/*==========  Services MD  ==========*/
h3.service-title{
	font-size: 22px;
}
.cojo-social-icons {
	max-width: 50px;
}
}
   
    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
.jumbotron-cojo-header {
	padding-top: 270px;
	padding-bottom: 270px;
}
}
    /* Extra Large Devices, Wide Screens */
    @media only screen and (min-width : 1500px) {
.jumbotron-cojo-header {
	padding-top: 320px;
	padding-bottom: 320px;
}
}
    /* XX Large Devices, Wide Screens */
    @media only screen and (min-width : 1800px) {
.jumbotron-cojo-header {
	padding-top: 420px;
	padding-bottom: 420px;
}
}
  /* XXX Large Devices, Wide Screens */
    @media only screen and (min-width : 2000px) {
.jumbotron-cojo-header {
	padding-top: 480px;
	padding-bottom: 480px;
}
}


    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {
}

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
}

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
}

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
}

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
}