*, *:before, *:after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
.top-menu {
    /*width: calc(100% - 150px);*/
    position: relative;
    height: 100px;
    right: 0;
    overflow: hidden;
}
.top-menu{
	display: block;
}
@media (max-width:1080px){
.top-menu{
	display: none;
}
}
/* MAIN VARIABLES FOR CUSTOMIZATION */
/* -------------------------------- */
 .nav {
   overflow: hidden;
   position: absolute;
   left: 50%;
   top: 50%;
   width: auto;
   height: 90px;
   margin-top: -45px;
   transform: translate3d(-50%, 0, 0);

}
 .nav__cb {
   z-index: -1000;
   position: absolute;
   left: 0;
   top: 0;
   opacity: 0;
   pointer-events: none;
}
 .nav__content {
   position: relative;
   width: 120px;
   height: 100%;
   transition: width 1s cubic-bezier(0.49, -0.3, 0.68, 1.23);
}
.top-menu::before, .top-menu::after{
    content: '';
    background-image: url(/local/templates/ugmk-it-tech/images/skobka.svg);
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 0;
    width: 28px;
    height: 100%;
}
.top-menu::before {
    float: left;
    left: 0;
}
.top-menu::after {
    float: right;
    transform: scaleX(-1);
    right: 0;
}
 .nav__cb:checked ~ .nav__content {
   transition: width 1s cubic-bezier(0.48, 0.43, 0.29, 1.3);
   width: 660px;
   margin: 0 80px 0 40px;
}
 .nav__items {
   position: relative;
   width: 660px;
   height: 100%;
   padding: 0;
   list-style-type: none;
   font-size: 0;
}
 .nav__item {
   display: inline-block;
   width: max-content;
   text-align: center;
   perspective: 1000px;
   transition: color 0.3s;
   cursor: pointer;
}
 .nav__item:hover {
   color: #13454b;
}
.nav__item{
    padding: 0;
    margin: 0;
}
.nav__item span a{
   color: #13454b;
   font-size: 14px;
   line-height: 20px;
   font-weight: 400;
   font-family: 'Manrope';
   text-decoration: none;
   text-transform: lowercase;
   padding: 0 7px;
}
 .nav__item-text {
   display: flex;
   align-items: center;;
   height: 100%;
   transform: rotateY(-70deg);
   opacity: 0;
   transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.7s;
}
 .nav__cb:checked ~ .nav__content .nav__item-text {
   transform: rotateY(0);
   opacity: 1;
   transition: transform 0.7s cubic-bezier(0.48, 0.43, 0.7, 2.5), opacity 0.2s;
}
 .nav__item:nth-child(1) .nav__item-text {
   transition-delay: 0.3s;
}
 .nav__cb:checked ~ .nav__content .nav__item:nth-child(1) .nav__item-text {
   transition-delay: 0s;
}
 .nav__item:nth-child(2) .nav__item-text {
   transition-delay: 0.2s;
}
 .nav__cb:checked ~ .nav__content .nav__item:nth-child(2) .nav__item-text {
   transition-delay: 0.1s;
}
 .nav__item:nth-child(3) .nav__item-text {
   transition-delay: 0.1s;
}
 .nav__cb:checked ~ .nav__content .nav__item:nth-child(3) .nav__item-text {
   transition-delay: 0.2s;
}
 .nav__item:nth-child(4) .nav__item-text {
   transition-delay: 0s;
}
 .nav__cb:checked ~ .nav__content .nav__item:nth-child(4) .nav__item-text {
   transition-delay: 0.3s;
}
 .nav__btn {
   position: absolute;
   right: 0;
   top: 0;
   width: 120px;
   height: 90px;
   padding: 40px 46px 32px;
   cursor: pointer;
}
 .nav__btn:before, .nav__btn:after {
   content: "";
   display: block;
   width: 28px;
   height: 4px;
   border-radius: 2px;
   background: #13454b;
   transform-origin: 50% 50%;
   transition: transform 1s cubic-bezier(0.48, 0.43, 0.29, 1.3), background-color 0.3s;
}
 .nav__btn:before {
   margin-bottom: 10px;
}
 .nav__btn:hover:before, .nav__btn:hover:after {
   background: #13454b;
}
 .nav__cb:checked ~ .nav__btn:before {
   transform: translateY(7px) rotate(-225deg);
}
 .nav__cb:checked ~ .nav__btn:after {
   transform: translateY(-7px) rotate(225deg);
}