/* --- Body --- */

body {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;
}

.intro-header .post-heading h1,
.intro-header .page-heading h1 {
  margin-top: 0.5rem;
}

em {
  opacity: 0.875;
}

a,
a:hover,
a:focus {
  color: #1b998b;
}

/* --- Center --- */

.center {
  text-align: center;
  display: block;
  align-items: center;
  justify-content: space-around;
}


/* --- Navbar --- */

.navbar-custom {
  border-bottom: 2.5px solid #f26419;
  padding-right: 1.5rem;
}

.navbar-custom .navbar-nav .nav-item {
  font-size: 1rem;
  text-transform: capitalize;
}

/* increasing size of projects navbar section width */
.navbar-custom .navbar-nav .nav-item.dropdown {
  padding-right: 0.7375rem;
  padding-left: 0.7375rem;
  /* added transparent border to project links section, which will become visible later on */
  border: 2.75px solid transparent;
  border-width: 2.75px 2.75px 3px 2.75px;
}

.navbar-custom .navbar-nav .nav-item.dropdown .dropdown-menu {
  background-color: transparent;
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .nav-item.dropdown .dropdown-menu .dropdown-item,
.navbar-custom .navbar-brand:focus,
.navbar-custom .navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle:focus {
  color: #ffffff;
}

.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item:hover {
  /* added individual hover color variable for navbar  */
  color: #175676;
  cursor: pointer;
}

@media (min-width: 1200px) {

  .firework-launcher-mobile {
    display: none;
  }

  .navbar-custom {
    padding-top: 0.7375rem;
    padding-bottom: 0.7375rem;
  }

  .navbar-custom .navbar-brand {
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
  }

  .navbar-custom.top-nav-short {
    height: 3.45rem;
    padding-top: 0.55rem;
  }

  .navbar-custom .navbar-nav .nav-item.dropdown {
    transform: translate(0px, -3px);
    /* colors below must be transparent because they are overlapping with other elements. */
    background-color: transparent;
    border-color: transparent;
  }

  .navbar-custom .navbar-nav .nav-item.dropdown:hover,
  .navbar-custom .navbar-nav .nav-item.dropdown:focus {
    /* background-color: ; */
    border-color: #f26419;
  }

  .navbar-custom .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }

  .navbar-custom .navbar-nav .nav-item.dropdown .dropdown-menu {
    width: 103.5%;
    transform: translate(-3px, 2px);
  }

  .navbar-custom .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
    font-size: 0.825em;
    font-weight: 700;
    border-width: 0px 2.75px 2px 2.75px;
    border-color: #f26419;
  }
}

@media (max-width: 1200px) {

  .firework-launcher-desktop {
    display: none;
  }

  .navbar-custom .avatar-container .avatar-img-border {
    width: 125%;
    margin-left: -75%;
  }

  .navbar-custom .navbar-nav .nav-link {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }

  .navbar-custom .navbar-toggler {
    border-width: 1.5px;
  }

  .navbar-custom .navbar-collapse {
    border-width: 2px;
  }

  .navbar-toggler:hover {
    border-color: #439aa5;
  }

   /* .navbar-custom .navbar-toggler[aria-expanded="true"] {
     background-color: ;
   } */

  .navbar-custom .navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle {
    transform: translate(-15px, 0px);
    outline: none;
  }

  .navbar-custom .navbar-nav .nav-item.dropdown .dropdown-menu {
    display: block;
  }

  .navbar-custom .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-item {
    font-size: 0.85em;
    font-weight: 800;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    padding-left: 1rem;
  }
}

/* using png photos with transitions for firework on navbar for desktop. */
/* using a gif in the same spot on mobile. */
/* the same transition/animation is being used for the navbar cursor on desktop. */
@keyframes kidpix_cursor_animate {
   0% { cursor: url(../img/kidpix_dynamite_eraser_large_1.png), auto; }
   50% { cursor: url(../img/kidpix_dynamite_eraser_large_1.png), auto; }
   51% { cursor: url(../img/kidpix_dynamite_eraser_large_2.png), auto; }
   100% { cursor: url(../img/kidpix_dynamite_eraser_large_2.png), auto; }
}

.navbar-custom .navbar-brand:hover {
  cursor: url(../img/kidpix_dynamite_eraser_1.png), auto;
  animation: kidpix_cursor_animate 0.25s infinite;
  -webkit-animation: kidpix_cursor_animate 0.25s infinite;
}

