#rightSidebar {
    border: 1px solid #e9e9e9;
  
    position: fixed;
    margin: 0;
    padding: 0;
    width: 230px;
    height: auto;
    top: 75px;
    right: -230px;  
    z-index: 500;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
#rightSidebar.open {
    background: #FFF none repeat scroll 0 0;
    right: 0;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    min-height: 550px;
}
#rightSidebar .selector-toggle {
    position: relative;

}
#rightSidebar .selector-toggle > a {
    padding-top: 7px;
    border: 1px solid #e9e9e9;
    border-right: 0;
    position: absolute;
    top: -1px;
    left: -60px;
    width: 60px;
    height: 60px;
    display: block;
    cursor: pointer;
    text-align: center;
    border-radius: 50px 0px 0px 50px;
    background-color:white;
    
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
    animation: bell 2.6s linear infinite;
    transform-origin: 50% 50%;
}
@-webkit-keyframes bell {

 /*
  0% {  transform: rotate(0deg) }
  2.88462% {  transform: rotate(-30deg) }
  5.76923% {  transform: rotate(-30deg) }
  8.65385% {  transform: rotate(30deg) }
  11.53846% {  transform: rotate(-30deg) }
  14.42308% {  transform: rotate(30deg) }
  17.30769% {  transform: rotate(-30deg) }
  20.19231% {  transform: rotate(30deg) }
  23.07692% {  transform: rotate(-30deg) }
  25.96154% { transform: rotate(30deg) }
  28.84616% {  transform: rotate(0deg) }
  100% {  transform: rotate(0deg) }*/
 
  0% { transform: rotate(-15deg) }
  1.66667% { transform: rotate(15deg) }
  3.33333% { transform: rotate(-18deg) }
  5% { transform: rotate(18deg) }
  6.66667% { transform: rotate(-22deg) }
  8.33333% { transform: rotate(22deg) }
  10% { transform: rotate(-18deg) }
  11.66667% { transform: rotate(18deg) }
  13.33333% { transform: rotate(-15deg) }
  15% { transform: rotate(15deg) }
  16.66667% { transform: rotate(-12deg) }
  18.33334% { transform: rotate(12deg) }
  20.00001% { transform: rotate(0deg) }
  100% { transform: rotate(0deg) }

    from{color:red;}
    to{color:#3FB6ED;}
       
}


#rightSidebar .selector-toggle > a:before {
    font-family: FontAwesome;
    content: "\f0a2";
    font-size: 30px;
    position: relative;
    float: left; 
    left: 17px;
    top:5px;
    line-height: 35px;

}

#rightSidebar .open .selector-toggle > a:before {
    font-family: FontAwesome;
    content: "\f0a2";
    font-size: 30px;
    position: relative;
    float: left;
    left: 17px;
    top:5px;
    line-height: 35px;
  }
/*hoverR*/
/*  .selector-toggle .tooltiptext {
    visibility: hidden;
    width: 50px;
    
    color: #3FB6ED;height:25px;
    text-align: center;
    border-radius: 6px;
    padding: 3px 0;
    position: absolute;
    z-index: 1;
    top: 12px;
    font-size: 20px;
    right: 120%;
    animation: arrow-right 1.52s ease infinite;
    transform-origin: 50% 50%;

}

.selector-toggle .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
  ;
}
.selector-toggle:hover .tooltiptext {
    visibility: visible;
}*/

#rightSidebar .selector-toggle .tooltiptext {
    visibility: visible;
    width: 50px;  content: "\f0a2";
    color: #3FB6ED;height:25px;
    text-align: center;
    border-radius: 6px;
    padding: 3px 0;
    position: absolute;
    z-index: 1;
    top: 12px;
    font-size: 20px;
    right: 120%;
    animation: arrow-right 2.6s ease infinite;
    transform-origin: 50% 50%;

}

#rightSidebar .selector-toggle .tooltiptext::after {

    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
  ;
}
#rightSidebar .selector-toggle:hover .tooltiptext {
    visibility: hidden;
}

 
@keyframes arrow-right{
/*  0% { transform:translate(0,0);opacity:0;}
  7.89474% { transform:translate(5px,0);opacity:0; }
  15.78947% { transform:translate(0,0);opacity:0; }
  23.68421% { transform:translate(5px,0);opacity:1; }
  31.57895% { transform:translate(0,0);opacity:1; }
  39.47368% { transform:translate(5px,0);opacity:1; }
  47.36842% { transform:translate(0,0);opacity:1; }
  100% { transform:translate(0,0); }*/
 
  0% { transform:translate(0,0);opacity:1;}
  4.41177% { transform:translate(5px,0);opacity:1;  }
  8.82353% { transform:translate(0,0);opacity:1;  }
  13.23529% { transform:translate(5px,0);opacity:1;  }
  17.64706% { transform:translate(0,0);opacity:1;  }
  22.05882% { transform:translate(5px,0);opacity:1;  }
  26.47059% { transform:translate(0,0);opacity:1; }
  100% { transform:translate(0,0);opacity:0; }

    from{color:#3FB6ED;}
    to{color:red;}

}
/*hoverUp*/
#rightSidebar .selector-toggle .tooltiptext1 {
    visibility: visible;
    width: 50px;
    color: #3FB6ED;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 52px;
    right: 230px;
    font-size: 20px;
    margin-left: -60px;
     
    animation: arrow-up 2.6s ease infinite;
    transform-origin: 50% 50%;
}

