@import url(material-design-iconic-font.min.css);

.fabs {
  bottom: 60px;
  position: fixed;
  margin: 1em;
  right: 0;
  z-index: 998;

}

.fab:hover{
    color: #ffffff;
}

.fab {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  text-align: center;
  color: #f0f0f0;
  margin: 25px auto 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
  cursor: pointer;
  -webkit-transition: all .1s ease-out;
  transition: all .1s ease-out;
  position: relative;
  z-index: 998;
  overflow: hidden;
  background: #42a5f5;
}

.fab > i {
  font-size: 2em;
  line-height: 55px;
  -webkit-transition: all .2s ease-out;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.fab:not(:last-child) {
  width: 0;
  height: 0;
  margin: 20px auto 0;
  opacity: 0;
  visibility: hidden;
  line-height: 40px;
}

.fab:not(:last-child) > i {
  font-size: 1.4em;
  line-height: 40px;
}

.fab:not(:last-child).is-visible {
  width: 40px;
  height: 40px;
  margin: 15px auto 10;
  opacity: 1;
  visibility: visible;
}

.fab:nth-last-child(1) {
  -webkit-transition-delay: 25ms;
  transition-delay: 25ms;
}

.fab:not(:last-child):nth-last-child(2) {
  -webkit-transition-delay: 20ms;
  transition-delay: 20ms;
}

.fab:not(:last-child):nth-last-child(3) {
  -webkit-transition-delay: 40ms;
  transition-delay: 40ms;
}

.fab:not(:last-child):nth-last-child(4) {
  -webkit-transition-delay: 60ms;
  transition-delay: 60ms;
}

.fab:not(:last-child):nth-last-child(5) {
  -webkit-transition-delay: 80ms;
  transition-delay: 80ms;
}

/*Chatbox*/
.chat {
  position: fixed;
  right: 15px;
  bottom: 150px;
  width: 350px;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  opacity: 0;
  box-shadow: 1px 1px 100px 2px rgba(0, 0, 0, 0.22);
  border-radius: 10px;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  display: none;
}

.chat_header {
  font-size: 16px;
  font-weight: bold;
  color: #f3f3f3;
  background: #008dff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-align: center;
  text-transform: uppercase;
  padding: 10px 0;
}

.chat.is-visible {
  opacity: 1;
  -webkit-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
  animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
  display: block;
}
.is-hide{
  opacity: 0
}

.chat_body {
  background: #fff;
  padding: 50px 30px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

/*Element state*/
.is-active {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.is-float {
  box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}

.is-loading {
  display: block;
  -webkit-animation: load 1s cubic-bezier(0, .99, 1, 0.6) infinite;
  animation: load 1s cubic-bezier(0, .99, 1, 0.6) infinite;
}

/*Animation*/
@-webkit-keyframes zoomIn {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0.0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0.0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@-webkit-keyframes load {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0.0;
  }
  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes load {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0.0;
  }
  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
/* SMARTPHONES PORTRAIT */


/*Button*/
.btn-support{
  display: block;
  background-color: rgba(53, 120, 229, 0.9);
  font-size: 16px;
  padding: 15px 0;
  text-align: center;
  border-radius: 16px;
  color: #ffffff;
  margin-bottom: 20px;
  transition: all .2s ease-in-out;
}

.btn-support:hover{
  color: #ffffff;
  box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.22);
}

.btn-messenger{
  display: block;
  background-color: rgba(0, 0, 0, .05);
  font-size: 16px;
  padding: 15px 0;
  text-align: center;
  border-radius: 16px;
  color: #000;
  margin-bottom: 20px;
  transition: all .2s ease-in-out;
}

.btn-messenger:hover{
  color: #000;
  box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.12);
}

/*is-focus-comment*/
body.is-focus-comment #comment-backdrop{
  display: block;
}

body.is-focus-comment .product-comment{
  position: relative;
  z-index: 1000;
}

body.is-focus-comment #stickyProductHeader{
  z-index: 990;
}

body.is-focus-comment #topcontrol{
  z-index: 990;
}

#comment-backdrop{
  position: fixed;
  z-index: 999;
  background: rgba(0,0,0,0.6);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .fabs {
    bottom: 100px;
  }

  .chat {
    bottom: 180px;
    width: calc(100vw - 30px);
    max-width: 350px;
  }
}