@keyframes one {
  0%   {color: #0000008a;}
  50% {color: #ff3535;}
  100% {color: white;text-shadow: 0px 0px 10px red;filter: drop-shadow(0px 0px 10px red);}
}
@keyframes two {
  0%   {color: #0000008a;}
  50% {color: white;text-shadow: 0px 0px 10px rgba(255,255,255,0.5);}
  100% {color: #e8e8e8;}
}
@keyframes intro {
  0%   {background: black;}
  100% {background: #0b0d17e6;}
}
@keyframes logo {
  0%   {transform: scale(0.8) translateY(90px);}
  80% {transform: scale(1) translateY(90px);}
  90% {transform: translateY(30px);}
  100% {transform: translateY(40px);}
}
@keyframes logo-to-up {
  0%   {transform: translateY(80px);}
  60%  {transform: translateY(-10px);}
  100% {transform: translateY(0px);}
}
@keyframes to-up {
  0%   {transform: translateY(100px);opacity: 0;}
  60%  {transform: translateY(-10px);}
  100% {transform: translateY(0px);opacity: 1;}
}
@keyframes top-nav {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}
.top-nav {
  animation: top-nav 1s ease 4.8s 1 normal forwards;
}
.logo-paragraph {
  animation: to-up 1s ease 4.6s 1 normal forwards;
}
.logo-button {
  animation: to-up 1s ease 4.8s 1 normal forwards;
}
.intro {
  animation: intro 4.3s ease 0s 1 normal forwards;
  box-shadow: 0px 0px 1000px inset black !important;
}
.logo {
  animation: logo 5.3s ease 0.2s 1 normal forwards;
}
.L1 {
  margin-right: -15px !important;
  margin-top: 3px !important;
  font-size: 115px !important;
  animation: one 0.5s linear 0.7s 1 normal forwards;
}
.L2 {
  animation: one 0.5s linear 1.7s 1 normal forwards;
}
.L3 {
  animation: two 0.2s linear 2.7s 1 normal forwards;
}
.L4 {
  animation: two 0.2s linear 3.1s 1 normal forwards;
}
.L5 {
  animation: two 0.2s linear 3.8s 1 normal forwards;
}
.L6 {
  animation: two 0.2s linear 2.9s 1 normal forwards;
}
.L7 {
  animation: two 0.2s linear 2.7s 1 normal forwards;
}
.L8 {
  animation: two 0.2s linear 3.6s 1 normal forwards;
}
.L9 {
  animation: two 0.2s linear 3.4s 1 normal forwards;
}
.L10 {
  animation: two 0.2s linear 4s 1 normal forwards;
}
.logo{
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.14);
  color: #00000070 !important;
  margin: auto !important;
  font-weight: lighter !important;
  transform: translateY(100px);
}
.logo > div {
  padding: 30px !important;
}
.logo div div {
  margin-right: 10px;
  margin-left: 10px;
}
html,
body {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    position: relative !important;
    height: 100% !important;
    background: #fafafa !important;
}
p:not(.ui.modal p) {
  font-size: medium !important;
}
.ui.text.menu .header.item {
  color: white !important;
  font-size: 30px;
  padding-left: 40px;
}
.ui.menu {
  background: transparent !important;
  border: 0 !important;
  transition: 0.5s;
}
.ui.menu a.item {
  cursor: pointer;
  color: white !important;
}
.ui.menu a.item:hover {
  cursor: pointer;
  color: #fdd868 !important;
}
.ui.text.menu .item {
  padding-right: 50px !important;
}
.contact-us-header, .special-offer-header {
  padding: 70px !important;
  padding-bottom: 0 !important;
}
.contact-us-content, .special-offer-content, .products-content, .image-container {
  padding: 50px !important;
}
.cms-content, .apps-content {
  padding: 50px !important;
  padding-left: 0 !important;
}
.apps-title {
  font-size: 40px !important;
}
.products-title, .top-title {
  padding: 70px !important;
}
.products-title h1, .top-title h1, .contact-us-header h1, .special-offer-header h1, .features-header h1 {
  font-size: 50px !important;
}
.logo-inner {
  font-size: 90px !important;
}
.top-content {
  padding: 50px !important;
}
@media only screen and (max-width: 700px) {
  .special-offer-content, .contact-us-content
  , .products-content, .image-container {
    padding: 15px !important;
  }
  .contact-us-header, .special-offer-header {
    padding: 0px !important;
    padding-bottom: 50px !important;
  }
  .apps-title {
    font-size: 30px !important;
  }
  .products-title, .top-title {
    padding: 70px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
    padding-bottom: 50px !important;
  }
  .top-content {
    padding: 0px !important;
    padding-bottom: 50px !important;
  }
  .products-title h1, .top-title h1, .contact-us-header h1, .special-offer-header h1, .features-header h1 {
    font-size: 30px !important;
  }
  .logo-inner {
    font-size: 40px !important;
  }
  .logo > div {
      padding: 15px !important;
      padding-bottom: 50px !important;
  }
  .logo div div {
      margin-left: 0px !important;
  }
  .L1 {
    margin-right: -5px !important;
    margin-top: 3px !important;
    font-size: 60px !important;
  }
  .top-nav {
    display: none;
  }
  .cms-content, .apps-content {
    text-align: center !important;
  }
  .intro {
    box-shadow: 0px 0px 0px inset black !important;
  }
}
@media only screen and (max-width: 980px) {
  .cms-content, .apps-content {
    padding: 20px !important;
  }
}

.ui.menu:not(.main-menu-options .ui.menu) {
  background: transparent !important;
  border: 0 !important;
  transition: 0.5s;
}

.tiny-btn {
  padding: 10px !important;
  height: 40px !important;
  width: 90px !important;
  font-size: x-large !important;
  border-radius: 12px !important;
  margin: 0 !important;
}

.ui.input.iotheme.hidden-input {
  width: 50px !important;
  padding: 0 !important;
  text-align: center !important;
  border: 0 !important;
  background: transparent !important;
  font-size: x-large !important;
 }

 .custom-popup {
   min-width: 300px;
   height: max-content;
   background: white;
   z-index: 99999;
   position: absolute;
   margin: 40px -12px;
   border: 1px solid white;
   border-radius: 10px;
   padding: 20px;
   box-shadow: 0 0 70px #848484a1;
   max-height: 300px;
   overflow-y: hidden;
  }

  .custom-popup.inverted {
    background: #111115 !important;
    border: 1px solid #797979 !important;
    box-shadow: 0 0 70px #000000a1 !important;
  }

  .ui.tabular.menu .active.item {
    color: #fdd868 !important;
    background: rgba(29, 33, 47, 0.92) !important;
    border-color: #ffffff59 !important;
    border-top: 5px solid #fdd868 !important;
    box-shadow: 0px -20px 100px #fdd868;
    text-shadow: 0 0 20px #fdd868;
  }

  .ui.tabular.menu .item {
    background: rgba(29, 33, 47, 0.92) !important;
  }

  .ui.tabular.menu .item:first-child {
    border-top-right-radius: 10px !important;
  }

  .ui.tabular.menu .item:last-child {
    border-top-left-radius: 10px !important;
  }