#top #user-menu {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 35px 15px;
    margin-right: 10px;
    position: relative;
    user-select: none;
   
}
#user-menu .usericon {
    width:30px;
    position:absolute;
    top:22px;
    right:12px;
}
#user-menu .usericon .fa {
    font-size:26px;
}


#top #usr {
    display:none;
}
#menu .main-menu, #menu #user-menu-content {
    display: none;
}



#usr:checked ~ #menu #user-menu-content {
  display: block;
}

#top #user-menu .usericon:before,
#top #user-menu .usericon:after {
  background: #333;
  content: '';
  display: none;
  height: 3px;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
  border-radius: 3px;
}

#top #user-menu .usericon:before {
  top: 13px;
}

#top #user-menu .usericon:after {
  top: 13px;
}
#top #usr:checked ~ #user-menu .usericon:before {
  transform: rotate(-45deg);
  display: block;
}

#top #usr:checked ~ #user-menu .usericon:after {
  transform: rotate(45deg);
  display: block;
}
#top #usr:checked ~ #user-menu .fa,
#top #usr:checked ~ #user-menu img.user,
#top #usr:checked ~ #user-menu img.user-logged {
    display:none;
}


#user-menu-content {
    padding-top:10px;
    padding-bottom:80px;
    box-sizing: border-box;
    text-align: center;    
}
#user-menu-content .menu-btn {
    background: #FFF;
    color: #000;
    box-shadow: 0 0 10px #999;
    width: 84vw;
    margin: 10px 0;
    padding: 15px;
    text-transform: uppercase;
    border:none;
}

#user-menu-content .menu-block {
    text-decoration: none;
    display: inline-block;
    margin: 2vw;
    width: 40vw;
    height: 40vw;
    position: relative;
    box-shadow: 0 0 10px #999;
    box-sizing:border-box;
    background:#FFF;
    border:none;
}
#user-menu-content .menu-block.empty-menu-block {
    box-shadow:none;
    background:none;
}
#user-menu-content .menu-block figure {
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
}
#user-menu-content .menu-block figure img {
    height: 18vw;
    padding: 3vw 0;
}
#user-menu-content .menu-block span {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    color: #FFF;
    background: #2C2E83;
    text-align: center;
    text-transform: uppercase;
    padding: 7px;
    box-sizing: border-box;
}
#user-menu-content .menu-block em {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 0px;
    width: 18px;
    height: 18px;
    font-size: 14px;
    line-height: 20px;
    font-style: normal;
    background: red;
    color: #FFF;
    text-align: center;
    border-radius: 50%;
    box-sizing: border-box;
}

.no-scroll {
    overflow:hidden !important;
}


@media only screen and (min-width: 1050px) {
    #menu .main-menu {
        display: block;
        margin-right:15px;
    }
}

@media only screen and (min-width: 1051px) {
    
    #user-menu-content {
        padding-bottom:20px;
    }

    #menu {
        position:relative;
        z-index:9;
    }
    
    #user-menu .usericon {
        top:30px;
        right:0px;
    }
    #usr:checked ~ #menu #user-menu-content {
        position:absolute;
        z-index:2;
        top:95px;
        max-width:980px;
        background:rgba(255,255,255,0.8);
        right:0px;
        box-sizing:border-box;
        box-shadow:0 10px 10px #999;
    }
    body.mano-gmm #usr:checked ~ #menu #user-menu-content {
        background:rgb(255,255,255);
    }
    #user-menu-content .menu-btn {
        width:400px;
        margin:20px;
    }
    #user-menu-content .menu-block {
        margin: 10px;
        width: 200px;
        height: 200px;
        box-sizing: border-box;
        border: none;
    }
    #user-menu-content .menu-block:hover {
        border: none;
    }
    #user-menu-content .menu-block figure img {
        height: 120px;
        padding: 25px 0;        
    }

}