@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
/*
  BASIC STYLE
*/
* {
  outline: none;
}

body {
  font: 100% "Roboto", sans-serif;
  color: #FFF;
  background-color: #121628;
}
body #devices {
  color: #121628;
  background-color: #FFF;
}

h1 {
  font-size: 42px;
  font-weight: 700;
  line-height: 55px;
}
h1.sitename {
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  max-width: 1800px;
  margin: 0 auto;
  padding-left: 24px;
}

h2 {
  font-size: 42px;
  font-weight: 700;
  line-height: 55px;
}

a {
  color: #FFF;
  text-decoration: none;
}
a:visited, a:active, a:link {
  text-decoration: none;
}
a:hover {
  color: #FFF;
}

footer {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  height: 150px;
}
footer a:hover {
  color: #FFF;
  text-decoration: underline;
}
footer .text-end a:not(:last-child) {
  margin-right: 40px;
}
@media (max-width: 575.98px) {
  footer .text-end a:not(:last-child) {
    margin-right: 14px;
  }
}

.flip-horizontal::before {
  transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
}

/*
  GRAPHICS
*/
#chakras {
  position: relative;
  min-height: 1080px;
}
#chakras .row:first-child {
  z-index: 4;
}
#chakras #chakras-bg {
  position: absolute;
  top: 0;
  background-image: url(img/background_v4.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  z-index: 1;
}
@media (max-width: 767.98px) {
  #chakras #chakras-bg {
    top: 80px;
  }
}
#chakras #chakras-bg-activated {
  position: absolute;
  top: 0;
  background-image: url(img/chakras/C0-Gradient.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  z-index: 2;
  transition: background-image 0.3s ease-out;
  transform: translateZ(0);
}
@media (max-width: 767.98px) {
  #chakras #chakras-bg-activated {
    top: 80px;
  }
}
#chakras #silhouette {
  position: absolute;
  top: 0;
  background-image: url(img/silhouette.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  z-index: 3;
}
@media (max-width: 767.98px) {
  #chakras #silhouette {
    top: 80px;
  }
}
#chakras #chakras-items {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}
@media (max-width: 767.98px) {
  #chakras #chakras-items {
    top: 80px;
  }
}
#chakras #chakras-items .chakra-item:first-of-type {
  margin-top: 63.4px;
}
#chakras #chakras-items .chakra-item {
  position: relative;
  margin: 0 auto;
  width: 139.6px;
  height: 133.4px;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: background-image 0.3s ease-out;
  transform: translateZ(0);
}
#chakras #chakras-items .chakra-item:nth-child(1) {
  background-image: url(img/chakras/Chakra1-Inactive.svg);
}
#chakras #chakras-items .chakra-item:nth-child(1).idle {
  background-image: url(img/chakras/Chakra1.svg);
}
#chakras #chakras-items .chakra-item:nth-child(1):hover, #chakras #chakras-items .chakra-item:nth-child(1).active {
  background-image: url(img/chakras/Chakra1-Active.svg);
}
#chakras #chakras-items .chakra-item:nth-child(2) {
  background-image: url(img/chakras/Chakra2-Inactive.svg);
}
#chakras #chakras-items .chakra-item:nth-child(2).idle {
  background-image: url(img/chakras/Chakra2.svg);
}
#chakras #chakras-items .chakra-item:nth-child(2):hover, #chakras #chakras-items .chakra-item:nth-child(2).active {
  background-image: url(img/chakras/Chakra2-Active.svg);
}
#chakras #chakras-items .chakra-item:nth-child(3) {
  background-image: url(img/chakras/Chakra3-Inactive.svg);
}
#chakras #chakras-items .chakra-item:nth-child(3).idle {
  background-image: url(img/chakras/Chakra3.svg);
}
#chakras #chakras-items .chakra-item:nth-child(3):hover, #chakras #chakras-items .chakra-item:nth-child(3).active {
  background-image: url(img/chakras/Chakra3-Active.svg);
}
#chakras #chakras-items .chakra-item:nth-child(4) {
  background-image: url(img/chakras/Chakra4-Inactive.svg);
}
#chakras #chakras-items .chakra-item:nth-child(4).idle {
  background-image: url(img/chakras/Chakra4.svg);
}
#chakras #chakras-items .chakra-item:nth-child(4):hover, #chakras #chakras-items .chakra-item:nth-child(4).active {
  background-image: url(img/chakras/Chakra4-Active.svg);
}
#chakras #chakras-items .chakra-item:nth-child(5) {
  background-image: url(img/chakras/Chakra5-Inactive.svg);
}
#chakras #chakras-items .chakra-item:nth-child(5).idle {
  background-image: url(img/chakras/Chakra5.svg);
}
#chakras #chakras-items .chakra-item:nth-child(5):hover, #chakras #chakras-items .chakra-item:nth-child(5).active {
  background-image: url(img/chakras/Chakra5-Active.svg);
}
#chakras #chakras-items .chakra-item:nth-child(6) {
  background-image: url(img/chakras/Chakra6-Inactive.svg);
}
#chakras #chakras-items .chakra-item:nth-child(6).idle {
  background-image: url(img/chakras/Chakra6.svg);
}
#chakras #chakras-items .chakra-item:nth-child(6):hover, #chakras #chakras-items .chakra-item:nth-child(6).active {
  background-image: url(img/chakras/Chakra6-Active.svg);
}
#chakras #chakras-items .chakra-item:nth-child(7) {
  background-image: url(img/chakras/Chakra7-Inactive.svg);
}
#chakras #chakras-items .chakra-item:nth-child(7).idle {
  background-image: url(img/chakras/Chakra7.svg);
}
#chakras #chakras-items .chakra-item:nth-child(7):hover, #chakras #chakras-items .chakra-item:nth-child(7).active {
  background-image: url(img/chakras/Chakra7-Active.svg);
}

/*
  SHOP - DEVICES
*/
#devices {
  background-color: #FFF;
}
#devices h2 {
  font-size: 34px;
  font-weight: 700;
  line-height: 45px;
}
#devices h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
}
#devices .btn {
  border-radius: 0 !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}
#devices .btn.btn-c-buy {
  color: #FFF;
  background-color: #121628;
}
#devices .btn.btn-c-buy:hover {
  background-color: #863DFF;
}
#devices .device-subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/*
  AUDIO CONTROLS
*/
#hz-value {
  font-size: 30px;
  font-weight: 700;
  line-height: 38px;
  text-align: right;
  -webkit-appearance: none;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
  background-color: transparent;
  color: #FFF;
  min-width: 45%;
  /* Chrome, Safari, Edge, Opera */
  /* Firefox */
  -moz-appearance: textfield;
}
#hz-value::-webkit-outer-spin-button, #hz-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
@media (max-width: 991.98px) {
  #hz-value {
    min-width: unset;
  }
}

#play-frequency, #stop-frequency,
#left-speaker, #right-speaker {
  font-size: 26px;
  font-weight: 400;
  line-height: 34px;
  cursor: pointer;
}
#play-frequency.inactive, #stop-frequency.inactive,
#left-speaker.inactive, #right-speaker.inactive {
  color: #707070;
}

small.controls-text {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  min-width: 45%;
}
@media (max-width: 991.98px) {
  small.controls-text {
    min-width: unset;
  }
}

.controls-text {
  font-size: 16px;
  font-weight: 300;
  line-height: 21px;
}

/*# sourceMappingURL=style.css.map */