/*
 * Reproduction in whole or part in any form or medium without express written
 * permission is prohibited.
 * Copyright Nathan Fettinger 2011-2017.
*/

body, 
html
  {
  width:              100%;
  height:             100%;
  }

body
  {
  background-color:   #0D0C0D;
  text-decoration:    none;
  font-family:        'Lato', sans-serif;
  font-weight:        lighter;
  font-size:          15px;
  color:              #FFF0A5;
  line-height:        25px;
  float:              left;
  overflow-x:         hidden;
  }

  
/*---------------------------------------------------------------------*/
/*  PRELOADER BAR
/*---------------------------------------------------------------------*/
#jpreOverlay
  {
  background-color:   #0D0C0D;
  }

#jpreLoader
  {
  width:              100%;
  height:             5px;
  }

#jpreBar
  {
  background-color:   #1269EB;
  }

#jprePercentage,
#qLpercentage
  {
  color:              #1038DA;
  text-align:         center;
  position:           absolute;
  font-size:          24px;
  height:             30px;
  width:              100%;
  margin-top:         40px;
  }

  
/*---------------------------------------------------------------------*/
/*  PAGE HERO
/*---------------------------------------------------------------------*/
header.hero
  {
  display:            table;
  position:           relative;
  width:              100%;
  height:             100%;
  }

  /* Leave room for compressed menu bar/button */
  @media( max-width: 899px )
    {
    header.hero
      {
      height:         calc(100% - 65px);
      margin-top:     65px;
      }
    }
    
  /* Menu Bar, bottom of page */
  @media( min-width: 900px )
    {
    header.hero
      {
      height:         calc(100% - 65px);
      margin-top:     0px;
      }
    }

/* Set opacity of hero */
header.hero:before
  {
  position:           absolute;
  content:            '';
  z-index:            2;
  width:              100%;
  height:             100%;
  background:         rgba(0, 0, 0, 0.25);
  }

/* Hero Image */
header.hero .hero-background
  {
  position:           absolute;
  z-index:            1;
  width:              100%;
  height:             100%;
  background-repeat:  no-repeat;
  background-position:0% bottom;
  background-size:    cover;
  -moz-background-size: cover;
  -o-background-size:   cover;
  -webkit-background-size: cover;
  visibility: hidden;
  }
  
  #Hero_0.hero-background
  {
  background-image:   url('../Images/garmin_desk.jpg');
  visibility: visible;
  }
  
  #Hero_1.hero-background
  {
  background-image:   url('../Images/garmin_cockpit.jpg');
  }
  
  #Hero_2.hero-background
  {
  background-image:   url('../Images/mtu_books.jpg');
  }
  
.parallax
  {
  position:           fixed;
  z-index:            -1;
  width:              100%;
  height:             100%;
  background-attachment: fixed;
  top:                0px;
  }
  
  /* Turn off parallax scrolling for tablets and phones. Increase/decrease the pixels if needed */
  /* @media only screen and (max-device-width: 1024px)
    {
    .parallax
      {
      background-attachment: scroll;
      }
    } */

/* Hero Image Overlay (dots) */
header.hero .overlay
  {
  position:           absolute;
  z-index:            3;
  width:              100%;
  height:             100%;
  background-image:   url('../Images/bg-pattern.png');
  background-repeat:  repeat;
  }

/* Hero Text */
header.hero .hero-body
  {
  position:           relative;
  z-index:            4;
  display:            table-cell;
  vertical-align:     middle;
  padding:            0px 30px;
  }

/* Hero Text Color */
header.hero .hero-body .hero-text
  {
  color:              rgba(255, 255, 255, 0.9);
  }

/* Hero Name Text */
header.hero .hero-body .hero-text h1.name
  {
  font-size:          32px;
  font-weight:        lighter;
  letter-spacing:    -3px;
  margin:             0px;
  }
  
/* Hero Title Text */
header.hero .hero-body .hero-text h1.title
  {
  font-size:          34px;
  font-weight:        700;
  letter-spacing:    -2px;
  margin:             0px;
  }
  
