<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">
body { background:#ecedef; font-family: Verdana, Arial, Sans-Serif; font-weight: normal; font-size: 12px; padding:0; margin:0;  font-family: 'Enriqueta', serif; }

.mc { max-width:1140px;  color: #000; padding:15px; margin:0 auto;}

a { text-decoration:none; }
a:hover { text-decoration:underline; }

a:link {color:#999; font:Verdana,Arial,Helvetica,sans-serif;}
a:visited {color:#999; font:Verdana,Arial,Helvetica,sans-serif;}
a:hover {color:#990000; font:Verdana,Arial,Helvetica,sans-serif; text-decoration:none;}
a:active {color:#ccc; font:Verdana,Arial,Helvetica,sans-serif;}


.intro { font-family: 'Enriqueta', serif; line-height: 1.5; font-size: 40px; margin:15px 0 25px 0px; word-wrap: break-word;}

.profile-intro{font-family: 'Enriqueta', serif; line-height: 1.5; font-size: 30px; margin:15px 0 15px 15px; word-wrap: break-word; text-align: left; color:#fff;}

h1, h2, h3, h4 { font-weight:normal; }
h1 { font-family: 'Enriqueta', serif; color: #003365; font-size: 40px; margin-top:15px; margin-bottom:15px; }
h2 { font-family: 'Karla', sans-serif; color: #003365; font-size: 24px; text-transform:uppercase; line-height:95%; margin-top:0px; }
h3 { font-family: 'Enriqueta', serif; color:#000; font-size: 24px; margin:6px 0px 5px; line-height:98%; }
h4 { font-family: 'Enriqueta', serif; color:#999; font-size: 16px; margin:5px 0px 30px; line-height:98%; }

.btn { border: 1px solid #656565; padding: 5px; }

#sectHero { text-align:left; margin-bottom: 25px; }
.columnA { float: left; width: 48%; margin-right:0px; }
.columnB { float: right; width: 48%; margin-left:0px; }

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Main Body Content */

.mar15 { margin:15px; }
.pad15 { padding:15px; }

#header-nav a {
font-family: Helvetica,Lato,Arial,serif;
font-size: 14px;
font-weight: bolder;
line-height: 19px;
color: #000033;
box-shadow: none;
padding: 5px 10px 5px 10px;
text-decoration: none;
background: #fff;
}


input.button:hover { background:#fff; color:#09C; }
textarea:focus, input:focus { border: 1px solid #09C; }

.logo-text{
  padding: 0px 10px 5px;
border: 1px solid #003365;
border-radius: 5px;
display: inline-block;
font-size: 32px;
}


.logo{

  display: block;
  position: fixed;
  top: 15px;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}


/* Hamburger menu */

#menuToggle
{
  display: block;
  position: fixed;
  top: 52px;
  right: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #999;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #999;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  opacity: 1;
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 0;
  /*padding: 50px;*/
  padding:50px 100px;
  padding-top: 125px;
  /*right: -100px;*/
  right: -50px;
  
  background-color: rgba(245, 245, 245, 0.98);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
  font-family: 'Enriqueta', serif;
}

/*
 * And let's fade it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: scale(1.0, 1.0);
  opacity: 1;
}

/* end */

/* project internal page style code */

.clearfix{
  clear:both;
}

.page-header-img{
   margin: 0;
   padding: 0;
}

.project-details{
  background-color: #435c7e;
  padding: 20px;
}

.left-div{
   float: left;
   width: 48%;
   padding: 0 5px 0 5px;
}

.right-div{
   float: right;
   width: 48%;
   padding: 0 5px 0 5px;
}


.home-profile-main-div{
  margin: auto;
  width: 50%;
  padding: 10px;
}

.home-profile-column {
  float: left;
  width: 40%;
  padding: 5px;
}

.column-text {
  position: relative;
  top:30px;
}


.project-details h4 {
    font-family: 'Karla', serif;
    color:#fa635f;
    font-size: 16px;
    line-height: 1.7em;
    margin: 0;
}


.project-details h3 {
    font-family: 'Enriqueta', serif;
    color: #fff;
    font-size: 20px;
    line-height: 1.7em;
    margin: 0;
}

.btndefault{

  border-style: solid;
  margin: 0;
  margin-right: 0px;
  -webkit-appearance: none;
  outline: 0;
  border-width: 2px;
  font-size: 16px;
  display: inline-block;
  text-align: center;
  padding: 10px 15px 10px 15px;
  
}


.btndefault-home{

  border-style: solid;
  margin: 0;
  margin-right: 0px;
  -webkit-appearance: none;
  outline: 0;
  border-width: 2px;
  font-size: 16px;
  display: inline-block;
  text-align: center;
  padding: 10px 15px 10px 15px;
  
}

.btndefault {
  color:#fff !important;
}


.btndefault:hover{
  color:#fa635f!important;
}


.btndefault-home {
  color:#fa635f!important;
}


.btndefault-home:hover{
  color:#435c7e!important;
}


.prblm-statement-text{
   font-size:20px!important;
}

.content-details{
  padding: 20px;
}

.img-div{
  padding: 30px 0px;
}

.content-details p{
  font-family: 'Enriqueta', serif;
  font-size: 15px;
  line-height: 1.7em;
  text-align: justify;
}


.research-section p{
   
  font-family: 'Enriqueta', serif;
  font-size: 16px;
  line-height: 1.7em;
  text-align: left;
}


.research-section img{
  min-height: 41px;
}


.project-goals-section p{
  font-family: 'Enriqueta', serif;
  font-size: 16px;
  line-height: 1.7em;
  text-align: left;
}

.content-details ul {
  padding: 10px 0;
  font-size: 13px;
  line-height: 1.7em;
  font-family: 'Enriqueta', serif;
  margin: 0 15px;

}


.content-details h3 { font-family: 'Enriqueta', serif; color:#003365; font-size: 24px; margin:5px 0px 5px; line-height:98%; }
.content-details h4 { font-family: 'Karla', serif; color:#fa635f; font-size: 16px; margin:5px 0px 15px; line-height:98%; }

.customer-need-title{
    font-family: 'Enriqueta', serif;
    font-size: 18px !important;
    line-height: 1.3em !important;
    font-style: italic;
    color: #003365;
}

.experience-title{
    font-family: 'Enriqueta', serif;
    font-size: 18px !important;
    line-height: 1.3em !important;
    color:#fa635f;
    padding: 0
    margin:0;
    text-align: left!important;
}


.experience-year{

    font-family: 'Enriqueta', serif;
    font-size: 18px !important;
    line-height: 1.3em !important;
    color: #003365;
    padding: 0
    margin:0;
}


.project-next{
  background-color: #435c7e;
  padding: 10px;
  text-align: center;

}


.project-next h3 { font-family: 'Enriqueta', serif; color:#fff; font-size: 24px; margin:10px 0px 10px; line-height:98%; }
.project-next h4 { font-family: 'Enriqueta', serif; color:#fa635f; font-size: 15px; margin:10px 0px 30px; line-height:98%; }



.align-middle{
  vertical-align: middle;
  padding-right: 10px;
}


.line {
    width: 50px;
    height: 4px;
    background: #fa635f;
    margin: 20px 0 10px;
    clear: both;
}

.bottom-border {
   border-bottom: 1px solid #fa635f;
}

.profile-header-img{

  background-image: url(images/profile/jb-profile-hero-1440x550.jpg);
  background-size: cover;
  background-position: top center;
  background-attachment: scroll;
  background-color: transparent;
  min-height: 500px;
}

.content-text-wrapper{
  width: 50%;
  max-width: 50%;
  position: absolute;
  right: 50%;        
  text-align: center;
  top: 35%;        

}

#vidbox {
    position: fixed;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
}

#vid{
  position: fixed;
  z-index: 3;
  top: 26%;
  left: 28%;
  
}

#vidtoggle {
  border-width: 2px;
 font-size: 16px;
 display: inline-block;
 text-align: center;
 padding: 10px 15px 10px 15px;
 border-style: solid;
  cursor: pointer;
  color:#fa635f;
}

iframe, object, embed {
    max-width: 100%;
}

.contact-section a {
  color: #000;
}

.contact-section a:hover {
  color: #fa635f;
}

/* End */



/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
  //CSS
  
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  //CSS

  .left-div{
   float: left;
   width: 45%;
   padding: 0 5px 0 5px;
}

.right-div{
   float: right;
   width: 45%;
   padding: 0 5px 0 5px;
}
  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
  .intro {  margin:15px 0 75px 0px; word-wrap: break-word;}

  .content-text-wrapper{
    right: 48%;        
    top: 20%;        
  }

  .left-div{
   float: left;
   width: 45%;
   padding: 0 5px 0 5px;
}

.right-div{
   float: right;
   width: 45%;
   padding: 0 5px 0 5px;
}

.home-profile-main-div{

  margin: auto;
  width: 70%;
  
}
  
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
  .intro {  margin:15px 0 75px 0px; word-wrap: break-word;}

  .content-text-wrapper{
    right: 48%;        
    top: 30%;        
  }

  .left-div{
   float: left;
   width: 45%;
   padding: 0 5px 0 5px;
}

.right-div{
   float: right;
   width: 45%;
   padding: 0 5px 0 5px;
}

.home-profile-main-div{

  margin: auto;
  width: 70%;
  
}

  
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
 .mc { padding:10px; }
  .intro { font-family: 'Enriqueta', serif; line-height: 1.3; font-size: 34px; margin:30px 0 25px 0px; word-wrap: break-word;}

  #menuToggle{
    right: 50px;
  }

#menu{width: 350px; padding:50px 100px;  padding-top: 125px; right: -100px; background-color: rgba(245, 245, 245, 1);}


.project-details .left-div{
   float: none;
   width: 100%;
   margin-bottom: 30px;
  }

  .left-div{
   float: none;
   width: 100%;
  }

.right-div{
   float: none;
   width: 100%;
 }


 .home-profile-column {
   float: none;
   width: 100%;
   padding: 0;
}

.column-text {
  
  top:0px;
}

.project-details{
  padding: 5px;
} 

.project-next{
    padding: 5px;
 }

.content-details{
  padding: 5px;
}

.prblm-statement-text{
   font-size:18px!important;
}


.content-text-wrapper{
  right: 48%;        
  top: 50%;        
}

.profile-intro{ font-size: 23px; margin:5px 0 15px 0px;}

.logo{
  top: 15px;
  left: 10px;
}


#vid{
  top: 30%;
  left:2%;
}


}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  
  .columnA { float: none; width: 100%; margin:0px; }
  .columnB { float: none; width: 100%; margin:0px; }

  .mc { padding:10px; }

  .intro { font-family: 'Enriqueta', serif; line-height: 1.3; font-size: 34px; margin:30px 0 25px 0px; word-wrap: break-word;}

  #menuToggle{
  	right: 20px;
  }

  #menu{width: 350px; padding:50px 100px;  padding-top: 125px; right: -100px; background-color: rgba(245, 245, 245, 1);}

  .project-details .left-div{
   float: none;
   width: 100%;
   margin-bottom: 30px;
  }

  .left-div{
   float: none;
   width: 100%;
  }

 .right-div{
   float: none;
   width: 100%;
 }

 .home-profile-column {
   float: none;
   width: 100%;
   padding: 0;
}

.column-text {
  top:0px;
}

.column-text h1{
   margin: 5px 0 15px 0;
}


.project-details{
  padding: 5px;
} 

.project-next{
    padding: 5px;
 }

.content-details{
  padding: 5px;
}


.prblm-statement-text{
   font-size:18px!important;
}


.content-text-wrapper{
  right: 48%;        
  top: 17%;        
}

.profile-intro{ font-size: 23px; margin:5px 0 15px 0px;}

.logo{
  top: 15px;
  left: 10px;
}


#vid{
  top: 30%;
  left:2%;
}
  
}



</pre></body></html>