@charset "utf-8";
/* 2026/03 update */
html,
body {background: none; margin: 0; width: 100%; height: auto !important;}
header {background: #fff;}

/*** Event - Common ***/
.sp_display{display:none;}
.pc_display{display:block;}
::selection {color: #fff; background-color: #999;}
#wrap {background: none;}
#wrap_stamp{font-size: clamp(12px, calc(12px + 0.0267 * (100vw - 375px)), 18px); color: #242424; padding: 0; margin: 0; position: relative; overflow-wrap: anywhere; word-break: normal; line-break: strict;}
#wrap_stamp .desktop__window{width: 100%; transform: scale(1); overflow: hidden;}

article#ev_stmpers{width: 100%; max-width: 520px; margin: 0 auto; padding: 0; color: #242424; background: rgb(250 249 247 / 1); position: relative; border-left: 5px solid #faf9f7; border-right: 5px solid #faf9f7; z-index: 999;}
section:not(:first-child){padding: 3rem 2rem;}
section:not(:first-child) p{font-size: 1.65rem; font-weight: 600; line-height: 1.65em;}

/* h */
#wrap_stamp h2,#wrap_stamp h3,#wrap_stamp h4,#wrap_stamp h5{padding: 0 !important; margin: 0 !important;}
#wrap_stamp h2{position: absolute; top: min(3.3333333333vh, 20px); left: min(3.3333333333vw, 20px); width: min(21.6666666667vw, 200px); z-index: 10;}
#wrap_stamp h2.fixed{position: fixed;}
#wrap_stamp h2 img{width: 75%; height: auto;}
#wrap_stamp h3{font-size: 3.2rem; font-weight: 800; line-height: 1.15em; letter-spacing: 0.5px; color: #e8353c; text-align: center; margin: 2rem 0 !important;}
#wrap_stamp h3 em{font-size: 2.2rem; font-weight: 800; margin: 0 1px 0 2px;}

/* font */
  .l-s-reg {
    font-family: "LINE Seed JP", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

  .l-s-bold {
    font-family: "LINE Seed JP", sans-serif;
    font-weight: 700;
    font-style: normal;
  }

  .l-s-exb {
    font-family: "LINE Seed JP", sans-serif;
    font-weight: 800;
    font-style: normal;
  }

/* link */
#wrap_stamp a{color: #333; transition: all .3s;}
#wrap_stamp a:hover{color: #333; text-decoration: underline;}
.boxLink{width: 100%; max-width: 480px; font-size: 2.0rem; font-weight: 700; line-height: 1.0em; text-align: center; background: #242422; border: 2px solid #dbcf6e; border-radius: 50px; margin: 1.0rem auto; padding: 2rem 1rem 1.75rem; position: relative;}
.boxLink::before,
.boxLink::after {content: ""; width: 15px; height: 4px; position: absolute; top: calc(50% - 2px); right: 20px; border-radius: 9999px; background-color: #fff; color: #fff; transform-origin: calc(100% - 1.75px) 50%;}
.boxLink::before {transform: rotate(45deg);}
.boxLink::after {transform: rotate(-45deg);}
a.boxLink {display: block;}
a.boxLink:hover{opacity: 0.75; color: #fff !important; transition: all .3s; text-decoration: none !important;}
.boxLink.disable{color: #4f4f4f; background: #171717; border: 2px solid #4f4f4f; cursor: no-drop;}
.boxLink.disable::before,
.boxLink.disable::after {background-color: #4f4f4f;}

#page-top {position: fixed; right: 1.6rem; bottom: 0.8rem; z-index: 10;
-webkit-transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;}
#page-top .scroll.show{bottom: 1rem;}
#page-top a .scroll {width: 1.5rem; height: 5.8rem; position: absolute; right: 0; bottom: -10rem; transition: all 1.0s; z-index: 9;}
#page-top a .scroll .arw::after {content: ""; display: block; position: absolute; right: -17.25px; top: -7px; width: 7px; height: 7px; border-right: 2px solid #e8353c; border-top: 2px solid #e8353c; transform: rotate(-45deg);}
#page-top a .scroll .arw {position: absolute; top: 0; left: 50%; margin-left: -1.0rem;}
#page-top a .scroll .txt {color: #fff8e6; font-size: 1rem; font-weight: 700; mix-blend-mode: difference; position: absolute; left: 0.3rem; bottom: 0;
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;}

/* Loader */
  .stmp-loader{background:#fff8e6; background-size: cover; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 200;}
  .loader{background: rgb(166 217 226 / 1); width: 100%; height: 100%; position: fixed; display: flex; align-items: center; justify-content: center; left: 0; top: 0; z-index: 1000;}
/* Loader - Animation */
  .loader-animation {position: relative;}
/* Loader - Animation */
  .loader-logo {font-size: 10px; margin: -1.5em 0; text-indent: -9999em; width: 5em; height: 5em; border-radius: 50%; position: absolute; top: calc(50% - 60px); left: calc(50% - 25px);
  background: #faf9f7;
  background: -moz-linear-gradient(left, #faf9f7 10%, rgba(250, 249, 247, 0) 42%);
  background: -webkit-linear-gradient(left, #faf9f7 10%, rgba(250, 249, 247, 0) 42%);
  background: -o-linear-gradient(left, #faf9f7 10%, rgba(250, 249, 247, 0) 42%);
  background: -ms-linear-gradient(left, #faf9f7 10%, rgba(250, 249, 247, 0) 42%);
  background: linear-gradient(to right, #faf9f7 10%, rgba(250, 249, 247, 0) 42%);
  -webkit-animation: loader 0.75s infinite linear;
  animation: loader 0.75s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);}
  .loader-logo:before {
  content: ''; width: 50%; height: 50%; background: #faf9f7; border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0;}
  .loader-logo:after {content: ''; background: rgb(166 217 226 / 1); width: 70%; height: 70%; border-radius: 50%; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
  .loading-text {width: 100%; font-size: 1.05rem; font-weight: 700; color: #faf9f7; text-align: center; margin: 0 0 0 -3.5em; position: absolute; top: 100%;}
  .loader_letter{
    background: linear-gradient(180deg, #faf9f7 0% 0%, #faf9f7 50% 0%, #faf9f7 100%);
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0);
    animation: bound 1.0s infinite; position: absolute; animation-delay: 0s;
  }
  .loader_letter:nth-child(1){left: 0; animation-delay: 0s;}
  .loader_letter:nth-child(2){left: 12px; animation-delay: 0.1s;}
  .loader_letter:nth-child(3){left: 24px; animation-delay: 0.2s;}
  .loader_letter:nth-child(4){left: 36px; animation-delay: 0.3s;}
  .loader_letter:nth-child(5){left: 48px; animation-delay: 0.4s;}
  .loader_letter:nth-child(6){left: 60px; animation-delay: 0.5s;}
  .loader_letter:nth-child(7){left: 72px; animation-delay: 0.6s;}

/* Main image */
#wrap_stamp figure {margin: 0 0 0.5rem;}
#wrap_stamp .desktop__figure {position: fixed; z-index: -1;}
#wrap_stamp .desktop__figure {left: 50%;}
#wrap_stamp .desktop__figure.--object1 {
    bottom: min(590px);
    width: min(420px);
    min-width: 420px;
    margin: 0 0 0 -520px;
    animation: floating-f 1.25s ease-in-out infinite alternate-reverse;
}
#wrap_stamp .desktop__figure.--object2 {
    bottom: min(300px);
    width: min(420px);
    min-width: 420px;
    margin: 0 0 0 200px;
    animation: floating-f 1.25s ease-in-out infinite alternate-reverse;
}
#wrap_stamp .desktop__figure.--object3 {
    bottom: min(60px);
    width: min(420px);
    min-width: 420px;
    margin: 0 0 0 -900px;
    animation: floating-f 1.25s ease-in-out infinite alternate-reverse;
}
#wrap_stamp .desktop__figure.--stripe{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    background-image: repeating-linear-gradient(50deg, #ceeaee, #ceeaee 25px, transparent 25px, transparent 160px);
    background-color: rgb(166 217 226 / 1);
}



/* Navi */
nav {width: 46px; height: 46px; position: absolute; top: min(3.3333333333vh, 20px); right: min(3.3333333333vw, 20px); padding: 0; background: none; border: none; z-index: 10;}
nav .navi__area h2.logo{display: none;}
nav .navi__area .stmp__js-modal__btn{display: block; width: 36px; height: 36px; position: absolute; top: 50%; right: 20px; margin: -15px 0 0;}
nav .navi__area ul{display: none; justify-content: flex-start; align-items: normal;}
nav .navi__area li{width: 100%; text-align: center;}
nav .navi__area li a{color: #fff !important; font-size: 1.8rem; font-weight: 700; text-shadow: 0 3px 1px #000; position: relative; text-decoration: none !important;}
nav .navi__area li a::after {display: none;}
nav .navi__area li a:hover::after {display: none;}
nav.fixed{position: fixed;}
nav #stmp__slideMenu {height: 100%; position: fixed; justify-items: legacy; width: 100%; margin-top: -35px; transform: translateY(-150%); transition: transform 450ms ease-in-out; background: rgba(0,0,0,0.85); z-index: 5;}
.menu {display: block; width: 46px; height: 46px; position: absolute; top: 50%; right: 0; margin: -23px 0 0 0; padding: 10px; border-radius: 60px; background: #82c8d2; border: 2px solid #fff; cursor: pointer;}
.menu span:before {bottom: -9px;}
.menu span:after {bottom: -18px;}
.menu span,
.menu span, .menu span::before, .menu span::after {content: ''; display: block; width: 22px; height: 3px; border-radius: 0; background: #fff; transition: 0.5s; position: absolute;}

/* Navi - Modal */
#stmp__modal{display: block;}
.stmp__js-modal__bg {width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 11; display: none;}
.stmp__js-modal__main {display: none; width: 100%; height: 100%; padding: 0; margin: 0; position: fixed; top: 0; left: 0; background-color: rgb(255 255 255 / 0.95); z-index: 50;}
.stmp__js-modal__main .modal__contentsBox{width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0;}
.stmp__js-modal__main .modal__contentsBox .stmp__modal__menu ul{list-style: none; margin: 0; padding: 0;}
.stmp__js-modal__main .modal__contentsBox .stmp__modal__menu ul > li a {display: flex; justify-content: flex-start; align-items: center; color: #82c8d2 !important; font-size: 2.8rem; font-weight: 700; padding: 1.5rem 0;}
.stmp__js-modal__main .modal__contentsBox .stmp__modal__menu ul > li a:hover {text-decoration: none !important;}
.stmp__js-modal__btn--close--fix {display: block; width: 100%; max-width: 300px; background: #82c8d2; border: 2px solid #fff; border-radius: 30px; color: #fff; font-size: 2.5rem; font-weight: 700; text-decoration: none; text-align: center; padding: 1.25rem; margin: 2.5rem auto 0; transition: all .3s; cursor: pointer;}
.stmp__js-modal__main._slideUp {animation: SlideUp .5s ease-in-out forwards;}
.stmp__js-modal__main._slideDown {animation: SlideDown .5s ease-in-out forwards;}

/* hero */
section#hero{}
section#hero .statement{margin: 3rem 3.5rem 0;}
section#hero .statement__detail{width: 90%; max-width: 400px; margin: 0 auto 1.5rem;}
section#hero .statement__detail:last-of-type{margin: 0 auto;}
section#hero .statement__detail dl{background: #e8353c; border-radius: 10px; text-align: center; overflow: hidden;}
section#hero .statement__detail dt{font-size: 2.6rem; font-weight: 800; line-height: 1.05em; letter-spacing: -0.5px; color: #fff; text-align: center; padding: 1.35rem 1rem 0.75rem;}
section#hero .statement__detail dd{margin: 0.25rem; padding: 1.0rem 1.5rem 1.5rem; background: #fff; border-radius: 0 0 7px 7px; letter-spacing: 1px;}
section#hero .statement__detail dd em{font-size: 2.8rem;}
section#hero .statement__detail ul{display: flex; flex-direction: column; margin: 0.25rem; padding: 1.5rem; background: #fff; border-radius: 0 0 7px 7px;}
section#hero .statement__detail ul > li{width: 80%; max-width: 200px; font-size: 1.6rem; list-style: disc; margin: 0 auto; padding: 0; text-align: left;}

section#hero .statement__nav ul,
section#ev_howto .statement__nav ul{width: 90%; display: flex; justify-content: space-between; align-items: flex-start; margin: 2rem auto;}
section#hero .statement__nav ul > li,
section#ev_howto .statement__nav ul > li{width: 48%;}
section#hero .statement__nav a,
section#ev_howto .statement__nav a{display: block; text-align: center; font-weight: 700; box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.2); border-radius: 10px; padding: 1.5rem;}
section#hero .statement__nav a:hover,
section#ev_howto .statement__nav a:hover{box-shadow: 0px 0px 0 1px rgba(0, 0, 0, 0.2); text-decoration: none;}
section#hero .statement__nav em,
section#ev_howto .statement__nav em{display: block; text-transform: uppercase; color: #82c8d2; font-size: 1.0rem; letter-spacing: 3px;}
section#hero .statement__nav img,
section#ev_howto .statement__nav img{width: 100%; max-width: 64px; margin-bottom: 0.75rem;}

/* ev_event */
section#ev_event{}
section#ev_event .section-detail .images{width: 90%; margin: 0 auto;}
section#ev_event .section-detail .images .desc{margin: 1rem 0 2rem;}
section#ev_event .section-detail .images .desc p{font-size: 2.8rem;}
section#ev_event .section-detail .images .desc p span{display: block; font-size: 1.25rem; line-height: 1.0em;}
section#ev_event .section-detail .images .desc div{display: block; width: 100%; max-width: 200px; background: #2b69fc; font-size: 1.6rem; font-weight: 700; color: #fff; text-align: center; border-radius: 30px; padding: 1rem 2rem 0.75rem; margin: 0 auto 1rem;}

/* ev_event - StampCard */
section#ev_event #card-status{margin-bottom: -2rem;}
section#ev_event #card-status dl{display: flex; justify-content: center; flex-direction: column; text-align: center;}
section#ev_event #card-status dt{font-size: 1.35rem; font-weight: 700;}
section#ev_event #card-status dd{font-size: 3.2rem; font-weight: 700;}
section#ev_event #card-status dd em{font-size: 6rem; color: #e8353c; margin: 0 4px;}
section#ev_event #stamp-card{width: 100%; max-width: 480px; display: flex; justify-content: flex-start; flex-wrap: wrap; border-radius: 10px; overflow: hidden; padding: 2rem; margin: 3rem auto;}
section#ev_event #stamp-card:last-of-type{margin: 3rem auto 0;}
section#ev_event #stamp-card.enable{border: 3px solid #ffb2b4; background: linear-gradient(180deg, #e21419 0% 0%, #e21419 50% 0%, #cd1217 100%);}
section#ev_event #stamp-card.disable{background: linear-gradient(180deg, #ddd 0% 0%, #ddd 50% 0%, #cdcbcb 100%); border: 3px solid #ccc;}
section#ev_event #stamp-card h4{width: 100%; font-size: 2.1rem; color: #faf9f7; text-align: center;}
section#ev_event #stamp-card .stamp-detail{display: flex; justify-content: center; flex-direction: row; flex: 100%; align-items: center; flex-wrap: wrap; gap: 0.6em;}
section#ev_event #stamp-card .stamp-detail .stamp-slot{width: 97px; height: 97px; background: #faf9f7; border-radius: 10%; font-size: 1.5rem; line-height: 0; padding: 16px 6px; position: relative;}
section#ev_event #stamp-card.disable .stamp-detail .stamp-slot{background: #b9b9b9; color: #ddd;}
section#ev_event #stamp-card .stamp-detail .stamp-slot.stamped:before{content: ''; display: block; width: 82px; height: 82px; position: absolute; top: 12px; left: 8px; background-image: url(../img/event/cpn_stamprally/2026/stmp__stamp.png); background-repeat: no-repeat; background-size: contain;}
section#ev_event #stamp-card .loginbox{margin: 1rem auto 0;}
section#ev_event #stamp-card .loginbox p{font-size: 1.05rem; text-align: center; font-weight: normal; color: #333; margin: 0;}
section#ev_event #stamp-card .loginbox a.boxLink{max-width: 300px; border-radius: 30px; color: #faf9f7; font-size: 1.7rem; background: #82c8d2; border: 2px solid #faf9f7; padding: 1.25rem;}

/* ev_item */
section#ev_item{}
section#ev_item .section-detail .images{width: 90%; margin: 0 auto;}
section#ev_item .section-detail .images .desc{margin: 1rem 0 2rem;}
section#ev_item .section-detail .images .desc div{display: block; width: 100%; max-width: 200px; background: #e8353c; font-size: 1.6rem; font-weight: 700; color: #fff; text-align: center; border-radius: 30px; padding: 1rem 2rem 0.75rem; margin: 0 auto 1rem;}
section#ev_item .section-detail ul{font-size: 1.2rem; margin: 1rem 0;}
section#ev_item .section-detail ul > li{list-style: disc; margin: 0.5rem 0 0 25px;}

/* ev_goods */
section#ev_goods{}
section#ev_goods .section-detail .images{width: 90%; margin: 0 auto;}
section#ev_goods .section-detail .images .desc{margin: 1rem 0 2rem;}
section#ev_goods .section-detail .images .desc div{display: block; width: 100%; max-width: 200px; background: #e8353c; font-size: 1.6rem; font-weight: 700; color: #fff; text-align: center; border-radius: 30px; padding: 1rem 2rem 0.75rem; margin: 0 auto 1rem;}
section#ev_goods .section-detail ul{font-size: 1.2rem; margin: 1rem 0;}
section#ev_goods .section-detail ul > li{list-style: disc; margin: 0.5rem 0 0 25px;}

/* ev_howto */
section#ev_howto{}
section#ev_howto .section-detail ul.howto{display: flex; justify-content: flex-start; flex-direction: column; width: 90%; max-width: 500px; margin: 0 auto;}
section#ev_howto .section-detail ul.howto > li{background: rgb(255 255 255 / 0.4); border: 3px solid #82c8d2; border-radius: 15px; margin: 1.5rem 0; position: relative; overflow: hidden;}
section#ev_howto .section-detail ul.howto > li .step{width: 32.5%; background: #82c8d2; color: #fff; font-size: 1.6rem; font-weight: 600; letter-spacing: 0; line-height: 1em; text-align: center; margin: -1px; padding: 1.0rem 1.5rem 1.0rem 0.5rem; clip-path: polygon(0 0, 100% 0, 87.5% 100%, 0% 100%); position: absolute; top: 0; left: 0;}
section#ev_howto .section-detail ul.howto > li .text{font-size: 2.0rem; font-weight: 600; line-height: 1.25em; padding: 1.5rem;}
section#ev_howto .section-detail ul.howto > li .text span{display: block; font-size: 1.25rem; font-weight: normal; line-height: 1.65em; margin-top: 0.5rem;}

/* Notice */
section#ev_notice{padding: 0 2rem 4rem;}
section#ev_notice h4{font-size: 1.65rem; font-weight: 700; line-height: 1em; margin: 1rem 0 !important;}
section#ev_notice a:hover{text-decoration: underline;}
section#ev_notice .statement__detail {background: rgb(255 255 255 / 0.4); border: 3px solid #82c8d2; border-radius: 10px; padding: 1.5rem; overflow: auto;}
section#ev_notice .statement__detail .noticeBox{height: 320px;}
section#ev_notice .statement__detail .noticeBox ul{width: 97%; margin: 0 0 2.5rem;}
section#ev_notice .statement__detail .noticeBox li{font-size: 1.4rem; line-height: 1.4em; list-style: disc; margin: 0 0 10px 25px;}
section#ev_notice .statement__detail .noticeBox .jspTrack{background: none;}
section#ev_notice .statement__detail .noticeBox .jspDrag {background: #82c8d2; left: 0; border-radius: 30px;}
.jspVerticalBar{width: 7px !important;}


@media (min-width: 1400px) {}

@media (max-width: 767px) {
/*** Event - Common ***/
  .sp_display{display:block;}
  .pc_display{display:none;}
  article#ev_stmpers{max-width: 768px; border-left: 5px solid #a6d9e2; border-right: 5px solid #a6d9e2;}
  section:not(:first-child) p{font-size: 1.4rem;}
  #wrap_stamp figure {display: none;}

  /* h */
  #wrap_stamp h3{font-size: 2.45rem; line-height: 1.225em;}
  #wrap_stamp h3 em{font-size: 1.65rem; margin: 0 2px;}

  /* Navi - Modal */
  .stmp__js-modal__main .modal__contentsBox .stmp__modal__menu ul > li a {font-size: 2.25rem; padding: 1.0rem 0;}
  .stmp__js-modal__btn--close--fix {max-width: 190px; font-size: 1.75rem; padding: 1.0rem; margin: 1.75rem auto 0;}

  /* hero */
  section#hero .statement{margin: 3rem 1rem 0;}
  section#hero .statement__detail dt{font-size: 2.45rem;}
  section#hero .statement__detail dd em{font-size: 2.6rem;}
  section#hero .stmp_ttl{background: #a6d9e2; text-align: center; font-weight: 700; padding: 1.25rem;}

  /* ev_event - StampCard */
  section#ev_event #card-status{margin-bottom: -1rem;}
  section#ev_event #card-status dd{font-size: 2.35rem;}
  section#ev_event #card-status dd em{font-size: 4.2rem;}
  section#ev_event #stamp-card{width: 100%; padding: 1.5rem;}
  section#ev_event #stamp-card .stamp-detail {gap: 1.25em;}
  section#ev_event #stamp-card .stamp-detail .stamp-slot {width: 86px; height: 86px; font-size: 1.6rem; padding: 15px 7px;}
  section#ev_event #stamp-card .stamp-detail .stamp-slot.stamped:before {width: 72px; height: 72px; top: 10px; left: 7px;}
  section#ev_event #stamp-card .loginbox p{font-size: 0.975rem;}
  section#ev_event #stamp-card .loginbox a.boxLink{max-width: 220px; font-size: 1.5rem;}
}

@media (max-width: 479px) {
  /* ev_event - StampCard */
  section#ev_event #stamp-card .stamp-detail {gap: 1.0em;}
  section#ev_event #stamp-card .stamp-detail .stamp-slot {width: 70px; height: 70px;font-size: 1.35rem; padding: 12px 6px;}
  section#ev_event #stamp-card .stamp-detail .stamp-slot.stamped:before {width: 58px; height: 58px; top: 8.5px; left: 6.5px;}
}

@media (max-width: 399px) {
  /* ev_event - StampCard */
  section#ev_event #stamp-card {padding: 1.75rem 0.75rem;}
  section#ev_event #stamp-card .stamp-detail {gap: 1.15em;}
  section#ev_event #stamp-card .stamp-detail .stamp-slot {width: 58px; height: 58px; font-size: 1.35rem; padding: 12px 6px;}
  section#ev_event #stamp-card .stamp-detail .stamp-slot.stamped:before {width: 48px; height: 48px; top: 7.5px; left: 5.5px;}
}

/* == keyframes ================================================== */
.animated {animation-duration: 1s; animation-fill-mode: both; visibility: visible; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: both;}
@keyframes SlideUp {
  0%   {opacity: 1; transform: translateX(0%);}
  100% {opacity: 0; transform: translateX(100%);}
}
@keyframes SlideDown {
  0%   {opacity: 0; transform: translateX(100%);}
  100% {opacity: 1; transform: translateX(0%);}
}
@keyframes stroke {
  0%   {fill: #10101e; stroke-dashoffset: 1800;}
  10%  {fill: transparent;}
  20%  {fill: #dbcf6e; stroke-dashoffset: 0;}
  70%  {fill: #dbcf6e; stroke-dashoffset: 0;}
  80%  {fill: transparent;}
  90%  {fill: #10101e; stroke-dashoffset: 1800;}
  100% {fill: #10101e; stroke-dashoffset: 1800;}
}

@keyframes bound{
  0%   {transform: translateY(0px);}
  50%  {transform: translateY(-10px);} 
  60%  {transform: translateY(1px);}
  70%  {transform: translateY(0px);}
  100% {transform: translateY(0px);}
}

@keyframes floating-f {
  0%   {transform: translateY(-3.5%);}
  100% {transform: translateY(3.5%);}
}

@keyframes loader {
  0%   {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}