/* Hero Description Text */
header.hero .hero-body .hero-text h1.desc
  {
  font-size:          15px;
  margin:             5px;
  }
  
/* Hero Description Cursor */
header.hero .hero-body .hero-text h1 > span.cursor
  {
  position:           relative;
  }
  
/* Hero Description Cursor */
header.hero .hero-body .hero-text h1 > span.cursor:before
  {
  position:           absolute;
  top:                75%;
  left:               5px;
  content:            '';
  width:              2px;
  height:             18px;
  margin-top:        -12px;
  background-color:   #FFFFFF;
  animation-name:     blinker;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(1,0,0,1);
  animation-iteration-count: infinite;
  -webkit-animation-name: blinker;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(1,0,0,1);
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: blinker;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: cubic-bezier(1,0,0,1);
  -moz-animation-iteration-count: infinite;
  }

  /* Resize Hero Text for Tablets */
  @media (min-width: 600px)
    {
    header.hero .hero-body .hero-text h1.name
      {
      font-size:      36px;
      }
    header.hero .hero-body .hero-text h1.title
      {
      font-size:      38px;
      }
    header.hero .hero-body .hero-text h1.desc
      {
      font-size:      18px;
      }
    header.hero .hero-body .hero-text h1 > span.cursor:before
      {
      left:           7px;
      width:          3px;
      height:         21px;
      margin-top:    -16px;
      }
    }
    
  /* Resize Hero Text for Computers */
  @media (min-width: 768px)
    {
      header.hero .hero-body .hero-text h1.name
        {
        font-size:    48px;
        }
    header.hero .hero-body .hero-text h1.title
      {
      font-size:      50px;
      }
    header.hero .hero-body .hero-text h1.desc
      {
      font-size:      24px;
      margin:         10px;
      }
    header.hero .hero-body .hero-text h1 > span.cursor:before
      {
      left:           8px;
      width:          3px;
      height:         27px;
      margin-top:    -21px;
      }
    }

  /* Cursor Animation */
  @keyframes blinker
    {
    from 
      {
      opacity:        1.0;
      }
    to
      {
      opacity:        0.0;
      }
    }
  @-moz-keyframes blinker
    {
    0%
      {
      opacity:        1.0;
      }
    50%
      {
      opacity:        0.0;
      }
    100%
      {
      opacity:        1.0;
      }
    }

  @-webkit-keyframes blinker
    {
    0%
      {
      opacity:        1.0;
      }
    50%
      {
      opacity:        0.0;
      }
    100%
      {
      opacity:        1.0;
      }
    }

/* Learn More Button */
header.hero .hero-body .hero-text .learn-more
  {
  margin-top:         30px;
  }

/* Button generic */
.btn.btn-custom
  {
  background-color:   #1269EB;
  font-family:        'Raleway', sans-serif;
  font-weight:        700;
  text-transform:     uppercase;
  letter-spacing:     1px;
  color:              #FFFFFF;
  border-radius:      3px;
  box-shadow:         0 3px 0 #1038DA;
  }
  
  
