/*** SIDE NAV ***/
.side-navigation{position: fixed; left: 0; top: 50%; transform: translate(0, -50%); display: block; z-index: 11; font-size: 23px; /*background-color: #292929; border-color: #5f5f5f; border-style: solid; border-width: 1px 1px 1px 0; border-radius: 0 20px 20px 0; overflow: hidden; color: #fff;*/}
.side-navigation .menu-item{width: 70px; height: 70px; line-height: 70px; text-align: center; display: block; overflow: hidden; background-color: #040404; position: relative; border-color: #252525; border-style: solid; border-width: 1px 1px 1px 0; border-radius: 0; margin-top: -1px;}
.side-navigation .menu-item:first-of-type{border-radius: 0 20px 0 0;}
.side-navigation .menu-item:last-of-type{border-radius: 0 0 20px 0;}
.side-navigation .menu-item:hover{width: 170px; border-radius: 0 20px 20px 0;}
.side-navigation .menu-item:before{width: 0; opacity: 0; font-size: 14px; line-height: 1; font-weight: 500; text-transform: uppercase; color: #fff; text-align: left; position: absolute; right: 0; top: calc(50% + 1px); transform: translate(0, -50%);}
.side-navigation .menu-item:before{-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;-ms-transition: all 0.2s ease;transition: all 0.2s ease;}
.side-navigation .menu-item:hover:before{width: 100px; opacity: 1; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -ms-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s;}
.side-navigation .menu-item a{display: inline-block; width: 100%; max-width: 70px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; color: #fff; margin: 0; padding: 0;}
.side-navigation .menu-item a:hover{text-decoration: none; color: #00addf; transform: scale(1.2);}
.side-navigation .menu-item .side-menu-hamburger:hover .side-menu-hamburger-box{text-decoration: none; color: #00addf; transform: scale(1.2) translate(-50%, -50%);}
.side-navigation .menu-item i{display: block;}

.side-menu-hamburger{display: block; width: 100%; max-width: 70px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; color: #fff; margin: 0; padding: 0; cursor: pointer; transition-duration: 0.15s; transition-timing-function: linear; text-transform: none; background-color: transparent; border: 0; border-radius: 0;}
.side-menu-hamburger:hover{border: 0 none; outline: 0; background: transparent;}
.side-menu-hamburger.is-active:hover{}
.side-menu-hamburger.is-active .side-menu-hamburger-inner,
.side-menu-hamburger.is-active .side-menu-hamburger-inner::before,
.side-menu-hamburger.is-active .side-menu-hamburger-inner::after{background-color: #fff;}
.side-menu-hamburger:hover .side-menu-hamburger-inner,
.side-menu-hamburger:hover .side-menu-hamburger-inner::before,
.side-menu-hamburger:hover .side-menu-hamburger-inner::after{background-color: #00addf;}
.side-menu-hamburger-box{width: 22px; height: 22px; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.side-menu-hamburger-inner{display: block; top: 50%; margin-top: 0;}
.side-menu-hamburger-inner,
.side-menu-hamburger-inner::before,
.side-menu-hamburger-inner::after{width: 22px; height: 2px; background-color: #fff; border-radius: 0; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease;}
.side-menu-hamburger-inner::before,
.side-menu-hamburger-inner::after{content: ""; display: block;}
.side-menu-hamburger-inner::before{top: -6px;}
.side-menu-hamburger-inner::after{bottom: -6px;}

.side-menu-hamburger--squeeze .side-menu-hamburger-inner{transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);}
.side-menu-hamburger--squeeze .side-menu-hamburger-inner::before{transition: top 0.075s 0.12s ease, opacity 0.075s ease;}
.side-menu-hamburger--squeeze .side-menu-hamburger-inner::after{transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);}
.side-menu-hamburger--squeeze.is-active .side-menu-hamburger-inner{transform: rotate(-45deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);}
.side-menu-hamburger--squeeze.is-active .side-menu-hamburger-inner::before{top: 0; opacity: 0; transition: top 0.075s ease, opacity 0.075s 0.12s ease;}
.side-menu-hamburger--squeeze.is-active .side-menu-hamburger-inner::after{bottom: 0; transform: rotate(90deg); transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);}

@media (max-width: 1200px){
	.side-navigation .menu-item:hover{width: 70px; border-radius: 0;}
	.side-navigation .menu-item:hover:first-of-type{border-radius: 0 20px 0 0;}
	.side-navigation .menu-item:hover:last-of-type{border-radius: 0 0 20px 0;}
	.side-navigation .menu-item:hover:before{width: 0; opacity: 0; -webkit-transition-delay: unset; -moz-transition-delay: unset; -ms-transition-delay: unset; -o-transition-delay: unset; transition-delay: unset;}
	.side-navigation .menu-item.is-active{width: 170px; border-radius: 0 20px 20px 0;}
	.side-navigation .menu-item.is-active:first-of-type,
	.side-navigation .menu-item.is-active:last-of-type{border-radius: 0 20px 20px 0;}
	.side-navigation .menu-item.is-active:before{width: 100px; opacity: 1; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -ms-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s;}
	.side-menu-hamburger:hover .side-menu-hamburger-inner,
	.side-menu-hamburger:hover .side-menu-hamburger-inner::before,
	.side-menu-hamburger:hover .side-menu-hamburger-inner::after{background-color: #fff;}
	.side-navigation .menu-item.is-active .side-menu-hamburger:hover .side-menu-hamburger-inner,
	.side-navigation .menu-item.is-active .side-menu-hamburger:hover .side-menu-hamburger-inner::before,
	.side-navigation .menu-item.is-active .side-menu-hamburger:hover .side-menu-hamburger-inner::after{background-color: #00addf;}
}
@media (max-width: 900px){
	.side-menu-hamburger{max-width: unset;}
	.side-navigation{top: unset; bottom: 0; right: 0; transform: none;}
	.side-navigation .menu-item{width: 20%; margin: 0; border: 0 none; display: block; float: left;}
	.side-navigation .menu-item:first-of-type,
	.side-navigation .menu-item:last-of-type{border-radius: 0;}
	.side-navigation .menu-item.is-active,
	.side-navigation .menu-item:hover{width: 20%; border-radius: 0;}
	.side-navigation .menu-item:hover:first-of-type{border-radius: 0;}
	.side-navigation .menu-item:hover:last-of-type{border-radius: 0;}
	.side-navigation .menu-item:before{opacity: 1; left: 0; right: 0; bottom: 10px; font-size: 9px; font-weight: 300; width: 100%; text-align: center; line-height: 1; top: unset; transform: none;}
	.side-navigation .menu-item:hover:before{width: 100%; opacity: 1;}
	.side-navigation .menu-item a{max-width: unset;}
	.side-navigation .menu-item i{margin-top: -5px;}
	.side-navigation .menu-item .side-menu-hamburger .side-menu-hamburger-box{transform: translate(-50%, calc(-50% - 5px));}
	.side-navigation .menu-item a:hover{text-decoration: none; color: inherit; transform: none;}
	.side-navigation .menu-item .side-menu-hamburger:hover .side-menu-hamburger-box{text-decoration: none; color: inherit; transform: translate(-50%, calc(-50% - 5px));}
	.side-navigation .menu-item.is-active:before{width: 100%;}
}
/*** SIDE NAV ***/
