/* ACTION BAR */
.action-bar {display: flex; flex-direction: column;
	position: fixed; right: 0; top: 20vh; width: 74px; padding: 10px 0 0 0;
	z-index: 627; text-align: center;
	-webkit-border-radius: 1em 0 0 1em; border-radius: 1em 0 0 1em;
}
.action-bar>a{-webkit-border-radius: 50%; border-radius: 50%;
	border: 2px solid #ffff00; width: 60px; height: 60px; margin: 0 auto 10px auto;
	text-align: center; background: #151e3d;
}
.action-bar>a:hover {background: #0f52ba;}

/* NEW MS-NAV */
.ms-nav-container {
	position: relative;	width: 100%; height: 100vh;
}
#ms-menu {display: none;}
.bg-change {
	position: absolute; bottom: -75px;
	right: -90px; width: 1px; height: 1px;
	border-radius: 100% 0% 0% 0%;
	/*background: #2D394D;*/
	transition: all .25s ease;
}
.ms-nav .ms-menu-toggle:checked ~ .bg-change {
	width: 3000px; height: 3000px;
	transition: all .5s ease;
}
.ms-nav {
	position: absolute; bottom: 65px; right: 30px; margin: 0; padding: 0; list-style: none;
}
.ms-nav > .ms-main {position: relative;}
.ms-nav > .ms-main a label img, .ms-nav > .ms-li a img {width: 100%; height: 100%; object-fit:cover; border: 3px solid #151e3d;}
.ms-nav > .ms-li a:hover img {border: 3px solid #fff;}
.ms-nav > .ms-li {
	position: absolute; bottom: 0; right: 8px;
	transition: bottom .5s ease; z-index: 1; 
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li a {
	box-shadow: 0px 5px 10px #333333; outline: none !important;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li1 {
	bottom: 120%; transition: bottom .5s ease;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li1 a span {
	opacity: 1; transition: opacity .5s ease .1s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-main:after {
	animation: big-border-bottom-animation .5s ease .1s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li1:before {
	animation: border-top-animation .5s ease .2s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li1:after {
	animation: border-bottom-animation .5s ease .2s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li2 {
	bottom: 225%; transition: bottom .6s ease;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li2 a span {
	opacity: 1; transition: opacity .6s ease .2s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li2:before {
	animation: border-top-animation .5s ease .2s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li2:after {
	animation: border-bottom-animation .5s ease .3s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li3 {
	bottom: 330%; transition: bottom .7s ease;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li3 a span {
	opacity: 1; transition: opacity .7s ease .3s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li3:before {
	animation: border-top-animation .5s ease .3s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li3:after {
	animation: border-bottom-animation .5s ease .4s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li4 {
	bottom: 435%; transition: bottom .8s ease;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li4 a span {
	opacity: 1; transition: opacity .8s ease .4s;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li4:before {
	animation: border-top-animation .5s ease .4s;
}
.ms-nav .ms-menu-toggle ~ .ms-li:before {
	content: ''; width: 45px; display: block;
	position: absolute;
	bottom: -5px; left: 0;
	right: 0; margin: auto;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 0px solid #151e3d;
}
.ms-nav .ms-menu-toggle ~ .ms-li:before {
	content: ''; width: 45px;
	display: block; position: absolute;
	bottom: -5px; left: 0; right: 0; margin: auto;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 0px solid #151e3d;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li:before {
	content: ''; width: 45px;
	display: block; position: absolute;
	bottom: 0px; left: 0;
	right: 0; margin: auto;
	border-left: 24px solid transparent;
	border-right: 24px solid transparent;
	border-top: 25px solid #151e3d;
	z-index: 11;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li:after {
	content: ''; width: 45px;
	display: block; position: absolute;
	top: 0px; left: 0; right: 0; margin: auto;
	border-left: 24px solid transparent;
	border-right: 24px solid transparent;
	border-bottom: 25px solid #151e3d;
	transition: border-bottom .3s ease;
	z-index: 11;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-main:after {
	content: ''; width: 60px; display: block;
	position: absolute; top: 0px; left: 0;
	right: 0; margin: auto;
	border-left: 24px solid transparent;
	border-right: 24px solid transparent;
	border-bottom: 45px solid #151e3d;
	transition: border-bottom .3s ease; z-index: 11;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li-last:after {
	content: ''; width: 45px;
	display: block; position: absolute;
	top: -5px; left: 0; right: 0; margin: auto;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-bottom: 0px solid #151e3d;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-main span,
.ms-nav .ms-menu-toggle:checked ~ .ms-main img {
	transform: rotate(-45deg); transition: transform .35s ease;
}
.ms-nav .ms-menu-toggle ~ .ms-main span,
.ms-nav .ms-menu-toggle ~ .ms-main img {
	transition: transform .35s ease; opacity: 1;
	-webkit-border-radius: 50%; border-radius: 50%;
}
.ms-nav > .ms-main > a {box-shadow: 0px 5px 10px #333333;}
.ms-nav > li a {
	font-size: 30px; color: #FFFFFF;
	background: #151e3d;
	width: 60px; height: 60px;
	display: block; border-radius: 100%;
	position: relative; text-align: center;
}
.ms-nav > .ms-main a,
.ms-nav > .ms-main > a > label {
	font-size: 30px; color: #FFFFFF;
	background: #151e3d;
	width: 75px; height: 75px; display: block;
	border-radius: 100%; position: relative;
	text-align: center; z-index: 19;
}
.ms-nav > li > a span {
	position: absolute; top: 0; left: 0;
	right: 0; bottom: 0; margin: auto;
	height: 65px; width: 65px;
	opacity: 0; z-index: 12; cursor: pointer;
}
.ms-nav > .ms-li a { background-size: cover; background-position: center center;
	background-repeat: no-repeat;
}
@keyframes border-top-animation {
  0% { bottom: 0px;}
  50% { bottom: -14px;}
  100% { bottom: 0px;}
}
@keyframes border-bottom-animation {
  0% {top: 0px;}
  50% {top: -13px;}
  100% {top: 0px;}
}
@keyframes big-border-bottom-animation {
  0% {top: 0px;}
  50% {top: -30px;}
  100% {top: 0px; }
}