/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - EXTRA LARGE DEVICES (large desktops, 1200px and up) */ 
/* BEGIN OVER-RIDE CHANGES FROM BOOTSTRAP.CSS */
.col-md-12 {
 padding-left: 0;
 padding-right: 0;}
 
.col-md-6 {
 padding-left: 0;
 padding-right: 0;}
 
.col-lg-4 {
 padding-left: 0;
 padding-right: 0;}
 
.container {
 background-color: #ffffff;
 box-shadow: 0 0 0 #358cf8;}
 
.bg-dark {
 background-color: none;}
  
#picfix {
 height: 75px;}/* - - - - - - - - - - - DROPDOWN BACKGROUND COLOR - - - - - - - - - - - - - */
/* END OVER-RIDE CHANGES FROM BOOTSTRAP.CSS */

body {
 background-color: #004f8c;
 /* background-image: url(../images/bg-8.png); */}

/* body {radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
        background-color: rgba(0, 0, 0, 0);
        background-position-x: 0px, 8px, 0px, 8px;
        background-position-y: 0px, 8px, 1px, 9px;
        background-repeat: repeat, repeat, repeat, repeat;
        background-attachment: scroll, scroll, scroll, scroll;
        background-image: radial-gradient(black 15%, transparent 16%), radial-gradient(black 15%, transparent 16%), radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
        background-size: auto, auto, auto, auto;
        background-origin: padding-box, padding-box, padding-box, padding-box;
        background-clip: border-box, border-box, border-box, border-box;
    background-color: #3a3a3a;
    background-size: 16px 16px;} */