.kidpix_png_top {
  animation-name: kidpix_png_animate;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 0.125s;
  animation-direction: alternate;
}

@keyframes kidpix_png_animate {
  0% { opacity: 1; }
  50% { opacity: 1; }
  51% { opacity: 0; }
  100% { opacity: 0; }
}


/* --- Footer --- */

footer {
  border-top: 2.5px solid #f26419;
}

footer a:focus {
  color: #ffffff;
}

footer a:hover {
  color: #175676;
  text-decoration: none;
}

.fa-stack-1x {
  color: #ffffff;
}

.fa-stack-1x:hover,
.fa-stack-1x:focus {
 color: #f26419;
}

.list-inline a,
.list-inline a:focus {
  color: #f07b41;
}

.list-inline a:hover {
  color: #ffffff;
}

.author-site a,
.theme-by a {
  font-weight: 625;
}

@media (max-width: 1200px) {
  footer .list-inline {
    margin-bottom: 1rem;
  }
  footer {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

.fa-lg {
  font-size: 1.33em;
}

/* --- Posts Preview Page --- */

.post-preview .post-meta,
.post-heading .post-meta {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.post-preview {
  border-bottom: 0px;
}

.post-preview a:hover,
.post-preview a:focus {
  color: #1b998b;
}

.post-preview .post-image-small {
  display: block;
}

.post-preview .post-image-small img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 1200px) {
  .post-preview .post-image-small {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .post-preview .post-image-small img {
    max-height: 20rem;
  }
}

@media (max-width: 1200px) {
  .post-preview .post-image-small {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .post-preview .post-image-small img {
    max-height: 12.5rem;
  }
}


/* --- Buttons --- */

button:focus {
  outline: none;
}

.btn-group {
  background-color: #f07b41;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-size: 17px;
  font-weight: 750;
  padding: 16px 31px;
  text-decoration: none;
  border-radius: 28px;
  border: 4.5px solid transparent;
  /* static button sizes across all buttons. */
  height: 65px;
  width: 205px;
}

.btn-group:hover,
.btn-group:focus {
  color: #ffffff;
  background-color: #f07b41;
  border-color: #c44536;
  text-decoration: none;
  font-weight: 750;
}


/* --- Tag Links --- */

.blog-tags a {
  /* changed tag border radius to be consistent with site buttons. */
  border-radius: 28px;
  border: 2.5px solid transparent;
  color: #404040;
}

.blog-tags a:hover,
.blog-tags a:focus {
  color: #1b998b;
  border-color: #1b998b;
  background-color: #ffffff;
}

.post-preview .blog-tags {
  opacity: 0.8;
}

/* --- Tags Page --- */

.linked-section {
  margin-left: 1.5rem;
}

@media (min-width: 1200px) {
  .post-list {
    margin-left: 2.78rem;
  }
}

/* --- Pagination --- */

@media (min-width: 800px) {
  .page-link-mobile {
    display: none;
  }
}

@media (max-width: 800px) {
  .page-link-desktop {
    display: none;
  }
}

.pagination .page-item .page-link {
  color: #ffffff;
  text-transform: capitalize;
  background-color: #20b3a1;
  border: 4.5px solid transparent;
  border-radius: 28px;
  padding: 10px 17.5px;
  text-align: center;
  font-weight: 750;
}

.pagination .page-item .page-link-desktop {
  width: 175px;
}

.pagination .page-item .page-link-mobile {
  width: 55px;
  font-size: 20px;
  padding-right: 32.5px;
}

.pagination .page-item .page-link:hover,
.pagination .page-item .page-link:focus {
  color: #ffffff;
  background-color: #20b3a1;
  border: 4.5px solid #197278;
  font-weight: 750;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

.rotate {
  transform: rotate(180deg);
  /* Safari, Firefox IE & Opera below. */
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}

/* --- Social Share Icons --- */

.btn-social-icon:focus {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

/* --- Thumbnails --- */

/* .post-preview .post-image .post-image-short { */
  /* display: inline; */
/* } */


/* --- General D3, Interactivity & Animations --- */

.no_selection,
.navbar-custom,
.btn-group,
.blog-tags,
.pagination .page-item .page-link,
#social-share-section,
footer {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  -o-user-select: none; /* Opera */
  user-select: none;
}