/*---------------------------------------------------------------------*/
/*  NAVIGATION BAR
/*---------------------------------------------------------------------*/
.navbar.navbar-fixed-top
  {
  margin:             0;
  border:             0;
  height:             66px;
  background-color:   #171717;
  border-bottom:      1px solid #282428;
  }

  /* Display Nav Bar if screen wide enough */
  @media (min-width: 851px)
  {
  .navbar.navbar-fixed-top
    {
    position:         relative;
    }
  }

  .navbar.navbar-fixed-top .navbar-container
    {
    background-color: #171717;
    }

  .navbar.navbar-fixed-top .navbar-brand
    {
    font-family:      'Raleway', sans-serif;
    font-size:        28px;
    font-weight:      700;
    color:            #A1A1A1;
    text-transform:   uppercase;
    letter-spacing:   0.1em;
    height:           65px;
    line-height:      65px;
    padding-top:      0px;
    padding-bottom:   0px;
    }

  /* Navigation Dropdown Attributes */
  .navbar.navbar-fixed-top .navbar-nav > li > a
    {
    padding-top:      0px;
    height:           40px;
    line-height:      40px;
    font-family:      'Raleway', sans-serif;
    font-size:        14px;
    font-weight:      700;
    color:            #A1A1A1;
    text-transform:   uppercase;
    letter-spacing:   2px;
    }

    @media (min-width: 851px) {
      .navbar.navbar-fixed-top .navbar-nav > li > a
        {
        height:       65px;
        line-height:  65px;
        }
    }

  .navbar.navbar-fixed-top .navbar-nav > li > a:hover
    {
    background-color: #171717;
    color:            #FFFFFF;
    }

  .navbar.navbar-fixed-top .navbar-nav > li > a:focus
    {
    background-color: #171717;
    color:            #A1A1A1;
    }

  .navbar.navbar-fixed-top .navbar-nav > li.active > a,
  .navbar.navbar-fixed-top .navbar-nav > li.active > a:hover,
  .navbar.navbar-fixed-top .navbar-nav > li.active > a:focus
    {
    background-color: #171717;
    color:            #1269EB;
    }

  .navbar.navbar-fixed-top .navbar-nav > li.dropdown > a:hover
    {
    color:            #FFFFFF;
    }

  .navbar.navbar-fixed-top .navbar-nav > li.dropdown.open > a
    {
    background-color: #171717;
    color:            #FFFFFF;
    }

  .navbar.navbar-fixed-top .navbar-nav > li.dropdown.open > a:focus
    {
    background-color: #171717;
    }

  .navbar.navbar-fixed-top .navbar-nav > li.dropdown.active > a,
  .navbar.navbar-fixed-top .navbar-nav > li.dropdown.active > a:hover,
  .navbar.navbar-fixed-top .navbar-nav > li.dropdown.active.open > a,
  .navbar.navbar-fixed-top .navbar-nav > li.dropdown.active.open > a:hover
    {
    color:            #1269EB;
    }

  .navbar.navbar-fixed-top .navbar-nav .dropdown-menu
    {
    min-width:        180px;
    padding:          10px 0px;
    background-color: #171717;
    }

  @media (max-width: 850px)
    {
    .navbar.navbar-fixed-top .navbar-nav .dropdown-menu
      {
      padding-top:    0px;
      }
    }

  /* Navigation Bar Button Attributes */
  .navbar.navbar-fixed-top .navbar-nav .dropdown-menu > li a
    {
    height:           35px;
    line-height:      35px;
    font-family:      'Raleway', sans-serif;
    font-size:        14px;
    font-weight:      700;
    color:            #A1A1A1;
    text-transform:   uppercase;
    letter-spacing:   2px;
    }

  .navbar.navbar-fixed-top .navbar-nav .dropdown-menu > li a:hover
    {
    background-color: #171717;
    color:            #FFFFFF;
    }

  .navbar.navbar-fixed-top .navbar-nav .dropdown-menu > li a:focus
    {
    background-color: #171717;
    color:            #A1A1A1;
    }

  .navbar.navbar-fixed-top .navbar-nav .dropdown-menu > li.active a,
  .navbar.navbar-fixed-top .navbar-nav .dropdown-menu > li.active a:hover,
  .navbar.navbar-fixed-top .navbar-nav .dropdown-menu > li.active a:focus
    {
    color:            #1269EB;
    background-color: #171717;
    }


  .navbar.navbar-fixed-top .navbar-nav .caret
    {
    margin-top:      -4px;
    }

  .navbar.navbar-fixed-top .navbar-toggle
    {
    background-color: #1269EB;
    border-radius:    3px;
    margin-top:       13px;
    margin-left:      15px;
    float:            left;
    }

  .navbar.navbar-fixed-top .navbar-toggle .icon-bar
    {
    background-color: #FFFFFF;
    }

  .navbar.navbar-fixed-top .navbar-collapse
    {
    border:           0;
    }

  @media (max-width: 850px)
    {
    .navbar.navbar-fixed-top .navbar-collapse
      {
      border-bottom:  1px solid #282428;
      }
    }

    @media (min-width: 851px)
      {
      .navbar.navbar-fixed-top.center-menu .navbar-nav
        {
        float:        none;
        text-align:   center;
        }
      }

    @media (min-width: 851px)
      {
      .navbar.navbar-fixed-top.center-menu .navbar-nav > li
        {
        float:        none;
        display:      inline-block;
        }
      }