a.type1:link {color: #0c53ac; text-decoration: none; transition: all 0.4s ease-in-out;} 
a.type1:visited {color: #0c53ac; text-decoration: none;}
a.type1:hover {color: #C49150; text-decoration: none; /* COMPLIMENTARY TO 358cf8 */
               -o-transition:.4s; 
			   -ms-transition:.4s; 
			   -moz-transition:.4s; 
			   -webkit-transition:.4s; 
			   transition:.4s;  
			   /* -webkit-transform:scale(2.0, 1.0);
               -moz-transform:scale(2.0, 1.0);
               -ms-transform:scale(2.0, 1.0);
               -o-transform:scale(2.0, 1.0);
               transform:scale(2.0,1.0); */
			   text-shadow: 0 0 2px #C49150;}
a.type1:active {color: #C49150;  text-decoration: none;}

a.type2:link {color: #dbdfe5; text-decoration: none; transition: all 0.4s ease-in-out;} 
a.type2:visited {color: #dbdfe5; text-decoration: none;}
a.type2:hover {color: #004f8c; text-decoration: none; /* COMPLIMENTARY TO 358cf8 */
               -o-transition:.4s; 
			   -ms-transition:.4s; 
			   -moz-transition:.4s; 
			   -webkit-transition:.4s; 
			   transition:.4s;}
a.type2:active {color: #004f8c; text-decoration: none;}

a.type3:link {color: #f5c60b; text-decoration: none; transition: all 0.4s ease-in-out;} 
a.type3:visited {color: #f5c60b; text-decoration: none;}
a.type3:hover {color: #fae591; text-decoration: none; /* COMPLIMENTARY TO 358cf8 */
               -o-transition:.4s; 
			   -ms-transition:.4s; 
			   -moz-transition:.4s; 
			   -webkit-transition:.4s; 
			   transition:.4s;}
a.type3:active {color: #fae591; text-decoration: none;}

a.type4:link {color: #1345bb; text-decoration: none; transition: all 0.4s ease-in-out;} 
a.type4:visited {color: #1345bb; text-decoration: none;}
a.type4:hover {color: #3667da; text-decoration: none; /* COMPLIMENTARY TO 358cf8 */
               -o-transition:.4s; 
			   -ms-transition:.4s; 
			   -moz-transition:.4s; 
			   -webkit-transition:.4s; 
			   transition:.4s;}
a.type4:active {color: #1345bb; text-decoration: none;}

a.nav:link {color: #1345bb; text-decoration: none; transition: all 0.4s ease-in-out;} 
a.nav:visited {color: #1345bb; text-decoration: none;}
a.nav:hover {color: #3667da; text-decoration: none; /* COMPLIMENTARY TO 358cf8 */
               -o-transition:.4s; 
			   -ms-transition:.4s; 
			   -moz-transition:.4s; 
			   -webkit-transition:.4s; 
			   transition:.4s;}
a.nav:active {text-decoration: none; margin-left: 20px; color: #bf1616; font-weight: bold;}

/* ACTIVE MENU ITEM */
#menuabout #navbarCollapse .menuabout,
#menuportfolio #navbarCollapse .menuportfolio,
#menuprojects #navbarCollapse .menuprojects,
#menucontact #navbarCollapse .menucontact {
 color: #004f8c;
 font-weight: bold;
 text-shadow: 0 0 3px #ffffff;
 border-bottom: 0 solid #004f8c;
 padding: 0;
 margin: 0;}

.clearfix:before,
.clearfix:after {
 content: " "; /* 1 */
 display: table;} /* 2 */

.clearfix:after {
 clear: both;}
 
.clear {
 clear: both;}
 
.diagnostic {
 /* background: url(../images/css-1200px.png), #C00; */
 width: 150px;
 height: 26px;
 border: 1px solid #FC0;
 margin: 20px auto 0 auto;
 float: none;}

/* .header, .footer{
 background: url(../images/dark-leather.png) repeat, linear-gradient(#C49150, #a77739);} */

.header{
 height: 75px;
 padding: 10px;
 color: #ffffff;
 border-bottom: 1px solid #004f8c;
 box-shadow: 0 0 5px #004f8c;}
 
#heading-left {
 width: 30%;
 height: auto;
 float: left;
 border: 0 solid #F90;
 text-align: left;
 padding: 0;
 margin: 0;}
 
#heading-right {
 width: 70%;
 height: auto;
 float: right;
 border: 0 solid #F90;
 text-align: right;
 padding: 0;
 margin: 0;}
  
.footer{
 min-height: 30px;
 padding: 0;
 margin: 20px 0 0 0;
 vertical-align: middle;
 border-top: 1px solid #004f8c;
 box-shadow: 0 0 5px #004f8c;
 width: 100%;
 color: #ffffff;}
 
#footing-left {
 width: 50%;
 height: auto;
 float: left;
 border: 0 solid #F00;
 text-align: left;
 vertical-align: middle;
 margin: 0;
 padding: 7px 0 0 10px;
 color: #ffffff;}
 
#footing-right {
 width: 50%;
 height: auto;
 float: right;
 border: 0 solid #F00;
 text-align: right;
 vertical-align: middle;
 margin: 0;
 padding: 7px 10px 0 0;}
  
.sidebar{
 background: #dbdfe5;}
  
.background1 {
 padding: 15px 10px 0 10px;
 resize: both;
 overflow: hidden;
 min-width: 100%;
 /* background: url("../images/keyboard.png") no-repeat left top, linear-gradient(#358cf8, #195fb6); */
 background-size: cover;
 height: 500px;}
 
.intro{
 max-width: 50%; 
 float: right;
 border: 0 solid #C30;
 text-align: right;
 font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
 font-size: .971875rem;
 line-height: 200%;
 color: #ffffff;}
 
.intro-left {
 width: 100%;
 /* min-height: 270px; */
 float: left;
 border: 0 solid #C30;
 text-align: center;
 overflow: hidden;
 /* background: url("../images/jason-small.png") no-repeat left top; */
 visibility: visible;
 margin: 0;
 padding: 0;}
  
.section{
 min-height: 300px;
 /* background: #dbdfe5; */
 border: 1px solid #dbdfe5;
 border-radius: 5px;
 padding: 0 15px 0 15px;
 margin: 0 0 15px 0;
 transition: all 0.4s ease-in-out;}
 
.section:hover {
 border: 1px solid #358CF8;
 box-shadow: 0 0 3px #666;
 -o-transition:.4s; 
 -ms-transition:.4s; 
 -moz-transition:.4s; 
 -webkit-transition:.4s; 
 transition:.4s;
 background-color: #f2f3f6;}
 
.col-right {
 text-align: center;}
 
.line-left {
 border-top: 1px solid #dbdfe5;
 border-left: 1px solid #dbdfe5;
 border-bottom: 1px solid #dbdfe5;
 border-top-left-radius: 6px;
 border-bottom-left-radius: 6px;
 background-color: rgba(255, 255, 255, .5);
 margin: 45px 0 0 0;}
 
.line-right {
 border-top: 1px solid #dbdfe5;
 border-right: 1px solid #dbdfe5;
 border-bottom: 1px solid #dbdfe5;
 border-top-right-radius: 6px;
 border-bottom-right-radius: 6px;
 background-color: rgba(255, 255, 255, .5);
 margin: 0 0 0 0;}
  
.bg-alt{
 /* background: #b4bac0; */
 border: 1px solid #dbdfe5;
 border-radius: 5px;
 margin: 0 15px 0 15px;}
		
/* - - - - - - - - - - - - BEGIN SVG LOGO MOUSEOVER - - - - - - - - - - - - - - */
.logo-highlight {
 fill: #004f8c;
 transition: all 0.6s ease-in-out;}

.logo-highlight:hover {
 fill: #ffffff;
 /* -o-svg-shadow: 0 0 10px #ffffff; 
 -ms-svg-shadow: 0 0 10px #ffffff; 
 -moz-svg-shadow: 0 0 10px #ffffff; 
 -webkit-svg-shadow: 0 0 10px #ffffff;
 svg-shadow: 0 0 10px #ffffff; */
 -o-transition:.1s; 
 -ms-transition:.1s; 
 -moz-transition:.1s; 
 -webkit-transition:.1s; 
 transition:.1s;}
 
.logo-line-highlight {
 stroke: #004f8c;
 stroke-width: 2; 
 stroke-linecap: round; 
 stroke-miterlimit: 10;}
 
/* - - - - - - - - - - - BEGIN IMAGES - - - - - - - - - - - - */
#logo-alignable {
 width: 118px;
 height: 25px;
 padding: 0;
 margin: 40px auto;
 float: none;
 text-align: center;
 display: block;}
 
#logo-mewe {
 width: 69px;
 height: 25px;
 padding: 0 0 0 0;
 margin: 40px auto;
 float: none;
 text-align: center;
 display: block;}

.profile-pic {
 width: 100px;
 height: 100px;
 border: 2px solid #195fb6;
 border-radius: 100px;
 float: none;
 display: inline-block;
 overflow: hidden;
 padding: 0;
 margin: 0;
 transition: all 0.1s ease-in-out;}
 
#jason {
 width: 100px;
 height: 100px;
 float: none;
 text-align: center;
 vertical-align: middle;
 display: inline-block;
 margin: 0 auto;
 padding: 0;}
 
#jason-small {
 width: 398px;
 height: 730px;
 float: none;
 text-align: center;
 vertical-align: middle;
 display: inline-block;
 margin: 0 auto;
 padding: 0;} 
 
#icon-web-development {
 width: 152px;
 height: 120px;
 display: block;
 float: none;
 text-align: center;
 margin: 15px auto 0 auto;
 padding: 0;}
 
#icon-responsive-design {
 width: 152px;
 height: 120px;
 display: block;
 float: none;
 text-align: center;
 margin: 15px auto 0 auto;
 padding: 0;}
 
#icon-wordpress {
 width: 152px;
 height: 120px;
 display: block;
 float: none;
 text-align: center;
 margin: 15px auto 0 auto;
 padding: 0;}
 
#icon-google-analytics {
 width: 152px;
 height: 120px;
 display: block;
 float: none;
 text-align: center;
 margin: 15px auto 0 auto;
 padding: 0;}
 
#icon-digital-illustration {
 width: 152px;
 height: 120px;
 display: block;
 float: none;
 text-align: center;
 margin: 15px auto 0 auto;
 padding: 0;}
 
#icon-print-design {
 width: 152px;
 height: 120px;
 display: block;
 float: none;
 text-align: center;
 margin: 15px auto 0 auto;
 padding: 0;}
 
/* - - - - - - - - - - - - - - - PROJECT IMAGES - - - - - - - - - - - - */
#bugtracker {
 max-width: 100%;
 height: auto;
 display: block;
 float: none;
 text-align: center;
 margin: 0 auto;
 padding: 0;}
 
#porschebuilder {
 max-width: 100%;
 height: auto;
 display: block;
 float: none;
 text-align: center;
 margin: 0 auto;
 padding: 0;}
 
#musicdatabase {
 max-width: 100%;
 height: auto;
 display: block;
 float: none;
 text-align: center;
 margin: 0 auto;
 padding: 0;}
 
#partsordering {
 max-width: 100%;
 height: auto;
 display: block;
 float: none;
 text-align: center;
 margin: 0 auto;
 padding: 0;}
 
#dragndrop {
 max-width: 100%;
 height: auto;
 display: block;
 float: none;
 text-align: center;
 margin: 0 auto;
 padding: 0;}
 
#textresizing {
 max-width: 100%;
 height: auto;
 display: block;
 float: none;
 text-align: center;
 margin: 0 auto;
 padding: 0;}
 
#pagetabs {
 max-width: 100%;
 height: auto;
 display: block;
 float: none;
 text-align: center;
 margin: 0 auto;
 padding: 0;}
 
