[v-cloak]{ display: none!important; }
#chatBox{ display: block; transition: opacity 0.15s ease-in-out; }
#chatBox.chat-panel {position: fixed; bottom: 55px; right: 10px; width: 94%; z-index: 9999; }
#chatBox.chat-panel[hidden]{opacity: 0;width: 0px;height: 0px;visibility: hidden;}
#chatBox.chat-panel .card {overflow: hidden; border: none;  border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.2); }
#chatBox.chat-panel .card .card-header { background: #f5f5f5; padding: 0.7em 1em; font-size: 1.14286em; border-bottom: 1px solid rgba(153, 153, 153, 0.2);color: #000; }
#chatBox.chat-panel .card .card-body { padding: 1.07143em; }
#chatBox.chat-panel .card .card-body .messages { position: relative; max-height: 21.42857em; min-height: 60vh; overflow-y: scroll; margin-top: -1.07143em; margin-right: -1.07143em; margin-left: -1.07143em; padding-top: 25px; padding-right: 1.07143em; padding-left: 1.07143em; }
#chatBox.chat-panel .card .card-body .messages .message { position: relative;margin: 1.15em 0; }
#chatBox.chat-panel .card .card-body .messages .message:first-child { margin-top: 0; }
#chatBox.chat-panel .card .card-body .messages .message figure { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; margin: 0; position: relative; order: 2; margin-top: 8px;}
#chatBox.chat-panel .card .card-body .messages .message figure img { width: 30px; height: 30px; }
#chatBox.chat-panel .card .card-body .messages .message .message-body { margin-top: .5em; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin: auto 1em; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
#chatBox.chat-panel .card .card-body .messages .message .message-body p { word-break: break-all;max-width: 240px; font-size: 14px;font-family: tahoma!important; background: #404E67; border: 1px solid #404E67; border-radius: 3px; padding: .5em 1em; color: #fff; margin-bottom: .5em; position: relative; }
#chatBox.chat-panel .card .card-body .messages .message .message-body p a { color: #9bc7f7; }
#chatBox.chat-panel .card .card-body .messages .message.reply .message-body p a { color: #007bff; }
#chatBox.chat-panel .card .card-body .messages .message .message-body p:first-child:after, #chatBox.chat-panel .card .card-body .messages .message .message-body p:first-child:before { content: ""; height: 0; width: 0; display: block; position: absolute; top: 1.25rem; right: -7px; left: auto; border-style: solid; border-width: 6px 0 7px 6px; border-color: transparent transparent transparent #404E67; -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#chatBox.chat-panel .card .card-body .messages .message .message-body p:first-child:before { right: -7px; border-left-color: #404E67; }
#chatBox.chat-panel .card .card-body .messages .message.reply figure { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
#chatBox.chat-panel .card .card-body .messages .message.reply .message-body { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
#chatBox.chat-panel .card .card-body .messages .message.reply .message-body p { background: #f9f9f9; border: 1px solid #eef1f2; border-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-radius: 3px; color: #666; }
#chatBox.chat-panel .card .card-body .messages .message.reply .message-body p:first-child:after, #chatBox.chat-panel .card .card-body .messages .message.reply .message-body p:first-child:before { content: ""; height: 0; width: 0; display: block; position: absolute; right: auto; left: -7px; border-style: solid; border-width: 6px 7px 6px 0; border-color: transparent #f9f9f9 transparent transparent; -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#chatBox.chat-panel .card .card-body .messages .message.reply .message-body p:first-child:before { left: -9px; border-right-color: #eef1f2; }
#chatBox.chat-panel .card .card-body .messages .message.reply .message-body p:first-child:after { content: ""; height: 0; width: 0; display: block; position: absolute; right: auto; left: -7px; border-style: solid; border-width: 6px 7px 6px 0; border-color: transparent #f9f9f9 transparent transparent; -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
#chatBox.chat-panel .card .card-footer { position: relative; background: #f5f5f5; padding: 6px 10px; border-top: 1px solid rgba(153, 153, 153, 0.2); }
#chatBox.chat-panel .card .card-footer .list-icon { font-size: 1.125rem; }
#chatBox.chat-panel .card .card-footer textarea {border-radius: 16px; margin-right: 5px; font-size: 14px;font-family: tahoma!important;box-shadow: none; resize: none;  width: 100%; min-height: auto;line-height: 28px; padding: 7px 10px;outline:none;padding-right: 30px; }
#chatBox.chat-panel .card .card-footer textarea::placeholder {color: #ccc; }

