*,
*::before,
*::after {
  box-sizing: border-box
}

* {
  margin: 0
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto
}

input,
button,
textarea,
select {
  font: inherit
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word
}

.grid {
  display: grid;
  grid-template-rows: repeat(var(--bs-rows, 1), 1fr);
  grid-template-columns: repeat(var(--bs-columns, 12), 1fr);
  gap: var(--bs-gap, 1.5rem);
  margin: 4rem 0
}

.grid .g-col-1 {
  grid-column: auto/span 1
}

.grid .g-col-2 {
  grid-column: auto/span 2
}

.grid .g-col-3 {
  grid-column: auto/span 3
}

.grid .g-col-4 {
  grid-column: auto/span 4
}

.grid .g-col-5 {
  grid-column: auto/span 5
}

.grid .g-col-6 {
  grid-column: auto/span 6
}

.grid .g-col-7 {
  grid-column: auto/span 7
}

.grid .g-col-8 {
  grid-column: auto/span 8
}

.grid .g-col-9 {
  grid-column: auto/span 9
}

.grid .g-col-10 {
  grid-column: auto/span 10
}

.grid .g-col-11 {
  grid-column: auto/span 11
}

.grid .g-col-12 {
  grid-column: auto/span 12
}

@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/Inter.ttf") format("woff");
  font-display: swap
}

body {
  font-family: "Inter", sans-serif, Arial, Helvetica, sans-serif;
  font-weight: 500
}

html,
body {
  scroll-behavior: smooth
}

.black {
  position: fixed;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: 99999999999;
  opacity: 1;
  pointer-events: none
}

.black.fadeout {
  animation: revealed forwards .2s linear
}

@keyframes revealed {

  0%,
  10% {
    opacity: 1;
  }

  99% {
    opacity: 0;
  }

  100% {
    display: none;
    background-color: #fff0;
  }
}

.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip-path: inset(50%);
  margin: -1px
}

section a {
  color: #3498db
}

.download {
  color: #3498db;
  display: flex;
  gap: .7rem;
  text-decoration: none;
  margin-bottom: 1rem
}

.download svg {
  transform: scale(1.4) translateY(0.2rem)
}

figure {
  margin-bottom: 1rem
}

figure figcaption {
  font-size: .9rem;
  padding-top: .3rem
}

p {
  padding-bottom: 1rem
}

.header-wrapper {
  width: 100%;
  height: auto;
}

.nav-wrapper {
  width: 100%;
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1
}

.content-wrapper {
  max-width: 80rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem
}

.glitch {
  position: relative
}

.glitch:before {
  content: attr(data-text);
  color: #e5007d;
  position: absolute;
  left: .2rem;
  top: 0;
  height: 100%;
  width: 100%;
  mix-blend-mode: multiply
}

.glitch:after {
  content: attr(data-text);
  color: #3498db;
  position: absolute;
  left: -0.2rem;
  top: 0;
  height: 100%;
  width: 100%;
  mix-blend-mode: multiply
}

.removecookies {
  background: #3498db;
  border: 2px solid #fff;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  border-radius: 50%;
  height: 4rem;
  width: 4rem;
  color: #fff;
  cursor: pointer
}

.removecookies:hover span {
  transform: translate(0px, 13px) rotate(0);
  transition: .05s
}

.removecookies span {
  font-size: .7rem;
  line-height: .7rem;
  display: block;
  text-align: center;
  transform: translate(-1px, 11px) rotate(-15deg);
  transition: .1s
}

h1 {
  font-size: 2.2rem
}

h2 {
  color: #000;
  font-size: 1.3rem;
  line-height: 1.4;
  margin-bottom: 10px
}

.right {
  float: right
}

@media only screen and (max-width: 720px) {
  h1 {
    font-size: 1.9rem
  }

  h2 {
    font-size: 1.2rem
  }

  p {
    font-size: 1rem
  }
  li {
	font-size: 1rem
  }
  ul {
	font-size: 1rem
  }
}

#kisa h1 {
  font-size: 4rem
}

#applications h1,
#network h1,
#aboutus h1,
#partners h1,
#teams h1 {
  font-size: 4rem;
  line-height: 50%
}