#retouched {
 max-width: 100%;
 height: auto;
 display: block;
 float: none;
 text-align: center;
 margin: 0 auto;
 padding: 0;}
 
#javascript {
 max-width: 100%;
 height: auto;
 display: block;
 float: none;
 text-align: center;
 margin: 0 auto;
 padding: 0;}
 
/* - - - - - - - - - - - - - - - - END PROJECT IMAGES - - - - - - - - - - - - - - - - */
 
#resume {
 width: 154px;
 height: 200px;
 text-align: center;
 display: block;
 padding: 0;
 margin: 0 auto 30px auto;
 border: 1px solid #dbdfe5;}
 
#heal-yourself {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#sahaj-marg {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#production-city {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#huntington {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#white-fire {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#muirfield-company {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#landm {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#lafayette {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#pixels {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#ybravo {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#beetee-front {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#beetee-back {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#aucus-logo {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#oroville-city-logo {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#oroville-city-poster {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#rotary-newsletter {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#suzuki-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#yamaha-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#hornet-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#heron-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#c5-corvette-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 vertical-align: middle;
 display: inline-block;
 margin: 0 auto;
 padding: 0;}
 
#c6-corvette-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 vertical-align: middle;
 display: inline-block;
 margin: 0 auto;
 padding: 0;}
 