div[aria-labelledby="myLargeModalLabel"] .modal-body { overflow:auto; }
div[aria-labelledby="myLargeModalLabel"] .modal-content { height: calc(100vh - 3rem); }

#chatBox.chat-panel .card .card-footer .btn.btn-emoji{
  position: absolute;
  right: 100px;
  background: transparent;
  width: 30px;
  height: 30px;
  top: 12px;
}
#chatBox.chat-panel .card .card-footer .box-emoji{
  display: none;
  position: absolute;
  bottom: 50px;
  width: 85%;
  height: 250px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 2rem 0.15rem rgb(0 0 0 / 25%);
}
#chatBox.chat-panel .card .card-footer .box-emoji #pills-tab-emoji{
  padding-bottom: 0px!important;
}
#chatBox.chat-panel .card .card-footer .box-emoji #pills-tab-emoji .nav-item{
  flex: 1 1 auto!important;
}
#chatBox.chat-panel .card .card-footer .box-emoji #pills-tab-emoji .nav-item>a.active{
  background-color: #404e67;
}
#chatBox.chat-panel .card .card-footer .box-emoji #pills-tab-emoji .nav-item>a{
  text-align: center;
  font-size: 20px;
}
#chatBox.chat-panel .card .card-footer .box-emoji.show{
  display: block;
}
#chatBox.chat-panel .card .card-footer .box-emoji #pills-tabContent-emoji{
  display: block;
  height: calc(100% - 45px);
  width: 100%;
  overflow: auto;
  padding: 0.5em;
}
#chatBox.chat-panel .card .card-footer .box-emoji .inner div.item{
  text-align: center;
  cursor: pointer;
  flex: 1 1 auto!important;
  padding: .25rem!important;
  font-size: 16px;
}
#chatBox.chat-panel .card .card-footer .box-emoji .inner div.item:hover{
  box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
  border-radius: 4px;
}
#chatBox.chat-panel .card .card-footer .box-emoji::after {content: ""; position: absolute; top: 100%; left: 76%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #fff transparent transparent transparent; }



