/* HEAD LEARNING PROCESS */ .header-content{ min-height: 60px; width: 100%; text-align: center; display: flex; position: fixed; z-index: 100; background: var(--color-default-bg); } .head-container{ width: 100%; position: relative; max-width: 1170px; margin: auto; padding-left: 15px; padding-right: 15px; } .body-container{ padding-top: 60px; } .head-container .left-head{ background: url('../img/icon-bg-reading.svg') 0px -510px; width: 21px; height: 20px; position: absolute; top: 50%; transform: translate(0, -50%); cursor: pointer; } .head-container .middle-head{ background: url('../img/icon.png') -81px 0px; width: 81px; height: 36px; margin: auto; cursor: pointer; } .head-container .right-head .header-container-library-account-no-image{ width: 35px; height: 35px; line-height: 32px; border-radius: 50%; } .head-container .right-head .header-container-library-account img{ width: 35px; height: 35px; border-radius: 50%; } .head-container .middle-head a{ display: inline-block; width: 100%; height: 100%; } .head-container .left-head a{ font-family: opensansregular; font-size: 14px; color: #ffffff; text-decoration: none; text-transform: uppercase; position: absolute; display: block; width: 250px; left: 0px; top: 50%; transform: translate(0, -50%); text-align: left; padding-left: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .head-container .right-head{ position: absolute; right: 15px; top: 50%; transform: translate(0, -50%); cursor: pointer; } .head-container .right-head .menu-avatar-container.dropdown-menu{ top: 45px; } .head-container .fa-chevron-down{ font-size: 15px; } .head-container .right-head .menu-avatar-container.dropdown-menu .menu-avatar-container-arrow{ top: -7px; right: 42px; } /* End HEAD LEARNING PROCESS */ @media (max-width: 767px) { .head-container .left-head a{ opacity: 0; } }