::-webkit-scrollbar-track { background-color: #ededed; } ::-webkit-scrollbar-thumb { background-color: #b2b2b2; } ::-webkit-scrollbar-thumb { width: 10px; height: 10px; } ::-webkit-scrollbar { width: 10px; height: 8px; } /* ----------------------- Menu Arrows START ----------------------------- */ #header .navy-main-container-wrap > ul > li.menu-item-has-children > a > svg, #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a > svg, #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a > svg{ display: none; } #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a:after, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a:after, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a:before, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a:before, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:before, #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li.menu-item-has-children > a:before, #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:before{ content: ''; display: block; -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='11' height='12' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 11 12' xml:space='preserve' fill='%23ffffff'%3E%3Cpath d='M11,6L0,12V0L11,6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg width='11' height='12' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 11 12' xml:space='preserve' fill='%23ffffff'%3E%3Cpath d='M11,6L0,12V0L11,6z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; } #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a:after, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a:after, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a:before, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a:before, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:before{ width: 10px; height: 12px; -webkit-mask-size: 10px 12px; mask-size: 10px 12px; -webkit-transform: rotate(90deg) translateX(-1px); transform: rotate(90deg) translateX(-1px); } #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a:after{ margin-left: 5px; } #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a:after{ margin-left: auto; } #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:before, #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:before{ position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 11px; height: 12px; -webkit-mask-size: 11px 12px; mask-size: 11px 12px; } #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a:after, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a:after, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a:before, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a:before, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:before{ -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; background-color: #ffffff; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li.menu-item-has-children > a:before{ background: rgba(25, 34, 76, 0.5); } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li.menu-item-has-children > a:before{ right: 18px; } #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a.active:after, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a:hover:after, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a.active:after, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a:hover:after, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a.active:before, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a:hover:before, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a.active:before, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a:hover:before{ background-color: #a9d8fc; } #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a.active:after, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a.active:after, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a.active:before, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a.active:before{ -webkit-transform: rotate(90deg) scale(-1) translateX(1px); transform: rotate(90deg) scale(-1) translateX(1px); } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li.menu-item-has-children > a.hover:before, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a:hover:after, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a:hover:before{ background-color: #ffffff; } #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:after, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:before, #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:before{ background-color: rgba(25, 34, 76, 0.5); } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:before{ right: 18px; } #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a.hover:after, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a.hover:before, #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a.hover:before{ background-color: #C6A7F3; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a.hover:before{ background-color: #ffffff; } @media screen and (min-width: 768px) and (max-width: 959px){ #header .navy-main-container-wrap > ul > li.main-dropdown-menu > .sub-menu > li.menu-item-has-children > .sub-menu > li.menu-item-has-children > a.hover:after, #header .navy-main-container-wrap > ul > li.main-dropdown-menu > .sub-menu > li.menu-item-has-children > .sub-menu > li.menu-item-has-children > a.hover:before, #header .navy-main-container-wrap > ul > li.main-dropdown-menu > .sub-menu > li.menu-item-has-children > a.hover:after, #header .navy-main-container-wrap > ul > li.main-dropdown-menu > .sub-menu > li.menu-item-has-children > a.hover:before{ -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } } @media screen and (max-width: 991px){ #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu) a:after{ display: none!important; } .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a, .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a{ position: relative; } #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:before{ -webkit-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a:before, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:before, #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:before, #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:before { width: 10px; height: 12px; -webkit-mask-size: 10px 12px; mask-size: 10px 12px; -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:before, #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:before{ right: 16px; } #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:before { background-color: rgba(25, 34, 76, 0.5); } #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a:hover:before, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a.active:before, #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:hover:before, #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a.active:before, #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:hover:before, #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a.active:before { background-color: #ffffff; } #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a.active:before, #header .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a.active:before, #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a.active:before, #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a.active:before{ -webkit-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); } } /* ----------------------- Menu Arrows END ----------------------------- */ /* ----------------------- Menu START ----------------------------- */ .navy-main-container-wrap { position: relative; } .navy-main-container-wrap .hide-bt-navy { height: 40px; background-color: #1d3e7c; } .navy-main-container-wrap .hide-bt-navy svg { display: block; fill: #6bc8f8; width: 11px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .navy-main-container-wrap > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .navy-main-container-wrap > ul > li { margin-right: 31px; } .navy-main-container-wrap > ul > li:not(.main-dropdown-menu).menu-item-has-children{ position: relative; } .navy-main-container-wrap > ul > li:last-child { margin-right: 0; } .navy-main-container-wrap > ul > li > a { display: table; font-weight: var(--fw5); font-size: 14px; line-height: 1.8; color: var(--c1); -webkit-transition: color .15s ease; transition: color .15s ease; } .navy-main-container-wrap > ul > li.current-menu-item > a, .navy-main-container-wrap > ul > li> a.active, .navy-main-container-wrap > ul > li > a:hover { color: #9C70F3; } .navy-main-container-wrap > ul > li > a > svg{ display: none; } .navy-main-container-wrap > ul > li > a > svg { display: block; width: 11px; fill: #19224C; margin-left: 5px; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transition: fill .3s ease, -webkit-transform .3s ease; transition: fill .3s ease, -webkit-transform .3s ease; transition: transform .3s ease, fill .3s ease; transition: transform .3s ease, fill .3s ease, -webkit-transform .3s ease; } .navy-main-container-wrap > ul > li > a.active > svg { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .navy-main-container-wrap > ul > li.current-menu-item > a, .navy-main-container-wrap > ul > li > a.active > svg, .navy-main-container-wrap > ul > li > a:hover > svg { fill: #9C70F3; } /* first-menu-in second-menu-ul third-menu-ul */ .navy-main-container-wrap > ul > li.first-menu-in > a + ul::-webkit-scrollbar-track /*.navy-main-container-wrap > ul > li > a + ul::-webkit-scrollbar-track*/ { background-color: #ffffff; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul::-webkit-scrollbar-thumb /*.navy-main-container-wrap > ul > li > a + ul::-webkit-scrollbar-thumb*/ { background-color: #825DCA; width: 3px; height: 0; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul::-webkit-scrollbar /*.navy-main-container-wrap > ul > li > a + ul::-webkit-scrollbar*/ { width: 3px; height: 0; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul /*.navy-main-container-wrap > ul > li > a + ul*/ { display: none; position: absolute; top: 33px; left: 0; width: 320px; z-index: 10; -webkit-box-shadow: 0px 1px 3px rgb(0 0 0 / 20%); box-shadow: 0px 1px 3px rgb(0 0 0 / 20%); -webkit-transition: top .3s ease; transition: top .3s ease; -webkit-overflow-scrolling: touch; } header.ws-fixed .navy-main-container-wrap > ul > li.first-menu-in > a + ul /*header.ws-fixed .navy-main-container-wrap > ul > li > a + ul*/{ top: 28px; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a /*.navy-main-container-wrap > ul > li > a + ul > li > a*/ { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 40px; padding: 0 15px; font-size: 14px; font-weight: 700; line-height: 1.4; color: #fff; text-transform: uppercase; cursor: pointer; background-color: #0c7bce; border-top: 1px solid #0968a8; -webkit-transition: color .3s ease, background-color .3s ease; transition: color .3s ease, background-color .3s ease; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a:hover, .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a.active /*.navy-main-container-wrap > ul > li > a + ul > li > a:hover, .navy-main-container-wrap > ul > li > a + ul > li > a.active*/ { color: #6bc8f8; background-color: #1d3e7c; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a > i { padding-right: 11px; -ms-flex-negative: 0; flex-shrink: 0; font-size: 16px; -webkit-transform: translateY(-1px); transform: translateY(-1px); } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a > svg /*.navy-main-container-wrap > ul > li > a + ul > li > a > svg*/ { display: block; width: 11px; fill: #fff; margin-left: 5px; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transition: fill .3s ease, -webkit-transform .3s ease; transition: fill .3s ease, -webkit-transform .3s ease; transition: transform .3s ease, fill .3s ease; transition: transform .3s ease, fill .3s ease, -webkit-transform .3s ease; margin-left: auto } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a:hover > svg, .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a.active > svg /*.navy-main-container-wrap > ul > li > a + ul > li > a:hover > svg, .navy-main-container-wrap > ul > li > a + ul > li > a.active > svg*/ { fill: #6bc8f8; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a.active > svg /*.navy-main-container-wrap > ul > li > a + ul > li > a.active > svg*/ { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a > span{ -webkit-transform: translateY(2px); transform: translateY(2px); } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul /*.navy-main-container-wrap > ul > li > a + ul > li > a + ul*/ { display: none; width: 100%; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); -webkit-transition: top .3s ease; transition: top .3s ease; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.third-menu-in > a, .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a /*.navy-main-container-wrap > ul > li > a + ul > li > a + ul > li > a*/ { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; cursor: pointer; height: 40px; border-top: 1px solid #f8f8f8; background-color: #e8f2f9; padding: 0 10px 0 25px; font-size: 14px; font-weight: 500; line-height: 1.4; color: #064687; -webkit-transition: color .3s ease, background-color .3s ease; transition: color .3s ease, background-color .3s ease; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.third-menu-in > a:hover, .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.third-menu-in > a.active, .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a:hover, .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a.active /*.navy-main-container-wrap > ul > li > a + ul > li > a + ul > li > a:hover, .navy-main-container-wrap > ul > li > a + ul > li > a + ul > li > a.active*/ { color: #6bc8f8; background-color: #1d3e7c; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.third-menu-in > a > i, .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a > i /*.navy-main-container-wrap > ul > li > a + ul > li > a + ul > li > a > i*/ { padding-right: 11px; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transform: translateY(-1px); transform: translateY(-1px); } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a > svg{ display: block; width: 11px; fill: #064689; margin-left: 5px; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transition: fill .3s ease, -webkit-transform .3s ease; transition: fill .3s ease, -webkit-transform .3s ease; transition: transform .3s ease, fill .3s ease; transition: transform .3s ease, fill .3s ease, -webkit-transform .3s ease; margin-left: auto } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a:hover > svg, .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a.active > svg{ fill: #6bc8f8; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a.active > svg{ -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } @media screen and (min-width: 992px) { .navy-main-container { margin-bottom: -2px; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul /*.navy-main-container-wrap > ul > li > a + ul*/ { max-height: calc(100vh - 94px); overflow: auto; top: 38px; } header.ws-fixed .navy-main-container-wrap > ul > li.first-menu-in > a + ul /*header.ws-fixed .navy-main-container-wrap > ul > li > a + ul*/ { max-height: calc(100vh - 79px); top: 33px; } } @media screen and (min-width: 992px) { .navy-main-container-wrap > ul > li.first-menu-in > a + ul /*.navy-main-container-wrap > ul > li > a + ul*/ { max-height: calc(100vh - 98px); top: 40px; } header.ws-fixed .navy-main-container-wrap > ul > li.first-menu-in > a + ul /*header.ws-fixed .navy-main-container-wrap > ul > li > a + ul*/ { max-height: calc(100vh - 83px); top: 35px; } } @media screen and (min-width: 1200px) { .navy-main-container-wrap > ul > li.first-menu-in > a + ul /*.navy-main-container-wrap > ul > li > a + ul*/ { max-height: calc(100vh - 63px); top: 40px; } header.ws-fixed .navy-main-container-wrap > ul > li.first-menu-in > a + ul /*header.ws-fixed .navy-main-container-wrap > ul > li > a + ul*/ { max-height: calc(100vh - 53px); top: 35px; } } @media screen and (max-width: 991px) { .navy-main-container-wrap > ul > li { margin-right: 25px; } } @media screen and (max-width: 991px) { .navy-main-container-wrap { position: absolute; top: calc(100% + 0px); left: calc((100vw - 100%) / -2); width: 100vw; -webkit-transition: top .3s ease, height .3s ease; transition: top .3s ease, height .3s ease; height: calc(100vh - 111px); display: -webkit-box; display: -ms-flexbox; display: flex; display: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-color: rgba(42, 55, 75, 0.75); z-index: 12; padding: 0; } #wrapper.scrolled .navy-main-container-wrap { height: calc(100vh - 75px); } .ws-header.ws-fixed .navy-main-container-wrap { top: calc(100% + 12px); height: calc(100vh - 52px); } .navy-main-container-wrap .hide-bt-navy { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; margin-top: auto; border-top: 1px solid #e8f2f9; } .navy-main-container-wrap > ul{ overflow: auto; -webkit-box-align: normal; -ms-flex-align: normal; align-items: normal; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; background-color: #f6f1fd; } .navy-main-container-wrap > ul::-webkit-scrollbar-track { background-color: #ffffff; } .navy-main-container-wrap > ul::-webkit-scrollbar-thumb { background-color: #825DCA; width: 3px; height: 0; } .navy-main-container-wrap > ul::-webkit-scrollbar { width: 3px; height: 0; } .navy-main-container-wrap > ul > li.first-menu-in{ display: none; } .navy-main-container-wrap > ul > li.first-menu-in.pupils-in{ display: block; } .navy-main-container-wrap > ul > li { margin-right: 0; width: 100%; display: block; } .navy-main-container-wrap > ul > li.pupils-in, .navy-main-container-wrap > ul > li.main-dropdown-menu{ border-bottom: 4px solid #e9e0f6; } .navy-main-container-wrap > ul > li.pupils-in + li > a, .navy-main-container-wrap > ul > li.main-dropdown-menu + li > a{ border-top: 0; } .navy-main-container-wrap > ul > li > a { position: relative; border-top: 1px solid #e9e0f6; background-color: #ffffff; color: #19224C; padding: 0 15px 0 59px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; font-weight: 700; line-height: 1.4; text-transform: uppercase; cursor: pointer; -webkit-transition: color .3s ease, background-color .3s ease; transition: color .3s ease, background-color .3s ease; } .navy-main-container-wrap > ul > li > a:hover, .navy-main-container-wrap > ul > li > a.active { color: #ffffff; background-color: #825DCA; border-bottom-color: transparent; } .navy-main-container-wrap > ul > li.main-dropdown-menu > a, .navy-main-container-wrap > ul > li.pupils-in > a{ display: none; } .navy-main-container-wrap > ul > li > a > svg { position: absolute; right: 15px; top: 50%; -webkit-transform: translateY(-50%) rotateX(0deg); transform: translateY(-50%) rotateX(0deg); } .navy-main-container-wrap > ul > li > a.active > svg { -webkit-transform: translateY(-50%) rotateX(180deg); transform: translateY(-50%) rotateX(180deg); } .navy-main-container-wrap > ul > li > a.active > svg, .navy-main-container-wrap > ul > li > a:hover > svg { fill: #6bc8f8; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul /*.navy-main-container-wrap > ul > li > a + ul*/ { position: static; width: 100%; } .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul, .navy-main-container-wrap > ul > li.pupils-in > a + ul{ display: block; -webkit-box-shadow: none; box-shadow: none; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a /*.navy-main-container-wrap > ul > li > a + ul > li > a*/ { padding: 0 15px 0 25px; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a > i{ font-size: 18px; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul /*.navy-main-container-wrap > ul > li > a + ul > li > a + ul*/ { background-color: #fff; width: 100%; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.third-menu-in > a, .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in> a + ul > li.third-menu-in > a /*.navy-main-container-wrap > ul > li > a + ul > li > a + ul > li > a*/ { padding: 0 15px 0 50px; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.third-menu-in > a > i, .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a > i /*.navy-main-container-wrap > ul > li > a + ul > li > a + ul > li > a > i*/ { font-size: 16px; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a + ul{ display: none; width: 100%; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); -webkit-transition: top .3s ease; transition: top .3s ease; border-top: 1px solid #e9e0f6; background-color: #825DCA; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a + ul > li.fourth-menu-in > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; cursor: pointer; height: 39px; border-top: 0; background-color: #825DCA; padding: 4px 10px 0 75px; font-size: 14px; font-weight: 500; line-height: 1.4; color: #ffffff; -webkit-transition: color .3s ease; transition: color .3s ease; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a + ul > li.fourth-menu-in > a:hover, .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a + ul > li.fourth-menu-in > a.active{ color: rgba(213, 228, 235, 50%); } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a + ul > li.fourth-menu-in > a > i { font-size: 16px; padding-right: 11px; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @media screen and (max-width: 480px) { .navy-main-container-wrap { /* top: calc(100% + 18px); */ /* height: calc(100vh - 60px); */ } .ws-header.ws-fixed .navy-main-container-wrap { /* height: calc(100vh - 48px); */ } } @media screen and (max-width: 350px) { .navy-main-container-wrap { /* top: calc(100% + 16px); */ /* height: calc(100vh - 56px); */ } } /* ----------------------- Menu END ----------------------------- */ /* ----------------------- Header new position START ----------------------------- */ @media screen and (min-width: 992px) and (max-width: 1199px) { .logo-container-mod{ -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .navy-main-container{ -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; width: 100%; margin-left: 0; padding-top: 17px; -webkit-transition: padding-top .3s ease; transition: padding-top .3s ease; } header.ws-fixed .navy-main-container{ padding-top: 12px; } .infoicons-container-mod{ -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } @media screen and (min-width: 992px) and (max-width: 1199px) { .navy-main-container-wrap > ul > li.first-menu-in:not(.main-dropdown-menu) > a + ul { -webkit-transform: translateY(-6px); transform: translateY(-6px); } } @media screen and (min-width: 768px) and (max-width: 991px) { .navy-main-container-wrap > ul > li.first-menu-in:not(.main-dropdown-menu) > a + ul { /* -webkit-transform: translateY(-4px); */ /* transform: translateY(-4px); */ } } /* ----------------------- Header new position END ----------------------------- */ /* -------------------------------- Side Menu START -------------------------------- */ body#wrapper.body-overflow-hidden{ overflow: hidden; pointer-events: none; } @media screen and (min-width: 992px) { body#wrapper.body-overflow-hidden.no-ontouchdevice{ padding-right: 10px; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu{ margin: 0; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a{ display: none; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu{ display: block; position: fixed; top: 0; left: 0; bottom: 0; overflow: auto; width: calc(320px + 320px + 320px); display: none; -webkit-transition: none!important; transition: none!important; pointer-events: all; z-index: 100; -webkit-overflow-scrolling: touch; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu> a{ display: block; color: transparent; overflow: hidden; position: fixed; top: 0; left: 320px; right: 0; bottom: 0; z-index: 100; background-color: rgba(42, 55, 75, 0.75); cursor: default; -webkit-transition: none; transition: none; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu> a > svg{ display: none; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu> a:before{ content: ''; display: block; width: 22px; height: 22px; position: absolute; top: 20px; left: 20px; -webkit-mask-image: url("../img/mein-menu-close.svg"); mask-image: url("../img/mein-menu-close.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-size: 22px 22px; mask-size: 22px 22px; background-color: #F6F1FD; cursor: pointer; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu::-webkit-scrollbar-thumb, #header .navy-main-container-wrap > ul > li.main-dropdown-menu::-webkit-scrollbar { width: 0; height: 0; } #header.ws-fixed .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul, #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul{ position: relative; display: block; top: 0; left: 0; bottom: 0; max-height: unset; z-index: 101; background-color: #ffffff; margin-right: calc(320px + 320px); padding-top: 64px; padding-bottom: 20px; overflow: visible; width: 320px; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: none; transition: none; } .ontouchdevice #header .navy-main-container-wrap > ul > li.main-dropdown-menu> .sub-menu{ padding-bottom: 0; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu> .sub-menu:before{ content: ''; display: block; position: fixed; top: 0; left: 0; bottom: 0; width: 320px; background-color: #F6F1FD; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu> .sub-menu:after{ content: 'All Services'; display: block; font-weight: 500; font-size: 28px; line-height: 1; color: #19224C; height: 64px; background-color: #F6F1FD; text-align: left; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 36px; position: fixed; top: 0; left: 0; width: 320px; -webkit-box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); } #header .navy-main-container-wrap > ul > li.main-dropdown-menu> .sub-menu > li{ position: relative; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li > a{ font-weight: 500; font-size: 18px; line-height: 1.4; color: #19224C; background-color: #ffffff; text-align: left; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 9px; padding-left: 15px; padding-right: 50px; padding-bottom: 9px; position: relative; -webkit-transition: none; transition: none; text-transform: capitalize; border: 0; height: auto; border-bottom: 2px solid #E5D1FC; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li > a.hover{ color: #ffffff; background-color: #825DCA; border-bottom-color: transparent; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li > a > i { font-size: 22px; width: 50px; text-align: center; padding-right: 16px; -webkit-transform: none; transform: none; -webkit-transition: none; transition: none; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li > a > svg { display: none; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li:first-child > a{ padding-top: calc(9px + 2px); } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li:last-child > a{ border-bottom: 0; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li > a + ul{ position: absolute; top: 0; left: 100%; width: 320px; background-color: #F6F1FD; padding-top: 14px; padding-bottom: 14px; display: none; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: none; transition: none; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li > a + ul > li{ position: relative; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li > a + ul > li > a{ font-weight: 500; font-size: 16px; line-height: 140%; color: #000; background-color: #F6F1FD; text-align: left; display: block; padding: 0; padding-top: 4px; padding-left: 20px; padding-right: 40px; padding-bottom: 4px; position: relative; -webkit-transition: none; transition: none; height: auto; -webkit-box-align: normal; -ms-flex-align: normal; align-items: normal; text-transform: capitalize; border-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li > a + ul > li > a > i { width: 40px; text-align: center; padding-right: 16px; -webkit-transform: none; transform: none; -webkit-transition: none; transition: none; line-height: inherit; color: #C6A7F3; -webkit-transition: color .3s ease; transition: color .3s ease; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li > a + ul > li > a > svg{ display: none; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li > a + ul > li > a.hover{ color: #ffffff; background-color: #825DCA; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li > a + ul > li > a.hover > i { color: #ffffff; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li > a + ul > li > a + ul { position: absolute; top: 0; left: 100%; width: 320px; background-color: #825DCA; padding-top: 10px; padding-bottom: 10px; display: none; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li > a + ul > li > a + ul > li > a{ font-weight: 500; font-size: 16px; line-height: 140%; color: #ffffff; text-align: left; display: block; padding-top: 4px; padding-left: 20px; padding-right: 15px; padding-bottom: 4px; opacity: 1; -webkit-transition: none; transition: none; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li > a + ul > li > a + ul > li > a:hover{ opacity: 0.5; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li > a + ul > li > a + ul > li > a > i { width: 40px; text-align: center; padding-right: 16px; -webkit-transform: none; transform: none; -webkit-transition: none; transition: none; line-height: inherit; } } @media screen and (min-width: 768px) and (max-width: 991px){ #header .navy-main-container-wrap > ul > li.main-dropdown-menu > .sub-menu > li > .sub-menu { position: static; width: 100%; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li > a + ul{ border-bottom: 2px solid #825DCA; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul > li:last-child > a + ul{ border-bottom: 0; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > .sub-menu > li > .sub-menu > li > a { padding-left: 42px; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > .sub-menu > li > .sub-menu > li > .sub-menu { position: static; width: 100%; border-top: 1px solid #e9e0f6; /* padding-left: 60px; */ } #header.ws-fixed .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul, #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul, #header .navy-main-container-wrap > ul > li.main-dropdown-menu > .sub-menu:before, #header .navy-main-container-wrap > ul > li.main-dropdown-menu, #header .navy-main-container-wrap > ul > li, #header .navy-main-container-wrap > ul{ width: 480px; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu> a { left: 480px; overflow: visible; } #header.ws-fixed .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul, #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a + ul{ margin-right: 0; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > .sub-menu:after { width: 480px; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a { z-index: 103; } #header .navy-main-container-wrap > ul > li.main-dropdown-menu > a:before { left: -40px; background-color: #1d3e7d; } } @media screen and (max-width: 991px) { body#wrapper.body-overflow-hidden { pointer-events: all; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a { border-top: 1px solid #e9e0f6; background-color: #ffffff; color: #19224C; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a:hover, .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a.active { color: #ffffff; background-color: #825DCA; border-bottom-color: transparent; } #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a:hover:before, #header .navy-main-container-wrap > ul > li.menu-item-has-children > a + ul > li.menu-item-has-children > a.active:before { background-color: #ffffff; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a { border-top: 1px solid #e9e0f6; background-color: #F6F1FD; color: #000; padding-top: 4px; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a > i{ color: #C6A7F3; -webkit-transition: color .3s ease; transition: color .3s ease; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a:hover, .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a.active { color: #ffffff; background-color: #825DCA; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a:hover > i, .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a.active > i{ color: #ffffff; } .navy-main-container-wrap > ul > li.first-menu-in > a + ul > li.second-menu-in > a + ul > li.third-menu-in > a > i { -webkit-transform: translateY(-2px); transform: translateY(-2px); } } @media screen and (max-width: 767px){ .navy-main-container-wrap { height: calc(100vh - 60px); } #wrapper.scrolled .navy-main-container-wrap { height: calc(100vh - 55px); } } /* -------------------------------- Side Menu END -------------------------------- */}