#applications h1 span,
#network h1 span,
#aboutus h1 span,
#partners h1 span,
#teams h1 span {
  line-height: 4.9rem;
  text-transform: uppercase
}

#partners .grid {
  align-items: center
}

.dark {
  background: #252525;
  padding: 3rem 0 1rem 0;
  color: #fff;
  margin-bottom: 4rem
}

.dark h1,
.dark h2 {
  color: #fff
}

.grad-bar {
  width: 100%;
  height: 5px;
  background: linear-gradient(-45deg, #e5007d, #009ee3, #e5007d, #009ee3);
  background-size: 400% 400%;
  animation: gradbar 15s ease infinite
}

@keyframes gradbar {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}

.navbar {
  display: grid;
  grid-template-columns: 1fr 3fr;
  align-items: center;
  height: 6rem;
  overflow: hidden;
  max-width: 80rem;
  margin: 0 auto
}

.navbar img {
  max-width: 11rem;
  width: auto;
  justify-self: start;
  margin-left: 1rem;
  transform: translateY(-0.1rem)
}

.navbar ul {
  list-style: none;
  display: flex;
  justify-self: end;
}

.navbar li {
  padding: 1.5rem;
}

.navbar li a {
  color: #000;
  font-size: 1.3rem;
  font-weight: 400;
  text-decoration: none;
  transition: color .3s ease-out
}

.navbar li a:hover {
  color: #3498db
}

.nav li {
	font-size: 3.0rem;
}

.menu-toggle .bar {
  width: 25px;
  height: 3px;
  background-color: #3f3f3f;
  margin: 5px auto;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out
}

.menu-toggle {
  justify-self: end;
  margin-right: 25px;
  display: none
}

.menu-toggle:hover {
  cursor: pointer
}

#mobile-menu.is-active .bar:nth-child(3) {
  opacity: 0
}

#mobile-menu.is-active .bar:nth-child(2) {
  transform: translateY(8px) rotate(45deg)
}

#mobile-menu.is-active .bar:nth-child(4) {
  transform: translateY(-8px) rotate(-45deg)
}

@media only screen and (max-width: 720px) {
  .navbar ul {
    display: flex;
    flex-direction: column;
    position: fixed;
    justify-content: start;
    top: 55px;
    background-color: #fff;
    width: 100%;
    height: calc(100vh - 55px);
    transform: translate(-101%);
    text-align: center;
    overflow: hidden
  }

  .navbar li {
    padding: 15px
  }

  .navbar li:first-child {
    margin-top: 50px
  }

  .navbar li a {
    font-size: 1rem
  }

  .menu-toggle,
  .bar {
    display: block;
    cursor: pointer
  }

  .mobile-nav {
    transform: translate(0%) !important
  }
}

@keyframes laser {
  0% {
    opacity: 55%
  }

  10% {
    opacity: 74%
  }

  30% {
    opacity: 42%
  }

  40% {
    opacity: 53%
  }

  60% {
    opacity: 62%
  }

  80% {
    opacity: 77%
  }

  90% {
    opacity: 49%
  }

  100% {
    opacity: 55%
  }
}

@keyframes laser-bg {
  0% {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(229, 0, 125, 0.5294117647)), url(../imgs/headline.webp)
  }

  30% {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(240, 136, 193, 0.768627451)), url(../imgs/headline.webp)
  }

  80% {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(229, 0, 125, 0.5294117647)), url(../imgs/headline.webp)
  }

  100% {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(229, 0, 125, 0.5294117647)), url(../imgs/headline.webp)
  }
}

.headline {
  background: #000;
  position: relative;
}
/*
.headline-effect {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url(../imgs/headline-effect.webp);
  background-size: cover;
  background-position: center;
  animation: laser 5s linear infinite;
  mix-blend-mode: plus-lighter
}

.headline-effect-laser {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url(../imgs/headline-effect-two.webp);
  background-size: cover;
  background-position: center;
  animation: laser 5s linear infinite;
  mix-blend-mode: hard-light
}
*/