/*---------------------------------------------------------------------*/
/*  Section Parameters
/*---------------------------------------------------------------------*/
.uppercase
  {
  text-transform:     uppercase;
  }

.section
  {
padding-top:          50px;
  background-color:   #101010;
  }
  
.section-title
  {
  margin-bottom:      20px;
  font-size:          40px; 
  letter-spacing:     1px;
  }
  
.name-first
{
    text-transform:   uppercase;
    font-size:        30px;
    color:            #FFFFCC;
    margin:           0px;
}

.name-last
  {
  text-transform:     uppercase;
  font-size:          30px;
  color:              #2CBDD8;
  margin:             0px;
  }

.section.section-wrapper
  {
  position:           relative;
  }

.section.section-wrapper > .section-content
  {
  margin-right:       auto;
  margin-left:        auto;
  padding-left:       15px;
  padding-right:      15px;
  }

  @media (min-width: 768px)
    {
    .section.section-wrapper > .section-content
      {
      width:          750px;
      }
    }

  @media (min-width: 992px)
    {
    .section.section-wrapper > .section-content
      {
      width:          970px;
      }
  }

  @media (min-width: 1200px)
    {
    .section.section-wrapper > .section-content
      {
      width:          1170px;
      }
  }

.pp-wrapper
  {
  position:           relative;
  }

.pp-wrapper .profile-picture.style-one
  {
  position:           absolute;
  top:                0;
  left:               0;
  width:              100%;
  height:             100%;
  }
  
.pp-wrapper .profile-picture.style-one .profile-img
  {
  height:             100%;
  }

span.divider
  {
  display:            block;
  margin:             35px 0px;
  width:              150px;
  height:             2px;
  background-color:   #1269EB;
  }

span.divider.center
  {
  margin-right:       auto;
  margin-left:        auto;
  }

.padding-left-yes
  {
  padding-left:       20px;
  }
  
/*---------------------------------------------------------------------*/
/*  RESUME LIVE VIEW
/*---------------------------------------------------------------------*/
#resume
  {
  background-color:   #171717;
  }

#resume h3
  {
  text-align:         center;
  }

  @media (min-width: 768px)
    {
    #resume h3
      {
      text-align:     left;
      }
    }

.resume-img
  {
  max-width:          100%;
  max-height:         100%;
  }
  
.resume-img-box
  {
  background-image:   url('../Images/Resume.png');
  background-repeat:  no-repeat;
  background-size:    contain;
  background-position: center; 
  height:             100%;
  width:              100%;
  padding-top:        100%;
  }

/*---------------------------------------------------------------------*/
/*  Education and Experience Sections
/*---------------------------------------------------------------------*/
#resume .education
  {
  margin-top:         30px;
  }

#resume .work-experience
  {
  margin-top:         50px;
  }

.panel-group.resume
  {
  position:           relative;
  margin-top:         30px;
  }

.panel-group.resume .resume-item
  {
  position:           relative;
  margin-bottom:      40px;
  }

  @media (min-width: 568px)
    {
    .panel-group.resume .resume-item 
      {
      margin-bottom:  20px;
      }
    }

  /* dashed line between entries */
  @media (min-width: 768px)
    {
    .panel-group.resume .resume-item:before
      {
      position:       absolute;
      content:        '';
      width:          1px;
      height:         calc(100% + 20px);
      top:            0;
      left:           170px;
      border-left:    1px dashed #484848;
      }
    }
    
    /* remove indent when no year */
  @media (min-width: 768px)
    {
    .panel-group.resume .resume-item-full:before
      {
      left:           20px !important;
      }
    }

.panel-group.resume .resume-item:last-child
  {
  margin-bottom:      0px;
  }

.panel-group.resume .resume-item:last-child:before
  {
  display:            none;
  }

