.btn-frame {
   display: block;
   cursor: pointer;
   position: fixed;
}

.btn-frame i {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   overflow: hidden;
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--background);
}

.btn-frame .pulse {
   animation-name: pulse;
}

.btn-frame .pulsation {
   width: 70px;
   height: 70px;
   background-color: var(--background);
   border-radius: 50px;
   position: absolute;
   left: calc(50% - 70px / 2);
   top: calc(50% - 70px / 2);
   z-index: -1;
   transform: scale(0);
   animation: arcontactus-pulse 2s infinite;
}

.btn-frame .pulsation:nth-of-type(2n) {
   animation-delay: 0.5s;
}

@keyframes arcontactus-pulse {
   0% {
      -webkit-transform: scale(0);
      transform: scale(0);
      opacity: 1;
   }

   50% {
      opacity: 0.5;
   }

   100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 0;
   }
}

#social {
   position: fixed;
   z-index: 99;
   left: var(--left, inherit);
   right: var(--right, inherit);
   bottom: var(--bottom, inherit);
}

#social .btn-frame {
   position: relative;
   margin: 15px 0;
}

#social .btn-frame .pulsation {
   background: var(--background) !important;
}

.toolbar {
   width: 100%;
   bottom: 0;
   position: fixed;
   z-index: 500;
   left: 0;
   -webkit-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75));
   -moz-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75));
   -ms-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75));
   -o-filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75));
   filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.75));
}

.toolbar.is-active .list-phone {
   display: block;
   -webkit-animation: quickShow 0.2s cubic-bezier(0.66, 0.45, 0.76, 1.53) forwards;
   animation: quickShow 0.2s cubic-bezier(0.66, 0.45, 0.76, 1.53) forwards;
}

.toolbar .list-phone {
   position: absolute;
   bottom: 100%;
   left: 30px;
   opacity: 0;
   transform: scale(0);
   transform-origin: 50% 100%;
   display: none;
}

.toolbar .list-phone a {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   background: #fff;
   max-width: 240px;
   padding: 10px 20px;
   margin: 10px 0;
   border-radius: 50px;
   padding-right: 30px;
}

.toolbar .list-phone svg {
   max-width: 30px;
   max-height: 30px;
}

.toolbar .list-phone span {
   display: block;
   width: calc(100% - 40px);
   color: #333;
   font-weight: 700;
}

.toolbar .phone {
   position: relative;
   width: 50px;
   height: 50px;
   z-index: 99;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--background);
   border-radius: 50%;
   margin: 0 0 -25px 30px;
   transition: transform 0.2s ease-in-out;
}

.toolbar .phone a {
   color: #333;
   display: block;
   position: relative;
}

.toolbar .phone a:after,
.toolbar .phone a:before {
   position: absolute;
   content: "";
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) rotate(135deg);
   width: 30px;
   height: 3px;
   border-radius: 2rem;
   background-color: #0f4334;
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
}

.toolbar .phone a:after {
   transform: translate(-50%, -50%) rotate(45deg);
}

.toolbar .phone svg {
   max-width: 27px;
   max-height: 27px;
   display: block;
   position: relative;
   fill: #0f4334;
}

.toolbar.is-active .phone {
   transform: rotate(-180deg);
}

.toolbar.is-active .phone svg {
   opacity: 0;
}

.toolbar.is-active .phone a:after,
.toolbar.is-active .phone a:before {
   opacity: 1;
}

.toolbar ul {
   list-style: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0;
   margin: 0;
   --size: 33px;
   background: var(--background);
   padding: 5px 10px;
}

.toolbar ul li {
   flex: 1 1 0%;
   text-align: center;
}

.toolbar ul li a {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 5px;
   width: 100%;
   color: #fff;
   font-size: 11px;
}

.toolbar ul li a i {
   max-width: 30px;
   fill: #fff;
}

.toolbar .phone svg {
   animation: tada 1.2s infinite;
   fill: #fff;
}

.tada {
   animation: tada 1.2s infinite;
}

.lang-toolbar {
   display: flex;
   justify-content: center;
   align-items: center;
}

.toolbar ul li.lang-toolbar a {
   display: inline-block;
   width: unset;
   margin: 0 2px;
   font-size: unset;
}

.toolbar ul li.lang-toolbar a img {
   height: 10% !important;
}

.ex6 path {
   fill: transparent;
   stroke: #fff;
   stroke-width: 0.5;
   stroke-dasharray: 1500;
   stroke-dashoffset: 1500;
   -webkit-animation: dash 5s ease forwards;
   animation: dash 5s ease forwards;
}

@-webkit-keyframes dash {
   to {
      fill: #fff;
      stroke-dashoffset: 0;
   }
}

@keyframes dash {
   to {
      fill: #fff;
      stroke-dashoffset: 0;
   }
}

@keyframes tada {
   0% {
      transform: scaleX(1);
   }

   10%,
   20% {
      transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
   }

   30%,
   50%,
   70%,
   90% {
      transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
   }

   40%,
   60%,
   80% {
      transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
   }

   to {
      transform: scaleX(1);
   }
}

@keyframes quickShow {
   0% {
      opacity: 0;
      transform: scale(0);
   }

   100% {
      opacity: 1;
      transform: scale(1);
   }
}

@media (max-width: 870px) {
   .toolbar {
      display: block;
   }

   #messages-facebook,
   .progress-wrap {
      display: none !important;
   }
}