.animateOutLeft {
    animation: slideOutLeft 0.2s;
    -webkit-animation: slideOutLeft 0.2s;
    -moz-animation: slideOutLeft 0.2s;
    -o-animation: slideOutLeft 0.2s;
}

@keyframes          slideOutLeft {from {transform: translate3d(0%,0,0); }         to {transform: translate3d(-105%,0,0);}}
@-webkit-keyframes  slideOutLeft {from {-webkit-transform: translate3d(0%,0,0);}  to {-webkit-transform: translate3d(-105%,0,0);}}
@-moz-keyframes     slideOutLeft {from {-moz-transform: translate3d(0%,0,0);}     to {-moz-transform: translate3d(-105%,0,0);}}
@-o-keyframes       slideOutLeft {from {-o-transform: translate3d(0%,0,0);}       to {-o-transform: translate3d(-105%,0,0);}}

.animateOutRight {
    animation: slideOutRight 0.2s;
    -webkit-animation: slideOutRight 0.2s;
    -moz-animation: slideOutRight 0.2s;
    -o-animation: slideOutRight 0.2s;
}

@keyframes          slideOutRight {from {transform: translate3d(0%,0,0); }         to {transform: translate3d(105%,0,0);}}
@-webkit-keyframes  slideOutRight {from {-webkit-transform: translate3d(0%,0,0);}  to {-webkit-transform: translate3d(105%,0,0);}}
@-moz-keyframes     slideOutRight {from {-moz-transform: translate3d(0%,0,0);}     to {-moz-transform: translate3d(105%,0,0);}}
@-o-keyframes       slideOutRight {from {-o-transform: translate3d(0%,0,0);}       to {-o-transform: translate3d(105%,0,0);}}

.animateOutUp {
    animation: slideOutUp 0.5s;
    -webkit-animation: slideOutUp 0.5s;
    -moz-animation: slideOutUp 0.5s;
    -o-animation: slideOutUp 0.5s;
}

@keyframes          slideOutUp {from {transform: translate3d(0,0,0); }         to {transform: translate3d(0,-100%,0);}}
@-webkit-keyframes  slideOutUp {from {-webkit-transform: translate3d(0,0,0);}  to {-webkit-transform: translate3d(0,-100%,0);}}
@-moz-keyframes     slideOutUp {from {-moz-transform: translate3d(0,0,0);}     to {-moz-transform: translate3d(0,-100%,0);}}
@-o-keyframes       slideOutUp {from {-o-transform: translate3d(0,0,0);}       to {-o-transform: translate3d(0,-100%,0);}}

.animateInUp {
    animation: slideInUp 0.5s;
    -webkit-animation: slideInUp 0.5s;
    -moz-animation: slideInUp 0.5s;
    -o-animation: slideInUp 0.5s;
    visibility:visible !important;
}

@keyframes          slideInUp {from {transform: translate3d(0,100%,0); }         to {transform: translate3d(0,0%,0);}}
@-webkit-keyframes  slideInUp {from {-webkit-transform: translate3d(0,100%,0);}  to {-webkit-transform: translate3d(0,0%,0);}}
@-moz-keyframes     slideInUp {from {-moz-transform: translate3d(0,100%,0);}     to {-moz-transform: translate3d(0,0%,0);}}
@-o-keyframes       slideInUp {from {-o-transform: translate3d(0, 100%,0);}       to {-o-transform: translate3d(0,0%,0);}}

.animateInLeft {
    animation: slideInLeft 0.3s;
    -webkit-animation: slideInLeft 0.3s;
    -moz-animation: slideInLeft 0.3s;
    -o-animation: slideInLeft 0.3s;
    visibility: visible !important;
    z-index:150;
}

@keyframes          slideInLeft {from {transform: translate3d(100%,0,0);}           to {transform: translate3d(0%,0,0);}}
@-webkit-keyframes  slideInLeft {from {-webkit-transform: translate3d(100%,0,0);}   to {-webkit-transform: translate3d(0%,0,0);}}
@-moz-keyframes     slideInLeft {from {-moz-transform: translate3d(100%,0,0);}      to {-moz-transform: translate3d(0%,0,0);}}
@-o-keyframes       slideInLeft {from {-o-transform: translate3d(100%,0,0);}        to {-o-transform: translate3d(0%,0,0);}}

.animateInRight {
    animation: slideInRight 0.3s;
    -webkit-animation: slideInRight 0.3s;
    -moz-animation: slideInRight 0.3s;
    -o-animation: slideInRight 0.3s;
    visibility: visible !important;
    z-index:150;
}

@keyframes          slideInRight {from {transform: translate3d(-100%,0,0);}           to {transform: translate3d(0%,0,0);}}
@-webkit-keyframes  slideInRight {from {-webkit-transform: translate3d(-100%,0,0);}   to {-webkit-transform: translate3d(0%,0,0);}}
@-moz-keyframes     slideInRight {from {-moz-transform: translate3d(-100%,0,0);}      to {-moz-transform: translate3d(0%,0,0);}}
@-o-keyframes       slideInRight {from {-o-transform: translate3d(-100%,0,0);}        to {-o-transform: translate3d(0%,0,0);}}

