/* main.css */

/* ====================
Resets and Overrides */

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0b1 | 201101
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ==========
 Overrides */

 /*** Bootstrap 4 ***/
 
.navbar-darkbg-transparent {
    background: rgba(0,0,0,0.3);
}
.navbar-darkbg-dark {
    background: rgba(10,20,30,1);
}


.jumbotron {
  padding-left: 1em;
  padding-right: 1em;
  background: none;
  margin:0;
}

.btn-primary {
  background-color: #009B78!important;
} .btn-primary:hover {
  background-color: #007B5F!important; }
.btn-primary:not([disabled]):not(.disabled).active, .btn-primary:not([disabled]):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    background-color: #007B5F!important;
}
.btn-secondary {
  background-color: #5F4B8B!important;
} .btn-secondary:hover {
  background-color: #432D71!important; }
.btn-secondary:not([disabled]):not(.disabled).active, .btn-secondary:not([disabled]):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
    background-color: #432D71!important;
}
.btn-info {
  background-color: #00A9CE!important;
} .btn-info:hover {
  background-color: #00769B!important; }
.btn-info:not([disabled]):not(.disabled).active, .btn-info:not([disabled]):not(.disabled):active, .show>.btn-info.dropdown-toggle {
    background-color: #00769B!important;
}

/* Forms */
.form-group {
  position: relative;
}

/* col-*-5ths for 5 column responsive option mainly for large screens. */
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths,
.col-xl-5ths {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
  .col-sm-5ths {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
    max-width: 50%;
  }
}

@media (min-width: 768px) {
    .col-md-5ths {
      -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
    }
}

@media (min-width: 992px) {
    .col-lg-5ths {
      -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
    }
}

@media (min-width: 1200px) {
    .col-xl-5ths {
      -ms-flex: 0 0 20%;
      flex: 0 0 20%;
      max-width: 20%;
    }
}

/*** Materialize.css ***/

/* Forms */


/* Inputs */
/* label color */
.input-field label {
  color: #4c4e56;
}
/* underline color */
.input-field input[type=text],
.input-field input[type=email],
.input-field textarea {
  border-bottom: 2px solid #4c4e56;
}
/* label focus color */
.input-field input[type=text]:focus + label,
.input-field input[type=email]:focus + label,
.input-field textarea:focus + label {
  color: #009B78!important;
}
/* label underline focus color */
.input-field input[type=text]:focus,
.input-field input[type=email]:focus,
.input-field textarea:focus {
  border-bottom: 1px solid #009B78!important;
}
/* valid color */
.input-field input[type=text].valid,
.input-field input[type=email].valid,
.input-field textarea.valid {
  border-bottom: 1px solid #009B78!important;
}
/* invalid color */
.input-field input[type=text].invalid,
.input-field input[type=email].invalid,
.input-field textarea.invalid {
  border-bottom: 1px solid #F05C00!important;
}
/* icon prefix focus color */
.input-field .prefix.active {
  color: #009B78;
}

.form-dark .font-small {
font-size: 0.8rem; }

.form-dark [type="radio"] + label,
.form-dark [type="checkbox"] + label {
font-size: 0.8rem; }

.form-dark [type="checkbox"] + label:before {
top: 2px;
width: 15px;
height: 15px; }

.form-dark .md-form label {
color: #fff; }

.form-dark input[type=text]:focus:not([readonly]) {
border-bottom: 1px solid #00C851;
-webkit-box-shadow: 0 1px 0 0 #00C851;
box-shadow: 0 1px 0 0 #00C851; }

.form-dark input[type=text]:focus:not([readonly]) + label {
color: #fff; }

.form-dark input[type=password]:focus:not([readonly]) {
border-bottom: 1px solid #00C851;
-webkit-box-shadow: 0 1px 0 0 #00C851;
box-shadow: 0 1px 0 0 #00C851; }

.form-dark input[type=password]:focus:not([readonly]) + label {
color: #fff; }

.form-dark input[type="checkbox"] + label:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 17px;
height: 17px;
z-index: 0;
border: 1.5px solid #fff;
border-radius: 1px;
margin-top: 2px;
-webkit-transition: 0.2s;
transition: 0.2s; }

.form-dark input[type="checkbox"]:checked + label:before {
top: -4px;
left: -3px;
width: 12px;
height: 22px;
border-style: solid;
border-width: 2px;
border-color: transparent #00c851 #00c851 transparent;
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%; }

#form-messages.alert-light::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 0.5em;
}
#form-messages.alert-light.success::before {
    content: "\f00c";
}
#form-messages.alert-light.error::before {
    content: "\f071";
}


/* =================
Color Definitions */

.color-black { color: #4c4e56!important; }
.bg-black { background-color: rgb(76,78,86)!important; }

.color-primary { color: #009B78!important; }
.color-primary-light { color: #43B79D!important; }
.color-primary-lighter { color: #21A789!important; }
.color-primary-dark { color: #007B5F!important; }
.color-primary-darker { color: #00604B!important; }
.bg-primary { background-color: #009B78!important; }
.bg-primary-light { background-color: #43B79D!important; }
.bg-primary-lighter { background-color: #21A789!important; }
.bg-primary-dark { background-color: #007B5F!important; }
.bg-primary-darker { background-color: #00604B!important; }
.primary-gradient {
  background: -webkit-linear-gradient(50deg,#009B78,#00604B)!important;
  background: -o-linear-gradient(50deg,#009B78,#00604B)!important;
  background: linear-gradient(40deg,#009B78,#00604B)!important;
}

.color-secondary { color: #5F4B8B!important; }
.color-secondary-light { color: #8271A7!important; }
.color-secondary-lighter { color: #AFA3C8!important; }
.color-secondary-dark { color: #432D71!important; }
.color-secondary-darker { color: #281553!important; }
.bg-secondary { background-color: #5F4B8B!important; }
.bg-secondary-light { background-color: #8271A7!important; }
.bg-secondary-lighter { background-color: #AFA3C8!important; }
.bg-secondary-dark { background-color: #432D71!important; }
.bg-secondary-darker { background-color: #281553!important; }
.secondary-gradient {
  background: -webkit-linear-gradient(50deg,#5F4B8B,#281553)!important;
  background: -o-linear-gradient(50deg,#5F4B8B,#281553)!important;
  background: linear-gradient(40deg,#5F4B8B,#281553)!important;
}

.color-tertiary { color: #00A9CE !important; }
.color-tertiary-light { color: #03CFFF !important; }
.color-tertiary-lighter { color: #16D0FB !important; }
.color-tertiary-dark { color: #007894 !important; }
.color-tertiary-darker { color: #005E74 !important; }
.bg-tertiary { background-color: #00A9CE !important; }
.bg-tertiary-light { background-color: #03CFFF !important; }
.bg-tertiary-lighter { background-color: #16D0FB !important; }
.bg-tertiary-dark { background-color: #007894 !important; }
.bg-tertiary-darker { background-color: #005E74 !important; }
.tertiary-gradient {
  background: -webkit-linear-gradient(50deg,#00A9CE,#005E74)!important;
  background: -o-linear-gradient(50deg,#00A9CE,#005E74)!important;
  background: linear-gradient(40deg,#00A9CE,#005E74)!important;
}

.color-complement { color: #F05C00!important; }
.color-complement-light { color: #FF9B5E!important; }
.color-complement-lighter { color: #FF8132!important; }
.color-complement-dark { color: #BF4900!important; }
.color-complement-darker { color: #953900!important; }
.bg-complement { background-color: #F05C00!important; }
.bg-complement-light { background-color: #FF9B5E!important; }
.bg-complement-lighter { background-color: #FF8132!important; }
.bg-complement-dark { background-color: #BF4900!important; }
.bg-complement-darker { background-color: #953900!important; }
.complement-gradient {
  background: -webkit-linear-gradient(50deg,#F05C00,#953900)!important;
  background: -o-linear-gradient(50deg,#F05C00,#953900)!important;
  background: linear-gradient(40deg,#F05C00,#953900)!important;
}

/* TODO: Hover color classes */

/* TODO: Mask color classes */
.rgba-stylish-strong { background-color: rgba(62,69,81,.7); }

/* ===============
 Links and Type */

body {
   font-family:"Roboto", Arial, sans-serif;
   font-size: 1.1875em;
   line-height: 1.631578947em;
   width:100%;
   color: #4c4e56;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .font-header {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 200;
}

p {
  font-family: "EB Garamond", Garamond, Times, serif;
  margin-bottom: 1.1em;
}

.font-roboto {
  font-family: "Roboto", Helvetica, Arial, sans-serif;
}
.font-eb-garamond {
  font-family: "EB Garamond", Garamond, Times, serif;
}
.font-striver {
  font-family: 'Striver', Arial, Helvetica, sans-serif;
}

.blockquote {
  position: relative;
  padding: 1rem;
}
.blockquote::before {
  font-family: "Font Awesome 5 Free";
  content: "\f10d";
  font-weight: 900;
  position: absolute;
  top: -10px;
  left: 4px;
  font-size: 1rem;
  color: #ECEEEF;
}

p a {
  background:
     linear-gradient(
       to bottom, #009B78 0%,
       #009B78 100%
     );
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 3px 3px;
  color: #4c4e56;
  padding: 0 0.25em;
  text-decoration: none;
  transition: all .2s;
} p a:hover, a:focus {
    background-size: 3px 1.5em;
    color: white;
  }

 ::-moz-selection {
   /* Gecko Browsers */
   background: #21A789;
   color:white;
   text-shadow: 0px 0px 3px rgba(0,0,0,0.3);
 }
 ::selection {
   /* WebKit/Blink Browsers */
   background: #21A789;
   color:white;
   text-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}

/*** Materialize.css / Bootstrap 4 collisions handling ***/
.carousel {
  height: auto;
}
.carousel .carousel-item {
  position: relative;
  visibility: visible;
  width:100%;
  height:auto;
}

/* ===================
  Mobile First Layout
=================== */

  /* ===========
  Main Layout */

  body{
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
    max-height: 100%;
  }

  /* Standardized padding div class */
  .innertube {
    padding: 10px;
  }

  .wrapper {
    margin: 0 auto;
    width:100%;
  }

  .header {
    width:100%;
    position: fixed;
    top: 0px;
    z-index: 9999;
    height:51px;
    transition: background 0.5s ease;
  }

  footer {
    width:100%;
    clear:both;
    overflow:hidden;
    text-align:center;
    position:absolute;
  }

  .font-oswald {
    font-family: "Oswald", "Open Sans Condensed", sans-serif; }

  .flashMessage {
    width:96%;
    max-width:960px;
    border: 1px solid black;
    margin-bottom: 1em;
    padding: 1%;
    font-size:small;
    margin: 5px auto;
    text-align:center;
  } .success {
    border-color: #009b77;
    color: #009b77;
    }
    .error {
      border-color: #955251;
      color: #955251;
    }

  .content {
    width: 100%;
  }

  /* ===========================
  Secondary Layout Structures */

  .home-hero {
    background:url('/images/deskspace.jpg') no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position:relative; }

  .hero-panel {
    width:100%;
    overflow:hidden;
    clear:both; }
    .hero-panel h2 {
      line-height: 1.1625em; }

  .portfolio-item {
    margin-top: 25px;
    margin-bottom: 25px;
    text-align:center; }
    .portfolio-item img {
      max-height:240px;
      margin:0 auto; }
    .portfolio-item p {
      text-align:center; }
    .portfolio-item .fontbox {
      line-height:240px;
      margin:0 auto;
    }

  .imageGrid li{
    border: 3px solid rgba(0, 155, 120, 1);
    float:left;
    list-style: none;
    margin:1em;
    width:150px;
    height:150px;
    overflow:hidden;
  } .imageGrid li img {
    max-width:100%;
  }

  #lightbox-overlay {
    background:rgba(0,0,0,0.7);
    display:none;
    height:100%;
    height:100vh;
    left:0;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    width:100vw;
  } #lightbox-overlay img {
    margin: 0 auto;
    max-width:75%;
    max-width:75vw;
    max-height:75%;
    max-height:75vh;
  } #lightbox-overlay p {
    color:white;
  }

  a.btn-clear-primary {
    background: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: 1px solid white;
    color:white;
  } a.btn-clear-primary:hover {
    background: rgba(0, 155, 120, 1.0);
    border: 1px solid rgba(255, 255, 255, 0.0);
  }

  a.btn-black-primary {
    background: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: 1px solid #4c4e56;
    color:#4c4e56;
    transition: none;
  } a.btn-black-primary:hover {
    background: rgba(0, 155, 120, 1.0);
    border: 1px solid rgba(255, 255, 255, 0.0);
    color:white;
  }

  a.btn-clear-white-primary {
    background: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: 1px solid white;
    color:white;
    transition: none;
  } a.btn-clear-white-primary:hover {
    background: rgba(255, 255, 255, 1.0);
    border: 1px solid rgba(255, 255, 255, 0.0);
    color: #009B78;
  }

  .centered-mobile {
    margin:0 auto;
    text-align:center;
  }

  #greeting {
    text-align:center;
  }

  .contact-info {
    width:100%;
    margin: 0 auto;
    text-align:center;
  } .contact-info li {
    display:inline-block;
    margin: 0 2px;
    width:33px;
    height:33px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    text-align:center;
    overflow:hidden;
  } .contact-info li a {
    display:block;
    width: 33px;
    height: 33px;
  } .contact-info .email {
    color:white;
    background: #333;
    font-size:16px;
    padding-top:3px;
  } .email a, .email a:link, .email a:visited, .email a:hover, .email a:active {
    color:white;
  } .contact-info .facebook {
    background: url('/images/facebook_icon.png') no-repeat center center;
  } .contact-info .twitter {
    background: url('/images/twitter_icon.png') no-repeat center center;
  } .contact-info .linkedin {
    background: url('/images/linkedin_icon.png') no-repeat center center;
  } .contact-info .googleplus {
    background: url('/images/google_plus_icon.png') no-repeat center center;
  } .contact-info .facebook, .contact-info .twitter, .contact-info .linkedin, .contact-info .googleplus {
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
  }

  /* ==============
  Generic Classes*/
  .header-padding {
    padding-top: 64px!important;
  } .scroll-more-padding {
    padding-bottom: 40px;
  }

  .widescreen {
    width:100%;
    height:56.25vw;
    max-height:100vh;
  }
  .fullscreen {
    width: 100vw;
    height: 100vh;
  }

  .center, .align-center {
    text-align:center;
  } .align-left {
    text-align:left;
  } .align-right {
    text-align:right;
  }

  .fixed-top {
    position:fixed;
    top: 0; left: 0;
    width: 100%;
  }

  .no-top-margin {
    margin-top:0;
  }

  .bg-dark {
    background-color: rgba(76,78,86,0.7);
  }

  .ios-app-icon {
    -webkit-border-radius:18%;
       -moz-border-radius:18%;
            border-radius:18%;
  }

  .logo {
  }
  .logo img {
    width: 100%;
    height: auto;
    max-width: 50px;
    max-height:50px;
  }

  .card.text-white .card-body .card-text {
    color: #FFFFFF;
  }

  .card-deck .card {
    overflow: hidden;
    border-radius: 0px;
  }

  .card.card-image {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
    color: #4c4e56;
  }

  .card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating):hover {
    color: #000;
  }

  /* Profile Card */

  .profile-card .card-up {
    overflow: hidden;
    height: 120px;
    -webkit-border-top-left-radius: .25rem;
    border-top-left-radius: .25rem;
    -webkit-border-top-right-radius: .25rem;
    border-top-right-radius: .25rem;
  }
  .profile-card .avatar {
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 120px;
    margin-top: -60px;
    overflow: hidden;
    border: 5px solid #FFFFFF;
  }

  .profile-card .avatar.big-avatar {
    width: auto;
    margin: 0;
    -webkit-border-radius: 0px;
    border-radius: 0px;
  }

  .profile-card .avatar img {
    max-width: 100%;
  }

  /* Miscellaneous */


/* Tablets */
@media screen and (min-width:768px) {

  h1 {
    font-size: 2.631578947em;
    line-height: 1.1625em;
    margin-top: 0.775em;
    margin-bottom: 0.3875em;
  }
  h2 {
    font-size: 2.210526316em;
    line-height: 1.24em;
    margin-top: 1.24em;
    margin-bottom: 0.62em;
  }
  h3 {
    font-size: 1.631578947em;
    line-height: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
  }
  h4 {
    font-size: 1em;
    line-height: 1.631578947em;
    margin-top: 1.63157895em;
    margin-bottom: 1.63157895em;
  }

  /* ===========
  Main Layout */

  body{
    margin: 0;
    padding: 0;
    border: 0;
    height: 100%;
    max-height: 100%;
  }

  img {
    max-width: 100%;
  }

  .innertube {
    padding: 10px; /* Standardized padding div class */
  }

  .wrapper {
    margin: 0 auto;
    width:100%;
  }

  .header {
    width:100%;
    min-height: 94.5px;
    position: fixed;
    top: 0px;
    z-index: 9999;
    transition: background 0.5s ease;
  }

  footer {
    width:100%;
    clear:both;
    overflow:hidden;
    text-align:center;
  }

  .flashMessage {
    width:96%;
    max-width:960px;
    border: 1px solid black;
    margin: 5px auto;
    padding: 1%;
    font-size:small;
    text-align:center;
  } .success {
    border-color: #009b77;
    color: #009b77;
    }
    .error {
      border-color: #955251;
      color: #955251;
    }

  .content {
    width: 100%;
  }

  /* ===========================
  Secondary Layout Structures */

  .home-hero {
    background:url('/images/deskspace.jpg') no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .hero-panel {
    width:100%;
    max-height:1280px;
    max-height:100vh;
    overflow:auto;
    clear:both;
  } .hero-panel h2 {
    font-size: 4.210526316em;
    line-height: 1.1625em;
  }

  .imageGrid li{
    border: 3px solid rgba(0, 155, 120, 1);
    float:left;
    list-style: none;
    margin:1em;
    width:150px;
    height:150px;
    overflow:hidden;
  } .imageGrid li img {
    max-width:100%;
  }

}