html {
        background-color: #fffdf2;
    }

    html .navbar-toggler:focus {
        outline: 0;
    }

    body {
        position: relative;
        font-family: 'chivo', sans-serif;
        background-color: #fffdf2;
    }

    hr {
        border: none;
        border-bottom: solid 1px #151818;
    }

    #phone-text a {
        color: #fff;
        text-decoration: none;

    }

    .navbar {
        font-family: 'chivo', sans-serif;
        font-weight: 300;
        background-color: rgba(255, 252, 232, .95);

    }
    /* unvisited link */

    .navbar a:link {
        color: #151818;
    }
    /* visited link */

    .navbar a:visited {
        color: #151818;
    }
    /* mouse over link */

    .navbar a:hover {
        color: #151818;
    }
    /* selected link */

    .navbar a:active {
        color: #151818;
    }

    .navbar .nav a:hover {
        background-color: rgba(255, 252, 232, .2);
        font-weight: 700;
    }

    .navbar-header {
        color: #151818;
    }

    .navbar-brand {
        width: 164px;
        color: #151818;
    }

    .icon-bar {
        background-color: #151818;
    }


    .navbar-toggle .icon-bar:nth-of-type(2) {
      top: 1px;
}

.navbar-toggle .icon-bar:nth-of-type(3) {
    top: 2px;
}

.navbar-toggle .icon-bar {
      position: relative;
      transition: all 500ms ease-in-out;
}

.navbar-toggle.active .icon-bar:nth-of-type(1) {
      top: 6px;
      transform: rotate(45deg);
}

.navbar-toggle.active .icon-bar:nth-of-type(2) {
      background-color: transparent;
}