#cherokee-woman-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 vertical-align: middle;
 display: inline-block;
 margin: 0 auto;
 padding: 0;}

#tiger-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 vertical-align: middle;
 display: inline-block;
 margin: 0 auto;
 padding: 0;}
 
#leopardman-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 vertical-align: middle;
 display: inline-block;
 margin: 0 auto;
 padding: 0;}
 
#race1-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 vertical-align: middle;
 display: inline-block;
 margin: 0 auto;
 padding: 0;}
 
#race2-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 vertical-align: middle;
 display: inline-block;
 margin: 0 auto;
 padding: 0;}
 
#race3-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 vertical-align: middle;
 display: inline-block;
 margin: 0 auto;
 padding: 0;}
 
#mobile-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 vertical-align: middle;
 display: inline-block;
 margin: 0 auto;
 padding: 0;}
 
#tablet-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 vertical-align: middle;
 display: inline-block;
 margin: 0 auto;
 padding: 0;}
 
#desktop-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 vertical-align: middle;
 display: inline-block;
 margin: 0 auto;
 padding: 0;}
 
#ui1-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 vertical-align: middle;
 display: inline-block;
 margin: 0 auto;
 padding: 0;}
 
#ui2-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 vertical-align: middle;
 display: inline-block;
 margin: 0 auto;
 padding: 0;}
 
