.top-left.horizontal {
left: 15%;
top: 20%;
}
.top-center.horizontal {
left: 50%;
top: 20%;
}
.top-right.horizontal {
right: -5%;
top: 20%;
}
.middle-left.horizontal {
left: 15%;
top: 50%;
}
.middle-center.horizontal {
left: 50%;
top: 50%;
}
.middle-right.horizontal {
right: -5%;
top: 50%;
}
.bottom-left.horizontal {
left: 15%;
bottom: 20px;
}
.bottom-center.horizontal {
left: 50%;
bottom: 20px;
}
.bottom-right.horizontal {
right: -5%;
bottom: 20px;
} .top-left.vertical {
left: 10%;
top: 20%;
}
.top-center.vertical {
left: 50%;
top: 20%;
}
.top-right.vertical {
right: 0%;
top: 20%;
}
.middle-left.vertical {
left: 10%;
top: 50%;
}
.middle-center.vertical {
left: 50%;
top: 50%;
}
.middle-right.vertical {
right: 15%;
top: 50%;
}
.bottom-left.vertical {
left: 10%;
bottom: 0;
}
.bottom-center.vertical {
left: 50%;
bottom: 0;
}
.bottom-right.vertical {
right: 0%;
bottom: 0;
} .ohn-v2.top-left.vertical {
left: 15px;
top: 20%;
}
.ohn-v2.top-center.vertical {
left: 50%;
top: 20%;
}
.ohn-v2.top-right.vertical {
right: 15px;
top: 20%;
}
.ohn-v2.middle-left.vertical {
left: 15px;
top: 50%;
}
.ohn-v2.middle-center.vertical {
left: 50%;
top: 50%;
}
.ohn-v2.middle-right.vertical {
right: 15px;
top: 50%;
}
.ohn-v2.bottom-left.vertical {
left: 15px;
bottom: 0;
}
.ohn-v2.bottom-center.vertical {
left: 50%;
bottom: 0;
}
.ohn-v2.bottom-right.vertical {
right: 15px;
bottom: 0;
} .ohn-v3.top-left.vertical {
left: 0;
top: 20%;
}
.ohn-v3.top-center.vertical {
left: 50%;
top: 20%;
}
.ohn-v3.top-right.vertical {
right: 0;
top: 20%;
}
.ohn-v3.middle-left.vertical {
left: 0;
top: 40%;
}
.ohn-v3.middle-center.vertical {
left: 50%;
top: 40%;
}
.ohn-v3.middle-right.vertical {
right: 0;
top: 40%;
}
.ohn-v3.bottom-left.vertical {
left: 0;
bottom: 0;
}
.ohn-v3.bottom-center.vertical {
left: 50%;
bottom: 0;
}
.ohn-v3.bottom-right.vertical {
right: 0;
bottom: 0;
} .ohn-v4.top-left.vertical {
left: 0;
top: 20%;
}
.ohn-v4.top-center.vertical {
left: 50%;
top: 20%;
}
.ohn-v4.top-right.vertical {
right: 0;
top: 20%;
}
.ohn-v4.middle-left.vertical {
left: 0;
top: 40%;
}
.ohn-v4.middle-center.vertical {
left: 50%;
top: 40%;
}
.ohn-v4.middle-right.vertical {
right: 0;
top: 40%;
}
.ohn-v4.bottom-left.vertical {
left: 0;
bottom: 0;
}
.ohn-v4.bottom-center.vertical {
left: 50%;
bottom: 0;
}
.ohn-v4.bottom-right.vertical {
right: 0;
bottom: 0;
} .ohn-side-menu.ohn-v1 {
position: fixed;
background-color: #ffffffe3;
backdrop-filter: blur(10px);
transform: translate(-50%, -50%);
box-shadow: 0 0 15px rgba(0,0,0,.15);
z-index: 200;
border-radius: 2.5px;
padding: 5px;
}
.ohn-side-menu.ohn-v1 ul {
list-style: none !important;
padding: 0 !important;
margin-bottom: 0 !important;
}
.ohn-side-menu.ohn-v1 ul.ohn-horizontal {
display: flex;
justify-content: space-between;
}
.ohn-side-menu.ohn-v1 ul li {
border-radius: 2.5px;
transition: all 350ms;
}
.ohn-side-menu.ohn-v1 ul li a {
display: flex;
align-items: center;
flex-direction: column;
align-items: center;
height: fit-content;
justify-content: center;
text-decoration: none;
color: #000;
white-space: nowrap;
padding: 3.75px 7.5px;
}
.ohn-side-menu.ohn-v1 ul li a svg,
.ohn-side-menu.ohn-v1 ul li a i {
height: 20px !important;
margin-bottom: 5px;
}
.ohn-icons-mobile li a svg, 
.ohn-icons-mobile li a i {
display: none;
}
.ohn-icons-none li a svg,
.ohn-icons-none li a i {
display: none;
} .ohn-side-menu.ohn-v2,
.ohn-side-menu.ohn-v3 {
position: fixed;
background-color: transparent;
z-index: 1031;
border-radius: 5px;
padding: 10px;
}
.ohn-side-menu.ohn-v2 ul,
.ohn-side-menu.ohn-v3 ul {
list-style: none !important;
padding: 0 !important;
margin-bottom: 0 !important;
}
.ohn-side-menu.ohn-v2 ul li {
margin-bottom: 10px;
}
.ohn-side-menu.ohn-v2 ul li a {
text-decoration: none;
padding: 0 10px;
display: flex;
justify-content: flex-end;
align-items: center;
transition: all 350ms;
}
.ohn-side-menu.ohn-v2 ul li a:after {
content: "";
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid;
-webkit-transition: .2s;
transition: .2s;
margin-left: 10px;
}
.ohn-side-menu.ohn-v2 ul li a span {
transition: .2s;
visibility: hidden;
opacity: 0;
transform: translate3d(30px, 0, 0);
}
.ohn-side-menu.ohn-v2 ul li.active a span,
.ohn-side-menu.ohn-v2 ul li:hover a span {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
} .ohn-side-menu.ohn-v3 {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 15px rgba(0,0,0,.15);
}
.ohn-side-menu.ohn-v3 ul li a {
display: flex;
align-items: center;
position: relative;
}
.ohn-side-menu.ohn-v3 ul li a span {
position: absolute;
left: 0;
visibility: hidden;
opacity: 0;
white-space: nowrap;
padding: 2px 15px;
border-radius: 30px;
background-color: #fff;
box-shadow: 0 0 15px rgba(0,0,0,.15);
transition: all 350ms;
}
.ohn-side-menu.ohn-v3 ul li a:hover span {
left: 50px;
visibility: visible;
opacity: 1;
}
.ohn-side-menu.ohn-v3 ul li a svg {
height: 34px;
padding: 10px;
border-radius: 5px;
transition: all 350ms;
background-color: #fff;
margin-bottom: 10px;
}
.ohn-side-menu.ohn-v3.bottom-right.vertical ul li a span,
.ohn-side-menu.ohn-v3.middle-right.vertical ul li a span,
.ohn-side-menu.ohn-v3.top-right.vertical ul li a span {
transform: translateX(0%);
}
.ohn-side-menu.ohn-v3.bottom-right.vertical ul li a:hover span,
.ohn-side-menu.ohn-v3.middle-right.vertical ul li a:hover span,
.ohn-side-menu.ohn-v3.top-right.vertical ul li a:hover span {
transform: translateX(-130px);
visibility: visible;
opacity: 1;
} .ohn-side-menu.ohn-v4 {
position: fixed;
background-color: transparent;
display: flex;
z-index: 200;
border-radius: 2.5px;
}
.ohn-side-menu.ohn-v4 ul {
padding: 15px 0;
list-style: none;
background-color: #fff;
border-radius: 6px 0 0 6px;
box-shadow: 0 0 15px rgba(0,0,0,.15);
}
.ohn-side-menu.ohn-v4 ul li {
margin-bottom: 14px;
}
.ohn-side-menu.ohn-v4 ul li:last-child {
margin-bottom: 0;
}
.ohn-side-menu.ohn-v4 ul li a{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 10px;
text-decoration: none;
border-left: 3px solid transparent;
transition: all 350ms;
}
.ohn-side-menu.ohn-v4 ul li a svg {
height: 17px;
margin-bottom: 3px;
transition: all 350ms;
}
.ohn-side-menu.ohn-v4 ul li.active a svg,
.ohn-side-menu.ohn-v4 ul li:hover a svg {
opacity: .5;
}
@media only screen and (max-width: 600px) {
.ohn-side-menu.ohn-v1 {
transform: translate(0);
padding: 0;
border-radius: 0;
top: initial !important
}
.ohn-side-menu.ohn-v1 ul.ohn-horizontal {
width: 100%;
justify-content: center;
}
.ohn-side-menu.ohn-v1 ul.ohn-vertical {
display: flex;
}
.ohn-side-menu.ohn-v1 {
width: 100%;
overflow: hidden; 
background-color: #fff;
white-space: nowrap;
left: 0;
bottom: 0;
}
.ohn-side-menu.ohn-v4 {
transform: translate(0);
display: flex;
justify-content: center;
bottom: 0;
left: 0;
top: initial;
right: 0;
}
.ohn-side-menu.ohn-v3 {
top: 40% !important;
left: 0 !important;
right: initial !important;
bottom: initial !important;
}
.ohn-side-menu.ohn-v1 ul li {
width: 18%;
border-radius: 0;
}
.ohn-side-menu.ohn-v1 ul li a {
font-size: 8px;
padding: 5px 5px 3px 5px;   
} 
.ohn-side-menu.ohn-v2 {
right: 5px !important;
top: 35% !important;
}
.ohn-icons-desktop li a svg,
.ohn-icons-desktop li a i {
display: none;
}
.ohn-icons-mobile li a svg,
.ohn-icons-desktop li a i {
display: flex;
}
.ohn-side-menu.ohn-v4 {
top: 40% !important;
bottom: initial !important;
justify-content: left;
}
}@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}.fadeInLeft{animation-name:fadeInLeft}