/* Dark Mode Core Styles and navigation */
@media screen and (min-width: 0px) {
  :root {
    --dark: #121212;
    --medium: #292929;
    --light: #3c3c3c;
  }
  .dark-mode-button {
    background: transparent;
    border: none;
    height: 1.2em;
    width: 1.2em;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .dark-mode-button img {
    display: block;
    width: 0.75em;
    position: absolute;
  }
  .dark-mode-button:before {
    content: '';
    position: absolute;
    display: block;
    height: 1.75em;
    width: 1.75em;
    background: var(--primary);
    opacity: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: rgba(100, 100, 111, 0.2) 0em 0.35em 1.45em 0px;
  }
  body.dark-mode .top-dark-mode-button:before {
    background: var(--primaryDark);
  }
  .top-dark-mode-button .moon {
    transform: translateY(0px);
    transition: transform .3s, opacity .3s;
    opacity: 1;
    visibility: visible;
  }
  .top-dark-mode-button .sun {
    transform: translateY(1.5em);
    transition: transform .3s, opacity .3s;
    opacity: 0;
    visibility: hidden;
  }
  body.dark-mode .top-dark-mode-button .moon {
    transform: translateY(-1.5em);
    transition: transform .3s, opacity .3s;
    opacity: 0;
    visibility: hidden;
  }
  body.dark-mode .top-dark-mode-button .sun {
    transform: translateY(0);
    transition: transform .3s, opacity .3s;
    opacity: 1;
    visibility: visible;
  }
  .dark-mode-group {
    position: absolute;
    top: -17em;
    right: 1em;
    width: 4em;
    height: 23.5em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .dark-mode-group p {
    font-size: .7em !important;
    text-align: center;
    color: #fff;
  }
  .top-dark-mode-button {
    position: absolute;
    font-size: 15px;
    top: 1.4em;
    right: 4em;
    z-index: 1001;
  }
  .dark-toggle.dark-mode {
    background: var(--primary);
    border: none;
  }
  /* Navigation */
  .dark {
    display: none;
    opacity: 0;
    z-index: -1;
  }
  body.dark-mode .dark {
    display: block;
    opacity: 1;
    z-index: 1;
  }
  body.dark-mode .light {
    display: none;
  }
  body.dark-mode .side-nav a {
    color: #fff;
  }
  body.dark-mode .hamburger-inner,
  body.dark-mode .hamburger-inner::before,
  body.dark-mode .hamburger-inner::after {
    background: #fff;
  }
  body.dark-mode .hamburger.is-active .hamburger-inner::after,
  body.dark-mode .hamburger.is-active .hamburger-inner::before {
    background: #fff;
  }
  /* Body and Core Elements */
  body.dark-mode {
    background: var(--dark);
  }
  body.dark-mode h2,
  body.dark-mode p {
    color: #fff;
    opacity: .9;
  }
  body.dark-mode p {
    opacity: .9;
  }
  body.dark-mode p a {
    color: #ed342f;
  }
  body.dark-mode h3 {
    color: var(--primary);
  }
  body.dark-mode .contact-button:hover {
    background: #1a1a1a;
    color: #fff !important;
  }
  body.dark-mode .contact-button:hover:before {
    border: 0.05em solid var(--primary);
  }
  body.dark-mode .navbar-menu {
    background: var(--dark);
  }
  body.dark-mode .navbar-menu img {
    display: none;
  }
}
/* Small Desktop */
@media screen and (min-width: 1024px) {
  .navbar-menu .dark {
    display: none;
  }
  body.dark-mode .navbar-menu img {
    display: block;
  }
  body.dark-mode .navbar-menu {
    overflow: visible;
  }
  body.dark-mode .navbar-menu .light {
    display: none;
  }
  body.dark-mode .navbar-menu .dark {
    display: block;
  }
  body.dark-mode:before {
    background: var(--dark);
  }
  body.scroll .top-dark-mode-button {
    top: 1.3em;
  }
  .top-dark-mode-button {
    position: fixed;
    left: auto;
    top: 3.4em;
    right: 1.55em;
    z-index: 50000;
    transition: top .3s;
  }
  .top-dark-mode-button:after {
    color: #000;
  }
  .top-dark-mode-button:before {
    display: none;
  }
  body.dark-mode .navbar-menu:before {
    background: var(--dark);
  }
  body.dark-mode .navbar-menu {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: transparent;
  }
}
/* Mid Size Desktop */
@media screen and (min-width: 1200px) {
  .top-dark-mode-button {
    right: auto;
    left: 50%;
    margin-left: 28.95em;
    font-size: inherit;
  }
}
/* Regular Desktop */
@media screen and (min-width: 1500px) {
  .top-dark-mode-button {
    padding: 0;
    height: 1.2em;
    width: 1.2em;
  }
  .top-dark-mode-button img {
    width: 0.75em;
    height: 1.2em;
    display: block;
  }
}
/*-- -------------------------- -->
<---        Page Styles         -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  body.dark-mode {
    /*-- -------------------------- -->
        <---          Landing           -->
        <--- -------------------------- -*/
    /*-- -------------------------- -->
        <---           About            -->
        <--- -------------------------- -*/
    /*-- -------------------------- -->
        <---          Virtual           -->
        <--- -------------------------- -*/
    /*-- -------------------------- -->
        <---            Blog            -->
        <--- -------------------------- -*/
    /*-- -------------------------- -->
        <---          Reviews           -->
        <--- -------------------------- -*/
    /*-- -------------------------- -->
        <---           Footer           -->
        <--- -------------------------- -*/
    /*-- -------------------------- -->
        <---          Footer            -->
        <--- -------------------------- -*/
  }
  body.dark-mode .opacity-dark {
    opacity: .05 !important;
  }
  body.dark-mode span {
    color: #fff;
  }
  body.dark-mode #hero:after {
    filter: brightness(90%);
  }
  body.dark-mode #hero #dark {
    background: #000;
    mix-blend-mode: initial;
    opacity: .76;
  }
  body.dark-mode #hero .hero-content .heroText #home-h {
    color: #fff;
  }
  body.dark-mode #hero .hero-content .heroText h2 {
    color: #fff;
    opacity: .9;
  }
  body.dark-mode #hero .hero-content .button-solid {
    background: var(--secondary);
  }
  body.dark-mode #hero .hero-content .button-solid:before {
    border: 0.05em solid #ffffff;
  }
  body.dark-mode #hero .hero-content .button-solid:hover {
    color: #fff !important;
    background: var(--primary);
  }
  body.dark-mode #about .play-link {
    color: #fff;
  }
  body.dark-mode #about .play-link span {
    color: #fff;
  }
  body.dark-mode #virtual .content-template {
    background: var(--medium);
  }
  body.dark-mode #blog .item {
    background: var(--medium);
  }
  body.dark-mode #blog h3 {
    color: #fff;
  }
  body.dark-mode #blog p {
    opacity: .9;
  }
  body.dark-mode #reviews .review {
    background: var(--medium);
  }
  body.dark-mode #reviews .name {
    color: #fff;
  }
  body.dark-mode #reviews .name span {
    color: #fff;
  }
  body.dark-mode #footer {
    background: #040303;
  }
  body.dark-mode .credit {
    background: #000;
  }
  body.dark-mode #footer:before {
    background: #1a1a1a;
  }
  body.dark-mode #footer .top5 {
    opacity: .05;
  }
  body.dark-mode #footer .bolt:before {
    background: #121212;
    opacity: 1;
  }
  body.dark-mode #footer .bolt svg path {
    fill: #fff;
  }
  body.dark-mode #footer ul li a {
    color: #fff;
  }
  body.dark-mode #footer .item h2 {
    color: #fff;
  }
  body.dark-mode #footer .item p,
  body.dark-mode #footer .item span {
    opacity: .9;
    color: #fff;
    font-weight: normal;
  }
  body.dark-mode #footer .item .email {
    color: var(--primary);
  }
  body.dark-mode #footer .credit p span {
    color: #fff !important;
  }
  body.dark-mode #footer .credit a {
    color: var(--primary);
  }
}
/* Tablet */
/* Small Desktop */
/* Large Desktop */