* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/*!--- State ---- */
.hide {
  display: none;
  /* visibility: hidden; */
}
.no-scroll {
  overflow: hidden;
}


/*!--- Device ----*/
.mobile {
  display: none;
}


/*!--- Layout -----*/
[class*=flex] {
  display: flex;
}
[class*=-row] {
  flex-direction: row;
}
[class*=-col] {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}

.p-rel {
  position: relative;
}
.p-abs {
  position: absolute;
}
.p-abs-c {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.p-fix {
  position: fixed;
}

.jc-sb {
  justify-content: space-between;
}
.jc-c {
  justify-content: center;
}
.ai-c {
  align-items: center;
}
.cen-f {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cen-v {
  display: flex;
  align-items: center;
}
.cen-h {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.block {
  display: block;
}


/*!--- Columns ---*/
.col-50 {
  width: 50%;
}
.col-33 {
  width: 33.3%;
}
.col-25 {
  width: 25%;
}
.col-20 {
  width: 20%;
}


/*!---- TEXT specific styles ----*/
/*# Text Align (Justify) */
.ta-c {
  text-align: center;
}
.ta-l {
  text-align: left;
}
.ta-r {
  text-align: right;
}

/*# Case */
.tt-up {
  text-transform: uppercase ;
}
/*!------------------*/





/*!---- Images and icons ----*/
.icon {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* [class*='bg-'] {
  background-repeat: no-repeat;
} */
.bg-cover {
  background-size: cover;
  background-repeat: no-repeat;
}


/*! Elements */
a {
  display: block;
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
}
button {
  border-radius: unset;
  border: unset;
}
input, textarea {
  border: unset;
}
.space {
  height: 100px;
}


/*! Helper Classes  */
.origin::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 100%;

  left: var(--x);
  top: var(--y);
  background-color: var(--color);

  translate: -50% -50% ;
  z-index: 9999;
}



@media only screen and (min-width: 100px) and (max-width: 899px) and (orientation: portrait) {
  .desktop {
      display: none !important;
  }
  .mobile {
      display: block;
  }

  [class*=row-resp] {
      flex-direction: column;
  }

  .col-50 {
    width: 100%;
  }
  .col-33 {
    width: 100%;
  }
  .col-25 {
    width: 100%;
  }
  .col-20 {
    width: 100%;
  }
}