.navbar-toggle.active .icon-bar:nth-of-type(3) {
      top: -6px;
      transform: rotate(-45deg);
}




    .slide-in-blurred-top {
        -webkit-animation: slide-in-blurred-top 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
        animation: slide-in-blurred-top 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
    }

    .bounce-in-top {
        animation: bounce-in-top 1.1s both;
    }

    .firstletter-lrg {
        float: left;
        font-family: 'chivo', sans-serif;
        font-size: 5.25em;
        font-weight: 900;
        line-height: 90px;
        padding-top: 3px;
        padding-right: 3px;
        padding-left: 0px;
    }

     .firstletter-med {
        float: left;
        font-family: 'chivo', sans-serif;
        font-size: 6em;
        font-weight: 900;
        line-height: 65px;
        padding-top: 4px;
        padding-right: 2px;
        padding-left: 0px;
    }

     .firstletter-sm {
        float: left;
        font-family: 'chivo', sans-serif;
        font-size: 6em;
        font-weight: 900;
        line-height: 65px;
        padding-top: 4px;
        padding-right: 2px;
        padding-left: 0px;
    }

    .divider {
        font-family: 'chivo', sans-serif;
        font-size: 1.65em;
        font-weight: 800;
        color: #151518;
        height: 40px;
        border-bottom: solid 2px #fff200;
    }

    #intro {
        padding-top: 70px;
        background-color: #fffdf2;
        margin-top: -40px;
    }

    #screen {
        padding-top: 70px;
        background-color: #fffdf2;
    }
    .ellipsis {
  text-overflow: ellipsis;

  /* Required for text-overflow to do anything */
  white-space: nowrap;
  overflow: hidden;
}

    .sweet-n-saucy {
        padding-top: 18px;
        padding-bottom: 18px;
        text-align: center;
    }

    .sweet-n-saucy button {
        font-size: 1.3em;
        font-weight: 900;
        padding: 6px 18px 6px 18px;
        background-color: #fff200;
        border: none;
        margin-left: 8px;
        transition: color .33s;
    }

    .sweet-n-saucy button:hover {
        font-size: 1.3em;
        font-weight: 900;
        background-color: #fffadd;
        border: none;
    }

    .saucy-icon {
        height: 1.2em;
        margin-right: 8px;
        margin-bottom: 0px;
    }

    .sweet-icon {
        height: 1.2em;
        margin-right: 8px;
        margin-bottom: 0px;

    }

    .icon-saucy:before {
        position:relative;
        margin-right:6px;
        top:3px;
        font-size:1.3em;
     }

      .icon-sweetie:before {
        position:relative;
        margin-right:6px;
        top:3px;
        font-size:1.3em;
     }



    #print {
        padding-top: 70px;
        background-color: #fffdf2;
    }

    #about {
        padding-top: 70px;
        padding-bottom: 30px;
        font-family: 'chivo', sans-serif;
        background-color: #fffdf2;

    }



    .print-info img {
        margin-top: 18px;
        width: 100%;
        border: solid 2px #fffadd;
    }

    .print-info p {
        /* height: 160px; */
    }

    .print-info h4 {
        line-height: 2em;
        border-bottom: solid 2px #fff200;
    }

    .print-button button {
        margin: 0;
        padding: 0;
        opacity: .8;
        transition: opacity .33s;
    }

    .print-button button:hover {
        opacity: 1;
    }

    .modal-content {
        background-color: transparent;
        box-shadow: none;
        border: none;

    }

    .modal-content img {
        width:80%;
        margin:0 auto;
        margin-bottom: 24px;
        display:block;
    }

    .modal-content button {
        opacity: .5;
        color: white;
        text-shadow: none;
        transition: opacity .33s;
    }

    .modal-content button:hover {
        opacity: 1;
        color: white;
        text-shadow: none;
    }

    .close {
      font-size: 2.5em;

    }

    .rotate {
        -webkit-transform: rotate(355deg);
        -moz-transform: rotate(355deg);
        -ms-transform: rotate(355deg);
        -o-transform: rotate(355deg);
        transform: rotate(355deg);
    }



    .about{
        text-align: center;
        width: 80%;
        margin:0 auto;

    }

    .about hr {
        border: none;
        height: 2px;
        width:50%;
        margin: auto;
        margin-top:2rem;
        margin-bottom:2rem;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fff200+0,fff200+50,fff200+100&0+0,1+50,0+100 */
        background: -moz-linear-gradient(left, rgba(255, 242, 0, 0) 0%, rgba(255, 242, 0, 1) 50%, rgba(255, 242, 0, 0) 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(left, rgba(255, 242, 0, 0) 0%, rgba(255, 242, 0, 1) 50%, rgba(255, 242, 0, 0) 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, rgba(255, 242, 0, 0) 0%, rgba(255, 242, 0, 1) 50%, rgba(255, 242, 0, 0) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00fff200', endColorstr='#00fff200', GradientType=1);
        /* IE6-9 */
    }

    .about button {
        font-size: 1.4em;
        font-weight: 900;
        padding: 5px 9px 4px 9px;
        background-color: #fff200;
        border: solid 3px #fff200;
        transition: color .33s;
    }

    .about button:hover {
        font-size: 1.4em;
        font-weight: 900;
        color: rgba(21, 21, 24, 0.2);
        background-color: #fffdf2;
        border: solid 3px #fff200;
    }

    .about a {
        text-decoration:none;
        transition: color .33s;

    }

     /* unvisited link */
   .about a:link {
        color: #151818;
    }
    /* visited link */

    .about a:visited {
        color: #151818;
    }
    /* mouse over link */

    .about a:hover {
        color: silver;
    }
    /* selected link */

    .about a:active {
        color: #151818;
    }



    .quote {
        background: #fff200;
        position: relative;
        font-family: 'chivo', sans-serif;
        z-index: 1020;
    }

    .quote:before {
        background: inherit;
        content: '';
        display: block;
        height: 50%;
        left: 0;
        position: absolute;
        right: 0;
        z-index: -1020;
        -webkit-backface-visibility: hidden;
    }

    .quote:before {
        top: 0;
        -webkit-transform: skewY(-3.5deg);
        transform: skewY(-3.5deg);
        -webkit-transform-origin: 0% 0;
        transform-origin: 0% 0;
    }

    .gallery_product img {
        width: 100%;
    }

    .bmd-modalButton {
        display: block;
        margin: 0;
        padding: 0;
        transition: opacity .33s;

    }

    .close-button {
        overflow: hidden;
        font-size:1.8em;
    }

    .bmd-modalContent {
        box-shadow: none;
        background-color: transparent;
        border: 0;
    }

    .bmd-modalContent .close {
        font-size: 1.8em;
        line-height: 1.8em;
        /*padding: 7px 4px 7px 13px;*/
        text-shadow: none;
        opacity: .5;
        color: #fff;
    }

    .bmd-modalContent .close span {
        display: block;
    }

    .bmd-modalContent .close:hover,
    .bmd-modalContent .close:focus {
        opacity: 1;
        outline: none;
    }

    .bmd-modalContent iframe {
        display: block;
        margin: 0 auto;
    }

    .modal-backdrop {
        background-color: #151818;
    }

    .modal-backdrop.in {
        opacity: .9;
    }

    .bmd-modalButton-img {
        opacity: .8;
    }

    .bmd-modalButton:hover {
        opacity: 1;
    }

    .modal-caption-before {
        font-size: .85em;
        font-weight:700;
        background-color: #fff200;
        padding: 1em;
        padding-bottom: .7em;
        margin-left: 2px;
        margin-right: 2px;
    }

    .modal-caption-icon {
        float: right;
        height: 1.4em;
        margin-right: -6px;
    }

    .modal-caption {
        background-color: #fff200;
        padding: 1.7em;
        margin: 1em;
    }

    .modal-caption a {
        text-decoration:none;
        font-weight:700;
    }

     /* unvisited link */
   .modal-caption a:link {
        color: #151818;
    }
    /* visited link */

    .modal-caption a:visited {
        color: #151818;
    }
    /* mouse over link */

    .modal-caption a:hover {
        color: silver;
    }
    /* selected link */

    .modal-caption a:active {
        color: #151818;
    }

    .print-caption {
        background-color: #fffadd;
        padding: 12px;
        margin-bottom: 18px;
    }

    .print-caption button {
        font-size: 1.45em;
        font-weight: 900;
        background-color: #fffadd;
        border: none;
        padding: 0px;
    }

    .print-caption button:hover {
        text-decoration: none;
        color: rgba(21, 21, 24, 0.5);
    }




#full-resume {
    width:85%;
    margin: 0 auto;
    padding-top:30px;
    padding-bottom:30px;
}



    footer {
        font-family: 'chivo', sans-serif;
        padding: 12px;
        background-color: #666;
        font-size: .8em;
        line-height: 3em;
        text-align: center;
    }

    .footer-links a {
        display: inline-block;
        font-size: 1.4em;
        color: #fff;
        text-decoration: none;
        transition: color .33s;
    }

    .footer-links a:hover {
        text-decoration: none;
        color: silver;
    }

    .footer-links a:visited {
        text-decoration: none;
        color: silver;
    }

    .list-inline {
        margin-left: -18px;
    }

    .list-inline-item {
        margin-left: 18px;
    }

    .subfooter {
        text-align: center;
        color: #fff;
        padding: 12px;
        background-color: #333;
    }

    .subfooter-links a {
        text-align: center;
        display: inline-block;
        color: #fff;
        text-decoration: none;
        transition: color .33s;
    }

    .subfooter-links a:hover {
        color: silver;
    }

    .subfooter-links a:visited {
        text-decoration: none;
        color: silver;
    }


#credits {
  font-family: 'chivo', sans-serif;
  text-transform:uppercase;
  letter-spacing: 2px;
  padding: 12px;
  background-color: #222;
  font-size: .4em;
  line-height: 1em;
  text-align: center;
}

#credits a {
  color: #fff;
  text-decoration: none;
  transition: color .33s;
}

#credits a:hover {
    color: silver;
}

#credits a:visited {
  text-decoration: none;
    color: silver;
}


    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 30px;
    }

    @media (max-width: 1024px) {

      .grid {

        grid-template-columns: 1fr 1fr;

      }

}



    @media (max-width: 768px) {

      .grid {

        grid-template-columns: 1fr;

      }

}