#prospera-small {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#sloparazzi-portfolio {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#candle-power-portfolio {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#sloparazzi-portfolio {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}

prospera-portfolio {
 width: 200px;
 height: 200px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
figcaption {
 font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
 font-size: .771875rem;
 text-align: center;
 margin: 5px 0 0 0;}
 
.project-item {
 max-width: 200px;
 height: 149px;
 display: block;}
 
#scream {
 width: 300px;
 height: 304px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
#scared {
 width: 297px;
 height: 374px;
 float: none;
 text-align: center;
 display: block;
 margin: 0 auto;
 padding: 0;}
 
.bigthumb {
 width: 200px;
 height: 150px;
 text-align: center;
 margin: 10px auto 20px auto;
 padding: 0;
 display: block;
 float: none;
 border: 1px solid #dbdfe5;
 border-radius: 4px;
 overflow: hidden;
 transition: all 0.4s ease-in-out;}

.bigthumb:hover {
 box-shadow: 0 0 3px #004f8c;
 -o-transition:.4s; 
 -ms-transition:.4s; 
 -moz-transition:.4s; 
 -webkit-transition:.4s; 
 transition:.4s;}
 
.number-wizard {
 width: 200px;
 height: 136px;
 float: none;
 text-align: center;
 display: block;
 margin: 20px auto;
 padding: 0;}
 
/* - - - - - - - - - - - BEGIN FONTS - - - - - - - - - - - - */
.homepage-intro {
 font-style: normal;
 font-weight: 800;
 font-size: 2.571875rem;
 font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 letter-spacing: 1px;
 text-align: center;
 text-shadow: 0 0 5px #004f8c;
 margin: 0 0 0 0;
 padding: 180px 0 10px 0;
 color: #ffffff;
 line-height: 150%;}
 
.centered {
 text-align: center;} 
 
.more-info {
 color: #f5c60b;
 text-shadow: 0 0 5px #606;
 margin-top: 40px;}

h3.right {
 text-align: right;
 color: #FC0;
 /* font-weight: 500; */}
 
h3.category {
 margin-top: 50px;}