#chatBox.chat-panel .btn-icon {width: 52px; height: 42px; padding: 0; text-align: center; line-height: 30px; font-size: 14px; display: inline-block; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; background-color: #efefef;color: #5d8086;}
#chatBox.chat-panel figure .fas , #chatBox.chat-panel figure .fad{font-size: 24px;}
#chatBox.chat-panel figure .fa-user-headset{color: #0c1c55;}
#chatBox.chat-panel figure .fa-user{color: #949eb1;}
#chatBox.chat-panel .card .card-body .messages .message[data-senderid]::before{content: "โดย "attr(data-senderid)" เมื่อ "attr(data-datetime)" น."; position: absolute; top: -18px; right: 0; font-size: 10px; color: #949494; }
#chatBox.chat-panel .card .card-body .messages .message.reply[data-senderid]::before{right: auto; left: 0px; }
#chatBtn {position: fixed; bottom: 55px; right: 10px; height: 36px; width: 36px; line-height: 36px; text-align: center; font-size: 20px; z-index: 1049; opacity: 0.9; background-color: #19B5FE !important; transition: 0.3s ease-in-out!important; text-align: center; padding: 0px; box-shadow: 0 0 0 0.2rem rgb(108 135 165 / 25%); }
#chatBtn:hover, #chatBtn:active, #chatBtn:focus {box-shadow: none; font-size: 24px; font-size: 26px; line-height: 28px; opacity: 1; }
#chatBtn .badge-danger{top: -4px; right: -4px; position: absolute; font-size: 12px; font-weight: 400; }
#chatBtn.tooltip .tooltiptext {width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%; left: -60%; margin-left: -60px; font-size: 12px; line-height: 20px; }
#chatBtn.tooltip .tooltiptext::after {content: ""; position: absolute; top: 100%; left: 80%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; }
@media screen and (min-width: 467px){#chatBox.chat-panel{width: 380px; bottom: 65px; } #chatBox.chat-panel .card .card-body .messages{min-height: 21.42857em; } #chatBtn {bottom: 65px; height: 48px; width: 48px; font-size: 24px; line-height: 36px; } #chatBtn.tooltip .tooltiptext {left: -30%; } }
#navbarCustom { padding: 5px; border-bottom: solid 2px #c10303; background: #0a0928; background: linear-gradient(0deg, #0a0928 65%, #203d6d 100%); height: auto; }
#navbarCustom #headerLogo h3 { padding:10px 0; }
#navbarCustom #headerLogo > img { margin:5px 0; }
@media screen and (min-width: 467px) { #navbarCustom{ padding: 5px; } }
@media screen and (min-width: 780px) { #navbarCustom{ height:50px; } }
#headerLogo img{width: 100%;max-width: 170px;max-height:48px; }
@media screen and (min-width: 467px) {#headerLogo img{margin-top: -6px; max-width: 140px;padding:5px; } }
#navbarBottom {width: 100%; background: #0a0928; background: linear-gradient(0deg, #030221 0%, #0e1e40 100%); padding: 0; height: 44px; border-top: 2px solid #f00; }
#navbarBottom  .navbar-nav{width: 100%; max-width: 600px; }
#navbarBottom  .navbar-nav li.nav-item{flex: 1 1 auto!important; }
@media screen and (min-width: 467px) {#navbarBottom {height: 56px; padding: 5px 15px 5px 15px; } #navbarBottom  .navbar-nav li.nav-item{flex: none!important; } #navbarBottom .navbar-nav{width: auto; max-width: auto; } #navbarNavDropdown{margin-top: 0px; } #navbarBottom .navbar-nav .nav-item .nav-link {min-width: 66px; } }
@media (max-width: 575.98px) { #navbarBottom {height: 56px; } }
#navbarBottom .navbar-nav .nav-item .nav-link i{font-size: 16px; }
#formLogin .input-group .input-group-text{padding-right: 15px; }
.navbar-dark .navbar-nav .nav-link > i {margin-right: 6px!important; }
body{
  padding-bottom: 54px;
}
#PlayerWarper {
  max-height: calc(100% - 38px);
}
@media screen and (min-width: 467px) {
  body{
    padding-bottom: 56px;
  }
  #PlayerWarper {
    max-height: calc(100% - 40px);
  }
}
@media screen and (min-width: 780px) {
  #PlayerWarper {
    max-height: calc(100% - 50px);
  }
}
.navbar-toggler-icon{
  font-size: 16px;margin-top: -10px;margin-right: 8px;
}
.navbar-brand.rounded-circle{
  overflow: hidden;width: 24px!important;height: 24px!important;text-align: center;
  margin-top: -8px;
}
.navbar-brand.rounded-circle .fa-user{
  font-size: 20px!important;
}

#box-chat-all{
  width: 100%;
  height: 250px;
  max-width: 450px;
  position: fixed;
  left: 10px;
  bottom: 55px; 
  background-color: rgba(1,3,26,0.8);
  box-shadow: 0 4px 8px 3px rgb(0 0 0 / 20%);
  transition: background-color 0.3s ease-in-out;
  border-radius: 12px;
}
@media screen and (min-width: 467px){
  #box-chat-all{
    bottom: 70px;
  }
}
#box-chat-all:hover{
  background-color: rgba(1,3,26,0.93);
}

#box-chat-all textarea {
 border-radius: 16px;
 margin-right: 5px;
 font-size: 14px;
 font-family: tahoma!important;
 box-shadow: none;
 resize: none;
 width: 100%;
 min-height: auto;
 line-height: 24px;
 padding: 7px 10px;
 outline: none;
 padding-right: 30px;
 background-color: #060929;
 transition: background-color 0.3s ease-in-out;
}
#box-chat-all textarea:hover , #box-chat-all textarea:focus  {
  background-color: #fff;
}

