.switch {
    position:relative;
    width:100px;
    height:50px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    background-color:rgb(76,217,100);
    border:solid;
    border-color:#8f8f8f;
    border-radius:50px;
}

.switchbutton {
    position:absolute;
    left:0;
    width:50px;
    height:50px;
    background-color:white;
    color:#8f8f8f;
    border-radius:50px;
    border:none;
}

.setswitch
{
    -webkit-transform:translateX(50px);
    -webkit-transition: -webkit-transform 0.5s;
}

.resetswitch
{
    -webkit-transform:translateX(0px);
    -webkit-transition: -webkit-transform 0.5s;
}

.setswitchbg
{
    background-color:#8f8f8f;
    -webkit-transition: background-color 0.5s linear;
}

.resetswitchbg
{
    background-color:rgb(76,217,100);
    -webkit-transition: background-color 0.5s linear;
}

.setswitchdiv
{
    background-color:#222;
    color:#fff;
    -webkit-transition: background-color 0.5s linear;
    -webkit-transition: color 0.5s linear;
}

.resetswitchdiv
{
    background-color:#fff;
    color:#222;
    -webkit-transition: background-color 0.5s linear;
    -webkit-transition: color 0.5s linear;
}






.hideright {
    -webkit-transform:translateX(100%);
    -webkit-transition: -webkit-transform 1s;
}

.showright {
    -webkit-transform:translateX(0px);
    -webkit-transition: -webkit-transform 2s;
}

.hideleft {
    -webkit-transform:translateX(-100%);
    -webkit-transition: -webkit-transform 1s;
}

.hideleftflip {
    -webkit-transform:translateX(-100%) scaleX(-1);
    -webkit-transition: -webkit-transform 1s;
}

.showleft {
    -webkit-transform:translateX(0px);
    -webkit-transition: -webkit-transform 1s;
}

.showleftflip {
    -webkit-transform:scaleX(-1) translateX(0px) ;
    -webkit-transition: -webkit-transform 2s;
}

.hideopacity {
    -webkit-opacity: 0;
    -webkit-transition: -webkit-opacity 1s;
}

.showopacity {
    -webkit-opacity: 1;
    -webkit-transition: -webkit-opacity 3s;
}

.hidebottom {
    -webkit-transform:translateY(100%);
    -webkit-opacity: 0;
    -webkit-transition: -webkit-transform 1s;
}

.showbottom {
    -webkit-transform:translateY(0);
    -webkit-opacity: 1;
   
   -webkit-transition-property: -webkit-transform,opacity;
   -webkit-transition-duration: 1s;
   
}

.hybridbox {
    overflow: hidden;
}

.showexpand50 {
    -webkit-transition: width 1s;
    transition: width 1s;
    width:50% !important;
}


.bouncevertical {
    -webkit-animation: bouncevertical 3s infinite;
    animation: bouncevertical 3s infinite;
}

@-webkit-keyframes bouncevertical {
    0% {
        -webkit-transform: translateY(0), rotate(30deg);
        transform: translateY(0), rotate(30deg);
    }
    
    50% {
        -webkit-transform: translateY(-80px), rotate(0deg);
        transform: translateY(-80px), rotate(0deg);
    }
    
    100% {
        -webkit-transform: translateY(0), rotate(30deg);
        transform: translateY(0), rotate(30deg);
    }
}

.dangle {
        transform-origin: center top;
        animation-timing-function: ease-in-out;
        -webkit-animation: dangle 1.5s;
}

@-webkit-keyframes dangle {
        0% { -webkit-transform: rotate(20deg); }
        30% { -webkit-transform: rotate(-15deg); }
        60% { -webkit-transform: rotate(10deg); }
        100% { -webkit-transform: rotate(0deg); }
    }