.headline-background {
  width: 100%;
  height: 20vh;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(229, 0, 125, 0.5294117647)), url(../imgs/headline.webp);
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: end;
  background-blend-mode: screen;
  background-position: center;
}

/*
.headline h1,
.headline p {
  color: #fff;
  text-align: center;
  line-height: 1.4
}

.headline h1 {
  font-size: 3rem;
  margin-bottom: .2rem
}

.headline p {
  margin-top: .1rem;
  text-transform: uppercase;
  font-size: 1.4rem;
  letter-spacing: .1rem;
  margin-bottom: 4rem;
  color: #fff;
  font-weight: normal; 
  letter-spacing: 0.2rem;
}

@media only screen and (max-width: 720px) {
  .headline .headline {
    height: 20vh
  }
}
*/

#teams {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between
}

#teams small {
  text-align: center;
  display: block;
  margin-bottom: .5rem;
  font-size: .9rem
}

#teams h2 {
  margin-bottom: 0;
  text-align: center
}

#teams .grid {
  gap: 6rem;
  margin-top: 0
}

#teams img {
  height: auto
}

.team-container {
  flex-basis: 33.33333%;
  margin-top: 10px
}

.team-container p {
  color: #000;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 15px
}

.team-container img {
  width: 100%;
  margin-bottom: 15px
}

@media only screen and (max-width: 720px) {
  .features {
    flex-direction: column;
    padding: 50px
  }

  .feature-container p {
    margin-bottom: 25px
  }

  .feature-container {
    margin-top: 20px
  }

  .feature-container:nth-child(2) {
    order: -1
  }
}

.banner {
  width: 100%;
  height: 15rem;
  margin: 0 0 4rem 0;
  background: rgba(229, 0, 126, .3) url(../imgs/headline.webp) -1%;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-blend-mode: screen;
  background-position: bottom
}

.cookieblocker {
  position: relative;
  aspect-ratio: 16/9;
  background: #e5007d;
  overflow: hidden auto
}

.cookieblocker-content {
  position: absolute;
  left: 1rem;
  top: 1rem;
  max-width: 17rem;
  z-index: 1;
  background: #fff;
  padding: 1rem
}

.cookieblocker-bg {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  background: url(../imgs/youtube-bg.jpg);
  background-size: cover;
  background-position: center;
  filter: blur(2px);
  mix-blend-mode: screen
}

.cookieblocker button {
  background: #3498db;
  border: 0;
  color: #fff;
  padding: .3rem .7rem
}

.cookieblocker button:hover {
  background: #48a4e1;
  cursor: pointer;
  transition: .1s
}

.video {
  aspect-ratio: 16/9;
  margin-bottom: -0.3rem
}

.video iframe {
  width: 100%;
  height: 100%
}

footer {
  background: #6b0a3f;
  color: #fff;
  padding: .1rem 0
}

footer a {
  color: #fff
}

footer ul {
  list-style: none;
  padding-left: 0
}

footer h2 {
  color: #fff
}

footer .contact {
  text-align: end
}

#team .grid figure img {
  margin: 0 auto;
}

#team .grid figcaption {
  text-align: center;
}

#partners img {
  max-height: 40rem;
  float: right;
}

@media only screen and (max-width: 720px) {
  .navbar ul {
    top: 100px;
  }
}


@media only screen and (max-width: 420px) {
  .shrink {
    font-size: 2rem !important;
  }
}


@media only screen and (max-width: 420px) {
  .shrink span:after {
    font-size: 2rem !important;
    line-height: 2.5rem !important;
    left: .15rem !important;
  }
}

@media only screen and (max-width: 420px) {
  .shrink span:before {
      font-size: 2rem !important;
      line-height: 2.5rem !important;
      left: -.15rem !important;
  }
}

@media only screen and (max-width: 420px) {
  .grid {
    margin: 1.5rem 0;
  }

  .grid .g-col-4,
  .grid .g-col-5,
  .grid .g-col-6,
  .grid .g-col-7,
  .grid .g-col-8 {
    grid-column: auto/span 12;
  }

  footer {
    text-align: center;
  }

  footer .g-col-6.contact {
    text-align: center;
  }

}
/*# sourceMappingURL=cohersense.min.css.map */