/*
Theme Name:     Jupiter Child Theme
Theme URI: 		http://themeforest.net/user/artbees
Description:    Child theme for the Jupiter theme 
Author:         Your name here
Theme URI: 		http://themeforest.net/user/artbees
Template:       jupiter
Version:        5.0.8.1
*/



.menu-lateral{
	position: fixed;
    top: 33%;
}



@-webkit-keyframes flip {
  0%{-webkit-transform:rotateY(0deg);
  opacity:1;}
  100%{-webkit-transform:rotateY(95deg);
  opacity:0;}
}

@-moz-keyframes flip {
  0%{-webkit-transform:rotateY(0deg);
  opacity:1;}
  100%{-webkit-transform:rotateY(95deg);
  opacity:0;}
}

@-o-keyframes flip {
  0%{-webkit-transform:rotateY(0deg);
  opacity:1;}
  100%{-webkit-transform:rotateY(95deg);
  opacity:0;}
}

@keyframes flip {
  0%{-webkit-transform:rotateY(0deg);
  opacity:1;}
  100%{-webkit-transform:rotateY(95deg);
  opacity:0;}
}



.menu-lateral ul {
  left:0;
  right:0;
  margin:50px auto;
  padding:0;
  
  width:200px;
  height:220px;
  list-style:none;
  -webkit-perspective:1000;
  -moz-perspective:1000;
  -o-perspective:1000;
  perspective:1000;
}

.menu-lateral li {
  margin:2px 0;
  padding:0;
}

.menu-lateral li a.icone-menu {
    pointer-events: none;
    display: block;
    height: 25px;
    width: 28px;
    background: rgba(155,155,155,0.5);
    color: #fff;
    padding: 10px 6px 3px 6px;
    text-decoration: none;
    text-align: center;
}
.menu-lateral .menu {
  opacity:1;
  -webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
  -o-transform:rotateY(0deg);
  transform:rotateY(0deg);
  -webkit-transition:.3s;
  -moz-transition:.3s;
  -o-transition:.3s;
  transition:.3s;
}

.menu-lateral li span {
  width:154px;
  float:left;
  text-align:center;
  background:rgba(155,155,155,0.5);
  color:#fff;
  margin: -38px 42px;
  padding:0;
  transform-origin:0%;
  opacity:0;
  -webkit-transform:rotateY(95deg);
  -webkit-transition:.5s;
  -moz-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
  -webkit-animation: flip 2s;
  -moz-animation: flip 2s;
  -o-animation: flip 2s;
  animation: flip 2s;
}

.menu-lateral li span a{
    display: block;
    padding: 7px 6px 8px 6px;
	color: #fff;
    background: #888888;
}

.menu-lateral li span a:hover{
    display: block;
    padding: 7px 6px 8px 6px;
	color: #fff;
    background: #1E73BE;
}

.menu-lateral  .mk-svg-icon{
	height: 18px !important;
    width: 18px !important;
    padding-bottom: 6px !important;
}

.menu-lateral span[class='menu']{-webkit-animation:none;}
.menu-lateral li:nth-child(2) span {
  -webkit-animation-delay:.5s;
  -moz-animation-delay:.5s;
  -o-animation-delay:.5s;
  animation-delay:.5s;}
.menu-lateral li:nth-child(3) span {
  -webkit-animation-delay:.4s;
  -moz-animation-delay:.4s;
  -o-animation-delay:.4s;
  animation-delay:.4s;}
.menu-lateral li:nth-child(4) span {
  -webkit-animation-delay:.3s;
  -moz-animation-delay:.3s;
  -o-animation-delay:.3s;
  animation-delay:.3s;}
.menu-lateral li:nth-child(5) span {
  -webkit-animation-delay:.2s;
  -moz-animation-delay:.2s;
  -o-animation-delay:.2s;
  animation-delay:.2s;}
.menu-lateral li:nth-child(6) span {
  -webkit-animation-delay:.1s;
  -moz-animation-delay:.1s;
  -o-animation-delay:.1s;
  animation-delay:.1s;}

.menu-lateral li:hover a ~ span, .menu-lateral li:focus a ~ span {
  opacity:1;
  -webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
  -o-transform:rotateY(0deg);
  transform:rotateY(0deg);
  -webkit-transition:.5s;
  -moz-transition:.5s;
  -o-transition:.5s;
  transition:.5s;
}

.menu-lateral li span a:hover, .menu-lateral li span a:focus {
  opacity:1;
  transform:none;
  overflow: visible;
}




/* MOBILE */

@media screen and (max-height: 479px) {
.menu-lateral{
    top: 15%;}
}