.hidePane2 {
    animation: pane2hide 0.2s;
    -webkit-animation: pane2hide 0.2s;
    -moz-animation: pane2hide 0.2s;
    -o-animation: pane2hide 0.2s;

    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@keyframes          pane2hide {from {transform: translate3d(0%,0,0); }           to {transform: translate3d(75%,0,0); }}
@-webkit-keyframes  pane2hide {from {-webkit-transform: translate3d(0%,0,0); }   to {-webkit-transform: translate3d(75%,0,0); }}
@-moz-keyframes     pane2hide {from {-moz-transform: translate3d(0%,0,0); }      to {-moz-transform: translate3d(75%,0,0); }}
@-o-keyframes       pane2hide {from {-o-transform: translate3d(0%,0,0); }        to {-o-transform: translate3d(75%,0,0); }}

.showPane2 {

    animation: pane2show 0.2s;
    -webkit-animation: pane2show 0.2s;
    -moz-animation: pane2show 0.2s;
    -o-animation: pane2show 0.2s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@keyframes          pane2show {from {transform: translate3d(75%,0,0); }           to {transform: translate3d(0%,0,0); }}
@-webkit-keyframes  pane2show {from {-webkit-transform: translate3d(75%,0,0); }   to {-webkit-transform: translate3d(0%,0,0); }}
@-moz-keyframes     pane2show {from {-moz-transform: translate3d(75%,0,0); }      to {-moz-transform: translate3d(0%,0,0); }}
@-o-keyframes       pane2show {from {-o-transform: translate3d(75%,0,0); }        to {-o-transform: translate3d(0%,0,0); }}

.showPane1 {
    animation: pane1show 0.2s;
    -webkit-animation: pane1show 0.2s;
    -moz-animation: pane1show 0.2s;
    -o-animation: pane1show 0.2s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@keyframes          pane1show {from { width: 0px; }           to { width: 75%; }}
@-webkit-keyframes  pane1show {from { width: 0px; }           to { width: 75%; }}
@-moz-keyframes     pane1show {from { width: 0px; }           to { width: 75%; }}
@-o-keyframes       pane1show {from { width: 0px; }           to { width: 75%; }}

.hidePane1 {
    animation: pane1hide 0.2s;
    -webkit-animation: pane1hide 0.2s;
    -moz-animation: pane1hide 0.2s;
    -o-animation: pane1hide 0.2s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@keyframes          pane1hide {from { width: 75%; }           to { width: 0px; }}
@-webkit-keyframes  pane1hide {from { width: 75%; }           to { width: 0px; }}
@-moz-keyframes     pane1hide {from { width: 75%; }           to { width: 0px; }}
@-o-keyframes       pane1hide {from { width: 75%; }           to { width: 0px; }}

.showMobileMenu {
    animation: mobilemenushow 0.1s;
    -webkit-animation: mobilemenushow 0.1s;
    -moz-animation: mobilemenushow 0.1s;
    -o-animation: mobilemenushow 0.1s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@keyframes          mobilemenushow {from {transform: translate3d(0,0,0); }           to {transform: translate3d(0,100%,0); }}
@-webkit-keyframes  mobilemenushow {from {-webkit-transform: translate3d(0,0,0); }   to {-webkit-transform: translate3d(0,100%,0); }}
@-moz-keyframes     mobilemenushow {from {-moz-transform: translate3d(0,0,0); }      to {-moz-transform: translate3d(0,100%,0); }}
@-o-keyframes       mobilemenushow {from {-o-transform: translate3d(0,0,0); }        to {-o-transform: translate3d(0,100%,0); }}

.lowerWebpartCanvas {
    animation: webpartcanvashide 0.1s;
    -webkit-animation: webpartcanvashide 0.1s;
    -moz-animation: webpartcanvashide 0.1s;
    -o-animation: webpartcanvashide 0.1s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@keyframes          webpartcanvashide {from { top:8%; }         to { top:16%; }}
@-webkit-keyframes  webpartcanvashide {from { top:8%; }         to { top:16%; }}
@-moz-keyframes     webpartcanvashide {from { top:8%; }         to { top:16%; }}
@-o-keyframes       webpartcanvashide {from { top:8%; }         to { top:16%; }}

.hideMobileMenu {
    animation: mobilemenuhide 0.1s;
    -webkit-animation: mobilemenuhide 0.1s;
    -moz-animation: mobilemenuhide 0.1s;
    -o-animation: mobilemenuhide 0.1s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@keyframes          mobilemenuhide {from {transform: translate3d(0,0,0); }           to {transform: translate3d(0,-8%,0); }}
@-webkit-keyframes  mobilemenuhide {from {-webkit-transform: translate3d(0,0,0); }   to {-webkit-transform: translate3d(0,-8%,0); }}
@-moz-keyframes     mobilemenuhide {from {-moz-transform: translate3d(0,0,0); }      to {-moz-transform: translate3d(0,-8%,0); }}
@-o-keyframes       mobilemenuhide {from {-o-transform: translate3d(0,0,0); }        to {-o-transform: translate3d(0,-8%,0); }}

.raiseWebpartCanvas {
    animation: webpartcanvasraise 0.1s;
    -webkit-animation: webpartcanvasraise 0.1s;
    -moz-animation: webpartcanvasraise 0.1s;
    -o-animation: webpartcanvasraise 0.1s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@keyframes          webpartcanvasraise {from { top:16%; }         to { top:8%; }}
@-webkit-keyframes  webpartcanvasraise {from { top:16%; }         to { top:8%; }}
@-moz-keyframes     webpartcanvasraise {from { top:16%; }         to { top:8%; }}
@-o-keyframes       webpartcanvasraise {from { top:16%; }         to { top:8%; }}

.showSettingsDropDown {
    animation: settingsShow 0.3s;
    -webkit-animation: settingsShow 0.3s;
    -moz-animation: settingsShow 0.3s;
    -o-animation: settingsShow 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    -ms-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    visibility: visible !important;
}

@keyframes          settingsShow {from {transform: translate3d(0,-100%,0); }           to {transform: translate3d(0,0%,0); }}
@-webkit-keyframes  settingsShow {from {-webkit-transform: translate3d(0,-100%,0); }   to {-webkit-transform: translate3d(0,0%,0); }}
@-moz-keyframes     settingsShow {from {-moz-transform: translate3d(0,-100%,0); }      to {-moz-transform: translate3d(0,0%,0); }}
@-o-keyframes       settingsShow {from {-o-transform: translate3d(0,-100%,0); }        to {-o-transform: translate3d(0,0%,0); }}

.hideSettingsDropDown {
    animation: settingsHide 0.3s;
    -webkit-animation: settingsHide 0.3s;
    -moz-animation: settingsHide 0.3s;
    -o-animation: settingsHide 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;

   visibility: visible !important;
}

@keyframes          settingsHide {from {transform: translate3d(0,0%,0); }           to {transform: translate3d(0,-200%,0); }}
@-webkit-keyframes  settingsHide {from {-webkit-transform: translate3d(0,0%,0); }   to {-webkit-transform: translate3d(0,-200%,0); }}
@-moz-keyframes     settingsHide {from {-moz-transform: translate3d(0,0%,0); }      to {-moz-transform: translate3d(0,-200%,0); }}
@-o-keyframes       settingsHide {from {-o-transform: translate3d(0,0%,0); }        to {-o-transform: translate3d(0,-200%,0); }}

.showWebpartOptions {
    animation: webpartSettingsShow 0.3s;
    -webkit-animation: webpartSettingsShow 0.3s;
    -moz-animation: webpartSettingsShow 0.3s;
    -o-animation: webpartSettingsShow 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;

   visibility: visible !important;
}

@keyframes          webpartSettingsShow {from {transform: translate3d(0,-100%,0); }           to {transform: translate3d(0,0%,0); }}
@-webkit-keyframes  webpartSettingsShow {from {-webkit-transform: translate3d(0,-100%,0); }   to {-webkit-transform: translate3d(0,0%,0); }}
@-moz-keyframes     webpartSettingsShow {from {-moz-transform: translate3d(0,-100%,0); }      to {-moz-transform: translate3d(0,0%,0); }}
@-o-keyframes       webpartSettingsShow {from {-o-transform: translate3d(0,-100%,0); }        to {-o-transform: translate3d(0,0%,0); }}

.hideWebpartOptions {
    animation: webpartSettingsHide 0.3s;
    -webkit-animation: webpartSettingsHide 0.3s;
    -moz-animation: webpartSettingsHide 0.3s;
    -o-animation: webpartSettingsHide 0.3s;
    
    /*Keep finished state when complete*/
    -webkit-animation-fill-mode:forwards;
   -moz-animation-fill-mode:forwards;
   -o-animation-fill-mode:forwards;
   -ms-animation-fill-mode:forwards;
   animation-fill-mode:forwards;
}

@keyframes          webpartSettingsHide {from {transform: translate3d(0,0%,0); visibility: visible; }           to {transform: translate3d(0,-100%,0);visibility: hidden; }}
@-webkit-keyframes  webpartSettingsHide {from {-webkit-transform: translate3d(0,0%,0); visibility: visible; }   to {-webkit-transform: translate3d(0,-100%,0); visibility: hidden; }}
@-moz-keyframes     webpartSettingsHide {from {-moz-transform: translate3d(0,0%,0); visibility: visible; }      to {-moz-transform: translate3d(0,-100%,0); visibility: hidden; }}
@-o-keyframes       webpartSettingsHide {from {-o-transform: translate3d(0,0%,0);visibility: visible; }        to {-o-transform: translate3d(0,-100%,0); visibility: hidden; }}