h5.brief {
 text-overflow: ellipsis; /* will make [...] at the end */
 width: 100%; /* change to your preferences */
 overflow: hidden; /* older browsers */
 text-align: right;
 line-height: 140%;
 color: #333;
 text-shadow: 0 0 3px #96c2f9;}
 
h5.main {
 text-align: center;}
 
h6.logo {
 margin: 0 0 0 45px;
 font-size: 10px;
 color: #ffffff;
 text-align: left;}
 
h6.right {
 margin: 0;
 padding: 0 0 0 0;
 font-size: .75rem;}
 
h6.left {
 margin: 0;
 padding: 0 0 0 0;
 font-size: .75rem;
 color: #ffffff;}
 
.gap {
 margin: 20px 0 10px 0; 
 color: #358CF8; } 
 
.bottom-space {
 margin: 0 0 20px 0;}

.subheading {
 margin: 0 0 20px 0;
 padding: 0 0 0 20px;
 color: #2b51a0;}
 
.align-center {
 text-align: center;
 margin: 0 auto;
 padding: 0;
 float: none;}
 
.cols {
 -webkit-column-count: 2;
 -moz-column-count: 2;
 column-count: 2;
 -webkit-column-gap: 1em;
 -moz-column-gap: 1em;
 column-gap: 1em;}
 
.sub-spacing {
 margin: 10px 0 20px 0;
 padding: 0 0 0 20px;
 color: #666666;}
 
.big-space {
 margin: 0 0 0 0;}
 
.leadingmarg {
 line-height: 150%;
 margin: 0 0 20px 0;
 padding: 0 0 0 20px;
 color: #666666;}
 
.spaceleft {
 margin: 0 0 0 30px;}
 
.leading {
 line-height: 150%;
 color: #666666;}
 
.description {
 margin: -5px 0 10px 63px;
 color: #999999;}
 
/* FADE-IN EFFECT */
.fade-in-section {
 opacity: 0;
 transform: translateY(20vh);
 visibility: hidden;
 transition: opacity 0.6s ease-out, transform 1.2s ease-out;
 will-change: opacity, visibility;}
  
.fade-in-section.is-visible {
 opacity: 1;
 transform: none;
 visibility: visible;}
/* END FADE-IN EFFECT */

hr {
 border: none;
 border-top: 3px double #dbdfe5;
 color: #dbdfe5;
 overflow: visible;
 text-align: center;
 height: 5px;
 margin: 0 auto;
 float: none;}

hr:after {
 background: #ffffff; /* BACKGROUND COLOR FOR SIDE OF PAGE */
 content: '§';
 padding: 0 4px;
 position: relative;
 top: -13px;
 border: 1px solid #dbdfe5;}
 
hr.page {
 border: none;
 border-top: 3px double /* #dbdfe5 */;
 /* color: #dbdfe5; */
 overflow: visible;
 text-align: center;
 height: 5px;
 width: 94%;
 margin: 0 auto 20px auto;
 float: none;}

hr.page:after {
 background: #fff; /* BACKGROUND COLOR FOR TOP OF PAGE */
 /* content: '§'; 2020 203B 221E 22C6 25C8 */
 content: ' \25C8';
 padding: 0 4px;
 position: relative;
 top: -13px;}
 
ul.style1 {
 list-style: circle; 
 padding: 0 0 0 20px;}

li.style1 {
 font-style: normal;
 font-weight: 300;
 font-size: 1.171875rem;
 font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 letter-spacing: 1px;
 text-align: left;
 margin: 0 0 0 0;
 padding: 0 0 10px 0;
 color: #666666;
 line-height: 150%;
 /* text-shadow: 1px 1px 3px #000000; */}
 
/* - - - - - - - - - - - - - - - - - - - - - - - PAGE BACKGROUNDS - - - - - - - - - - - -  - - - */
.play {
 /* background: url(../images/forest.png) repeat-y top center fixed; */
 -webkit-background-size: 100% auto;
 -moz-background-size: 100% auto;
 -o-background-size: 100% auto;
 background-size: 100% auto;
 background-repeat: repeat-y;
 background-color: #ffffff;}

 .play {
/* background-image: url('../images/beach4.png');*/
 background-size: 100%;
 background-repeat: no-repeat;
 background-position: top;
 background-attachment: fixed;} */
 
.work {
 /* background-image: url('../images/meadow.png');*/
 background-size: 100%;
 background-repeat: no-repeat;
 background-position: top;
 background-attachment: fixed;}
 
.desert {
 /* background-image: url('../images/desert.png');*/
 background-size: 100%;
 background-repeat: no-repeat;
 background-position: top;
 background-attachment: fixed;}
 
.bg-about {
 /* background-image: url('../images/mountains.png');*/
 background-size: 100%;
 background-repeat: no-repeat;
 background-position: top;
 background-attachment: fixed;}
 
.bg-portfolio {
 /* background-image: url('../images/ocean2.png'); */
 background-size: 100%;
 background-repeat: no-repeat;
 background-position: top;
 background-attachment: fixed;}
 
/* - - - - - - - - - - - - - - - - - - - - - - -BEGIN PORTFOLIO CONTAINERS - - - - - - - - - - - */
.portfolio {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 margin-bottom: 20px;
 padding: 0 0 0 20px;
 justify-content: left;}
  
.item {
 font-size: 2rem;
 line-height: 1;
 text-align: center;
 background: #ffffff;
 border: 1px solid #dbdfe5;
 border-radius: 4px;
 color: #457fdc;
 margin: 6px;
 overflow: hidden;
 transition: all 0.4s ease-in-out;}
  
.item:hover {
 border: 1px solid #358CF8;
 box-shadow: 0 0 3px #666;
 -o-transition:.4s; 
 -ms-transition:.4s; 
 -moz-transition:.4s; 
 -webkit-transition:.4s; 
 transition:.4s;
 background-color: #f2f3f6;}
 
.display-pic {
 width: 150px;
 height: 150px;}
 
.banner-pic {
 width: 300px;
 height: 100px;}
  
/* - - - - - - - - - - - - - - - - - - - - - - -BEGIN PROJECT CONTAINERS - - - - - - - - - - - */
.project{
 min-height: 380px;
 /* background-image: url('../projects/javascript/images/blend.png'); */
 background-repeat: repeat-y;
 background-position: top;
 background-attachment: fixed;
 /* background: #ffffff; */
 border: 1px solid #dbdfe5;
 border-radius: 5px;
 padding: 0 7px 0 7px;
 margin: 7px;
 transition: all 0.4s ease-in-out;
 text-align: center;}
 
.project:hover {
 border: 1px solid #358CF8;
 border-radius: 20px;
 box-shadow: 0 0 3px #666;
 -o-transition:.4s; 
 -ms-transition:.4s; 
 -moz-transition:.4s; 
 -webkit-transition:.4s; 
 transition:.4s;
 background-color: #f2f3f6;}
 
.example {
 font-size: 1.5rem;
 line-height: 1;
 text-align: center;
 /* background: #dfeffd; */
 border: 1px solid #dbdfe5;
 border-radius: 4px;
 color: #457fdc;
 float: none;
 margin: 7px auto 0 auto;
 overflow: hidden;
 padding: 0;
 max-width: 200px;
 height: 149px;}
 
/* -------------- BEGIN FORM CONTROL ------------ */  
.form-corners {
 border: 1px solid #999999;
 border-radius: 13px;
 -moz-border-radius: 13px;
 -webkit-border-radius: 13px;
 -khtml-border-radius: 13px;
 height: 30px;
 width: 75%;
 clear: both;
 margin: 0 auto 30px auto;
 padding: 0 0 0 10px;
 float: none;
 display: block;
 font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
 font-size: .971875rem;
 color: #e7e3e3;}
 
.text-area {
 border: 1px solid #999999;
 border-radius: 13px;
 -moz-border-radius: 13px;
 -webkit-border-radius: 13px;
 -khtml-border-radius: 13px;
 width: 75%;
 margin: 30px auto 30px auto;
 padding: 2px 0 0 10px;
 float: none;
 font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
 font-size: .971875rem;
 color: #e7e3e3;
 display: block;
 clear: both;}
 
label {
 font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
 font-size: .971875rem;
 text-align: center;
 margin: 0 0 20px 0;
 display: block;
 color: #333;}
 
input[type=text], [type=url], [type=tel], [type=email], textarea {
 -webkit-transition: all 0.30s ease-in-out;
 -moz-transition: all 0.30s ease-in-out;
 -ms-transition: all 0.30s ease-in-out;
 -o-transition: all 0.30s ease-in-out;
 transition: all 0.30s ease-in-out;
 outline: none;
 background-color: #004f8c; /* - - - - - - - -BACKGROUND COLOR OF TEXT INPUTS - - - - - - - - - - */
 border: 1px solid #dbdfe5;}
 
input[type=text]:focus, [type=url]:focus, [type=tel]:focus, [type=email]:focus, textarea:focus {
 box-shadow: 0 0 5px #5cadfd;
 border: 1px solid #004f8c;
 background-color: #dbdfe5;
 color: #0077b5;}
 
.submit-button {
 border: 0 solid #3a7b3d;
 border-radius: 15px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 -khtml-border-radius: 15px;
 box-shadow: 0 0 5px #338dfd;
 position: relative;
 float: none;
 width: 75%;
 height: 30px;
 background-color: #358cf8; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#358cf8), to(#0f4a94));
 background: -webkit-linear-gradient(top, #358cf8, #0f4a94);
 background: -moz-linear-gradient(top, #358cf8, #0f4a94);
 background: -ms-linear-gradient(top, #358cf8, #0f4a94);
 background: -o-linear-gradient(top, #358cf8, #0f4a94);
 display: block;
 text-align: center;
 font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
 font-style: normal;
 font-weight: normal;
 font-size: 14pt;
 color: #e7e3e3;
 letter-spacing: 0;
 padding: 0 0 10px 0;
 margin: 0 auto;
 /* clear: both; */
 transition: all 0.4s ease-in-out;}
 
.submit-button:hover {
 background-color: #358cf8; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#358cf8), to(#0f4a94));
 background: -webkit-linear-gradient(top, #358cf8, #0f4a94);
 background: -moz-linear-gradient(top, #358cf8, #0f4a94);
 background: -ms-linear-gradient(top, #358cf8, #0f4a94);
 background: -o-linear-gradient(top, #358cf8, #0f4a94);
 -webkit-transition: background-color 1000ms linear;
 -ms-transition: background-color 1000ms linear;
 transition: background-color 1000ms linear;
 box-shadow: 0 0 10px #358cf8;
 -o-transition:.4s; 
 -ms-transition:.4s; 
 -moz-transition:.4s; 
 -webkit-transition:.4s; 
 transition:.4s;
 text-shadow: 0 0 3px #ffffff;}
 
.submit-button:active {
 background-color: #7ac142; 
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7ac142), to(#588b2f));
 background: -webkit-linear-gradient(top, #7ac142, #588b2f);
 background: -moz-linear-gradient(top, #7ac142, #588b2f);
 background: -ms-linear-gradient(top, #7ac142, #588b2f);
 background: -o-linear-gradient(top, #7ac142, #588b2f);
 -webkit-transition: background-color 1000ms linear;
 -ms-transition: background-color 1000ms linear;
 transition: background-color 1000ms linear;
 box-shadow: 0 0 10px #7ac142;
 -o-transition:.4s; 
 -ms-transition:.4s; 
 -moz-transition:.4s; 
 -webkit-transition:.4s; 
 transition:.4s;
 text-shadow: 0 0 3px #000000;}
 
/* reCAPTCHA CENTERING FIX */
.validate {
 text-align: center;
 margin: 20px auto 20px auto;
 width: 50%;
 display: block;
 border: 0 solid #F09;
 float: none;}
 
#validate-container {
 border: 0 solid #ff0000; 
 text-align: center; 
 margin: 0 0 40px 0;
 padding: 0 0 0 30px;}
 
#form-button {
 border: 0 solid #ff0000;
 text-align: center;
 padding: 0;
 margin: 0;}
 
.form-items {
 display: inline-block; 
 border: 0 solid #C03; 
 text-align: center;}
 
/* - - - - - - - - - ANIMATED CHECKBOXES - - - - - - - - - - - */
.chickyboxes input[type="checkbox"] { display: none; }
.chickyboxes input[type="checkbox"] + label {
 display: block;
 position: relative;
 padding-left: 0;
 margin-bottom: 0;
 font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New";
 font-size: .971875rem;
 color: #004f8c; /* TEXT COLOR */
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 border: 0 solid #0CC;}
  
.chickyboxes input[type="checkbox"] + label:last-child { margin-bottom: 0;}

.chickyboxes input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  border: 2px solid #004f8c; /* CHECKBOX COLOR */
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;}
  
.chickyboxes input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border: 2px solid #C49150; /* CHECK COLOR */}
  
.bottom-gap {
 margin-bottom: 30px;}
 
/* BACK TO TOP STUFF */
.to-top{
 color: #dbdfe5;
 padding-top: 1.8em;
 display: inline-block;/* or block */
 position: relative;
 border-color: #dbdfe5;
 text-decoration: none;
 transition: all .3s ease-out;
 margin-top: 40px;}
 
.to-top:before{
 content: '▲';
 font-size: .9em;
 position: absolute;
 top: 0;
 left: 50%;
 margin-left: -.7em;
 border: solid .13em #dbdfe5;
 border-radius: 10em;
 width: 1.4em;
 height: 1.4em;
 line-height: 1.3em;
 border-color: inherit;
 transition: transform .4s ease-in;}
 
.to-top:hover{
 color: #004f8c;
 border-color: #004f8c;}
 
.to-top:hover:before{
 transform: rotate(360deg);}
 
#narrow {
 padding: 0;
 margin: 0;
 text-align: right;
 display: block;}