/*--------------Custom Styles--------------*/

html {
  position: relative;
  min-height: 100%;
  overflow-y: scroll;
  }

body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}

/* Nav */

  @media (max-width: 408px) {.nav-min {display:none!important;}}

  span.navbar-brand {font-size:.9em;font-weight:300;}

  .mm-navlink{color:#000000!important;text-decoration:none!important;font-weight:600;font-size:1.4em;margin-right:14px;letter-spacing:.3px;}

  @media (min-width: 768px) 
     {.nav-link i {color:#007bff;}
  }


/* Sitewide Styles */

  .hero-container-1 {margin-top:54px;}
  .m-top54 {margin-top:54px;}


  @media (max-width:576px) {
    .col-spad {padding-left:2.4em!important;padding-right:2.4em!important;}
    .col-spad2 {padding-left:3em!important;padding-right:3em!important;}
  }

  @media (max-width:768px) {
  .col-mpad1 {padding-left:1.2em!important;padding-right:1.2em!important;}
  .col-mpad {padding-left:2.4em!important;padding-right:2.4em!important;}
  .col-mpad2 {padding-left:3.2em!important;padding-right:3.2em!important;}
  .col-mpad3 {padding-left:5em!important;padding-right:5em!important;}
  }

  @media screen and (max-width:992px) and (min-width:768px) {.col-mpad {padding-left:2.4em!important;padding-right:2.4em!important;}} 
  @media screen and (max-width:1200px) and (min-width:941px) {.col-mdpad {padding-left:3em!important;padding-right:3em!important;}} 

  @media (min-width:992px) {
  .col-lpad {padding-left:2.4em;padding-right:2.4em;}}


/* Colors & BG Colors */
 .blu0 {color:#F8FBFF;}
 .blu1 {color:#EEF4FF;}
 .blu2 {color:#D3E8FF;}
 .blu3 {color:#B9DBFF;}
 .blu4 {color:#007BFF;}
 .blu5 {color:#002854;}
 .blk1 {color:#222222;}

 .bg-blu0 {background-color:#F8FBFF;}
 .bg-blu1 {background-color:#EEF4FF;}
 .bg-blu2 {background-color:#D3E8FF;}
 .bg-blu3 {background-color:#B9DBFF;}
 .bg-blu4 {background-color:#007BFF;}
 .bg-blu5 {background-color:#002854;}
 .bg-blk1 {background-color:#222222;}
 .bg-white {background-color:#ffffff;}

 .bg-tangray {background: #F8F7EF;background: linear-gradient(90deg,rgba(248, 247, 239, 1) 0%, rgba(235, 235, 235, 1) 100%);}
 .bg-tangray0 {background: linear-gradient(90deg,rgba(248, 247, 239, .6) 0%, rgba(242, 242, 242, .6) 100%);}
 .bg-ltblugrad {background: linear-gradient(90deg,rgba(242, 242, 242, .6) 0%, rgba(232, 243, 255, .5) 100%);}


  .b-blue {color:#007bff;}
  .b-red {color:#FF0900;}
  .b-purple {color:#A800FF;}
  .b-dgray {color:#333333;}
  .d-blue {color:#002854;}


  .text-lgray {color:#c2c2c2;}
  .t-up {text-transform:uppercase;}



/* Heights & Widths */
  .m-height10 {height:10px;}
  .m-height15 {height:15px;}
  .m-height20 {height:20px;}
  .m-height25 {height:25px;}
  .m-height30 {height:30px;}
  .m-height35 {height:35px;}
  .m-height40 {height:40px;}
  .m-height50 {height:50px;}
  .m-height60 {height:60px;}

/* Bullets */

  ul.b-list li::marker {
    color: #007bff;
  }

  ul.b-list {padding-inline-start:16px;}


  .b-list li {padding-inline-start: 04px;}

  .fa-li {left: -2.5em!important;}
  .fa-ul {margin-left: 2em!important;}



/* Box Shadow */

  .bshadow {
  -webkit-box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.03);
  -moz-box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.03);
  box-shadow: 0px 0px 6px 3px rgba(0,0,0,0.03);
  }

/* Border */
.wht-bord {border:4px solid #ffffff;}
.grey-bord {border:4px solid #eeeeee;}
.rounded2 {border-radius:.6rem;}


/* Photoswipe thumbnail border - hover */

.bb-hoverline:hover {outline:1px solid #007bff;}
.bb-outline {outline: 1px solid #e8ecf7;}


/* Sitewide Fonts */

.quicksand {font-family:'Quicksand', sans-serif !important;}
.zalando {font-family: "Zalando Sans", sans-serif;font-optical-sizing: auto;font-weight: <weight>;font-style: normal;font-variation-settings: "wdth" 100;}
.ibm-plex {font-family: "IBM Plex Serif", serif;font-style: normal;}
.spectral-regular {font-family: "Spectral", serif;font-weight:400;font-style: normal;}
.spectral-italic {font-family: "Spectral", serif; font-weight: 800;font-style: italic;}

.bodytext{font-size:.96rem!important;line-height:1.8em;font-weight:300;letter-spacing:.15px;}
.body-large{font-size:1.02rem!important;line-height:2em;font-weight:300;letter-spacing:.2px;}
.tabletext{font-size:.9rem!important;line-height:1.8em;font-weight:300;letter-spacing:.15px;}


/* Font Weight */

.fw-200 {font-weight:200;}
.fw-300 {font-weight:300;}
.fw-400 {font-weight:400;}
.fw-500 {font-weight:500;}
.fw-600 {font-weight:600;}
.fw-700 {font-weight:700;}
.fw-800 {font-weight:800;}

/* Line Height */

.lh-12 {line-height:1.2;}
.lh-13 {line-height:1.3;}
.lh-14 {line-height:1.4;}
.lh-16 {line-height:1.6;}
.lh-18 {line-height:1.8;}

/* letter spacing */

.ls-2 {letter-spacing:.2px;}
.ls-3 {letter-spacing:.3px;}
.ls-4 {letter-spacing:.4px;}
.ls-6 {letter-spacing:.6px;}
.ls-8 {letter-spacing:.8px;}
.l-spac1 {letter-spacing:1px;}


/* Fontawesome icons */

.ico-smaller {
  font-size: .8em;
  position: relative;
  top: -1px;
  padding-right:1px; }


/* Headers */

h1, .h1 {font-size:2.2em;}
h2, .h2 {font-size:1.8em;}
h3, .h3 {font-size:1.4em;}
h4, .h4 {font-size:1.2em;}
h5, .h5 {font-size:1.1em;}


/* Jumbo + Smaller */

.b-xs {font-size:.8em;letter-spacing:.1px;}
h1.jumbo {font-size:3em;}
h4.jumbo {font-size:1.3em;}
@media (max-width: 768px) { 
  h1.jumbo {font-size:2.3em;}
  h2 {font-size:1.5em;}
  h1 {font-size:1.6em;}
  h3, .h3 {font-size:1.2em;}
  h4.jumbo {font-size:1.15em;}
}

.b-h2 {font-size:1.6em;font-weight:700;}
.h3-sm {font-size:1.4em!important;}
.b-xs {font-size:.8em;}

@media (max-width: 1200px) { 
.lg-xsf {font-size:.9em;}
}


/* Mobile Shrink Sizes */

.h1-md {letter-spacing: .4px;font-size: 1.8em !important;line-height:2rem;font-weight:700;}
@media (max-width: 768px) {
.h1-md {font-size:1.8em !important;padding-top:12px;}
.h2-md {font-size:1.6em !important;}
}

.h4-sm{font-size:1.1em;}
@media (max-width: 768px) {.h4-sm{font-size:1em!important;}}

@media (max-width: 768px) {.h4-sm{font-size:1em!important;}}




/* Links */ 

a.no-line {text-decoration:none;}


/* Carousel  */
  .carousel-dark .carousel-control-next-icon, .carousel-dark .carousel-control-prev-icon { filter: invert(1) grayscale(100); }

  .carousel-control-next-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");}

  .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");}



/* Portfolio Page Fonts */
h1.h1-pp400 {font-size:2.2em;font-weight:700;}
h3.h3-pp400{font-weight:400;margin-top:08px;margin-bottom:08px;font-size:1.2em;}
.pp-b700 {font-weight:600;}


/* Navbar */

.bg-light {background-color: #ffffff!important;}
.nav-link {font-size:.95em;font-weight:600;padding-left:1.4em!important;padding-right:1.4em!important;font-family:'Quicksand','SF Pro','Helvetica',Arial,sans-serif;}
.m-nav-link {color:#ffffff!important;font-size:1em!important;padding-left:.1em!important;padding-right:.1em!important;font-weight:300!important;font-family:'Quicksand','SF Pro','Helvetica',Arial,sans-serif;border-bottom:4px transparent solid;}
.m-nav-link:hover {color:#ffffff!important;border-bottom:4px #007bff solid;}
.navbar {height:54px;}
.m-nav-item {margin-right:30px;}
.navbar-light .navbar-nav .nav-link {color:rgba(0, 0, 0, 0.8)!important;}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {color:#007bff!important;}

/* Portfolio Item Styles */

@media (max-width: 450px) {
.p-toggle {display:none;}
}

@media (max-width: 350px) {
.p-toggle2 {display:none;}
}

@media (max-width: 450px) {
.p-toggle2-text {width:200px;}
}

@media (max-width: 578px) {
.mobile-sshot {max-width:285px;}
}

@media (max-width: 376px) {
.mobile-sshot {max-width:185px;}
}

@media (max-width: 578px) {
.mobile-sshot-center {text-align:center!important;}
}


/*About Page Fonts */

.mm-li-sm-light {font-weight:400;margin-top:08px;margin-bottom:08px;font-size:1em;}
.resume-table.table th {border:none;}
.resume-table.table td {border-top:none;}
.time-column {width:11%;}


/* Mobile Drops */

@media (max-width: 1200px) {.xl-collapse {display:none!important;}}
@media (max-width: 992px) {.lg-collapse {display:none!important;}}
@media (max-width: 768px) {.mobile-drop {display:none!important;}}
@media (max-width: 576px) {.mobile-s-drop {display:none!important;}.xs-drop {display:none!important;}}


/* XL only */
@media (min-width: 1200px) {.xl-only {display:none!important;}}

/* Med - Below Only */ 
@media (min-width: 992px) {.med-only {display:none!important;}}

/* Mobile Only */
@media (min-width: 768px) {.mobile-only {display:none!important;}}

/* XS Only */
@media (min-width: 576px) {.xs-only {display:none!important;}}



/* Footer */

@media (max-width:576px) {.footer-text {text-align:left !important;}}


/* Sticky footer styles
-------------------------------------------------- */

.footer {
  position: absolute;
  z-index:26;
  bottom: 0px;
  width: 100%;
  height: auto; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background: #007bff;  /* fallback for old browsers */
 
}


/* Separator text within horizontal rule */

@media screen and (min-width:900px) {
    h3.sep {
       width: 100%; 
       text-align: left; 
       border-bottom: 1px solid #e2e2e2; 
       line-height: 0.1em;
       margin: 10px 0 20px; 
    } 

    h3.sep span { 
        background:#fff; 
        padding-right:10px; 
    }
  }


/* Fade In Page */

      #fader {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 24;
          pointer-events: none;
          background: white;
          animation-duration: 300ms;
          animation-timing-function: ease-in-out;
        }

        #fader:before {
          content: 'fade'
        }

        @keyframes fade-out {
          from { opacity: 1 }
          to { opacity: 0 }
        }

        @keyframes fade-in {
          from { opacity: 0 }
          to { opacity: 1 }
        }

        #fader.fade-out {
          opacity: 0;
          animation-name: fade-out;
        }

        #fader.fade-in {
          opacity: 1;
          animation-name: fade-in;
        }


/* Animate CSS */

@-webkit-keyframes fadeInDown {
          from {opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}
          to {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}

        @keyframes fadeInDown {
          from {opacity: 0;-webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}
          to {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}

        .fadeInDown {-webkit-animation-name: fadeInDown;animation-name: fadeInDown;}


        @-webkit-keyframes fadeInUp {
          from {opacity: 0;-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);}
          to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}

        @keyframes fadeInUp {
          from {opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);}
          to {opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}}

        .fadeInUp {-webkit-animation-name: fadeInUp; animation-name: fadeInUp;}

        @-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}

        @keyframes fadeIn{0%{opacity:0}to{opacity:1}}

        .fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}



/* Animate CSS Specific Classes */

      .aniCont1 {
      animation-duration: .4s;
      animation-fill-mode: both;
      animation-iteration-count: 1;
      animation-delay:.1s;
      }

      .aniCont2 {
      animation-duration: 1.4s;
      animation-fill-mode: both;
      animation-iteration-count: 1;
      animation-delay:.3s;
      }

      .aniCont3 {
      animation-duration: 1s;
      animation-fill-mode: both;
      animation-iteration-count: 1;
      animation-delay:.6s;
      }

      .aniFooter1 {
        animation-duration: .2s;
        animation-fill-mode: both;
        animation-iteration-count: 1;
        animation-delay:1s;
      }