/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

/* ========================================================================
   Use this file to add custom CSS easily
 ========================================================================== */

/* Logo size for centered navigation */
.tm-navbar-center [class*='tm-logo'] { transform: scale(1.2); }

.menubar {
   position: fixed;
   bottom: 0px;
   left: 0;
   z-index: 999;
}
.glass {
    display: inline-block;
    background: rgba(255,255,255, 0.2);
    padding: 3em;
    border-radius: 3em;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(40px);
    border: solid 2px transparent;
    background-clip: padding-box;
    box-shadow: 10px 10px 10px  rgba(46, 54, 68, 0.03);
	}


.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 32px;  /* Preferred icon size */
  display: inline-block;
  color:#fff;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
.FABMenu
{
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  width:600px;
  height:200px;
}
.FABMenu input
{
  position:absolute;
  top: 0%;
  left:50%;
  width:80px;
  height:80px;
  z-index:20;
  border-radius: 80px;
  opacity:0;
  cursor:pointer;
}
.hamburger
{
  position:absolute;
  top:0%;
  left:50%;
  width: 80px;
  height:80px;
  background-color: #E84F3E;
  border-radius:100%;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.15);
  z-index:10;
  cursor:pointer;
}
.dots span
{
  position: absolute;
  top: 45%;
  width:8px;
  height:8px;
  border-radius:8px;
  background:#fff;
  z-index:20;
    transition: all .3s ease-in-out;
}

.first
{
  margin-left:1em;
}
.second
{
  
  margin-left:2.3em;
}
.third
{
   margin-left:3.6em;
}
.FABMenu input:checked ~ .hamburger .dots .first
{
 top:20px;
  height:60px;
  transform-origin:top;
  transform:rotate(-45deg);
   transition: all .3s ease-in-out;
  
}
.FABMenu input:checked ~ .hamburger .dots .third
{
 top:20px;
  height:60px;
  transform-origin:top;
  transform:rotate(45deg);
   transition: all .3s ease-in-out;
}
.action_items_bar
{
  position:absolute;
  top:4.5%;
  left:25%;
  width:380px;
  height:60px;
  background-color: #E84F3E;
  border-radius:60px;
  box-shadow: 0px 5px 20px #F19181;
  z-index:5;
  
/*   animation-name: expand-the-bar;
  animation-duration: 2s;
  animation-timing-function: ease-in-out; */
  transform:scaleX(0);
  transition: all .3s ease-in-out;
}
.FABMenu input:checked ~ .action_items_bar
{
  transform:scaleX(1);
}
.action_items span
{
  position: absolute;
  top: 25%;
  width:20px;
  padding-left:35px;
  opacity:0;
  transition: all .2s ease-in-out;
  cursor:pointer; 
}
.first_item
{
  left:0%;
}
.second_item
{
  left:15%;
}
.third_item
{
  left:55%;
}
.fourth_item
{
  left:70%;
}
.FABMenu input:checked ~ .action_items_bar .action_items .first_item
{
    opacity:1;
  transition-delay:.45s;
}
.FABMenu input:checked ~ .action_items_bar .action_items .second_item
{
    opacity:1;
  transition-delay:.40s;

}
.FABMenu input:checked ~ .action_items_bar .action_items .third_item
{
    opacity:1;
  transition-delay:.40s;
}
.FABMenu input:checked ~ .action_items_bar .action_items .fourth_item
{
    opacity:1;
  transition-delay:.45s;
}
.pulse {
  position: fixed!important;
  bottom: -10px;
  right: 117px;
  transform: translate(-50%, -50%);
  background: #e6bf52;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  color: #fff;
  text-align: center;
  line-height: 55px;
  font-size: 40px;
    z-index:2;
}

.pulse:before,
.pulse:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #e6bf52;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 2s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}

.pulse:after{
    animation-delay: .5s;
}