#rightSidebar .selector-toggle .tooltiptext1::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;

}

#rightSidebar .selector-toggle:hover .tooltiptext1 {
    visibility: hidden;
}

@keyframes arrow-up{
/*  0% { transform:translate(0,0) }
  7.89474% { transform:translate(0,-5px) }
  15.78947% { transform:translate(0,0) }
  23.68421% { transform:translate(0,-5px) }
  31.57895% { transform:translate(0,0) }
  39.47368% { transform:translate(0,-5px) }
  47.36842% { transform:translate(0,0) }
  100% { transform:translate(0,0) }
*/

  0% { transform:translate(0,0);opacity:1;}
  4.41177% { transform:translate(0,-5px);opacity:1;  }
  8.82353% { transform:translate(0,0);opacity:1;  }
  13.23529% { transform:translate(0,-5px);opacity:1;  }
  17.64706% { transform:translate(0,0);opacity:1;  }
  22.05882% { transform:translate(0,-5px);opacity:1;  }
  26.47059% { transform:translate(0,0);opacity:1; }
  100% { transform:translate(0,0);opacity:0; }

    from{color:#3FB6ED;}
    to{color:red;}
}

/*hoverDown*/

#rightSidebar .selector-toggle .tooltiptext2 {
    visibility: visible;
    width: 50px;
    color: #3FB6ED;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -30px;
    right: 230px;
    font-size: 20px;
    margin-left: -60px;
    animation: arrow-down 2.6s ease infinite;
    transform-origin: 50% 50%;


}

#rightSidebar .selector-toggle .tooltiptext2::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;

}

#rightSidebar .selector-toggle:hover .tooltiptext2 {
    visibility: hidden;
}
@keyframes arrow-down {
/*  0% { transform:translate(0,0) }
  7.89474% { transform:translate(0,5px) }
  15.78947% { transform:translate(0,0) }
  23.68421% { transform:translate(0,5px) }
  31.57895% { transform:translate(0,0) }
  39.47368% { transform:translate(0,5px) }
  47.36842% { transform:translate(0,0) }
  100% { transform:translate(0,0) }*/

  0% { transform:translate(0,0);opacity:1;}
  4.41177% { transform:translate(0,5px);opacity:1;  }
  8.82353% { transform:translate(0,0);opacity:1;  }
  13.23529% { transform:translate(0,5px);opacity:1;  }
  17.64706% { transform:translate(0,0);opacity:1;  }
  22.05882% { transform:translate(0,5px);opacity:1;  }
  26.47059% { transform:translate(0,0);opacity:1; }
  100% { transform:translate(0,0);opacity:0; }



    from{color:#3FB6ED;}
    to{color:red;}

}



/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/

#leftSidebar {
    border: 1px solid #e9e9e9;
  
    position: fixed;
    margin: 0;
    padding: 0;
    width: 230px;
    height: auto;
    top: 75px;
    left: -230px;  
    z-index: 500;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
#leftSidebar.open {
    background: #FFF none repeat scroll 0 0;
    left: 0;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    min-height: 550px;
}
#leftSidebar .selector-toggle {
    position: relative;

}
#leftSidebar .selector-toggle > a {
    padding-top: 7px;
    border: 1px solid #e9e9e9;
    border-left: 0;
    position: absolute;
    top: -1px;
    right: -60px;
    width: 60px;
    height: 60px;
    display: block;
    cursor: pointer;
    text-align: center;
    border-radius: 0px 50px 50px 0px;
    background-color:white;
    
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
     animation: color 2.6s ease infinite;
 
    



}
@keyframes color{

    0%{color: #b2e5e5;}
    
   

    100%{color:#fe5757;}
}

#leftSidebar .selector-toggle > a:before {
    font-family: FontAwesome;
    font-size: 35px;
    position: relative;
    float: left; 
    left: 11px;
    top:5px;
    line-height: 35px;
    content: "\f06b";

}

#leftSidebar .open .selector-toggle > a:before {
    font-family: FontAwesome;
    font-size: 35px;
    position: relative;
    float: left;
    left: 17px;
    top:5px;
    line-height: 35px;
    content: "\f06b";
  }

#leftSidebar .selector-toggle .tooltiptext {
    visibility: visible;
    width: 50px;
    
    color: #3FB6ED;height:25px;
    text-align: center;
    border-radius: 6px;
    padding: 3px 0;
    position: absolute;
    z-index: 1;
    top: 12px;
    font-size: 20px;
    right: 120%;


}

#leftSidebar .selector-toggle .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
  ;
}
#leftSidebar .selector-toggle:hover .tooltiptext {
    visibility: hidden;
}

/*hoverUp*/
#leftSidebar .selector-toggle .tooltiptext1 {
    visibility: visible;
    width: 50px;
    color: #3FB6ED;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 52px;
    right: 230px;
    font-size: 20px;
    margin-left: -60px;


}

#leftSidebar .selector-toggle .tooltiptext1::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;

}

#leftSidebar .selector-toggle:hover .tooltiptext1 {
    visibility: hidden;
}

/*hoverDown*/

#leftSidebar .selector-toggle .tooltiptext2 {
    visibility: visible;
    width: 50px;
    color: #3FB6ED;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -30px;
    right: 230px;
    font-size: 20px;
    margin-left: -60px;



}

.selector-toggle .tooltiptext2::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;

}

.selector-toggle:hover .tooltiptext2 {
    visibility: hidden;
}