.panel-group.resume .resume-item .resume-year
  {
  display:            block;
  position:           relative;
  width:              120px;
  height:             40px;
  margin-bottom:     -20px;
  margin-right:       auto;
  margin-left:        auto;
  line-height:        40px;
  background-color:   #1269EB;
  text-align:         center;
  font-weight:        700;
  border-radius:      4px;
  }

  @media (min-width: 568px)
    {
    .panel-group.resume .resume-item .resume-year
      {
      position:       absolute;
      top:            0;
      left:           0;
      margin:         0;
      }
    }

/* expand collapse buttons */
.panel-group.resume .resume-item .resume-btn
  {
  position:           absolute;
  z-index:            5;
  top:                0;
  left:               150px;
  width:              40px;
  height:             40px;
  background-color:   #2e2e2e;
  border-radius:      4px;
  }

.panel-group.resume .resume-item .resume-btn-left
  {
  left:               0px !important;
  }

  @media (max-width: 767px)
    {
    .panel-group.resume .resume-item .resume-btn
      {
      display:        none;
      }
    }

.panel-group.resume .resume-item .resume-btn > a
  {
  display:            block;
  position:           absolute;
  z-index:            10;
  top:                0;
  left:               0;
  width:              40px;
  height:             40px;
  }

.panel-group.resume .resume-item .resume-btn > a:before
  {
  display:            block;
  position:           absolute;
  z-index:            15;
  content:            '-';
  top:                0;
  left:               0;
  width:              40px;
  height:             40px;
  line-height:        38px;
  color:              #ffffff;
  font-size:          30px;
  font-weight:        700;
  text-align:         center;
  }

.panel-group.resume .resume-item .resume-btn > a.collapsed:before
  {
  content:            '+';
  }

.panel-group.resume .resume-item .panel
  {
  padding:            10px;
  width:              100%;
  background:         transparent;
  border:             1px solid #6e6e6e;
  border-radius:      0px;
  }

  @media (min-width: 568px)
    {
    .panel-group.resume .resume-item .panel
      {
      width:          calc(100% - 140px);
      margin-left:    140px;
      }
    }

  @media (min-width: 768px)
    {
    .panel-group.resume .resume-item .panel
      {
      width:          calc(100% - 210px);
      margin-left:    210px;
      }
    }

  @media (min-width: 568px)
    {
    .panel-group.resume .resume-item .panel-full
      {
      width:          calc(100% - 40) !important;
      margin-left:    40px !important;
      }
    }

  @media (min-width: 768px)
    {
    .panel-group.resume .resume-item .panel-full
      {
      width:          calc(100% - 80) !important;
      margin-left:    80px !important;
      }
    }

.panel-group.resume .resume-item .panel .panel-heading
  {
  position:           relative;
  }

.panel-group.resume .resume-item .panel .panel-heading .panel-title
  {
  text-transform:     uppercase;
  }

  @media (max-width: 567px)
    {
    .panel-group.resume .resume-item .panel .panel-heading .panel-title
      {
      padding-top:    20px;
      }
    }

.panel-group.resume .resume-item .panel .panel-collapse .panel-body
  {
  padding-top:        5px;
  border-top:         none;
  }

.panel-group.resume .resume-item .panel .panel-collapse .panel-body p
  {
  margin-bottom:      0px;
  }

.work-logo
  {
  z-index:            5;
  margin:             0px;
  width:              160px;
  }
  
.work-year
  {
  margin-top:         5px;
  margin-bottom:      0px;
  font-size:          22px;
  }
  
.school-logo-left
  {
  z-index:            5;
  margin:             0px;
  height:             38px;
  }
  
.school-logo-right
  {
  z-index:            5;
  margin:             0px;
  height:             34px;
  padding-top:        4px;
  }

p.generic_text
  {
  padding-bottom:     5px;
  text-indent:       -1em;
  padding-left:       1em;
  }
  
ul.tasks
  {
  list-style-type:    circle;
  font-weight:        lighter;
  margin:             0px;
  }

/*---------------------------------------------------------------------*/
/*  SKILLS
/*---------------------------------------------------------------------*/
#skills
  {
  background-color:   #0d0c0d;
  }