#box-chat-all .btn-icon{
  width: 42px;
  height: 38px;
  padding: 0;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  display: inline-block;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background-color: #007bff;
  color: #fff;
}
#box-chat-all .btn-icon:hover{
  box-shadow: 0 0 0 0.2rem rgb(108 135 165 / 25%);
}
#box-chat-all .card-body{
  padding-right: 5px!important;
}
#box-chat-all .card-body>.inner{
  overflow: auto;
  height: 100%;
}

#box-chat-all .card-body>.inner::-webkit-scrollbar {
  width: 6px;
}
#box-chat-all .card-body>.inner::-webkit-scrollbar-track {
  background:transparent;
}
#box-chat-all .card-body>.inner::-webkit-scrollbar-thumb {
  background-color: #02030e;
  border-radius: 8px;
}
#box-chat-all .card-body>.inner:hover::-webkit-scrollbar-thumb {
  background-color: #111;
}
#box-chat-all .card-body>.inner::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
#box-chat-all .card-body >.inner p{
  margin-bottom: 2px;
}
#box-chat-all .card-footer{
  padding-right: 5px!important;
  padding-left: 5px!important;
}

.select-dropdown {
  width: 100%;
  display: inline-block;
  background-color: #181834;
  border-radius: 2px;
  box-shadow: 0 0 2px rgb(204, 204, 204);
  transition: all .5s ease;
  position: relative;
  font-size: 14px;
  color: #474747;
  height: 100%;
  text-align: left
}
.select-dropdown .select {
  background-color: #181834;
  cursor: pointer;
  display: block;
  padding: 10px;
  color: #fff;
}
.select-dropdown .select > i {
  font-size: 13px;
  color: #888;
  cursor: pointer;
  transition: all .3s ease-in-out;
  float: right;
  line-height: 20px
}
.select-dropdown:hover {
  box-shadow: 0 0 4px rgb(204, 204, 204)
}
.select-dropdown:active {
  background-color: #f8f8f8
}
.select-dropdown.active:hover,
.select-dropdown.active {
  box-shadow: 0 0 4px rgb(204, 204, 204);
  border-radius: 2px 2px 0 0;
  background-color: #181834
}
.select-dropdown.active .select > i {
  transform: rotate(-90deg)
}
.select-dropdown .dropdown-menu {
  position: absolute;
  background-color: #181834;
  width: 100%;
  left: 0;
  margin-top: 1px;
  box-shadow: 0 1px 2px rgb(204, 204, 204);
  border-radius: 0 1px 2px 2px;
  overflow: hidden;
  display: none;
  overflow-y: auto;
  z-index: 9
}
.select-dropdown .dropdown-menu li {
  padding: 10px;
  transition: all .2s ease-in-out;
  cursor: pointer;
  color: #fff;
} 
.select-dropdown .dropdown-menu {
  padding: 0;
  list-style: none
}
.select-dropdown .dropdown-menu li:hover {
  background-color: #0a0928
}
.select-dropdown .dropdown-menu li:active {
  background-color: #0a0928
}

.select-dropdown img{
  max-width: 50px;
}


