@import 'var.colors';
@import 'var.globals';
@import 'var.responsive';
@import 'var.typo';

@import 'mix.responsive';

@import 'base.globals';

@import 'plugin.icomoon';

@import 'utils.fontscale';
@import 'utils.spacing';
@import 'utils.text';
@import 'utils.flex';
@import 'utils.animations';

@import 'mod.button';
@import 'mod.table';
@import 'mod.checkbox-item';
@import 'mod.form-item';
@import 'mod.input';
@import 'mod.overlay';
@import 'mod.accessibility-tab-handler';

@import 'comp.header';
@import 'comp.hero';
@import 'comp.section';
@import 'comp.footer';

.ff-sans {
  font-family: $ff-sans;
}

// .ff-sans2 {
//   font-family: $ff-sans2;
// }

.hiddeScroll {
  overflow-y: hidden;
}

// $t-duration: 800ms;

// .default-enter-active,
// .default-leave-active {
//   transition-property: opacity, transform;
//   transition-duration: 800ms;
//   transition-timing-function: ease-in-out;
// }

// .default-enter-active {
//   position: fixed;
//   top: 0;
//   left: 0;
//   width: 100vw;
//   // background-color: white;
//   transform: translated3d(0, 100vh, 0);
// }

// .default-leave-to {
//   opacity: 0.2;
//   transform: translate3d(0, -80vh, 0);
// }

// .default-enter-to {
//   transform: translate3d(0, 0, 0);
// }

// //back to intro animation

// $t-duration: 800ms;
// $t-delay: 300ms;

// .intro-enter-active,
// .intro-leave-active {
//   transition-duration: 800ms * 2;

//   &:before,
//   &:after {
//     content: '';
//     position: fixed;
//     top: 0;
//     left: 0;
//     z-index: 100;
//     display: block;
//     width: 100%;
//     height: 50%;
//     transition-property: opacity, transform;
//     transition-timing-function: ease-in-out;
//   }

//   &:before {
//     background-color: black;
//   }
// }

// .page-enter-active,
// .page-leave-active {
//   transition-property: opacity;
//   transition-timing-function: ease-in-out;
//   transition-duration: 500ms;
// }
// .page-enter,
// .page-leave-to {
//   opacity: 0;
// }

.page-enter,
.page-enter-active,
.page-enter-to {
  transition: opacity 0.25s ease;
  opacity: 1;
}
.page-leave,
.page-leave-to,
.page-leave-active {
  opacity: 0;
  transition: opacity 0.5s;
}

@media screen and (max-width: 600px) {
  .fs-xxxl {
    font-size: 62px;
  }
}

.wp-block-image {
  padding-top: 50px;
}
.wp-block-image img {
  padding-bottom: 10px;
}

.wp-block-preformatted {
  width: 100%;
  white-space: break-spaces;
  font-family: sans-serif;
  line-height: 22.8px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.blogDetail__mainInfo__paragraph1 p {
  padding-bottom: 10px;
}

.blogDetail__mainInfo__paragraph1 ul li {
  padding-bottom: 10px;
}

.blogDetail__mainInfo__paragraph1 ul {
  padding-left: 15px;
}