#skills .section-wrapper > .section-content
  {
  padding-bottom:     0px;
  }

  @media (min-width: 768px)
    {
    #skills
      {
      padding-bottom: 60px;
      }
    }

  @media (max-width: 767px)
    {
    .circle-chart
      {
      margin-top:    -30px;
      }
    }

.circle-chart .item
  {
  margin-top:         70px;
  margin-bottom:      70px;
  }

  @media (min-width: 768px)
    {
    .circle-chart .item
      {
      margin-top:     30px;
      margin-bottom:  30px;
      }
    }

.circle-chart .item > .circle
  {
  position:           relative;
  margin:             0 auto;
  padding:            6px;
  width:              80px;
  height:             80px;
  background-color:   #a1a1a1;
  border-radius:      50%;
  -ms-transform:      rotate(180deg);
  -webkit-transform:  rotate(180deg);
  transform:          rotate(180deg);
  }

.circle-chart .item > .circle > .item-progress
  {
  display:            inline-block;
  position:           relative;
  width:              68px;
  height:             20px;
  overflow:           hidden;
  }

.circle-chart .item > .circle > .item-progress:before
  {
  display:            block;
  content:            "";
  width:              68px;
  height:             68px;
  background-color:   #3b3b3b;
  border-radius:      68px;
  }

.circle-chart .item > .percent
  {
  position:           absolute;
  top:                50%;
  left:               50%;
  width:              34px;
  height:             26px;
  line-height:        26px;
  margin-top:        -33px;
  margin-left:       -17px;
  background-color:   #1269EB;
  font-size:          14px;
  font-weight:        700;
  text-align:         center;
  border-radius:      5px;
  box-shadow:         3px 3px 10px #1038DA;
  }

.circle-chart .item > .percent-multiline
  {
  margin-top:        -45px;
  }

.circle-chart .item > h4
  {
  margin-top:         20px;
  letter-spacing:     1px;
  }

.skill-class
  {
  margin-top:         5px;
  margin-bottom:      0px;
  font-size:          28px;
  }
  
/*---------------------------------------------------------------------*/
/*  FOOTER
/*---------------------------------------------------------------------*/
footer.footer
  {
  background-color:   #171717;
  padding-top:        70px;
  padding-bottom:     50px;
  }

footer.footer .page-scroll > a
  {
  display:            block;
  position:           absolute;
  top:                0;
  left:               50%;
  width:              48px;
  height:             46px;
  line-height:        48px;
  margin-top:        -94px;
  margin-left:       -24px;
  background-color:   #c80a48;
  color:              #ffffff;
  font-size:          24px;
  text-align:         center;
  border-radius:      4px;
  box-shadow:         0 3px 0 #970837;
  }

footer.footer ul.social-icons {
  margin:             0;
  text-align:         center;
}

footer.footer ul.social-icons > li:hover > .item img
  {
  opacity:            0.7;
  }

footer.footer ul.social-icons > li > .item
  {
  position:           relative;
  width:              48px;
  height:             48px;
  background-color:   #2e2e2e;
  border-radius:      4px;
  box-shadow:         0 3px 0 #212121;
  }

footer.footer ul.social-icons > li > .item > a
  {
  display:            block;
  position:           absolute;
  top:                0;
  left:               0;
  width:              48px;
  height:             48px;
  line-height:        48px;
  font-size:          25px;
  color:              rgba(255, 255, 255, 0.5);
}

footer.footer ul.social-icons > li > .item > a:hover
  {
  color:              rgba(255, 255, 255, 0.7);
  }

footer.footer ul.social-icons > li > .item img
  {
  margin:             0 auto;
  margin-top:         12px;
  opacity:            0.5;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition:    all 0.2s ease-in-out;
  -o-transition:      all 0.2s ease-in-out;
  transition:         all 0.2s ease-in-out;
  }

footer.footer .copyright
  {
  margin-top:         20px;
  }

footer.footer .copyright p
  {
  font-size:          14px;
  }

img.footer-item
  {
  border:             none;
  height:             32px;
  width:              32px;
  border-radius:      4px;
  }