* {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important; /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

html,body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
}

.banner-title h2{font-size: 34px;letter-spacing: .6rem;}
.nav-material .title{display: none;}
.un .timeline-marker:before{background: #686868;}
.start .activity-type,.end .activity-type{background-color: #d14130;}
.un .accent-color{background-image: linear-gradient(120deg, #c1c9cd 0%, #b2b8bb 100%)!important;color: #666; cursor: not-allowed;pointer-events: none;}
a.accent-color:hover{color: #823737!important;}
/*.hero-material:before{
	content: "";
    background-image: url(../img/temple-w.png);
    width: 150px;
    height: 150px;
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    background-size: cover;
    opacity: .08;
}*/
hr.md{margin: 1rem}
.modal.features {top: 17% !important}
.coffee {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.coffee .vapor {
    width: 5em;
    height: 5em;
    display: flex;
    justify-content: space-between;
}

.coffee .vapor span {
    width: 0.1em;
    min-width: 2px;
    background-color: white;
    animation: evaporation 2s linear infinite;
    filter: opacity(0);
}

.coffee .vapor span:nth-child(1) {
    animation-delay: 0.5s;
}

.coffee .vapor span:nth-child(2) {
    animation-delay: 0.1s;
}

.coffee .vapor span:nth-child(3) {
    animation-delay: 0.3s;
}

.coffee .vapor span:nth-child(4) {
    animation-delay: 0.4s;
}

.coffee .vapor span:nth-child(5) {
    animation-delay: 0.2s;
}
.dark.modal{height: 600px !important;overflow: hidden;background: #0b152f;}
.dark.modal *{color: #fff!important;}

.mo-fire {
  height: auto;
  position: fixed;
  left:5%;
  bottom: -150px;
  z-index: 4;
}

#svg-view {
    width: 252px;
    height: 125px;
    left: 0px;
}

.mo-fire svg {
  width: 100%;
  height: auto;
  position:relative;
  right:2.5rem;
}
.flame {
  animation-name: flameDisappear;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0.5;
  transform-origin: 45% 45% 0;
}
.flame.one {
  animation-delay: 1s;
  animation-duration: 3s;
}
.flame.two{
  animation-duration: 5s;
  animation-delay: 1s;
}


.flame-main {
  animation-name: flameMovement;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.flame-main.one {
  animation-duration: 2.2s;
  animation-delay: 1s;
}
.flame-main.two {
  animation-duration: 2s;
  animation-delay: 1s;
}
.flame-main.three {
  animation-duration: 2.1s;
  animation-delay: 3s;
}
.flame-main.four {
  animation-duration: 3.2s;
  animation-delay: 4s;
}
.flame-main.five {
  animation-duration: 2.5s;
  animation-delay: 5s;
}
@keyframes flameMovement {
  50% {
    transform: scale(0.98,1.0) translate(0, 2px) rotate(-1deg);
  }
}
@keyframes flameDisappear {
  0%{
    transform: translate(0) rotate(180deg);
  }
  50% {
     opacity: 1;
  }
  100% {
    transform: translate(-10px, -40px) rotate(180deg);
    opacity: 0;
  }
}





@keyframes evaporation {
    from {
        transform: translateY(0);
        filter: opacity(1) blur(0.2em);
    }

    to {
        transform: translateY(-4em);
        filter: opacity(0) blur(0.5em);
    }
}

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    /*border-radius: 10px;  */
    background-color: #ffffff; 
}
/*
| ----------------------------------------------------
| responsive
| ----------------------------------------------------
*/
@media (max-width: 1367px) {}


@media (max-width: 1025px) {}


@media (max-width: 769px) {
    .dark.modal{height: 500px !important;overflow: hidden;}
    .mo-fire svg{top: 50px;right: 4.5rem}
    .mo-fire {left:20%;bottom: -50px;z-index: 4; }
   
}


 /*iphone plus*/
@media (max-width: 415px) {
     .hero-material {height: 180px;}
     .mo-fire svg{top: 0;right: 2.5rem}
     .dark.modal{height: auto !important;overflow: hidden;}

}


/*iphone: 7px*/
@media (max-width: 376px) {  
  .btn-large{font-size: 14px;}

}
@media (max-width: 360px) {  
     .btn-large{height: auto;padding: 5px;min-height: 54px;}
     .btn-large.accent-color{line-height: 54px;}
}




/*iphone 5*/
@media (max-width: 321px) {  
      .btn-large{height: auto;line-height: 2rem;padding: 5px;min-height: 54px;}
     .btn-large.accent-color{line-height: 54px;}
}