#chatDailyLogin{transition: transform .5s; height: 74px;width: 74px; position: fixed; top: 60px; right: 10px; line-height: 36px; text-align: center; font-size: 20px; z-index: 1049; opacity: 0.9; background-color: transparent; transition: 0.3s ease-in-out!important; text-align: center; padding: 0px; box-shadow: 0 0 0 0.2rem rgb(108 135 165 / 25%); }
#chatDailyLogin:hover{transform: scale(1.05);}
#chatDailyLogin.tooltip .tooltiptext {width: 100px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: -45%; left: -20%;  font-size: 12px; line-height: 20px; }
#chatDailyLogin.tooltip .tooltiptext::after {content: ""; position: absolute; top: -33%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color:  transparent transparent black transparent; }
@media screen and (max-width: 780px) {#chatDailyLogin{position: absolute;height: 48px; width: 48px;top:150px; } #chatDailyLogin.tooltip .tooltiptext{width: 52px;bottom: -116%;left: -11%;}#chatDailyLogin.tooltip .tooltiptext::after{top: -18%;    left: 53%;}}
#pluginsModal .modal-dialog{height: calc(100% - 70px); }
#pluginsModal .modal-content{background-color: transparent; }

figure.table table td,figure.table table th {border: 1px solid #dee2e6;}
figure.table table td[rowspan] { vertical-align:middle;text-align:center; }

/*halloween*/
/*
#navbarBottom {max-width: 570px;margin: auto; border-top-right-radius: 10px;border-top-left-radius: 10px; background-image: url('/assets/images/_web/halloween/footer-bg.png'); background-repeat: no-repeat; background-size: 100% 100%;background-position: center center;background-color: transparent!important;border-top: none;}
#walletRow > div  {
  background-image: url('/assets/images/_web/halloween/wallet-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.box-announce { background-color: #27283c!important; }
.box-announce marquee{ margin-top: 5px; }*/
#halloween-spider{position: absolute; top: 0; left: 0; width: 100%;  opacity: 0.6;}
#halloween-spider [class*="spider"] {position: absolute; height: 40px; width: 50px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; margin: 40px 0 0 0; background: #110d04; } #halloween-spider [class*="spider"] *, #halloween-spider [class*="spider"]:before, #halloween-spider [class*="spider"]:after,
#halloween-spider [class*="spider"] :after,
#halloween-spider [class*="spider"] :before {position: absolute; content: ""; }
#halloween-spider [class*="spider"]:before {width: 1px; background: #aaaaaa; left: 50%; top: -320px; height: 320px; }
#halloween-spider [class*="spider"] .eye {top: 16px; height: 14px; width: 12px; background: #ffffff; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
#halloween-spider [class*="spider"] .eye:after {top: 6px; height: 5px; width: 5px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: black; }
#halloween-spider [class*="spider"] .eye.left {left: 14px; }
#halloween-spider [class*="spider"] .eye.left:after {right: 3px; }
#halloween-spider [class*="spider"] .eye.right {right: 14px; }
#halloween-spider [class*="spider"] .eye.right:after {left: 3px; }
#halloween-spider [class*="spider"] .leg {top: 6px; height: 12px; width: 14px; border-top: 2px solid #fff; border-left: 1px solid transparent; border-right: 1px solid transparent; border-bottom: 1px solid transparent; z-index: -1; }
#halloween-spider [class*="spider"] .leg.left {left: -8px; -moz-transform-origin: top right; -ms-transform-origin: top right; -webkit-transform-origin: top right; transform-origin: top right; -moz-transform: rotate(36deg) skewx(-20deg); -ms-transform: rotate(36deg) skewx(-20deg); -webkit-transform: rotate(36deg) skewx(-20deg); transform: rotate(36deg) skewx(-20deg); border-left: 2px solid #110d04; -moz-border-radius: 60% 0 0 0; -webkit-border-radius: 60%; border-radius: 60% 0 0 0; -moz-animation: legs-wriggle-left 1s 0s infinite; -webkit-animation: legs-wriggle-left 1s 0s infinite; animation: legs-wriggle-left 1s 0s infinite; }
#halloween-spider [class*="spider"] .leg.right {right: -8px; -moz-transform-origin: top left; -ms-transform-origin: top left; -webkit-transform-origin: top left; transform-origin: top left; -moz-transform: rotate(-36deg) skewx(20deg); -ms-transform: rotate(-36deg) skewx(20deg); -webkit-transform: rotate(-36deg) skewx(20deg); transform: rotate(-36deg) skewx(20deg); border-right: 2px solid #110d04; -moz-border-radius: 0 60% 0 0; -webkit-border-radius: 0; border-radius: 0 60% 0 0; -moz-animation: legs-wriggle-right 1s 0.2s infinite; -webkit-animation: legs-wriggle-right 1s 0.2s infinite; animation: legs-wriggle-right 1s 0.2s infinite; }
#halloween-spider [class*="spider"] .leg:nth-of-type(2) {top: 14px; left: -11px; -moz-animation: legs-wriggle-left 1s 0.8s infinite; -webkit-animation: legs-wriggle-left 1s 0.8s infinite; animation: legs-wriggle-left 1s 0.8s infinite; }
#halloween-spider [class*="spider"] .leg:nth-of-type(3) {top: 22px; left: -12px; -moz-animation: legs-wriggle-left 1s 0.2s infinite; -webkit-animation: legs-wriggle-left 1s 0.2s infinite; animation: legs-wriggle-left 1s 0.2s infinite; }
#halloween-spider [class*="spider"] .leg:nth-of-type(4) {top: 31px; left: -10px; -moz-animation: legs-wriggle-left 1s 0.4s infinite; -webkit-animation: legs-wriggle-left 1s 0.4s infinite; animation: legs-wriggle-left 1s 0.4s infinite; }
#halloween-spider [class*="spider"] .leg:nth-of-type(6) {top: 14px; right: -11px; -moz-animation: legs-wriggle-right 1s 0.4s infinite; -webkit-animation: legs-wriggle-right 1s 0.4s infinite; animation: legs-wriggle-right 1s 0.4s infinite; }
#halloween-spider [class*="spider"] .leg:nth-of-type(7) {top: 22px; right: -12px; -moz-animation: legs-wriggle-right 1s 0.7s infinite; -webkit-animation: legs-wriggle-right 1s 0.7s infinite; animation: legs-wriggle-right 1s 0.7s infinite; }
#halloween-spider [class*="spider"] .leg:nth-of-type(8) {top: 31px; right: -10px; -moz-animation: legs-wriggle-right 1s 0.3s infinite; -webkit-animation: legs-wriggle-right 1s 0.3s infinite; animation: legs-wriggle-right 1s 0.3s infinite; }
#halloween-spider .spider_0 {left: 5%; -moz-animation: spider-move-0 5s infinite; -webkit-animation: spider-move-0 5s infinite; animation: spider-move-0 5s infinite; }
#halloween-spider .spider_1 {left: 20%; -moz-animation: spider-move-1 5s infinite; -webkit-animation: spider-move-1 5s infinite; animation: spider-move-1 5s infinite; }
#halloween-spider .spider_2 {left: 35%; -moz-animation: spider-move-2 5s infinite; -webkit-animation: spider-move-2 5s infinite; animation: spider-move-2 5s infinite; }
#halloween-spider .spider_3 {right: 35%; margin-top: 160px; -moz-animation: spider-move-3 5s infinite; -webkit-animation: spider-move-3 5s infinite; animation: spider-move-3 5s infinite; }
#halloween-spider .spider_4 {right: 20%; margin-top: 50px; -moz-animation: spider-move-4 5s infinite; -webkit-animation: spider-move-4 5s infinite; animation: spider-move-4 5s infinite; }
#halloween-spider .spider_5 {right: 5%; margin-top: 210px; -moz-animation: spider-move-5 5s infinite; -webkit-animation: spider-move-5 5s infinite; animation: spider-move-5 5s infinite; }
#halloween-spider .web-right , #halloween-spider .web-right2 { position: absolute; height: 160px; width: auto; right: 15px; top: 0; z-index: -1; opacity: 0.2; }
#halloween-spider .web-left , #halloween-spider .web-left2 {position: absolute; height: 160px;left: 15px; top: 0px; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); z-index: -1;opacity:0.2; }
#halloween-spider .web-left2 , #halloween-spider .web-right2 {opacity: 1; top:250px;-moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
@-moz-keyframes flicker {0%, 6%, 12% {text-shadow: none; color: #111111; } 3%, 9% {text-shadow: 0 0 8px rgba(250, 103, 1, 0.6); color: #fa6701; } 60% {text-shadow: 0 0 8px rgba(250, 103, 1, 0.6), 0 0 16px rgba(250, 103, 1, 0.4), 0 0 20px rgba(255, 0, 84, 0.2), 0 0 22px rgba(255, 0, 84, 0.1); color: #fa6701; } 100% {text-shadow: 0 0 8px rgba(250, 103, 1, 0.6), 0 0 16px rgba(250, 103, 1, 0.4), 0 0 20px rgba(255, 0, 84, 0.2), 0 0 22px rgba(255, 0, 84, 0.1); color: #fa6701; } } @-webkit-keyframes flicker {0%, 6%, 12% {text-shadow: none; color: #111111; } 3%, 9% {text-shadow: 0 0 8px rgba(250, 103, 1, 0.6); color: #fa6701; } 60% {text-shadow: 0 0 8px rgba(250, 103, 1, 0.6), 0 0 16px rgba(250, 103, 1, 0.4), 0 0 20px rgba(255, 0, 84, 0.2), 0 0 22px rgba(255, 0, 84, 0.1); color: #fa6701; } 100% {text-shadow: 0 0 8px rgba(250, 103, 1, 0.6), 0 0 16px rgba(250, 103, 1, 0.4), 0 0 20px rgba(255, 0, 84, 0.2), 0 0 22px rgba(255, 0, 84, 0.1); color: #fa6701; } } @keyframes flicker {0%, 6%, 12% {text-shadow: none; color: #111111; } 3%, 9% {text-shadow: 0 0 8px rgba(250, 103, 1, 0.6); color: #fa6701; } 60% {text-shadow: 0 0 8px rgba(250, 103, 1, 0.6), 0 0 16px rgba(250, 103, 1, 0.4), 0 0 20px rgba(255, 0, 84, 0.2), 0 0 22px rgba(255, 0, 84, 0.1); color: #fa6701; } 100% {text-shadow: 0 0 8px rgba(250, 103, 1, 0.6), 0 0 16px rgba(250, 103, 1, 0.4), 0 0 20px rgba(255, 0, 84, 0.2), 0 0 22px rgba(255, 0, 84, 0.1); color: #fa6701; } } @-moz-keyframes legs-wriggle-left {0%, 100% {-moz-transform: rotate(36deg) skewx(-20deg); transform: rotate(36deg) skewx(-20deg); } 25%, 75% {-moz-transform: rotate(15deg) skewx(-20deg); transform: rotate(15deg) skewx(-20deg); } 50% {-moz-transform: rotate(45deg) skewx(-20deg); transform: rotate(45deg) skewx(-20deg); } } @-webkit-keyframes legs-wriggle-left {0%, 100% {-webkit-transform: rotate(36deg) skewx(-20deg); transform: rotate(36deg) skewx(-20deg); } 25%, 75% {-webkit-transform: rotate(15deg) skewx(-20deg); transform: rotate(15deg) skewx(-20deg); } 50% {-webkit-transform: rotate(45deg) skewx(-20deg); transform: rotate(45deg) skewx(-20deg); } } @keyframes legs-wriggle-left {0%, 100% {-moz-transform: rotate(36deg) skewx(-20deg); -ms-transform: rotate(36deg) skewx(-20deg); -webkit-transform: rotate(36deg) skewx(-20deg); transform: rotate(36deg) skewx(-20deg); } 25%, 75% {-moz-transform: rotate(15deg) skewx(-20deg); -ms-transform: rotate(15deg) skewx(-20deg); -webkit-transform: rotate(15deg) skewx(-20deg); transform: rotate(15deg) skewx(-20deg); } 50% {-moz-transform: rotate(45deg) skewx(-20deg); -ms-transform: rotate(45deg) skewx(-20deg); -webkit-transform: rotate(45deg) skewx(-20deg); transform: rotate(45deg) skewx(-20deg); } } @-moz-keyframes legs-wriggle-right {0%, 100% {-moz-transform: rotate(-36deg) skewx(20deg); transform: rotate(-36deg) skewx(20deg); } 25%, 75% {-moz-transform: rotate(-15deg) skewx(20deg); transform: rotate(-15deg) skewx(20deg); } 50% {-moz-transform: rotate(-45deg) skewx(20deg); transform: rotate(-45deg) skewx(20deg); } } @-webkit-keyframes legs-wriggle-right {0%, 100% {-webkit-transform: rotate(-36deg) skewx(20deg); transform: rotate(-36deg) skewx(20deg); } 25%, 75% {-webkit-transform: rotate(-15deg) skewx(20deg); transform: rotate(-15deg) skewx(20deg); } 50% {-webkit-transform: rotate(-45deg) skewx(20deg); transform: rotate(-45deg) skewx(20deg); } } @keyframes legs-wriggle-right {0%, 100% {-moz-transform: rotate(-36deg) skewx(20deg); -ms-transform: rotate(-36deg) skewx(20deg); -webkit-transform: rotate(-36deg) skewx(20deg); transform: rotate(-36deg) skewx(20deg); } 25%, 75% {-moz-transform: rotate(-15deg) skewx(20deg); -ms-transform: rotate(-15deg) skewx(20deg); -webkit-transform: rotate(-15deg) skewx(20deg); transform: rotate(-15deg) skewx(20deg); } 50% {-moz-transform: rotate(-45deg) skewx(20deg); -ms-transform: rotate(-45deg) skewx(20deg); -webkit-transform: rotate(-45deg) skewx(20deg); transform: rotate(-45deg) skewx(20deg); } } @-moz-keyframes spider-move-0 {0%, 100% {margin-top: 20px; } 43% {margin-top: calc(20px + 61px); } } @-webkit-keyframes spider-move-0 {0%, 100% {margin-top: 20px; } 43% {margin-top: calc(20px + 61px); } } @keyframes spider-move-0 {0%, 100% {margin-top: 20px; } 43% {margin-top: calc(20px + 61px); } } @-moz-keyframes spider-move-1 {0%, 100% {margin-top: 159px; } 57% {margin-top: calc(159px + 73px); } } @-webkit-keyframes spider-move-1 {0%, 100% {margin-top: 159px; } 57% {margin-top: calc(159px + 73px); } } @keyframes spider-move-1 {0%, 100% {margin-top: 159px; } 57% {margin-top: calc(159px + 73px); } } @-moz-keyframes spider-move-2 {0%, 100% {margin-top: 102px; } 63% {margin-top: calc(102px + 28px); } } @-webkit-keyframes spider-move-2 {0%, 100% {margin-top: 102px; } 63% {margin-top: calc(102px + 28px); } } @keyframes spider-move-2 {0%, 100% {margin-top: 102px; } 63% {margin-top: calc(102px + 28px); } } @-moz-keyframes spider-move-3 {0%, 100% {margin-top: 141px; } 68% {margin-top: calc(141px + 59px); } } @-webkit-keyframes spider-move-3 {0%, 100% {margin-top: 141px; } 68% {margin-top: calc(141px + 59px); } } @keyframes spider-move-3 {0%, 100% {margin-top: 141px; } 68% {margin-top: calc(141px + 59px); } } @-moz-keyframes spider-move-4 {0%, 100% {margin-top: 120px; } 61% {margin-top: calc(120px + 92px); } } @-webkit-keyframes spider-move-4 {0%, 100% {margin-top: 120px; } 61% {margin-top: calc(120px + 92px); } } @keyframes spider-move-4 {0%, 100% {margin-top: 120px; } 61% {margin-top: calc(120px + 92px); } } @-moz-keyframes spider-move-5 {0%, 100% {margin-top: 78px; } 55% {margin-top: calc(78px + 66px); } } @-webkit-keyframes spider-move-5 {0%, 100% {margin-top: 78px; } 55% {margin-top: calc(78px + 66px); } } @keyframes spider-move-5 {0%, 100% {margin-top: 78px; } 55% {margin-top: calc(78px + 66px); } }

#line-one::before { left: 1rem }
#line-two::before { right: 1rem }
#line-one::before,
#line-two::before { content:''; border-top: 1px solid #fff; width: 38%; position: absolute }
#_line { font-size:20px }
#line-one::after { font-size: 18px; width: 0; position: absolute; right: 54%; top: 39.5% }