/* Nathan Chapman, CHPMN Portfolio Design System CSS
2021 */
body {
  font-family: 'Roboto', sans-serif;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a.btn:hover {
  text-decoration: none;
}

.index, .about {
  background-color: #4B4B4B;
}

/* Fonts */
.text-georgia {
  font-family: 'Georgia', serif;
}

/* Utilities */
.p-10 {
  padding: 10%;
}

.pt-10 {
  padding-top: 10%;
}

.pb-10 {
  padding-bottom: 10%;
}

.py-10 {
  padding-top: 10%;
  padding-bottom: 10%;
}

.px-10 {
  padding-left: 10%;
  padding-right: 10%;
}

.pb-15 {
  padding-bottom: 15%;
}

/* Text Colors */
.text-cream, a.text-cream {
  color: rgba(255, 247, 236, 1);
}

a.nav-link {
  color: rgba(255, 247, 236, 1);
}

.text-alpha {
  color: rgba(255, 247, 236, .7);
}

.text-copper, a.text-copper {
  color: rgba(184, 115, 51, 1);
}

.text-teal, a.text-teal {
  color: rgba(59, 224, 212, 1) !important;
}

.text-dark {
  color: rgba(34, 37, 41, 1);
}

.text-darkgray {
  color: rgba(75, 75, 75, 1);
}

/* Backgrounds */
.bg-cream {
  background-color: rgba(255, 247, 236, 1) !important;
}

.navbar-toggler {
  background-color: rgba(255, 247, 236, 1);
}

.dropdown-menu {
  background-color: rgba(34, 37, 41, 1);
  border-radius: 10px;
}

.dropdown-menu>li:hover a {
  background-color: rgba(0, 0, 0, 0);
}

.dropdown-item {
  color: rgba(255, 247, 236, 1);
}

.dropdown-item:hover {
  color: rgba(255, 247, 236, .7);
  text-decoration: none;
}

.bg-alpha {
  background-color: rgba(255, 247, 236, .7) !important;
}
.bg-darkalpha {
  background-color: rgba(0, 0, 0, .2) !important;
}

.bg-copper {
  background-color: rgba(184, 115, 51, 1) !important;
}

.bg-teal {
  background-color: rgba(59, 224, 212, 1) !important;
}

.bg-dark {
  background-color: rgba(34, 37, 41, 1) !important;
}

.bg-dark-2 {
  background-color: rgba(34, 37, 41, .2) !important;
}

.bg-darkgray {
  background-color: rgba(75, 75, 75, 1) !important;
}

.bg-nate {
  background-image: url(../img/bg-nate-sm.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
}

.bg-brand-bwn {
  background-image: url(../img/bg-brand-bwn.svg);
  background-repeat: no-repeat;
  background-position: center center;
}

/* BS5 Adds/Overrides */
.card {
  border-radius: 10px;
  border: 0;
  background-color: rgba(34, 37, 41, 1);
}

.card:hover {}
.card-comcast {
  /* background-image:url(../img/case-header-comcast.jpg); */
  background-image:url(../img/splash-comcast.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.card-townsquare {
  /* background-image:url(../img/case-header-comcast.jpg); */
  background-image:url(../img/splash-campfire.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.card-verizon {
  background-image:url(../img/v-four-channels.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.card-comcast .card-body::after, .card-townsquare .card-body::after, .card-verizon .card-body::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 100%;
  left: 0;
  right:0;
  top:0;
  bottom:0;
  background-color: rgba(0,0,0,.7);
  border-radius: 10px;
  z-index: 0;
}
.card-townsquare .card-body::after {
  background-color: rgba(250,163,82,.3);
}
.card-comcast h1, .card-comcast img, .card-townsquare h1, .card-townsquare img, .card-verizon h1, .card-verizon img {
  z-index: 100;
  position: relative;
}
/* Components */
.btn-darkgray {
  background-color: #4B4B4B;
  color: #fff;
}

.btn-darkgray:hover {
  background-color: #4B4B4B;
}

.btn-teal {
  color: #fff;
  background-color: rgba(59, 224, 212, 1);
  border-color: rgba(59, 224, 212, 1);
}

.btn-teal:hover {
  background-color: rgba(59, 224, 212, .7);
  border-color: rgba(59, 224, 212, .7);
}

a.btm-link {
  font-size: 1.15rem;
  text-decoration: none;
  color: rgba(255, 247, 236, 1) !important;
}

a.btm-link:hover {
  color: rgba(255, 247, 236, .6) !important;
}

.hidden {
  opacity: 0;
  display: none;
  background-color: transparent;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;
}

.buttons p {
  position: relative;
  z-index: 0;
}

.card:hover .hidden {
  opacity: 1;
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(75, 75, 75, .8);
  transition: background-color 0.5s;
  z-index: 100;
  border-radius: 10px;
}

.cover {
  max-width: 72em;
}

.splash .card img {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.splash .card .card-body img {
  border-radius: 0;
}

/* Animation */
.fly {
    animation: animation_2 2s;
}
.baaaad {
    animation: fade-in 1.4s;
}
@keyframes fade-in {
    from {
        opacity: 0;
        /*                transform: scale(.7, .7)*/
        /*                transition: opacity 0.2s ease-in, visibility 0s;*/
        /*                transform: translateX(50px);*/
        transform: translate3d(0, 50px, 0);
    }
    to {
        opacity: 1;
    }
}
@keyframes animation_2 {
    0%,
    21.428571428571423% {
        transform: matrix3d(0.95, 0, 0, 0, 0, 0.95, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 0;
        animation-timing-function: ease-in-out
    }
    100% {
        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 1;
    }
}
@media (max-width: 576px) {
  .bg-nate {
    background: #4B4B4B url(../img/bg-nate-sm.jpg) no-repeat;
    background-position: right bottom;
    background-size: contain;
    height: 250px;
  }

  .m-rel {
    position: relative !important;
  }

  .hashtags {
    position: relative;
    bottom: 0;
    left: 0;
  }

  .splash .card img {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

}